@import url("../fonts.css");

/* ============================================================
   dorothyseguy.com
   Brand Identity Master v2 - September 2026
   Paper + Ink base, vermilion pop, apricot/rose accents,
   lime reserved for the mark.
   ============================================================ */

:root{
  /* Core palette - "the colours of a bigger, more interesting life" */
  --paper:#F4EFE6; --ink:#171414;
  --vermilion:#E7432A; --vermilion-deep:#C4321C;
  --apricot:#EFA36D; --rose:#D6A2A5; --lime:#C2F200;

  /* Paper family + rules */
  --paper-deep:#EBE4D8; --paper-warm:#F9F6F0;
  --line:#DBD2C3;             /* subliminal hairline only (1.31:1) */
  --line-soft:#E6DFD2;
  --line-structural:#C0B3A0;  /* visible divider (1.80:1) */

  /* Ink on surfaces */
  --on-paper:#171414; --on-paper-muted:#6B6360; --on-paper-quiet:#736A65;
  --on-ink:#F4EFE6; --on-ink-muted:#B5ADA6; --on-ink-quiet:#8E8681;
  --on-vermilion:#FFF4EF;
  --on-apricot:#171414; --on-apricot-muted:#4A3325;   /* 5.65:1 */
  --on-rose:#171414;    --on-rose-muted:#4A3335;      /* 5.27:1 */
  --on-lime:#171414;

  /* Type */
  --font-display:"Fraunces",Georgia,serif;
  --font-text:"Manrope",system-ui,-apple-system,sans-serif;
  --display-wonk:"opsz" 100,"SOFT" 0,"WONK" 1;
  --tracking-display:-0.015em; --tracking-label:0.18em;
  --tracking-nav:0.12em; --tracking-wordmark:0.14em;

  --space-1:6px; --space-2:14px; --space-3:26px;
  --space-4:38px; --space-5:56px; --space-6:74px;
  --rule:2px; --radius-pill:999px; --radius-card:4px;

  --wrap:1180px;
  --pad:clamp(22px,5vw,56px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--on-paper);
  font-family:var(--font-text); font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
img{height:auto;display:block}

/* ---------- Drench system -------------------------------------
   One colour per section, edge to edge. Ground and text are set
   together so a drench can never be half-applied.               */

.d-paper{--bg:var(--paper);--fg:var(--on-paper);--muted:var(--on-paper-muted);
  --quiet:var(--on-paper-quiet);--hair:var(--line);--rule-c:var(--line-structural);--accent:var(--vermilion)}
.d-paper-deep{--bg:var(--paper-deep);--fg:var(--on-paper);--muted:var(--on-paper-muted);
  --quiet:var(--on-paper-quiet);--hair:var(--line-structural);--rule-c:var(--line-structural);--accent:var(--vermilion-deep)}
.d-paper-warm{--bg:var(--paper-warm);--fg:var(--on-paper);--muted:var(--on-paper-muted);
  --quiet:var(--on-paper-quiet);--hair:var(--line);--rule-c:var(--line-structural);--accent:var(--vermilion)}
.d-ink{--bg:var(--ink);--fg:var(--on-ink);--muted:var(--on-ink-muted);
  --quiet:var(--on-ink-quiet);--hair:#3A3535;--rule-c:#4F4848;--accent:var(--lime)}
.d-vermilion{--bg:var(--vermilion);--fg:var(--on-vermilion);--muted:var(--on-vermilion);
  --quiet:var(--on-vermilion);--hair:rgba(255,244,239,.32);--rule-c:rgba(255,244,239,.55);--accent:var(--on-vermilion)}
.d-apricot{--bg:var(--apricot);--fg:var(--on-apricot);--muted:var(--on-apricot-muted);
  --quiet:var(--on-apricot-muted);--hair:rgba(23,20,20,.22);--rule-c:rgba(23,20,20,.42);--accent:var(--ink)}
.d-rose{--bg:var(--rose);--fg:var(--on-rose);--muted:var(--on-rose-muted);
  --quiet:var(--on-rose-muted);--hair:rgba(23,20,20,.22);--rule-c:rgba(23,20,20,.42);--accent:var(--ink)}

.d-paper,.d-paper-warm,.d-paper-deep,.d-ink,.d-vermilion,.d-apricot,.d-rose{background:var(--bg);color:var(--fg)}

.sec{padding:clamp(56px,8vw,104px) 0}
.sec-tight{padding:clamp(40px,5vw,64px) 0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}

/* ---------- Type ---------------------------------------------- */

.ds-display{font-family:var(--font-display);font-weight:600;
  font-size:clamp(40px,7.4vw,88px);line-height:.94;letter-spacing:-0.03em;
  font-variation-settings:var(--display-wonk);margin:0}
.ds-h1{font-family:var(--font-display);font-weight:600;
  font-size:clamp(32px,5vw,56px);line-height:1;letter-spacing:-0.025em;
  font-variation-settings:var(--display-wonk);margin:0}
.ds-h2{font-family:var(--font-display);font-weight:600;
  font-size:clamp(27px,3.6vw,38px);line-height:1.06;letter-spacing:-0.02em;margin:0}
.ds-h3{font-family:var(--font-display);font-weight:600;
  font-size:clamp(21px,2.3vw,26px);line-height:1.14;letter-spacing:-0.015em;margin:0}
.ds-quote{font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:clamp(23px,3.2vw,34px);line-height:1.18;letter-spacing:-0.02em;margin:0}
.ds-lede{font-size:clamp(17px,1.6vw,18px);line-height:1.6;letter-spacing:-0.005em;
  text-wrap:pretty;margin:0}
.ds-body{font-size:15px;line-height:1.7;text-wrap:pretty;margin:0}
.ds-label{font-weight:500;font-size:11px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;margin:0}
.ds-wordmark{font-family:var(--font-display);font-weight:500;
  letter-spacing:var(--tracking-wordmark);text-transform:uppercase}
.muted{color:var(--muted)}
.quiet{color:var(--quiet)}
.measure{max-width:62ch}
.measure-tight{max-width:46ch}

/* Section label with the brand's leading rule */
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:500;
  font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--accent);margin:0 0 26px}
.eyebrow::before{content:"";width:30px;height:var(--rule);background:currentColor;flex:none}

/* ---------- The mark ------------------------------------------ */

.mark{width:1em;height:1em;border-radius:50%;background:var(--lime);
  display:inline-block;flex:none}
.mark-ink{background:var(--ink)}

.lockup{display:inline-flex;align-items:center;gap:.42em;
  font-family:var(--font-display);font-weight:500;
  letter-spacing:var(--tracking-wordmark);text-transform:uppercase;
  font-size:17px;line-height:1;color:var(--fg);text-decoration:none;white-space:nowrap}
/* The dot sits BETWEEN the two names, at cap height.
   letter-spacing leaves a trailing space after "DOROTHY", so the mark pulls
   back by exactly that amount to keep the two gaps optically equal. */
.lockup .mark{width:.72em;height:.72em;margin-left:calc(var(--tracking-wordmark) * -1)}

/* ---------- Header -------------------------------------------- */

.site-header{position:relative;z-index:20}
/* Wider than the content wrap so the menu can breathe. Lockup + six items
   + button need ~1040px at the tightest gap; the gap opens from 20px at
   1200px (where the inline menu starts) to 40px from 1300px up. */
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:32px;min-height:96px;max-width:1360px}
.nav{display:flex;align-items:center;gap:clamp(20px,(100vw - 1100px) / 5,40px)}
.nav a{color:var(--fg);text-decoration:none;font-weight:500;font-size:13px;white-space:nowrap;
  letter-spacing:var(--tracking-nav);text-transform:uppercase;
  padding:6px 0;border-bottom:var(--rule) solid transparent}
.nav a:hover{border-bottom-color:var(--accent)}
.site-header .btn{white-space:nowrap}
.nav a[aria-current="page"]{border-bottom-color:var(--accent)}

/* ---------- Buttons ------------------------------------------- */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-text);font-weight:600;font-size:13px;
  letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;
  padding:14px 22px;border-radius:var(--radius-card);border:var(--rule) solid transparent;
  cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.btn-primary{background:var(--vermilion);color:var(--on-vermilion);border-color:var(--vermilion)}
.btn-primary:hover{background:var(--vermilion-deep);border-color:var(--vermilion-deep)}
.btn-ink{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn-ink:hover{background:#2E2626;border-color:#2E2626}
.btn-outline{background:transparent;color:var(--fg);border-color:currentColor}
.btn-outline:hover{background:var(--fg);color:var(--bg)}
.btn-lime{background:var(--lime);color:var(--on-lime);border-color:var(--lime)}
.btn-lime:hover{background:#B0DC00;border-color:#B0DC00}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;border-bottom:var(--rule) solid transparent}
.link-arrow:hover{border-bottom-color:currentColor}

/* ---------- Layout helpers ------------------------------------ */

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,34px)}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4.5vw,64px);align-items:start}
.stack{display:flex;flex-direction:column}
.stack-2{gap:var(--space-2)} .stack-3{gap:var(--space-3)}
.stack-4{gap:var(--space-4)} .stack-5{gap:var(--space-5)}
.rule-top{border-top:var(--rule) solid var(--rule-c);padding-top:20px}

/* ---------- Cards --------------------------------------------- */

.card{border-top:var(--rule) solid var(--accent);padding-top:22px;
  display:flex;flex-direction:column;gap:12px;min-width:0}
.card h3{margin:0}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.7;text-wrap:pretty}
.card .link-arrow{margin-top:auto;padding-top:10px}

/* World cards carry their own drench colour as the keyline */
.card-growth{border-top-color:var(--ink)}
.card-plentiful{border-top-color:var(--apricot)}
.card-mentorship{border-top-color:var(--rose)}
.card-tnw{border-top-color:var(--vermilion)}
.card-speaking{border-top-color:var(--apricot)}
/* Role label above a card title; beats .card p on size and colour */
.card .ds-label{font-size:12px;line-height:1.4;color:var(--quiet);margin-bottom:-4px}

/* ---------- Rows (speaking, timeline) ------------------------- */

.row-list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--hair)}
.row:first-child{border-top:1px solid var(--hair)}
.row-title{font-family:var(--font-display);font-weight:600;font-size:18px;
  letter-spacing:-0.015em;line-height:1.3}
.row-meta{font-size:12px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--quiet);white-space:nowrap}

/* ---------- Stats --------------------------------------------- */

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0;
  border-top:var(--rule) solid var(--accent)}
.stat{padding:18px 16px 0 0;display:flex;flex-direction:column;gap:6px}
.stat-n{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3vw,34px);
  line-height:1;letter-spacing:-0.02em}
.stat-l{font-size:13px;line-height:1.55;color:var(--muted)}

/* ---------- Figure -------------------------------------------- */

.figure{margin:0}
.figure img{width:100%;border-radius:var(--radius-card)}
.figure figcaption{margin-top:10px;font-size:12px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--quiet)}

/* ---------- Footer -------------------------------------------- */

.site-footer{padding:clamp(44px,6vw,68px) 0 clamp(30px,4vw,44px)}
.footer-top{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;
  align-items:flex-start;padding-bottom:26px;border-bottom:1px solid var(--hair)}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 24px}
.footer-nav a{color:var(--muted);text-decoration:none;font-size:13px;
  letter-spacing:var(--tracking-nav);text-transform:uppercase}
.footer-nav a:hover{color:var(--fg)}
.footer-bottom{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;
  padding-top:22px;font-size:12px;color:var(--quiet)}
.footer-bottom a{color:var(--quiet);text-decoration:none}
.footer-bottom a:hover{color:var(--fg)}

/* ---------- Compound device ----------------------------------- */
.compound{width:64px;color:var(--accent);opacity:.85}

/* ---------- Accessibility ------------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--on-ink);
  padding:12px 18px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--vermilion);outline-offset:3px}
.d-vermilion :focus-visible,.d-ink :focus-visible{outline-color:var(--lime)}

/* ---------- Responsive ---------------------------------------- */

@media (max-width:900px){
  .grid-2,.grid-3,.split{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:0 18px}
  .stat{padding-right:0}
}
/* Six menu items + lockup + button need ~1100px of content width;
   below that the inline menu folds into a "Menu" disclosure.
   CSS-only (<details>), because the CSP allows no scripts. */
.menu{display:none}
@media (max-width:1199px){
  .site-header .wrap{min-height:64px;gap:16px}
  .nav{display:none}
  .site-header > .wrap > .btn{margin-left:auto;padding:13px 18px}
  .menu{display:block}
  .menu-toggle{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;
    min-height:44px;padding:0 2px;font-weight:500;font-size:13px;
    letter-spacing:var(--tracking-nav);text-transform:uppercase;color:var(--fg);
    -webkit-user-select:none;user-select:none}
  .menu-toggle::-webkit-details-marker{display:none}
  .menu-icon{position:relative;width:22px;height:12px}
  .menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;right:0;
    height:var(--rule);background:currentColor;transition:transform .2s ease,top .2s ease}
  .menu-icon::before{top:0}
  .menu-icon::after{top:10px}
  .menu[open] .menu-icon::before{top:5px;transform:rotate(45deg)}
  .menu[open] .menu-icon::after{top:5px;transform:rotate(-45deg)}
  .menu-panel{position:absolute;left:0;right:0;top:100%;z-index:30;
    height:calc(100svh - 64px);overflow-y:auto;overscroll-behavior:contain;
    display:flex;flex-direction:column;
    padding:8px var(--pad) 32px;background:var(--bg);border-top:1px solid var(--hair);
    animation:menu-in .18s ease-out}
  .menu-panel a:not(.btn){display:flex;align-items:center;min-height:56px;
    font-family:var(--font-display);font-weight:500;font-size:22px;letter-spacing:-0.01em;
    color:var(--fg);text-decoration:none;border-bottom:1px solid var(--hair)}
  .menu-panel a[aria-current="page"]{color:var(--accent)}
  .menu-panel a[aria-current="page"]::after{content:"";width:8px;height:8px;margin-left:12px;
    border-radius:50%;background:var(--accent)}
  .menu-panel .btn{margin-top:28px;width:100%;padding:16px 22px}
  html:has(.menu[open]){overflow:hidden}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .stats{grid-template-columns:1fr}
  .stat{border-top:1px solid var(--hair);padding-top:14px}
  .stats .stat:first-child{border-top:0}
  .row{grid-template-columns:1fr;gap:6px}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .footer-top{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- Logo strip ---------------------------------------- */
.logo-strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;gap:clamp(26px,4.5vw,56px)}
.logo-strip img{height:32px;width:auto;opacity:.92}
/* Client marks are black artwork on alpha; flip them to paper on dark grounds */
.d-ink .logo-strip img{filter:brightness(0) invert(1)}

/* ---------- Word cloud ---------------------------------------- */
.word-cloud{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 12px}
.word-cloud li{font-family:var(--font-display);font-weight:500;font-size:16px;
  line-height:1.2;padding:9px 16px;border:1px solid var(--hair);border-radius:var(--radius-pill)}
.word-cloud .wc-lg{font-size:21px;color:var(--accent);border-color:currentColor}

/* ---------- Steps (numbered process) -------------------------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,34px)}
.step{counter-increment:s;border-top:var(--rule) solid var(--accent);padding-top:20px;
  display:flex;flex-direction:column;gap:10px}
.step::before{content:"0" counter(s);font-weight:600;font-size:11px;
  letter-spacing:var(--tracking-label);color:var(--accent)}
.step p{margin:0;color:var(--muted);font-size:15px;line-height:1.7;text-wrap:pretty}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* Header CTA is duplicated in every hero and in the menu panel;
   drop it on phones */
@media (max-width:600px){
  .site-header > .wrap > .btn{display:none}
}

/* ============================================================
   Homepage — "One life. Many paths." (October 2026)
   The visitor is the hero: her promise first, then her way in,
   then Dorothy. Mirrors the LinkedIn banner (paper card, rose
   photo panel, lime dot, vermilion italic line).
   ============================================================ */

/* 01 Hero: vermilion over paper-deep, one paper card across both */
.home-hero{padding:clamp(20px,4vw,56px) 0 clamp(40px,6vw,88px);
  background:linear-gradient(to bottom,var(--vermilion) 0 46%,var(--paper-deep) 46% 100%)}
.home-card{display:grid;grid-template-columns:1.1fr .9fr;background:var(--paper-warm);
  color:var(--on-paper);box-shadow:0 30px 60px -30px rgba(23,20,20,.35);
  --fg:var(--on-paper);--muted:var(--on-paper-muted);--accent:var(--vermilion)}
.home-card-copy{padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.home-h1{font-family:var(--font-display);font-weight:600;font-variation-settings:var(--display-wonk);
  font-size:clamp(44px,6.4vw,88px);line-height:.96;letter-spacing:-.035em;margin:0}
.home-h1 em{display:block;font-style:italic;font-weight:500;color:var(--vermilion-deep);
  font-size:.62em;letter-spacing:-.02em;margin-top:.28em}
.home-lede{margin:28px 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.55;
  max-width:44ch;color:var(--on-paper-muted);text-wrap:pretty}
.home-lede strong{color:var(--on-paper);font-weight:600}
.home-hero .btn-row{margin-top:36px}
.home-trust{margin:40px 0 0;padding-top:18px;border-top:1px solid var(--line-structural);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px}
.home-trust span{font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--on-paper-quiet)}
.home-trust img{height:22px;width:auto;opacity:.8}

/* Rose duotone, like the LinkedIn banner */
.home-card-photo{background:var(--rose);position:relative;min-height:560px;margin:0}
.home-card-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 20%;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.08) brightness(1.05)}
.home-card-photo .mark{position:absolute;top:22px;right:22px;width:28px;height:28px}

/* 02 Paths: each card opens with what she is thinking */
.paths{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.path{display:flex;flex-direction:column;gap:14px;padding:24px 22px 22px;
  background:var(--paper-warm);border-top:6px solid var(--k,var(--ink));
  text-decoration:none;color:var(--on-paper);min-height:300px;
  transition:transform .15s ease,box-shadow .15s ease}
.path:hover{transform:translateY(-4px);box-shadow:0 18px 30px -20px rgba(23,20,20,.4)}
.path q{font-family:var(--font-display);font-weight:500;font-style:italic;
  font-size:21px;line-height:1.2;letter-spacing:-.015em}
.path p{margin:0;font-size:14px;line-height:1.6;color:var(--on-paper-muted)}
.path-go{margin-top:auto;font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-paper)}
.path-go b{display:block;font-family:var(--font-display);text-transform:none;
  letter-spacing:-.01em;font-size:18px;margin-bottom:4px}
.path:hover .path-go{color:var(--vermilion-deep)}
.path-free{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;background:var(--lime);color:var(--on-lime);padding:4px 8px}
.k-plentiful{--k:var(--apricot)} .k-tnw{--k:var(--vermilion)} .k-mentor{--k:var(--rose)}
.k-advisory{--k:var(--ink)} .k-speaking{--k:var(--lime)}

/* 03 Meet: ink over paper, one card */
.home-meet{background:linear-gradient(to bottom,var(--ink) 0 30%,var(--paper) 30% 100%);
  padding:clamp(48px,6vw,88px) 0}
.meet-card{display:grid;grid-template-columns:.85fr 1.15fr;background:var(--paper-warm);
  color:var(--on-paper);--accent:var(--vermilion)}
.meet-photo{margin:0;background:var(--apricot);position:relative;min-height:620px}
.meet-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.meet-copy{padding:clamp(28px,5vw,72px);display:flex;flex-direction:column;gap:22px}
.meet-copy h2{font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tracking-wordmark);font-size:clamp(28px,3.4vw,40px);margin:0;line-height:1}
.meet-copy p{margin:0;font-size:17px;line-height:1.7;color:var(--on-paper-muted);text-wrap:pretty}
.meet-copy strong{color:var(--on-paper);font-weight:700}
.meet-copy p a:not(.link-arrow){color:var(--on-paper);font-weight:700;text-decoration-color:var(--vermilion);
  text-decoration-thickness:2px;text-underline-offset:3px}
.meet-copy .link-arrow{color:var(--vermilion-deep)}
.bring{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bring li{display:grid;grid-template-columns:34px 1fr;gap:6px;padding:10px 0;
  border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--on-paper-muted)}
.bring li::before{content:"\2192";color:var(--vermilion);font-weight:600}

/* 04 Thread: why it's one thing, not five */
.thread{display:grid;grid-template-columns:repeat(3,1fr);border-top:var(--rule) solid var(--rule-c)}
.thread > div{padding:26px 26px 0 0}
.thread b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(30px,3.6vw,44px);letter-spacing:-.025em;line-height:1}
.thread span{display:block;margin-top:10px;font-size:15px;line-height:1.6}
.thread small{display:block;margin-top:14px;font-size:12px;letter-spacing:var(--tracking-label);text-transform:uppercase}

/* 05 Proof quote */
.home-quote{margin:0;padding-left:26px;border-left:6px solid var(--lime)}
.home-quote blockquote{margin:0}
.home-quote p{font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(22px,2.8vw,32px);line-height:1.25;letter-spacing:-.015em;margin:0}
.home-quote figcaption{margin-top:14px;font-size:12px;
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--muted)}

@media (max-width:1100px){.paths{grid-template-columns:repeat(2,1fr)} .path{min-height:0}}
@media (max-width:900px){
  .home-card,.meet-card{grid-template-columns:1fr}
  .home-card-photo{min-height:0;aspect-ratio:4/5;order:-1}
  .meet-photo{min-height:0;aspect-ratio:4/5}
  .thread{grid-template-columns:1fr}
  .bring li,.path p{font-size:16px}
}
@media (max-width:600px){
  .paths{grid-template-columns:1fr}
  .home-card-photo{aspect-ratio:1/1}
  .home-lede{margin-top:20px}
  .home-hero .btn-row{margin-top:28px}
  .home-trust{margin-top:28px}
}

/* Roles as bordered pills. Border uses --line-structural (1.80:1);
   --line at 1.31:1 is invisible on paper. */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 14px}
.chips li{font-size:13px;color:var(--muted);border:1px solid var(--line-structural);
  padding:7px 15px;border-radius:100px;background:rgba(255,255,255,.45)}

/* Chips used as links (404 page) */
.chips li a{color:inherit;text-decoration:none}
.chips li:hover{border-color:var(--accent);color:var(--accent)}

/* Touch targets: 44px minimum on phones and tablets */
@media (max-width:900px){
  .nav a{padding:13px 0}
  .footer-nav{gap:0 24px}
  .footer-nav a{padding:13px 0;display:inline-block}
  .footer-bottom{gap:4px 28px}
  .footer-bottom a{padding:14px 0;display:inline-block}
  .lockup{padding:14px 0}
  .link-arrow{padding-top:14px;padding-bottom:14px}
  .card .link-arrow{padding-top:14px}
  .chips li:has(a){padding:0}
  .chips li a{display:block;padding:13px 15px}
}

/* ---------- Image band ---------------------------------------- */
.band{margin:0}
.band img{width:100%;border-radius:var(--radius-card)}
.band figcaption{margin-top:12px;font-size:12px;letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--quiet)}

/* Phones and tablets: readable text sizes (desktop scale unchanged) */
@media (max-width:900px){
  .ds-body,.card p,.step p{font-size:16px}
  .eyebrow,.link-arrow,.row-meta,.figure figcaption,.band figcaption{font-size:13px}
  .ds-label,.step::before{font-size:13px}
  .chips li{font-size:14px}
  .card .ds-label,.footer-bottom{font-size:13px}
  .break-any a,.tap-inline{display:inline-block;padding:10px 0}
}
/* Long unbroken strings (email addresses) may wrap anywhere */
.break-any{overflow-wrap:anywhere}