/* ============================================================
   FastForward Global — house of brands
   Palette + annotation marks sampled from the live site.
   ============================================================ */

:root{
  --bg:#0E0E0E;
  --bg-lift:#151517;
  --bg-card:#171719;
  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --ink:#FFFFFF;
  --ink-mid:rgba(255,255,255,.62);
  --ink-low:rgba(255,255,255,.40);
  --accent:#00FFD7;
  --accent-dim:rgba(0,255,215,.14);

  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;   /* the original brand stack; Arial on Windows */
  --label:"Helvetica Neue",Helvetica,Arial,sans-serif;   /* small text: same face, wide-tracked */

  --gut:clamp(20px,5vw,72px);
  --maxw:1320px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--display);font-weight:400;
  font-size:clamp(15px,1.05vw,17px);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:.98}
p{margin:0}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,11vw,164px);position:relative}

/* --- grain + vignette atmosphere --- */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- eyebrow label --- */
.eyebrow{
  font-family:var(--label);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:12px;margin-bottom:26px;
}
.eyebrow::before{
  content:"";width:26px;height:1px;background:var(--accent);flex:none;
}
.eyebrow--mid{color:var(--ink-low)}
.eyebrow--mid::before{background:var(--line)}

/* ============================ NAV ============================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(14,14,14,.72);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s;
}
.nav.is-stuck{border-bottom-color:var(--line-soft)}
.nav__mark{display:flex;align-items:center;gap:12px}
.nav__mark img{width:30px;height:auto}
.nav__actions{display:flex;align-items:center;gap:10px}
.nav__cta{
  font-family:var(--label);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:10px 20px;white-space:nowrap;
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:border-color .3s,color .3s,background .3s,transform .5s var(--ease);
}
.nav__cta:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.nav__cta--primary{border-color:rgba(0,255,215,.45);color:var(--accent)}
.nav__cta--primary:hover{background:var(--accent);color:#06110f;border-color:var(--accent)}

@media(max-width:720px){
  .nav__cta{font-size:10px;letter-spacing:.1em;padding:9px 14px}
  .nav__actions{gap:7px}
}
@media(max-width:430px){
  /* keep the primary action; Think Tank is still reachable from the DDX section */
  .nav__cta:not(.nav__cta--primary){display:none}
}

/* ============================ HERO ============================ */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(100px,12vh,132px);padding-bottom:clamp(124px,16vh,178px);
  position:relative;overflow:hidden;
}
/* chevron field echoing the FF mark */
.hero__field{
  position:absolute;inset:0;pointer-events:none;opacity:.30;
  background:
    repeating-linear-gradient(115deg,transparent 0 62px,rgba(255,255,255,.030) 62px 63px),
    radial-gradient(120% 78% at 50% 0%,rgba(0,255,215,.10),transparent 62%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
}
.hero__inner{position:relative;z-index:2;text-align:center}
.hero__logo{width:clamp(42px,4.2vw,58px);margin:0 auto clamp(20px,3.2vw,34px)}
.hero h1{
  font-size:clamp(1.95rem,6.4vw,5.6rem);font-weight:600;letter-spacing:-.042em;
  line-height:1.04;max-width:26ch;margin-inline:auto;
}
/* the underline marks sit below the baseline — give lines room on narrow screens */
@media(max-width:760px){
  .hero h1{line-height:1.24}
}
.hero__sub{
  margin-top:clamp(24px,3.4vw,38px);color:var(--ink-mid);
  font-family:var(--label);font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;
}
.hero__scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:2;
  font-family:var(--label);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-low);display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero__scroll i{display:block;width:1px;height:36px;background:linear-gradient(var(--accent),transparent);animation:drop 2s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* --- hand-drawn annotation marks (paths lifted from the live site) --- */
.mark{position:relative;display:inline-block;white-space:nowrap}
.mark svg{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:112%;height:150%;overflow:visible;pointer-events:none;
}
.mark--line svg{top:auto;bottom:-.19em;translate:-50% 0;width:100%;height:.30em}
.mark svg path{
  fill:none;stroke:var(--accent);stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
.mark--white svg path{stroke:var(--ink);stroke-linecap:square}
/* Drawn left-to-right with a clip wipe. A stroke-dash animation can't be used
   here: the marks stretch via preserveAspectRatio="none", so dash lengths (user
   units) and non-scaling-stroke rendering (screen space) disagree. */
.mark svg{clip-path:inset(0 100% 0 0)}
.is-drawn .mark svg{animation:wipe .62s var(--ease) forwards;animation-delay:var(--d,.5s)}
@keyframes wipe{to{clip-path:inset(0 -6% 0 0)}}
@media(prefers-reduced-motion:reduce){
  .mark svg{clip-path:none !important;animation:none !important}
}

/* ====================== POSITIONING STRIP ====================== */
.stance{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.stance__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(36px,6vw,96px);align-items:start}
.stance__lead{font-size:clamp(1.32rem,2.5vw,2.05rem);font-weight:500;letter-spacing:-.025em;line-height:1.28}
.stance__lead b{font-weight:700;color:var(--accent)}
.stance__body{color:var(--ink-mid);font-size:1.02rem;line-height:1.72}
.stance__body p + p{margin-top:1.05em}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);margin-top:clamp(48px,7vw,88px);border:1px solid var(--line-soft)}
.metric{background:var(--bg);padding:clamp(22px,3vw,34px)}
.metric b{display:block;font-size:clamp(1.9rem,3.6vw,3rem);font-weight:700;letter-spacing:-.045em;line-height:1}
.metric span{display:block;margin-top:10px;font-family:var(--label);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-low)}
@media(max-width:900px){
  .stance__grid{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
}

/* ====================== SECTION HEAD ====================== */
.head{margin-bottom:clamp(42px,6vw,76px);max-width:64ch}
.head h2{font-size:clamp(1.95rem,4.6vw,3.7rem);font-weight:600}
.head p{margin-top:20px;color:var(--ink-mid);font-size:1.04rem;max-width:52ch;line-height:1.7}

/* ====================== EVENTS ====================== */
.events{position:relative;border-top:1px solid var(--line-soft)}
.event__hero{
  position:relative;border-radius:22px;overflow:hidden;
  min-height:clamp(340px,44vw,540px);display:flex;align-items:flex-end;
  border:1px solid var(--line-soft);
}
.event__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}
.event__hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,14,.22) 0%,rgba(14,14,14,.55) 45%,rgba(14,14,14,.96) 100%)}
.event__hero-in{position:relative;z-index:2;padding:clamp(26px,4vw,54px);width:100%}
/* out-specifies `.event__hero img` (absolute, cover) above */
.event__hero-in img.ddx{
  position:relative;inset:auto;object-fit:contain;opacity:1;
  height:clamp(28px,3.6vw,44px);width:auto;margin-bottom:22px;
}
.event__hero-in h3{font-size:clamp(1.5rem,3.2vw,2.6rem);font-weight:600;max-width:20ch}
.event__hero-in p{margin-top:16px;color:var(--ink-mid);max-width:52ch;line-height:1.7}



/* ====================== MISSION ====================== */
.mission{border-top:1px solid var(--line-soft);position:relative;overflow:hidden}
.mission__glow{
  position:absolute;left:50%;top:-40%;translate:-50% 0;width:min(1000px,120vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(0,255,215,.12),transparent 62%);pointer-events:none;
}
.mission blockquote{
  margin:0;position:relative;z-index:2;max-width:26ch;
  font-size:clamp(1.5rem,3.6vw,2.85rem);font-weight:500;letter-spacing:-.032em;line-height:1.24;
}
.mission blockquote em{font-style:normal;color:var(--accent)}
.mission__wide{max-width:70ch;margin-top:34px;color:var(--ink-mid);font-size:1.02rem;line-height:1.76;position:relative;z-index:2}

/* ====================== CONTACT / FOOTER ====================== */
.contact{border-top:1px solid var(--line-soft)}
.contact__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(36px,6vw,90px);align-items:end}
@media(max-width:900px){.contact__grid{grid-template-columns:1fr}}
.contact h2{font-size:clamp(2rem,5.4vw,4.2rem);font-weight:600;letter-spacing:-.04em}
.contact__mail{
  display:inline-flex;align-items:center;gap:14px;margin-top:30px;
  font-size:clamp(1.05rem,2vw,1.5rem);font-weight:500;letter-spacing:-.02em;
  border-bottom:1px solid var(--line);padding-bottom:8px;transition:border-color .35s,color .35s;
}
.contact__mail:hover{border-color:var(--accent);color:var(--accent)}
.contact__meta{font-family:var(--label);font-size:11.5px;line-height:2.05;letter-spacing:.06em;color:var(--ink-mid)}
.contact__meta b{display:block;color:var(--ink);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;margin-bottom:8px;font-weight:500}

.foot{border-top:1px solid var(--line-soft);padding-block:34px}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot__in img{width:34px;opacity:.85}
.foot__in small{font-family:var(--label);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-low)}
.foot__links{display:flex;gap:22px}
.foot__links a{font-family:var(--label);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-low);transition:color .3s}
.foot__links a:hover{color:var(--accent)}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ============================================================
   MOTION
   Rules below intentionally sit last so they win over the
   transform declarations earlier in this file.
   ============================================================ */

/* --- scroll progress hairline in the nav --- */
.nav__prog{
  position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;
  opacity:.9;pointer-events:none;
}

/* --- orchestrated page load --- */
.nav{transform:translateY(-100%);transition:transform .9s var(--ease) .1s,border-color .4s,background .4s}
.is-lit .nav,.nav.is-stuck{transform:none}

.hero__logo{opacity:0;transform:translateY(14px) scale(.94);transition:opacity .9s var(--ease) .15s,transform 1s var(--ease) .15s}
.is-lit .hero__logo{opacity:1;transform:none}

/* headline reveals word by word; .mark spans are treated as single words */
.hero h1 .w{
  display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .72s var(--ease),transform .82s var(--ease);
  transition-delay:calc(.30s + var(--i,0) * .055s);
}
.is-lit .hero h1 .w{opacity:1;transform:none}

.hero__sub{opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease) 1.15s,transform .8s var(--ease) 1.15s}
.is-lit .hero__sub{opacity:1;transform:none}
/* keeps its own translateX(-50%) centering — animate on top of it, not over it */
.hero__scroll{opacity:0;transform:translate(-50%,10px);transition:opacity .8s var(--ease) 1.3s,transform .8s var(--ease) 1.3s}
.is-lit .hero__scroll{opacity:1;transform:translate(-50%,0)}

/* --- hero chevron field: slow drift + scroll parallax --- */
.hero__field{
  transform:translate3d(0,var(--py,0%),0);
  animation:drift 26s linear infinite;
}
@keyframes drift{to{background-position:0 0,140px -90px,0 0}}

/* --- scroll parallax on imagery (JS sets --py) --- */
.event__hero > img{transform:translate3d(0,var(--py,0%),0) scale(1.12)}


/* --- metrics: underline sweep as the numbers count up --- */
.metric{position:relative;overflow:hidden}
.metric::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s var(--ease);
}
.metrics.is-in .metric::after{transform:scaleX(1)}
.metrics.is-in .metric:nth-child(2)::after{transition-delay:.12s}
.metrics.is-in .metric:nth-child(3)::after{transition-delay:.24s}
.metrics.is-in .metric:nth-child(4)::after{transition-delay:.36s}
.metric b{font-variant-numeric:tabular-nums}

/* --- mission glow breathes --- */
.mission__glow{animation:breathe 9s ease-in-out infinite}
/* centring is done with the `translate` property, so only scale here */
@keyframes breathe{
  0%,100%{opacity:.75;transform:scale(1)}
  50%{opacity:1;transform:scale(1.10)}
}

/* --- editions: number-free hover lift --- */
.edition{transition:background .4s var(--ease)}
.edition:hover{background:var(--bg-lift)}

@media(prefers-reduced-motion:reduce){
  .nav,.hero__logo,.hero h1 .w,.hero__sub,.hero__scroll{
    opacity:1 !important;transform:none !important;transition:none !important;
  }
  .hero__field,.mission__glow{animation:none !important}
  .event__hero > img{transform:none !important}
  .metric::after{transform:scaleX(1) !important}
}

/* ============================================================
   HERO / UPPER SECTION — background sequence, kicker, marquee
   ============================================================ */

.hero__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}


/* --- cross-fading photo sequence: stands in for a background film ---
   The showreel lives in its own .reel band further down the page. */
.hero__seq{position:absolute;inset:0}
.hero__seq img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.hero__seq img{filter:grayscale(.5) contrast(1.08) brightness(.34)}
.hero__seq img{opacity:0;animation:seq 32s cubic-bezier(.4,0,.2,1) infinite}
.hero__seq img:nth-child(1){animation-delay:0s}
.hero__seq img:nth-child(2){animation-delay:8s}
.hero__seq img:nth-child(3){animation-delay:16s}
.hero__seq img:nth-child(4){animation-delay:24s}
@keyframes seq{
  0%   {opacity:0;transform:scale(1.04)}
  5%   {opacity:1}
  25%  {opacity:1}
  30%  {opacity:0;transform:scale(1.15)}
  100% {opacity:0;transform:scale(1.15)}
}

/* keeps the headline legible over whatever is moving underneath */
.hero__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(88% 68% at 50% 42%,rgba(14,14,14,.58),rgba(14,14,14,.90) 72%),
    linear-gradient(180deg,rgba(14,14,14,.92) 0%,rgba(14,14,14,.28) 34%,rgba(14,14,14,.70) 74%,var(--bg) 100%);
}

.hero__inner{z-index:2}

/* --- kicker above the headline --- */
.hero__kicker{
  font-family:var(--label);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-mid);margin:0 0 clamp(16px,2.1vw,24px);
  opacity:0;transform:translateY(10px);
  transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s;
}
.hero__kicker i{font-style:normal;color:var(--accent);margin:0 .55em}
.is-lit .hero__kicker{opacity:1;transform:none}


.hero__scroll{bottom:34px}

@media(max-width:760px){
  .hero__scroll{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero__seq img{animation:none;opacity:0;transform:none}
  .hero__seq img:nth-child(1){opacity:1}
  .hero__kicker{opacity:1 !important;transform:none !important}
}

/* the kicker is a single 46-character line — let it stay one line on phones */
@media(max-width:560px){
  .hero__kicker{font-size:9.5px;letter-spacing:.13em}
  .hero__kicker i{margin:0 .4em}
}

/* ============================================================
   GALLERY + TILES
   Every column carries the SAME multiset of aspect ratios (rotated), so
   all three columns are exactly the same height and the grid ends flush.
   Depth comes from moving the IMAGE INSIDE its frame, never the frame —
   that keeps the bottom edge clean while still parallaxing.
   ============================================================ */
.gallery{padding-bottom:clamp(90px,13vw,190px)}
.gallery__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.5vw,22px);
  padding-inline:clamp(12px,2.2vw,34px);
  align-items:start;
}
.gallery__col{display:flex;flex-direction:column;gap:clamp(12px,1.5vw,22px)}

/* --- the tile --- */
.tile{
  position:relative;margin:0;overflow:hidden;border-radius:12px;
  aspect-ratio:var(--ar,4/3);background:#0a0a0b;isolation:isolate;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.05s var(--ease),transform .55s var(--ease);
  transition-delay:calc(var(--n,0) * .085s);
}
.tile.is-in{clip-path:inset(0 0 0 0)}

/* the image is taller than its frame so it has room to travel */
.tile img,.tile video{
  position:absolute;left:0;top:-10%;width:100%;height:120%;
  object-fit:cover;display:block;
  transform:translate3d(0,var(--ty,0%),0) scale(var(--sc,1.16));
  filter:grayscale(.32) brightness(.9);
  transition:transform 1.3s var(--ease),filter .75s var(--ease);
  transition-delay:calc(var(--n,0) * .085s);
}
.tile.is-in img,.tile.is-in video{--sc:1}

/* --- hover: settle forward, come into full colour, catch the light --- */
@media(hover:hover) and (pointer:fine){
  .tile:hover{transform:translateY(-5px)}
  .tile:hover img,.tile:hover video{
    --sc:1.07;filter:grayscale(0) brightness(1.04);
    transition-delay:0s;transition-duration:.6s;
  }
  /* a single sheen that crosses the tile once on hover */
  .tile::before{
    content:"";position:absolute;inset:-20% -60%;z-index:2;pointer-events:none;
    background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);
    transform:translateX(-70%);opacity:0;
    transition:transform 1s var(--ease),opacity .3s;
  }
  .tile:hover::before{transform:translateX(70%);opacity:1}
}

@media(max-width:900px){ .gallery__grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .gallery__grid{grid-template-columns:1fr;padding-inline:var(--gut)} }

/* --- DDX photography strip --- */
.ddxshots{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.3vw,18px);margin-top:clamp(18px,2.4vw,28px);
}
@media(max-width:900px){ .ddxshots{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   DDX CITIES
   ============================================================ */
.head--wide h2{max-width:22ch}
.head--wide p{max-width:56ch}

/* Spacing is in em so it scales with the type: the separator gap and the gap
   between cities are one and the same, which keeps the line reading as a
   single typographic block rather than a spaced-out list. */
.cities ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:baseline;
  column-gap:.34em;row-gap:.22em;
}
.cities li{
  display:inline-flex;align-items:baseline;gap:.34em;
  font-size:clamp(2rem,5.4vw,4.6rem);font-weight:680;letter-spacing:-.045em;
  line-height:1.1;color:var(--ink);
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--ease),transform .7s var(--ease),color .35s var(--ease);
  transition-delay:calc(var(--c,0) * .07s);
}
.cities.is-in li{opacity:1;transform:none}
/* .is-rowend is set in JS on whichever city ends a visual row, so a separator
   dot never dangles at a line break (CSS alone can't detect wrap points). */
.cities li.is-rowend::after{display:none}
.cities li:not(:last-child)::after{
  content:"";width:.11em;height:.11em;border-radius:50%;
  background:var(--accent);flex:none;translate:0 -.3em;opacity:.85;
}
@media(hover:hover) and (pointer:fine){
  .cities li:hover{color:var(--accent)}
}

.cities__note{
  margin-top:clamp(22px,3vw,36px);
  font-family:var(--label);font-size:11.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-mid);
}
.cities__note::before{
  content:"";display:inline-block;width:22px;height:1px;
  background:var(--accent);vertical-align:middle;margin-right:12px;
}
.cities .btn{margin-top:clamp(24px,3vw,36px)}

@media(prefers-reduced-motion:reduce){
  .tile{clip-path:none !important;transform:none !important}
  .tile img{--sc:1 !important;transform:none !important}
  .cities li{opacity:1 !important;transform:none !important}
}


/* ============================================================
   BUTTON
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--label);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:15px 26px;
  transform:translate(var(--mx,0px),var(--my,0px));
  transition:border-color .35s var(--ease),color .35s var(--ease),background .35s var(--ease),
             transform .5s var(--ease);
}
.btn--primary{border-color:rgba(0,255,215,.5);color:var(--accent)}
.btn--primary:hover{background:var(--accent);color:#06110f;border-color:var(--accent)}
.btn svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.btn:hover svg{transform:translateX(5px)}


/* ============================================================
   REVEAL — every element animates in
   JS tags eligible elements with [data-rv] and gives each one an
   index within its section, so each block cascades rather than
   the whole section appearing at once.
   ============================================================ */
[data-rv]{
  opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--ease),transform .95s var(--ease);
  transition-delay:calc(var(--n,0) * .07s);
}
[data-rv].is-in{opacity:1;transform:none}

/* headings get a touch more travel so they lead the cascade */
h2[data-rv],blockquote[data-rv]{transform:translateY(26px)}
/* framed media wipes rather than slides */
.reel__frame[data-rv]{transform:none;opacity:1;clip-path:none}
.event__hero[data-rv]{
  transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease),opacity .6s var(--ease);
}
.event__hero[data-rv].is-in{clip-path:inset(0 0 0 0)}

/* the city strip under the metrics is a supporting line, not a headline */
.cities--strip{margin-top:clamp(28px,3.6vw,44px)}
/* sized so all seven names fit one line inside the 1320px wrap at desktop:
   44 characters of Archivo at ~.55em + six gaps must stay under ~1176px */
.cities--strip li{font-size:clamp(1.3rem,2.7vw,2.2rem);font-weight:640}
.ddxcta{margin-top:clamp(30px,4vw,48px)}

@media(prefers-reduced-motion:reduce){
  [data-rv]{opacity:1 !important;transform:none !important;clip-path:none !important}
}


/* ============================================================
   SHOWREEL
   The clip is the subject here rather than a backdrop, so it keeps
   almost all of its own light — only a whisper of grade so it sits
   on the dark page. Measured mean luma is ~66, i.e. naturally dark
   already; no heavy darkening needed.
   ============================================================ */
.reel{padding-top:clamp(40px,6vw,80px)}
.reel .head{margin-bottom:clamp(20px,2.6vw,32px)}

.reel__frame{
  position:relative;margin:0;overflow:hidden;
  border-radius:16px;border:1px solid var(--line-soft);
  background:#0a0a0b;aspect-ratio:16/9;isolation:isolate;
}
/* older WebKit without aspect-ratio would otherwise collapse the frame to 0px */
@supports not (aspect-ratio:16/9){ .reel__frame{height:0;padding-top:56.25%} }

/* the reveal wipe is an overlay that slides away — the video is NEVER under a
   clip-path, which WebKit has been known not to paint at all */
.reel__frame::after{
  content:"";position:absolute;inset:0;z-index:4;background:var(--bg);
  transform:translateY(0);transition:transform 1.15s var(--ease);pointer-events:none;
}
.reel__frame.is-in::after{transform:translateY(-101%)}

.reel__poster,.reel__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.reel__poster{z-index:1;filter:contrast(1.04) saturate(.92)}
.reel__video{
  z-index:2;opacity:0;transition:opacity .6s var(--ease);
  filter:contrast(1.04) saturate(.92);transform:scale(1.01);
}
/* the video only covers the poster once it is genuinely playing */
.reel__frame.is-playing .reel__video{opacity:1}

.reel__play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:3;
  display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  font-family:var(--label);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:rgba(14,14,14,.55);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:14px 22px 14px 16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .35s var(--ease),background .3s,border-color .3s,scale .3s var(--ease);
}
.reel__play svg{width:18px;height:18px;fill:currentColor}
.reel__play:hover{background:var(--accent);color:#06110f;border-color:var(--accent)}
.reel__frame.is-playing .reel__play{opacity:0;pointer-events:none}

@media(prefers-reduced-motion:reduce){
  .reel__frame::after{display:none}
  .reel__video{transition:none}
}

/* ============================================================
   CAREERS — one live role + one open application
   ============================================================ */
.jobs__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(14px,1.8vw,24px);align-items:stretch;
}
@media(max-width:820px){ .jobs__grid{grid-template-columns:1fr} }

.job{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:clamp(26px,3.4vw,44px);
  border:1px solid var(--line-soft);border-radius:16px;
  background:var(--bg-card);
  transition:border-color .45s var(--ease),background .45s var(--ease),transform .45s var(--ease);
}
.job:hover{border-color:rgba(0,255,215,.35);background:var(--bg-lift);transform:translateY(-4px)}

/* the open application is the softer of the two — dashed, unfilled */
.job--open{background:transparent;border-style:dashed}
.job--open:hover{background:rgba(255,255,255,.02)}

.job__meta{
  list-style:none;margin:0 0 clamp(16px,2vw,22px);padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.job__meta li{
  font-family:var(--label);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-mid);border:1px solid var(--line);border-radius:999px;padding:6px 12px;
}
.job--open .job__meta li{color:var(--ink-low)}

.job h3{
  font-size:clamp(1.5rem,2.6vw,2.15rem);font-weight:650;letter-spacing:-.032em;line-height:1.08;
}
.job p{
  margin-top:14px;color:var(--ink-mid);font-size:1rem;line-height:1.7;max-width:44ch;
}
/* the gap lives on the paragraph; margin-top:auto pins the button to the bottom
   so both cards' buttons align however long the copy runs */
.job p{margin-bottom:clamp(24px,3vw,34px)}
.job .btn{margin-top:auto}


/* ============================================================
   REPOSITIONING — think tank first
   ============================================================ */

/* --- hero kicker: the city rotates ---
   Fixed width so the centred line does not jump between "Dubai" and
   "San Diego"; the word slides out upward and the next one in from below. */
.rot{
  display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;
  height:1.25em;line-height:1.25em;min-width:9.4ch;text-align:left;
  color:var(--accent);
}
.rot__w{
  display:inline-block;
  transition:transform .46s var(--ease),opacity .32s var(--ease);
}
.rot__w.out{transform:translateY(-100%);opacity:0}
.rot__w.pre{transition:none;transform:translateY(100%);opacity:0}

/* --- cities: live local time under each name --- */
.cities li{flex-direction:column;align-items:flex-start;gap:0}
.cities li .city__name{display:block}
.cities li:not(:last-child)::after{display:none}      /* the clock is the separator now */
.city__time{
  display:block;margin-top:.12em;
  font-family:var(--label);font-size:clamp(10px,.75vw,12px);font-weight:400;
  letter-spacing:.14em;color:var(--ink-low);font-variant-numeric:tabular-nums;
  transition:color .35s var(--ease);
}
.cities li:hover .city__time{color:var(--accent)}
.cities--strip ul{column-gap:clamp(18px,2.6vw,38px);row-gap:.5em;align-items:flex-start}

/* --- explorations grid --- */
.explore{border-top:1px solid var(--line-soft)}
.explore__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  margin-bottom:clamp(30px,4vw,48px);
}
@media(max-width:820px){ .explore__grid{grid-template-columns:1fr} }
.ex{
  position:relative;background:var(--bg);padding:clamp(26px,3.4vw,44px);
  transition:background .45s var(--ease);
}
.ex:hover{background:var(--bg-lift)}
.ex__n{
  font-family:var(--label);font-size:11px;letter-spacing:.2em;color:var(--ink-low);
  display:block;margin-bottom:clamp(20px,3vw,34px);transition:color .4s var(--ease);
}
.ex:hover .ex__n{color:var(--accent)}
.ex h3{
  font-size:clamp(1.25rem,1.95vw,1.7rem);font-weight:650;letter-spacing:-.03em;
  line-height:1.15;max-width:22ch;
}
.ex p{margin-top:14px;color:var(--ink-mid);font-size:.98rem;line-height:1.68;max-width:46ch}
/* a hairline that draws across the top of a card on hover */
.ex::before{
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease);
}
.ex:hover::before{transform:scaleX(1)}

/* --- contact: DDX first, email demoted --- */
.contact__lead{margin-top:18px;color:var(--ink-mid);font-size:1.04rem;line-height:1.7;max-width:46ch}
.contact .btn{margin-top:clamp(24px,3vw,34px)}
.contact__meta a{color:var(--ink-mid);border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.contact__meta a:hover{color:var(--accent);border-color:var(--accent)}
.contact__meta-gap{margin-top:22px}

/* --- headings reveal word by word (JS splits them into .w) --- */
h2.is-split[data-rv],.stance__lead.is-split[data-rv]{opacity:1;transform:none}
h2.is-split .w,.stance__lead.is-split .w{
  display:inline-block;opacity:0;transform:translateY(.55em);
  transition:opacity .7s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * .045s);
}
h2.is-split.is-in .w,.stance__lead.is-split.is-in .w{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .rot__w{transition:none !important}
  h2.is-split .w,.stance__lead.is-split .w{opacity:1 !important;transform:none !important}
  .btn,.nav__cta{transform:none !important}
}

/* ============================================================
   UPCOMING EDITIONS — small tiles under the DDX section, each
   linking to that edition's page on ddxconference.com
   ============================================================ */
.editions{margin-top:clamp(28px,3.6vw,44px)}
.editions__grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
}
.ed{
  display:flex;flex-direction:column;gap:6px;
  background:var(--bg);padding:clamp(18px,2.2vw,26px);min-height:128px;position:relative;
  transition:background .4s var(--ease);
}
.ed:hover{background:var(--bg-lift)}
.ed__when{font-family:var(--label);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-low)}
.ed__city{font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:650;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.ed__go{
  margin-top:auto;display:inline-flex;align-items:center;gap:8px;padding-top:12px;
  font-family:var(--label);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mid);
  transition:color .3s var(--ease);
}
.ed__go svg{width:13px;height:13px;transition:transform .35s var(--ease)}
.ed:hover .ed__go{color:var(--accent)}
.ed:hover .ed__go svg{transform:translateX(4px)}
/* hairline draws across the top on hover, same language as the exploration cards */
.ed::before{
  content:"";position:absolute;left:0;top:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.ed:hover::before{transform:scaleX(1)}
.ed--soon .ed__when{color:var(--accent)}

/* ============================================================
   CITIES — icon/flag, marker hover, live colon
   ============================================================ */

/* topbar: let the page show through a little more */
.nav{background:rgba(14,14,14,.50)}
.nav.is-stuck{background:rgba(14,14,14,.58)}

/* icon above the name: a pin that flips to the country's flag on hover */
.city__icon{display:block;position:relative;width:22px;height:22px;margin-bottom:.4em}
.city__icon svg{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  transition:opacity .38s var(--ease),transform .5s var(--ease);
}
.city__icon .ico-pin{color:var(--ink-low)}
.city__icon .ico-flag{opacity:0;transform:scale(.55) rotate(-25deg)}
.cities li:hover .ico-pin{opacity:0;transform:scale(.55) rotate(25deg)}
.cities li:hover .ico-flag{opacity:1;transform:none}

/* highlighter-marker sweep behind the name on hover; text flips dark on the mark */
.cities li{cursor:default}
.city__name{
  position:relative;display:inline-block;z-index:0;padding:0 .1em;margin-left:-.1em;
  transition:color .3s var(--ease);
}
.city__name::before{
  content:"";position:absolute;z-index:-1;left:-.04em;right:-.04em;top:.14em;bottom:.04em;
  background:var(--accent);border-radius:.1em;opacity:.92;
  transform:scaleX(0) skewX(-9deg);transform-origin:left center;
  transition:transform .42s var(--ease);
}
.cities li:hover .city__name::before{transform:scaleX(1) skewX(-9deg)}
.cities li:hover .city__name{color:#06110f}
.cities li:hover .city__time{color:var(--accent)}

/* the colon ticks once a second so the clocks read as live */
.city__time .blink{display:inline-block;animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .city__time .blink{animation:none}
  .city__icon svg,.city__name::before{transition:none}
}

/* ============================================================
   BLUE — contact + footer surfaces, primary nav action
   (DDX's own palette has no blue: black / white / #FFF204 / neon greens.
    This is a FastForward addition, chosen to sit with the mint accent.)
   ============================================================ */


/* --- headline: Helvetica Neue runs wider than Archivo did — keep it to three lines --- */
.hero h1{max-width:29ch;text-wrap:balance}

/* --- hero kicker: more prominent --- */
.hero__kicker{
  font-size:clamp(12.5px,1.1vw,16px);letter-spacing:.2em;color:var(--ink);
  margin-bottom:clamp(22px,2.6vw,32px);
}
.hero__kicker i{color:var(--accent)}
.rot{font-weight:500;min-width:9.6ch}

/* --- top-right: solid blue, white on hover, always the obvious action --- */
.nav__cta--primary{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 6px 24px rgba(0,255,215,.35)}
.nav__cta--primary:hover{background:#fff;border-color:#fff;color:var(--accent)}

/* --- contact section in blue --- */
.contact{background:var(--accent);border-top:0;position:relative;overflow:hidden;color:#fff}
.contact .wrap{position:relative;z-index:1}
.contact .eyebrow{color:#fff}
.contact .eyebrow::before{background:#fff}
.contact__lead{color:rgba(255,255,255,.82)}
.contact__meta{color:rgba(255,255,255,.78)}
.contact__meta b{color:#fff}
.contact__meta a{color:#fff;border-color:rgba(255,255,255,.4)}
.contact__meta a:hover{color:var(--accent);border-color:var(--accent)}
.contact .btn--primary{background:#fff;border-color:#fff;color:var(--accent)}
.contact .btn--primary:hover{background:var(--accent);border-color:var(--accent);color:#06110f}

/* city tour behind the section: blue-tinted via luminosity blend; only while hovering */
.contact__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.tour__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:grayscale(1) contrast(1.08);mix-blend-mode:luminosity;
  transform:scale(1.04);
  transition:opacity .9s var(--ease),transform 7s linear;
}
.tour__img.is-on{opacity:.62;transform:scale(1.14)}
.contact.is-touring::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,255,215,.55),rgba(0,255,215,.15) 55%,rgba(0,255,215,.6));
}

/* --- footer in blue --- */
.foot{background:var(--accent);border-top:1px solid rgba(255,255,255,.18)}
.foot__in small,.foot__links a{color:rgba(255,255,255,.72)}
.foot__links a:hover{color:#fff}
.foot__in img{opacity:1}

@media(prefers-reduced-motion:reduce){ .tour__img{transition:none} }

/* --- cities are links to their edition pages; the anchor owns the layout --- */
.cities li{display:block;cursor:pointer}
.cities li>a.city{display:flex;flex-direction:column;align-items:flex-start;gap:0;color:inherit;text-decoration:none}
.cities li>a.city:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:4px}

/* marker: straight, no skew */
.city__name::before{transform:scaleX(0) skewX(0);}
.cities li:hover .city__name::before{transform:scaleX(1) skewX(0)}

/* the time in DDX yellow (#FFF204 is DDX's own brand yellow), hover included */
.city__time{color:#FFF204;opacity:.92}
.cities li:hover .city__time{color:#FFF204;opacity:1}
/* landmark icons carry more line detail than the pin did — a touch larger */
.city__icon{width:26px;height:26px}
.foot__credit{opacity:.55}

/* kicker: give the rotating word the same line box as its neighbours so baselines align */
.hero__kicker{line-height:1.3}
.rot{height:1.3em;line-height:1.3em;vertical-align:top}


/* ============================================================
   ONE BLUE — the gradient was tried and rejected; every blue on the
   page is --blue. Mint remains the accent.
   ============================================================ */
.nav__cta--primary{background:var(--accent);border-color:var(--accent);box-shadow:0 6px 24px rgba(0,255,215,.35)}
.nav__cta--primary:hover{background:#fff;border-color:#fff;color:var(--accent)}
.contact{background:var(--accent)}
.contact.is-touring::after{background:linear-gradient(90deg,rgba(0,255,215,.55),rgba(0,255,215,.15) 55%,rgba(0,255,215,.55))}
.foot{background:var(--accent)}

/* small text in Helvetica Neue reads best with a touch more air */
.btn,.nav__cta{letter-spacing:.18em}
.eyebrow{letter-spacing:.24em}
.city__time{font-variant-numeric:tabular-nums;letter-spacing:.16em}

/* --- kicker city: pulses as well as switching ---
   glow on the word, scale on its box — neither touches the transform/opacity
   the slide transition uses, so they don't fight */
.rot{animation:rotPulse 1.8s ease-in-out infinite;transform-origin:center}
@keyframes rotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.rot__w{animation:rotGlow 1.8s ease-in-out infinite}
@keyframes rotGlow{0%,100%{text-shadow:0 0 0 rgba(0,255,215,0)}50%{text-shadow:0 0 18px rgba(0,255,215,.85),0 0 2px rgba(0,255,215,.9)}}

/* --- city photo behind the positioning section while a city is hovered --- */
.stance{position:relative;overflow:hidden}
.stance>.wrap{position:relative;z-index:1}
.cityfx{position:absolute;inset:0;z-index:0;pointer-events:none}
.cityfx img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;filter:grayscale(.55) brightness(.5) contrast(1.06);transform:scale(1.06);
  transition:opacity .8s var(--ease),transform 8s linear;
}
.cityfx img.is-on{opacity:.55;transform:scale(1.14)}
.cityfx::after{                              /* the gradient tints the photo so it reads as the same blue family */
  content:"";position:absolute;inset:0;background:var(--accent);mix-blend-mode:color;
  opacity:0;transition:opacity .8s var(--ease);
}
.stance.is-cityfx .cityfx::after{opacity:.6}

/* --- edition tiles reveal their city inside the tile --- */
.ed{overflow:hidden}
.ed>span{position:relative;z-index:1}
.ed__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:0;filter:grayscale(.5) brightness(.5) contrast(1.06);transform:scale(1.06);
  transition:opacity .6s var(--ease),transform 6s linear;
}
.ed:hover .ed__bg{opacity:.5;transform:scale(1.12)}

@media(prefers-reduced-motion:reduce){
  .rot,.rot__w{animation:none}
  .cityfx img,.ed__bg{transition:opacity .3s;transform:none}
}

/* --- headline measure: `balance` was shortening every line to equalise them (~750px in
   an 1176px column). `pretty` avoids orphans without doing that; the hero column also
   gets a little more room than the body grid. --- */
.hero__inner{max-width:1420px}
.hero h1{max-width:33ch;text-wrap:pretty}

/* --- edition tiles: same gradient tint as the strip, and a lighter grade, so night
   skylines (Tokyo, San Diego) still register against the dark tile --- */
.ed__bg{filter:grayscale(.5) brightness(.68) contrast(1.08)}
.ed:hover .ed__bg{opacity:.62}
.ed::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--accent);mix-blend-mode:color;opacity:0;transition:opacity .6s var(--ease);
}
.ed:hover::after{opacity:.65}

/* ============================================================
   GENTLER REVEALS + CHEVRON + TRANSPARENT METRICS
   ============================================================ */

/* a small chevron for every city; the flag still takes over on hover */
.city__icon{width:16px;height:16px;margin-bottom:.45em}
.city__icon .ico-pin{color:var(--ink-mid)}

/* the section keeps its own colour; the photo only breathes in behind it */
.cityfx img{transition:opacity 1.3s var(--ease),transform 10s linear}
.cityfx img.is-on{opacity:.2}
.stance.is-cityfx .cityfx::after{opacity:.22}

.ed__bg{transition:opacity 1s var(--ease),transform 8s linear}
.ed:hover .ed__bg{opacity:.24}
.ed:hover::after{opacity:.3}

.tour__img{transition:opacity 1.3s var(--ease),transform 8s linear}
.tour__img.is-on{opacity:.3}
.contact.is-touring::after{background:linear-gradient(90deg,rgba(0,255,215,.35),rgba(0,255,215,.1) 55%,rgba(0,255,215,.35))}

/* metrics: transparent cells so the photo shows through them too.
   The grid lines used to be the container showing through 1px gaps between
   opaque cells — with transparent cells they'd vanish, so draw them as borders. */
.metrics{background:transparent;gap:0;border:1px solid var(--line-soft)}
.metric{background:transparent;border-right:1px solid var(--line-soft)}
.metric:last-child{border-right:0}
@media(max-width:900px){
  .metric:nth-child(2){border-right:0}
  .metric:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}


/* ============================================================
   ONE COLOUR — the mint accent folds into the blue.
   #00FFD7 on near-black is ~2.4:1, below the 4.5:1 small text needs,
   so accent *text* becomes neutral with the blue on lines, chips and
   fills instead. The clocks stay DDX yellow by request.
   ============================================================ */
:root{--accent:#00FFD7;--accent-dim:rgba(0,255,215,.16)}

.eyebrow{color:var(--ink-mid)}                          /* rule line stays blue via ::before */
.ed--soon .ed__when{color:#fff}
.ex:hover .ex__n{color:#fff}
.stance__lead b{color:#fff;border-bottom:3px solid var(--accent);padding-bottom:.02em}
.mission blockquote em{color:#fff;border-bottom:3px solid var(--accent)}

/* rotating city: white on a blue chip — prominent and legible */
.rot{background:var(--accent);color:#fff;padding:0 .55em;border-radius:.32em;min-width:0}
.rot__w{color:#fff}

/* marker sweep is blue now, so the name goes white on it */
.cities li:hover .city__name{color:#fff}

/* hovers fill blue with white text rather than turning small text blue */
.btn:hover,.nav__cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.nav__cta--primary:hover{background:#fff;border-color:#fff;color:var(--accent)}
.contact .btn--primary:hover{background:transparent;border-color:#fff;color:#fff}
.job:hover{border-color:rgba(0,255,215,.55)}

/* ============================================================
   GALLERY TINT — blue duotone at rest, full colour on hover
   ============================================================ */
.tile img,.tile video{filter:grayscale(.9) brightness(.8) contrast(1.06)}
.tile::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--accent);mix-blend-mode:color;opacity:.5;
  transition:opacity .7s var(--ease);
}
@media(hover:hover) and (pointer:fine){
  .tile:hover img,.tile:hover video{filter:none;--sc:1.07;transition-delay:0s;transition-duration:.6s}
  .tile:hover::after{opacity:0}
}

/* chip: centre the word vertically whatever the kicker's line-height is */
.rot{display:inline-flex;align-items:center;justify-content:center;height:1.55em;line-height:1;vertical-align:middle;padding:0 .6em}
.rot__w{line-height:1}

/* gallery tone, dialled back: a hint of the blue, not a duotone */
.tile img,.tile video{filter:grayscale(.4) brightness(.9) contrast(1.03)}
.tile::after{opacity:.16}


/* ============================================================
   ONE COLOUR — TURQUOISE. The blue was tried and the user preferred
   the original turquoise. On the dark page it reads ~14:1, so accent
   text is fine again; on turquoise *surfaces* text must be dark.
   ============================================================ */
:root{--accent:#00FFD7;--accent-dim:rgba(0,255,215,.14);--on-accent:#06110f}

/* accent text restored on dark */
.eyebrow{color:var(--accent)}
.ed--soon .ed__when{color:var(--accent)}
.ex:hover .ex__n{color:var(--accent)}
.stance__lead b{color:var(--accent);border-bottom:0;padding-bottom:0}
.mission blockquote em{color:var(--accent);border-bottom:0}

/* turquoise surfaces → dark text */
.rot{background:var(--accent);color:var(--on-accent)}
.rot__w{color:var(--on-accent)}
.cities li:hover .city__name{color:var(--on-accent)}
.nav__cta--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:0 6px 24px rgba(0,255,215,.28)}
.nav__cta--primary:hover{background:#fff;border-color:#fff;color:var(--on-accent)}
.btn:hover,.nav__cta:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.contact{background:var(--accent);color:var(--on-accent)}
.contact .eyebrow{color:var(--on-accent)}
.contact .eyebrow::before{background:var(--on-accent)}
.contact h2{color:var(--on-accent)}
.contact__lead{color:rgba(6,17,15,.78)}
.contact__meta{color:rgba(6,17,15,.75)}
.contact__meta b{color:var(--on-accent)}
.contact__meta a{color:var(--on-accent);border-color:rgba(6,17,15,.35)}
.contact__meta a:hover{color:var(--on-accent);border-color:var(--on-accent)}
.contact .btn--primary{background:var(--on-accent);border-color:var(--on-accent);color:var(--accent)}
.contact .btn--primary:hover{background:#fff;border-color:#fff;color:var(--on-accent)}
.contact.is-touring::after{background:linear-gradient(90deg,rgba(0,255,215,.45),rgba(0,255,215,.12) 55%,rgba(0,255,215,.45))}

.foot{background:var(--accent);border-top:1px solid rgba(6,17,15,.18)}
.foot__in small,.foot__links a{color:rgba(6,17,15,.72)}
.foot__links a:hover{color:var(--on-accent)}
.foot__in img{filter:brightness(0);opacity:.9}     /* the white mark would vanish on turquoise */

/* ============================================================
   BOTTOM OF PAGE IN WHITE; gallery tint down to barely-there
   ============================================================ */
.tile img,.tile video{filter:grayscale(.22) brightness(.95) contrast(1.02)}
.tile::after{opacity:.07}

.contact{background:#fff;color:var(--on-accent)}
.contact .eyebrow{color:var(--on-accent)}
.contact .eyebrow::before{background:var(--accent)}          /* the accent stays as a line, not a surface */
.contact .btn--primary{background:var(--on-accent);border-color:var(--on-accent);color:var(--accent)}
.contact .btn--primary:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.contact__meta a{border-color:rgba(6,17,15,.3)}
.contact.is-touring::after{background:linear-gradient(90deg,rgba(0,255,215,.2),rgba(0,255,215,.05) 55%,rgba(0,255,215,.2))}
.tour__img.is-on{opacity:.22}                                /* luminosity over white = a soft grey photo */

.foot{background:#fff;border-top:1px solid rgba(6,17,15,.12)}
.foot__in small,.foot__links a{color:rgba(6,17,15,.7)}

/* kicker city: quicker pulse (1.8s felt slow) */
.rot,.rot__w{animation-duration:1.1s}

/* ============================================================
   CITY STRIP — pulse by transparency, no colour on hover
   ============================================================ */
.rot{animation:rotFade 1.1s ease-in-out infinite;transform:none}
@keyframes rotFade{0%,100%{opacity:1}50%{opacity:.5}}
.rot__w{animation:none;text-shadow:none}

.city__name::before{display:none}                    /* the colour marker is gone */
.cities li:hover .city__name{color:#fff}             /* stays white on black */
.stance.is-cityfx .cityfx::after{opacity:0}          /* photo breathes in neutral, no tint */
.ed:hover::after{opacity:0}                          /* same for the edition tiles */

@media(prefers-reduced-motion:reduce){ .rot{animation:none;opacity:1} }

/* gallery: back to the original tone — 32% desaturation, no colour overlay at all */
.tile img,.tile video{filter:grayscale(.32) brightness(.9)}
.tile::after{display:none}

/* top-right primary: WHITE on hover. Higher specificity than the generic
   .nav__cta:hover so it can't be out-ordered by later appends again. */
.nav__actions .nav__cta--primary:hover{background:#fff;border-color:#fff;color:var(--on-accent);box-shadow:0 6px 24px rgba(255,255,255,.18)}

/* kicker city: no chip — plain accent text, still pulsing by opacity */
.rot{background:transparent;padding:0;border-radius:0;color:var(--accent);min-width:9.6ch;justify-content:flex-start}
.rot__w{color:var(--accent)}


/* ============================================================
   TRUST — who joins DDX (two logo composites from ddxconference.com)
   ============================================================ */
.trust{border-top:1px solid var(--line-soft)}
.head--center{margin-inline:auto;text-align:center}
.head--center h2,.head--center p{margin-inline:auto}
.head--center .eyebrow{justify-content:center}
.trust__wall{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,40px);--sx:50%;--sy:50%}
.trust__panel{margin:0;position:relative}
.trust__panel img{display:block;width:100%;height:auto;mix-blend-mode:screen;opacity:.82;transition:opacity .6s var(--ease)}
.trust__wall:hover .trust__panel img{opacity:1}
/* reveal: each wall wipes in left to right, the second a beat later */
.trust__panel[data-rv]{
  opacity:1;transform:none;
  -webkit-mask:linear-gradient(90deg,#000 45%,transparent 60%) 100% 0/280% 100% no-repeat;
          mask:linear-gradient(90deg,#000 45%,transparent 60%) 100% 0/280% 100% no-repeat;
  transition:-webkit-mask-position 1.6s var(--ease),mask-position 1.6s var(--ease);
  transition-delay:calc(var(--n,0) * .16s);
}
.trust__panel[data-rv].is-in{-webkit-mask-position:0 0;mask-position:0 0}
/* cursor spotlight, screen-blended so it lifts the marks rather than painting over them */
.trust__wall::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(340px circle at var(--sx) var(--sy),rgba(0,255,215,.18),transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .5s var(--ease);
}
.trust__wall:hover::after{opacity:1}
@media(max-width:720px){
  .trust__wall{grid-template-columns:1fr;gap:0}
  .trust__panel img{opacity:.9}
}
@media(prefers-reduced-motion:reduce){
  .trust__panel[data-rv]{-webkit-mask:none;mask:none}
  .trust__wall::after{display:none}
}
/* trust: blend on the masked figure itself (the mask isolates it, so an img blend
   inside would only meet a transparent group); centred head gets a wider measure */
.trust__panel{mix-blend-mode:screen;opacity:.82;transition:opacity .6s var(--ease),-webkit-mask-position 1.6s var(--ease),mask-position 1.6s var(--ease)}
.trust__panel img{mix-blend-mode:normal;opacity:1;transition:none}
.trust__wall:hover .trust__panel{opacity:1}
.trust__panel[data-rv]{transition:opacity .6s var(--ease),-webkit-mask-position 1.6s var(--ease),mask-position 1.6s var(--ease)}
.head--center.head--wide h2{max-width:32ch}
@media(max-width:720px){.trust__panel{opacity:.9}}
/* centred head: the generic .head is capped at 64ch, which forced four lines here */
.head--center{max-width:min(100%,1120px)}
.head--center.head--wide h2{max-width:36ch;text-wrap:balance}
/* trust: JPEG blacks are not a true 0 and screen-blend lifts them a hair above the page —
   a touch of contrast crushes them to black; the white marks are already clipped at 255 */
.trust__panel img{filter:contrast(1.22)}

/* trust: no mouse effects; walls sit flush so the composites' own margins set the spacing */
.trust__wall{gap:0}
.trust__wall::after{display:none}
.trust__panel,.trust__wall:hover .trust__panel{opacity:.9}
@media(max-width:720px){.trust__wall{gap:0}}