/* ============================================================ CADENCE MEDIA GROUP — SITE STYLESHEET Built on the Cadence Design System (beige · gold · black). Tokens inlined for a portable, hostable site. Re-sync from Cadence_Design_System/tokens/ if the system changes. Default surface = cinematic matte black (Media Group). Add .surface-cream on for the editorial light surface (Events / Creative Studios). ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&display=swap'); /* ---------- COLOR TOKENS ---------- */ :root{ --ink-900:#0d0c0a; --ink-800:#14130f; --ink-700:#1c1a15; --ink-600:#26231c; --ink-500:#332f26; --ink-400:#4a4639; --ink-300:#6b6555; --ink-200:#8f897a; --cream-50:#faf6ee; --cream-100:#f4ecdd; --cream-200:#ece0cb; --cream-300:#e0d0b4; --cream-400:#cdb993; --cream-500:#b3a07d; /* champagne ramp anchored on the logo cream (#d8c7ad) */ --gold-700:#755e3c; --gold-600:#93794e; --gold-500:#b39a6e; --gold-400:#c9b28a; --gold-300:#d8c7ad; --gold-200:#eadfc9; --sage:#7d8a6a; --sage-soft:rgba(125,138,106,.16); --clay:#b46a4f; --rust:#a4503e; --slate:#5c6b78; --white:#fff; --black:#000; } /* DEFAULT = cinematic dark (Media Group) */ :root, [data-theme="dark"], .surface-dark{ --surface-page:var(--ink-900); --surface-raised:var(--ink-800); --surface-sunken:var(--ink-700); --surface-inverse:var(--cream-100); --surface-overlay:rgba(0,0,0,.66); --text-strong:var(--cream-50); --text-body:var(--cream-200); --text-muted:var(--ink-200); --text-faint:#6f6857; --text-onGold:var(--ink-900); --text-onInverse:var(--ink-900); --accent:var(--gold-400); --accent-strong:var(--gold-300); --accent-soft:rgba(216,199,173,.14); --accent-text:var(--gold-300); --accent-wash:rgba(201,178,138,.08); --border-subtle:rgba(244,236,221,.08); --border-default:rgba(244,236,221,.14); --border-strong:rgba(244,236,221,.26); --border-gold:rgba(201,178,138,.40); --focus-ring:rgba(201,178,138,.6); --glow-amb:rgba(201,178,138,.13); /* ambient section light */ --glow-soft:rgba(201,178,138,.07); } /* Editorial light surface (Events / Creative Studios) */ .surface-cream{ --surface-page:var(--cream-100); --surface-raised:var(--cream-50); --surface-sunken:var(--cream-200); --surface-inverse:var(--ink-900); --surface-overlay:rgba(13,12,10,.55); --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-300); --text-faint:var(--ink-200); --text-onGold:var(--ink-900); --text-onInverse:var(--cream-100); --accent:var(--gold-500); --accent-strong:var(--gold-600); --accent-soft:var(--gold-200); --accent-text:var(--gold-700); --accent-wash:rgba(179,154,110,.10); --border-subtle:rgba(45,40,30,.12); --border-default:rgba(45,40,30,.20); --border-strong:rgba(45,40,30,.36); --border-gold:rgba(179,154,110,.42); --focus-ring:rgba(179,154,110,.55); --glow-amb:rgba(179,154,110,.16); /* ambient section light (cream) */ --glow-soft:rgba(179,154,110,.08); } /* ---------- TYPE TOKENS ---------- */ :root{ --font-display:'Cinzel',Georgia,'Times New Roman',serif; --font-sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --font-mono:'Space Mono',ui-monospace,'SF Mono',Menlo,monospace; --type-display-xl:600 clamp(3.4rem,6.6vw,5.6rem)/1.0 var(--font-display); --type-display-lg:600 clamp(2.6rem,4.8vw,4rem)/1.04 var(--font-display); --type-display-md:600 clamp(2rem,3.4vw,2.8rem)/1.08 var(--font-display); --type-display-sm:600 clamp(1.45rem,2.2vw,1.9rem)/1.14 var(--font-display); --type-h1:700 2rem/1.16 var(--font-sans); --type-h2:700 1.5rem/1.2 var(--font-sans); --type-h3:600 1.2rem/1.28 var(--font-sans); --type-h4:600 1rem/1.4 var(--font-sans); --type-body-lg:400 1.18rem/1.62 var(--font-sans); --type-body:400 1rem/1.6 var(--font-sans); --type-body-sm:400 0.875rem/1.55 var(--font-sans); --type-caption:500 0.78rem/1.4 var(--font-sans); --type-eyebrow:600 0.72rem/1.3 var(--font-sans); --type-mono-label:700 0.7rem/1.3 var(--font-mono); --tracking-tight:-0.02em; --tracking-snug:-0.01em; --tracking-wide:0.04em; --tracking-wider:0.14em; --tracking-widest:0.22em; /* spacing / radii / motion */ --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-8:3rem; --gutter:clamp(1.25rem,4vw,3rem); --section-y:clamp(4rem,9vw,8rem); --maxw:1200px; --radius-xs:4px; --radius-sm:7px; --radius-md:11px; --radius-lg:16px; --radius-xl:22px; --radius-2xl:30px; --radius-pill:999px; --shadow-sm:0 2px 8px rgba(45,38,26,.07); --shadow-md:0 8px 24px rgba(45,38,26,.10); --shadow-lg:0 18px 48px rgba(45,38,26,.14); --shadow-cinematic:0 30px 90px rgba(0,0,0,.55); --glow-gold:0 0 28px rgba(201,178,138,.40); --ease-out:cubic-bezier(.16,1,.3,1); --ease-standard:cubic-bezier(.4,0,.2,1); --dur-fast:140ms; --dur-base:220ms; --dur-slow:420ms; --dur-reveal:720ms; --grain-opacity:.055; } /* ---------- BASE ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-strong)} p{margin:0;text-wrap:pretty} img{max-width:100%;display:block} a{color:var(--accent-text);text-decoration:none;transition:color var(--dur-fast)} a:hover{color:var(--accent-strong)} ul{margin:0} ::selection{background:var(--accent-soft);color:var(--cream-50)} .surface-cream ::selection{color:var(--ink-900)} :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} .container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} section{padding:var(--section-y) 0} .section-line{border-top:1px solid var(--border-subtle)} /* film-grain matte overlay */ .grain{position:relative} .grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:var(--grain-opacity); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode:overlay} /* ---------- BRAND PRIMITIVES ---------- */ .eyebrow{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-wider); color:var(--accent-text);display:inline-flex;align-items:center;gap:.7rem} .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)} .eyebrow.center{justify-content:center} .mono-label{font:var(--type-mono-label);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--text-faint)} .display-xl{font:var(--type-display-xl);letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong)} .display-lg{font:var(--type-display-lg);letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong)} .display-md{font:var(--type-display-md);letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong)} .display-sm{font:var(--type-display-sm);letter-spacing:.015em;text-transform:uppercase;color:var(--text-strong)} /* gold accent word inside gothic display type (italics retired with the serif) */ em.gold{font-style:normal;color:var(--accent-text)} .display-xl em,.display-lg em,.display-md em,.display-sm em{font-style:normal;color:var(--accent-text)} .lead{font:var(--type-body-lg);color:var(--text-muted);max-width:50ch} .wordmark{font-family:var(--font-display);font-weight:600;letter-spacing:var(--tracking-wider); text-transform:uppercase;color:var(--text-strong);display:inline-flex;align-items:center;gap:.5em;line-height:1;font-size:17px} .wordmark .dot{width:.34em;height:.34em;border-radius:50%;background:var(--accent);box-shadow:var(--glow-gold);flex:none} /* real brand mark in the nav (transparent PNG) */ .wordmark .wm-mark{height:32px;width:auto;flex:none;margin-block:-4px} .wordmark small{font-family:var(--font-mono);font-weight:700;font-size:.32em;letter-spacing:var(--tracking-widest); color:var(--text-faint);text-transform:uppercase} /* ---------- BUTTONS ---------- */ .btn{font:var(--type-body-sm);font-weight:600;letter-spacing:.01em;display:inline-flex;align-items:center;gap:.55em; padding:.85em 1.6em;border-radius:var(--radius-pill);cursor:pointer;border:1px solid transparent; transition:all var(--dur-base) var(--ease-out);text-decoration:none;white-space:nowrap} .btn .arr{transition:transform var(--dur-base) var(--ease-out)} .btn:hover .arr{transform:translateX(3px)} .btn-lg{padding:1.05em 1.9em;font-size:.95rem} .btn-sm{padding:.6em 1.1em;font-size:.82rem} /* champagne is light — a dark drop shadow keeps it from melting into footage */ .btn-gold{background:var(--accent);color:var(--text-onGold);box-shadow:0 4px 16px rgba(0,0,0,.35)} .btn-gold:hover{background:var(--accent-strong);color:var(--text-onGold);transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.45),var(--glow-gold)} .btn-solid{background:var(--cream-50);color:var(--ink-900)} .surface-cream .btn-solid{background:var(--ink-900);color:var(--cream-50)} .btn-solid:hover{transform:translateY(-1px)} .btn-ghost{background:transparent;color:var(--text-strong);border-color:var(--border-strong)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent-text)} /* ---------- STICKY MOBILE CTA (slides up after the hero, fx.js injects + toggles .on) ---------- */ .sticky-cta{display:none} @media(max-width:980px){ .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;gap:9px; padding:9px 12px calc(9px + env(safe-area-inset-bottom,0px)); background:rgba(8,9,11,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); border-top:1px solid var(--border-subtle);box-shadow:0 -10px 30px rgba(0,0,0,.35); transform:translateY(115%);transition:transform .45s var(--ease-out); pointer-events:none;visibility:hidden} .sticky-cta.on{transform:translateY(0);pointer-events:auto;visibility:visible} .sticky-cta .btn{flex:1 1 0;justify-content:center;padding:.95em .9em;font-size:.9rem;gap:.45em} .sticky-cta .btn svg{width:16px;height:16px;flex:none} .sticky-cta .btn-call{flex:1 1 0;background:rgba(255,255,255,.05);color:var(--text-strong); border:1px solid rgba(216,199,173,.55);box-shadow:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .sticky-cta .btn-call:active{background:rgba(216,199,173,.14);border-color:var(--accent);color:var(--accent-text)} } /* ---------- NAV + SERVICES DROPDOWN ---------- */ .nav{position:sticky;top:0;z-index:100; background:rgba(8,9,11,.92);border-bottom:1px solid var(--border-subtle); transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)} /* blur lives on a pseudo: backdrop-filter on .nav itself would make it the containing block for the fixed mobile sheet, pinning it to the bar */ .nav::before{content:"";position:absolute;inset:0;z-index:-1; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:opacity var(--dur-base) var(--ease-out)} .surface-cream .nav{background:rgba(244,236,221,.78)} /* transparent while sitting over a hero; a glass bar snaps in once you scroll past it. JS adds .nav-overhero when a hero exists and toggles .nav-scrolled past ~30px */ .nav.nav-overhero:not(.nav-scrolled){background:transparent;border-bottom-color:transparent} .nav.nav-overhero:not(.nav-scrolled)::before{opacity:0} /* soft top-down wash keeps the mark + CTA legible over bright footage */ .nav.nav-overhero:not(.nav-scrolled)::after{content:"";position:absolute;inset:0 0 auto;height:230%;z-index:-2; pointer-events:none;background:linear-gradient(to bottom,rgba(6,5,4,.5),transparent)} /* FHM-style 3-zone bar: links left · logo center · contact + pill CTA right */ .nav-inner{position:relative;max-width:1360px;margin:0 auto;padding:7px var(--gutter); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px} .nav-links{display:flex;align-items:center;gap:30px;list-style:none;padding:0;margin:0;justify-self:start} .nav-right{display:flex;align-items:center;gap:18px;justify-self:end} .nav-mail{font:var(--type-mono-label);letter-spacing:.08em;color:var(--text-muted)!important;text-transform:lowercase} .nav-mail:hover{color:var(--accent-text)!important} .nav .btn-gold svg{width:15px;height:15px} /* CSS-only mobile menu toggle (no JS — works identically on every page) */ .nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px; padding:0 10px;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);background:none;cursor:pointer;color:var(--text-strong)} .nav-burger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform var(--dur-fast) var(--ease-out),opacity var(--dur-fast)} .nav-links>li{position:relative} .nav-links a.navlink,.nav-trigger{font:var(--type-body-sm);font-weight:500;color:var(--text-muted); background:none;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.35em;font-family:var(--font-sans)} .nav-links a.navlink:hover,.nav-trigger:hover{color:var(--text-strong)} /* hover: a gold icon springs in beside the label */ .navlink .nl-ic{flex:none;width:0;height:15px;opacity:0;margin-right:0;color:var(--gold-300); transform:translateX(-8px) scale(.5) rotate(-45deg); transition:width .34s cubic-bezier(.34,1.56,.64,1),margin-right .34s cubic-bezier(.34,1.56,.64,1), opacity .22s var(--ease-out),transform .34s cubic-bezier(.34,1.56,.64,1)} .navlink:hover .nl-ic,.navlink:focus-visible .nl-ic{width:15px;margin-right:2px;opacity:1;transform:none} .navlink span{transition:transform .34s cubic-bezier(.34,1.56,.64,1)} @media (prefers-reduced-motion:reduce){.navlink .nl-ic{transition:opacity .15s}} .nav-trigger .chev{width:9px;height:9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-1px);transition:transform var(--dur-fast);opacity:.7} .has-dropdown:hover .chev,.has-dropdown:focus-within .chev{transform:rotate(-135deg) translateY(-1px)} /* dropdown panel */ .dropdown{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px); min-width:330px;background:var(--surface-raised);border:1px solid var(--border-gold);border-radius:var(--radius-lg); box-shadow:var(--shadow-cinematic);padding:10px;opacity:0;visibility:hidden;transition:all var(--dur-base) var(--ease-out);z-index:120} .has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .dropdown::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px} /* hover bridge */ .dd-item{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-md);transition:background var(--dur-fast)} .dd-item:hover{background:var(--accent-wash)} .dd-ic{flex:none;width:38px;height:38px;border-radius:var(--radius-sm);display:grid;place-items:center; background:var(--surface-sunken);border:1px solid var(--border-default);color:var(--accent);margin-top:2px} .dd-ic svg{width:19px;height:19px} .dd-title{font:var(--type-h4);color:var(--text-strong);font-weight:600} .dd-desc{font:var(--type-caption);color:var(--text-faint);margin-top:2px} /* ---------- HERO (video loop) ---------- */ .hero{position:relative;overflow:hidden;isolation:isolate} .hero-media{position:absolute;inset:0;z-index:-2;background:#000} .hero-media video{width:100%;height:100%;object-fit:cover;opacity:.62} /* cinematic matte fallback (shows if video missing) */ .hero-media .fallback{position:absolute;inset:0; background: radial-gradient(1100px 520px at 75% -10%,rgba(201,178,138,.18),transparent 55%), radial-gradient(800px 600px at 10% 110%,rgba(201,178,138,.07),transparent 60%), linear-gradient(160deg,#1a1712 0%,#0d0c0a 60%); animation:heroPan 22s var(--ease-standard) infinite alternate} @keyframes heroPan{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.12) translate(-2%,1%)}} .hero-scrim{position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(13,12,10,.35) 0%,rgba(13,12,10,.55) 55%,var(--ink-900) 100%)} .hero-inner{max-width:var(--maxw);margin:0 auto;padding:clamp(5rem,13vh,9rem) var(--gutter) clamp(3.5rem,7vw,6rem)} .hero h1{font:var(--type-display-xl);font-size:clamp(2.9rem,6.2vw,5.4rem);line-height:1.02; letter-spacing:.01em;text-transform:uppercase;color:var(--cream-50);margin:22px 0 24px;max-width:18ch} .hero .lead{color:var(--cream-200);opacity:.9} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .hero-stats{display:flex;gap:clamp(1.5rem,4vw,3.5rem);margin-top:54px;padding-top:28px;border-top:1px solid var(--border-subtle)} .hero-badge{position:absolute;left:var(--gutter);bottom:22px;display:inline-flex;align-items:center;gap:9px; font:var(--type-mono-label);color:var(--cream-200);letter-spacing:var(--tracking-widest);z-index:2;opacity:.8} .rec-dot{width:8px;height:8px;border-radius:50%;background:var(--gold-400);box-shadow:var(--glow-gold);animation:rec 1.6s ease-in-out infinite} @keyframes rec{0%,100%{opacity:1}50%{opacity:.25}} /* ---------- STATS ---------- */ .stat .num{font:var(--type-display-sm);color:var(--text-strong);line-height:1} .stat.gold .num{color:var(--accent-text)} .stat .lbl{font:var(--type-caption);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-faint);margin-top:8px} /* ---------- TRUST STRIP ---------- */ .trust{background:var(--ink-800);border-block:1px solid var(--border-subtle)} .surface-cream .trust{background:var(--cream-200)} .trust-inner{max-width:var(--maxw);margin:0 auto;padding:26px var(--gutter);display:flex;justify-content:space-between; align-items:center;gap:24px;flex-wrap:wrap} .trust-inner span{font-family:var(--font-display);font-size:1.15rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)} /* ---------- SECTION HEAD ---------- */ .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:54px} .sec-head .lead{font:var(--type-body);max-width:36ch} .sec-head.center{flex-direction:column;align-items:center;text-align:center} /* ---------- VERTICAL / SERVICE CARDS ---------- */ .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .vcard{position:relative;background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-lg); padding:34px 30px 30px;overflow:hidden;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base)} .vcard:hover{transform:translateY(-4px);border-color:var(--border-gold)} .vcard .v-ic{width:46px;height:46px;border-radius:var(--radius-sm);display:grid;place-items:center; background:var(--accent-wash);border:1px solid var(--border-gold);color:var(--accent);margin-bottom:22px} .vcard .v-ic svg{width:23px;height:23px} .vcard h3{font:var(--type-display-sm);color:var(--text-strong);margin-bottom:12px} .vcard p{font:var(--type-body-sm);color:var(--text-muted);margin-bottom:22px} .vcard .v-link{font:var(--type-body-sm);font-weight:600;color:var(--accent-text);display:inline-flex;align-items:center;gap:7px} .vcard .v-num{position:absolute;top:24px;right:28px;font:var(--type-mono-label);color:var(--text-faint)} /* ---------- WORK GRID ---------- */ .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .work-card .thumb{position:relative;height:230px;border-radius:var(--radius-md);overflow:hidden; background:linear-gradient(150deg,#211d16,#0e0d0a);border:1px solid var(--border-subtle);display:grid;place-items:center} .work-card .thumb .play{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--border-gold); display:grid;place-items:center;color:var(--accent);background:rgba(13,12,10,.4);transition:all var(--dur-base) var(--ease-out)} .work-card:hover .thumb .play{background:var(--accent);color:var(--ink-900);box-shadow:var(--glow-gold)} .work-card .thumb .play svg{width:20px;height:20px;margin-left:3px} .pill{position:absolute;top:12px;left:12px;font:var(--type-caption);font-weight:600;padding:5px 11px;border-radius:var(--radius-pill); background:rgba(13,12,10,.7);border:1px solid var(--border-gold);color:var(--accent-text)} .pill.sold{color:var(--sage);border-color:var(--sage-soft);background:var(--sage-soft)} .work-card h4{font:var(--type-h4);color:var(--text-strong);margin-top:14px} .work-card .meta{font:var(--type-body-sm);color:var(--text-faint);margin-top:2px} /* ---------- PROCESS (step cards under the beat rail, cadence-fx.js injects rail + nodes) ---------- */ .proc{display:grid;grid-template-columns:repeat(5,1fr);column-gap:16px} .proc .step{background:var(--surface-raised);border-radius:var(--radius-lg);padding:22px 20px 24px; box-shadow:inset 0 1px 0 rgba(201,178,138,.08)} /* no overflow:hidden — the beat node sits above the card */ .proc .step::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(150% 95% at 100% 0%,rgba(201,178,138,.16),transparent 52%)} .proc .n{display:inline-flex;align-items:center;font:var(--type-mono-label);letter-spacing:.1em; padding:5px 12px;border-radius:var(--radius-pill);background:var(--accent);color:var(--ink-900)} .proc .step h4{font:600 1.16rem/1.18 var(--font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--text-strong);margin:16px 0 9px} .proc .step p{font:var(--type-body-sm);color:var(--text-muted)} /* ---------- PACKAGES ---------- */ .grid-pkg{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .pkg{position:relative;background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-lg); padding:26px 24px 26px;display:flex;flex-direction:column} .pkg.featured{background:linear-gradient(180deg,var(--accent-wash),var(--surface-raised) 80px);border-color:var(--border-gold);box-shadow:var(--shadow-cinematic)} .pkg .badge{align-self:flex-start;font:var(--type-caption);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-wide); padding:5px 11px;border-radius:var(--radius-pill);background:var(--surface-sunken);border:1px solid var(--border-default);color:var(--text-muted);margin-bottom:16px} .pkg.featured .badge{background:var(--accent);color:var(--ink-900);border-color:var(--accent)} .pkg .p-name{font:var(--type-h4);color:var(--text-strong);font-weight:600} .pkg .p-price{display:flex;align-items:baseline;gap:4px;margin:10px 0 4px} .pkg .p-price .amt{font:var(--type-display-sm);color:var(--accent-text)} .pkg .p-price .cad{font:var(--type-body-sm);color:var(--text-faint)} /* hidden retainer pricing — kept off the page so competitors can't scrape the ladder */ .pkg .p-price .quote{font:var(--type-h3);color:var(--accent-text);letter-spacing:-.01em} .pkg .p-line{font:var(--type-body-sm);color:var(--text-muted);min-height:42px;margin-bottom:16px} .pkg ul{list-style:none;padding:0;display:flex;flex-direction:column;margin:0 0 22px;flex:1} .pkg li{display:flex;gap:9px;font:var(--type-body-sm);color:var(--text-body); padding:10px 0;border-top:1px solid var(--border-subtle)} .pkg li:first-child{border-top:none} .pkg li svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:3px} /* ---------- TEAM ---------- */ .team-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;align-items:stretch} .cade{position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid var(--border-gold); background:linear-gradient(150deg,#1b1812,#0d0c0a);min-height:440px;display:flex;flex-direction:column;justify-content:flex-end} .cade .portrait{position:absolute;inset:0;background: radial-gradient(120% 90% at 70% 0%,rgba(201,178,138,.12),transparent 55%), linear-gradient(180deg,transparent 30%,rgba(13,12,10,.92) 100%);display:grid;place-items:center} .cade .portrait .ph{font:var(--type-mono-label);color:var(--text-faint);letter-spacing:var(--tracking-widest)} .cade .body{position:relative;padding:36px 34px} .cade .role{font:var(--type-mono-label);color:var(--accent-text);letter-spacing:var(--tracking-widest)} .cade h3{font:var(--type-display-md);color:var(--cream-50);margin:10px 0 14px} .cade p{font:var(--type-body);color:var(--text-muted);max-width:46ch} .cade .sig{margin-top:20px;font-family:var(--font-sans);font-style:italic;font-weight:500;font-size:1.25rem;color:var(--accent-text)} .team-grid{display:grid;grid-template-rows:repeat(2,1fr);gap:26px} .tcard{position:relative;background:var(--surface-raised);border-radius:var(--radius-lg);overflow:hidden; padding:26px 28px;display:flex;gap:20px;align-items:center; box-shadow:inset 0 1px 0 rgba(201,178,138,.09);transition:transform var(--dur-base) var(--ease-out)} .tcard::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(140% 90% at 100% 0%,rgba(201,178,138,.12),transparent 52%)} .tcard:hover{transform:translateY(-3px)} /* slate-marker monogram (square + mono type, not a default-avatar circle) */ .tcard .av{width:54px;height:54px;border-radius:var(--radius-sm);flex:none;border:1px solid var(--border-gold); background:radial-gradient(circle at 50% 30%,#2a251b,#0f0d0a);display:grid;place-items:center; font:700 .92rem var(--font-mono);letter-spacing:.06em;color:var(--accent-text)} .tcard h4{font:var(--type-h3);color:var(--text-strong)} .tcard .t-role{font:var(--type-body-sm);color:var(--accent-text);margin:2px 0 6px} .tcard p{font:var(--type-body-sm);color:var(--text-muted)} /* ---------- CTA BAND ---------- */ .cta-band{margin:0 var(--gutter) var(--gutter);border-radius:var(--radius-2xl);overflow:hidden;position:relative; background:linear-gradient(135deg,#1c1810,#0c0a07);border:1px solid var(--border-gold)} .surface-cream .cta-band{background:linear-gradient(135deg,#fbf7ef,#efe4cf)} .cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 0%,rgba(201,178,138,.16),transparent 65%)} .cta-inner{position:relative;max-width:760px;margin:0 auto;padding:clamp(3.5rem,7vw,5.5rem) var(--gutter);text-align:center} .cta-inner h2{font:var(--type-display-lg);letter-spacing:.01em;text-transform:uppercase;color:var(--text-strong);margin:18px 0 16px} .cta-inner .lead{margin:0 auto 30px} .cta-inner .hero-cta{justify-content:center} /* ---------- FOOTER ---------- */ .foot{border-top:1px solid var(--border-subtle);padding:64px var(--gutter) 48px} .foot-inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start} .foot-logo{height:110px} .surface-cream .foot-logo{filter:brightness(.4)} /* cream logo needs to darken on cream surface */ .foot .blurb{font:var(--type-body-sm);color:var(--text-muted);max-width:32ch;margin-top:18px} .foot h5{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--accent-text);margin-bottom:16px} .foot a{display:block;color:var(--text-muted);font:var(--type-body-sm);margin-bottom:11px} .foot a:hover{color:var(--text-strong)} .foot-bottom{max-width:var(--maxw);margin:40px auto 0;padding-top:24px;border-top:1px solid var(--border-subtle); display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .foot-bottom .mono-label{font:var(--type-mono-label);color:var(--text-faint)} /* ---------- EVENTS / STUDIO SPACES ---------- */ .space-card{background:var(--surface-raised);border:1px solid var(--border-default);border-radius:var(--radius-lg); overflow:hidden;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-out)} .space-card:hover{transform:translateY(-4px)} .space-card .img{height:200px;display:grid;place-items:center;color:var(--accent); background:linear-gradient(150deg,var(--cream-300),var(--cream-200))} .surface-cream .space-card .img{background:linear-gradient(150deg,#e6d8bd,#d8c8a6)} .space-card .img svg{width:46px;height:46px;opacity:.6} .space-card .body{padding:24px} .space-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .space-card h3{font:var(--type-h3);color:var(--text-strong)} .space-card .rate{font:var(--type-h3);color:var(--accent-text);white-space:nowrap} .space-card .rate small{font:var(--type-body-sm);color:var(--text-faint)} .space-card p{font:var(--type-body-sm);color:var(--text-muted);margin:10px 0 16px} .tags{display:flex;gap:7px;flex-wrap:wrap} .tag{font:var(--type-caption);color:var(--text-muted);background:var(--surface-sunken); border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:5px 11px} /* services list (events / home-service) */ .svc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-subtle); border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden} .svc-row{background:var(--surface-page);padding:24px 28px;display:flex;gap:16px;align-items:flex-start;transition:background var(--dur-fast)} .svc-row:hover{background:var(--surface-raised)} .svc-row .s-ic{color:var(--accent);flex:none;margin-top:2px} .svc-row .s-ic svg{width:21px;height:21px} .svc-row h4{font:var(--type-h4);color:var(--text-strong);font-weight:600} .svc-row p{font:var(--type-body-sm);color:var(--text-muted);margin-top:4px} /* page hero (interior pages, no video) */ .phero{position:relative;overflow:hidden;border-bottom:1px solid var(--border-subtle)} .phero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 460px at 80% -10%,rgba(201,178,138,.13),transparent 58%)} .surface-cream .phero::before{background:radial-gradient(900px 460px at 80% -10%,rgba(179,154,110,.16),transparent 58%)} .phero-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:clamp(3.5rem,8vw,6.5rem) var(--gutter) clamp(2.5rem,5vw,4rem)} .phero h1{font:var(--type-display-xl);font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:1.03; letter-spacing:.01em;text-transform:uppercase;margin:20px 0 22px;max-width:20ch} .phero h1 em{font-style:normal;color:var(--accent-text)} /* ============================================================ GOLD GLOW SYSTEM — ambient light, used sparingly for premium feel. Attaches to existing section ids; no markup changes required. ============================================================ */ #services,#packages,#team,#spaces,#process{position:relative;isolation:isolate} #services::before,#packages::before,#team::before,#spaces::before,#process::before{ content:"";position:absolute;z-index:-1;pointer-events:none; width:min(1000px,86vw);height:560px;top:-90px; background:radial-gradient(closest-side,var(--glow-amb),transparent 72%); opacity:.85} /* alternate the light source side for rhythm */ #services::before,#team::before{right:-8%} #packages::before,#spaces::before{left:-8%} #process::before{left:50%;transform:translateX(-50%);width:min(1200px,92vw);height:420px;top:-40px; background:radial-gradient(closest-side,var(--glow-soft),transparent 70%)} /* gold-tinted hairline at section seams */ .section-line{position:relative} .section-line::after{content:"";position:absolute;top:-1px;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--border-gold) 50%,transparent);opacity:.6} /* featured package: gold top-glow + crown */ .pkg.featured{box-shadow:var(--shadow-cinematic),0 -1px 40px -8px var(--glow-amb)} .pkg.featured::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(120% 60% at 50% 0%,var(--glow-soft),transparent 60%)} /* card hovers gain a faint gold lift */ .vcard:hover{box-shadow:0 18px 50px -20px var(--glow-amb)} .work-card:hover .thumb{box-shadow:0 14px 44px -18px var(--glow-amb)} .space-card:hover{box-shadow:var(--shadow-md),0 16px 44px -22px var(--glow-amb)} /* eyebrow rule gets a soft glow node */ .eyebrow::before{box-shadow:0 0 10px var(--glow-amb)} /* trust strip: hairline gold seam top & bottom */ .trust{position:relative} .trust::before,.trust::after{content:"";position:absolute;left:0;right:0;height:1px; background:linear-gradient(90deg,transparent,var(--border-gold),transparent);opacity:.5} .trust::before{top:0}.trust::after{bottom:0} /* ---------- BIG STATS BAND ---------- */ .big-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;text-align:center} .big-stats .bs .num{font:600 clamp(2.6rem,5vw,4.1rem)/1 var(--font-display);color:var(--accent-text);letter-spacing:.01em} .big-stats .bs .lbl{font:var(--type-caption);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-muted);margin-top:10px} /* ---------- TESTIMONIALS ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .quote{position:relative;background:var(--surface-raised);border-radius:var(--radius-lg);overflow:hidden; padding:28px 26px 26px;display:flex;flex-direction:column;gap:16px; box-shadow:inset 0 1px 0 rgba(201,178,138,.09);transition:transform var(--dur-base) var(--ease-out)} .quote::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(130% 80% at 0% 0%,rgba(201,178,138,.14),transparent 50%)} .quote:hover{transform:translateY(-4px)} .quote .q-mark{font:700 2.4rem/0.6 var(--font-display);color:var(--accent)} .quote p{font:var(--type-body);color:var(--text-body);flex:1} .quote .q-who{font:var(--type-body-sm);font-weight:600;color:var(--text-strong)} .quote .q-role{font:var(--type-caption);color:var(--text-faint);margin-top:2px} /* ---------- FAQ ---------- */ .faq{max-width:820px;margin:0 auto} .faq details{border-bottom:1px solid var(--border-subtle)} .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px; padding:21px 2px;font:var(--type-h4);font-weight:600;color:var(--text-strong);transition:color var(--dur-fast)} .faq summary:hover{color:var(--accent-text)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font:400 1.6rem/1 var(--font-display);color:var(--accent-text); transition:transform var(--dur-base) var(--ease-out);flex:none} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{font:var(--type-body-sm);color:var(--text-muted);padding:0 34px 21px 2px;max-width:64ch} /* ---------- CONTACT ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start} /* contact page with the embedded GHL form gets a wider lead column */ .contact-grid.has-form{grid-template-columns:1.12fr .88fr} .form-panel .form-title{font:var(--type-h3);color:var(--text-strong)} .form-panel .form-sub{font:var(--type-body-sm);color:var(--text-muted);margin:9px 0 20px;max-width:48ch} /* GHL form ships black labels on a transparent bg (built for a light card), so the embed sits on cream to stay legible — mirrors the live site's treatment */ .ghl-embed{background:var(--cream-50);border:1px solid var(--border-default); border-radius:var(--radius-xl);overflow:hidden;min-height:660px;padding:6px} .ghl-embed iframe{display:block;border-radius:calc(var(--radius-xl) - 8px)} @media(max-width:980px){.contact-grid.has-form{grid-template-columns:1fr}} .c-method{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--border-subtle);align-items:flex-start} .c-method:first-of-type{border-top:none;padding-top:0} .c-method .c-ic{flex:none;width:42px;height:42px;border-radius:var(--radius-sm);display:grid;place-items:center; background:var(--accent-wash);border:1px solid var(--border-gold);color:var(--accent)} .c-method .c-ic svg{width:20px;height:20px} .c-method h4{font:var(--type-h4);color:var(--text-strong);font-weight:600} .c-method p,.c-method a.big{font:var(--type-body);color:var(--text-muted);margin-top:3px;display:block} .c-method a.big{color:var(--accent-text);font-weight:600} /* ---------- RESPONSIVE ---------- */ @media(max-width:980px){ .grid-3,.grid-4,.grid-pkg,.proc,.svc-list,.team-wrap,.quotes,.contact-grid{grid-template-columns:1fr;grid-template-rows:none} .big-stats{grid-template-columns:repeat(3,1fr);gap:12px} .grid-4{grid-template-columns:repeat(2,1fr)} .grid-pkg{grid-template-columns:repeat(2,1fr)} .proc{display:flex;flex-direction:column;gap:26px} .proc .step{padding:24px 22px 26px} .proc .step h4{margin:14px 0 10px} .proc .step p{line-height:1.55} /* mobile nav: burger toggles a full-width dropdown of the page links */ /* header: one clean 40px row — mark, compact CTA, ringed burger */ .nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:11px} .nav .wordmark .wm-mark{width:26px;height:26px} .nav .wordmark small{display:none} /* drop "MEDIA GROUP" — the mark + CADENCE carry it */ .nav-burger{display:inline-flex;flex:none;width:40px;height:40px;flex-direction:column; align-items:center;justify-content:center;gap:5px; background:rgba(255,255,255,.04);border:1px solid rgba(216,199,173,.42);border-radius:50%; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .nav-burger span{width:16px} .nav-mail{display:none} .nav-right{margin-left:auto;margin-right:10px} /* header CTA becomes a glass outline pill (ghost variant, tuned for a clear header) */ .nav .btn-gold.btn-sm{background:rgba(255,255,255,.05);color:var(--text-strong); border:1px solid rgba(216,199,173,.55);box-shadow:none; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); padding:9px 17px;font-size:.84rem;letter-spacing:.02em;font-weight:600} .nav .btn-gold.btn-sm:hover,.nav .btn-gold.btn-sm:active{background:rgba(216,199,173,.14); border-color:var(--accent);color:var(--accent-text);transform:none} .nav .btn-gold.btn-sm svg{display:none} /* sheet layout + rows live in the BOTTOM SHEET v2 block at the end of this file */ .nav-inner:has(.nav-check:checked) .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-inner:has(.nav-check:checked) .nav-burger span:nth-child(2){opacity:0} .nav-inner:has(.nav-check:checked) .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .foot-inner{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .grid-4,.grid-pkg,.foot-inner{grid-template-columns:1fr} .hero-stats{flex-wrap:wrap;gap:20px} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}} /* ---------- NAV DROPDOWNS (Services + Areas, added 2026-07-08) ---------- */ .nav-trigger{display:inline-flex;align-items:center;gap:7px;cursor:pointer;text-decoration:none} .dropdown .dd-item{text-decoration:none} .dd-title{display:block} .dd-desc{display:block} .dd-viewall{display:block;margin-top:8px;padding:12px 16px 4px;border-top:1px solid var(--border-subtle); font:var(--type-body-sm);font-weight:600;color:var(--accent-text);text-decoration:none} .dd-viewall:hover{color:var(--text-strong)} .dropdown--areas{left:0;transform:translateX(0) translateY(8px);min-width:600px;padding:18px 18px 12px} .has-dropdown:hover .dropdown--areas,.has-dropdown:focus-within .dropdown--areas{transform:translateX(0) translateY(0)} .dd-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 28px} .dd-col-title{font:var(--type-mono-label);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text); margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border-subtle)} .dd-cols a{display:block;font:var(--type-body-sm);color:var(--text-muted);padding:4px 0;text-decoration:none; transition:color var(--dur-fast)} .dd-cols a:hover{color:var(--text-strong)} @media(max-width:980px){ /* touch: dropdown panels hidden, triggers act as links to the hubs */ .has-dropdown .dropdown{display:none} .nav-trigger{display:flex;align-items:center;width:100%;padding:15px 2px;font-size:1.05rem; border-bottom:1px solid var(--border-subtle);color:var(--text-muted)} .nav-trigger .chev{margin-left:auto;transform:rotate(-45deg)} } /* ---------- NAV FITMENT + PREMIUM DROPDOWN PASS (2026-07-08b) ---------- */ /* header fitment: no wrapped labels, responsive gaps, email yields before links do */ .nav-links{gap:clamp(14px,1.8vw,30px)} .nav-links a.navlink,.nav-trigger{white-space:nowrap} @media(max-width:1350px){.nav-mail{display:none}} /* panels: soft top sheen, tighter radius rhythm, calmer entry */ .dropdown{padding:10px;border-radius:16px; background:linear-gradient(180deg,rgba(201,178,138,.06) 0%,rgba(201,178,138,0) 90px),var(--surface-raised)} .dd-item{padding:12px 14px} .dd-item .dd-desc{white-space:nowrap} /* areas mega-panel: 3 tidy county columns */ .dropdown--areas{min-width:680px;padding:22px 26px 14px} .dd-cols{gap:6px 36px} .dd-col-title{font-size:.68rem;opacity:.95;margin-bottom:10px} .dd-cols a{padding:5px 0;border-radius:6px} .dd-cols a:hover{color:var(--accent-text);padding-left:4px} .dd-viewall{margin-top:14px;padding:12px 2px 4px;font-size:.86rem} .dd-viewall .arr{color:var(--accent-text)} /* keep the wide panel on-screen on smaller desktops */ @media(max-width:1120px){.dropdown--areas{min-width:560px;padding:18px 20px 12px}.dd-cols{gap:4px 22px}} /* ---------- HEADER SLIM-DOWN (2026-07-08c): email removed, Studio dropdown ---------- */ .nav-m-only{display:none} @media(max-width:980px){ .nav-m-only{display:block} .nav-studio{display:none} } /* ---------- FAQ SMOOTH OPEN (2026-07-08d) ---------- */ @supports (interpolate-size: allow-keywords){ :root{interpolate-size:allow-keywords} } .faq details::details-content{ block-size:0;overflow:hidden; transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete} .faq details[open]::details-content{block-size:auto} .faq details p{opacity:0;transform:translateY(-5px); transition:opacity .32s ease .06s,transform .32s var(--ease-out) .06s} .faq details[open] p{opacity:1;transform:translateY(0)} .faq summary::after{transition:transform .3s var(--ease-out)} /* ---------- MOBILE NAV BOTTOM SHEET v2 (2026-07-19): IG-comments style ---------- Docked to the bottom edge, top corners rounded, grab bar + Menu/X header, scrollable rounded-row links, sticky CTA footer. fx.js injects .nav-scrim, .nav-sheet-head and .nav-sheet-foot; desktop never shows them. Last block in the file on purpose: it must win over every earlier nav rule. */ .nav-scrim,.nav-sheet-head,.nav-sheet-foot{display:none} @media(max-width:980px){ .nav-scrim{display:block;position:fixed;inset:0;z-index:110;background:rgba(6,5,4,.6); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); opacity:0;pointer-events:none;transition:opacity .35s var(--ease-out)} .nav-inner:has(.nav-check:checked) .nav-scrim{opacity:1;pointer-events:auto} .nav-links{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:120; width:100%;justify-self:stretch; /* base justify-self:start would shrink a fixed box to fit-content */ display:block;margin:0;max-height:85dvh;overflow-y:auto;overscroll-behavior:contain; background:var(--ink-800);border-top:1px solid var(--border-default); border-radius:24px 24px 0 0;box-shadow:0 -30px 80px -18px rgba(0,0,0,.9); padding:0 14px; transform:translateY(102%);visibility:hidden; transition:transform .5s cubic-bezier(.32,.72,.25,1),visibility 0s .5s} .nav-inner:has(.nav-check:checked) .nav-links{transform:translateY(0);visibility:visible; transition:transform .5s cubic-bezier(.32,.72,.25,1)} body:has(.nav-check:checked){overflow:hidden} /* page holds still behind the sheet */ /* sheet header: grab bar + title + round close; sticks while the list scrolls */ .nav-links>.nav-sheet-head{display:block;position:sticky;top:0;z-index:2;margin:0 -14px; padding:9px 18px 12px;background:var(--ink-800);border-bottom:1px solid var(--border-subtle)} .nav-sheet-head .grab{display:block;width:56px;padding:5px 0;margin:0 auto 8px;cursor:pointer} .nav-sheet-head .grab::before{content:"";display:block;width:44px;height:5px;margin:0 auto; border-radius:3px;background:var(--border-strong)} .nav-sheet-head .row{display:flex;align-items:center;justify-content:space-between} .nav-sheet-head .ttl{font:600 1.02rem/1 var(--font-sans);color:var(--text-strong)} .nav-sheet-head .x{display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:var(--surface-sunken);color:var(--text-strong);cursor:pointer} .nav-sheet-head .x svg{width:15px;height:15px} /* rows: soft rounded items, gold icons, no hairline clutter */ .nav-links>li{list-style:none} .nav-links a.navlink,.nav-links .nav-trigger{display:flex;align-items:center;width:100%; margin:3px 0;padding:14px;font-size:1.02rem;font-weight:500;border-bottom:none; border-radius:14px;color:var(--text-body)} .nav-links a.navlink:active,.nav-links .nav-trigger:active{background:var(--surface-sunken)} .navlink .nl-ic{width:18px;height:18px;margin-right:13px;opacity:1;transform:none;color:var(--accent)} .nav-links .nav-trigger .chev{margin-left:auto;transform:rotate(-45deg)} /* sheet footer: sticky CTA pair, IG-comment-bar position */ .nav-links>.nav-sheet-foot{display:flex;position:sticky;bottom:0;z-index:2;gap:10px; margin:8px -14px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom)); background:var(--ink-800);border-top:1px solid var(--border-subtle)} .nav-sheet-foot .btn{flex:1;justify-content:center} .surface-cream .nav-links,.surface-cream .nav-links>.nav-sheet-head, .surface-cream .nav-links>.nav-sheet-foot{background:var(--cream-100)} }