/* =====================================================
   TENUREHALL — STYLESHEET
   Clean consolidated version. One rule per component.
===================================================== */

/* ── Variables ── */
:root {
  --bg:      #F5F0E8;
  --surface: #FAF7F2;
  --surface-2:#EFE7DC;
  --text:    #111111;
  --soft:    #5F564B;
  --gold:    #9E7B4F;
  --line:    rgba(0,0,0,.09);
  --card:    #FAF7F2;
}

/* ── Reset ── */
* { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",sans-serif;
  overflow-x:hidden;
}

/* ── Background textures ── */
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 78% 18%,rgba(158,123,79,.12),transparent 34%),
    radial-gradient(circle at 12% 82%,rgba(158,123,79,.06),transparent 30%);
}
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.035;
  background-image:
    linear-gradient(rgba(0,0,0,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.12) 1px,transparent 1px);
  background-size:90px 90px;
}

/* ── Layout ── */
.container { width:min(94%,1500px); margin:auto }

/* ── Nav ── */
nav {
  position:fixed;
  top:0;
  width:100%;
  z-index:999;
  background:rgba(245,240,232,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.nav-inner {
  height:92px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo img { width:250px; display:block }
.nav-links {
  display:flex;
  align-items:center;
  gap:30px;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
}
.nav-links a { color:var(--text); text-decoration:none; opacity:.72 }
.nav-links a:hover { opacity:1 }
.nav-cta { border:1px solid var(--line); padding:14px 22px; opacity:1!important }
.language-switch { display:flex; border:1px solid var(--line) }
.language-switch a {
  background:transparent;
  border:0;
  color:var(--soft);
  padding:12px 15px;
  cursor:pointer;
  font-size:11px;
  letter-spacing:2px;
}
.language-switch a { text-decoration:none; display:block }
.language-switch .active { background:var(--text); color:var(--bg) }

/* ── Typography ── */
.label, .eyebrow {
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:3.5px;
  font-size:13px;
  font-weight:500;
  margin-bottom:20px;
}
.eyebrow { display:flex; align-items:center; gap:12px }
h1,h2,h3 { font-family:"Cormorant Garamond",serif; font-weight:500; color:var(--text) }
h1 { font-size:clamp(38px,4vw,62px); line-height:1; letter-spacing:-1.5px; max-width:760px }
h2 { font-size:clamp(32px,4vw,56px); line-height:1.03; letter-spacing:-1px; max-width:800px }
h3 { font-size:24px; line-height:1.1 }

p  { color:var(--soft); font-size:16px; line-height:1.8 }
.gradient {
  background:linear-gradient(90deg,#111111,#3B342C,var(--gold));
  -webkit-background-clip:text;
  color:transparent;
}

/* ── Buttons ── */
.primary {
  display:inline-block;
  background:var(--text);
  color:var(--bg);
  padding:15px 24px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:11px;
  border:1px solid var(--text);
  transition:background .3s ease, color .3s ease;
}
.primary:hover { background:transparent; color:var(--text) }
.secondary {
  color:var(--text);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:10.5px;
  padding-bottom:9px;
  border-bottom:1px solid rgba(0,0,0,.18);
}

/* ── Language switching ── */
[data-lang="fr"]                          { display:none }
body.fr [data-lang="en"]                  { display:none }
body.fr [data-lang="fr"]                  { display:block }
body.fr span[data-lang="fr"],
body.fr a[data-lang="fr"]                 { display:inline }
body:not(.fr) .metric-label[data-lang="fr"] { display:none }
body.fr .metric-label[data-lang="en"]    { display:none }
body.fr .metric-label[data-lang="fr"]    { display:block }

/* ── Sections ── */
section {
  padding:72px 0;
}

/* ── Hero ── */
.hero {
  overflow-x:clip;
  min-height:100vh;
  min-height:100svh;
  padding-top:125px;
  padding-bottom:32px;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 75% 25%,rgba(158,123,79,.10),transparent 35%),
    linear-gradient(180deg,#F5F0E8 0%,#EFE7DC 100%);
}
.hero-grid {
  width:min(94%,1500px);
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
  align-items:center;
}
.hero-grid .mc { width:100%; max-width:860px }
.problem-section { overflow-x:clip }
.problem-section { padding-top:56px; padding-bottom:56px }
#services { padding-top:56px }
.problem-center { text-align:center }
.problem-center h2 { max-width:900px; margin:0 auto }
.click-stk { display:inline-block; width:1.1em; height:1.1em; margin-left:.1em; vertical-align:-.2em }
.click-stk .env { fill:#FDFBF7; stroke:#111; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; transform-origin:11px 14px; animation:gvEnv 2.6s ease-in-out infinite }
@keyframes gvEnv { 0%,34%,100% { transform:scale(1) } 40% { transform:scale(.94) } 52% { transform:scale(1) } }
.click-stk svg { width:100%; height:100%; overflow:visible }
.click-stk .ptr { fill:#111; stroke:#FDFBF7; stroke-width:1.6; stroke-linejoin:round; transform-origin:15px 18px; animation:gvClick 2.6s ease-in-out infinite }
.click-stk .rays { fill:none; stroke:var(--gold); stroke-width:2; stroke-linecap:round; opacity:0; animation:gvRays 2.6s ease-out infinite }
@keyframes gvClick { 0%,30%,100% { transform:translate(0,0) scale(1) } 38% { transform:translate(-1px,-1px) scale(.86) } 48% { transform:translate(0,0) scale(1) } }
@keyframes gvRays { 0%,34% { opacity:0 } 40% { opacity:1 } 70%,100% { opacity:0 } }
@media (prefers-reduced-motion:reduce) { .click-stk .ptr, .click-stk .rays, .click-stk .env { animation:none } .click-stk .rays { opacity:1 } }
.problem-center .section-text { max-width:640px; margin:24px auto 0 }
.why-section { overflow-x:clip }
.why-left { position:relative; align-self:stretch; min-height:740px }
.why-left > [data-lang] { position:relative; z-index:1 }
.why-left .visual.hero-radar { position:absolute; left:50%; top:500px; width:640px; height:640px; transform:translate(-50%,-50%) scale(.75); z-index:0; pointer-events:none }
.hero p, .section-text {
  margin-top:28px;
  max-width:660px;
  color:var(--soft);
  font-size:16px;
}
.actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:40px;
  flex-wrap:wrap;
}

/* ── Hero email composer ── */
.mc { background:#FDFBF7; border:2px solid #111; border-radius:14px; box-shadow:8px 8px 0 #111; overflow:hidden; max-width:640px }
.mc-bar { display:flex; justify-content:space-between; align-items:center; padding:16px 26px; background:#F1EBE2; font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:#3B342C }
.mc-title { color:#111; font-weight:500 }
.mc-win { display:flex; gap:16px; color:#8A7E70; letter-spacing:0; text-transform:none }
.mc-win i { font-style:normal }
.mc-row { display:block; margin:0 26px; padding:14px 0; border-bottom:1px solid rgba(0,0,0,.09); font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; font-size:12px; letter-spacing:1px; text-transform:uppercase; line-height:1.5 }
.mc-k { color:#A79B8C; white-space:nowrap; margin-right:8px }
.mc-v { color:#111 }
.mc-body { padding:26px 26px 6px }
.mc-body h1 { max-width:none; font-size:clamp(28px,2.8vw,40px); line-height:1.08; letter-spacing:-.8px; margin:0 }
.mc-punch { display:table; margin:16px auto 0; padding:10px 18px 9px; background:#111; color:#F5F0E8; border:3px solid #FDFBF7; border-radius:12px; box-shadow:0 8px 18px rgba(17,17,17,.16); transform:rotate(-3deg); transform-origin:center;
  font-family:"Inter",sans-serif; font-size:.58em; font-weight:600; letter-spacing:2px; text-transform:uppercase; line-height:1 }
.mc-body p { margin:18px 0 0; font-size:16px; line-height:1.65; color:var(--soft); max-width:none }
.mc-body strong { font-weight:600; color:var(--text) }
.mc-sig { display:flex; align-items:center; gap:12px; margin-top:22px; padding-top:16px; border-top:1px solid rgba(0,0,0,.08) }
.mc-sig-name { display:block; font-family:"Cormorant Garamond",serif; font-size:20px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--text); line-height:1.1 }
.mc-sig-role { display:block; font-size:13px; color:var(--soft); margin-top:2px }
.mc-body .mc-ps { margin-top:20px; font-size:16px; color:var(--soft) }
.mc-tools { display:flex; align-items:center; gap:14px; margin:18px 26px 0; padding:8px 14px; background:#F5F0E8; border-radius:8px; color:#8A7E70; font-size:14px }
.mc-tools b { width:1px; height:18px; background:rgba(0,0,0,.12) }
.mc-font { font-family:"Cormorant Garamond",serif; font-size:15px }
.mc-foot { display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:center; gap:22px; padding:18px 26px 24px }
.mc-icons { display:flex; gap:16px; color:#8A7E70 }
.mc-icons svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }

/* ── Split layout ── */
.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:start;
}

/* ── Section backgrounds ── */
/* Each section starts on the colour the previous one ends on (cream #F5F0E8 / sand #EFE7DC) */
.problem-section { background:linear-gradient(180deg,#EFE7DC 0%,#F5F0E8 100%) }
.section-alt     { background:linear-gradient(180deg,#F5F0E8 0,#EFE7DC 420px,#EFE7DC 100%) }
.why-section     { background:linear-gradient(180deg,#EFE7DC 0%,#F5F0E8 100%) }
.founder-section { background:linear-gradient(180deg,#EFE7DC 0%,#F5F0E8 100%) }

/* ── Services bento ── */
.svc-hd { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap }
.svc-e2e { display:flex; flex-direction:column; align-items:flex-start; gap:14px; flex-wrap:wrap; margin:14px 0 18px; padding:0 4px 14px; border-bottom:1px solid var(--line) }
.svc-e2e-lb { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold) }
.svc-e2e p { margin:6px 0 0; font-size:14px; line-height:1.55; color:var(--text) }
@media(min-width:1100px) { .svc-e2e p { white-space:nowrap } }
.svc-e2e-steps { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--soft) }
.svc-e2e-steps i { width:28px; height:1px; background:var(--gold); position:relative }
.svc-e2e-steps i::after { content:""; position:absolute; right:-1px; top:-3px; border:3.5px solid transparent; border-left:5px solid var(--gold); border-right:0 }

.svc-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px }
.svc-s4 { grid-column:span 4 } .svc-s3 { grid-column:span 3 } .svc-s2 { grid-column:span 2 } .svc-s6 { grid-column:span 6 }
.svc-tile { background:var(--card); border:1px solid rgba(0,0,0,.07); border-radius:14px; padding:22px 24px; display:flex; flex-direction:column; gap:9px }
.svc-dark { background:#2B2420; border-color:#2B2420; color:#F5F0E8 }
.svc-ph { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--gold) }
.svc-tt { font-size:26px; font-weight:500; margin:0 }
.svc-dark .svc-tt { color:#F5F0E8 }
.svc-tx { margin:0; font-size:13.5px; line-height:1.65; color:var(--soft); max-width:460px }
.svc-dark .svc-tx { color:#B9AFA2 }
.svc-s6 .svc-tx { max-width:none }

.svc-inc { margin-top:auto; padding-top:8px }
.svc-inc b { display:block; margin-bottom:6px; font-size:10.5px; font-weight:500; letter-spacing:2px; text-transform:uppercase; color:var(--text) }
.svc-inc ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px }
.svc-inc li { display:flex; gap:7px; align-items:baseline; font-size:12.5px; line-height:1.5; color:var(--soft) }
.svc-inc li::before { content:"✓"; color:var(--gold); font-weight:600 }
.svc-dark .svc-inc b { color:#F5F0E8 }
.svc-dark .svc-inc li { color:#B9AFA2 }
.svc-dark .svc-chip { border-color:rgba(245,240,232,.22); color:#B9AFA2 }
.svc-dark .svc-chip-hi { border-color:var(--gold); color:#F5F0E8 }
.svc-tan { background:#C7AE96; border-color:#C7AE96 }
.svc-tan .svc-ph, .svc-tan .svc-inc li::before { color:#5C4630 }
.svc-tan .svc-tx, .svc-tan .svc-inc li, .svc-tan .svc-cy-st small { color:#3E3329 }
.svc-tan .svc-cy ol::before { background:rgba(17,17,17,.25) }
.svc-tan .svc-cy-hi .svc-fl-n { background:#F5F0E8; color:#111 }
.svc-tan .svc-cy-loop { border-color:rgba(17,17,17,.3); color:#111 }

.svc-chip { font-size:12px; letter-spacing:.5px; border:1px solid rgba(0,0,0,.12); border-radius:999px; padding:6px 14px; color:var(--soft); white-space:nowrap }
.svc-chip-hi { border-color:var(--gold); color:var(--text) }
.svc-chip-ink { border-color:var(--text); color:var(--text) }
.svc-chips { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0 2px }
.svc-inbox { display:flex; align-items:center; gap:12px; padding:4px 0 2px }
.svc-inbox i { flex:1; height:1px; background:var(--gold); opacity:.8 }
.svc-spam { text-decoration:line-through; opacity:.55 }

.svc-stage { position:relative; height:160px; margin:6px 0 4px; overflow:hidden; border-radius:10px }
.svc-step { position:absolute; bottom:0; border-radius:8px 8px 0 0 }
.svc-stk { position:absolute; font-family:Inter,sans-serif; font-weight:600; font-size:13.5px; line-height:1.05; letter-spacing:1.2px; text-transform:uppercase; padding:9px 14px; border-radius:10px; border:3px solid var(--card); box-shadow:0 6px 14px rgba(17,17,17,.12); white-space:nowrap }
.svc-stk-ink { background:#111; color:#F5F0E8 }
.svc-stk-gold { background:var(--gold); color:var(--card) }
.svc-stk-cream { background:var(--bg); color:#111; border-color:#111 }
.svc-fl { list-style:none; margin:6px 0 4px; padding:0; position:relative }
.svc-fl::before { content:""; position:absolute; left:15px; top:16px; bottom:16px; width:1px; background:#D9CDBA }
.svc-fl-row { position:relative; display:flex; align-items:center; gap:12px; padding:6px 0 }
.svc-fl-n { flex:none; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; background:#111; color:#F5F0E8; font:600 11px/1 Inter,sans-serif; letter-spacing:.5px }
.svc-fl-hi .svc-fl-n { background:var(--gold) }
.svc-fl-t { display:flex; flex-direction:column; gap:2px; min-width:0 }
.svc-fl-t b { font:600 13px/1.2 Inter,sans-serif; letter-spacing:1px; text-transform:uppercase; color:#111 }
.svc-fl-t small { font:400 12.5px/1.3 Inter,sans-serif; color:#6B6358 }
.svc-fl-more { margin:2px 0 4px 43px; font:500 11px/1.3 Inter,sans-serif; letter-spacing:1px; text-transform:uppercase; color:#9E7B4F }
.svc-cy { margin:8px 0 4px }
.svc-cy ol { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); position:relative }
.svc-cy ol::before { content:""; position:absolute; top:15px; left:12.5%; right:12.5%; height:1px; background:#D9CDBA }
.svc-cy-st { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px }
.svc-cy-hi .svc-fl-n { background:var(--gold) }
.svc-cy-st b { margin-top:4px; font:600 12px/1.2 Inter,sans-serif; letter-spacing:1px; text-transform:uppercase; color:#111 }
.svc-cy-st small { font:400 12px/1.3 Inter,sans-serif; color:#6B6358 }
.svc-cy-loop { margin:10px auto 0; width:max-content; padding:5px 12px; border:1px solid #D9CDBA; border-radius:999px; font:500 11px/1 Inter,sans-serif; letter-spacing:1px; text-transform:uppercase; color:#9E7B4F }

.svc-cal { padding:4px 0 2px }
.svc-cal-row, .svc-cal-line, .svc-cal-days { display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.svc-mail { background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:8px; padding:10px; display:flex; flex-direction:column; gap:6px; box-shadow:0 4px 10px rgba(17,17,17,.05) }
.svc-mail i { display:block; height:6px; border-radius:3px; background:var(--surface-2); width:100% }
.svc-mail i:first-child { height:9px; background:#D9CDBD }
.svc-mail-hi { border-color:var(--gold) }
.svc-mail-hi i:first-child { background:var(--gold) }
.svc-cal-line { position:relative; margin:10px 0 4px; justify-items:center }
.svc-cal-line::before { content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:#CDBFAE }
.svc-tick { position:relative; width:20px; height:20px; border-radius:50%; background:var(--card); border:1px solid #CDBFAE; color:var(--gold); font-size:11px; display:flex; align-items:center; justify-content:center }
.svc-tick-hi { background:var(--gold); border-color:var(--gold); color:var(--card) }
.svc-cal-days { justify-items:center; text-align:center; font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#8A7E70 }

.svc-ab { padding:6px 0 0 }
.svc-ab-bars { display:flex; gap:16px; align-items:flex-end; height:92px; max-width:260px }
.svc-ab-col { flex:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:6px }
.svc-ab-col b { font-family:"Cormorant Garamond",serif; font-size:24px; font-weight:600; color:var(--gold); line-height:1 }
.svc-ab-col > span { font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:#8A7E70; white-space:nowrap }
.svc-ab-bar { width:100%; flex:none; border:1px solid #CDBFAE; border-radius:6px }
.svc-ab-win { background:var(--gold); border-color:var(--gold) }
.svc-ab-cap { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--soft) }
.svc-ab-cap em { font-style:normal; font-size:11px; color:#A79B8C }
.svc-curve { width:100%; height:50px; display:block; margin:4px 0 2px }

/* ── Why section ── */
.why-grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:56px;
  align-items:start;
}
.why-content { border-top:1px solid var(--line) }
.why-item { padding:24px 0; border-bottom:1px solid var(--line) }
.why-item span { display:block; color:var(--gold); font-size:12px; letter-spacing:2px; margin-bottom:18px }
.why-item h3 { font-size:26px; margin-bottom:14px }
.why-item p  { max-width:560px }
.why-btn {
  display:flex;
  justify-content:flex-start;
  margin-top:40px;
}
.why-btn .primary { display:inline-flex; align-items:center; justify-content:center }

/* ── Opportunity section ── */
.opportunity-section h2 { max-width:900px; margin-bottom:24px }
.opportunity-intro {
  max-width:620px;
  margin:0 0 22px 0;
  font-size:18px;
  line-height:1.85;
  color:var(--soft);
}
.opportunity-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);
  background:#FAF7F2;
  overflow:hidden;
}
.opportunity-card {
  padding:40px 34px;
  border-right:1px solid var(--line);
  min-width:0;
  min-height:250px;
}
.opportunity-card:last-child { border-right:none }
.metric-label {
  display:block;
  font-family:"Inter",sans-serif;
  font-size:10px;
  line-height:1.35;
  letter-spacing:2.6px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:22px;
}
.opportunity-card > span {
  display:block;
  font-family:"Inter",sans-serif;
  font-weight:300;
  letter-spacing:-.055em;
  font-size:48px;
  line-height:1;
  color:var(--gold);
  margin-bottom:22px;
}
.opportunity-card p { max-width:225px; font-size:14px; line-height:1.8; color:var(--soft) }
.metric-source { display:block; font-size:10px; color:var(--soft); opacity:0.45; margin-top:10px; font-family:"Inter",sans-serif; letter-spacing:0.5px; font-style:italic }
.opportunity-cta { margin-top:36px; text-align:center }
.opportunity-cta p { font-size:18px; color:var(--soft); margin-bottom:24px }
.opportunity-cta .btn-primary {
  display:inline-block;
  background:var(--text);
  color:var(--bg);
  padding:15px 24px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:11px;
  border:1px solid var(--text);
  transition:background .3s ease, color .3s ease;
}
.opportunity-cta .btn-primary:hover { background:transparent; color:var(--text) }

/* ── FAQ section ── */
.faq-section {
  background:
    radial-gradient(circle at 75% 25%,rgba(158,123,79,.10),transparent 35%),
    linear-gradient(180deg,#F5F0E8 0%,#EFE7DC 100%);
}
.faq-section h2 { max-width:700px; margin-bottom:32px }
.faq-list { border-top:1px solid var(--line) }
.faq-item { padding:26px 0; border-bottom:1px solid var(--line); transition:padding .3s ease }
.faq-item.open { padding-left:10px }
.faq-item h3 {
  font-size:24px;
  font-family:"Cormorant Garamond",serif;
  font-weight:500;
  line-height:1.2;
  color:var(--text);
  margin-bottom:0;
  cursor:pointer;
  position:relative;
  padding-right:48px;
}
.faq-item h3::after {
  content:'+';
  font-family:"Inter",sans-serif;
  font-size:24px;
  font-weight:300;
  position:absolute;
  right:0;
  top:0;
  transition:transform .3s ease;
  color:var(--soft);
}
.faq-item.open h3::after { transform:rotate(45deg) }
.faq-item p {
  max-width:900px;
  font-size:16px;
  line-height:1.9;
  color:var(--soft);
  overflow:hidden;
  max-height:0;
  opacity:0;
  transition:max-height .4s ease, opacity .3s ease, margin-top .3s ease;
  margin-top:0;
}
.faq-item.open p { max-height:400px; opacity:1; margin-top:18px }

/* ── Book audit section ── */
.book-audit-section {
  background:
    radial-gradient(circle at 75% 25%,rgba(158,123,79,.10),transparent 35%),
    linear-gradient(180deg,#F5F0E8 0%,#EFE7DC 100%);
}
.book-audit-section h2 { max-width:900px; margin-bottom:24px }
.audit-subtitle { font-size:18px; color:var(--soft); margin-bottom:28px }
.audit-note {
  margin-bottom:32px;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
}
.calendly-inline-widget {
  border:1px solid var(--line);
  background:#FAF7F2;
  overflow:hidden;
}

/* ── Founder section ── */
.founder-container { max-width:760px; margin:0 auto; text-align:center }
.section-eyebrow { font-weight:500;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:3.5px;
  font-size:13px;
  margin-bottom:20px;
}
.founder-title { font-size:56px; line-height:1.1; margin:20px 0 30px }
.founder-description { max-width:650px; margin:0 auto 18px; color:var(--soft); font-size:18px; line-height:1.8 }
.founder-cta { margin-top:32px; display:flex; justify-content:center }

/* ── Footer ── */
footer { padding:50px 0; color:var(--soft); font-size:13px; background:#EFE7DC }
.footer-disclaimer { margin-bottom:24px; padding-top:24px; border-top:1px solid var(--line) }
.footer-disclaimer p { max-width:760px; font-size:12px; line-height:1.6; color:var(--soft); opacity:.75 }
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:30px;
}

/* =====================================================
   HERO RADAR VISUAL
===================================================== */

.visual.hero-radar {
  height:640px;
  width:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.035));
}

/* Diagonal line */
.visual.hero-radar .visual-line {
  position:absolute;
  width:660px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);
  transform:rotate(-28deg);
  z-index:1;
}

/* Orbit rings */
.visual.hero-radar .orbit {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(0,0,0,.095);
  border-radius:50%;
  z-index:2;
}
.visual.hero-radar .orbit.one   { width:520px; height:520px }
.visual.hero-radar .orbit.two   { width:380px; height:380px }
.visual.hero-radar .orbit.three { width:240px; height:240px }

/* Core sphere */
.visual.hero-radar .core {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:110px; height:110px;
  border-radius:50%;
  background:radial-gradient(circle,#EDE5D8,#D8CCBC);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 0 55px rgba(158,123,79,.10),0 0 95px rgba(158,123,79,.05);
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
}
.core-email {
  width:42px; height:42px;
  flex-shrink:0;
  display:block;
}

/* Static labels — no connector lines */
.visual.hero-radar .radar-label {
  position:absolute;
  z-index:7;
  font-family:"Inter",sans-serif;
  font-size:10px;
  letter-spacing:3.6px;
  line-height:1;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  white-space:nowrap;
}
.radar-label::before, .radar-label::after { display:none; content:none }
.visual.hero-radar .label-1 { top:168px;    left:-45px  }
.visual.hero-radar .label-2 { top:300px;    right:-50px }
.visual.hero-radar .label-3 { bottom:168px; left:-25px  }

/* Hide unused dot elements */
.orbit-dot, .spark, .dot { display:none }

/* ── Inner orbit (Shopify + Klaviyo) ── */
/* CSS rotates the layer; JS counter-rotates each card to stay upright */
.tech-orbit-inner {
  display:block;
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  z-index:9;
  pointer-events:none;
  transform-origin:0 0;
  animation:gvOrbitLayer 26s linear infinite;
}
@keyframes gvOrbitLayer {
  from { transform:rotate(0deg) }
  to   { transform:rotate(360deg) }
}

/* ── Outer orbit (GA + Meta) ── */
/* JS drives both position and counter-rotation — no CSS animation needed */
.tech-orbit-outer {
  display:block;
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  z-index:9;
  pointer-events:none;
  transform-origin:0 0;
}

/* Logo anchors — positioned by CSS (inner) or JS (outer) */
.logo-anchor { position:absolute; top:0; left:0; width:0; height:0 }
.logo-shopify { transform:rotate(60deg)  translateX(120px) }
.logo-klaviyo { transform:rotate(240deg) translateX(120px) }

/* Logo card container — transparent, no background */
.logo-card,
.logo-klaviyo-card,
.logo-shopify-card,
.logo-ga-card,
.logo-meta-card {
  position:absolute;
  top:0; left:0;
  border:0; outline:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translate(-50%,-50%);
  animation:none;
}
.logo-card::before, .logo-card::after { display:none; content:none }

/* Logo images */
.logo-card img {
  display:block;
  object-fit:contain;
  filter:none;
  mix-blend-mode:multiply;
  opacity:1;
  background:transparent;
  border:0;
  box-shadow:none;
}
.logo-shopify img { width:94px;  height:94px }
.logo-klaviyo img { width:150px; height:auto }
.logo-ga-card  img { width:130px; height:auto; mix-blend-mode:multiply; opacity:.88 }
.logo-meta-card img { width:90px;  height:auto; mix-blend-mode:multiply; opacity:.88 }
.logo-tiktok-card img { width:54px; height:auto; display:block }

/* ── Label orbit (orbit.three) ── */
.tech-orbit-labels {
  display:block;
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  z-index:6;
  pointer-events:none;
  transform-origin:0 0;
}
.label-anchor {
  position:absolute;
  top:0; left:0;
  width:0; height:0;
}
.label-pill {
  position:absolute;
  top:0; left:0;
  transform:translate(-50%,-50%);
  white-space:normal;
  text-align:center;
  font-family:"Inter",sans-serif;
  font-size:9px;
  letter-spacing:2.4px;
  line-height:1.7;
  text-transform:uppercase;
  color:var(--gold);
  border:1px solid rgba(158,123,79,.35);
  background:rgba(245,240,232,.75);
  backdrop-filter:blur(6px);
  padding:8px 14px;
  border-radius:20px;
}

/* ── Hide middle orbit layer (unused) ── */
.tech-orbit-middle { display:none }

/* ── Hamburger menu ── */
.hamburger {
  display:none;
  flex-direction:column;
  gap:5px;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:8px;
}
.hamburger span {
  display:block;
  width:22px;
  height:1.5px;
  background:var(--text);
  transition:all .25s ease;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

.mobile-menu {
  display:none;
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(245,240,232,.97);
  backdrop-filter:blur(18px);
  z-index:998;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:36px;
}
.mobile-menu.open { display:flex }
.mobile-menu a {
  font-family:"Cormorant Garamond",serif;
  font-size:40px;
  color:var(--text);
  text-decoration:none;
  letter-spacing:-0.5px;
}
.mobile-menu a:hover { color:var(--gold) }
.mobile-menu .mobile-cta {
  margin-top:8px;
  font-family:"Inter",sans-serif;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  border:1px solid var(--text);
  padding:14px 28px;
}
.mobile-menu .mobile-lang {
  display:flex;
  gap:0;
  border:1px solid var(--line);
  margin-top:8px;
}
.mobile-menu .mobile-lang a {
  background:transparent;
  border:0;
  color:var(--soft);
  padding:12px 20px;
  cursor:pointer;
  font-size:11px;
  letter-spacing:2px;
}
.mobile-menu .mobile-lang a { text-decoration:none; display:block }
.mobile-menu .mobile-lang .active { background:var(--text); color:var(--bg) }

/* =====================================================
   ADD-ONS SECTION
===================================================== */
.addons-inner {
  margin: 48px 0 0;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.addons-header {
  margin-bottom: 32px;
}
.addons-header h2 {
  margin: 12px 0 24px;
}
.addons-requirement {
  margin-top: 20px;
  font-size: 14px;
  font-style: italic;
  color: var(--soft);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
  line-height: 1.7;
}
.addons-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 28px;
}
.addon-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 32px;
  background: var(--card);
  border: 1px solid var(--line);
  transition: border-color .2s;
}
.addon-card:hover {
  border-color: var(--gold);
}
.addon-arrow {
  font-size: 20px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.addon-card h4 {
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 4px;
}
.addon-card p {
  font-size: 13.5px;
  color: var(--soft);
  line-height: 1.6;
  margin: 0;
}
.addons-cta {
  text-align: center;
}

/* =====================================================
   RESPONSIVE
===================================================== */
@media(max-width:900px) {
  /* Nav */
  .nav-links { display:none }
  .hamburger { display:flex }
  .logo img  { width:180px }
  .nav-inner { height:70px }

  /* Sections */
  section { padding:52px 0 }

  /* Hero */
  .hero { padding-top:90px; min-height:auto; padding-bottom:40px }
  .problem-section { padding-top:40px; padding-bottom:40px }
  #services { padding-top:40px }
  .hero-grid { grid-template-columns:1fr; gap:0 }

  /* Hero radar — scaled down on mobile */
  .visual.hero-radar {
    display:flex;
    transform:scale(0.55);
    transform-origin:center center;
    height:360px;
    margin-top:0px;
    margin-bottom:-60px;
  }
  .hero { overflow:hidden }

  /* Split */
  .split { grid-template-columns:1fr; gap:0 }

  /* Services bento */
  .svc-s6, .svc-s4, .svc-s3, .svc-s2 { grid-column:span 6 }
  .svc-hd { gap:16px }

  /* Footer */
  .footer-inner { flex-direction:column }

  /* Why */
  .why-grid { grid-template-columns:1fr; gap:40px }
  .why-left { min-height:560px }
  .why-left .visual.hero-radar { top:380px; transform:translate(-50%,-50%) scale(.55); margin:0 }
  .why-btn  { margin-top:42px }

  /* Opportunity */
  .opportunity-grid { grid-template-columns:1fr }
  .opportunity-card {
    border-right:none;
    border-bottom:1px solid var(--line);
    min-height:auto;
  }
  .opportunity-card:last-child { border-bottom:none }
  .opportunity-card > span { font-size:40px }

  /* FAQ */
  .faq-section h2 { margin-bottom:40px }
  .faq-item       { padding:22px 0 }
  .faq-item h3    { font-size:22px }
  .faq-item p     { font-size:16px; line-height:1.8 }

  /* Founder */
  .founder-title { font-size:clamp(32px,8vw,46px); margin:16px 0 24px }
  .founder-description { font-size:16px }

  /* Book audit */
  .audit-subtitle { font-size:18px; line-height:1.7 }
  .calendly-inline-widget { height:850px !important }

  /* Typography */
  h2 { font-size:clamp(28px,7vw,48px) }
}

@media(max-width:480px) {
  .mc-bar, .mc-body, .mc-foot { padding-left:18px; padding-right:18px }
  .mc-row, .mc-tools { margin-left:18px; margin-right:18px }
  .mc-tools { gap:10px; overflow:hidden }
  .mc-icons { display:none }

  .svc-stage { height:150px }
  .svc-stk { font-size:10.5px; letter-spacing:.8px; padding:6px 9px; border-width:2px }

  section { padding:44px 0 }
  .hero   { padding-top:80px }
  h1 { font-size:clamp(32px,8vw,48px) }
  h2 { font-size:clamp(26px,7vw,40px) }
  .founder-title { font-size:clamp(28px,8vw,38px) }
  .opportunity-card > span { font-size:36px }
  .faq-item h3 { font-size:20px }
}