/* Wovn Advisory landing page. Values come from tokens/ (copied from brand/design-system/tokens). */

* { box-sizing: border-box; }
body { position: relative; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }

/* ---- layout ---- */
section, .site-header, .site-footer { position: relative; }
.wrap { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 var(--frame-page-x); }
.wrap.narrow > * { max-width: 980px; }   /* text sections cap at 980px but keep the shared left edge */
section { padding: var(--space-24) 0; }

.tone-paper { background: var(--surface-page); }
.tone-white { background: var(--surface-card); }
.tone-wash  { background: var(--surface-sunken); }
.tone-ink   { background: var(--surface-inverse); color: var(--text-on-inverse); overflow: hidden; }

/* ---- type rhythm: mono kicker -> serif headline -> grotesk body ---- */
.kicker {
  font-family: var(--font-label); font-weight: var(--weight-label);
  font-size: var(--text-label); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-accent); margin: 0 0 var(--space-5);
}
h1 { font-size: clamp(2.75rem, 7vw, var(--text-display)); line-height: var(--leading-display); letter-spacing: -0.015em; margin-bottom: var(--space-6); }
h1 em { font-weight: 400; color: var(--text-accent); }
h2 { font-size: clamp(1.75rem, 3.6vw, var(--text-h1)); line-height: var(--leading-tight); margin-bottom: var(--space-6); }
.lead { font-size: var(--text-lead); line-height: var(--leading-body); color: var(--text-body); max-width: 38em; }
.body-lead { color: var(--text-body); }
.note { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-4) 0 0; }
.grid + .note { margin-top: var(--space-6); }
section > .wrap > h2 + .grid { margin-top: var(--space-8); }
section > .wrap > .lead + .grid { margin-top: var(--space-8); }

/* ---- buttons: pills, darken on hover, never scale ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: var(--weight-body-strong); font-size: var(--text-sm);
  padding: 12px 22px; border-radius: var(--radius-pill); text-decoration: none; border: 1px solid transparent;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.btn-lg { font-size: var(--text-base); padding: 16px 28px; }
.btn-primary { background: var(--action-primary); color: var(--wovn-white); }
.btn-primary:hover { background: var(--action-primary-hover); color: var(--wovn-white); }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-10) 0 0; }

/* ---- header / footer ---- */
.site-header { padding: var(--space-6) 0; background: var(--surface-page); }
.header-row, .footer-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.lockup { height: 44px; width: auto; }
.header-nav { display: flex; gap: var(--space-8); }
.header-nav a { font-size: var(--text-sm); font-weight: 500; color: var(--text-strong); text-decoration: none; }
.header-nav a:hover { color: var(--text-accent); }
/* Smooth jump to sections, landing clear of the sticky bar */
html { scroll-behavior: smooth; }
section { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (max-width: 700px) {
  .header-nav { display: none; }
  .thread { display: none; }   /* no thread or beacon on phones */
  section.hero { padding-bottom: var(--space-16); }   /* beats the 900px rule below */
}
.site-footer { padding: var(--space-12) 0 var(--space-10); border-top: 1px solid var(--border-hairline); }
.footer-email { font-size: var(--text-base); }
.footer-legal { align-items: baseline; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); }
.site-footer p { margin: 0; }
.fine { font-size: var(--text-sm); color: var(--text-muted); }
.brand-line { color: var(--text-faint); }

/* ---- sticky bar: fades in after the hero, no slide ---- */
.sticky-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: var(--space-3) 0; background: var(--surface-page); border-bottom: 1px solid var(--border-hairline);
  opacity: 0; visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
}
.sticky-bar.on { opacity: 1; visibility: visible; transition: opacity var(--duration-base) var(--ease-standard), visibility 0s; }
.sticky-bar .header-row { flex-wrap: nowrap; }
@media (max-width: 420px) { .sticky-bar .btn { padding: 10px 16px; } }
@media (max-width: 380px) { .sticky-bar .lockup { content: url("assets/wovn-mark-color.png"); height: 36px; } }

/* ---- hero ---- */
.hero { padding: var(--space-20) 0 160px; }   /* bottom room for the thread */

/* ---- the gap ---- */
#gap h2 { font-size: clamp(1.6rem, 3vw, 2.375rem); }
.words { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); border-top: var(--border-width-strong) solid var(--border-strong); padding-top: var(--space-6); }
.words .word { display: block; font-family: var(--font-display); font-weight: var(--weight-display-light); font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.1; color: var(--text-strong); margin-bottom: var(--space-3); }
.words p { color: var(--text-body); margin: 0; }
/* What we do about it: Spectral italic, set apart from the pain point above it */
.words p.offer { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; line-height: var(--leading-snug); color: var(--text-strong); margin-top: var(--space-3); }
.num { display: block; font-family: var(--font-label); font-size: var(--text-label); letter-spacing: var(--tracking-label); color: var(--text-faint); margin-bottom: var(--space-2); }

/* ---- cards: white, hairline, 20px radius, no shadow at rest ---- */
.grid { display: grid; gap: var(--space-5); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#examples .grid { grid-auto-rows: 1fr; }   /* every example tile the same height, whatever the text length */
.card {
  background: var(--surface-card); border: 1px solid var(--border-hairline); border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.card h3 { margin-bottom: var(--space-3); }
.card .card-label { font-family: var(--font-label); font-weight: var(--weight-label); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-accent); margin: 0 0 var(--space-3); }
.card p { color: var(--text-body); margin: 0; }
.card-ink { background: var(--surface-inverse); border-color: transparent; }
.card-ink h3 { color: var(--text-on-inverse); }
.card-ink p { color: var(--text-on-inverse-muted); }

/* ---- examples carousel (3D ring; plain grid without JS or with reduced motion) ---- */
#examples { overflow: hidden; }
.carousel { margin-top: var(--space-8); }
.carousel-ring { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-5); }
.carousel-controls { display: none; }
.ex-part { margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border-hairline); margin-top: var(--space-3); color: var(--text-body); font-size: var(--text-sm); line-height: var(--leading-body); }
.ex-part .ba-label { color: var(--text-accent); }
.carousel-card h3 { margin-bottom: var(--space-2); }
.badge { display: inline-block; margin: 0 0 var(--space-3); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--wovn-chartreuse); color: var(--wovn-ink); font-family: var(--font-label); font-weight: var(--weight-label); font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.carousel.is-3d { --card-w: 380px; position: relative; perspective: 1800px; touch-action: pan-y; }   /* vertical scroll stays native; horizontal swipes turn the ring */   /* height set by carousel.js from the tallest card */
.carousel.is-3d .carousel-ring { display: block; position: absolute; inset: 0 0 56px; transform-style: preserve-3d; transition: transform 900ms var(--ease-standard); }
.carousel.is-3d .carousel-card {
  position: absolute; top: 0; left: 50%; width: var(--card-w); margin-left: calc(var(--card-w) / -2);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: opacity 700ms var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.carousel.is-3d .carousel-card:hover { transform: none; }
.carousel.is-3d .carousel-card.is-front { box-shadow: var(--shadow-lift); }
.carousel.is-3d .carousel-controls { display: flex; justify-content: center; gap: var(--space-3); position: absolute; left: 0; right: 0; bottom: 0; }
.carousel-btn { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--border-hairline); background: var(--surface-card); color: var(--text-strong); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); }
.carousel-btn:hover { background: var(--surface-sunken); color: var(--text-accent); }
.carousel-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.carousel-btn .i-play { display: none; }
.carousel.is-paused .carousel-btn .i-play { display: block; }
.carousel.is-paused .carousel-btn .i-pause { display: none; }

/* ---- what changes: before / after cards + "yours to keep" strip ---- */
.ba-grid { margin-top: var(--space-8); grid-auto-rows: 1fr; }   /* equal-height cards, matching Real examples */
.ba-card h3 { margin-bottom: var(--space-5); }
.ba { margin: 0; padding: var(--space-4) 0; border-top: 1px solid var(--border-hairline); }
.ba-label { display: block; font-family: var(--font-label); font-weight: var(--weight-label); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: var(--space-1); }
.card p.before { color: var(--text-muted); }
.before .ba-label { color: var(--text-faint); }
.card p.after { color: var(--text-strong); padding-bottom: 0; }
.after .ba-label { color: var(--text-accent); }
.card-ink .ba { border-top-color: var(--surface-inverse-raised); }
.card-ink p.before { color: var(--text-on-inverse-muted); }
.card-ink p.after { color: var(--text-on-inverse); }
.card-ink .after .ba-label { color: var(--wovn-mint); }
.keep { margin-top: var(--space-12); padding-top: var(--space-6); border-top: var(--border-width-strong) solid var(--border-strong); }
.keep h3 { margin-bottom: var(--space-5); }
.keep-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.keep-list li { position: relative; padding-left: 30px; color: var(--text-body); }
.keep-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px;
  background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E874F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---- how we start ---- */
.phases { list-style: none; padding: 0; margin: var(--space-10) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); border-top: var(--border-width-strong) solid var(--border-strong); padding-top: var(--space-6); }
.phases h3 { margin-bottom: var(--space-2); }
.phases p { color: var(--text-body); margin: 0; }

/* ---- client story: pull-quote treatment, chartreuse rule is this view's spark ---- */
.story { font-family: var(--font-display); font-weight: var(--weight-display-light); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: var(--leading-snug); color: var(--text-strong); border-left: 3px solid var(--wovn-chartreuse); padding-left: var(--space-6); margin: var(--space-8) 0 0; }

/* ---- testimonials (hidden until SHOW_TESTIMONIALS) ---- */
.testimonial { margin: 0; }
.testimonial blockquote { margin: 0 0 var(--space-5); font-family: var(--font-display); font-style: italic; font-weight: var(--weight-display-light); font-size: var(--text-lead); line-height: var(--leading-snug); color: var(--text-strong); }
.testimonial figcaption { font-size: var(--text-sm); color: var(--text-muted); }
.testimonial figcaption strong { display: block; color: var(--text-strong); }

/* ---- ink section ---- */
.tone-ink .kicker { color: var(--text-on-inverse-accent); }   /* the one chartreuse spark in this view */
.tone-ink h2 { color: var(--text-on-inverse); }
.tone-ink .lead, .tone-ink .note { color: var(--text-on-inverse-muted); }
.tone-ink .note { margin-top: var(--space-8); }
.corner-circle { position: absolute; z-index: 0; width: 520px; height: 520px; border-radius: 50%; background: var(--wovn-green); opacity: .18; top: -200px; right: -160px; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fit-cols { margin-top: var(--space-12); }
/* Business-type tags: mono pills with a mint hairline */
.tags { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.tags li { font-family: var(--font-label); font-weight: var(--weight-label); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-on-inverse); border: 1px solid var(--wovn-mint); border-radius: var(--radius-pill); padding: 8px 14px; }
.fit-cols h3 { color: var(--text-on-inverse); margin-bottom: var(--space-4); }
.fit-list { list-style: none; padding: 0; margin: 0; }
.fit-list li { position: relative; padding: var(--space-4) 0 var(--space-4) 34px; border-top: 1px solid var(--surface-inverse-raised); }
/* Fit: Lucide "check" (stroke 1.6, rounded) in mint, inlined so no icon library is needed */
.is-fit li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--space-4) + 2px); width: 20px; height: 20px;
  background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FCF9C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.is-fit li { color: var(--text-on-inverse); }
.tone-ink .note a { color: var(--wovn-mint); }
.note-link { margin-left: 0.3em; }
.tone-ink .note a:hover { color: var(--text-on-inverse); }

/* ---- about ---- */
.about picture { display: block; }
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }   /* photo stacked above the note */
.about .headshot { border-radius: var(--radius-xl); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; width: 100%; max-width: 230px; }
.role { font-family: var(--font-label); font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
.bio { font-size: var(--text-lead); color: var(--text-body); max-width: 38em; }
.bio p { margin: 0 0 var(--space-4); }
.signoff { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-6) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--border-hairline); max-width: calc(var(--text-lead) * 38); }   /* same measure as the bio */
.signoff-name { font-family: var(--font-display); font-weight: var(--weight-display-medium); font-size: var(--text-h3); color: var(--text-strong); }

/* ---- steps ---- */
.steps { list-style: none; padding: 0; margin: var(--space-8) 0 0; }
.steps li { padding: var(--space-5) 0; border-top: 1px solid var(--border-hairline); font-size: var(--text-lead); color: var(--text-strong); }

/* ---- the thread (signature detail, option a) ---- */
.thread { position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; overflow: visible; }
.thread path { fill: none; stroke: var(--wovn-green); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Beacon at the thread's tip: solid mint core, ring pulses out and fades (part of the approved thread exception) */
.thread-knot { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.thread-knot.on { opacity: 1; }
.beacon-core { fill: var(--wovn-mint); }
.beacon-ring { fill: var(--wovn-mint); transform-box: fill-box; transform-origin: center; opacity: 0; }
.thread-knot.on .beacon-ring { animation: beacon-pulse 1.8s var(--ease-out-soft) infinite; }
@keyframes beacon-pulse { 0% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .thread-knot.on .beacon-ring { animation: none; } }

/* ---- responsive ---- */
@media (max-width: 900px) {
  section { padding: var(--space-16) 0; }
  .hero { padding: var(--space-12) 0 120px; }
  .cols-4, .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phases, .testimonial-grid, .cols-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .keep-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about .headshot { max-width: 160px; }
}
@media (max-width: 560px) {
  .carousel.is-3d { --card-w: 290px; }
  .carousel-ring { grid-template-columns: minmax(0, 1fr); }
  .cols-4, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .keep-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .words { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .lead, .bio, .steps li, .fit-list li { font-size: var(--text-base); }
}