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

.header-shield{
  position:fixed;
  z-index:34;
  inset:0 0 auto 0;
  height:158px;
  --shield-surface:var(--bg);
  background:linear-gradient(
    to bottom,
    var(--shield-surface) 0,
    var(--shield-surface) 132px,
    color-mix(in srgb,var(--shield-surface) 94%,transparent) 138px,
    color-mix(in srgb,var(--shield-surface) 58%,transparent) 149px,
    transparent 158px
  );
  opacity:0;
  pointer-events:none;
  will-change:opacity;
}

.logo-wrap,
.logo-beam-wrap{
  position:fixed;
  top:11vh;
  left:50%;
  width:min(76vw,930px);
  transform:translateX(-50%);
  transform-origin:left top;
  pointer-events:none;
  will-change:left,top,width,transform,clip-path,opacity;
}
.logo-beam-wrap{
  z-index:38;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  -webkit-clip-path:inset(0 100% 0 0);
}
.logo-beam-preview{
  z-index:37;
  opacity:.43;
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
}
.logo-wrap{z-index:40;pointer-events:none}
.logo-home-link{
  display:block;
  width:100%;
  line-height:0;
  cursor:default;
  pointer-events:none;
  border-radius:2px;
}
.logo-home-link.is-compact-home{
  cursor:pointer;
  pointer-events:auto;
}
.logo-home-link:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:5px;
}
.logo-wrap img,
.logo-beam-wrap img{
  display:block;
  width:100%;
  height:auto;
}

/* DARK MODE — preserve white energy cores while remapping the CHARUS accent. */
html[data-theme="dark"] .logo-wrap img,
html[data-theme="dark"] .logo-beam-wrap img,
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;
}

/* Orange family -> cyan family in the top energy rail and moving impulse. */
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) stop[stop-color="#FF4A00" i],
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) stop[stop-color="#ff5a18" i]{stop-color:#25C9FF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) stop[stop-color="#FF5A12" i],
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) stop[stop-color="#FF5920" i]{stop-color:#2FCFFF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) stop[stop-color="#FF6A20" i]{stop-color:#3BD3FF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) stop[stop-color="#FF7B2D" i]{stop-color:#58DAFF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) stop[stop-color="#FF8E4E" i]{stop-color:#78E1FF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) stop[stop-color="#FFB777" i]{stop-color:#ACEFFF}

html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [stroke="#FF4A00" i],
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [stroke="#ff5a18" i]{stroke:#25C9FF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [fill="#FF4A00" i],
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [fill="#ff5a18" i]{fill:#25C9FF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [stroke="#FF5A12" i],
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [stroke="#FF5920" i]{stroke:#2FCFFF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [fill="#FF5A12" i],
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [fill="#FF5920" i]{fill:#2FCFFF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [stroke="#FF6A20" i]{stroke:#3BD3FF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [fill="#FF6A20" i]{fill:#3BD3FF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [stroke="#FF7B2D" i]{stroke:#58DAFF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [fill="#FF7B2D" i]{fill:#58DAFF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [stroke="#FF8E4E" i]{stroke:#78E1FF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [fill="#FF8E4E" i]{fill:#78E1FF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [stroke="#FFB777" i]{stroke:#ACEFFF}
html[data-theme="dark"] :is(.energy-layer,.travel-beam-layer,.pulse-layer) [fill="#FFB777" i]{fill:#ACEFFF}


.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;
}
.orange{color:var(--orange)}

.energy-layer{
  position:fixed;
  z-index:35;
  inset:0 0 auto 0;
  height:100vh;
  pointer-events:none;
}
.energy-layer svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.travel-beam-layer{
  position:fixed;
  z-index:39; /* below glyphs */
  inset:0 0 auto 0;
  height:100vh;
  pointer-events:none;
  mix-blend-mode:normal;
}
.travel-beam-layer svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.pulse-layer{
  position:fixed;
  z-index:41; /* above glyphs */
  inset:0 0 auto 0;
  height:100vh;
  pointer-events:none;
  mix-blend-mode:normal;
}
.pulse-layer svg{
  width:100%;
  height:100%;
  overflow:visible;
}

.nav{
  position:fixed;
  z-index:45;
  /* Balance the language slot optically between Contact and the visible
     theme-control circle. The whole desktop group moves right while all
     internal navigation gaps remain unchanged. */
  right:3.79rem;
  top:24px;
  min-height:1.72rem;
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding-right:0;
  font-size:.88rem;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.nav__links,
.nav__mobile-actions{
  display:flex;
  align-items:center;
}
.nav__links{
  gap:2rem;
}
.nav__mobile-actions{
  position:relative;
  /* On desktop the toggle is fixed independently in the corner, so its
     wrapper must not reserve a second invisible block of space. */
  width:0;
  min-width:0;
  justify-content:flex-end;
  gap:0;
}
.language-switch{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:1.7rem;
  min-width:1.7rem;
  margin-left:1.18rem;
  padding:.2rem 0;
  border:0;
  background:transparent;
  color:color-mix(in srgb,var(--ink) 48%,var(--bg));
  font:inherit;
  font-size:.63rem;
  font-weight:400;
  letter-spacing:.075em;
  line-height:1;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  cursor:default;
  will-change:opacity,transform;
}
.language-switch__option{
  display:inline-block;
  padding:0;
  color:inherit;
  transition:color .22s ease,opacity .22s ease,transform .28s cubic-bezier(.22,.61,.36,1);
}
.language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 90%,var(--bg));
  font-weight:500;
  -webkit-text-stroke:.08px currentColor;
  paint-order:stroke fill;
}
.language-switch__option[aria-disabled="true"]{
  position:absolute;
  left:1.92rem;
  top:50%;
  color:color-mix(in srgb,var(--ink) 76%,var(--bg));
  opacity:0;
  transform:translate(-.28rem,-50%);
  pointer-events:none;
}
.language-switch__divider{display:none}
.language-switch:is(:hover,:focus-visible) .language-switch__option[aria-current="true"],
.language-switch:focus-within .language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 48%,var(--bg));
}
.language-switch:is(:hover,:focus-visible) .language-switch__option[aria-disabled="true"],
.language-switch:focus-within .language-switch__option[aria-disabled="true"]{
  color:var(--orange);
  opacity:1;
  transform:translate(0,-50%);
}
.language-switch:focus-visible{
  outline:1px solid color-mix(in srgb,var(--orange) 52%,transparent);
  outline-offset:.32rem;
}
.mobile-language-switch{
  display:none;
}
.nav-link{
  position:relative;
  display:inline-block;
  padding:.16rem 0 .3rem;
  color:inherit;
  text-decoration:none;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  will-change:opacity,transform;
  transition:color .22s ease,transform .22s ease;
}
.beam-reactive-label{
  display:inline-flex;
  align-items:baseline;
  gap:0;
}
.beam-char{
  display:inline-block;
  color:inherit;
  opacity:1;
  filter:none;
  text-shadow:none;
  transform:translateY(0);
  transition:opacity .12s linear,filter .12s linear,text-shadow .12s linear,transform .12s linear;
  will-change:opacity,filter,text-shadow,transform;
}
.nav-link::after{
  content:none;
}
/* Stabilize pointer hover at the link edges without changing layout or
   visuals. The links lift by 1px on interaction; this invisible hit area
   extends beyond that movement so the pointer cannot fall out of the link
   while it is moving. */
.nav-link::before{
  content:"";
  position:absolute;
  left:-.2rem;
  right:-.2rem;
  top:-.2rem;
  bottom:-.38rem;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"]{
  color:var(--orange);
}
.nav-link:hover,
.nav-link:focus-visible{
  transform:translateY(-.5px) !important;
}
.nav-link:active{
  transform:translateY(0) !important;
}
.nav-link:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
}
.mobile-menu-toggle{
  display:none;
  position:relative;
  align-items:center;
  justify-content:center;
  min-width:3rem;
  height:2rem;
  padding:0 .48rem;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.76rem;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .18s ease,color .2s ease;
}
.mobile-menu-toggle:hover{
  transform:translateY(-.5px);
  color:var(--orange);
}
.mobile-menu-toggle[aria-expanded="true"]{
  color:var(--orange);
}
.mobile-menu-toggle:active{transform:scale(.98)}
.mobile-menu-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.mobile-menu-toggle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:max(44px,100%);
  height:44px;
  transform:translate(-50%,-50%);
  background:transparent;
  pointer-events:auto;
}
.mobile-menu-panel{
  position:fixed;
  z-index:44;
  top:58px;
  right:clamp(10px,2vw,18px);
  width:min(12.5rem,calc(100vw - 20px));
  padding:.5rem;
  border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);
  border-radius:1rem;
  background:color-mix(in srgb,var(--bg) 96%,var(--ink) 4%);
  box-shadow:0 18px 34px color-mix(in srgb,var(--ink) 12%,transparent),
             0 1px 0 color-mix(in srgb,var(--ink) 8%,transparent) inset;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  display:grid;
  gap:.28rem;
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}
.mobile-menu-panel.is-open{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.mobile-menu-link{
  appearance:none;
  display:block;
  border:0;
  background:transparent;
  border-radius:.72rem;
  padding:.72rem .85rem;
  text-align:left;
  text-decoration:none;
  color:var(--ink);
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.mobile-menu-link:hover{
  background:color-mix(in srgb,var(--ink) 6%,var(--bg));
  color:var(--orange);
}
.mobile-menu-link[aria-current="page"]{
  color:var(--orange);
}
.mobile-menu-link:active{transform:scale(.99)}
.mobile-menu-link:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.mobile-language-switch{
  position:relative;
  align-items:center;
  width:1.8rem;
  min-width:1.8rem;
  margin:.2rem .85rem 0;
  padding:.72rem 0 .34rem;
  border:0;
  border-top:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
  background:transparent;
  color:color-mix(in srgb,var(--ink) 44%,var(--bg));
  font:inherit;
  font-size:.65rem;
  font-weight:400;
  letter-spacing:.08em;
  line-height:1;
  text-align:left;
  text-transform:uppercase;
}
.mobile-language-switch::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:44px;
  height:44px;
  transform:translate(-50%,-50%);
  background:transparent;
  pointer-events:auto;
}
.mobile-language-switch .language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 88%,var(--bg));
}
.mobile-language-switch .language-switch__option[aria-disabled="true"]{
  left:2.02rem;
  top:calc(50% + .19rem);
}
.mobile-language-switch:is(:hover,:focus-visible) .language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 44%,var(--bg));
}
.mobile-language-switch:is(:hover,:focus-visible) .language-switch__option[aria-disabled="true"]{
  color:var(--orange);
  opacity:1;
  transform:translate(0,-50%);
}

/* Match the Contact header navigation completely: subdued resting links,
   typographic active state, no underline, and accent-colour hover/focus in
   both desktop and mobile navigation. */
.nav__links{
  gap:2rem;
}
.nav-link,
.mobile-menu-link{
  color:color-mix(in srgb,var(--ink) 72%,var(--bg));
  font-weight:400;
  text-decoration:none;
}
:is(.nav-link,.mobile-menu-link)[aria-current="page"]{
  color:color-mix(in srgb,var(--ink) 96%,var(--bg));
  font-weight:500;
  -webkit-text-stroke:.1px currentColor;
  paint-order:stroke fill;
}
:is(.nav-link,.mobile-menu-link)::after{
  content:none;
}
.nav-link:is(:hover,:focus-visible){
  color:var(--orange);
  transform:translateY(-1px) !important;
}
.mobile-menu-link:is(:hover,:focus-visible){
  color:var(--orange);
}
.theme-toggle{
  --toggle-hit:2.45rem;
  --toggle-visual:1.92rem;
  --toggle-icon:1.04rem;
  --toggle-outline:color-mix(in srgb,var(--ink) 28%,transparent);
  --toggle-surface:color-mix(in srgb,var(--bg) 96%,var(--ink) 4%);
  --toggle-moon:color-mix(in srgb,var(--ink) 92%,var(--bg));
  --toggle-near-ring:color-mix(in srgb,var(--ink) 94%,var(--orange) 6%);
  --toggle-near-glow:color-mix(in srgb,var(--ink) 16%,transparent);
  --toggle-near-inset:color-mix(in srgb,var(--ink) 14%,transparent);
  --toggle-near:0;
  --toggle-halo:0;
  width:var(--toggle-hit);
  height:var(--toggle-hit);
  position:fixed;
  right:1.15rem;
  top:calc(24px + (1.72rem - var(--toggle-hit)) / 2 - 1px);
  display:grid;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  font:inherit;
  line-height:1;
  cursor:pointer;
  isolation:isolate;
  opacity:.30;
  will-change:opacity,transform;
  transition:transform .18s ease,color .2s ease,background-color .2s ease,opacity .22s ease;
}
html[data-theme="dark"] .theme-toggle{
  --toggle-outline:color-mix(in srgb,var(--ink) 26%,transparent);
  --toggle-surface:color-mix(in srgb,var(--bg) 90%,var(--ink) 10%);
  --toggle-moon:color-mix(in srgb,var(--ink) 98%,var(--bg) 2%);
  --toggle-near-ring:color-mix(in srgb,var(--ink) 82%,var(--orange) 18%);
  --toggle-near-glow:color-mix(in srgb,var(--orange) 30%,transparent);
  --toggle-near-inset:color-mix(in srgb,var(--orange) 20%,transparent);
}
.theme-toggle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(var(--toggle-visual) + .42rem);
  height:calc(var(--toggle-visual) + .42rem);
  transform:translate(-50%,-50%);
  transform-origin:center center;
  border:1px solid var(--toggle-near-ring);
  border-radius:50%;
  opacity:calc(var(--toggle-halo) * .60);
  box-shadow:
    0 0 calc(2px + var(--toggle-halo) * 5px) var(--toggle-near-glow),
    0 0 0 1px var(--toggle-near-inset) inset;
  pointer-events:none;
  will-change:opacity, box-shadow;
  animation:themeToggleGlowPulse 3.1s ease-in-out infinite;
  transition:opacity .22s ease-out,box-shadow .28s ease-out;
}
@keyframes themeToggleGlowPulse{
  0%,100%{
    opacity:calc(var(--toggle-halo) * .58);
    box-shadow:
      0 0 calc(2px + var(--toggle-halo) * 5px) var(--toggle-near-glow),
      0 0 0 1px var(--toggle-near-inset) inset;
  }
  50%{
    opacity:calc(var(--toggle-halo) * .83);
    box-shadow:
      0 0 calc(4px + var(--toggle-halo) * 10.3px) var(--toggle-near-glow),
      0 0 0 1px var(--toggle-near-inset) inset;
  }
}
.theme-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:var(--toggle-visual);
  height:var(--toggle-visual);
  transform:translate(-50%,-50%);
  border:1px solid var(--toggle-outline);
  border-radius:50%;
  background:var(--toggle-surface);
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--bg) 74%,transparent) inset,
    0 1px 2px color-mix(in srgb,var(--ink) 7%,transparent);
  transition:border-color .2s ease,background-color .2s ease,transform .18s ease,box-shadow .2s ease;
}
/* THEME TOGGLE SURFACE HALF-STEP + LONG AFTERGLOW — v565
   The theme itself still changes immediately. For the toggle's inner surface,
   however, the easing starts at 50% progress at t=0: the visible fill therefore
   jumps directly halfway toward the new theme instead of spending time crossing
   the first half. The remaining difference then resolves over a deliberately
   long, logarithmic / exponential-style tail. This keeps the interaction crisp
   at the moment of switching while leaving a restrained residual afterglow that
   dissolves progressively more slowly. As of v567 the moon subtraction is a
   true transparent SVG mask, so it has no color transition of its own and
   simply reveals the animated toggle surface beneath it. */
.theme-toggle.is-theme-switching::after{
  transition:border-color .2s ease,
             background-color 2.45s cubic-bezier(.08,.82,.14,1),
             transform .18s ease,
             box-shadow .2s ease;
}
@supports (transition-timing-function:linear(0,1)){
  .theme-toggle.is-theme-switching::after{
    transition:border-color .2s ease,
               background-color 2.45s linear(
                 .50,
                 .64 5%,
                 .74 12%,
                 .82 22%,
                 .89 36%,
                 .94 52%,
                 .972 68%,
                 .988 82%,
                 .996 92%,
                 .999 97%,
                 1
               ),
               transform .18s ease,
               box-shadow .2s ease;
  }
}

.theme-toggle__touch-target{
  display:none;
}
.theme-toggle__icon{
  position:relative;
  z-index:1;
  width:var(--toggle-icon);
  height:var(--toggle-icon);
  display:block;
  overflow:visible;
  transform:rotate(-14deg);
  opacity:calc(.56 + var(--toggle-near) * .44);
  animation:themeToggleMoonPulse 3.1s ease-in-out infinite;
  transition:transform .22s ease, opacity .08s linear;
  will-change:opacity;
}
@keyframes themeToggleMoonPulse{
  0%,100%{
    opacity:calc(.56 + var(--toggle-near) * .44);
  }
  50%{
    opacity:calc(.56 + var(--toggle-near) * .395);
  }
}
/* TRUE TRANSPARENT MOON CUTOUT — v567
   The crescent is now produced by an SVG mask rather than by painting a
   second circle in the toggle-surface color. The missing part of the moon is
   therefore genuinely transparent and always reveals the actual animated
   surface beneath it, regardless of theme-transition timing. */
.theme-toggle__moon{
  vector-effect:non-scaling-stroke;
  fill:var(--toggle-moon);
}
.theme-toggle:hover::after{
  border-color:color-mix(in srgb,var(--ink) 40%,transparent);
  background:color-mix(in srgb,var(--ink) 4%,var(--bg));
  box-shadow:
    0 0 0 1px color-mix(in srgb,var(--ink) 7%,transparent) inset,
    0 2px 6px color-mix(in srgb,var(--ink) 9%,transparent);
}
.theme-toggle:hover .theme-toggle__icon{transform:rotate(-10deg) scale(1.02)}
.theme-toggle{transform:none}
.theme-toggle:hover{transform:translateY(-.5px)}
.theme-toggle:active{transform:scale(.98)}
.theme-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.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(--orange);
  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(--orange);
  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(--orange);
  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(--orange);
  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(--orange)}

.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(--orange);
}



/* 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.
     Lock both the Hero composition and every beam SVG to the same small, stable
     viewport so the raster logo and the vector beam cannot drift apart. */
  .hero{min-height:100svh}
  .logo-wrap,.logo-beam-wrap{width:92vw;top:17svh}
  .energy-layer,.travel-beam-layer,.pulse-layer{height:100svh}
  .nav{
    right:max(clamp(10px,2vw,18px),calc(env(safe-area-inset-right) + 8px));
    min-height:1.92rem;
    gap:.62rem;
    padding-right:0;
    font-size:clamp(.58rem,2.5vw,.68rem);
    white-space:nowrap;
  }
  .nav__links{display:none}
  .language-switch{display:none}
  .nav__mobile-actions{
    width:auto;
    min-width:auto;
    justify-content:flex-end;
    gap:clamp(.36rem,1.5vw,.58rem);
  }
  .mobile-menu-toggle{
    display:inline-flex;
    font-size:clamp(.64rem,2.55vw,.72rem);
    height:1.82rem;
    min-width:2.74rem;
    padding:0 .34rem;
  }
  .mobile-menu-panel{
    top:calc(50px + env(safe-area-inset-top));
    right:max(clamp(10px,2vw,18px),calc(env(safe-area-inset-right) + 8px));
  }
  .mobile-language-switch{display:flex}
  .theme-toggle{
    --toggle-hit:1.90rem;
    --toggle-visual:1.10rem;
    --toggle-icon:.60rem;
    position:relative;
    right:auto;
    top:auto;
    flex:0 0 var(--toggle-hit);
    margin-left:0;
    transform:none;
  }
  .theme-toggle__touch-target{
    display:block;
    position:absolute;
    left:50%;
    top:50%;
    width:44px;
    height:44px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:transparent;
    pointer-events:auto;
    z-index:0;
  }
  .theme-toggle:hover{transform:translateY(-.5px)}
  .theme-toggle:active{transform:scale(.98)}
  .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){
  .travel-beam-layer,.pulse-layer{opacity:.92}
  .theme-toggle::before,
  .theme-toggle__icon{animation:none}
  .theme-toggle.is-theme-switching::after,
  .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;
}


/* On true portrait phones the visible theme control should not compete with
   the compact wordmark. Keep the generous hit target, but reduce only the
   painted circle and moon icon; the Contact-to-toggle optical gap remains
   unchanged because it is calculated from these variables. */
@media (max-width:600px) and (orientation:portrait){
  .mobile-menu-panel{
    top:calc(48px + env(safe-area-inset-top));
    right:max(10px,calc(env(safe-area-inset-right) + 8px));
    width:min(11.25rem,calc(100vw - 20px));
  }
  .mobile-menu-toggle{
    height:1.72rem;
    min-width:2.54rem;
    padding:0 .28rem;
  }
  .theme-toggle{
    /* In portrait mobile the visible toggle should be clearly lighter and
       smaller, while the actual touch target remains comfortable. */
    --toggle-hit:1.76rem;
    --toggle-visual:.94rem;
    --toggle-icon:.52rem;
  }
}



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


/* ================================================================
   HEADER SHIELD SURFACE MATCHING — v418
   The fixed logo/navigation shield now inherits the flat surface of the
   section currently beneath it. This removes the false gradient that was
   visible on even sections while preserving the soft header fade.
   ================================================================ */



/* 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 + HEADER SHIELD — v453
   The dark-theme section variables previously retained the older odd/even
   values because the html[data-theme="dark"] selector outranked :root.
   Keep every section and the fixed header shield 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(--orange);
  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(--orange);
  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);
  }
}


/* LANGUAGE SLOT SWITCH — v490
   The current language leaves upward while the alternative rises into the
   exact same visual slot. The fixed viewport prevents any header reflow. */
.language-switch{
  overflow:hidden;
  height:.9rem;
  padding:0;
  vertical-align:middle;
  isolation:isolate;
}
.language-switch .language-switch__option,
.mobile-language-switch .language-switch__option{
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  line-height:1;
  transform-origin:50% 50%;
  will-change:transform,opacity;
  transition:
    transform .34s cubic-bezier(.22,.72,.24,1),
    opacity .2s ease,
    color .22s ease;
}
.language-switch .language-switch__option[aria-current="true"],
.mobile-language-switch .language-switch__option[aria-current="true"]{
  opacity:1;
  transform:translateY(-50%);
}
.language-switch .language-switch__option[aria-disabled="true"],
.mobile-language-switch .language-switch__option[aria-disabled="true"]{
  left:0;
  top:50%;
  opacity:0;
  transform:translateY(72%);
}
.language-switch:is(:hover,:focus-visible,:focus-within) .language-switch__option[aria-current="true"],
.mobile-language-switch:is(:hover,:focus-visible,:focus-within) .language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 46%,var(--bg));
  opacity:0;
  transform:translateY(-172%);
}
.language-switch:is(:hover,:focus-visible,:focus-within) .language-switch__option[aria-disabled="true"],
.mobile-language-switch:is(:hover,:focus-visible,:focus-within) .language-switch__option[aria-disabled="true"]{
  color:var(--orange);
  opacity:1;
  transform:translateY(calc(-50% - 1px));
}
.mobile-language-switch{
  overflow:hidden;
}
.mobile-language-switch .language-switch__option[aria-current="true"],
.mobile-language-switch .language-switch__option[aria-disabled="true"]{
  top:calc(50% + .19rem);
}
@media(prefers-reduced-motion:reduce){
  .language-switch .language-switch__option,
  .mobile-language-switch .language-switch__option{
    transition-duration:.01ms;
  }
}


/* HEADER UTILITY SPACING — v494
   Position the complete desktop navigation group so the visible EN label has
   the same optical clearance to Contact and to the theme-control circle,
   without changing the established internal navigation gaps. */

/* LANGUAGE SWITCH TYPOGRAPHY — v491
   Match the navigation's type scale and weight while keeping the utility
   control slightly quieter through contrast alone. */
.language-switch{
  width:1.92rem;
  min-width:1.92rem;
  height:1.12rem;
  font-size:1em;
  font-weight:400;
  letter-spacing:0;
  line-height:1;
}
.language-switch .language-switch__option{
  /* Match the optical baseline of the nav labels rather than the geometric
     centre of the utility slot. */
  top:calc(50% - .06rem);
  width:auto;
}
.language-switch .language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 68%,var(--bg));
  font-weight:400;
  -webkit-text-stroke:0;
}
@media(max-width:920px){
  .mobile-language-switch{
    width:2.05rem;
    min-width:2.05rem;
    height:1.18rem;
    font-size:.9rem;
    font-weight:400;
    letter-spacing:0;
    line-height:1;
  }
  .mobile-language-switch .language-switch__option[aria-current="true"]{
    color:color-mix(in srgb,var(--ink) 68%,var(--bg));
    font-weight:400;
    -webkit-text-stroke:0;
  }
}



/* BIDIRECTIONAL LANGUAGE SLOT — v495
   Keep both labels on the exact same optical baseline and let the inactive
   language rise into the slot. The state can now be reversed repeatedly. */
.language-switch,
.mobile-language-switch{
  cursor:pointer;
}
.language-switch .language-switch__option,
.mobile-language-switch .language-switch__option{
  left:50%;
  width:auto;
}
.language-switch .language-switch__option{
  top:calc(50% - .06rem);
}
.mobile-language-switch .language-switch__option{
  top:calc(50% + .19rem);
}
.language-switch .language-switch__option[aria-current="true"],
.mobile-language-switch .language-switch__option[aria-current="true"]{
  opacity:1;
  transform:translate(-50%,-50%);
  color:color-mix(in srgb,var(--ink) 68%,var(--bg));
}
.language-switch .language-switch__option[aria-current="false"],
.mobile-language-switch .language-switch__option[aria-current="false"]{
  opacity:0;
  transform:translate(-50%,72%);
  color:color-mix(in srgb,var(--ink) 68%,var(--bg));
}
.language-switch:is(:hover,:focus-visible) .language-switch__option[aria-current="true"],
.mobile-language-switch:is(:hover,:focus-visible) .language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 46%,var(--bg));
  opacity:0;
  transform:translate(-50%,-172%);
}
.language-switch:is(:hover,:focus-visible) .language-switch__option[aria-current="false"],
.mobile-language-switch:is(:hover,:focus-visible) .language-switch__option[aria-current="false"]{
  color:var(--orange);
  opacity:1;
  transform:translate(-50%,-50%);
}
/* A pointer click focuses a button in some browsers. Do not let that retained
   focus mimic a permanent hover state once the pointer has left the control. */
.language-switch:focus-within:not(:hover):not(:focus-visible) .language-switch__option[aria-current="true"],
.mobile-language-switch:focus-within:not(:hover):not(:focus-visible) .language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 68%,var(--bg));
  opacity:1;
  transform:translate(-50%,-50%);
}
.language-switch:focus-within:not(:hover):not(:focus-visible) .language-switch__option[aria-current="false"],
.mobile-language-switch:focus-within:not(:hover):not(:focus-visible) .language-switch__option[aria-current="false"]{
  opacity:0;
  transform:translate(-50%,72%);
}
@media(hover:none){
  .language-switch:hover .language-switch__option[aria-current="true"],
  .mobile-language-switch:hover .language-switch__option[aria-current="true"]{
    color:color-mix(in srgb,var(--ink) 68%,var(--bg));
    opacity:1;
    transform:translate(-50%,-50%);
  }
  .language-switch:hover .language-switch__option[aria-current="false"],
  .mobile-language-switch:hover .language-switch__option[aria-current="false"]{
    opacity:0;
    transform:translate(-50%,72%);
  }
  .language-switch:focus-visible .language-switch__option[aria-current="true"],
  .mobile-language-switch:focus-visible .language-switch__option[aria-current="true"]{
    opacity:0;
    transform:translate(-50%,-172%);
  }
  .language-switch:focus-visible .language-switch__option[aria-current="false"],
  .mobile-language-switch:focus-visible .language-switch__option[aria-current="false"]{
    color:var(--orange);
    opacity:1;
    transform:translate(-50%,-50%);
  }
}



/* HEADER LANGUAGE SPACING — v496
   Tighten the utility rhythm without disturbing the established navigation
   gaps: Contact moves closer to the language slot, while the slot itself
   shifts a fraction toward the theme control for near-equal optical spacing. */
@media(min-width:921px){
  .nav{
    right:3.72rem;
  }
  .language-switch{
    margin-left:.36rem;
  }
}

/* HEADER LANGUAGE INTRO — v498
   During the shared header entrance, the complete language control now uses
   the same opacity, vertical offset and transform easing as every nav link.
   Its internal EN/DE track is held still until the common entrance has fully
   settled, preventing a second, delayed fade at the end. */
.language-switch.is-header-intro{
  transition:transform .22s ease;
}
.language-switch.is-header-intro .language-switch__option{
  transition:none !important;
}
.language-switch.is-header-intro .language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 72%,var(--bg));
  opacity:1 !important;
  transform:translate(-50%,-50%) !important;
}
.language-switch.is-header-intro .language-switch__option[aria-current="false"]{
  opacity:0 !important;
  transform:translate(-50%,72%) !important;
}


/* LANGUAGE COMMIT STATE — v499
   After choosing the language, keep the newly selected label in the slot
   while the pointer is still over the control. The alternative is only
   previewed again on the next deliberate hover/focus cycle. */
.language-switch.is-language-commit .language-switch__option[aria-current="true"],
.mobile-language-switch.is-language-commit .language-switch__option[aria-current="true"]{
  color:color-mix(in srgb,var(--ink) 68%,var(--bg)) !important;
  opacity:1 !important;
  transform:translate(-50%,-50%) !important;
}
.language-switch.is-language-commit .language-switch__option[aria-current="false"],
.mobile-language-switch.is-language-commit .language-switch__option[aria-current="false"]{
  opacity:0 !important;
  transform:translate(-50%,72%) !important;
}



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


/* HEADER MICRO-ALIGNMENT — v560
   Deliberately based on v556. The entire desktop navigation group and the
   independently fixed theme toggle sit 2 physical pixels higher (26px -> 24px).
   The active language remains on its established baseline; only the alternative
   language entering the slot on pointer hover / keyboard focus finishes 1px
   higher, matching the nav-link hover lift optically. Mobile geometry and all
   theme-toggle artwork remain exactly as in v556. */
@media (min-width:921px){
  @media (hover:hover){
    .language-switch:hover .language-switch__option[aria-current="false"]{
      transform:translate(-50%,calc(-50% - 1px));
    }
  }
  .language-switch:focus-visible .language-switch__option[aria-current="false"]{
    transform:translate(-50%,calc(-50% - 1px));
  }
}


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


/* MOBILE HEADER INFORMATION ARCHITECTURE — v579
   Based on v578. In the one-column header, keep the primary navigation behind
   Menu while exposing Contact as a direct peer action before the theme toggle.
   Contact intentionally shares the quiet type treatment and tiny hover lift of
   Menu. It is removed from the flyout to avoid duplicate navigation entries. */
.mobile-contact-link{
  display:none;
  position:relative;
  align-items:center;
  justify-content:center;
  height:2rem;
  padding:0 .34rem;
  border:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.76rem;
  font-weight:400;
  letter-spacing:.01em;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease,color .2s ease;
}
.mobile-contact-link::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:max(44px,100%);
  height:44px;
  transform:translate(-50%,-50%);
  background:transparent;
}
.mobile-contact-link:hover,
.mobile-contact-link:focus-visible{
  transform:translateY(-.5px);
  color:var(--orange);
}
.mobile-contact-link:active{
  transform:translateY(0);
}
.mobile-contact-link:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
}
@media(max-width:920px){
  .mobile-contact-link{
    display:inline-flex;
    font-size:clamp(.64rem,2.55vw,.72rem);
    height:1.82rem;
  }
}


/* MOBILE HEADER NAV PARITY — v580
   Based on v579. Menu and the direct Contact action now behave like the
   desktop navigation links rather than like separate mobile utility controls:
   - both are absent throughout Hero mode and reveal together in compact mode;
   - both use the same subdued resting colour as .nav-link;
   - both lift by the same 1px on hover/focus;
   - both participate in the same upward beam dent used by desktop nav links.
   The theme toggle intentionally remains the inverse/downward beam interaction. */
.mobile-menu-toggle,
.mobile-contact-link{
  color:color-mix(in srgb,var(--ink) 72%,var(--bg));
  font-weight:400;
  -webkit-text-stroke:0;
  paint-order:normal;
}
.mobile-contact-link{
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,color .22s ease;
}
.mobile-menu-toggle{
  transition:opacity .22s ease,transform .22s ease,color .22s ease;
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus-visible,
.mobile-contact-link:hover,
.mobile-contact-link:focus-visible{
  color:var(--orange);
  transform:translateY(-1px);
}
.mobile-menu-toggle:active,
.mobile-contact-link:active{
  transform:translateY(0);
}
.mobile-menu-toggle:focus-visible,
.mobile-contact-link:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
}