/* ============================================================================
   Decision-Making in Sport — shared brand stylesheet
   ----------------------------------------------------------------------------
   Step 1 of the brand rollout (see CLAUDE-CODE-BRIEF.md).

   SCOPING CONTRACT (brief §7):
   - Only the :root design tokens are safe to load site-wide. They define
     variables only, so they restyle nothing on their own.
   - EVERY base/element rule and component rule is scoped under `.dmis-page`
     so it ONLY applies on pages we have converted. Nothing leaks onto the
     Astra theme or other plugins.
   - The mockup's custom sticky header/nav is intentionally NOT ported — the
     site's existing Astra header stays. Brief §5 omits the header from the
     shared component list.

   Fonts are self-hosted (brief §4) from ../fonts/ — no Google hot-linking,
   cleaner under the site's UK GDPR position.
   ============================================================================ */

/* ---- Self-hosted fonts ---------------------------------------------------- */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-grotesk-400.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600.woff2') format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2');}

/* ---- Design tokens (the only thing safe to load globally) ----------------- */
:root{
  /* grid system — one source of truth */
  --cols:12;
  --bl:8px;            /* baseline unit */
  --lh:24px;           /* leading = 3 x baseline */
  --gutter:24px;
  --margin:40px;
  --maxw:1200px;

  /* brand colour (US-Soccer palette) — navy dominant, red a sparing accent */
  --navy:#002654;
  --navy-2:#001B41;
  --navy-3:#000F2A;
  --red:#C8102E;
  --red-bright:#E11D38;
  --red-soft:#FF6178;

  /* neutrals */
  --paper:#F4F6F9;
  --card:#FFFFFF;
  --ink:#0B1A33;
  --slate:#48536A;
  --slate-soft:#6A7488;
  --line:#E1E5EC;

  /* glass */
  --glass:rgba(255,255,255,.10);
  --glass-border:rgba(255,255,255,.20);
  --radius:14px;
}

/* ===========================================================================
   GLOBAL — header logo lockup.
   These rules are NOT scoped under .dmis-page because the site header sits
   outside it. They are safe to load globally because every selector targets a
   uniquely-prefixed `.dmis-logo*` class that exists nowhere else — no bare
   element or reset rules, so nothing on the theme or other plugins is touched.
   =========================================================================== */
.dmis-logo{display:inline-flex;align-items:center;gap:.62em;line-height:1;}
.dmis-logo-mark{width:36px;height:36px;flex:none;display:block;}
.dmis-logo-text{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:1.0rem;
  letter-spacing:.05em;text-transform:uppercase;color:var(--navy);white-space:nowrap;}
/* To match the LinkedIn assets' red wordmark instead, change the colour above
   to var(--red). Navy is the default for maximum legibility on the white header. */
@media(max-width:600px){
  .dmis-logo-mark{width:30px;height:30px;}
  .dmis-logo-text{font-size:.8rem;letter-spacing:.03em;}
}

/* ===========================================================================
   Everything below is SCOPED under .dmis-page — applies only on converted pages
   =========================================================================== */

/* ---- Base / element styles (scoped) -------------------------------------- */
.dmis-page *{box-sizing:border-box;margin:0;padding:0;}
.dmis-page{font-family:'Inter',system-ui,sans-serif;background:var(--paper);color:var(--slate);
  font-size:16px;line-height:var(--lh);-webkit-font-smoothing:antialiased;}
.dmis-page h1,.dmis-page h2,.dmis-page h3{font-family:'Space Grotesk',sans-serif;color:var(--ink);letter-spacing:-0.02em;font-weight:600;}
.dmis-page a{color:inherit;text-decoration:none;}

/* ---- Layout primitives --------------------------------------------------- */
.dmis-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--margin);}
.dmis-page .grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--gutter);}

/* ---- Eyebrow kicker ------------------------------------------------------ */
.dmis-page .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--red);display:inline-flex;align-items:center;gap:.6em;}
.dmis-page .eyebrow::before{content:"";width:22px;height:1px;background:var(--red);}

/* ---- Buttons ------------------------------------------------------------- */
.dmis-page .btn{display:inline-flex;align-items:center;gap:.55em;font-family:'Space Grotesk',sans-serif;font-weight:500;font-size:.97rem;padding:.82em 1.4em;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .15s ease,background .2s ease,border-color .2s ease;}
.dmis-page .btn:focus-visible{outline:2px solid var(--red);outline-offset:3px;}
.dmis-page .btn-primary{background:var(--navy);color:#fff;}
.dmis-page .btn-primary:hover{background:var(--navy-2);transform:translateY(-1px);}
.dmis-page .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.dmis-page .btn-ghost:hover{border-color:var(--navy);transform:translateY(-1px);}
.dmis-page .btn-light{background:#fff;color:var(--navy);}
.dmis-page .btn-light:hover{background:#EAF0F8;transform:translateY(-1px);}
.dmis-page .btn-glass{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28);}
.dmis-page .btn-glass:hover{background:rgba(255,255,255,.2);transform:translateY(-1px);}
.dmis-page .btn .arrow{transition:transform .2s ease;}
.dmis-page .btn:hover .arrow{transform:translateX(3px);}

/* ---- HERO — dark navy, one glass card ------------------------------------ */
.dmis-page .hero{position:relative;overflow:hidden;background:
    radial-gradient(900px 500px at 78% 18%, rgba(200,16,46,.16), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 52%, var(--navy-3) 100%);
    color:#fff;padding:96px 0;}
.dmis-page .hero .ring-mark{position:absolute;right:-120px;top:-90px;width:560px;height:560px;opacity:.07;pointer-events:none;}
.dmis-page .hero .grid{position:relative;align-items:center;row-gap:48px;}
.dmis-page .hero-copy{grid-column:1 / 7;}
.dmis-page .hero-figure{grid-column:8 / 13;}
.dmis-page .hero h1{font-size:clamp(2.5rem,5.4vw,4.1rem);line-height:1.05;color:#fff;margin-top:24px;font-weight:700;}
.dmis-page .hero h1 .em{color:var(--red-soft);}
.dmis-page .hero p.lede{font-size:1.16rem;color:#B9C4D6;max-width:30em;margin-top:24px;}
.dmis-page .hero-actions{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap;}
.dmis-page .hero-foot{margin-top:32px;font-size:.86rem;color:#8C99B0;display:flex;align-items:center;gap:10px;}
.dmis-page .hero-foot .dot{width:6px;height:6px;border-radius:50%;background:var(--red-bright);box-shadow:0 0 0 4px rgba(225,29,56,.2);}

/* ---- The single glass element -------------------------------------------- */
.dmis-page .glass-card{
  background:var(--glass);border:1px solid var(--glass-border);border-radius:20px;
  padding:24px 24px 16px;
  box-shadow:0 28px 70px -28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .dmis-page .glass-card{background:rgba(0,30,66,.72);}
}
.dmis-page .glass-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.dmis-page .glass-head .t{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#A9B6CC;}
.dmis-page .glass-head .s{font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--red-soft);}
.dmis-page .plot svg{width:100%;height:auto;display:block;}
.dmis-page .axis-label{font-family:'IBM Plex Mono',monospace;font-size:9px;fill:#8FA0BC;letter-spacing:.06em;}
.dmis-page .grid-line{stroke:rgba(255,255,255,.10);stroke-width:1;}
.dmis-page .axis-line{stroke:rgba(255,255,255,.34);stroke-width:1.2;}
.dmis-page .diag{stroke:var(--red-soft);stroke-width:1.7;stroke-dasharray:5 5;}
.dmis-page .curve{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.dmis-page .pt{fill:var(--navy);stroke:#fff;stroke-width:2;}
.dmis-page .legend{display:flex;gap:18px;margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:#A9B6CC;}
.dmis-page .legend span{display:inline-flex;align-items:center;gap:7px;}
.dmis-page .swatch{width:16px;height:0;border-top:2px solid #fff;}
.dmis-page .swatch.dash{border-top:2px dashed var(--red-soft);}
@media(max-width:860px){.dmis-page .hero-copy,.dmis-page .hero-figure{grid-column:1 / -1;}.dmis-page .glass-card{max-width:440px;}}

/* ---- Trust strip --------------------------------------------------------- */
.dmis-page .trust{border-bottom:1px solid var(--line);background:#fff;}
.dmis-page .trust-inner{display:flex;align-items:center;gap:32px;flex-wrap:wrap;padding:24px 0;}
.dmis-page .trust .lbl{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-soft);}
.dmis-page .trust .orgs{display:flex;gap:24px;flex-wrap:wrap;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--navy);font-size:1.02rem;opacity:.82;}

/* ---- Sections ------------------------------------------------------------ */
.dmis-page section{padding:96px 0;}
.dmis-page .sec-head{max-width:38em;margin-bottom:48px;}
.dmis-page .sec-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.12;margin-top:16px;}
.dmis-page .sec-head p{margin-top:16px;font-size:1.08rem;}

/* ---- Metrics ------------------------------------------------------------- */
.dmis-page .metrics{background:#fff;border-top:1px solid var(--line);}
.dmis-page .metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.dmis-page .metric{background:#fff;padding:32px;}
.dmis-page .metric .tag{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red);}
.dmis-page .metric h3{font-size:1.3rem;line-height:1.15;margin:16px 0 8px;}
.dmis-page .metric p{font-size:.98rem;color:var(--slate);}
.dmis-page .metric .src{margin-top:16px;font-family:'IBM Plex Mono',monospace;font-size:.68rem;color:var(--slate-soft);}
@media(max-width:820px){.dmis-page .metric-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.dmis-page .metric-grid{grid-template-columns:1fr;}}

/* ---- How it works (numbered steps) --------------------------------------- */
.dmis-page .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.dmis-page .step{padding-top:24px;border-top:2px solid var(--navy);}
.dmis-page .step .num{font-family:'IBM Plex Mono',monospace;font-size:.82rem;color:var(--red);letter-spacing:.1em;}
.dmis-page .step h3{font-size:1.32rem;line-height:1.15;margin:16px 0 8px;}
.dmis-page .step p{font-size:1rem;}
@media(max-width:760px){.dmis-page .steps{grid-template-columns:1fr;gap:24px;}}

/* ---- Methodology band ---------------------------------------------------- */
.dmis-page .method{background:var(--navy);color:#B9C4D6;position:relative;overflow:hidden;}
.dmis-page .method .ring-mark{position:absolute;left:-120px;bottom:-140px;width:480px;height:480px;opacity:.06;}
.dmis-page .method .grid{position:relative;align-items:center;row-gap:40px;}
.dmis-page .method-copy{grid-column:1 / 7;}
.dmis-page .method-cites{grid-column:8 / 13;}
.dmis-page .method h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.12;margin-top:16px;}
.dmis-page .method .eyebrow{color:var(--red-soft);}
.dmis-page .method .eyebrow::before{background:var(--red-soft);}
.dmis-page .method p{font-size:1.1rem;color:#AEB6C6;margin-top:16px;max-width:34em;}
.dmis-page .cites{display:flex;flex-direction:column;}
.dmis-page .cite{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);}
.dmis-page .cite .k{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--red-soft);white-space:nowrap;}
.dmis-page .cite .v{font-size:.98rem;color:#C9CFDB;}
@media(max-width:820px){.dmis-page .method-copy,.dmis-page .method-cites{grid-column:1 / -1;}}

/* ---- CTA ----------------------------------------------------------------- */
.dmis-page .cta{text-align:center;}
.dmis-page .cta h2{font-size:clamp(2rem,4vw,3rem);line-height:1.1;max-width:16em;margin:16px auto 0;}
.dmis-page .cta p{margin:16px auto 0;max-width:34em;font-size:1.1rem;}
.dmis-page .cta-actions{display:flex;gap:16px;justify-content:center;margin-top:32px;flex-wrap:wrap;}

/* ---- Footer (brand mark reused here) ------------------------------------- */
.dmis-page .dmis-footer{background:#fff;border-top:1px solid var(--line);padding:48px 0;}
.dmis-page .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}
.dmis-page .foot-links{display:flex;gap:24px;font-size:.92rem;color:var(--slate);}
.dmis-page .foot-links a:hover{color:var(--navy);}
.dmis-page .foot-meta{font-family:'IBM Plex Mono',monospace;font-size:.74rem;color:var(--slate-soft);}
.dmis-page .brand{display:flex;align-items:center;gap:.65em;font-family:'Space Grotesk',sans-serif;font-weight:600;color:var(--navy);letter-spacing:-.01em;font-size:1.02rem;}
.dmis-page .brand svg{width:30px;height:30px;flex:none;}

/* ---- Reveal-on-scroll animation ------------------------------------------
   Progressive enhancement: .reveal elements are only hidden once JS has added
   the `.dmis-js` class to the wrapper. If the inline script is ever stripped
   (e.g. by a security plugin) the page stays fully visible — never blank. */
.dmis-page.dmis-js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;}
.dmis-page.dmis-js .reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .dmis-page *{animation:none!important;transition:none!important;}
  .dmis-page.dmis-js .reveal{opacity:1;transform:none;}
}