/* ==========================================================================
   GSL Automations - site stylesheet
   Brand: deep navy + teal. Email-first contact, no phone number published.
   Contrast: every text style meets WCAG 2.1 AA.
   ========================================================================== */

/* -- Design tokens --------------------------------------------------------- */
:root{
  /* Both schemes are built from these. `color-scheme` tells the engine that the
     page handles light AND dark, so form controls, scrollbars and the caret
     follow the visitor's system setting instead of being forced light. */
  color-scheme:light dark;

  --navy:#15304C;          /* primary brand surface            */
  --navy-2:#0E1F33;        /* deepest surface (hero, footer)   */
  --navy-3:#1B3A5C;
  --navy-4:#22496F;        /* hairlines on navy                */
  --teal:#39C5CF;          /* accent, large text on navy       */
  --teal-2:#2EA0E8;
  --teal-ink:#0E6B74;      /* accent text on the current surface (6.2:1 on white) */

  --white:#ffffff;
  --off:#F5F8FB;
  --off-2:#EBF2F8;
  --line:#D9E3ED;

  --text:#16242F;
  --body:#42566A;          /* 7.3:1 on white */
  --muted:#5A6B7D;         /* 5.5:1 on white */
  --on-navy:#C7D7E5;       /* 9.2:1 on --navy */
  --on-navy-dim:#9FB3C7;   /* 7.7:1 on --navy-2 */

  --shadow-sm:0 1px 2px rgba(11,30,51,.05),0 4px 14px -6px rgba(11,30,51,.08);
  --shadow:0 1px 2px rgba(11,30,51,.05),0 18px 40px -12px rgba(11,30,51,.16);
  --radius:14px;
  --radius-lg:22px;
  --maxw:1140px;
  --sans:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;

  /* -- Role tokens (2026-09-23) --------------------------------------------
     These name what a colour is FOR rather than which brand colour it is, so
     the dark scheme can be one block of overrides instead of a second
     stylesheet. Every light value here is the literal the page shipped before
     this layer existed, so nothing above the fold moves in light mode. Brand
     surfaces (hero, the navy sections, the footer, the teal button) are the
     same in both schemes: they are the brand, not a scheme. */
  --surface:var(--white);            /* cards, panels, form plate       */
  --surface-input:#FBFDFF;           /* form fields                     */
  --hairline:var(--line);            /* borders on page surfaces        */
  --ink:var(--navy);                 /* headings and labels             */
  --accent-plate:#05222B;            /* text on the teal plate          */
  --on-brand:#ffffff;                /* text on a brand surface         */
  --on-brand-panel:rgba(255,255,255,.06);       /* panel fill on navy  */
  --on-brand-panel-hover:rgba(255,255,255,.1);
  --on-brand-hairline:rgba(255,255,255,.14);    /* borders on navy     */
  --on-brand-ring:rgba(255,255,255,.55);        /* ghost button border */
  --glow:radial-gradient(circle,rgba(57,197,207,.22),transparent 68%);
  --badge-ring:rgba(57,197,207,.45);
  --after-plate:rgba(57,197,207,.3);
  --tile-ring:rgba(57,197,207,.38);
  --accent-ring-strong:rgba(14,107,116,.4);
  --accent-ring:rgba(14,107,116,.35);
  --accent-ring-soft:rgba(14,107,116,.32);
  --header-bg:rgba(255,255,255,.96);
  --header-bg-scrolled:rgba(255,255,255,.86);
  --header-hairline-scrolled:rgba(217,227,237,.65);
  --shadow-header-scrolled:0 10px 30px rgba(11,30,51,.07);
  --shadow-nav:0 18px 28px rgba(11,30,51,.08);
  /* 2026-09-30 refresh: the eyebrow chip, the nav pill, the tick chip, the
     hero grid texture and the frosted panel's inner highlight. */
  --chip-bg:rgba(14,107,116,.08);
  --nav-track:rgba(21,48,76,.06);
  --tick-plate:rgba(57,197,207,.16);
  --hero-grid-line:rgba(255,255,255,.045);
  --panel-highlight:rgba(255,255,255,.1);
  --mask-solid:#000;

  /* -- Type and space ramps (2026-09-23) -----------------------------------
     A modest step up on the display sizes, plus the tokens the rest of the
     sheet reads, so a future change is one edit rather than a hunt. */
  --fs-h1:clamp(2.6rem,5.4vw,4.2rem);
  --fs-h2:clamp(2rem,3.7vw,3rem);
  --fs-lead:clamp(1.1rem,1.35vw,1.22rem);
  --fs-body:1rem;
  --lh-tight:1.05;
  --section-y:clamp(4.5rem,8.2vw,7.8rem);
  --gutter:24px;
  --sp-sm:1rem;
  --sp-md:1.5rem;

  /* Motion tokens (2026-09-19 polish layer). Durations are deliberately short:
     this is a business site, so motion should read as responsiveness, not as a
     showreel. */
  --dur-1:180ms;                     /* micro-interactions: hover, press       */
  --dur-2:320ms;                     /* state changes: header, accordion       */
  --dur-3:680ms;                     /* entrances: reveal-on-scroll            */
  --dur-4:560ms;                     /* entrances: hero, on load               */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --stagger:80ms;
}

/* -- Reset & base ---------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--body);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0;letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}

/* -- Layout primitives ----------------------------------------------------- */
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.section--tint{background:var(--off)}
.section--navy{background:var(--navy);color:var(--on-navy)}
.section--navy h2,.section--navy h3{color:var(--on-brand)}
.section-head{max-width:720px;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{
  display:inline-block;
  padding:.32rem .75rem;border-radius:999px;background:var(--chip-bg);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--teal-ink);
  margin-bottom:1rem;
}
.section--navy .eyebrow{color:var(--teal);background:var(--on-brand-panel)}
.section-title{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.03em;line-height:1.12}
.section-sub{margin-top:1rem;max-width:60ch;font-size:clamp(1.02rem,1.2vw,1.12rem);color:var(--muted)}
.section--navy .section-sub{color:var(--on-navy)}
.lead{font-size:1.1rem}

/* -- Accessibility helpers ------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--navy);color:var(--on-brand);padding:.8rem 1.2rem;
  border-radius:0 0 var(--radius) 0;font-weight:600;
}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--teal-2);outline-offset:2px;border-radius:4px}
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* -- Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.5rem;border-radius:999px;border:2px solid transparent;
  font-weight:600;font-size:.97rem;line-height:1.2;cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),
             box-shadow var(--dur-1) var(--ease-out);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--teal);color:var(--accent-plate)}
.btn-primary:hover{background:var(--teal-2);color:var(--on-brand)}
.btn-ghost{border-color:var(--hairline);color:var(--ink);background:var(--surface)}
.btn-ghost:hover{border-color:var(--teal-ink);color:var(--teal-ink)}
.btn-on-navy{border-color:var(--on-brand-ring);color:var(--on-brand)}
.btn-on-navy:hover{background:var(--on-brand);color:var(--navy);border-color:var(--on-brand)}
.btn-sm{padding:.6rem 1.1rem;font-size:.9rem}
.btn-arrow{width:18px;height:18px;flex:0 0 18px;transition:transform var(--dur-1) var(--ease-out)}
.btn:hover .btn-arrow{transform:translateX(3px)}

/* -- Header ---------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:var(--header-bg);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
  transition:background-color var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px}
.brand{display:flex;align-items:center;gap:.7rem}
.brand img{height:40px;width:auto}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links a{font-size:.93rem;font-weight:600;color:var(--ink)}
.nav-links a:not(.nav-cta){padding:.45rem .8rem;border-radius:999px;transition:background-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.nav-links a:not(.nav-cta):hover{color:var(--teal-ink);background:var(--nav-track)}
.nav-links a.nav-cta{margin-left:.35rem}
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);cursor:pointer;
}
.nav-toggle svg{width:20px;height:20px}

/* -- Hero ------------------------------------------------------------------ */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy) 0%,var(--navy-2) 78%);
  color:var(--on-navy);
  padding:clamp(4.4rem,8vw,7rem) 0 clamp(4rem,7vw,6rem);
}
.hero::after{
  content:"";position:absolute;right:-160px;top:-120px;width:520px;height:520px;
  border-radius:50%;pointer-events:none;
  background:var(--glow);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--hero-grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--hero-grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 75% 80% at 70% 20%,var(--mask-solid),transparent 75%);
  mask-image:radial-gradient(ellipse 75% 80% at 70% 20%,var(--mask-solid),transparent 75%);
}
.hero > .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:3.2rem;align-items:center}
.hero-badge{
  display:inline-block;padding:.4rem .85rem;border-radius:999px;
  border:1px solid var(--badge-ring);color:var(--teal);
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.hero h1{
  margin:1.3rem 0 1.3rem;font-weight:700;color:var(--on-brand);
  font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:-.038em;
}
.hero h1 .accent{color:var(--teal)}
.hero .lead{max-width:34rem;color:var(--on-navy);font-size:var(--fs-lead)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.hero-facts{display:flex;flex-wrap:wrap;gap:1.6rem 2.4rem;margin-top:2.6rem;padding-top:1.9rem;border-top:1px solid var(--navy-4)}
.hero-facts .fact{max-width:15rem}
.hero-facts .fact b{display:block;color:var(--on-brand);font-size:.98rem}
.hero-facts .fact span{font-size:.88rem;color:var(--on-navy-dim)}

/* -- Demo panel (the hero visual) ------------------------------------------ */
.demo-panel{
  background:var(--on-brand-panel);
  border:1px solid var(--on-brand-hairline);
  border-radius:var(--radius-lg);
  padding:.6rem 1.5rem 1.4rem;
  box-shadow:inset 0 1px 0 var(--panel-highlight);
  backdrop-filter:blur(14px);
}
.demo-rows{display:grid}
.demo-row{display:flex;align-items:center;gap:.8rem;padding:.85rem 0;font-size:.93rem;color:var(--on-navy)}
.demo-row + .demo-row{border-top:1px solid var(--on-brand-hairline)}
.demo-row .tick{flex:0 0 24px;width:24px;height:24px;padding:4px;border-radius:50%;background:var(--tick-plate);color:var(--teal)}
.demo-foot{margin-top:.4rem;padding-top:1rem;border-top:1px solid var(--on-brand-hairline);font-size:.85rem;color:var(--on-navy-dim)}

/* -- Before/after illustration --------------------------------------------- */
.compare{display:grid;grid-template-columns:1fr auto 1fr;gap:1.4rem;align-items:stretch}
.compare-col{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow-sm)}
.compare-col h3{font-size:1.05rem;margin-bottom:.3rem}
.compare-col .meta{font-size:.85rem;color:var(--muted);margin-bottom:1.1rem}
.compare-col--after{border-color:var(--accent-ring);box-shadow:var(--shadow)}
.compare-col ol{counter-reset:step;display:grid;gap:.6rem}
.compare-col li{position:relative;padding-left:2rem;font-size:.94rem}
.compare-col li::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:.2rem;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--off-2);color:var(--ink);font-size:.75rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.compare-col--after li::before{background:var(--after-plate);color:var(--teal-ink)}
.compare-arrow{display:flex;align-items:center;justify-content:center;color:var(--teal-ink);font-size:1.5rem}
.compare-note{margin-top:var(--sp-md);font-size:.86rem;color:var(--muted)}

/* -- Workflow diagram (2026-09-23) --------------------------------------- */
/* A self-hosted SVG rather than an inline one: the host sends no cache
   validators for the HTML, while assets carry ETag and Last-Modified, so the
   file is fetched once and revalidated afterwards. It carries its own
   dark-scheme block, because an image document cannot read these variables. */
.flow{margin:0 0 var(--sp-md);background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:1.4rem;box-shadow:var(--shadow-sm)}
.flow-img{width:100%;height:auto}

/* -- Process steps --------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;position:relative}
.steps::before{
  content:"";position:absolute;left:2rem;right:2rem;top:calc(1.6rem + 18px);height:2px;
  background:linear-gradient(90deg,var(--teal),var(--teal-2));opacity:.45;
}
.step{position:relative;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow-sm)}
.step-n{
  width:36px;height:36px;border-radius:10px;margin-bottom:1rem;
  background:linear-gradient(135deg,var(--teal),var(--teal-2));color:var(--accent-plate);
  font-weight:700;display:flex;align-items:center;justify-content:center;
}
.step h3{font-size:1.04rem;margin-bottom:.45rem}
.step p{font-size:.94rem}
.step .dur{display:block;margin-top:.75rem;font-size:.82rem;font-weight:600;color:var(--teal-ink)}

/* -- Cards (services) ------------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:1.3rem}
.card{grid-column:span 2;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:1.7rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-out);
}
.card:hover{border-color:var(--accent-ring-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.card:nth-child(-n+2){grid-column:span 3}
.card:nth-child(-n+2) h3{font-size:1.22rem}
.card:nth-child(-n+2) p{font-size:1rem}
.card .icon{
  width:46px;height:46px;border-radius:12px;margin-bottom:1.05rem;
  background:var(--off-2);color:var(--teal-ink);
  display:flex;align-items:center;justify-content:center;
  transition:transform var(--dur-2) var(--ease-out);
}
.card:hover .icon{transform:scale(1.07)}
.card .icon svg{width:22px;height:22px}
.card h3{font-size:1.06rem;margin-bottom:.5rem}
.card p{font-size:.95rem}
.card .replaces{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--hairline);font-size:.85rem;color:var(--muted)}

/* -- Industry tiles -------------------------------------------------------- */
/* A sideways row that snaps card by card. It is layout, not motion: native
   scrolling works with no script, and site.js only adds the two paddles. */
.tiles{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2.2rem) / 3.25);gap:1.1rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  padding:.4rem 0 1.1rem;scrollbar-width:thin;scrollbar-color:var(--on-brand-ring) transparent;
}
.tiles:focus-visible{outline-offset:6px}
.tile{scroll-snap-align:start;
  background:var(--on-brand-panel);border:1px solid var(--on-brand-hairline);
  border-radius:var(--radius);padding:1.25rem;
  transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),
             background-color var(--dur-2) var(--ease-out);
}
.tile:hover{transform:translateY(-2px);border-color:var(--tile-ring);background:var(--on-brand-panel-hover)}
.tile h3{font-size:.99rem;margin-bottom:.35rem}
.tile p{font-size:.9rem;color:var(--on-navy-dim)}

/* -- Why-us grid ----------------------------------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 3.2rem;counter-reset:why}
.why-item{border-top:1px solid var(--hairline);padding:1.6rem 0 1.8rem}
.why-item::before{
  counter-increment:why;content:"0" counter(why);display:block;margin-bottom:.7rem;
  font-size:.8rem;font-weight:700;letter-spacing:.12em;color:var(--teal-ink);font-variant-numeric:tabular-nums;
}
.why-item h3{font-size:1.14rem;margin-bottom:.45rem}
.why-item p{font-size:.96rem;max-width:34rem}

/* -- FAQ ------------------------------------------------------------------- */
.faq{max-width:840px;margin:0 auto;display:grid;gap:.85rem}
.faq details{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.faq summary{
  cursor:pointer;padding:1.15rem 1.35rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:700;color:var(--teal-ink);font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"-"}
.faq .answer{padding:0 1.35rem 1.25rem;font-size:.96rem}
.faq .answer p + p{margin-top:.7rem}

/* -- Contact --------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.contact-block{display:grid;gap:1.15rem;margin-top:1.6rem}
.contact-line{display:flex;gap:.9rem;align-items:flex-start}
.contact-line .ci{
  flex:0 0 42px;width:42px;height:42px;border-radius:11px;
  background:var(--off-2);color:var(--teal-ink);
  display:flex;align-items:center;justify-content:center;
}
.contact-line .ci svg{width:20px;height:20px}
.contact-line b{display:block;color:var(--ink);font-size:.95rem;font-weight:600}
.contact-line span,.contact-line a{font-size:.94rem}
.mail-row{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.mail-address{font-weight:600;color:var(--ink);word-break:break-all}
.promise{
  background:var(--off);border:1px solid var(--hairline);border-left:3px solid var(--teal);
  border-radius:var(--radius);padding:1.1rem 1.25rem;font-size:.93rem;
}
.promise b{color:var(--ink)}
.included{display:grid;gap:.5rem;margin-top:var(--sp-md)}
.included li{position:relative;padding-left:1.7rem;font-size:.94rem}
.included li::before{content:"\2713";position:absolute;left:0;color:var(--teal-ink);font-weight:700}

.form{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:1.7rem;box-shadow:var(--shadow)}
.form label{display:block;font-size:.86rem;font-weight:600;color:var(--ink);margin:1rem 0 .35rem}
.form label:first-of-type{margin-top:0}
.form input,.form textarea{
  width:100%;padding:.72rem .9rem;border:1px solid var(--hairline);border-radius:10px;
  font:inherit;font-size:.96rem;color:var(--text);background:var(--surface-input);
}
.form input:focus,.form textarea:focus{outline:2px solid var(--teal-2);border-color:transparent}
.form .btn{width:100%;margin-top:1.3rem;border:0}
.form-note{margin-top:.9rem;font-size:.82rem;color:var(--muted);text-align:center}
.form-note a{color:var(--teal-ink);font-weight:600}
.status{margin-top:1rem;font-size:.88rem;color:var(--teal-ink);font-weight:600;min-height:1.2rem}

/* -- Legal / data statement ------------------------------------------------ */
.legal{background:var(--off-2)}
.legal-inner{max-width:840px}
.legal h2{font-size:1.25rem;margin-bottom:.9rem}
.legal p{font-size:.94rem}
.legal p + p{margin-top:.8rem}

/* -- Footer ---------------------------------------------------------------- */
.site-footer{background:var(--navy-2);color:var(--on-navy-dim);padding:3.4rem 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
.foot-brand img{height:38px;width:auto;margin-bottom:1rem}
.foot-brand p{font-size:.92rem;max-width:22rem}
.site-footer h3{color:var(--on-brand);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.foot-links{display:grid;gap:.6rem}
.foot-links a{font-size:.93rem}
.foot-links a:hover{color:var(--teal)}
.foot-note{font-size:.88rem;color:var(--on-navy-dim)}
.foot-bottom{
  margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--navy-4);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem;font-size:.86rem;
}
.foot-bottom a{color:var(--teal)}

/* -- Responsive ------------------------------------------------------------ */
@media (max-width:1040px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .tiles{grid-auto-columns:calc((100% - 1.1rem) / 2.15)}
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:2.4rem}
  .hero .lead{max-width:none}
  .compare{grid-template-columns:1fr;gap:1rem}
  .compare-arrow{transform:rotate(90deg);padding:.2rem 0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .card,.card:nth-child(-n+2){grid-column:auto}
  .contact-grid{grid-template-columns:1fr;gap:2.4rem}
  .why-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  html{scroll-padding-top:76px}
  .section{padding:3.6rem 0}
  .hero{padding:3.4rem 0 3.4rem}
  .nav{height:64px}
  .nav-toggle{display:flex}
  .nav-links{
    position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;align-items:stretch;gap:.2rem;
    background:var(--surface);border-bottom:1px solid var(--hairline);
    padding:.8rem 1.5rem 1.3rem;box-shadow:var(--shadow-nav);
  }
  .nav-links[data-open="true"]{display:flex}
  .nav-links a,.nav-links a:not(.nav-cta){padding:.7rem 0;border-radius:0;border-bottom:1px solid var(--off-2)}
  .nav-links a:not(.nav-cta):hover{background:transparent}
  .nav-links a.nav-cta{margin:.7rem 0 0;border-bottom:0}
  .steps,.cards{grid-template-columns:1fr}
  .tiles{grid-auto-columns:84%}
  .foot-grid{grid-template-columns:1fr;gap:1.9rem}
}

/* ==========================================================================
   Polish + motion layer (2026-09-19)
   Structure and copy are unchanged; this refines type, space and motion only.
   Two rules keep the motion safe:
     * It is opt-in. `html.motion-ok` is added by the inline head script only
       when IntersectionObserver exists AND the visitor has not asked for
       reduced motion. assets/site.js is the only place that sets a hidden start
       state, and it sits in the same file as the code that reveals it again - so
       a script that never runs leaves the page fully visible.
     * The header never changes height, so scrolling cannot shift the layout.
   ========================================================================== */

/* -- Type refinement ------------------------------------------------------- */
/* `balance` is deliberately NOT applied to h1: with a hyphenated headline it
   breaks inside the word ("45- / minute"), which is the one thing a display
   line must never do. `pretty` only avoids orphans, so the line breaks stay at
   spaces. */
h1{text-wrap:pretty}
h2,h3{text-wrap:balance}
p{text-wrap:pretty}

/* -- Hero: slow background drift ------------------------------------------- */
@keyframes gsl-glow-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-16px,12px,0) scale(1.05)}
}
html.motion-ok .hero::after{animation:gsl-glow-drift 20s var(--ease-in-out) infinite}

/* -- Header scrolled state + scroll progress (paint only, no layout) ------- */
html.is-scrolled .site-header{
  background:var(--header-bg-scrolled);
  border-bottom-color:var(--header-hairline-scrolled);
  box-shadow:var(--shadow-header-scrolled);
}
html.motion-ok .site-header::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  transform:scaleX(var(--scroll-progress,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--teal),var(--teal-2));
  opacity:0;transition:opacity var(--dur-2) var(--ease-out);
}
html.motion-ok.is-scrolled .site-header::after{opacity:1}

/* -- Navigation: the current section wears the hover pill ------------------ */
.nav-links a[aria-current="true"]{color:var(--teal-ink);background:var(--nav-track)}

/* -- Contact: address hover ------------------------------------------------ */
.mail-address{transition:color var(--dur-1) var(--ease-out)}
.mail-address:hover{color:var(--teal-ink)}

/* -- Reveal on scroll (opt-in; see the layer banner) ----------------------- */
/* Time-based, never scroll-scrubbed (owner review, 2026-09-30): a reveal tied to
   the scroll position finished inside one wheel notch at the bottom edge of a
   tall screen, so it read as no animation at all. site.js starts each one once
   the element is a fifth of the way up the screen, and it then plays in full. */
html.motion-ok [data-reveal]{
  opacity:0;transform:translate3d(0,40px,0) scale(.98);
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);
}
html.motion-ok [data-reveal][data-reveal-i="1"]{transition-delay:var(--stagger)}
html.motion-ok [data-reveal][data-reveal-i="2"]{transition-delay:calc(var(--stagger) * 2)}
html.motion-ok [data-reveal].is-in{opacity:1;transform:translate3d(0,0,0) scale(1)}

/* -- Hero entrance (plays on load; the scroll layer above never touches it) --
   Load-driven for the hero, scroll-triggered for everything below: one mechanism
   per element. Gated exactly like the reveal layer - `html.motion-ok` is added
   by the inline head script only when scripting runs and no reduced-motion
   preference is set, so a blocked script, or that preference, leaves the hero
   exactly as it was: fully visible, no animation. */
@media (prefers-reduced-motion: no-preference){
  html.motion-ok .hero-grid > div > *,
  html.motion-ok .demo-row,
  html.motion-ok .demo-foot{
    animation:gsl-rise-in var(--dur-4) var(--ease-out) both;
  }
  html.motion-ok .hero-grid > div > *:nth-child(2){animation-delay:70ms}
  html.motion-ok .hero-grid > div > *:nth-child(3){animation-delay:140ms}
  html.motion-ok .hero-grid > div > *:nth-child(4){animation-delay:210ms}
  html.motion-ok .hero-grid > div > *:nth-child(5){animation-delay:280ms}
  html.motion-ok .demo-row:nth-child(1){animation-delay:210ms}
  html.motion-ok .demo-row:nth-child(2){animation-delay:270ms}
  html.motion-ok .demo-row:nth-child(3){animation-delay:330ms}
  html.motion-ok .demo-row:nth-child(4){animation-delay:390ms}
  html.motion-ok .demo-foot{animation-delay:450ms}
}
@keyframes gsl-rise-in{
  from{opacity:0;transform:translate3d(0,14px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* -- FAQ: smooth open/close where the engine can interpolate height -------- */
@supports selector(details::details-content){
  :root{interpolate-size:allow-keywords}
  .faq details::details-content{
    height:0;overflow:hidden;
    transition:height var(--dur-2) var(--ease-out);
  }
  .faq details[open]::details-content{height:auto}
}

/* -- Motion preferences ---------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important;animation-duration:.001ms !important}
  /* The motion layer is gated on html.motion-ok, which is never added under this
     preference - these rules cover the hover states that would otherwise still
     jump, and the hero drift if a preference change was missed. */
  html.motion-ok .hero::after{animation:none}
  .btn:hover,.btn:active,.card:hover,.tile:hover,.card:hover .icon,.btn:hover .btn-arrow{transform:none}
}

/* ==========================================================================
   Scheme + environment layers (2026-09-23)
   The polish layer above refines type, space and motion. This one answers three
   questions the visitor's own machine asks, and it answers all of them the same
   way: by re-pointing tokens, never by re-specifying a rule. No selector above
   has to know that any of this exists.

   The dark scheme is automatic (`prefers-color-scheme`). There is deliberately
   no toggle: a toggle needs script, a stored preference and state that can get
   out of step with the system setting, and the page's data statement promises no
   cookies, no analytics and no third-party requests. The system preference is
   the one answer that needs none of that.
   ========================================================================== */

/* -- Dark scheme: tokens only, no geometry --------------------------------- */
@media (prefers-color-scheme: dark){
  :root{
    /* Page surfaces and their text. The BRAND surfaces are deliberately not
       re-pointed: the hero, the navy sections, the footer and the teal button
       are the brand, and their text (--on-navy 9.2:1, --on-navy-dim 7.7:1,
       --on-brand 13.5:1, --accent-plate on --teal 7.9:1) already measures AA in
       either scheme. */
    --surface:#111F2D;                  /* cards, panels, form plate     */
    --surface-input:#0D1A26;
    --off:#0C1725;                      /* tinted sections               */
    --off-2:#1A2C42;                    /* icon plates, legal band       */
    --line:#263C52;                     /* hairlines                     */
    --hairline:#263C52;

    --text:#EDF3F8;                     /* 15.7:1 on --surface-input    */
    --body:#C4D2DE;                     /* 10.8:1 on --surface           */
    --muted:#A9BBCC;                    /* 8.5:1 on --surface            */
    --ink:#ffffff;                      /* 16.7:1 on --surface           */
    --teal-ink:#6FD8E1;                 /* 10.0:1 on --surface, 8.5:1 on --off-2 */

    /* Tints and rings move to teal: a teal-INK tint (rgba(14,107,116,...)) is
       invisible over a dark surface, which is what the light values are for. */
    --accent-ring-strong:rgba(111,216,225,.45);
    --accent-ring:rgba(111,216,225,.35);
    --accent-ring-soft:rgba(111,216,225,.32);
    --after-plate:rgba(57,197,207,.3);
    --chip-bg:rgba(111,216,225,.1);
    --nav-track:rgba(255,255,255,.07);

    --header-bg:rgba(11,22,34,.94);
    --header-bg-scrolled:rgba(11,22,34,.88);
    --header-hairline-scrolled:rgba(38,60,82,.7);

    /* A shadow is depth against a lighter surface, so on a dark page it goes
       deeper instead of softer; the light values would read as fog. */
    --shadow-sm:0 1px 2px rgba(0,0,0,.45),0 4px 14px -6px rgba(0,0,0,.5);
    --shadow:0 1px 2px rgba(0,0,0,.45),0 18px 40px -12px rgba(0,0,0,.6);
    --shadow-header-scrolled:0 10px 30px rgba(0,0,0,.55);
    --shadow-nav:0 18px 28px rgba(0,0,0,.5);
  }
}

/* -- Transparency: the blurred header is decoration ------------------------ */
/* With transparency turned down, the sticky header becomes a solid plate rather
   than an unreadable one. Height is untouched, so nothing can shift on scroll
   (that property is what keeps the scroll-progress bar honest). */
@media (prefers-reduced-transparency:reduce){
  .site-header,html.is-scrolled .site-header{backdrop-filter:none;background:var(--surface)}
}

/* -- Contrast: thicker edges, no soft shadows, stronger secondary text ----- */
@media (prefers-contrast:more){
  .card,.step,.compare-col,.faq details,.form{border-width:2px;box-shadow:none}
  .why-item{border-top-width:2px}
  .section-sub,.compare-note,.card .replaces,.foot-note{color:var(--body)}
}

/* -- Rendering details ----------------------------------------------------- */
html{accent-color:var(--teal-ink);-webkit-tap-highlight-color:transparent}
::selection{background:var(--teal);color:var(--accent-plate)}
.form input::placeholder,.form textarea::placeholder{color:var(--muted)}
/* Counted badges and the timing labels sit in columns, so their digits get a
   fixed width and stop shuffling the text beside them. */
.step-n,.compare-col li::before,.step .dur{font-variant-numeric:tabular-nums}

/* ==========================================================================
   Scroll-story layer (2026-09-30)
   Five Apple-style effects, all driven by the one rAF scroll loop in site.js
   (a JS progress value, never a scroll-scrubbed timeline, so Firefox gets the same
   page). Every rule that pins, dims, shrinks or undraws anything is scoped to
   html.motion-ok, so no-JS and reduced-motion visitors get the plain page.
   ========================================================================== */

/* -- 1. Pinned story: the comparison holds still while the steps convert ----
   `story-on` is added by site.js only under motion-ok, on a viewport at least
   921px wide and 640px tall: below that the columns stack, and pinning a tall
   stack would trap a phone visitor. */
.story-rail{display:none}
/* The stage pins for exactly this spacer: 440px, under four wheel notches on any
   screen (a 230vh height held a 1300px screen for ~1,600px and read as a hang).
   A spacer, not padding: sticky only travels within the content box. site.js
   reads the spacer's height as the length of the run. */
html.motion-ok.story-on .story::after{content:"";display:block;height:440px}
html.motion-ok.story-on .story-stage{position:sticky;top:max(calc(72px + 2rem),calc(50vh - 190px))}
html.motion-ok.story-on .story-rail{
  display:block;height:3px;margin-top:1.2rem;border-radius:3px;overflow:hidden;background:var(--hairline);
}
html.motion-ok.story-on .story-rail span{
  display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--story-p,0));
  background:linear-gradient(90deg,var(--teal),var(--teal-2));
}
html.motion-ok.story-on .compare-col li{transition:opacity var(--dur-2) var(--ease-out)}
html.motion-ok.story-on .compare-col li::before{transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
html.motion-ok.story-on .compare-col:not(.compare-col--after) li.is-lit{opacity:.4}
html.motion-ok.story-on .compare-col--after li{opacity:.4}
html.motion-ok.story-on .compare-col--after li.is-lit{opacity:1}
html.motion-ok.story-on .compare-col--after li.is-lit::before{background:var(--teal);color:var(--accent-plate)}

/* -- 2. Statement: words brighten as the sentence scrolls through ---------- */
.statement-band{padding:0 0 var(--section-y)}
.statement{
  max-width:920px;font-size:clamp(1.7rem,3.3vw,2.6rem);font-weight:700;line-height:1.22;
  letter-spacing:-.025em;color:var(--ink);
}
html.motion-ok .statement .word{opacity:.2;transition:opacity var(--dur-2) var(--ease-out)}
html.motion-ok .statement .word.is-lit{opacity:1}

/* -- 3. Industry row paddles ------------------------------------------------ */
.gallery-nav{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.6rem}
.paddle{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:1px solid var(--on-brand-hairline);background:var(--on-brand-panel);
  color:var(--on-brand);cursor:pointer;
  transition:background-color var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out);
}
.paddle[hidden]{display:none}
.paddle:hover:not(:disabled){background:var(--on-brand-panel-hover);border-color:var(--tile-ring)}
.paddle:disabled{opacity:.35;cursor:default}
.paddle svg{width:20px;height:20px}

/* -- 4. Hero recedes as you scroll past it ---------------------------------- */
html.motion-ok .hero-grid > div{
  transform:translate3d(0,calc(var(--hero-p,0) * -36px),0);opacity:calc(1 - var(--hero-p,0) * .55);
}
html.motion-ok .demo-panel{
  transform:translate3d(0,calc(var(--hero-p,0) * 28px),0) scale(calc(1 - var(--hero-p,0) * .08));
  opacity:calc(1 - var(--hero-p,0) * .5);
}

/* -- 5. Starts when seen: the steps connector draws, the badges pop in turn,
   and the hero ticks draw themselves as their rows arrive. ------------------ */
html.motion-ok .steps[data-play]::before{
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.4s var(--ease-out) .1s;
}
html.motion-ok .steps[data-play].is-playing::before{transform:scaleX(1)}
html.motion-ok .steps[data-play] .step-n{
  transform:scale(.4);transition:transform 800ms cubic-bezier(.34,1.56,.64,1);
}
html.motion-ok .steps[data-play].is-playing .step-n{transform:scale(1)}
html.motion-ok .steps[data-play] .step:nth-child(2) .step-n{transition-delay:.3s}
html.motion-ok .steps[data-play] .step:nth-child(3) .step-n{transition-delay:.6s}
html.motion-ok .steps[data-play] .step:nth-child(4) .step-n{transition-delay:.9s}
@media (prefers-reduced-motion: no-preference){
  html.motion-ok .demo-row .tick path{
    stroke-dasharray:24;stroke-dashoffset:24;animation:gsl-tick-draw .5s var(--ease-out) forwards;
  }
  html.motion-ok .demo-row:nth-child(1) .tick path{animation-delay:.45s}
  html.motion-ok .demo-row:nth-child(2) .tick path{animation-delay:.6s}
  html.motion-ok .demo-row:nth-child(3) .tick path{animation-delay:.75s}
  html.motion-ok .demo-row:nth-child(4) .tick path{animation-delay:.9s}
}
@keyframes gsl-tick-draw{to{stroke-dashoffset:0}}