/* ===========================================================
   Siete Leadership Consulting — V1
   Design system per Siete-Design-Brief.md
   Primary ref: FourFold · claims: FiftyFive · opener: Humatica · field: KEA
   =========================================================== */

:root{
  /* Colour — Siete blue brand (sampled from logo) */
  --canvas:        #F4F6FA;   /* soft cool off-white base (NOT pure white) */
  --canvas-2:      #FFFFFF;   /* card / lift */
  --ink:           #16264D;   /* deep navy primary text */
  --ink-soft:      #3C4E74;
  --muted:         #8A92A6;   /* eyebrows, captions, hairlines */
  --blue:          #204080;   /* Siete brand blue (logo wordmark) */
  --blue-deep:     #16315F;
  --sky:           #2098C8;   /* bright accent (logo arrow) */
  --sky-deep:      #1B82AC;
  --clay:          #D8B3A8;   /* warm secondary */
  --steel:         #A9BCD8;   /* cool blue-grey secondary */
  --line:          #E3E6EE;
  --hero-bg:       #DCCAC6;   /* warm greige — matches the hero image's flat background */
  --header-h:      91px;       /* sticky header height — hero fills the rest of the viewport */

  /* Type */
  --display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Rhythm — full-width: content fills the viewport with fluid side margins,
     bounded by a generous ceiling so prose stays readable on ultrawide screens. */
  --container: 1800px;
  --gutter: clamp(1.25rem, 5vw, 6rem);
  --section-y: clamp(4.5rem, 9vw, 9.5rem);
  --radius: 14px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--body);
  background:var(--canvas);
  color:var(--ink-soft);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:clamp(3rem,6vw,5rem); }

/* Eyebrow: uppercase label + hairline rule (FiftyFive / Humatica) */
.eyebrow{
  display:flex; align-items:center; gap:1rem;
  font-family:var(--body); font-size:.72rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  margin-bottom:1.6rem;
}
.eyebrow::after{ content:""; height:1px; width:clamp(40px,8vw,110px); background:var(--line); }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ content:""; height:1px; width:clamp(40px,8vw,110px); background:var(--line); }

/* Headings */
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); line-height:1.12; font-weight:500; }
h2{ font-size:clamp(1.9rem, 4vw, 3rem); letter-spacing:-.01em; }
h3{ font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:500; }
.lead{ font-size:clamp(1.1rem,1.6vw,1.32rem); color:var(--ink-soft); max-width:62ch; }
.measure{ max-width:64ch; }
.accent{ color:var(--blue); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--body); font-weight:600; font-size:.95rem;
  padding:.85rem 1.6rem; border-radius:999px; cursor:pointer;
  transition:.25s ease; border:1px solid transparent;
}
.btn--primary{ background:var(--blue); color:#fff; }
.btn--primary:hover{ background:var(--blue-deep); transform:translateY(-2px); }
.btn--ghost{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--light{ border-color:rgba(255,255,255,.5); color:#fff; }
.btn--light:hover{ background:#fff; color:var(--ink); }
.textlink{ display:inline-flex; align-items:center; gap:.5rem; font-weight:600; color:var(--blue); }
.textlink::after{ content:"→"; transition:transform .25s ease; }
.textlink:hover::after{ transform:translateX(5px); }

/* ---------- Star brand mark ---------- */
.star{ display:inline-block; width:1em; height:1em; vertical-align:-.12em; }
.star polygon{ fill:var(--blue); }
.star--flourish{ width:clamp(46px,7vw,88px); height:clamp(46px,7vw,88px); }

/* ===========================================================
   HEADER / NAV
   =========================================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:transparent;
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.scrolled{ background:rgba(244,246,250,.85); border-color:var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1.05rem; }
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand-logo{ height:56px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap:2.1rem; list-style:none; }
.nav-links a{ font-size:.95rem; font-weight:500; position:relative; transition:color .2s; }
.nav-links a:not(.btn){ color:var(--ink-soft); }
.nav-links a:not(.btn):hover, .nav-links a:not(.btn)[aria-current="page"]{ color:var(--ink); }
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:var(--blue); transition:width .25s;
}
.nav-links a:not(.btn):hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; }
.nav-toggle span{ display:block; width:24px; height:2px; background:var(--ink); margin:5px 0; transition:.3s; }

/* ===========================================================
   HERO
   =========================================================== */
.hero{ position:relative; display:flex; align-items:center; min-height:calc(100vh - var(--header-h)); min-height:calc(100svh - var(--header-h)); padding-block:clamp(1.5rem,4vh,3.5rem); overflow:hidden; background:var(--hero-bg); }
.hero > .container{ width:100%; }
.hero__inner{ display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.hero__statement{ font-family:var(--display); line-height:1.04; letter-spacing:-.02em; }
.hero__statement > span{ display:block; }
.w1{ font-weight:500; font-size:clamp(2.6rem,6.4vw,5rem); color:var(--ink); }
.w2{ font-weight:300; font-size:clamp(2.6rem,6.4vw,5rem); color:var(--blue); }
.w3{ font-weight:700; font-size:clamp(2.6rem,6.4vw,5rem); color:var(--ink); }
.w1 .p, .w2 .p, .w3 .dot{ color:var(--blue); }
.hero__sub{ margin:1.8rem 0 2.2rem; font-size:clamp(1.05rem,1.5vw,1.25rem); max-width:46ch; }
.hero__art{ position:relative; }
.hero__art .blob{
  aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--steel), #c3d2ea 60%, #aebfe0);
  display:grid; place-items:center; position:relative;
}
.hero__art .blob .clay{
  position:absolute; width:42%; aspect-ratio:1/1; border-radius:22px;
  background:linear-gradient(140deg,var(--clay),#e6cdc5); right:-6%; bottom:6%;
  box-shadow:0 30px 60px -30px rgba(22,38,77,.35); transform:rotate(8deg);
}
.hero__art .star--flourish{ position:absolute; top:-6%; left:-4%; filter:drop-shadow(0 12px 24px rgba(32,64,128,.28)); }
.hero__art .blob .glyphs{ font-family:var(--display); color:#fff; font-weight:600; font-size:clamp(1.6rem,4vw,2.6rem); opacity:.95; letter-spacing:.02em; z-index:1; }

/* ===========================================================
   GENERIC SPLIT ROWS (alternating text/image)
   =========================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split--reverse .split__media{ order:-1; }
.split__media{
  border-radius:var(--radius); aspect-ratio:4/3; overflow:hidden;
  background:linear-gradient(135deg,#eaf0f8,#dde6f2);
  display:grid; place-items:center; color:var(--muted);
}
.media-fig{ width:100%; height:100%; display:grid; place-items:center; }
.media-img{ width:100%; height:100%; object-fit:cover; display:block; }
.note{ font-size:.8rem; color:var(--muted); }

/* ===========================================================
   ACCORDION ( + dropdowns — FourFold )
   =========================================================== */
.accordion{ margin-top:2.5rem; display:grid; gap:1rem; }
.acc-item{
  background:var(--canvas-2); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 6px 22px -16px rgba(22,38,77,.45);
  transition:box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.acc-item:hover{ box-shadow:0 14px 34px -18px rgba(22,38,77,.5); transform:translateY(-2px); }
.acc-item.open{ box-shadow:0 18px 44px -20px rgba(22,38,77,.55); border-color:#d3dcea; }
.acc-head{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.35rem 1.6rem; font-family:var(--display); font-size:clamp(1.15rem,2vw,1.5rem);
  color:var(--ink); font-weight:500;
}
.acc-head .icon{ position:relative; width:22px; height:22px; flex:none; }
.acc-head .icon::before,.acc-head .icon::after{
  content:""; position:absolute; background:var(--blue); transition:.3s;
}
.acc-head .icon::before{ top:10px; left:0; width:22px; height:2px; }
.acc-head .icon::after{ left:10px; top:0; width:2px; height:22px; }
.acc-item.open .icon::after{ transform:rotate(90deg); opacity:0; }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.acc-body .inner{ padding:0 1.6rem 1.6rem; max-width:70ch; color:var(--ink-soft); }
.acc-item.open .acc-body{ max-height:600px; }

/* ===========================================================
   STATS (count-up — Humatica)
   =========================================================== */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.stat{ background:var(--canvas-2); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.5rem; text-align:center; }
.stat .num{ font-family:var(--display); font-size:clamp(2.2rem,4vw,3.2rem); color:var(--ink); font-weight:600; line-height:1; }
.stat .num .plus{ color:var(--blue); }
.stat .label{ margin-top:.6rem; font-size:.85rem; letter-spacing:.04em; color:var(--muted); }

/* ===========================================================
   CLIENT LOGO WALL ( mono → colour on hover, FiftyFive energy )
   =========================================================== */
.logo-wall{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.5rem 2rem; align-items:center; }
.logo-wall img{
  height:46px; width:auto; margin-inline:auto; object-fit:contain;
  filter:grayscale(1); opacity:.55; transition:.3s;
}
.logo-wall a:hover img{ filter:grayscale(0); opacity:1; }

/* ===========================================================
   IMMERSIVE FIELD ( KEA gradient — emotional centre )
   =========================================================== */
.field{ background:linear-gradient(135deg,#16264D 0%,#204080 55%,#2098C8 100%); color:#fff; text-align:center; position:relative; overflow:hidden; }
.field h2{ color:#fff; }
.field .lead{ color:rgba(255,255,255,.85); margin-inline:auto; }
.field .equation{
  font-family:var(--display); font-weight:300; color:#fff;
  font-size:clamp(2.4rem,7vw,5rem); letter-spacing:.02em; margin:.4rem 0 1.6rem;
}
.field .equation b{ font-weight:700; }
/* Longer equation ("C x C x C = chances of success") — scale to stay on one line */
.field .equation--fit{ white-space:nowrap; font-size:clamp(1.05rem, 4.7vw, 3.5rem); }
.field .equation .accent{ color:#8FD3EE; }
.field .star polygon{ fill:rgba(255,255,255,.12); }
.field .star--flourish{ position:absolute; opacity:.6; }
.field .s1{ top:8%; left:6%; } .field .s2{ bottom:6%; right:8%; }

/* ===========================================================
   PROJECT LIST
   =========================================================== */
.proj-list{ list-style:none; columns:2; column-gap:3rem; }
.proj-list li{ break-inside:avoid; padding:.85rem 0 .85rem 1.6rem; position:relative; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.proj-list li::before{ content:""; position:absolute; left:0; top:1.25rem; width:8px; height:8px; background:var(--blue); border-radius:2px; transform:rotate(45deg); }

/* ===========================================================
   FOUNDER
   =========================================================== */
.founder{ display:grid; grid-template-columns:280px 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.founder__photo{ border-radius:var(--radius); aspect-ratio:3/4; overflow:hidden; background:linear-gradient(160deg,var(--steel),var(--clay)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-size:1.1rem; }
.founder__photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.founder blockquote{ border-left:3px solid var(--blue); padding-left:1.2rem; margin:1.4rem 0; font-style:italic; color:var(--ink); }
.linkedin-link{ display:inline-flex; align-items:center; gap:.55rem; margin-top:1.1rem; color:var(--blue); font-weight:600; font-size:.9rem; transition:color .2s; }
.linkedin-link svg{ width:26px; height:26px; display:block; flex:none; }
.linkedin-link:hover{ color:var(--blue-deep); }

/* Hanging bullet list (bullet stays left, wrapped text aligns under the text) */
.bullet-list{ list-style:none; margin-top:.8rem; display:grid; gap:.6rem; color:var(--ink-soft); }
.bullet-list li{ position:relative; padding-left:1.4rem; }
.bullet-list li::before{ content:""; position:absolute; left:.2rem; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--blue); }

/* ===========================================================
   CONTACT
   =========================================================== */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.form-field{ margin-bottom:1.1rem; }
.hp-field{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-field label{ display:block; font-size:.82rem; letter-spacing:.04em; color:var(--muted); margin-bottom:.4rem; }
.form-field input,.form-field textarea{
  width:100%; padding:.9rem 1rem; border:1px solid var(--line); border-radius:10px;
  background:var(--canvas-2); font-family:var(--body); font-size:1rem; color:var(--ink); transition:.2s;
}
.form-field input:focus,.form-field textarea:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(32,64,128,.14); }
.contact-detail{ margin-bottom:1.4rem; }
.contact-detail .k{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.contact-detail .v{ font-size:1.15rem; color:var(--ink); font-family:var(--display); }

/* ===========================================================
   FOOTER
   =========================================================== */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.7); padding-block:clamp(3rem,6vw,4.5rem) 2rem; }
.site-footer h4{ color:#fff; margin-bottom:1rem; font-weight:500; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:2.5rem; }
.footer-grid a:hover{ color:#fff; }
.footer-links{ list-style:none; display:grid; gap:.6rem; }
.footer-bottom{ margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.85rem; }
.footer-brand{ display:flex; align-items:center; gap:.5rem; }
.footer-logo{ height:42px; width:auto; display:block; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero{ padding-block:clamp(3.5rem,8vw,6rem) clamp(2rem,4vw,3rem); }
.page-hero h1{ font-size:clamp(2.4rem,5.5vw,4rem); font-weight:500; }
.page-hero .lead{ margin-top:1.2rem; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Back to top ---------- */
.to-top{
  position:fixed; right:1.4rem; bottom:1.4rem; z-index:50;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:.62rem; letter-spacing:.15em; color:var(--ink); opacity:0; pointer-events:none; transition:.3s;
  background:none; border:0; cursor:pointer; font-family:var(--body);
}
.to-top.show{ opacity:.7; pointer-events:auto; }
.to-top:hover{ opacity:1; }
.to-top .arr{ font-size:1.1rem; color:var(--blue); }

/* ---------- Notice banner (V1 placeholder honesty) ---------- */
.notice{ background:#eaf0f8; border:1px solid #d4dff0; color:var(--ink-soft); font-size:.82rem; border-radius:10px; padding:.7rem 1rem; }

/* ---------- Hero photo (client graphic) ---------- */
.hero-photo{ width:100%; max-width:920px; height:auto; display:block; margin-inline:auto; }

/* ===========================================================
   3Cs — interactive diagnostic
   (Clarity = blue · Capability = green · Commitment = red, per the deck)
   =========================================================== */
:root{ --c-clarity:#2a7fd4; --c-capability:#2f9e63; --c-commitment:#d6553f; }
.cthree{ display:grid; gap:1.6rem; width:100%; }
.cthree__prompt{ text-align:center; font-family:var(--display); font-weight:600; font-size:clamp(1rem,1.5vw,1.15rem); color:var(--blue); margin-bottom:-.4rem; }
.cthree__svg{ width:100%; max-width:440px; margin-inline:auto; display:block; overflow:visible; }
.cthree__svg text{ font-family:var(--display); }
.cc-axislabel{ font-size:14px; font-weight:600; }
.cc-scoretext{ font-size:14px; font-weight:700; fill:#fff; pointer-events:none; }
.cthree__controls{ display:grid; gap:.9rem; width:100%; max-width:460px; margin-inline:auto; }
.cc-row{ display:grid; grid-template-columns:118px 1fr 28px; align-items:center; gap:1rem; }
.cc-row label{ font-weight:600; font-size:.9rem; }
.cc-row .cc-val{ font-weight:700; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }
.cc-row input[type=range]{ width:100%; height:6px; -webkit-appearance:none; appearance:none; background:var(--line); border-radius:999px; outline:none; }
.cc-row input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:currentColor; cursor:pointer; border:3px solid #fff; box-shadow:0 1px 4px rgba(22,38,77,.3); }
.cc-row input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:currentColor; cursor:pointer; border:3px solid #fff; }
.cc-row.is-clarity{ color:var(--c-clarity); } .cc-row.is-capability{ color:var(--c-capability); } .cc-row.is-commitment{ color:var(--c-commitment); }
.cc-row label, .cc-row .cc-val{ color:var(--ink); }
.cthree__state{ text-align:center; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--canvas); }
.cthree__state .cc-eq{ font-size:.85rem; color:var(--muted); letter-spacing:.02em; }
.cthree__state .cc-result{ font-family:var(--display); font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--blue); margin-top:.2rem; }
.cthree__state .cc-explain{ margin-top:.5rem; font-size:.95rem; color:var(--ink-soft); max-width:42ch; margin-inline:auto; line-height:1.55; }
/* Draggable score nodes in the triangle */
.cthree__svg circle[id^="cc-node-"]{ cursor:grab; touch-action:none; }
.cthree__svg circle[id^="cc-node-"]:active{ cursor:grabbing; }

/* ---------- Thinking hero: copy + live diagnostic side by side ---------- */
.page-hero--3cs{ padding-block:clamp(1.6rem,3.5vw,2.6rem) clamp(1.5rem,3vw,2.4rem); }
.thinking-hero{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; margin-top:1rem; }
.thinking-hero .cthree{ background:var(--canvas-2); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.4rem,3vw,2.2rem); box-shadow:0 24px 60px -34px rgba(22,38,77,.5); }
.cnames{ font-size:clamp(2.1rem,4.6vw,3.3rem); font-weight:600; line-height:1.12; }
.cnames .cl{ color:var(--c-clarity); } .cnames .ca{ color:var(--c-capability); } .cnames .co{ color:var(--c-commitment); }

/* Stacked C descriptor cards with icons (left column of the hero) */
.cdesc-list{ display:grid; gap:1rem; margin-top:1.6rem; }
.cdesc{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:center; background:var(--canvas-2); border:1px solid var(--line); border-left:4px solid var(--line); border-radius:var(--radius); padding:1.1rem 1.3rem; box-shadow:0 10px 30px -22px rgba(22,38,77,.5); }
.cdesc.is-clarity{ border-left-color:var(--c-clarity); }
.cdesc.is-capability{ border-left-color:var(--c-capability); }
.cdesc.is-commitment{ border-left-color:var(--c-commitment); }
.cdesc__icon{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; }
.cdesc.is-clarity .cdesc__icon{ background:rgba(42,127,212,.12); color:var(--c-clarity); }
.cdesc.is-capability .cdesc__icon{ background:rgba(47,158,99,.12); color:var(--c-capability); }
.cdesc.is-commitment .cdesc__icon{ background:rgba(214,85,63,.12); color:var(--c-commitment); }
.cdesc__icon svg{ width:26px; height:26px; display:block; }
.cdesc__k{ display:block; font-family:var(--display); font-weight:600; font-size:1.05rem; margin-bottom:.15rem; }
.cdesc.is-clarity .cdesc__k{ color:var(--c-clarity); }
.cdesc.is-capability .cdesc__k{ color:var(--c-capability); }
.cdesc.is-commitment .cdesc__k{ color:var(--c-commitment); }
.cdesc p{ margin:0; font-size:.9rem; color:var(--ink-soft); line-height:1.5; }
.applies-heading{ margin-top:2.4rem; font-size:1.3rem; }

/* ---------- 3Cs definition cards (Clarity / Capability / Commitment) ---------- */
.cgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:1rem; }
.ccard{ background:var(--canvas-2); border:1px solid var(--line); border-radius:var(--radius); padding:2rem 1.7rem; box-shadow:0 10px 30px -22px rgba(22,38,77,.5); border-top:4px solid var(--line); transition:box-shadow .3s ease, transform .3s ease; }
.ccard:hover{ transform:translateY(-3px); box-shadow:0 18px 42px -22px rgba(22,38,77,.55); }
.ccard.is-clarity{ border-top-color:var(--c-clarity); }
.ccard.is-capability{ border-top-color:var(--c-capability); }
.ccard.is-commitment{ border-top-color:var(--c-commitment); }
.ccard__icon{ width:54px; height:54px; border-radius:14px; display:grid; place-items:center; margin-bottom:1.1rem; }
.ccard.is-clarity .ccard__icon{ background:rgba(42,127,212,.12); color:var(--c-clarity); }
.ccard.is-capability .ccard__icon{ background:rgba(47,158,99,.12); color:var(--c-capability); }
.ccard.is-commitment .ccard__icon{ background:rgba(214,85,63,.12); color:var(--c-commitment); }
.ccard__icon svg{ width:30px; height:30px; display:block; }
.ccard h3{ font-size:1.3rem; margin-bottom:.5rem; }
.ccard.is-clarity h3{ color:var(--c-clarity); }
.ccard.is-capability h3{ color:var(--c-capability); }
.ccard.is-commitment h3{ color:var(--c-commitment); }
.ccard p{ font-size:.96rem; color:var(--ink-soft); }

/* ---------- "When something is missing" — symptom quote cards ---------- */
.symptoms{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.4rem; }
.symptom{ background:var(--canvas-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.7rem; box-shadow:0 10px 30px -22px rgba(22,38,77,.5); border-left:4px solid var(--line); }
.symptom.is-clarity{ border-left-color:var(--c-clarity); }
.symptom.is-capability{ border-left-color:var(--c-capability); }
.symptom.is-commitment{ border-left-color:var(--c-commitment); }
.symptom .k{ font-family:var(--display); font-weight:600; font-size:1.05rem; margin-bottom:.6rem; }
.symptom.is-clarity .k{ color:var(--c-clarity); }
.symptom.is-capability .k{ color:var(--c-capability); }
.symptom.is-commitment .k{ color:var(--c-commitment); }
.symptom q{ font-style:italic; color:var(--ink); quotes:"“" "”"; }

/* ---------- "Powerful and proven" — application cards ---------- */
.applies{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.4rem; text-align:left; }
.apply{ background:var(--canvas-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; box-shadow:0 10px 30px -22px rgba(22,38,77,.5); }
.apply h3{ font-size:1.15rem; margin-bottom:.55rem; color:var(--ink); }
.apply p{ font-size:.95rem; color:var(--ink-soft); }

/* ---------- Resource list ---------- */
.reslist{ list-style:none; columns:2; column-gap:3rem; margin-top:1.6rem; }
.reslist li{ break-inside:avoid; padding:.7rem 0 .7rem 1.7rem; position:relative; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.reslist li::before{ content:""; position:absolute; left:0; top:1.05rem; width:9px; height:9px; border-radius:50%; background:var(--c-clarity); }
.reslist li:nth-child(3n+2)::before{ background:var(--c-capability); }
.reslist li:nth-child(3n+3)::before{ background:var(--c-commitment); }
.copyright{ font-size:.78rem; color:var(--muted); margin-top:1.6rem; }

/* ---------- 3Cs common states grid ---------- */
.states{ display:grid; gap:.8rem; width:100%; }
.state-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:12px; background:var(--canvas-2); }
.state-row .eq{ display:flex; align-items:center; gap:.45rem; font-weight:600; font-size:.92rem; flex:1; min-width:230px; }
.state-row .eq .c{ }
.state-row .eq .cl{ color:var(--c-clarity); } .state-row .eq .ca{ color:var(--c-capability); } .state-row .eq .co{ color:var(--c-commitment); }
.state-row .eq .miss{ color:var(--muted); text-decoration:line-through; opacity:.6; }
.state-row .eq .op{ color:var(--muted); font-weight:400; }
.state-row .res{ font-family:var(--display); font-weight:500; color:var(--ink); }
.state-row.good{ border-color:#d4dff0; background:#eef3fb; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:900px){
  .hero__inner,.split,.contact-grid,.founder,.thinking-hero{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .cgrid,.symptoms,.applies{ grid-template-columns:1fr; }
  .logo-wall{ grid-template-columns:repeat(3,1fr); }
  .footer-grid{ grid-template-columns:1fr; }
  .founder__photo{ max-width:280px; }
  .hero__art{ max-width:420px; margin-inline:auto; }
  .nav-toggle{ display:block; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:1.2rem; background:var(--canvas); border-bottom:1px solid var(--line); padding:1.5rem var(--gutter);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:.25s;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
}
@media (max-width:560px){
  .proj-list,.reslist{ columns:1; }
  .logo-wall{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}