/* =====================================================================
   Lawton.ai — AP2 "Two signatures"
   Home page section (.lw-ap-home) and /approach/ page (.lw-ap-page).
   Everything is scoped under .lw-ap and prefixed lw-ap-.

   Start states (hidden / unlit) apply only under html.lw-ap-js, which the
   one-line <head> script sets. With JavaScript off, every section shows
   its finished state and all words are readable.

   Phone rules: the single @media (max-width:calc(1023 * var(--s))) block near the end.
   Reduced motion: the @media (prefers-reduced-motion: reduce) block at the end.

   On lawton.ai (site/public/assets/css/lw-ap.css): ported from the design package with three
   changes. Sizes are calc(N * var(--s)) instead of N px, so the design grows with the screen
   above 1440 like the rest of the site (--s is one design pixel at 1440, and 1px below it;
   1-2px hairlines and the phone block stay in px). The two 1440px max-width boxes follow the
   site's side gutters instead. And .lw-ap resets the body's weight and line height to the
   browser defaults the design was drawn with.
   ===================================================================== */

.lw-ap {
  --ink: #0D0D12;
  --ink-2: #2A2A33;
  --ink-3: #4A4A55;
  --ink-4: #5D5D66;
  --mute: #8F8F8F;
  --violet: #7674F1;
  --violet-text: #5552E0;
  --violet-deep: #3B39B8;
  --lilac: #F4F3FB;
  --lilac-line: #E2DFE8;
  --line: #ECECF0;
  --grey: #F4F3F7;
  --yellow: #F1C40F;
  --yellow-soft: #FFF6D6;
  --yellow-card: #FFFBEA;
  --yellow-line: #F3E3A0;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'Inter Tight', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --s: max(1px, 0.069444vw);
  font-weight: 400;
  line-height: normal;
  background: #FFFFFF;
  color: var(--ink);
  font-family: var(--sans);
}
.lw-ap *, .lw-ap *::before, .lw-ap *::after { box-sizing: border-box; }

/* ---------- keyframes ---------- */
@keyframes lw-ap-sweep { 0% { opacity: 0; color: #7674F1; transform: translateY(.18em); } 35% { opacity: 1; color: #7674F1; transform: none; } 100% { opacity: 1; color: #0D0D12; transform: none; } }
@keyframes lw-ap-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes lw-ap-flip { from { opacity: 0; transform: perspective(800px) rotateX(-55deg) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes lw-ap-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lw-ap-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(241,196,15,.6); } 50% { box-shadow: 0 0 0 12px rgba(241,196,15,0); } }
@keyframes lw-ap-stamp { 0% { opacity: 0; transform: scale(1.5) rotate(-10deg); } 60% { opacity: 1; transform: scale(.95) rotate(-4deg); } 100% { opacity: 1; transform: scale(1) rotate(-4deg); } }
@keyframes lw-ap-stamp-sm { 0% { opacity: 0; transform: scale(1.6) rotate(-8deg); } 60% { opacity: 1; transform: scale(.94) rotate(-3deg); } 100% { opacity: 1; transform: scale(1) rotate(-3deg); } }
@keyframes lw-ap-vflow { from { background-position: 0 -60%, 0 0; } to { background-position: 0 160%, 0 0; } }
@keyframes lw-ap-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Infinite loops pause while their section is off screen or the tab is hidden (lw-ap.js sets .is-paused). */
.lw-ap .is-paused *, .lw-ap.is-paused * { animation-play-state: paused !important; }

/* ---------- shared pieces ---------- */
.lw-ap-eyebrow { margin: 0; font-size: calc(12 * var(--s)); letter-spacing: .01em; text-transform: uppercase; font-weight: 500; }
.lw-ap-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(18 * var(--s)); }
.lw-ap-dot { width: calc(10 * var(--s)); height: calc(10 * var(--s)); border-radius: 50%; background: var(--yellow); flex-shrink: 0; }

/* Character sweep on two-line headings */
.lw-ap-line { display: block; }
.lw-ap-word { display: inline-block; white-space: nowrap; margin-right: .22em; }
.lw-ap-ch { display: inline-block; }
.lw-ap-js .lw-ap-sweep .lw-ap-ch { opacity: 0; }
.lw-ap-js .is-in .lw-ap-sweep .lw-ap-ch, .lw-ap-js .lw-ap-sweep.is-in .lw-ap-ch { animation: lw-ap-sweep 1.1s var(--ease) var(--d, 0ms) both; }

/* Generic reveal: .lw-ap-rv children rise when their section gets .is-in */
.lw-ap-js .lw-ap-rv { opacity: 0; }
.lw-ap-js .is-in .lw-ap-rv { animation: lw-ap-rise .7s var(--ease) var(--d, 0ms) both; }

/* Text-roll link */
.lw-ap-link { display: inline-flex; align-items: center; gap: calc(10 * var(--s)); color: var(--ink); text-decoration: none; }
.lw-ap-roll { position: relative; display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2em; vertical-align: bottom; }
.lw-ap-roll > span { display: block; transition: transform .35s cubic-bezier(.6,0,.2,1); }
.lw-ap-roll > span + span { color: var(--violet-text); }
.lw-ap-link:hover .lw-ap-roll > span, .lw-ap-link:focus-visible .lw-ap-roll > span { transform: translateY(-100%); }
.lw-ap-link svg { transition: transform .25s ease; }
.lw-ap-link:hover svg { transform: translateX(calc(5 * var(--s))); }

.lw-ap-btn { display: inline-flex; align-items: center; gap: calc(12 * var(--s)); min-height: calc(56 * var(--s)); padding: 0 calc(26 * var(--s)); border-radius: calc(999 * var(--s)); background-color: var(--ink); color: #FFFFFF; font-size: calc(16 * var(--s)); font-weight: 500; text-decoration: none; transition: background-color .25s; }
.lw-ap-btn:hover { background-color: #2A2A40; }
.lw-ap-btn svg { transition: transform .25s ease; }
.lw-ap-btn:hover svg { transform: translateX(calc(4 * var(--s))); }

.lw-ap-link:focus-visible, .lw-ap-btn:focus-visible, .lw-ap-step:focus-visible, .lw-ap-nav:focus-visible,
.lw-ap-pr:focus-visible, .lw-ap-faq summary:focus-visible, .lw-ap-panel:focus-visible { outline: 2px solid var(--violet-text); outline-offset: calc(4 * var(--s)); border-radius: calc(6 * var(--s)); }

/* =====================================================================
   HOME SECTION
   ===================================================================== */
.lw-ap-home__wrap { margin: 0 auto; padding: calc(112 * var(--s)) var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(18 * var(--s)); align-items: start; }
.lw-ap-home__left { grid-column: 1 / span 5; position: sticky; top: calc(40 * var(--s)); display: flex; flex-direction: column; gap: calc(26 * var(--s)); }
.lw-ap-home__h { margin: 0; font-weight: 300; font-size: min(calc(84 * var(--s)), 5.84vw); /* site: below 1440 it shrinks with the column, so "The consulting" stays on one line */ line-height: 1.02; letter-spacing: -.04em; }
.lw-ap-home__intro { margin: 0; font-size: calc(18 * var(--s)); line-height: 1.55; color: var(--ink-2); max-width: 40ch; }
.lw-ap-home__note { margin: 0; font-family: var(--serif); font-style: italic; font-size: calc(22 * var(--s)); line-height: 1.3; color: var(--ink-2); max-width: 32ch; }
.lw-ap-home__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(18 * var(--s)) calc(28 * var(--s)); margin-top: calc(6 * var(--s)); }
.lw-ap-home__actions .lw-ap-link { font-size: calc(17 * var(--s)); font-weight: 500; }

.lw-ap-rail { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(6 * var(--s)); }
.lw-ap-stage { position: relative; display: grid; grid-template-columns: calc(64 * var(--s)) minmax(0, 1fr); column-gap: calc(18 * var(--s)); align-items: stretch; }
.lw-ap-stage__track { position: relative; border-radius: calc(10 * var(--s)); overflow: hidden; background: #F7F7F9; border: 1.5px solid var(--line); min-height: calc(84 * var(--s)); }
.lw-ap-stage__fill { position: absolute; inset: 0; background: var(--violet); transform-origin: 50% 0; transform: scaleY(1); transition: transform .38s linear; }
.lw-ap-stage__num { position: absolute; left: 0; right: 0; top: calc(10 * var(--s)); text-align: center; font-size: calc(12 * var(--s)); font-weight: 500; color: #FFFFFF; transition: color .3s; }
.lw-ap-stage__card { position: relative; display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--s)); padding: calc(16 * var(--s)) calc(20 * var(--s)) calc(16 * var(--s)) calc(20 * var(--s)); border-radius: calc(14 * var(--s)); background: var(--lilac); border: 1px solid var(--lilac-line); transition: background-color .35s, border-color .35s; }
.lw-ap-stage__title { font-family: var(--serif); font-size: calc(30 * var(--s)); line-height: 1.05; color: var(--ink); transition: color .35s; }
.lw-ap-stage__line { font-size: calc(15 * var(--s)); line-height: 1.5; color: var(--ink-3); }
.lw-ap-stage.is-you .lw-ap-stage__track { background: #FFFFFF; border-color: var(--yellow); }
.lw-ap-stage.is-you .lw-ap-stage__fill { background: var(--yellow-soft); }
.lw-ap-stage.is-you .lw-ap-stage__num { color: var(--ink); }
.lw-ap-stage.is-you .lw-ap-stage__card { background: var(--yellow-card); border-color: var(--yellow-line); padding-right: calc(180 * var(--s)); }
.lw-ap-stage__stamp { position: absolute; right: calc(18 * var(--s)); top: 50%; margin-top: calc(-19 * var(--s)); display: inline-flex; align-items: center; gap: calc(8 * var(--s)); padding: calc(9 * var(--s)) calc(14 * var(--s)); border-radius: calc(999 * var(--s)); background: var(--ink); border: 1.5px solid var(--ink); color: #FFFFFF; font-size: calc(12 * var(--s)); font-weight: 500; letter-spacing: .01em; text-transform: uppercase; box-shadow: 0 calc(8 * var(--s)) calc(18 * var(--s)) calc(-10 * var(--s)) rgba(13,13,18,.6); transform: rotate(-3deg); }
/* Unlit state (JS on, stage not reached yet) */
.lw-ap-js .lw-ap-stage:not(.is-on) .lw-ap-stage__fill { transform: scaleY(0); }
.lw-ap-js .lw-ap-stage:not(.is-on) .lw-ap-stage__num { color: var(--mute); }
.lw-ap-js .lw-ap-stage:not(.is-on) .lw-ap-stage__card { background: #FFFFFF; border-color: var(--line); }
.lw-ap-js .lw-ap-stage:not(.is-on) .lw-ap-stage__title { color: var(--mute); }
.lw-ap-js .lw-ap-stage:not(.is-on) .lw-ap-stage__stamp { opacity: 0; }
.lw-ap-js .lw-ap-stage.is-on .lw-ap-stage__stamp { animation: lw-ap-stamp-sm .55s cubic-bezier(.2,.8,.2,1) .3s both; }

/* =====================================================================
   /APPROACH/ PAGE
   ===================================================================== */
.lw-ap-page__wrap { margin: 0 auto; padding: 0 var(--gutter); }
.lw-ap-h1 { margin: 0; font-weight: 300; font-size: calc(104 * var(--s)); line-height: 1.02; letter-spacing: -.04em; }
.lw-ap-h3 { margin: 0; font-weight: 300; font-size: calc(72 * var(--s)); line-height: 1.02; letter-spacing: -.04em; }

/* 1 · heading */
.lw-ap-head { padding: calc(140 * var(--s)) 0 calc(112 * var(--s)); align-items: end; }
.lw-ap-head__title { grid-column: 1 / span 8; display: flex; flex-direction: column; gap: calc(24 * var(--s)); }
.lw-ap-head__intro { grid-column: 9 / span 4; margin: 0; font-size: calc(19 * var(--s)); line-height: 1.55; color: var(--ink-2); }

/* section heads (plan, swarm) */
.lw-ap-sechead { row-gap: calc(20 * var(--s)); align-items: end; }
.lw-ap-sechead__title { grid-column: 1 / span 7; display: flex; flex-direction: column; gap: calc(22 * var(--s)); }
.lw-ap-sechead__intro { grid-column: 9 / span 4; margin: 0; font-size: calc(18 * var(--s)); line-height: 1.55; color: var(--ink-2); }

/* 2 · journey stepper */
.lw-ap-journey { border-top: 1px solid var(--ink); padding: calc(56 * var(--s)) 0 calc(112 * var(--s)); display: flex; flex-direction: column; gap: calc(36 * var(--s)); }
.lw-ap-journey__top { align-items: end; }
.lw-ap-journey__top .lw-ap-eyebrow { grid-column: 1 / span 6; }
.lw-ap-journey__note { grid-column: 7 / span 6; margin: 0; justify-self: end; font-family: var(--serif); font-style: italic; font-size: calc(22 * var(--s)); color: var(--ink-2); }
.lw-ap-swipe { display: none; font-size: calc(12 * var(--s)); letter-spacing: .01em; text-transform: uppercase; font-weight: 500; color: var(--ink-4); }
.lw-ap-steps-wrap { position: relative; }
.lw-ap-steps__line, .lw-ap-steps__fill { position: absolute; left: 0; right: 0; top: calc(9 * var(--s)); height: 2px; }
.lw-ap-steps__line { background: var(--line); }
.lw-ap-steps__fill { background: var(--violet); transform-origin: 0 50%; transform: scaleX(var(--step-fill, 0)); transition: transform .5s cubic-bezier(.4,0,.2,1); }
.lw-ap-steps { position: relative; display: flex; gap: calc(18 * var(--s)); }
.lw-ap-step { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: calc(12 * var(--s)); padding: 0 calc(6 * var(--s)) calc(18 * var(--s)) 0; position: relative; }
.lw-ap-step__dot { width: calc(20 * var(--s)); height: calc(20 * var(--s)); border-radius: 50%; border: 2px solid #C9C6D4; background: #FFFFFF; transition: background-color .3s, border-color .3s, box-shadow .3s; }
.lw-ap-step__num { font-size: calc(12 * var(--s)); font-weight: 500; color: var(--ink-4); }
.lw-ap-step__name { font-family: var(--serif); font-size: calc(22 * var(--s)); line-height: 1.1; color: var(--ink-4); transition: color .3s; }
.lw-ap-step:hover .lw-ap-step__name { color: var(--violet-text); }
.lw-ap-step.is-past .lw-ap-step__dot, .lw-ap-step.is-on .lw-ap-step__dot { border-color: var(--violet); background: var(--violet); }
.lw-ap-step.is-on .lw-ap-step__dot { box-shadow: 0 0 0 calc(6 * var(--s)) rgba(118,116,241,.18); }
.lw-ap-step.is-you .lw-ap-step__dot { border-color: var(--yellow); background: #FFFFFF; }
.lw-ap-step.is-you.is-past .lw-ap-step__dot, .lw-ap-step.is-you.is-on .lw-ap-step__dot { background: var(--yellow-soft); }
.lw-ap-step.is-you.is-on .lw-ap-step__dot { box-shadow: 0 0 0 calc(6 * var(--s)) rgba(241,196,15,.25); }
.lw-ap-step.is-on .lw-ap-step__num { color: var(--violet-text); }
.lw-ap-step.is-on .lw-ap-step__name { color: var(--ink); }

.lw-ap-panels { display: flex; flex-direction: column; gap: calc(56 * var(--s)); }
.lw-ap-panel { display: flex; flex-direction: column; gap: calc(28 * var(--s)); padding-top: calc(12 * var(--s)); }
.lw-ap-panel[hidden] { display: none; }
.lw-ap-panel__head { display: flex; align-items: baseline; gap: calc(20 * var(--s)); flex-wrap: wrap; }
.lw-ap-panel__num { font-size: calc(12 * var(--s)); font-weight: 500; color: var(--violet-text); }
.lw-ap-panel__name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: calc(72 * var(--s)); line-height: .95; }
.lw-ap-pill { align-self: center; display: inline-flex; align-items: center; gap: calc(8 * var(--s)); padding: calc(7 * var(--s)) calc(14 * var(--s)); border-radius: calc(999 * var(--s)); background: var(--yellow-soft); border: 1px solid var(--yellow); font-size: calc(12 * var(--s)); font-weight: 500; letter-spacing: .01em; text-transform: uppercase; }
.lw-ap-pill .lw-ap-dot { width: calc(9 * var(--s)); height: calc(9 * var(--s)); }
.lw-ap-cells { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(14 * var(--s)); }
.lw-ap-cell { grid-column: span var(--span, 2); border-radius: calc(20 * var(--s)); background: var(--grey); padding: calc(24 * var(--s)) calc(24 * var(--s)) calc(26 * var(--s)); display: flex; flex-direction: column; gap: calc(12 * var(--s)); }
.lw-ap-cell.is-you { background: var(--yellow-card); }
.lw-ap-cell__label { font-size: calc(12 * var(--s)); letter-spacing: .01em; text-transform: uppercase; font-weight: 500; color: var(--ink-4); }
.lw-ap-cell.is-you .lw-ap-cell__label { color: var(--ink); }
.lw-ap-cell__text { font-size: calc(18 * var(--s)); line-height: 1.5; }
.lw-ap-agents { display: flex; flex-direction: column; gap: calc(8 * var(--s)); }
.lw-ap-agent { display: flex; align-items: center; gap: calc(10 * var(--s)); font-size: calc(17 * var(--s)); }
.lw-ap-gdot { width: calc(10 * var(--s)); height: calc(10 * var(--s)); border-radius: 50%; flex-shrink: 0; }
.lw-ap-agent__group { margin-left: auto; font-size: calc(11 * var(--s)); letter-spacing: .01em; text-transform: uppercase; font-weight: 500; }
.lw-ap-panel.is-fresh .lw-ap-fresh { animation: lw-ap-fade .45s ease var(--d, 0ms) both; }

.lw-ap-stepnav { display: none; justify-content: space-between; gap: calc(12 * var(--s)); }
.lw-ap-js .lw-ap-stepnav { display: flex; }
.lw-ap-nav { all: unset; box-sizing: border-box; cursor: pointer; min-height: calc(48 * var(--s)); padding: calc(12 * var(--s)) calc(20 * var(--s)); border-radius: calc(999 * var(--s)); border: 1px solid #D8D5DE; font-size: calc(15 * var(--s)); display: inline-flex; align-items: center; gap: calc(10 * var(--s)); transition: border-color .25s, opacity .25s; }
.lw-ap-nav:hover { border-color: var(--ink); }
.lw-ap-nav[aria-disabled="true"] { opacity: .35; cursor: default; }

/* 3 · how we work */
.lw-ap-how { --flow: 1.5s; border-top: 1px solid var(--ink); padding: calc(56 * var(--s)) 0 calc(64 * var(--s)); }
.lw-ap-how[data-hp="4"] { --flow: 4.2s; }
.lw-ap-how__side { grid-column: 1 / span 3; position: sticky; top: calc(40 * var(--s)); align-self: start; display: flex; flex-direction: column; gap: calc(18 * var(--s)); }
.lw-ap-vis { width: 100%; max-width: calc(300 * var(--s)); border-radius: calc(24 * var(--s)); background: var(--grey); padding: calc(18 * var(--s)) calc(14 * var(--s)) calc(14 * var(--s)); display: flex; flex-direction: column; align-items: center; }
.lw-ap-vnode { background: rgba(255,255,255,.55); border: 1.5px solid transparent; transition: background-color .3s, border-color .3s; }
.lw-ap-vlabel { font-size: calc(12 * var(--s)); font-weight: 500; color: var(--ink-2); }
.lw-ap-v-dept { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--s)); padding: calc(10 * var(--s)) calc(14 * var(--s)); border-radius: calc(16 * var(--s)); }
.lw-ap-stack { position: relative; width: calc(74 * var(--s)); height: calc(34 * var(--s)); }
.lw-ap-stack span { position: absolute; height: calc(22 * var(--s)); border-radius: calc(6 * var(--s)); }
.lw-ap-stack span:nth-child(1) { left: calc(10 * var(--s)); top: 0; width: calc(54 * var(--s)); background: var(--lilac-line); }
.lw-ap-stack span:nth-child(2) { left: calc(5 * var(--s)); top: calc(5 * var(--s)); width: calc(64 * var(--s)); background: #D2CEF7; }
.lw-ap-stack span:nth-child(3) { left: 0; top: calc(11 * var(--s)); width: calc(74 * var(--s)); height: calc(23 * var(--s)); background: var(--violet); }
.lw-ap-flow { width: 2px; height: calc(16 * var(--s)); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #7674F1 50%, rgba(255,255,255,0) 100%) no-repeat, #D8D5DE; background-size: 100% 45%, 100% 100%; animation: lw-ap-vflow var(--flow) linear var(--fd, 0s) infinite; }
.lw-ap-v-inputs { display: flex; gap: calc(8 * var(--s)); width: 100%; max-width: calc(236 * var(--s)); padding: calc(8 * var(--s)); border-radius: calc(18 * var(--s)); }
.lw-ap-vin { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--s)); padding: calc(10 * var(--s)) calc(6 * var(--s)); border-radius: calc(12 * var(--s)); background: #FFFFFF; }
.lw-ap-people { display: flex; gap: calc(4 * var(--s)); align-items: flex-end; }
.lw-ap-people span { width: calc(12 * var(--s)); height: calc(12 * var(--s)); border-radius: 50%; background: #3BA7EE; }
.lw-ap-people span:nth-child(2) { width: calc(14 * var(--s)); height: calc(14 * var(--s)); animation: lw-ap-bob 1.6s ease-in-out infinite; }
.lw-ap-sys { display: grid; grid-template-columns: repeat(3, calc(8 * var(--s))); gap: calc(3 * var(--s)); }
.lw-ap-sys span { width: calc(8 * var(--s)); height: calc(6 * var(--s)); border-radius: 2px; background: #C9C6D4; transition: background-color .4s; }
.lw-ap-v-plan { display: flex; flex-direction: column; gap: calc(7 * var(--s)); width: 100%; max-width: calc(180 * var(--s)); padding: calc(12 * var(--s)) calc(14 * var(--s)); border-radius: calc(14 * var(--s)); }
.lw-ap-v-plan .lw-ap-vlabel { color: var(--ink); }
.lw-ap-vline { display: flex; align-items: center; gap: calc(8 * var(--s)); }
.lw-ap-vline > span { height: calc(6 * var(--s)); border-radius: calc(3 * var(--s)); background: var(--lilac-line); }
.lw-ap-vline svg { color: #C9C6D4; transition: color .3s; }
.lw-ap-v-draft { display: flex; align-items: center; gap: calc(10 * var(--s)); padding: calc(12 * var(--s)) calc(16 * var(--s)); border-radius: calc(14 * var(--s)); border-style: dashed; border-color: transparent; }
.lw-ap-v-draft .lw-ap-vlabel, .lw-ap-v-inputs .lw-ap-vlabel { color: var(--ink); }
.lw-ap-v-you { display: flex; align-items: center; gap: calc(10 * var(--s)); }
.lw-ap-v-you .lw-ap-vlabel { font-size: calc(13 * var(--s)); color: var(--ink); }
.lw-ap-youdot { width: calc(26 * var(--s)); height: calc(26 * var(--s)); border-radius: 50%; background: var(--yellow-soft); border: calc(4 * var(--s)) solid var(--yellow); animation: lw-ap-blink 2.4s ease-in-out infinite; }
.lw-ap-vrail { margin-top: calc(14 * var(--s)); display: grid; grid-template-columns: repeat(4, auto); gap: 2px; padding: calc(4 * var(--s)); border-radius: calc(12 * var(--s)); background: rgba(255,255,255,.55); transition: background-color .3s; }
.lw-ap-vstage { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--s)); padding: calc(6 * var(--s)); border-radius: calc(8 * var(--s)); font-size: calc(11 * var(--s)); font-weight: 500; color: var(--ink-4); transition: background-color .3s, color .3s; }
.lw-ap-vstage > span { width: calc(20 * var(--s)); height: calc(3 * var(--s)); border-radius: 2px; background: var(--lilac-line); transition: background-color .3s; }
/* highlight per principle: 0 dept · 1 inputs · 2 plan · 3 draft · 4 pace · 5 rail */
.lw-ap-how[data-hp="0"] .lw-ap-v-dept,
.lw-ap-how[data-hp="1"] .lw-ap-v-inputs,
.lw-ap-how[data-hp="2"] .lw-ap-v-plan,
.lw-ap-how[data-hp="3"] .lw-ap-v-draft { background: #FFFFFF; border-color: var(--violet); }
.lw-ap-how[data-hp="1"] .lw-ap-sys span:nth-child(odd) { background: #3BA7EE; }
.lw-ap-how[data-hp="2"] .lw-ap-vline svg { color: var(--violet-text); }
.lw-ap-how[data-hp="4"] .lw-ap-vstage:nth-child(-n+2) > span { background: var(--violet); }
.lw-ap-how[data-hp="5"] .lw-ap-vrail { background: #FFFFFF; }
.lw-ap-how[data-hp="5"] .lw-ap-vstage { background: var(--lilac); color: var(--violet-deep); }
.lw-ap-how[data-hp="5"] .lw-ap-vstage > span { background: var(--violet); }
.lw-ap-how__cap { margin: 0; display: flex; align-items: baseline; gap: calc(12 * var(--s)); font-family: var(--serif); font-size: calc(24 * var(--s)); line-height: 1.2; }
.lw-ap-how__capnum { font-family: var(--sans); font-size: calc(12 * var(--s)); font-weight: 500; color: var(--violet-text); }
.lw-ap-principles { grid-column: 4 / span 9; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(18 * var(--s)); align-self: start; }
.lw-ap-principles > li { border-top: 1px solid var(--line); }
.lw-ap-pr { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: calc(64 * var(--s)) minmax(0, 1fr); column-gap: calc(10 * var(--s)); width: 100%; padding: calc(26 * var(--s)) calc(14 * var(--s)); border-radius: calc(16 * var(--s)); transition: background-color .3s; }
.lw-ap-pr[aria-pressed="true"] { background-color: var(--lilac); }
.lw-ap-pr__num { font-weight: 300; font-size: calc(44 * var(--s)); line-height: 1; color: #C9C6FF; transition: color .3s; }
.lw-ap-pr[aria-pressed="true"] .lw-ap-pr__num { color: var(--violet-text); }
.lw-ap-pr__body { display: flex; flex-direction: column; gap: calc(8 * var(--s)); }
.lw-ap-pr__body h3 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: calc(30 * var(--s)); line-height: 1.08; }
.lw-ap-pr__body > span { font-size: calc(17 * var(--s)); line-height: 1.55; color: var(--ink-3); }

/* 4 · the plan */
.lw-ap-plan { border-top: 1px solid var(--ink); padding: calc(56 * var(--s)) 0 calc(112 * var(--s)); display: flex; flex-direction: column; gap: calc(40 * var(--s)); }
.lw-ap-pcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--s)); }
.lw-ap-pcard-wrap { transform-origin: 50% 0; }
.lw-ap-js .lw-ap-pcard-wrap { opacity: 0; }
.lw-ap-js .lw-ap-pcard-wrap.is-in { animation: lw-ap-flip .8s var(--ease) var(--d, 0ms) both; }
.lw-ap-pcard { position: relative; height: 100%; border-radius: calc(18 * var(--s)); background: #FFFFFF; border: 1px solid var(--lilac-line); box-shadow: 0 calc(20 * var(--s)) calc(40 * var(--s)) calc(-34 * var(--s)) rgba(13,13,18,.5); padding: calc(22 * var(--s)) calc(22 * var(--s)) calc(24 * var(--s)); display: flex; flex-direction: column; gap: calc(10 * var(--s)); min-height: calc(170 * var(--s)); overflow: hidden; transform: perspective(calc(900 * var(--s))) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.lw-ap-pcard > * { position: relative; z-index: 1; }
.lw-ap-pcard::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(calc(260 * var(--s)) circle at var(--mx, 50%) var(--my, 30%), rgba(118,116,241,.16), rgba(118,116,241,0) 70%); opacity: 0; transition: opacity .35s; }
.lw-ap-pcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(3 * var(--s)); z-index: 1; background: linear-gradient(90deg, #7674F1, #5552E0); transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s cubic-bezier(.6,0,.2,1); }
.lw-ap-pcard__top { display: flex; justify-content: space-between; align-items: center; }
.lw-ap-pcard__num { font-size: calc(12 * var(--s)); line-height: 1.3; font-weight: 500; color: var(--violet-text); }
.lw-ap-pcard__icon { color: var(--violet); transition: transform .45s var(--ease), color .3s; }
.lw-ap-pcard__title { font-family: var(--serif); font-size: calc(26 * var(--s)); line-height: 1.12; }
.lw-ap-pcard__title > span + span { color: var(--violet-text); }
.lw-ap-pcard__body { font-size: calc(15 * var(--s)); line-height: 1.5; color: var(--ink-3); }
.lw-ap-pcroll { position: relative; display: block; overflow: hidden; }
.lw-ap-pcroll > span { display: block; white-space: nowrap; transition: transform .45s cubic-bezier(.6,0,.2,1); }
.lw-ap-pcroll > span + span { position: absolute; left: 0; top: 0; transform: translateY(100%); }
/* site fix: the number's box was only as wide as "05", so the hover label showed as "Lin".
   Both copies share one grid cell, so the box is as wide as "Linked to its source". */
.lw-ap-pcard__num { display: grid; }
.lw-ap-pcard__num > span, .lw-ap-pcard__num > span + span { grid-area: 1 / 1; position: static; }
@media (hover: hover) {
  .lw-ap-pcard:hover { transform: perspective(calc(900 * var(--s))) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateY(calc(-6 * var(--s))); border-color: var(--violet); box-shadow: 0 calc(34 * var(--s)) calc(50 * var(--s)) calc(-30 * var(--s)) rgba(85,82,224,.45); }
  .lw-ap-pcard:hover::before { opacity: 1; }
  .lw-ap-pcard:hover::after { transform: scaleX(1); }
  .lw-ap-pcard:hover .lw-ap-pcroll > span:first-child { transform: translateY(-100%); }
  .lw-ap-pcard:hover .lw-ap-pcroll > span + span { transform: none; }
  .lw-ap-pcard:hover .lw-ap-pcard__icon { transform: rotate(-45deg) scale(1.2); color: var(--violet-text); }
}
.lw-ap-sign { display: flex; justify-content: flex-end; align-items: center; gap: calc(18 * var(--s)); border-top: 1px dashed #D8D5DE; padding-top: calc(22 * var(--s)); }
.lw-ap-sign__stamp { display: inline-flex; align-items: center; gap: calc(10 * var(--s)); padding: calc(12 * var(--s)) calc(18 * var(--s)); border-radius: calc(999 * var(--s)); background: var(--yellow-soft); border: 2px solid var(--yellow); font-size: calc(13 * var(--s)); font-weight: 500; letter-spacing: .01em; text-transform: uppercase; transform: rotate(-4deg); }
.lw-ap-sign__stamp .lw-ap-dot { width: calc(12 * var(--s)); height: calc(12 * var(--s)); }
.lw-ap-js .lw-ap-sign { opacity: 0; }
.lw-ap-js .lw-ap-sign.is-in { animation: lw-ap-rise .6s ease .5s both; }
.lw-ap-js .lw-ap-sign.is-in .lw-ap-sign__stamp { animation: lw-ap-stamp .6s cubic-bezier(.2,.8,.2,1) .9s both; }

/* 5 · swarm */
.lw-ap-swarm { border-top: 1px solid var(--ink); padding: calc(56 * var(--s)) 0 calc(112 * var(--s)); display: flex; flex-direction: column; gap: calc(40 * var(--s)); }
.lw-ap-headagent { align-self: center; display: flex; align-items: center; gap: calc(16 * var(--s)); padding: calc(18 * var(--s)) calc(26 * var(--s)); border-radius: calc(999 * var(--s)); background: var(--lilac); border: 1px solid #C9C6FF; }
.lw-ap-headagent__dot { width: calc(18 * var(--s)); height: calc(18 * var(--s)); border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 calc(5 * var(--s)) rgba(118,116,241,.2); flex-shrink: 0; }
.lw-ap-headagent__text { display: flex; flex-direction: column; gap: 2px; }
.lw-ap-headagent__name { font-family: var(--serif); font-size: calc(28 * var(--s)); line-height: 1; }
.lw-ap-headagent__does { font-size: calc(14 * var(--s)); color: var(--ink-3); }
.lw-ap-headagent__group { font-size: calc(11 * var(--s)); letter-spacing: .01em; text-transform: uppercase; font-weight: 500; color: var(--violet-deep); }
.lw-ap-bands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: calc(14 * var(--s)); }
.lw-ap-band { display: flex; flex-direction: column; gap: calc(10 * var(--s)); }
.lw-ap-band__line { align-self: center; width: 2px; height: calc(34 * var(--s)); background: #C9C6FF; transform-origin: 50% 0; transition: transform .5s cubic-bezier(.4,0,.2,1) var(--d, 0ms); }
.lw-ap-js .lw-ap-swarm:not(.is-in) .lw-ap-band__line { transform: scaleY(0); }
.lw-ap-band__head { display: flex; justify-content: space-between; align-items: baseline; border-top: calc(3 * var(--s)) solid var(--fill); padding-top: calc(10 * var(--s)); }
.lw-ap-band__label { font-size: calc(12 * var(--s)); letter-spacing: .01em; text-transform: uppercase; font-weight: 500; }
.lw-ap-band__count { font-size: calc(12 * var(--s)); color: var(--ink-4); }
.lw-ap-acard { border-radius: calc(16 * var(--s)); background: var(--grey); padding: calc(16 * var(--s)) calc(16 * var(--s)) calc(18 * var(--s)); display: flex; flex-direction: column; gap: calc(8 * var(--s)); }
.lw-ap-acard .lw-ap-gdot { background: var(--fill); }
.lw-ap-acard__name { display: flex; align-items: center; gap: calc(8 * var(--s)); font-family: var(--serif); font-size: calc(21 * var(--s)); line-height: 1.08; }
.lw-ap-acard__does { font-size: calc(14 * var(--s)); line-height: 1.45; color: var(--ink-3); }

/* 6 · FAQ */
.lw-ap-faqsec { padding: calc(56 * var(--s)) 0 calc(112 * var(--s)); border-top: 1px solid var(--ink); }
.lw-ap-faqsec > .lw-ap-eyebrow { grid-column: 1 / span 3; }
.lw-ap-faq { grid-column: 4 / span 9; display: flex; flex-direction: column; }
.lw-ap-faq details { border-bottom: 1px solid var(--line); }
.lw-ap-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: calc(24 * var(--s)); padding: calc(26 * var(--s)) 0; font-family: var(--serif); font-size: calc(30 * var(--s)); line-height: 1.15; }
.lw-ap-faq summary::-webkit-details-marker { display: none; }
.lw-ap-faq .lw-ap-plus { flex-shrink: 0; transition: transform .3s cubic-bezier(.6,0,.2,1); }
.lw-ap-faq details[open] .lw-ap-plus { transform: rotate(45deg); }
.lw-ap-faq p { margin: 0 0 calc(28 * var(--s)); font-size: calc(18 * var(--s)); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }

/* 7 · CTA */
.lw-ap-ctasec { padding: calc(56 * var(--s)) 0 calc(140 * var(--s)); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: calc(10 * var(--s)); }
.lw-ap-cta { margin: 0; font-family: var(--serif); font-size: calc(64 * var(--s)); line-height: 1.05; color: var(--mute); }
.lw-ap-cta--link { align-self: flex-start; gap: calc(22 * var(--s)); color: var(--ink); }

/* =====================================================================
   PHONE AND TABLET — every rule for narrow screens lives here
   ===================================================================== */
@media (max-width: 1023px) {
  /* shared */
  .lw-ap-grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .lw-ap-grid > * { grid-column: auto !important; position: static !important; }

  /* home section */
  .lw-ap-home__wrap { grid-template-columns: minmax(0, 1fr); row-gap: 48px; padding: 72px var(--gutter); }
  .lw-ap-home__left, .lw-ap-rail { grid-column: auto; position: static; }
  .lw-ap-home__h { font-size: 44px; }
  .lw-ap-stage { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; }
  .lw-ap-stage__card, .lw-ap-stage.is-you .lw-ap-stage__card { padding-right: 20px; }
  .lw-ap-stage__stamp { position: static; margin-top: 6px; align-self: flex-start; }

  /* /approach/ page */
  .lw-ap-head { padding: 88px 0 72px; }
  .lw-ap-h1 { font-size: 46px; }
  .lw-ap-h3 { font-size: 40px; }
  .lw-ap-journey__note { justify-self: start; font-size: 20px; }
  .lw-ap-journey, .lw-ap-plan, .lw-ap-swarm, .lw-ap-faqsec { padding-bottom: 72px; }
  .lw-ap-swipe { display: block; }
  .lw-ap-steps { overflow-x: auto; scrollbar-width: none; gap: 12px; }
  .lw-ap-steps::-webkit-scrollbar { display: none; }
  .lw-ap-step { flex: 0 0 120px; }
  .lw-ap-panel__name { font-size: 48px; }
  .lw-ap-cells, .lw-ap-principles, .lw-ap-pcards { grid-template-columns: minmax(0, 1fr); }
  .lw-ap-cell { grid-column: auto; }
  .lw-ap-how__side { align-items: flex-start; }
  .lw-ap-pr { grid-template-columns: 52px minmax(0, 1fr); padding: 22px 10px; }
  .lw-ap-pr__num { font-size: 36px; }
  .lw-ap-pr__body h3 { font-size: 26px; }
  .lw-ap-pcard__title > span { white-space: normal; }
  .lw-ap-headagent { align-self: stretch; border-radius: 24px; flex-wrap: wrap; }
  .lw-ap-bands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lw-ap-faq summary { font-size: 24px; }
  .lw-ap-cta { font-size: 38px; }
  .lw-ap-cta--link { gap: 14px; }
  .lw-ap-cta--link svg { width: 48px; }
  .lw-ap-cta--link { flex-wrap: wrap; row-gap: 6px; }
  .lw-ap-cta--link .lw-ap-roll { height: auto; overflow: visible; }
  .lw-ap-cta--link .lw-ap-roll > span + span { display: none; }
  .lw-ap-cta--link:hover .lw-ap-roll > span { transform: none; color: var(--violet-text); }
  .lw-ap-ctasec { padding-bottom: 96px; }
}

/* =====================================================================
   REDUCED MOTION — complete, still state
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lw-ap *, .lw-ap *::before, .lw-ap *::after { animation: none !important; transition: none !important; }
  .lw-ap-js .lw-ap-sweep .lw-ap-ch, .lw-ap-js .lw-ap-rv, .lw-ap-js .lw-ap-pcard-wrap, .lw-ap-js .lw-ap-sign { opacity: 1 !important; transform: none !important; }
  .lw-ap-pcard, .lw-ap-pcard:hover { transform: none !important; }
}