/* am.IT Consultancy — light theme
   White canvas · blue primary · gold as accent only.
   Structure comes from hairlines and whitespace — no cards, no shadows. */
:root{
  --bg:#ffffff;
  --tint:#f5f8fc;            /* section ground */
  --ink:#0d1420;
  --body:#4a5568;
  --muted:#8792a4;
  /* two-tone hairlines: structure sits quiet, interaction darkens it */
  --line:#e4e8ef;
  --line-2:#eef1f6;
  --line-strong:#ccd5e3;
  /* tonal steps stand in for elevation — 2–3% shifts, never a shadow */
  --surface:#f8fafd;
  --surface-2:#eef3fa;
  /* concentric radii — controls are stadiums, panels are generously soft */
  --r-panel:clamp(20px,3vw,34px);
  --r-lg:24px;
  --r-md:14px;
  --r-sm:10px;
  --r-pill:100px;

  --blue:#1b5fd9;
  --blue-deep:#1449a8;
  --blue-tint:#eaf1fd;
  /* a flat fill reads printed; the two-stop ramp catches light like a real surface */
  --grad-blue:linear-gradient(180deg,#3573e8,#1b5fd9 56%,#154fbb);

  --gold:#a67c13;            /* text-safe on white */
  --gold-mark:#d4a53d;       /* decorative marks only */

  --display:"Sora",-apple-system,BlinkMacSystemFont,sans-serif;
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --wrap:1120px;
  --pad:clamp(20px,6vw,48px);
  /* 136px each side stacked to ~300px of dead space between sections — a third of
     a 900px viewport. 104 lands the section-to-section gap near 210px. */
  --sec:clamp(64px,9vw,104px);

  /* the built-in keywords are too weak to read as intentional */
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* for something moving across the screen rather than arriving or leaving — it needs to
     accelerate away and decelerate in, which a pure ease-out cannot do */
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --spring:linear(0,.009,.035 2.4%,.128 6.2%,.484 17.5%,.638 22.9%,.765 28.5%,.862 34.7%,.931 41.3%,.973 48.4%,.995 57%,1.003 67%,1);

  /* three.js hero wireframe — read by main.js so one bundle serves both themes */
  --wire-line:#1b5fd9;
  --wire-dot:#c9992e;
  --wire-opacity:.3;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);color:var(--body);background:var(--bg);font-size:16.5px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;text-wrap:pretty}
img,svg,canvas,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:none}
::selection{background:var(--blue);color:#fff}

/* tracking is size-specific — one value across all sizes is wrong somewhere */
h1,h2,h3{font-family:var(--display);color:var(--ink);font-weight:700;font-optical-sizing:auto}
h1{letter-spacing:-.038em;line-height:1.01}
h2{letter-spacing:-.026em;line-height:1.08}
h3{letter-spacing:-.012em;line-height:1.3}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
section[id],main [id]{scroll-margin-top:88px}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* transform, not `top` — animating position triggers layout */
.skip{position:fixed;left:16px;top:16px;z-index:99;background:var(--ink);color:#fff;padding:9px 15px;
  border-radius:6px;transform:translateY(-200%);transition:transform .2s var(--ease-out)}
.skip:focus{transform:translateY(0)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  background:var(--grad-blue);color:#fff;font-weight:500;font-size:.95rem;letter-spacing:-.005em;
  padding:14px 28px;border:1px solid transparent;border-radius:var(--r-pill);
  transition:transform .38s var(--spring),background-color .2s ease,color .2s ease,
             border-color .2s ease,filter .2s ease}
/* one hairline of light along the top edge — the only thing that says "raised" without a shadow */
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost::after{box-shadow:none}
.btn--gold{background:linear-gradient(180deg,#e2b658,#d4a53d 56%,#c0912b);color:#2b1f05}
.btn--lg{padding:17px 34px;font-size:1rem}
@media(hover:hover) and (pointer:fine){
  /* the gradient can't cross-fade, so light it instead of repainting it */
  .btn:hover{filter:brightness(1.07) saturate(1.04)}
  /* ghost gains weight rather than lifting — border darkens, ground tints */
  .btn--ghost:hover{background:var(--blue-tint);color:var(--blue);border-color:var(--blue);filter:none}
}
/* press feedback — declared after :hover so it wins the cascade */
.btn:active{transform:scale(.97);transition-duration:.1s;transition-timing-function:var(--ease-out)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;background:transparent;transition:background-color .25s ease}
.nav[data-scrolled],.nav[data-open]{background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(180%)}
/* scroll edge effect rather than a hard rule under the header */
.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,.92),transparent);opacity:0;transition:opacity .3s ease}
.nav[data-scrolled]::after{opacity:1}
.nav[data-open]::after{opacity:0}
.nav__in{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:12px}
/* Sized by height, width auto: the crop is the symbol trimmed to its own bounds, so its
   aspect is whatever the mark is and hardcoding a width would squash it. */
.brand__logo{height:30px;width:auto;flex:none}
.brand__txt{display:flex;flex-direction:column;line-height:1.2}
.brand__name{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1rem;letter-spacing:-.015em}
.brand__tag{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);font-weight:500;
  margin-top:2px}
.nav__wrap{position:relative;margin-left:auto}
.nav__links{display:flex;gap:30px}
.nav__links :is(a,span){font-size:.9rem;color:var(--body);transition:color .15s ease}
@media(hover:hover) and (pointer:fine){.nav__links a:hover{color:var(--ink)}}
/* --l and --r are the active label's left and right edges within the list, set by JS.
   Clipping one styled copy is what keeps the colour and the rule in lockstep; animating
   clip-path also stays off layout, unlike moving a bar with left/width. */
.nav__links--on{position:absolute;inset:0;pointer-events:none;
  clip-path:inset(0 calc(100% - var(--r,0px)) 0 var(--l,0px));
  transition:clip-path .25s var(--ease-in-out)}
.nav__links--on span{color:var(--blue);position:relative}
.nav__links--on span::after{content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:1.5px;border-radius:2px;background:var(--blue)}
.nav__burger{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto;
  transition:transform .14s var(--ease-out)}
.nav__burger:active{transform:scale(.92)}
.nav__burger span{width:22px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease-out)}
.nav[data-open] .nav__burger span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.nav[data-open] .nav__burger span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
.nav__sheet{position:fixed;top:72px;left:0;right:0;bottom:0;height:calc(100dvh - 72px);
  display:none;flex-direction:column;padding:8px var(--pad) 32px;background:var(--bg);overflow-y:auto;z-index:49}
.nav__sheet a{padding:20px 2px;font-family:var(--display);font-size:1.35rem;font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--line)}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;
  padding-top:calc(72px + var(--sec));padding-bottom:clamp(40px,6vw,64px)}
/* Ambient bloom instead of a flat white plate: a blue light rising off the fold, a
   warm one in the top corner. Both sit behind content on their own layer, so nothing
   in the hero needs a z-index of its own. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(62% 58% at 50% 112%,rgba(27,95,217,.22),transparent 68%),
    radial-gradient(40% 46% at 88% 4%,rgba(212,165,61,.15),transparent 70%),
    linear-gradient(180deg,#f4f8ff,var(--bg) 64%)}
.hero__in{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
/* the positioning line as a chip, not a caption — it reads as a status, and the live
   dot gives the fold one slow heartbeat before anything is scrolled */
.eyebrow{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-bottom:26px;
  padding:9px 18px 9px 15px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);backdrop-filter:blur(10px) saturate(160%)}
.eyebrow::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--gold-mark);box-shadow:0 0 0 0 rgba(212,165,61,.55);
  animation:pulse 2.6s var(--ease-out) infinite}
@keyframes pulse{60%,100%{box-shadow:0 0 0 7px rgba(212,165,61,0)}}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:800;max-width:13ch}
/* two-tone headline: the verb carries the colour, the object stays ink */
.hero h1 em{font-style:normal;background:linear-gradient(96deg,#2f6ee4,#1b5fd9 46%,#c9992e);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero__sub{margin-top:22px;font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink);font-weight:500;
  max-width:46ch;line-height:1.4}
.lead{font-size:clamp(1rem,1.4vw,1.1rem);color:var(--body);max-width:56ch}
.hero .lead{margin-top:16px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__note{margin-top:16px;font-size:.9rem;color:var(--muted)}
/* underline wipes in instead of snapping on */
.hero__note a{color:var(--blue);
  background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;
  background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.hero__note a:hover{background-size:100% 1px}}
/* the scale:1.15 hack that used to live here was compensating for the source file's baked-in
   white margin — the artwork is trimmed now, so the box is the mark and nothing needs faking */
.hero__brand{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:18px;
  animation:heroFloat 7s ease-in-out infinite alternate}
.hero__logo{width:100%;max-width:340px;height:auto}
.hero__tag{font-family:var(--display);font-size:clamp(.7rem,1.1vw,.82rem);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);text-align:center;
  padding-top:16px;border-top:1px solid var(--line);width:min(100%,300px)}
@keyframes heroFloat{to{translate:0 -12px}}
/* credentials as chips rather than a ruled strip — same facts, reads as proof not fine print */
.hero__badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(40px,6vw,64px)}
.hero__badges span{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;
  font-size:.8rem;color:var(--body);background:rgba(255,255,255,.68);
  border:1px solid var(--line);border-radius:var(--r-pill);backdrop-filter:blur(8px);
  transition:border-color .2s ease,color .2s ease}
.hero__badges span::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;
  background:var(--gold-mark)}
@media(hover:hover) and (pointer:fine){
  .hero__badges span:hover{border-color:var(--line-strong);color:var(--ink)}
}

/* ---------- sections ---------- */
.sec{padding:var(--sec) 0}
/* tinted sections read as soft slabs laid on the white page rather than full-bleed
   stripes: rounded at the viewport edge, and washed lighter at top and bottom so the
   join with the white section above and below has no hard seam */
/* the white sections read as plates next to the tinted ones; a single low radial gives
   them air without becoming another coloured band */
.sec--glow{position:relative;isolation:isolate}
.sec--glow::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(46% 52% at 88% 6%,rgba(27,95,217,.09),transparent 68%),
             radial-gradient(38% 44% at 4% 92%,rgba(212,165,61,.08),transparent 70%)}
.sec--tint{border-radius:var(--r-panel);
  background:linear-gradient(180deg,#fbfcff,var(--tint) 26% 74%,#fbfcff)}
.sec__head{max-width:38ch;margin-bottom:clamp(36px,5vw,56px)}
/* section eyebrow as a chip, matching the hero — same dot, no pulse */
.kicker{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:.68rem;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:20px;
  padding:8px 18px 8px 15px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.72)}
.kicker::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--gold-mark)}
.sec__title{font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:700}
/* ---------- why us — process spine ---------- */
/* Six parallel claims read as a checklist however they're arranged. A spine gives them
   direction: one rule down the middle, the icons sitting on it as stations, the copy
   alternating either side. The rule draws top-to-bottom on entry and each station's
   connector follows, so the section builds in the order you read it — and it ends on a
   gold cap, which is the tagline made literal. */
.why{position:relative;list-style:none;padding-block:6px}
/* Faded at both ends so the spine reads as passing through rather than starting and
   stopping. LINEAR, not the site's ease-out: a line being drawn is constant motion, and
   an eased draw covers 80% of the distance in the first quarter of the time — which
   makes the connector timing below unsolvable, because the tip's position stops being
   proportional to elapsed time. */
.why::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
  background:linear-gradient(180deg,transparent,var(--line) 7%,var(--line) 93%,transparent);
  transform:scaleY(0);transform-origin:top;transition:transform .7s linear}
.why[data-drawn]::before{transform:scaleY(1)}
/* the terminus — paving path to your success, ending somewhere. Lands just after the
   tip does. Never scales from 0: it fades up from .5, so it arrives rather than appears. */
.why::after{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;margin-left:-4.5px;
  border-radius:50%;background:var(--gold-mark);opacity:0;scale:.5;
  transition:scale .4s var(--spring) .72s,opacity .3s var(--ease-out) .72s}
.why[data-drawn]::after{opacity:1;scale:1}

.why li{--i:0;position:relative;display:grid;grid-template-columns:1fr auto 1fr;
  grid-template-rows:auto auto;column-gap:clamp(20px,3vw,44px);
  padding:clamp(18px,2.4vw,28px) 0}
.why li:nth-child(2){--i:1}
.why li:nth-child(3){--i:2}
.why li:nth-child(4){--i:3}
.why li:nth-child(5){--i:4}
.why li:nth-child(6){--i:5}
/* one icon system: 24px grid, 1.6 stroke, round joins, currentColor — never a fill */
.ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible}
/* the station. An opaque fill is what lets the spine pass behind it without showing
   through; content-box keeps the 24px icon grid intact inside the padding. */
.why .ic{grid-column:2;grid-row:1 / 3;align-self:center;box-sizing:content-box;padding:13px;
  border-radius:50%;background:var(--bg);border:1px solid var(--line);color:var(--gold);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease}
/* Connector from station to copy — 26px is the disc radius (24/2 + 13 padding + 1 border).
   The delay is not a taste-picked stagger: with a linear 700ms draw over six evenly spaced
   stations, the tip passes station i at 700 * (i + .5)/6 ≈ 58 + 117i ms. Each connector
   fires ~30ms after the tip clears its own disc, so nothing ever reaches into a line that
   hasn't arrived. That puts the spacing at 115ms rather than the usual 30–80ms stagger —
   the line's speed sets it, not preference. */
.why li::after{content:"";position:absolute;top:50%;width:clamp(20px,3vw,44px);height:1px;
  background:var(--line);transform:scaleX(0);
  transition:transform .26s var(--ease-out) calc(90ms + var(--i) * 115ms),background-color .2s ease}
.why li:nth-child(odd)::after{right:calc(50% + 26px);transform-origin:right}
.why li:nth-child(even)::after{left:calc(50% + 26px);transform-origin:left}
.why[data-drawn] li::after{transform:scaleX(1)}

.why h3{grid-row:1;font-size:1.06rem;font-weight:600;margin-bottom:7px;transition:color .2s ease}
.why p{grid-row:2;font-size:.93rem;color:var(--body);max-width:38ch}
.why li:nth-child(odd) :is(h3,p){grid-column:1;text-align:right;justify-self:end}
.why li:nth-child(even) :is(h3,p){grid-column:3;justify-self:start}
@media(hover:hover) and (pointer:fine){
  .why li:hover .ic{background:var(--blue);border-color:var(--blue);color:#fff}
  .why li:hover h3{color:var(--blue)}
  .why li:hover::after{background:var(--line-strong)}
}
/* below this the two sides would each be too narrow to hold a sentence, so the spine
   moves to the left margin and every station hangs off the same edge */
@media(max-width:760px){
  .why::before,.why::after{left:26px}
  .why li{grid-template-columns:auto 1fr;column-gap:22px;padding-block:16px}
  .why .ic{grid-column:1;align-self:start}
  .why li:nth-child(n) :is(h3,p){grid-column:2;text-align:left;justify-self:start}
  .why li::after{display:none}
}

/* ---------- services accordion ---------- */
/* indent = head padding-left (2) + icon column (22) + flex gap (20).
   The icon replaced the number column, so this had to be re-derived. */
.acc{border-top:1px solid var(--line);--acc-indent:44px;--acc-bleed:clamp(16px,2vw,28px)}
.acc__item{border-bottom:1px solid var(--line);
  transition:background-color .28s ease,border-color .28s ease}
/* The open row lifts by becoming lighter than its tinted section — no shadow needed.
   Negative margin + equal padding bleeds the panel outward while the text stays
   locked to the container edge, so nothing shifts when it opens. */
.acc__item[data-open]{background:#fff;border-radius:var(--r-lg);border-bottom-color:transparent;
  margin-inline:calc(-1 * var(--acc-bleed));padding-inline:var(--acc-bleed)}
.acc__head{width:100%;display:flex;align-items:center;gap:20px;padding:30px 2px;text-align:left;
  transition:opacity .18s ease}
@media(hover:hover) and (pointer:fine){
  .acc__item:not([data-open]):hover .ic--acc{color:var(--blue)}
}
/* a full-bleed row shouldn't scale — it dims instead, which still reads as "pressed" */
.acc__head:active{opacity:.6;transition-duration:.08s}
@media(hover:hover) and (pointer:fine){.acc__head:hover .acc__title{color:var(--blue)}}
/* 22px so it matches the --acc-indent derivation above */
.ic--acc{width:22px;height:22px;color:var(--gold);transition:color .2s ease}
.acc__item[data-open] .ic--acc{color:var(--blue)}
.acc__title{flex:1;font-family:var(--display);font-size:clamp(1.1rem,2.2vw,1.5rem);font-weight:600;
  color:var(--ink);letter-spacing:-.022em;transition:color .2s ease}
.acc__ico{flex:none;position:relative;width:15px;height:15px}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;background:var(--ink);
  transition:transform .3s var(--ease-out)}
.acc__ico::before{left:0;right:0;top:7px;height:1.5px}
.acc__ico::after{top:0;bottom:0;left:6.75px;width:1.5px}
.acc__item[data-open] .acc__ico::after{transform:scaleY(0)}
.acc__item[data-open] .acc__ico::before{background:var(--blue)}
.acc__item[data-open] .acc__title{color:var(--blue)}
/* enter 280ms / exit 180ms — the close is the system responding, so it's snappier */
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .18s var(--ease-out)}
.acc__item[data-open] .acc__body{grid-template-rows:1fr;transition-duration:.28s}
.acc__inner{overflow:hidden;min-height:0}
.acc__inner>p{padding:0 24px 20px var(--acc-indent);color:var(--body);max-width:68ch}
.acc__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;
  padding:0 24px 32px var(--acc-indent)}
.acc__cols h4{font-family:var(--display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:12px}
.acc__cols ul{list-style:none}
.acc__cols li{font-size:.91rem;color:var(--body);padding:4px 0 4px 15px;position:relative}
.acc__cols li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:1px;background:var(--gold-mark)}
@media(max-width:560px){.acc__inner>p,.acc__cols{padding-left:0}}
.svc__foot{margin-top:34px;font-size:.9rem;color:var(--muted);max-width:66ch}

/* ---------- case studies ----------
   Separated by whitespace, not rules. The old column rules ran the full height of the
   tallest card, so their length was set by content accident rather than intent — and
   three hairline systems (container top, card right, list top) collided in one block.
   Each card now owns its own structure, so the hover affordance maps to the card. */
/* Four shared rows (metric · title · body · results). Each card spans all four via
   subgrid, so the body row is ONE row for all three cards — which is the only way the
   results divider lines up. flex:1 and margin-top:auto both bottom-align instead, and
   a shorter list then starts lower. */
.cases{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto 1fr auto;
  column-gap:clamp(14px,1.6vw,22px);row-gap:0}
.case{--i:0;display:grid;grid-row:span 4;grid-template-rows:subgrid;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px);
  transition:background-color .25s ease,border-color .25s ease}
.case:nth-child(2){--i:1}
.case:nth-child(3){--i:2}
/* rest = recessed (tinted); hover = comes forward by going lighter than the page */
@media(hover:hover) and (pointer:fine){
  .case:hover{background:#fff;border-color:var(--line-strong)}
  /* gated on [data-drawn] so hovering a card mid-entrance can't jump the rule straight
     to its extended length before it has drawn its own width; the zeroed delay keeps
     hover instant, since the entrance delay would otherwise make it feel broken */
  .cases[data-drawn] .case:hover .case__n::after{transform:scaleX(2.2);transition-delay:0s}
}
.case__n{font-family:var(--display);font-size:clamp(2.5rem,5vw,3.3rem);font-weight:800;
  letter-spacing:-.045em;line-height:1;color:var(--blue);font-feature-settings:"tnum"}
/* The card's own divider — this is what extends on hover, so the affordance belongs to
   the thing being hovered rather than to a rule shared across all three. It now also
   draws its own width on entry, so the same element carries both the reveal and the
   hover, and the hover reads as "more of what you already saw" rather than a new trick.
   Sits under the metric, so it lands as the count-up finishes. */
.case__n::after{content:"";display:block;width:44px;height:2px;border-radius:2px;
  background:var(--gold-mark);margin-top:18px;transform:scaleX(0);
  transform-origin:left;transition:transform .34s var(--ease-out) calc(.22s + var(--i) * .07s)}
.cases[data-drawn] .case__n::after{transform:scaleX(1)}
.case h3{font-size:1.06rem;font-weight:600;margin-top:20px;margin-bottom:22px}
.case__block+.case__block{margin-top:18px}
.case__block h4{font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.case__block p{font-size:.9rem;color:var(--body)}
/* The body absorbs the slack (flex:1) rather than the results being bottom-pinned.
   Bottom-pinning aligned the card floors but left the divider rules at three different
   heights, because the lists have different item counts. The rule is the visible edge,
   so the rule is what has to line up. */
.case__body{margin-bottom:22px}
.case__res{list-style:none;padding-top:22px;border-top:1px solid var(--line);align-self:start}
.case__res li{--j:0;font-size:.85rem;color:var(--body);padding:5px 0 5px 16px;position:relative}
.case__res li:nth-child(2){--j:1}
.case__res li:nth-child(3){--j:2}
.case__res li:nth-child(4){--j:3}
/* The results are the payload of the section, so they get the one enumerated effect:
   each gold tick draws itself down the list, card by card, like items being checked off.
   Only the 6px mark moves — the text it labels never shifts, because it is being read.
   --i is inherited from the card, --j is the row: 70ms between cards, 50ms between rows. */
.case__res li::before{content:"";position:absolute;left:0;top:13px;width:6px;height:1px;
  background:var(--gold-mark);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease-out) calc(.45s + var(--i) * .07s + var(--j) * .05s)}
.cases[data-drawn] .case__res li::before{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){
  .case:hover .case__res{border-color:var(--line-strong)}
}
/* One column has nothing to align against, and row-gap would otherwise open gaps
   between a card's own subgrid rows — so drop the shared grid entirely here. */
@media(max-width:860px){
  .cases{grid-template-columns:1fr;grid-template-rows:none;row-gap:clamp(14px,1.6vw,22px)}
  .case{display:block;grid-row:auto;grid-template-rows:none}
}

/* ---------- about — editorial ---------- */
/* Eight parallel blocks will re-form into a grid of boxes however the tracks are
   arranged — that was the real problem, not the arrangement. So: no boxes. A statement
   set large and offset, signed by the founder, then every remaining fact as a hanging-
   label row. Structure comes from the label column and the rules between rows. */

/* the head sits left, the statement steps right — the offset is the composition, and it
   is what keeps a 60ch paragraph from reading as a slab */
.about__lead{margin-left:auto;max-width:56ch;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.5;color:var(--ink);font-weight:400}

/* The founder, as an editorial spread rather than a signature line: portrait left, profile
   right. He is the firm's one face, and the section had been describing him in the third
   clause of a paragraph. */
.founder{display:grid;grid-template-columns:minmax(0,.36fr) 1fr;gap:clamp(24px,4vw,56px);
  align-items:start;margin-top:clamp(40px,5.5vw,68px);
  padding-top:clamp(30px,3.6vw,44px);border-top:1px solid var(--line-strong)}
/* A portrait wants a portrait crop. aspect-ratio + object-fit means the frame stays 4:5
   whatever the source file is, so swapping the photo later cannot break the grid. */
/* Dropped to start level with the NAME rather than the eyebrow above it. The eyebrow is a
   small label, so aligning a 320px photo to its cap height leaves the photo reading a
   notch high against the column. 30px is that label's line box plus its 12px margin. */
.founder__shot{position:relative;margin:30px 0 0;border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface-2)}
.founder__shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:50% 18%}
/* a hairline of the brand gold along the base, so the photo belongs to this page */
.founder__shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--gold-mark),transparent)}
.founder__eyebrow{font-family:var(--display);font-size:.66rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.founder__name{font-family:var(--display);font-size:clamp(1.5rem,2.8vw,2rem);font-weight:700;
  color:var(--ink);letter-spacing:-.028em;line-height:1.1}
/* the positioning line — set as a run with gold separators so it reads as one credential
   rather than four competing labels */
.founder__role{margin-top:10px;font-family:var(--display);font-size:.7rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue);line-height:1.8}
.founder__role span{color:var(--gold-mark);padding:0 .3em}
.founder__lead{margin-top:20px;font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.55;color:var(--ink)}
.founder__body>p:not(.founder__lead):not(.founder__eyebrow):not(.founder__role){
  margin-top:14px;font-size:.95rem;color:var(--body);max-width:62ch}
.founder__bars{width:46px;height:auto;margin-top:22px;
  fill:none;stroke:var(--gold-mark);stroke-width:20;stroke-linecap:round;opacity:.8}
@media(max-width:760px){
  /* one column, and the portrait capped so it does not become a full-screen headshot.
     The nudge is a two-column alignment — stacked, it is just a gap that gap already owns. */
  .founder{grid-template-columns:1fr;gap:26px}
  .founder__shot{max-width:280px;margin-top:0}
}

/* every remaining fact on one ledger: label hangs in its own column, content runs right */
.about__dl{margin-top:clamp(48px,6vw,80px)}
.about__row{--i:0;position:relative;display:grid;grid-template-columns:minmax(150px,.28fr) 1fr;
  gap:clamp(16px,3vw,44px);padding:clamp(22px,2.6vw,30px) 0}
.about__row:nth-child(2){--i:1}
.about__row:nth-child(3){--i:2}
.about__row:nth-child(4){--i:3}
.about__row:nth-child(5){--i:4}
.about__row:nth-child(6){--i:5}
/* the rule is the row's own edge, so it draws itself in rather than being painted on a
   container — same gesture the why-us spine and the case-study ticks use */
.about__row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--line);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-out) calc(var(--i) * .06s),background-color .2s ease}
.about__dl[data-drawn] .about__row::before{transform:scaleX(1)}
.about__row:last-child{border-bottom:1px solid var(--line)}
/* icon in its own track so a two-line label wraps against the text, not under the mark */
.about__row dt{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding-top:2px;transition:color .2s ease}
.about__row dt span{padding-top:5px}
/* 1.9 on a 24 grid rendered at 20px lands the stroke at 1.58px — the site draws icons at
   1.6, and a 1.6 stroke shrunk to 20px would render 1.33 and read visibly lighter than
   every other icon on the page */
.ic--lbl{width:20px;height:20px;stroke-width:1.9;color:var(--gold-mark);
  opacity:0;scale:.92;
  transition:opacity .3s var(--ease-out) calc(var(--i) * .06s + .14s),
             scale .3s var(--ease-out) calc(var(--i) * .06s + .14s),
             color .2s ease}
.about__dl[data-drawn] .ic--lbl{opacity:1;scale:1}
.about__row dd{font-size:.97rem;color:var(--body);max-width:64ch}
@media(hover:hover) and (pointer:fine){
  .about__row:hover dt{color:var(--blue)}
  .about__row:hover .ic--lbl{color:var(--blue)}
  .about__row:hover::before{background:var(--line-strong)}
}
/* values read as a list, not a sentence — the middots are the separator, so they get the
   muted tone and the words keep the ink */
.about__values{color:var(--ink)}
.about__values span{color:var(--gold-mark);padding:0 .35em}
@media(max-width:720px){
  /* the label column costs more than it gives once the content column is under ~40ch */
  .about__lead,.about__sign{margin-left:0;text-align:left}
  .about__bars,.about__bio{margin-left:0}
  .about__row{grid-template-columns:1fr;gap:12px}
}
/* ---------- platforms & hardware ---------- */
.stack{list-style:none;display:grid;gap:2px}
.stack li{display:flex;align-items:center;gap:12px;padding:9px 10px;
  font-size:.84rem;color:var(--ink);
  transition:background-color .2s ease,color .2s ease}
/* the real brand paths are masked, so the mark inherits currentColor and stays themeable
   instead of being locked to whatever fill the source file shipped with */
/* Paths live HERE, not in an inline style: a relative url() inside a custom property
   resolves against the stylesheet, so declaring it in the HTML produced
   /assets/css/assets/icons/… → 404 → a silent solid square instead of a logo. */
.stack__ic{width:20px;height:20px;flex:none;background:currentColor;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.stack__ic--k8s{-webkit-mask-image:url(../icons/kubernetes.svg);mask-image:url(../icons/kubernetes.svg)}
.stack__ic--docker{-webkit-mask-image:url(../icons/docker.svg);mask-image:url(../icons/docker.svg)}
.stack__ic--amd{-webkit-mask-image:url(../icons/amd.svg);mask-image:url(../icons/amd.svg)}
/* wordmark stand-in where the real mark is trademark-restricted — type, not a redrawn logo */
.stack__wm{width:20px;flex:none;text-align:center;font-family:var(--display);font-weight:700;
  font-size:.62rem;letter-spacing:-.02em;color:var(--muted);font-style:normal}
@media(hover:hover) and (pointer:fine){
  .stack li:hover{background:var(--blue-tint);color:var(--blue)}
  .stack li:hover .stack__wm{color:var(--blue)}
}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.tags li{display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;color:var(--body);padding:7px 14px 7px 12px;border:1px solid var(--line);border-radius:999px;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease}
/* 2.4 on a 24 grid rendered at 16px lands the stroke at 1.6px — the site's icon weight.
   Reusing 1.6 here would render 1.07 and the marks would read as scratches next to the
   text. Small icons legitimately carry a relatively heavier stroke; these are drawn with
   fewer paths than the 20px label marks so the extra weight has room. */
.ic--tag{width:16px;height:16px;stroke-width:2.4;color:var(--gold-mark);
  transition:color .2s ease}
/* A real brand path, masked so it inherits currentColor — the same treatment the platforms
   row gives it. Simple-icons marks are single-path monochrome precisely so they can be
   recoloured. The url() lives here, not inline: a relative url() inside a custom property
   resolves against the STYLESHEET, so declaring it in the HTML would look for
   /assets/css/assets/icons/ and fail silently as a solid square. */
.tags .tag__mark{width:16px;height:16px;flex:none;background:currentColor;color:var(--gold-mark);
  transition:color .2s ease;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.tag__mark--amd{-webkit-mask-image:url(../icons/amd.svg);mask-image:url(../icons/amd.svg)}
/* slot for licensed partner badges — full-colour, never tinted, so no currentColor here */
.tags .tag__logo{width:16px;height:16px;flex:none;object-fit:contain}
/* The group reveal only reaches the tiles — these are grandchildren, so they arrived as
   eight finished blocks of text. Now each row inside a tile fades up on its own 40ms
   beat. A child cannot outrun its parent here: both opacities multiply, so a row is
   never visible before the tile carrying it, whatever the delays say. */
/* --i is inherited from the row, so a tag waits for its own rule to arrive rather than
   for a fixed clock: row rule at --i*60ms, its contents 200ms later on a 40ms beat */
.about__row :is(.tags,.stack) li{--k:0;opacity:0;transform:translateY(6px);
  transition:opacity .32s var(--ease-out) calc(var(--i) * .06s + .2s + var(--k) * .04s),
             transform .32s var(--ease-out) calc(var(--i) * .06s + .2s + var(--k) * .04s),
             color .2s ease,border-color .2s ease,background-color .2s ease}
.about__row :is(.tags,.stack) li:nth-child(2){--k:1}
.about__row :is(.tags,.stack) li:nth-child(3){--k:2}
.about__row :is(.tags,.stack) li:nth-child(4){--k:3}
.about__row :is(.tags,.stack) li:nth-child(5){--k:4}
.about__row :is(.tags,.stack) li:nth-child(6){--k:5}
.about__dl[data-drawn] :is(.tags,.stack) li{opacity:1;transform:none}
@media(hover:hover) and (pointer:fine){
  .tags li:hover{color:var(--blue);background:var(--blue-tint);border-color:var(--blue)}
  .tags li:hover :is(.ic--tag,.tag__mark){color:var(--blue)}
}

/* ---------- cta band ---------- */
/* a floating panel, not a full-bleed band: the white page keeps running past it on
   both sides, so the dark block reads as an object placed on the page. `.wrap` moved
   to the <section> so it can keep supplying the page gutter while the panel owns its
   own padding. */
.ctaband{padding-block:clamp(28px,4vw,56px) var(--sec)}
.ctaband__in{position:relative;isolation:isolate;overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(158deg,#12203a,#0d1420 54%,#0a1018);
  border-radius:var(--r-panel);padding:clamp(56px,8vw,88px) clamp(24px,5vw,56px)}
.ctaband__in::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(54% 72% at 50% 122%,rgba(58,120,236,.55),transparent 66%),
    radial-gradient(40% 54% at 10% -6%,rgba(212,165,61,.20),transparent 70%)}
.ctaband h2{font-family:var(--display);color:#fff;font-weight:700;letter-spacing:-.028em;
  font-size:clamp(1.7rem,3.8vw,2.7rem);max-width:20ch;margin:0 auto 14px}
.ctaband p{color:rgba(255,255,255,.72);font-size:1.05rem;margin-bottom:30px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,72px);align-items:start}
.contact__info{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.contact__info li{display:flex;gap:18px;padding:17px 0;border-bottom:1px solid var(--line);font-size:.95rem;
  transition:border-color .2s ease}
.contact__info span{width:88px;flex:none;color:var(--muted);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;padding-top:4px;transition:color .2s ease}
.contact__info a{color:var(--ink);transition:color .18s ease}
@media(hover:hover) and (pointer:fine){
  .contact__info li:hover{border-color:var(--line-strong)}
  .contact__info li:hover span{color:var(--blue)}
  .contact__info a:hover{color:var(--blue)}
}
.contact__support{margin-top:20px;font-size:.84rem;color:var(--muted);line-height:1.6}
.contact__map{margin-top:20px;overflow:hidden;border:1px solid var(--line);border-radius:4px}
.contact__map iframe{width:100%;height:210px;border:0;filter:grayscale(1) contrast(.95)}

/* on a white section the panel steps *down* in tone to separate — the inverse of the
   accordion's white-on-tint. Same idea, no shadow either way. */
.form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,3.4vw,44px)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form label{display:block;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px;transition:color .2s ease}
.form label:focus-within{color:var(--blue)}
.form label span{text-transform:none;letter-spacing:normal;font-weight:400}
.form input,.form select,.form textarea{width:100%;margin-top:9px;padding:11px 0;border:0;
  border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  font:inherit;font-size:.95rem;color:var(--ink);text-transform:none;letter-spacing:normal;
  transition:border-color .18s ease}
/* 1px+11 → 2px+10 keeps the box the same height, so the underline thickens without
   nudging the layout — and without reaching for a shadow */
.form input:focus,.form select:focus,.form textarea:focus{outline:none;
  border-bottom-color:var(--blue);border-bottom-width:2px;padding-bottom:10px}
.form textarea{resize:vertical}
.form .phone{display:flex;gap:12px;margin-top:9px}
.form .phone select,.form .phone input{margin-top:0}
.form .phone select{flex:0 0 auto;width:auto}
.form .phone input{flex:1;min-width:0}
.form__pref{border:0;margin-bottom:24px}
.form__pref legend{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.form .rad{display:inline-flex;align-items:center;gap:8px;margin:0 18px 8px 0;font-size:.9rem;
  font-weight:400;letter-spacing:normal;text-transform:none;color:var(--body)}
.form .rad input{width:auto;margin:0;accent-color:var(--blue)}
.form .btn{width:100%;margin-top:4px}

/* ---------- footer ---------- */
.foot{position:relative;isolation:isolate;border-top:1px solid var(--line);padding:60px 0 32px}
/* the page ends on the brand accent rather than on plain white */
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 70% at 50% -10%,rgba(212,165,61,.10),transparent 66%)}
.foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;align-items:start}
.foot__in .brand__name{display:block;font-size:1rem}
.foot__in .brand__tag{display:block;margin-top:3px}
.foot__disc{margin-top:16px;font-size:.85rem;color:var(--muted)}
.foot__nav{display:flex;flex-direction:column;gap:11px}
.foot__nav a{font-size:.9rem;transition:color .18s ease}
@media(hover:hover) and (pointer:fine){.foot__nav a:hover{color:var(--blue)}}
.foot__contact{display:flex;flex-direction:column;gap:11px;font-size:.9rem;color:var(--muted)}
.foot__contact a{transition:color .18s ease}
@media(hover:hover) and (pointer:fine){.foot__contact a:hover{color:var(--blue)}}
.foot__base{margin-top:48px;padding-top:26px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}

/* ---------- reveal ---------- */
.js [data-a],.js [data-a-group]>*{opacity:0;transform:translateY(14px)}
.reduced [data-a],.reduced [data-a-group]>*{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .nav__links,.nav__wrap{display:none}
  .nav__burger{display:flex}
  .nav[data-open] .nav__sheet{display:flex}
  .hero__in{grid-template-columns:1fr}
  .hero__logo{display:none}
  .contact{grid-template-columns:1fr;gap:40px}
  .foot__in{grid-template-columns:1fr;gap:30px}
}
@media(max-width:620px){
  /* the positioning line is 55 characters — as a pill it wraps to a full-width, two-line
     lozenge. Below this width it drops the chrome and goes back to being a caption. */
  .eyebrow{display:flex;align-items:flex-start;padding:0;border:0;background:none;
    backdrop-filter:none;color:var(--gold);letter-spacing:.16em}
  .eyebrow::before{margin-top:7px}
}
@media(max-width:560px){.form__row{grid-template-columns:1fr}}
@media(prefers-reduced-transparency:reduce){
  .nav[data-scrolled],.nav[data-open]{background:var(--bg);backdrop-filter:none}
  .eyebrow,.hero__badges span{background:var(--bg);backdrop-filter:none}
}
@media(prefers-contrast:more){
  :root{--line:#b4bcc9;--muted:#5a6473}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* gentler, not none: colour and opacity still transition, movement is removed */
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-property:opacity,color,background-color,border-color,box-shadow,outline-color!important;
    transition-duration:.15s!important}
  [data-a],[data-a-group]>*{opacity:1!important;transform:none!important}
  /* The whitelist above already drops the spine and connector transforms, so they land
     instantly — but opacity survives it, and the gold cap's .72s delay would leave the
     spine's end point blank for most of a second with nothing drawing toward it. */
  .why::after,.why li::after,.about__row :is(.tags,.stack) li,
  .ic--lbl{transition-delay:0s!important}
}