/* Liquid glass sections (2 to contact), copied from updatedBody.html.
   Fonts are inherited from the page; tokens are scoped to the sections so the hero keeps its colours. */

  .cs,.uc,.tm,.fq,.ct{
    --bg:#ffffff;
    --ink:#1d1d1f; --ink-2:#424245; --ink-3:#86868b;
    --wire:#a3a3aa;
    --pulse:#2f8cff; --pulse-core:#eaf4ff;
    --led-on:#30d158;
    /* liquid glass, tuned for a white page */
    --glass-a:rgba(246,246,248,.92); --glass-b:rgba(234,234,238,.88);
    --rim:rgba(255,255,255,.6); --edge:rgba(255,255,255,.95);
    --inner-shade:rgba(30,40,90,.09);
    --hair:rgba(0,0,0,.06);
    --drop:rgba(30,40,90,.26); --contact:rgba(30,40,90,.09);
    --lens-a:rgba(255,255,255,.95); --lens-b:rgba(255,255,255,.5);
    --spec:rgba(255,255,255,.75); --sheen:rgba(255,255,255,.38);
    color-scheme:light;
  }
  *{box-sizing:border-box}
  html,body{margin:0}
  body{overflow-x:hidden}
  .cs,.uc,.tm,.fq,.ct{background:var(--bg); color:var(--ink)}

  /* =====================================================================
     Liquid glass (shared by tiles, icon chips and the CTA)
     ===================================================================== */
  .glass{
    position:relative; isolation:isolate;
    background:linear-gradient(180deg,var(--glass-a) 0%,var(--glass-b) 60%);
    -webkit-backdrop-filter:blur(14px) saturate(190%);
    backdrop-filter:blur(14px) saturate(190%);
    box-shadow:
      inset 0 0 0 1.5px var(--rim),
      inset 0 1px 0 var(--edge),
      inset 0 -8px 20px -10px var(--inner-shade),
      0 0 0 .5px var(--hair),
      0 18px 36px -16px var(--drop),
      0 2px 5px var(--contact);
  }
  /* lens rim: bright top-left, softer bottom-right */
  .glass::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
    background:linear-gradient(150deg,var(--lens-a) 0%,transparent 36%,transparent 64%,var(--lens-b) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  /* specular highlight that follows the pointer + top sheen */
  .glass::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
    background:
      radial-gradient(260px 200px at var(--mx,50%) var(--my,-10%),var(--spec),transparent 70%),
      linear-gradient(180deg,var(--sheen) 0%,transparent 45%);
    opacity:calc(.5 + var(--press,0)*.5);
    transition:opacity .25s;
  }
  .glass.interactive:hover::after{opacity:calc(.85 + var(--press,0)*.15)}

  /* =====================================================================
     Section layout
     ===================================================================== */
  .cs{display:flex; flex-direction:column}
  .cs-head{
    text-align:center;
    padding-block:10px;
    padding-inline:clamp(20px,4vw,64px);
    margin-bottom:clamp(28px,5svh,64px);
  }
  .cs-title{
    margin:clamp(14px,2.4svh,24px) auto 0;
    font-size:clamp(30px,min(3.7vw,6.6svh),56px); font-weight:500; line-height:1.08; letter-spacing:-.035em;
    color:#0d1330; text-wrap:balance;
  }

  /* Glass badge (from the supplied badge code, light mode) */
  .badge{
    --b-fill:rgba(255,255,255,.30);
    --b-hi:rgba(255,255,255,.95); --b-lo:rgba(255,255,255,.35); --b-edge:rgba(0,0,0,.06);
    --b-rim-a:rgba(255,255,255,.95); --b-rim-b:rgba(255,255,255,.55);
    --b-spec:rgba(255,255,255,.75); --b-sheen:rgba(255,255,255,.38);
    --b-shadow:rgba(30,40,90,.14); --b-shadow-2:rgba(30,40,90,.06);
    position:relative; isolation:isolate;
    display:inline-flex; align-items:center; justify-content:center;
    height:34px; padding:0 calc(20px - .22em) 0 20px;
    border-radius:999px;
    font-size:13px; font-weight:500; line-height:1; letter-spacing:.22em; text-transform:uppercase; color:#48484a;
    background:var(--b-fill);
    -webkit-backdrop-filter:blur(14px) saturate(190%);
    backdrop-filter:blur(14px) saturate(190%);
    box-shadow:
      inset 0 .5px 0 var(--b-hi),
      inset 0 -.5px 0 var(--b-lo),
      0 0 0 .5px var(--b-edge),
      0 4px 12px -6px var(--b-shadow),
      0 1px 2px var(--b-shadow-2);
    cursor:grab; user-select:none; -webkit-user-select:none;
    touch-action:pan-y; -webkit-tap-highlight-color:transparent;
    will-change:transform;
  }
  .lens .badge{-webkit-backdrop-filter:url(#lens); backdrop-filter:url(#lens)}
  .badge::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
    background:linear-gradient(150deg,var(--b-rim-a) 0%,transparent 36%,transparent 64%,var(--b-rim-b) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .badge::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
    background:
      radial-gradient(140px 90px at var(--mx,50%) var(--my,-20%),var(--b-spec),transparent 70%),
      linear-gradient(180deg,var(--b-sheen) 0%,transparent 55%);
    opacity:calc(.5 + var(--press,0)*.5);
    transition:opacity .25s;
  }
  .badge:hover::after{opacity:calc(.85 + var(--press,0)*.15)}

  /* Above tablet: the whole section is one viewport tall and wide */
  @media (min-width:1024px){
    .cs{min-height:100svh; padding-block:clamp(24px,4.4svh,64px)}
    .cs{justify-content:center}
    /* shorter content block; the header + block sit centred in the viewport */
    .cs-section{width:100%; height:clamp(460px,64svh,720px)}
  }

  .cs-section{
    display:grid;
    grid-template-columns:minmax(300px,500px) minmax(0,1fr);
    column-gap:clamp(40px,6vw,120px);
    align-items:stretch;
    max-width:1440px; margin:0 auto;
    padding-inline:clamp(20px,4vw,64px);
  }

  /* ---------- Left: copy ---------- */
  .cs-copy{display:flex; flex-direction:column; min-width:0}
  .cs-lede{
    margin:0 0 clamp(16px,3svh,40px);
    font-size:clamp(16px,1.3vw,18px); line-height:1.55; letter-spacing:-.01em; color:var(--ink-2);
    max-width:32em;
  }
  .cs-features{list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:12px}
  .cs-feature{display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:20px}
  .chip{
    width:clamp(46px,6.2svh,56px); height:clamp(46px,6.2svh,56px); border-radius:16px;
    display:grid; place-items:center; color:var(--ink);
  }
  .chip svg{width:24px; height:24px}
  .cs-feature h3{margin:0 0 3px; font-size:17px; font-weight:600; letter-spacing:-.015em; color:var(--ink)}
  .cs-feature p{margin:0; font-size:15px; line-height:1.4; color:var(--ink-3)}

  .cs-cta{padding-top:clamp(20px,3.4svh,44px); width:100%; max-width:480px}
  /* "Regular" liquid glass button (from the supplied button code, light mode) */
  .cta-btn{
    --b-fill:linear-gradient(180deg,rgba(241,241,244,.96) 0%,rgba(230,230,235,.94) 100%);
    --b-hi:rgba(255,255,255,.95); --b-lo:rgba(255,255,255,.35); --b-edge:rgba(0,0,0,.06);
    --b-rim-a:rgba(255,255,255,.95); --b-rim-b:rgba(255,255,255,.55);
    --b-spec:rgba(255,255,255,.75); --b-sheen:rgba(255,255,255,.38);
    --b-shadow:rgba(30,40,90,.30); --b-shadow-2:rgba(30,40,90,.10);
    position:relative; isolation:isolate;
    width:100%; height:clamp(52px,7svh,60px); padding:0 22px;
    display:flex; align-items:center; justify-content:center; gap:10px;
    border:0; border-radius:20px;
    font:inherit; font-size:18px; font-weight:560; letter-spacing:-.01em; color:var(--ink);
    text-decoration:none;
    background:var(--b-fill);
    -webkit-backdrop-filter:blur(14px) saturate(190%);
    backdrop-filter:blur(14px) saturate(190%);
    box-shadow:
      inset 0 .5px 0 var(--b-hi),
      inset 0 -.5px 0 var(--b-lo),
      0 0 0 .5px var(--b-edge),
      0 8px 22px -8px var(--b-shadow),
      0 1px 3px var(--b-shadow-2);
    cursor:pointer; user-select:none; -webkit-user-select:none;
    touch-action:pan-y; -webkit-tap-highlight-color:transparent;
    will-change:transform;
  }
  /* Chromium only: refract the backdrop through an SVG lens (enabled by the script) */
  .lens .cta-btn{-webkit-backdrop-filter:url(#lens); backdrop-filter:url(#lens)}
  .cta-btn::before{
    content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
    background:linear-gradient(150deg,var(--b-rim-a) 0%,transparent 36%,transparent 64%,var(--b-rim-b) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
  }
  .cta-btn::after{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
    background:
      radial-gradient(140px 90px at var(--mx,50%) var(--my,-20%),var(--b-spec),transparent 70%),
      linear-gradient(180deg,var(--b-sheen) 0%,transparent 55%);
    opacity:calc(.5 + var(--press,0)*.5);
    transition:opacity .25s;
  }
  .cta-btn:hover::after{opacity:calc(.85 + var(--press,0)*.15)}
  .cta-btn:focus-visible{outline:2px solid #007aff; outline-offset:3px}
  .cta-btn svg{width:19px; height:19px; flex:none; transition:transform .25s cubic-bezier(.3,.7,.4,1)}
  .cta-btn:hover svg{transform:translate(2px,-2px)}
  .cs-note{
    margin:18px 0 0; display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:14px; color:var(--ink-3);
  }
  .cs-note svg{width:15px; height:15px; flex:none; color:var(--ink-2)}

  /* ---------- Right: server + tiles ---------- */
  .cs-diagram{container-type:inline-size; min-width:0}
  @media (min-width:761px), (min-width:521px) and (orientation:landscape){ .cs-diagram{container-type:size} }

  .stage{
    --gx:clamp(12px,3.4cqi,36px);
    --wire-h:clamp(80px,18cqi,220px);
    --sw:min(clamp(260px,70cqi,640px),60svh);          /* server width */
    /* tile height (width x .86) never exceeds what the server + wires leave over */
    --tile-max:calc((100cqh - var(--sw) * .41 - var(--wire-h)) / .86);
    position:relative; height:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-template-rows:auto minmax(var(--wire-h),1fr) auto;
    grid-template-areas:
      "t1 t2 t3 t4"
      ".  .  .  . "
      "sv sv sv sv";
    column-gap:var(--gx);
  }
  .wires{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0}
  .wire{fill:none; stroke:var(--wire); stroke-width:1.6; stroke-linecap:round}
  .arrow{fill:var(--wire)}
  .pulse{fill:none; stroke-linecap:round}
  .pulse.glow{stroke:var(--pulse); stroke-width:4; opacity:.28}
  .pulse.core{stroke:var(--pulse-core); stroke-width:1.4; opacity:.9}
  .pulse.tint{stroke:var(--pulse); stroke-width:2.2; opacity:.7}

  .tile[data-i="0"]{grid-area:t1}
  .tile[data-i="1"]{grid-area:t2}
  .tile[data-i="2"]{grid-area:t3}
  .tile[data-i="3"]{grid-area:t4}

  .tile{
    z-index:1;
    container-type:inline-size;            /* icon + label scale with the tile */
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(6px,6cqi,18px);
    width:100%; max-width:var(--tile-max,none); justify-self:center; aspect-ratio:216/186; padding:0 6px;
    border:0; border-radius:clamp(14px,11cqi,24px);
    font:inherit; font-size:clamp(11.5px,8.6cqi,18px); font-weight:500; letter-spacing:-.015em; line-height:1.25;
    color:var(--ink); text-align:center;
    cursor:grab; user-select:none; -webkit-user-select:none;
    touch-action:pan-y; -webkit-tap-highlight-color:transparent;
    will-change:transform;
  }
  .tile:active{cursor:grabbing}
  .tile:focus-visible{outline:2px solid var(--pulse); outline-offset:3px}
  .tile svg{width:clamp(22px,27cqi,58px); height:auto; aspect-ratio:1; opacity:.8; flex:none}
  .tile .label{opacity:.88; max-width:12ch}

  .server{
    grid-area:sv; justify-self:center; position:relative; z-index:2;
    width:var(--sw);
    padding:0; border:0; background:none; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .2s cubic-bezier(.3,.7,.4,1);
  }
  .server::before,.server::after{content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%}
  .server::before{
    left:0; right:0; bottom:-13%; height:22%;
    background:radial-gradient(50% 50% at 50% 50%,rgba(20,25,40,.4),rgba(20,25,40,.14) 58%,transparent 76%);
    filter:blur(7px);
  }
  .server::after{
    left:5%; right:5%; bottom:-3%; height:4.2%;
    background:rgba(10,12,20,.62);
    filter:blur(3.5px);
  }
  .server img{display:block; width:100%; height:auto; pointer-events:none; user-select:none; -webkit-user-drag:none}
  .server:active{transform:translateY(1px) scale(.995)}
  .server:focus-visible{outline:2px solid var(--pulse); outline-offset:6px; border-radius:18px}
  .led{
    position:absolute; left:88.4%; top:75.3%; width:1.4%; aspect-ratio:1; border-radius:50%;   /* matched to the dot in the updated server.webp */
    transform:translate(-50%,-50%); pointer-events:none;
    background:color-mix(in srgb,var(--led-on) calc(var(--led,0) * 100%),#fff);
    box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06);
  }

  /* =====================================================================
     Tablet: side by side. The right column is too narrow for 4 tiles in a
     row, so the diagram switches to the 2-above / 2-below arrangement,
     with the server centred in the column.
     ===================================================================== */
  @media (max-width:1023px){
    .cs-title{font-size:clamp(28px,5.6vw,44px)}
    .cs-section{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(28px,4vw,48px)}
  }
  /* 2 above / 2 below from 1199px down: below that, 4 tiles in a row get too narrow */
  @media (max-width:1199px){
    .stage{
      --wire-h:clamp(36px,11cqi,72px);
      --sw:min(62cqi,270px);
      --tile-max:calc((100cqh - var(--sw) * .41 - 2 * var(--wire-h)) / 1.8);
      height:100%;
      grid-template-columns:repeat(2,minmax(0,1fr));
      grid-template-rows:1fr var(--wire-h) auto var(--wire-h) 1fr;
      grid-template-areas:
        "t1 t2"
        ".  . "
        "sv sv"
        ".  . "
        "t3 t4";
      column-gap:clamp(12px,3.5cqi,18px);
    }
    .tile{aspect-ratio:1/.9}
    .tile[data-i="0"],.tile[data-i="1"]{align-self:end}
    .tile[data-i="2"],.tile[data-i="3"]{align-self:start}
    .server{width:var(--sw)}
  }
  @media (max-width:1023px) and (min-width:761px), (max-width:1023px) and (min-width:521px) and (orientation:landscape){
    /* tablet: fill the screen; text and diagram share whatever height is left under the header */
    .cs{min-height:100svh; padding-block:clamp(24px,4svh,48px)}
    .cs-section{flex:1}
  }

  /* =====================================================================
     Mobile portrait: stacked, diagram first (server centred in 100svh)
     ===================================================================== */
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .cs{padding-top:clamp(16px,3svh,28px)}
    .cs-section{grid-template-columns:minmax(0,1fr); row-gap:0; padding-inline:18px}
    .cs-head{padding-inline:18px; margin-bottom:8px}
    /* copy gets its own full screen; the feature list spreads to fill it */
    .cs-copy{min-height:100svh; padding-block:clamp(28px,5svh,48px)}
    .badge{height:30px; font-size:11.5px; padding:0 calc(16px - .22em) 0 16px}
    .cs-diagram{order:-1}
    .cs-copy{max-width:none; padding-inline:10px}   /* +10px each side, text only */
    .cs-cta{max-width:none}
    .stage{
      --wire-h:clamp(30px,7.5svh,96px);
      --sw:min(80vw,340px,40svh);
      /* badge + headline + diagram together fill the first screen (--s1-top set by script) */
      height:calc(100svh - var(--s1-top,190px));
      --tile-max:calc((100svh - var(--s1-top,190px) - var(--sw) * .41 - 2 * var(--wire-h) - 8px) / 1.8);
      max-width:460px; margin:0 auto; width:100%;
      grid-template-columns:repeat(2,minmax(0,1fr));
      grid-template-rows:1fr var(--wire-h) auto var(--wire-h) 1fr;
      grid-template-areas:
        "t1 t2"
        ".  . "
        "sv sv"
        ".  . "
        "t3 t4";
      column-gap:14px;
    }
    .tile{aspect-ratio:1/.9}
    .tile[data-i="0"],.tile[data-i="1"]{align-self:end}
    .tile[data-i="2"],.tile[data-i="3"]{align-self:start}
    .server{width:var(--sw)}
    .cta-btn{height:56px; font-size:17px}
  }

  /* =====================================================================
     SECTION 2 — Private AI use cases orbit
     Reuses .cs-head / .badge / .cs-title / .glass / .chip / .wires from section 1
     ===================================================================== */
  .uc{display:flex; flex-direction:column}
  @media (min-width:1024px){
    .uc{min-height:100svh; padding-block:clamp(24px,4.4svh,64px); justify-content:center}
  }

  .uc-field{
    --fh:clamp(340px,46svh,540px);          /* orbit height; the server is sized from it */
    position:relative;
    width:100%; max-width:1360px; margin:0 auto;
    padding-inline:clamp(20px,4vw,64px);
    height:var(--fh);
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-rows:repeat(3,1fr);
    column-gap:clamp(56px,7vw,120px);
    row-gap:clamp(12px,2svh,22px);
  }

  .uc-server{
    grid-column:2; grid-row:1 / -1; align-self:center; justify-self:center;
    position:relative; z-index:2;
    width:calc(var(--fh) * .5);
    padding:0; border:0; background:none; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .2s cubic-bezier(.3,.7,.4,1);
  }
  .uc-server img{display:block; width:100%; height:auto; pointer-events:none; user-select:none; -webkit-user-drag:none}
  .uc-server:active{transform:translateY(1px) scale(.995)}
  .uc-server:focus-visible{outline:2px solid var(--pulse); outline-offset:6px; border-radius:14px}
  /* resting-on-a-surface shadow */
  .uc-server::before,.uc-server::after{content:""; position:absolute; z-index:-1; pointer-events:none; border-radius:50%}
  .uc-server::before{
    left:-14%; right:-14%; bottom:-6%; height:12%;
    background:radial-gradient(50% 50% at 50% 50%,rgba(20,25,40,.36),rgba(20,25,40,.12) 58%,transparent 76%);
    filter:blur(7px);
  }
  .uc-server::after{
    left:4%; right:4%; bottom:-1.2%; height:2.6%;
    background:rgba(10,12,20,.6);
    filter:blur(3px);
  }
  /* faint blue bloom behind the server when it sends a pulse */
  .uc-glow{
    position:absolute; inset:-12% -40%; z-index:-2; pointer-events:none; border-radius:50%;
    background:radial-gradient(closest-side,var(--pulse),transparent);
    filter:blur(22px);
    opacity:calc(var(--glow,0) * .16);
  }

  .uc-card{
    z-index:1;
    width:100%; max-width:380px; min-width:0; align-self:center;
    display:flex; align-items:center; gap:clamp(10px,1vw,14px);
    padding:clamp(12px,1.4svh,16px) clamp(14px,1.3vw,18px);
    border-radius:clamp(16px,1.5vw,20px);
    color:var(--ink); text-align:left;
    cursor:grab; user-select:none; -webkit-user-select:none;
    touch-action:pan-y; -webkit-tap-highlight-color:transparent;
    will-change:transform;
  }
  .uc-card:active{cursor:grabbing}
  .uc-card:focus-visible{outline:2px solid var(--pulse); outline-offset:3px}
  .uc-card[data-side="l"]{grid-column:1; justify-self:end}
  .uc-card[data-side="r"]{grid-column:3; justify-self:start}
  .uc-card[data-row="0"]{grid-row:1}
  .uc-card[data-row="1"]{grid-row:2}
  .uc-card[data-row="2"]{grid-row:3}
  .uc-card .chip{flex:none; width:clamp(40px,3.6vw,52px); height:clamp(40px,3.6vw,52px); border-radius:14px}
  .uc-card .chip svg{width:clamp(20px,1.7vw,24px); height:auto}
  .uc-card h3{margin:0; font-size:clamp(14px,1.05vw,16px); font-weight:600; letter-spacing:-.015em; line-height:1.3; color:var(--ink)}
  .uc-card p{margin:2px 0 0; font-size:clamp(12px,.9vw,13.5px); line-height:1.4; color:var(--ink-3)}

  .uc-dep{margin:clamp(20px,3.4svh,44px) 0 0; text-align:center; padding-inline:20px}
  .uc-dep h3{
    margin:0; font-size:clamp(22px,min(2.2vw,3.6svh),34px); font-weight:500; letter-spacing:-.03em; line-height:1.15; color:#0d1330;
  }
  .uc-dep p{margin:6px 0 0; font-size:clamp(15px,1.9svh,19px); color:var(--ink-3)}

  .uc-stats{
    margin:clamp(18px,3.2svh,44px) auto 0; width:min(1180px,100%);
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .uc-stat{display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; padding:0 clamp(12px,4vw,64px)}
  .uc-stat + .uc-stat{border-left:1px solid transparent; border-image:linear-gradient(180deg,transparent,rgba(40,50,80,.16),transparent) 1}
  .uc-stat b{font-size:clamp(28px,min(3vw,4.8svh),44px); font-weight:500; letter-spacing:-.03em; line-height:1; color:#0d1330}
  .uc-stat span{font-size:clamp(13px,1.8svh,16px); color:var(--ink-3)}

  /* ---------- Tablet: same orbit, smaller parts, height from content ---------- */
  @media (max-width:1023px){
    .uc-field{--fh:400px; height:auto; column-gap:60px; row-gap:14px; padding-inline:clamp(20px,3vw,32px)}
    .uc-server{width:150px}
    .uc-card{padding:12px 14px; gap:10px; border-radius:16px; max-width:300px}
    .uc-card .chip{width:40px; height:40px; border-radius:12px}
    .uc-card .chip svg{width:20px}
    .uc-card h3{font-size:14px}
    .uc-card p{font-size:12px}
    .uc-dep{margin-top:40px}
    .uc-dep h3{font-size:28px}
  }

  /* ---------- Mobile: 3 cards above, server, 3 below; cards stack icon over text ---------- */
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .uc{min-height:100svh; padding-block:clamp(16px,3svh,28px) clamp(20px,3.4svh,32px)}
    .uc-field{
      flex:1; height:auto;
      padding-inline:14px; column-gap:10px; row-gap:0;
      grid-template-columns:repeat(3,minmax(0,1fr));
      grid-template-rows:auto minmax(30px,1fr) auto minmax(30px,1fr) auto;   /* spare height goes to the wires */
    }
    .uc-server{grid-column:1 / -1; grid-row:3; width:clamp(88px,13svh,128px)}
    .uc-card p{display:none}            /* titles only on mobile, so the section fits one screen */
    .uc .cs-head{margin-bottom:22px}
    .uc-card[data-side="l"]{grid-row:1; align-self:end}
    .uc-card[data-side="r"]{grid-row:5; align-self:start}
    .uc-card[data-row="0"]{grid-column:1}
    .uc-card[data-row="1"]{grid-column:2}
    .uc-card[data-row="2"]{grid-column:3}
    .uc-card[data-side]{justify-self:stretch; height:100%}
    .uc-card{
      flex-direction:column; align-items:center; justify-content:flex-start; text-align:center;
      gap:10px; padding:16px 8px; border-radius:18px;
    }
    .uc-card .chip{width:38px; height:38px; border-radius:11px}
    .uc-card .chip svg{width:19px}
    .uc-card h3{font-size:13px; line-height:1.25}
    .uc-card p{font-size:11.5px; line-height:1.35}
    .uc-dep{margin-top:clamp(16px,3svh,32px)}
    .uc-dep h3{font-size:24px}
    .uc-dep p{font-size:15px}
    .uc-stats{margin-top:24px; padding-inline:8px}
    .uc-stat{padding:0 6px}
    .uc-stat b{font-size:28px}
    .uc-stat span{font-size:12.5px}
  }

  /* coloured glossy icon bead + a faint matching tint on each card */
  .uc-card{--t1:#eef1f7; --t2:#dfe4ee; --ic:#1d1d1f; --tint:transparent}
  .t-blue  {--t1:#E6EEFF; --t2:#C9DAFF; --ic:#2F6BFF; --tint:rgba(47,107,255,.07)}
  .t-violet{--t1:#EFEAFF; --t2:#D8CCFF; --ic:#6A4CF0; --tint:rgba(106,76,240,.07)}
  .t-green {--t1:#E2F7ED; --t2:#BDEBD5; --ic:#0F9460; --tint:rgba(15,148,96,.07)}
  .t-orange{--t1:#FFEFE3; --t2:#FFD3B3; --ic:#E5690E; --tint:rgba(229,105,14,.07)}
  .t-indigo{--t1:#EAEBFF; --t2:#CDD1FF; --ic:#4F52E8; --tint:rgba(79,82,232,.07)}
  .t-teal  {--t1:#E0F6F6; --t2:#B8E8E8; --ic:#0E8A8F; --tint:rgba(14,138,143,.07)}
  .uc-card{--glass-a:rgba(253,253,254,.97); --glass-b:rgba(246,246,249,.95)}
  .uc-card{background:
    radial-gradient(120% 140% at 0% 0%,var(--tint),transparent 60%),
    linear-gradient(180deg,var(--glass-a) 0%,var(--glass-b) 60%)}
  .bead{
    flex:none; display:grid; place-items:center;
    width:clamp(34px,2.9vw,42px); height:clamp(34px,2.9vw,42px); border-radius:12px;
    color:var(--ic);
    background:
      radial-gradient(80% 60% at 30% 15%,rgba(255,255,255,.9),transparent 60%),
      linear-gradient(150deg,var(--t1),var(--t2));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(255,255,255,.8),0 5px 12px -5px rgba(30,40,90,.35);
  }
  .bead svg{width:clamp(17px,1.45vw,21px); height:auto; stroke-width:2}
  @media (max-width:1023px){
    .bead{width:34px; height:34px; border-radius:10px}
    .bead svg{width:18px}
  }
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .uc-card{background:
      radial-gradient(140% 90% at 50% 0%,var(--tint),transparent 65%),
      linear-gradient(180deg,var(--glass-a) 0%,var(--glass-b) 60%)}
    .bead{width:38px; height:38px; border-radius:11px}
    .bead svg{width:20px}
  }

  /* =====================================================================
     SECTION 3 — Client story (testimonials)
     ===================================================================== */
  .tm{display:flex; flex-direction:column}
  @media (min-width:1024px){
    .tm{min-height:100svh; padding-block:clamp(24px,4.4svh,64px); justify-content:center}
    .tm .cs-head{margin-bottom:clamp(18px,3.6svh,56px)}
  }
  .tm-sub{
    margin:clamp(10px,1.6svh,18px) auto 0; max-width:44em;
    font-size:clamp(16px,2.1svh,20px); line-height:1.45; letter-spacing:-.01em; color:var(--ink-3);
    text-wrap:balance;
  }
  .tm-grid{
    width:100%; max-width:1440px; margin:0 auto;
    padding:0 clamp(20px,4vw,64px) 16px;         /* bottom room for card shadows */
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,32px);
  }
  .tm-card{
    --glass-a:rgba(253,253,254,.97); --glass-b:rgba(246,246,249,.95);
    display:flex; flex-direction:column;
    padding:clamp(16px,2.6svh,32px) clamp(20px,2vw,30px);
    border-radius:24px; color:var(--ink);
    cursor:grab; user-select:none; -webkit-user-select:none;
    touch-action:pan-y; -webkit-tap-highlight-color:transparent;
    will-change:transform;
  }
  .tm-card:active{cursor:grabbing}
  .tm-card:focus-visible{outline:2px solid var(--pulse); outline-offset:3px}

  .tm-org{display:flex; align-items:center; gap:14px}
  .tm-org .bead{width:48px; height:48px; border-radius:14px}
  .tm-org .bead svg{width:24px}
  .tm-org h3{margin:0; font-size:clamp(16px,1.35vw,19px); font-weight:600; letter-spacing:-.015em; color:var(--ink)}
  .tm-org p{margin:2px 0 0; font-size:14px; color:var(--ink-3)}
  .tm-rule{height:1px; border:0; margin:clamp(10px,2svh,22px) 0; background:linear-gradient(90deg,rgba(40,50,80,.12),rgba(40,50,80,.04))}

  .tm-tag{display:flex; align-items:center; gap:7px; margin:0; font-size:15px; font-weight:500; color:#2F6BFF}
  .tm-tag svg{width:17px; height:17px; flex:none}
  .tm-desc{margin:8px 0 0; font-size:clamp(12.5px,1.6svh,14px); line-height:1.5; color:var(--ink-3)}

  .tm-quote{flex:1; display:flex; gap:10px; margin:clamp(12px,2.4svh,26px) 0 0}
  .tm-quote svg{width:20px; height:20px; flex:none; margin-top:3px; color:#2F6BFF}
  .tm-quote p{margin:0; font-size:clamp(13.5px,1.75svh,16px); line-height:1.55; letter-spacing:-.01em; color:var(--ink-2)}

  .tm-author{display:flex; align-items:center; gap:12px; margin-top:clamp(12px,2.4svh,26px)}
  .tm-avatar{
    flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
    font-size:14px; font-weight:600; letter-spacing:.02em; color:#fff;
    background:radial-gradient(80% 60% at 30% 15%,rgba(255,255,255,.35),transparent 60%),linear-gradient(150deg,#5B8CFF,#2448C8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 5px 12px -5px rgba(30,40,90,.45);
  }
  .tm-author b{display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
  .tm-author div span{display:block; font-size:13.5px; color:var(--ink-3)}

  /* ---------- Tablet + mobile: swipeable row of cards ---------- */
  @media (max-width:1023px){
    .tm-grid{
      display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain;
      scroll-snap-type:x mandatory; scroll-padding-inline:clamp(20px,4vw,32px);
      padding:8px clamp(20px,4vw,32px) 28px;
      scrollbar-width:none;
    }
    .tm-grid::-webkit-scrollbar{display:none}
    .tm-card{flex:0 0 min(380px,82vw); scroll-snap-align:start; touch-action:pan-x pan-y}
    .tm .cs-head{margin-bottom:28px}
  }
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .tm-sub{font-size:16px}
    .tm-card{padding:22px 20px}
  }

  /* =====================================================================
     SECTION 4 — Contact
     ===================================================================== */
  /* min-height, never a cap: the section is at least one screen and its
     content stretches to fill it (the message box absorbs spare height) */
  .ct{display:flex; flex-direction:column; min-height:100svh}
  @media (min-width:1024px){ .ct{padding-top:clamp(24px,5svh,72px)} }
  .ct-wrap{
    width:100%; max-width:1440px; margin:0 auto; flex:1;
    padding-inline:clamp(20px,4vw,64px);
    display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    column-gap:clamp(40px,5vw,88px); align-items:stretch;
  }

  /* ---------- left: heading, email, form ---------- */
  .ct-main{display:flex; flex-direction:column; min-width:0}
  .ct-title{margin:0; font-size:clamp(40px,min(5vw,8svh),84px); font-weight:500; line-height:1.02; letter-spacing:-.045em; color:#0d1330}
  .ct-lede{margin:clamp(8px,1.4svh,16px) 0 0; font-size:clamp(16px,2.2svh,21px); line-height:1.45; color:var(--ink-3)}

  .ct-email{margin-top:clamp(18px,3.4svh,40px)}
  .ct-kicker{margin:0; font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
  .ct-email-row{display:flex; align-items:center; gap:12px; margin-top:6px}
  .ct-email-row a{font-size:clamp(20px,3svh,28px); font-weight:500; letter-spacing:-.02em; color:var(--ink); text-decoration:none}
  .ct-email-row a:hover{color:#2F6BFF}
  .ct-copy{width:36px; height:36px; border:0; padding:0; border-radius:11px; cursor:pointer; display:grid; place-items:center; color:var(--ink-2)}
  .ct-copy svg{width:17px; height:17px}
  .ct-copy .ok{display:none; color:#0F9460}
  .ct-copy.done .ok{display:block}
  .ct-copy.done .cp{display:none}
  .ct-copied{font-size:13px; color:#0F9460; opacity:0; transition:opacity .2s}
  .ct-copy.done + .ct-copied{opacity:1}
  .ct-note{margin:4px 0 0; font-size:14px; color:var(--ink-3)}

  .ct-rule{height:1px; border:0; margin:clamp(16px,3svh,36px) 0; background:linear-gradient(90deg,rgba(40,50,80,.12),rgba(40,50,80,.03))}
  .ct-form{flex:1; display:flex; flex-direction:column}
  .ct-form h3{margin:0 0 clamp(12px,2svh,22px); font-size:clamp(19px,2.6svh,26px); font-weight:500; letter-spacing:-.02em; color:#0d1330}
  .ct-grid{
    flex:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto 1fr;
    gap:clamp(12px,2svh,22px) clamp(14px,1.6vw,24px);
  }
  .ct-full{grid-column:1 / -1}
  .ct-field label{display:block; margin-bottom:7px; font-size:14px; color:var(--ink-2)}
  .ct-field input,.ct-field textarea{
    width:100%; border:0; border-radius:14px; outline:none;
    font:inherit; font-size:15.5px; color:var(--ink);
    background:linear-gradient(180deg,#fdfdfe,#f7f8fb);
    box-shadow:inset 0 0 0 1px rgba(40,50,80,.14),inset 0 1px 2px rgba(20,30,60,.05),0 1px 0 rgba(255,255,255,.9);
    transition:box-shadow .2s;
  }
  .ct-field input{height:clamp(46px,6svh,54px); padding:0 18px}
  .ct-field.ct-full{display:flex; flex-direction:column}
  .ct-field textarea{flex:1; min-height:clamp(64px,10svh,120px); padding:14px 18px; resize:none; line-height:1.5}
  .ct-field ::placeholder{color:var(--ink-3); opacity:.75}
  .ct-field input:focus,.ct-field textarea:focus{box-shadow:inset 0 0 0 1.5px #2F6BFF,0 0 0 4px rgba(47,107,255,.12)}
  .ct-field input:user-invalid,.ct-field textarea:user-invalid,.ct-tried .ct-field :is(input,textarea):invalid{box-shadow:inset 0 0 0 1.5px #f0a3a3,0 0 0 4px rgba(217,58,58,.06)}

  .ct-actions{display:flex; align-items:center; justify-content:flex-end; gap:16px; margin-top:clamp(16px,2.6svh,28px)}
  .ct-status{margin:0 auto 0 0; font-size:14px; color:var(--ink-3)}
  .ct-status.ok{color:#0F9460}
  /* success and error messages stand out: a tinted pill, semibold */
  .ct-status.ok,.ct-status.err{display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.5em .95em; border-radius:50px; font-weight:600; line-height:1.35}
  .ct-status.ok{background:#e6f6ee; color:#0b7a4b}
  .ct-status.err{padding:0; background:none; color:#c22d2d; font-weight:500}   /* plain red text, medium */
  .ct-status.ok::before{content:""; flex:none; width:.45em; height:.45em; border-radius:50%; background:currentColor}
  .cta-btn.primary{
    --b-fill:linear-gradient(180deg,#2451cf 0%,#15319a 100%);
    --b-hi:rgba(255,255,255,.55); --b-lo:rgba(255,255,255,.12); --b-edge:rgba(10,30,90,.25);
    --b-rim-a:rgba(255,255,255,.6); --b-rim-b:rgba(255,255,255,.25);
    --b-spec:rgba(255,255,255,.35); --b-sheen:rgba(255,255,255,.2);
    --b-shadow:rgba(28,63,178,.55); --b-shadow-2:rgba(28,63,178,.2);
    width:auto; height:clamp(48px,6.4svh,56px); padding:0 26px; border-radius:16px;
    color:#fff; font-size:17px;
  }
  .lens .cta-btn.primary{-webkit-backdrop-filter:none; backdrop-filter:none}
  .cta-btn.primary:hover svg{transform:translate(2px,-2px)}

  /* ---------- right: "What we do" panel ---------- */
  .ct-panel{
    --glass-a:rgba(255,255,255,.74); --glass-b:rgba(250,251,255,.66);
    overflow:hidden; border-radius:28px;
    padding:clamp(24px,3.6svh,44px) clamp(24px,2.6vw,40px) clamp(14px,2svh,24px);
    display:flex; flex-direction:column;
  }
  .ct-wash{position:absolute; inset:0; z-index:-2; pointer-events:none}
  .ct-wash i{position:absolute; border-radius:50%; filter:blur(56px); animation:ct-drift 22s ease-in-out infinite alternate}
  .ct-wash i:nth-child(1){width:70%; height:40%; right:-22%; top:-10%; background:#4a78f2; opacity:.5}
  .ct-wash i:nth-child(2){width:55%; height:36%; left:-18%; bottom:-10%; background:#8aa8ff; opacity:.45; animation-duration:27s}
  .ct-wash i:nth-child(3){width:40%; height:30%; right:-8%; bottom:18%; background:#b9a6ff; opacity:.3; animation-duration:31s}
  @keyframes ct-drift{to{transform:translate3d(-26px,20px,0) scale(1.1)}}
  @media (prefers-reduced-motion:reduce){.ct-wash i{animation:none}}

  .ct-panel .ct-kicker{color:#2F6BFF}
  .ct-panel-title{
    margin:10px 0 0; max-width:18ch;
    font-size:clamp(22px,3.1svh,30px); font-weight:500; line-height:1.15; letter-spacing:-.03em; color:#0d1330;
  }
  .ct-list{list-style:none; margin:clamp(12px,2.4svh,28px) 0 0; padding:0; flex:1; display:flex; flex-direction:column}
  .ct-list li{
    flex:1; position:relative;
    display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; align-items:center;
    padding:clamp(10px,1.7svh,18px) 12px; margin-inline:-12px; border-radius:16px;
    transition:background .25s;
  }
  .ct-list li + li::before{content:""; position:absolute; top:0; left:12px; right:12px; height:1px; background:rgba(40,50,80,.08)}
  .ct-list li:hover{background:rgba(255,255,255,.6)}
  .ct-list li:hover::before,.ct-list li:hover + li::before{opacity:0}
  .ct-list .bead{width:42px; height:42px; border-radius:12px}
  .ct-list .bead svg{width:20px}
  .ct-list h4{margin:0; font-size:clamp(15.5px,2svh,18px); font-weight:600; letter-spacing:-.015em; color:#0d1330}
  .ct-list p{margin:3px 0 0; font-size:clamp(13.5px,1.75svh,15px); line-height:1.45; color:var(--ink-2)}

  /* ---------- footer ---------- */
  .ct-foot{
    width:100%; max-width:1440px; margin:clamp(28px,4.6svh,56px) auto 0;
    padding:18px clamp(20px,4vw,64px) 22px;
    display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
    font-size:14px; color:var(--ink-3); border-top:1px solid rgba(40,50,80,.08);
  }
  .ct-foot a{color:var(--ink-3); text-decoration:none}
  .ct-foot a:hover{color:var(--ink)}

  /* ---------- tablet + mobile: stacked, "What we do" first ---------- */
  @media (max-width:1023px){
    .ct{padding-top:clamp(20px,4svh,40px)}
    .ct-wrap{grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; row-gap:48px}
    .ct-panel{order:-1}
    .ct-title{font-size:clamp(40px,8vw,64px)}
  }
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .ct-wrap{padding-inline:24px; row-gap:40px}
    .ct-grid{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto 1fr}
    .ct-actions{flex-direction:column-reverse; align-items:stretch}
    .ct-status{margin:0; text-align:center}
    .cta-btn.primary{width:100%}
    .ct-panel{padding:26px 20px 12px; border-radius:24px}
    .ct-list .bead{width:38px; height:38px; border-radius:11px}
    .ct-foot{padding-inline:24px; justify-content:center; text-align:center}
  }

  /* section 1 feature icons: a touch of colour (same palette as section 2) */
  .cs-feature .chip{
    color:var(--ic);
    background:
      radial-gradient(80% 60% at 30% 15%,rgba(255,255,255,.85),transparent 60%),
      linear-gradient(160deg,color-mix(in srgb,var(--t1) 85%,#fff) 0%,#f7f8fb 100%);
  }

  /* =====================================================================
     SECTION FRAME — one set of margins for sections 1–3 (contact untouched)
     top / sides / bottom, and the gap between header and content
     ===================================================================== */
  :root{
    --sx:clamp(20px,4vw,64px);          /* left + right (same as the contact section) */
    --st:clamp(28px,5.6svh,72px);       /* top */
    --sb:clamp(28px,5.6svh,72px);       /* bottom */
    --shead:calc(clamp(20px,4svh,48px) + 20px);   /* header → content */
    --smax:clamp(1760px,88vw,2200px);   /* content max width, incl. side margins: grows on 24–27" screens */
  }
  @media (min-width:761px), (min-width:521px) and (orientation:landscape){
    .cs,.uc,.tm,.fq{padding:var(--st) 0 var(--sb); justify-content:flex-start}
    .cs > .cs-head,.uc > .cs-head,.tm > .cs-head,.fq > .cs-head{
      width:100%; max-width:var(--smax); margin:0 auto var(--shead); padding:0 var(--sx);
    }
    .cs-section,.uc-field,.tm-grid,.fq-body{width:100%; max-width:var(--smax); margin-inline:auto; padding-inline:var(--sx)}
    .tm-grid{padding-top:0}
    .uc-dep{padding-inline:var(--sx)}
  }

  /* Above tablet: each section is exactly one screen; the content area takes
     whatever height is left and the parts inside size themselves to it */
  @media (min-width:1024px){
    .cs,.uc,.tm,.fq{height:max(100svh,600px); min-height:0}
    .cs-section{flex:1; min-height:0; height:auto}

    .uc-field{flex:1; min-height:0; height:auto; container-type:size}
    .uc-server{width:calc(100cqh * .5956); align-self:start}   /* server = full orbit height (243×408 image) */

    .tm-grid{flex:1; min-height:0; container-type:size; grid-template-rows:minmax(0,1fr); padding-bottom:0}
    .tm-card{padding:clamp(14px,4.6cqh,40px) clamp(16px,1.9vw,40px)}
    .tm-org .bead{width:clamp(38px,8.4cqh,56px); height:clamp(38px,8.4cqh,56px)}
    .tm-org h3{font-size:clamp(15px,3.4cqh,22px)}
    .tm-org p{font-size:clamp(12.5px,2.4cqh,16px)}
    .tm-rule{margin:clamp(8px,3cqh,22px) 0}
    .tm-tag{font-size:clamp(13px,2.6cqh,17px)}
    .tm-desc{font-size:clamp(11.5px,min(2.4cqh,.98vw),16px); margin-top:clamp(4px,1.2cqh,10px)}
    .tm-quote{margin-top:clamp(10px,3.4cqh,26px)}
    .tm-quote p{font-size:clamp(12px,min(3.1cqh,1.22vw),21px); line-height:1.5}
    .tm-author{margin-top:clamp(10px,3.4cqh,26px)}
    .tm-avatar{width:clamp(34px,7.6cqh,52px); height:clamp(34px,7.6cqh,52px)}
    .tm-author b{font-size:clamp(14px,2.6cqh,17px)}
    .tm-author div span{font-size:clamp(12.5px,2.3cqh,15px)}
  }

  /* Section 2 = three blocks in a column: header / orbit + caption / stats */
  .uc-mid{display:flex; flex-direction:column}
  @media (min-width:1024px){
    .uc{justify-content:space-between}
    .uc > .cs-head{margin-bottom:0}
    .uc-mid{flex:1; min-height:0; margin-block:var(--shead)}   /* the orbit takes all the height between */
    .uc-mid .uc-field{flex:1}
    .uc-stats{margin-top:0; width:100%; max-width:var(--smax); padding-inline:var(--sx)}
    /* cards sit out at the content edges instead of hugging the server */
    .uc-card[data-side="l"]{justify-self:start}
    .uc-card[data-side="r"]{justify-self:end}
    /* top cards flush with the top of the orbit, bottom cards with its bottom, so the
       header → content gap matches sections 1 and 3 */
    .uc-card[data-row="0"]{align-self:start}
    .uc-card[data-row="2"]{align-self:end}
  }
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .uc-mid{flex:1}
  }

  /* section 2 headline on two lines (tablet + desktop); mobile wraps naturally */
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){ .uc-br{display:none} }

  /* =====================================================================
     TYPE SCALE — one set of font sizes for every section
     ===================================================================== */
  :root{
    --fs-kicker:12.5px;                                   /* badges, small caps labels */
    --fs-h2:clamp(30px,min(3.7vw,6.6svh),56px);           /* section headlines */
    --fs-h3:clamp(20px,min(1.9vw,3.2svh),30px);           /* sub-headings, email */
    --fs-lede:clamp(15px,min(1.3vw,2.1svh),19px);         /* intro / subtitle lines */
    --fs-title:clamp(14px,min(1.15vw,2svh),18px);         /* card + list item titles */
    --fs-body:clamp(13px,min(1vw,1.75svh),15px);          /* card + list descriptions */
    --fs-small:clamp(12px,min(.9vw,1.6svh),14px);         /* captions, labels, meta */
    --fs-quote:clamp(14px,min(1.3vw,2.2svh),21px);        /* testimonial quote */
    --fs-stat:clamp(28px,min(3vw,4.8svh),44px);           /* stat numbers */
    --fs-button:clamp(15px,min(1.2vw,2.1svh),18px);       /* buttons */
  }
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    :root{
      --fs-kicker:11.5px; --fs-h2:clamp(28px,7.6vw,34px); --fs-h3:22px; --fs-lede:16px;
      --fs-title:15px; --fs-body:14px; --fs-small:12.5px; --fs-quote:15.5px; --fs-stat:28px; --fs-button:17px;
    }
  }

  .badge,.ct-kicker{font-size:var(--fs-kicker)}
  .cs-title,.ct-title{font-size:var(--fs-h2); font-weight:500; line-height:1.08; letter-spacing:-.035em}
  .cs-lede,.tm-sub,.ct-lede,.uc-dep p{font-size:var(--fs-lede)}
  .uc-dep h3,.ct-form h3,.ct-panel-title,.ct-email-row a{font-size:var(--fs-h3)}
  .cs-feature h3,.uc-card h3,.ct-list h4,.tm-org h3,.tm-author b{font-size:var(--fs-title)}
  .cs-feature p,.uc-card p,.ct-list p,.tm-desc,.ct-note,.tm-tag{font-size:var(--fs-body)}
  .cs-note,.uc-stat span,.tm-org p,.tm-author div span,.ct-field label,.ct-foot,.ct-status{font-size:var(--fs-small)}
  .tm-quote p{font-size:var(--fs-quote)}
  .uc-stat b{font-size:var(--fs-stat)}
  .cta-btn,.cta-btn.primary{font-size:var(--fs-button)}
  .ct-field input,.ct-field textarea{font-size:16px}   /* 16px stops iOS zooming into fields */
  /* tiles scale with their own width, but never past the item-title size */
  .tile{font-size:max(11.5px,min(var(--fs-title),8.6cqi))}

  /* where content must fit a fixed height, the scale is the ceiling */
  @media (min-width:1024px){
    .tm-org h3{font-size:max(14px,min(var(--fs-title),3.4cqh))}
    .tm-org p{font-size:max(12px,min(var(--fs-small),2.4cqh))}
    .tm-tag{font-size:max(12.5px,min(var(--fs-body),2.6cqh))}
    .tm-desc{font-size:max(11.5px,min(var(--fs-body),2.4cqh,.98vw))}
    .tm-quote p{font-size:max(12px,min(var(--fs-quote),3.1cqh,1.22vw))}
    .tm-author b{font-size:max(13px,min(var(--fs-title),2.6cqh))}
    .tm-author div span{font-size:max(12px,min(var(--fs-small),2.3cqh))}
  }
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .uc-card h3{font-size:min(var(--fs-title),3.4vw)}   /* three cards across a phone */
  }

  /* section 1: server + tiles column never wider than half the viewport; text takes the rest */
  @media (min-width:1024px){
    /* diagram: at most half the viewport (and never more than half the content area on very wide
       screens); the text column takes whatever is left */
    .cs-section{grid-template-columns:minmax(300px,1fr) minmax(0,min(50vw,50%))}
    .cs-diagram{width:100%}
    .cs-lede,.cs-cta{max-width:none}                                      /* text fills its column */
  }

  /* section 1: breathing room between the text column and the diagram on wide screens */
  @media (min-width:1400px){ .cs-copy{padding-right:40px} }

  /* =====================================================================
     SCROLL SNAP — each section settles into place
     ===================================================================== */
  html{scroll-snap-type:y proximity}                 /* tablet + mobile: gentle, never traps tall content */
  .cs,.uc,.tm,.fq,.ct{scroll-snap-align:start}
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .cs-copy{scroll-snap-align:start}                /* section 1's second screen on phones */
  }
  @media (min-width:1024px){
    html{scroll-snap-type:y mandatory}               /* desktop: sections are exactly one screen */
  }
  @media (prefers-reduced-motion:reduce){ html{scroll-snap-type:none} }

  /* testimonial colour variants: tag, quote mark, avatar and a faint card tint */
  .tm-card{--acc:#2F6BFF; --av1:#5B8CFF; --av2:#2448C8; --tint:rgba(47,107,255,.06)}
  .tm-card.v-violet{--acc:#6A4CF0; --av1:#9A85FF; --av2:#5236D4; --tint:rgba(106,76,240,.06)}
  .tm-card.v-green {--acc:#0F9460; --av1:#3FCB93; --av2:#0B7A4F; --tint:rgba(15,148,96,.06)}
  .tm-card{background:
    radial-gradient(120% 70% at 0% 0%,var(--tint),transparent 60%),
    linear-gradient(180deg,var(--glass-a) 0%,var(--glass-b) 60%)}
  .tm-tag,.tm-quote svg{color:var(--acc)}
  .tm-avatar{background:radial-gradient(80% 60% at 30% 15%,rgba(255,255,255,.35),transparent 60%),linear-gradient(150deg,var(--av1),var(--av2))}

  /* badges: smaller, sentence case */
  .badge{
    height:28px; padding:0 12px;
    font-size:12px; font-weight:400; letter-spacing:0; text-transform:none;
  }
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .badge{height:26px; padding:0 11px; font-size:11.5px}
  }

  /* =====================================================================
     WEIGHT TEST — every weight one step lighter in sections 2, 3 and the
     contact section (badges and section 1 unchanged). Delete this block to revert.
     ===================================================================== */
  .uc .cs-title,.tm .cs-title{font-weight:400}   /* "How can we help?" stays at 500 */
  .uc-card h3,.tm-org h3,.tm-author b,.ct-list h4{font-weight:500}
  .uc-dep h3,.uc-stat b,.ct-form h3,.ct-panel-title,.ct-email-row a,.tm-tag,.ct-kicker{font-weight:400}
  .cta-btn.primary{font-weight:500}
  .tm-avatar{font-weight:500}
  .uc-card p,.uc-dep p,.uc-stat span,.tm-sub,.tm-desc,.tm-quote p,.tm-org p,.tm-author div span,
  .ct-lede,.ct-note,.ct-list p,.ct-field label,.ct-foot,.ct-status,
  .ct-field input,.ct-field textarea{font-weight:300}

  /* mobile: section 1 list items stay together; the whole block sits centred on its screen */
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .cs-copy{justify-content:center}
    .cs-features{flex:0 0 auto; justify-content:flex-start; gap:18px}
  }

  /* =====================================================================
     MOBILE RHYTHM — one spacing value between sections and between the
     major blocks inside them (header, diagram, text, orbit, stats, cards…)
     ===================================================================== */
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    :root{--m-gap:60px}
    /* sections: half the gap top and bottom, so two sections meet at one full gap */
    .cs,.uc,.tm,.fq,.ct{padding-top:calc(var(--m-gap) / 2); padding-bottom:calc(var(--m-gap) / 2)}
    .cs > .cs-head,.uc > .cs-head,.tm > .cs-head,.fq > .cs-head{margin-bottom:var(--m-gap); padding-block:0}

    /* section 1: diagram and text sit at their natural height, one gap apart */
    .cs-section{row-gap:var(--m-gap)}
    .stage{height:auto; grid-template-rows:auto var(--wire-h) auto var(--wire-h) auto}
    .cs-copy{min-height:0; padding-block:0}

    /* section 2: header / orbit + caption / stats */
    .uc{min-height:0}
    .uc-field{flex:none; grid-template-rows:auto var(--wire-h,44px) auto var(--wire-h,44px) auto}
    .uc-stats{margin-top:var(--m-gap)}

    /* section 3: keep 16px under the swipe row for the card shadows */
    .tm-grid{padding-top:0; padding-bottom:16px}
    .tm{padding-bottom:calc(var(--m-gap) / 2 - 16px)}

    /* contact */
    .ct{min-height:0}
    .ct-wrap{row-gap:var(--m-gap)}
    .ct-foot{margin-top:var(--m-gap)}
  }

  /* =====================================================================
     MOBILE CONTACT — "How can we help?" through the footer fills exactly
     one screen (--ct-foot = footer + its gap + section padding, set by script)
     ===================================================================== */
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .ct-main{
      height:calc(100svh - var(--ct-foot,110px)); min-height:520px;
      padding-top:clamp(16px,3svh,28px);
      scroll-snap-align:start;
    }
    .ct-title{font-size:clamp(28px,4.8svh,36px)}
    .ct-lede{font-size:clamp(14px,2svh,16px); margin-top:6px}
    .ct-email{margin-top:clamp(12px,2.2svh,22px)}
    .ct-email-row{margin-top:2px}
    .ct-email-row a{font-size:clamp(18px,2.7svh,22px)}
    .ct-copy{width:32px; height:32px}
    .ct-note{font-size:12.5px; margin-top:2px}
    .ct-rule{margin:clamp(10px,2svh,20px) 0}
    .ct-form h3{font-size:clamp(17px,2.5svh,20px); margin-bottom:clamp(8px,1.6svh,14px)}
    /* name + company, email + phone share a row; the message box takes what's left */
    .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto 1fr; gap:clamp(8px,1.5svh,14px) 10px}
    .ct-field label{font-size:12.5px; margin-bottom:4px}
    .ct-field input{height:clamp(40px,5.6svh,48px); padding:0 12px}
    .ct-field textarea{min-height:56px; padding:10px 12px}
    .ct-actions{margin-top:clamp(10px,1.8svh,18px)}
    .cta-btn.primary{height:clamp(44px,6svh,52px)}
    .ct-foot{
      margin-top:clamp(14px,2.6svh,24px); padding:10px 24px 0; gap:16px; font-size:12px; line-height:1.5;
      flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:center; text-align:left;
    }
    .ct-foot span{min-width:0}                 /* copyright may wrap on very narrow phones */
    .ct-foot a{flex:none; white-space:nowrap}  /* privacy link stays on the far right */
    .ct{padding-bottom:12px}
  }

  /* =====================================================================
     SECTION — FAQ
     Desktop: question list (left) + tinted glass answer panel (right), the same
     text-left / visual-right split as section 1. Tablet + mobile: accordion.
     ===================================================================== */
  .fq{display:flex; flex-direction:column}
  .fq{
    --fq-q:clamp(17px,min(1.32vw,2.45svh),28px);      /* question in the list */
    --fq-h:clamp(26px,min(2.3vw,4.2svh),58px);        /* question in the panel */
    --fq-a:clamp(16px,min(1.15vw,2.15svh),27px);      /* answer in the panel */
  }
  .fq-grid{display:flex; flex-direction:column; gap:10px}
  .fq-item{
    --glass-a:rgba(253,253,254,.97); --glass-b:rgba(246,246,249,.95);
    position:relative; display:flex; flex-direction:column; justify-content:center;
    border-radius:18px; padding:14px 18px;
    background:
      radial-gradient(90% 140% at 0% 0%,var(--tint,transparent),transparent 60%),
      linear-gradient(180deg,var(--glass-a) 0%,var(--glass-b) 60%);
    transition:box-shadow .25s, transform .25s cubic-bezier(.3,.7,.4,1);
  }
  .fq-item summary{list-style:none; display:flex; align-items:center; gap:14px; cursor:pointer}
  .fq-item summary::-webkit-details-marker{display:none}
  .fq-item summary:focus-visible{outline:2px solid var(--pulse); outline-offset:6px; border-radius:12px}
  .fq-item .bead{width:36px; height:36px; border-radius:11px}
  .fq-item .bead svg{width:18px}
  .fq-item h3{flex:1; margin:0; font-size:var(--fs-title); font-weight:500; line-height:1.3; letter-spacing:-.015em; color:#0d1330}
  .fq-pm{width:18px; height:18px; flex:none; color:var(--ink-3); transition:color .25s}
  .fq-pm .v{transform-origin:12px 12px; transition:transform .25s cubic-bezier(.3,.7,.4,1), opacity .2s}
  .fq-item[open] .fq-pm{color:var(--ic,var(--ink-2))}
  .fq-item[open] .fq-pm .v{transform:scaleY(0); opacity:0}
  .fq-go{display:none}
  .fq-a p{margin:10px 0 2px 50px; max-width:72ch; font-size:var(--fs-body); line-height:1.6; color:var(--ink-2)}
  .fq-view{display:none}

  /* ---------- desktop: list + answer panel, fills the section ---------- */
  @media (min-width:1024px){
    .fq-body{
      flex:1; min-height:0;
      display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
      column-gap:clamp(32px,4vw,88px);
    }
    .fq-grid{min-height:0; gap:clamp(8px,1.2svh,14px)}
    .fq-item{flex:1 1 0; min-height:0; padding:0 clamp(16px,1.4vw,26px); cursor:pointer}
    .fq-item summary{gap:clamp(12px,1.1vw,18px)}
    .fq-item .bead{width:clamp(32px,4.4svh,46px); height:clamp(32px,4.4svh,46px); border-radius:12px}
    .fq-item .bead svg{width:clamp(16px,2.2svh,22px)}
    .fq-item h3{font-size:var(--fq-q); color:var(--ink-2); transition:color .2s}
    .fq-pm,.fq-a{display:none}
    .fq-go{display:block; width:18px; height:18px; flex:none; color:var(--ic); opacity:0; transform:translateX(-6px);
      transition:opacity .2s, transform .25s cubic-bezier(.3,.7,.4,1)}
    .fq-item:hover .fq-go{opacity:.5; transform:none}
    .fq-item:hover h3{color:#0d1330}
    /* selected question: coloured ring + darker text + arrow */
    .fq-item.is-active{
      box-shadow:
        inset 0 0 0 1.5px color-mix(in srgb,var(--ic) 45%,transparent),
        inset 0 1px 0 var(--edge),
        0 0 0 .5px var(--hair),
        0 18px 36px -16px var(--drop),
        0 2px 5px var(--contact);
      background:
        radial-gradient(120% 160% at 0% 0%,color-mix(in srgb,var(--ic) 9%,transparent),transparent 65%),
        linear-gradient(180deg,var(--glass-a) 0%,var(--glass-b) 60%);
    }
    .fq-item.is-active h3{color:#0d1330}
    .fq-item.is-active .fq-go{opacity:1; transform:none}

    /* the answer panel: tinted glass, like the contact panel */
    .fq-view{
      --glass-a:rgba(255,255,255,.72); --glass-b:rgba(250,251,255,.64);
      display:flex; flex-direction:column; min-height:0; overflow:hidden;
      border-radius:28px; padding:clamp(24px,4.4svh,60px) clamp(28px,3vw,64px);
    }
    .fq-wash{position:absolute; inset:0; z-index:-2; pointer-events:none}
    .fq-wash i{position:absolute; border-radius:50%; filter:blur(60px); background:var(--ic); transition:background .5s}
    .fq-wash i:nth-child(1){width:60%; height:46%; right:-18%; top:-14%; opacity:.28}
    .fq-wash i:nth-child(2){width:50%; height:40%; left:-16%; bottom:-14%; opacity:.18}
    .fq-view-top{display:flex; align-items:center; justify-content:space-between}
    .fq-view .bead{width:clamp(44px,6.4svh,64px); height:clamp(44px,6.4svh,64px); border-radius:16px}
    .fq-view .bead svg{width:clamp(22px,3.2svh,30px)}
    .fq-view-num{font-size:clamp(40px,7svh,84px); font-weight:500; letter-spacing:-.04em; line-height:1; color:rgba(13,19,48,.08)}
    .fq-view-body{margin-top:clamp(18px,3.6svh,44px)}
    .fq-view-q{margin:0; max-width:24ch; font-size:var(--fq-h); font-weight:300; line-height:1.15; letter-spacing:-.03em; color:#0d1330}
    .fq-view-a{margin:clamp(12px,2.2svh,26px) 0 0; max-width:60ch; font-size:var(--fq-a); font-weight:300; line-height:1.6; color:var(--ink-2)}
    .fq-more{
      margin-top:auto; padding-top:clamp(16px,2.6svh,28px); align-self:flex-start;
      display:inline-flex; align-items:center; gap:8px;
      font-size:var(--fs-body); font-weight:500; color:var(--ic); text-decoration:none;
    }
    .fq-more svg{width:16px; height:16px; transition:transform .25s cubic-bezier(.3,.7,.4,1)}
    .fq-more:hover svg{transform:translateX(3px)}
    /* answer swap animation */
    .fq-view.swap .fq-view-body,.fq-view.swap .fq-view-top .bead{animation:fq-in .35s cubic-bezier(.3,.7,.4,1)}
    @keyframes fq-in{from{opacity:0; transform:translateY(8px)}}
    @media (prefers-reduced-motion:reduce){ .fq-view.swap .fq-view-body,.fq-view.swap .fq-view-top .bead{animation:none} }
  }

  /* ---------- mobile ---------- */
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){
    .fq-body{padding-inline:24px}
    .fq-item{padding:14px 16px; border-radius:16px}
    .fq-item .bead{width:34px; height:34px; border-radius:10px}
    .fq-a p{margin:10px 0 2px}
  }
  /* weight test (matches sections 2, 3 and contact) */
  .fq .cs-title{font-weight:400}
  .fq-item h3{font-weight:400}
  .fq .tm-sub,.fq-a p{font-weight:300}

  /* FAQ questions on tablet + mobile: larger than item titles */
  @media (max-width:1023px){ .fq-item h3{font-size:clamp(16px,2.2vw,19px)} }
  @media (max-width:760px) and (orientation:portrait), (max-width:520px){ .fq-item h3{font-size:17px} }

/* hero stays a snap point, so the page can rest at the top */
.page{scroll-snap-align:start}

/* =====================================================================
   HERO — same white as the sections below; both buttons in liquid glass,
   keeping their original radius. The pointer highlight lives in the
   background (not ::after) because the chat button's tooltip uses ::after.
   ===================================================================== */
body{background:#ffffff}

@property --spec-o{syntax:'<number>'; inherits:false; initial-value:.5}

.intro .cta,.social{
  position:relative; isolation:isolate;
  -webkit-backdrop-filter:blur(14px) saturate(190%);
  backdrop-filter:blur(14px) saturate(190%);
  cursor:pointer; user-select:none; -webkit-user-select:none;
  touch-action:pan-y; -webkit-tap-highlight-color:transparent;
  will-change:transform;
  transition:--spec-o .25s;
}
.intro .cta::before,.social::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(150deg,var(--b-rim-a) 0%,transparent 36%,transparent 64%,var(--b-rim-b) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.intro .cta:hover,.social:hover{--spec-o:.85; transform:none}

/* Contact us: the blue "Send enquiry" glass */
.intro .cta{
  --b-hi:rgba(255,255,255,.55); --b-lo:rgba(255,255,255,.12); --b-edge:rgba(10,30,90,.25);
  --b-rim-a:rgba(255,255,255,.6); --b-rim-b:rgba(255,255,255,.25);
  --b-shadow:rgba(28,63,178,.55); --b-shadow-2:rgba(28,63,178,.2);
  border:0; color:#fff;
  background:
    radial-gradient(140px 90px at var(--mx,50%) var(--my,-20%),rgba(255,255,255,calc(.35 * (var(--spec-o) + var(--press,0) * .5))),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,calc(.2 * (var(--spec-o) + var(--press,0) * .5))) 0%,transparent 55%),
    linear-gradient(180deg,#2451cf 0%,#15319a 100%);
  box-shadow:
    inset 0 .5px 0 var(--b-hi),
    inset 0 -.5px 0 var(--b-lo),
    0 0 0 .5px var(--b-edge),
    0 8px 22px -8px var(--b-shadow),
    0 1px 3px var(--b-shadow-2);
}
.intro .cta:hover{
  background:
    radial-gradient(140px 90px at var(--mx,50%) var(--my,-20%),rgba(255,255,255,calc(.35 * (var(--spec-o) + var(--press,0) * .5))),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,calc(.2 * (var(--spec-o) + var(--press,0) * .5))) 0%,transparent 55%),
    linear-gradient(180deg,#2451cf 0%,#15319a 100%);
  box-shadow:
    inset 0 .5px 0 var(--b-hi),
    inset 0 -.5px 0 var(--b-lo),
    0 0 0 .5px var(--b-edge),
    0 8px 22px -8px var(--b-shadow),
    0 1px 3px var(--b-shadow-2);
}
.intro .cta svg{transition:transform .25s cubic-bezier(.3,.7,.4,1)}
.intro .cta:hover svg{transform:translate(2px,-2px)}
.intro .cta:focus-visible{outline:2px solid #007aff; outline-offset:3px}

/* Chat button: clear glass over the dark banner */
.social{
  --b-rim-a:rgba(255,255,255,.7); --b-rim-b:rgba(255,255,255,.25);
  border:0; color:#fff;
  background:
    radial-gradient(90px 70px at var(--mx,50%) var(--my,-20%),rgba(255,255,255,calc(var(--spec-o) * .3 + var(--press,0) * .2)),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 55%),
    rgba(255,255,255,.08);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.6),
    inset 0 -.5px 0 rgba(255,255,255,.15),
    0 0 0 .5px rgba(255,255,255,.14),
    0 8px 22px -8px rgba(0,0,0,.6),
    0 1px 3px rgba(0,0,0,.3);
}
.social:hover{
  background:
    radial-gradient(90px 70px at var(--mx,50%) var(--my,-20%),rgba(255,255,255,calc(var(--spec-o) * .3 + var(--press,0) * .2)),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,transparent 55%),
    rgba(255,255,255,.08);
}

/* =====================================================================
   SECTION CHIPS — hero "Custom AI development" and every section badge
   share one neumorphic chip (after Uiverse.io "neu-button" by adamgiebl),
   scaled down from button to label size. Static: no hover or press. Overrides the earlier glass badge styles.
   ===================================================================== */
.badge,.tags,.lens .badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:30px; padding:0 14px;
  border:2px solid #ececec; border-radius:50px;
  font-size:12px; font-weight:500; line-height:1; letter-spacing:.01em; text-transform:none;
  color:#8e8e93;
  background:#ffffff;
  box-shadow:inset 4px 4px 10px #e4e4e4, inset -4px -4px 10px #ffffff;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  cursor:default; user-select:none; -webkit-user-select:none;
  will-change:auto;
}
.badge::before,.badge::after{content:none}
@media (max-width:760px) and (orientation:portrait), (max-width:520px){
  .badge,.tags{height:28px; padding:0 12px; font-size:11.5px}
}

/* contact: same side margins and content width as the other sections */
@media (min-width:761px), (min-width:521px) and (orientation:landscape){
  .ct-wrap{max-width:var(--smax); padding-inline:var(--sx)}
}

/* footer bar: full width, divider edge to edge, text at the screen edges (hero gutter) */
.ct-foot,.ct-foot[class]{max-width:none; padding:10px var(--gutter); justify-content:space-between}
/* footer sits flush on the bottom of the page */
.ct,.ct[class]{padding-bottom:0}
.ct-foot,.ct-foot[class]{font-size:12px}
@media (max-width:760px) and (orientation:portrait), (max-width:520px){
  .ct-foot,.ct-foot[class]{font-size:11px}
}

/* =====================================================================
   SECTION 3 cards: taller padding; top row nudged up, bottom row nudged
   down by the same amount. Relative offsets don't move anything else,
   and the wire script reads offsetTop, so the wires still meet the cards.
   Orbit layout only (tablet + desktop); the phone layout is untouched.
   ===================================================================== */
.uc-card{padding-top:clamp(10px,1.6svh,18px); padding-bottom:clamp(10px,1.6svh,18px)}
@media (max-width:1023px){ .uc-card{padding-top:16px; padding-bottom:16px} }
/* more air between each card's title and its text */
.uc-card h3 + p{margin-top:clamp(6px,1svh,10px)}
/* stat numbers in navy; the small qualifier ("Up to") keeps its grey */
.uc-stat b{color:#1e3a8a}
@media (min-width:761px), (min-width:521px) and (orientation:landscape){
  .uc-field{row-gap:clamp(8px,1.2svh,14px)}
}
@media (max-width:760px) and (orientation:portrait), (max-width:520px){ .uc-card{padding-top:20px; padding-bottom:20px} }

@media (min-width:761px), (min-width:521px) and (orientation:landscape){
  .uc-field{--uc-lift:clamp(8px,calc(8svh - 40px),36px)}   /* ~32px at 900px tall, ~18px at 720px */
  .uc-card[data-row="0"]{position:relative; top:calc(-1 * var(--uc-lift))}
  .uc-card[data-row="2"]{position:relative; top:var(--uc-lift)}
  /* every card fills its row, so all six are the same height and the gap above
     the middle card equals the gap below it (row gap + lift on both sides) */
  .uc-card[data-side]{align-self:stretch}
  /* three equal rows, each at least the tallest card's content (--uc-row, measured by
     the script), centred on the orbit. The middle row's centre is then the
     server's centre, where its middle wires leave, so those wires run straight. */
  .uc-field{grid-template-rows:repeat(3,minmax(var(--uc-row,0px),1fr)); align-content:center}
  .uc-server{align-self:center}
}
/* the section stays one screen tall: the orbit keeps the height it is given, and the
   offsets come out of its top and bottom padding, so the raised/lowered cards never
   leave the orbit. The server spans the three rows (the content box). */
@media (min-width:1024px){
  .uc-field{padding-block:var(--uc-lift)}
  .uc-card[data-side]{max-width:75%}   /* narrower than the column, so the cards sit clear of the wires */
  .uc-server{width:calc(100cqh * .5956)}
}

/* section 3 cards: whiter glass (was a 253 to 246 grey ramp) */
.uc-field .uc-card{--glass-a:#ffffff; --glass-b:#fdfdfe}

/* section 3 stat numbers bold; the small qualifier stays regular */
.uc-stat b{font-weight:700}
.uc-stat b span{font-weight:400}

/* =====================================================================
   SIMPLE THEME — replaces the liquid glass everywhere.
   Flat white surfaces, one hairline border, a barely-there shadow,
   solid buttons. No blur, no specular, no rim light, no drag wobble.
   Delete this block (and set GLASS_WOBBLE back to true in the script)
   to return to the glass look.
   ===================================================================== */
:root{
  --s-line:#e5e8ef;
  --s-line-strong:#d5dae4;
  --s-surface:#ffffff;
  --s-soft:#f7f8fb;
  --s-shadow:0 1px 2px rgba(16,24,40,.05);
  --s-shadow-lift:0 4px 14px -6px rgba(16,24,40,.12);
  --s-blue:#1e40af;
  --s-blue-hover:#1e3a8a;
}

/* surfaces */
.glass,.glass.interactive{
  background:var(--s-surface);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 0 0 1px var(--s-line), var(--s-shadow);
}
.glass::before,.glass::after,
.cta-btn::before,.cta-btn::after,
.intro .cta::before,.social::before{content:none}

.uc-field .uc-card,.tm-card,.tm-card[class],.fq-item,.fq-view,.ct-panel{
  background:var(--s-surface);
  box-shadow:inset 0 0 0 1px var(--s-line), var(--s-shadow);
}
.ct-panel{background:var(--s-soft)}
.fq-wash,.ct-wash{display:none}

/* nothing is draggable any more */
.tile,.uc-card,.tm-card,.badge,.cta-btn,.intro .cta,.social{cursor:pointer; will-change:auto}
.tile,.uc-card,.tm-card{cursor:default}

/* icons: flat tinted squares */
.bead,.cs-feature .chip,.chip{
  background:var(--t1,var(--s-soft));
  box-shadow:none;
}
.chip:not([class*="t-"]){background:var(--s-soft)}
.tm-avatar{background:var(--av2,#2448C8); box-shadow:none}

/* FAQ: the selected question gets an accent border, nothing more */
@media (min-width:1024px){
  .fq-item:hover{box-shadow:inset 0 0 0 1px var(--s-line-strong), var(--s-shadow)}
  .fq-item.is-active{
    background:var(--s-surface);
    box-shadow:inset 0 0 0 1.5px var(--ic,var(--s-blue)), var(--s-shadow);
  }
}

/* form fields */
.ct-field input,.ct-field textarea{
  background:var(--s-surface);
  box-shadow:inset 0 0 0 1px var(--s-line-strong);
}
.ct-field input:focus,.ct-field textarea:focus{box-shadow:inset 0 0 0 1.5px var(--s-blue),0 0 0 4px rgba(30,64,175,.12)}

/* buttons: secondary = white with a border, primary = solid blue */
.cta-btn{
  background:var(--s-surface);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 0 0 1px var(--s-line-strong), var(--s-shadow);
  transition:background .2s, box-shadow .2s;
}
.lens .cta-btn{-webkit-backdrop-filter:none; backdrop-filter:none}
.cta-btn:hover{background:var(--s-soft)}
.cta-btn.primary,.intro .cta,.intro .cta:hover{
  background:var(--s-blue); color:#fff;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:var(--s-shadow);
  transition:background .2s;
}
.cta-btn.primary:hover,.intro .cta:hover{background:var(--s-blue-hover)}

/* hero chat button on the dark banner: plain translucent square */
.social,.social:hover{
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
  transition:background .2s;
}
.social:hover{background:rgba(255,255,255,.16)}

/* section chips: white pill, hairline border, grey text */
.badge,.tags,.lens .badge{
  background:var(--s-surface);
  border:1px solid var(--s-line-strong);
  box-shadow:none;
  color:#8e8e93;
}

/* FAQ: smaller questions, in the list and in the answer panel */
.fq{
  --fq-q:clamp(15px,min(1.1vw,2svh),22px);          /* list question (was up to 28px) */
  --fq-h:clamp(22px,min(1.8vw,3.3svh),44px);        /* panel question (was up to 58px) */
}
@media (max-width:1023px){ .fq-item h3{font-size:clamp(15px,2vw,17px)} }
@media (max-width:760px) and (orientation:portrait), (max-width:520px){ .fq-item h3{font-size:16px} }

/* section 3 stat numbers: medium instead of bold */
.uc-stat b{font-weight:500}

/* FAQ answers at 300 (tried 200, too light) */
.fq-view-a,.fq .fq-a p{font-weight:300}

/* hero CTA back to its original colour (before the glass work) */
.intro .cta,.intro .cta:hover{background:var(--dark)}
.intro .cta:hover{background:#061f63}

/* contact "Send enquiry" matches the hero CTA */
.cta-btn.primary{background:var(--dark)}
.cta-btn.primary:hover{background:#061f63}

/* FAQ panel question: medium (was 300, then 400) */
.fq .fq-view-q{font-weight:500}

/* FAQ: 16px more space between question and answer, everywhere */
.fq .fq-view-a{margin-top:calc(clamp(12px,2.2svh,26px) + 16px)}   /* desktop panel */
.fq .fq-a p{margin-top:26px}                                       /* tablet + mobile accordion (was 10px) */

/* =====================================================================
   FIXED NAV — logo + menu stay on top of every section.
   Over the hero it is transparent (as before); once the hero has
   scrolled away the script adds .is-solid: transparent, dark text.
   ===================================================================== */
.nav{
  position:fixed; z-index:2147483647; top:0; left:0; right:0;   /* max 32-bit z-index: above everything */
  padding:clamp(1rem,2vw,1.625rem) var(--gutter);
  transition:padding .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
/* the nav lives inside .banner, which is its own stacking context (isolation:isolate, needed for
   the pixel canvas blend). The nav's z-index only counts inside it, so the banner itself is lifted
   above the sections. Nothing in the banner overlaps them except the fixed nav. */
.banner{z-index:2147483647}
/* the nav left the hero's flow: keep the tagline + chat button at the bottom of the hero */
.banner-foot{margin-top:auto}

.nav.is-solid{
  padding-top:.75rem; padding-bottom:.75rem;
  background:transparent;   /* blends with the white sections; only the text turns dark */
}
.nav.is-solid .logoMark{color:var(--ink)}
.nav.is-solid .nav-toggle{color:var(--ink-2)}
.nav.is-solid .nav-toggle:hover,.nav.is-solid .nav-toggle[aria-expanded="true"]{color:var(--ink); background:var(--s-soft)}
.nav.is-solid .navLinks a{color:var(--ink-2)}
.nav.is-solid .navLinks a:hover{color:var(--ink)}
/* phone dropdown turns white with the bar */
.nav.is-solid .navLinks{background:#fff; border-color:var(--s-line); box-shadow:0 12px 28px -12px rgba(16,24,40,.25); -webkit-backdrop-filter:none; backdrop-filter:none}
.nav.is-solid .navLinks a:hover{background:var(--s-soft)}
@media (min-width:47.5625rem){
  .nav.is-solid .navLinks{background:none; border:0; box-shadow:none}
  .nav.is-solid .navLinks a:hover{background:none}
}


/* =====================================================================
   ROI (adapted from payback.html) — replaces the FAQ on the index.
   Page font (Manrope) instead of Schibsted/Newsreader; navy accent
   (--dark) instead of cobalt; the same margins as the other sections.
   The chart animates the first time the section scrolls into view
   (the script adds .is-active).
   ===================================================================== */
.roi{
  --roi-ink:#0d1330; --roi-steel:#86868b; --roi-steel-2:#9aa1ad;
  --roi-accent:var(--dark); --roi-soft:#e3e8f5;
  background:#fff; color:var(--roi-ink); scroll-snap-align:start;
}
.roi-wrap{
  width:100%; max-width:var(--smax); margin:0 auto;
  min-height:100svh; display:grid; grid-template-rows:1fr auto; gap:clamp(48px,7vh,72px);
  padding:var(--st) var(--sx) var(--sb);
}
.roi-head{display:grid; grid-template-columns:1.25fr 1fr; gap:48px; align-items:end}
.roi-title{
  margin:0; max-width:12ch; text-wrap:balance;
  font-size:clamp(34px,min(4.6vw,8svh),72px); font-weight:500; line-height:1.02; letter-spacing:-.035em; color:var(--roi-ink);
}
.roi-side{display:grid; gap:22px; justify-items:start; padding-bottom:6px}
.roi-lead{margin:0; max-width:34ch; font-size:var(--fs-lede); font-weight:300; line-height:1.5; color:var(--roi-steel)}
.roi-nos{display:flex; flex-wrap:wrap; gap:8px 18px; font-size:14px; font-weight:500; color:var(--roi-ink)}
.roi-nos span{display:inline-flex; align-items:center; gap:7px}
.roi-nos span::before{
  content:""; width:14px; height:14px; border-radius:50%;
  background:var(--roi-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4.5 4.5l5 5M9.5 4.5l-5 5' stroke='%23082a85' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/100% no-repeat;
}

.roi-chart{position:relative; min-height:300px; margin:18px 0 28px}
.roi-chart svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.roi-chart .zero{stroke:#c3c9d4; stroke-dasharray:4 5}
.roi-chart .grid{stroke:#eef1f5}
.roi-own{fill:none; stroke:var(--roi-accent); stroke-width:3.5; stroke-linecap:round}
.roi-sub{fill:none; stroke:#a7afbb; stroke-width:2; stroke-dasharray:7 7; stroke-linecap:round}
.roi-neg{fill:rgba(8,42,133,.1)}
/* revealed with a left-to-right clip, not dashes: dashes misbehave with vector-effect:non-scaling-stroke */
.roi-draw{clip-path:inset(-12px 100% -12px -12px)}
.roi-sub-wrap{opacity:0}
.roi-pin{position:absolute; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 4px var(--roi-accent),0 0 0 12px rgba(8,42,133,.14); opacity:0}
.roi-callout{position:absolute; transform:translate(20px,14px); display:grid; gap:2px; opacity:0; white-space:nowrap}
.roi-callout b{font-size:clamp(20px,2vw,28px); font-weight:600; letter-spacing:-.03em; color:var(--roi-ink)}
.roi-callout span{font-size:13.5px; font-weight:300; color:var(--roi-steel)}
.roi-tag{position:absolute; font-size:13.5px; font-weight:600; white-space:nowrap; transform:translate(-100%,-150%)}
.roi-tag.own{color:var(--roi-accent)}
.roi-tag.sub{color:#7c8594; font-weight:500}
.roi-x{position:absolute; left:0; right:0; bottom:-28px; display:flex; justify-content:space-between; font-size:12.5px; color:var(--roi-steel-2); font-variant-numeric:tabular-nums}
.roi-note{position:absolute; left:0; top:-6px; font-size:12.5px; color:var(--roi-steel-2)}

/* motion: runs once the section is in view */
.roi .reveal{opacity:0}
.roi.is-active .reveal{animation:roi-rise .9s cubic-bezier(.2,.7,.2,1) both}
.roi.is-active .reveal.d2{animation-delay:.16s}
.roi.is-active .reveal.d3{animation-delay:.26s}
.roi.is-active .roi-own.roi-draw{animation:roi-draw 1.8s .5s cubic-bezier(.2,.7,.2,1) forwards}
.roi.is-active .roi-sub-wrap{animation:roi-fade .8s 1.6s forwards}
.roi.is-active .roi-pin{animation:roi-fade .4s 1.1s forwards}
.roi.is-active .roi-callout{animation:roi-fade .5s 1.3s forwards}
@keyframes roi-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes roi-draw{to{clip-path:inset(-12px -12px -12px -12px)}}
@keyframes roi-fade{to{opacity:1}}

@media (max-width:1023px){
  .roi-wrap{min-height:0}
  .roi-head{grid-template-columns:1fr}
  .roi-chart{min-height:0; height:280px; align-self:start; margin:24px 0 64px}
  .roi-tag{font-size:12px}
  .roi-x span:nth-child(2n){visibility:hidden}
  .roi-note{top:auto; bottom:-56px}
}
@media (max-width:760px) and (orientation:portrait), (max-width:520px){
  .roi-wrap{padding:30px 18px}
}

/* =====================================================================
   FOOTER LINKS + FAQ PAGE
   ===================================================================== */
.ct-foot-links{display:flex; gap:20px}
.ct-foot-links a{color:inherit; text-decoration:none}
.ct-foot-links a:hover{color:var(--ink)}

/* the footer on faq.html sits outside the contact section, so it brings its own colours */
.pageFoot{--ink:#1d1d1f; --ink-3:#86868b; background:#fff; margin-top:0}
.faqPage{background:#fff}
/* the fixed nav is always "solid" (dark text) here; the FAQ starts below it */
.faqPage .fq{padding-top:calc(var(--st,28px) + 56px)}

/* ROI headline on two lines instead of three */
.roi-title{max-width:20ch}

/* nav "Contact" as a secondary (outlined) CTA, desktop nav only; the phone dropdown keeps a plain link */
@media (min-width:47.5625rem){
  .navLinks a.navCta{
    padding:.5rem 1.125rem; border-radius:var(--radius-pill);
    color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
    transition:background .2s, color .2s, box-shadow .2s;
  }
  .navLinks a.navCta:hover{background:rgba(255,255,255,.12); color:#fff}
  .nav.is-solid .navLinks a.navCta{color:var(--ink); box-shadow:inset 0 0 0 1px var(--s-line-strong)}
  .nav.is-solid .navLinks a.navCta:hover{background:var(--s-soft); color:var(--ink)}
}

/* ROI: headline on the left (under the start of the graph), text on the right (under its end) */
.roi-head{display:flex; justify-content:space-between; align-items:flex-end; gap:48px}
.roi-side{flex:0 1 auto}
@media (max-width:1023px){
  .roi-head{flex-direction:column; align-items:flex-start; gap:24px}
}


/* =====================================================================
   USE CASES (adapted from useCases.html) — replaces the testimonials.
   A looping arc of monitors, one per use case, with the headline below.
   Page font (Manrope) and colours; head within the section margins,
   the rail runs full width. Classes renamed uc-* -> cases-* because the
   "Bespoke products" section already uses uc-*.
   Screens show assets/uc/uc-01.webp ... uc-20.webp; until an image exists
   the screen shows the use-case title instead.
   ===================================================================== */
.cases{
  --c-ink:#0d1330; --c-steel:#86868b;
  background:#fff; color:var(--c-ink); scroll-snap-align:start;
}
.cases-wrap{
  --pt:5vh;                                /* space above the monitors (was clamp(32px,6vh,64px)) */
  --mw:clamp(260px,min(38vw,calc((100svh - 530px) / .89)),600px);   /* monitor width */
  min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr); align-content:center;
  padding:var(--st,28px) 0 var(--sb,28px);
}
.cases-stage{position:relative; min-width:0}
.cases-rail{overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:var(--pt) 0 6px; cursor:grab; outline:none}
.cases-rail::-webkit-scrollbar{display:none}
.cases-rail:focus-visible{outline:2px solid var(--dark); outline-offset:-2px}
.cases-rail.dragging{cursor:grabbing}
.cases-rail.dragging img{pointer-events:none}
.cases-track{position:relative; display:flex; gap:calc(var(--mw) * .05); width:max-content}

.mon{flex:none; width:var(--mw); margin:0; display:flex; flex-direction:column; align-items:center; user-select:none; -webkit-user-select:none}
.dev-screen{position:absolute; overflow:hidden; background:linear-gradient(160deg,#1b2440,#0b1020)}
.dev-screen img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none; user-select:none}   /* click-through, like the section 2 server: right-click gives the page menu, not the image menu */
.dev-screen::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg,rgba(255,255,255,.13),transparent 36%); pointer-events:none}
.dev-title{position:absolute; inset:0; display:grid; place-items:center; padding:12%; text-align:center;
  color:rgba(255,255,255,.78); font-size:max(13px,calc(var(--mw) * .04)); font-weight:500; letter-spacing:-.01em; text-wrap:balance}
.mon-co{position:absolute; z-index:1; top:max(8px,calc(var(--mw) * .02)); left:max(10px,calc(var(--mw) * .024)); max-width:70%;
  color:#16233a; font-size:max(11px,calc(var(--mw) * .028)); font-weight:600; letter-spacing:-.015em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dev-screen:not(:has(img)) .mon-co{color:rgba(255,255,255,.9)}
/* use-case screens: a macOS top bar (SD dark / SL light) over the app, or a desktop (FD) with the app in a window */
.dev-screen .scr-bar{inset:0 0 auto; height:auto; z-index:1}
.scr-body{position:absolute; inset:3.6% 0 0; container-type:size}   /* below the top bar: 34/1672 of the width, about 3.6% of this screen's height */
.scr-body .scr-app, .scr-winbody .scr-app{object-position:top center}
.dev-screen .scr-frame{object-fit:fill; z-index:1}
.scr-desk{position:absolute; z-index:2; top:9%; left:6%; right:6%; bottom:17%; display:grid; place-items:center; container-type:size; pointer-events:none}
/* the window takes the app image's proportions (--ar, set when it loads) and the largest size that fits the desk */
.scr-win{--ar:1.82; --bar:calc(var(--mw) * .026); display:flex; flex-direction:column; overflow:hidden;
  width:min(100cqw, calc((100cqh - var(--bar)) * var(--ar)));
  border-radius:calc(var(--mw) * .012); background:#1c1d21;
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 calc(var(--mw) * .02) calc(var(--mw) * .05) rgba(0,0,0,.5)}
.scr-winbar{flex:none; display:flex; align-items:center; gap:calc(var(--mw) * .007); height:var(--bar); box-sizing:border-box; padding:0 calc(var(--mw) * .012); background:#2a2b30; border-bottom:1px solid rgba(0,0,0,.4)}
.scr-winbar i{width:calc(var(--mw) * .0105); aspect-ratio:1; border-radius:50%; background:#ff5f57}
.scr-winbar i:nth-child(2){background:#febc2e}
.scr-winbar i:nth-child(3){background:#28c840}
.scr-winbody{position:relative; aspect-ratio:var(--ar); container-type:inline-size}
/* the company name in the app's logo spot: left-aligned, vertically centred, sized from the slot height */
.mon-co--slot{z-index:2; display:flex; align-items:center; max-width:none; padding:0 0 0 calc(var(--h) * .3); box-sizing:border-box;
  font-size:var(--fs); font-weight:700; letter-spacing:-.02em; line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mon-co--d{color:#fff}
.mon-co--l{color:#16233a}
.dev-screen--sl{background:linear-gradient(160deg,#eef1f6,#dfe4ec)}
.dev-screen--sl .dev-title{color:#3a4458}

/* the display: black bezel, silver rim, short stand, thin foot */
.mon-disp{position:relative; width:100%; aspect-ratio:16/9.4; padding:calc(var(--mw) * .022); background:#101113; border-radius:calc(var(--mw) * .02);
  box-shadow:0 0 0 1px #8f959c,0 0 0 2.5px #d6d9dd,0 34px 40px -34px rgba(13,19,48,.55)}
.mon-disp .dev-screen{position:relative; width:100%; height:100%; border-radius:2px}
.mon-stand{position:relative; width:28%; height:calc(var(--mw) * .17); margin-top:-1px;
  background:linear-gradient(90deg,#a9aeb5 0%,#dcdfe3 10%,#f4f5f7 42%,#e7e9ec 72%,#b4b9bf 100%); clip-path:polygon(3% 0,97% 0,100% 100%,0 100%)}
.mon-stand::before{content:""; position:absolute; left:50%; top:12%; width:24%; aspect-ratio:1; transform:translateX(-50%); border-radius:50%;
  background:#eef0f2; box-shadow:inset 0 2px 5px rgba(13,19,48,.35)}
.mon-foot{position:relative; width:34%; height:6px; border-radius:0 0 4px 4px; background:linear-gradient(180deg,#d7dade,#a2a7ad)}
.mon-foot::after{content:""; position:absolute; left:-30%; right:-30%; top:4px; height:14px; border-radius:50%; background:radial-gradient(closest-side,rgba(13,19,48,.28),transparent)}

.mon-cap{margin-top:22px; display:grid; gap:4px; width:96%; text-align:center; text-wrap:balance; opacity:.4; transition:opacity .35s}
.mon.is-center .mon-cap{opacity:1}
.mon-cap b{font-size:var(--fs-title); font-weight:500; letter-spacing:-.015em; color:var(--c-ink)}
.mon-cap span{font-size:var(--fs-body); font-weight:300; line-height:1.4; color:var(--c-steel)}

/* the arc: monitors are placed by the script, the rail drops at the edges */
.cases-arc{--drop:clamp(30px,4vw,64px)}
.cases-arc .cases-rail{overflow:hidden; touch-action:pan-y; padding-bottom:calc(6px + var(--drop)); margin-bottom:calc(-1 * var(--drop))}
.cases-arc .cases-track{display:block; width:auto}
.cases-arc .mon{position:absolute; left:0; top:0; transform-origin:50% 30%; will-change:transform; backface-visibility:hidden}

/* headline + arrows, inside the section margins */
.cases-head{position:relative; width:100%; max-width:var(--smax); margin:0 auto; padding:clamp(28px,5vh,56px) var(--sx) 0;
  display:grid; justify-items:center; gap:20px; text-align:center}
.cases-title{margin:0; max-width:20ch; text-wrap:balance; font-size:var(--fs-h2); font-weight:500; line-height:1.08; letter-spacing:-.035em; color:var(--c-ink)}
.cases-lead{margin:0; max-width:52ch; text-wrap:balance; font-size:var(--fs-lede); font-weight:300; line-height:1.5; color:var(--c-steel)}
.cases-btn{position:absolute; z-index:3; top:50%; margin-top:-24px; width:48px; height:48px; border:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:var(--c-ink);
  background:#fff; box-shadow:inset 0 0 0 1px var(--s-line-strong), var(--s-shadow); transition:background .2s}
.cases-btn:hover{background:var(--s-soft)}
.cases-btn svg{width:20px; height:20px}
.cases-btn.prev{left:var(--sx)}
.cases-btn.next{right:var(--sx)}

/* motion: runs once the section is in view */
.cases .reveal{opacity:0}
.cases.is-active .reveal{animation:cases-rise .9s cubic-bezier(.2,.7,.2,1) both}
.cases.is-active .reveal.d2{animation-delay:.16s}
.cases.is-active .reveal.d3{animation-delay:.26s}
@keyframes cases-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

@media (max-width:760px) and (orientation:portrait), (max-width:520px){
  .cases-wrap{--mw:78vw; min-height:0; padding:30px 0}
  .cases-head{padding-inline:18px}
  .cases-btn{display:none}
}

/* use cases: monitors and headline spread over the section */
.cases-wrap{align-content:space-between}
.cases-title{max-width:none}

/* bigger monitors: less height reserved for the rest (440px, was 530px), higher width caps (48vw / 760px, were 38vw / 600px) */
.cases-wrap{--mw:clamp(280px,min(48vw,calc((100svh - 440px) / .89)),760px)}
@media (max-width:760px) and (orientation:portrait), (max-width:520px){ .cases-wrap{--mw:84vw} }

/* "Use Cases" pill, inside the stage above the monitors (monitor size unchanged) */
.cases-top{display:flex; justify-content:center; padding-inline:var(--sx)}

/* use-case arrows 20% lighter; full opacity on hover and keyboard focus */
.cases-btn{opacity:.8; transition:background .2s, opacity .2s}
.cases-btn:hover,.cases-btn:focus-visible{opacity:1}

/* use-case arrow icons grey; back to the ink colour on hover and keyboard focus */
.cases-btn{color:#9aa1ad; transition:background .2s, opacity .2s, color .2s}
.cases-btn:hover,.cases-btn:focus-visible{color:var(--c-ink)}

/* =====================================================================
   CONTACT RECEIPT (adapted from print.html) — replaces the "What we do" panel.
   System monospace instead of IBM Plex Mono (no extra font); navy slot.
   Prints the first time the contact section scrolls into view (.is-printing).
   ===================================================================== */
.ct-receipt{display:flex; align-items:center; justify-content:center; min-width:0}
.rc-slot{position:relative; width:min(100%,410px); padding-top:14px;
  /* shadow from the parent: a box-shadow on the paper is cut off by its clip-path; drop-shadow follows
     the visible paper (and the torn edge) as it prints */
  filter:drop-shadow(0 18px 24px rgba(13,19,48,.08)) drop-shadow(0 2px 4px rgba(13,19,48,.06))}
.rc-slot::before{content:""; position:absolute; left:-18px; right:-18px; top:0; height:16px; border-radius:10px;
  background:var(--dark); box-shadow:inset 0 3px 6px rgba(0,0,0,.35)}
.rc-paper{
  position:relative; margin:0 6px; padding:26px 24px 30px;
  background:#fff; color:#1b2733;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; font-size:12.5px; line-height:1.75;
  clip-path:inset(0 0 100% 0);                      /* hidden until it prints */
}
.ct-receipt.is-printing .rc-paper{animation:rc-print .8s .2s steps(28) both}   /* .8s, starting .2s after it scrolls into view */
@keyframes rc-print{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 -14px 0)}}
.rc-paper::after{content:""; position:absolute; left:0; right:0; bottom:-8px; height:8px;
  background:conic-gradient(from -45deg at bottom,#fff 90deg,transparent 0) 0 0/14px 8px repeat-x}
.rc-c{text-align:center}
.rc-co{font-weight:600; font-size:14px; letter-spacing:.02em}
.rc-sub,.rc-thanks{color:#5b6875}
.rc-sub{text-transform:uppercase}
.rc-hr{border:0; border-top:1px dashed #a9b2bc; margin:12px 0}
.rc-row{display:flex; align-items:baseline; gap:8px}
.rc-row span:nth-child(2){flex:1; border-bottom:1px dotted #b7c0c9; transform:translateY(-4px)}
.rc-row span:last-child{white-space:nowrap}
.rc-row.zero span:last-child{font-weight:600}
.rc-total{padding:4px 0; font-size:15px; font-weight:600; text-align:center; letter-spacing:.02em}
.rc-bar{height:44px; margin:16px 0 6px}
/* a real Code 128 barcode: scanning it reads "you're a curious one (^_^)". Full width and no pixel snapping,
   so the bar widths keep their exact ratios (it has its own quiet zone) */
.rc-bar svg{display:block; width:100%; height:100%}
@media (prefers-reduced-motion:reduce){ .rc-paper{clip-path:none} .ct-receipt.is-printing .rc-paper{animation:none} }
/* tablet + phone: the form comes first, the receipt under it */
@media (max-width:1023px){ .ct-receipt{order:1; padding-bottom:12px} }

/* receipt: a little bigger, and taller (more line height, padding and spacing) */
.rc-slot{width:min(100%,460px)}
.rc-paper{font-size:13.5px; line-height:2; padding:34px 28px 38px}
.rc-co{font-size:15px}
.rc-total{font-size:16px; padding:6px 0}
.rc-hr{margin:16px 0}
.rc-bar{height:52px; margin:20px 0 8px}

/* contact: same top padding as the other sections (was 5svh on desktop; bottom stays 0 so the footer sits flush) */
@media (min-width:761px), (min-width:521px) and (orientation:landscape){
  .ct[class]{padding-top:var(--st)}
}

/* phones only: receipt first, then "How can we help?" and the form (tablet keeps the form first) */
@media (max-width:760px) and (orientation:portrait), (max-width:520px){
  .ct-receipt{order:-1}
}

/* =====================================================================
   CONTACT FIT — top padding + .ct-wrap + footer = exactly one screen on
   desktop. The section was only min-height:100svh, so when the receipt
   was taller than the space left (≈688px on an 809px window) the wrap
   grew and pushed the footer below the fold.
   The receipt is now sized in em and its font-size follows the window
   height, so it keeps its size on tall screens and shrinks to fit on
   shorter ones (≈52 font-size units tall in total).
   ===================================================================== */
@media (min-width:1024px){
  .ct{height:max(100svh,600px); min-height:0}
  .ct-wrap{min-height:0}
  .rc-paper{font-size:clamp(10.5px, calc((100svh - 170px) / 52), 13.5px)}
}
.rc-slot{width:min(100%,34em); font-size:inherit}
.rc-paper{line-height:2; padding:2.5em 2.07em 2.8em}
.rc-co{font-size:1.11em}
.rc-total{font-size:1.185em; padding:.45em 0}
.rc-hr{margin:1.18em 0}
.rc-bar{height:3.85em; margin:1.48em 0 .6em}
/* the slot's width follows the paper's font-size */
@media (min-width:1024px){ .rc-slot{font-size:clamp(10.5px, calc((100svh - 170px) / 52), 13.5px)} }

/* phones: 32px more space above "How can we help?" (on top of the existing clamp(16px,3svh,28px)) and 32px above the receipt */
@media (max-width:760px) and (orientation:portrait), (max-width:520px){
  .ct .ct-main{padding-top:calc(clamp(16px,3svh,28px) + 32px)}
  .ct .ct-receipt{padding-top:32px}
}

/* contact: the lede line was removed; its top margin now sits on the title (desktop scale, 6px on phones) */
.ct .ct-title{margin-top:clamp(16px,2.8svh,32px); font-weight:600}   /* margin doubled; weight 500 -> 600 */
@media (max-width:760px) and (orientation:portrait), (max-width:520px){ .ct .ct-title{margin-top:12px} }

/* contact email block: top margin halved */
.ct .ct-email{margin-top:clamp(9px,1.7svh,20px)}
@media (max-width:760px) and (orientation:portrait), (max-width:520px){ .ct .ct-email{margin-top:clamp(6px,1.1svh,11px)} }

/* receipt gets the same top margin as the contact title */
.ct .ct-receipt{margin-top:clamp(16px,2.8svh,32px)}
@media (max-width:760px) and (orientation:portrait), (max-width:520px){ .ct .ct-receipt{margin-top:12px} }

/* phones: no scroll snap */
@media (max-width:760px) and (orientation:portrait), (max-width:520px){
  html,html[class]{scroll-snap-type:none}
}

/* tablet: form and receipt side by side, like desktop (phones keep the stacked layout) */
@media (max-width:1023px) and (min-width:761px), (max-width:1023px) and (min-width:521px) and (orientation:landscape){
  .ct-wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); grid-template-rows:none; column-gap:clamp(28px,4vw,48px)}
  .ct-receipt{order:0; padding-bottom:0}
  /* narrower column: the receipt text scales with the screen width so the rows still fit */
  .rc-slot,.rc-paper{font-size:clamp(10.5px,1.45vw,13.5px)}
}

/* receipt: feed out of the slot like a real printer. The paper slides down from behind the slot while
   its clip moves up by the same amount, so the bottom of the receipt appears first under the slot and
   the top edge comes out last. (Replaces the top-to-bottom wipe.) */
.rc-slot::before{z-index:1}
.rc-paper{transform:translateY(-100%)}
.ct-receipt.is-printing .rc-paper{animation:rc-feed 1s .2s steps(28) both}
@keyframes rc-feed{
  from{transform:translateY(-100%); clip-path:inset(100% 0 -14px 0)}
  to  {transform:none;              clip-path:inset(0 0 -14px 0)}
}
@media (prefers-reduced-motion:reduce){ .rc-paper{transform:none} .ct-receipt.is-printing .rc-paper{animation:none} }

/* =====================================================================
   BENITO F, page-wide: the body sections take on the hero's frosted-glass
   language on the usual white page: frosted cards, pills, buttons and
   fields. (Only while Benito F is shown.)
   ===================================================================== */
body[data-hero="benitoF"]{
  --fg-bg:linear-gradient(160deg,rgba(255,255,255,.86),rgba(251,252,255,.74)); --fg-edge:rgba(255,255,255,.95); --fg-blur:blur(18px) saturate(160%);
  --fg-shadow:inset 0 0 0 1px rgba(8,21,68,.06), inset 0 1px 0 var(--fg-edge), inset 0 -10px 20px -14px rgba(8,21,68,.05), 0 12px 30px -18px rgba(8,21,68,.24);
}
/* cards and tiles */
body[data-hero="benitoF"] .glass,
body[data-hero="benitoF"] .glass.interactive,
body[data-hero="benitoF"] .uc-field .uc-card{
  background:var(--fg-bg); -webkit-backdrop-filter:var(--fg-blur); backdrop-filter:var(--fg-blur); box-shadow:var(--fg-shadow);
}
/* pills and secondary buttons */
body[data-hero="benitoF"] .badge,
body[data-hero="benitoF"] .cta-btn,
body[data-hero="benitoF"] .cases-btn{
  border-color:transparent; background:var(--fg-bg); -webkit-backdrop-filter:var(--fg-blur); backdrop-filter:var(--fg-blur); box-shadow:var(--fg-shadow);
}
body[data-hero="benitoF"] .cta-btn:hover,
body[data-hero="benitoF"] .cases-btn:hover{background:rgba(255,255,255,.95)}
/* primary button: tinted blue glass, like the hero's round button */
body[data-hero="benitoF"] .cta-btn.primary{
  background:rgba(47,107,234,.78); color:#fff; -webkit-backdrop-filter:var(--fg-blur); backdrop-filter:var(--fg-blur);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.45), 0 10px 24px -10px rgba(6,69,216,.6);
}
body[data-hero="benitoF"] .cta-btn.primary:hover{background:rgba(30,88,214,.86)}
/* form fields */
body[data-hero="benitoF"] .ct-field input,
body[data-hero="benitoF"] .ct-field textarea{
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(251,252,255,.78)); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px rgba(8,21,68,.09), inset 0 1px 0 rgba(255,255,255,.95);
}
body[data-hero="benitoF"] .ct-field input:focus,
body[data-hero="benitoF"] .ct-field textarea:focus{background:rgba(255,255,255,.8); box-shadow:inset 0 0 0 1.5px var(--s-blue),0 0 0 4px rgba(30,64,175,.12)}
body[data-hero="benitoF"] .ct-field :is(input,textarea):user-invalid,body[data-hero="benitoF"] .ct-tried .ct-field :is(input,textarea):invalid{box-shadow:inset 0 0 0 1.5px #f0a3a3,0 0 0 4px rgba(217,58,58,.06)}

/* Benito F: the contact form's send button in the hero CTA's style: a frosted pill with a round blue icon button */
body[data-hero="benitoF"] .ct-form .cta-btn.primary{
  gap:.625rem; padding:.375rem .375rem .375rem 1.375rem; border-radius:50px; color:var(--ink); font-weight:500;
  background:var(--fg-bg); -webkit-backdrop-filter:var(--fg-blur); backdrop-filter:var(--fg-blur); box-shadow:var(--fg-shadow);
}
body[data-hero="benitoF"] .ct-form .cta-btn.primary svg{
  box-sizing:content-box; width:1rem; height:1rem; padding:.625rem; border-radius:50%; color:#fff;
  background:rgba(6,69,216,.82); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px -8px rgba(6,69,216,.6);
  transition:transform .3s var(--ease);
}
body[data-hero="benitoF"] .ct-form .cta-btn.primary:hover{background:rgba(255,255,255,.95); color:var(--ink)}
body[data-hero="benitoF"] .ct-form .cta-btn.primary:hover svg{transform:translateX(3px)}

/* Benito: the send button as the hero's "Let's talk" CTA: a soft grey pill (the bento card colour) with ink
   text and a round brand-blue button carrying the icon, which nudges right on hover */
body[data-hero="benito"] .ct-form .cta-btn.primary{
  gap:.625rem; padding:.375rem .375rem .375rem 1.375rem; border:0; border-radius:50px; color:var(--ink); font-weight:500;
  background:#f4f5f8; box-shadow:inset 0 0 0 1px #0645d8; -webkit-backdrop-filter:none; backdrop-filter:none;   /* trying a brand-blue outline */
}
body[data-hero="benito"] .ct-form .cta-btn.primary svg{
  box-sizing:content-box; width:1rem; height:1rem; padding:.625rem; border-radius:50%; color:#fff; background:#0645d8;
  transition:transform .3s var(--ease);
}
/* hover: a shimmer, a soft diagonal band of light with a faint blue edge, sweeps once across the pill, left to
   right, behind the text and the round button. ::before clears the glass rule's inset, padding and mask. */
body[data-hero="benito"] .ct-form .cta-btn.primary{position:relative; isolation:isolate; overflow:hidden}
body[data-hero="benito"] .ct-form .cta-btn.primary::before{
  content:""; position:absolute; z-index:-1; inset:0; padding:0; -webkit-mask:none; mask:none; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(96,156,255,.12) 42%, rgba(255,255,255,.95) 50%, rgba(96,156,255,.12) 58%, transparent 70%);
  transform:translateX(-110%);
}
body[data-hero="benito"] .ct-form .cta-btn.primary:hover{background:#f4f5f8; color:var(--ink)}
body[data-hero="benito"] .ct-form .cta-btn.primary:hover::before{animation:bn-shimmer .9s cubic-bezier(.4,0,.2,1)}
@keyframes bn-shimmer{from{transform:translateX(-110%)} to{transform:translateX(110%)}}
body[data-hero="benito"] .ct-form .cta-btn.primary:hover svg{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){ body[data-hero="benito"] .ct-form .cta-btn.primary:hover::before{animation:none} }


/* receipts feed out of a fixed window (overflow hidden) and only their transform animates. Animating clip-path
   alongside transform let the two drift apart on a busy page (the crop lagged the movement by a step or two),
   so the paper appeared 10-20px below the printer until the animation finished. */
.rc-feed{overflow:hidden; padding-bottom:14px; margin-bottom:-14px}   /* room for the torn edge */
.rc-paper{clip-path:none; transform:translateY(-100%)}
.ct-receipt.is-printing .rc-paper{animation:rc-feed-only 1s .2s steps(28) both}
@keyframes rc-feed-only{from{transform:translateY(-100%)} to{transform:none}}
@media (prefers-reduced-motion:reduce){ .rc-paper{transform:none} .ct-receipt.is-printing .rc-paper{animation:none} }

/* printer: a slot pressed into the page (the concave side of neumorphism): a blue channel with a deep inner
   shadow along its top, a soft lit lip along its bottom and a hairline rim, so it reads as cut into the screen
   and the paper feeds out of it. */
.rc-slot{padding-top:18px}
.rc-slot::before{
  left:-20px; right:-20px; top:0; height:18px; border-radius:40px;
  background:linear-gradient(180deg,#1947c2,#2f6bea);
  box-shadow:
    inset 0 4px 7px rgba(0,14,70,.6),              /* depth: shadow falling into the slot from its top edge */
    inset 0 -2px 3px rgba(255,255,255,.22),        /* light catching the slot's lower wall */
    0 1.5px 0 rgba(255,255,255,1),                 /* lit lip below the slot */
    0 -1px 1px rgba(55,84,170,.14),                /* shaded edge above it */
    0 0 0 1px rgba(55,84,170,.06);                 /* hairline rim */
}
.rc-feed{position:relative; z-index:2}