/* Border-box everywhere. Without it any element given width:100% plus padding
   overflows its parent by exactly that padding — which is what pushed the
   mobile hero buttons past the card edge, hidden by the card's overflow:hidden. */
*, *::before, *::after{ box-sizing:border-box; }

body{ margin: 0; }
    a{ color: #4E6657; text-decoration: none; }
    a:hover{ color: #4E6657; text-decoration: underline; }
    .wrap{ padding:0 56px; }
    .kick{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#4E6657; }
    .kick-d{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#F3E2DA; }
    .acc{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:#8C6A22; }
    .h-xl{ margin:0; font-size:54px; line-height:1.06; letter-spacing:-.03em; font-weight:500; }
    .h-lg{ margin:0; font-size:36px; line-height:1.12; letter-spacing:-.025em; font-weight:500; }
    .body{ margin:0; font-size:17px; line-height:1.6; color:#5E6A63; }
    .micro{ font-size:12.5px; line-height:1.5; color:#5E6A63; }
    .card{ background:#FBFAF6; border:1px solid #E3E6DF; border-radius:24px; }
    .tbc{ display:inline-flex; align-items:center; background:#F5E6DF; color:#4E6657; border:1px dashed #B8913E;
      border-radius:2px; padding:3px 9px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
    .tbc-d{ display:inline-flex; align-items:center; background:rgba(243,226,218,.15); color:#F3E2DA; border:1px dashed rgba(184,145,62,.5);
      border-radius:2px; padding:3px 9px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
    .st{ display:flex; gap:2px; }
    .ico{ width:50px; height:50px; border-radius:14px; background:#F3E2DA; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
    .pill{ display:inline-flex; align-items:center; gap:8px; background:#FBFAF6; border:1px solid #E3E6DF; border-radius:9999px; padding:9px 16px; font-size:14.5px; color:#3D4A43; }
    .btn-clay{ display:inline-flex; align-items:center; gap:10px; background:#4E6657; color:#FBFAF6; font-size:17px; font-weight:600; padding:16px 30px; border-radius:9999px; width:fit-content; }
    .btn-out{ display:inline-flex; align-items:center; gap:9px; color:#2E3B35; border:1px solid #D4DAD2; font-size:17px; font-weight:600; padding:15px 29px; border-radius:9999px; width:fit-content; }
    .fnav{ font-size:15px; color:#B9C2BB; }
    /* — Dentix / ClinicHub scroll-scrubbed word reveal. Default state is fully legible;
         JS only dims when motion is allowed, so no-JS and reduced-motion read normally. — */
    .rv w{ transition:color .28s cubic-bezier(.22,.61,.36,1); }
    .rv.armed w{ color:#C3CBC4; }
    .rv.armed w.on{ color:inherit; }
    /* — Élan service card: index · duration · name · line — */
    .srv{ display:grid; grid-template-columns:44px 116px 1fr auto; align-items:center; gap:22px;
      background:#FBFAF6; border:1px solid #E3E6DF; border-radius:16px; padding:19px 24px; }
    .srv .idx{ font-size:12px; font-weight:600; letter-spacing:.08em; color:#8C6A22; }
    .srv .dur{ font-size:13px; font-weight:600; letter-spacing:.02em; color:#3D4A43; background:#F3E2DA;
      border-radius:9999px; padding:6px 12px; text-align:center; }
    .grp{ display:flex; align-items:center; gap:14px; padding:16px 4px 6px; }
    .grp span:last-child{ flex:1 1 auto; height:1px; background:#E3E6DF; display:block; }
    .faq{ border-bottom:1px solid #E3E6DF; padding:22px 0; display:flex; align-items:flex-start; gap:20px; }
    .faq .q{ flex:1 1 auto; font-size:20px; font-weight:600; letter-spacing:-.012em; }
    .chk{ width:22px; height:22px; border-radius:9999px; background:#F3E2DA; display:inline-flex;
      align-items:center; justify-content:center; flex:0 0 auto; }
    .fld{ display:flex; flex-direction:column; gap:7px; }
    .fld label{ font-size:13px; font-weight:600; letter-spacing:.02em; color:#3D4A43; }
    .fld .in{ background:#FBFAF6; border:1px solid #D4DAD2; border-radius:12px; padding:13px 15px;
      font-size:15.5px; color:#5E6A63; display:flex; align-items:center; justify-content:space-between; }
    .req{ color:#4E6657; }
    .grain{ position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.16; mix-blend-mode:soft-light;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
    /* before / after */
    /* aspect-ratio reserves the box; the images fill it. Without a height the
   lazy loader never fired — a zero-height image is never 'near the viewport'. */
.ba{ position:relative; overflow:hidden; border-radius:6px; background:#2E3B35; line-height:0; aspect-ratio:700/294; }
    .ba img{ display:block; width:100%; height:100%; object-fit:cover; }
    .ba-a{ position:absolute; inset:0; width:var(--p); overflow:hidden; }
    .ba-a img{ width:100%; height:100%; object-fit:cover; }
    .ba-h{ position:absolute; top:0; bottom:0; left:var(--p); width:2px; background:#FBFAF6; z-index:3; pointer-events:none; }
    .ba-h::after{ content:""; position:absolute; left:50%; top:50%; width:26px; height:26px; margin:-13px 0 0 -13px;
      border-radius:9999px; background:#FBFAF6; box-shadow:0 2px 10px rgba(0,0,0,.3); }
    .ba-l{ position:absolute; bottom:10px; z-index:4; font-family:ui-monospace,Menlo,monospace; font-size:9.5px;
      letter-spacing:.12em; text-transform:uppercase; color:#FBFAF6; background:rgba(30,40,35,.6); padding:3px 8px; border-radius:2px; line-height:1.4; }
    .ba input[type=range]{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:col-resize; z-index:5; }
    .meta{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; border-bottom:1px solid #D4DAD2; padding-bottom:6px; }
    .meta span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#4E6657; font-weight:600; }
    .meta em{ font-style:normal; font-size:13px; color:#5E6A63; }

    /* ── CSS scroll-driven stepping. The design canvas sandboxes artboard scripts,
         so the sequence is driven entirely by animation-timeline{ display:grid; }
    /* the after-panel is clipped, not resized — works with no JS at any width */
    .ba-a{ clip-path: inset(0 calc(100% - var(--p)) 0 0); width:100% !important; }

/* ─── shared page chrome ────────────────────────────────────────────────── */
.skip{ position:absolute; left:-9999px; top:0; background:#4E6657; color:#FBFAF6; padding:12px 18px; z-index:99; }
.skip:focus{ left:0; }
.page{ position:relative; background:#F6F4EF; font-family:'Manrope',system-ui,sans-serif; color:#2E3B35; padding:16px 16px 0; box-sizing:border-box; overflow-x:clip; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; background:#FBFAF6; border:1px solid #E3E6DF; border-radius:22px; padding:14px 18px 14px 24px; margin-bottom:14px; position:sticky; top:16px; z-index:30; }
.brand{ display:flex; align-items:center; gap:10px; font-size:19px; font-weight:600; letter-spacing:-.02em; color:#2E3B35; text-decoration:none; flex:0 0 auto; }
.brand.light span{ color:#FBFAF6; }
.brand-logo{ display:block; height:56px; width:auto; }
.foot .brand-logo{ height:60px; }
.nlinks{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.nlink{ font-size:15px; color:#5E6A63; text-decoration:none; }
.nlink:hover{ color:#4E6657; }
.nlink[aria-current="page"]{ color:#4E6657; font-weight:600; }
.nav-cta{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.btn-ghost{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#2E3B35; border:1px solid #D4DAD2; padding:11px 17px; border-radius:9999px; text-decoration:none; white-space:nowrap; }
.btn-clay.sm{ font-size:15px; padding:12px 20px; white-space:nowrap; }
a.btn-clay, a.btn-out, a.btn-ghost, a.pill{ text-decoration:none; }

/* ─── hours table, generated from one record ────────────────────────────── */
.hrow{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #E3E6DF; font-size:16px; }
.hrow:last-child{ border-bottom:none; }
.hrow.hopen span{ font-weight:600; }
.hrow.hclosed span:first-child{ color:#5E6A63; }
.hrow.hclosed span:last-child{ color:#4E6657; }
.hrow.today{ background:#F3E2DA; border-radius:8px; margin:0 -12px; padding-left:12px; padding-right:12px; }
.status{ display:inline-flex; align-items:center; gap:9px; border-radius:9999px; padding:9px 16px; font-size:14px; font-weight:600; background:#F5E6DF; color:#4E6657; }
.status .bulb{ width:8px; height:8px; border-radius:9999px; background:currentColor; display:block; }
.status.is-open{ background:#E6F2EC; color:#256B4B; }

/* ─── interior page furniture ───────────────────────────────────────────── */
.phero{ padding:56px 56px 48px; display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:end; }
.crumb{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#5E6A63; text-decoration:none; margin-bottom:16px; }
.h-hero{ margin:0; font-size:clamp(2.5rem,4.6vw,4rem); line-height:1.05; letter-spacing:-.035em; font-weight:500; }
.qfacts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #D4DAD2; border-bottom:1px solid #D4DAD2; margin:0 56px 64px; }
.qfacts > div{ padding:22px 24px 22px 0; border-right:1px solid #D4DAD2; display:flex; flex-direction:column; gap:6px; }
.qfacts > div + div{ padding-left:24px; }
.qfacts > div:last-child{ border-right:none; }
.qk{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#4E6657; }
.qv{ font-size:17px; font-weight:600; letter-spacing:-.01em; }
.sect{ padding:0 56px 84px; }
.sect-d{ background:#2E3B35; color:#FBFAF6; margin:0 -16px 84px; padding:74px 56px; }
.prose{ max-width:70ch; display:flex; flex-direction:column; gap:16px; }
.prose p{ margin:0; font-size:17px; line-height:1.65; color:#3D4A43; }
.sect-d .prose p{ color:#B9C2BB; }
.legal h2{ margin:20px 0 0; font-size:24px; line-height:1.25; font-weight:500; color:#2E3B35; }
.legal ul{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:10px; font-size:17px; line-height:1.6; color:#3D4A43; }
.legal a{ color:#2E3B35; overflow-wrap:anywhere; }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; }
.three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.numrow{ display:grid; grid-template-columns:60px 1fr; gap:20px; padding:22px 0; border-top:1px solid #D4DAD2; align-items:start; }
.sect-d .numrow{ border-color:rgba(255,255,255,.16); }
.numrow .n{ font-family:'Instrument Serif',Georgia,serif; font-size:28px; color:#8C6A22; line-height:1.1; }
.sect-d .numrow .n{ color:#D9B56A; }
.quote{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:26px; line-height:1.4; margin:0; }
.foot{ background:#2E3B35; color:#B9C2BB; margin:0 -16px; padding:60px 56px 30px; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1.1fr 1fr 1.2fr; gap:36px; padding-bottom:40px; }
.fcol{ display:flex; flex-direction:column; gap:11px; }
.fcol p{ margin:0; font-size:15px; line-height:1.6; max-width:36ch; }
.fcol a, .fcol span{ font-size:15px; color:#B9C2BB; text-decoration:none; }
.fcol a:hover{ color:#F3E2DA; }
.socials{ display:flex; gap:10px; margin-top:4px; }
.socials a{ width:36px; height:36px; border-radius:9999px; border:1px solid rgba(255,255,255,.2); display:inline-flex; align-items:center; justify-content:center; }
.frule{ height:1px; background:rgba(255,255,255,.14); }
.fbottom{ display:flex; align-items:center; justify-content:space-between; padding-top:20px; flex-wrap:wrap; gap:14px; font-size:13px; }
.fbottom div{ display:flex; gap:22px; }
.fbottom a{ color:#B9C2BB; text-decoration:none; }
.fdisc{ margin:16px 0 0; font-size:12px; line-height:1.6; color:#76807A; max-width:92ch; }
.mapwrap{ border-radius:20px; overflow:hidden; border:1px solid #E3E6DF; background:#E3E6DF; }
.mapwrap iframe{ display:block; width:100%; height:380px; border:0; }

@media (max-width: 1080px){
  .phero, .two{ grid-template-columns:1fr; gap:32px; }
  .three, .qfacts{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .nlinks{ display:none; }
}
@media (max-width: 680px){
  .page{ padding:10px 10px 0; }
  .sect, .phero, .sect-d{ padding-left:22px; padding-right:22px; }
  .qfacts{ grid-template-columns:1fr; margin-left:22px; margin-right:22px; }
  .qfacts > div{ border-right:none; border-bottom:1px solid #D4DAD2; padding-left:0; }
  .three, .foot-grid{ grid-template-columns:1fr; }
}

/* ─── forms ─────────────────────────────────────────────────────────────── */
.fld input.in, .fld select.in, .fld textarea.in{
  width:100%; font:inherit; font-size:15.5px; color:#2E3B35; background:#FBFAF6;
  border:1px solid #D4DAD2; border-radius:12px; padding:13px 15px; display:block; }
.fld textarea.in{ resize:vertical; min-height:76px; line-height:1.5; }
.fld select.in{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A4A2E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
.fld input.in::placeholder, .fld textarea.in::placeholder{ color:#8E938C; }
.fld input.in:focus, .fld select.in:focus, .fld textarea.in:focus{ outline:2px solid #8C6A22; outline-offset:1px; border-color:#8C6A22; }
button.btn-clay{ font:inherit; font-size:17px; font-weight:600; border:0; cursor:pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid #8C6A22; outline-offset:2px; }

/* service rows used as links */
a.srv{ color:inherit; text-decoration:none; }
a.srv:hover{ border-color:#B8913E; text-decoration:none; }
.pill{ text-decoration:none; }

/* ══ MOBILE ══════════════════════════════════════════════════════════════
   The layout lives largely in inline styles, so the build tags elements with
   .g (inline grid) and .fixh (tall fixed height) for these rules to reach. */

.menu-btn{ display:none; align-items:center; justify-content:center; width:44px; height:44px;
  border:1px solid #D4DAD2; border-radius:9999px; background:#FBFAF6; cursor:pointer; flex:0 0 auto; }
.menu-btn span{ display:block; width:17px; height:1.5px; background:#2E3B35; position:relative; }
.menu-btn span::before,.menu-btn span::after{ content:""; position:absolute; left:0; width:17px; height:1.5px; background:#2E3B35; }
.menu-btn span::before{ top:-5px; } .menu-btn span::after{ top:5px; }
.drawer{ display:none; }

/* header CTA shortens on narrow phones so the menu button stays on-screen */
.cta-short{ display:none; }
@media (max-width: 420px){
  .nav-cta .cta-long{ display:none; }
  .nav-cta .cta-short{ display:inline; }
}

@media (max-width: 1080px){
  .nav-cta .btn-ghost{ display:none; }
}

/* the seven text links need about 620px; below 1300px they no longer fit beside the logo and buttons,
   so hand over to the menu button and drawer there (they used to vanish between 901 and 1080px with no menu at all) */
@media (min-width: 1300px) and (max-width: 1499px){
  .nlinks{ gap:14px; }
  .nlink{ font-size:14px; }
}
@media (max-width: 1299px){
  .nlinks{ display:none; }
  .menu-btn{ display:inline-flex; }
  .drawer{ display:block; position:fixed; inset:0; z-index:60; background:rgba(30,40,35,.55);
    opacity:0; pointer-events:none; transition:opacity .25s; }
  .drawer[data-open]{ opacity:1; pointer-events:auto; }
  .drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(84vw,340px); background:#FBFAF6;
    padding:22px 24px; display:flex; flex-direction:column; gap:6px;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); }
  .drawer[data-open] .drawer-panel{ transform:none; }
  .drawer a{ font-size:19px; color:#2E3B35; text-decoration:none; padding:13px 0; border-bottom:1px solid #E3E6DF; }
  .drawer .close{ align-self:flex-end; font-size:14px; color:#4E6657; border:0; background:none; padding:8px 0 14px; cursor:pointer; }
}

@media (max-width: 900px){
  html{ -webkit-text-size-adjust:100%; }
  .page{ padding:10px 10px 0; }
  .sect, .sect-d, .phero{ padding-left:20px; padding-right:20px; }
  .sect, .sect-d{ padding-bottom:56px; }
  .wrap{ padding:0 20px; }

  /* every inline grid collapses to a single column */
  .g{ grid-template-columns:1fr !important; gap:26px !important; }
  .fixh{ height:auto !important; min-height:0 !important; }
  .fixh img{ height:auto !important; aspect-ratio:4/3; object-fit:cover; }

  /* nav becomes a drawer */
  .nav{ padding:11px 12px 11px 18px; top:10px; }
  .menu-btn{ display:inline-flex; }
  .nav-cta .btn-clay.sm{ font-size:14px; padding:11px 15px; }
  .drawer{ display:block; position:fixed; inset:0; z-index:60; background:rgba(30,40,35,.55);
    opacity:0; pointer-events:none; transition:opacity .25s; }
  .drawer[data-open]{ opacity:1; pointer-events:auto; }
  .drawer-panel{ position:absolute; top:0; right:0; bottom:0; width:min(84vw,340px); background:#FBFAF6;
    padding:22px 24px; display:flex; flex-direction:column; gap:6px;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); }
  .drawer[data-open] .drawer-panel{ transform:none; }
  .drawer a{ font-size:19px; color:#2E3B35; text-decoration:none; padding:13px 0; border-bottom:1px solid #E3E6DF; }
  .drawer .close{ align-self:flex-end; font-size:14px; color:#4E6657; border:0; background:none; padding:8px 0 14px; cursor:pointer; }

  /* Hero: the image gets its own space and the copy sits beneath it on the dark
     ground, rather than fighting a scrim. One full-width primary action. */
  .hero{ height:auto !important; min-height:0 !important; border-radius:20px;
    display:flex; flex-direction:column; }
  .hero > img{ position:relative !important; inset:auto !important; height:auto !important;
    aspect-ratio:1/1; object-position:42% 40% !important;
    transform:none !important; filter:saturate(.78) contrast(1.02) sepia(.10) !important; }
  /* the scrims must stop exactly where the image does, not 32px past it */
  .hero > div[style*="linear-gradient(74deg"]{ background:linear-gradient(180deg,rgba(30,40,35,0) 0%,rgba(30,40,35,.08) 70%,rgba(30,40,35,.42) 100%) !important;
    bottom:auto !important; height:calc(100vw - 32px) !important; }
  .hero > div[style*="soft-light"]{ height:calc(100vw - 32px) !important; bottom:auto !important; opacity:.20 !important; }
  .hero-copy{ position:relative !important; z-index:3; max-width:none !important;
    left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
    padding:22px 20px 4px; gap:13px !important; }
  .hero-copy h1{ font-size:clamp(2.4rem,11.4vw,3rem) !important; line-height:.98 !important; }
  .hero-copy p{ max-width:none !important; font-size:16px !important; }
  .hero-copy > div[style*="flex-wrap"]{ flex-direction:column; gap:10px !important; }
  .hero-copy > div[style*="flex-wrap"] > *{ justify-content:center; width:100%; padding:15px 24px !important; }
  .hero-rev{ position:relative !important; z-index:3; margin:14px 20px 20px; align-self:flex-start; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; }
  .hero > span[style*="right:30px"]{ display:none !important; }

  /* before / after cards stop staggering */
  .ba-col{ padding-top:0 !important; }

  /* typography + furniture */
  .h-xl{ font-size:clamp(1.9rem,7.4vw,2.6rem); }
  .h-lg{ font-size:clamp(1.6rem,6vw,2rem); }
  .h-hero{ font-size:clamp(2.1rem,8.6vw,3rem); }
  .quote{ font-size:20px; }
  .srv{ grid-template-columns:1fr !important; gap:10px !important; padding:18px 20px; }
  .srv .idx{ display:none; }
  .srv .dur{ justify-self:start; }
  .numrow{ grid-template-columns:44px 1fr; gap:14px; }
  .qfacts{ margin-left:20px; margin-right:20px; }
  .foot{ padding:44px 20px 26px; }
  .fbottom{ flex-direction:column; align-items:flex-start; }
  .mapwrap iframe{ height:300px; }
  .faq .q{ font-size:18px; }
  table, pre{ max-width:100%; overflow-x:auto; }
}

@media (max-width: 560px){
  .hero-copy{ padding-top:128px; }
  .sect, .sect-d, .phero, .wrap{ padding-left:16px; padding-right:16px; }
  .qfacts{ margin-left:16px; margin-right:16px; }
}

@media (max-width: 900px){
  /* full-bleed blocks were pulled out by the desktop page padding (16px);
     the mobile padding is 10px, so the old offset overflowed by 6px a side */
  [style*="margin:0 -16px"]{ margin-left:-10px !important; margin-right:-10px !important; }
  .foot, .sect-d, .msec-d{ margin-left:-10px; margin-right:-10px; }
}
@media (max-width: 560px){
  [style*="margin:0 -16px"]{ margin-left:-16px !important; margin-right:-16px !important; }
  .foot, .sect-d, .msec-d{ margin-left:-16px; margin-right:-16px; }
  .page{ padding-left:16px; padding-right:16px; }
}

@media (max-width: 900px){
  .brand{ padding:4px 0; }
  .brand-logo{ height:44px; }
  .crumb{ padding:10px 0; margin-bottom:8px; }
  .foot .socials a{ width:42px; height:42px; }
}

/* ══ MOBILE CARD SECTIONS ════════════════════════════════════════════════
   Calibrated against Elan Dental at 375px, the closest reference in the audit:
   20px side margins, 335px full-width cards at 20px radius on a white ground,
   a 16:9 image flush to the card edge, a meta row, then body and a footer link.
   Cards stack — a horizontal rail hides four items out of five. */
.only-mobile{ display:none; }
@media (max-width: 900px){
  .only-desktop{ display:none !important; }
  .only-mobile{ display:block; }

  .msec{ padding:48px 0 56px; }
  .msec-d{ background:#2E3B35; color:#FBFAF6; }
  .mhead{ padding:0 20px 24px; display:flex; flex-direction:column; gap:12px; }
  .mhead h2{ margin:0; font-size:clamp(2rem,8.6vw,2.7rem); line-height:1.04; letter-spacing:-.035em; font-weight:500; }
  .mhead em{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400; color:#D9B56A; }
  .mhead.light em{ color:#8C6A22; }
  .mhead p{ margin:0; font-size:16px; line-height:1.55; color:#9EA49B; max-width:32ch; }
  .mhead.light p{ color:#5E6A63; }
  .mfull{ display:flex; justify-content:center; margin:20px 20px 0; padding:15px 24px; }
}

@media (max-width: 900px){
  /* stat row reads as a 2x2 block rather than four tall stacked cells */
  .wrap > .g[style*="repeat(4"]{ grid-template-columns:1fr 1fr !important; gap:0 !important; }
  .wrap > .g[style*="repeat(4"] > div{ padding:20px 16px !important; border-right:1px solid #D4DAD2; border-bottom:1px solid #D4DAD2; }
  .wrap > .g[style*="repeat(4"] > div:nth-child(2n){ border-right:none; }
  .wrap > .g[style*="repeat(4"] p{ max-width:none !important; }

  /* three-ups become rails instead of three full-width stacked blocks */
  .g[style*="grid-template-columns:repeat(3"]:not(.no-rail){ display:flex !important; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px !important; padding-bottom:12px; margin-left:-16px; margin-right:-16px;
    padding-left:16px; padding-right:16px; scrollbar-width:none; }
  .g[style*="grid-template-columns:repeat(3"]:not(.no-rail)::-webkit-scrollbar{ display:none; }
  .g[style*="grid-template-columns:repeat(3"]:not(.no-rail) > *{ flex:0 0 76vw; max-width:320px; scroll-snap-align:center; }
  .g[style*="grid-template-columns:repeat(3"] .fixh{ height:200px !important; }
  .ba{ height:auto !important; }

  /* review wall cards stay two-up — they are small */
}

@media (max-width: 900px){
  /* `1fr` floors at min-content, so a wide child pushes the column past its
     container. minmax(0,1fr) lets it shrink; min-width:0 does the same for the
     children themselves. This is what blew the hours card 59px past the page. */
  .g, .two, .three{ grid-template-columns:minmax(0,1fr) !important; }
  .g > *, .two > *, .three > *{ min-width:0; }
  .card{ padding:22px 20px !important; }
  .card .hrow{ font-size:15px; }
  .qfacts > div{ padding:18px 0 !important; }
  .fld input.in, .fld select.in, .fld textarea.in{ max-width:100%; }
  img, iframe, video{ max-width:100%; }
  pre, code{ overflow-x:auto; max-width:100%; }
}

@media (max-width: 900px){
  /* Full-bleed blocks carry their desktop 56px side padding inline; on a phone
     that leaves a 263px column inside a 375px screen. */
  [style*="px 56px"]{ padding-left:20px !important; padding-right:20px !important; }
  [style*="padding:84px 56px"], [style*="padding:78px 56px"], [style*="padding:74px 56px"]{
    padding-top:48px !important; padding-bottom:52px !important; }
}

/* long unbroken strings — email addresses, URLs — must be allowed to wrap */
a[href^="mailto:"], .fcol a, .micro{ overflow-wrap:anywhere; }

@media (max-width: 900px){
  /* the location card's caption ran underneath the map-pin button */
  [style*="left:32px; bottom:30px"]{ left:20px !important; right:88px !important; bottom:20px !important; }
  [style*="left:32px; bottom:30px"] > div:first-child{ font-size:24px !important; }
  [style*="left:32px; bottom:30px"] > div:last-child{ font-size:14px !important; }
  [style*="right:28px; bottom:28px"]{ right:18px !important; bottom:18px !important; width:44px !important; height:44px !important; }
}

@media (max-width: 900px){
  /* Grids that carried a fixed desktop height hold portrait images; without a
     ratio the image falls back to its intrinsic size and dominates the screen. */
  .g.fixh > div[style*="overflow:hidden"]{ aspect-ratio:16/10; }
  .g.fixh > div[style*="overflow:hidden"] > img{ height:100% !important; object-fit:cover; }
}

@media (max-width: 900px){
  /* placeholder chips are annotations, but 10px uppercase is unreadable on a phone */
  .tbc, .tbc-d{ font-size:11.5px; letter-spacing:.04em; line-height:1.45; padding:5px 10px; }
  .drawer .close{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ─── results page ─────────────────────────────────────────────────────── */
.case-head{ display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:end; margin-bottom:30px; padding-top:28px; border-top:1px solid #D4DAD2; }
.sect-d .case-head{ border-top:none; padding-top:0; }
.case-n{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:72px; line-height:.8; color:#8C6A22; }
.case-fig{ margin:0; display:flex; flex-direction:column; gap:10px; }
.case-fig figcaption{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#5E6A63; }
.case-views{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:30px; }
.case-tbc{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.crow{ display:grid; grid-template-columns:150px 1fr; gap:22px; padding:18px 0; border-top:1px solid #D4DAD2; font-size:16.5px; line-height:1.55; color:#3D4A43; }
.crow.last{ border-bottom:1px solid #D4DAD2; }
.sect-d .crow{ border-color:rgba(255,255,255,.16); color:#B9C2BB; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pimg{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:6px; }
.trio{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.trio .pimg{ aspect-ratio:4/3; }
.sim-wrap{ position:relative; }
.sim .pimg{ outline:1px dashed #B8913E; outline-offset:3px; }
.sim-tag{ position:absolute; left:10px; top:10px; background:rgba(46,59,53,.78); color:#FBFAF6; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:5px 9px; border-radius:999px; }

/* ─── team page ────────────────────────────────────────────────────────── */
.lead-dr{ display:grid; grid-template-columns:minmax(0,260px) 1fr; gap:56px; align-items:center; background:#FBFAF6; border:1px solid #E3E6DF; border-radius:28px; padding:22px 48px 22px 22px; }
.lead-img{ border-radius:20px; overflow:hidden; aspect-ratio:3/4; }
.tgrid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:40px 22px; }
.tcard{ display:flex; flex-direction:column; gap:6px; }
.timg{ border-radius:20px; overflow:hidden; aspect-ratio:4/5; max-width:300px; margin-bottom:12px; background:#E3E6DF; }
.timg img{ width:100%; height:100%; object-fit:cover; object-position:50% 25%; display:block; }
.tname{ font-size:24px; font-weight:600; letter-spacing:-.02em; }
.tname.tph{ color:#8A8E8A; }
.trole{ font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#4E6657; margin-bottom:8px; }
.tbio{ margin:0; font-size:15.5px; line-height:1.6; color:#3D4A43; }
.tbio.quote-s{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:19px; line-height:1.45; color:#2E3B35; }
.tcard .tbc{ align-self:flex-start; }

@media (max-width: 1080px){
  .lead-dr{ grid-template-columns:1fr; padding:18px 18px 30px; gap:28px; }
  .lead-img{ aspect-ratio:1/1; max-width:260px; }
  .tgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 680px){
  .case-views, .tgrid, .trio{ grid-template-columns:1fr; }
  .crow{ grid-template-columns:1fr; gap:6px; }
  .case-head{ gap:16px; }
  .case-n{ font-size:48px; }
}

/* home scrollers: concerns{ color:inherit; text-decoration:none; }
.grp[id]{ scroll-margin-top:110px; }

/* service rows: the link covers the name only, its ::after stretches over the row */
.srv-a{ position:relative; }
.srv-a .srv-t{ color:inherit; text-decoration:none; }
.srv-a .srv-t::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.srv-a:hover{ border-color:#B8913E; }
.srv-a:focus-within{ outline:2px solid #8C6A22; outline-offset:2px; }
.srv-a .srv-t:focus-visible{ outline:none; }

/* services hub: concern-led entry */
.concerns{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.concern{ display:flex; flex-direction:column; gap:4px; padding:18px 20px; border:1px solid #E3E6DF; border-radius:16px; background:#FBFAF6; color:inherit; text-decoration:none; }
.concern:hover, .concern:focus-visible{ border-color:#B8913E; }
.concern-t{ font-size:18px; font-weight:600; letter-spacing:-.01em; }
.concern-s{ font-size:14.5px; color:#5E6A63; }
@media (max-width:680px){ .concerns{ grid-template-columns:1fr; } }

/* appointment request form states */
.form-status{ font-size:15px; line-height:1.55; padding:14px 16px; border-radius:12px; }
.form-status.ok{ background:#E4F0E6; color:#1F4A2C; border:1px solid #B9D6BF; }
.form-status.bad{ background:#F5E6DF; color:#5A2A17; border:1px solid #B8913E; }
.form-status a{ color:inherit; font-weight:600; }
.fld-err{ display:block; font-size:13.5px; color:#A3392A; margin-top:4px; }
.in[aria-invalid="true"]{ border-color:#A3392A; }
form.is-sent > :not(.form-status){ display:none !important; }
@media (max-width: 680px){ .timg{ max-width:300px; } }
@media (max-width: 680px){ .g.fixh > .cta-photo{ position:relative; width:100%; max-width:260px; aspect-ratio:3/4 !important; } .cta-photo img{ position:absolute; inset:0; aspect-ratio:auto !important; height:100% !important; } }

/* ── Service pages (shared; the VELscope page set the pattern) ── */
.svc-hero{ align-items:center; }
.svc-photo{ margin:0; position:relative; border-radius:24px; overflow:hidden; aspect-ratio:5/4; background:#2E3B35; }
.svc-photo img{ width:100%; height:100%; object-fit:cover; object-position:30% 50%; display:block; }
.svc-photo figcaption{ position:absolute; left:16px; right:16px; bottom:16px; width:max-content; max-width:calc(100% - 32px);
  background:rgba(251,250,246,.92); color:#2E3B35; border-radius:9999px; padding:9px 16px; font-size:14px; line-height:1.35; }
.svc-pills{ display:flex; flex-wrap:wrap; gap:10px; padding:0 56px 72px; }
.svc-frame{ border-radius:22px; overflow:hidden; aspect-ratio:4/5; max-height:560px; width:100%; }
.svc-frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-frame-wide{ aspect-ratio:4/3; border-radius:18px; }
.svc-frame-tall{ max-height:620px; }
.svc-cutout{ display:flex; justify-content:center; }
.svc-cutout img{ height:440px; width:auto; filter:drop-shadow(0 24px 30px rgba(46,59,53,.18)); transform:rotate(-8deg); }
.sect-d .svc-cutout img{ filter:drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.svc-ba{ aspect-ratio:4/3; border-radius:18px; }
.svc-ba .ba-l{ font-size:10.5px; padding:5px 10px; border-radius:9999px; bottom:14px; }
.sect-d .case-fig figcaption{ color:#B9C2BB; }
.svc-band a{ color:#D9B56A !important; }
.svc-band a.btn-out{ color:#FBFAF6 !important; }
.sect-d .ba{ border-radius:18px; }
.svc-feature{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; align-items:center;
  background:linear-gradient(160deg,#F5E6DF 0%,#FBFAF6 70%); border:1px solid #E3E6DF; border-radius:28px; padding:48px 56px; }
.svc-feature > .svc-frame{ max-height:520px; }
.svc-points{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-top:14px; }
.svc-points > div{ display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.5; color:#3D4A43; }
.svc-points strong{ font-size:17px; font-weight:600; color:#2E3B35; }
.svc-points .body{ font-size:16px; margin-top:2px; }
.svc-dot{ flex:none; width:10px; height:10px; margin-top:7px; border-radius:9999px; background:#8C6A22; box-shadow:0 0 0 5px rgba(140,106,34,.14); }
.svc-dot.blue{ background:#4B5BE0; box-shadow:0 0 0 5px rgba(75,91,224,.15); }
.vel-stat{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:56px; align-items:center;
  border-top:1px solid #D4DAD2; border-bottom:1px solid #D4DAD2; padding:44px 0; }
.vel-num{ font-family:'Instrument Serif',Georgia,serif; font-size:180px; line-height:.9; letter-spacing:-.04em; color:#8C6A22; }
.vel-num span{ font-size:.5em; margin-left:4px; }
@media (max-width: 900px){
  .svc-pills{ padding:0 22px 48px; }
  .svc-feature, .vel-stat{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .svc-feature{ padding:28px 22px; }
  .svc-cutout img{ height:300px; }
  .svc-frame{ aspect-ratio:4/3; }
  .vel-num{ font-size:120px; }
}
@media (max-width: 560px){
  .svc-pills{ padding:0 16px 40px; }
  .svc-photo{ aspect-ratio:4/3; }
  .svc-photo figcaption{ font-size:12.5px; }
  .svc-points{ grid-template-columns:1fr; }
}

/* request form: preferred days */
.fld-legend{ font-size:13px; font-weight:600; letter-spacing:.02em; color:#3D4A43; margin-bottom:8px; padding:0; }
.daychips{ display:flex; gap:8px; flex-wrap:wrap; }
.daychip{ position:relative; cursor:pointer; }
.daychip input{ position:absolute; opacity:0; width:1px; height:1px; }
.daychip span{ display:inline-flex; align-items:center; justify-content:center; min-width:64px; min-height:44px; padding:0 14px; border:1px solid #D4DAD2; border-radius:12px; font-size:15px; color:#5E6A63; background:#FBFAF6; }
.daychip input:checked + span{ background:#4E6657; border-color:#4E6657; color:#FBFAF6; font-weight:600; }
.daychip input:focus-visible + span{ outline:2px solid #8C6A22; outline-offset:2px; }

/* ═══ Brand book 2026-10-15: Eucalyptus Blush, Instrument Serif headings ═══ */
h1, h2, h3, .h-xl, .h-lg, .h-hero{ font-family:'Instrument Serif',Georgia,serif !important; font-weight:400 !important; letter-spacing:-.01em !important; }
h1 em, h2 em, h3 em, .acc{ font-style:italic; }

.hero2{ position:relative; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:0; align-items:stretch;
  background:#FBFAF6; border:1px solid #E3E6DF; border-radius:26px; overflow:hidden; min-height:640px; }
.hero2-copy{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; gap:22px; padding:64px 40px 64px 56px; }
.hero2-h{ margin:0; font-size:clamp(3rem,5.6vw,5.4rem); line-height:1.0; color:#2E3B35; }
.hero2-h em{ color:#8C6A22; }
.hero2-p{ margin:0; font-size:18.5px; line-height:1.6; color:#5E6A63; max-width:40ch; }
.hero2-btns{ display:flex; gap:12px; flex-wrap:wrap; margin-top:4px; }
.hero2-btns .btn-out{ background:#FBFAF6; }
.hero2-rev{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:#5E6A63; }
.hero2-score{ font-size:19px; font-weight:600; color:#2E3B35; }
.hero2-em{ margin:0; font-size:14.5px; color:#5E6A63; padding-left:16px; border-left:2px solid #B8913E; }
.hero2-art{ position:relative; min-height:100%; }
.hero2-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 30%; display:block; }
.hero2-art::before{ content:""; position:absolute; inset:0 auto 0 0; width:28%; z-index:1;
  background:linear-gradient(90deg,#FBFAF6 0%,rgba(251,250,246,0) 100%); }
.hero2-lily{ position:absolute; z-index:3; left:calc(50.5% - 150px); bottom:-10px; width:300px; height:auto; pointer-events:none; }
@media (max-width: 900px){
  .hero2{ grid-template-columns:1fr; min-height:0; border-radius:20px; }
  .hero2-art{ order:-1; aspect-ratio:4/3.4; max-height:460px; width:100%; min-height:0; overflow:hidden; }
  .hero2-art::before{ inset:auto 0 0 0; width:auto; height:34%; background:linear-gradient(0deg,#FBFAF6 0%,#FBFAF6 7%,rgba(251,250,246,0) 100%); }
  .hero2-art{ margin-bottom:-1px; }
  .hero2-lily{ z-index:1; left:auto; right:14px; bottom:-14px; width:150px; opacity:.85; }
  .hero2-copy{ padding-right:170px !important; }
  .hero2-copy{ padding:8px 22px 30px; gap:18px; }
  .hero2-h{ font-size:clamp(2.6rem,12vw,3.4rem); }
  .hero2-p{ font-size:16px; }
  .hero2-btns{ flex-direction:column; }
  .hero2-btns > *{ width:100% !important; justify-content:center; }
}
@media (max-width: 480px){
  .brand-logo{ height:34px; }
  .nav{ gap:10px; }
}
/* the closing band's lily panel is decorative: desktop only */
@media (max-width: 900px){ .cta-photo{ display:none !important; } }

/* care band: the former hero photo, below the fold */
.care-band{ position:relative; margin:0; height:520px; border-radius:26px; overflow:hidden; background:#2E3B35; }
.care-band img{ width:100%; height:100%; object-fit:cover; object-position:38% 44%; display:block; filter:saturate(.82) contrast(1.03); }
.care-band::after{ content:""; position:absolute; inset:0; background:linear-gradient(74deg,rgba(30,40,35,.82) 0%,rgba(30,40,35,.45) 38%,rgba(30,40,35,0) 70%); }
.care-band figcaption{ position:absolute; z-index:2; left:54px; bottom:50px; display:flex; flex-direction:column; gap:12px; max-width:560px; color:#FBFAF6; }
.care-band-t{ font-family:'Instrument Serif',Georgia,serif; font-size:40px; line-height:1.08; }
.care-band-t em{ color:#D9B56A; }
@media (max-width: 900px){
  .care-band{ height:auto; aspect-ratio:4/3.6; border-radius:20px; }
  .care-band::after{ background:linear-gradient(0deg,rgba(30,40,35,.9) 0%,rgba(30,40,35,.62) 38%,rgba(30,40,35,0) 72%); }
  .care-band figcaption{ left:22px; right:22px; bottom:24px; }
  .care-band-t{ font-size:28px; }
}
@media (max-width: 600px){
  .hero2-copy{ padding-right:22px !important; padding-bottom:172px !important; }
  .hero2-lily{ width:90px; right:22px; bottom:12px; opacity:1; }
}

/* hero: looping video over the still photo; the still stays for reduced motion and slow loads */
.hero2-video{ z-index:0; height:calc(100% + 2px) !important; background:#FBFAF6; }
@media (prefers-reduced-motion: reduce){ .hero2-video{ display:none; } }

/* ═══ Conversion layer 2026-10-15: photo headers, trust strip, proof, mobile bar ═══ */
.phero.phero-img{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:0; align-items:stretch; padding:0 !important;
  background:#FBFAF6; border:1px solid #E3E6DF; border-radius:26px; overflow:hidden; margin-bottom:18px; }
.phero-copy{ display:flex; flex-direction:column; gap:22px; justify-content:center; padding:56px 44px 52px 52px; }
.phero-copy .prose{ max-width:52ch; }
.phero-photo{ margin:0; position:relative; min-height:460px; }
.phero-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.trust{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:18px 0 8px; }
.trust > div{ display:flex; align-items:center; gap:12px; background:#FBFAF6; border:1px solid #E3E6DF; border-radius:16px; padding:14px 16px; }
.tr-ico{ width:40px; height:40px; flex:0 0 40px; border-radius:9999px; background:#FBFAF6; box-shadow:inset 0 0 0 1px rgba(184,145,62,.45); display:inline-flex; align-items:center; justify-content:center; }
.trust b{ display:block; font-size:15px; color:#2E3B35; }
.trust span span, .trust div > span:last-child{ font-size:13.5px; color:#5E6A63; line-height:1.35; }
.proof{ padding:72px 56px 40px; }
.proof-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:26px; }
.proof-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr); gap:16px; }
.rv-card{ margin:0; background:#FBFAF6; border:1px solid #E3E6DF; border-radius:20px; padding:24px; display:flex; flex-direction:column; gap:14px; }
.rv-card blockquote{ margin:0; font-family:'Instrument Serif',Georgia,serif; font-size:20px; line-height:1.3; color:#2E3B35; flex:1; }
.rv-card figcaption{ font-size:13.5px; color:#5E6A63; }
.doc-card{ display:flex; flex-direction:column; background:#2E3B35; border-radius:20px; overflow:hidden; color:#FBFAF6; text-decoration:none !important; }
.doc-card img{ width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 12%; display:block; }
.doc-card > span{ display:flex; flex-direction:column; gap:6px; padding:18px 20px 20px; }
.doc-card .kick{ color:#F3E2DA; }
.doc-card b{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:26px; }
.doc-sub{ font-size:13px; color:#B9C2BB; }
.doc-link{ font-size:14.5px; font-weight:600; color:#D9B56A; margin-top:4px; }
.mbar{ display:none; }
@media (max-width: 1100px){
  .trust{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .proof-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* portrait beside the text once the card spans a wide column, so the photo stays small */
  .doc-card{ flex-direction:row; align-items:stretch; }
  .doc-card img{ width:150px; flex:0 0 150px; aspect-ratio:auto; min-height:170px; object-position:50% 15%; }
  .doc-card > span{ justify-content:center; }
}
/* the team photo is a wide group shot: stack it at its own shape before the column gets too narrow to hold all eight people */
@media (max-width: 1100px) and (min-width: 901px){
  .phero-team{ grid-template-columns:1fr !important; }
  .phero-team .phero-photo{ order:-1; min-height:0; aspect-ratio:3/2; }
}
@media (max-width: 900px){
  .phero.phero-img{ grid-template-columns:1fr; border-radius:20px; }
  .phero-photo{ order:-1; min-height:0; aspect-ratio:16/10; }
  .phero-copy{ padding:24px 22px 28px; gap:16px; }
  .proof{ padding:52px 16px 28px; }
  .mbar{ display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:8px; position:fixed; left:10px; right:10px; z-index:40;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(251,250,246,.96); backdrop-filter:blur(10px);
    border:1px solid #E3E6DF; border-radius:18px; padding:8px; box-shadow:0 10px 30px rgba(30,40,35,.18); }
  .mbar a{ display:flex; align-items:center; justify-content:center; gap:7px; padding:12px 8px; border-radius:12px;
    font-size:15px; font-weight:600; color:#2E3B35; text-decoration:none; white-space:nowrap; }
  .mbar a.mbar-main{ background:#4E6657; color:#FBFAF6; }
  body{ padding-bottom:84px; }
}
@media (max-width: 560px){
  .trust, .proof-grid{ grid-template-columns:1fr; }
  .trust{ gap:8px; }
  .doc-card img{ width:118px; flex-basis:118px; min-height:150px; }
}
.tiles-wrap{ padding:18px 0 6px; }
.tiles{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.tile{ position:relative; display:block; border-radius:20px; overflow:hidden; aspect-ratio:3/4; color:#FBFAF6; text-decoration:none !important; background:#2E3B35; }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,.61,.36,1); }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(30,40,35,.85) 0%,rgba(30,40,35,.1) 55%,rgba(30,40,35,0) 100%); }
.tile span{ position:absolute; z-index:1; left:16px; right:16px; bottom:16px; font-size:13.5px; color:#E3E6DF; }
.tile b{ display:block; font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:23px; line-height:1.1; color:#FBFAF6; margin-bottom:4px; }
@media (hover:hover){ .tile:hover img{ transform:scale(1.05); } }
@media (max-width: 900px){ .tiles{ grid-template-columns:repeat(2,minmax(0,1fr)); } .tile:last-child{ grid-column:1/-1; aspect-ratio:16/9; } }

/* merged strip: a page's fact row styled like the trust strip (2026-10-15) */
.qfacts{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)) !important; gap:14px;
  border:0 !important; margin:18px 0 52px !important; }
.qfacts > div{ background:#FBFAF6; border:1px solid #E3E6DF !important; border-radius:16px; padding:14px 16px !important; gap:4px; }
.qfacts .qv{ font-size:15.5px; }
.qf-rating{ background:#F3E2DA !important; border-color:#F3E2DA !important; }
.qf-rating .qv::before{ content:"★★★★★ "; color:#B8913E; letter-spacing:1px; font-size:13px; }
@media (max-width: 560px){ .qfacts{ grid-template-columns:1fr 1fr !important; gap:8px; } }

/* service pages (2026-10-15): "At a glance" cards, a case slider in the header, tap-to-open detail.
   Icons are gold fine line, the logo's own weight. */
.glance{ padding:0 56px 64px; }
.gl-head{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#8C6A22; margin:18px 0 12px; }
.gl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; }
.gl-card{ display:flex; align-items:center; gap:12px; background:#FBFAF6; border:1px solid #E3E6DF; border-radius:16px; padding:14px 16px; }
.gl-ico{ width:42px; height:42px; flex:0 0 42px; border-radius:9999px; background:#FBFAF6; box-shadow:inset 0 0 0 1px rgba(184,145,62,.45);
  display:inline-flex; align-items:center; justify-content:center; }
.gl-k{ display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#5E6A63; }
.gl-v{ display:block; font-size:15.5px; font-weight:600; color:#2E3B35; line-height:1.3; }
.gl-rating{ background:#F3E2DA; border-color:#F3E2DA; }
.gl-rating .gl-ico{ background:#FBFAF6; }
.svc-photo-ba .ba{ border-radius:24px; }
.svc-photo-ba .case-fig{ margin:0; }
.svc-photo-ba .micro{ margin-top:10px; }
details.more{ margin-top:6px; }
details.more > summary, .faq-d > summary{ list-style:none; cursor:pointer; }
details.more > summary::-webkit-details-marker, .faq-d > summary::-webkit-details-marker{ display:none; }
details.more > summary{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#4E6657; padding:6px 0; }
details.more > summary::after{ content:"+"; font-size:19px; font-weight:400; color:#A57F30; }
details.more[open] > summary{ display:none; }
.faq-d{ border-bottom:1px solid #E3E6DF; }
.faq-d:first-child{ border-top:1px solid #E3E6DF; }
.faq-d:last-child{ border-bottom:none; }
.faq-d > summary{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0;
  font-size:20px; font-weight:600; letter-spacing:-.012em; }
.faq-d > summary::after{ content:"+"; flex:none; width:30px; height:30px; border-radius:9999px; display:inline-flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:400; color:#A57F30; box-shadow:inset 0 0 0 1px rgba(184,145,62,.45); transition:transform .25s; }
.faq-d[open] > summary::after{ transform:rotate(45deg); }
.faq-d > p{ font-size:16px; margin:-6px 0 20px; }
/* the lily line as an occasional accent: a divider before reviews, and the 404 page */
.lily-rule{ display:flex; align-items:center; gap:18px; padding:56px 56px 0; }
.lily-rule span{ flex:1; height:1px; background:linear-gradient(90deg,rgba(184,145,62,0),rgba(184,145,62,.5)); }
.lily-rule span:last-child{ background:linear-gradient(90deg,rgba(184,145,62,.5),rgba(184,145,62,0)); }
.lily-rule img{ height:62px; width:auto; display:block; }
.nf{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:56px; align-items:center; padding:72px 56px 96px; }
.nf img{ height:340px; width:auto; display:block; }
@media (max-width: 900px){
  .glance{ padding:0 22px 44px; }
  .gl-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .gl-card{ padding:12px; gap:10px; }
  .gl-ico{ width:36px; height:36px; flex-basis:36px; }
  .gl-v{ font-size:14.5px; }
  .gl-card:last-child:nth-child(odd){ grid-column:1/-1; }
  .faq-d > summary{ font-size:18px; }
  .lily-rule{ padding:40px 16px 0; }
  .nf{ grid-template-columns:1fr; gap:24px; padding:40px 16px 64px; }
  .nf img{ height:180px; }
}
@media (max-width: 560px){ .glance{ padding:0 16px 40px; } }

/* services page told as chapters (2026-10-15): sticky chapter bar, alternating photo/copy rows,
   rows rise in as they enter. Content is fully visible without JS. */
.chap-nav{ position:sticky; top:var(--chap-top,104px); z-index:20; display:flex; justify-content:center; padding:10px 0; margin:30px 0 0; pointer-events:none; }
.chap-nav > div{ pointer-events:auto; display:flex; gap:4px; padding:5px; background:rgba(251,250,246,.92); backdrop-filter:blur(10px);
  border:1px solid #E3E6DF; border-radius:9999px; box-shadow:0 8px 24px rgba(30,40,35,.08); overflow-x:auto; scrollbar-width:none; max-width:100%; }
.chap-nav > div::-webkit-scrollbar{ display:none; }
.chap-nav a{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; padding:9px 16px; border-radius:9999px; font-size:14.5px; font-weight:600;
  color:#3D4A43; text-decoration:none !important; transition:background .25s,color .25s; }
.chap-nav a span{ font-size:11px; letter-spacing:.06em; color:#A57F30; }
.chap-nav a.on{ background:#4E6657; color:#FBFAF6; }
.chap-nav a.on span{ color:#D9B56A; }
.chap-nav a.chap-urgent span{ width:16px; height:16px; border-radius:9999px; background:#F3E2DA; color:#8C3A2B; display:inline-flex; align-items:center; justify-content:center; }
.chap{ padding:56px 56px 40px; scroll-margin-top:170px; }
.chap-cosmetic{ background:linear-gradient(180deg,rgba(243,226,218,0) 0%,#F5E6DF 12%,#F5E6DF 88%,rgba(243,226,218,0) 100%); }
.chap-jaw{ background:linear-gradient(180deg,rgba(220,229,220,0) 0%,#E4EBE3 18%,#E4EBE3 82%,rgba(220,229,220,0) 100%); }
.chap-head{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:28px; align-items:start; max-width:880px; margin:0 auto 46px; }
.chap-n{ font-family:'Instrument Serif',Georgia,serif; font-size:120px; line-height:.8; color:#B8913E; opacity:.55; }
.chap-head .h-xl{ margin-top:10px; }
.chap-lede{ font-size:18px; line-height:1.6; color:#3D4A43; margin-top:14px; max-width:58ch; }
.story{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; align-items:center; max-width:1180px; margin:0 auto 72px; }
.story.flip .story-media{ order:2; }
.story-media{ display:block; position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/3; background:#E3E6DF;
  box-shadow:0 24px 50px -28px rgba(30,40,35,.45); }
.story-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.2s cubic-bezier(.22,.61,.36,1); }
a.story-media:hover img{ transform:scale(1.04); }
.story-ba{ aspect-ratio:auto; background:none; box-shadow:none; overflow:visible; }
.story-ba .ba{ border-radius:26px; box-shadow:0 24px 50px -28px rgba(30,40,35,.45); }
.story-ba .case-fig{ margin:0; }
.story-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.story-i{ font-size:12px; font-weight:600; letter-spacing:.14em; color:#A57F30; }
.story-badge{ background:#4E6657; color:#FBFAF6; border-radius:9999px; padding:5px 11px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-top:-6px; }
.story-t{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:40px; line-height:1.05; letter-spacing:-.01em; margin:0; }
.story-t a{ color:#2E3B35; text-decoration:none; }
.story-copy p{ font-size:17px; line-height:1.65; color:#3D4A43; margin:0; max-width:46ch; }
.story-copy p a{ color:#4E6657; }
.story-facts{ display:flex; flex-wrap:wrap; gap:8px; }
.story-fact{ display:inline-flex; align-items:center; gap:7px; background:#FBFAF6; border:1px solid #E3E6DF; border-radius:9999px; padding:7px 13px 7px 10px; font-size:13.5px; font-weight:600; color:#2E3B35; }
.story-link{ display:inline-flex; align-items:center; gap:8px; margin-top:4px; font-size:15.5px; font-weight:600; color:#4E6657; text-decoration:none !important;
  border-bottom:1px solid rgba(165,127,48,.5); padding-bottom:3px; }
.story-link span{ transition:transform .25s; }
.story-link:hover span{ transform:translateX(4px); }
.chap-urgent-band{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); margin:24px 56px 40px; border-radius:28px; overflow:hidden; background:#2E3B35; scroll-margin-top:170px; }
.ub-media{ position:relative; min-height:380px; }
.ub-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ub-copy{ display:flex; flex-direction:column; justify-content:center; gap:16px; padding:48px 52px; color:#D7DDD8; font-size:17px; line-height:1.6; }
.ub-copy p{ margin:0; }
/* reveal: only when JS has opted the page in */
.sv-js [data-story]{ opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .9s cubic-bezier(.22,.61,.36,1); }
.sv-js [data-story] .story-media img{ transform:scale(1.08); }
.sv-js [data-story].in{ opacity:1; transform:none; }
.sv-js [data-story].in .story-media img{ transform:scale(1); }
@media (prefers-reduced-motion: reduce){ .sv-js [data-story]{ opacity:1; transform:none; transition:none; } .sv-js [data-story] .story-media img{ transform:none; } }
@media (max-width: 900px){
  .chap-nav{ margin-top:18px; justify-content:flex-start; padding:8px 0; }
  .chap-nav a{ padding:8px 13px; font-size:14px; }
  .chap{ padding:40px 22px 16px; scroll-margin-top:150px; }
  .chap-head{ grid-template-columns:1fr; gap:6px; margin-bottom:30px; }
  .chap-n{ font-size:72px; }
  .story, .story.flip{ grid-template-columns:1fr; gap:22px; margin-bottom:52px; }
  .story.flip .story-media{ order:0; }
  .story-t{ font-size:32px; }
  .story-copy p{ font-size:16px; }
  .chap-urgent-band{ grid-template-columns:1fr; margin:16px 16px 32px; }
  .ub-media{ min-height:220px; }
  .ub-copy{ padding:28px 22px 32px; }
}
@media (max-width: 560px){ .chap{ padding:36px 16px 8px; } }

/* header cards in the brand's light sage, so they stand apart from the ivory page and the ivory nav (2026-10-15) */
:root{ --sage-l:#DCE5DC; }
.hero2, .phero.phero-img{ background:var(--sage-l); border-color:#CDD8CD; }
.hero2-art::before{ background:linear-gradient(90deg,var(--sage-l) 0%,rgba(220,229,220,0) 100%); }
.hero2-video{ background:var(--sage-l); }
.phero.svc-hero{ background:var(--sage-l); border:1px solid #CDD8CD; border-radius:26px; padding:48px 52px; margin-bottom:18px; }
.phero-copy .btn-out, .svc-hero .btn-out, .hero2-btns .btn-out{ background:#FBFAF6; }
@media (max-width: 900px){
  .hero2-art::before{ bottom:-2px; background:linear-gradient(0deg,var(--sage-l) 0%,var(--sage-l) 9%,rgba(220,229,220,0) 100%); }
  .phero.svc-hero{ border-radius:20px; padding:24px 20px 28px; }
}

/* the clinic's case photos are small originals (390–810px wide): show them near their real size so they stay sharp,
   until the full-resolution files come from the clinic */
.case-views{ max-width:1000px; }
.case .case-fig, .case .ba{ max-width:660px; }

/* header in the brand light sage (2026-10-15). Slightly translucent with a blur so it reads cleanly over photos,
   dark bands and ivory sections; a soft shadow appears once it is floating over content. */
.nav{ background:rgba(220,229,220,.92); -webkit-backdrop-filter:saturate(1.2) blur(14px); backdrop-filter:saturate(1.2) blur(14px);
  border-color:#CBD6CB; transition:box-shadow .3s ease, background-color .3s ease; }
.nav.is-stuck{ background:rgba(220,229,220,.86); box-shadow:0 14px 34px -16px rgba(30,40,35,.35), 0 1px 0 rgba(255,255,255,.5) inset; }
.nav .nlink{ color:#43514A; }
.nav .nlink:hover, .nav .nlink[aria-current="page"]{ color:#2E3B35; }
.nav .nlink[aria-current="page"]{ text-decoration:underline; text-decoration-color:#B8913E; text-decoration-thickness:1.5px; text-underline-offset:7px; }
.nav .btn-ghost{ background:#FBFAF6; border-color:#CBD6CB; }
.nav .menu-btn{ background:#FBFAF6; border-color:#CBD6CB; }

/* New patients: "Four steps" as scrollytelling (2026-10-15). Desktop: the photo is pinned and changes with the step
   in view while a gold rail fills. Phones: each step carries its own photo. Works as a plain list without JS. */
.sc-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:72px; margin-top:44px; align-items:start; }
/* the photo is centred in the screen and never tucked under the header; the last step is as tall as the photo,
   so at the end the two line up and leave together instead of the photo sliding away first */
.sc{ --sc-h:min(560px, 64vh); }
.sc-visual{ position:sticky; top:max(var(--sc-top,120px), calc(50vh - var(--sc-h) / 2 + 30px)); height:var(--sc-h); }
.sc-step:last-child{ min-height:var(--sc-h); }
.sc-frame{ position:relative; margin:0; height:100%; border-radius:28px; overflow:hidden; background:#DCE5DC; box-shadow:0 30px 60px -34px rgba(30,40,35,.5); }
.sc-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06);
  transition:opacity .7s ease, transform 1.4s cubic-bezier(.22,.61,.36,1); }
.sc-img.on{ opacity:1; transform:scale(1); }
.sc-count{ position:absolute; left:18px; bottom:18px; z-index:2; background:rgba(251,250,246,.92); border-radius:9999px; padding:8px 14px;
  font-size:13px; letter-spacing:.08em; color:#5E6A63; }
.sc-count b{ color:#8C6A22; font-weight:600; }
.sc-steps{ position:relative; list-style:none; margin:0; padding:0 0 0 34px; }
.sc-rail{ position:absolute; left:0; top:20px; height:var(--sc-rail,calc(100% - 40px)); width:2px; background:#E3E6DF; border-radius:2px; }
.sc-fill{ position:absolute; left:0; top:0; width:100%; height:var(--sc-p,0%); background:#B8913E; border-radius:2px; transition:height .5s ease; }
.sc-step{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; min-height:38vh; padding:6px 0 56px; }
.sc-step:last-child{ padding-bottom:0; }
.sc-step::before{ content:""; position:absolute; left:-40px; top:14px; width:14px; height:14px; border-radius:9999px; background:#F6F4EF; box-shadow:inset 0 0 0 2px #D4DAD2; transition:box-shadow .3s, background .3s; }
.sc-n{ font-family:'Instrument Serif',Georgia,serif; font-size:64px; line-height:.85; color:#B8913E; opacity:.45; transition:opacity .4s; }
.sc-t{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; font-size:36px; line-height:1.08; margin:0 0 12px; color:#2E3B35; }
.sc-body p{ font-size:17px; line-height:1.65; color:#3D4A43; margin:0; max-width:46ch; }
.sc-body .sc-tag{ font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:22px; color:#4E6657; margin-top:14px; }
.sc-mimg{ display:none; }
.sc-js .sc-step .sc-body{ opacity:.38; transition:opacity .45s ease; }
.sc-js .sc-step.on .sc-body, .sc-js .sc-step.on .sc-n{ opacity:1; }
.sc-step.on::before{ background:#B8913E; box-shadow:0 0 0 5px rgba(184,145,62,.18); }
@media (max-width: 900px){
  .sc-grid{ grid-template-columns:1fr; gap:0; margin-top:28px; }
  .sc-visual{ display:none; }
  .sc-step:last-child{ min-height:0; }
  .sc-steps{ padding-left:26px; }
  .sc-step{ min-height:0; padding-bottom:40px; gap:0; grid-template-columns:1fr; }
  .sc-step::before{ left:-32px; top:6px; }
  .sc-rail{ top:12px; }
  .sc-n{ font-size:44px; margin-bottom:12px; }
  .sc-mimg{ display:block; margin:0 0 18px; border-radius:20px; overflow:hidden; aspect-ratio:4/3; }
  .sc-mimg img{ width:100%; height:100%; object-fit:cover; display:block; }
  .sc-t{ font-size:30px; }
  .sc-js .sc-step .sc-body{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){ .sc-img{ transition:none; transform:none; } }
.sc-head{ display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:end; }
.sc-head .body{ padding-bottom:6px; }
.sc-list{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.sc-list li{ display:flex; align-items:center; gap:10px; font-size:15.5px; color:#3D4A43; }
.sc-list li::before{ content:""; width:5px; height:5px; border-radius:9999px; background:#B8913E; flex:none; }
.sc-list a{ color:inherit; }
.sc-more{ display:flex; justify-content:center; margin-top:28px; }
@media (max-width: 900px){ .sc-head{ grid-template-columns:1fr; gap:12px; } }
/* variants: a light-sage band, and the photo on the right */
.sc-sage{ background:#DCE5DC; border-radius:32px; margin:24px 16px; padding-top:64px; padding-bottom:56px; }
.sc-sage .sc-step::before{ background:#DCE5DC; box-shadow:inset 0 0 0 2px #B9C6B9; }
.sc-sage .sc-step.on::before{ background:#B8913E; box-shadow:0 0 0 5px rgba(184,145,62,.2); }
.sc-sage .sc-rail{ background:#C5D1C5; }
.sc-sage .sc-frame{ background:#CBD6CB; }
.sc-flip .sc-visual{ order:2; }
.sc-t a{ color:inherit; text-decoration:none; }
.sc-body .story-badge{ display:inline-block; margin:0 0 10px; }
.sc-body .story-link{ margin-top:16px; }
.sc-treat{ list-style:none; margin:16px 0 0; padding:0; border-top:1px solid #D4DAD2; max-width:440px; }
.sc-treat li{ display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid #E3E6DF; font-size:15.5px; }
.sc-treat a{ color:#2E3B35; text-decoration:none; font-weight:600; }
.sc-treat a:hover{ color:#4E6657; }
.sc-treat em{ font-style:normal; font-size:13.5px; color:#8C6A22; white-space:nowrap; }
@media (max-width: 900px){
  .sc-sage{ margin:16px 10px; border-radius:24px; padding-top:40px; padding-bottom:36px; }
  .sc-flip .sc-visual{ order:0; }
}

/* home: Real cases on a sage band, three equal cards; Treatment / Timeline carry review boxes until supplied (2026-10-15) */
.cases-band{ background:#DCE5DC; border-radius:32px; margin:24px 0; padding:64px 56px 52px; }
.cases-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cases-lede{ margin:0; font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-size:26px; line-height:1.3; color:#3D4A43; text-align:right; }
.cases-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:40px; }
.case-card{ background:#FBFAF6; border-radius:24px; padding:12px; box-shadow:0 22px 44px -30px rgba(30,40,35,.45); display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s; }
@media (hover:hover){ .case-card:hover{ transform:translateY(-4px); box-shadow:0 30px 54px -30px rgba(30,40,35,.55); } }
.case-card .ba{ border-radius:16px; aspect-ratio:700/294; }
.case-card-b{ padding:16px 8px 6px; display:flex; flex-direction:column; gap:10px; }
.case-card-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.case-card-n{ font-family:'Instrument Serif',Georgia,serif; font-size:26px; color:#2E3B35; }
.case-card-k{ font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#8C6A22; }
.cf{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-top:10px; border-top:1px solid #E3E6DF; }
.cf-k{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#5E6A63; flex:none; }
.cf-v{ font-size:15px; color:#2E3B35; text-align:right; }
.cf-v .tbc{ font-size:12px; }
.cf:has(.cf-v:empty){ display:none; }
.cases-foot{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:36px; padding-top:22px; border-top:1px solid #C5D1C5; }
.cases-foot .micro{ max-width:62ch; margin:0; }
@media (max-width: 900px){
  .cases-band{ margin:16px -6px; border-radius:24px; padding:40px 18px 32px; }
  .cases-lede{ text-align:left; font-size:21px; }
  .cases-grid{ grid-template-columns:1fr; gap:16px; margin-top:28px; }
  .cf{ flex-wrap:wrap; }
  .cf-v{ text-align:left; }
}
.sc[id]{ scroll-margin-top:110px; }

/* team cards (2026-10-15): two groups, photo as wide as the text, quote with a gold rule,
   review note + links pinned to the bottom so every card in a row lines up */
.tgroup{ display:flex; align-items:center; gap:14px; margin:8px 0 22px; }
.tgroup span:last-child{ flex:1; height:1px; background:#E3E6DF; }
.tgroup + .tgrid + .tgroup{ margin-top:64px; }
.tgrid.tgrid-3{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 32px; }
.tgrid.tgrid-4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:44px 26px; }
.tcard{ gap:0; height:100%; }
.timg{ max-width:none; width:100%; margin-bottom:18px; }
.tname{ margin-bottom:4px; }
.trole{ margin-bottom:16px; }
.tbio.quote-s{ font-size:18px; line-height:1.5; padding-left:16px; border-left:2px solid #B8913E; }
.tgrid-4 .tbio.quote-s{ font-size:17px; }
.tbio.quote-s + .tbio{ margin-top:14px; font-size:15px; line-height:1.6; color:#5E6A63; }
.tfoot{ margin-top:auto; padding-top:18px; display:flex; flex-direction:column; gap:10px; }
.tfoot .tbc{ align-self:stretch; justify-content:flex-start; }
.tlinks{ display:flex; flex-wrap:wrap; gap:8px; }
.tlinks .pill{ font-size:14px; padding:8px 14px; }
@media (max-width: 1080px){ .tgrid.tgrid-3, .tgrid.tgrid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 680px){
  .tgrid.tgrid-3, .tgrid.tgrid-4{ grid-template-columns:1fr; gap:40px; }
  .timg{ aspect-ratio:1/1; }
  .tgroup + .tgrid + .tgroup{ margin-top:48px; }
}
/* every card in a group shares rows: photo · name · role · quote · paragraph · footer line up across the row */
@supports (grid-template-rows: subgrid){
  .tgrid.tgrid-3, .tgrid.tgrid-4{ row-gap:56px; }
  .tgrid .tcard{ display:grid; grid-row:span 6; grid-template-rows:subgrid; row-gap:0; height:auto; }
  .tgrid .tcard > .tbio.quote-s{ align-self:start; }
  .tgrid .tcard > .tfoot{ margin-top:0; align-self:start; }
  .tbio-empty{ margin:0; }
}
@media (max-width: 680px){ .tbio-empty{ display:none; } }
.tfoot .tlinks{ order:-1; }  /* links first, so every card's links share a line; the review note sits under them */

/* readability pass (2026-10-15): reading text 18px / 1.7 on desktop, 17px on phones; darker body grey;
   the small sizes (FAQ answers, fact lists, review cards, small print) go up a step */
.body{ font-size:18px; line-height:1.7; color:#4A5650; }
.prose p, .legal ul, .story-copy p, .sc-body p{ font-size:18px; line-height:1.7; }
.chap-lede{ font-size:19px; }
.micro{ font-size:13.5px; }
.faq-d > p{ font-size:17.5px; line-height:1.7; }
.faq-d > summary{ font-size:21px; }
.svc-points > div, .svc-points .body{ font-size:17px; }
.sc-treat li{ font-size:16.5px; }
.gl-v{ font-size:16px; }
.trust span span, .trust div > span:last-child{ font-size:14.5px; }
.rv-card blockquote{ font-size:21px; line-height:1.4; }
.rv-card figcaption{ font-size:14.5px; }
.doc-sub{ font-size:14px; }
.pill{ font-size:15px; }
/* team cards: bigger type; the four-up group becomes two rows of wide cards (photo beside the text) */
.tbio{ font-size:17px; line-height:1.7; }
.tbio.quote-s{ font-size:20px; line-height:1.5; }
.tbio.quote-s + .tbio{ font-size:16.5px; line-height:1.7; color:#4A5650; }
.trole{ font-size:12px; }
.tname{ font-size:26px; }
.tgrid.tgrid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 44px; }
@supports (grid-template-rows: subgrid){
  .tgrid.tgrid-4 .tcard{ grid-template-columns:minmax(0,38%) minmax(0,1fr); column-gap:28px; grid-row:span 5; }
  .tgrid.tgrid-4 .tcard > .timg{ grid-column:1; grid-row:1 / span 5; align-self:start; margin-bottom:0; }
  .tgrid.tgrid-4 .tcard > :not(.timg){ grid-column:2; }
  .tgrid-4 .tbio.quote-s{ font-size:20px; }
}
@media (max-width: 900px){
  .body, .prose p, .legal ul, .story-copy p, .sc-body p{ font-size:17px; }
  .faq-d > p{ font-size:17px; }
}
@media (max-width: 680px){
  .tgrid.tgrid-4 .tcard{ grid-template-columns:1fr; grid-row:auto; display:flex; flex-direction:column; }
  .tgrid.tgrid-4 .tcard > .timg{ margin-bottom:18px; }
}

/* team photos: small portraits, not full-width (27 Oct) */
.tgrid .timg{ width:160px; max-width:160px; aspect-ratio:4/5; }
@supports (grid-template-rows: subgrid){
  .tgrid.tgrid-4 .tcard{ grid-template-columns:120px minmax(0,1fr); }
  .tgrid.tgrid-4 .tcard > .timg{ width:120px; max-width:120px; }
}
@media (max-width: 680px){
  .tgrid .timg, .tgrid.tgrid-4 .tcard > .timg{ width:140px; max-width:140px; }
}