/* =======================================================
   RawBuzz — styles
   Palette / type scale mirrors the Stillness reference.
   ======================================================= */

:root{
  --bg-light:#f4f2ef;      /* warm off-white, kept airy on purpose */
  --bg-sand:#f0e6dc;       /* faint peach — brand tint at ~8%, not a fill */
  --primary:#f96207;       /* RawBuzz orange, used only as accent */
  --primary-deep:#d24d02;
  --primary-soft:#fdf0e6;
  --ink:#241b19;
  --body:#3a332e;
  --label:#3b332c;
  --line:#c0c0c099;
  --line-light:#ffffff4d;

  --ff:'Manrope',Arial,Helvetica,sans-serif;
  --h2:clamp(1.75rem,3.6vw,3.25rem);
  --h3:clamp(1.6rem,3vw,2.375rem);
  --h4:clamp(1.3rem,2.1vw,1.75rem);
  --fs-label:.875rem;
  --fs-body:1rem;
  --fs-lg:1.125rem;
  --display:clamp(3.25rem,14vw,12.0625rem);

  --r-sm:.4em; --r-pill:100em;
  --xs:.5rem; --s:.875rem; --m:1rem; --l:1.875rem; --xl:2.5rem; --xxl:5rem; --xxxl:10rem;

  /* GSAP-equivalent easings */
  --power2:cubic-bezier(.215,.61,.355,1);
  --power3:cubic-bezier(.165,.84,.44,1);
  --power4:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id],main[id]{scroll-margin-top:5.5rem}
body{
  margin:0;font-family:var(--ff);font-size:var(--fs-body);line-height:140%;color:var(--body);
  background:var(--bg-light);overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* One ramp for the whole page. The warm turn starts at 20% — just above
   Featured Work — and every stop after it moves by a hair, so there is no
   band anywhere. The tail is held flat from 85% so the CTA hand-off cannot
   drift when the page gets taller or shorter. */
/* The page rolls in waves — light, deep, light, deep — with every turning
   point eased in AND out on a cosine, so the colour has zero slope where it
   turns and the wave rolls over instead of kinking.

   The waves live on two wrappers, not on the page, because the flat crest
   across Featured Work has to be measured in VIEWPORTS, not percentages.
   Those blocks are sticky: a pinned block's gradient is frozen on screen
   while the page behind keeps scrolling, so the two can never stay aligned
   and a step shows at every hand-off. The crest therefore has to be one flat
   colour across the page for a full screen before the section, all four
   blocks, and a full screen after it — which is exactly what
   `calc(100% - 100svh)` and `100svh` express here, on any device. */
main{overflow-x:clip;background:#fbf4ec}

.wave--top{background:linear-gradient(180deg,
  #fefcf9 0%, #fcf7ef 8%, #f7ead7 20%, #f1dfc3 30%, #edd6b4 38%,
  #ecd3b0 46%, #f0dcc0 56%, #f5e7d5 66%,
  #fbf4ec calc(100% - 100svh), #fbf4ec 100%)}

.wave--bottom{background:linear-gradient(180deg,
  #fbf4ec 0%, #fbf4ec 100svh,
  #f7ecdc 34%, #eed4b2 44%, #e5ba8a 52%, #e2b076 58%,
  #e6bd8f 64%, #eed3b3 70%, #f5e7d6 76%, #f8eee1 80%,
  #f3e0c9 86%, #e9c49b 91%, #dea475 95%, #d8935a 100%)}

/* the closing panel opens on the colour the bottom wave lands on */
.ground{background:#d8935a}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:500;line-height:100%;letter-spacing:-.03em}
p{margin:0}

.h2{font-size:var(--h2);line-height:110%}
.h3{font-size:var(--h3);line-height:105%}
.h4{font-size:var(--h4);line-height:118%}
.label{
  display:inline-block;font-size:var(--fs-label);letter-spacing:.05em;
  text-transform:uppercase;color:var(--label);line-height:140%
}
.label--light{color:#fff}
.display{
  font-size:var(--display);line-height:86%;letter-spacing:-.05em;color:var(--ink);
  font-weight:500;text-align:center;padding:0 var(--l);
  word-break:normal;overflow-wrap:normal        /* never split a word mid-letter */
}

/* ---------- hover label swap (their nav + buttons) ---------- */
.swap{position:relative;display:inline-block;overflow:hidden;height:1.2em;line-height:1.2;vertical-align:bottom}
.swap > span{display:block;line-height:1.2;transition:transform .5s var(--power4)}
.swap:hover > span,a:hover > .swap > span,.btn:hover .swap > span{transform:translateY(-100%)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.35rem;
  border-radius:var(--r-pill);font-size:.9375rem;font-weight:500;line-height:1;
  transition:background .35s var(--power2),color .35s var(--power2)
}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#000}
.btn--arrow{padding-right:.45rem}
.btn__ico{
  width:2.1rem;height:2.1rem;border-radius:50%;background:var(--primary);color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:.95rem;
  transition:transform .45s var(--power4)
}
.btn--arrow:hover .btn__ico{transform:rotate(-45deg)}
.arrow-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink);font-size:.9375rem}
.arrow-link i{font-style:normal;color:var(--primary);transition:transform .4s var(--power4)}
.arrow-link:hover i{transform:translateX(4px)}
.circle{
  width:2.1rem;height:2.1rem;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-style:normal;color:var(--ink);
  transition:background .35s var(--power2),color .35s var(--power2),transform .45s var(--power4)
}

/* =======================================================
   PRELOADER — brand mark, counter, progress
   (only exists when JS is running)
   ======================================================= */
.loader{display:none}
.js .loader{
  position:fixed;inset:0;z-index:999;display:grid;place-items:center;align-content:center;gap:var(--l);
  background:linear-gradient(180deg,#fff,var(--bg-light));
  transition:opacity .7s var(--power3),visibility .7s
}
.js .loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__mark{width:min(46vw,260px);animation:hover-bee 2.4s var(--power2) infinite}
.loader__mark img{width:100%;height:auto}
.loader__count{display:flex;align-items:baseline;gap:.15rem;color:var(--ink);font-size:var(--fs-label);letter-spacing:.05em}
.loader__count i{font-style:normal;color:var(--primary)}
.loader__bar{width:min(260px,52vw);height:2px;background:#241b1920;border-radius:2px;overflow:hidden}
.loader__bar span{display:block;width:0;height:100%;background:var(--primary)}
@keyframes hover-bee{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-10px) rotate(-1.2deg)}
}

/* ---------- scroll progress ---------- */
.progress{display:none}
.js .progress{
  display:block;position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:#241b1912;pointer-events:none
}
.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary-deep))}

/* =======================================================
   NAV
   ======================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:var(--xl);
  padding:var(--m) var(--l);background:rgba(255,255,255,.94);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--power2),padding .4s var(--power2)
}
.nav.is-stuck{border-color:var(--line);padding-block:.65rem}
.nav__logo{display:flex;align-items:center;flex:0 0 auto}
.nav__logo img{width:150px;height:auto;transition:transform .5s var(--power4)}
.nav__logo:hover img{transform:translateY(-2px) scale(1.02)}
.nav.is-stuck .nav__logo img{width:132px;transition:width .4s var(--power2),transform .5s var(--power4)}
.nav__tag{font-size:.8125rem;line-height:130%;color:var(--ink)}
.nav__links{display:flex;gap:var(--l);margin-inline:auto}
.nav__links a{font-size:.9375rem;color:var(--ink)}
.nav__cta{padding:.7rem 1.15rem}
.nav__menu{display:none;padding:.7rem 1.2rem;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:.9375rem}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--bg-light);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s);padding:var(--xxl) var(--l);
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--power3);pointer-events:none
}
.drawer.is-open{clip-path:inset(0 0 0 0);pointer-events:auto}
.drawer a{font-size:clamp(2rem,9vw,3rem);color:var(--ink);font-weight:500;letter-spacing:-.03em}

/* =======================================================
   HERO — title overlaps the portrait, like the reference
   ======================================================= */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  text-align:center;padding:80px var(--l) var(--xxl);gap:0
}
/* ---------- hero fan: five creatives that drop in stacked,
   then spread along an arc — the reference's hero motion ---------- */
/* ---- the arc rolls left to right forever, entirely on the compositor ----
   One shared keyframe path; each sheet just enters it at a different phase,
   so there is no per-frame JavaScript and nothing to fall behind. */
@keyframes hero-roll{
  0.0000%{transform:translate3d(calc(-3.0 * var(--step-x)),calc(9.0 * var(--step-y)),0) rotate(calc(-3.0 * var(--step-r)))}
  8.3333%{transform:translate3d(calc(-2.5 * var(--step-x)),calc(6.25 * var(--step-y)),0) rotate(calc(-2.5 * var(--step-r)))}
  16.6667%{transform:translate3d(calc(-2.0 * var(--step-x)),calc(4.0 * var(--step-y)),0) rotate(calc(-2.0 * var(--step-r)))}
  25.0000%{transform:translate3d(calc(-1.5 * var(--step-x)),calc(2.25 * var(--step-y)),0) rotate(calc(-1.5 * var(--step-r)))}
  33.3333%{transform:translate3d(calc(-1.0 * var(--step-x)),calc(1.0 * var(--step-y)),0) rotate(calc(-1.0 * var(--step-r)))}
  41.6667%{transform:translate3d(calc(-0.5 * var(--step-x)),calc(0.25 * var(--step-y)),0) rotate(calc(-0.5 * var(--step-r)))}
  50.0000%{transform:translate3d(calc(0.0 * var(--step-x)),calc(0.0 * var(--step-y)),0) rotate(calc(0.0 * var(--step-r)))}
  58.3333%{transform:translate3d(calc(0.5 * var(--step-x)),calc(0.25 * var(--step-y)),0) rotate(calc(0.5 * var(--step-r)))}
  66.6667%{transform:translate3d(calc(1.0 * var(--step-x)),calc(1.0 * var(--step-y)),0) rotate(calc(1.0 * var(--step-r)))}
  75.0000%{transform:translate3d(calc(1.5 * var(--step-x)),calc(2.25 * var(--step-y)),0) rotate(calc(1.5 * var(--step-r)))}
  83.3333%{transform:translate3d(calc(2.0 * var(--step-x)),calc(4.0 * var(--step-y)),0) rotate(calc(2.0 * var(--step-r)))}
  91.6667%{transform:translate3d(calc(2.5 * var(--step-x)),calc(6.25 * var(--step-y)),0) rotate(calc(2.5 * var(--step-r)))}
  100.0000%{transform:translate3d(calc(3.0 * var(--step-x)),calc(9.0 * var(--step-y)),0) rotate(calc(3.0 * var(--step-r)))}
}
.hero__fan.is-rolling .fan__item{
  transition:none;
  will-change:transform;
  backface-visibility:hidden;
  animation:hero-roll var(--roll) linear infinite;
  /* start exactly where the intro left this sheet, so the handover is invisible */
  animation-delay:calc((var(--i) + var(--shift, 0) + 3) / 6 * var(--roll) * -1)
}
@media (prefers-reduced-motion:reduce){
  .hero__fan.is-rolling .fan__item{animation:none}
}
.hero__fan{
  --step-x:min(348px,64vw);      /* distance between neighbouring centres */
  --step-y:min(47px,8.4vw);      /* quadratic drop, so the row reads as a dome */
  --step-r:15deg;                /* tilt per step */
  position:relative;width:100%;height:min(500px,88vw);
  display:flex;align-items:center;justify-content:center;pointer-events:none
}
.fan__item{
  position:absolute;margin:0;width:min(268px,46vw);aspect-ratio:1400/2560;
  background:none;
  /* resting slot on the arc — matches the reference: 348px between centres,
     15° per step, dy quadratic so the row sits on a ~1300px radius */
  --ii:calc(var(--i) + var(--shift, 0));
  --x:calc(var(--ii) * var(--step-x));
  --y:calc(var(--ii) * var(--ii) * var(--step-y));
  --r:calc(var(--ii) * var(--step-r));
  transform:translate(var(--x),var(--y)) rotate(var(--r))
}
.fan__item img{
  width:100%;height:100%;object-fit:contain;
}
#heroFan{--step-x:min(330px,60vw);--step-y:min(22px,4.4vw);--step-r:7deg;--roll:37s}
.fan__item--lead{z-index:3}
.fan__item--mid{z-index:2}

/* the whole set starts collapsed above the fold, then lands, then fans */
.js .hero__fan .fan__item{
  transform:translate(0,-62vh) rotate(0deg) scale(.34);
  transition:transform 1s var(--power3)
}
.js .hero__fan.is-landed .fan__item{
  transform:translate(0,0) rotate(0deg) scale(1)
}
.js .hero__fan.is-fanned .fan__item{
  transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1);
  transition:transform .95s var(--power3)
}
.hero__title{
  position:relative;z-index:2;font-size:clamp(2rem,13.9vw,6.25rem);line-height:96%;letter-spacing:-.045em;
  margin-top:40px
}
.hero__sub{max-width:34rem;margin-top:var(--l);font-size:var(--fs-lg);line-height:150%}
.hero .btn{margin-top:var(--l)}

.ticker{
  overflow:hidden;border-block:1px solid var(--line);background:var(--primary-soft);
  padding:1.05rem 0;-webkit-mask-image:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000);
  mask-image:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000)
}
.ticker__track{display:flex;align-items:center;gap:2.4rem;width:max-content;animation:ticker 34s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker span{font-size:clamp(1.05rem,2.1vw,1.6rem);color:var(--ink);white-space:nowrap;letter-spacing:-.025em}
.ticker i{color:var(--primary);font-style:normal;font-size:.9em}
@keyframes ticker{to{transform:translateX(-50%)}}

/* =======================================================
   ABOUT
   ======================================================= */
.about{max-width:1440px;margin:0 auto;padding:var(--xxxl) var(--l)}
.about__grid{display:grid;grid-template-columns:.62fr 1.38fr;gap:var(--xl);margin-top:var(--m);align-items:start}
.about__media{margin:0;aspect-ratio:3/4;border-radius:2px;overflow:hidden;background:var(--bg-sand)}
.about__media img{width:100%;height:100%;object-fit:cover}
.about__text{display:flex;flex-direction:column;gap:var(--xl)}
.about__desc{max-width:52ch;font-size:var(--fs-lg);line-height:165%;color:#514c48}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:var(--xxl);border-top:1px solid var(--line)}
.stat{display:flex;flex-direction:column;gap:var(--s);padding:var(--l) var(--l) var(--l) var(--m);border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat__num{font-size:clamp(2.25rem,4.4vw,3.5rem);line-height:1;color:var(--ink);font-weight:500;letter-spacing:-.04em}
.stat p{font-size:.9375rem;line-height:160%}

/* =======================================================
   WORK — full-bleed blocks, clip-path reveal
   ======================================================= */
.display--work{margin:0 0 0}
.work{margin-top:var(--xl)}
.work{position:relative}
.wblock{
  position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;contain:paint;
  background:#fbf4ec     /* the plateau colour: identical on every block, so no
                              hand-off between them can ever show an edge */
}
/* Each block carries the slice of the page ramp that sits at its own scroll
   position, so the section reads as if the page shows straight through it.
   They stay opaque on purpose: these are sticky and stacked, and a genuinely
   transparent block would let the one underneath show through the one on top. */
.wblock__inner{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--l);padding:var(--xl) var(--l);text-align:center
}
.wblock__row{
  width:100%;max-width:1200px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:var(--xl)
}
.wblock__row .label:first-child{justify-self:start}
.wblock__row .label:last-child{justify-self:start}
.wblock__thumb{
  margin:0;width:min(24vw,340px);aspect-ratio:760/944;overflow:hidden;background:#241b1908;border-radius:2px
}
.wblock__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--power2)}
.wblock:hover .wblock__thumb img{transform:scale(1.1)}
.wblock__title{color:var(--ink)}
.wblock .label--light{color:var(--body)}
.wblock__btn{background:var(--ink);color:#fff}
.wblock__btn:hover{background:#000}
.wblock__btn .btn__ico{background:var(--primary)}

/* =======================================================
   SERVICES — sticky image + accordion
   ======================================================= */
.services{
  position:relative;z-index:1;
  max-width:1440px;margin:0 auto;padding:var(--xxxl) var(--l) var(--xxl);
  display:grid;grid-template-columns:1fr 1fr;gap:var(--xxl);align-items:start
}
.services__media{
  margin:0;position:sticky;top:6rem;aspect-ratio:4/5;max-height:76svh;
  overflow:hidden;border-radius:2px;background:var(--bg-sand)
}
.services__media img{width:100%;height:100%;object-fit:cover}
.services__side{display:flex;flex-direction:column;gap:var(--m);padding-top:var(--xs)}
.services__thumb{margin:0;width:110px;aspect-ratio:1;overflow:hidden;border-radius:2px;background:var(--bg-sand)}
.services__thumb img{width:100%;height:100%;object-fit:cover}
.services__side .h2{margin-bottom:var(--xxl)}

.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__head{
  width:100%;display:grid;grid-template-columns:56px 1fr 24px;align-items:center;gap:var(--m);
  padding:1.35rem 0;text-align:left;transition:padding-left .45s var(--power3)
}
.acc__item:hover .acc__head{padding-left:.5rem}
.acc__name{font-size:var(--fs-lg);color:var(--ink);letter-spacing:-.02em}
.acc__ico{position:relative;width:18px;height:18px;justify-self:end}
.acc__ico::before,.acc__ico::after{
  content:'';position:absolute;inset:50% 0 auto 0;height:1.5px;background:var(--ink);
  transition:transform .45s var(--power3),background .3s
}
.acc__ico::after{transform:rotate(90deg)}
.acc__item.is-open .acc__ico::after{transform:rotate(0)}
.acc__item.is-open .acc__ico::before,.acc__item.is-open .acc__ico::after{background:var(--primary)}
.acc__panel{overflow:hidden;height:0;transition:height .55s var(--power3)}
.acc__body{padding:0 var(--xl) 1.6rem 56px;display:flex;flex-direction:column;gap:var(--m);opacity:0;transform:translateY(10px);transition:opacity .5s var(--power2) .05s,transform .5s var(--power2) .05s}
.acc__item.is-open .acc__body{opacity:1;transform:none}
.acc__body p{font-size:1.0625rem;line-height:165%;max-width:54ch}

/* =======================================================
   JOURNAL — 4 columns, alternating image heights
   ======================================================= */
.journal{max-width:1440px;margin:0 auto;padding:var(--xxxl) var(--l) var(--xxl);display:flex;flex-direction:column;align-items:center}
.display--journal{
  margin-bottom:var(--xl);
  white-space:nowrap;                       /* never breaks to two lines */
  font-size:clamp(1.6rem,9.8vw,9rem)        /* sized so it fits on one line at any width */
}
.posts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--l);width:100%}
.post{display:flex;flex-direction:column;gap:var(--s)}
.post__img{margin:0;overflow:hidden;border-radius:2px;background:var(--bg-sand)}
/* the creatives are 4:5 posters with a headline at the top — a fixed height
   would crop it off, so every card shows the whole frame and the stagger
   comes from the offset below instead */
.post__img{aspect-ratio:4/5}
.post--tall{margin-top:var(--xxl)}
.post__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--power2)}
.post:hover .post__img img{transform:scale(1.06)}
.post__foot{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--m)}
.post__title{font-size:var(--fs-lg);line-height:130%;color:var(--ink);letter-spacing:-.02em;font-weight:500}
.post:hover .circle{background:var(--ink);color:#fff;transform:rotate(-45deg)}

/* =======================================================
   TESTIMONIALS — giant word + sticky stacked cards
   ======================================================= */
.quotes{position:relative;max-width:1440px;margin:0 auto;padding:var(--xxl) var(--l) var(--xl)}
.quotes__head{
  position:sticky;top:12vh;z-index:2;          /* leads until the cards reach it */
  transition:opacity .5s var(--power2);
  display:flex;flex-direction:column;align-items:center;gap:var(--m)
}
.display--quotes{
  white-space:nowrap;font-size:clamp(2rem,13vw,12rem)
}
/* once the cards climb over it, the word slips behind and settles back */
.quotes__head.is-behind{z-index:0;opacity:.92}
.quotes__stack{position:relative;z-index:1;margin-top:5vh;display:flex;flex-direction:column;gap:6vh}
.qcard{
  position:sticky;margin:0;width:min(420px,86vw);padding:var(--l);border-radius:var(--r-sm);
  background:#faf3ec;border:1px solid #ffffff8c;
  box-shadow:0 24px 60px -40px #241b1966;
  display:flex;flex-direction:column;gap:var(--l)
}
.js .qcard[data-anim="up"]{transform:translateY(38px)}
.js .qcard--a[data-anim="up"]{transform:translate(-40px,38px)}
.js .qcard--b[data-anim="up"]{transform:translate(40px,38px)}
.js .qcard--c[data-anim="up"]{transform:translate(-32px,38px)}
.js .qcard--d[data-anim="up"]{transform:translate(32px,38px)}
.js .qcard.is-in{transform:none !important}
.qcard--a{top:36vh;align-self:flex-start;margin-left:2%}
.qcard--b{top:40vh;align-self:flex-end;margin-right:2%}
.qcard--c{top:44vh;align-self:flex-start;margin-left:14%}
.qcard--d{top:48vh;align-self:flex-end;margin-right:14%}
.qcard blockquote{margin:0;font-size:1.0625rem;line-height:150%;color:var(--ink)}
.qcard figcaption{display:flex;align-items:center;gap:var(--m)}
.qcard__ava{width:56px;height:56px;flex:0 0 auto;overflow:hidden;border-radius:2px;background:#dfd3c1}
.qcard__ava img{width:100%;height:100%;object-fit:cover}
.qcard figcaption strong{display:block;color:var(--ink);font-weight:500}
.qcard__mark{position:absolute;right:var(--l);bottom:var(--m);font-size:2rem;line-height:1;color:var(--primary)}

/* =======================================================
   CTA + FOOTER — one warm gradient, like the reference
   ======================================================= */

/* orange is a sunset band under the CTA only — the footer stays ink,
   so the page never turns into a block of brand colour */
.cta{
  /* No radial glow any more: an ellipse anchored inside the CTA gets clipped
     dead straight at the element's top edge, and that hard cut was the line.
     This is one fall instead — it holds the wave's own colour at zero alpha
     through the first 12%, so nothing whatsoever changes at the boundary,
     then eases in over the next half. */
  background:linear-gradient(180deg,
  #d8935a00 0%,
  #d8945a00 4%,
  #d9925800 8%,
  #da905500 12%,
  #dc8e5104 16%,
  #de8b4b10 20%,
  #e1874523 24%,
  #e3833e3b 28%,
  #e67e3758 32%,
  #e97a2f77 36%,
  #ec752897 40%,
  #ef7120b6 44%,
  #f26d1ad1 48%,
  #f46a14e7 52%,
  #f6670ff6 56%,
  #f7640bfe 60%,
  #f86309 64%,
  #f96207 68%,
  #f86207 72%,
  #f56007 76%,
  #ed5c06 80%,
  #e45705 84%,
  #db5204 88%,
  #d34d04 92%,
  #cd4a03 96%,
  #cb4903 100%)
}
.cta{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--l);
  padding:4rem var(--l) var(--xxl)
}
.cta__fan{
  /* One continuous rule, no breakpoint. A fixed desktop step made the arc
     collapse off screen between 640 and ~850px, where the frames were still
     228px but the viewport was not. Everything below scales with the
     viewport until it reaches the desktop cap. */
  height:min(268px,32vw);
  /* clears the quadratic drop of the outermost pair at any width */
  margin-bottom:calc(min(270px,36vw) - min(268px,32vw) / 2 + 30px)
}
.js .cta__fan .fan__item{transition:none}   /* scrubbed per frame, no easing lag */
.cta__fan .fan__item{
  width:min(228px,26vw);aspect-ratio:1;      /* the closing frames are square */
  border-radius:2px;overflow:hidden;
  box-shadow:0 24px 44px -30px #4a220066
}
.cta__fan .fan__item img{object-fit:cover}
/* the closing arc sits a touch tighter than the hero's */
.cta__fan{--step-x:min(258px,30vw);--step-y:min(14px,2.2vw);--step-r:6deg}
.cta__title{color:var(--ink);max-width:16ch}
.cta .btn--dark{background:var(--ink)}

.footer{
  padding:var(--xxl) var(--l) var(--l);color:#e8dfd6;
  /* Long, evenly-stepped fall from the CTA's orange to ink. The deltas get
     smaller and smaller toward the end, so there is no point where the
     colour visibly stops changing. */
  background:linear-gradient(180deg,
    #cb4903 0%,
    #c44605 7%,
    #bb4206 13%,
    #b03e06 18%,
    #9e3707 25%,
    #8a3108 32%,
    #762a0a 39%,
    #62240c 46%,
    #501f0e 53%,
    #411b0f 60%,
    #351810 67%,
    #2d1711 74%,
    #291612 81%,
    #271713 87%,
    #251a17 93%,
    var(--ink) 100%)
}
.footer .label{color:#ffffffb3}
.footer h3{color:#fff}
.footer a:hover{color:#fff}
.footer__top{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--xxl);padding-bottom:var(--xxl);border-bottom:1px solid var(--line-light)}
.footer__news{display:flex;flex-direction:column;gap:var(--m)}
.subscribe{display:flex;flex-direction:column;gap:var(--xs);margin-top:var(--l);max-width:460px}
.subscribe__row{display:flex;align-items:center;gap:var(--m);border-bottom:1px solid var(--line-light);padding-bottom:.55rem}
.subscribe__row .btn--dark{background:var(--primary);color:#fff}
.subscribe__row .btn--dark::before{background:#fff}
.subscribe__row .btn--dark:hover{color:var(--ink);background:var(--primary)}
.subscribe input{flex:1;background:none;border:0;outline:none;color:#fff;font-family:var(--ff);font-size:.9375rem}
.subscribe input::placeholder{color:#ffffff80}
.subscribe__msg{font-size:.8125rem;color:#fff;min-height:1.2em;opacity:0;transform:translateY(-4px);transition:opacity .4s var(--power2),transform .4s var(--power2)}
.subscribe__msg.is-on{opacity:1;transform:none}
.footer__links{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--xl);justify-items:end}
.footer__links div{display:flex;flex-direction:column;gap:var(--xs)}
.footer__bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--l);padding-top:var(--xl)}
.footer__bottom p{margin-top:var(--xs);font-size:.9375rem;color:#fff}

/* =======================================================
   ANIMATION PRIMITIVES  (armed only when .js is present)
   ======================================================= */
.js [data-anim="up"]{opacity:0;transform:translateY(30px);transition:opacity .85s var(--power3),transform .85s var(--power3)}
.js [data-anim="up"].is-in{opacity:1;transform:none}

/* clip the CHILD, never the observed element itself — a clipped element
   reports zero intersection and would never trigger its own reveal */
.js [data-anim="clip"] > *{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--power3)}
.js [data-anim="clip"].is-in > *{clip-path:inset(0 0 0 0)}

.js .wblock__thumb img{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--power3)}
.js .wblock.is-in .wblock__thumb img{clip-path:inset(0 0 0 0)}
.js .wblock__row,.js .wblock__title,.js .wblock__btn{opacity:0;transform:translateY(30px);transition:opacity .8s var(--power2),transform .8s var(--power2)}
.js .wblock.is-in .wblock__row{opacity:1;transform:none;transition-delay:.6s}
.js .wblock.is-in .wblock__title{opacity:1;transform:none;transition-delay:.75s}
.js .wblock.is-in .wblock__btn{opacity:1;transform:none;transition-delay:.88s}

/* per-letter heading reveal (SplitText equivalent) */
.js .sp{filter:blur(6px);transition:filter 1s var(--power3)}
.js .sp.is-in{filter:blur(0)}

/* scroll-scrubbed heading reveal — words sit light and darken as the
   section travels up the viewport, exactly like the reference */
.scrub__w{display:inline-block}
.js .scrub{color:var(--ink)}
.js .scrub .scrub__w{opacity:.22;transition:opacity .28s linear}
.js .scrub.is-in .scrub__w{transition:opacity .28s linear}
.js .scrub{filter:none !important;opacity:1 !important;transform:none !important}
.js .sp-l{display:inline-block;opacity:0;transform:translateY(.45em);will-change:transform,opacity}
.js .is-in .sp-l,.js .sp.is-in .sp-l{opacity:1;transform:none;transition:opacity .7s var(--power2),transform .9s var(--power3)}
.sp-w{display:inline-block;white-space:nowrap}

/* ---------- hero entrance: matched to the reference ----------
   letters fade in place (no rise), the heading un-blurs, the image
   is simply revealed as the loader lifts, sub block fades after     */
.js .hero__title{filter:blur(6px);transition:filter .55s var(--power2)}
.js .hero__title.is-in{filter:blur(0)}
.js .hero__title .sp-l{
  transform:none;
  transition:opacity .75s cubic-bezier(.25,.46,.45,.94)   /* power2.out */
}
.js .hero__title.is-in .sp-l{transform:none}
.js .hero__sub,.js .hero .btn{
  transform:none;transition:opacity .9s var(--power2)
}
.js .hero__sub.is-in,.js .hero .btn.is-in{transform:none}

/* ---------- extra motion ---------- */
[data-parallax]{will-change:transform}
.btn,.circle{will-change:transform}
.btn--magnetic{transition:background .35s var(--power2),color .35s var(--power2),transform .45s var(--power3)}

/* orange sweep behind dark buttons */
.btn--dark{position:relative;overflow:hidden;isolation:isolate}
.btn--dark::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--primary);
  transform:translateY(101%);transition:transform .5s var(--power3)
}
.btn--dark:hover::before{transform:translateY(0)}
.btn--dark:hover{background:var(--ink)}
.btn--dark:hover .btn__ico{background:#fff;color:var(--primary)}

/* work block: veil lifts and thumbnail floats on hover */
.wblock__thumb{transition:transform .8s var(--power3),box-shadow .8s var(--power3)}
.wblock:hover .wblock__thumb{transform:translateY(-8px);box-shadow:0 34px 70px -50px #241b1980}

/* underline sweep on footer + text links */
.footer__links a,.footer__bottom a{background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .45s var(--power3)}
.footer__links a:hover,.footer__bottom a:hover{background-size:100% 1px}

/* accordion row gets an orange rail while open */
.acc__item{position:relative}
.acc__item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--primary);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--power3)
}
.acc__item.is-open::before{transform:scaleY(1)}

/* stats get a hairline that draws in */
.stat{position:relative;overflow:hidden}
.stat::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--primary);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--power3) .2s
}
.stat.is-in::after{transform:scaleX(1)}

/* journal image wipe on top of the rise */
.post__img img{transform-origin:center}
.post:hover .post__img img{transform:scale(1.07)}

/* testimonial cards tilt very slightly as they stack */
.qcard--a{rotate:-.6deg}
.qcard--c{rotate:.5deg}

/* placeholder texture for image slots you haven't filled yet */
img.is-empty{
  width:100%;height:100%;object-fit:cover;font-size:0;color:transparent;
  background:repeating-linear-gradient(45deg,#e6dccd,#e6dccd 14px,#dfd3c1 14px,#dfd3c1 28px)
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-anim],.js .sp,.js .sp-l,.js .scrub .scrub__w,.js .wblock__thumb img,
  .js .wblock__row,.js .wblock__title,.js .wblock__btn{
    opacity:1 !important;transform:none !important;clip-path:none !important;
    filter:none !important;transition:none !important
  }
  .ticker__track,.loader__mark,}

/* =======================================================
   RESPONSIVE
   ======================================================= */
@media (max-width:1200px){
  .nav__tag{display:none}
  .posts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1024px){
  :root{--xxxl:6rem;--xxl:3.5rem}
  .hero{min-height:auto;padding-bottom:var(--xxl)}
  #heroFan{--shift:.5}   /* puts a frame dead centre on narrow screens */
  /* the reference keeps all frames below desktop; the outer ones simply
     run off the edges, which is what gives the arc its width */
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:block;margin-left:auto}
  .about__grid{grid-template-columns:1fr}
  .about__media{aspect-ratio:16/10}
  .about__text{gap:var(--l)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0;border-top:1px solid var(--line);padding-inline:0}
  .stat:first-child{border-top:0}
  .stat:nth-child(2){border-top:0}
  .services{grid-template-columns:1fr;gap:var(--xl)}
  .services__media{position:relative;top:0;aspect-ratio:16/10}
  .services__side .h2{margin-bottom:var(--xl)}
  .display--quotes{position:relative;top:0}
  .quotes__head{top:9vh}   /* still pins on phones — paintQuotes drops it behind the cards */
  /* mobile cards arrive with real weight: swing in from alternating sides */
  .js .qcard[data-anim="up"]{
    transition:opacity .9s var(--power2),transform 1.05s var(--power3)
  }
  .js .qcard--a[data-anim="up"],.js .qcard--c[data-anim="up"]{
    transform:translate(-16%,90px) rotate(-7deg) scale(.88)
  }
  .js .qcard--b[data-anim="up"],.js .qcard--d[data-anim="up"]{
    transform:translate(16%,90px) rotate(7deg) scale(.88)
  }
  .js .qcard.is-in{transform:translate(0,0) rotate(0) scale(1) !important}
  .qcard{transform-origin:50% 120%}
  .quotes__stack{margin-top:var(--xl);align-items:center}
  .qcard{position:relative;top:0 !important;align-self:auto !important;margin:0 !important;width:min(520px,100%)}
  .footer__top{grid-template-columns:1fr}
  .footer__links{justify-items:start}
  .footer__bottom{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  /* hero: frames sit in their own band, headline clears them */
  .hero{min-height:auto;padding-bottom:var(--xl)}
  .cta{padding-top:2.5rem}
  .hero__sub{margin-top:var(--m)}
  .hero .btn{margin-top:var(--m)}
  .wblock{height:min(92vh,600px)}
  .wblock__row{grid-template-columns:1fr;justify-items:center;gap:var(--m)}
  .wblock__row .label:first-child,.wblock__row .label:last-child{justify-self:center}
  .wblock__thumb{width:min(52vw,260px);order:-1}
  .posts{grid-template-columns:1fr}
  .post--tall{margin-top:0}
  .acc__head{grid-template-columns:44px 1fr 20px}
  .acc__body{padding-left:44px;padding-right:0}
  .footer__bottom{grid-template-columns:1fr}
}