/* ============================================================
   MJCX Studio — Design System
   Typography : Futura (headers) + Georgia (body) + Consolas (tech)
   Palette    : Charcoal ink + warm amber/bronze signal (rebrand 2026-09-05; green family retired)
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* --- Brand --- */
  --ink:#0A0F16;
  --ink-2:#111A24;
  --navy-900:#07202F;
  --navy-800:#0B2C42;
  --navy-700:#124063;
  --navy-500:#1E5C86;

  --signal:#C4833B;          /* amber — graphic accent (Monish journey palette) */
  --signal-2:#8A5414;        /* bronze — secondary accent */
  --signal-deep:#8A5414;     /* accessible on light backgrounds */
  --signal-glow:rgba(196,131,59,.16);
  --signal-line:rgba(196,131,59,.34);

  /* --- Surfaces --- */
  --bg:#FFFFFF;
  --bg-subtle:#F4F6F8;
  --bg-muted:#EDF1F4;
  --bg-dark:#07111A;
  --bg-dark-2:#0C1A26;

  /* --- Text --- */
  --text:#0A0F16;
  --text-2:#3D4C5A;
  --text-3:#5B6A76;   /* 5.6:1 on white — audit 2026-09-05 (was #6B7B8A, 4.35) */
  --text-4:#606E7A;   /* 5.2:1 on white, 4.8:1 on bg-subtle — audit 2026-09-05 */
  --on-dark:#EAF2F7;
  --on-dark-2:#9DB2C2;
  --on-dark-3:#7B93A3; /* 5.5:1 on --bg-dark-2 (was #6C8395, 4.46) */
  --error:#BE3A2E;     /* form errors — 5.5:1 on white (was var(--error), ~2.6) */

  /* --- Lines --- */
  --line:#E2E8ED;
  --line-soft:#EFF3F6;
  --line-strong:#CBD5DD;
  --line-dark:rgba(255,255,255,.10);
  --line-dark-strong:rgba(255,255,255,.18);

  /* --- Geometry --- */
  --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px;
  --wrap:1160px;
  --wrap-narrow:760px;

  --sh-sm:0 1px 2px rgba(10,15,22,.05);
  --sh:0 2px 8px rgba(10,15,22,.06);
  --sh-md:0 8px 28px rgba(10,15,22,.08);
  --sh-lg:0 20px 60px rgba(10,15,22,.12);

  --font-display:'Futura',system-ui,-apple-system,sans-serif;
  --font-body:'Georgia',serif;
  --font-mono:'Consolas Text','Menlo Text','Consolas',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace;
  /* THE 3 FONTS (Monish 2026-09-08, restored; FONT LAW 2026-09-24): the
     Futura/Georgia/Consolas system stack IS the design — no web fonts.
     Fallbacks exist only for machines without Futura/Consolas.
     Ground rules (Leonard 2026-09-27): Futura for the big type; Georgia for
     most text and NOT bold — emphasis in Georgia is colour, not weight;
     Consolas runs small and thin, so it is scaled up ('Consolas Text',
     size-adjust below). Release note: Windows/Android display falls
     Space Grotesk → system-ui (law-compliant; macOS rendering unchanged). */

  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.22s; --dur-2:.45s;
}

html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  /* clip, not hidden: hidden computes overflow-y:auto, turning body into a
     scroll container (breaks position:sticky + programmatic scroll). Engines
     without clip keep the old behaviour. */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video{max-width:100%;height:auto;display:block} /* height:auto pairs with the build's width/height attrs (2026-09-24): without it, attr heights override the max-width shrink and distort scaled-down images */
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--signal);color:var(--ink)}
:focus-visible{outline:2px solid var(--signal-deep);outline-offset:3px;border-radius:3px}
.no-scroll{overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The mono runs small and thin next to Georgia — every mono label reads
   larger through these aliases (Leonard 2026-09-27). Windows ships
   Consolas; macOS has none outside MS Office, so Macs render Menlo — each
   gets its own scale. local() only: no font file ships. SVG art keeps the
   plain stack — its labels are measured to fit their boxes. */
@font-face{font-family:'Consolas Text';src:local('Consolas');size-adjust:115%}
@font-face{font-family:'Consolas Text';font-weight:700;src:local('Consolas Bold'),local('Consolas-Bold');size-adjust:115%}
@font-face{font-family:'Menlo Text';src:local('Menlo-Regular'),local('Menlo');size-adjust:110%}
@font-face{font-family:'Menlo Text';font-weight:700;src:local('Menlo-Bold'),local('Menlo Bold');size-adjust:110%}
/* SVG labels are budgeted in Consolas widths (0.550em/char). Macs have no
   Consolas and render Menlo (0.602em) — ~9.5% wider, which pushed labels
   past their boxes. Inside SVG, Menlo is scaled to Consolas' exact advance
   so every diagram fits the same on Mac and Windows. */
@font-face{font-family:'Menlo SVG';src:local('Menlo-Regular'),local('Menlo');size-adjust:91.3%}
@font-face{font-family:'Menlo SVG';font-weight:700;src:local('Menlo-Bold'),local('Menlo Bold');size-adjust:91.3%}
svg{--font-mono:'Consolas','Menlo SVG',ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace}

/* No bold Georgia (Leonard 2026-09-27): emphasis inside reading text is
   colour, not weight. Zero specificity — component rules can still opt in. */
:where(p,li,td,dd,blockquote,figcaption,q) :where(strong,b){font-weight:400;color:var(--text)}
:where(th){font-weight:400;color:var(--text)} /* browsers bold <th> by default */

/* ============================================================
   TYPE SCALE
   ============================================================ */
h1{font-family:var(--font-display);font-weight:500;letter-spacing:-.035em;line-height:1.1;color:var(--text)} /* 500 = Futura-Medium law from home hero */
h2,h3,h4,h5{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--text)}
/* type scale (live-site sizes, Leonard 2026-09-27): 56 / 42 / 22 / 17 */
h1{font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.035em}
h2{font-size:clamp(28px,3.6vw,42px);line-height:1.08;letter-spacing:-.03em}
h3{font-size:22px;line-height:1.25;letter-spacing:-.03em}
h4{font-size:17px;line-height:1.4;letter-spacing:-.01em}
p{color:var(--text-2)}

.lede{font-size:19px;line-height:1.6;color:var(--text-2);max-width:34rem} /* audit 2026-09-24 B4: measure law — 544px bound everywhere; services/projects already agree */
.eyebrow{
  font-family:var(--font-mono);font-size:.75rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal-deep);
  display:inline-flex;align-items:center;gap:.55rem;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--signal-deep);opacity:.55}
.eyebrow--plain::before{display:none}
.on-dark .eyebrow,.eyebrow--dark{color:var(--signal)}
.on-dark .eyebrow::before,.eyebrow--dark::before{background:var(--signal)}


.muted{color:var(--text-3)}
.small{font-size:.875rem}
.tiny{font-size:.78rem}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sec{padding:104px 0}
.sec--sm{padding:64px 0}
.sec--lg{padding:132px 0}
.sec--tight{padding:0 0 104px}
.sec-head{max-width:680px;margin-bottom:52px}
.sec-head h2{margin-top:14px}
.sec-head p{margin-top:16px;font-size:1.0625rem}
.sec-head--wide{max-width:820px}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}

.on-dark{background:var(--bg-dark);color:var(--on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark p{color:var(--on-dark-2)}
.on-dark .muted{color:var(--on-dark-3)}
.bg-subtle{background:var(--bg-subtle)}
.hr{height:1px;background:var(--line);border:0}

.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-64{margin-top:64px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-display);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  padding:.85rem 1.5rem;border-radius:var(--r-sm);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);
  white-space:nowrap;border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--navy-800);color:#fff;box-shadow:var(--sh-sm)}
.btn--primary:hover{background:var(--navy-900);box-shadow:var(--sh-md)}
.btn--signal{background:var(--signal);color:var(--ink);box-shadow:0 2px 0 rgba(138,84,20,.35)}
.btn--signal:hover{background:#D89A4F;box-shadow:0 6px 22px var(--signal-glow)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--navy-800);background:var(--bg-subtle)}
.on-dark .btn--ghost{color:var(--on-dark);border-color:var(--line-dark-strong)}
.on-dark .btn--ghost:hover{background:rgba(255,255,255,.06);border-color:var(--signal)}
.btn--lg{padding:1.02rem 1.9rem;font-size:1rem}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}

.link-arrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--font-display);font-weight:600;font-size:.94rem;
  color:var(--navy-700);
}
.link-arrow span:last-child{transition:transform var(--dur) var(--ease)}
.link-arrow:hover{color:var(--signal-deep)}
.link-arrow:hover span:last-child{transform:translateX(4px)}
.on-dark .link-arrow{color:var(--signal)}
.on-dark .link-arrow:hover{color:#fff}

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--text)}
.input,.select,.textarea{
  width:100%;padding:.85rem 1rem;background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font-size:.95rem;transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--text-4)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--navy-700);box-shadow:0 0 0 3px rgba(18,64,99,.10);
}
.textarea{min-height:120px;resize:vertical;line-height:1.6}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7B8A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}

/* Choice chips (radio/checkbox styled) */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;padding:.55rem 1rem;border:1px solid var(--line-strong);
  border-radius:100px;font-size:.875rem;font-weight:500;color:var(--text-2);
  cursor:pointer;transition:all var(--dur) var(--ease);user-select:none;
}
.chip span:hover{border-color:var(--navy-500);color:var(--text)}
.chip input:checked+span{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--signal-deep);outline-offset:2px}

.checkbox{display:flex;gap:.7rem;align-items:flex-start;font-size:.9rem;color:var(--text-2);cursor:pointer}
.checkbox input{width:18px;height:18px;margin-top:2px;accent-color:var(--navy-800);flex-shrink:0}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.nav.is-scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.94)}
.nav__inner{max-width:var(--wrap);margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:1.5rem}
.nav__logo{display:flex;align-items:center;margin-right:auto;flex-shrink:0;padding:9px 0;margin-block:-9px} /* margin-block, not the shorthand — it was clobbering margin-right:auto and LEFT-aligning the whole nav (Monish 2026-09-10: nav aligns right) */
.nav__logo img{height:26px;width:auto}
.nav__links{display:flex;align-items:center;gap:.25rem}
.nav__link{
  position:relative;padding:.5rem .7rem;border-radius:var(--r-xs);
  font-size:.9rem;font-weight:500;color:var(--text-2);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.nav__link:hover{color:var(--text);background:var(--bg-subtle)}
.nav__link.is-active{color:var(--text);font-weight:400} /* no bold Georgia — the underline marks it */
.nav__link.is-active::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.18rem;height:2px;
  background:var(--signal);border-radius:2px;
}
.nav__cta{margin-left:.6rem;padding:.6rem 1.15rem;font-size:.88rem}
.nav__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:var(--r-sm)}
.nav__burger:hover{background:var(--bg-subtle)}
.nav__burger i{display:block;width:18px;height:1.5px;background:var(--text);position:relative}
.nav__burger i::before,.nav__burger i::after{content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--text)}
.nav__burger i::before{top:-6px}.nav__burger i::after{top:6px}

.drawer{
  position:fixed;inset:0;z-index:300;background:var(--bg);
  transform:translateX(100%);transition:transform var(--dur-2) var(--ease-out);
  display:flex;flex-direction:column;padding:20px 32px 40px;overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.drawer__top img{height:26px}
.drawer__close{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--text-2);border-radius:var(--r-sm)}
.drawer__link{
  font-family:var(--font-display);font-size:1.6rem;font-weight:600;letter-spacing:-.02em;
  padding:.65rem 0;border-bottom:1px solid var(--line-soft);color:var(--text);
}
.drawer__link.is-active{color:var(--signal-deep)}
.drawer__stage{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-4);display:block;margin-bottom:2px}
.drawer .btn{margin-top:28px}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:88px 0 96px;position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-30%;right:-10%;width:60%;height:120%;
  background:radial-gradient(closest-side,var(--signal-glow),transparent 70%);
  pointer-events:none;z-index:-1;
}
/* contact hero: text-only hero with nothing to anchor the glow — it read as
   a rendering artifact, not a design element (audit 2026-09-07 P3) */
.hero--plain::before{display:none}
.hero__grid{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:center}
.hero h1{margin-top:20px}
.hero__sub{margin-top:22px;max-width:34rem}
.hero__actions{margin-top:34px;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.hero__meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.82rem;color:var(--text-3);font-family:var(--font-mono)}
.hero__meta span{display:inline-flex;align-items:center;gap:.4rem}
.hero__meta span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);flex-shrink:0}

/* ============================================================
   CARDS
   ============================================================ */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;background:var(--bg);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
a.card:hover{border-color:var(--navy-500);transform:translateY(-3px);box-shadow:var(--sh-md)}
.card__num{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;color:var(--text-4)}
.card h3{margin-top:12px;font-size:1.12rem}
.card p{margin-top:10px;font-size:.92rem;line-height:1.58}
.card__foot{margin-top:auto;padding-top:20px}

/* ============================================================
   ACCORDION
   ============================================================ */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 4px;text-align:left;
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-.014em;color:var(--text);
}
.acc__btn:hover{color:var(--navy-700)}
.acc__sign{position:relative;width:14px;height:14px;flex-shrink:0}
.acc__sign::before,.acc__sign::after{
  content:"";position:absolute;background:var(--text-3);border-radius:2px;transition:transform var(--dur) var(--ease);
}
.acc__sign::before{left:0;top:6px;width:14px;height:1.6px}
.acc__sign::after{left:6px;top:0;width:1.6px;height:14px}
.acc__item.is-open .acc__sign::after{transform:rotate(90deg)}
.acc__panel{overflow:hidden;height:0;transition:height var(--dur-2) var(--ease-out)}
.acc__inner{padding:0 4px 24px;max-width:70ch}
.acc__inner p+p{margin-top:12px}
.acc__inner strong{color:var(--text)}

/* Featured quote block */
.placeholder{
  border:1px dashed var(--line-strong);border-radius:var(--r);padding:20px 22px;
  background:repeating-linear-gradient(135deg,transparent,transparent 8px,var(--bg-muted) 8px,var(--bg-muted) 9px);
  font-family:var(--font-mono);font-size:.78rem;color:var(--text-3);line-height:1.6;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.form-stack{display:flex;flex-direction:column;gap:22px}
.contact-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;background:var(--bg-subtle)}
.contact-card h3{font-size:1.05rem}
.contact-line{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-line:last-child{border-bottom:none;padding-bottom:0}
.contact-line__k{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-4);width:82px;flex-shrink:0;padding-top:3px}
.contact-line__v{font-size:.94rem;color:var(--text)}
.contact-line__v span{display:block;font-size:.82rem;color:var(--text-3);margin-top:2px}
.booking{margin-top:28px;display:none}
.booking.is-shown{display:block;animation:fadeUp .45s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============================================================
   ARTICLE / PROSE
   ============================================================ */
.crumbs{display:flex;flex-wrap:wrap;gap:.4rem;font-family:var(--font-mono);font-size:.75rem;color:var(--text-4);letter-spacing:.06em}
.crumbs a:hover{color:var(--signal-deep)}
.crumbs span{color:var(--line-strong)}

.article-hero{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.article-hero h1{font-size:clamp(2rem,4vw,3rem);margin-top:20px;max-width:20ch}
.article-hero .lede{margin-top:22px;max-width:62ch}
.article-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:.4rem .5rem}

.prose{max-width:68ch;font-size:1.02rem;line-height:1.72}
.prose > * + *{margin-top:22px}
.prose h2{font-size:1.55rem;margin-top:52px}
.prose h3{font-size:1.15rem;margin-top:38px}
.prose p{color:var(--text-2)}
.prose strong{color:var(--text);font-weight:400}
.prose ul,.prose ol{padding-left:1.3rem;color:var(--text-2)}
.prose li+li{margin-top:9px}
.prose li::marker{color:var(--signal-deep)}
.prose blockquote{
  border-left:3px solid var(--signal);padding:4px 0 4px 24px;
  font-family:var(--font-display);font-size:1.15rem;line-height:1.5;color:var(--text);letter-spacing:-.016em;
}
.prose a:not(.btn):not(.link-arrow){color:var(--navy-700);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--signal-line)}
.prose a:not(.btn):not(.link-arrow):hover{color:var(--signal-deep)}
.prose hr{border:0;height:1px;background:var(--line);margin:44px 0}



/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{position:relative;overflow:hidden;background:var(--bg-dark);padding:88px 0} /* audit 2026-09-24 B8: 92→88 joins space-tight */
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(760px 300px at 50% 120%,rgba(196,131,59,.18),transparent 70%);
}
.cta-band .wrap{position:relative;text-align:center}
.cta-band h2{color:#fff;max-width:18ch;margin:16px auto 0}
.cta-band p{color:var(--on-dark-2);max-width:52ch;margin:18px auto 0}
.cta-band .btn{margin-top:34px}
.cta-band .eyebrow{color:var(--signal)}
.cta-band .eyebrow::before{background:var(--signal)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--bg-dark-2);color:var(--on-dark-2);padding:72px 0 32px;border-top:1px solid var(--line-dark)}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px}
.foot__brand img{height:32px;width:auto} /* logo carries the name — the 'MJCX Studio' text line was removed as a third repetition (Monish 2026-09-07) */
.foot__brand p{margin-top:18px;font-size:.86rem;color:var(--on-dark-3);line-height:1.6}
.foot__brand .foot__micro{margin-top:12px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-3)}

/* contact aside: founders + testimonial as real cards (2026-09-07 — the two
   bare text cards read "weirdly placed", Monish) */
.contact-founders__row{display:flex;gap:10px}
.contact-founders__row img{width:56px;height:56px;object-fit:cover;object-position:center 20%;border-radius:12px;box-shadow:0 4px 14px rgba(10,15,22,.12)}
.foot h2{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-3);font-weight:500;margin-bottom:14px} /* footer col heads: correct level, same look (audit 2026-09-05) */
.foot ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.foot a{font-size:.88rem;color:var(--on-dark-2);transition:color var(--dur) var(--ease)}
.foot a:hover{color:var(--signal)}
.foot__plain li{font-size:.88rem;color:var(--on-dark-2);line-height:1.5} /* sept build: plain-text "What we build" footer column (links ship in v2) */
.foot__bar{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;align-items:baseline;
  font-size:.78rem;color:var(--on-dark-3);
}

/* ============================================================
   REVEAL
   ============================================================ */
html.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
html.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .sec{padding:72px 0}.sec--lg{padding:88px 0}.sec--tight{padding:0 0 72px} /* audit 2026-09-24 B8: mobile section pair 76→72 (one token) */
  .cta6{padding:72px 0} /* audit 2026-09-24 B8: mobile cta6 steps down (was 110 unstated) */
  .wrap{padding:0 24px}
  .nav__inner{padding:12px 24px}
  .hero{padding:56px 0 68px}
  .hero__grid{grid-template-columns:1fr;gap:44px}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:44px}
  .foot__grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:620px){
  .grid-4{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .drawer__link{font-size:1.35rem}
  .hero__actions .btn{width:100%}
}

/* ============================================================
   v1.1 additions (2026-08-30) — nav CTAs, forms, estimate, jobs,
   articles extras, helpful widget, policies. Scoped, additive.
   ============================================================ */
.nav__ctas{display:flex;gap:10px;align-items:center}
.nav__ctas .btn--ghost{padding:.62rem 1.15rem;font-size:.9rem}
.nav__ctas .btn--signal{padding:.62rem 1.15rem;font-size:.9rem}
@media (max-width:860px){.nav__ctas .btn--ghost{display:none}}
.drawer__secondary{display:block;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-size:.95rem;color:var(--text-2);min-height:44px}
.drawer__secondary:hover{color:var(--signal-deep)}



/* forms (request-access + contact) */
.form{display:flex;flex-direction:column;gap:18px;max-width:680px}
.form__field{display:flex;flex-direction:column;gap:.45rem}
.form__label{font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--text)}
.form select,.form input[type="text"],.form input[type="email"]{
  width:100%; /* audit 2026-09-05: selects sized to longest option text and
    pushed the grid column 35px past the 390px viewport (min-width:auto) */
  padding:.8rem 1rem;border:1px solid var(--line-strong);border-radius:10px;
  font:inherit;font-size:.95rem;background:var(--bg);color:var(--ink)}
.form select:focus,.form input:focus{outline:2px solid var(--signal-deep);outline-offset:1px;border-color:var(--signal-deep)}
.form .eyebrow{margin-top:14px}
.cf-turnstile{margin:6px 0}

/* instant estimate panel */
.estimate{margin-top:26px;padding:26px;border:1px solid var(--signal-deep);border-radius:14px;background:rgba(196,131,59,.06)}
.estimate__title{margin-top:0;font-family:var(--font-display);font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.018em}

/* audit 2026-09-05 — headings promoted h3→h2 to repair h1→h3 outline skips;
   keeps the h3 look */
.h-h3{font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.018em}
.estimate__band{font-size:1.15rem;font-weight:600;color:var(--ink)}
.estimate__bands{margin:14px 0 0;padding-left:1.1rem;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.estimate__price{font-family:var(--font-mono);color:var(--signal-deep)}

/* job cards (service subpages) — Wave 0: cards are links into agent pages */

/* article cite block */

/* was-this-helpful widget */

/* footer policies links — inline in .foot__bar's single full-width rule
   (2026-09-07: this block previously carried its OWN border-top + margin,
   drawing a detached second hairline that dropped the policies below the
   copyright baseline — the "unfinished footer" bug). Dark footer takes
   on-dark tokens only (audit 2026-09-05: var(--line)/var(--text-2) here
   WERE the bright-rule + 2.0:1 contrast bugs). */
.foot__policies{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.foot__policies a{font-size:.78rem;color:var(--on-dark-2)}
.foot__policies a:hover{color:var(--on-dark-2)}
.foot__policies .btn--sm{padding:.4rem .8rem;font-size:.78rem}

/* cta band actions — buttons centered (Monish 2026-09-08: not off to the side) */
.cta-band__actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;justify-content:center}

/* Sibling band (Wave 0, 2026-09-08): the last beat of the page flow — a compact
   centered card introducing the related hubs. v3 (Monish): v1 too wide, v2 too
   flat; this is a proper closing block, still quiet. */

/* btn-ghost2 (hero secondary on light bg) */
.btn--sm{padding:.5rem .9rem;font-size:.82rem}

/* ============================================================
   v1.1.1 (2026-08-31) — process walkthrough, placeholder
   testimonials, placeholder chip
   ============================================================ */
.chip{display:inline-block;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;padding:.22rem .5rem;border-radius:99px;vertical-align:middle}

/* process walkthrough steps (service pages) */

/* testimonial placeholder card (service pages) */

/* ============================================================
   AUDIT FIXES 2026-09-01 — dark-band ghost CTAs · WCAG tap targets ·
   inline form validation · request-access reassurance rail
   ============================================================ */
.cta-band .btn--ghost,.sec-dark-centered .btn--ghost,.sec-dark-rounded .btn--ghost{
  color:var(--on-dark);border-color:var(--line-dark-strong)}
.cta-band .btn--ghost:hover,.sec-dark-centered .btn--ghost:hover,.sec-dark-rounded .btn--ghost:hover{
  background:rgba(255,255,255,.06);border-color:var(--signal)}

/* WCAG 2.5.5 — interactive targets ≥44px tall */
.nav__link{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .85rem}
.foot a{display:inline-flex;align-items:center;min-height:44px;padding:0 .35rem;margin:0 -.35rem}
.link-arrow{min-height:44px}
.chip{min-height:44px}
.chip input[type=radio],.chip input[type=checkbox]{width:20px;height:20px}
.drawer__link{min-height:48px}

/* inline validation */
.form__field.is-invalid select,.form__field.is-invalid input{border-color:var(--error)}
.chip.is-invalid{outline:2px solid var(--error);outline-offset:2px}
.form__error{display:none;font-size:.8rem;color:var(--error);margin:0}
.form__field.is-invalid .form__error{display:block}
.form-summary{display:none;border:1px solid var(--error);border-radius:var(--r-sm);
  padding:.85rem 1rem;margin:0 0 16px;color:var(--text);background:rgba(190,58,46,.07)}
.form-summary.is-shown{display:block}
.form-summary ul{margin:.4rem 0 0;padding-left:1.1rem}
.form-summary strong{color:var(--error)}

/* request-access: reassurance rail beside the form */

/* ============================================================
   SKIPER PORTS — batch 1 (2026-09-06)
   sk40 Link004 band hover · sk41 progressive blur · sk63 squircle
   filter · sk65 repurposed as section progress pill
   ============================================================ */

/* --- sk63 squircle: the button's background layer passes through an SVG
   goo filter (mjSquircle, injected in shell.py) so CTAs read as true
   squircles; label stays sharp above the layer. Graceful: without filter
   support the inherited border-radius still applies. */
.btn{position:relative;z-index:0}
.btn::before{content:"";position:absolute;inset:-4px;z-index:-1;
  border-radius:inherit;background:inherit;filter:url(#mjSquircle)}

/* --- sk40 blend-band hover RETIRED (Monish 2026-09-10: "fix the buttons
   hover animations"): the white ::after band + blend-difference was designed
   for dark/white pairs; on the amber signal buttons it flashed as an amber
   ring + white fill + amber text = broken-looking. Hover is now ONE idea:
   lift + color/shadow deepen (already on .btn variants below).
   The sk63 ::before squircle silhouette stays. */
/* btn-free (home.css CTA) keeps the same squircle treatment */
.btn svg,.btn .arr{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s var(--ease)}
.btn:hover svg,.btn:hover .arr{transform:rotate(45deg)}

/* --- sk41 progressive blur: content fades/blurs out at the viewport edges
   on text-heavy inner pages (shell.py adds the strips when scrim=True) */
.pgs{position:fixed;left:0;right:0;height:110px;z-index:150;pointer-events:none;
  transition:opacity .3s var(--ease);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.pgs.is-off{opacity:0}
.pgs--top{top:0;background:linear-gradient(to bottom,var(--bg) 30%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,var(--bg) 30%,transparent);
  mask-image:linear-gradient(to bottom,var(--bg) 30%,transparent)}
.pgs--bot{bottom:0;background:linear-gradient(to top,var(--bg) 30%,transparent);
  -webkit-mask-image:linear-gradient(to top,var(--bg) 30%,transparent);
  mask-image:linear-gradient(to top,var(--bg) 30%,transparent)}

/* --- sk65 repurposed: section progress pill — shows label + progress while
   the viewport is inside a [data-progress] section (long white stretches
   read as intentional, not broken). Hidden otherwise. */
@media (max-width:900px){
  .pgs{-webkit-backdrop-filter:none;backdrop-filter:none}
}
.svgf{position:absolute;width:0;height:0;overflow:hidden}

/* ============================================================
   SKIPER PORTS — batch 3 (sk43 tooltip · sk60 side nav · sk66 reveal)
   ============================================================ */
/* --- sk43 Vercel-style tooltip: dark pill naming what you hover.
   One element, positioned by main.js above the [data-tip] target. */
.vtip{position:fixed;z-index:500;pointer-events:none;background:var(--ink);color:#fff;
  font-size:.78rem;font-weight:500;letter-spacing:.005em;padding:7px 12px;border-radius:8px;
  max-width:280px;line-height:1.35;opacity:0;transform:translate(-50%,4px) scale(.96);
  transition:opacity .18s var(--ease),transform .18s var(--ease);white-space:nowrap;
  box-shadow:0 8px 24px rgba(10,15,22,.28)}
.vtip.is-on{opacity:1;transform:translate(-50%,0) scale(1)}
@media(prefers-reduced-motion:reduce){.vtip{transition:opacity .01ms}}
/* RESTORED 2026-09-24 B9: element is created by main.js — the audit's
   markup-only grep missed it; deletion broke the homepage tooltip. */

/* --- sk60 side scroll nav: dim section labels on the left edge; the active
   section gets ink + an amber indicator bar. Desktop only. */
.sidenav{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:120;
  display:none;flex-direction:column;gap:2px}
@media(min-width:1280px){body[data-sidenav] .sidenav{display:flex}}
.sidenav a{display:flex;align-items:center;gap:9px;padding:7px 4px;text-decoration:none;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);transition:color .25s var(--ease)}
.sidenav a i{display:block;width:14px;height:1.5px;background:var(--line);border-radius:1px;
  transition:width .25s var(--ease),background .25s var(--ease)}
.sidenav a span{opacity:0;transform:translateX(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.sidenav:hover a span,.sidenav a:focus-visible span{opacity:1;transform:none}
.sidenav a.is-active{color:var(--ink)}
.sidenav a.is-active i{width:26px;background:var(--signal)}
.sidenav a.is-active span,.sidenav a.is-active:hover span{opacity:1;transform:none}
/* RESTORED 2026-09-24 B9: element created by main.js ([data-sidenav]) —
   deletion made it static and added 26px of dead height to the homepage.
   Label size bumped .6rem→.7rem per the B3 type floor. */

/* ============================================================
   ABOUT — stage strip (Skiper 52 homage: hover-expand accordion).
   Effect: Skiper UI skiper52 (HoverExpand_001) — https://skiper-ui.com —
   rebuilt as pure CSS for this stack (free tier: attribution kept).
   Replaces the sk71 buildup scrollytelling, Monish 2026-09-08 —
   browse-all-at-once instead of scroll-through. Hover/keyboard-focus
   expands one photo; caption = event name + year over the same veil
   gradient as the homepage founders accordion (.fnd). Pure CSS —
   no JS, so no-JS and reduced-motion need no fallback beyond the
   global reduced-motion transition kill.
   ============================================================ */
.stagestrip{background:var(--bg);padding:88px 0 8px}
.stagestrip__head{margin-bottom:36px}
.stagestrip__row{display:flex;gap:8px;height:clamp(320px,46svh,440px)}
.stagestrip__item{position:relative;flex:1 1 0;min-width:0;margin:0;border-radius:16px;
  overflow:hidden;cursor:pointer;background:var(--ink);outline:none;
  transition:flex-grow .55s var(--ease-out)}
.stagestrip__item:hover,.stagestrip__item:focus-visible{flex-grow:3.2}
.stagestrip__item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stagestrip__item::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(7,12,18,.82) 88%);
  opacity:0;transition:opacity .45s var(--ease-out)}
.stagestrip__item:hover::after,.stagestrip__item:focus-visible::after{opacity:1}
.stagestrip__item figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 20px;opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.stagestrip__item:hover figcaption,.stagestrip__item:focus-visible figcaption{opacity:1;transform:none}
.stagestrip__item figcaption b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:1rem;letter-spacing:-.01em;line-height:1.35;color:#fff}
.stagestrip__item figcaption span{display:block;margin-top:5px;font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(234,242,247,.8)}
/* small tablets: the 8-up row tightens */
@media(max-width:900px){
  .stagestrip{padding:64px 0 8px}
  .stagestrip__row{height:300px}
}
/* phones: horizontal snap strip, captions always visible (no hover to
   depend on) — same discipline as the reduced-motion proof strip */
@media(max-width:700px){
  /* bleed = .wrap's 24px mobile padding (styles.css:737) — not 32px */
  .stagestrip__row{height:auto;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 24px 18px;
    scrollbar-width:none}
  .stagestrip__row::-webkit-scrollbar{display:none}
  .stagestrip__item{flex:0 0 min(78vw,340px);height:min(64vw,300px);scroll-snap-align:start}
  .stagestrip__item::after{opacity:1}
  .stagestrip__item figcaption{opacity:1;transform:none}
}

/* ============================================================
   ABOUT — page structure (2026-09-08 restructure, Monish spec):
   wordless full-bleed office hero → stage strip → name + 3 hairline
   facts → founders (profile bios, big portraits) → 3 logo pill walls
   (same data as homepage §3) → Trusted-by described cards → Rooted
   in Haining → homepage cta6 clone (markup + values identical).
   ============================================================ */
.abhero{height:min(92svh,820px);overflow:hidden;background:var(--ink)}
.abhero img{display:block;width:100%;height:100%;object-fit:cover}

.abname{padding:96px 0 8px}
.abname h1{font-size:clamp(2.6rem,6vw,4rem);letter-spacing:-.035em;margin:0;line-height:1.02; /* B5 2026-09-24: capped at 64px, joins the inner-page law (home keeps 89.6 hero) */
  font-weight:500} /* 500 = Futura Medium — home hero h1 law (600 snaps to Bold, too thick) */
.abhead h2{font-size:clamp(1.7rem,3.6vw,2.9rem);letter-spacing:-.025em;line-height:1.18}
.abname__legal{margin:14px 0 0;font-family:var(--font-mono);font-size:.78rem;
  letter-spacing:.1em;color:var(--text-3)}
.abname__lede{margin-top:36px;max-width:62ch}
.abname__lede p{margin:0;font-size:1.04rem;line-height:1.72;color:var(--text-2)}
.abname__lede p+p{margin-top:14px}
.abname__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;margin-top:60px}
.abname__card{border-top:1px solid var(--line-strong);padding-top:14px}
.abname__card span{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}
.abname__card p{margin:9px 0 0;font-family:var(--font-display);font-weight:500;
  font-size:1.02rem;letter-spacing:-.01em;line-height:1.55;color:var(--ink)}

.abfnd{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:48px;align-items:start}
.abfnd--flip{grid-template-columns:1fr minmax(260px,380px)}
.abfnd--flip .abfnd__img{order:2}
.abfnd__img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px;display:block}
.abfnd__bio h3{margin:0;font-size:1.5rem;letter-spacing:-.02em}
.abfnd__bio h3 span{font-weight:500;font-size:1.05rem;color:var(--text-3)}
.abfnd__role{margin:8px 0 0;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal-deep)}
.abfnd__bio p:not(.abfnd__role){margin:16px 0 0;font-size:.98rem;line-height:1.68;color:var(--text-2)}

.abwall{text-align:center}
.abwall + .abwall{margin-top:28px}
.abwall__label{margin:0;font-family:var(--font-display);font-size:.92rem;
  font-weight:500;color:var(--text-2)}
.abwall__grid{margin-top:12px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));
  gap:10px;align-items:center;background:#fff;border-radius:999px;padding:15px 22px;
  box-shadow:0 14px 34px rgba(10,15,22,.07)}
.abwall__slot{position:relative;display:flex;align-items:center;justify-content:center;
  text-align:center;height:42px;padding:0 3px;text-decoration:none;
  transition:transform .3s var(--ease-out),filter .3s var(--ease-out)}
.abwall__slot img{display:block;height:var(--lh,28px);width:auto;max-width:min(132px,100%);object-fit:contain} /* --lh: per-logo height by shape (home2.logo_img) */
.abwall__slot:hover,.abwall__slot:focus-visible{transform:scale(1.16);outline:none;
  filter:drop-shadow(0 0 14px rgba(196,131,59,.55)) brightness(1.05)}
.abwall__slot--wm span{font-family:var(--font-display);font-weight:600;font-size:.8rem;
  line-height:1.3;color:var(--text-2);transition:color .3s}
.abwall__slot--wm:hover span,.abwall__slot--wm:focus-visible span{color:var(--ink)}

.abtrust{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:16px}
.abtrust__card{display:flex;flex-direction:column;background:#fff;border-radius:16px;padding:26px;
  box-shadow:0 14px 34px rgba(10,15,22,.07);text-decoration:none}
.abtrust__card img{display:block;margin:0;height:var(--lh,40px);width:auto;max-height:none;max-width:260px;object-fit:contain;
  object-position:left;width:auto} /* width:auto beats the build's width attr hint (2026-09-24): logo box is max-constrained, ratio comes from the file — rendering identical with/without attrs */
.abtrust__card h3{margin:20px 0 0;font-size:1.02rem;letter-spacing:-.01em}
.abtrust__card p{margin:9px 0 0;font-size:.9rem;line-height:1.6;color:var(--text-2)}
a.abtrust__card{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
a.abtrust__card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(10,15,22,.11)}

.abroot{max-width:860px}
.abroot__item{display:grid;grid-template-columns:112px 1fr;gap:26px;padding:24px 0;
  border-top:1px solid var(--line)}
.abroot__when{padding-top:4px;font-family:var(--font-mono);font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--signal-deep)}
.abroot__item h3{margin:0;font-size:1.02rem;letter-spacing:-.01em}
.abroot__item p{margin:7px 0 0;font-size:.92rem;line-height:1.62;color:var(--text-2)}
/* About on the site type scale (Leonard 2026-09-29): the near-duplicate
   sizes (14.4 / 14.72 / 15.68 / 16.32 / 16.64px) snap to 15 / 16 / 17px;
   section h2s join the 42px scale. The 64px page title and the cta6 band
   (home clone) are unchanged. */
.abname__legal{font-size:12px}
.abname__lede p{font-size:17px}
.abname__card p{font-size:16px}
.abfnd__bio p:not(.abfnd__role){font-size:16px}
.abwall__label{font-size:15px}
.abtrust__card h3,.abroot__item h3{font-size:17px}
.abtrust__card p,.abroot__item p{font-size:15px}
.abhead h2{font-size:clamp(28px,3.6vw,42px);line-height:1.12}

/* cta6 — homepage final CTA, ported verbatim (identical values to
   home.css .home-v4 .cta6; the scoped homepage rules win there) */
.cta6{background:var(--bg-dark-2);padding:104px 0;text-align:center;color:#fff} /* audit 2026-09-24 B8: 110→104 joins space-section */
.cta6 h2{color:#fff;font-size:clamp(1.9rem,4.4vw,3.3rem);letter-spacing:-.03em;
  line-height:1.14;max-width:22em;margin:0 auto}
.cta6 .cta6-ask{margin-top:20px;font-size:clamp(1rem,1.7vw,1.2rem);color:rgba(234,242,247,.75)}
.cta6__actions{margin-top:38px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.cta6__mail{margin-top:22px;font-size:.9rem}
.cta6__mail a{color:rgba(234,242,247,.65);text-decoration:underline;text-underline-offset:3px}
.cta6__mail a:hover{color:#fff}

@media(max-width:900px){
  .abhero{height:64svh}
  .abname{padding:72px 0 8px}
  .abname__lede{margin-top:26px}
  .abname__lede p{font-size:.97rem}
  .abname__cards{grid-template-columns:1fr;gap:22px;margin-top:44px}
  .abfnd,.abfnd--flip{grid-template-columns:1fr;gap:28px}
  .abfnd--flip .abfnd__img{order:0}
  .abfnd__img{max-width:440px}
  .abtrust{grid-template-columns:1fr}
  .abwall__grid{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:24px;padding:18px 20px}
}
@media(max-width:640px){
  .abwall__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .abroot__item{grid-template-columns:1fr;gap:6px;padding:20px 0}
}

/* ============================================================
   SKIPER PORTS — batch 5: sk77 featured carousel (projects page)
   Dark stage, one case screenshot per slide, frosted glass caption
   panel (liquid glass, tuned for the light brand), corner chevrons.
   No-JS: first slide + caption static. ============================================================ */

/* ============================================================
   SKIPER PORTS — batch 6: sk76 composition picker (services page, PoC)
   ============================================================ */

/* ============================================================
   PROJECTS PAGE (cyos-website-sept, added 2026-09-10)
   Side-scroll nav template: sticky left nav + scrollspy, one hero
   slot per project, report below. Scoped .pj-* classes.
   ============================================================ */
.pj-herohead{padding:0 0 72px}
.pj-herohead .lede{max-width:34rem} /* audit 2026-09-21: lede ran ~80ch */
.pj-reading{color:var(--text-3);font-family:var(--font-body);font-size:.9375rem;line-height:1.6;max-width:560px} /* audit: was .small 14px across ~119ch — the worst line on the page */
.pj-reading a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--line);transition:color .2s var(--ease-out),text-decoration-color .2s var(--ease-out)}
.pj-reading a:hover{color:var(--signal);text-decoration-color:var(--signal)}
.pj-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;padding-top:8px}
.pj-side__nav{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow-y:auto;border-left:1px solid var(--line)}
.pj-side__group{display:block;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin:22px 0 4px;padding-left:14px}
.pj-side__group:first-child{margin-top:2px}
.pj-side__link{display:block;font-family:var(--font-display);font-size:.92rem;color:var(--text-2);padding:5px 0 5px 12px;border-left:2px solid transparent;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pj-side__link:hover{color:var(--text)}
.pj-side__link.is-active{border-left-color:var(--signal);color:var(--text);font-weight:600}
/* service layer: diagram + accordion (spec v2, 2026-09-10) */
.pj-service{padding:0 0 88px} /* audit 2026-09-21: 40px gave the cases the least breathing room on the page */
.pj-service__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:start}
.pj-service__panel{background:#fff;padding:0} /* box removed 2026-09-12 (Monish): diagram floats on page white */
/* Service-layer diagram (projects page) — hub-and-spoke, code-built SVG.
   One hub = the one service layer; four spokes = the four ways in. Opening
   an accordion sets data-dg on .pj-dg; CSS alone dims the rest to a ghost,
   lights the matched group (amber, soft gaussian halo — not neon) and draws
   the spoke in (500ms expo-out via pathLength + dashoffset keyframes).
   no-JS: no data-active value ever set -> everything fully visible. */
.pj-dg{width:100%;height:auto;display:block}
/* camera: the whole drawing zooms via one transform on this group
   (JS sets the target transform per accordion state; the transition is
   engine-driven — no rAF, so it completes even in throttled engines).
   Strokes/text scale with the zoom, which is the point: readability. */
.pj-dg-world{transform-box:view-box;transform-origin:0 0;transition:transform .52s var(--ease-out);will-change:transform}
.pj-dg text{pointer-events:none}
.pj-dg-halo{fill:none;stroke:var(--signal);stroke-width:5;opacity:0;filter:url(#pjDgGlow);pointer-events:none;transition:opacity var(--dur-2) var(--ease-out)}
/* hub devices — the homepage configurator's idle visual (mac + phone, the
   MJCX mark on both screens) redrawn in the sheet; frames always stay ink
   (never amber — the halo carries the warm cue) */
.pj-dg-dev__screen{fill:#fff;stroke:#22303C}
.pj-dg-dev__screen--mac{stroke-width:3.5}
.pj-dg-dev__screen--phone{stroke-width:2.6}
.pj-dg-dev__base{fill:#22303C}
.pj-dg-hub image{transition:opacity var(--dur-2) var(--ease-out)}
.pj-dg-hub__t{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;fill:var(--text-2);text-anchor:middle;dominant-baseline:central;transition:fill var(--dur-2) var(--ease-out)}
.pj-dg-node rect{fill:var(--bg);stroke:var(--line-strong);stroke-width:1.2;transition:fill var(--dur-2) var(--ease-out),stroke var(--dur-2) var(--ease-out),stroke-width var(--dur-2) var(--ease-out)}
.pj-dg-node text{font-family:var(--font-mono);font-size:12px;fill:var(--text-2);text-anchor:middle;dominant-baseline:central;transition:fill var(--dur-2) var(--ease-out)}
.pj-dg-node:hover rect{stroke:var(--signal)}
.pj-dg-col rect{fill:var(--bg-muted);stroke:var(--line);stroke-width:1;transition:stroke var(--dur-2) var(--ease-out)}
.pj-dg-col text{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;fill:var(--text-3);text-anchor:middle;dominant-baseline:central;transition:fill var(--dur-2) var(--ease-out)} /* audit 2026-09-24 B3: 9.5px was under the 11px floor */
.pj-dg-col,.pj-dg-node,.pj-dg-hub{transition:opacity var(--dur-2) var(--ease-out)}
.pj-dg path{fill:none;stroke:var(--line-strong);stroke-width:1.1;stroke-dasharray:1;transition:stroke var(--dur-2) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
/* a group is open: everything unmatched becomes a quiet ghost (never hidden
   — the one-system read survives; the hub dims to 0.55, the sheet title
   fades so it never stamps over zoomed content), the matched group lights */
.pj-dg:not([data-active=""]) .pj-dg-node,.pj-dg:not([data-active=""]) .pj-dg-col,
.pj-dg:not([data-active=""]) path{opacity:.24}
.pj-dg:not([data-active=""]) .pj-dg-hub{opacity:.55}
.pj-dg:not([data-active=""]) .pj-dg-block{opacity:0}
.pj-dg-block{transition:opacity var(--dur-2) var(--ease-out)}
.pj-dg:not([data-active=""]) .pj-dg-hub .pj-dg-halo{opacity:.18}
.pj-dg:not([data-active=""]) .pj-dg-hub__t{fill:var(--text)}
/* ghosted devices render as SCHEMATICS (transparent fill, ink outline,
   logos out) — a solid white screen sliver entering the zoom frame reads
   as a glitch; a hairline outline reads as the drawing it is */
.pj-dg:not([data-active=""]) .pj-dg-dev__screen{fill:transparent}
.pj-dg:not([data-active=""]) .pj-dg-hub image{opacity:0}
/* Monish 2026-09-11: the DIAGNOSE-step sheets (homepage configurator) keep
   the hub's screens LIT with the MJCX mark on both — the schematic ghost is
   a projects-page zoom-frame law (the homepage never zooms), and the baked
   data-active on the diagnose templates must not mute the studio's devices.
   .pj-dg--hublit is emitted by dg_diagram.diagnose_templates() only. */
.pj-dg--hublit:not([data-active=""]) .pj-dg-dev__screen{fill:#fff}
.pj-dg--hublit:not([data-active=""]) .pj-dg-hub image{opacity:1}
.pj-dg--hublit:not([data-active=""]) .pj-dg-hub{opacity:1}
.pj-dg[data-active="agents"] [data-dg~="agents"],.pj-dg[data-active="office"] [data-dg~="office"],
.pj-dg[data-active="supply"] [data-dg~="supply"],.pj-dg[data-active="line"] [data-dg~="line"]{opacity:1}
.pj-dg[data-active="agents"] .pj-dg-node[data-dg="agents"] rect,.pj-dg[data-active="office"] .pj-dg-node[data-dg="office"] rect,
.pj-dg[data-active="supply"] .pj-dg-node[data-dg="supply"] rect,.pj-dg[data-active="line"] .pj-dg-node[data-dg="line"] rect{stroke:var(--signal);stroke-width:1.5;fill:var(--signal-glow)}
.pj-dg[data-active="agents"] .pj-dg-node[data-dg="agents"] text,.pj-dg[data-active="office"] .pj-dg-node[data-dg="office"] text,
.pj-dg[data-active="supply"] .pj-dg-node[data-dg="supply"] text,.pj-dg[data-active="line"] .pj-dg-node[data-dg="line"] text{fill:var(--ink)}
.pj-dg[data-active="agents"] .pj-dg-col[data-dg="agents"] rect,.pj-dg[data-active="office"] .pj-dg-col[data-dg="office"] rect,
.pj-dg[data-active="supply"] .pj-dg-col[data-dg="supply"] rect,.pj-dg[data-active="line"] .pj-dg-col[data-dg="line"] rect{stroke:var(--signal)}
.pj-dg[data-active="agents"] .pj-dg-col[data-dg="agents"] text,.pj-dg[data-active="office"] .pj-dg-col[data-dg="office"] text,
.pj-dg[data-active="supply"] .pj-dg-col[data-dg="supply"] text,.pj-dg[data-active="line"] .pj-dg-col[data-dg="line"] text{fill:var(--signal-deep)}
.pj-dg[data-active="agents"] .pj-dg-node[data-dg="agents"] .pj-dg-halo,.pj-dg[data-active="office"] .pj-dg-node[data-dg="office"] .pj-dg-halo,
.pj-dg[data-active="supply"] .pj-dg-node[data-dg="supply"] .pj-dg-halo,.pj-dg[data-active="line"] .pj-dg-node[data-dg="line"] .pj-dg-halo{opacity:.3;transition-delay:.12s}
.pj-dg[data-active="agents"] path[data-dg~="agents"],.pj-dg[data-active="office"] path[data-dg~="office"],
.pj-dg[data-active="supply"] path[data-dg~="supply"],.pj-dg[data-active="line"] path[data-dg~="line"]{stroke:var(--signal);stroke-width:1.4;animation:pj-dg-draw .5s var(--ease-out) both}
@keyframes pj-dg-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pj-dg-block text{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;fill:var(--text-3);text-anchor:middle} /* audit 2026-09-24 B3: 9px was under the 11px floor */
/* idle polish pass (2026-09-12, Monish: "make the diagram pop instead of
   greyscale draft"): warm spokes + amber-washed group headers + cream nodes
   so the drawing reads designed at rest. Scoped to .pj-service AND idle
   ([data-active=""]) only — the homepage configurator's pj-dg templates and
   the ghost/active states keep their existing law untouched. */
.pj-service .pj-dg[data-active=""] path{stroke:var(--signal);stroke-width:1.2;opacity:.5}
.pj-service .pj-dg[data-active=""] .pj-dg-col rect{fill:var(--signal-glow);stroke:var(--signal-line)}
.pj-service .pj-dg[data-active=""] .pj-dg-col text{fill:var(--signal-deep)}
.pj-service .pj-dg[data-active=""] .pj-dg-node rect{fill:#FFFBF4;stroke:var(--signal-line)}
.pj-service .pj-dg[data-active=""] .pj-dg-node text{fill:var(--ink)}
.pj-service .pj-dg[data-active=""] .pj-dg-node:hover rect{stroke:var(--signal);fill:#fff}
.pj-service .pj-dg[data-active=""] .pj-dg-hub__t{fill:var(--signal-deep)}
.pj-service .pj-dg[data-active=""] .pj-dg-hub .pj-dg-halo{opacity:.16}
.pj-service .pj-dg .pj-dg-glowbg{pointer-events:none}
.pj-service__acc{display:flex;flex-direction:column}
.pj-acc{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);margin-top:12px}
.pj-acc:first-child{margin-top:0}
.pj-acc summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 18px;cursor:pointer;list-style:none}
.pj-acc summary::-webkit-details-marker{display:none}
.pj-acc__group{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--text)}
.pj-acc__scope{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);width:100%}
.pj-acc__mark{width:12px;height:12px;margin-left:auto;position:relative;flex:none;align-self:center}
.pj-acc__mark::before,.pj-acc__mark::after{content:"";position:absolute;background:var(--signal-deep);inset:auto;transition:transform var(--dur) var(--ease)}
.pj-acc__mark::before{left:0;right:0;top:5px;height:1.5px}
.pj-acc__mark::after{top:0;bottom:0;left:5px;width:1.5px}
.pj-acc[open] .pj-acc__mark::after{transform:rotate(90deg)}
.pj-acc[open]{border-color:var(--signal-line)}
.pj-acc p{padding:0 18px 16px;color:var(--text-2);font-size:.95rem}
/* liquid gradient hover on the 4 service cards (2026-09-12, Monish — the
   index §5 effect). Two verified Chromium facts drove the technique: the
   §5 double-background shorthand is INVALID (color in a non-final layer →
   that ring silently never renders) and ALL mask-composite ring variants
   fail to paint in Chromium 149 headless (render matrix 2026-09-12). So
   the ring is a no-mask two-pseudo sandwich, verified pixel-level:
   ::before = full amber→bronze gradient slab (drifts while hovered, 300%
   size), ::after = white interior inset 1.5px covering everything but the
   outer edge, card text raised to z-index:2 so it always stays readable.
   focus-within keeps it keyboard-reachable; reduced motion = static ring. */
.pj-acc{position:relative;border:0;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
/* liquid glass on the 4 service cards (2026-09-13, Monish: 'same as
   section 5 cards on homepage, but keep it expandable') — the §5 WebGL
   fbm shader (js/projects-liquid.js, ported from js/home.js §5 block)
   paints a canvas per card: ambient soft drift at idle (opacity .5,
   u_boost .3), hover/focus boosts to full opacity + pointer pull.
   Canvas bleeds 30px past the card; the card clips it (overflow:hidden)
   so the heavy blur never vignettes. Border removed — the glass defines
   the card (§5 28df757 law). The CSS ring sandwich below stays ONLY as
   the no-WebGL fallback and retires when the shader boots (.liquid-ok);
   reduced motion hides the canvas and the fallback lands static. */
.pj-acc__liquid{position:absolute;inset:-30px;z-index:0;
  width:calc(100% + 60px);height:calc(100% + 60px);
  opacity:.5;filter:blur(18px) saturate(1.08);
  transition:opacity .5s var(--ease);pointer-events:none;will-change:opacity}
.pj-acc.liquid-ok:hover .pj-acc__liquid,
.pj-acc.liquid-ok:focus-within .pj-acc__liquid{opacity:1}
.pj-acc.liquid-ok::before,.pj-acc.liquid-ok::after{display:none}
.pj-acc.liquid-ok > :not(.pj-acc__liquid){position:relative;z-index:1}
.pj-acc summary,.pj-acc p{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){.pj-acc__liquid{display:none}}
/* no-WebGL fallback: the two-pseudo ring (verified technique — mask rings
   and the §5 v1 double-background shorthand both fail to paint; see the
   2026-09-12 render matrix note). Retired by .liquid-ok above. */
.pj-acc::before{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(120deg,var(--signal),var(--signal-deep),var(--signal));
  background-size:300% 300%;background-position:0% 0%;
  z-index:1;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.pj-acc::after{content:"";position:absolute;inset:1.5px;border-radius:calc(var(--r) - 1.5px);
  background:var(--bg);z-index:1;opacity:0;transition:opacity .3s var(--ease);pointer-events:none}
.pj-acc:hover,.pj-acc:focus-within{transform:translateY(-4px);box-shadow:0 18px 44px rgba(10,15,22,.1)}
.pj-acc:hover::before,.pj-acc:hover::after,.pj-acc:focus-within::before,.pj-acc:focus-within::after{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .pj-acc:not(.liquid-ok):hover::before,.pj-acc:not(.liquid-ok):focus-within::before{animation:pj-acc-liquid 6s ease-in-out infinite}}
@keyframes pj-acc-liquid{0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}
/* outcome groups + report cards (spec v2) */
/* reports section head — proper title + description above the two-column
   reports body (was an in-column eyebrow band; promoted 2026-09-11) */
.pj-reporthead .section-sub{color:var(--text-2);max-width:640px} /* audit: 72ch Georgia = ~88 real chars */
.pj-tags{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;width:100%;margin-top:6px}
.pj-tag{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;color:var(--text-3);border:1px solid var(--line-strong);border-radius:999px;padding:2px 10px;flex:none}
.pj-tag--designed{color:var(--signal-deep);border-color:var(--signal-line)}
.pj-sec__meta{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.02em;color:var(--text-3)}
.pj-sec__svc{width:100%;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.04em;color:var(--text-3);margin-top:4px}
.pj-chip{border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin:0 2px;white-space:nowrap}
/* report cards (v1 rules the renderer still emits — restored 2026-09-11; the
   spec-v2 CSS swap deleted them, leaving 12 unstyled reports) */
.pj-sec{margin-top:88px;scroll-margin-top:110px} /* audit: 64px — case-to-case gap was 49px while the FAQ got 168px */
.pj-sec__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.pj-sec__num{font-family:var(--font-mono);font-size:.78rem;color:var(--signal-deep)}
.pj-sec__head h3{font-size:clamp(1.25rem,2.2vw,1.55rem)}
.pj-hero{margin:20px 0 0}
/* hero images render at NATURAL aspect ratio (2026-09-12, Monish: show the
   whole dashboard, never a center-crop) — no forced 16:9, no object-fit:cover */
.pj-hero img{width:100%;height:auto;object-fit:contain;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-subtle)}
.pj-hero--slot{width:100%;aspect-ratio:16/9;border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--bg-subtle);display:flex;align-items:center;justify-content:center}
.pj-hero--slot span{font-family:var(--font-mono);font-size:.78rem;color:var(--text-3)}
.pj-sec__body{max-width:640px} /* audit: 72ch Georgia = ~88-90 real chars — set in px */
.pj-sec__body h4{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-deep);margin:28px 0 8px} /* audit: was .72rem — wayfinding smaller than the body it governs */
.pj-sec__body p{color:var(--text-2);margin-top:10px}
.pj-sec__body ul{margin:10px 0 0 18px;color:var(--text-2)}
.pj-sec__body li{margin-top:10px}
.pj-sec__body strong{color:var(--text);font-weight:400}
/* full-report link + placeholder page (2026-09-12, Monish) */
.pj-fullreport{margin-top:24px}
.pj-fullreport a{font-family:var(--font-mono);font-size:.95rem;letter-spacing:.04em;color:var(--signal-deep);text-decoration:underline;text-underline-offset:4px;display:inline-block;padding:8px 0} /* audit: was .8rem on a 15px-tall tap target */
.pj-frph{margin-top:28px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--bg-subtle);padding:28px 32px}
.pj-frph p{margin:0;color:var(--text-2)}
.pj-frph p:first-child{font-size:1.05rem;color:var(--text)}
.pj-backlink{font-family:var(--font-mono);font-size:.8rem;color:var(--text-2)}
/* .pj-ladder removed 2026-09-21 (dead code — the "five reports in common"
   ladder is not in the current build; audit finding) */
@media (max-width:900px){
  .pj-layout{grid-template-columns:minmax(0,1fr);gap:0}
  /* single column: give .pj-side's sticky child room to stick — without
     this the aside's grid area is only the nav strip's own height and
     position:sticky never engages (fixed 2026-09-11). Both items need
     EXPLICIT placement: auto-placement with a definite row pushes
     .pj-main into a second column, collapsing the aside to 0px. */
  .pj-side{grid-column:1;grid-row:1 / span 2}
  .pj-main{grid-column:1;grid-row:2}
  .pj-side__nav{position:sticky;top:58px;z-index:30;max-height:none;overflow-x:auto;overflow-y:hidden;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 0;margin:0 -24px;padding-left:24px;padding-right:24px;display:flex;gap:6px;align-items:center}
  .pj-side__group{margin:0 4px 0 0;flex:none}
  .pj-side__link{flex:none;border-left:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.82rem}
  .pj-side__link.is-active{border-color:var(--signal);color:var(--text)}
  .pj-service__grid{grid-template-columns:1fr}
  /* diagram on phones: keep the full 860-unit drawing intact and pan it
     inside the panel (page must never overflow); bump SVG text since the
     viewBox scale gets small */
  .pj-service__panel{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .pj-dg{min-width:640px}
  .pj-dg-node text{font-size:13px}
  .pj-dg-col text{font-size:11px} /* audit 2026-09-24 B3: was 10px under-floor; joins the 11px base */
  .pj-dg-hub__t{font-size:13px}
  .pj-sec{margin-top:72px;scroll-margin-top:170px} /* audit: 120px sat UNDER the 125px sticky stack — anchor jumps clipped the case number */
  .pj-tag{font-size:.72rem;padding:2px 8px} /* audit: 3-4 pills stacked ~3 rows at 390px */
}
@media (prefers-reduced-motion: reduce){
  .pj-side__link{transition:none}
  /* diagram: no draw-in, no fade — states flip instantly */
  .pj-dg,.pj-dg *{animation:none!important;transition:none!important}
  .pj-dg path{stroke-dasharray:none}
}

/* ---- services page (v2, 2026-09-16): the projects-page format carrying
   the six named solutions. The map reuses the .pj-dg sheet classes in
   their idle (data-active="") warm state — these additive rules only add
   the clickable-cluster affordances and the two .svc-art card sheets.
   Sept pages never emit .svc-* classes, so nothing moves there. The hover
   rules sit AFTER the .pj-service idle rules on purpose (equal
   specificity, last-wins) so a hovered cluster lifts out of the warm rest
   state. ---- */
.svc-dg .svc-lnk{cursor:pointer;outline:none}
.svc-dg .svc-lnk:hover .pj-dg-col rect,
.svc-dg .svc-lnk:focus-visible .pj-dg-col rect{stroke:var(--signal)}
.svc-dg .svc-lnk:hover .pj-dg-col text,
.svc-dg .svc-lnk:focus-visible .pj-dg-col text{fill:var(--signal-deep)}
.svc-dg .svc-lnk:hover .pj-dg-node rect:not(.pj-dg-halo),
.svc-dg .svc-lnk:focus-visible .pj-dg-node rect:not(.pj-dg-halo){
  stroke:var(--signal-line);fill:#fff}
/* the two drawn card sheets (intelligence layer, maintenance) — same
   framing as .pj-hero img so the six sections read as one family */
.svc-art{width:100%;height:auto;display:block;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--bg-subtle)}
.svc-art text{font-family:var(--font-mono);fill:var(--text-2);
  text-anchor:middle;dominant-baseline:central}
.svc-art .b{fill:#fff;stroke:var(--line-strong);stroke-width:1.2}
.svc-art .band{fill:var(--signal-glow);stroke:var(--signal);stroke-width:1.5}
.svc-art .t-lg{font-size:13px;letter-spacing:.1em;fill:var(--ink)}
.svc-art .t-sm{font-size:11px;letter-spacing:.08em;fill:var(--text-3)} /* audit 2026-09-24 B3: 10px was under-floor (rollback-only emitter, kept law-compliant) */
.svc-art .t-num{font-size:34px;letter-spacing:.02em;fill:var(--ink)}
.svc-art .t-pass{fill:var(--signal-deep)}
.svc-art .flow{fill:none;stroke:var(--line-strong);stroke-width:1.1}
.svc-art .tick{fill:var(--line-strong)}
.svc-art .tick--amber{fill:var(--signal)}

/* ==========================================================================
   PROJECTS PAGE — 2026-09-21 case-study restructure (Monish spec)
   Section 2 = the POC's 3-color-coded full project cycle (phb/meth/pcy,
   poc-services-v2 r4) replacing the old service-layer diagram + accordions;
   article = selected case studies by industry (pj-case: need quote, module
   sheet in the cycle-sheet format, solution slider pj-prj); closer = know
   (r5c row) + FAQ (ported from home-v2.css). ⚑ all new copy = DRAFT.
   ========================================================================== */

.section-sub{max-width:640px} /* audit 2026-09-24 B4: measure law — the .pj-reporthead 640px rule is the canon, now bounded everywhere */
/* draft-pass flag on copy awaiting Monish's human pass (remove at bless) */
.section-sub--draft::after{content:" ⚑ DRAFT";font-family:var(--font-mono);
  font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--signal);
  white-space:nowrap} /* audit 2026-09-24 B3: .62rem was under the .7rem floor */

/* ---- full project cycle: three expanded phase blocks (2026-09-21, second
   pass — Monish's content spec; the big .pcy sheet was removed, the three
   blocks ARE the cycle) ---- */
.phb{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px;
  align-items:start} /* audit 2026-09-21: stretch + auto-pin left 150-200px
  voids and 3 misaligned price baselines; cards now size to content. This
  revisits the deliberate stretch/auto-pin ruling — revert by restoring
  align-items:stretch + .phb__pay{margin-top:auto} if the pin wins. */
.phb__b{display:flex;flex-direction:column;padding:16px 18px 15px;border-radius:10px;
  border-top:3px solid var(--segc,var(--line-strong))}
.phb__b--prep{--segc:var(--signal-deep);background:var(--signal-glow)}
.phb__b--exec{--segc:var(--ink);background:#EBEFF3}
.phb__b--long{--segc:var(--signal);background:rgba(196,131,59,.10)}
.phb__name{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.phb__name b{font-size:.95rem;font-weight:400;color:var(--text);letter-spacing:-.01em}
.phb__wk{font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);white-space:nowrap} /* audit: was .58rem (9.28px) */
.phb__title{margin-top:3px;font-size:1.02rem;font-weight:700;color:var(--text);
  letter-spacing:-.01em;line-height:1.3}
.phb__list{list-style:none;margin:10px 0 0;padding:0}
.phb__list li{position:relative;padding-left:14px;font-size:.845rem;line-height:1.5;
  color:var(--text-2)}
.phb__list li+li{margin-top:7px}
.phb__list li::before{content:"";position:absolute;left:0;top:.5em;width:5px;
  height:5px;border-radius:1.5px;background:var(--segc,var(--line-strong));opacity:.75}
.phb__list li b{font-weight:400;color:var(--text)}
.phb__cat{font-family:var(--font-mono);font-size:.75rem;color:var(--text-3);
  white-space:nowrap}
.phb__pay{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
.phb__price{display:block;font-size:.98rem;font-weight:700;color:var(--text);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.phb__pricesub{display:block;margin-top:3px;font-size:.8rem;line-height:1.45;
  color:var(--text-3)}
.phb__pay ul{list-style:none;margin:8px 0 0;padding:0}
.phb__pay li{position:relative;padding-left:13px;font-family:var(--font-mono);
  font-size:.75rem;line-height:1.5;color:var(--text-2)}
.phb__pay li+li{margin-top:5px}
.phb__pay li::before{content:"";position:absolute;left:0;top:.55em;width:5px;
  height:5px;border-radius:1.5px;background:var(--line-strong)}
.phb__when{margin:13px 0 0;padding-top:11px;border-top:1px solid var(--line-soft);
  font-size:.8rem;line-height:1.5;color:var(--text-3)}
.phb__tlab{display:block;font-family:var(--font-mono);font-size:.75rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:4px} /* audit: was .56rem (8.96px) */
/* uniform-row table (Monish 2026-09-21: "more uniform — the rows should
   align more, adequate white space between rows, clean and crisp"):
   desktop = one shared 5-row grid (name / deliverable / what-you-get /
   price+terms / timeline) across all three cards via subgrid, so row
   baselines AND the two hairline separators line up like a table; every
   row gets the same generous 18-20px padding. Browsers without subgrid
   and ≤860px keep the self-sizing card stack above/below. */
@media (min-width:861px){
  @supports (grid-template-rows:subgrid){
    .phb{grid-template-rows:repeat(5,auto);align-items:stretch;gap:0 12px}
    .phb__b{display:grid;grid-template-rows:subgrid;grid-row:span 5;
      grid-column:auto;padding:0}
    .phb__name{padding:20px 20px 0}
    .phb__title{margin:0;padding:6px 20px 18px}
    .phb__list{margin:0;padding:2px 20px 20px}
    .phb__list li+li{margin-top:9px}
    .phb__pay{margin:0;padding:15px 20px 17px}
    .phb__when{margin:0;padding:14px 20px 17px}
  }
}

.pcy{border:1px solid var(--line);border-radius:16px;background:var(--bg);
  overflow:hidden;margin-top:36px}
.pcy__band{display:grid;grid-template-columns:252px 1fr 280px}
.pcy__rail{padding:20px 28px 22px 22px;min-width:0}
.pcy__deliver{padding:20px 40px 22px 0;min-width:0}
.pcy__comm{padding:20px 24px 22px;min-width:0}
.pcy__eyebrow{display:inline-flex;align-items:center;gap:7px;max-width:100%;
  font-family:var(--font-mono);font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} /* audit: was .62rem (9.92px) */
.pcy__eyebrow i{width:6px;height:6px;border-radius:2px;background:var(--ink);flex:none}
.pcy__eyebrow--prep i{background:var(--signal-deep)}
.pcy__eyebrow--long i{background:var(--signal)}
.pcy__title{display:block;font-size:1.12rem;font-weight:700;color:var(--text);
  letter-spacing:-.01em;line-height:1.25;margin-top:10px}
.pcy__desc{margin:8px 0 0;font-size:.875rem;line-height:1.55;color:var(--text-2)}
.pcy__zlab{display:none}
.pcy__cadlab{display:block;font-family:var(--font-mono);font-size:.75rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)} /* audit: was .56rem (8.96px) */
.pcy__list{list-style:none;margin:0;padding:0}
.pcy__list li{position:relative;padding-left:15px;font-size:.9rem;line-height:1.5;
  color:var(--text-2)}
.pcy__list li+li{margin-top:8px}
.pcy__list li::before{content:"";position:absolute;left:0;top:.5em;width:5px;
  height:5px;border-radius:1.5px;background:var(--signal-deep);opacity:.7}
.pcy__price{display:block;font-size:1.05rem;font-weight:700;color:var(--text);
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pcy__pricesub{display:block;margin-top:5px;font-size:.82rem;line-height:1.5;
  color:var(--text-3)}
.pcy__pay{list-style:none;margin:12px 0 0;padding:0}
.pcy__pay li{position:relative;padding-left:14px;font-family:var(--font-mono);
  font-size:.78rem;line-height:1.55;color:var(--text-2)}
.pcy__pay li+li{margin-top:6px}
.pcy__pay li::before{content:"";position:absolute;left:0;top:.55em;width:5px;
  height:5px;border-radius:1.5px;background:var(--line-strong)}
.pcy__when{grid-column:1 / -1;display:flex;gap:10px;align-items:baseline;
  padding:11px 24px 13px 22px;border-top:1px solid var(--line-soft)}
.pcy__when p{margin:0;font-size:.82rem;line-height:1.5;color:var(--text-3)}
.pcy__when .pcy__cadlab{margin:0;flex:none}
.pcy__band+.pcy__band{border-top:1px solid var(--line-soft)}
.pcy__band--prep{border-left:4px solid var(--signal-deep);background:var(--signal-glow)}
.pcy__band--exec{border-left:4px solid var(--ink);background:#EBEFF3}
.pcy__band--long{border-left:4px solid var(--signal);background:rgba(196,131,59,.10)}
.pcy__band--exec .pcy__list li::before,
.pcy__band--exec .pcy__pay li::before{background:var(--ink)}
.pcy__band--long .pcy__list li::before,
.pcy__band--long .pcy__pay li::before{background:var(--signal)}
.pcy__list li b{font-weight:400;color:var(--text)}
.pcy__cat{font-family:var(--font-mono);font-size:.78rem;color:var(--text-3);
  white-space:nowrap}
.pcy__foot{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;
  border-top:1px solid var(--line);background:var(--bg-subtle);padding:12px 22px;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--text-3)}
/* module sheet inside a case: "Modules Included" (Monish 2026-09-21) —
   each module is a native <details> row in the same color-coded band
   grammar. Collapsed: name + category + "Covers:" digest + a plus/minus
   affordance; expanded: full bullets + the module's timeline line. */
.pj-cs{margin:16px 0 8px}
.pj-cs .pj-mod{display:block} /* beats .pj-cs .pcy__band's grid columns */
.pj-mod__head{position:relative;display:block;list-style:none;cursor:pointer;
  padding:16px 60px 15px 22px;transition:background .2s var(--ease-out)}
.pj-mod__head::-webkit-details-marker{display:none}
.pj-mod__head:hover{background:rgba(255,255,255,.5)}
.pj-mod__head:focus-visible{outline:2px solid var(--signal-deep);
  outline-offset:-2px}
.pj-mod__name{display:block;font-size:1.05rem;font-weight:700;color:var(--text);
  letter-spacing:-.01em;line-height:1.3}
.pj-mod__cat{display:block;margin-top:3px;font-family:var(--font-mono);
  font-size:.78rem;color:var(--text-3)}
.pj-mod__covers{display:block;margin-top:9px;font-size:.875rem;
  line-height:1.55;color:var(--text-2)}
.pj-mod__coverslab{font-weight:700;color:var(--text)}
.pj-mod__x{position:absolute;top:18px;right:22px;width:22px;height:22px}
.pj-mod__x::before,.pj-mod__x::after{content:"";position:absolute;
  background:var(--signal-deep);border-radius:2px;
  transition:transform .25s var(--ease-out)}
.pj-mod__x::before{width:14px;height:2px;left:4px;top:10px}
.pj-mod__x::after{width:2px;height:14px;left:10px;top:4px}
.pj-mod[open] .pj-mod__x::after{transform:scaleY(0)}
.pj-mod__body{padding:14px 22px 18px;border-top:1px solid var(--line-soft)}
.pj-mod__when{padding:12px 0 0;margin-top:14px}
.pj-mod__when .pcy__cadlab{margin-bottom:0}
@media(max-width:860px){
  .pcy{margin-top:28px}
  .pcy__band{display:block;border-top:1px solid var(--line)}
  /* double-class specificity: the desktop sibling rule (.pcy__band+.pcy__band,
     0,2,0) would otherwise beat a single-class 3px bar (QA-caught) */
  .pcy__band.pcy__band--prep{border-top:3px solid var(--signal-deep)}
  .pcy__band.pcy__band--exec{border-top:3px solid var(--ink)}
  .pcy__band.pcy__band--long{border-top:3px solid var(--signal)}
  .pcy__band.pcy__band--prep,.pcy__band.pcy__band--exec,
  .pcy__band.pcy__band--long{border-left:0}
  .pcy__rail{padding:16px 18px 0}
  .pcy__deliver{padding:14px 18px 0}
  .pcy__comm{padding:14px 18px 18px}
  .pcy__zlab{display:block;font-family:var(--font-mono);font-size:.75rem;
    font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--text-3);margin-bottom:8px} /* audit: was .6rem (9.6px) */
  /* audit: "IN THIS BUILD" repeated on every stacked band — first band only */
  .pcy__band:not(:first-child) .pcy__zlab{display:none}
  .pcy__list li{font-size:.92rem}
  .pcy__cat{white-space:normal}
  .pcy__foot{display:block;padding:12px 18px}
  .pcy__foot span{display:block}
  .pcy__foot span+span{margin-top:5px}
  .phb{grid-template-columns:1fr;gap:8px;margin-top:18px}
  .phb__b{padding:14px 16px 14px}
  .phb__cat{white-space:normal}
  .phb__list li+li{margin-top:8px}
  .phb__pay{margin-top:16px}
  .phb__when{margin-top:14px}
  /* expandable module rows: tighten the chrome, keep the tap target */
  .pj-mod__head{padding:14px 52px 14px 18px}
  .pj-mod__x{top:16px;right:18px}
  .pj-mod__body{padding:12px 18px 16px}
  .pj-mod__covers{font-size:.92rem}
}

/* ---- know section (r5c): title+desc left, clickable card right ---- */
.pj-know{padding:8px 0 64px}
.know__row{display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:center}
.know-card{display:flex;flex-direction:column;gap:10px;padding:26px 28px;background:#fff;
  border:1px solid var(--line-strong);border-radius:var(--r-lg);text-decoration:none;
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.know-card:hover{border-color:var(--signal);box-shadow:0 14px 30px rgba(34,48,60,.10);transform:translateY(-2px)}
.know-card__eyebrow{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)} /* audit: was 10px */
.know-card__title{font-size:1.05rem;font-weight:400;color:var(--ink);line-height:1.35}
.know-card__go{font-family:var(--font-mono);font-size:1.1rem;color:var(--signal-deep);transition:transform var(--dur-2) var(--ease-out)}
.know-card:hover .know-card__go{transform:translateX(4px)}
@media (max-width:860px){.know__row{grid-template-columns:1fr;gap:24px}}

/* ---- FAQ (ported from home-v2.css — now global so every page can carry it) ---- */
.faq{padding:104px 0 96px}
.faq .sec-head{max-width:52rem}
.faq__list{max-width:52rem;margin-left:auto;margin-right:auto;display:flex;
  flex-direction:column;gap:12px}
.faq__item{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  transition:box-shadow .3s var(--ease-out)}
.faq__item:hover{box-shadow:0 14px 36px rgba(10,15,22,.08)}
.faq__item summary{display:flex;align-items:center;gap:14px;padding:18px 22px;
  cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:600;
  font-size:1.02rem;color:var(--text)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:focus-visible{outline:2px solid var(--signal-deep);outline-offset:-2px;
  border-radius:var(--r)}
.faq__item summary i{margin-left:auto;width:22px;height:22px;position:relative;flex:0 0 auto}
.faq__item summary i::before,.faq__item summary i::after{content:'';position:absolute;
  background:var(--signal-deep);border-radius:2px;transition:transform .25s var(--ease-out)}
.faq__item summary i::before{width:14px;height:2px;left:4px;top:10px}
.faq__item summary i::after{width:2px;height:14px;left:10px;top:4px}
.faq__item[open] summary i::after{transform:scaleY(0)}
.faq__a{padding:0 22px 20px}
.faq__a p{font-size:.95rem;line-height:1.66;color:var(--text-2);max-width:560px; /* audit: 62ch Georgia = ~80 real chars */
  text-wrap:pretty;margin:12px 0 0}
.faq__sa{font-weight:400;color:var(--text)}
.faq__table{width:100%;border-collapse:collapse;margin:14px 0 2px;font-size:.92rem}
.faq__table th{font-weight:400;text-align:left;vertical-align:top;
  padding:9px 14px 9px 0;width:34%;color:var(--text)}
.faq__table td{vertical-align:top;padding:9px 0;color:var(--text-2)}
.faq__table tr+tr th,.faq__table tr+tr td{border-top:1px solid var(--line)}
.faq__a ul{margin:8px 0 4px;padding-left:20px;font-size:.95rem;line-height:1.66;
  color:var(--text-2);max-width:560px}
.faq__a ul li+li{margin-top:4px}
.faq__a a{color:var(--text);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--signal-deep)}
.faq__a a:hover{text-decoration-color:var(--text)}
@media (max-width:640px){
  .faq__table,.faq__table tbody,.faq__table tr,.faq__table th,.faq__table td{
    display:block;width:100%}
  .faq__table th{padding:10px 0 2px}
  .faq__table td{padding:0 0 10px}
  .faq__table tr+tr th{border-top:1px solid var(--line);padding-top:12px}
  .faq__table tr+tr td{border-top:0}
}

/* ---- case studies (article restructure, 2026-09-21) ---- */
/* audit 2026-09-21: the 1px invisible industry anchors became labeled
   hairline dividers — cases breathe apart and the reader always knows
   which industry they're in */
.pj-industry{margin:96px 0 0;scroll-margin-top:170px;border-top:1px solid var(--line);padding-top:14px}
.pj-industry + .pj-sec{margin-top:0}
.pj-main .pj-industry:first-child{margin-top:0}
.pj-industry__label{display:block;font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
@media (max-width:900px){.pj-industry{margin:64px 0 0}} /* must sit AFTER the desktop rule — same specificity, cascade order wins */
.pj-case .pj-sec__head h3{max-width:26ch}
/* the client-needs quote, large (Monish: "the client needs quote, large") */
.pj-need{margin:24px 0 0;font-family:var(--font-display);
  font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.18;letter-spacing:-.02em;
  color:var(--text);max-width:34ch}
.pj-need q{quotes:"\201C" "\201D"}
/* solution slider: ONE screen per slide — a single Mac or phone frame,
   whichever screen is relevant to that slide. NEVER stacked screens, in
   any state (Monish 2026-09-21): the display toggle is unscoped, so even
   without JS only the active (first) slide shows and the controls do
   nothing. JS: arrows/segs/keyboard swap the active slide. */
.pj-prj{margin:6px 0 0}
.pj-prj__slide{display:none;margin:0 0 14px}
.pj-prj__slide.is-in{display:block}
.pj-prj__frame--mac{position:relative;max-width:780px;margin:0 auto;
  background:#0A0F16;border-radius:14px 14px 0 0;padding:12px 12px 0;
  box-shadow:0 18px 44px rgba(10,15,22,.16)}
.pj-prj__frame--mac img{display:block;width:100%;height:auto;border-radius:6px 6px 0 0;
  background:#fff;border:0}
.pj-prj__frame--mac .pj-prj__slot{aspect-ratio:16/10}
.pj-prj__frame--mac::after{content:"";display:block;width:112%;margin:0 -6%;
  height:13px;background:linear-gradient(#2A3642,#141C24);
  border-radius:2px 2px 14px 14px}
.pj-prj__frame--phone{position:relative;max-width:300px;margin:0 auto;
  background:#0A0F16;border-radius:32px;padding:12px 10px;
  box-shadow:0 18px 40px rgba(10,15,22,.16)}
.pj-prj__frame--phone img{display:block;width:100%;height:auto;border-radius:24px;background:#fff;border:0}
.pj-prj__frame--phone .pj-prj__slot{aspect-ratio:9/18}
.pj-prj__frame--phone::before{content:"";position:absolute;top:12px;left:50%;
  transform:translateX(-50%);width:86px;height:18px;border-radius:0 0 12px 12px;
  background:#0A0F16;z-index:1}
.pj-prj__slot{width:100%;min-height:200px;display:flex;align-items:center;
  justify-content:center;border:1.5px dashed var(--line-strong);
  border-radius:8px;background:var(--bg-subtle)}
.pj-prj__slot span{font-family:var(--font-mono);font-size:.78rem;color:var(--text-3);
  padding:0 14px;text-align:center;word-break:break-all;line-height:1.5}
.pj-prj__bar{display:flex;align-items:center;gap:14px;margin-top:14px}
.pj-prj__stage{touch-action:pan-y} /* pairs with the pointer swipe (audit 2026-09-21) */
.pj-prj__arr{appearance:none;background:#fff;border:1px solid var(--line-strong);
  border-radius:8px;width:44px;height:40px;cursor:pointer;color:var(--text);
  font-size:1rem;line-height:1;flex:none;
  transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)} /* audit: was 36×32 — sub-44px tap target */
.pj-prj__arr:hover{border-color:var(--signal-deep);color:var(--signal-deep)}
.pj-prj__arr:focus-visible{outline:2px solid var(--signal-deep);outline-offset:2px}
.pj-prj__segs{display:flex;gap:6px;flex:1}
.pj-prj__seg{appearance:none;-webkit-appearance:none;background:none;border:0;
  margin:0;padding:13px 0;cursor:pointer;flex:1;min-width:24px;border-radius:6px}
.pj-prj__seg:focus-visible{outline:2px solid var(--signal-deep);outline-offset:2px}
.pj-prj__seg i{display:block;height:5px;border-radius:2.5px;background:var(--line);transition:background var(--dur) var(--ease-out)} /* audit: height transition removed — layout-property transition (detector layout-transition ×8) */
.pj-prj__seg:hover i{background:var(--line-strong)}
.pj-prj__seg.is-on i{background:var(--signal-deep);height:7px} /* audit: segs read as one split bar — active seg now distinct */
.pj-prj__cap{margin:10px 0 0;font-size:.9rem;line-height:1.55;color:var(--text-2)}
@media(max-width:640px){
  .pj-prj__frame--mac{border-radius:10px 10px 0 0;padding:8px 8px 0}
  .pj-prj__frame--mac::after{height:9px;margin:0 -4%;width:108%}
  .pj-prj__frame--phone{max-width:240px;border-radius:26px;padding:10px 8px}
  .pj-prj__frame--phone img{border-radius:19px}
  .pj-prj__frame--phone::before{top:10px;height:14px;width:64px}
}
/* reduced motion: nothing animates here — the display toggle is instant */
@media (prefers-reduced-motion:reduce){
  .know-card,.know-card__go{transition:none}
  .faq__item{transition:none}
}