/* ============================== tokens ============================== */
:root{
  --yellow:#fcff57;
  --ink:#0e0e0e;
  --gray:#515151;
  --gray-2:#666;
  --gray-3:#868686;
  --void:#05010c;
  --paper:#f4f4f4;
  --line:#dfdfdf;
  --card:#111;
  --white:#fff;

  --container:1390px;
  --gutter:15px;

  --s-3xl:200px; --s-2xl:130px; --s-xl:120px; --s-l:100px;
  --s-m:80px;    --s-s:60px;    --s-xs:50px;

  --h1:88px; --h2:68px; --h3:48px; --h4:32px; --h5:24px;
  --ls-h1:-2.64px; --ls-h2:-2.72px; --ls-h3:-1.92px; --ls-h4:-1.28px;

  --p-l:20px; --p-m:18px; --p-d:16px;

  --r-s:8px; --r-m:10px; --r-l:16px; --r-xl:20px; --r-2xl:24px;

  --ease:cubic-bezier(.33,1,.68,1);
}
@media (max-width:1199px){
  :root{--h1:68px;--h2:48px;--h3:40px;--h4:30px;--h5:22px;
    --ls-h1:-2.04px;--ls-h2:-1.92px;--ls-h3:-1.6px;--ls-h4:-1.2px;
    --s-3xl:160px;--s-2xl:100px;--s-xl:100px;--s-l:80px;--s-m:60px;--s-s:50px;--s-xs:40px;
    --p-l:19px;--p-m:17px;--gutter:20px;}
}
@media (max-width:767px){
  :root{--h1:48px;--h2:40px;--h3:36px;--h4:28px;--h5:20px;
    --ls-h1:-1.44px;--ls-h2:-1.6px;--ls-h3:-1.44px;--ls-h4:-1.12px;
    --s-3xl:140px;--s-2xl:80px;--s-xl:80px;--s-l:60px;--s-m:50px;--s-s:40px;--s-xs:35px;
    --p-l:18px;--p-m:16px;--gutter:18px;}
}
@media (max-width:479px){
  :root{--h1:40px;--h2:36px;--h3:32px;--h4:26px;
    --ls-h1:-1.2px;--ls-h2:-1.44px;--ls-h3:-1.28px;--ls-h4:-1.04px;
    --s-3xl:120px;--s-2xl:60px;--s-xl:60px;--s-l:50px;--s-m:40px;--s-s:35px;--s-xs:30px;}
}

/* ============================== base ============================== */
*,*::before,*::after{box-sizing:border-box}
/* clip (not hidden) keeps the viewport as the scroll container, so window scrolling
   and position:sticky keep working; `hidden` on body would make body its own scroll box */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--white);color:var(--gray);
  font-family:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--p-d);line-height:1.4;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:500}
h1{font-size:var(--h1);line-height:100%;letter-spacing:var(--ls-h1)}
h2{font-size:var(--h2);line-height:110%;letter-spacing:var(--ls-h2)}
h3{font-size:var(--h3);line-height:120%;letter-spacing:var(--ls-h3);font-weight:400}
h4{font-size:var(--h4);line-height:120%;letter-spacing:var(--ls-h4)}
h5{font-size:var(--h5);line-height:140%}
p{margin:0}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s-2xl)}
.eyebrow{font-size:var(--p-l);font-weight:500;color:var(--gray);line-height:140%}
.eyebrow.on-dark{color:rgba(255,255,255,.62)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================== reveal ============================== */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
.rv[data-d="5"]{transition-delay:.40s}
.rv[data-d="6"]{transition-delay:.48s}

/* scroll zoom-out reveal (source: project images stage at scale 1.4) */
.zoom img{transform:scale(1.4);transition:transform 1.3s var(--ease)}
.zoom.in img{transform:scale(1)}

/* pop-in reveal (source: agency images stage at scale 0 / opacity 0) */
.pop{opacity:0;transform:scale(0);transition:transform .9s var(--ease),opacity .6s var(--ease)}
.pop.in{opacity:1;transform:scale(1)}
.pop[data-d="1"]{transition-delay:.12s}
.pop[data-d="2"]{transition-delay:.24s}
.pop[data-d="3"]{transition-delay:.36s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .pop{opacity:1;transform:none;transition:none}
  .zoom img,.zoom.in img{transform:none;transition:none}
}

/* ============================== buttons ============================== */
.btn{display:inline-flex;align-items:center;gap:6px;flex:none;cursor:pointer}
.btn .lbl{
  position:relative;overflow:hidden;height:54px;display:grid;align-items:center;
  padding-inline:24px;border-radius:var(--r-s);font-size:var(--p-d);font-weight:500;
  background:var(--yellow);color:var(--ink);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn .lbl span{grid-area:1/1;display:block;white-space:nowrap;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.btn .lbl span:last-child{transform:translateY(115%);opacity:0}
.btn:hover .lbl span:first-child{transform:translateY(-115%);opacity:0}
.btn:hover .lbl span:last-child{transform:none;opacity:1}
.btn .ic{
  width:54px;height:54px;border-radius:50%;background:var(--yellow);color:var(--ink);
  display:grid;place-items:center;flex:none;overflow:hidden;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)
}
.btn .ic svg{grid-area:1/1;width:19px;height:19px;transition:transform .45s var(--ease)}
.btn:hover .ic svg:first-of-type{transform:translate(26px,-26px)}
.btn .ic svg:last-of-type{transform:translate(-26px,26px)}
.btn:hover .ic svg:last-of-type{transform:none}

.btn--yellow:hover .lbl,.btn--yellow:hover .ic{background:var(--ink);color:var(--white)}
.btn--dark .lbl,.btn--dark .ic{background:var(--ink);color:var(--white)}
.btn--dark:hover .lbl,.btn--dark:hover .ic{background:var(--yellow);color:var(--ink)}
.btn--outline .lbl{background:transparent;color:var(--ink);border:.8px solid var(--ink);padding-inline:22px}
.btn--outline .ic{background:transparent;color:var(--ink);border:.8px solid var(--ink)}
.btn--outline:hover .lbl,.btn--outline:hover .ic{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn--outline.on-dark .lbl,.btn--outline.on-dark .ic{color:var(--white);border-color:rgba(255,255,255,.35)}
.btn--outline.on-dark:hover .lbl,.btn--outline.on-dark:hover .ic{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.btn--sm .lbl{height:46px;padding-inline:20px}
.btn--sm .ic{width:46px;height:46px}

/* ============================== section heads ============================== */
.shead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-inline:auto;margin-bottom:var(--s-s)}
.shead h2{max-width:none}
.services .shead{max-width:557px}
.pricing .shead{max-width:695px}

/* ============================== projects ============================== */
.projects{padding-top:var(--s-l);padding-bottom:var(--s-xl)}
.pv{display:flex;flex-direction:column;gap:130px;max-width:1130px;margin-inline:auto}
.pv__item{position:sticky;top:calc(60px + var(--i) * 24px)}
.pv__card{
  background:var(--paper);border-radius:var(--r-l);padding:30px;min-height:580px;
  display:flex;flex-direction:column;justify-content:space-between;gap:30px
}
.pv__head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.pv__head h3{font-size:var(--h3);font-weight:500;letter-spacing:normal;line-height:110%;transition:color .3s}
a.pv__titlelink:hover h3{color:var(--gray)}
.pv__num{font-size:var(--p-l);color:var(--gray)}
.pv__body{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.pv__text{display:flex;flex-direction:column;gap:30px;max-width:560px}
.pv__text p{font-size:var(--p-d);line-height:150%;color:var(--gray)}
.pv__media{position:relative;overflow:hidden;border-radius:var(--r-m);width:408px;height:375px;flex:none}
.pv__media img{width:100%;height:100%;object-fit:cover}
.pv__media.in:hover img{transform:scale(1.05)}
@media (max-width:900px){
  .pv{gap:60px}
  .pv__item{position:static}
  .pv__body{flex-direction:column;align-items:stretch}
  .pv__media{width:100%;height:300px}
}

/* ============================== services ============================== */
.services{background:#000;padding-block:var(--s-l)}
.services .shead h2{color:var(--white)}
.sv{display:flex;justify-content:center;gap:16px;min-height:490px}
.sv__item{
  position:relative;overflow:hidden;background:#000;border-radius:var(--r-l);padding:24px;color:var(--white);
  display:flex;flex-direction:column;justify-content:space-between;gap:22px;
  flex:0 1 252px;min-width:0;cursor:pointer;
  transition:flex-grow .6s var(--ease),flex-basis .6s var(--ease),background .6s var(--ease)
}
/* merge the reveal into the card's own transition list so neither is dropped */
.sv__item.rv{transition:flex-grow .6s var(--ease),flex-basis .6s var(--ease),background .6s var(--ease),opacity .9s var(--ease),transform .9s var(--ease)}
.sv__item.on{flex:0 0 432px;background:var(--card)}
.sv__top{display:flex;flex-direction:column;gap:12px}
.sv__item h4{color:var(--white);font-weight:400;font-size:var(--h4)}
.sv__det{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .6s var(--ease),opacity .45s var(--ease)
}
.sv__item.on .sv__det{max-height:120px;opacity:1}
.sv__det p{color:rgba(255,255,255,.7);font-size:var(--p-d);line-height:150%}
.sv__bot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.sv__img{flex:1 1 auto;min-width:0;height:216px;border-radius:var(--r-m);overflow:hidden;max-width:270px}
.sv__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.sv__item:hover .sv__img img{transform:scale(1.06)}
.sv__go{
  width:54px;height:54px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:.8px solid rgba(255,255,255,.3);color:var(--white);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)
}
.sv__item.on .sv__go{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.sv__go svg{transition:transform .45s var(--ease)}
.sv__item:hover .sv__go svg,.sv__item:focus .sv__go svg{transform:rotate(45deg)}
@media (max-width:1000px){
  .sv{flex-wrap:wrap}
  .sv__item,.sv__item.on{flex:1 1 300px}
  .sv__det{max-height:120px;opacity:1}
}
@media (max-width:560px){.sv__item,.sv__item.on{flex:1 1 100%}}

/* ============================== awards ============================== */
.awards{padding-top:var(--s-2xl);padding-bottom:var(--s-l)}
.aw__top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;max-width:1016px;margin-bottom:var(--s-xs);flex-wrap:wrap}
.aw__topL{flex:0 1 328px;display:flex;flex-direction:column;gap:16px}
.aw__topL h4{font-weight:400}
.aw__topL p{font-size:var(--p-d);color:var(--gray)}
.aw__topR{flex:0 1 557px;display:flex;flex-direction:column;gap:14px}
.aw__topR h2{font-size:var(--h2)}
.aw__rule{height:1px;background:var(--line)}
.aw__list{display:flex;flex-direction:column;gap:50px;padding-top:50px}
.aw__row{
  display:grid;grid-template-columns:305px 1fr;gap:131px;align-items:start;
  border-radius:var(--r-xl);cursor:pointer
}
.aw__L{display:flex;flex-direction:column;gap:22px}
.aw__num{font-size:var(--p-l);color:var(--gray)}
.aw__img{
  border-radius:var(--r-m);overflow:hidden;max-height:0;opacity:0;
  transition:max-height .7s var(--ease),opacity .5s var(--ease)
}
.aw__img img{width:100%;height:220px;object-fit:cover}
.aw__R{display:flex;flex-direction:column;max-width:557px}
.aw__R h4{margin-top:14px}
.aw__name{font-size:var(--p-l);color:var(--gray)}
.aw__row h4{font-weight:400;transition:color .3s}
.aw__more{
  overflow:hidden;max-height:0;opacity:0;
  transition:max-height .7s var(--ease),opacity .5s var(--ease),margin .5s var(--ease)
}
.aw__more p{font-size:var(--p-d);color:var(--gray-2);line-height:150%;max-width:557px}
.aw__more .btn{margin-top:22px}
.aw__row.on .aw__img{max-height:260px;opacity:1}
.aw__row.on .aw__more{max-height:260px;opacity:1;margin-top:14px}
.aw__row:hover h4{color:var(--gray)}
@media (max-width:900px){
  .aw__row{grid-template-columns:1fr;gap:18px}
  .aw__list{gap:36px;padding-top:36px}
}

/* ============================== agency ============================== */
.agency{padding:0;position:relative}
.agency__stage{position:relative;height:1800px}
/* clips the drifting image plane WITHOUT becoming a scroll ancestor of the sticky text */
.agency__clip{position:absolute;inset:0;overflow:hidden;z-index:0}
.agency__imgs{
  position:absolute;top:0;left:50%;width:1080px;height:1250px;z-index:0;
  transform:translateX(-50%) translateY(var(--par,0px));will-change:transform
}
.agency__imgs figure{position:absolute;margin:0;width:327px;height:387px;border-radius:14px;overflow:hidden}
.agency__imgs img{width:100%;height:100%;object-fit:cover}
.agency__imgs figure:nth-child(1){top:0;left:0}
.agency__imgs figure:nth-child(2){top:201px;left:693px}
.agency__imgs figure:nth-child(3){top:689px;left:87px}
.agency__imgs figure:nth-child(4){top:863px;left:753px}
.agency__text{
  position:sticky;top:0;height:100vh;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:24px;text-align:center;pointer-events:none
}
.agency__text .inner{max-width:902px;display:flex;flex-direction:column;gap:24px;align-items:center;
  background:none;
  padding:60px 40px}
.agency__sub{font-size:var(--h5);font-weight:500;color:var(--gray)}
.agency__title{font-size:var(--h3);font-weight:500;line-height:120%;letter-spacing:var(--ls-h3);color:var(--ink)}
@media (max-width:1100px){
  .agency__stage{height:1400px}
  .agency__imgs{width:100%;height:1400px;padding-inline:var(--gutter)}
  .agency__imgs figure{width:44%;height:300px}
  .agency__imgs figure:nth-child(1){top:0;left:2%}
  .agency__imgs figure:nth-child(2){top:230px;left:54%}
  .agency__imgs figure:nth-child(3){top:760px;left:4%}
  .agency__imgs figure:nth-child(4){top:990px;left:52%}
}

/* ============================== cta ============================== */
.cta{background:var(--void);padding:90px 0 88px;text-align:center}
.cta__in{display:flex;flex-direction:column;align-items:center;gap:24px}
.cta h2{font-size:var(--h1);line-height:100%;letter-spacing:var(--ls-h1);color:var(--white);max-width:792px}
.cta p{font-size:var(--p-m);color:var(--gray-3);max-width:682px;line-height:150%}
.cta .btn{margin-top:10px}



/* ==========================================================================
   Devomarks skin over the NovaCraft light theme.
   --white and --ink each do double duty in the source (background *and* text),
   so those two are overridden per selector rather than swapped wholesale.
   ========================================================================== */
:root{
  --yellow:#de1a39;            /* accent: yellow -> Devomarks red */
  --accent-soft:#f73737;
  --gray:#c1c1c2;              /* body copy on dark */
  --line:#292929;
  --paper:#1c1f22;             /* card ground */
  --void:#101010;
  --dm-bg:#181a1c;
  --dm-head:Geist,system-ui,sans-serif;
  --dm-body:Inter,system-ui,sans-serif;
}

body{ background:var(--dm-bg); color:var(--gray); font-family:var(--dm-body); }

/* the source paints this with --ink, which is near-black on our ground */
.agency__title{ color:#fff; }

h1,h2,h3,h4,h5{ color:#fff; font-family:var(--dm-head); }

/* the source paints these light; invert for the dark ground */
.pv__card{ background:var(--paper); border:1px solid var(--line); }
.section{ background:transparent; }

/* borders and hairlines */
[class*="__line"], hr{ border-color:var(--line) !important; background:var(--line); }

::selection{ background:var(--yellow); color:#fff; }

/* --------------------------------------------------- home page button ----
   .white-button, .button-box-text, .button-box-icon and the two icon layers
   are the home page's own rules (css/style.css) with tokens resolved:
     space-tiny 4px · space-small 10px · space-regular-xl 24px
     bg-color-02 #101010 · radius-extra 50% · small-font 14px
   The transforms are what Webflow IX3 applies at runtime, measured off the
   live button: front 0 -> 50px, back -50px -> 0, about 480ms. */
.white-button{
  grid-column-gap:4px; grid-row-gap:4px; gap:4px;
  color:#101010;
  align-items:center;
  display:flex;
  text-decoration:none;
  font-family:var(--dm-body);
}
.button-box-text{
  height:50px;
  padding:10px 24px;
  background-color:#fff;
  border-radius:70px;
  justify-content:center;
  align-items:center;
  display:flex;
}
.button-text{ color:#101010; }
.button-box-icon{
  border-radius:50%;
  background-color:#101010;
  justify-content:center;
  align-items:center;
  width:50px; min-width:50px; height:50px;
  display:flex;
  position:relative;
  overflow:hidden;
}
.button-icon-front{ width:24px; display:flex; position:relative; }
.button-icon-back{ width:24px; display:flex; position:absolute; }
.button-box-icon img{ width:100%; height:auto; display:block; }

.button-icon-front,
.button-icon-back{
  transition:transform 480ms ease;
  will-change:transform;
}
.button-icon-front{ transform:translateX(0); }
.button-icon-back{ transform:translateX(-50px); }
.white-button:hover .button-icon-front,
.white-button:focus-visible .button-icon-front{ transform:translateX(50px); }
.white-button:hover .button-icon-back,
.white-button:focus-visible .button-icon-back{ transform:translateX(0); }

/* the home page steps these down below 991px */
@media screen and (max-width:991px){
  .white-button{ font-size:14px; }
  .button-box-text{ height:44px; }
  .button-box-icon{ width:44px; min-width:44px; height:44px; }
  .button-icon-front,.button-icon-back{ width:18px; }
}



/* the awards CTA sat flush against the paragraph above it */
.aw__more{ display:flex; }
.aw__more .white-button{ margin-top:28px; }


/* --------------------------------------------------------- hero banner --- */
.dm-hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(90px,14vh,160px) clamp(20px,4vw,60px) clamp(60px,9vh,110px);
  background:var(--void);
  overflow:hidden;
  isolation:isolate;
}

/* three slow-drifting colour fields - the "aurora" behind the headline */
.dm-hero__aurora{
  position:absolute; inset:-25%; z-index:0; pointer-events:none;
  filter:blur(80px); opacity:.55;
}
.dm-hero__aurora i{
  position:absolute; display:block; border-radius:50%;
  mix-blend-mode:screen;
}
.dm-hero__aurora i:nth-child(1){
  width:52%; aspect-ratio:1; left:8%; top:12%;
  background:radial-gradient(circle,#de1a39 0%,rgba(222,26,57,0) 68%);
  animation:dm-drift-a 19s ease-in-out infinite;
}
.dm-hero__aurora i:nth-child(2){
  width:44%; aspect-ratio:1; right:6%; top:22%;
  background:radial-gradient(circle,#f73737 0%,rgba(247,55,55,0) 68%);
  animation:dm-drift-b 24s ease-in-out infinite;
}
.dm-hero__aurora i:nth-child(3){
  width:60%; aspect-ratio:1; left:26%; bottom:-14%;
  background:radial-gradient(circle,#7a0c1e 0%,rgba(122,12,30,0) 70%);
  animation:dm-drift-c 29s ease-in-out infinite;
}
@keyframes dm-drift-a{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(9%,7%,0) scale(1.16)} }
@keyframes dm-drift-b{ 0%,100%{transform:translate3d(0,0,0) scale(1.08)} 50%{transform:translate3d(-11%,10%,0) scale(.92)} }
@keyframes dm-drift-c{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(7%,-9%,0) scale(1.2)} }

/* fine grain so the gradients don't band on large screens */
.dm-hero__grain{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.35'/></svg>");
}

/* a faint ruled grid, the structural counterpoint to the soft gradients */
.dm-hero__grid{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  mask-image:radial-gradient(ellipse 80% 65% at 50% 45%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 45%, #000 25%, transparent 78%);
}

.dm-hero__in{ position:relative; z-index:3; width:100%; max-width:1390px; margin-inline:auto; }

.dm-hero__eyebrow{
  margin:0 0 clamp(16px,2.4vh,26px);
  color:var(--accent-soft); font-size:14px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
}

.dm-hero__h1{
  margin:0 0 clamp(18px,2.6vh,28px);
  color:#fff; font-family:var(--dm-head);
  font-size:clamp(38px,6.4vw,104px); line-height:.98;
  letter-spacing:-.028em; text-transform:uppercase;
  max-width:15ch;
}
/* each line rises into place, one after the next */
.dm-hero__h1 span{ display:block; overflow:hidden; }
.dm-hero__h1 span > i{
  display:block; font-style:normal;
  transform:translateY(105%);
  animation:dm-rise .95s cubic-bezier(.16,.84,.3,1) forwards;
}
.dm-hero__h1 span:nth-child(1) > i{ animation-delay:.10s; }
.dm-hero__h1 span:nth-child(2) > i{ animation-delay:.22s; }
.dm-hero__h1 span:nth-child(3) > i{ animation-delay:.34s; }
@keyframes dm-rise{ to{ transform:translateY(0); } }

.dm-hero__lead{
  margin:0; max-width:62ch;
  color:var(--gray); font-size:clamp(15px,1.15vw,19px); line-height:1.6;
  opacity:0; animation:dm-fade .9s ease .5s forwards;
}
.dm-hero__cta{
  display:flex; flex-wrap:wrap; gap:14px;
  margin-top:clamp(26px,3.8vh,44px);
  opacity:0; animation:dm-fade .9s ease .66s forwards;
}
@keyframes dm-fade{ to{ opacity:1; } }

.dm-hero__scroll{
  position:absolute; left:50%; bottom:clamp(20px,3.4vh,38px); z-index:3;
  translate:-50% 0; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--gray); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  opacity:0; animation:dm-fade .9s ease 1s forwards;
}
.dm-hero__scroll::after{
  content:""; width:1px; height:44px;
  background:linear-gradient(to bottom, var(--accent-soft), transparent);
  animation:dm-pulse 2.1s ease-in-out infinite;
}
@keyframes dm-pulse{ 0%,100%{opacity:.25; transform:scaleY(.65); transform-origin:top} 50%{opacity:1; transform:scaleY(1); transform-origin:top} }

@media screen and (max-width:767px){
  .dm-hero{ min-height:88vh; }
  .dm-hero__h1{ max-width:100%; }
  .dm-hero__scroll{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  .dm-hero__aurora i{ animation:none; }
  .dm-hero__h1 span > i{ animation:none; transform:none; }
  .dm-hero__lead,.dm-hero__cta,.dm-hero__scroll{ animation:none; opacity:1; }
  .dm-hero__scroll::after{ animation:none; }
  .white-button .button-icon-front,.white-button .button-icon-back{ transition:none; }
}

/* ------------------------------------------------------------- agency ----
   No scrim behind the copy and no treatment on the plates: they show at their
   own brightness, as they did before. */
.agency__text .inner::before { content: none; }
.agency__imgs figure::after { content: none; }
.agency__imgs figure { border-radius: 14px; }
.agency__imgs img { filter: none; }