/* =========================================================================
   Meridian Studios — Try My Site "Bespoke" tier
   A separate, smaller component library, built fresh for this template:
   no markup/CSS structure reused from Essential/Growth/Complete templates.

   Type:    Instrument Serif (display, soft/contemporary) + Archivo (body)
   Palette: ink (near-black, hero/accent only) / paper (warm cream, dominant)
            / flash (signal orange)
   Layout:  asymmetric bleed grids, overlapping cards — no flat seams.
   ========================================================================= */

:root {
    --ink:        #0e0e0d;
    --ink-2:      #1c1c1a;
    --ink-3:      #262624;
    --paper:      #faf6ee;
    --paper-dim:  #efe7d6;
    --paper-line: rgba(250, 246, 238, 0.14);
    --flash:      #ff5a2e;
    --flash-2:    #ffb199;
    --muted:      #ada79c;
    --muted-dark: #6b665c;
    --ink-line:   rgba(14, 14, 13, 0.12);

    --font-display: "Instrument Serif", "Times New Roman", serif;
    --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

    --container: 1400px;
    --radius: 3px;
    --radius-btn: 7px;
}

* { box-sizing: border-box; }
/* Defensive default for every CSS Grid used on this site: grid items default
   to min-width:auto, which lets long/unbreakable content blow out a 1fr
   track at narrow viewports instead of shrinking with it (the same gotcha
   already logged on this platform's harcourt-vale filter-bar). */
.intro-grid, .space-row, .custom-hero, .field-grid, .value-grid,
.custom-points, .portfolio-grid, .contact-grid, .about-split { min-width: 0; }
.intro-grid > *, .space-row > *, .custom-hero > *, .field-grid > *, .value-grid > *,
.custom-points > *, .portfolio-grid > *, .contact-grid > *, .about-split > * { min-width: 0; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
}

@media (max-width: 720px) {
    .container { padding: 0 22px; }
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--flash);
    color: var(--ink);
    padding: 12px 20px;
    z-index: 999;
    font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* -------------------------------------------------------------------
   Type system — deliberately oversized, editorial
   ------------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.02;
    margin: 0;
    letter-spacing: -0.01em;
}

.display-1 { font-size: clamp(3.2rem, 7.6vw, 6.8rem); font-weight: 400; }
.display-2 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); }
.display-3 { font-size: clamp(2.1rem, 4vw, 3.4rem); }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--flash);
}
.eyebrow::before {
    /* ⛔ A 26px horizontal rule here READS AS A DASH in front of every section
       title. Daz ruled on exactly this on auroracast on 2026-08-09: it becomes
       a short VERTICAL bar, matching a left border. Do not put the horizontal
       one back on this or any other site. */
    content: "";
    width: 2px;
    height: 14px;
    background: var(--flash);
}
.eyebrow--dark { color: var(--muted-dark); }
.eyebrow--dark::before { background: var(--muted-dark); }

.lede {
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    color: var(--muted);
    max-width: 46ch;
    line-height: 1.55;
}
.on-paper .lede { color: var(--muted-dark); }

.italic { font-style: italic; }

/* -------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------- */
.btn {
    /* ⭐ Daz's pick, 2026-08-16: tracked caps sitting under a rule, no box.
       The previous version was a bordered rounded rectangle, which he said
       looked like 90s HTML, and he was right: a 1px border on all four sides
       is the thing that reads as a browser control rather than as design.
       ⛔ Do not put a border, a background fill or a corner radius back on
       .btn. The rule IS the button. */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-top: 2px solid currentColor;
    border-radius: 0;
    background: none;
    /* ⚠️ The rule sits on top and the label under it, so the visible mark is
       short. The padding below is what makes the TAPPABLE box reach the ~44px
       a finger needs. Measured at 29px before this and the site is read mostly
       on phones. ⛔ Do not trim this padding to tighten the spacing. */
    padding: 12px 0 16px;
    min-height: 44px;
    box-sizing: content-box;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.2;
    cursor: pointer;
    /* The rule is the thing that moves on hover, so the transition is on the
       colour and the offset, never on transform. A lifting button was part of
       the old control-like feel. */
    transition: border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
    white-space: nowrap;
}
.btn:hover { opacity: 0.72; }

/* ⚠️ The variants now only set the RULE colour. The label deliberately
   inherits the surrounding text colour, because these buttons sit on both the
   dark and the cream sections, and a fixed colour was legible on only one. */
.btn--flash {
    color: inherit;
    border-top-color: var(--flash);
}
.btn--flash:hover { border-top-color: var(--flash-2); opacity: 1; }
.btn--outline-light {
    color: var(--paper);
    border-top-color: rgba(250, 246, 238, 0.38);
}
.btn--outline-light:hover { border-top-color: var(--paper); opacity: 1; }
.btn--outline-dark {
    color: var(--ink);
    border-top-color: rgba(14, 14, 13, 0.28);
}
.btn--outline-dark:hover { border-top-color: var(--ink); opacity: 1; }

/* ⚠️ btn--sm had NO rule at all before this, so every "small" button was
   rendering at the full 16px/30px padding. It is a real size now. */
.btn--sm {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    padding: 9px 0 14px;
    min-height: 34px;
    border-top-width: 1px;
}

/* ⚠️ Form submits and the cookie banner keep a proper tappable area. A rule
   with only 12px above the words is a small target on a phone, and these two
   are the buttons that must not be missed. The look is unchanged. */
.btn--block {
    width: 100%;
    justify-content: center;
    padding: 16px 0;
    border-top-width: 2px;
    border-bottom: 2px solid transparent;
}
.btn--block:hover { border-bottom-color: currentColor; opacity: 1; }

.btn .icon { width: 17px; height: 17px; }

/* -------------------------------------------------------------------
   Header — transparent over hero, solidifies on scroll
   ------------------------------------------------------------------- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    /* ⚠️ Above the drawer (210), not below it. The menu panel used to cover the
       toggle that opens it, so once the menu was open there was no visible way
       to shut it again except guessing at the dimmed area behind. */
    z-index: 220;
    padding: 26px 0;
    color: var(--paper);
    transition: padding 0.35s ease, background 0.35s ease, border-color 0.35s ease;
    border-bottom: 1px solid transparent;
}
.main-nav a { color: var(--paper); opacity: 0.82; }
.main-nav a:hover, .main-nav a.is-active { opacity: 1; }
.site-header.is-scrolled {
    padding: 16px 0;
    background: rgba(13, 12, 10, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--paper-line);
}
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand__mark { width: 30px; height: 30px; color: var(--flash); flex: none; }
.brand__name-wrap { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.01em;
}
.brand__tag {
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 2px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}
.main-nav a {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding-bottom: 4px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s, color 0.25s;
}
.main-nav a:hover, .main-nav a.is-active { border-color: var(--flash); color: var(--flash); }

.header-actions { display: flex; align-items: center; gap: 16px; }
.icon-btn {
    background: none;
    border: 1px solid var(--paper-line);
    border-radius: 50%;
    width: 42px; height: 42px;
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--paper);
}
.icon-btn .icon { width: 19px; height: 19px; }

.mobile-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(88vw, 380px);
    background: var(--ink-2);
    z-index: 210;
    padding: 100px 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
    border-left: 1px solid var(--paper-line);
}
.mobile-nav.is-open { transform: translateX(0); }
/* ⚠️ #mobileNav is a CHILD of <header>, so it shares the header's stacking
   context and paints over the button that opens it. Raising the header's own
   z-index does nothing for that. The toggle needs its own z-index above the
   panel, or once the menu is open there is no way to close it except tapping
   the dimmed area, which nobody knows to do. */
.nav-toggle {
    position: relative;
    z-index: 215;
}
.mobile-nav a {
    padding: 16px 4px;
    font-family: var(--font-display);
    font-size: 1.5rem;
    border-bottom: 1px solid var(--paper-line);
}
/* ⚠️ Same fault as the cookie bar, found the same night: this is a dark panel
   that never declared a text colour, so the links inherited the page's dark ink
   and came out almost invisible on the dark background. ⛔ Any panel that sets
   its own dark background must set its own text colour in the same rule. */
.mobile-nav { color: var(--paper); }
.mobile-nav a { color: var(--paper); }

/* ⚠️ The button style is nowrap by design, which is right in a page but wrong
   in a 380px drawer: "Request a Custom Set" ran straight off the right edge.
   In here it goes full width and is allowed to wrap. */
.mobile-nav .btn {
    margin-top: 20px;
    white-space: normal;
    width: 100%;
    justify-content: flex-start;
}
.scrim {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 205;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
}
.scrim.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 980px) {
    .main-nav { display: none; }
    .icon-btn { display: flex; }
    .header-actions .btn.hide-sm { display: none; }
}

/* -------------------------------------------------------------------
   Continuous dark canvas — hero + intro + spaces teaser share one
   background gradient, no hard seams between them.
   ------------------------------------------------------------------- */
.dark-canvas {
    position: relative;
    color: var(--paper);
    background:
        radial-gradient(ellipse 900px 500px at 85% 0%, rgba(255,90,46,0.14), transparent 60%),
        linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 55%, var(--ink) 100%);
}

/* -------------------------------------------------------------------
   Hero — broken/asymmetric: offset photo bleeding off the right edge,
   oversized headline physically overlapping it, bottom-anchored.
   ------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: clamp(560px, 86vh, 760px);
    display: flex;
    align-items: flex-end;
    padding-top: 140px;
    overflow: hidden;
}
.hero__image {
    position: absolute;
    top: 8vh;
    right: -6vw;
    width: min(56vw, 760px);
    height: min(70vh, 560px);
    clip-path: polygon(6% 0, 100% 0, 100% 100%, 0% 100%);
    filter: grayscale(0.15) contrast(1.05);
}
.hero__image img { width: 100%; height: 100%; object-fit: cover; }
.hero__image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(0deg, var(--ink) 2%, transparent 32%),
                linear-gradient(90deg, var(--ink) 0%, transparent 22%);
}
.hero__content {
    position: relative;
    z-index: 2;
    padding-bottom: 9vh;
    max-width: 900px;
}
.hero__eyebrow { margin-bottom: 22px; }
.hero__title {
    font-size: clamp(3rem, 7vw, 6.4rem);
    margin-right: -0.02em;
}
.hero__title em {
    font-style: italic;
    color: var(--flash);
}
.hero__sub {
    margin-top: 28px;
    max-width: 44ch;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}
.hero__actions {
    margin-top: 40px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.hero__scroll {
    /* In normal document flow (not position:absolute) so it can never
       overlap the CTA buttons above it — a fixed-offset absolute version
       collided with "Explore the Spaces" on real shorter browser viewports
       (browser chrome/bookmarks bar eating into vh), reported by Daz. */
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--muted);
}
.hero__scroll-line {
    width: 1px; height: 46px;
    background: linear-gradient(180deg, var(--flash), transparent);
    animation: scrollDrift 2.2s ease-in-out infinite;
}
@keyframes scrollDrift { 0%,100% { transform: scaleY(1); opacity: 0.7; } 50% { transform: scaleY(0.6); opacity: 1; } }

@media (max-width: 900px) {
    .hero { padding-top: 120px; align-items: center; }
    .hero__image { position: relative; top: auto; right: -8vw; width: 108vw; height: 46vh; margin-bottom: 26px; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
    .hero__content { padding-bottom: 4vh; }
    .hero__scroll { display: none; }
}

/* -------------------------------------------------------------------
   Section rhythm — varied, not uniform stacked bands
   ------------------------------------------------------------------- */
.section { position: relative; padding: 120px 0; }
.section--tight { padding: 80px 0; }
.section--on-dark { color: var(--paper); }
.section--paper {
    background: var(--paper);
    color: var(--ink);
    border-radius: 46px 46px 0 0;
    margin-top: -46px;
    position: relative;
    z-index: 3;
}
.section--paper.on-paper { color: var(--ink); }

/* Continuation of the paper treatment for a run of light sections that
   follow straight on from a .section--paper without a dark canvas between
   them — same colour, no rounded "lift" seam (that's reserved for the one
   moment a paper section is overlapping a dark canvas above it). */
.section--paper-cont {
    background: var(--paper);
    color: var(--ink);
    position: relative;
    z-index: 3;
}

/* Utility text-colour helpers for content that now lives on paper but used
   to assume a dark ambient context (moved out of .dark-canvas as part of
   the 2026-07-12 colour rebalance — see CLAUDE.md). */
.on-paper .intro-stat__label,
.on-paper .custom-point p,
.on-paper .space-row__mood { color: var(--muted-dark); }
.on-paper .custom-point { border-top-color: var(--ink-line); }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 64px;
    flex-wrap: wrap;
}
.section-head__title { max-width: 620px; }
.section-head__aside { max-width: 340px; padding-bottom: 6px; }

@media (max-width: 720px) {
    .section { padding: 76px 0; }
    .section-head { margin-bottom: 42px; }
}

/* -------------------------------------------------------------------
   Intro / signature-work strip on the homepage
   ------------------------------------------------------------------- */
.intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: center;
}
.intro-grid__figures { position: relative; }
.intro-figure {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/5;
}
.intro-figure img { width: 100%; height: 100%; object-fit: cover; }
.intro-figure--float {
    position: absolute;
    width: 58%;
    aspect-ratio: 1/1;
    bottom: -12%;
    left: -14%;
    border: 6px solid var(--ink);
    box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.intro-number {
    font-family: var(--font-display);
    font-size: 5.5rem;
    color: var(--flash);
    line-height: 0.8;
    margin-bottom: 18px;
}
.intro-stats {
    display: flex;
    gap: 44px;
    margin-top: 46px;
    flex-wrap: wrap;
}
.intro-stat__value { font-family: var(--font-display); font-size: 2.6rem; color: var(--flash); }
.intro-stat__label { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

@media (max-width: 900px) {
    .intro-grid { grid-template-columns: 1fr; gap: 90px; }
    .intro-figure--float { position: relative; width: 100%; bottom: auto; left: auto; margin-top: 20px; border-width: 4px; }
}

/* -------------------------------------------------------------------
   Studio Spaces — signature alternating asymmetric rows, images
   overlapping the text column and bleeding to the container edge.
   ------------------------------------------------------------------- */
.space-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    margin-bottom: 44px;
    position: relative;
}
.tour-panel--standalone { margin: 0 auto 130px; }
.tour-panel--standalone:last-child { margin-bottom: 0; }
.space-row__media { position: relative; z-index: 1; }
.space-row__media img {
    width: 100%;
    aspect-ratio: 6/7;
    object-fit: cover;
    border-radius: var(--radius);
}
.space-row__text {
    position: relative;
    z-index: 2;
    background: var(--ink-2);
    color: var(--paper);
    border: 1px solid var(--paper-line);
    padding: 56px;
    margin-left: -90px;
    box-shadow: 0 24px 60px rgba(14,14,13,0.22);
}
.space-row__number {
    font-family: var(--font-display);
    color: var(--flash);
    font-size: 1.1rem;
    margin-bottom: 14px;
    letter-spacing: 0.05em;
}
.space-row__name { font-size: clamp(2.2rem, 3.6vw, 3.2rem); margin-bottom: 6px; }
.space-row__kicker {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 22px;
}
.space-row__mood { color: var(--muted); font-size: 1.02rem; margin-bottom: 26px; }
.space-row__tags { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.space-row__tags li {
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    padding: 8px 14px;
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    color: var(--paper);
}

.space-row--reverse { grid-template-columns: 1fr 1fr; }
.space-row--reverse .space-row__media { order: 2; }
.space-row--reverse .space-row__text { order: 1; margin-left: 0; margin-right: -90px; }

@media (max-width: 980px) {
    .space-row, .space-row--reverse { grid-template-columns: 1fr; }
    .space-row--reverse .space-row__media, .space-row--reverse .space-row__text { order: initial; }
    .space-row__text { margin-left: 0; margin-right: 0; padding: 34px 26px; margin-top: -50px; width: calc(100% - 30px); }
    .space-row { margin-bottom: 70px; }
}

/* 360 tour preview — a deliberately framed "preview window", not a live
   embed. Originally a Momento360 iframe; replaced 2026-07-12 after real
   testing showed the public sample panoramas took 8-13s to render (a solid
   black box until then) and, once loaded, showed generic interiors that
   didn't read as this studio at all — see CLAUDE.md. A static room photo
   with an honest "tour available on request" treatment reads as more
   premium than a live embed that looks broken on first paint. */
.tour-panel {
    margin-top: 28px;
    border: 1px solid var(--ink-line);
    background: var(--ink);
    max-width: 460px;
    box-shadow: 0 24px 50px rgba(13,12,10,0.28);
}
.tour-fallback {
    position: relative;
    aspect-ratio: 4/3;
    max-height: 320px;
    overflow: hidden;
}
.tour-fallback img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.5) saturate(0.9); }
.tour-fallback::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(13,12,10,0.1) 0%, rgba(13,12,10,0.55) 100%);
}
.tour-fallback__badge {
    position: absolute;
    top: 16px; left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1px solid rgba(244,238,227,0.5);
    border-radius: 999px;
    background: rgba(13,12,10,0.55);
    backdrop-filter: blur(4px);
    color: var(--paper);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tour-fallback__badge .icon { width: 13px; height: 13px; color: var(--flash); }
.tour-fallback__label {
    position: absolute; inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 20px;
}
.tour-fallback__label .icon { width: 26px; height: 26px; color: var(--flash); }
.tour-fallback__label strong { font-family: var(--font-display); font-size: 1.25rem; color: var(--paper); text-shadow: 0 1px 10px rgba(0,0,0,0.75); }
.tour-fallback__label span { font-size: 0.76rem; color: var(--paper); opacity: 0.85; letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0,0,0,0.75); }
.tour-panel__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    font-size: 0.76rem;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.tour-panel__foot .tag-live { color: var(--flash); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; }
.tour-panel__foot span { display: inline-flex; align-items: center; gap: 7px; }
.tour-panel__foot .icon { width: 14px; height: 14px; flex: none; }

/* -------------------------------------------------------------------
   Portfolio — asymmetric masonry-style grid, cards overlap the
   section boundary above.
   ------------------------------------------------------------------- */
.portfolio-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 50px;
}
.portfolio-tab {
    padding: 12px 22px;
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--ink);
    transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.portfolio-tab.is-active, .portfolio-tab:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.portfolio-group { margin-bottom: 90px; }
.portfolio-group:last-child { margin-bottom: 0; }
.portfolio-group__head { margin-bottom: 30px; max-width: 620px; }
.portfolio-group__head h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 8px; }
.portfolio-group__head p { color: var(--muted-dark); }

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}
.portfolio-grid figure {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    position: relative;
}
.portfolio-grid img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.portfolio-grid figure:hover img { transform: scale(1.06); }
.portfolio-grid figure:nth-child(6n+1) { grid-column: span 4; grid-row: span 2; aspect-ratio: 4/5; }
.portfolio-grid figure:nth-child(6n+2) { grid-column: span 2; aspect-ratio: 3/4; }
.portfolio-grid figure:nth-child(6n+3) { grid-column: span 2; aspect-ratio: 3/4; }
.portfolio-grid figure:nth-child(6n+4) { grid-column: span 3; aspect-ratio: 5/4; }
.portfolio-grid figure:nth-child(6n+5) { grid-column: span 3; aspect-ratio: 5/4; }

@media (max-width: 900px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
    .portfolio-grid figure, .portfolio-grid figure:nth-child(6n+1), .portfolio-grid figure:nth-child(6n+2),
    .portfolio-grid figure:nth-child(6n+3), .portfolio-grid figure:nth-child(6n+4), .portfolio-grid figure:nth-child(6n+5) {
        grid-column: span 1; grid-row: span 1; aspect-ratio: 4/5;
    }
}

/* -------------------------------------------------------------------
   Custom Builds — pitch + dedicated quote form
   ------------------------------------------------------------------- */
.custom-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 0;
    min-height: 74vh;
    align-items: stretch;
}
.custom-hero__media { position: relative; overflow: hidden; }
.custom-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.05); }
.custom-hero__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 60%, var(--ink) 100%);
}
.custom-hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 70px 0 70px 70px;
}
@media (max-width: 980px) {
    .custom-hero { grid-template-columns: 1fr; }
    .custom-hero__media { height: 42vh; }
    .custom-hero__text { padding: 50px 22px; }
}

.quote-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--flash);
    border-radius: 999px;
    color: var(--flash);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 26px;
    /* ⚠️ 2026-08-16: a longer label wrapped this pill to three lines on a
       phone, and because the icon had no size of its own it stretched to the
       new height and filled half the screen. Keep the label short, and keep
       these two rules so a future edit cannot do it again. */
    max-width: 100%;
}
.quote-badge .icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.custom-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 20px;
}
.custom-point {
    border-top: 1px solid var(--paper-line);
    padding-top: 22px;
}
.custom-point .icon { width: 26px; height: 26px; color: var(--flash); margin-bottom: 16px; }
.custom-point h3 { font-size: 1.3rem; margin-bottom: 10px; font-weight: 500; }
.custom-point p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 780px) { .custom-points { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------
   Forms — used by both Book/Contact and Custom Builds, re-skinned
   per context (dark vs paper) via the .on-paper modifier
   ------------------------------------------------------------------- */
.form-panel {
    background: var(--ink-2);
    border: 1px solid var(--paper-line);
    padding: 48px;
    border-radius: var(--radius);
}
.on-paper .form-panel {
    background: #fff;
    border-color: var(--ink-line);
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.on-paper .field label { color: var(--muted-dark); }
.field input, .field select, .field textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--paper-line);
    color: var(--paper);
    padding: 12px 2px;
    font-family: var(--font-body);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.25s;
}
.on-paper .field input, .on-paper .field select, .on-paper .field textarea {
    color: var(--ink);
    border-bottom-color: var(--ink-line);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--flash); }
.field textarea { resize: vertical; min-height: 110px; }
.field-hint { font-size: 0.78rem; color: var(--muted); margin-top: -14px; margin-bottom: 22px; }

.file-drop {
    border: 1px dashed var(--paper-line);
    padding: 26px;
    text-align: center;
    border-radius: var(--radius);
    margin-bottom: 22px;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s;
}
.file-drop:hover { border-color: var(--flash); }
.on-paper .file-drop { border-color: var(--ink-line); }
.file-drop .icon { width: 22px; height: 22px; color: var(--flash); margin-bottom: 10px; }
.file-drop small { display: block; color: var(--muted); margin-top: 6px; font-size: 0.76rem; }
.on-paper .file-drop small { color: var(--muted-dark); }
.file-drop input[type=file] { display: none; }
.file-drop__filename { font-size: 0.85rem; margin-top: 8px; color: var(--flash); }

.alert {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 18px;
    border-radius: var(--radius);
    margin-bottom: 26px;
    font-size: 0.92rem;
}
.alert--success { background: rgba(255,90,46,0.12); border: 1px solid var(--flash); color: var(--flash-2); }
.alert--error { background: rgba(255,90,46,0.12); border: 1px solid var(--flash); color: var(--flash-2); }
.on-paper .alert--success { color: #a83f1f; background: rgba(255,90,46,0.08); }
.on-paper .alert--error { color: #a83f1f; background: rgba(255,90,46,0.08); }
.alert .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* -------------------------------------------------------------------
   Contact info strip (Book/Contact page)
   ------------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
    align-items: start;
}
.contact-info h2 { margin-bottom: 22px; }
.contact-list { list-style: none; margin: 34px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-list .icon { width: 20px; height: 20px; color: var(--flash); margin-top: 2px; flex: none; }
.contact-list strong { display: block; font-size: 0.95rem; }
.contact-list span { color: var(--muted-dark); font-size: 0.9rem; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------
   About page
   ------------------------------------------------------------------- */
.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.about-split img { border-radius: var(--radius); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.about-split--reverse .about-split__media { order: 2; }
.about-split p { color: var(--muted); margin-top: 20px; }
.on-paper .about-split p { color: var(--muted-dark); }
@media (max-width: 900px) {
    .about-split, .about-split--reverse { grid-template-columns: 1fr; gap: 40px; }
    .about-split--reverse .about-split__media { order: initial; }
}

.value-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 20px;
}
.value-card .intro-number { font-size: 3rem; margin-bottom: 12px; }
.value-card h3 { font-size: 1.3rem; margin-bottom: 10px; font-weight: 500; }
.value-card p { color: var(--muted-dark); font-size: 0.95rem; }
@media (max-width: 780px) { .value-grid { grid-template-columns: 1fr; gap: 34px; } }

/* -------------------------------------------------------------------
   CTA banner — overlaps into footer, continuous background
   ------------------------------------------------------------------- */
.cta-banner {
    position: relative;
    background: var(--ink);
    color: var(--paper);
    padding: 130px 0 170px;
    margin-bottom: -70px;
    text-align: center;
    overflow: hidden;
}
.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 700px 400px at 50% 0%, rgba(255,90,46,0.18), transparent 65%);
}
.cta-banner__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.cta-banner h2 { margin-bottom: 26px; }
.cta-banner .lede { margin: 0 auto 40px; text-align: center; }
.cta-banner__actions { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------- */
.site-footer {
    position: relative;
    z-index: 2;
    background: var(--ink-2);
    padding-top: 90px;
    border-top: 1px solid var(--paper-line);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 50px;
    padding-bottom: 60px;
}
.footer-brand p { color: var(--muted); margin: 20px 0 24px; max-width: 34ch; font-size: 0.92rem; }
.footer-brand .brand { margin-bottom: 4px; }
.footer-brand .brand__name { color: var(--paper); }
.footer-brand .brand__tag { color: var(--muted); }
.socials a { color: var(--muted); }
.socials { display: flex; gap: 12px; }
.socials a {
    width: 38px; height: 38px;
    border: 1px solid var(--paper-line);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.25s, color 0.25s;
}
.socials a:hover { border-color: var(--flash); color: var(--flash); }
.socials .icon { width: 16px; height: 16px; }

.footer-col h4 {
    font-family: var(--font-body);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 18px;
    font-weight: 700;
}
.footer-col a, .footer-contact li {
    display: block;
    font-size: 0.92rem;
    padding: 6px 0;
    color: var(--paper);
}
.footer-col a:hover { color: var(--flash); }
.footer-contact { list-style: none; margin: 0; padding: 0; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.footer-contact .icon { width: 16px; height: 16px; color: var(--flash); margin-top: 3px; flex: none; }
.footer-contact span { color: var(--muted); font-size: 0.88rem; }

.footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 26px 0;
    border-top: 1px solid var(--paper-line);
    font-size: 0.82rem;
    color: var(--muted);
}
.footer-credit .credit-link { color: var(--flash); font-weight: 700; }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a:hover { color: var(--flash); }
.footer-fineprint {
    padding: 18px 0 40px;
    font-size: 0.76rem;
    color: var(--muted-dark);
    max-width: 80ch;
}

@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bar { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------
   Cookie bar (shared platform convention, self-hosted)
   ------------------------------------------------------------------- */
.cookie-bar {
    /* ⚠️ This panel is dark (--ink-2) but never declared a text colour, so it
       inherited the page's dark ink. Nothing showed it until the buttons began
       inheriting their colour too, and "Accept all" came out near black on
       near black. A dark panel must always state its own text colour. */
    color: var(--paper);
    position: fixed;
    left: 24px; right: 24px; bottom: 24px;
    max-width: 640px;
    margin: 0 auto;
    background: var(--ink-2);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius);
    padding: 20px 24px;
    z-index: 300;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: 0.86rem; color: var(--muted); flex: 1; min-width: 220px; }
.cookie-bar a { color: var(--flash); }
.cookie-bar__actions { display: flex; gap: 10px; }

/* -------------------------------------------------------------------
   Scroll-reveal + cursor spotlight (foundational platform effects,
   reused per brief — everything else here is new)
   ------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(.2,.8,.2,1), transform 0.8s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

.spotlight { position: relative; }
.spotlight::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,90,46,0.16), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 1;
}
.spotlight:hover::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero__scroll-line { animation: none; }
    html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------
   Page banner (non-home pages)
   ------------------------------------------------------------------- */
.page-banner {
    padding: 200px 0 100px;
    position: relative;
}
.page-banner__title { max-width: 900px; }
.page-banner .lede { margin-top: 22px; }

/* Legal / simple content pages */
.prose { max-width: 74ch; }
.prose h2 { font-size: 1.6rem; margin: 40px 0 14px; font-weight: 500; }
.prose p, .prose li { color: var(--muted-dark); margin-bottom: 14px; }