/* ============================================================================
   MEEZABTECH DESIGN SYSTEM
   Source of truth: the LEFT panel of `fina web theam.png`, plus the Final Build
   Control Order v1.0. Contrast figures in these comments were measured with the
   WCAG relative-luminance formula, not estimated.
   ========================================================================= */
:root{
  /* ---- LOCKED SURFACES (order section 19) ---- */
  --bg:#0A1628;                 /* page */
  --bg-deep:#050D1A;            /* the near-black the hero sits on in the source */
  --panel:#1A2A4A;              /* card / panel token */
  --card:#0C1A31;               /* card fill as it reads in the source image */
  --card-2:#101F3A;

  /* ---- LOCKED BRAND ---- */
  --blue:#3182CE;
  --orange:#DD6B20;
  --red:#E53E3E;
  --white:#F8FAFC;
  --ink:#1A202C;                /* dark text where required */

  /* ---- TEXT, measured on --bg / --card ----
     The locked brand colours are strong as FILLS but several fall under 4.5:1
     as small text on these dark surfaces (blue 4.50, red 4.39). So each brand
     colour has a lifted TEXT variant. One token per job: the fill stays exactly
     as locked, the text variant is what carries words. */
  --text:#F8FAFC;               /* 17.33 on bg */
  --text-muted:#9DB2D4;         /*  8.42 */
  --text-dim:#8FA3C4;           /*  7.08 */
  --blue-text:#63B3ED;          /*  7.94 */
  --orange-text:#F6A15C;        /*  8.78 */
  --red-text:#FC8181;           /*  7.42 */

  /* ---- BORDERS ----
     A hairline between blocks is decoration and carries no contrast duty. The
     boundary of an interactive control does: WCAG 1.4.11 wants 3:1. */
  --hairline:rgba(255,255,255,.08);
  --hairline-strong:rgba(255,255,255,.15);
  --card-edge:rgba(120,160,220,.16);
  --border-control:#7E92B3;     /*  5.74 on bg */

  /* ---- PRIMARY BUTTON ----
     The source image shows a red-to-orange gradient carrying WHITE uppercase
     text. White measures 4.00 on #E53E3E and 3.24 on #DD6B20, both under the
     4.5 needed for normal-size text. Rather than alter the approved gradient,
     the label is set at 18.9px/800, which is WCAG "large text" (14pt bold) and
     needs only 3:1. The look is the source image exactly, and it passes. */
  --cta:linear-gradient(96deg,#E53E3E 0%,#DD6B20 100%);
  --cta-hover:linear-gradient(96deg,#F05252 0%,#ED8936 100%);

  /* ---- FOCUS ----
     White, because it is the only ring clearing 3:1 on EVERY surface here
     including the CTA gradient. A blue ring measures 1.48 against the orange
     stop and would vanish exactly where the main call to action lives. */
  --focus:#FFFFFF;
  --focus-w:3px;
  --focus-offset:2px;

  /* ---- TYPE ---- */
  --font:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --fs-hero:clamp(2.15rem,4.6vw,3.75rem);
  --fs-h2:clamp(1.35rem,2.4vw,1.7rem);
  --fs-h3:clamp(1.12rem,1.5vw,1.35rem);
  --fs-body:1rem;
  --fs-sm:.93rem;
  --fs-xs:.79rem;
  --lh-tight:1.1;
  --lh-head:1.22;
  --lh-body:1.62;
  --ls-wide:.13em;

  /* ---- SPACE, 4px base ---- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;
  --s10:40px;--s12:48px;--s16:64px;--s20:80px;

  /* ---- LAYOUT ---- */
  --maxw:1280px;
  --read:60ch;
  --gutter:26px;
  /* The source stacks its sections tightly; two 80px pads between blocks read
     as a much airier page than the image it is meant to match. */
  --section-y:clamp(34px,3.4vw,52px);

  /* ---- RADIUS, ELEVATION, MOTION ---- */
  --r-sm:8px;--r:12px;--r-lg:16px;
  --shadow:0 20px 52px rgba(0,0,0,.45);
  --shadow-sm:0 2px 12px rgba(0,0,0,.32);
  --dur:.2s;--ease:cubic-bezier(.2,.6,.3,1);

  --z-header:100;--z-menu:120;--z-skip:200;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--text-muted);background:var(--bg);-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{color:var(--text);line-height:var(--lh-head);font-weight:700;text-wrap:balance}
h1{font-size:var(--fs-hero);line-height:var(--lh-tight);letter-spacing:-.025em;font-weight:800}
h2{font-size:var(--fs-h2);letter-spacing:-.01em}
h3{font-size:var(--fs-h3)}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;height:auto}
ul{list-style:none}
:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-offset);border-radius:4px}
[hidden]{display:none!important}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.u-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:#0A1628;color:var(--text);
  padding:12px 20px;font-weight:700;border:2px solid var(--red);border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* Section label: a short red rule then the words, exactly as in the source. */
.seclabel{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s8);
  font-size:.98rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.seclabel::before{content:"";width:34px;height:3px;background:var(--red);border-radius:3px;flex:0 0 auto}

/* ============================================================ BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:13px var(--s8);border-radius:var(--r-sm);
  font-family:inherit;font-size:1.18rem;font-weight:800;line-height:1.1;
  letter-spacing:.03em;text-transform:uppercase;
  border:2px solid transparent;cursor:pointer;text-align:center;
  transition:filter var(--dur) var(--ease),background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
.btn svg{flex:0 0 auto}
.btn--primary{background:var(--cta);color:#fff}
.btn--primary:hover{background:var(--cta-hover)}
.btn--primary:active{filter:brightness(.92)}
/* A secondary button IS its border, so that border must clear 1.4.11 (3:1).
   The order specifies a blue treatment; the source shows a dark outlined pill.
   Both are satisfied: the source's shape and darkness, in the brand blue. */
.btn--secondary{background:rgba(10,22,40,.6);color:var(--text);border-color:var(--blue-text)}
.btn--secondary:hover{background:rgba(49,130,206,.16);border-color:var(--text)}
.btn--secondary svg{color:var(--blue-text)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* ============================================================ HEADER */
.header{position:sticky;top:0;z-index:var(--z-header);background:rgba(6,14,28,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.header.is-stuck{border-bottom-color:var(--hairline-strong);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;gap:var(--s6);min-height:74px;position:relative}
/* The logo is a link, so it carries the 44px target minimum like any other. */
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;min-height:44px}
.brand__mark{width:40px;height:40px;flex:0 0 auto}
.brand__name{font-weight:800;font-size:1.16rem;color:var(--text);letter-spacing:.02em;line-height:1}
.brand__name i{font-style:normal;color:var(--red-text)}
.brand__tag{display:block;font-size:.56rem;letter-spacing:.2em;color:var(--text-dim);
  text-transform:uppercase;font-weight:600;margin-top:4px}
.nav__links{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav__links a{display:flex;align-items:center;min-height:44px;padding:8px 15px;border-radius:var(--r-sm);
  font-size:.95rem;font-weight:600;color:var(--text-muted);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav__links a:hover{color:var(--text);background:rgba(255,255,255,.06)}
/* Current page is marked by more than colour: colour alone fails 1.4.1. */
.nav__links a[aria-current="page"]{color:var(--red-text);box-shadow:inset 0 -3px 0 var(--red)}
.nav__actions{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto;margin-inline-start:auto}
.nav__cta{min-height:46px;padding:11px var(--s5);font-size:.92rem;letter-spacing:.05em}
.burger{display:none;width:46px;height:46px;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;background:transparent;border:1px solid var(--border-control);border-radius:var(--r-sm);cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ============================================================ 1. HERO */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,5vw,68px) clamp(28px,4vw,52px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,3vw,48px);align-items:center}
.hero__eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:var(--fs-xs);
  font-weight:700;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--text);
  margin-bottom:var(--s6)}
.hero__eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 12px rgba(49,130,206,.9);flex:0 0 auto}
.hero h1{margin-bottom:var(--s6)}
.hero h1 .l-red{color:var(--red-text)}
.hero h1 .l-orange{color:var(--orange-text)}
.hero__lead{font-size:1.08rem;max-width:34ch;color:var(--text-muted);margin-bottom:var(--s10)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:var(--s4)}
.hero__fig{position:relative;min-width:0}
.herofig{display:block;width:100%;height:auto}

/* ============================================================ 2. TRUST BAR */
.trust{border-block:1px solid var(--hairline);background:rgba(8,18,34,.5)}
.trust__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.tr{display:flex;align-items:center;gap:var(--s4);padding:var(--s6) var(--s6);min-width:0}
.tr + .tr{border-inline-start:1px solid var(--hairline)}
.tr svg{width:34px;height:34px;flex:0 0 auto}
.tr b{display:block;color:var(--text);font-size:1rem;font-weight:700;line-height:1.25}
.tr span{display:block;color:var(--text-dim);font-size:var(--fs-xs);line-height:1.4;margin-top:3px}
.tr--red svg{color:var(--red)}
.tr--blue svg{color:var(--blue)}
.tr--orange svg{color:var(--orange)}

/* ============================================================ 3. SOLUTIONS */
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s4)}
.card{position:relative;display:flex;flex-direction:column;background:var(--card);
  border:1px solid var(--card-edge);border-radius:var(--r);padding:var(--s6) var(--s5) var(--s5);
  min-width:0;transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{border-color:rgba(120,160,220,.34);transform:translateY(-3px)}
.card__icon{position:relative;width:64px;height:64px;display:grid;place-items:center;margin-bottom:var(--s5)}
.card__icon::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.16}
.card__icon svg{position:relative;width:40px;height:40px}
.card h3{margin-bottom:var(--s3);text-wrap:pretty}
.card p{font-size:var(--fs-sm);color:var(--text-muted);margin-bottom:var(--s5)}
.card__more{margin-top:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:.83rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.card__more svg{width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.card:hover .card__more svg,.card__more:hover svg{transform:translateX(4px)}
.card--red .card__icon svg{color:var(--red)}
.card--red .card__icon::before{background:var(--red)}
.card--red .card__more{color:var(--red-text)}
.card--blue .card__icon svg{color:var(--blue)}
.card--blue .card__icon::before{background:var(--blue)}
.card--blue .card__more{color:var(--blue-text)}
.card--orange .card__icon svg{color:var(--orange)}
.card--orange .card__icon::before{background:var(--orange)}
.card--orange .card__more{color:var(--orange-text)}
/* Card five in the source: red icon, orange link. */
.card--red.is-altlink .card__more{color:var(--orange-text)}

/* ============================================================ 4. INDUSTRIES */
.inds{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s3)}
.ind{position:relative;overflow:hidden;background:var(--card-2);border:1px solid var(--card-edge);
  border-radius:var(--r);padding:var(--s6) var(--s5) var(--s5);min-width:0;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.ind:hover{border-color:rgba(120,160,220,.34);transform:translateY(-3px)}
.ind svg{width:42px;height:42px;color:var(--text);margin-bottom:var(--s5)}
.ind h3{font-size:1.04rem;margin-bottom:var(--s2)}
.ind p{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.5}

/* ============================================================ 5. STATS BAND
   The order forbids publishing unconfirmed figures AND forbids showing an
   internal status like "awaiting confirmation" to the public. So the band keeps
   its exact composition — one bordered panel, divided columns, brand accents —
   and each column carries the approved label with a true descriptor beneath.
   The numeral drops in above the label the day the figures are confirmed. */
.statband{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--card-edge);border-radius:var(--r);overflow:hidden;background:var(--card)}
.stat{padding:var(--s8) var(--s5);text-align:center;min-width:0}
.stat + .stat{border-inline-start:1px solid var(--hairline)}
.stat b{display:block;font-size:clamp(1.15rem,1.9vw,1.5rem);font-weight:800;letter-spacing:-.01em;line-height:1.2}
.stat span{display:block;font-size:var(--fs-sm);color:var(--text-muted);margin-top:var(--s2)}
.stat--red b{color:var(--red-text)}
.stat--orange b{color:var(--orange-text)}

/* ============================================================ 6. FOOTER */
.footbar{border-top:1px solid var(--hairline);background:rgba(6,14,28,.72)}
.footbar__in{display:flex;align-items:center;gap:var(--s8);flex-wrap:wrap;padding-block:var(--s8)}
.ffact{display:flex;align-items:center;gap:var(--s3);min-width:0}
.ffact svg{width:26px;height:26px;color:var(--text-dim);flex:0 0 auto}
.ffact b{display:block;color:var(--text);font-size:.95rem;font-weight:700;line-height:1.25}
.ffact span,.ffact a{display:block;color:var(--text-dim);font-size:var(--fs-xs);line-height:1.5}
.ffact a{display:flex;align-items:center;min-height:44px;color:var(--text-muted)}
.ffact a:hover{color:var(--text);text-decoration:underline}
.footbar .btn{margin-inline-start:auto}
.footbar__in{padding-bottom:var(--s6)}
.footnote{border-top:1px solid var(--hairline);padding-block:var(--s2) var(--s4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--text-dim)}
.footnote__contact{display:flex;align-items:center;gap:var(--s6);flex-wrap:wrap}
.footnote__contact a{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}
.footnote__contact a:hover{color:var(--text);text-decoration:underline}

/* ============================================================ RESPONSIVE
   Mobile is a rebuild, not a squeeze: single-column cards, the hero figure
   above the copy at tablet width and below it on a phone, and the CTA staying
   in the header at every width so nobody has to open a menu to make contact. */
@media (max-width:1180px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .inds{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .nav__links{position:absolute;top:calc(100% + 1px);inset-inline:0;flex-direction:column;
    align-items:stretch;gap:0;background:#0A1628;border:1px solid var(--hairline-strong);
    border-radius:0 0 var(--r) var(--r);padding:var(--s2);box-shadow:var(--shadow);
    z-index:var(--z-menu);display:none}
  .nav__links.is-open{display:flex}
  .nav__links a{min-height:52px;padding-inline:var(--s5);font-size:1rem}
  .nav__links a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--red)}
  .burger{display:flex}
  .hero__grid{grid-template-columns:1fr;gap:var(--s8)}
  .hero__fig{order:-1;max-width:560px;margin-inline:auto}
  .hero__lead{max-width:52ch}
  .trust__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tr:nth-child(odd) + .tr{border-inline-start:1px solid var(--hairline)}
  .tr:nth-child(n+3){border-top:1px solid var(--hairline)}
  .tr:nth-child(3){border-inline-start:0}
  .statband{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:nth-child(odd){border-inline-start:0}
  .stat:nth-child(n+3){border-top:1px solid var(--hairline)}
}
@media (max-width:820px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footbar__in{gap:var(--s6)}
  .footbar .btn{margin-inline-start:0;width:100%}
}
@media (max-width:640px){
  :root{--gutter:18px}
  /* No two-column cards on a phone. One card, full width, readable. */
  .cards,.inds{grid-template-columns:1fr}
  .trust__row,.statband{grid-template-columns:1fr}
  .tr + .tr{border-inline-start:0;border-top:1px solid var(--hairline)}
  .stat + .stat{border-inline-start:0;border-top:1px solid var(--hairline)}
  .stat{padding-block:var(--s6)}
  .hero__ctas .btn{width:100%}
  .hero__fig{order:1;margin-top:var(--s4)}
  .footbar__in{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){
  .nav{gap:var(--s3)}
  .brand__mark{width:34px;height:34px}
  .brand__name{font-size:1.02rem}
  .brand__tag{display:none}
  .nav__cta{padding-inline:var(--s4);font-size:.82rem;letter-spacing:.04em}
}
@media (max-width:440px){
  /* The header CTA reads BOOK A DEMO, which is wider than the label it
     replaced, and a 390px phone has no room to spare. The button gives back
     side padding rather than the wordmark giving up its place. */
  .nav{gap:10px}
  .nav__cta{padding-inline:8px;font-size:.78rem}
}
@media (max-width:385px){
  /* Below this width the wordmark, the CTA and the burger cannot all fit. The
     CTA is the one that earns money, and the mark plus the link's accessible
     name still identify the company, so the wordmark is what gives way. The
     breakpoint sits at 385 rather than 420 so that a 390px phone, the most
     common size in use, still shows the full wordmark. */
  .brand__name{position:absolute!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  :root{--gutter:14px}
}

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

/* ============================================================ UTILITY PAGE
   Contact and any later utility page. It inherits every token above; nothing
   here introduces a second visual language. */
/* One centred column. Left-aligned against a 1280px container the form would
   sit in a half-empty page; centred, the whole thing reads as deliberate. The
   width is the V3 reading measure, not a new layout system. */
.page{padding-block:clamp(40px,5vw,72px)}
.page__head,.form,.direct{max-width:660px;margin-inline:auto}
.page__head{margin-bottom:var(--s10)}
.page__head h1{margin-bottom:var(--s4)}
.page__lead{font-size:1.08rem;color:var(--text-muted);max-width:44ch}

/* The form column is capped so inputs never stretch across a wide monitor,
   which is both ugly and harder to read. */
.field{margin-bottom:var(--s6)}
.field label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--text);
  margin-bottom:var(--s2)}
.req{color:var(--red-text);margin-inline-start:2px}
.opt{font-weight:600;color:var(--text-dim);font-size:var(--fs-xs);margin-inline-start:6px}

.field input,.field select,.field textarea{
  display:block;width:100%;min-height:52px;padding:13px var(--s4);
  font-family:inherit;font-size:1rem;line-height:1.45;color:var(--text);
  background:var(--card);border:1px solid var(--border-control);border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.field textarea{min-height:120px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-dim)}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue-text);background:var(--card-2)}
.field select{
  /* Native arrow removed so the control matches the rest of the set, with the
     brand chevron drawn back in. */
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%239DB2D4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--s4) center;background-size:16px;
  padding-inline-end:var(--s10)}
.field select option,.field select optgroup{background:#0C1A31;color:var(--text)}

.hint{font-size:var(--fs-xs);color:var(--text-dim);margin-top:6px}

/* An invalid field is marked three ways, not by colour alone: a red border, a
   warning glyph and a sentence. WCAG 1.4.1. */
.err{display:flex;align-items:flex-start;gap:6px;font-size:var(--fs-sm);color:var(--red-text);
  font-weight:600;margin-top:7px}
.err::before{content:"\26A0";font-size:.95em;line-height:1.4;flex:0 0 auto}
.field [aria-invalid="true"]{border-color:var(--red);background:rgba(229,62,62,.06)}
.field [aria-invalid="true"]:focus{border-color:var(--red-text)}

/* The consent row is a real checkbox with a real label, sized to be tappable.
   Selectors carry two classes because `.field label` above is (0,1,1) and would
   otherwise win, turning the label into a block and stacking the box above its
   own text. */
.field--check{margin-block:var(--s8)}
.field--check .consent{display:flex;align-items:center;gap:var(--s3);cursor:pointer;
  font-weight:400;color:var(--text-muted);font-size:var(--fs-sm);line-height:1.5;
  min-height:44px;padding-block:8px;margin-bottom:0}
.field--check .consent input{flex:0 0 auto;width:22px;height:22px;min-height:22px;
  accent-color:var(--orange);cursor:pointer}
/* Now that the policy exists this is a real link, so it is underlined like one
   rather than dotted like a defined term. */
.field--check .consent__pp{color:var(--text);font-weight:600;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--text-dim);
  /* The label toggles the checkbox, so a near miss on this link would tick the
     box instead of opening the policy. Padding on an inline element grows the
     hit area without changing the line box, so the row keeps its height. */
  padding-block:11px;position:relative;z-index:1}
.field--check .consent__pp:hover{color:var(--blue-text);text-decoration-color:currentColor}

.form__actions{margin-top:var(--s8)}
.form__actions .btn{min-width:220px}

/* The honeypot must be unreachable rather than merely invisible: off-screen,
   not display:none, so a bot that reads styles still finds and fills it. */
.form__trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.formstate{margin-top:var(--s6);padding:var(--s5);border-radius:var(--r-sm);
  border:1px solid var(--card-edge);background:var(--card);font-size:var(--fs-sm);
  color:var(--text-muted)}
.formstate b{display:block;color:var(--text);font-size:1rem;margin-bottom:4px}
.formstate--ok{border-color:rgba(72,187,120,.5)}
.formstate--ok b{color:#68D391}
.formstate--warn{border-color:rgba(221,107,32,.55)}
.formstate--warn b{color:var(--orange-text)}
.formstate--bad{border-color:rgba(229,62,62,.55)}
.formstate--bad b{color:var(--red-text)}

.direct{margin-top:var(--s16);padding-top:var(--s8);border-top:1px solid var(--hairline)}
.direct h2{font-size:var(--fs-h3);margin-bottom:var(--s4)}
.direct__list{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s10)}
.direct__list li{display:flex;align-items:center;gap:var(--s3)}
.direct__list svg{width:22px;height:22px;color:var(--text-dim);flex:0 0 auto}
.direct__list a{display:inline-flex;align-items:center;min-height:44px;
  font-size:1.02rem;font-weight:700;color:var(--text)}
.direct__list a:hover{color:var(--blue-text);text-decoration:underline}

@media (max-width:640px){
  /* One column, full width. No cramped side-by-side fields on a phone. */
  .page__head,.form,.direct{max-width:none}
  .form__actions .btn{width:100%}
  .direct__list{flex-direction:column;gap:var(--s2)}
}

/* ============================================================ SOLUTIONS MENU
   The Solutions item becomes a disclosure once real destinations exist. The
   trigger keeps the exact type, size and padding of the nav links around it so
   the header's rhythm is unchanged; only the chevron is new. */
.nav__group{position:relative}
.nav__toggle{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 15px;
  border:0;border-radius:var(--r-sm);background:transparent;cursor:pointer;
  font-family:inherit;font-size:.95rem;font-weight:600;color:var(--text-muted);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav__toggle:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav__toggle[data-section="current"]{color:var(--red-text);box-shadow:inset 0 -3px 0 var(--red)}
.nav__chev{flex:0 0 auto;transition:transform var(--dur) var(--ease)}
.nav__toggle[aria-expanded="true"] .nav__chev{transform:rotate(180deg)}
.nav__menu{position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:276px;
  display:none;background:#0A1628;border:1px solid var(--hairline-strong);
  border-radius:var(--r);padding:var(--s2);box-shadow:var(--shadow);z-index:var(--z-menu)}
.nav__menu.is-open{display:block}
.nav__menu a{display:flex;align-items:center;min-height:46px;padding:8px 14px;
  border-radius:var(--r-sm);font-size:.92rem;font-weight:600;color:var(--text-muted);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease)}
.nav__menu a:hover{color:var(--text);background:rgba(255,255,255,.06)}
.nav__menu a[aria-current="page"]{color:var(--red-text);box-shadow:inset 3px 0 0 var(--red)}

/* ============================================================ SOLUTION PAGE
   Per-page accent. Each service inherits the colour of its homepage card, so a
   visitor arriving from a red card lands on a page led by the same red. */
.acc-red{--accent:#E53E3E;--accent-text:#FC8181}
.acc-blue{--accent:#3182CE;--accent-text:#63B3ED}
.acc-orange{--accent:#DD6B20;--accent-text:#F6A15C}

.hero--service{padding-block:clamp(44px,5.5vw,84px) clamp(36px,4vw,60px)}
.hero--service .hero__eyebrow{color:var(--accent-text)}
.hero--service .hero__eyebrow::before{background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}
.hero--service h1{max-width:16ch;margin-bottom:var(--s5)}
.hero--service .hero__lead{max-width:52ch;font-size:1.14rem;margin-bottom:var(--s8)}

/* 3. WHAT THIS SOLVES — two or three plain problems, one per row. */
.solves{display:grid;gap:var(--s3);max-width:820px}
.solves li{position:relative;display:flex;align-items:flex-start;gap:var(--s4);
  padding:var(--s5) var(--s6);background:var(--card);border:1px solid var(--card-edge);
  border-radius:var(--r);color:var(--text);font-size:1.03rem;line-height:1.5}
.solves li::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:2px;
  background:var(--accent);margin-top:.5em;box-shadow:0 0 10px var(--accent)}

/* 4. WHAT WE CAN BUILD — capability labels, not a service menu. Auto-fill so the
   grid resolves to a single column on a phone without a separate rule. */
.caps{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:var(--s3)}
.cap{display:flex;align-items:center;gap:var(--s3);min-height:58px;padding:var(--s4) var(--s5);
  background:var(--card);border:1px solid var(--card-edge);border-radius:var(--r-sm);
  color:var(--text);font-size:.97rem;font-weight:600;line-height:1.3;
  transition:border-color var(--dur) var(--ease)}
.cap::before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent)}
.cap:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

.inds__note{margin-top:var(--s6);font-size:var(--fs-sm);color:var(--text-dim);max-width:60ch}

@media (max-width:1080px){
  /* Inside the mobile panel the menu sits in the flow, indented under its
     trigger, rather than floating over the page. */
  .nav__group{position:static}
  .nav__toggle{width:100%;justify-content:space-between;min-height:52px;
    padding-inline:var(--s5);font-size:1rem}
  .nav__toggle[data-section="current"]{box-shadow:inset 3px 0 0 var(--red)}
  .nav__menu{position:static;min-width:0;padding:0 0 var(--s2) var(--s5);
    background:transparent;border:0;border-radius:0;box-shadow:none}
  .nav__menu a{min-height:48px;font-size:.95rem}
}

/* ============================================================ PHASE D
   The industry card became a link once its page existed. The anchor inherits
   colour and carries no decoration, and this stretches it over the whole card,
   so the card renders exactly as it did before it was clickable. */
.ind__link::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* Relevant Solutions shows four or five pillars depending on the sector, so the
   row is told how many to fit rather than always assuming five. */
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cards--5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* The healthcare page states where the line sits. It is a boundary, not a
   footnote, so it is set as a panel rather than fine print. */
.caps__note{margin-top:var(--s6);padding:var(--s5) var(--s6);max-width:820px;
  background:var(--card);border:1px solid var(--card-edge);
  border-inline-start:3px solid var(--accent);border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.55}
.caps__note b{color:var(--text)}

@media (max-width:1180px){
  .cards--4,.cards--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .cards--4,.cards--5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .cards--4,.cards--5{grid-template-columns:1fr}
}

/* ============================================================ LEGAL PAGE
   A document, not a landing page. One readable column, generous line height,
   and no decoration competing with the words. */
.legal{max-width:660px;margin-inline:auto}
.legal section + section{margin-top:var(--s10)}
.legal h2{font-size:1.18rem;margin-bottom:var(--s4)}
.legal p{margin-bottom:var(--s4);line-height:1.75}
.legal p:last-child{margin-bottom:0}
.legal a{color:var(--blue-text);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--text)}
.legal__meta{max-width:660px;margin-inline:auto;margin-bottom:var(--s10);
  font-size:var(--fs-sm);color:var(--text-dim)}

/* The draft banner is a warning, so it is marked by an icon and a heading as
   well as by colour, and it is impossible to mistake for body copy. */
.draftflag{max-width:660px;margin-inline:auto;margin-bottom:var(--s6);
  display:block;padding:var(--s5) var(--s6);
  background:rgba(221,107,32,.10);border:1px solid rgba(221,107,32,.55);
  border-inline-start:4px solid var(--orange);border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6}
.draftflag b{display:block;color:var(--orange-text);margin-bottom:4px}
.draftflag b::before{content:"\26A0";margin-inline-end:8px}

@media (max-width:640px){
  .legal,.legal__meta,.draftflag{max-width:none}
}