/*! file: homepage-icons.css */
/* Font Awesome Free 6.5.2 by @fontawesome — https://fontawesome.com
 * Copyright 2024 Fonticons, Inc. Icons: CC BY 4.0; Fonts: SIL OFL 1.1; Code: MIT.
 * https://fontawesome.com/license/free — homepage-only glyph subsets. */
@font-face{font-family:'Iconic Icons';font-style:normal;font-weight:900;font-display:swap;src:url('assets/webfonts/home-solid.woff2') format('woff2')}
@font-face{font-family:'Iconic Icons';font-style:normal;font-weight:400;font-display:swap;src:url('assets/webfonts/home-regular.woff2') format('woff2')}
.fa-solid,.fa-regular{font-family:'Iconic Icons';font-style:normal;display:inline-block;line-height:1;text-rendering:auto;-webkit-font-smoothing:antialiased}
.fa-solid{font-weight:900}.fa-regular{font-weight:400}
.fa-heart:before{content:'\f004'}.fa-tooth:before{content:'\f5c9'}.fa-comment:before{content:'\f075'}.fa-star:before{content:'\f005'}.fa-face-smile:before{content:'\f118'}.fa-crown:before{content:'\f521'}.fa-phone:before{content:'\f095'}.fa-location-dot:before{content:'\f3c5'}.fa-calendar:before{content:'\f133'}

/*! file: homepage-titan.css */
@font-face{font-family:Montserrat;src:url('assets/montserrat-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('assets/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* Iconic identity with Titan-inspired framing and rhythm. Homepage only. */
:root{--ink:#232323;--cream:#fbf9f3;--gold:#f6e4ad;--accent:#ffad43;--muted:#605d55;--line:#d9ccb3;--gutter:clamp(24px,5.6vw,88px);--frame:24px;--max:1360px;--radius:26px;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.6 Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--ink)}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-family:Montserrat,Arial,sans-serif;font-weight:600;letter-spacing:-.045em;line-height:1.12}
em{font-style:normal}h2{font-size:clamp(36px,4.4vw,64px)}h3{font-size:25px}h4{font-size:24px}p{color:var(--muted)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;max-width:100%}
button,a,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}a,button{scroll-margin-bottom:120px}
:focus-visible{outline:3px solid #9c5b09;outline-offset:5px}.dark :focus-visible{outline-color:var(--gold)}[hidden]{display:none!important}
.shell{width:calc(100% - var(--gutter)*2);max-width:var(--max);margin-inline:auto}.section{padding-block:100px}
.dark{background:var(--ink);color:var(--cream)}.dark p{color:#dad7cf}
.eyebrow,.small-label{font-size:16px;letter-spacing:.07em;line-height:1.5}.eyebrow{margin-bottom:24px}.small-label{display:block}.dark .eyebrow,.dark .small-label{color:var(--gold)}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:56px;margin-bottom:48px}.section-heading__aside{max-width:390px;padding-bottom:4px}.section-heading__aside .text-link{margin-top:16px}
.text-link{display:inline-flex;align-items:center;gap:20px;min-height:44px;border-bottom:1px solid currentColor;font-weight:500}.text-link:hover{border-color:transparent}
.button{display:inline-flex;align-items:center;justify-content:center;gap:25px;min-height:54px;padding:13px 25px;border:1px solid transparent;border-radius:100px;background:var(--ink);color:var(--cream);font-weight:500;line-height:1.5;transition:background .2s,transform .2s}.button:hover{transform:translateY(-2px);background:#3f3c34}
.button--light{background:var(--gold);color:var(--ink)}.button--light:hover{background:#ffedbc}.button--outline{border-color:#d0c5aa;background:transparent;color:var(--cream)}.button--outline:hover{background:#ffffff0d}
.button span,.text-link span{font-size:23px;font-weight:400;line-height:1}.button--small{background:var(--accent);color:var(--ink)}.button--small:hover{background:#ffc46c}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:32px}
.skip-link{position:fixed;z-index:200;top:12px;left:20px;padding:12px 20px;background:var(--cream);transform:translateY(-150%)}.skip-link:focus{transform:none}
.framed{margin-inline:var(--frame);border-radius:var(--radius);position:relative}.framed:before{content:"";position:absolute;inset:22px;border:1px solid #c7baa0;border-radius:calc(var(--radius) - 4px);pointer-events:none;z-index:2}

/* Floating navigation keeps the original, unaltered logo. */
.site-header{position:fixed;inset:16px var(--frame) auto;z-index:70;height:80px;padding:6px 18px 6px 24px;display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:26px;background:rgba(251,249,243,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .3s,box-shadow .3s}.site-header.is-scrolled{box-shadow:0 8px 30px #2323230d}
.brand{display:block;flex:none;width:113px;background:var(--cream)}.brand img{width:100%;height:auto}
.site-header nav{display:flex;align-items:center;gap:36px}.site-header nav>a{display:inline-flex;align-items:center;min-height:44px}.site-header nav>a:not(.button):hover{text-decoration:underline;text-underline-offset:6px}
.menu-toggle{display:none;width:48px;height:48px;border:0;background:var(--accent);border-radius:50%;padding:14px}.menu-toggle span{display:block;width:20px;height:1px;background:var(--ink);margin:6px 0;transition:transform .25s}

/* Real reception photography blends into cream; the photograph itself is unchanged. */
.hero{margin-top:112px;min-height:640px;height:calc(100svh - 136px);max-height:860px;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:60px clamp(46px,5.4vw,84px) 120px;background:var(--cream);border:1px solid var(--line)}
.hero__photo{position:absolute;inset:0 0 0 auto;width:83%;overflow:hidden}.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:56% center}.hero__photo:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--cream) 0%,#fbf9f3f5 14%,#fbf9f3cc 28%,#fbf9f380 42%,#fbf9f300 63%),linear-gradient(0deg,#fbf9f373,transparent 24%)}
.hero__copy{position:relative;z-index:3;width:57%;max-width:710px;padding-block:24px}.hero .eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:26px;color:var(--cream)}.status-dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.hero__photo{-webkit-mask-image:linear-gradient(90deg,transparent,#000 3px);mask-image:linear-gradient(90deg,transparent,#000 3px)}
.hero h1{font-size:clamp(46px,4.85vw,74px);letter-spacing:-.05em;line-height:1.08;color:var(--ink)}.hero__lede{font-size:clamp(21px,1.9vw,28px);line-height:1.4;margin-top:24px;color:var(--ink)}.hero__description{max-width:410px;margin-top:18px;font-size:18px;line-height:1.6;color:#35332e}.hero .actions{margin-top:32px;gap:16px}.hero .button--light{background:var(--accent)}.hero .button--light:hover{background:#ffc46c}.hero .button--outline{background:#fbf9f3b8;border-color:#736a5e;color:var(--ink)}.hero .button--outline:hover{background:var(--cream)}
.trust-strip{display:flex;gap:12px;flex-wrap:wrap;position:absolute;left:clamp(46px,5.4vw,84px);bottom:48px;z-index:3}.trust-strip>span{border:1px solid #ac9675;border-radius:99px;padding:8px 19px;font-size:16px;line-height:1.5;background:#fbf9f3d9;color:#4c4131}
.quick-contact{padding:36px 0 0}.contact-strip{display:grid;grid-template-columns:1.1fr 1fr 1.1fr 1.35fr;padding-block:16px 34px;border-bottom:1px solid var(--line)}.contact-strip>a,.contact-strip>div{min-width:0;padding:8px 22px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px}.contact-strip>:first-child{padding-left:0;border-left:0}.contact-strip>:last-child{padding-right:0}.contact-strip .small-label{color:var(--muted);letter-spacing:0}.contact-strip strong{font-size:16px;font-weight:500;overflow-wrap:anywhere}.contact-strip a:hover strong{text-decoration:underline;text-underline-offset:4px}.contact-strip a>span:last-child{color:var(--muted)}

/* Outlined six-card grid becomes an edge-to-edge mobile rail. */
.rail-controls{display:none;justify-content:space-between;align-items:center;margin-bottom:20px}.rail-controls>div{display:flex;gap:8px}.round-button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:23px}.round-button:hover{background:var(--gold)}
.card-rail{width:calc(100% - var(--gutter)*2);max-width:var(--max);margin-inline:auto}#services-rail{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-card{position:relative;display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:18px;min-width:0;transition:background .25s,border-color .25s}.service-card:hover{background:#f6e4ad22;border-color:#ae8c52}.service-card__top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);margin-bottom:28px}.service-card__top i{font-size:23px;color:#655335}.service-card h3{font-size:clamp(21px,2vw,29px);line-height:1.16;margin-bottom:18px}.service-card p{margin-bottom:24px;font-size:16px;line-height:1.6}.service-card>a{display:flex;justify-content:space-between;align-items:center;min-height:44px;gap:16px;margin-top:auto;font-weight:500}.service-card>a span{font-size:23px}.service-card>a:after{content:"";position:absolute;inset:0;border-radius:inherit}.service-card:focus-within{outline:2px solid #9c5b09;outline-offset:3px}
.urgent-help{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-top:34px;padding-top:28px;border-top:1px solid var(--line)}.urgent-help>div{display:flex;gap:18px;align-items:center}.urgent-help strong{display:block;color:var(--ink);font-weight:500}.urgent-help>a{white-space:nowrap;min-height:44px;display:flex;align-items:center;gap:18px}.urgent-help i{font-size:20px}
.light-panel{color:var(--ink);background:#f3ede1}.light-panel p{color:#514b40}.light-panel .eyebrow{color:#665434}.light-panel .button--light{background:var(--ink);color:var(--cream)}.light-panel .button--light:hover{background:#454034}
.feature{padding:70px clamp(46px,5.4vw,84px);background:radial-gradient(ellipse at 90% 10%,#f6e4ad99,transparent 65%),linear-gradient(135deg,#fffaf0,#f1e8d3);border:1px solid var(--line)}.feature h2{font-size:clamp(42px,5.4vw,78px);max-width:1050px}.feature__description{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:32px}.section-lede{font-size:23px;line-height:1.4;color:var(--ink)!important}.feature__description>p:last-child{max-width:630px}
.feature__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:0;list-style:none;margin:44px 0 0}.feature__steps li{padding:26px;border:1px solid #c4b392;border-radius:16px;background:#fffdf78c;transition:transform .4s,background .4s}.feature__steps li:hover{background:#fffdf7;transform:translateY(-4px)}.feature__steps li>span{display:block;color:#675536;font-size:16px;margin-bottom:32px}.feature__steps h3{font-size:25px;margin-bottom:14px}.feature .fine-print{margin-top:24px;font-size:16px;max-width:900px;color:#514b40}

.experience{padding-bottom:56px}.experience__frame{border:1px solid var(--line);border-radius:26px;padding:16px;display:grid;grid-template-columns:1.45fr 1fr;gap:16px}.experience__photo{min-width:0;position:relative;border-radius:15px;overflow:hidden}.experience__photo img{width:100%;height:100%;object-fit:cover;object-position:48% center}.experience__photo figcaption{position:absolute;left:20px;right:20px;bottom:20px;border:1px solid #fff7;background:#232323c7;color:#fff;border-radius:12px;padding:14px 20px}
.why-grid{display:grid;gap:12px}.why-grid article{border:1px solid var(--line);padding:24px;border-radius:14px;background:#ffffff30}.why-grid article>span{font-size:16px;color:var(--muted)}.why-grid h3{font-size:24px;line-height:1.2;margin:12px 0}.why-grid p{font-size:16px}
.doctors{padding-top:56px}.doctor-rail{display:grid;grid-template-columns:1fr 1fr;gap:24px}.doctor-card{position:relative;overflow:hidden;border-radius:22px;min-width:0;aspect-ratio:.92;background:var(--ink);border:10px solid var(--cream);outline:1px solid var(--line)}.doctor-card img{width:100%;height:100%;object-fit:cover;object-position:center 27%}.doctor-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#111 0%,#171717d9 24%,#17171730 60%,transparent 77%);pointer-events:none}.doctor-card>div{position:absolute;z-index:1;inset:auto 28px 26px;color:#fff}.doctor-card h3{font-size:clamp(24px,2.2vw,33px);margin:10px 0}.doctor-card .small-label{color:var(--gold);letter-spacing:0}.doctor-card p:not(.small-label){color:#eee;max-width:370px;font-size:16px}.doctor-card .button{margin-top:18px;background:transparent;color:#fff;border:0;border-bottom:1px solid var(--accent);border-radius:0;padding:6px 0;min-height:44px;gap:24px}.doctor-card .button:hover{transform:none;background:transparent;border-color:white}

/* Short, controllable photo story. Essential content works without motion. */
.journey{position:relative;margin-block:0 36px}.journey-ready{height:185svh;min-height:1200px}.journey-sticky{padding:64px clamp(46px,5.4vw,84px);display:grid;grid-template-columns:1fr 1.13fr;grid-template-rows:1fr auto;gap:28px 56px;min-height:690px;background:radial-gradient(ellipse at 0 100%,#f6e4ad66,transparent 70%),#f3ede1;border:1px solid var(--line)}.journey-ready .journey-sticky{position:sticky;top:112px;height:calc(100svh - 136px);max-height:850px;min-height:640px}.journey-sticky:before{border-color:#cabca2}
.journey__copy{grid-column:1;position:relative;z-index:3}.journey__copy h2{font-size:clamp(36px,3.9vw,58px);margin-bottom:24px}.journey__copy>p:not(.eyebrow){max-width:420px}.journey__copy>.button{margin-top:26px}
.journey__photos{grid-column:2;grid-row:1/3;position:relative;border:1px solid #9b8d73;border-radius:22px;overflow:hidden;min-height:420px;background:#39352d}.journey__photos img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:0;transform:scale(1.03);transition:opacity .6s ease,transform .9s ease;object-position:50% center}.journey__photos img:first-child{object-position:56% center}.journey__photos img.is-active{opacity:1;transform:scale(1)}.journey__photo-label{position:absolute;left:18px;right:18px;bottom:18px;border:1px solid #ffffff66;background:#232323b8;color:#fff;border-radius:12px;padding:12px 18px;z-index:1;font-size:16px}
.journey__control{grid-column:1;min-width:0;position:relative;z-index:3}.journey__tabs{display:flex;gap:6px;position:relative;padding-top:16px}.journey__tabs:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#c4b699}.journey__tabs:after{content:"";position:absolute;top:0;left:0;height:2px;width:calc(var(--journey-progress,0)*100%);background:#8e6b30}.journey__tabs button{background:#fffdf766;border:1px solid #b0a48d;border-radius:10px;padding:10px 12px;min-height:50px;flex:1;font-size:16px;line-height:1.3}.journey__tabs button.is-active{background:var(--ink);color:var(--cream);border-color:var(--ink)}.journey__panels{min-height:100px;padding-top:20px}.journey__panels p{font-size:16px;max-width:440px}.journey:not(.journey-ready) .journey__panels>div{padding-bottom:16px}.journey:not(.journey-ready) .journey__tabs{display:none}

.split-layout{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(36px,6vw,100px);align-items:center}.faq .split-layout{align-items:start}.faq h2{margin-bottom:24px}.faq .text-link{margin-top:18px}.faq__list{border-top:1px solid var(--line)}.faq__list details{border-bottom:1px solid var(--line)}.faq__list summary{display:flex;align-items:center;justify-content:space-between;list-style:none;gap:24px;cursor:pointer;min-height:72px;padding-block:22px;font-size:16px;font-weight:500}.faq__list summary::-webkit-details-marker{display:none}.faq__list summary>span{font-size:26px;font-weight:300;line-height:1;flex:none;transition:transform .2s}.faq__list details[open] summary>span{transform:rotate(45deg)}.faq__list details p{font-size:16px;padding:0 22px 26px 0}
.visit{padding-top:40px}.visit>.split-layout{padding:42px;border:1px solid var(--line);border-radius:26px;background:#f4efdf55;gap:60px}.visit h2{font-size:clamp(34px,3.7vw,54px);margin-bottom:24px}.visit__contact{display:flex;flex-direction:column;gap:8px;margin-block:24px}.visit__contact a{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-bottom:1px solid var(--line);overflow-wrap:anywhere;min-height:44px}.visit__contact a span{flex:none;font-size:20px}.visit__hours{font-size:16px;line-height:1.9}.visit__photo{align-self:stretch;position:relative;min-height:550px;max-height:720px;border-radius:17px;overflow:hidden}.visit__photo img{width:100%;height:100%;object-fit:cover;object-position:center 43%}.visit__photo figcaption{position:absolute;inset:auto 20px 20px;border-radius:12px;background:var(--cream);color:var(--ink);padding:14px 20px;text-align:center;font-size:16px}
.network{margin-top:74px}.network__heading{margin-bottom:30px;max-width:700px}.network__heading h3{font-size:30px;margin:14px 0}.network__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.network__grid article{display:flex;flex-direction:column;align-items:stretch;gap:8px;border:1px solid var(--line);border-radius:18px;padding:25px;min-width:0}.network__grid article:first-child{background:#f6e4ad30;border-color:#b49b6a}.network__grid h4{margin-block:12px}.network__grid a{font-size:16px;overflow-wrap:anywhere;min-height:44px;display:flex;align-items:center}.network__grid .text-link{align-self:start;margin-top:auto}

.footer{margin-bottom:24px;padding:0 32px 110px;background:linear-gradient(145deg,#f4eee1,#f8efd9);border:1px solid var(--line)}.footer:before{display:none}.footer__intro{display:flex;align-items:center;gap:44px;padding-bottom:32px}.brand--footer{width:220px;padding:20px 36px;background:var(--gold);border-radius:0 0 22px 22px;align-self:flex-start;flex:none}.footer__statement{font-family:Montserrat,Arial,sans-serif;font-size:clamp(29px,3.5vw,54px);font-weight:600;letter-spacing:-.05em;line-height:1.12;color:var(--ink)!important;margin-right:auto}.footer__intro>.button{display:none}
.footer__primary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid #756d5f;border-radius:12px 12px 0 0;overflow:hidden}.footer__primary a{min-height:72px;display:flex;align-items:center;justify-content:center;border-left:1px solid #756d5f;padding:16px}.footer__primary a:first-child{border-left:0}.footer__primary a:hover{background:#ffffff09}
.footer__grid{display:grid;grid-template-columns:.9fr 1fr 1fr 1.25fr;gap:26px;padding:32px;border:1px solid #756d5f;border-top:0}.footer__grid>div,.footer__grid nav{display:flex;flex-direction:column;align-items:flex-start;min-width:0;gap:4px}.footer__grid h2{font-family:Inter,Arial,sans-serif;font-size:16px;font-weight:600;letter-spacing:0;line-height:1.5;margin-bottom:12px}.footer__grid p,.footer__grid a{font-size:16px;color:#d7d3c9;overflow-wrap:anywhere}.footer__grid a{display:flex;align-items:center;min-height:44px}.footer__grid a:hover{text-decoration:underline;text-underline-offset:5px}.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:16px;padding:22px 28px;border:1px solid #756d5f;border-top:0;border-radius:0 0 12px 12px}.footer__bottom p{color:#d7d3c9}.footer__bottom a{display:flex;align-items:center;min-height:44px}
.footer__grid p,.footer__grid a,.footer__bottom p{color:#514b40}.footer__primary,.footer__primary a,.footer__grid,.footer__bottom{border-color:#bdac8e}.footer__primary a:hover{background:#fff9e9}

.quick-actions{position:fixed;z-index:80;right:max(18px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));border:1px solid #d7cbb6;border-radius:22px;padding:6px;background:rgba(251,249,243,.95);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 6px 26px #0002;color:var(--ink)}.quick-actions__items{display:flex;gap:2px}.quick-actions__items>a,.quick-actions__items>button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-width:48px;min-height:62px;border:0;border-radius:15px;background:transparent;font-size:16px;line-height:1.3;padding:8px;transition:min-height .18s,padding .18s}.quick-actions__items i{font-size:17px}.quick-actions__items>*>span{max-height:24px;opacity:1;overflow:hidden;transition:max-height .18s,opacity .18s}.quick-actions__items>a:hover,.quick-actions__items>button:hover{background:var(--gold)}.quick-actions__items>[data-quick-action=book]{background:var(--ink);color:var(--cream)}.quick-actions.is-collapsed .quick-actions__items>a,.quick-actions.is-collapsed .quick-actions__items>button{width:48px;min-width:48px;min-height:48px;gap:0;padding:8px}.quick-actions.is-collapsed .quick-actions__items>*>span{position:absolute;width:1px;height:1px;clip-path:inset(50%);max-height:1px;opacity:0}
dialog{width:min(460px,calc(100vw - 40px));margin:auto;border:1px solid var(--line);border-radius:22px;background:var(--cream);color:var(--ink);padding:40px;box-shadow:0 20px 70px #0004}dialog::backdrop{background:#171715a6;backdrop-filter:blur(4px)}dialog h2{font-size:30px;margin-bottom:20px}dialog .button{margin-top:24px}dialog .text-link{margin-top:12px}.dialog-close{position:absolute;right:9px;top:9px;border:0;background:transparent;width:44px;height:44px;font-size:28px}
.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1)}.js-motion .reveal:not(.is-visible){opacity:0;transform:translateY(24px)}

.experience__frame{grid-template-columns:1.7fr 1fr}
.why-grid article{padding:20px}
.why-grid h3{font-size:21px;margin:0 0 12px}
.experience__photo img{object-fit:contain;background:#e9e2d5}
@media(min-width:1700px){.hero__photo{width:80%}.hero__copy{max-width:790px}.hero h1{font-size:84px}.hero__description{max-width:500px}}
@media(max-width:1100px){
  .site-header nav{gap:22px}.hero{padding-left:48px;padding-right:48px}.hero__copy{width:59%}.hero h1{font-size:54px}.hero .actions{gap:12px}.hero .button{padding-inline:20px}.trust-strip{left:48px;max-width:80%}
  .contact-strip{grid-template-columns:1fr 1fr}.contact-strip>:nth-child(3){border-left:0;padding-left:0}.contact-strip>:nth-child(n+3){margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
  .section{padding-block:76px}.service-card{padding:24px}.feature{padding:62px 48px}.feature__description{gap:35px}.feature__steps{gap:14px}.feature__steps li{padding:22px}.feature__steps h3{font-size:23px}
  .experience__frame{grid-template-columns:1fr}.experience__photo{aspect-ratio:1.7}.why-grid{grid-template-columns:repeat(3,1fr)}.why-grid article{padding:20px}.why-grid h3{font-size:21px}.doctor-card{aspect-ratio:.72}.doctor-card>div{inset:auto 24px 24px}
  .journey-sticky{padding:54px 46px;gap:26px 30px}.journey__tabs button{padding:10px 7px}.journey__photos{min-height:400px}.journey__copy h2{font-size:42px}
  .visit>.split-layout{padding:28px;gap:30px}.network__grid article{padding:22px}.footer__intro{gap:30px}.brand--footer{width:185px}.footer__grid{padding:26px;gap:24px}
}
@media(max-width:950px){
  .hero{max-height:760px}.hero__copy{width:67%}.hero h1{font-size:44px}.hero__photo{width:100%}.hero__photo:after{background:linear-gradient(90deg,#fbf9f3fa 0%,#fbf9f3eb 30%,#fbf9f380 52%,transparent 78%),linear-gradient(0deg,#fbf9f3a6,transparent 35%)}.hero__description{max-width:340px}.trust-strip>span{background:#fbf9f3ed}
  .menu-toggle{display:block}.site-header nav{display:none;position:absolute;top:90px;left:0;right:0;flex-direction:column;align-items:stretch;padding:24px 30px;border:1px solid var(--line);border-radius:22px;background:var(--cream);box-shadow:0 16px 40px #0002;gap:0}.site-header.is-open nav{display:flex}.site-header nav>a:not(.button){font-family:Montserrat,Arial,sans-serif;font-size:25px;padding:15px 0;border-bottom:1px solid var(--line)}.site-header nav>.button{margin-top:20px}.site-header.is-open .menu-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}.site-header.is-open .menu-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  #services-rail{grid-template-columns:repeat(2,minmax(0,1fr))}.journey__copy h2{font-size:36px}.journey__tabs{flex-direction:column}.journey__tabs button{min-height:44px}.journey__panels{min-height:110px}.journey-ready .journey-sticky{min-height:700px}
  .network__grid{gap:12px}.network__grid article{padding:20px}.network__heading h3{font-size:27px}.footer__grid{grid-template-columns:1fr 1fr}.footer__grid>div:last-child{grid-column:1/-1}.footer__grid>div:last-child p{max-width:620px}
}
@media(max-width:700px){
  :root{--frame:12px;--gutter:24px;--radius:22px}html{scroll-padding-top:96px}.site-header{inset:10px var(--frame) auto;height:70px;padding:5px 12px 5px 19px;border-radius:22px}.brand{width:91px}.site-header nav{top:80px;padding:22px}.site-header nav>a:not(.button){font-size:24px;padding:12px 0}.framed:before{inset:12px;border-radius:14px}
  .hero{margin-top:92px;min-height:760px;max-height:none;height:auto;padding:44px 24px 370px;display:flex;justify-content:flex-start;overflow:hidden}.hero__copy{width:100%;max-width:none;padding:0;order:0}.hero .eyebrow{font-size:16px;margin-bottom:20px}.hero h1{font-size:clamp(36px,9.5vw,55px);letter-spacing:-.055em;line-height:1.09}.hero__lede{font-size:22px;margin-top:22px}.hero__description{font-size:16px;line-height:1.6;max-width:470px;margin-top:16px}
  .hero .actions{gap:12px;margin-top:26px}.hero .button{padding:11px 16px;gap:12px;min-height:50px;font-size:16px}.hero .button span{font-size:21px}.hero .button--outline{border:0;border-bottom:1px solid #c7baa0;border-radius:0;padding-inline:0;margin-left:2px}
  .hero__photo{position:absolute;inset:auto 0 0;width:100%;height:420px;margin:0;border-radius:0;overflow:hidden}.hero__photo img{object-fit:cover;object-position:57% center}.hero__photo:after{background:linear-gradient(180deg,var(--cream) 0%,#fbf9f3e6 10%,#fbf9f360 23%,transparent 38%),linear-gradient(0deg,#fbf9f3d9,transparent 35%)}.trust-strip{position:absolute;inset:auto 24px 26px;max-width:none;gap:8px;margin:0;justify-content:flex-start}.trust-strip>span{font-size:16px;padding:7px 12px}
  .quick-contact{padding-top:18px}.contact-strip{width:calc(100% - 48px);padding-block:8px 24px;column-gap:18px}.contact-strip>a,.contact-strip>div{padding:8px 0;border-left:0;gap:8px}.contact-strip>:nth-child(2){padding-left:18px;border-left:1px solid var(--line)}.contact-strip>:nth-child(n+3){grid-column:1/-1;margin-top:14px;padding-top:16px}.contact-strip strong{font-size:16px}.contact-strip a>span:last-child{font-size:16px}
  .section{padding-block:62px}.section-heading{display:block;margin-bottom:32px}.section-heading__aside{max-width:470px;margin-top:24px}.section h2{font-size:36px}.eyebrow{margin-bottom:18px}
  .rail-controls{display:flex;font-size:16px}.card-rail{width:100%;max-width:none;display:flex;overflow-x:auto;gap:14px;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);padding:3px var(--gutter) 14px;scrollbar-width:thin;scrollbar-color:#a99675 transparent;-webkit-overflow-scrolling:touch}#services-rail{display:flex}.service-card{flex:0 0 83vw;max-width:380px;min-height:357px;scroll-snap-align:start;padding:25px}.service-card h3{font-size:28px}.service-card__top{margin-bottom:28px}.urgent-help{display:block;margin-top:24px;padding-top:24px}.urgent-help>div{align-items:flex-start;gap:16px}.urgent-help i{padding-top:5px}.urgent-help>a{margin-top:12px;padding-left:36px}
  .feature{padding:44px 24px}.feature h2{font-size:38px}.feature__description{display:block;margin-top:26px}.feature__description .section-lede{font-size:21px;margin-bottom:20px}.feature__description .section-lede br{display:none}.feature__steps{grid-template-columns:1fr;margin-top:28px;gap:12px}.feature__steps li{padding:22px}.feature__steps li>span{margin-bottom:16px}.feature__steps h3{font-size:25px}.feature .actions{gap:20px}.feature .fine-print{line-height:1.6;margin-top:24px}
  .experience{padding-bottom:28px}.experience__frame{width:calc(100% - var(--frame)*2);padding:12px;grid-template-columns:1fr;gap:12px;border-radius:22px}.experience__photo{height:auto;aspect-ratio:auto;border-radius:12px}.experience__photo img{height:auto;object-position:center;object-fit:contain}.experience__photo figcaption{position:static;font-size:16px;padding:16px;background:var(--ink);border:0;border-radius:0}.why-grid{grid-template-columns:1fr;gap:12px}.why-grid article{padding:22px}.why-grid h3{font-size:24px}
  .doctors{padding-top:34px}.doctor-rail{gap:16px;padding-top:4px;padding-bottom:14px}.doctor-card{flex:0 0 83vw;max-width:460px;aspect-ratio:.62;min-height:500px;border:7px solid var(--cream);scroll-snap-align:start}.doctor-card img{object-position:center 25%}.doctor-card>div{inset:auto 20px 20px}.doctor-card h3{font-size:25px}.doctor-card .small-label{font-size:16px}.doctor-card .button{margin-top:12px}.doctor-card:after{background:linear-gradient(0deg,#111 0%,#171717e8 32%,#17171744 61%,transparent 77%)}
  .journey-ready{height:175svh;min-height:1200px}.journey-sticky,.journey-ready .journey-sticky{padding:32px 24px;grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:22px;max-height:none;min-height:0;height:auto;top:94px}.journey__copy h2{font-size:34px;margin-bottom:16px}.journey__copy .eyebrow{margin-bottom:14px}.journey__copy>p:not(.eyebrow){font-size:16px;max-width:450px}.journey__copy>.button{margin-top:18px;min-height:48px}.journey__photos{grid-column:1;grid-row:2;min-height:0;height:220px;border-radius:14px}.journey__photo-label{inset:auto 12px 12px;font-size:16px;padding:9px 12px}.journey__control{grid-column:1;grid-row:3}.journey__tabs{flex-direction:row;padding-top:12px;gap:6px}.journey__tabs button{font-size:16px;padding:10px 7px;min-height:54px}.journey__panels{min-height:94px;padding-top:16px}.journey__panels p{font-size:16px}
  .split-layout{grid-template-columns:1fr;gap:32px}.faq{padding-top:52px}.faq .text-link{margin-top:14px}.faq__list summary{padding-block:20px;min-height:72px}.faq__list details p{padding-right:8px}
  .visit{padding-top:0}.visit>.split-layout{width:calc(100% - var(--frame)*2);padding:26px 22px;gap:30px;border-radius:22px}.visit h2{font-size:34px}.visit .actions{gap:22px}.visit__photo{height:420px;min-height:0;max-height:none}.visit__photo img{object-position:center 40%}.visit__photo figcaption{inset:auto 12px 12px;padding:12px;font-size:16px}.visit__contact{font-size:16px}.visit__hours{font-size:16px}
  .network{margin-top:50px}.network__heading h3{font-size:28px;line-height:1.15}.network__grid{display:flex;overflow-x:auto;gap:14px;margin-inline:calc(-1*var(--gutter));padding:2px var(--gutter) 14px;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scrollbar-width:thin;scrollbar-color:#a99675 transparent}.network__grid article{flex:0 0 83vw;max-width:360px;padding:24px;scroll-snap-align:start}
  .footer{padding:0 14px 114px;margin-bottom:12px}.footer__intro{display:block;padding-bottom:28px}.brand--footer{width:166px;padding:16px 28px;margin-left:10px;border-radius:0 0 20px 20px}.footer__statement{font-size:38px;max-width:360px;margin:28px 10px 0;line-height:1.15}.footer__primary{grid-template-columns:1fr 1fr}.footer__primary a{min-height:65px;padding:12px 8px;font-size:16px}.footer__primary a:nth-child(3){border-left:0}.footer__primary a:nth-child(n+3){border-top:1px solid #756d5f}.footer__grid{padding:25px 18px;gap:24px 16px;grid-template-columns:1fr 1fr}.footer__grid>div:first-child{grid-column:1/-1}.footer__grid h2{font-size:16px}.footer__grid a,.footer__grid p{font-size:16px;line-height:1.6}.footer__grid>div:last-child{padding-top:20px;border-top:1px solid #756d5f;width:100%}.footer__bottom{flex-wrap:wrap;justify-content:flex-start;padding:20px 18px;gap:12px 26px}.footer__bottom p{flex-basis:100%}
  .quick-actions{right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));border-radius:19px}.quick-actions__items>a,.quick-actions__items>button{font-size:16px}.quick-actions__items i{font-size:16px}dialog{padding:32px 24px}dialog h2{font-size:28px}
}
@media(max-width:370px){.hero h1{font-size:34px}.hero .button{gap:14px;padding-inline:16px}.hero .button--outline{padding-inline:0}.hero__photo{height:340px}.hero__lede{font-size:20px}.section h2{font-size:33px}.journey__copy h2{font-size:30px}.journey-sticky,.journey-ready .journey-sticky{padding:30px 21px}.journey__tabs button{font-size:16px;padding-inline:4px}.journey__photos{height:190px}.footer__grid{grid-template-columns:1fr}.footer__grid>div:last-child{grid-column:auto}}
@media(max-height:850px) and (max-width:700px){.journey-ready{height:auto;min-height:0}.journey-ready .journey-sticky{position:relative;top:auto}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js-motion .reveal:not(.is-visible){opacity:1;transform:none}.journey-ready{height:auto;min-height:0}.journey-ready .journey-sticky{position:relative;top:auto;height:auto;min-height:0}.journey__photos img{transform:none}.card-rail{scroll-behavior:auto}}

/* One shared homepage, three equally visible offices. */
.hero__photo-label{position:absolute;z-index:1;right:34px;bottom:48px;max-width:255px;padding:9px 15px;border:1px solid #c7baa0;border-radius:12px;background:#fbf9f3e8;color:#4c4131;font-size:16px;line-height:1.45;text-align:center}
.office-locations{padding-top:38px}
.office-locations__heading{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:24px}
.office-locations__heading h2{font-size:28px;line-height:1.2}
.office-locations__heading p{font-size:16px}
.office-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.office-card{min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:26px;border:1px solid var(--line);border-radius:18px;background:#fffdf8}
.office-card h3{font-size:26px;margin-bottom:16px}
.office-card a{overflow-wrap:anywhere;min-height:44px;display:flex;align-items:center;font-size:16px}
.office-card__address{line-height:1.55;margin-bottom:8px;color:var(--ink)}
.office-card__contacts{display:flex;flex-direction:column;gap:3px}
.office-card__contacts a{color:#514b40;line-height:1.45}
.office-card__address:hover,.office-card__contacts a:hover{text-decoration:underline;text-underline-offset:4px}
.office-card__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-top:22px;margin-top:auto}
.office-card__actions .button{padding:10px 17px;min-height:48px;gap:12px}
.office-card__actions .text-link{gap:10px}
.office-card__hours{margin-block:22px 4px;padding-top:18px;border-top:1px solid var(--line);font-size:16px}
.office-card__hours ul{list-style:none;padding:0;margin:8px 0 0;line-height:1.8}
.office-card__hours h4{font-family:Inter,Arial,sans-serif;font-size:16px;line-height:1.5;letter-spacing:0}
.office-grid--details .office-card{background:linear-gradient(150deg,#fbf9f3,#f6eedf)}
.footer__grid{grid-template-columns:1.15fr 1fr 1fr}
.footer__offices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;padding:30px 32px;border:1px solid #bdac8e;border-top:0}
.footer__office{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.footer__office h3{font-size:22px;margin-bottom:12px}
.footer__office a{display:flex;align-items:center;min-height:44px;font-size:16px;line-height:1.6;overflow-wrap:anywhere;color:#514b40}
.footer__office a:hover{text-decoration:underline;text-underline-offset:4px}
.office-dialog{width:min(710px,calc(100vw - 32px));max-height:calc(100svh - 40px);overflow:auto;padding:40px}
.office-dialog h2{max-width:560px;padding-right:16px;line-height:1.2;font-size:30px;margin-bottom:14px}
.office-dialog h2:focus{outline:none}
.office-choices{display:grid;gap:12px;margin-top:26px}
.office-choices article{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px 20px;padding:22px;border:1px solid var(--line);border-radius:14px;background:#fffdf8;min-width:0}
.office-choices h3{font-size:23px;grid-column:1}
.office-choices p{font-size:16px;line-height:1.5;grid-column:1;overflow-wrap:anywhere}
.office-choice__actions{grid-column:2;grid-row:1/3;display:flex;flex-wrap:wrap;gap:8px}
.office-choice__actions a,.office-choice__actions a.button{display:flex;align-items:center;justify-content:center;min-height:48px;padding:11px 17px;background:var(--ink);color:var(--cream);border-radius:99px;font-size:16px;font-weight:500;line-height:1.4;margin:0}
.office-choice__actions a:hover{background:#514b40}
@media(max-width:1100px){.office-card{padding:22px}.office-card h3{font-size:24px}.office-grid{gap:14px}.hero__photo-label{right:28px;bottom:112px;max-width:220px}}
@media(max-width:800px){.office-locations__heading{display:block}.office-locations__heading p{margin-top:12px}.office-grid{grid-template-columns:1fr}.office-card{padding:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px}.office-card h3{grid-column:1/-1}.office-card__address,.office-card__contacts{grid-column:1}.office-card__actions{grid-column:2;grid-row:2/4;align-content:center;padding-top:0}.office-card__hours{grid-column:1/-1}.office-grid--details .office-card__actions{grid-row:auto;grid-column:1/-1;padding-top:18px}.footer__offices{grid-template-columns:1fr;gap:24px}.footer__office+.footer__office{border-top:1px solid #bdac8e;padding-top:24px}.footer__grid{grid-template-columns:1fr 1fr}.footer__grid>div:first-child{grid-column:1/-1}}
@media(max-width:700px){.hero__photo-label{right:24px;bottom:92px;max-width:210px;font-size:16px}.office-locations{padding-top:28px}.office-locations__heading h2{font-size:26px}.office-card{display:flex;padding:24px}.office-card__actions{padding-top:20px}.office-card h3{font-size:26px}.office-dialog{padding:38px 22px 24px;max-height:calc(100svh - 28px)}.office-dialog h2{font-size:26px}.office-choices{margin-top:22px}.office-choices article{grid-template-columns:1fr;padding:20px;gap:10px}.office-choice__actions{grid-column:1;grid-row:auto;margin-top:5px}.office-choice__actions a{width:100%}.office-choice__actions{display:block}.footer__offices{padding:26px 18px}.footer__office h3{font-size:22px}.office-grid--details .office-card__actions{padding-top:20px}}
@media(max-width:370px){.hero__photo-label{right:20px;bottom:140px;max-width:200px}.office-card{padding:21px}.office-dialog h2{font-size:24px}.office-choices article{padding:17px}.footer__grid{grid-template-columns:1fr}}

/*! file: reviews.css */
/* Native review surfaces, using the existing Iconic Smiles design tokens. */
.reviews-section{background:var(--cream)}
.reviews-selection{font-weight:600;color:var(--ink);margin-bottom:12px}
.reviews-cta{background:var(--accent);color:var(--ink);margin-top:24px}
.reviews-cta:hover{background:#ffc46c}
.review-arrow{width:24px;height:24px;flex:none}
.reviews-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.reviews-pause{border:1px solid var(--line);background:transparent;border-radius:99px;padding:10px 18px;min-height:44px;font-size:16px}
.reviews-pause:hover{background:var(--gold)}
.reviews-rail{display:flex;gap:20px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#b6a687 transparent;padding:0 var(--gutter) 20px;overscroll-behavior-x:contain;scroll-padding-inline:var(--gutter)}
.review-card{border:1px solid var(--line);border-radius:20px;padding:28px;background:#fff;display:flex;flex-direction:column;min-width:0;position:relative}
.reviews-rail .review-card{flex:0 0 clamp(300px,31vw,430px)}
.review-card__header{display:flex;gap:14px;align-items:center;margin-bottom:24px}
.review-card__avatar{display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:500}
.review-card__author{font:600 17px/1.35 Inter,Arial,sans-serif;letter-spacing:0;overflow-wrap:anywhere}
.review-card__office{font-size:16px;color:var(--muted);margin-top:4px}
.review-card__stars{color:#946008;margin-bottom:18px;letter-spacing:4px;font-size:19px;line-height:1}
.review-card__quote{font:500 clamp(19px,1.7vw,23px)/1.5 Montserrat,Arial,sans-serif;letter-spacing:-.02em;margin:0 0 24px;color:var(--ink)}
.review-card__quote p{color:inherit}
.review-card__date{font-size:16px;line-height:1.6;color:var(--muted);margin-top:auto;padding-top:8px}
.review-card__footer{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #eee8dc;margin-top:12px;padding-top:8px}
.review-card__excerpt{font-size:16px;color:var(--muted)}
.review-card__source{min-height:44px;display:inline-flex;align-items:center;font-size:16px;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.reviews-note{font-size:16px;line-height:1.7;color:var(--muted);margin-top:22px}
.reviews-intro{padding-top:150px;padding-bottom:60px;border-bottom:1px solid var(--line)}
.reviews-breadcrumbs{display:flex;gap:14px;margin-bottom:38px;font-size:16px;color:var(--muted)}
.reviews-breadcrumbs a{text-decoration:underline;text-underline-offset:4px}
.reviews-intro h1{font-size:clamp(48px,6.2vw,88px);line-height:1.05;letter-spacing:-.06em}
.reviews-intro__bottom{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-top:36px}
.reviews-intro__bottom>div{max-width:620px;font-size:18px}
.reviews-intro__bottom .reviews-cta{flex:none;margin:0}
.reviews-collection{padding-top:48px}
.reviews-collection__heading{display:flex;align-items:center;justify-content:space-between;gap:24px}
.reviews-collection__heading h2{font-size:30px}
.reviews-collection .reviews-note{max-width:950px;margin:16px 0 28px}
.reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.reviews-context{display:grid;grid-template-columns:1.35fr 1fr;gap:80px}
.reviews-context h2{font-size:clamp(32px,3.4vw,48px);margin-bottom:28px}
.reviews-context p+p{margin-top:18px}
.reviews-context p a{text-decoration:underline;text-underline-offset:4px}
.reviews-profile-list{align-self:center;display:flex;flex-direction:column}
.review-profile{display:flex;flex-direction:column;gap:8px;padding:28px 0;border-bottom:1px solid var(--line);min-height:88px}
.review-profile strong{font:500 28px/1.2 Montserrat,Arial,sans-serif;letter-spacing:-.035em}
.review-profile span{text-decoration:underline;text-underline-offset:4px}
.review-profile:hover span{text-decoration-thickness:2px}
@media(max-width:1020px){.reviews-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reviews-context{gap:40px}.reviews-intro__bottom{align-items:start;gap:28px}.reviews-intro__bottom>div{max-width:480px}}
@media(max-width:640px){.reviews-controls{align-items:start}.reviews-controls p{max-width:160px}.reviews-pause{flex:none;padding-inline:14px}.reviews-rail{gap:14px}.reviews-rail .review-card{flex-basis:calc(100vw - var(--gutter)*2)}.review-card{padding:24px}.reviews-grid{grid-template-columns:1fr;gap:16px}.reviews-intro{padding-top:128px;padding-bottom:38px}.reviews-breadcrumbs{margin-bottom:28px}.reviews-intro__bottom{display:block;margin-top:26px}.reviews-intro__bottom .reviews-cta{margin-top:24px}.reviews-collection{padding-top:32px}.reviews-collection__heading{display:block}.reviews-collection__heading p{margin-top:12px}.reviews-context{grid-template-columns:1fr;gap:12px}.review-card__quote{font-size:20px}.reviews-profile-list{margin-top:14px}}

/*! file: homepage-compliance.css */
/* Incremental homepage updates; keep the approved Iconic composition and colors. */
:root {
  --action: var(--accent);
  --action-hover: #ffc46c;
}

/* Primary actions share the client action role, including office selection. */
.button:not(.button--outline),
.hero .button--light,
.light-panel .button--light,
.office-choice__actions a,
.office-choice__actions a.button {
  background: var(--action);
  color: var(--ink);
  border-color: #c6ae70;
}
.button:not(.button--outline):hover,
.hero .button--light:hover,
.light-panel .button--light:hover,
.office-choice__actions a:hover,
.office-choice__actions a.button:hover {
  background: var(--action-hover);
  color: var(--ink);
}
/* Profile details remain text links rather than a second primary action. */
.doctor-card .button,
.doctor-card .button:hover {
  background: transparent;
  color: #fff;
  border-color: var(--gold);
}
.button:focus-visible,
.quick-actions__items > :focus-visible {
  outline: 3px solid #795b18;
  outline-offset: 4px;
}
.button:disabled,
.button[aria-disabled="true"] {
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* The enhanced drawer is portalled out of the glass header by homepage.js. */
/* Without JavaScript the real navigation remains in document flow. */
html:not(.has-dock-navigation) .site-header {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 80px;
  margin: 16px var(--frame);
  padding: 12px 20px;
  flex-wrap: wrap;
  gap: 16px 24px;
}
html:not(.has-dock-navigation) .site-header nav {
  position: static;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 20px;
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html:not(.has-dock-navigation) .site-header nav > a:not(.button) { font-size: 16px; padding-block: 8px; }
html:not(.has-dock-navigation) .site-header nav > .button { margin: 0; }
html:not(.has-dock-navigation) .hero { margin-top: 24px; }
html:not(.has-dock-navigation) .quick-actions .menu-toggle { display: none; }

/* The existing light header overlays the photograph without clipping the offer. */
.has-dock-navigation .hero {
  margin-top: 16px;
  height: auto;
  min-height: min(760px, 80svh);
  max-height: none;
  padding-top: 132px;
  padding-bottom: 110px;
}
.has-dock-navigation #primary-navigation {
  position: fixed;
  z-index: 79;
  inset: auto max(18px, env(safe-area-inset-right)) calc(106px + env(safe-area-inset-bottom)) auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: min(400px, calc(100vw - 36px));
  max-height: calc(100svh - 142px - env(safe-area-inset-bottom));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px 26px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(251, 249, 243, .98);
  box-shadow: 0 12px 45px #23232321;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.has-dock-navigation #primary-navigation[hidden] { display: none; }
.has-dock-navigation #primary-navigation > a:not(.button) {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 22px;
  line-height: 1.3;
}
.has-dock-navigation #primary-navigation > .button { margin-top: 18px; }
.has-dock-navigation #primary-navigation > a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Five usable actions stay at the lower right, including at 320 CSS pixels. */
.quick-actions {
  max-width: calc(100vw - 36px);
}
.quick-actions__items { flex-wrap: wrap; }
.quick-actions__items > a,
.quick-actions__items > button {
  flex: 1 1 auto;
  min-width: 44px;
  max-width: 100%;
  padding-inline: 10px;
}
.quick-actions:not(.is-collapsed) .quick-actions__items > * > span:not(.menu-toggle__icon) {
  max-height: none;
  overflow: visible;
  overflow-wrap: anywhere;
}
.quick-actions__items > [data-quick-action="book"] {
  background: var(--action);
  color: var(--ink);
}
.quick-actions__items > [data-quick-action="book"]:hover { background: var(--action-hover); }
.quick-actions__items > .menu-toggle {
  display: flex;
  width: auto;
  height: auto;
  border-radius: 15px;
}
.quick-actions__items > .menu-toggle > span:not(.menu-toggle__icon) {
  width: auto;
  height: auto;
  margin: 0;
  background: none;
}
.quick-actions__items > .menu-toggle .menu-toggle__icon,
.quick-actions.is-collapsed .quick-actions__items > .menu-toggle .menu-toggle__icon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  max-height: 22px;
  margin: 0;
  overflow: visible;
  opacity: 1;
  clip-path: none;
  background: none;
}
.quick-actions__items > .menu-toggle .menu-toggle__icon > span {
  display: block;
  width: 22px;
  height: 1px;
  margin: 0;
  background: currentColor;
  transition: transform .18s;
}
.quick-actions__items > .menu-toggle[aria-expanded="true"] { background: var(--gold); }
.quick-actions__items > .menu-toggle[aria-expanded="true"] .menu-toggle__icon > span:first-child { transform: translateY(3.5px) rotate(45deg); }
.quick-actions__items > .menu-toggle[aria-expanded="true"] .menu-toggle__icon > span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.quick-actions.is-collapsed .quick-actions__items > a,
.quick-actions.is-collapsed .quick-actions__items > button {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
}
/* Keep the open navigation above a compact dock, even when text is enlarged. */
.is-navigation-open .quick-actions__items { flex-wrap: nowrap; }
.is-navigation-open .quick-actions__items > a,
.is-navigation-open .quick-actions__items > button { flex: none; width: 44px; min-width: 44px; min-height: 44px; gap: 0; padding: 8px; }
.is-navigation-open .quick-actions .quick-actions__items > * > span:not(.menu-toggle__icon) { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); max-height: 1px; overflow: hidden; opacity: 0; }
@media (max-width: 700px) {
  .has-dock-navigation .hero {
    margin-top: 10px;
    min-height: 0;
    padding-top: 116px;
    padding-bottom: 370px;
  }
}
@media (max-width: 480px) {
  .quick-actions {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    padding: 5px;
  }
  .quick-actions__items { gap: 1px; }
  .quick-actions__items > a,
  .quick-actions__items > button { padding: 8px 4px; min-width: 44px; }
  .has-dock-navigation #primary-navigation {
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(100px + env(safe-area-inset-bottom));
    width: min(400px, calc(100vw - 24px));
    max-height: calc(100svh - 124px - env(safe-area-inset-bottom));
    padding: 18px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .quick-actions__items > *,
  .quick-actions__items > .menu-toggle .menu-toggle__icon > span { transition: none; }
}

/*! file: homepage-layout.css */
/* Homepage structure and responsive refinements. */
html { background: #fbf9f3; }
.hero h1 { font-size: clamp(40px, 4.25vw, 64px); text-wrap: balance; }
.header-booking { margin-left: auto; }
html:not(.has-dock-navigation) .header-booking { display: none; }
.header-booking { white-space: nowrap; }
.urgent-section { padding-block: 0 24px; }
.urgent-section .urgent-help {
  margin-block: 0;
  padding: 26px 30px;
  border: 1px solid #d6c3ac;
  border-radius: 18px;
  background: linear-gradient(115deg, #eee3d5, #f6eee4);
  color: #332a22;
}
.urgent-section .urgent-help > div { min-width: 0; }
.urgent-section .urgent-help p { color: inherit; }
.urgent-section .urgent-help > a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid #a36112;
  border-radius: 999px;
  background: #ffad43;
  color: #232323;
  font-size: 16px;
}
.urgent-section .urgent-help > a:hover { background: #f59a26; }
.urgent-section .urgent-help > a:focus-visible { outline: 3px solid #232323; outline-offset: 4px; }
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(34px, 8.3vw, 48px); }
  .urgent-section { padding-block: 4px 0; }
  .urgent-section .urgent-help { padding: 24px; align-items: stretch; }
  .urgent-section .urgent-help > a { align-self: flex-start; }
}
@media (max-width: 370px) {
  .site-header .header-booking { padding: 12px 18px; min-height: 48px; font-size: 16px; }
  .site-header .header-booking > span { display: none; }
}
.footer__socials { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 20px 0; }
.footer__socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; font-size: 16px; }
.footer__socials svg { flex: none; width: 22px; height: 22px; fill: currentColor; }
.footer__socials a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__socials a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.footer__bottom { flex-wrap: wrap; gap: 16px 24px; }
.footer__privacy { display: flex; flex-wrap: wrap; gap: 8px 20px; min-width: 0; }
.footer__privacy a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__privacy a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.not-found-page main { display: grid; align-content: center; gap: 24px; min-height: 90svh; padding-block: 48px; }
.not-found-page h1 { font-size: clamp(36px, 6vw, 72px); }
.not-found-page main > div { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }

/*! file: modules.css */
/* Functional additions use the existing Iconic type, gold actions and surfaces. */
.sr-only,.button .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.intake-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}.care-requests{padding-top:16px}
.intake-card{min-width:0;padding:clamp(24px,3.5vw,48px);border:1px solid var(--line);border-radius:22px;background:#fff}
.intake-card:first-child{background:#f6e4ad66}.intake-card h2{font-size:clamp(27px,2.7vw,40px);line-height:1.18;min-height:1.2em}
.intake-card>.button{margin-top:26px}.intake-card details{margin-top:28px;border-top:1px solid #bdb5a6}
.intake-card summary{display:flex;justify-content:space-between;align-items:center;list-style:none;min-height:52px;padding:10px 0;font-weight:500;cursor:pointer}
.intake-card summary::-webkit-details-marker{display:none}.intake-card summary span{font-size:23px;transition:transform .2s}.intake-card details[open] summary span{transform:rotate(45deg)}
.intake-card details p{font-size:16px;line-height:1.7;padding:0 0 4px}.intake-card details[open] p{animation:intake-in .25s ease-out}
@keyframes intake-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.flow-offices{width:min(850px,calc(100vw - 32px));max-height:calc(100dvh - 36px);overflow-y:auto}.flow-office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.flow-office-grid article{min-width:0}.flow-office-grid h3{font-size:20px}.flow-office-grid .button{width:100%;padding:12px 16px;gap:8px;align-items:center}.flow-office-grid [hidden]{display:none!important}
/* Percent width excludes classic scrollbars; both safe-area gutters stay clear. */
#chat-dialog[data-live-chat]{--chat-gutter-left:max(16px,env(safe-area-inset-left));--chat-gutter-right:max(16px,env(safe-area-inset-right));position:fixed;inset:auto var(--chat-gutter-right) calc(94px + env(safe-area-inset-bottom)) auto;margin:0;z-index:85;box-sizing:border-box;min-width:0;width:min(400px,calc(100% - var(--chat-gutter-left) - var(--chat-gutter-right)));max-height:calc(100dvh - 125px);padding:30px 24px;overflow:auto}
#chat-dialog [hidden]{display:none!important}#chat-dialog [data-chat-heading] h2{padding-right:26px;font-size:25px}
.chat-office-choices{display:grid;gap:12px;margin-top:22px}.chat-office-choices .button{margin:0;width:100%}
#chat-dialog.is-connected{padding:0;height:min(620px,calc(100dvh - 125px))}#chat-dialog [data-chat-frame]{height:100%;width:100%}
#chat-dialog iframe{display:block;width:100%;height:100%;border:0;background:var(--cream)}
@media(max-width:700px){.intake-pair{grid-template-columns:1fr;gap:18px}.intake-card h2{min-height:0}.flow-office-grid{grid-template-columns:1fr;gap:22px}.flow-office-grid .button{margin-top:10px}.care-requests{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.intake-card details[open] p{animation:none}.intake-card summary span{transition:none}}
.contact-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact-layout>div{min-width:0}.contact-layout h2{margin-bottom:20px}
.callback-open{margin-top:28px;background:transparent;border:0;border-bottom:1px solid currentColor;border-radius:0;padding-inline:0}
.office-select-label{display:block;font-size:16px;font-weight:600;margin-bottom:9px}
.office-select{width:100%;min-height:54px;padding:12px 16px;font:inherit;color:var(--ink);background:#fff;border:1px solid #8c887f;border-radius:8px}
.office-select:focus-visible,.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:3px solid #a05c00;outline-offset:3px}
.contact-form{margin-top:28px}.contact-form h3{font-size:22px;line-height:1.3;margin-bottom:12px}
.contact-form-intro{margin-bottom:22px}.contact-form fieldset{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:20px;border:0;padding:0;margin:22px 0}
.contact-form-field{min-width:0}.contact-form-field--wide{grid-column:1/-1}.contact-form-field label{display:block;font-size:16px;font-weight:500;margin-bottom:7px}
.contact-form-field input,.contact-form-field textarea{display:block;width:100%;min-width:0;padding:12px 14px;border:1px solid #8c887f;border-radius:8px;font:inherit;line-height:1.5;background:#fff;color:var(--ink)}
.contact-form-field input{min-height:52px}.contact-form-field textarea{resize:vertical;min-height:112px}
.contact-form-field p{font-size:16px!important;line-height:1.55;margin-top:7px}
.contact-form-consent{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.6}
.contact-form-consent input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:#81500b}
.contact-form>p:not(.contact-form-intro){font-size:16px!important;line-height:1.6;margin-top:14px}
.contact-form a{text-decoration:underline;text-underline-offset:3px}.contact-form button{margin-top:22px}
.contact-form button:disabled{opacity:.6;cursor:wait;transform:none}.contact-form fieldset:disabled{opacity:.7}
.callback-dialog{width:min(660px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;padding:42px 32px 30px;overscroll-behavior:contain}
.callback-dialog h2{padding-right:20px}.callback-dialog .contact-form h3{font-size:20px}
@media(max-width:700px){.contact-layout{grid-template-columns:1fr;gap:30px}.contact-form fieldset{grid-template-columns:1fr;gap:18px}.callback-dialog{padding:42px 22px 26px}.contact-form button{width:100%;justify-content:center}}

/*! file: voice-assistant.css */
.header-voice[hidden], .header-voice [hidden], .voice-screen-edge[hidden] { display: none !important; }
.header-voice { margin-left: auto; display: flex; position: relative; align-items: center; justify-content: flex-end; min-width: 0; gap: 10px; color: var(--ink); }
.header-voice__trigger { display: flex; align-items: center; gap: 18px; min-height: 48px; padding: 4px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.header-voice__caption { display: block; max-width: 245px; padding-right: 18px; border-right: 1px solid #a58a64; font-size: 16px; line-height: 1.35; text-align: right; white-space: nowrap; }
/* The scope is read, not shown (owner decision 2026-09-23): the trigger's accessible name and this
   line still name the office, so nothing is lost for a screen reader. */
.header-voice__scope { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.header-voice__signal { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(125deg, #ffcc7e, #ffad43, #f3dfb2); color: #282319; box-shadow: 0 0 0 4px rgb(255 173 67 / 15%); }
.header-voice__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 27px; width: 27px; }
.header-voice__wave i { display: block; width: 3px; height: 10px; border-radius: 3px; background: currentColor; }
.header-voice__wave i:nth-child(2), .header-voice__wave i:nth-child(4) { height: 17px; }
.header-voice__wave i:nth-child(3) { height: 25px; }
.header-voice[data-voice-state="live"] .header-voice__signal { background: #bce4c8; color: #173e29; box-shadow: 0 0 0 calc(4px + var(--voice-level, 0) * 5px) rgb(46 123 69 / 18%); }
.header-voice[data-voice-state="live"] .header-voice__wave i { height: calc(5px + var(--voice-level, 0) * 13px); }
.header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(2), .header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(4) { height: calc(8px + var(--voice-level, 0) * 16px); }
.header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(3) { height: calc(11px + var(--voice-level, 0) * 16px); }
.header-voice[data-voice-state="connecting"] .header-voice__signal { outline: 2px dashed #795519; outline-offset: 3px; }
.header-voice__controls { display: flex; gap: 6px; }
.header-voice__controls button, .header-voice__fallback { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid #9d8463; border-radius: 12px; color: var(--ink); background: #fbf9f3; font: inherit; font-size: 16px; cursor: pointer; }
.header-voice__trigger:focus-visible, .header-voice__controls button:focus-visible, .header-voice__fallback:focus-visible { outline: 3px solid #815011; outline-offset: 4px; }
.header-voice__status { position: absolute; right: 0; top: calc(100% + 22px); width: min(340px, calc(100vw - 48px)); margin: 0; padding: 12px 16px; border: 1px solid #c4b79e; border-radius: 14px; background: #fbf9f3; color: #393124; box-shadow: 0 6px 24px rgb(0 0 0 / 8%); font-size: 16px; line-height: 1.4; pointer-events: none; }
.header-voice__status:empty { display: none; }
.voice-screen-edge { position: fixed; inset: 0; z-index: 90; border: 3px solid #43865a; border-radius: 10px; box-shadow: inset 0 0 12px rgb(67 134 90 / 18%); pointer-events: none; }
@media (max-width: 700px) {
  .header-voice { gap: 5px; }
  .header-voice__trigger { gap: 10px; }
  .header-voice__caption { max-width: 170px; padding-right: 10px; }
  .header-voice__signal { width: 44px; height: 44px; }
  .header-voice__controls { position: absolute; right: 0; top: calc(100% + 8px); padding: 4px; border-radius: 14px; background: #fbf9f3; border: 1px solid #c4b79e; }
  .header-voice:has(.header-voice__controls:not([hidden])) .header-voice__status { top: calc(100% + 65px); }
}
@media (max-width: 390px) {
  .header-voice__caption { max-width: 140px; }
  .header-voice__scope { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .header-voice__signal { transition: none; }
  .header-voice[data-voice-state="live"] .header-voice__wave i { height: 10px; }
  .header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(2), .header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(4) { height: 17px; }
  .header-voice[data-voice-state="live"] .header-voice__wave i:nth-child(3) { height: 25px; }
}

/*! file: hero-voice-layout.css */
/* Header and first screen share a background and a single vertical composition. */
:root { --header-top-gap: 16px; --header-height: 80px; --header-tone: #fbf9f3; }
html, body { background-color: var(--header-tone); }
.has-dock-navigation body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: calc(var(--header-top-gap) + env(safe-area-inset-top, 0px));
  z-index: 69;
  background: var(--header-tone);
  pointer-events: none;
}
.has-dock-navigation .site-header {
  top: calc(var(--header-top-gap) + env(safe-area-inset-top, 0px));
  left: max(var(--frame), env(safe-area-inset-left, 0px));
  right: max(var(--frame), env(safe-area-inset-right, 0px));
  height: auto;
  min-height: var(--header-height);
  gap: 16px;
  background-color: rgb(251 249 243 / 96%);
}
.site-header .brand { flex: none; }
.site-header .header-booking { min-width: 0; white-space: normal; text-align: center; overflow-wrap: anywhere; }
.site-header.has-voice-entry .header-booking { display: none; }
.site-header.has-voice-entry .header-voice { min-width: 0; margin-left: auto; }
.has-dock-navigation .hero {
  margin-top: calc(var(--header-top-gap) + env(safe-area-inset-top, 0px));
  height: auto;
  min-height: 80svh;
  max-height: none;
  padding-top: calc(var(--header-content-height, var(--header-height)) + 48px);
  padding-bottom: 90px;
}
.hero__copy { min-width: 0; }
.hero h1, .header-voice__caption { overflow-wrap: anywhere; }
.hero .actions { align-items: center; }
.hero .actions > a { max-width: 100%; text-align: center; }
.hero .trust-strip { flex-wrap: wrap; }
@media (min-width: 701px) and (max-height: 700px) {
  .has-dock-navigation .hero { padding-top: calc(var(--header-content-height, var(--header-height)) + 30px); padding-bottom: 80px; }
}
@media (max-width: 700px) {
  :root { --header-top-gap: 10px; --header-height: 76px; }
  .has-dock-navigation .site-header { padding: 6px 12px; gap: 10px; }
  .site-header .header-booking { padding: 10px 14px; gap: 8px; justify-content: center; }
  .site-header .header-booking > span { display: none; }
  .site-header.has-voice-entry .brand { width: clamp(58px, 17vw, 91px); }
  .site-header.has-voice-entry .header-voice__trigger { min-width: 0; gap: 8px; }
  .site-header.has-voice-entry .header-voice__caption { max-width: 140px; min-width: 0; padding-right: 9px; font-size: 16px; line-height: 1.25; }
  .site-header.has-voice-entry .header-voice__scope { font-size: 16px; line-height: 1.25; }
  .site-header.has-voice-entry .header-voice__signal { width: 44px; height: 44px; }
  .site-header.has-voice-entry .header-voice { display: grid; justify-items: end; gap: 8px; }
  .site-header.has-voice-entry .header-voice__controls { position: static; padding: 0; border: 0; }
  .site-header.has-voice-entry .header-voice__status { position: static; width: auto; max-width: 230px; padding: 0; border: 0; box-shadow: none; }
  .site-header.has-voice-entry .header-voice[data-voice-state="live"] .header-voice__status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .has-dock-navigation .hero {
    min-height: 0;
    height: auto;
    max-height: none;
    padding: calc(var(--header-content-height, var(--header-height)) + 40px) 24px 0;
  }
  .hero__copy { width: 100%; max-width: none; padding: 0; order: 0; }
  /* The image follows the copy, so wrapped text can never collide with it. */
  .hero .hero__photo {
    position: relative;
    inset: auto;
    order: 1;
    flex: none;
    width: calc(100% + 48px);
    height: auto;
    aspect-ratio: 1.45;
    margin: 26px -24px 0;
    border-radius: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 57% center; }
  .hero .hero__photo::after { background: linear-gradient(180deg, var(--header-tone), rgb(251 249 243 / 35%) 20%, transparent 42%); }
  .hero .trust-strip { position: relative; inset: auto; order: 2; width: calc(100% + 48px); max-width: none; margin: 0 -24px; padding: 16px 24px 24px; gap: 8px; background: var(--header-tone); }
  html { scroll-padding-top: calc(var(--header-content-height, var(--header-height)) + var(--header-top-gap) + env(safe-area-inset-top, 0px) + 24px); }
}
@media (max-width: 370px) {
  .has-dock-navigation .site-header { gap: 8px; }
  .site-header.has-voice-entry .header-voice__caption { max-width: 134px; }
  .site-header.has-voice-entry .header-voice__trigger { gap: 7px; padding-inline: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/*! file: legal.css */
/* A readable document surface within the existing Iconic Smiles shell. */
.legal-main {
  max-width: 920px;
  padding-top: calc(var(--header-content-height, var(--header-height, 80px)) + var(--header-top-gap, 16px) + env(safe-area-inset-top, 0px) + 48px);
  padding-bottom: 88px;
}
.legal-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 16px;
  overflow-wrap: anywhere;
}
.legal-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.legal-document { min-width: 0; }
.legal-document h1 {
  max-width: 18ch;
  margin: 0 0 36px;
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1.12;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
.legal-copy { max-width: 76ch; font-size: 17px; line-height: 1.75; overflow-wrap: anywhere; }
.legal-copy p, .legal-copy li { color: var(--ink); }
.legal-copy p + p { margin-top: 18px; }
.legal-copy h2 { margin: 36px 0 14px; font-size: clamp(23px, 2.5vw, 30px); line-height: 1.3; letter-spacing: -.025em; }
.legal-copy h3 { margin: 26px 0 12px; font-size: 20px; line-height: 1.4; letter-spacing: -.01em; }
.legal-copy ul { margin: 18px 0; padding-left: 24px; }
.legal-copy li + li { margin-top: 10px; }
.legal-copy a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.legal-copy a:hover { text-decoration-thickness: 2px; }
.legal-copy a:focus-visible, .legal-breadcrumbs a:focus-visible, .footer__legal a:focus-visible { outline: 3px solid #9c5b09; outline-offset: 4px; }
.footer__legal { width: 100%; min-width: 0; padding: 26px 0; border-top: 1px solid var(--line); }
.footer__legal h2 { margin-bottom: 12px; font: 600 18px/1.5 Inter, Arial, sans-serif; letter-spacing: 0; }
.footer__legal-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
.footer__legal-links a { display: flex; align-items: center; min-height: 44px; padding-block: 8px; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.footer__legal-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) { .footer__legal-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } }
@media (max-width: 640px) {
  .legal-main { padding-top: calc(var(--header-content-height, var(--header-height, 76px)) + var(--header-top-gap, 10px) + env(safe-area-inset-top, 0px) + 28px); padding-bottom: 52px; }
  .legal-breadcrumbs { margin-bottom: 24px; }
  .legal-document h1 { margin-bottom: 28px; }
  .legal-copy { font-size: 16px; line-height: 1.75; }
  .legal-copy h2 { margin-top: 30px; }
  .footer__legal-links { grid-template-columns: 1fr; }
}

/*! file: home2.css */
/* HomePage 2 ("Warm Light"): the homepage-only layer, linked after every shared sheet.
   Inner pages receive the same header, footer and dock markup but never this file or
   body.home2, so every selector that names a shared class is prefixed with .home2.
   All type is Inter (owner decision, 2026-09-18). Animations and transitions live only
   inside prefers-reduced-motion: no-preference blocks. Tests read literals from this file,
   so keep it in readable "prop: value;" form. */

@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107.1%; ascent-override: 90.4%; descent-override: 22.5%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  --h2-font-text: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* Fluid scale, linear 320px -> 1440px. Inter has no opsz axis, so display stops at 80px. */
  --h2-fs-display: clamp(2.25rem, 1.4643rem + 3.9286vw, 5rem);      /* 36 -> 80 */
  --h2-fs-headline: clamp(2.125rem, 1.5893rem + 2.6786vw, 4rem);    /* 34 -> 64 */
  --h2-fs-section: clamp(1.875rem, 1.4107rem + 2.3214vw, 3.5rem);   /* 30 -> 56 */
  --h2-fs-tile: clamp(1.625rem, 1.375rem + 1.25vw, 2.5rem);         /* 26 -> 40 */
  --h2-fs-card: clamp(1.3125rem, 1.1875rem + .625vw, 1.75rem);      /* 21 -> 28 */
  --h2-fs-product: clamp(1.375rem, 1.2321rem + .7143vw, 1.875rem);  /* 22 -> 30 */
  --h2-fs-subhead: clamp(1.1875rem, 1.0268rem + .8036vw, 1.75rem);  /* 19 -> 28 */
  --h2-fs-lede: clamp(1.125rem, 1.0714rem + .2679vw, 1.3125rem);    /* 18 -> 21 */
  --h2-fs-eyebrow: clamp(1rem, .9464rem + .2679vw, 1.1875rem);      /* 16 -> 19 */
  --h2-fs-body: 1.0625rem;  /* 17 */
  --h2-fs-small: 1rem;      /* 16: floor for running text */
  --h2-lh-display: calc(1em + 4px);
  --h2-lh-title: calc(1em + 6px);
  --h2-lh-text: calc(1em + 8px);
  --h2-ls-display: -.028em; --h2-ls-headline: -.026em; --h2-ls-section: -.024em; --h2-ls-tile: -.022em;
  --h2-ls-card: -.019em; --h2-ls-lede: -.016em; --h2-ls-body: -.012em; --h2-ls-label: 0em;

  /* Warm neutrals, an ink action with a white label and brass as the only accent (owner
     decision 2026-09-18: premium ink + brass replace the amber; no amber on the homepage). */
  --h2-canvas: #ffffff;
  --h2-porcelain: #f5f3ef;
  --h2-porcelain-deep: #ece8e1;
  --h2-ink: #232323;
  --h2-graphite: #66615a;
  --h2-stone: #8a847c;           /* borders only, never text */
  --h2-hairline: rgb(35 35 35 / .14);
  --h2-night: #141210;
  --h2-night-tile: #232323;
  --h2-night-text: #f5f3ef;
  --h2-night-text-2: #a8a29a;
  --h2-action: #232323;          /* white label 15.7:1 */
  --h2-action-label: #ffffff;
  --h2-action-hover: #3b3733;    /* 11.8:1 */
  --h2-action-press: #141210;
  --h2-brass: #a8844f;           /* decorative only: dots, pins, hairlines, never fills */
  --h2-brass-text: #86683a;      /* text: 5.2:1 on white, 4.7:1 on porcelain */
  --h2-brass-night: #c9a86f;     /* 8.3:1 on night, 7.0:1 on the night tile */
  --h2-glow: rgb(245 243 239 / .06);
  --h2-urgent: #e9e1d5;          /* ink 12.1:1 */
  --h2-error: #b3261e;
  --h2-focus: #232323;
  --h2-focus-dark: #f5f3ef;
  --h2-scrim-ink: 20 18 16;

  /* One glass material for header, dock and drawer. */
  --h2-glass: rgb(255 255 255 / .82);
  --h2-glass-solid: rgb(255 255 255 / .97);
  --h2-glass-filter: saturate(180%) blur(20px);

  --h2-gutter: max(20px, 6.25vw, calc(50vw - 630px));
  --h2-content: min(87.5vw, 1260px);
  --h2-section-y: clamp(5rem, 3.8571rem + 5.7143vw, 9rem);
  --h2-section-y-feature: clamp(6rem, 4.7143rem + 6.4286vw, 10.5rem);
  --h2-head-gap: clamp(2rem, 1.7143rem + 1.4286vw, 3rem);
  --h2-gap: 20px;

  --h2-radius-pill: 980px; --h2-radius-tile: 28px; --h2-radius-card: 18px; --h2-radius-media: 28px;
  --h2-radius-field: 12px; --h2-radius-thumb: 14px;
  /* One edge per surface: floating glass and sheets carry a soft shadow and no ring. */
  --h2-shadow-float: 0 2px 12px rgb(20 18 16 / .08), 0 16px 40px -16px rgb(20 18 16 / .32);
  --h2-shadow-lift: 0 16px 32px -16px rgb(20 18 16 / .18);

  --h2-ease-standard: cubic-bezier(.4, 0, .6, 1);
  --h2-ease-out: cubic-bezier(.215, .61, .355, 1);
  --h2-ease-emphasized: cubic-bezier(.28, .11, .32, 1);
  --h2-ease-media: cubic-bezier(.42, .46, .45, .99);
  --h2-ease-hover: cubic-bezier(0, 0, .5, 1);
  --h2-dur-press: 100ms; --h2-dur-ui: 240ms; --h2-dur-fade: 500ms;
  --h2-dur-rise: 700ms; --h2-dur-media: 720ms; --h2-dur-reveal: 900ms;
  --h2-stagger: 80ms;
  --h2-rise: 30px; --h2-hover-scale: 1.016; --h2-media-scale: 1.08;

  /* Shared header contract (hero-voice-layout.css stays untouched): the bar is flush with the
     top and its glass paints the safe area, so the tone above it is the page white (Rule 2.5). */
  --header-top-gap: 0px;
  --header-height: 64px;
  --header-tone: #fff;
  color-scheme: light;
  interpolate-size: allow-keywords;
}
@media (max-width: 734px) {
  :root { --header-height: 56px; --h2-radius-tile: 20px; --h2-radius-media: 20px; --h2-gap: 12px; }
}

/* ---------- Base ---------- */
html {
  background-color: var(--h2-canvas);
  /* The measured header already includes the safe area and grows with text zoom or voice. */
  scroll-padding-top: calc(var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))) + 16px);
  scroll-padding-bottom: 112px;
}
body.home2 {
  /* Shared sheets paint with titan's --gold/--accent and compliance's --action; here they
     resolve to the ink palette, so a shared rule this file does not restyle cannot show amber. */
  --gold: var(--h2-porcelain-deep);
  --accent: var(--h2-action);
  --action: var(--h2-action);
  --action-hover: var(--h2-action-hover);
  background-color: var(--h2-canvas);
  color: var(--h2-ink);
  font: 400 var(--h2-fs-body)/1.47 var(--h2-font-text);
  letter-spacing: var(--h2-ls-body);
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.home2 :where(h1, h2, h3, h4, p, a, button, input, select, textarea, summary, dialog, blockquote) { font-family: inherit; }
.home2 :where(h1, h2, h3, h4) { font-weight: 600; }
/* One focus ring: 2px ink, 3px offset; the outline follows each target radius. */
.home2:focus-visible,
.home2 :focus-visible,
.home2 :is(.footer a, .contact-form input):focus-visible { outline: 2px solid var(--h2-focus); outline-offset: 3px; }
/* A brass tint (28% over white), opaque so the ink label reads on the night band too. */
.home2 ::selection { background: #e7ddce; color: var(--h2-ink); }
/* The glass header paints its own safe area; the shared opaque strip would sit above it. */
.has-dock-navigation body.home2::before { display: none; }

.home2-wrap { width: var(--h2-content); margin-inline: auto; }
.home2-band { padding-block: var(--h2-section-y); background-color: var(--h2-canvas); }
.home2-band--porcelain { background-color: var(--h2-porcelain); }

/* ---------- Header (shared markup, homepage material) ---------- */
body.home2 .site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 70;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: auto;
  min-height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
  margin: 0;
  padding: env(safe-area-inset-top, 0px) max(var(--h2-gutter), env(safe-area-inset-right, 0px)) 0 max(var(--h2-gutter), env(safe-area-inset-left, 0px));
  border: 0;
  border-radius: 0;
  background-color: var(--h2-glass);
  -webkit-backdrop-filter: var(--h2-glass-filter);
  backdrop-filter: var(--h2-glass-filter);
  box-shadow: none;
}
body.home2 .site-header.is-scrolled { box-shadow: 0 1px 0 var(--h2-hairline); }
body.home2 .site-header .brand,
body.home2 .site-header.has-voice-entry .brand { flex: none; width: auto; background: transparent; }
body.home2 .site-header .brand img { width: auto; height: 48px; object-fit: contain; }
body.home2 .site-header .header-booking { min-height: 44px; padding: 10px 18px; font-size: 16px; line-height: 1.2; }
body.home2 .site-header .header-booking > span { display: none; }
body.home2 .site-header .header-voice__caption { border-right-color: var(--h2-hairline); color: var(--h2-ink); font-weight: 500; }
body.home2 .site-header .header-voice__scope { color: var(--h2-graphite); }
/* Voice entry states (shared voice-assistant.css): idle is an ink disc with a faint brass halo,
   connecting a dashed brass ring, live keeps the shared green. */
body.home2 .header-voice__signal { background: var(--h2-action); color: var(--h2-action-label); box-shadow: 0 0 0 4px rgb(168 132 79 / .22); }
body.home2 .header-voice[data-voice-state="connecting"] .header-voice__signal { box-shadow: none; outline: 2px dashed var(--h2-brass-text); outline-offset: 3px; }
/* Scripts on: the nav is portalled into the dock drawer; keep it out of the bar meanwhile. */
html.home2-js:not(.has-dock-navigation) body.home2 .site-header nav { display: none; }
/* No JavaScript at all: the header sits in flow with its inline navigation. */
html:not(.home2-js) body.home2 .site-header { position: relative; flex-wrap: wrap; row-gap: 8px; padding-bottom: 12px; }
@media (max-width: 734px) {
  body.home2 .site-header { gap: 10px; }
  body.home2 .site-header .brand img { height: 40px; }
  body.home2 .site-header .header-booking { padding: 8px 16px; }
}
@media (max-width: 370px) {
  body.home2 .site-header { gap: 8px; padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px)); }
  body.home2 .site-header .header-booking { padding-inline: 12px; }
}

/* ---------- Dock and menu drawer (shared markup; sizes and wrap rules stay in compliance.css) ---------- */
.home2 .quick-actions {
  border: 0;
  border-radius: 26px;
  padding: 6px;
  background: var(--h2-glass);
  -webkit-backdrop-filter: var(--h2-glass-filter);
  backdrop-filter: var(--h2-glass-filter);
  box-shadow: var(--h2-shadow-float);
  color: var(--h2-ink);
}
.home2 .quick-actions__items > a,
.home2 .quick-actions__items > button { border-radius: 20px; color: var(--h2-ink); font-weight: 500; }
.home2 .quick-actions__items > a:hover,
.home2 .quick-actions__items > button:hover { background: var(--h2-porcelain-deep); }
.home2 .quick-actions__items > [data-quick-action="book"] { background: var(--h2-action); color: var(--h2-action-label); box-shadow: none; }
.home2 .quick-actions__items > [data-quick-action="book"]:hover { background: var(--h2-action-hover); }
.home2 .quick-actions__items > [data-quick-action="book"]:active { background: var(--h2-action-press); }
.home2 .quick-actions__items > .menu-toggle[aria-expanded="true"] { background: var(--h2-porcelain-deep); }
.home2 .quick-actions__items > :focus-visible { outline: 2px solid var(--h2-focus); outline-offset: 2px; }

.has-dock-navigation .home2 #primary-navigation {
  inset: auto max(12px, env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) auto;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100svh - 104px - var(--header-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  padding: 12px 24px 24px;
  border: 0;
  border-radius: 28px;
  background: var(--h2-glass);
  -webkit-backdrop-filter: var(--h2-glass-filter);
  backdrop-filter: var(--h2-glass-filter);
  box-shadow: var(--h2-shadow-float);
}
.has-dock-navigation .home2 #primary-navigation > a:not(.button) {
  min-height: 52px;
  padding-block: 10px;
  border-bottom: 1px solid var(--h2-hairline);
  color: var(--h2-ink);
  font: 600 24px/1.25 var(--h2-font-text);
  letter-spacing: -.02em;
}
.has-dock-navigation .home2 #primary-navigation > .button { width: 100%; margin-top: 16px; }

/* ---------- Buttons and links: one action component for the whole page ---------- */
.home2 .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--h2-radius-pill);
  font: 500 var(--h2-fs-body)/1.25 var(--h2-font-text);
  letter-spacing: var(--h2-ls-body);
  text-align: center;
  text-decoration: none;
}
.home2 .button:hover { transform: none; }
/* Primary: ink with a white label and no coloured edge. Secondary: one 1px ink edge. */
.home2 .button:not(.button--outline) { background: var(--h2-action); color: var(--h2-action-label); box-shadow: none; }
.home2 .button:not(.button--outline):hover { background: var(--h2-action-hover); color: var(--h2-action-label); }
.home2 .button:not(.button--outline):active { background: var(--h2-action-press); }
.home2 .button--outline { background: transparent; color: var(--h2-ink); box-shadow: inset 0 0 0 1px var(--h2-ink); }
.home2 .button--outline:hover { background: var(--h2-ink); color: var(--h2-action-label); }
.home2 .button:focus-visible { outline: 2px solid var(--h2-focus); outline-offset: 3px; }
.home2 .button:is(:disabled, [aria-disabled="true"]) { opacity: .42; }
.home2 :is(.button, .text-link) > span[aria-hidden="true"] { font-size: 1em; font-weight: inherit; line-height: 1; }
/* ↗ marks leaving the page; the office picker, flows and callback open in place. */
.home2 :is([data-office-picker], [data-native-flow], [data-callback-open]) > span[aria-hidden="true"] { display: none; }
.home2 .text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  border: 0;
  color: var(--h2-ink);
  font: 500 var(--h2-fs-body)/1.3 var(--h2-font-text);
  letter-spacing: var(--h2-ls-body);
  text-decoration: none;
}
.home2 .text-link:hover,
.home2 .text-link:focus-visible { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Section heading and labels ---------- */
.home2 .eyebrow { margin: 0 0 12px; color: var(--h2-graphite); font: 600 var(--h2-fs-eyebrow)/1.3 var(--h2-font-text); letter-spacing: var(--h2-ls-label); font-variant-numeric: tabular-nums; }
.home2-heading { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: end; margin-bottom: var(--h2-head-gap); }
.home2-heading > :first-child { grid-column: 1 / 8; }
.home2-heading__aside { grid-column: 8 / -1; }
.home2-heading h2 { font-size: var(--h2-fs-section); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-section); text-wrap: balance; }
.home2-heading h2 em { font-style: normal; color: var(--h2-graphite); }
.home2-heading__aside p { max-width: 40ch; color: var(--h2-graphite); font-size: var(--h2-fs-lede); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-lede); text-wrap: pretty; }
.home2 .home2-heading__aside .text-link { margin-top: 12px; }
@media (max-width: 1068px) {
  .home2-heading { display: block; }
  .home2-heading__aside { margin-top: 16px; }
}

/* ---------- Reveal system (homepage.js adds .is-visible; html.js-motion is removed under reduced motion) ---------- */
.home2 .home2-stagger > :nth-child(2) { --i: 1; }
.home2 .home2-stagger > :nth-child(3) { --i: 2; }
.home2 .home2-stagger > :nth-child(4) { --i: 3; }
.home2 .home2-stagger > :nth-child(5) { --i: 4; }
.home2 .home2-stagger > :nth-child(6) { --i: 5; }

/* ---------- #home: the hero film lives in home2-hero.css (round 4) ---------- */

/* ---------- #locations: three offices ---------- */
.home2-locations { padding-block: var(--h2-section-y) var(--h2-gap); }
.home2-locations__heading { max-width: 21em; margin-bottom: var(--h2-head-gap); font-size: var(--h2-fs-section); font-weight: 600; line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-section); text-wrap: balance; }
.home2-locations__heading h2,
.home2-locations__heading p { display: inline; font: inherit; letter-spacing: inherit; }
.home2-locations__heading p { color: var(--h2-graphite); }
/* Owner decision (Jacob, 2026-09-22): the network is growing, and the locations band says so —
   no area named while the next practice is still being bought. Its own small line, not part of
   the display sentence above it; brass on porcelain is 4.67:1. */
.home2-locations__heading .home2-locations__soon { display: block; margin-top: 16px; color: var(--h2-brass-text); font-size: var(--h2-fs-small); font-weight: 500; line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-body); }
.home2 .home2-office-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--h2-gap); }
.home2 .home2-office-grid .office-card { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 0 28px; overflow: hidden; border: 0; border-radius: var(--h2-radius-tile); background: var(--h2-canvas); color: var(--h2-ink); }
.home2 .home2-office-grid .office-card > :not(.office-card__media) { margin-inline: 28px; }
.home2 .home2-office-grid .office-card__media { aspect-ratio: 16 / 9; margin-bottom: 20px; overflow: hidden; background: var(--h2-porcelain-deep); }
.home2 .home2-office-grid .office-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Keep the neon sign in frame when a layout crops the 4:3 photo. */
.home2 .home2-office-grid [data-office="freeport"] .office-card__media img { object-position: 30% 50%; }
.home2 .home2-office-grid .office-card h3 { margin: 0 0 8px; font-size: var(--h2-fs-card); line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-card); }
/* Jacob (2026-09-23): the office name opens the office's own page. */
.home2 .home2-office-grid .office-card h3 a { color: inherit; text-decoration: none; }
.home2 .home2-office-grid .office-card h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.home2 .home2-office-grid .office-card > h3:first-child { margin-top: 32px; }
.home2 .home2-office-grid .office-card__contacts { display: flex; flex-direction: column; gap: 0; }
.home2 .home2-office-grid :is(.office-card__address, .office-card__contacts > a) {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 6px 0 6px 28px;
  color: var(--h2-ink);
  font-size: var(--h2-fs-body);
  line-height: 1.4;
  letter-spacing: var(--h2-ls-body);
  overflow-wrap: anywhere;
}
.home2 .home2-office-grid :is(.office-card__address, .office-card__contacts > a)::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: var(--h2-graphite);
  -webkit-mask: var(--h2-icon) center / contain no-repeat;
  mask: var(--h2-icon) center / contain no-repeat;
}
.home2 .home2-office-grid .office-card__address { --h2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.home2 .home2-office-grid .office-card__contacts > a[href^="tel:"] { --h2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 4h3l1.7 4.3-2.2 1.4a11 11 0 0 0 6.3 6.3l1.4-2.2 4.3 1.7v3a1.5 1.5 0 0 1-1.6 1.5A16 16 0 0 1 4 5.6 1.5 1.5 0 0 1 5.5 4z'/%3E%3C/svg%3E"); font-variant-numeric: tabular-nums; }
.home2 .home2-office-grid .office-card__contacts > a[href^="mailto:"] { --h2-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.8 6.8 8.2 6.4 8.2-6.4'/%3E%3C/svg%3E"); }
.home2 .home2-office-grid :is(.office-card__address, .office-card__contacts > a):hover { text-decoration: underline; text-underline-offset: 4px; }
.home2 .home2-office-grid .office-card__actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: auto; padding-top: 16px; }
.home2 .home2-office-grid .office-card__actions .button { width: 100%; }
.home2 .home2-office-grid .office-card__actions .text-link { justify-content: center; }
.home2 .home2-office-grid :is(.office-card__address, .office-card__contacts > a):focus-visible { outline-offset: 0; border-radius: 6px; }
@media (max-width: 734px) {
  .home2 .home2-office-grid { grid-template-columns: minmax(0, 1fr); }
  .home2 .home2-office-grid .office-card { padding: 20px; }
  .home2 .home2-office-grid .office-card > :not(.office-card__media) { margin-inline: 0; }
  .home2 .home2-office-grid .office-card > h3:first-child { margin-top: 0; }
  .home2 .home2-office-grid .office-card:has(> .office-card__media) { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .home2 .home2-office-grid .office-card__media { grid-column: 1; grid-row: 1; width: 80px; height: 80px; aspect-ratio: 1 / 1; margin: 0 0 8px; border-radius: var(--h2-radius-thumb); }
  .home2 .home2-office-grid .office-card:has(> .office-card__media) > h3 { grid-column: 2; grid-row: 1; align-self: center; margin: 0 0 8px; }
  .home2 .home2-office-grid .office-card:has(> .office-card__media) > :not(.office-card__media, h3) { grid-column: 1 / -1; grid-row: auto; }
  .home2 .home2-office-grid .office-card__actions { padding-top: 12px; }
}
/* Under the map (the layout without JavaScript): one card per row, 2 + 1 from 51em (the longest
   email fits one line). A card wider than 34rem sets its photo beside the contacts, which keep
   24rem. Direct children only: a card opened in the office sheet keeps the sheet layout. */
@media (min-width: 735px) {
  .home2 .home2-map__offices { grid-template-columns: minmax(0, 1fr); }
  .home2 .home2-map__offices > .office-card { --photo: min(50% - var(--h2-gap) / 2, 100% - 24rem); container: office / inline-size; }
}
@media (min-width: 51em) {
  .home2 .home2-map__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home2 .home2-map__offices > .office-card:last-child { grid-column: 1 / -1; }
}
@container office (min-width: 34rem) {
  .home2 .home2-map__offices > .office-card > .office-card__media { position: absolute; inset: 0 auto 0 0; width: var(--photo); aspect-ratio: auto; margin: 0; }
  .home2 .home2-map__offices > .office-card > :not(.office-card__media) { margin-left: calc(var(--photo) + var(--h2-gap) + 28px); }
  .home2 .home2-map__offices > .office-card > h3 { margin-top: 28px; }
}

/* ---------- #locations: the Long Island map ---------- */
/* assets/map-long-island.svg (US Census boundaries and primary roads, public domain) is a linear
   projection of lon -73.97…-73.33, lat 40.565…40.875: x% = (lon + 73.97) / .64 * 100,
   y% = (40.875 - lat) / .31 * 100. The canvas crops it like object-fit: cover (--map-w,
   --map-ox, --map-oy), and every overlay goes through the same transform. */
.home2-map {
  --map-ratio: 1.5649;
  --map-h: 100cqw;
  --map-w: max(100cqw, var(--map-h) * var(--map-ratio));
  --map-ox: calc((100cqw - var(--map-w)) / 2);
  --map-oy: calc((var(--map-h) - var(--map-w) / var(--map-ratio)) / 2);
  --map-water-text: #56636e;      /* 4.8:1 on the water */
  display: grid;
  container-type: inline-size;
}
.home2-map [data-pin="bellerose"], .home2-map [data-chip="bellerose"], .home2 .home2-map [data-office="bellerose"] { --x: 39.22; --y: 42.58; --seq: 0; }
.home2-map [data-pin="roslyn"], .home2-map [data-chip="roslyn"], .home2 .home2-map [data-office="roslyn"] { --x: 47.62; --y: 24.91; --seq: 1; }
.home2-map [data-pin="freeport"], .home2-map [data-chip="freeport"], .home2 .home2-map [data-office="freeport"] { --x: 59.08; --y: 71.73; --seq: 2; }
.home2-map [data-map-label="sound"] { --x: 36; --y: 10; }
.home2-map [data-map-label="queens"] { --x: 29; --y: 74; }
.home2-map [data-map-label="nassau"] { --x: 66; --y: 45; }
.home2-map [data-map-label="suffolk"] { --x: 88; --y: 18; }
.home2-map [data-map-label="ocean"] { --x: 45; --y: 96.5; }
.home2-map__canvas { position: relative; grid-area: 1 / 1; height: var(--map-h); overflow: hidden; }
.home2-map__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
}
.home2-map__pin,
.home2-map__label {
  position: absolute;
  left: calc(var(--map-ox) + var(--map-w) * var(--x) / 100);
  top: calc(var(--map-oy) + var(--map-w) / var(--map-ratio) * var(--y) / 100);
}
.home2-map__label {
  transform: translate(-50%, -50%);
  color: var(--h2-graphite);
  font: 500 .8125rem/1 var(--h2-font-text);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.home2-map__label--water { color: var(--map-water-text); }
.home2-map__label.is-hidden { visibility: hidden; }
.home2-map [data-map-label="suffolk"] { display: none; }
/* A brass dot with a white halo and the office name above it. Never a tab stop: the chips (or,
   without JavaScript, the cards) are. */
.home2-map__pin { z-index: 1; width: 0; height: 0; }
.home2-map__pin::before,
.home2-map__pin::after { content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; }
.home2-map__pin::before { background: var(--h2-brass); box-shadow: 0 0 0 3px #fff, 0 2px 8px 1px rgb(20 18 16 / .26); scale: calc(1 + var(--on, 0) * .25); }
.home2-map__pin::after { box-shadow: 0 0 0 1.5px var(--h2-brass); opacity: calc(var(--on, 0) * .9); scale: calc(1 + var(--on, 0) * .9); pointer-events: none; }
.home2-map__pin > span {
  position: absolute;
  left: 0;
  bottom: 15px;
  transform: translateX(-50%);
  color: var(--h2-ink);
  font: 600 .875rem/1.2 var(--h2-font-text);
  font-weight: calc(600 + var(--on, 0) * 100);
  letter-spacing: -.006em;
  white-space: nowrap;
  text-shadow: 0 0 2px #fff, 0 0 6px #fff, 0 0 12px #fff;
}
/* Hovering or focusing an office's chip or card, or hovering its pin, marks the pin. */
.home2 .home2-map:has([data-chip="bellerose"]:is(:hover, :focus-visible), [data-office="bellerose"]:is(:hover, :focus-within), [data-pin="bellerose"]:hover) :is([data-pin="bellerose"], [data-chip="bellerose"]),
.home2 .home2-map:has([data-chip="roslyn"]:is(:hover, :focus-visible), [data-office="roslyn"]:is(:hover, :focus-within), [data-pin="roslyn"]:hover) :is([data-pin="roslyn"], [data-chip="roslyn"]),
.home2 .home2-map:has([data-chip="freeport"]:is(:hover, :focus-visible), [data-office="freeport"]:is(:hover, :focus-within), [data-pin="freeport"]:hover) :is([data-pin="freeport"], [data-chip="freeport"]) { --on: 1; }
.home2 .home2-map__offices { grid-area: 2 / 1; width: var(--h2-content); margin: 32px auto 0; }
@media (min-width: 735px) {
  .home2-map { --map-h: calc(100cqw / var(--map-ratio)); }
  .home2-map [data-map-label="sound"] { --x: 31; }
  .home2-map [data-map-label="queens"] { --x: 25; }
  .home2-map [data-map-label="suffolk"] { display: block; }
}

/* home2.js takes over (.is-expandable): each office is a chip beside its pin that opens the
   office's own card in the office sheet. Only then do the cards leave the page; without
   JavaScript they stay under the map as above. */
.home2 .home2-map.is-expandable .home2-map__offices { margin: 0; }
.home2 .home2-map.is-expandable .home2-map__offices > .office-card { display: none; }
.home2 .home2-map.is-expandable:not(.is-listed) .home2-map__pin > span { display: none; }
.home2-map.is-expandable .home2-map__pin { cursor: pointer; }
/* Chip: photo, name and street beside the pin, on the side --side prefers (1 east, -1 west).
   home2.js flips a chip that would leave the column or touch another chip or pin (.is-flipped)
   and lines them all up under the map when they cannot fit (.is-listed, e.g. enlarged text). */
.home2-map__chips { position: relative; z-index: 2; grid-area: 1 / 1; height: var(--map-h); pointer-events: none; }
.home2-map__chips[hidden] { display: none; }
.home2 .home2-map__chip {
  --dir: calc(var(--side, 1) * var(--flip, 1));
  position: absolute;
  left: calc(var(--map-ox) + var(--map-w) * var(--x) / 100);
  top: calc(var(--map-oy) + var(--map-w) / var(--map-ratio) * var(--y) / 100);
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  column-gap: 12px;
  width: max-content;
  min-height: 44px;
  margin: 0;
  padding: 6px 14px 6px 6px;
  border: 0;
  border-radius: 16px;
  background: rgb(255 255 255 / .94);
  box-shadow: 0 1px 2px rgb(20 18 16 / .06), 0 12px 28px -12px rgb(20 18 16 / calc(.3 + var(--on, 0) * .18));
  color: var(--h2-ink);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transform: translate(calc(var(--dir) * 14px + min(var(--dir), 0) * 100%), -50%);
}
.home2-map__chip.is-flipped { --flip: -1; }
.home2-map__chip > img { grid-row: 1 / span 2; width: 44px; max-width: none; height: 44px; border-radius: 11px; background: var(--h2-porcelain-deep); object-fit: cover; }
.home2-map__chip[data-chip="freeport"] > img { object-position: 30% 50%; }
.home2-map__chip[data-chip="roslyn"] > img { object-position: 72% 50%; }
.home2-map__chip-name { grid-column: 2; align-self: end; font: 600 .9375rem/1.25 var(--h2-font-text); letter-spacing: -.012em; }
.home2-map__chip-street { grid-column: 2; align-self: start; color: var(--h2-graphite); font: 400 .8125rem/1.35 var(--h2-font-text); letter-spacing: 0; }
.home2-map__chip::after {
  content: "";
  grid-column: 3;
  grid-row: 1 / span 2;
  width: 7px;
  height: 12px;
  margin-left: 2px;
  background-color: var(--h2-graphite);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5.5-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5.5-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.home2 .home2-map.is-listed .home2-map__chips { grid-area: 2 / 1; display: flex; flex-wrap: wrap; gap: 12px; width: var(--h2-content); height: auto; margin: 24px auto 0; }
.home2 .home2-map.is-listed .home2-map__chip { position: static; transform: none; }
@media (min-width: 735px) {
  .home2-map [data-chip="bellerose"] { --side: -1; }
}
@media (min-width: 64em) {
  .home2 .home2-map__chip { column-gap: 14px; padding: 7px 16px 7px 7px; border-radius: 18px; }
  .home2-map__chip > img { width: 52px; height: 52px; border-radius: 12px; }
  .home2-map__chip-name { font-size: 1rem; }
  .home2-map__chip-street { font-size: .875rem; }
}
@media (max-width: 734px) {
  .home2-map [data-chip="freeport"] { --side: -1; }
  .home2 .home2-map__chip { column-gap: 10px; padding: 5px 12px 5px 5px; border-radius: 14px; }
  .home2-map__chip > img { width: 36px; height: 36px; border-radius: 9px; }
  .home2-map__chip-name { grid-row: 1 / span 2; align-self: center; }
  .home2-map__chip-street { display: none; }
}

/* ---------- #locations: the office sheet (the card a chip opens) ---------- */
/* A transparent stage over the window: the office's own card is the one surface. home2.js moves
   the card into the frame, zooms it from its chip and back, and moves it home on close. The page
   behind is dimmed, blurred and does not scroll. */
.home2 .home2-office-sheet { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 32px; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.home2 .home2-office-sheet[open] { display: flex; flex-direction: column; }
.home2 .home2-office-sheet::backdrop { background: rgb(20 18 16 / .3); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1); opacity: 0; }
.home2 .home2-office-sheet.is-open::backdrop { opacity: 1; }
html:has(.home2-office-sheet[open]) { overflow: hidden; scrollbar-gutter: stable; }
.home2 .home2-office-sheet__frame { position: relative; display: block; width: min(34rem, 100%); margin: auto; }
.home2 .home2-office-sheet .office-card { gap: 0; padding-bottom: 32px; box-shadow: 0 2px 8px rgb(20 18 16 / .08), 0 48px 96px -32px rgb(20 18 16 / .5); }
.home2 .home2-office-sheet .office-card > .office-card__media { aspect-ratio: 4 / 3; margin-bottom: 28px; }
.home2 .home2-office-sheet .office-card > :not(.office-card__media) { margin-inline: 36px; }
.home2 .home2-office-sheet .office-card > h3 { margin: 0 0 12px; font-size: clamp(1.75rem, 1.5rem + .75vw, 2.25rem); letter-spacing: var(--h2-ls-tile); }
.home2 .home2-office-sheet .office-card__actions { padding-top: 24px; }
.home2 .home2-office-sheet .office-card__actions :is(.button, .text-link) { margin: 0; }
.home2 .home2-office-sheet__close { top: 14px; right: 14px; z-index: 1; background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 10px rgb(20 18 16 / .18); }
/* Wide or landscape windows: the photo beside the details, like the chip it came from. */
@media (min-width: 64em), (min-width: 735px) and (orientation: landscape) {
  .home2 .home2-office-sheet__frame { width: min(58rem, 100%); }
  .home2 .home2-office-sheet .office-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; padding: 0; }
  .home2 .home2-office-sheet .office-card > .office-card__media { grid-column: 1; grid-row: 1 / -1; aspect-ratio: auto; margin: 0; }
  .home2 .home2-office-sheet .office-card > :not(.office-card__media) { grid-column: 2; margin-inline: 44px; }
  .home2 .home2-office-sheet .office-card > h3 { margin-top: 52px; }
  .home2 .home2-office-sheet .office-card__actions { align-items: flex-start; gap: 4px; padding: 28px 0 44px; }
  .home2 .home2-office-sheet .office-card__actions .button { width: auto; }
}
/* Phones: a near-full-screen sheet; the photo takes the height the details leave. */
@media (max-width: 734px) {
  .home2 .home2-office-sheet { padding: max(24px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .home2 .home2-office-sheet__frame { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; margin: 0; }
  .home2 .home2-office-sheet .office-card:has(> .office-card__media) { flex: 1 0 auto; display: flex; flex-direction: column; padding: 0 0 20px; }
  .home2 .home2-office-sheet .office-card > .office-card__media { flex: 1 1 12rem; width: auto; height: auto; min-height: 12rem; aspect-ratio: auto; margin: 0 0 20px; border-radius: 0; }
  .home2 .home2-office-sheet .office-card > :not(.office-card__media) { margin-inline: 24px; }
  .home2 .home2-office-sheet .office-card:has(> .office-card__media) > h3 { align-self: auto; margin: 0 24px 8px; }
}

/* ---------- #urgent-help: continues the porcelain contact band ---------- */
/* A soft warm-taupe surface with no edge; the ink CTA is the only strong mark in it. */
.home2-urgent { padding-block: 0 var(--h2-section-y); }
.home2-urgent__tile {
  display: flex;
  align-items: center;
  gap: 16px 20px;
  padding: 20px 28px;
  border: 0;
  border-radius: var(--h2-radius-card);
  background: var(--h2-urgent);
  color: var(--h2-ink);
}
.home2-urgent__tile > i { flex: none; width: 20px; font-size: 20px; text-align: center; }
.home2-urgent__tile > p { flex: 1; min-width: 0; color: inherit; font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); }
.home2-urgent__tile strong { font-weight: 600; }
.home2 .home2-urgent__tile > .button { flex: none; }
@media (max-width: 734px) {
  .home2-urgent__tile { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; padding: 24px; }
  .home2-urgent__tile > i { margin-top: 3px; }
  .home2 .home2-urgent__tile > .button { grid-column: 1 / -1; width: 100%; margin-top: 4px; }
}

/* ---------- #care: Apple-style photo tiles (round 4); layout and tiles live in home2-services.css ---------- */
/* One surface, no edge: kept here with the page-wide no-double-frames rules. */
.home2 .home2-bento .service-card { border: 0; }

/* ---------- #care-requests: the Second Opinion / Check Your Insurance pair ---------- */
.home2-pair-band { padding-block: 24px var(--h2-section-y); }
.home2 .home2-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--h2-gap); align-items: start; }
.home2 .home2-pair__card {
  display: grid;
  grid-template-rows: auto auto auto auto;
  row-gap: 16px;
  align-content: start;
  justify-items: start;
  min-width: 0;
  padding: 40px;
  border-radius: var(--h2-radius-tile);
  background: var(--h2-porcelain);
}
.home2 .home2-pair__card h2 { font-size: var(--h2-fs-tile); line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-tile); }
.home2 .home2-pair__card > p { max-width: 36ch; color: var(--h2-graphite); font-size: var(--h2-fs-lede); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-lede); text-wrap: pretty; }
.home2 .home2-pair__card > .button { margin: 0; }
.home2 .home2-pair__card details { justify-self: stretch; margin-top: 8px; border-top: 1px solid var(--h2-hairline); }
.home2 .home2-pair__card summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; list-style: none; font-weight: 600; cursor: pointer; }
.home2 .home2-pair__card summary::-webkit-details-marker { display: none; }
.home2 .home2-pair__card summary > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--h2-porcelain-deep); font-size: 20px; font-weight: 400; line-height: 1; }
.home2 .home2-pair__card details[open] summary > span { rotate: 45deg; }
.home2 :is(.home2-pair__card, .faq__list) summary:focus-visible { border-radius: 8px; }
.home2 .home2-pair__card details > p { padding: 4px 0 8px; color: var(--h2-graphite); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); }
/* Shared rows line up the headings, CTAs and disclosures across both cards; opening one
   disclosure only lengthens the last row, so neither CTA ever moves. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 735px) {
    .home2 .home2-pair { grid-template-rows: repeat(4, auto); row-gap: 16px; }
    .home2 .home2-pair__card { grid-row: span 4; grid-template-rows: subgrid; }
  }
}
@media (max-width: 734px) {
  .home2 .home2-pair { grid-template-columns: minmax(0, 1fr); }
  .home2 .home2-pair__card { padding: 28px; }
}

/* ---------- Shared type for the lower sections ---------- */
.home2 h2 :is(em, .home2-tone) { font-style: normal; color: var(--h2-graphite); }
.home2 :is(.journey__copy, .home2-faq__intro) h2 { font-size: var(--h2-fs-section); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-section); text-wrap: balance; }
.home2 :is(.journey__copy, .home2-faq__intro) > p:not(.eyebrow) {
  max-width: 36ch;
  margin-top: 20px;
  color: var(--h2-graphite);
  font-size: var(--h2-fs-lede);
  line-height: var(--h2-lh-text);
  letter-spacing: var(--h2-ls-lede);
  text-wrap: pretty;
}

/* ---------- #all-on-x: the night band (brass only on the eyebrow and numerals; a porcelain pill) ---------- */
.home2-feature { padding-block: var(--h2-section-y-feature); background: radial-gradient(60% 45% at 50% 0%, var(--h2-glow), transparent 70%), var(--h2-night); color: var(--h2-night-text); text-align: center; }
.home2-feature > .home2-wrap { max-width: 980px; }
.home2 .home2-feature .eyebrow { color: var(--h2-brass-night); }
.home2-feature h2 { color: var(--h2-night-text); font-size: var(--h2-fs-headline); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-headline); }
/* Line masks: the inner span stays inline-block in every state so the rise can animate. */
.home2-line { display: block; overflow: clip; padding-block-end: .12em; margin-block-end: -.12em; }
.home2-line > span { display: inline-block; }
.home2-line + .home2-line { color: var(--h2-night-text-2); }
.home2-feature__description { max-width: 60ch; margin: 32px auto 0; }
.home2-feature__description > p { color: var(--h2-night-text-2); font-size: var(--h2-fs-lede); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-lede); text-wrap: pretty; }
.home2-feature__description > p + p { margin-top: 20px; }
.home2 .home2-feature__lede { font-size: var(--h2-fs-subhead); line-height: var(--h2-lh-title); }
.home2-highlight { color: var(--h2-night-text); font-weight: 500; }
.home2 .home2-feature__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--h2-gap); margin-top: var(--h2-head-gap); padding: 0; list-style: none; text-align: left; }
.home2-feature__steps li { min-width: 0; padding: 32px; border-radius: var(--h2-radius-tile); background: var(--h2-night-tile); }
.home2-feature__steps span { display: block; margin-bottom: 40px; color: var(--h2-brass-night); font-size: var(--h2-fs-body); font-weight: 600; font-variant-numeric: tabular-nums; }
.home2-feature__steps h3 { margin-bottom: 10px; color: var(--h2-night-text); font-size: var(--h2-fs-card); line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-card); }
.home2-feature__steps p { color: var(--h2-night-text-2); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); }
.home2-feature__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; margin-top: 48px; }
.home2 .home2-feature .button:not(.button--outline) { background: var(--h2-porcelain); color: var(--h2-ink); }
.home2 .home2-feature .button:not(.button--outline):is(:hover, :active) { background: #ffffff; color: var(--h2-ink); }
.home2 .home2-feature .text-link { color: var(--h2-night-text); }
.home2 .home2-feature :focus-visible { outline-color: var(--h2-focus-dark); }
.home2 .home2-fine-print { max-width: 60ch; margin-top: 28px; color: var(--h2-night-text-2); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); }
@media (max-width: 734px) {
  .home2 .home2-feature__steps { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home2-feature__steps li { padding: 28px; }
  .home2-feature__steps span { margin-bottom: 20px; }
}

/* ---------- #experience: gallery ---------- */
/* Slides are one content column wide and a trailing spacer lets the last one reach the
   column edge too, so practice-gallery.js can make every photo current ("Photo 3 of 3"). */
.home2-experience { padding-bottom: var(--h2-section-y); }
.home2 .home2-gallery { --h2-slide: var(--h2-content); --h2-frame: 2 / 1; min-width: 0; }
.home2 .home2-gallery .practice-gallery__track {
  display: flex;
  gap: var(--h2-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 0 4px calc((100% - var(--h2-content)) / 2);
  scroll-padding-inline: calc((100% - var(--h2-content)) / 2);
  border-radius: 0;
  background: none;
  scrollbar-color: var(--h2-stone) transparent;
}
.home2 .home2-gallery .practice-gallery__track::after { content: ""; flex: 0 0 max(0px, calc(100% - var(--h2-slide) - var(--h2-gap))); }
/* Without JS the thin scrollbar stays as the cue. */
.home2 .home2-gallery[data-enhanced] .practice-gallery__track { scrollbar-width: none; }
.home2 .home2-gallery[data-enhanced] .practice-gallery__track::-webkit-scrollbar { display: none; }
.home2 :is(.home2-gallery .practice-gallery__track, .reviews-rail):focus-visible { outline-offset: -3px; }
.home2 .home2-gallery .practice-slide {
  position: relative;
  isolation: isolate;
  flex: 0 0 var(--h2-slide);
  min-width: 0;
  aspect-ratio: var(--h2-frame);
  margin: 0;
  overflow: hidden; overflow: clip;
  border-radius: var(--h2-radius-media);
  background: var(--h2-porcelain);
  color: var(--h2-ink);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.home2 .home2-gallery .practice-slide__image { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #1b1917; }
.home2 .home2-gallery .practice-slide__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.home2 .home2-gallery figcaption { max-width: 26em; padding: clamp(24px, 3vw, 40px); }
.home2 .home2-gallery .practice-slide__office { margin-bottom: 10px; color: var(--h2-graphite); font-size: var(--h2-fs-small); font-weight: 600; line-height: 1.3; }
.home2 .home2-gallery figcaption h3 { margin-bottom: 12px; font-size: var(--h2-fs-tile); line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-tile); text-wrap: balance; }
.home2 .home2-gallery figcaption p:last-child { color: var(--h2-graphite); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); }
/* Portraits sit beside their caption, so the chair, sign, door and steps stay visible. All three
   slides are portraits since round 4 (the landscape reception photo repeated the hero's sign). */
.home2 .home2-gallery .practice-slide--portrait { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: end; }
.home2 .home2-gallery .practice-slide--portrait .practice-slide__image { position: relative; inset: auto; z-index: auto; height: 100%; }
.home2 .home2-gallery .practice-slide--exterior .practice-slide__image img { object-position: 50% 35%; }
.home2 .home2-gallery .practice-gallery__controls { display: flex; align-items: center; gap: 16px; width: var(--h2-content); margin: 24px auto 0; padding: 0; }
.home2 .practice-gallery__count { min-width: 7.5em; color: var(--h2-graphite); font-size: var(--h2-fs-small); font-variant-numeric: tabular-nums; }
.home2 .practice-gallery__arrows { display: flex; gap: 8px; }
.home2 .practice-gallery__arrows button {
  display: grid;
  place-items: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--h2-porcelain-deep);
  color: var(--h2-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.home2 .home2-gallery .why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; width: var(--h2-content); margin: 56px auto 0; }
.home2 .home2-gallery .why-grid article { padding: 24px 0 0; border: 0; border-top: 1px solid var(--h2-hairline); border-radius: 0; background: none; }
.home2 .home2-gallery .why-grid h3 { margin: 0 0 10px; font-size: 1.3125rem; line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-card); }
.home2 .home2-gallery .why-grid p { color: var(--h2-graphite); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); }
@media (min-width: 735px) and (max-width: 1068px) {
  .home2 .home2-gallery { --h2-frame: 16 / 10; }
  .home2 .home2-gallery .practice-slide--portrait { grid-template-columns: 50% minmax(0, 1fr); }
}
@media (max-width: 734px) {
  .home2 .home2-gallery { --h2-slide: 84vw; }
  .home2 .home2-gallery .practice-slide { display: flex; flex-direction: column; align-items: stretch; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
  .home2 .home2-gallery .practice-slide__image { position: relative; inset: auto; z-index: auto; aspect-ratio: 4 / 5; border-radius: var(--h2-radius-media); }
  .home2 .practice-slide figcaption { position: static; max-width: none; padding: 16px 4px 0; }
  .home2 [data-enhanced] .practice-slide:not(.is-current) figcaption { opacity: 0; }
  .home2 .home2-gallery .why-grid { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
}

/* ---------- #reviews (renderer markup untouched; reviews.js is the only thing that moves on its own) ---------- */
.home2 .home2-reviews .reviews-cta { margin-top: 20px; }
.home2 .reviews-cta .review-arrow { width: 20px; height: 20px; }
.home2 .reviews-controls { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.home2 .reviews-pause { min-height: 44px; padding: 10px 20px; border: 0; border-radius: var(--h2-radius-pill); background: var(--h2-porcelain-deep); color: var(--h2-ink); font: 500 var(--h2-fs-small)/1.2 var(--h2-font-text); cursor: pointer; }
.home2 .reviews-pause:hover { box-shadow: inset 0 0 0 1px var(--h2-stone); }
.home2 .reviews-pause:disabled { display: none; }
.home2 .reviews-rail { gap: var(--h2-gap); padding: 4px calc((100% - var(--h2-content)) / 2) 24px; scroll-padding-inline: calc((100% - var(--h2-content)) / 2); scrollbar-color: var(--h2-stone) transparent; }
.home2 .reviews-rail .review-card { flex: 0 0 380px; padding: 28px; border: 0; border-radius: var(--h2-radius-card); background: var(--h2-canvas); color: var(--h2-ink); }
.home2 .review-card__header { gap: 14px; margin-bottom: 20px; }
.home2 .review-card__avatar { width: 44px; height: 44px; background: var(--h2-porcelain-deep); color: var(--h2-ink); font-size: var(--h2-fs-small); font-weight: 600; }
.home2 .review-card__author { font: 600 var(--h2-fs-body)/1.35 var(--h2-font-text); letter-spacing: var(--h2-ls-body); }
.home2 .review-card__office { width: fit-content; margin-top: 6px; padding: 4px 10px; border-radius: var(--h2-radius-pill); background: var(--h2-porcelain); color: var(--h2-graphite); font-size: var(--h2-fs-small); line-height: 1.3; }
.home2 .review-card__stars { margin-bottom: 16px; color: var(--h2-ink); font-size: 17px; letter-spacing: 3px; }
.home2 .review-card__quote { margin: 0 0 20px; color: var(--h2-ink); font: 400 var(--h2-fs-lede)/var(--h2-lh-text) var(--h2-font-text); letter-spacing: var(--h2-ls-lede); }
.home2 :is(.review-card__date, .review-card__excerpt) { color: var(--h2-graphite); font-size: var(--h2-fs-small); }
.home2 .review-card__footer { border-top-color: var(--h2-hairline); }
.home2 .review-card__source { gap: 6px; color: var(--h2-ink); }
@media (min-width: 735px) and (max-width: 1068px) {
  .home2 .reviews-rail .review-card { flex-basis: 340px; }
}
@media (max-width: 734px) {
  .home2 .reviews-rail { gap: 12px; }
  .home2 .reviews-rail .review-card { flex-basis: 84vw; padding: 24px; }
}

/* #doctors: the round-4 editorial triptych lives in home2-doctors.css. */

/* ---------- #first-visit: a static story everywhere; pinned only on tall desktops (below) ---------- */
.home2 .journey,
.home2 .journey.journey-ready { height: auto; min-height: 0; margin: 0; padding-block: var(--h2-section-y); background: var(--h2-porcelain); }
.home2 .journey-ready .journey-sticky,
.home2 .journey-sticky {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  gap: 32px;
  width: var(--h2-content);
  height: auto;
  max-height: none;
  min-height: 0;
  margin-inline: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.home2 :is(.journey__copy, .journey__photos, .journey__control) { grid-column: 1; grid-row: auto; }
.home2 .journey__copy > .button { margin-top: 28px; }
.home2 .journey__photos { aspect-ratio: 16 / 10; height: auto; min-height: 0; border: 0; border-radius: var(--h2-radius-media); background: #1b1917; }
.home2 .journey__photos img { transform: none; scale: 1.04; }
.home2 .journey__photos img.is-active { scale: 1; }
/* Roslyn keeps its window light and the chair in the 4:5 frame. */
.home2 .journey__photos img[data-journey-image="1"] { object-position: 35% 50%; }
.home2 .journey__tabs { flex-direction: column; gap: 0; padding: 0; }
.home2 .journey__tabs::before,
.home2 .journey__tabs::after { display: none; }
.home2 .journey__tabs button {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 10px 0 10px 22px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--h2-graphite);
  font: 600 1.3125rem/1.3 var(--h2-font-text);
  letter-spacing: var(--h2-ls-card);
  text-align: left;
}
/* A 2px rail per step; outside the pinned story the active tab is simply filled. */
.home2 .journey__tabs button::before,
.home2 .journey__tabs button::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 0; width: 2px; border-radius: 2px; background: var(--h2-hairline); }
.home2 .journey__tabs button::after { background: var(--h2-ink); transform: scaleY(0); transform-origin: top; }
.home2 .journey__tabs button[aria-selected="true"] { background: none; color: var(--h2-ink); }
.home2 .journey__tabs button[aria-selected="true"]::after { transform: none; }
.home2 .journey__panels { min-height: calc(3 * var(--h2-lh-text)); padding-top: 16px; font-size: var(--h2-fs-lede); }
.home2 .journey__panels p { max-width: 36ch; color: var(--h2-graphite); font-size: inherit; line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-lede); }
@media (min-width: 1069px) {
  .home2 .journey-ready .journey-sticky,
  .home2 .journey-sticky { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; align-content: center; column-gap: 20px; row-gap: 40px; }
  .home2 .journey__copy { grid-column: 1 / 6; grid-row: 1; align-self: end; }
  .home2 .journey__control { grid-column: 1 / 6; grid-row: 2; align-self: start; }
  /* Sized from the column width, capped by the viewport so it fits the pinned stage. */
  .home2 .journey__photos { grid-column: 7 / -1; grid-row: 1 / 3; align-self: center; justify-self: end; width: min(100%, 576px, calc((100svh - 160px) * .8)); aspect-ratio: 4 / 5; }
}
@media (max-width: 734px) {
  .home2 .journey__photos { aspect-ratio: 4 / 5; }
}

/* ---------- #faq (the band layout and item cards live in home2-cta.css) ---------- */
.home2 .home2-faq__intro .text-link { margin-top: 12px; }
.home2 .faq__list { border-top: 1px solid var(--h2-hairline); }
.home2 .faq__list details { border-bottom: 1px solid var(--h2-hairline); }
.home2 .faq__list summary { gap: 24px; min-height: 72px; padding-block: 22px; font-size: var(--h2-fs-lede); font-weight: 600; line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-lede); }
.home2 .faq__list summary > span { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--h2-porcelain); font-size: 22px; font-weight: 400; line-height: 1; }
.home2 .faq__list details[open] summary > span { transform: none; rotate: 45deg; }
.home2 .faq__list details p { max-width: 60ch; padding: 0 0 28px; color: var(--h2-graphite); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); }
.home2 .faq__list details p a { color: var(--h2-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- #visit: the detailed office cards with hours ---------- */
.home2 .office-card__hours { margin-block: 20px 4px; padding-top: 16px; border-top: 1px solid var(--h2-hairline); }
.home2 .office-card__hours h4 { color: var(--h2-graphite); font: 600 var(--h2-fs-small)/1.4 var(--h2-font-text); letter-spacing: 0; }
.home2 .office-card__hours ul { margin-top: 4px; line-height: 1.4; }
.home2 .office-card__hours li { padding: 10px 0; border-bottom: 1px solid var(--h2-hairline); color: var(--h2-graphite); font-size: var(--h2-fs-body); font-variant-numeric: tabular-nums; }
.home2 .office-card__hours li:last-child { border-bottom: 0; }
/* home2.js marks today's row only where that office lists hours; no text is added. */
.home2 .office-card__hours li.is-today { color: var(--h2-ink); font-weight: 600; }
/* One office per row until three columns fit the longest email and hour range on one line
   (87em, with some slack); hours beside the contacts from 60em, below them under that. */
@media (min-width: 735px) and (max-width: 86.99em) {
  .home2 .home2-visit-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 735px) and (max-width: 59.99em) {
  .home2 .home2-visit-grid .office-card__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
  .home2 .home2-visit-grid .office-card__actions .button { width: auto; }
}
@media (min-width: 60em) and (max-width: 86.99em) {
  .home2 .home2-visit-grid .office-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; padding: 32px 0; }
  .home2 .home2-visit-grid .office-card > * { grid-column: 1; grid-row: auto; }
  .home2 .home2-visit-grid .office-card > h3:first-child { margin-top: 0; }
  .home2 .home2-visit-grid .office-card__hours { grid-column: 2; grid-row: 1 / -1; margin-block: 0; padding: 0 0 0 28px; border-top: 0; border-left: 1px solid var(--h2-hairline); }
  .home2 .home2-visit-grid .office-card__actions { grid-row: 4; align-self: end; }
}

/* ---------- Form fields shared by the callback dialog and the CTA card (card overrides in home2-cta.css) ---------- */
.home2 :is(.office-select-label, .contact-form-field label) { display: block; margin-bottom: 8px; color: var(--h2-ink); font-size: var(--h2-fs-small); font-weight: 600; }
.home2 :is(.office-select, .contact-form-field input, .contact-form-field textarea) {
  min-height: 56px;
  padding: 14px 16px;
  border: 1px solid var(--h2-stone);
  border-radius: var(--h2-radius-field);
  background-color: var(--h2-canvas);
  color: var(--h2-ink);
  font: 400 var(--h2-fs-body)/1.4 var(--h2-font-text);
}
.home2 .office-select { appearance: none; padding-right: 48px; background: var(--h2-canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232323' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; }
/* Transparent outline keeps a ring in forced colours; elsewhere the border and halo show focus. */
.home2 :is(.office-select, .contact-form-field input, .contact-form-field textarea):focus-visible { outline: 2px solid transparent; border-color: var(--h2-ink); box-shadow: 0 0 0 1px var(--h2-ink), 0 0 0 5px rgb(35 35 35 / .08); }
.home2 .contact-form :user-invalid { border-color: var(--h2-error); }
.home2 .contact-form-consent input { width: 24px; height: 24px; accent-color: var(--h2-ink); }
.home2 :is(.contact-form > p, .contact-form-intro, .contact-form-consent, .contact-form-field p) { color: var(--h2-graphite); }
.home2 .contact-form button[type="submit"] { width: 100%; min-height: 52px; }

/* ---------- Footer (shared markup; porcelain band on the homepage only) ---------- */
.home2 .footer { margin: 0; padding: var(--h2-section-y) var(--h2-gutter) calc(120px + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: 0; background: var(--h2-porcelain); color: var(--h2-ink); }
/* V1 "framed" inner outline: titan hides it for the footer only by source order; never draw it here. */
.home2 .framed::before { content: none; }
.home2 .footer :is(.footer__intro, .footer__primary, .footer__grid, .footer__offices, .footer__socials, .footer__legal) { border: 0; border-bottom: 1px solid var(--h2-hairline); border-radius: 0; }
.home2 .footer__intro { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 0 0 40px; }
.home2 .brand--footer { width: auto; padding: 0; border-radius: 0; background: none; align-self: center; }
.home2 .brand--footer img { width: auto; height: 48px; }
.home2 .footer__statement { margin-right: auto; font: 600 1.3125rem/1.3 var(--h2-font-text); letter-spacing: var(--h2-ls-card); }
.home2 .footer__intro > .button { display: inline-flex; }
.home2 .footer__primary { display: flex; flex-wrap: wrap; gap: 0 32px; padding: 20px 0; overflow: visible; }
.home2 .footer__primary a { min-height: 44px; padding: 0; border: 0; color: var(--h2-ink); font-size: var(--h2-fs-body); font-weight: 500; }
.home2 .footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; padding: 40px 0; }
.home2 .footer__grid p { max-width: 40ch; }
.home2 .footer :is(.footer__grid h2, .footer__legal h2) { margin-bottom: 8px; color: var(--h2-ink); font: 600 var(--h2-fs-small)/1.5 var(--h2-font-text); letter-spacing: 0; }
.home2 .footer :is(.footer__grid p, .footer__bottom p, .footer__grid a, .footer__office a, .footer__legal-links a, .footer__privacy a) { color: var(--h2-graphite); font-size: var(--h2-fs-small); }
.home2 .footer__offices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 40px 0; }
.home2 .footer__office + .footer__office { padding-top: 0; border-top: 0; }
.home2 .footer__office h3 { margin-bottom: 8px; font-size: var(--h2-fs-body); line-height: 1.4; letter-spacing: var(--h2-ls-body); }
.home2 .footer__socials { padding: 20px 0; }
.home2 .footer__socials a { color: var(--h2-ink); font-size: var(--h2-fs-small); }
.home2 .footer__legal { padding: 24px 0; }
.home2 .footer__bottom { padding: 20px 0 0; border: 0; border-radius: 0; }
.home2 .footer__bottom > a { margin-left: auto; color: var(--h2-ink); font-size: var(--h2-fs-small); font-weight: 500; }
.home2 .footer a:not(.button):hover { background: none; color: var(--h2-ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1068px) {
  .home2 .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home2 .footer__offices { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home2 .footer__grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 734px) {
  .home2 .footer__statement { flex-basis: 100%; }
  .home2 .footer__grid { gap: 24px 16px; }
  .home2 .footer__bottom > a { margin-left: 0; }
}

/* ---------- Dialogs (homepage.js and modules-ui.js keep their behaviour; the chat keeps its geometry) ---------- */
.home2 dialog { border: 0; border-radius: 28px; background: var(--h2-canvas); color: var(--h2-ink); box-shadow: var(--h2-shadow-float); }
.home2 dialog::backdrop { background: rgb(20 18 16 / .36); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.home2 :is(#office-dialog, #flow-offices) { width: min(760px, calc(100vw - 32px)); padding: 40px; }
.home2 #callback-dialog { width: min(560px, calc(100vw - 32px)); padding: 40px; }
.home2 dialog h2 { margin-bottom: 12px; padding-right: 48px; text-wrap: balance; font-size: clamp(1.5rem, 1.35rem + .75vw, 2rem); line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-card); }
.home2 dialog :is(h2 + p, [data-chat-choices] > p) { color: var(--h2-graphite); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); }
.home2 .dialog-close { top: 16px; right: 16px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--h2-porcelain-deep); color: var(--h2-ink); font-size: 24px; line-height: 1; }
.home2 :is(.office-choices, .flow-office-grid) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.home2 :is(.office-choices, .flow-office-grid) article { display: flex; flex-direction: column; align-items: stretch; gap: 8px; min-width: 0; padding: 20px; border: 0; border-radius: var(--h2-radius-card); background: var(--h2-porcelain); }
.home2 :is(.office-choices, .flow-office-grid) h3 { font-size: var(--h2-fs-card); line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-card); }
.home2 .office-choices p { color: var(--h2-graphite); font-size: var(--h2-fs-small); line-height: 1.5; }
.home2 .office-choices p a { text-decoration: underline; text-underline-offset: 3px; }
.home2 .office-choice__actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 8px; }
.home2 :is(.office-choice__actions, .flow-office-grid, .chat-office-choices) .button { width: 100%; margin: 0; }
@media (min-width: 735px) {
  .home2 .office-choices { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .home2 .office-choices article { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; }
  .home2 .office-choice__actions { grid-area: 1 / 2 / 3; margin: 0; padding: 0; }
  .home2 .office-choice__actions .button { white-space: nowrap; }
}
@media (max-width: 734px) {
  .home2 :is(#office-dialog, #flow-offices, #callback-dialog) { padding: 24px; }
  .home2 :is(.office-choices, .flow-office-grid) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ---------- Motion (every animation and transition is gated here) ---------- */
@keyframes home2-pin-pulse { from { opacity: 0; scale: 1; } 15% { opacity: .9; } to { opacity: 0; scale: 3.4; } }
@media (prefers-reduced-motion: no-preference) {
  body.home2 .site-header { transition: box-shadow var(--h2-dur-ui) var(--h2-ease-emphasized); }
  .home2 .button { transition: background-color var(--h2-dur-ui) var(--h2-ease-standard), color var(--h2-dur-ui) var(--h2-ease-standard), box-shadow var(--h2-dur-ui) var(--h2-ease-standard), scale var(--h2-dur-press) var(--h2-ease-standard); }
  .home2 .button:active { scale: .98; }
  /* Titan animates the dock's min-height and padding; only colours and label opacity move here. */
  .home2 .quick-actions__items > a,
  .home2 .quick-actions__items > button { transition: background-color var(--h2-dur-ui) var(--h2-ease-standard), color var(--h2-dur-ui) var(--h2-ease-standard); }
  .home2 .quick-actions__items > * > span { transition: opacity 160ms var(--h2-ease-standard); }
  .has-dock-navigation .home2 #primary-navigation { transition: opacity var(--h2-dur-ui) var(--h2-ease-emphasized), translate var(--h2-dur-ui) var(--h2-ease-emphasized); }
  @starting-style {
    .has-dock-navigation .home2 #primary-navigation { opacity: 0; translate: 0 8px; }
  }
  .home2 .home2-rail-controls .round-button { transition: background-color var(--h2-dur-ui) var(--h2-ease-standard); }

  /* Reveals move translate and opacity; delays belong to those two properties only, so a
     later hover (scale) is never delayed. */
  .home2 .reveal { transition: opacity var(--h2-dur-reveal) var(--h2-ease-out), translate var(--h2-dur-rise) var(--h2-ease-out); }
  .js-motion .home2 .reveal:not(.is-visible) { opacity: 0; translate: 0 var(--h2-rise); transform: none; }
  .js-motion .home2 .home2-stagger.reveal:not(.is-visible) { opacity: 1; translate: none; }
  .js-motion .home2 .home2-stagger.reveal:not(.is-visible) > * { opacity: 0; translate: 0 var(--h2-rise); }
  .home2 .home2-stagger > * {
    transition:
      opacity var(--h2-dur-reveal) var(--h2-ease-out) calc(var(--i, 0) * var(--h2-stagger)),
      translate var(--h2-dur-rise) var(--h2-ease-out) calc(var(--i, 0) * var(--h2-stagger)),
      scale 300ms var(--h2-ease-hover),
      box-shadow 300ms var(--h2-ease-hover);
  }
  .home2 .home2-office-grid .office-card__media img { transition: scale var(--h2-dur-media) var(--h2-ease-media); }
  .js-motion .home2 .home2-office-grid.reveal:not(.is-visible) .office-card__media img { scale: var(--h2-media-scale); }

  /* #locations (about 1.6s, armed by home2.js on a fresh visit only): the map settles, then each
     office (.is-in) drops its pin, raises its chip and rings once, west to east (--step);
     .is-quick drops the delays. The cards are never hidden by the entrance. */
  .home2-map { --pace: 1; --pin-lead: 250ms; --pin-gap: 180ms; --ring-at: 700ms; }
  .home2-map.is-quick { --pace: 0; }
  .home2-motion .home2 .home2-map.is-armed:not(.is-entered) .home2-map__img { opacity: 0; scale: 1.06; }
  .home2-motion .home2 .home2-map.is-armed:not(.is-entered) .home2-map__label { opacity: 0; }
  .home2-motion .home2 .home2-map.is-armed .home2-map__pin:not(.is-in) { opacity: 0; translate: 0 -20px; scale: .6; }
  .home2-motion .home2 .home2-map.is-armed .home2-map__chip:not(.is-in) { opacity: 0; translate: 0 10px; }
  .home2-map__pin::before,
  .home2-map__pin::after { transition: scale var(--h2-dur-ui) var(--h2-ease-standard), opacity var(--h2-dur-ui) var(--h2-ease-standard); }
  .home2 .home2-map__chip { transition: box-shadow 300ms var(--h2-ease-hover), scale var(--h2-dur-press) var(--h2-ease-standard); }
  .home2 .home2-map__chip:active { scale: .97; }
  .home2-map.is-entered .home2-map__img { transition: opacity 1200ms var(--h2-ease-out), scale 1200ms var(--h2-ease-out); }
  .home2-map.is-entered .home2-map__label { transition: opacity 700ms var(--h2-ease-standard) calc(var(--pace) * 450ms); }
  .home2-map.is-entered .home2-map__pin.is-in {
    --wait: calc(var(--pace) * (var(--pin-lead) + var(--step) * var(--pin-gap)));
    transition: opacity 300ms var(--h2-ease-out) var(--wait), translate 560ms cubic-bezier(.34, 1.3, .64, 1) var(--wait), scale 560ms cubic-bezier(.34, 1.3, .64, 1) var(--wait);
  }
  .home2-map.is-entered .home2-map__pin.is-in::after { animation: home2-pin-pulse 1000ms var(--h2-ease-out) calc(var(--pace) * (var(--ring-at) + var(--step) * var(--pin-gap))) backwards; }
  .home2 .home2-map.is-entered .home2-map__chip.is-in {
    --wait: calc(var(--pace) * (var(--pin-lead) + 220ms + var(--step) * var(--pin-gap)));
    transition: opacity 420ms var(--h2-ease-out) var(--wait), translate 640ms var(--h2-ease-out) var(--wait), box-shadow 300ms var(--h2-ease-hover), scale var(--h2-dur-press) var(--h2-ease-standard);
  }
  /* The office sheet: home2.js zooms the frame (transform/opacity); the backdrop fades in with it
     and out a little faster. The shared dialog fade does not apply here. */
  .home2 .home2-office-sheet[open] { transition-property: none; }
  .home2 .home2-office-sheet::backdrop { transition: opacity 360ms var(--h2-ease-standard); }
  .home2 .home2-office-sheet.is-open::backdrop { transition: opacity 520ms var(--h2-ease-out); }

  .home2 :is(.home2-pair__card, .faq__list) summary > span { transition: rotate var(--h2-dur-ui) var(--h2-ease-standard), background-color var(--h2-dur-ui) var(--h2-ease-standard); }

  /* All-on-X: the intro block stays put; its copy fades in and each line rises out of its mask. */
  .js-motion .home2 .home2-feature__intro.reveal:not(.is-visible) { opacity: 1; translate: none; }
  .js-motion .home2 .home2-feature__intro.reveal:not(.is-visible) > :not(h2) { opacity: 0; translate: 0 var(--h2-rise); }
  .js-motion .home2 .home2-feature__intro.reveal:not(.is-visible) .home2-line > span { transform: translateY(105%); }
  .home2 .home2-feature__intro > :not(h2) { transition: opacity var(--h2-dur-reveal) var(--h2-ease-out) 240ms, translate var(--h2-dur-rise) var(--h2-ease-out) 240ms; }
  .home2-line > span { transition: transform var(--h2-dur-reveal) var(--h2-ease-out); }
  .home2-line + .home2-line > span { transition-delay: 120ms; }
  /* Media reveals: the frame is visible at once and only the photo settles. */
  .js-motion .home2 .home2-reveal-media.reveal:not(.is-visible) { opacity: 1; translate: none; }
  .js-motion .home2 .home2-reveal-media.reveal:not(.is-visible) img { scale: var(--h2-media-scale); }
  .home2 :is(.home2-reveal-media, .journey__photos) img { transition: opacity 600ms var(--h2-ease-standard), scale var(--h2-dur-media) var(--h2-ease-media); }
  .home2 .journey__tabs button { transition: color var(--h2-dur-ui) var(--h2-ease-standard); }
  .home2 .journey__tabs button::after { transition: transform var(--h2-dur-ui) var(--h2-ease-standard); }
  .home2 :is(.reviews-pause, .practice-gallery__arrows button, .dialog-close) { transition: background-color var(--h2-dur-ui) var(--h2-ease-standard), box-shadow var(--h2-dur-ui) var(--h2-ease-standard); }
  .home2 dialog[open] { transition: opacity var(--h2-dur-ui) var(--h2-ease-out), scale var(--h2-dur-ui) var(--h2-ease-out); }
  @starting-style {
    .home2 dialog[open] { opacity: 0; scale: .96; }
  }
}
@media (max-width: 734px) and (prefers-reduced-motion: no-preference) {
  .home2 .practice-slide figcaption { transition: opacity var(--h2-dur-fade) var(--h2-ease-standard); }
}
/* Pinned story (1.6 viewports), tall desktops with motion only (1069 × 800 at default text; em,
   so enlarged browser text keeps the static story instead of a stage taller than the window). */
@media (min-width: 66.8125em) and (min-height: 50em) and (prefers-reduced-motion: no-preference) {
  .home2 #first-visit.journey-ready { height: 260svh; padding-block: 0; }
  .home2 #first-visit.journey-ready .journey-sticky {
    position: sticky;
    top: var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px)));
    min-height: calc(100svh - var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))));
    padding-block: 32px;
  }
  .home2 #first-visit.journey-ready .journey__tabs button::after { transform: scaleY(clamp(0, calc(var(--journey-progress, 0) * 3 - var(--i)), 1)); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home2 .home2-office-grid .office-card:hover .office-card__media img { scale: 1.04; }
}
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .home2 :is(.home2-pair__card, .faq__list) details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms var(--h2-ease-standard), content-visibility 320ms allow-discrete; }
    .home2 :is(.home2-pair__card, .faq__list) details[open]::details-content { block-size: auto; }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home2 .practice-gallery__track { scroll-behavior: auto; }
}

/* ---------- Glass fallbacks (after the chrome rules they replace) ---------- */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.home2 .site-header,
  .home2 .quick-actions,
  .has-dock-navigation .home2 #primary-navigation { background-color: var(--h2-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  body.home2 .site-header,
  .home2 .quick-actions,
  .has-dock-navigation .home2 #primary-navigation { background-color: var(--h2-glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  body.home2 .site-header,
  .home2 .quick-actions,
  .has-dock-navigation .home2 #primary-navigation { background: Canvas !important; border: 1px solid CanvasText !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .home2 .button { border: 1px solid ButtonText !important; }
  .home2 :is(.home2-map__chip, .home2-office-sheet .office-card) { border: 1px solid CanvasText; }
}

/*! file: home2-hero.css */
/* HomePage 2 round 4 (OVERRIDES-3 §1): the "Arrival + brass" hero. Homepage only.
   The poster img[data-hero-image] is the LCP and the complete result without JS, under reduced
   motion and on Save-Data or 2G/3G. html.home2-film (set before first paint) pins the scene and
   home2-hero.js draws the frame sequence on a canvas over the poster. Layouts: split (copy | 4:5
   panel) from 1069px and on landscape tablets; copy above a 4:5 panel on portrait tablets; the
   9:16 film fills the phone screen with the copy over a dark gradient, where the pinned stage
   brings the copy in stages (owner decision, Artem 2026-09-21). Pinned heights and every
   transition are motion-gated; heights are minimums, so enlarged text grows the scene. */

.home2-hero {
  position: relative;
  min-height: 80svh;
  background: var(--h2-canvas);
  color: var(--h2-ink);
}
.home2-hero__stage {
  width: var(--h2-content);
  margin-inline: auto;
  padding-top: calc(var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))) + clamp(24px, 4vh, 48px));
  padding-bottom: clamp(48px, 7vh, 88px);
}
/* No JavaScript: the header sits in flow above the hero. */
html:not(.home2-js) .home2-hero__stage { padding-top: clamp(32px, 5vh, 56px); }
.home2-hero h1 { margin: 0; color: inherit; font: 600 var(--h2-fs-product)/var(--h2-lh-title) var(--h2-font-text); letter-spacing: -.012em; text-wrap: balance; }
.home2-hero__headline { margin: .3em 0 0; color: inherit; font: 600 var(--h2-fs-display)/var(--h2-lh-display) var(--h2-font-text); letter-spacing: var(--h2-ls-display); text-wrap: balance; }
.home2-hero__lit { display: block; }
.home2-hero__intro { max-width: 32em; margin: 24px 0 0; color: var(--h2-graphite); font: 400 var(--h2-fs-lede)/var(--h2-lh-text) var(--h2-font-text); letter-spacing: var(--h2-ls-lede); text-wrap: pretty; }
.home2-hero__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; margin-top: 32px; }
.home2 .home2-hero__actions .button { max-width: 100%; }
/* Owner decision (Artem, 2026-09-21): the hero office strip is gone — the map chips in #locations
   are the only office entry. The generic #office-{id} deep link still opens an office card. */

/* The media panel: one soft shadow, no border. The canvas stays transparent until a frame is drawn. */
.home2-hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--h2-radius-media);
  background: #1b1917;
  box-shadow: 0 32px 64px -32px rgb(20 18 16 / .42), 0 8px 24px -12px rgb(20 18 16 / .16);
}
.home2-hero__media picture,
.home2-hero__media img,
.home2-hero__film { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.home2-hero__media img { object-fit: cover; }
.home2-hero__film { opacity: 0; }
.home2-hero__film.is-ready { opacity: 1; }
html:not(.home2-film) .home2-hero__film { display: none; }

/* Split: copy on the left, the 4:5 panel on the right, sized to fit between the header and the
   action dock. */
@media (min-width: 1069px), (min-width: 735px) and (orientation: landscape) {
  .home2-hero__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(46%, max(300px, calc((100svh - var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))) - 152px) * .8)));
    align-items: center;
    column-gap: clamp(40px, 5.5vw, 96px);
  }
}

/* Portrait tablets: the copy stays centred above a panel as tall as the window allows (clear of
   the dock). */
@media (min-width: 735px) and (max-width: 1068px) and (orientation: portrait) {
  .home2-hero__copy { text-align: center; }
  .home2-hero__intro { margin-inline: auto; }
  .home2-hero__actions { justify-content: center; }
  .home2-hero__track { margin-top: clamp(40px, 5vh, 56px); }
  .home2-hero__media { width: min(100%, max(320px, calc((100svh - var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))) - 120px) * .8))); margin-inline: auto; }
}

/* Phones: the 9:16 poster (or film) fills the screen under the glass header and the copy sits at
   the bottom over its own dark gradient, clear of the action dock. White text on at least 66% of
   the scrim is 5.9:1 even over a white pixel. */
@media (max-width: 734px) {
  .home2-hero { min-height: 0; background: var(--h2-night); color: #fff; }
  .home2-hero__stage { display: flex; flex-direction: column; justify-content: flex-end; width: auto; min-height: 100svh; padding-bottom: 0; }
  .home2-hero__copy {
    --fade: 88px;
    position: relative;
    z-index: 1;
    padding: var(--fade) 20px calc(100px + env(safe-area-inset-bottom, 0px));
    /* Soft at both ends, so the block has no hard edge once it scrolls up over the film. */
    background: linear-gradient(to bottom, rgb(var(--h2-scrim-ink) / 0), rgb(var(--h2-scrim-ink) / .66) var(--fade), rgb(var(--h2-scrim-ink) / .82) calc(100% - 100px), rgb(var(--h2-scrim-ink) / 0));
  }
  .home2-hero__intro { margin-top: 20px; color: rgb(255 255 255 / .88); }
  .home2-hero__actions { gap: 10px; margin-top: 24px; }
  .home2 .home2-hero .button:not(.button--outline) { background: var(--h2-porcelain); color: var(--h2-ink); }
  .home2 .home2-hero .button:not(.button--outline):hover { background: #fff; color: var(--h2-ink); }
  .home2 .home2-hero .button--outline { color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .4); }
  .home2 .home2-hero .button--outline:hover { background: #fff; color: var(--h2-ink); }
  .home2 .home2-hero :focus-visible { outline-color: var(--h2-focus-dark); }
  .home2-hero__track { position: absolute; inset: 0; }
  .home2-hero__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
}
/* Short phones: a shorter fade keeps both actions above the dock. */
@media (max-width: 734px) and (max-height: 700px) {
  .home2-hero__copy { --fade: 40px; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .home2-hero__film { transition: opacity 400ms var(--h2-ease-standard); }

  /* Split scene: the stage pins for 1.5 viewports while the panel scrubs (tall windows only, in
     em so enlarged text keeps the static layout instead of a stage taller than the window). */
  /* Desktop and landscape tablets (owner decision, Artem 2026-09-23): the same scene as the phone,
     laid out sideways. The film fills the right side of the window, edge to edge and full height,
     and dissolves into the white left half, where the copy takes its turn one part at a time.
     Same --p, same windows, same html.home2-stage gate as the phone block below; without the script
     (or under reduced motion, a short window, enlarged text) the static split layout stands. */
  @media (min-width: 1069px) and (min-height: 40em), (min-width: 735px) and (orientation: landscape) and (min-height: 40em) {
    .home2-film .home2-hero { --lit: 0; min-height: 250vh; }
    /* The stage spans the window and carries the site's own gutter as padding, so the film can
       reach the right edge without a single vw sum (a classic scrollbar would make 100vw lie). */
    .home2-film .home2-hero__stage {
      position: sticky;
      top: 0;
      min-height: 100svh;
      grid-template-columns: minmax(0, 1fr);
      align-content: center;
      width: 100%;
      margin-inline: 0;
      padding-inline: calc((100% - var(--h2-content)) / 2);
      padding-bottom: 0;
    }
    /* The film takes the right 54% of the window, edge to edge and full height. */
    .home2-film .home2-hero__track { position: absolute; inset-block: 0; right: 0; left: 46%; margin: 0; }
    .home2-film .home2-hero__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
    /* The seam: the canvas carried over the film's left edge and dissolved into it, so the white
       half and the film meet in a fade instead of a cut. The copy ends before the fade does. */
    .home2-film .home2-hero__track::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, var(--h2-canvas) 0%, color-mix(in srgb, var(--h2-canvas) 0%, transparent) 42%);
      pointer-events: none;
    }
    .home2-film.home2-stage .home2-hero__copy {
      /* Windows: H1 to .26, headline .26→.58, intro from .58, actions from .74 — the phone timing. */
      --s1: clamp(0, calc((.26 - var(--p, 0)) / .08), 1);
      --s2: min(clamp(0, calc((var(--p, 0) - .26) / .08), 1), clamp(0, calc((.58 - var(--p, 0)) / .08), 1));
      --s3: clamp(0, calc((var(--p, 0) - .58) / .08), 1);
      --s4: clamp(0, calc((var(--p, 0) - .74) / .08), 1);
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: auto auto;
      align-content: center;
      /* The three lines share one cell as tall as the longest of them (the H1): sitting them at its
         foot keeps every part the same distance above the actions, instead of a hole under a short one. */
      align-items: end;
      justify-items: start;
      /* Of the content column, so the copy always ends inside the white half. */
      width: min(46%, 620px);
      min-height: 22rem;
    }
    .home2-film.home2-stage .home2-hero h1,
    .home2-film.home2-stage .home2-hero__headline,
    .home2-film.home2-stage .home2-hero__intro {
      grid-area: 1 / 1;
      margin: 0;
      translate: 0 calc((1 - var(--s4)) * var(--lift, 0px));
    }
    .home2-film.home2-stage .home2-hero h1 { font-size: var(--h2-fs-section); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-section); opacity: var(--s1); }
    .home2-film.home2-stage .home2-hero__headline { opacity: var(--s2); }
    .home2-film.home2-stage .home2-hero__intro { opacity: var(--s3); }
    .home2-film.home2-stage .home2-hero__actions { grid-row: 2; margin-top: 28px; opacity: var(--s4); translate: 0 calc((1 - var(--s4)) * 10px); }
    .home2-film.home2-stage .home2-hero:not(.is-live) .home2-hero__actions { pointer-events: none; }
    .home2-film.home2-stage .home2-hero__copy:focus-within { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
    .home2-film.home2-stage .home2-hero__copy:focus-within > * { opacity: 1; translate: none; pointer-events: auto; }
    /* "Our" then "priority." brighten over the first fifth of the scene; the .64 floor is 4.81:1 on white. */
    .home2-film .home2-hero__lit > span { opacity: clamp(.64, calc(.64 + (var(--lit) * 2 - var(--i)) * .36), 1); }
  }
  /* Portrait tablets: only the panel pins, for 1.1 viewports below the copy. */
  @media (min-width: 735px) and (max-width: 1068px) and (orientation: portrait) {
    .home2-film .home2-hero__media { position: sticky; top: calc(var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))) + 24px); }
    .home2-film .home2-hero__track::after { content: ""; display: block; min-height: 110svh; }
  }
  /* Phones (owner decisions, Artem 2026-09-21 and 2026-09-22): the whole stage pins for 1.5
     screens and the copy takes turns in one bottom-left cell — the H1 large in the corner, then
     "Your smile. Our priority." in its place, then the intro, and last the two actions under it.
     Each part fades out as the next fades in, so the film is never behind the whole block.
     --p is the pinned progress (0→1) written by home2-hero.js while html.home2-stage is set (the
     pre-paint seed; a 3 s deadline drops it if the script never arrives, and the copy then simply
     renders in flow). The actions keep row 2 from the start and the line above sits in it until
     they arrive: a transform on --lift (their measured height), never a reflow.
     min-height: 40em (em, like the split scene) drops the pin AND the staging together as soon as
     enlarged text or a short window makes the copy taller than the screen: pinning it there would
     hold the actions below the fold for the whole scene. */
  @media (max-width: 734px) and (min-height: 40em) {
    .home2-film .home2-hero { min-height: 250svh; }
    .home2-film .home2-hero__stage { position: sticky; top: 0; min-height: 100lvh; }
    .home2-film.home2-stage .home2-hero__copy {
      /* Windows: H1 to .26, headline .26→.58, intro from .58, actions from .74 — each crossfade
         .08 of the scene, and the whole message stands by .82, before the scene releases. */
      --s1: clamp(0, calc((.26 - var(--p, 0)) / .08), 1);
      --s2: min(clamp(0, calc((var(--p, 0) - .26) / .08), 1), clamp(0, calc((.58 - var(--p, 0)) / .08), 1));
      --s3: clamp(0, calc((var(--p, 0) - .58) / .08), 1);
      --s4: clamp(0, calc((var(--p, 0) - .74) / .08), 1);
      display: grid;
      grid-template-rows: auto auto;
      align-content: end;
      justify-items: start;
    }
    .home2-film.home2-stage .home2-hero h1,
    .home2-film.home2-stage .home2-hero__headline,
    .home2-film.home2-stage .home2-hero__intro {
      grid-area: 1 / 1;
      margin: 0;
      translate: 0 calc((1 - var(--s4)) * var(--lift, 0px));
    }
    /* The opening line carries the scene, so it takes the display size here. */
    .home2-film.home2-stage .home2-hero h1 { font-size: var(--h2-fs-display); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-display); opacity: var(--s1); }
    .home2-film.home2-stage .home2-hero__headline { opacity: var(--s2); }
    .home2-film.home2-stage .home2-hero__intro { opacity: var(--s3); }
    .home2-film.home2-stage .home2-hero__actions { grid-row: 2; margin-top: 20px; opacity: var(--s4); translate: 0 calc((1 - var(--s4)) * 10px); }
    /* Transparent is not gone: a stage keeps its box, so the actions must not take taps before
       they are on screen (home2-hero.js adds is-live once they are half faded in). */
    .home2-film.home2-stage .home2-hero:not(.is-live) .home2-hero__actions { pointer-events: none; }
    /* Keyboard: the parts overlap, so focus in the copy lays them back out in flow, all visible. */
    .home2-film.home2-stage .home2-hero__copy:focus-within { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
    .home2-film.home2-stage .home2-hero__copy:focus-within > * { opacity: 1; translate: none; pointer-events: auto; }
}

/*! file: home2-promos.css */
/* HomePage 2 round 10: the promotions band (Rule 10, owner decision 2026-09-22). Homepage only.
   The cards are rendered by scripts/promotions.mjs from the approved App snapshot, so this file
   only styles them; with no active promotion the band is not rendered at all. Each card names its
   office, because the offers run per office. One surface, one edge: a white card on the porcelain band, no border and no shadow. */
.home2-specials { padding-block: var(--h2-section-y); background: var(--h2-porcelain); }
.home2-specials__heading { max-width: 26em; margin-bottom: var(--h2-head-gap); }
.home2-specials__heading h2 { margin: 6px 0 0; font-size: var(--h2-fs-section); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-section); text-wrap: balance; }
.home2-specials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--h2-gap); }
.home2 .home2-promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(24px, 3vw, 32px);
  border: 0;
  border-radius: var(--h2-radius-tile);
  background: #ffffff;
  box-shadow: none;
}
.home2 .home2-promo__office { margin: 0; color: var(--h2-brass-text); font: 600 var(--h2-fs-small)/1.3 var(--h2-font-text); letter-spacing: var(--h2-ls-label); text-transform: uppercase; }
.home2 .home2-promo h3 { margin: 0; font-size: var(--h2-fs-tile); line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-tile); text-wrap: balance; }
.home2 .home2-promo__text { max-width: 34em; margin: 0; color: var(--h2-graphite); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-body); text-wrap: pretty; }
/* Two actions per offer (owner decision, Jacob 2026-09-22): read the offer, or ask for a time.
   They sit at the foot of the card and wrap onto two lines when the card is narrow. */
.home2 .home2-promo__actions { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: auto; padding-top: 6px; }

/* With a picture the card turns into a dark tile: the image is a band across the top (decorative,
   empty alt) and the offer text sits below it on the night surface, so the type never competes with
   the photograph and keeps the night band's measured contrasts. */
.home2 .home2-promo--photo { padding: 0 0 clamp(24px, 3vw, 32px); overflow: hidden; background: var(--h2-night); color: var(--h2-night-text); }
.home2 .home2-promo--photo > :not(.home2-promo__bg) { margin-inline: clamp(24px, 3vw, 32px); }
.home2 .home2-promo__bg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.home2 .home2-promo--photo .home2-promo__office { margin-top: clamp(20px, 2.5vw, 28px); color: var(--h2-brass-night); }
.home2 .home2-promo--photo .home2-promo__text { color: var(--h2-night-text-2); }
.home2 .home2-promo--photo .button { background: var(--h2-porcelain); color: var(--h2-ink); }
.home2 .home2-promo--photo .button:is(:hover, :active) { background: #ffffff; color: var(--h2-ink); }
/* The second action is the quieter one: the night surface with a hairline ring, white type on it. */
.home2 .home2-promo--photo .button--outline { background: transparent; color: var(--h2-night-text); box-shadow: inset 0 0 0 1px rgb(245 243 239 / .42); }
.home2 .home2-promo--photo .button--outline:is(:hover, :active) { background: #ffffff; color: var(--h2-ink); }
.home2 .home2-promo--photo :focus-visible { outline: 2px solid var(--h2-focus-dark); outline-offset: 3px; }

/*! file: home2-services.css */
/* HomePage 2 round 4: Apple-style service photo tiles in #care. Homepage only, loaded after
   home2.css. Owner layout (2026-09-18): Dental implants full width, Cosmetic + Invisalign,
   Crowns + Pediatric, General dentistry full width; one tile per row on phones.
   Each tile carries its title, one line and two pills in the top of its image. The image is
   anchored to the tile's bottom edge and the bottom padding reserves the part of it that holds
   the object (--zone of the image height, measured per image), so longer copy or enlarged text
   grows the tile upwards instead of covering the object. Keep readable "prop: value;" form:
   scripts/home2-services.test.mjs reads literals from this file. */

.home2-care { padding-block: var(--h2-section-y) 0; }
.home2 .home2-rail-controls { display: flex; justify-content: flex-start; align-items: center; gap: 16px; margin-bottom: 16px; color: var(--h2-graphite); font: 600 var(--h2-fs-small)/1.3 var(--h2-font-text); letter-spacing: var(--h2-ls-label); }
/* The tiles never scroll now; the approved label stays, the arrows have nothing to move. */
.home2 .home2-rail-controls > div { display: none; }

.home2 #services-rail.home2-bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--h2-gap);
  width: var(--h2-content);
  max-width: none;
  margin-inline: auto;
  padding: 0;
  overflow: visible;
  scroll-snap-type: none;
}
.home2 .home2-bento .service-card:is(:nth-child(1), :nth-child(6)) { grid-column: 1 / -1; }

.home2 .home2-bento .service-card {
  /* Image box height / tile width, and the measured share of the image (from its bottom
     edge) that holds the object: bright pixels start at 33% (implants), 44% (cosmetic),
     38% (Invisalign, crowns) and 35% (pediatric) of the image height. */
  --ratio: 1;
  --zone: .64;
  --clear: 40px;
  /* Dark renders: the top-row colours of the image, so a grown tile continues it seamlessly. */
  --tile-top: #0f0c09;
  --tile-edge: #050403;
  --tile-text: #ffffff;
  --tile-text-2: #d9d4cc;
  --tile-index: #b9b3aa;
  container: service-tile / inline-size;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* An aspect-ratio item aligns as start by default and would size its width from its height. */
  justify-self: stretch;
  align-self: stretch;
  width: auto;
  min-width: 0;
  max-width: none;
  /* At least the image's own ratio; taller copy grows it (the automatic minimum of an
     aspect-ratio box needs overflow visible, so the corners are cut with clip-path). */
  min-height: auto;
  aspect-ratio: 1 / var(--ratio);
  margin: 0;
  /* The top clears the corner numeral, also with enlarged text. */
  padding: max(48px, calc(36px + .875rem)) 32px calc(100% * var(--ratio) * var(--zone) + var(--clear));
  overflow: visible;
  clip-path: inset(0 round var(--h2-radius-tile));
  border: 0;
  border-radius: var(--h2-radius-tile);
  background: linear-gradient(90deg, var(--tile-edge), var(--tile-top) 50%, var(--tile-edge));
  color: var(--tile-text);
  text-align: center;
  box-shadow: none;
}
.home2 .home2-bento .service-card:hover { background: linear-gradient(90deg, var(--tile-edge), var(--tile-top) 50%, var(--tile-edge)); }
.home2 .home2-bento .service-card:focus-within { outline: none; }
.home2 .home2-bento .service-card:nth-child(1) { --ratio: .5; --zone: .67; --tile-top: #0f0c09; --tile-edge: #030302; }
.home2 .home2-bento .service-card:nth-child(2) { --zone: .56; --tile-top: #2f1f12; --tile-edge: #120b05; }
.home2 .home2-bento .service-card:nth-child(3) { --zone: .63; --tile-top: #16100b; --tile-edge: #090705; }
.home2 .home2-bento .service-card:nth-child(4) { --zone: .63; --tile-top: #0d0804; --tile-edge: #050301; }
.home2 .home2-bento .service-card:nth-child(5) { --zone: .66; --tile-top: #261609; --tile-edge: #110b07; }
/* General dentistry: the one real (bright) frame, ink type over a light veil. Its copy may sit
   on the top half of the photo, where the veil is. */
.home2 .home2-bento .service-card:nth-child(6) {
  --ratio: .5;
  --zone: .5;
  --tile-top: #b0b3b5;
  --tile-edge: #a4a6a8;
  --tile-text: var(--h2-ink);
  --tile-text-2: var(--h2-ink);
  --tile-index: var(--h2-ink);
}

/* The numeral: a small tracked index in the corner, outside the centred stack. */
.home2 .home2-bento .service-card__top {
  position: absolute;
  top: 24px;
  left: 28px;
  display: block;
  margin: 0;
  color: var(--tile-index);
  font: 600 .875rem/1 var(--h2-font-text);
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.home2 .home2-bento .service-card h3 {
  margin: 0;
  color: var(--tile-text);
  font-size: var(--h2-fs-tile);
  line-height: var(--h2-lh-title);
  letter-spacing: var(--h2-ls-tile);
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.home2 .home2-bento .service-card p {
  max-width: 30em;
  margin: 12px auto 0;
  color: var(--tile-text-2);
  font-size: var(--h2-fs-lede);
  line-height: var(--h2-lh-text);
  letter-spacing: var(--h2-ls-lede);
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.home2 .home2-bento .service-card:is(:nth-child(1), :nth-child(6)) p { max-width: 36em; }

.home2 .home2-bento .service-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}
.home2 .home2-bento .service-card__actions .button { min-height: 44px; padding: 10px 22px; }
/* Dark tiles follow the night band: porcelain primary with an ink label, white-edged secondary. */
.home2 .home2-bento .service-card .button:not(.button--outline) { background: var(--h2-porcelain); color: var(--h2-ink); }
.home2 .home2-bento .service-card .button:not(.button--outline):is(:hover, :active) { background: #ffffff; color: var(--h2-ink); }
.home2 .home2-bento .service-card .button--outline { background: transparent; color: var(--h2-night-text); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 40%); }
.home2 .home2-bento .service-card .button--outline:is(:hover, :active) { background: var(--h2-porcelain); color: var(--h2-ink); }
.home2 .home2-bento .service-card :focus-visible { outline: 2px solid var(--h2-focus-dark); outline-offset: 3px; }
/* The bright tile uses the light-surface actions; its secondary gets a white fill over the photo. */
.home2 .home2-bento .service-card:nth-child(6) .button:not(.button--outline) { background: var(--h2-action); color: var(--h2-action-label); }
.home2 .home2-bento .service-card:nth-child(6) .button:not(.button--outline):hover { background: var(--h2-action-hover); color: var(--h2-action-label); }
.home2 .home2-bento .service-card:nth-child(6) .button:not(.button--outline):active { background: var(--h2-action-press); color: var(--h2-action-label); }
.home2 .home2-bento .service-card:nth-child(6) .button--outline { background: rgb(255 255 255 / 72%); color: var(--h2-ink); box-shadow: inset 0 0 0 1px var(--h2-ink); }
.home2 .home2-bento .service-card:nth-child(6) .button--outline:is(:hover, :active) { background: var(--h2-ink); color: var(--h2-action-label); }
.home2 .home2-bento .service-card:nth-child(6) :focus-visible { outline-color: var(--h2-focus); }

/* The image: anchored to the bottom edge at the tile's own ratio; its top fades into the tile
   colour, which only shows when the copy grows the tile. */
.home2 .home2-bento .service-card__media {
  position: absolute;
  z-index: -2;
  inset: auto 0 0;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1 / var(--ratio);
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%);
  mask-image: linear-gradient(to bottom, transparent, #000 12%);
}
/* The veil lies on the photo's box and continues, at its top strength, over any band the copy
   adds above the photo (the upward shadow), so the ink type always sits on it. */
.home2 .home2-bento .service-card:nth-child(6)::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  aspect-ratio: 1 / var(--ratio);
  background: linear-gradient(to bottom, rgb(255 255 255 / 64%) 0%, rgb(255 255 255 / 52%) 34%, rgb(255 255 255 / 0%) 58%);
  box-shadow: 0 -2000px 0 2000px rgb(255 255 255 / 64%);
  pointer-events: none;
}

/* Narrow tiles (half tiles below ~1358px, phones) stack the two pills at one width; the longest
   pair ("Children's dental care" + "Request an appointment") needs about 500px side by side. */
@container service-tile (max-width: 519px) {
  .home2 .home2-bento .service-card__actions { flex-direction: column; align-items: stretch; gap: 10px; width: min(100%, 280px); margin-top: 20px; }
  .home2 .home2-bento .service-card__actions .button { padding-inline: 16px; }
}
@media (max-width: 1068px) {
  .home2 .home2-bento .service-card { --clear: 32px; padding-inline: 24px; }
}
/* Phones: one tile per row. Square crops of the square renders; the two wide images show their
   centre in a 4:5 crop. */
@media (max-width: 734px) {
  .home2 #services-rail.home2-bento { grid-template-columns: minmax(0, 1fr); }
  .home2 .home2-bento .service-card,
  .home2 .home2-bento .service-card:is(:nth-child(1), :nth-child(6)) { --ratio: 1; --clear: 24px; padding: max(44px, calc(32px + .875rem)) 24px calc(100% * var(--ratio) * var(--zone) + var(--clear)); }
  .home2 .home2-bento .service-card:is(:nth-child(1), :nth-child(6)) { --ratio: 1.25; }
  .home2 .home2-bento .service-card__top { top: 20px; left: 24px; }
}

@media (prefers-reduced-motion: no-preference) {
  .home2 .home2-bento .service-card__media { transition: scale var(--h2-dur-rise) ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .home2 .home2-bento .service-card:hover .service-card__media { scale: 1.03; }
}
/* Forced colours: plain tiles with an outline; the images and the veil would sit under system text. */
@media (forced-colors: active) {
  .home2 .home2-bento .service-card { border: 1px solid CanvasText; background: Canvas; }
  .home2 .home2-bento .service-card__media,
  .home2 .home2-bento .service-card::after { display: none; }
}

/*! file: home2-doctors.css */
/* HomePage 2 round 4: editorial doctors triptych. Homepage only. */
/* DOM order = phone order: Daniel, the text column, Jacob (rule 11.2). Each doctor has one tab stop,
   Learn more; the portrait's own link is a pointer-only duplicate (tabindex -1, aria-hidden). */
/* Round 5 (owner, 2026-09-18): the portraits are full bleed at every width, from the window edge to
   the text and over the whole height of the section: no radius, no shadow, no white band above or
   below (the section has no vertical padding; the text column carries its own). The grey studio
   backdrop fills each area (object-fit: cover, focal point on the doctor). */
.home2-band.home2-doctors { padding-block: 0; }
.home2-doctors__triptych { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.home2-doctors__portrait { position: relative; justify-self: stretch; min-width: 0; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 0; background: #8f8f8f; }
.home2-doctors__portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home2-doctors__portrait--daniel img { object-position: 54% 30%; }
.home2-doctors__portrait--jacob img { object-position: 48% 30%; }
.home2-doctors__portrait-link { position: absolute; inset: 0; }
/* The text keeps the page's content edges: the gutter is half of what the content width leaves. */
.home2-doctors__column { min-width: 0; padding: clamp(56px, 10vw, 96px) calc((100% - var(--h2-content)) / 2); }
.home2-doctors__column h2 { margin: 0; font-size: var(--h2-fs-section); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-section); text-wrap: balance; }
.home2-doctors__column h2 em { font-style: normal; color: var(--h2-graphite); }
.home2-doctors__intro { max-width: 40ch; margin: 20px 0 0; color: var(--h2-graphite); font-size: var(--h2-fs-lede); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-lede); text-wrap: pretty; }
.home2-doctors__list { display: grid; gap: 28px var(--h2-gap); margin: 36px 0 0; padding: 0; list-style: none; }
.home2-doctors__doctor { min-width: 0; padding-top: 20px; border-top: 1px solid var(--h2-hairline); }
.home2-doctors__doctor h3 { margin: 0; color: var(--h2-ink); font-size: var(--h2-fs-card); font-weight: 600; line-height: var(--h2-lh-title); letter-spacing: var(--h2-ls-card); }
.home2-doctors__role { margin: 4px 0 0; color: var(--h2-graphite); font-size: var(--h2-fs-small); font-weight: 600; line-height: 1.3; }
.home2-doctors__doctor p:not(.home2-doctors__role) { max-width: 36ch; margin: 10px 0 0; color: var(--h2-graphite); font-size: var(--h2-fs-body); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-body); text-wrap: pretty; }
.home2 .home2-doctors__doctor .text-link { margin-top: 4px; }

/* Tablet, and laptops too narrow for the centre column without cropping the seated portraits:
   both portraits side by side, the text below with each doctor under their own portrait. */
@media (min-width: 735px) {
  .home2-doctors__triptych { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "daniel jacob" "text text"; }
  .home2-doctors__portrait--daniel { grid-area: daniel; }
  .home2-doctors__portrait--jacob { grid-area: jacob; }
  .home2-doctors__column { grid-area: text; }
  .home2-doctors__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Small laptops: the heading on the left, the introduction on the right, on the portraits' grid. */
@media (min-width: 1069px) {
  .home2-doctors__column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--h2-gap); align-items: end; }
  .home2 .home2-doctors__column > :is(.eyebrow, h2) { grid-column: 1; }
  .home2-doctors__intro { grid-column: 2; grid-row: 1 / 3; margin: 0; }
  .home2-doctors__list { grid-column: 1 / -1; }
}

/* Desktop: portrait | flat white column | portrait, from window edge to window edge at any width.
   The portraits take the section's whole height and crop studio backdrop (the doctor stays in
   frame); at least 38vw tall, so wide windows never crop a portrait to landscape. Breakpoint in em,
   so enlarged text keeps the stacked layout instead of narrower portraits. */
@media (min-width: 80em) {
  .home2-doctors__triptych { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "daniel text jacob"; min-height: 38vw; }
  .home2-doctors__portrait { align-self: stretch; aspect-ratio: auto; }
  .home2-doctors__column { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(64px, 6vw, 112px) clamp(28px, 3.2vw, 64px); text-align: center; }
  .home2-doctors__column h2 { font-size: min(var(--h2-fs-section), 3.3vw); }
  .home2-doctors__intro { margin-top: 20px; font-size: var(--h2-fs-body); }
  .home2-doctors__list { column-gap: 32px; width: 100%; margin-top: 32px; text-align: left; }
  .home2-doctors__doctor h3 { font-size: 1.3125rem; }
}

/* A very subtle zoom on the portrait, from the photo or from its doctor's text. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home2-doctors__portrait img { transition: scale 700ms var(--h2-ease-media); }
  .home2-doctors__portrait:hover img,
  .home2-doctors__triptych:has(.home2-doctors__doctor--daniel:hover) .home2-doctors__portrait--daniel img,
  .home2-doctors__triptych:has(.home2-doctors__doctor--jacob:hover) .home2-doctors__portrait--jacob img { scale: 1.02; }
}

/*! file: home2-cta.css */
/* HomePage 2 round 4: final CTA band (animated brass gradient card + FAQ) and the footer restyle.
   Homepage only: every selector sits under .home2 / body.home2. The gradient drifts only once
   home2-cta.js marks the card .is-animated (JS, motion allowed, @property support) and pauses
   off-screen; no pause control (owner decision 2026-09-18). Without JS or with reduced motion
   the composition is static.
   Keep the readable "prop: value;" form: scripts/home2-cta.test.mjs reads these literals. */

/* Blob geometry, registered so it interpolates: x and y in % of the card, size in cqi (card
   width), so an open form (a tall card) keeps the same blob scale. Initial values are the static
   composition shown without JS or motion. */
@property --h2cta-1x { syntax: "<percentage>"; inherits: false; initial-value: 14%; }
@property --h2cta-1y { syntax: "<percentage>"; inherits: false; initial-value: 16%; }
@property --h2cta-1s { syntax: "<number>"; inherits: false; initial-value: 70; }
@property --h2cta-2x { syntax: "<percentage>"; inherits: false; initial-value: 60%; }
@property --h2cta-2y { syntax: "<percentage>"; inherits: false; initial-value: 4%; }
@property --h2cta-2s { syntax: "<number>"; inherits: false; initial-value: 43; }
@property --h2cta-3x { syntax: "<percentage>"; inherits: false; initial-value: 90%; }
@property --h2cta-3y { syntax: "<percentage>"; inherits: false; initial-value: 82%; }
@property --h2cta-3s { syntax: "<number>"; inherits: false; initial-value: 64; }
@property --h2cta-4x { syntax: "<percentage>"; inherits: false; initial-value: 12%; }
@property --h2cta-4y { syntax: "<percentage>"; inherits: false; initial-value: 94%; }
@property --h2cta-4s { syntax: "<number>"; inherits: false; initial-value: 78; }
@property --h2cta-5x { syntax: "<percentage>"; inherits: false; initial-value: 94%; }
@property --h2cta-5y { syntax: "<percentage>"; inherits: false; initial-value: 14%; }
@property --h2cta-5s { syntax: "<number>"; inherits: false; initial-value: 49; }

/* ---------- The band: CTA card (1.6fr) + FAQ (1fr); one column, card first, at 900px ---------- */
.home2 .home2-cta-band__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 30px; align-items: start; }
@media (max-width: 900px) {
  .home2 .home2-cta-band__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- CTA card ---------- */
.home2 .home2-cta__card {
  /* Premium palette only: warm night base, brass, champagne (low alpha), rose-gold, deep bronze,
     smoky taupe, and a centred veil that keeps white text >= 4.5:1 wherever the blobs drift. */
  --h2cta-base: #1a1612;
  --h2cta-brass: rgb(168 132 79 / .72);
  --h2cta-champagne: rgb(233 217 184 / .22);
  --h2cta-rose: rgb(201 143 107 / .52);
  --h2cta-bronze: rgb(107 74 43 / .95);
  --h2cta-taupe: rgb(138 120 102 / .3);
  --h2cta-veil: rgb(20 16 12 / .64);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 710px;
  padding: 64px clamp(24px, 5vw, 72px);
  overflow: hidden;
  border-radius: 24px;
  background-color: var(--h2cta-base);
  box-shadow: 0 32px 64px -36px rgb(20 16 12 / .55);
  color: #ffffff;
  color-scheme: dark;
  text-align: center;
}
.home2 .home2-cta__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--h2cta-base);
  background-image:
    radial-gradient(66cqi 60% at 50% 50%, var(--h2cta-veil), transparent),
    radial-gradient(calc(var(--h2cta-2s) * 1cqi) calc(var(--h2cta-2s) * 1cqi) at var(--h2cta-2x) var(--h2cta-2y), var(--h2cta-champagne), color-mix(in srgb, var(--h2cta-champagne) 50%, transparent) 40%, transparent),
    radial-gradient(calc(var(--h2cta-3s) * 1cqi) calc(var(--h2cta-3s) * 1cqi) at var(--h2cta-3x) var(--h2cta-3y), var(--h2cta-rose), color-mix(in srgb, var(--h2cta-rose) 50%, transparent) 40%, transparent),
    radial-gradient(calc(var(--h2cta-1s) * 1cqi) calc(var(--h2cta-1s) * 1cqi) at var(--h2cta-1x) var(--h2cta-1y), var(--h2cta-brass), color-mix(in srgb, var(--h2cta-brass) 50%, transparent) 40%, transparent),
    radial-gradient(calc(var(--h2cta-5s) * 1cqi) calc(var(--h2cta-5s) * 1cqi) at var(--h2cta-5x) var(--h2cta-5y), var(--h2cta-taupe), color-mix(in srgb, var(--h2cta-taupe) 50%, transparent) 40%, transparent),
    radial-gradient(calc(var(--h2cta-4s) * 1cqi) calc(var(--h2cta-4s) * 1cqi) at var(--h2cta-4x) var(--h2cta-4y), var(--h2cta-bronze), color-mix(in srgb, var(--h2cta-bronze) 50%, transparent) 40%, transparent);
  /* Own layer: repainting the gradient never re-rasterises the form above it. */
  will-change: transform;
}
.home2 .home2-cta__card h2 { color: #ffffff; font-size: var(--h2-fs-display); font-weight: 400; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
.home2 .home2-cta__lede { max-width: 32ch; margin-top: 16px; color: #ffffff; font-size: var(--h2-fs-lede); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-lede); text-wrap: pretty; }
.home2 .home2-cta__form { width: 100%; max-width: 560px; margin-top: 40px; text-align: left; }
.home2 .home2-cta__form noscript p { margin-top: 16px; color: #ffffff; font-size: var(--h2-fs-small); }

/* Porcelain rings on the dark card; the second selector outranks the shared form-input ring. */
.home2 .home2-cta__card :focus-visible,
.home2 .home2-cta__card .contact-form input:focus-visible { outline-color: var(--h2-focus-dark); }

/* Fields on the dark card: translucent white with a visible edge, white text, porcelain focus. */
.home2 .home2-cta__card :is(.office-select-label, .contact-form-field label, .contact-form-consent, .contact-form-intro, .contact-form > p, .contact-form-field p) { color: #ffffff; }
.home2 .home2-cta__card :is(.office-select, .contact-form-field input, .contact-form-field textarea) { border-color: rgb(255 255 255 / .7); background-color: rgb(255 255 255 / .08); color: #ffffff; }
.home2 .home2-cta__card .office-select { background: rgb(255 255 255 / .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 18px no-repeat; }
.home2 .home2-cta__card option { background-color: var(--h2cta-base); color: #ffffff; }
.home2 .home2-cta__card :is(.office-select, .contact-form-field input, .contact-form-field textarea):focus-visible { outline: 2px solid transparent; border-color: var(--h2-focus-dark); box-shadow: 0 0 0 1px var(--h2-focus-dark), 0 0 0 5px rgb(245 243 239 / .22); }
.home2 .home2-cta__card .contact-form :user-invalid { border-color: #ffc2ba; box-shadow: 0 0 0 1px #ffc2ba; }
/* The native dark checkbox edge drops below 3:1 over a blob, so the box is drawn here. */
.home2 .home2-cta__card .contact-form-consent input {
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid rgb(255 255 255 / .7);
  border-radius: 6px;
  background: rgb(255 255 255 / .08);
  cursor: pointer;
}
.home2 .home2-cta__card .contact-form-consent input:checked { border-color: var(--h2-porcelain); background: var(--h2-porcelain) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23232323' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 16px no-repeat; }
.home2 .home2-cta__card .contact-form a { color: #ffffff; }
/* The one primary action on a dark surface inverts to porcelain with an ink label. */
.home2 .home2-cta__card .button:not(.button--outline) { background: var(--h2-porcelain); color: var(--h2-ink); }
.home2 .home2-cta__card .button:not(.button--outline):hover { background: #ffffff; color: var(--h2-ink); }
.home2 .home2-cta__card .button:not(.button--outline):active { background: var(--h2-urgent); }
.home2 .home2-cta__card .callback-open { gap: 8px; margin-top: 24px; padding: 0; border: 0; background: none; color: #ffffff; cursor: pointer; }
.home2 .home2-cta__card .callback-open::after {
  content: "";
  width: 8px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5.5-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.5 5 5.5-5 5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 900px) {
  .home2 .home2-cta__card { min-height: 0; }
}
@media (max-width: 734px) {
  .home2 .home2-cta__card { padding: 48px 20px 40px; }
  .home2 .home2-cta__form { margin-top: 32px; }
}

/* ---------- FAQ column: native details restyled as separate white items ---------- */
/* The intro sits above the list in the same column, so it never sticks here. */
.home2 .home2-cta-band .home2-faq__intro { position: static; margin-bottom: 28px; }
.home2 .home2-cta-band .home2-faq__intro h2 { font-size: var(--h2-fs-tile); line-height: var(--h2-lh-display); letter-spacing: var(--h2-ls-tile); }
.home2 .home2-cta-band .home2-faq__intro > p:not(.eyebrow) { max-width: 40ch; margin-top: 12px; font-size: var(--h2-fs-body); }
.home2 .home2-cta-band .home2-faq__intro .text-link { margin-top: 4px; }
.home2 .home2-cta-band .faq__list { display: flex; flex-direction: column; gap: 10px; border: 0; }
.home2 .home2-cta-band .faq__list details { border: 1px solid #f0f0f0; border-radius: 10px; background: #ffffff; box-shadow: 0 1px 2px rgb(20 18 16 / .04), 0 6px 16px -8px rgb(20 18 16 / .08); }
.home2 .home2-cta-band .faq__list details[open] { border-color: #eaeaea; }
.home2 .home2-cta-band .faq__list summary { gap: 16px; min-height: 60px; padding: 16px 18px 16px 20px; font-size: var(--h2-fs-body); font-weight: 600; line-height: 1.4; letter-spacing: var(--h2-ls-body); }
.home2 .home2-cta-band .faq__list summary:focus-visible { outline-offset: 2px; border-radius: 10px; }
/* The aria-hidden "+" becomes a chevron: down when closed, up when open. */
.home2 .home2-cta-band .faq__list summary > span {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background-color: var(--h2-graphite);
  color: transparent;
  font-size: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.home2 .home2-cta-band .faq__list details[open] summary > span { transform: none; rotate: 180deg; }
.home2 .home2-cta-band .faq__list details p { max-width: none; padding: 0 20px 20px; color: var(--h2-graphite); font-size: var(--h2-fs-small); line-height: 1.6; }
@media (hover: hover) {
  .home2 .home2-cta-band .faq__list details:hover { border-color: #eaeaea; }
  .home2 .home2-cta-band .faq__list summary:hover > span { background-color: var(--h2-ink); }
}

/* ---------- Footer (shared markup; restyled on the homepage only) ---------- */
/* Light band, clean columns, grey links that darken on hover, one thin rule above the bottom bar. */
.home2 .footer { padding-top: clamp(56px, 6vw, 88px); background: #fafafa; }
.home2 .footer :is(.footer__intro, .footer__primary, .footer__grid, .footer__offices, .footer__socials, .footer__legal) { border-bottom: 0; }
.home2 .footer__intro { padding-bottom: 32px; }
.home2 .footer__primary { padding: 0 0 24px; }
.home2 .footer__grid { padding: 24px 0; }
.home2 .footer__offices { padding: 24px 0; }
.home2 .footer__legal { padding: 24px 0; }
.home2 .footer :is(.footer__grid h2, .footer__legal h2, .footer__office h3) { margin-bottom: 4px; color: var(--h2-ink); font: 600 var(--h2-fs-small)/1.5 var(--h2-font-text); letter-spacing: 0; }
.home2 .footer :is(.footer__grid p, .footer__bottom p, .footer__grid a, .footer__office a, .footer__legal-links a, .footer__privacy a, .footer__socials a) { color: var(--h2-graphite); font-size: var(--h2-fs-small); }
.home2 .footer a:not(.button):hover { color: var(--h2-ink); text-decoration: none; }
.home2 .footer__bottom { margin-top: 16px; padding-top: 20px; border-top: 1px solid #eaeaea; }
@media (min-width: 1069px) {
  /* Four columns: primary links, then blurb (x2) + two link lists, then the three offices + socials,
     then Legal with its links; every row keeps DOM order left to right. */
  .home2 .footer { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; align-items: start; }
  .home2 .footer > * { grid-column: 1 / -1; min-width: 0; }
  .home2 .footer :is(.footer__primary, .footer__grid, .footer__legal) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: subgrid; column-gap: 32px; }
  .home2 .footer__primary a { justify-self: start; }
  .home2 .footer__grid > div:first-child { grid-column: span 2; }
  .home2 .footer__offices { grid-column: 1 / 4; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: subgrid; }
  .home2 .footer__socials { grid-column: 4; flex-direction: column; align-items: flex-start; gap: 0; padding-top: 24px; }
  .home2 .footer__legal-links { grid-column: 2 / -1; column-gap: 32px; }
}
@media (min-width: 1069px) and (max-width: 84.99em) {
  /* The longest office email needs about 262px; until three of the four columns give it that
     (about 1300px), the offices take the full width and the socials follow in one row. */
  .home2 .footer__offices { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home2 .footer__socials { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px 20px; padding-top: 0; }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .home2 .footer__offices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Motion (gated; titan's reduced-motion kill switch also stops it) ---------- */
@keyframes h2cta-blob-1 {
  0% { --h2cta-1x: 14%; --h2cta-1y: 16%; --h2cta-1s: 70; }
  35% { --h2cta-1x: 48%; --h2cta-1y: 6%; --h2cta-1s: 83; }
  70% { --h2cta-1x: 82%; --h2cta-1y: 34%; --h2cta-1s: 63; }
  100% { --h2cta-1x: 40%; --h2cta-1y: 62%; --h2cta-1s: 78; }
}
@keyframes h2cta-blob-2 {
  0% { --h2cta-2x: 60%; --h2cta-2y: 4%; --h2cta-2s: 43; }
  40% { --h2cta-2x: 26%; --h2cta-2y: 30%; --h2cta-2s: 55; }
  100% { --h2cta-2x: 76%; --h2cta-2y: 50%; --h2cta-2s: 39; }
}
@keyframes h2cta-blob-3 {
  0% { --h2cta-3x: 90%; --h2cta-3y: 82%; --h2cta-3s: 64; }
  30% { --h2cta-3x: 58%; --h2cta-3y: 96%; --h2cta-3s: 78; }
  65% { --h2cta-3x: 30%; --h2cta-3y: 66%; --h2cta-3s: 59; }
  100% { --h2cta-3x: 70%; --h2cta-3y: 40%; --h2cta-3s: 71; }
}
@keyframes h2cta-blob-4 {
  0% { --h2cta-4x: 12%; --h2cta-4y: 94%; --h2cta-4s: 78; }
  50% { --h2cta-4x: 52%; --h2cta-4y: 78%; --h2cta-4s: 92; }
  100% { --h2cta-4x: 86%; --h2cta-4y: 98%; --h2cta-4s: 71; }
}
@keyframes h2cta-blob-5 {
  0% { --h2cta-5x: 94%; --h2cta-5y: 14%; --h2cta-5s: 49; }
  45% { --h2cta-5x: 66%; --h2cta-5y: 34%; --h2cta-5s: 60; }
  100% { --h2cta-5x: 88%; --h2cta-5y: 70%; --h2cta-5s: 45; }
}
@media (prefers-reduced-motion: no-preference) {
  .home2 .home2-cta__card.is-animated::before {
    animation:
      h2cta-blob-1 18s ease-in-out infinite alternate,
      h2cta-blob-2 14s ease-in-out infinite alternate,
      h2cta-blob-3 22s ease-in-out infinite alternate,
      h2cta-blob-4 24s ease-in-out infinite alternate,
      h2cta-blob-5 16s ease-in-out infinite alternate;
  }
  .home2 .home2-cta__card.is-offscreen::before { animation-play-state: paused; }
  .home2 .home2-cta-band .faq__list details { transition: border-color var(--h2-dur-ui) var(--h2-ease-standard), box-shadow var(--h2-dur-ui) var(--h2-ease-standard); }
  .home2 .footer a:not(.button) { transition: color var(--h2-dur-ui) var(--h2-ease-standard); }
}

/* ---------- Forced colours: system surfaces, no gradient ---------- */
@media (forced-colors: active) {
  .home2 .home2-cta__card { border: 1px solid CanvasText; }
  .home2 .home2-cta__card::before { display: none; }
  .home2 .home2-cta__card .contact-form-consent input { appearance: auto; }
  .home2 .home2-cta-band .faq__list summary > span,
  .home2 .home2-cta__card .callback-open::after { forced-color-adjust: none; background-color: CanvasText; }
}

/*! file: home2-allx.css */
/* HomePage 2 round 5: All-on-X scroll scene (jaw, posts, full arch, smile). Homepage only.
   Owner (2026-09-18): as the reader scrolls, a jaw without teeth, then four implant posts screw in
   one after another, then the full arch is set onto them, then the practice's own before-and-after
   of a real patient (owner decision 2026-09-22; consent on file, note under the photographs).
   Every model layer fills one box (aspect 1.3, object-fit: contain) and rests at the transform that
   seats it, measured from the layers (HOMEPAGE2.md): each post's ring on the ridge crest, the arch
   over every abutment. The part of a post below the crest shows at 30% through a static mask, so a
   post sinks into the gum as it turns.
   The base rules are the finished scene: without JavaScript, under reduced motion, on short windows
   or with enlarged text the assembled model and the two photographs sit side by side and nothing pins.
   html.home2-motion (set before first paint) pins the stage; home2-allx.js then writes transform
   and opacity only. */

.home2-allx { --allx-top: var(--header-content-height, calc(var(--header-height) + env(safe-area-inset-top, 0px))); margin-top: var(--h2-head-gap); }
/* The band clips sideways, so a post starting its run past the edge or the portrait's scale-in never
   widens a phone's page (clip, not hidden: no scroll container, the stage still pins). */
.home2 #all-on-x { overflow-x: clip; }
.home2-allx__visual {
  display: grid;
  /* Column widths in the ratio of the two aspect ratios, so the model and the portrait match in height. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr);
  align-items: center;
  column-gap: clamp(24px, 4vw, 64px);
  width: var(--h2-content);
  max-width: 980px;
  margin-inline: auto;
}

/* ---------- The model: one box, every layer contained and transformed about its centre ---------- */
.home2-allx__model { position: relative; aspect-ratio: 1.3; }
.home2-allx__model img,
.home2-allx__posts,
.home2-allx__post,
.home2-allx__arch { position: absolute; inset: 0; width: 100%; height: 100%; }
.home2-allx__model img { display: block; object-fit: contain; }
/* Above the ridge crest a post is solid; below it (inside gum and bone) it shows at 30%. The polygon
   is the crest line, 20% into the gum band, in box units (130 × 100). Static: only the posts move. */
.home2-allx__posts {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100' preserveAspectRatio='none'%3E%3Crect width='130' height='100' fill-opacity='.3'/%3E%3Cpath d='M0 0H130V46.2L100.6 46.2L97 47.8L93.4 51.4L89.9 56.4L86.3 59.5L82.7 62.2L79.2 64.2L75.6 65.2L72 66.2L68.5 66.8L64.9 66.9L61.3 66.8L57.8 66.4L54.2 65.7L50.6 64.8L47.1 63.2L43.5 60.8L40 57.8L36.4 53.1L32.8 49.3L29.3 47.1L25.7 48.1L0 48.1Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100' preserveAspectRatio='none'%3E%3Crect width='130' height='100' fill-opacity='.3'/%3E%3Cpath d='M0 0H130V46.2L100.6 46.2L97 47.8L93.4 51.4L89.9 56.4L86.3 59.5L82.7 62.2L79.2 64.2L75.6 65.2L72 66.2L68.5 66.8L64.9 66.9L61.3 66.8L57.8 66.4L54.2 65.7L50.6 64.8L47.1 63.2L43.5 60.8L40 57.8L36.4 53.1L32.8 49.3L29.3 47.1L25.7 48.1L0 48.1Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
/* Rest positions: the posts keep their shared scale (they were split from one layer) and sit with
   each ring on the crest; the two distal posts move in 2.4% of the box so the molars cover them. */
.home2-allx__post--1 img { transform: translate(1.846%, 9.06%) scale(.94); }
.home2-allx__post--2 img { transform: translate(0, 7.92%) scale(.94); }
.home2-allx__post--3 img { transform: translate(0, 7%) scale(.94); }
.home2-allx__post--4 img { transform: translate(-1.846%, 7.69%) scale(.94); }
/* Each post turns about its own ring as it screws in (the ring's rest point, in % of the box). */
.home2-allx__post--1 { transform-origin: 25.61% 49.39%; }
.home2-allx__post--2 { transform-origin: 36.51% 63.17%; }
.home2-allx__post--3 { transform-origin: 63.32% 62.17%; }
.home2-allx__post--4 { transform-origin: 74.27% 48.02%; }
.home2-allx__arch img { transform: translateY(2%) scale(.9); }

/* ---------- The result: the practice's own before-and-after, with its consent note ---------- */
/* Static (no JS, reduced motion, short windows): the two frames sit one above the other, as the
   practice publishes them. With the scene live they share one box and the after crosses over the
   before on the last beat of the scroll. Real photographs: crop and nothing else (see media.json). */
.home2-allx__result { display: grid; gap: 10px; margin: 0; }
.home2-allx__frame { display: block; width: 100%; height: auto; border-radius: var(--h2-radius-media); }
.home2-motion .home2-allx.is-live .home2-allx__result { gap: 0; }
.home2-motion .home2-allx.is-live .home2-allx__frame { grid-area: 1 / 1; }

.home2-allx__note { margin: 12px 0 0; color: var(--h2-night-text-2); font-size: var(--h2-fs-small); line-height: var(--h2-lh-text); letter-spacing: var(--h2-ls-body); text-align: center; }

/* ---------- Two more of the practice's results, under the scene ---------- */
/* Same contract as the scene's own result: the frames stand one above the other until the script
   is live, and then each card crosses from before to after as it travels up the viewport. */
/* The two photographs have their own aspect ratios, so each card keeps its own height: a stretched
   card would hang its handle below the picture. */
.home2-allx__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2.5vw, 32px); max-width: 980px; margin-top: clamp(32px, 5vh, 56px); }
.home2-allx__pair { display: grid; gap: 10px; margin: 0; }
.home2-allx__more .home2-allx__note { grid-column: 1 / -1; }
/* With home2-compare.js the card becomes one photograph with a handle across it: the after frame is
   clipped to the right of --reveal, and the reader drags the handle to see more or less of it. The
   input covers the card (transparent) so a press anywhere on the picture takes hold of the handle;
   touch-action keeps a vertical swipe scrolling the page. */
.home2-allx__pair.is-compare { --reveal: 50%; position: relative; gap: 0; }
.home2-allx__pair.is-compare .home2-allx__frame { grid-area: 1 / 1; }
.home2-allx__pair.is-compare [data-allx-pair-after] { clip-path: inset(0 0 0 var(--reveal)); }
.home2-allx__pair.is-compare::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--reveal);
  width: 2px;
  translate: -1px 0;
  background: rgb(255 255 255 / .92);
  box-shadow: 0 0 0 1px rgb(20 18 16 / .28);
  pointer-events: none;
}
.home2-allx__pair.is-compare::before {
  content: "";
  position: absolute;
  top: 50%;
  left: var(--reveal);
  z-index: 1;
  width: 44px;
  height: 44px;
  translate: -50% -50%;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141210' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 7.5 5 12l4.5 4.5M14.5 7.5 19 12l-4.5 4.5'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 2px 8px rgb(20 18 16 / .28);
  pointer-events: none;
}
.home2-allx__reveal { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; appearance: none; background: none; cursor: ew-resize; touch-action: pan-y; }
/* The grip carries the focus ring, because the input itself is invisible. */
.home2-allx__pair.is-compare:focus-within::before { outline: 3px solid var(--h2-focus); outline-offset: 3px; }
@media (max-width: 734px) {
  .home2-allx__more { grid-template-columns: minmax(0, 1fr); }
}

/* The steps keep the band's tiles under the scene (the list is no longer a direct child of the band). */
.home2-allx__steps { max-width: 980px; }

@media (max-width: 734px) {
  .home2-allx__visual { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}

@media (forced-colors: active) {
  .home2-allx__posts { -webkit-mask: none; mask: none; }
}

/* ---------- Motion: the stage pins and home2-allx.js scrubs it (transform and opacity only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Every width, on windows at least 32em tall (em, so enlarged text keeps the finished scene): the
     stage pins below the header while the track scrolls, and the model and the portrait share one
     cell. Until the script moves them the stage shows the scene's last frame, the portrait. */
  @media (min-height: 32em) {
    .home2-motion .home2-allx__track { min-height: 230svh; }
    .home2-motion .home2-allx__stage {
      position: sticky;
      top: var(--allx-top);
      display: grid;
      place-items: center;
      height: calc(100svh - var(--allx-top));
      padding-bottom: 2.5rem;
    }
    .home2-motion .home2-allx__visual {
      grid-template-columns: minmax(0, 1fr);
      width: min(100vw, calc((100svh - var(--allx-top) - 7.5rem) * .8));
      max-width: none;
    }
    .home2-motion .home2-allx__model,
    .home2-motion .home2-allx__portrait { grid-area: 1 / 1; }
    .home2-motion .home2-allx__model { opacity: 0; }
    /* Only the pinned result's own caption is lifted out of the stage box; the notes under the
       extra results stay in flow with their photographs (owner report, Jacob 2026-09-22: the
       line was showing away from any before-and-after). */
    .home2-motion .home2-allx__result > .home2-allx__note { position: absolute; top: 100%; right: 0; left: 0; }
    .home2-motion .home2-allx.is-live :is(.home2-allx__model, .home2-allx__post, .home2-allx__arch, .home2-allx__portrait) { will-change: transform, opacity; }
  }

  /* Tablets: a squarer cell, so the portrait is taller than the model without filling the window. */
  @media (min-width: 735px) and (min-height: 32em) {
    .home2-motion .home2-allx__track { min-height: 250svh; }
    .home2-motion .home2-allx__visual { width: min(var(--h2-content), calc((100svh - var(--allx-top) - 7.5rem) * 1.1)); }
    /* The result is a wide photograph, so it takes the column instead of the old portrait's 73%. */
    .home2-motion .home2-allx__portrait { justify-self: center; width: 100%; }
  }

  /* Desktop: the scene is 300vh; the stage pins on the left and the three steps pin beside it as
     chapters, the current one brightened with a brass rail that fills as its part plays. Both pin
     for the same range (the track is the grid row). 1069 × 640 at default text, in em. */
  @media (min-width: 66.8125em) and (min-height: 40em) {
    .home2-motion .home2-allx {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
      column-gap: clamp(40px, 5vw, 88px);
      width: var(--h2-content);
      margin-inline: auto;
    }
    .home2-motion .home2-allx__track { min-height: 300vh; }
    .home2-motion .home2-allx__visual { width: min(100%, calc((100svh - var(--allx-top) - 7.5rem) * 1.1)); }
    .home2-motion .home2-allx__steps {
      position: sticky;
      top: var(--allx-top);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0;
      width: auto;
      max-width: 30rem;
      height: calc(100svh - var(--allx-top));
      margin: 0;
      padding-bottom: 2.5rem;
    }
    .home2-motion .home2-allx__steps li { position: relative; padding: 20px 0 20px 32px; border-radius: 0; background: none; }
    .home2-motion .home2-allx__steps li::before,
    .home2-motion .home2-allx__steps li::after { content: ""; position: absolute; top: 20px; bottom: 20px; left: 0; width: 2px; border-radius: 1px; background: rgb(245 243 239 / .16); }
    .home2-motion .home2-allx__steps li::after { background: var(--h2-brass-night); transform: scaleY(var(--allx-fill, 0)); transform-origin: 50% 0; }
    .home2-motion .home2-allx__steps span { margin-bottom: 12px; }
    .home2-motion .home2-allx__steps h3 { color: var(--h2-night-text-2); transition: color var(--h2-dur-fade) var(--h2-ease-standard); }
    .home2-motion .home2-allx__steps li.is-current h3 { color: var(--h2-night-text); }
  }
}