/* ==========================================================================
   Public presentation site (static SSR). One standalone stylesheet, no framework.
   Design system ported from the approved Naya draft: charcoal + gold, Cormorant Garamond + Montserrat,
   sharp corners, hairline borders. Motion is CSS-only (scroll-driven reveals, view transitions) and
   fully disabled under prefers-reduced-motion.
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */
:root {
    --bg: #1f1f1d;
    --bg-2: #2a2a27;
    --bg-3: #322d1f;
    --gold: #c9a962;
    --gold-2: #e0c078;
    --fg: #ffffff;
    --fg-2: rgba(255, 255, 255, .75);
    --fg-3: rgba(255, 255, 255, .5);
    --line: rgba(255, 255, 255, .1);
    --border: 1px solid var(--line);
    --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-body: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --section-pad: 120px;
    --nav-h: 80px;
    --container: 1140px;
    --t-fast: .2s ease;
    --t-base: .3s ease;
    --t-slow: .5s ease;
    color-scheme: dark;
}
@media (max-width: 991px) { :root { --nav-h: 70px; --section-pad: 100px; } }
@media (max-width: 768px) { :root { --section-pad: 80px; } html { font-size: 15px; } }
@media (max-width: 576px) { html { font-size: 14px; } }

/* 2. Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    overflow-x: clip; /* not "hidden": hidden would turn the element into a scroll container and break animation-timeline: view() */
}
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.7;
    color: var(--fg);
    background: var(--bg);
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* film grain: a tiled SVG noise at 3.5 % opacity, never intercepts clicks */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
ul, ol { margin: 0 0 1.5rem; }

/* 3. Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: .02em;
    margin: 0 0 1rem;
    color: var(--fg);
    text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 400; }
h4 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; letter-spacing: .02em; }
p { margin: 0 0 1.5rem; color: var(--fg-2); }
a { color: var(--gold); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--gold-2); }
.eyebrow {
    font-family: var(--font-body);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 1.25rem;
}
.lead { font-size: 1.15rem; color: var(--fg-2); max-width: 65ch; }
.accent { color: var(--gold); font-style: italic; }
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 4. Layout ------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.site-main { flex: 1 0 auto; padding-top: var(--nav-h); position: relative; }
.section { padding: var(--section-pad) 0; position: relative; }
.section-alt { background: var(--bg-2); }
.section-dark { background: var(--bg-3); }
.section-head { max-width: 760px; margin-bottom: 3.5rem; }
.section-head.center { text-align: center; margin-inline: auto; }
.section-head h2 { position: relative; padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 1px; background: var(--gold); }
.section-head.center h2::after { left: 50%; transform: translateX(-50%); }
.section-head p:last-child { margin-bottom: 0; }
.section-foot { margin-top: 3.5rem; text-align: center; }

/* 5. Buttons and links -------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 2.5rem;
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--fg);
    background: transparent;
    border: 1px solid var(--fg);
    cursor: pointer;
    transition: all var(--t-base);
}
.btn:hover { color: var(--bg); background: var(--fg); }
.btn-gold { border-color: var(--gold); color: var(--gold); }
.btn-gold:hover { background: var(--gold); color: var(--bg); }
.btn-sm { padding: .65rem 1.4rem; font-size: .7rem; }
.arrow-link { font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); }
.arrow-link::after { content: "\2192"; margin-left: .5rem; display: inline-block; transition: translate var(--t-fast); }
.arrow-link:hover::after { translate: 4px 0; }

/* 6. Header + navigation (checkbox menu, no JS) -------------------------- */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 2000; background: var(--gold); color: var(--bg); padding: .5rem 1rem; font-size: .8rem; }
.skip-link:focus { top: 1rem; }
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--nav-h);
    background: rgba(31, 31, 29, .82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: var(--border);
}
@supports (animation-timeline: scroll()) {
    .site-header { animation: header-solid linear both; animation-timeline: scroll(root); animation-range: 0 160px; }
}
@keyframes header-solid { to { background: rgba(31, 31, 29, .98); } }
.site-header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--fg); white-space: nowrap; flex-shrink: 0; }
.brand:hover { color: var(--gold); }
@media (max-width: 1399px) { .brand { font-size: 1.4rem; letter-spacing: .12em; } .site-nav { gap: 1.25rem; } .site-nav ul { gap: 1.1rem; } .site-nav-extra { gap: .75rem; padding-left: 1rem; } }
@media (max-width: 576px) { .brand { font-size: 1.25rem; letter-spacing: .1em; } }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 6px; padding: 10px; margin: 0; cursor: pointer; }
.burger span { display: block; height: 1.5px; background: var(--fg-2); transition: transform var(--t-base), opacity var(--t-base); }
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
.site-nav ul a { position: relative; display: inline-block; padding: .5rem 0; white-space: nowrap; font-size: .72rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-2); }
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { color: var(--fg); }
.site-nav ul a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); }
.site-nav-extra { display: flex; align-items: center; gap: 1.25rem; padding-left: 1.5rem; border-left: var(--border); }
.lang { display: inline-flex; gap: .3rem; font-size: .68rem; font-weight: 600; letter-spacing: .1em; }
.lang a { color: var(--fg-3); padding: .35rem .55rem; border: 1px solid transparent; }
.lang a:hover { color: var(--fg); }
.lang a[aria-current="true"] { color: var(--gold); border-color: var(--gold); background: rgba(201, 169, 98, .1); }
@media (max-width: 1199px) { /* burger below 1200 px: the full name + six nav items do not fit a 1024 px header */
    .burger { display: flex; }
    /* The header's backdrop-filter makes it the containing block for fixed descendants, so the panel is positioned
       against the header (absolute, directly below it) and sized to the rest of the viewport. */
    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100svh - var(--nav-h));
        flex-direction: column;
        justify-content: center;
        gap: 3rem;
        padding: 2rem 1.25rem;
        background: var(--bg);
        overflow-y: auto;
        translate: 100% 0;
        transition: translate var(--t-base);
    }
    .site-nav ul { flex-direction: column; align-items: center; gap: 1.5rem; }
    .site-nav ul a { font-size: 1rem; }
    .site-nav-extra { border-left: 0; padding-left: 0; flex-direction: column; gap: 2rem; }
    .nav-toggle:checked ~ .site-nav { translate: 0 0; }
    body:has(.nav-toggle:checked) { overflow: hidden; }
    .nav-toggle:checked ~ .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .nav-toggle:checked ~ .burger span:nth-child(2) { opacity: 0; }
    .nav-toggle:checked ~ .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
}

/* 7. Hero ---------------------------------------------------------------- */
.hero {
    position: relative;
    isolation: isolate;
    min-height: min(100svh, 1000px); /* full viewport on laptops and phones, capped on very tall screens */
    margin-top: calc(-1 * var(--nav-h));
    padding: calc(var(--nav-h) + 3rem) 0 6rem;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-rings { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .85; mix-blend-mode: screen; pointer-events: none; }
.hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(31, 31, 29, .15) 0%, rgba(31, 31, 29, .45) 45%, rgba(31, 31, 29, .93) 100%); }
.hero-content { position: relative; text-align: center; max-width: 900px; padding: 0 1.25rem; }
.hero .eyebrow { color: var(--fg-2); }
.hero-title { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 400; letter-spacing: .05em; margin: 0 0 .5rem; }
.hero-tagline { font-family: var(--font-heading); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-style: italic; letter-spacing: .08em; color: var(--fg-2); margin-bottom: 2.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 2rem; }
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem 1rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--fg-2);
    border: var(--border);
    background: rgba(31, 31, 29, .55);
}
.status-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 2s infinite; }
.status-chip.waitlist::before { background: var(--gold-2); }
.status-chip.closed::before { background: var(--fg-3); animation: none; }
.status-note { display: block; margin-top: .75rem; font-size: .85rem; color: var(--fg-3); }
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(201, 169, 98, .6); }
    70% { box-shadow: 0 0 0 8px rgba(201, 169, 98, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 169, 98, 0); }
}
.scroll-indicator { position: absolute; bottom: 2rem; left: 50%; translate: -50% 0; color: var(--fg-3); animation: bounce 2s infinite; }
.scroll-indicator svg { width: 28px; height: 28px; }
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-12px); }
    60% { transform: translateY(-6px); }
}

/* Wordmark drawn by the tattoo pen. --dash / --pen-start / --pen-end are set inline by HeroWordmark. */
.wordmark { width: 100%; max-width: 440px; margin: 0 auto 1.25rem; }
.wordmark svg { width: 100%; height: auto; overflow: visible; }
.wordmark-text {
    fill: transparent;
    stroke: var(--gold);
    stroke-width: 1.5;
    stroke-dasharray: var(--dash, 600);
    stroke-dashoffset: var(--dash, 600);
    animation: draw-text 4s ease .5s forwards;
}
@keyframes draw-text {
    0% { stroke-dashoffset: var(--dash, 600); fill: transparent; }
    70% { stroke-dashoffset: 0; fill: transparent; }
    100% { stroke-dashoffset: 0; fill: var(--gold); }
}
.pen { transform: translate(var(--pen-start, 60px), 20px); animation: pen-move 4s ease-in-out .5s forwards; will-change: transform; }
@keyframes pen-move {
    0% { transform: translate(var(--pen-start, 60px), 20px); }
    25% { transform: translate(calc(var(--pen-start, 60px) + (var(--pen-end, 330px) - var(--pen-start, 60px)) * .25), 26px); }
    50% { transform: translate(calc((var(--pen-start, 60px) + var(--pen-end, 330px)) / 2), 22px); }
    75% { transform: translate(calc(var(--pen-start, 60px) + (var(--pen-end, 330px) - var(--pen-start, 60px)) * .75), 27px); }
    100% { transform: translate(var(--pen-end, 330px), 20px); }
}
.pen-body { animation: pen-vibrate .05s linear infinite; transform-origin: center; }
@keyframes pen-vibrate {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-.3px, .2px); }
    50% { transform: translate(.3px, -.2px); }
    75% { transform: translate(-.2px, -.3px); }
}
.needle { animation: needle .08s linear infinite; }
@keyframes needle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
.power-light { animation: power 1s ease-in-out infinite; }
@keyframes power { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.led { animation: led .5s ease-in-out infinite; }
@keyframes led {
    0%, 100% { opacity: 1; filter: drop-shadow(0 0 2px var(--gold)); }
    50% { opacity: .7; filter: drop-shadow(0 0 4px var(--gold)); }
}
@media (max-width: 768px) { .wordmark { max-width: 320px; } }
@media (max-width: 480px) { .wordmark { max-width: 260px; } }

/* 8. Marquee ------------------------------------------------------------- */
.marquee { overflow: hidden; border-top: var(--border); border-bottom: var(--border); background: var(--bg); padding: 1.1rem 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 45s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee ul { display: flex; list-style: none; margin: 0; padding: 0; }
.marquee li { font-family: var(--font-heading); font-size: 1.25rem; letter-spacing: .25em; text-transform: uppercase; color: var(--fg-2); white-space: nowrap; padding: 0 1.5rem; }
.marquee li::after { content: "\00B7"; color: var(--gold); margin-left: 3rem; }
@keyframes marquee { to { translate: -50% 0; } }

/* 9. Stats, cards, steps -------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: var(--border); margin-top: 3.5rem; }
.stat { background: var(--bg); padding: 2rem 1.5rem; text-align: center; }
.stat-value { font-family: var(--font-heading); font-size: clamp(2.2rem, 4vw, 3.25rem); color: var(--gold); line-height: 1; margin-bottom: .6rem; }
.stat-label { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-3); }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.card { padding: 2.5rem 2rem; background: rgba(255, 255, 255, .02); border: var(--border); transition: all var(--t-base); }
.card:hover { background: rgba(255, 255, 255, .04); border-color: var(--gold); translate: 0 -5px; }
.card-index { font-family: var(--font-heading); font-size: 1rem; letter-spacing: .1em; color: var(--gold); margin-bottom: 1.5rem; }
.card h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.card p { font-size: .95rem; margin: 0; }
.steps .card { text-align: center; padding: 3rem 2rem; }
.step-number { font-family: var(--font-heading); font-size: 4rem; font-weight: 500; line-height: 1; color: var(--gold); margin-bottom: 1.5rem; }
.steps .card h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; }
@media (max-width: 991px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .cards { grid-template-columns: 1fr; } }

/* 10. Split (about) and photo band (studio) ------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.split .section-head { margin-bottom: 1.5rem; }
.frame { position: relative; margin: 0 20px 20px 0; }
.frame::before { content: ""; position: absolute; top: 20px; left: 20px; right: -20px; bottom: -20px; border: 1px solid var(--gold); z-index: -1; }
.frame img { display: block; width: 100%; height: auto; filter: grayscale(30%); transition: filter var(--t-slow); }
.frame:hover img { filter: none; }
.band { position: relative; isolation: isolate; min-height: 72vh; display: grid; align-items: end; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(31, 31, 29, .96) 0%, rgba(31, 31, 29, .55) 45%, rgba(31, 31, 29, .05) 100%); }
.band-content { padding: calc(var(--section-pad) * 1.5) 0 4rem; }
.band ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.band li { border-top: 1px solid var(--gold); padding-top: 1rem; font-size: .95rem; color: var(--fg-2); }
@media (max-width: 991px) {
    .split { grid-template-columns: 1fr; gap: 3rem; }
    .frame { max-width: 480px; margin-inline: auto; }
}
@media (max-width: 768px) { .band ul { grid-template-columns: 1fr; gap: 1.25rem; } }

/* 11. Portfolio grid + lightbox ------------------------------------------ */
.portfolio-chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 3rem; }
.chip { padding: .6rem 1.1rem; font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-2); border: var(--border); }
.chip:hover { border-color: var(--gold); color: var(--gold); }
.portfolio-group { margin-bottom: 5rem; }
.portfolio-group:last-child { margin-bottom: 0; }
.portfolio-group h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 2rem; }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.portfolio-item { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: var(--bg-3); }
.portfolio-item.wide { grid-column: span 2; aspect-ratio: 2; }
.portfolio-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.portfolio-item:hover img { transform: scale(1.06); }
.portfolio-caption {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--gold);
    background: linear-gradient(to top, rgba(31, 31, 29, .92) 0%, transparent 55%);
    opacity: 0;
    transition: opacity var(--t-base);
}
.portfolio-item:hover .portfolio-caption, .portfolio-item:focus-visible .portfolio-caption { opacity: 1; }
.portfolio-empty { text-align: center; padding: 3rem; border: var(--border); color: var(--fg-3); }
@media (hover: none) { .portfolio-caption { opacity: 1; } }
@media (max-width: 991px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 576px) { .portfolio-grid { gap: .5rem; } .portfolio-caption { display: none; } }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1400px); max-height: 96vh; color: var(--fg); }
.lightbox::backdrop { background: rgba(15, 15, 14, .92); backdrop-filter: blur(6px); }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: .75rem; }
.lightbox img { display: block; max-width: 92vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; }
.lightbox figcaption { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); text-align: center; }
.lightbox button {
    position: fixed;
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--fg);
    background: rgba(31, 31, 29, .6);
    border: var(--border);
    cursor: pointer;
    transition: all var(--t-fast);
}
.lightbox button:hover { border-color: var(--gold); color: var(--gold); }
.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-nav { top: 50%; translate: 0 -50%; }
.lightbox-nav.prev { left: 1rem; }
.lightbox-nav.next { right: 1rem; }
@media (max-width: 576px) { .lightbox-nav { top: auto; bottom: 1rem; translate: none; } }

/* 12. FAQ (native details) ------------------------------------------------ */
.faq { max-width: 800px; margin-inline: auto; }
.faq details { border-bottom: var(--border); }
.faq details:first-of-type { border-top: var(--border); }
.faq summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fg);
    cursor: pointer;
    transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 300; line-height: 1; color: var(--gold); transition: rotate var(--t-base); }
.faq details[open] summary::after { rotate: 45deg; }
.faq summary:hover { color: var(--gold); }
.faq details > :not(summary) { color: var(--fg-2); line-height: 1.8; }
.faq details > p { padding-bottom: 1.5rem; margin: 0; }

/* 13. Contact ------------------------------------------------------------ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; }
.contact-item { display: flex; gap: 1.1rem; align-items: flex-start; }
.contact-item > svg { width: 22px; height: 22px; flex-shrink: 0; stroke: var(--gold); margin-top: .2rem; }
.contact-item h4 { font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 .35rem; }
.contact-item p { margin: 0; color: var(--fg); font-size: 1.05rem; }
.contact-item a { color: var(--fg); }
.contact-item a:hover { color: var(--gold); }
.contact-item .addr-line { display: block; }
.contact-item .small-link { display: inline-block; margin-top: .35rem; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.contact-list.compact { gap: 1.1rem; }
.contact-list.compact .contact-item p { font-size: .95rem; }
.contact-list.compact .contact-item h4 { display: none; }
.contact-list.compact .contact-item > svg { width: 18px; height: 18px; margin-top: .3rem; }
.social { display: flex; gap: .75rem; margin-top: .25rem; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .2); color: var(--fg-2); transition: all var(--t-base); }
.social a:hover { border-color: var(--gold); color: var(--gold); background: rgba(201, 169, 98, .1); }
.social svg { width: 20px; height: 20px; stroke: currentColor; }
.enquiry { border: var(--border); background: rgba(255, 255, 255, .02); padding: 2.5rem; }
.enquiry h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.enquiry ol { padding-left: 1.25rem; color: var(--fg-2); }
.enquiry li { margin-bottom: .4rem; }
.enquiry li::marker { color: var(--gold); }
.enquiry .hero-actions { justify-content: flex-start; margin: 1.5rem 0 0; }
@media (max-width: 991px) { .contact-grid { grid-template-columns: 1fr; gap: 3rem; } }
@media (max-width: 576px) { .enquiry { padding: 1.75rem 1.25rem; } }

/* 14. Sub-page header, content grid, prose (Markdown) --------------------- */
.page-header { padding: calc(var(--section-pad) * .7) 0 3rem; border-bottom: var(--border); background: radial-gradient(60% 90% at 85% 0%, rgba(201, 169, 98, .09), transparent 70%); }
.page-header h1 { margin-bottom: .75rem; }
.page-header .lead { margin: 0; }
.content-grid { display: grid; grid-template-columns: minmax(0, 760px) minmax(260px, 1fr); gap: 4rem; align-items: start; }
.side-card { position: sticky; top: calc(var(--nav-h) + 2rem); border: var(--border); background: rgba(255, 255, 255, .02); padding: 2rem; }
.side-card h3 { font-size: 1.4rem; margin-bottom: .75rem; }
.side-card p { font-size: .95rem; }
.side-card .btn { width: 100%; margin-bottom: 1.5rem; }
.prose { max-width: 760px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { position: relative; font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 3rem 0 1.25rem; padding-bottom: .75rem; }
.prose h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 1px; background: var(--gold); }
.prose h3 { font-size: 1.5rem; margin: 2rem 0 .75rem; }
.prose p, .prose li { color: var(--fg-2); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { text-decoration: underline; text-decoration-color: rgba(201, 169, 98, .4); text-underline-offset: 3px; }
.prose blockquote { margin: 2rem 0; padding: 1.5rem 2rem; border-left: 2px solid var(--gold); background: rgba(201, 169, 98, .06); }
.prose blockquote p { margin: 0; color: var(--fg); }
.prose blockquote p + p { margin-top: .75rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 2rem; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .9rem 1rem; border-bottom: var(--border); vertical-align: top; }
.prose th { font-size: .68rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-3); }
.prose td { color: var(--fg-2); }
.prose td:first-child { color: var(--fg); }
.prose hr { border: 0; border-top: var(--border); margin: 3rem 0; }
.prose details { border-bottom: var(--border); }
.prose details:first-of-type { border-top: var(--border); }
.prose summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 0; font-size: 1.05rem; font-weight: 600; color: var(--fg); cursor: pointer; }
.prose summary::-webkit-details-marker { display: none; }
.prose summary::after { content: "+"; flex-shrink: 0; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 300; line-height: 1; color: var(--gold); transition: rotate var(--t-base); }
.prose details[open] summary::after { rotate: 45deg; }
.prose summary:hover { color: var(--gold); }
.prose details > p { margin: 0 0 1.5rem; }
.prose details > ul, .prose details > ol { margin-bottom: 1.5rem; }
.prose .print-actions { margin-top: 3rem; }
@media (max-width: 991px) {
    .content-grid { grid-template-columns: 1fr; gap: 3rem; }
    .side-card { position: static; }
}

/* 15. Footer + mobile CTA bar --------------------------------------------- */
.site-footer { position: relative; border-top: var(--border); background: var(--bg); padding: 4rem 0 2rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3rem; }
.footer-brand .brand { font-size: 2rem; }
.footer-tagline { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--fg-3); margin: .5rem 0 1.5rem; }
.footer-brand p { font-size: .9rem; max-width: 34ch; }
.footer-heading { font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 1.25rem; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.footer-nav a { color: var(--fg-2); font-size: .9rem; }
.footer-nav a:hover { color: var(--gold); }
.footer-bottom { border-top: var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .8rem; color: var(--fg-3); }
.footer-bottom a { color: var(--fg-3); }
.footer-bottom a:hover { color: var(--gold); }
.mobile-cta { display: none; }
@media (max-width: 991px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) {
    .mobile-cta {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        position: fixed;
        inset: auto 0 0 0;
        z-index: 900;
        background: rgba(31, 31, 29, .95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: var(--border);
    }
    .mobile-cta a { display: grid; place-items: center; gap: .2rem; padding: .7rem .5rem .8rem; font-size: .58rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--fg-2); }
    .mobile-cta a.primary { color: var(--bg); background: var(--gold); }
    .mobile-cta svg { width: 18px; height: 18px; stroke: currentColor; }
    .site-footer { padding-bottom: 6rem; }
}

/* 16. Status pages (404 / 500) ------------------------------------------- */
.status-page { text-align: center; padding: var(--section-pad) 0; }
.status-code { font-family: var(--font-heading); font-size: clamp(5rem, 15vw, 9rem); line-height: 1; color: var(--gold); margin: 0 0 1rem; }
.status-page h1 { font-size: clamp(1.8rem, 4vw, 2.75rem); }
.status-page code { color: var(--fg-3); font-size: .85rem; }

/* 17. Motion: scroll-driven reveal, page transitions, reduced motion ------ */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    }
}
@keyframes reveal { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    .wordmark-text { animation: none; fill: var(--gold); stroke: none; }
    .pen { display: none; }
    .marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .marquee ul[aria-hidden] { display: none; }
    .scroll-indicator { animation: none; }
}

/* 18. Print --------------------------------------------------------------- */
@media print {
    .site-header, .mobile-cta, .site-footer, .side-card, .scroll-indicator, .marquee, .hero-bg, .hero-scrim, .btn, .print-actions, .skip-link, body::before { display: none !important; }
    body { background: #fff; color: #000; }
    .site-main { padding-top: 0; }
    .page-header { background: none; border: 0; padding: 0 0 1rem; }
    h1, h2, h3, h4, .prose strong, .prose td:first-child { color: #000; }
    p, li, td, .prose p, .prose li, .prose td, .lead { color: #222; }
    .prose blockquote { background: none; border-left: 2px solid #000; }
    .prose details { border: 0; }
    .prose summary::after { display: none; }
    .section, .prose { page-break-inside: avoid; }
}

/* 19. Small additions used by the sections ------------------------------- */
.portfolio-grid { grid-auto-flow: dense; }
.prose.lead-prose p { font-size: 1.15rem; max-width: 65ch; }
.contact-directions { margin-top: 3rem; }
.contact-directions h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.enquiry .status { margin-top: 1.75rem; }
.status { display: block; }