/* ===========================================================
   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;

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

  /* Rhythm */
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --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:rgba(244,246,250,.85);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.scrolled{ 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:40px; 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; padding-block:clamp(4.5rem,11vw,9rem) clamp(3.5rem,8vw,7rem); overflow:hidden; }
.hero__inner{ display:grid; grid-template-columns:1.05fr .95fr; 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(--steel); }
.w3{ font-weight:700; font-size:clamp(2.6rem,6.4vw,5rem); color:var(--ink); }
.w3 .dot{ color:var(--sky); }
.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; }
.note{ font-size:.8rem; color:var(--muted); }

/* ===========================================================
   ACCORDION ( + dropdowns — FourFold )
   =========================================================== */
.accordion{ border-top:1px solid var(--line); margin-top:2.5rem; }
.acc-item{ border-bottom:1px solid var(--line); }
.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.4rem 0; 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 0 1.6rem; max-width:70ch; color:var(--ink-soft); }
.acc-item.open .acc-body{ max-height:480px; }

/* ===========================================================
   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; }
.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; background:linear-gradient(160deg,var(--steel),var(--clay)); display:grid; place-items:center; color:#fff; font-family:var(--display); font-size:1.1rem; }
.founder blockquote{ border-left:3px solid var(--blue); padding-left:1.2rem; margin:1.4rem 0; font-style:italic; color:var(--ink); }

/* ===========================================================
   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; }
.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; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:900px){
  .hero__inner,.split,.contact-grid,.founder{ grid-template-columns:1fr; }
  .split--reverse .split__media{ order:0; }
  .stats{ grid-template-columns:repeat(2,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{ 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; }
}