/* =========================================================================
   LooSolution — stylesheet
   1. Tokens
   2. Reset & base
   3. Typography helpers
   4. Layout primitives
   5. Buttons
   6. Header & navigation
   7. Hero + manifest (signature element)
   8. Trust strip
   9. Process rail
   10. Channels & categories
   11. Solutions grid
   12. Stat band
   13. About
   14. Why us / proof
   15. Testimonial carousel
   16. Success stories + lightbox
   17. Leaders
   18. Insights
   19. FAQ accordion
   20. Contact form
   21. Footer & FAB
   22. Motion, reveal, accessibility
   23. Responsive
   ========================================================================= */

/* ---------------------------------------------------------------
   1. STRUCTURAL TOKENS

   Colour and type tokens have MOVED to css/theme.css, which is now the
   single source of truth for the brand. Everything below is structural
   (scale, rhythm, shape, easing) and is not part of the palette — it does
   not change when the brand does.

   To re-brand this site, edit css/theme.css section 1 only.
   --------------------------------------------------------------- */
:root{
  /* type scale (fluid) */
  --t-display: clamp(2.5rem, 1.5rem + 3.6vw, 4.4rem);
  --t-h2:      clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  --t-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --t-lede:    clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-micro:   0.75rem;

  /* space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* shape */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  --shell: 1200px;
  --header-h: 72px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   2. RESET & BASE
   --------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto; }
svg{ display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:3px solid var(--mint); outline-offset:3px; border-radius:var(--r-sm); }

.skip-link{
  position:absolute; left:var(--s4); top:-100px; z-index:200;
  background:var(--ink); color:var(--on-invert); padding:12px 18px; border-radius:var(--r-md);
  font-family:var(--mono); font-size:var(--t-small); text-decoration:none;
  transition:top .2s var(--ease);
}
.skip-link:focus{ top:var(--s4); }

/* ---------------------------------------------------------------
   3. TYPOGRAPHY HELPERS
   --------------------------------------------------------------- */
h1,h2,h3{ font-family:var(--display); font-weight:800; letter-spacing:-.025em; line-height:1.06; margin:0 0 var(--s4); }
h1{ font-size:var(--t-display); }
h2{ font-size:var(--t-h2); line-height:1.1; }
h3{ font-size:var(--t-h3); letter-spacing:-.015em; line-height:1.25; }
h1 em{ font-style:normal; color:var(--red); }

/* mono eyebrow — preserved from the original brand, tightened */
.eyebrow{
  font-family:var(--mono); font-size:var(--t-micro); font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red);
  margin:0 0 var(--s4);
}
.lede{ font-size:var(--t-lede); color:var(--slate); max-width:56ch; }
.sec-sub{ color:var(--slate); max-width:60ch; margin-top:var(--s3); }

/* ---------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   --------------------------------------------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--s5); }
.section{ padding-block:var(--s9); }
.sec-head{ max-width:54ch; margin-bottom:var(--s8); }
.sec-head h2{ max-width:22ch; }

/* ---------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border:1.5px solid transparent; border-radius:var(--r-md);
  font-family:var(--body); font-weight:600; font-size:.95rem; text-decoration:none;
  cursor:pointer; transition:background .18s var(--ease), color .18s var(--ease),
             border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-sm{ padding:10px 18px; font-size:.875rem; }
.btn-block{ width:100%; }

.btn-primary{ background:var(--red); color:var(--on-accent); border-color:var(--red); }
.btn-primary:hover{ background:var(--red-deep); border-color:var(--red-deep); }

.btn-outline{ background:transparent; color:var(--red); border-color:var(--red); }
.btn-outline:hover{ background:var(--red); color:var(--on-accent); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--on-invert); }

/* ---------------------------------------------------------------
   6. HEADER & NAVIGATION
   --------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(var(--on-invert-rgb), .92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s var(--ease);
}
.site-header.is-stuck{ box-shadow:0 6px 24px rgba(var(--ink-rgb), .07); }

.header-inner{ display:flex; align-items:center; gap:var(--s6); height:var(--header-h); }

.logo{ display:flex; align-items:center; gap:6px; text-decoration:none; flex:0 0 auto; }
.logo-mark{ width:60px; height:33px; }
.logo-loo{ font-family:var(--display); font-weight:800; font-size:19px; fill:var(--red); letter-spacing:-.02em; }
.logo-o{ fill:none; stroke:#1B5EE0; stroke-width:2; }
.logo-cart{ fill:#1B5EE0; }
.logo-word{ font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:-.02em; }

.nav{ margin-inline:auto; }
.nav-list{ display:flex; align-items:center; gap:var(--s2); }
.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:10px 14px; border-radius:var(--r-md);
  font-weight:500; font-size:.95rem; text-decoration:none; cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease);
}
.nav-link:hover{ background:var(--fog); color:var(--red); }
.has-menu > .nav-link::after{
  content:""; width:6px; height:6px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg);
  transition:transform .2s var(--ease);
}
.has-menu > .nav-link[aria-expanded="true"]{ color:var(--red); }
.has-menu > .nav-link[aria-expanded="true"]::after{ transform:translateY(1px) rotate(-135deg); }

.has-menu{ position:relative; }
.mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:min(620px, 78vw); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgba(var(--ink-rgb), .14);
  padding:var(--s5); z-index:110;
}
.mega-sm{ width:min(360px, 78vw); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2) var(--s5); }
.mega-grid-sm{ grid-template-columns:1fr 1fr; }
.mega-grid a{
  display:block; padding:10px 12px; border-radius:var(--r-md); text-decoration:none;
  transition:background .15s var(--ease);
}
.mega-grid a:hover{ background:var(--fog); }
.mega-t{ display:block; font-weight:600; font-size:.92rem; }
.mega-d{ display:block; font-size:var(--t-small); color:var(--slate); line-height:1.4; margin-top:2px; }

.header-actions{ display:flex; align-items:center; gap:var(--s3); flex:0 0 auto; }

.burger{
  display:none; width:44px; height:44px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.burger span{ display:block; width:18px; height:2px; background:var(--ink); transition:transform .22s var(--ease), opacity .18s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* scroll progress bar sits on the header's bottom edge */
.scroll-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:var(--red); transition:width .1s linear;
}

/* mobile drawer */
.drawer{
  position:fixed; inset:var(--header-h) 0 0 auto; width:min(380px,88vw);
  background:var(--surface); border-left:1px solid var(--line);
  padding:var(--s6) var(--s5) var(--s9); overflow-y:auto; z-index:99;
  transform:translateX(100%); transition:transform .28s var(--ease);
}
.drawer.is-open{ transform:translateX(0); }
.drawer a{ display:block; padding:11px 0; text-decoration:none; font-weight:500; border-bottom:1px solid var(--line); }
.drawer a:hover{ color:var(--red); }
.drawer-eyebrow{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin:var(--s6) 0 var(--s2);
}
.drawer-eyebrow:first-child{ margin-top:0; }
.drawer-cta{ margin-top:var(--s6); border-bottom:0; text-align:center; color:var(--on-invert); }
.drawer-cta:hover{ color:var(--on-invert); }
.drawer-scrim{
  position:fixed; inset:0; background:rgba(var(--ink-rgb), .45); z-index:98;
  opacity:0; transition:opacity .28s var(--ease);
}
.drawer-scrim.is-open{ opacity:1; }

/* ---------------------------------------------------------------
   7. HERO + MANIFEST  (signature element)
   --------------------------------------------------------------- */
.hero{ position:relative; padding-top:var(--s9); background:
  radial-gradient(1100px 460px at 12% -8%, var(--red-wash), transparent 62%),
  var(--paper); }

.hero-grid{
  display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s8);
  align-items:center; padding-bottom:var(--s9);
}
.hero-copy h1{ margin-bottom:var(--s5); max-width:16ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s7); }
.hero-note{
  display:flex; align-items:center; gap:10px; margin-top:var(--s6);
  font-size:var(--t-small); color:var(--slate);
}
.hero-note .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); flex:0 0 auto; }

/* --- the manifest: a shipping-ticket panel of live numbers --- */
.manifest{
  position:relative; background:var(--ink); color:var(--on-invert);
  border-radius:var(--r-lg); padding:var(--s6) var(--s6) var(--s5);
  box-shadow:0 30px 70px rgba(var(--ink-rgb), .22);
}
.manifest-head{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:rgba(var(--on-invert-rgb), .55);
  padding-bottom:var(--s4); border-bottom:1px solid rgba(var(--on-invert-rgb), .14);
}
.manifest-channel{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  padding:var(--s5) 0 var(--s4);
}
.manifest-label{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:rgba(var(--on-invert-rgb), .55);
}
.channel-rotator{
  font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--mint-soft);
  letter-spacing:-.02em;
}
.channel-rotator.is-swapping{ opacity:0; transform:translateY(-6px); }
.channel-rotator{ transition:opacity .22s var(--ease), transform .22s var(--ease); }

.manifest-rows{ margin:0; border-top:1px dashed rgba(var(--on-invert-rgb), .2); }
.mrow{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) 0; border-bottom:1px dashed rgba(var(--on-invert-rgb), .14);
}
.mrow dt{ font-size:var(--t-small); color:rgba(var(--on-invert-rgb), .72); }
.mrow dt em{ display:block; font-style:normal; font-size:var(--t-micro); color:rgba(var(--on-invert-rgb), .45); }
.mrow dd{
  margin:0; font-family:var(--display); font-weight:800; font-size:1.55rem;
  letter-spacing:-.02em; white-space:nowrap;
}

.manifest-perf{ height:var(--s5); }
.manifest-foot{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  font-family:var(--mono); font-size:var(--t-micro); color:rgba(var(--on-invert-rgb), .45);
  letter-spacing:.06em;
}
.barcode{
  width:120px; height:30px;
  background:repeating-linear-gradient(90deg,
    var(--on-invert) 0 2px, transparent 2px 4px, var(--on-invert) 4px 5px, transparent 5px 9px,
    var(--on-invert) 9px 12px, transparent 12px 13px, var(--on-invert) 13px 14px, transparent 14px 18px);
  opacity:.8;
}

/* ---------------------------------------------------------------
   8. TRUST STRIP
   --------------------------------------------------------------- */
.trust{ background:var(--red); color:var(--on-accent); }
.trust-inner{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:var(--s6); padding-block:var(--s5);
}
.trust-title{
  margin:0; font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
}
.trust-marquee{ overflow:hidden; mask-image:linear-gradient(90deg,#000 0 92%,transparent); }
.trust-track{
  display:flex; gap:var(--s7); width:max-content; padding-right:var(--s7);
  animation:marquee 38s linear infinite;
}
.trust-track span{
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  letter-spacing:-.01em; opacity:.92; white-space:nowrap;
}
.trust-marquee:hover .trust-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.trust-link{
  font-size:var(--t-small); font-weight:600; text-decoration:none; white-space:nowrap;
  border-bottom:1.5px solid rgba(var(--on-invert-rgb), .5); padding-bottom:2px;
}
.trust-link:hover{ border-color:var(--on-invert); }

/* ---------------------------------------------------------------
   9. PROCESS RAIL — buy / sell / ship / grow
   --------------------------------------------------------------- */
.process{ background:var(--paper); }
.rail{ position:relative; padding-left:76px; }
.rail-stops{ display:block; }
.rail-line{
  position:absolute; left:27px; top:8px; bottom:8px; width:2px;
  background:var(--line);
}
.rail-fill{ display:block; width:100%; height:0%; background:var(--red); transition:height .15s linear; }

.stop{ position:relative; padding-bottom:var(--s9); }
.stop:last-child{ padding-bottom:0; }
.stop-num{
  position:absolute; left:-76px; top:0;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surface); border:2px solid var(--line);
  font-family:var(--mono); font-weight:700; font-size:.95rem; color:var(--slate);
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.stop.is-active .stop-num{ background:var(--ink); border-color:var(--ink); color:var(--on-invert); }

.stop-tag{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.22em;
  text-transform:uppercase; color:var(--slate); margin:0 0 var(--s2);
}
.stop-body{
  display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s8);
  grid-template-areas:"tag points" "head points" "cta points"; align-content:start;
}
.stop-tag{ grid-area:tag; }
.stop-body > h3{
  grid-area:head; align-self:start;
  font-size:clamp(1.35rem,1.05rem + 1.1vw,1.9rem); max-width:22ch; margin-bottom:var(--s5);
}
.stop-body > .btn{ grid-area:cta; justify-self:start; align-self:start; }
.stop-points{ grid-area:points; display:grid; gap:var(--s4); align-content:start; margin:0 0 var(--s5); }
.stop-points li{
  position:relative; padding-left:var(--s5); color:var(--slate); font-size:.97rem;
}
.stop-points li::before{
  content:""; position:absolute; left:0; top:.62em; width:10px; height:2px; background:var(--red);
}

/* ---------------------------------------------------------------
   10. CHANNELS & CATEGORIES
   --------------------------------------------------------------- */
.channels{ background:var(--ink); color:var(--on-invert); }
.channels .eyebrow{ color:var(--mint-soft); }
/* Channel cards. The old version was a bordered table: every cell shared one
   continuous grid line, so nothing read as an individual platform. These are
   discrete cards with their own surface, mark and label.                     */
.chan-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--s4);
  margin-top:var(--s7);
}

.chan{
  position:relative; isolation:isolate;
  display:flex; align-items:center; gap:var(--s4);
  min-height:96px; padding:var(--s5);
  border:1px solid rgba(var(--on-invert-rgb), .10);
  border-radius:var(--r-lg);
  background:rgba(var(--on-invert-rgb), .035);
  transition:transform .24s var(--ease), border-color .24s var(--ease),
             background .24s var(--ease), box-shadow .24s var(--ease);
}

/* Pointer-tracked highlight. --mx/--my are written by the existing delegated
   listener in ambient.js; no new JS and no per-card listeners.               */
.chan::before{
  content:''; position:absolute; inset:0; z-index:-1;
  border-radius:inherit; opacity:0;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
             rgba(var(--accent-2-rgb), .16), transparent 70%);
  transition:opacity .3s var(--ease);
}

.chan:hover,
.chan:focus-within{
  transform:translateY(-4px);
  border-color:rgba(var(--accent-2-rgb), .45);
  background:rgba(var(--on-invert-rgb), .06);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.chan:hover::before,
.chan:focus-within::before{ opacity:1; }

/* Monogram tile. Trademarked logos are deliberately not reproduced; a
   consistent letterform keeps every card the same visual weight.            */
.chan-mark{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:46px; height:46px;
  border-radius:10px;
  border:1px solid rgba(var(--on-invert-rgb), .14);
  background:rgba(var(--on-invert-rgb), .06);
  font-family:var(--display); font-weight:800;
  font-size:.95rem; letter-spacing:-.02em; line-height:1;
  color:var(--on-invert);
  transition:transform .24s var(--ease), background .24s var(--ease),
             border-color .24s var(--ease), color .24s var(--ease);
}
.chan:hover .chan-mark{
  transform:scale(1.06);
  border-color:rgba(var(--accent-2-rgb), .5);
  background:rgba(var(--accent-2-rgb), .16);
  color:var(--accent-2-soft);
}

/* Three tints so twelve identical tiles do not read as a single block. */
.chan[data-tone="a"] .chan-mark{ background:rgba(var(--accent-2-rgb), .12); }
.chan[data-tone="b"] .chan-mark{ background:rgba(var(--on-invert-rgb), .08); }
.chan[data-tone="c"] .chan-mark{ background:rgba(var(--accent-rgb), .22); }

.chan-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.chan-name{
  font-family:var(--display); font-weight:700;
  font-size:1.02rem; letter-spacing:-.015em; line-height:1.25;
  color:var(--on-invert);
  overflow-wrap:anywhere;
}
.chan-kind{
  font-family:var(--mono); font-size:.6875rem;
  text-transform:uppercase; letter-spacing:.12em;
  color:rgba(var(--on-invert-rgb), .55);
}

/* Emphasis on the second clause of the heading. */
.chan-title em{
  font-style:normal;
  color:var(--accent-2-soft);
}

.cat-block{ margin-top:var(--s9); }
.cat-title{ font-size:var(--t-h3); margin-bottom:var(--s5); }
.cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4) var(--s6); }
.cat-grid li{
  display:flex; align-items:baseline; gap:var(--s3);
  padding-bottom:var(--s3); border-bottom:1px solid rgba(var(--on-invert-rgb), .14);
  color:rgba(var(--on-invert-rgb), .82);
}
.cat-k{ font-family:var(--mono); font-size:var(--t-micro); color:var(--mint); }

/* ---------------------------------------------------------------
   11. SOLUTIONS GRID
   --------------------------------------------------------------- */
.solutions{ background:var(--fog); }
.svc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.svc{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.svc:hover{ border-color:var(--ink); transform:translateY(-3px); box-shadow:0 16px 36px rgba(var(--ink-rgb), .08); }
.svc-ico{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:var(--s5);
  border-radius:var(--r-md); background:var(--red-wash); color:var(--red);
}
.svc-ico svg{ width:22px; height:22px; }
.svc h3{ font-size:1.05rem; margin-bottom:var(--s3); }
.svc p{ font-size:var(--t-small); color:var(--slate); margin:0; }

.svc-cta{ background:var(--ink); border-color:var(--ink); color:var(--on-invert); text-decoration:none; display:block; }
.svc-cta:hover{ background:var(--red); border-color:var(--red); }
.svc-cta p{ color:rgba(var(--on-invert-rgb), .75); }
.svc-cta-link{ display:inline-block; margin-top:var(--s5); font-weight:600; font-size:.9rem; }

/* ---------------------------------------------------------------
   12. STAT BAND
   --------------------------------------------------------------- */
.statband{ background:var(--ink-2); color:var(--on-invert); padding-block:var(--s8); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
.stat{ padding-left:var(--s5); border-left:2px solid rgba(var(--on-invert-rgb), .16); }
.stat-n{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(2.1rem,1.4rem + 2.4vw,3.2rem); margin:0 0 var(--s2); line-height:1;
}
.stat-l{ margin:0; font-size:var(--t-small); color:rgba(var(--on-invert-rgb), .66); }
.stat-l em{ display:block; font-style:italic; font-size:var(--t-micro); color:rgba(var(--on-invert-rgb), .42); }

/* ---------------------------------------------------------------
   13. ABOUT
   --------------------------------------------------------------- */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; }
.about-copy p{ color:var(--slate); max-width:56ch; }
.ph{
  position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3;
  border:1px solid var(--line);
}
.ph-office{
  background:
    linear-gradient(115deg, rgba(var(--accent-rgb), .10), transparent 45%),
    repeating-linear-gradient(90deg, var(--fog) 0 38px, #E8ECEF 38px 40px),
    repeating-linear-gradient(0deg, transparent 0 58px, rgba(var(--ink-rgb), .05) 58px 60px);
}
.ph-tag{
  position:absolute; left:12px; bottom:12px;
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em;
  background:var(--ink); color:var(--on-invert); padding:5px 9px; border-radius:var(--r-sm);
}
.net{
  aspect-ratio:4/3; border-radius:var(--r-lg); background:var(--ink);
  padding:var(--s5); display:grid; align-content:space-between; gap:var(--s4);
}
.net-head,.net-foot{
  display:flex; justify-content:space-between; gap:var(--s4);
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(var(--on-invert-rgb), .5);
}
.net-foot strong{ color:var(--mint-soft); font-weight:500; }
.net svg{ width:100%; height:auto; }
.net-node{ fill:var(--mint); }
.net-ring{ fill:rgba(var(--accent-2-rgb), .13); }
.net-link{ stroke:rgba(var(--on-invert-rgb), .18); stroke-width:1; }
.net-hub{ fill:none; stroke:var(--red); stroke-width:2; }

.about-facts{ display:flex; gap:var(--s7); margin:var(--s6) 0 var(--s7); }
.fact-n{
  display:block; font-family:var(--display); font-weight:800; font-size:2rem;
  letter-spacing:-.03em; color:var(--red); line-height:1;
}
.fact-l{ display:block; font-size:var(--t-small); color:var(--slate); margin-top:6px; }

/* ---------------------------------------------------------------
   14. WHY US / PROOF
   --------------------------------------------------------------- */
.why{ background:var(--fog); }
.why .sec-head h2{ max-width:30ch; }
.why-top{
  display:grid; grid-template-columns:220px 1fr; gap:var(--s8);
  align-items:center; margin-bottom:var(--s9);
}
.answer-seal svg{ width:100%; height:auto; }
.seal-ring{ fill:none; stroke:var(--ink); stroke-width:2.5; }
.seal-ring.thin{ stroke-width:1.2; }
.seal-text{ font-family:var(--mono); font-size:12.5px; font-weight:500; letter-spacing:.13em; fill:var(--ink); }
.seal-big{ font-family:var(--display); font-weight:800; font-size:30px; fill:var(--ink); text-anchor:middle; letter-spacing:-.02em; }
.why-copy h3{ font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem); max-width:16ch; }
.why-copy p{ color:var(--slate); max-width:52ch; }
.why-copy a{ color:var(--red); font-weight:600; }

.proof-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.proof{
  margin:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s6);
}
.proof-n{
  font-family:var(--display); font-weight:800; font-size:2.6rem; letter-spacing:-.03em;
  line-height:1; margin:0 0 var(--s4);
}
.proof > p:not(.proof-n){ color:var(--slate); font-size:.95rem; }
.proof figcaption{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.1em;
  text-transform:uppercase; color:var(--red);
}

/* ---------------------------------------------------------------
   15. TESTIMONIAL CAROUSEL
   --------------------------------------------------------------- */
.quotes{ background:var(--paper); }
.carousel-viewport{ overflow:hidden; border-radius:var(--r-lg); }
.carousel-track{ display:flex; transition:transform .45s var(--ease); }
.slide{ flex:0 0 100%; }
.slide blockquote{
  margin:0; padding:var(--s9) var(--s8);
  background:linear-gradient(120deg, var(--ink) 0%, var(--ink-2) 55%, var(--quote-end) 100%);
  color:var(--on-invert); border-radius:var(--r-lg);
}
.slide blockquote p{
  font-family:var(--display); font-weight:700; letter-spacing:-.022em; line-height:1.24;
  font-size:clamp(1.35rem,1rem + 1.8vw,2.1rem); max-width:26ch; margin:0 0 var(--s6);
}
.slide footer{ display:flex; flex-direction:column; gap:2px; }
.q-name{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--mint-soft);
}
.q-role{ font-size:var(--t-small); color:rgba(var(--on-invert-rgb), .6); }

.carousel-ui{ display:flex; align-items:center; gap:var(--s4); margin-top:var(--s5); }
.car-btn{
  width:44px; height:44px; border:1.5px solid var(--line); border-radius:var(--r-md);
  background:var(--surface); cursor:pointer;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.car-btn:hover{ border-color:var(--ink); background:var(--ink); color:var(--on-invert); }
.car-dots{ display:flex; gap:8px; }
.car-dots button{
  width:28px; height:4px; border:0; padding:0; cursor:pointer; border-radius:2px;
  background:var(--line); transition:background .2s var(--ease);
}
.car-dots button[aria-selected="true"]{ background:var(--red); }

/* ---------------------------------------------------------------
   16. SUCCESS STORIES + LIGHTBOX
   --------------------------------------------------------------- */
.stories{ background:var(--fog); }
.story-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.story{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3);
  width:100%; text-align:left; cursor:pointer;
  padding:var(--s6); min-height:220px;
  background:var(--ink); color:var(--on-invert); border:0; border-radius:var(--r-lg);
  transition:background .22s var(--ease), transform .22s var(--ease);
}
.story:hover{ background:var(--red); transform:translateY(-3px); }
.story-cat{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--mint-soft);
}
.story:hover .story-cat{ color:rgba(var(--on-invert-rgb), .8); }
.story-name{
  font-family:var(--display); font-weight:800; font-size:1.6rem; letter-spacing:-.025em;
  margin-top:auto;
}
.story-cta{ font-size:var(--t-small); font-weight:600; color:rgba(var(--on-invert-rgb), .7); }

.lightbox[hidden]{ display:none; }
.lightbox{
  position:fixed; inset:0; z-index:150; display:grid; place-items:center;
  background:rgba(var(--ink-rgb), .72); padding:var(--s5);
}
.lb-panel{
  position:relative; width:min(560px,100%); background:var(--surface);
  border-radius:var(--r-lg); padding:var(--s8) var(--s7) var(--s7);
}
.lb-close{
  position:absolute; top:12px; right:12px; width:40px; height:40px;
  border:0; background:transparent; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--slate);
}
.lb-close:hover{ color:var(--ink); }
.lb-cat{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin-bottom:var(--s3);
}
.lb-panel h3{ font-size:1.8rem; }
.lb-panel > p:not(.lb-cat){ color:var(--slate); }

/* ---------------------------------------------------------------
   17. LEADERS
   --------------------------------------------------------------- */
.leader-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4); }
.leader{ display:flex; flex-direction:column; gap:6px; }
.leader-ph{
  display:grid; place-items:center; aspect-ratio:3/4; margin-bottom:var(--s3);
  background:var(--fog); border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--display); font-weight:800; font-size:2rem; color:#C3CBD3;
  letter-spacing:.02em;
}
.leader-n{ font-weight:600; font-size:.95rem; }
.leader-r{ font-size:var(--t-small); color:var(--slate); line-height:1.35; }
.leaders-note{
  margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid var(--line);
  max-width:64ch; color:var(--slate);
}
.leaders-note a{ color:var(--red); font-weight:600; }

/* ---------------------------------------------------------------
   18. INSIGHTS
   --------------------------------------------------------------- */
.insights{ background:var(--fog); }
.post-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.post{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); transition:border-color .2s var(--ease);
}
.post:hover{ border-color:var(--ink); }
.post-cat{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--red);
}
.post h3{ font-size:1.05rem; margin:var(--s3) 0; }
.post h3 a{ text-decoration:none; }
.post h3 a:hover{ color:var(--red); }
.post p{ font-size:var(--t-small); color:var(--slate); margin:0; }

/* ---------------------------------------------------------------
   19. FAQ ACCORDION
   --------------------------------------------------------------- */
.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--s8); align-items:start; }
.faq-head h2{ max-width:16ch; }
.faq-head .sec-sub a{ color:var(--red); font-weight:600; }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-item h3{ margin:0; font-size:1rem; }
.acc-btn{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  width:100%; padding:var(--s5) 0; background:none; border:0; cursor:pointer;
  text-align:left; font-family:var(--display); font-weight:700; font-size:1.05rem;
  letter-spacing:-.015em; transition:color .18s var(--ease);
}
.acc-btn:hover{ color:var(--red); }
.acc-ico{
  position:relative; flex:0 0 auto; width:20px; height:20px;
}
.acc-ico::before,
.acc-ico::after{
  content:""; position:absolute; left:50%; top:50%; background:currentColor;
  transform:translate(-50%,-50%);
}
.acc-ico::before{ width:14px; height:2px; }
.acc-ico::after{ width:2px; height:14px; transition:transform .22s var(--ease), opacity .22s var(--ease); }
.acc-btn[aria-expanded="true"] .acc-ico::after{ transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.acc-btn[aria-expanded="true"]{ color:var(--red); }

.acc-panel{ overflow:hidden; height:0; transition:height .28s var(--ease); }
.acc-panel p{ color:var(--slate); padding-bottom:var(--s5); margin:0; max-width:62ch; }

/* ---------------------------------------------------------------
   20. CONTACT FORM
   --------------------------------------------------------------- */
.contact{ background:var(--ink); color:var(--on-invert); }
.contact .eyebrow{ color:var(--mint-soft); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:start; }
.contact-copy h2{ max-width:16ch; }
.contact-copy > p{ color:rgba(var(--on-invert-rgb), .7); max-width:52ch; }
.contact-list{ margin-top:var(--s7); display:grid; gap:var(--s5); }
.contact-list li{ padding-top:var(--s4); border-top:1px solid rgba(var(--on-invert-rgb), .14); }
.cl-k{
  display:block; font-family:var(--mono); font-size:var(--t-micro);
  letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--on-invert-rgb), .45);
  margin-bottom:6px;
}
.contact-list a{ color:var(--on-invert); font-weight:600; }

.form{ background:var(--surface); color:var(--ink); border-radius:var(--r-lg); padding:var(--s7); }
.form-title{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.2em;
  text-transform:uppercase; color:var(--red); margin-bottom:var(--s6);
}
.field{ margin-bottom:var(--s5); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s4); }
.field label{ display:block; font-size:var(--t-small); font-weight:600; margin-bottom:6px; }
.opt{ font-weight:400; color:var(--slate); }
.field input,
.field select,
.field textarea{
  width:100%; padding:12px 14px; font:inherit; font-size:.95rem;
  background:var(--surface); color:var(--ink);
  border:1.5px solid var(--line); border-radius:var(--r-md);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea{ resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(var(--ink-rgb), .08);
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:var(--red); }
.err{
  margin:6px 0 0; min-height:0; font-size:var(--t-small); color:var(--red);
}
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ margin-top:var(--s4); font-size:var(--t-small); color:var(--slate); }
.form-status{ margin:var(--s4) 0 0; font-size:var(--t-small); font-weight:600; color:var(--mint); }

/* ---------------------------------------------------------------
   21. FOOTER & FAB
   --------------------------------------------------------------- */
.site-footer{ background:var(--paper); border-top:1px solid var(--line); padding-block:var(--s8) var(--s7); }
.foot-cta{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6);
  padding:var(--s7); margin-bottom:var(--s8);
  background:var(--fog); border-radius:var(--r-lg);
}
.foot-cta p{ margin:0; font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,.95rem + .9vw,1.6rem); letter-spacing:-.02em; max-width:36ch; line-height:1.2; }
.foot-cta strong{ color:var(--red); }

.foot-cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s6); padding-bottom:var(--s8); }
.foot-h{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); margin-bottom:var(--s4);
}
.foot-cols li{ margin-bottom:10px; }
.foot-cols a{ text-decoration:none; font-size:var(--t-small); color:var(--slate); }
.foot-cols a:hover{ color:var(--ink); }

.foot-base{
  display:flex; justify-content:space-between; gap:var(--s6); flex-wrap:wrap;
  padding-top:var(--s6); border-top:1px solid var(--line);
}
.foot-addr{ display:flex; gap:var(--s8); flex-wrap:wrap; }
.foot-addr p{ margin:0; font-size:var(--t-small); color:var(--slate); }
.foot-country{ display:block; font-weight:600; color:var(--ink); margin-bottom:4px; }
.foot-meta{ text-align:right; }
.foot-meta p{ margin:0; font-size:var(--t-small); color:var(--slate); }
.foot-meta a{ color:var(--red); font-weight:600; }
.social{ display:flex; gap:8px; justify-content:flex-end; margin-bottom:var(--s4); }
.social a{
  display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  background:var(--fog); font-family:var(--mono); font-size:.7rem; text-decoration:none;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.social a:hover{ background:var(--ink); color:var(--on-invert); }

.fab{
  position:fixed; right:20px; bottom:20px; z-index:90;
  display:grid; place-items:center; width:54px; height:54px; border-radius:50%;
  background:var(--red); color:var(--on-invert); box-shadow:0 12px 28px rgba(var(--accent-rgb), .35);
  transition:transform .2s var(--ease), background .2s var(--ease);
}
.fab:hover{ transform:scale(1.06); background:var(--red-deep); }
.fab svg{ width:24px; height:24px; }

/* ---------------------------------------------------------------
   22. MOTION / REVEAL / A11Y
   --------------------------------------------------------------- */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .trust-track{ animation:none; }
}

/* ---------------------------------------------------------------
   23. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1080px){
  .svc-grid,
  .post-grid{ grid-template-columns:repeat(2,1fr); }
  .leader-grid{ grid-template-columns:repeat(3,1fr); }
  .chan-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

@media (max-width: 900px){
  :root{ --s9: 72px; }
  .stop-body{ grid-template-columns:1fr; grid-template-areas:"tag" "head" "points" "cta"; }
  .nav{ display:none; }
  .burger{ display:flex; }
  .hero-grid,
  .about-grid,
  .faq-grid,
  .contact-grid{ grid-template-columns:1fr; }
  .about-media{ order:2; }
  .why-top{ grid-template-columns:1fr; gap:var(--s6); }
  .answer-seal{ width:180px; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s6); }
  .proof-grid,
  .story-grid{ grid-template-columns:1fr; }
  .trust-inner{ grid-template-columns:1fr; gap:var(--s4); text-align:left; }
  .trust-link{ justify-self:start; }
  .foot-cta{ flex-direction:column; align-items:flex-start; }
  .foot-cols{ grid-template-columns:repeat(2,1fr); }
  .foot-base{ flex-direction:column; }
  .foot-meta{ text-align:left; }
  .social{ justify-content:flex-start; }
  .slide blockquote{ padding:var(--s8) var(--s6); }
}

@media (max-width: 620px){
  :root{ --s8: 40px; --s9: 56px; }
  .shell{ padding-inline:var(--s4); }
  .hero{ padding-top:var(--s7); }
  .manifest{ padding:var(--s5); }
  .manifest::before,.manifest::after{ display:none; }
  .mrow dd{ font-size:1.25rem; }
  .stop-body{ grid-template-columns:1fr; grid-template-areas:"tag" "head" "points" "cta"; }
  .rail{ padding-left:52px; }
  .rail-line{ left:19px; }
  .stop-num{ left:-52px; width:40px; height:40px; font-size:.8rem; }
  .chan-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--s3); }
  /* Below ~430px a side-by-side mark leaves roughly 78px for the label,
     which wraps the longest names into a ragged four-line stack. Putting
     the mark above the text hands the full card width back to the name. */
  .chan{
    flex-direction:column; align-items:flex-start;
    min-height:0; padding:var(--s4); gap:10px;
  }
  .chan-mark{ width:38px; height:38px; font-size:.8rem; border-radius:9px; }
  .chan-name{ font-size:.94rem; }
  .chan-kind{ font-size:.625rem; letter-spacing:.1em; }
  /* Hover lift is meaningless on touch and can cause a sticky :hover state. */
  .chan:hover{ transform:none; }
  .chan::before{ display:none; }
  .cat-grid{ grid-template-columns:1fr; }
  .svc-grid,
  .post-grid,
  .leader-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .form{ padding:var(--s5); }
  .about-facts{ gap:var(--s6); }
  .stat-grid{ grid-template-columns:1fr; }
  .lb-panel{ padding:var(--s7) var(--s5) var(--s5); }
  .fab{ right:14px; bottom:14px; }
}

@media print{
  .site-header,.fab,.drawer,.carousel-ui{ display:none; }
  body{ color:#000; background:#fff; }
}

/* ---------------------------------------------------------------
   24. SOFTWARE SERVICES & GLOBAL OFFICES

   Structure only, as with the rest of this file — every colour below
   resolves from a variable declared in theme.css section 1.
   --------------------------------------------------------------- */

/* --- 24.1 Icon system -----------------------------------------------
   The sprite itself must not take up layout space, and must not be
   display:none on the <svg> in a way that breaks <use> in older Safari,
   so it is clipped to zero instead.                                    */
.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* One class drives every icon. Size is overridable per context; colour
   is inherited from the parent, which is what lets the same glyph sit on
   a wash, on a card and in the footer without a second rule.           */
.tico{
  width:20px; height:20px; flex:0 0 auto;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}

/* --- 24.2 Wide mega menu --------------------------------------------
   A 3-column panel centred on its own button would run off the left of
   the viewport, because the button sits well left of centre. Making the
   <li> static and .nav relative anchors the panel to the nav instead.  */
.nav{ position:relative; }
.has-mega-wide{ position:static; }
.mega-wide{
  width:min(860px, calc(100vw - 40px));
  left:0; transform:none;
}
.mega-cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s5); }
.mega-col-h{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.14em;
  text-transform:uppercase; color:var(--red); margin:0 0 var(--s3); padding-inline:12px;
}
.mega-col-h .tico{ width:16px; height:16px; }
.mega-list{ list-style:none; margin:0; padding:0; }
.mega-list a{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:var(--r-md); text-decoration:none;
  font-size:.9rem; color:var(--ink);
  transition:background .15s var(--ease), color .15s var(--ease);
}
.mega-list a:hover{ background:var(--fog); color:var(--red); }
.mega-list .tico{ color:var(--slate); transition:color .15s var(--ease); }
.mega-list a:hover .tico{ color:var(--red); }
.mega-foot{
  display:inline-block; margin-top:var(--s4); padding:10px 12px 0;
  border-top:1px solid var(--line); width:100%;
  font-size:var(--t-small); font-weight:600; color:var(--red); text-decoration:none;
}

/* --- 24.3 Drawer icon rows ------------------------------------------
   `.drawer a` sets display:block at (0,1,1), so these need the parent
   in the selector to win — a bare .drawer-ico loses and the icon stacks
   above the label. */
.drawer .drawer-ico{ display:flex; align-items:center; gap:10px; }
.drawer .drawer-ico .tico{ width:18px; height:18px; color:var(--slate); }
.drawer .drawer-sub{ padding-left:var(--s5); font-size:var(--t-small); }

/* --- 24.4 Practice cards -------------------------------------------- */
.svc-more{
  display:inline-block; margin-top:var(--s4);
  font-size:var(--t-small); font-weight:600; color:var(--red); text-decoration:none;
}
.svc-more:hover{ text-decoration:underline; }

.sw-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s5); }
.sw{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6);
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.sw:hover{ border-color:var(--ink); transform:translateY(-3px); box-shadow:0 16px 36px rgba(var(--ink-rgb), .08); }
.sw-ico{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:var(--s5);
  border-radius:var(--r-md); background:var(--red-wash); color:var(--red);
}
.sw-ico .tico{ width:22px; height:22px; }
.sw h3{ font-size:1.05rem; margin-bottom:var(--s3); }
.sw > p{ font-size:var(--t-small); color:var(--slate); margin:0 0 var(--s5); }
.sw-list{ list-style:none; margin:0; padding:var(--s5) 0 0; border-top:1px solid var(--line); }
.sw-list li{
  display:flex; align-items:center; gap:10px;
  font-size:var(--t-small); font-weight:500; padding-block:7px;
}
.sw-list .tico{ width:18px; height:18px; color:var(--red); }

/* --- 24.5 Technology strip ------------------------------------------ */
.tech{
  margin-top:var(--s7); padding:var(--s6);
  background:var(--fog); border:1px solid var(--line); border-radius:var(--r-lg);
}
.tech-h{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:var(--red); margin:0 0 var(--s5);
}
.tech-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:var(--s3);
}
.tech-grid li{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line);
  font-size:var(--t-small); font-weight:500;
  transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.tech-grid li:hover{ border-color:var(--red); transform:translateY(-2px); }
.tech-grid .tico{ color:var(--red); }
.tech-cta{ margin-top:var(--s5); }

/* --- 24.6 Offices ---------------------------------------------------- */
.offices{ background:var(--fog); }
.office-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--s5); }
.office{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s6); display:flex; flex-direction:column;
  transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.office:hover{ border-color:var(--ink); transform:translateY(-3px); box-shadow:0 16px 36px rgba(var(--ink-rgb), .08); }
.office-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s5); }
.office-ico{
  display:grid; place-items:center; width:38px; height:38px;
  border-radius:var(--r-md); background:var(--red-wash); color:var(--red);
}
.office-ico .tico{ width:20px; height:20px; }
.office-code{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.16em;
  padding:5px 9px; border-radius:var(--r-sm);
  background:var(--fog); color:var(--slate);
}
.office h3{ font-size:1.02rem; margin-bottom:6px; }
.office-city{ font-size:var(--t-small); color:var(--slate); margin:0 0 var(--s4); }
.office address{
  font-style:normal; font-size:var(--t-small); line-height:1.55;
  padding-bottom:var(--s4); border-bottom:1px solid var(--line); margin-bottom:var(--s4);
}
.office-tbd{ color:var(--slate); }
.office-meta{ list-style:none; margin:0 0 var(--s5); padding:0; }
.office-meta li{
  font-size:var(--t-small); color:var(--slate); padding-block:3px;
}
.office-meta li:first-child{ font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.06em; }
.office-link{
  margin-top:auto; font-size:var(--t-small); font-weight:600;
  color:var(--red); text-decoration:none;
}
.office-link:hover{ text-decoration:underline; }

/* --- 24.7 Footer address block --------------------------------------
   Two addresses sat happily in a flex row. Six do not, so this becomes a
   grid that wraps predictably instead of leaving one orphan on line two. */
.foot-addr{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:var(--s5) var(--s6); flex:1 1 620px;
}
.foot-addr a{ color:var(--slate); text-decoration:underline; }
.foot-addr a:hover{ color:var(--red); }

/* --- 24.8 Responsive ------------------------------------------------- */
@media (max-width: 1080px){
  .sw-grid,
  .office-grid{ grid-template-columns:repeat(2, 1fr); }
  .mega-wide{ width:min(680px, calc(100vw - 40px)); }
  .mega-cols{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 620px){
  .sw-grid,
  .office-grid{ grid-template-columns:1fr; }
  .tech-grid{ grid-template-columns:1fr; }
  .tech{ padding:var(--s5); }
  /* Hover lift is meaningless on touch and leaves a sticky state. */
  .sw:hover,
  .office:hover,
  .tech-grid li:hover{ transform:none; }
}

/* --- 24.9 Nav breakpoint --------------------------------------------
   Four top-level items fitted at 1000px; five do not — "Success Stories"
   wraps to two lines somewhere around 1080. Only the nav swap moves up;
   every other rule in the 900px block above is still correct at 900,
   so this overrides those two declarations and nothing else. Keep the
   two innerWidth guards in js/main.js in step with this number.
   --------------------------------------------------------------- */
@media (max-width: 1080px){
  .nav{ display:none; }
  .burger{ display:flex; }
}