/* =============================================================
   EMOCEANS — brand site
   Colours, type and gradient per Emoceans Brand Style Guide v1.0
   ============================================================= */

/* ---------- BRAND TYPEFACE ----------------------------------
   Avant Garde LT is the brand face, set in Book and Medium only.
   Drop the two licensed webfont files into files/fonts/ and these
   @font-face rules pick them up automatically. Until then the stack
   falls through to a geometric substitute (Jost), substitute only.
------------------------------------------------------------- */
@font-face{
  font-family:"Avant Garde LT";
  src:local("ITC Avant Garde Gothic Std Book"),local("AvantGardeLT-Book"),
      url("../files/fonts/AvantGardeLT-Book.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Avant Garde LT";
  src:local("ITC Avant Garde Gothic Std Medium"),local("AvantGardeLT-Medium"),
      url("../files/fonts/AvantGardeLT-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
/* Only Book (400) and Medium (500) are used. Nothing on the page asks for a
   heavier weight, so the browser never has to synthesise Demi or Bold. */

:root{
  /* Core palette */
  --black:#000000;
  --white:#FFFFFF;
  --grey-1:#F1F1F1;      /* panels / section backgrounds */
  --grey-2:#D9D9D9;      /* rules, dividers */
  --grey-mid:#8C8C8C;    /* captions, source notes */
  --crimson:#ED203D;     /* accent only */
  --wine:#3B0A1A;        /* gradient start */

  --ink:#000000;
  --ink-soft:#2a2a2a;

  --font:"Avant Garde LT","ITC Avant Garde Gothic Std",Jost,"Century Gothic",
         "URW Gothic",Futura,-apple-system,Helvetica,Arial,sans-serif;

  --pad:clamp(20px,5vw,80px);
  --gutter:clamp(24px,4vw,64px);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100vh;}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,h4,p,ul{margin:0;}
ul{padding:0;list-style:none;}
::selection{background:var(--crimson);color:var(--white);}

:focus-visible{outline:2px solid var(--crimson);outline-offset:4px;}

/* =============================================================
   TYPE SCALE  — Avant Garde LT Book (400) and Medium (500) only.
   Headlines and stats are Medium, body copy is Book. Tracking does
   the work that weight used to.
   ============================================================= */
.display{
  font-size:clamp(2.1rem,6.2vw,5.5rem);
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.02em;
  max-width:15ch;
}
.display--sm{font-size:clamp(1.9rem,4.6vw,3.9rem);max-width:18ch;}
.display--light{color:var(--white);}
/* Headlines whose line arrangement is authored with <br>. The ch cap would
   re-wrap those segments into extra lines, so the width comes off the column
   instead and js/main.js scales the type down until the longest authored line
   fits it. The lines then hold that arrangement at every width. */
.display--breaks{max-width:none;}
.display--breaks .line__in{white-space:nowrap;}
.display--grad,
.display--grad .line__in,
.display--grad .word__in{
  background:linear-gradient(115deg,var(--wine) 0%,var(--crimson) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* Multi-line headlines deepen on the early lines. Every ramp ends on the
   crimson side rather than in burgundy, and the LAST line — whatever the line
   count — resolves to full-strength #ED203D, as the guide requires. */
.display--grad .line:nth-child(1) .line__in{background-image:linear-gradient(115deg,#3B0A1A,#A5152B);}
.display--grad .line:nth-child(2) .line__in{background-image:linear-gradient(115deg,#6B0E21,#CF1B36);}
.display--grad .line:nth-child(3) .line__in{background-image:linear-gradient(115deg,#8E1128,#ED203D);}
.display--grad .line:nth-child(n+4) .line__in{background-image:linear-gradient(115deg,#B8182F,#ED203D);}
.display--grad .line:last-child .line__in{background-image:linear-gradient(115deg,#8E1128,#ED203D);}
/* A headline that ends up on a single line carries the whole ramp on its own:
   #3B0A1A at 0%, #ED203D at 100% — the two stops the guide names on p.4. */
.display--grad .line:first-child:last-child .line__in{background-image:linear-gradient(115deg,#3B0A1A,#ED203D);}
.lead{
  font-size:clamp(1.05rem,1.5vw,1.4rem);
  line-height:1.5;
  font-weight:500;
}
p{font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.75;}
/* keeps a single short word from being left alone on the last line */
p,.lead,.sometimes li,.acc__q span{text-wrap:pretty;}
b,strong{font-weight:500;}

.eyebrow{
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;
  font-weight:500;color:var(--grey-mid);
}
.eyebrow--light{color:rgba(255,255,255,.55);}

/* section index marker: 01 [ About ] */
.index{
  display:flex;align-items:center;gap:.9rem;
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--grey-mid);font-weight:500;
  padding-bottom:clamp(28px,5vw,64px);
  border-bottom:1px solid var(--grey-2);
  margin-bottom:clamp(36px,6vw,84px);
}
.index span{color:var(--crimson);font-weight:500;letter-spacing:.1em;}
.index i{font-style:normal;color:var(--grey-2);}
.index--light{color:rgba(255,255,255,.5);border-bottom-color:rgba(255,255,255,.14);}
.index--light i{color:rgba(255,255,255,.25);}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn{
  --bg:var(--black); --fg:var(--white);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.05em 2.1em;border-radius:100px;
  background:var(--bg);color:var(--fg);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  overflow:hidden;isolation:isolate;
  transition:color .4s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--crimson);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover::after{transform:translateY(0);}
.btn:hover{color:var(--white);}
.btn--sm{padding:.85em 1.6em;font-size:.68rem;}
.btn--lg{padding:1.25em 2.6em;font-size:.85rem;}
.btn--red{--bg:var(--crimson);}
.btn--red::after{background:var(--black);}
.section--dark .btn{--bg:var(--white);--fg:var(--black);}
.section--dark .btn--red{--bg:var(--crimson);--fg:var(--white);}

/* letter roll (nav + button labels) */
.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top;}
.roll__in{display:block;transition:transform .5s var(--ease);}
.roll__dup{position:absolute;left:0;top:100%;display:block;transition:transform .5s var(--ease);}
a:hover .roll__in,button:hover .roll__in,
.btn:hover .roll__in{transform:translateY(-100%);}
a:hover .roll__dup,button:hover .roll__dup,
.btn:hover .roll__dup{transform:translateY(-100%);}

/* =============================================================
   PRELOADER
   ============================================================= */
.loader{
  position:fixed;inset:0;z-index:200;background:var(--black);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:26px;
  transition:transform 1s var(--ease);
}
.loader.is-done{transform:translateY(-101%);}
.loader__mark{width:clamp(150px,22vw,260px);}
.loader__mark img{width:100%;height:auto;mix-blend-mode:screen;opacity:0;transform:scale(.82);
  animation:markIn 1.4s var(--ease) .1s forwards;}
@keyframes markIn{to{opacity:1;transform:scale(1);}}
.loader__count{
  position:absolute;right:var(--pad);bottom:calc(var(--pad) + 14px);
  color:var(--white);font-size:clamp(2.4rem,7vw,5rem);font-weight:500;
  letter-spacing:-.04em;line-height:1;display:flex;align-items:flex-start;
}
.loader__count i{font-style:normal;font-size:.3em;color:var(--crimson);margin-left:.2em;}
.loader__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.12);}
.loader__bar i{display:block;height:100%;width:0;background:var(--crimson);}

/* =============================================================
   HEADER
   ============================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:var(--gutter);
  padding:22px var(--pad);
  transition:transform .55s var(--ease),background .5s,color .45s,padding .4s;
  color:var(--black);
}
.header.is-hidden{transform:translateY(-105%);}
.header.is-stuck{background:rgba(255,255,255,.86);backdrop-filter:blur(14px);padding:14px var(--pad);}
.header.is-dark{color:var(--white);}
.header.is-dark.is-stuck{background:rgba(0,0,0,.6);}
.header.is-menu{background:transparent!important;backdrop-filter:none;color:var(--white);}
.header__logo{width:clamp(120px,11vw,158px);flex:none;}
.header__logo .wordmark{width:100%;height:auto;}
.header__nav{
  display:flex;gap:clamp(16px,2.4vw,34px);margin-left:auto;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
}
.header__nav a{position:relative;padding:4px 0;}
.header .btn{flex:none;}
.header.is-dark .btn{--bg:var(--white);--fg:var(--black);}

.burger{display:none;width:34px;height:24px;position:relative;flex:none;}
.burger i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:.4s var(--ease);}
.burger i:nth-child(1){top:7px;}
.burger i:nth-child(2){top:15px;}
.burger.is-open i:nth-child(1){top:11px;transform:rotate(45deg);}
.burger.is-open i:nth-child(2){top:11px;transform:rotate(-45deg);}

/* mobile menu */
.menu{
  position:fixed;inset:0;z-index:95;background:var(--black);color:var(--white);
  padding:calc(var(--pad) + 70px) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .8s var(--ease);
  pointer-events:none;
}
.menu.is-open{clip-path:inset(0 0 0 0);pointer-events:auto;}
.menu__nav{display:flex;flex-direction:column;gap:.2em;}
.menu__nav a{
  font-size:clamp(1.8rem,8vw,3rem);font-weight:500;letter-spacing:-.02em;line-height:1.18;
  display:flex;align-items:baseline;gap:.6em;
  opacity:0;transform:translateY(28px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .3s;
}
.menu.is-open .menu__nav a{opacity:1;transform:none;}
.menu__nav a:nth-child(1){transition-delay:.18s;}
.menu__nav a:nth-child(2){transition-delay:.24s;}
.menu__nav a:nth-child(3){transition-delay:.30s;}
.menu__nav a:nth-child(4){transition-delay:.36s;}
.menu__nav a:nth-child(5){transition-delay:.42s;}
.menu__nav a:nth-child(6){transition-delay:.48s;}
.menu__nav a:nth-child(7){transition-delay:.54s;color:var(--crimson);}
.menu__nav em{font-size:.5rem;letter-spacing:.2em;font-style:normal;color:var(--crimson);}
.menu__foot{display:flex;justify-content:space-between;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.45);}
.menu__move{color:var(--crimson);}

/* =============================================================
   SECTION SHELL
   ============================================================= */
.section{padding:clamp(80px,11vw,180px) var(--pad);position:relative;}
.section--light{background:var(--white);}
.section--grey{background:var(--grey-1);}
.section--dark{background:var(--black);color:var(--white);}
.section--dark p{color:rgba(255,255,255,.72);}

/* =============================================================
   HERO
   ============================================================= */
.hero{
  position:relative;min-height:100svh;background:var(--black);color:var(--white);
  padding:calc(var(--pad) + 84px) var(--pad) 0;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
/* The brand device — the supplied Infinity_Icon artwork (images/infinity.jpg),
   sitting behind the hero as the soft crimson gradient glow the guide
   describes. mix-blend-mode:screen drops the artwork's baked-in black away, so
   it composites cleanly rather than sitting in a black box. It is kept low and
   to the right, and at an opacity that keeps it clear of the tagline —
   background motif, never competing with the foreground type. */
.hero__glow{
  position:absolute;top:61%;left:50%;width:min(50vw,620px);
  transform:translate(-50%,-50%);
  opacity:.6;filter:blur(2px);
  pointer-events:none;
}
.hero__glow img{
  width:100%;height:auto;mix-blend-mode:screen;
  animation:markBreathe 16s var(--ease-io) infinite;
  will-change:transform;
}
/* a slow drift and swell — the device reads as alive without pulling focus.
   The wrapper carries the pointer parallax, so the animation sits on the img
   to keep the two transforms from fighting. */
@keyframes markBreathe{
  0%,100%{transform:translate3d(-1.2%,1%,0) scale(.985);opacity:.9;}
  50%    {transform:translate3d(1.2%,-1.6%,0) scale(1.03);opacity:1;}
}
.hero__inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(120px,14vw,170px);}
/* The tagline. One line wherever it fits — js/main.js measures the line and
   sizes it to the column, so it never wraps. If it can no longer be set at a
   legible size on one line, .is-stacked drops each word onto its own line.
   Colour is solid crimson, per brand. */
.hero__title{
  font-size:clamp(2.9rem,10.4vw,8.6rem);
  line-height:1.02;font-weight:500;letter-spacing:-.035em;
  margin:.14em 0 0;text-transform:none;
  color:var(--crimson);
  white-space:nowrap;
}
.hero__title.is-stacked{white-space:normal;word-spacing:100vw;line-height:.98;}
.hero__row{
  margin-top:clamp(26px,3.4vw,46px);
  display:grid;grid-template-columns:1fr auto;gap:var(--gutter);align-items:end;
}
.hero__meta{
  display:flex;flex-direction:column;gap:.85em;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.8);
}
.hero__meta span{color:var(--grey-mid);margin-right:.6em;}
.hero__social{display:flex;gap:1.15em;padding-top:.6em;}
/* Icon links. The marks inherit crimson through currentColor, so the accent
   rule still holds and only opacity moves on hover. */
.hero__social a{color:var(--crimson);display:inline-flex;opacity:.9;
  transition:opacity .4s var(--ease),transform .4s var(--ease);}
.hero__social a:hover{opacity:1;transform:translateY(-2px);}
.hero__social svg{width:19px;height:19px;display:block;}
/* The source PNGs are solid black glyphs on transparency, so they are used as
   alpha masks rather than painted directly - that keeps them off the dark hero
   and lets currentColor tint them crimson, hover included.
   The marks are inlined as data URIs on purpose: mask images are CORS-checked,
   and over file:// the fetch is blocked and the element renders fully
   transparent. Inlining keeps the icons working when index.html is opened
   straight from disk. Re-run the inlining if images/photos/*.png change. */
/* Scoped past `.hero__meta span`, which would otherwise hand the mark
   grey-mid through currentColor. color:inherit takes the link's crimson. */
.hero__social .social-ico{
  width:19px;height:19px;display:block;
  color:inherit;
  background-color:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat;
          mask:var(--ico) center/contain no-repeat;
}
.social-ico--linkedin{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABW0lEQVR4nO2ZvUoDQRRGjyh2/oC2goW+ge+g4C5aikI6S1/BRgJ5EJ/BThP1QewUfxB0U6W5sjCNYXZnZi32jtwDXxPuzH6HzWazCRiG0ZUjYAJMAek5U2AMlKkSIwXlpSHDlDMhylPEiEwUFJVA7mJEKgVFJZDvGBHJJEH6LigmMkfb4hfgBNhwOQPechTZV/RxHaRt8apnfi1HkdIzX+Qo8g4MgE2X+hp5zVFEFCVI3wXFRObosjhl5tHdi7aAZWAF2AMugY8cROob50Hg2OvAjXaRnZiDA0vAg2aRFLaBWQ4iixEz15pFLoBnN/cEnLfMnmoVOU58/t7VKnLfsGf9GwEdvoz2JvLZsGf9uo8FrSJ/3VdMBBPxYiKYCCYiJuJHTIT2xZoS5N+IVApKSiBfMSJjBUUlkNsYkVJBUQnkkEiGCspKQ65IpHD/nmq4Zir3doo+E4Zh8IsfFdRDh8Z3YCsAAAAASUVORK5CYII=");}
.social-ico--instagram{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAADK0lEQVR4nO2ZO09UQRiGnwIVIpddy6UVwViIgp2X2ElMVH4BISp/QAWpvbRGQqnBP6CYWMnitVN7EWxUbAUFhArXfMl7komB3TmX3Tkm+yaTnOz55jvz7nzXGWiiiVygF5gA5oEFYAOoZDRMl+ksA+PAoXoQGAReZLho3zEPDGRBYA8wDfyR4h/AA+CCdmc/2cF0mc6LwEN9q6JvTwEtSRUXgZdS9hu4BXTSOHQCt4FNZ3cKSXYiMqXvMq1QOAp80VreAHvjTJ7WxG9AifAoActa033fSYOySzOnY+QHx2Vm23quicikzCfyhjtam4Xoquh1olMjHTvCefmkmdHQDu+7gBWtsaeaogkJWfgLgWUnh5h/7oQZvb9RTVFZQhbL80pkWO/nqilalFCa8sDyzyjwFPik0mNDz7N6ZzI7YUhkjMS5GuZv+nbFmoQ6EhBoAyaBnx6lxypwE2hN8J0O6bC17oroQ0ni/Adn/nPgilPG2OjTb3OO3PuEeapSa51JiJRkCtF2n/SYc8ox4yRJt5I1kTZnJ17FrIXMT15r7ruYZlbJmsik5BeSFHQiE+2Mhf4gRIqOY/uY02444wSAYggio45jp0WUv0ZCEJmV7GXS46p0PQ5BJLJtC7Fp0eeT5OpFZF2y7aRHu3St/+9EOqXrl6d807SqObuVHWkxFtLZR33KaU/Mhwy/RSUxkz9Ncpx1EmIhdImyGCMru7A5Sz4dX72JtKoUr6gAjEPmAPA2L0Xjv2X8kmonH3P6nKcyPkJJ/2o0v6xIdFh5pl3PY45jRztRl8ZqLUWr26pSfNWz1bWrg331anUXMzh8KCiMPlGfsq6xoN9GEvYusQ4fQh8H+WDYp30YD3xA54NHWuO1PB+Z1oL3kSlOVLFLlrzhbpyudEDXCpu+x/cNwiCwpWuFft9JU2Jux5fdhEe3cy58L87EFsfE7Jj/BOHQD3x1Em3sS9GCQ2ZTlyzmbI1Cl3xiy2kXEuefFt3ZbUvZiu4nLqmry6LNjWC6+pQnZpzotC1zSnw97eII8Myj9Mh6lOsVcHrUN8w55UdWizZdHxVarwMH60GgiSaIh7/0wax6IqjhkwAAAABJRU5ErkJggg==");}
.social-ico--facebook{--ico:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACd0lEQVR4nO2Zv2sUQRTHP+evwigSrCyiAWOpTXpBxcRcCkn8BVrZif+AjUJQSA5Jo4VpbMQiJtrE/CCojZ3YGEQx9nYaE6PRxOJWBp4Qwu7czuzb3Tm4L3zhmn1vPszsm7fvoKWWgtceoArUgGlgEfgO/BWb35+A58AI0CfPBKGKLGgSWAciR/8BJoAzEqsUXQDeeyw+yQvAYJEAR4BXigBb/QLoyhviHLCSI0QkXgUu5wFgzu9QAQDRFtc03x0TaKwEiEj8QAtmpESISHwnK8SlACAi8ZUs1emn0iLMffFQSraJux/YB7QDncBRYLRBjB/AYR8QrRL7EjiQIt/VFLHmXSHOK0HMAjtS5kwDYjyQFqKidGN/kyOEMsi7tFWsT2k3hh0gXEAioDdNwEklkGOWHN3Afcn1328dYo83gtjr2cXGVZjtFoiNjPF/A7ttIFXFTjZJj5Ry9NhAakpJXltyfCniHZxWSjKXEL8iX4saOaZsIJ8V74847VKKH8lnc6KWmgjkqw1ko4lA1rVBBqT522zbdKQ9wXcd85q1JmrZA+Q0Onri0QIlarFEENNDueT9aAs2WxLINmBNs/wOlwRySPvzt98j4HXpnza7y3Ihdsf4mkfeXhuIacR+eQQtuvyuAW2NtvlpE4BMkEI9TQByKg2IOccfAgZZwEFnAwapUuA4KC+QeTzUKVPxUEBWgIN4yjSE9QBA6sBFMup2ACBDKOleiSCjKOuGwzHTAKlr7kTcX2/LBYAsucx4s3SqMzmCTAEdFKh+y5jTB+SNzJ1L03HgsYxJXUFWZfJoYgQjs8iTwE0pDHHaCTwDbgEn5JmWWiJg/QOlYrQmouYwLQAAAABJRU5ErkJggg==");}
.hero__aside{
  max-width:44ch;
  display:flex;flex-direction:column;gap:.9em;
}
.hero__aside p{font-size:clamp(1rem,1.05vw,1.1rem);line-height:1.7;}
.hero__aside p{color:rgba(255,255,255,.72);}
.hero__note b{color:#DC143C;font-weight:500;} /* true crimson, not the brand scarlet */
.hero__scroll{
  position:absolute;left:var(--pad);bottom:clamp(84px,10vw,120px);z-index:3;
  display:flex;align-items:center;gap:12px;
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.6);
}
.hero__scroll i{display:block;width:52px;height:1px;background:rgba(255,255,255,.3);position:relative;overflow:hidden;}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--crimson);
  transform:translateX(-100%);animation:scrollLine 2.4s var(--ease) infinite;}
@keyframes scrollLine{0%{transform:translateX(-100%);}55%{transform:translateX(0);}100%{transform:translateX(100%);}}

/* =============================================================
   MARQUEE
   ============================================================= */
.marquee{position:relative;overflow:hidden;width:100%;}
.marquee--hero{
  position:absolute;bottom:0;left:0;z-index:3;
  border-top:1px solid rgba(255,255,255,.14);
  padding:18px 0;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);
}
.thinking__media{margin:clamp(40px,6vw,80px) 0 0;}
.thinking__media img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:18px;}
.marquee--band{margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);padding:22px 0;}
.marquee__track{
  display:flex;align-items:center;gap:2.4rem;width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee__track--rev{animation-duration:46s;}
.marquee--band .marquee__track span{font-size:clamp(1.3rem,3.4vw,2.6rem);font-weight:500;letter-spacing:-.02em;}
.marquee__track span{
  font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap;font-weight:500;
}
.marquee__track span.is-red{color:var(--crimson);}
.marquee__track em{width:7px;height:7px;border-radius:50%;background:var(--crimson);flex:none;}
@keyframes marquee{to{transform:translateX(-50%);}}
.marquee:hover .marquee__track{animation-play-state:paused;}

/* =============================================================
   01 ABOUT
   ============================================================= */
.about__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter) clamp(40px,6vw,110px);
  margin-top:clamp(40px,6vw,80px);
}
.about__col{display:flex;flex-direction:column;gap:1.2em;align-items:flex-start;}
.about__col p{color:var(--ink-soft);}
.sometimes{display:flex;flex-direction:column;gap:.85em;
  border-left:2px solid var(--grey-2);padding-left:1.4em;}
.sometimes li{font-size:clamp(.95rem,1.05vw,1.05rem);line-height:1.6;color:var(--ink-soft);position:relative;}
.sometimes li:last-child{color:var(--black);font-weight:500;}
.about__punch b{
  font-size:clamp(1.1rem,1.8vw,1.6rem);font-weight:500;
  background:linear-gradient(115deg,var(--wine),var(--crimson));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* =============================================================
   CAPABILITIES BAND — the six service marks, drifting
   ============================================================= */
.band{
  padding:clamp(18px,2.4vw,34px) 0;
  background:var(--white);
  border-top:1px solid var(--grey-2);border-bottom:1px solid var(--grey-2);
  overflow:hidden;
}
.marquee__track--photos{gap:clamp(10px,1.4vw,20px);animation-duration:58s;}
.marquee__track--photos img{
  height:clamp(96px,13vw,190px);width:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:12px;flex:none;
}

/* =============================================================
   02 STRENGTH
   ============================================================= */
.stats{
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin-top:clamp(46px,7vw,90px);
  border-top:1px solid var(--grey-2);
}
.stat{padding:clamp(26px,3vw,42px) clamp(14px,2vw,28px) clamp(20px,3vw,36px);
  border-right:1px solid var(--grey-2);border-bottom:1px solid var(--grey-2);}
.stat:first-child{padding-left:0;}
.stat:last-child{border-right:0;}
.stat__num{
  font-size:clamp(2.6rem,5.4vw,4.4rem);font-weight:500;color:var(--crimson);
  line-height:1;letter-spacing:-.04em;display:flex;align-items:baseline;
}
.stat__num i{font-style:normal;}
.stat h3{margin-top:.7em;font-size:clamp(.95rem,1.1vw,1.1rem);font-weight:500;line-height:1.3;}
.stat p{margin-top:.5em;font-size:.8rem;line-height:1.5;color:var(--grey-mid);}

/* =============================================================
   03 HOW WE WORK — sticky stacked steps
   ============================================================= */
.method__head{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--gutter);align-items:end;}
.method__head .lead{color:var(--ink-soft);}
.steps{margin-top:clamp(48px,7vw,90px);display:grid;grid-auto-rows:1fr;}
.step{position:sticky;top:calc(11vh + 40px);padding-bottom:26px;}
.step__inner{
  position:relative;overflow:hidden;
  background:var(--white);border:1px solid var(--grey-2);
  border-radius:22px;
  padding:clamp(28px,4vw,60px);
  display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,.58fr);
  align-items:center;gap:clamp(24px,3.4vw,52px);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.5);
  height:100%;
}
.step:nth-child(2) .step__inner{background:var(--grey-1);}
.step:nth-child(3) .step__inner{background:var(--black);color:var(--white);border-color:#1a1a1a;}
.step:nth-child(3) .step__inner p{color:rgba(255,255,255,.7);}
.step:nth-child(4) .step__inner{background:var(--black);color:var(--white);border-color:#1a1a1a;}
.step:nth-child(4) .step__inner p{color:rgba(255,255,255,.85);}
.step__no{
  font-size:clamp(1.6rem,3.4vw,3rem);font-weight:500;letter-spacing:-.03em;
  color:var(--crimson);line-height:1;
}
.step:nth-child(3) .step__no,.step:nth-child(4) .step__no{color:var(--white);}
.step__body{max-width:62ch;}
.step__kicker{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--grey-mid);font-weight:500;margin-bottom:.9em;
}
.step:nth-child(3) .step__kicker,.step:nth-child(4) .step__kicker{color:rgba(255,255,255,.6);}
.step__body h3{font-size:clamp(1.25rem,2.5vw,2.1rem);font-weight:500;letter-spacing:-.02em;
  line-height:1.15;margin-bottom:.55em;}
.step__img{
  width:100%;height:100%;object-fit:cover;border-radius:14px;
  align-self:stretch;min-height:190px;
  /* photos vary portrait/landscape - pin the frame so every card is the same height */
  aspect-ratio:4/3;
}

/* =============================================================
   04 CAPABILITIES
   ============================================================= */
.caps{margin-top:clamp(46px,7vw,86px);border-top:1px solid rgba(255,255,255,.14);}
.cap{
  position:relative;display:grid;
  grid-template-columns:auto minmax(0,1.05fr) minmax(0,1.3fr) auto auto;
  align-items:center;gap:clamp(16px,2.4vw,40px);
  padding:clamp(22px,3vw,40px) clamp(12px,2vw,28px);
  border-bottom:1px solid rgba(255,255,255,.14);
  overflow:hidden;isolation:isolate;
  transition:padding-left .5s var(--ease),color .45s var(--ease);
}
.cap::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--crimson);
  transform:translateY(101%);transition:transform .6s var(--ease);
}
.cap:hover::before{transform:translateY(0);}
.cap:hover{padding-left:clamp(24px,3.5vw,52px);}
.cap__no{font-size:.72rem;letter-spacing:.2em;color:var(--crimson);font-weight:500;transition:color .45s;}
.cap:hover .cap__no{color:var(--white);}
.cap h3{font-size:clamp(1.25rem,2.6vw,2.15rem);font-weight:500;letter-spacing:-.025em;line-height:1.1;}
.cap p{color:rgba(255,255,255,.6);font-size:.95rem;transition:color .45s;}
.cap:hover p{color:rgba(255,255,255,.9);}
/* explicit placement: the thumb reserves its cell so hovering never shifts the row */
.cap>*{grid-row:1;}
.cap__no{grid-column:1;}
.cap h3{grid-column:2;}
.cap p{grid-column:3;}
.cap__thumb{grid-column:4;}
.cap__arrow{grid-column:5;}
.cap__thumb{
  width:clamp(72px,7.6vw,108px);aspect-ratio:1;border-radius:10px;
  object-fit:cover;pointer-events:none;
  transform:scale(.6);opacity:0;
  transition:transform .55s var(--ease),opacity .45s var(--ease);
}
.cap:hover .cap__thumb{transform:scale(1);opacity:1;}
.cap__arrow{font-size:1.3rem;opacity:.35;transition:transform .5s var(--ease),opacity .4s;}
.cap:hover .cap__arrow{opacity:1;transform:translate(6px,-6px);}

/* =============================================================
   05 BELIEFS
   ============================================================= */
.beliefs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--grey-2);border:1px solid var(--grey-2);
  margin-top:clamp(46px,7vw,86px);
}
.belief{
  background:var(--white);padding:clamp(28px,4vw,58px);
  transition:background .5s var(--ease);position:relative;
}
.belief:hover{background:var(--grey-1);}
.belief__no{font-size:.7rem;letter-spacing:.26em;color:var(--crimson);font-weight:500;}
.belief h3{margin:1.6em 0 .5em;font-size:clamp(1.2rem,2.2vw,1.9rem);font-weight:500;letter-spacing:-.02em;}
/* balance, not pretty: these run to three lines, and "pretty" only rescues a
   single stranded word — it leaves runts like "explain why." sitting alone.
   Balancing evens the three lines out so the last one carries its weight. */
.belief p{color:var(--ink-soft);max-width:40ch;text-wrap:balance;}

/* =============================================================
   06 THINKING
   ============================================================= */
.thinking__body{
  margin-top:clamp(30px,4vw,52px);
  max-width:78ch;
}
.thinking__body p{font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.65;}

/* =============================================================
   07 FAQ
   ============================================================= */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--gutter);align-items:start;}
.faq__head{position:sticky;top:16vh;}
.faq__head .lead{margin-top:1.4em;color:var(--grey-mid);font-weight:400;}
.acc{border-bottom:1px solid var(--grey-2);}
.acc:first-child{border-top:1px solid var(--grey-2);}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;
  padding:1.5em 0;text-align:left;
  font-size:clamp(1rem,1.5vw,1.25rem);font-weight:500;letter-spacing:-.01em;
  transition:color .35s;
}
.acc__q:hover{color:var(--crimson);}
.acc__q i{
  position:relative;width:14px;height:14px;flex:none;
}
.acc__q i::before,.acc__q i::after{
  content:"";position:absolute;top:50%;left:0;width:100%;height:1.5px;background:currentColor;
  transition:transform .45s var(--ease);
}
.acc__q i::after{transform:rotate(90deg);}
.acc.is-open .acc__q{color:var(--crimson);}
.acc.is-open .acc__q i::after{transform:rotate(0deg);}
.acc__a{height:0;overflow:hidden;transition:height .55s var(--ease);}
.acc__a>div{padding:0 0 1.9em;max-width:62ch;}
.acc__a p{color:var(--ink-soft);}

/* =============================================================
   CTA
   ============================================================= */
.cta{
  position:relative;overflow:hidden;
  padding:clamp(90px,12vw,180px) var(--pad);
  color:var(--white);
}
.cta__title{
  position:relative;z-index:2;
  font-size:clamp(2.5rem,8.6vw,7.2rem);line-height:1.08;font-weight:500;letter-spacing:-.035em;
  margin-top:.2em;max-width:14ch;
}
.cta__body{
  position:relative;z-index:2;
  margin-top:clamp(36px,5vw,70px);
  display:flex;flex-direction:column;align-items:flex-start;gap:1.1em;
  max-width:60ch;
}
.cta__lead{
  font-size:clamp(1.1rem,1.9vw,1.6rem)!important;line-height:1.45;font-weight:500;
  color:rgba(255,255,255,.92)!important;
}
.cta__punch{
  font-size:clamp(1.05rem,1.7vw,1.45rem);font-weight:500;color:var(--white)!important;
}

/* =============================================================
   FOOTER
   ============================================================= */
.footer{padding:clamp(60px,8vw,110px) var(--pad) clamp(24px,3vw,40px);color:var(--white);
  border-top:1px solid rgba(255,255,255,.12);}
.footer p{color:rgba(255,255,255,.62);}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--gutter);}
.footer__about{max-width:62ch;display:flex;flex-direction:column;gap:1.1em;}
.footer__title{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;color:var(--white);font-weight:500;}
.footer__caps{font-size:.8rem!important;letter-spacing:.02em;color:var(--crimson)!important;font-weight:500;}
/* Each capability wraps as one unit, and the separator stays with the phrase
   before it — so a line never breaks on "Experience & Technology" or opens with a dot. */
.footer__caps span{white-space:nowrap;}
.footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gutter);}
.footer__cols h4{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:rgba(255,255,255,.4);font-weight:500;margin-bottom:1.6em;}
.footer__cols a{display:block;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.42em 0;transition:color .3s;}
.footer__cols a:hover{color:var(--crimson);}
.footer__final{
  margin-top:clamp(50px,7vw,90px);padding-top:clamp(30px,4vw,50px);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;align-items:flex-start;gap:.5em;
}
.footer__final p{font-size:clamp(.95rem,1.3vw,1.15rem);}
.footer__closing{max-width:46ch;}
/* tagline: solid crimson, sitting under the closing line */
.footer__move{
  font-weight:500;font-size:clamp(1.1rem,2vw,1.7rem)!important;
  color:var(--crimson)!important;letter-spacing:-.01em;
}
.footer__wordmark{margin:clamp(36px,6vw,80px) 0 clamp(20px,3vw,36px);color:rgba(255,255,255,.1);}
.footer__wordmark .wordmark{width:100%;height:auto;}
.footer__base{
  display:flex;flex-wrap:wrap;gap:1em 2rem;justify-content:space-between;align-items:center;
  padding-top:clamp(18px,2.5vw,28px);border-top:1px solid rgba(255,255,255,.12);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
}
.footer__base p{font-size:.7rem!important;color:rgba(255,255,255,.45);}
.footer__top-link{color:var(--crimson);}

/* =============================================================
   REVEAL / SPLIT-TEXT ANIMATION STATES
   ============================================================= */
/* The mask needs headroom under the baseline or descenders ("g", "y", "q")
   get clipped. Padding is cancelled by the negative margin, so layout height
   is unchanged — the leading below does the spacing work. */
.line{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em;}
/* travel must clear the line box PLUS the descender padding above, or the
   top of the glyphs peeks out of the mask before the reveal fires */
.line__in{display:block;transform:translateY(135%);transition:transform 1s var(--ease);}
.is-inview .line__in{transform:translateY(0);}
.line:nth-child(2) .line__in{transition-delay:.08s;}
.line:nth-child(3) .line__in{transition-delay:.16s;}
.line:nth-child(4) .line__in{transition-delay:.24s;}
.line:nth-child(5) .line__in{transition-delay:.32s;}
.line:nth-child(6) .line__in{transition-delay:.4s;}

.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.24em;margin-bottom:-.24em;}
.word__in{display:inline-block;opacity:0;transform:translateY(105%);
  transition:transform .8s var(--ease),opacity .8s var(--ease);}
.is-inview .word__in{opacity:1;transform:translateY(0);}

/* Photography treatment — the palette is black, white and greys, so photos are
   desaturated and crimson stays the only colour on the page. */
.photo{
  filter:grayscale(1) contrast(1.06) brightness(.97);
  background:var(--grey-1);
  transition:filter .6s var(--ease),transform .8s var(--ease);
}
.section--dark .photo,.band .photo{background:#111;}
.thinking__media:hover .photo{filter:grayscale(.15) contrast(1.02);}
figure img{display:block;}
[data-reveal]{opacity:0;transform:translateY(34px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-reveal].is-inview{opacity:1;transform:none;}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1024px){
  .header__nav{display:none;}
  .header .btn--sm{display:none;}
  .burger{display:block;margin-left:auto;}
  .about__grid{grid-template-columns:1fr 1fr;}
  .method__head,.faq,.footer__top,.thinking__body{grid-template-columns:1fr;}
  .step__inner{grid-template-columns:auto minmax(0,1fr) minmax(0,.5fr);}
  .cap__thumb{display:none;}
  .faq__head{position:static;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat{border-right:1px solid var(--grey-2);padding-left:clamp(14px,2vw,28px);}
  .stat:first-child{padding-left:clamp(14px,2vw,28px);}
  .stat:nth-child(2n){border-right:0;}
  .cap{grid-template-columns:auto 1fr auto;align-items:start;}
  .cap__no{grid-column:1;grid-row:1;}
  .cap h3{grid-column:2;grid-row:1;}
  .cap p{grid-column:2;grid-row:2;padding-top:.5em;}
  .cap__arrow{grid-column:3;grid-row:1;}
  .hero__row{grid-template-columns:1fr;gap:28px;align-items:start;}
  .hero__aside{margin-left:0;max-width:56ch;}
}
@media (max-width:720px){
  .about__grid{grid-template-columns:1fr;}
  .band{padding:14px 0;}
  .beliefs{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr;}
  .stat{border-right:0;}
  .steps{display:block;}
  .step{top:auto;position:relative;}
  .step__inner{grid-template-columns:1fr;gap:18px;height:auto;}
  .step__img{display:none;}
  .cap{grid-template-columns:1fr auto;gap:8px 14px;align-items:start;}
  .cap__no{grid-column:1/-1;grid-row:1;}
  .cap__thumb{display:none;}
  .cap h3{grid-column:1;grid-row:2;}
  .cap p{grid-column:1/-1;grid-row:3;}
  .cap__arrow{grid-column:2;grid-row:2;}
  .marquee--hero{padding:14px 0;}
  .footer__cols{grid-template-columns:1fr 1fr;}
  /* The infinity device is dropped on phones: at this width it sits directly
     behind the tagline rather than clear of it, and competes with the type.
     display:none also beats the inline transform initParallax() keeps writing. */
  .hero__glow{display:none;}
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;}
  /* The marquees are decorative, continuous and non-flashing. Keep them
     scrolling even when motion is reduced, so the strip behaves the same
     on every device. Everything else above stays reduced. */
  .marquee__track{animation-duration:34s!important;animation-iteration-count:infinite!important;}
  .marquee__track--rev{animation-duration:46s!important;}
  .marquee__track--photos{animation-duration:58s!important;}
  .line__in,.word__in{transform:none!important;opacity:1!important;}
  [data-reveal]{opacity:1!important;transform:none!important;}
  .step{position:relative;top:auto;}
}