/* Page-level styles for shopconsultant.com, layered on the Modernist tokens in styles.css */
html { scroll-behavior: smooth; }
body { margin: 0; text-wrap: pretty; }
a { color: var(--color-text); text-decoration: none; }
a:hover { color: var(--color-accent); }
@keyframes wordIn { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } }

.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 60; background: var(--color-accent); }

.nav { position: sticky; top: 0; z-index: 50; background: var(--color-bg); padding-inline: clamp(20px, 5vw, 72px); }
.nav-brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); }
.logo-sq { width: 16px; height: 16px; background: var(--color-accent); flex: none; }
.logo-word { font-family: 'Saira', sans-serif; font-size: 24px; letter-spacing: -0.035em; line-height: 1; margin-top: -3px; }
.logo-word b { font-weight: 800; }
.logo-word span { font-weight: 300; }
.nav-link.active { color: var(--color-accent); }
.nav .btn-primary, .nav .btn-primary:hover { color: var(--color-bg); }
@media (max-width: 760px) { .nav-link { display: none; } }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.kicker { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 16px; }
.label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-700); }
.h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
.h2-sm { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.muted { color: var(--color-neutral-800); }
.btn-lg { padding: 14px 20px; font-size: 15px; }
.btn-primary, .btn-primary:hover { color: var(--color-bg); }
.btn-arrow { min-width: 220px; justify-content: space-between; }

/* hero */
.hero { padding: clamp(72px, 12vw, 140px) 0 clamp(56px, 8vw, 96px); }
.hero h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 0 -0.05em; }
.hero h1 > span { display: block; }
.hero .l2 { white-space: nowrap; }
.hero .word { color: var(--color-accent); }
.hero .word > span { display: inline-block; animation: wordIn .5s cubic-bezier(.2,.7,.2,1); }
.hero .word i { font-style: normal; color: var(--color-text); }
@media (max-width: 700px) { .hero .l2 { white-space: normal; } .hero .word { display: block; } }
.hero-sub { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; max-width: 56ch; margin: 40px 0 0; color: var(--color-neutral-800); }
.hero-ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 32px; }

/* ruled grid */
.ruled { display: grid; border-top: 2px solid var(--color-divider); border-left: 2px solid var(--color-divider); }
.ruled > * { border-right: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.strip { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.strip a { display: flex; flex-direction: column; gap: 28px; padding: 20px 20px 24px; color: var(--color-text); transition: background .2s; }
.strip a:hover { background: var(--color-surface); color: var(--color-text); }
.num-sm { font-size: 13px; letter-spacing: .08em; font-feature-settings: 'tnum' 1; color: var(--color-accent-700); }
.strip b { font-family: var(--font-heading); font-weight: 800; font-size: 18px; line-height: 1.2; }

/* services */
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.sec-head p { margin: 0; max-width: 40ch; color: var(--color-neutral-700); }
.rows { border-top: 2px solid var(--color-text); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px clamp(24px, 4vw, 64px); padding: 36px 0; border-bottom: 2px solid var(--color-divider); transition: background .25s, padding .25s; scroll-margin-top: 80px; }
.row:hover { background: var(--color-surface); padding-left: 20px; padding-right: 20px; }
.row-title { display: flex; gap: 16px; align-items: baseline; }
.row-num { font-weight: 800; font-size: 15px; font-feature-settings: 'tnum' 1; transition: color .25s; }
.row:hover .row-num { color: var(--color-accent); }
.row h3 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -0.01em; }
.row p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--color-neutral-800); }
.row-kpi { display: flex; flex-direction: column; gap: 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* approach */
.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.steps > div { padding: 24px 24px 32px; display: flex; flex-direction: column; gap: 40px; }
.big-num { font-weight: 800; font-size: 40px; line-height: 1; color: var(--color-accent); }
.steps h4 { margin: 0 0 8px; }
.steps p { margin: 0; color: var(--color-neutral-800); }

/* about */
.about { padding: clamp(80px, 10vw, 128px) 0; }
.about-in { display: flex; flex-direction: column; gap: 28px; max-width: 880px; }
.aud { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 2px solid var(--color-divider); }
.aud > div { padding: 20px 20px 20px 0; border-bottom: 2px solid var(--color-divider); }
.aud .label { margin-bottom: 8px; }
.aud p { margin: 0; }

/* banner */
.banner { background: var(--color-accent); color: var(--color-bg); }
.banner h2 { font-size: clamp(36px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 0 -0.05em; max-width: 18ch; }
.banner .wrap { padding-top: clamp(72px, 9vw, 112px); padding-bottom: clamp(72px, 9vw, 112px); }

/* contact */
.contact { max-width: 1200px; margin: 0 auto; padding: clamp(72px, 9vw, 112px) clamp(20px, 5vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(40px, 6vw, 96px); scroll-margin-top: 40px; }
.contact-l { display: flex; flex-direction: column; gap: 20px; }
.contact-l .kicker { margin: 0; }
.mail { font-weight: 800; border-bottom: 2px solid var(--color-accent); align-self: flex-start; padding-bottom: 2px; }
.form { display: flex; flex-direction: column; gap: 20px; border-top: 2px solid var(--color-text); padding-top: 28px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.seg { display: flex; flex-wrap: wrap; }
.seg-opt { flex: 1; white-space: nowrap; }
.chip { font-family: var(--font-body); font-size: 13px; padding: 7px 12px; cursor: pointer; border: 1px solid var(--color-divider); background: transparent; color: var(--color-text); }
.chip[aria-pressed="true"] { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); }
.form .btn-block { padding: 14px 16px; font-size: 15px; justify-content: space-between; }
.err { font-size: 12px; color: var(--color-accent-700); margin: 6px 0 0; }
.done { border-top: 2px solid var(--color-text); padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.done .sq { width: 12px; height: 12px; background: var(--color-accent); }
.done h3, .done p { margin: 0; }
.done .btn { align-self: flex-start; margin-top: 8px; }

footer { border-top: 2px solid var(--color-divider); }
footer .wrap { padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--color-neutral-700); }

section[id] { scroll-margin-top: 64px; }

/* ---------- audit pages ---------- */
.a-hero { padding: clamp(64px, 10vw, 120px) 0 clamp(48px, 6vw, 72px); }
.a-hero h1 { font-size: clamp(40px, 6vw, 80px); line-height: 1.04; letter-spacing: -0.025em; margin: 0 0 0 -0.05em; max-width: 16ch; }
.a-hero h1 em { font-style: normal; color: var(--color-accent); }
.meta { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin-top: 48px; }
.meta > div { padding: 18px 20px 20px; }
.meta .label { margin-bottom: 8px; }
.meta b { font-size: 16px; }
.meta a { border-bottom: 2px solid var(--color-accent); }

.score { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.score > div { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 28px; }
.score .big-num { font-size: clamp(44px, 5vw, 64px); }
.score p { margin: 0; color: var(--color-neutral-800); }

.a-sec { padding: clamp(72px, 9vw, 112px) 0 0; }
.find { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px clamp(24px, 4vw, 56px); padding: 32px 0; border-bottom: 2px solid var(--color-divider); }
.find-t { display: flex; flex-direction: column; gap: 12px; }
.find-t h3 { margin: 0; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; letter-spacing: -0.01em; }
.find .label { margin-bottom: 6px; }
.find p { margin: 0; line-height: 1.65; color: var(--color-neutral-800); }
.sev { align-self: flex-start; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; font-weight: 600; }
.sev-high { background: var(--color-accent); color: var(--color-bg); }
.sev-med { border: 1px solid var(--color-accent); color: var(--color-accent-700); }
.sev-low { border: 1px solid var(--color-divider); color: var(--color-neutral-700); }

.plan { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.plan > div { padding: 24px 24px 28px; }
.plan h4 { margin: 0 0 16px; }
.plan ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; color: var(--color-neutral-800); }

.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: start; }
.proof ul { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-divider); }
.proof li { padding: 14px 0; border-bottom: 2px solid var(--color-divider); display: flex; gap: 16px; }
.proof li .num-sm { flex: none; padding-top: 2px; }
.fine { font-size: 13px; color: var(--color-neutral-700); max-width: 72ch; }

/* scroll reveal */
.rv-pending { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.rv-pending.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv-pending { opacity: 1; transform: none; transition: none; }
  .hero .word > span { animation: none; }
  .row, .row-num { transition: none; }
}
@media print {
  .progress, .nav .btn, .nav-link { display: none; }
  .nav { position: static; }
  .rv-pending { opacity: 1; transform: none; }
  .find, .score > div, .plan > div { break-inside: avoid; }
}

/* ================= v2: modern type + mobile form ================= */
:root {
  --font-heading: "Geist", system-ui, -apple-system, sans-serif;
  --font-body: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;
  --font-heading-weight: 650;
}
body { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01" 1; }
h1, h2, h3, h4 { letter-spacing: -0.03em; }
.hero h1, .a-hero h1 { font-weight: 650; letter-spacing: -0.05em; line-height: 0.98; }
.h2, .banner h2 { font-weight: 650; letter-spacing: -0.045em; line-height: 1; }
.h2-sm { font-weight: 650; letter-spacing: -0.04em; }
.row h3, .find-t h3 { font-weight: 600; letter-spacing: -0.025em; }
.steps h4, .score h4, .plan h4 { font-weight: 600; letter-spacing: -0.02em; }
.big-num { font-weight: 500; letter-spacing: -0.04em; }
.kicker, .label, .num-sm, .row-num, .sev, .meta .label, .tag {
  font-family: var(--font-mono); font-weight: 500;
}
.kicker { font-size: 12px; letter-spacing: .06em; }
.label { font-size: 11.5px; letter-spacing: .06em; }
.btn { font-weight: 600; letter-spacing: -0.01em; }
.hero-sub { letter-spacing: -0.01em; }
.row p { font-size: 16px; }

/* bigger "what improves" tags */
.tag { font-size: 13px; padding: 7px 12px; letter-spacing: 0; line-height: 1.2; }
.row-kpi .tags { gap: 8px; }
@media (max-width: 600px) {
  .tag { font-size: 14px; padding: 9px 14px; }
  .row { padding: 28px 0; gap: 16px; }
  .row:hover { padding-left: 0; padding-right: 0; background: none; }
}

/* contact: dark band */
.contact-band { background: var(--color-text); color: var(--color-bg); }
.contact-band .kicker { color: var(--color-accent-400); }
.contact-band p { color: color-mix(in srgb, var(--color-bg) 78%, transparent); }
.contact-band h2, .contact-band h3 { color: var(--color-bg); }
.contact-points { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.contact-points li { display: flex; gap: 12px; align-items: baseline; color: color-mix(in srgb, var(--color-bg) 88%, transparent); }
.contact-points li::before { content: ""; width: 8px; height: 8px; background: var(--color-accent); flex: none; transform: translateY(-1px); }
.contact-band .form { border-top: 0; padding-top: 0; gap: 22px; }
.contact-band .field > label { font-size: 13px; font-weight: 500; margin-bottom: 8px; color: color-mix(in srgb, var(--color-bg) 85%, transparent); }
.contact-band .field > label i { font-style: normal; color: var(--color-accent-400); }
.contact-band .input {
  font-size: 16px; /* 16px stops iOS from zooming on focus */
  min-height: 54px; padding: 14px 16px;
  background: color-mix(in srgb, var(--color-bg) 7%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--color-bg) 20%, transparent);
  color: var(--color-bg); caret-color: var(--color-accent-400);
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.contact-band .input::placeholder { color: color-mix(in srgb, var(--color-bg) 38%, transparent); }
.contact-band .input:hover { border-color: color-mix(in srgb, var(--color-bg) 40%, transparent); }
.contact-band .input:focus, .contact-band .input:focus-visible {
  outline: none; border-color: var(--color-accent); background: color-mix(in srgb, var(--color-bg) 11%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 25%, transparent);
}
.contact-band .input[aria-invalid="true"] { border-color: var(--color-accent-400); }
.contact-band textarea.input { min-height: 130px; }
.contact-band .seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid color-mix(in srgb, var(--color-bg) 20%, transparent); }
.contact-band .seg-opt { justify-content: center; min-height: 50px; font-size: 15px; padding: 10px 8px; }
.contact-band .seg-opt + .seg-opt { border-left: 1.5px solid color-mix(in srgb, var(--color-bg) 20%, transparent); }
.contact-band .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-bg) 8%, transparent); }
@media (max-width: 520px) {
  .contact-band .seg { grid-template-columns: 1fr 1fr; }
  .contact-band .seg-opt:nth-child(3) { border-left: 0; }
  .contact-band .seg-opt:nth-child(n+3) { border-top: 1.5px solid color-mix(in srgb, var(--color-bg) 20%, transparent); }
}
.contact-band .chip {
  font-size: 15px; padding: 11px 16px; min-height: 46px; color: var(--color-bg);
  border: 1.5px solid color-mix(in srgb, var(--color-bg) 22%, transparent); transition: background .15s, border-color .15s;
}
.contact-band .chip:hover { border-color: color-mix(in srgb, var(--color-bg) 50%, transparent); }
.contact-band .chip[aria-pressed="true"] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.contact-band .chip[aria-pressed="true"]::before { content: "✓ "; }
.contact-band .form .btn-block { min-height: 60px; font-size: 17px; padding: 16px 20px; margin-top: 4px; }
.contact-band .btn-primary[disabled] { opacity: .7; cursor: progress; }
.contact-band .btn-secondary { color: var(--color-bg); border-color: color-mix(in srgb, var(--color-bg) 35%, transparent); }
.contact-band .btn-secondary:hover { background: color-mix(in srgb, var(--color-bg) 10%, transparent); }
.contact-band .done { border-top: 0; padding-top: 0; }
.contact-band .done h3 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.035em; }
.form-err { margin: 0; padding: 12px 14px; border-left: 3px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-bg) !important; font-size: 15px; }
.form-err a { color: inherit; text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 600px) {
  .contact { padding-top: 64px; padding-bottom: 72px; gap: 40px; }
}