/* =============================================================================
   DR. KAUSTUBH SAWANT — ARTHROSCOPY & ORTHOPAEDIC SURGEON
   Design system + editorial layout
   -----------------------------------------------------------------------------
   Art direction: "The Clinical Archive".
   Bone paper, graphite anatomical plates, deep-teal ink, hairline rules, and
   restrained documentary photography. Nothing decorative survives that does not
   carry information.

   Palette is closed. Five colours, no others, no gradients.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Brand — the only five hues on this site */
  --bone:  #F4F1EA;
  --teal:  #0F4C5C;
  --sea:   #5B8C85;
  --ink:   #1C1C1A;
  --clay:  #D97D54;

  /* Tints derived strictly from the five above.
     THE NUMBER IN EACH NAME IS HISTORICAL, NOT THE OPACITY. The ramp was
     re-spaced upward so every step clears WCAG AA (4.5:1) on all three paper
     tones; at the old values --ink-40 measured 2.44:1, which fails the reader
     the brand book is built for (03-COLORS, p14). Names kept so the ~60 call
     sites did not have to move. Ratios on bone: .65 = 5.05, .78 = 7.76,
     .88 = 10.80, solid ink = 15.13. */
  --bone-2:      #EDE9DF;   /* recessed paper */
  --bone-3:      #E4DFD2;   /* pressed paper  */
  --ink-70:      rgba(28, 28, 26, .88);
  --ink-55:      rgba(28, 28, 26, .78);
  --ink-40:      rgba(28, 28, 26, .65);
  --rule:        rgba(28, 28, 26, .13);
  --rule-2:      rgba(28, 28, 26, .26);
  --teal-12:     rgba(15, 76, 92, .12);
  --teal-30:     rgba(15, 76, 92, .30);
  --on-teal:     rgba(244, 241, 234, .85);
  --on-teal-45:  rgba(244, 241, 234, .68);
  --rule-teal:   rgba(244, 241, 234, .18);

  /* Type */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:    "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --t-name:      clamp(3.25rem, 13vw, 11rem);
  --t-display:   clamp(2.1rem, 4.7vw, 4.35rem);
  --t-statement: clamp(1.75rem, 3.5vw, 3.15rem);
  --t-sub:       clamp(1.35rem, 2.1vw, 1.9rem);
  --t-lead:      clamp(1.0625rem, 1.15vw, 1.3125rem);
  --t-body:      1.0625rem;
  --t-small:     0.9375rem;
  --t-meta:      0.6875rem;

  /* Rhythm */
  --gut:      clamp(1.25rem, 5vw, 5.5rem);
  --max:      1560px;
  --sec-y:    clamp(5.5rem, 11vw, 11.5rem);
  --hdr-h:    76px;

  /* Motion */
  --ease:     cubic-bezier(.16, .84, .30, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* -----------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + 24px);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: .002em;
  /* Smoothed rendering. Without it macOS falls back to subpixel
     antialiasing, which fringes the edges and reads as a cheap drop shadow.
     The weight bump from 350 to 400 above is what carries the legibility
     fix; this only controls how the glyphs are rasterised. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 1px;
}

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

/* -----------------------------------------------------------------------------
   3. TYPOGRAPHY PRIMITIVES
   -------------------------------------------------------------------------- */
.display    { font-family: var(--display); font-weight: 400; line-height: 1.03; letter-spacing: -.018em; }
.display-md { font-family: var(--display); font-weight: 400; line-height: 1.1;  letter-spacing: -.012em; }

.t-name      { font-size: var(--t-name);      line-height: .86; letter-spacing: -.035em; }
/* Section headings carry the page. At 400 the Cormorant hairlines thinned
   out at display size, particularly on a screen that is not high-DPI. */
.t-display   { font-size: var(--t-display); font-weight: 600; }
.t-statement { font-size: var(--t-statement); line-height: 1.12; }
.t-sub       { font-size: var(--t-sub);       line-height: 1.2; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.62;
  font-weight: 400;
  color: var(--ink-70);
  max-width: 46ch;
}

.body-copy { color: var(--ink-70); max-width: 62ch; }
.body-copy + .body-copy { margin-top: 1.15em; }

/* Small tracked clinical metadata — used for every label on the site */
.meta {
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1.2;
  font-feature-settings: "tnum" 1;
}
.meta-soft { color: var(--ink-40); }
.meta-teal { color: var(--teal); }

/* Editorial index numerals — the spine of the layout */
.numeral {
  font-family: var(--display);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--ink-40);
}

.italic-note { font-family: var(--display); font-style: italic; font-weight: 400; }

/* Unverified config values, flagged only when dev hints are on */
.is-placeholder { font-style: italic; }
body.ph-hints .is-placeholder {
  box-shadow: inset 0 -1px 0 var(--clay);
  color: var(--clay);
  font-style: normal;
}

.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;
}
.skip-link {
  position: absolute; left: var(--gut); top: -100px; z-index: 200;
  background: var(--teal); color: var(--bone); padding: .75rem 1.25rem;
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

/* -----------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec-y); position: relative; }

.rule    { height: 1px; background: var(--rule); border: 0; }
.rule-2  { height: 1px; background: var(--rule-2); border: 0; }

/* Section header: index numeral · label · hairline */
.sec-head { display: flex; align-items: baseline; gap: 1.25rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec-head__n     { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; color: var(--teal); font-variant-numeric: tabular-nums; }
.sec-head__label { flex: 0 0 auto; }
.sec-head__line  { flex: 1 1 auto; height: 1px; background: var(--rule); transform-origin: left; }

/* Vertical edge label — appears on the left margin at large sizes */
.edge-label {
  position: absolute; left: calc(var(--gut) * .34); top: calc(var(--hdr-h) + 2.5rem);
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: none; color: var(--ink-40);
}
@media (min-width: 1180px) { .edge-label { display: block; } }

/* -----------------------------------------------------------------------------
   5. IMAGE TREATMENT
   -------------------------------------------------------------------------- */
.obj-cover   { width: 100%; height: 100%; object-fit: cover; }
.obj-contain { width: 100%; height: 100%; object-fit: contain; }

.frame { position: relative; overflow: hidden; background: var(--bone-3); }
.frame > picture,
.frame > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Documentary photography carries colour that was never chosen for this brand —
   a blue towel, a neon shoe, a green band. Pulling every photograph the same
   distance off full saturation keeps the palette closed without turning the
   page monochrome, and reads as a deliberate house treatment rather than a
   filter. Saturation returns on hover, where the image is the subject. */
.frame--photo img {
  filter: saturate(.68) contrast(1.05);
  transition: filter 1.1s var(--ease), transform 1.6s var(--ease);
}
.frame--photo:hover img { filter: saturate(.92) contrast(1.02); }

/* Anatomical plates sit on their own paper — never cropped, never filtered. */
.frame--plate { background: transparent; }
.frame--plate img { mix-blend-mode: multiply; }

.caption {
  margin-top: .875rem;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--ink-40);
  max-width: 34ch;
  padding-left: .875rem;
  border-left: 1px solid var(--rule-2);
}

/* -----------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  --btn-fg: var(--bone);
  --btn-bg: var(--teal);
  position: relative;
  display: inline-flex; align-items: center; gap: .75rem;
  min-height: 52px;
  padding: .9rem 1.5rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  overflow: hidden;
  transition: color .45s var(--ease), background-color .45s var(--ease), border-color .45s var(--ease);
}
.btn .ic { transition: transform .45s var(--ease-out); flex: 0 0 auto; }
.btn:hover .ic { transform: translateX(4px); }

/* The single sanctioned use of Clay in the interface: the primary commitment. */
.btn--primary:hover { background: var(--clay); border-color: var(--clay); color: var(--ink); }

.btn--ghost {
  --btn-fg: var(--ink);
  --btn-bg: transparent;
  border-color: var(--rule-2);
}
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); }

.btn--on-teal {
  --btn-fg: var(--teal);
  --btn-bg: var(--bone);
  border-color: var(--bone);
}
.btn--on-teal:hover { background: var(--clay); border-color: var(--clay); color: var(--ink); }

.btn--outline-teal {
  --btn-fg: var(--bone);
  --btn-bg: transparent;
  border-color: var(--rule-teal);
}
.btn--outline-teal:hover { border-color: var(--bone); }

/* Text link with an underline that draws itself */
.link-u {
  display: inline-flex; align-items: center; gap: .5rem;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .5s var(--ease);
}
.link-u:hover { background-size: 100% 1px; }

/* -----------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(244, 241, 234, .90);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--rule);
}

/* --- Header sitting over the dark banner ---------------------------------
   Before the first scroll the header floats on the deep-teal slider, so it
   inverts to bone. Without JavaScript there is no scroll state to react to,
   so the header simply stays on its paper background instead. */
.no-js .hdr {
  background: rgba(244, 241, 234, .92);
  border-bottom-color: var(--rule);
}
.js .hdr:not(.is-stuck) .nav a,
.js .hdr:not(.is-stuck) .hdr__tel { color: var(--bone); }
/* Swap the lockup rather than recolouring it: the mark is artwork, not type. */
.js .hdr:not(.is-stuck) .wordmark__pic--onbone { display: none; }
.js .hdr:not(.is-stuck) .wordmark__pic--onteal { display: block; }
.js .hdr:not(.is-stuck) .nav a { background-image: linear-gradient(var(--bone), var(--bone)); }
.js .hdr:not(.is-stuck) .burger { color: var(--bone); border-color: rgba(244, 241, 234, .35); }
.js .hdr:not(.is-stuck) .hdr__cta {
  background: var(--bone); border-color: var(--bone); color: var(--teal);
}
.js .hdr:not(.is-stuck) .hdr__cta:hover {
  background: var(--clay); border-color: var(--clay); color: var(--ink);
}
.hdr__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: var(--hdr-h);
}

/* --- Lockup ---------------------------------------------------------------
   The horizontal lockup, sized by height. The brand book puts the digital
   floor at 140px of lockup width (05-LOGO p11); at the 3.66:1 aspect of the
   artwork that is 39px of height, which is what the lower clamp bound holds. */
.wordmark { display: flex; align-items: center; }
.wordmark__pic { display: block; }
.wordmark__img { display: block; width: auto; height: clamp(40px, 4.6vw, 46px); }

/* The reverse lockup is the one shown while the header floats on the banner;
   the rule that swaps them lives with the rest of the floating-header block. */
.wordmark__pic--onteal { display: none; }

.wordmark--ftr .wordmark__img { height: clamp(46px, 5.5vw, 56px); }
.ftr__surgeon {
  margin-top: .85rem; margin-bottom: 1.25rem;
  font-family: var(--display); font-size: 1.0625rem; letter-spacing: -.005em;
}

.nav { display: none; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
@media (min-width: 1080px) { .nav { display: flex; } }
.nav a {
  font-size: .75rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-70);
  padding-bottom: 3px;
  background-image: linear-gradient(var(--teal), var(--teal));
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: color .35s, background-size .45s var(--ease);
}
.nav a:hover, .nav a.is-current { color: var(--teal); background-size: 100% 1px; }

.hdr__right { display: flex; align-items: center; gap: clamp(1rem, 1.8vw, 1.5rem); }
.hdr__cta { display: none; }
@media (min-width: 1080px) { .hdr__cta { display: inline-flex; min-height: 44px; padding: .625rem 1.125rem; } }
.hdr__tel { display: none; }
@media (min-width: 1280px) { .hdr__tel { display: inline-flex; gap: .5rem; align-items: center; } }

.burger {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; margin-right: -10px;
  border: 1px solid var(--rule-2); color: var(--ink);
}
@media (min-width: 1080px) { .burger { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 110;
  background: var(--bone);
  display: flex; flex-direction: column;
  padding: 0 var(--gut) calc(env(safe-area-inset-bottom) + 2rem);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .62s var(--ease), visibility .62s;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--hdr-h); }
.drawer__nav { margin-top: clamp(1.5rem, 6vh, 3.5rem); border-top: 1px solid var(--rule); }
.drawer__nav a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: 1.85rem; font-weight: 400; letter-spacing: -.015em;
}
.drawer__nav a span.numeral { font-size: .75rem; letter-spacing: .1em; }
.drawer__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .875rem; }
body.is-locked { overflow: hidden; }

/* -----------------------------------------------------------------------------
   8. HERO BANNER SLIDER
   -----------------------------------------------------------------------------
   Full-bleed, but not a template carousel. Three photographs of very different
   character are unified by one deep-teal scrim, so the banner reads as a single
   brand statement rather than three stock pictures taking turns.

   Every slide is in the DOM and in the source order a crawler reads. Inactive
   slides are hidden with visibility, never removed.
   -------------------------------------------------------------------------- */
.hb {
  position: relative;
  background: var(--teal);
  overflow: clip;
}

/* The slides are stacked in a single grid cell rather than absolutely
   positioned. That matters: absolute slides cannot push the stage taller, so on
   a short viewport the copy overflowed upward — straight under the header. As
   grid items they size the row, `min-height` becomes a floor rather than a
   ceiling, and the banner can never collide with the header again. */
.hb__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: min(82svh, 900px);
}
@media (min-width: 1024px) { .hb__stage { min-height: min(92svh, 940px); } }

/* Opacity only — deliberately NOT visibility:hidden. A browser does not
   rasterize images inside a hidden layer, so the first advance painted an empty
   frame while the incoming photograph decoded. Links on inactive slides are
   taken out of the tab order in JS and every inactive slide carries
   aria-hidden, so nothing is reachable that should not be. */
.hb__slide {
  grid-area: 1 / 1;
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 1.1s var(--ease);
}
.hb__slide.is-active { opacity: 1; pointer-events: auto; }

.hb__media { position: absolute; inset: 0; overflow: hidden; }
/* The <picture> must be stretched too, or the image's height:100% resolves
   against an auto-height parent and falls back to its own aspect ratio. */
.hb__media picture { position: absolute; inset: 0; display: block; }
.hb__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.62) contrast(1.06);
  transform: scale(1.06);
  transition: transform 9s linear;
}
/* A very slow drift, restarted per slide. Never a zoom you can watch happen. */
.hb__slide.is-active .hb__media img { transform: scale(1); }

/* The scrim is what makes three unrelated photographs one banner. */
.hb__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(95deg,
      rgba(15, 76, 92, .95) 0%,
      rgba(15, 76, 92, .84) 30%,
      rgba(15, 76, 92, .46) 58%,
      rgba(15, 76, 92, .22) 100%),
    linear-gradient(to top, rgba(28, 28, 26, .55) 0%, rgba(28, 28, 26, 0) 45%);
}
/* On a narrow screen the copy stacks, so the scrim has to be far denser at the
   foot — but it is graded so the photograph still reads clearly across the top
   third rather than disappearing behind a flat teal panel. */
@media (max-width: 767px) {
  .hb__scrim {
    background: linear-gradient(to top,
      rgba(15, 76, 92, .97) 26%,
      rgba(15, 76, 92, .84) 48%,
      rgba(15, 76, 92, .38) 76%,
      rgba(15, 76, 92, .12) 100%);
  }
}

.hb__inner {
  position: relative; z-index: 2;
  width: 100%;
  padding-top: calc(var(--hdr-h) + 3rem);
  padding-bottom: clamp(7rem, 14vh, 10rem);
  color: var(--bone);
}

.hb__kicker { display: flex; align-items: center; gap: 1rem; color: var(--on-teal); margin-bottom: clamp(1rem, 2.5vh, 1.75rem); }
/* The trailing rule only appears where it has room to sit on one line. */
.hb__kicker::after { content: ""; flex: 0 1 140px; height: 1px; background: var(--rule-teal); display: none; }
@media (min-width: 700px) { .hb__kicker::after { display: block; } }

/* Sized against viewport height as well as width. A long name set at 8vw looks
   magnificent on a 27" display and swallows a 13" laptop whole. */
.hb__title {
  font-family: var(--display); font-weight: 400;
  line-height: .98; letter-spacing: -.028em;
  font-size: clamp(2.75rem, min(7.6vw, 10.5vh), 7rem);
  max-width: 15ch;
  text-wrap: balance;
}
.hb__title--name { max-width: 9ch; letter-spacing: -.035em; }

/* Short viewports — laptops, and any window that is wide but not tall.
   Tighten the vertical rhythm so the banner still resolves in one screen. */
@media (min-width: 1024px) and (max-height: 900px) {
  .hb__inner { padding-top: calc(var(--hdr-h) + 1.75rem); padding-bottom: 6.75rem; }
  .hb__kicker { margin-bottom: .875rem; }
  .hb__lead   { margin-top: 1.1rem; padding-top: 1.1rem; }
  .hb__actions{ margin-top: 1.35rem; }
}

.hb__lead {
  color: var(--on-teal);
  max-width: 48ch;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  padding-top: clamp(1.25rem, 2.5vh, 1.75rem);
  border-top: 1px solid var(--rule-teal);
}

.hb__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: clamp(1.5rem, 3.5vh, 2.25rem); }
/* Below the width where both buttons fit side by side, stack them to equal
   width rather than leaving two ragged pills. */
@media (max-width: 599px) {
  .hb__actions { flex-direction: column; align-items: stretch; }
  .hb__actions .btn { justify-content: space-between; }
}

/* Per-slide caption, sitting quietly at the right of the control rail */
.hb__caption {
  display: none;
  font-size: .75rem; line-height: 1.5; color: var(--on-teal-45);
  max-width: 30ch; text-align: right;
}
@media (min-width: 1024px) { .hb__caption { display: block; } }

/* --- Control rail -------------------------------------------------------- */
.hb__ui {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
}
.hb__ui-in {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-teal);
}

.hb__count { color: var(--bone); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.hb__count .sep,
.hb__count .total { color: var(--on-teal-45); }

/* Progress: one hairline segment per slide; the live one fills over the interval */
.hb__prog { display: flex; gap: .625rem; flex: 1 1 auto; max-width: 340px; }
.hb__prog button {
  position: relative; flex: 1 1 0; height: 2px;
  background: rgba(244, 241, 234, .26);
  transition: background-color .4s;
}
.hb__prog button:hover { background: rgba(244, 241, 234, .5); }
.hb__prog button::after { content: ""; position: absolute; inset: -14px 0; }
.hb__prog button i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: var(--bone); display: block;
}
.hb__prog button[aria-selected="true"] i { width: 100%; }
.js .hb__prog button[aria-selected="true"] i { animation: fill var(--hb-int, 7000ms) linear forwards; }
@keyframes fill { from { width: 0 } to { width: 100% } }

.hb__arrows { display: flex; gap: .5rem; flex: 0 0 auto; margin-left: auto; }
.hb__arrows button {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border: 1px solid var(--rule-teal); color: var(--bone);
  transition: background-color .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.hb__arrows button:hover { background: var(--bone); color: var(--teal); border-color: var(--bone); }
.hb__arrows .rot { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .hb__media img { transform: none; }
  .hb__prog button[aria-selected="true"] i { animation: none; width: 100%; }
}

/* Clinical rail beneath the banner, back on bone paper */
.hero__rail { border-top: 1px solid var(--rule); }
.hero__rail-wrap { padding-block: clamp(1rem, 3vh, 2rem); }
.hero__rail dl { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .hero__rail dl { grid-template-columns: repeat(3, 1fr); } }
.hero__rail .cell { padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) {
  .hero__rail .cell { border-bottom: 0; padding-inline: clamp(1rem, 2.5vw, 2.25rem); }
  .hero__rail .cell:first-child { padding-left: 0; }
  .hero__rail .cell + .cell { border-left: 1px solid var(--rule); }
}
.hero__rail dt { color: var(--ink-40); margin-bottom: .4rem; }
.hero__rail dd { font-size: .9375rem; color: var(--ink); }

/* -----------------------------------------------------------------------------
   9. MARQUEE BAND
   -------------------------------------------------------------------------- */
.band {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bone-2);
  overflow: hidden;
  padding-block: 1.05rem;
}
.band__track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.band:hover .band__track { animation-play-state: paused; }
.band__group { display: flex; align-items: center; flex: 0 0 auto; }
.band__group span { display: inline-flex; align-items: center; color: var(--teal); }
.band__group span::after {
  content: ""; width: 4px; height: 4px; margin-inline: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--clay); border-radius: 50%; flex: 0 0 auto;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------------
   10. INTRODUCTION
   -------------------------------------------------------------------------- */
.intro { position: relative; overflow: clip; }
.intro__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; position: relative; z-index: 1; }
@media (min-width: 900px) { .intro__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); } }

/* The anatomical plate, ghosted into the paper behind the statement.
   Cream on cream — the signature move of the whole design. */
.intro__plate {
  position: absolute; z-index: 0; pointer-events: none;
  display: none;
  width: min(34vw, 460px);
  right: -3%; top: 4%;
  opacity: .2; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 50%, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse 62% 56% at 50% 50%, #000 40%, transparent 80%);
}
@media (min-width: 1180px) { .intro__plate { display: block; } }

.intro__portrait { position: relative; }
.intro__portrait .frame { aspect-ratio: 4 / 5; }
/* thin clay register mark at the top-left of the portrait */
.intro__portrait::before {
  content: ""; position: absolute; left: -10px; top: -10px;
  width: 46px; height: 46px;
  border-left: 1px solid var(--clay); border-top: 1px solid var(--clay);
}

.intro__statement { margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); max-width: 25ch; text-wrap: balance; }
.intro__sign { margin-top: clamp(2.25rem, 4vw, 3.25rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.intro__sign .name { font-family: var(--display); font-size: 1.65rem; font-weight: 400; font-style: italic; letter-spacing: -.01em; }

.creds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.creds li {
  padding: .4rem .75rem;
  border: 1px solid var(--rule-2);
  font-size: .6875rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-70);
}
.creds--empty li { border-style: dashed; color: var(--ink-40); }

/* ---------------------------------------------------------------------------
   11. EXPERTISE — editorial list with a floating reveal
   ---------------------------------------------------------------------------
   Rows carry all their content in the flow, so nothing is hidden from a reader,
   a crawler or a screen reader. The photograph is the reward for engaging with
   a row: on pointer devices it floats into the empty right margin. On touch and
   narrow viewports it simply sits in the flow beneath the text.
   -------------------------------------------------------------------------- */
.exp__intro { max-width: 46ch; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

.exp__list { border-top: 1px solid var(--rule-2); }
.exp__row  { position: relative; border-bottom: 1px solid var(--rule); }

.exp__head {
  display: grid; gap: .35rem 2rem;
  grid-template-columns: 1fr;
  align-items: start;
  padding: clamp(1.5rem, 2.6vw, 2.15rem) 0;
  transition: padding-left .55s var(--ease);
}
@media (min-width: 760px)  { .exp__head { grid-template-columns: 3.5rem minmax(0, 17rem) minmax(0, 1fr) 2rem; gap: .35rem 2rem; } }
@media (min-width: 1024px) { .exp__head { padding-right: clamp(260px, 25vw, 380px); } }

.exp__n { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; color: var(--ink-40); padding-top: .55rem; transition: color .45s; }
.exp__t {
  display: block;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 2.7vw, 2.2rem); line-height: 1.1; letter-spacing: -.018em;
  transition: color .45s;
}
.exp__kicker {
  display: block;
  font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-top: .6rem; line-height: 1.5;
}
.exp__desc   { color: var(--ink-70); font-size: var(--t-small); max-width: 54ch; }
.exp__go     { color: var(--ink-40); justify-self: start; padding-top: .5rem; transition: color .45s, transform .5s var(--ease-out); }
@media (min-width: 760px) { .exp__go { justify-self: end; } }

/* The floating photograph */
.exp__media { margin-top: 1.35rem; }
.exp__media .frame { aspect-ratio: 3 / 2; }

@media (min-width: 1024px) {
  .exp__media {
    position: absolute; right: 0; top: 50%; z-index: 3;
    width: clamp(230px, 22vw, 330px);
    margin-top: 0;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-50%) translateY(14px) scale(.96);
    transition: opacity .6s var(--ease), transform .85s var(--ease);
  }
  .exp__media .frame { aspect-ratio: 4 / 5; background: var(--bone); }
  .exp__row.is-active .exp__media { opacity: 1; transform: translateY(-50%) scale(1); }

  .exp__row:hover .exp__head,
  .exp__row.is-active .exp__head { padding-left: 14px; }
  .exp__row.is-active .exp__n  { color: var(--teal); }
  .exp__row.is-active .exp__t  { color: var(--teal); }
  .exp__row.is-active .exp__go { color: var(--teal); transform: translate(4px, -4px); }

  /* Give the first and last floating frames room to breathe past the list */
  .exp__list { padding-block: clamp(1rem, 3vw, 3rem); }
}

/* ---------------------------------------------------------------------------
   12. ARTHROSCOPY BAND (deep teal)
   -------------------------------------------------------------------------- */
.deep {
  background: var(--teal);
  color: var(--bone);
  position: relative;
  overflow: clip;
}
.deep .lead, .deep .body-copy { color: var(--on-teal); }
.deep .meta-soft { color: var(--on-teal-45); }
.deep .rule { background: var(--rule-teal); }
.deep .sec-head__line { background: var(--rule-teal); }
.deep .sec-head__n { color: var(--bone); }
.deep .numeral { color: var(--on-teal-45); }
.deep .caption { color: var(--on-teal-45); border-left-color: var(--rule-teal); }

.arth__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 980px) { .arth__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }

.arth__media .frame { aspect-ratio: 4 / 3; }
@media (min-width: 980px) {
  /* The photograph breaks the left gutter — the band feels inhabited, not boxed */
  .arth__media { margin-left: calc(var(--gut) * -1); }
  .arth__media .frame { aspect-ratio: 5 / 6; }
}

.arth__steps { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule-teal); }
.arth__step {
  display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.25rem;
  padding: clamp(1.15rem, 2.2vw, 1.6rem) 0;
  border-bottom: 1px solid var(--rule-teal);
}
.arth__step .n { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; color: var(--teal); padding-top: .35rem; }
.arth__step h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; line-height: 1.15; margin-bottom: .3rem; }
.arth__step p { color: var(--on-teal); font-size: var(--t-small); max-width: 52ch; }

.arth__note {
  margin-top: 1.75rem; padding-left: 1rem;
  border-left: 1px solid var(--clay);
  color: var(--on-teal-45); font-size: .8125rem; max-width: 56ch;
}

/* ---------------------------------------------------------------------------
   13. APPROACH — the ledger
   -------------------------------------------------------------------------- */
.ledger__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 980px) { .ledger__grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); } }
@media (min-width: 980px) { .ledger__aside { position: sticky; top: calc(var(--hdr-h) + 4rem); } }

.ledger { border-top: 1px solid var(--rule-2); }
.ledger__row {
  display: grid; gap: .5rem 2rem;
  grid-template-columns: 1fr;
  padding: clamp(1.5rem, 2.8vw, 2.15rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .5s var(--ease);
}
@media (min-width: 700px) { .ledger__row { grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr); } }
.ledger__row:hover { padding-left: 12px; }
.ledger__row .n { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; color: var(--ink-40); padding-top: .45rem; }
.ledger__row:nth-child(3) .n { color: var(--teal); }
.ledger__row h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.15; letter-spacing: -.01em; }
.ledger__row p { color: var(--ink-70); font-size: var(--t-small); max-width: 58ch; }

/* ---------------------------------------------------------------------------
   14. PATIENT JOURNEY
   -------------------------------------------------------------------------- */
.journey { background: var(--bone-2); border-block: 1px solid var(--rule); }
.journey__steps { display: grid; gap: 0; counter-reset: j; }
@media (min-width: 860px) { .journey__steps { grid-template-columns: repeat(4, 1fr); } }

.jstep { position: relative; padding: clamp(1.75rem, 3vw, 2.5rem) 0; border-top: 1px solid var(--rule-2); }
@media (min-width: 860px) {
  .jstep { padding-inline: clamp(1.25rem, 2.2vw, 2rem); }
  .jstep:first-child { padding-left: 0; }
  .jstep:last-child { padding-right: 0; }
  .jstep + .jstep { border-left: 1px solid var(--rule); }
}
/* Node on the timeline */
.jstep::before {
  content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px;
  background: var(--bone-2); border: 1px solid var(--teal); border-radius: 50%;
}
@media (min-width: 860px) { .jstep + .jstep::before { left: clamp(1.25rem, 2.2vw, 2rem); transform: translateX(-50%); } }

.jstep__ic { color: var(--sea); margin-bottom: 1.15rem; }
.jstep__n  { color: var(--ink-40); margin-bottom: .5rem; }
.jstep h3  { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; margin-bottom: .55rem; }
.jstep p   { color: var(--ink-70); font-size: .9375rem; max-width: 34ch; }

/* ---------------------------------------------------------------------------
   15. JOURNAL
   -------------------------------------------------------------------------- */
.jr__list { border-top: 1px solid var(--rule-2); }
.jr__item { border-bottom: 1px solid var(--rule); }
.jr__link {
  display: grid; gap: .5rem 2rem; grid-template-columns: 1fr;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  transition: padding-left .55s var(--ease);
}
@media (min-width: 860px) { .jr__link { grid-template-columns: 3.5rem minmax(0, 1.15fr) minmax(0, 1fr) 3rem; align-items: start; } }
.jr__link:hover { padding-left: 14px; }
.jr__n { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; color: var(--ink-40); padding-top: .5rem; }
.jr__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem); line-height: 1.14; letter-spacing: -.015em;
  transition: color .4s;
}
.jr__link:hover .jr__title { color: var(--teal); }
.jr__meta { color: var(--ink-40); margin-top: .55rem; }
.jr__desc { color: var(--ink-70); font-size: var(--t-small); max-width: 46ch; }
.jr__go { color: var(--ink-40); justify-self: end; padding-top: .5rem; transition: color .4s, transform .5s var(--ease-out); }
.jr__link:hover .jr__go { color: var(--teal); transform: translate(4px, -4px); }

/* ---------------------------------------------------------------------------
   16. TESTIMONIALS
   -------------------------------------------------------------------------- */
.quotes { position: relative; text-align: center; }
/* The plate is masked to an ellipse so its own cream ground never reads as a
   rectangle sitting on the page — only the drawing survives. */
.quotes__plate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(76vw, 620px); opacity: .16; mix-blend-mode: multiply;
  pointer-events: none; z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 60% 52% at 50% 50%, #000 35%, transparent 78%);
          mask-image: radial-gradient(ellipse 60% 52% at 50% 50%, #000 35%, transparent 78%);
}
.quotes__stage { position: relative; z-index: 1; min-height: 15rem; display: grid; }
.quotes__item {
  grid-area: 1 / 1; opacity: 0; visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s, transform 1s var(--ease);
  transform: translateY(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.quotes__item.is-active { opacity: 1; visibility: visible; transform: none; }
.quotes__item blockquote {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 3.1vw, 2.6rem); line-height: 1.28; letter-spacing: -.012em;
  max-width: 22ch; margin-inline: auto;
}
@media (min-width: 700px) { .quotes__item blockquote { max-width: 24ch; } }
.quotes__attr { margin-top: 1.75rem; color: var(--ink-40); }
.quotes__dots { display: flex; justify-content: center; gap: .625rem; margin-top: clamp(2rem, 4vw, 3rem); position: relative; z-index: 1; }
.quotes__dots button {
  width: 30px; height: 1px; background: var(--rule-2);
  position: relative; transition: background-color .4s;
}
.quotes__dots button::after { content: ""; position: absolute; inset: -12px 0; }
.quotes__dots button[aria-selected="true"] { background: var(--teal); }

/* ---------------------------------------------------------------------------
   17. FAQ
   -------------------------------------------------------------------------- */
.faq__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (min-width: 980px) { .faq__grid { grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); } }
@media (min-width: 980px) { .faq__aside { position: sticky; top: calc(var(--hdr-h) + 4rem); } }

.faq__list { border-top: 1px solid var(--rule-2); }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item summary {
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 1.5rem;
  padding: clamp(1.25rem, 2.4vw, 1.75rem) 0;
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.2rem, 2.1vw, 1.65rem); line-height: 1.24; letter-spacing: -.01em;
  transition: color .35s;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--teal); }
.faq__sign { position: relative; width: 20px; height: 20px; flex: 0 0 auto; margin-top: .35rem; color: var(--ink-40); transition: color .35s; }
.faq__sign::before, .faq__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: currentColor;
  transition: transform .45s var(--ease), opacity .3s;
}
.faq__sign::before { width: 15px; height: 1px; transform: translate(-50%, -50%); }
.faq__sign::after  { width: 1px; height: 15px; transform: translate(-50%, -50%); }
.faq__item[open] .faq__sign { color: var(--teal); }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq__a { overflow: hidden; }
.faq__a p {
  color: var(--ink-70); font-size: var(--t-small); max-width: 68ch;
  padding-bottom: clamp(1.25rem, 2.4vw, 1.9rem); padding-right: 3rem;
}
.faq__item[open] .faq__a { animation: faqIn .5s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------------------
   18. APPOINTMENT
   -------------------------------------------------------------------------- */
.appt__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 980px) { .appt__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.appt__actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

.contact { border-top: 1px solid var(--rule-teal); }
.contact__row {
  display: grid; grid-template-columns: auto 1fr; gap: 1.15rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--rule-teal);
  align-items: start;
}
.contact__row .ic { color: var(--sea); margin-top: .2rem; }
.contact__row dt { color: var(--on-teal-45); margin-bottom: .3rem; }
.contact__row dd { font-size: .9375rem; line-height: 1.55; }
/* Hover must not make a link harder to read: clay on bone is 2.66:1. */
.contact__row a:hover { color: var(--teal); }

.hours { display: grid; gap: .35rem; font-size: .875rem; }
.hours div { display: flex; justify-content: space-between; gap: 1.5rem; max-width: 22rem; }
.hours .closed { color: var(--on-teal-45); }

.appt__urgent {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule-teal);
  color: var(--on-teal); font-size: .8125rem; line-height: 1.6;
  max-width: 62rem;
}
.appt__urgent strong { color: var(--bone); font-weight: 600; }

/* ---------------------------------------------------------------------------
   19. FOOTER
   -------------------------------------------------------------------------- */
.ftr { padding-top: clamp(3.5rem, 7vw, 6rem); padding-bottom: 2.5rem; }
.ftr__statement {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.24; letter-spacing: -.015em;
  max-width: 24ch;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.ftr__cols { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
@media (min-width: 720px) { .ftr__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ftr__cols { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); } }
.ftr__cols h3 { margin-bottom: 1.15rem; }
.ftr__cols li + li { margin-top: .55rem; }
.ftr__cols a { font-size: .9375rem; color: var(--ink-70); transition: color .3s; }
.ftr__cols a:hover { color: var(--teal); }
.ftr__legal { padding-top: 1.75rem; border-top: 1px solid var(--rule); display: grid; gap: 1.25rem; }
.ftr__disclaimer { font-size: .75rem; line-height: 1.65; color: var(--ink-40); max-width: 78ch; }
.ftr__base { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; }
.ftr__credit { font-size: .6875rem; color: var(--ink-40); }
.ftr__credit a { border-bottom: 1px solid var(--rule-2); }

/* ---------------------------------------------------------------------------
   20. SCROLL REVEAL
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); }
.js .reveal { transition: opacity .95s var(--ease), transform .95s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .09s; }
.reveal[data-d="2"] { transition-delay: .18s; }
.reveal[data-d="3"] { transition-delay: .27s; }
.no-js .reveal { opacity: 1; transform: none; }

/* Hairline that draws itself in when the section arrives */
.js .sec-head__line { transform: scaleX(0); transition: transform 1.1s var(--ease); }
.sec-head.is-in .sec-head__line { transform: scaleX(1); }
.no-js .sec-head__line { transform: none; }

/* ---------------------------------------------------------------------------
   21. PERFORMANCE + ACCESSIBILITY
   -------------------------------------------------------------------------- */
.cv-auto { content-visibility: auto; contain-intrinsic-size: auto 900px; }

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

@media print {
  .hdr, .drawer, .band, .quotes__dots, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}