/* ============================================================
   Twisted Kelp — full site stylesheet  (Direction C system)
   Brand teal #20D3C2 · Space Grotesk / IBM Plex Sans / IBM Plex Mono
   Tonal system: dark (ink/slate) + light (paper). Teal accent, ember sparingly.
   ============================================================ */

:root{
  --teal:#20D3C2;
  --teal-d:#0E9C8E;
  --teal-deep:#0c5d56;
  --ember:#E8843C;
  --ink:#070B0D;
  --ink-2:#0A1013;
  --slate:#0C1316;
  --slate-2:#111A1E;
  --slate-3:#1A282E;       /* hairline on dark */
  --paper:#F4F3EE;
  --paper-2:#FBFAF6;
  --paper-3:#ECEAE2;
  --paper-line:#E0DFD5;
  --text-d:#E8EEF0;
  --text-dim:#90A2A7;
  --text-dim2:#6E8086;
  --text-l:#101A1E;
  --text-lm:#54656B;
  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--ink);color:var(--text-l);
  font-family:"IBM Plex Sans",system-ui,sans-serif;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4,p{margin:0;}

/* ---------- type ---------- */
.display{font-family:"Space Grotesk",sans-serif;font-weight:600;letter-spacing:-0.02em;line-height:1.04;}
.mono{font-family:"IBM Plex Mono",monospace;}
.kicker{
  font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:500;
  letter-spacing:0.22em;text-transform:uppercase;
}
.coord{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--text-dim2);}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}
.section{padding-block:clamp(64px,8vw,112px);}
.section-sm{padding-block:clamp(40px,5vw,64px);}
.dark{background:var(--slate);color:var(--text-d);}
.ink{background:var(--ink);color:var(--text-d);}
.light{background:var(--paper);color:var(--text-l);}
.light-2{background:var(--paper-2);color:var(--text-l);}
.eyebrow{display:flex;align-items:center;gap:12px;}
.eyebrow .bar{width:26px;height:1px;background:var(--teal);}

/* section heading block */
.sec-head{max-width:760px;}
.sec-head .kicker{color:var(--teal-d);}
.dark .sec-head .kicker,.ink .sec-head .kicker{color:var(--teal);}
.sec-head h2{font-size:clamp(28px,3.6vw,46px);margin-top:18px;}
.sec-head p{font-size:clamp(16px,1.5vw,19px);margin-top:18px;color:var(--text-lm);max-width:640px;}
.dark .sec-head p,.ink .sec-head p{color:var(--text-dim);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:transform .15s,background .15s,color .15s,border-color .15s;}
.btn .ar{transition:transform .15s;}
.btn:hover .ar{transform:translateX(3px);}
.btn-primary{background:var(--teal);color:#06201C;}
.btn-primary:hover{background:#3ee0d0;transform:translateY(-1px);}
.btn-ghost-d{background:transparent;color:var(--text-d);border-color:rgba(255,255,255,.22);}
.btn-ghost-d:hover{border-color:var(--teal);color:var(--teal);}
.btn-ghost-l{background:transparent;color:var(--text-l);border-color:rgba(10,20,24,.22);}
.btn-ghost-l:hover{border-color:var(--teal-d);color:var(--teal-d);}

/* status dot */
.dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none;
  box-shadow:0 0 0 0 rgba(32,211,194,.6);animation:pulse 2.6s infinite;}
.dot.ember{background:var(--ember);box-shadow:0 0 0 0 rgba(232,132,60,.6);animation:pulse-e 2.6s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(32,211,194,.5);}70%{box-shadow:0 0 0 9px rgba(32,211,194,0);}100%{box-shadow:0 0 0 0 rgba(32,211,194,0);}}
@keyframes pulse-e{0%{box-shadow:0 0 0 0 rgba(232,132,60,.5);}70%{box-shadow:0 0 0 9px rgba(232,132,60,0);}100%{box-shadow:0 0 0 0 rgba(232,132,60,0);}}

/* concentric rings motif */
.rings{position:absolute;pointer-events:none;}
.rings span{position:absolute;border-radius:50%;border:1px solid rgba(32,211,194,.14);left:50%;top:50%;transform:translate(-50%,-50%);}

/* =================================================================
   HEADER
   ================================================================= */
.site-head{position:sticky;top:0;z-index:50;background:rgba(7,11,13,.78);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--slate-3);}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;}
.site-head .logo{height:24px;width:auto;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{color:var(--text-d);text-decoration:none;font-size:14.5px;font-weight:500;
  opacity:.85;transition:opacity .15s,color .15s;}
.nav-links a:hover{opacity:1;color:var(--teal);}
.nav-links a.cta{opacity:1;color:#06201C;}
.nav-links a.cta:hover{color:#06201C;}
.nav-toggle{display:none;}

/* nav dropdowns */
.has-drop{position:relative;display:flex;align-items:center;}
.nav-links .drop-toggle{display:inline-flex;align-items:center;gap:7px;color:var(--text-d);
  text-decoration:none;font-size:14.5px;font-weight:500;opacity:.85;transition:opacity .15s,color .15s;}
.has-drop:hover .drop-toggle,.has-drop:focus-within .drop-toggle{opacity:1;color:var(--teal);}
.drop-toggle .chev{width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .18s;opacity:.65;}
.has-drop:hover .chev,.has-drop:focus-within .chev{transform:translateY(0) rotate(225deg);opacity:1;}
/* invisible bridge so the menu doesn't close in the gap */
.has-drop::after{content:"";position:absolute;top:100%;left:0;right:0;height:16px;}
.drop{position:absolute;top:calc(100% + 14px);left:-16px;min-width:258px;padding:8px;
  background:rgba(8,13,15,.97);backdrop-filter:blur(16px);border:1px solid var(--slate-3);border-radius:7px;
  box-shadow:0 26px 64px -26px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;transform:translateY(7px);pointer-events:none;
  transition:opacity .16s,transform .16s,visibility .16s;z-index:60;}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;}
.drop a{display:flex;flex-direction:column;gap:3px;padding:10px 13px;border-radius:5px;
  text-decoration:none;opacity:1;transition:background .14s;}
.drop a .dt{font-size:14px;font-weight:600;color:var(--text-d);transition:color .14s;}
.drop a .dd{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.07em;color:var(--text-dim2);}
.drop a:hover{background:rgba(32,211,194,.09);}
.drop a:hover .dt{color:var(--teal);}
.drop .sep{height:1px;background:var(--slate-3);margin:6px 9px;}
.drop a.all .dt{color:var(--teal);font-size:13px;}
.drop a.all .dt .ar{transition:transform .15s;display:inline-block;}
.drop a.all:hover .dt .ar{transform:translateX(3px);}

/* =================================================================
   HERO
   ================================================================= */
.hero{position:relative;overflow:hidden;background:var(--ink);color:var(--text-d);
  border-bottom:1px solid var(--slate-3);}
.hero .rings{top:-180px;right:-160px;width:0;height:0;}
.hero-grid{display:grid;grid-template-columns:1fr 470px;gap:40px;align-items:stretch;
  padding-block:clamp(56px,7vw,96px);position:relative;z-index:3;}
.hero h1{font-size:clamp(38px,5.4vw,68px);max-width:680px;margin-top:22px;}
.hero h1 em{font-style:normal;color:var(--teal);}
.hero .lede{font-size:clamp(17px,1.6vw,20px);color:var(--text-dim);margin-top:26px;max-width:540px;}
.hero .cta-row{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.hero .micro{margin-top:30px;display:flex;gap:10px;align-items:center;}

/* hero visual (right column photo) */
.hero-visual{position:relative;border:1px solid var(--slate-3);border-radius:6px;overflow:hidden;
  min-height:540px;box-shadow:0 34px 80px -34px rgba(0,0,0,.7);align-self:stretch;}
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,13,.18),rgba(7,11,13,.10) 40%,rgba(7,11,13,.42));}
.hv-chip{position:absolute;left:16px;top:16px;z-index:2;display:flex;align-items:center;gap:9px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--text-d);
  background:rgba(7,11,13,.55);backdrop-filter:blur(6px);border:1px solid var(--slate-3);padding:8px 12px;border-radius:3px;}
.hv-cap{position:absolute;left:16px;bottom:14px;z-index:2;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.5);}
.hero-ticks{position:absolute;inset:0;pointer-events:none;}
.hero-ticks .coord{position:absolute;color:var(--text-dim2);opacity:.7;white-space:nowrap;}

/* telemetry panel */
.panel{background:var(--slate-2);border:1px solid var(--slate-3);border-radius:5px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--slate-3);}
.panel-head .ttl{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;color:var(--text-d);}
.panel-map{position:relative;height:186px;background:var(--ink);}
.panel-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;}
.pin{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(32,211,194,.16);transform:translate(-50%,-50%);}
.pin.ember{background:var(--ember);box-shadow:0 0 0 4px rgba(232,132,60,.18);}
.panel-rows{padding:6px 16px 14px;}
.prow{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--slate-3);}
.prow:last-child{border-bottom:none;}
.prow .k{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--text-dim);letter-spacing:.08em;}
.prow .v{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--text-d);}
.prow .s{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;color:var(--teal);min-width:70px;text-align:right;}
.prow .s.warn{color:var(--ember);}

/* =================================================================
   ENV TRUST BAND
   ================================================================= */
.envband{background:var(--paper-2);border-bottom:1px solid var(--paper-line);}
.envband .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding-block:22px;}
.envband .lbl{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-lm);max-width:180px;}
.env-chips{display:flex;gap:10px;flex-wrap:wrap;flex:1;justify-content:flex-end;}
.env-chips span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.08em;
  color:var(--text-l);border:1px solid var(--paper-line);background:var(--paper);padding:9px 15px;border-radius:2px;}

/* agency logo marquee */
.envband .wrap{padding-bottom:18px;}
.envband .lbl{max-width:none;text-align:center;width:100%;}
.logo-marquee{position:relative;overflow:hidden;padding-bottom:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 90px,#000 calc(100% - 90px),transparent);}
.logo-track{display:flex;align-items:center;gap:64px;width:max-content;padding-inline:32px;
  animation:logoscroll 38s linear infinite;}
.logo-marquee:hover .logo-track{animation-play-state:paused;}
@media (prefers-reduced-motion:reduce){.logo-track{animation:none;}}
@keyframes logoscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.logo-cell{flex:none;display:flex;align-items:center;justify-content:center;}
.logo-cell image-slot{filter:grayscale(1);opacity:.55;transition:opacity .2s,filter .2s;}
.logo-cell image-slot:hover{filter:grayscale(0);opacity:1;}
.logo-cell image-slot:not([data-filled]){filter:none;opacity:1;}
.logo-cell image-slot::part(frame){background:transparent;}
.logo-cell image-slot::part(ring){border-color:var(--paper-line);}

/* =================================================================
   THESIS / PROBLEM
   ================================================================= */
.thesis{position:relative;overflow:hidden;}
.thesis .big{font-family:"Space Grotesk",sans-serif;font-weight:500;letter-spacing:-0.02em;
  font-size:clamp(26px,3.4vw,42px);line-height:1.18;max-width:920px;}
.thesis .big b{color:var(--teal);font-weight:500;}
.thesis-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:56px;}
.thesis-cols .col h4{font-size:16px;font-weight:600;color:var(--text-d);margin-bottom:10px;display:flex;gap:10px;align-items:baseline;}
.thesis-cols .col h4 .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--teal);}
.thesis-cols .col p{font-size:14.5px;color:var(--text-dim);}

/* =================================================================
   CAPABILITY STACK
   ================================================================= */
.stack{display:flex;flex-direction:column;gap:10px;margin-top:48px;}
.layer{display:grid;grid-template-columns:56px 210px 1fr 290px;gap:24px;align-items:center;
  background:var(--paper-2);border:1px solid var(--paper-line);border-left:2px solid var(--teal);
  padding:22px 26px;border-radius:3px;transition:transform .15s,box-shadow .15s,border-color .15s;}
.layer:hover{transform:translateX(4px);box-shadow:0 10px 30px -16px rgba(12,93,86,.4);}
.layer .lnum{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--teal-d);letter-spacing:.1em;}
.layer .lname{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:18px;color:var(--text-l);}
.layer .ldesc{font-size:14.5px;color:var(--text-lm);}
.layer .ltags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:280px;}
.layer .ltags span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--text-lm);
  border:1px solid var(--paper-line);padding:4px 8px;border-radius:2px;background:var(--paper);white-space:nowrap;}

/* =================================================================
   PRODUCTS
   ================================================================= */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:48px;}
.prod{background:var(--slate-2);border:1px solid var(--slate-3);border-radius:5px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .18s,border-color .18s,box-shadow .18s;}
.prod:hover{transform:translateY(-3px);border-color:rgba(32,211,194,.4);box-shadow:0 24px 50px -28px rgba(0,0,0,.7);}
.prod-media{position:relative;height:184px;overflow:hidden;
  background:radial-gradient(120% 120% at 70% 25%,rgba(32,211,194,.10),transparent 55%),var(--ink);}
.prod-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;}
.prod-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,11,13,.05),rgba(7,11,13,.55));}
.prod-media .tag{position:absolute;left:16px;bottom:14px;z-index:2;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.1em;color:rgba(255,255,255,.55);}
.prod-media .badge{position:absolute;right:14px;top:14px;z-index:2;white-space:nowrap;font-family:"IBM Plex Mono",monospace;
  font-size:10px;letter-spacing:.1em;padding:5px 9px;border-radius:2px;background:rgba(32,211,194,.14);color:var(--teal);border:1px solid rgba(32,211,194,.3);}
.prod-body{padding:24px 26px 26px;flex:1;display:flex;flex-direction:column;}
.prod-body .pname{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:22px;color:var(--text-d);}
.prod-body .pcat{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--teal);text-transform:uppercase;margin-top:6px;}
.prod-body .pdesc{font-size:14.5px;color:var(--text-dim);margin-top:14px;}
.prod-body .pfeat{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:9px;}
.prod-body .pfeat li{font-size:13.5px;color:var(--text-dim);padding-left:18px;position:relative;}
.prod-body .pfeat li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--teal);border-radius:1px;}

/* =================================================================
   SERVICE CARDS  (the four services — theme-aware)
   ================================================================= */
.svc-card{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:5px;
  padding:32px 32px 34px;scroll-margin-top:96px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;}
.svc-card:hover{transform:translateY(-3px);border-color:rgba(14,156,142,.45);box-shadow:0 24px 50px -30px rgba(12,93,86,.45);}
.svc-card .svc-name{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:23px;color:var(--text-l);}
.svc-card .svc-cat{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  color:var(--teal-d);text-transform:uppercase;margin-top:6px;}
.svc-card .svc-desc{font-size:15px;color:var(--text-lm);margin-top:14px;}
.svc-card .svc-feat{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px;}
.svc-card .svc-feat li{font-size:13.5px;color:var(--text-lm);padding-left:18px;position:relative;}
.svc-card .svc-feat li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--teal-d);border-radius:1px;}
/* dark-section variant */
.ink .svc-card,.dark .svc-card{background:var(--slate-2);border-color:var(--slate-3);}
.ink .svc-card .svc-name,.dark .svc-card .svc-name{color:var(--text-d);}
.ink .svc-card .svc-cat,.dark .svc-card .svc-cat{color:var(--teal);}
.ink .svc-card .svc-desc,.dark .svc-card .svc-desc,
.ink .svc-card .svc-feat li,.dark .svc-card .svc-feat li{color:var(--text-dim);}
.ink .svc-card .svc-feat li::before,.dark .svc-card .svc-feat li::before{background:var(--teal);}

/* =================================================================
   INTEROP / SECURITY
   ================================================================= */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;}
.feat{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:4px;padding:28px 26px;}
.feat .ic{width:38px;height:38px;border-radius:3px;background:rgba(32,211,194,.12);border:1px solid rgba(14,156,142,.3);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--teal-d);}
.feat .ic span{width:14px;height:14px;border:2px solid var(--teal-d);border-radius:50%;}
.feat .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ink .feat .ic{color:var(--teal);}
.feat h4{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:18px;color:var(--text-l);}
.feat p{font-size:14px;color:var(--text-lm);margin-top:10px;}
.feat .meta{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--teal-d);margin-top:14px;}

/* =================================================================
   DIFFERENTIATORS  (dark, big numbered)
   ================================================================= */
.diff-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:48px;
  background:var(--slate-3);border:1px solid var(--slate-3);border-radius:5px;overflow:hidden;}
.diff{background:var(--slate);padding:36px 34px;}
.diff .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--teal);letter-spacing:.14em;}
.diff h4{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:21px;color:var(--text-d);margin-top:14px;}
.diff p{font-size:14.5px;color:var(--text-dim);margin-top:12px;}

/* =================================================================
   CAPABILITIES STATEMENT
   ================================================================= */
.capstmt{background:var(--paper);}
.cap-card{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:6px;
  margin-top:40px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(12,40,46,.4);}
.cap-top{display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--ink);color:var(--text-d);padding:22px 30px;flex-wrap:wrap;}
.cap-top .logo{height:22px;}
.cap-top .tt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;color:var(--teal);text-transform:uppercase;}
.cap-body{display:grid;grid-template-columns:1.4fr 1fr;gap:0;}
.cap-col{padding:30px 32px;}
.cap-col + .cap-col{border-left:1px solid var(--paper-line);}
.cap-h{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d);margin-bottom:14px;}
.cap-block + .cap-block{margin-top:26px;}
.cap-comp{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;}
.cap-comp li{font-size:14px;color:var(--text-l);padding-left:16px;position:relative;}
.cap-comp li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--teal);border-radius:1px;}
.cap-data{display:flex;flex-direction:column;gap:14px;}
.cap-data .row{display:flex;flex-direction:column;gap:3px;}
.cap-data .row .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;color:var(--text-lm);text-transform:uppercase;}
.cap-data .row .v{font-family:"IBM Plex Mono",monospace;font-size:14px;color:var(--text-l);font-weight:500;}
.ph{color:var(--text-lm)!important;background:repeating-linear-gradient(45deg,rgba(14,156,142,.07),rgba(14,156,142,.07) 6px,transparent 6px,transparent 12px);
  padding:2px 6px;border-radius:2px;border:1px dashed rgba(14,156,142,.4);display:inline-block;}
.cap-note{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--text-lm);margin-top:18px;
  padding:14px 16px;background:rgba(14,156,142,.06);border:1px dashed rgba(14,156,142,.35);border-radius:3px;}

/* =================================================================
   CONTACT
   ================================================================= */
.contact{position:relative;overflow:hidden;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;position:relative;z-index:2;}
.contact h2{font-size:clamp(30px,4vw,52px);}
.contact .lede{color:var(--text-dim);font-size:18px;margin-top:20px;max-width:440px;}
.contact-info{margin-top:34px;display:flex;flex-direction:column;gap:18px;}
.contact-info .ci{display:flex;flex-direction:column;gap:4px;}
.contact-info .ci .k{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--teal);text-transform:uppercase;}
.contact-info .ci .v{font-size:16px;color:var(--text-d);}
.form{background:var(--slate-2);border:1px solid var(--slate-3);border-radius:6px;padding:30px 30px 34px;}
.field{margin-bottom:18px;}
.field label{display:block;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-dim);margin-bottom:8px;}
.field input,.field select,.field textarea{width:100%;background:var(--ink);border:1px solid var(--slate-3);
  border-radius:3px;padding:13px 14px;color:var(--text-d);font-family:inherit;font-size:15px;transition:border-color .15s;}
.field input::placeholder,.field textarea::placeholder{color:var(--text-dim2);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.form .btn{width:100%;justify-content:center;margin-top:6px;}

/* =================================================================
   FOOTER
   ================================================================= */
.foot{background:var(--ink);border-top:1px solid var(--slate-3);color:var(--text-dim);}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-block:56px;}
.foot .logo{height:24px;margin-bottom:18px;}
.foot .blurb{font-size:14px;color:var(--text-dim);max-width:300px;}
.foot h5{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-d);margin-bottom:16px;}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;}
.foot ul a{color:var(--text-dim);text-decoration:none;font-size:14px;transition:color .15s;}
.foot ul a:hover{color:var(--teal);}
.foot-bottom{border-top:1px solid var(--slate-3);padding-block:22px;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:12px;}
.foot-bottom .coord{color:var(--text-dim2);}

/* =================================================================
   PAGE HERO (interior pages)
   ================================================================= */
.phero{position:relative;overflow:hidden;background:var(--ink);color:var(--text-d);border-bottom:1px solid var(--slate-3);
  min-height:380px;display:flex;align-items:center;}
.contact-hero{position:relative;overflow:hidden;}

/* full-bleed, drop-in REAL photo behind interior page headers */
.phero-photo{position:absolute!important;inset:0;width:100%!important;height:100%!important;
  z-index:0;display:block;}
.phero-photo::part(frame){background:#0A1013;border-radius:0;}
.phero-photo::part(ring){display:none;}
.phero-photo::part(empty){opacity:0;}            /* hide built-in cue; we draw our own below */
/* darkening veil — grounds any real photo in the site's tonal aesthetic */
.phero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,11,13,.92),rgba(7,11,13,.60) 52%,rgba(7,11,13,.42)),
    linear-gradient(0deg,rgba(7,11,13,.86),rgba(7,11,13,.12) 66%);}
/* lighten the veil while empty so the header doesn't read as a dead black band */
.phero-photo:not([data-filled]) ~ .phero-veil{opacity:.45;}
/* our own visible drop cue (light DOM, renders everywhere); hidden once filled */
.phero-hint{position:absolute;right:clamp(20px,5vw,64px);bottom:22px;z-index:3;pointer-events:none;
  display:flex;align-items:center;gap:9px;transition:opacity .25s;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(232,238,240,.52);}
.phero-hint .pulse{width:8px;height:8px;border-radius:50%;border:1.5px dashed var(--teal);flex:none;}
.phero-photo[data-filled] ~ .phero-hint{opacity:0;}
.phero .rings,.contact-hero .rings{z-index:2;}
.phero .wrap{padding-block:clamp(56px,7vw,90px);position:relative;z-index:3;width:100%;}
/* let drags/clicks pass through the (non-interactive) header copy to the photo */
.phero .wrap,.contact-hero .wrap{pointer-events:none;}
.phero .wrap a,.phero .wrap button,.contact-hero .wrap a,.contact-hero .form{pointer-events:auto;}
.phero h1{font-size:clamp(34px,4.6vw,58px);max-width:760px;margin-top:20px;}
.phero p{font-size:clamp(16px,1.6vw,19px);color:var(--text-dim);margin-top:22px;max-width:600px;}
.crumb{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--text-dim2);text-transform:uppercase;}

/* prose / generic content */
.lead{font-size:clamp(17px,1.7vw,21px);line-height:1.6;}

/* responsive grid utilities (replace fragile inline grids) */
.split-aside{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;}
.subgrid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.prod-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:48px;
  border:1px solid var(--paper-line);border-radius:5px;overflow:hidden;background:var(--paper-2);}
.steps-grid > div{border-right:1px solid var(--paper-line);}
.steps-grid > div:last-child{border-right:none;}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero .panel{max-width:440px;}
  .thesis-cols,.feat-grid{grid-template-columns:1fr;gap:24px;}
  .prod-grid,.diff-grid{grid-template-columns:1fr;}
  .prod-grid.cols-3{grid-template-columns:1fr;}
  .split-aside{grid-template-columns:1fr;gap:22px;}
  .steps-grid{grid-template-columns:1fr 1fr;}
  .steps-grid > div:nth-child(2n){border-right:none;}
  .steps-grid > div:nth-child(-n+2){border-bottom:1px solid var(--paper-line);}
  .cap-body{grid-template-columns:1fr;}
  .cap-col + .cap-col{border-left:none;border-top:1px solid var(--paper-line);}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
  .foot-top{grid-template-columns:1fr 1fr;gap:28px;}
  .layer{grid-template-columns:48px 1fr;gap:14px;}
  .layer .ldesc,.layer .ltags{grid-column:2;justify-content:flex-start;max-width:none;}
}
@media(max-width:680px){
  .nav-links{display:none;}
  .nav-links.open{display:flex;position:fixed;top:72px;left:0;right:0;flex-direction:column;
    max-height:calc(100dvh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:var(--ink);border-bottom:1px solid var(--slate-3);padding:20px var(--pad);gap:18px;align-items:flex-start;}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;}
  .nav-toggle span{width:22px;height:2px;background:var(--text-d);display:block;}
  /* dropdowns become inline accordions in the mobile sheet */
  .nav-links.open .has-drop{width:100%;flex-direction:column;align-items:flex-start;}
  .nav-links.open .drop-toggle .chev{display:none;}
  .nav-links.open .has-drop::after{display:none;}
  .nav-links.open .drop{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    background:none;border:none;box-shadow:none;backdrop-filter:none;min-width:0;
    padding:10px 0 2px;margin-top:10px;border-left:1px solid var(--slate-3);padding-left:14px;}
  .nav-links.open .drop a{padding:7px 8px;}
  .cap-comp{grid-template-columns:1fr;}
  .field-row{grid-template-columns:1fr;}
  .subgrid-2{grid-template-columns:1fr;}
  .steps-grid{grid-template-columns:1fr;}
  .steps-grid > div{border-right:none;}
  .steps-grid > div:not(:last-child){border-bottom:1px solid var(--paper-line);}
  .foot-top{grid-template-columns:1fr;}
  .envband .env-chips{justify-content:flex-start;}
}

/* =================================================================
   PRODUCT DETAIL ROWS (Products page — moved from inline <style>)
   ================================================================= */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center;}
.pd.rev .pd-media{order:2;}
.pd-media{position:relative;border:1px solid var(--slate-3);border-radius:6px;overflow:hidden;min-height:380px;
  background:radial-gradient(120% 120% at 70% 25%,rgba(32,211,194,.10),transparent 55%),var(--ink);box-shadow:0 30px 70px -34px rgba(0,0,0,.7);}
.pd-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;}
.pd-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,13,.1),rgba(7,11,13,.5));}
.pd-media .cap{position:absolute;left:16px;bottom:14px;z-index:2;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.55);}
.pd-media .badge{position:absolute;right:14px;top:14px;z-index:2;white-space:nowrap;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;padding:6px 10px;border-radius:2px;background:rgba(32,211,194,.14);color:var(--teal);border:1px solid rgba(32,211,194,.3);}
.pd-body .pcat{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--teal);text-transform:uppercase;}
.pd-body h2{font-family:"Space Grotesk";font-weight:600;font-size:clamp(26px,3vw,38px);margin-top:12px;}
.pd-body p{font-size:16.5px;color:var(--text-dim);margin-top:16px;max-width:520px;}
.ink .pd-body p{color:var(--text-dim);}
.light .pd-body p{color:var(--text-lm);}
.pd-spec{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:11px;}
.pd-spec li{font-size:14.5px;padding-left:20px;position:relative;}
.pd-spec li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--teal);border-radius:1px;}
.ink .pd-spec li{color:var(--text-dim);}
.light .pd-spec li{color:var(--text-l);}
@media(max-width:880px){.pd{grid-template-columns:1fr;gap:30px;}.pd.rev .pd-media{order:0;}}

/* =================================================================
   WORDPRESS COMPATIBILITY
   ================================================================= */
/* Contact hero bottom hairline (was an inline style in the static site). */
.contact-hero{border-bottom:1px solid var(--slate-3);}
/* Keep the sticky header below the admin bar when logged in. */
body.admin-bar .site-head{top:32px;}
@media(max-width:782px){body.admin-bar .site-head{top:46px;}}
/* Neutralize default list-block chrome inside the design's custom lists. */
ul.wp-block-list{box-sizing:border-box;}
/* Generic content pages (blog index / fallback / 404). */
.tk-prose{padding-block:clamp(48px,6vw,80px);}
.tk-prose .wrap > * + *{margin-top:1.2em;}
.tk-prose a{color:var(--teal-d);}

/* =================================================================
   NATIVE BLOCK MARKUP COMPATIBILITY
   The patterns are built from core blocks (paragraphs, headings,
   lists, buttons, images, groups). These rules map that markup onto
   the design system above so it renders identical to the original
   hand-written HTML.
   ================================================================= */

/* Block image figures never carry browser default margins here. */
figure.wp-block-image{margin:0;}

/* --- core/buttons --- */
.wp-block-buttons{display:flex;gap:14px;flex-wrap:wrap;}
.wp-block-button .wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;
  padding:14px 26px;border-radius:2px;border:1px solid transparent;cursor:pointer;
  text-decoration:none;white-space:nowrap;transition:transform .15s,background .15s,color .15s,border-color .15s;}
.btn-primary .wp-block-button__link{background:var(--teal);color:#06201C;}
.btn-primary .wp-block-button__link:hover{background:#3ee0d0;transform:translateY(-1px);}
.btn-ghost-d .wp-block-button__link{background:transparent;color:var(--text-d);border-color:rgba(255,255,255,.22);}
.btn-ghost-d .wp-block-button__link:hover{border-color:var(--teal);color:var(--teal);}
.btn-ghost-l .wp-block-button__link{background:transparent;color:var(--text-l);border-color:rgba(10,20,24,.22);}
.btn-ghost-l .wp-block-button__link:hover{border-color:var(--teal-d);color:var(--teal-d);}
.btn-arrow .wp-block-button__link::after{content:"\2192";display:inline-block;transition:transform .15s;}
.btn-arrow .wp-block-button__link:hover::after{transform:translateX(3px);}
.phero .wp-block-buttons{margin-top:30px;}

/* --- eyebrow / kicker paragraphs (bar drawn via ::before) --- */
.eyebrow::before{content:"";width:26px;height:1px;background:var(--teal);flex:none;}
.sec-head p.eyebrow{margin-top:0;font-size:12px;}
.hero .kicker{color:var(--teal);}
.contact-grid .kicker{color:var(--teal);}

/* --- numbered chips inside diff cards (paragraphs now) --- */
.diff p.n{margin-top:0;font-size:12px;color:var(--teal);}

/* --- page-hero (phero) veil, photo, crumb --- */
.phero::after,.contact-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(7,11,13,.92),rgba(7,11,13,.60) 52%,rgba(7,11,13,.42)),
    linear-gradient(0deg,rgba(7,11,13,.86),rgba(7,11,13,.12) 66%);}
figure.phero-photo img{width:100%;height:100%;object-fit:cover;}
.phero p.crumb,.contact-hero p.crumb{font-size:11px;color:var(--text-dim2);margin-top:0;max-width:none;}

/* --- home hero --- */
p.micro{display:flex;gap:10px;align-items:center;font-family:"IBM Plex Mono",monospace;
  font-size:11px;letter-spacing:.12em;color:var(--text-dim);}
p.micro::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none;
  box-shadow:0 0 0 0 rgba(32,211,194,.6);animation:pulse 2.6s infinite;}
.hero-visual figcaption{position:absolute;left:16px;bottom:14px;z-index:2;margin:0;text-align:left;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.5);}

/* --- agency logo marquee (plain images) --- */
.logo-cell img{width:160px;height:74px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:opacity .2s,filter .2s;}
.logo-cell img:hover{filter:grayscale(0);opacity:1;}

/* --- object-position / opacity helpers (replace inline styles on imgs) --- */
.tk-opaque img{opacity:1;}
.tk-obj-45-50 img{object-position:45% 50%;}
.tk-obj-42-45 img{object-position:42% 45%;}
.tk-obj-42-60 img{object-position:42% 60%;}
.tk-obj-55-50 img{object-position:55% 50%;}
.tk-obj-60-50 img{object-position:60% 50%;}
.tk-obj-50-15 img{object-position:50% 15%;}
.tk-obj-10-50 img{object-position:10% 50%;}

/* --- product / service cards --- */
.pd-body p.pcat{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;
  color:var(--teal);text-transform:uppercase;margin-top:0;max-width:none;}
.light .pd-body p.pcat{color:var(--teal-d);}
.svc-card .svc-desc a{color:var(--teal-d);}

/* --- interop / environments feature cards on dark sections --- */
.ink .feat{background:var(--slate-2);border-color:var(--slate-3);}
.ink .feat h4{color:var(--text-d);}
.ink .feat p{color:var(--text-dim);}

/* --- deployment steps (capabilities) --- */
.steps-grid > div{padding:30px 26px;}
.step-num{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--teal-d);letter-spacing:.14em;}
.steps-grid h4{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:19px;margin-top:12px;}
.steps-grid .step-desc{font-size:14px;color:var(--text-lm);margin-top:10px;}

/* --- ways-to-engage cards (incident support) --- */
.prod.engage{padding:30px 30px 34px;}
.engage-num{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;color:var(--teal);}
.engage-num.is-ember{color:var(--ember);}
.engage h3{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:21px;color:var(--text-d);margin-top:14px;}
.engage p:not(.engage-num){font-size:14.5px;color:var(--text-dim);margin-top:14px;}

/* --- how-to-buy cards (incident support) --- */
.buy-card{background:var(--paper-2);border:1px solid var(--paper-line);border-radius:5px;padding:24px 26px;}
.buy-card p:not(.cap-h){font-size:14.5px;color:var(--text-lm);}

/* --- split-aside content (about / incident support) --- */
.split-aside > .kicker{color:var(--teal-d);padding-top:6px;}
.split-aside .lead{max-width:760px;}
.split-aside h2.display{font-size:clamp(24px,2.8vw,34px);margin-top:16px;}
.tk-body-lg{margin-top:22px;max-width:720px;color:var(--text-lm);font-size:17px;}
.tk-body-lg strong{color:var(--text-l);}

/* --- 50/50 image split (about) --- */
.tk-split-50{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.tk-split-50 h2{font-size:clamp(26px,3.2vw,40px);margin-top:18px;}
.tk-split-50 .tk-body{margin-top:20px;color:var(--text-lm);font-size:17px;max-width:520px;}
.tk-split-50 .wp-block-buttons{margin-top:28px;}
figure.tk-photo-card{position:relative;border:1px solid var(--paper-line);border-radius:6px;overflow:hidden;min-height:360px;}
figure.tk-photo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
figure.tk-photo-card figcaption{position:absolute;left:16px;bottom:14px;margin:0;text-align:left;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.08em;color:rgba(255,255,255,.55);}
@media(max-width:980px){.tk-split-50{grid-template-columns:1fr;gap:28px;}}

/* --- capability statement card --- */
.cap-top figure.logo{margin:0;}
.cap-top figure.logo img{height:22px;width:auto;}
.cap-comp.tk-1col{grid-template-columns:1fr;}
.cap-data .row .v-sm{font-size:12.5px;}
.cap-data .ph{align-self:flex-start;}
.cap-text{font-size:14px;color:var(--text-lm);}

/* --- representative hardware band (products) --- */
.tk-hwband{border-block:1px solid var(--slate-3);}
.tk-hwband .wrap{display:flex;align-items:center;gap:32px;flex-wrap:wrap;}
.tk-hwband .kicker{color:var(--teal);max-width:200px;}
.tk-chips{display:flex;gap:10px;flex-wrap:wrap;flex:1;justify-content:flex-end;}
.tk-chips p{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--text-dim);
  border:1px solid var(--slate-3);padding:9px 14px;border-radius:2px;}

/* --- contact info + CTA banners --- */
.contact-info .ci .v a{color:var(--text-d);text-decoration:none;}
.contact-info .ci .v.tk-teal a{color:var(--teal);}
.contact-grid h2{margin-top:18px;}
.contact-hero h1{margin-top:18px;font-size:clamp(34px,4.6vw,56px);}
.contact-hero .lede{color:var(--text-dim);margin-top:22px;max-width:460px;font-size:18px;}
.contact-hero .wrap{padding-block:clamp(64px,8vw,108px);position:relative;z-index:2;}
.tk-cta .wrap{text-align:center;position:relative;z-index:2;}
.tk-cta h2{font-size:clamp(28px,3.6vw,44px);max-width:660px;margin-inline:auto;}
.tk-cta.tk-cta-lg h2{font-size:clamp(30px,4vw,48px);max-width:720px;}
.tk-cta.tk-cta-narrow h2{max-width:640px;}
.tk-cta .lede{color:var(--text-dim);max-width:520px;margin:18px auto 0;font-size:18px;}
.tk-cta .wp-block-buttons{justify-content:center;margin-top:32px;}
.tk-cta .lede + .wp-block-buttons{margin-top:30px;}

/* --- header / footer logos as image blocks --- */
.site-head figure.logo img{height:24px;width:auto;}
.foot figure.logo{margin:0 0 18px;}
.foot figure.logo img{height:24px;width:auto;}

/* --- Contact Form 7 integration --- */
.wpcf7-form-control-wrap{display:block;}
.wpcf7 p{margin:0;position:relative;}
.form input.wpcf7-submit{width:100%;margin-top:6px;}
/* keep the (visibility-toggled) spinner from wrapping below the full-width submit */
.form .wpcf7-spinner{position:absolute;right:16px;top:50%;transform:translateY(-50%);margin:0;}
.wpcf7-form .wpcf7-not-valid-tip{display:block;margin-top:6px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.06em;color:var(--ember);}
.wpcf7 form .wpcf7-response-output{margin:18px 0 0;padding:12px 14px;border:1px dashed var(--slate-3);border-radius:3px;
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--text-dim);}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--teal);color:var(--teal);}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{border-color:var(--ember);color:var(--ember);}
/* the CF7 wrapper sits where the bare <form> used to; let hero clicks through to it */
.contact-hero .wpcf7{pointer-events:auto;position:relative;z-index:2;}