/* home.css: the homepage-only rules of www.bracesonline.com. The hero (the typographic form by default, the arched sky window when
   a figure is served), the land recolored to a pale back hill and a sky-50 front hill under a 1 px horizon with the white curve and
   the steel wire kept, the four office chips seated on the wire west to east, the finder sheet riding 48 px over the land, the
   storefront strip, the doctors band frame, the treatments still, and the visit, insurance and consult sections. */
.hero{position:relative;isolation:isolate;padding:calc(clamp(20px,3vw,40px) - 8px) 0 0;background:var(--paper);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(85% 75% at 6% 0%,rgba(202,225,239,.6),rgba(202,225,239,0) 64%),linear-gradient(180deg,rgba(226,238,243,.55),rgba(251,246,238,0) 58%);pointer-events:none}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,1fr);column-gap:clamp(20px,3vw,44px);align-items:end}
.hero-grid>*{min-width:0}
.hero-copy{padding-bottom:8px}
.hero-copy .kicker{margin-bottom:14px;color:var(--harbor-text)}
.hero h1 .pivot{color:var(--harbor)}
.hero-act{display:grid;gap:16px;justify-items:start;margin-top:clamp(20px,2.2vw,28px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px;font-weight:500;color:var(--ink);margin:0}
.trust:empty{display:none}
.trust li{display:inline-flex;align-items:center;gap:7px}
.trust svg{width:18px;height:18px;color:var(--harbor-text);flex:none}
/* the arched sky window with the figure standing in it, when one is served */
.hero-docs{position:relative;z-index:1;justify-self:end;width:min(100%,507px);aspect-ratio:1;margin:0 0 calc(var(--land-lift) - var(--land-h) * .36)}
.hd-arch{position:absolute;left:0;right:0;top:3%;bottom:0;border-radius:50% 50% 0 0/25% 25% 0 0;background:radial-gradient(58% 40% at 50% 30%,rgba(255,255,255,.6),rgba(255,255,255,0) 72%),linear-gradient(180deg,#C5DDEA,#E6F0F4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px var(--rule),0 34px 70px -40px rgba(15,37,42,.3)}
.hd-arch::after{content:"";position:absolute;left:50%;top:-7px;width:16px;height:13px;margin-left:-8px;border-radius:2.5px;background:var(--bracket-h);box-shadow:var(--bracket-h-ring)}
.hd-img{position:absolute;left:0;bottom:0;display:block;width:100%;height:auto;transform:none}
.hd-tags{position:absolute;inset:0;margin:0;pointer-events:none}
.hd-tag{position:absolute;top:calc(3% - 32px);left:50%;transform:translateX(-50%);font:500 15px/1.2 var(--f-body);letter-spacing:0;color:var(--muted);white-space:nowrap}
/* EDL-01 (DECISIONS 86): from 1160 px the typographic hero's right column carries the office finder card (its town goes to the
   chooser below); EDL-06: the copy's bottom padding is smaller there, so the land and all four chips rise into the first screen */
.hero-finder{display:none}
@media (min-width:1160px){
  .hero .hero-grid:not(:has(> .hero-docs)):has(> .hero-finder){grid-template-columns:minmax(0,1fr) minmax(0,392px);align-items:start;column-gap:56px}
  .hero .hero-grid:not(:has(> .hero-docs)):has(> .hero-finder)>.hero-copy{max-width:none;padding-bottom:calc(var(--land-h) * .08)}
  .hero-finder{display:grid;gap:14px;align-self:start;margin-top:6px;padding:var(--pad);border-radius:var(--radius);background:var(--pale);box-shadow:var(--shadow-2)}
  .hero-finder .kicker{margin:0;color:var(--harbor-text)}
  .hf-title{margin:0;font:400 clamp(1.5rem,1.1rem + 1vw,1.9rem)/1.2 var(--f-disp);letter-spacing:.01em;color:var(--ink);text-wrap:balance}
  .hf-form{display:grid;gap:8px;padding-top:16px;border-top:1px solid var(--rule)}
  .hf-note{margin:0;font-size:14.5px;color:var(--muted)}
}
/* the land: the mark's geometry in tints; the front hill runs on 48 px under the finder sheet's overlap */
.hero-land{position:relative;z-index:2;height:calc(var(--land-h) + 48px);margin-top:calc(-1 * var(--land-lift));pointer-events:none}
.hero-land .hw-chip{pointer-events:auto}
.hills{position:absolute;left:0;top:0;width:100%;height:var(--land-h);display:block}
.hill-light{fill:var(--pale)}
.hill-horizon,.hill-edge{fill:none;stroke:rgba(15,37,42,.18);stroke-width:1;vector-effect:non-scaling-stroke}
.hill-curve{fill:#FFFFFF}
.hill-deep{fill:var(--sky-50)}
.hill-grain{opacity:.1;mix-blend-mode:multiply}
.hero-land::before{content:"";position:absolute;left:0;right:0;bottom:0;height:49px;background:var(--sky-50)}
.hero-land::after{content:"";position:absolute;left:0;right:0;bottom:0;height:49px;z-index:1;background:url(/assets/img/grain-240.webp) 0 0/240px 240px repeat;opacity:.1;mix-blend-mode:multiply;pointer-events:none}
/* the one-hill variant for the panel: the front hill and the strip on paper, one pale hill, the curve and the wire */
.swap-one-hill .hill-deep,.hero.one-hill .hill-deep{fill:var(--paper)}
.swap-one-hill .hero-land::before,.hero.one-hill .hero-land::before{background:var(--paper)}
.swap-one-hill .hero-land::after,.hero.one-hill .hero-land::after{opacity:0}
/* the wire: the steel archwire on the white curve; base is drawn and seated, .run draws it in after the plate opens */
.hero-wire{position:absolute;left:0;right:0;top:0;height:var(--land-h);z-index:2}
.hw-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;display:block;pointer-events:none}
.hw-svg-phone{display:none}
.hw-wire{fill:none;stroke:url(#hwSteel);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.hw-hi{fill:none;stroke:#FFFFFF;stroke-opacity:.7;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke}
.hero-wire.run .hw-wire,.hero-wire.run .hw-hi{animation:archDraw .5s var(--ease) .25s both}
.hw-chips{position:absolute;inset:0;margin:0}
.hw-chips li{position:absolute;left:clamp(calc(112px + var(--sal)),calc(var(--sal) + (100% - var(--sal) - var(--sar)) * var(--u)),calc(100% - 118px - var(--sar)));top:calc(var(--wy) * var(--land-h) - 22px);transform:translateX(-50%)}
.hw-chip{box-shadow:0 1px 2px rgba(15,37,42,.08),0 10px 22px -16px rgba(15,37,42,.4)}
.hero-land .hw-glyph::before{content:"";position:absolute;left:-12px;right:-6px;top:50%;height:3px;margin-top:-1.5px;background:linear-gradient(180deg,#F3F6F7,#B9C4C9 45%,#6F7D84);z-index:-1}
.hero-wire.run .hw-chip{animation:seatChip .42s var(--ease) both;animation-delay:calc(.25s + var(--d))}
.hero-wire.wait .hw-wire,.hero-wire.wait .hw-hi{stroke-dashoffset:1}
.hero-wire.wait .hw-chip{opacity:0}
.hero-land :focus-visible{outline-color:var(--ink)}
@keyframes seatChip{from{transform:translateY(-9px) scale(1.25);opacity:0}to{transform:none;opacity:1}}
@keyframes seatChipPhone{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}

/* the offices section: the finder sheet rides 48 px over the land; its own formatting context so the margin never collapses */
.sig{position:relative;z-index:3;display:flow-root;background:var(--paper);padding-top:0}
.sig .finder-sheet{margin-top:-48px}
/* the storefront strip: the practice's own film edge to edge, the still as its ground and poster, plays only in view */
.place-band{--edge:max(var(--gutter),var(--sal),(100% - var(--wrap)) / 2 + var(--gutter));--edge-r:max(var(--gutter),var(--sar),(100% - var(--wrap)) / 2 + var(--gutter));position:relative;width:100%;max-width:none;margin:clamp(48px,5vw,72px) 0 0;padding:0}
.pb-frame{position:relative;height:max(min(56.25vw,60vh),33.4vw);min-height:180px;overflow:hidden;background:#C9D6DB 50% 12%/cover no-repeat}
.pb-frame.has-still{background-image:url(/assets/img/storefront-16x9-1280.webp)}
.pb-video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:opacity .6s var(--ease)}
.pb-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%;box-shadow:none}
.pb-video.is-pending{opacity:0}
.pb-toggle{position:absolute;right:var(--edge-r);bottom:0;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--harbor);border-radius:50%;background:var(--card);color:var(--harbor-text);cursor:pointer}
.pb-toggle[hidden]{display:none}
.pb-toggle svg{width:16px;height:16px;fill:currentColor}
.pb-toggle .pb-i-play,.pb-toggle.is-paused .pb-i-pause{display:none}
.pb-toggle.is-paused .pb-i-play{display:block}
.place-band .pb-cap{display:flex;align-items:center;gap:10px;min-height:44px;margin:12px 0 0;padding:0 calc(var(--edge-r) + 56px) 0 var(--edge);color:var(--muted);font-weight:500;font-size:15px;line-height:1.4}
.pb-cap .brk{width:12px;height:10px}
.wrap>.place-band{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:auto}

/* the doctors band (pale): the practice's promise at display size, the two folios, the one Founder line */
.doc-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cgap) clamp(32px,5vw,64px);align-items:center;margin-bottom:clamp(40px,4.5vw,64px)}
.doc-intro>*{min-width:0}
.doc-promise{margin:0 0 var(--igap);font:400 clamp(1.4rem,1.05rem + 1vw,1.85rem)/1.38 var(--f-disp);letter-spacing:.01em;color:var(--ink)}
.doc-promise p{margin:0;max-width:24em}
.doc-plate-line{font:400 clamp(1.25rem,1.1rem + .6vw,1.3rem)/1.4 var(--f-disp);color:var(--harbor-text);max-width:30em;margin:0}
.doc-plate-line.doc-chain-line{margin-bottom:10px}
.doc-team{margin:0}
.doc-team-img{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--pale);box-shadow:var(--shadow-1)}
.doc-team-img img{width:100%;aspect-ratio:1920/1084}
.doctors .act{margin-top:var(--cgap)}
@media (min-width:980px){.doc-intro:has(> .doc-team){grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}

/* the treatments band: paper with the atmospheric still at 14 percent behind the heading, masked */
.treat{position:relative;isolation:isolate;overflow:hidden;background:var(--paper)}
.treat::after{content:"";position:absolute;left:0;right:0;top:0;height:min(62vw,620px);z-index:-1;background:50% 0/cover no-repeat;opacity:.14;pointer-events:none;mask-image:linear-gradient(180deg,#000 55%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent)}
.treat.atmos-on::after{background-image:url(/assets/img/aligner-atmos-1600.webp)}
.who{position:relative;background:var(--paper)}
/* the first visit and the insurance wash */
.visit-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--cgap) clamp(28px,4vw,56px);align-items:start}
.visit-grid>*{min-width:0}
.visit-copy{max-width:600px}
.visit-card .tp-head{margin-bottom:var(--igap)}
/* DECISIONS 85 (CP-10): the card links the patient forms page, where the Q46 bracket prints above the five PDFs */
.visit-card .forms-intro{margin:var(--igap) 0 0}
.visit-card .forms-page{display:inline-flex;align-items:center;min-height:44px}
.visit-copy .act{margin-top:var(--bgap)}
.insure{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(160deg,var(--sky) 0%,#E8F0F2 30%,var(--paper) 62%)}
.insure::before{content:"";position:absolute;inset:0;z-index:-1;background:url(/assets/img/grain-240.webp) 0 0/240px 240px repeat;opacity:.1;mix-blend-mode:multiply;pointer-events:none}
.ins-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--cgap) clamp(24px,4vw,48px);margin-top:8px}
.ins-grid>*{min-width:0}
.ins-list,.ins-lines{display:grid;gap:8px;margin-bottom:16px}
.ins-list li,.ins-lines li{display:flex;gap:10px;align-items:flex-start}
.ins-list li svg,.ins-lines li svg{width:20px;height:20px;flex:none;color:var(--harbor-text);margin-top:4px}
.ins-col .gap{margin-bottom:16px}
.ins-more{margin:0}
.treat+.visit,.insure+.faq,.faq+.consult{padding-top:min(var(--sec),max(24px,140px - var(--sec)))}
/* the consult section: the copy beside the printed request card */
.consult-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.consult-grid>*{min-width:0}

/* the hero chips: west to east on the white curve, at equal intervals at every width from 760 px */
@media (min-width:760px){.hw-chips li{--u:var(--eu);--wy:var(--ewy);--A:max(calc(112px + var(--sal)),calc(var(--sal) + (100% - var(--sal) - var(--sar)) * .125));--B:min(calc(100% - 118px - var(--sar)),calc(var(--sal) + (100% - var(--sal) - var(--sar)) * .875));left:calc(var(--A) + (var(--B) - var(--A)) * (var(--eu) - .125) / .75)}}
/* EDL-05 (DECISIONS 86; design-spec 9): from 920 px (the first width whose wrap holds four 196 px chips 16 px apart) the four
   chips sit inside the content wrap with even gaps at every width,
   the wire still full bleed: each chip is one width, its center placed over the wrap, and its height on the wire is the wire's
   own curve at that point (the quadratic of .hw-wire, x over the land's width by tan(atan2())); a browser without it keeps the
   760 px rule above */
@supports (top: calc(1px * tan(atan2(1px, 2px)))) {
  @media (min-width:920px){
    .hero-land{container-type:inline-size}
    .hero-land .hw-chip{width:196px;justify-content:center}
    .hw-chips li:nth-child(1){--i:0}
    .hw-chips li:nth-child(2){--i:1}
    .hw-chips li:nth-child(3){--i:2}
    .hw-chips li:nth-child(4){--i:3}
    .hw-chips li{--C:min(100cqw - 2 * clamp(16px, 4cqw, 40px), 1080px);--x:calc((100cqw - var(--C)) / 2 + 98px + var(--i) * (var(--C) - 196px) / 3);--f:tan(atan2(var(--x), 100cqw));--wy2:calc(((1 - var(--f)) * (1 - var(--f)) * 172 + 2 * var(--f) * (1 - var(--f)) * 120 + var(--f) * var(--f) * 96) / 240);left:var(--x);top:calc(var(--wy2) * var(--land-h) - 22px)}
  }
}
@media (min-width:760px){.visit-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
@media (min-width:760px) and (max-width:979px){.hero-grid{grid-template-columns:minmax(0,1fr);row-gap:clamp(20px,3vw,28px)}.hero-docs{justify-self:center;width:min(100%,440px);margin-top:16px;margin-bottom:calc(var(--land-lift) - var(--land-h) * .36 - 12px)}.hero-copy{padding-bottom:0}}
@media (max-width:860px){.ins-grid,.consult-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:759px){
  .hero{padding:12px 0 0}
  .hero-copy .kicker{margin-bottom:10px}
  .hero-grid{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .hero-copy{padding-bottom:0}
  .hero-docs{justify-self:center;width:min(100%,340px);margin:22px auto 0}
  .hero-land{height:auto;margin-top:-64px}
  .hills{position:relative;height:96px}
  .hero-land::before{display:none}
  .hero-land::after{opacity:.1}
  .hero-wire{position:relative;left:auto;right:auto;top:auto;height:auto;margin-top:-1px;padding:2px var(--gutter) 64px;background:var(--sky-50)}
  .swap-one-hill .hero-wire,.hero.one-hill .hero-wire{background:var(--paper)}
  .hw-svg{display:none}
  .hw-svg-phone{display:block;position:absolute;left:var(--gutter);top:47px;width:calc(100% - 2 * var(--gutter));height:14px}
  .hw-chips{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}
  .hw-chips li{position:relative;left:auto;top:auto;transform:none;z-index:1}
  .hw-chip{width:100%;padding:0 10px 0 9px;gap:8px;font-size:14.5px}
  .hero-wire.run .hw-chip{animation-name:seatChipPhone}
  .hero-act{gap:12px;justify-items:stretch}
  .hero-cta{flex-direction:column;gap:12px}
  .hero-cta .btn{width:100%}
  .sig .finder-sheet{margin-top:-48px}
  .place-band{margin-top:40px}
  .place-band .pb-cap{font-size:14.5px}
  .sig .office-cards.cards-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;width:auto;max-width:none;margin:-48px max(var(--gutter),var(--sar)) 0 max(var(--gutter),var(--sal));padding:8px 2px 14px;scrollbar-width:thin;-webkit-overflow-scrolling:touch;scroll-padding-left:2px}
  .sig .cards-track>li{flex:0 0 86%;scroll-snap-align:start}
  .sig .map-load{bottom:calc(48px + 16px)} /* fix wave 2026-10-21 (L4 MF1): 16 px above the track that rides 48 px over the frame */
}
@media (max-width:359px){.hw-chip{padding:0 8px;font-size:14px;gap:7px}}
@media (prefers-reduced-motion:reduce){
  .hw-wire,.hw-hi{stroke-dashoffset:0!important;animation:none!important}
  .hw-chip{opacity:1!important;animation:none!important}
  .hero-wire.wait .hw-chip{opacity:1!important}
  .hero-wire.wait .hw-wire,.hero-wire.wait .hw-hi{stroke-dashoffset:0!important}
  .pb-video{transition:none!important}
  .pb-video.is-pending{opacity:1}
  .pb-toggle{display:none}
}
@media print{
  .hero,.insure,.treat,.who{background:var(--paper)}
  .hero::before,.hero::after,.treat::after,.insure::before,.hero-land::after{display:none}
  .pb-toggle{display:none!important}
}

/* Owner revision, 2026-10-18: the introduction presents the practice first; one office finder follows the doctors. */
.hero.hero-owner{padding-bottom:clamp(32px,5vw,64px);border-bottom:1px solid var(--rule)}
.hero-owner .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero-owner .hero-copy{max-width:58rem;padding-bottom:0!important}
.hero-owner h1{max-width:17ch;font-size:clamp(2.45rem,5.25vw,4.6rem);line-height:1.08}
.hero-owner .deck{max-width:43em}
.hero-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:clamp(28px,4vw,44px) 0 0;padding:22px 0 0;border-top:1px solid var(--rule);max-width:58rem}
.hero-highlights li{font-size:clamp(1rem,1.4vw,1.18rem);font-weight:600;line-height:1.45;color:var(--harbor-text);padding-left:16px;border-left:2px solid var(--harbor)}
.sig.sig-later{padding-top:clamp(48px,7vw,88px)}
.sig-later .finder-sheet{margin-top:0}
@media(max-width:599px){.hero-highlights{grid-template-columns:minmax(0,1fr);gap:16px}.hero-owner h1{max-width:18ch}.hero.hero-owner{padding-bottom:32px}}

/* October 19 owner revision: personal invitation, patient archive and office-specific communities. */
.hero-owner h1{max-width:29ch;font-size:clamp(2rem,.8rem + 4.1vw,3.4rem);line-height:1.12;text-wrap:balance}
.hero-owner .hero-copy{max-width:68rem}
.hero-owner .deck{max-width:44rem;font-size:clamp(1.05rem,1.8vw,1.25rem)}
.hero-owner .hero-copy>.kicker{font-size:.92rem;letter-spacing:.13em}
.smile-preview{padding:clamp(44px,6vw,80px) 0;background:var(--pale)}
.smile-preview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.smile-preview-grid>*{min-width:0}
.smile-preview h2{max-width:12ch;font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.12}
.smile-preview .lede{max-width:31rem;margin:20px 0 24px}
.smile-note{margin:18px 0 0;font-size:.88rem;line-height:1.6;color:var(--muted)}
.smile-preview-photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:center;max-width:30rem;justify-self:end}
.smile-preview-photos figure{margin:0;background:#fff;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.smile-preview-photos figure:nth-child(2){margin-top:32px}
.smile-preview-photos img{display:block;width:100%;height:auto;object-fit:contain}
.community-band{padding:clamp(40px,6vw,72px) 0 0}
.community-band h2{max-width:23ch}
.community-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:28px}
.community-grid>div{min-width:0;border-top:2px solid var(--harbor);padding-top:20px}
.community-grid h3{margin:0 0 14px;font-size:1.25rem}
.community-grid ul{display:flex;flex-wrap:wrap;list-style:none;gap:8px 16px;padding:0;margin:0;line-height:1.7}
.community-grid a{color:var(--harbor-text);text-decoration:underline;text-underline-offset:3px}
@media(max-width:759px){.smile-preview-grid{grid-template-columns:minmax(0,1fr)}.smile-preview h2{max-width:20ch}.smile-preview-photos{justify-self:start;max-width:30rem;width:100%}.community-grid{grid-template-columns:minmax(0,1fr);gap:28px}}