/* ==========================================================================
   Eight88 Sports

   Mobile first. Everything outside a media query is the phone layout, and the
   min-width blocks at the bottom add to it as the screen grows. Nothing is
   undone at a larger size, only extended.

   Breakpoints
     480   large phone
     640   small tablet, side by side pairs
     861   desktop navigation appears, the bottom tab bar goes away
     1081  two column features
     1281  full editorial widths
   ========================================================================== */

:root{
  /* surfaces. dark grey at the top of the page settling into black at the
     foot. --paper is the lifted surface, so a card reads above the ground. */
  --paper:#16171A;
  --canvas:#0E0E10;
  --canvas-2:#0A0A0B;
  --void:#050505;
  --ink:#F1EFEC;
  --ink-soft:#A6A39E;
  --ink-mute:#726F6B;
  --line:rgba(248,246,242,.10);
  --line-soft:rgba(248,246,242,.055);
  /* a fixed dark for the plate behind a photograph. it cannot follow --ink
     any more, because --ink is now near white. */
  --plate:#060607;

  /* brand */
  --blue-d:#0479C9;
  --blue:#02A4F6;
  --teal:#03A0C8;
  --green:#36B542;
  --accent:#02A4F6;
  --grad:linear-gradient(90deg,#0479C9 0%,#02A4F6 34%,#03A0C8 66%,#36B542 100%);

  /* type */
  --display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* metrics. these grow at the breakpoints below */
  --pad:20px;
  --maxw:1520px;
  --nav-h:60px;
  --gap:14px;
  --ease:cubic-bezier(.22,1,.36,1);
}

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 20px);
}

body{
  margin:0;
  /* the grey to black blend the whole design sits on. sections that carry a
     surface of their own paint over it, the rest let it through. */
  background:var(--canvas);
  /* scroll bound, not fixed, so the blend runs the length of the document:
     grey where the page starts, black where it ends. */
  background-image:linear-gradient(180deg,#141416 0%,#0E0E10 36%,#0A0A0B 66%,var(--void) 100%);
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:rgba(4,121,201,.18)}
button,input,textarea,select{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
a[href^="mailto:"],a[href^="tel:"],.contact-row a{overflow-wrap:anywhere}
::selection{background:var(--ink);color:var(--canvas)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* --------------------------------------------------------------- helpers */

.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
}
.rule{height:1px;background:var(--line-soft);border:0;margin:0}
.rule-grad{height:2px;background:var(--grad);border:0;margin:0}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:var(--pad);top:-100px;z-index:1000;
  background:var(--ink);color:var(--paper);padding:12px 18px;font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{top:14px}

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

h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;margin:0;
  letter-spacing:-.025em;line-height:1;text-wrap:balance;
}

.display{font-size:2.3rem;font-weight:800;letter-spacing:-.04em;line-height:.94;text-transform:uppercase}
.h1{font-size:2.1rem;font-weight:800;letter-spacing:-.035em;text-transform:uppercase;line-height:.96}
.h2{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;text-transform:uppercase;line-height:1}
.h3{font-size:1.18rem;font-weight:700;letter-spacing:-.015em;line-height:1.14}
.h4{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}

.lede{font-size:1.08rem;line-height:1.5;letter-spacing:-.01em;color:var(--ink-soft);max-width:38ch;text-wrap:pretty}
.body-lg{font-size:1rem;line-height:1.66;color:var(--ink-soft);max-width:62ch;text-wrap:pretty}

.label{font-family:var(--body);font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.num{font-family:var(--display);font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--ink-mute)}
.accent{color:var(--accent)}

/* --------------------------------------------------------------- top bar */

.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:var(--nav-h);display:flex;align-items:center;
  background:rgba(14,14,16,0);
  border-bottom:1px solid transparent;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.nav.is-stuck{
  background:rgba(12,12,14,.86);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:var(--line-soft);
}
.nav__inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}

.brand{display:flex;align-items:center;padding-block:6px}
.brand__logo{width:auto;height:32px;display:block;transition:opacity .3s var(--ease)}
.brand--stacked .brand__logo{height:104px}
.brand__logo--dark{display:none}

/* both are declared after .btn further down so they win on order */
.nav .nav__links{display:none}
.nav .nav__cta{display:none}

/* Reads as a word, not as an app icon. Two rules rather than three, and a
   tracked label beside them. */
.burger{
  display:flex;align-items:center;gap:10px;min-height:46px;padding:0 0 0 8px;
  background:none;border:0;cursor:pointer;margin-right:-2px;
}
.burger__mark{display:grid;gap:5px;width:20px}
.burger__mark i{display:block;height:1px;background:var(--ink);transition:transform .38s var(--ease),opacity .2s}
.burger__mark i:last-child{width:13px;margin-left:auto;transition:transform .38s var(--ease),width .38s var(--ease)}
.burger__label{
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);min-width:52px;text-align:right;
}
.burger__label b{font-weight:inherit}
.burger__label b:last-child,
.burger[aria-expanded="true"] .burger__label b:first-child{display:none}
.burger[aria-expanded="true"] .burger__label b:last-child{display:inline}
.burger[aria-expanded="true"] .burger__mark i:first-child{transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__mark i:last-child{width:20px;transform:translateY(-3px) rotate(-45deg)}

/* The whole site is dark now, so the bar is light on dark everywhere and the
   old logo and colour swap is gone. site.js still sets nav-over-dark on pages
   with a photographic header; these two rules are all it still does, which is
   brighten the type where the image behind the bar is at its lightest. */
body.nav-over-dark .nav:not(.is-stuck) .nav__link{color:rgba(255,255,255,.86)}
body.nav-over-dark .nav:not(.is-stuck) .nav__link:hover,
body.nav-over-dark .nav:not(.is-stuck) .nav__link[aria-current]{color:#fff}

/* ------------------------------------------------------------- drawer */

.drawer{
  position:fixed;inset:0;z-index:880;background:var(--void);
  overscroll-behavior:contain;overflow-y:auto;
  padding:calc(var(--nav-h) + 34px) 0 40px;
  transform:translateY(-100%);
  transition:transform .42s var(--ease);
  visibility:hidden;
}
.drawer.is-open{transform:translateY(0);visibility:visible}
/* the bar is transparent until it sticks, so menu items would otherwise scroll
   through it. while the menu is open it gets the menu's own ground. */
body.is-locked .nav{background:var(--void);border-bottom-color:transparent}
.drawer__inner{
  padding-left:max(var(--pad),env(safe-area-inset-left));
  padding-right:max(var(--pad),env(safe-area-inset-right));
  padding-bottom:max(24px,env(safe-area-inset-bottom));
  max-width:var(--maxw);margin-inline:auto;
}
.drawer ul{list-style:none;margin:0;padding:0}
.drawer li{border-top:1px solid var(--line-soft)}
.drawer ul:first-of-type li:first-child{border-top:0}
.drawer ul a{
  display:flex;align-items:baseline;gap:16px;padding:17px 0;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:1.85rem;letter-spacing:-.035em;line-height:1;min-height:58px;
}
.drawer ul a i{font-style:normal;font-size:.66rem;letter-spacing:.22em;color:var(--ink-mute);font-family:var(--body);font-weight:600;min-width:20px}
.drawer ul a[aria-current]{color:var(--accent)}
.drawer__group{margin-top:38px;padding-top:2px}
.drawer__group > .label{display:block;margin-bottom:6px}
/* `.drawer ul a` outranks a bare `.drawer__sub a`, so this has to match the
   list element too or the seven service lines render at headline size. */
.drawer ul.drawer__sub a{
  font-family:var(--body);font-size:1.02rem;font-weight:500;text-transform:none;
  letter-spacing:0;padding:13px 0;min-height:48px;color:var(--ink-soft);
}
.drawer ul.drawer__sub a i{font-size:.68rem}
.drawer ul.drawer__sub a[aria-current]{color:var(--accent)}
.drawer__cta{margin-top:38px}
.drawer__foot{display:grid;gap:2px;padding-top:30px;margin-top:30px;border-top:1px solid var(--line-soft);font-size:.98rem;color:var(--ink-soft)}
.drawer__foot a{display:inline-block;padding-block:11px}
.drawer__foot span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);padding-top:8px}

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

.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border:0;min-height:50px;
  background:var(--ink);color:var(--paper);
  font-size:.9rem;font-weight:600;letter-spacing:.01em;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);
  transform:translateY(101%);transition:transform .4s var(--ease);
}
.btn:hover::before,.btn:active::before{transform:translateY(0)}
.btn svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost:hover,.btn--ghost:active{color:var(--paper)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover,.btn--light:active{color:var(--paper)}
.btn--outline-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.btn--outline-light::before{background:#fff}
.btn--outline-light:hover,.btn--outline-light:active{color:var(--ink)}
.btn--sm{padding:11px 20px;min-height:44px;font-size:.82rem}
.btn--lg{padding:17px 30px;min-height:54px;font-size:.94rem}
.btn--block{width:100%}

.textlink{
  display:inline-flex;align-items:center;gap:9px;min-height:48px;
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:6px;position:relative;
}
.textlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.textlink::before{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.textlink svg{width:14px;height:14px;transition:transform .3s var(--ease)}

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

.hero{
  display:grid;gap:22px;
  padding-top:calc(var(--nav-h) + 26px);
  padding-bottom:30px;
}
.hero__body{display:grid;gap:18px}
.hero__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hero__kicker .dot{width:4px;height:4px;border-radius:50%;background:var(--green)}
.hero__tag{
  display:flex;align-items:center;gap:13px;margin:0;
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);line-height:1.5;
}
.hero__tag i{width:30px;height:2px;background:var(--grad);flex:none;display:block}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line > span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease);transition-delay:var(--d,0ms)}
.hero.is-ready .hero__title .line > span{transform:none}
.hero__actions{display:grid;gap:10px}

.hero__media{position:relative;overflow:hidden;background:var(--canvas-2);margin:0;border:1px solid var(--line-soft)}
.hero__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.hero__media figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:16px 18px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62));
  color:#fff;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
}

.hero__strip{
  display:flex;flex-wrap:wrap;gap:10px 20px;
  padding-block:16px;border-top:1px solid var(--line);
}
.hero__strip span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}

/* --------------------------------------------------------------- landing */

/* The home page is a menu, not a scrolling page. Everything that used to sit
   under the hero now lives on the page its tile points at. */
.landing{padding-top:calc(var(--nav-h) + 30px);padding-bottom:26px}
.landing__intro{display:grid;gap:16px}
/* the headline breaks at its own spans, so it must not be measured in
   characters. only the lines under it are. */
.landing__title{margin:0;max-width:none}
.landing .hero__tag{max-width:52ch}
.landing__meta{max-width:44ch}
.landing__title .line{display:block;overflow:hidden}
.landing__title .line > span{display:inline-block;transform:translateY(105%);transition:transform .8s var(--ease);transition-delay:var(--d,0ms)}
.landing.is-ready .landing__title .line > span{transform:none}
.landing__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  padding-top:14px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--ink-soft);
}
.landing__meta a{min-height:44px;display:inline-flex;align-items:center}
.landing__meta span{width:3px;height:3px;border-radius:50%;background:var(--ink-mute);flex:none}

/* The bar keeps its links on the landing. Hiding them was tried and reverted:
   the tiles repeat the same six, but they sit below the headline, so hiding the
   bar left the first screen with no way out of it. */

/* ---------------------------------------------------------- entry tiles */

.tiles{display:grid;gap:2px;background:var(--line-soft)}
.tile{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  background:var(--plate);min-height:54vw;isolation:isolate;
}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(.2) brightness(.78);
  transition:transform 1s var(--ease),filter .5s var(--ease);
}
.tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(5,5,6,.06) 0%,rgba(5,5,6,.38) 52%,rgba(5,5,6,.9) 100%);
}
.tile__body{position:relative;width:100%;padding:84px 20px 22px;color:#fff;display:grid;gap:7px}
.tile__n{font-size:.74rem;letter-spacing:.18em;color:rgba(255,255,255,.62)}
.tile h3{color:#fff;text-transform:uppercase;letter-spacing:-.02em}
.tile p{margin:0;font-size:.94rem;color:rgba(255,255,255,.8);line-height:1.5}
.tile__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
}
.tile__go svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.tile__bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--tile-accent,var(--blue));z-index:1}

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

.section{padding-block:52px;position:relative}
.section--tight{padding-block:36px}
.section--paper{background:var(--paper)}
.section--tint{background:var(--canvas-2)}
.section--flush{padding-block:0}

.sec-head{display:grid;gap:14px;margin-bottom:28px}
.sec-head__tag{display:flex;align-items:center;gap:12px}
.sec-head__tag i{display:block;width:22px;height:2px;background:var(--grad);flex:none}
.sec-head__body{display:grid;gap:14px}

.statement{
  font-family:var(--display);font-weight:700;
  font-size:1.5rem;line-height:1.18;letter-spacing:-.025em;max-width:24ch;
}
.statement em{font-style:normal;color:var(--accent)}

.metrics{display:grid;border-top:1px solid var(--line)}
.metric{padding:18px 0;border-bottom:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.metric__v{font-family:var(--display);font-weight:800;font-size:1.7rem;letter-spacing:-.03em;line-height:1}
.metric__k{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);text-align:right}

/* --------------------------------------------------------- link rows */

.rows{border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;
  padding:18px 0;border-bottom:1px solid var(--line);
  position:relative;min-height:60px;align-content:center;
}
.row::before{
  content:"";position:absolute;left:calc(var(--pad) * -1);top:0;bottom:0;width:3px;
  background:var(--row-accent,var(--accent));transform:scaleY(1);opacity:.55;
  transition:opacity .3s var(--ease);
}
.row__n{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.14em;color:var(--ink-mute);padding-top:4px}
.row h3{text-transform:uppercase;letter-spacing:-.02em}
.row > :nth-child(3){grid-column:2}
.row p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.58}
.row ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.row li{font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--line);padding:5px 10px}
.row__go{
  grid-column:2;display:inline-flex;align-items:center;gap:7px;margin-top:2px;
  font-size:.74rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.row__go svg{width:13px;height:13px;transition:transform .3s var(--ease)}

/* --------------------------------------------------- service card grid */

.svc-grid{display:grid;gap:var(--gap)}
.svc-card{
  position:relative;display:grid;gap:9px;
  background:var(--paper);border:1px solid var(--line-soft);
  padding:22px 20px 20px;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.section--paper .svc-card{background:var(--canvas)}
.svc-card__bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--svc-accent,var(--blue))}
.svc-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc-card h3{text-transform:uppercase;letter-spacing:-.02em}
.svc-card p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.58}
.svc-card ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.svc-card li{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);border:1px solid var(--line);padding:4px 9px}
.svc-card__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;min-height:32px;
  font-size:.76rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.svc-card__go svg{width:13px;height:13px;transition:transform .3s var(--ease)}

/* --------------------------------------------------------- principles */

.principle{
  display:grid;gap:8px;padding-block:22px;border-top:1px solid var(--line);
}
.principle:last-child{border-bottom:1px solid var(--line)}
.principle__n{
  font-family:var(--display);font-weight:800;font-size:2rem;line-height:.9;
  letter-spacing:-.045em;color:var(--canvas-2);
}
.section--tint .principle__n{color:rgba(255,255,255,.14)}
.principle__body{display:grid;gap:8px;max-width:64ch}

/* --------------------------------------------------------------- rail */

.rail{
  display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:18px;
  margin-inline:calc(var(--pad) * -1);
  padding-inline:max(var(--pad),env(safe-area-inset-left));
  scroll-padding-inline:var(--pad);
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.26) transparent;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{height:3px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.26)}
.rail::-webkit-scrollbar-track{background:rgba(255,255,255,.07)}

.stage{
  position:relative;flex:0 0 min(72vw,300px);aspect-ratio:4/5;scroll-snap-align:start;
  overflow:hidden;background:var(--plate);display:flex;flex-direction:column;justify-content:flex-end;
  padding:18px;isolation:isolate;color:#fff;
}
.stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  filter:grayscale(.3) brightness(.7);transition:transform .9s var(--ease),filter .5s var(--ease);
}
.stage::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,5,6,.12),rgba(5,5,6,.86))}
.stage__bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent-2,var(--blue));z-index:1}
.stage__n{font-size:.74rem;letter-spacing:.18em;color:rgba(255,255,255,.62);margin-bottom:auto}
.stage h3{color:#fff;text-transform:uppercase;margin-bottom:6px;font-size:1.08rem}
.stage p{margin:0;font-size:.86rem;color:rgba(255,255,255,.78);line-height:1.5}

/* --------------------------------------------------------------- feature */

.feature{display:grid;gap:22px}
.feature > *{min-width:0}
.feature__media{position:relative;overflow:hidden;background:var(--canvas-2);margin:0;border:1px solid var(--line-soft)}
.feature__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feature__media figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));
  color:#fff;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
}
.feature__body{display:grid;gap:14px;align-content:center}

.spec{margin:0;display:grid;border-top:1px solid var(--line)}
.spec dt{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);padding-top:13px}
.spec dd{
  margin:0 0 13px;font-family:var(--display);font-weight:700;font-size:1.02rem;
  letter-spacing:-.015em;border-bottom:1px solid var(--line);padding-bottom:13px;
}
.spec dd:last-of-type{border-bottom:0}

/* ---------------------------------------------------------- roster cards */

/* The roster splash. One athlete is a single wide feature; a second turns the
   list into a two across grid on its own, with no markup change. */
.roster{display:grid;gap:16px}

.rcard{position:relative;border:1px solid var(--line);background:var(--paper)}
.rcard__inner{display:grid}
.rcard__media{position:relative;overflow:hidden;background:var(--plate)}
.rcard__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 24%;
  aspect-ratio:4/5;display:block;transition:transform .7s var(--ease);
}
.rcard:hover .rcard__media img{transform:scale(1.03)}
.rcard__badge{
  position:absolute;left:0;bottom:0;padding:9px 13px;
  background:var(--rcard-accent,var(--accent));color:#fff;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
}
.rcard__body{padding:24px 20px 26px;display:grid;gap:14px;align-content:start}
.rcard__eyebrow{display:flex;align-items:center;gap:12px}
.rcard__num{
  font-family:var(--display);font-weight:800;font-size:1.8rem;line-height:.85;
  letter-spacing:-.04em;color:var(--rcard-accent,var(--accent));flex:none;
}
.rcard__name{
  margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.04em;
  line-height:.9;text-transform:uppercase;font-size:clamp(2.1rem,9vw,3rem);
}
.rcard__name a{color:var(--ink);transition:color .25s}
/* the whole card is the hit area, driven by the one real link in the heading */
.rcard__name a::after{content:"";position:absolute;inset:0}
.rcard:hover .rcard__name a{color:var(--rcard-accent,var(--accent))}
.rcard__hook{
  margin:0;font-size:1rem;line-height:1.5;color:var(--ink-soft);max-width:44ch;
  text-wrap:pretty;
}
.rcard__hook em{font-style:normal;color:var(--ink);font-weight:600}
.rcard__hon{
  list-style:none;margin:0;padding:0;display:grid;gap:7px;
  border-top:1px solid var(--line-soft);padding-top:14px;
}
.rcard__hon li{
  position:relative;padding-left:18px;font-size:.9rem;line-height:1.5;color:var(--ink-soft);
}
.rcard__hon li::before{
  content:"";position:absolute;left:0;top:.6em;width:8px;height:1px;
  background:var(--rcard-accent,var(--accent));opacity:.8;
}
.rcard__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:2px;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--ink);
}
.rcard__go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.rcard:hover .rcard__go svg{transform:translateX(4px)}

/* her file, on the portfolio */
.pf-file{margin-top:26px}

.source-note{margin-top:34px;font-size:.88rem;color:var(--ink-mute);max-width:74ch}
.pagehead__actions{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}

/* ------------------------------------------------------------- portfolio */

/* One athlete's sponsorship portfolio. Same type, colour and motion as the
   rest of the site, built around an oversized photographic hero, a sticky
   section rail and panels that open. */

.pf-hero{
  position:relative;isolation:isolate;color:#fff;
  padding-block:calc(var(--nav-h) + 54px) 40px;
  background:var(--void);overflow:hidden;
}
.pf-hero__media{position:absolute;inset:0;z-index:-2}
.pf-hero__media img{width:100%;height:100%;object-fit:cover;object-position:58% 26%;opacity:.42}
.pf-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,5,6,.78) 0%,rgba(5,5,6,.42) 38%,rgba(5,5,6,.94) 100%),
    linear-gradient(90deg,rgba(5,5,6,.88) 0%,rgba(5,5,6,.2) 72%);
}
.pf-hero__rule{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad)}
/* no measure here: the stylesheet is mobile first, and a ch based cap squeezed
   the entire hero into about 205px on a phone. The desktop measure lives in the
   1081 block, where it was always meant to be. */
.pf-hero__inner{max-width:none}
.pf-hero .crumb{margin-bottom:26px}
.pf-hero__kicker{
  margin:0 0 10px;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.pf-hero__name{
  margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.045em;
  line-height:.84;text-transform:uppercase;
  font-size:clamp(2.9rem,15vw,5.4rem);
}
.pf-hero__role{
  margin:16px 0 0;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.76);
}
.pf-hero__hook{
  margin:22px 0 0;max-width:40ch;font-size:1.06rem;line-height:1.5;
  color:rgba(255,255,255,.82);text-wrap:pretty;
}
.pf-hero__hook em{font-style:normal;color:#fff;font-weight:600}
.pf-hero__actions{margin-top:28px;display:flex;flex-wrap:wrap;gap:10px}
/* on a narrow screen a label wrapping inside a shrink to fit button looks
   like a mistake, so the pair goes full measure instead */
@media (max-width:479px){
  .pf-hero__actions{display:grid;grid-template-columns:1fr}
  .pf-hero__actions .btn{width:100%;justify-content:center}
}

/* the numbers */
.pf-strip{background:var(--paper);border-bottom:1px solid var(--line)}
.pf-figs{display:grid;grid-template-columns:repeat(2,1fr)}
.pf-fig{padding:22px 0;border-bottom:1px solid var(--line-soft)}
.pf-fig:nth-child(odd){padding-right:18px;border-right:1px solid var(--line-soft)}
.pf-fig:nth-child(even){padding-left:18px}
.pf-fig__v{
  font-family:var(--display);font-weight:800;font-size:2.5rem;line-height:1;
  letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;
}
.pf-fig__k{margin-top:7px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}

/* shell */
.pf-shell{padding-block:40px 10px}
.pf-grid{display:grid;gap:0}
.pf-rail{display:none}
.pf-sec{padding-block:34px;border-top:1px solid var(--line-soft)}
.pf-sec:first-child{border-top:0;padding-top:6px}
.pf-sec__tag{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.pf-sec__tag .num{font-family:var(--display);font-weight:700;font-size:.76rem;color:var(--accent);letter-spacing:.04em}
.pf-sec__tag i{display:block;width:26px;height:1px;background:var(--grad)}
.pf-sec__tag .label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute)}
.pf-sec .h2{margin:0 0 16px}
.pf-sec .body-lg + .body-lg{margin-top:14px}

.pf-quote{
  margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line);
}
.pf-quote p{
  margin:0;font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.24;
  letter-spacing:-.02em;color:var(--ink);max-width:30ch;
}

/* accordion */
.acc{margin-top:24px;border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc h3{margin:0;font:inherit}
.acc__head{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:none;border:0;padding:18px 0;cursor:pointer;color:inherit;
  font-family:inherit;position:relative;
}
.acc__head::before{
  content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:var(--acc-accent,var(--accent));transition:width .4s var(--ease);
}
.acc__head[aria-expanded="true"]::before{width:100%}
.acc__yr{
  flex:none;font-family:var(--display);font-weight:800;font-size:1.16rem;
  letter-spacing:-.03em;color:var(--acc-accent,var(--accent));
  min-width:3.1em;font-variant-numeric:tabular-nums;
}
.acc__t{
  flex:1;font-family:var(--display);font-weight:700;font-size:1.06rem;
  letter-spacing:-.015em;color:var(--ink);display:grid;gap:3px;
}
.acc__t em{
  font-style:normal;font-family:var(--body);font-weight:400;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);
}
.acc__i{
  flex:none;width:15px;height:15px;position:relative;
}
.acc__i::before,.acc__i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink-soft);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.acc__i::before{width:13px;height:1px}
.acc__i::after{width:1px;height:13px}
.acc__head[aria-expanded="true"] .acc__i::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.acc__head:hover .acc__i::before,.acc__head:hover .acc__i::after{background:var(--ink)}
.acc__panel{padding:0 0 20px}
.acc__panel ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.acc__panel li{position:relative;padding-left:19px;color:var(--ink-soft);font-size:.95rem;line-height:1.55}
.acc__panel li::before{
  content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;
  background:var(--acc-accent,var(--accent));opacity:.75;
}
.acc__fee{
  margin:16px 0 0;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acc-accent,var(--accent));
}

/* reasons */
.pf-reasons{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0;counter-reset:r}
.pf-reasons li{
  counter-increment:r;padding:20px 0;border-top:1px solid var(--line-soft);
  display:grid;gap:7px;
}
.pf-reasons li::before{
  content:counter(r,decimal-leading-zero);
  font-family:var(--display);font-weight:700;font-size:.72rem;color:var(--accent);letter-spacing:.06em;
}
.pf-reasons h3{margin:0}
.pf-reasons p{margin:0;color:var(--ink-soft);font-size:.97rem;line-height:1.6;max-width:62ch}

/* market */
.pf-market{display:grid;gap:0;margin:24px 0 26px;border-top:1px solid var(--line)}
.pf-mk{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.pf-mk__v{
  font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1;
  letter-spacing:-.035em;color:var(--ink);
}
.pf-mk p{margin:10px 0 0;color:var(--ink-soft);font-size:.95rem;line-height:1.55;max-width:50ch}
.pf-mk__s{
  display:inline-block;margin-top:10px;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mute);
}

/* inventory */
.pf-inv{list-style:none;margin:24px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.pf-inv li{padding:16px 0;border-bottom:1px solid var(--line-soft);display:grid;gap:5px}
.pf-inv b{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.015em;color:var(--ink)}
.pf-inv span{color:var(--ink-soft);font-size:.95rem;line-height:1.55;max-width:62ch}

/* said up front */
.pf-upfront{list-style:none;margin:24px 0 0;padding:0;display:grid;border-top:1px solid var(--line)}
.pf-upfront li{padding:20px 0;border-bottom:1px solid var(--line-soft);display:grid;gap:11px}
.pf-upfront__n{font-family:var(--display);font-weight:700;font-size:.72rem;color:var(--accent);letter-spacing:.06em}
.pf-upfront h3{margin:0 0 7px}
.pf-upfront p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.6;max-width:66ch}

/* gallery */
.pf-filter{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 14px}
.pf-filter button{
  font:inherit;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);background:none;border:1px solid var(--line);
  padding:8px 14px;cursor:pointer;transition:color .25s,border-color .25s,background-color .25s;
}
.pf-filter button:hover{color:var(--ink);border-color:var(--ink-mute)}
.pf-filter button[aria-pressed="true"]{color:var(--ink);border-color:transparent;background:rgba(248,246,242,.1)}

.pf-gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pf-gal figure{margin:0}
.pf-gal button{
  display:block;width:100%;padding:0;border:1px solid var(--line-soft);background:var(--plate);
  position:relative;overflow:hidden;cursor:zoom-in;
}
.pf-gal img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block;
  transition:transform .6s var(--ease),opacity .3s;
}
.pf-gal button:hover img{transform:scale(1.04)}
.pf-gal figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:30px 11px 9px;text-align:left;
  background:linear-gradient(180deg,rgba(5,5,6,0),rgba(5,5,6,.84));
  color:#fff;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
}

/* An image set into the argument rather than parked in a gallery. Offset and
   captioned, so it reads as editorial rather than decorative. */
.pf-split{
  margin:26px 0 0;position:relative;
  display:grid;gap:0;
}
.pf-split img{
  width:100%;height:auto;display:block;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 26%;border:1px solid var(--line-soft);background:var(--plate);
}
.pf-split figcaption{
  display:grid;gap:4px;padding:13px 0 0;
  font-size:.86rem;line-height:1.5;color:var(--ink-mute);
}
.pf-split figcaption b{
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
}

/* A full measure photograph between sections, with the line it earns. The
   accent wash keeps a warm sideline frame inside the site's palette. */
.pf-bleed{
  position:relative;margin:0;isolation:isolate;overflow:hidden;
  background:var(--void);
}
.pf-bleed img{
  width:100%;height:100%;object-fit:cover;object-position:50% 15%;
  display:block;aspect-ratio:3/2;opacity:.62;
}
.pf-bleed--tall img{object-position:50% 11%}
.pf-bleed::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,5,6,.72) 0%,rgba(5,5,6,.18) 42%,rgba(5,5,6,.9) 100%),
    linear-gradient(90deg,rgba(4,121,201,.16),rgba(54,181,66,.1));
}
.pf-bleed::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:var(--grad);
}
.pf-bleed figcaption{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:0 var(--pad) clamp(22px,5vw,54px);
}
.pf-bleed blockquote{margin:0}
.pf-bleed blockquote p{
  margin:0;color:#fff;font-family:var(--display);font-weight:800;
  font-size:clamp(1.35rem,5.4vw,3rem);line-height:1.04;letter-spacing:-.035em;
  text-transform:uppercase;max-width:18ch;text-wrap:balance;
}

.pf-note{margin-top:26px;font-size:.86rem;line-height:1.6;color:var(--ink-mute);max-width:72ch}

/* lightbox */
body.lb-open{overflow:hidden}
.lb{
  position:fixed;inset:0;z-index:950;background:rgba(4,4,5,.94);
  display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;
  animation:lbin .25s var(--ease);
}
/* display:flex above outranks the browser default for [hidden], so the closed
   lightbox would otherwise sit invisibly over the whole page and swallow every
   click. This line is load bearing. */
.lb[hidden]{display:none}
@keyframes lbin{from{opacity:0}to{opacity:1}}
.lb__fig{margin:0;max-width:min(92vw,760px);max-height:86vh;display:flex;flex-direction:column;gap:11px}
.lb__fig img{max-width:100%;max-height:78vh;object-fit:contain;display:block;margin:0 auto}
.lb__fig figcaption{
  text-align:center;color:rgba(255,255,255,.72);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;
}
.lb__close,.lb__nav{
  background:none;border:0;color:rgba(255,255,255,.66);cursor:pointer;padding:9px;
  transition:color .2s;flex:none;
}
.lb__close:hover,.lb__nav:hover{color:#fff}
.lb__close{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:1}
.lb__close svg,.lb__nav svg{width:24px;height:24px;display:block}

/* the unlisted notice on the rate card */
.pf-private{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 22px;padding:13px 15px;
  border:1px solid var(--line);background:rgba(248,246,242,.03);
  font-size:.82rem;line-height:1.55;color:var(--ink-soft);max-width:72ch;
}
.pf-private__dot{
  flex:none;width:7px;height:7px;border-radius:50%;background:var(--green);
  margin-top:.48em;box-shadow:0 0 0 3px rgba(54,181,66,.16);
}

/* rate tables */
.tablewrap{overflow-x:auto;margin-top:8px;-webkit-overflow-scrolling:touch}
.rates{width:100%;border-collapse:collapse;min-width:620px;text-align:left}
.rates th,.rates td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.rates thead th{
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);
  font-weight:500;border-bottom:1px solid var(--line);
}
.rates tbody th{
  font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.015em;
  color:var(--ink);white-space:nowrap;
}
.rates td{color:var(--ink-soft);font-size:.93rem;line-height:1.55}
.rates td.fill{min-width:130px}
.rates td.fill::after{
  content:"";display:block;height:1px;background:var(--line);
  margin-top:.9em;
}

/* --------------------------------------------------------------- people */

.people{display:grid;gap:var(--gap)}
/* No box and no coloured badge. Each person is a column in an editorial grid,
   opened by a hairline with a short accent tick sitting on it. The initials are
   a quiet monogram rather than an avatar. */
.person{
  position:relative;background:none;border:0;
  border-top:1px solid var(--line);
  padding:22px 0 6px;display:grid;gap:0;
  /* every card stretches to the tallest in the row. without this the spare
     height is shared out across the rows inside, so a card with a shorter
     paragraph pushes its own name and role down and the row stops lining up. */
  align-content:start;
  transition:border-color .4s var(--ease);
}
.section--paper .person{background:none}
.person__bar{
  position:absolute;top:-1px;left:0;width:44px;height:1px;
  background:var(--accent-2,var(--blue));
  transition:width .5s var(--ease);
}
.person__mono{
  font-family:var(--body);font-weight:600;font-size:.7rem;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 26px;line-height:1.25;
}
.person h3{
  font-family:var(--display);font-weight:700;font-size:1.5rem;
  letter-spacing:-.025em;line-height:1.04;margin:0 0 9px;
}
.person__role{
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  line-height:1.5;color:var(--accent-2,var(--accent));margin-bottom:18px;
}
.person p{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.62}
.person__reach{display:grid;gap:2px;margin-top:4px}
.person__reach a{font-size:.92rem;color:var(--accent);padding-block:8px;display:inline-block}

/* --------------------------------------------------------------- band */

.band{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding-block:52px}
.band__media{position:absolute;inset:0;z-index:-2}
.band__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.55)}
.band__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,5,6,.6) 0%,rgba(5,5,6,.46) 58%,rgba(5,5,6,.78) 100%);
}
.band__inner{display:grid;gap:18px;max-width:860px}
.band h2,.band .h1{color:#fff}
.band .label{color:rgba(255,255,255,.68)}
.band .body-lg{color:rgba(255,255,255,.82)}
.band__actions{display:grid;gap:10px}
.band__rule{position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:1}

/* --------------------------------------------------------------- page head */

.pagehead{
  position:relative;overflow:hidden;color:#fff;isolation:isolate;
  padding-block:calc(var(--nav-h) + 40px) 34px;
}
.pagehead__media{position:absolute;inset:0;z-index:-2}
.pagehead__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.28) brightness(.5)}
.pagehead__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,6,.64),rgba(5,5,6,.4))}
.pagehead__inner{display:grid;gap:14px}
.pagehead h1{color:#fff}
.pagehead .lede{color:rgba(255,255,255,.86)}
.pagehead__rule{position:absolute;bottom:0;left:0;right:0;height:3px;background:var(--grad)}

.pagehead--plain{color:var(--ink);background:var(--paper);padding-block:calc(var(--nav-h) + 34px) 30px}
.pagehead--plain h1{color:var(--ink)}
.pagehead--plain .lede{color:var(--ink-soft)}
.pagehead--plain .crumb{color:var(--ink-mute)}
.pagehead--plain .crumb i{background:var(--line)}
.pagehead--plain .crumb a:hover{color:var(--ink)}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;color:rgba(255,255,255,.7);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase}
.crumb i{width:16px;height:1px;background:rgba(255,255,255,.45);display:block;flex:none}
.crumb a{padding-block:12px}
.crumb a:hover{color:#fff}

/* ------------------------------------------------------- prev and next */

.pager{display:grid;gap:2px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.pager__link{
  display:grid;gap:5px;padding:20px var(--pad);background:var(--canvas);min-height:82px;
  align-content:center;transition:background .3s var(--ease);
}
.section--paper + .pager .pager__link,.pager--paper .pager__link{background:var(--paper)}
.pager__link:active{background:var(--canvas-2)}
.pager__dir{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);display:flex;align-items:center;gap:8px}
.pager__dir svg{width:13px;height:13px}
.pager__title{font-family:var(--display);font-weight:800;font-size:1.15rem;text-transform:uppercase;letter-spacing:-.02em}
.pager__link--next{text-align:right}
.pager__link--next .pager__dir{justify-content:flex-end}

/* --------------------------------------------------------------- forms */

.form{display:grid;gap:16px;min-width:0}
.field{display:grid;gap:6px}
.field label{
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);
  display:flex;justify-content:space-between;gap:10px;
}
.field label em{font-style:normal;color:rgba(255,255,255,.34);letter-spacing:.04em}
.field input,.field select,.field textarea{
  width:100%;background:var(--paper);border:1px solid var(--line);
  padding:14px 15px;font-size:16px;appearance:none;border-radius:0;min-height:50px;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.section--paper .field input,.section--paper .field select,.section--paper .field textarea{background:var(--canvas)}
.field textarea{min-height:140px;resize:vertical;line-height:1.55}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237C848C' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:42px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(4,121,201,.13);
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.34)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#F0705F}
.field__err{font-size:.8rem;color:#F0705F}

.form__row{display:grid;gap:16px}
.form__foot{display:grid;gap:12px}
.form__note{font-size:.82rem;color:var(--ink-mute);margin:0}
.form__status{
  padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);
  background:var(--paper);font-size:.94rem;display:none;
}
.form__status.is-ok{display:block;border-left-color:var(--green)}
.form__status.is-bad{display:block;border-left-color:#F0705F}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}

.contact-list{display:grid;border-top:1px solid var(--line)}
.contact-row{display:grid;gap:2px;padding-block:14px;border-bottom:1px solid var(--line)}
.contact-row a{display:inline-block;padding-block:12px}
.contact-row a:hover{color:var(--accent)}

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

.footer{background:var(--void);border-top:1px solid var(--line);padding-block:44px 24px}
.footer__grid{display:grid;gap:28px;padding-bottom:32px}
.footer__brand{display:grid;gap:16px;align-content:start;max-width:36ch}
.footer h4{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-family:var(--body);font-weight:600;margin-bottom:8px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.footer li a{display:inline-block;padding-block:10px;font-size:.94rem;color:var(--ink-soft);transition:color .25s var(--ease)}
.footer__tag{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1rem;line-height:1.2;letter-spacing:-.015em;margin:0}
.footer__bar{
  display:grid;gap:6px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.82rem;color:var(--ink-mute);
}

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

[data-reveal]{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{opacity:1;transform:none}

/* --------------------------------------------------------------- admin */

.table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--paper)}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;min-width:820px}
table.data th,table.data td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.data th{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);background:var(--canvas);position:sticky;top:0}
table.data td{color:var(--ink-soft)}
.pill{display:inline-block;padding:3px 10px;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(2,164,246,.14);color:var(--accent)}

/* ==========================================================================
   480 and up. Large phones.
   ========================================================================== */

@media (min-width:480px){
  :root{--pad:26px;--gap:16px}
  .display{font-size:2.8rem}
  .h1{font-size:2.5rem}
  .h2{font-size:2rem}
  .statement{font-size:1.7rem}
  .hero__actions,.band__actions{grid-auto-flow:column;grid-auto-columns:max-content;align-items:center}
  .metric__v{font-size:2rem}
  .tile{min-height:48vw}
}

/* ==========================================================================
   640 and up. Small tablets. Pairs sit side by side.
   ========================================================================== */

@media (min-width:640px){
  :root{--pad:34px}
  .display{font-size:3.4rem}
  .h1{font-size:3rem}
  .h2{font-size:2.3rem}
  .h3{font-size:1.3rem}
  .lede{font-size:1.16rem;max-width:42ch}
  .statement{font-size:2rem}

  .section{padding-block:66px}
  .section--tight{padding-block:46px}
  .pagehead{padding-block:calc(var(--nav-h) + 56px) 44px}
  .band{padding-block:70px}

  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile{min-height:38vw}

  .svc-grid{grid-template-columns:repeat(2,1fr)}
  /* seven cards never fill the last row, so a card left alone spans it */
  .svc-grid > :last-child:nth-child(odd){grid-column:1 / -1}
  .people{grid-template-columns:repeat(2,1fr)}
  /* one athlete reads as a wide feature. two or more become a grid, and the
     :only-child rule simply stops applying. */
  .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rcard:only-child{grid-column:1 / -1}
  .rcard:only-child .rcard__inner{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:stretch}
  /* the photograph fills whatever height the card settles at, rather than the
     card growing to fit a very tall source and stranding the text beside it */
  .rcard:only-child .rcard__media{min-height:430px}
  .rcard:only-child .rcard__media img{position:absolute;inset:0;aspect-ratio:auto;height:100%;object-position:50% 22%}
  .rcard:only-child .rcard__body{padding:40px 44px 42px;align-content:center;gap:18px}
  .rcard:only-child .rcard__name{font-size:clamp(3rem,5vw,4.2rem)}
  .rcard:only-child .rcard__hon{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 28px}
  .rcard:only-child .rcard__num{font-size:2.3rem}
  .pf-hero{padding-block:calc(var(--nav-h) + 90px) 74px}
  .pf-hero__inner{max-width:none}
  .pf-hero__name{font-size:clamp(4.4rem,9vw,7.6rem)}
  .pf-hero__hook{font-size:1.2rem;max-width:46ch}
  .pf-figs{grid-template-columns:repeat(4,1fr)}
  .pf-fig{padding:30px 0}
  .pf-fig:nth-child(odd),.pf-fig:nth-child(even){padding-left:0;padding-right:22px;border-right:0}
  .pf-fig + .pf-fig{padding-left:26px;border-left:1px solid var(--line-soft)}
  .pf-fig__v{font-size:3.2rem}
  .pf-shell{padding-block:70px 20px}
  .pf-grid{grid-template-columns:210px minmax(0,1fr);gap:56px;align-items:start}
  .pf-sec{padding-block:56px}
  .pf-reasons{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
  .pf-market{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
  .pf-inv{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
  .pf-upfront li{grid-template-columns:40px minmax(0,1fr);gap:0 16px}
  .pf-gal{grid-template-columns:repeat(3,1fr)}
  .pf-quote p{font-size:1.7rem}
  .pf-split{grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);gap:28px;align-items:end;margin-top:34px}
  .pf-split figcaption{padding:0 0 4px;align-content:end}
  .pf-split--flip img{order:2}
  .pf-split--flip figcaption{order:1}
  .pf-bleed img{aspect-ratio:21/9;object-position:50% 16%}
  .pf-bleed figcaption{padding-inline:clamp(28px,6vw,110px)}

  /* the rail only exists where there is room beside the text */
  .pf-rail{display:block;position:sticky;top:calc(var(--nav-h) + 26px)}
  .pf-rail--ghost{position:static}
  .pf-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
  .pf-rail a{
    display:flex;align-items:baseline;gap:10px;padding:7px 0;
    color:var(--ink-mute);transition:color .25s;
  }
  .pf-rail i{
    font-style:normal;font-family:var(--display);font-weight:700;font-size:.66rem;
    letter-spacing:.06em;opacity:.7;
  }
  .pf-rail span{font-size:.78rem;line-height:1.3}
  .pf-rail a:hover{color:var(--ink-soft)}
  .pf-rail a.is-here{color:var(--ink)}
  .pf-rail a.is-here i{color:var(--accent);opacity:1}
  .lb{gap:18px;padding:30px}
  /* two of the four role lines wrap. reserving the second line keeps every
     card's paragraph on the same baseline. */
  /* two of the four role lines wrap. reserving the second line keeps every
     paragraph in the row on the same baseline. */
  .person__role{min-height:3em}
  .form__row{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .footer__brand{grid-column:1 / -1}
  .footer__bar{grid-auto-flow:column;justify-content:space-between}

  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric{display:grid;gap:6px;padding:22px 18px 22px 0}
  .metric__k{text-align:left}
  .metric:nth-child(2n){border-left:1px solid var(--line);padding-left:18px}
  .metric__v{font-size:2.3rem}

  .contact-row{grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);align-items:baseline;gap:14px}
  .form__foot{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:18px}
  .pager{grid-template-columns:1fr 1fr}
  .principle{grid-template-columns:auto minmax(0,1fr);gap:12px 26px}
  .principle__n{font-size:2.6rem}
  .row{grid-template-columns:auto minmax(0,.4fr) minmax(0,.6fr);align-items:baseline;gap:14px 26px}
  .row > :nth-child(3){grid-column:3}
  .row__go{grid-column:3}
  .hero__media img{aspect-ratio:16/9}
}

/* ==========================================================================
   861 and up. Desktop navigation, no thumb bar.
   ========================================================================== */

@media (min-width:861px){
  :root{--pad:48px;--nav-h:78px;--gap:18px}

  body{font-size:17px;padding-bottom:0}
  .burger{display:none}
  .nav .nav__links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
  .nav .nav__cta{display:inline-flex;margin-left:10px}
  .brand__logo{height:40px}

  .nav__link{
    position:relative;padding:10px 15px;min-height:44px;display:flex;align-items:center;
    font-size:.85rem;font-weight:500;color:var(--ink-soft);transition:color .25s var(--ease);
  }
  .nav__link:hover{color:var(--ink)}
  .nav__link::after{
    content:"";position:absolute;left:15px;right:15px;bottom:6px;height:1.5px;background:var(--ink);
    transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
  }
  .nav__link:hover::after,.nav__link[aria-current]::after{transform:scaleX(1)}
  .nav__link[aria-current]{color:var(--ink);font-weight:600}

  /* services opens a panel of its six pages */
  .nav__item{position:relative}
  .nav__panel{
    position:absolute;top:100%;left:0;min-width:290px;
    background:var(--paper);border:1px solid var(--line-soft);
    box-shadow:0 22px 60px rgba(0,0,0,.55);
    padding:8px;display:grid;gap:1px;list-style:none;margin:6px 0 0;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  }
  .nav__item:hover .nav__panel,.nav__item:focus-within .nav__panel{opacity:1;visibility:visible;transform:none}
  .nav__panel a{
    display:flex;align-items:center;gap:10px;padding:11px 12px;font-size:.88rem;color:var(--ink-soft);
    transition:background .2s var(--ease),color .2s var(--ease);
  }
  .nav__panel a:hover{background:var(--canvas);color:var(--ink)}
  .nav__panel b{width:5px;height:5px;border-radius:50%;background:var(--panel-accent,var(--blue));flex:none}

  .display{font-size:clamp(3.4rem,5vw,5.2rem)}
  .h1{font-size:clamp(3rem,4.4vw,4.6rem)}
  .h2{font-size:clamp(2.3rem,3vw,3.1rem)}
  .h3{font-size:1.45rem}
  .lede{font-size:1.3rem}
  .statement{font-size:clamp(2rem,2.6vw,2.7rem)}

  .section{padding-block:90px}
  .section--tight{padding-block:60px}
  .pagehead{padding-block:calc(var(--nav-h) + 74px) 60px}
  .band{padding-block:100px}

  .sec-head{grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);gap:40px;margin-bottom:48px}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .tile{min-height:0;aspect-ratio:4/5}
  .tile__body{padding:28px 24px 24px}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .svc-grid > :last-child:nth-child(odd){grid-column:auto}
  .svc-grid > :last-child:nth-child(3n+1){grid-column:1 / -1}
  .metrics{grid-template-columns:repeat(4,1fr)}
  .metric:nth-child(2n){border-left:0;padding-left:0}
  .metric + .metric{border-left:1px solid var(--line);padding-left:24px}
  .metric__v{font-size:2.7rem}
  .footer__grid{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:48px}
  .footer__brand{grid-column:auto}
  .hero__media img{aspect-ratio:5/6}
  .feature__media img{aspect-ratio:3/4}
  .stage{flex:0 0 300px}
  .person{padding:26px 0 10px}
  .person__mono{margin-bottom:40px}
  .person h3{font-size:1.72rem}
  .svc-card{padding:28px 26px 24px}
}

/* ==========================================================================
   1081 and up. Two column features.
   ========================================================================== */

@media (min-width:1081px){
  .people{grid-template-columns:repeat(4,1fr)}
  :root{--pad:64px;--gap:20px}
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.82fr);gap:52px;align-items:end;padding-top:calc(var(--nav-h) + 60px);padding-bottom:44px}
  .hero__body{gap:26px}
  .feature{grid-template-columns:repeat(2,minmax(0,1fr));gap:56px;align-items:center}
  .feature--flip .feature__media{order:2}
  .section{padding-block:110px}
  .band{padding-block:120px}
  .sec-head{gap:56px}
  .row{gap:16px 44px}
  .principle{gap:14px 44px;padding-block:34px}
  .principle__n{font-size:3.4rem}
  .stage{flex:0 0 320px}
}

/* ==========================================================================
   1281 and up.
   ========================================================================== */

@media (min-width:1281px){
  :root{--pad:72px}
  .section{padding-block:126px}
  .metric__v{font-size:3rem}
}

/* ==========================================================================
   Interaction, motion, print
   ========================================================================== */

/* hover belongs to pointers. on a touch screen it latches after a tap. */
@media (hover:hover) and (pointer:fine){
  .tile:hover img{transform:scale(1.05);filter:grayscale(0) brightness(.86)}
  .tile:hover .tile__go svg{transform:translateX(5px)}
  .stage:hover img{transform:scale(1.06);filter:grayscale(0) brightness(.78)}
  .person:hover .person__bar{width:100%}
  .svc-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.5)}
  .svc-card:hover .svc-card__go svg{transform:translateX(5px)}
  .row:hover::before{opacity:1}
  .row:hover .row__go svg{transform:translateX(5px)}
  .principle:hover .principle__n{color:var(--accent)}
  .brand:hover .brand__logo{opacity:.7}
  .textlink:hover::before{transform:scaleX(1)}
  .textlink:hover svg{transform:translateX(5px)}
  .btn:hover svg{transform:translateX(4px)}
  .footer li a:hover{color:var(--ink)}
  .pager__link:hover{background:var(--canvas-2)}
}

/* phones held sideways */
@media (max-height:520px) and (orientation:landscape){
  .pagehead{padding-block:calc(var(--nav-h) + 26px) 26px}
  .hero{padding-top:calc(var(--nav-h) + 20px)}
  .drawer{padding-top:calc(var(--nav-h) + 10px)}
  .drawer ul a{min-height:46px;padding:10px 0;font-size:1.2rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1;transform:none}
  .hero__title .line > span{transform:none}
}


/* ==========================================================================
   Phone refinement

   The stylesheet is mobile first, so everything above is already the phone
   layout. This block is a pass over it for density: uppercase micro type at
   full desktop tracking wraps two and three short words onto separate lines,
   which is what makes a small screen read as stretched out, and section
   padding written for a wide screen adds up over a dozen sections.

   Placed last on purpose. It has to win over the min-width blocks above it.
   ========================================================================== */
@media (max-width:640px){

  /* tracking. wide letter spacing is a desktop luxury; on a 390px screen it
     turns "Careers, two sports" into two ragged lines. */
  .label,
  .crumb,
  .metric__k,
  .sec-head__tag .label,
  .pf-sec__tag .label,
  .pf-hero__kicker,
  .pf-hero__role,
  .pf-fig__k,
  .rcard__badge,
  .rcard__go,
  .career__on,
  .pf-mk__s,
  .pf-filter button,
  .pf-gal figcaption,
  .acc__t em,
  .spec dt,
  .rates thead th{letter-spacing:.08em}

  .crumb{gap:7px;font-size:.72rem}
  .label,.sec-head__tag .label,.pf-sec__tag .label{font-size:.72rem}
  .metric__k,.pf-fig__k{font-size:.7rem}

  /* rhythm. a dozen sections at 52px top and bottom is most of a screen of
     nothing over the length of a page. */
  .section{padding-block:40px}
  .section--tight{padding-block:30px}
  .band{padding-block:44px}
  .sec-head{gap:11px;margin-bottom:22px}
  .sec-head__body{gap:11px}
  .pf-sec{padding-block:30px}
  .pf-shell{padding-block:30px 6px}
  .pf-hero{padding-block:calc(var(--nav-h) + 34px) 32px}

  /* the hero stack, which carried the most air */
  .pf-hero .crumb{margin-bottom:18px}
  .pf-hero__role{margin-top:12px}
  .pf-hero__hook{margin-top:16px;font-size:1rem}
  .pf-hero__actions{margin-top:20px}

  /* a full measure button should read as one, label centred with its arrow */
  .pf-hero__actions .btn,
  .band__actions .btn{width:100%;justify-content:center}

  /* the figures strip: equal rows rather than ragged ones */
  .pf-fig{padding:18px 0}
  .pf-fig__v{font-size:2.1rem}
  /* the photography is the point now, but a 4:5 frame twice over adds most of
     a screen of scrolling. A shallower crop keeps the picture and its caption
     together without dominating. */
  .pf-split{margin-top:20px}
  .pf-split img{aspect-ratio:4/3;object-position:50% 22%}
  .pf-bleed img{aspect-ratio:4/3}
  .pf-bleed figcaption{padding-bottom:20px}
  .pf-figs{align-items:start}

  /* headings and body, a touch tighter */
  .h1{font-size:1.95rem}
  .h2{font-size:1.6rem}
  .lede{font-size:1.02rem}
  .pf-quote p{font-size:1.16rem}
  .rcard__body{padding:20px 17px 22px;gap:12px}
  .rcard__hook{font-size:.96rem}
  .acc__head{padding:15px 0;gap:11px;align-items:flex-start}
  .acc__yr{font-size:1.05rem;min-width:2.8em;line-height:1.3}
  .acc__t{font-size:.98rem}
  .acc__i{margin-top:4px}

  /* A 4:5 portrait at full width is most of a phone screen before the reader
     reaches the name. A shallower crop puts the athlete and her record on the
     same screen, which is the whole job of the card. */
  .rcard__media img{aspect-ratio:4/3;object-position:50% 18%}
  .rcard__badge{padding:7px 11px;font-size:.6rem}
}

@media print{
  .nav,.drawer,.band,.pagehead__media{display:none !important}
  /* the screen palette is dark. paper is not, so the tokens flip back here. */
  :root{
    --paper:#FFFFFF;--canvas:#FFFFFF;--canvas-2:#F3F2ED;--void:#FFFFFF;--plate:#FFFFFF;
    --ink:#14161A;--ink-soft:#42474E;--ink-mute:#767C84;
    --line:rgba(20,22,26,.2);--line-soft:rgba(20,22,26,.1);--accent:#0479C9;
  }
  body{background:#fff;background-image:none;color:var(--ink);padding-bottom:0}
  .pagehead,.pagehead h1,.pagehead .lede,.crumb{color:var(--ink)}
}