/* Nova Health and Wellness Center
   Generated by build/gen_wp.py from the approved mockup CSS.
   Edit the source modules in build/, then re-run the generator.
   Colour, type, spacing and shadow tokens also exist as theme.json
   presets, so both the editor UI and this file stay in step. */

:root{
  --navy:#06165F; --navy2:#0B2586; --navy3:#0A1F72; --cyan:#66D6EC; --blue:#087ABF; --blue2:#3E9FD6;
  --ice:#EAF8FD; --ice2:#F4FAFE; --ink:#0C1230; --body:#54628A; --line:#E0EAF4; --line2:#C6D8EE;
  --sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(18px,4vw,56px);
  --pad:clamp(44px,4.8vw,74px);
  --rad:14px; --radb:8px;
  --sh1:0 2px 6px rgba(6,22,95,.04), 0 12px 28px -18px rgba(6,22,95,.22);
  --sh2:0 4px 10px rgba(6,22,95,.05), 0 28px 60px -28px rgba(6,22,95,.36);
  --sh3:0 30px 70px -34px rgba(6,22,95,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--body);font-family:var(--sans);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--sans);color:var(--navy);font-weight:800}
h1{font-size:clamp(2.5rem,4.35vw,3.65rem);line-height:1.07;letter-spacing:-.032em}
h2{font-size:clamp(1.85rem,2.95vw,2.55rem);line-height:1.12;letter-spacing:-.028em}
h3{font-size:clamp(1.12rem,1.35vw,1.28rem);line-height:1.26;letter-spacing:-.017em}
/* These are h2 in the markup because they are the first level under the page's
   h1 and an h3 there skipped a level (WCAG 1.3.1). They keep the h3 metrics so
   nothing changes visually. */
.wp-block-post-template .wp-block-post-title{font-size:clamp(1.12rem,1.35vw,1.28rem);line-height:1.26;letter-spacing:-.017em}
p{margin:0}
a{color:inherit}
.wrap{max-width:1260px;margin:0 auto;padding:0 var(--gut)}
.lede{font-size:clamp(1.02rem,1.12vw,1.12rem);color:var(--body);line-height:1.62}
section{padding:var(--pad) 0}
.tight-top{padding-top:0}
.tight-bot{padding-bottom:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* reveal on scroll, with a hard failsafe so nothing can stay hidden */
.js-rev [data-rev]{opacity:0;transform:translateY(16px)}
.js-rev [data-rev].in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}
 .js-rev [data-rev]{opacity:1;transform:none}}

/* ---------- shared type devices ---------- */
.eyebrow{display:block;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:15px}
.eyebrow.on-navy{color:var(--cyan)}
.kicker{display:block;font-size:.685rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--body);margin-top:28px}
.rule{display:block;width:58px;height:3px;background:var(--cyan);border-radius:2px;margin-top:22px}
.head-c{text-align:center;max-width:66ch;margin:0 auto clamp(30px,3.2vw,44px)}
.head-c p{margin-top:15px;max-width:60ch;margin-left:auto;margin-right:auto}
.head-l{max-width:62ch;margin-bottom:clamp(28px,3.2vw,42px)}
.head-l p{margin-top:15px}

/* ---------- icons ---------- */
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.ico-badge{width:clamp(66px,5vw,78px);height:clamp(66px,5vw,78px);border-radius:50%;background:var(--ice);color:var(--blue);display:grid;place-items:center;margin:0 auto;transition:background .22s,transform .22s,box-shadow .22s}
.ico-badge .ico{width:clamp(31px,2.4vw,35px);height:clamp(31px,2.4vw,35px)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:.94rem;padding:15px 26px;border:1.6px solid transparent;border-radius:var(--radb);transition:background .2s,color .2s,border-color .2s,box-shadow .2s,transform .2s;white-space:nowrap;line-height:1}
.btn .ico{width:17px;height:17px;stroke-width:2.1;transition:transform .22s}
.btn:hover .ico{transform:translateX(4px)}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 10px 24px -14px rgba(6,22,95,.7)}
.btn-primary:hover{background:var(--navy2);border-color:var(--navy2);transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(6,22,95,.7)}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--line2)}
.btn-outline:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--sh1)}
.btn-white{background:#fff;color:var(--navy);border-color:#fff}
.btn-white:hover{background:var(--ice);border-color:var(--ice);transform:translateY(-2px)}
.btn-ghostw{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghostw:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.94);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s}
.site-header.stuck{border-bottom-color:var(--line);box-shadow:0 6px 22px -18px rgba(6,22,95,.5)}
.hdr{display:flex;align-items:center;gap:clamp(12px,1.2vw,22px);padding-top:15px;padding-bottom:15px}
/* The bar carries seven groups plus phone, login and the CTA. Without these
   the logo and the login link are the flex items that lose, and the logo
   collapses to zero width instead of the page overflowing. */
.site-header .wrap{max-width:1400px;padding-left:clamp(16px,2vw,40px);padding-right:clamp(16px,2vw,40px)}
.logo{flex:0 0 auto}
.logo img{width:clamp(88px,7vw,109px);height:auto;display:block}
.hdr-tools{flex:0 0 auto}
.hdr-nav{margin:0 auto;display:flex;align-items:center;gap:clamp(12px,1.45vw,28px);flex:0 1 auto}
.hdr-nav a{text-decoration:none;font-size:.925rem;font-weight:600;color:var(--ink);padding:7px 0;position:relative;display:inline-flex;align-items:center;gap:6px;transition:color .18s}
.hdr-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--cyan);border-radius:2px;transition:right .26s cubic-bezier(.22,.7,.3,1)}
.hdr-nav a:hover{color:var(--navy)}
.hdr-nav a:hover::after{right:0}
.hdr-nav a.current{color:var(--navy)}
.hdr-nav a.current::after{right:0;background:var(--navy)}
/* The group triggers are buttons because they open a panel instead of going
   anywhere. They still have to read as part of the link bar. */
.hdr-nav .nova-mega-trigger{appearance:none;background:none;border:0;margin:0;font:inherit;
  text-decoration:none;font-size:.925rem;font-weight:600;color:var(--ink);padding:7px 0;
  position:relative;display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  transition:color .18s}
.hdr-nav .nova-mega-trigger::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--cyan);border-radius:2px;transition:right .26s cubic-bezier(.22,.7,.3,1)}
.hdr-nav .nova-mega-trigger:hover{color:var(--navy)}
.hdr-nav .nova-mega-trigger:hover::after,
.hdr-nav .nova-mega-trigger[aria-expanded="true"]::after{right:0}
.hdr-nav .nova-mega-trigger[aria-expanded="true"]{color:var(--navy)}
.hdr-nav .nova-mega-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.caret{width:8px;height:8px;border-right:1.9px solid currentColor;border-bottom:1.9px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5}
.hdr-tools{display:flex;align-items:center;gap:clamp(10px,1.1vw,16px)}
.hdr-login{flex:0 0 auto;text-decoration:none;font-weight:700;font-size:.9rem;color:var(--navy);white-space:nowrap;padding:9px 16px;border:1px solid #D7E3F3;border-radius:999px;transition:border-color .18s,color .18s,background .18s}
.hdr-login:hover{color:var(--blue);border-color:var(--blue);background:#F4F9FE}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--navy);background:transparent;border:0;cursor:pointer;transition:background .18s}
.icon-btn:hover{background:var(--ice)}
@media(max-width:1200px){.hdr-nav{gap:14px}.hdr-nav a{font-size:.865rem}}
@media(max-width:1160px){.hdr-nav{display:none}.hdr-tools{margin-left:auto}}
/* Adding Log In to the bar pushed Book an Appointment off a 375px screen.
   Below 560 the header link goes and the drawer carries it instead, so the
   link is never lost, it just moves. */
/* Adding Log In to the bar pushed Book an Appointment off a 375px screen.
   Whenever the drawer is in use the header link goes and the drawer carries
   it instead, sitting under every other option. The link is never lost, it
   just moves to where there is room for it. */
.hdr-nav .nav-login{display:none}
@media(max-width:1160px){
  .hdr-login{display:none}
  .hdr-nav .nav-login{display:flex;justify-content:center;margin-top:14px;padding:13px 18px;
    border:1px solid #D7E3F3;border-radius:999px;font-weight:700;color:var(--navy);background:#F7FBFE}
  .hdr-nav .nav-login::after{display:none}
  .hdr-nav .nav-login:hover{color:var(--blue);border-color:var(--blue)}
}

/* ---------- image scrim + overlay caption ---------- */
.shot{position:relative;overflow:hidden;margin:0}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.22,.7,.3,1)}
.shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,22,95,.62) 0%,rgba(6,22,95,.18) 34%,rgba(6,22,95,0) 62%);pointer-events:none}
.shot figcaption{position:absolute;left:clamp(20px,2.2vw,30px);right:clamp(20px,2.2vw,30px);bottom:clamp(18px,2vw,26px);z-index:2;color:#fff}
.shot figcaption b{display:block;font-size:.71rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1.5;text-shadow:0 2px 14px rgba(6,22,95,.5)}
.shot figcaption .rule{margin-top:12px;width:44px;height:3px}

/* ---------- hero (shared) ---------- */
.hero-points{display:grid;grid-template-columns:1fr 1fr;gap:15px 26px;margin-top:30px;max-width:450px}
.hero-points div{display:flex;align-items:center;gap:12px;font-size:.945rem;font-weight:600;color:var(--navy)}
.hero-points .ico{color:var(--blue);flex:none;width:24px;height:24px}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}

/* ---------- credentials band (overlaps the hero) ---------- */
.creds{position:relative;z-index:6;margin-top:calc(clamp(34px,4vw,58px) * -1);padding-bottom:0}
.creds+section{padding-top:clamp(38px,4.2vw,62px)}
.creds-inner{background:#fff;border-radius:var(--rad);box-shadow:var(--sh2);display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;align-items:center;gap:clamp(16px,2.2vw,30px);padding:clamp(20px,2.1vw,28px) clamp(20px,2.4vw,32px)}
.cred-ico{width:58px;height:58px;border-radius:50%;background:var(--ice);color:var(--blue);display:grid;place-items:center;flex:none}
.cred-ico .ico{width:28px;height:28px}
.creds-inner .sep{background:var(--line);width:1px;height:56px}
.cred{display:flex;align-items:center;gap:15px;min-width:0}
.cred img{height:66px;width:auto}
.cred .aw{height:74px;border-radius:7px;background:var(--ice);padding:5px}
.cred b{display:block;color:var(--navy);font-size:.885rem;font-weight:800;line-height:1.32;letter-spacing:-.012em}
/* Scoped to the caption. As ".cred span" this also matched .cred-ico, which
   is a span, and its display:block beat the .cred-ico display:grid. The icon
   then sat at the top of its circle instead of centred in it. */
.cred figcaption span{display:block;font-size:.795rem;line-height:1.45;margin-top:4px;max-width:28ch}
.creds-note{font-size:.8rem;line-height:1.55;justify-self:end;text-align:right;max-width:30ch}
.creds-note b{color:var(--navy);font-weight:800}
@media(max-width:1120px){.creds-inner{grid-template-columns:1fr 1fr;gap:22px}.creds-inner .sep{display:none}}
@media(max-width:640px){.creds-inner{grid-template-columns:1fr}}

/* ---------- icon row ---------- */
.icorow{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,28px);text-align:center}
.icorow a{text-decoration:none;display:block;padding:14px 8px 16px;border-radius:var(--rad);transition:background .22s,transform .22s}
.icorow a:hover{background:var(--ice2);transform:translateY(-3px)}
.icorow a:hover .ico-badge{background:var(--cyan);color:var(--navy);box-shadow:0 14px 28px -16px rgba(6,22,95,.6)}
.icorow h3{margin-top:17px;font-size:1rem;font-weight:800;color:var(--navy)}
.icorow p{margin-top:7px;font-size:.85rem}
@media(max-width:980px){.icorow{grid-template-columns:repeat(3,1fr);row-gap:24px}}
@media(max-width:560px){.icorow{grid-template-columns:1fr 1fr}}

/* ---------- split photo cards ---------- */
.dualpath{padding-bottom:clamp(30px,3.2vw,52px)}
.splitcards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.scard{display:grid;grid-template-columns:minmax(0,.86fr) 1.14fr;background:#fff;border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh1);transition:box-shadow .26s,transform .26s}
.scard:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.scard:hover .shot img{transform:scale(1.045)}
.scard .shot{min-height:300px}
.scard .shot img{object-position:50% 22%}
.scard .shot figcaption b{font-size:.66rem;letter-spacing:.16em;line-height:1.5}
.scard .shot::after{background:linear-gradient(to top,rgba(6,22,95,.5) 0%,rgba(6,22,95,.08) 46%,rgba(6,22,95,0) 70%)}
.scard .wallpanel{width:100%;height:100%;min-height:290px;display:block}
.scard .sc-body{padding:clamp(22px,2.3vw,34px);display:flex;flex-direction:column;justify-content:center}
.scard h3{font-size:clamp(1.35rem,1.85vw,1.7rem)}
.scard p{margin-top:12px;font-size:.94rem}
.scard .btn{margin-top:24px;align-self:flex-start}
@media(max-width:1080px){.splitcards{grid-template-columns:1fr}}
@media(max-width:520px){.scard{grid-template-columns:1fr}.scard .shot,.scard .wallpanel{min-height:210px}}

/* ---------- service tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(13px,1.6vw,20px)}
.tile{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:clamp(20px,2vw,27px);transition:box-shadow .24s,transform .24s,border-color .24s}
.tile:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:transparent}
.tile .ti{width:54px;height:54px;border-radius:14px;background:var(--ice);color:var(--blue);display:grid;place-items:center;margin-bottom:17px;transition:background .22s,color .22s}
.tile:hover .ti{background:var(--navy);color:var(--cyan)}
.tile .ti .ico{width:27px;height:27px}
.tile h3{font-size:1.04rem}
.tile p{margin-top:9px;font-size:.895rem}
.tile .more{margin-top:15px;font-size:.85rem;font-weight:800;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.tile .more .ico{width:15px;height:15px;stroke-width:2.2;transition:transform .22s}
.tile:hover .more .ico{transform:translateX(4px)}
@media(max-width:920px){.tiles{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.tiles.two-up{grid-template-columns:1fr}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}}

/* ---------- feature band: duotone photo + copy ---------- */
.band{position:relative;background:var(--navy);overflow:hidden;padding:0}
.band-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch;min-height:clamp(340px,38vw,470px)}
.band-media{position:relative;overflow:hidden}
.band-media img{width:100%;height:100%;object-fit:cover;object-position:34% 34%}
.band-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,22,95,0) 38%,rgba(6,22,95,.72) 82%,rgba(6,22,95,1) 100%)}
.band-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(34px,4vw,62px) max(var(--gut),clamp(24px,3.4vw,56px)) clamp(34px,4vw,62px) clamp(24px,3.4vw,56px)}
.band-copy h2{color:#fff;max-width:16ch}
.band-copy p{color:#C3D3EE;margin-top:16px;max-width:44ch}
.band-stats{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:clamp(26px,3vw,38px);padding-top:clamp(20px,2.4vw,28px);border-top:1px solid rgba(255,255,255,.18)}
.band-stats b{display:block;color:#fff;font-size:1.6rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.band-stats span{display:block;color:#A8BEE2;font-size:.84rem;margin-top:5px}
@media(max-width:900px){.band-grid{grid-template-columns:1fr}.band-media{min-height:260px}.band-media::after{background:linear-gradient(0deg,rgba(6,22,95,.9) 0%,rgba(6,22,95,0) 60%)}
 .band-copy{padding-left:var(--gut);padding-right:var(--gut)}}

/* ---------- why ---------- */
.valrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.val{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:clamp(20px,2vw,27px);transition:box-shadow .24s,transform .24s,border-color .24s}
.val:hover{box-shadow:var(--sh1);transform:translateY(-3px);border-color:transparent}
.val .ti{width:50px;height:50px;border-radius:13px;background:var(--ice);color:var(--blue);display:grid;place-items:center;margin-bottom:16px}
.val .ti .ico{width:26px;height:26px}
.val h3{font-size:1rem}
.val p{margin-top:9px;font-size:.885rem}
@media(max-width:960px){.valrow{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.valrow{grid-template-columns:1fr}}

/* ---------- process ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px)}
.steps li{position:relative;padding-top:28px;border-top:3px solid var(--ice)}
.steps li::before{content:"";position:absolute;top:-3px;left:0;width:46%;height:3px;background:var(--cyan);border-radius:2px}
.steps .n{display:block;font-size:clamp(2.4rem,3.5vw,3.05rem);font-weight:800;color:var(--cyan);line-height:.88;letter-spacing:-.05em}
.steps h3{margin-top:15px;font-size:1.06rem}
.steps p{margin-top:9px;font-size:.9rem}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

/* ---------- financing ---------- */
.fin-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,3.8vw,58px);align-items:start}
.fin-grid .lede{margin-top:16px}
.fin-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
.fin-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.fin-list li{display:grid;grid-template-columns:auto 1fr;gap:15px;background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:18px 20px;transition:box-shadow .22s,transform .22s}
.fin-list li:hover{box-shadow:var(--sh1);transform:translateX(3px)}
.fin-list .ti{width:44px;height:44px;border-radius:12px;background:var(--ice);color:var(--blue);display:grid;place-items:center}
.fin-list .ti .ico{width:22px;height:22px}
.fin-list h2,.fin-list h3{font-size:.99rem;line-height:1.26;letter-spacing:-.017em}
.fin-list p{margin-top:5px;font-size:.885rem}
@media(max-width:820px){.fin-grid{grid-template-columns:1fr}}

/* ---------- services archive card button ---------- */
.nova-service-card{display:flex;flex-direction:column}
.nova-service-card .nova-card-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border:1px solid var(--line2);border-radius:999px;background:#fff;color:var(--navy);
  font-weight:800;font-size:.85rem;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}
.nova-service-card .nova-card-cta:hover{border-color:var(--navy);box-shadow:var(--sh1);transform:translateY(-2px)}

/* ---------- online care: two features, then squares ---------- */
.olfeat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);margin-top:clamp(20px,2.4vw,32px)}
.olf{display:grid;grid-template-columns:minmax(0,.82fr) 1.18fr;background:#fff;border:1px solid var(--line);
  border-radius:var(--rad);overflow:hidden;text-decoration:none;box-shadow:var(--sh1);
  transition:box-shadow .24s,transform .24s,border-color .24s}
.olf:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--line2)}
.olf-media{margin:0;overflow:hidden;background:var(--ice2)}
.olf-media img{width:100%;height:100%;min-height:210px;object-fit:cover;transition:transform 1s cubic-bezier(.22,.7,.3,1)}
.olf:hover .olf-media img{transform:scale(1.05)}
.olf-body{display:flex;flex-direction:column;padding:clamp(18px,2vw,26px)}
.olf-body b{display:block;margin-top:6px;font-family:var(--sans);font-size:clamp(1.05rem,1.5vw,1.3rem);
  font-weight:800;color:var(--navy);line-height:1.25}
.olf-tag{display:block;margin-top:8px;font-size:.87rem;line-height:1.55;color:var(--body)}
.olf-price{display:block;margin-top:12px;font-size:1.28rem;font-weight:800;color:var(--blue);letter-spacing:-.01em}
.olf-go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;
  font-size:.85rem;font-weight:800;color:var(--navy)}
.olf-go .ico{width:16px;height:16px;transition:transform .2s}
.olf:hover .olf-go .ico{transform:translateX(4px)}

.olgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px;margin-top:clamp(16px,2vw,24px)}
.olq{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  text-decoration:none;transition:box-shadow .2s,transform .2s,border-color .2s}
.olq:hover{box-shadow:var(--sh1);transform:translateY(-2px);border-color:var(--line2)}
.olq-media{margin:0;background:var(--ice2);aspect-ratio:1/1;overflow:hidden}
.olq-media img{width:100%;height:100%;object-fit:cover}
.olq-body{display:block;padding:12px 14px 14px}
.olq-body b{display:block;font-size:.885rem;font-weight:800;color:var(--navy);line-height:1.3}
.olq-price{display:block;margin-top:4px;font-size:.82rem;font-weight:700;color:var(--blue)}
@media(max-width:900px){.olfeat{grid-template-columns:1fr}}
@media(max-width:560px){.olf{grid-template-columns:1fr}.olf-media img{min-height:180px}
  .olgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}

/* ---------- close the calendar and keep reading ---------- */
.vgw{position:relative}
.vgw-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;
  display:none;place-items:center;cursor:pointer;background:#fff;border:1px solid var(--line2);
  color:var(--navy);box-shadow:var(--sh1);transition:background .18s,border-color .18s,transform .18s}
.vgw.is-open .vgw-close{display:grid}
.vgw-close:hover{background:var(--ice);border-color:var(--navy);transform:scale(1.06)}
.vgw-close .ico{width:17px;height:17px;stroke-width:2.4}
/* The panel heading must not run under the button. */
.vgw.is-open h2,.vgw.is-open .vgw-head{padding-right:44px}
@media(max-width:600px){.vgw-close{top:9px;right:9px;width:32px;height:32px}}

/* ---------- medical provider: photo left, bio right ---------- */
/* ---------- top contact bar ----------
   Nova's existing site carries a phone/email/address strip above the header and
   the client wanted the same here. The colour is the theme's own navy rather
   than the old site's #678FE4, which sits outside this palette.

   On a phone all three items will not fit on one line (the email alone is 36
   characters), and stacking them puts ~70px of chrome above the header before
   any content. So below 760px the email drops, since it is the least actionable
   on a phone, and the address shortens to the city. Phone and city then sit on
   one line at 375px with room to spare. */
.topbar{background:var(--navy);color:#fff}
.topbar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:6px 26px;padding:8px 0;font-size:.78rem;line-height:1.3}
.topbar-in a{display:inline-flex;align-items:center;gap:7px;color:#fff;
  text-decoration:none;transition:color .16s}
.topbar-in a:hover{color:var(--blue2)}
.topbar-in a:focus-visible{outline:2px solid var(--blue2);outline-offset:3px;border-radius:4px}
.topbar-in .ico{width:14px;height:14px;flex:none;color:var(--blue2)}
.tb-short{display:none}
@media(max-width:980px){.topbar-in{gap:6px 18px;font-size:.74rem}}
@media(max-width:760px){
  .topbar-in .tb-mail{display:none}
  .topbar-in .tb-long{display:none}
  .topbar-in .tb-short{display:inline}
  .topbar-in{gap:6px 20px;font-size:.75rem;padding:7px 0}
}
.provider{background:var(--ice2)}
.prov-grid{display:grid;grid-template-columns:minmax(0,.62fr) 1.38fr;gap:clamp(24px,3.4vw,52px);
  align-items:start;margin-top:clamp(22px,3vw,38px)}
.prov-photo{margin:0;border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh2);background:#fff}
.prov-photo img{display:block;width:100%;height:auto}
.prov-body h3{font-size:clamp(1.3rem,2.1vw,1.72rem);letter-spacing:-.01em}
.prov-role{margin-top:6px;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.prov-body p+p{margin-top:13px}
.prov-body .prov-role+p{margin-top:18px}
.prov-body p{font-size:.95rem;line-height:1.72;max-width:66ch}
/* Two clinicians now stack in this section. The second card mirrors the
   first so the photos alternate sides instead of forming one long rail. */
.prov-grid+.prov-grid{margin-top:clamp(30px,3.6vw,54px);padding-top:clamp(30px,3.6vw,54px);
  border-top:1px solid var(--line)}
.prov-grid--flip{grid-template-columns:1.38fr minmax(0,.62fr)}
.prov-grid--flip .prov-photo{order:2}
@media(max-width:860px){.prov-grid,.prov-grid--flip{grid-template-columns:1fr;gap:22px}
  .prov-grid--flip .prov-photo{order:0}
  .prov-photo{max-width:340px}}

/* ---------- Vagaro booking widgets, embedded ---------- */
.vgwrap{display:grid;gap:14px;margin-top:clamp(24px,3vw,40px)}
.vgw{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:clamp(18px,2vw,26px);scroll-margin-top:96px}
.vgw-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;justify-content:space-between}
.vgw-head h3{font-size:1.1rem}
.vgw-note{margin-top:8px;font-size:.85rem;color:var(--body)}
.vgw-slot{margin-top:18px;border-top:1px solid var(--line);padding-top:18px}
.vgw-slot iframe{width:100%;border:0;display:block}
.vgw.is-open .vgw-open{display:none}
.vgw-loading{font-size:.88rem;font-weight:700;color:var(--blue);padding:22px 0;text-align:center}
.vgw .vagaro{width:100%!important;margin:12px auto 0!important}
@media(max-width:560px){.vgw-head{flex-direction:column;align-items:flex-start}.vgw-head .btn{width:100%;justify-content:center}}

/* ---------- book page, the two service lists ---------- */
.bklist{padding-top:clamp(30px,3.4vw,52px);scroll-margin-top:96px}
.bklist-alt{background:var(--ice2)}
.bkset-head h2{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.bkset-head p{margin-top:9px;max-width:78ch}
.bkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px;margin-top:clamp(18px,2.2vw,28px)}
.bkc{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px;
  transition:border-color .2s,box-shadow .2s,transform .2s}
.bkc:hover{border-color:var(--line2);box-shadow:var(--sh1);transform:translateY(-2px)}
.bkc-ico{width:40px;height:40px;border-radius:11px;background:var(--ice);color:var(--blue);display:grid;place-items:center}
.bkc-ico .ico{width:20px;height:20px}
.bkc-body b{display:block;color:var(--navy);font-size:.955rem;font-weight:800;line-height:1.3}
.bkc-sub{display:block;margin-top:3px;font-size:.83rem;font-weight:700;color:var(--blue)}
.bkc-go .ico{width:17px;height:17px;color:var(--blue);transition:transform .2s}
.bkc:hover .bkc-go .ico{transform:translateX(4px)}

/* ---------- in-clinic booking panel, Vagaro ---------- */
.pplan-vagaro .vg-name{margin-top:0;font-weight:800;color:var(--navy);font-size:1.1rem;line-height:1.35}
.pplan-vagaro .btn{margin-top:16px;width:100%;justify-content:center}
/* The calendar opens inside the panel, so let it use the column's full width. */
.pplan-vagaro .vgw-slot{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
/* The calendar needs more room than the buybox column gives it, so once it is
   open the panel breaks out of the column and uses the width of the page. On a
   phone there is no column to break out of, so it simply fills the screen. */
.pplan-vagaro.is-open{position:relative;z-index:3;width:min(920px,calc(100vw - 40px));
  margin-left:0;transition:width .35s cubic-bezier(.22,.7,.3,1)}
@media(min-width:1101px){
  .phero-grid:has(.pplan-vagaro.is-open){align-items:start}
  .pplan-vagaro.is-open{margin-left:calc(-1 * clamp(0px,14vw,320px))}
}
@media(max-width:1100px){.pplan-vagaro.is-open{width:100%}}
.pplan-vagaro .vgw-slot iframe{width:100%;min-height:520px}
@media(max-width:600px){
  .pplan-vagaro.is-open{width:100%;margin-left:0}
  .pplan-vagaro .vgw-slot{margin-top:12px;padding-top:12px}
  .pplan-vagaro .vgw-slot iframe{min-height:460px}
  .pplan-vagaro .vg-note{font-size:.83rem;padding:11px 13px}
}
.pplan-vagaro.is-open .fine{display:none}
/* Nothing else on the panel says out loud that this is a visit to Scottsdale
   rather than an online consultation, so the note sits above the button and
   stays up while the calendar is open. */
.pplan-vagaro .vg-note{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  margin:16px 0 18px;padding:13px 15px;background:var(--ice);border:1px solid var(--line2);border-radius:12px;
  font-size:.865rem;line-height:1.55;color:var(--navy)}
.pplan-vagaro .vg-note .ico{width:19px;height:19px;color:var(--blue);margin-top:1px}
.pplan-vagaro .vg-note b{font-weight:800}
/* Open it with a little movement so the change is obvious without the page jumping. */
.pplan-vagaro .vgw-slot{animation:vgOpen .42s cubic-bezier(.22,.7,.3,1) both}
@keyframes vgOpen{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pplan-vagaro .vgw-slot{animation:none}}
.pplan-vagaro .vgw-slot iframe{width:100%;border:0;display:block}
.pplan-vagaro .fine b{color:var(--navy)}

/* A priced product with nothing to sell yet keeps its panel and loses only the
   button. It still has to look like a button so the panel does not read as
   broken, but it is not a link and it does not respond. */
.btn-soon{background:var(--ice);color:var(--body);border:1px dashed var(--line2);
  cursor:default;pointer-events:none;font-weight:700}
.btn-soon:hover{background:var(--ice);color:var(--body)}

/* a product that is not open yet: a panel with nothing to click */
.pplan-soon{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,2.2vw,28px);box-shadow:var(--sh3)}
.soon-tag{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;
  background:var(--ice);color:var(--blue);font-size:.8rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase}
.soon-tag .ico{width:16px;height:16px}
.pplan-soon h2{margin-top:16px;font-size:clamp(1.3rem,1.9vw,1.6rem)}
.pplan-soon .fine{margin-top:12px}

/* ---------- a product sold in two preparations ---------- */
/* No single hero vial, because there is no single product. The two
   preparations share the top of the page, each a whole offer: its own vial,
   bullets, price and button. */
.phero.is-options .pintro{max-width:72ch}
.mdo-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);
  margin-top:clamp(22px,2.6vw,34px)}
.mdo{display:grid;grid-template-columns:minmax(0,.8fr) 1.2fr;background:#fff;
  border:1px solid var(--line);border-top:3px solid var(--mdo-accent,var(--blue));
  border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh1);
  transition:box-shadow .26s,transform .26s,border-color .26s}
/* One accent per preparation, both already in the palette. The two vials read
   as the same photograph at this size, so the colour does the telling apart:
   brand blue for the single pathway option, the deeper navy for the dual. */
.mdo--a{--mdo-accent:var(--blue)}
.mdo--b{--mdo-accent:var(--navy2)}
.mdo .eyebrow{color:var(--mdo-accent,var(--blue))}
.mdo-media{background:color-mix(in srgb,var(--mdo-accent,var(--blue)) 6%, #fff)}
.mdo:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:var(--line2)}
.mdo-media{margin:0;overflow:hidden}
.mdo-media img{width:100%;height:100%;min-height:230px;object-fit:cover;
  transition:transform 1s cubic-bezier(.22,.7,.3,1)}
.mdo:hover .mdo-media img{transform:scale(1.05)}
.mdo-body{display:flex;flex-direction:column;padding:clamp(18px,2vw,26px)}
.mdo-body h2{margin-top:6px;font-size:clamp(1.1rem,1.5vw,1.35rem);letter-spacing:-.025em;
  line-height:1.2}
.mdo-checks{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.mdo-checks li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;
  font-size:.875rem;line-height:1.5}
.mdo-checks .tick,.mdo-shared .tick{color:var(--blue);display:inline-flex}
.mdo-checks .tick .ico,.mdo-shared .tick .ico{width:16px;height:16px;margin-top:2px}
.mdo-price{margin-top:16px;font-size:1.6rem;font-weight:800;color:var(--mdo-accent,var(--blue));letter-spacing:-.02em}
.mdo-price .per{font-size:.82rem;font-weight:700;color:var(--body);margin-left:3px}
.mdo-body .btn{margin-top:16px;align-self:flex-start}
.mdo-foot{margin-top:clamp(22px,2.6vw,34px);padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line)}
.mdo-shared{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.mdo-shared li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.9rem}
.mdo-foot .bb-bnpl{margin-top:18px}
/* The basket notice replaces the button, so it has to sit in the same place. */
.mdo-body .nova-held{margin-top:16px}
@media(max-width:1000px){.mdo-grid{grid-template-columns:1fr}}
@media(max-width:560px){
  .mdo{grid-template-columns:1fr}
  .mdo-media img{min-height:190px}
  .mdo-body .btn{align-self:stretch;justify-content:center}
}

/* Two preparations at two prices get a column each rather than a footnote on
   one headline number. Each card is a whole offer: what it is, what it costs,
   and its own way to start. */
.dualbox{background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:clamp(16px,1.8vw,22px);box-shadow:var(--sh3)}
.db-eyebrow{display:block;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--blue);font-weight:800;margin-bottom:14px}
.db-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.db-card{display:flex;flex-direction:column;background:var(--ice);border:1px solid var(--line2);
  border-radius:14px;padding:14px 14px 16px}
.db-card figure{margin:0 0 10px;background:#fff;border-radius:10px;overflow:hidden}
.db-card figure img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.db-card h3{font-size:1rem;letter-spacing:-.02em;line-height:1.25}
.db-price{margin-top:6px;display:flex;align-items:baseline;gap:3px}
.db-price .amt{font-size:1.5rem;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.db-price .per{font-size:.8rem;font-weight:700;color:var(--body)}
.db-checks{list-style:none;margin:12px 0 16px;padding:0;display:grid;gap:8px}
.db-checks li{display:grid;grid-template-columns:auto 1fr;gap:9px;align-items:start;
  font-size:.83rem;line-height:1.45}
.db-checks .tick,.db-shared .tick{color:var(--blue);display:inline-flex}
.db-checks .tick .ico,.db-shared .tick .ico{width:15px;height:15px;margin-top:2px}
.db-card .btn{margin-top:auto;width:100%;justify-content:center;padding-left:14px;padding-right:14px}
.db-shared{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);
  display:grid;gap:9px}
.db-shared li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.88rem}
.dualbox .bb-bnpl{margin-top:16px}
@media(max-width:1100px){.db-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){
  .db-grid{grid-template-columns:1fr}
  .db-card figure img{aspect-ratio:16/10}
}

/* ---------- WooCommerce: cart, checkout, account ---------- */
/* The Woo blocks render outside the theme's container: on a wide screen the
   checkout form started hard against the left edge of the browser while the
   order summary stopped short of the right, which is what made it look
   crooked. Everything Woo renders is put back inside the same 1260px column
   the rest of the site uses. */
.woocommerce-page .entry-content > .wp-block-woocommerce-checkout,
.woocommerce-page .entry-content > .wp-block-woocommerce-cart,
.woocommerce-page .entry-content > .woocommerce,
.woocommerce-page .entry-content > .wp-block-woocommerce-order-confirmation-summary,
.woocommerce-page .entry-content > .wp-block-woocommerce-empty-cart-block{
  max-width:1260px;margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}
/* Room to breathe. A short cart or a confirmation page used to sit squashed
   between the header and the footer with nothing around it. */
.woocommerce-page .entry-content{padding-top:clamp(36px,4.4vw,72px);
  padding-bottom:clamp(48px,5.4vw,90px);min-height:58vh}
/* Space between the steps of the form, and between the form and its heading. */
.wc-block-checkout__main .wc-block-components-checkout-step{margin-bottom:clamp(22px,2.6vw,38px)}
.wc-block-components-checkout-step__heading{margin-top:0;margin-bottom:14px}
.wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block{padding:clamp(18px,2vw,26px)}
.wc-block-components-order-summary__content{padding-top:6px}
.wc-block-components-totals-wrapper{padding-top:14px;padding-bottom:14px}
.wc-block-checkout__actions{margin-top:clamp(18px,2.2vw,30px);padding-top:clamp(16px,2vw,24px);
  border-top:1px solid var(--line)}
@media(min-width:1001px){
  .wc-block-checkout__sidebar{position:sticky;top:clamp(90px,9vw,120px);align-self:start}
}

/* The block layout adds its own right padding to the form column and none on
   the left, which tips the two columns out of true. */
.wc-block-checkout__main{padding-left:0;padding-right:clamp(20px,2.6vw,48px)}
@media(max-width:1000px){.wc-block-checkout__main{padding-right:0}}

/* Make the Woo furniture read like the rest of the site rather than like a
   plugin default sitting on top of it. */
.woocommerce-page .entry-content h1,
.wc-block-components-title{letter-spacing:-.03em;color:var(--navy)}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-components-order-summary{border-radius:var(--rad)}
.wc-block-components-sidebar{background:transparent}
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-panel{background:#fff}
/* Only the order summary gets the card treatment. The sidebar's first two
   children are empty notice holders, and a border round those drew a blank box
   above the summary. */
.wc-block-checkout__sidebar > .wp-block-woocommerce-checkout-order-summary-block{
  border:1px solid var(--line);border-radius:var(--rad);background:#fff;box-shadow:var(--sh1)}
.wc-block-checkout__sidebar > .wc-block-components-notices:empty,
.wc-block-checkout__sidebar > .wc-block-components-notices__snackbar:empty{display:none}
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-country-input select,
.wc-block-components-state-input select{border-radius:12px}
.wc-block-components-button:not(.is-link){border-radius:999px;font-weight:700;letter-spacing:.01em}
.wc-block-components-checkout-place-order-button{background:var(--navy)}

/* The policies, under the checkout where the commitment is made. */
.nova-checkout-policies{max-width:1260px;margin:clamp(28px,3vw,44px) auto 0;
  padding:clamp(18px,2vw,26px) var(--gut) 0;border-top:1px solid var(--line)}
.ncp-lead{font-size:.9rem;color:var(--navy);font-weight:700}
.ncp-links{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px 18px}
.ncp-links a{font-size:.9rem;font-weight:700;color:var(--blue);text-decoration:underline;
  text-underline-offset:3px}
.ncp-links a:hover{color:var(--navy)}
.ncp-fine{margin-top:14px;font-size:.8rem;line-height:1.6;max-width:86ch}
/* Nothing in the order summary navigates away from checkout. */
.wc-block-components-order-summary-item a{pointer-events:none;color:inherit;text-decoration:none}

/* Shown in place of the button when the basket already holds a different
   treatment, so the rule is visible before the click rather than after. */
.nova-held{background:var(--ice);border:1px solid var(--line2);border-radius:14px;
  padding:16px 18px;margin-top:4px}
.nh-lead{font-size:.97rem;color:var(--navy)}
.nh-lead b{font-weight:800}
.nh-body{margin-top:6px;font-size:.88rem}
.nh-acts{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.nh-acts .btn{flex:1 1 auto;justify-content:center;font-size:.9rem}
.db-card .nova-held{margin-top:auto;padding:12px 13px}
.db-card .nh-acts{flex-direction:column;gap:8px}

/* The one treatment per order rule is refused, not silent, so the notice has to
   be impossible to miss and its links have to look like links. */
.woocommerce-error,.wc-block-components-notice-banner.is-error{border-radius:var(--rad)}
.woocommerce-error a,.wc-block-components-notice-banner.is-error a{font-weight:800;
  text-decoration:underline;text-underline-offset:3px}

/* ---------- legal documents: terms, telehealth consent ---------- */
/* Long prose at full page width is unreadable, so the column is capped and the
   section number sits outside it. Numbers come from CSS so the markup stays a
   plain document. */
.ldoc-updated{margin-top:22px;font-size:.84rem;color:var(--muted);font-weight:600;
  border-top:1px solid var(--line);padding-top:16px;display:inline-block}
.legaldoc{padding:clamp(26px,3vw,44px) 0 clamp(30px,3.4vw,52px)}
.legaldoc .wrap{max-width:860px}
/* A bare <section> picks up the global page padding, which on a stack of
   fourteen of them opened a screen of white between every clause. */
.ldoc-s{padding:0}
.ldoc-s+.ldoc-s{margin-top:clamp(26px,2.8vw,38px);padding-top:clamp(24px,2.8vw,36px);border-top:1px solid var(--line)}
.ldoc-s h2{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  font-size:clamp(1.15rem,1.7vw,1.42rem);letter-spacing:-.02em}
.ldoc-n{width:34px;height:34px;border-radius:50%;background:var(--ice);color:var(--blue);
  display:grid;place-items:center;font-size:.9rem;font-weight:800;flex:none;margin-top:1px}
.ldoc-s p{margin-top:14px;font-size:.96rem;line-height:1.72;max-width:70ch}
.ldoc-s h2+p{margin-top:16px}
.ldoc-s ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:70ch}
.ldoc-s li{position:relative;padding-left:26px;font-size:.96rem;line-height:1.66}
.ldoc-s li::before{content:"";position:absolute;left:8px;top:11px;width:6px;height:6px;
  border-radius:50%;background:var(--blue)}
@media(max-width:600px){
  .ldoc-s h2{grid-template-columns:1fr;gap:10px}
  .ldoc-n{width:30px;height:30px;font-size:.84rem}
  .ldoc-s p,.ldoc-s li{font-size:.93rem}
}

.ldoc-contact{padding-top:0}
.ldoc-contact .wrap{max-width:860px}
.ldoc-cbox{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,24px);align-items:start;
  padding:clamp(22px,2.6vw,32px);background:var(--ice);border:1px solid var(--line2);border-radius:var(--rad)}
.ldoc-cbox .ico{width:30px;height:30px;color:var(--blue);flex:none;margin-top:2px}
.ldoc-cbox h2{font-size:clamp(1.15rem,1.6vw,1.35rem)}
.ldoc-cbox p{margin-top:10px;font-size:.95rem}
.ldoc-lines{font-size:.93rem}
.ldoc-lines a{color:var(--navy);font-weight:700;text-decoration:none}
.ldoc-lines a:hover{color:var(--blue)}
@media(max-width:600px){.ldoc-cbox{grid-template-columns:1fr}}

/* ---------- contact intro, financing grid with one image ---------- */
.cxa{padding-top:clamp(40px,5vw,78px)}
.cx-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,3.8vw,58px);align-items:center}
.cx-copy h1{font-size:clamp(2.1rem,3.5vw,3.05rem);line-height:1.08;letter-spacing:-.02em}
.cx-copy .lede{margin-top:16px}
.cx-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:15px 22px}
.cx-facts li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;font-size:.93rem}
.cx-facts .ico{color:var(--blue);width:21px;height:21px;margin-top:2px}
.cx-facts b{display:block;color:var(--navy);font-weight:800;font-size:.86rem;letter-spacing:.02em}
.cx-facts a{color:var(--blue);text-decoration:none;font-weight:700;overflow-wrap:anywhere}
.cx-facts .is-wide{grid-column:1/-1}
.cx-media{margin:0;border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh2);background:#fff}
.cx-media img{display:block;width:100%;height:clamp(360px,38vw,520px);object-fit:cover}
@media(max-width:900px){.cx-grid{grid-template-columns:1fr}.cx-media img{height:320px}}
@media(max-width:520px){.cx-facts{grid-template-columns:1fr}}

/* ---------- contact form ---------- */
.cform-sec{background:var(--ice2)}
.cform{max-width:780px;margin:clamp(24px,3vw,40px) auto 0;background:#fff;border:1px solid var(--line);
  border-radius:var(--rad);box-shadow:var(--sh1);padding:clamp(22px,3vw,38px)}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cform label{display:block;font-weight:700;font-size:.875rem;color:var(--navy);margin-bottom:16px}
.cform .req{color:var(--blue);margin-left:3px}
.cform input,.cform textarea,.cform select{display:block;width:100%;margin-top:7px;padding:12px 14px;
  font:inherit;font-weight:500;color:var(--ink);background:#fff;border:1px solid var(--line2);
  border-radius:12px;transition:border-color .18s,box-shadow .18s}
.cform textarea{resize:vertical;min-height:140px}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(8,122,191,.14)}
.cf-note{margin:2px 0 20px;font-size:.845rem;color:var(--body);line-height:1.6}
.cf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-check{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;margin:4px 0 20px;
  padding:16px 18px;background:var(--ice2);border:1px solid var(--line);border-radius:14px}
.cf-check .ti{width:40px;height:40px;border-radius:11px;background:#fff;color:var(--blue);display:grid;place-items:center}
.cf-check .ti .ico{width:20px;height:20px}
.cf-check label{margin:0}
.cf-q{display:block;font-weight:800;color:var(--navy);font-size:.98rem;margin-top:4px}
.cf-check input{max-width:200px}
/* WordPress paints .wp-site-blocks button from its own palette, which outranks
   .btn-primary. Say it again, higher, so the form button cannot go white on white. */
.cform .btn.btn-primary{width:100%;justify-content:center;background:var(--navy);color:#fff;border:1px solid var(--navy)}
.cform .btn.btn-primary:hover{background:var(--navy2);border-color:var(--navy2)}
.cform button[type="submit"][disabled]{opacity:.55;cursor:not-allowed}
.cf-msg{margin-top:16px;font-size:.9rem;line-height:1.6;min-height:1px}
.cf-msg.is-ok{color:var(--navy);font-weight:600}
.cf-msg.is-bad{color:#B4232A;font-weight:600}
.cf-done{text-align:center;padding:clamp(10px,2vw,26px) 0}
.cf-done h2,.cf-done h3{font-size:1.28rem;line-height:1.26;letter-spacing:-.017em}
.cf-done p{margin-top:10px}
@media(max-width:620px){.cf-row{grid-template-columns:1fr}}

/* ---------- FAQ page, grouped ---------- */
.faqgroup{padding-top:clamp(28px,3.4vw,46px);padding-bottom:clamp(28px,3.4vw,46px)}
.faqgroup:nth-of-type(even){background:var(--ice2)}
.faqg-head{display:flex;align-items:center;gap:14px;margin-bottom:clamp(16px,2vw,24px)}
.faqg-head .ti{width:44px;height:44px;border-radius:12px;background:var(--ice);color:var(--blue);display:grid;place-items:center;flex:0 0 auto}
.faqg-head .ti .ico{width:22px;height:22px}
.faqg-head h2{font-size:clamp(1.25rem,2vw,1.6rem);margin:0}
.faqg-n{margin-left:auto;font-size:.8rem;font-weight:700;color:var(--body);white-space:nowrap}
.faqgroup .faq-list{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;align-items:start}
@media(max-width:860px){.faqgroup .faq-list{grid-template-columns:1fr}}
@media(max-width:560px){.faqg-n{display:none}}

/* ---------- location ---------- */
.loc-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,3.4vw,52px);align-items:center}
.loc-copy .lede{margin-top:16px}
.loc-facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:15px}
.loc-facts li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;font-size:.935rem}
.loc-facts .ico{color:var(--blue);width:21px;height:21px;margin-top:2px}
.loc-facts b{display:block;color:var(--navy);font-weight:800;font-size:.865rem;letter-spacing:.02em}
.loc-facts a{color:var(--blue);text-decoration:none;font-weight:700}
.loc-media{display:grid;grid-template-columns:1.04fr .96fr;border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh2);background:#fff;height:clamp(330px,33vw,460px)}
.loc-media .shot,.loc-media .wallpanel,.loc-media .locator{height:100%;width:100%;display:block}
@media(max-width:900px){.loc-grid{grid-template-columns:1fr}}
@media(max-width:520px){.loc-media{grid-template-columns:1fr;height:auto}.loc-media .shot,.loc-media .wallpanel,.loc-media .locator{height:230px}}

/* ---------- navy CTA ---------- */
.cta{position:relative;background:var(--navy);overflow:hidden;padding:clamp(50px,5.6vw,82px) 0}
.cta::before{content:"";position:absolute;inset:0;background:radial-gradient(1100px 420px at 18% 0%,rgba(102,214,236,.16),transparent 62%)}
.cta .skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(96px,12vw,190px);opacity:.55}
.cta .wrap{position:relative;z-index:2}
.cta-top{display:grid;grid-template-columns:1.1fr auto;gap:clamp(24px,3vw,48px);align-items:center}
.cta h2{color:#fff;max-width:14ch}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap}
.trustrow{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin-top:clamp(30px,3.4vw,44px);padding-top:clamp(22px,2.6vw,30px);border-top:1px solid rgba(255,255,255,.18)}
.trustrow div{display:flex;align-items:center;gap:12px;color:#D8E5F7;font-size:.915rem;font-weight:600;padding:0 clamp(18px,2.6vw,38px);border-right:1px solid rgba(255,255,255,.18)}
.trustrow div:first-child{padding-left:0}
.trustrow div:last-child{border-right:0}
.trustrow .ico{color:var(--cyan);width:22px;height:22px;flex:none}
@media(max-width:860px){.cta-top{grid-template-columns:1fr}.trustrow{grid-template-columns:1fr;gap:14px}
 .trustrow div{border-right:0;padding:0}}

/* ---------- footer ---------- */
footer{position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#F7FBFE 100%);border-top:1px solid var(--line);overflow:hidden}
.fmap{display:none}
footer .wrap{position:relative;z-index:2}
/* Column widths are set from what the longest item in each one actually
   measures. The contact column carries a forty character email and a two
   column hours table, so it takes the widest share. */
.fcols{display:grid;grid-template-columns:1.14fr .5fr 1.02fr 1.02fr 1.73fr;gap:clamp(18px,2.3vw,32px);padding:clamp(40px,4.4vw,60px) 0 clamp(30px,3.4vw,44px)}
.fbrand .mark{width:92px;margin-bottom:15px}
.fbrand p{font-size:.895rem;max-width:30ch}
.fbrand .script{font-style:italic;font-weight:700;font-size:1.18rem;color:var(--blue);margin-top:22px;letter-spacing:-.015em}
/* h2 is the real level: these are the top level sections of the footer
   landmark, and h4 under a page's h2 skipped a level (WCAG 1.3.1). h4 is
   kept in the selector so a Site Editor override still carrying the old
   markup renders identically. */
footer h2,footer h4{margin:0 0 15px;font-size:.695rem;letter-spacing:.19em;text-transform:uppercase;color:var(--navy);font-weight:800}
footer ul{margin:0;padding:0;list-style:none}
footer li{margin-bottom:9px}
footer ul a{text-decoration:none;color:var(--body);font-size:.885rem;transition:color .16s,padding-left .16s}
footer ul a:hover{color:var(--navy);padding-left:3px}
.fcontact .fline{font-size:.9rem;margin-bottom:10px;display:flex;align-items:flex-start;gap:11px}
.fcontact .fline .ico{color:var(--blue);width:18px;height:18px;margin-top:3px;flex:none}
.fcontact .fline a{color:var(--navy);font-weight:700;text-decoration:none}
.fcontact .fline a:hover{color:var(--blue)}
/* The email address is forty characters. It is set a touch smaller so it sits
   on one line in the column, and the only break point it is given is the <wbr>
   after the @, so it can never split a word down the middle. */
.fcontact .fline.is-mail a{font-size:.8rem;letter-spacing:-.008em;overflow-wrap:normal;word-break:normal}
.hours{border-collapse:collapse;margin-top:18px;width:100%;max-width:290px}
.hours caption{text-align:left;font-size:.695rem;letter-spacing:.19em;text-transform:uppercase;color:var(--navy);font-weight:800;padding-bottom:10px}
.hours th,.hours td{text-align:left;font-size:.85rem;font-weight:500;color:var(--body);padding:9px 0;border-bottom:1px solid var(--line)}
/* The day and the time used to meet in the middle with nothing between them. */
.hours th{padding-right:18px;white-space:nowrap}
.hours td{text-align:right;color:var(--navy);font-weight:700;white-space:nowrap}
@media(max-width:1080px){.fcols{grid-template-columns:1fr 1fr 1fr}.fbrand{grid-column:1/-1}.fmap{display:none}}
@media(max-width:680px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.fcols{grid-template-columns:1fr}}
.fbadges{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);flex-wrap:wrap;padding:clamp(20px,2.4vw,28px) 0;border-top:1px solid var(--line)}
.fbadges img{height:60px;width:auto}
/* The seal is a claim, so it links to the record that backs it. An unlinked
   certification mark is the first thing a reviewer pulls on. */
.fbadges .ls-seal{display:inline-flex;border-radius:8px;transition:opacity .2s,transform .2s}
.fbadges .ls-seal:hover{opacity:.85;transform:translateY(-2px)}
.fbadges .ls-seal:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.fbadges .aw{height:80px;background:var(--ice);padding:6px;border-radius:8px}
/* Hosting badge. Same treatment as the LegitScript seal so the row reads as
   one set of marks. It is wider than it is tall, so it is capped on height
   and allowed to find its own width. Not linked: it is a hosting mark, not a
   certification record anyone can look up. */
.fbadges .hv-seal{display:inline-flex;align-items:center}
.fbadges .hv-seal img{height:64px;width:auto}
@media(max-width:620px){.fbadges .hv-seal img{height:52px}}
/* Fills the rest of the row. A 64ch cap left the right half of the footer
   empty, which read as a layout fault rather than a reading measure. */
/* Each credential gets its own line. The notes are one flex item so the
   paragraphs stack inside it rather than becoming siblings of the badges
   and laying out side by side. */
.fbadges .fbadge-notes{flex:1 1 340px;min-width:0;display:grid;gap:6px}
.fbadges p{font-size:.79rem;line-height:1.6;margin:0}
.fbadges p b{color:var(--navy);font-weight:800}
.legal{border-top:1px solid var(--line);padding:22px 0 38px;font-size:.765rem;line-height:1.7}
.legal .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:14px}
.legal a{color:var(--body)}

/* ---------- lifestyle strip ---------- */
.lifegrid{display:grid;grid-template-columns:.92fr 1fr 1fr 1fr;gap:clamp(14px,1.8vw,22px);align-items:center}
.lifegrid .lg-copy h2{max-width:11ch}
.lifegrid .lg-copy p{margin-top:14px;font-size:.95rem;max-width:30ch}
.lifeshot{position:relative;overflow:hidden;border-radius:var(--rad);margin:0;box-shadow:var(--sh1)}
.lifeshot img{width:100%;height:clamp(210px,22vw,300px);object-fit:cover;transition:transform 1s cubic-bezier(.22,.7,.3,1)}
.lifeshot:hover img{transform:scale(1.06)}
.lifeshot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,22,95,.66) 0%,rgba(6,22,95,.1) 45%,rgba(6,22,95,0) 68%)}
.lifeshot figcaption{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;color:#fff;font-size:1.02rem;font-weight:700;line-height:1.3;letter-spacing:-.015em;text-shadow:0 2px 16px rgba(6,22,95,.55)}
@media(max-width:1000px){.lifegrid{grid-template-columns:1fr 1fr}.lifegrid .lg-copy{grid-column:1/-1}}
@media(max-width:560px){.lifegrid{grid-template-columns:1fr}}

/* ---------- product row ---------- */
.prodrow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(13px,1.6vw,20px)}
.pcard{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;
  transition:box-shadow .24s,transform .24s,border-color .24s}
.pcard:hover{box-shadow:var(--sh2);transform:translateY(-4px);border-color:transparent}
.pcard .pimg{display:grid;place-items:center;background:linear-gradient(165deg,#EFF7FC 0%,#DAEBF7 100%);overflow:hidden;aspect-ratio:1/1}
.pcard .pimg img{width:auto;height:84%;max-width:78%;object-fit:contain;transition:transform .6s cubic-bezier(.22,.7,.3,1)}
.pcard:hover .pimg img{transform:scale(1.05)}
.pcard .pbody{display:block;padding:clamp(18px,1.9vw,24px)}
.pcard h3{min-height:2.6em;display:flex;align-items:flex-start}
.pcard p{min-height:3.2em}
.pcard .ptag{display:block;font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.pcard h3{margin-top:8px;font-size:1.02rem}
.pcard p{margin-top:8px;font-size:.87rem}
.pcard .more{margin-top:13px;font-size:.83rem;font-weight:800;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.pcard .more .ico{width:15px;height:15px;stroke-width:2.2;transition:transform .22s}
.pcard:hover .more .ico{transform:translateX(4px)}
.tiles.two-up{grid-template-columns:1fr 1fr}
@media(max-width:1000px){.prodrow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.prodrow{grid-template-columns:1fr 1fr;gap:10px}.pcard .pbody{padding:14px}.pcard h3{font-size:.95rem}.pcard p{font-size:.82rem}}
.prodnote{margin-top:clamp(20px,2.2vw,28px);font-size:.82rem;max-width:78ch}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,3.6vw,56px);align-items:start}
.faq-list{display:grid;gap:11px}
.faq-list details{background:#fff;border:1px solid var(--line);border-radius:var(--rad);transition:box-shadow .22s,border-color .22s}
.faq-list details[open]{box-shadow:var(--sh1);border-color:transparent}
.faq-list summary{list-style:none;cursor:pointer;padding:19px 56px 19px 22px;position:relative;font-weight:700;color:var(--navy);font-size:1rem;line-height:1.35}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";position:absolute;right:22px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:2.2px solid var(--blue);border-bottom:2.2px solid var(--blue);transform:rotate(45deg);transition:transform .24s,margin-top .24s}
.faq-list details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-list .ans{padding:0 56px 20px 22px;font-size:.925rem}
.faq-aside{background:var(--ice);border-radius:var(--rad);padding:clamp(22px,2.3vw,30px)}
.faq-aside .ti{width:50px;height:50px;border-radius:13px;background:#fff;color:var(--blue);display:grid;place-items:center;margin-bottom:16px}
.faq-aside .ti .ico{width:26px;height:26px}
.faq-aside h3{font-size:1.05rem}
.faq-aside p{margin-top:11px;font-size:.885rem}
.faq-aside .btn{margin-top:20px}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr}}


/* ---------- full-bleed statement band ---------- */
.statement{position:relative;padding:0;min-height:clamp(380px,44vw,560px);display:grid;isolation:isolate}
.statement .st-media{grid-area:1/1;margin:0;overflow:hidden}
.statement .st-media img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.statement::after{content:"";grid-area:1/1;background:linear-gradient(100deg,rgba(6,22,95,.90) 0%,rgba(6,22,95,.62) 32%,rgba(6,22,95,.10) 62%,rgba(6,22,95,0) 88%);z-index:1}
.statement .st-copy{grid-area:1/1;z-index:2;align-self:center;max-width:1260px;width:100%;margin:0 auto;
  padding:clamp(34px,4vw,60px) var(--gut)}
.statement h2{color:#fff;max-width:13ch;font-size:clamp(2rem,3.6vw,3.1rem)}
.statement p{color:#CBDAF2;margin-top:14px;font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:26ch}
.statement .btn{margin-top:28px}
@media(max-width:720px){.statement::after{background:linear-gradient(0deg,rgba(6,22,95,.94) 12%,rgba(6,22,95,.6) 58%,rgba(6,22,95,.3) 100%)}
 .statement .st-copy{align-self:end}}

/* ---------- lifestyle mosaic ---------- */
.mosaic-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(140px,13.5vw,186px);gap:clamp(10px,1.2vw,15px)}
.mosaic-grid figure{position:relative;margin:0;overflow:hidden;border-radius:var(--rad);box-shadow:var(--sh1)}
.mosaic-grid img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transition:transform 1s cubic-bezier(.22,.7,.3,1)}
.mosaic-grid figure:hover img{transform:scale(1.06)}
.mosaic-grid figure::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,22,95,.66) 0%,rgba(6,22,95,.08) 48%,rgba(6,22,95,0) 72%)}
.mosaic-grid figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;font-weight:700;
  font-size:.94rem;line-height:1.3;letter-spacing:-.015em;text-shadow:0 2px 16px rgba(6,22,95,.6)}
.mosaic-grid .m1{grid-column:span 2;grid-row:span 2}
@media(max-width:820px){.mosaic-grid{grid-template-columns:repeat(2,1fr)}.mosaic-grid .m1{grid-column:span 2;grid-row:span 2}}

/* lifestyle strip: four across */
.lifegrid{grid-template-columns:.85fr 1fr 1fr 1fr}


/* ---------- tall portrait cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,18px)}
.pcell{position:relative;margin:0;overflow:hidden;border-radius:var(--rad);box-shadow:var(--sh1);aspect-ratio:3/4}
.pcell img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.7,.3,1)}
.pcell:hover img{transform:scale(1.05)}
.pcell::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,22,95,.76) 0%,rgba(6,22,95,.12) 44%,rgba(6,22,95,0) 66%)}
.pcell figcaption{position:absolute;left:18px;right:18px;bottom:17px;z-index:2;color:#fff}
.pcell figcaption b{display:block;font-size:1.06rem;font-weight:800;letter-spacing:-.018em;text-shadow:0 2px 16px rgba(6,22,95,.6)}
.pcell figcaption span{display:block;margin-top:5px;font-size:.845rem;color:#D3E2F6;text-shadow:0 2px 14px rgba(6,22,95,.6)}
@media(max-width:900px){.pgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.pgrid{grid-template-columns:1fr}.pcell{aspect-ratio:4/3}}

/* ---------- process with photography ---------- */
.steps--photo li{border-top:0;padding-top:0}
.steps--photo li::before{display:none}
.steps--photo figure{margin:0 0 18px;overflow:hidden;border-radius:var(--rad);box-shadow:var(--sh1);aspect-ratio:4/3}
.steps--photo figure img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,.7,.3,1)}
.steps--photo li:hover figure img{transform:scale(1.05)}
.steps--photo .n{font-size:clamp(1.6rem,2.2vw,2rem);color:var(--blue);line-height:1}
.steps--photo h3{margin-top:8px}


/* two-up compounded product cards */
.rxrow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.2vw,28px)}
.rxcard{display:grid;grid-template-columns:minmax(0,.92fr) 1.08fr;background:#fff;border:1px solid var(--line);
  border-radius:var(--rad);overflow:hidden;text-decoration:none;transition:box-shadow .24s,transform .24s,border-color .24s}
.rxcard:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:transparent}
.rxcard .rximg{display:grid;place-items:center;background:linear-gradient(165deg,#F2F8FC 0%,#DCEBF7 100%);overflow:hidden}
.rxcard .rximg img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.7,.3,1)}
.rxcard:hover .rximg img{transform:scale(1.04)}
.rxcard .rxbody{display:block;padding:clamp(20px,2.2vw,30px);align-self:center}
.rxcard .ptag{display:block;font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.rxcard h3{margin-top:9px;font-size:clamp(1.2rem,1.7vw,1.5rem)}
.rxcard p{margin-top:10px;font-size:.9rem}
.rxcard .more{margin-top:15px;font-size:.85rem;font-weight:800;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.rxcard .more .ico{width:15px;height:15px;stroke-width:2.2;transition:transform .22s}
.rxcard:hover .more .ico{transform:translateX(4px)}
@media(max-width:1000px){.rxrow{grid-template-columns:1fr}}
@media(max-width:520px){.rxcard{grid-template-columns:1fr}.rxcard .rximg img{height:260px}}



.hero{padding:0;position:relative;background:#fff}
.hero-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);align-items:stretch}
.hero-copy{position:relative;background:linear-gradient(155deg,#FFFFFF 0%,#F4FAFE 42%,#E4F3FB 100%);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,4.6vw,74px) clamp(22px,2.6vw,44px) clamp(40px,4.6vw,74px) max(var(--gut),calc((100vw - 1260px)/2 + var(--gut)))}
.hero-copy::before{content:"";position:absolute;right:-190px;top:-140px;width:430px;height:430px;border-radius:50%;
  background:radial-gradient(circle,rgba(102,214,236,.30),rgba(102,214,236,0) 68%);pointer-events:none}
.hero-copy>*{position:relative;z-index:2}
.hero h1{max-width:13ch}
.hero .lede{margin-top:18px;max-width:44ch}
.hero .btn{padding:14px 21px;font-size:.905rem}
.hero .hero-cta{gap:10px;flex-wrap:nowrap}
@media(max-width:1180px){.hero .hero-cta{flex-wrap:wrap}}
.hero-media{position:relative;min-height:clamp(330px,44vw,600px);overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(228,243,251,.9) 0%,rgba(228,243,251,0) 16%),
  linear-gradient(to top,rgba(6,22,95,.5) 0%,rgba(6,22,95,0) 46%)}
.hero-tag{position:absolute;right:clamp(22px,2.6vw,40px);bottom:clamp(22px,2.6vw,38px);z-index:3;text-align:right;color:#fff;max-width:17ch}
.hero-tag b{display:block;font-size:clamp(.78rem,.95vw,.92rem);font-weight:800;letter-spacing:.19em;text-transform:uppercase;line-height:1.65;text-shadow:0 2px 18px rgba(6,22,95,.6)}
.hero-tag .rule{margin:14px 0 0 auto;width:50px}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}.hero-media{order:-1;min-height:clamp(260px,56vw,420px)}
 .hero-copy{padding:clamp(34px,6vw,54px) var(--gut) clamp(38px,6vw,58px)}.hero-copy::before{display:none}}
.dualpath{background:#fff}
.prodrow-sec{background:linear-gradient(180deg,#F7FBFE,#EAF8FD)}
.bodycare{background:#fff}
.why{background:linear-gradient(180deg,#F7FBFE,#EAF8FD)}
.financing{background:#fff}
.faq{background:linear-gradient(180deg,#FFFFFF,#F4FAFE)}
.lifestyle{background:#fff}


/* ---------- leaf motif ---------- */
.leafbg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.leafmark{width:100%;height:100%;display:block}

/* ---------- diagonal image pair ---------- */
.diag{position:relative;overflow:hidden;isolation:isolate}
.diag>figure{position:absolute;top:0;bottom:0;margin:0;overflow:hidden}
.diag>figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.7,.3,1)}
.diag:hover>figure img{transform:scale(1.04)}
/* each wedge is its own box, so the subject centres inside the visible area */
.diag>figure:first-of-type{left:0;right:38%;clip-path:polygon(0 0,100% 0,71% 100%,0 100%);z-index:2}
.diag>figure:first-of-type img{object-position:42% 28%}
.diag>figure:last-of-type{left:43.6%;right:0;clip-path:polygon(32% 0,100% 0,100% 100%,0 100%);z-index:1}
.diag>figure:last-of-type img{object-position:58% 28%}
.diag .tagblock{position:absolute;right:0;bottom:0;z-index:3;background:var(--navy);color:#fff;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px);max-width:clamp(180px,20vw,250px)}
.diag .tagblock b{display:block;font-size:.7rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:1.9;color:#CDE7F6}
@media(max-width:900px){.diag>figure{position:relative;left:auto!important;right:auto!important;clip-path:none!important}
 .diag{display:grid;grid-template-columns:1fr 1fr;height:auto!important}
 .diag>figure img{height:clamp(200px,34vw,280px)}
 .diag .tagblock{position:static;grid-column:1/-1;max-width:none}}

/* ---------- v2 hero ---------- */
.vhero{position:relative;padding:0;background:linear-gradient(150deg,#FFFFFF 0%,#F6FBFD 46%,#E9F4FB 100%);overflow:hidden}
.vhero-grid{display:grid;grid-template-columns:minmax(0,49fr) minmax(0,51fr);align-items:stretch;position:relative;z-index:2}
.vhero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,5vw,78px) clamp(24px,3vw,50px) clamp(40px,5vw,78px) max(var(--gut),calc((100vw - 1260px)/2 + var(--gut)))}
.vhero h1{max-width:none;font-size:clamp(2.05rem,3.1vw,2.78rem);letter-spacing:-.035em}
.vhero h1 .accent{color:var(--blue)}
.vhero .lede{margin-top:18px;max-width:42ch}
.vhero-media{position:relative;min-height:clamp(330px,44vw,600px)}
.vhero .btn{padding:14px 22px;font-size:.91rem}
@media(max-width:900px){.vhero-grid{grid-template-columns:1fr}.vhero-media{order:-1;min-height:0}
 .vhero-copy{padding:clamp(34px,6vw,54px) var(--gut) clamp(38px,6vw,58px)}}

/* ---------- diagonal care panels ---------- */
.carepair{display:grid;grid-template-columns:1fr 1fr;gap:0}
.carepanel{position:relative;overflow:hidden;min-height:clamp(300px,30vw,400px);display:grid}
.carepanel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 24%;transition:transform 1.1s cubic-bezier(.22,.7,.3,1)}
.carepanel:hover>img{transform:scale(1.05)}
.carepanel .veil{position:absolute;inset:0}
.carepanel.navy .veil{background:linear-gradient(96deg,rgba(6,22,95,.97) 0%,rgba(6,22,95,.93) 38%,rgba(6,22,95,.24) 72%,rgba(6,22,95,.08) 100%);
  clip-path:polygon(0 0,60% 0,76% 100%,0 100%)}
.carepanel.blue .veil{background:linear-gradient(96deg,rgba(8,122,191,.96) 0%,rgba(8,122,191,.92) 38%,rgba(8,122,191,.22) 74%,rgba(8,122,191,.06) 100%);
  clip-path:polygon(0 0,60% 0,76% 100%,0 100%)}
.carepanel .cp-body{position:relative;z-index:2;align-self:center;padding:clamp(26px,3vw,46px);max-width:clamp(260px,32vw,420px)}
.carepanel .ti{width:44px;height:44px;color:var(--cyan);margin-bottom:16px}
.carepanel .ti .ico{width:44px;height:44px;stroke-width:1.4}
.carepanel h3{color:#fff;font-size:clamp(1.5rem,2.3vw,2.05rem)}
.carepanel .sub{display:block;color:var(--cyan);font-weight:700;font-size:.9rem;margin-top:7px}
.carepanel p{color:#DCE8F8;margin-top:12px;font-size:.93rem}
.carepanel .btn{margin-top:22px;background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.carepanel .btn:hover{background:#fff;color:var(--navy);border-color:#fff}
@media(max-width:900px){.carepair{grid-template-columns:1fr}
 .carepanel .veil{clip-path:none!important}
 .carepanel .cp-body{max-width:none}}

/* ---------- diagonal triptych ---------- */
.tri{display:flex;overflow:hidden}
.tri figure{position:relative;margin:0;flex:1 1 0;min-width:0;overflow:hidden}
.tri figure+figure{margin-left:clamp(-58px,-4vw,-34px)}
.tri figure img{width:100%;height:clamp(240px,26vw,360px);object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.7,.3,1)}
.tri figure:hover img{transform:scale(1.05)}
.tri figure:nth-child(1){clip-path:polygon(0 0,100% 0,calc(100% - clamp(34px,4vw,58px)) 100%,0 100%)}
.tri figure:nth-child(2){clip-path:polygon(clamp(34px,4vw,58px) 0,100% 0,calc(100% - clamp(34px,4vw,58px)) 100%,0 100%)}
.tri figure:nth-child(3){clip-path:polygon(clamp(34px,4vw,58px) 0,100% 0,100% 100%,0 100%)}
.tri figcaption{position:absolute;left:clamp(26px,3vw,46px);top:50%;transform:translateY(-50%);z-index:2;color:#fff;
  font-size:.76rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;line-height:2;max-width:11ch;
  text-shadow:0 2px 18px rgba(6,22,95,.75)}
.tri figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,22,95,.62) 0%,rgba(6,22,95,.18) 52%,rgba(6,22,95,0) 78%)}
.tri figure:nth-child(2) figcaption,.tri figure:nth-child(3) figcaption{left:clamp(44px,5vw,76px)}
@media(max-width:820px){.tri{display:grid;grid-template-columns:1fr}
 .tri figure{clip-path:none!important;margin-left:0!important}
 .tri figure img{height:clamp(200px,44vw,280px)}}

/* leaf motif inside the navy close */
.cta .leafbg{opacity:.5}


/* trust strip, three items */
.trust3{background:var(--ice);padding:0}
.trust3 .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.trust3 div{display:flex;align-items:center;gap:15px;padding:24px 26px 24px 0;border-right:1px solid #CFE4F2}
.trust3 div:last-child{border-right:0}
.trust3 div+div{padding-left:26px}
.trust3 .ico{color:var(--blue);width:30px;height:30px;flex:none;stroke-width:1.5}
.trust3 b{display:block;color:var(--navy);font-weight:800;font-size:.96rem}
.trust3 span span{display:block;font-size:.87rem}
@media(max-width:860px){.trust3 .wrap{grid-template-columns:1fr}.trust3 div{border-right:0;padding-left:0!important;border-bottom:1px solid #CFE4F2}.trust3 div:last-child{border-bottom:0}}

/* care path cards */
.cp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.cp-card{display:grid;grid-template-columns:minmax(0,.78fr) 1.22fr;background:#fff;border-radius:var(--rad);
  overflow:hidden;box-shadow:var(--sh1);transition:box-shadow .26s,transform .26s}
.cp-card:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
.cp-card figure{margin:0;overflow:hidden}
.cp-card figure img{width:100%;height:100%;min-height:270px;object-fit:cover;object-position:50% 22%;transition:transform 1s cubic-bezier(.22,.7,.3,1)}
.cp-card:hover figure img{transform:scale(1.05)}
.cp-text{padding:clamp(20px,2.2vw,30px);display:flex;flex-direction:column;justify-content:center}
/* h2 in the markup, one level under the page h1; keeps the h3 metrics it always had. */
.cp-text h2,.cp-text h3{font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.26;letter-spacing:-.017em}
.cp-text p{margin-top:11px;font-size:.92rem}
.cp-text .btn{margin-top:20px;align-self:flex-start}
@media(max-width:1080px){.cp-grid{grid-template-columns:1fr}}
@media(max-width:520px){.cp-card{grid-template-columns:1fr}.cp-card figure img{min-height:200px}}

/* image + checklist */
.sl-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,62px);align-items:center}
.sl-media{margin:0;border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh1)}
.sl-media img{width:100%;height:clamp(300px,32vw,440px);object-fit:cover;object-position:50% 30%}
.sl-copy .lede{margin-top:15px}
.sl-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:15px}
.sl-list li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;font-size:.97rem;color:var(--navy);font-weight:600}
.sl-list .ico{color:var(--blue);width:26px;height:26px;flex:none;stroke-width:1.5}
@media(max-width:900px){.sl-grid{grid-template-columns:1fr}}

/* numbered circles */
.cs-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;text-align:center}
.cs-grid li{padding:0 clamp(18px,2.6vw,38px);border-right:1px solid var(--line)}
.cs-grid li:last-child{border-right:0}
.cs-n{width:60px;height:60px;border-radius:50%;border:2px solid var(--blue);color:var(--navy);
  display:grid;place-items:center;margin:0 auto 18px;font-size:1.28rem;font-weight:800}
.cs-grid h3{font-size:1.1rem}
.cs-grid p{margin-top:10px;font-size:.91rem}
.cs-cta{text-align:center;margin-top:clamp(28px,3.4vw,44px)}
@media(max-width:820px){.cs-grid{grid-template-columns:1fr;gap:30px}.cs-grid li{border-right:0;padding:0}}

/* four steps with connectors */
.s4-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px)}
.s4-grid li{position:relative}
.s4-grid li::after{content:"";position:absolute;top:27px;right:calc(clamp(16px,2.2vw,30px) * -0.5 - 5px);
  width:10px;height:10px;border-right:2px solid var(--line2);border-top:2px solid var(--line2);transform:rotate(45deg)}
.s4-grid li:last-child::after{display:none}
.s4-ico{width:56px;height:56px;border-radius:50%;background:var(--ice);color:var(--blue);display:grid;place-items:center;margin-bottom:17px}
.s4-ico .ico{width:27px;height:27px}
.s4-grid h3{font-size:1rem}
.s4-grid p{margin-top:9px;font-size:.89rem}
@media(max-width:900px){.s4-grid{grid-template-columns:1fr 1fr}.s4-grid li::after{display:none}}
@media(max-width:540px){.s4-grid{grid-template-columns:1fr}}

/* recognized */
.recognized{background:linear-gradient(180deg,#F7FBFE,#EAF8FD)}
.rec-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,62px);align-items:center}
.rec-copy .lede{margin-top:15px;max-width:52ch}
.rec-marks{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);margin-top:clamp(24px,2.8vw,34px)}
.rec-marks .aw{height:118px;background:#fff;padding:8px;border-radius:10px;box-shadow:var(--sh1)}
.rec-marks .ls{height:86px}
.rec-note{margin-top:20px;font-size:.8rem;max-width:46ch}
.rec-media{position:relative;margin:0;border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh2);aspect-ratio:3/4}
.rec-media img{width:100%;height:100%;object-fit:cover}
.rec-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,22,95,.7) 0%,rgba(6,22,95,.08) 46%,rgba(6,22,95,0) 70%)}
.rec-media figcaption{position:absolute;left:24px;bottom:22px;z-index:2;color:#fff;font-style:italic;font-weight:700;
  font-size:1.4rem;line-height:1.25;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(6,22,95,.65)}
@media(max-width:900px){.rec-grid{grid-template-columns:1fr}.rec-media{aspect-ratio:4/3}}

/* location band */
.locband{background:var(--ice)}
.lb-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.lb-copy h2{font-size:clamp(1.7rem,2.6vw,2.3rem);max-width:14ch}
.lb-addr{margin-top:20px;font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--navy);font-weight:700;display:flex;gap:12px;align-items:flex-start;max-width:22ch}
.lb-addr .ico{color:var(--blue);width:24px;height:24px;flex:none;margin-top:4px}
.lb-line{margin-top:12px;font-size:.98rem}
.lb-line a{color:var(--navy);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:11px}
.lb-line a:hover{color:var(--blue)}
.lb-line .ico{color:var(--blue);width:19px;height:19px}
.lb-script{margin-top:26px;font-style:italic;font-weight:700;font-size:1.3rem;color:var(--blue);letter-spacing:-.02em}
.lb-map{margin:0;border-radius:var(--rad);overflow:hidden;box-shadow:var(--sh2)}
.lb-map .locator{width:100%;height:clamp(300px,32vw,430px);display:block}
@media(max-width:900px){.lb-grid{grid-template-columns:1fr}}

/* quiet closing line */
.closeline{background:linear-gradient(180deg,#FFFFFF,#F4FAFE)}
.closeline .wrap{display:grid;grid-template-columns:1.2fr auto;gap:clamp(26px,3.4vw,52px);align-items:center}
.closeline h2{font-size:clamp(1.8rem,2.9vw,2.55rem)}
.cl-side{text-align:right}
.cl-side .kicker{margin-top:16px}
@media(max-width:820px){.closeline .wrap{grid-template-columns:1fr}.cl-side{text-align:left}}


/* ---------- commerce panel, GLP products ---------- */
.buybox{background:#fff;border:1px solid var(--line);border-radius:18px;padding:clamp(18px,1.9vw,24px);box-shadow:var(--sh3)}
.buybox .bb-eyebrow{display:block;font-size:.9rem;color:var(--body);font-weight:600}
.buybox h2{font-size:clamp(1.55rem,2.2vw,2rem);margin-top:4px;max-width:none;letter-spacing:-.03em;-webkit-hyphens:none;hyphens:none}
.buybox .bb-lead{margin-top:7px;font-size:.97rem}
.buybox .bb-lead b{color:var(--navy);font-weight:800}
.bb-startat{display:block;margin-top:0;font-size:.87rem;color:var(--body)}
.bb-price{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.bb-price .amt{font-size:clamp(2.1rem,2.9vw,2.6rem);font-weight:800;color:var(--navy);letter-spacing:-.045em;line-height:1}
.bb-price .per{font-size:.95rem;color:var(--body);font-weight:600}
.bb-was{margin-top:5px;font-size:.88rem;color:var(--body)}
.bb-was s{opacity:.75}
.bb-save{margin-top:9px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.92rem;font-weight:800;color:#0B7A4B}
.bb-save .code{font-weight:800;color:var(--navy);border:1.5px dashed #D3B24C;background:#FFFBEF;border-radius:6px;padding:5px 11px;letter-spacing:.04em}
.bb-save .lbl{color:var(--body);font-weight:600}
.bb-rule{display:block;height:1px;background:var(--line);margin:12px 0}
.bb-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bb-checks li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:.92rem;color:var(--ink);line-height:1.45}
.bb-checks li:first-child{font-weight:800;color:var(--navy)}
.bb-checks .tick{width:22px;height:22px;border-radius:50%;background:var(--ice);color:var(--blue);display:grid;place-items:center;flex:none;margin-top:1px}
.bb-checks .tick .ico{width:13px;height:13px;stroke-width:2.8}
.bb-rated{display:block;width:fit-content;margin:14px auto 0;background:var(--ice);color:var(--navy);
  border-radius:999px;padding:8px 18px;font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.buybox .btn{margin-top:15px;width:100%;justify-content:center;font-size:.98rem;padding:15px 24px;border-radius:999px}
.bb-bnpl{margin-top:16px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:.85rem;color:var(--body)}
.bb-bnpl span.pill{background:var(--ice);color:var(--navy);border-radius:7px;padding:6px 12px;font-weight:800;font-size:.79rem}
.bb-fine{margin-top:15px;font-size:.775rem;line-height:1.6;color:var(--body)}
.bb-trust{margin-top:clamp(18px,2vw,24px);padding-top:16px;border-top:1px solid var(--line);
  display:flex;gap:clamp(14px,2vw,26px);flex-wrap:wrap;justify-content:center}
.bb-trust div{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600;color:var(--navy)}
.bb-trust .ico{width:19px;height:19px;color:var(--blue)}

/* two-up price comparison */
.pricepair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px)}
.pricecard{border:1.6px solid var(--line);border-radius:14px;padding:clamp(18px,2vw,24px);text-align:center;background:#fff;transition:.2s}
.pricecard.is-this{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.pricecard b{display:block;font-size:1rem;color:var(--navy);font-weight:800;line-height:1.3}
.pricecard .amt{display:block;margin-top:9px;font-size:clamp(1.5rem,2.2vw,1.95rem);font-weight:800;color:var(--navy);letter-spacing:-.035em}
.pricecard .amt small{font-size:.85rem;font-weight:700;color:var(--body)}
.pricecard .note{display:block;margin-top:6px;font-size:.79rem;color:var(--body)}
@media(max-width:560px){.pricepair{grid-template-columns:1fr}}

/* ---------- product page ---------- */
.crumbs{padding:11px 0 0;font-size:.82rem}
.crumbs a{color:var(--body);text-decoration:none}
.crumbs a:hover{color:var(--navy)}
.crumbs span{color:var(--navy);font-weight:700}
.crumbs i{font-style:normal;padding:0 8px;color:var(--line2)}
.phero{padding:clamp(12px,1.4vw,20px) 0 clamp(28px,3.2vw,46px);background:linear-gradient(170deg,#FFFFFF 0%,#F6FBFD 46%,#E8F4FB 100%)}
.phero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,3.6vw,58px);align-items:stretch}
.pcol-l{display:flex;flex-direction:column;min-width:0}
.pcol-r{min-width:0;display:flex;flex-direction:column}
.pintro{flex:0 0 auto}
.pshot{margin:clamp(18px,2.2vw,30px) 0 0;background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  position:relative;flex:1 1 0;min-height:clamp(240px,26vw,380px)}
.pshot img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:50% 45%;display:block}
.pshot.is-photo{padding:0;border-radius:18px;overflow:hidden;box-shadow:var(--sh2);aspect-ratio:4/5;flex:0 0 auto;height:auto;min-height:0;align-self:start;width:100%}
.pshot.is-photo img{aspect-ratio:auto;object-fit:cover;object-position:50% 32%}
.phero h1{font-size:clamp(1.85rem,2.7vw,2.4rem);max-width:15ch;-webkit-hyphens:none;hyphens:none}
.phero .ptag{margin-top:10px;font-size:.9rem;font-weight:700;color:var(--blue);letter-spacing:-.005em}
.phero .lede{margin-top:11px;max-width:46ch;font-size:.97rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pbenefits{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px;max-width:46ch}
.pbenefits li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:center;font-size:.95rem;color:var(--navy);font-weight:600}
.pbenefits .ti{width:40px;height:40px;border-radius:11px;background:#fff;color:var(--blue);display:grid;place-items:center;box-shadow:var(--sh1)}
.pbenefits .ti .ico{width:21px;height:21px}
.pplan{margin-top:clamp(18px,2.2vw,28px);background:#fff;border-radius:16px;padding:clamp(18px,2vw,24px);box-shadow:var(--sh2)}
.pplan h2{font-size:1.04rem;letter-spacing:-.012em;max-width:none}
.pplan .opts{display:grid;gap:10px;margin-top:14px}
.popt{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;border:1.6px solid var(--line);
  border-radius:11px;padding:14px 16px;cursor:pointer;transition:.18s;background:#fff}
.popt input{position:absolute;opacity:0;width:0;height:0}
.popt .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);position:relative}
.popt:has(input:checked){border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);background:#F8FCFE}
.popt:has(input:checked) .dot{border-color:var(--navy)}
.popt:has(input:checked) .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--navy)}
.popt:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.popt b{color:var(--navy);font-weight:800;font-size:.95rem}
.popt span.sub{display:block;font-size:.8rem;color:var(--body);font-weight:500;margin-top:2px}
.popt .chev{width:9px;height:9px;border-right:2px solid var(--line2);border-bottom:2px solid var(--line2);transform:rotate(-45deg)}
.pplan .btn{margin-top:16px;width:100%;justify-content:center}
.pplan .fine{font-size:.78rem;margin-top:12px;line-height:1.6}
@media(max-width:900px){
  .phero-grid{grid-template-columns:1fr;gap:18px}
  .pshot{flex:0 0 auto;min-height:0;height:auto}
  /* Service pages: the photograph leads, full width, in its own 16:10 frame. */
  .pshot.is-photo{aspect-ratio:4/5;width:100%;height:auto;margin-top:16px}
  .pshot.is-photo img{object-fit:cover;object-position:50% 32%}
  /* Peptide product pages only: compact header so the price and CTA stay in view.
     The shot is square, so the frame is square. No dead band, no crop. */
  .is-shop .phero-grid{gap:16px}
  .is-shop .lede{-webkit-line-clamp:2}
  .is-shop .pcol-l{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,3.4vw,22px);align-items:start}
  .is-shop .pintro{grid-column:1;grid-row:1;min-width:0}
  .is-shop .pshot{grid-column:2;grid-row:1;align-self:start;margin:6px 0 0;
    height:clamp(150px,44vw,230px);aspect-ratio:1;width:auto}
  .is-shop .pshot img{object-fit:cover;object-position:50% 50%}
}
@media(max-width:620px){
  .phero{padding-top:10px}
  .crumbs{padding:10px 0 0;font-size:.78rem}
  .pshot{margin-top:6px}
  .pshot.is-photo img{aspect-ratio:16/9}
  .phero-grid{gap:14px}
  .phero h1{font-size:clamp(1.7rem,6.6vw,2rem)}
  .phero .ptag{font-size:.85rem;margin-top:7px}
  .phero .lede{margin-top:9px;font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .buybox{padding:17px}
  .bb-startat{font-size:.82rem}
  .bb-price .amt{font-size:2.3rem}
  .bb-was{margin-top:5px;font-size:.85rem}
  .bb-save{margin-top:8px;font-size:.87rem}
  .bb-rule{margin:12px 0}
  .bb-checks{gap:7px;font-size:.875rem}
  .bb-checks .tick{width:19px;height:19px}
  .buybox .btn{margin-top:14px;padding:15px 22px}
  .pplan{margin-top:14px}
}


.incl{background:var(--ice)}
.incl-grid{display:grid;grid-template-columns:.8fr repeat(4,1fr);gap:clamp(16px,2.2vw,30px);align-items:center}
.incl-grid .lead h2{font-size:clamp(1.5rem,2.1vw,1.9rem);max-width:12ch}
.incl-grid .lead p{margin-top:10px;font-size:.89rem}
.incl-item{text-align:center}
.incl-item .ti{width:54px;height:54px;border-radius:50%;background:#fff;color:var(--blue);display:grid;place-items:center;margin:0 auto 13px;box-shadow:var(--sh1)}
.incl-item .ti .ico{width:26px;height:26px}
.incl-item b{display:block;font-size:.9rem;color:var(--navy);font-weight:700;line-height:1.35}
@media(max-width:1000px){.incl-grid{grid-template-columns:1fr 1fr}.incl-grid .lead{grid-column:1/-1}}
@media(max-width:520px){.incl-grid{grid-template-columns:1fr}}

.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px)}
.fitbox{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:clamp(22px,2.3vw,30px)}
.fitbox h3{font-size:1.06rem}
.fitbox ul{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:11px}
.fitbox li{display:grid;grid-template-columns:auto 1fr;gap:12px;font-size:.925rem;align-items:start}
.fitbox .mk{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;flex:none;margin-top:1px}
.fitbox.yes .mk{background:var(--ice);color:var(--blue)}
.fitbox.no .mk{background:#F3F5F9;color:#8C9BBA}
.fitbox .mk .ico{width:12px;height:12px;stroke-width:2.6}
.fitbox.no li{color:#7787A6}
@media(max-width:760px){.fitgrid{grid-template-columns:1fr}}

.disc{background:var(--ice);border-radius:var(--rad);padding:clamp(20px,2.2vw,28px);display:grid;
  grid-template-columns:auto 1fr;gap:16px;align-items:start;margin-top:clamp(26px,3vw,38px)}
.disc .ti{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--blue);display:grid;place-items:center}
.disc .ti .ico{width:23px;height:23px}
.disc b{display:block;color:var(--navy);font-size:.96rem;font-weight:800;margin-bottom:6px}
.disc p{font-size:.865rem;line-height:1.65}

.related{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.rcard{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--rad);
  overflow:hidden;transition:box-shadow .24s,transform .24s,border-color .24s}
.rcard:hover{box-shadow:var(--sh2);transform:translateY(-3px);border-color:transparent}
.rcard .rimg{display:grid;place-items:center;background:linear-gradient(165deg,#EFF7FC,#DAEBF7);overflow:hidden;aspect-ratio:4/3}
.rcard .rimg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.rcard .rimg img.contain{width:auto;height:86%;max-width:52%;object-fit:contain}
.rcard .rbody{display:block;padding:clamp(18px,1.9vw,24px)}
.rcard h3{min-height:2.5em}
.rcard .rtag{display:block;font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--blue)}
.rcard h3{margin-top:8px;font-size:1rem}
.rcard .more{margin-top:12px;font-size:.83rem;font-weight:800;color:var(--blue);display:inline-flex;align-items:center;gap:8px}
.rcard .more .ico{width:15px;height:15px;stroke-width:2.2;transition:transform .22s}
.rcard:hover .more .ico{transform:translateX(4px)}
@media(max-width:860px){.related{grid-template-columns:1fr}}
/* Short laptop screens: keep Get Started above the fold without losing the lede. */
@media(min-width:901px) and (max-height:830px){
  .is-shop .crumbs{padding-top:8px}
  .is-shop.phero{padding-top:10px}
  .is-shop .lede{margin-top:9px;-webkit-line-clamp:1}
  .bb-rule{margin:10px 0}
  .bb-checks{gap:7px}
  .buybox .btn{margin-top:13px}
}
/* Short phones, SE class. */
@media(max-width:640px) and (max-height:780px){
  .is-shop .crumbs{padding-top:8px;font-size:.78rem}
  .is-shop.phero{padding-top:8px}
  .is-shop h1{font-size:1.5rem}
  .is-shop .ptag{margin-top:6px;font-size:.82rem}
  .is-shop .lede{display:none}
  .is-shop .phero-grid{gap:9px}
  .is-shop .pshot{margin-top:4px;height:clamp(120px,34vw,150px)}
  .buybox{padding:14px}
  .bb-price .amt{font-size:1.85rem}
  .bb-was{margin-top:4px;font-size:.82rem}
  .bb-save{margin-top:6px;font-size:.8rem}
  .bb-rule{margin:9px 0}
  .bb-checks{gap:5px}
  .bb-checks li{font-size:.85rem;line-height:1.36;gap:10px}
  .bb-checks .tick{width:20px;height:20px}
  .buybox .btn{margin-top:10px;padding:12px 20px}
}


/* ---------- Meridian Leaf product page, scoped ---------- */


.layout-meridian-leaf .phero{background:linear-gradient(150deg,#FFFFFF 0%,#F6FBFD 46%,#E9F4FB 100%);position:relative;overflow:hidden}

.layout-meridian-leaf .phero .wrap{position:relative;z-index:2}


/* ---------- Pathway layout, scoped ---------- */


.layout-pathway .ahero{position:relative;padding:0;background:linear-gradient(150deg,#FFFFFF 0%,#F7FBFD 48%,#EAF5FB 100%);overflow:hidden}

.layout-pathway .ahero-grid{display:grid;grid-template-columns:minmax(0,50fr) minmax(0,50fr);align-items:stretch;position:relative;z-index:2}

.layout-pathway .ahero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(42px,5.2vw,84px) clamp(24px,3vw,52px) clamp(42px,5.2vw,84px) max(var(--gut),calc((100vw - 1260px)/2 + var(--gut)))}

.layout-pathway .ahero h1{max-width:none;font-size:clamp(2.15rem,3.4vw,3rem)}

.layout-pathway .ahero .lede{margin-top:18px;max-width:40ch}

.layout-pathway .ahero .rulekick{display:flex;align-items:center;gap:16px;margin-top:clamp(26px,3vw,38px)}

.layout-pathway .ahero .rulekick i{display:block;width:46px;height:2px;background:var(--blue);flex:none}

.layout-pathway .ahero .rulekick .kicker{margin-top:0}

.layout-pathway .ahero-media{position:relative;margin:0;overflow:hidden;min-height:clamp(330px,42vw,560px);
  clip-path:polygon(13% 0,100% 0,100% 100%,0 100%)}

.layout-pathway .ahero-media img{width:100%;height:100%;object-fit:cover;object-position:56% 24%}
@media(max-width:900px){
.layout-pathway .ahero-grid{grid-template-columns:1fr}
.layout-pathway .ahero-media{order:-1;clip-path:none;min-height:0}
 
.layout-pathway .ahero-media img{height:clamp(250px,52vw,380px)}
 
.layout-pathway .ahero-copy{padding:clamp(34px,6vw,54px) var(--gut) clamp(38px,6vw,58px)}}

.layout-pathway .carepath{background:#fff}

.layout-pathway .supportlist{background:linear-gradient(180deg,#F7FBFE,#EAF8FD)}

.layout-pathway .circlesteps{background:#fff}

.layout-pathway .prodrow-sec{background:linear-gradient(180deg,#F7FBFE,#EAF8FD)}

.layout-pathway .bodycare{background:#fff}

.layout-pathway .faq{background:linear-gradient(180deg,#FFFFFF,#F4FAFE)}



.layout-pathway .phero{background:linear-gradient(160deg,#FFFFFF 0%,#F7FBFD 50%,#EAF5FB 100%)}
@media(min-width:901px){
.layout-pathway .phero-grid{grid-template-columns:.98fr 1.02fr}
.layout-pathway .pcol-l{order:2}
.layout-pathway .pcol-r{order:1}}
@media(max-width:900px){
.layout-pathway .phero-grid{grid-template-columns:1fr}
.layout-pathway .pcol-l{order:0}
.layout-pathway .pcol-r{order:1}}


/* ---------- Horizon layout, scoped ---------- */


.layout-horizon .ubar{background:var(--navy);color:#B9CCEC;font-size:.78rem}

.layout-horizon .ubar .wrap{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);padding-top:10px;padding-bottom:10px;flex-wrap:wrap}

.layout-horizon .ubar a{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:7px}

.layout-horizon .ubar a:hover{color:var(--cyan)}

.layout-horizon .ubar .ico{width:14px;height:14px;color:var(--cyan)}

.layout-horizon .ubar span{display:inline-flex;align-items:center;gap:7px}

.layout-horizon .ubar .last{margin-left:auto}
@media(max-width:980px){
.layout-horizon .ubar .hide-s{display:none}
.layout-horizon .ubar .last{margin-left:0}}
@media(max-width:620px){
.layout-horizon .ubar{display:none}}

.layout-horizon .site-header{top:0}

.layout-horizon .hdr-tel{display:none}

.layout-horizon .nhero{background:var(--navy);padding:0;position:relative;overflow:hidden}

.layout-horizon .nhero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 20% 10%,rgba(102,214,236,.18),transparent 62%)}

.layout-horizon .nhero-grid{display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);align-items:stretch;position:relative;z-index:2}

.layout-horizon .nhero-copy{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(44px,5.4vw,86px) clamp(24px,3vw,54px) clamp(44px,5.4vw,86px) max(var(--gut),calc((100vw - 1260px)/2 + var(--gut)))}

.layout-horizon .nhero h1{color:#fff;max-width:none;font-size:clamp(2.2rem,3.5vw,3.05rem)}

.layout-horizon .nhero h1 .cy{display:block;color:var(--cyan)}

.layout-horizon .nhero .rule{margin-top:22px}

.layout-horizon .nhero .lede{color:#C2D3EE;margin-top:20px;max-width:42ch}

.layout-horizon .nhero .btn-white{background:#fff;color:var(--navy);border-color:#fff}

.layout-horizon .nhero .btn-cy{background:var(--blue);color:#fff;border-color:var(--blue)}

.layout-horizon .nhero .btn-cy:hover{background:#0A8FDC;border-color:#0A8FDC}

.layout-horizon .nhero-media{margin:0;position:relative;overflow:hidden;min-height:clamp(300px,38vw,500px)}

.layout-horizon .nhero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
@media(max-width:900px){
.layout-horizon .nhero-grid{grid-template-columns:1fr}
.layout-horizon .nhero-media{order:-1;min-height:0}
 
.layout-horizon .nhero-media img{height:clamp(240px,48vw,360px)}
 
.layout-horizon .nhero-copy{padding:clamp(34px,6vw,54px) var(--gut) clamp(38px,6vw,58px)}}

/* stacked care cards, image on top */
.cp-card.stack{grid-template-columns:1fr}

.layout-horizon .cp-card.stack figure img{min-height:0;height:clamp(220px,22vw,290px);object-position:50% 24%}

.layout-horizon .carepath{background:#fff}

.layout-horizon .steps4{background:linear-gradient(180deg,#F7FBFE,#EAF8FD)}

.layout-horizon .prodrow-sec{background:#fff}

.layout-horizon .bodycare{background:linear-gradient(180deg,#F7FBFE,#EAF8FD)}

.layout-horizon .faq{background:#fff}



.layout-horizon .phero{background:var(--navy);position:relative;overflow:hidden}

.layout-horizon .phero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 74% 6%,rgba(102,214,236,.20),transparent 62%)}

.layout-horizon .phero .wrap{position:relative;z-index:2}

.layout-horizon .phero h1{color:#fff}

.layout-horizon .phero .lede{color:#C2D3EE}

.layout-horizon .phero .eyebrow{color:var(--cyan)}

.layout-horizon .phero .ptag{color:var(--cyan)}

.layout-horizon .pbenefits li{color:#fff}

.layout-horizon .pbenefits .ti{background:rgba(255,255,255,.10);color:var(--cyan);box-shadow:none}

.layout-horizon .pshot{background:none;box-shadow:none}

.layout-horizon .crumbs{background:var(--navy);padding-bottom:6px}

.layout-horizon .crumbs a{color:#9FB6DD}
.layout-horizon .crumbs a:hover{color:#fff}
.layout-horizon .crumbs span{color:#fff}
.layout-horizon .crumbs i{color:rgba(255,255,255,.3)}

.layout-horizon .incl{background:#fff}
@media(max-width:620px){
.layout-horizon .ubar{display:none}}
@media(max-width:640px) and (max-height:780px){
.layout-horizon .crumbs{padding-bottom:0}}


/* ---------- WordPress block theme glue ---------- */
/* theme.json owns page padding. Sections that need to bleed opt out with .alignfull. */
.wp-site-blocks{overflow-x:clip}
.wp-site-blocks > * + *{margin-block-start:0}
.nova-section{padding-block:var(--pad)}
.nova-section.is-tight-top{padding-block-start:0}
.nova-section.is-tight-bottom{padding-block-end:0}

/* The mockups centre content in .wrap. In the editor the equivalent is a
   constrained group, so .wrap works in both places. */
.wrap{max-width:1260px;margin-inline:auto;padding-inline:var(--gut);width:100%}
.alignfull > .wrap,.nova-section > .wrap{box-sizing:border-box}

/* Block editor canvas: give the editor the same page frame as the front end. */
.editor-styles-wrapper{background:#fff;font-family:var(--sans);color:var(--body)}
.editor-styles-wrapper .wrap{max-width:1260px}

/* Core block styles registered in functions.php. */
.is-style-nova-card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:clamp(20px,2.2vw,30px);box-shadow:var(--sh1)}
.is-style-nova-panel{background:var(--ice);border-radius:var(--rad);padding:clamp(20px,2.4vw,32px)}
.is-style-nova-panel-navy{background:var(--navy);color:#C2D3EE;border-radius:var(--rad);padding:clamp(22px,2.6vw,36px)}
.is-style-nova-panel-navy :is(h1,h2,h3,h4){color:#fff}
.is-style-nova-eyebrow{display:block;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:15px}
.is-style-nova-lede{font-size:clamp(1.02rem,1.12vw,1.12rem);line-height:1.62;color:var(--body)}
.is-style-nova-fine{font-size:.775rem;line-height:1.6;color:var(--body)}
.is-style-nova-checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.is-style-nova-checks li{position:relative;padding-inline-start:34px;font-size:.92rem;line-height:1.45;color:var(--ink)}
.is-style-nova-checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:var(--ice) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087ABF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
.is-style-nova-checks li:first-child{font-weight:800;color:var(--navy)}
.wp-block-button.is-style-nova-outline .wp-block-button__link{background:transparent;color:var(--navy);border:1.6px solid var(--line2)}
.wp-block-button.is-style-nova-outline .wp-block-button__link:hover{border-color:var(--navy);background:transparent}

/* Image frames. The ratio is fixed so object-fit has nothing to trim: this is
   what keeps heads and product shots from being cropped at any width. */
.wp-block-image.is-style-nova-square img{aspect-ratio:1;width:100%;height:auto;object-fit:cover;object-position:50% 45%;border-radius:0}
.wp-block-image.is-style-nova-tall img{aspect-ratio:4/5;width:100%;height:auto;object-fit:cover;object-position:50% 32%;border-radius:18px}

/* Reveal on scroll, opt in per group, with the failsafe in nova.js. */
.js-rev .is-style-nova-reveal{opacity:0;transform:translateY(16px)}
.js-rev .is-style-nova-reveal.in{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
@media(prefers-reduced-motion:reduce){.js-rev .is-style-nova-reveal{opacity:1;transform:none}}

/* Product hero, driven by the column block so it stays editable. */
.wp-block-columns.is-style-nova-hero-shop,
.wp-block-columns.is-style-nova-hero-svc{align-items:stretch;gap:clamp(26px,3.6vw,58px)}
@media(max-width:781px){
  .wp-block-columns.is-style-nova-hero-shop{flex-wrap:wrap!important}
}


/* ---------- WordPress theme additions on top of the ported mockup CSS ---------- */

/* Section wrappers the block editor introduces must not add their own frame. */
.wp-site-blocks{overflow-x:clip}
.wp-block-group.layout-meridian-leaf,
.wp-block-group.layout-pathway,
.wp-block-group.layout-horizon{margin:0}
.wp-block-html{margin:0}

/* ---------- selectors that block wrapping breaks ----------
   Each ported section is its own HTML block, so sections are no longer
   siblings and .creds+section stops matching. The generator marks the section
   that follows the credentials band with a class instead. */
.after-creds{padding-top:clamp(38px,4.2vw,62px)}

/* The mockup icon row is a five column grid. The About page lists six services,
   so it gets three by two rather than five plus an orphan. */
.icorow.is-six{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(22px,2.6vw,38px)}
@media(max-width:980px){.icorow.is-six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.icorow.is-six{grid-template-columns:1fr}}
/* Mission and Vision are a pair, not a three up row. */
.valrow.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.valrow.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.valrow.is-three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.valrow.is-two{grid-template-columns:1fr}}
@media(max-width:560px){.valrow.is-three{grid-template-columns:1fr}}
/* Contact lists three ways to reach the clinic. */
.icorow.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:780px){.icorow.is-three{grid-template-columns:1fr}}

/* ---------- FAQ transition ----------
   The height is animated in JS; these handle the content fade and the chevron
   so the whole thing moves together. */
details [data-acc-body]{opacity:1;transition:opacity .26s ease .04s}
details:not([open]) [data-acc-body]{opacity:0}
summary::after{transition:transform .26s cubic-bezier(.22,.7,.3,1),margin-top .26s}
summary{-webkit-tap-highlight-color:transparent}
details{transition:box-shadow .26s,border-color .26s}
@media(prefers-reduced-motion:reduce){
  details [data-acc-body],summary::after,details{transition:none}
}

/* ---------- mega menu ----------
   The panel is a child of <header> and stretches across it, so it meets the
   window edges exactly as the header does. Its contents sit in the same .wrap
   the header uses, so the columns line up with the logo and the nav. */
.site-header{position:relative}
/* Matches .hdr-nav a exactly, so adding the trigger does not shift the bar. */
.nova-mega-trigger{font:inherit;background:none;border:0;cursor:pointer;color:var(--ink);
  font-size:.925rem;font-weight:600;padding:7px 0;position:relative;display:inline-flex;
  align-items:center;gap:6px;text-align:start;line-height:inherit;letter-spacing:inherit;
  white-space:nowrap;-webkit-appearance:none;appearance:none}
.nova-mega-trigger::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--cyan);border-radius:2px;transition:right .26s cubic-bezier(.22,.7,.3,1)}
.nova-mega-trigger:hover::after,.nova-mega-trigger[aria-expanded="true"]::after{right:0}
.nova-mega-trigger:hover{color:var(--navy)}
.nova-mega-trigger .caret{transition:transform .22s}
.nova-mega-trigger[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(1px)}

.nova-mega{position:absolute;left:0;right:0;top:100%;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 34px 64px -34px rgba(6,22,95,.42);
  opacity:0;visibility:hidden;transform:translateY(-10px);z-index:80;
  transition:opacity .2s cubic-bezier(.22,.7,.3,1),transform .2s cubic-bezier(.22,.7,.3,1),visibility .2s}
.nova-mega.is-open{opacity:1;visibility:visible;transform:none}
.nova-mega-grid{display:grid;grid-template-columns:1fr 1fr .92fr;gap:clamp(24px,3vw,54px);
  align-items:start;padding-block:clamp(26px,2.8vw,42px)}
.nova-mega h3{font-size:.685rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
  font-weight:800;margin:0 0 14px}
.nova-mega-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.nova-mega-list a{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  padding:11px 13px;margin-inline:-13px;border-radius:12px;text-decoration:none;transition:background .16s}
.nova-mega-list a:hover{background:var(--ice)}
.nova-mega-ico{width:34px;height:34px;border-radius:10px;background:var(--ice);color:var(--blue);
  display:grid;place-items:center;flex:none}
.nova-mega-ico .ico{width:18px;height:18px}
.nova-mega-txt strong{display:block;color:var(--navy);font-weight:800;font-size:.95rem;letter-spacing:-.012em}
.nova-mega-txt span{display:block;color:var(--body);font-size:.83rem;line-height:1.45;margin-top:2px}
/* ---------- Our Team ---------- */
.team-sec{padding:var(--pad) 0}
.tmem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,30px);margin-top:clamp(26px,3vw,44px)}
.tmem{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:clamp(20px,2vw,28px);text-align:center;
  box-shadow:var(--sh1);transition:transform .22s cubic-bezier(.22,.7,.3,1),box-shadow .22s}
.tmem:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.tmem-photo{display:block;width:clamp(104px,9vw,132px);aspect-ratio:1;margin:0 auto clamp(14px,1.4vw,18px);
  border-radius:50%;overflow:hidden;background:var(--ice);box-shadow:0 0 0 4px #fff,0 0 0 6px var(--ice)}
.tmem-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tmem h3{color:var(--navy);font-size:clamp(1.05rem,1.2vw,1.18rem);font-weight:800;letter-spacing:-.018em;line-height:1.25}
.tmem-role{margin-top:6px;color:var(--blue);font-size:.775rem;font-weight:800;letter-spacing:.055em;
  text-transform:uppercase;line-height:1.45}
.tmem-bio{margin-top:11px;color:var(--body);font-size:.865rem;line-height:1.62;text-align:left}
@media(max-width:1100px){.tmem-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.tmem-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tmem-grid{grid-template-columns:1fr}.tmem-bio{text-align:center}}

/* The feature card is always the last track, whatever the panel holds.
   Panels with one link column used to leave it floating mid-row. */
/* A panel with no feature card lets its columns use the whole width. */
.nova-mega-grid:not(:has(.nova-mega-feature)){grid-template-columns:repeat(3,minmax(0,1fr))}
.nova-mega-feature{grid-column:-2/-1;display:grid;gap:10px;align-content:start;background:var(--ice);border-radius:16px;
  padding:18px;text-decoration:none;transition:transform .2s,box-shadow .2s}
.nova-mega-feature:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.nova-mega-feature img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 32%;
  border-radius:10px;display:block}
.nova-mega-feature strong{color:var(--navy);font-weight:800;font-size:1rem;line-height:1.3}
.nova-mega-feature span{color:var(--body);font-size:.85rem;line-height:1.5}
.nova-mega-feature em{font-style:normal;color:var(--blue);font-weight:800;font-size:.85rem}
.nova-mega-feature em::after{content:" \2192"}

/* Horizon's header is white with a navy utility bar above it, so the trigger
   inherits the same ink as the rest of the nav. Nothing to override. */

/* Long unbreakable strings must never push a layout wider than the screen.
   Target the link itself rather than listing the containers it appears in, so
   this keeps working wherever the address is used next. */
a[href^="mailto:"],a[href^="tel:"]{overflow-wrap:anywhere}
.hero-points div,.loc-facts span,.nova-mega-txt span,.lb-line,.lb-copy{overflow-wrap:anywhere;min-width:0}

/* Horizon's hero sits on navy, so anything reused inside it has to invert.
   .hero-points is a Meridian component and defaults to navy ink, which is
   invisible there. */
.nhero .hero-points div,.hero-points.on-navy div{color:#C2D3EE}
.nhero .hero-points .ico,.hero-points.on-navy .ico{color:var(--cyan)}
.nhero .hero-points,.hero-points.on-navy{margin-top:clamp(18px,2vw,26px)}

/* ---------- content left over from another theme ----------
   A page built with a previous theme's page builder keeps its markup when this
   theme is activated. Without that theme's CSS, inline icons have no sizing and
   render at their natural size, which is enormous, and its form controls and
   tab widgets render raw. None of this is Nova markup, so it is bounded here
   rather than left to blow the page apart. Every Nova svg carries a class, so
   :not([class]) only ever catches foreign markup. */
main svg:not([class]){width:40px;height:40px;flex:none}
main img{max-width:100%;height:auto}
main input:not([type=checkbox]):not([type=radio]),
main select,main textarea{max-width:100%;font:inherit;padding:12px 14px;
  border:1.6px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
main button:not([class]){font:inherit;padding:11px 18px;border-radius:999px;
  border:1.6px solid var(--line2);background:#fff;color:var(--navy);cursor:pointer}
main table{max-width:100%;border-collapse:collapse}
main iframe,main video{max-width:100%}

/* ---------- the header on a phone ----------
   The mockups are desktop comps: under 1160px they hide .hdr-nav and offer no
   way to open it, which leaves a phone visitor with no navigation at all. The
   toggle below turns the same markup into a drawer, and the mega panels stack
   inside it, so there is no second menu to keep in step. */
.nav-toggle{display:none;width:44px;height:44px;flex:none;border:1px solid var(--line);
  border-radius:12px;background:#fff;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .24s cubic-bezier(.22,.7,.3,1),opacity .18s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1160px){
  .site-header{position:relative}
  .nav-toggle{display:flex}
  .hdr-tel span{display:none}

  .hdr-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gut) 18px;box-shadow:var(--sh2);border-top:1px solid var(--line);
    max-height:calc(100vh - 76px);overflow-y:auto;z-index:90}
  body.nova-nav-open .hdr-nav{display:flex}
  .hdr-nav > a,.nova-mega-trigger{width:100%;justify-content:space-between;
    padding:15px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .hdr-nav > a::after,.nova-mega-trigger::after{position:static}
  .nova-mega-trigger::before{display:none}

  /* Panels drop into the drawer rather than floating over the page.
     The panels are a sibling of the header bar, not of the links, so an open
     one rendered in flow under the bar while the absolutely positioned drawer
     floated on top of it, and the two overlapped. nova.js moves the open panel
     in beside its own trigger, so the drawer stays one scrolling column and
     the panel lands under the row that was tapped. */
  .nova-mega{position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border-top:0;display:none;background:var(--ice2)}
  body.nova-nav-open .nova-mega.is-open{display:block}
  .hdr-nav > .nova-mega-panel{background:var(--ice2);border-bottom:1px solid var(--line);
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .hdr-nav > .nova-mega-panel[hidden]{display:none}
  /* The three column rule carries :not(:has()), which outranks a plain class
     selector, so on a phone the panel kept its desktop grid and the columns
     overlapped. Match that weight rather than raising it with !important. */
  .nova-mega-grid,
  .nova-mega-grid:not(:has(.nova-mega-feature)){grid-template-columns:1fr;
    gap:14px;padding-block:14px;padding-inline:0;max-width:none;width:auto}
  .nova-mega h3{margin-bottom:8px}
  .nova-mega-feature{display:none}
  .nova-mega-list a{padding:10px 0;margin-inline:0}
  .nova-mega-txt span{font-size:.8rem}
}
/* Adding the toggle made .hdr-tools wider, and the logo has no minimum, so
   flex was crushing it from 80px to 26px. Give the mark a floor and let the
   tools shrink around it instead. */
@media(max-width:1160px){
  .logo{flex:0 0 auto}
  .logo img{width:clamp(104px,27vw,140px);height:auto;max-width:none}
  .hdr-tools{gap:10px;flex:0 1 auto;min-width:0}
  /* Book an Appointment sat 34px tall with a 7px gap from the 44px
     hamburger, so a thumb aiming for it caught the menu instead: the
     drawer opened, the page did not change, and it read as a dead
     button. Hold the tap target at 44px and keep the two apart. Only
     the horizontal padding shrinks on narrow screens. */
  .hdr-tools .btn{padding:0 18px;min-height:44px;font-size:.88rem;white-space:nowrap;
    display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:620px){
  .hdr-tel{display:none}
  .icon-btn{display:none}
  .hdr-tools .btn{padding:0 15px;font-size:.84rem}
}
@media(max-width:400px){
  .logo img{width:88px}
  .hdr-tools{gap:10px}
  .hdr-tools .btn{padding:0 12px;font-size:.78rem}
}
/* Narrower than any current handset, but the header must not break there. */
@media(max-width:350px){
  .logo img{width:76px}
  .hdr-tools .btn{padding:0 10px;font-size:.74rem}
}
}