/* =============================================================================
   CONZEPT website-v2 — component blocks
   Depends on css/tokens.css (palette, font, radius, spacing, pane classes).
   See ../../DESIGN.md for the full design system and named rules.
   ============================================================================= */

/* ---- nav ------------------------------------------------------------------ */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 64px;
  border-bottom: 1px solid rgba(227,219,207,0.16);
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(1,35,52,0.92);
  backdrop-filter: blur(8px);
}
.nav .wordmark { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--beige); }
.nav .btn-primary { padding: 14px 24px; font-size: 14px; }

/* ---- buttons ---------------------------------------------------------------
   The single conversion CTA (button-primary), its light-panel secondary
   (button-ghost, e.g. About's LinkedIn link), and its accent-panel variant
   (button-onaccent). See DESIGN.md "Don't add a second CTA verb" — all three
   are the same one conversion action, recolored per background. ----------- */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: var(--navy);
  border: none;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.35); }
.btn-primary:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
.btn-ghost {
  display: inline-block;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  padding: 13.5px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
}
/* On the accent panel, btn-primary's own terracotta background disappears
   into the pane, and the outline-only ghost style read as too quiet to pass
   as a button. Solid navy/beige instead — same weight and lift as primary,
   just recolored for the one background where primary can't be seen. ----- */
.btn-onaccent {
  display: inline-block;
  background: var(--navy);
  color: var(--beige);
  border: none;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.btn-onaccent:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0,0,0,0.35); }
.btn-onaccent:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

/* ---- decorative geometry — one authored motif, reused sparingly ----------- */
.arc {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(224,122,95,0.4);
  pointer-events: none;
}

/* ---- hero -------------------------------------------------------------------
   Bolder pass (2026-08-05): motif turned up to full strength (3rd arc, fuller
   stroke) and the headline promoted out of .wrap into its own wider container
   so it can outgrow the 1100px column on wide viewports. --------------- */
.hero { padding-top: 72px; padding-bottom: 140px; }
.hero .arc-1 { width: 640px; height: 640px; top: -220px; right: -160px; border-color: rgba(224,122,95,0.28); }
.hero .arc-2 { width: 360px; height: 360px; top: -60px; right: 60px; border-color: rgba(227,219,207,0.14); }
.hero .arc-3 { width: 900px; height: 900px; top: -420px; right: -360px; border-color: rgba(224,122,95,0.5); border-width: 2px; }
.hero-head { max-width: 1440px; margin: 0 auto 56px; position: relative; }
.hero h1 {
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
  max-width: 26ch;
  margin-bottom: 0;
}

/* ---- hero flow — single-column lede→CTA→link, replaces the old two-column
   hero-grid split per Glenn's 2026-08-08 feedback ("doesn't flow nicely").
   Chosen from three layout variants: structure from v2 (distinct italic
   lead line above the body), measure widened to v1's wider line length. -- */
.hero-flow { max-width: 640px; }
.hero-flow .hero-flow-lead { font-style: italic; font-weight: 400; font-size: 24px; line-height: 1.15; color: rgba(227,219,207,0.68); max-width: 40ch; margin-bottom: 14px; }
.hero-flow .hero-flow-text { font-size: 17px; line-height: 1.6; max-width: 56ch; margin-bottom: 28px; color: rgba(227,219,207,0.85); }
.hero-flow .btn-primary { display: inline-block; margin-top: 8px; }
.hero-flow .hero-side-link { display: block; margin-top: 16px; }

/* ---- moment — big pull statement -------------------------------------------- */
.moment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.moment-grid h2 {
  font-size: clamp(2.2rem, 4.2vw, 3.4rem);
  line-height: 1.02;
  color: var(--navy);
}
.moment-grid .body p { font-size: 18px; line-height: 1.7; margin-bottom: 20px; }
@media (min-width: 901px) { .moment-grid .body { padding-top: 12px; } }

/* ---- steps — horizontal 3-up process ------------------------------------
   Layout pass (2026-08-05): replaces the staggered single-column list.
   The numeral is a watermark behind each column's heading instead of its
   own component, and a CSS-drawn chevron (a rotated bordered square, the
   classic two-border-arrow technique) links each column to the next. This
   earns the 3-up structure back from the card-grid ban DESIGN.md otherwise
   holds (see its Step Row rule): the sequence itself is real information
   here, so three columns read as a path, not a row of interchangeable cards.
   Critique fix (2026-08-05): the middle column originally staggered down
   28px for asymmetry, but that also dropped its chevron out of line with
   column 3's — fixed with a counter-offset at the time.
   2026-08-05, later same day: the 28px stagger itself is gone per Glenn
   ("breaks the balance, doesn't look nice") — all three columns now sit on
   one line, which also removes the counter-offset this stagger required. */
.steps-head { max-width: 46ch; margin-bottom: 72px; }
.steps-head h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--navy); }
.steps-row-3up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; align-items: start; }
.step-col { position: relative; padding: 0 28px; }
.step-col:first-child { padding-left: 0; }
.step-col .chevron {
  position: absolute;
  top: -3px;
  left: -47px;
  width: 30px;
  height: 30px;
  border-top: 3px solid rgba(1,35,52,0.32);
  border-right: 3px solid rgba(1,35,52,0.32);
  transform: rotate(45deg);
}
.step-col .num-watermark {
  position: absolute;
  top: -8px;
  left: -4px;
  font-weight: 800;
  font-size: 104px;
  line-height: 1;
  color: rgba(1,35,52,0.07);
  letter-spacing: -0.03em;
  pointer-events: none;
  z-index: 0;
}
.step-col .tag { position: relative; z-index: 1; font-size: 14px; font-weight: 700; color: var(--accent-on-light); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.step-col h3 { position: relative; z-index: 1; font-size: 22px; color: var(--navy); margin-bottom: 10px; letter-spacing: -0.01em; line-height: 1.2; }
.step-col p { position: relative; z-index: 1; font-size: 16px; line-height: 1.6; color: rgba(51,51,51,0.8); }

/* ---- about-me — focal-point portrait block ---------------------------------- */
.about-me-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.about-me-photo {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius-md);
}
.about-me-content h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--beige); line-height: 1.05; margin-bottom: 20px; max-width: 15ch; }
.about-me-content p { font-size: 18px; line-height: 1.65; color: rgba(227,219,207,0.8); max-width: 46ch; margin-bottom: 28px; }
.about-me-content .stat { font-family: var(--font); font-weight: 700; font-size: 18px; color: var(--accent); margin-bottom: 24px; }
.text-link { color: var(--beige); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(227,219,207,0.4); }
/* Light-panel variant — same link, recolored for use on beige/off-white
   backgrounds instead of the dark panes .text-link was built for (e.g. the
   FAQ's #5 answer, which cites /about from a pane-offwhite section). */
.text-link.on-light { color: var(--navy); text-decoration-color: rgba(1,35,52,0.35); }
@media (max-width: 900px) { .about-me-grid { grid-template-columns: 1fr; } .about-me-photo { max-width: 260px; } }

/* ---- proof — split panel, full-bleed ---------------------------------------
   45/55, not even — an even split was this section's one leftover violation
   of the Asymmetric Split Rule. Left column also widened its padding: at
   1fr/1fr the 46ch-capped copy sat in a much wider column with a lot of
   dead navy between it and the right panel on wide screens; the narrower
   column plus the extra inset keeps the text close to its own edges without
   reading as squeezed. -------------------------------------------------- */
.proof-split { display: grid; grid-template-columns: 45% 55%; gap: 0; margin: -96px -64px; }
.proof-split > div { padding: 104px 80px; }
/* proof-left's left inset tracks the exact same formula the browser uses
   to center a max-width: 1100px .wrap (50vw - 550px, algebraically the same
   as (100vw - 1100px)/2), so its text lines up with every other section's
   left edge at any width instead of staying pinned near the true viewport
   edge — proof-split is full-bleed (breaks the 1100px wrap), so without
   this the text drifts further left, relatively, the wider the screen
   gets. Deliberately uncapped: at 45% column width the padding can never
   mathematically exceed the column itself below an ~11,000px viewport, so
   an artificial ceiling only reintroduces the same drift on true
   ultra-wide screens it was meant to fix (confirmed against a 3840px/4K
   report — a 420px cap still flattened ~950px short of the real wrap
   edge at that width). */
.proof-left { background: var(--navy-raised); padding-left: max(80px, calc((100vw - 1100px) / 2)); }
.proof-left h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--beige); max-width: 14ch; margin-bottom: 24px; }
.proof-left p { font-size: 17px; line-height: 1.65; color: rgba(227,219,207,0.78); max-width: 42ch; }
.proof-right { background: var(--navy-deep); display: flex; flex-direction: column; justify-content: center; }
.proof-right .stat { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 36px; }
/* Logo marks: source files are dark-on-transparent (print/light-bg versions),
   so brightness(0) invert(1) forces a uniform white silhouette regardless of
   original hue — reads as one flat mark set on the dark ground instead of
   clashing brand colors, and covers the "inadequate quality" logos until
   real dark-ground versions are sourced. */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 32px; }
.logo-mark { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: 0.88; transition: opacity 0.15s ease; }
.logo-mark-link { display: inline-flex; align-items: center; }
.logo-mark-link:hover .logo-mark { opacity: 1; }
@media (max-width: 900px) { .proof-split { grid-template-columns: 1fr; margin: -56px -24px; } .proof-split > div { padding: 56px 24px; } }

/* ---- offer ------------------------------------------------------------------
   Paragraph full width above a side-by-side fit/not-fit comparison (two peer
   cards), CTA centered below. Replaced the old text|card offer-grid split
   per Glenn's 2026-08-08 feedback ("doesn't really work"); chosen from three
   layout variants (divided two-up, tinted invite, peer cards). ----------- */
.offer-flow h2 { font-size: clamp(2rem, 3.6vw, 2.8rem); color: var(--navy); margin-bottom: 20px; }
.offer-flow .offer-intro { font-size: 18px; line-height: 1.7; max-width: 68ch; margin-bottom: 40px; }
.offer-cta-row { max-width: 1100px; margin: 48px auto 0; text-align: center; }
.fit-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.fit-compare .fit-card { background: var(--beige-light); padding: 28px; border-radius: var(--radius-md); box-shadow: 0 12px 30px rgba(0,0,0,0.06); }
.fit-check > p { font-size: 14px; line-height: 1.65; color: rgba(51,51,51,0.7); margin-top: 12px; }
/* Filled dot = fit, hollow dot = boundary — shape carries the distinction,
   not color alone, so the two labels don't read as the same message type. */
.fit-check strong { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--navy); letter-spacing: -0.01em; }
.fit-check strong::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.fit-check--yes strong::before { background: var(--accent-on-light); }
.fit-check--no strong::before { border: 1.5px solid rgba(51,51,51,0.4); }
.fit-list { list-style: none; margin: 12px 0 0; padding: 0; }
.fit-list li { position: relative; padding-left: 17px; font-size: 14px; line-height: 1.6; color: rgba(51,51,51,0.7); margin-bottom: 8px; }
.fit-list li:last-child { margin-bottom: 0; }
.fit-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; background: var(--accent-on-light); }
.fit-list--no li::before { background: none; border: 1.5px solid rgba(51,51,51,0.4); }

/* ---- faq ---------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
.faq-grid h2 { font-size: clamp(2rem, 3.6vw, 2.6rem); color: var(--navy); max-width: 10ch; }
.faq-item { border-bottom: 1px solid rgba(51,51,51,0.14); padding: 22px 0; }
.faq-item:first-child { border-top: 1px solid rgba(51,51,51,0.14); }
.faq-item summary {
  position: relative;
  padding-right: 28px;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  color: var(--navy);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
/* CSS-drawn plus/minus toggle — no icon font, no unicode glyph standing in. */
.faq-item summary::before, .faq-item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  width: 12px;
  height: 2px;
  background: var(--navy);
  transform: translateY(-50%);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.faq-item summary::after { transform: translateY(-50%) rotate(90deg); }
.faq-item[open] summary::after { opacity: 0; transform: translateY(-50%) rotate(0deg); }
.faq-item .faq-a { font-size: 15px; line-height: 1.6; margin-top: 14px; color: rgba(51,51,51,0.78); }

/* ---- final cta — bold accent panel ---------------------------------------------- */
.final-cta {
  text-align: left;
  padding: 140px 64px;
}
.final-cta .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; }
.final-cta h2 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; max-width: 14ch; color: var(--navy); }
.final-cta p { font-size: 17px; line-height: 1.6; color: rgba(1,35,52,0.9); margin-bottom: 28px; }

/* ---- footer ---------------------------------------------------------------------- */
footer {
  padding: 32px 64px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(227,219,207,0.6);
  border-top: 1px solid rgba(227,219,207,0.09);
}
footer a { color: rgba(227,219,207,0.68); }

/* ---- responsive collapse ----------------------------------------------------- */
@media (max-width: 900px) {
  .nav { padding: 20px 24px; }
  .moment-grid, .faq-grid, .final-cta .wrap { grid-template-columns: 1fr; }
  .fit-compare { grid-template-columns: 1fr; gap: 32px; }
  .steps-row-3up { grid-template-columns: 1fr; gap: 40px; }
  .step-col { padding: 0; }
  .step-col:nth-child(2) { margin-top: 0; }
  .step-col .chevron { display: none; }
  .step-col .num-watermark { font-size: 80px; }
  .arc { display: none; }
}