/* Self-hosted fonts — no third-party request, no extra DNS/TLS on first paint.
   Inter is a variable font: one file covers weights 400 and 600.
   Latin subset only. Updated 3 Sep 2026. */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url(../fonts/playfairdisplay-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Dental Business Coach — dentalbusiness-coach.co.uk
   Navy #0C3B6E (letterhead) · Gold #C8A97E · Stone #F5F0E8 · Body #5A5A57
   Dot accents: #E8B84B #D4763A #7BAF6E #5B9BD5
   Playfair Display (headings) · Inter (body) */

:root{
  --navy:#0C3B6E;
  --gold:#C8A97E;
  --gold-text:#8A6D3E; /* darker gold, passes WCAG AA contrast on white/stone backgrounds */
  --stone:#F5F0E8;
  --ink:#5A5A57;
  --white:#FFFFFF;
  --amber:#E8B84B;
  --orange:#D4763A;
  --green:#7BAF6E;
  --blue:#5B9BD5;
  --maxw:1060px;
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, 'Segoe UI', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--white);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{font-family:var(--serif);color:var(--navy);line-height:1.25;font-weight:600}
h1{font-size:clamp(2rem,4.5vw,3rem);margin-bottom:1rem}
h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1rem}
h3{font-size:1.2rem;margin-bottom:.5rem}
p{margin-bottom:1rem;max-width:38em}
p:last-child{margin-bottom:0}
a{color:var(--navy)}
a:focus-visible,button:focus-visible,input:focus-visible,label:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- navigation ---------- */
.nav{background:var(--navy)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;min-height:64px;flex-wrap:wrap;gap:8px}
.wordmark{display:inline-block;text-decoration:none;padding:10px 0;line-height:0}
.wordmark img{display:block;height:40px;width:auto}
@media (max-width:480px){.wordmark img{height:32px}}
.nav-links{list-style:none;display:flex;gap:4px;flex-wrap:wrap}
.nav-links a{color:var(--white);text-decoration:none;font-size:.95rem;
  padding:10px 12px;border-bottom:2px solid transparent}
.nav-links a:hover{border-bottom-color:var(--gold)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--gold)}

/* ---------- sections ---------- */
.section{padding:72px 0}
.section.stone{background:var(--stone)}
.section.navy{background:var(--navy)}
.section.navy h2,.section.navy p{color:var(--white)}
.lede{font-size:1.15rem}

/* ---------- hero ---------- */
.hero{padding:88px 0 76px}
.hero p.sub{font-size:1.2rem;max-width:34em;margin:0 0 1.75rem}

/* ---------- buttons ---------- */
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:.5rem}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:1rem;
  padding:13px 26px;border-radius:3px;border:2px solid transparent;
  transition:background-color .15s ease}
.btn-gold{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-gold:hover{background:#b9985f;border-color:#b9985f}
.btn-line{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-line:hover{background:var(--navy);color:var(--white)}
.section.navy .btn-line{color:var(--white);border-color:var(--white)}
.section.navy .btn-line:hover{background:var(--white);color:var(--navy)}

/* ---------- cards ---------- */
.cards{display:grid;gap:22px;margin-top:2rem}
.cards.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cards.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--white);padding:26px 24px 24px;border:1px solid #E7E2D8;border-top:4px solid var(--gold)}
.section.stone .card{border-color:#E2DCCF;border-top-color:var(--gold)}
.card.a-amber{border-top-color:var(--amber)}
.card.a-orange{border-top-color:var(--orange)}
.card.a-green{border-top-color:var(--green)}
.card.a-blue{border-top-color:var(--blue)}
.card.a-gold{border-top-color:var(--gold)}
.card.a-navy{border-top-color:var(--navy)}
.card p{font-size:.98rem}
.price{font-family:var(--serif);color:var(--navy);font-size:1.05rem;margin-bottom:.75rem}
.strap{font-style:italic;margin-bottom:1rem}
.card ul{margin:0 0 1.25rem 1.1rem}
.card li{margin-bottom:.45rem;font-size:.98rem}

/* ---------- quote band ---------- */
.quote{background:var(--navy);padding:64px 0}
.quote blockquote{font-family:var(--serif);color:var(--white);
  font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.45;max-width:26em}
.quote .attr{color:var(--gold);font-size:.95rem;margin-top:1.25rem}

/* ---------- split layouts ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.narrow-img{grid-template-columns:3fr 2fr}
@media (max-width:820px){.split,.split.narrow-img{grid-template-columns:1fr;gap:36px}}
.photo-frame{border:1px solid var(--gold);padding:10px;background:var(--white);max-width:420px}
.photo-frame img{display:block;width:100%;height:auto}

/* ---------- lists ---------- */
.signs{list-style:none;margin-top:1.5rem;max-width:44em}
.signs li{padding:14px 0 14px 26px;border-bottom:1px solid #E2DCCF;position:relative}
.signs li::before{content:"";position:absolute;left:0;top:23px;width:10px;height:10px;
  border-radius:50%;background:var(--gold)}
.signs li:nth-child(4n+1)::before{background:var(--amber)}
.signs li:nth-child(4n+2)::before{background:var(--orange)}
.signs li:nth-child(4n+3)::before{background:var(--green)}
.signs li:nth-child(4n+4)::before{background:var(--blue)}

/* ---------- stages ---------- */
.stages{margin-top:2rem;display:grid;gap:0}
.stage{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:26px 0;border-top:1px solid #E2DCCF}
.stage:last-child{border-bottom:1px solid #E2DCCF}
.stage h3{padding-top:2px}
@media (max-width:640px){.stage{grid-template-columns:1fr;gap:6px}}

/* ---------- audit block ---------- */
.audit-block{border:1px solid var(--gold);background:var(--white);padding:40px 36px;max-width:760px}
.section.stone .audit-block{background:var(--white)}
.audit-block .fineprint{font-size:.92rem;margin-top:1rem}

/* ---------- timeline ---------- */
.timeline{margin-top:2rem;border-left:2px solid var(--gold);padding-left:28px;max-width:44em}
.timeline .tl{margin-bottom:1.75rem;position:relative}
.timeline .tl::before{content:"";position:absolute;left:-35px;top:7px;width:12px;height:12px;
  border-radius:50%;background:var(--navy)}
.timeline .year{font-family:var(--serif);color:var(--navy);font-size:1.1rem;margin-bottom:.25rem;font-weight:600}
.timeline p{font-size:.98rem}

/* ---------- forms ---------- */
form .row{margin-bottom:1.1rem;max-width:34em}
label{display:block;font-weight:600;color:var(--navy);margin-bottom:.35rem;font-size:.95rem}
input[type=text],input[type=email],textarea{
  width:100%;padding:12px 14px;border:1px solid #C9C2B4;border-radius:3px;
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--white)}
textarea{min-height:130px;resize:vertical}
button.btn{cursor:pointer;font-family:var(--sans)}

/* ---------- quiz ---------- */
.quiz-card{background:var(--white);border:1px solid #E2DCCF;border-top:4px solid var(--gold);
  padding:34px 30px;max-width:720px}
.quiz-section-label{font-weight:600;color:var(--navy);margin-bottom:.25rem;font-size:.95rem}
.quiz-q{font-family:var(--serif);color:var(--navy);font-size:1.25rem;margin-bottom:1.25rem}
.quiz-opts{list-style:none}
.quiz-opts li{margin-bottom:.7rem}
.quiz-opts label{display:block;font-weight:400;color:var(--ink);border:1px solid #C9C2B4;
  border-radius:3px;padding:13px 16px;cursor:pointer}
.quiz-opts input{margin-right:10px}
.quiz-opts label:hover{border-color:var(--gold)}
.quiz-progress{font-size:.9rem;margin-bottom:1.5rem}
.bar-row{display:grid;grid-template-columns:230px 1fr 44px;gap:14px;align-items:center;margin-bottom:.9rem}
@media (max-width:560px){.bar-row{grid-template-columns:1fr;gap:4px}}
.bar-track{background:#E7E2D8;height:12px;border-radius:6px;overflow:hidden}
.bar-fill{display:block;height:100%;background:var(--navy)}
.bar-row.weakest .bar-fill{background:var(--orange)}
.bar-row.weakest .bar-name{color:var(--orange);font-weight:600}
.total-score{font-family:var(--serif);color:var(--navy);font-size:2.2rem;margin:.5rem 0 1.5rem}
.hidden{display:none}

/* ---------- calculator ---------- */
.calc{background:var(--white);border:1px solid #E2DCCF;border-top:4px solid var(--blue);
  padding:30px 28px;max-width:560px;margin-top:1.5rem}
.calc .row{display:grid;grid-template-columns:1fr 130px;gap:14px;align-items:center;margin-bottom:1rem;max-width:none}
.calc input{text-align:right}
.calc-result{font-family:var(--serif);color:var(--navy);font-size:1.4rem;border-top:1px solid #E2DCCF;
  padding-top:1rem;margin-top:.5rem}

/* ---------- footer ---------- */
footer{background:var(--navy);color:var(--white);padding:48px 0;margin-top:0}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer a{color:var(--white)}
footer p{font-size:.92rem;max-width:none}
footer .fm{font-family:var(--serif);font-size:1.1rem;margin-bottom:.5rem}
footer ul{list-style:none}
footer li{margin-bottom:.4rem;font-size:.95rem}

/* ---------- articles and long-form ---------- */
.hero-article{padding-bottom:40px}
.hero-article h1{font-size:clamp(1.75rem,3.6vw,2.5rem);max-width:20em}
.eyebrow{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-text);font-weight:600;margin-bottom:.75rem}
.article-meta{font-size:.9rem;color:#8A8A85;margin-top:1.25rem}
.article-body{max-width:42em}
.article-body h2{font-size:clamp(1.3rem,2.4vw,1.7rem);margin-top:2.75rem;margin-bottom:.75rem}
.article-body p{max-width:none}
.article-body .signs{max-width:none}
.steps{margin:1.5rem 0 1.5rem 1.2rem;max-width:none}
.steps li{margin-bottom:.75rem;padding-left:.4rem}
.steps li::marker{color:var(--gold);font-weight:600}
.article-cta{margin-top:3.5rem;padding:32px;background:var(--stone);border-left:4px solid var(--gold)}
.article-cta h2{margin-top:0}
.article-cta .btns{margin-top:1.5rem}

/* article index listing */
.article-list{list-style:none;margin-top:2rem}
.article-item{padding:28px 0;border-bottom:1px solid #E2DCCF}
.article-item:first-child{padding-top:0}
.article-item h3{font-size:1.35rem;margin-bottom:.4rem}
.article-item h3 a{text-decoration:none}
.article-item h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.article-item .topic{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-text);font-weight:600;margin-bottom:.5rem}
.article-item p{max-width:46em;margin-bottom:0}
