/*
Theme Name: Signature Pointe
Template: kadence
Description: Child theme for Signature Pointe Psychiatric and Mental Health. This is the exact CSS from the client-approved "Midnight & Gold" mockup, copied verbatim — not reconstructed — to guarantee pixel-perfect fidelity.
Author: Dastify
Version: 3.7.0
Text Domain: signature-pointe
*/

/* fonts (self-hosted, Google Fonts latin subset) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-01-77c59fc6ed.woff2") format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-01-77c59fc6ed.woff2") format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/font-01-77c59fc6ed.woff2") format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-02-e2d975fb69.woff2") format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-02-e2d975fb69.woff2") format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/font-02-e2d975fb69.woff2") format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/font-02-e2d975fb69.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-03-e6e85761c0.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-03-e6e85761c0.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/font-03-e6e85761c0.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/font-03-e6e85761c0.woff2") format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-04-2e2137763f.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-05-01563ecdaa.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-06-084fdea951.woff2") format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/font-06-084fdea951.woff2") format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/font-07-5e7c14f914.woff2") format('woff2');
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/font-07-5e7c14f914.woff2") format('woff2');
}

/*
 * Variant 3 — "Midnight & Gold": editorial, premium homepage for
 * Signature Pointe Psychiatric and Mental Health PLLC.
 * This CSS is copied verbatim from the client-approved static mockup
 * (homepage-mockup/variant-3.html) — do not selectively re-port pieces of
 * it again; include it whole. Colours live in :root only.
 */

/* ---------- Tokens ---------- */
:root {
  --navy: #1c2541;
  --navy-deep: #121a30;
  --gold: #c59d5f;
  --gold-light: #d9b985;
  --gold-ink: #8a6425;
  --cream: #faf6ee;
  --mist: #e8ebf3;
  --white: #fff;
  --line: rgba(197, 157, 95, .55);
  --muted: rgba(28, 37, 65, .74);
  --font-head: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", system-ui, sans-serif;
  --header-h: 112px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --leaf: 14px 131px 14px 131px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 17px/1.75 var(--font-body) !important; color: var(--navy); background: var(--white); overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-head) !important; font-weight: 500 !important; line-height: 1.02; letter-spacing: -.005em; }
h2 { font-size: clamp(40px, 5vw, 68px) !important; }
em { font-style: italic; color: var(--gold-ink); }
.on-dark em, .hero em { color: var(--gold); }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.container { width: min(1200px, 100% - 48px); margin-inline: auto; }
.section { padding: 120px 0; position: relative; }
.eyebrow { display: inline-block; margin-bottom: 22px; font: 500 13px/1 var(--font-body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink); }
.on-dark .eyebrow, .hero .eyebrow { color: var(--gold); }
.lead { max-width: 560px; margin-top: 22px; font-size: 17px; color: var(--muted); }
.on-dark { background: var(--navy); color: var(--cream); }
.on-dark .lead { color: rgba(250, 246, 238, .78); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 32px; font: 500 13px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; border: 1px solid var(--gold); cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.btn .icon { font-size: 16px; transition: translate .3s var(--ease); }
.btn:hover .icon { translate: 4px 0; }
.btn--gold { background: var(--gold); color: var(--navy-deep); }
.btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.btn--ghost { color: var(--cream); border-color: rgba(250, 246, 238, .6); }
.btn--ghost:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.btn--outline { color: var(--gold); padding: 13px 24px; }
.btn--outline:hover { background: var(--gold); color: var(--navy-deep); }
.site-header:not(.solid) .btn--outline { background: rgba(18, 26, 48, .78); }
.site-header:not(.solid) .btn--outline:hover { background: var(--gold); }
.btn--navy { background: var(--navy); border-color: var(--navy); color: var(--cream); }
.btn--navy:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); }

/* ---------- Logo (full lockup: mark + wordmark + subtitle, one SVG) ---------- */
.logo { display: flex; align-items: center; }
.logo-mark { width: auto; height: 98px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); margin-bottom: calc(var(--header-h) * -1); color: var(--cream); transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease); }
.site-header.solid { background: var(--navy); box-shadow: 0 10px 30px rgba(18, 26, 48, .35); }
.header-in { height: 100%; width: min(1320px, 100% - 48px); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; }
.nav { display: flex; align-items: center; gap: 32px; font: 500 13px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.nav--l { justify-content: flex-end; }
.nav--r { justify-content: flex-start; }
.nav a:not(.btn) { position: relative; padding: 8px 0; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right .3s var(--ease); }
.nav a:not(.btn):hover::after { right: 0; }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.burger { display: none; width: 44px; height: 44px; place-items: center; cursor: pointer; font-size: 28px; line-height: 1; }
.nav-toggle:focus-visible ~ .header-in .burger { outline: 2px solid var(--gold); }
/* wp_nav_menu() always wraps items in <ul><li>, but the mockup's CSS assumes
   bare <a> tags as .nav's direct flex children (Kadence's own CSS used to
   paper over this gap incidentally; now that only our CSS loads on the
   front page, we need to handle it ourselves). display:contents removes the
   ul/li from the box tree so the <a> tags become the effective flex items,
   matching the original markup's behavior exactly. */
.nav ul, .foot-nav ul { display: contents; list-style: none; margin: 0; padding: 0; }
.nav li, .foot-nav li { display: contents; }

/* The "Services" item is the one nav li that isn't a bare flex child: it
   needs its own box to host the dropdown's absolute positioning. */
.nav li.menu-item-has-dropdown { display: block; position: relative; }
.nav li.menu-item-has-dropdown > a { display: inline-block; }
.nav .sub-menu { display: block; position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: 14px; min-width: 230px; padding: 10px 0; background: var(--navy); border: 1px solid var(--line); box-shadow: 0 20px 40px rgba(18, 26, 48, .35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 60; }
.nav li.menu-item-has-dropdown:hover .sub-menu,
.nav li.menu-item-has-dropdown:focus-within .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav .sub-menu li { display: block; }
.nav .sub-menu a { display: block; padding: 10px 24px; font-size: 12px; letter-spacing: .1em; white-space: nowrap; color: var(--cream); }
.nav .sub-menu a::after { display: none; }
.nav .sub-menu a:hover { background: rgba(197, 157, 95, .14); color: var(--gold); }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 800px; padding: calc(var(--header-h) + 90px) 0 110px; display: flex; align-items: center; color: var(--cream);
  background-color: var(--navy);
  background-image: linear-gradient(90deg, rgba(18, 26, 48, .96) 0%, rgba(18, 26, 48, .86) 36%, rgba(28, 37, 65, .35) 72%, rgba(28, 37, 65, .2) 100%),
                    linear-gradient(0deg, rgba(18, 26, 48, .95) 0%, transparent 45%),
                    url("../../uploads/2026/11/image-18-6acf4df501.jpg");
  background-size: cover; background-position: 70% center;
  background-blend-mode: normal, normal, luminosity; }
.hero h1 { max-width: 9.5em; font-size: clamp(56px, 8vw, 118px) !important; line-height: .92; color: var(--cream) !important; }
.hero p { max-width: 560px; margin: 30px 0 38px; font-size: 18px; color: rgba(250, 246, 238, .88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.field { width: 100%; padding: 16px 18px; font: 400 15px var(--font-body); color: var(--navy); background: var(--cream); border: 1px solid transparent; border-radius: 0; }
.field:focus { outline: none; border-color: var(--gold); }
.field::placeholder { color: rgba(28, 37, 65, .6); }

/* ---------- Your first visit (process) ---------- */
.visit { background: var(--cream); padding: 120px 0 100px; }
.visit-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 56px; }
.visit-head h2 { max-width: 10em; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.step { padding: 36px 36px 8px 36px; border-left: 1px solid var(--line); }
.step:first-child { padding-left: 0; border-left: 0; }
.step b { display: block; margin-bottom: 14px; font: 500 64px/1 var(--font-head); color: var(--gold-ink); }
.step h3 { font-size: 30px !important; margin-bottom: 10px; }
.step p { font-size: 16px; color: var(--muted); }

/* ---------- About ---------- */
.about-top { display: grid; grid-template-columns: 7fr 5fr; gap: 80px; align-items: end; }
.about-top p { color: var(--muted); }
.about-top .btn { margin-top: 32px; }
.photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 90px; align-items: start; }
.frame { position: relative; isolation: isolate; }
.frame::after { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid var(--gold); z-index: -1; }
.frame img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: center 30%; }
.frame:first-child img { object-position: center 75%; }
.frame:nth-child(2) { margin-top: 70px; }
.frame:nth-child(2)::after { inset: 18px 18px -18px -18px; }

/* ---------- Services ---------- */
.services { background: var(--mist); }
.services-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 90px; margin-top: 60px; align-items: start; }
.svc { display: grid; grid-template-columns: 70px 56px 1fr 32px; gap: 22px; align-items: center; padding: 34px 24px; border-top: 1px solid rgba(28, 37, 65, .2); transition: background .35s var(--ease), padding .35s var(--ease); text-decoration: none; color: inherit; }
.svc:last-child { border-bottom: 1px solid rgba(28, 37, 65, .2); }
.svc b { font: 500 44px/1 var(--font-head); color: var(--gold-ink); transition: color .3s; }
.svc img { width: 56px; height: 56px; mix-blend-mode: multiply; }
.svc h3 { font-size: 34px !important; margin-bottom: 6px; }
.svc p { font-size: 16px; color: var(--muted); transition: color .3s; }
.svc .icon { font-size: 26px; transition: translate .3s var(--ease); }
.svc:hover, .svc:focus-visible { background: var(--gold); padding-inline: 34px; }
.svc:hover b, .svc:hover p, .svc:focus-visible b, .svc:focus-visible p { color: var(--navy-deep); }
.svc:hover .icon { translate: 6px 0; }
.side-photo { position: sticky; top: calc(var(--header-h) + 24px); isolation: isolate; }
.side-photo::after { content: ""; position: absolute; inset: 20px -20px -20px 20px; border: 1px solid var(--gold-ink); border-radius: var(--leaf); z-index: -1; }
.side-photo img { width: 100%; }

/* ---------- Why choose me ---------- */
.why-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 100px; align-items: center; }
.portrait { position: relative; isolation: isolate; max-width: 460px; }
.portrait::after { content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--gold); border-radius: var(--leaf); z-index: -1; }
.portrait img { width: 100%; }
.pillars { margin-top: 44px; }
.pillar { display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar .icon { width: 48px; height: 48px; padding: 12px; color: var(--gold); border: 1px solid var(--gold); border-radius: 50%; }
.pillar h3 { font-size: 30px !important; margin-bottom: 4px; color: var(--cream) !important; }
.pillar p { font-size: 16px; color: rgba(250, 246, 238, .78); }

/* ---------- Appointment / contact (reversed split) ----------
   Shared by the homepage's "Book Appointment" section and the Contact
   page's form section (Design-canvas Variant C, "Split Panel", picked
   2026-11-05) - one navy info panel with a dot-grid texture, one
   form panel - so both forms stay visually identical with zero CSS
   duplication; only the copy/fields inside differ per page. */
.appointment { display: grid; grid-template-columns: 1fr 1fr; }
.contact { position: relative; overflow: hidden; padding: 100px max(24px, 6vw) 100px max(24px, calc((100vw - 1200px) / 2)); background: var(--navy); color: var(--cream); display: flex; flex-direction: column; justify-content: center; }
.contact::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(250, 246, 238, .14) 1px, transparent 1px); background-size: 18px 18px; opacity: .5; pointer-events: none; }
.contact-in { position: relative; z-index: 1; }
.contact-in .entry-content p { color: rgba(250, 246, 238, .78); }
.contact h2 { font-size: clamp(36px, 4.2vw, 56px) !important; color: var(--cream) !important; }
.phone { display: inline-block; margin: 32px 0 6px; font: 500 clamp(42px, 5.4vw, 74px)/1 var(--font-head); color: var(--gold); transition: color .3s; }
.phone:hover { color: var(--gold-light); }
.contact-lines { display: grid; gap: 18px; margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line); }
.contact-lines li { display: flex; gap: 16px; align-items: flex-start; }
.contact-lines .icon { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--gold); }
.contact-lines a:hover { color: var(--gold); }
.book { padding: 100px max(24px, calc((100vw - 1200px) / 2)) 100px max(24px, 6vw); background: var(--white); display: flex; flex-direction: column; justify-content: center; }
.book h2 { margin-bottom: 30px; font-size: clamp(36px, 4.2vw, 56px) !important; color: var(--navy) !important; }

/* ---------- Blog (featured + stack) ---------- */
.blog-grid { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 24px; margin-top: 56px; }
.post { position: relative; display: block; overflow: hidden; }
.post--feat { grid-row: 1 / 3; min-height: 560px; color: var(--cream); }
.post--feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.post--feat:hover img { scale: 1.05; }
.post--feat .txt { position: absolute; inset: auto 0 0; padding: 120px 40px 40px; background: linear-gradient(0deg, rgba(18, 26, 48, .96) 15%, transparent); }
.post--feat h3 { font-size: clamp(30px, 3.2vw, 44px) !important; max-width: 15em; color: var(--cream) !important; }
.post--row { display: grid; grid-template-columns: 42% 1fr; background: var(--white); border: 1px solid rgba(28, 37, 65, .12); }
.post--row img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
.post--row .txt { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.post--row h3 { font-size: 27px !important; line-height: 1.1; }
.post--row:hover h3 { color: var(--gold-ink) !important; }
.date { display: block; margin-bottom: 12px; font: 500 12px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-ink); }
.post--feat .date { color: var(--gold); }
.blog .center { margin-top: 48px; }

/* ---------- Closing CTA + circle gallery ---------- */
.cta { padding-bottom: 0; overflow: hidden; }
/* .cta's own bottom padding is zeroed because the homepage's circles
   gallery supplies its own generous bottom space instead - but a few
   pages use this same closing-CTA pattern without that gallery (About,
   Services archive), which left them flush against the footer with no
   breathing room at all. Restore it only where there's no gallery to
   supply it. */
.cta:not(:has(.circles)) { padding-bottom: 120px; }
.cta h2 { max-width: 14em; margin-inline: auto; color: var(--cream) !important; }
.cta .btn { margin-top: 38px; }
.circles { display: flex; justify-content: center; margin-top: 80px; padding: 0 24px 100px; }
/* Elementor's own frontend.css has a generic `.elementor img{border-radius:0}`
   reset that ties in specificity with the rule below and wins by load order
   (it's enqueued after this stylesheet) — same documented exception as the
   heading overrides above. */
.circles img { width: clamp(120px, 15vw, 210px); aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 50% !important; border: 5px solid var(--navy) !important; margin-left: -22px; }
.circles img:first-child { margin-left: 0; }
.circles img:nth-child(2n) { margin-top: 44px; }

/* ---------- Footer (four-column: brand+social / links / contact / newsletter,
   one thin legal bar) ---------- */
.site-footer { background: var(--navy-deep); color: var(--cream); padding: 64px 0 0; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 36px; }
.foot-col-label { display: block; margin-bottom: 16px; font: 500 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.foot-col--brand .logo { width: fit-content; }
.foot-col--brand .logo-mark { height: 140px; }
/* Tagline's own margins are tightened to absorb the logo's height increase
   above, so growing the logo doesn't also grow the footer's total height. */
.foot-tagline { margin: 10px 0 14px; max-width: 260px; font-size: 14px; line-height: 1.6; color: rgba(250, 246, 238, .72); }
.foot-nav { display: flex; flex-direction: column; gap: 12px; font: 500 14px/1 var(--font-body); }
.foot-nav a:hover, .foot-contact-list a:hover { color: var(--gold); }
/* Services column: 8 items in a 2-column grid rather than one tall list, so
   it doesn't become the tallest column and dictate the footer's height. */
.foot-nav--services { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.foot-contact-list { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: rgba(250, 246, 238, .82); }
.foot-contact-list span, .foot-contact-list a { display: flex; align-items: center; gap: 10px; }
.foot-contact-list .icon { flex: none; width: 16px; height: 16px; color: var(--gold); }
.news { display: flex; flex-direction: column; gap: 8px; }
.news input { width: 100%; box-sizing: border-box; padding: 12px 14px; font: 400 14px var(--font-body); color: var(--cream); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.news input::placeholder { color: rgba(250, 246, 238, .6); }
.news input:focus { outline: none; border-color: var(--gold); }
.news .btn { border: 0; justify-content: center; }
.legal { border-top: 1px solid var(--line); padding: 22px 0; display: flex; justify-content: center; text-align: center; font-size: 13px; color: rgba(250, 246, 238, .7); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav { gap: 22px; font-size: 12px; }
  .header-in { gap: 20px; }
}
@media (max-width: 992px) {
  :root { --header-h: 84px; }
  .section { padding: 84px 0; }
  .site-header { background: var(--navy); }
  .header-in { display: flex; flex-wrap: wrap; align-content: center; gap: 0; height: auto; min-height: var(--header-h); position: relative; }
  .site-header { height: auto; min-height: var(--header-h); }
  .logo { order: 1; }
  .logo-mark { height: 70px; }
  .burger { display: grid; order: 2; margin-left: auto; }
  .nav { display: none; order: 3; width: 100%; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 18px; }
  .nav--r { order: 4; padding-top: 0; }
  .nav a:not(.btn) { display: block; width: 100%; padding: 14px 0; border-bottom: 1px solid rgba(197, 157, 95, .25); }
  .nav .btn { margin-top: 16px; }
  .nav li.menu-item-has-dropdown { width: 100%; }
  .nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; translate: 0; min-width: 0; margin: 0; padding: 0 0 6px 18px; background: transparent; border: 0; box-shadow: none; }
  .nav .sub-menu a { padding: 10px 0; border-bottom: 0; opacity: .8; }
  .nav-toggle:checked ~ .header-in .nav { display: flex; }
  .hero { min-height: 740px; padding-bottom: 70px; background-position: 74% center; }
  .visit { padding-top: 70px; }
  .visit-head { flex-direction: column; align-items: flex-start; }
  .steps { grid-template-columns: 1fr; }
  .step, .step:first-child { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .about-top, .services-grid, .why-grid, .appointment, .blog-grid { grid-template-columns: 1fr; }
  .about-top { gap: 30px; }
  .photos { gap: 28px; margin-top: 60px; }
  .frame:nth-child(2) { margin-top: 36px; }
  .side-photo { position: relative; top: 0; max-width: 380px; margin-inline: auto; }
  .why-grid { gap: 70px; }
  .portrait { margin-inline: auto; width: calc(100% - 22px); }
  .contact, .book { padding: 70px 24px; }
  .post--feat { grid-row: auto; min-height: 460px; }
  .circles { flex-wrap: wrap; gap: 10px; padding-bottom: 70px; }
  .circles img { margin: 0 !important; width: calc(33.33% - 8px); }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .foot-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding-top: calc(var(--header-h) + 60px); }
  .visit { padding-top: 50px; }
  .photos { grid-template-columns: 1fr; width: calc(100% - 18px); }
  .frame:nth-child(2) { margin-top: 0; }
  .svc { grid-template-columns: 44px 1fr 24px; padding: 26px 8px; gap: 14px; }
  .svc img { display: none; }
  .svc b { font-size: 34px; }
  .svc h3 { font-size: 28px !important; }
  .svc:hover { padding-inline: 14px; }
  .pillar { grid-template-columns: 48px 1fr; gap: 16px; }
  .book form { grid-template-columns: 1fr; }
  .post--row { grid-template-columns: 1fr; }
  .post--row img { min-height: 170px; height: 170px; }
  .post--feat .txt { padding: 90px 24px 28px; }
  .circles img { width: calc(50% - 8px); }
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-col--brand { grid-column: auto; }
  .foot-tagline { max-width: none; }
  .legal { flex-direction: column; text-align: center; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  html, .slides { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ============================================================
   Inner-page additions (About / Contact / Services / Blog)
   Same token system as above — no new colours, no new fonts.
   ============================================================ */

/* ---------- Page banner (About / Contact / Services / Blog index) ---------- */
.page-hero { padding-top: calc(var(--header-h) + 80px); padding-bottom: 80px; }
.page-hero h1 { font-size: clamp(44px, 6vw, 84px); }
.page-hero .lead { color: rgba(250, 246, 238, .78); }
.breadcrumb { display: block; margin-top: 18px; font-size: 14px; color: rgba(250, 246, 238, .6); }
.breadcrumb a:hover { color: var(--gold); }

/* ---------- About page ---------- */
.about-page-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 90px; align-items: start; }
.about-page-grid .frame img { aspect-ratio: 3 / 4; }
.about-page-grid .entry-content { color: var(--muted); font-size: 17px; }
.about-page-grid .entry-content > * + * { margin-top: 22px; }
.about-page-grid .entry-content h2 { font-size: clamp(30px, 3vw, 44px); margin-top: 48px; }
.approach-grid { margin-top: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.approach-card { background: var(--white); padding: 40px 32px; }
.approach-card .icon { width: 40px; height: 40px; color: var(--gold-ink); margin-bottom: 20px; }
.approach-card h3 { font-size: 24px; margin-bottom: 10px; }
.approach-card p { font-size: 15px; color: var(--muted); }

/* ---------- Services archive (full list, no side photo) ---------- */
.services-list { max-width: 880px; margin-top: 60px; }
.services-list .svc { grid-template-columns: 70px 56px 1fr 32px; }
.svc .thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }

/* ---------- Single service page (magazine layout) ----------
   Full-width photo hero, then each H2 section the client writes in the
   normal block editor becomes its own alternating full-width band with a
   meaning-matched icon watermark (never a page number) — chosen from the
   section's own heading text by sp_service_section_icon() in
   single-service.php. No per-section photography exists yet (see
   CLAUDE.md's photography TODO), so the "zig-zag" rhythm comes from
   alternating band colour + icon side rather than alternating images;
   the hero is the one place a real photo (the service's featured image)
   is used, and swapping in per-section photos later is a markup change in
   single-service.php, not a redesign. */
.service-back { display: flex; align-items: center; gap: 8px; margin-bottom: 30px; font: 500 13px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.service-back .icon { width: 16px; height: 16px; transform: scaleX(-1); }
.service-back:hover { color: var(--cream); }

.svc-hero { position: relative; min-height: 800px; display: flex; align-items: center; padding: calc(var(--header-h) + 70px) 0 90px; color: var(--cream); background-color: var(--navy); background-size: cover; background-position: center; overflow: hidden; }
.svc-hero .container { position: relative; z-index: 1; }
.svc-hero h1 { font-size: clamp(42px, 5.6vw, 72px); max-width: 16em; }
.svc-hero .lead { max-width: 620px; }
.svc-hero-mark { position: absolute; top: 8%; right: 3%; width: 300px; height: 300px; color: var(--gold); opacity: .14; stroke-width: 1.2; }

.svc-intro { padding: 80px 0 20px; }
.svc-intro .entry-content { max-width: 760px; margin-inline: auto; font-size: 19px; color: var(--navy); }

.svc-band { position: relative; padding: 80px 0; overflow: hidden; border-top: 1px solid rgba(28, 37, 65, .08); background: var(--cream); }
.svc-band--alt { background: var(--white); }
.svc-band-inner { max-width: 760px; margin-inline: auto; position: relative; z-index: 1; }
.svc-band-inner h2 { font-size: clamp(28px, 3vw, 42px) !important; margin-bottom: 20px; }
.svc-band .entry-content { font-size: 17px; }
.svc-watermark { position: absolute; top: 50%; translate: 0 -50%; width: 280px; height: 280px; color: var(--gold); opacity: .07; pointer-events: none; }
.svc-watermark .icon { width: 100%; height: 100%; stroke-width: 1; }
.svc-band:not(.svc-band--rev) .svc-watermark { right: -70px; }
.svc-band--rev .svc-watermark { left: -70px; }
.svc-band--rev .svc-band-inner { margin-inline: auto; }

/* Sections with a real per-section photo (see sp_split_article_content's
   Image-block convention) swap the text-only column + icon watermark for
   an actual photo-and-text zig-zag: --rev sections (odd, index 1/3/5...)
   flip which side the photo sits on via the direction:rtl/ltr trick, so
   the alternation matches the band's existing alt-background rhythm. */
.svc-band--media .svc-watermark { display: none; }
.svc-band-inner--media { max-width: 1080px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.svc-band--rev .svc-band-inner--media { direction: rtl; }
.svc-band--rev .svc-band-inner--media > * { direction: ltr; }
.svc-band-photo { position: relative; isolation: isolate; }
.svc-band-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-band-photo::after { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 1px solid var(--gold); z-index: -1; }
.svc-band--rev .svc-band-photo::after { inset: 16px 16px -16px -16px; }
.svc-band-inner--media h2 { margin-bottom: 16px; }

.svc-faq { padding: 90px 0; background: var(--navy); color: var(--cream); }
.svc-faq .container { max-width: 760px; }
.svc-faq h2 { color: var(--cream) !important; margin-bottom: 36px; }
.svc-faq-list { display: grid; gap: 12px; }
.svc-faq-list details { background: var(--navy-deep); border: 0; padding: 6px 24px; }
.svc-faq-list summary { cursor: pointer; font: 500 17px/1.4 var(--font-head); color: var(--cream); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; }
.svc-faq-list summary::-webkit-details-marker { display: none; }
.svc-faq-list summary::after { content: "+"; flex: none; font-size: 22px; color: var(--gold); transition: transform .25s var(--ease); }
.svc-faq-list details[open] summary::after { transform: rotate(45deg); }
.svc-faq-list details > div { padding: 0 0 20px; font-size: 15px; line-height: 1.7; color: rgba(250, 246, 238, .78); }


@media (max-width: 992px) {
  .svc-hero { min-height: 740px; }
  .svc-hero-mark { width: 220px; height: 220px; }
  .svc-watermark { width: 190px; height: 190px; }
  .svc-band-inner--media { grid-template-columns: 1fr; gap: 32px; }
  .svc-band--rev .svc-band-inner--media { direction: ltr; }
}
@media (max-width: 560px) {
  .svc-hero { padding-top: calc(var(--header-h) + 40px); }
  .svc-band, .svc-intro, .svc-faq { padding: 56px 0; }
  .svc-watermark { opacity: .05; }
}

/* ---------- Blog index (listing grid) ---------- */
.blog-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 60px; }
.post-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid rgba(28, 37, 65, .12); }
.post-card .thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--ease); }
.post-card:hover .thumb img { scale: 1.05; }
.post-card .txt { padding: 26px 24px 30px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-size: 24px; line-height: 1.15; margin-bottom: 10px; }
.post-card:hover h3 { color: var(--gold-ink); }
.post-card .excerpt { font-size: 15px; color: var(--muted); margin-top: auto; padding-top: 10px; }
.pagination { margin-top: 60px; display: flex; justify-content: center; gap: 10px; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid rgba(28, 37, 65, .16); font: 500 14px var(--font-body); }
.pagination a:hover { border-color: var(--gold); color: var(--gold-ink); }
.pagination .current { background: var(--navy); color: var(--cream); border-color: var(--navy); }

/* ---------- Single blog post ---------- */
.post-detail { max-width: 800px; margin-inline: auto; }
.post-detail .post-thumb { margin-bottom: 50px; }
.post-detail .post-thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-detail .entry-content { color: var(--muted); font-size: 18px; line-height: 1.8; }
.post-detail .entry-content > * + * { margin-top: 24px; }
.post-detail .entry-content h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 48px; color: var(--navy); }

/* ---------- Rich article content (long-form service pages, blog posts,
   About page) — headings, lists, pull quotes, and a zero-JS FAQ accordion
   using WordPress core's native "Details" block (<details><summary>), so
   the client can add an FAQ from the normal block editor with no plugin. ---------- */
.entry-content h3 { font-size: clamp(22px, 2.2vw, 28px); margin-top: 36px; color: var(--navy); }
.entry-content p { color: var(--muted); }
.entry-content ul, .entry-content ol { padding-left: 0; margin-top: 18px; display: grid; gap: 12px; }
.entry-content ul li, .entry-content ol li { position: relative; padding-left: 30px; color: var(--muted); }
.entry-content ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.entry-content ol { counter-reset: sp-ol; }
.entry-content ol li { counter-increment: sp-ol; }
.entry-content ol li::before { content: counter(sp-ol) "."; position: absolute; left: 0; top: 0; font: 600 15px/1.6 var(--font-body); color: var(--gold-ink); }
.entry-content blockquote { margin: 0; padding: 26px 30px; border-left: 3px solid var(--gold); background: var(--mist); font: italic 500 20px/1.5 var(--font-head); color: var(--navy); }
.entry-content strong { color: var(--navy); font-weight: 600; }
.entry-content details { border: 1px solid rgba(28, 37, 65, .14); padding: 20px 24px; }
.entry-content details + details { margin-top: 12px; }
.entry-content details summary { cursor: pointer; font: 500 18px/1.4 var(--font-head); color: var(--navy); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.entry-content details summary::-webkit-details-marker { display: none; }
.entry-content details summary::after { content: "+"; flex: none; font-size: 22px; color: var(--gold-ink); transition: transform .25s var(--ease); }
.entry-content details[open] summary::after { transform: rotate(45deg); }
.entry-content details p { margin-top: 14px; font-size: 16px; }
.post-meta { display: flex; gap: 16px; align-items: center; margin-top: 24px; font-size: 14px; color: var(--muted); }
.post-meta .date { margin: 0; }
.post-nav { margin-top: 70px; padding-top: 30px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 20px; }
.post-nav a { font-size: 15px; color: var(--muted); max-width: 45%; }
.post-nav a:hover { color: var(--gold-ink); }

@media (max-width: 992px) {
  .about-page-grid { grid-template-columns: 1fr; gap: 50px; }
  .approach-grid { grid-template-columns: 1fr; }
  .blog-index-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .blog-index-grid { grid-template-columns: 1fr; }
}

/* ---------- Forms (WPForms, re-skinned) ----------
   WPForms' own CSS is dequeued by sp_dequeue_foreign_styles() like every
   other plugin's, same house rule as everything else on this site — so its
   real markup is styled here to look exactly like the old static .field/.btn
   mockup forms it replaced. .wpforms-field-container gets display:contents
   (same trick already used for wp_nav_menu()'s <ul>/<li> wrapping) so the
   individual .wpforms-field divs become direct items of whatever grid/flex
   layout each .sp-form--* variant below sets, sitting alongside
   .wpforms-submit-container as siblings. */
/* WPForms wraps its own <form> in an extra .wpforms-container div, so the
   display:contents chain needs both levels collapsed — not just the field
   container — for the grid/flex layout below to reach the actual fields. */
.sp-form .wpforms-container,
.sp-form form,
.sp-form .wpforms-field-container { display: contents; }
.sp-form .wpforms-field { margin: 0; }
.sp-form .wpforms-field-label,
.sp-form .wpforms-description,
.sp-form #wpforms-error-noscript,
.sp-form .wpforms-error-noscript,
.sp-form .wpforms-required-label {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sp-form input[type="text"],
.sp-form input[type="email"],
.sp-form input[type="tel"],
.sp-form input[type="date"],
.sp-form select,
.sp-form textarea {
  width: 100%; box-sizing: border-box; padding: 14px 16px; font: 400 15px var(--font-body);
  color: var(--navy); background: var(--cream); border: 1px solid rgba(28, 37, 65, .1); border-radius: 0;
}
.sp-form input::placeholder, .sp-form textarea::placeholder { color: rgba(28, 37, 65, .6); }
.sp-form input:focus, .sp-form select:focus, .sp-form textarea:focus { outline: none; border-color: var(--gold); }
.sp-form textarea { resize: vertical; min-height: 140px; }
.sp-form .wpforms-submit-container { margin: 0; }
.sp-form button.wpforms-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%;
  padding: 16px 32px; font: 500 13px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--gold); cursor: pointer; background: var(--navy); color: var(--cream);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.sp-form button.wpforms-submit:hover { background: var(--gold); color: var(--navy-deep); }
.sp-form .wpforms-submit-spinner { display: none !important; }
.sp-form .wpforms-confirmation-container-full {
  padding: 16px 18px; background: var(--cream); color: var(--navy); font-size: 15px; grid-column: 1 / -1;
}

/* Contact & Book Appointment share the Split Panel form look (Design-canvas
   Variant C, picked 2026-11-05): visible small-caps gold-ink labels above
   each field, cream field fills, no secondary background box - the .book
   panel's own background IS the form's background. (Newsletter keeps the
   globally visually-hidden label above, placeholder-only - it wasn't part
   of this redesign.) */
.sp-form--contact .wpforms-field-label,
.sp-form--book .wpforms-field-label {
  position: static; width: auto; height: auto; padding: 0; margin: 0 0 9px; overflow: visible;
  clip: auto; white-space: normal; border: 0;
  display: block; font: 500 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink);
}

/* Book Appointment: Name|Phone, Service|Time, Date spans both columns. */
.sp-form--book { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; }
.sp-form--book [data-field-id="5"] { grid-column: 1 / -1; } /* Preferred Date */
.sp-form--book .wpforms-submit-container { grid-column: 1 / -1; }

/* Contact form: Name|Email, Phone/message/submit span both columns — same
   shape as the mockup, sitting flush in the white form panel. */
.sp-form--contact { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 22px; }
.sp-form--contact .wpforms-field-phone,
.sp-form--contact .wpforms-field-textarea,
.sp-form--contact .wpforms-submit-container { grid-column: 1 / -1; }

/* Footer newsletter: stacked input + full-width gold button, dark theme. */
.sp-form--newsletter { display: flex; flex-direction: column; gap: 8px; }
.sp-form--newsletter input[type="email"] {
  padding: 12px 14px; font-size: 14px; color: var(--cream); background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.sp-form--newsletter input[type="email"]::placeholder { color: rgba(250, 246, 238, .6); }
.sp-form--newsletter button.wpforms-submit { border: 0; background: var(--gold); color: var(--navy-deep); }
.sp-form--newsletter button.wpforms-submit:hover { background: var(--gold-light); }

@media (max-width: 560px) {
  .sp-form--book, .sp-form--contact { grid-template-columns: 1fr; }
}

/* Validation errors: one toast below the form instead of WPForms' default
   per-field inline text. The grid layout above uses display:contents to
   flatten .wpforms-field-container, so an inline error under just one field
   in a two-column row throws that row's height off and visibly breaks
   alignment with its neighbour — a real layout bug, not just a look
   preference. sp_render_form_error_toast() (functions.php) builds this from
   whatever WPForms' own validator puts in .wpforms-error, which stays in
   the DOM (for aria-errormessage) but is visually hidden here. */
.sp-form .wpforms-error { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sp-form-toast {
  display: none; grid-column: 1 / -1; margin-top: 4px; padding: 14px 18px;
  background: rgba(168, 58, 44, .08); border: 1px solid rgba(168, 58, 44, .3);
  color: #a83a2c; font: 400 14px/1.5 var(--font-body);
}
.sp-form-toast.is-visible { display: block; }
.sp-form-toast strong { display: block; margin-bottom: 6px; color: inherit; font-weight: 600; }
.sp-form-toast ul { margin: 0; padding-left: 18px; }
.sp-form--newsletter .sp-form-toast { grid-column: auto; }