/* Tovex Forward. Cool grey ground, one deep blue panel, white cards. Wide techno display, quiet sans body. */
:root{color-scheme:light;--ground:#e8e9ee;--card:#ffffff;--ink:#0d0e12;--muted:#565a66;--line:#c9ccd6;
  --blue:#123f73;--blue-2:#1d5a99;--blue-ink:#cfe0f5;--btn:#3e6a9c;--ease:cubic-bezier(.32,.72,0,1);
  --wide:"Michroma",ui-sans-serif,system-ui,sans-serif;--sans:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--g:clamp(16px,2.2vw,32px);--r:32px}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s var(--ease) both}
::view-transition-new(root){animation:vt-in .7s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-12px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(16px)}}
*{box-sizing:border-box;margin:0}
body{background:var(--ground);color:var(--ink);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
.mono{font:12px/1.4 var(--mono);letter-spacing:.04em}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px}
.skip{position:absolute;left:-9999px}.skip:focus{left:var(--g);top:12px;z-index:9;background:var(--card);padding:6px 10px;border-radius:99px}

/* header: two outlined pill rails; the current page is a filled white pill */
header{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px var(--g);pointer-events:none}
.pill{pointer-events:auto;display:flex;align-items:center;gap:4px;padding:6px;border:1px solid #7d8597;border-radius:99px;background:color-mix(in srgb,var(--ground) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pill ul{display:flex;gap:2px;list-style:none;padding:0}
.pill a{display:flex;align-items:center;height:46px;padding:0 22px;border-radius:99px;text-decoration:none;font:600 15px/1 var(--sans);transition:background .4s var(--ease)}
.pill a:hover{background:color-mix(in srgb,var(--card) 60%,transparent)}
.pill a[aria-current="page"]{background:var(--card)}
.brand{padding:0 14px!important}
.brand svg{width:22px;height:22px}.brand svg *{stroke:currentColor}
.inquire{background:var(--card);font:400 14px/1 var(--wide)!important;letter-spacing:.22em;text-transform:uppercase;padding:0 40px!important}
@media (max-width:760px){header{flex-wrap:wrap}.pill a{height:38px;padding:0 12px;font-size:13px}.pill.right{display:none}.brand{display:none!important}}

main{max-width:1600px;margin:0 auto;padding:0 var(--g)}

/* hero: title left over the panel's edge, the panel centre, cards floating across its right edge */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--g);min-height:calc(100svh - 96px);margin-top:-72px;padding-bottom:var(--g)}
.panel{grid-column:4/10;grid-row:1/4;position:relative;border-radius:var(--r);overflow:hidden;margin-top:6px;
  background:radial-gradient(120% 80% at 70% 20%,var(--blue-2),var(--blue) 60%,#0b2c55);
  clip-path:polygon(0 0,100% 0,100% 100%,30% 100%,0 calc(100% - 30%*1.15))}
.hero-title{grid-column:1/7;grid-row:1;align-self:end;position:relative;z-index:3;padding-top:clamp(96px,15vh,190px)}
.kicker{display:block;font:400 clamp(13px,1.1vw,18px)/1 var(--wide);letter-spacing:.32em;text-transform:uppercase;margin-bottom:20px}
h1{font:400 clamp(44px,6.4vw,112px)/.98 var(--wide);letter-spacing:.04em;text-transform:uppercase;max-width:9ch}
.cards{grid-column:9/13;grid-row:2;align-self:center;position:relative;z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:var(--g)}
.card{display:flex;flex-direction:column;gap:14px;padding:10px;background:var(--card);border-radius:24px;text-decoration:none;box-shadow:0 1px 0 #0000000d,0 24px 48px -28px #0b2c5566;transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-6px)}
.tile{aspect-ratio:1;border-radius:16px;display:grid;place-items:end start;padding:16px;background:linear-gradient(160deg,#c9d6e8,#8ea7c9);color:var(--blue);font:400 12px/1.3 var(--wide);letter-spacing:.18em;text-transform:uppercase}
.cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 6px 8px 8px;font:600 15px/1.3 var(--sans)}
.cap i{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--btn);color:#fff;font-style:normal;font-size:18px;transition:transform .5s var(--ease)}
.card:hover .cap i{transform:rotate(45deg)}
.hero-foot{grid-column:1/5;grid-row:3;align-self:end;position:relative;z-index:3;padding-top:48px}
.sub{font:400 clamp(17px,1.5vw,24px)/1.45 var(--wide);letter-spacing:.14em;text-transform:uppercase;max-width:18ch}
.hero-foot p{margin-top:20px;max-width:40ch;font-size:clamp(15px,1.15vw,18px)}

.mark{position:absolute;inset:0;display:grid;place-items:center;color:var(--blue-ink)}
.mark svg{width:42%;opacity:.9}.mark:not(.art) svg *{stroke:currentColor;stroke-width:.6}.mark.art svg{width:68%;opacity:1}
.js .draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.4s .4s var(--ease) forwards}@keyframes draw{to{stroke-dashoffset:0}}
.js .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.8s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.35);opacity:.55}}

@media (max-width:1100px){
  .hero{grid-template-columns:1fr;grid-template-rows:none;min-height:0;margin-top:0;row-gap:var(--g)}
  .hero>*{grid-column:1!important;grid-row:auto!important}
  .hero-title{padding-top:32px}
  .panel{aspect-ratio:4/5;max-height:80svh;margin-top:0}
  .cards{margin-top:calc(var(--g) * -5);padding:0 var(--g)}
  .hero-foot{padding-top:16px}}
@media (max-width:520px){.cards{gap:10px;padding:0 8px}.cap{font-size:13px}.cap i{width:38px;height:38px}}

/* sections below the hero */
section:not(.hero){padding:clamp(64px,9vw,128px) 0;border-top:1px solid var(--line)}
.eyebrow{display:block;font:400 13px/1 var(--wide);letter-spacing:.3em;text-transform:uppercase;margin-bottom:28px}
h2{font:400 clamp(26px,3.4vw,52px)/1.18 var(--wide);letter-spacing:.02em;max-width:22ch;text-wrap:balance}
h3,.h3{font:600 19px/1.35 var(--sans)}
.lede{font-size:clamp(16px,1.3vw,19px);max-width:56ch;color:var(--muted);margin-top:24px;text-wrap:pretty}

.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-flex;align-items:center;height:52px;padding:0 28px;border-radius:99px;background:var(--card);text-decoration:none;font:400 12px/1 var(--wide);letter-spacing:.2em;text-transform:uppercase;transition:transform .5s var(--ease),background .5s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--blue);color:#fff}

/* rows: white cards in a column; the one the figure points at turns blue */
.rows{list-style:none;padding:0;display:grid;gap:12px}
.rows li{display:grid;grid-template-columns:7ch 1fr;gap:20px;padding:28px 32px;background:var(--card);border-radius:24px;transition:background .6s var(--ease),color .6s var(--ease)}
.rows li>span{font:400 12px/2 var(--wide);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rows li p{color:var(--muted);margin-top:6px;max-width:64ch}
.rows li.on{background:var(--blue);color:#fff}
.rows li.on>span,.rows li.on p,.rows li.on .muted{color:var(--blue-ink)}
@media (max-width:520px){.rows li{grid-template-columns:1fr;gap:6px;padding:22px}}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--g);margin-top:48px}
.grid3>a,.grid3>div{display:block;padding:32px 28px;background:var(--card);border-radius:28px;text-decoration:none;transition:transform .6s var(--ease)}
.grid3>a:hover{transform:translateY(-6px)}
.grid3 p{color:var(--muted);margin-top:10px}
.grid3 .mono{display:inline-grid;place-items:center;height:30px;padding:0 14px;border-radius:99px;background:var(--ground);margin-bottom:36px;font:400 11px/1 var(--wide);letter-spacing:.18em;text-transform:uppercase}

.big{font:400 clamp(30px,6.4vw,104px)/1.05 var(--wide);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;display:inline-block;overflow-wrap:anywhere}
.big:hover{color:var(--blue-2)}

footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:28px var(--g);font:400 11px/1.6 var(--wide);letter-spacing:.16em;text-transform:uppercase}
footer a{text-decoration:none}footer a:hover{color:var(--blue-2)}

/* reveal: 700ms on (.32,.72,0,1), staggered by --d */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}
.js h1 .w{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.js h1.in .w{opacity:1;transform:none}
.js .panel{animation:rise 1.1s var(--ease) both}
.js .card{animation:rise 1s var(--ease) both}.js .card+.card{animation-delay:.12s}
@keyframes rise{from{opacity:0;transform:translateY(40px)}}
@media (prefers-reduced-motion:reduce){.js [data-reveal],.js h1 .w{opacity:1;transform:none;transition:none}
  .js .panel,.js .card,.js .draw,.js .pulse{animation:none;stroke-dashoffset:0}
  ::view-transition-old(root),::view-transition-new(root){animation:none}}