/* Colorgrooves Creative — generated from the Design canvas "Colorgrooves Homepage" */

/* =========================================================
   Colorgrooves Creative — homepage
   Tokens first: change colors / type here.
   ========================================================= */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/playfair-display-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/playfair-display-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/playfair-display-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Fonde";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/fonde-regular.woff2) format("woff2")}

.cg{
    --hero-bg:#070b12;
  --charcoal:#17191c;
  --charcoal-2:#202328;
  --midnight:#0c1726;
  --deep-teal:#12343b;
  --teal:#3e7f86;
  --sage:#93a75f;
  --ochre:#d39a3a;
  --ember:#cf5b2e;
  --plum:#8e3e5a;
  --sky:#47a6c9;
  --ivory:#f6f1e8;
  --paper:#fbf8f3;
  --sand:#efe4d3;
  --ink:#1d2226;
  --ink-soft:#4a5157;
  --on-dark:#f3ede3;
  --on-dark-soft:#b9b4ab;

  --display:"Fonde", "Playfair Display", Georgia, serif;  /* headings */
  --serif:"Playfair Display", Georgia, "Times New Roman", serif;  /* italic accent lines */
  --sans:"Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter:clamp(20px, 5vw, 72px);
  --max:1320px;
  --section-y:clamp(96px, 14vw, 200px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:#000}
*,*::before,*::after{box-sizing:border-box}

.cg{position:relative;width:100%;background:var(--charcoal);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
figure{margin:0}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
:focus-visible{outline:2px solid var(--ochre);outline-offset:4px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ivory);color:var(--ink);padding:10px 16px;border-radius:4px;text-decoration:none;font-weight:600}
.skip:focus{top:16px}
/* BOX: header and all content sit in one centred 1200px box (narrower screens keep the side gutter);
   section backgrounds still run edge to edge. --box-w is the box width, --box-pad the space either side. */
.cg{--box-w:min(1200px, calc(100% - 2 * var(--gutter)));--box-pad:max(var(--gutter), calc((100% - 1200px) / 2))}
.wrap{width:var(--box-w);max-width:none;margin:0 auto;padding:0}

/* ---------- shared type ---------- */
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:28px;color:currentColor;opacity:.78}
.eyebrow .num{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0;font-size:15px;opacity:1}
.eyebrow .num::after{content:"";display:inline-block;width:36px;height:1px;background:currentColor;vertical-align:middle;margin-left:14px;opacity:.5}
.display{font-family:var(--display);font-synthesis:none;font-size:clamp(44px, 7.8vw, 118px);line-height:.98;letter-spacing:.005em;text-transform:uppercase}
.lede{font-family:var(--serif);font-style:italic;font-size:clamp(22px, 2.4vw, 32px);line-height:1.3;margin-top:22px}
em{font-style:italic}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 28px;font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.btn::after{content:"→";font-size:15px;letter-spacing:0;transition:transform .35s var(--ease)}
.btn:hover::after{transform:translateX(5px)}
.btn-light{background:var(--ivory);color:var(--charcoal)}
.btn-light:hover{background:var(--ochre)}
.btn-dark{background:var(--deep-teal);color:var(--ivory)}
.btn-dark:hover{background:var(--charcoal)}
.link-arrow{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding:14px 0;border-bottom:1px solid currentColor;display:inline-block}
.link-arrow:hover{color:var(--ochre)}

/* =========================================================
   GROOVE WINDOWS — the signature system.
   Masks are the traced logo geometry in /assets/masks.
   Anything inside (img OR video) is shown through the shape.
   ========================================================= */
.gw{position:relative;overflow:hidden;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.gw > img,.gw > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gw--silhouette{aspect-ratio:731/891;-webkit-mask-image:url(../masks/silhouette.svg);mask-image:url(../masks/silhouette.svg)}
.gw--right{aspect-ratio:576/798;-webkit-mask-image:url(../masks/right.svg);mask-image:url(../masks/right.svg)}
.gw--tongue{aspect-ratio:247/543;-webkit-mask-image:url(../masks/tongue.svg);mask-image:url(../masks/tongue.svg)}
.gw--center{aspect-ratio:161/607;-webkit-mask-image:url(../masks/center.svg);mask-image:url(../masks/center.svg)}
/* slow drift of the content inside a window */
.gw > img,.gw > video{transform:scale(1.14);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.14) translate3d(-2.5%,1.5%,0)}to{transform:scale(1.2) translate3d(2.5%,-2%,0)}}

.ph-note{position:absolute;right:0;bottom:-6px;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--on-dark-soft);opacity:.75}
.ph-note--dark{color:var(--ink-soft)}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:calc(22px + env(safe-area-inset-top,0px)) var(--gutter) 22px;color:var(--on-dark);transition:color .45s var(--ease),background .45s var(--ease),padding .45s var(--ease)}
.site-header.is-scrolled,.nav-open .site-header{color:var(--on-dark)}
.site-header.is-scrolled{background:rgba(23,25,28,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img:first-child{width:30px;height:auto}
.brand-name{width:150px;height:auto}
.brand-name--dark{display:none}
.site-nav ul{list-style:none;display:flex;gap:clamp(18px,2.6vw,40px);margin:0;padding:0}
.site-nav a{font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding:12px 0;position:relative}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--ochre);transition:right .4s var(--ease)}
.site-nav a:hover::after{right:0}
.nav-begin{color:var(--ochre)}
.nav-toggle{display:none;width:48px;height:48px;border:0;background:transparent;color:inherit;cursor:pointer;margin-right:-10px}
.bars,.bars::before,.bars::after{display:block;width:24px;height:1.5px;background:currentColor;margin:auto;transition:transform .35s var(--ease),opacity .2s}
.bars{position:relative}
.bars::before,.bars::after{content:"";position:absolute;left:0}
.bars::before{top:-7px}.bars::after{top:7px}
.nav-open .bars{background:transparent}
.nav-open .bars::before{transform:translateY(7px) rotate(45deg)}
.nav-open .bars::after{transform:translateY(-7px) rotate(-45deg)}

/* =========================================================
   01 HERO
   ========================================================= */
.hero{position:relative;min-height:900px;background:var(--hero-bg);color:var(--on-dark);display:flex;align-items:center;overflow:hidden;padding:120px 0 96px}
/* the video fills the section; its own white field carries the copy */
.hero-media{position:absolute;inset:0;background:var(--hero-bg)}
.hero-video{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* soft dark veil on the far left so text never meets the art at odd viewport shapes */
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--hero-bg) 0,rgba(7,11,18,.85) 20%,rgba(7,11,18,0) 42%);pointer-events:none}
.hero-inner{position:relative;width:100%;max-width:1480px;margin:0 auto;padding:0 var(--gutter)}
.hero-copy{max-width:min(36vw,520px)}
/* ---- Headline: "Live in color." leads, "Find your groove." follows at ~38% ----
   --ht is the size of "Live in"; everything else scales from it. */
.hero-title{--ht:clamp(50px,5.3vw,92px);display:inline-grid;justify-items:start;font-family:var(--display);font-synthesis:none;font-weight:400;color:var(--on-dark);letter-spacing:-.02em}
.ht-live{font-size:var(--ht);line-height:1}
.ht-color{position:relative;display:inline-block;font-style:italic;font-size:calc(var(--ht) * 1.62);line-height:.92;letter-spacing:-.005em;
  padding:0 .16em .08em .02em;margin:-.02em 0 0 -.06em;
  background-image:var(--ht-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ht-sub{font-size:calc(var(--ht) * .4);font-style:italic;line-height:1.2;letter-spacing:.005em;margin-top:.7em;color:var(--on-dark)}
.ht-groove{position:relative;display:inline-block}
.groove-wave{display:none}
.spectrum{display:block;width:min(200px,50%);height:2px;margin-top:36px;border-radius:2px;background:var(--ht-grad)}

/* 1 — Restrained: three soft stops, everything else ivory, flush left */
.hero--v1{--ht-grad:linear-gradient(100deg,#f4a866 0%,#e97a5d 46%,#c4677c 76%,#5bb9c6 100%)}

/* 2 — Expressive: four logo stops with a magenta bridge; "groove." picks up the cyan end.
   "color." steps in under "Live in" and the subtitle closes on its right edge. */
.hero--v2{--ht-grad:linear-gradient(98deg,#fc963d 0%,#ec5a4f 30%,#b8427f 58%,#36b4d0 86%,#4fcde2 100%)}
.hero--v2 .ht-color{margin-left:.32em}
.hero--v2 .ht-sub{justify-self:end;margin-right:.6em}
.hero--v2 .ht-groove{color:#4fcde2}

/* 3 — Layered light: a fine outline echo sits just behind "color." like a second ribbon
   in the logo, the colour drifts slowly as if light were moving through glass, and
   "groove." is underlined with a carved groove line instead of the spectrum rule. */
.hero--v3{--ht-grad:linear-gradient(105deg,#fc963d 0%,#ec5a4f 20%,#b8427f 38%,#36b4d0 58%,#4fcde2 66%,#ec5a4f 84%,#fc963d 100%)}
.hero--v3 .ht-color{background-size:220% 100%;animation:light-drift 18s ease-in-out infinite alternate}
.hero--v3 .ht-color::before{content:attr(data-text);position:absolute;left:.02em;top:0;z-index:-1;padding:inherit;
  -webkit-text-fill-color:transparent;color:transparent;-webkit-text-stroke:1px rgba(79,205,226,.3);transform:translate(.075em,.075em);pointer-events:none}
.hero--v3 .ht-color{isolation:isolate}
.hero--v3 .ht-live{letter-spacing:-.01em}
.hero--v3 .ht-sub{margin-top:.9em}
.hero--v3 .groove-wave{display:block;position:absolute;left:0;right:.25em;bottom:-.42em;width:calc(100% - .25em);height:.34em;overflow:visible}
.hero--v3 .groove-wave path{fill:none;stroke:url(#gw-grad);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:140;stroke-dashoffset:140;animation:groove-draw 1.8s var(--ease) .9s forwards}
.hero--v3 .spectrum{display:none}
@keyframes light-drift{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes groove-draw{to{stroke-dashoffset:0}}
.hero-sub{margin-top:22px;font-size:clamp(16px,1.3vw,19px);color:var(--on-dark-soft);max-width:30ch;letter-spacing:.01em}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:40px}
.groove-lines{display:none}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:44px;height:44px;transform:translateX(-50%);display:grid;place-items:center}
.scroll-cue span{width:1px;height:34px;background:linear-gradient(var(--on-dark),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================
   02 REAL WORLD
   ========================================================= */
.real{background:var(--ivory);color:var(--ink);padding:var(--section-y) 0;position:relative;overflow:hidden}
.real::before{/* faint grout-line texture */content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;
  background-image:repeating-linear-gradient(115deg, transparent 0 46px, rgba(29,34,38,.05) 46px 47px)}
.real-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px);align-items:center}
.real-visual{position:relative;width:min(100%,600px);justify-self:center}
.ribbons{position:relative;aspect-ratio:631/891}
.ribbons .gw{position:absolute;filter:drop-shadow(0 26px 30px rgba(60,30,10,.18))}
.rb-right{left:8.72%;top:10.44%;width:91.28%}
.rb-tongue{left:0;top:11.34%;width:39.14%}
.rb-center{left:26.78%;top:0;width:25.52%}
/* the ribbons drift slightly apart as they reveal, then settle into the mark */
.ribbons .reveal.pending{transform:translate3d(var(--dx,0),40px,0)}
.rb-tongue{--dx:-24px}.rb-right{--dx:24px}
.real .ph-note{right:auto;left:0;bottom:-34px}
.real .display{color:var(--deep-teal)}
.real .lede{color:var(--ember)}
.media-list{list-style:none;padding:0;margin:44px 0 52px;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:14px 40px;font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.media-list li{display:flex;align-items:center;gap:14px}
.media-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--ember)}
.media-list li:nth-child(6n+2)::before{background:var(--ochre)}
.media-list li:nth-child(6n+3)::before{background:var(--sage)}
.media-list li:nth-child(6n+4)::before{background:var(--sky)}
.media-list li:nth-child(6n+5)::before{background:var(--teal)}
.media-list li:nth-child(6n)::before{background:var(--plum)}

/* =========================================================
   03 DIGITAL — same windows, screen treatment
   ========================================================= */
.digital{background:var(--midnight);color:var(--on-dark);padding:var(--section-y) 0;position:relative;overflow:hidden}
.digital::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 70% at 30% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 30% 50%,#000,transparent)}
.digital-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,110px);align-items:center}
.digital-copy{order:2}
.digital-visual{order:1;position:relative;justify-self:center;width:min(100%,560px)}
.digital .lede{color:#5cc3dd}
.media-list--light{color:var(--on-dark-soft)}
.screen{position:relative}
.digital-window{width:100%}
.digital-window::after{/* scanlines */content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 4px);mix-blend-mode:multiply;pointer-events:none}
.rgb-outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rgb-outline .o{fill:none;stroke-width:1.4;vector-effect:non-scaling-stroke;mix-blend-mode:screen;transition:transform 1.2s var(--ease)}
.o-1{stroke:#ff5a3c;transform:translate(-14px,-8px)}
.o-2{stroke:#7ee06a;transform:translate(10px,12px)}
.o-3{stroke:#4cc0ff;transform:translate(18px,-14px)}
.digital-visual:hover .o{transform:translate(0,0)}

/* =========================================================
   04 GROOVES — editorial grid
   ========================================================= */
.grooves{background:var(--paper);color:var(--ink);padding:var(--section-y) 0}
.grooves-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(48px,7vw,96px)}
.grooves .display{color:var(--ink)}
.grooves .lede{color:var(--teal)}
.filters{display:flex;gap:6px;border:1px solid rgba(29,34,38,.18);border-radius:999px;padding:5px}
.filters button{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;min-height:44px;padding:0 20px;border-radius:999px;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;transition:background .3s,color .3s}
.filters button[aria-pressed="true"]{background:var(--deep-teal);color:var(--ivory)}
.filters button:hover:not([aria-pressed="true"]){color:var(--ink)}
.groove-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2.4vw,36px);row-gap:clamp(48px,6vw,88px)}
.groove{transition:opacity .5s var(--ease)}
.groove[hidden]{display:none}
.g-a{grid-column:1 / span 7}
.g-b{grid-column:9 / span 4;align-self:end}
.g-c{grid-column:2 / span 4}
.g-d{grid-column:7 / span 6;margin-top:clamp(0px,8vw,140px)}
.g-e{grid-column:1 / span 5}
.g-f{grid-column:7 / span 5;margin-top:clamp(0px,5vw,80px)}
.g-g{grid-column:2 / span 10}
.g-h{grid-column:1 / span 6}
.g-i{grid-column:7 / span 6;margin-top:clamp(0px,7vw,120px)}
.groove-grid.is-filtered .groove{grid-column:auto / span 6;margin-top:0;align-self:start}
.groove-link{display:block;text-decoration:none;color:inherit}
.groove-media{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--sand)}
.g-b .groove-media,.g-d .groove-media{aspect-ratio:4/3}
.g-a .groove-media{aspect-ratio:16/10}
.groove-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.groove-link:hover .groove-media img,a.groove-link:focus-visible .groove-media img{transform:scale(1.05)}
.groove-media::after{/* groove window reveal on hover */content:"";position:absolute;inset:auto 18px 18px auto;width:44px;aspect-ratio:731/891;background:var(--ivory);
  -webkit-mask:url(../masks/silhouette.svg) center/contain no-repeat;mask:url(../masks/silhouette.svg) center/contain no-repeat;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.groove-link:hover .groove-media::after{opacity:.9;transform:none}
.badge{position:absolute;top:14px;left:14px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;background:rgba(251,248,243,.92);color:var(--ink);padding:8px 10px;border-radius:2px}
.groove-cat{margin-top:20px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ember)}
.groove[data-kind="digital"] .groove-cat{color:var(--teal)}
.groove-title{margin-top:8px;font-family:var(--display);font-synthesis:none;font-size:clamp(24px,2.2vw,34px);line-height:1.15}
.grooves-foot{margin-top:clamp(64px,8vw,120px);display:flex;justify-content:center}

/* =========================================================
   05 TOGETHER — Why / How / Who
   ========================================================= */
.together{position:relative;overflow:hidden;background:var(--deep-teal);color:var(--on-dark);padding:calc(var(--section-y) * 1.1) 0}
.together::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 15% 20%,rgba(211,154,58,.14),transparent 70%),radial-gradient(50% 60% at 90% 90%,rgba(142,62,90,.22),transparent 70%);pointer-events:none}
.together-lines{position:absolute;right:-18%;top:50%;width:min(110vw,1200px);transform:translateY(-50%);opacity:.5;pointer-events:none;overflow:visible}
.tl{fill:none;stroke:var(--on-dark);stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:50% 55%;opacity:.14}
.tl-2{transform:scale(1.1)}.tl-3{transform:scale(1.2)}.tl-4{transform:scale(1.3)}.tl-5{transform:scale(1.4)}
.together-inner{position:relative}
.together-title{font-family:var(--display);font-synthesis:none;font-size:clamp(42px,6.2vw,98px);line-height:1.06;letter-spacing:-1px;max-width:13ch}
.together-title em{color:var(--ochre)}
.together-copy{margin-top:40px;max-width:38ch;font-size:clamp(17px,1.4vw,20px);color:#cfd8d6;line-height:1.7}
.pillars{margin-top:clamp(64px,8vw,112px);display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(20px,3vw,48px);border-top:1px solid rgba(243,237,227,.22)}
.pillar{border-bottom:1px solid rgba(243,237,227,.22)}
.pillar summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:18px;padding:26px 0;min-height:44px}
.pillar summary::-webkit-details-marker{display:none}
.p-key{font:600 12px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ochre)}
.p-label{font-family:var(--serif);font-style:italic;font-size:22px}
.p-icon{width:14px;height:14px;position:relative;align-self:center}
.p-icon::before,.p-icon::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .35s var(--ease)}
.p-icon::after{transform:rotate(90deg)}
.pillar[open] .p-icon::after{transform:rotate(0)}
.pillar summary:hover .p-label{color:var(--ochre)}
.pillar > p,.pillar > ol{padding:0 0 28px;color:#cfd8d6;font-size:15.5px;line-height:1.7}
.steps{margin:0;padding-left:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px 1fr;margin-bottom:6px}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-style:italic;color:var(--ochre);font-size:14px}
.steps b{font-weight:600;color:var(--on-dark)}

/* =========================================================
   06 BEGIN
   ========================================================= */
.begin{background:var(--sand);color:var(--ink);padding:var(--section-y) 0;position:relative;overflow:hidden}
.begin-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,7vw,120px);align-items:start}
.begin-copy{position:relative}
.begin-title{font-family:var(--display);font-synthesis:none;font-size:clamp(42px,5.3vw,84px);line-height:1.06;letter-spacing:-1px;color:var(--deep-teal)}
.begin-title em{display:block;color:var(--ember)}
.begin-text{margin-top:32px;max-width:36ch;font-size:clamp(17px,1.4vw,19px);color:var(--ink-soft)}
.begin-mail{margin-top:24px;font-family:var(--serif);font-size:22px}
.begin-ribbon{width:clamp(56px,5.5vw,80px);margin-top:56px}

.contact{background:var(--paper);padding:clamp(28px,4vw,56px);border-radius:4px;box-shadow:0 30px 60px -30px rgba(60,40,20,.25)}
.field{margin-bottom:26px}
.field label{display:block;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:10px;color:var(--ink)}
.opt{font-weight:500;letter-spacing:.1em;text-transform:none;color:var(--ink-soft)}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid rgba(29,34,38,.3);border-radius:0;padding:10px 0 12px;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--ember)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{box-shadow:0 2px 0 0 var(--ember)}
.field [aria-invalid="true"]{border-bottom-color:#b3261e}
.select{position:relative}
.select::after{content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.field select{cursor:pointer;padding-right:28px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;flex-wrap:wrap;gap:18px 24px;margin-top:8px}
.form-status{font-size:15px;color:var(--ink-soft)}
.form-status.ok{color:#2f6b3a}
.form-status.err{color:#b3261e}
.contact.is-sending button{opacity:.6;pointer-events:none}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--charcoal);color:var(--on-dark-soft);padding:clamp(64px,8vw,104px) 0 40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr auto;gap:40px;align-items:start}
.footer-brand{display:flex;gap:18px;align-items:center}
.footer-brand > img{width:52px;height:auto}
.footer-name{width:200px;height:auto}
.footer-tag{margin-top:8px;font-size:14px;letter-spacing:.04em}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.footer-nav a{font-size:12px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;padding:12px 0;color:var(--on-dark)}
.footer-nav a:hover{color:var(--ochre)}
.social{list-style:none;margin:0;padding:0;display:flex;gap:20px}
.social a{font-size:13px;text-decoration:none;padding:12px 0;display:inline-block}
.social a:hover{color:var(--ochre)}
.social li:has(a:not([href^="http"])){display:none}
.social a:not([href^="http"]){display:none}
.copyright{grid-column:1 / -1;margin-top:40px;padding-top:28px;border-top:1px solid rgba(243,237,227,.12);font-size:13px}

/* =========================================================
   REVEALS (only when JS is running)
   ========================================================= */
.reveal{transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
.reveal.pending{opacity:0;transform:translateY(28px)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .groove-grid .groove{grid-column:auto / span 6 !important;margin-top:0 !important;align-self:start}
  .footer-grid{grid-template-columns:1fr 1fr}
  .social{grid-column:1 / -1}
}
@media (max-width: 880px){
  .nav-toggle{display:grid;place-items:center;position:relative;z-index:2}
  .site-nav{position:fixed;inset:0;background:var(--charcoal);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
  .nav-open .site-nav{opacity:1;visibility:visible}
  .site-nav ul{flex-direction:column;align-items:center;gap:8px}
  .site-nav a{font-family:var(--display);font-size:40px;letter-spacing:.02em;text-transform:none;font-weight:400}
  .site-nav a::after{bottom:4px}
  /* stack: art on top (video cropped to its window), copy below on white */
  .hero{display:block;min-height:0;padding:0 0 88px}
  .hero-media{position:relative;inset:auto;height:min(62svh,560px)}
  .hero-video{object-position:68% 50%}
  .site-header:not(.is-scrolled){background:rgba(7,11,18,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px}
  .hero-media{margin-top:72px}
  .hero-media::after{background:linear-gradient(180deg,rgba(7,11,18,0) 65%,var(--hero-bg) 100%)}
  .hero-inner{margin-top:-24px}
  .hero-copy{max-width:none}
  .hero-title{--ht:clamp(44px,11.5vw,72px)}
  .real-grid,.digital-grid,.begin-grid{grid-template-columns:1fr}
  .real-visual{width:min(86%,460px)}
  .digital-copy{order:1}.digital-visual{order:2;width:min(88%,460px)}
  .pillars{grid-template-columns:1fr}
  .begin-ribbon{display:none}
}
@media (max-width: 600px){
  body{font-size:16px}
  .groove-grid{row-gap:56px}
  .groove-grid .groove{grid-column:1 / -1 !important}
  .groove-media,.g-a .groove-media,.g-b .groove-media,.g-d .groove-media{aspect-ratio:4/3}
  .grooves-head{align-items:flex-start}
  .filters{width:100%;justify-content:space-between}
  .filters button{padding:0 14px;flex:1}
  .media-list{font-size:11px;letter-spacing:.12em;gap:12px 20px}
  .btn{padding:0 20px;letter-spacing:.16em;white-space:nowrap}
  .filters button{white-space:nowrap;letter-spacing:.14em}
  .footer-grid{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .cta-row .btn{width:auto}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .hero--v3 .groove-wave path{stroke-dashoffset:0}
  .reveal.pending,.js .hero-video{opacity:1;transform:none}
  .gw > img,.gw > video{transform:scale(1.14)}
}


/* hero: gradient words and text-only links */
.hx-grad{-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.04em}
/* links: a short gradient groove under each (COLOR / GROOVE palettes) that runs the full width on hover, plus a sliding arrow */
.hx-link{position:relative;display:inline-flex;align-items:center;gap:16px;min-height:44px;padding:8px 0 14px;font-family:'Montserrat',system-ui,sans-serif;font-weight:400;font-size:15px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:rgba(243,237,227,.9);transition:color .35s;font-size:14px}
.hx-link::before{content:"";position:absolute;left:0;bottom:4px;width:48px;height:2px;border-radius:2px;background:var(--lg);transition:width .6s cubic-bezier(.2,.7,.2,1)}
.hx-link::after{content:"\2192";font-size:18px;letter-spacing:0;line-height:1;opacity:.75;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s}
.hx-link:hover,.hx-link:focus-visible{color:#fff}
.hx-link:hover::before,.hx-link:focus-visible::before{width:100%}
.hx-link:hover::after,.hx-link:focus-visible::after{transform:translateX(8px);opacity:1}
@media (max-width: 880px){.hero-copy{max-width:none !important}}

/* split hero: copy left, portrait logo-window video right, on the video's own black */
/* proportions taken from the approved layout at 1333px wide: lockup 23.5vw, gap 8.8vw, video 36vw */
/* --hero-inset lines the video's right edge up with the nav; text sits a fixed gap to its left */
.cg{--hero-inset:clamp(20px,9.75vw,160px)}
.site-header{padding-left:var(--box-pad);padding-right:var(--box-pad)}
.hero.hero--split{display:grid;grid-template-columns:max-content max-content;justify-content:center;align-items:center;column-gap:var(--hero-gap);min-height:0;padding:clamp(40px,4.4vw,64px) var(--box-pad) clamp(32px,5.5vw,72px);background:#000}
.hero-lockup{display:block;width:clamp(187px,21.5vw,340px);height:auto}
/* top padding keeps the headline ~35px below the logo/nav bar at every width, matching the gap above the video's flame tips */
.hero--split .hero-inner{grid-column:1;grid-row:1;max-width:none;margin:0;padding:24px 0 0 30px}
.hero--split .hero-media{position:relative;inset:auto;grid-column:2;grid-row:1;background:transparent;display:flex;justify-content:flex-start}
.hero--split .hero-media::after{display:none}
/* sized from the window height so it stands as tall as the screen allows, up to 900px */
/* video fills all the width beside the text, capped only by the screen height so the square stays above the fold */
/* --copy-w: width of the text column (lockup or subtitle, whichever is wider, plus its 30px inset).
   The video takes whatever is left of the 1200px box beside it, but never taller than the screen,
   and the text + video pair stays centred in the box when the screen height makes the video smaller. */
.cg{--copy-w:calc(30px + max(clamp(187px,21.5vw,340px), 10.4 * clamp(17px, calc(2.3vw - 2.67px), 35px)));--hero-gap:clamp(32px,8.65vw,140px)}
.hero--split .hero-video{display:block;width:min(calc(min(1200px, 100vw - 2 * var(--gutter)) - var(--copy-w) - var(--hero-gap)),calc(100vh - 90px));max-width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;object-position:50% 50%}
.hero--split .hero-copy{max-width:none !important}
.hero--split .scroll-cue{display:none}

/* named gradients (from the COLOR and GROOVE artwork) */
.cg{--gradient-1:linear-gradient(90deg,#8d0659 10%,#c0303a 36%,#ef9a12 50%,#8b9934 64%,#099f73 88%);--gradient-2:linear-gradient(90deg,#224ddb 20%,#b810f8 40%,#bf0cf0 52%,#760d8c 76%)}
.hx-link--dark{color:#1d2226}
.hx-link--dark:hover,.hx-link--dark:focus-visible{color:#000}

/* Real World / Digital: the logo mark, turned 44deg, as a window onto work; copy beside it */
.rw,.dw{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(640px,60vw,900px);padding:clamp(96px,10vw,150px) 0}
.rw{background:#f6f1e8}
.dw{background:#0c1726;color:#f3ede3}
.rw-window,.dw-window{position:absolute;top:-14%;width:calc(var(--box-w) * .555);aspect-ratio:731/891;pointer-events:none}
.rw-window{left:calc(var(--box-pad) - var(--box-w) * .0625);transform:rotate(44deg)}
.dw-window{right:calc(var(--box-pad) - var(--box-w) * .0625);transform:rotate(-44deg)}
.rw-window .gw,.dw-window .gw{width:100%;height:100%}
/* the media inside counter-rotates so the work stays upright */
.rw-window .gw > video,.rw-window .gw > img,.dw-window .gw > video,.dw-window .gw > img{inset:auto;left:-50%;top:-40%;width:200%;height:180%;object-fit:cover;animation:none}
.rw-window .gw > video,.rw-window .gw > img{transform:rotate(-44deg)}
.dw-window .gw > video,.dw-window .gw > img{transform:rotate(44deg)}
.rw-inner,.dw-inner{position:relative;width:100%}
.rw-inner{padding:0 var(--box-pad) 0 50%}
.dw-inner{padding:0 50% 0 var(--box-pad)}
@media (max-width: 880px){
  .hero.hero--split{grid-template-columns:minmax(0,1fr);row-gap:28px;padding:84px var(--gutter) 72px}
  .hero--split .hero-media{grid-column:1;grid-row:2;height:auto;margin:0}
  .hero--split .hero-media{justify-content:center}
  .hero--split .hero-video{width:min(100%,460px)}
  .hero-lockup{width:min(66%,290px)}
  .hero--split .hero-inner{grid-column:1;grid-row:1;margin:0;padding:24px 0 0}
  .rw,.dw{flex-direction:column;align-items:stretch;min-height:0;padding:0 0 88px}
  .rw-window,.dw-window{position:relative;top:auto;left:auto;right:auto;width:min(78vw,460px);margin:-12% auto 24px}
  .rw-inner,.dw-inner{padding:0 var(--gutter)}
}

/* ---------- hero entrance: copy slides in from the left piece by piece, video from the right ---------- */
@keyframes cg-in-left{from{opacity:0;transform:translate3d(-48px,0,0)}to{opacity:1;transform:none}}
@keyframes cg-in-right{from{opacity:0;transform:translate3d(72px,0,0)}to{opacity:1;transform:none}}
.hero--split .hero-copy > h1,.hero--split .hero-copy > p,.hero--split .hero-copy > div > a{animation:cg-in-left 2.4s cubic-bezier(.16,1,.3,1) both}
.hero--split .hero-copy > h1{animation-delay:.3s}
.hero--split .hero-copy > p{animation-delay:.8s}
.hero--split .hero-copy > div > a:nth-child(1){animation-delay:1.24s}
.hero--split .hero-copy > div > a:nth-child(2){animation-delay:1.6s}
.hero--split .hero-media{animation:cg-in-right 3.2s cubic-bezier(.16,1,.3,1) .6s both}

/* ---------- nav: hovering the menu reveals one gradient (Gradient 1 into Gradient 2) across every link ---------- */
.cg{--gradient-mix:linear-gradient(90deg,#8d0659 0%,#c0303a 12%,#ef9a12 23%,#8b9934 33%,#099f73 44%,#224ddb 58%,#b810f8 72%,#bf0cf0 82%,#760d8c 100%)}
@media (hover: hover) and (min-width: 881px){
  /* each link lights up on its own: Grooves + About = Gradient 1, Approach + Let's Play = Gradient 2 */
  .site-nav a{--nav-grad:var(--gradient-1);-webkit-background-clip:text;background-clip:text;transition:color .6s ease}
  .site-nav li:nth-child(even) a{--nav-grad:var(--gradient-2)}
  .site-nav a:hover,.site-nav a:focus-visible{background-image:var(--nav-grad);color:rgba(243,237,227,0)}
  .site-nav a::after{left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--nav-grad);transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}
}

/* ---------- Real World: square logo-window video (mask baked in) left, copy right, centred pair in the box ---------- */
.cg{--rw-copy-w:max(437px, calc(4.25 * clamp(56px, 6.9vw, 112px)))}   /* measured width of the Real World text column */
.rw.rw--split{display:grid;grid-template-columns:minmax(0,max-content) max-content;justify-content:center;align-items:center;column-gap:var(--hero-gap);min-height:0;padding:clamp(72px,8vw,120px) var(--box-pad);background:#f6eee8}
.rw--split .rw-media{grid-column:1;grid-row:1;min-width:0}
.rw--split .rw-video{display:block;width:min(calc(min(1200px, 100vw - 2 * var(--gutter)) - var(--rw-copy-w) - var(--hero-gap)),calc(100vh - 90px));max-width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.rw--split .rw-inner{grid-column:2;grid-row:1;width:auto;padding:0}
@media (max-width: 880px){
  .rw.rw--split{grid-template-columns:minmax(0,1fr);row-gap:32px;padding:72px var(--gutter)}
  .rw--split .rw-inner{grid-row:1;grid-column:1}
  .rw--split .rw-media{grid-row:2;grid-column:1;justify-self:center}
  .rw--split .rw-video{width:min(100%,460px)}
}

/* ---------- Real World entrance: same choreography as the hero, mirrored, played when scrolled into view ---------- */
@keyframes cg-in-right-sm{from{opacity:0;transform:translate3d(48px,0,0)}to{opacity:1;transform:none}}
@keyframes cg-in-left-lg{from{opacity:0;transform:translate3d(-72px,0,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: no-preference){
  .js .rw--split:not(.is-in) .rw-inner > *,.js .rw--split:not(.is-in) .rw-media{opacity:0}
  .js .rw--split.is-in .rw-inner > *{animation:cg-in-right-sm 2.4s cubic-bezier(.16,1,.3,1) both}
  .js .rw--split.is-in .rw-inner > :nth-child(1){animation-delay:.3s}
  .js .rw--split.is-in .rw-inner > :nth-child(2){animation-delay:.8s}
  .js .rw--split.is-in .rw-inner > :nth-child(3){animation-delay:1.24s}
  .js .rw--split.is-in .rw-inner > :nth-child(4){animation-delay:1.6s}
  .js .rw--split.is-in .rw-inner > :nth-child(5){animation-delay:1.9s}
  .js .rw--split.is-in .rw-media{animation:cg-in-left-lg 3.2s cubic-bezier(.16,1,.3,1) .6s both}
}

/* ---------- Digital: copy left, square logo-window video (mask baked in) right — the hero's layout ---------- */
.cg{--dw-copy-w:518px}   /* measured width of the Digital text column */
.dw.dw--split{display:grid;grid-template-columns:max-content minmax(0,max-content);justify-content:center;align-items:center;column-gap:var(--hero-gap);min-height:0;padding:clamp(72px,8vw,120px) var(--box-pad);background:#0b1726}
/* same text-column width as Real World so both videos are the same size */
.dw--split .dw-inner{grid-column:1;grid-row:1;width:var(--rw-copy-w);max-width:100%;padding:0}
.dw--split .media-list{column-gap:28px}
@media (min-width: 1100px){.dw--split .hx-grad,.dw--split .media-list li{white-space:nowrap}}   /* tagline and list items stay on one line */
.dw--split .dw-media{grid-column:2;grid-row:1;min-width:0}
.dw--split .dw-video{display:block;width:min(calc(min(1200px, 100vw - 2 * var(--gutter)) - var(--rw-copy-w) - var(--hero-gap)),calc(100vh - 90px));max-width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
@media (max-width: 880px){
  .dw.dw--split{grid-template-columns:minmax(0,1fr);row-gap:32px;padding:72px var(--gutter)}
  .dw--split .dw-inner{grid-row:1;grid-column:1}
  .dw--split .dw-media{grid-row:2;grid-column:1;justify-self:center}
  .dw--split .dw-video{width:min(100%,460px)}
}
/* Digital entrance: same as the hero, played when scrolled into view */
@media (prefers-reduced-motion: no-preference){
  .js .dw--split:not(.is-in) .dw-inner > *,.js .dw--split:not(.is-in) .dw-media{opacity:0}
  .js .dw--split.is-in .dw-inner > *{animation:cg-in-left 2.4s cubic-bezier(.16,1,.3,1) both}
  .js .dw--split.is-in .dw-inner > :nth-child(1){animation-delay:.3s}
  .js .dw--split.is-in .dw-inner > :nth-child(2){animation-delay:.8s}
  .js .dw--split.is-in .dw-inner > :nth-child(3){animation-delay:1.24s}
  .js .dw--split.is-in .dw-inner > :nth-child(4){animation-delay:1.6s}
  .js .dw--split.is-in .dw-inner > :nth-child(5){animation-delay:1.9s}
  .js .dw--split.is-in .dw-media{animation:cg-in-right 3.2s cubic-bezier(.16,1,.3,1) .6s both}
}

/* ---------- About ---------- */
.about{background:var(--paper);color:var(--ink);padding:clamp(88px,10vw,150px) 0}
.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,110px);align-items:center}
.about-media{position:relative;justify-self:center;width:min(100%,440px)}
.about-portrait{width:100%}
.about .ph-note{position:static;margin-top:14px}
.about-title{font-family:var(--display);font-synthesis:none;font-weight:400;text-transform:uppercase;font-size:clamp(56px,6.9vw,112px);line-height:.91;letter-spacing:-.06em;color:#111418}
.about-tag{display:inline-block;font-family:var(--display);font-style:italic;font-synthesis:style;font-size:clamp(28px,3.13vw,50px);line-height:1.15;letter-spacing:-.045em;margin:.2em 0 0 .3em;padding-right:.12em}
.about-text{margin-top:20px;max-width:52ch;font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--ink-soft)}
.about-copy .hx-link{margin-top:32px}
.pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width: 880px){
  .about-grid{grid-template-columns:minmax(0,1fr)}
  .about-media{width:min(78%,340px)}
  .pillars{grid-template-columns:minmax(0,1fr)}
}

/* intro line between tagline and offerings (Real World / Digital) */
.section-intro{margin-top:18px;max-width:30em;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--ink-soft)}
.section-intro--light{color:var(--on-dark-soft)}

/* About portrait: circular crop */
.about-photo{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:50% 40%;border-radius:50%}

/* Begin: real logo mark under the copy; IGNITE button fills with Gradient 2 on hover */
.begin-logo{display:block;width:clamp(90px,9vw,140px);height:auto;margin:0 0 32px}
.begin-title em.hx-grad{font-style:normal}
.btn-ignite{position:relative;isolation:isolate;overflow:hidden;gap:10px}
.btn-ignite::after{display:none}
.btn-ignite::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gradient-2);opacity:0;transition:opacity .6s ease}
.btn-ignite:hover,.btn-ignite:focus-visible{background:var(--deep-teal);color:#fff}
.btn-ignite:hover::before,.btn-ignite:focus-visible::before{opacity:1}
@media (max-width: 880px){.begin-logo{display:none}}

/* ---------- footer social: outlined circles that bloom into a gradient on hover ---------- */
.social{display:flex;flex-wrap:wrap;align-items:center;gap:12px;list-style:none;margin:0;padding:0}
.social-follow{margin-right:6px;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--on-dark-soft)}
.social .social-btn{position:relative;isolation:isolate;overflow:hidden;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(243,237,227,.3);color:var(--on-dark);transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,color .45s,box-shadow .45s}
.social .social-btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--sg);opacity:0;transform:scale(.3);transition:opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.social .social-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.social .social-btn svg .fill{fill:currentColor;stroke:none}
.social .social-btn:hover,.social .social-btn:focus-visible{transform:translateY(-4px);border-color:transparent;color:#fff;box-shadow:0 10px 24px -10px rgba(184,16,248,.55)}
.social .social-btn:hover::before,.social .social-btn:focus-visible::before{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion: reduce){.social .social-btn:hover{transform:none}}
.footer-grid{grid-template-columns:minmax(0,1fr) auto auto;column-gap:clamp(32px,4vw,64px)}
.footer-nav{flex-wrap:nowrap;align-self:center}
.footer-tag{white-space:nowrap}
.social{align-self:center}
@media (max-width: 1080px){.footer-grid{grid-template-columns:minmax(0,1fr) auto}.social{grid-column:1 / -1}}
@media (max-width: 600px){.footer-grid{grid-template-columns:minmax(0,1fr)}.footer-nav{flex-wrap:wrap}.social-follow{flex-basis:100%;margin:0 0 4px}}

/* ---------- Approach: header like the other sections, then five step cards ---------- */
.together{background:#071a1f}
.together::before{opacity:.6}
.approach-title{font-family:var(--display);font-synthesis:none;font-weight:400;text-transform:uppercase;font-size:clamp(56px,6.9vw,112px);line-height:.91;letter-spacing:-.06em;color:var(--on-dark)}
.approach-tag{display:inline-block;font-family:var(--display);font-style:italic;font-synthesis:style;font-size:clamp(28px,3.13vw,50px);line-height:1.15;letter-spacing:-.045em;margin:.2em 0 0 .3em;padding-right:.12em}
.together-head .section-intro{margin-top:14px}
.steps-grid{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.step-card{position:relative;overflow:hidden;padding:30px 22px 32px;border-radius:18px;background:rgba(243,237,227,.035);border:1px solid rgba(243,237,227,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .6s cubic-bezier(.16,1,.3,1),background .5s,border-color .5s,box-shadow .6s}
.step-card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:2px;background:var(--sg);transform:scaleX(.22);transform-origin:left center;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.step-num{display:inline-block;padding-right:.12em;font-family:var(--display);font-style:italic;font-synthesis:style;font-size:46px;line-height:1;background:var(--gradient-2);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.step-name{margin-top:20px;font-family:var(--display);font-synthesis:none;font-weight:400;text-transform:uppercase;font-size:clamp(20px,1.75vw,26px);line-height:1.1;letter-spacing:-.02em;color:var(--on-dark)}
.step-card p{margin-top:10px;font-size:15px;line-height:1.6;color:#c4cecb}
.step-card:hover{transform:translateY(-6px) rotate(-.6deg);background:rgba(243,237,227,.065);border-color:rgba(243,237,227,.2);box-shadow:0 24px 40px -24px rgba(0,0,0,.6)}
.step-card:nth-child(even):hover{transform:translateY(-6px) rotate(.6deg)}
.step-card:hover::before{transform:scaleX(1)}
.step-card:hover .step-num{transform:translateX(4px)}
@media (max-width: 1080px){.steps-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 640px){.steps-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){.step-card:hover,.step-card:nth-child(even):hover{transform:none}}
/* same gradients, brightened so the darker ends read on the deep background */
.together .approach-tag,.together .step-num{filter:brightness(1.55) saturate(1.1)}

/* ---------- phone: hero lockup fills the width; full-screen menu in the site's style ---------- */
.nav-extra{display:none}
.site-nav li:nth-child(odd){--nav-grad:var(--gradient-1)}
.site-nav li:nth-child(even){--nav-grad:var(--gradient-2)}
@keyframes cg-menu-in{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}}
@media (max-width: 880px){
  .hero-lockup{width:100%;max-width:460px}
  .hero--split .hero-copy > p{font-size:min(calc((100vw - 2 * var(--gutter)) / 10.6), 36px) !important}
  /* the header's backdrop blur would trap the fixed menu inside the bar */
  .nav-open .site-header,.cg.nav-open .site-header{-webkit-backdrop-filter:none !important;backdrop-filter:none !important;background:transparent !important}
  .brand{position:relative;z-index:2}
  .nav-toggle:focus{outline:none}
  .nav-toggle:focus-visible{outline:1px solid rgba(243,237,227,.5);outline-offset:2px;border-radius:10px}
  .site-nav{position:fixed;inset:0;height:100vh;height:100dvh;z-index:1;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:48px;padding:110px var(--gutter) calc(36px + env(safe-area-inset-bottom,0px));background:#05080d;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
  .site-nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 45% at 85% 15%,rgba(184,16,248,.18),transparent 70%),radial-gradient(70% 45% at 10% 90%,rgba(239,154,18,.14),transparent 70%)}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:4px}
  .site-nav a{display:inline-block;position:relative;padding:10px 0 14px;font-family:var(--display);font-synthesis:none;font-size:clamp(38px,11vw,54px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;font-weight:400;color:var(--on-dark)}
  .site-nav a::after{content:"";position:absolute;left:0;right:auto;bottom:2px;width:44px;height:2px;border-radius:2px;background:var(--nav-grad);transform:none;transition:width .6s cubic-bezier(.16,1,.3,1)}
  .site-nav a:active::after,.site-nav a:hover::after{width:100%}
  .site-nav .nav-begin{background:var(--gradient-2);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.1em}
  .nav-open .site-nav li,.nav-open .nav-extra{animation:cg-menu-in .8s cubic-bezier(.16,1,.3,1) both}
  .nav-open .site-nav li:nth-child(1){animation-delay:.08s}
  .nav-open .site-nav li:nth-child(2){animation-delay:.16s}
  .nav-open .site-nav li:nth-child(3){animation-delay:.24s}
  .nav-open .site-nav li:nth-child(4){animation-delay:.32s}
  .nav-open .nav-extra{animation-delay:.45s}
  .nav-extra{display:flex;flex-direction:column;gap:18px;padding-top:28px;border-top:1px solid rgba(243,237,227,.12)}
  .nav-tag{font-family:var(--display);font-style:italic;font-synthesis:style;font-size:22px;letter-spacing:-.02em;color:var(--on-dark-soft)}
  .site-nav .nav-social{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:12px}
  .site-nav .nav-social a{font-family:var(--sans);font-size:0;padding:0;letter-spacing:0;text-transform:none}
  .site-nav .nav-social a::after{display:none}
}
@media (max-width: 880px) and (prefers-reduced-motion: reduce){.nav-open .site-nav li,.nav-open .nav-extra{animation:none}}

/* ---------- the same entrance for every lower section (title, tagline, copy in sequence; media from the other side) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js [data-animate-in]:not(.is-in) :is(.seq-l,.seq-r) > *,.js [data-animate-in]:not(.is-in) :is(.seq-media-l,.seq-media-r){opacity:0}
  .js [data-animate-in].is-in .seq-l > *{animation:cg-in-left 2.4s cubic-bezier(.16,1,.3,1) both}
  .js [data-animate-in].is-in .seq-r > *{animation:cg-in-right-sm 2.4s cubic-bezier(.16,1,.3,1) both}
  .js [data-animate-in].is-in :is(.seq-l,.seq-r) > :nth-child(1){animation-delay:.3s}
  .js [data-animate-in].is-in :is(.seq-l,.seq-r) > :nth-child(2){animation-delay:.8s}
  .js [data-animate-in].is-in :is(.seq-l,.seq-r) > :nth-child(3){animation-delay:1.24s}
  .js [data-animate-in].is-in :is(.seq-l,.seq-r) > :nth-child(4){animation-delay:1.6s}
  .js [data-animate-in].is-in :is(.seq-l,.seq-r) > :nth-child(5){animation-delay:1.9s}
  .js [data-animate-in].is-in :is(.seq-l,.seq-r) > :nth-child(6){animation-delay:2.15s}
  .js [data-animate-in].is-in .seq-media-l{animation:cg-in-left-lg 3.2s cubic-bezier(.16,1,.3,1) .6s both}
  .js [data-animate-in].is-in .seq-media-r{animation:cg-in-right 3.2s cubic-bezier(.16,1,.3,1) .6s both}
}

/* ---------- groove cards: clickable, with an italic project-type line ---------- */
.groove-meta{margin-top:4px;font-family:var(--display);font-style:italic;font-synthesis:style;font-size:clamp(17px,1.4vw,21px);letter-spacing:-.02em;color:var(--ink-soft)}
a.groove-link{cursor:pointer}
a.groove-link:focus-visible{outline:2px solid var(--ochre);outline-offset:6px;border-radius:4px}
.groove-media::before{content:"View project";position:absolute;left:18px;bottom:18px;z-index:1;padding:9px 14px;border-radius:999px;background:rgba(251,248,243,.92);color:var(--ink);font:600 10px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.groove-link:hover .groove-media::before,.groove-link:focus-visible .groove-media::before{opacity:1;transform:none}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow-y:auto;overscroll-behavior:contain}
.lightbox:not([open]){display:none}
.lightbox::backdrop{background:rgba(4,7,12,.74);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lb-panel{position:relative;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);width:min(1200px,calc(100% - 2 * var(--gutter)));min-height:min(72vh,680px);margin:max(24px,6vh) auto;border-radius:24px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.7)}
.lb-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;background:var(--lb-grad)}
.lb--real{--lb-grad:var(--gradient-1);--lb-bg:#f6eee8;--lb-media:#ebe2d6;--lb-fg:#1d2226;--lb-soft:#4a5157;--lb-line:rgba(29,34,38,.14)}
.lb--digital{--lb-grad:var(--gradient-2);--lb-bg:#0b1726;--lb-media:#07101b;--lb-fg:#f3ede3;--lb-soft:#b9c2c9;--lb-line:rgba(243,237,227,.16)}
.lb-panel{background:var(--lb-bg);color:var(--lb-fg)}
.lb-media{margin:0;display:grid;place-items:center;padding:clamp(18px,2.5vw,36px);background:var(--lb-media)}
.lb-img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;border-radius:10px;box-shadow:0 22px 50px -26px rgba(0,0,0,.55);transition:opacity .35s ease}
.lb-img.is-swapping{opacity:0}
.lb-info{display:flex;flex-direction:column;gap:6px;padding:clamp(36px,4vw,56px) clamp(26px,3vw,44px) clamp(26px,3vw,36px)}
.lb-cat{display:inline-block;width:fit-content;font:600 11px/1.4 var(--sans);letter-spacing:.26em;text-transform:uppercase;background:var(--lb-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lb-title{margin-top:10px;font-family:var(--display);font-synthesis:none;font-weight:400;font-size:clamp(38px,4vw,60px);line-height:1;letter-spacing:-.03em}
.lb-meta{font-family:var(--display);font-style:italic;font-synthesis:style;font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;color:var(--lb-soft)}
.lb-desc{margin-top:16px;font-size:16px;line-height:1.7;color:var(--lb-soft)}
.lb-desc:empty,.lb-meta:empty{display:none}
.lb-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.lb-thumbs:empty{display:none}
.lb-thumb{width:64px;height:64px;padding:0;border:0;border-radius:12px;overflow:hidden;cursor:pointer;background:none;opacity:.6;outline:2px solid transparent;outline-offset:2px;transition:opacity .3s,outline-color .3s,transform .3s}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb:hover{opacity:1;transform:translateY(-2px)}
.lb-thumb[aria-pressed="true"]{opacity:1;outline-color:var(--lb-fg)}
.lb-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:28px;border-top:1px solid var(--lb-line)}
.lb-step{min-height:44px;padding:0 4px;border:0;background:none;color:var(--lb-fg);font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.lb-step[data-lb-prev]:hover{transform:translateX(-4px)}
.lb-step[data-lb-next]:hover{transform:translateX(4px)}
.lb-count{font-family:var(--display);font-style:italic;font-synthesis:style;font-size:18px;color:var(--lb-soft)}
.lb-close{position:absolute;top:16px;right:16px;z-index:3;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--lb-line);background:var(--lb-bg);color:var(--lb-fg);cursor:pointer;transition:transform .5s cubic-bezier(.16,1,.3,1),background .3s}
.lb-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lb-close:hover{transform:rotate(90deg)}
:is(.lb-close,.lb-step,.lb-thumb):focus-visible{outline:2px solid var(--ochre);outline-offset:3px}
@keyframes lb-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes lb-img-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.lightbox[open] .lb-panel{animation:lb-in .7s cubic-bezier(.16,1,.3,1) both}
.lightbox[open] .lb-media{animation:lb-img-in 1s cubic-bezier(.16,1,.3,1) .1s both}
@media (max-width: 880px){
  .lb-panel{grid-template-columns:minmax(0,1fr);width:100%;min-height:100%;margin:0;border-radius:0}
  .lb-img{max-height:56vh}
  .lb-close{top:12px;right:12px}
}
@media (prefers-reduced-motion: reduce){.lightbox[open] .lb-panel,.lightbox[open] .lb-media{animation:none}}
/* a card whose main photo must show in full (landscape) */
.groove--landscape .groove-media{aspect-ratio:4/3}
.groove--square .groove-media{aspect-ratio:1/1}
.groove--wide .groove-media{aspect-ratio:1440/637}
.groove--site .groove-media{aspect-ratio:16/10}
.groove--video .groove-media{aspect-ratio:1998/1080;background:#05080d}
.groove-media video{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--ease)}
.groove-link:hover .groove-media video{transform:scale(1.03)}
.lb-video{display:block;width:100%;max-height:78vh;border-radius:10px;background:#000;box-shadow:0 22px 50px -26px rgba(0,0,0,.55)}
.lb-video[hidden],.lb-img[hidden],.lb-visit[hidden]{display:none}
.lb-visit{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:22px;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--lb-fg);padding-bottom:8px;background:linear-gradient(var(--lb-grad,var(--gradient-1)),var(--lb-grad,var(--gradient-1))) left bottom/100% 2px no-repeat;transition:background-size .5s var(--ease)}
.lb-visit:hover{color:var(--lb-fg);background-size:40% 2px}
.lb-visit span[aria-hidden]{transition:transform .4s var(--ease)}
.lb-visit:hover span[aria-hidden]{transform:translate(3px,-3px)}
.lb-thumb{position:relative}
.lb-cat{padding-right:56px}
.lb-thumb.is-video::after{content:"";position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%230b1726'/%3E%3C/svg%3E") center/14px no-repeat}
a{color:inherit}a:hover{color:#d39a3a}