:root{
    /* --- Brand Guidelines v1.0 palette --- */
    --charcoal:#051A23;        /* primary near-black */
    --teal-deep:#013648;
    --teal:#227E8B;
    --grad:linear-gradient(135deg,#013648 0%,#227E8B 100%);        /* primary gradient */
    --grad-press:linear-gradient(135deg,#012A38 0%,#1C6C78 100%);  /* pressed/hover */
    --blue:#1B62EB;
    --sky:#6DCDF5;
    --ice:#ABDCEA;
    --mistblue:#C8D5DC;
    --pale:#D8E6EA;

    /* semantic tokens (existing component rules read these) */
    --abyss:#051A23;           /* main dark surfaces */
    --abyss-2:#0A2530;         /* footer */
    --current:#227E8B;         /* teal accent on light (eyebrows, icons) */
    --aqua:#6DCDF5;            /* light accent on dark surfaces */
    --silt:#227E8B;            /* highlight / focus accent */
    --mist:#F6F9FA;            /* page background */
    --ink:#0B1E26;             /* body text */
    --stone:#54636B;           /* muted text */
    --line:#E4EAEC;            /* hairlines */
    --white:#ffffff;
    --accent:#1B62EB;          /* interactive blue */
    --accent-dark:#1550C8;

    --display:"Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --body:"Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:"Space Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

    --maxw:1160px;

    /* --- spacing scale ---------------------------------------------------
       Every vertical measurement on the site derives from these. They are
       fluid (clamp) rather than fixed pixels, so the rhythm holds at 360px
       and at 1600px instead of being tuned for one width and feeling wrong
       everywhere else. Do not reintroduce hard-coded section padding. */
    --space-2xs:6px;
    --space-xs:10px;
    --space-s:16px;
    --space-m:24px;
    --space-l:32px;
    --section-y:clamp(54px,5.2vw,88px);        /* standard section padding */
    --section-y-tight:clamp(28px,3vw,44px);    /* light section after light */
    --head-gap:clamp(30px,3.6vw,52px);         /* heading block to content */
    --gap-grid:clamp(16px,1.5vw,22px);         /* card grids */
    --gap-wide:clamp(28px,3.2vw,48px);         /* two-column layouts */
    --wrap-x:clamp(20px,3.5vw,28px);           /* page side gutter */
    --r:16px;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:124px}
  body{
    margin:0;
    font-family:var(--body);
    color:var(--ink);
    background:var(--mist);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  img,svg{display:block;max-width:100%}
  h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.05;margin:0}
  p{margin:0}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-x)}
  .eyebrow{
    font-family:var(--mono);font-size:12px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--current);
  }
  .eyebrow.on-dark{color:var(--aqua)}

  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:.55em;
    font-family:var(--display);font-weight:600;font-size:15px;
    padding:14px 22px;border-radius:999px;border:1.5px solid transparent;
    cursor:pointer;transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
    line-height:1;
  }
  .btn-primary{background:var(--grad);color:#fff}
  .btn-primary:hover{background:var(--grad-press);transform:translateY(-2px)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
  .btn-ghost:hover{border-color:var(--current);color:var(--current)}
  .btn-ghost.on-dark{color:#fff;border-color:rgba(255,255,255,.28)}
  .btn-ghost.on-dark:hover{border-color:var(--aqua);color:var(--aqua)}
  .btn .arrow{transition:transform .15s ease}
  .btn:hover .arrow{transform:translateX(3px)}

  :focus-visible{outline:3px solid var(--silt);outline-offset:2px;border-radius:6px}

  /* ---------- header ---------- */
  header{position:sticky;top:0;z-index:50}
  .topbar{background:#EEF0F1;border-bottom:1px solid var(--line)}
  .topbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:40px}
  .tb-left{font-size:12.5px;color:var(--stone);letter-spacing:.01em;white-space:nowrap}
  .tb-right{display:flex;align-items:center;gap:18px}
  .tb-right a{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--stone);transition:color .15s ease;white-space:nowrap}
  .tb-right a:hover{color:var(--accent)}
  .tb-right svg{opacity:.65;flex:0 0 auto}
  .tb-sep{width:1px;height:13px;background:var(--line)}
  .navbar{position:relative;background:rgba(246,249,250,.85);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .2s ease}
  header.scrolled .navbar{border-bottom-color:var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:52px;height:74px}
  .brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
  .brand .mark{flex:0 0 auto}
  .wm{display:flex;flex-direction:column;justify-content:center;line-height:1;gap:3px}
  .wm-main{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--ink)}
  .wm-sub{font-family:var(--mono);font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:var(--stone);font-weight:400}
  .foot-brand .wm-main{color:#fff}
  .foot-brand .wm-sub{color:rgba(255,255,255,.5)}
  .nav-right{display:flex;align-items:center;gap:36px}
  .nav-links{display:flex;align-items:center;gap:36px}
  .nav-links a{font-size:15px;color:var(--stone);font-weight:500;transition:color .15s ease}
  .nav-links a:hover{color:var(--ink)}
  .nav-right .btn{padding:12px 20px;font-size:14px}
  .menu-btn{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:auto}
  .menu-btn span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;transition:.2s}

  /* ---------- hero ---------- */
  .hero{padding:clamp(36px,4vw,56px) 0 clamp(52px,6vw,88px);position:relative;overflow:hidden;text-align:center;min-height:calc(100vh - 114px);min-height:calc(100svh - 114px);display:flex;align-items:center;
    background:linear-gradient(180deg,#e9f2f4 0%, #f2f7f8 34%, var(--mist) 60%);
  }
  /* drifting teal aurora, transform-only animation, GPU composited (no repaint) */
  .hero::before{
    content:"";position:absolute;inset:-25% -12% -10%;z-index:0;pointer-events:none;
    background:
      radial-gradient(34% 42% at 16% 10%, rgba(1,54,72,.22), transparent 60%),
      radial-gradient(38% 46% at 84% 14%, rgba(109,205,245,.24), transparent 62%),
      radial-gradient(52% 60% at 66% 96%, rgba(1,54,72,.12), transparent 60%);
    will-change:transform;transform:translateZ(0);
    animation:aurora 26s ease-in-out infinite alternate;
  }
  /* fine grain, keeps the surface from looking flat/synthetic (static, no blend cost on animation) */
  .hero::after{
    content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35;
    mix-blend-mode:soft-light;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:150px 150px;
  }
  /* cursor-tracking glow, moved via transform only, so mouse moves never repaint */
  .hero-glow{
    position:absolute;top:0;left:0;z-index:0;pointer-events:none;
    width:46vmax;height:46vmax;margin:-23vmax 0 0 -23vmax;border-radius:50%;
    background:radial-gradient(closest-side, rgba(34,126,139,.30), rgba(34,126,139,.12) 46%, transparent 72%);
    transform:translate3d(50vw,16vh,0);will-change:transform;
    transition:transform .35s ease-out;opacity:.9;
  }
  .hero>.wrap{width:100%;position:relative;z-index:1}
  @keyframes aurora{
    0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
    50%{transform:translate3d(-2.5%,1.8%,0) scale(1.08) rotate(1.2deg)}
    100%{transform:translate3d(2.5%,-1.6%,0) scale(1.05) rotate(-1deg)}
  }
  .hero-grid{display:block;max-width:980px;margin:0 auto}
  .hero h1{
    font-size:clamp(2.6rem,5.6vw,4.3rem);letter-spacing:-.02em;margin:20px auto 0;max-width:24ch;
  }
  .hero h1 .flow{position:relative;white-space:nowrap;background:linear-gradient(120deg,#013648,#227E8B,#6DCDF5,#227E8B,#013648);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding:0 .04em;animation:flowshift 9s ease-in-out infinite}
  @keyframes flowshift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  /* gentle staggered entrance for hero content */
  .hero .eyebrow,.hero h1,.hero p.lead,.hero-cta,.hero-meta{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) both}
  .hero h1{animation-delay:.06s}
  .hero p.lead{animation-delay:.14s}
  .hero-cta{animation-delay:.22s}
  .hero-meta{animation-delay:.3s}
  @keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .hero p.lead{margin-top:26px;font-size:clamp(19px,2.2vw,23px);color:var(--stone);max-width:62ch;margin-left:auto;margin-right:auto}
  .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px;justify-content:center}
  .hero-meta{
    margin-top:30px;font-family:var(--mono);font-size:12.5px;color:var(--stone);
    letter-spacing:.04em;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  }
  .hero-meta .dot{width:5px;height:5px;border-radius:50%;background:var(--silt)}
  .hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);color:var(--stone);background:rgba(255,255,255,.6);transition:color .15s ease, border-color .15s ease;animation:bob 2.2s ease-in-out infinite}
  .hero-scroll:hover{color:var(--ink);border-color:var(--stone)}
  @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}

  /* the signature flow visual */
  .flowcard{
    background:var(--abyss);border-radius:24px;padding:38px;color:#ced3d7;
    position:relative;overflow:hidden;box-shadow:0 30px 60px -40px rgba(31,35,40,.45);
    min-height:430px;display:flex;flex-direction:column;justify-content:space-between;
  }
  .flowcard .banks{display:flex;justify-content:space-between;align-items:stretch;gap:16px;position:relative;z-index:2}
  .bank{flex:1;min-width:0}
  .bank h4{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:rgba(206,211,215,.65)}
  .bank.to h4{color:var(--aqua);text-align:right}
  .chip{
    display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:12px 14px;
    font-size:14px;margin-bottom:11px;
  }
  .bank.from .chip{color:rgba(206,211,215,.75)}
  .bank.to .chip{justify-content:flex-end;text-align:right;border-color:rgba(109,205,245,.25);background:rgba(109,205,245,.08);color:#eef1f2}
  .chip svg{flex:0 0 auto;opacity:.85}
  .flow-svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.9}
  .flowcard .caption{
    position:relative;z-index:2;margin-top:24px;padding-top:18px;
    border-top:1px solid rgba(255,255,255,.09);
    font-size:13px;color:rgba(206,211,215,.7);display:flex;align-items:center;gap:9px;
  }
  .pulse{width:8px;height:8px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 0 rgba(109,205,245,.6);animation:pulse 2.4s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(109,205,245,.5)}70%{box-shadow:0 0 0 9px rgba(109,205,245,0)}100%{box-shadow:0 0 0 0 rgba(109,205,245,0)}}

  /* ---------- from → to banner ---------- */
  .flowbanner{background:var(--abyss);color:#e7eaec;padding:var(--section-y) 0;position:relative;overflow:hidden}
  .flowbanner::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 320px at 50% -10%,rgba(109,205,245,.16),transparent 70%);pointer-events:none}
  .fb-head{position:relative;z-index:1;text-align:center;max-width:680px;margin:0 auto var(--head-gap)}
  .fb-head h2{color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem);letter-spacing:-.015em;margin-top:12px}
  .fb-rows{position:relative;z-index:1;display:grid;gap:14px;max-width:920px;margin:0 auto}
  .fb-row{
    display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;gap:18px;
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
    border-radius:14px;padding:18px 24px;cursor:default;
    transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .fb-row:hover, .fb-row:focus-visible{
    transform:translateY(-3px);background:rgba(109,205,245,.12);
    border-color:rgba(109,205,245,.42);box-shadow:0 22px 44px -30px rgba(0,0,0,.85);outline:none;
  }
  .fb-from, .fb-to{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;min-width:0}
  .fb-from{color:rgba(206,211,215,.78)}
  .fb-to{justify-content:flex-end;text-align:right;color:#fff;font-weight:600}
  .fb-from svg, .fb-to svg{flex:0 0 auto;opacity:.85}
  .fb-row:hover .fb-from{color:#cdd3d7}
  .fb-arrow{position:relative;display:flex;align-items:center;justify-content:center;color:var(--aqua)}
  .fb-track{position:absolute;left:6px;right:6px;top:50%;height:2px;transform:translateY(-50%);background:rgba(109,205,245,.22);border-radius:2px;overflow:hidden}
  .fb-track::after{content:"";position:absolute;inset:0;width:0;background:var(--aqua);transition:width .55s ease}
  .fb-row:hover .fb-track::after, .fb-row:focus-visible .fb-track::after{width:100%}
  .fb-arrow svg{position:relative;z-index:1;transition:transform .3s ease}
  .fb-row:hover .fb-arrow svg, .fb-row:focus-visible .fb-arrow svg{transform:translateX(6px)}
  .fb-caption{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:34px;font-size:14px;color:rgba(206,211,215,.72)}

  /* ---------- generic section ---------- */
  .section{padding:var(--section-y) 0}

  /* Two light sections back to back stack their padding and read as an
     empty band. Collapse that boundary. A dark section keeps full padding
     on both sides, because the colour change is already doing the work of
     separating and it needs room to breathe. */
  .section + .section{padding-top:var(--section-y-tight)}
  .section.process{padding-top:var(--section-y);padding-bottom:var(--section-y)}
  .section.process + .section{padding-top:var(--section-y)}

  /* Section heading block.
     This used to be a 660px column inside a 1160px container, which left
     roughly 40% of every section header as dead space down the right hand
     side. It is now two columns: the eyebrow and heading on the left, the
     supporting paragraph on the right, baseline aligned. The block fills
     the width, so the emptiness reads as deliberate structure rather than
     as a gap nobody filled. */
  .section-head{
    max-width:none;
    margin-bottom:var(--head-gap);
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
    column-gap:clamp(32px,5vw,80px);
    align-items:end;
  }
  .section-head .eyebrow{grid-column:1;grid-row:1;display:block;margin-bottom:12px}
  .section-head h2{
    grid-column:1;grid-row:2;margin-top:0;
    font-size:clamp(1.9rem,3.6vw,2.7rem);letter-spacing:-.015em;
    text-wrap:balance;
  }
  .section-head p{
    grid-column:2;grid-row:2;margin-top:0;
    font-size:17px;color:var(--stone);line-height:1.6;
    padding-bottom:.35em;
  }
  /* Below the two-column threshold it stacks, and the paragraph goes back
     to sitting under the heading. */
  @media (max-width:860px){
    .section-head{grid-template-columns:minmax(0,1fr);row-gap:14px}
    .section-head .eyebrow{grid-row:1;margin-bottom:0}
    .section-head h2{grid-column:1;grid-row:2}
    .section-head p{grid-column:1;grid-row:3;padding-bottom:0;max-width:62ch}
  }

  /* services */
  .svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid)}
  .svc{
    background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    padding:26px;cursor:default;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .svc:hover{transform:translateY(-3px);box-shadow:0 12px 30px -26px rgba(31,35,40,.30);border-color:var(--line)}
  .svc .ico{
    width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
    background:rgba(34,126,139,.1);color:var(--current);margin-bottom:18px;
  }
  .svc h3{font-size:19px;margin-bottom:9px}
  .svc p{font-size:15px;color:var(--stone)}
  .svc.feature{background:var(--abyss);border-color:transparent;color:#e7eaec}
  .svc.feature .ico{background:rgba(109,205,245,.16);color:var(--aqua)}
  .svc.feature p{color:rgba(224,227,229,.72)}
  .svc.feature .tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--silt);margin-bottom:14px}
  /* coloured service tiles */
  .svc.tint{border-color:transparent;color:#fff}
  .svc.tint .ico{background:rgba(255,255,255,.16);color:#fff}
  .svc.tint h3{color:#fff}
  .svc.tint p{color:rgba(255,255,255,.82)}
  .svc.tint:hover{box-shadow:0 18px 40px -28px rgba(31,35,40,.55)}
  .svc.c1{background:#013648}
  .svc.c2{background:#227E8B}
  .svc.c3{background:#1B62EB}

  /* feature cards (audit + custom SaaS) */
  .svc-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid);margin-bottom:var(--gap-grid)}
  .svc-feat{border-radius:var(--r);padding:32px;color:#fff;display:flex;flex-direction:column;transition:transform .18s ease, box-shadow .18s ease}
  .svc-feat:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(31,35,40,.45)}
  .svc-feat.audit{background:var(--abyss)}
  .svc-feat.saas{background:var(--accent)}
  .svc-feat .ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.14);color:#fff;margin-bottom:18px}
  .svc-feat h3{font-size:21px;margin-bottom:10px}
  .svc-feat p{font-size:15px;color:rgba(255,255,255,.82)}
  .svc-feat .feat-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:14px}
  .svc-feat.audit .feat-tag{color:var(--aqua)}
  .feat-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
  .feat-tags span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:5px 10px;color:#fff}
  /* hidden until a real logo file loads, no reserved space, no broken-image flash */
  .feat-tags .feat-logo{display:none}
  .feat-tags .feat-logo.ready{display:inline-block;width:16px;height:16px;object-fit:contain;border-radius:4px;flex:0 0 auto;background:rgba(255,255,255,.9);padding:1px}
  .feat-link{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:600;font-size:14.5px;color:#fff}
  .feat-link span{transition:transform .15s ease}
  .svc-feat:hover .feat-link span{transform:translateX(3px)}

  /* process */
  .process{background:var(--abyss);color:#e7eaec}
  .process .section-head h2{color:#fff}
  .process .section-head p{color:rgba(224,227,229,.7)}
  .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);overflow:hidden}
  .step{background:var(--abyss);padding:30px 24px}
  .step .num{font-family:var(--mono);font-size:13px;color:var(--aqua);letter-spacing:.1em;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .step .price{font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:4px 10px;border-radius:999px;background:rgba(109,205,245,.14);color:var(--aqua);white-space:nowrap}
  .step .fine{display:block;margin-top:12px;font-size:12.5px;color:rgba(224,227,229,.5)}
  .step h3{font-size:18px;margin:16px 0 10px;color:#fff}
  .step p{font-size:14.5px;color:rgba(224,227,229,.7)}

  /* work / portfolio */
  .work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-grid)}
  .proj{
    background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    padding:28px;display:flex;flex-direction:column;min-height:230px;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .proj:hover{transform:translateY(-3px);box-shadow:0 14px 34px -28px rgba(31,35,40,.30);border-color:var(--stone)}
  .proj-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;flex-wrap:wrap}
  .proj-name{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.01em}
  .status{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--stone);white-space:nowrap}
  .status.live{background:rgba(34,126,139,.12);border-color:transparent;color:var(--current)}
  .status.dev{background:rgba(27,98,235,.10);border-color:transparent;color:var(--blue)}
  .proj-cat{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--current);margin-bottom:14px}
  .proj-blurb{font-size:15px;color:var(--stone)}
  .proj-points{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
  .proj-points li{font-size:12.5px;color:var(--ink);background:var(--mist);border:1px solid var(--line);border-radius:8px;padding:5px 10px}
  .proj-foot{margin-top:auto;padding-top:20px}
  .proj-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--stone);transition:color .15s ease}
  a.proj:hover .proj-link{color:var(--ink)}
  .proj-link span{transition:transform .15s ease}
  a.proj:hover .proj-link span{transform:translate(2px,-2px)}
  .proj.add{
    border-style:dashed;align-items:center;justify-content:center;text-align:center;
    color:var(--stone);background:transparent;
  }
  .proj.add .plus{width:44px;height:44px;border-radius:12px;border:1.5px dashed var(--line);display:grid;place-items:center;color:var(--current);margin:0 auto 14px;font-size:24px;font-family:var(--display)}
  .proj.add p{font-size:14px;max-width:30ch}

  /* contact / booking */
  .contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--gap-wide);align-items:stretch}
  .info-card{background:var(--abyss);color:#e7eaec;border-radius:20px;padding:34px}
  .info-card h3{color:#fff;font-size:22px;margin-bottom:8px}
  .info-card .sub{color:rgba(224,227,229,.72);font-size:15px;margin-bottom:26px}
  .info-row{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(255,255,255,.09)}
  .info-row:first-of-type{border-top:0}
  .info-row .ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:rgba(109,205,245,.14);color:var(--aqua);display:grid;place-items:center}
  .info-row > div:last-child{flex:1;min-width:0}
  .info-row .lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(224,227,229,.55);margin-bottom:4px}
  .info-row .val{display:block;font-size:15.5px;line-height:1.4;color:#fff}
  .info-row a.val:hover{color:var(--aqua)}

  form.book{background:var(--white);border:1px solid var(--line);border-radius:20px;padding:38px}
  .field{margin-bottom:24px}
  .field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:9px}
  .field .req{color:var(--silt)}
  .field input, .field textarea, .field select{
    width:100%;font-family:var(--body);font-size:15px;color:var(--ink);
    padding:14px 15px;border:1.5px solid var(--line);border-radius:10px;background:#fbfdfc;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .field input:focus, .field textarea:focus, .field select:focus{
    outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(34,126,139,.15)
  }
  .field textarea{resize:vertical;min-height:120px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .radio-row{display:flex;flex-wrap:wrap;gap:12px}
  .radio-row label{
    display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:14px;
    border:1.5px solid var(--line);border-radius:10px;padding:11px 16px;cursor:pointer;margin-bottom:0;
  }
  .radio-row input{width:auto}
  .radio-row label:has(input:checked){border-color:var(--teal);background:rgba(34,126,139,.09);color:var(--teal)}
  form.book .btn-primary{width:100%;justify-content:center;margin-top:12px;padding:16px 22px}
  .form-note{font-size:12.5px;color:var(--stone);margin-top:16px;text-align:center}
  .form-msg{display:none;margin-top:16px;padding:14px 16px;border-radius:10px;font-size:14.5px}
  .form-msg.ok{display:block;background:rgba(34,126,139,.1);color:#0B1E26;border:1px solid rgba(34,126,139,.28)}
  .form-msg.err{display:block;background:rgba(214,69,69,.08);color:#a52a2a;border:1px solid rgba(214,69,69,.25)}

  /* footer */
  footer{background:var(--abyss-2);color:rgba(224,227,229,.72);padding:var(--section-y) 0 var(--space-l)}
  .foot-grid{display:flex;justify-content:space-between;gap:var(--gap-wide);flex-wrap:wrap;align-items:flex-start}
  .foot-brand{font-family:var(--display);font-weight:700;font-size:22px;color:#fff;display:flex;align-items:center;gap:11px;margin-bottom:14px}
  .foot-grid p{font-size:14px;max-width:34ch}
  .foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(224,227,229,.5);margin:0 0 14px}
  .foot-col a, .foot-col span{display:block;font-size:14px;margin-bottom:9px;color:rgba(224,227,229,.78)}
  .foot-col a:hover{color:var(--aqua)}
  .foot-bottom{margin-top:42px;padding-top:22px;border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:rgba(224,227,229,.5);font-family:var(--mono);letter-spacing:.03em}
  .foot-cta{text-align:center;margin-top:26px;font-family:var(--display);font-weight:500;font-size:16px;color:rgba(255,255,255,.85)}
  .foot-cta a{color:var(--aqua);font-weight:600;text-decoration:underline;text-underline-offset:3px}
  .foot-cta a:hover{color:#fff}

  /* reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease}
  .reveal.in{opacity:1;transform:none}

  /* ---------- responsive ---------- */
  @media (max-width:900px){
    .hero{min-height:auto}
    .hero-scroll{display:none}
    .hero-grid{grid-template-columns:1fr;gap:40px}
    .hero p.lead{max-width:none}
    .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
    .work-grid{grid-template-columns:minmax(0,1fr)}
    .contact-grid{grid-template-columns:minmax(0,1fr);gap:var(--gap-wide)}
  }
  @media (max-width:880px){
    .menu-btn{display:block}
    .nav-right{
      position:absolute;top:100%;left:0;right:0;background:var(--mist);
      flex-direction:column;align-items:stretch;gap:0;padding:10px 24px 20px;
      border-bottom:1px solid var(--line);box-shadow:0 16px 24px -20px rgba(31,35,40,.25);display:none;
    }
    .nav-right.open{display:flex}
    .nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%}
    .nav-links a{padding:14px 0;border-bottom:1px solid var(--line)}
    .nav-right .btn{margin-top:16px;justify-content:center}
  }
  @media (max-width:820px){
    .tb-left{display:none}
    .topbar-in{justify-content:center}
  }
  @media (max-width:600px){
    .topbar{display:none}
  }
  @media (max-width:680px){
    .svc-grid{grid-template-columns:minmax(0,1fr)}
    .svc-features{grid-template-columns:minmax(0,1fr)}
    .steps{grid-template-columns:minmax(0,1fr)}
    .two{grid-template-columns:1fr}
    .hero-scroll{display:none}
    .fb-row{grid-template-columns:1fr;gap:10px;text-align:center}
    .fb-from, .fb-to{justify-content:center;text-align:center}
    .fb-arrow{transform:rotate(90deg);height:30px}
    .fb-track{display:none}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
    .reveal{opacity:1;transform:none}
  }

  /* ---- testimonials ---- */
  .tst{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .tst-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-grid)}
  /* One or two testimonials shouldn't leave a gaping hole in a three-up grid. */
  .tst-grid.n1{grid-template-columns:minmax(0,560px);justify-content:center}
  .tst-grid.n2{grid-template-columns:repeat(2,minmax(0,420px));justify-content:center}
  @media (max-width:960px){ .tst-grid,.tst-grid.n2{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:680px){ .tst-grid,.tst-grid.n1,.tst-grid.n2{grid-template-columns:1fr} }
  .tst-card{
    background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
    padding:28px;display:flex;flex-direction:column;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .tst-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -28px rgba(31,35,40,.3);border-color:var(--stone)}
  .tst-card.feature{background:var(--grad);border-color:transparent;color:#fff}
  .tst-quote{font-size:16px;line-height:1.65;color:var(--ink);margin:0 0 22px;flex:1}
  .tst-card.feature .tst-quote{color:rgba(255,255,255,.95)}
  .tst-quote::before{
    content:"";display:block;width:26px;height:2px;background:var(--current);
    border-radius:2px;margin-bottom:16px;
  }
  .tst-card.feature .tst-quote::before{background:var(--aqua)}
  .tst-stars{display:flex;gap:2px;margin-bottom:14px;color:#F0B429}
  .tst-stars svg{width:15px;height:15px;fill:currentColor}
  .tst-who{font-size:14.5px;font-weight:600;color:var(--ink)}
  .tst-card.feature .tst-who{color:#fff}
  .tst-role{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
            color:var(--stone);margin-top:5px}
  .tst-card.feature .tst-role{color:rgba(255,255,255,.72)}
  .tst-role a{color:inherit;text-decoration:underline;text-underline-offset:2px}

  /* ---- floating WhatsApp button ---- */
  .wa-float{
    position:fixed;right:22px;bottom:22px;z-index:60;
    width:56px;height:56px;border-radius:50%;
    display:grid;place-items:center;color:#fff;background:#25D366;
    box-shadow:0 10px 26px -8px rgba(37,211,102,.6);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .wa-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 32px -8px rgba(37,211,102,.7)}
  .wa-float svg{width:30px;height:30px;fill:currentColor}
  @media (max-width:640px){ .wa-float{right:16px;bottom:16px;width:52px;height:52px} }
  @media print{ .wa-float{display:none} }

  /* =====================================================================
     SHARED SUB-PAGE STYLES
     Used by /operational-audit/, /platforms/*, /industries/*, /about/, /faq/
     ===================================================================== */

  /* --- page hero (smaller than the homepage hero) --- */
  .page-hero{
    position:relative;overflow:hidden;
    background:var(--abyss);color:var(--white);
    padding:clamp(40px,4.4vw,60px) 0 clamp(48px,5.5vw,76px);
  }
  .page-hero::after{
    content:"";position:absolute;inset:auto -10% -60% 40%;height:420px;
    background:radial-gradient(closest-side, rgba(34,126,139,.38), transparent 70%);
    pointer-events:none;
  }
  .page-hero .wrap{position:relative;z-index:1}
  .page-hero h1{
    font-size:clamp(32px,4.6vw,54px);letter-spacing:-.02em;
    margin:14px 0 0;max-width:20ch;
  }
  .page-hero .lead{
    color:var(--mistblue);font-size:clamp(16px,1.6vw,19px);
    margin-top:18px;max-width:62ch;line-height:1.6;
  }
  .page-hero .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
  .page-hero .hero-meta{
    display:flex;gap:14px;align-items:center;flex-wrap:wrap;
    margin-top:26px;color:var(--ice);font-size:13px;
    font-family:var(--mono);letter-spacing:.02em;
  }
  .page-hero .hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--silt)}

  /* --- breadcrumbs --- */
  .crumbs{
    font-family:var(--mono);font-size:12px;letter-spacing:.06em;
    color:var(--ice);display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  }
  .crumbs a{color:var(--ice);opacity:.85;text-decoration:none}
  .crumbs a:hover{opacity:1;text-decoration:underline}
  .crumbs span[aria-current]{color:var(--white);opacity:1}
  .crumbs .sep{opacity:.5}

  /* --- long-form prose --- */
  .prose{max-width:74ch}
  .prose h2{
    font-size:clamp(24px,2.8vw,34px);letter-spacing:-.015em;
    margin:clamp(34px,4vw,52px) 0 var(--space-s);line-height:1.15;
  }
  .prose h2:first-child{margin-top:0}
  .prose h3{font-size:clamp(18px,1.9vw,22px);margin:var(--space-l) 0 var(--space-2xs);line-height:1.25}
  .prose p{margin:0 0 16px;color:var(--ink);font-size:17px;line-height:1.7}
  .prose p.intro{font-size:19px;color:var(--stone);line-height:1.65}
  .prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--ink);font-size:17px;line-height:1.7}
  .prose li{margin:0 0 8px}
  .prose li::marker{color:var(--current)}
  .prose strong{font-weight:600;color:var(--ink)}
  .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .prose a:hover{color:var(--accent-dark)}
  .prose blockquote{
    margin:24px 0;padding:18px 22px;border-left:3px solid var(--current);
    background:var(--white);border-radius:0 var(--r) var(--r) 0;
    color:var(--stone);font-size:17px;line-height:1.65;
  }

  /* --- two-column page layout with a sticky sidebar --- */
  .pg-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--gap-wide);align-items:start}
  @media (max-width:940px){ .pg-grid{grid-template-columns:1fr;gap:var(--gap-wide)} }
  .side{position:sticky;top:132px;display:grid;gap:var(--space-s)}
  @media (max-width:940px){ .side{position:static;top:auto} }
  .side-card{
    background:var(--white);border:1px solid var(--line);
    border-radius:var(--r);padding:22px;
  }
  .side-card h4{
    font-family:var(--display);font-size:16px;font-weight:600;
    margin:0 0 6px;color:var(--ink);
  }
  .side-card p{font-size:14px;color:var(--stone);margin:0 0 14px;line-height:1.55}
  .side-card .btn{width:100%;justify-content:center}
  .side-links{display:grid;gap:2px;margin-top:4px}
  .side-links a{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:9px 0;font-size:14px;color:var(--ink);
    border-bottom:1px solid var(--line);text-decoration:none;
  }
  .side-links a:last-child{border-bottom:0}
  .side-links a span{color:var(--current);transition:transform .18s ease}
  .side-links a:hover{color:var(--current)}
  .side-links a:hover span{transform:translateX(3px)}

  /* --- key-facts table (highly extractable by search + AI crawlers) --- */
  .facts{
    width:100%;border-collapse:collapse;margin:0 0 24px;
    background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    overflow:hidden;font-size:15px;
  }
  .facts th,.facts td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
  .facts tr:last-child th,.facts tr:last-child td{border-bottom:0}
  .facts th{
    width:38%;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--stone);font-weight:400;
  }
  .facts td{color:var(--ink)}
  @media (max-width:560px){
    .facts th,.facts td{display:block;width:100%;border-bottom:0;padding:10px 16px 0}
    .facts td{padding:2px 16px 12px;border-bottom:1px solid var(--line)}
  }

  /* --- FAQ (details/summary; content is in the HTML, not behind JS) --- */
  .faq{display:grid;gap:var(--space-xs);max-width:80ch}
  .faq details{
    background:var(--white);border:1px solid var(--line);
    border-radius:var(--r);overflow:hidden;
  }
  .faq details[open]{border-color:var(--ice);box-shadow:0 6px 24px rgba(5,26,35,.05)}
  .faq summary{
    cursor:pointer;list-style:none;padding:18px 52px 18px 20px;position:relative;
    font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);
    line-height:1.4;
  }
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{
    content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;
    border-right:2px solid var(--current);border-bottom:2px solid var(--current);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
  }
  .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  .faq summary:hover{color:var(--current)}
  .faq summary:focus-visible{outline:2px solid var(--silt);outline-offset:-2px}
  .faq .ans{padding:0 20px 20px;color:var(--stone);font-size:16px;line-height:1.7}
  .faq .ans p{margin:0 0 12px}
  .faq .ans p:last-child{margin-bottom:0}
  .faq .ans a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
  .faq .ans ul{margin:0 0 12px;padding-left:20px}
  .faq .ans li{margin-bottom:6px}
  .faq .ans li::marker{color:var(--current)}

  /* --- card grid used for platform + industry index pages --- */
  .idx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--gap-grid)}
  .idx-card{
    display:flex;flex-direction:column;gap:8px;
    background:var(--white);border:1px solid var(--line);border-radius:var(--r);
    padding:24px;text-decoration:none;color:inherit;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  }
  .idx-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(5,26,35,.09);border-color:var(--ice)}
  .idx-card h3{font-size:20px;margin:0}
  .idx-card .cat{
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--current);
  }
  .idx-card p{font-size:15px;color:var(--stone);line-height:1.6;margin:0}
  .idx-card .go{
    margin-top:auto;padding-top:12px;font-size:14px;font-weight:600;
    color:var(--accent);display:flex;align-items:center;gap:6px;
  }
  .idx-card:hover .go span{transform:translateX(3px)}
  .idx-card .go span{transition:transform .18s ease}

  /* --- "next steps" strip at the foot of a sub-page --- */
  .next{background:var(--abyss);color:var(--white);padding:var(--section-y) 0}
  .next h2{font-size:clamp(24px,3vw,36px);margin:10px 0 12px;letter-spacing:-.015em}
  .next p{color:var(--mistblue);max-width:60ch;margin:0 0 24px;line-height:1.6}
  .next .btn-ghost{border-color:rgba(255,255,255,.28);color:var(--white)}
  .next .btn-ghost:hover{background:rgba(255,255,255,.08)}
  .next-cta{display:flex;gap:12px;flex-wrap:wrap}

  /* =====================================================================
     HOMEPAGE ADDITIONS
     Service cards became links to their service pages, the footer grew a
     fifth column, and the platform cards now link internally rather than
     straight out to the product domain.
     ===================================================================== */

  /* service cards are anchors now, not divs */
  a.svc{display:flex;flex-direction:column;cursor:pointer}
  a.svc:hover{border-color:var(--ice);box-shadow:0 12px 30px rgba(5,26,35,.07)}
  .svc-more{
    margin-top:auto;padding-top:16px;
    font-size:14px;font-weight:600;color:var(--accent);
    display:inline-flex;align-items:center;gap:6px;
  }
  .svc-more span{transition:transform .18s ease}
  a.svc:hover .svc-more span{transform:translateX(3px)}

  /* five-column footer */
  .foot-grid-wide{
    display:grid;
    grid-template-columns:1.6fr repeat(4, minmax(0,1fr));
    gap:var(--gap-wide) var(--gap-grid);align-items:start;
  }
  @media (max-width:1020px){
    .foot-grid-wide{grid-template-columns:1fr 1fr 1fr}
    .foot-grid-wide > div:first-child{grid-column:1 / -1}
  }
  @media (max-width:640px){
    .foot-grid-wide{grid-template-columns:1fr 1fr;gap:30px 20px}
  }

  /* internal platform links move sideways, not diagonally */
  a.proj:hover .proj-link span{transform:translateX(3px)}

  /* --- fixes found in browser testing --- */

  /* .btn-ghost defaults to dark text, which is invisible on the dark
     page-hero used by every sub-page. */
  .page-hero .btn-ghost{color:var(--white);border-color:rgba(255,255,255,.28)}
  .page-hero .btn-ghost:hover{border-color:var(--aqua);color:var(--aqua);background:rgba(255,255,255,.06)}

  /* Visually hidden but still read by screen readers and crawlers. Used for
     the <caption> on the key-facts tables. */
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  /* =====================================================================
     CONTACT COLUMN
     The left column used to be a single short card beside a tall form,
     which left a large empty block under it. It is now a stack: the
     contact details, then a "what happens next" tile that grows to
     absorb whatever height the form has.
     ===================================================================== */
  .contact-side{display:flex;flex-direction:column;gap:var(--space-s);min-width:0}
  .next-card{
    flex:1 1 auto;                 /* absorbs the leftover height */
    display:flex;flex-direction:column;
    background:var(--white);border:1px solid var(--line);
    border-radius:20px;padding:30px 34px;
  }
  .next-card h4{
    font-family:var(--display);font-size:17px;font-weight:600;
    color:var(--ink);margin:0 0 18px;
  }
  .mini-steps{list-style:none;margin:0;padding:0;display:grid;gap:16px}
  .mini-steps li{display:flex;gap:14px;align-items:flex-start}
  .mini-steps .n{
    flex:0 0 auto;width:26px;height:26px;border-radius:50%;
    background:var(--pale);color:var(--teal-deep);
    font-family:var(--mono);font-size:12px;font-weight:700;
    display:grid;place-items:center;margin-top:1px;
  }
  .mini-steps li > div{min-width:0;font-size:14px;color:var(--stone);line-height:1.5}
  .mini-steps strong{display:block;color:var(--ink);font-weight:600;font-size:14.5px;margin-bottom:2px}
  .next-note{
    margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
    font-size:13.5px;color:var(--stone);line-height:1.55;
  }
  @media (max-width:940px){
    .next-card{padding:26px 28px}
  }


  /* =====================================================================
     TRUSTED BY
     A quiet strip directly under the hero. Text rather than logos: two of
     the four are operators running under a larger brand rather than the
     brand itself, and showing that brand's logo would assert a
     relationship that does not exist.
     ===================================================================== */
  .trusted{background:var(--mist);padding:clamp(30px,3.4vw,44px) 0 var(--section-y-tight)}
  .trusted-label{
    display:block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--stone);margin-bottom:20px;
  }
  .trusted-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--gap-grid) var(--gap-wide);border-top:1px solid var(--line);padding-top:var(--space-m);
  }
  .tr-item{display:flex;flex-direction:column;gap:5px;min-width:0}
  .tr-name{
    font-family:var(--display);font-weight:600;font-size:17px;
    letter-spacing:-.01em;color:var(--ink);line-height:1.25;
  }
  .tr-sub{
    font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--current);
  }
  @media (max-width:820px){
    .trusted-grid{grid-template-columns:1fr 1fr;gap:var(--gap-grid)}
  }
  @media (max-width:420px){
    .trusted-grid{grid-template-columns:minmax(0,1fr)}
  }