/* ============================================================
   3G SPORTS — SITE BASE (lifted verbatim from lander.html by build-pages.py; edit the lander, then rebuild)
   Fluid from a 14" MacBook (1512) to a 34" ultrawide (3440).
   Nothing is capped to a fixed container: the root font-size
   scales with the viewport, gutters are in vw, display type is
   in vw, and every tall block is bounded by svh so a 21:9 screen
   does not get a page built for 16:10.

   The signature is the chamfer. The 3G mark is cut at its
   corners; so is every photograph frame. Everything that is
   not a photograph (buttons, captions) is a plain rectangle.

   Locks: Poppins only. Blue / Ink / Line + white. Real mark.
   ============================================================ */
:root{
  /* tracking: one scale for the whole page */
  --tr-display:-.028em; /* headings 60px and up: hero, roster, advocacy, service rows */
  --tr-mid:-.02em;      /* 30-40px statements */
  --tr-read:-.015em;    /* the agency paragraph */
  --tr-fig:-.055em;     /* the big numerals */
  --tr-label:.22em;     /* 11px caps labels */
  --tr-chip:.16em;      /* 12px caps chips and indices */
  /* the two photograph sections (roster band, the record) share one height: one 5:7 roster plate,
     bounded by the screen (498px at 1512x860, 1133 at 3440x1440). --pw is that plate's width. */
  --sh:min(calc(100vw/4.25*1.4),84svh);
  --pw:calc(var(--sh)*5/7);
  --blue:#2365FF; --ink:#121212; --line:#E3DBE1; --paper:#fff;
  --mist:color-mix(in oklab,var(--line) 46%,#fff);
  --ink-60:color-mix(in oklab,var(--ink) 62%,var(--line));
  --ink-40:color-mix(in oklab,var(--ink) 40%,var(--line));
  --rule:color-mix(in oklab,var(--ink) 16%,transparent);
  --rule-w:rgba(255,255,255,.16);

  --gutter:clamp(1.5rem,5vw,11rem);
  --fs-d2:clamp(2rem,3.6vw,7rem); /* mid display: services statement, service rows */
  --sec:clamp(6rem,10vw,15rem);  /* block space above and below a quiet section */
  --mh:5.5rem;

  --expo:cubic-bezier(.16,1,.3,1);
  --quart:cubic-bezier(.25,1,.5,1);
  --inout:cubic-bezier(.76,0,.24,1);
}
*,*::before,*::after{box-sizing:border-box;}
/* 16px at 1512, 26px at 3440 — the page grows with the screen instead of
   sitting in the middle of it */
html{font-size:clamp(15px,calc(.52vw + 8.14px),26px);-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Poppins',system-ui,sans-serif;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit;text-decoration:none;}
h1,h2,h3,p,ul,figure{margin:0;padding:0;}
ul{list-style:none;}
svg{display:block;}
::selection{background:var(--blue);color:#fff;}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px;}
[data-ground=blue] :focus-visible,[data-ground=ink] :focus-visible{outline-color:#fff;}

.wrap{padding-inline:var(--gutter);}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:fixed;left:1rem;top:-4rem;z-index:200;background:var(--ink);color:#fff;padding:.75rem 1rem;transition:top .3s;}
.skip:focus{top:1rem;}


/* ---------- roll-over text: the word leaves upward, its twin arrives ---------- */
.roll{display:inline-block;overflow:hidden;line-height:1.4;height:1.4em;vertical-align:top;}
.roll>span{display:block;transition:transform .6s var(--expo);}
.roll>span::after{content:attr(data-t);display:block;}
a:hover .roll>span,a:focus-visible .roll>span,.roll:hover>span{transform:translateY(-50%);}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.9rem;isolation:isolate;
  padding:1.05rem 1.6rem;background:var(--blue);color:#fff;
  font-size:.95rem;font-weight:600;letter-spacing:.01em;overflow:hidden;
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:translateX(-101%);transition:transform .6s var(--expo);}
.btn:hover::before,.btn:focus-visible::before{transform:none;}
.btn--w{background:#fff;color:var(--blue);}
.btn--w::before{background:var(--ink);}
.btn--w:hover{color:#fff;}
/* one arrow everywhere: drawn, square-ended, mitred point — never a font glyph */
.arw,.row__a,.band__arw,.talk__b{fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;}
.arw{display:inline-block;flex:none;width:1.1em;height:1.1em;vertical-align:-.2em;stroke-width:2.6;transition:transform .6s var(--expo);}
a:hover .arw{transform:translateX(.4rem);}
.tlink{display:inline-flex;gap:.7rem;align-items:center;font-weight:600;position:relative;padding-bottom:.45rem;}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform-origin:left;transition:transform .6s var(--expo);}
.tlink:hover::after{transform:scaleX(.35);}

/* ---------- reveal primitives ---------- */
.js [data-reveal]{opacity:0;transform:translateY(2.5rem);transition:opacity 1s var(--quart),transform 1.3s var(--expo);transition-delay:calc(var(--d,0)*90ms);}
.js [data-reveal].is-in{opacity:1;transform:none;}
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em;}
.ln>span{display:block;}
.js .ln>span{transform:translateY(112%);transition:transform 1.3s var(--expo);transition-delay:calc(var(--l,0)*100ms);}
.js .is-in .ln>span,.js .is-in.ln>span{transform:none;}

/* ============================================================
   LOADER — 0.75s, CSS only, so it can never stick
   ============================================================ */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);display:none;place-items:center;}
.js .loader{display:grid;animation:lift .9s var(--inout) .7s forwards;}
.loader svg{height:5.5rem;color:#fff;animation:markin .7s var(--expo) both;}
@keyframes lift{to{transform:translateY(-100%);visibility:hidden;}}
@keyframes markin{from{clip-path:inset(100% 0 0 0);transform:translateY(18%);}to{clip-path:inset(0 0 0 0);transform:none;}}

/* ============================================================
   MASTHEAD — leaves on the way down, returns on the way up,
   and takes the ground of whatever it is over
   ============================================================ */
.mast{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--mh);
  display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gutter);
  color:var(--ink);transition:transform .8s var(--expo),background-color .5s,color .5s;
}
.mast.is-hidden{transform:translateY(-102%);}
.mast.is-stuck[data-ground=paper]{background:var(--paper);}
.lock{display:inline-flex;align-items:center;gap:.8rem;}
.lock svg{height:2.375rem;width:auto;}
.lock i{font-style:normal;font-size:.7rem;font-weight:600;letter-spacing:.34em;}
.nav{display:flex;align-items:center;gap:2.4rem;font-size:.95rem;font-weight:500;}
.mast .btn{padding:.8rem 1.3rem;}

/* ============================================================
   CONTACT — ends on ink, and ends loud
   ============================================================ */
.contact{position:relative;overflow:hidden;background:var(--ink);color:#fff;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding-top:min(var(--sec),13svh);}
.contact__top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:3rem;}
.contact__q{position:relative;font-size:clamp(1.5rem,2.5vw,4.4rem);font-weight:500;line-height:1.22;letter-spacing:var(--tr-mid);max-width:21ch;}
.talk{position:relative;display:inline-flex;align-items:flex-end;gap:clamp(1.5rem,3vw,5rem);margin-top:clamp(3rem,min(8vw,8.2svh),12rem);}
.talk__t{font-size:clamp(4.5rem,min(15.4vw,36svh),46rem);font-weight:800;line-height:1;letter-spacing:-.04em;margin-left:-.05em;white-space:nowrap;}
.ch{display:inline-block;clip-path:inset(0 -.5em);height:1em;line-height:1;vertical-align:top;}
.ch__i{display:block;transition:transform .8s var(--expo);transition-delay:calc(var(--i)*24ms);}
.ch__i::after{content:attr(data-c);display:block;color:var(--blue);}
.talk:hover .ch__i,.talk:focus-visible .ch__i{transform:translateY(-50%);}
.talk__b{flex:none;align-self:flex-end;margin-bottom:calc(clamp(4.5rem,min(15.4vw,36svh),46rem)*.12);width:calc(clamp(4.5rem,min(15.4vw,36svh),46rem)*.32);height:auto;color:#fff;transform:rotate(-45deg);transition:color .5s,transform .8s var(--expo);} /* on the baseline of the word, tilted like the service rows */
.talk:hover .talk__b,.talk:focus-visible .talk__b{color:var(--blue);transform:none;}
.foot{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;margin-top:clamp(3rem,min(5vw,7svh),7rem);padding-block:2rem;border-top:1px solid var(--rule-w);font-size:.85rem;color:rgba(255,255,255,.62);}
.foot .nav{gap:2rem;font-size:.85rem;color:#fff;}
.foot .lock svg{height:1.6rem;color:#fff;}
.foot>:last-child{justify-self:end;}
.foot__end{display:flex;align-items:center;gap:.6rem;}
.foot__end span{margin-left:1.4rem;}
/* social buttons: square, hairline, fill from the left like every other button */
.soc{position:relative;isolation:isolate;display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid var(--rule-w);color:#fff;overflow:hidden;transition:color .45s,border-color .45s;}
.soc::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateX(-101%);transition:transform .6s var(--expo);}
.soc:hover,.soc:focus-visible{color:var(--ink);border-color:#fff;}
.soc:hover::before,.soc:focus-visible::before{transform:none;}
.soc svg{width:1.2rem;height:1.2rem;fill:currentColor;} /* the real Instagram glyph (media-kit/LOGOS) and the real LinkedIn "in" */


/* ---------- preview tool, not part of the design ---------- */
.dev{position:fixed;left:1rem;bottom:1rem;z-index:95;font:600 11px/1 'Poppins',sans-serif;letter-spacing:.08em;
  background:var(--ink);color:#fff;border:0;padding:.7em 1em;cursor:pointer;opacity:.55;transition:opacity .3s;}
.dev:hover{opacity:1;}

/* ---------- narrow windows: keep it standing; real breakpoints come later ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important;}
  .js .loader{display:none;}
  .js .ww{opacity:1;}
}

.lyr{position:absolute;inset:0;overflow:hidden;transition:clip-path 1s var(--inout);}
.lyr+.lyr{clip-path:inset(0 100% 0 0);}
.ph{
  position:absolute;inset:0;background:var(--line);color:var(--ink);
  background-size:cover;background-position:50% 18%;
  transition:transform 1.7s var(--expo);
}
.ph__n{position:absolute;right:-.03em;top:-.1em;font-size:13vw;font-weight:900;line-height:.8;letter-spacing:-.06em;opacity:.13;}
.ph__t{position:absolute;right:1.1rem;bottom:1rem;font-size:.62rem;font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;opacity:.55;}
.ph.has-photo .ph__n,.ph.has-photo .ph__t{display:none;}
.cap{
  position:absolute;left:0;bottom:0;z-index:3;display:flex;align-items:center;gap:.7rem;
  background:var(--ink);color:#fff;padding:.8rem 1.5rem .8rem 1.25rem;
  font-size:.78rem;font-weight:600;letter-spacing:var(--tr-chip);text-transform:uppercase;
}
.cap .arw{opacity:.6;}

/* ============================================================
   INNER PAGES — shared primitives (build-pages.py)
   ============================================================ */
.nav a[aria-current=page] .roll>span{color:var(--blue);}
/* inner pages run a wider gutter than the lander (Owen, 2026-09-22); the masthead keeps the lander's so the nav sits in the same place on every page */
:root{--gutter:clamp(2rem,7vw,15rem);}
.mast{padding-inline:clamp(1.5rem,5vw,11rem);}
/* page head: eyebrow column + statement, the agency grid from the lander */
.pg{padding:calc(var(--mh) + clamp(3rem,6vw,9rem)) var(--gutter) 0;}
.pg__g{display:grid;grid-template-columns:26% minmax(0,1fr);align-items:start;column-gap:2rem;}
.pg__h{font-size:clamp(2.4rem,min(5vw,10svh),9.5rem);font-weight:600;line-height:1.08;letter-spacing:var(--tr-display);text-wrap:balance;max-width:14em;}
.eyebrow{font-size:.7rem;font-weight:600;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-40);padding-top:.75em;}
.read{font-size:clamp(1.05rem,1.35vw,2.2rem);line-height:1.55;letter-spacing:var(--tr-read);max-width:34em;color:var(--ink-60);}
.read+.read{margin-top:1.2em;}
.read b{font-weight:600;color:var(--ink);}
.wall{font-size:clamp(1.5rem,2.2vw,3.6rem);line-height:1.42;letter-spacing:var(--tr-read);max-width:30em;}
.wall b{font-weight:600;}
.sec{padding-block:var(--sec);}
.sec__h{font-size:var(--fs-d2);font-weight:600;line-height:1.1;letter-spacing:var(--tr-display);text-wrap:balance;}
/* a roster plate, as on the lander: 5:7, photograph, name box */
.tile{position:relative;display:block;aspect-ratio:5/7;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;}
.tile .ph{transition:transform 1.4s var(--expo);}
.tile:hover .ph,.tile:focus-visible .ph{transform:scale(1.04);}
.tile .cap{pointer-events:none;}
/* hairline list rows, as the service rows */
.rows{border-top:1px solid var(--rule);}
.row2{display:grid;grid-template-columns:3.5rem 1fr auto;align-items:center;gap:1rem;padding:clamp(1.2rem,2vw,3rem) 0;border-bottom:1px solid var(--rule);}
.row2__i{font-size:.78rem;font-weight:600;letter-spacing:var(--tr-chip);color:var(--blue);}
.row2__n{font-size:var(--fs-d2);font-weight:600;line-height:1.1;letter-spacing:var(--tr-display);}
.row2__a{flex:none;width:clamp(1.5rem,2.4vw,4rem);height:auto;stroke-width:2.6;transform:rotate(-45deg);transition:transform .8s var(--expo);fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:miter;}
.row2:hover .row2__a,.row2.is-open .row2__a{transform:none;}
/* a roster card, as the talent board: 4:5 photograph, name, credential · team, audience bar */
.cc{display:block;min-width:0;color:inherit;container-type:inline-size;}
.cc__shot{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ink);color:#fff;isolation:isolate;}
.cc__shot .ph{transition:transform 1.2s var(--expo);}
.cc:hover .ph,.cc:focus-visible .ph{transform:scale(1.03);}
.cc__n{display:block;margin-top:clamp(.9rem,1.2vw,1.8rem);font-size:clamp(1.2rem,1.5vw,2.7rem);font-weight:600;line-height:1.1;letter-spacing:var(--tr-mid);transition:color .3s;}
.cc:hover .cc__n{color:var(--blue);}
/* one line, always: the size steps down to fit the card's width (--n = characters) */
.cc__m{display:block;margin-top:.45em;font-size:max(.74rem,min(clamp(.9rem,1vw,1.7rem),calc(100cqw / (var(--n,30) * .56))));line-height:1.4;color:var(--ink-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* the kit's line, in a blue bar along the foot of the photograph */
.cc__l{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--blue);color:#fff;padding:.6rem .9rem;font-size:clamp(.82rem,.95vw,1.6rem);line-height:1.3;white-space:nowrap;overflow:hidden;}
.cc__l b{font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.cc__l i{font-style:normal;opacity:.45;margin-inline:.55em;}
.cc.is-out{display:none;}
/* social squares (from the footer) anywhere */
.soc{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border:1px solid var(--rule);color:inherit;position:relative;isolation:isolate;overflow:hidden;}
.soc svg{width:1.05rem;height:1.05rem;fill:currentColor;position:relative;z-index:1;}