/* ==========================================================================
   Qubic Technologies site styles
   Typeface roles: Space Grotesk (display) / IBM Plex Sans (body) / IBM Plex Mono (data)
   Fonts are self-hosted below so no third-party request blocks first paint.
   ========================================================================== */

@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../fonts/space-grotesk-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* Brand palette taken directly from the client's own Illustrator artwork:
     #003048 navy, #084974 cube top, #3B729F mid face, #6D97BD light face. */
  --ink:#002E45;
  --ink-2:#083E5C;
  --ink-3:#12506F;
  --slate:#4C6274;
  --muted:#7E93A5;
  --paper:#F4F7FA;
  --surface:#FFFFFF;
  --line:#DCE5ED;
  --line-soft:#EBF1F6;
  --signal:#0B5C93;
  --signal-dark:#084974;
  --signal-soft:#E7F0F7;
  --sky:#3B729F;
  --sky-soft:#6D97BD;
  --amber:#E09B2D;
  --amber-soft:#FBF1DF;
  --mint:#0E8F6A;
  --danger:#C8442F;

  --display:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Plex Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sp:clamp(1rem,2.4vw,1.6rem);
  --gut:clamp(1.1rem,4vw,2rem);
  --sec:clamp(3.6rem,7vw,6.4rem);
  --shadow-1:0 1px 2px rgba(0,46,69,.05),0 4px 14px rgba(0,46,69,.05);
  --shadow-2:0 10px 34px rgba(0,46,69,.10),0 2px 8px rgba(0,46,69,.06);
  --ease:cubic-bezier(.22,.7,.32,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--body);font-size:1.0425rem;line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--signal);text-decoration:none}
a:hover{color:var(--signal-dark)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:.8rem 1.2rem;border-radius:0 0 var(--r) 0}
.skip-link:focus{left:0}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;color:var(--ink);line-height:1.14;letter-spacing:-.018em;margin:0 0 .6em}
h1{font-size:clamp(2.1rem,4.8vw,3.35rem)}
h2{font-size:clamp(1.6rem,3.3vw,2.4rem)}
h3{font-size:clamp(1.15rem,1.9vw,1.4rem)}
h4{font-size:1.06rem}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--ink)}

.wrap{width:min(1200px,100% - var(--gut)*2);margin-inline:auto}
.wrap-narrow{width:min(760px,100% - var(--gut)*2);margin-inline:auto}
.section{padding-block:var(--sec)}
.section-tight{padding-block:clamp(2.4rem,4.4vw,3.6rem)}
.ico{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- eyebrow: the small cube + mono label used to open every section --- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.735rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal);
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";width:11px;height:12px;flex:none;background:var(--signal);
  clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);
}
.eyebrow.on-dark{color:var(--amber)}
.eyebrow.on-dark::before{background:var(--amber)}

.lede{font-size:clamp(1.06rem,1.7vw,1.22rem);line-height:1.62;color:var(--slate);max-width:62ch}
.section-head{max-width:66ch;margin-bottom:clamp(2rem,3.5vw,3rem)}
.section-head.with-action{max-width:none;display:flex;flex-wrap:wrap;gap:1.4rem;align-items:flex-end;justify-content:space-between}
.section-head.with-action .sh-text{max-width:62ch}

/* --------------------------------------------------------------- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--display);font-weight:600;font-size:.96rem;letter-spacing:-.008em;
  padding:.72rem 1.25rem;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .16s var(--ease),box-shadow .2s var(--ease);
  white-space:nowrap;text-decoration:none;
}
.btn:active{transform:translateY(1px)}
.btn .ico{width:1.1em;height:1.1em}
.btn-primary{background:var(--signal);color:#fff;box-shadow:0 2px 10px rgba(27,92,224,.25)}
.btn-primary:hover{background:var(--signal-dark);color:#fff;box-shadow:0 6px 18px rgba(27,92,224,.32)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3);color:#fff}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);background:#fff}
.btn-light{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:#fff}
.btn-light:hover{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.5)}
.btn-amber{background:var(--amber);color:#3A2607}
.btn-amber:hover{background:#e0930f;color:#3A2607}
.btn-sm{padding:.5rem .85rem;font-size:.86rem}
.btn-lg{padding:.92rem 1.6rem;font-size:1.02rem}
.link-arrow{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--display);font-weight:600;font-size:.95rem}
.link-arrow .ico{transition:transform .2s var(--ease)}
.link-arrow:hover .ico{transform:translateX(4px)}

/* ---------------------------------------------------------------- header ---- */
.site-head{
  position:sticky;top:0;z-index:80;background:rgba(246,248,251,.86);
  backdrop-filter:saturate(160%) blur(12px);-webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s,background .25s;
}
.site-head.is-stuck{border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(0,46,69,.05)}
.head-inner{display:flex;align-items:center;gap:1.2rem;min-height:84px;padding-block:.55rem}
.brand{flex:none;display:block}
.brand img{width:auto;height:62px;display:block}
.head-nav{margin-left:auto}
.head-nav ul{display:flex;gap:.15rem;list-style:none;margin:0;padding:0}
.head-nav a{
  display:block;padding:.55rem .78rem;border-radius:var(--r-sm);
  font-family:var(--display);font-weight:500;font-size:.945rem;color:var(--slate);
  transition:color .18s,background .18s;position:relative;
}
.head-nav a:hover{color:var(--ink);background:rgba(0,46,69,.045)}
.head-nav a.is-active{color:var(--ink);font-weight:600}
.head-nav a.is-active::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.16rem;height:2px;
  background:var(--signal);border-radius:2px;
}
.head-actions{display:flex;align-items:center;gap:.7rem;margin-left:.4rem}
.head-search{position:relative;display:flex;align-items:center}
.head-search .ico{position:absolute;left:.7rem;width:16px;height:16px;color:var(--muted);pointer-events:none}
.head-search input{
  width:150px;padding:.52rem .7rem .52rem 2.05rem;border:1.5px solid var(--line);
  border-radius:var(--r-sm);background:#fff;font-family:var(--body);font-size:.9rem;color:var(--ink);
  transition:width .25s var(--ease),border-color .18s;
}
.head-search input:focus{width:210px;border-color:var(--signal);outline:none;box-shadow:0 0 0 3px var(--signal-soft)}
.nav-toggle{display:none;width:42px;height:42px;border:1.5px solid var(--line);background:#fff;border-radius:var(--r-sm);padding:0;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .22s var(--ease),opacity .18s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-nav,
.mobile-nav[hidden]{display:none}
.mobile-nav{border-top:1px solid var(--line);background:#fff;padding:.6rem var(--gut) 1.4rem}
.mobile-nav ul{list-style:none;margin:0 0 .8rem;padding:0}
.mobile-nav a{display:block;padding:.82rem .2rem;font-family:var(--display);font-weight:500;font-size:1.06rem;color:var(--ink-2);border-bottom:1px solid var(--line-soft)}
.mobile-nav a.is-active{color:var(--signal)}
.mobile-nav .mob-cta{margin-top:.8rem;border:none;background:var(--signal);color:#fff;text-align:center;border-radius:var(--r);padding:.85rem}
.mob-search{display:flex;gap:.5rem}
.mob-search input{flex:1;padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:var(--body)}

/* ------------------------------------------------------------------ hero ---- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding-block:clamp(3.4rem,7vw,6rem) clamp(3.6rem,8vw,7rem)}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(115deg,rgba(27,92,224,.30),transparent 55%),
    radial-gradient(120% 90% at 85% 8%,rgba(240,162,39,.14),transparent 60%);
  pointer-events:none;
}
.hero-grid-bg{
  position:absolute;inset:0;opacity:.16;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(90% 70% at 30% 20%,#000,transparent 78%);
  mask-image:radial-gradient(90% 70% at 30% 20%,#000,transparent 78%);
}
.hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{color:#fff;font-size:clamp(2.3rem,5.1vw,3.85rem);letter-spacing:-.028em;margin-bottom:1rem}
.hero h1 .accent{color:var(--amber)}
.hero .lede{color:#C3D0E3;max-width:52ch;font-size:clamp(1.05rem,1.6vw,1.2rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.9rem}
.hero-proof{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.4rem;padding-top:1.7rem;border-top:1px solid rgba(255,255,255,.14)}
.hero-proof span{
  font-family:var(--mono);font-size:.735rem;letter-spacing:.09em;text-transform:uppercase;
  color:#9FB3CE;border:1px solid rgba(255,255,255,.16);border-radius:100px;padding:.34rem .72rem;
}

/* the signature: an isometric stack that builds itself on load */
.hero-art{display:flex;justify-content:center;align-items:center;min-height:300px}
.iso{width:min(100%,430px);overflow:visible}
.iso .face{transform-origin:50% 50%}
/* Position is owned entirely by site.js, which moves each module frame by
   frame. Nothing here may set a transform: a CSS transform outranks the SVG
   transform attribute, which would pin every module to the same spot. The
   fade-in is opacity only. */
.iso-stage .iso-unit{opacity:0}
.iso-stage .iso-unit.is-ai{filter:drop-shadow(0 6px 14px rgba(224,155,45,.28))}
/* The glow's filter region is calculated from the element's own box, and a
   module thrown far outside the artboard leaves a visible seam behind. It is
   simply switched off while that is happening. */
.iso-stage.is-burst .iso-unit{filter:none}
.iso-float{animation:isoFloat 7s ease-in-out 1.5s infinite}
@keyframes isoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.iso-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;fill:#8FA6C6;text-transform:uppercase}
.iso-ground{fill:rgba(0,0,0,.22);filter:blur(11px)}
.iso-wire{stroke:rgba(255,255,255,.22);stroke-width:1;fill:none;stroke-dasharray:4 5}

/* --------------------------------------------------------------- surfaces --- */
.band-dark{background:var(--ink);color:#C3D0E3}
.band-dark h2,.band-dark h3{color:#fff}
.band-white{background:var(--surface)}
.band-tint{background:linear-gradient(180deg,#fff,var(--paper))}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.3rem,2.2vw,1.75rem);position:relative;
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease);
  display:flex;flex-direction:column;height:100%;
}
a.card{color:inherit}
.card:hover{border-color:#C9D6EA;box-shadow:var(--shadow-2);transform:translateY(-3px)}
.card-ico{
  width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;
  background:var(--signal-soft);color:var(--signal);margin-bottom:1rem;flex:none;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.card-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.card:hover .card-ico{background:var(--signal);color:#fff}
.card h3{margin-bottom:.5rem;font-size:1.16rem}
.card p{color:var(--slate);font-size:.965rem;margin-bottom:0}
.card-meta{margin-top:auto;padding-top:1.1rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.card-foot{margin-top:1.1rem;padding-top:1.05rem;border-top:1px solid var(--line-soft);display:flex;align-items:center;justify-content:space-between;gap:.8rem}

.tag{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--slate);background:var(--paper);border:1px solid var(--line);
  border-radius:100px;padding:.24rem .6rem;white-space:nowrap;
}
.tag-signal{background:var(--signal-soft);border-color:#CFE0FD;color:var(--signal-dark)}
.tag-amber{background:var(--amber-soft);border-color:#F6DCAE;color:#8A5A05}

.grid{display:grid;gap:clamp(1rem,1.8vw,1.35rem)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}

/* ------------------------------------------------------ filters (instant) --- */
/* The filters are a control panel rather than page content, so they get their
   own dark surface and sit tight under the page heading. */
.filters{
  background:linear-gradient(180deg,#0B3F5F,#08324D);
  border:1px solid #10557E;border-radius:var(--r-lg);
  padding:clamp(.95rem,2vw,1.25rem);margin:0 0 1rem;
  display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));align-items:end;
  box-shadow:0 10px 26px rgba(0,46,69,.18);
}
.filters > label,.filters .field > label,.filters .field-label{
  color:#9FC2DC;
}
.filters .input,.filters .select{background:#fff;border-color:transparent}
.filters .input:hover,.filters .select:hover{border-color:#8FB6D4}
.filters .input:focus,.filters .select:focus{
  border-color:var(--amber);box-shadow:0 0 0 3px rgba(224,155,45,.30);
}
.filters .btn-primary{background:var(--amber);color:#2E1D02;border-color:var(--amber)}
.filters .btn-primary:hover{background:#F0AE3E;color:#2E1D02}
.filters .f-wide{grid-column:span 2}
@media (max-width:640px){.filters .f-wide{grid-column:span 1}}
.field{display:flex;flex-direction:column;gap:.34rem;min-width:0}
.field > label,.field-label{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.input,.select,.textarea{
  width:100%;padding:.62rem .78rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-family:var(--body);font-size:.95rem;color:var(--ink);
  transition:border-color .16s,box-shadow .16s;-webkit-appearance:none;appearance:none;
}
.textarea{min-height:140px;resize:vertical;line-height:1.6}
.input:hover,.select:hover,.textarea:hover{border-color:#C9D6EA}
.input:focus,.select:focus,.textarea:focus{border-color:var(--signal);outline:none;box-shadow:0 0 0 3px var(--signal-soft)}
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%237C8CA3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1.5 1.75 6 6.25l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem;
}
.input-search{position:relative}
.input-search .ico{position:absolute;left:.72rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none}
.input-search input{padding-left:2.15rem}
.filters-foot{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:-.4rem 0 1.25rem;min-height:22px}
.result-count{font-family:var(--mono);font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.chip-clear{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  background:none;border:1px solid var(--line);border-radius:100px;padding:.26rem .66rem;
  color:var(--slate);cursor:pointer;transition:.16s;
}
.chip-clear:hover{border-color:var(--ink);color:var(--ink)}
.is-busy{opacity:.45;transition:opacity .18s}

/* ------------------------------------------------------------ pagination --- */
.pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;padding:.85rem 0}
.pagination.pg-top{border-bottom:1px solid var(--line);margin-bottom:1.35rem}
.pagination.pg-bottom{border-top:1px solid var(--line);margin-top:1.6rem}
.pg-summary{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--muted);margin:0}
.pg-summary b{color:var(--ink);font-weight:500}
.pg-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-left:auto}
.pg-numbers{display:flex;gap:.3rem}
.pg-btn{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 .6rem;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font-family:var(--display);font-weight:500;font-size:.86rem;color:var(--slate);
  transition:.16s var(--ease);cursor:pointer;
}
.pg-btn:hover{border-color:var(--ink);color:var(--ink)}
.pg-btn.is-current{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.pg-btn.is-disabled{opacity:.38;pointer-events:none}
@media (max-width:560px){
  .pagination{justify-content:center}
  .pg-buttons{margin-inline:auto;justify-content:center}
  .pg-summary{width:100%;text-align:center}
}

/* -------------------------------------------------------------- list rows --- */
.list-empty{
  text-align:center;padding:clamp(2.5rem,6vw,4rem) 1.5rem;background:var(--surface);
  border:1px dashed var(--line);border-radius:var(--r-lg);
}
.list-empty h3{margin-bottom:.4rem}
.list-empty p{color:var(--slate);margin-bottom:1.2rem}

/* ------------------------------------------------------------ page header --- */
.page-head{background:var(--ink);color:#fff;padding-block:clamp(2.8rem,5.5vw,4.4rem);position:relative;overflow:hidden}
.page-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(27,92,224,.28),transparent 58%);
}
.page-head > .wrap{position:relative;z-index:1}
.page-head h1{color:#fff;margin-bottom:.7rem}
.page-head .lede{color:#B9C8DE}
.crumbs{font-family:var(--mono);font-size:.73rem;letter-spacing:.1em;text-transform:uppercase;color:#7C93B4;margin-bottom:1.1rem;display:flex;gap:.5rem;flex-wrap:wrap}
.crumbs a{color:#9FB6D4}
.crumbs a:hover{color:#fff}

/* --------------------------------------------------------------- article ---- */
.prose{font-size:1.065rem;line-height:1.76;color:var(--ink-2)}
.prose h3{margin-top:2.2rem;font-size:1.36rem}
.prose h4{margin-top:1.8rem;font-size:1.1rem;font-family:var(--display);font-weight:600}
.prose ul,.prose ol{padding-left:1.15rem;margin:0 0 1.15rem}
.prose li{margin-bottom:.42rem}
.prose blockquote{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--amber);color:var(--slate);font-style:italic}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:.1em .38em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2rem 0}
.prose em{color:var(--slate)}

.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-2)}
.checklist li svg{width:19px;height:19px;flex:none;margin-top:.24rem;color:var(--mint);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

.split{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:start}
.aside-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;position:sticky;top:100px}
.aside-card h3{font-size:1.05rem;margin-bottom:.8rem}
.aside-card dl{margin:0;display:grid;gap:.85rem}
.aside-card dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:.15rem}
.aside-card dd{margin:0;font-size:.95rem;color:var(--ink)}

/* ------------------------------------------------------------------ steps --- */
.steps{counter-reset:step;display:grid;gap:0;border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.5rem 0;border-bottom:1px solid var(--line);align-items:start}
.step-n{
  font-family:var(--mono);font-size:.8rem;color:var(--signal);letter-spacing:.06em;
  padding-top:.28rem;min-width:2.4rem;
}
.step h3{font-size:1.16rem;margin-bottom:.35rem}
.step p{color:var(--slate);margin:0;max-width:70ch}

/* ---------------------------------------------------------------- accordion */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:none;border:0;padding:1.15rem 0;text-align:left;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:1.06rem;color:var(--ink);
}
.acc-btn:hover{color:var(--signal)}
.acc-sign{position:relative;width:18px;height:18px;flex:none}
.acc-sign::before,.acc-sign::after{content:"";position:absolute;background:currentColor;border-radius:2px;transition:transform .25s var(--ease)}
.acc-sign::before{left:0;top:8px;width:18px;height:2px}
.acc-sign::after{left:8px;top:0;width:2px;height:18px}
.acc-btn[aria-expanded="true"] .acc-sign::after{transform:rotate(90deg) scaleX(0)}
.acc-body{overflow:hidden;height:0;transition:height .3s var(--ease)}
.acc-body-inner{padding:0 0 1.3rem;color:var(--slate);max-width:74ch}

/* ------------------------------------------------------------------ forms --- */
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow-1)}
.form-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.form-grid .full{grid-column:1/-1}
.form-hint{font-size:.85rem;color:var(--muted);margin:.25rem 0 0}
.form-error{color:var(--danger);font-size:.86rem;margin:.3rem 0 0;font-weight:500}
.input.has-error,.textarea.has-error,.select.has-error{border-color:var(--danger);box-shadow:0 0 0 3px rgba(216,68,47,.1)}
.notice{border-radius:var(--r);padding:.9rem 1.1rem;margin-bottom:1.2rem;font-size:.95rem;border:1px solid}
.notice-ok{background:#EAF8F2;border-color:#B9E5D4;color:#0A6B4C}
.notice-err{background:#FDECEA;border-color:#F5C6BE;color:#9B2C1B}
.notice-info{background:var(--signal-soft);border-color:#CFE0FD;color:var(--signal-dark)}
.hp-field{position:absolute!important;left:-9999px!important}

/* ------------------------------------------------------------------ misc ---- */
.cta-band{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden}
.cta-band::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(27,92,224,.34),transparent 60%);pointer-events:none}
.cta-band > *{position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band p{color:#BACAE0;max-width:56ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}

.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--surface);padding:1.3rem 1.2rem;min-width:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:600;color:var(--ink);line-height:1.15;letter-spacing:-.02em;overflow-wrap:anywhere}
/* The registration number is a fixed string that cannot be shortened, so it
   gets its own size rather than forcing every figure in the row to shrink. */
.stat-long b{font-size:clamp(1.05rem,2vw,1.6rem);letter-spacing:-.01em}
.stat span{font-family:var(--mono);font-size:.71rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;margin-top:.4rem}

@media(max-width:820px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:1.05rem .95rem}
  .stat b{font-size:1.5rem}
  .stat-long b{font-size:1.12rem}
  .stat span{font-size:.65rem;letter-spacing:.08em}
}
@media(max-width:420px){
  .stat{padding:.9rem .8rem}
  .stat b{font-size:1.32rem}
  .stat-long b{font-size:1rem}
}

.quote-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.6rem}
.quote-card blockquote{margin:0 0 1rem;font-size:1.05rem;line-height:1.66;color:var(--ink-2)}
.quote-card cite{font-style:normal;font-family:var(--mono);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}

.result-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;display:block;color:inherit;transition:.18s var(--ease)}
.result-item:hover{border-color:#C9D6EA;box-shadow:var(--shadow-1);color:inherit}
.result-item h3{font-size:1.05rem;margin-bottom:.3rem}
.result-item p{color:var(--slate);font-size:.94rem;margin:0}

/* ----------------------------------------------------------- reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.07s}.reveal-d2{transition-delay:.14s}.reveal-d3{transition-delay:.21s}
.reveal-d4{transition-delay:.28s}.reveal-d5{transition-delay:.35s}.reveal-d6{transition-delay:.42s}

/* ------------------------------------------------------------------ footer -- */
.site-foot{background:var(--ink);color:#93A6C0;padding-block:clamp(2.8rem,5vw,4rem) 1.8rem;font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.35fr;gap:clamp(1.6rem,3.5vw,3rem)}
.foot-logo{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:14px;padding:.75rem .95rem;margin-bottom:.9rem}
.foot-logo img{height:52px;width:auto;display:block}
.foot-name{font-family:var(--display);font-weight:600;font-size:1.12rem;color:#fff;margin:0 0 .35rem;letter-spacing:-.012em}
.foot-tag{font-family:var(--display);color:#fff;font-size:1.02rem;margin-bottom:.5rem}
.foot-note{color:#7F94B1;max-width:36ch;font-size:.9rem}
.foot-col h3{color:#fff;font-size:.76rem;font-family:var(--mono);font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot-col a{color:#A5B8D2}
.foot-col a:hover{color:#fff}
.foot-contact address{font-style:normal;line-height:1.65;color:#A5B8D2;margin-bottom:1rem}
.foot-contact address strong{color:#fff}
.foot-contact .reg{font-family:var(--mono);font-size:.8rem;color:#7F94B1}
.foot-links{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.5rem}
.foot-links a{display:inline-flex;align-items:center;gap:.55rem}
.foot-hours{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:#7F94B1;margin:0}
.foot-disclaimer{margin:2.6rem 0 0;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.1);font-size:.845rem;line-height:1.62;color:#7A8FAD;max-width:100ch}
.foot-disclaimer strong{color:#A5B8D2}
.foot-bar{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1);font-size:.83rem;color:#6F86A6}
.foot-bar p{margin:0}
.foot-meta{font-family:var(--mono);letter-spacing:.04em;font-size:.76rem}

/* ------------------------------------------------------------ chat widget --- */
.chat-dock{position:fixed;right:24px;bottom:100px;z-index:90;touch-action:none}
.chat-dock[hidden]{display:none}
.chat-dock.is-dragging{cursor:grabbing;user-select:none}
.chat-dock.is-dragging .chat-bubble{transform:scale(1.06);animation:none}
.chat-bubble{
  position:relative;width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;
  background:var(--signal);color:#fff;box-shadow:0 10px 26px rgba(27,92,224,.42);
  display:grid;place-items:center;transition:background .2s,box-shadow .2s,transform .2s var(--ease);
  animation:chatHop 3.6s var(--ease) infinite;
}
.chat-bubble:hover{background:var(--signal-dark);box-shadow:0 14px 32px rgba(18,70,179,.5)}
.chat-bubble svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1;transition:opacity .2s,transform .25s var(--ease)}
.chat-ico-shut{opacity:0;transform:rotate(-45deg) scale(.7)}
.chat-dock.is-open .chat-ico-open{opacity:0;transform:rotate(45deg) scale(.7)}
.chat-dock.is-open .chat-ico-shut{opacity:1;transform:none}
.chat-dock.is-open .chat-bubble{animation:none;background:var(--ink)}
@keyframes chatHop{
  0%,58%,100%{transform:translateY(0)}
  64%{transform:translateY(-13px)}
  72%{transform:translateY(0)}
  78%{transform:translateY(-6px)}
  84%{transform:translateY(0)}
}
.chat-ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--signal);animation:chatPing 3.6s var(--ease) infinite;pointer-events:none}
@keyframes chatPing{0%,55%{opacity:.55;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.55)}}
.chat-dock.is-open .chat-ping{display:none}
.chat-close{
  position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--line);color:var(--slate);
  display:grid;place-items:center;cursor:pointer;padding:0;z-index:2;box-shadow:var(--shadow-1);
  opacity:0;transform:scale(.6);transition:.18s var(--ease);
}
.chat-dock:hover .chat-close,.chat-dock:focus-within .chat-close{opacity:1;transform:scale(1)}
.chat-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.chat-close:hover{border-color:var(--danger);color:var(--danger)}
.chat-grip{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-15px;width:26px;height:4px;border-radius:4px;
  background:rgba(0,46,69,.2);opacity:0;transition:opacity .18s;cursor:grab;
}
.chat-dock:hover .chat-grip{opacity:1}
.chat-panel{
  position:absolute;bottom:74px;right:0;width:min(320px,calc(100vw - 40px));
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 20px 50px rgba(0,46,69,.22);overflow:hidden;
  transform-origin:bottom right;animation:chatIn .24s var(--ease);
}
.chat-dock.dock-left .chat-panel{right:auto;left:0;transform-origin:bottom left}
.chat-dock.dock-top .chat-panel{bottom:auto;top:74px;transform-origin:top right}
.chat-dock.dock-top.dock-left .chat-panel{transform-origin:top left}
@keyframes chatIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.chat-panel-head{display:flex;gap:.7rem;align-items:center;padding:1rem 1.1rem;background:var(--ink);color:#fff}
.chat-panel-head strong{display:block;font-family:var(--display);font-size:.98rem;color:#fff}
.chat-panel-head span{display:block;font-size:.83rem;color:#A5B8D2;line-height:1.4}
.chat-dot{width:9px;height:9px;border-radius:50%;background:var(--mint);flex:none;box-shadow:0 0 0 3px rgba(14,159,114,.25)}
.chat-options{list-style:none;margin:0;padding:.45rem}
.chat-opt{display:flex;align-items:center;gap:.75rem;padding:.68rem .7rem;border-radius:var(--r);color:var(--ink);transition:background .16s}
.chat-opt:hover{background:var(--paper);color:var(--ink)}
.chat-opt-ico{width:36px;height:36px;border-radius:10px;background:var(--signal-soft);color:var(--signal);display:grid;place-items:center;flex:none}
.chat-opt-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.chat-opt-wa .chat-opt-ico{background:#E6F7EC;color:#1FA855}
.chat-opt-wa .chat-opt-ico svg{fill:currentColor;stroke:none}
.chat-opt-txt{flex:1;min-width:0;line-height:1.3}
.chat-opt-txt b{display:block;font-size:.94rem;font-weight:600}
.chat-opt-txt em{display:block;font-style:normal;font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-opt-go{width:16px;height:16px;flex:none;color:var(--muted);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.chat-opt:hover .chat-opt-go{transform:translateX(3px);color:var(--signal)}
.chat-foot{margin:0;padding:.7rem 1.1rem .95rem;border-top:1px solid var(--line-soft);font-size:.78rem;color:var(--muted)}

/* ------------------------------------------------------------- responsive --- */
@media (max-width:1080px){
  .head-search{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-art{order:-1;min-height:220px}
  .iso{max-width:330px}
  .split{grid-template-columns:1fr}
  .aside-card{position:static}
}
@media (max-width:820px){
  .head-nav{display:none}
  .nav-toggle{display:flex}
  .mobile-nav:not([hidden]){display:block}
  .head-actions .btn-primary{display:none}
  .head-inner{min-height:70px;padding-block:.45rem}
  .brand img{height:48px}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr;gap:2rem}
  .chat-dock{right:16px}
  .cta-actions .btn,.hero-cta .btn{flex:1 1 100%}
  .step{grid-template-columns:1fr;gap:.3rem}
  .step-n{padding-top:0}
}

@media print{
  .site-head,.site-foot,.chat-dock,.pagination,.filters{display:none!important}
  body{background:#fff}
}

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

/* ==========================================================================
   Practice areas and services

   Two different jobs, so two different treatments. The four practice areas are
   a navigational choice, and read as solid blocks of colour. The service cards
   underneath are a list you scan, so they are tinted rather than saturated and
   carry their colour in the icon, the rule and the tag.
   ========================================================================== */

/* ---- the four practice areas: solid colour, white type ------------------- */
.area-card{
  --area:#0B5C93;--area-deep:#084974;
  background:var(--area);border:0;color:#fff;position:relative;overflow:hidden;
  padding:clamp(1.3rem,2.2vw,1.6rem);border-radius:var(--r-lg);
  box-shadow:0 10px 24px rgba(0,46,69,.14);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
/* Four tones drawn from the brand navy rather than four unrelated hues, with
   amber reserved for the AI work because that is the one we want noticed. */
.area-card[data-area="build"]        {--area:#0B5C93;--area-deep:#073E63}
.area-card[data-area="automate-ai"]  {--area:#B8801F;--area-deep:#84590C}
.area-card[data-area="operate"]      {--area:#14657A;--area-deep:#0D4655}
.area-card[data-area="support-grow"] {--area:#3F5670;--area-deep:#2A3C51}
.area-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(150deg,rgba(255,255,255,.16),transparent 55%),
             linear-gradient(200deg,transparent 45%,var(--area-deep));
  opacity:.9;
}
/* A faint isometric cube in the corner, cropped: the same shape as the logo,
   used as texture rather than decoration. */
.area-card::after{
  content:'';position:absolute;right:-34px;bottom:-42px;width:126px;height:126px;
  background:
    conic-gradient(from 210deg at 50% 50%,
      rgba(255,255,255,.20) 0deg 120deg,
      rgba(255,255,255,.10) 120deg 240deg,
      rgba(255,255,255,.05) 240deg 360deg);
  clip-path:polygon(50% 0,100% 27%,100% 73%,50% 100%,0 73%,0 27%);
  transition:transform .35s var(--ease);
}
.area-card > *{position:relative;z-index:1}
.area-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,46,69,.22)}
.area-card:hover::after{transform:rotate(12deg) scale(1.08)}
.area-card .card-ico{
  width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.20);
  color:#fff;margin-bottom:1rem;backdrop-filter:blur(2px);
}
.area-card:hover .card-ico{background:rgba(255,255,255,.30);color:#fff}
.area-card h3{color:#fff;font-size:1.2rem;margin-bottom:.4rem}
.area-card p{color:rgba(255,255,255,.86);font-size:.94rem}
.area-card .link-arrow{color:#fff;margin-top:1rem;display:inline-flex}

/* ---- the service cards -------------------------------------------------
   White, with the practice-area colour carried in the icon, the rule and the
   tag rather than washed across the whole card. Beside the solid area blocks
   above, the two rows read as different kinds of thing without the grid
   turning into a colour chart. */
.card-svc{
  --area:#0B5C93;--area-soft:#EAF2F9;--area-ink:#084974;--area-line:#D7E3EE;
  background:#fff;border-color:var(--line);position:relative;overflow:hidden;
}
.card-svc[data-area="build"]        {--area:#0B5C93;--area-soft:#EAF2F9;--area-ink:#084974;--area-line:#CBDDEC}
.card-svc[data-area="automate-ai"]  {--area:#B8801F;--area-soft:#FBF3E4;--area-ink:#7A520B;--area-line:#E7D4B0}
.card-svc[data-area="operate"]      {--area:#14657A;--area-soft:#E8F1F4;--area-ink:#0D4655;--area-line:#C0D8DF}
.card-svc[data-area="support-grow"] {--area:#3F5670;--area-soft:#EDF0F4;--area-ink:#2A3C51;--area-line:#D2DAE4}

.card-svc .card-ico{
  width:42px;height:42px;border-radius:10px;
  background:var(--area-soft);color:var(--area);margin-bottom:1rem;
}
.card-svc:hover .card-ico{background:var(--area);color:#fff}
.card-svc h3{color:var(--ink)}
.card-svc p{color:var(--slate)}
.card-svc:hover{border-color:var(--area);box-shadow:var(--shadow-2)}
.card-svc .card-foot{border-top-color:var(--line-soft)}
.card-svc .tag-area{
  background:var(--area-soft);color:var(--area-ink);border-color:transparent;
  font-weight:600;letter-spacing:.05em;
}
.card-svc .link-arrow{color:var(--area)}

/* ------------------------------------------------- AI integration and setup */
.band-ai{padding-top:0}
.ai-band{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.6rem,3.5vw,3rem);
  background:var(--ink);border-radius:var(--r-xl);padding:clamp(1.6rem,4vw,3.2rem);
  position:relative;overflow:hidden;align-items:center;
}
.ai-band::after{
  content:'';position:absolute;right:-120px;top:-120px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(224,155,45,.28),transparent 68%);pointer-events:none;
}
.ai-band > *{position:relative;z-index:1}
.ai-band h2{color:#fff;font-size:clamp(1.5rem,3vw,2.15rem);margin-bottom:.7rem}
.ai-band .lede{color:#B9CEE0;max-width:60ch}
.ai-list{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.85rem}
.ai-list li{padding-left:1.5rem;position:relative}
.ai-list li::before{
  content:'';position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:2px;
  background:var(--amber);transform:rotate(45deg);
}
.ai-list b{display:block;color:#fff;font-weight:600;font-size:1rem;margin-bottom:.12rem}
.ai-list span{color:#9FB8CE;font-size:.925rem;line-height:1.55}
.ai-band-cta{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.8rem}
.btn-amber{background:var(--amber);color:#2E1D02;border-color:var(--amber)}
.btn-onink{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.26)}
.btn-onink:hover{background:rgba(255,255,255,.20);color:#fff;border-color:rgba(255,255,255,.42)}
.btn-amber:hover{background:#F0AE3E;color:#2E1D02}
.ai-band-side{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.ai-tile{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r);padding:1rem .95rem;transition:border-color .2s var(--ease),background .2s var(--ease);
}
.ai-tile:hover{background:rgba(224,155,45,.12);border-color:rgba(224,155,45,.45)}
.ai-tile span{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  background:rgba(224,155,45,.16);color:var(--amber);margin-bottom:.7rem;
}
.ai-tile span svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ai-tile b{display:block;color:#fff;font-size:.94rem;font-weight:600;margin-bottom:.15rem}
.ai-tile i{font-style:normal;color:#93AEC6;font-size:.84rem;line-height:1.45}
@media(max-width:900px){
  .ai-band{grid-template-columns:1fr}
  .ai-band-side{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.ai-band-side{grid-template-columns:1fr}}

/* --------------------------------------------- section spacing adjustments */
/* Sections that follow a block of cards sit closer to it, so a heading reads
   as belonging to what comes next rather than floating between the two. */
.section-pull{padding-top:clamp(2.2rem,4vw,3.4rem)}

/* A page head sitting above a filter bar does not need its full bottom
   padding, and the filters themselves should start close underneath. */
.page-head.with-filters{padding-bottom:clamp(1.5rem,2.8vw,2.2rem)}
.section.filters-section{padding-top:clamp(1.2rem,2.2vw,1.8rem)}

/* ---------------------------------------------------- insight article cards */
/* Plain white on the page's own grey, with a hairline and a single accent rule
   at the top. The colour that remains is a small square beside the date, which
   is enough to tell one card from the next without turning a list of articles
   into a set of pastel tiles. */
.card-post{
  --accent:#0B5C93;
  background:#fff;border-color:var(--line);position:relative;overflow:hidden;
  padding-top:calc(clamp(1.3rem,2.2vw,1.75rem) + 3px);
}
.card-post::before{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent);
  opacity:.9;transition:opacity .2s var(--ease);
}
.card-post:nth-child(4n+1){--accent:#0B5C93}
.card-post:nth-child(4n+2){--accent:#B8801F}
.card-post:nth-child(4n+3){--accent:#14657A}
.card-post:nth-child(4n+4){--accent:#3F5670}
.card-post h3{color:var(--ink)}
.card-post p{color:var(--slate)}
.card-post:hover{border-color:var(--accent);box-shadow:var(--shadow-2)}
.card-post:hover::before{opacity:1}
.card-post .card-meta{gap:.45rem}
.card-post .card-meta .tag{
  background:var(--paper);border-color:var(--line);color:var(--slate);
  font-weight:500;
}
.card-post .card-meta .tag-signal{
  background:#fff;border-color:var(--line);color:var(--ink-2);font-weight:600;
  display:inline-flex;align-items:center;gap:.4rem;
}
.card-post .card-meta .tag-signal::before{
  content:'';width:7px;height:7px;border-radius:2px;background:var(--accent);flex:none;
}
.card-post .card-foot{border-top-color:var(--line-soft)}
.card-post .link-arrow{color:var(--accent)}
.card-post .read-time{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.07em}

/* ------------------------------------------------------ the closing actions */
/* The last button on the page is the one that matters, so it is the only
   element on the site with this treatment: a pale panel on dark, with the
   arrow travelling as you approach it. */
.btn-start{
  background:#fff;color:var(--ink);border:0;position:relative;overflow:hidden;
  padding-right:1.5rem;font-weight:600;
  box-shadow:0 10px 26px rgba(0,0,0,.24);
}
.btn-start::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,var(--amber),#F4C05F);
  transform:translateX(-101%);transition:transform .34s var(--ease);
}
.btn-start span,.btn-start .ico{position:relative;z-index:1}
.btn-start .ico{transition:transform .34s var(--ease)}
.btn-start:hover{color:#2E1D02;box-shadow:0 14px 32px rgba(224,155,45,.36)}
.btn-start:hover::before{transform:translateX(0)}
.btn-start:hover .ico{transform:translateX(5px)}

.btn-wa{
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.42);
}
.btn-wa:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* ==========================================================================
   Hero background layer and the code panel
   ========================================================================== */
.hero-circuit{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;opacity:.85;
  mask-image:linear-gradient(180deg,transparent,#000 18%,#000 78%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 78%,transparent);
}
.hero-inner{z-index:1}

/* Modules above, editor below, tucked up so the two overlap a little. The
   modules sit on the higher layer, so whenever one travels into the lower left
   it passes in front of the panel, which gives the pair some depth without any
   extra logic deciding when. */
/* The text sits on the highest layer so a module thrown off course passes
   behind the headline rather than across it. */
.hero-text{position:relative;z-index:3}
.hero-art{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch}
.hero-art .iso{width:min(100%,330px);align-self:center;position:relative;z-index:2}
.iso-hit{outline:none}
.iso-hit:focus{outline:none}
.code-panel{
  width:min(430px,100%);margin-top:-2.6rem;align-self:flex-start;position:relative;z-index:1;
  background:rgba(4,26,40,.80);border:1px solid rgba(126,170,208,.22);
  border-radius:12px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,20,32,.42);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.code-bar{
  display:flex;align-items:center;gap:.35rem;
  padding:.5rem .7rem;border-bottom:1px solid rgba(126,170,208,.16);
  background:rgba(255,255,255,.03);
}
.code-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.code-dot:nth-child(1){background:#D8604C}
.code-dot:nth-child(2){background:#D9A93C}
.code-dot:nth-child(3){background:#4FA97B}
.code-file{
  margin-left:.5rem;font-family:var(--mono);font-size:.68rem;
  color:#7FA5C4;letter-spacing:.04em;
}
/* A fixed height with the text pinned to the bottom, so new lines push the
   older ones up out of sight the way a terminal does, and the page never
   shifts as the typing runs. */
.code-body{
  margin:0;padding:.55rem .9rem .7rem;
  font-family:var(--mono);font-size:.78rem;line-height:1.55;
  white-space:pre-wrap;word-break:break-word;color:#B9CFE2;
  height:13.4rem;display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.code-body code{font:inherit;color:inherit;display:block}
.tk-key {color:#7FB2E5}
.tk-str {color:#8FCB9B}
.tk-com {color:#5E7F99;font-style:italic}
.tk-fn  {color:#E8B860}
.tk-type{color:#6FC7C1}
.tk-num {color:#E29B72}
.tk-txt {color:#B9CFE2}
.code-caret{
  display:inline-block;width:7px;height:1em;vertical-align:-2px;
  background:var(--amber);animation:caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}

@media(max-width:1100px){
  .hero-art .iso{width:min(100%,300px)}
  .code-panel{width:100%;margin-top:-1.6rem}
}
@media(max-width:900px){
  .code-panel{width:100%;margin-top:.8rem;align-self:center}
  .code-body{height:11.5rem;font-size:.72rem}
}
@media(max-width:640px){
  .code-panel{display:block}
  .code-body{height:10rem;font-size:.68rem}
}

/* ------------------------------------------------------------ research page */
.aside-stack{display:grid;gap:1.1rem;position:sticky;top:100px}
.code-panel-tall .code-body{height:24rem}
.aside-stack .code-panel{width:100%;margin-top:0;align-self:auto}

.model-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.model-list li{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;align-items:baseline}
.model-list b{font-size:.95rem;font-weight:600;color:var(--ink)}
.model-list i{grid-column:2;font-style:normal;font-size:.85rem;color:var(--slate)}
/* Our own marks, not anybody's trademark. */
.model-mark{grid-row:span 2;width:11px;height:11px;border-radius:3px;align-self:center}
.model-cloud{background:var(--signal)}
.model-open{background:var(--amber)}
.model-self{background:#14657A}

@media(max-width:900px){
  .aside-stack{position:static}
  .code-panel-tall .code-body{height:18rem}
}

/* ---------------------------------------------------------- back to top */
.to-top{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,14px);
  z-index:70;display:none;align-items:center;gap:.4rem;
  padding:.6rem 1.05rem;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(0,46,69,.92);color:#fff;cursor:pointer;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(0,20,32,.34);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.to-top svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.to-top.is-on{opacity:1;transform:translate(-50%,0)}
.to-top:active{transform:translate(-50%,1px)}
@media(max-width:900px){
  .to-top{display:inline-flex}
}
@media(prefers-reduced-motion:reduce){
  .to-top{transition:none}
}