/* ============================================================
   BEEF CREATIVE
   Signal / terminal brutalism. Dark ground, heavy wide grotesk,
   mono for machine-voice. Every accent is sampled from the work.
   ============================================================ */

:root{
  /* ground */
  --void:#09090A;
  --raise:#101012;
  --line:#232327;
  --line-hi:#34343A;

  /* ink */
  --bone:#EDEAE4;
  --ash:#84848D;
  --ash-dim:#7E7E87;

  /* signal — global interactive accent */
  --signal:#FF2D6F;
  --signal-ink:#09090A;

  /* per-project accents, sampled from the artwork itself */
  --acc:var(--signal);

  /* rhythm
     --maxw steps up on large displays (see the media queries below), so a
     1440p or 4K screen gets a bigger site rather than more empty margin.
     Line length stays readable because prose blocks carry their own
     ch-based max-width. */
  --maxw:1500px;
  --gut:clamp(1.25rem, 4vw, 4.5rem);
  --rule:1px;

  /* type */
  --display:"Archivo","Archivo Black","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-in:cubic-bezier(.7,0,.84,0);
}

/* 1080p ultrawide and up */
@media (min-width:1800px){ :root{ --maxw:1680px; --gut:clamp(4.5rem,4vw,6rem) } }
/* 1440p */
@media (min-width:2200px){ :root{ --maxw:1960px; --gut:6.5rem } }
/* 4K and beyond */
@media (min-width:3000px){ :root{ --maxw:2360px; --gut:8rem } }

/* Small fixed sizes — nav, captions, labels — are set in rem, so lifting the
   root size is what stops them reading as 11px specks on a 1440p or 4K panel.
   Percentages rather than px, so a reader's own browser font size still wins. */
@media (min-width:2200px){ html{font-size:112.5%} }
@media (min-width:3000px){ html{font-size:131.25%} }

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

html{
  background:var(--void);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  /* without this the OS paints a bright scrollbar down the side of a
     near-black page, and form controls come back light */
  color-scheme:dark;
  scrollbar-color:var(--line-hi) var(--void);
  scrollbar-width:thin;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--void)}
::-webkit-scrollbar-thumb{background:var(--line-hi);border:2px solid var(--void)}
::-webkit-scrollbar-thumb:hover{background:var(--ash-dim)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--mono);
  font-size:clamp(.8rem,.72rem + .28vw,1.02rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{overflow:hidden}

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

::selection{background:var(--acc);color:var(--signal-ink)}

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

.skip{
  position:fixed;top:0;left:0;z-index:999;
  transform:translateY(-110%);
  background:var(--acc);color:var(--signal-ink);
  padding:.75rem 1.25rem;font-weight:700;letter-spacing:.06em;
}
.skip:focus{transform:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* anchor jumps land below the fixed menu */
main [id]{scroll-margin-top:4.5rem}

/* project pages are separate documents; cross-fade between them where supported */
@media (prefers-reduced-motion:no-preference){ @view-transition{navigation:auto} }

/* ------------------------------------------------------------
   DISPLAY TYPE
   Archivo variable: max weight, max width. The original site
   reached for this and settled for a licensed clone.
   ------------------------------------------------------------ */
.display{
  font-family:var(--display);
  font-variation-settings:"wdth" 125,"wght" 900;
  font-weight:900;
  font-size:clamp(2rem, .25rem + 9.6vw, 12.5rem);
  line-height:.86;
  letter-spacing:-.025em;
  text-transform:uppercase;
  margin:0;
  overflow-wrap:break-word;
}
.display--sm{font-size:clamp(1.6rem,.9rem + 3.6vw,5rem)}

.lede{
  font-family:var(--mono);
  font-size:clamp(.78rem,.7rem + .4vw,1.08rem);
  line-height:1.7;
  color:var(--ash);
  letter-spacing:.02em;
  max-width:52ch;
  margin:1.25rem 0 0;
  text-transform:uppercase;
}

/* Chromatic aberration.
   Two sources feed one value: the glyph-scramble arrival (--split)
   and scroll velocity (--scrollsplit, set on :root by the runtime).
   Whichever is larger wins, so fast scrolling knocks the type out of
   register exactly the way a struggling signal does. */
[data-scramble]{--split:0px}

.display,
.work__title,
.case__title,
.hero__fallback,
.contact__mail,
.pack__name{
  --ab:max(var(--split,0px), var(--scrollsplit,0px));
  text-shadow:
    calc(var(--ab) * -1) 0 0 rgba(255,45,111,.7),
    var(--ab) 0 0 rgba(91,233,215,.7);
}
[data-scramble].is-live{ will-change:text-shadow }

/* ------------------------------------------------------------
   CRT OVERLAY — the whole page is a signal being received
   ------------------------------------------------------------ */
/* overflow:hidden matters — the grain layer overdraws the viewport so it
   can drift, and without clipping that overdraw widens the document */
.crt{
  position:fixed;inset:0;z-index:400;pointer-events:none;overflow:hidden;
  contain:strict;   /* keeps the overlay out of the rest of the page's paint work */
}

.crt__scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.5) 0 1px,
    rgba(0,0,0,0) 1px 3px
  );
  opacity:.3;
}
.crt__scan::after{
  content:"";position:absolute;left:0;right:0;height:32vh;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.035),transparent);
  animation:sweep 7.5s linear infinite;
}
@keyframes sweep{from{transform:translateY(-40vh)}to{transform:translateY(140vh)}}

/* The grain drifts by ±3%, so a few percent of overdraw is all it needs.
   Keep it small: this is a full-viewport blended layer recomposited every
   700ms, and its cost scales with its area — oversizing it on a 4K display
   means tens of millions of blended pixels per step, which tears frames. */
.crt__grain{
  position:absolute;inset:-8%;
  will-change:transform;
  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' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  opacity:.09;
  mix-blend-mode:overlay;
  animation:grain 700ms steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}
  100%{transform:translate(0,0)}
}

.crt__vig{
  position:absolute;inset:0;
  background:radial-gradient(140% 110% at 50% 45%,transparent 58%,rgba(0,0,0,.42) 100%);
}

/* reticle cursor (pointer devices only) */
.reticle{display:none}
@media (hover:hover) and (pointer:fine){
  .reticle{
    display:block;position:fixed;top:0;left:0;z-index:450;
    pointer-events:none;mix-blend-mode:difference;
    translate:-50% -50%;
    will-change:transform;
  }
  .reticle__ring,.reticle__dot{position:absolute;left:0;top:0;translate:-50% -50%;border-radius:50%}
  .reticle__ring{
    width:30px;height:30px;border:1px solid #fff;
    transition:width .28s var(--e-out),height .28s var(--e-out),opacity .2s;
  }
  .reticle__dot{width:3px;height:3px;background:#fff}
  body.cursor-hot .reticle__ring{width:58px;height:58px}
  body.cursor-hot .reticle__dot{opacity:0}
}

/* ------------------------------------------------------------
   NAV
   ------------------------------------------------------------ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:300;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.25rem var(--gut);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:var(--rule) solid transparent;
  transition:background-color .35s,border-color .35s;
}
/* Transparent over the hero, solid once the page moves, so the menu never
   sits on top of headings or body text. */
.nav.is-scrolled{
  background:rgba(9,9,10,.9);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
}
.nav__brand{display:flex;align-items:center;gap:.5rem;font-weight:700;min-height:44px}
.nav__brand em{font-style:normal;color:#9a9aa2}
.nav__mark{
  width:9px;height:9px;background:var(--signal);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:rotate(0)}50%{opacity:.35;transform:rotate(90deg)}}

.nav__links{display:flex;gap:clamp(1rem,2.4vw,2.6rem)}
.nav__links a{position:relative;display:block;padding:.85rem .45rem}
.nav__links a::after{
  content:"";position:absolute;left:.45rem;right:.45rem;bottom:.6rem;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--e-out);
}
.nav__links a:hover::after,.nav__links a.is-here::after{transform:scaleX(1);transform-origin:left}

.nav__status{display:flex;align-items:center;gap:.45rem;color:#9a9aa2}
.nav__status i{width:6px;height:6px;border-radius:50%;background:#31D17E;box-shadow:0 0 10px #31D17E}
.nav__status.is-off i{background:#6B6B73;box-shadow:none}

@media (max-width:820px){
  .nav__links,.nav__status{display:none}
}

/* mobile tab bar */
.tabs{display:none}
@media (max-width:820px){
  .tabs{
    position:fixed;left:0;right:0;bottom:0;z-index:300;
    display:grid;grid-template-columns:repeat(4,1fr);
    background:rgba(9,9,10,.9);
    backdrop-filter:blur(14px);
    border-top:var(--rule) solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabs a{
    padding:.95rem .25rem;text-align:center;
    font-size:.75rem;letter-spacing:.14em;color:var(--ash);
    border-right:var(--rule) solid var(--line);
  }
  .tabs a:last-child{border-right:0}
  .tabs a.is-here{color:var(--bone);background:var(--raise)}
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  padding:6rem var(--gut) 4rem;
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.16;filter:grayscale(1) contrast(1.35);
}
.hero__inner{position:relative;width:100%;max-width:min(var(--maxw),100%);text-align:center}

.hero__title{margin:0;position:relative}
.hero__canvas{
  display:block;width:100%;height:auto;
  image-rendering:pixelated;
}
/* No-WebGL wordmark. "CREATIVE" measures ~6.35em wide at this
   weight and width, so the vw factor is set to keep it inside the
   gutters rather than pushing the hero wider than the viewport. */
.hero__fallback{
  display:grid;gap:0;
  font-family:var(--display);
  font-variation-settings:"wdth" 125,"wght" 900;
  font-size:max(2.2rem, min(13.4vw, 26vh, 17.5rem));
  line-height:.82;letter-spacing:-.035em;
}
.hero.has-gl .hero__fallback{
  position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}

.hero__tags{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.65rem;
  margin:clamp(1.5rem,4vw,3rem) 0 0;
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash);
}
.hero__tags b{color:var(--signal)}

.hero__cue{
  position:absolute;left:50%;bottom:clamp(1.5rem,4vh,3rem);translate:-50% 0;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.75rem;letter-spacing:.24em;color:var(--ash);
}
.hero__cue svg{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}
.hero__cue:hover{color:var(--bone)}

/* Landscape phones: 160px of vertical hero padding out of a 390px
   viewport leaves nothing for the wordmark. */
@media (max-height:560px) and (orientation:landscape){
  .hero{padding:4rem var(--gut) 2.5rem;min-height:100svh}
  .hero__cue{display:none}
  .hero__tags{margin-top:1.25rem}
  .case__hero{padding-top:5rem;min-height:auto}
}

/* ------------------------------------------------------------
   SECTION SHELL
   ------------------------------------------------------------ */
/* clipped so the oversized watermark can bleed off the left edge
   without widening the document on narrow screens */
.sect{position:relative;overflow:hidden;padding:clamp(4.5rem,11vw,12.5rem) var(--gut)}
.sect + .sect{border-top:var(--rule) solid var(--line)}
.sect__head{max-width:var(--maxw);margin:0 auto clamp(2.5rem,6vw,6.5rem)}

.watermark{
  position:absolute;left:-.06em;top:clamp(2rem,5vw,4rem);
  font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;
  font-size:clamp(6rem,22vw,27rem);line-height:.8;
  color:#fff;opacity:.028;pointer-events:none;user-select:none;
}

/* ------------------------------------------------------------
   WORK INDEX — editorial rows that break the container
   ------------------------------------------------------------ */
.works{max-width:var(--maxw);margin:0 auto;display:grid}

.work{
  position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  gap:clamp(1.5rem,4vw,5.5rem);
  padding:clamp(2rem,5vw,5.5rem) 0;
  border-top:var(--rule) solid var(--line);
}
.work:last-child{border-bottom:var(--rule) solid var(--line)}
.work:nth-child(even) .work__media{order:2}
.work:nth-child(even) .work__meta{order:1}

.work__media{
  position:relative;overflow:hidden;
  background:var(--raise);
  border:var(--rule) solid var(--line);
  aspect-ratio:4/3;
}
.work__media video,.work__media img{
  width:100%;height:100%;object-fit:cover;
  object-position:var(--card-pos, 50% 34%);
  filter:grayscale(.55) contrast(1.1);
  transition:filter .6s var(--e-out),transform 1s var(--e-out);
}
@media (hover:hover){
  .work:hover .work__media video,.work:hover .work__media img{filter:none;transform:scale(1.035)}
              }
.work__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(9,9,10,.55),transparent 55%);
  pointer-events:none;
}

.work__idx{
  display:block;margin-bottom:.6rem;
  font-family:var(--display);font-variation-settings:"wdth" 62,"wght" 900;
  font-size:clamp(2.4rem,4.5vw,6rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--line-hi);
  pointer-events:none;transition:-webkit-text-stroke-color .5s;
}

.work__meta{min-width:0}
.work__title{
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 900;
  font-size:clamp(1.9rem,1rem + 3.8vw,6rem);
  line-height:.92;letter-spacing:-.03em;text-transform:uppercase;
  margin:0;overflow-wrap:break-word;
}
.work__kicker{
  margin:.85rem 0 0;font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc);
}
.work__desc{
  margin:1rem 0 0;color:var(--ash);font-size:.78rem;line-height:1.75;
  text-transform:uppercase;letter-spacing:.02em;max-width:46ch;
}
.work__cta{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:1.6rem;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--line-hi);padding-bottom:.35rem;
  transition:border-color .35s,color .35s,gap .35s var(--e-out);
}

@media (max-width:820px){
  .work{grid-template-columns:1fr;gap:1.25rem;padding:2.25rem 0}
  .work:nth-child(even) .work__media{order:0}
  .work:nth-child(even) .work__meta{order:0}
  .work__media{aspect-ratio:16/10;margin-inline:calc(var(--gut) * -1);border-inline:0}
}

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */
.about{
  position:relative;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5rem);
}
.about__label{
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);
  padding-top:.6rem;
}
.about__label span{color:var(--signal);display:block}
.about__body{max-width:62ch}
.about__body p{margin:0 0 1.35rem;color:var(--ash);text-transform:uppercase;letter-spacing:.015em}
.about__hi{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 900;
  font-size:clamp(1.8rem,1rem + 3vw,5rem);line-height:.95;
  color:var(--bone)!important;text-transform:uppercase;letter-spacing:-.025em;
  margin-bottom:1.75rem!important;
}
.about__pull{
  color:var(--bone)!important;
  border-left:2px solid var(--acc);padding-left:1.2rem;
  font-size:.92rem;line-height:1.6;
}
.about__stats{
  grid-column:1/-1;list-style:none;margin:clamp(2.5rem,6vw,4.5rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:var(--rule) solid var(--line);
}
.about__stats li{
  padding:1.5rem 1.5rem;
  border-right:var(--rule) solid var(--line);
}
.about__stats li:first-child{padding-left:0}
.about__stats li:last-child{border-right:0}
.about__stats b{
  display:block;
  font-family:var(--display);font-variation-settings:"wdth" 110,"wght" 900;
  font-size:clamp(1.5rem,3.4vw,3.6rem);line-height:1;letter-spacing:-.02em;
}
.about__stats span{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}

@media (max-width:820px){
  .about{grid-template-columns:1fr}
  /* two columns here: the odd cell keeps the divider and sits on the gutter,
     the even cell needs left padding so it does not butt against that rule */
  .about__stats li{padding-left:0;padding-right:1.25rem}
  .about__stats li:nth-child(2n){padding-left:1.25rem;border-right:0}
}

/* ------------------------------------------------------------
   SERVICES — broadcast rate card
   ------------------------------------------------------------ */
.rate{max-width:var(--maxw);margin:0 auto clamp(4rem,9vw,7rem)}
/* shares the content column with the rate card and packages, so it lines up with them on wide screens */
.packs__title{max-width:var(--maxw);margin-inline:auto}
.rate__grp{margin-bottom:clamp(2rem,5vw,3.5rem)}
.rate__grpname{
  display:flex;align-items:center;gap:1rem;
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);
  margin:0 0 .5rem;
}
.rate__grpname::after{content:"";flex:1;height:1px;background:var(--line)}

.rate__row{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) auto;
  align-items:baseline;gap:1rem;
  padding:1.15rem 0;
  border-bottom:var(--rule) solid var(--line);
  transition:background .3s,padding-left .35s var(--e-out);
}
.rate__name{
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 800;
  font-size:clamp(.95rem,.8rem + .5vw,1.65rem);line-height:1.15;
  text-transform:uppercase;letter-spacing:-.01em;
}
.rate__what{font-size:.75rem;color:var(--ash-dim);text-transform:uppercase;letter-spacing:.04em}
.rate__price{
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 900;
  font-size:clamp(1.05rem,.9rem + .7vw,2.05rem);white-space:nowrap;
}
.rate__price small{
  display:block;font-family:var(--mono);font-weight:400;
  font-size:.75rem;letter-spacing:.18em;color:var(--ash-dim);text-align:right;
}
@media (max-width:720px){
  .rate__row{grid-template-columns:1fr auto;gap:.35rem 1rem}
  .rate__what{grid-column:1/2}
  .rate__price{grid-row:1/3;grid-column:2/3;align-self:center}
}

/* packages */
.packs{
  max-width:var(--maxw);margin:clamp(1.75rem,4vw,2.75rem) auto 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  border:var(--rule) solid var(--line);
}
.pack{
  padding:clamp(1.5rem,3vw,2.5rem);
  border-right:var(--rule) solid var(--line);
  display:flex;flex-direction:column;
  transition:background .4s;
}
.pack:last-child{border-right:0}
.pack{position:relative}
.pack--hero{background:var(--raise)}
/* badge text comes from the editor, so the page only ever claims what she writes */
.pack[data-badge]::before{
  content:attr(data-badge);position:absolute;top:0;left:0;
  background:var(--signal);color:var(--signal-ink);
  font-size:.75rem;letter-spacing:.18em;font-weight:700;padding:.3rem .7rem;
}
/* Package names are sized from their own card, not the viewport: between the
   one-column and three-column layouts the cards are narrow while the screen is not. */
.pack{container-type:inline-size}
.pack__name{
  font-family:var(--display);font-variation-settings:"wdth" 112,"wght" 900;
  font-size:clamp(1.4rem,13cqi,3.2rem);line-height:1;
  text-transform:uppercase;letter-spacing:-.025em;margin:0 0 1.25rem;
  overflow-wrap:break-word;
}
.pack ul{list-style:none;margin:0 0 1.75rem;padding:0;flex:1}
.pack li{
  display:flex;gap:.6rem;padding:.42rem 0;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--ash);
}
.pack li::before{content:"▚";color:var(--acc);font-size:.75rem;line-height:1.7}
.pack__price{
  font-family:var(--display);font-variation-settings:"wdth" 105,"wght" 900;
  font-size:clamp(1.9rem,1.2rem + 2.4vw,4rem);line-height:1;letter-spacing:-.03em;
}
.pack__price small{
  display:block;font-family:var(--mono);font-weight:400;font-size:.75rem;
  letter-spacing:.18em;color:var(--ash-dim);margin-bottom:.3rem;
}
.pack__go{
  margin-top:1.5rem;display:block;text-align:center;
  border:1px solid var(--line-hi);padding:.85rem;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  transition:background .3s,color .3s,border-color .3s;
}
.pack__go:hover{background:var(--acc);border-color:var(--acc);color:var(--signal-ink)}
@media (max-width:820px){.pack{border-right:0;border-bottom:var(--rule) solid var(--line)}.pack:last-child{border-bottom:0}}

.packs__note{
  max-width:var(--maxw);margin:1.75rem auto 0;
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-dim);
}
.packs__note span{color:var(--bone)}

/* ------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------ */
.contact{max-width:var(--maxw);margin:0 auto}
.contact__shout{margin-bottom:0}
/* The address is a mailto link, but some embedding contexts (a sandboxed
   iframe, for one) block external protocol handlers, and then clicking it
   silently does nothing. The copy button guarantees a working path to the
   address wherever the page is viewed. */
.mailrow{
  display:flex;align-items:flex-end;flex-wrap:wrap;gap:.75rem 1.25rem;
  margin:clamp(2rem,5vw,3.5rem) 0 0;
  border-bottom:1px solid var(--line-hi);
  transition:border-color .35s;
}
.mailrow:hover{border-color:var(--signal)}
.mailrow__copy{
  flex:none;margin-bottom:.5rem;min-height:44px;
  font-size:.75rem;letter-spacing:.18em;color:var(--ash);
  border:1px solid var(--line-hi);padding:.5rem .9rem;
  transition:color .3s,border-color .3s;
}
.mailrow__copy:hover{color:var(--bone);border-color:var(--bone)}
.mailrow__copy.is-done{color:#31D17E;border-color:#31D17E}

.contact__mail{
  display:block;flex:1 1 auto;min-width:0;margin:0;
  font-family:var(--display);font-variation-settings:"wdth" 90,"wght" 800;
  font-size:clamp(1.05rem,.5rem + 3.2vw,4.2rem);
  line-height:1.1;letter-spacing:-.02em;word-break:break-word;
  min-height:44px;padding:.6rem 0 .5rem;
  transition:color .35s;
}
@media (hover:hover){ .contact__mail:hover{color:var(--signal)} }

.contact__grid{
  margin-top:clamp(2rem,5vw,3.5rem);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:var(--rule) solid var(--line);
}
/* Divider columns need padding on both sides, or text in every column after
   the first sits flush against the rule to its left. The first cell drops its
   left padding so it still lines up with the page gutter. */
.chan{padding:1.35rem 1.5rem;border-right:var(--rule) solid var(--line)}
.chan:first-child{padding-left:0}
.chan:last-child{border-right:0}
.chan__k{display:block;font-size:.75rem;letter-spacing:.2em;color:var(--ash-dim);margin-bottom:.35rem}
/* The handle sits left and its marker right, so the cell reads as one row
   instead of leaving a long dead gap before the divider on wide screens. */
.chan__v{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;min-height:44px;padding:0;
  font-size:.85rem;letter-spacing:.02em;text-align:left;
  transition:color .3s;
}
.chan__v:hover{color:var(--signal)}
/* the copy action reads as a chip; an outbound link just gets its arrow */
.chan__v i{font-style:normal;color:var(--ash-dim);transition:color .3s}
.copy i{
  font-size:.75rem;letter-spacing:.16em;
  border:1px solid var(--line-hi);padding:.15rem .4rem;
}
a.chan__v i{font-size:.95rem;line-height:1}
.chan__v:hover i{color:var(--signal)}
.chan__v.is-done i{border-color:#31D17E;color:#31D17E}
@media (max-width:820px){
  .contact__grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
  .chan,.chan:first-child{border-right:0;padding:1rem 0;border-bottom:var(--rule) solid var(--line)}
}
@media (max-width:520px){
  .contact__grid{grid-template-columns:1fr}
}

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.foot{border-top:var(--rule) solid var(--line);overflow:hidden}
.ticker{overflow:hidden;border-bottom:var(--rule) solid var(--line);padding:1.1rem 0}
.ticker__run{
  display:flex;gap:2.5rem;white-space:nowrap;width:max-content;
  font-family:var(--display);font-variation-settings:"wdth" 100,"wght" 900;
  font-size:clamp(1.1rem,3vw,3.4rem);text-transform:uppercase;letter-spacing:-.01em;
  color:transparent;-webkit-text-stroke:1px var(--line-hi);
  animation:roll 34s linear infinite;
}
.ticker__run b{color:var(--signal);-webkit-text-stroke:0}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.foot__base{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  padding:1.5rem var(--gut) calc(1.5rem + env(safe-area-inset-bottom));
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);
}
.foot__base b{color:var(--signal)}
@media (max-width:820px){.foot__base{padding-bottom:5.5rem}}

/* ------------------------------------------------------------
   CASE STUDY
   ------------------------------------------------------------ */
.case{position:relative;z-index:2;background:var(--void)}

.case__hero{
  position:relative;
  min-height:min(88svh,60rem);
  display:grid;align-items:end;
  padding:7rem var(--gut) clamp(2.5rem,6vw,5rem);
  overflow:hidden;
  border-bottom:var(--rule) solid var(--line);
}
.case__hero video,.case__hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.3;filter:grayscale(.4);
}
.case__hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,var(--void) 2%,rgba(9,9,10,.35) 60%,rgba(9,9,10,.7));
}
.case__heroin{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;width:100%}

.case__back{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;margin-bottom:clamp(1rem,3vw,2.5rem);
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
  transition:gap .3s var(--e-out),color .3s;
}
.case__back:hover{gap:1.1rem;color:var(--acc)}

.case__no{
  font-family:var(--display);font-variation-settings:"wdth" 62,"wght" 900;
  font-size:clamp(1rem,3vw,2.1rem);color:var(--acc);letter-spacing:.04em;
}
.case__title{
  font-family:var(--display);font-variation-settings:"wdth" 125,"wght" 900;
  font-size:clamp(2rem,.25rem + 9.6vw,11.5rem);line-height:.84;letter-spacing:-.035em;
  text-transform:uppercase;margin:.35rem 0 0;overflow-wrap:break-word;
}
.case__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.5rem;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
}
.case__meta b{color:var(--acc);font-weight:400}
.case__intro{
  margin:1.75rem 0 0;max-width:62ch;color:var(--ash);
  font-size:clamp(.78rem,.7rem + .4vw,1.08rem);line-height:1.75;
  text-transform:uppercase;letter-spacing:.02em;
}

.case__body{padding:clamp(3rem,7vw,7.5rem) var(--gut);max-width:var(--maxw);margin:0 auto}

.blk{margin-bottom:clamp(3rem,7vw,7.5rem)}
.blk__head{
  display:flex;align-items:baseline;gap:1rem;margin-bottom:1.5rem;
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);
}
.blk__head::after{content:"";flex:1;height:1px;background:var(--line)}

/* Tiles keep each asset's native aspect ratio by default — these are
   design boards, and cropping one cuts the work in half. `tile--cover`
   is only for places where a deliberate crop is the point. */
.grid{display:grid;gap:clamp(.75rem,1.6vw,2rem);align-items:start}
/* Explicit column counts, not auto-fit. auto-fit keeps adding tracks as the
   container grows, so a "2-up" block turns 6-up on a 1440p screen and the
   artwork shrinks as the screen gets wider. These step down on small screens
   and never step up. */
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--wide{grid-template-columns:1fr}

@media (max-width:1000px){
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
}

.tile{
  position:relative;display:block;width:100%;
  background:var(--raise);border:var(--rule) solid var(--line);
  overflow:hidden;text-align:left;
  transition:border-color .4s,transform .5s var(--e-out);
}
.tile img,.tile video{width:100%;height:auto;display:block}
/* the native ratio from the build: the box is sized before a lazy image arrives, without cropping it */
.tile img{aspect-ratio:var(--ar,auto)}
.tile--fit img{aspect-ratio:1;object-fit:contain;padding:10%}
.tile--cover img,.tile--cover video{aspect-ratio:16/9;object-fit:cover}
.tile__cap{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;
  padding:.8rem 1rem;border-top:var(--rule) solid var(--line);
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim);
}
.tile__zoom{color:var(--acc);opacity:0;transition:opacity .3s}

.case__next{
  border-top:var(--rule) solid var(--line);
  padding:clamp(3rem,7vw,5rem) var(--gut);
}
@media (max-width:820px){
  .case__next{padding-bottom:6rem}
}
.case__nextin{
  max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:1.5rem;
}
.case__nextin span{font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ash-dim)}
.case__nextin a{
  font-family:var(--display);font-variation-settings:"wdth" 118,"wght" 900;
  font-size:clamp(1.8rem,1rem + 4.5vw,7rem);line-height:.9;
  text-transform:uppercase;letter-spacing:-.03em;
  display:inline-block;padding:.55rem 0;overflow-wrap:break-word;
  transition:color .35s;
}
.case__nextin a:hover{color:var(--acc)}

.sect--404{min-height:80svh;display:grid;align-items:center}
/* a grid item with auto margins shrinks to its content; full width keeps it on the content column */
.sect--404 .sect__head{width:100%}
.pack__go--inline{display:inline-block;margin-top:2.5rem;padding:.85rem 1.5rem}

/* ------------------------------------------------------------
   LIGHTBOX
   ------------------------------------------------------------ */
.lb[hidden]{display:none}

.lb{
  position:fixed;inset:0;z-index:480;
  background:rgba(6,6,7,.96);
  display:grid;place-items:center;
  padding:clamp(3rem,8vw,5rem) clamp(1rem,5vw,5rem);
  animation:fade .25s var(--e-out);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb__fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;gap:1rem;align-items:center}
.lb__stage{display:flex;max-height:78svh}
.lb__stage img,.lb__stage video{max-width:100%;max-height:78svh;width:auto;height:auto;object-fit:contain}
.lb figcaption{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);text-align:center}
.lb__x{
  position:absolute;top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem);
  font-size:.75rem;letter-spacing:.16em;border:1px solid var(--line-hi);padding:.8rem 1rem;
  transition:background .3s,color .3s;
}
.lb__x:hover{background:var(--bone);color:var(--void)}
.lb__nav{
  position:absolute;top:50%;translate:0 -50%;
  font-size:2.5rem;line-height:1;padding:1rem;color:var(--ash);
  transition:color .3s;
}
.lb__nav:hover{color:var(--bone)}
.lb__nav--prev{left:clamp(.25rem,2vw,1.5rem)}
.lb__nav--next{right:clamp(.25rem,2vw,1.5rem)}
/* On phones and tablets the arrows would sit on top of the video's own
   controls, so they move below the artwork. */
@media (max-width:820px){
  .lb{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  .lb__nav{top:auto;bottom:calc(.75rem + env(safe-area-inset-bottom));translate:none;min-width:44px;min-height:44px}
  .lb__nav--prev{left:calc(50% - 4.5rem)}
  .lb__nav--next{right:calc(50% - 4.5rem)}
}

/* ------------------------------------------------------------
   SCROLL REVEAL
   ------------------------------------------------------------ */
[data-rise]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
[data-rise].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rise]{opacity:1;transform:none}
  .crt__scan::after,.crt__grain,.ticker__run{animation:none}
  .reticle{display:none}
}