/* ============ SELF-HOSTED FONTS ============ */
/* Fraunces (headings) + Inter (body). Latin subset, self-hosted, SIL Open Font License. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/fraunces-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-700.woff2) format('woff2')}

/* ============ DESIGN TOKENS (Sapphire nightfall) ============ */
:root{
  --maxw:880px; --transition:.35s ease;
  --bg:#eef2f8; --bg-alt:#f6f9fc; --surface:#ffffff;
  --text:#1f2740; --muted:#59617a; --accent:#0b5299;
  --border:#d9e0ec; --shadow:0 10px 30px rgba(20,35,70,.10);
  --font-head:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --radius:10px; --hero-bg:linear-gradient(180deg,#ffffff,#e6ecf5);
}

/* ============ BASE ============ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); line-height:1.65; font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-head); font-optical-sizing:auto; line-height:1.16; font-weight:600; text-wrap:balance}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.4rem}

/* ============ TOP BAR ============ */
.topbar{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--bg) 82%, transparent);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-head); font-weight:600; letter-spacing:.2px; font-size:1.05rem}
.brand span{color:var(--accent)}
.brand .role{
  font-family:var(--font-body); font-weight:500; font-size:.8rem; color:var(--muted);
  letter-spacing:0; padding-left:.6rem; border-left:1px solid var(--border);
}
.topbar .book{font-size:.9rem; font-weight:600; color:var(--accent)}

/* ============ SHARED ============ */
section{padding:3.4rem 0; border-bottom:1px solid var(--border)}
section:nth-of-type(even){background:var(--bg-alt)}
.kicker{font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 .55rem}
section h2{font-size:clamp(1.5rem,3.4vw,2.1rem); margin:0 0 1rem; letter-spacing:-.01em}
/* small bold heading that sits under a kicker (looks like inline bold, but is a real heading) */
.subhead{font-size:1.06rem; margin:0; letter-spacing:normal}
.prose{max-width:660px; font-size:1.06rem}
.prose p{margin:0 0 1.05rem}
.prose p:last-child{margin-bottom:0}
.prose .muted{color:var(--muted)}
.btn{
  display:inline-block; background:var(--accent); color:#fff;
  padding:.85rem 1.7rem; border-radius:999px; font-weight:600; font-family:var(--font-body);
  box-shadow:var(--shadow); transition:transform .15s ease;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn.secondary{background:transparent; color:var(--accent); border:1px solid var(--accent); box-shadow:none}
.btn.secondary:hover{background:color-mix(in srgb,var(--accent) 10%, transparent)}
.btn-note{display:block; margin-top:.7rem; color:var(--muted); font-size:.85rem}
.btn-row{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}
.hero-cta{display:flex; flex-wrap:wrap; gap:.8rem; align-items:center}

/* ============ HERO ============ */
.hero{background:var(--hero-bg); border-bottom:1px solid var(--border)}
.hero .wrap{padding:4rem 1.4rem 3.4rem}
.eyebrow{
  display:inline-block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:1rem;
  border:1px solid var(--border); border-radius:999px; padding:.3rem .85rem; background:var(--surface);
}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.5rem); margin:.2rem 0 1.2rem; letter-spacing:-.015em; line-height:1.08}
.hero .lead{font-size:clamp(1.1rem,2.2vw,1.35rem); color:var(--text); max-width:620px; margin:0 0 1.8rem}
.hero .lead b{color:var(--accent); font-weight:700}

/* trust strip */
.trust{margin-top:2.4rem}
.trust-label{font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 .7rem}
.logos{display:flex; flex-wrap:wrap; gap:.6rem}
.logos span{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  padding:.5rem .95rem; border-radius:999px; font-size:.9rem; font-weight:600;
}

/* ============ PAIN LIST ============ */
.painlist{list-style:none; padding:0; margin:1.3rem 0 1.2rem; display:grid; gap:.75rem; max-width:660px}
.painlist li{position:relative; padding-left:2rem; font-size:1.05rem}
.painlist li::before{content:"\2022"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700}
.after-list{color:var(--muted); max-width:660px}
.stakes{max-width:660px; margin:0 0 1.4rem}
.after-head{max-width:660px; margin:1.6rem 0 .4rem}
.gains li::before{content:"\2192"}

/* ============ BEFORE / AFTER DIPTYCH ============ */
.problem .wrap{max-width:1040px}
.problem-lead{max-width:720px; margin:0 0 2.2rem}
.diptych{display:grid; grid-template-columns:1fr auto 1fr; gap:1.3rem; align-items:stretch}
.panel{border-radius:var(--radius); border:1px solid var(--border); padding:1.3rem 1.3rem 1.5rem}
.panel-label{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin:0 0 1.05rem}

/* BEFORE: cool, dense, disconnected */
.panel.before{background:#e6ebf3; position:relative; overflow:hidden}
.panel.before::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(80,90,104,.05) 11px 12px),
    repeating-linear-gradient(-45deg, transparent 0 15px, rgba(80,90,104,.045) 15px 16px);
}
.panel.before .panel-label{color:var(--muted)}
.scatter{list-style:none; margin:0; padding:0; position:relative; z-index:1; display:flex; flex-direction:column; gap:.55rem}
.scatter li{
  background:var(--surface); border:1px dashed #bcc6d6; border-radius:8px;
  padding:.55rem .72rem; font-size:.92rem; line-height:1.4; color:var(--text); max-width:90%;
}
.scatter li:nth-child(2){align-self:flex-end; max-width:86%}
.scatter li:nth-child(3){align-self:center; max-width:78%}
.scatter li:nth-child(4){align-self:flex-end; max-width:88%}
.scatter li:nth-child(5){margin-left:9%; max-width:84%}
.scatter li:nth-child(6){align-self:flex-end; max-width:92%}

/* AFTER: warm, aligned, one system */
.panel.after{background:#e7eef8; border-color:#cddcee}
.panel.after .panel-label{color:var(--accent)}
.ordered{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.ordered li{
  background:var(--surface); border:1px solid #cddcee; border-left:3px solid var(--accent);
  border-radius:8px; padding:.55rem .75rem; font-size:.92rem; line-height:1.4; color:var(--text);
}

/* the transform in the middle */
.transform{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem}
.transform-arrow{font-size:2.1rem; color:var(--accent); line-height:1}
.transform-note{
  font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.1em;
  font-weight:700; text-align:center; max-width:82px; line-height:1.3;
}

@media(max-width:760px){
  .problem .wrap{max-width:var(--maxw)}
  .diptych{grid-template-columns:1fr; gap:.7rem}
  .transform{flex-direction:row; gap:.55rem; padding:.3rem 0}
  .transform-arrow{transform:rotate(90deg)}
  .transform-note{max-width:none}
  .scatter li,.scatter li:nth-child(n){align-self:stretch; margin-left:0; max-width:100%}
}

/* ============ STEPS ============ */
.steps{display:grid; gap:1rem; margin-top:1.5rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow); transition:transform .18s ease, border-color var(--transition);
}
.step:hover{transform:translateY(-3px); border-color:var(--accent)}
.step .num{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:var(--accent); color:#fff;
  font-family:var(--font-head); font-weight:600; font-size:1.1rem; margin-bottom:.9rem;
}
.step h3{font-size:1.1rem; margin:0 0 .5rem}
.step p{margin:0; color:var(--muted); font-size:.98rem}

/* On touch devices the :hover lift sticks as a finger passes over a card while
   scrolling, making cards jump. Only apply the lift where hover is real. */
@media(hover:none){
  .step:hover{transform:none}
  .btn:hover{transform:none}
}

/* ============ ABOUT (photo) ============ */
.about{display:flex; gap:1.5rem; align-items:center; margin-bottom:1.6rem; flex-wrap:wrap}
.about img{
  width:140px; height:140px; border-radius:50%; object-fit:cover;
  border:1px solid var(--border); box-shadow:var(--shadow); flex:none;
}
.about p{margin:0; font-size:1.06rem; max-width:440px}

/* ============ WORK ============ */
.work{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:1rem}
.work li{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:1.2rem 1.4rem; box-shadow:var(--shadow);
}
.work li h3{font-family:var(--font-head); font-size:1.05rem; margin:0 0 .3rem}
.work li p{margin:0; color:var(--muted); font-size:.98rem}

/* ============ TESTIMONIALS ============ */
.quotes{list-style:none; padding:0; margin:1.5rem 0 0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.quotes li{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem; box-shadow:var(--shadow); display:flex; flex-direction:column;
}
.quotes blockquote{margin:0 0 1rem; font-size:1.02rem; line-height:1.55}
.quotes cite{margin-top:auto; font-style:normal; font-family:var(--font-head); font-weight:600; color:var(--accent); font-size:.95rem}
.quotes cite .role{display:block; margin-top:.15rem; font-family:var(--font-body); font-weight:500; color:var(--muted); font-size:.82rem; letter-spacing:0}

/* ============ FAQ ============ */
.faq{display:grid; gap:.6rem; margin-top:1.5rem; max-width:720px}
.faq details{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden;
}
.faq summary{
  cursor:pointer; padding:1rem 1.2rem; font-family:var(--font-head); font-weight:600;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:1.3rem; font-weight:700; line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .answer{padding:0 1.2rem 1.1rem; color:var(--muted); font-size:.98rem}

/* ============ SECTION BANDS (cool blue rhythm) ============ */
#sound-familiar{background:#e9edf5}
#how{background:#f1f5fb}
#why{background:#eaeff8}
#work{background:#e3ebf6}
#testimonials{background:#f1f5fb}
#faq{background:#e3ebf6}

/* ============ CONTACT ============ */
section.contact{background:linear-gradient(180deg,#e9eff8,#dce6f4); text-align:center}
.contact .prose{margin:0 auto 1.6rem}
.contact-links{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem 1rem; font-size:1rem; margin-top:1.6rem}
.contact-links a{
  display:inline-flex; align-items:center; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:.6rem 1.15rem; color:var(--text); font-weight:600;
}
.contact-links a:hover{text-decoration:none; border-color:var(--accent); color:var(--accent)}

footer{padding:2rem 0; text-align:center; color:var(--muted); font-size:.85rem}

@media(max-width:560px){
  body{font-size:16px}
  .hero .wrap{padding:2.8rem 1.4rem 2.4rem}
  .brand .role{display:none}
}