/* ============================================================
   V2-M — Modern Surgical Excellence
   Design system + components. Token-driven, responsive, a11y.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Palette */
  --cloud-white: #FAFAF8;
  --soft-stone:  #E7E5E4;
  --warm-grey:   #A8A29E;
  --graphite:    #27272A;
  --deep-graphite:#18181B;
  /* Warm nude accent system (retuned Phase 9F.1 — unified with the photography).
     Names kept for stability; values are now warm clay/champagne, not steel-blue. */
  --steel:       #6F5C49;   /* deep warm clay/umber — primary accent (white text 6.5:1) */
  --steel-soft:  #B9A992;   /* warm champagne-taupe — light accent (on-dark labels) */
  --steel-tint:  #F3EDE4;   /* warm champagne tint — soft fills, active nav background */

  /* Semantic */
  --bg:          var(--cloud-white);
  --bg-panel:    #FFFFFF;
  --panel-surface: #FAF8F5;  /* subtle warm off-white for the Study Panel (Phase 7B.2) — connects to the warm image palette without reading beige */
  --bg-ground:   var(--deep-graphite);
  --border:      var(--soft-stone);
  --border-strong:#D6D3D1;
  --text:        var(--graphite);
  --text-muted:  #6B6864;
  --text-faint:  var(--warm-grey);
  --accent:      var(--steel);
  --accent-soft: var(--steel-soft);

  /* Type */
  --font-sans: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-700: clamp(2.6rem, 1.6rem + 4.4vw, 5rem);   /* hero display */
  --fs-600: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);  /* section title */
  --fs-500: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);   /* sub title */
  --fs-400: clamp(1.0625rem, 1rem + 0.3vw, 1.2rem);/* body large */
  --fs-300: 1rem;                                   /* body */
  --fs-200: 0.875rem;                               /* small */
  --fs-100: 0.75rem;                                /* labels */

  /* Spacing (8px base) */
  --s-1: 0.5rem;  --s-2: 1rem;   --s-3: 1.5rem; --s-4: 2rem;
  --s-5: 3rem;    --s-6: 4rem;   --s-7: 6rem;   --s-8: 9rem;
  --s-9: 12rem;   --s-10: 16rem;

  /* Layout */
  --maxw: 1200px;
  --maxw-text: 68ch;
  --radius: 14px;
  --radius-sm: 8px;
  --border-w: 1px;
  /* Clearance below the floating navbar (fixed pill: top var(--s-2) + pill height + breathing).
     Used by the Study Panel so the desktop drawer opens beneath the nav (Phase 7B.1). */
  --nav-safe-offset: 6rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  --shadow-1: 0 1px 2px rgba(24,24,27,.04), 0 8px 24px rgba(24,24,27,.05);
  --shadow-2: 0 2px 6px rgba(24,24,27,.06), 0 18px 48px rgba(24,24,27,.08);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-300);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0; color: var(--text); }
p { margin: 0 0 var(--s-2); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-soft); }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Accessibility helpers ---------- */
.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 200;
  background: var(--deep-graphite); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radius-sm); transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-2); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-3); }
.section { padding-block: var(--s-7); }
.section--tight { padding-block: var(--s-6); }
.section--ground { background: var(--bg-ground); color: #E7E5E4; }
.section--ground h1, .section--ground h2, .section--ground h3 { color: #fff; }
.measure { max-width: var(--maxw-text); }
.grid { display: grid; gap: var(--s-3); }
@media (min-width: 640px)  { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid--3 { grid-template-columns: repeat(3, 1fr); }
                             .grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 899px)  { .grid--4 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Type helpers ---------- */
.kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--fs-100); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600; margin: 0 0 var(--s-2);
}
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--accent); }
.section--ground .kicker { color: var(--steel-soft); }
.index-num { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.display { font-size: var(--fs-700); letter-spacing: -0.035em; font-weight: 600; }
.title { font-size: var(--fs-600); }
.subtitle { font-size: var(--fs-500); font-weight: 500; }
.lead { font-size: var(--fs-400); color: var(--text-muted); }
.small { font-size: var(--fs-200); color: var(--text-muted); }
.muted { color: var(--text-muted); }
/* Editorial accent emphasis — colour only, no weight/size change (Phase 9F.1, Part 2). */
.hl { color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .8rem 1.4rem; border-radius: 999px; border: var(--border-w) solid var(--border-strong);
  background: transparent; color: var(--text); font-weight: 600; font-size: var(--fs-200);
  letter-spacing: .01em; transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
  min-height: 44px;
}
.btn:hover { transform: translateY(-1px); border-color: var(--graphite); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--deep-graphite); border-color: var(--deep-graphite); color: #fff; }
.btn--ghost-light { color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost-light:hover { border-color: #fff; color: #fff; }
.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ============================================================
   NAVIGATION — floating glass bar
   ============================================================ */
.nav {
  position: fixed; inset: var(--s-2) 0 auto 0; z-index: 100;
  display: flex; justify-content: center; pointer-events: none;
}
.nav__inner {
  pointer-events: auto;
  width: min(var(--maxw), calc(100% - var(--s-3)));
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: .65rem .75rem .65rem 1.25rem;
  background: rgba(250,250,248,.72);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border: 1px solid rgba(231,229,228,.9);
  border-radius: 999px;
  box-shadow: var(--shadow-1);
}
.nav__brand { display: flex; align-items: baseline; gap: .5rem; color: var(--graphite); font-weight: 700; letter-spacing: .12em; font-size: .95rem; }
.nav__brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; }
.nav__brand-sub { font-size: var(--fs-100); letter-spacing: .2em; color: var(--text-faint); font-weight: 600; }
.nav__menu { display: flex; align-items: center; gap: .35rem; }
.nav__menu a:not(.btn) {
  color: var(--text); font-size: var(--fs-200); font-weight: 500;
  padding: .55rem .8rem; border-radius: 999px; transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__menu a:not(.btn):hover { background: var(--steel-tint); color: var(--graphite); }
.nav__menu a[aria-current="page"] { color: var(--accent); background: var(--steel-tint); }
.nav__toggle {
  display: none; align-items: center; gap: .5rem; background: transparent; border: 0;
  color: var(--graphite); font-weight: 600; font-size: var(--fs-200); padding: .5rem .6rem; min-height: 44px;
}
.nav__toggle .bars { width: 20px; height: 12px; position: relative; display: inline-block; }
.nav__toggle .bars::before, .nav__toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--graphite); transition: transform var(--dur) var(--ease); }
.nav__toggle .bars::before { top: 2px; } .nav__toggle .bars::after { bottom: 2px; }

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: absolute; top: calc(100% + .5rem); right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: rgba(250,250,248,.96); backdrop-filter: blur(16px);
    border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-2);
    box-shadow: var(--shadow-2);
    transform-origin: top; transform: scaleY(.96); opacity: 0; visibility: hidden;
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  }
  .nav__menu[data-open="true"] { opacity: 1; visibility: visible; transform: scaleY(1); }
  .nav__menu a:not(.btn) { padding: .8rem 1rem; }
  .nav__menu .btn { margin-top: .4rem; justify-content: center; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero { padding-top: calc(var(--s-8) + var(--s-3)); padding-bottom: var(--s-7); }
.hero__grid { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.05fr .95fr; gap: var(--s-6); } }
/* Phase 5B.1 — hero only: top-align columns so the portrait rises to the headline block
   (other sections that reuse .hero__grid keep their centered alignment). */
.hero .hero__grid { align-items: start; }
.hero h1 { margin-bottom: var(--s-3); }
.hero .lead { max-width: 46ch; margin-bottom: var(--s-4); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.hero__meta .stat strong { display: block; font-size: var(--fs-500); font-weight: 600; letter-spacing: -.02em; }
.hero__meta .stat span { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }

/* CSS-only visual placeholder panel */
.visual-panel {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius);
  border: 1px solid var(--border); overflow: hidden;
  background:
    linear-gradient(135deg, #FFFFFF 0%, var(--cloud-white) 40%, var(--soft-stone) 100%);
  box-shadow: var(--shadow-1);
}
.visual-panel::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(111,92,73,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(111,92,73,.06) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(120% 100% at 70% 20%, #000 30%, transparent 75%);
}
.visual-panel::after {
  content: attr(data-label); position: absolute; left: 1rem; bottom: 1rem;
  font-size: var(--fs-100); letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
  background: rgba(255,255,255,.7); padding: .35rem .6rem; border-radius: 6px; border: 1px solid var(--border);
}
.visual-panel--wide { aspect-ratio: 16 / 9; }
.visual-panel--square { aspect-ratio: 1 / 1; }
.visual-panel__mark {
  position: absolute; top: 1rem; right: 1rem; width: 38px; height: 38px;
  border: 1px solid var(--accent); border-radius: 50%;
  display: grid; place-items: center; color: var(--accent); font-size: 1.1rem;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.section-head .title { max-width: 18ch; }
.section-head p { max-width: 42ch; margin: 0; color: var(--text-muted); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-4); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  height: 100%; display: flex; flex-direction: column; gap: var(--s-2);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--border-strong); }
.card__num { font-size: var(--fs-100); letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.card h3 { font-size: var(--fs-500); }
.card p { color: var(--text-muted); margin: 0; }
.card__link { margin-top: auto; font-weight: 600; font-size: var(--fs-200); display: inline-flex; gap: .4rem; align-items: center; }
.card__link .btn__arrow { transition: transform var(--dur) var(--ease); }
.card:hover .card__link .btn__arrow { transform: translateX(3px); }

/* Procedure group card with image frame */
.proc-card .visual-panel { aspect-ratio: 16/10; margin-bottom: var(--s-2); }
/* Procedure photography — ONE unified series treatment (Phase 6.4: original compositions).
   The card now FITS THE IMAGE, not the image the card. The six source studies are native
   landscape (five 3:2, Cosmetology 5:4), so the frame is a calm 3:2 plate and the image is
   shown with object-fit:contain — the full composition (subject, whitespace, measurement
   lines and overlays) is preserved with NO crop. The five 3:2 studies fill the plate edge
   to edge; the 5:4 Cosmetology sits as an editorial plate with a thin neutral letterbox.
   Dots are placed by JS from the rendered contain geometry, so they lock to their
   measurement-line endpoints at any frame size. */
.proc-card__media {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-3);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--soft-stone);
}
/* Phase 6.6: the annotation-text legibility lift is now BAKED into the *-enhanced.png files
   (unsharp/local-contrast + highlight lift — see the phase report), which CSS filters cannot
   do. So no runtime filter is applied here; the served images already read clearly while
   keeping natural skin tones and photographic softness. */
.proc-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; position: relative; z-index: 1; }
/* Cosmetology is 5:4 inside the 3:2 plate, so object-fit:contain leaves side gaps. Fill them
   with a heavily blurred, tone-matched enlargement of the SAME image so the whole plate reads
   as one continuous background (no dark side bars, no hard seam, no duplicate face edge). The
   large scale pushes the backdrop's face out of the gap zones; brightness is matched (not
   darkened) so the blurred wall continues the sharp foreground's wall. Foreground stays
   composition-complete (no stretch, no crop). */
.proc-card__media[data-annot="cosmo"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("../img/Cosmetology-enhanced.png") center / cover no-repeat;
  filter: blur(36px) brightness(0.97) saturate(0.94);
  transform: scale(1.55);
}
/* Procedures gallery: 2-up on desktop (capped + centered) so the restored landscape
   compositions read as generous editorial plates rather than zoomed thumbnails. Tablet
   keeps 2-up (grid--2 from 640px); mobile stacks to 1-up. */
@media (min-width: 900px) {
  .proc-grid { max-width: 1080px; margin-inline: auto; }
}

/* Interactive architectural annotations (Phase 6.1) — measured reference points, not map pins */
.annot-layer { position: absolute; inset: 0; z-index: 2; }
.annot { position: absolute; transform: translate(-50%, -50%); }
/* A small filled reference point — a measured endpoint, not a map pin (Phase 6.2).
   Visible dot is 7px; the tappable/focusable area is a 44px invisible ::before. */
.annot-dot {
  position: relative; display: block; width: 7px; height: 7px; margin: 0; padding: 0;
  border-radius: 50%; cursor: pointer;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 0 0 1px rgba(24,24,27,.30), 0 1px 2px rgba(24,24,27,.35);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.annot-dot::before { content: ""; position: absolute; inset: -18px; border-radius: 50%; } /* ~44px hit area */
.annot-dot:hover { transform: scale(1.45); }
.annot-dot[aria-expanded="true"] { transform: scale(1.45); box-shadow: 0 0 0 1px rgba(24,24,27,.45), 0 0 0 4px rgba(255,255,255,.45); }
.annot-dot:focus-visible { outline: none; box-shadow: 0 0 0 1px rgba(24,24,27,.45), 0 0 0 4px rgba(255,255,255,.55); }
/* Architectural annotation tooltip (Phase 6.3) — small, positioned by JS beside the active
   dot and clamped inside the image. Replaces the bottom caption panel so the photography
   stays uncovered. Note: visibility is NOT transitioned (only opacity/transform). */
.annot-caption {
  position: absolute; left: 0; top: 0; z-index: 5;
  max-width: min(200px, calc(100% - 16px)); width: max-content;
  background: rgba(250,250,248,.97); color: var(--text);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--border-strong); border-radius: 8px; padding: .45rem .6rem;
  box-shadow: 0 6px 18px -8px rgba(24,24,27,.35);
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.annot-caption strong { display: block; font-size: var(--fs-200); margin-bottom: .12rem; letter-spacing: .01em; line-height: 1.2; }
.annot-caption span { display: block; font-size: var(--fs-100); line-height: 1.4; color: var(--text-muted); letter-spacing: .015em; text-transform: none; }
.proc-card__media.annot-on .annot-caption { opacity: 1; visibility: visible; transform: none; }
.proc-card ul.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.proc-card .tags li { font-size: var(--fs-100); border: 1px solid var(--border-strong); border-radius: 999px; padding: .25rem .6rem; color: var(--text-muted); }

/* ============================================================
   PHASE 7B PROTOTYPE — Rhinoplasty Study Panel
   Tag triggers + right-drawer (desktop) / bottom-sheet (mobile).
   Light, architectural, calm. Only the Rhinoplasty card uses these.
   ============================================================ */
/* Study-trigger tags: keep the chip look, add an interactive affordance. */
.tags--study { padding: 0; margin: 0; list-style: none; }
/* Neutralise the default chip styling on the <li> wrappers (the .tag-study button
   carries the chip look itself), overriding `.proc-card .tags li` by specificity. */
.proc-card .tags--study li { list-style: none; border: 0; padding: 0; background: none; }
.tag-study {
  font-family: var(--font-sans); font-size: var(--fs-100); line-height: 1.2;
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: .25rem .6rem; color: var(--text-muted); background: transparent;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.tag-study::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; transition: opacity var(--dur) var(--ease); }
.tag-study:hover { color: var(--text); border-color: var(--accent); }
.tag-study:hover::after { opacity: .8; }
.tag-study:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tag-study[aria-expanded="true"] { color: #fff; background: var(--accent); border-color: var(--accent); }
.tag-study[aria-expanded="true"]::after { opacity: .9; }

/* Scrim */
.study-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(24, 24, 27, .26);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.study-scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease), visibility 0s; }

/* Panel — desktop right drawer.
   Phase 7B.1: opens BELOW the fixed navbar (top: --nav-safe-offset) so the floating nav pill
   never covers the title/close button, and sits ABOVE the nav in the stack (z-index) so it is
   never behind the menu. Height is the viewport minus that offset; scroll stays inside. */
.study-panel {
  position: fixed; z-index: 110; top: var(--nav-safe-offset); right: 0;
  height: calc(100dvh - var(--nav-safe-offset)); width: clamp(420px, 42vw, 520px);
  display: flex; flex-direction: column;
  background: var(--panel-surface); color: var(--text);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
  border-top-left-radius: var(--radius);
  box-shadow: var(--shadow-2);
  transform: translateX(100%); visibility: hidden;
  transition: transform 320ms var(--ease), visibility 0s linear 320ms;
  overscroll-behavior: contain;
}
.study-panel.is-open { transform: translateX(0); visibility: visible; transition: transform 320ms var(--ease), visibility 0s; }

/* Phase 7B.2: header compressed ~20-25% (less vertical delay before the content),
   warm surface, and a single architectural eyebrow "RHINOPLASTY · RH 01". */
.study-panel__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--panel-surface); border-bottom: 1px solid var(--border);
}
.study-panel__kicker { display: inline; font-size: var(--fs-100); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.study-panel__id { display: inline; margin-left: .4rem; font-size: var(--fs-100); letter-spacing: .14em; color: var(--text-faint); }
.study-panel__id::before { content: "·"; margin-right: .4rem; color: var(--text-faint); }
.study-panel__title { font-size: var(--fs-500); line-height: 1.12; margin-top: .2rem; color: var(--text); }
.study-panel__close {
  flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1; color: var(--text-muted);
  background: transparent; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.study-panel__close:hover { color: var(--text); border-color: var(--accent); }
.study-panel__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.study-panel__body { padding: var(--s-3) var(--s-4) var(--s-5); overflow-y: auto; }
/* Phase 7B.2: the intro reads as a concise surgical-study abstract — a touch larger,
   more open leading, and clearly separated from the numbered sections below. */
.study-panel__summary { font-size: var(--fs-400); line-height: 1.64; color: var(--text); margin: 0 0 var(--s-3); max-width: 46ch; }

/* Reference-numbered sections — reads as a surgical study, not a blog */
.study-section { display: grid; grid-template-columns: 2rem 1fr; gap: var(--s-2); padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.study-section__num { font-size: var(--fs-100); letter-spacing: .1em; color: var(--text-faint); padding-top: .2rem; }
.study-section__h { font-size: var(--fs-200); letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: .4rem; }
.study-section__p { font-size: var(--fs-300); line-height: 1.62; color: var(--text-muted); }
.study-panel__foot { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); font-size: var(--fs-200); color: var(--text-faint); }

/* Mobile — bottom sheet */
@media (max-width: 640px) {
  .study-panel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: auto; max-height: 88dvh;
    border-left: none; border-top: 1px solid var(--border-strong);
    border-radius: var(--radius) var(--radius) 0 0;
    transform: translateY(100%);
  }
  .study-panel.is-open { transform: translateY(0); }
  .study-panel__body { -webkit-overflow-scrolling: touch; }
}

/* Reduced motion — fade/instant instead of slide; no transform travel */
@media (prefers-reduced-motion: reduce) {
  .study-panel { transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); transform: none; opacity: 0; }
  .study-panel.is-open { transition: opacity var(--dur) var(--ease), visibility 0s; transform: none; opacity: 1; }
}

/* ============================================================
   SURGICAL PRINCIPLES (interactive tablist)
   ============================================================ */
.principles { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .principles { grid-template-columns: 320px 1fr; gap: var(--s-6); align-items: start; } }
.principles__list { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); }
.principles__tab {
  display: flex; align-items: center; gap: var(--s-2); width: 100%; text-align: left;
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  padding: var(--s-3) var(--s-1); color: var(--text-muted); font-weight: 600; font-size: var(--fs-400);
  transition: color var(--dur) var(--ease), padding var(--dur) var(--ease);
}
.principles__tab .pn { font-size: var(--fs-100); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.principles__tab:hover { color: var(--graphite); padding-left: var(--s-2); }
.principles__tab[aria-selected="true"] { color: var(--graphite); padding-left: var(--s-2); }
.principles__tab[aria-selected="true"] .pn { color: var(--accent); }
.principles__tab[aria-selected="true"]::after { content: ""; margin-left: auto; width: 22px; height: 1px; background: var(--accent); }
.principles__panel {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-panel);
  padding: var(--s-5); min-height: 280px; box-shadow: var(--shadow-1);
}
.principles__panel[hidden] { display: none; }
.principles__panel .index-num { font-size: var(--fs-200); }
.principles__panel h3 { font-size: var(--fs-600); margin: var(--s-1) 0 var(--s-2); }
.principles__panel p { color: var(--text-muted); max-width: 48ch; }
/* Enter animation for active panel */
.principles__panel.is-entering { animation: fade-up var(--dur-slow) var(--ease); }

/* ============================================================
   CASE STUDIES (results)
   ============================================================ */
.case { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg-panel); }
.case .visual-panel { border: 0; border-radius: 0; border-bottom: 1px solid var(--border); }
.case__body { padding: var(--s-4); display: grid; gap: var(--s-3); }
.case__row { display: grid; gap: .25rem; }
.case__row dt { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); font-weight: 700; }
.case__row dd { margin: 0; color: var(--text-muted); }
.placeholder-flag {
  display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-100);
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  background: var(--steel-tint); border: 1px solid #DCE5EA; padding: .3rem .6rem; border-radius: 6px; font-weight: 700;
}

/* ============================================================
   JOURNEY (international, vertical steps)
   ============================================================ */
.journey { counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--border); }
.journey__step { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--border); }
.journey__step .n {
  counter-increment: step; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong);
  display: grid; place-items: center; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums;
}
.journey__step .n::before { content: counter(step, decimal-leading-zero); }
.journey__step h3 { font-size: var(--fs-500); margin-bottom: .35rem; }
.journey__step p { color: var(--text-muted); margin: 0; max-width: 56ch; }

/* ============================================================
   FORM (contact)
   ============================================================ */
.form { display: grid; gap: var(--s-3); }
@media (min-width: 720px) { .form .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-200); font-weight: 600; }
.field .req { color: var(--accent); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--text); background: var(--bg-panel);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: .8rem .9rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  width: 100%; min-height: 44px;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(111,92,73,.15);
}
.form__note { font-size: var(--fs-200); color: var(--text-muted); }
.form__status { font-size: var(--fs-200); color: var(--accent); font-weight: 600; min-height: 1.2em; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--deep-graphite); color: #C9C7C3; padding-block: var(--s-6) var(--s-4); margin-top: var(--s-7); }
.footer h2 { color: #fff; }
.footer a { color: #C9C7C3; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--s-5); } }
.footer__brand { display: flex; align-items: baseline; gap: .5rem; font-weight: 700; letter-spacing: .12em; color: #fff; }
.footer__brand .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); display: inline-block; }
.footer ul.stack li { margin-bottom: .55rem; }
.footer__bottom { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: space-between; font-size: var(--fs-200); color: var(--warm-grey); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
/* Content is visible by default. Only when JS is confirmed (`.js` on <html>)
   do we arm the hidden state, so a file:// double-click with blocked/no JS
   still shows everything. */
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 70ms); }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Page hero (interior pages) */
.page-hero { padding-top: calc(var(--s-8) + var(--s-2)); padding-bottom: var(--s-5); border-bottom: 1px solid var(--border); }
.page-hero h1 { margin-bottom: var(--s-2); }
.page-hero p { max-width: 56ch; color: var(--text-muted); }

/* Utility */
.flow > * + * { margin-top: var(--s-3); }
.mt-auto { margin-top: auto; }
.center { text-align: center; }
.cta-band { display: grid; gap: var(--s-3); }
@media (min-width: 820px){ .cta-band { grid-template-columns: 1fr auto; align-items: center; } }

/* ============================================================
   PORTRAIT — real photography treatment (modern, architectural, restrained)
   No circles, no floating avatar, no heavy drop-shadow card.
   ============================================================ */
.portrait {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--soft-stone);
  box-shadow: var(--shadow-1); /* same restrained elevation as visual-panel */
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* fill frame, never stretch/distort */
  object-position: 50% 30%;     /* favour the face (upper third) */
  filter: grayscale(0.12) contrast(1.02); /* gentle integration with neutral palette */
}
.portrait--landscape { aspect-ratio: 3 / 2; }  /* native ratio — no crop */
.portrait--feature   { aspect-ratio: 4 / 3; }  /* light crop, keeps subject + signage */
.portrait--square    { aspect-ratio: 1 / 1; }  /* tight, focal */
.portrait--hero      { aspect-ratio: 4 / 5; }  /* hero panel — pre-cropped to the left visual region */
.portrait--hero img  { object-position: 50% 38%; } /* hold eyes/nose profile across breakpoints */
/* Measured caption — reuses the kicker hairline language, not a new motif */
.portrait__cap {
  position: absolute; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(250,250,248,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 8px;
  padding: .42rem .68rem;
  font-size: var(--fs-100); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 600;
}
.portrait__cap::before { content: ""; width: 18px; height: 1px; background: var(--accent); }
@media (max-width: 640px) {
  .portrait img { object-position: 52% 26%; } /* keep face visible on narrow crops */
}

/* ============================================================
   IDENTITY LAYER — "The Architecture of the Face"
   A working-drawing language: dimension lines, annotation ticks,
   reference marks, a site-wide principle framework, and alignment motion.
   Lightweight + selective — felt before noticed.
   ============================================================ */

/* Dimension line — a measured span with end-ticks (the signature device) */
.dim-rule { position: relative; height: 1px; background: var(--border); margin: var(--s-3) 0; }
.dim-rule::before, .dim-rule::after { content: ""; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--accent); }
.dim-rule::before { left: 0; }
.dim-rule::after  { right: 0; }
.dim-rule--short { width: 72px; }

/* Reference / alignment mark — a precise corner tick (drawing registration, not ornament) */
.ref-mark { position: absolute; width: 11px; height: 11px; pointer-events: none; z-index: 2; opacity: .85; }
.ref-mark::before, .ref-mark::after { content: ""; position: absolute; background: var(--accent); }
.ref-mark::before { top: 0; right: 0; width: 11px; height: 1px; }
.ref-mark::after  { top: 0; right: 0; width: 1px; height: 11px; }
.ref-mark--tr { top: 12px; right: 12px; }

/* Principle framework tag — quiet, dimension-tick led (site-wide language) */
.principle-line { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-100); letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin: 0; }
.principle-line::before { content: ""; width: 14px; height: 1px; background: var(--accent); flex: none; }
/* When the principle line is a card's terminal element (procedure & journal cards),
   pin it to the bottom so lines align across a row regardless of content height
   (Phase 9F.1, Part 6). On category cards the "View category" link stays terminal. */
.principle-line:last-child { margin-top: auto; }

/* Motion fingerprint — "align, don't fade": dimension lines draw into position */
.js .reveal .dim-rule { transform: scaleX(0); transform-origin: left center; }
.js .reveal.is-visible .dim-rule { transform: scaleX(1); transition: transform var(--dur-slow) var(--ease); }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .dim-rule { transform: none !important; }
}