/* ==========================================================================
   FYI: For Your Impact
   Design tokens and layout carried over from the approved design comp
   (design/fyi-hero-approved-comp.png).
   ========================================================================== */

:root {
  --ink: #171713;
  --paper: #f5f0e7;
  --cream: #fffaf1;
  --orange: #e7642a;
  --orange-soft: #f0b09a;
  --line: #cfc5b7;
  --muted: #6f695f;
  --dark: #1f241f;
  --hero-dark: #171713;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
  --nav-h: 84px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the sticky header. */
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

.wrap {
  width: min(1180px, 90vw);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 14px 20px;
  font-weight: 700;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 800;
  color: var(--orange);
}

.pill {
  display: inline-block;
  border: 1px solid var(--ink);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 700;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.pill:hover {
  background: var(--ink);
  color: var(--cream);
}

.pill.fill {
  background: var(--ink);
  color: var(--cream);
}

.pill.fill:hover {
  background: var(--orange);
  border-color: var(--orange);
}

.pill.on-dark {
  border-color: rgba(255, 255, 255, 0.85);
  color: var(--cream);
}

.pill.on-dark:hover {
  background: var(--cream);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Header / navigation — overlays the hero, turns solid once scrolled past it
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px solid transparent;
}

.site-header .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: var(--nav-h);
}

.brand {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 28px;
  color: var(--cream);
  transition: color 0.25s ease;
}

.brand .dot {
  color: var(--orange);
}

.nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
}

.nav-links a:not(.pill) {
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-links a:not(.pill):hover {
  color: #fff;
  border-bottom-color: var(--orange);
}

/* Solid state, applied by JS once the hero has scrolled away. */
.site-header.is-stuck {
  background: var(--paper);
  border-bottom-color: var(--line);
}

.site-header.is-stuck .brand {
  color: var(--ink);
}

.site-header.is-stuck .nav-links a:not(.pill) {
  color: var(--ink);
}

.site-header.is-stuck .pill.on-dark {
  border-color: var(--ink);
  color: var(--ink);
}

.site-header.is-stuck .pill.on-dark:hover {
  background: var(--ink);
  color: var(--cream);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--cream);
  padding: 10px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
}

.site-header.is-stuck .nav-toggle {
  border-color: var(--line);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--hero-dark);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  min-height: 640px;
  /* Pull the hero up under the transparent sticky header. */
  margin-top: calc(var(--nav-h) * -1);
}

.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 64%;
  z-index: 0;
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 44% 26%;
}

/* Fades the photograph's left edge into the flat dark panel so the two read
   as one continuous image, exactly as in the approved comp. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #171713 0%,
    rgba(23, 23, 19, 0.95) 16%,
    rgba(23, 23, 19, 0.62) 44%,
    rgba(23, 23, 19, 0.16) 76%,
    rgba(23, 23, 19, 0) 100%
  );
}

.hero-inner {
  position: relative;
  z-index: 1;
  padding: calc(var(--nav-h) + 76px) 0 100px;
  max-width: 680px;
}

.hero .eyebrow {
  color: var(--orange-soft);
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(50px, 6.3vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 500;
  margin: 18px 0 24px;
}

.hero-lead {
  font-size: 19px;
  line-height: 1.55;
  max-width: 505px;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.hero .actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.hero-btn {
  display: inline-block;
  padding: 15px 24px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid transparent;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hero-btn .arrow {
  margin-left: 10px;
}

.hero-btn.solid {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}

.hero-btn.solid:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

.hero-btn.outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.8);
}

.hero-btn.outline:hover {
  background: #fff;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Ribbon — the brand throughline from the comp
   -------------------------------------------------------------------------- */

.ribbon {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
}

.ribbon p {
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(21px, 3vw, 36px);
  line-height: 1.25;
}

.ribbon .arrow {
  color: var(--orange);
  margin: 0 0.35em;
}

/* --------------------------------------------------------------------------
   Generic sections
   -------------------------------------------------------------------------- */

.section {
  padding: 95px 0;
  border-bottom: 1px solid var(--line);
}

.section-head {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  gap: 40px;
  margin-bottom: 55px;
}

.section h2 {
  font-family: var(--serif);
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 500;
  line-height: 1;
  margin: 10px 0 0;
}

.section-head > p:not(.eyebrow) {
  font-size: 19px;
  max-width: 650px;
  margin: 0;
  color: var(--muted);
}

.lead {
  font-size: 21px;
  max-width: 720px;
  color: #4f4a43;
}

.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* Two doors */

.doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.door {
  padding: 42px;
  border: 1px solid var(--line);
  background: var(--cream);
  min-height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
}

.door.dark {
  background: var(--dark);
  color: var(--cream);
  border-color: var(--dark);
}

.door h3 {
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 500;
  margin: 12px 0;
}

.door p {
  font-size: 18px;
  max-width: 460px;
}

.door .num {
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 800;
  margin: 0;
}

/* Momentum Method */

.method {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.step {
  padding: 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: 260px;
  display: flex;
  flex-direction: column;
}

.step .n {
  color: var(--orange);
  font-weight: 800;
  margin: 0 0 55px;
}

.step b {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
}

.step p {
  margin-bottom: 0;
}

/* Momentum Audit */

.offer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.offer h3 {
  font-family: var(--serif);
  font-size: clamp(38px, 4.4vw, 52px);
  font-weight: 500;
  margin: 10px 0 20px;
}

.clean {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.clean li {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.secondary {
  margin-top: 70px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.secondary h3 {
  font-family: var(--serif);
  font-size: 38px;
  font-weight: 500;
  margin: 10px 0 0;
}

.text-link {
  font-weight: 700;
  border-bottom: 1px solid var(--orange);
  padding-bottom: 2px;
}

.text-link:hover {
  color: var(--orange);
}

/* Selected work */

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.case {
  border: 1px solid var(--line);
  background: var(--cream);
  padding: 34px;
  display: flex;
  flex-direction: column;
  min-height: 430px;
}

.case .tag {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 800;
  margin: 0;
}

.case h3 {
  font-family: var(--serif);
  font-size: 32px;
  line-height: 1.05;
  font-weight: 500;
  margin: 14px 0 18px;
}

.case p {
  color: var(--muted);
}

.case dl {
  margin: auto 0 0;
  border-top: 1px solid var(--line);
}

.case dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
  margin-top: 18px;
}

.case dd {
  margin: 5px 0 0;
  font-size: 17px;
}

.case dd.impact {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  margin-top: 10px;
}

.proof-note {
  margin-top: 28px;
  color: var(--muted);
  font-size: 14px;
}

/* Pull quote */

.quote {
  background: var(--dark);
  color: var(--cream);
  padding: 80px 0;
  border-top: 5px solid var(--orange);
}

.quote blockquote {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 70px);
  line-height: 1.05;
  margin: 0;
  max-width: 980px;
}

/* About */

.about {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 70px;
}

.about p {
  font-size: 19px;
}

.about p:first-child {
  margin-top: 0;
}

.small-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 25px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.contact {
  background: var(--cream);
}

.inquiry-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 35px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  color: inherit;
  border-radius: 0;
}

textarea {
  min-height: 130px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink);
}

.hp {
  position: absolute;
  left: -9999px;
}

button {
  border: 1px solid var(--orange);
  background: var(--orange);
  color: #fff;
  padding: 17px 24px;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

button:hover {
  background: var(--ink);
  border-color: var(--ink);
}

.form-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer {
  padding: 35px 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Simple content pages (thank-you, 404)
   -------------------------------------------------------------------------- */

.panel {
  min-height: 78vh;
  display: flex;
  align-items: center;
  padding: 90px 0;
}

.panel h1 {
  font-family: var(--serif);
  font-size: clamp(44px, 7vw, 86px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 18px 0 22px;
}

.panel p {
  font-size: 20px;
  max-width: 560px;
  color: #4f4a43;
}

/* Eyebrows sit inside containers that style bare <p> elements (.about p,
   .section-head p). Restore their type scale regardless of context. */
p.eyebrow {
  font-size: 12px;
  color: var(--orange);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
  .case-grid {
    grid-template-columns: 1fr;
  }

  .method {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 860px) {
  :root {
    --nav-h: 72px;
  }

  /* The header is no longer over a dark photo edge, so keep it solid. */
  .site-header {
    background: var(--hero-dark);
  }

  .site-header.is-stuck {
    background: var(--paper);
  }

  .nav-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    padding: 8px 5vw 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a:not(.pill) {
    color: var(--cream);
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .site-header.is-stuck .nav-links a:not(.pill) {
    color: var(--cream);
  }

  .nav-links .pill {
    margin-top: 18px;
    text-align: center;
    border-color: rgba(255, 255, 255, 0.85);
    color: var(--cream);
  }

  .site-header.is-stuck .nav-links .pill.on-dark {
    border-color: rgba(255, 255, 255, 0.85);
    color: var(--cream);
  }

  /* The thank-you and 404 pages carry a single always-visible link instead of
     the collapsible menu, so they need no toggle button. */
  .nav-links--simple {
    display: flex;
    position: static;
    flex-direction: row;
    background: none;
    padding: 0;
    border-bottom: 0;
  }

  .nav-links--simple .pill,
  .site-header.is-stuck .nav-links--simple .pill.on-dark {
    margin-top: 0;
    border-color: var(--ink);
    color: var(--ink);
  }

  .section-head,
  .offer,
  .secondary,
  .about,
  .doors {
    grid-template-columns: 1fr;
  }

  .secondary,
  .about {
    gap: 34px;
  }

  .section {
    padding: 70px 0;
  }

  .door {
    min-height: 0;
    padding: 34px;
  }

  .case {
    min-height: 0;
  }

  .inquiry-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .method {
    grid-template-columns: 1fr;
  }

  .step {
    min-height: 0;
  }

  .step .n {
    margin-bottom: 28px;
  }

  .hero h1 {
    font-size: 44px;
  }

  .hero .actions .hero-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* FYI interactive experience additions */
.path-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.path-card{appearance:none;text-align:left;color:var(--ink);padding:36px;border:1px solid var(--line);background:var(--cream);min-height:280px;cursor:pointer;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.path-card:nth-child(2){background:var(--dark);color:var(--cream);border-color:var(--dark)}.path-card h3{font-family:Georgia,serif;font-size:38px;font-weight:500;line-height:1.05;margin:14px 0}.path-card p{font-size:17px}.path-card:hover,.path-card.is-active{transform:translateY(-4px);border-color:var(--orange);box-shadow:0 14px 28px rgba(23,23,19,.09)}.path-result{display:none;margin-top:18px;padding:34px;background:var(--dark);color:var(--cream);grid-template-columns:1fr auto;gap:30px;align-items:center}.path-result.is-visible{display:grid}.path-result h3{font-family:Georgia,serif;font-size:34px;font-weight:500;margin:0 0 8px}.path-result p{margin:0;color:#dedbd3}

.network-section{background:var(--cream)}.network-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:65px;align-items:center}.network-copy h2{font-family:Georgia,serif;font-size:clamp(42px,5vw,66px);font-weight:500;line-height:1;margin:10px 0 24px}.network-note{min-height:88px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted)}.network-map{position:relative;min-height:500px}.network-map:before{content:"";position:absolute;inset:8%;border:1px solid var(--line);border-radius:50%}.network-node{position:absolute;width:128px;height:128px;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-weight:800;cursor:pointer;transition:transform .2s ease,background .2s ease,color .2s ease}.network-node:hover,.network-node.is-active{background:var(--dark);color:var(--cream);border-color:var(--dark);transform:scale(1.07)}.network-node.center{width:155px;height:155px;left:37%;top:35%;background:var(--dark);color:var(--cream);font-family:Georgia,serif;font-size:31px}.network-node:nth-child(2){left:3%;top:5%}.network-node:nth-child(3){right:2%;top:2%}.network-node:nth-child(4){left:0;bottom:4%}.network-node:nth-child(5){right:0;bottom:2%}

.momentum-check{border:1px solid var(--line);background:var(--cream);padding:clamp(28px,5vw,58px)}.quiz-progress{height:5px;background:#ded6c9;margin-bottom:42px}.quiz-progress span{display:block;width:20%;height:100%;background:var(--orange);transition:width .25s ease}.quiz-question{display:none}.quiz-question.is-active{display:block}.quiz-question h3{font-family:Georgia,serif;font-size:clamp(32px,4vw,49px);font-weight:500;line-height:1.1;margin:12px 0 28px;max-width:880px}.quiz-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quiz-choice{padding:17px;border:1px solid var(--line);background:white;color:var(--ink);font-weight:800;cursor:pointer}.quiz-choice:hover{border-color:var(--orange)}.quiz-result{display:none}.quiz-result.is-visible{display:block}.quiz-score{font-family:Georgia,serif;font-size:68px;line-height:1;color:var(--orange);margin:12px 0}.quiz-result h3{font-family:Georgia,serif;font-size:42px;font-weight:500;margin:10px 0}

.monthly-feature{display:grid;grid-template-columns:.75fr 1.25fr;border:1px solid var(--line);background:var(--cream)}.feature-mark{background:var(--dark);color:var(--cream);min-height:370px;padding:42px;display:flex;flex-direction:column;justify-content:space-between}.feature-mark strong{font-family:Georgia,serif;font-size:clamp(60px,8vw,108px);font-weight:500;line-height:.8;color:#e99169}.feature-copy{padding:clamp(38px,6vw,70px)}.feature-copy h3{font-family:Georgia,serif;font-size:clamp(40px,5vw,60px);font-weight:500;line-height:1;margin:12px 0 20px}.feature-copy>p{font-size:18px;color:var(--muted)}

.continuation{margin-top:70px;padding-top:45px;border-top:1px solid var(--line)}.continuation-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:50px;margin-bottom:28px}.continuation-head h3{font-family:Georgia,serif;font-size:45px;font-weight:500;line-height:1;margin:10px 0}.continuation-head>p{font-size:18px;color:var(--muted)}.engagement-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.engagement{border:1px solid var(--line);background:var(--cream)}.engagement summary{list-style:none;padding:28px 32px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px}.engagement summary::-webkit-details-marker{display:none}.engagement summary:after{content:"+";font-size:28px;color:var(--orange)}.engagement[open] summary:after{content:"−"}.engagement summary h4{font-family:Georgia,serif;font-size:31px;font-weight:500;line-height:1;margin:7px 0}.engagement-body{padding:0 32px 32px;border-top:1px solid var(--line)}.engagement-body h5{font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin:23px 0 4px}.engagement-body p{margin:4px 0;color:var(--muted)}

.case-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}.case-tab{padding:12px 18px;border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:800;cursor:pointer}.case-tab.is-active{background:var(--dark);border-color:var(--dark);color:var(--cream)}.case-grid.is-tabbed{display:block}.case-grid.is-tabbed .case{display:none;min-height:auto}.case-grid.is-tabbed .case.is-active{display:block}.case-grid.is-tabbed .case dl{margin-top:28px}.case-grid.is-tabbed .case h3{font-size:42px}

dialog.recommend-dialog{width:min(900px,94vw);max-height:90vh;border:0;padding:0;background:var(--paper);color:var(--ink);box-shadow:0 30px 90px rgba(0,0,0,.45)}dialog.recommend-dialog::backdrop{background:rgba(23,23,19,.72)}.dialog-head{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;background:var(--dark);color:var(--cream);padding:23px 32px}.dialog-head h2{font-family:Georgia,serif;font-size:34px;font-weight:500;margin:0}.dialog-close{width:40px;height:40px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:transparent;color:white;font-size:24px;cursor:pointer}.dialog-body{padding:30px 32px 42px}.recommend-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px}.recommend-form .full{grid-column:1/-1}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:8px}.choice-label{display:flex;align-items:flex-start;gap:8px;font-weight:400;text-transform:none;letter-spacing:0}.choice-label input{width:auto;margin-top:4px}.conditional-field{display:none}.conditional-field.is-visible{display:block}.fine-print{font-size:12px;color:var(--muted)}

@media(max-width:860px){.path-grid,.network-layout,.continuation-head,.engagement-grid,.monthly-feature{grid-template-columns:1fr}.path-card{min-height:auto}.path-result.is-visible{grid-template-columns:1fr}.network-map{min-height:430px}.quiz-choices{grid-template-columns:1fr}.feature-mark{min-height:250px}.case-grid.is-tabbed .case.is-active{grid-template-columns:1fr}.recommend-form{grid-template-columns:1fr}.recommend-form .full{grid-column:1}.choice-grid{grid-template-columns:1fr}}
@media(max-width:500px){.network-node{width:100px;height:100px;font-size:12px}.network-node.center{width:125px;height:125px;left:31%;font-size:25px}.dialog-body{padding:24px 18px}.dialog-head{padding:20px 18px}}

/* Refinements from live review */
:root{--muted:#5c574f}
.section-head>p,.feature-copy>p,.engagement-body p,.case p,.contact p{color:var(--muted)}

.path-result{position:relative;min-height:175px;padding:38px 42px;border:2px solid var(--orange);border-left:10px solid var(--orange);box-shadow:0 18px 40px rgba(23,23,19,.18)}.path-result.is-visible{animation:path-reveal .3s ease both}.path-result-label{margin:0 0 7px!important;color:#f29a72!important;text-transform:uppercase;letter-spacing:.16em;font-size:11px!important;font-weight:800}.path-result h3{font-size:42px;line-height:1.05}.path-result>div>p:last-child{font-size:18px;max-width:800px}.path-result .pill{background:var(--cream);color:var(--ink);border-color:var(--cream)}
@keyframes path-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.network-section{background:var(--dark);color:var(--cream);overflow:hidden}.network-section .network-copy p{color:#e4e0d7}.network-section .network-note{color:#f0ece3;border-color:rgba(255,255,255,.22);font-size:17px}.network-map:before{border-color:rgba(255,255,255,.28);animation:orbit-turn 26s linear infinite}.network-map:after{content:"";position:absolute;inset:18% 3%;border:1px solid rgba(232,100,42,.28);border-radius:50%;animation:orbit-turn-reverse 32s linear infinite}.network-node{z-index:1;border-color:rgba(255,255,255,.32);background:var(--dark);color:var(--cream);animation:node-drift 4.8s ease-in-out infinite alternate}.network-node.center{z-index:2;background:var(--cream);color:var(--ink);border-color:var(--cream);animation:center-breathe 4s ease-in-out infinite}.network-node:nth-child(2){animation-delay:-.8s}.network-node:nth-child(3){animation-delay:-2s}.network-node:nth-child(4){animation-delay:-3.2s}.network-node:nth-child(5){animation-delay:-1.5s}.network-node:hover,.network-node.is-active{background:var(--orange);border-color:var(--orange);color:white;animation-play-state:paused}.network-node.center:hover,.network-node.center.is-active{background:var(--cream);color:var(--ink);border-color:var(--orange)}
@keyframes orbit-turn{from{transform:rotate(0deg) scale(.99)}to{transform:rotate(360deg) scale(.99)}}@keyframes orbit-turn-reverse{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}@keyframes node-drift{from{translate:0 -5px}to{translate:0 7px}}@keyframes center-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}

.feature-mark{background:var(--orange);color:white}.feature-mark strong{color:white}.feature-mark .eyebrow{color:white}.monthly-feature{box-shadow:0 12px 35px rgba(23,23,19,.06)}

.engagement-grid{align-items:start}.engagement{transition:border-color .2s ease,box-shadow .2s ease}.engagement[open]{border-color:var(--orange);box-shadow:0 12px 28px rgba(23,23,19,.08)}.engagement summary{min-height:170px}.engagement-preview{margin:12px 0 0;color:var(--muted);font-size:16px}.engagement-body{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:24px}.engagement-body h5{margin-top:0}.engagement-body .scope-note{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;margin-top:0}.continuation-head{margin-bottom:20px}.continuation-head>p{max-width:690px}.continuation .actions{margin-top:25px}

.quiz-privacy{margin:24px 0 0;color:var(--muted);font-size:13px;max-width:780px}.quiz-result{padding:34px;border:2px solid var(--orange);background:white}.quiz-result .quiz-score{font-size:50px}.quiz-result>p{font-size:18px;max-width:780px}

.quote-motion{overflow:hidden}.quote-motion blockquote{display:flex;flex-direction:column;gap:6px}.quote-motion blockquote span{display:block;opacity:.32;transform:translateY(14px);transition:opacity .75s ease,transform .75s ease}.quote-motion blockquote em{font-style:italic;color:#f09a72}.quote-motion blockquote strong{font-weight:500;color:#f09a72}.quote-motion.is-visible blockquote span{opacity:1;transform:translateY(0)}.quote-motion.is-visible blockquote span:nth-child(2){transition-delay:.18s}.quote-motion.is-visible blockquote span:nth-child(3){transition-delay:.36s}.quote-motion.is-visible blockquote span:nth-child(4){transition-delay:.54s}

@media(max-width:860px){.path-result{padding:30px 26px}.path-result h3{font-size:34px}.engagement-body{grid-template-columns:1fr;gap:10px}.engagement-body .scope-note{grid-column:1}.quote-motion blockquote{font-size:clamp(34px,8vw,52px)}}

.work-showcase{display:grid;grid-template-columns:310px 1fr;border:1px solid var(--line);background:var(--cream)}.work-tabs{border-right:1px solid var(--line)}.work-tab{width:100%;display:grid;grid-template-columns:36px 1fr;text-align:left;gap:4px 12px;padding:28px 24px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink)}.work-tab:hover{background:#eee6da;border-color:var(--line)}.work-tab.is-active{background:var(--dark);color:var(--cream);border-color:var(--dark)}.work-tab span{grid-row:1/3;color:var(--orange);font-size:12px;letter-spacing:.14em}.work-tab strong{font-family:Georgia,serif;font-size:21px;font-weight:500;line-height:1.05}.work-tab small{font-size:10px;text-transform:uppercase;letter-spacing:.12em;opacity:.72}.work-panel{display:none;padding:clamp(35px,5vw,65px)}.work-panel.is-active{display:block;animation:case-in .3s ease both}.work-panel h3{font-family:Georgia,serif;font-size:clamp(38px,4.5vw,58px);font-weight:500;line-height:1.02;max-width:850px;margin:12px 0 38px}.case-story{display:grid;grid-template-columns:1fr 1fr;gap:36px;padding:28px 0;border-top:1px solid var(--line)}.case-story>div+div{border-left:1px solid var(--line);padding-left:36px}.story-label{margin:0 0 10px!important;font-size:11px!important;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:var(--orange)!important}.case-story p{font-size:17px;color:var(--muted)}.impact-strip{display:grid;grid-template-columns:130px repeat(3,1fr);gap:24px;align-items:end;margin-top:18px;padding:30px;background:var(--dark);color:var(--cream)}.impact-strip .story-label{align-self:start}.impact-strip div{display:flex;flex-direction:column}.impact-strip strong{font-family:Georgia,serif;font-size:44px;font-weight:500;line-height:1;color:#f09a72}.impact-strip span{font-size:13px;margin-top:7px;color:#eee9df}.impact-strip.single{grid-template-columns:130px 1fr}.impact-strip.single strong{font-size:55px}@keyframes case-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}

@media(max-width:860px){.work-showcase{grid-template-columns:1fr}.work-tabs{display:grid;grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:1px solid var(--line)}.work-tab{grid-template-columns:1fr;padding:18px}.work-tab span{grid-row:auto}.work-tab small{display:none}.case-story{grid-template-columns:1fr;gap:18px}.case-story>div+div{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.impact-strip,.impact-strip.single{grid-template-columns:1fr}.impact-strip{gap:16px}.impact-strip>div{border-top:1px solid rgba(255,255,255,.18);padding-top:14px}}
@media(max-width:520px){.work-tabs{grid-template-columns:1fr}.work-tab{grid-template-columns:30px 1fr}.work-tab span{grid-row:auto}.work-tab small{display:block;grid-column:2}.work-panel{padding:30px 22px}.work-panel h3{font-size:36px}}

.restored-cases .case{min-height:520px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.restored-cases .case:hover{transform:translateY(-6px);border-color:var(--orange);box-shadow:0 18px 38px rgba(23,23,19,.1)}.restored-cases .case h3{font-size:32px}.restored-cases .case p{font-size:16px}.restored-cases .case dd.impact{color:var(--ink)!important;font-size:20px!important;line-height:1.35}.restored-cases .case dd.impact strong{font-family:Georgia,serif;font-size:34px;font-weight:500;color:var(--orange)}
@media(max-width:980px){.restored-cases .case{min-height:0}}

/* Feature FAQ and safe interactive states */
.feature-faq-section{background:#eee7db}.faq-head{margin-bottom:30px}.faq-head h2{max-width:650px}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}.faq-item{border:1px solid #cfc5b7;background:var(--cream);transition:border-color .2s ease,box-shadow .2s ease}.faq-item[open]{border-color:var(--orange);box-shadow:0 10px 26px rgba(23,23,19,.07)}.faq-item summary{list-style:none;min-height:84px;padding:24px 60px 24px 26px;position:relative;display:flex;align-items:center;font-family:Georgia,serif;font-size:23px;line-height:1.15;cursor:pointer;color:var(--ink);background:var(--cream)}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";position:absolute;right:25px;top:50%;transform:translateY(-50%);font-family:Arial,sans-serif;font-size:27px;color:var(--orange)}.faq-item[open] summary:after{content:"−"}.faq-item summary:hover{background:#f6ede2;color:var(--ink)}.faq-answer{padding:0 26px 26px;border-top:1px solid var(--line)}.faq-answer p{margin:20px 0 0;color:var(--muted);font-size:16px}.faq-cta{margin-top:22px;padding:28px 30px;background:var(--dark);color:var(--cream);display:flex;align-items:center;justify-content:space-between;gap:24px}.faq-cta p{margin:0;font-size:17px}.faq-cta .pill:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}

/* The generic button hover must not turn interactive cards solid black. */
.path-card:hover,.path-card.is-active{background:#f6ede2;color:var(--ink);border-color:var(--orange)}.path-card:nth-child(2):hover,.path-card:nth-child(2).is-active{background:#f6ede2;color:var(--ink)}.path-card:hover .eyebrow,.path-card.is-active .eyebrow{color:var(--orange)}
.quiz-choice:hover,.quiz-choice:focus-visible{background:#fff4ec;color:var(--ink);border-color:var(--orange)}
.network-node:hover,.network-node.is-active{background:var(--orange);color:#fff;border-color:var(--orange)}
.engagement summary:hover{background:#f6ede2;color:var(--ink)}

@media(max-width:860px){.faq-grid{grid-template-columns:1fr}.faq-cta{align-items:flex-start;flex-direction:column}.faq-item summary{font-size:21px}}

/* Make the Momentum Method feel like a proprietary visual framework. */
.method{gap:12px;border:0}.step{position:relative;overflow:hidden;border:0;min-height:330px;padding:28px;transition:transform .22s ease,box-shadow .22s ease}.step:hover{transform:translateY(-6px);box-shadow:0 18px 35px rgba(23,23,19,.13)}.step .n{margin:22px 0 42px;font-size:12px;letter-spacing:.14em}.step p{max-width:240px}.step-mark{height:68px;display:flex;align-items:center;gap:7px}.step-mark span{display:block}.step-audit{background:#171713;color:#fff8ee}.step-audit .n{color:#f09a72}.step-audit .step-mark{width:68px;border:2px solid #f09a72;border-radius:50%;position:relative}.step-audit .step-mark:before{content:"";position:absolute;width:25px;height:2px;background:#f09a72;right:-17px;bottom:7px;transform:rotate(48deg)}.step-audit .step-mark span{width:20px;height:20px;border:2px solid #fff8ee;border-radius:50%;margin:auto}.step-align{background:#e99169;color:#171713}.step-align .n{color:#171713}.step-align .step-mark span{width:48px;height:48px;border:2px solid #171713;border-radius:50%;margin-right:-24px}.step-activate{background:#264238;color:#fff8ee}.step-activate .n{color:#f2a17b}.step-activate .step-mark{align-items:flex-end}.step-activate .step-mark span{width:14px;background:#f2a17b}.step-activate .step-mark span:nth-child(1){height:24px}.step-activate .step-mark span:nth-child(2){height:45px}.step-activate .step-mark span:nth-child(3){height:66px}.step-scale{background:#eee0cb;color:#171713}.step-scale .n{color:#bd5427}.step-scale .step-mark{width:68px;height:68px;border:2px solid #bd5427;border-radius:50%;position:relative}.step-scale .step-mark:before,.step-scale .step-mark:after{content:"";position:absolute;border:1px solid #bd5427;border-radius:50%}.step-scale .step-mark:before{inset:8px}.step-scale .step-mark:after{inset:17px}.step-scale .step-mark span{width:7px;height:7px;background:#bd5427;border-radius:50%;margin:auto}

/* Branded visuals add recognition without relying on generic stock imagery. */
.restored-cases .case{padding:0;overflow:hidden}.restored-cases .case>.tag,.restored-cases .case>h3,.restored-cases .case>p,.restored-cases .case>dl{margin-left:30px;margin-right:30px}.restored-cases .case>dl{margin-bottom:32px}.case-visual{height:165px;margin-bottom:28px;position:relative;overflow:hidden}.visual-initials{position:absolute;left:24px;bottom:20px;font-family:Georgia,serif;font-size:25px;letter-spacing:.06em;z-index:2}.visual-csg{background:#1e3932;color:#fff8ee}.system-line{position:absolute;height:1px;background:rgba(255,255,255,.45);transform-origin:left center}.line-one{width:250px;left:55px;top:42px;transform:rotate(17deg)}.line-two{width:235px;left:90px;top:115px;transform:rotate(-24deg)}.system-dot{position:absolute;width:34px;height:34px;border:2px solid #f09a72;border-radius:50%;background:#1e3932}.dot-one{right:38px;top:25px}.dot-two{right:112px;top:90px}.dot-three{left:140px;top:40px}.visual-evolve{background:#e99169;color:#171713}.community-ring{position:absolute;border:2px solid rgba(23,23,19,.7);border-radius:50%}.ring-one{width:105px;height:105px;right:25px;top:18px}.ring-two{width:70px;height:70px;right:101px;top:59px}.ring-three{width:42px;height:42px;right:49px;top:94px;background:#fff1df}.visual-touchstone{background:#171713;color:#fff8ee}.growth-bar{position:absolute;bottom:0;width:35px;background:#f09a72}.bar-one{height:32px;right:170px}.bar-two{height:59px;right:125px}.bar-three{height:92px;right:80px}.bar-four{height:130px;right:35px}.portfolio-link{margin-top:30px;padding:30px 34px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:25px;background:#fff8ee}.portfolio-link h3{font-family:Georgia,serif;font-size:34px;font-weight:500;margin:7px 0 0}

@media(max-width:980px){.method{grid-template-columns:repeat(2,1fr)}.step{min-height:300px}.portfolio-link{align-items:flex-start;flex-direction:column}}
@media(max-width:520px){.method{grid-template-columns:1fr}.step{min-height:280px}.case-visual{height:145px}.portfolio-link{padding:26px 22px}}

/* Conversion path: clearer paid entry without flattening the FYI editorial identity. */
.hero-note{margin-top:18px!important;font-size:13px!important;letter-spacing:.02em;color:rgba(255,255,255,.82)!important}
.clarity-section{background:#fff8ee;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.friction-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--paper)}
.friction-grid article{padding:34px 30px;min-height:285px}
.friction-grid article+article{border-left:1px solid var(--line)}
.friction-grid span,.audit-process span{display:block;margin-bottom:38px;color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.14em}
.friction-grid h3{font-family:Georgia,serif;font-size:29px;font-weight:500;line-height:1.08;margin:0 0 18px}
.friction-grid p{margin:0;color:var(--muted);font-size:16px}
.fit-note{margin-top:18px;padding:24px 28px;background:var(--dark);color:var(--cream);font-size:17px;line-height:1.55}
.result-kicker{display:flex;align-items:center;justify-content:space-between;gap:20px}
.result-kicker .eyebrow{margin:0}
.result-kicker span{padding:8px 13px;background:var(--dark);color:var(--cream);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.result-next{margin:26px 0;padding:22px 24px;border-left:5px solid var(--orange);background:#f7eee2}
.result-next strong{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.result-next p{margin:0!important;font-size:16px!important;color:var(--muted)}
.audit-process{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;border:1px solid var(--line);background:#eee7db}
.audit-process>div{padding:30px}
.audit-process>div+div{border-left:1px solid #cfc5b7}
.audit-process span{margin-bottom:22px}
.audit-process strong{display:block;font-family:Georgia,serif;font-size:25px;font-weight:500;margin-bottom:10px}
.audit-process p{margin:0;color:var(--muted);font-size:15px}
.paid-faq-section{background:#e7ddcd}

@media(max-width:860px){
  .friction-grid,.audit-process{grid-template-columns:1fr}
  .friction-grid article{min-height:0}
  .friction-grid article+article,.audit-process>div+div{border-left:0;border-top:1px solid var(--line)}
  .friction-grid span{margin-bottom:22px}
}

/* FYI-first hero: the method leads visually, while founder identity stays in supporting proof. */
.hero-system{position:absolute;inset:0 0 0 auto;width:57%;overflow:hidden;z-index:0;background:radial-gradient(circle at 54% 48%,rgba(233,145,105,.12),transparent 31%)}
.hero-system:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#171713 0%,rgba(23,23,19,.84) 13%,rgba(23,23,19,.16) 52%,rgba(23,23,19,0) 100%);pointer-events:none}
.hero-orbit{position:absolute;border:1px solid rgba(255,248,238,.34);border-radius:50%;left:54%;top:50%;transform:translate(-50%,-50%)}
.hero-orbit-one{width:430px;height:430px;animation:hero-orbit-spin 30s linear infinite}
.hero-orbit-two{width:610px;height:610px;border-color:rgba(233,145,105,.44);animation:hero-orbit-spin-reverse 38s linear infinite}
.hero-core{position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);width:154px;height:154px;border-radius:50%;display:grid;place-items:center;background:var(--cream);color:var(--ink);font-family:Georgia,serif;font-size:44px;z-index:2;box-shadow:0 0 0 12px rgba(255,248,238,.06)}
.hero-core span{color:var(--orange)}
.hero-signal{position:absolute;z-index:2;padding:10px 15px;border:1px solid rgba(255,248,238,.58);background:rgba(23,23,19,.82);color:var(--cream);font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;backdrop-filter:blur(6px)}
.signal-a{left:21%;top:20%}.signal-b{right:8%;top:25%}.signal-c{left:16%;bottom:20%}.signal-d{right:11%;bottom:16%}
@keyframes hero-orbit-spin{from{rotate:0deg}to{rotate:360deg}}@keyframes hero-orbit-spin-reverse{from{rotate:360deg}to{rotate:0deg}}

@media(max-width:860px){
  .hero-system{position:relative;width:100%;height:390px;inset:auto;margin-top:var(--nav-h);background:radial-gradient(circle at 50% 50%,rgba(233,145,105,.14),transparent 38%)}
  .hero-system:after{background:linear-gradient(180deg,rgba(23,23,19,0) 55%,#171713 100%)}
  .hero-orbit{left:50%}.hero-orbit-one{width:270px;height:270px}.hero-orbit-two{width:390px;height:390px}
  .hero-core{left:50%;width:126px;height:126px;font-size:37px}
  .signal-a{left:8%;top:15%}.signal-b{right:6%;top:20%}.signal-c{left:7%;bottom:14%}.signal-d{right:8%;bottom:12%}
}

.hero-agency-visual{position:absolute;inset:0 0 0 auto;width:68%;z-index:0;overflow:hidden}
.hero-agency-visual img{display:block;width:100%;height:100%;object-fit:cover;object-position:center right}
.hero-agency-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#171713 0%,rgba(23,23,19,.94) 15%,rgba(23,23,19,.58) 42%,rgba(23,23,19,.08) 76%,rgba(23,23,19,0) 100%)}

/* Narrow desktop and tablet: the copy column and the photo compete for the
   same space, so the panel narrows and the scrim carries further right to
   keep the headline sitting on flat dark. */
@media(min-width:861px) and (max-width:1080px){
  .hero-agency-visual{width:60%}
  .hero-agency-visual:after{background:linear-gradient(90deg,#171713 0%,rgba(23,23,19,.96) 22%,rgba(23,23,19,.74) 52%,rgba(23,23,19,.22) 82%,rgba(23,23,19,0) 100%)}
}

/* Below 860px the photo stays behind the copy as one full-bleed panel rather
   than a separate slab stacked above it. The header keeps overlaying the hero
   at this width too, so .hero keeps its base negative margin-top everywhere
   and the copy padding clears --nav-h itself. */
@media(max-width:860px){
  .hero-agency-visual{position:absolute;inset:0;width:100%;height:auto;margin-top:0}
  .hero-agency-visual img{object-position:62% 55%}
  .hero-agency-visual:after{background:linear-gradient(180deg,rgba(23,23,19,.93) 0%,rgba(23,23,19,.88) 40%,rgba(23,23,19,.7) 72%,rgba(23,23,19,.74) 86%,#171713 100%)}
  .hero-inner{padding:calc(var(--nav-h) + 40px) 0 84px;max-width:none}
}