/* Noemsø Designs — Business | AI-Empowered site
   Brand: teal #2d7d7d / cream #FBF8F2 / charcoal #242833. Editorial, anti-slop. */

:root{
  --teal:#2d7d7d;
  --teal-deep:#235f5f;
  --teal-light:#3f8488;
  --teal-wash:#e7f0ef;
  --cream:#fbf8f2;
  --cream-2:#f4eee3;
  --ink:#242833;
  --ink-soft:#414856;
  --muted:#5b6b6b;
  --line:#e3ded3;
  --white:#ffffff;
  --gold:#c9a35b;
  /* Contrasting accent. Terracotta sits opposite teal on the colour wheel, so
     it warms the cream without competing with the brand green. Borders only. */
  --accent:#c2613d;
  --accent-deep:#a34a2a;
  --accent-wash:#f9e8e0;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 18px 50px -28px rgba(36,40,51,.45);
  --shadow-sm:0 8px 24px -16px rgba(36,40,51,.4);
  --maxw:1140px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Assistant",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:92px}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.12;color:var(--ink);letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,4.2vw,3.4rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:1.4rem}
p{margin:0 0 1rem}
a{color:var(--teal-deep);text-decoration:none}
a:hover{color:var(--teal)}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-weight:700;color:var(--teal);margin-bottom:.9rem}
.lead{font-size:1.22rem;color:var(--ink-soft)}
.center{text-align:center}
.muted{color:var(--muted)}
section{padding:84px 0}
.section-tight{padding:56px 0}
/* page-title intro blocks: keep the h1 on one line, constrain only the sub-text */
.section-tight > .wrap.center{max-width:var(--maxw)!important}
.section-tight > .wrap.center .eyebrow,
.section-tight > .wrap.center .lead{max-width:62ch;margin-left:auto;margin-right:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.18s ease;text-align:center;justify-content:center}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;border-color:var(--teal);color:var(--teal-deep)}
.btn-ghost:hover{background:var(--teal);color:#fff}
.btn-lg{padding:17px 34px;font-size:1.08rem}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,248,242,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:18px;height:74px;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.nav-inner .brand{flex-shrink:0;white-space:nowrap}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.brand img{width:38px;height:38px;border-radius:9px}
.brand span small{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:700;margin-top:-2px}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;flex:1;justify-content:center}
.nav-links a{font-family:var(--sans);font-weight:700;font-size:1.02rem;color:var(--teal)}
.nav-links a:hover,.nav-links a.active{color:var(--teal-deep)}
.nav-links .nav-cta a{color:#fff}
.nav-cta{flex-shrink:0}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:1.6rem;color:var(--ink)}

/* Hero */
.hero{background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:center;padding-top:78px;padding-bottom:78px}
.hero h1{margin-bottom:1.1rem}
.hero .lead{margin-bottom:1.8rem;max-width:34ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-photo{position:relative}
.hero-photo .frame{aspect-ratio:4/5;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);border:6px solid #fff}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:grayscale(1)}
.hero-photo .tag{position:absolute;bottom:-18px;left:-18px;background:var(--teal);color:#fff;padding:14px 20px;border-radius:14px;font-weight:700;font-size:.95rem;box-shadow:var(--shadow-sm);max-width:230px;line-height:1.3}

/* Outcome cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-sm);transition:.2s ease;position:relative;display:flex;flex-direction:column;height:100%}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--teal-wash)}
.card .num{font-family:var(--serif);font-size:1.05rem;color:var(--teal);font-weight:600;margin-bottom:10px;display:inline-block}
.modicon{width:48px;height:48px;border-radius:12px;background:var(--teal-wash);display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:14px}
.card-soft{background:#e7f2f0;border:2px solid var(--teal-deep)}
.card-soft .modicon{background:#fff}
.card h3{margin-bottom:.5rem}
.card .promise{color:var(--teal-deep);font-weight:700;margin-bottom:.9rem;font-size:1.02rem}
.card ul{list-style:none;margin:0}
.card ul li{padding-left:22px;position:relative;margin-bottom:.5rem;font-size:.98rem;color:var(--ink-soft)}
.card ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--teal-light)}
.card .proof{margin-top:1rem;font-size:.86rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.85rem}
.card .proof b{color:var(--ink)}
.card .who{font-size:.85rem;color:var(--muted);margin:-.15rem 0 .85rem;font-style:italic}
.card.partner{background:var(--teal);border-color:var(--teal-deep);color:#fff;display:flex;flex-direction:column}
.card.partner:hover{box-shadow:var(--shadow);border-color:var(--teal-deep)}
.card.partner .num{color:#cfe9e6}
.card.partner h3{color:#fff}
.card.partner .promise{color:#fff;opacity:.95}
.card.partner p{color:#fff;opacity:.96}
.card.partner .pill{background:#fff;color:var(--teal-deep)}
.card.partner .btn{border-color:#fff;color:#fff;margin-top:auto}
.card.partner .btn:hover{background:#fff;color:var(--teal-deep)}
/* hook callout box inside each card — soft teal, leads the card */
.hook{background:var(--teal-wash);color:var(--teal-deep);border-radius:12px;padding:15px 18px;font-family:var(--serif);font-size:1.22rem;line-height:1.24;font-weight:600;text-align:center;margin:0 0 16px}
.card h3 + .hook{margin-top:18px}
.card.partner .hook{background:var(--teal-wash);color:var(--teal-deep);border:0}
.keyline{color:var(--ink-soft);font-size:1.02rem;line-height:1.5;margin:0 0 14px}
.card.partner .keyline{color:#fff;opacity:.95}
.card.partner ul li{color:#fff;opacity:.95}
.card.partner ul li::before{background:#bfe3df}
.showme{margin-top:auto;border-top:1px solid var(--line);padding-top:.9rem;font-size:.92rem;font-weight:700;color:var(--teal-deep)}
.showme:hover{color:var(--teal)}
/* Whole card is clickable: the "Show me" link stretches over the card. */
.card:has(> .showme){cursor:pointer}
.card > .showme::after{content:"";position:absolute;inset:0;z-index:1}
.card ul li a{position:relative;z-index:2}
.card.partner .showme{border-top-color:rgba(255,255,255,.28);color:#fff}
.card-teal{background:#1c4a47;border-color:#1c4a47}
.card-teal h3{color:#fff}
.card-teal .muted{color:#bfe3df}

/* Bands */
.band-teal{background:var(--teal);color:#fff}
.band-teal h1,.band-teal h2,.band-teal h3{color:#fff}
.band-teal .eyebrow{color:#bfe3df}
.band-teal a{color:#fff;text-decoration:underline}
.band-cream2{background:var(--cream-2)}
.band-ink{background:#1c4a47;color:#e9ebf0}
.band-ink h2,.band-ink h3{color:#fff}

/* Savings table */
.savings{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;border:1px solid var(--line);max-width:760px;margin:0 auto}
.savings table{width:100%;border-collapse:collapse;font-size:1rem}
.savings th,.savings td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line)}
.savings thead th{background:var(--cream-2);font-family:var(--sans);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.savings td:last-child,.savings th:last-child{text-align:right}
.savings .now{color:var(--ink-soft)}
.savings .then{color:var(--teal);font-weight:700}
.savings tr.total td{background:var(--teal-wash);font-weight:700;font-size:1.05rem;border-bottom:0}
.savings tr.total .then{color:var(--teal-deep)}
/* detailed feature/replaces/cost comparison table */
.savings-features{max-width:880px}
.savings-features td:nth-child(3),.savings-features th:nth-child(3){text-align:right}
.savings-features td:last-child,.savings-features th:last-child{text-align:center}
.savings-features .rep{color:var(--muted)}
.savings-features .strike{text-decoration:line-through;color:var(--muted);white-space:nowrap}
.savings-features .yes{color:var(--teal);font-weight:800;font-size:1.2rem}
.savings-features tr.total .then{color:var(--teal-deep);font-weight:800;text-decoration:none}
@media(max-width:620px){.savings-features th:nth-child(2),.savings-features td:nth-child(2){display:none}}
/* template breakdown: two-app checklists */
.app-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;box-shadow:var(--shadow-sm);height:100%}
.app-card .pill{margin-bottom:14px}
.app-card h3{color:var(--teal-deep);margin-bottom:.2rem}
.app-card .tagline{color:var(--muted);font-size:.96rem;margin:0 0 .4rem}
.checks{list-style:none;margin:1.1rem 0 0;padding:0}
.checks li{position:relative;padding-left:30px;margin-bottom:.75rem;color:var(--ink-soft);font-size:.97rem;line-height:1.45}
.checks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--teal);font-weight:800;font-size:1rem}
.checks li b{color:var(--ink)}

/* Generic content blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.stack-lg>*+*{margin-top:14px}
.pill{display:inline-block;background:var(--teal-wash);color:var(--teal-deep);font-weight:700;font-size:.8rem;padding:5px 14px;border-radius:999px;letter-spacing:.04em}
.detail{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;box-shadow:var(--shadow-sm);margin-bottom:22px}
.detail h3{color:var(--teal-deep);margin-bottom:.3rem}
.detail .who{font-size:.92rem;color:var(--muted);margin-bottom:1rem}
.detail dl{display:grid;grid-template-columns:130px 1fr;gap:8px 18px;margin-top:1rem}
.detail dt{font-weight:700;color:var(--teal);font-size:.9rem}
.detail dd{color:var(--ink-soft)}

/* Case studies — zig-zag */
.casestudy{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;margin:0 0 78px;scroll-margin-top:100px}
.casestudy.flip .cs-media{order:2}
.cs-frame{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;position:relative}
.cs-ph{position:absolute;left:0;right:0;top:36px;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(251,248,242,.5);z-index:2}
.cs-ph span{background:var(--teal-deep);color:#fff;font-family:var(--serif);font-size:1.5rem;font-weight:600;padding:12px 32px;border-radius:999px;box-shadow:var(--shadow);transform:rotate(-5deg);letter-spacing:.03em}
.cs-link{display:block;text-decoration:none}
.cs-link .cs-frame{transition:transform .2s ease,box-shadow .2s ease}
.cs-link:hover .cs-frame{transform:translateY(-3px);box-shadow:var(--shadow)}
.cs-frame .bar{height:36px;background:var(--cream-2);display:flex;align-items:center;gap:7px;padding:0 15px;border-bottom:1px solid var(--line)}
.cs-frame .bar i{width:11px;height:11px;border-radius:50%;background:#d7cdbb;display:inline-block}
.cs-frame .shot{display:block;width:100%;height:300px;object-fit:cover;object-position:top center}
.cs-body h3{font-size:1.9rem;color:var(--ink);margin:.5rem 0 .2rem}
.cs-body .who{font-size:.92rem;color:var(--muted);margin-bottom:1rem}
.cs-body dl{display:grid;grid-template-columns:120px 1fr;gap:9px 18px;margin:1rem 0 1.2rem}
.cs-body dt{font-weight:700;color:var(--teal);font-size:.88rem}
.cs-body dd{color:var(--ink-soft)}
.cs-visit{font-weight:700;color:var(--teal-deep)}
.cs-visit:hover{color:var(--teal)}
@media(max-width:820px){.casestudy{grid-template-columns:1fr;gap:22px;margin-bottom:56px}.casestudy.flip .cs-media{order:0}.cs-body dl{grid-template-columns:1fr}.cs-body dt{margin-top:.4rem}}

/* Tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.tier{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.tier.featured{border:2px solid var(--teal);box-shadow:var(--shadow)}
.tier .tname{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin-bottom:.4rem}
.tier > p.muted{min-height:3em}
.tier .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--teal);color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:5px 14px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow-sm)}
.tier .price{font-size:1.5rem;font-weight:800;color:var(--teal-deep);margin:.2rem 0}
.tier .price small{display:block;font-size:.85rem;color:var(--muted);font-weight:600}
.tier ul{list-style:none;margin:1.1rem 0 1.4rem}
.tier ul li{padding-left:24px;position:relative;margin-bottom:.55rem;color:var(--ink-soft);font-size:.97rem}
.tier ul li::before{content:"✓";position:absolute;left:0;color:var(--teal);font-weight:800}
.tier .btn{margin-top:auto}
/* DIY / vibecode banner */
.diy-banner{display:flex;align-items:center;justify-content:space-between;gap:26px;background:var(--teal-deep);color:#fff;border-radius:18px;padding:28px 36px;margin-top:30px;box-shadow:var(--shadow-sm);flex-wrap:wrap}
.diy-banner h3{color:#fff;margin-bottom:.25rem}
.diy-banner p{color:#fff;opacity:.92;margin:0;max-width:62ch}
.diy-banner .btn{border-color:#fff;color:#fff;flex-shrink:0}
.diy-banner .btn:hover{background:#fff;color:var(--teal-deep)}
@media(max-width:680px){.diy-banner{text-align:center;justify-content:center}}

/* Tech strip */
.techstrip{display:flex;align-items:center;justify-content:center;gap:42px;flex-wrap:wrap;filter:grayscale(1);opacity:.7}
.techstrip span{font-weight:700;font-size:1.05rem;color:var(--muted);letter-spacing:.02em}

/* Proof teaser */
.logos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.logos .clientchip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-weight:700;color:var(--ink-soft);box-shadow:var(--shadow-sm);font-size:.95rem}

/* CTA band */
.cta-band{text-align:center}
.cta-band h2{margin-bottom:.6rem}
.cta-band p{max-width:48ch;margin:0 auto 1.5rem}

/* Assessment quiz */
.quiz{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:38px 36px}
.q-progress{height:8px;background:var(--cream-2);border-radius:999px;overflow:hidden;margin-bottom:26px}
.q-progress span{display:block;height:100%;background:var(--teal);width:0;transition:width .3s ease}
.q-step{display:none}
.q-step.active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.q-count{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);margin-bottom:.6rem}
.q-text{font-family:var(--serif);font-size:1.5rem;margin-bottom:1.4rem;line-height:1.2}
.q-options{display:flex;flex-direction:column;gap:12px}
.q-opt{display:block;text-align:left;background:var(--cream);border:2px solid var(--line);border-radius:var(--radius-sm);padding:15px 18px;font-size:1.02rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:.15s ease;font-family:var(--sans)}
.q-opt:hover{border-color:var(--teal-light);background:var(--teal-wash)}
.q-opt.sel{border-color:var(--teal);background:var(--teal-wash);color:var(--teal-deep)}
.q-nav{display:flex;justify-content:space-between;margin-top:26px}
.field{margin-bottom:14px}
.field label{display:block;font-weight:700;margin-bottom:6px;font-size:.95rem}
.field input{width:100%;padding:14px 16px;border:2px solid var(--line);border-radius:var(--radius-sm);font-size:1rem;font-family:var(--sans)}
.field input:focus{outline:none;border-color:var(--teal)}
.score-ring{width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin:0 auto 1.4rem;background:conic-gradient(var(--teal) var(--pct,0%),var(--cream-2) 0);}
.score-ring .inner{width:118px;height:118px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column}
.score-ring b{font-family:var(--serif);font-size:2.4rem;color:var(--teal-deep);line-height:1}
.score-ring small{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.gap-list{list-style:none;margin:1.2rem 0;text-align:left}
.gap-list li{padding:12px 16px;background:var(--cream);border-radius:var(--radius-sm);margin-bottom:8px;font-size:.96rem}
.hidden{display:none}

/* Footer */
.footer{background:#1c4a47;color:#c3d6d3;padding:54px 0 30px}
.footer h4{color:#fff;font-family:var(--sans);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.footer a{color:#c3d6d3;display:block;margin-bottom:8px;font-size:.95rem}
.footer a:hover{color:#fff}
.footer .brand{color:#fff;margin-bottom:12px}
.footer .brand span small{color:#7fc4bf}
.footer-bottom{border-top:1px solid #2f5e5a;margin-top:34px;padding-top:20px;font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* Responsive */
@media(max-width:860px){
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .hero-photo{max-width:360px}
  .split{grid-template-columns:1fr;gap:28px}
  .tiers{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  body{font-size:17px}
  section{padding:60px 0}
  .nav-links{position:fixed;top:74px;left:0;right:0;background:var(--cream);flex-direction:column;align-items:flex-start;gap:0;padding:10px 28px 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow-sm);transform:translateY(-130%);transition:.25s ease;height:auto}
  .nav-links.open{transform:translateY(0)}
  .nav-links li{width:100%;padding:8px 0}
  .nav-toggle{display:block}
  .detail dl{grid-template-columns:1fr}
  .detail dt{margin-top:.4rem}
  .footer-grid{grid-template-columns:1fr}
}

/* ============================================================
   ACCENT PASS — a warm terracotta edge against the teal/cream.
   Deliberately confined to borders and rules so the brand green
   stays dominant. Remove this whole block to revert.
   ============================================================ */

/* Every card gets a warm cap along its top edge. */
.card{border-top:3px solid var(--accent)}
.card:hover{border-color:var(--line);border-top-color:var(--accent-deep)}

/* The partner card is teal-filled, so it takes the accent on the top edge too
   and gives the pill the warm treatment — it names the offer. */
.card.partner{border-top-color:var(--accent)}
.card.partner:hover{border-color:var(--teal-deep);border-top-color:var(--accent)}
.card.partner .pill{background:var(--accent-wash);color:var(--accent-deep)}

/* Soft/bordered cards keep their teal frame but pick up the same top edge. */
.card-soft{border-top:3px solid var(--accent)}

/* A single warm rule under the footer's dark band. */
.footer{border-top:4px solid var(--accent)}

/* Hairline warmth where sections change colour. */
.band-cream2{border-top:1px solid var(--accent-wash);border-bottom:1px solid var(--accent-wash)}

/* Whole-card link. The "Show me" anchor stretches invisibly over its card, so
   the entire box is clickable while there is still only one real link in the
   markup — no duplicate destination for screen readers or search engines. */
.card .showme.stretch::after{content:"";position:absolute;inset:0;border-radius:var(--radius);z-index:1}
.card:has(.showme.stretch){cursor:pointer}
.card:has(.showme.stretch):hover{border-color:var(--accent);border-top-color:var(--accent-deep)}
.card:has(.showme.stretch):hover .showme{color:var(--accent-deep)}
/* Real links inside a stretched card must stay clickable in their own right. */
.card:has(.showme.stretch) a:not(.stretch){position:relative;z-index:2}

/* Hero tag set on a single line — the default .tag caps at 230px and wraps. */
.hero-photo .tag.one-line{max-width:none;white-space:nowrap}

/* ============================================================
   MOBILE OVERFLOW FIX
   On phones the nav row holds brand + "Book a call" + menu icon, all with
   flex-shrink:0 and a nowrap brand. Together they are wider than a 390px
   screen, so the menu icon is pushed past the edge and the whole page can be
   swiped sideways. Give the row room instead of hiding the CTA.
   ============================================================ */
@media(max-width:680px){
  .nav-inner{gap:10px;padding:0 16px}
  .brand{font-size:1.02rem;min-width:0}
  .brand img{width:32px;height:32px}
  .brand span{overflow:hidden;text-overflow:ellipsis}
  .nav-cta{padding:10px 15px;font-size:.9rem;white-space:nowrap}
  .nav-toggle{flex:none;margin-left:0}
}
/* Nothing should be able to push the page sideways. */
html,body{overflow-x:hidden}

/* Hero split — copy left, illustration right. Used on the outcomes page and
   the website offer page so the two open the same way. */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;text-align:left}
.hero-split .hero-shot img{width:100%;height:auto;max-width:480px;margin-left:auto;display:block}
@media(max-width:900px){
  .hero-split{grid-template-columns:1fr;gap:24px;text-align:left}
  .hero-split .hero-shot img{margin:0 auto;max-width:400px}
}

/* ============================================================
   SHARED PAGE RHYTHM  (used by outcomes.html and the offer page)
   Two fixes that belong together:
   1. Widths in px, not ch — a `ch` is the width of a character in the current
      font, so blocks resize the moment the webfont swaps in.
   2. Centred BLOCK, flush-left TEXT — centre-aligned paragraphs are ragged on
      both edges, so every line starts somewhere different.
   ============================================================ */
.hm-band{max-width:none}
.hm-band h1,.hm-band h2{max-width:960px;margin-inline:auto;text-wrap:balance}
.hm-band h3{max-width:620px;margin-inline:auto}
.hm-band p,.hm-measure,.cta-band p{max-width:860px;margin-inline:auto;text-align:left}
/* a paragraph that only wraps a button is a layout row, not prose */
.hm-band p:has(> .btn),.cta-band p:has(> .btn){max-width:none;text-align:center}

/* Condense: 84px top AND bottom on every section stacks into ~170px of empty
   band between them. */
body.condensed > section{padding-top:46px;padding-bottom:46px}
body.condensed > section > .wrap > :last-child,
body.condensed > section > .wrap > :last-child > :last-child{margin-bottom:0}
body.condensed > section.cta-band{padding-bottom:30px}
body.condensed > footer.footer{padding-top:38px}

/* An older ch-based rule still constrains .lead inside centred section-tight
   blocks — same font-swap jump. Match specificity so hm-band wins. */
.wrap.center.hm-band .lead,.wrap.center.hm-band p{max-width:860px;margin-inline:auto;text-align:left}
.wrap.center.hm-band .eyebrow{max-width:none}

/* ============================================================
   Larger brand mark in the navigation. The bar is 74px tall and the mark was
   only 38px, so it read small against the wordmark. 54px fills the bar with
   10px clearance top and bottom; logo.png is 200x200 so it stays crisp.
   ============================================================ */
.nav .brand img{width:54px;height:54px;border-radius:12px}
.nav .brand{font-size:1.38rem;gap:14px}
.nav .brand span small{font-size:.66rem;letter-spacing:.2em}
@media(max-width:680px){
  .nav .brand img{width:42px;height:42px;border-radius:10px}
  .nav .brand{font-size:1.06rem;gap:10px}
}