/* ============================================================
   drobe.media — recreation
   Tokens lifted from the live site: ink #1C1C1C, cream #F6EDE2,
   orange #FF7125. Display face is Area Variable on the original
   (Typekit); Bricolage Grotesque is the site's own declared
   fallback, so we use it here.
   ============================================================ */

:root{
  --ink:        #1c1c1c;
  --ink-deep:   #101010;
  --cream:      #f6ede2;
  --cream-dim:  #e6dbcd;
  --orange:     #ff7125;
  --orange-dim: #ff8a4c;

  --line-light: rgba(246,237,226,.16);
  --line-dark:  rgba(28,28,28,.16);

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --label:   "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;

  /* every contained box; full-bleed things (hero, section bands, the
     cookie bar) stay square */
  --radius: 6px;

  /* the reading measure for a section heading and its paragraph */
  --measure: 32.8rem;

  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1240px;
  --nav-h: 76px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--display);
  font-size:20px;
  font-weight:400;
  line-height:1.5;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--orange);color:var(--ink);padding:12px 20px;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- type ---------- */

h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;letter-spacing:.01em}

.h-hero{
  font-size:clamp(2.64rem,7.04vw,4.84rem);   /* +10% */
  line-height:1.02;
  letter-spacing:.02em;
  color:var(--cream);
  max-width:15ch;
}
.h-1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.06;max-width:var(--measure)}
.h-2{font-size:clamp(1.6rem,3vw,2.35rem);line-height:1.12}
.h-3{font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.2}

.dot{color:var(--orange)}

.eyebrow{
  font-family:var(--label);
  font-weight:600;
  font-size:.82rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.7em;
  margin:0 0 .9rem;
}
.eyebrow::before{
  content:"";
  width:1.6em;height:2px;flex:none;
  background:var(--orange);
}
.eyebrow.is-plain::before{display:none}

.lede{font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;max-width:60ch}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */

.btn{
  border-radius:var(--radius);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--label);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:1rem 2.4rem;
  border:1px solid currentColor;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn--light{color:var(--cream)}
.btn--light:hover{background:var(--cream);color:var(--ink)}
.btn--dark{color:var(--ink)}
.btn--dark:hover{background:var(--ink);color:var(--cream)}
.btn--solid{background:var(--orange);border-color:var(--orange);color:#fff}
.btn--solid:hover{background:var(--ink);border-color:var(--ink)}

/* ---------- logo ---------- */

.logo{
  display:inline-flex;align-items:baseline;
  font-family:var(--display);
  font-weight:800;
  font-size:1.6rem;
  letter-spacing:.06em;
  line-height:1;
  color:var(--cream);
  position:relative;
}
.logo .mark{position:relative;display:inline-block;padding-inline:.06em}
/* the wordmark on the original is cut by a diagonal stroke */
.logo .mark::after{
  content:"";
  position:absolute;
  left:-6%;right:-6%;top:50%;
  height:3px;
  background:currentColor;
  transform:translateY(-50%) rotate(-9deg);
}
.logo .dot{font-size:1.15em;line-height:0}
.logo--dark{color:var(--ink)}
.logo--lg{font-size:2.6rem}
/* once the real artwork lands the CSS-drawn wordmark gets out of the way */
.logo.has-logo img{height:1.5em;width:auto;display:block}
/* The animated wordmark (the GIF Kim supplied: 480x125, 91 frames).
   A tight crop - the mark fills all but a few pixels of the frame - so
   1.25em renders it 194px wide, half its former size. */
.logo--lg.has-logo img{height:1.25em}

/* ---------- nav ---------- */

.nav{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .3s ease,box-shadow .3s ease;
}
.nav.is-stuck{background:rgba(16,16,16,.92);backdrop-filter:blur(10px)}
.nav__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.nav__logo{grid-column:2}

.nav__toggle{
  grid-column:3;justify-self:end;
  position:relative;
  width:44px;height:44px;
  color:var(--cream);
}
/* stack the three bars on one centre point so they can fold into an X */
.nav__toggle span{
  position:absolute;
  left:50%;top:50%;
  width:24px;height:2px;
  margin-left:-12px;
  background:currentColor;
  transition:transform .3s ease,opacity .2s ease;
}
.nav__toggle span:nth-child(1){transform:translateY(-8px)}
.nav__toggle span:nth-child(2){transform:translateY(0)}
.nav__toggle span:nth-child(3){transform:translateY(8px)}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(0) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(0) rotate(-45deg)}

/* ---------- overlay menu ---------- */

.menu{
  position:fixed;inset:0;z-index:55;
  background:var(--ink-deep);
  display:grid;place-items:center;
  opacity:0;visibility:hidden;
  transition:opacity .35s ease,visibility .35s ease;
}
.menu::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 60% at 85% 100%, rgba(255,113,37,.34), transparent 70%);
}
.menu.is-open{opacity:1;visibility:visible}
.menu__list{
  list-style:none;margin:0;padding:0;
  position:relative;z-index:1;
  text-align:center;
}
.menu__list li{overflow:hidden}
.menu__list a{
  display:block;
  font-weight:800;
  font-size:clamp(2rem,7vw,3.6rem);
  line-height:1.24;
  letter-spacing:.02em;
  color:var(--cream);
  transform:translateY(110%);
  transition:transform .5s cubic-bezier(.22,1,.36,1),color .2s ease;
}
.menu.is-open .menu__list a{transform:translateY(0)}
.menu__list a:hover,.menu__list a[aria-current="page"]{color:var(--orange)}
.menu__social{
  position:absolute;bottom:clamp(24px,6vh,56px);left:0;right:0;
  z-index:1;display:flex;justify-content:center;gap:18px;
}

/* ---------- hero ---------- */

.hero{
  position:relative;
  /* dark container: text defaults to cream so nothing inside can
     silently inherit the body's ink and disappear into the image */
  color:var(--cream);
  min-height:clamp(340px,54vh,520px);
  display:flex;align-items:flex-end;
  padding:calc(var(--nav-h) + 40px) 0 clamp(48px,8vh,96px);
  background:var(--ink-deep);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(90% 80% at 80% 110%, rgba(255,113,37,.55), transparent 62%),
    radial-gradient(70% 60% at 12% 0%, rgba(90,110,140,.38), transparent 64%),
    linear-gradient(170deg,#1f2227 0%,#141414 48%,#0d0b0a 100%);
}
/* faint film grain / scanline so the flat gradient reads as footage */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,10,10,.72) 0%,rgba(10,10,10,.15) 55%,transparent 100%);
}

/* real photography / video sits behind the gradient, which then drops
   back to a tint so the warm grade still reads over the footage */
.hero__photo,.hero__video{
  position:absolute;inset:0;z-index:-3;
  width:100%;height:100%;
  object-fit:cover;
  background-size:cover;
  background-position:center;
}
.hero.has-media .hero__bg{opacity:.62}
.hero.has-media .hero__bg::after{opacity:.5}
.hero.has-video .hero__photo{display:none}
.hero__sub{
  margin:1.6rem 0 0;
  font-family:var(--label);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cream);
}
/* The front page opens on one full screen: the hero fills whatever is
   left once the stats bar has taken its height, so the bar always sits
   at the foot of the first screen rather than below the fold or
   floating. dvh follows mobile browser chrome as it hides and shows. */
.first-screen{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.first-screen > .hero{flex:1 0 auto;min-height:340px}
.first-screen > .sec{flex:0 0 auto}
/* On a short screen — a laptop with the dock and a couple of toolbars
   eating into it — the hero's padding and the stats bar's own padding
   together outrun the viewport and push the bar below the fold. The
   stats padding is vw-based, so width alone never catches this. Tighten
   both against height so the first screen still ends where the screen does. */
@media (max-height:760px){
  .first-screen > .hero{
    min-height:0;
    padding-top:calc(var(--nav-h) + 16px);
    padding-bottom:clamp(24px,4vh,48px);
  }
  .first-screen > .sec--tight{padding-block:clamp(24px,4vh,40px)}
}

.hero--warm .hero__bg{
  background:
    radial-gradient(85% 75% at 88% 105%, rgba(255,113,37,.6), transparent 60%),
    linear-gradient(165deg,#241d19 0%,#171311 55%,#0e0b09 100%);
}
.hero--cool .hero__bg{
  background:
    radial-gradient(80% 70% at 78% 108%, rgba(255,113,37,.4), transparent 62%),
    radial-gradient(60% 55% at 20% 10%, rgba(120,140,170,.32), transparent 66%),
    linear-gradient(175deg,#1b1e22 0%,#131313 60%,#0c0a09 100%);
}

/* ---------- sections ---------- */

.sec{padding:clamp(56px,9vw,120px) 0}
.sec--ink{background:var(--ink);color:var(--cream)}
.sec--deep{background:var(--ink-deep);color:var(--cream)}
.sec--cream{background:var(--cream);color:var(--ink)}
.sec--tight{padding-block:clamp(40px,6vw,72px)}

/* Section headings sit a fifth narrower than the hero headline's measure
   - 41rem less 20%. The lede takes the same column rather than a
   narrower one of its own, so the two share a right edge. */
.sec-head{max-width:var(--measure);margin-bottom:clamp(32px,5vw,64px)}
.sec-head .lede{margin-top:1.1rem;max-width:none}

/* ---------- stats ---------- */

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,48px);
  text-align:center;
}
.stat__num{
  font-size:clamp(2.4rem,5vw,3.6rem);
  font-weight:800;
  line-height:1;
  color:var(--orange);
}
.stat__label{
  font-family:var(--label);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:.5rem;
  color:var(--cream);
}

/* ---------- service columns ---------- */

.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px)}
.cols-2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,4vw,64px)}
/* heading on the left, a pair of columns on the right */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(24px,4vw,64px)}
.split > .cols-2{gap:clamp(20px,2.6vw,40px)}

.card{
  border-radius:var(--radius);
  background:var(--cream);
  color:var(--ink);
  border:1px solid var(--line-dark);
  padding:clamp(24px,3vw,40px);
  display:flex;flex-direction:column;
  transition:transform .3s ease;
}
.card:hover{transform:translateY(-4px)}
.card__title{display:flex;align-items:baseline;gap:.4rem;margin-bottom:1rem}
.card__title .dash{color:var(--orange);font-weight:800}
.card p{font-size:1rem;line-height:1.55}

.ticks{list-style:none;margin:1.5rem 0 0;padding:0;font-size:1rem}
.ticks li{
  padding:.55rem 0 .55rem 1.6rem;
  border-top:1px solid var(--line-dark);
  position:relative;
}
/* a round dot, echoing the orange dot that ends every headline */
.ticks li::before{
  content:"";position:absolute;left:0;top:1.15rem;
  width:8px;height:8px;border-radius:50%;background:var(--orange);
}
.sec--ink .ticks li,.sec--deep .ticks li{border-color:var(--line-light)}

/* ---------- process ---------- */

.steps{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.6vw,24px);
  counter-reset:step;
}
.step{
  border-top:2px solid var(--line-light);
  padding-top:1.3rem;
}
.step__num{
  font-family:var(--label);
  font-weight:600;
  font-size:1.1rem;
  letter-spacing:.12em;
  color:var(--orange);
  display:block;
  margin-bottom:.9rem;
}
.step h3{margin-bottom:.7rem}
.step p{font-size:.95rem;line-height:1.5;opacity:.82}

/* ---------- pillars ---------- */

.pillar{border-top:2px solid var(--line-dark);padding-top:1.4rem}
.pillar h3{
  font-family:var(--label);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.pillar p{font-size:1rem;line-height:1.55}
.sec--ink .pillar,.sec--deep .pillar{border-color:var(--line-light)}

.pillar__stat{
  font-size:clamp(2rem,4vw,2.8rem);
  font-weight:800;
  line-height:1;
  color:var(--orange);
  display:block;
  margin-bottom:.8rem;
}

/* ---------- ai block ---------- */

.hash{
  font-family:var(--label);
  font-weight:600;
  letter-spacing:.1em;
  color:var(--orange);
  font-size:.95rem;
  margin-top:1.4rem;
  display:block;
}

/* ---------- work grid ---------- */

.filters{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:clamp(28px,4vw,48px);
}
.filter{
  border-radius:var(--radius);
  font-family:var(--label);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:.6rem 1.3rem;
  border:1px solid var(--line-dark);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
/* orange outline on hover - never on the chip that is already selected */
.filter:not([aria-pressed="true"]):hover{border-color:var(--orange)}

.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.8vw,24px);
}
.case{
  border-radius:var(--radius);
  position:relative;
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--ink);
  color:var(--cream);
}
.case[hidden]{display:none}
.case__bg{
  position:absolute;inset:0;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.case:hover .case__bg{transform:scale(1.06)}
.case__bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,8,8,.85) 0%,rgba(8,8,8,.15) 60%,transparent 100%);
}
.case__body{
  position:absolute;inset:auto 0 0 0;
  padding:clamp(18px,2vw,28px);
  z-index:1;
}
.case__cat{
  font-family:var(--label);
  font-weight:600;
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
  display:block;
  margin-bottom:.4rem;
}
.case__name{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:800;line-height:1.16}

/* six generated cover treatments, so no two cases look alike */
.cv-1{background:linear-gradient(145deg,#2a2f38,#0e1014)}
.cv-2{background:linear-gradient(145deg,#3a2418,#120c08)}
.cv-3{background:linear-gradient(145deg,#1f2a2a,#0b1010)}
.cv-4{background:linear-gradient(145deg,#31232e,#120d11)}
.cv-5{background:linear-gradient(145deg,#2c2a1d,#111008)}
.cv-6{background:linear-gradient(145deg,#1d2733,#0a0e13)}
.case__bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 75% 95%, rgba(255,113,37,.45), transparent 65%);
}
.case__bg.has-media{background-size:cover;background-position:center}
/* with a real photo the orange wash would muddy it, so it steps back */
.case__bg.has-media::before{opacity:.28}

/* ---------- client wall ----------
   Logo-wall convention: no boxes, every mark capped to one optical
   size so wide wordmarks and square marks read as equals, monochrome
   at rest and full colour on hover, generous air between them. */

.clients{
  display:grid;
  /* six to a line, so twelve marks fall into two even rows */
  grid-template-columns:repeat(6,1fr);
  gap:clamp(40px,5vw,72px) clamp(24px,3vw,48px);
  align-items:center;
  justify-items:center;
}
@media (max-width:900px){ .clients{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .clients{grid-template-columns:repeat(2,1fr)} }
.client{
  width:100%;height:68px;
  display:grid;place-items:center;
  /* text fallback while the mark is still loading */
  font-family:var(--label);font-weight:600;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;line-height:1.3;
  color:rgba(28,28,28,.4);
}
.client.has-logo img{
  max-height:54px;max-width:150px;width:auto;height:auto;
  object-fit:contain;
  filter:grayscale(1);opacity:.55;
  transition:filter .3s ease,opacity .3s ease,transform .3s ease;
}
.client.has-logo:hover img{filter:none;opacity:1;transform:scale(1.04)}
/* on a dark section the marks are inverted to light */
.sec--ink .client,.sec--deep .client{color:rgba(246,237,226,.4)}
.sec--ink .client.has-logo img,.sec--deep .client.has-logo img{filter:grayscale(1) invert(1) brightness(1.4);opacity:.6}
.sec--ink .client.has-logo:hover img,.sec--deep .client.has-logo:hover img{filter:invert(1) brightness(1.4);opacity:1}

/* ---------- contact ---------- */

.info{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px)}
.info__label{
  font-family:var(--label);
  font-weight:600;
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:.6rem;
}
.info__value{font-size:1.15rem;line-height:1.45;font-weight:500}
.info a:hover{color:var(--orange)}

.map{
  border-radius:var(--radius);
  aspect-ratio:16/7;
  background:
    radial-gradient(48% 62% at 50% 50%, rgba(255,113,37,.3), transparent 62%),
    repeating-linear-gradient(0deg,rgba(246,237,226,.07) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(246,237,226,.07) 0 1px,transparent 1px 44px),
    var(--ink-deep);
  display:grid;place-items:center;
  position:relative;
}
.map__pin{
  width:18px;height:18px;border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 8px rgba(255,113,37,.22),0 0 0 18px rgba(255,113,37,.1);
}

/* ---------- job rows ---------- */

.rows{border-top:1px solid var(--line-dark)}
.sec--ink .rows,.sec--deep .rows{border-color:var(--line-light)}
.row{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(18px,2.4vw,30px) 0;
  border-bottom:1px solid var(--line-dark);
  transition:padding-inline .3s ease,color .3s ease;
}
.sec--ink .row,.sec--deep .row{border-color:var(--line-light)}
.row:hover{padding-inline:12px;color:var(--orange)}
.row__title{
  font-family:var(--label);
  font-weight:600;
  font-size:clamp(1rem,1.6vw,1.2rem);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.row__arrow{font-size:1.4rem;line-height:1}

/* ---------- footer ---------- */

.footer{
  position:relative;
  background:var(--ink-deep);
  color:var(--cream);
  text-align:center;
  padding:clamp(56px,8vw,96px) 0 clamp(32px,4vw,48px);
  overflow:hidden;
}
.footer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 70% at 85% 110%, rgba(255,113,37,.4), transparent 65%);
}
.footer > *{position:relative;z-index:1}
.footer .logo{margin-bottom:2rem}
.socials{display:flex;justify-content:center;gap:16px;margin-top:2rem}
.social{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line-light);
  display:grid;place-items:center;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.social:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.social svg{width:16px;height:16px;fill:currentColor}
.footer__meta{
  margin-top:clamp(32px,5vw,56px);
  padding-top:1.6rem;
  border-top:1px solid var(--line-light);
  font-family:var(--label);
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.6;
  display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;
}

/* ---------- cookie bar ---------- */

.cookie{
  position:fixed;inset:auto 0 0 0;z-index:70;
  background:var(--cream);
  color:var(--ink);
  padding:1.1rem var(--gutter) 1.3rem;
  text-align:center;
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
  transform:translateY(0);
  transition:transform .4s ease;
}
.cookie[hidden]{display:none}
.cookie p{font-size:.95rem;margin-bottom:.9rem}
.cookie .btn{padding:.7rem 2rem;font-size:.85rem}
.cookie__x{
  position:absolute;top:10px;right:calc(var(--gutter) / 2);
  width:34px;height:34px;font-size:1.3rem;line-height:1;opacity:.5;
}
.cookie__x:hover{opacity:1}

/* ---------- reveal ---------- */

.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .menu__list a{transform:none}
}

/* ---------- responsive ---------- */

@media (max-width:1040px){
  .split{grid-template-columns:1fr;gap:clamp(20px,3vw,32px)}
}

@media (max-width:960px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .work-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:760px){
  body{font-size:18px}
  .cols-3,.cols-2,.info,.split{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:28px}
  .h-hero{max-width:none}
}

@media (max-width:520px){
  .steps,.work-grid{grid-template-columns:1fr}
  .footer__meta{gap:.8rem}
}

/* ============================================================
   Case pages
   Two templates on the live site: a structured case study
   (challenge / solution / results / products) and a long-form
   showcase (section after section of films and galleries).
   Both share the chrome below.
   ============================================================ */

/* Vimeo in background mode, sized to cover like a photo would.

   The player letterboxes the film inside its own iframe, so the iframe
   must itself be over-sized to the film's 16:9 and cropped by the
   wrapper - otherwise the black bands show through as bars.

   Measured against the hero box, not the viewport: vh/vw only agreed
   while the hero happened to be viewport-height, and the full-screen
   hero broke that, putting a 66px black band above and below the film.
   (The old 128vh was wrong arithmetic too - 16:9 is 177.78vh.) */
.hero__embed{
  position:absolute;inset:0;z-index:-3;
  overflow:hidden;pointer-events:none;background:#000;
  container-type:size;
}
.hero__embed iframe{
  position:absolute;top:50%;left:50%;
  width:max(100%,177.78vh);height:max(100%,56.25vw);
  transform:translate(-50%,-50%);
  border:0;
}
@supports (width:1cqw){
  .hero__embed iframe{
    width:max(100cqw,177.78cqh);
    height:max(100cqh,56.25cqw);
  }
}

.case-head{max-width:none}
.case-head .eyebrow{color:var(--orange);margin-bottom:1.2rem}
.case-head .h-hero{max-width:18ch}
.case-head__sub{
  font-weight:700;
  font-size:clamp(1.05rem,1.8vw,1.35rem);
  line-height:1.35;
  color:var(--cream);
  margin:1rem 0 0;
  max-width:44ch;
}
.back{
  display:inline-block;
  font-family:var(--label);font-weight:600;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--cream);opacity:.6;margin-bottom:1.4rem;
  transition:opacity .2s ease,color .2s ease;
}
.back:hover{opacity:1;color:var(--orange)}

.play{
  display:inline-grid;place-items:center;
  width:64px;height:64px;border-radius:50%;
  border:2px solid var(--cream);color:var(--cream);
  margin-top:1.8rem;
  transition:background .25s ease,color .25s ease,transform .25s ease;
}
.play::before{
  content:"";margin-left:5px;
  border-left:16px solid currentColor;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
}
.play:hover{background:var(--cream);color:var(--ink);transform:scale(1.06)}

.slash-list{
  list-style:none;padding:0;margin:1.6rem auto 0;
  font-weight:700;font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.5;
  text-align:left;display:inline-block;
}
.slash-list b{color:var(--orange);font-family:var(--label);letter-spacing:-.05em;margin-right:.5em}

.h-orange{color:var(--orange)}

/* client / year on the left, the challenge on the right */
.meta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.meta{margin:0;display:grid;gap:1.2rem;align-content:start}
.meta div{margin:0}
.meta__k{
  font-family:var(--label);font-weight:600;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;opacity:.55;
}
.meta__v{margin:.25rem 0 0;font-size:1rem}
.question{font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.38;margin:0}
.question em{font-style:normal;color:var(--orange)}

.pull{margin-top:clamp(36px,5vw,64px);max-width:64ch}
.pull__mark{display:block;font-size:4.2rem;line-height:.55;color:var(--orange);font-weight:800;margin-bottom:1.2rem}
.pull p{
  font-family:var(--label);font-weight:600;font-size:.95rem;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.55;margin:0;
}

.split--case{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}
.prose p{font-size:1rem;line-height:1.6;opacity:.9}
.prose p strong{opacity:1;color:var(--cream)}
.sec--cream .prose p strong{color:var(--ink)}
.num-h{
  font-family:var(--label);font-weight:600;font-size:.88rem;
  letter-spacing:.16em;text-transform:uppercase;margin:0 0 .7rem;
}
.block + .block{margin-top:clamp(28px,4vw,48px)}
.block .video,.block .video-grid,.block .gallery{margin-top:1.2rem}
.block .h-3{margin-bottom:.4rem}
.block .lede{margin:.4rem 0 1rem;font-size:1.05rem}

/* results */
.results-ticks{margin-top:2rem}
.pillar--tick h3::before{content:"\2714\00a0";color:var(--orange)}
.pillar--big h3{
  font-family:var(--display);font-weight:800;font-size:1.45rem;
  letter-spacing:0;text-transform:none;
  display:flex;align-items:center;gap:.6em;
}
.pillar--big h3::after{content:"";width:2em;height:2px;background:var(--orange);flex:none}
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:2rem}
.rstat{border-top:2px solid var(--line-light);padding-top:1.2rem}
.rstat__num{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;line-height:1;color:var(--orange)}
.rstat__label{margin-top:.6rem;font-size:1rem;line-height:1.4;opacity:.85}

/* films */
.video{border-radius:var(--radius);
  position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.video--portrait{aspect-ratio:9/16}
.video--slot{
  display:grid;place-items:center;
  background:linear-gradient(145deg,#1f2227,#0e1014);
  border:1px dashed var(--line-light);
}
.video__hint{font-family:var(--label);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;opacity:.5}
.video.has-media{border:0}
.video.has-media .video__hint{display:none}
.video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,24px)}
.video-grid--1{grid-template-columns:1fr}
.video-grid--3{grid-template-columns:repeat(3,1fr)}
.video-grid--4{grid-template-columns:repeat(4,1fr)}
.video-grid--portrait{grid-template-columns:repeat(auto-fill,minmax(180px,240px))}
.vcap{
  font-family:var(--label);font-weight:600;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;
  margin:.7rem 0 0;opacity:.75;line-height:1.4;
}

/* client on the left, the film on the right */
.vlist{border-top:1px solid var(--line-light);margin-top:1.6rem}
.sec--cream .vlist{border-color:var(--line-dark)}
.vlist__row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  gap:clamp(20px,3vw,48px);align-items:center;
  padding:clamp(18px,2.4vw,28px) 0;
  border-bottom:1px solid var(--line-light);
}
.sec--cream .vlist__row{border-color:var(--line-dark)}
.vlist__row .eyebrow{margin:0}
.vlist__row p{margin:.5rem 0 0;font-size:1rem;opacity:.85}

/* galleries share the case-cover placeholders (cv-1..6) until real
   photos are dropped in */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.5vw,18px)}
.gallery--1{grid-template-columns:1fr}
.gallery--2{grid-template-columns:repeat(2,1fr)}
.gallery--4{grid-template-columns:repeat(4,1fr)}
.shot{border-radius:var(--radius);
  position:relative;margin:0;aspect-ratio:4/3;overflow:hidden}
.shot--wide{aspect-ratio:16/9}
.shot--tall{aspect-ratio:3/4}
.shot--square{aspect-ratio:1}
.shot::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(60% 60% at 70% 92%,rgba(255,113,37,.28),transparent 65%);
}
.shot.has-media{background-size:cover;background-position:center}
.shot.has-media::after{opacity:.3}

/* partner / client marks inside a case */
.plogos{display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin-top:1.8rem}
.plogo{
  border-radius:var(--radius);
  width:110px;height:62px;display:grid;place-items:center;
  border:1px solid var(--line-light);
  font-family:var(--label);font-weight:600;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;opacity:.7;
}
.plogo img{max-height:44px;max-width:88px;object-fit:contain}
.plogo.has-logo{opacity:1}

/* team */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(28px,4vw,56px)}
.member__halo{
  padding:18px;
  background-image:radial-gradient(rgba(246,237,226,.22) 1px,transparent 1.6px);
  background-size:12px 12px;
}
.member__pic{aspect-ratio:1;background:linear-gradient(160deg,#2a2d33,#0f1114)}
.member__name{text-align:center;font-size:1.4rem;font-weight:800;margin-top:1.1rem}
.member__exp{
  text-align:center;margin:.3rem 0 0;
  font-family:var(--label);font-weight:600;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--orange);
}
.member__role{color:var(--orange);font-weight:700;margin:1.2rem 0 .4rem;font-size:1.05rem}
.member__bio p{font-size:.95rem;line-height:1.55;opacity:.85}

/* closing call */
.cta-case{text-align:center}
.cta-case .eyebrow{justify-content:center;opacity:.6}
.cta-case h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08}
.cta-case h2 span{display:block;color:var(--orange)}

@media (max-width:900px){
  .video-grid--4{grid-template-columns:repeat(2,1fr)}
  .gallery--4{grid-template-columns:repeat(3,1fr)}
  .stats-row{grid-template-columns:1fr;gap:20px}
}
@media (max-width:760px){
  .hero--case{height:auto;min-height:min(78vh,640px)}
  .meta-grid,.split--case,.vlist__row{grid-template-columns:1fr}
  .video-grid,.video-grid--3{grid-template-columns:1fr}
  .video-grid--4,.gallery,.gallery--4{grid-template-columns:repeat(2,1fr)}
  .video-grid--portrait{grid-template-columns:repeat(2,1fr)}
}

/* ---------- vimeo facades ----------
   A poster and a play button stand in for the player until it is
   clicked; a long case carries thirty films, and thirty live players
   would stall the page for everyone. */
.video[data-vimeo]{
  cursor:pointer;
  background:linear-gradient(145deg,#1f2227,#0e1014) center/cover no-repeat;
}
.video[data-vimeo]::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);transition:background .25s ease}
.video[data-vimeo]:hover::after{background:rgba(0,0,0,.05)}
.video__play{
  position:absolute;inset:0;margin:auto;z-index:1;
  width:64px;height:64px;border-radius:50%;
  background:rgba(16,16,16,.55);
  border:2px solid var(--cream);color:var(--cream);
  display:grid;place-items:center;
  backdrop-filter:blur(4px);
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.video__play::before{
  content:"";margin-left:5px;
  border-left:16px solid currentColor;
  border-top:10px solid transparent;border-bottom:10px solid transparent;
}
.video--portrait .video__play{width:52px;height:52px}
.video[data-vimeo]:hover .video__play{background:var(--orange);border-color:var(--orange);transform:scale(1.06)}
.video.is-playing{cursor:default}
.video.is-playing::after,.video.is-playing .video__play{display:none}

/* ---------- careers + album (About) ----------
   Headline left, Apply right; two roles as bullet headings over films;
   then a masonry album of behind-the-scenes shots with a lightbox. */
.careers-head{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
/* takes --measure like every other section heading */
.btn .ico{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.h-bullet{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.15;
  text-transform:uppercase;letter-spacing:.02em;
  display:flex;align-items:center;gap:.5em;margin-bottom:1rem;
}
.h-bullet::before{content:"";width:.9em;height:3px;background:var(--orange);flex:none}

.album{background:#efe6da;color:var(--ink)}
.masonry{columns:5;column-gap:clamp(10px,1.4vw,16px)}
.masonry .shot{break-inside:avoid;margin:0 0 clamp(10px,1.4vw,16px);cursor:zoom-in;display:block}
.masonry .shot::after{opacity:.12}
.masonry .shot.has-media{transition:transform .35s ease}
.masonry .shot.has-media:hover{transform:scale(1.02)}
@media (max-width:1100px){.masonry{columns:4}}
@media (max-width:900px){.masonry{columns:3}}
@media (max-width:600px){.masonry{columns:2}}

.lightbox{
  position:fixed;inset:0;z-index:80;
  background:rgba(10,10,10,.94);
  display:grid;place-items:center;padding:4vw;
  cursor:zoom-out;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.lightbox.is-open{opacity:1;visibility:visible}
/* one stage, holding either a photo or a film */
.lightbox__stage{width:min(1120px,92vw);display:grid;place-items:center}
.lightbox__stage img{
  max-width:100%;max-height:86vh;object-fit:contain;
  border-radius:var(--radius);box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.lightbox__film{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#000;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
}
.lightbox__film.is-portrait{aspect-ratio:9/16;width:auto;height:86vh}
.lightbox__film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox__x{position:absolute;top:14px;right:20px;color:var(--cream);font-size:2.2rem;line-height:1;opacity:.7}
.lightbox__x:hover{opacity:1}

/* ===== SCROLL FIGURE — START =========================================
   One brand asterisk drifting behind BOTH cream sections. They are
   wrapped in .deco-field, which carries the cream and lets the figure
   cross the boundary between them - the sections themselves go
   transparent so it shows through, and their content sits above it.

   js/figure.js stops the travel just short of the client logos and
   fades the figure out before it gets there, so it is never cut and
   never lands on the logos.

   Self-contained - delete this fenced block, js/figure.js, the .deco
   markup and unwrap .deco-field to remove entirely.
   ==================================================================== */
.deco-field{position:relative;overflow:hidden;background:var(--cream)}
.deco-field > .sec{position:relative;z-index:1;background:transparent}

.deco{
  --x:0px; --y:0px; --r:0deg; --fade:0;
  position:absolute;
  top:0;
  left:0;                              /* JS places it; see figure.js */
  width:clamp(300px,52vw,760px);
  aspect-ratio:407/408;
  background:var(--orange);
  -webkit-mask:url("../img/figures/asterisk.svg") center/contain no-repeat;
  mask:url("../img/figures/asterisk.svg") center/contain no-repeat;
  opacity:calc(var(--fade) * .13);
  transform:translate3d(var(--x),var(--y),0) rotate(var(--r));
  pointer-events:none;
  z-index:0;
  will-change:transform,opacity;
  backface-visibility:hidden;
}

@media (max-width:760px){ .deco{width:78vw} }

@media (prefers-reduced-motion:reduce){
  .deco{transform:none;opacity:.07}
}

/* Without mask support the background would paint as a plain orange
   rectangle drifting across the page - worse than showing nothing. */
@supports not ((-webkit-mask-image: url("x.svg")) or (mask-image: url("x.svg"))) {
  .deco{display:none}
}
/* ===== SCROLL FIGURE — END =========================================== */