/* ==========================================================================
   Plat Construction — "Industrial charcoal + amber"
   Design tokens + components for every page. Self-contained; replaces styles.css.
   Palette is derived from the logo ink, rgb(40,42,42).

   Contents
     1. Tokens
     2. Reset & base
     3. Typography
     4. Layout primitives
     5. Buttons & links
     6. Navigation
     7. Home hero + stat strip
     8. Page hero (subpages)
     9. Credentials bar
    10. Cards (services, values, topics, licences)
    11. Split sections & feature lists
    12. Media splits (service detail rows)
    13. Tiles (projects, articles)
    14. Filters
    15. Process steps
    16. Group cards
    17. Person (founder)
    18. Quotes
    19. Forms
    20. FAQ
    21. Callouts, badges, map
    22. Newsletter
    23. CTA band
    24. Footer
    25. Responsive
    26. Reduced motion & print
   ========================================================================== */

/* ------------------------------------------------------------- 1. tokens */

:root {
    /* Ink scale — dark surfaces */
    --ink-950: #0C0E0F;
    --ink-900: #121517;
    --ink-850: #16181A;
    --ink-800: #1D2124;
    --ink-750: #252A2E;
    --ink-700: #2E343A;
    --ink-600: #3D454C;

    /* Light surfaces */
    --paper: #FFFFFF;
    --paper-2: #F5F6F7;
    --paper-3: #EBEDEF;
    --line: #E1E4E7;
    --line-strong: #CBD0D5;

    /* Text — all pairings verified >= 4.5:1 */
    --tx: #16181A;
    --tx-muted: #565F66;
    --tx-dark: #F4F5F6;
    --tx-dark-muted: #A2A9AF;

    /* Accent */
    --amber: #F0B429;
    --amber-bright: #FFC93C;
    --amber-deep: #C98A0B;
    --amber-ink: #8A5A00;   /* amber-family text on light backgrounds */

    /* Status — chosen for contrast, not vibrancy */
    --green: #047857;       /* 5.5:1 with white */
    --green-tint: #ECFDF5;
    --red: #B91C1C;         /* 6.5:1 with white */
    --red-tint: #FEF2F2;

    /* Type */
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Space & shape */
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --section-y: clamp(4.5rem, 9vw, 7.5rem);
    --radius: 4px;
    --radius-lg: 6px;
    --nav-h: 64px;

    /* Motion */
    --ease: cubic-bezier(.2, .7, .3, 1);
}

/* --------------------------------------------------------- 2. reset & base */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font);
    background: var(--paper);
    color: var(--tx);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip-link {
    position: absolute;
    left: 0; top: 0;
    padding: .75rem 1.25rem;
    background: var(--amber);
    color: var(--ink-950);
    font-weight: 600;
    z-index: 200;
    transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- 3. typography */

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    text-wrap: balance;
}

.display {
    font-size: clamp(2.5rem, 6.2vw, 4.25rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.02;
}

h2 { font-size: clamp(1.875rem, 3.6vw, 2.625rem); }
h3 { font-size: 1.1875rem; letter-spacing: -.015em; }
h4 { font-size: 1.0625rem; letter-spacing: -.01em; }

p { text-wrap: pretty; }

.eyebrow {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--amber-ink);
    margin-bottom: 1.25rem;
}
.eyebrow::before {
    content: '';
    width: 1.75rem; height: 2px;
    background: var(--amber);
    flex: none;
}

.lead {
    font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
    color: var(--tx-muted);
    max-width: 54ch;
}

/* Dark contexts: .hero, .page-hero and .footer are dark but are not .on-dark
   sections, so every on-dark text override must list them too. */
:is(.on-dark, .on-darker, .hero, .page-hero, .footer) .eyebrow { color: var(--amber); }
:is(.on-dark, .on-darker, .hero, .page-hero, .footer) .lead { color: var(--tx-dark-muted); }

/* Body copy stack */
.prose > * + * { margin-top: 1.125rem; }
.prose p { color: var(--tx-muted); }
:is(.on-dark, .on-darker, .hero, .page-hero, .footer) .prose p { color: var(--tx-dark-muted); }
.prose strong { color: var(--tx); font-weight: 600; }
:is(.on-dark, .on-darker, .page-hero, .footer) .prose strong { color: var(--tx-dark); }

/* --------------------------------------------------- 4. layout primitives */

.container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container-narrow { max-width: 860px; }

.section { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head p { color: var(--tx-muted); margin-top: 1rem; }
.on-dark .section-head p { color: var(--tx-dark-muted); }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .eyebrow { justify-content: center; }

.section-foot { margin-top: clamp(2rem, 4vw, 3rem); }

.on-dark { background: var(--ink-900); color: var(--tx-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--tx-dark); }

/* Always author as class="on-dark on-darker" — on-darker only deepens the
   background, and pairing it means every `.on-dark X` component rule applies
   rather than having to be re-listed for each dark variant. */
.on-darker { background: var(--ink-950); color: var(--tx-dark); }
.on-darker h2, .on-darker h3, .on-darker h4 { color: var(--tx-dark); }

.alt { background: var(--paper-2); }

/* ---------------------------------------------------- 5. buttons & links */

.btn {
    --btn-bg: var(--amber);
    --btn-tx: var(--ink-950);
    --btn-bd: var(--amber);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .875rem 1.5rem;
    background: var(--btn-bg);
    color: var(--btn-tx);
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius);
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
    transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { background: var(--amber-bright); border-color: var(--amber-bright); transform: translateY(-1px); }
.btn i { font-size: .8125rem; }
.btn[disabled] { opacity: .6; pointer-events: none; }

.btn-ghost {
    --btn-bg: transparent;
    --btn-tx: var(--tx);
    --btn-bd: var(--line-strong);
}
.btn-ghost:hover { background: var(--paper-2); border-color: var(--tx); transform: translateY(-1px); }

.on-dark .btn-ghost, .btn-ghost-dark {
    --btn-bg: transparent;
    --btn-tx: var(--tx-dark);
    --btn-bd: var(--ink-600);
}
.on-dark .btn-ghost:hover, .btn-ghost-dark:hover {
    background: var(--ink-800);
    border-color: var(--tx-dark-muted);
}

.btn-dark { --btn-bg: var(--ink-950); --btn-tx: var(--tx-dark); --btn-bd: var(--ink-950); }
.btn-dark:hover { background: var(--ink-800); border-color: var(--ink-800); }

/* white button, for use on the amber and blue-free dark bands */
.btn-light { --btn-bg: var(--paper); --btn-tx: var(--ink-950); --btn-bd: var(--paper); }
.btn-light:hover { background: var(--paper-2); border-color: var(--paper-2); }

.btn-danger { --btn-bg: var(--red); --btn-tx: #fff; --btn-bd: var(--red); }
.btn-danger:hover { background: #991B1B; border-color: #991B1B; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--amber-ink);
}
.link-arrow i { transition: transform .18s var(--ease); }
.link-arrow:hover i { transform: translateX(3px); }
:is(.on-dark, .on-darker, .hero, .page-hero, .footer) .link-arrow { color: var(--amber); }

/* ------------------------------------------------------------ 6. nav */

.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(12, 14, 15, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ink-700);
    color: var(--tx-dark);
}

.nav-inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
}

.brand { display: flex; align-items: center; gap: .625rem; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: .9375rem; font-weight: 700; letter-spacing: .04em; }
.brand-sub {
    font-size: .5625rem; font-weight: 500; letter-spacing: .18em;
    color: var(--tx-dark-muted); margin-top: .2rem;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 1.8vw, 1.75rem);
    margin-left: auto;
}
.nav-links a {
    position: relative;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--tx-dark-muted);
    padding-block: .35rem;
    transition: color .16s var(--ease);
}
.nav-links a:hover { color: var(--tx-dark); }
.nav-links a[aria-current="page"] { color: var(--tx-dark); }
.nav-links a[aria-current="page"]::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -.15rem;
    height: 2px; background: var(--amber);
}

.nav-actions { display: flex; align-items: center; gap: .875rem; flex: none; }
.nav-phone {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .9375rem; font-weight: 600; color: var(--tx-dark);
}
.nav-phone i { color: var(--amber); font-size: .8125rem; }
.nav-actions .btn { padding: .625rem 1.125rem; font-size: .875rem; }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ink-700);
    border-radius: var(--radius);
    color: var(--tx-dark);
}
.nav-toggle span {
    display: block; position: relative;
    width: 18px; height: 2px; background: currentColor;
    transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span::before, .nav-toggle span::after {
    content: ''; position: absolute; left: 0;
    width: 18px; height: 2px; background: currentColor;
    transition: transform .2s var(--ease);
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------ 7. home hero + stats */

.hero {
    position: relative;
    isolation: isolate;
    background: var(--ink-950);
    color: var(--tx-dark);
    padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 4.5rem);
    overflow: hidden;
}
/* fine technical grid + amber bloom, so the dark panel isn't flat */
.hero::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 80% 70% at 15% 0%, #000 30%, transparent 75%);
}
.hero::after {
    content: '';
    position: absolute; z-index: -1;
    top: -30%; right: -10%;
    width: 55rem; height: 55rem;
    background: radial-gradient(circle, rgba(240, 180, 41, .16), transparent 62%);
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: center;
}

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em { font-style: normal; color: var(--amber); }
.hero .lead { margin-bottom: 2.25rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .875rem; }

.hero-figure { position: relative; }
.hero-figure img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--ink-700);
}
/* amber corner bracket, an "engineering drawing" cue */
.hero-figure::after {
    content: '';
    position: absolute;
    left: -10px; bottom: -10px;
    width: 4.5rem; height: 4.5rem;
    border-left: 3px solid var(--amber);
    border-bottom: 3px solid var(--amber);
    border-bottom-left-radius: 2px;
}

.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: clamp(3rem, 6vw, 4.5rem);
    border-top: 1px solid var(--ink-700);
}
.stat-strip-flush { margin-top: 0; border-top: 0; }
.stat {
    padding: 1.5rem 1.25rem 0 1.25rem;
    border-left: 1px solid var(--ink-700);
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat dt {
    font-size: .6875rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--tx-dark-muted);
    margin-top: .4rem;
}
.stat dd {
    font-size: clamp(1.75rem, 3.4vw, 2.375rem);
    font-weight: 800; letter-spacing: -.03em; line-height: 1;
    color: var(--tx-dark);
}
.stat dd .u { color: var(--amber); }

/* --------------------------------------------- 8. page hero (subpages) */

.page-hero {
    position: relative;
    isolation: isolate;
    background: var(--ink-950);
    color: var(--tx-dark);
    padding-block: clamp(3.25rem, 7vw, 5rem);
    overflow: hidden;
    border-bottom: 1px solid var(--ink-700);
}
.page-hero::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 70% 90% at 10% 0%, #000 25%, transparent 72%);
}
.page-hero::after {
    content: '';
    position: absolute; z-index: -1;
    top: -60%; right: -6%;
    width: 38rem; height: 38rem;
    background: radial-gradient(circle, rgba(240, 180, 41, .14), transparent 62%);
    pointer-events: none;
}
.page-hero h1 {
    font-size: clamp(2.125rem, 4.6vw, 3.25rem);
    letter-spacing: -.03em;
    max-width: 24ch;
}
.page-hero .lead { margin-top: 1.125rem; }

.crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .8125rem; color: var(--tx-dark-muted);
    margin-bottom: 1.5rem;
}
.crumbs a:hover { color: var(--amber); }
.crumbs i { font-size: .5rem; opacity: .6; }

/* ------------------------------------------------- 9. credentials bar */

.creds {
    background: var(--ink-850);
    border-bottom: 1px solid var(--ink-700);
    padding-block: 1.5rem;
    color: var(--tx-dark);
}
.creds ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem 2rem;
}
.creds li {
    display: flex; align-items: center; gap: .75rem;
    font-size: .9375rem; font-weight: 500;
}
.creds i { color: var(--amber); font-size: 1rem; flex: none; }

/* --------------------------------------------------------- 10. cards */

/* hairline dividers instead of floating drop-shadowed boxes */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }

.card {
    position: relative;
    background: var(--paper);
    padding: clamp(1.75rem, 3vw, 2.25rem);
    transition: background .2s var(--ease);
}
.card::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 2px; background: var(--amber);
    transform: scaleX(0); transform-origin: left;
    transition: transform .25s var(--ease);
}
.card:hover { background: var(--paper-2); }
.card:hover::before { transform: scaleX(1); }

.card-num {
    font-size: .75rem; font-weight: 700;
    letter-spacing: .1em; color: var(--amber-ink);
    margin-bottom: 1.5rem;
}
.card i.card-icon { font-size: 1.375rem; color: var(--tx); margin-bottom: 1rem; }
.card h3 { margin-bottom: .625rem; }
.card p { font-size: .9375rem; color: var(--tx-muted); }
.card .link-arrow { margin-top: 1.125rem; }

/* dark variant, for card grids inside .on-dark sections */
.on-dark .card-grid { background: var(--ink-700); border-color: var(--ink-700); }
.on-dark .card { background: var(--ink-900); }
.on-dark .card:hover { background: var(--ink-850); }
.on-dark .card p { color: var(--tx-dark-muted); }
.on-dark .card i.card-icon { color: var(--amber); }
.on-dark .card-num { color: var(--amber); }

/* small spec item: icon, title, one line of detail */
.spec h4 { margin-bottom: .35rem; }
.spec p { font-size: .875rem; color: var(--tx-muted); }
.spec i { color: var(--amber-ink); font-size: 1.125rem; margin-bottom: .875rem; }
.on-dark .spec i { color: var(--amber); }
.on-dark .spec p { color: var(--tx-dark-muted); }

/* ------------------------------------- 11. split sections & feature lists */

.split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: center;
}
.split-start { align-items: start; }

.feature-list { display: grid; gap: 0; margin-top: 2.25rem; }
.feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    padding: 1.375rem 0;
    border-top: 1px solid var(--line);
}
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature i { color: var(--amber-ink); font-size: 1rem; margin-top: .3rem; }
.feature h4 { margin-bottom: .3rem; }
.feature p { font-size: .9375rem; color: var(--tx-muted); }

.on-dark .feature { border-top-color: var(--ink-700); }
.on-dark .feature:last-child { border-bottom-color: var(--ink-700); }
.on-dark .feature i { color: var(--amber); }
.on-dark .feature p { color: var(--tx-dark-muted); }

.figure-plain img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
.on-dark .figure-plain img, .page-hero .figure-plain img { border-color: var(--ink-700); }

/* ticked list */
.check-list { display: grid; gap: .625rem; margin-top: 1.5rem; }
.check-list li {
    display: grid; grid-template-columns: auto 1fr; gap: .625rem;
    font-size: .9375rem; color: var(--tx-muted);
}
.check-list i { color: var(--green); font-size: .8125rem; margin-top: .4rem; }
.on-dark .check-list li { color: var(--tx-dark-muted); }
.on-dark .check-list i { color: var(--amber); }

/* two-column key/value details */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}
.detail-grid dt {
    font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tx-muted); margin-bottom: .3rem;
}
.detail-grid dd { font-weight: 600; }
.on-dark .detail-grid { border-top-color: var(--ink-700); }
.on-dark .detail-grid dt { color: var(--tx-dark-muted); }

/* ------------------------------------------------- 12. media splits */

.media-split {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: clamp(2.5rem, 6vw, 4.5rem);
    align-items: center;
    padding-block: clamp(2.75rem, 5vw, 4rem);
    border-top: 1px solid var(--line);
}
.media-split:first-of-type { border-top: 0; padding-top: 0; }
.media-split img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
/* order instead of direction:rtl — the old trick reversed inline content too */
.media-split-flip .media-split-figure { order: -1; }

.icon-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--amber-ink);
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}

/* --------------------------------------------------------- 13. tiles */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

.tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper);
    transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.tile:hover { border-color: var(--line-strong); transform: translateY(-3px); }
.tile[hidden] { display: none; }

.tile-media { position: relative; overflow: hidden; }
.tile-media img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .5s var(--ease);
}
.tile:hover .tile-media img { transform: scale(1.04); }

.tag {
    position: absolute; top: .875rem; left: .875rem;
    padding: .3rem .625rem;
    background: var(--amber);
    color: var(--ink-950);
    border-radius: 3px;
    font-size: .6875rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}

.tile-body {
    padding: 1.375rem;
    display: flex; flex-direction: column;
    flex: 1; gap: .625rem;
}
.tile-body h3 { letter-spacing: -.018em; }
.tile-body p { font-size: .9375rem; color: var(--tx-muted); }

.tile-meta {
    display: flex; flex-wrap: wrap; gap: .35rem 1rem;
    margin-top: auto; padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .8125rem; color: var(--tx-muted);
}
.tile-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.tile-meta i { color: var(--amber-ink); font-size: .75rem; }

/* gallery affordance: photo count badge on the cover */
a.tile-media { display: block; }
.tile-count {
    position: absolute; right: .875rem; bottom: .875rem;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .55rem;
    background: rgba(12, 14, 15, .82);
    color: var(--tx-dark);
    border-radius: 3px;
    font-size: .75rem; font-weight: 600;
    backdrop-filter: blur(4px);
}
.tile-count i { font-size: .6875rem; color: var(--amber); }

/* The remaining gallery photos, as plain links. Hidden only once JS is
   present to run the lightbox — so if JS fails you get a usable list of
   links rather than missing content. */
.tile-more { padding: 0 1.375rem 1.375rem; display: grid; gap: .4rem; font-size: .8125rem; }
.tile-more a { color: var(--amber-ink); font-weight: 600; }
.tile-more a:hover { text-decoration: underline; }
.js .tile-more { display: none; }

/* -------------------------------------------------------- 13b. lightbox */

.lightbox {
    position: fixed; inset: 0; z-index: 300;
    display: grid;
    grid-template-rows: auto 1fr auto;
    background: rgba(8, 9, 10, .96);
    backdrop-filter: blur(6px);
    opacity: 0;
    /* visibility is deliberately NOT transitioned. A delayed visibility
       transition can fail to complete (backgrounded tab, interrupted
       animation), leaving an invisible overlay that still swallows clicks and
       keeps its buttons in the tab order. Instant hide, animated open. */
    visibility: hidden;
    transition: opacity .2s var(--ease);
}
.lightbox[data-open="true"] {
    opacity: 1;
    visibility: visible;
}

.lightbox-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .875rem clamp(.875rem, 3vw, 1.5rem);
    border-bottom: 1px solid var(--ink-700);
    color: var(--tx-dark-muted);
    font-size: .8125rem;
}
.lightbox-count { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.lightbox-stage {
    position: relative;
    display: grid; place-items: center;
    padding: clamp(.75rem, 2.5vw, 1.75rem);
    min-height: 0;
}
.lightbox-stage img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    border-radius: var(--radius);
    background: var(--ink-800);
}
.lightbox-stage[data-loading="true"]::after {
    content: '';
    position: absolute;
    width: 1.75rem; height: 1.75rem;
    border: 2px solid var(--ink-600);
    border-top-color: var(--amber);
    border-radius: 50%;
    animation: lb-spin .7s linear infinite;
}
@keyframes lb-spin { to { transform: rotate(360deg); } }

.lightbox-foot {
    padding: .875rem clamp(.875rem, 3vw, 1.5rem) clamp(1rem, 3vw, 1.5rem);
    border-top: 1px solid var(--ink-700);
    color: var(--tx-dark-muted);
    font-size: .875rem;
    text-align: center;
    min-height: 3.25rem;
}

.lb-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    border: 1px solid var(--ink-700);
    border-radius: var(--radius);
    background: rgba(12, 14, 15, .6);
    color: var(--tx-dark);
    font-size: .9375rem;
    transition: background .16s var(--ease), border-color .16s var(--ease);
}
.lb-btn:hover { background: var(--ink-800); border-color: var(--tx-dark-muted); }
.lb-btn[disabled] { opacity: .35; pointer-events: none; }

.lightbox-prev, .lightbox-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 2;
}
.lightbox-prev { left: clamp(.25rem, 1.5vw, 1rem); }
.lightbox-next { right: clamp(.25rem, 1.5vw, 1rem); }

@media (max-width: 560px) {
    .lightbox-prev, .lightbox-next { top: auto; bottom: .5rem; transform: none; }
    .lightbox-foot { padding-bottom: 4rem; }
}

/* ------------------------------------------------------- 14. filters */

.filter-bar {
    display: flex; flex-wrap: wrap; gap: .5rem;
    margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.chip {
    padding: .5rem 1rem;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: .875rem; font-weight: 500;
    color: var(--tx-muted);
    transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.chip:hover { border-color: var(--tx); color: var(--tx); }
.chip[aria-pressed="true"] {
    background: var(--ink-950);
    border-color: var(--ink-950);
    color: var(--tx-dark);
}
.filter-empty { color: var(--tx-muted); font-size: .9375rem; }

/* -------------------------------------------------- 15. process steps */

.step-list { display: grid; gap: 0; counter-reset: step; }
.step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 3vw, 2rem);
    padding-block: 1.75rem;
    border-top: 1px solid var(--line);
    counter-increment: step;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before {
    content: counter(step, decimal-leading-zero);
    font-size: .8125rem; font-weight: 700;
    letter-spacing: .08em;
    color: var(--amber-ink);
    padding-top: .2rem;
}
.step h3 { margin-bottom: .4rem; }
.step p { font-size: .9375rem; color: var(--tx-muted); max-width: 62ch; }
.on-dark .step { border-top-color: var(--ink-700); }
.on-dark .step:last-child { border-bottom-color: var(--ink-700); }
.on-dark .step::before { color: var(--amber); }
.on-dark .step p { color: var(--tx-dark-muted); }

/* --------------------------------------------------- 16. group cards */

.group-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.group {
    display: flex; flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.group-top {
    display: flex; align-items: center; gap: .875rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.group-top h3 { flex: 1; min-width: 8rem; }
.group-top > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; flex: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    color: var(--amber-ink);
    font-size: 1rem;
}
.group > p { font-size: .9375rem; color: var(--tx-muted); }
.group h4 {
    font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tx-muted);
    margin-top: 1.5rem; margin-bottom: .75rem;
}
.group-foot {
    margin-top: auto; padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    font-size: .875rem;
}
.group-foot strong { display: block; }
.group-foot span { color: var(--tx-muted); }

.group-featured { border-color: var(--amber); border-width: 1px; box-shadow: inset 0 2px 0 var(--amber); }
.group-soon { background: var(--paper-2); }
.group-soon .group-top > i { color: var(--green); }

.group-stats {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    margin-top: 1.25rem;
}
.group-stats div { display: flex; flex-direction: column; }
.group-stats b {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
    line-height: 1.1; color: var(--amber-ink);
}
.group-stats span {
    font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--tx-muted); margin-top: .2rem;
}

/* ----------------------------------------------- 17. person (founder) */

.person {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: start;
}
.person-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
}
.person-role {
    font-size: .75rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--amber-ink);
    margin-top: .5rem; margin-bottom: 1.25rem;
}
.on-dark .person-role { color: var(--amber); }
.on-dark .person-photo img { border-color: var(--ink-700); }

/* ------------------------------------------------------- 18. quotes */

.quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}
.quote {
    display: flex; flex-direction: column;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.stars { display: flex; gap: .2rem; color: var(--amber-deep); font-size: .8125rem; }
.quote blockquote { font-size: 1rem; line-height: 1.6; }
.quote figcaption {
    margin-top: auto; padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .875rem;
}
.quote figcaption strong { display: block; font-weight: 600; }
.quote figcaption span { color: var(--tx-muted); }

/* -------------------------------------------------------- 19. forms */

.form-panel {
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.form-panel h2, .form-panel h3 { margin-bottom: .5rem; }
.form-panel > p { color: var(--tx-muted); font-size: .9375rem; margin-bottom: 1.75rem; }

.field { margin-bottom: 1.125rem; }
.field label {
    display: block;
    font-size: .8125rem; font-weight: 600;
    letter-spacing: .02em;
    margin-bottom: .4rem;
}
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
    width: 100%;
    padding: .75rem .875rem;
    font: inherit;
    font-size: .9375rem;
    color: var(--tx);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--amber-deep);
    box-shadow: 0 0 0 3px rgba(240, 180, 41, .25);
}
.field input::placeholder, .field textarea::placeholder { color: #7C858C; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 1rem; }
.field-hint { font-size: .8125rem; color: var(--tx-muted); margin-top: .35rem; }

.form-status {
    margin-top: 1.125rem;
    padding: .875rem 1rem;
    border-radius: var(--radius);
    font-size: .9375rem;
    border: 1px solid transparent;
}
.form-status[hidden] { display: none; }
.form-status-ok { background: var(--green-tint); border-color: #A7F3D0; color: #065F46; }
.form-status-err { background: var(--red-tint); border-color: #FECACA; color: #991B1B; }

/* ---------------------------------------------------------- 20. faq */

.faq { display: grid; gap: 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.25rem 0;
    font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em;
    cursor: pointer;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: '\002B';
    flex: none;
    font-size: 1.25rem; font-weight: 400; line-height: 1;
    color: var(--amber-ink);
    transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--amber-ink); }
.faq-body { padding-bottom: 1.375rem; }
.faq-body p { color: var(--tx-muted); font-size: .9375rem; max-width: 70ch; }

/* --------------------------------------- 21. callouts, badges, map */

.callout {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(1rem, 3vw, 1.75rem);
    align-items: center;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: var(--red-tint);
    border: 1px solid #FECACA;
    border-left: 3px solid var(--red);
    border-radius: var(--radius-lg);
}
.callout > i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; flex: none;
    background: var(--red);
    color: #fff;
    border-radius: 50%;
    font-size: 1.25rem;
}
.callout h3 { margin-bottom: .4rem; }
.callout p { color: #7F1D1D; font-size: .9375rem; margin-bottom: 1.125rem; max-width: 60ch; }

.badge {
    display: inline-flex; align-items: center;
    padding: .3rem .625rem;
    border-radius: 999px;
    font-size: .6875rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    background: var(--ink-950); color: var(--tx-dark);
    flex: none;
}
.badge-active { background: var(--amber); color: var(--ink-950); }
.badge-soon { background: var(--green); color: #fff; }

.map-frame {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper-2);
}
.map-frame-inner {
    min-height: 20rem;
    display: grid; place-items: center;
    text-align: center;
    padding: 2rem;
    gap: .5rem;
}
.map-frame-inner i { font-size: 1.75rem; color: var(--amber-ink); }
.map-frame-inner strong { font-size: 1.0625rem; }
.map-frame-inner span { color: var(--tx-muted); font-size: .9375rem; }

/* service-area strip: three nodes on a live wire */
.coverage {
    background-color: var(--ink-900);
    background-image:
        linear-gradient(var(--ink-800) 1px, transparent 1px),
        linear-gradient(90deg, var(--ink-800) 1px, transparent 1px);
    background-size: 28px 28px;
}
.coverage-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.coverage h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: .75rem; }
.coverage-sub { color: var(--tx-dark-muted); font-size: .9375rem; margin-top: .5rem; }

.coverage-line {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    padding: 0;
    text-align: center;
}
.coverage-line::before {
    content: '';
    position: absolute;
    top: 1.25rem; left: 16.66%; right: 16.66%;
    height: 2px;
    background: linear-gradient(90deg, var(--ink-600), var(--amber), var(--ink-600));
}
.coverage-line li { position: relative; display: grid; justify-items: center; gap: .2rem; }
.coverage-node {
    width: 2.5rem; height: 2.5rem;
    display: grid; place-items: center;
    margin-bottom: .5rem;
    border-radius: 50%;
    background: var(--ink-900);
    border: 2px solid var(--ink-600);
}
.coverage-node::after {
    content: '';
    width: .5rem; height: .5rem;
    border-radius: 50%;
    background: var(--tx-dark-muted);
}
.coverage-line strong { font-size: .9375rem; color: var(--tx-dark); }
.coverage-line span:not(.coverage-node) {
    font-size: .6875rem; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--tx-dark-muted);
}

.coverage-line .is-hq .coverage-node {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--ink-950);
    box-shadow: 0 0 0 6px rgba(240, 180, 41, .15);
    animation: coverage-pulse 2.4s var(--ease) infinite;
}
.coverage-line .is-hq .coverage-node::after { display: none; }
.coverage-line .is-hq span:not(.coverage-node) { color: var(--amber); }

@keyframes coverage-pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(240, 180, 41, .15); }
    50%      { box-shadow: 0 0 0 12px rgba(240, 180, 41, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .coverage-line .is-hq .coverage-node { animation: none; }
}
@media (max-width: 760px) {
    .coverage-inner { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- 22. newsletter */

.newsletter { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: .75rem; }
.newsletter-form label { flex: 1 1 14rem; }
.newsletter-form input {
    width: 100%;
    padding: .875rem 1rem;
    font: inherit; font-size: .9375rem;
    color: var(--tx);
    background: var(--paper);
    border: 1px solid var(--paper);
    border-radius: var(--radius);
}
.newsletter-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(240, 180, 41, .45); }

/* ------------------------------------------------------ 23. cta band */

.cta-band {
    background: var(--amber);
    color: var(--ink-950);
    padding-block: clamp(3.5rem, 7vw, 5rem);
}
.cta-inner {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: 2rem;
}
.cta-inner h2 { letter-spacing: -.028em; max-width: 24ch; }
.cta-inner p { margin-top: .75rem; max-width: 44ch; color: rgba(12, 14, 15, .78); }

/* -------------------------------------------------------- 24. footer */

.footer {
    background: var(--ink-950);
    color: var(--tx-dark-muted);
    padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
    font-size: .9375rem;
}
/* Explicit breakpoints rather than auto-fit: auto-fit kept four columns
   alive at 375px and the email address pushed the page 39px wide. */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
}
@media (min-width: 40rem) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 60rem) {
    .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.footer h4 {
    color: var(--tx-dark);
    font-size: .75rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase;
    margin-bottom: 1.125rem;
}
.footer-brand img {
    height: 66px; width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 1.25rem;
}
.footer-brand p { max-width: 34ch; }
.footer ul { display: grid; gap: .625rem; }
.footer a { transition: color .16s var(--ease); }
.footer a:hover { color: var(--amber); }

.footer-contact li { display: flex; gap: .75rem; }
.footer-contact i { color: var(--amber); width: 1rem; flex: none; margin-top: .35rem; font-size: .8125rem; }
/* the email address is one long unbreakable token on narrow screens */
.footer-contact a { overflow-wrap: anywhere; }

.socials { display: flex; gap: .5rem; margin-top: 1.5rem; }
.socials a {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border: 1px solid var(--ink-700);
    border-radius: var(--radius);
    color: var(--tx-dark-muted);
    transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.socials a:hover { color: var(--ink-950); background: var(--amber); border-color: var(--amber); }

.footer-bottom {
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--ink-700);
    display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
    justify-content: space-between;
    font-size: .8125rem;
}

/* --------------------------------------------------- 25. responsive */

@media (max-width: 1080px) {
    .nav-phone { display: none; }
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero-figure { order: -1; max-width: 30rem; }
    .hero-figure img { aspect-ratio: 16 / 10; }
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { padding-top: 1.25rem; }
    .stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--ink-700); }
    .stat:nth-child(3) { border-left: 0; padding-left: 0; }
    .person { grid-template-columns: 1fr; }
    .person-photo { max-width: 15rem; }
}

@media (max-width: 860px) {
    .nav-toggle { display: flex; }

    .nav-links {
        position: fixed;
        top: var(--nav-h);
        left: 0;
        width: 100%;
        max-height: calc(100dvh - var(--nav-h));
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: .5rem var(--gutter) 1.5rem;
        background: var(--ink-950);
        border-bottom: 1px solid var(--ink-700);
        /* clip upward behind the bar, so it can never overlap the nav.
           visibility is toggled too, otherwise the links stay in the tab
           order while clipped and keyboard users focus invisible items.
           Not transitioned, for the same reason as .lightbox — a delayed
           visibility change that never completes leaves a phantom menu. */
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        transition: clip-path .28s var(--ease);
    }
    .nav-links[data-open="true"] {
        clip-path: inset(0 0 0 0);
        visibility: visible;
    }

    .nav-links a {
        padding: .9rem 0;
        font-size: 1rem;
        border-bottom: 1px solid var(--ink-800);
    }
    .nav-links a[aria-current="page"]::after { display: none; }
    .nav-links a[aria-current="page"] { color: var(--amber); }
    .nav-actions { display: none; }

    .media-split-flip .media-split-figure { order: 0; }
}

@media (max-width: 560px) {
    .stat-strip { grid-template-columns: 1fr; border-top: 0; }
    .stat {
        border-left: 0; padding-left: 0;
        border-top: 1px solid var(--ink-700);
        padding-block: 1.125rem;
        display: flex; align-items: baseline; gap: .75rem;
    }
    .stat:nth-child(3) { border-top: 1px solid var(--ink-700); }
    .stat dt { margin-top: 0; }
    .hero-cta .btn, .cta-inner .btn, .callout .btn { width: 100%; }
    .callout { grid-template-columns: 1fr; }
    .newsletter-form .btn { width: 100%; }
}

/* ------------------------------------------- 26. reduced motion & print */

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

@media print {
    .nav, .cta-band, .hero-figure, .socials, .filter-bar, .newsletter { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .on-dark, .on-darker, .hero, .page-hero, .footer, .creds {
        background: #fff !important; color: #000 !important;
    }
    .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
    .page-hero h1, .footer h4 { color: #000; }
    .faq details { open: true; }
    .faq-body { display: block !important; }
}