/* 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{
  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 .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;}

.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 .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;}
  .page .process-row--4{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .page .process-row--4{grid-template-columns:1fr;gap:48px;}
  .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 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{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;}
/* .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;}

/* 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;}