/* ==========================================================================
   Geiger Law — design system
   Palette derived from the firm's Didone wordmark (teal #71CECF + ink).
   Every foreground/background pair below meets WCAG AA (4.5:1) or better.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --teal-900:#0A3238;
  --teal-800:#0D454C;
  --teal-700:#10585F;   /* primary — 7.9:1 on --paper */
  --teal-600:#17727B;
  --teal-500:#1E8892;
  --teal-300:#71CECF;   /* the wordmark teal — decorative only */
  --teal-100:#D7EDEE;
  --teal-50:#EDF7F7;

  --brass:#8A5D1C;      /* accent on light grounds — 5.5:1 on --paper */
  --gold:#AD8433;       /* meaningful marks on light grounds — 3.3:1 */
  --gold-light:#C9A25C; /* decorative, or on the deep teal — 5.8:1 there */

  --ink:#14181B;        /* 15.9:1 on --paper */
  --ink-2:#41494E;      /* 8.7:1  on --paper */
  --ink-3:#5D666C;      /* 5.9:1  on --paper */

  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F4F2ED;
  --line:#E2DFD7;
  --line-2:#CFCBC1;

  --focus:#17727B;
  --danger:#A32020;

  /* Type */
  --f-display:"Playfair Display",Georgia,"Times New Roman",serif;
  --f-body:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-lg:1.125rem;
  --t-xl:1.375rem; --t-2xl:1.75rem; --t-3xl:2.25rem; --t-4xl:3rem; --t-5xl:3.75rem;

  /* Space — 4px rhythm */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;

  --radius:2px;
  --radius-lg:4px;
  --shadow-1:0 1px 2px rgba(20,24,27,.05), 0 2px 8px rgba(20,24,27,.04);
  --shadow-2:0 2px 4px rgba(20,24,27,.06), 0 12px 28px rgba(20,24,27,.08);

  --wrap:1180px;
  --wrap-narrow:720px;
  --header-h:76px;

  --ease:cubic-bezier(.2,.6,.3,1);                  /* hover + colour changes */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);        /* entrances, press feedback */
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);    /* on-screen movement */
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);     /* iOS-like drawer curve */
  --dur:200ms;
  --dur-press:160ms;
  --dur-menu:150ms;
  --dur-menu-out:120ms;
  --dur-drawer:260ms;
  --dur-drawer-out:180ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--ink-2);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);font-weight:600;line-height:1.15;margin:0 0 var(--s-4);letter-spacing:-.01em}
h1{font-size:clamp(2.25rem,1.5rem + 3vw,var(--t-5xl));line-height:1.06;letter-spacing:-.02em}
h2{font-size:clamp(1.75rem,1.25rem + 2vw,var(--t-3xl))}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg);font-family:var(--f-body);font-weight:600}
p{margin:0 0 var(--s-4);max-width:70ch}
a{color:var(--teal-700);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--teal-800)}
ul,ol{margin:0 0 var(--s-4);padding-left:1.25rem}
li{margin-bottom:var(--s-2);max-width:68ch}
hr{border:0;border-top:1px solid var(--line);margin:var(--s-7) 0}
strong{color:var(--ink);font-weight:600}
::selection{background:var(--teal-100);color:var(--teal-900)}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius);
}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.5rem,var(--wrap-narrow));margin-inline:auto}
.section{padding-block:clamp(3.5rem,2rem + 6vw,6rem)}
.section--tight{padding-block:clamp(2.5rem,1.5rem + 4vw,4rem)}
.section--paper{background:var(--paper)}
.section--surface{background:var(--surface)}
.section--tint{background:var(--surface-2)}
.section--deep{background:var(--teal-900);color:#D9E5E6}
.section--deep h2,.section--deep h3{color:#fff}
.section--deep p{color:#C3D5D7}

.grid{display:grid;gap:var(--s-6)}
@media (min-width:700px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.stack>*+*{margin-top:var(--s-4)}
.center{text-align:center}
.center p{margin-inline:auto}
.measure{max-width:62ch}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none !important}

/* ---------- Eyebrow / rule ---------- */
.eyebrow{
  display:block;font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal-600);margin-bottom:var(--s-3);
}
.section--deep .eyebrow{color:var(--teal-300)}
.section--deep .rule,.pagehead .rule,.cta-band .rule{background:var(--gold-light)}
.rule{width:56px;height:2px;background:var(--gold);border:0;margin:0 0 var(--s-5)}
.center .rule{margin-inline:auto}

/* ---------- Skip link ---------- */
.skip{
  position:absolute;left:var(--s-4);top:-100%;z-index:200;
  background:var(--teal-800);color:#fff;padding:.75rem 1.25rem;border-radius:var(--radius);
  font-weight:600;text-decoration:none;transition:top var(--dur) var(--ease-out);
}
.skip:focus{top:var(--s-3);color:#fff}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:48px;padding:.8rem 1.6rem;
  font-family:var(--f-body);font-size:var(--t-sm);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:1px solid transparent;border-radius:var(--radius);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             transform var(--dur-press) var(--ease-out);
}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--teal-700);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover{background:var(--teal-800);color:#fff;box-shadow:var(--shadow-2)}
.btn-outline{background:transparent;color:var(--teal-800);border-color:var(--line-2)}
.btn-outline:hover{background:var(--teal-50);border-color:var(--teal-600);color:var(--teal-900)}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost-light:hover{background:rgba(255,255,255,.1);color:#fff;border-color:#fff}
.btn-light{background:#fff;color:var(--teal-900)}
.btn-light:hover{background:var(--teal-50);color:var(--teal-900)}
.btn:active{transform:scale(.97)}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:var(--t-sm);
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--teal-700);
}
.link-arrow svg{width:16px;height:16px;transition:transform var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .link-arrow:hover svg{transform:translateX(3px)}
}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:100;background:rgba(251,250,247,.94);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);min-height:var(--header-h)}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:38px;width:auto}
@media (min-width:1024px){.brand img{height:44px}}

.nav{display:none}
@media (min-width:1024px){
  .nav{display:flex;align-items:center;gap:.15rem}
  .nav__link{
    display:block;padding:.55rem .8rem;font-size:.9375rem;font-weight:500;
    color:var(--ink-2);text-decoration:none;border-radius:var(--radius);
    transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
  }
  .nav__link:hover{color:var(--teal-800);background:var(--teal-50)}
  .nav__link[aria-current="page"]{color:var(--teal-800);font-weight:600;box-shadow:inset 0 -2px 0 var(--gold)}
  .nav__item{position:relative}
  .nav__toggle{
    display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;
    font:inherit;font-size:.9375rem;font-weight:500;color:var(--ink-2);
    padding:.55rem .8rem;cursor:pointer;border-radius:var(--radius);
  }
  .nav__toggle:hover{color:var(--teal-800);background:var(--teal-50)}
  .nav__toggle svg{width:14px;height:14px;transition:transform var(--dur) var(--ease-out)}
  .nav__toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
  /* Sixteen practice pages in one column ran past the fold on a laptop, so the
     panel is grouped into three columns under the same headings the footer
     and the mobile drawer use. Kept narrower than the header so it never
     needs to flip sides. */
  .nav__menu{
    position:absolute;top:calc(100% + .35rem);left:50%;width:max-content;max-width:min(720px,calc(100vw - 2rem));
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
    box-shadow:var(--shadow-2);padding:1rem 1rem .5rem;margin:0;
    transform-origin:top center;
    opacity:0;visibility:hidden;transform:translateX(-50%) scale(.97);pointer-events:none;
    transition:opacity var(--dur-menu-out) var(--ease-out),
               transform var(--dur-menu-out) var(--ease-out),
               visibility 0s linear var(--dur-menu-out);
  }
  .nav__item[data-open="true"] .nav__menu{
    opacity:1;visibility:visible;transform:translateX(-50%);pointer-events:auto;
    transition:opacity var(--dur-menu) var(--ease-out),
               transform var(--dur-menu) var(--ease-out),
               visibility 0s;
  }
  .nav__cols{display:grid;grid-template-columns:repeat(3,minmax(0,max-content));gap:.25rem 1.5rem}
  .nav__col{display:flex;flex-direction:column;gap:.75rem}
  .nav__col ul{list-style:none;margin:0;padding:0}
  .nav__col li{margin:0;max-width:none}
  .nav__group{
    font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;font-weight:600;
    color:var(--teal-600);padding:.25rem .6rem .35rem;white-space:nowrap;
  }
  .nav__menu a{
    display:block;padding:.45rem .6rem;font-size:.9375rem;color:var(--ink-2);
    text-decoration:none;border-radius:var(--radius);white-space:nowrap;
  }
  .nav__menu a:hover{background:var(--teal-50);color:var(--teal-800)}
  .nav__menu a[aria-current="page"]{color:var(--teal-800);font-weight:600}
  .nav__all{
    display:inline-flex !important;align-items:center;gap:.4rem;margin-top:.75rem;
    padding:.6rem .6rem !important;border-top:1px solid var(--line);border-radius:0 !important;
    width:100%;font-weight:600;color:var(--teal-700) !important;
  }
  .nav__all svg{width:14px;height:14px}
}
.header__cta{display:none}
@media (min-width:1024px){.header__cta{display:inline-flex}}

.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:none;border:1px solid var(--line-2);
  border-radius:var(--radius);cursor:pointer;color:var(--ink);
  transition:transform var(--dur-press) var(--ease-out);
}
.burger:active{transform:scale(.94)}
.burger svg{width:22px;height:22px}
@media (min-width:1024px){.burger{display:none}}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:150;
  visibility:hidden;pointer-events:none;
  transition:visibility 0s linear var(--dur-drawer-out);
}
.drawer[data-open="true"]{
  visibility:visible;pointer-events:auto;
  transition:visibility 0s;
}
.drawer__scrim{
  position:absolute;inset:0;background:rgba(10,50,56,.55);
  opacity:0;transition:opacity var(--dur-drawer-out) var(--ease-out);
}
.drawer[data-open="true"] .drawer__scrim{
  opacity:1;transition:opacity var(--dur-drawer) var(--ease-out);
}
.drawer__panel{
  position:absolute;top:0;right:0;height:100%;width:min(88vw,400px);
  background:var(--surface);box-shadow:var(--shadow-2);overflow-y:auto;
  padding:var(--s-4) var(--s-5) var(--s-8);
  display:flex;flex-direction:column;gap:var(--s-4);
  transform:translateX(100%);
  transition:transform var(--dur-drawer-out) var(--ease-drawer);
}
.drawer[data-open="true"] .drawer__panel{
  transform:none;
  transition:transform var(--dur-drawer) var(--ease-drawer);
}
.drawer__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);min-height:var(--header-h)}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a{
  padding:.85rem .25rem;font-size:1.0625rem;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.drawer nav a[aria-current="page"]{color:var(--teal-700);font-weight:600}
.drawer nav .sub{padding-left:1.25rem;font-size:.9375rem;color:var(--ink-2)}
.drawer__group{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;
  color:var(--teal-600);font-weight:600;padding:1.25rem .25rem .35rem;border-bottom:1px solid var(--line)}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--surface);border-bottom:1px solid var(--line);
  overflow:hidden;isolation:isolate;
}
/* Split: copy on the parchment, the team photo contained beside it. The shot
   is composed dead-centre with the scales spanning the full frame, so it is
   shown whole rather than cropped under a panel — nothing sits on top of it. */
.hero__grid{
  position:relative;z-index:1;display:grid;gap:var(--s-7);align-items:center;
  padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem);
}
@media (min-width:900px){
  /* The hero runs wider than the page wrap so the photo can carry the frame
     (~800px at 1440) while the copy keeps a readable measure beside it. */
  .hero__grid{
    width:min(100% - 2.5rem,1320px);
    grid-template-columns:minmax(0,1fr) minmax(0,1.72fr);
    gap:clamp(2rem,1rem + 2.5vw,3.5rem);
    min-height:min(72vh,600px);
    padding-block:clamp(3rem,2rem + 4vw,5rem);
  }
  .hero h1{font-size:clamp(2.25rem,1.25rem + 2.4vw,3.25rem)}
  .hero__actions{gap:var(--s-2)}
  .hero__actions .btn{padding-inline:1.1rem}
}
.hero__photo{
  margin:0;position:relative;
  border-radius:var(--radius-lg);overflow:hidden;
  background:#C9D6E0;box-shadow:var(--shadow-2);
  aspect-ratio:3/2;
  opacity:0;transform:translateY(10px);
  animation:hero-in 700ms var(--ease-out) 120ms both;
}
.hero__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* faint inner hairline so the sky edge never reads as a cut-out on the parchment */
.hero__photo::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(20,24,27,.08);
}
@media (max-width:899px){
  .hero__photo{order:-1}
}

.hero__copy{
  opacity:0;transform:translateY(10px);
  animation:hero-in 700ms var(--ease-out) both;
}
/* the copy fades in after the block, slower and staggered — a hero is a
   rare, first-view moment, which is the one place a longer beat is earned */
.hero__copy>*{opacity:0;animation:hero-text-in 1100ms var(--ease-out) both}
.hero__copy>*:nth-child(1){animation-delay:260ms}
.hero__copy>*:nth-child(2){animation-delay:330ms}
.hero__copy>*:nth-child(3){animation-delay:400ms}
.hero__copy>*:nth-child(4){animation-delay:470ms}
.hero__copy>*:nth-child(5){animation-delay:540ms}
/* From 1200px the copy sets the row height and the photo fills it, so the
   eyebrow and the trust row sit flush with the photo's top and bottom edges.
   The crop this costs is a few px of sky either side; below 1200 the copy
   column is too narrow for that trade, so the photo keeps its 3:2 frame. */
@media (min-width:1200px){
  .hero__grid{align-items:stretch}
  .hero__photo{aspect-ratio:auto;height:100%}
}
@keyframes hero-in{to{opacity:1;transform:none}}
@keyframes hero-text-in{to{opacity:1}}
.hero h1{margin-bottom:var(--s-5)}
.hero__lede{font-size:var(--t-lg);color:var(--ink-2);max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero__trust{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);margin-top:var(--s-6);
  padding-top:var(--s-5);border-top:1px solid rgba(226,223,215,.85);
  font-size:var(--t-sm);color:var(--ink-2);
}
.hero__trust span{display:inline-flex;align-items:center;gap:.45rem}
.hero__trust svg{width:16px;height:16px;color:var(--teal-600);flex:none}


/* Page header (interior) */
.pagehead{background:var(--teal-900);color:#D9E5E6;padding-block:clamp(2.75rem,2rem + 4vw,4.5rem)}
.pagehead h1{color:#fff;margin-bottom:var(--s-4)}
.pagehead p{color:#BFD4D6;font-size:var(--t-lg);max-width:60ch;margin-bottom:0}
.pagehead .eyebrow{color:var(--teal-300)}

/* Breadcrumbs */
.crumbs{font-size:var(--t-sm);color:var(--ink-3);padding-block:var(--s-4);border-bottom:1px solid var(--line);background:var(--paper)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs li{margin:0;display:flex;align-items:center;gap:.4rem}
.crumbs li+li::before{content:"/";color:var(--line-2)}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--teal-700);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink)}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s-6);display:flex;flex-direction:column;
  position:relative;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease-out);
}
a.card,.card--link{text-decoration:none;color:inherit}
.card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:var(--shadow-2);opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.card>*{position:relative;z-index:1}
a.card:hover,.card--link:hover{border-color:var(--teal-600)}
a.card:hover::after,.card--link:hover::after{opacity:1}
/* touch: press only, no lift to compose with */
a.card:active,.card--link:active{transform:scale(.995)}
@media (hover:hover) and (pointer:fine){
  a.card:hover,.card--link:hover{transform:translateY(-2px)}
  /* pointer: press must keep the lift — same specificity as :hover, so it has to
     restate it or the card lurches downward on press */
  a.card:active,.card--link:active{transform:translateY(-2px) scale(.995)}
}
.card--flat{padding:var(--s-5)}
.card h3{margin-bottom:var(--s-3)}
.card p{color:var(--ink-2);font-size:.9375rem;flex:1;margin-bottom:var(--s-4)}
.card__icon{
  width:44px;height:44px;display:grid;place-items:center;margin-bottom:var(--s-4);
  border-radius:var(--radius);background:var(--teal-50);color:var(--teal-700);
}
.card__icon svg{width:24px;height:24px}
.card .link-arrow{margin-top:auto}

/* Team */
.person{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.person__img{aspect-ratio:4/5;width:100%;object-fit:cover;background:var(--surface-2)}
.person__body{padding:var(--s-5)}
.person__body h3{margin-bottom:var(--s-1)}
.person__role{font-size:var(--t-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--teal-600);font-weight:600;margin-bottom:var(--s-3)}
.person__body p{font-size:.9375rem;margin-bottom:var(--s-4)}

.bio{display:grid;gap:var(--s-6)}
@media (min-width:840px){.bio{grid-template-columns:300px 1fr;gap:var(--s-8);align-items:start}}
.bio__photo{border-radius:var(--radius-lg);box-shadow:var(--shadow-1);width:100%}
.bio__meta{list-style:none;margin:var(--s-5) 0 0;padding:var(--s-5) 0 0;border-top:1px solid var(--line);font-size:.9375rem}
.bio__meta li{margin-bottom:var(--s-2)}
.bio__meta strong{display:block;font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-600);margin-bottom:var(--s-1)}

/* Tags */
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;padding:0;margin:0}
.tags li{margin:0}
.tags a,.tags span{
  display:inline-block;padding:.3rem .7rem;font-size:var(--t-xs);font-weight:500;
  letter-spacing:.04em;background:var(--teal-50);color:var(--teal-800);
  border:1px solid var(--teal-100);border-radius:99px;text-decoration:none;
}
.tags a:hover{background:var(--teal-100);border-color:var(--teal-500)}

/* Stats */
.stats{display:grid;gap:var(--s-5);grid-template-columns:repeat(2,1fr)}
.stats>:last-child:nth-child(odd){grid-column:1/-1}  /* three stats: no orphan cell on phones */
@media (min-width:800px){.stats{grid-template-columns:repeat(3,1fr)}.stats>:last-child:nth-child(odd){grid-column:auto}}
.stat__n{font-family:var(--f-display);font-size:clamp(2.25rem,1.5rem + 2.5vw,3.25rem);line-height:1;color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.stat__l{font-size:var(--t-sm);color:#B3C9CC;margin-top:var(--s-2);line-height:1.4}

/* Quotes */
.quote{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius-lg);padding:var(--s-6);display:flex;flex-direction:column;gap:var(--s-4)}
.quote blockquote{margin:0;font-family:var(--f-display);font-size:var(--t-lg);line-height:1.5;color:var(--ink)}
.quote figcaption{font-size:var(--t-sm);color:var(--ink-3);margin-top:auto}
.stars{display:flex;gap:2px;color:var(--gold)}
.stars svg{width:16px;height:16px}

/* Prose (article body) */
.prose h2{margin-top:var(--s-7)}
.prose h3{margin-top:var(--s-6)}
.prose>:first-child{margin-top:0}
.prose ul li::marker{color:var(--teal-500)}
.prose .lede{font-size:var(--t-lg);color:var(--ink-2)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-5) 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-size:var(--t-lg);color:var(--ink);font-weight:600;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;color:var(--teal-600);transition:transform var(--dur) var(--ease-out)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details>div{padding-bottom:var(--s-5)}
.faq details>div>:last-child{margin-bottom:0}

/* ---------- Forms ---------- */
.form{display:grid;gap:var(--s-5)}
.field{display:flex;flex-direction:column;gap:var(--s-2)}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.field .req{color:var(--danger);margin-left:.15rem}
.field .hint{font-size:var(--t-sm);color:var(--ink-3)}
.field input,.field select,.field textarea{
  font:inherit;font-size:var(--t-base);color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:.75rem .9rem;min-height:48px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  width:100%;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal-600);box-shadow:0 0 0 3px var(--teal-100);
}
.field[data-invalid="true"] input,.field[data-invalid="true"] select,.field[data-invalid="true"] textarea{border-color:var(--danger)}
.field .error{
  font-size:var(--t-sm);color:var(--danger);font-weight:500;display:flex;align-items:center;gap:.35rem;
  min-height:0;opacity:0;transform:translateY(-3px);
  transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out);
}
.field[data-invalid="true"] .error{opacity:1;transform:none;min-height:1.25rem}
.field .error svg{width:15px;height:15px;flex:none}
@media (min-width:640px){.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}}
.form__note{font-size:var(--t-sm);color:var(--ink-3);max-width:60ch}
.btn-submit{position:relative}
.btn-submit__idle,.btn-submit__busy{
  display:inline-flex;align-items:center;gap:.55rem;
  transition:opacity 200ms var(--ease),filter 200ms var(--ease);
}
.btn-submit__busy{
  position:absolute;inset:0;justify-content:center;
  opacity:0;filter:blur(2px);
}
.btn-submit[data-busy="true"] .btn-submit__idle{opacity:0;filter:blur(2px)}
.btn-submit[data-busy="true"] .btn-submit__busy{opacity:1;filter:none}
.form__status{
  padding:var(--s-4) var(--s-5);border-radius:var(--radius);font-size:.9375rem;display:flex;gap:.6rem;align-items:flex-start;
  opacity:0;transform:translateY(-4px);
  transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out);
}
.form__status[data-shown="true"]{opacity:1;transform:none}
.form__status svg{width:20px;height:20px;flex:none;margin-top:1px}
.form__status[data-kind="ok"]{background:var(--teal-50);border:1px solid var(--teal-100);color:var(--teal-900)}
.form__status[data-kind="err"]{background:#FCF0F0;border:1px solid #F0D2D2;color:#7A1A1A}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Contact blocks ---------- */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--s-5)}
.contact-list li{display:flex;gap:var(--s-4);align-items:flex-start;margin:0}
.contact-list .ico{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:var(--radius);
  background:var(--teal-50);color:var(--teal-700);
}
.contact-list .ico svg{width:21px;height:21px}
.contact-list dt,.contact-list .lbl{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-600);font-weight:600;margin-bottom:.15rem}
.contact-list .val{font-size:var(--t-lg);color:var(--ink);font-weight:500}
.contact-list a.val{text-decoration:none}
.contact-list a.val:hover{color:var(--teal-700);text-decoration:underline}
.contact-list .sub{font-size:var(--t-sm);color:var(--ink-3)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--teal-800);color:#fff}
.cta-band .wrap{display:grid;gap:var(--s-6);align-items:center;padding-block:clamp(3rem,2rem + 4vw,4.5rem)}
@media (min-width:860px){.cta-band .wrap{grid-template-columns:1.2fr auto;gap:var(--s-8)}}
.cta-band h2{color:#fff;margin-bottom:var(--s-3)}
.cta-band p{color:#C3D5D7;margin-bottom:0}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}

/* ---------- Footer ---------- */
.footer{background:var(--teal-900);color:#A9C1C4;font-size:.9375rem;padding-block:var(--s-8) var(--s-6)}
.footer a{color:#D2E2E3;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__grid{display:grid;gap:var(--s-6)}
@media (min-width:700px){.footer__grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:var(--s-6)}}
.footer h2+h2,.footer ul+h2{margin-top:var(--s-5)}
.footer h2,.footer h3{font-family:var(--f-body);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-300);font-weight:600;margin-bottom:var(--s-4)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:var(--s-3)}
.footer__logo{height:34px;width:auto;margin-bottom:var(--s-4);filter:brightness(0) invert(1);opacity:.92}
.footer__social{display:flex;gap:var(--s-3);margin-top:var(--s-4)}
.footer__social a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.18);color:#D2E2E3;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur-press) var(--ease-out);
}
.footer__social a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4)}
.footer__social a:active{transform:scale(.94)}
.footer__social svg{width:19px;height:19px}
.footer__legal{
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--t-sm);color:#8FAAAE;display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);justify-content:space-between;
}
.footer__legal p{margin:0;max-width:none}
.footer__legal a{text-decoration:underline;text-underline-offset:.15em}  /* colour alone is 1.8:1 vs the legal grey */
.footer__disclaimer{margin-top:var(--s-6);font-size:.8125rem;line-height:1.65;color:#93AEB2;max-width:96ch}

/* ---------- Mobile call bar ---------- */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:grid;grid-template-columns:1fr 1fr;
  background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(20,24,27,.08);
  padding-bottom:env(safe-area-inset-bottom);
}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:56px;
  font-size:.9375rem;font-weight:600;text-decoration:none;letter-spacing:.03em;
  transition:transform var(--dur-press) var(--ease-out);
}
.callbar a:active{transform:scale(.98)}
.callbar a:first-child{background:var(--teal-700);color:#fff}
.callbar a+a{color:var(--teal-800)}
.callbar svg{width:18px;height:18px}
@media (min-width:1024px){.callbar{display:none}}
@media (max-width:1023px){body{padding-bottom:56px}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Drop movement, keep opacity and colour — reduced motion means gentler, not
     none. Excluding transform/visibility from transition-property makes those
     snap while fades still read; zeroing the delay also closes the brief
     hit-testing window on the dropdown and drawer. */
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-property:opacity,color,background-color,border-color,box-shadow,filter !important;
    transition-duration:120ms !important;
    transition-delay:0s !important;
  }
}

/* ---------- Print ---------- */
@media print{
  .header,.callbar,.cta-band,.drawer,.footer__social{display:none !important}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.75em;color:#555}
}


/* ---------- Article layout with sticky aside ---------- */
.layout{display:grid;gap:var(--s-7)}
@media (min-width:1000px){
  .layout{grid-template-columns:minmax(0,1fr) 336px;gap:var(--s-8);align-items:start}
  .layout__aside{position:sticky;top:calc(var(--header-h) + 1.5rem)}
}
.layout__main{min-width:0}
.aside-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--s-5);
}
.aside-card+.aside-card{margin-top:var(--s-5)}
.aside-card h2,.aside-card h3{font-size:var(--t-lg);margin-bottom:var(--s-3)}
.aside-card p{font-size:.9375rem;margin-bottom:var(--s-4)}
.aside-card--deep{background:var(--teal-900);border-color:var(--teal-900);color:#C3D5D7}
.aside-card--deep h2,.aside-card--deep h3{color:#fff}
.aside-card--deep p{color:#B9D0D2}
.aside-card--deep .eyebrow{color:var(--teal-300)}
.aside-attorney+.aside-attorney{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)}
.aside-card .btn{width:100%}
.aside-card .btn+.btn{margin-top:var(--s-3)}
.aside-links{list-style:none;margin:0;padding:0}
.aside-links li{margin:0;border-top:1px solid var(--line)}
.aside-links li:first-child{border-top:0}
.aside-links a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:.7rem 0;font-size:.9375rem;color:var(--ink-2);text-decoration:none;
}
.aside-links a:hover{color:var(--teal-700)}
.aside-links svg{width:15px;height:15px;color:var(--teal-500);flex:none;transition:transform var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .aside-links a:hover svg{transform:translateX(3px)}
}
.aside-links a[aria-current="page"]{color:var(--teal-800);font-weight:600}

.keypoints{
  margin-top:var(--s-7);padding:var(--s-6);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--teal-500);border-radius:var(--radius-lg);
}
.keypoints h2{font-size:var(--t-xl);margin:0 0 var(--s-4)}
.keypoints ul{margin:0;padding-left:1.15rem}
.keypoints li::marker{color:var(--teal-500)}

.contact-mini{list-style:none;margin:0 0 var(--s-4);padding:0;font-size:.9375rem}
.contact-mini li{display:flex;gap:.6rem;align-items:center;margin-bottom:var(--s-2)}
.contact-mini svg{width:17px;height:17px;color:var(--teal-300);flex:none}
.contact-mini a{color:#fff;text-decoration:none;font-weight:500}
.contact-mini a:hover{text-decoration:underline}

/* ---------- Practice carousel ---------- */
.carousel{position:relative;margin-top:3rem}
.carousel__track{
  display:flex;gap:var(--s-5);list-style:none;margin:0;
  padding:.5rem calc((100vw - min(100% - 2.5rem, var(--wrap))) / 2 + .25rem) 1.25rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;   /* smoothness is requested per-call in JS, not here:
     as a CSS property it also makes the loop's silent reposition animate */
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__slide{flex:0 0 clamp(258px,78vw,330px);scroll-snap-align:center;margin:0}
@media (min-width:700px){.carousel__slide{flex-basis:330px}}

.pslide{
  display:flex;flex-direction:column;height:100%;
  padding:var(--s-6) var(--s-5) var(--s-5);
  background:var(--surface);border-top:2px solid var(--teal-600);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(20,24,27,.04);
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease-out),border-color var(--dur) var(--ease);
}
.pslide__n{
  font-family:var(--f-body);font-size:var(--t-xs);font-weight:600;letter-spacing:.16em;
  color:var(--teal-700);font-variant-numeric:tabular-nums;margin-bottom:var(--s-4);  /* 700 not 600: survives the carousel dim at 4.5:1 */
}
.pslide__t{font-size:var(--t-xl);margin-bottom:var(--s-3)}
.pslide p{font-size:.9375rem;color:var(--ink-2);flex:1;margin-bottom:var(--s-4)}
.pslide .link-arrow{margin-top:auto}
@media (hover:hover) and (pointer:fine){
  .pslide:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);border-color:var(--teal-800)}
}
.pslide:active{transform:scale(.99)}

/* The wheel: slides shrink and dim toward the edges as the track scrolls.
   Scroll-driven, so it tracks the finger exactly and costs no main thread.
   Unsupported browsers simply get a flat carousel. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view(inline)){
    .carousel__slide{
      animation:wheel linear both;
      animation-timeline:view(inline);
      animation-range:entry 5% exit 95%;
    }
    @keyframes wheel{
      /* opacity floor keeps every text colour on the dimmed slides at or above
         4.5:1 against the section background (axe reads the blended colour) */
      0%{opacity:.8;transform:scale(.90)}
      42%,58%{opacity:1;transform:scale(1)}
      100%{opacity:.8;transform:scale(.90)}
    }
  }
}

.carousel__nav{display:flex;gap:var(--s-3);justify-content:center;margin-top:var(--s-5)}
.carousel__btn{
  width:48px;height:48px;display:grid;place-items:center;cursor:pointer;
  background:var(--surface);color:var(--teal-800);
  border:1px solid var(--line-2);border-radius:50%;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur-press) var(--ease-out);
}
.carousel__btn svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){
  .carousel__btn:hover{background:var(--teal-50);border-color:var(--teal-600);color:var(--teal-900)}
}
.carousel__btn:active{transform:scale(.94)}
@media (min-width:1100px){
  .carousel__nav{
    position:absolute;top:50%;left:0;right:0;margin:0;
    transform:translateY(-50%);justify-content:space-between;
    padding-inline:max(.5rem,calc((100vw - var(--wrap)) / 2 - 4rem));
    pointer-events:none;
  }
  .carousel__btn{pointer-events:auto;box-shadow:var(--shadow-1)}
}