/* ============================================================ WYN SPORTS GROUP — Design System Editorial · technical · crimson · dark ============================================================ */ /* Fonts are loaded via in each page (parallel, non-blocking) */ /* ---------- Tokens ---------- */ :root{ --ink: #0a0a0b; --ink-2: #111113; --ink-3: #17171a; --crimson: #95182a; --crimson-2: #b41e34; /* brighter "all red" colorway */ --crimson-3: #d3243d; /* hot accent */ --oxblood: #3a0e14; --bone: #f4f1ea; --bone-2: #e9e5db; --muted: rgba(244,241,234,.60); --muted-2: rgba(244,241,234,.42); --line: rgba(244,241,234,.13); --line-2: rgba(244,241,234,.26); --maxw: 1340px; --gut: clamp(20px, 5vw, 72px); --nav-h: 76px; /* Two-font system: Archivo (display + body) + Space Mono (technical labels) */ --font-display: "Archivo", system-ui, sans-serif; --font-sans: "Archivo", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, monospace; --ease: cubic-bezier(.22,1,.36,1); --ease-2: cubic-bezier(.65,.05,.36,1); --z-nav: 60; --z-menu: 70; --z-cursor: 100; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scrollbar-color: var(--crimson) var(--ink); overflow-x:hidden; } body{ font-family:var(--font-sans); background:var(--ink); color:var(--bone); line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,picture{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul{list-style:none} ::selection{background:var(--crimson);color:var(--bone)} /* ---------- Type scale ---------- */ .display{ font-family:var(--font-display); font-weight:800; line-height:.92; letter-spacing:-.03em; text-transform:none; } h1,.h1{font-family:var(--font-display);font-weight:800;line-height:.9;letter-spacing:-.035em; font-size:clamp(2.9rem,9vw,8.4rem)} h2,.h2{font-family:var(--font-display);font-weight:800;line-height:.95;letter-spacing:-.03em; font-size:clamp(2.1rem,5.4vw,4.6rem)} h3,.h3{font-family:var(--font-display);font-weight:700;line-height:1;letter-spacing:-.02em; font-size:clamp(1.4rem,2.6vw,2.1rem)} h4{font-family:var(--font-display);font-weight:700;letter-spacing:-.01em;font-size:1.18rem;line-height:1.2} p{max-width:62ch} strong{font-weight:600;color:var(--bone)} .lead{font-size:clamp(1.06rem,1.45vw,1.28rem);line-height:1.66;color:var(--bone-2);font-weight:400;letter-spacing:-.003em} .fine{font-size:.82rem;color:var(--muted-2);line-height:1.5} /* mono kicker / label */ .kicker{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--crimson-3); display:inline-flex; align-items:center; gap:.7em; } .kicker::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7} .kicker.no-rule::before{display:none} .label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .crimson{color:var(--crimson-3)} .on-bone{color:var(--ink)} /* ---------- Layout ---------- */ .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);width:100%} .section{position:relative;padding-block:clamp(72px,11vh,160px)} .section--tight{padding-block:clamp(48px,7vh,90px)} .divider{height:1px;background:var(--line);width:100%} /* technical vertical grid overlay */ .grid-lines{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden} .grid-lines span{position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.5} .grid-lines span:nth-child(1){left:25%} .grid-lines span:nth-child(2){left:50%} .grid-lines span:nth-child(3){left:75%} .section > .wrap{position:relative;z-index:1} /* eyebrow row with index + title */ .sec-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 2rem;margin-bottom:clamp(28px,4vw,56px)} .sec-head .idx{font-family:var(--font-mono);color:var(--muted-2);font-size:.8rem;letter-spacing:.1em} /* ---------- Buttons ---------- */ .btn{ position:relative;display:inline-flex;align-items:center;gap:.8em; font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase; padding:1.05em 1.6em;border:1px solid var(--line-2);border-radius:2px; color:var(--bone);overflow:hidden;transition:color .4s var(--ease),border-color .4s var(--ease); isolation:isolate; } .btn .arr{display:inline-block;transition:transform .4s var(--ease)} .btn::before{content:"";position:absolute;inset:0;background:var(--crimson); transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1} .btn:hover{border-color:var(--crimson)} .btn:hover::before{transform:translateY(0)} .btn:hover .arr{transform:translateX(5px)} .btn--solid{background:var(--crimson);border-color:var(--crimson)} .btn--solid::before{background:var(--bone)} .btn--solid:hover{color:var(--ink)} .btn--bone{background:var(--bone);color:var(--ink);border-color:var(--bone)} .btn--bone::before{background:var(--crimson)} .btn--bone:hover{color:var(--bone)} .btn--ghost{border-color:var(--line-2)} .btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:2px solid var(--crimson-3);outline-offset:3px} /* text link with underline sweep */ .tlink{position:relative;display:inline-flex;align-items:center;gap:.5em; font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase} .tlink::after{content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%; background:var(--crimson-3);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)} .tlink:hover::after{transform:scaleX(1);transform-origin:left} .tlink .arr{transition:transform .35s var(--ease)} .tlink:hover .arr{transform:translateX(4px)} /* ---------- Header / Nav ---------- */ .header{ position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:var(--z-nav); display:flex;align-items:center; transition:background .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease); border-bottom:1px solid transparent; } .header.scrolled{background:rgba(10,10,11,.72);backdrop-filter:blur(14px);border-bottom-color:var(--line)} .header.hide{transform:translateY(-100%)} .header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem} .brand{display:flex;align-items:center;gap:.7rem;z-index:2} .brand img{height:48px;width:auto} .brand .bt{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:1.05rem;line-height:.95;display:flex;flex-direction:column;align-items:center;text-align:center} .brand .bt small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.5rem;letter-spacing:.26em;color:var(--muted);line-height:1.3;margin-top:1px} .nav-actions{display:flex;align-items:center;gap:.6rem} .menu-toggle{display:flex;align-items:center;gap:.9rem;padding:.7em 1.1em;border:1px solid var(--line-2);border-radius:2px; font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;transition:border-color .3s,background .3s} .menu-toggle:hover{border-color:var(--crimson)} .menu-toggle .bars{display:inline-flex;flex-direction:column;gap:4px;width:18px} .menu-toggle .bars i{height:1.5px;background:var(--bone);width:100%;transition:transform .4s var(--ease),opacity .3s} .header-contact{display:inline-flex} /* ---------- Overlay menu ---------- */ .menu{ position:fixed;inset:0;z-index:var(--z-menu);display:grid; grid-template-columns:1fr minmax(380px,42vw); pointer-events:none;visibility:hidden;overflow:hidden; transition:visibility 0s linear .6s; } .menu__scrim{position:absolute;inset:0;background:rgba(5,5,6,.6);opacity:0;transition:opacity .5s var(--ease);backdrop-filter:blur(2px)} .menu__panel{ position:relative;grid-column:2;background:var(--bone);color:var(--ink); display:flex;flex-direction:column;padding:clamp(24px,3vw,40px); transform:translateX(100%);transition:transform .6s var(--ease-2); height:100%;overflow-y:auto; } .menu__media{grid-column:1;position:relative;overflow:hidden;background:var(--ink);opacity:0;transition:opacity .5s var(--ease)} .menu__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5; transform:scale(1.08);filter:grayscale(.2) contrast(1.05)} .menu__media .mq{position:absolute;left:clamp(24px,3vw,48px);bottom:clamp(28px,4vw,56px);right:18%; font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3vw,3rem);line-height:.95;letter-spacing:-.03em} .menu__media .mq span{color:var(--crimson-3)} .is-open .menu{pointer-events:auto;visibility:visible;transition-delay:0s} .is-open .menu__scrim{opacity:1} .is-open .menu__media{opacity:1} .is-open .menu__panel{transform:translateX(0)} .menu__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto} .menu__head .mark{height:60px;width:auto} .menu__close{width:46px;height:46px;border:1px solid rgba(10,10,11,.18);border-radius:50%;display:grid;place-items:center; transition:background .3s,transform .4s var(--ease)} .menu__close:hover{background:var(--crimson);color:var(--bone);transform:rotate(90deg)} .menu__nav{display:flex;flex-direction:column;padding-block:clamp(20px,4vh,48px)} .menu__nav a{ position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:1rem; font-family:var(--font-display);font-weight:800;letter-spacing:-.02em; font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.05;padding:.32em 0; border-bottom:1px solid rgba(10,10,11,.12);color:var(--ink); transition:color .35s var(--ease),padding-left .4s var(--ease); } .menu__nav a .n{font-family:var(--font-mono);font-size:.74rem;font-weight:400;letter-spacing:.1em;color:rgba(10,10,11,.4);align-self:center} .menu__nav a::before{content:"";position:absolute;left:-18px;top:50%;width:8px;height:8px;background:var(--crimson); border-radius:50%;transform:translateY(-50%) scale(0);transition:transform .35s var(--ease)} .menu__nav a:hover{color:var(--crimson);padding-left:22px} .menu__nav a:hover::before{transform:translateY(-50%) scale(1)} .menu__foot{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;justify-content:space-between;align-items:flex-end; padding-top:clamp(18px,3vh,30px);border-top:1px solid rgba(10,10,11,.12)} .menu__foot .col{display:flex;flex-direction:column;gap:.4rem} .menu__foot a{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;color:rgba(10,10,11,.62);transition:color .25s} .menu__foot a:hover{color:var(--crimson)} .menu__foot .tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(10,10,11,.4)} /* ---------- Footer ---------- */ .footer{position:relative;border-top:1px solid var(--line);padding-block:clamp(56px,8vh,96px) 40px;overflow:hidden} .footer__cta{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:.92; font-size:clamp(2.6rem,8vw,7rem)} .footer__cta a{display:inline-flex;align-items:center;gap:.2em;transition:color .4s} .footer__cta a:hover{color:var(--crimson-3)} .footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem;margin-top:clamp(40px,6vw,80px)} .footer__grid h5{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);margin-bottom:1.1rem} .footer__grid a{display:block;color:var(--muted);padding:.28em 0;transition:color .25s,transform .3s var(--ease)} .footer__grid a:hover{color:var(--bone);transform:translateX(4px)} .footer__brand img{height:46px;margin-bottom:1.2rem} .footer__bottom{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center; margin-top:clamp(40px,6vw,72px);padding-top:24px;border-top:1px solid var(--line)} .footer__bottom,.footer__bottom a{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted-2)} .footer__bottom a:hover{color:var(--crimson-3)} .footer__values{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.45rem .85rem; margin-top:.85rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)} .footer__values .fv-lab{color:var(--crimson-3);margin-right:.2rem} .footer__values i{color:var(--crimson);font-style:normal} @media (max-width:540px){.footer__values{justify-content:flex-start}} .footer__legal i{color:var(--crimson);font-style:normal;margin:0 .45em} .footer__legal a{color:var(--muted-2)} .footer__legal a:hover{color:var(--crimson-3)} /* ---------- Legal / text pages (Imprint, Privacy) ---------- */ .legal{max-width:74ch} .legal__note{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase; color:var(--crimson-3);border:1px solid var(--line-2);border-left:2px solid var(--crimson); padding:.85rem 1.1rem;border-radius:2px;margin-bottom:2.4rem;line-height:1.6} .legal h2{font-size:clamp(1.35rem,2.2vw,1.9rem);margin:2.4rem 0 .7rem;letter-spacing:-.02em} .legal h3{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em; margin:1.9rem 0 .5rem;color:var(--bone)} .legal h2:first-of-type{margin-top:0} .legal p{color:var(--bone-2);margin-bottom:.95rem;line-height:1.75;max-width:70ch} .legal a{color:var(--crimson-3);text-decoration:underline;text-underline-offset:2px} .legal a:hover{color:var(--bone)} .legal .ph{color:var(--muted)} /* unfilled placeholder values */ /* ---------- Cookie / media consent banner ---------- */ .cc-banner{position:fixed;left:0;right:0;bottom:0;z-index:150; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.8rem; padding:clamp(14px,1.8vw,20px) var(--gut); background:rgba(12,12,13,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line-2); transform:translateY(110%);transition:transform .55s var(--ease)} .cc-banner.show{transform:translateY(0)} .cc-text{font-family:var(--font-sans);font-size:.84rem;line-height:1.55;color:var(--bone-2);max-width:78ch;margin:0} .cc-text a{color:var(--crimson-3);text-decoration:underline;text-underline-offset:2px} .cc-text a:hover{color:var(--bone)} .cc-actions{display:flex;gap:.7rem;flex:none} .cc-btn{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; padding:.75em 1.4em;border-radius:2px;border:1px solid var(--line-2);color:var(--bone);background:transparent; cursor:pointer;transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)} .cc-decline:hover{border-color:var(--bone)} .cc-accept{background:var(--crimson);border-color:var(--crimson);color:#fff} .cc-accept:hover{background:var(--crimson-2);border-color:var(--crimson-2)} @media (max-width:620px){ .cc-banner{flex-direction:column;align-items:stretch;gap:1rem} .cc-actions{width:100%}.cc-btn{flex:1} } @media (prefers-reduced-motion:reduce){.cc-banner{transition:none}} .footer .bgmark{position:absolute;right:-4%;bottom:-30%;width:46%;opacity:.04;pointer-events:none} /* ---------- Cards / components ---------- */ .eyebrow-row{display:flex;align-items:center;justify-content:space-between;gap:1rem; padding-block:1rem;border-top:1px solid var(--line);font-family:var(--font-mono); font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* stat block */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .stat{background:var(--ink);padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:.5rem;min-height:200px;justify-content:space-between} .stat .sv{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1;letter-spacing:-.03em;color:var(--bone)} .stat .sv em{color:var(--crimson-3);font-style:normal} .stat .sl{color:var(--muted);font-size:.92rem;max-width:30ch} .stat .sk{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson-3)} /* generic card */ .card{position:relative;background:var(--ink-2);border:1px solid var(--line);padding:clamp(24px,3vw,40px); overflow:hidden;isolation:isolate;transition:border-color .4s var(--ease)} .card::after{content:"";position:absolute;inset:0;z-index:-1; background:var(--crimson);opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .card:hover::after{transform:scaleX(1)} .card:hover{border-color:var(--line-2)} .card .ci{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--crimson-3);margin-bottom:1.2rem;transition:color .5s var(--ease)} .card:hover .ci{color:rgba(244,241,234,.8)} .card h3{margin-bottom:.7rem} .card p{color:var(--muted);transition:color .5s var(--ease)} .card:hover p{color:rgba(244,241,234,.88)} /* credibility seal (NIL — proven track record) */ .cred{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center} .cred__seal{position:relative;width:min(260px,80vw);aspect-ratio:1;flex:none;margin-inline:auto} .cred__ring{position:absolute;inset:0;width:100%;height:100%;animation:credspin 60s linear infinite} @media (prefers-reduced-motion:reduce){.cred__ring{animation:none}} .cred__rl{fill:none;stroke:var(--crimson);stroke-width:1.5;opacity:.55} .cred__rl--in{stroke:var(--line-2);opacity:1} .cred__arc{fill:var(--crimson-3);font-family:var(--font-mono);text-transform:uppercase} .cred__core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.25rem} .cred__mark{width:clamp(40px,18%,52px);height:auto;margin-bottom:.5rem} .cred__wm{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone);line-height:1.15} .cred__note{margin-top:1.2rem;max-width:50ch;color:var(--muted-2)} @media (max-width:820px){.cred__note{margin-inline:auto}} .cred__cap{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .cred__body h2{font-size:clamp(1.7rem,3.4vw,2.8rem);margin:.4rem 0 1rem} .cred__body .lead{color:var(--muted);max-width:54ch} .cred__body .lead strong{color:var(--bone)} .cred__tags{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;margin:1.5rem 0 1.4rem} .cred__tags li{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase; color:var(--bone);border:1px solid var(--line-2);border-radius:2px;padding:.5em .8em; transition:border-color .35s var(--ease),background .35s var(--ease)} .cred__tags li:hover{border-color:var(--crimson);background:rgba(149,24,42,.35)} @keyframes credspin{to{transform:rotate(360deg)}} @media (max-width:820px){ .cred{grid-template-columns:1fr;gap:clamp(26px,7vw,40px);text-align:center} .cred__body .lead{margin-inline:auto} .cred__tags{justify-content:center} } /* interactive cycle (NIL — what we manage) */ .cycle{display:grid;grid-template-columns:minmax(260px,400px) 1fr;gap:clamp(30px,5vw,80px); align-items:center;margin-top:clamp(30px,4vw,52px)} .cycle__dial{position:relative;width:100%;max-width:400px;aspect-ratio:1;margin-inline:auto} .cyc-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)} .cyc-track{fill:none;stroke:var(--line-2);stroke-width:1.5} .cyc-arc{fill:none;stroke:var(--crimson);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)} .cyc-pointer{position:absolute;left:50%;top:50%;width:2px;height:33%; background:linear-gradient(var(--crimson-3),rgba(211,36,61,0)); transform-origin:bottom center;transform:translate(-50%,-100%) rotate(0deg); transition:transform .6s var(--ease);z-index:1} .cyc-nodes{position:absolute;inset:0;z-index:2} .cyc-node{position:absolute;width:clamp(38px,11%,46px);aspect-ratio:1;border-radius:50%; transform:translate(-50%,-50%);display:grid;place-items:center; border:1px solid var(--line-2);background:var(--ink-2);color:var(--muted); font-family:var(--font-mono);font-size:.78rem;cursor:pointer; transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)} .cyc-node:hover{border-color:var(--crimson-3);color:var(--bone)} .cyc-node.active{background:var(--crimson);border-color:var(--crimson);color:var(--bone); transform:translate(-50%,-50%) scale(1.16);box-shadow:0 0 0 6px rgba(149,24,42,.18)} .cycle__hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62%;text-align:center;pointer-events:none} .cyc-hub{display:block;font-family:var(--font-display);font-weight:800;text-transform:uppercase; font-size:clamp(1.05rem,2.6vw,1.6rem);line-height:1.05;letter-spacing:-.01em;color:var(--bone); transition:opacity .25s var(--ease)} .cyc-hub.cyc-swap{opacity:0} .cycle__panel .cyc-step{display:block;color:var(--crimson-3);margin-bottom:1rem} .cycle__panel h3{font-size:clamp(1.5rem,3vw,2.4rem);letter-spacing:-.02em;margin-bottom:1rem; transition:opacity .3s var(--ease),transform .3s var(--ease)} .cycle__panel > p{color:var(--muted);max-width:54ch;min-height:6.5em; transition:opacity .3s var(--ease),transform .3s var(--ease)} .cycle__panel.cyc-swap .cyc-step,.cycle__panel.cyc-swap h3,.cycle__panel.cyc-swap > p{opacity:0;transform:translateY(10px)} .cyc-nav{display:flex;align-items:center;gap:1rem;margin-top:1.8rem} .cyc-arrow{width:50px;height:50px;border-radius:50%;border:1px solid var(--line-2);background:transparent; color:var(--bone);cursor:pointer;display:grid;place-items:center; transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)} .cyc-arrow:hover{background:var(--crimson);border-color:var(--crimson)} .cyc-arrow:active{transform:scale(.93)} .cyc-progress{margin-left:.6rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;color:var(--muted)} @media (max-width:820px){ .cycle{grid-template-columns:1fr;gap:clamp(28px,7vw,44px)} .cycle__dial{max-width:300px} .cycle__panel{text-align:center} .cycle__panel > p{margin-inline:auto;min-height:0} .cyc-nav{justify-content:center} } /* split panels (sports mgmt / nil) */ .split{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line)} .split > a{position:relative;padding:clamp(30px,4vw,64px);min-height:clamp(320px,42vw,520px); display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate; border-right:1px solid var(--line)} .split > a:last-child{border-right:none} .split > a .bg{position:absolute;inset:0;z-index:-2;opacity:.32;object-fit:cover;object-position:center top;width:100%;height:100%; transform:scale(1.02);transition:transform .8s var(--ease),opacity .6s} .split > a::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(10,10,11,.2),rgba(10,10,11,.92))} .split > a:hover .bg{transform:scale(1.12);opacity:.5} .split > a .tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson-3);margin-bottom:auto} .split > a h3{font-size:clamp(1.8rem,3.4vw,2.8rem);margin:1.4rem 0 .8rem} .split > a p{color:var(--bone-2);margin-bottom:1.6rem} /* keep the two card headers on the same line when side by side */ @media (min-width:821px){ .split > a h3{min-height:2em} .split > a p{min-height:4.8em} } /* roster grid */ .roster{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)} @media (max-width:720px){.roster{grid-template-columns:1fr}} /* category tiles — crimson colorway, full-bleed, topic in card */ .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,28px)} .cat-card{border:1px solid var(--line)} .cat-card{position:relative;overflow:hidden;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end; background:var(--crimson);isolation:isolate} .cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center; filter:grayscale(1) contrast(1.06);mix-blend-mode:multiply;z-index:0;transition:transform .9s var(--ease)} .cat-card::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(122,16,30,.10) 0%,transparent 28%,rgba(149,24,42,.82) 100%)} .cat-card:hover img{transform:scale(1.05)} .cat-card .cat-meta{position:relative;z-index:2;width:100%;padding:clamp(16px,2vw,24px) clamp(20px,2.4vw,30px); display:flex;align-items:center;justify-content:space-between;gap:1rem; border-top:1px solid rgba(244,241,234,.28);transition:border-color .4s var(--ease)} .cat-card:hover .cat-meta{border-top-color:var(--bone)} .cat-card .cat-t{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1; font-size:clamp(1.6rem,2.8vw,2.4rem);color:var(--bone); text-shadow:0 0 26px rgba(149,24,42,.95),0 0 50px rgba(149,24,42,.7),0 0 10px rgba(255,255,255,.18)} .cat-card .cat-arr{flex:none;color:var(--bone);opacity:.85;transition:transform .4s var(--ease),opacity .3s} .cat-card:hover .cat-arr{transform:translate(3px,-3px);opacity:1} @media (max-width:760px){.cat-grid{grid-template-columns:1fr}.cat-card{aspect-ratio:16/10}} .rostergroup{margin-top:clamp(40px,5.5vw,68px);scroll-margin-top:calc(var(--nav-h) + 28px)} .rostergroup:first-of-type{margin-top:clamp(20px,3vw,36px)} .rosterhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-bottom:1.4rem} .rosterhead h3{font-size:clamp(1.6rem,3vw,2.4rem);position:relative;padding-left:1rem} .rosterhead h3::before{content:"";position:absolute;left:0;top:.14em;bottom:.14em;width:3px;background:var(--crimson)} .rosterhead .fine{max-width:46ch} .player{position:relative;background:var(--ink-2);overflow:hidden;aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end} .player img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center; filter:grayscale(.5) contrast(1.05);transition:filter .6s var(--ease),transform .9s var(--ease);z-index:0} .player::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,11,.05) 30%,rgba(10,10,11,.92));z-index:1;transition:background .5s} .player:hover img{filter:grayscale(0) contrast(1.05);transform:scale(1.05)} .player .pmeta{position:relative;z-index:2;padding:clamp(16px,2vw,24px)} .player .pmeta .pos{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--crimson-3)} .player .pmeta h4{font-size:1.3rem;margin-top:.2rem} .player .pmeta .club{color:var(--muted);font-size:.88rem;margin-top:.15rem} .player .corner{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;color:var(--muted)} .player .flag{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em; color:var(--bone);background:var(--crimson);padding:.25em .6em;border-radius:2px} /* team grid */ .team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .member{background:var(--ink-2);padding:clamp(22px,2.6vw,32px);min-height:230px;display:flex;flex-direction:column;justify-content:space-between; transition:background .4s var(--ease);position:relative;overflow:hidden} .member:hover{background:var(--ink-3)} .member .ini{width:54px;height:54px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center; font-family:var(--font-display);font-weight:800;color:var(--crimson-3);transition:background .4s,color .4s,border-color .4s} .member:hover .ini{background:var(--crimson);color:var(--bone);border-color:var(--crimson)} .member h4{font-size:1.2rem;margin-bottom:.3rem} .member .role{color:var(--muted);font-size:.9rem;min-height:2.9rem} .member .mkt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-top:.8rem} /* history — blended editorial collage: portrait | text | two stacked */ .history__tagline{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.12; font-size:clamp(1.7rem,2.9vw,2.5rem);color:var(--bone);max-width:24ch; margin:0 0 clamp(16px,2.2vw,26px)} .history__tagline span{display:block;font-family:var(--font-mono);font-weight:400;font-size:.95rem;letter-spacing:.2em; text-transform:uppercase;color:var(--crimson-3);margin-top:.8rem} .history{display:grid;grid-template-columns:.9fr 1.2fr .82fr;gap:clamp(12px,1.6vw,22px);align-items:stretch} .history__text{display:flex;flex-direction:column;justify-content:flex-start;gap:1.6rem;padding-block:.1rem} .history__copy .lead{max-width:44ch} .history__bio{color:var(--muted);margin-top:1.2rem;max-width:46ch} .history__stat{padding-top:clamp(16px,2vw,22px);border-top:1px solid var(--line)} .history__stat .hl{display:block;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1.08; font-size:clamp(1.15rem,1.7vw,1.55rem);color:var(--bone)} .history__stat .hl small{display:block;font-family:var(--font-mono);font-weight:400;font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;color:var(--crimson-3);margin-top:.7rem} .history__right{display:grid;grid-template-rows:1fr 1fr;gap:clamp(12px,1.6vw,22px)} .hfig{margin:0;position:relative;overflow:hidden;background:var(--ink-2);isolation:isolate;min-height:0} .hfig img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease),filter .5s var(--ease)} .hfig:hover img{transform:scale(1.05)} .hfig--portrait img{filter:grayscale(1) contrast(1.04)} .hfig--portrait::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(155deg,rgba(149,24,42,.38) 0%,transparent 48%,rgba(10,10,11,.82) 100%)} .hfig--portrait:hover img{filter:grayscale(0) contrast(1.02)} /* right candids — original colour, muted + blended into the dark/crimson scheme */ .hfig--gray img{filter:contrast(1.03) saturate(.92);opacity:.88} .hfig--gray::after{content:"";position:absolute;inset:0; background:linear-gradient(160deg,rgba(149,24,42,.2) 0%,transparent 45%,rgba(10,10,11,.62) 100%)} .hfig--gray:hover img{filter:contrast(1.04) saturate(1);opacity:1} .hfig--crimson img{filter:contrast(1.03) saturate(.92);opacity:.86} .hfig--crimson::after{content:"";position:absolute;inset:0; background:linear-gradient(205deg,rgba(149,24,42,.34) 0%,transparent 52%,rgba(10,10,11,.64) 100%)} .hfig--crimson:hover img{filter:contrast(1.04) saturate(1);opacity:1} .hfig .hcap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(14px,1.6vw,20px); display:flex;flex-direction:column;font-family:var(--font-display);font-weight:800;letter-spacing:-.01em; font-size:1.05rem;color:var(--bone)} .hfig .hcap small{font-family:var(--font-mono);font-weight:400;font-size:.62rem;letter-spacing:.18em; text-transform:uppercase;color:var(--crimson-3);margin-top:.3rem} @media (max-width:860px){ .history{grid-template-columns:1fr;gap:clamp(26px,6vw,38px)} .hfig--portrait{aspect-ratio:4/5} .history__right{grid-template-rows:none;grid-template-columns:1fr 1fr} .history__right .hfig{aspect-ratio:1/1} } @media (max-width:460px){ .history__right{grid-template-columns:1fr} } /* crew cards — photo-style team cards */ .crew{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)} .crew-card{border:1px solid var(--line)} .crew-card{position:relative;overflow:hidden;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end; background:radial-gradient(110% 82% at 50% 8%, #c8213c 0%, #a51a2f 62%, #8a1528 100%);isolation:isolate;transition:background .5s var(--ease); cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent} .crew-card:hover{background:radial-gradient(110% 82% at 50% 8%, #d2243f 0%, #ab1c32 62%, #91162a 100%)} .crew-card::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 28%)} .crew-card::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,transparent 46%,rgba(10,10,11,.9))} .crew-card .mono{position:absolute;inset:0 0 18% 0;display:grid;place-items:center;z-index:0; font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:1; font-size:clamp(3.4rem,7vw,6rem);color:rgba(244,241,234,.07);transition:color .5s var(--ease),transform .9s var(--ease)} .crew-card:hover .mono,.crew-card.is-active .mono{color:rgba(211,36,61,.22);transform:scale(1.07)} .crew-card .crew-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;z-index:0; filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply;transition:filter .55s var(--ease),transform .9s var(--ease)} .crew-card:hover .crew-photo,.crew-card.is-active .crew-photo{filter:grayscale(0) contrast(1.02);mix-blend-mode:normal;transform:scale(1.04)} .crew-card .crew-tag{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--font-mono);font-size:.62rem; letter-spacing:.16em;text-transform:uppercase;color:var(--bone);background:var(--crimson);padding:.3em .65em;border-radius:2px} .crew-meta{position:relative;z-index:2;padding:clamp(18px,2vw,26px)} .crew-meta h4{font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.08;margin-bottom:.3rem} .crew-meta .crew-role{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);min-height:3em;margin-bottom:1rem} .crew-social{display:flex;align-items:center;gap:.9rem} .crew-social .crew-lic{height:18px;width:auto;object-fit:contain} .crew-social a{color:var(--muted-2);transition:color .25s,transform .3s var(--ease);display:inline-flex} .crew-social a:hover{color:var(--crimson-3);transform:translateY(-2px)} .crew-social svg{width:18px;height:18px} @media (max-width:900px){.crew{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){ .crew{grid-template-columns:1fr} .crew-card{aspect-ratio:4/3} .crew-card .crew-photo{object-position:center 28%} } /* agent license logos */ .licenses{margin-top:clamp(28px,4vw,40px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--line)} .licenses > .label{display:block;margin-bottom:1.5rem;color:var(--crimson-3);font-size:1rem;letter-spacing:.18em} .license-row{display:flex;flex-wrap:wrap;gap:clamp(2rem,4.5vw,3.6rem);align-items:flex-start} .license{margin:0;display:flex;flex-direction:column;gap:.85rem} .license img{height:76px;width:auto;object-fit:contain} .license figcaption{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} /* process steps (pathway) */ .path{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)} .path-step{background:var(--ink);display:grid;grid-template-columns:1fr auto;gap:clamp(1rem,3vw,3rem);align-items:center; padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line);position:relative;isolation:isolate} .path-step::after{content:"";position:absolute;inset:0 calc(clamp(14px,1.8vw,24px)*-1);z-index:-1; background:var(--crimson);opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .path-step:hover::after{transform:scaleX(1)} .path-step:last-child{border-bottom:none} .path-step .ps-n{font-family:var(--font-mono);color:var(--crimson-3);font-size:.8rem;letter-spacing:.1em} .path-step .ps-t{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.6rem);letter-spacing:-.02em} .path-step .ps-d{color:var(--muted);max-width:46ch;transition:color .5s var(--ease)} .path-step .ps-arr{transition:color .5s var(--ease)} .path-step:hover .ps-d{color:rgba(244,241,234,.88)} .path-step:hover .ps-arr{color:var(--bone)} /* feature media row */ .feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center} .feature--rev{direction:rtl}.feature--rev>*{direction:ltr} .feature__media{position:relative;aspect-ratio:5/4;overflow:hidden;border:1px solid var(--line)} .feature__media img{width:100%;height:100%;object-fit:cover} .feature__media .ovl{position:absolute;inset:0;background:linear-gradient(120deg,rgba(149,24,42,.35),transparent 60%)} /* crimson block */ .cblock{background:var(--crimson);color:var(--bone)} .cblock .kicker{color:rgba(244,241,234,.8)} .cblock .kicker::before{background:currentColor} /* form */ .form{display:grid;gap:1.6rem} .field{display:flex;flex-direction:column;gap:.5rem;position:relative} .field label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .field input,.field textarea,.field select{ background:transparent;border:none;border-bottom:1px solid var(--line-2);color:var(--bone); padding:.7em 0;font-size:1.05rem;font-family:var(--font-sans);transition:border-color .4s var(--ease)} .field input::placeholder,.field textarea::placeholder{color:var(--muted-2)} .field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--crimson-3)} .field select{appearance:none;cursor:pointer} .field select option{background:var(--ink-2);color:var(--bone)} .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem} .form-note{font-family:var(--font-mono);font-size:.72rem;color:var(--muted-2);letter-spacing:.04em} .form-success{display:none;border:1px solid var(--crimson);background:rgba(149,24,42,.12);padding:1.4rem;border-radius:2px} .form-success.show{display:block} /* hero */ .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(40px,6vw,80px)} .hero__bg{position:absolute;inset:0;z-index:0} .hero__bg img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.42; filter:grayscale(.35) contrast(1.05);transform:scale(1.08)} .hero__bg::after{content:"";position:absolute;inset:0; background:radial-gradient(120% 90% at 70% 10%,rgba(149,24,42,.34),transparent 55%), linear-gradient(180deg,rgba(10,10,11,.55) 0%,rgba(10,10,11,.35) 40%,rgba(10,10,11,.96) 100%)} .hero .wrap{position:relative;z-index:2;width:100%} .hero h1{margin-bottom:1.6rem} .hero h1 .ln{display:block;overflow:hidden} .hero h1 .ln > span{display:block} .hero h1 .ln--sub > span{font-size:clamp(1.15rem,2.2vw,1.9rem);font-weight:800;letter-spacing:-.01em;line-height:1.25; color:var(--crimson-3);margin-top:.55em}.hero__meta{display:flex;flex-wrap:wrap;gap:1.4rem 2.6rem;align-items:center;margin-top:2.2rem} .hero__scroll{position:absolute;right:var(--gut);bottom:clamp(40px,6vw,80px);z-index:2;display:flex;align-items:center;gap:.7rem; font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .hero__scroll .ln{width:54px;height:1px;background:var(--muted);position:relative;overflow:hidden} .hero__scroll .ln::after{content:"";position:absolute;inset:0;background:var(--crimson-3);animation:scrollline 2.2s var(--ease) infinite} @keyframes scrollline{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}} /* page hero (inner pages) */ .phero{position:relative;padding-top:calc(var(--nav-h) + clamp(60px,10vw,140px));padding-bottom:clamp(40px,7vw,90px);overflow:hidden} .phero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)} .phero .ptitle{font-size:clamp(3rem,11vw,9rem)} @media (max-width:480px){.phero .ptitle{font-size:clamp(2.2rem,9.6vw,3rem)}} .phero .pintro{margin-top:1.8rem;max-width:52ch;color:var(--bone)} .phero__bg{position:absolute;inset:0;z-index:-1;opacity:.16} .phero__bg img{width:100%;height:100%;object-fit:cover} /* mosaic collage hero background */ .phero--mosaic .phero__bg{opacity:.5} .phero--mosaic .phero__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.72) 42%,rgba(10,10,11,.4) 100%), linear-gradient(0deg,rgba(10,10,11,.85),rgba(10,10,11,.25) 55%)} @media (max-width:760px){ .phero--mosaic .phero__bg{opacity:.42} .phero--mosaic .phero__bg::after{background:linear-gradient(0deg,rgba(10,10,11,.92) 18%,rgba(10,10,11,.55) 100%)} } /* video hero background */ .phero--video .phero__bg{opacity:1} .phero--video .phero__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%; opacity:.4;filter:grayscale(.25) contrast(1.05)} .phero--video .phero__bg::after{content:"";position:absolute;inset:0; background:radial-gradient(120% 95% at 78% 8%,rgba(149,24,42,.32),transparent 55%), linear-gradient(180deg,rgba(10,10,11,.42) 0%,rgba(10,10,11,.6) 50%,rgba(10,10,11,.95) 100%)} @media (prefers-reduced-motion:reduce){.phero--video .phero__bg video{display:none}} /* feature hero: faint player behind the headline */ .phero--player .phero__bg{opacity:.22} .phero--player .phero__bg img{object-position:top center} /* desktop: fit the whole figure (face + ball visible), nudged to the right */ @media (min-width:681px){ .phero--player .phero__bg img{object-fit:contain;object-position:74% center} } .phero__index{position:absolute;top:calc(var(--nav-h) + 28px);right:var(--gut);font-family:var(--font-mono); font-size:.74rem;letter-spacing:.14em;color:var(--muted-2)} /* big quote */ .quote{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.06; font-size:clamp(1.8rem,4.4vw,3.6rem)} .quote em{color:var(--crimson-3);font-style:normal} /* core values — hairline grid */ .values{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)} .vcell{background:var(--ink);padding:clamp(20px,2.4vw,30px) clamp(16px,1.6vw,22px);min-height:140px; display:flex;flex-direction:column;justify-content:space-between;gap:1.2rem;position:relative;overflow:hidden; transition:background .4s var(--ease)} .vcell::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--bone);transition:width .5s var(--ease)} .vcell:hover{background:var(--crimson)} .vcell:hover::after{width:100%} .vcell .vn{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;color:var(--crimson-3);transition:color .35s var(--ease)} .vcell .vv{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1; font-size:clamp(1.25rem,1.9vw,1.8rem);color:var(--bone);transition:color .35s var(--ease)} .vcell:hover .vn{color:rgba(244,241,234,.8)} .vcell:hover .vv{color:var(--bone)} @media (max-width:760px){.values{grid-template-columns:repeat(2,1fr)}} @media (max-width:430px){.values{grid-template-columns:1fr}.vcell{min-height:auto;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:1rem}} /* logo architecture diagram */ .arch{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} /* brand row: umbrella (left) + two sub-brands (right) */ .arch__brand{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)} .arch__top{position:relative;display:flex;align-items:center;justify-content:center;min-height:100%; padding:clamp(30px,4vw,52px);overflow:hidden; background:linear-gradient(135deg,#c2213b 0%,#971829 52%,#6f1120 100%)} .arch__top::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 18% 12%,rgba(255,255,255,.16),transparent 55%);pointer-events:none} .arch__top .label{position:absolute;top:clamp(16px,2vw,22px);left:clamp(16px,2vw,22px);z-index:1} .arch__lockup{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center} .arch__lockup .arch__mark{height:clamp(40px,5vw,58px);width:auto} .arch__top .at{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.02em;color:var(--bone)} .arch__arms{display:grid;grid-template-rows:1fr 1fr;gap:1px;background:var(--line)} .arch__row{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)} .arch__cell{background:var(--ink-2);padding:clamp(20px,2.4vw,30px);min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.6rem; position:relative;overflow:hidden;isolation:isolate} .arch__cell::after{content:"";position:absolute;inset:0;z-index:-1; background:var(--crimson);opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .arch__cell:hover::after{transform:scaleX(1)} .arch__cell:hover p{color:rgba(244,241,234,.88)} .arch__cell .an{font-family:var(--font-mono);color:var(--crimson-3);font-size:.72rem;letter-spacing:.12em} .arch__cell h4{font-size:1.05rem} .arch__cell p{color:var(--muted);font-size:.86rem;transition:color .5s var(--ease)} /* foundation tier — core values beneath the brands */ .arch__connect{background:var(--ink-2);padding:1rem clamp(16px,2vw,24px); display:flex;align-items:center;justify-content:center;gap:1.4rem;text-align:center; font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .arch__connect .lead-in{color:var(--crimson-3);display:inline-flex;align-items:center;gap:.6em} .arch__connect .lead-in::before{content:"";width:18px;height:1px;background:currentColor} .arch__values{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)} .arch__values .av{background:var(--ink);padding:clamp(18px,2.2vw,26px) clamp(12px,1.4vw,18px);min-height:118px; display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;gap:.9rem;position:relative;overflow:hidden;isolation:isolate} .arch__values .av::after{content:"";position:absolute;inset:0;z-index:-1; background:var(--crimson);opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)} .arch__values .av:hover::after{transform:scaleX(1)} .arch__values .av .vn{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;color:var(--crimson-3);transition:color .5s var(--ease)} .arch__values .av:hover .vn{color:rgba(244,241,234,.8)} .arch__values .av .vv{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;line-height:1;font-size:clamp(1.05rem,1.5vw,1.5rem);color:var(--bone)} @media (max-width:760px){ .arch__brand{grid-template-columns:1fr} .arch__top{min-height:200px} .arch__values{grid-template-columns:repeat(2,1fr)} .arch__connect{flex-direction:column;align-items:center;gap:.5rem} } /* empty-slot placeholder: faint WYN mark fills the leftover grid cell (odd item count in 2-col view) */ @media (min-width:431px) and (max-width:760px){ .arch__values::after{content:"";display:block;background-color:var(--ink); background-image:linear-gradient(rgba(12,12,13,.88),rgba(12,12,13,.88)),url(../img/brand/logo-white-256.png); background-repeat:no-repeat;background-position:center;background-size:auto,min(72px,46%)} } @media (max-width:430px){ .arch__values{grid-template-columns:1fr} .arch__values .av{min-height:auto;gap:1rem} } /* ---------- Reveal animation states ---------- */ [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} [data-reveal].in{opacity:1;transform:none} [data-reveal-img]{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)} [data-reveal-img].in{clip-path:inset(0 0 0 0)} .stagger > *{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .stagger.in > *{opacity:1;transform:none} .hero h1 .ln > span{transform:translateY(105%);transition:transform 1s var(--ease)} .hero.in h1 .ln > span{transform:translateY(0)} .line-grow{transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)} .line-grow.in{transform:scaleX(1)} /* scroll progress */ .progress{position:fixed;top:0;left:0;height:2px;background:var(--crimson-3);width:0;z-index:80;transition:width .1s linear} /* page intro curtain */ .intro{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;transition:transform .8s var(--ease-2) .3s} .intro img{height:84px;opacity:0;transform-origin:center bottom; animation:introFade .5s var(--ease) forwards, introBounce .8s ease-out .2s infinite;will-change:transform} .intro .bar{display:none} @keyframes introFade{to{opacity:1}} /* basketball bounce — fall, squash on impact, rise */ @keyframes introBounce{ 0% {transform:translateY(-36px); animation-timing-function:cubic-bezier(.5,0,1,.5)} 48% {transform:translateY(0)} 52% {transform:translateY(0) scaleY(.9) scaleX(1.06)} 56% {transform:translateY(0)} 100%{transform:translateY(-36px)} } body.loaded .intro{transform:translateY(-100%)} /* custom cursor (desktop pointer only) */ .cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--crimson-3); pointer-events:none;z-index:var(--z-cursor);transform:translate(-50%,-50%);mix-blend-mode:screen; transition:width .25s var(--ease),height .25s var(--ease),background .25s,opacity .3s} .cursor.grow{width:54px;height:54px;background:rgba(211,36,61,.18)} .cursor.hidden{opacity:0} /* ---------- Responsive ---------- */ @media (max-width:1024px){ .footer__grid{grid-template-columns:1fr 1fr} .arch__row{grid-template-columns:repeat(2,1fr)} } @media (max-width:820px){ :root{--nav-h:64px} .menu{grid-template-columns:1fr} .menu__media{display:none} .menu__panel{grid-column:1} .header-contact{display:none} .feature{grid-template-columns:1fr} .feature--rev{direction:ltr} .split{grid-template-columns:1fr} .split > a{border-right:none;border-bottom:1px solid var(--line)} .split > a:last-child{border-bottom:none} .path-step{grid-template-columns:1fr;gap:1rem} .path-step .ps-arr{display:none} .brand .bt{display:none} .brand img{height:44px} .footer__grid{grid-template-columns:1fr 1fr} .cursor{display:none} } @media (max-width:540px){ .footer__grid{grid-template-columns:1fr} .arch__row{grid-template-columns:1fr} .stat{min-height:auto} .form .row2{grid-template-columns:1fr} .menu__nav a{font-size:2rem} .grid-lines span:nth-child(1),.grid-lines span:nth-child(3){display:none} } /* reduced motion */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} [data-reveal],[data-reveal-img],.stagger>*,.hero h1 .ln>span,.line-grow{opacity:1!important;transform:none!important;clip-path:none!important} .intro{display:none} .cursor{display:none} }