/* ============================================================
   The PathBuilders - home page
   Type: Playfair (display) · Montserrat (body) · Almarai (UI)
   ============================================================ */

:root{
  /* warm light ground */
  --ivory:      #FBF8F5;
  --cream:      #F5EFE9;
  --blush:      #F1E4DE;
  --shell:      #FFFFFF;

  /* deep plum ground */
  --plum:       #241A29;
  --plum-2:     #2F2136;
  --plum-3:     #3E2C47;

  /* accents */
  --rose:       #A8564F;   /* dusty rose - text-safe on light */
  --rose-lt:    #E0A08F;   /* soft clay - for dark grounds */
  --rose-pale:  #EBD3CA;
  --sage:       #7B9A7F;
  --gold:       #C89B5A;

  /* semantic (light ground, default) */
  --bg:         var(--ivory);
  --surface:    var(--shell);
  --text:       #2B2130;
  --muted:      #6A5E71;
  --muted-2:    #948798;
  --line:       rgba(43,33,48,.10);
  --line-2:     rgba(43,33,48,.18);
  --accent:     var(--rose);
  --accent-soft:rgba(168,86,79,.10);

  --grad: linear-gradient(100deg, #C97C6B 0%, #A8564F 60%, #8E4A54 100%);

  --font-display: 'Playfair', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Montserrat', system-ui, -apple-system, sans-serif;
  --font-ui:      'Almarai', 'Montserrat', system-ui, sans-serif;

  /* data-viz series palette - used by the deck AND the work-card previews */
  --c1:#E0A08F;  /* clay       */
  --c2:#9FBFA2;  /* sage       */
  --c3:#D9B678;  /* gold       */
  --c4:#C79BB8;  /* mauve      */
  --c5:#93AEC6;  /* dusty blue */

  /* photo tint - 0 = untouched, 1 = heavy duotone */
  --photo-tint: .34;

  --wrap: 1180px;
  --r:    18px;
  --r-lg: 28px;
  --r-xl: 40px;
}

/* dark plum ground - applied per section */
.on-dark{
  --bg:         var(--plum);
  --surface:    rgba(255,255,255,.045);
  --text:       #F6F1EE;
  --muted:      #C6B7C4;
  --muted-2:    #9B8AA0;
  --line:       rgba(255,255,255,.12);
  --line-2:     rgba(255,255,255,.22);
  --accent:     var(--rose-lt);
  --accent-soft:rgba(224,160,143,.14);
  color:var(--text);
  background:var(--bg);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ivory);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.16;
  letter-spacing:-.012em;
  margin:0;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:26px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--rose); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
  font-family:var(--font-ui); font-weight:700;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; border-radius:8px; }

/* ---------- shared bits ---------- */

.eyebrow{
  font-family:var(--font-ui);
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
  display:inline-flex; align-items:center; gap:10px;
  margin-bottom:22px;
}
.dot{
  width:5px; height:5px; border-radius:50%;
  background:currentColor; box-shadow:0 0 0 4px var(--accent-soft);
}

/* emphasis word - Playfair italic in dusty rose */
.grad{
  font-style:italic;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.on-dark .grad{
  background:linear-gradient(100deg,#F0C6B4,#E0A08F 60%,#CE8C8A);
  -webkit-background-clip:text; background-clip:text;
}

.btn{
  --btn-pad: 14px 26px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:var(--btn-pad);
  border-radius:100px; border:1px solid transparent;
  font-family:var(--font-ui); font-size:14px; font-weight:700;
  letter-spacing:.02em;
  cursor:pointer; white-space:nowrap;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease,
             background .3s ease, border-color .3s ease, color .3s ease;
}
.btn--primary{
  background:var(--plum); color:var(--ivory);
  box-shadow:0 10px 26px -14px rgba(36,26,41,.9);
}
.btn--primary:hover{
  background:var(--rose);
  transform:translateY(-2px);
  box-shadow:0 16px 32px -14px rgba(168,86,79,.85);
}
.on-dark .btn--primary{ background:var(--rose-pale); color:var(--plum); }
.on-dark .btn--primary:hover{ background:var(--ivory); }

.btn--ghost{ border-color:var(--line-2); color:var(--text); background:transparent; }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }

.btn--sm{ --btn-pad: 11px 21px; font-size:13px; }
.btn--lg{ --btn-pad: 17px 34px; font-size:15px; }
.btn--block{ width:100%; }
.btn span{ transition:transform .25s ease; }
.btn:hover span{ transform:translateX(3px); }

.link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-weight:700; font-size:13px;
  letter-spacing:.04em; color:var(--accent);
  margin-top:auto; padding-top:24px;
}
.link span{ transition:transform .25s ease; }
.link:hover span{ transform:translateX(4px); }

.section{ padding:120px 0; position:relative; }
.section--tight{ padding:76px 0; }
.section--alt{ background:var(--cream); }

.sec-head{ max-width:640px; margin-bottom:60px; }
.sec-head h2{ font-size:clamp(31px,4.4vw,50px); }
.sec-sub{ color:var(--muted); margin-top:18px; font-size:16.5px; font-weight:300; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .marquee__track{ animation:none !important; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
  border-bottom:1px solid transparent;
}
.nav.stuck{
  background:rgba(251,248,245,.88);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom-color:var(--line);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:82px; }

.brand{ display:inline-flex; align-items:center; gap:12px; color:var(--text); }
.brand__mark{ width:auto; height:38px; flex:none; }
.brand__text{
  font-family:var(--font-display); font-weight:500; font-size:18.5px; letter-spacing:.005em;
}
.brand__text span{ color:var(--rose); font-style:italic; }

.nav__links{ display:flex; gap:24px; font-size:13.5px; font-weight:500; color:var(--muted); }
.nav__links a{ position:relative; transition:color .25s ease; }
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-7px; height:1px; width:0;
  background:var(--rose); transition:width .3s cubic-bezier(.2,.7,.3,1);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ width:100%; }

.nav__cta{ display:flex; align-items:center; gap:12px; }
.nav__toggle{
  display:none; width:42px; height:42px; border-radius:50%;
  background:transparent; border:1px solid var(--line-2);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer;
}
.nav__toggle span{ display:block; width:16px; height:1.2px; background:var(--text); transition:transform .28s ease; }
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.1px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.1px) rotate(-45deg); }

.nav__mobile{
  display:none; flex-direction:column; gap:2px;
  padding:0 26px; overflow:hidden; max-height:0;
  background:rgba(251,248,245,.97); backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:max-height .35s ease, padding .35s ease, border-color .3s ease;
}
.nav__mobile.open{ max-height:380px; padding:10px 26px 26px; border-bottom-color:var(--line); }
.nav__mobile a{ padding:14px 0; color:var(--muted); font-size:14.5px; border-bottom:1px solid var(--line); }
.nav__mobile a:last-child{ border:0; margin-top:18px; color:var(--ivory); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding:60px 0 0; overflow:hidden; }

/* soft warm light, no neon */
.hero__glow{
  position:absolute; inset:-34% -16% auto -16%; height:960px; pointer-events:none;
  background:
    radial-gradient(44% 40% at 16% 26%, rgba(224,160,143,.42), transparent 68%),
    radial-gradient(40% 36% at 84% 14%, rgba(235,211,202,.60), transparent 70%),
    radial-gradient(52% 44% at 58% 72%, rgba(200,155,90,.14), transparent 72%);
  filter:blur(14px);
}
/* whisper-thin arc motif instead of a tech grid */
.hero__grid{
  position:absolute; left:50%; top:-180px; width:1500px; height:1500px;
  transform:translateX(-50%); pointer-events:none; opacity:.5;
  border-radius:50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0 118px,
      rgba(168,86,79,.10) 118px 119px);
  mask-image:radial-gradient(60% 46% at 50% 34%, #000 0%, transparent 76%);
  -webkit-mask-image:radial-gradient(60% 46% at 50% 34%, #000 0%, transparent 76%);
}

.hero__inner{
  position:relative;
  display:grid; grid-template-columns:1.02fr .98fr; gap:70px; align-items:center;
  padding-bottom:78px;
}

.hero h1{ font-size:clamp(40px,5.8vw,70px); line-height:1.08; letter-spacing:-.018em; }
.lede{
  color:var(--muted); font-weight:300;
  font-size:clamp(16px,1.55vw,18.5px); line-height:1.8;
  max-width:510px; margin-top:28px;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:40px; }

/* ---- marquee ---- */
.marquee-wrap{ position:relative; padding-bottom:44px; }
.marquee-label{
  font-family:var(--font-ui); font-size:10.5px; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted-2); text-align:center; margin-bottom:26px;
}
.marquee{
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:58px;
  width:max-content; animation:slide 48s linear infinite;
}
/* desaturated at rest so fifteen brand palettes don't fight the page */
.marquee__track .logo{
  height:30px; width:auto; flex:none;
  filter:grayscale(1); opacity:.55;
  transition:filter .3s ease, opacity .3s ease;
}
.marquee__track .logo--tall{ height:52px; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track .logo:hover{ filter:none; opacity:1; }

@media (max-width:660px){
  .marquee__track{ gap:40px; }
  .marquee__track .logo{ height:24px; }
  .marquee__track .logo--tall{ height:42px; }
}
@keyframes slide{ to{ transform:translateX(-50%); } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes fade{ to{ opacity:1; } }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem{
  max-width:880px; margin-inline:auto; text-align:center;
  padding:56px 46px; border-radius:var(--r-xl);
  background:linear-gradient(165deg, var(--blush), var(--cream) 70%);
}
.problem__q{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(23px,3vw,31px);
  color:var(--rose); margin-bottom:20px;
}
.problem__a{ color:var(--muted); font-weight:300; font-size:clamp(15.5px,1.6vw,17.5px); line-height:1.85; }
.problem__a em{ color:var(--text); font-style:italic; font-family:var(--font-display); font-size:1.12em; }

/* ============================================================
   CARDS
   ============================================================ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{
  display:flex; flex-direction:column;
  background:var(--shell); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:38px 32px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.card:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 26px 50px -28px rgba(43,33,48,.34);
}
.card--feature{
  background:linear-gradient(168deg, var(--blush), var(--shell) 62%);
  border-color:rgba(168,86,79,.20);
}
.card__icon{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--rose); margin-bottom:26px;
  border:1px solid rgba(168,86,79,.18);
}
.card__icon svg{ width:22px; height:22px; }
.card h3{ font-size:25px; margin-bottom:14px; }
.card > p{ color:var(--muted); font-size:14.5px; font-weight:300; line-height:1.8; }

.ticks{ display:grid; gap:11px; margin-top:24px; }
.ticks li{ position:relative; padding-left:26px; font-size:13.5px; font-weight:400; color:var(--muted); line-height:1.6; }
.ticks li::before{
  content:''; position:absolute; left:2px; top:7px;
  width:11px; height:6px; border-left:1.5px solid var(--rose); border-bottom:1.5px solid var(--rose);
  transform:rotate(-45deg);
}

/* ============================================================
   WORK
   ============================================================ */
.work{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.wcard{
  position:relative; overflow:hidden;
  background:var(--shell); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:38px 34px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.wcard::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.wcard:hover{ transform:translateY(-6px); box-shadow:0 26px 50px -28px rgba(43,33,48,.34); }
.wcard:hover::before{ transform:scaleX(1); }
.wcard__kicker{
  font-family:var(--font-ui); font-size:10.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:14px;
}
.wcard h3{ font-size:27px; margin-bottom:14px; }
.wcard > p{ color:var(--muted); font-size:14.5px; font-weight:300; line-height:1.8; }
.wcard__stat{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--line);
  font-size:13px; color:var(--muted); font-weight:400;
}
.wcard__stat b{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:21px; color:var(--rose); margin-right:10px;
}

/* ============================================================
   STEPS
   ============================================================ */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.step{ position:relative; padding-top:28px; border-top:1px solid var(--line-2); }
.step__n{
  font-family:var(--font-display); font-style:italic; font-size:19px;
  color:var(--rose); display:block; margin-bottom:16px;
}
.step h3{ font-size:20px; margin-bottom:12px; }
.step p{ color:var(--muted); font-size:13.5px; font-weight:300; line-height:1.8; }

/* ============================================================
   CTA (deep plum)
   ============================================================ */
.cta{ position:relative; overflow:hidden; text-align:center; }
.cta__glow{
  position:absolute; inset:auto -10% -46% -10%; height:680px; pointer-events:none;
  background:
    radial-gradient(40% 52% at 30% 50%, rgba(224,160,143,.26), transparent 70%),
    radial-gradient(40% 52% at 72% 44%, rgba(200,155,90,.16), transparent 72%);
  filter:blur(16px);
}
.cta__inner{ position:relative; max-width:780px; }
.cta h2{ font-size:clamp(32px,4.8vw,54px); }
.cta__inner > p{ color:var(--muted); font-weight:300; font-size:17.5px; margin-top:22px; line-height:1.8; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:40px; }
.cta__fine{ font-size:12.5px; color:var(--muted-2); margin-top:28px; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.news{ display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; }
.news__copy h2{ font-size:clamp(29px,4vw,44px); margin-bottom:22px; }
.news__copy > p{ color:var(--muted); font-weight:300; font-size:16px; line-height:1.85; }
.news__fine{ color:var(--muted-2); font-size:14px; margin-top:18px; font-style:italic; }

.news__form{
  background:var(--shell); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:36px; display:grid; gap:16px;
  box-shadow:0 22px 48px -32px rgba(43,33,48,.28);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:8px; }
.field > span{
  font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted-2);
}
.field > span i{ font-style:normal; color:var(--rose); margin-left:6px; }
.field input{
  width:100%; padding:13px 0;
  background:transparent; border:0; border-bottom:1px solid var(--line-2);
  border-radius:0; color:var(--text);
  font-family:var(--font-body); font-size:15px; font-weight:400;
  transition:border-color .25s ease;
}
.field input:focus{ outline:none; border-bottom-color:var(--rose); }
.field input[aria-invalid="true"]{ border-bottom-color:#B3524C; }
.news__form .btn{ margin-top:12px; }
.news__status{ font-size:13px; min-height:20px; color:var(--rose); text-align:center; font-style:italic; }
.news__status.err{ color:#B3524C; }

/* ============================================================
   FOOTER (deep plum)
   ============================================================ */
.foot{ padding-top:72px; }
.foot .brand{ color:var(--text); }
.foot .brand__text span{ color:var(--rose-lt); }
.foot__inner{ display:grid; grid-template-columns:1.2fr 1fr; gap:52px; padding-bottom:52px; }
.foot__brand p{ color:var(--muted); font-size:14px; font-weight:300; margin-top:18px; max-width:290px; font-style:italic; }
.foot__links{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px; }
.foot__links h4{
  font-family:var(--font-ui); font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted-2); margin-bottom:18px;
}
.foot__links a{ display:block; font-size:14px; font-weight:300; color:var(--muted); padding:6px 0; transition:color .25s ease; }
.foot__links a:hover{ color:var(--rose-lt); }

.foot__bar{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line); padding-block:26px;
  font-size:12px; color:var(--muted-2);
}
.foot__tag{ font-family:var(--font-display); font-style:italic; font-size:14px; color:var(--rose-lt); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .hero__inner{ grid-template-columns:1fr; gap:56px; }
  .panel{ transform:none; }
    .cards{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:32px; }
  .news{ grid-template-columns:1fr; gap:40px; }
  .foot__inner{ grid-template-columns:1fr; gap:40px; }
}

@media (max-width:1100px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .nav__mobile{ display:flex; }
  .nav__cta .btn{ display:none; }
}

@media (max-width:660px){
  .section{ padding:82px 0; }
  .hero{ padding-top:36px; }
  .work{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; gap:28px; }
  .problem{ padding:24px; }
  .field-row{ grid-template-columns:1fr; }
  .news__form{ padding:28px; }
  .cta__actions .btn{ width:100%; }
}

/* ============================================================
   LOGO MARK - real line-art mark, keyed to transparency
   ============================================================ */
.brand__mark{ width:auto; height:40px; flex:none; }
.brand{ gap:14px; }
@media (max-width:480px){ .brand__mark{ height:34px; } .brand__text{ font-size:16.5px; } }

/* ============================================================
   PROBLEM - photo beside the question
   ============================================================ */
.problem{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:52px; align-items:center;
  text-align:left; max-width:1060px; padding:40px;
}
.problem__photo{
  margin:0; overflow:hidden; border-radius:22px 22px 22px 90px;
  aspect-ratio:4/3;
  box-shadow:0 24px 48px -30px rgba(43,33,48,.42);
}
.problem__photo img{ width:100%; height:100%; object-fit:cover; }
.problem__q{ margin-bottom:18px; }

/* ============================================================
   TRUST BAND - full-bleed photo with a plum wash
   ============================================================ */
.band{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(380px,46vw,520px);
  display:grid; align-items:center;
}
.band__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 42%; z-index:-2;
}
.band__veil{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(96deg, rgba(36,26,41,.90) 0%, rgba(36,26,41,.66) 46%, rgba(36,26,41,.24) 100%),
    linear-gradient(0deg, rgba(36,26,41,.34), transparent 55%);
}
.band__inner{ max-width:660px; margin-inline:0; padding-block:60px; }
.band__quote{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  font-size:clamp(34px,5.4vw,60px); line-height:1.08; color:#FBF8F5;
}
.band__sub{
  color:rgba(251,248,245,.80); font-weight:300;
  font-size:clamp(15px,1.7vw,17.5px); line-height:1.85; margin-top:22px; max-width:480px;
}

@media (max-width:1000px){
  .hero__photo{ max-width:460px; margin-inline:auto; }
  .problem{ grid-template-columns:1fr; gap:34px; padding:32px; }
  .problem__photo{ border-radius:20px 20px 20px 70px; }
  .band__inner{ padding-block:52px; }
}

@media (max-width:660px){
  .hero__photo{ max-width:none; }
  .problem{ padding:24px; }
  .band__veil{ background:linear-gradient(0deg, rgba(36,26,41,.92) 8%, rgba(36,26,41,.62) 70%, rgba(36,26,41,.45)); }
}

/* ============================================================
   HERO VISUAL - arched photo
   ============================================================ */
.hero__visual{ position:relative; }
.hero__photo{
  position:relative; z-index:2; margin:0 auto; overflow:hidden;
  border-radius:50% 50% 30px 30px / 37.5% 37.5% 30px 30px;
  aspect-ratio:3/4;
  box-shadow:0 44px 84px -46px rgba(43,33,48,.55);
}
.hero__photo .shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 30%;
  opacity:0; transition:opacity 1.1s ease;
}
.hero__photo .shot.is-active{ opacity:1; }

/* dots sit on the photo, over a soft scrim so they read on any frame */
.shot__dots{
  position:absolute; left:0; right:0; bottom:14px; z-index:3;
  display:flex; justify-content:center; gap:7px;
}
.shot__dots::before{
  content:''; position:absolute; inset:-24px 0 -14px; z-index:-1;
  background:linear-gradient(0deg, rgba(36,26,41,.42), transparent);
  pointer-events:none;
}
.shot__dot{
  width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:rgba(251,248,245,.45);
  transition:background .3s ease, transform .3s ease;
}
.shot__dot:hover{ background:rgba(251,248,245,.75); }
.shot__dot[aria-selected="true"]{ background:var(--ivory); transform:scale(1.25); }

@media (prefers-reduced-motion:reduce){
  .hero__photo .shot{ transition:none; }
}
.hero__halo{
  position:absolute; inset:8% -10% -8% -10%; z-index:1; border-radius:50%;
  background:radial-gradient(52% 52% at 50% 50%, rgba(224,160,143,.42), transparent 70%);
  filter:blur(52px);
}

/* ============================================================
   DECK - carousel of real builds
   ============================================================ */
.deck{ margin-top:48px; max-width:520px; }

.deck__stage{
  position:relative; height:384px;
  border-radius:24px;
  background:linear-gradient(168deg, var(--plum-2), var(--plum));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 34px 64px -34px rgba(43,33,48,.58);
  overflow:hidden;
}

.dash{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0; transform:translateX(18px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.dash[hidden]{ display:flex; }          /* keep layout; visibility is opacity-driven */
.dash.is-active{ opacity:1; transform:none; pointer-events:auto; }
.dash.is-leaving{ opacity:0; transform:translateX(-18px); }

.dash__bar{
  display:flex; align-items:center; gap:7px; flex:none;
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
}
.dash__title{
  font-family:var(--font-ui); font-size:10.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(246,241,238,.74); margin-left:12px;
}
.dash__live{
  margin-left:auto; font-family:var(--font-ui); font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:#9FBFA2;
}

.dash__body{ padding:16px; display:grid; gap:13px; align-content:start; }

/* --- KPI trio --- */
.dash .kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.dash .kpi{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:11px; padding:10px 11px; display:flex; flex-direction:column; gap:2px;
}
.dash .kpi span{
  font-family:var(--font-ui); font-size:8px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(246,241,238,.50);
}
.dash .kpi b{ font-family:var(--font-display); font-size:20px; font-weight:500; color:#F6F1EE; }
.dash .kpi i{ font-style:normal; font-family:var(--font-ui); font-size:9px; font-weight:700; color:#9FBFA2; }

/* --- horizontal bars --- */
.bars{ display:grid; gap:9px; }
.bar{ display:grid; grid-template-columns:1fr 92px auto; align-items:center; gap:10px; }
.bar > span{ font-size:10.5px; font-weight:300; color:rgba(246,241,238,.72); }
.bar__track{ height:5px; border-radius:100px; background:rgba(255,255,255,.10); overflow:hidden; }
.bar__track i{
  display:block; height:100%; border-radius:100px; background:var(--c);
  width:0; transition:width .9s cubic-bezier(.2,.7,.3,1);
}
.is-active .bar__track i{ width:var(--w); }
.bar > b{
  font-family:var(--font-display); font-size:13px; font-weight:500;
  color:#F6F1EE; min-width:44px; text-align:right;
}

/* --- event rows --- */
.dash .rows{ display:grid; gap:7px; }
.dash .row{
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; padding:9px 11px;
}
.dash .row p{ font-size:10.5px; font-weight:300; color:rgba(246,241,238,.76); flex:1;
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dash .row time{ font-family:var(--font-display); font-size:12px; color:rgba(246,241,238,.92); }
.dash .tag{
  font-family:var(--font-ui); font-size:8px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:4px 7px; border-radius:5px;
}
.dash .tag--ok{ background:rgba(123,154,127,.22); color:#9FBFA2; }
.dash .tag--warn{ background:rgba(224,160,143,.18); color:#E8B8A8; }

/* --- sparkline --- */
.dash .chart{
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:11px; padding:10px 12px 8px;
  display:grid; gap:6px; align-content:start;
}
.chart__head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.chart__head span{
  font-family:var(--font-ui); font-size:9px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,238,.62);
}
.chart__head em{ font-style:normal; font-size:9.5px; font-weight:300; color:rgba(246,241,238,.40); }

.chart__plot{ position:relative; height:74px; padding-left:16px; }
.chart__plot svg{ width:100%; height:100%; display:block; }

/* gridlines + y ticks */
.chart__plot .gl{
  position:absolute; left:16px; right:0; top:var(--t);
  border-top:1px dashed rgba(255,255,255,.10);
}
.chart__plot .gl b{
  position:absolute; left:-16px; top:-6px;
  font-family:var(--font-ui); font-size:8px; font-weight:400;
  color:rgba(246,241,238,.34);
}

.chart__x{
  display:flex; justify-content:space-between; padding-left:16px;
  font-family:var(--font-ui); font-size:8px; color:rgba(246,241,238,.34);
}
.dash .spark{ stroke:var(--c1); stroke-dasharray:1000; stroke-dashoffset:1000; }
.dash.is-active .spark{ animation:draw 1.9s cubic-bezier(.2,.7,.3,1) .15s forwards; }
.dash .spark-fill{ opacity:0; }
.dash.is-active .spark-fill{ animation:fade 1s ease 1.1s forwards; }

/* --- nav --- */
.deck__nav{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.deck__arrow{
  width:32px; height:32px; flex:none; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line-2); color:var(--muted);
  font-size:17px; line-height:1; display:grid; place-items:center;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.deck__arrow:hover{ border-color:var(--rose); color:var(--rose); }
.deck__dots{ display:flex; gap:8px; flex:1; }
.deck__dot{
  flex:1; height:3px; padding:0; border:0; cursor:pointer; border-radius:100px;
  background:var(--line-2); position:relative; overflow:hidden;
  transition:background .25s ease;
}
.deck__dot::after{
  content:''; position:absolute; inset:0; width:0; background:var(--rose); border-radius:100px;
}
.deck__dot[aria-selected="true"]::after{ width:100%; transition:width .4s ease; }
.deck__dot.is-timing::after{ width:100%; transition:width var(--dur) linear; }

@media (max-width:1000px){
  .deck{ max-width:none; }
}
@media (max-width:660px){
  .deck__stage{ height:412px; }
  .bar{ grid-template-columns:1fr 64px auto; }
}

/* ============================================================
   PHOTO TINT - pulls every photo into the plum / clay palette.
   soft-light keeps skin tones readable where multiply would
   muddy them; the img filter takes the edge off competing hues
   before the overlay lands.
   ============================================================ */
.hero__photo,
.problem__photo,
.band{ position:relative; }

.hero__photo .shot,
.problem__photo img,
.band__img{
  filter:saturate(.82) contrast(1.04) sepia(.12);
}

.hero__photo::after,
.problem__photo::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(165deg,
    rgba(224,160,143,.85) 0%,
    rgba(168,86,79,.55)  45%,
    rgba(36,26,41,.90)  100%);
  mix-blend-mode:soft-light;
  opacity:var(--photo-tint);
}

/* a whisper of plum in the shadows, so darks read warm not grey */
.hero__photo::before,
.problem__photo::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 20%, transparent 40%, rgba(36,26,41,.30));
  mix-blend-mode:multiply;
  opacity:calc(var(--photo-tint) * .7);
}

/* dots sit above the tint */
.shot__dots{ z-index:4; }

/* ============================================================
   WORK CARDS - expand on hover to reveal a live-style preview
   ============================================================ */
.wcard{ cursor:pointer; }
.wcard:focus-visible{ outline:2px solid var(--rose); outline-offset:3px; }

/* grid-template-rows 0fr -> 1fr animates to the content's natural height,
   which max-height guesswork cannot do without clipping or lag */
.wcard__more{
  display:grid; grid-template-rows:0fr;
  margin-top:0;
  transition:grid-template-rows .5s cubic-bezier(.2,.7,.3,1), margin-top .5s ease;
}
.wcard__moreInner{ overflow:hidden; min-height:0; }

.wcard:hover  .wcard__more,
.wcard:focus-within .wcard__more{ grid-template-rows:1fr; margin-top:22px; }

/* the preview reuses the carousel's dashboard styling, unstacked */
.dash--inline{
  position:static; opacity:1; transform:none; pointer-events:auto;
  border-radius:16px; overflow:hidden;
  background:linear-gradient(168deg, var(--plum-2), var(--plum));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 40px -26px rgba(43,33,48,.7);
}
.dash--inline .dash__body{ padding:14px; gap:11px; }
.dash--inline .kpi b{ font-size:18px; }
.dash--inline .chart{ padding:9px 11px 7px; }
.dash--inline .chart__plot{ height:64px; }

/* bars and sparkline animate in only once the card is actually open */
.wcard .bar__track i{ width:0; }
.wcard:hover .bar__track i,
.wcard:focus-within .bar__track i{ width:var(--w); transition:width .8s cubic-bezier(.2,.7,.3,1) .15s; }
.wcard .spark{ stroke:var(--c1); stroke-dasharray:1000; stroke-dashoffset:1000; }
.wcard:hover .spark,
.wcard:focus-within .spark{ animation:draw 1.6s cubic-bezier(.2,.7,.3,1) .1s forwards; }
.wcard .spark-fill{ opacity:0; }
.wcard:hover .spark-fill,
.wcard:focus-within .spark-fill{ animation:fade .9s ease .9s forwards; }

.wcard__hint{
  font-family:var(--font-ui); font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);
  margin-top:16px; opacity:.85; transition:opacity .3s ease;
}
.wcard:hover .wcard__hint,
.wcard:focus-within .wcard__hint{ opacity:0; }

/* touch devices have no hover, so a tap sets .is-open instead (see main.js).
   Previously these were forced open, which made the section a wall of charts. */
@media (hover:none){
  .wcard{ cursor:pointer; }
}

@media (prefers-reduced-motion:reduce){
  .wcard__more{ transition:none; }
  .wcard:hover .bar__track i,
  .wcard:focus-within .bar__track i{ transition:none; }
  .wcard:hover .spark,
  .wcard:focus-within .spark{ animation:none; stroke-dashoffset:0; }
  .wcard:hover .spark-fill,
  .wcard:focus-within .spark-fill{ animation:none; opacity:1; }
}

/* grid items default to min-width:auto, so a 3-up KPI row refuses to shrink
   below its content and overflows the card. Cap every track at the parent. */
.dash__body{ grid-template-columns:minmax(0,1fr); }
.dash .kpis, .dash .bars, .dash .rows, .dash .chart, .dash .kpi, .dash .bar{ min-width:0; }
.dash .kpi span{ overflow-wrap:anywhere; }

@media (max-width:660px){
  .wcard{ padding:28px 22px; }
  .dash--inline .dash__body{ padding:12px; }
  .dash--inline .kpis{ gap:7px; }
  .dash--inline .kpi{ padding:9px 8px; }
  .dash--inline .kpi b{ font-size:16px; }
}

/* ============================================================
   KPI HUB PREVIEW - metric cards, mirroring the real build
   ============================================================ */
.khead{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.khead span{
  font-family:var(--font-ui); font-size:9px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(246,241,238,.62);
}
.khead em{ font-style:normal; font-size:9px; font-weight:300; color:rgba(246,241,238,.38); }

.kgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }

.kcard{
  --tone:var(--c1);
  min-width:0; display:grid; gap:5px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 11px 9px;
}
.kcard--t1{ --tone:var(--c1); }
.kcard--t2{ --tone:var(--c2); }
.kcard--t3{ --tone:var(--c3); }
.kcard--t4{ --tone:var(--c4); }

.kcard__top{ display:flex; align-items:center; gap:6px; min-width:0; }
.kcard__icon{ width:12px; height:12px; flex:none; color:var(--tone); }
.kcard__label{
  font-size:9.5px; font-weight:400; color:rgba(246,241,238,.80);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;
}
.kbadge{
  flex:none; font-family:var(--font-ui); font-size:6.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:2px 4px; border-radius:3px;
}
.kbadge--auto{   background:rgba(123,154,127,.22); color:#9FBFA2; }
.kbadge--proxy{  background:rgba(224,160,143,.20); color:#E8B8A8; }
.kbadge--manual{ background:rgba(200,155,90,.22);  color:#DFBE86; }

.kcard__val{
  font-family:var(--font-display); font-size:22px; font-weight:500;
  line-height:1; color:#F6F1EE;
}
.kcard__val span{ font-size:12px; color:rgba(246,241,238,.52); margin-left:2px; }

.kpill{
  justify-self:start;
  font-family:var(--font-ui); font-size:8px; font-weight:700;
  padding:2px 6px; border-radius:100px;
  background:rgba(123,154,127,.18); color:#9FBFA2;
}

.kspark{ width:100%; height:20px; display:block; margin-top:1px; }
.kspark path{
  stroke:var(--tone);
  stroke-dasharray:200; stroke-dashoffset:200;
}
.wcard:hover .kspark path,
.wcard:focus-within .kspark path{ animation:draw 1.3s cubic-bezier(.2,.7,.3,1) .2s forwards; }

.kcard__note{
  font-size:7.5px; font-weight:300; line-height:1.45; color:rgba(246,241,238,.40);
  border-top:1px solid rgba(255,255,255,.07); padding-top:5px;
}

@media (prefers-reduced-motion:reduce){
  .kspark path{ stroke-dashoffset:0; }
  .wcard:hover .kspark path,
  .wcard:focus-within .kspark path{ animation:none; }
}
@media (max-width:660px){
  .kcard{ padding:9px 9px 8px; }
  .kcard__val{ font-size:19px; }
  .kcard__note{ font-size:7px; }
}

/* ============================================================
   INSPECTIONS PREVIEW - route map + stop list
   ============================================================ */
.imap{
  position:relative; height:104px; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08); border-radius:12px;
}
.imap__bg, .imap__fg{ position:absolute; inset:0; width:100%; height:100%; }

.ipin circle{ stroke:rgba(36,26,41,.55); stroke-width:1.5; }
.ipin text{
  font-family:var(--font-ui); font-size:8px; font-weight:700; fill:#241A29;
}
.ipin--t1 circle{ fill:var(--c1); }
.ipin--t2 circle{ fill:var(--c2); }
.ipin--t3 circle{ fill:var(--c3); }
.ipin--t4 circle{ fill:var(--c4); }

/* the route draws itself as the card opens */
.imap__fg > path{ stroke-dasharray:4 4; }
.wcard:hover .imap__fg > path,
.wcard:focus-within .imap__fg > path{ animation:dash 14s linear infinite; }
@keyframes dash{ to{ stroke-dashoffset:-320; } }

.ipin{ opacity:0; transform:translateY(-3px); }
.wcard:hover .ipin,
.wcard:focus-within .ipin{ animation:pin .4s ease forwards; }
.wcard .ipin:nth-of-type(1){ animation-delay:.10s }
.wcard .ipin:nth-of-type(2){ animation-delay:.16s }
.wcard .ipin:nth-of-type(3){ animation-delay:.22s }
.wcard .ipin:nth-of-type(4){ animation-delay:.28s }
.wcard .ipin:nth-of-type(5){ animation-delay:.34s }
.wcard .ipin:nth-of-type(6){ animation-delay:.40s }
.wcard .ipin:nth-of-type(7){ animation-delay:.46s }
@keyframes pin{ to{ opacity:1; transform:none; } }

.istops{ display:grid; gap:6px; }
.istop{
  display:flex; align-items:center; gap:9px; min-width:0;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:10px; padding:7px 10px;
}
.istop__n{
  flex:none; width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-ui); font-size:8px; font-weight:700; color:#241A29;
}
.istop__n--t1{ background:var(--c1); }
.istop__n--t2{ background:var(--c2); }
.istop__n--t3{ background:var(--c3); }
.istop__n--t4{ background:var(--c4); }
.istop__txt{ min-width:0; }
.istop__txt p{
  font-size:10.5px; color:rgba(246,241,238,.88);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.istop__txt em{
  display:block; font-style:normal; font-size:8.5px; font-weight:300;
  color:rgba(246,241,238,.45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (prefers-reduced-motion:reduce){
  .ipin{ opacity:1; transform:none; }
  .wcard:hover .ipin, .wcard:focus-within .ipin{ animation:none; }
  .wcard:hover .imap__fg > path,
  .wcard:focus-within .imap__fg > path{ animation:none; }
}

/* ============================================================
   DELINQUENCY PREVIEW - two headline stats over payment-plan bars
   ============================================================ */
.dgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.dstat{
  min-width:0; display:grid; gap:3px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:11px 12px;
  border-left:2px solid var(--tone,var(--c1));
}
.dstat--late{ --tone:#D98177; }
.dstat--due{  --tone:var(--c3); }
.dstat__label{
  font-family:var(--font-ui); font-size:7.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(246,241,238,.52);
}
.dstat__val{
  font-family:var(--font-display); font-size:23px; font-weight:500;
  line-height:1.05; color:#F6F1EE;
}
.dstat__note{ font-size:8px; font-weight:300; color:rgba(246,241,238,.45); line-height:1.4; }

@media (max-width:660px){
  .dstat__val{ font-size:20px; }
}

/* ============================================================
   DELINQUENCY - plan coverage + balance buckets
   ============================================================ */
.dcov{
  display:grid; gap:7px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 12px;
}
.dcov__line{ font-size:9.5px; font-weight:300; line-height:1.5; color:rgba(246,241,238,.80); }
.dcov__line b{ font-family:var(--font-display); font-size:13px; font-weight:500; color:var(--c1); }

.dcov__track{
  height:7px; border-radius:100px; overflow:hidden;
  background:rgba(255,255,255,.10);
}
.dcov__track i{
  display:block; height:100%; width:0; border-radius:100px;
  background:linear-gradient(90deg, var(--c1), #C2695F);
}
.wcard:hover .dcov__track i,
.wcard:focus-within .dcov__track i{ width:var(--w); transition:width .9s cubic-bezier(.2,.7,.3,1) .2s; }

.dcov__legend{
  display:flex; align-items:center; flex-wrap:wrap; gap:5px;
  font-size:7.5px; font-weight:300; color:rgba(246,241,238,.48);
}
.dcov__legend b{ font-weight:500; color:rgba(246,241,238,.80); margin-right:4px; }
.dcov__k{ width:5px; height:5px; border-radius:50%; flex:none; }
.dcov__k--on{  background:var(--c1); }
.dcov__k--off{ background:rgba(255,255,255,.22); margin-left:6px; }

.bbars{ display:grid; gap:8px; }
.bbar{ display:grid; grid-template-columns:1fr 78px auto; align-items:center; gap:9px; min-width:0; }
.bbar__who{ min-width:0; }
.bbar__who p{
  font-size:9.5px; color:rgba(246,241,238,.86);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bbar__who em{
  display:block; font-style:normal; font-size:7.5px; font-weight:300;
  color:rgba(246,241,238,.42);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bbar__track{ height:6px; border-radius:100px; background:rgba(255,255,255,.10); overflow:hidden; }
.bbar__fill{ display:block; height:100%; border-radius:100px; width:0; }
.bbar__fill--paid{  background:var(--c2); }
.bbar__fill--large{ background:#D98177; }
.bbar__fill--small{ background:var(--c3); }
.wcard:hover .bbar__fill,
.wcard:focus-within .bbar__fill{ width:var(--w); transition:width .8s cubic-bezier(.2,.7,.3,1) .25s; }
.bbar > b{
  font-family:var(--font-display); font-size:13px; font-weight:500;
  color:#F6F1EE; min-width:22px; text-align:right;
}

@media (prefers-reduced-motion:reduce){
  .wcard:hover .dcov__track i, .wcard:focus-within .dcov__track i,
  .wcard:hover .bbar__fill,    .wcard:focus-within .bbar__fill{ transition:none; }
}
@media (max-width:660px){
  .bbar{ grid-template-columns:1fr 50px auto; }
}

/* ============================================================
   L10 MANAGEMENT PREVIEW - meeting stats + weekly scorecard
   ============================================================ */
.lgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.lstat{
  min-width:0; display:grid; gap:2px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:11px; padding:9px 11px;
  border-left:2px solid var(--tone,var(--c1));
}
.lstat--t1{ --tone:var(--c1); }
.lstat--t2{ --tone:var(--c2); }
.lstat--t3{ --tone:var(--c3); }
.lstat--t4{ --tone:var(--c4); }
.lstat__label{
  font-family:var(--font-ui); font-size:7.5px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:rgba(246,241,238,.52);
}
.lstat__val{
  font-family:var(--font-display); font-size:20px; font-weight:500;
  line-height:1.05; color:#F6F1EE;
}
.lstat__note{ font-size:7.5px; font-weight:300; color:rgba(246,241,238,.45); }

.ltable{
  display:grid; gap:0;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.08);
  border-radius:11px; overflow:hidden;
}
.lrow{
  display:grid; grid-template-columns:1fr 44px 40px 44px;
  align-items:center; gap:7px; padding:7px 10px;
  border-top:1px solid rgba(255,255,255,.06);
}
.lrow:first-child{ border-top:0; }
.lrow p, .lrow em, .lrow span, .lrow b{
  min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lrow p{ font-size:9.5px; color:rgba(246,241,238,.88); }
.lrow em{ font-style:normal; font-size:8.5px; font-weight:300; color:rgba(246,241,238,.50); }
.lrow span{ font-size:8.5px; font-weight:300; color:rgba(246,241,238,.50); text-align:right; }
.lrow b{ font-family:var(--font-display); font-size:11px; font-weight:500; text-align:right; }

.lrow--head{ background:rgba(255,255,255,.04); }
.lrow--head p, .lrow--head em, .lrow--head span, .lrow--head b{
  font-family:var(--font-ui); font-size:7px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(246,241,238,.45);
}
.lrow__a--ok{  color:#9FBFA2; }
.lrow__a--off{ color:#D98177; }

@media (max-width:660px){
  .lrow{ grid-template-columns:1fr 38px 42px; }
  .lrow em{ display:none; }          /* owner column drops first */
  .lstat__val{ font-size:18px; }
}

/* ============================================================
   LEAD ROSTER PREVIEW - filter pills + lead cards
   ============================================================ */
.ltags{ display:flex; flex-wrap:wrap; gap:5px; }
.ltag{
  font-family:var(--font-ui); font-size:7.5px; font-weight:700;
  letter-spacing:.08em; padding:4px 8px; border-radius:100px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10);
  color:rgba(246,241,238,.62); white-space:nowrap;
}
.ltag.is-on{ background:var(--rose-pale); border-color:transparent; color:var(--plum); }

.leads{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.lead{
  min-width:0; display:grid; gap:6px; align-content:start;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:11px; padding:9px 10px;
}
.lead__top{ display:flex; align-items:center; gap:7px; min-width:0; }
.lav{
  flex:none; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-ui); font-size:7.5px; font-weight:700; color:#241A29;
}
.lav--t1{ background:var(--c1); }
.lav--t2{ background:var(--c2); }
.lav--t3{ background:var(--c3); }
.lav--t4{ background:var(--c4); }
.lead__id{ min-width:0; }
.lead__id p{
  font-size:9.5px; color:rgba(246,241,238,.90);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lead__id em{
  display:block; font-style:normal; font-size:7.5px; font-weight:300;
  color:rgba(246,241,238,.45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lead__hot{ font-size:8px; }

.lstatus{
  justify-self:start;
  font-family:var(--font-ui); font-size:7px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:3px 7px; border-radius:100px;
}
.lstatus--mot{  background:rgba(123,154,127,.22); color:#9FBFA2; }
.lstatus--risk{ background:rgba(217,129,119,.20); color:#E89C93; }
.lstatus--done{ background:rgba(159,191,162,.16); color:#9FBFA2; }
.lstatus--cmp{  background:rgba(200,155,90,.22);  color:#DFBE86; }

.lead__meta{
  font-size:7.5px; font-weight:300; color:rgba(246,241,238,.45);
  border-top:1px solid rgba(255,255,255,.07); padding-top:6px;
}
.lead__meta b{ font-weight:500; color:rgba(246,241,238,.75); }

@media (max-width:660px){
  .leads{ grid-template-columns:1fr; }
  .ltag{ font-size:7px; padding:3px 7px; }
}

/* ============================================================
   DECK SLIDES reuse the work-card preview components, whose
   reveals are scoped to :hover / :focus-within. Give the deck
   its own trigger so an active slide is never blank.
   ============================================================ */
.dash.is-active .bbar__fill,
.dash.is-active .dcov__track i{ width:var(--w); transition:width .8s cubic-bezier(.2,.7,.3,1) .2s; }

.dash.is-active .kspark path{ animation:draw 1.3s cubic-bezier(.2,.7,.3,1) .2s forwards; }

.dash.is-active .ipin{ animation:pin .4s ease forwards; }
.dash.is-active .imap__fg > path{ animation:dash 14s linear infinite; }

/* the deck is tighter than a work card - trim the shared components to fit */
.deck .dash__body{ padding:14px; gap:10px; }
.deck .dstat{ padding:9px 10px; }
.deck .dstat__val{ font-size:19px; }
.deck .dcov{ padding:8px 10px; gap:5px; }
.deck .kcard{ padding:8px 9px; gap:4px; }
.deck .kcard__val{ font-size:18px; }
.deck .kspark{ height:16px; }
.deck .imap{ height:88px; }
.deck .lstat{ padding:8px 9px; }
.deck .lstat__val{ font-size:17px; }

@media (prefers-reduced-motion:reduce){
  .dash.is-active .bbar__fill,
  .dash.is-active .dcov__track i{ transition:none; }
  .dash.is-active .kspark path{ animation:none; stroke-dashoffset:0; }
  .dash.is-active .ipin{ animation:none; opacity:1; transform:none; }
  .dash.is-active .imap__fg > path{ animation:none; }
}

/* the L10 scorecard is the tallest preview; the deck shows three measurables */
.deck .ltable .lrow:last-child{ display:none; }

/* ============================================================
   TAP TO OPEN - .is-open mirrors every :hover / :focus-within
   reveal so touch users get the same behaviour from a tap
   ============================================================ */
.wcard.is-open .wcard__more{ grid-template-rows:1fr; margin-top:22px; }
.wcard.is-open .wcard__hint{ opacity:0; }
.wcard.is-open .bar__track i,
.wcard.is-open .bbar__fill,
.wcard.is-open .dcov__track i{ width:var(--w); transition:width .8s cubic-bezier(.2,.7,.3,1) .2s; }
.wcard.is-open .spark{ animation:draw 1.6s cubic-bezier(.2,.7,.3,1) .1s forwards; }
.wcard.is-open .spark-fill{ animation:fade .9s ease .9s forwards; }
.wcard.is-open .kspark path{ animation:draw 1.3s cubic-bezier(.2,.7,.3,1) .2s forwards; }
.wcard.is-open .ipin{ animation:pin .4s ease forwards; }
.wcard.is-open .imap__fg > path{ animation:dash 14s linear infinite; }

@media (prefers-reduced-motion:reduce){
  .wcard.is-open .bar__track i,
  .wcard.is-open .bbar__fill,
  .wcard.is-open .dcov__track i{ transition:none; }
  .wcard.is-open .spark,
  .wcard.is-open .kspark path{ animation:none; stroke-dashoffset:0; }
  .wcard.is-open .spark-fill{ animation:none; opacity:1; }
  .wcard.is-open .ipin{ animation:none; opacity:1; transform:none; }
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */

/* a page hero is shorter than the home hero and has no deck under it */
.hero--page{ padding-top:40px; }
.hero__inner--page{ grid-template-columns:1.05fr .95fr; align-items:center; padding-bottom:90px; }
.hero--page .lede{ max-width:520px; }

/* ---------- mission ---------- */
.mission{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.mission .sec-head{ margin-bottom:0; }
.mission__body{ display:grid; gap:20px; }
.mission__body p{ color:var(--muted); font-weight:300; font-size:16.5px; line-height:1.85; }
.mission__line{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(20px,2.4vw,26px); line-height:1.35;
  color:var(--rose); padding-top:6px;
}

/* ---------- values ---------- */
.values{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.vcard{
  position:relative; overflow:hidden;
  background:var(--shell); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:36px 32px;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.vcard::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.vcard:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -28px rgba(43,33,48,.34); }
.vcard:hover::before{ transform:scaleX(1); }
.vcard__n{
  display:block; font-family:var(--font-display); font-style:italic;
  font-size:19px; color:var(--rose); margin-bottom:14px;
}
.vcard h3{ font-size:24px; margin-bottom:12px; }
.vcard p{ color:var(--muted); font-size:14.5px; font-weight:300; line-height:1.8; }

/* ---------- founders ---------- */
.founders{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.fcard{
  display:flex; flex-direction:column;
  background:var(--shell); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:38px 34px;
}
.fcard__head{ display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.fav{
  flex:none; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:20px; font-weight:500; color:var(--plum);
}
.fav--t1{ background:var(--rose-pale); }
.fav--t3{ background:#EFDCC0; }
.fcard__head h3{ font-size:25px; }
.fcard__role{
  font-family:var(--font-ui); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-top:6px;
}
.fcard__bio{ display:grid; gap:14px; }
.fcard__bio p{ color:var(--muted); font-size:14.5px; font-weight:300; line-height:1.8; }

.fquote{
  margin:26px 0 0; padding:20px 22px;
  background:linear-gradient(160deg, var(--blush), var(--cream) 70%);
  border-radius:20px 20px 20px 6px;
}
.fquote p{
  font-family:var(--font-display); font-style:italic;
  font-size:17px; line-height:1.45; color:var(--text);
}
.fquote cite{
  display:block; margin-top:10px; font-style:normal;
  font-family:var(--font-ui); font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);
}

@media (max-width:1000px){
  .hero__inner--page{ grid-template-columns:1fr; gap:52px; padding-bottom:70px; }
  .mission{ grid-template-columns:1fr; gap:32px; }
  .values{ grid-template-columns:1fr; }
  .founders{ grid-template-columns:1fr; }
}
@media (max-width:660px){
  .vcard{ padding:28px 24px; }
  .fcard{ padding:28px 24px; }
  .fav{ width:48px; height:48px; font-size:17px; }
  .fcard__head h3{ font-size:22px; }
}

/* ============================================================
   FOUNDERS PAGE
   ============================================================ */

/* a centred, text-only page header */
.hero--slim{ padding:56px 0 0; }
.hero__slim{ max-width:760px; padding-bottom:72px; }
.hero__slim h1{ font-size:clamp(40px,5.4vw,64px); line-height:1.08; }
.hero__slim .lede{ max-width:600px; }
.section--top{ padding-top:0; }

.fprofiles{ display:grid; gap:110px; }
.fprofile{ display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; }
/* the photo swaps sides on alternate profiles, so the track sizes swap with it
   or the portrait lands in the wide column and dwarfs the one above */
.fprofile:nth-child(even){ grid-template-columns:1.2fr .8fr; }
.fprofile:nth-child(even) .fphoto{ order:2; }

.fphoto{
  position:relative; margin:0; overflow:hidden;
  border-radius:50% 50% 30px 30px / 37.5% 37.5% 30px 30px;
  aspect-ratio:3/4;
  box-shadow:0 40px 78px -44px rgba(43,33,48,.5);
}
.fphoto img{
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter:saturate(.82) contrast(1.04) sepia(.12);
}
/* same two-layer tint as the rest of the photography */
.fphoto::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(165deg,
    rgba(224,160,143,.85) 0%, rgba(168,86,79,.55) 45%, rgba(36,26,41,.90) 100%);
  mix-blend-mode:soft-light;
  opacity:var(--photo-tint);
}

.fprofile__body h2{ font-size:clamp(30px,3.8vw,42px); }
.fprofile__body .fcard__role{ margin-top:10px; margin-bottom:24px; }

@media (max-width:1000px){
  .fprofiles{ gap:76px; }
  .fprofile{ grid-template-columns:1fr; gap:34px; }
  .fprofile:nth-child(even) .fphoto{ order:0; }
  .fphoto{ max-width:420px; margin-inline:auto; }
}

/* ============================================================
   APPEARANCES - video facade cards
   The real YouTube iframe is only injected on click (see main.js),
   so the page costs a few hundred KB of images instead of ~1.5MB
   of player script per video, and sets no cookies until you play.
   ============================================================ */
.vids{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }

.vid{
  display:flex; flex-direction:column; min-width:0;
  background:var(--shell); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.vid:hover{ transform:translateY(-5px); box-shadow:0 26px 50px -28px rgba(43,33,48,.34); }

.vid__play{
  position:relative; display:block; width:100%; padding:0; border:0;
  background:var(--plum); cursor:pointer; aspect-ratio:16/9; overflow:hidden;
}
.vid__thumb{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.86) contrast(1.03) sepia(.10);
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
.vid:hover .vid__thumb{ transform:scale(1.03); filter:saturate(1) contrast(1) sepia(0); }

.vid__icon{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--rose-pale); color:var(--plum);
  box-shadow:0 10px 26px -10px rgba(36,26,41,.7);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background .3s ease;
}
.vid__icon svg{ width:24px; height:24px; margin-left:2px; }
.vid:hover .vid__icon{ transform:translate(-50%,-50%) scale(1.08); background:var(--ivory); }
.vid__play:focus-visible .vid__icon{ outline:2px solid var(--rose); outline-offset:4px; }

.vid__meta{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.vid__where{
  font-family:var(--font-ui); font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:10px;
}
.vid__meta h3{ font-size:21px; line-height:1.25; }
.vid__out{
  margin-top:auto; padding-top:18px;
  font-family:var(--font-ui); font-size:12px; font-weight:700;
  letter-spacing:.04em; color:var(--accent);
  display:inline-flex; align-items:center; gap:7px;
}
.vid__out span{ transition:transform .25s ease; }
.vid__out:hover span{ transform:translateX(4px); }

/* once playing, the button is replaced by the iframe */
.vid__frame{ position:relative; aspect-ratio:16/9; background:var(--plum); }
.vid__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (max-width:1000px){
  .vids{ grid-template-columns:1fr; gap:22px; }
}
@media (max-width:660px){
  .vid__meta{ padding:18px 20px 20px; }
  .vid__meta h3{ font-size:19px; }
  .vid__icon{ width:48px; height:48px; }
}
@media (prefers-reduced-motion:reduce){
  .vid:hover .vid__thumb{ transform:none; }
  .vid:hover .vid__icon{ transform:translate(-50%,-50%); }
}