:root{
    --bg:#0d0d0d;
    --paper:#F5F4F0;
    --ink-on-paper:#0d0d0d;
    --ink:#0d0d0d;
    --fg:#ffffff;
    --accent:#C4171C;
    --accent-deep:#8e1015;   /* the hover fill over an already-red button */
    --accent-lift:#ef4a50;   /* lightened, for accent text on the dark ground */
    --on-accent:#ffffff;     /* text on the accent fill */
    --eyebrow:#F3DD94;
    --eyebrow-dim:#EBD382;
    --grey:#818181;
    --radius:6px;
    --pad:clamp(20px,5.5vw,190px);
    --font-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
    --font-body:"Jost","Helvetica Neue",Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;
    background:var(--paper);
    color:var(--fg);
    font-family:var(--font-body);
    font-size:20px;
    line-height:1.24;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  ul{list-style:none;margin:0;padding:0}

  /* ---------- header ---------- */
  .site-header{
    position:fixed;
    inset:0 0 auto;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:clamp(20px,1.4vw,48px) var(--pad);
    padding-top:calc(clamp(20px,1.4vw,48px) + env(safe-area-inset-top,0px));
    background:rgba(13,13,13,.55);
    backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;
    transition:padding .25s ease,border-color .25s ease,background .25s ease;
  }
  /* scrolled: slimmer bar with a hairline under it */
  .site-header:not(.is-top){
    padding-top:calc(clamp(7px,.5vw,17px) + env(safe-area-inset-top,0px));
    padding-bottom:clamp(7px,.5vw,17px);
    background:rgba(13,13,13,.82);
    border-bottom-color:rgba(255,255,255,.16);
  }
  .site-header__logo img{transition:width .25s ease}
  .site-header:not(.is-top) .site-header__logo img{width:clamp(82px,6.2vw,168px)}
  .site-header__logo img{display:block;width:clamp(104px,8.6vw,300px);height:auto;filter:invert(1)}
  .site-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,85px)}
  .site-nav a{font-size:clamp(14px,.95vw,33px);font-weight:500;transition:color .2s}
  .site-nav a:hover{color:var(--accent-lift)}
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    border-radius:var(--radius);
    font-family:var(--font-display);
    font-weight:600;
    font-style:italic;
    line-height:1;
    white-space:nowrap;
    cursor:pointer;
    border:2px solid transparent;
    position:relative;
    isolation:isolate;
    overflow:hidden;
    transition:background .2s,color .3s,border-color .2s,box-shadow .2s;
  }
  /* hover fill: the leading edge carries the button's own radius, and the fill
     runs past the right edge so that edge clears the button when it settles */
  .btn::before{
    content:"";
    position:absolute;
    z-index:0;
    inset:0 auto 0 0;
    width:calc(100% + 24px);
    background:var(--swipe,var(--accent));
    border-radius:0 var(--radius) var(--radius) 0;
    transform:translateX(-100%);
    transition:transform .5s cubic-bezier(.65,0,.35,1);
  }
  .btn:hover::before{transform:translateX(0)}
  /* the label has to clear the fill, which sits above the button's background */
  .btn__label{position:relative;z-index:1}
  @media (prefers-reduced-motion:reduce){
    .btn::before{transition:none}
  }
  .btn--nav{
    background:var(--accent);
    color:var(--on-accent);
    border-color:var(--accent);
    font-size:clamp(14px,.95vw,33px);
    padding:clamp(11px,.7vw,24px) clamp(20px,1.3vw,45px);
  }
  .btn--nav{--swipe:var(--accent-deep)}
  /* at the top of the page the nav CTA is an outline; it fills in on scroll */
  /* red outline at the top of the page, matching the hero CTA */
  .site-header.is-top .btn--nav{
    background:transparent;
    color:var(--accent-lift);
    border-color:var(--accent);
  }
  /* white outline while the CTA band is in view, so the red button down there
     is the only red one on screen */
  .site-header.is-cta .btn--nav{
    background:transparent;
    color:var(--fg);
    border-color:rgba(255,255,255,.75);
  }
  .site-header.is-top .btn--nav,
  .site-header.is-cta .btn--nav{--swipe:var(--accent)}
  .site-header.is-top .btn--nav:hover,
  .site-header.is-cta .btn--nav:hover{color:var(--on-accent);border-color:var(--accent)}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,clamp(340px,27vw,930px));
    align-items:center;
    column-gap:clamp(28px,4vw,140px);
    min-height:100svh;
    padding:clamp(150px,16vh,210px) var(--pad) clamp(40px,6vh,68px);
    overflow:hidden;
  }
  .hero__artscroll,.hero__artfloat{position:absolute;inset:0;pointer-events:none}
  /* oversized wordmark bleeding off the right edge, masked so it takes the accent */
  .hero__art{
    position:absolute;
    top:59%;
    right:-12vw;
    width:min(80vw,1610px);
    aspect-ratio:3764/843;
    transform:translateY(-50%) rotate(-19deg);
    background:
      radial-gradient(75% 150% at 78% 18%, #e8474d 0%, var(--accent) 38%, #5e0b0f 100%);
    -webkit-mask:url("/assets/logo.svg") no-repeat center/contain;
    mask:url("/assets/logo.svg") no-repeat center/contain;
    opacity:.5;
    pointer-events:none;
  }
  /* the lead column centres in the space above the foot */
  .hero__lead{position:relative;z-index:2;width:100%}

  /* same treatment as the form's eyebrow */
  .hero__script{
    display:block;
    margin:0 0 .7vw;
    font-family:var(--font-body);
    font-size:20px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    line-height:1;
    color:var(--eyebrow);
  }
  .hero__title{
    margin:0;
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px,3.5vw,120px);
    line-height:1.04;
    letter-spacing:-.015em;
    text-transform:uppercase;
    max-width:100%;
  }
  /* each rendered line gets a clipping wrapper so it can slide up from nothing */
  .hero__title .line{display:block;overflow:hidden}
  .hero__title .line > span{display:block;will-change:transform}

  .hero__ctas{display:flex;flex-wrap:wrap;gap:clamp(12px,.9vw,31px);margin-top:clamp(22px,2.3vw,80px)}
  .btn--hero{
    font-size:clamp(14px,.95vw,33px);
    padding:clamp(11px,.7vw,24px) clamp(20px,1.3vw,45px);
    background:var(--accent);
    color:var(--on-accent);
    animation:cta-pulse 2.4s cubic-bezier(.3,0,.4,1) infinite;
  }
  .btn--hero{--swipe:var(--accent-deep)}
  @keyframes cta-pulse{
    0%   {box-shadow:0 0 0 0 rgba(196,23,28,.6)}
    70%  {box-shadow:0 0 0 20px rgba(196,23,28,0)}
    100% {box-shadow:0 0 0 0 rgba(196,23,28,0)}
  }
  @media (prefers-reduced-motion:reduce){
    .btn--hero{animation:none;box-shadow:0 0 0 6px rgba(196,23,28,.22)}
  }
  .btn--ghost{
    --swipe:var(--accent);
    font-size:clamp(14px,.95vw,33px);
    padding:clamp(11px,.7vw,24px) clamp(20px,1.3vw,45px);
    background:transparent;
    color:var(--accent-lift);
    border-color:var(--accent);
    transition:color .3s ease;
  }
  .btn--ghost:hover{color:var(--on-accent);border-color:var(--accent)}

  /* bottom-right copy block, as on the reference */
  .hero__copy{
    max-width:min(92%,44vw);
    margin:clamp(20px,2.2vw,76px) 0 0;
    font-size:clamp(14px,.82vw,28px);
    line-height:1.45;
  }

  /* awards row — sits under the copy block, as on the reference */
  .awards{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:clamp(18px,2.75vw,95px);
    margin-top:clamp(18px,2vw,70px);
  }
  .awards img{
    display:block;
    width:auto;
    height:clamp(48px,4.2vw,145px);
    opacity:.92;
  }
  /* the partner lockups are wide and short, so cap them by width instead */
  .awards img[alt$="Partner"]{height:auto;width:clamp(86px,7.95vw,275px)}


  /* ---------- hero form ---------- */
  .hero__form{position:relative;z-index:2;width:100%}
  .quote{
    margin-left:auto;
    width:100%;
    max-width:clamp(340px,27vw,930px);
    padding:clamp(26px,2.3vw,79px);
    border:1px solid rgba(255,255,255,.14);
    border-radius:clamp(8px,.5vw,17px);
    background:linear-gradient(180deg,#262626 0%,#1b1b1b 45%,#0f0f0f 100%);
    box-shadow:0 28px 80px rgba(0,0,0,.55);
  }
  .quote__eyebrow{
    margin:0 0 .3vw;
    font-size:clamp(10px,.55vw,19px);
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--eyebrow);
  }
  .quote__rule{
    height:1px;
    margin:clamp(12px,.9vw,31px) 0 clamp(18px,1.4vw,48px);
    border:0;
    background:var(--accent);
  }
  .quote__title{
    margin:0;
    font-family:var(--font-display);
    font-weight:600;
    font-style:italic;
    font-size:clamp(18px,1.3vw,45px);
    line-height:1.15;
    letter-spacing:-.01em;
  }
  .field{margin-bottom:clamp(18px,1.3vw,45px)}
  .field-row{display:flex;gap:clamp(16px,1.4vw,48px)}
  .field-row .field{flex:1 1 0;min-width:0}
  .sr-only{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    border:0;
  }

  /* underline fields: no boxes, just a rule that lights up on focus */
  .field input,
  .field textarea,
  .field select{
    width:100%;
    padding:clamp(5px,.35vw,12px) 0;
    border:0;
    border-bottom:1px solid #ffffff;
    border-radius:0;
    background:transparent;
    color:var(--fg);
    font-family:var(--font-body);
    font-size:clamp(13.5px,.8vw,28px);
    line-height:1.4;
    transition:border-color .2s,box-shadow .2s;
  }
  .field textarea{resize:vertical;min-height:clamp(56px,3.2vw,110px)}
  .field input:focus,
  .field textarea:focus,
  .field select:focus{
    outline:none;
    border-bottom-color:var(--accent-lift);
    box-shadow:0 1px 0 0 var(--accent-lift);
  }
  .field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.42)}
  .select select:invalid{color:rgba(255,255,255,.42)}

  .select{position:relative}
  .select select{
    appearance:none;-webkit-appearance:none;
    padding-right:clamp(22px,1.4vw,40px);
    text-overflow:ellipsis;
    cursor:pointer;
  }
  .select::after{
    content:"";
    position:absolute;
    top:42%;
    right:4px;
    width:8px;height:8px;
    margin-top:-5px;
    border-right:2px solid rgba(255,255,255,.55);
    border-bottom:2px solid rgba(255,255,255,.55);
    transform:rotate(45deg);
    pointer-events:none;
  }
  .select option{background:#141414;color:#fff}

  .quote__send{width:100%;margin-top:clamp(8px,.7vw,24px);padding:clamp(13px,.78vw,27px) clamp(20px,1.3vw,45px);font-size:clamp(15px,.85vw,29px)}

  /* ---------- section: two jobs ---------- */
  .jobs{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,42%);
    align-items:center;
    column-gap:clamp(32px,4.5vw,155px);
    padding:clamp(72px,6.5vw,224px) var(--pad);
  }
  .eyebrow{
    margin:0 0 clamp(14px,1.1vw,38px);
    font-size:clamp(10px,.55vw,19px);
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--eyebrow);
  }
  .jobs__title{
    margin:0;
    font-family:var(--font-display);
    font-weight:600;
    font-style:italic;
    font-size:clamp(28px,2.8vw,96px);
    line-height:1.08;
    letter-spacing:-.015em;
    max-width:14ch;
  }
  .jobs__intro{
    /* the rule used to carry this gap */
    margin:clamp(18px,1.5vw,52px) 0 clamp(26px,2.2vw,76px);
    max-width:58ch;
    font-size:clamp(15px,.95vw,32px);
    line-height:1.5;
    color:rgba(255,255,255,.72);
  }
  .jobs__cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
    gap:clamp(14px,1.1vw,38px);
  }
  .card{
    padding:clamp(20px,1.5vw,52px);
    border:1px solid rgba(255,255,255,.14);
    border-radius:clamp(8px,.5vw,17px);
    background:rgba(255,255,255,.035);
  }
  .card h3{
    margin:0 0 clamp(10px,.7vw,24px);
    font-family:var(--font-display);
    font-weight:600;
    font-style:italic;
    font-size:clamp(18px,1.25vw,43px);
    line-height:1.15;
  }
  .card p{
    margin:0 0 clamp(16px,1.2vw,41px);
    font-size:clamp(14px,.82vw,28px);
    line-height:1.45;
    color:rgba(255,255,255,.66);
  }
  .card a{
    display:inline-flex;
    align-items:center;
    gap:.5em;
    font-size:clamp(13px,.78vw,27px);
    font-weight:600;
    color:var(--fg);
    transition:color .2s,gap .2s;
  }
  .card a:hover{color:var(--accent-lift);gap:.8em}

  /* right-hand visual: a placeholder frame until artwork lands */
  .jobs__media{
    position:relative;
    aspect-ratio:1/1;
    border-radius:clamp(10px,.7vw,24px);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    background:
      radial-gradient(120% 90% at 70% 15%, rgba(196,23,28,.5), transparent 62%),
      linear-gradient(170deg, #1a1a1a, #0d0d0d 65%);
  }
  .jobs__media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    z-index:1;
  }
  .jobs__media::after{
    content:"";
    position:absolute;
    inset:12% 8%;
    background:var(--accent);
    opacity:.16;
    -webkit-mask:url("/assets/logo.svg") no-repeat center/contain;
    mask:url("/assets/logo.svg") no-repeat center/contain;
  }

  /* the same wedge between hero and clients, drawn as a hairline only.
     preserveAspectRatio:none stretches the path to any width, and
     non-scaling-stroke keeps the line 1px while it does. */
  .wedge{
    display:block;
    width:100%;
    height:clamp(70px,8vw,275px);
  }
  .wedge path{
    fill:none;
    stroke:rgba(255,255,255,.16);
    stroke-width:1;
    vector-effect:non-scaling-stroke;
  }

  /* once a real image is in the frame, the placeholder mark and its tint go */
  .jobs__media:has(img)::after,
  .why__media:has(img)::after{content:none}
  /* the phone sits straight on the page, no frame around it */
  .why__media:has(img){background:none;border:0;border-radius:0;overflow:visible}
  .jobs__media:has(img){background:none;border:0;border-radius:0;overflow:visible}

  /* ---------- section: clients ---------- */
  .clients{padding:clamp(64px,5.5vw,190px) 0}
  .clients__head{padding:0 var(--pad)}
  .clients__title{
    margin:0 0 clamp(34px,3vw,104px);
    font-family:var(--font-display);
    font-weight:600;
    font-style:italic;
    font-size:clamp(26px,2.4vw,82px);
    line-height:1.1;
    letter-spacing:-.015em;
  }

  .marquee{
    overflow:hidden;
    /* fade the strip into the page at both ends */
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .marquee + .marquee{margin-top:clamp(26px,2.4vw,82px)}
  .marquee__track{
    display:flex;
    align-items:center;
    gap:clamp(34px,3.4vw,116px);
    width:max-content;
    padding-left:clamp(34px,3.4vw,116px);
    animation:marquee 46s linear infinite;
  }
  /* the track holds the same run of logos twice, so -50% lands back at the start */
  @keyframes marquee{to{transform:translateX(-50%)}}
  .marquee--rev .marquee__track{animation-direction:reverse}
  .marquee:hover .marquee__track{animation-play-state:paused}

  .client{
    flex:0 0 auto;
    display:grid;
    place-items:center;
    width:clamp(120px,9vw,310px);
    height:clamp(44px,3.4vw,116px);
    opacity:.78;
  }
  .client img{max-width:100%;max-height:100%;object-fit:contain}
  /* placeholder tile, shown until a real logo file is dropped in */
  .client--empty{
    border:1px dashed rgba(255,255,255,.2);
    border-radius:6px;
    font-size:clamp(10px,.55vw,19px);
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(255,255,255,.3);
    opacity:1;
  }

  @media (prefers-reduced-motion:reduce){
    .marquee{overflow-x:auto}
    .marquee__track{animation:none}
  }

  /* the dark part of the page is one slab, rounded off where the paper starts */
  /* Two stacked layers make the edge: the outer is clipped to the full V and
     painted yellow; the inner carries the same V raised by --edge, so the
     yellow only shows as a band along the angle. clip-path cannot take a
     border, so the stroke has to come from the layer behind it. */
  .slab-edge{
    --notch:clamp(70px,8vw,275px);
    --edge:clamp(9px,1.05vw,36px);
    background:var(--eyebrow);
    clip-path:polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--notch)),
      50% 100%,
      0 calc(100% - var(--notch))
    );
  }
  .slab--dark{
    background:var(--bg);
    padding-bottom:calc(var(--notch) + var(--edge));
    clip-path:polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--notch) - var(--edge)),
      50% calc(100% - var(--edge)),
      0 calc(100% - var(--notch) - var(--edge))
    );
  }

  /* ---------- section: verticals (paper) ---------- */
  .verts{
    background:var(--paper);
    color:var(--ink-on-paper);
    padding:clamp(64px,6vw,206px) var(--pad);
  }
  .verts__title{
    margin:0 0 clamp(28px,2.4vw,82px);
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(30px,3.5vw,120px);   /* same scale as the hero headline */
    line-height:1.04;
    letter-spacing:-.015em;
    text-transform:uppercase;
    max-width:96%;
  }
  .verts__grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(14px,1.1vw,38px);
  }
  @media (max-width:1240px){ .verts__grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
  @media (max-width:880px){ .verts__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:560px){ .verts__grid{grid-template-columns:minmax(0,1fr)} }
  .vert{
    padding:clamp(20px,1.6vw,55px);
    border:1px solid rgba(13,13,13,.09);
    border-radius:clamp(8px,.5vw,17px);
    background:#ffffff;
  }
  .vert__icon{
    display:block;
    width:clamp(26px,1.7vw,58px);
    height:auto;
    margin:0 0 clamp(14px,1vw,34px);
    color:var(--accent);
  }
  .vert h3{
    margin:0 0 clamp(8px,.55vw,19px);
    font-family:var(--font-display);
    font-weight:600;
    font-style:italic;
    font-size:clamp(18px,1.25vw,43px);
    line-height:1.15;
  }
  .vert p{
    margin:0;
    font-size:clamp(14px,.85vw,29px);
    line-height:1.45;
    color:rgba(13,13,13,.68);
  }

  /* ---------- section: how we work (paper) ---------- */
  .why{
    background:var(--paper);
    color:var(--ink-on-paper);
    display:grid;
    grid-template-columns:minmax(0,42%) minmax(0,1fr);
    align-items:center;
    column-gap:clamp(32px,4.5vw,155px);
    padding:clamp(40px,3vw,104px) var(--pad) clamp(72px,6.5vw,224px);
  }
  .why__list{display:grid;gap:clamp(28px,2.9vw,99px)}
  .why__item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    column-gap:clamp(12px,.95vw,32px);
  }
  .why__tick{
    grid-row:1 / 3;
    width:clamp(22px,1.55vw,53px);
    height:auto;
    margin-top:.12em;
    color:var(--accent);
  }
  .why__item h3{
    grid-column:2;
    margin:0 0 clamp(8px,.6vw,21px);
    font-family:var(--font-display);
    font-weight:600;
    font-style:italic;
    font-size:clamp(21px,1.65vw,57px);
    line-height:1.15;
    letter-spacing:-.01em;
  }
  .why__item p{
    grid-column:2;
    margin:0;
    max-width:42ch;
    font-size:clamp(15px,1.05vw,36px);
    line-height:1.5;
    color:rgba(13,13,13,.66);
  }
  /* right-hand visual: placeholder frame on paper until artwork lands */
  .why__media{
    position:relative;
    aspect-ratio:1/1;
    border-radius:clamp(10px,.7vw,24px);
    overflow:hidden;
    border:1px solid rgba(13,13,13,.1);
    background:
      radial-gradient(120% 90% at 70% 15%, rgba(196,23,28,.14), transparent 62%),
      linear-gradient(170deg, #ffffff, #e9e7e1 70%);
  }
  .why__media img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    z-index:1;
  }
  .why__media::after{
    content:"";
    position:absolute;
    inset:12% 8%;
    background:var(--accent);
    opacity:.14;
    -webkit-mask:url("/assets/logo.svg") no-repeat center/contain;
    mask:url("/assets/logo.svg") no-repeat center/contain;
  }

  /* ---------- CTA band above the footer ---------- */
  .cta{
    background:var(--eyebrow);
    color:var(--ink-on-paper);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:clamp(24px,3vw,104px);
    flex-wrap:wrap;
    --cta-pad:clamp(56px,5vw,172px);
    --chev:clamp(34px,5.4vw,185px);
    position:relative;
    overflow:hidden;
    padding:var(--cta-pad) var(--pad);
  }
  .cta__title{
    margin:0;
    font-family:var(--font-display);
    font-weight:600;
    font-style:italic;
    font-size:clamp(28px,3.1vw,106px);
    line-height:1.06;
    letter-spacing:-.015em;
    white-space:nowrap;
  }
  .cta__sub{
    margin:clamp(10px,.8vw,27px) 0 0;
    font-size:clamp(16px,1.15vw,39px);
    line-height:1.4;
    white-space:nowrap;
    color:rgba(13,13,13,.72);
  }
  /* the chevron is the seam between two yellows rather than a drawn line:
     everything right of it is a shade down, clipped so its left edge is the
     chevron itself */
  .cta__arrow{
    flex:1 1 90px;
    min-width:60px;
    align-self:stretch;
    margin-block:calc(var(--cta-pad) * -1);
    position:relative;
  }
  .cta__arrow::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:calc(50% - var(--chev) / 2);
    right:-100vw;
    background:var(--eyebrow-dim);
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--chev) 50%);
  }
  .cta .btn{
    flex:0 0 auto;
    z-index:1;
    font-size:clamp(18px,1.55vw,53px);
    padding:clamp(18px,1.2vw,41px) clamp(28px,2.1vw,72px);
  }

  /* ---------- footer ---------- */
  .site-footer{
    position:relative;
    background:var(--bg);
    color:var(--fg);
    padding:clamp(56px,5vw,172px) var(--pad) 0;
  }
  .site-footer::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:clamp(50px,5vw,172px);
    background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
    pointer-events:none;
  }
  .foot__top{
    display:grid;
    grid-template-columns:1.7fr repeat(3,1fr);
    gap:clamp(28px,3vw,104px);
    padding-bottom:clamp(44px,4vw,138px);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  /* the logo file carries the tagline too, so the box crops to the mark */
  .foot__mark{
    width:clamp(132px,11vw,378px);
    aspect-ratio:1000/150;
    overflow:hidden;
  }
  /* the mark sits a touch off pure white so it reads as a footer lockup */
  .foot__mark img{display:block;width:100%;height:auto;filter:invert(1) brightness(.78)}
  .foot__brand p{
    margin:clamp(16px,1.2vw,41px) 0 0;
    max-width:34ch;
    font-size:clamp(14px,.85vw,29px);
    line-height:1.5;
    color:rgba(255,255,255,.6);
  }
  .foot__col h3{
    margin:0 0 clamp(14px,1vw,34px);
    font-size:clamp(10px,.55vw,19px);
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--eyebrow);
  }
  .foot__col ul{display:grid;gap:clamp(9px,.65vw,22px)}
  .foot__col a{
    font-size:clamp(14px,.85vw,29px);
    color:rgba(255,255,255,.78);
    transition:color .2s;
  }
  .foot__col a:hover{color:var(--accent-lift)}

  /* full-width wordmark closing the page: the DEMAND ENGINE lettering cropped
     out of the logo file, so it is the real mark rather than text set in
     Archivo. The band runs from 83.27% to 99.8% of the logo's height. */
  /* The DEMAND ENGINE lettering cropped out of the logo file so it is the real
     mark, not text set in Archivo. Its ink sits at 8.75%-91.65% across and
     83.27%-99.8% down the file, so the image is blown up to 126% and pulled
     left so the lettering crosses the column and bleeds a little each side; the box is shorter than
     the band, which crops the glyph feet at the page edge. */
  .foot__word{
    margin:clamp(26px,2.4vw,82px) calc(var(--pad) * -1) 0;
    aspect-ratio:24.36 / 1;
    overflow:hidden;
    position:relative;
  }
  .foot__word img{
    position:absolute;
    top:0;
    left:-10.55%;
    width:120.63%;
    height:auto;
    transform:translateY(-83.27%);
    filter:invert(1);
    opacity:.12;
  }

  @media (max-width:860px){
    .site-nav{display:none}
    .hero{padding-top:clamp(140px,22vh,200px)}
    .hero__art{width:175vw;right:-55vw;opacity:.42;transform:translateY(-50%) rotate(-19deg)}
    .hero{grid-template-columns:minmax(0,1fr);row-gap:clamp(34px,6vh,56px)}
    .quote{max-width:none;margin-left:0}
    .field-row{flex-direction:column;gap:0}
    .hero__title{max-width:none;font-size:clamp(29px,7.4vw,44px)}
    .hero__copy{max-width:none;font-size:15px}
    .marquee__track{animation-duration:30s}
    .jobs{grid-template-columns:minmax(0,1fr);row-gap:clamp(30px,6vh,52px)}
    .jobs__title{max-width:none}
    .verts__title{max-width:none;font-size:clamp(29px,7.4vw,44px)}
    .jobs__media{aspect-ratio:4/3;order:-1}
    .why{grid-template-columns:minmax(0,1fr);row-gap:clamp(30px,6vh,52px)}
    .cta__arrow{display:none}
    .cta__title,.cta__sub{white-space:normal}
    .foot__top{grid-template-columns:repeat(2,minmax(0,1fr))}
    .foot__brand{grid-column:1 / -1}
    .why__media{aspect-ratio:4/3}
    /* 16px keeps iOS from zooming the page on focus */
    .field input,.field textarea,.field select{font-size:16px}
    .btn--hero,.btn--ghost{flex:1 1 100%;padding:16px 26px}
    .awards{gap:18px}
    .awards img{height:54px}
  }

/* ============================================================
   SHARED PAGE COMPONENTS
   Everything below is reused across the inner pages. The home
   page keeps its own hero/jobs/why blocks above; these are the
   generic versions of the same patterns so About, Services,
   Pricing and Contact are built from one kit.
   ============================================================ */

/* the nav marks the page you are on */
.site-nav a.is-active{color:var(--eyebrow)}

/* ---------- inner-page hero ----------
   same ground, art and type as the home hero, but one column and
   only as tall as its content needs */
.hero--inner{
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  min-height:0;
  padding:clamp(150px,19vh,300px) var(--pad) clamp(40px,3.5vw,120px);
}
.hero--inner .hero__lead{max-width:min(100%,72vw)}
.hero--inner .hero__copy{max-width:min(100%,52vw)}
.hero--inner .hero__art{opacity:.42}
/* the inner hero is shorter than the home one, so the rotated wordmark
   is scaled down to sit whole inside it rather than being cut off */
.hero--inner .hero__art{width:min(36vw,860px);right:0;top:60%}

/* ---------- bands ---------- */
.band{padding:clamp(72px,6.5vw,224px) var(--pad)}
.band--tight{padding-top:clamp(40px,3vw,104px)}
.band--paper{background:var(--paper);color:var(--ink-on-paper)}
.band--paper + .band--paper{padding-top:clamp(24px,2vw,69px)}
/* yellow eyebrows vanish on paper, so they go red there */
.band--paper .eyebrow{color:var(--accent)}

/* ---------- split: copy one side, picture the other ----------
   .split     copy left, picture right
   .split--rev  picture left, copy right (put the media first in the DOM) */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,42%);
  align-items:center;
  column-gap:clamp(32px,4.5vw,155px);
}
.split--rev{grid-template-columns:minmax(0,42%) minmax(0,1fr)}
.split + .split{margin-top:clamp(64px,6vw,206px)}

/* the same placeholder frame as the home page: a logo-masked panel that
   disappears the moment a real image is dropped in */
.split__media{
  position:relative;
  aspect-ratio:1/1;
  border-radius:clamp(10px,.7vw,24px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 90% at 70% 15%, rgba(196,23,28,.5), transparent 62%),
    linear-gradient(170deg, #1a1a1a, #0d0d0d 65%);
}
.band--paper .split__media{
  border-color:rgba(13,13,13,.1);
  background:
    radial-gradient(120% 90% at 70% 15%, rgba(196,23,28,.14), transparent 62%),
    linear-gradient(170deg, #ffffff, #e9e7e1 70%);
}
.split__media img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  display:block;z-index:1;
}
.split__media::after{
  content:"";
  position:absolute;
  inset:12% 8%;
  background:var(--accent);
  opacity:.16;
  -webkit-mask:url("/assets/logo.svg") no-repeat center/contain;
  mask:url("/assets/logo.svg") no-repeat center/contain;
}
.band--paper .split__media::after{opacity:.14}
.split__media:has(img)::after{content:none}
.split__media:has(img),
.band--paper .split__media:has(img){background:none;border:0;border-radius:0;overflow:visible}
/* a placeholder says which picture it is waiting for */
.split__media[data-label]::before{
  content:attr(data-label);
  position:absolute;
  left:clamp(14px,1.1vw,38px);
  bottom:clamp(12px,1vw,34px);
  z-index:2;
  font-size:clamp(10px,.55vw,19px);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
.band--paper .split__media[data-label]::before{color:rgba(13,13,13,.38)}
.split__media[data-label]:has(img)::before{content:none}
/* a portrait frame keeps its crop instead of letterboxing */
.split__media--portrait{aspect-ratio:4/5}
.split__media--wide{aspect-ratio:4/3}
/* a real photograph fills its frame with rounded corners */
.split__media--photo img{object-fit:cover;border-radius:clamp(10px,.7vw,24px)}

/* ---------- a picture faded into a section ----------
   sits behind the right of the section and fades out to the left, top and
   bottom, so the copy reads on plain ground */
.band--photo{position:relative;overflow:hidden;isolation:isolate}
.band--photo::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0 0 0 34%;
  background:var(--bg-photo) center/cover no-repeat;
  opacity:var(--bg-opacity,.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-composite:intersect;
}
@media (max-width:860px){ .band--photo::before{inset:0;opacity:calc(var(--bg-opacity,.6) * .5)} }

/* ---------- section headings ---------- */
.sec__title{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(28px,2.8vw,96px);
  line-height:1.08;
  letter-spacing:-.015em;
  max-width:16ch;
}
/* the uppercase, roman variant, at hero scale */
.sec__title--loud{
  font-style:normal;
  text-transform:uppercase;
  font-size:clamp(30px,3.5vw,120px);
  line-height:1.04;
  max-width:96%;
}
.sec__title--wide{max-width:26ch}
.sec__lede{
  margin:clamp(18px,1.5vw,52px) 0 0;
  max-width:58ch;
  font-size:clamp(15px,.95vw,32px);
  line-height:1.5;
  color:rgba(255,255,255,.72);
}
.band--paper .sec__lede{color:rgba(13,13,13,.68)}
.sec__title + .prose{margin-top:clamp(18px,1.5vw,52px)}
.sec__title + .steps,
.sec__title + .verts__grid{margin-top:clamp(28px,2.4vw,82px)}

/* ---------- prose ---------- */
.prose p{
  margin:clamp(16px,1.2vw,41px) 0 0;
  max-width:54ch;
  font-size:clamp(15px,.95vw,32px);
  line-height:1.55;
  color:rgba(255,255,255,.72);
}
.band--paper .prose p{color:rgba(13,13,13,.68)}
.prose > p:first-child{margin-top:0}

/* ---------- a list with red ticks ---------- */
.ticks{display:grid;gap:clamp(14px,1.1vw,38px);margin:clamp(22px,1.8vw,62px) 0 0}
.ticks li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(12px,.9vw,31px);
  align-items:start;
  font-size:clamp(14px,.88vw,30px);
  line-height:1.5;
  color:rgba(255,255,255,.74);
}
.band--paper .ticks li{color:rgba(13,13,13,.7)}
.ticks li b{color:var(--fg);font-weight:600}
.band--paper .ticks li b{color:var(--ink-on-paper)}
.ticks svg{
  width:clamp(17px,1.15vw,39px);
  height:auto;
  margin-top:.18em;
  color:var(--accent);
  flex:0 0 auto;
}

/* ---------- a list with red crosses (the "not a fit" list) ---------- */
.crosses{display:grid;gap:clamp(14px,1.1vw,38px);margin:clamp(22px,1.8vw,62px) 0 0}
.crosses li{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(12px,.9vw,31px);
  align-items:center;
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(18px,1.4vw,48px);
  line-height:1.25;
}
.crosses svg{width:clamp(20px,1.4vw,48px);height:auto;color:var(--accent)}
.fit{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(32px,4.5vw,155px);
}
.fit .crosses{margin-top:0}
/* the word the sentence turns on */
.hi{color:var(--accent-lift)}

/* ---------- numbered steps ---------- */
.steps{display:grid;gap:clamp(26px,2.6vw,89px)}
.step{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(14px,1.1vw,38px);
}
.step__n{
  grid-row:1 / 3;
  display:grid;
  place-items:center;
  width:clamp(34px,2.4vw,82px);
  height:clamp(34px,2.4vw,82px);
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(15px,1vw,34px);
  line-height:1;
}
.step h3{
  grid-column:2;
  margin:0 0 clamp(6px,.5vw,17px);
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(19px,1.45vw,50px);
  line-height:1.18;
}
.step p{
  grid-column:2;
  margin:0;
  max-width:44ch;
  font-size:clamp(14px,.9vw,31px);
  line-height:1.5;
  color:rgba(255,255,255,.66);
}
.band--paper .step p{color:rgba(13,13,13,.66)}

/* ---------- pull quote ---------- */
.pullquote{
  margin:0;
  padding-left:clamp(18px,1.4vw,48px);
  border-left:3px solid var(--accent);
}
.pullquote p{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-style:italic;
  font-size:clamp(19px,1.5vw,52px);
  line-height:1.32;
  letter-spacing:-.01em;
}
.pullquote .by{
  margin-top:clamp(16px,1.2vw,41px);
  font-family:var(--font-body);
  font-style:normal;
  font-weight:600;
  font-size:clamp(13px,.72vw,25px);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ---------- card grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.1vw,38px)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.1vw,38px)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.1vw,38px)}
.grid-2,.grid-3,.grid-4{margin-top:clamp(28px,2.4vw,82px)}
@media (max-width:1240px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:980px){ .grid-3{grid-template-columns:minmax(0,1fr)} }
@media (max-width:720px){ .grid-2,.grid-4{grid-template-columns:minmax(0,1fr)} }

/* ---------- pricing tiers ---------- */
.tier{display:flex;flex-direction:column}
.tier__name{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(19px,1.35vw,46px);
  line-height:1.15;
}
.tier__price{
  display:block;
  margin:clamp(8px,.6vw,21px) 0 clamp(14px,1vw,34px);
  font-family:var(--font-display);
  font-weight:700;
  font-style:italic;
  font-size:clamp(22px,1.7vw,58px);
  line-height:1.1;
  color:var(--accent);
}
.tier p{margin:0;font-size:clamp(14px,.85vw,29px);line-height:1.5;color:rgba(13,13,13,.68)}

/* ---------- contact details ---------- */
.detail h3{
  margin:0 0 clamp(10px,.7vw,24px);
  font-size:clamp(10px,.55vw,19px);
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
}
.detail p{
  margin:0;
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  font-size:clamp(17px,1.15vw,39px);
  line-height:1.3;
}
.detail a:hover{color:var(--accent)}
/* a detail the client still has to supply */
.tbc{opacity:.45}

/* the contact page runs the hero form, so the lead column can be narrower */
.hero--contact .hero__copy{max-width:min(100%,92%)}

@media (max-width:860px){
  .hero--inner{padding-top:clamp(130px,20vh,190px)}
  .hero--inner .hero__lead,
  .hero--inner .hero__copy{max-width:none}
  .split,.split--rev{grid-template-columns:minmax(0,1fr);row-gap:clamp(30px,6vh,52px)}
  /* the picture leads on a phone, whichever side it sits on wide */
  .split__media{aspect-ratio:4/3;order:-1}
  .sec__title,.sec__title--loud,.sec__title--wide{max-width:none}
  .sec__title--loud{font-size:clamp(29px,7.4vw,44px)}
  .fit{grid-template-columns:minmax(0,1fr)}
  .fit .crosses{margin-top:clamp(22px,5vw,32px)}
  .crosses li{font-size:clamp(17px,4.6vw,24px)}
  .pullquote p{font-size:clamp(18px,4.8vw,26px)}
}