/* ========================================================================== ALLIANCE TRADING — Design Thread 7 · WORLD-CLASS PASS Vibe: Editorial Luxury × Vibrant FMCG Theatre Layout: Editorial Split + Asymmetrical Bento Dials: Variance 8 · Motion 7 · Density 4 Brand: Navy #0F2E48 · Gold #F6BB3D + saturated brand-colour theatre. ========================================================================== */ /* Fonts loaded via in each page's (MOB-03: parallel discovery — no render-blocking @import chain). Poppins is loaded on the homepage only. */ :root{ /* brand */ --navy:#0F2E48; --navy-deep:#0A2236; --gold:#F6BB3D; --gold-deep:#E0A52E; --gold-ink:#8A5A00; /* accessible gold for small/medium text on light backgrounds (>=4.5:1) */ --green:#5B9B3E; --yellow:#F4C430; --orange:#E87722; --red:#D2332C; --blue:#1E8FD5; --cream:#FFFFFF; --cream-2:#F5F5F5; --ink:#161616; --ink-soft:#5A5147; /* type */ --disp:"Fraunces",Georgia,serif; --sans:"Manrope",system-ui,sans-serif; --geo:var(--sans); /* Poppins retired — labels/UI unified on Manrope */ /* fluid type scale */ --t-eyebrow:clamp(11px,.8vw,13px); --t-h1:clamp(46px,7.4vw,116px); --t-h2:clamp(34px,5vw,82px); --t-h3:clamp(24px,2.6vw,38px); --t-lead:clamp(17px,1.5vw,22px); --t-body:clamp(15px,1.05vw,17px); /* spacing — 8px base */ --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px; --s9:160px; --rail:1280px; --gut:clamp(20px,4vw,52px); /* radii */ --r-s:14px; --r-m:22px; --r-l:32px; --r-pill:999px; /* motion */ --ease:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --sel:rgba(246,187,61,.32); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} .hero-cue .bar{animation:none}} img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--sel);color:var(--navy)} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px} .wrap{width:100%;max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut)} .disp{font-family:var(--disp);font-style:italic;font-weight:900;letter-spacing:-.022em;line-height:.96} .sec.light .disp,.sec.light h1,.sec.light h2{color:var(--navy)} /* one heading ink on light */ .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:"Poppins",var(--sans);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.22em;text-transform:uppercase;padding:8px 15px;border-radius:var(--r-pill);border:1px solid currentColor;opacity:.92} .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(246,187,61,.22)} /* hero header keeps its original Poppins voice (per client) */ .hero-nav .hn-links a,.hero-nav .hn-cta,.hero .hero-cue,.hero .hero-ctas .btn,.hero .hero-ctas .btn-text{font-family:"Poppins",var(--sans)} /* film grain (fixed, perf-safe) */ body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* scroll progress */ .progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:80;background:linear-gradient(90deg,var(--gold),var(--gold-deep));box-shadow:0 0 14px rgba(246,187,61,.5)} /* scroll-reveal — fail-open: visible by default, hidden+animated only under .anim (set by JS when page is visible) */ .reveal{opacity:1;transform:none;filter:none} .anim .reveal{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0ms)} .anim .reveal.rv{opacity:1;transform:none;filter:none} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--geo);font-weight:600;font-size:15px;letter-spacing:.01em;padding:13px 14px 13px 26px;border-radius:12px;transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)} .btn .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;transition:transform .5s var(--ease-spring),background .4s var(--ease)} .btn .ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .btn:hover .ico{transform:translate(3px,-2px)} .btn:active{transform:scale(.975)} .btn-ghost{color:#fff;border:1.5px solid rgba(255,255,255,.55)} .btn-ghost .ico{background:rgba(255,255,255,.14)} .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff} .btn-ghost:hover .ico{background:rgba(15,46,72,.1)} .btn-gold{color:var(--navy);background:var(--gold)} .btn-gold .ico{background:rgba(15,46,72,.14)} .btn-gold:hover{background:#fff} .btn-navy{color:#fff;background:var(--navy)} .btn-navy .ico{background:rgba(255,255,255,.16)} .btn-navy:hover{background:var(--gold);color:var(--navy)} .btn-navy:hover .ico{background:rgba(15,46,72,.14)} .btn-text{display:inline-flex;align-items:center;gap:9px;font-family:var(--geo);font-weight:600;font-size:15px;color:#fff;opacity:.9;transition:opacity .3s,gap .3s var(--ease)} .btn-text::after{content:"→";transition:transform .3s var(--ease)} .btn-text:hover{opacity:1}.btn-text:hover::after{transform:translateX(4px)} /* ---------- HERO ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:var(--navy-deep);padding-top:clamp(120px,15vh,168px);padding-bottom:clamp(80px,11vh,120px)} .hero-media{position:absolute;inset:0;z-index:0;will-change:transform} .hero video,.hero .hero-poster{position:absolute;inset:0;width:100%;height:108%;object-fit:cover} .hero::after{content:"";position:absolute;inset:0;z-index:1;background: radial-gradient(ellipse 64% 78% at 30% 54%, rgba(0,0,0,.7) 0%, rgba(0,0,0,.44) 44%, rgba(0,0,0,0) 72%), linear-gradient(180deg, rgba(8,22,36,.35) 0%, rgba(8,22,36,0) 26%, rgba(8,22,36,0) 74%, rgba(8,22,36,.55) 100%)} .hero-inner{position:relative;z-index:3;max-width:1000px;width:100%;margin:0 auto;padding:0 var(--gut);text-align:center;display:flex;flex-direction:column;align-items:center} .hero-eyebrow{color:#fff;margin-bottom:26px} .hero h1{margin:0;font-size:clamp(40px,5.8vw,96px);color:#fff} .hero h1 .line{display:block;overflow:hidden} .hero h1 .line>span{display:block;transition:transform 1s var(--ease)} .anim .hero h1 .line>span{transform:translateY(105%)} .anim .hero.lit h1 .line>span{transform:none} .hero h1 .line:nth-child(1)>span{transition-delay:.15s} .hero h1 .line:nth-child(2)>span{transition-delay:.28s} .hero h1 .line:nth-child(3)>span{transition-delay:.41s} .hero-sub{max-width:46ch;margin:26px auto 0;font-size:var(--t-lead);font-weight:600;color:rgba(255,255,255,.84);line-height:1.5;transition:opacity .9s var(--ease) .62s,transform .9s var(--ease) .62s} .anim .hero-sub{opacity:0;transform:translateY(16px)} .anim .hero.lit .hero-sub{opacity:1;transform:none} .hero-ctas{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;margin-top:38px;transition:opacity .9s var(--ease) .78s,transform .9s var(--ease) .78s} .anim .hero-ctas{opacity:0;transform:translateY(16px)} .anim .hero.lit .hero-ctas{opacity:1;transform:none} .hero-cue{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:9px;font-family:var(--geo);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.66)} .hero-cue .bar{width:1px;height:42px;background:linear-gradient(180deg,rgba(255,255,255,.7),transparent);animation:cue 2s var(--ease) infinite} @keyframes cue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}} /* ---------- HERO NAV (left-aligned, large reversed logo) ---------- */ .hero-nav{position:absolute;top:0;left:0;right:0;z-index:6;background:linear-gradient(180deg, rgba(8,22,36,.62) 0%, rgba(8,22,36,0) 100%)} /* full-width 3-zone nav (Sensium-style): logo left · links centred · CTA right */ .hn-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,2.2vw,40px);max-width:1120px;margin:0 auto;padding:clamp(26px,2.9vw,40px) clamp(28px,4vw,60px)} .hn-logo{justify-self:start;display:inline-flex;padding:6px 0;transition:transform .4s var(--ease)} .hn-logo:hover{transform:translateY(-2px)} .hn-logo img{height:clamp(76px,7.6vw,104px);width:auto;display:block;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))} .hn-links{justify-self:center;display:flex;align-items:center;gap:clamp(20px,2.4vw,44px)} .hn-links a{position:relative;font-family:var(--geo);color:#fff;font-weight:600;font-size:15px;text-shadow:0 1px 10px rgba(0,0,0,.5)} .hn-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .hn-links a:hover::after{transform:scaleX(1)} .hn-cta{justify-self:end;background:var(--gold);color:var(--navy)!important;border-radius:10px;padding:12px 24px;font-family:var(--geo);font-weight:700;font-size:14.5px;text-shadow:none;transition:transform .35s var(--ease),background .3s} .hn-cta:hover{background:#fff;transform:translateY(-1px)} @media (max-width:860px){.hn-links{display:none}} /* ---------- SCROLL-REVEAL NAV (frosted bar, full-colour logo) ---------- */ .scroll-nav{position:fixed;top:0;left:0;right:0;z-index:90; background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 30px -24px rgba(15,46,72,.5);border-bottom:1px solid rgba(15,46,72,.08); transform:translateY(-100%);transition:transform .45s var(--ease);will-change:transform} .sn-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,2.2vw,40px);max-width:1120px;margin:0 auto;padding:9px clamp(28px,4vw,60px)} .scroll-nav.show{transform:translateY(0)} .scroll-nav .sn-logo{justify-self:start;display:inline-flex} .scroll-nav .sn-logo img{height:clamp(76px,7.6vw,104px);width:auto;display:block} .sn-links{justify-self:center;display:flex;align-items:center;gap:clamp(20px,2.2vw,36px)} .sn-links a{position:relative;font-family:var(--geo);font-weight:600;font-size:15px;color:var(--navy)} .sn-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .sn-links a:hover::after{transform:scaleX(1)} .scroll-nav .btn{justify-self:end} @media (max-width:860px){.sn-links{display:none}} /* ---------- MARQUEE (kinetic, JS-driven) ---------- */ .marq{overflow:hidden;padding:15px 0;border-block:2px solid rgba(0,0,0,.12)} .marq-row{display:flex;white-space:nowrap;width:max-content;will-change:transform} .marq-row span{font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(20px,2.2vw,32px);padding-inline:28px;display:inline-flex;align-items:center;gap:28px} .marq-row span::after{content:"✦";font-size:.5em;opacity:.7} .marq.red{background:var(--red);color:#fff} .marq.gold{background:var(--gold);color:var(--navy)} .marq.navy{background:var(--navy);color:var(--gold)} /* ---------- SECTION SCAFFOLD ---------- */ .sec{padding-block:clamp(var(--s7),11vw,var(--s9));position:relative} .sec.dark{background:var(--navy);color:#fff} .sec.deep{background:var(--navy-deep);color:#fff} /* faint retail-scene photo ghosted into the flat navy sections (breaks up the solid blue) */ .sec.deep,.sec.dark,.sec.quote,.page-hero.has-media{position:relative;isolation:isolate} .sec.deep::before,.sec.dark::before,.sec.quote::before,.page-hero.has-media::before{content:"";position:absolute;inset:0;z-index:0;background:url(/assets/wm-navy.webp) center/cover no-repeat;opacity:.16;pointer-events:none} .sec.deep>*,.sec.dark>*,.sec.quote>*,.page-hero.has-media>*{position:relative;z-index:1} .sec.light{background:var(--cream);color:var(--ink)} .sec-head{max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut)} .sec-head .eyebrow{margin-bottom:22px} .sec h2{font-size:var(--t-h2);margin:0} .sec .dek{font-size:var(--t-lead);max-width:46ch;margin:22px 0 0;font-weight:500;line-height:1.55;color:var(--ink-soft)} .dark .dek,.deep .dek{color:rgba(255,255,255,.74)} /* ---------- STAT BAND ---------- */ .stats{background:var(--cream-2)} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px);max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut)} .stat{padding:34px 30px;border-radius:var(--r-l);background:#fff;border:1px solid rgba(15,46,72,.07);box-shadow:0 22px 50px -28px rgba(15,46,72,.28)} .stat .num{font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(40px,4.6vw,68px);line-height:1;color:var(--navy);letter-spacing:-.02em} .stat .num .u{color:var(--gold-ink)} .stat .lab{margin-top:14px;font-size:14px;font-weight:700;color:var(--ink-soft);line-height:1.4} .stat-note{max-width:var(--rail);margin:22px auto 0;padding-inline:var(--gut);font-size:12px;color:var(--ink-soft);opacity:.7} /* ---------- WHAT WE DO (split copy + sticky panel swap — MOTION-01) ---------- */ .what-split{margin-top:clamp(40px,5vw,64px);align-items:start} .what-list{display:flex;flex-direction:column} .wrow{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;font-family:var(--sans);padding-block:clamp(30px,6vh,72px);border-top:1px solid rgba(255,255,255,.12)} .wrow:first-child{padding-top:0;border-top:0} .wrow .ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--r-m);font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--gold);background:rgba(246,187,61,.16);transition:background .5s var(--ease),color .5s var(--ease)} .wrow .ti{font-weight:700;font-size:18px;line-height:1.3;color:#fff;margin:0 0 8px} .wrow .ds{font-weight:500;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72);margin:0;max-width:42ch} .what-split .btn-text{margin-top:30px} .what-photo{position:sticky;top:clamp(96px,14vh,150px);align-self:start;aspect-ratio:4/5;max-height:620px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)} .ws-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)} .ws-img.is-on{opacity:1} /* dimming only under a JS-added class so the no-JS/reduced-motion render is all-lit (fail-open) */ .steps-live .what-list .wrow{opacity:.4;transition:opacity .5s var(--ease)} .steps-live .what-list .wrow.active{opacity:1} .steps-live .wrow.active .ic{background:var(--gold);color:var(--navy)} @media(max-width:900px){.what-photo{position:static;aspect-ratio:4/3;max-height:none}.wrow{padding-block:24px}.steps-live .what-list .wrow{opacity:1}} /* ---------- CAPABILITIES (uniform card grid) ---------- */ .caps-list{max-width:var(--rail);margin:56px auto 0;padding-inline:var(--gut);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px} .cap{display:flex;flex-direction:column;font-family:var(--sans);padding:30px 26px 32px;border-radius:var(--r-l);background:#fff;border:1px solid rgba(15,46,72,.08);box-shadow:0 24px 54px -32px rgba(15,46,72,.3)} .cap .ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 0 20px;border-radius:var(--r-m);color:var(--gold-deep);background:rgba(246,187,61,.14)} .cap .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .cap .ti{font-weight:700;font-size:18px;line-height:1.3;color:var(--navy);margin:0 0 10px} .cap .ds{font-weight:500;font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:0} @media(max-width:900px){.caps-list{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.caps-list{grid-template-columns:1fr;gap:14px}.cap{padding:26px 22px 28px}} /* ---------- AD-02b CAPABILITIES DE-GRID → ruled manifest (CLIENT-TASTE CHECKPOINT — isolated, one-step revertible) ---------- */ .caps-edit{max-width:var(--rail);margin:clamp(48px,6vw,64px) auto 0;padding-inline:var(--gut);display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,80px)} .cedit{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:28px 0;border-top:1px solid rgba(15,46,72,.12)} .cedit .n{font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(30px,2.6vw,40px);line-height:1;color:var(--gold-ink)} .cedit .ti{font-weight:700;font-size:18px;line-height:1.3;color:var(--navy);margin:0 0 8px} .cedit .ds{font-weight:500;font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin:0} @media(max-width:720px){.caps-edit{grid-template-columns:1fr;gap:0}} /* ============ SHARED KIT (clean-but-vibrant components reused across sections) ============ */ .kicker{font-family:var(--geo);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);display:inline-block;margin:0 0 14px} .sec.dark .kicker,.sec.deep .kicker{color:var(--gold)} .kicker.on-photo{color:var(--gold)} .dcard{display:flex;flex-direction:column;font-family:var(--sans);padding:30px 26px 32px;border-radius:var(--r-l);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 54px -32px rgba(0,0,0,.5);transition:background .4s var(--ease),border-color .4s var(--ease)} .dcard:hover{background:rgba(255,255,255,.08);border-color:rgba(246,187,61,.4)} .dcard .ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 0 20px;border-radius:var(--r-m);color:var(--gold);background:rgba(246,187,61,.16)} .dcard .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .dcard .ti{font-weight:700;font-size:18px;line-height:1.3;color:#fff;margin:0 0 10px} .dcard .ds{font-weight:500;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72);margin:0} .dcard-grid{max-width:var(--rail);margin:56px auto 0;padding-inline:var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} @media(max-width:900px){.dcard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.dcard-grid{grid-template-columns:1fr}} .photo-panel{position:relative;border-radius:var(--r-l);overflow:hidden;background:var(--cream-2)} .photo-panel img{display:block;width:100%;height:100%;object-fit:cover} .photo-panel.scrim::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,34,54,.10) 0%,rgba(10,34,54,.42) 55%,rgba(10,34,54,.78) 100%)} .photo-panel .panel-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(24px,3vw,40px);color:#fff;font-family:var(--sans)} .photo-panel .panel-cap .pt{font-weight:700;font-size:var(--t-h3);line-height:1.15;margin:8px 0 0} .photo-bg{position:relative;isolation:isolate} .photo-bg>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .photo-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,34,54,.82),rgba(10,34,54,.92))} .photo-bg.left::before{background:linear-gradient(90deg,rgba(10,34,54,.94) 0%,rgba(10,34,54,.78) 48%,rgba(10,34,54,.52) 100%)} .split{max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center} .split>*{min-width:0} .split.text-first .split-text{order:-1} @media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}} .pill{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600;font-size:var(--t-body);line-height:1;padding:14px 22px;border-radius:var(--r-pill);background:#fff;color:var(--navy);border:1px solid rgba(15,46,72,.10);box-shadow:0 14px 30px -22px rgba(15,46,72,.4)} .photo-bg .pill,.sec.dark .pill{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.18);box-shadow:none} /* ---------- COLOUR POP "LOUDER" + AD-01 "THE SHELF" ---------- */ .louder{background:var(--cream);color:var(--ink);overflow:hidden} .louder-head{max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut);text-align:center;display:flex;flex-direction:column;align-items:center} .louder .kicker.on-photo{color:var(--gold-ink)} .louder .big{font-family:var(--disp);font-style:italic;font-weight:900;font-size:var(--t-h1);line-height:.92;color:var(--navy);margin:0} .louder .big em{color:var(--gold-deep);font-style:italic} .louder .louder-dek{font-family:var(--sans);font-weight:500;font-size:var(--t-lead);line-height:1.5;color:var(--ink-soft);max-width:46ch;margin:26px auto 0;padding-top:26px;border-top:3px solid var(--gold)} /* (AD-01 pack shelf removed from the homepage per client; pack cutouts still used on the brands hub + brand pages) */ /* ---------- MOTION-03 line-rise (reuses the hero's masked reveal, fail-open) ---------- */ .rl{display:block;overflow:hidden} .rl>span{display:block} .anim .reveal .rl>span{transform:translateY(108%);transition:transform .9s var(--ease)} .anim .reveal.rv .rl>span{transform:none} .anim .reveal.rv .rl:nth-child(2)>span{transition-delay:.1s} .anim .reveal.rv .rl:nth-child(3)>span{transition-delay:.2s} .anim .quote .in.reveal .rule{transform:scaleX(0);transform-origin:center;transition:transform .6s var(--ease) .4s} .anim .quote .in.reveal.rv .rule{transform:scaleX(1)} /* ---------- AD-06 one gold accent word per key heading ---------- */ .disp .hl,.page-hero h1 .hl{color:var(--gold);font-style:italic} .sec.light .disp .hl{color:var(--gold-ink)} /* special ampersand: render "&" in Fraunces' UPRIGHT roman (the italic ampersand is an "Et" ligature that reads like an E) */ .amp{font-style:normal;font-weight:900} /* ---------- STOCKISTS (photo band + pills) ---------- */ .stockists{color:#fff} .stockists .stk-grid{max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center} .stockists .stk-grid>*{min-width:0} .stockists .stk-head h2{margin:0} .stockists .stk-head .dek{color:rgba(255,255,255,.82)} .stockists .stk-pills{display:flex;flex-wrap:wrap;gap:12px} .stockists .stk-pills .pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.26);text-shadow:0 1px 6px rgba(10,34,54,.45)} @media(max-width:900px){.stockists .stk-grid{grid-template-columns:1fr;gap:36px}} /* ---------- BRANDS COVERFLOW ---------- */ .brands .rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:56px var(--gut) 22px;cursor:grab;scrollbar-width:none;-webkit-overflow-scrolling:touch} .brands .rail::-webkit-scrollbar{display:none} .brands .rail.drag,.brands .rail:active{cursor:grabbing;scroll-snap-type:none} .brands .rail:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:var(--r-m)} /* rail scroll arrows (affordance + click-to-scroll) */ .rail-wrap{position:relative} .rail-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:clamp(46px,3.4vw,56px);height:clamp(46px,3.4vw,56px);border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--navy);border:none;cursor:pointer;box-shadow:0 14px 34px -12px rgba(0,0,0,.6);transition:transform .3s var(--ease),opacity .35s var(--ease),background .3s var(--ease)} .rail-arrow svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .rail-arrow.prev{left:clamp(6px,1.5vw,22px)} .rail-arrow.next{right:clamp(6px,1.5vw,22px)} .rail-arrow:hover{background:var(--gold-deep);transform:translateY(-50%) scale(1.07)} .rail-arrow:focus-visible{outline:2px solid #fff;outline-offset:3px} .rail-arrow[disabled]{opacity:0;pointer-events:none} .rail-wrap.no-scroll .rail-arrow{display:none} @media(max-width:860px){.rail-arrow{display:none}} .pcard{scroll-snap-align:center;flex:0 0 clamp(280px,30vw,360px);aspect-ratio:4/5;border-radius:var(--r-l);position:relative;text-decoration:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:8px;box-shadow:0 24px 54px -32px rgba(0,0,0,.5);transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)} .pcard:hover{border-color:rgba(246,187,61,.4);box-shadow:0 34px 70px -34px rgba(0,0,0,.6)} .pcard:focus-visible{outline:2px solid var(--gold);outline-offset:4px} .pcard .face{position:relative;width:100%;height:100%;border-radius:calc(var(--r-l) - 8px);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;font-family:var(--sans);background:var(--brand,var(--navy-deep))} .pcard.pc-red{--brand:var(--red)} .pcard.pc-orange{--brand:var(--orange)} .pcard.pc-green{--brand:var(--green)} .pcard.pc-blue{--brand:var(--blue)} .pcard.pc-yellow{--brand:var(--yellow)} .pcard .face::before{content:attr(data-mono);position:absolute;top:-.18em;right:.04em;z-index:1;font-family:var(--sans);font-weight:800;font-size:clamp(150px,17vw,210px);line-height:1;color:rgba(255,255,255,.16);pointer-events:none} .pcard .face::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(10,34,54,0) 38%,rgba(10,34,54,.5) 100%)} .pcard .face.has-img .cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .pcard .face.has-img::after{background:linear-gradient(180deg,rgba(10,34,54,.12) 0%,rgba(10,34,54,.32) 50%,rgba(10,34,54,.82) 100%)} .pcard .meta{position:relative;z-index:3;padding:clamp(22px,2.4vw,28px)} .pcard .cat{font-family:var(--geo);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 9px} .pcard .nm{font-family:var(--disp);font-style:italic;font-weight:900;letter-spacing:-.015em;font-size:var(--t-h3);line-height:1.08;color:#fff;margin:0} .pcard .nm::after{content:"";display:block;width:34px;height:3px;margin-top:14px;border-radius:2px;background:var(--gold);transition:width .5s var(--ease)} .pcard:hover .nm::after{width:62px} @media(max-width:560px){.pcard{flex-basis:clamp(240px,82vw,300px)}} /* ---------- PROCESS (numbered steps, light card DNA) ---------- */ .proc-grid{max-width:var(--rail);margin:56px auto 0;padding-inline:var(--gut);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px} .cap.step{position:relative} .cap.step .ic .num{font-family:var(--geo);font-weight:600;font-size:20px;line-height:1;color:var(--gold-deep)} .cap.step .step-k{font-family:var(--geo);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px} .cap.step .ti{margin-top:0} .cap.step::after{content:"";position:absolute;top:54px;right:-12px;width:24px;height:1px;background:linear-gradient(90deg,rgba(246,187,61,0),var(--gold) 35%,var(--gold) 65%,rgba(246,187,61,0));z-index:1} .cap.step:last-child::after{display:none} @media(max-width:900px){.proc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cap.step::after{display:none}} @media(max-width:560px){.proc-grid{grid-template-columns:1fr}} /* ---------- AD-02a EDITORIAL TIMELINE (replaces the duplicated Process card wall) ---------- */ .tline{list-style:none;max-width:var(--rail);margin:clamp(48px,6vw,64px) auto 0;padding-inline:var(--gut);display:grid;grid-template-columns:repeat(4,1fr);border-top:3px solid var(--gold);gap:clamp(16px,2vw,32px)} .tline .tl-i{margin:0;padding-top:26px;position:relative} .tline .tl-i::before{content:"";position:absolute;top:-8px;left:0;width:13px;height:13px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(246,187,61,.25)} .tline .n{display:block;font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(52px,5.6vw,92px);line-height:1;color:var(--navy)} .tline .ti{font-weight:700;font-size:18px;color:var(--navy);margin:10px 0 8px} .tline .ds{font-size:14.5px;line-height:1.5;color:var(--ink-soft);max-width:30ch;margin:0} @media(max-width:900px){.tline{grid-template-columns:1fr 1fr}} @media(max-width:560px){.tline{grid-template-columns:1fr;border-top:0;border-left:3px solid var(--gold);padding-left:24px}.tline .tl-i::before{left:-31px}} /* ---------- QUOTE (colour pop) ---------- */ .quote{background:var(--navy-deep);color:#fff;text-align:center} .quote .in{max-width:840px;margin-inline:auto;padding-inline:var(--gut);position:relative} .quote .kicker{color:var(--gold);margin:0 0 28px} .quote .mark{font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(64px,9vw,128px);line-height:.6;color:rgba(255,255,255,.22);height:.5em;margin:0 auto 6px;user-select:none} .quote blockquote{font-family:var(--disp);font-style:italic;font-weight:600;font-size:var(--t-h2);line-height:1.12;letter-spacing:-.01em;max-width:20ch;margin:0 auto;color:#fff} .quote .rule{width:48px;height:3px;background:var(--gold);border-radius:var(--r-pill);margin:clamp(28px,4vw,40px) auto 22px} .quote .by{font-family:var(--geo);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)} /* ---------- FAQ ---------- */ .faq-list{max-width:920px;margin:56px auto 0;padding-inline:var(--gut);border-top:1px solid rgba(15,46,72,.10)} .faq-item{border-bottom:1px solid rgba(15,46,72,.10)} .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:clamp(22px,2.4vw,28px) 0;font-family:var(--disp);font-style:italic;font-weight:800;letter-spacing:-.01em;font-size:var(--t-h3);line-height:1.2;color:var(--navy);transition:color .3s var(--ease)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover{color:var(--gold-ink)} .faq-item summary::after{content:"+";flex:none;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:500;font-size:26px;line-height:1;color:var(--gold-ink);background:rgba(246,187,61,.14);border-radius:var(--r-pill);transition:transform .35s var(--ease),background .3s var(--ease)} .faq-item[open] summary::after{content:"\2212";transform:rotate(180deg)} .faq-item summary:hover::after{background:rgba(246,187,61,.24)} .faq-item summary:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px;border-radius:6px} .faq-a{padding:0 56px clamp(22px,2.4vw,28px) 0} .faq-item p{margin:0;font-family:var(--sans);font-weight:500;font-size:var(--t-body);line-height:1.65;color:var(--ink-soft);max-width:62ch} .faq-item p a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:3px} @media(max-width:560px){.faq-a{padding-right:0}} /* ---------- CTA ---------- */ .cta{position:relative;isolation:isolate;text-align:center;color:#fff;background:var(--navy-deep)} .cta>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 140% at 50% 0%,rgba(22,58,88,.82),rgba(15,46,72,.9) 52%,rgba(10,34,54,.96))} .cta .in{max-width:860px;margin-inline:auto;padding-inline:var(--gut)} .cta h2.disp{margin:0} .cta h2 .g{color:var(--gold)} .cta .dek{font-size:var(--t-lead);color:rgba(255,255,255,.74);max-width:48ch;margin:22px auto 0} .cta .btn-gold{margin-top:clamp(32px,4vw,44px)} .cta-call{font-size:var(--t-body);color:rgba(255,255,255,.6);margin:22px 0 0} .cta-call a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(246,187,61,.4)} .cta-call a:hover{border-color:var(--gold)} .cta-call .nowrap{white-space:nowrap} /* ---------- FOOTER ---------- */ .foot{background:var(--navy-deep);color:rgba(255,255,255,.6)} .foot .word{font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(56px,15vw,220px);line-height:.8;color:rgba(255,255,255,.06);text-align:center;letter-spacing:-.03em;padding:clamp(40px,6vw,80px) var(--gut) 0;user-select:none} .foot .bar{max-width:var(--rail);margin-inline:auto;padding:34px var(--gut);display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:600;flex-wrap:wrap} .foot .bar nav{display:flex;gap:24px} .foot .bar a:hover{color:var(--gold)} /* ---------- BACK TO TOP ---------- */ .totop{position:fixed;right:24px;bottom:24px;z-index:70;width:50px;height:50px;border-radius:50%;background:var(--gold);color:var(--navy);display:grid;place-items:center;box-shadow:0 14px 34px rgba(15,46,72,.34);opacity:0;transform:translateY(20px) scale(.9);pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease-spring);border:none;cursor:pointer} .totop.show{opacity:1;transform:none;pointer-events:auto} .totop svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .totop:hover{transform:translateY(-3px)} /* ---------- RESPONSIVE (section grids own their own breakpoints above) ---------- */ @media (max-width:980px){ .stat-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:680px){ .hero-inner{padding-left:clamp(22px,8vw,40px);padding-right:clamp(22px,8vw,40px)} .hero::after{background:radial-gradient(ellipse 90% 70% at 50% 40%,rgba(0,0,0,.6),rgba(8,22,36,.82))} } /* ============ MOBILE NAV ============ */ .navburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border:0;background:transparent;cursor:pointer;padding:0;justify-self:end} .navburger span{display:block;width:24px;height:2px;border-radius:2px;background:var(--navy);margin:0 auto;transition:transform .35s var(--ease),opacity .2s} .navburger.on-dark span{background:#fff} .menu-open .navburger span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-open .navburger span:nth-child(2){opacity:0} .menu-open .navburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .mobile-menu{position:fixed;inset:0;z-index:120;background:linear-gradient(160deg,var(--navy),var(--navy-deep));display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s} .menu-open .mobile-menu{opacity:1;visibility:visible;transform:none} .mm-nav{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px;text-align:center} .mm-nav a{font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(30px,8vw,46px);color:#fff;padding:8px 0;line-height:1.1} .mm-nav a:hover{color:var(--gold)} .mm-nav .mm-cta{margin-top:20px;font-family:var(--geo);font-style:normal;font-weight:700;font-size:16px;background:var(--gold);color:var(--navy);padding:15px 32px;border-radius:12px} .menu-open{overflow:hidden} @media(max-width:860px){ .hn-inner,.sn-inner{grid-template-columns:1fr auto} .hn-cta,.scroll-nav .btn,.site-header .btn{display:none} .navburger{display:flex} } /* ============ SUB-PAGE SHELL ============ */ .site-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(15,46,72,.08);box-shadow:0 8px 30px -24px rgba(15,46,72,.5)} .site-header .sn-inner,.scroll-nav .sn-inner{padding-block:clamp(10px,1.2vw,16px)} .site-header .sn-logo{justify-self:start;display:inline-flex} .site-header .sn-logo img{height:clamp(76px,7.6vw,104px);width:auto;display:block} /* match homepage hero-nav logo size */ .site-header .btn{justify-self:end} .page-hero{position:relative;isolation:isolate;background:var(--navy-deep);color:#fff;padding-block:clamp(72px,11vw,132px);overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:clamp(560px,84vh,800px)} .page-hero .in{max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut)} .page-hero h1{font-family:var(--disp);font-style:italic;font-weight:900;letter-spacing:-.022em;line-height:.98;font-size:clamp(40px,6vw,84px);margin:0;max-width:18ch} .page-hero .lede{font-size:var(--t-lead);font-weight:500;color:rgba(255,255,255,.8);max-width:56ch;margin:24px 0 0;line-height:1.5} .page-hero .kicker{color:var(--gold)} .page-hero .ph-ctas{display:flex;flex-wrap:wrap;gap:18px;margin-top:34px} .page-hero.photo-bg .lede{color:rgba(255,255,255,.86)} .page-hero>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .page-hero.photo-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(10,34,54,.92) 0%,rgba(10,34,54,.78) 50%,rgba(10,34,54,.5) 100%)} .lede-grid{max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(40px,5vw,64px)} @media(max-width:900px){.lede-grid{grid-template-columns:1fr;gap:32px}} /* page hero — split media (text left, photo/brand panel right) */ .page-hero.has-media .in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(32px,5vw,76px);align-items:center} .page-hero.has-media .in>*{min-width:0} .page-hero.has-media h1{max-width:none;overflow-wrap:break-word} .page-hero .ph-media{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:5/4;box-shadow:0 44px 90px -46px rgba(0,0,0,.7);background:rgba(255,255,255,.04)} .page-hero .ph-media img{width:100%;height:100%;object-fit:cover;display:block} .page-hero .ph-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,34,54,0) 56%,rgba(10,34,54,.34));pointer-events:none} .page-hero .ph-media.brand{display:grid;place-items:center;background:var(--brandc,var(--navy))} .page-hero .ph-media.brand::after{background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(10,34,54,.30))} .page-hero .ph-media.b-red{--brandc:var(--red)} .page-hero .ph-media.b-orange{--brandc:var(--orange)} .page-hero .ph-media.b-green{--brandc:var(--green)} .page-hero .ph-media.b-blue{--brandc:var(--blue)} .page-hero .ph-media.b-yellow{--brandc:var(--yellow)} .page-hero .ph-media .mono{position:relative;z-index:1;font-family:var(--sans);font-weight:800;font-size:clamp(150px,20vw,260px);line-height:1;color:rgba(255,255,255,.92)} .page-hero .ph-media.b-yellow .mono{color:rgba(15,46,72,.32)} .page-hero .ph-media .mono-cat{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2.4vw,30px);font-family:var(--geo);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:#fff} .page-hero .ph-media.b-yellow .mono-cat{color:var(--navy)} @media(max-width:860px){.page-hero.has-media .in{grid-template-columns:1fr;gap:30px}.page-hero .ph-media,.page-hero .ph-media.brand{aspect-ratio:16/10}.page-hero .ph-media .mono{font-size:clamp(120px,32vw,180px)}} /* page-hero full-bleed variant + brands-hub colour + utilities */ .page-hero.photo-bg{padding-block:clamp(72px,11vw,132px)} /* match base so all hero heights are equal (driven by min-height) */ .page-hero.photo-bg .in{position:relative;z-index:1} .muted{opacity:.7} .brand-grid .cap:nth-child(1) .ic{color:var(--red);background:rgba(210,51,44,.12)} .brand-grid .cap:nth-child(2) .ic{color:var(--orange);background:rgba(232,119,34,.14)} .brand-grid .cap:nth-child(3) .ic{color:var(--green);background:rgba(91,155,62,.15)} .brand-grid .cap:nth-child(4) .ic{color:var(--blue);background:rgba(30,143,213,.14)} .brand-grid .cap:nth-child(5) .ic{color:var(--gold-deep);background:rgba(244,196,48,.20)} .brand-grid .cap:nth-child(6) .ic{color:var(--red);background:rgba(210,51,44,.12)} .brand-grid .cap:nth-child(7) .ic{color:var(--orange);background:rgba(232,119,34,.14)} .prose{max-width:64ch} .sec > .prose{max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut)} /* rail-align section-level prose (was bleeding to viewport edge) */ .sec > .prose p{max-width:64ch} .prose p{font-size:var(--t-body);line-height:1.7;color:var(--ink-soft);margin:0 0 18px} .prose p:last-child{margin-bottom:0} .dark .prose p,.deep .prose p{color:rgba(255,255,255,.78)} /* ============ VERTICAL RHYTHM / SPACING (fix headline-body collisions + cramped rows) ============ */ .sec h2{line-height:1.05} /* loosen multi-line display headings so descenders don't crowd */ .sec-head .disp + .dek{margin-top:24px} .split-text > h2,.split-text > .disp{margin:0 0 22px} /* headline never butts the body copy */ .split-text > .prose{margin-top:0} .split-text > .btn,.split-text > .btn-text{margin-top:clamp(26px,3vw,34px)} .split-text > .prose + .btn,.split-text > .prose + .btn-text{margin-top:clamp(26px,3vw,34px)} .caps-list + .sec-head,.dcard-grid + .sec-head,.prose + .sec-head{margin-top:clamp(48px,6vw,76px)} /* pill + CTA rows on sub-pages: align to rail, give them room, never butt the block above */ .pill-row{display:flex;flex-wrap:wrap;gap:12px;max-width:var(--rail);margin:clamp(28px,3.5vw,36px) auto 0;padding-inline:var(--gut)} .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;max-width:var(--rail);margin:clamp(30px,4vw,40px) auto 0;padding-inline:var(--gut)} .prose + .pill-row{margin-top:clamp(24px,3vw,32px)} /* ---------- CONTACT PAGE (form left, details right) ---------- */ .contact-grid{max-width:var(--rail);margin-inline:auto;padding-inline:var(--gut);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(34px,5vw,72px);align-items:start} .contact-grid>*{min-width:0} .contact-grid .disp{color:var(--navy);margin:0} .contact-grid .kicker{display:block} .contact-fields .dek{margin:16px 0 0;max-width:46ch} .contact-fields .form-wrap{margin-top:clamp(26px,3vw,34px)} .contact-side .dek{margin:16px 0 22px;max-width:38ch} .contact-card{background:#fff;border:1px solid rgba(15,46,72,.10);border-radius:var(--r-m);padding:22px 24px;box-shadow:0 24px 54px -38px rgba(15,46,72,.35)} .cc-locs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px} .cc-label{display:block;font-family:var(--geo);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px} .cc-mail{font-family:var(--sans);font-weight:700;font-size:clamp(17px,1.4vw,20px);color:var(--navy);word-break:break-word} .cc-email p{margin:8px 0 0;font-size:var(--t-body);color:var(--ink-soft)} .cc-flag{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:11px;background:var(--navy);color:#fff;font-family:var(--geo);font-weight:700;font-size:13px;letter-spacing:.03em;margin:0 0 12px} .cc-loc h3{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--navy);margin:0 0 6px} .cc-loc p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.5} .cc-note{margin:16px 0 0;font-size:14.5px;color:var(--ink-soft);line-height:1.6} .cc-points{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px} .cc-points li{position:relative;padding-left:26px;font-size:var(--t-body);color:var(--ink-soft);line-height:1.5} .cc-points li::before{content:"";position:absolute;left:2px;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--gold-deep)} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:44px}} @media(max-width:520px){.cc-locs{grid-template-columns:1fr}} /* ============ BRANDS HUB — per-brand sections ============ */ .brand-row{align-items:center} .brand-panel{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:5/4;display:grid;place-items:center;background:var(--brandc,var(--navy-deep));box-shadow:0 34px 80px -44px rgba(0,0,0,.55)} .brand-panel.b-red{--brandc:var(--red)} .brand-panel.b-orange{--brandc:var(--orange)} .brand-panel.b-green{--brandc:var(--green)} .brand-panel.b-blue{--brandc:var(--blue)} .brand-panel.b-yellow{--brandc:var(--yellow)} .brand-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(155deg,rgba(255,255,255,.12),rgba(10,34,54,.30))} .brand-panel .mono{position:relative;z-index:1;font-family:var(--sans);font-weight:800;font-size:clamp(120px,14vw,210px);line-height:1;color:rgba(255,255,255,.92)} .brand-panel.b-yellow .mono{color:rgba(15,46,72,.34)} .brand-panel .mono-cat{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2.2vw,28px);font-family:var(--geo);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:#fff} .brand-panel.b-yellow .mono-cat{color:var(--navy)} @media(max-width:900px){.brand-panel{aspect-ratio:16/10}.brand-row .split-text{order:-1}} /* ---------- AD-07 brand-page fact ribbon + product float ---------- */ .fact-ribbon{max-width:var(--rail);margin:clamp(40px,5vw,52px) auto 0;padding-inline:var(--gut);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,48px)} .fact-ribbon>div{border-top:3px solid var(--gold);padding-top:18px} .fact-ribbon dt{font-family:var(--geo);font-weight:600;font-size:var(--t-eyebrow);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0 0 8px} .fact-ribbon dd{margin:0;font-family:var(--disp);font-style:italic;font-weight:800;font-size:clamp(20px,2vw,30px);color:var(--navy);line-height:1.15} @media(max-width:560px){.fact-ribbon{grid-template-columns:1fr;gap:0}.fact-ribbon>div{padding-block:18px}} .brand-float{display:block;max-width:min(400px,62%);height:auto;margin:0 auto 32px;filter:drop-shadow(0 24px 40px rgba(0,0,0,.5))} /* ---------- AD-05 brands-hub numbered editorial portfolio ---------- */ .brand-row{position:relative} .brand-row .split-text{position:relative;z-index:0} .bidx{position:absolute;top:-.42em;left:calc(-1*clamp(4px,1vw,16px));z-index:-1;font-family:var(--disp);font-style:italic;font-weight:900;font-size:clamp(84px,9vw,148px);line-height:1;color:rgba(15,46,72,.07);pointer-events:none;user-select:none} .sec.deep .bidx,.sec.dark .bidx{color:rgba(255,255,255,.07)} .brand-row .kicker{position:relative} .brand-row .kicker::after{content:"";display:block;width:44px;height:3px;margin-top:10px;border-radius:2px;background:var(--bc,var(--gold))} /* ============ FORMS ============ */ .form-wrap{max-width:720px;margin-inline:auto;padding:clamp(28px,4vw,44px);border-radius:var(--r-l);background:#fff;border:1px solid rgba(15,46,72,.08);box-shadow:0 30px 64px -36px rgba(15,46,72,.4)} .aform{display:grid;gap:18px} .aform .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px} .aform .field label{display:block;font-family:var(--geo);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px} .aform input,.aform select,.aform textarea{width:100%;font-family:var(--sans);font-weight:500;font-size:16px;color:var(--navy);background:#fff;border:1px solid rgba(15,46,72,.18);border-radius:12px;padding:14px 16px;transition:border-color .25s,box-shadow .25s} .aform textarea{min-height:140px;resize:vertical} .aform input:focus,.aform select:focus,.aform textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(246,187,61,.22)} .aform .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} .aform .submit{justify-self:start;border:0;cursor:pointer} .aform .form-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .aform .form-note{font-size:13px;color:var(--ink-soft);margin:0} .form-status{font-family:var(--geo);font-weight:600;font-size:15px;margin:8px 0 0;display:none} .form-status.show{display:block} .form-status.ok{color:#3f7a2a} .form-status.err{color:var(--red)} .aform.sending .submit{opacity:.6;pointer-events:none} @media(max-width:560px){.aform .row2{grid-template-columns:1fr}} /* ========================================================================== HOMEPAGE-PARITY PASS — MOTION-02 card hover · MOTION-04 pill cascade · MOTION-09 easing sweep + FAQ answer entrance · MOTION-07 :active states. Additive, transform/opacity only, hover-guarded, .anim-gated — fail-open. One-step revertible. ========================================================================== */ /* MOTION-02: card hover choreography (lift + pre-rendered tinted shadow + icon nudge) */ .cap{position:relative;transition:transform .45s var(--ease)} .cap::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 34px 70px -30px rgba(15,46,72,.42),0 10px 30px -18px rgba(246,187,61,.35);opacity:0;transition:opacity .45s var(--ease);pointer-events:none;z-index:-1} .cap .ic,.dcard .ic{transition:transform .5s var(--ease-spring)} .dcard{transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease)} @media(hover:hover){ .cap:hover{transform:translateY(-6px)} .cap:hover::before{opacity:1} .dcard:hover{transform:translateY(-6px)} .cap:hover .ic,.dcard:hover .ic{transform:translateY(-3px) scale(1.06)} .contact-card{transition:transform .45s var(--ease),box-shadow .45s var(--ease)} .contact-card:hover{transform:translateY(-4px)} .brand-row .photo-panel{transition:transform .5s var(--ease)} .brand-row .photo-panel:hover{transform:translateY(-6px)} } /* MOTION-04: per-pill cascade — sub-page pill rows only (homepage stockist pills left untouched) */ .anim .pill-row.reveal .pill{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0)*45ms)} .anim .pill-row.reveal.rv .pill{opacity:1;transform:none} /* MOTION-09: easing sweep on link colour transitions (protected hero header excluded) */ .foot .bar a{transition:color .25s var(--ease)} .cta-call a{transition:border-color .25s var(--ease),color .25s var(--ease)} .mm-nav a{transition:color .3s var(--ease)} /* MOTION-09: FAQ answer entrance (opacity/transform only; gated on .anim) */ @keyframes faqIn{from{opacity:0;transform:translateY(-8px)}} .anim .faq-item[open] .faq-a{animation:faqIn .45s var(--ease) both} /* MOTION-07: tactile :active states (hero header .hn-cta deliberately excluded) */ .totop:active{transform:scale(.9);transition-duration:.08s} .rail-arrow:active{transform:translateY(-50%) scale(.92);transition-duration:.08s} .mm-nav .mm-cta:active{transform:scale(.97)} .faq-item summary:active::after{transform:scale(.88)} .faq-item[open] summary:active::after{transform:rotate(180deg) scale(.88)} /* MOTION-07 companion: magnetic offset now uses the independent `translate` property so :active scale composes */ .btn{transition:transform .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),translate .4s var(--ease)}