*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#EFF3F5;font-family:'Hanken Grotesk',system-ui,sans-serif;color:#232A30}
a{color:inherit}

/* Keyboard focus is visible everywhere by default; dark surfaces flip the ring
   to white so it doesn't disappear into ink navy. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #22303F;outline-offset:3px}
footer a:focus-visible,.band-dark a:focus-visible{outline-color:#fff}

/* Skip link — first thing in the tab order, out of the way until focused. */
.skip{position:fixed;top:10px;left:-9999px;z-index:100;background:#22303F;color:#fff;font-size:14px;font-weight:600;padding:12px 18px;border-radius:8px;text-decoration:none;box-shadow:0 6px 18px rgba(35,42,48,.28)}
.skip:focus{left:7vw}
main:focus{outline:none}

.eyebrow{font:600 11.5px ui-monospace,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:#8A5A24}
.serif{font-family:'Newsreader',Georgia,serif}
.btn-solid{display:inline-block;background:#22303F;color:#fff;font-weight:700;border-radius:8px;text-decoration:none;border:none;cursor:pointer}
.btn-ghost{display:inline-flex;align-items:center;gap:9px;color:#22303F;font-weight:600;border:1.5px solid rgba(34,48,63,.35);border-radius:8px;text-decoration:none;background:none;cursor:pointer}
.navlink{font-size:14px;font-weight:500;color:#4A525A;text-decoration:none}
.navlink:hover{color:#22303F}
/* Current page: weight + an accent rule that sits under the text, so marking it
   costs no layout and doesn't rely on colour alone. */
.navlink[aria-current="page"]{color:#22303F;font-weight:600;text-decoration:underline;text-decoration-color:#8A5A24;text-decoration-thickness:2px;text-underline-offset:7px}
.foot-nav .navlink[aria-current="page"]{text-decoration-color:rgba(255,255,255,.5)}
/* Footer links sat at 18px tall — under the 24px minimum target size, and the
   phone number is exactly what someone reaches for on a phone. */
.foot-nav .navlink,footer .tel{display:inline-block;padding:6px 0}
/* The phone number is the highest-intent action on a phone — make it dial. */
.tel{text-decoration:none}
.tel:hover{text-decoration:underline;text-underline-offset:3px}
/* ---- Mobile navigation ----
   Below 860px the horizontal links don't fit, so the bar keeps only what a
   phone visitor actually reaches for — the logo and a one-tap Call — and the
   rest moves into a disclosure panel. Net effect: the sticky header gets
   shorter than the old two-row wrap, and the links come back. */
.nav-mobile{display:none;align-items:center;gap:6px}
.nav-call{display:inline-flex;align-items:center;height:44px;padding:0 18px;font-size:14px;white-space:nowrap}
/* -10px pulls the 44px tap target past the bar's padding so the bars line up
   optically with the logo's left edge rather than the button's invisible box. */
.nav-toggle{width:44px;height:44px;flex:none;position:relative;margin-right:-10px;padding:0;border:0;border-radius:9px;background:none;cursor:pointer}
.nav-toggle:hover,.nav-toggle[aria-expanded="true"]{background:rgba(34,48,63,.07)}
.nav-burger,.nav-burger::before,.nav-burger::after{position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:#22303F;transition:transform .18s ease,background-color .18s ease}
.nav-burger{top:21px}
.nav-burger::before{content:"";top:-7px;left:0}
.nav-burger::after{content:"";top:7px;left:0}
.nav-toggle[aria-expanded="true"] .nav-burger{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-burger::before{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-burger::after{transform:translateY(-7px) rotate(-45deg)}
.nav-panel{position:absolute;top:100%;left:0;right:0;background:#EFF3F5;border-bottom:1px solid rgba(34,48,63,.16);box-shadow:0 14px 26px rgba(35,42,48,.12);padding:2px 7vw 20px}
.nav-panel .navlink{display:block;font-size:16.5px;font-weight:600;color:#22303F;padding:15px 2px;border-bottom:1px solid rgba(34,48,63,.12)}
.nav-panel .navlink[aria-current="page"]{text-underline-offset:5px}
.nav-panel .btn-solid{display:block;text-align:center;margin-top:18px;font-size:15px;padding:14px 22px}
/* Desktop keeps the original bar; the mobile pieces stay out of the a11y tree. */
@media (min-width:861px){.nav-mobile,.nav-panel{display:none}}

.ph{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ph-tag{position:absolute;left:12px;bottom:12px;font:500 10px/1.35 ui-monospace,Menlo,monospace;letter-spacing:.01em;padding:5px 8px;border-radius:5px;background:rgba(255,255,255,.86);color:#454A50;max-width:82%;box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* larger before/after labels for the reveal slider — a clear, clean demonstration */
.ph-tag.lg{top:14px;bottom:auto;font:700 12.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.16em;padding:8px 12px;border-radius:6px;background:rgba(255,255,255,.94);color:#22303F;box-shadow:0 2px 6px rgba(0,0,0,.14)}
.ph-tag.lg.r{left:auto;right:14px}
.card{background:#fff;border:1px solid rgba(34,48,63,.13);border-radius:11px}

/* ---- Video: click-to-play facade ----
   The Vimeo player is ~700KB of JS. Most visitors never press play, so we ship a
   poster + a real <button> and only build the iframe on demand. The 16/9 box is
   reserved up front, so swapping in the player shifts nothing. */
.vid{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#22303F;box-shadow:0 10px 30px rgba(35,42,48,.12)}
.vid-btn{position:absolute;inset:0;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;display:block;font:inherit;color:#fff}
.vid-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* scrim: keeps the label and play control legible over any frame of the video */
.vid-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,30,39,0) 45%,rgba(22,30,39,.6) 100%)}
.vid-play{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(34,48,63,.92);box-shadow:0 6px 18px rgba(34,48,63,.35);display:flex;align-items:center;justify-content:center;transition:transform .18s ease,background-color .18s ease}
.vid-play::before{content:"";width:0;height:0;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.vid-btn:hover .vid-play{transform:translate(-50%,-50%) scale(1.06);background:#22303F}
.vid-btn:focus-visible{outline:3px solid #fff;outline-offset:-6px}
.vid-meta{position:absolute;z-index:1;left:15px;bottom:13px;font:600 11.5px ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.vid iframe,.vid video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#161E27}
/* loading / error states — both are real outcomes, so they get real design.
   The poster stays behind these, so the message needs its own backdrop: white
   text over a bright frame (a lab coat, a lit wall) is otherwise unreadable.
   Bounding it also means the focus ring lands on a message-shaped box rather
   than a full-bleed rectangle. */
.vid-status{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(84%,40ch);margin:0;padding:15px 22px;border-radius:10px;background:rgba(22,30,39,.88);text-align:center;font-size:14px;line-height:1.5;color:#fff}
.vid-status:focus,.vid-status:focus-visible{outline:2px solid #fff;outline-offset:3px}
.vid-status a{color:#fff;font-weight:600}
.vid-fallback{display:block;padding:10px 0 0;font-size:13px}
@media (max-width:520px){.vid-play{width:54px;height:54px}.vid-play::before{border-left-width:15px;border-top-width:10px;border-bottom-width:10px}}
@media (prefers-reduced-motion:reduce){.vid-play{transition:none}.vid-btn:hover .vid-play{transform:translate(-50%,-50%)}.nav-burger,.nav-burger::before,.nav-burger::after{transition:none}}
/* ---- Before/after reveal ----
   The frame handles its own horizontal drag now, so it has to say so. This
   grants the browser exactly the gestures that aren't ours: vertical swipes, so
   someone scrolling past the photo still scrolls, and pinch-zoom, because these
   are surgical photographs and wanting a closer look at one is the whole point.
   Sideways drags are what's left, and they can't be arbitrated away into a page
   pan mid-gesture. Note `pan-y` alone would have blocked pinch-zoom. */
.ba{touch-action:pan-y pinch-zoom;cursor:ew-resize;-webkit-tap-highlight-color:transparent}
.ba.is-dragging{cursor:grabbing}
/* A finger that lands on a photo shouldn't start a drag-image or a Save Image
   callout halfway through a reveal. */
.ba img{-webkit-user-drag:none;-webkit-touch-callout:none}
/* The input is now the keyboard and screen-reader control only — the drag is
   handled on the frame itself. It has to stay out of hit-testing, because its
   native thumb is a 44px target nobody can see that sits up to 22px away from
   the drawn handle at the ends of the track. pointer-events doesn't affect
   keyboard focus or assistive tech, both of which still drive it. */
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}
/* visible keyboard focus for the otherwise-transparent reveal slider — it moves
   to the handle, so suppress the default ring around the full-bleed input.
   is-kb is set by app.js rather than matched with :focus-visible, because focus
   here is moved by script and the browser reads that as a keyboard focus even
   when a fingertip caused it. See the note there. */
.ba-range:focus{outline:none}
.ba.is-kb .ba-handle{outline:3px solid #22303F;outline-offset:3px}
/* ---- Logo: concept 4a "The Diplomate" (double-ring seal + serif wordmark) ---- */
.ring{position:relative;flex:none;border-radius:50%;border:2px solid #22303F;background:#EFF3F5;display:flex;align-items:center;justify-content:center}
.mono{font-family:'Newsreader',Georgia,serif;font-weight:500;color:#22303F;letter-spacing:.02em;line-height:1}
.md{font-family:ui-monospace,Menlo,monospace;font-weight:600;letter-spacing:.24em;color:#8A5A24;padding-left:.24em;margin-top:1.5px;line-height:1}
.rule{display:block;height:1px;background:#8A5A24;opacity:.55}
.tag{font-family:ui-monospace,Menlo,monospace;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#8A5A24;line-height:1}
/* ---- Signature wordmark (finalized brand mark) ---- */
.site-logo{display:flex;align-items:center;gap:14px;text-decoration:none}
.site-logo img{display:block}
.logo-desc{display:flex;flex-direction:column;gap:2px;padding-left:14px;border-left:1px solid rgba(34,48,63,.22)}
.logo-desc .tag{font-size:9px;line-height:1.35}
/* descriptor is a desktop enhancement — only show it once the horizontal nav
   has room (≥1150px); below that it forces the nav links + CTA to wrap */
@media (max-width:1149px){.logo-desc{display:none}}
/* ---- FAQ accordion ----
   aria-expanded on the button is the single source of truth: the +/– glyph is
   drawn from it in CSS, so the control and its label can't drift apart. */
.faqrow{border-top:1px solid rgba(34,48,63,.16)}
.faq-h{margin:0}
.faq-btn{display:flex;width:100%;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;background:none;border:0;text-align:left;font:inherit;color:inherit;cursor:pointer}
.faq-btn[aria-expanded="true"]{padding-bottom:12px}
.faq-q{font-family:'Newsreader',Georgia,serif;font-size:19px;font-weight:600;line-height:1.35;color:#232A30}
.faq-sign{flex:none;width:22px;font:400 22px/1 'Hanken Grotesk',system-ui,sans-serif;color:#22303F;text-align:center}
.faq-sign::before{content:"+"}
.faq-btn[aria-expanded="true"] .faq-sign::before{content:"–"}
.faq-a{font-size:14.5px;line-height:1.6;color:#5A626A;margin:0 0 20px;max-width:70ch}

/* ---- Home trust bar ----
   Grid, not a flex row, because the rules between credentials are cell borders
   here. As standalone elements they were flex children and wrapped like
   content: at 640px and below one was left dangling at the end of a line with
   nothing after it, and the two rows didn't share column positions. A border can only
   exist between two cells, so neither can happen.
   The column count is written out twice on purpose — nth-child can't take a
   variable — so if a credential is added or restored, change the
   grid-template-columns count AND the matching :nth-child(Nn+1). */
.trustbar{display:grid;grid-template-columns:repeat(4,1fr);margin-top:46px;padding:24px 7vw;background:#E4EAEE;border-top:1px solid rgba(34,48,63,.12);border-bottom:1px solid rgba(34,48,63,.12)}
.trustbar>div{display:flex;flex-direction:column;gap:3px;padding-left:26px;border-left:1px solid rgba(34,48,63,.18)}
.trustbar>div:nth-child(4n+1){padding-left:0;border-left:0}
.trustbar .t-k{font-weight:700;font-size:15px;color:#22303F}
.trustbar .t-v{font-size:11.5px;color:#5A626A}
/* 700px is where four credentials stop fitting on one line, not a shared
   breakpoint: below it they become a 2x2 lattice, which reads as deliberate
   rather than as a row that ran out of room. */
@media (max-width:700px){
  .trustbar{grid-template-columns:1fr 1fr;padding-top:6px;padding-bottom:6px}
  .trustbar>div{padding:16px 0 16px 20px}
  .trustbar>div:nth-child(2n+1){padding-left:0;border-left:0}
  .trustbar>div:nth-child(n+3){border-top:1px solid rgba(34,48,63,.18)}
}

/* ---- Contact method cards ----
   The action is the headline and the number is the supporting line, not the
   other way round. Call and text share one number, so setting the number loud
   on both made the two cards read as the same card twice — the only thing that
   distinguished them was the 10px eyebrow, the quietest element on each. What
   differs between two choices should be what reads first. This also holds when
   the email card is restored between them. */
.cmethod{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;background:#fff;border:1px solid rgba(34,48,63,.14);border-radius:11px;text-decoration:none}
.cmethod-k{display:block;font-weight:700;font-size:16px;color:#22303F}
.cmethod-v{display:block;font-size:13.5px;color:#5A626A;margin-top:3px}
.cmethod-go{flex:none;color:#22303F;font-weight:700}

/* ---- Responsive: mobile-first collapse ---- */
@media (max-width:860px){
  [style*="grid-template-columns"]{grid-template-columns:1fr !important}
  .nav{gap:12px !important}
  .navmid,.nav-contact{display:none !important}
  .nav-mobile{display:flex}
  h1{font-size:31px !important}
  h2{font-size:25px !important}
  .hero-media{order:-1}
}
@media (max-width:520px){
  .btn-solid,.btn-ghost{width:100%;text-align:center;justify-content:center}
  .cta-actions{width:100%}
}

/* ---- Consultation form: submit states ---- */
/* Honeypot. Off-screen rather than display:none, since some bots skip hidden
   fields but will happily fill a positioned one. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* The live region stays rendered at all times and collapses to nothing when
   empty, rather than being display:none between messages. `hidden` removes it
   from the accessibility tree, so unhiding and populating in the same tick
   reads to a screen reader exactly like inserting an already-populated region —
   the thing the insert-then-populate order exists to avoid. */
.form-status{margin:4px 0 0;padding:12px 14px;border-radius:8px;font-size:14px;line-height:1.5}
.form-status:empty{margin:0;padding:0;border:0}
.form-status.is-busy{background:#E4EAEE;color:#313840}
.form-status.is-error{background:#FBEFE8;color:#7A3910;border:1px solid rgba(122,57,16,.22)}
/* :focus as well as :focus-visible — focus arrives here programmatically after
   a failure, and Chrome doesn't match :focus-visible for that, so the ring
   would never paint. Matches .vid-status, which is the same pattern. */
.form-status:focus,.form-status:focus-visible{outline:2px solid #22303F;outline-offset:2px}
.form-done{padding:22px;border-radius:11px;background:#fff;border:1px solid rgba(34,48,63,.13)}
.form-done:focus{outline:none}
.form-done:focus-visible{outline:2px solid #22303F;outline-offset:3px}
.form-done p{font-size:14.5px;line-height:1.6;color:#5A626A;margin:0}
.form-done .form-done-h{font:600 18px/1.3 'Newsreader',Georgia,serif;color:#232A30;margin:0 0 8px}