/* Alignment Relational Therapy — static build */

/* ---- self-hosted fonts ---- */
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('/assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('/assets/fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Source Serif 4';
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url('/assets/fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- base (from design) ---- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:#F4EFE4;color:#1A1A14;font-family:'Hanken Grotesk',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
::selection{background:#8C2010;color:#F4EFE4;}
a{text-decoration:none;color:inherit;}
a:hover{color:#8C2010;}
/* Focus indicator (WCAG 2.4.7 / 1.4.11).
   The original single navy ring scored 1.09:1 on the navy sections, 1.13:1 on
   the red CTA bands and 1.72:1 on the dark footer — effectively invisible for
   keyboard users. No single colour clears 3:1 against both cream and near-black,
   so this draws a light ring with a dark halo: whichever the background, one of
   the two is always visible. */
:focus-visible{
  outline:3px solid #F4EFE4;
  outline-offset:2px;
  box-shadow:0 0 0 6px #1A1A14;
  border-radius:2px;
}
/* Windows High Contrast / forced-colors: defer to the system highlight colour. */
@media (forced-colors: active){
  :focus-visible{outline:3px solid Highlight;box-shadow:none;}
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;}
.skip-link:focus{left:12px;top:12px;position:fixed;background:#8C2010;color:#F4EFE4;font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;padding:12px 18px;border-radius:4px;}
@keyframes arcDraw{from{stroke-dashoffset:760;}to{stroke-dashoffset:0;}}
@keyframes floatUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes eftLeft{0%,100%{transform:translateX(-82px);}18%{transform:translateX(-38px);}34%,42%{transform:translateX(0px);}62%,72%{transform:translateX(-210px);}88%{transform:translateX(-82px);}}
@keyframes eftRight{0%,100%{transform:translateX(82px);}18%{transform:translateX(38px);}34%,42%{transform:translateX(0px);}62%,72%{transform:translateX(210px);}88%{transform:translateX(82px);}}
@keyframes eftCenter{0%,88%,100%{opacity:1;transform:scale(1);}18%{opacity:.75;transform:scale(.8);}34%,42%{opacity:.32;transform:scale(.55);}62%,72%{opacity:.08;transform:scale(.28);}}
@keyframes eftGlow{0%,88%,100%{opacity:.17;transform:scale(1.12);}18%{opacity:.14;transform:scale(.95);}34%,42%{opacity:.09;transform:scale(.72);}62%,72%{opacity:.015;transform:scale(.35);}}
@keyframes eftEchoL1{0%,100%{transform:translateX(-104px);opacity:.17;}18%{transform:translateX(-58px);opacity:.20;}34%,42%{transform:translateX(-18px);opacity:.12;}62%,72%{transform:translateX(-238px);opacity:.13;}88%{transform:translateX(-104px);opacity:.17;}}
@keyframes eftEchoL2{0%,100%{transform:translateX(-126px);opacity:.10;}18%{transform:translateX(-76px);opacity:.13;}34%,42%{transform:translateX(-36px);opacity:.08;}62%,72%{transform:translateX(-260px);opacity:.08;}88%{transform:translateX(-126px);opacity:.10;}}
@keyframes eftEchoR1{0%,100%{transform:translateX(104px);opacity:.17;}18%{transform:translateX(58px);opacity:.20;}34%,42%{transform:translateX(18px);opacity:.12;}62%,72%{transform:translateX(238px);opacity:.13;}88%{transform:translateX(104px);opacity:.17;}}
@keyframes eftEchoR2{0%,100%{transform:translateX(126px);opacity:.10;}18%{transform:translateX(76px);opacity:.13;}34%,42%{transform:translateX(36px);opacity:.08;}62%,72%{transform:translateX(260px);opacity:.08;}88%{transform:translateX(126px);opacity:.10;}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}}
@media (max-width:900px){
  [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;}
  nav{flex-wrap:wrap !important;gap:14px !important;}
  nav>div:last-child{flex-wrap:wrap !important;gap:14px 18px !important;}
}
@media (max-width:600px){
  h1{font-size:clamp(30px,8.4vw,40px) !important;}
  main section{padding-left:20px !important;padding-right:20px !important;}
}

/* ---- hover states (were React handlers) ---- */
.hv-linkHover:hover{color:#8C2010;}
.hv-ctaPillHover:hover{background:#6E190C;}
.hv-btnPrimaryHover:hover{background:#6E190C;}
.hv-btnGhostHover:hover{background:#1A1A14;color:#F4EFE4;border-color:#1A1A14;}
.hv-btnOnRedHover:hover{background:#EDE6D6;}
.hv-cardHover:hover{background:#E5DAC6;}
.hv-contactCardHover:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(26,26,20,.22);}
.hv-menuItemHover:hover{background:#EDE5D6;}

/* ---- layout hardening (static build) ---- */
img,svg,video{max-width:100%;}
img{height:auto;}
main{display:block;}
a{color:inherit;}

/* ---- primary nav dropdowns (CSS first, JS enhances) ---- */
.nav-group{position:relative;}
.nav-panel{display:none;}
/* Only ONE mechanism may reveal a panel on any given device, otherwise a
   click-opened panel and a hover-opened one can both be visible and overlap.
   Pointer devices use hover; two sibling groups can never both be :hover, so
   overlap becomes structurally impossible rather than something JS has to
   chase. Keyboard focus works everywhere. Touch devices wider than the mobile
   breakpoint (tablet landscape) have no hover, so there the trigger toggles. */
@media (hover:hover){
  .nav-group:hover > .nav-panel{display:block;}
  /* Focus and hover are separate mechanisms, so a keyboard-focused group and a
     mouse-hovered group could still both be open. The pointer wins: whenever
     any group is hovered, no other group's panel may show. */
  nav:has(.nav-group:hover) .nav-group:not(:hover) > .nav-panel{display:none;}
}
.nav-group:focus-within > .nav-panel{display:block;}
@media (hover:none){
  .nav-trigger[aria-expanded="true"] + .nav-panel{display:block;}
}
/* SC 1.4.13 Content on Hover or Focus — "Dismissible".
   Escape resets aria-expanded, but the :hover rule above would immediately
   re-show the panel while the pointer still rests on the group. This lets
   Escape actually dismiss it; hovering away and back clears the state. */
.nav-group.nav-dismissed:hover > .nav-panel{display:none;}

/* SC 2.4.11 Focus Not Obscured — defensive. The header is not currently sticky
   (an ancestor's overflow-x:hidden breaks containment), but if that is ever
   fixed, keep keyboard focus clear of it instead of scrolling underneath. */
a[href],button,[tabindex]:not([tabindex="-1"]),:target{scroll-margin-top:96px;}

.nav-trigger{font-family:inherit;}
/* Each panel carries an inline min-width:236px, sized for the longest item in
   the About menu ("Emotionally Focused Therapy"). Services only needs ~145px,
   so it was rendering 91px wider than its content. Lower the floor and let each
   menu size itself; About is unaffected because its content still exceeds it. */
.nav-panel > div{min-width:170px !important;}

.nav-panel a{white-space:nowrap;}
/* nav links carry inline colours from the design, so this needs !important
   to mark the current page — it was silently losing on desktop. */
/* The CTA pill is cream-on-red; excluding it keeps aria-current from
   recolouring that text to red-on-red (1:1 contrast, invisible). */
nav a[aria-current="page"]:not(.hv-ctaPillHover){color:#8C2010 !important;}

/* ---- hamburger nav (<=900px) ----
   Below this width the design's own rules wrapped the link row onto three
   lines, and an opening dropdown was inserted into that wrapped flex row,
   shoving every sibling sideways. Collapse to a toggle + stacked panel. */
.nav-toggle{display:none;}

@media (max-width:900px){
  nav{position:relative;flex-wrap:nowrap !important;gap:16px !important;}

  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:10px;margin:-10px -8px -10px 0;
    background:none;border:0;cursor:pointer;flex:0 0 auto;
  }
  .nav-toggle-bar{
    display:block;width:24px;height:2px;background:#8C2010;border-radius:2px;
    transition:transform .18s ease,opacity .18s ease;
  }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav-menu{
    display:none !important;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column !important;align-items:stretch !important;
    flex-wrap:nowrap !important;gap:0 !important;
    background:#FBF8F0;border-top:1px solid rgba(26,26,20,.12);
    box-shadow:0 16px 32px rgba(26,26,20,.16);
    padding:6px 0 16px;
    max-height:calc(100vh - 92px);overflow-y:auto;
  }
  .nav-toggle[aria-expanded="true"] + .nav-menu{display:flex !important;}

  .nav-menu > *{width:100%;}
  .nav-menu a,
  .nav-menu .nav-trigger{
    display:block;width:100%;text-align:left;
    padding:13px clamp(24px,5vw,40px) !important;
  }

  /* dropdowns stop being popovers: each becomes a labelled group, always open */
  .nav-group{position:static;}
  .nav-group .nav-trigger{
    pointer-events:none;font-size:11.5px !important;font-weight:600 !important;
    letter-spacing:.16em !important;text-transform:uppercase;color:#8C7F6B !important;
    padding-bottom:2px !important;
  }
  .nav-group .nav-trigger span[aria-hidden]{display:none;}
  .nav-group .nav-panel{
    display:block !important;position:static !important;padding-top:0 !important;
  }
  .nav-group .nav-panel > div{
    min-width:0 !important;background:transparent !important;
    border:0 !important;box-shadow:none !important;border-radius:0 !important;
  }
  .nav-group .nav-panel a{
    border-bottom:0 !important;font-size:15px !important;
    padding-left:calc(clamp(24px,5vw,40px) + 14px) !important;
  }

  /* One type style for every destination in the menu. The top-level links
     (Insurance & Fees, FAQ) still carried their desktop inline styles, so they
     rendered 13.5px/grey against the group children's 15px/near-black. Only the
     group labels are meant to look different. */
  .nav-menu a:not(.hv-ctaPillHover){
    font-size:15px !important;
    font-weight:500 !important;
    color:#1A1A14 !important;
    letter-spacing:normal !important;
    text-transform:none !important;
  }
  /* "All services" stays the accent link it is on desktop, but drops the
     uppercase + letterspacing that made it read as a section heading here. */
  .nav-menu .nav-panel a[href="/services/"]{color:#8C2010 !important;font-weight:600 !important;}
  /* current page still wins over the shared colour above */
  .nav-menu a[aria-current="page"]:not(.hv-ctaPillHover){color:#8C2010 !important;}

  /* the Get started pill keeps its shape instead of going full-bleed */
  .nav-menu > a.hv-ctaPillHover{
    width:auto !important;margin:12px clamp(24px,5vw,40px) 4px;
    text-align:center;border-radius:999px;
  }
}

/* On the narrowest phones the wordmark wrapped to two lines, making the
   sticky header 98px instead of 69px. Ease it down so it fits on one. */
/* Wordmark. The inline style sets 21px; these scale it up and then step it
   back down on narrow phones so it always stays on one line — a second line
   pushes the sticky-header area from 64px to 98px. */
nav > a span{font-size:25px !important;}
@media (max-width:430px){
  nav > a span{font-size:19px !important;letter-spacing:0 !important;}
}
@media (max-width:375px){
  nav > a span{font-size:17px !important;}
}
@media (max-width:340px){
  nav > a span{font-size:15px !important;}
}

/* ---- animation pause control (WCAG 2.2.2 Pause, Stop, Hide) ----
   The hero illustration is an animated WebP that loops for ~13s indefinitely.
   CSS prefers-reduced-motion cannot stop an animated image file, so this gives
   every user an explicit control and starts paused for reduced-motion users. */
.anim-wrap{position:relative;display:block;}
.anim-toggle{
  position:absolute;right:10px;bottom:10px;
  display:inline-flex;align-items:center;gap:7px;
  min-height:32px;padding:6px 13px 6px 10px;
  font-family:'Hanken Grotesk',system-ui,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.04em;
  color:#F4EFE4;background:rgba(26,26,20,.72);
  border:1px solid rgba(244,239,228,.42);border-radius:999px;
  cursor:pointer;backdrop-filter:blur(4px);
}
.anim-toggle:hover{background:rgba(26,26,20,.88);}
.anim-icon{
  width:9px;height:11px;flex:0 0 auto;background:#F4EFE4;
  /* two bars = pause */
  clip-path:polygon(0 0,34% 0,34% 100%,0 100%,0 0,66% 0,100% 0,100% 100%,66% 100%,66% 0);
}
.anim-toggle[aria-pressed="true"] .anim-icon{
  /* triangle = play */
  clip-path:polygon(0 0,100% 50%,0 100%);
}
@media (max-width:600px){
  .anim-label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
  .anim-toggle{padding:8px;min-width:32px;justify-content:center;}
}

/* ---- typographic wrapping ----
   Headings balance across their lines; body copy avoids leaving a single
   word stranded on the last line. Both are progressive enhancements —
   browsers without support simply wrap as before. */
h1,h2,h3{text-wrap:balance;}
p,li,figcaption{text-wrap:pretty;}

/* ---- WebKit grid fix ----
   iOS Safari resolves height:100% on a grid item against an indefinite row and
   lets the image spill into the next row, so card text landed on the photo. */
@media (max-width:900px){
  /* Scope this to parents WITHOUT a definite height. A frame that declares its
     own aspect-ratio resolves height:100% correctly and has no WebKit bug to
     fix — forcing height:auto there left the photo short inside its frame,
     showing an empty bordered box below it. */
  *:not([style*="aspect-ratio"]) > img[style*="height: 100%"]{
    height:auto !important;
    max-height:340px;
  }
}