/* ============================================================
   DxVida GmbH · brand.css · THE shared design file
   Ley 01: nothing is produced before this file exists.
   Every page links this file. No page defines its own colour,
   type scale or button. If something is missing here, add it
   HERE, never in the page.
   ------------------------------------------------------------
   Built 24 Sep 2026. Tokens bridge two existing systems:
   the deep editorial palette of priscillahidalgo.netlify.app
   (structure, authority) and the DxVida product palette
   (warmth). One type scale, one button language, one grid.
   ============================================================ */

:root{
  /* ---------------------------------------------------------------
     Sampled from the mark: the circle is #0A2E40, the left wing runs
     to #F1C94F and the right wing to #C28020. Three colours, and the
     three units take one each.
     Anything ending -ink is the text-safe version of a colour that is
     too light to read at body size. Bright values are for fills,
     treads and rules only.
     --------------------------------------------------------------- */
  --deep:#0A2E40;         /* the circle. Advisory.                  */
  --deep-2:#0E3D53;       /* hover                                  */
  --deep-3:#072430;       /* footer, deepest ground                 */
  --gold:#F1C94F;         /* left wing. FILL ONLY.                  */
  --gold-bright:#F9D857;
  --gold-ink:#7E610A;     /* left wing as text on light             */
  --gold-l:#F9D857;       /* left wing as text on deep              */
  --amber:#C28020;        /* right wing. FILL ONLY.                 */
  --amber-ink:#8B5B17;    /* right wing as text on light            */
  --amber-l:#ECA829;      /* right wing as text on deep             */
  --ember:#98540B;

  --ink:#14202A;
  --ink-soft:#3A4954;
  --muted:#5B6770;
  --paper:#F5F1E8;
  --cream:#FBF9F4;
  --warm:#EDE7DA;
  --line:rgba(20,32,42,.16);
  --hair:rgba(20,32,42,.09);

  /* Surfaces that stay dark, and the text that sits on them. Never
     expressed as inverted --ink/--paper. */
  --dark-surface:#072430;
  --on-dark:#F5F1E8;
  --on-dark-soft:rgba(245,241,232,.84);
  --on-dark-faint:rgba(245,241,232,.72);
  --on-dark-line:rgba(245,241,232,.22);
  --on-dark-tint:rgba(245,241,232,.08);
  --veil:rgba(245,241,232,.94);

  /* names the existing rules already use, remapped to the mark */
  --emerald:#0A2E40; --emerald-2:#0E3D53;
  --gold-2:#ECA829;
  --petrol:#0E3D53; --clay:#8B5B17; --plum:#8B5B17; --sage:#7E610A;
  --mustard:#7E610A; --mustard-d:#F1C94F; --rust:#8B5B17; --rust-d:#C28020;
  --red:#98540B;

  /* --- the three units. One logo colour each. --- */
  --u-advisory:#0A2E40;        --u-advisory-fill:#0A2E40;
  --u-learn:#7E610A;           --u-learn-fill:#F1C94F;
  --u-products:#8B5B17;        --u-products-fill:#C28020;

  /* older per-offer accents, folded onto the three */
  --w-distance:#7E610A; --w-audit:#8B5B17; --w-build:#0A2E40;
  --w-learn:#0E3D53; --w-coach:#7E610A; --w-trade:#8B5B17;

  /* No serif. priscillahidalgo.netlify.app is Playfair; this is not that site. */
  --serif:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.06rem);
  --step-1:clamp(1.18rem,1.1rem + .35vw,1.35rem);
  --step-2:clamp(1.45rem,1.3rem + .7vw,1.9rem);
  --step-3:clamp(1.9rem,1.6rem + 1.4vw,2.9rem);
  --step-4:clamp(2.4rem,1.8rem + 2.8vw,4.4rem);
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
  --gutter:clamp(1.15rem,4vw,2.5rem);
  --measure:34rem;
  --wide:72rem;
  --shadow:4px 4px 0 var(--deep);
  --shadow-sm:2px 2px 0 var(--deep);
  --radius:2px;
  --speed:.22s;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);font-size:var(--step-0);line-height:1.68;
  color:var(--ink);background:var(--paper);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none;
}
img,svg,video{display:block;max-width:100%;height:auto}

/* ---------- LANGUAGE ------------------------------------------------
   English is the default. Nothing is hidden until JS confirms it can
   switch back, so a visitor without JS still reads a full page.      */
html.js .de,html.js .es{display:none}
html.js body.lang-de .en,html.js body.lang-de .es{display:none}
html.js body.lang-de .de{display:revert}
html.js body.lang-es .en,html.js body.lang-es .de{display:none}
html.js body.lang-es .es{display:revert}

/* ---------- TYPE ---------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--sans);font-weight:600;line-height:1.08;letter-spacing:-.028em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
h4{font-size:var(--step-1);font-family:var(--sans);font-weight:600;letter-spacing:0;line-height:1.35}
p,li{max-width:var(--measure)}
p+p{margin-top:var(--s4)}
.lede{font-size:var(--step-1);line-height:1.5;color:var(--ink-soft);max-width:38rem}
.eyebrow{
  display:block;font-size:var(--step--1);font-weight:600;
  letter-spacing:.02em;color:var(--gold-ink);
  margin-bottom:var(--s4)
}
.eyebrow-l{color:var(--gold-l)}
.rule{width:2.6rem;height:2px;background:var(--gold);border:0;margin:var(--s5) 0}
.muted{color:var(--muted)}
.big{font-family:var(--serif);font-size:var(--step-2);line-height:1.35;max-width:32rem}
strong{font-weight:600}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px;
  text-decoration-color:var(--gold-ink);transition:color var(--speed) var(--ease)}
a:hover{color:var(--emerald)}

/* ---------- LAYOUT --------------------------------------------------- */
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--gutter)}
.band{padding-block:var(--s9)}
.band-tight{padding-block:var(--s8)}
.band-warm{background:var(--warm)}
.band-dark{background:var(--emerald-dark,var(--emerald));color:var(--on-dark)}
.band-dark .eyebrow{color:var(--gold-l)}
.band-dark .lede,.band-dark .muted{color:var(--on-dark-soft)}
.band-ink{background:var(--dark-surface);color:var(--on-dark)}
.stack>*+*{margin-top:var(--s4)}
.split{display:grid;gap:var(--s5)}   /* stacked by default, with a gap */
.stack-lg>*+*{margin-top:var(--s6)}
.grid{display:grid;gap:var(--s5)}
@media(min-width:48rem){
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s8);align-items:start}
}

/* ---------- SKIP LINK + HEADER --------------------------------------- */
.skip{position:absolute;left:var(--s4);top:-4rem;z-index:100;background:var(--dark-surface);
  color:var(--on-dark);padding:var(--s3) var(--s4);transition:top var(--speed)}
.skip:focus{top:var(--s4)}
.hdr{position:sticky;top:0;z-index:50;background:var(--veil);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--hair)}
.hdr-in{display:flex;align-items:center;gap:var(--s5);min-height:4.25rem}
.mark{font-family:var(--sans);font-weight:600;font-size:1.32rem;letter-spacing:.01em;text-decoration:none;flex-shrink:0}
.mark b{font-weight:400}
.mark i{font-style:normal;color:var(--gold)}
.mark span{font-size:.62em;letter-spacing:.12em;color:var(--muted);margin-left:.3em}
.nav{display:flex;gap:var(--s5);margin-left:auto;align-items:center}
.nav a{font-size:var(--step--1);font-weight:500;text-decoration:none;letter-spacing:.01em}
.nav a[aria-current="page"]{color:var(--emerald);text-decoration:underline;text-decoration-color:var(--gold)}
.langs{display:flex;gap:var(--s1);margin-left:var(--s4)}
.langs button{
  font:inherit;font-size:.72rem;font-weight:600;letter-spacing:.09em;
  background:none;border:1px solid var(--line);color:var(--muted);
  padding:.32rem .5rem;cursor:pointer;border-radius:var(--radius);
  min-height:2rem;min-width:2.3rem;transition:all var(--speed) var(--ease)
}
.langs button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  padding:.55rem .7rem;cursor:pointer;border-radius:var(--radius);min-height:2.75rem}
.burger span{display:block;width:1.15rem;height:2px;background:var(--ink)}
.burger span+span{margin-top:4px}
@media(max-width:60rem){
  .burger{display:block}
  .nav{
    position:fixed;inset:4.25rem 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--line);padding:var(--s4) var(--gutter) var(--s6);
    gap:0;margin:0;max-height:calc(100dvh - 4.25rem);overflow-y:auto;
    transform:translateY(calc(-100% - 5rem));visibility:hidden;
    transition:transform var(--speed) var(--ease),visibility 0s linear var(--speed);
  }
  .nav a{padding:var(--s4) 0;border-bottom:1px solid var(--hair);font-size:var(--step-0)}
  .nav[data-open="true"]{transform:translateY(0);visibility:visible;transition-delay:0s,0s}
  .langs{margin:var(--s5) 0 0}
}

/* ---------- BUTTONS · ONE LANGUAGE, THREE WEIGHTS -------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--sans);font-size:var(--step-0);font-weight:600;
  letter-spacing:.005em;text-decoration:none;
  padding:.85rem 1.5rem;min-height:2.95rem;border:1.5px solid var(--ink);
  border-radius:var(--radius);cursor:pointer;background:var(--ink);color:var(--paper);
  box-shadow:var(--shadow-sm);
  transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease),
             background var(--speed) var(--ease),color var(--speed) var(--ease);
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow);color:var(--paper)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn-accent{background:var(--accent,var(--emerald));border-color:var(--accent,var(--emerald))}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--deep);border-color:var(--deep);color:var(--on-dark)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn-gold:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:none}
.btn-ghost:hover{background:var(--ink);color:var(--paper);box-shadow:var(--shadow-sm)}
.band-dark .btn-ghost,.arch .btn-ghost{color:var(--on-dark);border-color:var(--on-dark)}
.band-dark .btn-ghost:hover,.arch .btn-ghost:hover{background:var(--on-dark);color:var(--dark-surface)}
.band-dark .btn-ghost:hover{background:var(--paper);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5)}

/* ---------- FOCUS · never removed ------------------------------------ */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:var(--radius)}
.band-dark :focus-visible,.band-ink :focus-visible{outline-color:var(--gold-2)}

/* ---------- PILL ------------------------------------------------------ */
.pill{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.3rem .62rem;border-radius:100px;
  background:var(--warm);color:var(--ink-soft);white-space:nowrap
}
.pill-live{background:rgba(27,77,62,.14);color:var(--emerald)}
.pill-soon{background:rgba(160,120,40,.17);color:var(--gold-ink)}
.pill-l{background:var(--on-dark-line);color:var(--on-dark)}

/* ---------- WORLD CARD · the repeating unit -------------------------- */
.worlds{display:grid;gap:var(--s5)}
@media(min-width:40rem){.worlds{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.worlds{grid-template-columns:repeat(3,1fr)}}
.world{
  position:relative;display:flex;flex-direction:column;gap:var(--s3);
  background:var(--cream);border:1.5px solid var(--ink);border-radius:var(--radius);
  padding:var(--s5);text-decoration:none;color:var(--ink);isolation:isolate;
  box-shadow:var(--shadow-sm);
  transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.world::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--accent)}
.world:hover,.world:focus-visible{transform:translate(-3px,-3px);box-shadow:var(--shadow);color:var(--ink)}
.world-n{font-family:var(--serif);font-size:.95rem;color:var(--accent);letter-spacing:.06em}
.world h3{font-size:var(--step-1);font-weight:600}
.world p{font-size:var(--step--1);color:var(--ink-soft);line-height:1.55;max-width:none;flex-grow:1}
.world-go{
  margin-top:var(--s2);font-size:.8rem;font-weight:600;letter-spacing:.01em;
  color:var(--accent);display:flex;align-items:center;gap:.4em
}
.world:hover .world-go span{transform:translateX(3px)}
.world-go span{transition:transform var(--speed) var(--ease)}

/* ---------- CARD / NOTE ---------------------------------------------- */
.card{background:var(--cream);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5)}
.card h4{margin-bottom:var(--s2)}
.card p{max-width:none;font-size:var(--step--1);color:var(--ink-soft)}
.note{
  border-left:3px solid var(--accent,var(--gold));background:var(--cream);color:var(--ink);
  padding:var(--s4) var(--s5);border-radius:0 var(--radius) var(--radius) 0
}
.note p{max-width:none}
.quote{
  font-family:var(--sans);font-size:var(--step-2);line-height:1.38;font-weight:500;
  border-left:3px solid var(--gold);padding-left:var(--s5);max-width:36rem
}
.quote cite{
  display:block;font-family:var(--sans);font-style:normal;font-size:var(--step--1);
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-top:var(--s4)
}

/* ---------- THE CORE · five layers ----------------------------------- */
.core{display:flex;flex-direction:column-reverse;gap:6px;max-width:38rem}
.layer{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.1rem;
  padding:var(--s4) var(--s5);background:var(--cream);color:var(--ink);
  border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--radius)
}
.layer-base{background:var(--emerald-dark,var(--emerald));border-color:var(--emerald-dark,var(--emerald));color:var(--on-dark)}
.layer-base .layer-what{color:var(--on-dark-soft)}
.layer-verb{font-family:var(--sans);font-weight:600;font-size:var(--step-1)}
.layer-what{font-size:var(--step--1);color:var(--muted);letter-spacing:.01em}

/* ---------- STEPS / LADDER ------------------------------------------- */
.ladder{counter-reset:rung;display:grid;gap:var(--s4)}
.rung{display:grid;grid-template-columns:2.3rem 1fr;gap:var(--s4);align-items:start}
.rung::before{
  counter-increment:rung;content:counter(rung);
  font-family:var(--serif);font-size:var(--step-1);color:var(--gold-ink);
  border-top:2px solid var(--gold);padding-top:.35rem
}
.rung p{max-width:none;font-size:var(--step--1);color:var(--ink-soft)}

/* ---------- TABLE ----------------------------------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.tbl th{
  text-align:left;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding:0 var(--s4) var(--s3) 0;
  border-bottom:1.5px solid var(--emerald)
}
.tbl td{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--hair);vertical-align:top}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- FORMS ------------------------------------------------------ */
.form{max-width:34rem;display:grid;gap:var(--s5)}
.field{display:grid;gap:var(--s2)}
.field label{font-size:var(--step--1);font-weight:600}
.field .hint{font-size:.76rem;color:var(--muted);line-height:1.45}
.field input,.field textarea,.field select{
  font:inherit;font-size:var(--step-0);width:100%;padding:.8rem .9rem;
  background:var(--cream);color:var(--ink);
  border:1.5px solid var(--line);border-radius:var(--radius);min-height:2.95rem;
  transition:border-color var(--speed) var(--ease)
}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 1.1rem) 1.25rem,calc(100% - .75rem) 1.25rem;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.5rem}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--emerald)}
.field textarea{min-height:7rem;resize:vertical;line-height:1.6}
.check{display:grid;grid-template-columns:1.2rem 1fr;gap:var(--s3);align-items:start}
.check input{width:1.2rem;height:1.2rem;min-height:0;margin-top:.22rem;accent-color:var(--emerald)}
.check label{font-weight:400;font-size:.84rem;line-height:1.5;color:var(--ink-soft)}
.hp{position:absolute;left:-9999px}
.form-msg{font-size:var(--step--1);padding:var(--s4);border-radius:var(--radius);display:none}
.form-msg[data-state="ok"]{display:block;background:rgba(27,77,62,.1);border-left:3px solid var(--emerald)}
.form-msg[data-state="err"]{display:block;background:rgba(140,58,43,.1);border-left:3px solid var(--clay)}

/* ---------- CREDENTIAL STRIP · always ABOVE the form ----------------- */
.creds{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);padding:var(--s4) 0;
  border-block:1px solid var(--hair);margin-bottom:var(--s6)}
.cred{font-size:var(--step--1);color:var(--ink-soft)}
.cred b{display:block;font-size:var(--step-1);color:var(--emerald);font-weight:600}

/* ---------- FOOTER ----------------------------------------------------- */
.ftr{background:var(--dark-surface);color:var(--on-dark);padding-block:var(--s7) var(--s6);font-size:var(--step--1)}
.ftr a{color:var(--on-dark-soft);text-decoration:none}
.ftr a:hover{color:var(--on-dark);text-decoration:underline;text-decoration-color:var(--gold-2)}
.ftr-in{display:grid;gap:var(--s6)}
@media(min-width:48rem){.ftr-in{grid-template-columns:1.4fr 1fr 1fr}}
.ftr h4{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-dark-faint);font-weight:700;margin-bottom:var(--s3)}
.ftr ul{list-style:none}
.ftr li+li{margin-top:var(--s2)}
.ftr-legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--on-dark-line);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);color:var(--on-dark-faint);font-size:.76rem}
.ftr p{max-width:26rem;color:var(--on-dark-faint)}

/* ---------- MOTION · every animation has a still version ------------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.seen{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .btn:hover,.world:hover{transform:none}
}
/* No JS: nothing stays invisible. */
html:not(.js) .reveal{opacity:1;transform:none}

@media print{.hdr,.ftr,.btn,.langs{display:none}body{background:#fff}}

/* ============================================================
   THE BRAIN · added 24 Sep 2026
   One company, two hemispheres. Left is the human half
   (meaning, language, people, teaching). Right is the systems
   half (numbers, structure, security, risk). Work that needs
   BOTH sits in the middle - and the middle is the premium
   position, so the layout argues the positioning rather than
   decorating it.
   ============================================================ */

/* --- the split hero --------------------------------------- */
.brain{position:relative;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto}
@media(min-width:48rem){
  /* Cap the hero: on a very tall screen a full-viewport split stops being
     a hero and becomes a wall. The note row is auto, never stretched. */
  .brain{grid-template-columns:1fr 1fr;grid-template-rows:minmax(min(calc(100dvh - 4.25rem),44rem),auto) auto}
}
.hemi{display:flex;flex-direction:column;justify-content:center;
      padding:var(--s8) var(--gutter);position:relative;overflow:hidden;min-height:24rem}
.hemi-l{background:var(--dark-surface);color:var(--on-dark)}
.hemi-r{background:var(--warm);color:var(--ink)}
@media(min-width:48rem){.hemi-r{padding-left:calc(var(--gutter) + 3rem)}
  .hemi-l{padding-right:calc(var(--gutter) + 3rem)}}
.hemi-tag{font-size:var(--step--1);font-weight:600;letter-spacing:.02em;margin-bottom:var(--s5)}
.hemi-l .hemi-tag{color:var(--gold-l)}
.hemi-r .hemi-tag{color:var(--gold-ink)}
.hemi h2{font-size:var(--step-3);line-height:1.05;margin-bottom:var(--s4)}
.hemi p{font-size:var(--step-0);line-height:1.6;max-width:26rem}
.hemi-l p{color:var(--on-dark-soft)}
.hemi-r p{color:var(--ink-soft)}
.hemi ul{list-style:none;margin:var(--s5) 0 0}
.hemi li{font-size:var(--step--1);padding:var(--s2) 0;border-bottom:1px solid rgba(23,20,15,.1)}
.hemi-l li{border-bottom-color:var(--on-dark-line)}
/* the seam: where the two halves meet is the company */
.seam{display:none}
@media(min-width:48rem){
  .seam{display:flex;position:absolute;left:50%;top:0;height:min(calc(100dvh - 4.25rem),44rem);transform:translateX(-50%);
        z-index:3;align-items:center;pointer-events:none}
  .seam span{background:var(--emerald-dark,var(--emerald));color:var(--on-dark);font-family:var(--serif);
             font-size:var(--step-1);padding:var(--s5) var(--s3);writing-mode:vertical-rl;
             letter-spacing:.2em;text-transform:uppercase;border-radius:var(--radius);
             box-shadow:var(--shadow)}
}
.brain-note{grid-column:1/-1;align-self:start;background:var(--emerald-dark,var(--emerald));color:var(--on-dark);
            padding:var(--s6) var(--gutter);text-align:center}
.brain-note p{max-width:44rem;margin-inline:auto;font-family:var(--serif);
              font-size:var(--step-1);line-height:1.45}

/* --- the spectrum: boxes placed on the human↔systems axis --- */
.spectrum{position:relative;margin-top:var(--s7)}
.axis{display:none}
@media(min-width:56rem){
  /* five parts in a row: label · line · label · line · label.
     A 3-column grid put the pseudo-element lines in the wrong cells. */
  .axis{display:flex;align-items:center;gap:var(--s4);margin-bottom:var(--s6);
        font-size:var(--step--1);font-weight:600;letter-spacing:.17em;
        text-transform:uppercase;color:var(--muted)}
  .axis span{white-space:nowrap}
  .axis i{flex:1;height:1px;display:block;border:0}
  .axis i:first-of-type{background:linear-gradient(90deg,var(--ink),var(--gold))}
  .axis i:last-of-type{background:linear-gradient(90deg,var(--gold),var(--petrol))}
  .axis b{font-weight:600;color:var(--ink)}
}
.lanes{display:grid;gap:var(--s4)}
@media(min-width:56rem){.lanes{grid-template-columns:repeat(12,1fr);gap:var(--s4)}}
.slot{display:flex}
@media(min-width:56rem){
  .slot-l{grid-column:1/span 5}
  .slot-lc{grid-column:3/span 5}
  .slot-c{grid-column:4/span 6}
  .slot-rc{grid-column:6/span 5}
  .slot-r{grid-column:8/span 5}
}
.offer{
  width:100%;display:flex;flex-direction:column;gap:var(--s2);
  background:var(--cream);color:var(--ink);border:1.5px solid var(--ink);
  border-radius:var(--radius);padding:var(--s5);text-decoration:none;
  box-shadow:var(--shadow-sm);position:relative;
  transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.offer::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--accent)}
.offer:hover,.offer:focus-visible{transform:translate(-3px,-3px);box-shadow:var(--shadow);color:var(--ink)}
.offer h3{font-size:var(--step-1);font-family:var(--serif);font-weight:400}
.offer p{font-size:var(--step--1);line-height:1.5;color:var(--ink-soft);max-width:none;flex-grow:1}
.offer .lean{font-size:.72rem;font-weight:600;letter-spacing:.01em;color:var(--muted)}
.offer .go{font-size:.8rem;font-weight:600;letter-spacing:.01em;color:var(--accent)}
/* the middle band is the premium position: say so visually */
.offer-mid{background:var(--emerald-dark,var(--emerald));color:var(--on-dark);border-color:var(--emerald-dark,var(--emerald))}
.offer-mid h3{color:var(--on-dark)}
.offer-mid p{color:var(--on-dark-soft)}
.offer-mid .lean{color:var(--on-dark-faint)}
.offer-mid .go{color:var(--gold-l)}
.offer-mid:hover,.offer-mid:focus-visible{color:var(--on-dark)}


/* ============================================================
   THE LADDER · offers drawn as ascending stairs.
   Bottoms align, each rung is taller than the last, and the
   thick top border is the tread. The height carries the price.
   ============================================================ */
.ladder-steps{display:grid;gap:var(--s4);align-items:end;margin-top:var(--s7)}
@media(min-width:56rem){.ladder-steps{grid-template-columns:repeat(var(--rungs,4),1fr);gap:var(--s3)}}
.rung-card{
  display:flex;flex-direction:column;gap:var(--s3);
  background:var(--cream);color:var(--ink);
  border:1px solid var(--line);border-top:6px solid var(--tread,var(--emerald));
  border-radius:0;padding:var(--s5) var(--s5) var(--s5);
}
@media(min-width:56rem){
  .rung-card{min-height:calc(20rem + var(--i,0) * 2.5rem)}
}
.rung-card h3{font-size:var(--step-1);font-weight:600;line-height:1.15;letter-spacing:-.02em}
.rung-card .shape{font-size:var(--step--1);color:var(--muted);line-height:1.5}
.rung-card ul{list-style:none;margin:0;font-size:var(--step--1);line-height:1.5}
.rung-card li{padding-left:1rem;position:relative;margin-bottom:.4rem;color:var(--ink-soft);max-width:none}
.rung-card li::before{content:"";position:absolute;left:0;top:.62em;width:.4rem;height:1px;background:var(--tread,var(--emerald))}
.price{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--hair)}
.price b{display:block;font-family:var(--sans);font-size:var(--step-2);font-weight:600;letter-spacing:-.018em;
  color:var(--tread-ink,var(--tread,var(--emerald)));line-height:1.1}
.price span{display:block;font-size:.76rem;color:var(--muted);margin-top:.25rem}
.price-free b{font-style:italic}

/* ---------- arched panel, callouts, case study, dot grid ---------- */
.arch{background:var(--emerald-dark,var(--emerald));color:var(--on-dark);padding:var(--s8) var(--s6) var(--s7);
  border-radius:50% 50% 0 0 / 120px 120px 0 0;text-align:center;margin-top:var(--s7)}
.arch p{max-width:34rem;margin-inline:auto}
.arch .big{font-family:var(--serif);font-size:var(--step-2);line-height:1.3;font-style:italic;
  color:var(--on-dark);margin-bottom:var(--s4);max-width:30rem;margin-inline:auto}
.arch .meta{font-size:var(--step--1);color:var(--on-dark-soft);margin-bottom:var(--s5)}
.callouts{display:grid;gap:var(--s4);margin-top:var(--s7)}
@media(min-width:48rem){.callouts{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.callout{border-top:3px solid var(--tread,var(--gold));padding-top:var(--s4)}
.callout h4{margin-bottom:var(--s2)}
.callout p{font-size:var(--step--1);color:var(--ink-soft);max-width:none}
.case{background:var(--warm);border-left:4px solid var(--tread,var(--emerald));
  padding:var(--s6);margin-top:var(--s7)}
.case h3{font-size:var(--step-2);margin-bottom:var(--s3)}
.case p{max-width:40rem}
.dots{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;
  flex:0 0 14rem;width:14rem;max-width:100%}
.dots i{display:block;aspect-ratio:1;border-radius:50%;background:var(--emerald)}
.dots i.out{background:transparent;box-shadow:inset 0 0 0 1.5px var(--clay)}
.figure{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:center;margin-top:var(--s6)}
.figure figcaption{font-size:var(--step--1);color:var(--ink-soft);max-width:22rem}
.stat b{display:block;font-family:var(--serif);font-size:var(--step-3);font-weight:400;
  color:var(--emerald);line-height:1}
.stat span{display:block;font-size:var(--step--1);color:var(--ink-soft);margin-top:var(--s2);max-width:16rem}

/* ---------- scorecard meter ---------- */
.meter-track{height:3px;background:var(--warm);border-radius:2px;overflow:hidden}
.meter-track>div{height:100%;width:0;background:var(--gold);transition:width .3s var(--ease)}
.meter{height:10px;border-radius:5px;margin:var(--s4) 0 0;max-width:24rem;position:relative;
  background:linear-gradient(90deg,#9A4A2E 0%,#C08A2E 50%,#1B4D3E 100%)}
.meter span{position:absolute;top:-5px;width:3px;height:20px;background:var(--ink);
  border-radius:2px;left:0;transition:left .5s var(--ease)}

/* ---------- lead dialog, newsletter ---------- */
dialog.lead{border:1.5px solid var(--ink);border-radius:var(--radius);padding:var(--s6);
  max-width:34rem;width:calc(100vw - 2rem);background:var(--cream);color:var(--ink);
  box-shadow:var(--shadow)}
dialog.lead::backdrop{background:rgba(23,20,15,.55)}
.lead-x{display:flex;justify-content:flex-end;margin:calc(var(--s4) * -1) calc(var(--s4) * -1) 0 0}
.lead-x .x{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--muted);
  padding:var(--s2) var(--s3);min-height:2.75rem;min-width:2.75rem}
.lead-x .x:hover{color:var(--ink)}
dialog.lead h2{font-size:var(--step-2)}
.lead-about{font-size:var(--step--1);color:var(--ink-soft);margin:var(--s3) 0 var(--s5);
  padding-bottom:var(--s4);border-bottom:1px solid var(--hair)}
.lead-about b{font-weight:600;color:var(--emerald)}
.news{display:grid;gap:var(--s3);max-width:20rem}
.news select,.news input[type="email"]{font:inherit;font-size:var(--step--1);width:100%;
  padding:.6rem .7rem;background:var(--on-dark-tint);color:var(--on-dark);
  border:1px solid var(--on-dark-line);border-radius:var(--radius);min-height:2.75rem}
.news select option{color:var(--ink);background:var(--paper)}
.news .btn{width:100%}
.news-note{font-size:.72rem;color:var(--on-dark-faint);line-height:1.45;max-width:none}
.sr-lite{font-size:.72rem;color:var(--on-dark-faint)}

/* ============================================================
   THE THREE DOORS · one logo colour each, as entry panels.
   ============================================================ */
.doors{display:grid;gap:0;border-top:1px solid var(--line)}
@media(min-width:52rem){.doors{grid-template-columns:repeat(3,1fr)}}
.door{display:flex;flex-direction:column;gap:var(--s4);padding:var(--s8) var(--gutter) var(--s7);
  text-decoration:none;position:relative;isolation:isolate;min-height:22rem;
  transition:background var(--speed) var(--ease)}
.door+.door{border-top:1px solid var(--line)}
@media(min-width:52rem){.door+.door{border-top:0;border-left:1px solid var(--line)}}
.door-a{background:var(--deep);color:var(--on-dark)}
.door-a:hover{background:var(--deep-2);color:var(--on-dark)}
.door-b{background:var(--gold);color:var(--ink)}
.door-b:hover{background:var(--gold-bright);color:var(--ink)}
.door-c{background:var(--amber);color:var(--ink)}
.door-c:hover{background:var(--amber-l);color:var(--ink)}
.door-who{font-size:var(--step--1);font-weight:600;letter-spacing:.02em}
.door-a .door-who{color:var(--gold-l)}
.door-b .door-who{color:var(--deep)}
.door-c .door-who{color:var(--ink)}
.door h2{font-size:var(--step-2);line-height:1.1}
.door p{font-size:var(--step--1);line-height:1.55;max-width:26rem}
.door-a p{color:var(--on-dark-soft)}
.door-b p{color:var(--deep)}
.door-c p{color:var(--ink)}
.door-entry{margin-top:auto;padding-top:var(--s5);border-top:1px solid currentColor;
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline}
.door-a .door-entry{border-top-color:var(--on-dark-line)}
.door-b .door-entry,.door-c .door-entry{border-top-color:rgba(10,46,64,.3)}
.door-entry b{font-family:var(--serif);font-size:var(--step-1);font-weight:400}
.door-entry span{font-size:var(--step--1)}
.door-a .door-entry span{color:var(--on-dark-faint)}
.door-b .door-entry span{color:var(--deep)}
.door-c .door-entry span{color:var(--ink)}
.door-open{font-size:var(--step--1);font-weight:600}

/* the manifesto, one sentence, large */
.manifesto{background:var(--deep-3);color:var(--on-dark);padding-block:var(--s9)}
.manifesto p{font-family:var(--serif);font-size:clamp(1.5rem,3.3vw,2.6rem);line-height:1.22;
  max-width:26ch;font-weight:300}
.manifesto em{font-style:normal;color:var(--gold-l)}

/* free entry points */
.free{display:grid;gap:var(--s4)}
@media(min-width:40rem){.free{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.free{grid-template-columns:repeat(4,1fr)}}
.free-item{background:var(--cream);border:1px solid var(--line);border-left:4px solid var(--tread,var(--gold));
  padding:var(--s5);text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:var(--s2);
  transition:transform var(--speed) var(--ease)}
.free-item:hover{transform:translateX(3px);color:var(--ink)}
.free-item b{font-family:var(--serif);font-size:var(--step-1);font-weight:400}
.free-item p{font-size:var(--step--1);color:var(--ink-soft);max-width:none;line-height:1.5;flex-grow:1}
.free-item span{font-size:.74rem;font-weight:600;color:var(--tread-ink,var(--gold-ink))}