/* OCELLUS LABS — "luxe" homepage stylesheet.
   Pitch black + soft cream gold (dark), cotton-paper cream + deep gold
   (light). Every colour goes through the tokens below so both themes stay
   in step. */

/* ---------- TOKENS ---------- */
:root {
    --bg: #000;
    --bg-raise: #080808;
    --ink: #f7f3ec;
    --muted: rgba(247, 243, 236, 0.8);
    --faint: rgba(247, 243, 236, 0.55);
    --line: rgba(238, 233, 223, 0.1);
    /* Ocellus gold #A16E26 (KT picked 10-03): deep, warm ochre */
    --gold-rgb: 161, 110, 38;
    --gold: rgb(var(--gold-rgb));
    --gold-line: rgba(var(--gold-rgb), 0.32);
    /* Button fill: a darker, near-flat cream gold so the hover reads smooth, not shiny */
    --foil: linear-gradient(100deg, #93641f 0%, #ad7a2e 50%, #93641f 100%);
    --on-gold: #0b0906;
    --star-rgb: 238, 233, 223;
    --overlay: rgba(0, 0, 0, 0.78);
    --header-bg: rgba(0, 0, 0, 0.6);
    --card-shade: #000;
    --wip: #d9a85a;
    --ok: #8fbf8a;
    --error: #f2a5a5;
    --serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --sans: 'Space Grotesk', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);   /* popups: gentle start, long settle */
    --gutter: clamp(16px, 6vw, 96px);
    /* the reel's side margin: half a gutter, but centred at 1560px wide */
    --reel-side: max(16px, calc(var(--gutter) / 2), calc((100vw - 1560px) / 2));
    --sec-gap: clamp(120px, 16vw, 220px);
    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg: #fcefe8;
    --bg-raise: #fff6f0;
    --ink: #1c1a17;
    --muted: rgba(28, 26, 23, 0.8);    /* was 0.66/0.42: KT 10-08 "too light" on paper */
    --faint: rgba(28, 26, 23, 0.58);
    --line: rgba(28, 26, 23, 0.12);
    --gold-rgb: 124, 84, 28;
    --gold-line: rgba(var(--gold-rgb), 0.35);
    --foil: linear-gradient(100deg, #6b4818 0%, #8a5f22 50%, #6b4818 100%);
    --on-gold: #fff6f0;
    --star-rgb: 120, 105, 80;
    --overlay: rgba(28, 26, 23, 0.4);
    --header-bg: rgba(252, 239, 232, 0.78);
    --card-shade: #1f1814;
    --wip: #8a4f00;
    --ok: #25683a;
    --error: #a93226;
    color-scheme: light;
}

/* Theme switch (KT 10-03): whole-page slow crossfade, 1s — the new theme
   fades in over a still snapshot of the old one (script.js setTheme). */
html.theme-swap *, html.theme-swap *::before, html.theme-swap *::after { transition: none !important; }
::view-transition-old(root) { animation: none; }
::view-transition-new(root) { animation: theme-in 1s cubic-bezier(0.65, 0, 0.35, 1) both; mix-blend-mode: normal; }
@keyframes theme-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- BASE ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; -webkit-touch-callout: none; }
em { font-style: italic; }

html { scroll-behavior: smooth; overflow-x: clip; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.75;
    overflow-x: clip;   /* not hidden: hidden would break the reel's sticky stage */
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.6s var(--ease-io), color 0.6s var(--ease-io);
}
body.is-loading { overflow: hidden; }

main {
    position: relative;
    z-index: 2;
    -webkit-user-select: none;
    user-select: none;
}

::selection { background: rgba(var(--gold-rgb), 0.35); color: var(--ink); }
:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* ---------- ATMOSPHERE ---------- */
/* Dark: a still night sky — constellations, loose clusters, lone stars
   (luxe.js draws it). Light: no sky, just the paper and a few fireflies. */
#sky-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.8s;
}
:root[data-theme="light"] #sky-canvas { z-index: 2; }   /* fireflies float above the paper, under the content */

/* Light theme paper (KT picked 10-03): heavy rag paper with fibre flecks
   for the page itself, smoother cotton stock for the things lying on it
   (cards, popups, the reel frame) so foreground separates from background. */
.paper {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s;
    background-image: url("/static/paper-rag.svg");
    background-size: 420px 420px;
    mix-blend-mode: multiply;
}
:root[data-theme="light"] :is(.member-card, .modal-card, .svc-item, .pr-plan) {
    background-color: var(--bg-raise);
    background-image: url("/static/paper-cotton.svg");
    background-size: 360px 360px;
    box-shadow: 0 1px 2px rgba(60, 40, 20, 0.08), 0 14px 40px rgba(60, 40, 20, 0.1);
}
:root[data-theme="light"] .member-card--empty { box-shadow: 0 1px 2px rgba(60, 40, 20, 0.05), 0 10px 28px rgba(60, 40, 20, 0.06); }
/* Dark screenshots on paper: warm them and soften the contrast */
:root[data-theme="light"] :is(.reel-media img, .slide img, .svc-show img) { filter: sepia(0.22) saturate(0.9) contrast(0.88) brightness(1.06); }
:root[data-theme="light"] .reel-slide { background: #3a2c20; border-color: rgba(var(--gold-rgb), 0.25); box-shadow: 0 18px 50px rgba(60, 40, 20, 0.14); filter: brightness(0.85) sepia(0.2); opacity: 0.6; }
:root[data-theme="light"] .reel-slide.is-active { filter: none; opacity: 1; }
:root[data-theme="light"] .reel-media img { filter: sepia(0.32) saturate(0.85) contrast(0.8) brightness(1.22); }
:root[data-theme="light"] .reel-media::after {
    background:
        linear-gradient(to top, rgba(52, 34, 18, 0.78), rgba(52, 34, 18, 0.22) 38%, transparent 62%),
        linear-gradient(to right, rgba(52, 34, 18, 0.28), transparent 50%);
}
:root[data-theme="light"] .paper { opacity: 1; }
/* Soft vignette so the sheet reads as paper, not a flat fill */
:root[data-theme="light"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 60%, rgba(120, 80, 50, 0.1));
}

#scroll-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 1px;
    width: 0;
    z-index: 1200;
    background: var(--gold);
}

/* ---------- CURTAIN (intro) ---------- */
.curtain {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    transition: transform 1.1s var(--ease-io);
}
:root[data-theme="light"] .curtain { background: #fcefe8; }
.curtain.lift { transform: translateY(-100%); }
.curtain.gone { display: none; }
/* the loading constellation: 100 x 100, one slow turn every 12 s */
.curtain-sky { width: 100px; height: 100px; opacity: 0; animation: rise 0.8s var(--ease) 0.3s forwards; }
.curtain-sky g { transform-origin: 50px 50px; animation: curtain-turn 12s linear infinite; }
.curtain-sky line { stroke: var(--gold); stroke-opacity: 0.55; stroke-width: 0.8; }
.curtain-sky circle { fill: var(--ink); }
@keyframes curtain-turn { to { transform: rotate(360deg); } }
.curtain-word {
    display: flex;
    gap: 0.9em;
    font-family: var(--serif);
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    color: var(--ink);
}
.curtain-word span {
    opacity: 0;
    transform: translateY(10px);
    animation: rise 0.8s var(--ease) forwards;
}
.curtain-word span:nth-child(1) { animation-delay: 0.7s; }
.curtain-word span:nth-child(2) { animation-delay: 0.76s; }
.curtain-word span:nth-child(3) { animation-delay: 0.82s; }
.curtain-word span:nth-child(4) { animation-delay: 0.88s; }
.curtain-word span:nth-child(5) { animation-delay: 0.94s; }
.curtain-word span:nth-child(6) { animation-delay: 1s; }
.curtain-word span:nth-child(7) { animation-delay: 1.06s; }
@keyframes rise { to { opacity: 1; transform: none; } }
/* KT 10-05: "Ocellus" / "Labs" — the full name, never "Ocellus" alone (another company uses it) */
.curtain-word--sub { margin-top: -14px; color: var(--gold); font-style: italic; }
.curtain-word--sub span:nth-child(1) { animation-delay: 1.18s; }
.curtain-word--sub span:nth-child(2) { animation-delay: 1.24s; }
.curtain-word--sub span:nth-child(3) { animation-delay: 1.3s; }
.curtain-word--sub span:nth-child(4) { animation-delay: 1.36s; }

/* Opening words on the Services / Pricing curtains (KT 10-24): a slanted
   lockup in mixed sizes, script for the key words, the serif italic for the
   rest; a gold brush stroke paints under the start of line 1, then under the
   end of line 2. */
@font-face {
    font-family: 'Great Vibes';
    src: url('/static/fonts/great-vibes-latin.woff2') format('woff2');
    font-display: block;   /* the curtain is short: wait for it rather than flash a fallback */
}
.curtain--words { padding: 0 var(--gutter); text-align: center; }
/* KT 10-24: these dissolve away instead of sliding up */
.curtain--words { transition: opacity 1s var(--ease-io), filter 1s var(--ease-io); }
.curtain--words.lift { transform: none; opacity: 0; filter: blur(6px); }
.cw-lockup { --cw: clamp(2.2rem, 5.6vw, 4.6rem); transform: rotate(-6deg); display: flex; flex-direction: column; align-items: center; gap: 0.1em; }
.cw-line {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 300;
    font-size: var(--cw);
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
}
.cw-line--2 { margin-left: 1.4em; }          /* the second line steps right, down the slant */
.curtain[data-page="pricing"] .cw-line--2 { margin-top: 0.45em; margin-left: 0.6em; }   /* the tall script R clears the first stroke */
.cw-w { display: inline-block; opacity: 0; transform: translateY(0.4em) rotate(var(--r, 0deg)); animation: cw-in 0.8s var(--ease) forwards; vertical-align: baseline; }
@keyframes cw-in { to { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); } }
.cw-s { font-size: 0.55em; letter-spacing: 0.04em; }
.cw-m { font-size: 0.85em; }
.cw-l { font-size: 1.35em; }
.cw-xl { font-size: 1.9em; line-height: 0.9; }
.cw-up { position: relative; top: -0.5em; }
.cw-script { font-family: 'Great Vibes', var(--serif); font-style: normal; font-weight: 400; --r: -3deg; padding: 0 0.06em; }
.cw-gold { color: var(--gold); }
.cw-line .cw-w:nth-child(1) { animation-delay: 0.2s; }
.cw-line .cw-w:nth-child(2) { animation-delay: 0.35s; }
.cw-line .cw-w:nth-child(3) { animation-delay: 0.5s; }
.cw-line .cw-w:nth-child(4) { animation-delay: 0.65s; }
.cw-line--2 .cw-w:nth-child(1) { animation-delay: 0.8s; }
.cw-line--2 .cw-w:nth-child(2) { animation-delay: 0.95s; }
.cw-line--2 .cw-w:nth-child(3) { animation-delay: 1.1s; }
.cw-under { position: relative; display: inline-block; }
.cw-brush {
    position: absolute;
    bottom: -0.16em;
    height: 0.36em;
    z-index: -1;
    clip-path: inset(0 100% 0 0);
    animation: cw-paint 0.6s cubic-bezier(0.65, 0, 0.35, 1) 1.35s forwards;
}
/* only part of each line: the start of the first, the end of the second */
.cw-under--start .cw-brush { left: -0.15em; width: 62%; transform: rotate(1.5deg); }
.cw-under--end .cw-brush { right: -0.2em; width: 58%; bottom: -0.1em; transform: rotate(-1deg); animation-delay: 1.85s; }
.cw-brush-body { fill: var(--gold); opacity: 0.9; }
.cw-brush-dry { fill: none; stroke: #000; stroke-width: 1.6; stroke-linecap: round; opacity: 0.35; }   /* dry-brush gaps in the paint */
:root[data-theme="light"] .cw-brush-dry { stroke: #fcefe8; }
@keyframes cw-paint { to { clip-path: inset(0 0 0 0); } }
@media (max-width: 600px) { .cw-lockup { --cw: 11vw; } .cw-line--2 { margin-left: 0.8em; } }

/* ---------- HEADER ---------- */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto 1fr auto;   /* nav centres in the space between logo and buttons */
    align-items: center;
    padding: 28px var(--gutter);   /* KT 10-19: header 10px shorter came from the logo gap fix (.logo-h1) */
    transition: transform 0.6s var(--ease), background-color 0.5s, padding 0.5s var(--ease), border-color 0.5s;
    border-bottom: 1px solid transparent;
}
header.scrolled {
    padding-top: 12px;
    padding-bottom: 12px;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom-color: var(--line);
}
header.header-hidden { transform: translateY(-100%); }
header:focus-within { transform: none; }

.logo-h1 { font-size: inherit; font-weight: inherit; display: flex; align-items: center; }   /* flex: no gap under the logo, so it sits at the header's vertical centre (KT 10-19) */
.logo {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.45rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.logo em { font-weight: 400; color: var(--gold); }
/* Lockup: curved feather, "Ocellus" over an indented "Labs"; the feather's
   tips brush the O without overlapping it */
.logo { display: inline-flex; align-items: center; line-height: 1; }
.logo-feather { height: 3.4em; width: auto; margin: -0.2em -0.55em 0 -0.35em; flex: none; transform: rotate(-38deg); }
.logo-text { display: flex; flex-direction: column; gap: 0.18em; font-size: 0.86em; letter-spacing: 0.19em; }
/* Initials O and L stand taller than the rest of the word */
.logo-text > span::first-letter, .logo-text em::first-letter { font-size: 1.45em; letter-spacing: 0.12em; }
.logo-text em { padding-left: 1.7em; }
.top-nav { display: flex; justify-self: center; gap: clamp(18px, 1.9vw, 56px); }
.top-nav a {
    position: relative;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    white-space: nowrap;
    transition: color 0.4s;
}
.top-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.6s var(--ease);
}
.top-nav a:hover, .top-nav a.active { color: var(--ink); }
.top-nav a:hover::after, .top-nav a.active::after { transform: scaleX(1); transform-origin: left; }

.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 18px;
}

/* Outline pill that fills with soft gold from below on hover */
.services-btn, .lx-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    padding: 13px 26px;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    font-size: 1.05rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--ink);
    transition: color 0.45s var(--ease-io), border-color 0.45s var(--ease-io);
}
/* header Services button: 25% smaller than the CTA buttons (KT 10-03) */
header .services-btn { padding: 10px 20px; font-size: 0.79rem; font-weight: 700; }   /* bold: KT 10-08 */
.services-btn::before, .lx-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--foil);
    transform: translateY(101%);
    border-radius: inherit;
    transition: transform 0.55s var(--ease-io);
}
.services-btn span, .lx-btn span { position: relative; }
.services-btn:hover, .lx-btn:hover { color: var(--on-gold); border-color: transparent; }
.services-btn:hover::before, .lx-btn:hover::before { transform: none; }

.menu-btn {
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 7px;
}
.menu-btn span {
    display: block;
    height: 1px;
    width: 26px;
    background: var(--ink);
    transition: width 0.25s var(--ease);
}
.menu-btn span:last-child { width: 16px; }
.menu-btn:hover span:last-child { width: 26px; }

/* ---------- SIDE PANEL ---------- */
.side-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: var(--overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.side-panel {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1600;
    height: 100%;
    width: 360px;
    max-width: 88vw;
    display: flex;
    flex-direction: column;
    padding: 22px 34px 34px;
    background: var(--bg-raise);
    border-left: 1px solid var(--gold-line);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.8s var(--ease), visibility 0s linear 0.8s, background-color 0.6s var(--ease-io), border-color 0.6s var(--ease-io), color 0.6s var(--ease-io);
}
body.side-open .side-overlay { opacity: 1; visibility: visible; }
body.side-open .side-panel {
    transform: none;
    visibility: visible;
    transition: transform 0.8s var(--ease), visibility 0s, background-color 0.6s var(--ease-io), border-color 0.6s var(--ease-io), color 0.6s var(--ease-io);
}
.side-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 22px;
    margin-bottom: 18px;
}
.theme-toggle, .side-close {
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: border-color 0.35s var(--ease-io), color 0.35s var(--ease-io);
}
.side-close { font-size: 1.4rem; line-height: 1; }
.theme-toggle:hover, .side-close:hover { border-color: var(--gold); color: var(--gold); }
.side-panel nav { overflow-y: auto; overflow-x: hidden; }
.side-panel nav ul { list-style: none; }
.side-panel nav a {
    display: block;
    padding: 11.25px 0;   /* KT 10-05: +25% space between items */
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    transform: translateX(30px);
    opacity: 0;
    transition: color 0.6s var(--ease-io), transform 0.8s var(--ease), opacity 0.8s var(--ease), padding-left 0.5s var(--ease);
}
body.side-open .side-panel nav a { transform: none; opacity: 1; }
body.side-open .side-panel nav li:nth-child(2) a { transition-delay: 0s, 0.04s, 0.04s, 0s; }
body.side-open .side-panel nav li:nth-child(3) a { transition-delay: 0s, 0.08s, 0.08s, 0s; }
body.side-open .side-panel nav li:nth-child(4) a { transition-delay: 0s, 0.12s, 0.12s, 0s; }
body.side-open .side-panel nav li:nth-child(5) a { transition-delay: 0s, 0.16s, 0.16s, 0s; }
body.side-open .side-panel nav li:nth-child(6) a { transition-delay: 0s, 0.2s, 0.2s, 0s; }
body.side-open .side-panel nav li:nth-child(7) a { transition-delay: 0s, 0.24s, 0.24s, 0s; }
body.side-open .side-panel nav li:nth-child(8) a { transition-delay: 0s, 0.28s, 0.28s, 0s; }
.side-panel nav a:hover, .side-panel nav a.active { color: var(--gold); padding-left: 8px; }
.side-soon-label {
    margin: 30px 0 4px;
    font-size: 0.96rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--faint);
}
.side-panel .side-soon { list-style: none; }
.side-panel .side-soon a { font-size: 1.1rem; color: var(--muted); }
.side-panel .side-soon li { padding: 6px 0; font-family: var(--serif); font-size: 1.15rem; color: var(--faint); cursor: default; }
/* Services & Advisory + Pricing stand out in gold in the side menu (KT 10-05) */
.side-panel nav a.side-gold { color: var(--gold); }
.side-foot {
    margin-top: auto;
    padding-top: 24px;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--muted);
}
.side-foot em { color: var(--gold); }

/* ---------- SHARED SECTION TYPE ---------- */
.eyebrow, .mc-label, .mc-role {
    font-size: 1.05rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

section { position: relative; padding: var(--sec-gap) var(--gutter) 0; }

.sec-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 40px;
    margin-bottom: clamp(36px, 5vw, 64px);
}
.sec-title {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(2.2rem, 4.4vw, 3.8rem);
    line-height: 1;
    letter-spacing: -0.01em;
}
.sec-title em { color: var(--gold); font-weight: 300; }
.sec-head--inline { justify-content: flex-start; align-items: flex-end; }
.sec-head--inline .sec-aside { padding-bottom: 0.35em; }
.sec-aside { max-width: 360px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
.sec-aside--wide { max-width: none; }   /* KT 10-19: members note on two lines */
@media (max-width: 700px) { .sec-aside--wide br { display: none; } }

/* Reveal on scroll (script.js adds .visible) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ---------- HERO ---------- */
.first-screen {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}
.hero {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 150px;
    padding-bottom: 60px;
    overflow: hidden;
}
.eyebrow { color: var(--gold); margin-bottom: 30px; }
.hero .eyebrow { font-size: 0.9rem; }
/* KT 10-05: desktop only, 'Independent' a little bigger; phones keep the original size */
@media (min-width: 761px) { .hero .eyebrow .eb-big { font-size: 1.15em; } }
.hero-title {
    position: relative;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(3.6rem, 10vw, 9.5rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
}
.hero-title .mask { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.14em; }
.hero-title .mask > * { display: inline-block; }
.hero-title em { font-weight: 300; padding-left: 0.6em; color: var(--gold); }
.hero-title .tilde { color: var(--faint); font-size: 0.4em; vertical-align: 0.9em; margin-left: 0.15em; }
/* KT 10-25: two headlines in one spot, taking turns (hero-cycle.js) */
.hero-slides { display: grid; }
.hero-slide { grid-area: 1 / 1; display: block; align-self: center; }
.hero-slide:not(.is-on):not(.is-out) { visibility: hidden; }
.hero-slide--b { font-size: 0.68em; line-height: 1; }
.hero-title .hc { display: inline-block; transform: translateY(110%); opacity: 0;
    transition: transform 0.9s var(--ease), opacity 0.9s var(--ease); transition-delay: calc(var(--i) * 32ms); }
.hero-slide.is-on .hc { transform: none; opacity: 1; }
.hero-slide.is-out .hc { transform: translateY(-110%); opacity: 0; }
.hero-slide:not(.is-on):not(.is-out) .hc { transition: none; }
@media (max-width: 600px) { .hero-slide--b { font-size: 0.62em; } }
.hero-lede {
    position: relative;
    max-width: 460px;
    margin-top: 56px;
    color: var(--muted);
    font-size: 1rem;
}
.hero-dream {
    margin-bottom: 14px;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.25;
    color: var(--ink);
}
.hero-dream em { color: var(--gold); }
:root[data-theme="light"] .hero-lede { color: var(--ink); }   /* KT: black text on the cream page */
/* Staggered entrance; held until the curtain lifts (body.is-ready) */
.hero-in {
    opacity: 0;
    transform: translateY(105%);
    transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
    transition-delay: calc(var(--d) * 0.12s + 0.1s);
}
.eyebrow.hero-in, .hero-lede { transform: translateY(20px); }
body.is-ready .hero-in { opacity: 1; transform: none; }
/* Codex feather handoff: docs/FEATHER_HANDOFF.md. KT: rooted wind-sway, 100px left. */
.hero-feather {
    position: absolute;
    top: calc(56% - 30px);   /* KT 10-05: 30px up */
    right: calc(clamp(12px, 9vw, 180px) + 320px);   /* KT 10-05: +150px left, then 30px back right */
    height: min(68vh, 620px);
    aspect-ratio: 461 / 900;
    translate: 0 -50%;
    rotate: 8deg;               /* KT 10-05: leans right, pivoting on the rooted stem */
    transform-origin: 50% 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2s var(--ease) 0.6s;
}
body.is-ready .hero-feather { opacity: 1; }
@media (max-width: 1360px) { .hero-feather { right: calc(clamp(12px, 9vw, 180px) + 170px); } }  /* smaller laptops: the extra 150px would cover "made real" */
/* Original mirrored artwork is the no-WebGL fallback; reduced motion uses a still canvas. */
.hf-drift, .hf-sway { width: 100%; height: 100%; }
.hero-feather img { display: block; width: 100%; height: 100%; transform: scaleX(-1); }
.feather-simulation {
    display: none;
    position: absolute;
    width: 190%; height: 120%;
    left: -45%; top: -10%;
    pointer-events: none;
}
.has-feather-simulation > .hf-drift { visibility: hidden; }
.has-feather-simulation > .feather-simulation { display: block; }
@media (max-width: 900px) {
    .hero-feather { top: 130px; translate: none; height: min(42vh, 360px); right: 108px; opacity: 0; }
    body.is-ready .hero-feather { opacity: 0.55; }
    .hero-title, .hero-lede { z-index: 1; }
}

/* ---------- MARQUEE ---------- */
.marquee {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 30px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: marquee 70s linear infinite;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(1.15rem, 1.9vw, 1.65rem);
    white-space: nowrap;
    color: var(--muted);
}
.marquee-track b { display: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- LATEST PROJECTS + REEL ---------- */
/* A sliding carousel in normal flow: it never holds the scroll. The focused
   slide sits in the centre; its neighbours wait behind it, smaller and
   dimmed, on their own side (KT 10-03). Advances on a timer; thin bars show
   which slide is up and the time left. */
.reel {
    padding: var(--sec-gap) var(--reel-side) 0;
}
/* Projects are their own view now (KT 10-24): the Projects link hides the
   home and shows this in its place. The view itself is exactly one screen
   (title centred on top, the index of every project on the left, the
   slideshow on the right); the footer with "Got an idea?" follows below. */
body:not(.view-projects) .projects-view { display: none; }
body.view-projects main.home > :not(.projects-view) { display: none; }
.projects-view.reel {
    height: 100vh;
    height: 100svh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: clamp(118px, 15vh, 150px) var(--reel-side) clamp(24px, 4.5vh, 48px);
}
.projects-view .reel-head { text-align: center; margin: 0 0 clamp(22px, 4.5vh, 48px); }
/* the index column runs from the page edge to the slideshow, and the
   list sits centred in it */
.pv-body {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: calc(var(--reel-side) + clamp(260px, 24vw, 380px)) 1fr;
    margin-left: calc(-1 * var(--reel-side));
}
/* the slide up front sits left; only the next one peeks out on the right,
   dimmed and blurred behind it */
.projects-view .reel-frame { height: auto; min-height: 0; --slide-w: 87%; overflow: hidden; }
.projects-view .reel-slide { left: 0; transform: translateX(calc(var(--pos) * 24%)) scale(0.8); }
.projects-view .reel-slide:not(.is-active) { opacity: 0.8; filter: brightness(0.62) blur(2.5px); }
.projects-view .reel-slide.is-active { transform: none; filter: none; }
.projects-view .reel-slide.is-before, .projects-view .reel-slide.is-far {
    opacity: 0; visibility: hidden; transform: translateX(-6%) scale(0.92);
    transition: transform 1.1s var(--ease-io), opacity 0.8s var(--ease-io), filter 1.1s var(--ease-io), visibility 0s 1.1s;
}
.projects-view .reel-slide:not(.is-active):hover { opacity: 0.95; filter: brightness(0.8) blur(1.5px); }
.projects-view .reel-arrow.prev { left: 16px; }
.projects-view .reel-arrow.next { right: auto; left: calc(var(--slide-w) - 68px); }
.projects-view .reel-count, .projects-view .reel-hint, .projects-view .reel-bars { right: calc(100% - var(--slide-w) + clamp(22px, 4vw, 60px)); }

/* the index: each name brings up its slide; the one showing is gold, with a
   line beside it that fills while its slide is up */
.pv-index { list-style: none; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; justify-self: center; width: min(310px, calc(100% - 40px)); }
.pv-index button {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 2.4em 1fr;
    gap: 2px 10px;
    padding: 14px 0 14px 16px;
    text-align: left;
    opacity: 0.78;
    transition: opacity 0.3s;
}
.pv-index button::before, .pv-index button::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 2px;
    background: var(--line);
}
.pv-index button::after { background: var(--gold); transform: scaleY(0); transform-origin: top; }
.pv-index button:hover, .pv-index button:focus-visible, .pv-index button.is-active { opacity: 1; }
.pv-index button.is-active::after { transform: scaleY(1); }
.pv-index button.is-on::after { transform: scaleY(0); animation: pv-fill var(--dwell, 6.5s) linear forwards; }
@keyframes pv-fill { to { transform: scaleY(1); } }
.pvi-num { grid-row: span 2; padding-top: 0.35em; font-family: var(--mono); font-size: 0.95rem; color: var(--gold); }
.pvi-name { font-family: var(--serif); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.2; color: var(--ink); }
.pvi-name em { color: var(--gold); }
.pv-index button.is-active .pvi-name { color: var(--gold); }
.pvi-state { font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pvi-state.wip { color: var(--wip); }
.pvi-state.done { color: var(--ok); }

/* slides with no pictures yet: near-black with a thin gold line drawing
   (KT 10-24: the plain brown glow looked muddy) */
.reel-slide--plain .reel-media { background: #070706; }
.reel-slide--plain .reel-media img { object-position: right center; }

/* phones: the index becomes a row of names above the slideshow */
@media (max-width: 760px) {
    .projects-view.reel { padding-top: 104px; padding-bottom: 20px; }
    .projects-view .reel-head { margin-bottom: 16px; }
    .pv-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 14px; margin-left: 0; }
    .pv-index { flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 8px; scrollbar-width: none; justify-self: stretch; width: auto; max-width: none; }
    .projects-view .reel-frame { --slide-w: 90%; }
    .projects-view .reel-arrow.prev { left: auto; right: calc(100% - var(--slide-w) + 64px); }
    .projects-view .reel-arrow.next { left: auto; right: calc(100% - var(--slide-w) + 14px); }
    .projects-view .reel-count { right: auto; left: 20px; }
    .projects-view .reel-hint { right: calc(100% - var(--slide-w) + 20px); }
    .projects-view .reel-bars { right: auto; left: 20px; }
    .pv-index li { flex: 0 0 auto; }
    .pv-index button { display: block; width: auto; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; }
    .pv-index button::before, .pv-index button::after, .pvi-num, .pvi-state { display: none; }
    .pvi-name { font-size: 1rem; white-space: nowrap; }
    .pv-index button.is-active { border-color: var(--gold); }
}
.reel-head { margin: 0 0 clamp(18px, 2.4vw, 28px); }
.reel-frame {
    position: relative;
    /* one screen holds the title + the whole frame, at any size */
    --head-h: calc(clamp(2.2rem, 4.4vw, 3.8rem) + clamp(18px, 2.4vw, 28px));
    height: clamp(240px, calc(100vh - var(--head-h) - 40px), 860px);
    height: clamp(240px, calc(100svh - var(--head-h) - 40px), 860px);
    --slide-w: 72%;
    --edge: calc((100% - var(--slide-w)) / 2);   /* gap from frame edge to the focused slide */
}
.reel-slide {
    --pos: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--edge);
    width: var(--slide-w);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--line);
    border-radius: 18px;
    cursor: pointer;
    outline: none;
    z-index: 1;
    opacity: 0.55;
    filter: brightness(0.5);
    transform: translateX(calc(var(--pos) * 46%)) scale(0.8);
    transition: transform 1.1s var(--ease-io), opacity 1.1s var(--ease-io), filter 1.1s var(--ease-io), visibility 0s;
}
.reel-slide.is-active { z-index: 3; opacity: 1; filter: none; transform: none; }
.reel-slide.is-far { z-index: 0; opacity: 0; visibility: hidden; transform: translateX(calc(var(--pos) * 46%)) scale(0.65); transition: transform 1.1s var(--ease-io), opacity 1.1s var(--ease-io), filter 1.1s var(--ease-io), visibility 0s 1.1s; }
.reel-slide:not(.is-active):hover { opacity: 0.75; filter: brightness(0.65); }
.reel-media { position: absolute; inset: 0; overflow: hidden; }
.reel-media img { transform: scale(1.07); transition: transform 7.5s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: transform; }
.reel-slide.is-active .reel-media img { transform: scale(1); }
.reel-media img { width: 100%; height: 100%; object-fit: cover; }
.reel-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.3) 36%, transparent 60%),
        linear-gradient(to right, rgba(0, 0, 0, 0.4), transparent 50%);
}
.reel-info {
    position: absolute;
    left: clamp(22px, 4vw, 60px);
    bottom: clamp(24px, 6vh, 56px);
    z-index: 2;
    max-width: min(760px, 80vw);
    color: #eee9df;
}
.reel-info > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reel-slide.is-active .reel-info > * { opacity: 1; transform: none; }
.reel-slide.is-active .reel-info > :nth-child(2) { transition-delay: 0.06s; }
.reel-slide.is-active .reel-info > :nth-child(3) { transition-delay: 0.12s; }
.reel-status {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(238, 233, 223, 0.8);
}
.reel-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.reel-status.wip::before { background: #d9a85a; animation: pulse 2.4s infinite; }
.reel-status.done::before { background: #8fbf8a; }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(217, 168, 90, 0.6); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(217, 168, 90, 0); }
}
.reel-name {
    margin: 14px 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(2rem, 4.2vw, 4rem);
    line-height: 1;
    letter-spacing: -0.01em;
}
.reel-name em { color: rgb(161, 110, 38); }
.reel-line { font-size: 1.08rem; color: rgba(238, 233, 223, 0.8); }
.reel-line span { color: rgb(161, 110, 38); margin: 0 6px; }
.reel-count, .reel-hint {
    position: absolute;
    right: calc(var(--edge) + clamp(22px, 4vw, 60px));
    z-index: 4;
    font-family: var(--mono);
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    color: rgba(238, 233, 223, 0.65);
    pointer-events: none;
    transition: opacity 0.6s;
}
.reel-count { bottom: clamp(24px, 6vh, 56px); }
.reel-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border-radius: 50%;
    font-size: 1.1rem;
    color: #f3efe6;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(161, 110, 38, 0.35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0.75;
    transition: opacity 0.15s, border-color 0.15s, color 0.15s, transform 0.25s var(--ease);
}
.reel-arrow.prev { left: calc(var(--edge) - 26px); }
.reel-arrow.next { right: calc(var(--edge) - 26px); }
.reel-frame:hover .reel-arrow { opacity: 1; }
.reel-arrow:hover { border-color: rgb(161, 110, 38); color: rgb(161, 110, 38); }
.reel-arrow.prev:hover { transform: translateX(-3px); }
.reel-arrow.next:hover { transform: translateX(3px); }
.reel-bars {
    position: absolute;
    right: calc(var(--edge) + clamp(22px, 4vw, 60px));
    bottom: calc(clamp(24px, 6vh, 56px) + 56px);
    z-index: 4;
    display: flex;
    gap: 6px;
}
.reel-bars i { position: relative; width: 34px; height: 2px; overflow: hidden; background: rgba(238, 233, 223, 0.22); border-radius: 2px; }
.reel-bars i::after { content: ''; position: absolute; inset: 0; background: rgb(161, 110, 38); transform: scaleX(0); transform-origin: left; }
.reel-bars i.is-on::after { transform: scaleX(1); transition: transform var(--dwell, 6.5s) linear; }
.reel-bars i.is-done::after { transform: scaleX(1); }
.reel-frame.is-paused .reel-bars i.is-on::after { transition: none; }
.reel-count b { color: rgb(161, 110, 38); font-weight: 400; }
.reel-hint { bottom: calc(clamp(24px, 6vh, 56px) + 24px); text-transform: uppercase; font-size: 1.05rem; letter-spacing: 0.2em; }

/* ---------- ALL PROJECTS (compact list) ---------- */
/* lines up under the reel frame on very wide screens */
.list-sec { padding-left: max(var(--gutter), var(--reel-side)); padding-right: max(var(--gutter), var(--reel-side)); }
.list-sec { padding-top: clamp(50px, 6vw, 80px); }
.proj-list { list-style: none; }
.proj-row {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 40px;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
    text-align: left;
}
.pr-name {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.35rem, 2.1vw, 1.75rem);
    line-height: 1.2;
    transition: transform 0.7s var(--ease), color 0.4s;
}
.proj-row:hover .pr-name, .proj-row:focus-visible .pr-name { transform: translateX(10px); color: var(--gold); }
.pr-state {
    font-family: var(--mono);
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}
.pr-state.wip { color: var(--wip); }
.pr-state.done { color: var(--ok); }
.pr-state.planned { color: var(--faint); }
.pr-arrow {
    justify-self: end;
    color: var(--gold);
    opacity: 0.8;   /* KT 10-05: was 0.4, invisible on phones (no hover) */
    transform: translateX(-8px);
    transition: transform 0.45s var(--ease), opacity 0.15s;
}
.proj-row:hover .pr-arrow { opacity: 1; transform: none; }
.proj-list .reveal:nth-child(2) { transition-delay: 0.06s; }
.proj-list .reveal:nth-child(3) { transition-delay: 0.12s; }
.proj-list .reveal:nth-child(4) { transition-delay: 0.18s; }

/* ---------- ABOUT ---------- */
.about-sec { padding-top: clamp(80px, 9vw, 130px); padding-bottom: var(--sec-gap); }
/* Members / About links land with the title just under the header, not a
   whole section-gap of empty sky above it (KT 10-24) */
#members { scroll-margin-top: calc(66px - var(--sec-gap)); }
#about { scroll-margin-top: calc(130px - clamp(80px, 9vw, 130px)); }
.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}
.about-side { padding: 0 clamp(28px, 5vw, 80px); }
.about-side:first-child { padding-left: 0; }
.about-side:last-child { padding-right: 0; }
.about-pro { border-left: 1px dashed var(--gold-line); }
.about-kicker {
    font-size: 1.12rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 1.2em;
}
.about-statement {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(2rem, 3.2vw, 3rem);
    line-height: 1.12;
    margin-bottom: 0.7em;
}
.about-statement em { color: var(--gold); }
.about-body { padding-top: 0.6em; }
.about-body > :last-child { margin-bottom: 0; }
.about-body p { color: var(--muted); margin-bottom: 1.1em; }
.about-note { padding-top: 0.6em; font-size: 0.95rem; }
.about-note strong { font-weight: 500; color: var(--ink); }
.about-links { display: flex; gap: 14px; padding-top: 0.6em; }
.about-links a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.about-links a:hover { border-bottom-color: var(--gold); }
.about-links span { color: var(--faint); }
.about-nudge {
    position: fixed; left: 50%; bottom: 22px; z-index: 1100;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 8px 8px 20px; border: 1px solid var(--gold-line); border-radius: 999px;
    background: var(--bg-raise);
    transform: translate(-50%, 16px); opacity: 0; transition: transform 0.45s ease, opacity 0.45s ease;
    max-width: calc(100vw - 32px);
}
.about-nudge.visible { transform: translate(-50%, 0); opacity: 1; }
.an-link { color: var(--ink); text-decoration: none; font-size: 0.95rem; white-space: nowrap; }
.an-link em { font-family: var(--serif); font-size: 1.1rem; color: var(--gold); }
.an-close { background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.an-close:hover { color: var(--ink); }
.about-code { margin-top: clamp(70px, 8vw, 120px); padding-top: clamp(50px, 6vw, 80px); border-top: 1px dashed var(--gold-line); }
.code-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.2vw, 3rem); line-height: 1.12; margin-bottom: 1.2em; }
.code-title em { color: var(--gold); }
.code-list { list-style: none; counter-reset: code; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 3.5vw, 52px) clamp(28px, 4vw, 64px); padding: 0; margin: 0; }
.code-list li { counter-increment: code; }
.code-list li::before { content: counter(code, decimal-leading-zero); display: block; font-size: 0.78rem; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 0.8em; }
.code-list h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: var(--ink); margin: 0 0 0.4em; }
.code-list p { color: var(--muted); margin: 0; }
.code-foot { margin-top: clamp(36px, 4vw, 56px); font-size: 0.95rem; color: var(--muted); }
.code-foot a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-line); }

/* ---------- MEMBERS ---------- */
.cards { overflow: hidden; }
#member-track {
    list-style: none;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 4px 2px 8px;
}
#member-track::-webkit-scrollbar { display: none; }
/* Member card (the Services-page card, made premium): centred portrait,
   name, contacts and projects as capsules. Sits on the page's own black. */
.member-card {
    position: relative;
    /* fixed size: on big screens the cards used to grow to fill the row */
    flex: 0 0 clamp(250px, calc((100% - 4 * 20px) / 5), 340px);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 20px 28px;
    border: 1px solid var(--gold-line);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.05), transparent 45%);
    transition: border-color 0.5s, transform 0.8s var(--ease);
}
.member-card:not(.member-card--empty):hover { transform: translateY(-6px); border-color: rgba(var(--gold-rgb), 0.6); }
.member-avatar {
    width: 100px;
    height: 100px;
    margin-bottom: 16px;
    border-radius: 50%;
    object-fit: cover;
    padding: 4px;
    border: 1.5px solid var(--gold);
}
.member-tag { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.member-about { margin-top: 4px; font-family: var(--serif); font-size: 1.08rem; line-height: 1.4; color: var(--muted); }
.member-contact { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 22px 0 22px; }
.mc-label { font-size: 1.05rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.member-projects { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cap {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 1.05rem;
    line-height: 1.3;
    text-decoration: none;
    color: var(--ink);
    transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}
.cap:hover { border-color: var(--gold-line); color: var(--gold); }
.cap--gold { border-color: var(--gold-line); color: var(--gold); }
.cap--gold:hover { background: rgba(var(--gold-rgb), 0.08); }
.member-card--empty {
    justify-content: center;
    gap: 18px;
    border-color: var(--gold-line);   /* KT 10-05: gold tint like the filled cards */
    border-style: dashed;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.05), transparent 45%);
    color: var(--faint);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.15rem;
}
.mc-ghost { width: 100px; height: 100px; border-radius: 50%; border: 1px dashed var(--gold-line); }
.member-card[hidden] { display: none; }

/* KT 10-19: one card fixed in the centre, the open seats orbit behind it.
   Only transforms and opacity animate (GPU), so it stays cheap on old laptops. */
.members-orbit {
    --orbit-r: clamp(420px, 38vw, 680px);   /* sideways reach follows the screen width */
    --orbit-depth: 0.5;                      /* front-to-back squash: an oval, not a circle */
    --orbit-w: 230px;
    --orbit-h: 330px;
    --orbit-t: 52s;
    --orbit-tilt: -9deg;
    position: relative;
    padding: 64px 0 150px;   /* room under the card for the front of the ring */
    overflow: hidden;
}
.members-orbit #member-track { position: relative; z-index: 1; justify-content: center; overflow: visible; padding: 0; }
.members-orbit .member-card { flex-basis: 360px; max-width: 100%; background-color: var(--bg); padding: 40px 24px 34px; }
.members-orbit .member-avatar { width: 116px; height: 116px; }
.orbit { position: absolute; inset: 0; perspective: 1700px; pointer-events: none; }
.orbit-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform-style: preserve-3d;
    transform: rotateX(var(--orbit-tilt)) scale3d(1, 1, var(--orbit-depth));
}
.orbit-spin {
    transform-style: preserve-3d;
    transform: rotateY(-45deg);
    animation: orbit-spin var(--orbit-t) linear infinite;
}
@keyframes orbit-spin { to { transform: rotateY(-405deg); } }
.orbit-card {
    position: absolute;
    width: var(--orbit-w);
    height: var(--orbit-h);
    margin: calc(var(--orbit-h) / -2) 0 0 calc(var(--orbit-w) / -2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border: 1px dashed var(--gold-line);
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.07), transparent 55%), var(--bg);
    /* brighter at the sides, dimmer as it passes round the back */
    animation: orbit-depth var(--orbit-t) linear infinite;
}
@keyframes orbit-depth {
    0%, 100% { opacity: 0.85; }
    25%, 75% { opacity: 0.8; }
    50% { opacity: 0.3; }
}
/* 4 seats, 90deg apart; the delays keep each card's fade in step with where it is */
.orbit-card:nth-child(1) { transform: rotateY(0deg) translateZ(var(--orbit-r)); animation-delay: calc(var(--orbit-t) * -0.125); }
.orbit-card:nth-child(2) { transform: rotateY(90deg) translateZ(var(--orbit-r)); animation-delay: calc(var(--orbit-t) * -0.875); }
.orbit-card:nth-child(3) { transform: rotateY(180deg) translateZ(var(--orbit-r)); animation-delay: calc(var(--orbit-t) * -0.625); }
.orbit-card:nth-child(4) { transform: rotateY(270deg) translateZ(var(--orbit-r)); animation-delay: calc(var(--orbit-t) * -0.375); }
.members-orbit.is-paused :is(.orbit-spin, .orbit-card) { animation-play-state: paused; }
/* Blurred faces + name bars: SimpleSip (a tease) and stand-ins for future
   members. The images are pre-blurred, nothing readable. */
.orbit-card img { width: 46%; height: auto; aspect-ratio: 1; border-radius: 50%; opacity: 0.6; box-shadow: 0 0 24px 10px var(--bg); }
.ot-line { width: 58%; height: 10px; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.3), transparent); }
.ot-line--short { width: 38%; height: 7px; margin-top: -6px; opacity: 0.7; }
:root[data-theme="light"] .orbit-card { background: url("/static/paper-cotton.svg") 0 0 / 360px 360px, var(--bg-raise); }
/* laptops and up: everything 15% taller (KT 10-19) */
@media (min-width: 1101px) {
    .members-orbit { --orbit-h: 380px; }
    .members-orbit .member-card { min-height: 530px; justify-content: center; }
}
@media (max-width: 700px) {
    /* phone: the card fills the width, so the oval rides higher, round the
       top of the card like a halo, and reaches the screen edges */
    .members-orbit { --orbit-r: 50vw; --orbit-depth: 0.6; --orbit-w: 140px; --orbit-h: 210px; --orbit-tilt: -14deg; padding: 150px 0 40px; }
    .orbit-ring { top: 170px; }
    .members-orbit .member-card { flex-basis: min(280px, 100% - 72px); padding: 32px 18px 28px; }
    .members-orbit .member-avatar { width: 100px; height: 100px; }
    .orbit { perspective: 950px; }
}
@media (prefers-reduced-motion: reduce) {
    .orbit-spin, .orbit-card { animation: none !important; }
    .orbit-card { opacity: 0.8; }
}

/* ---------- FOOTER (holds the idea pitch + donate / sponsor) ---------- */
footer {
    position: relative;
    z-index: 2;
    padding: clamp(64px, 8vw, 110px) var(--gutter) 26px;
    overflow: hidden;
}
.foot-ask {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(40px, 7vw, 120px);
    align-items: center;
    padding-bottom: clamp(40px, 5vw, 70px);
}
.foot-kicker {
    font-family: var(--mono);
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}
.foot-pitch {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.9rem, 3.4vw, 3rem);
    line-height: 1.12;
    max-width: 640px;
}
.foot-pitch em { color: var(--gold); }
.foot-note { margin: 14px 0 26px; color: var(--muted); }
@media (max-width: 640px) { .code-list { grid-template-columns: 1fr; } }
.foot-support { display: grid; gap: 4px; }
.support-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    padding: 14px 0;
    text-align: left;
    text-decoration: none;
}
.sl-kicker { color: var(--muted); font-size: 1rem; transition: color 0.4s; }
.sl-title { font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1; transition: color 0.4s; }
.sl-title i { font-style: normal; font-family: var(--sans); font-size: 0.6em; color: var(--gold); display: inline-block; margin-left: 10px; transition: transform 0.6s var(--ease); }
.support-link:hover .sl-title { color: var(--gold); }
.support-link:hover .sl-title i { transform: translateX(6px); }

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
}
.footer-line { font-family: var(--serif); font-size: 1.4rem; font-weight: 300; }
.footer-line em { color: var(--gold); }
.footer-links { display: flex; flex-wrap: wrap; gap: 12px 30px; }
.footer-links a {
    font-size: 1.05rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--muted);
    transition: color 0.3s;
}
.footer-links a:hover { color: var(--gold); }
/* Bottom line: copyright | big wordmark | MSME note, all on one centre
   line, so the small text sits beside the wordmark rather than under it */
.footer-base {
    display: grid;
    grid-template-columns: 0.75fr auto 1.25fr;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    margin-top: clamp(28px, 4vw, 48px);
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--faint);
}
.footer-base .copyright-reg { text-align: right; }
.footer-wordmark {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 1.05;
    padding-bottom: 0.08em;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-align: center;
    background: linear-gradient(to bottom, rgba(var(--gold-rgb), 0.45), rgba(var(--gold-rgb), 0.08) 92%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-user-select: none;
    user-select: none;
}
/* Plain copyright row (services + other pages without the wordmark) */
.copyright {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 30px;
    padding-top: 10px;
    font-size: 1.05rem;
    color: var(--faint);
}
:root[data-theme="light"] .footer-wordmark { background-image: linear-gradient(to bottom, rgba(var(--gold-rgb), 0.8), rgba(var(--gold-rgb), 0.12) 92%); }

/* ---------- TOAST ---------- */
.toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    z-index: 9600;
    max-width: calc(100vw - 32px);
    padding: 14px 26px;
    background: var(--bg-raise);
    border: 1px solid var(--gold-line);
    font-size: 1.05rem;
    transform: translate(-50%, 30px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.6s var(--ease), opacity 0.4s;
}
.toast.visible { transform: translate(-50%, 0); opacity: 1; }
.toast.error { border-color: var(--error); color: var(--error); }

/* ---------- MODAL ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--overlay);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s var(--ease);
}
.modal-overlay[hidden] { display: flex; }
.modal-overlay.visible { opacity: 1; pointer-events: auto; }
.modal-card {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-raise);
    border: 1px solid var(--gold-line);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
    transform: translateY(40px);
    transition: transform 0.8s var(--ease);
    -webkit-user-select: text;
    user-select: text;
}
.modal-overlay.visible .modal-card { transform: none; }
.modal-card--wide { max-width: min(1500px, 94vw, calc((94vh - 90px) * 1.7778)); max-height: 94vh; }
.modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    color: #f3efe6;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(161, 110, 38, 0.35);
    transition: transform 0.35s var(--ease), border-color 0.15s;
}
.modal-close:hover { transform: rotate(90deg); border-color: rgb(161, 110, 38); }
.modal-scroll {
    overflow-y: auto;
    padding: 48px 40px 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--gold-line) transparent;
}
.modal-actions:not([hidden]) {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 18px 40px;
    border-top: 1px solid var(--line);
}
.modal-actions .modal-actions { padding: 0; border: 0; }
.proj-open, .proj-share, .proj-sponsor {
    padding: 11px 24px;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    font-size: 1.05rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.proj-open { background: var(--foil); color: var(--on-gold); border-color: transparent; }

.proj-share:hover, .proj-sponsor:hover { border-color: var(--gold); color: var(--gold); }

.proj-badge {
    display: inline-block;
    padding: 5px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.96rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--muted);
}
.proj-badge.wip { color: var(--wip); border-color: currentColor; }
.proj-badge.done { color: var(--ok); border-color: currentColor; }
.proj-badge.planned { color: var(--gold); border-color: currentColor; }
.modal-title {
    margin: 14px 0 18px;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.05;
}
.proj-facts { margin: 0 0 24px; border-top: 1px solid var(--line); }
.proj-facts div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
}
.proj-facts dt { font-size: 0.96rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); padding-top: 4px; }
.proj-facts a { color: var(--gold); }
.modal-copy p { color: var(--muted); margin-bottom: 1em; }
.modal-copy strong { color: var(--ink); font-weight: 500; }
.proj-features { list-style: none; margin: 4px 0 20px; }
.proj-features li {
    position: relative;
    padding: 12px 0 12px 26px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.95rem;
}
.proj-features li::before { content: '✦'; position: absolute; left: 0; top: 12px; font-size: 0.7rem; color: var(--gold); }
.proj-features strong { color: var(--ink); font-weight: 500; }
.proj-more { margin: 10px 0 20px; border: 1px solid var(--line); padding: 0 20px; }
.proj-more summary {
    padding: 16px 0;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--gold);
}
.modal-warning-box {
    margin: 10px 0 20px;
    padding: 22px 24px;
    border-left: 2px solid var(--wip);
    background: rgba(232, 160, 32, 0.06);
}
.modal-warning-label { font-size: 1.02rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--wip); margin-bottom: 12px; }
.modal-warning-box ul { padding-left: 18px; color: var(--muted); font-size: 0.92rem; }
.modal-warning-box li { margin-bottom: 8px; }
.proj-credit { font-size: 1.05rem; color: var(--faint); }
.proj-credit a { color: var(--muted); }

/* Popup showcase: widescreen slideshow with facts laid over it */
.showcase { position: relative; margin: -48px -40px 30px; }
.slideshow { position: relative; background: #000; outline: none; }
.slides { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease-io); }
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; background: #000; }
.slide img.fit { object-fit: contain; }
.slide figcaption {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 6px 14px;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #f3efe6;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}
.slide-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border-radius: 50%;
    color: #f3efe6;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(243, 239, 230, 0.25);
    transition: border-color 0.15s, color 0.15s;
}
.slide-nav:hover { border-color: rgb(161, 110, 38); color: rgb(161, 110, 38); }
.slide-nav.prev { left: 16px; }
.slide-nav.next { right: 16px; }
.slide-dots { position: absolute; right: 22px; bottom: 20px; z-index: 3; display: flex; gap: 8px; }
.slide-dots button {
    width: 22px;
    height: 2px;
    padding: 6px 0;
    background: rgba(243, 239, 230, 0.35);
    background-clip: content-box;
    transition: width 0.25s var(--ease), background-color 0.15s;
}
.slide-dots button[aria-current="true"] { width: 44px; background-color: rgb(161, 110, 38); }
.showcase-info { padding: 26px 40px 0; }

@media (min-width: 701px) and (min-height: 501px) {
    .showcase::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.55) 32%, transparent 60%);
    }
    .showcase-info {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 2;
        max-width: 62%;
        padding: 0 40px 30px 76px;
        color: #f3efe6;
    }
    .showcase-info .modal-title { color: #fff; font-size: clamp(1.8rem, 3vw, 3rem); }
    .showcase-info .proj-facts { border: 0; margin: 0; }
    .showcase-info .proj-facts div { border: 0; padding: 4px 0; font-size: 0.9rem; }
    .showcase-info .proj-facts dt { color: rgba(243, 239, 230, 0.55); }
    .showcase-info .proj-facts dd { color: #f3efe6; }
    .showcase-info .proj-facts a { color: rgb(161, 110, 38); }
    .showcase-info .proj-badge { background: rgba(0, 0, 0, 0.5); }
    .showcase-info .proj-badge.wip { color: #f0b03a; }
    .showcase-info .proj-badge.done { color: #6cc47d; }
}

/* ---------- SHARE / SPONSOR SHEET ---------- */
.sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--overlay);
    opacity: 0;
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
    transition: opacity 0.55s var(--ease-soft), backdrop-filter 0.55s var(--ease-soft), -webkit-backdrop-filter 0.55s var(--ease-soft);
}
.sheet-overlay.visible { opacity: 1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Popups glide in: rise + settle from 97%, contents follow a beat later;
   closing plays the same motion backwards (script.js closeSheet). */
.sheet {
    position: relative;
    width: 100%;
    max-width: 460px;
    padding: 40px 34px 32px;
    background: var(--bg-raise);
    border: 1px solid var(--gold-line);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translateY(18px) scale(0.97);
    transition: transform 0.75s var(--ease-soft), opacity 0.5s var(--ease-soft);
}
.sheet-overlay.visible .sheet { opacity: 1; transform: none; }
.sheet > :not(.sheet-close) { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease-soft), transform 0.6s var(--ease-soft); }
.sheet-overlay.visible .sheet > :not(.sheet-close) { opacity: 1; transform: none; transition-delay: 0.12s; }
.sheet-overlay.closing { transition-duration: 0.4s; }
.sheet-overlay.closing .sheet { transform: translateY(10px) scale(0.98); transition-duration: 0.4s; }
:root[data-theme="light"] .sheet { box-shadow: 0 30px 80px rgba(60, 40, 20, 0.18); }
.sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    font-size: 1.3rem;
    line-height: 1;
}
.sheet-close:hover { border-color: var(--gold); color: var(--gold); }
.sheet-title { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.15; margin-bottom: 22px; padding-right: 40px; }
.sheet-text { color: var(--muted); margin-bottom: 18px; }
.share-link { display: flex; border: 1px solid var(--line); margin-bottom: 18px; }
.share-link input {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    background: transparent;
    border: 0;
    color: var(--ink);
    font: inherit;
    font-size: 1.05rem;
}
.share-copy {
    padding: 0 20px;
    background: var(--foil);
    color: var(--on-gold);
    font-size: 1.05rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}
.share-copy.done { background: var(--ok); }
.share-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.share-grid--2 { grid-template-columns: 1fr 1fr; }
.sheet .share-target, .sheet .share-option { border-radius: 10px; }
.share-target, .share-option {
    display: block;
    padding: 11px 14px;
    border: 1px solid var(--line);
    text-align: center;
    text-decoration: none;
    font-size: 1.05rem;
    transition: border-color 0.15s, color 0.15s;
}
.share-target:hover, .share-option:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- SERVICES PAGE ---------- */
.svc-page { position: relative; z-index: 2; padding: 150px var(--gutter) 40px; }
/* Services page (KT 10-24): the side index picks which part shows (the
   intro + What we do by default); the contact card and the two asks above
   the footer stay on every part. */
.svc-view[hidden] { display: none; }
/* narrower screens: the index becomes a row of buttons at the top */
@media (max-width: 1179px) {
    .svc-index { margin: 0 0 24px; }
    .svc-index ol { list-style: none; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
    .svc-index li { flex: 0 0 auto; }
    .svc-index a { display: block; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; white-space: nowrap; }
    .svc-index .svi-dot { display: none; }
    .svc-index .pvi-name { font-size: 1rem; }
    .svc-index a.is-active { border-color: var(--gold); }
    .svc-index a.is-active .pvi-name { color: var(--gold); }
}
@media (min-width: 1180px) {
    .svc-page--indexed { display: grid; grid-template-columns: clamp(220px, 15vw, 270px) minmax(0, 1fr); column-gap: clamp(28px, 3vw, 56px); }
    .svc-page--indexed > * { grid-column: 2; min-width: 0; }
    .svc-page--indexed > .svc-index { display: block; grid-column: 1; grid-row: 1 / span 3; align-self: stretch; }
    /* a full-screen-tall holder that sticks, so the list sits at the
       vertical centre of the screen while you scroll */
    .svc-index-hold { position: sticky; top: 0; height: 100vh; height: 100svh; margin-top: -150px; display: flex; align-items: center; }
    .svc-index ol { list-style: none; display: flex; flex-direction: column; gap: 6px; }
    .svc-index a {
        display: grid;
        grid-template-columns: 14px 1fr;
        align-items: baseline;
        gap: 16px;
        padding: 12px 0;
        text-decoration: none;
        opacity: 0.85;
        transition: opacity 0.3s;
    }
    .svc-index a:hover, .svc-index a:focus-visible, .svc-index a.is-active { opacity: 1; }
    /* simple hollow bullets; the part showing gets a filled one */
    .svi-dot { width: 11px; height: 11px; border: 1.5px solid var(--gold); border-radius: 50%; transform: translateY(-1px); transition: background-color 0.3s; }
    .svc-index a.is-active .svi-dot { background: var(--gold); }
    .svc-index .pvi-name { font-size: clamp(1.25rem, 1.4vw, 1.5rem); line-height: 1.25; }
    .svc-index a.is-active .pvi-name { color: var(--gold); }
}
.svc-section--sub { padding-top: clamp(50px, 6vw, 80px); }
.svc-work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 20px; align-items: start; }
@media (max-width: 1500px) { .svc-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .svc-work-grid { grid-template-columns: minmax(0, 1fr); } }
/* the two asks above the footer: your business on the left, a lead on the right */
.svc-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 90px); max-width: 1680px; width: 100%; margin: 0 auto; }
.svc-ctas { margin-top: clamp(80px, 10vw, 130px); }
.svc-ctas .svc-cta { padding-top: 0; padding-bottom: 10px; }   /* the line runs only as tall as the text */
/* a solid line between the two, with the same gap on both sides of it */
.svc-ctas .svc-cta--lead { border-left: 1px solid var(--gold-line); padding-left: clamp(30px, 5vw, 90px); }
@media (max-width: 860px) {
    .svc-ctas { grid-template-columns: 1fr; }
    .svc-ctas .svc-cta--lead { border-left: 0; border-top: 1px solid var(--gold-line); padding-left: 0; padding-top: 30px; }
}
.svc-page > .svc-back { display: block; width: min(100%, 1680px); margin: 0 auto 40px; }
.svc-back { display: inline-block; margin-bottom: 40px; color: var(--muted); text-decoration: none; font-size: 0.95rem; transition: color 0.3s; }
.svc-back:hover { color: var(--gold); }
.svc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: clamp(40px, 6vw, 120px);
    align-items: start;
    max-width: 1680px;   /* was 1320: KT 10-08 wants the side space used (this is the page he shares) */
    margin: 0 auto;
}
.svc-title {
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(3rem, 7vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.01em;
}
.svc-title em { color: var(--gold); }
.svc-lead { margin: 26px 0 22px; font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.3; color: var(--ink); }
.svc-content > p { color: var(--muted); max-width: 82ch; margin-bottom: 1.1em; }
.svc-content .svc-quote {
    margin: 34px 0 0;
    padding-left: 22px;
    border-left: 2px solid var(--gold-line);
    font-family: var(--serif);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.45;
    color: var(--ink);
}
.svc-section { padding: clamp(70px, 9vw, 120px) 0 0; }
.svc-section > p { color: var(--muted); margin: 0 0 1.1em; max-width: 82ch; }
.svc-h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.05; margin-bottom: 30px; }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.svc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.svc-item--wide { grid-column: 1 / -1; }
.svc-item {
    padding: 28px 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.04), transparent 60%);
    transition: border-color 0.5s, transform 0.8s var(--ease);
}
.svc-item:hover { border-color: var(--gold-line); transform: translateY(-4px); }
.svc-item h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; margin-bottom: 8px; }
.svc-item p { color: var(--muted); font-size: 0.98rem; }
.svc-steps { list-style: none; display: grid; gap: 26px; }
.svc-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.svc-steps span { font-family: var(--serif); font-style: italic; font-size: 1.6rem; color: var(--gold); }
.svc-steps h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.svc-steps p { color: var(--muted); }
/* 2 x 2 boxes */
.svc-steps--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.svc-steps--grid li {
    grid-template-columns: 1fr;
    gap: 6px;
    align-content: start;
    padding: 26px 26px 24px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.04), transparent 60%);
}
/* Work samples: the popup slideshow, in a rounded frame with a caption */
.svc-shows {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.svc-shows::-webkit-scrollbar { display: none; }
.svc-shows { scroll-behavior: smooth; }
.svc-shows-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 30px; }
.svc-shows-head .svc-h2 { margin-bottom: 0; }
.svc-shows-nav { display: flex; gap: 10px; }
.svc-shows-nav[hidden] { display: none; }
.slide-btn {
    width: 50px;
    height: 50px;
    border: 1px solid var(--line);
    border-radius: 50%;
    font-size: 1.05rem;
    color: var(--ink);
    transition: border-color 0.15s, color 0.15s, opacity 0.15s;
}
.slide-btn:not(:disabled):hover { border-color: var(--gold); color: var(--gold); }
.svc-shows-nav .slide-btn:disabled { opacity: 0.3; cursor: default; }
.svc-show { min-width: 0; }
/* Style samples (KT 10-25): one live sample in the centre, the 8 picks orbiting on two unseen tilted paths (luxe.js places them) */
.style-feature { padding-top: 0; margin-bottom: clamp(40px, 6vw, 90px); }
.sf-orbit { position: relative; width: 100%; }
.sf-stage { position: relative; z-index: 2; width: 62%; margin: 0 auto; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #0b0a09; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45); }
.sf-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.6s ease; }
.sf-frame.is-on { opacity: 1; }
.sf-open { position: absolute; z-index: 1; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.1rem; text-decoration: none; backdrop-filter: blur(6px); }
.sf-pick { position: absolute; left: 0; top: 0; width: var(--pick-w, 150px); padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0b0a09; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); transition: border-color 0.3s, box-shadow 0.3s; will-change: transform; }
.sf-pick img { display: block; width: 100%; height: auto; }
.sf-pick:hover, .sf-pick:focus-visible { border-color: var(--gold); }
.sf-pick.is-on { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 12px 30px rgba(0, 0, 0, 0.4); }
/* no script or reduced motion: the picks sit in a plain row under the display */
.sf-orbit:not(.is-orbiting) { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.sf-orbit:not(.is-orbiting) .sf-stage { flex: 0 0 100%; margin-bottom: 18px; }
.sf-orbit:not(.is-orbiting) .sf-pick { position: relative; width: 130px; }
@media (max-width: 860px) { .sf-stage { width: 74%; } }
/* the Samples view takes the full width: no contact card beside it (KT 10-25) */
.svc-layout[data-view="samples"] { grid-template-columns: minmax(0, 1fr); }
.svc-layout[data-view="samples"] .svc-side { display: none; }
/* Work & Samples: pages of a 3 x 3 grid in a sideways track (luxe.js builds the pages) */
.svc-sheet { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 20px; align-items: start; }
@media (max-width: 1100px) { .svc-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .svc-sheet { grid-template-columns: minmax(0, 1fr); } }
.svc-wide { max-width: 1320px; margin: 0 auto; }
/* Three samples side by side when there's room; the arrows take over below that */
.svc-visit {
    display: inline-block;
    margin: 14px 2px 0;
    color: var(--gold);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-bottom: 1px solid var(--gold-line);
    transition: border-color 0.3s;
}
.svc-visit:hover { border-color: var(--gold); }
.svc-show-title { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; margin: 0 2px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-show > p { padding: 0 2px; color: var(--muted); font-size: 0.98rem; }
.svc-show > p:first-of-type { margin-top: 16px; }
.svc-show > p + p { margin-top: 0.7em; }
.svc-show > p a { color: var(--gold); }
.svc-show .slideshow { border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.svc-show .slides { aspect-ratio: 16 / 10; }
.svc-cta { padding: clamp(80px, 10vw, 130px) 0 40px; }
.svc-cta > p { color: var(--muted); margin-bottom: 26px; }
.svc-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.svc-mail { margin-top: 16px; font-family: var(--mono); font-size: 1.05rem; color: var(--faint); }
.svc-engagements { list-style: none; display: grid; gap: 14px; }
.svc-side { padding-top: 0; }   /* KT 10-24: the contact card starts level with the top of the page */
.svc-side-title { font-family: var(--serif); font-weight: 300; font-size: 2.4rem; margin-bottom: 20px; }
.svc-side .member-card { width: 100%; }
.svc-side .member-card + .member-card { margin-top: 18px; }
.svc-alias { margin-top: 16px; font-size: 0.9rem; font-style: italic; color: var(--faint); text-align: center; }
.services-btn.is-current { border-color: var(--gold); color: var(--gold); }

/* ---------- RESPONSIVE ---------- */
/* the full top nav needs ~1320px since its text went up 50% (10-03) */
@media (max-width: 1320px) {
    .top-nav { display: none; }
    header { grid-template-columns: 1fr auto; }
}
@media (max-width: 1100px) {
    .about-split { grid-template-columns: 1fr; gap: 56px; }
    .about-side { padding: 0; }
    .code-list { grid-template-columns: 1fr 1fr; }
    .about-pro { border-left: 0; border-top: 1px dashed var(--gold-line); padding-top: 56px; }
    .svc-layout { grid-template-columns: minmax(0, 1fr); }
    .svc-side { padding-top: 0; max-width: 420px; }
    /* KT 10-05: on narrow screens the contact card goes last, just before the footer */
    .svc-page { display: flex; flex-direction: column; }
    .svc-layout { display: contents; }
    .svc-wide { order: 1; width: 100%; }
    .svc-side { order: 2; margin-top: 40px; }
    .foot-ask { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 760px) {
    .reel-frame { --slide-w: 86%; }
    .reel-slide { border-radius: 14px; }
    .reel-bars { right: auto; left: calc(var(--edge) + 20px); bottom: 46px; }
    .reel-arrow { top: 22px; margin-top: 0; width: 42px; height: 42px; font-size: 0.95rem; }
    .reel-arrow.prev { left: auto; right: calc(var(--edge) + 64px); }
    .reel-arrow.next { right: calc(var(--edge) + 14px); }
    .reel-media::after { background: linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.75) 32%, transparent 62%); }
    .reel-info { left: 20px; right: 20px; bottom: 64px; }
    .reel-count { bottom: 22px; right: auto; left: calc(var(--edge) + 20px); }
    .reel-hint { bottom: 22px; right: calc(var(--edge) + 20px); }
    .proj-row { grid-template-columns: 1fr 24px; gap: 6px 12px; }
    .pr-state { grid-column: 1; grid-row: 2; }
    .pr-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
    .footer-top { flex-direction: column; align-items: flex-start; }
    .footer-base { grid-template-columns: 1fr; text-align: center; }
    .footer-base .footer-wordmark { order: -1; }
    .footer-base .copyright-reg { text-align: center; }
    .svc-grid, .svc-grid--3 { grid-template-columns: 1fr; }
    .svc-show { flex-basis: 86%; }
    .svc-steps--grid { grid-template-columns: 1fr; }
    .svc-page { padding-top: 110px; }
}

@media (max-width: 600px) {
    .hero-title { font-size: 15vw; }
    .hero-title em { padding-left: 0.3em; }
    .services-btn { padding: 9px 14px; font-size: 0.9rem; letter-spacing: 0.14em; }
    .logo { font-size: 1rem; letter-spacing: 0.22em; }
    .logo-text { letter-spacing: 0.14em; }
    .header-actions { gap: 8px; }
    .member-card { padding: 28px 18px 24px; }
    .modal-scroll { padding: 44px 20px 22px; }
    .modal-actions:not([hidden]) { padding: 14px 20px; }
    .proj-facts div, .member-contact a { grid-template-columns: 1fr; gap: 2px; }
    .curtain-word { gap: 0.6em; }
}

@media (max-width: 700px), (max-height: 500px) {
    .showcase { margin: -44px -20px 20px; }
    .showcase-info { padding: 20px 20px 0; }
    .slide figcaption { display: none; }
}

/* Short screens (landscape phones, small laptops): tighter reel caption */
@media (max-height: 560px) {
    .reel-info { bottom: 18px; left: 20px; max-width: 70%; }
    .reel-name { margin: 8px 0; font-size: clamp(1.6rem, 6vh, 2.4rem); }
    .reel-line { font-size: 0.9rem; line-height: 1.4; }
    .reel-count { bottom: 18px; }
    .reel-hint { bottom: 40px; }
    .reel-bars { bottom: 66px; }
}

@media (max-width: 420px) {
    .services-btn { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
    html { scroll-behavior: auto; }
    .curtain { display: none; }
}

/* ---- pricing page: deliberately plain (KT: professional, not premium) ---- */
.pr-wrap { max-width: 1120px; }
.pr-eyebrow { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.pr-title { font-family: var(--sans); font-weight: 500; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; }
.pr-lead { margin: 18px 0 10px; font-size: 1.15rem; color: var(--ink); }
.pr-intro { margin-top: 16px; color: var(--muted); max-width: 70ch; }
.pr-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.pr-jump a { padding: 7px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); text-decoration: none; font-size: 0.92rem; transition: color 0.2s, border-color 0.2s; }
.pr-jump a:hover { color: var(--ink); border-color: var(--faint); }
.pr-section { padding: clamp(56px, 7vw, 84px) 0 0; scroll-margin-top: 100px; }
.pr-h2 { font-family: var(--sans); font-weight: 500; font-size: 1.5rem; margin-bottom: 20px; }
.pr-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pr-plan { border: 1px solid var(--line); border-radius: 10px; padding: 24px 22px; background: rgba(var(--gold-rgb), 0.02); }
.pr-plan h3 { font-weight: 500; font-size: 1.05rem; line-height: 1.3; min-height: 2.6em; }
.pr-price { margin-top: 12px; font-size: 1.9rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-desc { margin: 10px 0 14px; color: var(--muted); font-size: 0.95rem; }
.pr-plan ul { list-style: none; border-top: 1px solid var(--line); padding-top: 12px; }
.pr-plan li { position: relative; padding-left: 18px; margin: 6px 0; font-size: 0.92rem; color: var(--muted); }
.pr-plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pr-plans--2 .pr-plan h3 { min-height: 0; }
.pr-plan-note { margin-top: 14px; padding: 10px 12px; border-left: 2px solid var(--gold); background: rgba(var(--gold-rgb), 0.06); font-size: 0.88rem; color: var(--ink); }
.pr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.pr-split dt { font-weight: 500; color: var(--ink); }
.pr-split dd { font-size: 1.5rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; margin: 2px 0 6px; }
.pr-split p { font-size: 0.9rem; color: var(--muted); }
.pr-alias { display: block; margin-top: 2px; font-weight: 400; font-size: 0.82rem; color: var(--faint); }
.pr-deal { margin-top: 16px; padding: 12px 16px; border: 1px solid var(--gold-line, var(--line)); border-radius: 8px; max-width: 70ch; color: var(--ink); }
.pr-deal a, .pr-else a { color: var(--gold); }
.pr-else { margin-top: 18px; padding: 16px 18px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); }
.pr-else strong { color: var(--ink); font-weight: 500; }
.pr-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--gold); }
.pr-table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.pr-table thead th { text-align: left; font-weight: 400; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 0 16px 10px 0; border-bottom: 1px solid var(--faint); }
.pr-table thead th:last-child, .pr-amt { text-align: right; padding-right: 0; }
.pr-table tbody th, .pr-table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.pr-table tbody th { text-align: left; font-weight: 500; width: 26%; color: var(--ink); }
.pr-table td { color: var(--muted); }
.pr-amt { white-space: nowrap; color: var(--ink) !important; font-weight: 500; font-variant-numeric: tabular-nums; width: 16%; }
.pr-unit { display: block; font-weight: 400; font-size: 0.82rem; color: var(--faint); }
.pr-note { margin-top: 12px; font-size: 0.88rem; color: var(--faint); }
.pr-terms { list-style: none; display: grid; gap: 10px; max-width: 75ch; }
.pr-terms li { color: var(--muted); }
.pr-terms strong { color: var(--ink); font-weight: 500; }
/* KT 10-25: common questions, one line each until opened */
.pr-faq details { max-width: 75ch; border-bottom: 1px solid var(--line); }
.pr-faq summary { cursor: pointer; list-style: none; padding: 14px 32px 14px 0; position: relative; color: var(--ink); font-weight: 500; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; color: var(--gold); font-size: 1.2rem; transition: transform 0.2s; }
.pr-faq details[open] summary::after { transform: rotate(45deg); }
.pr-faq details p { color: var(--muted); padding: 0 0 16px; }
.pr-cta p { color: var(--muted); margin-bottom: 18px; }
/* KT 10-24: the white blocks were off theme; now gold-outlined pills like the rest of the site */
.pr-btn { display: inline-block; margin: 0 8px 8px 0; padding: 12px 24px; border: 1px solid var(--gold-line); border-radius: 999px; background: transparent; color: var(--gold); text-decoration: none; font-weight: 500; transition: border-color 0.2s, background-color 0.2s; }
.pr-btn:hover, .pr-btn:focus-visible { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
@media (max-width: 1000px) { .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .pr-plans, .pr-plans--2 { grid-template-columns: 1fr; }
    .pr-split { grid-template-columns: 1fr; }
    .pr-plan h3 { min-height: 0; }
    .pr-table thead { display: none; }
    .pr-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .pr-table tbody th, .pr-table td { display: block; width: auto; padding: 0; border: 0; }
    .pr-table td:not(.pr-amt) { grid-column: 1 / -1; grid-row: 2; font-size: 0.93rem; }
    .pr-amt { grid-column: 2; grid-row: 1; }
}

/* ── Pricing page, KT 10-05: content on the left, sticky progress line on the right ── */
#samples { scroll-margin-top: 100px; }
/* KT 10-24: back link on the left, on the title's line; title centred, demo pill centred under it */
.pr-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 14px 20px; text-align: center; }
.pr-title-row .svc-back { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
.pr-title-row .pr-title { grid-column: 2; grid-row: 1; }
.pr-title-row .pr-demo-note { grid-column: 2; grid-row: 2; justify-self: center; }
@media (max-width: 760px) {
    .pr-title-row { grid-template-columns: 1fr; }
    .pr-title-row .svc-back, .pr-title-row .pr-title, .pr-title-row .pr-demo-note { grid-column: 1; grid-row: auto; }
}
.pr-demo-note { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(var(--gold-rgb), 0.45); color: var(--gold); font-size: 0.9rem; }
.pr-samples { margin-top: 14px; }
.pr-samples a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(var(--gold-rgb), 0.4); }
.pr-samples a:hover { border-bottom-color: var(--gold); }
.pr-tag { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 4px; background: var(--gold); color: #000; font-size: 0.78rem; font-weight: 500; }
.pr-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pr-offer { border: 1px solid rgba(var(--gold-rgb), 0.35); border-radius: 10px; padding: 20px 22px; background: rgba(var(--gold-rgb), 0.04); }
.pr-offer h3 { margin: 10px 0 6px; font-weight: 500; font-size: 1.1rem; }
.pr-offer p { color: var(--muted); font-size: 0.93rem; }
@media (max-width: 700px) { .pr-offers { grid-template-columns: 1fr; } }
/* Plan cards: gold badge that jumps to the offers section (KT 10-05) */
.pr-plan { display: flex; flex-direction: column; }
.pr-offer-badge { align-self: flex-end; margin-top: auto !important; display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 5px 12px 5px 9px; border-radius: 999px; border: 1px solid rgba(var(--gold-rgb), 0.5); color: var(--gold); font-size: 0.85rem; text-decoration: none; transition: background 0.2s; }
.pr-offer-badge:hover { background: rgba(var(--gold-rgb), 0.1); }
.pr-offer-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.6); animation: pr-pulse 2.4s ease-out infinite; }
@keyframes pr-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--gold-rgb), 0); } }
.pr-plan .pr-plan-notes { border-top: 0; padding-top: 0; margin: 4px 0 14px; padding-left: 12px; border-left: 2px solid rgba(var(--gold-rgb), 0.5); }
.pr-plan .pr-plan-notes li { padding-left: 0; margin: 3px 0; font-size: 0.84rem; color: var(--faint); }
.pr-plan .pr-plan-notes li::before { content: none; }
.pr-offer-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pr-offer-groups .pr-offers { grid-template-columns: 1fr; }
@media (max-width: 760px) { .pr-offer-groups { grid-template-columns: 1fr; } }
.pr-offers-intro { color: var(--muted); margin: -6px 0 8px; }
.pr-offers-group { margin: 26px 0 12px; font-weight: 500; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--ink); }
.pr-offer-big { display: flex; flex-direction: column; gap: 4px; padding: 28px 30px; background: rgba(var(--gold-rgb), 0.08); border-color: rgba(var(--gold-rgb), 0.6); }
.pr-offer-big .pr-tag { align-self: flex-start; }
.pr-offer-big h3 { font-size: 1.7rem; }
.pr-offer-big p { font-size: 1rem; }
.pr-offer-big .pr-offer-small { font-size: 0.88rem; margin-top: 6px; }
.pr-offer-cta { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.pr-offer-big .pr-offer-cta .pr-offer-badge { flex: none; align-self: flex-start; margin-top: 0 !important; }
.pr-offer-big .pr-offer-cta .pr-offer-small { margin: 0; }
@media (max-width: 560px) { .pr-offer-cta { flex-direction: column; align-items: flex-start; gap: 10px; } }
/* Pricing page (KT 10-24): pinned header with a second row of price
   categories; each one shows only its part of the list. */
header[data-pinned] { row-gap: 14px; }
header[data-pinned] .header-actions { grid-column: 3; }
.pr-cats {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: clamp(14px, 1.6vw, 30px);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}
.pr-cats::-webkit-scrollbar { display: none; }
.pr-cats a {
    position: relative;
    padding: 4px 0;
    font-family: var(--mono);
    font-size: 0.9rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;   /* KT 10-24: bold, like the Services & Advisory button */
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s;
}
.pr-cats a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.pr-cats a:hover, .pr-cats a.is-on { color: var(--ink); }
.pr-cats a.is-on { color: var(--gold); }
.pr-cats a:hover::after, .pr-cats a.is-on::after { transform: scaleX(1); }
.pr-cats-sep { color: var(--gold); opacity: 0.7; margin: 0 -4px; }
.pr-cats-grid, .pr-cats-row { display: contents; }      /* narrow screens: one sideways row */
@media (max-width: 900px) { .pr-cats { justify-content: flex-start; } }
main.pr-views { padding-top: 200px; }
/* wide screens: in the header bar itself, between the logo and the buttons */
@media (min-width: 1321px) {
    header[data-pinned] { row-gap: 0; }
    .pr-cats { grid-column: 2; grid-row: 1; align-items: center; gap: clamp(14px, 1.4vw, 26px); overflow: visible; }
    .pr-cats-big { font-size: 1.05rem; letter-spacing: 0.16em; }
    .pr-cats-sep { font-size: 2.2rem; line-height: 1; font-weight: 200; margin: 0; }
    .pr-cats-grid { display: flex; flex-direction: column; gap: 2px; }
    .pr-cats-row { display: flex; justify-content: space-between; gap: clamp(16px, 1.5vw, 28px); }
    .pr-cats-grid a { font-size: 0.8rem; }
    main.pr-views { padding-top: 150px; }
    main.pr-views .pr-side { margin-top: -150px; padding-top: 90px; }
    main.pr-views .pr-pay { height: calc(100vh - 170px); }
}
[data-pv][hidden] { display: none; }
/* the Custom enquiry form */
.pr-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; max-width: 760px; margin-top: 26px; }
/* KT 10-24: the Custom part sits centred in its column */
.pr-custom { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.pr-custom .pr-form { margin-left: auto; margin-right: auto; text-align: left; }
.pr-custom .pr-form-btns { justify-content: center; }
/* the order popup's form: one column */
.op-form { grid-template-columns: 1fr; gap: 14px; margin-top: 0; }
.op-form label { font-size: 0.9rem; }
.op-form .op-btns { margin-top: 4px; }
.op-form .op-btn { cursor: pointer; font: inherit; font-weight: 600; }
/* the hidden field only bots fill in */
.pr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pr-form-status { font-size: 0.95rem; color: var(--muted); }
.pr-form-status strong { color: var(--gold); font-weight: 600; margin-right: 6px; }
.pr-link { background: none; border: 0; padding: 0; font: inherit; color: var(--gold); text-decoration: underline; cursor: pointer; }
.pr-form .pr-btn[disabled], .op-form .op-btn[disabled] { opacity: 0.6; cursor: progress; }
.op-form { position: relative; }
.pr-form label { display: flex; flex-direction: column; gap: 8px; font-size: 0.95rem; color: var(--muted); }
.pr-form label em { font-style: normal; color: var(--faint); }
.pr-form input, .pr-form textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
    resize: vertical;
    transition: border-color 0.2s;
}
.pr-form input:focus, .pr-form textarea:focus { outline: none; border-color: var(--gold); }
.pr-form-wide { grid-column: 1 / -1; }
.pr-form-btns { display: flex; flex-wrap: wrap; gap: 0; }
.pr-form .pr-btn { cursor: pointer; font: inherit; font-weight: 500; }
.pr-form-note { font-size: 0.9rem; color: var(--faint); }
@media (max-width: 640px) { .pr-form { grid-template-columns: 1fr; } }

/* Staged payment options: 3 dots on one line, no box. In the page flow on small
   screens; sticky, centred in the free space to the right on wide ones. The track's
   ends and each dot's light-up point are measured by pricing-rail.js. */
.pr-layout { display: block; }
.pr-pay { margin-top: 56px; max-width: 340px; }
.pr-pay-title { font-family: var(--sans); font-weight: 500; font-size: 1.2rem; margin-bottom: 22px; }
.pr-rail { position: relative; }
.pr-rail-track { position: absolute; left: 9px; top: 10px; height: 0; width: 3px; border-radius: 2px; background: var(--line); }
.pr-rail-fill { position: absolute; inset: 0; border-radius: 2px; background: var(--gold); transform: scaleY(0); transform-origin: top; }
.pr-rail ol { list-style: none; display: flex; flex-direction: column; gap: 34px; }
.pr-rail li { position: relative; padding-left: 36px; }
.pr-rail li::before { content: ""; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--faint); background: var(--bg); transition: background 0.25s, border-color 0.25s, transform 0.3s, box-shadow 0.3s; z-index: 1; }
.pr-rail li.is-passed::before { border-color: var(--gold); background: var(--gold); }
.pr-rail li.is-current::before { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(var(--gold-rgb), 0.18); }
.pr-pay-amt { display: block; font-size: 1.3rem; font-weight: 500; line-height: 1.1; color: var(--faint); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.pr-rail li strong { display: block; margin-top: 3px; font-weight: 500; font-size: 0.97rem; color: var(--muted); transition: color 0.3s; }
.pr-rail li > span:last-child { display: block; margin-top: 4px; font-size: 0.84rem; line-height: 1.45; color: var(--faint); transition: color 0.3s; }
.pr-rail li.is-passed .pr-pay-amt { color: var(--gold); }
.pr-rail li.is-passed strong { color: var(--ink); }
.pr-rail li.is-passed > span:last-child { color: var(--muted); }
@media (min-width: 1100px) {
    .pr-wrap { max-width: none; }
    .pr-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 420px); gap: 40px; align-items: start; }
    .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pr-plans .pr-plan h3 { min-height: 0; }
    /* Full-height sticky column reaching the window's right edge; the timeline sits
       in its centre, so the space around it is equal on all sides. -150px = where
       .pr-layout starts, so it is centred from the first screen. */
    .pr-side { position: sticky; top: 0; height: 100vh; margin-top: -200px; margin-right: calc(-1 * var(--gutter)); display: flex; align-items: center; justify-content: center; padding: 140px 24px 0; box-sizing: border-box; }
    /* stretched to the viewport height: dots spread along a tall line */
    .pr-pay { margin-top: 0; width: 300px; height: calc(100vh - 220px); display: flex; flex-direction: column; }
    .pr-pay .pr-rail { flex: 1; }
    .pr-pay .pr-rail ol { height: 100%; justify-content: space-between; gap: 0; }
}
@media (min-width: 1500px) { .pr-plans:not(.pr-plans--2) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) and (max-height: 640px) { .pr-rail li > span:last-child { display: none; } }
@media (prefers-reduced-motion: reduce) { .pr-rail li::before, .pr-offer-dot { transition: none; animation: none; } }

/* A few stars + two small constellations in the footer of pages without the sky (KT 10-05) */
footer.has-footer-stars { position: relative; overflow: hidden; }
footer.has-footer-stars > *:not(.footer-stars) { position: relative; z-index: 1; }
.footer-stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fs-lines path { fill: none; stroke: rgba(238, 233, 223, 0.14); stroke-width: 0.8; }
.fs-stars circle { fill: rgba(238, 233, 223, 0.75); }
.fs-stars circle.tw { animation: fs-twinkle 4.5s ease-in-out infinite; }
.fs-stars circle.tw:nth-child(even) { animation-delay: -2.2s; }
@keyframes fs-twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
:root[data-theme="light"] .fs-lines path { stroke: rgba(var(--gold-rgb), 0.25); }
:root[data-theme="light"] .fs-stars circle { fill: rgba(var(--gold-rgb), 0.6); }
@media (prefers-reduced-motion: reduce) { .fs-stars circle.tw { animation: none; } }

/* Desktop: hero text block 100px further right (KT 10-05) */
@media (min-width: 1101px) { .hero { padding-left: calc(var(--gutter) + 100px); } }
/* Phones: smaller buttons in the project popup (KT 10-05) */
@media (max-width: 760px) {
    .proj-open, .proj-share, .proj-sponsor { padding: 8px 14px; font-size: 0.8rem; letter-spacing: 0.14em; }
    .modal-actions:not([hidden]) { gap: 8px; }
}
/* Member "Fields" tags that aren't links (KT 10-05) */
span.cap { cursor: default; }
span.cap:hover { border-color: var(--line); color: var(--ink); }
/* "Why Ocellus" side-menu item + popup (KT 10-05) */
.side-panel nav a.side-why { cursor: pointer; font-style: italic; }
.why-oc { display: grid; grid-template-columns: 120px 1fr; gap: 6px 28px; align-items: center; }
.why-oc-feather { grid-row: 1 / span 3; width: 120px; height: auto; transform: rotate(8deg); filter: drop-shadow(0 10px 30px rgba(var(--gold-rgb), 0.25)); }
.why-oc .modal-title em { color: var(--gold); }
.why-oc-line { color: var(--ink); font-family: var(--serif); font-size: 1.25rem; line-height: 1.45; }
.why-oc-soon { color: var(--faint); font-style: italic; }
@media (max-width: 560px) { .why-oc { grid-template-columns: 1fr; text-align: center; } .why-oc-feather { grid-row: auto; margin: 0 auto 10px; width: 90px; } }
.modal-overlay.visible .why-oc-feather { animation: why-float-in 1.1s var(--ease) both; }
@keyframes why-float-in { from { opacity: 0; transform: translateY(18px) rotate(-4deg); } to { opacity: 1; transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .modal-overlay.visible .why-oc-feather { animation: none; } }
/* KT 10-05: logo / feather / avatars can't be dragged out or selected (casual-copy deterrent) */
.logo img, .logo-text, .hero-feather, .hero-feather img, .feather-simulation, .member-avatar, .why-oc-feather {
    -webkit-user-select: none; user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none;
}
.logo img, .hero-feather img, .member-avatar, .why-oc-feather { pointer-events: none; }
/* Pricing intro: mutual-benefit statement beside the intro (KT 10-05) */
.pr-belief { margin: 28px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold); max-width: 30rem; }
.pr-belief p { font-family: var(--serif); font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.15; color: var(--ink); }
.pr-belief span { display: block; margin-top: 10px; color: var(--muted); font-size: 0.98rem; line-height: 1.6; }
@media (min-width: 1100px) {
    .pr-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 48px; align-items: center; }
    .pr-belief { margin: 0; }
}
.visit-count { font-size: 0.72rem; color: var(--faint); opacity: 0.6; letter-spacing: 0.04em; }

/* ---------- Theme hint (KT 10-11, two-way 10-12): site follows the system mode; a card under the menu button offers the other ---------- */
/* KT 10-25: popups are solid and sit above the header, nothing shows through */
.theme-hint { position: fixed; z-index: 1100; display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 32px);
    padding: 6px 6px 6px 16px; border: 1px solid var(--gold-line); border-radius: 14px; background: var(--bg-raise);
    box-shadow: 0 0 30px rgba(var(--gold-rgb), 0.18); opacity: 0; transform: translateY(-8px); transition: opacity .45s ease, transform .45s ease; }
:root[data-theme="light"] .theme-hint { box-shadow: 0 10px 30px rgba(31, 24, 20, 0.16); }
.theme-hint.visible { opacity: 1; transform: none; }
.theme-hint::before { content: ''; position: absolute; top: -7px; right: var(--arrow-right, 20px); width: 12px; height: 12px;
    background: inherit; border-left: 1px solid var(--gold-line); border-top: 1px solid var(--gold-line); transform: rotate(45deg); }
.th-go { background: none; border: 0; padding: 6px 0; color: var(--ink); font: 400 .9rem/1.35 'Space Grotesk', sans-serif; text-align: left; cursor: pointer; }
.th-go em { font-family: var(--serif); font-size: 1.08rem; color: var(--gold); }
.th-go small { display: block; color: var(--muted); font-size: .76rem; }
.th-close { background: none; border: 0; color: var(--muted); font-size: 1.2rem; line-height: 1; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; flex: none; }
.th-close:hover, .th-go:hover em { color: var(--ink); }

/* Pricing: amounts stay hidden until the visitor's currency is known (price-init.js) */
html.px-wait .svc-page { visibility: hidden; }
/* ---------- Launch offer card (KT 10-12): end date stands out, three live tiers ---------- */
.pr-launch .pr-launch-valid { margin: 2px 0 10px; color: var(--gold); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; }
.pr-launch-tiers { list-style: none; margin: 8px 0 6px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pr-launch-tiers li { display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(var(--gold-rgb), 0.35); border-radius: 8px; padding: 12px 14px; }
.pr-launch-tiers b { font-weight: 600; color: var(--ink); }
.pr-launch-tiers span { color: var(--muted); font-size: 0.88rem; }
.pr-launch-tiers i { font-style: normal; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.pr-launch-tiers li.next { border-color: var(--gold); background: rgba(var(--gold-rgb), 0.08); }
.pr-launch-tiers li.gone { opacity: 0.5; }
.pr-launch-tiers li.gone b { text-decoration: line-through; }
.pr-launch-tiers li.gone i { color: var(--muted); }
@media (max-width: 560px) { .pr-launch-tiers { grid-template-columns: 1fr; } }

/* single-screenshot sample cards: no arrows or dots */
.slideshow:has(.slide:only-child) :is(.slide-nav, .slide-dots) { display: none; }

/* order chooser (order-pick.js): plans, add-ons, offers and the contact card open WhatsApp / email */
.op-item { cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.op-item:hover, .op-item:focus-visible { border-color: var(--gold-line); background: rgba(var(--gold-rgb), 0.06); outline: none; }
tr.op-item:hover, tr.op-item:focus-visible { background: rgba(var(--gold-rgb), 0.08); }
.op-wrap { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 16px; background: var(--overlay); }
.op-wrap.is-open { display: flex; }
.op-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--bg-raise); border: 1px solid var(--gold-line); border-radius: 14px; padding: 28px 24px 22px; color: var(--ink); }
/* KT 10-24: the order chooser and the email chooser are pitch black in dark
   mode, cotton paper in light mode */
:root:not([data-theme="light"]) :is(.op-card, .sheet) { background: #000; }
:root[data-theme="light"] .op-card { background: var(--bg-raise) url("/static/paper-cotton.svg") 0 0 / 360px 360px; box-shadow: 0 30px 80px rgba(60, 40, 20, 0.18); }
.op-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 1.6rem; cursor: pointer; }
.op-eyebrow { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; }
.op-title { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; margin: 0 0 20px; }
.op-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.op-btn { flex: 1; text-align: center; padding: 12px 18px; border-radius: 8px; text-decoration: none; font-weight: 500; border: 1px solid var(--gold-line); color: var(--ink); }
.op-btn.op-wa { background: var(--foil); color: var(--on-gold); border-color: transparent; }
.op-note { margin: 14px 0 0; font-size: 0.82rem; color: var(--faint); }
.svc-title-row { display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 4vw, 56px); flex-wrap: wrap; }
.svc-price-btn { display: inline-block; padding: 12px 26px; border-radius: 999px; background: var(--foil); color: var(--on-gold); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
.svc-price-btn:hover { filter: brightness(1.1); }
.svc-samples-note { margin-top: 34px; color: var(--muted); font-size: 1rem; }
.svc-samples-note a { color: var(--gold); }
.svc-show .slide img.fit { background: var(--bg-raise); }

/* consent bar (KT 10-12): small, bottom-left, Accept / Cancel */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 9998; max-width: min(420px, calc(100vw - 32px)); background: var(--bg-raise); border: 1px solid var(--gold-line); border-radius: 12px; padding: 14px 16px; color: var(--ink); font-size: 0.85rem; line-height: 1.5; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.consent p { margin: 0 0 10px; color: var(--muted); }
.consent a { color: var(--gold); }
.consent-btns { display: flex; gap: 10px; }
.consent-btns button { flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--gold-line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.consent-btns button[data-c="yes"] { background: var(--foil); color: var(--on-gold); border-color: transparent; font-weight: 600; }

/* ad welcome choice (ad-gate.js, KT 10-12, until 16 Oct): full screen, no scroll */
html.adgate-open, html.adgate-open body { overflow: hidden; }
.adgate { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; overflow: hidden; }
.adgate-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.adgate-feather { position: absolute; right: max(2vw, 8px); top: -2vh; height: min(62vh, 560px); transform: rotate(8deg) scaleX(-1); filter: drop-shadow(0 0 40px rgba(161,110,38,.25)); pointer-events: none; }
.adgate-box { position: relative; width: min(560px, 100%); text-align: center; background: var(--bg-raise); border: 1px solid rgba(161,110,38,.45); border-radius: 18px; padding: clamp(24px, 5vw, 44px); color: #f7f3ec; backdrop-filter: blur(6px); }
.adgate-eyebrow { font-family: var(--sans); letter-spacing: .32em; text-transform: uppercase; font-size: .75rem; color: #c9963f; margin: 0 0 10px; }
.adgate-box h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 6vw, 2.8rem); line-height: 1.1; margin: 0 0 26px; }
.adgate-btns { display: grid; gap: 14px; }
.adgate-btn { display: block; padding: 18px 20px; border-radius: 12px; text-decoration: none; text-align: left; border: 1px solid rgba(161,110,38,.6); color: #f7f3ec; transition: transform .15s, filter .15s; }
.adgate-btn b { display: block; font-size: 1.15rem; font-weight: 600; margin-bottom: 4px; }
.adgate-btn span { font-size: .9rem; opacity: .8; }
.adgate-biz { background: var(--foil); color: #0b0906; border-color: transparent; }
.adgate-btn:hover, .adgate-btn:focus-visible { transform: translateY(-2px); filter: brightness(1.08); outline: none; }

/* grid arrows on the left and right of the 3 x 3 grid (KT 10-12) */
#samples { position: relative; }
#samples .svc-shows-nav .slide-btn { position: absolute; top: 55%; z-index: 3; background: var(--bg); }
#samples .svc-shows-nav .slide-btn[data-shows="-1"] { left: -64px; }
#samples .svc-shows-nav .slide-btn[data-shows="1"] { right: -64px; }
@media (max-width: 1460px) {
    #samples .svc-shows-nav .slide-btn[data-shows="-1"] { left: -8px; }
    #samples .svc-shows-nav .slide-btn[data-shows="1"] { right: -8px; }
}
.adgate-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.adgate .adgate-box { background: var(--bg-raise); }

/* KT 10-19: light theme — everything lying on the page (panels, sheets,
   notes) is cotton stock over the rag page, like things on a book's page */
:root[data-theme="light"] :is(.side-panel, .sheet, .consent, .theme-hint, .about-nudge) {
    background-color: var(--bg-raise);
    background-image: url("/static/paper-cotton.svg");
    background-size: 360px 360px;
}

/* KT 10-19: light theme = a sheet of cotton paper laid on the rag paper,
   with the content sitting on the sheet. Rag shows as a margin all round;
   the gutters grow by the same amount so text keeps its distance from the
   sheet's edge. */
:root[data-theme="light"] main {
    --sheet-in: clamp(8px, 2.4vw, 40px);
    --gutter: calc(clamp(16px, 6vw, 96px) + var(--sheet-in));
    --reel-side: max(calc(16px + var(--sheet-in)), calc(var(--gutter) / 2 + var(--sheet-in) / 2), calc((100vw - 1560px) / 2));
}
:root[data-theme="light"] main::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: var(--sheet-in) var(--sheet-in) 0;
    border-radius: 6px;
    background: var(--bg-raise) url("/static/paper-cotton.svg") 0 0 / 360px 360px;
    box-shadow: 0 1px 3px rgba(60, 40, 20, 0.1), 0 18px 50px rgba(60, 40, 20, 0.12);
    pointer-events: none;
}
/* the reel's side slides stop at the sheet's edge instead of spilling onto the rag */
:root[data-theme="light"] .reel { clip-path: inset(-60px var(--sheet-in)); }

/* WhatsApp button in the header, left of Services & Advisory (KT 10-25):
   the familiar green round chat icon. */
.wa-btn {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    box-shadow: 0 2px 10px rgba(37, 211, 102, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.wa-btn svg { width: 24px; height: 24px; }
.wa-btn:hover, .wa-btn:focus-visible {
    background: #1ebe5b;
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.5);
}
@media (max-width: 600px) {
    .wa-btn { width: 34px; height: 34px; }
    .wa-btn svg { width: 20px; height: 20px; }
}

/* Pricing index in the page (KT 10-25): phones don't get the category row
   in the header; the same links sit under the title, each opening its part. */
.pr-index { display: none; }
@media (max-width: 900px) {
    header[data-pinned] .pr-cats { display: none; }
    header[data-pinned] { row-gap: 0; }
    main.pr-views { padding-top: 120px; }
    .pr-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin: 26px 0 8px; padding: 14px 0 4px; border-top: 1px solid var(--gold-line); }
    .pr-index-label { grid-column: 1 / -1; margin: 0 0 6px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
    .pr-index a { padding: 11px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,0.08)); font-family: var(--mono); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
    .pr-index a::after { content: '\00a0\2192'; color: var(--gold); opacity: 0.6; }
    .pr-index a.is-on { color: var(--gold); }
}
/* Services index on phones (KT 10-25): all four buttons in sight, wrapped,
   instead of a sideways-scrolling row */
@media (max-width: 900px) {
    .svc-index ol { flex-wrap: wrap; overflow: visible; }
    .svc-index li { flex: 1 1 auto; }
    .svc-index a { text-align: center; white-space: normal; }
    .svc-index .pvi-name { font-size: 0.95rem; }
}