/* Infinity Security Consulting — shared styles
   "Cinematic institutional" dark system: navy structure, blue interactive accent,
   red used sparingly for urgency, serif display + sans body. */

:root{
  --navy-950:#080f1c;
  --navy-900:#0b1220;
  --navy-800:#152a4a;
  --navy-700:#1f3b66;
  --navy-600:#2a5081;
  --surface-1:#17191d;   /* neutral card surface, low blue tint — matches reference more closely than a navy card */
  --surface-2:#212327;   /* hover / inner surface */
  --grey-100:#f5f6f8;
  --grey-200:#e8eaee;
  --grey-300:#d3d7de;
  --grey-500:#8891a0;
  --grey-700:#4a5361;
  --grey-900:#20242c;
  --white:#ffffff;
  --line:#e2e5ea;
  --line-dark:rgba(255,255,255,.07);

  --blue-600:#3660e0;
  --blue-500:#4d74ea;
  --blue-400:#7fa0f2;
  --blue-glow:rgba(77,116,234,.35);

  --red-600:#b8433a;
  --red-700:#8a2f28;
  --red-glow:rgba(184,67,58,.28);

  --ink-hi:#f2f4f8;      /* headings/emphasis on dark */
  --ink-body:#c7ccd8;    /* body copy on dark */
  --ink-dim:#8b93a6;     /* meta/secondary on dark */

  --radius:2px;
  --radius-lg:8px;
  --max:max(1180px, 62vw);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink-body);
  background:var(--navy-950);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;
  font-weight:500;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--ink-hi);
  letter-spacing:-0.01em;
}
p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}
img,video{max-width:100%;display:block;}
svg{display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue-400);
  font-weight:600;
  margin-bottom:14px;
  display:block;
}
.section-light .eyebrow{color:var(--navy-600);}

/* ---------- light section override ---------- */
.section-light{background:var(--white);color:var(--grey-700);}
.section-light h1,.section-light h2,.section-light h3{color:var(--navy-950);}
.section-light p{color:var(--grey-700);}
.section-light .sub{color:var(--grey-700)!important;}

/* ---------- nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:var(--navy-950);
  border-bottom:1px solid var(--line-dark);
}
.site-nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.logo-mark{
  display:inline-flex;align-items:center;gap:12px;
}
.logo-icon{height:40px;width:auto;display:block;}
.logo-wordmark{display:flex;flex-direction:column;line-height:1.05;}
.logo-wordmark .l1{
  font-family:"Inter",sans-serif;font-weight:800;font-size:.98rem;
  color:var(--white);letter-spacing:.01em;
}
.logo-wordmark .l2{
  font-family:"Inter",sans-serif;font-weight:700;font-size:.58rem;
  color:var(--grey-300);letter-spacing:.07em;text-transform:uppercase;
  border-top:2px solid var(--red-600);padding-top:2px;margin-top:2px;
}
footer .logo-icon{height:36px;}
footer .logo-wordmark .l1{font-size:.92rem;}
footer .logo-mark{margin-bottom:14px;}

/* ---------- intro / entry animation ---------- */
.intro-overlay{
  position:fixed;inset:0;z-index:9999;
  background:var(--navy-950);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease;
}
.intro-overlay.exit{opacity:0;pointer-events:none;}
.intro-video{width:100%;height:100%;object-fit:cover;display:block;}

.nav-links{display:flex;gap:26px;align-items:center;}
.nav-links a{
  color:var(--ink-dim);
  font-size:.87rem;
  font-weight:450;
  white-space:nowrap;
  transition:color .15s ease;
}
.nav-links a:hover,.nav-links a.active{color:var(--white);}
.nav-cta{
  background:var(--blue-600);
  color:var(--white)!important;
  padding:10px 20px;
  border-radius:var(--radius);
  font-size:.88rem!important;
  font-weight:600!important;
}
.nav-cta:hover{background:var(--blue-500);}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--white);margin:5px 0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;
  border-radius:var(--radius);
  font-size:.92rem;
  font-weight:600;
  font-family:inherit;
  border:1px solid transparent;
  background:none;
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
  transition:all .15s ease, transform .1s ease;
}
.btn:active{transform:scale(.96);}
.btn-primary{background:var(--blue-600);color:var(--white);}
.btn-primary:hover{background:var(--blue-500);box-shadow:0 0 0 4px var(--blue-glow);}
.btn-outline{border-color:rgba(255,255,255,.28);color:var(--white);}
.btn-outline:hover{border-color:var(--blue-400);background:rgba(255,255,255,.05);}
.btn-dark{background:var(--navy-950);color:var(--white);}
.btn-dark:hover{background:var(--surface-2);}
.btn-line{border-color:var(--navy-700);color:var(--blue-400);background:transparent;}
.btn-line:hover{background:var(--surface-2);border-color:var(--blue-400);}
.section-light .btn-line{color:var(--navy-700);border-color:var(--grey-300);}
.section-light .btn-line:hover{background:var(--grey-100);border-color:var(--navy-600);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}
.link-arrow{color:var(--blue-400);font-weight:600;font-size:.92rem;transition:opacity .15s ease;}
.link-arrow:hover{opacity:.75;}
.section-light .link-arrow{color:var(--navy-600);}

/* ---------- hero ---------- */
.hero{
  position:relative;
  color:var(--white);
  overflow:hidden;
  padding:130px 0 120px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 1px, transparent 1px 68px),
    radial-gradient(1000px 640px at 74% 46%, rgba(42,60,110,.30), rgba(42,60,110,0) 68%),
    var(--navy-950);
}
.hero .wrap{position:relative;z-index:2;}
.hero-graphic{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:58%;max-width:880px;min-width:420px;
  pointer-events:none;z-index:1;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 14%, rgba(0,0,0,.85) 28%, #000 40%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 14%, rgba(0,0,0,.85) 28%, #000 40%);
}
@media(max-width:960px){.hero-graphic{display:none;}}
.flow-line{
  position:absolute;left:0;bottom:0;width:100%;height:1px;overflow:hidden;pointer-events:none;
}
.flow-line::after{
  content:"";position:absolute;top:0;left:0;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,var(--blue-400),transparent);
  animation:flow-right 3.6s infinite linear;
}
@keyframes flow-right{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(350%);}
}
.hero h1{
  color:var(--white);
  font-size:clamp(2.1rem,4.2vw,3.5rem);
  max-width:16ch;
  margin-bottom:22px;
}
.hero .sub{
  color:var(--ink-body);
  font-size:1.12rem;
  max-width:52ch;
  margin-bottom:36px;
}
.page-hero{
  background:var(--navy-950);color:var(--white);
  padding:78px 0 64px;
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 1px, transparent 1px 68px);
}
.page-hero h1{color:var(--white);font-size:clamp(1.9rem,3.4vw,2.7rem);max-width:24ch;}
.page-hero .sub{color:var(--ink-body);max-width:60ch;font-size:1.05rem;}
.page-hero.on-light{background:var(--white);background-image:none;}
.page-hero.on-light h1{color:var(--navy-950);}
.page-hero.on-light .sub{color:var(--grey-700);}
.page-hero.on-light .eyebrow{color:var(--navy-600);}

/* ---------- alert / notice strip ---------- */
.notice{background:var(--navy-900);border-bottom:1px solid var(--line-dark);border-top:1px solid var(--line-dark);}
.notice .wrap{padding:18px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.notice-content{flex:1;min-width:0;}
.notice-head{margin:0 0 14px;display:flex;align-items:center;gap:10px;font-size:.92rem;}
.notice-head strong{color:var(--white);}
.notice .dot{width:7px;height:7px;border-radius:50%;background:var(--red-600);flex-shrink:0;box-shadow:0 0 0 4px var(--red-glow);animation:pulse-dot 2.2s ease-in-out infinite;}
@keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 4px var(--red-glow);}50%{opacity:.6;box-shadow:0 0 0 8px var(--red-glow);}}
.notice-body{margin:0;font-size:.92rem;color:var(--ink-body);line-height:1.65;max-width:78ch;}
.notice a{font-weight:600;color:var(--blue-400);white-space:nowrap;}
.notice a:hover{text-decoration:underline;}

.alert-callout{
  border:1px solid var(--red-700);
  background:linear-gradient(rgba(184,67,58,.08),rgba(184,67,58,.08));
  border-radius:var(--radius);
  padding:20px 22px;
  display:flex;gap:14px;align-items:flex-start;
}
.alert-callout .icon{color:var(--red-600);flex-shrink:0;margin-top:2px;}
.alert-callout strong{color:var(--white);}
.alert-callout p{margin:0;font-size:.92rem;color:var(--ink-body);}

/* ---------- sections ---------- */
section{padding:80px 0;}
.section-tight{padding:56px 0;}
.section-alt{background:var(--surface-1);}
h2.h-large{font-size:clamp(1.7rem,2.8vw,2.35rem);max-width:26ch;}
.intro-lead{font-size:1.1rem;color:var(--ink-body);max-width:66ch;}
.section-light .intro-lead{color:var(--grey-700);}

/* ---------- homepage intro: editorial lead-in ---------- */
.intro-block{display:flex;gap:30px;align-items:flex-start;}
.intro-rule{
  width:3px;flex-shrink:0;align-self:stretch;border-radius:2px;
  background:linear-gradient(var(--blue-500), var(--red-600));
  min-height:100%;
}
.intro-copy{display:flex;flex-direction:column;gap:20px;}
.intro-copy .intro-lead{
  font-family:"Newsreader",Georgia,serif;
  font-size:1.4rem;font-weight:500;line-height:1.55;
  color:var(--ink-hi);max-width:60ch;margin:0;
  letter-spacing:-0.005em;
}
.intro-copy .intro-lead .accent{color:var(--blue-400);font-style:italic;}
.intro-sub{
  font-family:"Inter",sans-serif;font-size:1rem;line-height:1.75;
  color:var(--ink-dim);max-width:58ch;margin:0;
}
@media(max-width:640px){
  .intro-block{gap:18px;}
  .intro-copy .intro-lead{font-size:1.2rem;}
}
.section-center{text-align:center;margin-left:auto;margin-right:auto;}

.section-title{text-align:center;margin:0 auto 44px;}
.section-title h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:14px;}
.section-title .rule{width:44px;height:2px;background:var(--blue-500);margin:0 auto;}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:860px){.grid-3{grid-template-columns:1fr;}.grid-2{grid-template-columns:1fr;}}
@media(max-width:560px){.grid-4{grid-template-columns:1fr;}}

/* ---------- tiles (icon + headline + short line) ---------- */
.tile{
  background:var(--surface-1);
  border:1px solid var(--line-dark);
  padding:32px 28px;
  border-radius:var(--radius-lg);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.tile:hover{transform:translateY(-4px);border-color:rgba(127,160,242,.4);box-shadow:0 14px 30px -12px rgba(0,0,0,.55), 0 0 0 1px var(--blue-glow);}
.tile-icon{
  width:40px;height:40px;border-radius:var(--radius);
  background:var(--surface-2);color:var(--blue-400);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:20px;
}
.tile h3{font-size:1.05rem;margin-bottom:6px;}
.tile p{color:var(--ink-dim);font-size:.86rem;margin:0;}
.section-light .tile{background:var(--white);border-color:var(--line);}
.section-light .tile-icon{background:var(--grey-100);color:var(--navy-600);}
.section-light .tile p{color:var(--grey-700);}

/* legacy alias kept for card-based blocks */
.card{background:var(--surface-1);border:1px solid var(--line-dark);padding:32px 28px;border-radius:var(--radius-lg);}
.card h3{font-size:1.16rem;margin-bottom:12px;}
.card p{color:var(--ink-dim);font-size:.96rem;margin:0;}
.section-light .card{background:var(--white);border-color:var(--line);}
.section-light .card p{color:var(--grey-700);}

.list-check{list-style:none;margin:0;padding:0;}
.list-check li{position:relative;padding-left:26px;margin-bottom:14px;color:var(--ink-body);font-size:.98rem;}
.section-light .list-check li{color:var(--grey-700);}
.list-check li::before{
  content:"";position:absolute;left:0;top:9px;
  width:8px;height:8px;border:1.5px solid var(--blue-400);border-radius:1px;
  transform:rotate(45deg);
}

.divider{height:1px;background:var(--line-dark);border:none;margin:0;}
.section-light .divider{background:var(--line);}

/* ---------- framework badges ---------- */
.fw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:860px){.fw-grid{grid-template-columns:repeat(2,1fr);}}
.fw-badge{
  background:var(--surface-1);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:14px 16px;cursor:pointer;text-align:left;width:100%;
  color:var(--ink-hi);font-family:inherit;font-size:.92rem;font-weight:600;
  display:flex;align-items:center;gap:10px;
  transition:border-color .2s ease, background .2s ease;
}
.fw-badge:hover,.fw-badge[aria-expanded="true"]{border-color:var(--blue-400);background:var(--surface-2);}
.fw-badge .icon{width:18px;height:18px;color:var(--blue-400);flex-shrink:0;}
.fw-desc{
  grid-column:1/-1;overflow:hidden;max-height:0;
  transition:max-height .3s var(--ease);
  color:var(--ink-dim);font-size:.9rem;
}
.fw-desc.open{max-height:200px;}
.fw-desc p{padding:10px 2px 4px;margin:0;}

/* framework full-description cards (frameworks page) */
.fw-detail{padding:22px 0;border-bottom:1px solid var(--line-dark);}
.section-light .fw-detail{border-color:var(--line);}
.fw-detail:first-child{padding-top:0;}
.fw-detail h3{font-size:1.06rem;margin-bottom:6px;display:flex;align-items:center;gap:10px;}
.fw-detail h3 .icon{width:19px;height:19px;color:var(--blue-500);}
.fw-detail p{font-size:.94rem;margin:0;}

/* ---------- flip cards ---------- */
.flip-card{perspective:1200px;height:220px;}
.flip-inner{
  position:relative;width:100%;height:100%;
  transition:transform .6s var(--ease);
  transform-style:preserve-3d;
}
.flip-card:hover .flip-inner,
.flip-card:focus-within .flip-inner{transform:rotateY(180deg);}
.flip-face{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:var(--radius-lg);border:1px solid var(--line-dark);
  padding:24px;display:flex;flex-direction:column;
}
.flip-front{background:var(--surface-1);justify-content:space-between;}
.flip-back{background:var(--surface-2);transform:rotateY(180deg);justify-content:center;}
.flip-front .tile-icon{margin-bottom:auto;}
.flip-front h3{font-size:1.08rem;margin-bottom:4px;}
.flip-front .who{color:var(--ink-dim);font-size:.86rem;margin:0;}
.flip-back .pair{margin-bottom:12px;}
.flip-back .pair:last-child{margin-bottom:0;}
.flip-back .pair span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-400);margin-bottom:3px;}
.flip-back .pair p{margin:0;font-size:.88rem;color:var(--ink-hi);}
.flip-hint{font-size:.72rem;color:var(--ink-dim);display:flex;align-items:center;gap:5px;}
.flip-card{cursor:default;}
.flip-card:focus-visible{outline:2px solid var(--blue-400);outline-offset:4px;}

/* ---------- accordion (service detail + faq) ---------- */
.accordion-item{border-bottom:1px solid var(--line-dark);}
.section-light .accordion-item{border-color:var(--line);}
.accordion-item summary{
  cursor:pointer;padding:22px 0;font-family:"Newsreader",serif;font-size:1.08rem;
  color:var(--ink-hi);list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item summary::after{
  content:"+";font-family:"Inter",sans-serif;font-size:1.3rem;color:var(--blue-400);flex-shrink:0;
}
.accordion-item[open] summary::after{content:"–";}
.accordion-item .a{padding:0 0 24px;color:var(--ink-body);font-size:.96rem;max-width:70ch;}
.section-light .accordion-item .a{color:var(--grey-700);}
.accordion-item .meta{display:flex;gap:16px;margin-top:14px;flex-wrap:wrap;}
.accordion-item .meta div{
  background:var(--surface-2);padding:10px 14px;border-radius:var(--radius);
  font-size:.84rem;color:var(--ink-body);border-left:2px solid var(--blue-500);flex:1;min-width:200px;
}
.accordion-item .meta strong{display:block;color:var(--ink-hi);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}

/* faq category chips */
.chip-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
.chip{
  border:1px solid var(--line-dark);background:transparent;color:var(--ink-dim);
  padding:8px 16px;border-radius:20px;font-size:.82rem;font-weight:600;cursor:pointer;
  transition:all .15s ease, transform .1s ease;
}
.chip:active{transform:scale(.94);}
.section-light .chip{border-color:var(--line);color:var(--grey-700);}
.chip:hover{border-color:var(--blue-400);color:var(--ink-hi);}
.chip.active{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}
.faq-item[data-cat]{display:block;}
.faq-item.hide{display:none;}

/* ---------- old faq alias ---------- */
.faq-item{border-bottom:1px solid var(--line-dark);}
.section-light .faq-item{border-color:var(--line);}
.faq-item summary{
  cursor:pointer;padding:22px 0;font-family:"Newsreader",serif;font-size:1.08rem;
  color:var(--ink-hi);list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+";font-family:"Inter",sans-serif;font-size:1.3rem;color:var(--blue-400);flex-shrink:0;}
.faq-item[open] summary::after{content:"–";}
.faq-item .a{padding:0 0 24px;color:var(--ink-body);font-size:.96rem;max-width:70ch;}

/* ---------- comparison table ---------- */
table.compare{width:100%;border-collapse:collapse;margin:12px 0 8px;}
table.compare th,table.compare td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line-dark);font-size:.92rem;}
table.compare th{font-family:"Newsreader",serif;font-weight:500;color:var(--ink-hi);font-size:1rem;background:var(--surface-1);}
table.compare td:first-child,table.compare th:first-child{font-weight:600;color:var(--ink-hi);}
table.compare tbody tr{cursor:pointer;transition:background .15s ease;}
table.compare tbody tr:hover,table.compare tbody tr.active{background:var(--surface-2);}
.section-light table.compare th,.section-light table.compare td{border-color:var(--line);color:var(--grey-700);}
.section-light table.compare th{background:var(--grey-100);color:var(--navy-950);}
.section-light table.compare td:first-child,.section-light table.compare th:first-child{color:var(--navy-950);}

/* ---------- the gap diagram ---------- */
.gap-diagram{display:flex;align-items:center;justify-content:center;gap:0;max-width:640px;margin:0 auto;padding:40px 0;}
.gap-node{display:flex;flex-direction:column;align-items:center;gap:12px;width:170px;text-align:center;}
.gap-node .tile-icon{width:56px;height:56px;margin:0;}
.gap-node .icon{width:26px;height:26px;}
.gap-node h4{margin:0;font-size:1.05rem;font-family:"Newsreader",serif;color:var(--ink-hi);font-weight:500;}
.gap-node span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim);}
.gap-link{flex:1;display:flex;align-items:center;justify-content:center;position:relative;height:60px;min-width:80px;}
.gap-link svg{width:100%;height:56px;color:var(--blue-400);}
.gap-link-ghost{opacity:.18;}
.gap-link-draw{
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation:draw-infinity 3.5s ease-in-out infinite;
  filter:drop-shadow(0 0 5px var(--blue-glow));
}
@keyframes draw-infinity{
  0%{stroke-dashoffset:400;opacity:.2;}
  10%{opacity:1;}
  55%{stroke-dashoffset:0;opacity:1;}
  75%{stroke-dashoffset:0;opacity:1;}
  100%{stroke-dashoffset:-400;opacity:.2;}
}
.gap-caption{text-align:center;color:var(--ink-dim);font-size:.95rem;max-width:52ch;margin:0 auto;}

/* ---------- rotating question carousel ---------- */
.carousel{max-width:640px;margin:0 auto;}
.carousel-track{position:relative;min-height:150px;}
.carousel-card{
  display:none;background:var(--surface-1);border:1px solid var(--line-dark);border-radius:var(--radius-lg);
  padding:32px 34px;
}
.carousel-card.active{display:block;animation:fadein .4s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.carousel-card .qnum{color:var(--blue-400);font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px;display:block;}
.carousel-card h3{font-size:1.3rem;margin:0;}
.carousel-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;}
.carousel-arrow{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line-dark);background:transparent;
  color:var(--ink-hi);cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .15s ease;
}
.carousel-arrow:hover{border-color:var(--blue-400);}
.carousel-dots{display:flex;gap:8px;}
.carousel-dots button{width:7px;height:7px;border-radius:50%;background:var(--line-dark);border:none;cursor:pointer;padding:0;}
.carousel-dots button.active{background:var(--blue-400);}

/* ---------- venn / overlap diagram ---------- */
.venn{position:relative;width:100%;max-width:420px;height:420px;margin:0 auto;}
.venn-circle{
  position:absolute;width:60%;height:60%;border-radius:50%;
  background:rgba(127,160,242,.12);border:1px solid rgba(127,160,242,.28);
  display:flex;align-items:flex-start;justify-content:center;padding-top:20px;
  font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue-400);
  mix-blend-mode:normal;
}
.venn-circle:nth-child(1){top:0;left:20%;}
.venn-circle:nth-child(2){top:0;right:20%;}
.venn-circle:nth-child(3){bottom:0;left:20%;}
.venn-circle:nth-child(4){bottom:0;right:20%;}
.venn-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:150px;height:150px;border-radius:var(--radius-lg);
  background:var(--navy-950);border:1px solid var(--blue-400);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:12px;cursor:default;z-index:2;
  box-shadow:0 0 0 0 var(--blue-glow);transition:box-shadow .3s ease;
}
.venn-core:hover{box-shadow:0 0 0 10px var(--blue-glow);}
.venn-core .icon{width:22px;height:22px;color:var(--blue-400);}
.venn-core p{margin:0;font-size:.86rem;font-weight:600;color:var(--ink-hi);}
.venn-hint{text-align:center;color:var(--ink-dim);font-size:.85rem;margin-top:18px;}

/* ---------- obligations stepper ---------- */
.stepper{display:flex;gap:0;position:relative;}
.stepper::before{
  content:"";position:absolute;top:22px;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,var(--blue-400),var(--blue-400) 50%,var(--line-dark) 50%);
  background-size:200% 100%;background-position:100% 0;
}
.step{flex:1;text-align:center;padding:0 8px;position:relative;}
.step-icon{
  width:44px;height:44px;border-radius:50%;background:var(--surface-1);border:1px solid var(--blue-400);
  color:var(--blue-400);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;
  position:relative;z-index:1;
}
.step h4{font-size:.94rem;margin:0 0 6px;font-family:"Newsreader",serif;color:var(--ink-hi);}
.step p{font-size:.82rem;color:var(--ink-dim);margin:0;}
@media(max-width:800px){
  .stepper{flex-direction:column;gap:22px;text-align:left;}
  .stepper::before{display:none;}
  .step{display:flex;gap:16px;text-align:left;padding:0;}
  .step-icon{margin:0;flex-shrink:0;}
}

/* ---------- NIS2 scope-check wizard ---------- */
.wizard{background:var(--surface-1);border:1px solid var(--line-dark);border-radius:var(--radius-lg);padding:36px;max-width:680px;margin:0 auto;}
.wizard-progress{display:flex;gap:6px;margin-bottom:26px;}
.wizard-progress span{height:3px;flex:1;background:var(--line-dark);border-radius:2px;overflow:hidden;}
.wizard-progress span::after{content:"";display:block;height:100%;width:0;background:var(--blue-400);transition:width .3s ease;}
.wizard-progress span.done::after{width:100%;}
.wizard-step{display:none;}
.wizard-step.active{display:block;animation:slide-in-right .45s var(--ease);}
.wizard-step.active.back{animation:slide-in-left .45s var(--ease);}
@keyframes slide-in-right{from{opacity:0;transform:translateX(28px);}to{opacity:1;transform:translateX(0);}}
@keyframes slide-in-left{from{opacity:0;transform:translateX(-28px);}to{opacity:1;transform:translateX(0);}}
.wizard-step h3{font-size:1.2rem;margin-bottom:6px;}
.wizard-step .hint{color:var(--ink-dim);font-size:.88rem;margin-bottom:20px;}
.wizard-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:560px){.wizard-options{grid-template-columns:1fr;}}
.wizard-options button{
  all:unset;box-sizing:border-box;
  display:flex;align-items:center;gap:12px;
  background:var(--surface-2);border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:16px;cursor:pointer;color:var(--ink-hi);font-size:.92rem;font-weight:600;
  transition:border-color .15s ease,background .15s ease,transform .1s ease;
}
.wizard-options button:hover,.wizard-options button:focus-visible{border-color:var(--blue-400);}
.wizard-options button:active{transform:scale(.97);}
.wizard-options button.picked{border-color:var(--blue-400);background:rgba(127,160,242,.12);}
.wizard-options .icon{width:20px;height:20px;color:var(--blue-400);flex-shrink:0;}
.wizard-result{display:none;text-align:center;}
.wizard-result.active{display:block;animation:slide-in-right .45s var(--ease);}
.wizard-result .badge{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--blue-400);
  color:var(--blue-400);padding:8px 16px;border-radius:20px;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px;
}
.wizard-result h3{font-size:1.3rem;max-width:32ch;margin:0 auto 10px;}
.wizard-result p{color:var(--ink-body);max-width:48ch;margin:0 auto 22px;font-size:.94rem;}
.wizard-back{background:none;border:none;color:var(--ink-dim);font-size:.82rem;cursor:pointer;margin-top:18px;display:inline-flex;align-items:center;gap:6px;}
.wizard-back:hover{color:var(--ink-hi);}

/* ---------- countdown / in-force strip ---------- */
.force-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(184,67,58,.12);border:1px solid var(--red-700);color:#e79790;
  padding:8px 16px;border-radius:20px;font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:22px;
}
.force-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--red-600);animation:pulse-dot 2.2s ease-in-out infinite;}

/* ---------- chip list (compact, no paragraph) ---------- */
.pill-list{display:flex;flex-wrap:wrap;gap:10px;}
.pill-list span{
  background:var(--surface-2);border:1px solid var(--line-dark);color:var(--ink-body);
  padding:8px 14px;border-radius:20px;font-size:.84rem;font-weight:600;
}
.section-light .pill-list span{background:var(--grey-100);border-color:var(--line);color:var(--navy-950);}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}

/* ---------- frameworks strip (home) ---------- */
.frameworks-strip{background:var(--navy-900);color:var(--white);padding:44px 0;}
.frameworks-strip .wrap{display:flex;flex-direction:column;gap:18px;}
.frameworks-strip .fw-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}

/* ---------- service teaser flip grid ---------- */
.flip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media(max-width:980px){.flip-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.flip-grid{grid-template-columns:1fr;}}

/* ---------- cta band ---------- */
.cta-band{background:var(--navy-950);color:var(--white);padding:64px 0;text-align:left;border-top:1px solid var(--line-dark);}
.cta-band .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.cta-band h2{color:var(--white);margin-bottom:6px;font-size:1.7rem;}
.cta-band p{color:var(--ink-body);margin:0;}

/* ---------- form ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px;}
.form-grid .full{grid-column:1/-1;}
@media(max-width:700px){.form-grid{grid-template-columns:1fr;}}
label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-hi);margin-bottom:6px;}
input,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-dark);border-radius:var(--radius);
  font-family:inherit;font-size:.95rem;background:var(--surface-1);color:var(--ink-hi);
}
input::placeholder,textarea::placeholder{color:var(--ink-dim);}
input:focus,textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px var(--blue-glow);}
.section-light input,.section-light textarea{background:var(--white);border-color:var(--grey-300);}
textarea{resize:vertical;min-height:120px;}

.contact-info{color:var(--ink-body);}
.contact-info .row{display:flex;gap:12px;margin-bottom:18px;font-size:.96rem;align-items:flex-start;}
.contact-info .row .icon{width:18px;height:18px;color:var(--blue-400);flex-shrink:0;margin-top:3px;}
.contact-info .row span{display:block;color:var(--ink-dim);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px;}

/* ---------- footer ---------- */
footer{background:var(--navy-950);color:var(--ink-dim);padding:56px 0 30px;border-top:1px solid var(--line-dark);}
footer .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;}
@media(max-width:800px){footer .wrap{grid-template-columns:1fr 1fr;}}
footer h4{color:var(--grey-300);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;font-family:"Inter",sans-serif;font-weight:600;}
footer .logo{margin-bottom:14px;}
footer a{display:block;color:var(--ink-dim);font-size:.9rem;margin-bottom:10px;}
footer a:hover{color:var(--white);}
footer .bottom{
  max-width:var(--max);margin:40px auto 0;padding:20px 28px 0;
  border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.8rem;color:var(--ink-dim);
}

/* ---------- responsive nav ---------- */
@media(max-width:900px){
  .nav-links{
    position:fixed;top:76px;left:0;right:0;bottom:0;
    background:var(--navy-950);
    flex-direction:column;align-items:flex-start;
    padding:28px;gap:22px;
    transform:translateX(100%);transition:transform .2s ease;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:block;}
  .grid-2{gap:28px;}
  .gap-diagram{flex-direction:column;gap:20px;}
  .gap-link{transform:rotate(90deg);height:40px;}
  .venn{transform:scale(.82);margin:-40px auto;}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
  .reveal{opacity:1;transform:none;}
}

/* ---------- what-we-do: lead block ---------- */
.lead-block{max-width:940px;}
.lead-block .lead-rule{width:46px;height:2px;background:var(--red-600);margin-bottom:26px;}
.lead-block .lead-first{
  font-family:"Newsreader",serif;font-size:clamp(1.2rem,1.9vw,1.5rem);
  line-height:1.5;color:var(--ink-hi);margin-bottom:26px;max-width:34ch;
}
.lead-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
.lead-cols p{font-size:1rem;line-height:1.75;color:var(--ink-body);margin:0;}
@media(max-width:860px){.lead-cols{grid-template-columns:1fr;gap:20px;}}

/* ---------- gap diagram: brighter ---------- */
.gap-section{background:
  radial-gradient(760px 420px at 50% 50%, rgba(54,96,224,.13), rgba(54,96,224,0) 70%),
  var(--surface-1);}
.gap-node .tile-icon{
  width:78px;height:78px;border-radius:50%;
  background:linear-gradient(150deg,#1d2d57,#101a33);
  border:1px solid rgba(127,160,242,.55);
  color:#b3c8ff;
  box-shadow:0 0 0 7px rgba(54,96,224,.09), 0 0 30px rgba(54,96,224,.4);
}
.gap-node .icon{width:31px;height:31px;}
.gap-node h4{color:#fff;font-size:1.18rem;}
.gap-node span{color:var(--blue-400);}
.gap-link svg{color:#7ea3ff;}
.gap-caption{color:var(--ink-body);font-size:1.02rem;}

/* ---------- orbit: what you get from us ---------- */
.orbit-wrap{max-width:880px;margin:0 auto;}
.orbit{position:relative;width:100%;aspect-ratio:1/1;}
.orbit-ring{position:absolute;inset:13%;border:1px solid rgba(127,160,242,.20);border-radius:50%;
  box-shadow:inset 0 0 60px rgba(54,96,224,.10);}
.orbit-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:33%;pointer-events:none;}
.orbit-core img{width:100%;filter:drop-shadow(0 14px 34px rgba(0,0,0,.65));}
.orbit-node{position:absolute;transform:translate(-50%,-50%);width:158px;}
.orbit-node button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:11px;width:100%;text-align:center;}
.orbit-node .tile-icon{margin:0;width:54px;height:54px;border-radius:12px;
  background:var(--surface-2);border:1px solid var(--line-dark);color:var(--blue-400);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);}
.orbit-node h3{font-size:.95rem;margin:0;font-family:"Newsreader",serif;font-weight:500;
  color:var(--ink-dim);transition:color .2s ease;}
.orbit-node button:hover .tile-icon,.orbit-node.active .tile-icon{
  border-color:var(--blue-400);box-shadow:0 0 24px rgba(54,96,224,.5);transform:translateY(-3px);}
.orbit-node button:hover h3,.orbit-node.active h3{color:#fff;}
.orbit-node button:focus-visible .tile-icon{outline:2px solid var(--blue-400);outline-offset:3px;}
.orbit-node.p1{left:23%;top:23%}
.orbit-node.p2{left:77%;top:23%}
.orbit-node.p3{left:88%;top:50%}
.orbit-node.p4{left:77%;top:77%}
.orbit-node.p5{left:23%;top:77%}
.orbit-node.p6{left:12%;top:50%}
.orbit-panel{max-width:660px;margin:8px auto 0;text-align:center;min-height:104px;}
.orbit-panel .item{display:none;}
.orbit-panel .item.active{display:block;animation:fadein .35s ease;}
.orbit-panel h4{font-size:1.18rem;margin-bottom:10px;color:var(--ink-hi);}
.orbit-panel p{color:var(--ink-body);margin:0;font-size:1rem;line-height:1.7;}
@media(max-width:900px){
  .orbit{aspect-ratio:auto;}
  .orbit-ring,.orbit-core{display:none;}
  .orbit-node{position:static;transform:none;width:100%;border-bottom:1px solid var(--line-dark);}
  .orbit-node button{flex-direction:row;justify-content:flex-start;gap:15px;padding:15px 0;text-align:left;}
  .orbit-node .tile-icon{width:44px;height:44px;flex-shrink:0;}
  .orbit-panel{text-align:left;min-height:0;margin-top:22px;}
}

/* ---------- storyline (interactive 3-step intro) ---------- */
.story{max-width:1000px;}
.story-nav{display:flex;gap:0;position:relative;margin-bottom:34px;}
.story-nav::before{content:"";position:absolute;top:26px;left:8%;right:8%;height:1px;background:var(--line-dark);}
.story-step{
  all:unset;cursor:pointer;flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;
  position:relative;z-index:1;text-align:center;padding:0 10px;
}
.story-step .n{
  width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-1);border:1px solid var(--line-dark);
  font-family:"Inter",sans-serif;font-size:.82rem;font-weight:700;color:var(--ink-dim);
  transition:all .3s var(--ease);
}
.story-step .t{
  font-family:"Newsreader",serif;font-size:1rem;color:var(--ink-dim);transition:color .2s ease;
}
.story-step:hover .n,.story-step.active .n{
  border-color:var(--blue-400);color:#fff;
  background:linear-gradient(150deg,#1d2d57,#101a33);
  box-shadow:0 0 24px rgba(54,96,224,.45);
}
.story-step.active .n{transform:scale(1.08);}
.story-step:hover .t,.story-step.active .t{color:#fff;}
.story-step:focus-visible .n{outline:2px solid var(--blue-400);outline-offset:3px;}
.story-panel{max-width:760px;margin:0 auto;text-align:center;min-height:132px;}
.story-panel .item{display:none;}
.story-panel .item.active{display:block;animation:fadein .4s ease;}
.story-panel p{
  font-family:"Newsreader",serif;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.6;
  color:var(--ink-hi);margin:0;
}
@media(max-width:760px){
  .story-nav{flex-direction:column;gap:14px;}
  .story-nav::before{display:none;}
  .story-step{flex-direction:row;justify-content:flex-start;gap:14px;}
  .story-step .n{width:42px;height:42px;flex-shrink:0;}
  .story-panel{text-align:left;min-height:0;}
}

/* ---------- orbit: two-column (diagram left, panel right) ---------- */
.orbit-wrap{
  display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center;
  max-width:1120px;margin:0 auto;
}
.orbit-node{width:150px;}
.orbit-node h3{font-size:.9rem;}
.orbit-panel{
  text-align:left;margin:0;max-width:none;min-height:0;
  border-left:2px solid var(--blue-500);padding-left:26px;
}
.orbit-panel h4{font-size:1.35rem;}
.orbit-panel p{font-size:1.02rem;}
.orbit-hint{color:var(--ink-dim);font-size:.86rem;margin:16px 0 0;}
@media(max-width:1000px){
  .orbit-wrap{grid-template-columns:1fr;gap:30px;}
  .orbit-panel{border-left:none;padding-left:0;border-top:2px solid var(--blue-500);padding-top:22px;}
}

/* ---------- photo hero (services) ---------- */
.photo-hero{
  position:relative;overflow:hidden;
  padding:90px 0 110px;display:flex;align-items:center;
  background:linear-gradient(90deg,var(--navy-950) 0%,rgba(8,15,28,.9) 16%,rgba(8,15,28,.18) 52%,rgba(8,15,28,.30) 100%);
}
.photo-hero .wrap{position:relative;z-index:2;width:100%;}
.photo-hero .hero-copy{max-width:520px;}
.photo-hero h1{font-size:clamp(2.3rem,4.3vw,3.5rem);line-height:1.08;margin:0;}
.photo-hero h1 .accent{color:var(--blue-500);}
.hero-rule{width:58px;height:3px;background:var(--blue-500);margin:26px 0 24px;border-radius:2px;}
.photo-hero .sub{font-size:1.06rem;color:var(--ink-body);max-width:36ch;margin:0;}
.float-card{
  position:absolute;right:0;bottom:-46px;z-index:3;max-width:392px;
  display:flex;gap:18px;align-items:flex-start;
  background:rgba(13,20,38,.93);border:1px solid rgba(127,160,242,.22);
  border-radius:10px;padding:22px 26px;
  box-shadow:0 22px 50px -18px rgba(0,0,0,.8);
}
.float-card .ico{
  width:50px;height:50px;border-radius:50%;flex-shrink:0;
  background:var(--blue-600);color:#fff;display:flex;align-items:center;justify-content:center;
}
.float-card h4{font-size:1.05rem;margin:0 0 10px;line-height:1.35;}
.float-card .r{width:34px;height:2px;background:var(--blue-500);margin-bottom:12px;}
.float-card p{margin:0;font-size:.88rem;color:var(--ink-dim);line-height:1.55;}
@media(max-width:1080px){
  .photo-hero{background:linear-gradient(90deg,rgba(8,15,28,.94) 0%,rgba(8,15,28,.75) 100%);}
  .float-card{position:static;margin-top:34px;max-width:none;}
}

/* ---------- service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:1080px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.svc-grid{grid-template-columns:1fr;}}
.svc-card{
  background:var(--surface-1);border:1px solid var(--line-dark);border-radius:10px;
  padding:30px 26px;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.svc-card:hover{transform:translateY(-5px);border-color:rgba(127,160,242,.42);
  box-shadow:0 18px 38px -16px rgba(0,0,0,.7),0 0 0 1px var(--blue-glow);}
.svc-ico{
  width:58px;height:58px;border-radius:50%;margin-bottom:24px;
  background:rgba(54,96,224,.13);border:1px solid rgba(127,160,242,.32);
  color:var(--blue-400);display:flex;align-items:center;justify-content:center;
}
.svc-ico .icon{width:26px;height:26px;}
.svc-card h3{font-size:1.14rem;margin:0 0 14px;}
.svc-rule{width:34px;height:2px;background:var(--blue-500);margin-bottom:16px;border-radius:2px;}
.svc-card p{font-size:.92rem;color:var(--ink-dim);line-height:1.6;margin:0 0 26px;flex:1;}
.svc-more{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.svc-more .lbl{color:var(--blue-400);font-size:.9rem;font-weight:600;}
.svc-arrow{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(127,160,242,.4);color:var(--blue-400);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.svc-card:hover .svc-arrow{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}
.svc-card:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;}

/* ---------- wide CTA banner ---------- */
.cta-banner{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--surface-1);border:1px solid var(--line-dark);
  border-radius:10px;padding:26px 32px;
}
.cta-banner .ico{
  width:52px;height:52px;border-radius:50%;flex-shrink:0;
  background:var(--blue-600);color:#fff;display:flex;align-items:center;justify-content:center;
}
.cta-banner .txt{flex:1;min-width:250px;}
.cta-banner h3{margin:0 0 5px;font-size:1.25rem;}
.cta-banner p{margin:0;color:var(--ink-dim);font-size:.95rem;}
.cta-banner .go{display:inline-flex;align-items:center;gap:10px;color:var(--blue-400);font-weight:600;font-size:.95rem;}
.cta-banner .go:hover{color:#fff;}

/* meta label fix (was running into the value) */
.meta strong{display:block;color:var(--ink-hi);font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:3px;}

/* anchored detail blocks */
.svc-detail{scroll-margin-top:90px;padding:34px 0;border-bottom:1px solid var(--line-dark);}
.svc-detail:last-child{border-bottom:none;}
.svc-detail h3{font-size:1.3rem;margin-bottom:14px;}
.svc-detail p{color:var(--ink-body);font-size:.98rem;max-width:74ch;}

/* ===== services hero v2: taller, cards overlap upward ===== */
.photo-hero{
  padding:104px 0 210px;min-height:660px;
  background:
    linear-gradient(90deg,var(--navy-950) 0%,rgba(8,15,28,.7) 14%,rgba(8,15,28,.15) 48%,rgba(8,15,28,.1) 100%),
    linear-gradient(180deg,transparent 55%,rgba(8,15,28,.72) 100%);
}
.photo-hero h1{font-size:clamp(2.6rem,4.8vw,4rem);}
.photo-hero .sub{font-size:1.12rem;}
.float-card{bottom:120px;}

/* pull the card row up over the photo */
.svc-section{position:relative;z-index:3;margin-top:-140px;padding-top:0;}
.svc-card{padding:34px 30px;}
.svc-ico{width:66px;height:66px;margin-bottom:26px;}
.svc-ico .icon{width:29px;height:29px;}
.svc-card h3{font-size:1.22rem;}
.svc-card p{font-size:.95rem;}
@media(max-width:1080px){
  .photo-hero{padding:80px 0 90px;min-height:0;}
  .svc-section{margin-top:0;padding-top:54px;}
  .float-card{bottom:auto;}
}

/* nav polish: active underline */
.nav-links a.active{position:relative;}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-21px;height:2px;background:var(--blue-500);
}
.nav-cta .icon{width:15px;height:15px;}
.nav-cta{display:inline-flex;align-items:center;gap:8px;}

/* ===== services: detail blocks hidden until "Learn more" ===== */
.svc-details-section{display:none;padding:0;scroll-margin-top:88px;}
.svc-details-section.open{display:block;padding:56px 0 64px;}
.svc-detail{display:none;border-bottom:none;padding:0;}
.svc-detail.open{display:block;animation:fadein .35s ease;}
.svc-close{
  all:unset;cursor:pointer;margin-top:26px;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--ink-dim);font-size:.86rem;font-weight:600;
  border:1px solid var(--line-dark);border-radius:var(--radius);padding:9px 18px;
  transition:color .15s ease,border-color .15s ease;
}
.svc-close:hover{color:#fff;border-color:var(--blue-400);}
.svc-close:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px;}
.svc-card.is-open{border-color:var(--blue-400);box-shadow:0 0 0 1px var(--blue-glow);}
.svc-card.is-open .svc-arrow{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}

/* ===== frameworks page ===== */
.fw-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
@media(max-width:1000px){.fw-tiles{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.fw-tiles{grid-template-columns:1fr;}}
.fw-tile{
  all:unset;box-sizing:border-box;cursor:pointer;
  background:var(--surface-1);border:1px solid var(--line-dark);border-radius:10px;
  padding:24px 22px;display:flex;flex-direction:column;gap:14px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.fw-tile .ico{
  width:50px;height:50px;border-radius:50%;
  background:rgba(54,96,224,.13);border:1px solid rgba(127,160,242,.32);
  color:var(--blue-400);display:flex;align-items:center;justify-content:center;
}
.fw-tile .ico .icon{width:23px;height:23px;}
.fw-tile h3{font-size:1.02rem;margin:0;font-family:"Newsreader",serif;color:var(--ink-hi);}
.fw-tile .tag{font-size:.78rem;color:var(--ink-dim);letter-spacing:.02em;}
.fw-tile:hover,.fw-tile.active{
  transform:translateY(-4px);border-color:rgba(127,160,242,.5);
  box-shadow:0 16px 34px -16px rgba(0,0,0,.7),0 0 0 1px var(--blue-glow);
}
.fw-tile.active .ico{background:var(--blue-600);border-color:var(--blue-600);color:#fff;}
.fw-tile:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;}
.fw-panel{margin-top:30px;border-left:2px solid var(--blue-500);padding-left:26px;min-height:120px;}
.fw-panel .item{display:none;}
.fw-panel .item.active{display:block;animation:fadein .35s ease;}
.fw-panel h3{font-size:1.3rem;margin-bottom:10px;}
.fw-panel p{color:var(--ink-body);font-size:1rem;line-height:1.7;margin:0;max-width:80ch;}
@media(max-width:700px){.fw-panel{border-left:none;padding-left:0;border-top:2px solid var(--blue-500);padding-top:22px;}}

/* unified control base diagram: hub-and-spoke */
.map-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
@media(max-width:960px){.map-wrap{grid-template-columns:1fr;gap:34px;}}
.map2{position:relative;width:100%;max-width:380px;aspect-ratio:1/1;margin:0 auto;}
.map2-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.map2-lines line{stroke:rgba(127,160,242,.35);stroke-width:.6;}
.map2-hub{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:136px;height:136px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(54,96,224,.22), var(--navy-950) 72%);
  border:1px solid var(--blue-400);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  text-align:center;padding:14px;box-shadow:0 0 40px rgba(54,96,224,.4);
}
.map2-hub .icon{width:24px;height:24px;color:var(--blue-400);}
.map2-hub p{margin:0;font-size:.88rem;font-weight:600;color:var(--ink-hi);line-height:1.3;}
.map2-node{
  position:absolute;transform:translate(-50%,-50%);z-index:1;
  padding:9px 16px;border-radius:20px;white-space:nowrap;
  background:var(--surface-1);border:1px solid var(--line-dark);
  font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--ink-hi);
}
.map2-node.n1{top:8%;left:50%;}
.map2-node.n2{top:50%;left:92%;}
.map2-node.n3{top:92%;left:50%;}
.map2-node.n4{top:50%;left:8%;}
@media(max-width:420px){
  .map2-node{font-size:.68rem;padding:7px 11px;}
  .map2-hub{width:112px;height:112px;}
}

/* ===== frameworks hero: split with isometric graphic ===== */
.split-hero{
  position:relative;overflow:hidden;padding:86px 0 96px;
  background:
    radial-gradient(900px 520px at 74% 46%, rgba(42,80,190,.20), rgba(42,80,190,0) 68%),
    var(--navy-950);
}
.split-hero .wrap{display:grid;grid-template-columns:1fr 1.06fr;gap:52px;align-items:center;}
.split-hero h1{font-size:clamp(2.3rem,4.2vw,3.5rem);line-height:1.08;margin:0;}
.split-hero h1 .accent{color:var(--blue-500);}
.split-hero .sub{color:var(--ink-body);font-size:1.05rem;max-width:42ch;margin:24px 0 32px;}
.split-hero-art{position:relative;}
.split-hero-art img{
  width:100%;height:auto;display:block;
  -webkit-mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, #000 55%, transparent 92%);
  mask-image:radial-gradient(ellipse 82% 82% at 50% 50%, #000 55%, transparent 92%);
}
@media(max-width:900px){
  .split-hero .wrap{grid-template-columns:1fr;gap:34px;}
  .split-hero-art{order:-1;max-width:520px;margin:0 auto;}
}

/* ===== coloured framework cards ===== */
.fw-tiles{grid-template-columns:repeat(4,1fr);gap:20px;}
.fw-tile{
  position:relative;overflow:hidden;
  background:var(--surface-1);border:1px solid var(--line-dark);border-radius:12px;
  padding:26px 24px 76px;gap:12px;
}
.fw-tile::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:radial-gradient(ellipse 130% 100% at 50% 118%, var(--accent) 0%, transparent 62%);
  opacity:.30;transition:opacity .3s ease;
}
.fw-tile:hover::after,.fw-tile.active::after{opacity:.62;}
.fw-tile .ico{
  width:50px;height:50px;border-radius:12px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color:var(--accent);
}
.fw-tile h3{font-size:1.06rem;}
.fw-tile:hover,.fw-tile.active{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.75), 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.fw-tile.active .ico{background:var(--accent);border-color:var(--accent);color:#08111f;}
.fw-go{
  position:absolute;left:24px;bottom:22px;z-index:1;
  width:38px;height:38px;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease;
}
.fw-tile:hover .fw-go,.fw-tile.active .fw-go{background:var(--accent);color:#08111f;}
.fw-panel{border-left-color:var(--blue-500);}

/* ===== frameworks hero art: blend the glow, kill the box ===== */
.split-hero{
  padding:96px 0 110px;
  background:
    radial-gradient(1100px 620px at 50% 40%, rgba(30,58,138,.16), rgba(30,58,138,0) 70%),
    var(--navy-950);
}
.split-hero-art{transform:scale(1.14);transform-origin:center;}
.split-hero-art img{
  mix-blend-mode:screen;          /* black background disappears, only the glow shows */
  -webkit-mask-image:none;
  mask-image:none;
  filter:saturate(1.08) brightness(1.06);
}
@media(max-width:900px){.split-hero-art{transform:none;}}

/* fix: parent transform was creating a stacking context and killing the blend */
.split-hero-art{transform:none;isolation:auto;}
.split-hero-art img{
  mix-blend-mode:screen;
  filter:none;
  width:116%;max-width:none;margin-left:-8%;
}
@media(max-width:900px){.split-hero-art img{width:100%;margin-left:0;}}

/* larger, feathered artwork — no mask/filter/transform so the blend stays live */
.split-hero{padding:70px 0 90px;}
.split-hero .wrap{grid-template-columns:1fr 1.22fr;gap:30px;}
.split-hero-art img{width:132%;margin-left:-16%;}
@media(max-width:900px){
  .split-hero .wrap{grid-template-columns:1fr;}
  .split-hero-art img{width:112%;margin-left:-6%;}
}

/* ===== approach: stacked card deck ===== */
.deck-title{margin-bottom:22px;}
.deck{max-width:540px;margin:0 auto;}
.deck-stage{position:relative;min-height:330px;perspective:1400px;}
.deck-card{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding:34px 32px;border-radius:16px;
  background:
    radial-gradient(760px 300px at 12% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%),
    linear-gradient(158deg, #1b1f27 0%, #14171d 62%, #101318 100%);
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow:
    0 28px 60px -24px rgba(0,0,0,.85),
    inset 0 1px 0 color-mix(in srgb, var(--accent) 22%, transparent);
  cursor:pointer;
  transform-origin:50% 100%;
  transition:transform .55s var(--ease), opacity .45s ease, box-shadow .4s ease;
  will-change:transform;
}
.deck-card::after{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:18px 18px 0 0;
  background:linear-gradient(90deg, var(--accent), transparent 78%);
}
.deck-num{
  font-family:"Inter",sans-serif;font-size:.68rem;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:14px;
}
.deck-ico{
  width:48px;height:48px;border-radius:13px;margin-bottom:18px;
  background:color-mix(in srgb, var(--accent) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
}
.deck-ico .icon{width:22px;height:22px;}
.deck-card h3{font-size:1.34rem;margin:0 0 10px;color:#fff;}
.deck-card p{font-size:.92rem;line-height:1.6;color:var(--ink-body);margin:0;max-width:48ch;}
.deck-hint{
  position:absolute;right:26px;bottom:22px;display:flex;align-items:center;gap:9px;
  color:var(--accent);font-size:.78rem;font-weight:600;opacity:.9;
}
.deck-hint .icon{width:16px;height:16px;}
.deck-card:hover{box-shadow:0 34px 70px -22px rgba(0,0,0,.9),
  inset 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent),
  0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);}
.deck-card.gone-left{
  transform:translate(-62%,-10%) rotate(-14deg) scale(.9)!important;
  opacity:0;pointer-events:none;
}
.deck-card.gone-right{
  transform:translate(62%,-10%) rotate(14deg) scale(.9)!important;
  opacity:0;pointer-events:none;
}
.deck-controls{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin-top:30px;
}
.deck-dots{display:flex;gap:7px;}
.deck-dots span{width:26px;height:3px;border-radius:2px;background:var(--line-dark);transition:background .3s ease;}
.deck-dots span.done{background:var(--blue-500);}
.deck-count{font-size:.86rem;color:var(--ink-dim);font-weight:600;letter-spacing:.04em;}
.deck-reset{
  all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  color:var(--ink-dim);font-size:.86rem;font-weight:600;
  border:1px solid var(--line-dark);border-radius:var(--radius);padding:10px 20px;
  transition:color .15s ease,border-color .15s ease,opacity .2s ease;
}
.deck-reset:hover{color:#fff;border-color:var(--blue-400);}
.deck-reset:focus-visible,.deck-card:focus-visible{outline:2px solid var(--blue-400);outline-offset:4px;}
@media(max-width:640px){
  .deck-stage{min-height:500px;}
  .deck-card{padding:34px 28px;}
  .deck-card h3{font-size:1.4rem;}
  .deck-hint{right:24px;bottom:22px;}
}

/* ===== mobile: show the artwork that was being hidden ===== */
@media(max-width:960px){
  .hero{padding:64px 0 54px;}
  .hero-graphic{
    display:block;                 /* was display:none — invisible on phones */
    position:static;transform:none;
    width:100%;max-width:540px;min-width:0;
    margin:30px auto 0;
    -webkit-mask-image:none;mask-image:none;   /* the left-fade would eat half of it */
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
  }
  .hero h1{max-width:none;}
  .hero .sub{max-width:none;}
}

/* orbit: show the shield on phones + close the gap under the heading */
.what-orbit .section-title{margin-bottom:26px;}
.orbit-wrap{align-items:start;}
@media(max-width:900px){
  .orbit-core{
    display:block;position:static;transform:none;
    width:172px;margin:0 auto 22px;
  }
  .orbit{padding-top:0;}
  .orbit-node:first-of-type{border-top:1px solid var(--line-dark);}
}
@media(min-width:901px){
  .orbit-wrap{align-items:center;}
}

/* ===== who we work with: photo hero ===== */
.nl-hero{
  position:relative;overflow:hidden;padding:92px 0 150px;
  background:
    linear-gradient(90deg,var(--navy-950) 0%,rgba(8,15,28,.9) 22%,rgba(8,15,28,.4) 55%,rgba(8,15,28,.18) 100%),
    linear-gradient(180deg,rgba(8,15,28,.5) 0%,transparent 26%,rgba(8,15,28,.68) 100%);
}
.nl-hero .wrap{position:relative;z-index:2;width:100%;}
.nl-hero h1{font-size:clamp(2.2rem,3.9vw,3.3rem);line-height:1.12;margin:0;max-width:17ch;}
.nl-hero h1 .accent{color:#6f93f5;}
.nl-rule{width:72px;height:3px;background:var(--red-600);border-radius:2px;margin:26px 0 24px;}
.nl-hero .sub{color:var(--ink-body);font-size:1.04rem;max-width:46ch;margin:0 0 34px;}

/* three quick trust points */
.nl-points{
  display:inline-flex;flex-wrap:wrap;align-items:stretch;
  background:rgba(11,18,34,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line-dark);border-radius:12px;overflow:hidden;
}
.nl-point{display:flex;align-items:center;gap:14px;padding:20px 26px;}
.nl-point + .nl-point{border-left:1px solid var(--line-dark);}
.nl-point .icon{width:26px;height:26px;color:var(--blue-400);flex-shrink:0;}
.nl-point span{font-size:.95rem;color:var(--ink-hi);line-height:1.35;}
@media(max-width:820px){
  .nl-point + .nl-point{border-left:none;border-top:1px solid var(--line-dark);}
  .nl-points{display:flex;flex-direction:column;}
}

/* wide summary bar overlapping the photo */
.nl-bar{
  position:relative;z-index:3;margin-top:-72px;
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:rgba(13,20,38,.94);backdrop-filter:blur(8px);
  border:1px solid var(--line-dark);border-radius:14px;padding:26px 30px;
  box-shadow:0 26px 56px -22px rgba(0,0,0,.8);
}
.nl-bar .globe{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  border:1px solid rgba(127,160,242,.4);color:var(--blue-400);
  display:flex;align-items:center;justify-content:center;
}
.nl-bar p{margin:0;flex:1;min-width:280px;color:var(--ink-body);font-size:.98rem;line-height:1.6;}
.nl-chip{
  display:inline-flex;align-items:center;gap:11px;
  border:1px solid var(--line-dark);border-radius:10px;padding:13px 18px;
  color:var(--ink-hi);font-size:.9rem;line-height:1.3;background:rgba(255,255,255,.03);
}
.nl-chip .icon{width:19px;height:19px;color:var(--blue-400);flex-shrink:0;}
.nl-flag{width:26px;height:18px;border-radius:3px;overflow:hidden;flex-shrink:0;display:block;}
@media(max-width:1080px){
  .nl-hero{
    padding:74px 0 90px;
    background:
      linear-gradient(90deg,rgba(8,15,28,.95) 0%,rgba(8,15,28,.75) 60%,rgba(8,15,28,.55) 100%),
      linear-gradient(180deg,rgba(8,15,28,.5) 0%,transparent 30%,rgba(8,15,28,.75) 100%);
  }
  .nl-bar{margin-top:26px;}
}

/* ===== client profile: hover flip cards ===== */
.cp-head{margin-bottom:32px;}
.cp-head .rule{display:block;width:64px;height:3px;background:var(--red-600);border-radius:2px;margin-top:18px;}
.cp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:960px){.cp-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.cp-grid{grid-template-columns:1fr;}}
.cp-card{perspective:1200px;height:196px;}
.cp-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .62s var(--ease);
}
.cp-card:hover .cp-inner,.cp-card:focus-within .cp-inner{transform:rotateY(180deg);}
.cp-face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:14px;padding:24px 22px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
}
.cp-front{
  background:linear-gradient(165deg,#141a26 0%,#10151f 100%);
  border:1px solid var(--line-dark);
  gap:16px;
}
.cp-ico{
  width:64px;height:64px;border-radius:50%;
  border:1px solid rgba(127,160,242,.45);
  background:radial-gradient(circle at 50% 35%, rgba(54,96,224,.22), rgba(54,96,224,.05));
  color:var(--blue-400);display:flex;align-items:center;justify-content:center;
}
.cp-ico .icon{width:27px;height:27px;}
.cp-front h3{font-family:"Inter",sans-serif;font-size:1rem;font-weight:600;color:var(--ink-hi);margin:0;line-height:1.35;}
.cp-front .bar{width:36px;height:3px;border-radius:2px;background:var(--blue-500);}
.cp-back{
  transform:rotateY(180deg);
  background:linear-gradient(165deg,#152142 0%,#0e1830 100%);
  border:1px solid rgba(127,160,242,.55);
  box-shadow:inset 0 1px 0 rgba(127,160,242,.25);
}
.cp-back p{margin:0;color:var(--ink-body);font-size:.95rem;line-height:1.6;}
.cp-card:hover .cp-front,.cp-card:focus-within .cp-front{border-color:rgba(127,160,242,.5);}
.cp-card a:focus-visible{outline:2px solid var(--blue-400);outline-offset:4px;}

/* ---------- homepage: strategic oversight flow ---------- */
.flow-row{display:flex;align-items:stretch;gap:0;}
.flow-step{
  flex:1;position:relative;text-align:center;padding:8px 18px;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .25s var(--ease);
}
.flow-step:hover{transform:translateY(-4px);}
.flow-num{
  font-family:"Inter",sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:14px;
}
.flow-ico{
  width:58px;height:58px;border-radius:50%;margin-bottom:18px;
  background:color-mix(in srgb, var(--accent) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 0 transparent;transition:box-shadow .25s ease;
}
.flow-step:hover .flow-ico{box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 16%, transparent);}
.flow-step h3{font-size:1.02rem;margin-bottom:8px;}
.flow-step p{font-size:.9rem;color:var(--ink-dim);margin:0;max-width:26ch;}
.flow-arrow{
  flex-shrink:0;align-self:center;color:var(--ink-dim);opacity:.5;
  display:flex;align-items:center;justify-content:center;margin:0 -6px;
}
.flow-arrow .icon{width:18px;height:18px;}
@media(max-width:820px){
  .flow-row{flex-direction:column;gap:28px;}
  .flow-arrow{transform:rotate(90deg);margin:0;}
}

/* ---------- about page: compass security diagram ---------- */
.sd-wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;}
@media(max-width:900px){.sd-wrap{grid-template-columns:1fr;gap:34px;}}
.sd{position:relative;width:100%;max-width:600px;aspect-ratio:1/1;margin:0 auto 0;color:var(--blue-400);}
.sd-svg{position:absolute;inset:0;width:100%;height:100%;}
.sd-tick{stroke:currentColor;stroke-width:.6;opacity:.5;}
.sd-tip{fill:currentColor;opacity:.85;}
.sd-ring-ghost{stroke:currentColor;stroke-width:1;opacity:.16;fill:none;}
.sd-ring-draw{
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:50% 50%;
  stroke-dasharray:188.5;stroke-dashoffset:188.5;
  animation:draw-shield 4.5s ease-in-out infinite;
  filter:drop-shadow(0 0 5px var(--blue-glow));
}
@keyframes draw-shield{
  0%{stroke-dashoffset:188.5;opacity:.2;}
  10%{opacity:1;}
  55%{stroke-dashoffset:0;opacity:1;}
  78%{stroke-dashoffset:0;opacity:1;}
  100%{stroke-dashoffset:-188.5;opacity:.2;}
}
.sd-core{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%, rgba(54,96,224,.24), var(--navy-950) 72%);
  border:1px solid var(--blue-400);color:var(--blue-400);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 34px rgba(54,96,224,.4);
}
.sd-core .icon{width:30px;height:30px;}
.sd-node{
  all:unset;cursor:pointer;box-sizing:border-box;
  position:absolute;transform:translate(-50%,-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  background:var(--surface-1);border:1px solid var(--line-dark);color:var(--blue-400);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
}
.sd-node .icon{width:19px;height:19px;}
.sd-node:hover,.sd-node.active{
  transform:translate(-50%,-50%) scale(1.12);
  background:var(--blue-600);border-color:var(--blue-600);color:#fff;
}
.sd-node:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;}
.sd-label{
  position:absolute;z-index:2;
  font-size:.8rem;font-weight:600;color:var(--ink-dim);
  white-space:nowrap;line-height:1.35;
  transition:color .2s ease;
}
.sd-label.top{transform:translate(-50%,-100%);text-align:center;margin-top:-8px;}
.sd-label.bottom{transform:translate(-50%,0);text-align:center;margin-top:8px;}
.sd-label.left{transform:translate(-100%,-50%);text-align:right;margin-left:-10px;}
.sd-label.right{transform:translate(0,-50%);text-align:left;margin-left:10px;}
.sd-caption{max-width:440px;text-align:left;min-height:96px;}
.sd-caption .item{display:none;margin:0;color:var(--ink-body);font-size:1.02rem;line-height:1.7;}
.sd-caption .item.active{display:block;animation:fadein .4s ease;}
.sd-hint{display:block;margin:0;color:var(--ink-dim);font-size:.95rem;font-style:italic;}
.sd-caption:has(.item.active) .sd-hint{display:none;}
@media(max-width:900px){.sd-caption{max-width:none;text-align:center;}}
@media(max-width:640px){
  .sd{max-width:320px;}
  .sd-label{font-size:.66rem;white-space:normal;width:82px;}
  .sd-label.left{text-align:center;}
  .sd-label.right{text-align:center;}
  .sd-node{width:38px;height:38px;}
  .sd-node .icon{width:16px;height:16px;}
  .sd-core{width:66px;height:66px;}
  .sd-core .icon{width:24px;height:24px;}
}

/* ---------- fixed mountain/lighthouse background: Frameworks & Who we work with ---------- */
body.mountain-bg{
  background:
    linear-gradient(rgba(8,15,28,.48), rgba(8,15,28,.6)),
    url('hero/services-lighthouse.jpg');
  background-size:cover;
  background-position:center 32%;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-color:var(--navy-950);
}
@media(max-width:900px){
  /* background-attachment:fixed is unreliable/janky on mobile Safari & causes scroll jank on many mobile browsers */
  body.mountain-bg{background-attachment:scroll;}
}

/* ---------- higher-contrast (sharp, darker) version of the mountain photo: FAQ & Contact ---------- */
body.mountain-bg.photo-contrast{
  background:
    linear-gradient(rgba(8,15,28,.72), rgba(8,15,28,.8)),
    url('hero/services-lighthouse.jpg');
  background-size:cover;
  background-position:center 32%;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-color:var(--navy-950);
}
@media(max-width:900px){
  body.mountain-bg.photo-contrast{background-attachment:scroll;}
}

/* ---------- let the fixed background show through past the hero on these pages ---------- */
body.mountain-bg .section-alt,
body.about-bg .section-alt{
  background:rgba(15,18,24,.32);
}
body.mountain-bg .cta-band,
body.about-bg .cta-band{background:rgba(8,15,28,.55);}
body.mountain-bg section:not(.section-alt),
body.about-bg section:not(.section-alt){background:transparent;}
body.about-bg .page-hero,
body.mountain-bg .page-hero{background:transparent;background-image:none;}

/* let the mountain/lighthouse photo show through the frameworks split-hero */
body.mountain-bg .split-hero{
  background:
    linear-gradient(90deg, rgba(8,15,28,.55) 0%, rgba(8,15,28,.32) 55%, rgba(8,15,28,.22) 100%),
    radial-gradient(900px 520px at 74% 46%, rgba(42,80,190,.18), rgba(42,80,190,0) 68%);
}

/* ---------- about page: fixed background image ---------- */
body.about-bg{
  background:
    linear-gradient(rgba(8,15,28,.45), rgba(8,15,28,.58)),
    url('hero/about-bg-v2.jpg');
  background-size:cover;
  background-position:center 30%;
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-color:var(--navy-950);
}
@media(max-width:900px){
  body.about-bg{background-attachment:scroll;}
}

/* ---------- click-to-reveal contact (about page) ---------- */
.reveal-contact{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.reveal-btn{
  all:unset;cursor:pointer;box-sizing:border-box;
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:var(--radius);
  border:1px solid var(--line-dark);color:var(--ink-hi);font-size:.92rem;font-weight:600;
  background:var(--surface-1);
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.reveal-btn .icon{width:18px;height:18px;color:var(--blue-400);flex-shrink:0;}
.reveal-btn:hover{border-color:var(--blue-400);background:var(--surface-2);}
.reveal-btn:focus-visible{outline:2px solid var(--blue-400);outline-offset:3px;}
.reveal-btn.revealed{
  border-color:rgba(127,160,242,.5);cursor:text;
  background:rgba(54,96,224,.1);
}
.reveal-btn.revealed:hover{color:var(--blue-400);}

/* ---------- click-to-reveal contact: inline text variant (contact page card) ---------- */
.reveal-inline{
  all:unset;cursor:pointer;
  color:var(--blue-400);font-size:1rem;font-weight:600;
  transition:color .15s ease;
}
.reveal-inline:hover{color:var(--blue-500);text-decoration:underline;}
.reveal-inline:focus-visible{outline:2px solid var(--blue-400);outline-offset:2px;}
.reveal-inline.revealed{color:var(--ink-hi);cursor:text;}
.reveal-inline.revealed:hover{text-decoration:none;}

/* ---------- contact form: confirmation state after opening gmail ---------- */
.form-grid input.field-sent,
.form-grid textarea.field-sent{
  background:rgba(54,96,224,.14)!important;
  border-color:var(--blue-400)!important;
  transition:background .3s ease,border-color .3s ease;
}

/* ---------- contact form: mailto fallback panel ---------- */
.mail-fallback{
  margin-top:22px;padding:20px 22px;
  background:rgba(54,96,224,.08);border:1px solid rgba(127,160,242,.28);border-radius:var(--radius-lg);
}
.mail-fallback-title{margin:0 0 6px;font-weight:600;color:var(--ink-hi);font-size:.98rem;}
.mail-fallback-sub{margin:0 0 16px;color:var(--ink-dim);font-size:.88rem;line-height:1.6;}
.mail-fallback-actions{display:flex;gap:12px;flex-wrap:wrap;}
.mail-fallback .btn{padding:10px 18px;font-size:.86rem;}