/* CHARUS body/UI typeface — project-local Inter variable webfont.
   Keep the family name project-specific so a locally installed copy of Inter
   cannot silently mask a missing deployment asset. */
/* CHARUS display typeface — embedded Outfit variable webfont (Latin).
   Optical weight is theme-compensated: 250 in light, 235 in dark. */
/* v538 preview transport note:
   The two v534 comments above are preserved verbatim as design/deployment
   history. For this single-file ChatGPT preview, font binaries are registered
   through the FontFace API because that transport renders reliably here.
   Production should use external WOFF2 files with normal @font-face rules so
   the fonts can be cached independently. */
:root{
  --bg:#F5F2EC;
  --bg2:#F1EEE7;
  --bg-rgb:245,242,236;
  --ink:#0F1011;
  --hair:#D8D1C8;
  --accent:#FF4A00;
  --copy:#3A3631; /* v554: Light Mode restored to original copy color */
  --muted:#AAA49D;
  --optical-weight-t:0;
  --headline-weight:calc(235 + 15 * var(--optical-weight-t));
  --body-copy-weight:calc(350 + 15 * var(--optical-weight-t));
  --body-copy-tracking:-.003em;
  --headline-grade-stroke:calc(.12px + .03px * var(--optical-weight-t));
  --body-grade-stroke:calc(.10px - .01px * var(--optical-weight-t));
}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0C0E10;
  --bg2:#13171B;
  --bg-rgb:12,14,16;
  --ink:#F4F0E9;
  --hair:#394148;
  --accent:#25C9FF;
  --copy:#D9D2CA; /* v554: Dark Mode body copy +3% toward white */
  --muted:#7E8891;
  --headline-weight:calc(235 + 15 * var(--optical-weight-t));
  --body-copy-weight:calc(350 + 15 * var(--optical-weight-t));
  --body-copy-tracking:-.003em;
  --headline-grade-stroke:0px;
  --body-grade-stroke:0px;
}
*{box-sizing:border-box}
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
html{scroll-behavior:auto}
body{
  margin:0;
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  background:var(--bg);
  color:var(--ink);
}
main{min-height:390vh}

/* Home owns the Hero claim and page visuals; persistent header presentation
   is supplied exclusively by the shared header stylesheets. */
html[data-theme="dark"] .hero-claim-image{
  filter:invert(1);
}
html[data-theme="dark"] .reference-structure-svg,
html[data-theme="dark"] .enabling-visual svg{
  filter:invert(1);
}
html[data-theme="dark"] .reference-structure-svg{
  mix-blend-mode:screen;
  opacity:.94;
}
html[data-theme="dark"] .enabling-visual svg{
  filter:none;
}

.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:6rem 2rem 4rem;
}
.hero-copy{
  position:fixed;
  z-index:44;
  top:0;
  left:0;
  width:0;
  margin:0;
  max-width:none;
  text-align:center;
  pointer-events:none;
  will-change:opacity,transform,left,top,width;
}
.hero-claim-image{
  display:block;
  width:100%;
  height:auto;
}
.hero h1{
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:.96;
}
.section h2{
  margin:0;
  font-family:"CHARUS Outfit","CHARUS Inter",Arial,Helvetica,sans-serif;
  font-weight:var(--headline-weight);
  line-height:1.02;
}
.accent{color:var(--accent)}

.section{
  min-height:103vh;
  padding:18vh 8vw 12vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(350px,.9fr);
  gap:7vw;
  align-items:center;
  border-top:1px solid var(--hair);
}
.section.alt{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.kicker{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.77rem;
  font-weight:700;
  margin-bottom:1.4rem;
}
.section h2{
  font-size:clamp(3rem,5.2vw,6rem);
  letter-spacing:-.045em;
  text-wrap:balance;
}
.challenge-section{
  position:relative;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.72fr);
  grid-template-rows:auto auto;
  column-gap:7vw;
  row-gap:2rem;
  align-items:start;
  align-content:center;
}
.challenge-title{
  grid-column:1;
  grid-row:1;
}
.challenge-copy{
  grid-column:1;
  grid-row:2;
}
.name-origin{
  position:absolute;
  left:8vw;
  bottom:clamp(18px,2.2vh,26px);
  z-index:3;
  margin:0;
  font-family:Charter,"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,serif;
  font-size:clamp(.72rem,.78vw,.84rem);
  line-height:1.3;
  letter-spacing:.008em;
  color:var(--muted);
  opacity:.78;
  white-space:nowrap;
}
.name-origin-word{
  font-style:italic;
  color:inherit;
}
.challenge-section h2{
  max-width:none;
  font-size:clamp(2.95rem,4.1vw,5rem);
  line-height:1.02;
  letter-spacing:-.045em;
}
.challenge-line{
  display:block;
}
.enabling-title .challenge-line{
  white-space:nowrap;
}
.challenge-line-product{
  white-space:nowrap;
}
/* v548 — keep the final A1 headline line intact.
   “for Transformation.” is always shorter than the already protected
   “Product Development” line, so allowing an internal wrap here only creates
   an accidental orphan (“for”) or a detached dot without buying usable width. */
.challenge-headline .challenge-line:last-child{
  white-space:nowrap;
}
.round-dot{
  display:inline-block;
  width:.15em;
  height:.15em;
  margin-left:.20em;
  border-radius:50%;
  background:var(--accent);
  color:transparent;
  overflow:hidden;
  line-height:0;
  vertical-align:-.015em;
}
/* Optical kerning for the English “Quality Delivery” ending: the y
   already creates extra visual air, so its brand dot sits fractionally closer. */
html[lang="en"] .enabling-title .round-dot{
  margin-left:.17em;
}
.challenge-section p{
  max-width:760px;
  margin-top:0;
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:clamp(1.03rem,1.45vw,1.32rem);
  line-height:1.58;
  letter-spacing:normal;
  color:var(--copy);
}
.value-close{
  font-family:inherit;
  font-size:1em;
  font-weight:400;
  letter-spacing:inherit;
}
.challenge-label{
  grid-column:2;
  grid-row:1;
  text-align:right;
  align-self:start;
}
.challenge-label .kicker{
  margin:0;
}
.challenge-diagram{
  grid-column:2;
  grid-row:1 / 3;
  align-self:center;
}
.section p{
  max-width:720px;
  font-size:clamp(1.03rem,1.45vw,1.32rem);
  line-height:1.58;
  color:var(--copy);
}
.diagram{
  min-height:410px;
  display:grid;
  place-items:center;
}
.diagram svg{width:100%;height:auto}



/* CONSTRAINED SYSTEMS — Reference Composition */
.challenge-label{
  z-index:3;
}
.challenge-diagram{
  position:relative;
  z-index:1;
  overflow:visible;
}
.reference-structure-frame{
  position:relative;
  width:min(100%,500px);
  aspect-ratio:900 / 640;
  margin-left:auto;
  transform:translate(-1.5%,0.6%);
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
}
.reference-structure-svg{
  display:block;
  width:100%;
  height:100%;
  opacity:.985;
  mix-blend-mode:multiply;
}


/* CONSTRAINED SYSTEMS — geometry is animated exclusively in JavaScript.
   CSS remains responsible only for rendering and accessibility states. */
.reference-structure-frame::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(var(--bg-rgb),.88) 0%,
    rgba(var(--bg-rgb),.18) 20%,
    rgba(var(--bg-rgb),0) 38%,
    rgba(var(--bg-rgb),0) 100%
  );
  pointer-events:none;
}
@media(max-width:1120px){
  .reference-structure-frame{
    width:min(100%,470px);
  }
}
@media(max-width:920px){
  .reference-structure-frame{
    width:min(100%,430px);
    margin:0 auto;
    transform:none;
  }
  .reference-structure-frame::after{
    display:none;
  }
}

/* ENABLING DISCIPLINES — mirrored relation to CONSTRAINED SYSTEMS */
.enabling-section{
  position:relative;
  grid-template-columns:minmax(350px,.9fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:start;
  align-content:center;
  row-gap:2rem;
}
.enabling-label{
  grid-column:1;
  grid-row:1;
  align-self:start;
  text-align:left;
  z-index:3;
}
.enabling-label .kicker{
  margin:0;
}
.enabling-visual{
  grid-column:1;
  grid-row:1 / 3;
  align-self:center;
  justify-self:center;
  width:min(100%,572px);
  transform:translate(6%,1.2%);
}
.enabling-system-diagram{
  overflow:visible;
}
.enabling-system-diagram :is(.flow-context-shape,.flow-context-axis,.flow-rail-glow,.flow-rail-core,.flow-node){
  vector-effect:non-scaling-stroke;
}
.enabling-system-diagram .flow-context-layer{
  pointer-events:none;
}
.enabling-system-diagram .flow-context-shape,
.enabling-system-diagram .flow-context-axis,
.enabling-system-diagram .flow-context-connector{
  fill:none;
  stroke:var(--hair);
  stroke-linecap:round;
  stroke-linejoin:round;
}
.enabling-system-diagram .flow-context-outer{
  stroke-width:1.02;
  opacity:.36;
}
.enabling-system-diagram .flow-context-inner{
  stroke-width:.86;
  opacity:.27;
}
.enabling-system-diagram .flow-context-axis{
  stroke-width:.78;
  stroke-dasharray:1.4 10;
  opacity:.16;
}
.enabling-system-diagram .flow-context-connector{
  stroke-width:.86;
  opacity:.22;
}
.enabling-system-diagram .flow-context-connector--quiet{
  stroke-width:.72;
  opacity:.13;
}
.enabling-system-diagram .flow-rail-glow,
.enabling-system-diagram .flow-rail-core{
  fill:none;
  stroke:var(--accent);
  stroke-linecap:round;
  stroke-linejoin:round;
}
.enabling-system-diagram .flow-rail-glow{
  stroke-width:8.4;
  opacity:.060;
  filter:url(#flowImpulseMidBlur);
}
.enabling-system-diagram .flow-rail-core{
  stroke-width:2.06;
}
.enabling-system-diagram .flow-wave-halo,
.enabling-system-diagram .flow-wave-core{
  fill:none;
  stroke:var(--accent);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  opacity:0;
}
.enabling-system-diagram .flow-wave-halo{
  stroke-width:4.6;
  opacity:.02;
  filter:url(#flowImpulseMidBlur);
}
.enabling-system-diagram .flow-wave-core{
  stroke-width:1.12;
  opacity:.12;
}
.enabling-system-diagram .flow-node{
  transition:none;
}
.enabling-system-diagram .flow-impulse{
  pointer-events:none;
}
.enabling-system-diagram .flow-impulse-line{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  opacity:0;
}
.enabling-system-diagram .flow-impulse-aura{
  stroke:url(#flowImpulseAuraGradient);
  stroke-width:8.25;
  filter:url(#flowImpulseWideBlur);
}
.enabling-system-diagram .flow-impulse-field{
  stroke:url(#flowImpulseFieldGradient);
  stroke-width:4.32;
  filter:url(#flowImpulseMidBlur);
}
.enabling-system-diagram .flow-impulse-bar{
  stroke:url(#flowImpulseBarGradient);
  stroke-width:3.38;
  filter:url(#flowImpulseCoreBlur);
}
.enabling-system-diagram .flow-impulse-core{
  stroke:url(#flowImpulseCoreGradient);
  stroke-width:1.50;
  filter:url(#flowImpulseCoreBlur);
}
.enabling-system-diagram .flow-node-ink{fill:var(--ink)}
.enabling-system-diagram .flow-node-copy{fill:var(--copy)}
.enabling-system-diagram .flow-node-muted{fill:var(--muted)}
.enabling-system-diagram .flow-node-accent{fill:var(--accent)}

.enabling-body p,
.enabling-body .enabling-list-lead,
.enabling-body .discipline-list{
  max-width:760px;
  margin-top:0;
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:clamp(1.03rem,1.45vw,1.32rem);
  line-height:1.58;
  letter-spacing:normal;
  color:var(--copy);
}
.enabling-body .enabling-list-lead{
  margin-bottom:.6rem;
}
.discipline-list{
  margin:.05rem 0 1.9rem 0;
  padding:0;
  list-style:none;
}
.discipline-list li{
  position:relative;
  margin:0 0 .22rem 0;
  padding-left:1.28em;
  font:inherit;
  line-height:inherit;
  color:inherit;
}
.discipline-list li::before{
  content:"–";
  position:absolute;
  left:0;
  top:0;
  color:var(--accent);
}



/* ABOUT CHARUS — section 4 */
.about-section{
  position:relative;
  grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr);
  column-gap:7vw;
  align-items:center;
  align-content:center;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
}
.about-portrait-wrap{
  grid-column:1;
  justify-self:start;
  width:min(100%,470px);
  position:relative;
  overflow:hidden;
}
.about-portrait-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid color-mix(in srgb,var(--hair) 72%,transparent);
  pointer-events:none;
}
.about-portrait{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:876 / 1155;
  object-fit:cover;
  object-position:center center;
}
.about-copy{
  grid-column:2;
  max-width:780px;
  align-self:center;
}
.about-copy .kicker{
  margin-bottom:2.1rem;
}
.about-copy h2{
  max-width:760px;
  margin:0;
  font-family:"CHARUS Outfit","CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:clamp(2rem,3.35vw,4rem);
  font-weight:var(--headline-weight);
  line-height:1.12;
  letter-spacing:-.035em;
  color:var(--ink);
  text-wrap:balance;
}
.about-body{
  max-width:730px;
  margin-top:2.35rem;
}
.about-body p{
  margin:0 0 1.25rem;
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:clamp(1rem,1.28vw,1.22rem);
  font-weight:400;
  line-height:1.58;
  letter-spacing:normal;
  color:var(--copy);
}
.about-body p:last-child{
  margin-bottom:0;
}
.about-signature-line{
  display:block;
}
.about-body .about-answer{
  margin-top:.12rem;
  margin-bottom:.35rem;
  font-family:"CHARUS Outfit","CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:clamp(1.22rem,1.7vw,1.62rem);
  font-weight:var(--headline-weight);
  line-height:1.32;
  letter-spacing:-.018em;
  color:var(--ink);
}

/* ABOUT CHARUS — desktop composition refinement */
@media(min-width:921px){
  .about-section{
    grid-template-columns:clamp(320px,20vw,380px) minmax(0,760px);
    justify-content:start;
    column-gap:clamp(4.5rem,6vw,7.5rem);
    align-items:start;
    align-content:center;
    padding-top:clamp(7.5rem,15vh,10rem);
    padding-bottom:clamp(5.5rem,11vh,8rem);
  }
  .about-portrait-wrap{
    width:100%;
    max-width:none;
    align-self:start;
  }
  .about-portrait{
    aspect-ratio:4 / 5;
    object-position:center 36%;
  }
  .about-copy{
    max-width:760px;
    align-self:start;
    padding-top:.15rem;
  }
  .about-copy .kicker{
    margin-bottom:1.7rem;
  }
  .about-copy h2{
    max-width:720px;
    font-size:clamp(2.55rem,3.15vw,4rem);
    line-height:1.07;
  }
  .about-body{
    max-width:700px;
    margin-top:2rem;
  }
}


/* WIDE / UWQHD COMPOSITION
   One shared outer width, one shared two-column grid and one shared gutter.
   Sections may alternate text and visual, but they use the same axes. Type
   scales remain untouched. */
@media(min-width:1600px){
  .section{
    --section-content-max:1960px;
    --section-side:max(8vw,calc((100vw - var(--section-content-max))/2));
    padding-left:var(--section-side);
    padding-right:var(--section-side);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(5.5rem,6.5vw,8.5rem);
  }

  .challenge-section,
  .culture-section,
  .enabling-section,
  .about-section{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }

  .challenge-diagram,
  .culture-visual{
    justify-self:end;
  }
  .enabling-visual,
  .about-portrait-wrap{
    justify-self:start;
  }

  .reference-structure-frame,
  .culture-visual{
    width:min(100%,610px);
  }
  .enabling-visual{
    width:min(100%,650px);
    transform:translate(2.5%,1.2%);
  }

  .name-origin,
  .culture-reference{
    left:var(--section-side);
  }

  .about-section{
    justify-content:stretch;
    column-gap:clamp(5.5rem,6.5vw,8.5rem);
  }
  .about-portrait-wrap{
    width:min(100%,480px);
    max-width:480px;
  }
  .about-copy{
    justify-self:start;
  }
  .about-copy,
  .about-copy h2,
  .about-body{
    max-width:760px;
  }
}

/* DESIGNING CULTURE — section 3 */
.culture-section{
  position:relative;
  grid-template-columns:minmax(0,1.18fr) minmax(300px,.72fr);
  grid-template-rows:auto auto;
  column-gap:7vw;
  row-gap:2rem;
  align-items:start;
  align-content:center;
}
.culture-copy{
  grid-column:1;
  grid-row:1 / 3;
  max-width:760px;
}
/* v549 — A3 must participate in the shared Outfit optical-weight system.
   The previous hard-coded 400 was a legacy override predating the self-hosted
   Outfit setup and made “Effectiveness is Adaptiveness.” visibly heavier than
   A1/A2, especially in dark mode and through the 520–640px fluid range. */
.culture-copy h2{
  max-width:none;
  font-size:clamp(2.95rem,4.1vw,5rem);
  line-height:1.02;
  letter-spacing:-.045em;
  font-weight:var(--headline-weight);
}
.culture-copy p{
  max-width:720px;
  margin:.95rem 0 0;
}
.culture-copy .culture-thesis{
  margin-top:2rem;
  font-style:italic;
}
.culture-copy .culture-closure{
  margin-top:1.08rem;
}
.culture-copy sup{
  margin-left:.08em;
  font-size:.58em;
  line-height:0;
  vertical-align:.55em;
}
.culture-copy .culture-thesis sup{
  color:var(--muted);
}
.culture-behaviour{
  white-space:nowrap;
}
.culture-reference{
  position:absolute;
  left:8vw;
  bottom:clamp(18px,2.2vh,26px);
  z-index:3;
  margin:0;
  display:block;
  font-family:Charter,"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,serif;
  font-size:clamp(.72rem,.78vw,.84rem);
  line-height:1.3;
  letter-spacing:.008em;
  color:var(--muted);
  opacity:.78;
  white-space:nowrap;
}
.culture-reference-mark{
  position:absolute;
  right:calc(100% + .34em);
  top:.02em;
  font-size:.96em;
  line-height:1.2;
}
.culture-reference-text{
  display:block;
  text-align:left;
}
.culture-reference a{
  color:inherit;
  text-decoration:none;
}
.culture-reference a:hover,
.culture-reference a:focus-visible{
  text-decoration:underline;
  text-underline-offset:.18em;
}
.culture-label{
  grid-column:2;
  grid-row:1;
  text-align:right;
  align-self:start;
  z-index:3;
}
.culture-label .kicker{
  margin:0;
}
.culture-visual{
  grid-column:2;
  grid-row:1 / 3;
  align-self:center;
  justify-self:end;
  width:min(100%,500px);
  aspect-ratio:900 / 640;
  min-height:0;
  position:relative;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
}
.culture-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(var(--bg-rgb),.88) 0%,
    rgba(var(--bg-rgb),.18) 20%,
    rgba(var(--bg-rgb),0) 38%,
    rgba(var(--bg-rgb),0) 100%
  );
  pointer-events:none;
}
.culture-visual .reference-structure-frame{
  transform-origin:50% 50%;
  transform:translate(-1.5%,-1.3%) scale(1.46);
  overflow:visible;
}
.culture-visual .reference-structure-frame::after{
  display:none;
}
@media(min-width:921px){
  .culture-visual{
    align-self:start;
    margin-top:var(--culture-viewport-offset-y,0px);
  }
}

@media(max-width:920px){
  .enabling-visual{
    width:min(100%,560px);
    transform:none;
  }
}

@media(max-width:1120px){
  .challenge-section h2,
  .culture-copy h2{
    font-size:clamp(2.45rem,4.8vw,3.9rem);
  }
}
@media(max-width:920px){
  /* Chromium changes the visual viewport while its address bar expands/collapses.
     Keep the Home Hero on the stable small viewport; shared header geometry is
     owned by the shared header stylesheets and Home JS adapter. */
  .hero{min-height:100svh}
  .section{grid-template-columns:1fr;padding-top:19vh}
  .challenge-section{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    row-gap:1.4rem;
    align-content:start;
    /* Keep the first transition independent from the dynamic viewport height.
       The live header shield reveals it directly beneath the actual wordmark. */
    padding-top:14px;
  }
  .challenge-label{
    grid-column:1;
    grid-row:1;
    text-align:left;
    margin-bottom:0;
  }
  .challenge-title{
    grid-column:1;
    grid-row:2;
  }
  .challenge-copy{
    grid-column:1;
    grid-row:3;
  }
  .challenge-section h2,
  .culture-copy h2{
    font-size:clamp(2.2rem,8.6vw,3.4rem);
    line-height:1.01;
  }
  .challenge-diagram{
    grid-column:1;
    grid-row:4;
  }
  .diagram{min-height:290px}
  .enabling-section{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    row-gap:1.4rem;
    align-content:start;
  }
  .enabling-label{
    grid-column:1;
    grid-row:1;
  }
  .enabling-title{
    grid-column:1;
    grid-row:2;
    text-align:left;
  }
  .enabling-title h2{
    font-size:clamp(2.7rem,10vw,4.2rem);
  }
  .enabling-body{
    grid-column:1;
    grid-row:3;
    padding-left:0;
    text-align:left;
  }
  .enabling-visual{
    grid-column:1;
    grid-row:4;
  }

  .culture-section{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    row-gap:1.4rem;
    align-content:start;
  }
  .culture-copy{
    grid-column:1;
    grid-row:1;
  }
  .culture-label{
    grid-column:1;
    grid-row:2;
    text-align:left;
  }
  .culture-reference{
    position:relative;
    left:auto;
    bottom:auto;
    grid-column:1;
    grid-row:4;
    white-space:normal;
    margin-top:.15rem;
  }
  .culture-visual{
    grid-column:1;
    grid-row:3;
    width:min(100%,560px);
    min-height:300px;
    justify-self:center;
  }

  .about-section{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    row-gap:2.7rem;
    align-content:start;
  }
  .about-portrait-wrap{
    grid-column:1;
    grid-row:1;
    width:min(82vw,410px);
    justify-self:start;
  }
  .about-copy{
    grid-column:1;
    grid-row:2;
  }
  .about-copy .kicker{
    margin-bottom:1.35rem;
  }
  .about-copy h2{
    font-size:clamp(1.8rem,7.8vw,2.8rem);
    line-height:1.12;
  }
  .about-body{
    margin-top:1.75rem;
  }
  .about-body p{
    font-size:clamp(1rem,4.5vw,1.16rem);
    line-height:1.55;
  }
  .about-body .about-answer{
    font-size:clamp(1.18rem,5.4vw,1.48rem);
    line-height:1.3;
  }
}

@media(prefers-reduced-motion:reduce){
  .reference-structure-svg .system-motion{
    animation:none !important;
    transform:none !important;
  }
}

/* Geometry-driven rendering: no group transforms or CSS motion. */
.reference-structure-svg{
  shape-rendering:geometricPrecision;
}
.reference-structure-svg .system-motion{
  transform:none;
  animation:none;
}
.reference-structure-svg--projected :is(.secondary-nodes,.primary-nodes,.bridge-nodes) circle{
  stroke:none;
  vector-effect:non-scaling-stroke;
}


/* MIRRORED DESKTOP ALIGNMENT
   Only the large headings in right-hand text columns are right-aligned.
   Supporting copy and kickers keep their reading axis. The section-two
   visual starts flush at the left edge of its visual column. */
@media(min-width:921px){
  .enabling-title h2,
  .about-copy h2{
    text-align:right;
    margin-left:auto;
  }
  .about-copy .kicker{
    text-align:left;
  }
  .enabling-visual{
    justify-self:start;
    transform:translate(0,1.2%);
  }
}


/* SECTION 4 — mirror the established right-hand text composition.
   The kicker belongs to the visual column, while title and body share the
   right-hand reading column. Type sizes remain unchanged. */
.about-label{
  grid-column:1;
  grid-row:1;
  align-self:start;
  text-align:left;
  z-index:3;
}
.about-label .kicker{
  margin:0;
}

@media(min-width:921px){
  .enabling-visual{
    /* The SVG itself carries 70 viewBox units of empty left inset.
       Compensate that inset so the visible diagram, not merely its box,
       starts on the shared left axis. */
    transform:translate(-11.3%,1.2%);
  }

  .about-section{
    grid-template-columns:minmax(350px,.9fr) minmax(0,1fr);
    grid-template-rows:1fr;
    column-gap:7vw;
    align-items:center;
    align-content:center;
  }
  .about-label{
    grid-column:1;
    grid-row:1;
    align-self:start;
  }
  .about-portrait-wrap{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    align-self:center;
    width:min(100%,470px);
    transform:translateY(2.9rem);
  }
  .about-copy{
    grid-column:2;
    grid-row:1;
    align-self:center;
    max-width:780px;
    padding-top:0;
  }
}

@media(min-width:1600px){
  .about-section{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
}

@media(max-width:920px){
  .about-section{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
  }
  .about-label{
    grid-column:1;
    grid-row:1;
  }
  .about-portrait-wrap{
    grid-column:1;
    grid-row:2;
    transform:none;
  }
  .about-copy{
    grid-column:1;
    grid-row:3;
  }
}


/* ================================================================
   UNIFIED SECTION SYSTEM — v413
   One desktop grid, one gutter, one text measure and one diagram slot.
   Sections alternate content direction without redefining the geometry.
   Existing typography is intentionally untouched.
   ================================================================ */
@media (min-width:921px){
  .section{
    --section-content-max:1960px;
    --section-side:max(8vw,calc((100vw - var(--section-content-max))/2));
    --section-gutter:clamp(5.5rem,6.5vw,8.5rem);
    --section-text-max:760px;
    --section-body-max:700px;
    --section-visual-max:610px;

    padding-left:var(--section-side);
    padding-right:var(--section-side);
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:var(--section-gutter);
    align-content:center;
  }

  /* Shared text measures and axes. */
  .challenge-title,
  .culture-copy{
    width:min(100%,var(--section-text-max));
    max-width:var(--section-text-max);
    justify-self:start;
  }

  .enabling-title,
  .about-copy{
    width:min(100%,var(--section-text-max));
    max-width:var(--section-text-max);
    justify-self:end;
  }

  /* The body measure is shared across all sections. It is anchored to the
     outside edge of its text column: left in sections 1/3, right in 2/4. */
  .challenge-copy{
    width:min(100%,var(--section-body-max));
    max-width:var(--section-body-max);
    justify-self:start;
  }

  .culture-copy p{
    max-width:var(--section-body-max);
  }

  .enabling-body{
    width:min(100%,var(--section-body-max));
    max-width:var(--section-body-max);
    justify-self:end;
  }

  .enabling-title h2,
  .about-copy h2{
    width:100%;
    max-width:100%;
    margin-left:0;
    text-align:right;
  }

  .enabling-body,
  .about-body{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }

  /* Shared diagram slot. The visible section-one diagram had previously
     collapsed to its min-content width; all three diagrams now occupy the
     same 610px envelope before their own SVG geometry is rendered. */
  .challenge-diagram,
  .culture-visual,
  .enabling-visual{
    width:min(100%,var(--section-visual-max));
    max-width:var(--section-visual-max);
  }

  .challenge-diagram,
  .culture-visual{
    justify-self:end;
  }

  .enabling-visual{
    justify-self:start;
    transform:translate(-11.3%,1.2%);
  }

  .challenge-diagram .reference-structure-frame{
    width:100%;
    max-width:none;
  }

  .culture-visual{
    min-height:0;
  }

  /* Kickers use the same visual-column envelopes as their media. */
  .challenge-label,
  .culture-label{
    width:min(100%,var(--section-visual-max));
    justify-self:end;
  }

  .enabling-label,
  .about-label{
    width:min(100%,var(--section-visual-max));
    justify-self:start;
  }

  /* Section 2: title and body share one right-hand text box. */
  .enabling-section{
    grid-template-rows:auto auto;
  }
  .enabling-title{
    grid-column:2;
    grid-row:1;
  }
  .enabling-body{
    grid-column:2;
    grid-row:2;
  }

  /* Section 3 footnotes belong to the same left axis as the section copy. */
  .culture-reference{
    left:var(--section-side);
    max-width:var(--section-body-max);
  }

  /* Section 4 follows the same mirrored pattern as section 2:
     kicker + portrait on the left, title + body on the right. */
  .about-section{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:var(--section-gutter);
    row-gap:1.55rem;
    align-items:start;
    align-content:center;
    padding-top:18vh;
    padding-bottom:12vh;
  }

  .about-label{
    grid-column:1;
    grid-row:1;
    align-self:end;
  }

  .about-portrait-wrap{
    grid-column:1;
    grid-row:2;
    justify-self:start;
    align-self:start;
    width:min(100%,470px);
    max-width:470px;
    transform:none;
  }

  .about-copy{
    grid-column:2;
    grid-row:1 / 3;
    align-self:center;
    padding-top:0;
  }

  .about-body{
    width:min(100%,var(--section-body-max));
    max-width:var(--section-body-max);
    margin-left:auto;
    margin-right:0;
  }
}


/* ================================================================
   EQUIVALENT VISUAL BOXES — v414
   Sections 1–3 share one identical outer diagram envelope. Geometry,
   scale and optical positioning remain individual inside that envelope.
   ================================================================ */
@media (min-width:921px){
  .section{
    --section-visual-ratio:900 / 640;
  }

  .challenge-diagram,
  .enabling-visual,
  .culture-visual{
    width:min(100%,var(--section-visual-max));
    max-width:var(--section-visual-max);
    aspect-ratio:var(--section-visual-ratio);
    min-height:0;
    height:auto;
    align-self:center;
    margin-top:0;
    transform:none;
  }

  /* Mirrored placement on the same outer column axes. */
  .challenge-diagram,
  .culture-visual{
    justify-self:end;
  }
  .enabling-visual{
    justify-self:start;
  }

  /* Section-specific optical adjustment belongs to the artwork, never to
     the shared outer box. */
  .enabling-visual .enabling-system-diagram{
    transform:translate(-11.3%,1.2%);
    transform-origin:50% 50%;
  }
}


/* ================================================================
   SECTION SURFACE + VERTICAL VISUAL ALIGNMENT — v415
   Sections 1–3 share one continuous surface. Their identical outer visual
   boxes align to the bottom of the regular text composition; section-three
   references remain outside that alignment because they are positioned as
   footnotes below the composition.
   ================================================================ */
.challenge-section,
.enabling-section,
.culture-section{
  background:var(--bg);
}

@media (min-width:921px){
  .challenge-diagram,
  .enabling-visual,
  .culture-visual{
    align-self:end;
  }
}



/* ================================================================
   SECTION SURFACE SYSTEM — v417
   Odd and even content sections alternate by perceived luminance in both
   themes. The compound selectors intentionally match the specificity of
   legacy rules such as `.section.alt`, and background-image is cleared
   explicitly so no older gradient can survive the cascade.
   ================================================================ */
:root{
  --section-surface-odd:#F1EEE7;
  --section-surface-even:#F5F2EC;
}
html[data-theme="dark"]{
  --section-surface-odd:#0C0E10;
  --section-surface-even:#13171B;
}

.section.challenge-section,
.section.culture-section{
  background-color:var(--section-surface-odd);
  background-image:none;
}

.section.enabling-section,
.section.about-section{
  background-color:var(--section-surface-even);
  background-image:none;
}


/* SECTION 4 TITLE + INTRO TUNING — v424 */
.about-intro-line{
  display:inline;
}
.about-intro-line + .about-intro-line::before{
  content:" ";
}
@media (min-width:921px){
  .about-copy h2{
    font-size:clamp(2.85rem,3.55vw,4.6rem);
  }
}
@media (min-width:1480px){
  .about-intro-line{
    display:block;
    white-space:nowrap;
  }
  .about-intro-line + .about-intro-line::before{
    content:none;
  }
}

/* SECTION 4 INTRO + SIGNATURE FIX — v425
   Preserve the two authored intro lines on desktop widths. The break is
   content-driven rather than dependent on the UWQHD-only breakpoint. */
@media (min-width:1280px){
  .about-intro-line{
    display:block;
    white-space:nowrap;
  }
  .about-intro-line + .about-intro-line::before{
    content:none;
  }
}


/* ================================================================
   SECTION 4 KICKER / TITLE TOP ALIGNMENT — v429
   Section 4 now follows the same desktop alignment rule as sections 1–3:
   the kicker and the title start at the same grid-area top. Font metrics
   make the small kicker appear optically just above the title, consistently.
   ================================================================ */
@media (min-width:921px){
  .about-label,
  .about-copy{
    align-self:start;
  }
}


/* ================================================================
   UNIFIED PAGE SURFACE — v430
   Hero and all four content sections use the same flat theme surface.
   No section alternation and no section-level gradients remain.
   ================================================================ */
:root{
  --section-surface-odd:var(--bg);
  --section-surface-even:var(--bg);
}
.hero,
.section.challenge-section,
.section.enabling-section,
.section.culture-section,
.section.about-section{
  background-color:var(--bg);
  background-image:none;
}


/* ================================================================
   UNIFIED DARK SURFACE — v453
   The dark-theme section variables previously retained the older odd/even
   values because the html[data-theme="dark"] selector outranked :root.
   Keep every Home section on the same theme surface.
   ================================================================ */
html[data-theme="dark"]{
  --section-surface-odd:var(--bg);
  --section-surface-even:var(--bg);
}

/* ================================================================
   SECTION 4 CONTACT CTA — v432
   Reuses the quiet pill-button language from the Contact page. The CTA
   now follows the two-line founder signature on the same left text axis.
   ================================================================ */
.about-closing-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  row-gap:1.1rem;
  margin-top:0;
}
.about-closing-row .about-signature{
  margin:0;
}
.about-contact-action{
  display:inline-flex;
  align-items:baseline;
  margin-top:.15rem;
  padding:0;
  border:0;
  background:transparent;
  color:var(--copy);
  font-family:"CHARUS Inter",Arial,Helvetica,sans-serif;
  font-size:clamp(1rem,1.28vw,1.22rem);
  font-weight:400;
  line-height:1.58;
  letter-spacing:normal;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:color .18s ease,transform .18s ease;
}
.about-contact-action::after{
  content:"→";
  display:inline-block;
  width:0;
  margin-left:0;
  overflow:hidden;
  color:var(--accent);
  font-size:1em;
  line-height:1;
  opacity:0;
  transform:translateX(-.18rem);
  transition:width .18s ease,margin-left .18s ease,opacity .18s ease,transform .18s ease;
}
.about-contact-action:hover,
.about-contact-action:focus-visible{
  color:var(--ink);
}
.about-contact-action:hover::after,
.about-contact-action:focus-visible::after{
  width:1.15em;
  margin-left:.42rem;
  opacity:1;
  transform:translateX(0);
}
.about-contact-action:active{
  transform:translateY(.5px);
}
.about-contact-action:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}
@media(max-width:920px){
  .about-closing-row{
    row-gap:.95rem;
  }
}

/* Keep the Lean Sherpas affiliation together as one typographic unit. */
.about-no-break{
  white-space:nowrap;
}

/* SECTION 4 AFFILIATION LINE — v461
   Starting from v459, tighten the complete first affiliation line by an additional 0.05px. */
.about-affiliation-line,
.about-affiliation-line *{
  letter-spacing:-0.15px;
}

/* SECTION 4 AFFILIATION LINE — v463
   Preserve the complete first affiliation sentence on one line at desktop widths,
   matching the authored no-wrap treatment used by the A4 intro lines. */
@media (min-width:1280px){
  .about-affiliation-line{
    white-space:nowrap;
  }
}

/* SECTION 4 AFFILIATION SPACING — v455
   Tighten only the spaces between words; preserve normal glyph spacing. */
.about-affiliation-tight{
  letter-spacing:normal;
  word-spacing:-0.5px;
}

/* Pull only the space between “LeSS,” and “agile” in by an additional 0.5px. */
.about-affiliation-extra-tight{
  word-spacing:-1px;
}

/* Pull punctuation 0.25px closer to its preceding word without changing glyph spacing. */
.about-affiliation-punctuation{
  display:inline-block;
  margin-left:-0.25px;
}


/* SECTION 4 PORTRAIT CENTERING — v447
   Centre the portrait vertically in the complete left-hand field on desktop.
   It spans both section rows, while the kicker remains positioned at the top. */
@media (min-width:921px){
  .about-portrait-wrap{
    grid-row:1 / 3;
    align-self:center;
  }
}



/* ================================================================
   WIDE-SCREEN SECTION COMPACTION — v449
   On wide displays, keep the alternating two-column compositions as a
   coherent centred pair instead of stretching both fields across the full
   viewport. This reduces the empty space between copy and visual in A1–A4.
   ================================================================ */
@media (min-width:1600px){
  .section{
    --section-gutter:clamp(3rem,4vw,5rem);
    padding-left:3vw;
    padding-right:3vw;
    column-gap:var(--section-gutter);
    justify-content:center;
  }

  .challenge-section,
  .culture-section{
    grid-template-columns:minmax(0,760px) minmax(0,610px);
  }

  .enabling-section,
  .about-section{
    grid-template-columns:minmax(0,610px) minmax(0,760px);
  }

  /* WIDE-SCREEN FOOTNOTES — v450
     Align both section footnotes with the left edge of the centred
     two-column composition instead of the viewport padding. */
  .name-origin,
  .culture-reference{
    /* The name-origin sits in .hero, outside .section, so it cannot inherit
       --section-gutter. Use the same explicit wide-screen gutter expression
       for both footnotes to anchor them to the compact composition's left edge. */
    left:max(3vw,calc((100vw - (1370px + clamp(3rem,4vw,5rem)))/2)) !important;
    right:auto !important;
    width:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
    transform:none !important;
    text-align:left !important;
  }
}

/* SECTION 4 TEXT MEASURE — v464
   Reset A4 to the shared body width; the affiliation line now handles its own nowrap behaviour. */
@media (min-width:921px){
  .about-body{
    width:min(100%,var(--section-body-max));
    max-width:var(--section-body-max);
  }
}

/* ================================================================
   MOBILE SECTION RHYTHM — v522
   Use one stable top inset for all content sections instead of mixing the
   first section's compact offset with viewport-height padding in A2–A4.
   In A3 the kicker belongs at the section entrance, before the title/copy,
   matching the reading hierarchy of the other sections.
   ================================================================ */
@media(max-width:920px){
  .section.challenge-section,
  .section.enabling-section,
  .section.culture-section,
  .section.about-section{
    /* Restore roughly the generous A2 breathing room, but anchor it to the
       stable small viewport so browser-chrome changes do not move the rhythm. */
    padding-top:clamp(6rem,19svh,10rem);
  }

  .culture-section{
    grid-template-rows:auto auto auto;
  }
  .culture-label{
    grid-column:1;
    grid-row:1;
    margin-bottom:0;
    text-align:left;
  }
  .culture-copy{
    grid-column:1;
    grid-row:2;
  }
  .culture-visual{
    grid-column:1;
    grid-row:3;
  }

  /* Treat the Larman / Conway references like the chārus origin note: they
     belong to the section boundary, not inside the content flow. */
  .culture-reference{
    position:absolute;
    left:8vw;
    right:auto;
    bottom:clamp(18px,2.2svh,26px);
    grid-column:auto;
    grid-row:auto;
    width:auto;
    max-width:calc(100% - 16vw);
    margin:0;
    white-space:normal;
  }

  /* Match the CTA to the mobile A4 body copy. The desktop clamp otherwise
     bottoms out at 1rem while the body grows with the mobile viewport. */
  .about-contact-action{
    position:relative;
    font-size:clamp(1rem,4.5vw,1.16rem);
    line-height:1.55;
  }
  .about-contact-action::before{
    content:"";
    position:absolute;
    left:-.35rem;
    right:-.35rem;
    top:50%;
    height:44px;
    transform:translateY(-50%);
    background:transparent;
    pointer-events:auto;
  }

  /* Touch has no hover state, so keep the directional affordance visible
     instead of hiding the arrow until interaction. This makes the CTA clearly
     actionable without making it louder or larger than the surrounding copy. */
  .about-contact-action::after{
    width:1.15em;
    margin-left:.42rem;
    opacity:.78;
    transform:translateX(0);
  }
  .about-contact-action:active::after{
    opacity:1;
    transform:translateX(.12rem);
  }
}

/* BODY COPY OPTICAL WEIGHT + TRACKING — v540 / v541
   Dark mode remains at the successful 350 body / 235 headline pairing. The
   light surface needs slightly more optical substance, so body copy moves to
   390 and Outfit headlines to 275. v541 reduced the deliberately tiny negative
   tracking from -.005em to -.003em: enough to retain some of the compactness
   of the earlier system-font render without making the paragraphs feel set. */
.section p,
.discipline-list,
.about-contact-action{
  font-weight:var(--body-copy-weight);
  letter-spacing:var(--body-copy-tracking);
}
.value-close{font-weight:inherit}

/* FLUID OPTICAL WEIGHT COMPENSATION — v547
   The stronger small-screen weights interpolate only while the headline itself
   is still shrinking: from 640px down to 520px. At and above 640px the regular
   weights remain fixed (Light 275/390, Dark 235/350); at and below 520px they
   settle at the small-screen endpoints (Light 300/400, Dark 250/365).
   v546 attempted to derive a font-weight number directly from vw inside calc(),
   which mixes a unitless number with a length and therefore invalidated the
   declaration in the preview browser. v547 instead lets JS expose a unitless
   0..1 progress variable; all CSS weight arithmetic is consequently valid.
   The established -.003em body tracking, spacing, line-height and sizes remain
   unchanged. */

/* v556 — kicker tracking follows the actual section-layout breakpoint.
   One-column (<=920px): tighter .18em for a more cohesive compact label.
   Two-column (>=921px): wider .23em to give the relocated kicker more
   architectural presence in the open visual column. */
@media (min-width:921px){
  .kicker{
    letter-spacing:.23em;
  }
}


/* A1 INDIVIDUAL LINE RHYTHM — v571
   Refined from v570 after direct visual comparison:
   - line 2 sits 2px higher: “Complex / Product Development” reopens by 1px;
   - line 3 sits 3px higher: “cannot pause” moves 1px closer to line 2;
   - line 4 sits 1px lower: 2px more air is added below “cannot pause”.
   The global headline leading and the headline's document-flow footprint stay
   unchanged, so copy/diagram spacing below A1 remains exactly as before. */
.challenge-headline .challenge-line:nth-child(2){
  position:relative;
  top:-2px;
}
.challenge-headline .challenge-line:nth-child(3){
  position:relative;
  top:-3px;
}
.challenge-headline .challenge-line:nth-child(4){
  position:relative;
  top:1px;
}


/* A1 MICRO-RHYTHM — v572
   Based on v571. Increase only the gap between “Complex” and
   “Product Development” by 1 physical CSS pixel. Moving line 1 upward keeps
   all following inter-line relationships and the headline-to-copy spacing
   exactly as established in v571. */
.challenge-headline .challenge-line:nth-child(1){
  position:relative;
  top:-1px;
}


/* A2 MICRO-RHYTHM — v573
   Based on v572. Add exactly 1 physical CSS pixel of space between the
   second A2 line (“demand”) and the third (“Quality Delivery.”).
   Using margin-top on line 3 changes only that inter-line gap; it does not
   alter the relationship between “Quality Products” and “demand”. */
.enabling-title .challenge-line:nth-child(3){
  margin-top:1px;
}


/* THEME-METRIC LOCK + GRADE EMULATION — v577
   Deliberately based on v573, discarding the A4-only experiments from
   v574–v576.

   Goal: changing Light/Dark must never alter typography geometry or line
   wrapping. Inter and Outfit expose a `wght` axis, not a true `GRAD` axis;
   their advance widths therefore change when weight changes. Light Mode now
   uses the exact same real weight curves as Dark Mode:
     Outfit headlines: 235 -> 250
     Inter body copy:  350 -> 365
   so both themes have identical font metrics at every responsive point.

   To retain the slightly more substantial Light Mode appearance without
   affecting layout, Light Mode receives an intentionally tiny paint-only
   text stroke. `-webkit-text-stroke` changes rasterized stroke thickness but
   does not participate in inline layout, advance widths or line breaking.
   Dark Mode sets the grade stroke to zero.

   This applies to every text family that previously used the theme-dependent
   optical-weight variables. Navigation, kickers and other controls already
   shared the same theme metrics and are left untouched. */
.section h2,
.about-body .about-answer{
  -webkit-text-stroke:var(--headline-grade-stroke) currentColor;
}
.section p,
.discipline-list,
.about-contact-action{
  -webkit-text-stroke:var(--body-grade-stroke) currentColor;
}


/* SINGLE-COLUMN BODY MEASURE — v578
   Based on v577. In the one-column layout, reduce only the body-copy measure
   to 85% of the available section width while preserving the established
   left text axis. Headlines, kickers, diagrams and the two-column layout are
   untouched. This applies consistently to the body copy in A1–A4. */
@media(max-width:920px){
  .challenge-copy,
  .enabling-body,
  .about-body{
    width:85%;
    max-width:85%;
    margin-left:0;
    margin-right:auto;
  }

  .culture-copy > p{
    width:85%;
    max-width:85%;
  }
}