/* ==========================================================================
   ORGOOK — Design System
   Founder-Powered → System-Powered → Institution-Ready
   ========================================================================== */

/* -------------------- Tokens -------------------- */
:root{
  /* Brand palette — ORGOOK */
  --white:      #FFFFFF;
  --offwhite:   #F7F7F4;
  --charcoal:   #171C19;
  --grey:       #6B7280;
  --grey-light: #E5E7E5;

  --emerald:    #003020;  /* Primary — logo, headings accent, nav, dark sections, primary buttons, footer, diagrams */
  --forest:     #006040;  /* Secondary — hover states, secondary backgrounds, cards, framework/interactive accents */
  --gold:       #B08030;  /* Signature accent — use sparingly: premium highlights, numbers, dividers, CTA accents */
  --gold-light: #D4A84F;  /* Brighter gold for highlights */
  --soft-gold:  #E8D5A8;  /* Subtle backgrounds behind strategic/insight content */

  /* Legacy variable names kept so every existing component maps onto the new
     brand palette without needing to touch each call site individually. */
  --black:      var(--emerald);
  --blue:       var(--emerald);
  --blue-dim:   #00251A;
  --purple:     var(--forest);
  --orange:     var(--gold);
  --green:      var(--forest);
  --grey-mist:  var(--offwhite);

  /* Structural surfaces derived from base neutrals only */
  --paper:   #FFFFFF;
  --ink:     var(--charcoal);
  --line:    rgba(23,28,25,0.12);
  --line-soft: rgba(23,28,25,0.07);
  --on-dark-line: rgba(255,255,255,0.14);

  /* Type */
  --heading: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --editorial: 'Lora', Georgia, 'Times New Roman', serif;

  /* Type scale */
  --step-1: clamp(2.2rem, 1.8rem + 2vw, 4rem);
  --step-2: clamp(1.9rem, 1.6rem + 1.4vw, 3rem);
  --step-3: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  --step-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --step-body: 1.0625rem;
  --step-small: 0.9rem;

  /* Layout */
  --container: 1240px;
  --container-narrow: 780px;
  --gutter: clamp(24px, 5vw, 72px);
  --section-pad: clamp(52px, 6.5vw, 100px);

  --radius-s: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* -------------------- Reset -------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--step-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:inherit; }

h1,h2,h3,h4{ font-family:var(--heading); font-weight:700; letter-spacing:-0.015em; color:var(--ink); }
h1{ font-size:var(--step-1); line-height:1.04; }
h2{ font-size:var(--step-2); line-height:1.12; }
h3{ font-size:var(--step-3); line-height:1.24; }
h4{ font-size:var(--step-4); line-height:1.35; font-weight:600; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container--narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--gutter); }

section{ padding-block:var(--section-pad); }
.section-tight{ padding-block:clamp(48px,6vw,88px); }

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

/* -------------------- Reveal-on-scroll -------------------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  font-size:0.95rem; font-weight:600;
  border-radius:var(--radius-s);
  border:1px solid transparent;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--emerald); color:var(--white); }
.btn-primary:hover{ background:var(--forest); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-secondary:hover{ background:var(--blue); color:var(--white); border-color:var(--blue); }
.btn-onDark{ background:transparent; color:var(--white); border-color:rgba(255,255,255,0.5); }
.btn-onDark:hover{ background:var(--white); color:var(--black); border-color:var(--white); }
.btn-orange{ background:var(--orange); color:var(--white); }
.btn-orange:hover{ background:var(--black); }
.btn-ghost{ padding:0; border-radius:0; border-bottom:1px solid var(--ink); }
.btn-ghost:hover{ color:var(--blue); border-color:var(--blue); }

/* -------------------- Header -------------------- */
.site-header{
  position:sticky; top:0; z-index:200;
  padding:10px clamp(12px,3vw,28px) 0;
  background:transparent;
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--black); color:var(--white);
  border-radius:16px;
  padding:8px 28px;
  box-shadow:0 16px 40px rgba(17,17,17,0.18);
  transition:padding-block .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-scrolled .site-header__bar{ padding-block:6px; box-shadow:0 22px 48px rgba(17,17,17,0.26); }
.logo{
  display:inline-flex; align-items:center; line-height:0;
  background:#fff; padding:4px 10px; border-radius:10px;
  transition:opacity .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.logo-lockup{ display:block; height:56px; width:auto; }
a.logo:hover{ opacity:0.85; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,0.18); }

.main-nav{ display:flex; align-items:center; gap:38px; }
.main-nav a{
  font-size:1rem; font-weight:700; letter-spacing:0.01em; color:rgba(255,255,255,0.72); position:relative; padding-block:4px;
  transition:color .25s var(--ease);
}
.main-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease);
}
.main-nav a:hover{ color:var(--white); }
.main-nav a:hover::after,.main-nav a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.main-nav a.is-active{ color:var(--white); }

.header__actions{ display:flex; align-items:center; gap:26px; }
.header__actions .btn{ padding:11px 22px; }
.header__actions > a:not(.btn){
  font-size:1rem; font-weight:700; color:rgba(255,255,255,0.55); position:relative; padding-block:4px; transition:color .25s var(--ease);
}
.header__actions > a:not(.btn)::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .3s var(--ease);
}
.header__actions > a:not(.btn):hover{ color:var(--white); }
.header__actions > a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }

.hamburger{
  display:none; flex-direction:column; gap:5px; width:26px; background:none; border:none; padding:6px;
}
.hamburger span{ height:2px; width:100%; background:var(--white); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none;
  position:fixed; inset:0; top:96px; background:var(--paper); z-index:190;
  padding:36px var(--gutter); flex-direction:column; gap:0;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-nav.is-open{ opacity:1; transform:none; pointer-events:auto; }
.mobile-nav a{ display:block; padding:18px 0; border-bottom:1px solid var(--line); font-family:var(--heading); font-size:1.4rem; }
.mobile-nav .btn{ margin-top:28px; width:max-content; }

@media (max-width:920px){
  .main-nav{ display:none; }
  .header__actions .btn{ display:none; }
  .hamburger{ display:flex; }
  .mobile-nav{ display:flex; }
}

/* -------------------- Footer -------------------- */
.site-footer{ background:var(--black); color:var(--white); padding-block:52px 0; position:relative; overflow:hidden; }
.footer__meta{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding-bottom:40px; font-size:0.92rem; font-weight:600; color:rgba(255,255,255,0.48); letter-spacing:0.02em;
}
.footer__top{
  display:grid; grid-template-columns:1.4fr 0.8fr 0.8fr 0.8fr; gap:48px;
  padding-bottom:56px;
}
.footer__brand p{ color:rgba(255,255,255,0.65); margin-top:16px; max-width:32ch; font-size:1.05rem; font-weight:500; }
.footer__col h4{ color:var(--white); font-size:0.86rem; font-family:var(--sans); font-weight:700; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:20px; opacity:0.6; }
.footer__col li{ margin-bottom:14px; }
.footer__col a{ color:rgba(255,255,255,0.85); font-size:1.05rem; font-weight:600; transition:color .2s var(--ease); }
.footer__col a:hover{ color:var(--gold-light); }

.footer__connect-row{
  display:flex; justify-content:center; align-items:center; gap:32px; flex-wrap:wrap;
  padding-block:32px; border-top:1px solid var(--on-dark-line); position:relative; z-index:1;
}
.footer__connect-links{ display:flex; gap:28px; flex-wrap:wrap; justify-content:center; }
.footer__connect-links a{ color:rgba(255,255,255,0.8); font-size:1rem; font-weight:600; transition:color .2s var(--ease); }
.footer__connect-links a:hover{ color:var(--gold-light); }
.footer__totop{ color:rgba(255,255,255,0.55); font-size:0.95rem; font-weight:600; display:inline-flex; align-items:center; gap:6px; transition:color .2s var(--ease), transform .2s var(--ease); }
.footer__totop:hover{ color:var(--white); transform:translateY(-3px); }

.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; padding-top:24px; padding-bottom:28px; border-top:1px solid var(--on-dark-line); position:relative; z-index:1; }
.footer__bottom, .footer__bottom a{ color:rgba(255,255,255,0.5); font-size:0.92rem; font-weight:600; }
.footer__bottom a:hover{ color:var(--white); }
.footer__legal{ display:flex; gap:24px; }

.footer__wordmark{
  font-family:var(--heading); font-weight:700;
  font-size:clamp(4.5rem, 17vw, 15rem);
  line-height:0.78;
  letter-spacing:-0.02em;
  text-align:center;
  user-select:none;
  white-space:nowrap;
  padding-top:14px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.18), rgba(255,255,255,0.03) 55%, rgba(255,255,255,0) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

@media (max-width:820px){
  .footer__top{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .footer__meta{ flex-direction:column; gap:6px; }
}

/* -------------------- Eyebrow / labels (used sparingly, sentence case) -------------------- */
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-size:0.85rem; color:var(--grey); margin-bottom:18px; font-weight:500;
}
.kicker::before{ content:''; width:22px; height:1px; background:var(--blue); }

/* -------------------- Hero -------------------- */
.hero{
  padding-top:clamp(16px,2.2vw,28px); padding-bottom:clamp(14px,2vw,24px);
  position:relative; overflow:hidden;
}
.hero__grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:32px; align-items:center; }
.hero__eyebrow{ font-size:0.85rem; color:var(--blue); font-weight:600; margin-bottom:10px; }
.hero h1{ max-width:16ch; font-size:clamp(1.7rem, 1.35rem + 1.7vw, 2.75rem); line-height:1.06; }
.hero__sub{ font-size:clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); color:var(--grey); max-width:46ch; margin-top:12px; line-height:1.45; }
.hero__actions{ display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; }
.hero__figure{ align-self:center; margin-top:0; }
@media (max-width:920px){
  .hero__grid{ grid-template-columns:1fr; }
}

/* -------------------- Blueprint / architecture line-art system -------------------- */
/* Recurring visual motif standing in for photography: structural diagrams that
   literally depict "organizational architecture" — grids, nodes, load paths. */
.blueprint{ width:100%; height:auto; display:block; }
.blueprint-frame{
  /* --frame-w controls this frame's max-width. Override per-instance with an inline
     style="--frame-w:700px" (or similar) to resize any individual diagram/image on the
     site without touching this stylesheet or the markup structure. */
  position:relative; border:1px solid var(--line); background:var(--grey-mist);
  aspect-ratio:4/3.1; overflow:hidden;
  width:100%; max-width:var(--frame-w, 420px); margin-inline:auto;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.blueprint-frame:hover{ transform:scale(1.012); box-shadow:0 18px 40px rgba(17,17,17,0.09); border-color:rgba(17,17,17,0.22); }
.blueprint-frame--wide{ aspect-ratio:16/7; max-width:var(--frame-w, 620px); }
.blueprint-frame--dark{ background:var(--black); border-color:var(--on-dark-line); }
.blueprint-frame--dark:hover{ border-color:rgba(255,255,255,0.3); }
.blueprint-frame svg, .blueprint-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .6s var(--ease); }
.blueprint-frame:hover svg, .blueprint-frame:hover img{ transform:scale(1.03); }
.blueprint-frame figcaption{
  position:absolute; left:18px; bottom:16px; font-size:0.78rem; color:var(--grey); letter-spacing:0.02em;
}
.blueprint-frame--dark figcaption{ color:rgba(255,255,255,0.5); }
/* Caption rendered outside the frame (not overlaid on the graphic) — used wherever the
   diagram is functional/interactive and the caption shouldn't sit on top of it. */
.blueprint-caption{ margin-top:12px; font-size:0.78rem; color:var(--grey); letter-spacing:0.02em; text-align:left; }

/* -------------------- Statement / pull-quote blocks -------------------- */
.statement{
  font-family:var(--heading); font-size:var(--step-2); line-height:1.18; max-width:22ch;
}
.statement--wide{ max-width:none; }
.pull{
  border-left:2px solid var(--blue); padding-left:28px;
  font-family:var(--heading); font-size:var(--step-3); line-height:1.32; color:var(--ink); max-width:52ch;
}

/* -------------------- Dark section -------------------- */
.section-dark{ background:var(--black); color:var(--white); }
.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{ color:var(--white); }
.section-dark .statement,.section-dark .pull{ color:var(--white); }
.section-dark p{ color:rgba(255,255,255,0.68); }
.section-dark .kicker{ color:rgba(255,255,255,0.55); }

/* -------------------- Two column editorial -------------------- */
.split{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start; }
.split--reverse{ grid-template-columns:1.1fr 0.9fr; }
.split--reverse > *:first-child{ order:2; }
@media (max-width:900px){
  .split,.split--reverse{ grid-template-columns:1fr; }
  .split--reverse > *:first-child{ order:0; }
}

/* -------------------- Numbered stage system (three-stage model) -------------------- */
.stages{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px; }
.stage{ background:var(--paper); padding:44px 36px; position:relative; transition:transform .35s var(--ease), box-shadow .35s var(--ease); }
.stage:hover{ transform:translateY(-6px); box-shadow:0 20px 40px rgba(17,17,17,0.08); z-index:2; }
.stage__num{ font-family:var(--heading); font-size:0.95rem; color:var(--blue); }
.stage__title{ font-family:var(--heading); font-size:1.5rem; margin-top:18px; margin-bottom:14px; }
.stage__text{ color:var(--grey); font-size:0.98rem; }
.stage--active{ background:var(--black); }
.stage--active .stage__num{ color:var(--orange); }
.stage--active .stage__title{ color:var(--white); }
.stage--active .stage__text{ color:rgba(255,255,255,0.65); }
@media (max-width:840px){ .stages{ grid-template-columns:1fr; } }

/* -------------------- Founder Scale Journey chain -------------------- */
.journey{ display:flex; align-items:center; flex-wrap:nowrap; gap:0; margin-top:48px; overflow-x:auto; }
.journey__node{
  font-family:var(--heading); font-size:clamp(0.82rem,1.5vw,1.3rem);
  padding:14px 6px; color:var(--grey); white-space:nowrap; flex-shrink:0;
}
.journey__node.is-end{ color:var(--ink); font-weight:600; }
.journey__arrow{ color:var(--line); font-size:1.2rem; padding-inline:4px; flex-shrink:0; }
@media (max-width:700px){
  .journey{ flex-direction:column; align-items:flex-start; flex-wrap:wrap; overflow-x:visible; }
  .journey__node{ white-space:normal; }
  .journey__arrow{ transform:rotate(90deg); padding-block:2px; }
}

/* -------------------- Seven dimensions grid (home teaser) -------------------- */
.dims{ display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--line); margin-top:52px; }
.dims__item{ padding:26px 14px 22px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .3s var(--ease); }
.dims__item:hover{ background:var(--white); }
.dims__item:last-child{ border-right:none; }
.dims__num{ font-size:0.78rem; color:var(--grey); }
.dims__label{ font-family:var(--heading); font-size:1.05rem; margin-top:10px; }
.dims__item[data-accent="blue"] .dims__num{ color:var(--blue); }
.dims__item[data-accent="purple"] .dims__num{ color:var(--purple); }
.dims__item[data-accent="orange"] .dims__num{ color:var(--orange); }
.dims__item[data-accent="green"] .dims__num{ color:var(--gold-light); }
@media (max-width:960px){
  .dims{ grid-template-columns:repeat(4,1fr); }
  .dims__item:nth-child(4){ border-right:none; }
}
@media (max-width:600px){
  .dims{ grid-template-columns:repeat(2,1fr); }
  .dims__item:nth-child(even){ border-right:none; }
}

/* -------------------- Signature question banner -------------------- */
.signature{
  background:var(--black); color:var(--white); padding-block:var(--section-pad);
  text-align:left; position:relative;
}
.signature .container{ max-width:960px; }
.signature h2{ font-size:clamp(1.9rem,2.2rem + 1.6vw,3.4rem); line-height:1.14; color:var(--white); }
.signature p{ color:rgba(255,255,255,0.6); max-width:56ch; margin-top:28px; font-size:1.05rem; }
.signature .kicker{ color:rgba(255,255,255,0.55); }

/* -------------------- Article / insights grid -------------------- */
.insights-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); margin-top:52px; border:1px solid var(--line); }
.insight-card{ background:var(--paper); padding:38px 32px; display:flex; flex-direction:column; min-height:280px; transition:background .25s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease); }
.insight-card:hover{ background:var(--white); transform:translateY(-5px); box-shadow:0 18px 36px rgba(17,17,17,0.07); z-index:2; position:relative; }
.insight-card h3{ transition:color .25s var(--ease); }
.insight-card:hover h3{ color:var(--blue); }
.insight-card__cat{ font-size:0.82rem; color:var(--blue); font-weight:600; }
.insight-card h3{ margin-top:18px; font-size:1.3rem; flex-grow:1; }
.insight-card__meta{ margin-top:20px; font-size:0.85rem; color:var(--grey); }
.insight-featured{ grid-column:1 / -1; display:grid; grid-template-columns:1.1fr 0.9fr; gap:0; background:var(--white); }
.insight-featured .blueprint-frame{ aspect-ratio:auto; height:100%; width:100%; max-width:none; margin-inline:0; border:none; border-right:1px solid var(--line); }
.insight-featured__body{ padding:48px; display:flex; flex-direction:column; justify-content:center; }
.insight-card p, .insight-featured__body p{ font-family:var(--editorial); line-height:1.6; }
@media (max-width:960px){
  .insights-grid{ grid-template-columns:1fr 1fr; }
  .insight-featured{ grid-template-columns:1fr; }
}
@media (max-width:640px){ .insights-grid{ grid-template-columns:1fr; } }

/* -------------------- Framework (7 dimensions) page -------------------- */
.dimension-row{
  display:grid; grid-template-columns:120px 1fr 1fr; gap:40px;
  padding-block:56px; border-top:1px solid var(--line);
  align-items:start;
  transition:background .35s var(--ease), padding-inline .35s var(--ease);
}
.dimension-row:hover{ background:var(--grey-mist); padding-inline:20px; margin-inline:-20px; }
.dimension-row:hover .dimension-row__num{ color:var(--blue); }
.dimension-row:last-child{ border-bottom:1px solid var(--line); }
.dimension-row__num{ font-family:var(--heading); font-size:2.2rem; color:var(--line); line-height:1; transition:color .35s var(--ease); }
.dimension-row__num span{ display:block; font-family:var(--sans); font-size:0.72rem; color:var(--grey); margin-top:10px; letter-spacing:0.04em; }
.dimension-row h3{ margin-bottom:14px; }
.dimension-row p{ color:var(--grey); max-width:50ch; }
.dimension-row .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:10px; position:relative; top:-2px; }
@media (max-width:860px){
  .dimension-row{ grid-template-columns:1fr; gap:16px; }
}

/* -------------------- FAQ Accordion -------------------- */
.accordion{ border-top:1px solid var(--line); margin-top:12px; }
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-item__q{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  background:none; border:none; text-align:left; padding:26px 0; font-family:var(--heading); font-size:1.2rem; color:var(--ink);
}
.accordion-item__icon{ flex-shrink:0; width:20px; height:20px; position:relative; }
.accordion-item__icon::before,.accordion-item__icon::after{ content:''; position:absolute; background:var(--ink); transition:transform .3s var(--ease); }
.accordion-item__icon::before{ top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); }
.accordion-item__icon::after{ left:50%; top:0; height:100%; width:1px; transform:translateX(-50%); }
.accordion-item.is-open .accordion-item__icon::after{ transform:translateX(-50%) rotate(90deg); opacity:0; }
.accordion-item__a{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); }
.accordion-item__a p{ color:var(--grey); padding-bottom:26px; max-width:66ch; }

/* -------------------- Assessment page components -------------------- */
.flow{ display:flex; align-items:center; gap:0; margin-top:46px; flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
.flow__step{ background:var(--white); border:1px solid var(--line); padding:15px 20px; font-family:var(--heading); font-size:0.92rem; white-space:nowrap; flex-shrink:0; }
.flow__arrow{ padding-inline:12px; color:var(--grey); flex-shrink:0; }

.audit-list{ margin-top:20px; }
.audit-item{ display:grid; grid-template-columns:44px 1fr; gap:22px; padding-block:34px; border-top:1px solid var(--line); transition:padding-inline .35s var(--ease), background .35s var(--ease); }
.audit-item:hover{ background:var(--white); padding-inline:18px; margin-inline:-18px; }
.signature .audit-item, .section-dark .audit-item{ border-top-color:var(--on-dark-line); }
.signature .audit-item:hover, .section-dark .audit-item:hover{ background:rgba(255,255,255,0.06); }
.audit-item:last-child{ border-bottom:1px solid var(--line); }
.audit-item__mark{ width:10px; height:10px; border-radius:50%; margin-top:8px; }
.audit-item h4{ margin-bottom:8px; }
.audit-item p{ color:var(--grey); max-width:60ch; }

/* -------------------- Forms -------------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.form-field{ display:flex; flex-direction:column; gap:8px; }
.form-field--full{ grid-column:1 / -1; }
.form-field label{ font-size:0.85rem; color:var(--grey); }
.form-field input,.form-field select,.form-field textarea{
  border:1px solid var(--line); background:var(--white); padding:14px 16px; border-radius:var(--radius-s);
  color:var(--ink); transition:border-color .2s var(--ease);
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:var(--blue); outline:none; }
.form-field textarea{ resize:vertical; min-height:110px; }
.form-note{ font-size:0.8rem; color:var(--grey); margin-top:6px; }
.gform-embed{
  border:1px dashed var(--line); background:var(--grey-mist); padding:26px; border-radius:var(--radius-s);
  font-size:0.9rem; color:var(--grey); text-align:center;
}
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

/* -------------------- Popup -------------------- */
.popup-overlay{
  position:fixed; inset:0; background:rgba(17,17,17,0.55); z-index:500;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.popup-overlay.is-open{ opacity:1; pointer-events:auto; }
.popup{
  background:var(--white); max-width:600px; width:100%; max-height:88vh; overflow-y:auto;
  padding:clamp(32px,5vw,52px); position:relative;
  transform:translateY(16px) scale(0.98); opacity:0; transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.popup-overlay.is-open .popup{ transform:none; opacity:1; }
.popup__close{
  position:absolute; top:20px; right:20px; width:36px; height:36px; border:1px solid var(--line);
  background:none; display:flex; align-items:center; justify-content:center; border-radius:50%;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.popup__close:hover{ background:var(--black); color:var(--white); }
.popup h3{ max-width:18ch; }
.popup p{ color:var(--grey); margin-top:14px; }

/* -------------------- Misc utility -------------------- */
.eyebrow-line{ display:flex; align-items:center; gap:14px; color:var(--grey); font-size:0.85rem; margin-bottom:16px; }
.eyebrow-line::before{ content:''; width:30px; height:1px; background:var(--blue); }
.hr{ height:1px; background:var(--line); border:none; margin:0; }
.text-grey{ color:var(--grey); }
.mt-xl{ margin-top:64px; }
.two-col-text{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
@media (max-width:820px){ .two-col-text{ grid-template-columns:1fr; } }

.tag-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.tag{ font-size:0.78rem; padding:7px 14px; border:1px solid var(--line); color:var(--grey); border-radius:20px; }
.tag[data-accent="blue"]{ border-color:var(--blue); color:var(--blue); }
.tag[data-accent="purple"]{ border-color:var(--purple); color:var(--purple); }
.tag[data-accent="orange"]{ border-color:var(--orange); color:var(--orange); }
.tag[data-accent="green"]{ border-color:var(--gold-light); color:var(--gold-light); }

/* -------------------- Final CTA -------------------- */
.final-cta{ background:var(--black); color:var(--white); text-align:left; }
.final-cta .container{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; }
.final-cta h2{ max-width:16ch; color:var(--white); }

/* -------------------- Page hero (secondary pages) -------------------- */
.page-hero{ padding-top:clamp(56px,8vw,110px); padding-bottom:clamp(40px,6vw,70px); border-bottom:1px solid var(--line); }
.page-hero h1{ max-width:18ch; }
.page-hero .hero__sub{ margin-top:20px; }
.breadcrumb{ font-size:0.85rem; color:var(--grey); margin-bottom:22px; }
.breadcrumb a:hover{ color:var(--blue); }

/* -------------------- Founder page -------------------- */
.founder-hero{ display:grid; grid-template-columns:0.68fr 1.32fr; gap:56px; align-items:start; }
.founder-hero .blueprint-frame{ aspect-ratio:1/1.05; max-width:280px; margin-inline:0; }
@media (max-width:900px){ .founder-hero{ grid-template-columns:1fr; } .founder-hero .blueprint-frame{ max-width:220px; } }
.founder-quote{ font-family:var(--editorial); font-style:italic; font-weight:500; font-size:var(--step-3); line-height:1.4; margin-top:24px; max-width:34ch; }

/* -------------------- 404 -------------------- */
.error-page{ min-height:78vh; display:flex; align-items:center; }
.error-page__num{ font-family:var(--heading); font-size:clamp(5rem,18vw,11rem); line-height:0.9; color:var(--line); }
.error-page__actions{ display:flex; gap:20px; margin-top:36px; flex-wrap:wrap; }

/* -------------------- Assessment index cards -------------------- */
.index-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px; }
.index-card{ background:var(--white); padding:40px 32px; transition:transform .35s var(--ease), box-shadow .35s var(--ease); position:relative; }
.index-card:hover{ transform:translateY(-5px); box-shadow:0 18px 36px rgba(17,17,17,0.07); z-index:2; }
.index-card .num{ font-family:var(--heading); font-size:1.1rem; }
.index-card h4{ margin-top:20px; margin-bottom:12px; }
.index-card p{ color:var(--grey); font-size:0.95rem; }
@media (max-width:860px){ .index-grid{ grid-template-columns:1fr; } }

/* -------------------- Diagram line-draw animation -------------------- */
.draw-line{ animation:drawLine 1.4s var(--ease) both; }
@keyframes drawLine{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.draw-node{ animation:popNode .5s var(--ease) both; transform-origin:center; transform-box:fill-box; }
@keyframes popNode{ from{ opacity:0; transform:scale(0.4); } to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .draw-line,.draw-node{ animation:none; } }
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--black); color:var(--white); padding:14px 20px; z-index:1000;
}
.skip-link:focus{ left:12px; top:12px; }

/* ============================================================
   Trust layer: cookie notice
   ============================================================ */
.cookie-banner{
  position:fixed; left:20px; right:20px; bottom:20px; z-index:400;
  max-width:560px; margin-inline:auto;
  background:var(--black); color:var(--white);
  border-radius:14px; padding:22px 26px;
  box-shadow:0 20px 50px rgba(17,17,17,0.28);
  display:flex; flex-direction:column; gap:14px;
  transform:translateY(140%); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease);
}
.cookie-banner.is-visible{ transform:none; opacity:1; }
.cookie-banner p{ font-size:0.9rem; color:rgba(255,255,255,0.72); line-height:1.55; margin:0; }
.cookie-banner a{ color:var(--white); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cookie-banner__actions .btn{ padding:10px 20px; font-size:0.85rem; }
@media (max-width:480px){ .cookie-banner{ left:12px; right:12px; bottom:12px; padding:18px 20px; } }

/* ============================================================
   Business Architecture Map — clickable diagram
   ============================================================ */
.map-node{ cursor:pointer; }
.map-node circle{ transition:stroke-width .25s var(--ease), fill .25s var(--ease); }
.map-node:hover circle, .map-node:focus circle{ stroke-width:2.6; }
.map-node.is-active circle{ fill:rgba(37,99,235,0.06); stroke-width:2.6; }
.map-node:focus{ outline:none; }
.map-hint{ text-align:center; font-size:0.85rem; color:var(--grey); margin-top:14px; }
.map-detail-panel{
  margin-top:28px; border:1px solid var(--line); background:var(--grey-mist); padding:30px 34px; border-radius:4px;
  transition:opacity .3s var(--ease);
}
.map-detail{ display:none; }
.map-detail.is-active{ display:block; }
.map-detail__eyebrow{ font-size:0.8rem; font-weight:700; color:var(--blue); letter-spacing:0.04em; text-transform:uppercase; }
.map-detail h4{ margin-top:10px; margin-bottom:10px; }
.map-detail p{ color:var(--grey); max-width:60ch; }

/* ============================================================
   Interactive Founder Scale Journey
   ============================================================ */
.journey-interactive{ display:flex; align-items:center; flex-wrap:wrap; gap:0; margin-top:44px; }
.journey-step{
  background:none; border:none; font-family:var(--heading); font-weight:700;
  font-size:clamp(1rem,1.6vw,1.4rem); padding:12px 6px; color:rgba(255,255,255,0.5);
  cursor:pointer; transition:color .25s var(--ease);
}
.journey-step:hover{ color:rgba(255,255,255,0.8); }
.journey-step.is-active{ color:var(--white); }
.journey-arrow{ color:rgba(255,255,255,0.25); font-size:1.2rem; padding-inline:4px; }
.journey-detail{
  margin-top:32px; padding:28px 32px; border:1px solid var(--on-dark-line); border-radius:4px;
  display:none;
}
.journey-detail.is-active{ display:block; }
.journey-detail__quote{ font-family:var(--editorial); font-style:italic; color:var(--white); font-size:1.2rem; margin-bottom:20px; }
.journey-detail__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.journey-detail__grid div h5{ font-size:0.78rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:8px; }
.journey-detail__grid div p{ color:rgba(255,255,255,0.75); font-size:0.94rem; }
@media (max-width:760px){ .journey-detail__grid{ grid-template-columns:1fr; } }

/* ============================================================
   Founder Dependency Check (interactive quiz)
   ============================================================ */
.dep-check{ margin-top:8px; }
.dep-check__meta{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:24px; flex-wrap:wrap; gap:10px; }
.dep-check__count{ font-size:0.85rem; color:var(--grey); }
.dep-category{ margin-bottom:8px; }
.dep-category__label{ font-size:0.8rem; font-weight:700; color:var(--blue); letter-spacing:0.04em; text-transform:uppercase; margin-top:44px; margin-bottom:18px; }
.dep-question{ border-top:1px solid var(--line); padding-block:26px; }
.dep-question:last-of-type{ border-bottom:1px solid var(--line); }
.dep-question p{ font-weight:600; margin-bottom:16px; }
.dep-options{ display:flex; flex-direction:column; gap:10px; }
.dep-option{ display:flex; align-items:center; gap:12px; cursor:pointer; font-size:0.96rem; color:var(--grey); }
.dep-option input{ accent-color:var(--blue); width:17px; height:17px; flex-shrink:0; }
.dep-option:hover{ color:var(--ink); }
.dep-check__submit{ margin-top:40px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.dep-check__hint{ font-size:0.85rem; color:var(--grey); }

.dep-results{ display:none; margin-top:56px; padding-top:48px; border-top:1px solid var(--line); }
.dep-results.is-visible{ display:block; }
.dep-meter-row{ margin-bottom:28px; }
.dep-meter-row__top{ display:flex; justify-content:space-between; margin-bottom:8px; font-size:0.92rem; }
.dep-meter-row__label{ font-weight:600; }
.dep-meter-row__level{ color:var(--grey); }
.dep-meter-row__level[data-level="High"]{ color:var(--orange); font-weight:600; }
.dep-meter-row__level[data-level="Moderate"]{ color:var(--gold-light); font-weight:600; }
.dep-meter-row__level[data-level="Low"]{ color:var(--green); font-weight:600; }
.dep-meter{ height:8px; background:var(--grey-light); border-radius:6px; overflow:hidden; }
.dep-meter__fill{ height:100%; width:0%; border-radius:6px; background:var(--blue); transition:width 1s var(--ease); }
.dep-summary{ margin-top:36px; padding:28px 30px; background:var(--grey-mist); border:1px solid var(--line); border-radius:4px; }
.dep-summary p{ color:var(--ink); font-size:1.02rem; }
.dep-summary p + p{ margin-top:12px; color:var(--grey); font-size:0.96rem; }

/* ============================================================
   90-Day Absence Simulator
   ============================================================ */
.sim-grid{ display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:36px; }
.sim-item{ background:var(--white); padding:26px 30px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.sim-item__label h4{ font-size:1.05rem; }
.sim-item__label p{ color:var(--grey); font-size:0.9rem; margin-top:4px; }
.sim-choices{ display:flex; gap:8px; flex-wrap:wrap; }
.sim-choice{
  border:1px solid var(--line); background:var(--white); padding:9px 16px; font-size:0.85rem; font-weight:600;
  border-radius:20px; cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  color:var(--grey);
}
.sim-choice:hover{ border-color:var(--ink); color:var(--ink); }
.sim-choice.is-selected{ background:var(--ink); border-color:var(--ink); color:var(--white); }
.sim-choice.is-selected[data-value="0"]{ background:var(--orange); border-color:var(--orange); }
.sim-choice.is-selected[data-value="2"]{ background:var(--green); border-color:var(--green); }
.sim-result{ display:none; margin-top:32px; padding:28px 30px; background:var(--black); color:var(--white); border-radius:4px; }
.sim-result.is-visible{ display:block; }
.sim-result h4{ color:var(--white); margin-bottom:14px; }
.sim-result ul{ margin-top:14px; }
.sim-result li{ padding:8px 0; border-top:1px solid var(--on-dark-line); color:rgba(255,255,255,0.8); font-size:0.95rem; }
.sim-result p{ color:rgba(255,255,255,0.68); }

/* ============================================================
   Consent + form trust note
   ============================================================ */
.consent-row{ display:flex; align-items:flex-start; gap:10px; margin-top:20px; }
.consent-row input{ margin-top:4px; accent-color:var(--blue); width:16px; height:16px; flex-shrink:0; }
.consent-row label{ font-size:0.85rem; color:var(--grey); line-height:1.5; }
.consent-row a{ color:var(--blue); }
.form-trust{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:0.8rem; color:var(--grey); }
.form-trust svg{ flex-shrink:0; }

/* ============================================================
   Callout quotes ("When to call ORGOOK")
   ============================================================ */
.callout-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:48px; }
.callout-item{ background:var(--paper); padding:30px 32px; font-family:var(--editorial); font-style:italic; font-size:1.1rem; line-height:1.5; }
@media (max-width:760px){ .callout-grid{ grid-template-columns:1fr; } }

/* ============================================================
   "What we don't do" list
   ============================================================ */
.donot-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; margin-top:28px; }
.donot-item{ display:flex; align-items:center; gap:14px; color:var(--grey); font-size:1rem; }
.donot-item__mark{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); flex-shrink:0; position:relative; }
.donot-item__mark::before,.donot-item__mark::after{ content:''; position:absolute; top:50%; left:50%; width:11px; height:1.5px; background:var(--grey); }
.donot-item__mark::before{ transform:translate(-50%,-50%) rotate(45deg); }
.donot-item__mark::after{ transform:translate(-50%,-50%) rotate(-45deg); }
@media (max-width:640px){ .donot-list{ grid-template-columns:1fr; } }

/* ============================================================
   Solutions page: product cards
   ============================================================ */
.product-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:48px; }
.product-card{
  background:var(--white); padding:40px 38px; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.product-card:hover{ transform:translateY(-4px); box-shadow:0 20px 44px rgba(23,28,25,0.08); z-index:2; position:relative; }
.product-card__num{ font-family:var(--heading); font-size:0.85rem; color:var(--gold); font-weight:700; letter-spacing:0.04em; }
.product-card__price{ font-family:var(--heading); font-size:1.6rem; font-weight:800; color:var(--emerald); margin-top:14px; }
.product-card__price span{ font-size:0.85rem; font-weight:600; color:var(--grey); }
.product-card h3{ margin-top:8px; font-size:1.35rem; }
.product-card__tagline{ color:var(--grey); margin-top:10px; font-size:0.98rem; }
.product-card ul{ margin-top:20px; flex-grow:1; }
.product-card li{ padding:8px 0; border-top:1px solid var(--line); font-size:0.92rem; color:var(--grey); }
.product-card li:first-child{ border-top:none; }
.product-card .btn{ margin-top:26px; align-self:flex-start; }
@media (max-width:860px){ .product-grid{ grid-template-columns:1fr; } }

.partner-tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:32px; }
.partner-tier{ background:var(--paper); padding:26px 22px; text-align:center; }
.partner-tier__name{ font-family:var(--heading); font-weight:700; font-size:0.95rem; }
.partner-tier__price{ font-family:var(--heading); font-weight:800; color:var(--emerald); font-size:1.15rem; margin-top:8px; }
@media (max-width:760px){ .partner-tiers{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .partner-tiers{ grid-template-columns:1fr; } }

.specific-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 40px; margin-top:32px; }
.specific-item{ display:flex; align-items:center; gap:14px; padding-block:14px; border-bottom:1px solid var(--line); color:var(--ink); font-weight:600; font-size:0.98rem; }
.specific-item::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0; }
@media (max-width:700px){ .specific-grid{ grid-template-columns:1fr; } }

/* ============================================================
   What We Solve: problem-area cards
   ============================================================ */
.problem-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:48px; }
.problem-card{ background:var(--white); padding:30px 26px; transition:background .3s var(--ease), transform .3s var(--ease); }
.problem-card:hover{ background:var(--offwhite); transform:translateY(-3px); }
.problem-card h4{ font-size:1.05rem; margin-bottom:14px; }
.problem-card ul{ margin:0; padding:0; list-style:none; }
.problem-card li{ font-size:0.88rem; color:var(--grey); padding:5px 0; padding-left:14px; position:relative; }
.problem-card li::before{ content:'—'; position:absolute; left:0; color:var(--gold); }
@media (max-width:960px){ .problem-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .problem-grid{ grid-template-columns:1fr; } }

/* ============================================================
   Ecosystem cards
   ============================================================ */
.ecosystem-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--on-dark-line); border:1px solid var(--on-dark-line); margin-top:48px; }
.ecosystem-card{ background:var(--emerald); padding:32px 26px; transition:background .3s var(--ease); }
.ecosystem-card:hover{ background:rgba(255,255,255,0.04); }
.ecosystem-card__eyebrow{ font-size:0.78rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-light); }
.ecosystem-card h4{ color:var(--white); margin-top:12px; font-size:1.15rem; }
.ecosystem-card p{ color:rgba(255,255,255,0.62); margin-top:10px; font-size:0.92rem; }
.ecosystem-card a{ display:inline-block; margin-top:16px; color:var(--white); font-size:0.85rem; border-bottom:1px solid rgba(255,255,255,0.4); }
@media (max-width:960px){ .ecosystem-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ecosystem-grid{ grid-template-columns:1fr; } }
.legal-content h2{ font-size:1.5rem; margin-top:52px; margin-bottom:16px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ color:var(--grey); margin-top:14px; line-height:1.7; }
.legal-content ul{ margin-top:14px; padding-left:22px; list-style:disc; color:var(--grey); }
.legal-content li{ margin-bottom:8px; line-height:1.6; }
.legal-content strong{ color:var(--ink); }
.legal-updated{ color:var(--grey); font-size:0.9rem; margin-top:8px; }

/* ==========================================================================
   RESPONSIVE HARDENING — phones, tablets, every screen size
   Added to stop pages from becoming wider than the screen on mobile.
   ========================================================================== */

/* Safety net: never allow sideways scrolling of the page itself.
   (`clip` doesn't break the sticky header the way `hidden` can.) */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ overflow-x:hidden; overflow-wrap:break-word; }
@supports (overflow:clip){ body{ overflow-x:clip; } }

/* Media never exceeds its container */
img,svg,video,iframe,canvas{ max-width:100%; }
img{ height:auto; }
.blueprint-frame img, .blueprint-frame svg{ height:100%; }
.logo-lockup{ max-width:100%; }

/* Grid/flex children are allowed to shrink instead of forcing the row wider */
.hero__grid > *, .split > *, .stages > *, .insights-grid > *, .product-grid > *,
.problem-grid > *, .ecosystem-grid > *, .index-grid > *, .callout-grid > *,
.form-grid > *, .footer__top > *, .founder-hero > *, .two-col-text > *,
.dimension-row > *, .partner-tiers > *, .specific-grid > *, .donot-list > *{ min-width:0; }

/* Philosophy grid on the homepage (was an inline style, which beat the mobile rules) */
.stages--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .stages--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .stages--4{ grid-template-columns:1fr; } .stages--4 .stage{ padding:32px 26px; } }

/* Touch devices: don't leave "hover" shifts stuck after a tap */
@media (hover:none){
  .stage:hover,.insight-card:hover,.product-card:hover,.index-card:hover,.problem-card:hover,.blueprint-frame:hover{ transform:none; box-shadow:none; }
  .blueprint-frame:hover svg,.blueprint-frame:hover img{ transform:none; }
}
@media (max-width:900px){
  .dimension-row:hover,.audit-item:hover{ padding-inline:0; margin-inline:0; background:transparent; }
}

/* ---- Tablets and below ---- */
@media (max-width:920px){
  .site-header__bar{ padding:8px 16px; gap:12px; }
  .hamburger{ padding:11px 9px; width:44px; box-sizing:content-box; }
  .mobile-nav{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(36px + env(safe-area-inset-bottom, 0px)); }
  .mobile-nav .btn{ max-width:100%; white-space:normal; }
}

/* ---- Phones ---- */
@media (max-width:640px){
  :root{ --gutter:20px; }
  body{ font-size:1rem; }

  /* Buttons may wrap onto two lines instead of pushing the layout wider */
  .btn{ white-space:normal; text-align:center; justify-content:center; max-width:100%; padding:14px 22px; min-height:46px; }
  .btn-ghost{ justify-content:flex-start; text-align:left; }
  .hero__actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero__actions .btn{ width:100%; }
  .final-cta .container{ align-items:flex-start; }
  .final-cta .btn, .product-card .btn{ align-self:stretch; width:100%; }

  .site-header{ padding-inline:10px; }
  .logo-lockup{ height:46px; }
  .mobile-nav{ top:82px; }
  .mobile-nav a{ font-size:1.25rem; padding:16px 0; }

  .hero h1{ max-width:none; }
  .page-hero h1, .statement, .popup h3, .final-cta h2, .signature h2{ max-width:none; }
  .signature h2{ font-size:clamp(1.6rem, 6.4vw, 2.2rem); }
  h2[style*="max-width"], h3[style*="max-width"]{ max-width:none !important; }

  .stage{ padding:32px 24px; }
  .insight-card{ padding:30px 24px; min-height:0; }
  .insight-featured__body{ padding:28px 24px; }
  .product-card{ padding:30px 24px; }
  .index-card{ padding:30px 24px; }
  .callout-item{ padding:24px 22px; }
  .dimension-row{ padding-block:36px; }
  .dimension-row__num{ font-size:1.8rem; }
  .map-detail-panel, .journey-detail, .dep-summary, .sim-result{ padding:22px 20px; }
  .sim-item{ padding:22px 20px; }
  .accordion-item__q{ font-size:1.05rem; padding:20px 0; }
  .pull{ padding-left:18px; }
  .popup-overlay{ padding:12px; }
  .popup{ max-height:92vh; }

  .footer__top{ grid-template-columns:1fr; gap:34px; }
  .footer__legal{ flex-wrap:wrap; gap:8px 18px; }
  .footer__connect-row{ gap:20px; }
  .footer__connect-links{ gap:14px 20px; }

  /* Horizontal chains that are meant to scroll get a clear scroll area */
  .flow{ margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); }
}

/* ---- Very small phones (≤ 380px) ---- */
@media (max-width:380px){
  :root{ --gutter:16px; }
  .site-header__bar{ padding:6px 12px; }
  .logo{ padding:3px 8px; }
  .logo-lockup{ height:40px; }
  .mobile-nav{ top:74px; }
  .btn{ padding:13px 16px; font-size:0.92rem; }
  .partner-tier{ padding:20px 14px; }
}

/* ---- Large screens: keep line lengths and hero comfortable ---- */
@media (min-width:1600px){
  :root{ --container:1360px; }
}

/* ---- Short landscape phones ---- */
@media (max-height:480px) and (orientation:landscape){
  .error-page{ min-height:auto; padding-block:48px; }
  .mobile-nav{ padding-block:16px; }
  .mobile-nav a{ padding:12px 0; }
}

/* Menu call-to-action keeps normal button padding inside the mobile menu */
.mobile-nav a.btn{ display:inline-flex; padding:14px 28px; font-family:var(--sans); font-size:1rem; border-bottom:1px solid transparent; }
.mobile-nav a.btn-primary{ border-color:transparent; }