/* g8tes concept foundation: Denim V8 (refined), woven tag, devices, motion.
   All fonts self-hosted (Google Fonts families via @fontsource). No third-party requests. */
@font-face{font-family:"Archivo";src:url(fonts/archivo-wdth.woff2) format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(fonts/inter-tight-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(fonts/inter-tight-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(fonts/inter-tight-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Inter Tight";src:url(fonts/inter-tight-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* Denim V8, unchanged core values */
  --raw:#18324E; --denim:#315C80; --wash:#8AAABD; --tag:#B52A36; --cotton:#F5F1E8; --ink:#14202B; --mist:#DFE8EE;
  /* Refinements: a tonal ramp for depth, and a tag tone that stays legible on dark denim */
  --raw-950:#14202B; --raw-900:#14202B; --raw-800:#18324E; --raw-700:#315C80;
  --denim-300:#315C80; --wash-200:#DFE8EE; --cotton-50:#F5F1E8; --cotton-200:#F5F1E8;
  --tag-700:#B52A36; --tag-400:#B52A36;
  --thread:#F5F1E8; /* cotton-coloured stitching (copper retired) */
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--tag-400);outline-offset:3px}

/* ---------- Denim surface (approved kit texture, injected as inline SVG by base.js) ---------- */
.denim{--dn:var(--raw);position:relative;isolation:isolate;background-color:var(--dn)}
.denim.deep{--dn:var(--raw-900)}
.denim>svg.dnsvg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* Stitched seam: two rows of cotton thread */
.seam{position:relative;height:14px}
.seam::before,.seam::after{content:"";position:absolute;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--thread) 0 9px,transparent 9px 15px);
  opacity:.75;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
.seam::before{top:3px}.seam::after{bottom:3px}

/* ---------- Woven tag (approved kit, 25 Oct) ----------
   tag-woven.svg is the approved woven label: sewn into a right-hand edge, folding behind it, never recoloured.
   The logo sits on top as its own image, by reference. Preview uses a stand-in; live uses Management's original vector. */
.wtag{--w:110px;position:relative;display:inline-block;flex:none;width:var(--w);aspect-ratio:168/84;
  background:url(img/tag-woven.svg) center/contain no-repeat}
.wtag img{position:absolute;left:10.7%;top:21.4%;width:66.7%;height:56%;object-fit:contain;filter:drop-shadow(0 .8px 0 rgba(78,13,21,.85))}
.sewn-r{position:absolute;right:calc(var(--w,110px)*-.07)}
/* the smiley: Management's vector, outline only, in cobalt */
:root{--wink:#14202B;--wink-on-dark:#F5F1E8}
.wink{display:inline-block;width:1.45em;height:1.45em;vertical-align:-.32em;margin-left:.3em;color:inherit}
.wink svg{width:100%;height:100%;display:block;overflow:visible}

.patch{display:inline-block;width:44px;height:44px;flex:none}.patch svg{width:100%;height:100%;display:block}
:root{--patch:#18324E;--glyph:#F5F1E8;--stitch:#8AAABD;--surface:#fff}
/* light only (Management, 26 Oct 2026): browsers never apply their own dark mode to the page or its form controls */
:root{color-scheme:light}
.hd-r{display:flex;align-items:center;gap:12px}

/* ---------- Devices ---------- */
/* Browser frames are Microsoft Edge (Windows): tab strip, toolbar, address bar on the client's own SharePoint */
.browser{--ec:#14202B;--et:#18324E;--etx:#DFE8EE;--eaddr:#18324E;position:relative;border-radius:8px;background:var(--ec);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(5,14,24,.7),0 18px 36px -18px rgba(5,14,24,.5);overflow:hidden}
.browser.light{--ec:#DFE8EE;--et:#F5F1E8;--etx:#14202B;--eaddr:#F5F1E8}
.browser .bar{display:none}
.edge{background:var(--ec);color:var(--etx);font:400 11px/1 "Segoe UI","Manrope",system-ui,sans-serif;user-select:none}
.edge .tabs{display:flex;align-items:flex-end;height:30px;padding:0 0 0 8px;gap:6px}
.edge .tab{display:flex;align-items:center;gap:7px;height:24px;max-width:46%;padding:0 12px;border-radius:7px 7px 0 0;background:var(--et);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edge .tab i{width:11px;height:11px;flex:none;border-radius:3px;background:#B52A36}
.edge .tab span{overflow:hidden;text-overflow:ellipsis}
.edge .plus{opacity:.6;font-size:14px;padding-bottom:4px}
.edge .win{margin-left:auto;display:flex;align-self:stretch}
.edge .win b{width:34px;display:grid;place-items:center;font-weight:400;font-size:11px;opacity:.8}
.edge .tool{display:flex;align-items:center;gap:10px;height:30px;padding:0 10px;background:var(--et)}
.edge .nav{display:flex;gap:11px;opacity:.75;font-size:12px}
.edge .addr{flex:1;max-width:520px;height:21px;display:flex;align-items:center;gap:6px;border-radius:11px;background:var(--eaddr);padding:0 10px;font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edge .addr svg{width:9px;height:10px;flex:none;opacity:.75}
.edge .addr em{font-style:normal;opacity:.6}
.browser img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;display:block}

/* one phone: brushed silver iPhone; screen sized to the 390x844 app capture plus a status bar */
.phone{--pw:clamp(150px,14vw,200px);--sb:#14202B;position:relative;width:var(--pw);border-radius:calc(var(--pw)*.165);padding:calc(var(--pw)*.026);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.035) 1px 2px,transparent 2px 3px),
    linear-gradient(90deg,#8d9196 0%,#d9dcdf 4%,#f3f4f5 9%,#c4c8cc 22%,#e9ebed 48%,#b9bdc2 76%,#eef0f1 91%,#cfd2d5 96%,#80858a 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1px 1px rgba(255,255,255,.9),inset 0 -1px 2px rgba(0,0,0,.25),0 0 0 .5px #6f7479,0 50px 80px -30px rgba(5,14,24,.75),0 22px 34px -16px rgba(5,14,24,.55)}
.phone .scr{position:relative;width:100%;aspect-ratio:390/891;border-radius:calc(var(--pw)*.14);overflow:hidden;background:var(--sb);border:calc(var(--pw)*.018) solid #14202B;box-shadow:0 0 0 1px #2a2d31}
.phone .scr img{display:block;position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;aspect-ratio:390/844;object-fit:cover;object-position:top}
.phone .sb{position:absolute;left:0;right:0;top:0;height:5.3%;display:flex;align-items:center;justify-content:space-between;padding:0 9% 0 11%;color:#fff;font:600 calc(var(--pw)*.052)/1 -apple-system,"SF Pro Text","Inter Tight","Manrope",sans-serif;letter-spacing:-.01em;z-index:2}
.phone .sb svg{height:calc(var(--pw)*.045);width:auto;display:block}
.phone .sb .ic{display:flex;gap:calc(var(--pw)*.018);align-items:center}
.phone .scr::before{content:"";position:absolute;z-index:3;top:calc(var(--pw)*.026);left:50%;width:31%;height:calc(var(--pw)*.088);transform:translateX(-50%);border-radius:99px;background:#000}
.phone .scr::after{content:"";position:absolute;inset:0;z-index:4;background:linear-gradient(118deg,rgba(255,255,255,.13),rgba(255,255,255,0) 30%);pointer-events:none}
.phone .hi{position:absolute;z-index:4;left:50%;bottom:1.1%;width:36%;height:calc(var(--pw)*.014);transform:translateX(-50%);border-radius:99px;background:rgba(245,241,232,.75)}
.phone::before{content:"";position:absolute;right:calc(var(--pw)*-.012);top:27%;width:calc(var(--pw)*.014);height:13%;border-radius:0 3px 3px 0;background:linear-gradient(90deg,#9a9ea3,#e4e6e8 50%,#a9adb2)}
.phone::after{content:"";position:absolute;left:calc(var(--pw)*-.012);top:19%;width:calc(var(--pw)*.014);height:4.5%;border-radius:3px 0 0 3px;background:linear-gradient(90deg,#a9adb2,#e4e6e8 50%,#9a9ea3);box-shadow:0 calc(var(--pw)*.13) 0 #c9ccd0,0 calc(var(--pw)*.27) 0 #c9ccd0}

.chip-shot{border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 40px -18px rgba(5,14,24,.65)}
.chip-shot img{width:100%}

/* ---------- Motion ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.mask-line{display:block;overflow:hidden;padding-right:.14em;margin-right:-.14em}
.mask-line>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.in .mask-line>span,.mask-line.in>span{transform:none}
.float{animation:float 7s ease-in-out infinite}
.float.b{animation-duration:8.5s;animation-delay:-2s}.float.c{animation-duration:6.2s;animation-delay:-4s}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){
  .rv,.mask-line>span{opacity:1!important;transform:none!important;transition:none!important}
  .float,.marquee-track{animation:none!important}
}

/* concept switcher (review only) */
.cbar{position:fixed;z-index:999;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(20,32,43,.86);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.3);font:600 12px/1 "Manrope",system-ui}
.cbar a{padding:9px 13px;border-radius:99px;color:#DFE8EE;white-space:nowrap}
.cbar a.on{background:var(--cotton);color:var(--raw)}
@media (max-width:520px){.cbar{font-size:11px}.cbar a{padding:8px 10px}}
[hidden]{display:none!important}