/* ===========================================================================
   HALEWELL — Private Medical Practice
   Type:   Fraunces (display serif) · Manrope (text)
   Colour: deep forest-teal + warm bone + brass
   =========================================================================== */

:root{
  /* ---- surfaces ---- */
  --bone:       #FAF7F2;   /* page ground — warm, not white  */
  --bone-2:     #F3EDE3;   /* alternating band               */
  --white:      #FFFFFF;

  /* ---- ink ---- */
  --ink:        #12302A;   /* headings — deep forest         */
  --ink-2:      #2C4A43;
  --body:       #5C6E69;   /* body copy — 5.1:1 on bone      */

  /* ---- brand ---- */
  --teal:       #0E7C6F;   /* primary — 4.8:1 on bone        */
  --teal-deep:  #0A5A50;
  --teal-wash:  rgba(14,124,111,.08);
  --sand:       #C2A878;   /* brass accent                   */
  --sand-soft:  #E9DCC6;

  /* ---- lines ---- */
  --line:       rgba(18,48,42,.13);
  --line-soft:  rgba(18,48,42,.07);
  --line-light: rgba(250,247,242,.16);

  /* ---- shape ---- */
  --r-sm:       6px;
  --r-md:       14px;
  --r-lg:       26px;
  --r-pill:     100px;
  --arch:       50% 50% 10px 10px / 34% 34% 10px 10px;

  /* ---- depth — restrained, never heavy ---- */
  --sh-1:       0 1px 2px rgba(18,48,42,.04);
  --sh-2:       0 18px 44px -22px rgba(18,48,42,.22);
  --sh-3:       0 40px 90px -40px rgba(18,48,42,.34);

  --container:  1280px;
  --gutter:     28px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bone);
  color:var(--body);
  font-family:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:-.003em;
  /* clip, not hidden: hidden makes <body> a scroll container, which
     silently stops the sticky header from sticking */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
address{ font-style:normal; }

::selection{ background:var(--teal); color:var(--bone); }

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ------------------------------------------------------------- display -- */
/* Fraunces carries every heading. Its italic replaces the old script font. */
.display,
h1,h2,h3{
  margin:0;
  font-family:'Fraunces', 'Iowan Old Style', Georgia, serif;
  font-optical-sizing:auto;
  color:var(--ink);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.028em;
  font-variation-settings:'SOFT' 0, 'WONK' 0;
}
.display{ font-size:clamp(44px, 6.1vw, 86px); }
.display--md{ font-size:clamp(32px, 4.1vw, 56px); line-height:1.08; }

.display em,
h2 em, h3 em{
  font-style:italic;
  font-weight:300;
  color:var(--teal);
  font-variation-settings:'SOFT' 40, 'WONK' 1;
}

h4,h5{
  margin:0;
  font-family:'Manrope', sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--ink);
}
p{ margin:0; }

/* micro-label — the small tracked-out caps used above every heading */
.label{
  display:inline-block;
  margin-bottom:22px;
  padding-left:26px;
  position:relative;
  font-size:12px;
  font-weight:600;
  letter-spacing:.20em;
  text-transform:uppercase;
  color:var(--teal);
}
.label::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:16px; height:1px;
  background:var(--sand);
}

.lede{
  max-width:52ch;
  font-size:19px;
  line-height:1.6;
  color:var(--body);
}

/* film grain — a barely-there texture that stops flat colour looking cheap */
.grain{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- buttons -- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--ink);
  --btn-bd:transparent;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17px 34px;
  background:var(--btn-bg);
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--r-pill);
  font-size:15px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  isolation:isolate;
  transition:color .45s var(--ease-out), border-color .45s var(--ease-out),
             transform .45s var(--ease-out), background .45s var(--ease-out);
}
/* the fill sweeps up from the bottom on hover */
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
}
.btn:hover{ transform:translateY(-2px); }
.btn:hover::after{ transform:translateY(0); }

.btn--solid{ --btn-bg:var(--teal); --btn-fg:var(--bone); --btn-bd:var(--teal); }
.btn--solid::after{ background:var(--ink); }
.btn--solid:hover{ border-color:var(--ink); }

.btn--outline{ --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn--outline::after{ background:var(--ink); }
.btn--outline:hover{ color:var(--bone); border-color:var(--ink); }

.btn--quiet{
  padding-inline:6px;
  --btn-fg:var(--ink);
}
.btn--quiet::after{ display:none; }
.btn--quiet:hover{ color:var(--teal); transform:none; }
.btn--quiet span{ transition:transform .4s var(--ease-out); display:inline-block; }
.btn--quiet:hover span{ transform:translateX(5px); }

.btn--sm{ padding:13px 24px; font-size:14px; }
.btn--block{ width:100%; }

/* text link with a rule that wipes in */
.arrow{
  position:relative;
  display:inline-block;
  margin-top:20px;
  padding-bottom:3px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--teal);
}
.arrow::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--ease-out);
}
.arrow:hover::after{ transform:scaleX(1); transform-origin:left; }

/* --------------------------------------------------------- section heads -- */
.head{ max-width:640px; margin-bottom:72px; }
.head__text{ margin-top:20px; }
.head--center{ text-align:center; margin-inline:auto; }
.head--center .label{ padding-left:0; }
.head--center .label::before{ display:none; }
.head--row{
  max-width:none;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.head--light h2, .head--light .display{ color:var(--bone); }
.head--light .label{ color:var(--sand); }
.head--light em{ color:var(--sand); }

/* ============================================================ ANNOUNCE === */
.announce{
  position:relative;
  background:var(--ink);
  color:rgba(250,247,242,.82);
  font-size:13px;
  letter-spacing:.01em;
}
.announce__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:42px;
  flex-wrap:wrap;
  text-align:center;
}
.announce a{
  color:var(--sand);
  font-weight:600;
  transition:opacity .3s var(--ease);
}
.announce a:hover{ opacity:.72; }

/* long label on wide screens, short label on phones */
.show-sm{ display:none; }

/* ================================================================= NAV === */
.nav{
  position:sticky;
  top:0;
  z-index:100;
  padding:22px 0;
  transition:padding .45s var(--ease);
}
/* The frosted background lives on a pseudo-element. A backdrop-filter on
   .nav itself would become the containing block for the position:fixed
   mobile menu inside it, trapping that menu inside the header bar. */
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(250,247,242,.88);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--line-soft);
  opacity:0;
  transition:opacity .45s var(--ease);
}
.nav.is-stuck{ padding:14px 0; }
.nav.is-stuck::before{ opacity:1; }
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.brand{ display:inline-flex; align-items:center; gap:13px; }
.brand__mark{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  flex:none;
  color:var(--teal);
  transition:transform .6s var(--ease-out);
}
.brand__mark svg{ width:100%; height:100%; }
.brand:hover .brand__mark{ transform:rotate(90deg); }
.brand__text{
  display:flex;
  flex-direction:column;
  font-family:'Fraunces', Georgia, serif;
  font-size:25px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
}
.brand__text small{
  margin-top:4px;
  font-family:'Manrope', sans-serif;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--body);
}
.brand--light .brand__text{ color:var(--bone); }
.brand--light .brand__text small{ color:rgba(250,247,242,.55); }
.brand--light .brand__mark{ color:var(--sand); }

.nav__links{ display:flex; align-items:center; gap:36px; }
/* direct children only — so these don't restyle the button in the mobile menu */
.nav__links > a{
  position:relative;
  font-size:15px;
  font-weight:500;
  color:var(--ink-2);
  transition:color .3s var(--ease);
}
.nav__links > a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%; height:1px;
  background:var(--teal);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav__links > a:hover, .nav__links > a.is-active{ color:var(--teal); }
.nav__links > a:hover::after,
.nav__links > a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__menu-foot{ display:none; }

.nav__right{ display:flex; align-items:center; gap:18px; }
.nav__tel{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  transition:color .3s var(--ease);
}
.nav__tel:hover{ color:var(--teal); }

.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  width:46px; height:46px;
  padding:0 12px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
}
.burger span{
  display:block;
  height:1.5px;
  background:var(--ink);
  transition:transform .4s var(--ease-out), opacity .3s var(--ease);
}
.burger.is-open span:nth-child(1){ transform:translateY(3.75px) rotate(45deg); }
.burger.is-open span:nth-child(2){ transform:translateY(-3.75px) rotate(-45deg); }

/* ================================================================ HERO === */
.hero{
  position:relative;
  overflow:hidden;
  padding:86px 0 120px;
  background:
    radial-gradient(1100px 620px at 78% 6%, rgba(14,124,111,.07), transparent 62%),
    linear-gradient(180deg, var(--bone) 0%, var(--bone) 62%, var(--bone-2) 100%);
}
.hero__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:80px;
}
.hero__copy .display{ margin-bottom:30px; }
.hero__cta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:40px;
}

.hero__facts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  margin:56px 0 0;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.hero__facts dt{
  font-family:'Fraunces', Georgia, serif;
  font-size:23px;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--ink);
}
.hero__facts dd{
  margin:5px 0 0;
  font-size:13.5px;
  line-height:1.45;
  color:var(--body);
}

.hero__media{
  position:relative;
  margin:0;
  display:grid;
  place-items:center;
}
.hero__arch{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(104%, 540px);
  aspect-ratio:4/5;
  border:1px solid var(--line);
  border-radius:var(--arch);
}
.hero__img{
  position:relative;
  z-index:2;
  width:min(94%, 488px);
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--arch);
  box-shadow:var(--sh-3);
}
.hero__seal{
  position:absolute;
  z-index:3;
  left:-14px;
  bottom:46px;
  display:flex;
  align-items:center;
  gap:13px;
  max-width:270px;
  padding:16px 22px;
  background:var(--bone);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  box-shadow:var(--sh-2);
}
.hero__seal svg{ width:26px; height:26px; flex:none; color:var(--sand); }
.hero__seal span{
  display:flex;
  flex-direction:column;
  font-size:12.5px;
  line-height:1.4;
  color:var(--body);
}
.hero__seal strong{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.01em;
}

/* =============================================================== CREDS === */
.creds{
  padding:46px 0;
  background:var(--bone-2);
  border-block:1px solid var(--line-soft);
}
.creds__title{
  margin-bottom:20px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--body);
  text-align:center;
}
.creds__list{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px 46px;
}
.creds__list li{
  font-family:'Fraunces', Georgia, serif;
  font-size:17px;
  letter-spacing:-.01em;
  color:var(--ink-2);
  opacity:.72;
}

/* ============================================================ PRACTICE === */
.practice{ padding:140px 0; }
.practice__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:96px;
}
.practice__media{ position:relative; margin:0; padding-bottom:74px; }
.practice__img-a{
  position:relative;
  z-index:1;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--arch);
}
.practice__img-b{
  position:absolute;
  z-index:2;
  right:-8%;
  bottom:0;
  width:47%;
  aspect-ratio:1;
  object-fit:cover;
  border:9px solid var(--bone);
  border-radius:var(--r-md);
  box-shadow:var(--sh-2);
}
.practice__rule{
  position:absolute;
  left:-34px; top:38px;
  width:1px; height:130px;
  background:linear-gradient(180deg, var(--sand), transparent);
}
.practice__copy p + p{ margin-top:18px; }

.ticks{ margin:36px 0 40px; display:grid; gap:15px; }
.ticks li{
  position:relative;
  padding-left:32px;
  font-size:16px;
  color:var(--ink-2);
}
.ticks li::before{
  content:"";
  position:absolute;
  left:0; top:10px;
  width:15px; height:1.5px;
  background:var(--sand);
}

/* ============================================================= FIGURES === */
.figures{ padding:0 0 140px; }
.figures__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
}
.figure{
  padding:52px 34px;
  background:var(--bone);
  text-align:center;
}
.figure__num{
  display:block;
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(40px, 4.4vw, 60px);
  font-weight:300;
  line-height:1;
  letter-spacing:-.035em;
  color:var(--ink);
  font-variation-settings:'SOFT' 20;
}
.figure__label{
  display:block;
  margin-top:14px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--body);
}

/* ================================================================ CARE === */
.care{ padding:0 0 140px; }
.care__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
}
.card{
  background:var(--white);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out),
             border-color .6s var(--ease-out);
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:var(--sh-3);
  border-color:transparent;
}
.card__media{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3.1;
}
.card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.card:hover .card__media img{ transform:scale(1.05); }
.card__index{
  position:absolute;
  left:22px; top:22px;
  display:grid;
  place-items:center;
  width:44px; height:44px;
  background:rgba(250,247,242,.92);
  backdrop-filter:blur(6px);
  border-radius:var(--r-pill);
  font-family:'Fraunces', Georgia, serif;
  font-size:14px;
  color:var(--ink);
}
.card__body{ padding:32px 30px 34px; }
.card__body h3{ font-size:26px; margin-bottom:14px; }
.card__body p{ font-size:15.5px; line-height:1.6; }

/* ============================================================ APPROACH === */
.approach{
  position:relative;
  overflow:hidden;
  padding:130px 0;
  background:var(--ink);
  color:rgba(250,247,242,.70);
}
.approach__inner{ position:relative; z-index:2; }
.approach .head{ margin-bottom:76px; }

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-light);
}
.step{
  padding:46px 40px 10px;
  background:var(--ink);
}
/* keep the first/last step flush with the container edge */
.step:first-child{ padding-left:0; }
.step:last-child{ padding-right:0; }
.step__num{
  display:block;
  margin-bottom:26px;
  font-family:'Fraunces', Georgia, serif;
  font-size:15px;
  letter-spacing:.16em;
  color:var(--sand);
}
.step h3{
  margin-bottom:14px;
  font-size:27px;
  color:var(--bone);
}
.step p{ font-size:15.5px; line-height:1.62; }

/* ============================================================== VOICES === */
.voices{ padding:140px 0; background:var(--bone-2); }
.voices__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
}
.voice{
  margin:0;
  display:flex;
  flex-direction:column;
  padding:40px 34px 34px;
  background:var(--bone);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.voice:hover{ transform:translateY(-6px); box-shadow:var(--sh-2); }
.voice blockquote{
  margin:0 0 30px;
  font-family:'Fraunces', Georgia, serif;
  font-size:20px;
  font-weight:300;
  line-height:1.48;
  letter-spacing:-.015em;
  color:var(--ink);
  font-variation-settings:'SOFT' 20;
}
.voice blockquote::before{
  content:"“";
  display:block;
  margin-bottom:-16px;
  font-size:54px;
  line-height:1;
  color:var(--sand);
}
.voice figcaption{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
}
.voice figcaption img{
  width:46px; height:46px;
  flex:none;
  border-radius:var(--r-pill);
  object-fit:cover;
}
.voice figcaption span{ display:flex; flex-direction:column; }
.voice figcaption strong{
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}
.voice figcaption small{ font-size:13px; color:var(--body); }

/* ============================================================= JOURNAL === */
.journal{ padding:140px 0; }
.journal__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.post__media{
  display:block;
  overflow:hidden;
  border-radius:var(--r-md);
  margin-bottom:24px;
  aspect-ratio:5/4;
}
.post__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.1s var(--ease-out);
}
.post:hover .post__media img{ transform:scale(1.055); }
.post__meta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--body);
}
.post__meta span:first-child{ color:var(--teal); }
.post__meta span + span::before{
  content:"";
  display:inline-block;
  width:12px; height:1px;
  margin-right:14px;
  vertical-align:middle;
  background:var(--line);
}
.post h3{
  font-size:25px;
  line-height:1.22;
  margin-bottom:12px;
  /* reserve two lines so the summaries align across the row */
  min-height:2.44em;
}
.post h3 a{
  background-image:linear-gradient(var(--teal),var(--teal));
  background-size:0% 1px;
  background-repeat:no-repeat;
  background-position:left 92%;
  transition:background-size .5s var(--ease-out), color .4s var(--ease);
}
.post:hover h3 a{ background-size:100% 1px; color:var(--teal); }
.post p{ font-size:15.5px; }

/* ============================================================= CONTACT === */
.contact{ padding:0 0 140px; }
.contact__inner{
  display:grid;
  grid-template-columns:.92fr 1.08fr;
  align-items:center;
  gap:80px;
}
.contact__media{ margin:0; }
.contact__media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:var(--arch);
  box-shadow:var(--sh-2);
}
.contact__copy > p{ margin-top:20px; max-width:52ch; }

.form{ margin-top:40px; }
.form__row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.field{ margin-bottom:20px; }
.field label{
  display:block;
  margin-bottom:9px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:15px 0;
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  outline:none;
  transition:border-color .45s var(--ease-out);
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C6E69' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  cursor:pointer;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input::placeholder,
.field textarea::placeholder{ color:rgba(92,110,105,.55); }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-bottom-color:var(--teal); }
.field input.is-invalid,
.field textarea.is-invalid{ border-bottom-color:#B5483C; }

.form .btn{ margin-top:14px; }
.form__note{
  min-height:22px;
  margin-top:16px;
  font-size:14.5px;
  color:var(--teal);
}
.form__note--light{ color:var(--sand); }
.form__legal{
  margin-top:8px;
  font-size:12.5px;
  color:var(--body);
  opacity:.75;
}

/* ============================================================== FOOTER === */
.footer{
  position:relative;
  overflow:hidden;
  padding:110px 0 34px;
  background:var(--ink);
  color:rgba(250,247,242,.68);
}
.footer .container{ position:relative; z-index:2; }

.footer__top{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
  padding-bottom:64px;
  border-bottom:1px solid var(--line-light);
}
.footer__statement{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(22px, 2.3vw, 31px);
  font-weight:300;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--bone);
}
.footer__statement em{
  font-style:italic;
  color:var(--sand);
  font-variation-settings:'SOFT' 40,'WONK' 1;
}

.footer__grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1.5fr;
  gap:50px;
  padding:64px 0;
  border-bottom:1px solid var(--line-light);
}
.footer h4{
  margin-bottom:22px;
  font-size:11.5px;
  letter-spacing:.19em;
  color:var(--sand);
}
.footer__col ul{ display:grid; gap:12px; }
.footer__col a{ transition:color .3s var(--ease); }
.footer__col a:hover{ color:var(--bone); }
.footer address,
.footer__col li{ font-size:15px; line-height:1.6; }
.footer__muted{ opacity:.55; }
.footer__col--news p{ font-size:14.5px; margin-bottom:22px; }

.news{
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--line-light);
  transition:border-color .4s var(--ease);
}
.news:focus-within{ border-bottom-color:var(--sand); }
.news input{
  flex:1;
  min-width:0;
  padding:12px 0;
  background:transparent;
  border:0;
  outline:none;
  font-family:inherit;
  font-size:15px;
  color:var(--bone);
}
.news input::placeholder{ color:rgba(250,247,242,.42); }
.news button{
  flex:none;
  width:38px; height:38px;
  display:grid;
  place-items:center;
  background:transparent;
  border:1px solid var(--line-light);
  border-radius:var(--r-pill);
  color:var(--sand);
  font-size:15px;
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease-out);
}
.news button:hover{ background:var(--sand); color:var(--ink); transform:translateX(3px); }

.footer__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-top:30px;
  font-size:13px;
  opacity:.6;
}
.footer__legal{ display:flex; gap:26px; }
.footer__legal a:hover{ color:var(--bone); }

/* =============================================================== TOTOP === */
.totop{
  position:fixed;
  right:28px; bottom:28px;
  z-index:90;
  display:grid;
  place-items:center;
  width:48px; height:48px;
  border-radius:var(--r-pill);
  background:var(--ink);
  color:var(--bone);
  box-shadow:var(--sh-2);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .5s var(--ease), visibility .5s var(--ease),
             transform .5s var(--ease-out), background .4s var(--ease);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--teal); }
.totop svg{ width:19px; height:19px; }

/* ============================================================== REVEAL === */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ========================================================== RESPONSIVE === */

@media (max-width:1200px){
  .practice__inner{ gap:64px; }
  .contact__inner{ gap:60px; }
  .nav__links{ gap:26px; }
}

@media (max-width:1024px){
  :root{ --gutter:24px; }

  .nav__tel{ display:none; }
  .burger{ display:flex; }
  .nav__links{
    position:fixed;
    inset:0 0 auto 0;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    bottom:0;
    align-items:stretch;
    height:100vh;
    height:100dvh;
    padding:118px var(--gutter) 32px;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:var(--bone);
    visibility:hidden;
    opacity:0;
    transform:translateY(-12px);
    transition:opacity .45s var(--ease-out), transform .6s var(--ease-out),
               visibility 0s linear .6s;
  }
  .nav__links.is-open{
    visibility:visible;
    opacity:1;
    transform:none;
    transition:opacity .45s var(--ease-out), transform .6s var(--ease-out),
               visibility 0s;
  }
  .nav__links > a{
    width:100%;
    padding:16px 0;
    font-family:'Fraunces', Georgia, serif;
    font-size:28px;
    font-weight:400;
    letter-spacing:-.02em;
    color:var(--ink);
    border-bottom:1px solid var(--line-soft);
  }
  .nav__links > a::after{ display:none; }

  .nav__menu-foot{
    display:grid;
    gap:14px;
    margin-top:auto;
    padding-top:34px;
    text-align:center;
  }
  .nav__menu-tel{ font-size:18px; font-weight:600; color:var(--ink); }
  .nav__menu-foot p{ font-size:13px; color:var(--body); }

  /* logo and close button stay above the open menu */
  .brand, .nav__right{ position:relative; z-index:2; }
  html.menu-open{ overflow:hidden; }

  /* stacked: headline first, so it's above the fold on a phone */
  .hero{ padding:56px 0 96px; }
  .hero__inner{ grid-template-columns:1fr; gap:56px; }
  .hero__copy{ max-width:640px; }
  .hero__media{ max-width:500px; margin-inline:auto; width:100%; }
  .hero__seal{ left:0; }

  .practice{ padding:104px 0; }
  .practice__inner,
  .contact__inner{ grid-template-columns:1fr; gap:60px; }
  .practice__media,
  .contact__media{ max-width:520px; margin-inline:auto; width:100%; }
  .practice__rule{ display:none; }

  .figures{ padding-bottom:104px; }
  .figures__grid{ grid-template-columns:repeat(2,1fr); }

  .care{ padding-bottom:104px; }
  .care__grid,
  .voices__grid,
  .journal__grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .care__grid > :last-child,
  .voices__grid > :last-child,
  .journal__grid > :last-child{ grid-column:1 / -1; }

  /* a full-width last card would be nearly all image — lay it out sideways */
  .care__grid > .card:last-child{ display:grid; grid-template-columns:1fr 1fr; }
  .care__grid > .card:last-child .card__media{ aspect-ratio:auto; min-height:260px; }
  .care__grid > .card:last-child .card__body{ align-self:center; }
  .journal__grid > .post:last-child{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto 1fr;
    column-gap:28px;
  }
  .journal__grid > .post:last-child .post__media{ grid-row:1 / span 3; margin-bottom:0; }
  .journal__grid > .post:last-child h3{ min-height:0; }

  .approach{ padding:104px 0; }
  .steps{ grid-template-columns:1fr; }
  .step,
  .step:first-child,
  .step:last-child{ padding:34px 0; }
  .step__num{ margin-bottom:14px; }

  .voices, .journal{ padding:104px 0; }
  .contact{ padding-bottom:104px; }

  .footer__top{ grid-template-columns:1fr; gap:36px; align-items:start; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:40px; }
  .footer__col--news{ grid-column:1 / -1; }
}

@media (max-width:720px){
  :root{ --gutter:20px; --arch:50% 50% 8px 8px / 26% 26% 8px 8px; }

  body{ font-size:16px; }
  .lede{ font-size:17px; }
  .hide-sm{ display:none; }
  .show-sm{ display:inline; }

  .display{ font-size:clamp(36px, 10.4vw, 48px); line-height:1.06; }
  .display--md{ font-size:clamp(30px, 8.4vw, 40px); line-height:1.1; }

  /* ---- announce + header ---- */
  .announce{ font-size:12.5px; }
  .announce__inner{ min-height:38px; gap:10px; flex-wrap:nowrap; }

  .nav{ padding:14px 0; }
  .nav.is-stuck{ padding:10px 0; }
  .nav__inner{ gap:12px; }
  .nav__right{ gap:10px; }
  .brand{ gap:10px; }
  .brand__text{ font-size:22px; }
  .nav .brand__text small{ display:none; }
  .brand__mark{ width:36px; height:36px; }
  .nav__cta{ padding:11px 18px; }
  .burger{ width:42px; height:42px; padding:0 11px; }
  .nav__links{ padding-top:96px; }
  .nav__links > a{ font-size:26px; padding:14px 0; }

  /* ---- hero ---- */
  .hero{ padding:36px 0 72px; }
  .hero__inner{ gap:44px; }
  .hero__copy .display{ margin-bottom:22px; }
  .hero__cta{ gap:6px; margin-top:30px; }
  .hero__cta .btn--solid,
  .hero__cta .btn--quiet{ width:100%; }
  .hero__cta .btn--quiet{ padding-block:14px; }
  .hero__facts{ grid-template-columns:1fr; gap:0; margin-top:34px; padding-top:0; }
  .hero__facts > div{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .hero__facts dt{ font-size:20px; }
  .hero__facts dd{ margin:0; text-align:right; }
  .hero__arch{ display:none; }
  .hero__img{ width:100%; }
  .hero__seal{ position:static; max-width:none; width:100%; margin-top:14px; }

  /* ---- credentials: tidy 2x2 instead of a ragged wrap ---- */
  .creds{ padding:30px 0; }
  .creds__title{ margin-bottom:14px; }
  .creds__list{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
  .creds__list li{ font-size:14px; line-height:1.3; text-align:center; }

  .head{ margin-bottom:40px; }
  .head--row{ align-items:flex-start; gap:22px; }
  .head--row .btn{ width:100%; }

  /* ---- practice ---- */
  .practice{ padding:76px 0; }
  .practice__inner{ gap:44px; }
  .practice__media{ padding-bottom:52px; }
  .practice__img-b{ width:44%; right:0; border-width:6px; }
  .ticks{ margin:28px 0 32px; }
  .ticks li{ font-size:15.5px; }
  .practice__copy .btn{ width:100%; }

  /* ---- figures: 2x2 so four numbers don't eat a whole screen ---- */
  .figures{ padding-bottom:76px; }
  .figures__grid{ grid-template-columns:1fr 1fr; }
  .figure{ padding:30px 10px; }
  .figure__num{ font-size:38px; }
  .figure__label{ margin-top:10px; font-size:11.5px; letter-spacing:.04em; line-height:1.35; }

  /* ---- care / voices / journal: single column ---- */
  .care{ padding-bottom:76px; }
  .care__grid,
  .voices__grid,
  .journal__grid{ grid-template-columns:1fr; gap:22px; }
  .care__grid > :last-child,
  .voices__grid > :last-child,
  .journal__grid > :last-child{ grid-column:auto; }
  .care__grid > .card:last-child,
  .journal__grid > .post:last-child{ display:block; }
  .care__grid > .card:last-child .card__media{ aspect-ratio:4/3.1; min-height:0; }
  .journal__grid > .post:last-child .post__media{ margin-bottom:18px; }
  .card__body{ padding:24px 22px 26px; }
  .card__body h3{ font-size:23px; }

  .approach{ padding:76px 0; }
  .approach .head{ margin-bottom:28px; }
  .step,
  .step:first-child,
  .step:last-child{ padding:26px 0; }
  .step h3{ font-size:23px; }

  .voices, .journal{ padding:76px 0; }
  .voice{ padding:28px 22px 24px; }
  .voice blockquote{ font-size:18px; margin-bottom:24px; }
  .post h3{ font-size:22px; min-height:0; }
  .post__media{ margin-bottom:18px; }

  /* ---- contact ---- */
  .contact{ padding-bottom:76px; }
  .contact__inner{ gap:40px; }
  .contact__media img{ aspect-ratio:3/2; }
  .form{ margin-top:30px; }
  .form__row{ grid-template-columns:1fr; gap:0; }

  /* ---- footer ---- */
  .footer{ padding:72px 0 26px; }
  .footer__top{ padding-bottom:44px; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:34px 20px; padding:42px 0; }
  .footer__col--news{ grid-column:1 / -1; }
  .footer__col li,
  .footer address{ font-size:14.5px; overflow-wrap:anywhere; }
  .footer__col ul{ gap:4px; }
  .footer__col ul a{ display:inline-block; padding-block:5px; }   /* bigger tap targets */
  .footer__bar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .footer__legal{ gap:22px; }

  .totop{ right:16px; bottom:16px; width:44px; height:44px; }
}

/* small phones (iPhone SE / older Android) */
@media (max-width:380px){
  :root{ --gutter:16px; }
  .brand__text{ font-size:20px; }
  .brand__mark{ width:32px; height:32px; }
  .nav__cta{ padding:10px 14px; font-size:13px; }
  .announce p{ display:none; }
  .figure__num{ font-size:34px; }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__col--news{ grid-column:auto; }
}

/* ------------------------------------------------ touch devices ---------- */
/* hover lifts "stick" after a tap on phones, so drop them there */
@media (hover:none){
  a, button{ -webkit-tap-highlight-color:transparent; }
  .btn:hover,
  .card:hover,
  .voice:hover{ transform:none; }
  .btn:hover::after{ transform:translateY(101%); }
  .btn--solid:hover{ border-color:var(--teal); }
  .btn--outline:hover{ color:var(--ink); border-color:var(--line); }
  .card:hover{ box-shadow:none; border-color:var(--line-soft); }
  .voice:hover{ box-shadow:none; }
  .card:hover .card__media img,
  .post:hover .post__media img{ transform:none; }
  .btn:active{ transform:scale(.98); }
}

/* --------------------------------------------------- reduced motion ------ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}