/*
Theme Name: Von Sports Group
Theme URI: https://www.vonsportsgroup.com
Author: Von Sports Group LLC
Description: Custom theme for Von Sports Group. Built to instruction VSG-WEB-2026-07-27 Rev. 1.
Version: 1.2
License: GPL v2 or later
Text Domain: vsg
*/

/* ─────────────────────────────────────────────────────────────────────────
   COMPLIANCE NOTE FOR ANY FUTURE DEVELOPER
   The footer disclosure, the consent block, and the nine service disclosures
   are defined ONCE in functions.php as PHP constants and arrays. They are not
   editable from the WordPress admin, by design. Do not duplicate that text
   into page content, widgets, or blocks — it must not be able to drift.
   Disclosure blocks must render visibly on page load. Never place one inside
   an accordion, modal, tab, or "read more" toggle.
   ───────────────────────────────────────────────────────────────────────── */


:root{
  --ink:#0A0F16;--ink2:#070B10;--navy:#10263E;--wash:#131A23;
  --mute:#7E8A97;--line:rgba(255,255,255,.15);--line2:rgba(255,255,255,.09);
  --f:"Archivo",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --s:"Newsreader",Georgia,serif;--gut:clamp(20px,4vw,64px);--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:#fff;font:400 16px/1.62 var(--f)}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
:focus-visible{outline:2px solid #fff;outline-offset:4px}
.skip{position:absolute;left:-9999px;background:#fff;color:var(--ink);padding:12px 18px;z-index:400}
.skip:focus{left:0;top:0}
.w{max-width:1500px;margin:0 auto;padding:0 var(--gut)}
.big{font-weight:500;letter-spacing:-.04em;line-height:.96;margin:0;text-wrap:balance}
.big i{font-family:var(--s);font-style:italic;font-weight:300;letter-spacing:-.02em}
.eb{font:500 10.5px/1 var(--f);letter-spacing:.24em;text-transform:uppercase;display:block;color:rgba(255,255,255,.6)}
p{margin:0 0 1.15em;max-width:66ch;color:rgba(255,255,255,.82)}
h2.big{font-size:clamp(1.6rem,3.8vw,2.9rem)}
h3.big{font-size:clamp(1.15rem,2vw,1.5rem)}

.nav{position:fixed;inset:0 0 auto 0;z-index:120;background:linear-gradient(180deg,rgba(10,15,22,.9),rgba(10,15,22,0))}
.nav.solid{background:var(--ink2);border-bottom:1px solid var(--line2)}
.nav .w{display:flex;align-items:center;min-height:76px;gap:clamp(12px,1.7vw,28px)}
.mk{font:500 15px/1.1 var(--f);letter-spacing:-.02em;margin-right:auto;white-space:nowrap}
.svc{display:flex;gap:clamp(11px,1.4vw,22px);list-style:none;margin:0;padding:0}
.svc a{font:500 11.5px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.78);
  padding:8px 0;border-bottom:1px solid transparent;transition:.25s;white-space:nowrap}
.svc a:hover,.svc a[aria-current=page]{color:#fff;border-bottom-color:#fff}
.cta-n{font:500 11.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.5);
  padding:11px 18px;transition:.25s;white-space:nowrap}
.cta-n:hover{background:#fff;color:var(--ink)}
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;padding:10px 15px;
  font:500 11px/1 var(--f);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
@media(max-width:1240px){.svc{gap:11px}.svc a{font-size:10.5px;letter-spacing:.03em}}
@media(max-width:1000px){.svc,.cta-n{display:none}.burger{display:block}}
.ov{position:fixed;inset:0;z-index:119;background:var(--navy);display:flex;align-items:center;overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease)}
.ov.on{clip-path:inset(0 0 0 0)}
.ov ol{list-style:none;margin:0;padding:96px 0 56px;counter-reset:n;width:100%}
.ov li{counter-increment:n;border-top:1px solid var(--line)}
.ov li:last-child{border-bottom:1px solid var(--line)}
.ov a{display:flex;align-items:baseline;gap:clamp(14px,3vw,36px);padding:clamp(8px,1.3vw,15px) 0;transition:padding-left .4s var(--ease)}
.ov a:hover{padding-left:20px}
.ov a::before{content:"0" counter(n);font:500 11px/1 var(--f);letter-spacing:.14em;color:rgba(255,255,255,.4);flex:none}
.ov .nm{font-weight:500;font-size:clamp(1.3rem,3.8vw,2.4rem);letter-spacing:-.04em;line-height:1}
.ov a:hover .nm i{font-family:var(--s);font-style:italic}

/* NOTE: the single-file prototype used .page as a JS router class with
   display:none. WordPress body_class() emits "page" on every static page, so
   that rule hid the entire document. Removed. Do not reintroduce a bare .page
   rule — scope any such class as .vsg-page instead. */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero--f{min-height:100svh;padding:0 0 clamp(44px,6vw,86px)}
.hero--p{min-height:60svh;padding:clamp(118px,15vw,178px) 0 clamp(36px,5vw,62px)}
.hero .bg{position:absolute;inset:0}
.hero .bg img{transform:scale(1.03)}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,22,.74),rgba(10,15,22,.3) 42%,rgba(10,15,22,.93))}
.hero .w{position:relative;z-index:2;width:100%}
.hero--f h1{font-size:clamp(2.4rem,7.4vw,7rem);max-width:15ch}
.hero--p h1{font-size:clamp(2rem,5.2vw,4.4rem);max-width:18ch}
.hero .eb{margin-bottom:clamp(16px,2.4vw,28px)}
.wd{display:inline-block;overflow:hidden;vertical-align:bottom}
.wd>span{display:inline-block}
html.js .wd>span{transform:translateY(106%);transition:transform 1.05s var(--ease)}
html.js .lit .wd>span{transform:none}
.go{display:inline-flex;align-items:center;gap:14px;font:500 12px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;
  border:0;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:9px;transition:gap .3s,border-color .3s;background:none;color:#fff;cursor:pointer}
.go:hover{gap:24px;border-bottom-color:#fff}
.hero--f .go{margin-top:clamp(26px,4vw,44px)}

.blk{position:relative;min-height:86svh;display:flex;align-items:flex-end;padding:clamp(40px,6vw,80px) 0;overflow:hidden;border-top:1px solid var(--line2)}
.blk .bg{position:absolute;inset:0}
.blk .bg img{transition:transform 1.3s var(--ease)}
.blk:hover .bg img{transform:scale(1.05)}
.blk .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,22,.28),rgba(10,15,22,.92))}
.blk .w{position:relative;z-index:2}
.blk h2{font-size:clamp(1.9rem,5.2vw,4.4rem);max-width:13ch}
.blk .eb{margin-bottom:16px}.blk .go{margin-top:clamp(20px,3vw,34px)}

.sec{padding:clamp(56px,8vw,120px) 0;border-top:1px solid var(--line2)}
.sec--w{background:#fff;color:var(--ink);border-top:0}
.sec--w p{color:#3D4855}.sec--w .eb{color:var(--mute)}
.sub{padding:clamp(46px,6vw,84px) 0;border-top:1px solid var(--line2);scroll-margin-top:84px}
.subnav{position:sticky;top:76px;z-index:40;background:var(--ink2);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.subnav ul{display:flex;gap:24px;list-style:none;margin:0;padding:15px 0;overflow-x:auto}
.subnav a{font:500 10.5px/1 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.subnav a:hover{color:#fff}
.list{list-style:none;padding:0;margin:1.1em 0 1.7em;max-width:66ch}
.list li{padding:14px 0 14px 26px;border-bottom:1px solid var(--line2);position:relative;color:rgba(255,255,255,.82)}
.list li::before{content:"";position:absolute;left:0;top:1.2em;width:12px;height:1px;background:var(--mute)}
.bx{list-style:none;padding:0;margin:1.2em 0 1.8em;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1px;background:var(--line2);border:1px solid var(--line2)}
.bx li{background:var(--ink);padding:20px 22px;font-size:.97rem}

.disc{border-left:2px solid var(--mute);background:var(--wash);padding:22px clamp(18px,2.4vw,28px);margin:2.2em 0;max-width:76ch}
.disc .eb{margin-bottom:12px}
.disc p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.8);margin:0 0 1em;max-width:none}
.disc p:last-child{margin:0}

.form{border:1px solid var(--line2);background:var(--wash);padding:clamp(24px,4vw,46px);margin-top:2em;max-width:860px}
.fld{margin-bottom:22px}
.fld label{display:block;font:500 10px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:9px}
.fld input,.fld select,.fld textarea{width:100%;padding:14px;border:1px solid var(--line2);border-radius:0;background:var(--ink2);font:400 15px var(--f);color:#fff}
.fld textarea{min-height:120px;resize:vertical}
.fld .hint{font-size:.83rem;color:var(--mute);margin:9px 0 0;max-width:none}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.chk{display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.chk input{flex:none;width:18px;height:18px;margin-top:3px;accent-color:#fff}
.chk label{font:400 14px/1.62 var(--f);text-transform:none;letter-spacing:0;color:rgba(255,255,255,.86);margin:0}
.note{border-left:2px solid var(--mute);background:var(--ink2);padding:15px 18px;margin:0 0 22px;font-size:14px;line-height:1.62;color:rgba(255,255,255,.8)}
.hidden{display:none}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,30px)}
.card{border:1px solid var(--line2);background:var(--wash);display:flex;flex-direction:column;transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-5px)}
.card .shot{aspect-ratio:16/10;overflow:hidden}
.card .bd{padding:clamp(18px,2.2vw,26px);flex:1;display:flex;flex-direction:column}
.card .mt{font:500 10px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.card p{font-size:14px;color:var(--mute);margin:0 0 18px}
.card .go{margin-top:auto;border-bottom-color:var(--line)}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px)}
.mem{display:flex;flex-direction:column}
.mem .shot{aspect-ratio:3/4;overflow:hidden;margin-bottom:18px;display:block}
/* placeholder tile — logo centred on navy until real headshots are supplied */
.mem .shot--ph{background:#31383F;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2)}
.mem .shot--ph img{width:70%;height:auto;object-fit:contain}
.mem strong{display:block;font:500 17px/1.2 var(--f);letter-spacing:-.01em}
.mem span{display:block;font:500 10px/1.5 var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:8px 0 12px}
.mem p{font-size:14px;color:var(--mute);margin:0}
.ptn{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2)}
.ptn-card{background:var(--ink);padding:clamp(26px,3vw,42px);display:flex;flex-direction:column;
  transition:background .3s;min-height:100%}
.ptn-card:hover{background:var(--wash)}
.ptn-card strong{display:block;font:500 clamp(1.1rem,1.8vw,1.45rem)/1.2 var(--f);letter-spacing:-.02em;margin-bottom:16px}
/* wider measure so descriptions of different lengths sit on similar line counts */
.ptn-card .role{display:block;font:500 10px/1.5 var(--f);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);margin:-8px 0 18px}
.ptn-card p{font-size:14.5px;line-height:1.68;color:var(--mute);margin:0 0 30px;max-width:none;flex:1}

/* centred closing block — partners page */
.close-c{text-align:center;padding:clamp(64px,9vw,130px) 0;border-top:1px solid var(--line2)}
.close-c .inner{max-width:720px;margin:0 auto}
.close-c .big{font-size:clamp(1.8rem,4.6vw,3.4rem);margin-bottom:20px}
.close-c p{margin:0 auto 34px;max-width:52ch}
.close-c .btn-rect{align-self:auto;margin:0 auto}

/* rectangular connect button — identical size on every card */
.btn-rect{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  min-width:168px;padding:15px 26px;border:1px solid rgba(255,255,255,.45);
  font:500 11px/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:transparent;transition:background .25s,color .25s,border-color .25s}
.btn-rect:hover{background:#fff;color:var(--ink);border-color:#fff}
.article{max-width:780px}
.article .lede{font-size:1.16rem;line-height:1.62;color:#fff;font-weight:500;margin-bottom:26px;max-width:60ch}
.article p{font-size:1.02rem;line-height:1.78}
.legal{max-width:780px}
.legal h2{font-size:clamp(1.1rem,1.8vw,1.35rem);margin:2em 0 .6em}
.legal p,.legal li{font-size:15px;line-height:1.75;color:rgba(255,255,255,.8)}
.legal ul{padding-left:20px}.legal li{margin-bottom:8px}

.ft{border-top:1px solid var(--line2);padding:clamp(46px,6vw,74px) 0 46px}
.fg{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-bottom:40px}
.fg h4{font:500 10px/1 var(--f);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 15px}
.fg ul{list-style:none;margin:0;padding:0}.fg li{margin-bottom:9px}
.fg a{font-size:13.5px;color:rgba(255,255,255,.8)}.fg a:hover{color:#fff;text-decoration:underline}
.fg address{font-style:normal;font-size:13.5px;line-height:1.8;color:rgba(255,255,255,.8)}
.dis{border-top:1px solid var(--line2);padding-top:32px;display:grid;grid-template-columns:120px 1fr;gap:26px}
.dis span{font:500 10px/1 var(--f);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.dis p{font:400 13.5px/1.75 var(--f);color:rgba(255,255,255,.68);margin:0;max-width:none}

/* SCROLL REVEAL — MUST DEGRADE GRACEFULLY.
   Content is visible by default. The hidden state only applies when JS is
   confirmed running (html.js is set by an inline script in header.php).
   Previously .rv defaulted to opacity:0, so any JS failure — a script error,
   a host's asset optimiser, a blocked request — rendered the page blank.
   Never make content depend on JS to become visible. */
.rv{opacity:1;transform:none}
html.js .rv{opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@media(max-width:1000px){.cards,.team{grid-template-columns:repeat(2,1fr)}.ptn{grid-template-columns:1fr}}
@media(max-width:860px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.dis{grid-template-columns:1fr;gap:12px}}
@media(max-width:640px){.g2{grid-template-columns:1fr}.cards,.team,.ptn{grid-template-columns:1fr}
  .btn-rect{width:100%}}
@media(max-width:520px){.fg{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}.rv{opacity:1!important;transform:none!important}.wd>span{transform:none!important}}


/* WordPress admin bar */
body.admin-bar .nav{top:32px}
@media screen and (max-width:782px){body.admin-bar .nav{top:46px}}
.wp-caption,.gallery-caption,.bypostauthor{margin-bottom:1em}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.alignleft{float:left;margin-right:1.5em}
.alignright{float:right;margin-left:1.5em}
.aligncenter{margin-left:auto;margin-right:auto}

/* WordPress menu markup */
.ov ol.ovmenu{list-style:none;margin:0;padding:96px 0 56px;counter-reset:n;width:100%}
.ov ol.ovmenu li{counter-increment:n;border-top:1px solid var(--line)}
.ov ol.ovmenu li:last-child{border-bottom:1px solid var(--line)}
.ov ol.ovmenu a{display:flex;align-items:baseline;gap:clamp(14px,3vw,36px);padding:clamp(8px,1.3vw,15px) 0;transition:padding-left .4s var(--ease)}
.ov ol.ovmenu a::before{content:"0" counter(n);font:500 11px/1 var(--f);letter-spacing:.14em;color:rgba(255,255,255,.4);flex:none}
.ov ol.ovmenu a .nm,.ov ol.ovmenu a{font-weight:500;font-size:clamp(1.3rem,3.8vw,2.4rem);letter-spacing:-.04em;line-height:1}
.svc li{list-style:none}
.nav ul.svc{display:flex;gap:clamp(11px,1.4vw,22px);list-style:none;margin:0;padding:0}
.current-menu-item > a{color:#fff!important;border-bottom-color:#fff!important}