/* ════════════════════════════════════════════════════════════
   KIRASHI · Bright Warm Design System  (cream + orange tint)
   Shared across all pages.
   ════════════════════════════════════════════════════════════ */

:root {
    /* names kept stable; values are now LIGHT + warm */
    --navy: #faf4ec;          /* page background (warm cream) */
    --navy2: #fff9f1;         /* alt / card surface (warm white) */
    --panel: #fdeede;         /* light orange-tint panel */
    --panel2: #fbe3cf;
    --steel: #f4e7d6;
    --amber: #f97316;         /* orange accent */
    --amber2: #fb923c;        /* lighter orange */
    --amber-deep: #ea6a08;
    --amber-soft: rgba(249, 115, 22, .12);
    --ink: #18222f;           /* headings (near-black slate) */
    --fg: #283546;            /* body text (slate) */
    --mut: rgba(40, 53, 70, .64);
    --mut2: rgba(40, 53, 70, .42);
    --line: rgba(40, 53, 70, .12);
    --line2: rgba(40, 53, 70, .2);
    --shadow: 24px 40px -24px rgba(80, 50, 20, .25);
    /* The fallbacks are condensed on purpose. With a bare `sans-serif` the
       nav is laid out in a normal-width face until Barlow Condensed arrives
       from Google Fonts, and at narrower desktop widths the nine tabs wrap to
       a second line for that moment before snapping back. A condensed
       fallback keeps the first paint close to the final width. */
    --fd: 'Barlow Condensed', 'Arial Narrow', 'Liberation Sans Narrow', 'Helvetica Neue Condensed', sans-serif;
    --fb: 'Inter', sans-serif;
    --maxw: 1220px;
    --pad: clamp(22px, 5vw, 54px);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: var(--navy);
    /* no CSS scroll-behavior — Lenis handles smooth scrolling (CSS smooth conflicts and causes stutter) */
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
    font-family: var(--fb);
    color: var(--fg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
    background:
        radial-gradient(1100px 540px at 100% -6%, rgba(249, 115, 22, .12), transparent 55%),
        radial-gradient(900px 520px at -8% 14%, rgba(251, 146, 60, .08), transparent 55%),
        var(--navy);
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--amber); color: #fff; }

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

/* grain disabled (was causing scroll jank) */
.grain { display: none !important; }

/* ── topbar ──────────────────────────────────────── */
.topbar {
    background: linear-gradient(90deg, #fde7d6, #fff3e6);
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    position: relative;
    z-index: 60;
}

.topbar .in {
    width: min(var(--maxw), 100% - var(--pad) * 2);
    margin-inline: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 9px 0;
    color: var(--mut);
}

.topbar a { color: var(--fg); transition: color .25s; }
.topbar a:hover { color: var(--amber-deep); }
.topbar .tb-r { display: flex; gap: 16px; }

/* ── header / nav ────────────────────────────────── */
header.site {
    position: sticky;
    top: 0;
    z-index: 500;
    background: rgba(250, 244, 236, .96);
    border-bottom: 1px solid var(--line);
    transition: background .3s, box-shadow .3s;
}

header.site.scrolled {
    background: #fbf6ee;
    box-shadow: 0 10px 30px -18px rgba(80, 50, 20, .25);
}

.nav {
    width: min(var(--maxw), 100% - var(--pad) * 2);
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 12px 0;
}

.logo img { height: 42px; width: auto; }

/* Nine tabs, not the original six. The header row is capped at 1220px no
   matter how wide the screen is, so a wider monitor never buys the nav more
   room — at the old 28px gap and 16px type the nine tabs measured 905px and
   wrapped onto a second line even at 1920px. These are the base values
   because there is no viewport at which the looser ones fit. */
.nav-links { display: flex; align-items: center; gap: 18px; }

.nav-links a {
    position: relative;
    font-family: var(--fd);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--ink);
    opacity: .82;
    transition: opacity .25s, color .25s;
}

.nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: var(--amber);
    transition: width .3s;
}

.nav-links a:hover,
.nav-links a.active { opacity: 1; color: var(--amber-deep); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* buttons */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 15px 34px;
    border-radius: 50px;
    cursor: pointer;
    border: 1px solid transparent;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, color .35s, border-color .35s;
}

/* animated orange gradient */
.btn-amber {
    color: #fff;
    background: linear-gradient(100deg, #fb923c, #f97316 32%, #ea6a08 58%, #f97316 84%, #fb923c);
    background-size: 220% 100%;
    animation: btnshift 5s ease infinite;
    box-shadow: 0 12px 26px -10px rgba(249, 115, 22, .55);
}

.btn-amber:hover { box-shadow: 0 20px 40px -12px rgba(249, 115, 22, .7); }

@keyframes btnshift {
    0%, 100% { background-position: 0 50%; }
    50% { background-position: 100% 50%; }
}

/* ghost with fill-sweep on hover */
.btn-ghost {
    color: var(--ink);
    border-color: var(--line2);
    background: rgba(255, 255, 255, .55);
}

.btn-ghost::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, var(--amber), var(--amber2));
    transform: translateY(101%);
    transition: transform .45s cubic-bezier(.76, 0, .24, 1);
}

.btn-ghost:hover { color: #fff; border-color: transparent; }
.btn-ghost:hover::after { transform: none; }

.btn-sm { padding: 11px 24px; font-size: 13px; }

/* burger / mobile nav */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 6px;
}

.burger span { width: 26px; height: 2px; background: var(--ink); transition: .3s; }

.mobnav {
    position: fixed;
    inset: 0;
    z-index: 480;
    background: rgba(255, 250, 243, .98);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transform: translateX(100%);
    transition: transform .5s cubic-bezier(.76, 0, .24, 1);
}

.mobnav.open { transform: none; }

.mobnav a {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px;
    color: var(--ink);
}

.mobnav a:hover { color: var(--amber-deep); }

/* ── HERO (page banners) ─────────────────────────── */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.hero .bg { position: absolute; inset: 0; z-index: -2; }
.hero .bg img { width: 100%; height: 100%; object-fit: cover; }

.hero .ov {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(250, 244, 236, .97) 0%, rgba(250, 244, 236, .74) 40%, rgba(250, 244, 236, .12) 100%),
        linear-gradient(180deg, rgba(250, 244, 236, .25), transparent 24%, var(--navy) 100%),
        radial-gradient(60% 80% at 12% 30%, rgba(249, 115, 22, .12), transparent 60%);
}

.hero .glow {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    opacity: .7;
}

.hero-page { padding: 140px 0 76px; }

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--amber-deep);
    margin-bottom: 18px;
}

.kicker::before { content: ''; width: 38px; height: 2px; background: var(--amber); }
.kicker.center { justify-content: center; }

h1.display {
    font-family: var(--fd);
    font-weight: 900;
    font-size: clamp(40px, 5.6vw, 82px);
    line-height: .98;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--ink);
}

h1.display b { color: var(--amber-deep); }
h1.display i { color: var(--amber); font-style: normal; }

.hero-sub {
    margin-top: 20px;
    max-width: 560px;
    font-size: 18px;
    line-height: 1.65;
    color: var(--fg);
}

.hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }

.breadcrumb {
    margin-top: 18px;
    font-family: var(--fb);
    font-size: 13px;
    color: var(--mut);
    letter-spacing: .5px;
}

.breadcrumb b { color: var(--amber-deep); }

/* ── SECTION shell ───────────────────────────────── */
.sec { padding: clamp(64px, 10vh, 128px) 0; position: relative; }
.sec.alt { background: #fdf1e4; }

.sec-head { max-width: 720px; }
.sec-head.center { margin-inline: auto; text-align: center; }

h2.h2 {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(32px, 4.4vw, 58px);
    line-height: 1.02;
    letter-spacing: -.5px;
    text-transform: uppercase;
    color: var(--ink);
}

h2.h2 b { color: var(--amber-deep); }

.lead { margin-top: 16px; font-size: 17px; line-height: 1.7; color: var(--mut); }

.rule {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--amber), var(--amber2));
    border-radius: 3px;
    margin-top: 18px;
}

.center .rule { margin-inline: auto; }

/* ── STAT band ───────────────────────────────────── */
.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 50px;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--navy2);
    box-shadow: 0 20px 50px -30px rgba(80, 50, 20, .3);
}

.stat { padding: 32px 24px; border-right: 1px solid var(--line); text-align: center; }
.stat:last-child { border-right: none; }

.stat .n {
    font-family: var(--fd);
    font-weight: 900;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
    color: var(--amber-deep);
}

.stat .l {
    margin-top: 8px;
    font-family: var(--fd);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mut);
}

/* ── CARD GRID ───────────────────────────────────── */
.grid { display: grid; gap: 22px; margin-top: 46px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }

.card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: var(--navy2);
    box-shadow: 0 14px 36px -24px rgba(80, 50, 20, .28);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s, box-shadow .35s;
}

.card:hover {
    transform: translateY(-8px);
    border-color: rgba(249, 115, 22, .5);
    box-shadow: 0 32px 56px -28px rgba(249, 115, 22, .4);
}

.card .ph { position: relative; aspect-ratio: 16 / 11; overflow: hidden; }

.card .ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}

.card:hover .ph img { transform: scale(1.08); }

.card .num {
    position: absolute;
    top: 14px;
    left: 16px;
    z-index: 2;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, var(--amber), var(--amber2));
    padding: 4px 13px;
    border-radius: 30px;
    box-shadow: 0 6px 14px -6px rgba(249, 115, 22, .7);
}

.card .bd { padding: 22px 22px 26px; }

.card h3 {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 23px;
    letter-spacing: .2px;
    text-transform: uppercase;
    color: var(--ink);
}

.card p { margin-top: 10px; color: var(--mut); font-size: 15px; line-height: 1.6; }

.card .more {
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fd);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--amber-deep);
}

/* icon card */
.icard {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 30px 26px;
    background: var(--navy2);
    box-shadow: 0 14px 36px -26px rgba(80, 50, 20, .25);
    transition: transform .35s, border-color .35s, box-shadow .35s;
}

.icard:hover {
    transform: translateY(-6px);
    border-color: rgba(249, 115, 22, .45);
    box-shadow: 0 26px 50px -28px rgba(249, 115, 22, .4);
}

.icard .ic {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 26px;
    background: var(--amber-soft);
    border: 1px solid rgba(249, 115, 22, .3);
    margin-bottom: 18px;
}

.icard h3 { font-family: var(--fd); font-weight: 700; font-size: 22px; text-transform: uppercase; color: var(--ink); }
.icard p { margin-top: 10px; color: var(--mut); font-size: 15px; line-height: 1.6; }

/* ── FEATURE rows ────────────────────────────────── */
.feat {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
}

.feat + .feat { margin-top: clamp(60px, 9vh, 110px); }
.feat.flip .feat-img { order: 2; }

.feat-img {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--line);
    position: relative;
    aspect-ratio: 4 / 3;
    box-shadow: 0 30px 60px -34px rgba(80, 50, 20, .4);
}

.feat-img img { width: 100%; height: 100%; object-fit: cover; }

/* ── The location map ──────────────────────────────────────────────────
   The dark treatment is a filter chain over a LIVE iframe, which is the
   expensive case: the map repaints on every tile arrival, pan and zoom, and
   a filter has to be re-applied to each of those frames. Applied naively it
   also invalidates paint for the area around it, so scrolling past the map
   costs more than scrolling past an image.

   `contain: paint` plus a compositing hint keeps that work inside the frame:
   the filtered map becomes its own layer, so the rest of the page is not
   repainted when the map moves, and the filter result can be cached between
   frames instead of recomputed against the page behind it.

   The filter itself is unchanged — the map still matches the dark page. */
.map-frame {
    contain: paint;
    transform: translateZ(0);
}

.map-embed {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(.3) invert(.92) hue-rotate(180deg);
    will-change: filter;
}

/* A filtered dark map is a convenience, not the information — the address is
   written on the page as text. Anyone who has asked for less motion or is
   reading in forced colours gets the map unfiltered rather than inverted. */
@media (prefers-reduced-motion: reduce) {
    .map-embed { will-change: auto; }
}

@media (forced-colors: active) {
    .map-embed { filter: none; }
}

.feat ul { list-style: none; margin-top: 22px; display: grid; gap: 12px; }

.feat ul li { position: relative; padding-left: 30px; color: var(--fg); font-size: 16px; }
.feat ul li::before { content: '✦'; position: absolute; left: 0; color: var(--amber-deep); }

/* ── MARQUEE ─────────────────────────────────────── */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 20px 0;
    background: linear-gradient(90deg, #fff3e6, #fde7d6);
}

.marquee .track {
    display: inline-block;
    animation: mq 38s linear infinite;
    font-family: var(--fd);
    font-weight: 700;
    font-size: clamp(22px, 3.2vw, 40px);
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: var(--ink);
}

.marquee .track span { color: var(--mut2); }
.marquee .track b { color: var(--amber-deep); margin: 0 14px; }

@keyframes mq { to { transform: translateX(-50%) } }

/* ── CTA band ────────────────────────────────────── */
.cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(72px, 12vh, 132px) 0;
    background: linear-gradient(135deg, #fde3c8, #fff6ec);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.cta::before {
    content: '';
    position: absolute;
    width: 80vw;
    height: 80vw;
    left: 50%;
    top: 120%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(249, 115, 22, .25), transparent 60%);
    pointer-events: none;
}

.cta .wrap { position: relative; z-index: 2; }

.cta h2 {
    font-family: var(--fd);
    font-weight: 900;
    font-size: clamp(34px, 5.6vw, 70px);
    line-height: .98;
    text-transform: uppercase;
    letter-spacing: -.5px;
    color: var(--ink);
}

.cta h2 b { color: var(--amber-deep); }
.cta p { margin: 16px auto 0; max-width: 560px; color: var(--fg); font-size: 17px; }
.cta .hero-cta { justify-content: center; }

/* ── Nexus-OP promo band ─────────────────────────── */
.nexus-band {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--line2);
    background:
        radial-gradient(60% 130% at 86% 12%, rgba(249, 115, 22, .18), transparent 60%),
        linear-gradient(120deg, #fff6ec, #fde7d6);
    padding: clamp(34px, 5vw, 60px);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 30px;
    align-items: center;
    box-shadow: 0 24px 60px -34px rgba(80, 50, 20, .35);
}

.nexus-band .tagn {
    font-family: var(--fd);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--amber-deep);
}

.nexus-band h3 {
    font-family: var(--fd);
    font-weight: 800;
    font-size: clamp(28px, 4vw, 46px);
    text-transform: uppercase;
    line-height: 1;
    margin: 12px 0 14px;
    color: var(--ink);
}

.nexus-band p { color: var(--mut); max-width: 460px; }

.nx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }

.nx-chips span {
    font-family: var(--fd);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--amber-deep);
    background: rgba(249, 115, 22, .1);
    border: 1px solid rgba(249, 115, 22, .28);
    padding: 6px 14px;
    border-radius: 30px;
}

.nexus-visual { display: flex; justify-content: flex-end; }

.nexus-orb {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #5b8cff, #a855f7, #ff4d8d, var(--amber), #5b8cff);
    box-shadow: 0 30px 60px -20px rgba(168, 85, 247, .4);
    animation: spin 16s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg) } }

/* ── GALLERY ─────────────────────────────────────── */
.gal { columns: 3; column-gap: 18px; margin-top: 44px; }

.gal figure {
    break-inside: avoid;
    margin-bottom: 18px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
    position: relative;
    box-shadow: 0 16px 38px -26px rgba(80, 50, 20, .35);
}

/* height:auto is required, not cosmetic. Every <img> now carries width/height
   attributes so the browser can reserve space before the photo downloads. An
   attribute is a presentational hint, so with only `width:100%` set here the
   attribute's height won through and 640x640 photos rendered 393x640 —
   visibly stretched. `height:auto` hands the height back to the aspect ratio. */
.gal img { width: 100%; height: auto; transition: transform .6s; }
.gal figure:hover img { transform: scale(1.06); }

.gal figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 18px 16px 14px;
    background: linear-gradient(transparent, rgba(20, 14, 6, .82));
    font-family: var(--fd);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 15px;
    color: #fff;
    opacity: 0;
    transform: translateY(10px);
    transition: .35s;
}

.gal figure:hover figcaption { opacity: 1; transform: none; }

/* ── CONTACT ─────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; margin-top: 46px; }
.cinfo { display: grid; gap: 18px; align-content: start; }
/* Contact page without the enquiry form: the four cards share the row
   instead of stacking in a half-width column beside an empty space. */
.contact-grid--solo { grid-template-columns: 1fr; margin-top: 34px; }
.contact-grid--solo .cinfo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .contact-grid--solo .cinfo { grid-template-columns: 1fr; } }

.cinfo .row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    background: var(--navy2);
    box-shadow: 0 12px 30px -24px rgba(80, 50, 20, .25);
}

.cinfo .row .ic {
    font-size: 22px;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--amber-soft);
    border: 1px solid rgba(249, 115, 22, .3);
}

.cinfo .row h4 { font-family: var(--fd); font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--ink); }
.cinfo .row p, .cinfo .row a { color: var(--mut); font-size: 15px; }

.form {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 30px;
    background: var(--navy2);
    display: grid;
    gap: 14px;
    box-shadow: 0 20px 50px -30px rgba(80, 50, 20, .3);
}

.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }


.form input, .form textarea, .form select {
    width: 100%;
    background: #fff;
    border: 1px solid var(--line2);
    border-radius: 8px;
    padding: 14px 16px;
    color: var(--ink);
    font-family: var(--fb);
    font-size: 15px;
    transition: border-color .25s, box-shadow .25s;
}

.form input::placeholder, .form textarea::placeholder { color: var(--mut2); }

.form input:focus, .form textarea:focus, .form select:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .15);
}

.form textarea { min-height: 130px; resize: vertical; }

/* ── FOOTER ──────────────────────────────────────── */
footer.site {
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, #fff6ec, #fde7d6);
    padding: 60px 0 0;
}

.fgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 80px; max-width: 1100px; margin: 0 auto; align-items: start; padding-bottom: 42px; }
/* width:auto for the same reason .gal img needs height:auto — this rule fixes
   the height, so without it the logo's width attribute (1600px) was taken
   literally and the footer mark rendered stretched on the generated pages. */
.fcol .flogo { height: 46px; width: auto; margin-bottom: 16px; }
.fcol p { color: var(--mut); font-size: 14px; line-height: 1.7; }

.fcol h4 {
    font-family: var(--fd);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
    color: var(--ink);
}

.fcol a.fl { display: block; color: var(--mut); font-size: 14px; padding: 5px 0; transition: color .25s, padding-left .25s; }
.fcol a.fl:hover { color: var(--amber-deep); padding-left: 6px; }

.fcon { display: grid; gap: 12px; }
.fcon .r { display: flex; gap: 11px; color: var(--mut); font-size: 14px; align-items: flex-start; }
.fcon .r b { color: var(--amber-deep); }

.fbar { border-top: 1px solid var(--line); padding: 20px 0; text-align: center; color: var(--mut2); font-size: 13px; }
.fbar b { color: var(--amber-deep); }

/* ── reveal + progress ───────────────────────────── */
.fu {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}

.fu.in { opacity: 1; transform: none; }
.fu.d1 { transition-delay: .07s }
.fu.d2 { transition-delay: .14s }
.fu.d3 { transition-delay: .21s }
.fu.d4 { transition-delay: .28s }

.prog {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 600;
    background: linear-gradient(90deg, var(--amber), var(--amber2));
}

.to-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 400;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--line2);
    background: rgba(255, 255, 255, .92);
    color: var(--amber-deep);
    font-size: 20px;
    display: grid;
    place-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s, border-color .3s;
    cursor: pointer;
    box-shadow: 0 10px 26px -12px rgba(80, 50, 20, .4);
}

.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { transform: translateY(-4px); border-color: var(--amber); }

/* floating contact buttons */
.floats { position: fixed; left: 18px; bottom: 18px; z-index: 400; display: flex; flex-direction: column; gap: 12px; }

.floats a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .3);
    transition: transform .25s;
}

.floats a:hover { transform: scale(1.1); }
.floats .wa { background: #25d366; }
.floats .ph { background: var(--amber); color: #fff; }

/* ── NAV SIZING FOR NINE TABS ─────────────────────────────────────────────
   The tab row is sized in the base .nav-links rule above; see the note there
   for why it cannot rely on a breakpoint. All that is left to do here is
   collapse to the burger earlier than the old 1000px, since nine tabs run
   out of room sooner than six did.
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
    .nav-links { display: none; }
    .burger { display: flex; }
}

/* ── RESPONSIVE ──────────────────────────────────── */
@media (max-width: 1000px) {
    .nav-links { display: none; }
    .burger { display: flex; }
    .grid.c4 { grid-template-columns: repeat(2, 1fr); }
    .fgrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .topbar .tb-r { display: none; }
    .grid.c3, .grid.c4, .grid.c2 { grid-template-columns: 1fr; }
    .stats { grid-template-columns: 1fr 1fr; }
    .stat:nth-child(2n) { border-right: none; }
    .feat, .feat.flip { grid-template-columns: 1fr; }
    .feat.flip .feat-img { order: 0; }
    .nexus-band { grid-template-columns: 1fr; }
    .nexus-visual { justify-content: flex-start; }
    .gal { columns: 2; }
    .contact-grid { grid-template-columns: 1fr; }
    .form .two { grid-template-columns: 1fr; }
    .fgrid { grid-template-columns: 1fr; }
}