/* Ray's September 16 direction. Shared across every page and pillar.
   This supersedes the earlier solid-copper button and decorative-number rules. */
:root{--button-ink:#2b2b2b;--surface-shadow:0 8px 28px #49342608}
html{scroll-padding-top:128px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button{background:var(--copper-gradient);color:var(--button-ink);border:0;box-shadow:inset 0 1px 0 #ffffff80,0 4px 14px #9c4e3812;gap:14px;transition:box-shadow .2s,transform .2s}
.button{font-size:18px;min-height:60px;padding:18px 34px;border-radius:999px}.button:hover, .button-secondary:hover{background:var(--copper-gradient);color:var(--button-ink);filter:none;box-shadow:inset 0 1px 0 #ffffffb0,0 6px 20px #9c4e3822;transform:translateY(-1px)}
.button-secondary{background:var(--copper-gradient);color:var(--button-ink)}.button:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.header-inner{min-height:106px;gap:32px;padding-block:16px}
.header-actions .button{min-height:52px;padding:14px 22px;font-size:15px;gap:10px}
.header-actions{gap:20px}
.header-phone{font-size:16px}
.header-phone span{margin-bottom:2px}
#main-nav{gap:24px}
#main-nav a:after{background:var(--copper-gradient)}
.header-film{padding:0;background:var(--warm);overflow:hidden}
.header-film video{cursor:pointer;outline-offset:-5px}
.header-film video:focus-visible{outline:3px solid var(--copper-dark)}
.home-hero-content{padding-block:56px}
.home-hero h1{font-size:76px;margin-bottom:24px;text-wrap:balance}
.home-hero .lead{max-width:740px}
h1,h2,h3{ text-wrap:balance }
.section-heading h2{margin-bottom:20px}
.section-heading p:last-child{margin-bottom:0}

/* ---- The grey band, from Eddy's V26-01 ----------------------------------
   He runs the lead, the connected paragraph and "Live Your Best Life!" on one
   wood slab closed by a copper rule, so this sits straight under the
   credentials strip and shares its surface. The headline is the heading face
   in title case, not the condensed caps we had. */
.life-hero{position:relative;text-align:center;color:#fff;padding:calc(var(--card-drop) + var(--content-w) * .0467) 0 56px}
.life-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--copper-gradient)}
.life-lead{font-family:var(--heading);font-weight:500;font-size:30px;line-height:1.37;max-width:1000px;margin:0 auto 26px}
.life-body{font-size:20px;line-height:1.55;max-width:960px;margin:0 auto 38px}
.life-hero h1{font-family:var(--heading);font-weight:500;font-size:56px;line-height:1.15;letter-spacing:-.02em;margin:0}
@media (max-width:720px){
 .life-hero{padding:40px 0 48px}
 .life-lead{font-size:23px;margin-bottom:20px}
 .life-body{font-size:18px;margin-bottom:28px}
 .life-hero h1{font-size:38px}
}

/* ---- Google reviews (Trustindex) ----------------------------------------
   Third-party widget, so it brings its own styling. This only gives it the
   page's gutters and rhythm, and lets the section collapse if the script
   never loads rather than leaving an empty band. */
.reviews-band{padding-block:72px}
.reviews-band .container:empty,.reviews-band:has(.container:empty){padding:0}
@media (max-width:720px){.reviews-band{padding-block:48px}}

/* ---- The three specialties, set to Eddy's V26 comp -----------------------
   Sampled off the comp: the cards are the brand grey #737373 with the copper
   sweep showing as a band top and bottom, and they straddle the top edge of
   the wood so half sits on cream and half on the timber. Hovering one fills
   sweep and the strips go grey - the two trade places. That is the state he
   drew on a different card in each of the six mockups, with the cursor
   sitting on it in V26-01. His cards never show the description at any
   state, so on desktop it stays collapsed and only reaches a screen reader.
   Touch, which has no hover, still gets it outright. */
:root{--content-w:calc(min(100vw,1248px) - 48px);--card-drop:calc(var(--content-w) * .0667)}
/* ---- Line weight, Eddy 40:56 and 41:26 ----
   "I never get thicker than the letters on the logo... probably like two
   thicknesses down." Measured off the wordmark: the VIKARA stems are 1.87% of
   the logo's width, so 3.7px beside the 200px header logo and 6.5px beside a
   350px branch lockup on a phone. The card bevels were a flat 16px, which is
   under that on a 232px desktop card and wildly over it on a 107px phone card
   — the bar was fixed while the card shrank. This holds the bevel at about
   4.7% of the card at every width: 11px at 1248 and 5px at 390, both of which
   sit under the wordmark stems beside them. */
:root{--bevel:clamp(5px,calc(var(--content-w) * .0092),11px)}

.branch-section{padding-top:calc(var(--content-w) * .0558);padding-bottom:0}
.branch-section .section-heading h2{color:#737373}
.branch-grid{width:91.5%;margin-inline:auto;gap:3.92%;position:relative;z-index:2;margin-bottom:calc(var(--card-drop) * -1)}
.branch-card,.branch-card:hover{
 padding:26px 24px;min-height:0;aspect-ratio:337/219;border-radius:0 32px 0 32px;
 background:linear-gradient(#737373,#737373) padding-box,var(--copper-gradient) border-box;
 border:0 solid transparent;border-block-width:var(--bevel);
 color:#fff;box-shadow:7px 9px 16px #2b2b2b33;
 text-align:center;align-items:center;justify-content:center;
 transform:none;transition:background .25s ease,box-shadow .25s ease}
.branch-card:before{display:none}
.branch-card h3{font-size:31px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;margin:0}
.branch-card p{color:inherit;font-size:15px;line-height:1.45;margin:12px 0 0;max-width:34ch}
@media (hover:hover) and (min-width:900px){
 /* Collapse rather than remove, so the copy still reaches a screen reader. */
 .branch-card p{opacity:0;max-height:0;margin-top:0;overflow:hidden}
 .branch-card:hover,.branch-card:focus-visible{
  /* Eddy's V26-01: on hover the fill and the strips trade places. */
  background:var(--copper-gradient) padding-box,linear-gradient(#737373,#737373) border-box;
  box-shadow:0 22px 40px #2b2b2b33}
}
.concern-card{min-height:245px;padding:32px;background:var(--tint);border:0;border-radius:4px}
.concern-card .card-link{padding-top:16px}
.concern-card .card-link,.related-links a{line-height:1.5}
.concern-card h3{margin-bottom:20px}
.concern-card:hover{box-shadow:0 12px 32px #49342610}
.branch-band.esthetics,.esthetics .branch-band{color:#171717}
.esthetics .branch-band .text-link{color:inherit}
.vitality .branch-band{background:linear-gradient(#0003,#0003),linear-gradient(120deg,var(--branch-a),var(--branch-b));color:#fff}
.article-aside>div{top:130px}
.article-aside hr{height:1px;border:0;background:var(--copper-gradient)}
.treatments-section{scroll-margin-top:128px}
.treatment-list summary>span:not(.plus){min-width:0}
.related-links a{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px}
.team-feature>img{width:100%;height:auto;object-fit:contain;display:block}
.team-wide{height:auto;object-fit:contain;margin-bottom:64px}
.founder-mini img,.provider-portrait img{max-width:100%;height:auto}
.testimonial-card{background:transparent}
.testimonial-note{line-height:1.5}
.closing-cta{border:0;position:relative}
.closing-cta:before{content:'';height:1px;background:var(--copper-gradient);position:absolute;top:0;left:0;right:0}
.cta-inner{gap:48px}
.cta-inner>div:first-child{max-width:690px}
.consultation-layout{display:block;scroll-margin-top:124px}
.consultation-layout .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.consultation-layout.has-booking{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:start}
.consultation-layout.has-booking .contact-grid{display:flex}
.consultation-booking{min-width:0}
.booking-frame{display:block;width:100%;height:780px;min-height:660px;border:0;background:#fff;border-radius:4px}
.booking-help{font-size:15px;line-height:1.6;margin-top:20px}
.contact-primary,.contact-address{padding:32px}
.contact-primary h2,.contact-address h2{font-size:28px}
.contact-primary .button{font-size:16px;padding-inline:22px}
.contact-email{margin-bottom:0}
.contact-address address{font-size:20px}
.contact-specialties{gap:8px 16px;font-size:15px}
.office-hours dl>div{gap:4px 12px}
@media(max-width:1100px){
 .header-inner{gap:24px}.branch-card{padding:32px 26px}
 .cta-inner>div:first-child{max-width:60%}
}
@media(max-width:900px){
 .header-inner{min-height:96px}.header-actions .button{font-size:14px;padding-inline:18px}
 #main-nav{gap:20px}.header-inner .logo{width:160px}
 .consultation-layout.has-booking{grid-template-columns:1fr;gap:40px}
 .consultation-layout.has-booking .contact-grid{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
 html{scroll-padding-top:104px}
 .container{padding-inline:24px}
 .header-inner{min-height:88px;padding-block:12px}
 .header-inner .logo{width:148px}
 .menu-toggle{font-size:14px;min-height:44px;min-width:84px;padding:10px 14px;gap:10px;border-radius:999px}
 #main-nav{padding:12px 24px 24px;border-radius:0 0 4px 4px}
 #main-nav a{padding:5px 12px;min-height:48px}
 .home-hero-content{padding-block:36px 40px}
 .home-hero h1{font-size:52px;line-height:1.05;margin-bottom:22px}
 .home-hero .lead{font-size:18px;line-height:1.6;margin-bottom:28px}
 .button{font-size:17px;min-height:56px;padding:16px 26px;gap:12px}
 .branch-grid{gap:16px}
 :root{--card-drop:0px}
 .branch-card,.branch-card:hover{border-radius:20px}
 .branch-card,.branch-card:hover{padding:28px 26px;min-height:0}
 .branch-card h3{font-size:30px;margin-bottom:16px}
 .branch-card p{font-size:17px;margin-bottom:24px}
 .branch-card .card-link{padding-top:18px;font-size:16px}
 .section-heading{margin-bottom:28px}
 .section-heading h2{margin-bottom:16px}
 .concern-card{padding:28px 24px;min-height:0}
 .concern-card h3{margin-bottom:16px}
 .concern-card p{margin-bottom:16px}
 .hub-hero h1{font-size:clamp(62px,18vw,80px)}
 .hub-tagline{font-size:22px}
 .breadcrumbs{padding-block:16px}
 .breadcrumbs ol{font-size:13px;gap:6px 10px}
 .breadcrumbs li{gap:10px}
 .page-hero h1{overflow-wrap:normal;font-size:32px;line-height:1.2}
 .treatments-section{padding:28px 20px;scroll-margin-top:104px}
 .treatment-list summary{font-size:18px;padding-block:22px}
 .treatment-list .details-body h3{font-size:21px}
 .faq-list details{padding-inline:20px}
 .faq-list summary{font-size:17px;padding-block:22px}
 .team-wide{margin-bottom:40px}
 .team-feature-copy{gap:32px}
 .testimonial-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82vw,320px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:0 0 14px;scrollbar-width:thin;scrollbar-color:var(--copper-light) var(--warm)}
 .testimonial-card{width:100%;max-width:none;margin:0;scroll-snap-align:start}
 .testimonial-note{font-size:14px;margin-top:18px}
 .cta-inner>div:first-child{max-width:none}
 .cta-inner>div:last-child{margin-top:28px}
 .closing-cta h2{font-size:28px}
 .consultation-layout,.consultation-layout.has-booking{scroll-margin-top:106px}
 .consultation-layout .contact-grid,.consultation-layout.has-booking .contact-grid{display:flex;gap:20px}
 .contact-primary,.contact-address{padding:28px 24px}
 .contact-primary h2,.contact-address h2{font-size:26px}
 .contact-address address{font-size:19px}
 .booking-frame{height:820px;min-height:720px}
 .map-wrap{margin-top:40px}
 .map-wrap p{text-align:left}
}
@media(max-width:360px){
 .container{padding-inline:20px}.home-hero h1{font-size:46px}
 .button{padding-inline:22px;font-size:16px}
 .page-hero h1{font-size:30px}
}
@media(prefers-reduced-motion:reduce){.button:hover{transform:none}}
/* Keep this inline booking frame visible even when a browser blocks the
   provider's sizing handshake. The separate-window link remains available. */
.booking-frame{position:relative!important;left:auto!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;min-height:0}
.booking-status{font-size:15px;color:var(--ink)}
.booking-frame[hidden]{display:none!important}

.testimonial-grid:focus-visible{outline:2px solid var(--copper-dark);outline-offset:6px}
@media(max-width:720px){.testimonial-grid{grid-auto-columns:88%}}

/* Compact shared footer, v1.9.1. Address text never inherits action-link sizing. */
.site-footer{background:#fff;padding-top:44px}
.footer-grid{display:grid;grid-template-columns:1.1fr .85fr .85fr 1.2fr;gap:40px;padding-bottom:32px;align-items:start}
/* The spec calls this out by name: a group label and its own links share a
   left edge. Each group is one grid cell containing both, so they cannot
   drift into neighbouring columns. */
.footer-menu,.footer-contact,.footer-brand{align-self:start}
/* Spec: the footer logo is a sign-off, never larger than it is in the header.
   It was 166px against a header logo of 200 on desktop and 112 on a phone. */
.footer-brand .logo{width:150px;margin-bottom:10px}
.footer-brand p{font-size:15px;line-height:1.45;max-width:205px;margin:0}
.footer-menu{margin:0;padding:0;border:0;background:none;box-shadow:none;min-width:0}
.footer-menu .footer-heading,.footer-contact .footer-heading{font-family:var(--heading);font-size:15px;font-weight:600;line-height:1.4;letter-spacing:0;margin:0 0 12px;padding:0;color:var(--ink)}
.footer-menu nav{display:flex;flex-direction:column;align-items:flex-start}
.footer-menu nav a,.footer-contact-links a,.social-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:15px;line-height:1.4;margin:0}
.site-footer a:hover{color:var(--copper-dark)}
.footer-contact{min-width:0}
.footer-address{font-style:normal;font-size:15px;line-height:1.4;margin:0 0 6px}
.footer-address-link{display:block;min-height:44px;padding:2px 0;line-height:1.4;color:inherit}
.footer-address-line{display:block}
.site-footer .footer-address a[data-detectors],.site-footer .footer-address a[x-apple-data-detectors]{display:inline;min-height:0;padding:0;margin:0;font:inherit;line-height:inherit;color:inherit;text-align:inherit}
.footer-contact-links{display:flex;flex-direction:column;align-items:flex-start}
.footer-contact-links a[href^="mailto:"]{overflow-wrap:anywhere}
.social-links{display:flex;flex-direction:row;flex-wrap:wrap;gap:0 20px;padding:0;margin-top:4px}
.social-links a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:2px 24px;padding-block:8px;border-top:1px solid var(--line);font-size:12px;line-height:1.5}
.footer-bottom nav{display:flex;align-items:center;flex-wrap:wrap;gap:0 18px}
.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;padding:6px 0;font-size:12px;line-height:1.4}
.footer-bottom>span{font-size:12px;line-height:1.5}
.footer-bottom .footer-surfct{display:flex;align-items:center;width:84px;min-height:44px;padding:0;margin:0;opacity:.75;order:3}
.footer-bottom .footer-surfct:hover{opacity:1}
.footer-surfct img{display:block;width:100%;height:auto}
@media(max-width:1100px){.footer-grid{gap:28px;grid-template-columns:1fr .8fr 1fr 1.3fr}}
@media(min-width:721px) and (max-width:900px){
 .footer-grid{grid-template-columns:1fr 1fr;gap:28px 40px}
 .footer-brand{grid-column:1;grid-row:1}.footer-contact{grid-column:2;grid-row:1}
 .footer-explore{grid-column:1;grid-row:2}.footer-visit{grid-column:2;grid-row:2}
}
@media(max-width:720px){
 /* The 92px used to be clearance for the sticky Book a Consultation bar.
    That bar is gone (Eddy, 29:00 and again at 53:19), so the space goes
    with it — it was 92px of nothing at the bottom of every phone page. */
 .site-footer{padding-top:24px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
 .footer-grid{display:flex;flex-direction:column;gap:0;padding-bottom:8px;align-items:stretch}
 .footer-brand{padding-bottom:14px}
 .footer-brand .logo{width:124px;margin:0 0 8px}
 .footer-brand p{max-width:none;font-size:14px;line-height:1.4;margin:0}
 .footer-menu{border-top:1px solid var(--line)}
 .footer-menu .footer-heading{min-height:0;padding:12px 0 6px;margin:0;font-size:15px}
 .footer-menu nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px;padding-bottom:12px}
 .footer-menu nav a{min-height:44px;padding:6px 0;font-size:14px;line-height:1.4}
 .footer-contact{border-top:1px solid var(--line);padding-top:16px;margin:0}
 .footer-contact .footer-heading{font-size:15px;margin:0 0 6px}
 .footer-address{font-size:14px;line-height:1.4;margin:0}
 .footer-address-link{line-height:1.4;min-height:44px;padding:2px 0}
 .footer-contact-links{flex-direction:row;flex-wrap:wrap;gap:0 18px;align-items:center}
 .footer-contact-links a{font-size:14px;min-height:44px;padding:8px 0}
 .social-links{gap:0 22px;margin:0}
 .social-links a{font-size:14px;min-height:44px;padding:8px 0}
 .footer-bottom{padding-block:12px 0}
 .footer-bottom .footer-surfct{width:76px;margin:0;padding:0}
 .footer-bottom nav{gap:0 16px}
 .footer-bottom a{font-size:12px;line-height:1.4;padding:6px 0;min-height:44px}
 .footer-bottom>span{font-size:12px;line-height:1.4}
 .contact-page .site-footer{padding-bottom:28px}
}

/* Supplied September 16 new-patient offer, Dentistry hub only. */
.dentistry-offer{padding-top:48px}
.dentistry-offer-panel{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:20px 48px;align-items:center;padding:36px 40px;background:var(--tint);border:1px solid var(--line);border-radius:4px}
.dentistry-offer-copy h2{font-size:30px;line-height:1.2;max-width:650px;margin-bottom:20px}
.dentistry-offer-inclusions{font-size:17px;line-height:1.6;margin:0}
.dentistry-offer-action{text-align:center;grid-column:2;grid-row:1 / 3}
.dentistry-offer-price{margin:0 0 20px}
.dentistry-offer-price strong{display:block;font-family:var(--heading);font-size:56px;line-height:1.1;font-weight:600;letter-spacing:-.035em}
.dentistry-offer-price span{display:block;font-size:15px;line-height:1.4;margin-top:8px}
.dentistry-offer-action .button{font-size:16px;min-height:52px;padding:14px 26px}
.dentistry-offer-note{font-size:14px;line-height:1.5;margin:0;max-width:590px}
@media(max-width:720px){
 .dentistry-offer{padding-top:28px}
 .dentistry-offer-panel{grid-template-columns:minmax(0,1fr);gap:20px;padding:24px}
 .dentistry-offer-copy h2{font-size:26px;line-height:1.2;margin-bottom:16px}
 .dentistry-offer-inclusions{font-size:16px;line-height:1.5}
 .dentistry-offer-action{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;align-items:stretch;gap:16px;text-align:left}
 .dentistry-offer-price{margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
 .dentistry-offer-price strong{font-size:44px}
 .dentistry-offer-price span{font-size:14px;margin-top:4px}
 .dentistry-offer-action .button{padding-inline:20px;font-size:15px;min-height:48px}
}
@media(max-width:380px){
 .dentistry-offer-panel{padding:20px}
}

/* ---- Patient stories: quote, attribution and rating, per the approved comps ---- */
.testimonial-card{display:flex;flex-direction:column}
.testimonial-words{padding:18px 20px 22px;background:#fff;border:1px solid rgba(43,43,43,.08);
 border-top:0;border-radius:0 0 14px 14px;display:flex;flex-direction:column;gap:10px}
.testimonial-words .stars{display:flex;gap:3px;line-height:0}
.testimonial-words .stars svg{fill:#c3714f}
.testimonial-words blockquote{margin:0;font-size:.95rem;line-height:1.55;color:#3a3a3a}
.testimonial-words blockquote::before{content:'\201C'}
.testimonial-words blockquote::after{content:'\201D'}
.testimonial-words cite{font-style:normal;font-weight:600;color:#2b2b2b;font-size:.95rem}
.testimonial-card video{border-radius:14px 14px 0 0;display:block;width:100%;height:auto}

/* ---- Credentials band, on the wood, as drawn in the homepage comp ---- */
.proof-band{background-color:#575757;color:#fff;padding:calc(var(--card-drop) + 52px) 0 38px}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center}
.proof-grid>div{display:flex;flex-direction:column;gap:2px;padding:6px 18px;
 border-left:1px solid rgba(255,255,255,.28)}
.proof-grid>div:first-child{border-left:0}
.proof-grid strong{font-size:1.15rem;font-weight:400;letter-spacing:.01em}
.proof-grid span{font-size:1.15rem;font-weight:400;opacity:.95}
@media (max-width:720px){
 .proof-grid{grid-template-columns:repeat(2,1fr);row-gap:22px}
 .proof-grid>div:nth-child(odd){border-left:0}
 .proof-grid strong,.proof-grid span{font-size:1rem}
}

/* ---- The brand line that closes the treatment run on concern pages ---- */
.life-band{background-color:#575757;color:#fff;padding:64px 0;text-align:center}
.life-band p{margin:0;font-size:clamp(2rem,6vw,4.25rem);line-height:1.05;
 font-weight:400;letter-spacing:.01em;color:#fff}
@media (max-width:720px){.life-band{padding:44px 0}}

/* ---- Call | Text ----
   Eddy wants people able to phone the practice or text it (55:13), and the
   smaller header buttons to read as pills (48:53). Two anchors share one
   copper ring with a hairline between them, so it looks like a single control
   while each action keeps its own tap target. The ring is 2px because his
   standing rule is that no line on the site is thicker than the letter
   strokes in the wordmark. */
.contact-pill{
 display:inline-flex;align-items:stretch;flex:0 0 auto;
 min-height:58px;border:2px solid transparent;border-radius:999px;
 background:linear-gradient(#fff,#fff) padding-box,var(--copper-gradient) border-box;
}
.contact-pill .cp-half{
 display:inline-flex;align-items:center;justify-content:center;gap:9px;
 min-height:54px;padding:0 22px;border-radius:999px;color:var(--copper);
 font-family:var(--heading);font-weight:500;font-size:15px;line-height:1;
 letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
 transition:background .2s,color .2s;
}
.contact-pill .cp-half:hover{background:var(--warm);color:var(--copper-dark)}
.contact-pill .cp-half:focus-visible{outline-offset:-4px}
.contact-pill svg{flex:0 0 auto;width:19px;height:19px}
.cp-rule{flex:0 0 auto;align-self:center;width:1px;height:22px;background:var(--copper-light)}

@media (max-width:1330px){
 .contact-pill .cp-half{padding:0 18px;font-size:14px}
}
@media (max-width:1150px){
 .contact-pill{min-height:52px}
 .contact-pill .cp-half{min-height:48px;padding:0 15px;font-size:13px}
}
@media (max-width:940px){
 .contact-pill{min-height:48px}
 .contact-pill .cp-half{min-height:44px;padding:0 13px;font-size:12px;gap:7px}
 .contact-pill svg{width:17px;height:17px}
}
@media (max-width:560px){
 .contact-pill .cp-half{padding:0 14px}
 /* Logo, pill and menu button have to share 350px on a small phone.
    Qualified with .header-inner because an earlier rule at that specificity
    pins the logo to 148 below 720. */
 .header-inner .logo{width:112px}
 .header-inner{gap:8px}
}

/* ---- Social marks are icons, not words ---- */
.social-links a{color:var(--copper);text-decoration:none;
 width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;
 border-radius:50%;transition:background .2s,color .2s}
.social-links a:hover{background:rgba(255,255,255,.14)}
.site-footer .social-links a{color:#fff}
.site-footer .social-links a:hover{color:#fdaf95}
.social-links{gap:4px!important;margin-left:-10px}

/* The header actions are hidden on small screens so the menu can breathe, which
   also removed the only way to phone the practice from the top of the page.
   Bring the call button back on its own; booking is already handled by the
   sticky bar further down. */
@media (max-width:760px){
 .header-actions{display:flex!important;gap:0;margin-left:auto;order:2}
 .header-actions>.button{display:none!important}
 .contact-pill{display:inline-flex!important}
 .header-inner{gap:12px}
 .menu-toggle{order:3}
}

/* This used to outline the phone button to keep it quieter than Book. In V26
   both are the same grey pill with a copper edge, so the outline is gone. The
   !important background here was also beating the pill fill and rendering the
   label white on white. */

/* ---- The copper gradient drifts, the way it does on Ray's reference site ---- */
/* Reference: spoffordconsulting.com. The palette itself is untouched. We only
   widen the gradient box and slide it, so the lighter copper band travels
   across the button instead of sitting still. The hairline rules that share
   --copper-gradient (the nav underline, the aside rule, the CTA edge) stay put,
   and the Call | Text pill is outlined rather than filled, so it sits this out. */
@keyframes copper-drift{
 0%{background-position:0% 50%}
 50%{background-position:100% 50%}
 100%{background-position:0% 50%}
}.button{
 background-image:var(--copper-gradient);
 background-size:220% 100%;
 background-position:0% 50%;
 animation:copper-drift 7s ease-in-out infinite;
}/* The hover rule further up re-declares the background shorthand, which resets
   background-size back to auto, so it has to be restated here or the drift
   collapses the moment the pointer lands on the button. */
.button:hover{
 background-image:var(--copper-gradient);
 background-size:220% 100%;
}
@media (prefers-reduced-motion:reduce){.button{animation:none;background-size:100% 100%}
}

/* ---- Tablets get the menu button too ---- */
/* The bar carries five destinations now, and five plus the phone button plus
   Book a Consultation stop fitting somewhere around 1100px. Below that the
   old four-item bar was already squeezing "Book a Consultation" onto two
   lines, so rather than tighten the type, the menu button takes over earlier
   and both calls to action keep their full size. The Call | Text pill sheds
   padding at 1150 and 940, which is handled further up.
   The menu button sits last, after both calls to action, so the tablet header
   reads in the same order as the phone one: brand, contact, book, more. */
@media (min-width:721px) and (max-width:1099px){
 .menu-toggle{display:flex!important;align-items:center;gap:12px;min-height:44px;
  background:none;border:1px solid var(--line);border-radius:4px;padding:8px 14px;
  font-size:14px;color:var(--ink);margin-left:16px;order:3}
 .menu-lines{display:block;width:18px;height:10px;
  border-top:1px solid currentColor;border-bottom:1px solid currentColor}
 .menu-toggle[aria-expanded=true] .menu-lines{height:1px;transform:rotate(45deg)}
 #main-nav{position:absolute;top:100%;left:0;right:0;margin:0;
  background:#fff;border-bottom:1px solid var(--line);box-shadow:0 16px 20px #00000008;
  display:none;flex-direction:column;align-items:stretch;padding:16px 24px 24px;gap:4px}
 #main-nav.is-open{display:flex}
 #main-nav a{font-size:17px;line-height:1.6;padding:8px;white-space:nowrap}
 #main-nav a:after{display:none}
 #main-nav a[aria-current],#main-nav .branch-active{color:var(--copper);background:var(--warm)}
 .header-inner{gap:20px}
 .header-actions{order:2;gap:14px;margin-left:auto}
}
/* Nav labels never break mid-phrase, at any width. */
#main-nav a{white-space:nowrap}

/* ---- The narrowest phones still in use (320px) ---- */
/* Logo, menu button and phone button together ran about four pixels past the
   viewport. Tightening the gaps and the logo buys back enough room without
   dropping the word "Menu", which is what makes the button obvious. */
@media (max-width:360px){
 .header-inner{gap:8px}
 .logo{width:132px}
 .menu-toggle{padding:8px 10px;gap:8px}
}

/* ---- "Treatments Designed Around You" ---- */
/* Eddy's comp: the heading and its button hold a column on the left, nine
   cards fill a 3x3 grid on the right. Each card is a 2:3 photograph over a
   pale panel, with the corner treatment the buttons already use. His grey
   panel and grey type are kept rather than translated into the warm palette,
   so the section reads as the comp it came from. */
.treatments-designed{background:#fff}
.treatments-layout{display:grid;grid-template-columns:minmax(230px,1fr) 2.45fr;gap:72px;align-items:start}
.treatments-intro{position:sticky;top:152px}
.treatments-intro h2{font-size:40px;line-height:1.15;margin-bottom:32px}
.treatments-intro .button{font-size:14px;letter-spacing:.12em;text-transform:uppercase;
 min-height:52px;padding:14px 30px}
.treatments-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}

.treatment-card{display:flex;flex-direction:column;background:#f4f4f4;overflow:hidden;
 border-radius:32px 0 32px 0;box-shadow:8px 10px 24px #2b2b2b24;
 transition:transform .2s,box-shadow .2s;color:inherit}
.treatment-card img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;
 transition:transform .35s ease}
.treatment-card:hover{transform:translateY(-4px);box-shadow:10px 14px 30px #2b2b2b2e}
.treatment-card:hover img{transform:scale(1.03)}
.treatment-card:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.treatment-card-body{padding:24px 22px 30px;text-align:center;flex:1;
 display:flex;flex-direction:column;gap:14px}
.treatment-card-body h3{font-size:21px;line-height:1.25;margin:0;color:#6c6c6c;letter-spacing:-.01em}
.treatment-card-body p{font-size:15px;line-height:1.5;margin:0;color:#6b6b6b}

/* Between 1100 and 1200 the container shrinks faster than the grid, and the
   cards drop to about 213px. Stack the heading above the grid from 1199
   instead, which hands the cards the full width back. */
@media (max-width:1199px){
 .treatments-layout{grid-template-columns:1fr;gap:36px}
 .treatments-intro{position:static}
 .treatments-intro h2{font-size:34px;margin-bottom:24px}
 .treatments-grid{gap:22px}
}
/* Three across stops being comfortable once the cards drop under ~250px. */
@media (max-width:860px){.treatments-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){
 .treatments-grid{gap:16px}
 .treatment-card{border-radius:24px 0 24px 0;box-shadow:5px 7px 16px #2b2b2b24}
 .treatment-card-body{padding:18px 14px 22px;gap:10px}
 .treatment-card-body h3{font-size:18px}
 .treatment-card-body p{font-size:14px;line-height:1.45}
 .treatments-intro .button{width:100%}
}
@media (max-width:430px){
 .treatments-grid{grid-template-columns:1fr;gap:18px}
 .treatment-card img{aspect-ratio:4/3}
}
@media (prefers-reduced-motion:reduce){
 .treatment-card:hover{transform:none}
 .treatment-card:hover img{transform:none}
}

/* ---- Dr. Julio's signature, as the homepage comp draws it ---- */
/* The comp sets his portrait in a copper disc with the signature beside it.
   The typed name and title stay, because a script face is decoration rather
   than something to read, which is why the signature is hidden from screen
   readers. */
/* styles.css sets .founder-mini img at 160px, and that selector outweighs a
   lone class, so the signature rules carry the element too. */
.founder-mini img.founder-portrait{border-radius:50%;background:var(--copper-light);object-fit:cover;aspect-ratio:1}
.founder-mini p{margin-bottom:0}
.founder-mini img.founder-signature{display:block;width:min(215px,85%);height:auto;margin:10px auto 0;opacity:.82}
@media (max-width:720px){
 .founder-mini{flex-wrap:wrap}
 .founder-mini img.founder-signature{width:165px;margin:6px 0 0 112px}
}
@media (max-width:359px){
 .founder-mini img.founder-signature{width:min(145px,calc(100% - 112px));margin-left:112px}
}

/* ---- Eddy's branch text, centred under the four header videos ------------
   The video ends on the butterfly and the VIKARA wordmark running to the
   bottom edge; this finishes the lockup. Same artboard width as the video and
   the word is already centred in it, so full width and flush is the whole job.
   On a hub it carries the h1, which has to lose the default heading margin. */
.header-film .branch-text{display:block;width:100%;height:auto;margin:0}
.branch-wordmark{margin:0;line-height:0}
/* The three-branch line fills its artboard almost edge to edge, unlike the
   single words, so on home it needs a margin they don't. */
.home-film .branch-text{width:85%;margin-inline:auto}
@media (max-width:720px){.home-film .branch-text{width:92%}}

/* ---- Meet the Team: 8 provider bios and the support grid ---- */
/* Eddy's 22 September headshots are 4:5, so the portrait column is set by
   aspect-ratio rather than by a fixed height, and the old square rules go. */
.team-intro{max-width:760px;margin:0 0 72px}
.team-intro h2{margin-bottom:16px}
.provider{padding-bottom:64px;margin-bottom:64px;border-bottom:1px solid var(--line)}
.provider:last-of-type{border-bottom:0}
.provider-portrait img{width:280px;aspect-ratio:4/5;object-fit:cover;border-radius:24px 0 24px 0;margin:0}
.provider h3{font-size:30px;margin-bottom:6px}
.provider-role{font-family:var(--heading);font-weight:500;color:var(--copper);font-size:17px;margin-bottom:24px}
.support-team{border-top:1px solid var(--line);padding-top:64px}
.support-team h2{margin-bottom:12px}
.support-team>p{color:var(--muted);max-width:640px;margin-bottom:40px}
.support-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.support-grid li{margin:0;padding:0}
.support-card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px 0 20px 0;margin-bottom:16px}
.support-card .support-name{display:block;font-family:var(--heading);font-weight:500;font-size:17px;line-height:1.4;margin:0}
.support-card .support-role{display:block;font-family:var(--font);font-weight:400;font-size:15px;color:var(--muted)}
/* A support card with a quote opens it in place. styles.css styles summary as
   a flex row for the FAQ accordions, so this resets that and stacks the
   portrait above the name line. The copper plus and its rotate-on-open come
   from the same accordion rules, so the gesture reads the same everywhere. */
.support-card details{margin:0}
.support-card summary{display:block;padding:0;gap:0;font:inherit;border-radius:20px 0 20px 0}
.support-card .support-line{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.support-card .plus{position:relative;top:-4px;font-size:26px}
.has-quote summary img{transition:filter .2s}
.has-quote summary:hover img{filter:brightness(.94)}
.support-card blockquote{margin:16px 0 0;padding-left:16px;border-left:2px solid var(--copper-light);font-family:var(--heading);font-weight:400;font-style:italic;font-size:16px;line-height:1.55;color:var(--muted);animation:fade-in .2s}
.team-cta{padding-top:64px}
@media (max-width:1099px){
 .support-grid{grid-template-columns:repeat(3,1fr);gap:24px}
}
@media (max-width:720px){
 .team-intro{margin-bottom:48px}
 .provider{padding-bottom:40px;margin-bottom:40px}
 .provider-portrait{display:block;text-align:left}
 .provider-portrait img{width:150px;margin-bottom:20px}
 .provider h3{font-size:24px}
 .support-team{padding-top:40px}
 .support-grid{grid-template-columns:repeat(2,1fr);gap:20px}
 .support-card .plus{font-size:24px}
 .support-card blockquote{font-size:15px;margin-top:12px;padding-left:12px}
 .team-cta{padding-top:40px}
}
@media (max-width:380px){
 .support-grid{grid-template-columns:1fr 1fr;gap:16px}
 .support-card .support-name{font-size:16px}
}

/* ---- Header, from V26-02 ----------------------------------------------
   His nav is uppercase #727272 with a copper pipe between items, and the
   two buttons are copper-outlined grey pills reading OFFICE 305-572-1600
   and BOOK ON-LINE. Measured off the 1200 artboard: nav cap height 12 on
   a 17px face, ~2.5px of letterspacing, 46px between items with the pipe
   centred in it; pills 38 tall in a 73 header, the same 52% our 112 gives
   at 58. His header carries no logo and four items; ours keeps the logo
   and Meet the Team, which needs about 390px he did not have to find, so
   the header runs to 1440 rather than the 1248 the body sits in and the
   type comes down a step. */
.site-header .container{width:min(100%,1440px)}
#main-nav{gap:0}
#main-nav a{
 text-transform:uppercase;letter-spacing:.13em;font-size:15px;color:#727272;
 padding-inline:20px;white-space:nowrap}
#main-nav a+a{position:relative}
#main-nav a+a::before{
 content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
 width:2px;height:17px;background:var(--copper)}
#main-nav a::after{left:20px;right:calc(100% - 20px)}
#main-nav a:hover::after,#main-nav a[aria-current]::after,#main-nav .branch-active::after{right:20px}
#main-nav a[aria-current],#main-nav .branch-active{color:#4f4f4f}

.header-actions{gap:14px}
.header-actions .button,.header-actions .button-secondary,
.header-actions .button-secondary:hover{
 min-height:58px;padding:14px 30px;border-radius:999px;white-space:nowrap;
 font-size:15px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
 color:#fff;border:3px solid transparent;
 background:linear-gradient(#727272,#727272) padding-box,var(--copper-gradient) border-box;
 filter:none;transition:background .2s}
.header-actions .button:hover,.header-actions .button-secondary:hover{
 background:var(--copper-gradient) padding-box,var(--copper-gradient) border-box}

@media(max-width:1330px){
 .logo{width:170px}
 #main-nav a{padding-inline:14px;font-size:14px;letter-spacing:.1em}
 #main-nav a::after{left:14px;right:calc(100% - 14px)}
 #main-nav a:hover::after,#main-nav a[aria-current]::after,#main-nav .branch-active::after{right:14px}
 .header-actions .button,.header-actions .button-secondary{padding:12px 22px;font-size:14px}
}
@media(max-width:1150px){
 .logo{width:150px}
 #main-nav a{padding-inline:10px;font-size:13px;letter-spacing:.08em}
 #main-nav a::after{left:10px;right:calc(100% - 10px)}
 #main-nav a:hover::after,#main-nav a[aria-current]::after,#main-nav .branch-active::after{right:10px}
 .header-actions{gap:10px}
 /* The logo drops to 150px here, which puts its stems at 2.81px, so the
    button edge has to step down with it or it breaks Eddy's rule by a
    fifth of a pixel. It used to wait until 940. */
 .header-actions .button,.header-actions .button-secondary{padding:11px 16px;font-size:13px;min-height:52px;border-width:2px}
}
@media(max-width:940px){
 .logo{width:132px}
 #main-nav a{padding-inline:6px;font-size:12px;letter-spacing:.06em}
 #main-nav a::after{left:6px;right:calc(100% - 6px)}
 #main-nav a:hover::after,#main-nav a[aria-current]::after,#main-nav .branch-active::after{right:6px}
 #main-nav a+a::before{height:14px}
 .header-actions{gap:8px}
 .header-actions .button,.header-actions .button-secondary{padding:10px 13px;font-size:12px;min-height:48px;border-width:2px}
}
@media(max-width:720px){
 /* The drawer stacks, so a pipe would sit above each item instead of beside it. */
 #main-nav a+a::before{display:none}
 #main-nav a{padding-inline:8px;font-size:16px;letter-spacing:.08em}
}

/* Below the hover breakpoint the card descriptions show, and three of them
   will not sit across a tablet. Grid items also need min-width:0 or the
   uppercase heading sets a floor the track cannot shrink under. */
.branch-card{min-width:0}
@media(max-width:899px){
 :root{--card-drop:0px}
 .branch-grid{grid-template-columns:1fr;width:100%;gap:16px}
 .branch-card,.branch-card:hover{aspect-ratio:auto;min-height:0;padding:28px 26px}
 .branch-section{padding-top:56px}
}

/* ---- Pillar service cards, from V26-02 --------------------------------
   The home card again, taller. Measured off his 1200 artboard: 337 wide on
   the same 43px gaps, 297 tall with a 15px copper strip top and bottom,
   45px between the two rows. Heading left-aligned at 36 with 14px above it
   inside the grey, list at 19/31 starting 23px under the heading, heading
   inset 16 from the card edge and the bullet marker at 24. */
.service-section{padding-top:calc(var(--content-w) * .0558);padding-bottom:0}
.service-grid{
 width:91.5%;margin-inline:auto;
 display:grid;grid-template-columns:repeat(3,1fr);
 column-gap:3.92%;row-gap:45px}
.service-card{
 min-width:0;min-height:calc(var(--content-w) * .2475);
 padding:9px 16px 20px;border-radius:0 32px 0 32px;
 background:linear-gradient(#737373,#737373) padding-box,var(--copper-gradient) border-box;
 border:0 solid transparent;border-block-width:var(--bevel);
 color:#fff;box-shadow:7px 9px 16px #2b2b2b33;
 display:flex;flex-direction:column}
.service-card h2{
 font-family:var(--heading);font-size:36px;font-weight:500;line-height:1.05;
 letter-spacing:-.01em;margin:0 0 11px;color:inherit}
.service-card h2 a{color:inherit}
.service-card h2 a:hover,.service-card h2 a:focus-visible{
 text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.service-card ul{list-style:none;margin:0;padding:0 0 0 8px}
.service-card li{margin:0;padding:0;font-size:19px;line-height:31px}
.service-card li a{color:inherit;display:flex;gap:11px}
.service-card li a::before{content:'\00b7';flex-shrink:0}
.service-card li a:hover,.service-card li a:focus-visible{
 text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

@media(max-width:1150px){
 .service-card h2{font-size:30px;margin-bottom:18px}
 .service-card li{font-size:17px;line-height:27px}
}
@media(max-width:899px){
 /* Three of these will not sit across a tablet once the lists are showing. */
 .service-grid{grid-template-columns:repeat(2,1fr);width:100%;column-gap:20px;row-gap:24px}
 .service-card{min-height:0;border-radius:0 24px 0 24px}
}
@media(max-width:640px){
 .service-grid{grid-template-columns:1fr;row-gap:16px}
 .service-card h2{font-size:28px;margin-bottom:14px}
 .service-card li{font-size:17px;line-height:29px}
}

/* The pillar band is the home band. His bottom row of cards drops 99px into
   it against a 297 card, measured at y=1141 on V26-02. */
.service-section{--card-drop:calc(var(--content-w) * .0825)}
.service-grid{position:relative;z-index:2;margin-bottom:calc(var(--content-w) * -.0825)}
.pillar-band{padding-top:calc(var(--content-w) * .0825 + var(--content-w) * .0467)}
.pillar-band h2{font-family:var(--heading);font-weight:500;font-size:56px;line-height:1.15;letter-spacing:-.02em;margin:0}
@media(max-width:899px){
 .service-grid{margin-bottom:0}
 .pillar-band{padding-top:56px}
 .pillar-band h2{font-size:38px}
}
/* His pillar lead runs the full 1045 measure, wider than the home band's. */
.pillar-band .life-lead{max-width:1080px}
.service-card li a{gap:9px}

/* ---- Touch targets ----------------------------------------------------
   The pillar service cards put thirty treatment links in a list. On a phone
   each row came out 29px tall against the 44 that WCAG 2.5.8 asks for, and
   the six category headings 39. Padding the link rather than the line keeps
   the list rhythm close to Eddy's while making each row properly tappable.
   Scoped to where the cards stack, so the desktop card stays at his 297. */
@media(max-width:899px){
 .service-card li a{min-height:44px;align-items:center;padding-block:6px}
 .service-card h2 a{display:inline-block;padding-block:8px}
}
/* Two that predate today and sit on the home page: the testimonials text
   link and the footer phone number, 18px and 15px tall on a phone. */
@media(max-width:899px){
 .testimonials .text-link{display:inline-block;padding-block:13px}
 .footer-contact-links a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---- Mobile section rhythm -------------------------------------------
   The pillar grid took its padding from the desktop proportion, which
   collapses to 19px top and 0 bottom on a phone, so the last card butted
   straight into the wood band. The rest of the site runs on a 56px mobile
   rhythm; these join it. */
@media(max-width:899px){
 .service-section{padding-top:56px;padding-bottom:56px}
 .branch-section{padding-bottom:88px}
 .dentistry-offer{padding-bottom:56px}
}
@media(max-width:720px){
 .life-hero{padding-top:56px;padding-bottom:56px}
 .reviews-band{padding-block:56px}
 /* The sticky booking bar that this 54px was clearing is gone (Eddy, 29:00),
    and this override outranked the removal up at the top of the mobile block,
    so every phone page was still paying for it. */
}

/* ---- 320px ------------------------------------------------------------
   Logo, phone pill and Menu button need 316px of a 280px content box on a
   320 screen, which pushed the header 36px wide and dragged the fixed
   booking bar out with it. The word "Menu" goes (clipped, not removed, so
   the button keeps its accessible name) and the logo comes down a step. */
@media(max-width:360px){
 .header-inner .logo{width:96px;min-height:44px;display:flex;align-items:center}
 .menu-toggle>span:not(.menu-lines){
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 .menu-toggle{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;gap:0;justify-content:center}
 .contact-pill .cp-half{padding:0 11px;font-size:11.5px;gap:6px}
 .contact-pill svg{width:16px;height:16px}
}

/* Below about 345px the logo, the pill and the menu button cannot all keep
   their words. The handset and the bubble carry the meaning on their own and
   each half holds its 44px target; the aria-labels still read in full. */
@media (max-width:344px){
 .contact-pill .cp-word{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 .contact-pill .cp-half{width:44px;min-width:44px;padding:0;gap:0}
}

/* ---- The 361-429px band ----
   With the Call | Text pill in the header, the logo, the pill and the menu
   button together need 415px, which fits at 430 and at 360 (where the logo
   and the button already shrink) but not in between — the widths most phones
   actually report. Call and Text are the conversion actions, so they keep
   their words; the hamburger is understood without its label, so that is what
   goes. Same treatment the 320px block already used, applied earlier. */
@media (max-width:430px){
 .menu-toggle>span:not(.menu-lines){
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
 .menu-toggle{width:44px;min-width:44px;height:44px;min-height:44px;padding:0;gap:0;justify-content:center}
 .contact-pill .cp-half{padding:0 11px}
 .header-inner{gap:10px}
 .header-inner .logo{width:104px}
}
/* The logo steps down once more before the pill has to give up its words. */
@media (max-width:384px){
 .header-inner .logo{width:96px}
}

/* ---- Dentistry's nine, from Eddy's artboard 03 (24 Sep) ----
   The six category cards carried a list of treatments. These nine carry a
   title and an icon, so the card is squarer, the type is bigger, and the
   whole card is the link rather than the heading inside it. Four of his nine
   have icons drawn and the rest are coming, so the slot holds its space and
   the card has to look finished while it is empty. */
.service-grid-solo{row-gap:24px;grid-auto-rows:1fr}
.service-card-solo{
 display:flex;flex-direction:column;justify-content:space-between;
 min-height:0;aspect-ratio:307/265;padding:24px 26px;
 text-decoration:none;
}
.service-card-solo h2{
 font-family:var(--heading);font-weight:500;font-size:31px;line-height:1.1;
 letter-spacing:-.01em;margin:0;color:inherit;max-width:9ch;text-wrap:balance;
}
.service-icon{
 align-self:flex-end;width:74px;height:74px;flex:0 0 auto;
 /* Empty until the set arrives. It reserves the corner so the nine cards
    already sit on their final grid and the icons drop straight in. */
}
.service-card-solo:hover,.service-card-solo:focus-visible{
 background:var(--copper-gradient) padding-box,linear-gradient(#737373,#737373) border-box;
 box-shadow:0 18px 34px #2b2b2b33;
}
@media (max-width:1150px){.service-card-solo h2{font-size:27px}.service-icon{width:62px;height:62px}}
@media (max-width:899px){
 .service-card-solo{aspect-ratio:auto;min-height:118px;padding:16px 16px 14px}
 .service-card-solo h2{font-size:19px;line-height:1.12;max-width:none}
 .service-icon{width:40px;height:40px}
}
@media (max-width:560px){
 .service-card-solo{min-height:96px;padding:12px 12px 10px}
 .service-card-solo h2{font-size:15px}
 .service-icon{width:30px;height:30px}
}

/* The solution phrase under the clinical page title. Eddy's artboard 05 sets
   it beside "Orthodontics" at roughly half the weight; below 900 it stacks. */
.page-solution{
 font-family:var(--heading);font-weight:500;font-size:26px;line-height:1.25;
 letter-spacing:-.01em;color:var(--copper);margin:-8px 0 20px;max-width:34ch;
}
@media (max-width:899px){.page-solution{font-size:21px;margin:-4px 0 16px}}
@media (max-width:560px){.page-solution{font-size:18px}}

/* Eddy's artboard 04 keeps the nine Dentistry cards three across at phone
   width — "on a phone, most people can read that size text next to each
   other" (16:28). So this grid overrides the general collapse: the type
   shrinks and the grid holds. The lists on Vitality and Esthetics still
   collapse, because a card with five links in it cannot survive 103px. */
@media (max-width:899px){
 .service-grid-solo{grid-template-columns:repeat(3,1fr);column-gap:12px;row-gap:12px}
}
@media (max-width:640px){
 .service-grid-solo{grid-template-columns:repeat(3,1fr);column-gap:8px;row-gap:8px}
}
@media (max-width:430px){
 .service-card-solo{min-height:92px;padding:10px 9px 8px}
 .service-card-solo h2{font-size:13.5px;line-height:1.15;letter-spacing:0}
 .service-icon{width:26px;height:26px}
}
@media (max-width:360px){
 .service-card-solo h2{font-size:12.5px;overflow-wrap:anywhere}
 .service-card-solo{padding:9px 6px 7px;min-height:86px}
}

/* ---- Footer, to the SurfCT footer spec ----
   16px is the floor for address, phone, hours and prose at phone width. Labels
   and the legal line may sit at 12px and no lower. These used to be 14 and 15,
   which is the usual way a footer quietly becomes unreadable on the device most
   people are holding. */
.footer-hours{font-size:15px;line-height:1.5;margin:8px 0 0;color:inherit;font-variant-numeric:tabular-nums}
@media (max-width:899px){
 .footer-address,.footer-contact-links a,.footer-hours,.footer-brand p{font-size:16px}
 .footer-menu nav a{font-size:16px}
}
@media (max-width:720px){
 .footer-grid{grid-template-columns:1fr;gap:0}
 .footer-bottom{flex-direction:column;align-items:flex-start;text-align:left;gap:2px}
 .footer-bottom nav{justify-content:flex-start}
 .footer-bottom .footer-surfct{order:3;align-self:flex-start;margin-top:6px}
 /* One alignment, held. The spec is explicit that mixing centred and left
    blocks is never fine, and this used to centre the bottom bar under a
    left-aligned grid. */
 .site-footer{text-align:left}
}

/* ---- Footer height, to the spec's ceilings ----
   Six links at a mandatory 44px tap target, stacked single file, is 264px
   before anything else is on the page — so at phone width the two groups sit
   side by side rather than one after the other. Nothing is cut to achieve it;
   both groups and all six links stay, and each link keeps its full target. */
@media (max-width:720px){
 /* An earlier mobile rule turns this into a flex column, which makes any
    grid template inert, so the display has to be restated here. */
 .footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;align-items:start}
 /* Each nav was itself a two-column grid, from when the footer grid was a
    single column at phone width. Nested inside a 130px track that gives the
    links a 57px box, and "Patient Information" is 82px wide — which is
    where the 20px of horizontal scroll at 320 was coming from. One column
    per group now, which is what the side-by-side layout wanted anyway. */
 .footer-menu nav{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .footer-menu nav a{display:flex;align-items:center;white-space:normal;min-width:0;padding-block:6px}
 .footer-brand,.footer-contact{grid-column:1 / -1}
 .footer-brand .logo{width:112px}
 /* Phone and email are one row here rather than two stacked 44px blocks. */
 .footer-contact-links{flex-direction:row;flex-wrap:wrap;gap:0 24px;align-items:center}
 .footer-hours{margin-top:4px}
 .social-links{margin-top:0}
 /* The tagline is the one piece of the footer that is purely decorative, and
    at phone width it wraps to three lines. It stays on desktop, where there
    is room for it, and comes out here where 45px is nine percent of the
    height budget. */
 .footer-brand p{display:none}
 /* The credit was on its own 44px row under a 17px copyright line. Beside it
    the row is still 44px tall, so the second row goes without either element
    losing its tap target. */
 .footer-bottom{display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 16px}
 .footer-bottom>span{grid-column:1;grid-row:1}
 .footer-bottom .footer-surfct{grid-column:2;grid-row:1;margin:0;justify-self:end;align-self:center}
 .footer-bottom nav{grid-column:1 / -1;grid-row:2}
}


/* ---- Footer, rebuilt to Eddy's V26 branch-page layout (25 Sep 2026) -------
   He drew the footer as the header's echo: the same two controls a visitor
   scrolled past at the top are waiting at the bottom. Light ground, four
   columns, and the legal line on the copper strip. This supersedes the dark
   wood footer and the two-group SurfCT arrangement above; where the two
   disagree, these rules are later in the file and win. */
.site-footer{background:#fff;background-image:none;color:var(--ink);padding-top:0;padding-bottom:0}
.site-footer a{color:var(--ink)}
.site-footer a:hover{color:var(--copper-dark)}
.site-footer .logo img{filter:none}
.footer-main{padding-block:44px 36px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.05fr;gap:40px;align-items:start;padding-bottom:0}
.footer-brand{align-self:start;padding-top:6px}
.footer-brand .logo{width:190px;margin:0}
.footer-contact{min-width:0}
.footer-address{font-style:normal;font-size:16px;line-height:1.5;margin:0}
.footer-address-link{display:block;min-height:44px;padding:0;line-height:1.5;color:inherit}
.footer-address-line{display:block}
/* These need .site-footer in front of them: the dark-wood footer left behind
   a `.site-footer .social-links a{color:#fff}`, which outranks a bare
   .social-links however late it appears, and painted the icons white on the
   new white ground. */
.site-footer .footer-contact-links{display:flex;flex-direction:column;align-items:flex-start;margin-top:10px}
.site-footer .footer-contact-links a{display:inline-flex;align-items:center;min-height:44px;padding:0;
 font-size:16px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.site-footer .social-links{display:flex;flex-wrap:wrap;gap:0 10px;margin:8px 0 0 -10px}
.site-footer .social-links a{display:inline-flex;align-items:center;justify-content:center;
 min-width:44px;min-height:44px;padding:0;color:var(--ink);text-decoration:none}
.site-footer .social-links a:hover{color:var(--copper-dark);background:none}
/* The header's two controls, repeated at the same weight. */
.footer-actions{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.footer-actions .button{min-height:52px;padding:14px 26px;font-size:16px;border-radius:40px 0 40px 0;white-space:nowrap}
.footer-actions .contact-pill{min-height:52px}
.footer-actions .contact-pill .cp-half{min-height:48px;padding:0 18px;font-size:14px}
.footer-links{min-width:0}
.footer-links .footer-heading{font-family:var(--heading);font-size:16px;font-weight:600;line-height:1.4;margin:0 0 8px;padding:0;color:var(--ink)}
.footer-links nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;align-items:stretch}
.footer-links nav a{display:flex;align-items:center;min-height:44px;padding-block:4px;font-size:15px;line-height:1.35;
 border-bottom:1px solid var(--copper-light);white-space:normal;min-width:0}
/* The copper strip. His is a hairline; ours is as tall as a 44px tap target
   needs it to be, which is the one place the spec outranks the artboard. */
/* His strip is the light copper gradient with white text, which measures
   3.62:1 at 12px and fails AA. Rather than darken the copper and lose the
   strip he drew, the type goes to ink: that measures 4.85:1 against the
   darkest stop and 7.91:1 against the lightest, so it passes across the whole
   sweep. The solid copper underneath is there so a gradient that fails to
   paint still leaves the strip a colour. */
.footer-legal{background-color:#d28369;background-image:var(--copper-gradient);color:var(--ink)}
.footer-legal .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
 gap:0 18px;padding-block:2px;font-size:12px;line-height:1.5}
.footer-legal span{color:var(--ink)}
.footer-legal nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px}
.site-footer .footer-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink)}
.site-footer .footer-legal a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

@media (max-width:899px){
 .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
 .footer-brand{align-self:start}
}
@media (max-width:720px){
 .footer-main{padding-block:28px 24px}
 .footer-grid{display:grid;grid-template-columns:1fr;gap:22px;text-align:left}
 .footer-brand .logo{width:150px}
 .footer-actions{align-items:stretch}
 .footer-actions .button{width:100%}
 .footer-actions .contact-pill{width:100%}
 .footer-actions .contact-pill .cp-half{flex:1 1 0}
 .footer-legal .container{justify-content:flex-start}
}


/* ---- From Eddy's V26 boards (25 Sep 2026) --------------------------------
   The Integrating line now sits above the three cards on white rather than in
   the wood band, so the band carries the connective paragraph and the headline
   with room between them. */
.home-intro{padding:44px 0 8px;background:#fff;text-align:center}
.home-intro .life-lead{max-width:760px;margin:0 auto;font-size:20px;line-height:1.5;color:var(--ink)}
@media (max-width:720px){
 .home-intro{padding:28px 0 4px}
 .home-intro .life-lead{font-size:17px;line-height:1.45}
 /* His mobile branch board keeps only the headline on the wood: the body
    paragraph is gone at phone width, not shrunk. */
 .pillar-band .life-body{display:none}
}


/* ---- Header, rebuilt to Eddy's V26 interior boards (25 Sep 2026) ----------
   No corner logo and no hamburger. A quiet letterspaced nav row with the two
   controls on the right, and on the pages below a branch hub the branch
   lockup centred underneath over a copper rule. His words were that he wants
   to lean on the breadcrumbs rather than a persistent nav bar, so this row is
   deliberately small and unemphatic. */
.site-header .header-inner{min-height:0;padding-block:12px;gap:16px 24px;justify-content:space-between;flex-wrap:wrap}
.site-header .logo{display:none}
.site-header .menu-toggle{display:none!important}
.site-header #main-nav{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;
 margin:0;padding:0;gap:0 20px;background:none;border:0;box-shadow:none;position:static;inset:auto}
.site-header #main-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0;
 font-family:var(--heading);font-weight:400;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
 line-height:1.2;color:#6c6c6c;white-space:nowrap}
.site-header #main-nav a[aria-current],.site-header #main-nav a.branch-active{color:var(--ink);background:none}
/* The rules between the items, as he draws them. A typed pipe became a flex
   item inside the inline-flex anchor and printed on top of the next word, so
   the separator is a positioned bar in the gap instead — and a short one,
   the way his board draws it, rather than the full height of the row. */
.site-header #main-nav a{position:relative}
.site-header #main-nav a:not(:first-child)::before{content:'';position:absolute;left:-10px;top:50%;
 transform:translateY(-50%);width:1px;height:13px;background:var(--copper-light)}
.site-header .header-actions{order:2;margin-left:auto;gap:14px}

/* The lockup sits on white with the copper rule beneath, then the page's own
   wood band starts. The rule is the gradient, not a flat line. */
.branch-lockup{display:flex;justify-content:center;padding:20px 24px 18px;background:#fff;
 border:0 solid transparent;border-bottom-width:4px;
 background-image:linear-gradient(#fff,#fff),var(--copper-gradient);
 background-origin:border-box;background-clip:padding-box,border-box}
.branch-lockup a{display:block;min-height:44px}
.branch-lockup img{display:block;width:240px;height:auto}

@media (max-width:899px){
 .site-header .header-inner{flex-direction:column-reverse;align-items:center;gap:8px;padding-block:8px 10px}
 /* Two leftovers from the hamburger header had to be undone here. The
    Request Appointment button was display:none!important on phones, because
    it used to live inside the slide-down panel, and the current nav item
    carried a grey box behind it that his board does not draw. */
 .site-header .header-actions{order:0;margin:0;justify-content:center;width:100%;gap:8px;flex-wrap:nowrap}
 .site-header .header-actions>.button{display:inline-flex!important}
 /* Both controls on one row at phone width, as he draws them. */
 .site-header .header-actions .button{min-height:48px;padding:10px 14px;font-size:12.5px;letter-spacing:.02em;white-space:nowrap}
 .site-header .contact-pill{min-height:48px}
 .site-header .contact-pill .cp-half{min-height:44px;padding:0 12px;font-size:12.5px;gap:6px}
 .site-header #main-nav{justify-content:center;gap:0 14px}
 .site-header #main-nav a{font-size:12px;letter-spacing:.1em;min-height:44px}
 .site-header #main-nav a:not(:first-child)::before{left:-7px;height:11px}
 .branch-lockup{padding:14px 20px 12px}
 .branch-lockup img{width:180px}
}
@media (max-width:430px){
 .site-header .header-actions{gap:6px}
 .site-header .header-actions .button{padding:10px 10px;font-size:11.5px}
 .site-header .contact-pill .cp-half{padding:0 9px;font-size:11.5px;gap:5px}
 .site-header #main-nav{gap:0 10px}
 .site-header #main-nav a{font-size:11px;letter-spacing:.06em}
 .site-header #main-nav a:not(:first-child)::before{left:-5px;height:10px}
 .branch-lockup img{width:150px}
}


/* ---- Pillar pages, from Eddy's V26 board 05 (25 Sep 2026) -----------------
   The title moves off white and onto the wood, centred, with the solution line
   under it. Then a TREATMENT OPTIONS band, then the treatments as alternating
   rows rather than an accordion. */
body.dentistry .page-hero,body.vitality .page-hero,body.esthetics .page-hero{
 background-color:#575757;background-image:var(--wood-dark);background-repeat:repeat;
 background-size:var(--wood-scale) var(--wood-scale);background-position:center;
 color:#fff;text-align:center;border-bottom:0;padding:48px 0 44px}
body.dentistry .page-hero h1,body.vitality .page-hero h1,body.esthetics .page-hero h1{
 color:#fff;max-width:none;margin-bottom:8px}
body.dentistry .page-hero .page-solution,body.vitality .page-hero .page-solution,
body.esthetics .page-hero .page-solution{color:#fff;max-width:none;margin:0 auto 18px;opacity:.95}
body.dentistry .page-hero .lead,body.vitality .page-hero .lead,body.esthetics .page-hero .lead{
 color:#fff;max-width:760px;margin-inline:auto}
body.dentistry .page-hero .hero-actions,body.vitality .page-hero .hero-actions,
body.esthetics .page-hero .hero-actions{justify-content:center;flex-wrap:wrap}
body.dentistry .page-hero .text-link,body.vitality .page-hero .text-link,
body.esthetics .page-hero .text-link{color:#fff}

/* The band that opens the run. Dark grey, letterspaced, copper above and below,
   exactly as he draws it. */
.treatment-options-band{background:#575757;color:#fff;text-align:center;
 border-block:4px solid transparent;
 background-image:linear-gradient(#575757,#575757),var(--copper-gradient);
 background-origin:border-box;background-clip:padding-box,border-box}
.treatment-options-band p{margin:0;padding:16px 24px;font-family:var(--heading);font-weight:500;
 font-size:20px;line-height:1.3;letter-spacing:.34em;text-transform:uppercase}

.treatment-row{padding-block:56px;background:#fff}
.treatment-row-alt{background:#ececec}
.treatment-row h2{text-align:center;font-size:40px;margin-bottom:28px}
.treatment-row-inner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
/* Sides swap row to row. */
.treatment-row-alt .treatment-row-media{order:2}
.treatment-row-media{margin:0}
.treatment-row-media img{display:block;width:100%;height:auto;border-radius:4px}
/* Where the photography has not landed, the row keeps its shape rather than
   collapsing: a marked placeholder on the warm neutral, carrying the butterfly.
   Eddy reuses one stock photo across five rows on his own board, so a shared
   or absent image was always within the template's tolerance. */
.treatment-row-media.is-placeholder{aspect-ratio:3/2;border-radius:4px;
 background:var(--warm) url('/assets/butterfly-texture.webp') center/54% auto no-repeat;
 border:1px dashed var(--line)}
.treatment-row-hook{font-family:var(--heading);font-weight:600;font-size:24px;line-height:1.3;
 margin-bottom:16px;color:var(--ink)}
.treatment-row-copy p:last-child,.treatment-row-copy ul:last-child{margin-bottom:0}
.treatment-row-action{display:flex;justify-content:center;margin-top:28px}
/* His Learn More is a small, fully rounded copper pill, not the squared-corner
   primary button. */
.button-learn{min-height:46px;padding:12px 34px;border-radius:999px;font-size:15px;letter-spacing:.06em;
 text-transform:uppercase;font-weight:500}

@media (max-width:899px){
 .treatment-row{padding-block:40px}
 .treatment-row h2{font-size:30px;margin-bottom:20px}
 .treatment-row-inner{grid-template-columns:1fr;gap:24px}
 /* Stacked, the image leads every row: an alternating order that no longer
    alternates just makes the reading order unpredictable. */
 .treatment-row-alt .treatment-row-media{order:0}
 .treatment-row-hook{font-size:20px}
 .treatment-options-band p{font-size:15px;letter-spacing:.24em;padding:12px 20px}
 body.dentistry .page-hero,body.vitality .page-hero,body.esthetics .page-hero{padding:32px 0 30px}
}
@media (max-width:430px){
 .treatment-row{padding-block:32px}
 .treatment-row h2{font-size:26px}
 .treatment-options-band p{font-size:13px;letter-spacing:.18em}
}

/* The prose that follows the treatment rows re-enters the article column. The
   empty aside holds the grid without drawing the sticky rail twice. */
.article-tail{padding-block:64px 80px}
.article-tail>.article-aside{border:0;padding:0}
@media (max-width:899px){.article-tail{padding-block:40px 56px}}


/* ---- Header films, Eddy's revised set (25 Sep 2026) ----------------------
   All four arrive 1920x640 at 24fps, including the home page, which used to be
   1920x1080. They also carry the butterfly and the VIKARA wordmark burned in,
   clipped by the bottom of the frame the way his boards draw it — so the
   branch word is no longer overlaid on the film. It sits beneath, on white,
   which is where V26-01 and V26-03 put it. */
.film-caption{background:#fff;text-align:center;padding:10px 24px 18px}
.film-caption .branch-text,.film-caption .branch-wordmark{display:block;margin:0 auto;max-width:min(760px,86%);height:auto}
.film-caption .branch-wordmark{padding:0}
@media (max-width:720px){.film-caption{padding:6px 16px 12px}
 .film-caption .branch-text,.film-caption .branch-wordmark{max-width:92%}}


/* ---- b13: the small controls read as buttons (Eddy, 24 Sep) --------------
   The header pair carried a copper gradient border over a grey fill, which he
   said does not read as a button at all. Utility controls become a solid
   copper pill. The primary calls to action keep the gradient and the sheen,
   which he singled out as something he likes and wants kept. */
.site-header .header-actions .button-secondary,
.site-header .header-actions .button-secondary:hover{
 border:0;color:#fff;
 background:var(--copper);
 background-image:none;
 transition:background-color .2s}
.site-header .header-actions .button-secondary:hover{background:var(--copper-dark);background-image:none}
/* Request Appointment goes back on the gradient, Ray's call on 26 Sep, so the
   header's primary control reads the same as every other primary button on the
   site and carries the same travelling sheen. The ink goes dark with it: white
   on the light end of the gradient is 1.9:1, where the ink is 4.6:1 against the
   darkest stop and 7.7:1 against the lightest. */
.site-header .header-actions .button{
 border:0;color:var(--button-ink);
 background:var(--copper-gradient);
 background-size:220% 100%;background-position:0% 50%;
 animation:copper-drift 7s ease-in-out infinite;
 transition:box-shadow .2s}
.site-header .header-actions .button:hover{
 background:var(--copper-gradient);background-size:220% 100%;color:var(--button-ink);
 box-shadow:inset 0 1px 0 #ffffffb0,0 6px 20px #9c4e3822}
/* The Call | Text pill stays outlined — it is the quieter of the two, and
   two solid copper pills side by side would give them equal weight. */

/* ---- b26: centred is the default for section headings --------------------
   His reasoning was structural rather than decorative: the logo is a centred
   lockup, so centred text sits under it and left-ranged text fights it. Scoped
   to the headings that introduce a band, not to article prose, which still
   reads better ranged left at column width. */
.section-heading{text-align:center;margin-inline:auto}
.faq-section .container>h2,.treatments-section>h2,.combination-section h2{text-align:center}

/* ---- b24: a little life in the Patient Stories row ----------------------
   He likes the auto-scroll and wanted the row to feel less inert. A card lifts
   on hover; the video jumping to centre on play is the other half and waits
   until the content is right, which is what he asked for. */
.testimonial-card{transition:transform .25s ease,box-shadow .25s ease}
.testimonial-card:hover,.testimonial-card:focus-within{transform:translateY(-6px);box-shadow:0 18px 36px #2b2b2b24}
@media (prefers-reduced-motion:reduce){
 .testimonial-card{transition:none}
 .testimonial-card:hover,.testimonial-card:focus-within{transform:none}}

/* b11: Patient Forms sits with the calls to action, quieter than Request
   Appointment but still a control rather than a row in a list. */
.footer-actions .button-secondary{min-height:52px;padding:14px 26px;font-size:16px;
 border-radius:40px 0 40px 0;white-space:nowrap;background:#737373;color:#fff}
.footer-actions .button-secondary:hover{background:#626262;color:#fff}
@media (max-width:720px){.footer-actions .button-secondary{width:100%}}


/* ---- d4 / b05: the booking widget is out, the request takes its place -----
   Carolina stays off live booking until she is confident with GoHighLevel, so
   #consultation asks for a callback instead of offering a calendar. The
   controls here are the ones that actually work today — call, text and
   email all reach the practice. A posted form needs somewhere for submissions
   to land, which is the half of b05 still waiting on a form destination. */
.consultation-request{background:var(--warm);border:1px solid var(--line);border-radius:4px;
 padding:40px;margin-block:48px;scroll-margin-top:144px}
.consultation-request h2{margin-bottom:12px}
.consultation-request p{max-width:60ch;margin-bottom:24px}
.consultation-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.consultation-actions .contact-pill{min-height:56px}
.consultation-actions .contact-pill .cp-half{min-height:52px}
.consultation-actions .button-secondary{min-height:56px;padding:14px 26px;font-size:16px;
 border-radius:40px 0 40px 0;background:#737373;color:#fff;overflow-wrap:anywhere}
.consultation-actions .button-secondary:hover{background:#626262;color:#fff}
@media (max-width:720px){
 .consultation-request{padding:24px;margin-block:32px}
 .consultation-actions{flex-direction:column;align-items:stretch}
 .consultation-actions .contact-pill,.consultation-actions .button-secondary{width:100%}
 .consultation-actions .contact-pill .cp-half{flex:1 1 0}}


/* ---- b09: the grids hold their columns and the type gets smaller ---------
   His words were that advertisers have moved toward smaller type and a more
   editorial page, and his own mobile board proves it: the three branch cards
   sit side by side at 465px with the label only, overlapping the wood band
   exactly as they do on desktop. They were dropping to one column below 899. */
@media (max-width:899px){
 .branch-grid{grid-template-columns:repeat(3,1fr);width:91.5%;gap:14px}
 .branch-card,.branch-card:hover{min-height:0;padding:18px 14px}
 .branch-card h3{font-size:20px;margin-bottom:0;line-height:1.15}
 /* The description is what forces the stack. His board does not show it at
    phone width, which is the same call as dropping the secondary line. */
 .branch-card p,.branch-card .card-link{display:none}
}
@media (max-width:720px){
 .branch-grid{width:100%;gap:10px}
 .branch-card,.branch-card:hover{padding:14px 10px}
 .branch-card h3{font-size:15px;letter-spacing:0}
 /* His mobile home band carries the headline alone, the same way the branch
    bands do. */
 .life-hero .life-body{display:none}
}
@media (max-width:430px){
 .branch-grid{gap:8px}
 .branch-card,.branch-card:hover{padding:12px 7px}
 .branch-card h3{font-size:13px;line-height:1.2;overflow-wrap:anywhere}
}

/* The support staff go three across rather than two, as he asked. A bare 1fr
   refuses to shrink past the widest word in a name, so at 320 the third column
   pushed 8px off the page. minmax(0,1fr) lets the track shrink and the names
   wrap instead. */
@media (max-width:720px){
 .support-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
 .support-card .support-name,.support-card .support-role{overflow-wrap:anywhere}
}
@media (max-width:430px){
 .support-grid{gap:10px}
 .support-card .support-name{font-size:15px}
 .support-card .support-role{font-size:13px;line-height:1.35}
}
/* And a provider bio keeps its portrait beside the text rather than dropping
   a full-width image above it. This only holds down to 600: below that the
   portrait column leaves the bio about twenty characters a line, which reads
   far worse than the phone treatment it would replace, so the phone keeps the
   portrait-and-name strip with the bio running the full measure beneath. */
@media (min-width:600px) and (max-width:899px){
 .provider{display:grid;grid-template-columns:140px minmax(0,1fr);gap:24px;align-items:start}
 .provider-portrait{display:block;text-align:center}
 .provider-portrait img{width:140px;margin-bottom:12px}
}


/* ---- b08: the rotating callouts ----------------------------------------
   The callout is laid over the paragraph rather than replacing it, so the
   band never changes height as the two swap and nothing below it moves. */
/* The two layers fade against each other inside the paragraph, never on the
   paragraph itself: opacity applies to a whole subtree, so fading the <p>
   takes the callout down with it and the band just goes blank. */
.band-rotates{position:relative}
.band-text{display:block;transition:opacity .55s ease}
.band-rotates.is-callout .band-text{opacity:0}
.band-rotator{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 opacity:0;transition:opacity .55s ease;pointer-events:none;text-align:center;
 font-family:var(--heading);font-weight:600;font-size:clamp(20px,2.2vw,30px);line-height:1.25;
 letter-spacing:-.01em;color:inherit}
.band-rotates.is-callout .band-rotator{opacity:1}
@media (prefers-reduced-motion:reduce){
 .band-text,.band-rotator{transition:none}
 .band-rotates.is-callout .band-text{opacity:1}
 .band-rotator{display:none}}

/* ---- b30: the copper travels everywhere it appears, not only on the buttons
   Ray asked for the button's drifting sheen on every copper surface. The
   mechanism is the same one already on .button: widen the gradient box past
   the element so there is somewhere to travel, then slide the position. Where
   the copper is painted as the second layer of a padding-box/border-box pair
   — the card edges, the pill outline, the band rules — the layers are sized
   separately so the flat inner fill stays put and only the copper moves.
   Hairlines a pixel tall are deliberately left out: nothing is visible at that
   height and it is not worth handing the compositor another animated layer. */
.life-hero::after,.footer-legal{
 background-size:220% 100%;background-position:0% 50%;
 animation:copper-drift 7s ease-in-out infinite}
.branch-card,.service-card,.service-card-solo,.contact-pill,
.branch-lockup,.treatment-options-band{
 background-size:100% 100%,220% 100%;background-position:0% 50%,0% 50%;
 animation:copper-drift 7s ease-in-out infinite}
/* The hover states re-declare the background shorthand, which resets
   background-size to auto and would stop the drift dead under the pointer.
   Restated here — and on the cards the two layers swap, so the copper is the
   first layer on hover and it is that one that has to be oversized. */
.branch-card:hover,.branch-card:focus-visible,
.service-card-solo:hover,.service-card-solo:focus-visible{
 background-size:220% 100%,100% 100%;background-position:0% 50%,0% 50%}
/* b13 made the header pair a solid copper pill rather than a gradient one, so
   there is no lighter band in it to travel. It inherits the animation from the
   base .button rule, where it moves a position against a flat colour and
   paints nothing, so it is switched off rather than left running. */
.site-header .header-actions .button-secondary{animation:none}

/* ---- b31: no hover treatment on a finger
   A touch browser applies :hover on tap and leaves it applied until something
   else is tapped, so the half of the Call | Text pill you press stays lit and
   the Request Appointment button stays lifted a pixel with its wider glow.
   That is what reads as the button changing size when you tap it. Hover is a
   pointer idea, so it is now gated to pointers that can actually hover. */
@media (hover:none),(pointer:coarse){.button:hover, .button-secondary:hover{
  transform:none;box-shadow:inset 0 1px 0 #ffffff80,0 4px 14px #9c4e3812}
 .contact-pill .cp-half:hover{background:transparent;color:inherit}
 .branch-card:hover,.branch-card:focus-visible,
 .service-card-solo:hover,.service-card-solo:focus-visible{
  background:linear-gradient(#737373,#737373) padding-box,var(--copper-gradient) border-box;
  background-size:100% 100%,220% 100%;
  box-shadow:7px 9px 16px #2b2b2b33}
 /* b13's header pair carries its own hover at three-class specificity, which
    the two-class selectors above cannot reach, so it is matched exactly. */
 .site-header .header-actions .button:hover{
  background:var(--copper-gradient);background-size:220% 100%;
  box-shadow:inset 0 1px 0 #ffffff80,0 4px 14px #9c4e3812}
 .site-header .header-actions .button-secondary:hover{
  background:var(--copper);background-image:none}
 .testimonial-card:hover,.treatment-card:hover{transform:none;box-shadow:none}
 .treatment-card:hover img{transform:none}
}
/* Nothing travels for anyone who has asked motion to stop. */
@media (prefers-reduced-motion:reduce){
 .life-hero::after,.footer-legal,.branch-card,.service-card,.service-card-solo,
 .contact-pill,.branch-lockup,.treatment-options-band{animation:none}
}

/* ---- The SurfCT mark in the footer (Ray, 26 Sep) -------------------------
   Under the VIKARA lockup in the brand column rather than on the copper
   strip, stacked so it reads as a credit beneath the client's mark and not
   as a second brand beside it. Eddy's artboard has no credit at all, so this
   is ours to place; keeping it in the same column keeps his four-column
   footer intact. */
.footer-brand{display:flex;flex-direction:column;align-items:center;gap:18px}
.footer-credit{display:inline-flex;flex-direction:column;align-items:center;gap:5px;
 min-height:44px;justify-content:center;color:var(--muted);opacity:.85;transition:opacity .2s}
.footer-credit:hover,.footer-credit:focus-visible{opacity:1}
.footer-credit span{font-family:var(--heading);font-weight:500;font-size:10px;
 letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.footer-credit img{display:block;width:104px;height:auto}
@media(max-width:720px){
 .footer-brand{gap:14px}
 .footer-credit img{width:92px}
}

/* ---- The branch intro and the pillar hero, matched to Eddy's V26 boards
   (Ray, 26 Sep, after a page-by-page read of the 17-page set) --------------
   Three things his artwork does that the build did not. The white intro above
   the cards is centred and carries only the opening sentence — the rest of the
   paragraph is the wood band's, which is why the same words were appearing
   twice on every branch page. There is no button there and no copper rule down
   the left edge. And the pillar hero is two columns inside the wood: his
   portrait of Dr Julio with a name card over its foot on the left, the
   solution line, the lead and a bold closing line on the right. */
.hub-hero{text-align:center}
.hub-hero:before{display:none}
.hub-hero .hub-tagline,.hub-hero .lead{margin-inline:auto}
.hub-hero .lead{max-width:760px;margin-bottom:0}

.pillar-hero .container{text-align:center}
.pillar-hero h1{margin-bottom:28px}
.pillar-hero-inner{display:grid;grid-template-columns:33.1% minmax(0,1fr);gap:44px;
 align-items:center;text-align:left;margin-bottom:32px}
/* Measured off his board: the portrait is 357 of his 1080, a third of the page,
   where ours was 300 and read small beside it. The solution line is close to
   heading weight on his artwork rather than the lead-sized line we had. */
.pillar-hero-copy .page-solution{font-size:34px;line-height:1.2;font-weight:600;
 letter-spacing:-.02em;margin-bottom:18px;max-width:none}
/* Our lead runs shorter than the lorem on his board, so the copy column ends
   well above the portrait. Centring the pair shares the difference instead of
   leaving a slab of bare wood under the text. */
.pillar-hero-portrait{margin:0;position:relative;align-self:start}
.pillar-hero-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
 border:3px solid #fff;box-shadow:0 10px 26px #1c140f40}
.pillar-hero-portrait figcaption{position:absolute;left:3px;right:3px;bottom:3px;
 padding:10px 14px;background:#2b2b2bb8;backdrop-filter:blur(3px);color:#fff;text-align:left}
.pillar-hero-portrait figcaption strong{display:block;font-family:var(--heading);font-weight:600;
 font-size:17px;line-height:1.25}
.pillar-hero-portrait figcaption span{display:block;font-size:14px;line-height:1.35;opacity:.92}
.pillar-hero-copy .page-solution{margin-top:0}
.pillar-hero-pull{font-family:var(--heading);font-weight:600;font-size:22px;line-height:1.3;
 margin:24px 0 0;text-wrap:balance}
.pillar-hero .hero-actions{justify-content:center}
@media(max-width:899px){
 .pillar-hero-inner{grid-template-columns:34% minmax(0,1fr);gap:28px}
 .pillar-hero-copy .page-solution{font-size:26px}
 .pillar-hero-pull{font-size:19px}
}
@media(max-width:720px){
 .pillar-hero-inner{grid-template-columns:1fr;gap:24px;justify-items:center;text-align:center}
 .pillar-hero-portrait{max-width:260px;width:100%}
 .pillar-hero-copy .page-solution{font-size:23px}
 .pillar-hero-portrait figcaption{text-align:center}
 .pillar-hero-copy{text-align:center}
 .pillar-hero .hero-actions{align-items:center}
}