/* Redpoint — direction C, "Charcoal refined" (Phillip's pick, 2026-10-16). Lissance.
   Layered over wf.css (structure). Charcoal fields, the current logo, one large red circle as the
   signature graphic. Below the fold, rules and type carry structure instead of boxed cards.
   Type matches philliphunter.net (IBM Plex) so the two sites read as siblings. */
:root{
  --accent:#E0102F; --accent-hover:#B00B24; --accent-ink:#B00B24; /* --accent-ink: red text on light grounds (AA) */
  --char:#1F1F1E; --char-2:#2A2A28; --on-char:#F4F4F2; --on-char-soft:#BDBDB6;
  --ink:#1B1B1A; --ink-2:#45453F; --line:#D8D8D3; --ground:#F4F4F2;
}
a:hover{color:var(--accent-ink)}

/* header: sits on the charcoal hero / page head of every page */
.site-head{background:transparent;border-bottom:0;position:absolute;left:0;right:0;top:0;z-index:3}
.site-head .wrap{min-height:96px}
.logo{display:inline-flex;align-items:center;width:auto;height:auto;min-height:44px;background:none;border:0;padding:0}
.logo{position:relative;--logo-h:81px;top:16px}
.logo img{display:block;height:var(--logo-h);width:auto}
/* Tagline as live text: the M is centred under the p descender (x 325.18 of the 231-unit-tall logo) */
.logo-tag{position:absolute;left:calc(var(--logo-h) * 325.18 / 231 - .3em);top:calc(var(--logo-h) * 104 / 231);font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#F24A5E}
.nav a:not(.btn){color:var(--on-char)}
.nav a:not(.btn):hover{color:#fff}
.nav a[aria-current="page"]{text-decoration-color:var(--accent);text-decoration-thickness:2px}
.site-head .btn-p{background:#fff;color:var(--char)} .site-head .btn-p:hover{background:var(--on-char);color:var(--char)}
.menu-btn{background:transparent;border-color:#5A5A56;color:var(--on-char)}

/* the red circle */
.hero,.pagehead{position:relative;overflow:hidden;background:var(--char);color:var(--on-char)}
.hero::after,.pagehead::after{content:"";position:absolute;border-radius:50%;background:var(--accent);pointer-events:none}
.hero::after{width:560px;height:560px;right:-160px;top:-180px}
.pagehead::after{width:340px;height:340px;right:-120px;top:-170px}
.hero .wrap,.pagehead .wrap{position:relative;z-index:1}

/* home hero */
.hero{padding:216px 0 128px}
.hero h1{color:#fff;font-size:clamp(40px,6vw,80px);line-height:1.0;letter-spacing:-.025em;max-width:11em}
.hero .lede{color:var(--on-char-soft);max-width:32em}
.hero .kicker{color:var(--on-char-soft)}
.btn-p{background:var(--accent)} .btn-p:hover{background:var(--accent-hover)}
.hero .btn-s,.pagehead .btn-s{border-color:var(--on-char);color:var(--on-char)}
.hero .btn-s:hover,.pagehead .btn-s:hover{background:var(--on-char);color:var(--char)}

/* inner page heads */
.sec.pagehead{padding-top:184px}
.pagehead h1{color:#fff;max-width:15em}
.pagehead .lede,.pagehead .soft,.pagehead .audience,.pagehead p{color:var(--on-char-soft)}
.pagehead strong{color:var(--on-char)}
.pagehead .kicker{color:var(--on-char-soft)}
.pagehead a:not(.btn){color:var(--on-char)} .pagehead a:not(.btn):hover{color:#fff}
.pagehead .facts{border-color:#45453F}
.pagehead .card{background:var(--surface);color:var(--ink)}
.pagehead .card p,.pagehead .card .soft{color:var(--ink-2)}
.pagehead .card strong{color:var(--ink)}
.pagehead .card a:not(.btn){color:var(--ink)}
.pagehead .field{color:var(--ink)}

/* recent work strip, directly under the home hero */
.recent-strip{background:var(--surface);border-bottom:1px solid var(--line)}
.recent-strip .wrap{display:flex;flex-direction:column;gap:0;padding-top:28px}
.recent-strip .kicker{color:var(--muted)}
.recent-strip ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.recent-strip li + li{border-left:1px solid var(--line)}
.recent-strip a{display:flex;flex-direction:column;gap:8px;padding:16px 28px 32px 0;text-decoration:none;color:var(--ink);height:100%}
.recent-strip li + li a{padding-left:28px}
.recent-strip .r-org{font:500 12px "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.recent-strip .r-what{font-weight:600;font-size:19px;line-height:1.3}
.recent-strip a:hover .r-what{color:var(--accent-ink);text-decoration:underline;text-underline-offset:4px}

/* proof strip */
.proof{background:var(--ground);border-top:0}
.client{font:600 16px "IBM Plex Sans",system-ui,sans-serif;color:var(--ink-2);letter-spacing:.01em}

/* symptoms, each tied to the field note that explains it */
.symptoms .arrow{color:var(--accent)}
.cause-col{display:flex;flex-direction:column;gap:4px}
.note-link{display:inline-flex;align-items:center;min-height:44px;width:fit-content;font-size:15px;font-weight:600;color:var(--accent-ink);text-underline-offset:3px}

/* how we work: numbered columns on a rule, not cards */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.steps li{display:flex;flex-direction:column;gap:10px;padding:24px 28px 8px 0}
.steps li + li{padding-left:28px;border-left:1px solid var(--line)}
.steps .kicker{color:var(--accent-ink)}

/* selected work: an index */
.ix{border-top:2px solid var(--ink)}
.ix-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;padding:28px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.ix-row > .card-for{padding-top:2px}
.ix-main{display:flex;flex-direction:column;gap:10px}
.ix-row:hover h3{color:var(--accent-ink)}

/* field notes */
.notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;border-top:2px solid var(--ink)}
.notes a{display:flex;flex-direction:column;gap:8px;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.notes a:hover h3{color:var(--accent-ink)}
.notes h3{font-size:21px}

/* founder */
.portrait{display:block;border-radius:50%;object-fit:cover;flex:0 0 auto}
.byline .portrait{width:44px;height:44px}
.about{display:grid;grid-template-columns:160px minmax(0,1fr);gap:48px;align-items:start;max-width:960px}
.portrait--lg{width:160px;height:160px}
.creds li::before{background:var(--accent)}

/* cards that remain (services, work) pick up the brand */
a.card:hover{border-color:var(--accent)}
.card h3{line-height:1.2}
.more:hover{color:var(--accent-ink)}

/* closing band and footer */
.sec--dark{background:var(--char);position:relative;overflow:hidden}
.sec--dark::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--accent);right:-90px;bottom:-130px;pointer-events:none}
.sec--dark .wrap{position:relative;z-index:1}
.sec--dark h2{color:#fff}
.site-foot{background:var(--char-2);color:var(--on-char-soft)}
.site-foot a{color:var(--on-char)}
.site-foot a:hover{color:#fff}

@media (max-width:900px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps li:nth-child(3){padding-left:0;border-left:0}
  .steps li:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:720px){
  .site-head .wrap{min-height:72px}
  .logo{--logo-h:52px;top:0}.logo-tag{font-size:9px}
  .hero{padding:132px 0 64px}
  .hero::after{width:280px;height:280px;right:-120px;top:-110px}
  .sec.pagehead{padding-top:120px}
  .pagehead::after{width:200px;height:200px;right:-90px;top:-110px}
  .recent-strip ol{grid-template-columns:1fr}
  .recent-strip li + li{border-left:0;border-top:1px solid var(--line)}
  .recent-strip a,.recent-strip li + li a{padding:16px 0}
  .steps{grid-template-columns:1fr}
  .steps li,.steps li + li{padding:20px 0 4px;border-left:0}
  .steps li + li{border-top:1px solid var(--line)}
  .ix-row{grid-template-columns:1fr;gap:8px}
  .notes{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:20px}
  .portrait--lg{width:96px;height:96px}
}

/* services rows: number · what · facts, on one rule (rev C.2, 2026-10-16) */
.svc{padding:28px 0}
.pagehead + .svc{padding-top:56px}
.svc--last{padding-bottom:72px}
.svc-row{display:grid;grid-template-columns:160px minmax(0,6fr) minmax(0,4fr);gap:40px;align-items:start;border-top:2px solid var(--ink);padding-top:28px}
.svc-row h2{font-size:28px}
.svc-num .kicker{color:var(--accent-ink)}
.svc-facts:empty{display:none}
.steps--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.steps--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.steps--5 li{padding-right:20px}.steps--5 li + li{padding-left:20px}
@media (max-width:1100px){.steps--5{grid-template-columns:repeat(3,minmax(0,1fr))}.steps--5 li:nth-child(4){padding-left:0;border-left:0}.steps--5 li:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:900px){.svc-row{grid-template-columns:1fr;gap:12px}.steps--3{grid-template-columns:1fr}.steps--3 li,.steps--3 li + li{padding:20px 0 4px;border-left:0}.steps--3 li + li{border-top:1px solid var(--line)}}
@media (max-width:720px){.steps--5{grid-template-columns:1fr}.steps--5 li,.steps--5 li + li{padding:20px 0 4px;border-left:0;border-top:0}.steps--5 li + li{border-top:1px solid var(--line)}}
.guide{padding:72px 0;border-top:1px solid var(--line)}
.guide-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:end}
.guide-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:12px;align-items:end}
@media (max-width:900px){.guide-row{grid-template-columns:1fr;gap:24px}}
@media (max-width:600px){.guide-form{grid-template-columns:1fr}}
.svc.sec--alt{background:transparent}
.inline-target{display:inline-flex;align-items:center;min-height:44px}
/* forms: consent + states (states hidden until Clev's wiring toggles them) */
.guide-form .consent,.guide-form .form-state{grid-column:1/-1}
.consent{font-size:14px;color:var(--ink-2);margin:0}
.form-state{font-size:15px;padding:12px 14px;border-left:3px solid #2E7D4F;background:#EEF6F0;margin:0}
.form-state--error{border-left-color:var(--accent);background:#FBECEE}
/* legal page */
.legal{max-width:720px;display:flex;flex-direction:column;gap:14px}
.legal h2{font-size:22px;margin-top:20px}
.legal h3{font-size:18px;margin-top:6px}
.legal ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:6px}
.legal p,.legal li{line-height:1.6;color:var(--ink-2)}
.legal address{font-style:normal;line-height:1.7;margin-top:6px}
article > section:not(.pagehead){padding-top:56px}
/* outcomes strip: foot of the home hero, leadership-level results (positioning v1, 2026-10-16) */
.hero{padding-bottom:0}
.outcomes-wrap{margin-top:96px}
.outcomes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #45453F}
.outcomes li{padding:24px 28px 40px 0;color:var(--on-char);font-size:16px;line-height:1.45;font-weight:600}
.outcomes li + li{padding-left:28px;border-left:1px solid #45453F}
@media (max-width:900px){.outcomes{grid-template-columns:repeat(2,minmax(0,1fr))}.outcomes li:nth-child(3){padding-left:0;border-left:0}.outcomes li:nth-child(n+3){border-top:1px solid #45453F}}
@media (max-width:720px){.hero{padding-bottom:0}.outcomes-wrap{margin-top:56px}.outcomes{grid-template-columns:1fr}.outcomes li,.outcomes li + li{padding:16px 0;border-left:0}.outcomes li + li{border-top:1px solid #45453F}}
/* header fit with the longer CTA label: one line from 721px up */
.site-head .btn-p{white-space:nowrap}
@media (min-width:721px) and (max-width:1000px){.logo{--logo-h:56px;top:13px}.logo-tag{font-size:9px}.nav{gap:18px}.site-head .btn-p{padding-left:14px;padding-right:14px}}

/* Client name: under the metric on work cards and home rows, under the H1 on case pages */
.card-lead{flex:0 0 260px;display:flex;flex-direction:column;gap:8px}
.card-for{font-size:18px;line-height:1.3;color:var(--muted)}
.card-for strong{font-weight:700;color:var(--muted)}
.pagehead .case-for{font-size:22px;line-height:1.3;color:var(--on-char-soft);margin-top:-8px}
.pagehead .case-for strong{font-weight:700;color:var(--on-char-soft)}