/* ============================================================
   SEVEN MEDIA — shared design system
   Colour from logo (#FF5F0F) + office photography (warm grays)
   Motif: the shear. Derived from the logo's tilted parallelogram.
   Locked per Colour System v2 + Decision Register.
   ============================================================ */

:root{
  /* brand orange — sampled from logo file */
  --o:#FF5F0F; --o-hover:#FF7F3F; --o-press:#E85410; --o-light:#C4430B;
  --o-900:#5C1F04; --o-tint:#FFE2D6;
  --on-o:#231007;               /* near-black label on orange fills */

  /* warm gray scale — single source of neutrals, no cool grays */
  --g950:#1C1A18; --g900:#262320; --g800:#33302B; --g700:#454039;
  --g600:#5A544B; --g500:#74716A; --g400:#918C84; --g300:#B0ABA3;
  --g200:#D2CEC8; --g100:#E8E5E0; --g50:#F5F3F0;

  /* status — held apart from the brand hue */
  --success:#4E9E72; --warning:#D9A441; --error:#C7452C;

  /* the motif */
  --tilt:-3deg;
  --shear:-12deg;

  /* type */
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --pad:clamp(20px,5vw,64px);
  --maxw:1240px;
  --hh:72px;                    /* header height */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* anchor jumps clear the fixed header */
section[id],div[id]{scroll-margin-top:92px}
body{
  background:var(--g950); color:var(--g300);
  font-family:var(--body); font-size:16.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--o);color:var(--on-o)}
:focus-visible{outline:2px solid var(--o);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.skip{position:absolute;left:-999px;top:0;background:var(--o);color:var(--on-o);
  padding:10px 16px;font-family:var(--display);font-weight:800;font-size:13px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ---------- skewed helpers ---------- */
.sk{transform:skewX(var(--shear))}
.sk>span{display:inline-block;transform:skewX(calc(-1 * var(--shear)))}

/* ---------- reveal system ---------- */
/* Reveal-on-scroll. Gated behind html.js so that if JavaScript is blocked or
   fails, every section renders normally instead of staying invisible. */
html.js .rev{opacity:0;transform:translateY(26px);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
html.js .rev.in{opacity:1;transform:none}
.rev[data-d="1"]{transition-delay:.07s} .rev[data-d="2"]{transition-delay:.14s}
.rev[data-d="3"]{transition-delay:.21s} .rev[data-d="4"]{transition-delay:.28s}
.rev[data-d="5"]{transition-delay:.35s} .rev[data-d="6"]{transition-delay:.42s}

/* ============================ HEADER ============================ */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:rgba(28,26,24,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
header.stuck{border-bottom-color:var(--g800);background:rgba(28,26,24,.94)}
.hbar{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--hh);max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* --- brand mark: the supplied 3D logo render --- */
.mark{display:inline-flex;align-items:center;position:relative;
  transform:rotate(var(--tilt));transform-origin:left center}
.marklogo{height:44px;width:auto;display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.mark:hover .marklogo{transform:translateY(-2px) scale(1.03)}
footer .marklogo{height:52px}

/* static 3D wordmark, sitting right of the nav */
#word3d{display:block;width:310px;height:52px;flex:none;margin-left:4px}
@media(max-width:1360px){#word3d{display:none}}
/* the wordmark only appears on wide screens; give the bar extra room there so the
   logo and nav never collide (page content keeps its own 1240px column) */
@media(min-width:1361px){.hbar{max-width:1480px}}

nav{display:flex;align-items:center;gap:18px}

/* the nav links sit together in their own container */
.navlinks{display:flex;align-items:center;gap:2px;
  background:rgba(38,35,32,.55);border:1px solid var(--g800);border-radius:4px;
  padding:5px 9px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.nl{font-size:13.5px;font-weight:500;color:var(--g300);position:relative;
  padding:8px 14px;border-radius:3px;transition:color .2s,background .2s;white-space:nowrap}
.nl:hover{color:var(--g50);background:var(--g800)}
/* current page reads as a filled tab, skewed to match the motif */
.navlinks .nl.active{color:var(--on-o);background:transparent}
.navlinks .nl.active::before{content:"";position:absolute;inset:0;background:var(--o);
  transform:skewX(var(--shear));border-radius:3px;z-index:-1}
.navlinks .nl.active:hover{background:transparent;color:var(--on-o)}

/* services dropdown */
.dd{position:relative}
.dd>.nl{display:inline-flex;align-items:center;gap:6px;cursor:pointer;background:none;border:0;
  font-family:var(--body);font-size:13.5px;font-weight:500}
.dd>.nl:hover{background:var(--g800)}
.dd>.nl svg{width:9px;height:9px;transition:transform .25s}
.dd.open>.nl svg{transform:rotate(180deg)}
.ddmenu{position:absolute;top:calc(100% + 18px);left:-10px;min-width:288px;
  background:var(--g900);border:1px solid var(--g800);border-radius:4px;padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s,transform .22s,visibility .22s;box-shadow:0 22px 44px rgba(0,0,0,.45)}
.dd.open .ddmenu{opacity:1;visibility:visible;transform:none}
.ddmenu a{display:block;padding:12px 14px;border-radius:3px;color:var(--g200);font-size:14px;
  line-height:1.4;transition:background .18s,color .18s}
.ddmenu a small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g500);margin-top:4px}
.ddmenu a:hover{background:var(--g800);color:var(--g50)}
.ddmenu a:hover small{color:var(--o)}
.ddsep{height:1px;background:var(--g800);margin:8px 14px}
.grid.fold-ready .fold-item.is-down .fold-face:hover{transform:translateY(-5px)}

.lang{display:flex;border:1px solid var(--g700);border-radius:3px;overflow:hidden}
.lang button{font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:6px 9px;
  background:none;border:0;color:var(--g400);cursor:pointer;transition:background .2s,color .2s}
.lang button.on{background:var(--o);color:var(--on-o);font-weight:500}

.cta{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.03em;
  background:var(--o);color:var(--on-o);padding:11px 20px;
  transform:skewX(var(--shear));transition:background .2s,transform .2s;border:0;cursor:pointer;
  display:inline-block;white-space:nowrap}
.cta>span{display:inline-block;transform:skewX(calc(-1 * var(--shear)))}
.cta:hover{background:var(--o-hover);transform:skewX(var(--shear)) translateY(-2px)}
.cta:active{background:var(--o-press)}

.burger{display:none;background:none;border:0;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.burger i{display:block;width:22px;height:2px;background:var(--g50);transition:transform .3s,opacity .3s}
.burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================ BUTTONS / SHARED ============================ */
.ghost{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.03em;
  border:1px solid var(--g600);color:var(--g50);padding:11px 20px;display:inline-block;
  transform:skewX(var(--shear));transition:border-color .2s,color .2s,transform .2s}
.ghost>span{display:inline-block;transform:skewX(calc(-1 * var(--shear)))}
.ghost:hover{border-color:var(--o);color:var(--o);transform:skewX(var(--shear)) translateY(-2px)}

.sechead{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--o);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.sechead::before{content:"";width:26px;height:2px;background:var(--o);
  transform:skewX(var(--shear));flex:none}
h2{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,5.6vw,60px);line-height:.95;letter-spacing:-.03em;color:var(--g50);max-width:18ch}
/* display type resolves from near-white into brand orange on its closing line
   — same rule as .ph1, so every heading in the system reads the same way */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  h2{background-image:linear-gradient(180deg,
      var(--g50) 0%, var(--g100) 26%, var(--o-hover) 72%, var(--o) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    width:fit-content;padding-bottom:.06em}
  /* on the orange CTA fill the near-black label is the correct pairing */
  .ctastrip h2{background-image:none;color:var(--on-o);
    -webkit-text-fill-color:var(--on-o);width:auto;padding-bottom:0}
}
@media (forced-colors:active){
  h2{background-image:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}

/* ============================ HERO (home) ============================ */
.hero{position:relative;padding:170px 0 0;overflow:hidden}
/* the hero column runs wider than the page grid, so the copy sits further left
   and more of the video stays visible on the right */
.hero .wrap{max-width:1480px}
/* legibility comes from the type's own shadow rather than a heavier scrim,
   so the footage stays visible behind it */
.hero.hasvid .eyebrow,
.hero.hasvid h1,
.hero.hasvid .lede{text-shadow:0 2px 10px rgba(12,10,9,.62),0 8px 34px rgba(12,10,9,.45)}
.hero.hasvid .stat .n,
.hero.hasvid .stat .l{text-shadow:0 2px 10px rgba(12,10,9,.6)}
.hero .wrap{position:relative;z-index:2}
.slab{position:absolute;top:-8%;right:-14%;width:62vw;height:128%;
  background:linear-gradient(160deg,var(--o) 0%,var(--o-press) 58%,transparent 58.2%);
  transform:skewX(var(--shear)) rotate(var(--tilt));opacity:.18;pointer-events:none;z-index:1}
/* hero video — full-bleed, silent, looping; the brand sting */
.herovid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* crop biased left so the logo resolves to the right of the headline */
  object-position:18% center;
  z-index:1;pointer-events:none;background:var(--g950)}
@media(max-width:900px){.herovid{object-position:center}}
/* parallax: give the drifting layers room so their travel never exposes an edge */
html.px .herovid{height:calc(100% + 160px);top:-80px}
html.px .phead .slab{height:150%;top:-25%}
html.px .founder .fportrait{overflow:hidden}
/* scrim keeps the headline legible over the footage */
.hero.hasvid::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(28,26,24,.90) 0%,rgba(28,26,24,.68) 26%,rgba(28,26,24,.34) 48%,rgba(28,26,24,.10) 68%,transparent 86%),
    linear-gradient(0deg,var(--g950) 0%,rgba(28,26,24,.35) 16%,transparent 34%)}
.hero .wrap{z-index:3}
.hero.hasvid .slab{opacity:0}          /* the footage replaces the flat slab */
.replay3d{position:absolute;right:var(--pad);bottom:26px;z-index:6;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(28,26,24,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--g700);color:var(--g200);border-radius:100px;padding:8px 15px 8px 12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;transform:translateY(8px);transition:opacity .5s .9s,transform .5s .9s,border-color .2s,color .2s}
.hero.hasvid .replay3d{opacity:1;transform:none}
.replay3d svg{width:15px;height:15px}
.replay3d:hover{border-color:var(--o);color:var(--o)}
@media(max-width:760px){.replay3d{bottom:14px}}

.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--o);margin-bottom:26px;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:32px;height:2px;background:var(--o);transform:skewX(var(--shear))}
h1{font-family:var(--display);font-weight:900;
  font-size:clamp(44px,10.5vw,128px);line-height:.88;letter-spacing:-.035em;
  color:var(--g50);text-transform:uppercase;max-width:15ch}
h1 span{display:block}                  /* one slogan clause per line */
h1 .accent{color:var(--o)}
.lede{margin-top:30px;max-width:48ch;font-size:clamp(16.5px,2vw,20px);color:var(--g300);line-height:1.55}
.herobtns{margin-top:40px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- proof counters ---------- */
.proof{margin-top:96px;border-top:1px solid var(--g800);padding-top:34px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px}
.stat .n{font-family:var(--display);font-weight:900;font-size:clamp(34px,5.4vw,58px);
  line-height:1;color:var(--o);letter-spacing:-.03em}
.stat .n em{font-style:normal;color:var(--o)}
.stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g500);margin-top:11px}

/* ---------- shear divider ---------- */
.cut{height:96px;position:relative;overflow:hidden;margin-top:104px}
.cut::before{content:"";position:absolute;inset:-30% -12%;background:var(--g900);transform:rotate(var(--tilt))}
.cut::after{content:"";position:absolute;left:-12%;right:-12%;top:calc(50% - 2px);height:4px;
  background:var(--o);transform:rotate(var(--tilt));opacity:.9}

/* ============================ CHAIN ============================ */
.chain{background:var(--g900);padding:20px 0 110px;position:relative}
.chaingrid{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;
  background:var(--g800);border:1px solid var(--g800)}
.link{background:var(--g900);padding:36px 28px 34px;position:relative;transition:background .3s}
.link:hover{background:var(--g800)}
.link .num{font-family:var(--mono);font-size:11px;color:var(--o);letter-spacing:.14em;margin-bottom:20px}
.link h3{font-family:var(--display);font-weight:800;font-size:23px;text-transform:uppercase;
  letter-spacing:-.015em;color:var(--g50);margin-bottom:12px}
.link p{font-size:14.5px;color:var(--g400);line-height:1.6}

/* ============================ SERVICES / CARDS ============================ */
.svc{padding:112px 0}
.grid{margin-top:52px;display:grid;grid-template-columns:repeat(auto-fill,minmax(292px,1fr));gap:16px;
  align-items:start}   /* cards size to their own content so folds don't leave dead space */
.card{position:relative;background:var(--g900);border:1px solid var(--g800);
  padding:34px 28px 30px;overflow:hidden;display:block;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),border-color .28s,background .28s}
.card::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--o);
  transform:scaleX(0) skewX(var(--shear));transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.3,1)}
.card:hover{transform:translateY(-5px);border-color:var(--g700);background:var(--g800)}
.card:hover::after{transform:scaleX(1) skewX(var(--shear))}
.card:not(.soon){border-top:2px solid var(--o)}
.card.soon{background:transparent;border-style:dashed;border-color:var(--g800)}
.card.soon:hover{transform:none;background:transparent;border-color:var(--g700)}
.card.soon::after{display:none}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 9px;margin-bottom:20px;transform:skewX(var(--shear))}
.tag>span{display:inline-block;transform:skewX(calc(-1 * var(--shear)))}
.tag.live{background:var(--o);color:var(--on-o);font-weight:500}
.tag.next{border:1px solid var(--g700);color:var(--g500)}
.card h3{font-family:var(--display);font-weight:800;font-size:20.5px;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--g50);margin-bottom:11px;line-height:1.15}
.card p{font-size:14.5px;color:var(--g400);line-height:1.62}
.card .go{margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--o);display:flex;align-items:center;gap:8px}
.card .go i{display:block;width:16px;height:1px;background:var(--o);transition:width .28s}
.card:hover .go i{width:28px}
/* folding service card — .fold-item is a bare wrapper, .card carries the chrome */
.grid .fold-item{height:auto}
.card .mini{list-style:none;margin:22px 0 0}
.card .mini li{position:relative;padding:9px 0 9px 20px;font-size:13.5px;color:var(--g300);
  border-top:1px solid var(--g800)}
.card .mini li::before{content:"";position:absolute;left:0;top:17px;width:10px;height:2px;
  background:var(--o);transform:skewX(var(--shear))}
.soonnote{margin-top:18px;font-size:13px;color:var(--g500);line-height:1.5}

/* ============================ FOUNDER ============================ */
.founder{background:var(--g500);position:relative;overflow:hidden}
.founder .inner{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;
  max-width:var(--maxw);margin:0 auto}
.fportrait{min-height:520px;background:var(--g600);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.fportrait .ph{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g300);text-align:center;padding:24px;line-height:1.9}
.fportrait::after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 62%,var(--g500) 62.3%)}
.ftext{padding:clamp(48px,7vw,86px) var(--pad);display:flex;flex-direction:column;justify-content:center}
.ftext .sechead{color:var(--g800)}
.ftext .sechead::before{background:var(--g800)}
.ftext blockquote{font-family:var(--display);font-weight:800;
  font-size:clamp(24px,3.3vw,38px);line-height:1.14;letter-spacing:-.02em;color:#fff;margin-bottom:28px}
.ftext p.bio{color:#fff;max-width:44ch;margin-bottom:26px}
.ftext .who{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ftext .who span{display:block;color:var(--g800);margin-top:7px;letter-spacing:.1em}

/* ============================ TEAM ============================ */
.team{padding:110px 0}
.teamlede{margin-top:20px;max-width:56ch;color:var(--g400);font-size:16px}
.teamgrid{margin-top:56px;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.member{position:relative}
.mphoto{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--g900);
  border:1px solid var(--g800);display:flex;align-items:center;justify-content:center;
  transition:border-color .28s,transform .28s cubic-bezier(.2,.7,.3,1)}
/* the shear motif cut across the bottom corner of each portrait */
.mphoto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,transparent 74%,var(--g950) 74.3%)}
.mphoto .ph{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g600);text-align:center;line-height:2;padding:14px;position:relative;z-index:1}
.mphoto.is-founder{background:var(--g800);border-color:var(--g700)}
.mphoto.is-founder .ph{color:var(--g400)}
.member::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;background:var(--o);
  transform:skewX(var(--shear));transform-origin:left;transition:width .3s cubic-bezier(.2,.7,.3,1);z-index:2}
.member:hover::before{width:78px}
.member:hover .mphoto{border-color:var(--g600);transform:translateY(-4px)}
.member h3{font-family:var(--display);font-weight:800;font-size:17px;color:var(--g50);
  margin-top:18px;letter-spacing:-.01em}
.member .ph-name{color:var(--g500);font-weight:600;
  border-bottom:1px dashed var(--g700);display:inline-block;padding-bottom:3px}
.member .role{margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--o)}
@media(max-width:560px){.teamgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}}

/* ============================ MARQUEE ============================ */
.marq{position:relative;padding:78px 0;overflow:hidden;background:var(--g950)}
.track{display:flex;gap:0;width:max-content;transform:rotate(var(--tilt));
  animation:slide 34s linear infinite;will-change:transform}
.marq:hover .track{animation-play-state:paused}
@keyframes slide{from{transform:rotate(var(--tilt)) translateX(0)}
  to{transform:rotate(var(--tilt)) translateX(-50%)}}
.track b{font-family:var(--display);font-weight:900;font-size:clamp(38px,7.5vw,90px);
  text-transform:uppercase;letter-spacing:-.028em;white-space:nowrap;padding:0 30px;
  color:transparent;-webkit-text-stroke:1.4px var(--g700)}
.track b:nth-child(even){color:var(--o);-webkit-text-stroke:0}

/* ============================ PAGE HERO (interior) ============================ */
.phead{position:relative;padding:150px 0 64px;overflow:hidden;border-bottom:1px solid var(--g800)}
.phead .slab{opacity:.22}
.phead{border-bottom:2px solid var(--o)}
.phead .ph1{position:relative}
.phead .wrap{position:relative;z-index:2}

/* ---- treated header: fabric shader left, brand video in the orange panel right.
   Same two-part split as the home hero, held inside the interior header.
   The panel edge is cut by a masked gradient rather than a skew transform, so the
   angle stays a true 15deg at any box size and the footage inside is never
   distorted — the skew motif reads in the edge, not in the picture. ---- */
.phead.hasfx{padding-top:158px;background:var(--g950)}
.phead.hasfx .fabric{position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none;
  opacity:0;transition:opacity .9s ease}
.phead.hasfx .fabric.on{opacity:1}
/* the angled panel becomes a window onto the footage rather than a flat wash */
.phead.hasfx .slab{top:0;right:0;left:auto;width:100%;height:100%;
  transform:none;opacity:1;overflow:hidden;z-index:2;
  background:linear-gradient(200deg,var(--o) 0%,var(--o-press) 60%,var(--o-900) 100%);
  -webkit-mask-image:linear-gradient(75deg,transparent 56%,#000 56.6%);
  mask-image:linear-gradient(75deg,transparent 56%,#000 56.6%)}
/* copy holds the left column so it never runs under the panel */
.phead.hasfx .ph1{max-width:10ch}
.phead.hasfx .psub{max-width:36ch}
/* the footage fills the panel edge to edge. It is sized to the panel — NOT to
   the full header — so the crop is centred on the wedge and the frame's middle
   lands in the visible orange rather than being masked away. */
.phead.hasfx .slabvid{position:absolute;right:0;left:auto;top:0;width:52%;height:100%;
  object-fit:cover;object-position:center;
  /* graded into the orange field beneath it — one duotone panel, not two layers */
  mix-blend-mode:luminosity;opacity:.95}
/* holds the copy over the fabric half without dimming the panel or flattening
   the weave — light enough that the cloth still moves behind the type */
.phead.hasfx::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(28,26,24,.78) 0%,rgba(28,26,24,.64) 34%,
    rgba(28,26,24,.36) 54%,rgba(28,26,24,.08) 70%,transparent 84%)}
.phead.hasfx .wrap{z-index:4}
.phead.hasfx .psub,.phead.hasfx .crumb{
  text-shadow:0 2px 10px rgba(12,10,9,.6),0 8px 30px rgba(12,10,9,.42)}
/* one step lighter over the moving cloth — buys the contrast back without
   having to dim the fabric */
.phead.hasfx .psub{color:var(--g200)}
/* the headline is gradient-filled, so text-shadow would bleed through the
   transparent fill and grey it out — drop-shadow works on the painted result */
.phead.hasfx .ph1{filter:drop-shadow(0 3px 12px rgba(12,10,9,.72))}
/* over the lit cloth the closing line lands one step up the orange ramp, so it
   keeps its contrast margin against the brightest crest the shader can produce */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .phead.hasfx .ph1{background-image:linear-gradient(180deg,
    var(--g50) 0%, var(--g100) 26%, var(--o-tint) 64%, var(--o-hover) 100%)}
}
/* the wedge stays put; the footage drifts inside it, so the shape never moves
   off its own edge under parallax */
html.px .phead.hasfx .slab{height:100%;top:0}
html.px .phead.hasfx .slabvid{height:calc(100% + 150px);top:-75px}
@media(max-width:900px){
  .phead.hasfx .slabvid{object-position:center}
  .phead.hasfx::before{background:linear-gradient(100deg,rgba(28,26,24,.72) 0%,
    rgba(28,26,24,.56) 44%,rgba(28,26,24,.30) 76%,rgba(28,26,24,.12) 100%)}
}
/* single column: the wedge becomes a banner across the top with the same
   15deg cut on its lower edge, and the copy sits under it on the cloth */
@media(max-width:760px){
  .phead.hasfx{padding-top:calc(var(--hh) + 158px)}
  .phead.hasfx .slab,html.px .phead.hasfx .slab{top:0;height:300px;width:100%;
    /* shallower cut here — a 15deg lean across a narrow column reads as a gash */
    -webkit-mask-image:linear-gradient(187deg,#000 84%,transparent 85%);
    mask-image:linear-gradient(187deg,#000 84%,transparent 85%)}
  .phead.hasfx .slabvid,html.px .phead.hasfx .slabvid{width:100%;height:100%;top:0}
  .phead.hasfx{padding-top:calc(var(--hh) + 244px)}
  .phead.hasfx::before{background:linear-gradient(0deg,rgba(28,26,24,.86) 0%,
    rgba(28,26,24,.72) 46%,rgba(28,26,24,.30) 72%,transparent 100%)}
  .phead.hasfx .ph1,.phead.hasfx .psub{max-width:none}
}
@media(prefers-reduced-motion:reduce){.phead.hasfx .slabvid{opacity:.72}}

/* ---- mirrored variant: panel on the left, copy on the right. Same system,
   opposite composition, so a second division page doesn't read as the first
   one with the words swapped. Paired with the soundfield shader. ---- */
.phead.hasfx .soundfield{position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s ease}
.phead.hasfx .soundfield.on{opacity:1}
.phead.hasfx.mirror .soundfield{transform:scaleX(-1)}
.phead.hasfx.mirror .slab{
  -webkit-mask-image:linear-gradient(285deg,transparent 56%,#000 56.6%);
  mask-image:linear-gradient(285deg,transparent 56%,#000 56.6%)}
.phead.hasfx.mirror .slabvid{left:0;right:auto;margin:0 0 0 2.4%}
.phead.hasfx.mirror::before{background:linear-gradient(260deg,rgba(28,26,24,.88) 0%,
  rgba(28,26,24,.80) 30%,rgba(28,26,24,.52) 52%,rgba(28,26,24,.14) 70%,transparent 84%)}
.phead.hasfx.mirror .wrap{text-align:right}
.phead.hasfx.mirror .ph1,.phead.hasfx.mirror .psub{margin-left:auto}
.phead.hasfx.mirror .crumb{display:flex;justify-content:flex-end}
@media(max-width:760px){
  /* single column drops back to the banner layout, unmirrored */
  .phead.hasfx.mirror .wrap{text-align:left}
  .phead.hasfx.mirror .ph1,.phead.hasfx.mirror .psub{margin-left:0}
  .phead.hasfx.mirror .crumb{justify-content:flex-start}
  .phead.hasfx.mirror .slabvid{margin:0}
  .phead.hasfx.mirror .slab{
    -webkit-mask-image:linear-gradient(187deg,#000 84%,transparent 85%);
    mask-image:linear-gradient(187deg,#000 84%,transparent 85%)}
  .phead.hasfx.mirror::before{background:linear-gradient(0deg,rgba(28,26,24,.86) 0%,
    rgba(28,26,24,.72) 46%,rgba(28,26,24,.30) 72%,transparent 100%)}
}

/* ---- full variant (events): no side wedge at all. The field runs the whole
   width and the diagonal is reused as the header's bottom edge — a horizon
   rather than a panel. Beams screen over any footage so the light reads as
   being in the room, which is what a stage actually looks like. ---- */
.phead.hasfx.full{border-bottom:0;padding-bottom:118px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 62px))}
.phead.hasfx.full .slab{display:none}
.phead.hasfx .lightfield{position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.1s ease;
  mix-blend-mode:screen}
.phead.hasfx .lightfield.on{opacity:1}
/* footage, when it exists, sits under the beams across the full width */
.phead.hasfx.full .fullvid{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.phead.hasfx.full .fullvid.on{opacity:.44}
/* lighter than the wedge variants — here the beams ARE the composition, so the
   scrim only has to protect the copy column on the left */
.phead.hasfx.full::before{z-index:2;
  background:linear-gradient(96deg,rgba(20,18,16,.84) 0%,rgba(20,18,16,.70) 30%,
    rgba(20,18,16,.34) 56%,rgba(20,18,16,.10) 78%,rgba(20,18,16,.04) 100%)}
.phead.hasfx.full .wrap{z-index:4}
.phead.hasfx.full .ph1{max-width:13ch}
.phead.hasfx.full .psub{max-width:42ch}
/* the brand edge follows the angled hem, drawn as the strip between the clip
   line and one 3px above it, so it tracks the diagonal exactly at any width */
.phead.hasfx.full::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:linear-gradient(90deg,var(--o) 0%,var(--o) 46%,rgba(255,95,15,.30) 84%,rgba(255,95,15,.12) 100%);
  clip-path:polygon(0 calc(100% - 65px),100% calc(100% - 3px),100% 100%,0 calc(100% - 62px))}
@media(max-width:760px){
  .phead.hasfx.full{padding-bottom:86px;
    clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 34px))}
  .phead.hasfx.full::before{background:linear-gradient(0deg,rgba(20,18,16,.90) 0%,
    rgba(20,18,16,.76) 42%,rgba(20,18,16,.44) 72%,rgba(20,18,16,.24) 100%)}
  .phead.hasfx.full::after{
    clip-path:polygon(0 calc(100% - 37px),100% calc(100% - 3px),100% 100%,0 calc(100% - 34px))}
}
@media(prefers-reduced-motion:reduce){.phead.hasfx.full .fullvid{display:none}}

/* ---- offset ledger (events): sections step alternately left and right of
   centre behind a large ghosted index numeral, so the page walks down the
   run of a job instead of stacking uniform blocks. ---- */
.sec.step{position:relative;overflow:hidden}
.sec.step>.wrap{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:0 24px}
.stepbody{grid-column:1/span 8;position:relative;z-index:2}
.sec.step.rt .stepbody{grid-column:5/span 8}
.stepnum{position:absolute;z-index:0;top:-34px;right:-8px;pointer-events:none;
  font-family:var(--fd);font-weight:900;font-size:clamp(120px,19vw,260px);line-height:.78;
  letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,95,15,.16)}
.sec.step.rt .stepnum{right:auto;left:-8px}
.stepbody>.sechead{margin-bottom:14px}
@media(max-width:900px){
  .stepbody,.sec.step.rt .stepbody{grid-column:1/span 12}
  .stepnum{font-size:clamp(96px,26vw,150px);top:-22px;right:-4px}
  .sec.step.rt .stepnum{left:auto;right:-4px}
}

/* ---- sticky rail: the section label holds its place while the content moves
   past it. Gives a page a different scroll feel from the stacked blocks used
   elsewhere, without introducing a single new colour or type size. ---- */
.sec.rail>.wrap{display:grid;grid-template-columns:250px 1fr;gap:0 64px;align-items:start}
.railhead{position:sticky;top:112px}
.railhead h2{font-size:clamp(26px,3.2vw,40px);max-width:12ch}
.railbody{min-width:0}
@media(max-width:900px){
  .sec.rail>.wrap{grid-template-columns:1fr;gap:0}
  .railhead{position:static;margin-bottom:34px}
  .railhead h2{max-width:18ch}
}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g500);margin-bottom:22px}
.crumb a:hover{color:var(--o)}
.crumb b{color:var(--o);font-weight:500}
.crumb span{color:var(--g700);margin:0 8px}
.ph1{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(38px,7vw,84px);line-height:.9;letter-spacing:-.035em;color:var(--g50);max-width:16ch}
/* page headline resolves from near-white into brand orange on its closing line,
   handing the eye down into the orange rule and stat band below */
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .ph1{background-image:linear-gradient(180deg,
      var(--g50) 0%, var(--g100) 26%, var(--o-hover) 72%, var(--o) 100%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    width:fit-content;padding-bottom:.06em}
}
@media (forced-colors:active){
  .ph1{background-image:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}
.psub{margin-top:24px;max-width:54ch;font-size:clamp(16px,1.8vw,19px);color:var(--g300)}

/* ============================ CONTENT BLOCKS ============================ */
.sec{padding:96px 0}
.sec.alt{background:
  linear-gradient(180deg,rgba(255,95,15,.055) 0%,rgba(255,95,15,0) 42%),var(--g900);
  border-top:1px solid rgba(255,95,15,.22)}
.lead{font-size:clamp(19px,2.4vw,26px);line-height:1.4;color:var(--g100);max-width:26ch;
  font-family:var(--display);font-weight:600;letter-spacing:-.01em}
.two{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.prose p{max-width:60ch;margin-bottom:16px;color:var(--g300)}
.prose p strong{color:var(--g50)}

/* ============================ FOLD / UNFOLD ============================
   Cloth-style hinge: each row animates its height while its face rotates
   down from its top edge. The .fold-ready class is added by JS, so with no
   JS every row simply renders open. */
.folds{perspective:1500px}
.folds.fold-ready .fold-item{height:0;overflow:hidden;
  transition:height .52s cubic-bezier(.22,.8,.26,1)}
.folds.fold-ready .fold-face{transform-origin:top center;transform:rotateX(-92deg);opacity:0;
  transition:transform .52s cubic-bezier(.22,.8,.26,1),opacity .34s ease;
  backface-visibility:hidden;will-change:transform}
.folds.fold-ready .fold-item.is-down .fold-face{transform:none;opacity:1}

/* the fold / unfold control */
.foldbar{display:flex;justify-content:flex-end;margin-bottom:6px}
.foldctl{display:inline-flex;align-items:center;gap:10px;background:none;cursor:pointer;
  border:1px solid var(--g700);color:var(--g300);padding:8px 15px;border-radius:100px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .2s,color .2s}
.foldctl:hover{border-color:var(--o);color:var(--o)}
.foldctl-mark{position:relative;width:12px;height:12px;flex:none}
.foldctl-mark::before,.foldctl-mark::after{content:"";position:absolute;left:0;width:12px;height:2px;
  background:var(--o);transition:transform .34s cubic-bezier(.22,.8,.26,1)}
.foldctl-mark::before{top:3px}
.foldctl-mark::after{top:7px}
.foldctl.is-folded .foldctl-mark::before{transform:translateY(2px)}
.foldctl.is-folded .foldctl-mark::after{transform:translateY(-2px)}
.foldctl .lbl-unfold{display:none}
.foldctl.is-folded .lbl-fold{display:none}
.foldctl.is-folded .lbl-unfold{display:inline}
@media(prefers-reduced-motion:reduce){
  .folds.fold-ready .fold-item,.folds.fold-ready .fold-face{transition:none}
}

/* offer list */
.offer{list-style:none;margin-top:8px}
.offer li{padding:22px 0 22px 40px;border-bottom:1px solid var(--g800);position:relative;max-width:64ch}
.offer li:first-child{border-top:1px solid var(--g800)}
.offer li::before{content:"";position:absolute;left:0;top:29px;width:18px;height:2px;
  background:var(--o);transform:skewX(var(--shear))}
.offer li b{display:block;font-family:var(--display);font-weight:700;font-size:17px;color:var(--g50);
  margin-bottom:5px;letter-spacing:-.01em}
.offer li span{font-size:14.5px;color:var(--g400)}
/* folding variant — chrome sits on the face so a folded row collapses to nothing */
.offer.folds li{padding:0;border:0}
.offer.folds li::before{display:none}
.offer.folds .fold-face{position:relative;padding:22px 0 22px 40px;
  border-bottom:1px solid var(--g800)}
.offer.folds li:first-child .fold-face{border-top:1px solid var(--g800)}
.offer.folds .fold-face::before{content:"";position:absolute;left:0;top:29px;width:18px;height:2px;
  background:var(--o);transform:skewX(var(--shear))}

/* ---------- content pillars ----------
   Four separate cards. Hover, keyboard focus or a tap lifts one clear of the
   others and holds it levitating until something else is chosen. The reveal
   animation owns .pillar's transform, so all motion lives on the inner .pcard
   layer — the two never fight over the same property. */
.pillars{display:grid;gap:20px;margin-top:52px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  perspective:1200px;perspective-origin:50% 40%}
.pillar{position:relative}
.pcard{position:relative;height:100%;background:var(--g900);border:1px solid var(--g800);
  padding:34px 28px 32px;cursor:pointer;outline:none;
  transform-origin:50% 85%;
  transition:transform .55s cubic-bezier(.18,.84,.28,1),box-shadow .55s ease,
    border-color .3s ease,background .3s ease}
.sec.alt .pcard{background:var(--g950)}
/* the ground shadow the card lifts away from */
.pcard::after{content:"";position:absolute;left:10%;right:10%;bottom:-16px;height:20px;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 72%);
  transition:opacity .55s ease,transform .55s ease}
/* the shear motif, as on every other card in the system */
.pcard::before{content:"";position:absolute;left:28px;top:0;width:38px;height:3px;
  background:var(--o);transform:skewX(var(--shear));transform-origin:left;
  transition:width .3s cubic-bezier(.2,.7,.3,1)}
.pcard:hover::before,.pcard:focus-visible::before,.pillar.sel .pcard::before{width:74px}
/* step one: hover or focus brings the card forward */
.pcard:hover,.pcard:focus-visible{background:var(--g800);border-color:var(--g700);
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 22px 44px rgba(0,0,0,.42)}
.sec.alt .pcard:hover,.sec.alt .pcard:focus-visible{background:var(--g900)}
.pcard:focus-visible{border-color:var(--o)}
/* step two: the chosen card pops clear and stays there, breathing */
.pillar.sel{z-index:4}
.pillar.sel .pcard,.pillar.sel .pcard:hover{background:var(--g800);border-color:var(--o);
  box-shadow:0 38px 76px rgba(0,0,0,.58),0 0 0 1px rgba(255,95,15,.35);
  animation:levitate 4.4s ease-in-out infinite}
.sec.alt .pillar.sel .pcard{background:var(--g900)}
.pillar.sel .pcard::after{opacity:1;animation:levitate-shadow 4.4s ease-in-out infinite}
@keyframes levitate{
  0%,100%{transform:translateY(-18px) scale(1.045)}
  50%    {transform:translateY(-30px) scale(1.045)}}
@keyframes levitate-shadow{
  0%,100%{opacity:.9;transform:scaleX(1)}
  50%    {opacity:.6;transform:scaleX(.88)}}
.pnum{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  background:var(--o);color:var(--on-o);font-weight:500;padding:4px 10px;margin-bottom:22px;
  transform:skewX(var(--shear));transition:background .25s}
.pcard:hover .pnum,.pcard:focus-visible .pnum,.pillar.sel .pnum{background:var(--o-hover)}
.pillar h3{font-family:var(--display);font-weight:800;font-size:19px;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--g50);margin-bottom:11px;line-height:1.2}
.pillar p{font-size:14.5px;color:var(--g400);line-height:1.62;transition:color .3s}
.pillar.sel p{color:var(--g300)}
/* stacked in one column the full lift would ride up over the card above, so the
   travel shortens and the gap opens to hold it */
@media(max-width:640px){
  .pillars{gap:34px}
  .pcard:hover,.pcard:focus-visible{transform:translateY(-6px) scale(1.012)}
  .pillar.sel .pcard,.pillar.sel .pcard:hover{animation-name:levitate-sm}
}
@keyframes levitate-sm{
  0%,100%{transform:translateY(-9px) scale(1.02)}
  50%    {transform:translateY(-17px) scale(1.02)}}
@media(prefers-reduced-motion:reduce){
  .pillar.sel .pcard,.pillar.sel .pcard::after{animation:none}
  .pillar.sel .pcard{transform:translateY(-14px) scale(1.03)}
  .pillar.sel .pcard::after{opacity:.85}
  .pcard:hover,.pcard:focus-visible{transform:none}
}

/* ---------- Originkit Particle Sphere (section background) ----------
   The component paints into its own container; everything here is placement.
   It sits behind the section's content and takes no pointer events away from
   the video cards — the sphere's own cursor response reads the canvas, which
   stays live in the empty margins around the grid. */
.sec.haspshere{position:relative;overflow:hidden;isolation:isolate}
/* the component draws into a canvas 2.5x its container, so container size is the
   real cost control here — keep it modest, and smaller again on phones */
.psphere{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(980px,112%);aspect-ratio:1/1;
  z-index:0;pointer-events:none}
.psphere [data-originkit]{width:100%;height:100%;
  opacity:0;transition:opacity 1.4s ease}
.psphere [data-originkit].on{opacity:.52}
/* fade the sphere out behind the copy so headings keep their contrast */
.sec.haspshere::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 70% 58% at 50% 46%,
    rgba(28,26,24,.72) 0%,rgba(28,26,24,.46) 44%,rgba(28,26,24,.80) 100%)}
.sec.haspshere>.wrap{position:relative;z-index:2}
@media(max-width:760px){.psphere{width:min(520px,132%)}}
@media(prefers-reduced-motion:reduce){.psphere{display:none}}

/* ---------- section background video ----------
   Footage running full-bleed behind a section's copy. The rule here is that the
   video is atmosphere, never content: it sits under a heavy scrim so body text
   keeps a 4.5:1 ratio against the brightest frame, not the average one. The
   poster doubles as the still fallback, so a failed or blocked video leaves a
   composed section rather than a black box. */
.sec.hasvid{position:relative;overflow:hidden;isolation:isolate;
  background:#141210 center/cover no-repeat}
.secvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.secvid.on{opacity:.62}
/* two layers: a flat floor that guarantees the worst case, and a gradient that
   keeps the rail column darker still, since that is where the prose sits */
.sec.hasvid::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(20,18,16,.90) 0%,rgba(20,18,16,.86) 46%,
    rgba(20,18,16,.78) 74%,rgba(20,18,16,.72) 100%)}
.sec.hasvid>.wrap{position:relative;z-index:2}
/* a thin brand edge so the band reads as a deliberate panel, not a stray image */
.sec.hasvid::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,var(--brand) 0%,rgba(255,95,15,.22) 42%,transparent 78%)}
@media(max-width:760px){
  /* phones carry the copy over a narrower column — hold the scrim flat and darker */
  .sec.hasvid::before{background:rgba(20,18,16,.90)}
  .secvid.on{opacity:.55}
}
@media(prefers-reduced-motion:reduce){
  /* no motion behind reading copy — the poster still carries the room */
  .secvid{display:none}
}

/* ---------- run sheet (event management) ----------
   A show day printed the way a production actually holds it: the clock down
   the left in mono, the task beside it. Relative marks (T−8, +48) rather than
   invented clock times, because the real ones move with the venue. */
.runsheet{list-style:none;margin:44px 0 0;padding:0;position:relative}
.runsheet::before{content:"";position:absolute;left:70px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,var(--g700) 8%,var(--g700) 92%,transparent)}
.runsheet li{display:grid;grid-template-columns:70px 1fr;gap:0 30px;
  padding:0 0 30px;position:relative}
.runsheet li:last-child{padding-bottom:0}
.rtime{font-family:var(--fm);font-size:13px;font-weight:500;color:var(--o);
  letter-spacing:.04em;text-align:right;padding-top:2px;position:relative}
/* the node on the spine */
.rtime::after{content:"";position:absolute;right:0;top:7px;width:7px;height:7px;
  transform:translateX(50%);border-radius:50%;background:var(--g900);
  border:1px solid var(--g600);box-shadow:0 0 0 4px var(--g950)}
.runsheet li:first-child .rtime::after,
.runsheet li:last-child .rtime::after{background:var(--o);border-color:var(--o)}
.sec.alt .rtime::after{box-shadow:0 0 0 4px var(--g900)}
.runsheet b{display:block;font-family:var(--fd);font-weight:700;font-size:17px;
  color:var(--g100);margin-bottom:5px;letter-spacing:.005em}
.runsheet span{display:block;color:var(--g300);font-size:15px;line-height:1.62;max-width:52ch}
@media(max-width:640px){
  .runsheet::before{left:52px}
  .runsheet li{grid-template-columns:52px 1fr;gap:0 22px}
  .rtime::after{right:0}
}

/* ---------- signal chain (music production) ----------
   The five stages a track passes through, as a tablist. A pulse travels the
   wire left to right so the chain reads as a direction of travel, not a menu.
   Without JS every panel renders open, so the content is never hidden. */
.chainflow{margin-top:52px;position:relative}
.cfnodes{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
/* The wire runs dot-centre to dot-centre. With five 1fr columns, an 8px gap,
   6px node padding and a 28px dot, the first centre sits at 20px and the last
   is one fifth of (track - 132px) in from the right — so the line lands on the
   dots at any width instead of floating past them. */
.cfwire{position:absolute;left:20px;right:calc((100% - 132px) / 5);top:13px;height:2px;
  background:var(--g800);overflow:hidden;pointer-events:none}
.cfpulse{position:absolute;top:0;left:0;width:22%;height:100%;
  background:linear-gradient(90deg,transparent,var(--o),transparent);
  animation:cfrun 3.8s linear infinite}
@keyframes cfrun{0%{transform:translateX(-120%)}100%{transform:translateX(560%)}}
.cfnode{position:relative;background:none;border:0;padding:0 6px;cursor:pointer;
  text-align:left;font-family:var(--body);display:block;color:inherit}
.cfdot{display:block;width:28px;height:28px;border-radius:50%;
  background:var(--g950);border:2px solid var(--g700);position:relative;z-index:1;
  transition:border-color .3s,background .3s,box-shadow .3s}
.cfnode:hover .cfdot{border-color:var(--o-hover)}
.cfnode .cfn{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--g500);transition:color .3s}
.cfnode .cflabel{display:block;margin-top:5px;font-family:var(--display);font-weight:800;
  font-size:15px;text-transform:uppercase;letter-spacing:-.01em;color:var(--g400);
  transition:color .3s}
.cfnode[aria-selected="true"] .cfdot{background:var(--o);border-color:var(--o);
  box-shadow:0 0 0 5px rgba(255,95,15,.18)}
.cfnode[aria-selected="true"] .cfn{color:var(--o)}
.cfnode[aria-selected="true"] .cflabel{color:var(--g50)}
/* stages already passed read as done, so the chain shows progress */
.cfnode.is-past .cfdot{border-color:var(--o-press);background:var(--o-900)}
.cfnode:focus-visible{outline:none}
.cfnode:focus-visible .cfdot{outline:2px solid var(--o);outline-offset:3px}
.cfpanels{margin-top:38px}
.cfpanel{background:var(--g900);border:1px solid var(--g800);border-top:2px solid var(--o);
  padding:32px 34px}
html.js .cfpanel{display:none}
html.js .cfpanel.is-on{display:block;animation:cfin .45s cubic-bezier(.2,.7,.3,1) both}
@keyframes cfin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cfpanel h3{font-family:var(--display);font-weight:800;font-size:21px;text-transform:uppercase;
  letter-spacing:-.01em;color:var(--g50);margin-bottom:12px}
.cfpanel p{font-size:15.5px;color:var(--g300);max-width:64ch;line-height:1.62}
.cfmeta{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.cfmeta li{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--o);border:1px solid rgba(255,95,15,.4);padding:7px 12px;
  transform:skewX(var(--shear))}
.cfmeta li>span{display:inline-block;transform:skewX(calc(-1 * var(--shear)))}
@media(prefers-reduced-motion:reduce){
  .cfpulse{animation:none;opacity:.5;transform:none;width:100%}
  html.js .cfpanel.is-on{animation:none}
}
/* single column: the wire stands up and runs down the left rail */
@media(max-width:720px){
  .cfnodes{grid-template-columns:1fr;gap:0}
  .cfwire{left:13px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  .cfpulse{width:100%;height:18%;background:linear-gradient(180deg,transparent,var(--o),transparent);
    animation-name:cfrundown}
  @keyframes cfrundown{0%{transform:translateY(-120%)}100%{transform:translateY(560%)}}
  .cfnode{display:grid;grid-template-columns:28px 1fr;gap:0 16px;align-items:center;
    padding:11px 0}
  .cfnode .cfn{grid-column:2;margin-top:0}
  .cfnode .cflabel{grid-column:2;margin-top:2px}
  .cfpanel{padding:26px 22px}
}

/* ---------- YouTube work cards (click to load) ---------- */
.ytgrid{display:grid;gap:22px;margin-top:52px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.yt{border:1px solid var(--g800);background:var(--g900);overflow:hidden;
  transition:border-color .28s,transform .28s cubic-bezier(.2,.7,.3,1)}
.yt{position:relative}
.yt::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--o);
  transform:scaleX(0) skewX(var(--shear));transform-origin:left;
  transition:transform .32s cubic-bezier(.2,.7,.3,1);z-index:2}
.yt:hover::after{transform:scaleX(1) skewX(var(--shear))}
.yt:hover{border-color:var(--g700);transform:translateY(-4px)}
.ytplay{display:block;position:relative;width:100%;aspect-ratio:16/9;border:0;padding:0;
  background:var(--g950);cursor:pointer;overflow:hidden}
.ytplay img{width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .3s;opacity:.86}
.ytplay:hover img{transform:scale(1.04);opacity:1}
.ytbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;display:grid;place-items:center;
  background:var(--o);color:var(--on-o);border-radius:50%;
  box-shadow:0 10px 30px rgba(0,0,0,.5);transition:transform .28s,background .2s}
.ytbtn svg{width:26px;height:26px;margin-left:3px}
.ytplay:hover .ytbtn{background:var(--o-hover);transform:translate(-50%,-50%) scale(1.08)}
.yt iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.ytmeta{padding:22px 24px 24px}
.ytmeta small{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--o)}
.ytmeta h3{font-family:var(--display);font-weight:800;font-size:17.5px;color:var(--g50);
  margin:9px 0 8px;line-height:1.25;letter-spacing:-.01em}
.ytmeta p{font-size:14px;color:var(--g400);line-height:1.6}
.ytmeta .go{margin-top:16px}
.yt:hover .go i{width:28px}

/* ---------- channel call to action ---------- */
.ytcta{display:flex;align-items:center;gap:24px;margin-top:44px;padding:26px 30px;
  position:relative;overflow:hidden;border:1px solid var(--g700);
  background:linear-gradient(100deg,var(--g900) 0%,var(--g900) 55%,rgba(255,95,15,.10) 100%);
  transition:border-color .3s,transform .3s cubic-bezier(.2,.7,.3,1),background .3s}
/* the shear motif, as everywhere else */
.ytcta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--o);
  transform:skewX(var(--shear));transform-origin:top}
.ytcta:hover{border-color:var(--o);transform:translateY(-4px);
  background:linear-gradient(100deg,var(--g800) 0%,var(--g900) 55%,rgba(255,95,15,.18) 100%)}

.ytcta-play{position:relative;flex:none;width:58px;height:58px;display:grid;place-items:center;
  background:var(--o);color:var(--on-o);border-radius:50%;transition:transform .3s}
.ytcta-play svg{width:24px;height:24px;margin-left:3px;position:relative;z-index:2}
.ytcta:hover .ytcta-play{transform:scale(1.07)}
/* a quiet pulse to draw the eye without shouting */
.ytcta-play .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--o);
  animation:ytpulse 2.6s cubic-bezier(.2,.7,.3,1) infinite}
.ytcta-play .ring.r2{animation-delay:1.3s}
@keyframes ytpulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.85);opacity:0}
  100%{transform:scale(1.85);opacity:0}}

.ytcta-copy{display:block}
.ytcta-copy b{display:block;font-family:var(--display);font-weight:800;font-size:18px;
  color:var(--g50);letter-spacing:-.01em;margin-bottom:5px;line-height:1.25}
.ytcta-copy span{display:block;font-size:14px;color:var(--g400);line-height:1.55;max-width:52ch}
.ytcta-go{margin-left:auto;flex:none;color:var(--o);display:grid;place-items:center;
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.ytcta-go svg{width:24px;height:24px}
.ytcta:hover .ytcta-go{transform:translateX(7px)}
@media(max-width:640px){
  .ytcta{flex-wrap:wrap;gap:18px;padding:22px}
  .ytcta-go{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  .ytcta-play .ring{animation:none;opacity:0}
}

/* ---------- media-kit reach list ---------- */
.kit{border-top:2px solid var(--o)}
.kitrow{display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--g800)}
.kit dt{font-family:var(--display);font-weight:700;font-size:17px;color:var(--g50);
  position:relative;padding-left:26px}
.kit dt::before{content:"";position:absolute;left:0;top:11px;width:14px;height:2px;
  background:var(--o);transform:skewX(var(--shear))}
.kitn{font-family:var(--display);font-weight:900;font-size:26px;color:var(--o);
  letter-spacing:-.02em;text-align:right}
.kitn.kitq{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--g500)}
.kith{grid-column:1/2;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  color:var(--g500)}
.kitnote{margin-top:22px;font-size:14px;color:var(--g400);max-width:52ch}

/* ---------- numbered process steps ---------- */
.steps{list-style:none;margin-top:52px;border-top:1px solid var(--g800)}
.steps li{display:grid;grid-template-columns:64px 1fr;gap:6px 20px;align-items:start;
  padding:26px 0;border-bottom:1px solid var(--g800)}
.snum{grid-row:1/3;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--o);
  padding-top:4px;position:relative}
.snum::after{content:"";position:absolute;left:0;top:26px;width:22px;height:2px;
  background:var(--o);transform:skewX(var(--shear));opacity:.55;
  transition:width .3s cubic-bezier(.2,.7,.3,1)}
.steps li:hover .snum::after{width:40px;opacity:1}
.steps b{font-family:var(--display);font-weight:700;font-size:18px;color:var(--g50);
  letter-spacing:-.01em}
.steps li>span:last-child{font-size:14.5px;color:var(--g400);max-width:62ch}
@media(max-width:640px){
  .steps li{grid-template-columns:44px 1fr;gap:4px 14px}
  .ytgrid{grid-template-columns:1fr}
}

/* work / gallery placeholders */
.works{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:52px}
.work{position:relative;aspect-ratio:4/3;background:var(--g900);border:1px solid var(--g800);
  overflow:hidden;display:flex;align-items:flex-end;padding:22px;transition:border-color .28s}
/* the flat gradient is the empty state; a card with a picture keeps it as the
   scrim that holds the caption legible over whatever the image is doing */
.work::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg,var(--g800),var(--g900) 60%,var(--g950))}
.work.haspic::before{background:linear-gradient(180deg,rgba(20,18,16,.14) 0%,
  rgba(20,18,16,.42) 46%,rgba(20,18,16,.86) 78%,rgba(20,18,16,.94) 100%)}
.workpic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.02);transition:transform .7s cubic-bezier(.2,.7,.2,1);filter:saturate(.92)}
.work:hover .workpic{transform:scale(1.06)}
.work::after{content:"";position:absolute;top:0;left:0;width:46px;height:4px;background:var(--o);
  transform:skewX(var(--shear));transform-origin:left;z-index:3}
.work:hover{border-color:var(--g700)}
/* an illustrative image must never read as documentation of real work — the
   card wears a corner mark saying so until a real photograph replaces it */
.work.haspic .cap em{color:var(--g300)}
.work.haspic .cap em::before{content:"";display:inline-block;width:6px;height:6px;
  margin-right:7px;border-radius:50%;background:var(--o);vertical-align:middle}
@media(prefers-reduced-motion:reduce){
  .workpic,.work:hover .workpic{transition:none;transform:none}
}
.work .cap{position:relative;z-index:2}
.work .cap b{display:block;font-family:var(--display);font-weight:800;font-size:16px;color:var(--g50)}
.work .cap small{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--o)}
.work .cap em{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g500);font-style:normal;margin-top:8px}

.note{background:var(--g900);border:1px solid var(--g800);border-left:3px solid var(--o);
  border-radius:0 4px 4px 0;padding:20px 24px;margin-top:40px;max-width:70ch}
.note p{font-size:14px;color:var(--g400);margin:0}
.note b{color:var(--g200)}

/* stat band */
.band{background:linear-gradient(180deg,rgba(255,95,15,.07) 0%,rgba(255,95,15,0) 60%),var(--g900);
  border-top:1px solid rgba(255,95,15,.3);border-bottom:1px solid var(--g800);padding:70px 0}
.band .proof{margin-top:0;border-top:0;padding-top:0}

/* CTA strip — solid orange band, brand-forward */
.ctastrip{padding:104px 0;position:relative;overflow:hidden;background:var(--o)}
.ctastrip::before{content:"";position:absolute;inset:0;
  background:linear-gradient(150deg,var(--o-hover) 0%,var(--o) 42%,var(--o-press) 100%);
  opacity:.9}
.ctastrip .slab{display:none}
/* Originkit Pixel Card as the strip's background. Placement only — the
   component paints its own canvas. Palette is the three tokens lighter than
   the orange field, so the near-black headline over it can only gain contrast,
   never lose it. */
.ctastrip .pxcard{position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1s ease}
.ctastrip .pxcard.on,.ctastrip .pxcard:has(.on){opacity:.55}
.ctastrip .pxcard>[data-originkit]{width:100%;height:100%}
.ctastrip .wrap{position:relative;z-index:2;text-align:center}
@media(prefers-reduced-motion:reduce){.ctastrip .pxcard{display:none}}
.ctastrip h2{margin:0 auto 30px;color:var(--on-o)}
.ctastrip .herobtns{justify-content:center}
/* invert the buttons so they read on the orange field */
.ctastrip .cta{background:var(--g950);color:var(--o)}
.ctastrip .cta:hover{background:#000;color:var(--o-hover)}
.ctastrip .ghost{border-color:rgba(35,16,7,.55);color:var(--on-o)}
.ctastrip .ghost:hover{border-color:var(--on-o);color:var(--on-o)}

/* ============================ CONTACT ============================ */
.contact{padding:96px 0 110px}
.cgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;margin-top:44px;align-items:start}
.field{margin-bottom:20px}
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g500);margin-bottom:9px}
input,select,textarea{width:100%;background:var(--g900);border:1px solid var(--g800);color:var(--g50);
  font-family:var(--body);font-size:15px;padding:13px 15px;border-radius:2px;
  transition:border-color .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--o);background:var(--g800)}
textarea{resize:vertical;min-height:112px}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--g400) 50%),linear-gradient(135deg,var(--g400) 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.submit{margin-top:8px;width:auto}
.formnote{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--g500);margin-top:16px}
.direct dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g500);margin-bottom:7px}
.direct dd{margin-bottom:26px;color:var(--g100);font-size:16px}
.direct dd a:hover{color:var(--o)}
.socials{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.socials a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--g700);padding:8px 13px;color:var(--g300);transition:.2s;
  display:inline-flex;align-items:center;gap:8px}
.socials a svg{width:15px;height:15px;flex:none}
.socials a:hover{border-color:var(--o);color:var(--o)}

/* ============================ FOOTER ============================ */
footer{border-top:1px solid var(--g800);padding:64px 0 52px;background:var(--g950)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:52px}
.fgrid .fabout{max-width:34ch}
.fgrid p{font-size:14px;color:var(--g400);margin-top:20px}
.fcol h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--g500);margin-bottom:18px}
.fcol a{display:block;font-size:14px;color:var(--g300);padding:6px 0;transition:color .2s}
/* social rows carry their brand icon */
.fcol a:has(svg){display:flex;align-items:center;gap:11px}
.fcol a svg{width:16px;height:16px;flex:none;opacity:.75;transition:opacity .2s}
.fcol a:hover svg{opacity:1}
.fcol a:hover{color:var(--o)}
.frow{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:center;
  padding-top:30px;border-top:1px solid var(--g800);
  font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:var(--g600)}

/* ============================ RESPONSIVE ============================ */
@media(max-width:960px){
  .two{grid-template-columns:1fr;gap:36px}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .founder .inner{grid-template-columns:1fr}
  .fportrait{min-height:320px}
  .fportrait::after{background:linear-gradient(180deg,transparent 76%,var(--g500) 76.3%)}
  .cgrid{grid-template-columns:1fr;gap:44px}
}
@media(max-width:760px){
  nav{position:fixed;inset:var(--hh) 0 auto;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--g900);border-bottom:1px solid var(--g800);padding:8px var(--pad) 24px;
    transform:translateY(-135%);transition:transform .34s cubic-bezier(.2,.7,.3,1);
    max-height:calc(100vh - var(--hh));overflow-y:auto}
  nav.open{transform:none}
  .navlinks{display:flex;flex-direction:column;align-items:stretch;gap:0;
    background:none;border:0;border-radius:0;padding:0;
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .nl{display:block;padding:15px 0;width:100%;border-bottom:1px solid var(--g800);
    font-size:16px;border-radius:0}
  .dd>.nl{display:flex}
  .nl:hover{background:none}
  .navlinks .nl.active{color:var(--o)}
  .navlinks .nl.active::before{display:none}
  /* dropdown becomes inline list on mobile */
  .dd{width:100%}
  .dd>.nl{width:100%;justify-content:space-between}
  .ddmenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    min-width:0;border:0;background:transparent;padding:0 0 8px 12px;
    max-height:0;overflow:hidden;transition:max-height .3s}
  .dd.open .ddmenu{max-height:420px}
  .ddmenu a{padding:12px 10px}
  nav .lang{margin-top:18px}
  nav .cta{margin-top:14px}
  .burger{display:flex}
  .hero{padding-top:132px}
  h1{font-size:clamp(34px,9vw,62px);max-width:100%}
  .phead{padding-top:120px}
  .ph1{font-size:clamp(32px,8.4vw,60px)}
  .proof{margin-top:64px}
  .slab{width:100vw;right:-30%;opacity:.09}
  .fgrid{grid-template-columns:1fr;gap:32px}
  /* Touch targets: give the small controls a >=44px hit area on phones. */
  .burger{padding:12px;gap:5px}
  .lang button{padding:12px 16px;min-height:44px}
  .replay3d{display:none}   /* hero is a static poster on mobile — nothing to replay */
  .ddmenu a{padding:14px 10px}
  nav .navlinks .nl{min-height:44px;display:flex;align-items:center}
}

/* ============================ REDUCED MOTION ============================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.12s!important}
  .rev{opacity:1;transform:none}
  .track{animation:none}
  .card:hover{transform:none}
}