/* Claroview page stylesheet (the homepage and the service/technology sheets).
   Every rule is scoped under main.page so nothing here touches the shared header, footer or the remaining legacy pages.
   Loaded after the shared sheets; the shared header/footer keep their own styles. */

.page{
  /* Aliases onto the site tokens in base.css — change colours there, not here */
  --navy:var(--primary-bg);
  --navy-deep:var(--primary-dark);
  --navy-panel:var(--primary-light);
  --yellow:var(--accent-yellow);
  --white:var(--text-primary);
  --muted:var(--text-muted);
  --faint:var(--text-faint);
  --line:var(--border-light);
  --net:rgba(130,140,255,.28);
  --mono:var(--font-mono);
  --body:var(--font-primary);
  /* Shared header height: logo 60px + .header__content padding 12px twice + 1px border.
     home.js re-measures and overwrites it, so this seed has to be the real value: a wrong
     one resizes every 100vh-minus-header section the moment that measurement lands. */
  --header-h:85px;
}
@media (max-width:768px){
  .page{ --header-h:77px; } /* header.css drops the padding to --spacing-xs (8px) here */
}
.page h1, .page h2, .page h3, .page p, .page blockquote{margin:0;} /* base.css adds margins; this page sets its own */
.page{
  background:var(--navy);
  color:var(--white);
  font-family:var(--body);
  font-weight:300;
  line-height:1.7;
  /* clip, not hidden: `overflow-x:hidden` forces the other axis to `auto`, which makes
     .page a scroll container and stops the sticky sections below from ever sticking to
     the viewport. `clip` trims the same overflow without creating one. */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
.page ::selection{background:var(--yellow);color:var(--navy);}
.page a{color:inherit;text-decoration:none;}
.page img{display:block;max-width:100%;}

.page h1, .page h2, .page h3{font-family:var(--mono);font-weight:600;line-height:1.15;letter-spacing:-.01em;}
.page h1{font-size:clamp(2.4rem,5.4vw,4.4rem);}
.page h2{font-size:clamp(1.8rem,3.6vw,2.9rem);}
.page h3{font-size:clamp(1.15rem,1.8vw,1.45rem);}
.page p{font-size:clamp(1rem,1.15vw,1.125rem);color:var(--muted);}
.page .measure{max-width:640px;}
.page .wide{max-width:820px;}

.page #estate{
  position:relative;min-height:calc(100vh - var(--header-h));
  display:flex;align-items:center;
  padding:80px clamp(24px,6vw,80px) 100px;
  overflow:hidden;
}
.page #estate-canvas{
  position:absolute;top:0;left:0;
  width:100%;height:100%;
  display:block;z-index:1;
  opacity:.9;
}
.page .hero-inner{position:relative;z-index:2;max-width:860px;}
.page .hero-inner h1{margin-bottom:30px;}
.page .hero-inner h1 .accent{color:var(--yellow);}
.page .hero-sub{font-size:clamp(1.05rem,1.4vw,1.25rem);max-width:640px;margin-bottom:44px;}
.page .hero-ctas{display:flex;flex-wrap:wrap;gap:18px;}
.page .hero-tag{
  position:absolute;bottom:44px;left:clamp(24px,6vw,80px);z-index:2;
  display:flex;align-items:center;gap:16px;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);
}
.page .scroll-line{width:1px;height:52px;background:linear-gradient(var(--yellow),transparent);}
.page .hero-legend{
  position:absolute;bottom:44px;right:clamp(24px,6vw,80px);z-index:2;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--faint);display:flex;flex-direction:column;gap:8px;
}
.page .hero-legend span{display:flex;align-items:center;gap:10px;}
.page .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.page .dot-blue{background:#8890ff;}
.page .dot-yellow{background:var(--yellow);box-shadow:0 0 10px rgba(254,234,58,.7);}

.page .light{background:var(--white);}
.page .light h2, .page .light h3{color:var(--navy);}
.page .light p{color:rgba(12,12,48,.68);}
.page .light .eyebrow{color:var(--navy);}
.page .light .eyebrow::before, .page .light .eyebrow::after{background:var(--navy);}
.page .light .domain-grid{background:rgba(12,12,48,.12);border-color:rgba(12,12,48,.12);}
.page .light .domain{background:var(--white);}
.page .light .domain:hover{background:#f5f5fa;}
.page .light .domain .glyph{color:rgba(12,12,48,.45);}
.page .light .bench-cell{border-color:rgba(12,12,48,.12);}
.page .light .bench-cell .big{color:var(--navy);}
.page .light .bench-cell .big::after{content:"";display:block;width:44px;height:3px;background:var(--yellow);margin-top:10px;}
.page .light .bench-cell .lab{color:rgba(12,12,48,.62);}
.page .light .quote{background:var(--white);border-color:rgba(12,12,48,.14);}
.page .light .quote blockquote{color:var(--navy);}
.page .light .quote cite{color:rgba(12,12,48,.5);}
.page .light .quote cite b{color:var(--navy);}
.page .light .proof-note{color:rgba(12,12,48,.68);}
.page .light.bench{border-color:rgba(12,12,48,.12);}

.page .shot{
  border:1px solid var(--line);background:var(--navy-panel);
  overflow:hidden;border-radius:6px;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.page .shot:hover{transform:translateY(-6px);border-color:rgba(254,234,58,.45);box-shadow:0 22px 44px rgba(0,0,0,.35);}
.page .shot .bar{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--line);
  background:#0e0e34;
}
.page .shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);}
.page .shot .bar i:first-child{background:rgba(229,72,77,.7);}
.page .shot .bar i:nth-child(2){background:rgba(255,169,77,.7);}
.page .shot .bar i:nth-child(3){background:rgba(74,222,128,.6);}
.page .shot .bar span{
  margin-left:10px;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.page .shot img{width:100%;height:auto;display:block;}
.page .shot-cap{
  margin-top:18px;font-size:.95rem;color:var(--muted);max-width:640px;
}
.page .shot-cap b{color:var(--white);font-weight:500;font-family:var(--mono);font-size:.85rem;letter-spacing:.04em;display:block;margin-bottom:6px;}
.page .platform-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.5vw,56px);
  margin-top:clamp(40px,5vw,72px);
}
.page .platform-lead{margin-top:64px;}
.page .platform-note{
  margin-top:44px;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.1em;color:var(--faint);text-transform:uppercase;
}
@media (max-width:1024px){
  .page .platform-grid{grid-template-columns:1fr;}
}

.page section{position:relative;scroll-margin-top:var(--header-h);} /* in-page links land below the sticky header */
.page .section-pad{padding:clamp(90px,11vw,160px) clamp(24px,6vw,80px);}
.page .container{max-width:1240px;margin:0 auto;padding:0;} /* layout.css pads .container; sections pad themselves */
.page .alt{background:var(--navy-deep);}
.page .rule-top{border-top:1px solid var(--line);}

.page #problem{
  background:var(--navy-deep);
  /* Scroll runway for the sticky narrative below. The section is one viewport of
     visible pin plus the distance the crossfade scrubs over; 450vh reproduces exactly
     what the old GSAP `end:'+=450%'` measured (4050px at a 900px viewport).
     This used to be a ScrollTrigger pin, which swaps the element to position:fixed and
     inserts a spacer. The browser records that as a layout shift, and it was 0.92 of
     the homepage's CLS. Sticky produces none. */
  height:calc(100vh - var(--header-h) + 450vh);
}
.page .problem-pin{
  height:calc(100vh - var(--header-h));display:flex;align-items:center;justify-content:center;
  position:sticky;top:var(--header-h);overflow:hidden;
  padding:0 clamp(24px,6vw,80px);
}
.page .problem-statement{
  position:absolute;max-width:min(900px, 100% - 48px);text-align:center; /* absolute children ignore the pin's side padding */
  font-family:var(--mono);font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.7rem);line-height:1.35;
  opacity:0;
}
.page .problem-statement .pb{display:block;margin-top:.9em;} /* one sentence per beat */
.page .problem-statement .num{
  display:block;font-size:.8rem;letter-spacing:.3em;color:var(--faint);
  margin-bottom:22px;font-weight:500;
}
.page .problem-statement.resolve{color:var(--yellow);}
.page .problem-progress{
  position:absolute;left:50%;bottom:56px;transform:translateX(-50%);
  display:flex;gap:10px;
}
.page .problem-progress i{width:26px;height:2px;background:rgba(255,255,255,.15);transition:background .3s;}
.page .problem-progress i.on{background:var(--yellow);}

.page .domain-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--line);border:1px solid var(--line);
  margin-top:64px;
}
.page .domain-grid--2{grid-template-columns:repeat(2,1fr);}
.page .domain{
  background:var(--navy);padding:clamp(32px,3vw,52px) clamp(26px,2.6vw,44px);
  transition:background .35s;position:relative;overflow:hidden;
}
.page .domain:hover{background:var(--navy-panel);}
.page .domain::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .45s;
}
.page .domain:hover::before{transform:scaleX(1);}
.page .domain .glyph{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.2em;
  color:var(--faint);margin-bottom:26px;display:block;
}
.page .domain h3{margin-bottom:16px;}
.page .domain p{font-size:.98rem;}
.page .domain p.doc-link{margin-top:20px;}
.page .domain .doc-thumb{display:block;margin-bottom:28px;border:1px solid var(--line);transition:border-color .35s;}
.page .domain .doc-thumb img{width:100%;height:auto;display:block;}
.page .light .domain .doc-thumb{border-color:rgba(12,12,48,.14);}
.page .light .domain .doc-thumb:hover{border-color:rgba(12,12,48,.4);}

.page .process-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,64px);
  margin-top:70px;
}
.page .step{position:relative;padding-top:34px;border-top:1px solid var(--line);
  transition:border-color .35s ease;}
.page .step:hover{border-top-color:var(--yellow);}
.page .step .k{
  position:absolute;top:-14px;left:0;background:var(--navy);
  padding-right:16px;
  font-family:var(--mono);font-weight:700;font-size:1rem;color:var(--yellow);
  letter-spacing:.1em;
  transition:letter-spacing .35s ease;
}
.page .step:hover .k{letter-spacing:.16em;}
.page .alt .step .k{background:var(--navy-deep);}
.page .step h3{margin-bottom:14px;}
.page .step p{font-size:.98rem;}
.page .process-note{
  margin-top:72px;padding:clamp(30px,3vw,46px);
  border-left:2px solid var(--yellow);
  background:var(--navy-panel);
  max-width:820px;
  transition:border-left-width .3s ease,background .35s ease,transform .35s ease;
}
.page .process-note:hover{border-left-width:6px;background:#15153f;transform:translateX(4px);}
.page .process-note p{color:var(--white);font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:300;}

.page #services{
  background:var(--navy);
  /* Same sticky runway as #problem, but the horizontal travel depends on the track's
     width and the viewport, so home.js measures it into --h-runway. The 0px fallback
     collapses the section to a single screen if the script never runs. */
  height:calc(100vh - var(--header-h) + var(--h-runway, 0px));
}
.page .h-wrap{
  overflow:hidden;
  position:sticky;top:var(--header-h);
  height:calc(100vh - var(--header-h));
}
.page .h-track{display:flex;height:calc(100vh - var(--header-h));align-items:center;will-change:transform;}
.page .h-head{
  flex:0 0 auto;width:min(560px,80vw);
  padding:0 clamp(24px,6vw,80px);
}
.page .svc{
  flex:0 0 auto;
  width:min(480px,82vw);
  margin-right:clamp(24px,3vw,48px);
  background:var(--navy-panel);
  border:1px solid var(--line);
  padding:clamp(34px,3vw,50px);
  display:flex;flex-direction:column;gap:18px;
  height:min(580px,76vh);
  transition:border-color .3s,transform .3s;
}
.page .svc:hover{border-color:rgba(254,234,58,.5);transform:translateY(-6px);}
.page .svc .tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--yellow);
}
.page .svc h3{font-size:clamp(1.3rem,1.8vw,1.6rem);}
.page .svc p{font-size:.97rem;flex:1;}
.page .svc .meta{
  font-family:var(--mono);font-size:.78rem;color:var(--faint);
  letter-spacing:.06em;border-top:1px solid var(--line);padding-top:18px;
}
.page .svc .link{
  font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--yellow);
  display:inline-flex;align-items:center;gap:10px;
}
.page .svc .link .arrow{transition:transform .3s;}
.page .svc:hover .link .arrow{transform:translateX(6px);}
.page .h-progress{
  position:absolute;bottom:40px;left:clamp(24px,6vw,80px);right:clamp(24px,6vw,80px);
  height:2px;background:rgba(255,255,255,.1);z-index:5;
}
.page .h-progress i{display:block;height:100%;background:var(--yellow);width:100%;transform:scaleX(0);transform-origin:left;}

.page .bench{border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.page .bench-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.page .bench-cell{
  padding:clamp(36px,4vw,60px) clamp(20px,2.4vw,40px);
  border-right:1px solid var(--line);
  transition:background .35s ease;
}
.page .bench-cell:hover{background:rgba(255,255,255,.04);}
.page .light .bench-cell:hover{background:#f6f6fb;}
.page .light .bench-cell .big::after{transition:width .4s ease;}
.page .light .bench-cell:hover .big::after{width:72px;}
.page .bench-cell:last-child{border-right:none;}
.page .bench-cell .big{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.3rem);color:var(--yellow);
  display:block;margin-bottom:12px;line-height:1.1;
}
.page .bench-cell .lab{font-size:.9rem;color:var(--muted);line-height:1.55;display:block;}

.page #ai .split{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(48px,6vw,100px);
  align-items:center;
}
.page .ai-visual{
  position:relative;border:1px solid var(--line);background:var(--navy-deep);
  padding:clamp(28px,3vw,44px);font-family:var(--mono);font-size:.82rem;line-height:2.05;
  color:var(--muted);overflow:hidden;
  transition:border-color .35s ease,transform .35s ease,box-shadow .35s ease;
}
.page .ai-visual:hover{
  border-color:rgba(254,234,58,.45);
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,.3);
}
.page .ai-visual .row{transition:background .25s ease,padding-left .25s ease;}
.page .ai-visual .row:hover{background:rgba(255,255,255,.03);padding-left:8px;}
.page .ai-visual .row{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid rgba(255,255,255,.05);}
.page .ai-visual .row:last-child{border-bottom:none;}
.page .ai-visual .ok{color:#8890ff;}
.page .ai-visual .warn{color:var(--yellow);}
.page .ai-visual .hd{color:var(--white);font-weight:600;letter-spacing:.14em;font-size:.72rem;text-transform:uppercase;margin-bottom:14px;display:block;}

.page .quote-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,40px);
  margin-top:64px;
}
.page .quote{
  border:1px solid var(--line);padding:clamp(30px,2.8vw,44px);
  display:flex;flex-direction:column;gap:24px;background:var(--navy);
  position:relative;
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease;
}
.page .quote::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--yellow);transform:scaleX(0);transform-origin:left;
  transition:transform .45s ease;
}
.page .quote:hover{
  transform:translateY(-8px);
  border-color:rgba(254,234,58,.55);
  box-shadow:0 22px 44px rgba(12,12,48,.16);
}
.page .quote:hover::before{transform:scaleX(1);}
.page .quote .mark{font-family:var(--mono);font-size:2.4rem;color:var(--yellow);line-height:1;}
.page .quote blockquote{font-size:1rem;color:var(--white);font-weight:300;line-height:1.75;flex:1;}
.page .quote cite{
  font-style:normal;font-family:var(--mono);font-size:.8rem;
  color:var(--faint);letter-spacing:.05em;line-height:1.7;
}
.page .quote cite b{color:var(--white);font-weight:600;display:block;}
.page .proof-note{margin-top:44px;max-width:760px;}

.page #contact{background:var(--navy-deep);text-align:center;}
.page #contact .eyebrow{justify-content:center;}
.page #contact .eyebrow::after{content:"";width:34px;height:1px;background:var(--yellow);}
.page #contact h2{margin-bottom:24px;}
.page #contact p{margin:0 auto 44px;max-width:620px;}
.page #contact .hero-ctas{justify-content:center;}
/* One primary action; email is the quiet alternative, shown as the address itself so it can be copied. */
.page #contact .cta-alt{margin:24px auto 0;color:var(--muted);font-size:.95rem;}
.page #contact .cta-alt a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px;}
.page #contact .cta-alt a:hover{text-decoration-thickness:2px;}

.page .focus-in{filter:blur(9px);opacity:.15;transform:translateY(34px);}

@media (max-width:1024px){
  .page .domain-grid{grid-template-columns:1fr;}
  .page .process-row{grid-template-columns:1fr;gap:56px;}
  .page .bench-grid{grid-template-columns:1fr 1fr;}
  .page .bench-cell:nth-child(2){border-right:none;}
  .page .bench-cell:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .page #ai .split{grid-template-columns:1fr;}
  .page .quote-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .page .hero-legend{display:none;}
  
  /* home.js skips the horizontal scroll below 768px, so the section stops being a
     runway and the wrapper stops sticking. #problem keeps its sticky narrative here. */
  .page #services{height:auto;}
  .page .h-wrap{position:static;height:auto;}
  .page .h-track{flex-direction:column;height:auto;align-items:stretch;gap:24px;
    padding:clamp(90px,11vw,160px) clamp(24px,6vw,80px);}
  .page .h-head{width:auto;padding:0 0 24px;}
  .page .svc{width:auto;margin-right:0;height:auto;}
  .page .h-progress{display:none;}
  .page .bench-grid{grid-template-columns:1fr;}
  .page .bench-cell{border-right:none;border-bottom:1px solid var(--line);}
  .page .bench-cell:last-child{border-bottom:none;}
}
@media (prefers-reduced-motion:reduce){
  .page .focus-in{filter:none;opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}

@media (prefers-reduced-motion:reduce){
  /* No scrubbed animation runs, so neither section is a runway: both collapse to
     ordinary stacked content and nothing sticks. */
  .page #services{height:auto;}
  .page .h-wrap{position:static;height:auto;}
  .page .h-track{flex-direction:column;height:auto;align-items:stretch;gap:24px;
    padding:clamp(90px,11vw,160px) clamp(24px,6vw,80px);}
  .page .h-head{width:auto;padding:0 0 24px;}
  .page .svc{width:auto;margin-right:0;height:auto;}
  .page .h-progress{display:none;}
  .page #problem{height:auto;}
  .page .problem-pin{position:relative;height:auto;flex-direction:column;gap:56px;
    padding:clamp(90px,11vw,160px) clamp(24px,6vw,80px);}
  .page .problem-statement{position:relative;opacity:1;}
  .page .problem-progress{display:none;}
}
/* GSAP failed to load: same flattening as reduced-motion, applied by home.js. */
body.no-motion .page #services{height:auto;}
body.no-motion .page .h-wrap{position:static;height:auto;}
body.no-motion .page .h-track{flex-direction:column;height:auto;align-items:stretch;gap:24px;
  padding:clamp(90px,11vw,160px) clamp(24px,6vw,80px);}
body.no-motion .page .h-head{width:auto;padding:0 0 24px;}
body.no-motion .page .svc{width:auto;margin-right:0;height:auto;}
body.no-motion .page .h-progress{display:none;}
body.no-motion .page #problem{height:auto;}
body.no-motion .page .problem-pin{position:relative;height:auto;flex-direction:column;gap:56px;
  padding:clamp(90px,11vw,160px) clamp(24px,6vw,80px);}
body.no-motion .page .problem-statement{position:relative;opacity:1;}
body.no-motion .page .problem-progress{display:none;}

/* ---------- Service / technology sheets (pages that share the homepage vocabulary) ---------- */
.page .sheet-hero{padding:clamp(64px,8vw,110px) clamp(24px,6vw,80px) clamp(56px,6vw,90px);}
.page .sheet-hero .split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,5vw,90px);align-items:center;max-width:1240px;margin:0 auto;}
.page .sheet-hero .split.single{grid-template-columns:minmax(0,860px);}
.page .sheet-hero h1{font-size:clamp(2rem,4.2vw,3.4rem);margin-bottom:26px;}
.page .sheet-hero .hero-sub{margin-bottom:36px;}
.page .sheet-hero .hero-sub a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px;}
.page .process-row--4{grid-template-columns:repeat(4,1fr);}
.page .process-row--5{grid-template-columns:repeat(5,1fr);gap:clamp(20px,2.4vw,40px);}
.page .process-row--5 .step h3{font-size:clamp(1.05rem,1.5vw,1.3rem);}
.page .process-row--5 .step .k{font-size:.8rem;letter-spacing:.06em;padding-right:10px;white-space:nowrap;}
.page .process-row--5 .step:hover .k{letter-spacing:.06em;} /* five columns leave no room for the hover spread */
/* Level profile: the .ai-visual panel with a five-segment bar per dimension. Filled
   segments are the level now; the yellow diamond sits under the level the system needs. */
.page .ai-visual.profile .row{display:grid;grid-template-columns:1fr auto 10.5em;align-items:center;gap:18px;padding-bottom:7px;}
.page .ai-visual.profile .row .v{text-align:right;}
.page .lvl-bar{display:inline-flex;gap:3px;}
.page .lvl-bar i{display:block;position:relative;width:18px;height:9px;border-radius:1.5px;border:1px solid rgba(255,255,255,.3);}
.page .lvl-bar i.on{background:#8890ff;border-color:#8890ff;}
.page .lvl-bar i.req::after{content:"";position:absolute;left:50%;bottom:-9px;width:6px;height:6px;margin-left:-3px;transform:rotate(45deg);background:var(--yellow);}
.page .profile-fig{margin:0;}
/* The frame of the model: the same panel, seven dimensions by five levels, no result in it.
   The columns brighten from L1 to L5 so the scale reads without any cell content. */
.page .ai-visual.frame .row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;}
.page .lvl-head{display:inline-flex;gap:3px;}
.page .lvl-head b{width:38px;text-align:center;font-size:.72rem;font-weight:600;color:var(--white);letter-spacing:.06em;}
.page .lvl-bar--scale i{width:38px;height:11px;border-color:transparent;background:#8890ff;}
.page .lvl-bar--scale i:nth-child(1){opacity:.16;}
.page .lvl-bar--scale i:nth-child(2){opacity:.34;}
.page .lvl-bar--scale i:nth-child(3){opacity:.55;}
.page .lvl-bar--scale i:nth-child(4){opacity:.78;}
.page .profile-note{margin-top:16px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.page .spec-list{margin-top:56px;border-top:1px solid var(--line);}
.page .spec-list > div{display:grid;grid-template-columns:minmax(200px,.32fr) 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);}
.page .spec-list dt{font-family:var(--mono);font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);padding-top:4px;}
.page .spec-list dd{margin:0;color:var(--muted);font-size:.98rem;}
.page .spec-list dd b{color:var(--white);font-weight:500;}
.page .light .spec-list dt{color:var(--navy);}
.page .light .spec-list dd{color:rgba(12,12,48,.68);}
.page .light .spec-list dd b{color:var(--navy);}
.page .faq-list{margin-top:48px;border-top:1px solid var(--line);max-width:860px;}
.page .faq-list details{border-bottom:1px solid var(--line);}
.page .faq-list summary{cursor:pointer;list-style:none;padding:22px 0;font-family:var(--mono);font-weight:600;font-size:1rem;color:var(--white);display:flex;justify-content:space-between;gap:24px;}
.page .faq-list summary::-webkit-details-marker{display:none;}
.page .faq-list summary::after{content:"+";color:var(--yellow);font-weight:400;flex-shrink:0;}
.page .faq-list details[open] summary::after{content:"\2212";}
.page .faq-list details p{padding:0 0 24px;max-width:720px;}
.page .start-box{margin-top:56px;padding:clamp(30px,3vw,46px);border-left:2px solid var(--yellow);background:var(--navy-panel);max-width:820px;}
.page .start-box p{color:var(--white);font-size:clamp(1.05rem,1.3vw,1.2rem);margin-bottom:28px;}
@media (max-width:1024px){
  .page .sheet-hero .split{grid-template-columns:1fr;}
  /* One column: a grid item's min-width:auto would let a wide panel stretch the column and clip the
     hero text on narrow phones. Only here: side by side, that same minimum is what keeps the panel
     wide enough for its rows, and without it the rows overflow and their bars stop lining up. */
  .page .sheet-hero .split > *{min-width:0;}
  .page .process-row--4{grid-template-columns:1fr 1fr;}
  .page .process-row--5{grid-template-columns:1fr 1fr;gap:56px clamp(32px,4vw,64px);}
}
@media (max-width:768px){
  .page .process-row--4{grid-template-columns:1fr;gap:48px;}
  .page .process-row--5{grid-template-columns:1fr;gap:48px;}
  .page .ai-visual.profile .row{grid-template-columns:1fr auto;row-gap:0;}
  .page .lvl-head b{width:26px;}
  .page .lvl-bar--scale i{width:26px;}
  .page .ai-visual.frame .row--need{grid-template-columns:1fr;gap:0;line-height:1.5;padding:8px 0;}
  .page .ai-visual.profile .row .v{grid-column:1 / -1;text-align:left;line-height:1.5;padding-bottom:10px;}
  .page .spec-list > div{grid-template-columns:1fr;gap:8px;}
}

/* ---------- Long-form pages (about, privacy, cookie) ---------- */
.page .prose{max-width:760px;margin-top:40px;}
.page .prose h2{font-size:clamp(1.25rem,1.9vw,1.6rem);margin:48px 0 14px;}
.page .prose h2:first-child{margin-top:0;}
.page .prose h3{font-size:1.05rem;margin:28px 0 10px;}
.page .prose p{margin-bottom:16px;font-size:1rem;}
.page .prose ul{padding-left:1.2em;margin:0 0 18px;color:var(--muted);font-size:1rem;}
.page .prose li{margin-bottom:8px;}
.page .prose b, .page .prose strong{color:var(--white);font-weight:500;}
.page .prose a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px;}
.page .team{margin-top:56px;display:grid;gap:clamp(40px,5vw,72px);}
.page .member{display:grid;grid-template-columns:220px 1fr;gap:clamp(28px,3vw,48px);align-items:start;padding-top:40px;border-top:1px solid var(--line);}
.page .member img{width:220px;height:220px;object-fit:cover;border:1px solid var(--line);}
.page .member h3{margin-bottom:6px;}
.page .member .role{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:18px;}
.page .member p{font-size:.98rem;margin-bottom:12px;}
.page .member a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px;}
@media (max-width:768px){.page .member{grid-template-columns:1fr;} .page .member img{width:160px;height:160px;}}
/* ---------- Contact page: short blocks stacked under one hero ---------- */
/* .section-pad puts up to 160px above and below every section, which suits a full
   sheet section and reads as a gap in the page between two blocks this short. A
   stacked block takes its top space from the block above it. */
.page .section-pad.stack{padding-top:0;}
.page .section-pad.stack--short{padding-bottom:clamp(64px,7vw,100px);}
.page .stack .hero-ctas{margin-top:36px;}
/* ---------- Contact form ---------- */
.page .form-card{margin-top:48px;max-width:720px;border:1px solid var(--line);background:var(--navy-panel);padding:clamp(28px,3vw,44px);}
.page .form-group{margin-bottom:22px;}
.page .form-label{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:8px;}
.page .form-input{width:100%;padding:14px 16px;font-family:var(--body);font-weight:300;font-size:1rem;color:var(--white);background:var(--navy);border:1px solid var(--line);border-radius:2px;transition:border-color .3s;}
.page .form-input::placeholder{color:var(--faint);}
.page .form-input:focus{outline:none;border-color:var(--yellow);}
.page .form-textarea{min-height:160px;resize:vertical;}
.page .form-submit{margin-top:8px;}
.page .form-submit:disabled{opacity:.6;cursor:not-allowed;}
.page .form-status{padding:12px 16px;border-radius:2px;font-size:.9rem;margin:16px 0;}
.page .form-status--success{background:rgba(46,204,113,.15);color:#2ecc71;border:1px solid rgba(46,204,113,.3);}
.page .form-status--error{background:rgba(231,76,60,.15);color:#e74c3c;border:1px solid rgba(231,76,60,.3);}
.page .cf-turnstile{margin:8px 0 16px;}

/* ---------- Article pages ---------- */
.page .prose blockquote{border-left:2px solid var(--yellow);background:var(--navy-panel);padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);margin:30px 0;color:var(--white);font-size:1.05rem;line-height:1.75;}
.page .prose blockquote strong{color:var(--yellow);font-weight:500;}
.page .prose blockquote cite{display:block;margin-top:14px;font-family:var(--mono);font-style:normal;font-size:.8rem;letter-spacing:.05em;color:var(--faint);}
.page .article-meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:18px;}
.page .shot-note{margin-top:14px;font-size:.88rem;color:var(--faint);max-width:640px;}

/* ---------- Notes and case studies (/articles) ----------
   Two pieces: the index list, and the reading column the entries themselves use.
   The reading column sits inside a `.light` section, so the navy header, hero and
   footer keep the site frame while the prose itself is navy on white. `.light` is
   already how the homepage and every service sheet break up a navy page, so this
   reads as the same site rather than a separate blog.
   These rules are additive: `.prose` on its own is unchanged, because about.html,
   privacy.html and cookie-consent.html use it as a left-aligned 760px column. */

/* The reading body section. .section-pad is tuned for a full-width sheet section and
   opens with 160px of empty white above the first line, which reads as a mistake on
   an article. */
.page .article-body{padding-top:clamp(56px,5.5vw,88px);padding-bottom:clamp(72px,7.5vw,116px);}

/* The reading column. A modifier on .prose, so it inherits the heading, list, link
   and blockquote rules and only changes the measure and the type size.
   41rem at 1.1875rem is roughly 70 characters, which is the comfortable line length
   for long-form; the 760px .prose column is closer to 95 and reads as work. */
.page .prose.reading{max-width:41rem;margin:0 auto;} /* .article-body supplies the top space */
.page .prose.reading p{font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.8;margin-bottom:26px;}
.page .prose.reading ul, .page .prose.reading ol{font-size:clamp(1.0625rem,1.25vw,1.1875rem);line-height:1.8;margin:0 0 26px;padding-left:1.1em;}
.page .prose.reading li{margin-bottom:10px;}
.page .prose.reading h2{margin:52px 0 16px;}
.page .prose.reading > *:first-child{margin-top:0;}
/* Figures and pull quotes may break the measure; they stay inside the column on
   narrow screens because the column is already the width of the viewport there. */
.page .prose.reading .shot, .page .prose.reading blockquote{margin-left:0;margin-right:0;}

/* Prose on a white section. base.css and the .light rules cover headings; these are
   the running-text colours .prose sets for the navy ground. */
.page .light .prose p, .page .light .prose ul, .page .light .prose ol{color:rgba(12,12,48,.74);}
.page .light .prose{font-weight:400;} /* 300 is too thin for navy-on-white at length */
.page .light .prose b, .page .light .prose strong{color:var(--navy);font-weight:600;}
.page .light .prose a, .page .light .measure a, .page .light .domain .doc-link a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px;}
.page .light .prose blockquote{background:rgba(12,12,48,.045);border-left-color:var(--yellow);color:var(--navy);}
.page .light .prose blockquote strong{color:var(--navy);}
.page .light .prose blockquote cite{color:rgba(12,12,48,.55);}
.page .light .shot{background:rgba(12,12,48,.04);border-color:rgba(12,12,48,.14);}
.page .light .shot:hover{border-color:rgba(12,12,48,.3);box-shadow:0 22px 44px rgba(12,12,48,.12);}
.page .light .shot .bar{background:rgba(12,12,48,.06);border-bottom-color:rgba(12,12,48,.14);}
.page .light .shot .bar span{color:rgba(12,12,48,.5);}
.page .light .shot-note, .page .light .article-meta{color:rgba(12,12,48,.55);}

/* A figure may break the reading measure: a benchmark chart at 70 characters wide is
   unreadable. It stays centred on the column and is capped by the viewport, so on a
   phone it is exactly as wide as the text. */
.page .prose.reading .wide-figure{width:min(54rem,calc(100vw - 48px));margin-left:50%;transform:translateX(-50%);}
.page .prose.reading .wide-figure .shot-note{max-width:none;}
/* A caption is the last thing in the figure, so running text after it needs the gap back. */
.page .prose.reading .wide-figure + p{margin-top:36px;}
/* .prose.reading sizes every p; a caption is not body text and must win that back. */
.page .prose.reading .shot-note{font-size:.9rem;line-height:1.6;margin-bottom:0;}

/* Article hero: the same sheet hero, with the standfirst and byline an article needs.
   A note carries no standfirst at all, only the title and the byline. */
.page .article-hero .hero-sub{margin-bottom:0;}
.page .article-hero .eyebrow a{text-decoration:none;}
.page .article-hero .eyebrow a:hover{text-decoration:underline;text-underline-offset:4px;}
.page .article-hero .article-meta{margin-top:22px;}

/* Case study blocks. A case is written in the sales portal and transcribed here, and
   these are the three blocks it carries that a note does not; the portal's CasePage
   names them the same way, so the two stay one-to-one.
   The fact strip closes the hero on the same 1240px frame as .split. A rule on each
   cell rather than a filled grid, so a row that wraps short leaves no empty block. */
.page .case-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 clamp(20px,2.4vw,36px);max-width:1240px;margin:clamp(40px,4.5vw,64px) auto 0;}
.page .case-facts > div{border-top:1px solid var(--line);padding:18px 0 6px;}
.page .case-facts dt{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow);margin-bottom:8px;}
.page .case-facts dd{margin:0;color:var(--white);font-size:.98rem;}
/* The engagement in numbers: the hero's right column, so the scale is read before the
   case is. Below 1024px the split stacks and the panel follows the standfirst. */
.page .article-hero .case-numbers{border-left:2px solid var(--yellow);padding:4px 0 4px clamp(24px,2.6vw,40px);}
.page .case-numbers dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;margin-top:22px;}
.page .case-numbers dt{font-family:var(--mono);font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:600;line-height:1.1;color:var(--white);}
.page .case-numbers dd{margin:8px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
/* Two columns leave "Millions" wider than its cell below 360px. */
@media (max-width:359px){.page .case-numbers dl{grid-template-columns:1fr;}}
/* The confidentiality note: a statement ABOUT the case, so quiet and set apart, and
   never styled like a pull quote. */
.page .prose.reading .case-note{margin-top:48px;padding-top:24px;border-top:1px solid rgba(12,12,48,.14);}
.page .prose.reading .case-note p{font-size:.9rem;line-height:1.6;font-style:italic;color:rgba(12,12,48,.62);margin-bottom:10px;}

/* Index list. Date and kind, title, standfirst, one rule between entries.
   The list carries its own top rule, so its section must not also use .rule-top and
   must not pad the two apart. */
.page .note-index{padding-top:clamp(40px,4.5vw,64px);}
.page .note-list{max-width:840px;border-top:1px solid var(--line);}
.page .note-list article{padding:clamp(32px,3.2vw,46px) 0;border-bottom:1px solid var(--line);}
.page .note-list .note-meta{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--yellow);margin-bottom:16px;}
.page .note-list h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:14px;}
/* base.css underlines any link in main that carries no class of its own. A headline
   is not running text, so it opts out and underlines on hover instead. */
.page .note-list h2 a{color:var(--white);text-decoration:none;transition:color .25s;}
.page .note-list h2 a:hover{color:var(--yellow);text-decoration:underline;text-underline-offset:6px;}
.page .note-list p{margin-bottom:18px;max-width:62ch;}
.page .note-list .note-more{font-family:var(--mono);font-size:.8rem;font-weight:500;letter-spacing:.1em;color:var(--yellow);}
.page .note-list .note-more:hover{text-decoration:underline;text-underline-offset:4px;}

/* Phones narrower than 380px: the two hero panels need less padding and narrower cells to fit. */
@media (max-width:380px){
  .page .ai-visual.profile, .page .ai-visual.frame{padding:22px 18px;}
  .page .ai-visual.frame .row{gap:10px;}
  .page .lvl-head b{width:18px;}
  .page .lvl-bar--scale i{width:18px;}
}