/* ==========================================================================
   Mesoskinline Clinique Svendborg — design mock, SØLV variant
   "Sølvfolie på kalkpapir": silver foil stamped on warm chalk-white paper.
   Same structure as v1 ("kobber", ../styles.css); only the design layer differs.
   Every warm/red/gold colour is gone; warmth comes from the greige ground,
   paper grain, photography and whitespace. Foil appears only at four points:
   1:1 numerals, Tilgang diamonds, 33B plate, reservation mark.
   Revision 2 (calm pass): no topbar, no hero seal, no section-head glyphs;
   the home category index is six image cards.
   Production note: fonts are linked from Google Fonts for review only —
   production must self-host Cormorant Garamond + Manrope as woff2.
   ========================================================================== */

:root {
  /* Ground — chalk paper */
  --kalk: #EFEBE5;           /* page ground — chalk-greige, a touch warmer than neutral */
  --sten: #E5E0D9;           /* alternate band */
  --papir: #F8F6F2;          /* cards, frames, reservation card */

  /* Ink */
  --graphite: #2C2B29;       /* ink, primary button — 11.9:1 kalk / 10.7:1 sten */
  --ink-2: #4A4946;          /* 7.6 kalk / 6.8 sten */
  --muted: #5C5B57;          /* 5.7 kalk / 5.1 sten */

  /* Pewter — the quiet accent on light grounds */
  --pewter-ink: #5F5E5A;     /* text-size accent — 5.5 kalk / 4.9 sten */
  --pewter-line: #A3A29D;    /* hairlines, underlines (decorative only) */
  --pewter-deco: #8F8E89;    /* decorative marks: nav dot, diamonds, nodes */

  /* Nat — Tilgang band + footer only */
  --nat: #33302D;            /* warm charcoal, not flat graphite */
  --silver: #D6D5D1;         /* text on nat — 8.9:1 */
  --silver-2: #B4B3AE;       /* secondary text on nat — 6.2:1 */
  --silver-line: #8A8984;    /* hairlines on nat — 3.7:1 */
  --hvid: #F3F2EF;           /* headings on nat — 11.7:1 */

  --rule: rgba(44, 43, 41, .14);
  --rule-strong: rgba(44, 43, 41, .32);
  --rule-light: rgba(214, 213, 209, .18);

  /* Brushed-silver foil (decorative only) */
  --foil: linear-gradient(115deg, #E4E3DF 0%, #A9A8A4 38%, #D8D7D3 55%, #9C9B96 78%, #CFCECA 100%);
  /* on light grounds: wide value range so a highlight actually reads on thin strokes (seal, reservation mark, Hvorfor diamonds) */
  --foil-dark: linear-gradient(115deg, #6F6E6A 0%, #D2D1CD 34%, #6A6965 66%, #B8B7B3 100%);
  /* deepest range — display numerals on light (1:1, Behandlinger 01–06). Every stop, brush included, stays ≥ 3:1 on kalk */
  --foil-deep: linear-gradient(100deg, #5E5D59 0%, #7E7D79 26%, #4E4D49 48%, #7C7B77 70%, #5E5D59 100%);
  /* soft brushed grain — a faint sheen, not scanlines */
  --brush: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0) 0 1px, rgba(255, 255, 255, .07) 1px 2px, rgba(0, 0, 0, .015) 2px 3px);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1240px;
  --gutter: clamp(20px, 4.2vw, 60px);
  --header-h: 84px;
  --sec: clamp(72px, 8.2vw, 120px);
  --ease: cubic-bezier(.6, .05, .2, 1);

  /* paper grain — inline SVG noise, neutral grey (equal RGB channels) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .16 0 0 0 0 .16 0 0 0 .30 -.10'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .18 0 0 0 0 .18 0 0 0 .6 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 759px) {
  :root { --header-h: 64px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--kalk) var(--grain);
  color: var(--ink-2);
  font: 400 16.5px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
figure { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }
::selection { background: rgba(163, 162, 157, .35); color: var(--graphite); }

:focus-visible { outline: 2px solid var(--graphite); outline-offset: 3px; border-radius: 1px; }
.band-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--silver); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--graphite); color: var(--hvid); padding: 12px 16px; font: 600 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

/* ---------- Type ---------- */
h1, h2, .display {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--graphite);
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h3 { margin: 0; font: 600 17px/1.4 var(--sans); color: var(--graphite); letter-spacing: .005em; }
h1 { font-size: clamp(46px, 5.4vw, 80px); line-height: 1.02; }
h2 { font-size: clamp(36px, 3.7vw, 56px); line-height: 1.06; }
h1 em, h2 em { font-style: italic; font-weight: 400; }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font: 600 11.5px/1.5 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--graphite);
  margin: 0 0 24px;
}
.eyebrow--rule::before { content: ""; width: 30px; height: 1px; background: var(--pewter-deco); flex: none; }
.eyebrow .num { color: var(--pewter-ink); }
.lead { font: 400 clamp(17px, 1.3vw, 19px)/1.6 var(--sans); color: var(--graphite); }
.kw { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.3; color: var(--pewter-ink); }
.tnum, .sec-num, .spec dd, .tr-dur, .j-num, .r-num, .ba-picker .n, .phil-labels b, .contact-list dd, .practical dd, .cat-nav a span, .subnav a span, .head-phone { font-variant-numeric: tabular-nums; }

/* ---------- Icons ---------- */
.glyph { display: inline-block; width: 46px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.1; color: var(--pewter-deco); flex: none; }
.dia { display: inline-block; width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.2; flex: none; }
.dia--fill { fill: currentColor; }
.arrow { display: inline-block; width: 22px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.2; flex: none; transition: transform .35s var(--ease); }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 54px; padding: 0 28px;
  border: 1px solid var(--graphite); border-radius: 2px;
  background: var(--graphite); color: var(--hvid);
  font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.btn:hover { background: #1F1E1C; border-color: #1F1E1C; }
.btn:hover .arrow { transform: translateX(4px); }
.btn--ghost { background: transparent; color: var(--graphite); }
.btn--ghost:hover { background: var(--graphite); border-color: var(--graphite); color: var(--hvid); }
.btn--small { min-height: 44px; padding: 0 20px; font-size: 11.5px; }
.btn--block { width: 100%; justify-content: space-between; }
.btn--soon {
  gap: 8px;
  background: transparent; color: var(--graphite);
  border: 1px dashed var(--pewter-deco); cursor: default;
}
.btn--soon:hover { background: transparent; border-color: var(--pewter-deco); color: var(--graphite); }
.btn--soon small { font: inherit; color: var(--pewter-ink); }

.link {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--graphite); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px;
  text-decoration-color: var(--pewter-line);
  transition: text-decoration-color .25s, color .25s;
}
.link:hover { text-decoration-color: var(--graphite); }
.link:hover .arrow { transform: translateX(4px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }

/* Pending / awaiting-the-clinic tag — honesty marker */
.pending {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 11.5px/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--pewter-ink);
  border: 1px dashed var(--pewter-line); border-radius: 2px;
  background: rgba(248, 246, 242, .55);
  padding: 6px 10px;
}
.pending .dia { width: 7px; height: 7px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(239, 235, 229, .94);
  -webkit-backdrop-filter: saturate(1.1) blur(12px); backdrop-filter: saturate(1.1) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; min-height: 44px; }
.brand img { height: 42px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 40px); }
.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--graphite); text-decoration: none;
}
.nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 3px; width: 5px; height: 5px;
  border: 1px solid var(--pewter-deco); background: var(--kalk);
  transform: translateX(-50%) rotate(45deg) scale(0); transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current]::after { transform: translateX(-50%) rotate(45deg) scale(1); }
.nav a[aria-current]::after { background: var(--graphite); border-color: var(--graphite); }
.head-actions { display: flex; align-items: center; gap: 24px; }
.head-phone { font: 600 12px/1 var(--sans); letter-spacing: .1em; color: var(--graphite); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.head-phone:hover { color: var(--pewter-ink); }

.menu-btn {
  display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule-strong); border-radius: 2px;
  background: transparent; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 6px;
}
.menu-btn span { display: block; width: 18px; height: 1px; background: var(--graphite); transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

.menu {
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 49;
  background: var(--kalk) var(--grain); padding: 24px var(--gutter) 32px;
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu ol { border-top: 1px solid var(--rule); }
.menu li { border-bottom: 1px solid var(--rule); }
.menu li a { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; text-decoration: none; font: 500 32px/1.1 var(--serif); color: var(--graphite); }
.menu li a span { font: 600 11px/1 var(--sans); letter-spacing: .16em; color: var(--pewter-ink); min-width: 22px; }
.menu-foot { margin-top: auto; padding-top: 32px; display: grid; gap: 12px; }
.menu-foot p { margin: 0 0 4px; font-size: 14px; color: var(--muted); }

@media (max-width: 1099px) { .head-phone { display: none; } }
@media (max-width: 899px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .head-actions { gap: 10px; }
}
@media (max-width: 759px) {
  .brand img { height: 31px; }
  .head-actions .btn--small { padding: 0 16px; }
}
@media (min-width: 900px) { .menu { display: none; } }

/* ---------- Sections ---------- */
.section { padding: var(--sec) 0; position: relative; }
.band-stone { background: var(--sten) var(--grain); }
.band-plaster { background: var(--papir) var(--grain); }
.band-dark { background: var(--nat) var(--grain); color: var(--silver); overflow: hidden; }
.band-dark h2, .band-dark h3 { color: var(--hvid); }
.section + .section:not([class*="band"]):not(.book) { border-top: 1px solid var(--rule); }

.sec-head {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: clamp(44px, 5vw, 72px);
  font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--graphite);
}
.sec-num { color: var(--pewter-ink); }
.sec-line { flex: 1; height: 1px; background: var(--rule-strong); opacity: .7; }
.band-dark .sec-head { color: var(--hvid); }
.band-dark .sec-num { color: var(--silver-2); }
.band-dark .sec-line { background: var(--rule-light); opacity: 1; }

/* ==========================================================================
   Photo placeholders — honest, numbered, double as Sia's shot list
   ========================================================================== */
.ph {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: #D9D6D1;
  background-image:
    radial-gradient(80% 65% at 72% 18%, rgba(251, 250, 248, .85) 0%, rgba(251, 250, 248, 0) 70%),
    linear-gradient(172deg, #E4E1DC 0%, #CFCBC5 100%);
}
.ph::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background-image: var(--grain-strong);
  mix-blend-mode: multiply; opacity: .6;
}
.ph-tag {
  position: absolute; left: 16px; top: 16px; z-index: 6;
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--graphite); background: rgba(248, 246, 242, .84); padding: 8px 11px; border-radius: 2px;
}
.ph-tag .dia { width: 7px; height: 7px; color: var(--pewter-deco); }
.ph-cap {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 6; margin: 0;
  font: italic 400 26px/1.15 var(--serif); color: var(--graphite); font-variant-numeric: lining-nums;
  text-shadow: 0 0 18px rgba(248, 246, 242, .7);
}
.ph-cap b { display: block; margin-bottom: 8px; font: 600 11px/1 var(--sans); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--graphite); text-shadow: none; }

/* cool chalk / greige compositions — soft white light, neutral grey shadow */
.ph--sand {
  background-image:
    radial-gradient(70% 60% at 22% 20%, rgba(250, 249, 246, .9) 0%, rgba(250, 249, 246, 0) 70%),
    linear-gradient(190deg, #E8E4DF 0%, #D6D1CB 100%);
}
.ph--stone {
  background-image:
    radial-gradient(75% 60% at 30% 10%, rgba(251, 250, 248, .8) 0%, rgba(251, 250, 248, 0) 70%),
    linear-gradient(180deg, #E2DFDA 0%, #D0CCC6 60%, #C4C0BA 100%);
}
.ph--plaster {
  background-image:
    radial-gradient(90% 70% at 30% 0%, rgba(254, 253, 251, .95) 0%, rgba(254, 253, 251, 0) 65%),
    linear-gradient(180deg, #EBE8E3 0%, #D7D3CD 100%);
}
/* cloth folds */
.ph .folds {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* soft linen: low-contrast, long-period folds (short high-contrast bands read as brushed steel) */
    repeating-linear-gradient(97deg,
      rgba(254, 253, 251, 0) 0, rgba(254, 253, 251, .5) 40px, rgba(254, 253, 251, 0) 80px,
      rgba(88, 87, 84, .09) 116px, rgba(254, 253, 251, 0) 150px),
    repeating-linear-gradient(94deg,
      rgba(88, 87, 84, 0) 0, rgba(88, 87, 84, .06) 64px, rgba(254, 253, 251, .22) 140px, rgba(88, 87, 84, 0) 230px);
  filter: blur(4px);
}
.ph .glow {
  position: absolute; z-index: 2; border-radius: 50%;
  width: 60%; aspect-ratio: 1; left: 40%; top: -12%;
  background: radial-gradient(closest-side, rgba(253, 252, 250, .78), rgba(253, 252, 250, 0));
  filter: blur(10px);
}
.ph .beam {
  position: absolute; z-index: 2; inset: 0;
  background: linear-gradient(154deg,
    rgba(253, 252, 250, 0) 14%, rgba(253, 252, 250, .58) 27%, rgba(253, 252, 250, .58) 34%, rgba(253, 252, 250, 0) 47%,
    rgba(253, 252, 250, 0) 55%, rgba(253, 252, 250, .4) 61%, rgba(253, 252, 250, 0) 69%);
}
.ph .cloth {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 52%;
  background:
    repeating-linear-gradient(104deg,
      rgba(254, 253, 251, 0) 0, rgba(254, 253, 251, .34) 52px, rgba(254, 253, 251, .08) 102px,
      rgba(88, 87, 84, .06) 148px, rgba(254, 253, 251, 0) 196px),
    linear-gradient(180deg, rgba(241, 239, 235, 0), rgba(241, 239, 235, .72));
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
  mask-image: linear-gradient(to top, #000 55%, transparent);
  filter: blur(1.8px);
}
/* facade: doorway in a chalk wall */
.ph .door {
  position: absolute; z-index: 2; left: 58%; width: 28%; top: 20%; bottom: 0;
  background:
    linear-gradient(90deg, rgba(252, 251, 249, .12), rgba(252, 251, 249, 0) 45%),
    linear-gradient(180deg, rgba(56, 55, 52, .30), rgba(56, 55, 52, .17));
  /* a recessed panel line keeps the door from reading as a flat grey slab */
  box-shadow: 0 0 0 12px rgba(252, 251, 249, .2), inset 0 0 50px rgba(34, 33, 31, .2),
    inset 0 0 0 14px rgba(252, 251, 249, .03), inset 0 0 0 15px rgba(56, 55, 52, .12);
}
.ph .door::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14%; height: 9%;
  background: rgba(252, 251, 249, .32); box-shadow: 0 0 0 1px rgba(56, 55, 52, .16);
}
.ph .door::after { content: ""; position: absolute; right: 12%; top: 52%; width: 5px; height: 40px; background: rgba(252, 251, 249, .5); }
.ph .step { position: absolute; z-index: 2; left: 54%; width: 36%; bottom: 0; height: 3.5%; background: rgba(252, 251, 249, .34); box-shadow: 0 -1px 0 rgba(56, 55, 52, .12); }
/* 33B door plate — brushed silver, engraved graphite */
.plate {
  position: absolute; z-index: 4; left: 17%; top: 30%;
  width: clamp(104px, 29%, 150px);
  background-color: #C9C8C4;
  /* plate-only foil range: its darkest stop keeps the engraved graphite at ≥ 6.7:1 */
  background-image: var(--brush), linear-gradient(115deg, #E4E3DF 0%, #B8B7B3 38%, #DAD9D5 55%, #B4B3AE 78%, #D0CFCB 100%);
  color: var(--graphite);
  padding: clamp(12px, 1.6vw, 20px) clamp(12px, 1.6vw, 18px) clamp(12px, 1.4vw, 16px);
  box-shadow:
    0 18px 30px -16px rgba(44, 43, 41, .42),
    0 2px 3px rgba(44, 43, 41, .16),
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(44, 43, 41, .22),
    0 0 0 1px rgba(44, 43, 41, .22);
}
.plate::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(44, 43, 41, .28); box-shadow: 0 1px 0 rgba(255, 255, 255, .45); pointer-events: none; }
.plate b { display: block; font: 500 clamp(34px, 4vw, 54px)/.9 var(--serif); letter-spacing: .01em; font-variant-numeric: lining-nums; color: var(--graphite); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.plate span { display: block; margin-top: 10px; font: 600 10px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--graphite); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }

/* Daylight on chalk: window light, branch shadow, bowl on a ledge */
.daylight {
  background-color: #DAD7D2;
  background-image:
    radial-gradient(60% 70% at 58% 28%, rgba(252, 251, 249, .82) 0%, rgba(252, 251, 249, 0) 72%),
    linear-gradient(90deg, rgba(72, 71, 68, 0) 80%, rgba(72, 71, 68, .10) 100%),
    linear-gradient(180deg, #E2DFDA 0%, #D6D2CC 67.8%, #C2BEB8 68%, #CDC9C3 75%, #C4C0BA 100%);
}
.dl-curtain {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 22%;
  background:
    repeating-linear-gradient(90deg,
      rgba(254, 254, 252, 0) 0, rgba(254, 254, 252, .8) 18px, rgba(254, 254, 252, .25) 36px,
      rgba(96, 95, 92, .16) 52px, rgba(254, 254, 252, 0) 66px),
    repeating-linear-gradient(90deg,
      rgba(254, 254, 252, 0) 0, rgba(254, 254, 252, .35) 44px, rgba(96, 95, 92, .10) 83px, rgba(254, 254, 252, 0) 107px),
    linear-gradient(90deg, rgba(246, 245, 242, .9), rgba(238, 236, 232, .55));
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
  mask-image: linear-gradient(90deg, #000 70%, transparent);
  filter: blur(1.6px);
}
.dl-window {
  position: absolute; z-index: 1;
  left: 30%; top: 8%; width: 40%; height: 50%;
  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1.25fr 1fr; gap: 5% 3.5%;
  transform: skewY(-8deg) skewX(-10deg);
  filter: blur(8px); opacity: .9;
  animation: drift 28s ease-in-out infinite alternate;
}
.dl-window i { background: linear-gradient(160deg, rgba(255, 255, 254, .98), rgba(250, 249, 246, .5)); }
.dl-branch {
  position: absolute; z-index: 3;
  right: 4%; top: -8%; width: 30%; max-width: 100%; height: auto;
  filter: blur(3px); mix-blend-mode: multiply;
  transform-origin: 90% 95%;
  animation: sway 14s ease-in-out infinite alternate;
}
.dl-branch path, .dl-branch ellipse { fill: rgba(74, 73, 70, .2); }
.dl-branch path { fill: none; stroke: rgba(74, 73, 70, .22); stroke-width: 3.5; }
.dl-ledge { position: absolute; z-index: 2; left: 0; right: 0; top: 68%; height: 3%; background: linear-gradient(180deg, rgba(252, 251, 249, .58), rgba(252, 251, 249, 0)); }
.dl-bowl {
  position: absolute; z-index: 3;
  left: 56%; top: 61.6%; width: 11%; aspect-ratio: 2.3 / 1;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg, #EDEBE7 0%, #D6D3CE 70%, #CAC6C0 100%);
  box-shadow: -26px 18px 30px -12px rgba(72, 71, 68, .22), inset -8px -6px 14px rgba(72, 71, 68, .12);
}
.dl-bowl::before { content: ""; position: absolute; left: 0; right: 0; top: -9%; height: 18%; border-radius: 50%; background: linear-gradient(180deg, #CFCBC5, #E7E4DF); }
.dl-vase {
  position: absolute; z-index: 3; left: 70%; top: 47%; width: 3.2%; height: 21.2%;
  border-radius: 40% 40% 12% 12% / 20% 20% 8% 8%;
  background: linear-gradient(90deg, #D4D1CB, #ECE9E5 45%, #C9C5BF);
  box-shadow: -18px 14px 24px -12px rgba(72, 71, 68, .2);
}
@keyframes drift { from { translate: 0 0; } to { translate: 16px 6px; } }
@keyframes sway { from { rotate: -1.2deg; } to { rotate: 1.4deg; } }

.credit { margin-top: 12px; font: 600 11px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: flex; gap: 10px; align-items: center; }
.credit .dia { width: 6px; height: 6px; color: var(--pewter-deco); }

/* ---------- Draw animation (diamond line-work) ---------- */
.draw path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.draw .lens { stroke-dasharray: none; }
.motion .draw path { transition: stroke-dashoffset 1s cubic-bezier(.45, .05, .25, 1); }
.motion .draw path:nth-of-type(2) { transition-delay: .1s; }
.motion .draw path:nth-of-type(3) { transition-delay: .2s; }
.motion .draw .lens { transition: fill-opacity .5s ease .7s; }
.motion .draw:not(.is-drawn) path { stroke-dashoffset: 1; }
.motion .draw:not(.is-drawn) .lens { fill-opacity: 0; }

/* ==========================================================================
   HOME
   ========================================================================== */

/* ---------- Hero (light split) ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  min-height: clamp(620px, calc(100svh - var(--header-h)), 820px);
  border-bottom: 1px solid var(--rule);
}
.hero-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px clamp(64px, 7vw, 112px) 60px max(var(--gutter), calc((100vw - var(--maxw)) / 2));
}
.hero-copy > * { max-width: 560px; }
.hero h1 { margin-bottom: 28px; }
.hero h1 em { display: inline-block; }
.hero .lead { max-width: 500px; margin-bottom: 36px; }
.hero-media { position: relative; background: #D6D3CE; margin: 0; }
.hero-media .frame { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { position: absolute; top: 0; left: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero-media .frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(44,43,41,0) 72%, rgba(44,43,41,.30) 100%); }
.hero-media .credit { position: absolute; right: 22px; bottom: 16px; margin: 0; z-index: 2; padding: 7px 11px; color: var(--silver); background: rgba(44, 43, 41, .84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 1px; }
.hero-media .credit .dia { color: var(--silver-2); }

.spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--rule-strong); padding-top: 18px; }
.spec div { min-width: 0; }
.spec dt { font: 600 11.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.spec dd { font-size: 14.5px; line-height: 1.45; font-weight: 500; color: var(--graphite); }

/* ---------- 01 Klinikken — 1:1 ---------- */
.one { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.one-left { grid-column: 1 / span 5; }
.one-mark {
  margin: 0; font: 400 clamp(150px, 19vw, 280px)/.8 var(--serif);
  font-variant-numeric: lining-nums; letter-spacing: -.02em; color: var(--pewter-deco);
  user-select: none; white-space: nowrap;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* brushed-silver foil numerals: darker foil range so "1:1" still reads on kalk */
  .one-mark {
    display: inline-block; padding-right: .04em;
    color: transparent; -webkit-text-fill-color: transparent;
    background-image: var(--brush), var(--foil-deep);
    -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .55)) drop-shadow(0 -1px 0 rgba(44, 43, 41, .10));
  }
}
.one-mark span { color: var(--pewter-ink); -webkit-text-fill-color: var(--pewter-ink); margin: 0 .03em; } /* same metal, darkest tone — 5.5:1 */
.one-cap { display: flex; align-items: center; gap: 14px; margin: 36px 0 0; font: 600 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.one-cap::before { content: ""; width: 44px; height: 1px; background: var(--pewter-deco); }
.one-body { grid-column: 7 / span 6; }
.one-body h2 { margin-bottom: 30px; }
.one-body .lead { margin-bottom: 18px; }
.one-body p:not(.lead) { max-width: 54ch; }

.room { margin-top: clamp(64px, 7vw, 104px); aspect-ratio: 12 / 5; }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: clamp(56px, 6vw, 88px); }
.pillar { border-top: 1px solid var(--rule-strong); padding-top: 22px; min-width: 0; }
.pillar-num { display: block; font: 500 34px/1 var(--serif); color: var(--pewter-ink); margin-bottom: 18px; font-variant-numeric: lining-nums; }
.pillar h3 { margin-bottom: 10px; max-width: 320px; }
.pillar p { font-size: 15px; color: var(--ink-2); max-width: 370px; margin: 0; }

/* ---------- 02 Behandlinger — category cards ---------- */
.split-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: clamp(40px, 4.5vw, 60px); }
.split-head h2 { grid-column: 1 / span 7; }
.split-head > div { grid-column: 9 / span 4; }
.split-head p { font-size: 15.5px; margin: 0; }

/* six image-led category cards — one link each; 3×2 ≥ 900, 2 cols 760–899, scroll-snap rail < 760 */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 56px) clamp(24px, 2vw, 28px); }
.card { min-width: 0; display: flex; }
.card-link { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: inherit; outline-offset: 6px; border-radius: 0; }
.card-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #DCD6CF; }
.card-media > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s var(--ease); }
.card-media > .ph { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.card-link:hover .card-media > img, .card-link:hover .card-media > .ph,
.card-link:focus-visible .card-media > img, .card-link:focus-visible .card-media > .ph { transform: scale(1.03); }
.fp-pen { object-position: 50% 12%; }
.fp-trio { object-position: 52% 50%; }
.fp-hands { object-position: 50% 32%; }
.card-credit {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 5px 8px; border-radius: 1px;
  font: 600 10px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: rgba(236, 232, 226, .82); /* PLACE-FIX: light chip, same weight as .cat-figure .credit */
}
.card-body { flex: 1; display: flex; flex-direction: column; padding-top: 22px; }
.card-num { font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--pewter-ink); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.card-title { font: 500 clamp(26px, 2vw, 28px)/1.1 var(--serif); color: var(--graphite); text-transform: uppercase; letter-spacing: .04em; text-wrap: balance; }
.card-desc { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.card-meta {
  margin: auto 0 0; padding-top: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 600 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--graphite);
}
.card-meta .arrow { color: var(--graphite); }
.card-link:hover .card-meta .arrow, .card-link:focus-visible .card-meta .arrow { transform: translateX(4px); }

/* card placeholders: warm-greige, three different compositions, only a small "Foto følger" tag */
.ph-card { background-color: #DDD7CF; }
.ph-card .ph-tag { left: 12px; top: 12px; padding: 6px 9px; font-size: 10px; letter-spacing: .18em; }
.ph--niche {
  background-image:
    radial-gradient(70% 55% at 50% 12%, rgba(252, 250, 247, .85) 0%, rgba(252, 250, 247, 0) 70%),
    linear-gradient(180deg, #E6E0D8 0%, #D6CEC4 100%);
}
.ph--niche .arch {
  position: absolute; z-index: 2; left: 24%; right: 24%; top: 20%; bottom: 0;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, rgba(252, 250, 247, .6), rgba(252, 250, 247, .14) 70%, rgba(252, 250, 247, 0));
  box-shadow: inset 10px 18px 40px rgba(92, 86, 78, .16);
}
.ph--niche .glow { left: 20%; top: -18%; width: 70%; }
.ph-card.daylight {
  background-color: #DDD7CF;
  background-image:
    radial-gradient(70% 60% at 55% 30%, rgba(252, 250, 247, .85) 0%, rgba(252, 250, 247, 0) 72%),
    linear-gradient(180deg, #E4DED6 0%, #D8D0C6 63.8%, #C8BFB4 64%, #D0C8BD 72%, #C9C0B5 100%);
}
.ph-card .dl-window { left: 18%; top: 10%; width: 64%; height: 42%; }
.ph-card .dl-ledge { top: 64%; }
.ph-card .dl-bowl { left: 40%; top: 57%; width: 26%; }
.ph--linen {
  background-image:
    radial-gradient(80% 60% at 70% 16%, rgba(252, 250, 247, .85) 0%, rgba(252, 250, 247, 0) 70%),
    linear-gradient(172deg, #E7E1D9 0%, #D3CBC1 100%);
}

.index-foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: clamp(40px, 4vw, 56px); font-size: 14.5px; color: var(--muted); flex-wrap: wrap; }
.index-foot p { margin: 0; }

/* ---------- 03 Tilgang (the one nat band) ---------- */
.phil-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: end; margin-bottom: clamp(48px, 6vw, 84px); }
.phil-head .ph-title { grid-column: 1 / span 7; }
.phil-head h2 { font-size: clamp(40px, 4.6vw, 70px); }
.phil-head h2 .accent { font-style: italic; color: var(--hvid); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* the word the band builds towards: light foil on nat — darkest stop #9C9B96 is 4.7:1 */
  .phil-head h2 .accent {
    background: var(--foil); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding-right: .06em;
  }
}
.phil-en { margin: 20px 0 0; font: 600 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--silver); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.phil-en .arrow { width: 18px; color: var(--silver-line); }
.phil-head p.phil-intro { grid-column: 9 / span 4; color: var(--silver); font-size: 15.5px; margin: 0; }

.phil { width: min(1060px, 100%); margin-inline: auto; }
.phil-diagram { position: relative; aspect-ratio: 5 / 2; }
.phil-art { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: url(#foil-phil); stroke-width: 1.6; overflow: visible; }
.phil-art .lens { fill: url(#foil-phil); fill-opacity: .18; stroke: none; }
.phil-labels { position: absolute; inset: 0; display: grid; grid-template-columns: 4fr 2fr 4fr; }
.phil-labels span { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; min-width: 0; }
.phil-labels b { font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--silver-2); }
.phil-labels i { font: 500 clamp(26px, 3.2vw, 44px)/1 var(--serif); font-style: normal; color: var(--hvid); white-space: nowrap; }

.phil-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; width: 90%; margin: 40px auto 0; }
.phil-steps li { text-align: center; }
.phil-steps .p-kicker, .phil-steps h3 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.phil-steps p { max-width: 300px; padding-inline: 10px; margin-inline: auto; font-size: 15px; line-height: 1.7; color: var(--silver); }
.phil-note { margin-top: clamp(52px, 6vw, 80px); padding-top: 20px; border-top: 1px solid var(--rule-light); display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; font-size: 15px; color: var(--silver); }
.phil-note p { margin: 0; }
.phil-note .link { color: var(--hvid); text-decoration-color: var(--silver-line); }
.phil-note .link:hover { text-decoration-color: var(--hvid); }

/* ---------- 04 Konsultation ---------- */
.unique-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.unique-media { grid-column: 1 / span 5; }
.unique-media img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 40% 50%; width: 100%; }
.unique-text { grid-column: 7 / span 6; }
.unique-text h2 { margin-bottom: 30px; }
.unique-text p { max-width: 540px; }
.unique-text p.concerns { margin: 32px 0 0; font-size: 15px; line-height: 1.7; color: var(--ink-2); max-width: 500px; }
.nb { white-space: nowrap; }

.journey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-top: clamp(64px, 7vw, 100px); position: relative; }
.journey::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--rule-strong); }
.journey li { position: relative; min-width: 0; }
.j-node { display: block; width: 15px; height: 15px; margin-bottom: 26px; position: relative; }
.j-node::before { content: ""; position: absolute; inset: 1px; transform: rotate(45deg); background: var(--kalk); border: 1px solid var(--pewter-deco); }
.journey li:first-child .j-node::before { background: var(--graphite); border-color: var(--graphite); }
.j-num { display: block; font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--pewter-ink); margin-bottom: 12px; }
.journey h3 { margin-bottom: 10px; }
.journey p { font-size: 15px; max-width: 280px; margin: 0; }


/* ---------- 05 Resultater ---------- */
.results { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.results-intro { grid-column: 1 / span 5; }
.results-intro h2 { margin-bottom: 24px; }
.results-intro > p { max-width: 440px; font-size: 15.5px; }

.ba-picker { border-top: 1px solid var(--rule-strong); max-width: 460px; margin-top: 30px; }
.ba-picker button {
  width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 20px; align-items: center; gap: 12px;
  min-height: 56px; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--rule); background: none; text-align: left; cursor: pointer;
  transition: background-color .25s;
}
.ba-picker .n { font: 600 11px/1 var(--sans); letter-spacing: .14em; color: var(--muted); }
.ba-picker .t { font: 600 12px/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.ba-picker .d { width: 8px; height: 8px; justify-self: end; border: 1px solid var(--pewter-deco); transform: rotate(45deg) scale(0); transition: transform .3s var(--ease); }
.ba-picker button:hover { background: rgba(248, 246, 242, .55); }
.ba-picker button:hover .t { color: var(--pewter-ink); }
.ba-picker button[aria-checked="true"] { background: var(--papir); }
.ba-picker button[aria-checked="true"] .n, .ba-picker button[aria-checked="true"] .t { color: var(--graphite); }
.ba-picker button[aria-checked="true"] .d { transform: rotate(45deg) scale(1); background: var(--graphite); border-color: var(--graphite); }

.about-img { margin: 24px 0 0; max-width: 460px; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.about-img strong { font-weight: 600; color: var(--ink-2); }

.ba-figure { grid-column: 7 / span 6; }
.ba-frame { background: var(--papir); border: 1px solid var(--rule); padding: clamp(12px, 1.6vw, 22px); box-shadow: 0 1px 0 rgba(255,255,255,.5) inset; }
.ba-img { background: var(--kalk); aspect-ratio: 1 / 1; overflow: hidden; }
.ba-img img { width: 100%; height: 100%; object-fit: contain; transition: opacity .35s ease; }
.ba-img img.is-fading { opacity: 0; }
.ba-cap { margin-top: 16px; display: grid; gap: 5px; }
.ba-cap .treat { font: 600 11px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter-ink); }
.ba-cap .src { font: 600 14.5px/1.45 var(--sans); color: var(--graphite); }
.ba-cap .note { font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ---------- 06 Besøg & kontakt ---------- */
.visit-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.visit-media { grid-column: 1 / span 5; }
.visit-media .ph { aspect-ratio: 4 / 5; }
.visit-text { grid-column: 7 / span 6; }
.visit-text h2 { margin-bottom: 26px; }
.visit-text > p { max-width: 500px; }
.visit-media .ph-cap { right: 40%; }
.contact-list { margin-top: 36px; border-top: 1px solid var(--rule-strong); }
.contact-list > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.contact-list dt { font: 600 11.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-list dd { font: 500 17px/1.5 var(--sans); color: var(--graphite); }
.contact-list dd a:not(.link) { text-decoration: none; }
.contact-list dd a:not(.link):hover { color: var(--pewter-ink); }
.contact-list dd .link { margin-top: 2px; min-height: 44px; }
.contact-list .soon { color: var(--muted); font-weight: 500; }

/* ==========================================================================
   #book — reservation card (every page)
   ========================================================================== */
.book { padding: var(--sec) 0; }
.book-card {
  position: relative; max-width: 920px; margin: 0 auto; text-align: center;
  padding: clamp(56px, 6.5vw, 96px) clamp(24px, 6vw, 88px);
  background: var(--papir) var(--grain);
  border: 1px solid var(--pewter-line);
  box-shadow: 0 28px 56px -46px rgba(44, 43, 41, .26);
}
.book-card::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(163, 162, 157, .55); pointer-events: none; }
.book-mark { display: block; width: 104px; height: auto; margin: 0 auto 30px; }
.book-card .eyebrow { justify-content: center; margin-bottom: 20px; }
.book-card .eyebrow::before, .book-card .eyebrow::after { content: ""; width: 30px; height: 1px; background: var(--pewter-line); }
.book-card h2 { font-size: clamp(40px, 4.6vw, 64px); margin-bottom: 18px; }
.book-line { font-size: 16.5px; color: var(--ink-2); margin: 0 auto; max-width: 42ch; }
.book-label { margin: clamp(36px, 4vw, 48px) 0 6px; font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--pewter-ink); }
.book-phone {
  display: inline-block; white-space: nowrap;
  font: 500 clamp(54px, 8.4vw, 116px)/1.05 var(--serif); font-variant-numeric: lining-nums; letter-spacing: .01em;
  color: var(--graphite); text-decoration: none;
  padding: 0 4px 10px; border-bottom: 1px solid var(--rule-strong);
  transition: color .3s, border-color .3s;
}
.book-phone:hover { color: var(--pewter-ink); border-color: var(--graphite); }
.book-actions { margin-top: 34px; display: flex; justify-content: center; }
.book-note { margin: 18px auto 0; font-size: 13.5px; color: var(--muted); max-width: 56ch; text-wrap: balance; }

/* ==========================================================================
   Footer (nat)
   ========================================================================== */
.site-footer { background: var(--nat) var(--grain); color: var(--silver-2); padding: clamp(72px, 7vw, 104px) 0 32px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1fr; gap: 40px 32px; }
.foot-brand img { width: 220px; height: auto; }
.foot-brand p { margin-top: 26px; max-width: 30ch; color: var(--silver-2); }
.site-footer h2 { font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--hvid); margin-bottom: 18px; }
.site-footer li a, .site-footer .foot-line a { display: inline-flex; align-items: center; min-height: 36px; }
.site-footer a { color: var(--silver); text-decoration: none; transition: color .3s; }
.site-footer a:hover { color: var(--hvid); text-decoration: underline; text-decoration-color: var(--silver-2); text-underline-offset: 5px; }
.site-footer address { margin-bottom: 6px; }
.site-footer li { line-height: 1.5; }
.site-footer li.plain { padding: 8px 0; }
.foot-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px;
  margin-top: clamp(56px, 6vw, 88px); padding-top: 22px; border-top: 1px solid var(--rule-light);
  font-size: 12.5px; letter-spacing: .02em;
}
.draft-mark { display: inline-flex; align-items: center; gap: 10px; font: 600 11px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--silver-2); }
.draft-mark .dia { width: 6px; height: 6px; }

/* ==========================================================================
   Shared page hero + breadcrumbs
   ========================================================================== */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 12px; }
.crumbs li + li::before { content: ""; width: 5px; height: 5px; border: 1px solid var(--pewter-deco); transform: rotate(45deg); flex: none; }
.crumbs a { text-decoration: none; color: var(--graphite); display: inline-flex; min-height: 44px; min-width: 24px; align-items: center; }
.crumbs a:hover { color: var(--pewter-ink); }
.crumbs [aria-current] { color: var(--muted); }
.crumbs .crumb-more { display: none; }
.crumbs .crumb-more a { min-width: 44px; justify-content: center; margin-inline: -10px; }

/* ==========================================================================
   BEHANDLINGER
   ========================================================================== */
.page-hero { padding: clamp(28px, 3vw, 40px) 0 clamp(56px, 6vw, 88px); border-bottom: 1px solid var(--rule); }
.page-hero .crumbs { margin-bottom: clamp(32px, 4.5vw, 64px); }
.pg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: end; }
.pg-main { grid-column: 1 / span 7; }
.pg-main h1 { font-size: clamp(56px, 8vw, 116px); line-height: .95; margin-bottom: 28px; }
.pg-main .lead { max-width: 580px; }
.pg-aside { grid-column: 9 / span 4; border-top: 1px solid var(--rule-strong); padding-top: 22px; }
.pg-aside p { font-size: 15px; }
.pg-aside .eyebrow { margin-bottom: 12px; }
.pg-aside .btn { margin-top: 8px; }

.cats { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
.cat-nav { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 36px); padding-top: clamp(64px, 7vw, 100px); }
.cat-nav .eyebrow { color: var(--muted); margin-bottom: 14px; }
.cat-nav ol { border-top: 1px solid var(--rule-strong); margin-bottom: 26px; }
.cat-nav li { border-bottom: 1px solid var(--rule); }
.cat-nav ol a { display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: center; min-height: 48px; padding: 10px 0; font: 600 11px/1.4 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--graphite); text-decoration: none; transition: color .25s; }
.cat-nav ol a span { color: var(--muted); }
.cat-nav ol a:hover { color: var(--pewter-ink); }
.cat-nav ol a[aria-current="true"], .cat-nav ol a[aria-current="true"] span { color: var(--graphite); }
.cat-nav ol a[aria-current="true"] { box-shadow: inset 0 -1px 0 var(--graphite); }
.cat-nav p.cat-nav-note { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }

.cat-list { grid-column: 5 / span 8; }
.cat { padding: clamp(56px, 5.6vw, 80px) 0; border-bottom: 1px solid var(--rule-strong); }
.cat:last-child { border-bottom: 0; }
.cat-head { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 0 40px; align-items: start; }
.cat-head--solo { grid-template-columns: minmax(0, 1fr); }
.cat-num { display: block; width: fit-content; font: 500 clamp(44px, 4vw, 60px)/.9 var(--serif); color: var(--pewter-ink); font-variant-numeric: lining-nums; margin-bottom: 18px; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  /* same stamped-foil device as the 1:1 numerals — not a new accent */
  .cat-num { padding-right: .04em; background-image: var(--brush), var(--foil-deep); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.cat-title { font-size: clamp(34px, 3.2vw, 48px); line-height: 1.02; text-transform: uppercase; letter-spacing: .03em; }
.cat-sub { margin: 14px 0 0; font: 600 11.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cat-intro { margin-top: 26px; max-width: 58ch; }
.cat-intro p { font-size: 16px; }
.cat-flag { margin-top: 20px; }
.tr-meta.cat-meta { margin-top: 18px; }
.cat-figure { margin-top: 4px; }
.cat-figure .ph { aspect-ratio: 4 / 5; }
.cat-figure .ph-cap { font-size: 26px; }
.cat-figure > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cat-figure .ba-frame { padding: 10px; }
.cat-figure .credit { margin-top: 10px; }
.cat-figure .fig-note { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* printed-menu rows */
.menu-group { margin-top: 44px; }
.menu-group + .menu-group { margin-top: 36px; }
.sub-head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font: 600 11px/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.sub-head::after { content: ""; flex: 1; height: 1px; background: transparent; }
.tr-list { border-top: 1px solid var(--rule-strong); }
.tr { padding: 26px 0 28px; border-bottom: 1px solid var(--rule); }
.tr-list > li:last-child { border-bottom: 0; }
.tr-top { display: flex; align-items: baseline; gap: 14px; }
.tr-name { font: 600 13px/1.45 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); flex: 0 1 auto; margin: 0; }
.tr-name a { text-decoration: none; }
.tr-name a:hover { color: var(--pewter-ink); }
.leader { flex: 1 1 24px; min-width: 24px; border-bottom: 1px dotted var(--pewter-deco); transform: translateY(-4px); }
.tr-dur { flex: none; font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.tr .kw { margin: 8px 0 0; }
.tr-desc { margin: 10px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
.tr-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 24px; margin-top: 12px; }
.tr-meta { margin: 0; font: 600 11px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.tr-meta b { font-weight: 600; color: var(--graphite); }
.tr-go { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-block: -14px; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pewter-ink); text-decoration: none; }
.tr-go:hover .arrow { transform: translateX(4px); }
.later { font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--pewter-ink); white-space: nowrap; }
.tr--compact { padding: 18px 0; }
.tr--compact .tr-top { flex-wrap: nowrap; }
.tr--compact .later { margin-left: 18px; }
.tr-area { flex: none; font: 600 11px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.tr-sub { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

.addon { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; margin-top: 28px; padding: 16px 20px; border: 1px solid var(--rule); background: rgba(248, 246, 242, .6); }
.addon b { font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.addon span { font: 500 15px/1.5 var(--sans); color: var(--graphite); }

/* ==========================================================================
   DETAIL
   ========================================================================== */
.d-hero { padding: clamp(28px, 3vw, 40px) 0 clamp(64px, 7vw, 100px); }
.d-hero .crumbs { margin-bottom: clamp(32px, 4vw, 52px); }
.d-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
.d-copy { grid-column: 1 / span 6; }
.d-copy h1 { font-size: clamp(48px, 5vw, 76px); line-height: .98; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 20px; }
.d-keys { font: italic 400 clamp(28px, 2.3vw, 34px)/1.25 var(--serif); color: var(--pewter-ink); margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: center; }
.d-keys .dia { width: 7px; height: 7px; color: var(--pewter-deco); }
.d-copy .lead { max-width: 520px; margin-bottom: 32px; }
.d-copy .spec { margin-bottom: 34px; max-width: 540px; }
.d-media { grid-column: 8 / span 5; }
.d-media .frame { aspect-ratio: 4 / 5; overflow: hidden; background: #D6D3CE; }
.d-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

.subnav { position: sticky; top: var(--header-h); z-index: 40; background: rgba(229, 224, 217, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.subnav ol { display: flex; gap: 6px 26px; justify-content: space-between; align-items: center; min-height: 56px; }
.subnav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 11px/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.subnav a span { color: var(--pewter-ink); }
.subnav a:hover, .subnav a[aria-current="true"] { color: var(--graphite); }
.subnav a[aria-current="true"] { box-shadow: inset 0 -1px 0 var(--graphite); }

.d-sec { padding: clamp(72px, 8vw, 112px) 0; border-top: 1px solid var(--rule); }
.d-sec.band-stone { border-top: 0; }
.subnav + .d-sec { border-top: 0; }
/* in-page jumps land below header + sticky sub-nav (the sub-nav is static < 760) */
@media (min-width: 760px) { .d-sec { scroll-margin-top: calc(var(--header-h) + 76px); } }
.two-col { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.two-col .c-left { grid-column: 1 / span 6; }
.two-col .c-right { grid-column: 8 / span 5; }
.two-col .c-left--narrow { grid-column: 1 / span 4; }
.two-col .c-right--wide { grid-column: 6 / span 7; }
.two-col h2 { margin-bottom: 26px; }
.facts-sheet { border-top: 1px solid var(--rule-strong); }
.facts-sheet > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.facts-sheet dt { font: 600 11.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts-sheet dd { font: 500 15.5px/1.5 var(--sans); color: var(--graphite); }

.steps-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: center; }
.steps-media { grid-column: 1 / span 5; }
.steps-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
.steps-body { grid-column: 7 / span 6; }
.steps-body h2 { margin-bottom: 40px; }
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px; width: 1px; background: var(--rule-strong); }
.steps li { position: relative; display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 0 26px; padding-bottom: 34px; }
.steps li:last-child { padding-bottom: 0; }
.steps .j-node { margin: 5px 0 0; }
.band-stone .j-node::before { background: var(--sten); }
.steps li:first-child .j-node::before { background: var(--graphite); border-color: var(--graphite); }
.steps .j-num { margin-bottom: 8px; }
.steps h3 { margin-bottom: 6px; }
.steps p { font-size: 15.5px; max-width: 480px; margin: 0; }
.steps-note { margin-top: 36px; margin-left: 41px; }

.ba-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.ba-pair .about-img { max-width: 64ch; grid-column: 1 / -1; margin-top: 6px; }

/* 04 — three-diamond figure + awaiting rows */
.trio { display: flex; margin-top: 44px; }
/* diamonds scale with their column (2.5 × 44 % = 110 %: a small, safe spill into the gutter) */
.trio > span { position: relative; width: min(200px, 44%); aspect-ratio: 1; display: grid; place-items: center; margin-right: max(-50px, -11%); flex: none; }
.trio > span:last-child { margin-right: 0; }
.trio > span::before { content: ""; position: absolute; inset: 15%; border: 2px solid var(--pewter-deco); border-image: var(--foil-dark) 1; transform: rotate(45deg); }
.trio > span:nth-child(2)::before { background: rgba(143, 142, 137, .12); }
.trio i { display: none; }
.trio b { position: relative; max-width: 96px; text-align: center; font: 600 11px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.why-parts { margin-top: 30px; border-top: 1px solid var(--rule-strong); }
.why-parts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.why-parts b { font: 600 16px/1.4 var(--sans); color: var(--graphite); }
.why-parts .wp-n { margin-right: 14px; font: 600 11px/1 var(--sans); letter-spacing: .16em; color: var(--pewter-ink); font-variant-numeric: tabular-nums; }
.why-parts .pending { justify-self: end; }
.why-parts span.what { grid-column: 1 / -1; color: var(--muted); font-size: 14.5px; }

/* 05 — course card (light) */
.course { position: relative; background: var(--papir) var(--grain); border: 1px solid var(--rule-strong); padding: clamp(28px, 3.4vw, 48px); }
.course::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--rule); pointer-events: none; }
.course .eyebrow { color: var(--muted); margin-bottom: 14px; }
.course-q { font: 600 16px/1.45 var(--sans); color: var(--graphite); margin-bottom: 14px; }
.course__dots { display: flex; align-items: center; margin: 30px 0 12px; }
.course__dots span { width: 12px; height: 12px; border: 1px solid var(--pewter-deco); transform: rotate(45deg); flex: none; background: var(--papir); }
.course__dots span.f { background: var(--graphite); border-color: var(--graphite); }
.course__dots i { flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(143, 142, 137, .75) 0 4px, transparent 4px 9px); }
.course__labels { display: flex; justify-content: space-between; gap: 10px; margin: 0; font: 600 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.course-addon { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.course-addon b { font: 600 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.course-addon span { font: 500 15px/1.5 var(--sans); color: var(--graphite); }

/* 06 — practical grid */
.practical { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule-strong); margin-top: 40px; }
.practical > div { padding: 22px 22px 26px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.practical > div:not(:nth-child(4n+1)) { padding-left: 22px; border-left: 1px solid var(--rule); }
.practical dt { font: 600 11.5px/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.practical dd { font: 500 17px/1.4 var(--sans); color: var(--graphite); }
.practical dd a { text-decoration: none; }
.practical dd a:hover { color: var(--pewter-ink); }

/* 07 — who cards */
.who-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.who-card { border: 0; box-shadow: inset 0 0 0 1px var(--rule), 0 18px 36px -30px rgba(44, 43, 41, .18); padding: 34px 30px 32px; display: flex; flex-direction: column; gap: 14px; background: var(--papir) var(--grain); }
.who-card .dia { width: 14px; height: 14px; color: var(--pewter-deco); }
.who-card h3 { font: 500 30px/1.1 var(--serif); color: var(--graphite); }
.who-card p { color: var(--ink-2); font-size: 15px; margin: 0; }
.who-note { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; font-size: 15px; color: var(--ink-2); }
.who-note p { margin: 0; }

/* 08 — FAQ */
.faq { border-top: 1px solid var(--rule-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 20px; align-items: center; min-height: 68px; padding: 16px 0; cursor: pointer; font: 600 17px/1.4 var(--sans); color: var(--graphite); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { position: relative; width: 14px; height: 14px; justify-self: end; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--graphite); transition: transform .3s var(--ease); }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--pewter-ink); }
.faq .answer { padding: 0 60px 24px 0; max-width: 700px; font-size: 15.5px; }

/* 09 — related cards */
.rel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; }
.rel-head h2 { max-width: 760px; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.rel-card { display: flex; flex-direction: column; min-height: 272px; padding: 28px 28px 22px; border: 1px solid var(--rule-strong); text-decoration: none; background: rgba(248, 246, 242, .5); transition: background-color .3s, border-color .3s; }
.rel-card:hover { background: var(--papir); border-color: var(--graphite); }
.rel-card .glyph { margin-bottom: 26px; }
.rel-card .r-num { font: 600 11px/1 var(--sans); letter-spacing: .2em; color: var(--pewter-ink); margin-bottom: 12px; }
.rel-card h3 { font: 500 28px/1.08 var(--serif); text-transform: uppercase; letter-spacing: .03em; color: var(--graphite); margin-bottom: 10px; }
.rel-card .kw { font-size: 26px; }
.rel-card .r-foot { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; align-items: center; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); border-top: 1px solid var(--rule); }
.rel-card .r-foot .later { font-size: 11px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1099px) {
  .trio b { display: none; }
  .trio i { display: block; position: relative; font: 500 30px/1 var(--serif); font-style: normal; color: var(--graphite); font-variant-numeric: lining-nums; }
  .cat-nav { grid-column: 1 / span 3; }
  .cat-list { grid-column: 4 / span 9; }
  .cat-head { grid-template-columns: minmax(0, 1fr) 200px; gap: 0 28px; }
  .subnav ol { gap: 0 20px; justify-content: flex-start; flex-wrap: wrap; padding: 6px 0; }
  .practical { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .practical > div:not(:nth-child(4n+1)) { padding-left: 0; border-left: 0; }
  .practical > div:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--rule); }
}

@media (max-width: 899px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
  .one-left, .one-body, .unique-text, .visit-text, .results-intro { grid-column: 1 / -1; }
  .one-body { margin-top: 36px; }
  .unique-media, .visit-media { grid-column: 1 / -1; margin-top: 44px; }
  .unique-media, .visit-media { order: 2; }
  .steps-body { order: -1; }
  .steps-media { order: 2; }
  .ba-figure { grid-column: 1 / -1; margin-top: 40px; }
  .ba-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; max-width: none; }
  .results .about-img { max-width: none; }
  .pillars { grid-template-columns: 1fr; gap: 28px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-head h2, .split-head > div, .phil-head .ph-title, .phil-head p.phil-intro, .pg-main, .pg-aside, .two-col .c-left, .two-col .c-right, .two-col .c-left--narrow, .two-col .c-right--wide, .steps-media, .steps-body, .d-copy, .d-media { grid-column: 1 / -1; }
  .cats { display: block; }
  .cat-nav { position: static; padding-top: 40px; }
  .cat-nav ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; border-top: 0; margin-bottom: 0; }
  .cat-nav li:nth-child(-n+2) { border-top: 1px solid var(--rule-strong); }
  .cat-nav .cat-nav-note, .cat-nav .btn, .cat-nav > .link { display: none; }
  .d-media { margin-top: 48px; }
  .journey { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
  .journey::before { display: none; }
  .related, .who-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 759px) {
  body { font-size: 16px; }
  .book { padding: 64px 0; }
  .sec-head { gap: 12px; margin-bottom: 34px; font-size: 11px; }
  h2 { font-size: clamp(34px, 9.4vw, 40px); }

  /* Hero stacks: photo on top */
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-media { order: -1; height: clamp(360px, 104vw, 440px); }
  .hero-media img { object-position: 50% 30%; }
  .hero-media .credit { right: auto; left: var(--gutter); bottom: 14px; }
  .hero-copy { padding: 48px var(--gutter) 64px; }
  .hero h1 { font-size: clamp(44px, 12.4vw, 52px); margin-bottom: 22px; }
  .hero .lead { margin-bottom: 30px; }
  .hero .cta-row { gap: 8px 24px; }
  .spec { grid-template-columns: 1fr; gap: 0; padding-top: 0; } /* detail page facts */
  .spec div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .spec dt { margin: 0; }

  .one-mark { font-size: clamp(132px, 40vw, 168px); }
  .one-cap { margin-top: 22px; }
  .room { aspect-ratio: 4 / 3.2; margin-top: 52px; }
  .room .dl-window { left: 14%; width: 62%; top: 10%; height: 44%; }
  .room .dl-curtain { width: 20%; }
  .room .dl-branch { width: 64%; right: 0; top: -6%; }
  .room .dl-bowl { left: 50%; width: 22%; }
  .room .dl-vase { left: 76%; width: 6%; }
  .pillars { gap: 20px; margin-top: 40px; }
  .pillars p { font-size: 15px; }
  .plate span { display: none; }

  .split-head { gap: 18px; }
  /* category rail: native horizontal scroll-snap, next card peeks, no JS */
  .cards {
    display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78vw; gap: 16px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) 10px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { scroll-snap-align: start; }
  .card-link { outline-offset: 4px; } /* room for the ring inside the rail's padding */
  .card-title { font-size: 26px; }
  .card-body { padding-top: 18px; }
  .card-meta { margin-top: 0; }
  .index-foot { flex-direction: column; align-items: flex-start; gap: 4px; }

  .phil-labels i { display: none; }
  .phil-labels b { font: 500 30px/1 var(--serif); letter-spacing: 0; color: var(--hvid); font-variant-numeric: lining-nums; }
  .phil-labels span { gap: 6px; }
  .phil-art { stroke-width: 4.4; } /* viewBox is scaled ~0.35× here: ≈1.5px on screen */
  .phil-steps { grid-template-columns: 1fr; gap: 0; width: auto; margin-top: 36px; border-top: 1px solid var(--rule-light); }
  .phil-steps li { text-align: left; padding: 22px 0; border-bottom: 1px solid var(--rule-light); }
  .phil-steps .p-kicker, .phil-steps h3 { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .phil-steps .p-kicker { font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--silver-2); margin: 0 0 8px; }
  .phil-steps h3 { font: 500 30px/1.1 var(--serif); margin-bottom: 8px; }
  .phil-steps p:not(.p-kicker) { max-width: none; padding-inline: 0; margin: 0; }
  .phil-note { flex-direction: column; align-items: flex-start; }

  .journey { grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
  .journey::before { display: block; left: 7px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; }
  .journey li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 0 22px; padding: 0 0 22px; }
  .journey li:last-child { padding-bottom: 0; }
  .journey .j-node { grid-row: 1 / span 3; margin: 4px 0 0; }
  .journey p { max-width: none; }

  .results { display: flex; flex-direction: column; }
  .results-intro { display: contents; }
  .results-intro h2 { order: -3; }
  .results-intro > p { order: -2; }
  .ba-figure { order: -1; margin-top: 8px; }
  .ba-picker { order: 1; max-width: none; margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; border-top: 0; }
  .ba-picker button { grid-template-columns: 24px minmax(0, 1fr); min-height: 64px; padding: 10px 8px; border-top: 1px solid var(--rule); border-bottom: 0; }
  .ba-picker button:nth-last-child(-n+2) { border-bottom: 1px solid var(--rule); }
  .ba-picker .d { display: none; }
  .ba-picker .t { font-size: 11px; letter-spacing: .08em; }
  .ba-picker button[aria-checked="true"] { box-shadow: inset 0 2px 0 var(--graphite); }
  .results .about-img { order: 2; max-width: none; }
  .ba-frame { padding: 10px; }

  .visit-media { margin-top: 40px; }
  .visit-media .ph { aspect-ratio: 4 / 4.4; }
  .visit-media .door { left: 62%; width: 26%; }
  .visit-media .step { left: 58%; width: 34%; }
  .visit-media .plate { left: 12%; top: 26%; }
  .contact-list > div { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; }
  .contact-list dd > a:not(.link) { display: inline-flex; align-items: center; min-height: 44px; }

  .book-card { padding: 52px 22px 44px; }
  .book-card h2 { font-size: 40px; }
  .book-phone { font-size: clamp(50px, 14vw, 58px); }
  .book-actions .btn { width: 100%; padding: 0 14px; letter-spacing: .1em; font-size: 11px; gap: 8px; white-space: nowrap; }

  .foot-grid { gap: 36px 20px; }
  .foot-brand img { width: 190px; }
  .foot-behand { grid-column: 1 / -1; order: 3; }
  .foot-behand ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
  .foot-legal { flex-direction: column; }
  .site-footer li a { min-height: 44px; align-items: flex-start; padding-top: 11px; }
  .site-footer li.plain { min-height: 44px; padding: 11px 0 0; }
  .site-footer address { padding-top: 11px; }

  /* Behandlinger */
  .pg-main h1 { font-size: clamp(52px, 15vw, 64px); }
  .cat-nav ol a { font-size: 11px; letter-spacing: .08em; grid-template-columns: 24px 1fr; min-height: 52px; }
  .cat { padding: 60px 0; }
  .cat-head { grid-template-columns: 1fr; }
  .cat-num { font-size: 44px; margin-bottom: 14px; }
  .cat-title { font-size: clamp(32px, 8.6vw, 38px); }
  .cat-figure { margin-top: 30px; }
  .cat-figure .ph, .cat-figure > img { aspect-ratio: 4 / 3.4; }
  .cat-figure > img { object-position: 50% 40%; }
  .cat-figure--ba { max-width: 100%; }
  .tr-top { display: grid; grid-template-columns: minmax(0, max-content) minmax(14px, 1fr) auto; column-gap: 10px; align-items: last baseline; }
  .tr-top--solo { grid-template-columns: minmax(0, 1fr); }
  .tr-top > .later { grid-column: 1 / -1; margin: 2px 0 0 !important; }
  .tr-top .leader { transform: translateY(-4px); }
  .tr-top > .leader:last-child, .tr-top > .leader:has(+ .later) { display: none; }
  /* Rows that end in "Side følger": name on its own line, then "AREA · SIDE FØLGER" as a quiet meta line */
  .tr-top:has(> .later) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; }
  .tr-top:has(> .later) .tr-name { flex: 1 0 100%; }
  .tr-top:has(> .later) .leader { display: none; }
  .tr-top:has(> .later) .tr-area { font-weight: 500; color: var(--muted); }
  .tr-top:has(> .later) > .later { margin: 0 !important; }
  .tr-top > .tr-area + .later::before { content: "·"; margin: 0 .6em; }
  .tr-foot { flex-wrap: nowrap; align-items: baseline; }
  .tr-meta { min-width: 0; }
  .tr-foot .later, .tr-foot .tr-go { margin-left: auto; flex: none; }
  .tr-name a { display: inline-flex; align-items: center; min-height: 44px; }
  .tr .kw { font-size: 26px; }

  /* Detail */
  .crumbs .crumb-mid { display: none; }
  .crumbs .crumb-more { display: inline-flex; }
  .d-copy h1 { font-size: clamp(42px, 11.6vw, 48px); }
  .d-keys { font-size: 28px; }
  .subnav { position: static; background: var(--sten); }
  .subnav ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 8px 0; }
  .subnav a { font-size: 11px; letter-spacing: .07em; white-space: normal; line-height: 1.3; }
  .d-media .frame { aspect-ratio: 4 / 4.4; }
  .d-sec { padding: 64px 0; }
  .steps-body h2 { margin-bottom: 30px; }
  .steps li { gap: 0 20px; padding-bottom: 28px; }
  .steps-note { margin-left: 0; }
  .ba-pair { grid-template-columns: 1fr; }
  .trio { margin-top: 32px; justify-content: center; }
  .trio > span { width: 36%; margin-right: -9%; }

  .why-parts li { grid-template-columns: 1fr; }
  .why-parts .pending { justify-self: start; }
  .practical { grid-template-columns: 1fr; }
  .practical > div, .practical > div:nth-child(even), .practical > div:not(:nth-child(4n+1)) { padding: 16px 0; border-left: 0; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .practical dt { margin: 0; }
  .practical dd { font-size: 16px; }
  .practical dd a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; }
  .facts-sheet > div { grid-template-columns: 100px minmax(0, 1fr); }
  .two-col { gap: 18px 24px; }
  .faq .answer { padding-right: 0; }
  .faq summary { min-height: 64px; font-size: 16px; }
  .rel-card { min-height: 0; }
}

/* Tablet + small desktop (760–1399): the detail sub-nav stays one scrollable row instead of wrapping to two
   (r3-fix F17: with "10 Andre" the ten items need ~1180px, so the fixed row only starts at 1400) */
@media (min-width: 760px) and (max-width: 1399px) {
  .subnav ol {
    flex-wrap: nowrap; overflow-x: auto; padding: 0; gap: 0 26px;
    scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  }
  .subnav ol::-webkit-scrollbar { display: none; }
  .subnav li { scroll-snap-align: start; flex: none; }
  .subnav li:last-child { padding-right: 40px; }
}

/* Tablet (600–899): portrait media would fill a whole screen at full width — go landscape */
@media (min-width: 600px) and (max-width: 899px) {
  .unique-media img, .steps-media img, .d-media .frame, .visit-media .ph { aspect-ratio: 3 / 2; }
  .unique-media img { object-position: 50% 45%; }
}

/* Typographic polish: no widows/orphans in display-size keyword lines and running text */
p { text-wrap: pretty; }
.pg-aside .eyebrow, .split-head p { text-wrap: balance; }

/* In-page anchor targets receive focus (script.js) but should not wear a ring */
main[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---- polish pass (final review) ---- */
.nb { white-space: nowrap; }
@media (min-width: 1100px) {
  /* producer before/after in the IdealSkin header: wide enough to read the burned-in protocol text */
  .cat-head:has(.cat-figure--ba) { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 759px) {
  .tr-meta b { white-space: nowrap; }
  /* compact ritual rows: when the name wraps, the leader keeps a real run and air before the duration */
  .tr--compact .tr-top:not(:has(> .later)) { grid-template-columns: minmax(0, max-content) minmax(28px, 1fr) auto; column-gap: 12px; }
}
/* ≤ 359px phones: header actions must fit without horizontal scroll */
@media (max-width: 359px) {
  .head-actions { gap: 8px; }
  .head-actions .btn--small { padding: 0 12px; letter-spacing: .08em; }
  .brand img { height: 27px; }
}
.cat-nav .link { margin-top: 6px; }

/* Foto 02 (Meso Beauty): daylight + branch shadow give the field a light source and a subject */
.ph .glow + .beam { opacity: .8; }
.dl-branch--ph { right: 0; top: -2%; width: 86%; }
.dl-branch--ph path { stroke: rgba(74, 73, 70, .3); stroke-width: 4; }
.dl-branch--ph ellipse { fill: rgba(74, 73, 70, .26); }

/* ==========================================================================
   Home: full-screen hero with the header laid over it (rev. 25 Sep)
   - hero = exactly one screen; the photo runs from the top edge to the bottom
   - header transparent at the top, frosted solid once scrolled (script.js .is-scrolled)
   - without JS the header simply stays solid
   ========================================================================== */
.has-hero .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  transition: background-color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease),
              -webkit-backdrop-filter .45s var(--ease), backdrop-filter .45s var(--ease);
}
.js .has-hero .site-header:not(.is-scrolled):not(:has(.menu-btn[aria-expanded="true"])) {
  background-color: transparent; border-bottom-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.has-hero .site-header.is-scrolled { box-shadow: 0 10px 28px -22px rgba(44, 43, 41, .45); }

.has-hero .hero { height: 100vh; height: 100svh; min-height: 640px; max-height: none; }
.has-hero .hero-copy { padding-top: calc(var(--header-h) + 48px); }
/* a soft chalk mist at the top of the photo keeps the nav legible where it crosses the image */
.has-hero .hero-media .frame::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--header-h) + 72px); z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(239, 235, 229, .78) 0%, rgba(239, 235, 229, .42) 45%, rgba(239, 235, 229, 0) 100%);
}

@media (max-width: 759px) {
  /* stacked: the photo takes whatever height the copy leaves, so the whole hero is one screen */
  .has-hero .hero { display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100svh; }
  .has-hero .hero-media { flex: 1 1 auto; height: auto; min-height: 340px; }
  .has-hero .hero-copy { flex: none; padding: 30px var(--gutter) 40px; }
  .has-hero .hero .lead { margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) { .has-hero .site-header { transition: none; } }

/* ==========================================================================
   Revision 3 (25 Sep 2026) — content fixes A
   ========================================================================== */
/* 01 Klinikken — "Din behandler" slot (A12): compact, calm, no name until supplied */
.therapist {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 0 32px; align-items: center;
  margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--rule-strong);
}
.th-ph { aspect-ratio: 4 / 5; }
.th-ph .ph-tag { left: 8px; top: 8px; padding: 5px 7px; font-size: 9.5px; letter-spacing: .16em; gap: 6px; }
.th-ph .ph-cap { left: 10px; right: 10px; bottom: 10px; font-size: 15px; line-height: 1.2; }
.th-ph .glow { left: 10%; top: -10%; width: 90%; }
.th-body h3 { font: 500 30px/1.1 var(--serif); color: var(--graphite); margin-bottom: 10px; }
.th-body p { font-size: 15px; color: var(--ink-2); margin: 0; max-width: 46ch; }
.th-body .th-flag { margin-top: 16px; }

/* Behandlinger — scope + add-on line for the four cocktail treatments (A5) */
.group-scope { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 16px; font: 500 14.5px/1.5 var(--sans); color: var(--ink-2); }
.group-scope b { font: 600 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.group-scope .gs-sep { color: var(--pewter-deco); }
.cat-figure > img.fp-family { object-position: 44% 50%; }

/* Detail — one producer pair (A7): one frame, "Om billedet" aligned with the intro column */
.ba-single { margin-top: 44px; }
.ba-single > figure { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: end; }
.ba-single .ba-frame { grid-column: 1 / span 6; }
.ba-single .ba-cap { grid-column: 8 / span 5; margin: 0 0 4px; }
.ba-single .about-img { display: block; max-width: 46ch; margin: 22px 0 0; }

@media (max-width: 899px) {
  .ba-single .ba-frame, .ba-single .ba-cap { grid-column: 1 / -1; }
  .ba-single .ba-cap { margin-top: 16px; }
  .ba-single .about-img { max-width: 64ch; margin-top: 14px; }
}
@media (max-width: 759px) {
  .therapist { grid-template-columns: 104px minmax(0, 1fr); gap: 0 20px; margin-top: 44px; padding-top: 24px; }
  .th-ph .ph-cap { font-size: 13px; }
  .th-body h3 { font-size: 26px; margin-bottom: 8px; }
  .th-body p { font-size: 14.5px; }
  .th-body .th-flag { margin-top: 12px; }
  .cat-figure > img.fp-family { object-position: 45% 82%; }
  .ba-single { margin-top: 32px; }
}

/* ==========================================================================
   Revision 3 — B/C: sourced "Hvorfor virker" rows, Priser block, linked cards
   ========================================================================== */
/* 04 — rows with written copy (producer-sourced) instead of pending tags */
.why-parts--copy li { grid-template-columns: minmax(0, 1fr); gap: 8px; align-items: start; padding: 22px 0 24px; }
.why-parts--copy span.what { color: var(--ink-2); font-size: 15.5px; line-height: 1.65; max-width: 64ch; }
.why-parts--copy .what-pending { margin-top: 6px; }
.why-src { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* 05 — Priser: a quiet centred price list (after Sia's moodboard table) */
.prices { max-width: 780px; margin-inline: auto; text-align: center; }
.prices .eyebrow { justify-content: center; color: var(--pewter-ink); margin-bottom: 14px; }
.prices h2 { margin-bottom: 18px; }
.prices-intro { margin: 0 auto 36px; max-width: 52ch; color: var(--ink-2); }
.price-list { border-top: 1px solid var(--rule-strong); text-align: left; margin: 0 0 36px; }
.price-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.price-list dt { font: 500 14.5px/1.5 var(--sans); color: var(--muted); }
.price-list dt b { font: 600 11.5px/1.5 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); margin-right: 2px; }
.price-list dd { justify-self: end; }

/* 05/06 — producer course card extras */
.course-more { margin: 0; color: var(--ink-2); font-size: 15px; }
.course-src { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* 07 — attribution under a practical value */
.practical .p-src { display: block; margin-top: 6px; font: 500 12.5px/1.45 var(--sans); color: var(--muted); }
.practical .p-src a { text-decoration: underline; text-decoration-color: var(--pewter-line); text-underline-offset: 3px; }
.faq .answer p + p { margin-top: 10px; }
.faq .answer a { text-underline-offset: 3px; text-decoration-color: var(--pewter-line); }

/* 10 — related cards now link to real pages */
.rel-card .r-go { display: inline-flex; align-items: center; gap: 10px; color: var(--pewter-ink); }
.rel-card:hover .r-go .arrow { transform: translateX(4px); }

/* Home results picker — caption link to the treatment page */
.ba-cap .ba-go { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); text-decoration: underline; text-decoration-color: var(--pewter-line); text-underline-offset: 6px; }
.ba-cap .ba-go:hover .arrow { transform: translateX(4px); }

@media (max-width: 759px) {
  .price-list > div { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; }
  .price-list dd { justify-self: start; }
  .prices .btn { width: 100%; }
}
/* Producer spelling "tFNA" keeps its lower-case t inside uppercase labels */
.kc { text-transform: none; }

/* ==========================================================================
   Revision 3 — verifier fixes (r3-fix, 25 Sep 2026)
   ========================================================================== */
/* F19 — quiet pending value: one dashed tag per block, row values as muted tracked caps */
.pending--quiet { border: 0; background: none; padding: 0; gap: 0; font-size: 11px; letter-spacing: .16em; color: var(--pewter-ink); }
.prices-flag { margin: -18px 0 32px; }
.practical dd .pending--quiet { vertical-align: baseline; }

/* F18 — single producer pair: caption starts at the top beside the frame (no dead band under the intro) */
.ba-single > figure { align-items: start; }
.ba-single .ba-cap { margin: 8px 0 0; }

/* F3 — visible safety line in 08 Til hvem (Pigment Reduction) */
.safety-line { margin-top: 14px; padding-left: 14px; border-left: 1px solid var(--pewter-deco); color: var(--ink-2); font-size: 15px; max-width: 52ch; }

/* F5/F14 — Pigment Reduction hero process photo: keep hands + face in the frame */
.d-media img.dm-hands { object-position: 50% 40%; }
/* PLACE-FIX (Exosomes T-RE-03, pen-face-3): face and towel lead the frame, less gold pen and dark room — interim until Foto 11d */
.steps-media img.sm-face-lead { object-position: 50% 60%; }

/* F22 — "Din behandler": thumbnail carries only the tag; block sits under the clinic copy column */
@media (min-width: 900px) {
  .therapist { margin-left: calc(50% + 12px); grid-template-columns: 112px minmax(0, 1fr); gap: 0 28px; }
}

@media (max-width: 759px) {
  /* F19 — label + value stay on one row on phones */
  .price-list > div { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .price-list dd { justify-self: end; }
}
.nw { white-space: nowrap; }
@media (min-width: 1400px) { .subnav ol { gap: 6px 12px; } } /* r3-fix F17: ten items fit the 1240px row */

/* ==========================================================================
   AI still lifes, series S (25 Sep 2026, IMAGE-PLAN H-05…H-10, B-02…B-S2, T-xx-02)
   <picture> (WebP + JPG) is layout-transparent, so the existing card, figure and hero rules apply to its img
   ========================================================================== */
.card-media > picture, .cat-figure > picture, .d-media .frame > picture { display: contents; }
.card-media > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .6s var(--ease); }
.card-link:hover .card-media > picture > img, .card-link:focus-visible .card-media > picture > img { transform: scale(1.03); }
.cat-figure > picture > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* focal points: exact at 4:5; they steer the 3:2 tablet hero (768) and the 4:3.4 / 4:4.4 phone crops */
img.ai-s01 { object-position: 50% 50%; }
img.ai-s12, img.ai-s09, img.ai-s06, img.ai-s07 { object-position: 50% 55%; }
img.ai-s08 { object-position: 50% 62%; }
img.ai-s05 { object-position: 50% 58%; } /* close vial crop (PLACE-FIX): keeps the vial whole in the 3:2 tablet frame */
img.ai-s02, img.ai-s03 { object-position: 50% 50%; }
img.ai-s04 { object-position: 50% 62%; }
@media (max-width: 759px) {
  .cat-figure > picture > img { aspect-ratio: 4 / 3.4; }
}

/* AI stand-ins for the two people images (Casper 25 Sep 2026: "switch both"); <picture> stays layout-transparent */
.hero-media .frame > picture, .unique-media > picture { display: contents; }
.hero-media img { object-position: 50% 28%; }
.unique-media img { object-position: 55% 38%; }
@media (max-width: 899px) { .unique-media img { object-position: 55% 36%; } }

/* ---- Zone photos (25 Sep 2026, Casper: direction A) ----
   Heroes on the three general Meso Advanced pages show the treatment area as a face at rest (Z-01/02/03);
   the vial still life moves to 04 "Hvorfor virker den?". Rituals card/figure: experience shot Z-11.
   Object positions keep the face in the 3:2 tablet crop and the 4:4.4 mobile crop. */
.why-media { margin: 36px 0 0; max-width: 300px; }
.why-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.why-media .credit { margin-top: 10px; }
.d-media img.dm-z01 { object-position: 50% 22%; }
.d-media img.dm-z02 { object-position: 50% 45%; }
.d-media img.dm-z03 { object-position: 50% 28%; }
img.ai-z11 { object-position: 50% 42%; }
@media (max-width: 899px) { .why-media { max-width: 260px; margin-top: 28px; } }

/* ---- Verify fixes (25 Sep 2026) ----
   1. The burned-in "AI" badge is cut off by the 3:2 tablet and 4:4.4 phone crops and is illegible at small sizes,
      so every AI-people frame on the page also gets a fixed-size HTML chip in the top-left corner, over the badge.
   2. Two-line credits keep the diamond on the first line; ".nw" keeps "ikke et behandlingsresultat" together.
   3. Below 900px the moved vial figure centres under the centred trio. */
.d-media .frame:has(img[class^="dm-z"]), .cat-figure:has(img[class^="ai-z"]), .card-media:has(img[class^="ai-z"]) { position: relative; }
.d-media .frame:has(img[class^="dm-z"])::before, .cat-figure:has(img[class^="ai-z"])::before {
  content: "AI"; position: absolute; top: 8px; left: 8px; z-index: 2; padding: 4px 6px;
  font: 600 10px/1 var(--sans); letter-spacing: .12em; color: var(--silver); background: rgba(44, 43, 41, .84); border-radius: 1px;
}
.credit { align-items: flex-start; }
.credit .dia { flex: none; margin-top: 5px; }
@media (max-width: 899px) {
  .why-media { margin-inline: auto; }
  .c-left--narrow .trio { justify-content: center; }
}
/* area label before a duration (ritual rows): same rhythm as area · "Side følger" */
.tr--compact .tr-area + .tr-dur { margin-left: 18px; }
@media (max-width: 759px) { .tr--compact .tr-top:has(> .tr-area + .tr-dur) { flex-wrap: wrap; } }
.credit > span { min-width: 0; }

/* ---- Category images C-01…C-07 (25 Sep 2026): show what each treatment targets instead of vials ---- */
img.ai-zc01 { object-position: 50% 30%; }
img.ai-zc02 { object-position: 50% 40%; }
img.ai-zc03 { object-position: 50% 30%; }
img.ai-zc04 { object-position: 50% 40%; }
img.ai-zc06 { object-position: 50% 45%; }
.d-media img.dm-zp { object-position: 50% 40%; }

/* ---- Place images (25 Sep 2026, Casper): the room in morning light (01 Klinikken) and the facade (06 Besøg & kontakt) ---- */
.room--photo { position: relative; overflow: hidden; margin-left: 0; margin-right: 0; background: #E9E1D6; }
.room--photo > picture { display: contents; }
.room--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.room--photo .credit { position: absolute; right: 16px; bottom: 12px; margin: 0; z-index: 2; padding: 6px 10px; color: var(--silver); background: rgba(44, 43, 41, .78); border-radius: 1px; }
.visit-photo { margin: 0; }
.visit-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; display: block; }
.visit-photo .credit { margin-top: 10px; }
@media (max-width: 899px) { .visit-photo img { aspect-ratio: 3 / 2; object-position: 50% 45%; } }
@media (max-width: 759px) { .visit-photo img { aspect-ratio: 4 / 4.4; } }