/* Home: the footage is the hero ground, then the calm day body with sections that change shape. */

/* ============ HERO ============ */
.nh{isolation:isolate;overflow:hidden;min-height:clamp(620px,100svh,940px);display:flex;align-items:center;background:var(--nw1)}
.nh-media{position:absolute;inset:0;z-index:-3}
.nh-media img,.nh-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.nh-media video{opacity:0;transition:opacity .9s var(--ease)}
.nh.playing .nh-media video{opacity:1}
/* a soft teal light bloom over the brightest part of the footage: it LIFTS the picture (screen), never darkens it */
.nh-bloom{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(38vw 32vw at 70% 45%,rgba(46,150,168,.34),transparent 70%),radial-gradient(24vw 20vw at 84% 22%,rgba(166,236,239,.14),transparent 70%)}
/* the fade sits only where the copy sits (left), plus a short foot into the arc; the right stays bright */
.nh-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,18,33,.84) 0%,rgba(6,18,33,.62) 30%,rgba(6,18,33,.16) 58%,transparent 76%),
             linear-gradient(0deg,rgba(6,18,33,.5) 0,transparent 22%),linear-gradient(180deg,rgba(6,18,33,.42) 0,transparent 16%)}
.nh-copy{position:relative;padding:calc(var(--hdr-h) + 40px) 0 clamp(96px,8vw,140px)}
.nh-copy > *{max-width:560px}
.nh h1{font-size:var(--t-hero);line-height:.98;font-weight:540;letter-spacing:-.02em;max-width:11.5ch;text-shadow:0 2px 30px rgba(6,18,33,.35)}
.nh h1 .it{display:inline-block}
.nh .lede{margin:24px 0 0;max-width:40ch;color:var(--nw-text)}
.nh-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.vhero-pause{position:absolute;right:var(--gutter);top:calc(var(--hdr-h) + 18px);width:44px;height:44px;border-radius:50%;border:1px solid rgba(234,244,248,.5);background:rgba(6,18,33,.32);color:var(--nw-text);display:none;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.nh.playing .vhero-pause,.nh.paused .vhero-pause{display:grid}
.vhero-pause svg{width:14px;height:14px;fill:currentColor}
.vhero-pause .i-play{display:none}.nh.paused .vhero-pause .i-play{display:block}.nh.paused .vhero-pause .i-pause{display:none}
@media (max-width:900px){
  .nh{min-height:0;align-items:flex-end}
  .nh-media{bottom:auto;height:calc(var(--hdr-h) + 46svh + 120px)}
  .nh-media img,.nh-media video{object-position:56% 50%}
  .nh-scrim{background:linear-gradient(180deg,rgba(6,18,33,.4) 0,transparent calc(var(--hdr-h) + 40px),transparent calc(var(--hdr-h) + 30svh),rgba(10,33,54,.82) calc(var(--hdr-h) + 42svh),#0A2136 calc(var(--hdr-h) + 46svh + 110px))}
  .nh-bloom{background:radial-gradient(70vw 40svh at 60% 30svh,rgba(46,150,168,.32),transparent 70%)}
  .nh-copy{padding:calc(var(--hdr-h) + 38svh) 0 76px}
  .nh h1{font-size:clamp(40px,11vw,58px)}
  .nh .lede{font-size:16.5px;margin-top:16px}
  .nh-ctas{margin-top:22px}
}

/* ============ PROOF ============ */
.np-wrap{overflow:hidden}
/* separators sit BEFORE each name and the list is pulled left by one separator width, so a dot that would start a line is clipped away */
.np-names{list-style:none;margin:0 0 0 -1.1em;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;max-width:calc(1180px + 1.1em);font-size:clamp(26px,1rem + 2.4vw,52px)}
.np-names li{font:520 1em/1.22 var(--display);font-stretch:112%;letter-spacing:-.018em;color:var(--ink);white-space:nowrap}
.np-names li::before{content:"·";display:inline-block;width:1.1em;text-align:center;color:var(--aqua-ink);font-weight:400}
.np-names .np-more::before{content:"";width:.5em}
.np-names .np-more{color:var(--ink-3);font-weight:420;font-style:italic;font-stretch:118%}
/* the US Soccer story: photo bleeding off the left edge, words on the ground */
.np-soccer{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;margin-top:clamp(56px,6vw,96px);
  padding-right:max(var(--gutter),calc((100vw - 1240px)/2))}
.np-soccer-img{margin:0}
.np-soccer-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0 14px 14px 0}
.np-big{font:600 clamp(80px,4.4rem + 4vw,160px)/.9 var(--display);font-stretch:120%;letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums;color:var(--ink);margin:4px 0 18px}
.np-quote{font:500 clamp(19px,.9rem + .6vw,24px)/1.4 var(--display);font-stretch:104%;color:var(--ink);max-width:32ch}

/* ============ AFTER DARK (full bleed, dissolving) ============ */
.nd{margin-top:clamp(40px,4vw,72px)}
.nd-in{width:min(1320px,100% - 2*var(--gutter));margin:0 auto}
.nd-strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.nd-strip figure{margin:0;border-radius:10px;overflow:hidden}
.nd-strip img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.nd-strip .nd-a{grid-row:1/3}
.nd-strip .nd-a img{aspect-ratio:auto;height:100%}

/* ============ SPACES (a deeper sky well behind the cards) ============ */
.ns{position:relative;isolation:isolate}
.ns::before{content:"";position:absolute;inset:10% 0 -10%;z-index:-1;pointer-events:none;background:radial-gradient(60% 50% at 50% 60%,rgba(175,198,226,.85),transparent 72%)}
.ns-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ns-card{display:grid;grid-template-columns:1fr auto;align-content:start;gap:6px 12px;padding:10px 10px 20px;text-decoration:none;color:var(--ink);transition:translate .3s var(--ease),box-shadow .3s}
.ns-card:hover{translate:0 -4px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 34px 60px -32px rgba(11,26,46,.45)}
.ns-card img{grid-column:1/-1;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;margin-bottom:12px}
.ns-name{font:560 20px/1.3 var(--display);font-stretch:108%;padding-left:8px}
.ns-sf{font:600 15px/1.3 var(--display);font-stretch:116%;color:var(--ink);align-self:center;padding-right:8px;white-space:nowrap}
.ns-note{grid-column:1/-1;font-size:15px;color:var(--ink-2);padding:0 8px}
.ns-all{margin:28px 0 0}

/* ============ LOCATION ============ */
.nl{position:relative;isolation:isolate}
.nl::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 50% at 85% 40%,rgba(127,216,222,.24),transparent 70%)}
.nl-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center;padding-left:max(var(--gutter),calc((100vw - 1240px)/2))}
.nl-img{margin:0}
.nl-img img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px 0 0 14px}
.nl-addr{font:560 22px/1.4 var(--display);font-stretch:108%;margin:16px 0}
.nl .btn{margin-top:6px}

@media (max-width:900px){
  .np-names{font-size:clamp(24px,7vw,34px)}
  .np-soccer,.nl-grid{grid-template-columns:1fr}
  .np-soccer{padding-right:var(--gutter)}
  .np-soccer-copy{padding-left:var(--gutter)}
  .np-soccer-img img{border-radius:0 14px 14px 0;aspect-ratio:16/11}
  .nl-grid{padding-left:0}
  .nl-copy{padding:0 var(--gutter)}
  .nl-img{order:-1;padding-left:var(--gutter)}
  .nd-strip{grid-template-columns:1fr 1fr}
  .nd-strip .nd-a{grid-row:auto;grid-column:1/-1}
  .nd-strip .nd-a img{aspect-ratio:4/3}
  .ns-cards{grid-template-columns:1fr}
}