/* drbeningram.com. One stylesheet for every page.
 *
 * Extracted 30 July 2026 from the 30 hand-trimmed copies that used to sit
 * inline in each page's head. They had drifted: /assessment was missing the
 * Google rating rule, .imgdark, .photofull and the mobile hero override, and
 * four pages carried four different versions of the same components. Every
 * rule below appeared identically wherever it appeared, except for a short
 * list resolved deliberately and noted in the work log.
 *
 * guide-ready.html is not covered. It is a noindex post-conversion page with
 * its own minimal styling and no header or footer.
 *
 * Page-specific rules stay in a small <style> block on the page that needs
 * them. Anything shared belongs here.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --ink: #1a1a18; --mid: #5a5a56; --light: #726f6b; --rule: #e2e0da; --bg: #faf9f6; --white: #ffffff; --accent: #183a2b; --accent-deep: #0f2a1f; --accent-soft: #a7b8ab; --accent-light: #eee7db; --stone: #e3dccd; --maxw: 1120px; --readw: 720px; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', system-ui, sans-serif; background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, .serif { font-family: 'Cormorant Garamond', Georgia, serif; }
a { color: var(--accent); }
em { font-style: italic; color: var(--accent); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; z-index: 300; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.read { max-width: var(--readw); }
header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250,249,246,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); height: 66px; display: flex; align-items: center; }
header .wrap { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.logo { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.3rem; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; }
nav.desktop { display: flex; align-items: center; gap: 16px; }
nav.desktop a { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mid); text-decoration: none; transition: color .2s; }
nav.desktop a:hover { color: var(--ink); }
nav.desktop a.nav-cta { color: #fff; background: var(--accent); padding: 9px 18px; border-radius: 22px; letter-spacing: 0.04em; }
nav.desktop a.nav-cta:hover { background: var(--accent-deep); color: #fff; }
.hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .25s; }
#mobile-nav { display: none; position: fixed; inset: 66px 0 0 0; background: var(--bg); z-index: 99; padding: 30px 28px; flex-direction: column; gap: 6px; }
#mobile-nav a { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; color: var(--ink); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--rule); }
body.nav-open #mobile-nav { display: flex; }
body.nav-open { overflow: hidden; }
.hero { padding: 180px 0 120px; position: relative; }
.hero .wrap { max-width: var(--maxw); display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; }
.hero-copy { max-width: 620px; }
.hero-portrait { aspect-ratio: 4/5; border-radius: 4px; background: linear-gradient(160deg, var(--accent-light), var(--stone)); border: 1px solid var(--stone); display: flex; align-items: flex-end; padding: 22px; }
.hero-portrait span { font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; color: var(--accent-deep); letter-spacing: 0.02em; }
.eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 22px; }
.hero h1 { font-weight: 300; font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1.06; letter-spacing: -0.015em; margin-bottom: 26px; }
.hero p.lede { font-size: clamp(1.05rem, 2vw, 1.28rem); color: var(--mid); max-width: 620px; margin-bottom: 34px; line-height: 1.6; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn { display: inline-block; text-decoration: none; font-size: 0.95rem; font-weight: 500; padding: 15px 30px; border-radius: 30px; transition: all .2s; cursor: pointer; border: 1.5px solid transparent; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-secondary { background: transparent; color: var(--accent); border-color: var(--rule); }
.btn-secondary:hover { border-color: var(--accent); }
.hero-note { margin-top: 26px; font-size: 0.9rem; color: var(--light); }
section { padding: 120px 0; }
.section-label { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 18px; }
h2 { font-weight: 300; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 26px; }
.section-intro { font-size: 1.12rem; color: var(--mid); max-width: var(--readw); margin-bottom: 20px; }
p { margin-bottom: 18px; }
.band { border-top: 1px solid var(--rule); }
.points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 50px; }
.point .num { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; color: var(--accent); font-weight: 500; line-height: 1; margin-bottom: 12px; }
.point h3 { font-size: 1.45rem; font-weight: 400; margin-bottom: 12px; line-height: 1.2; }
.point p { font-size: 0.98rem; color: var(--mid); margin-bottom: 0; }
.windows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
.wcard { background: var(--white); border: 1px solid var(--rule); border-radius: 4px; padding: 36px; }
.wcard .tag { font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.wcard h3 { font-size: 1.55rem; font-weight: 400; margin-bottom: 14px; line-height: 1.15; }
.wcard p { font-size: 0.98rem; color: var(--mid); margin-bottom: 14px; }
.wcard p:last-child { margin-bottom: 0; }
.wcard.full { grid-column: 1 / -1; background: var(--accent-light); border-color: var(--stone); }
.timeline { margin-top: 46px; border-left: 2px solid var(--rule); padding-left: 0; }
.tl-item { position: relative; padding: 0 0 40px 34px; }
.tl-item::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.tl-item:last-child { padding-bottom: 0; }
.tl-when { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.tl-item h3 { font-size: 1.4rem; font-weight: 400; margin-bottom: 12px; line-height: 1.2; }
.tl-item p { font-size: 0.99rem; color: var(--mid); }
.pricing { background: var(--ink); color: #eee; }
.pricing .section-label { color: var(--accent-soft); }
.pricing h2 { color: #fff; }
.pricing h2 em { color: var(--accent-soft); }
.pricing .section-intro { color: #b8b8b2; }
.price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 50px; align-items: start; }
.pcard { background: transparent; border: none; border-top: 1px solid #3a3a34; border-radius: 0; padding: 32px 0 0; }
.pcard.featured { background: rgba(255,255,255,0.04); border: 1px solid #3a6152; border-radius: 4px; padding: 30px 28px; }
.pcard.featured .step, .pcard.featured .price-note { color: var(--accent-soft); }
.pcard .step { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); font-weight: 600; margin-bottom: 16px; }
.pcard h3 { font-size: 1.6rem; font-weight: 400; color: #fff; margin-bottom: 6px; }
.pcard .price { font-family: 'Cormorant Garamond', serif; font-size: 3.8rem; font-weight: 400; color: #fff; line-height: 1; margin: 12px 0 8px; }
.pcard .price-sub { font-size: 0.85rem; color: #b8b8b2; margin-bottom: 4px; }
.pcard .price-note { font-size: 0.85rem; color: var(--accent-soft); margin-bottom: 22px; }
.pcard .lead { color: #e6e6e0; font-size: 1rem; margin-bottom: 20px; }
.pcard ul { list-style: none; }
.pcard li { font-size: 0.95rem; color: #cfcfc8; padding: 10px 0 10px 26px; position: relative; border-top: 1px solid #34342f; }
.pcard.featured li { border-color: #3a6152; }
.pcard li::before { content: "·"; position: absolute; left: 2px; font-weight: 700; color: var(--accent-soft); }
.pay-note { margin-top: 30px; font-size: 0.95rem; color: #b8b8b2; max-width: var(--readw); }
.pay-note strong { color: #eee; font-weight: 500; }
.subsec { margin-top: 56px; }
.subsec h3 { font-size: 1.5rem; font-weight: 400; color: #fff; margin-bottom: 16px; }
.subsec p { color: #b8b8b2; font-size: 0.98rem; max-width: var(--readw); }
.subsec strong { color: #eee; }
table.household { width: 100%; max-width: 520px; border-collapse: collapse; margin: 20px 0; }
table.household td { padding: 12px 14px; border-bottom: 1px solid #34342f; font-size: 0.95rem; color: #cfcfc8; }
table.household td:last-child { text-align: right; color: #fff; font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; }
.sentinel-line { margin-top: 28px; padding: 20px 24px; background: #232320; border: 1px solid #34342f; border-radius: 12px; font-size: 0.98rem; color: #cfcfc8; max-width: var(--readw); }
.sentinel-line a { color: var(--accent-soft); font-weight: 500; }
.incl-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 40px; margin-top: 26px; }
.incl h4 { font-size: 0.98rem; color: var(--accent-soft); margin-bottom: 12px; font-family: 'DM Sans',sans-serif; font-weight: 600; }
.incl p { font-size: 0.92rem; color: #b8b8b2; }
.guarantee { margin-top: 34px; padding: 30px 32px; border: 1px solid var(--stone); border-radius: 4px; background: var(--white); max-width: var(--readw); }
.guarantee p { color: var(--ink); margin-bottom: 14px; }
.about-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 50px; align-items: start; }
.portrait { background: linear-gradient(160deg, var(--accent-light), var(--stone)); border-radius: 4px; aspect-ratio: 4/5; display: flex; align-items: flex-end; padding: 24px; color: var(--accent-deep); font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; border: 1px solid var(--stone); }
.creds { list-style: none; margin-top: 24px; border-top: 1px solid var(--rule); }
.creds li { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; color: var(--mid); }
blockquote.pull { font-family: 'Cormorant Garamond', serif; font-size: clamp(1.5rem,3vw,2.1rem); font-weight: 300; line-height: 1.3; color: var(--ink); margin: 40px 0 10px; font-style: italic; }
.pull-cite { font-size: 0.9rem; color: var(--light); letter-spacing: 0.04em; }
.testimonials { background: var(--white); }
.quote-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; margin-top: 44px; }
.quote { border-left: 2px solid var(--accent); padding-left: 22px; }
.quote p { font-size: 1rem; color: var(--ink); font-style: italic; line-height: 1.55; }
.quote cite { font-size: 0.85rem; color: var(--light); font-style: normal; letter-spacing: 0.03em; }
.faq details { border-bottom: 1px solid var(--rule); padding: 8px 0; max-width: var(--readw); }
.faq summary { font-size: 1.15rem; font-family: 'Cormorant Garamond', serif; color: var(--ink); padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.5rem; transition: transform .2s; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--mid); font-size: 1rem; padding-bottom: 12px; }
.contact { background: var(--white); }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-info p { color: var(--mid); font-size: 0.98rem; }
.contact-info .item { margin-bottom: 22px; }
.contact-info .item strong { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 2px; }
.contact-info .item p + p { margin-top: 8px; }
.contact-intro { margin-bottom: 28px; }
.btn-full { width: 100%; }
/* The just-in-time privacy notice. UK GDPR Art.13 wants this at the point of
   collection, not only in the footer, and this form takes free text on a
   CQC-registered practice's site. Added 31 July 2026. */
.form-privacy { margin-top: 16px; font-size: 0.85rem; line-height: 1.55; color: var(--light); }
.form-alt { margin-top: 14px; font-size: 0.92rem; }
.form-alt a { color: var(--mid); text-decoration: underline; text-underline-offset: 3px; }
.form-alt a:hover { color: var(--accent); }
form label { display: block; font-size: 0.85rem; color: var(--mid); margin-bottom: 6px; font-weight: 500; }
form input, form select, form textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--rule); border-radius: 8px; font-family: inherit; font-size: 0.98rem; background: var(--bg); margin-bottom: 18px; color: var(--ink); }
form textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90; background: var(--white); border-top: 1px solid var(--rule); padding: 12px 16px; gap: 12px; }
.mobile-cta a { flex: 1; text-align: center; padding: 13px; border-radius: 26px; font-size: 0.92rem; font-weight: 500; text-decoration: none; }
.mobile-cta .m-call { border: 1.5px solid var(--rule); color: var(--accent); }
.mobile-cta .m-enq { background: var(--accent); color: #fff; }
footer { background: var(--ink); color: #8a8a84; padding: 56px 0 40px; font-size: 0.85rem; }
footer a { color: #b9b9b2; text-decoration: none; display: block; padding: 3px 0; }
footer a:hover { color: #fff; }
.footer-cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
.footer-brand { font-family: 'Cormorant Garamond',serif; font-size: 1.4rem; color: #7fb391; margin-bottom: 10px; }
.footer-h { color: #fff; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; margin-bottom: 10px; }
.footer-col p { margin-bottom: 0; color: #8a8a84; }
.footer-legal { border-top: 1px solid #33332e; padding-top: 24px; text-align: center; }
.footer-legal p { max-width: var(--maxw); margin-bottom: 10px; line-height: 1.6; }
.footer-legal p:last-child { margin-bottom: 0; color: #8a8a84; }
footer p { margin-bottom: 0; max-width: var(--maxw); }
.anticlinic { background: var(--accent-light); border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split .img { aspect-ratio: 5/4; border-radius: 4px; background: linear-gradient(160deg,var(--accent-light),var(--stone)); border: 1px solid var(--stone); display: flex; align-items: flex-end; padding: 20px; }
.split .img span { font-family: 'Cormorant Garamond',serif; color: var(--accent-deep); font-size: .95rem; }
.home-quote { max-width: var(--readw); text-align: left; margin: 0 0 34px; }
.cta-band { text-align: center; }
.cta-band .section-intro { margin-left: auto; margin-right: auto; }
.pagehead { padding: 168px 0 56px; }
.pagehead h1 { font-family: 'Cormorant Garamond',serif; font-weight: 300; font-size: clamp(2.6rem,5.5vw,4rem); line-height: 1.06; letter-spacing: -0.015em; margin-bottom: 20px; }
.pagehead .lede { font-size: clamp(1.05rem,2vw,1.24rem); color: var(--mid); max-width: 640px; margin-bottom: 0; }
nav.desktop a[aria-current] { color: var(--ink); }
.js .fade { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .fade.in { opacity: 1; transform: none; }
.article { max-width: 720px; margin: 0 auto; padding: 150px 28px 90px; }
.article .cat { display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.article h1 { font-family: 'Cormorant Garamond',serif; font-weight: 300; font-size: clamp(2.2rem,4.6vw,3.1rem); line-height: 1.12; letter-spacing: -0.015em; margin: 14px 0 10px; color: var(--ink); }
.article .byline { display: block; font-size: .85rem; color: var(--light); letter-spacing: .02em; margin-bottom: 8px; }
.article .snippet { background: var(--accent-light); border-left: 3px solid var(--accent); padding: 20px 24px; margin: 30px 0 36px; border-radius: 0 4px 4px 0; font-size: 1.05rem; color: var(--ink); }
.article h2 { font-family: 'Cormorant Garamond',serif; font-weight: 400; font-size: 1.75rem; line-height: 1.2; margin: 44px 0 14px; color: var(--ink); letter-spacing: -0.01em; }
.article h3 { font-size: 1.18rem; font-weight: 600; margin: 30px 0 10px; color: var(--ink); }
.article p { margin-bottom: 18px; color: var(--mid); font-size: 1.06rem; line-height: 1.72; }
.article ul, .article ol { margin: 0 0 20px 22px; color: var(--mid); font-size: 1.06rem; }
.article li { margin-bottom: 9px; line-height: 1.6; }
.article a { color: var(--accent); }
.article a.btn-primary { color: #fff; }
.article strong { color: var(--ink); }
.article-foot { margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.article-foot .back { font-size: .9rem; color: var(--mid); text-decoration: none; }
.article-foot .back:hover { color: var(--accent); }
.journal-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; margin: 26px 0 64px; }
.jcard { display: block; text-decoration: none; color: inherit; border: 1px solid var(--rule); border-radius: 4px; padding: 30px; background: var(--white); transition: border-color .2s, transform .2s; }
.jcard:hover { border-color: var(--accent); transform: translateY(-2px); }
.jcat { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.jcard h3 { font-family: 'Cormorant Garamond',serif; font-weight: 400; font-size: 1.5rem; line-height: 1.22; margin: 10px 0; color: var(--ink); }
.jcard p { font-size: .96rem; color: var(--mid); margin-bottom: 14px; }
.jread { font-size: .85rem; color: var(--accent); font-weight: 500; letter-spacing: .02em; }
/* One screen on arrival. A hero that stops short of the fold reads as the top
   of a long page rather than an opening statement, so the image hero now fills
   the viewport. svh rather than vh because on a phone vh measures the viewport
   with the browser chrome hidden, which pushes the bottom of the block off the
   screen on load. The fixed header sits over the top of it, and .mobile-cta
   sits over the bottom on small screens, so both are subtracted. 31 July 2026. */
:root { --sticky-cta: 0px; }
.imghero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 0;
  min-height: calc(100vh - var(--sticky-cta));
  min-height: calc(100svh - var(--sticky-cta)); }

/* Where a credibility strip follows the hero the two are one block, so the last
   line of the strip lands on the fold instead of below it. The hero takes
   whatever height the strip leaves and never shrinks under its own content. */
.heroblock { display: flex; flex-direction: column;
  min-height: calc(100vh - var(--sticky-cta));
  min-height: calc(100svh - var(--sticky-cta)); }
.heroblock > .imghero { flex: 1 0 auto; min-height: 0; }
.heroblock > .credstrip { flex: 0 0 auto; }
.imghero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imghero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,20,15,0.42) 0%, rgba(16,20,15,0.50) 45%, rgba(16,20,15,0.86) 100%); }
/* width:100% because .wrap carries auto margins, which switch off flex
   stretch, so the hero used to be sized by its own content. That put the
   hero text on a different left edge on every page. */
/* padding-top clears the 66px fixed header. The hero is bottom-justified, so on
   a tall screen this changes nothing; on a short laptop it stops the headline
   tucking under the nav once the hero is filling the viewport. */
.imghero > .wrap { position: relative; z-index: 2; width: 100%; padding-top: 96px; padding-bottom: 58px; }
.imghero .eyebrow { color: #eae7df; }
.imghero h1 { color: #fff; font-weight: 300; font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 22px; text-shadow: 0 1px 2px rgba(8,12,7,0.55),0 2px 26px rgba(8,12,7,0.45); }
.imghero h1 em { color: #d6e4d8; text-shadow: 0 2px 16px rgba(10,14,10,0.55); }
.imghero .lede { color: rgba(255,255,255,0.9); max-width: 620px; font-size: clamp(1.12rem,2vw,1.4rem); line-height: 1.6; margin-bottom: 30px; }
.photofull { width: 100%; border-radius: 4px; display: block; max-height: 520px; object-fit: cover; margin: 0; }
.split img { width: 100%; aspect-ratio: 5/4; object-fit: cover; border-radius: 4px; display: block; }
.imghero .hero-note { color: rgba(255,255,255,0.72); }
.imghero .btn-secondary { color: #fff; border-color: rgba(255,255,255,0.55); }
.imghero .btn-secondary:hover { border-color: #fff; }
.imgdark { position: relative; overflow: hidden; }
.imgdark .imghero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imgdark-scrim { position: absolute; inset: 0; background: rgba(15,18,14,0.70); }
.imgdark > .wrap { position: relative; z-index: 2; }
.imgdark .section-label { color: var(--accent-soft); }
.imgdark h2 { color: #fff; }
.imgdark h2 em { color: var(--accent-soft); }
.imgdark p { color: rgba(255,255,255,0.88); }
.imgdark strong { color: #fff; }
.cta-ghost { display: inline-block; background: none; border: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 5px; padding: 12px 2px; font-size: 0.92rem; letter-spacing: 0.02em; }
section.spacious { padding: 160px 0; }
section.tight { padding: 80px 0; }
.credstrip { padding: 20px 0; }
.credstrip .wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--mid); text-align: center; }
.credstrip .accent { color: var(--accent); font-weight: 600; }
.credstrip span:not(:first-child)::before { content: "·"; color: #bdbab1; margin-right: 16px; }
.price-figures { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 34px 0 16px; max-width: 560px; }
.pf-num { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 3.4rem; font-weight: 400; line-height: 1; color: var(--ink); margin-bottom: 8px; }
.pf-lab { font-size: 0.85rem; letter-spacing: 0.04em; color: var(--mid); margin-bottom: 4px; }
.pf-alt { font-size: 0.85rem; color: var(--light); margin-bottom: 0; }
.price-note { font-size: 0.9rem; color: var(--light); margin-bottom: 0; }
.statement { margin-top: 46px; max-width: var(--readw); }
.statement-line { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); margin-bottom: 12px; }
.statement-body { font-size: 1rem; line-height: 1.65; color: var(--mid); margin-bottom: 0; }
.btn-row { margin-top: 22px; margin-bottom: 0; }
.btn-row-lg { margin-top: 38px; margin-bottom: 0; }
.btn-row-sm { margin-top: 8px; margin-bottom: 0; }
.btn-row-sub { margin-top: 14px; margin-bottom: 0; }
.personal { background: var(--accent-light); border-top: 1px solid var(--stone); border-bottom: 1px solid var(--stone); }
.guarantee p:last-child { margin-bottom: 0; }
.guarantee strong { color: var(--ink); font-weight: 600; }
.guarantee .step { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 14px; }
.imghero .cta-ghost { color: #fff; }
.rating-note { font-size: 0.88rem; line-height: 1.5; color: var(--mid); margin-top: 24px; margin-bottom: 0; max-width: 520px; }
.rating-link { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.imghero .rating-note { color: rgba(255,255,255,0.78); }
.imghero .rating-link { color: #fff; }
.guarantee .statement-line { font-size: 1.35rem; margin-bottom: 10px; }
.guarantee .statement-body { color: var(--mid); margin-bottom: 14px; }
.guarantee .statement-body:last-child { margin-bottom: 0; }
.home-quote .pull { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 0 0 14px; }
.price-label { margin-top: 58px; }
.pcard .choose { font-size: 0.78rem; letter-spacing: 0.06em; color: var(--accent-soft); margin-bottom: 18px; }
.cmp { margin-top: 44px; overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 14px 14px; border-bottom: 1px solid var(--rule); font-size: 0.9rem; line-height: 1.5; vertical-align: top; text-align: left; }
.cmp thead th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); font-weight: 600; border-bottom: 1px solid var(--ink); }
.cmp tbody th { font-weight: 500; color: var(--ink); width: 14%; }
.cmp td { color: var(--mid); }
.cmp .me { background: var(--accent-light); color: var(--ink); }
.cmp td.me { font-weight: 500; }
.cmp thead th.me { color: var(--accent); border-bottom-color: var(--accent); }
.cmp-note { font-size: 0.82rem; color: var(--light); margin-top: 18px; margin-bottom: 0; }
.cmp-cards { display: none; }
.statement:first-child { margin-top: 0; }
.statement-body + .statement-body { margin-top: 14px; }
.pricing .price-grid { max-width: 820px; }
.pricing .guarantee { margin-top: 40px; padding: 26px 28px; border: 1px solid #3f3f38; border-radius: 4px; background: rgba(255,255,255,0.03); }
.pay-note.lead-note { max-width: 600px; margin-top: 34px; font-size: 0.98rem; }
.pay-note.footnote { font-size: 0.82rem; }
.pricing .btn-primary { background: #fff; color: var(--accent); }
.pricing .btn-primary:hover { background: var(--accent-light); color: var(--accent-deep); }
.pcard .btn { margin-top: 26px; }
.pricing .guarantee p { color: #e6e6e0; margin-bottom: 14px; }
.pricing .guarantee p:last-child { margin-bottom: 0; }
.pricing .guarantee strong { color: #fff; }
.pricing .guarantee .step { color: var(--accent-soft); }
/* One left spine.
   The reading column used to be a 720px .wrap, centred by the same auto
   margins that centre the 1120px one, so the left edge of the page jumped
   about 200px every time a section changed type. Removing the auto margin is
   not the fix: it drops the column to the edge of the viewport instead.
   The wrap keeps its full 1120 width and its centring, and the narrow measure
   is applied to the children, so text starts on the same x as everything
   else and simply stops sooner. */
.wrap.read { max-width: var(--maxw); }
.wrap.read > * { max-width: var(--readw); }

/* LEAD MAGNET, moved out of the partial so it is stated once */
/* Every value here comes from the variables the page already defines, so the
     block cannot drift away from the rest of the site on a colour change. */
  .lv-guide { background: var(--accent-light); padding: 76px 0; }
  .lv-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
  .lv-inner { max-width: var(--readw); text-align: center; margin: 0 auto; }
  .lv-eyebrow { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin: 0 0 18px; }
  .lv-h { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; color: var(--accent); margin: 0 0 14px; line-height: 1.1; letter-spacing: -0.015em; font-size: clamp(2rem, 4.5vw, 2.7rem); }
  .lv-intro { font-size: 1.12rem; color: var(--mid); max-width: 620px; margin: 0 auto 24px; }
  .lv-form { max-width: 520px; margin: 0 auto; }
  .lv-row { display: flex; gap: 12px; flex-wrap: wrap; }
  .lv-row input[type=email] { flex: 1 1 240px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 8px; font-family: inherit; font-size: 0.98rem; background: var(--white); color: var(--ink); margin-bottom: 0; }
  .lv-btn { display: inline-block; font-family: inherit; font-size: 0.95rem; font-weight: 500; padding: 14px 30px; border-radius: 30px; background: var(--accent); color: #fff; border: 1.5px solid var(--accent); cursor: pointer; transition: all .2s; }
  .lv-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); transform: translateY(-1px); }
  .lv-consent { font-size: 0.8rem; color: var(--mid); margin: 14px 0 0; line-height: 1.5; }
  .lv-consent a { color: var(--accent); }
  .lv-hp { position: absolute; left: -5000px; height: 0; overflow: hidden; }
  @media (max-width: 520px) { .lv-row .lv-btn { width: 100%; } }

/* ASSESSMENT: the hero price line and the doctor card, both of which were
   built out of inline styles on the page itself. */
.imghero .hero-price { font-size: 0.95rem; color: rgba(255,255,255,0.8); margin-top: 16px; margin-bottom: 0; }
.doctor-card { display: flex; align-items: stretch; justify-content: center; gap: 22px; margin: 6px auto 8px; flex-wrap: wrap; max-width: 640px; }
.doctor-card img { align-self: stretch; height: auto; width: auto; aspect-ratio: 1/1; max-height: 150px; object-fit: cover; object-position: center; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 2px 10px rgba(16,20,15,.14); }
.doctor-card .doctor-text { text-align: left; max-width: 440px; align-self: center; }
.doctor-card .doctor-text p { margin: 0; }
.btn + .btn { margin-left: 10px; }

/* ABOUT hero. The one page where a face is the point, so the portrait leads
   rather than sitting below the fold. A studio headshot cannot take text over
   it, so this is a dark band with the portrait beside the headline instead of
   an .imghero with a scrim. */
/* The one hero that is neither a photograph nor followed by a credibility strip.
   It fills the screen on the same rule as the others, and the portrait scales
   with it so the figure does not shrink inside a taller band. 31 July 2026. */
.abouthero { background: var(--ink); color: #fff; padding: 110px 0 0; position: relative; overflow: hidden;
  min-height: calc(100vh - var(--sticky-cta));
  min-height: calc(100svh - var(--sticky-cta));
  display: flex; flex-direction: column; justify-content: flex-end; }
.abouthero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: end; width: 100%; }
.abouthero .aboutcopy { align-self: center; padding-bottom: 0; }
.abouthero .eyebrow { color: #eae7df; }
.abouthero h1 { color: #fff; font-weight: 300; font-size: clamp(2.6rem, 5.5vw, 4.2rem); line-height: 1.05; letter-spacing: -0.015em; margin-bottom: 22px; }
.abouthero h1 em { color: #d6e4d8; }
.abouthero .lede { color: rgba(255,255,255,0.82); font-size: clamp(1.12rem, 2vw, 1.35rem); line-height: 1.6; margin-bottom: 0; max-width: 620px; }
/* The portrait is a cutout with no background of its own, so it needs a light
   source behind it or the black suit sinks into the ink band. The halo is a
   soft radial in the paper tone, sized off the figure and clipped by the band. */
.abouthero .herofig { position: relative; width: 100%; max-width: 470px; margin-left: auto; align-self: end; }
.abouthero .herofig::before { content: ''; position: absolute; left: 50%; top: 2%; transform: translateX(-50%); width: 125%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(236,231,219,0.17), rgba(236,231,219,0.055) 52%, rgba(236,231,219,0) 76%); pointer-events: none; }
.abouthero .herofig img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* responsive */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}
@media (max-width:1150px) {
  nav.desktop a[href^="tel:"] { display: none; }
}
@media (max-width:1040px) {
  nav.desktop { display: none; }
  .hamburger { display: block; }
}
@media (max-width:860px) {
  .abouthero { padding: 120px 0 0; }
  .abouthero .wrap { grid-template-columns: 1fr; gap: 8px; }
  .abouthero .herofig { max-width: 300px; margin: 0 auto; }
  .abouthero .herofig::before { width: 132%; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px 20px; }
  nav.desktop { display: none; }
  .hamburger { display: block; }
  .hero .wrap, .points, .windows, .price-grid, .about-grid, .quote-grid, .incl-grid, .contact-grid, .form-row { grid-template-columns: 1fr; }
  .hero .wrap { gap: 34px; }
  .hero-portrait { max-width: 320px; }
  .wcard.full { grid-column: auto; }
  section { padding: 80px 0; }
  .hero { padding: 140px 0 70px; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 78px; }
  footer { padding-bottom: 96px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .pagehead { padding: 128px 0 36px; }
  .journal-grid { grid-template-columns: 1fr; }
  /* the sticky call-to-action bar is 77px and sits over the foot of the screen */
  :root { --sticky-cta: 77px; }
  .imghero > .wrap { padding-top: 120px; }
  /* On a phone the credibility strip stacks to five lines, about 177px, and the
     hero's own content is already close to a full screen, so the pair cannot
     share one fold without shrinking the headline. The hero takes the screen and
     the strip is the first thing met on scroll. */
  .heroblock { min-height: 0; }
  .heroblock > .imghero { min-height: calc(100vh - var(--sticky-cta)); min-height: calc(100svh - var(--sticky-cta)); }
  section.spacious { padding: 100px 0; }
  section.tight { padding: 64px 0; }
  .price-figures { grid-template-columns: 1fr; gap: 26px; margin: 28px 0 26px; max-width: none; }
  .credstrip .wrap { flex-direction: column; gap: 7px; }
  .credstrip span:not(:first-child)::before { content: none; }
  .home-quote .pull { font-size: 1.35rem; }
  .cmp { overflow-x: visible; }
  .cmp table { display: none; }
  .cmp-cards { display: grid; gap: 16px; }
  .cmp-card { background: var(--white); border: 1px solid var(--rule); border-radius: 4px; padding: 22px 24px; }
  .cmp-card h3 { font-size: 1.3rem; font-weight: 400; margin-bottom: 10px; }
  .cmp-card dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-top: 14px; }
  .cmp-card dd { font-size: 0.92rem; color: var(--mid); line-height: 1.5; }
  .cmp-card.me { background: var(--accent-light); border-color: var(--stone); }
  .cmp-card.me dd { color: var(--ink); }
}

/* Print. The scroll-reveal never fires in a print context, so without this a
   page prints blank if it has not been scrolled first. */
@media print {
  .fade { opacity: 1 !important; transform: none !important; }
}
