/* eightwise — site styles. Tokens and rules are described in DESIGN.md. */

/* ---------- Tokens (light) ---------- */
:root{
  --bg:#f6f1e7; --surface:#ebe3d3; --text:#14213d; --text-2:#4f5a70; --line:#ddd3c1; --accent:#1f5f99;
  --hero-bg:#bcd6e8; --hero-text:#14213d; --hero-text-2:#33425e; --mark:#f6f1e7; --mark-w:1.5;
  --band-bg:#14213d; --band-text:#f6f1e7; --band-text-2:#b7c3d8; --band-line:#2b3a5c;
  --btn-bg:#14213d; --btn-text:#f6f1e7;
  --ctrl-bg:rgba(20,33,61,.08); --ctrl-on:#14213d; --ctrl-on-text:#f6f1e7;
  --font-head:"Bricolage Grotesque",Inter,system-ui,sans-serif;
  --font-body:Inter,system-ui,sans-serif;
  color-scheme:light;
}
/* ---------- Tokens (dark) ---------- */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1830; --surface:#18233f; --text:#f1ebdd; --text-2:#aeb8cc; --line:#26324f; --accent:#9cc7e6;
    --hero-bg:#1d3354; --hero-text:#f1ebdd; --hero-text-2:#c3cee0; --mark:#2c4670;
    --band-bg:#f1ebdd; --band-text:#14213d; --band-text-2:#4f5a70; --band-line:#d9cfbd;
    --btn-bg:#bcd6e8; --btn-text:#0f1830;
    --ctrl-bg:rgba(241,235,221,.08); --ctrl-on:#bcd6e8; --ctrl-on-text:#0f1830;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1830; --surface:#18233f; --text:#f1ebdd; --text-2:#aeb8cc; --line:#26324f; --accent:#9cc7e6;
  --hero-bg:#1d3354; --hero-text:#f1ebdd; --hero-text-2:#c3cee0; --mark:#2c4670;
  --band-bg:#f1ebdd; --band-text:#14213d; --band-text-2:#4f5a70; --band-line:#d9cfbd;
  --btn-bg:#bcd6e8; --btn-text:#0f1830;
  --ctrl-bg:rgba(241,235,221,.08); --ctrl-on:#bcd6e8; --ctrl-on-text:#0f1830;
  color-scheme:dark;
}

/* ---------- Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
/* 1rem = 16px up to 1440x900, then grows with the screen so the layout keeps its proportions. */
html{background:var(--bg);font-size:max(100%, min(100vw / 90, 100vh / 56.25))}
body{background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s,color .4s}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:.125rem solid var(--accent);outline-offset:.1875rem;border-radius:.25rem}
.skip{position:absolute;left:-624.9375rem}
.skip:focus{left:1rem;top:1rem;background:var(--text);color:var(--bg);padding:.5rem .75rem;z-index:99}
.wrap{max-width:77.5rem;margin:0 auto;padding-inline:2rem}
h1,h2,h3{font-family:var(--font-head);font-weight:700;letter-spacing:-.03em}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wi{display:inline-block;will-change:transform}

.progress{position:fixed;inset:0 0 auto;height:.1875rem;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:60}

/* ---------- Header ---------- */
.bar{position:sticky;top:0;z-index:40;background:var(--hero-bg);color:var(--hero-text);transition:box-shadow .3s,background .4s}
.bar.scrolled{box-shadow:0 1px 0 color-mix(in srgb,var(--hero-text) 14%,transparent)}
.nav{display:flex;align-items:center;gap:1.5rem;height:4.5rem;transition:height .3s}
.bar.scrolled .nav{height:3.75rem}
.logo{display:flex;align-items:center;gap:.5rem;font:600 1.1875rem/1 var(--font-body);letter-spacing:-.02em;text-decoration:none}
.logo svg{width:.8125rem;height:1.25rem;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.logo:hover svg{transform:rotate(180deg)}
.links{display:flex;gap:1.5rem;margin-left:auto;font-size:.9375rem}
.links a{text-decoration:none;color:var(--hero-text-2);position:relative}
.links a::after{content:"";position:absolute;left:0;right:0;bottom:-.25rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s}
.links a:hover{color:var(--hero-text)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}

/* Segmented controls: theme and language */
.ctrls{display:flex;gap:.5rem;align-items:center}
.links+.ctrls{margin-left:.5rem}
.page-legal .ctrls{margin-left:auto}
.seg{display:flex;padding:.1875rem;border-radius:999px;background:var(--ctrl-bg);border:1px solid color-mix(in srgb,var(--hero-text) 14%,transparent)}
.seg button,.seg a{display:inline-flex;align-items:center;gap:.375rem;min-height:1.875rem;padding:0 .6875rem;border:0;border-radius:999px;background:none;color:var(--hero-text);font:500 .8125rem/1 var(--font-body);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.seg button:hover,.seg a:hover{background:color-mix(in srgb,var(--hero-text) 10%,transparent)}
.seg [aria-pressed="true"],.seg [aria-current="true"]{background:var(--ctrl-on);color:var(--ctrl-on-text)}
.seg svg{width:.875rem;height:.875rem;flex:none}
.seg button{justify-content:center;min-width:2.125rem;padding:0 .5625rem}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:0 1.25rem;border-radius:.5rem;font:500 .9375rem/1 var(--font-body);text-decoration:none;border:1px solid transparent;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.btn-1{background:var(--btn-bg);color:var(--btn-text)}
.btn-1 .arr{transition:transform .3s}
.btn-1:hover .arr{transform:translateX(.25rem)}
.btn-2{border-color:currentColor}
.btn-2::before{content:"";position:absolute;inset:0;background:currentColor;opacity:.08;transform:translateY(101%);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:-1}
.btn-2:hover::before{transform:none}
.nav .btn{min-height:2.375rem;padding:0 .875rem;font-size:.875rem}

/* ---------- Hero ---------- */
.top{position:relative;background:var(--hero-bg);color:var(--hero-text);overflow:hidden;transition:background .4s}
/* .mark-pos places the "8"; GSAP only animates the svg inside (it would freeze a CSS translate). */
/* Offset to the right when the viewport has room, centred otherwise. Always whole. */
.mark-pos{position:absolute;left:50%;top:50%;height:110%;translate:calc(-50% + clamp(0px, (100vw - 77.5rem) * .5, 6.875rem)) -50%;pointer-events:none}
.mark{display:block;height:100%;width:auto}
@media (max-width:1240px){.mark-pos{height:100%}}
@media (min-width:901px) and (max-width:1000px){.mark-pos{height:88%}}
/* No vector-effect here: it breaks the pathLength-based draw animation. Width is in viewBox units. */
.mark path,.mark2 path{fill:none;stroke:var(--mark);stroke-width:var(--mark-w)}
.hero{position:relative;display:grid;grid-template-columns:1.7fr 1fr;gap:3rem;align-items:center;padding-block:4.5rem 7rem}
h1{font-size:clamp(2.5rem,7vw,6.75rem);line-height:1;margin-bottom:2rem}
.hero h1{white-space:nowrap}
.lead{font-size:1.25rem;line-height:1.55;color:var(--hero-text-2);max-width:32em}
.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2.5rem}
.figure{position:relative;display:flex;justify-content:center}
.mascot-wrap{position:relative;width:min(100%,18.75rem)}
.mascot{display:block;width:100%;height:auto;position:relative;z-index:1}
.shadow{position:absolute;left:18%;right:18%;bottom:2%;height:1.125rem;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.28),transparent);filter:blur(.125rem)}
.tag{position:absolute;left:0;bottom:4rem;z-index:2;background:var(--bg);color:var(--text);border-radius:.5rem;padding:.625rem .875rem;font-size:.875rem;line-height:1.35;box-shadow:0 .5rem 1.875rem rgba(0,0,0,.12)}
.tag b{display:flex;align-items:center;gap:.375rem;font-weight:600}
.tag span{color:var(--text-2)}
.tag i{width:.5rem;height:.5rem;border-radius:50%;background:#1f9d55;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,157,85,.5)}70%{box-shadow:0 0 0 .5rem rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}

/* ---------- Sections ---------- */
section{padding-block:8rem}
section.tight{padding-top:2rem}
h2{font-size:clamp(2.125rem,4.2vw,3.5rem);line-height:1.08;margin-bottom:3.5rem}
.band{background:var(--band-bg);color:var(--band-text);transition:background .4s,color .4s}
.band h2{margin-bottom:1rem}
.results-lead{color:var(--band-text-2);font-size:1.25rem;margin-bottom:3rem}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.numbers>div{border-top:1px solid var(--band-line);padding-top:1.5rem}
.numbers b{display:block;font-family:var(--font-head);font-weight:700;font-size:clamp(2.75rem,5vw,4.5rem);line-height:1;letter-spacing:-.03em;margin-bottom:.875rem;font-variant-numeric:tabular-nums}
.numbers p{color:var(--band-text-2);font-size:.9375rem}
.clients{margin-top:6rem}
.clients p{color:var(--band-text-2);margin-bottom:1.5rem;font-size:.9375rem}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{display:flex;gap:4rem;width:max-content;animation:mq 38s linear infinite;font-family:var(--font-head);font-weight:600;letter-spacing:-.02em;font-size:clamp(1.75rem,3.2vw,2.75rem);white-space:nowrap}
.marquee:hover .track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}

.offer{position:relative;display:grid;grid-template-columns:1fr 1.4fr;gap:2rem;padding:2.25rem 1rem;margin-inline:-1rem;isolation:isolate}
.offer::before{content:"";position:absolute;inset:0;background:var(--surface);transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:-1;border-radius:.5rem}
.offer:hover::before{transform:scaleY(1)}
.offer h3{font-size:clamp(1.5rem,2.4vw,1.875rem);line-height:1.25;transition:translate .45s cubic-bezier(.2,.8,.2,1)}
.offer:hover h3{translate:.625rem 0}
.offer p{color:var(--text-2);max-width:52ch}
.offers{position:relative}
.ln{position:absolute;left:1rem;right:1rem;bottom:0;height:1px;background:var(--line);transform-origin:left}
.offers>.ln{top:0;bottom:auto;left:0;right:0}

.about{display:grid;grid-template-columns:1fr 1.4fr;gap:2rem;align-items:center}
.about p{max-width:62ch;margin-bottom:1rem}
.about p.muted{color:var(--text-2)}
.photo-wrap{margin-top:.5rem;max-width:18.75rem;aspect-ratio:4/5;border-radius:.5rem;overflow:hidden;background:var(--hero-bg);display:flex;align-items:flex-end;justify-content:center}
.photo{display:block;width:auto;height:94%;max-width:100%;object-fit:contain}
.career{list-style:none;margin:2rem 0}
.career li{position:relative;display:flex;justify-content:space-between;gap:1rem;padding:.875rem 0;font-size:1rem}
.career li .ln{left:0;right:0}
.career span{color:var(--text-2);white-space:nowrap}

.contact{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--hero-text);border-radius:.75rem;padding:5rem 4rem;display:grid;grid-template-columns:1.4fr 1fr 8.125rem;gap:3rem;align-items:end;transition:background .4s}
.mark2{position:absolute;right:-3.75rem;bottom:-8.75rem;width:23.75rem;pointer-events:none}
.mascot2{grid-column:3;grid-row:1;align-self:end;width:8.125rem;height:auto;margin-bottom:-5.25rem;position:relative;z-index:1;pointer-events:none}
.contact h2{margin-bottom:1rem;position:relative}
.contact p{color:var(--hero-text-2);max-width:40ch;position:relative}
.contact p a{color:inherit;text-underline-offset:.1875rem}
.contact .actions{margin-top:0;flex-direction:column;align-items:stretch;position:relative;z-index:1}

footer{padding:3rem 0 6rem;font-size:.875rem;color:var(--text-2)}
footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- Legal page ---------- */
.legal{padding-block:4rem 6rem;max-width:47.5rem}
.legal h1{font-size:clamp(2.5rem,5vw,4rem);margin:1.5rem 0 2.5rem}
.legal h2{font-size:1.625rem;margin:2.5rem 0 .75rem}
.legal p{margin-bottom:.75rem;color:var(--text-2)}
.legal a{color:var(--accent)}
.legal mark{background:#ffe08a;color:#14213d;padding:0 .25rem;border-radius:.1875rem}

/* Hidden until the intro runs, only when motion is allowed and GSAP loaded */
.motion .js-fade,.motion .mascot,.motion .shadow,.motion .bar .nav>*{opacity:0}
.motion .hero h1{visibility:hidden}
.motion .mark path{opacity:0}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .links{display:none}
  .ctrls{margin-left:auto}
  .nav-cta{display:none}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:3rem;padding-block:2.5rem 5rem}
  .mascot-wrap{width:13.75rem}
  .numbers{grid-template-columns:1fr 1fr}
  .offer,.about,.contact{grid-template-columns:1fr;gap:.75rem}
  .contact{padding:3rem 1.5rem;gap:2rem}
  .mascot2{display:none}
}
@media (max-width:560px){
  .wrap{padding-inline:1rem}
  .nav{gap:.75rem}
  section{padding-block:5rem}
  .seg button,.seg a{padding:0 .5625rem}
  .numbers{grid-template-columns:1fr}
  .career li{flex-direction:column;gap:.125rem}
  .tag{left:.75rem}
}
@media (max-width:360px){
  .nav{gap:.5rem}
  .ctrls{gap:.25rem}
  .seg button,.seg a{min-width:1.875rem;padding:0 .4375rem}
  .logo{font-size:1.0625rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .track{flex-wrap:wrap;width:auto;white-space:normal;gap:.5rem 2rem}
  .track [aria-hidden]{display:none}
}