/* A scroll-led treatment of the original site; all content remains in the document. */
.hero.page-width { width:100%; max-width:none; min-height:1050px; display:block; overflow:hidden; padding:76px max(4vw,24px) 100px; background:#101512; color:#f2f2e9; isolation:isolate; }
.hero::before,.hero::after { display:none; }
.hero-copy { z-index:2; padding:0; }
.hero-planning-line { color:#bdc9ba; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 28px; }
.hero-copy h1 { max-width:1400px; margin:0; font-family:var(--font-body); font-size:clamp(5.3rem,12vw,12.5rem); font-weight:800; line-height:.84; letter-spacing:-.045em; text-transform:uppercase; color:#f2f2e9; transform:translate3d(0,var(--title-shift,0px),0); animation:none; }
.hero-copy h1 em { color:#d9ad92; font-style:italic; }
.hero-portrait { position:absolute; z-index:3; top:41%; left:34%; width:36%; height:53%; min-height:0; max-height:none; margin:0; transform:translate3d(0,var(--photo-shift,0px),0) rotate(-4deg); transform-origin:center; }
.hero-portrait picture { height:100%; border-radius:4px; box-shadow:0 25px 70px rgba(0,0,0,.45); animation:none; }
.hero-portrait img { object-position:center 35%; animation:none; }
.portrait-note { left:-12%; bottom:8%; background:#ecebe2; color:#173e32; padding:18px 25px; }
.hero-actions { position:absolute; top:800px; left:0; display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin:0; animation:none; }
.hero-actions .button-primary { background:#f1eee5; color:#173e32; }
.hero-actions .quiet-link { color:#f2f2e9; }
.hero-scroll { left:auto; right:4vw; bottom:55px; color:#f1eee5; }
.hero:focus-within .hero-copy h1,.hero:focus-within .hero-portrait { scroll-margin-top:20px; }
.hero-case { position:absolute; z-index:4; display:block; width:22%; color:#f2f2e9; margin:0; }
.hero-case-aligners { top:48%; left:4%; transform:rotate(-3deg); }
.hero-case-veneers { top:55%; right:4%; transform:rotate(3deg); }
.hero-case img { width:100%; aspect-ratio:.82; object-fit:cover; object-position:center 30%; display:block; border:5px solid #e6e8df; }
.hero-case figcaption { color:#d6ded3; margin-top:8px; font-size:10px; line-height:1.4; }
.story-link-label { display:block; color:#f3f2e9; font-size:12px; font-weight:600; padding-top:9px; }
.hero-case-label { display:flex; justify-content:space-between; gap:10px; padding-top:10px; font-size:14px; font-weight:700; }
.hero-case small { display:block; color:#c1c9bf; margin-top:5px; font-size:10px; line-height:1.4; }
.hero-case:focus-visible { outline:3px solid #e9b79a; outline-offset:8px; }
@media (prefers-reduced-motion:no-preference) {
 .hero-copy h1 { animation:cinematic-title .8s cubic-bezier(.16,1,.3,1) backwards; }
 .hero-portrait picture { animation:cinematic-image .8s cubic-bezier(.16,1,.3,1) .12s both; }
 .hero-case { transition:transform .3s cubic-bezier(.16,1,.3,1); }
 .hero-case-aligners:hover { transform:rotate(0) translateY(-10px); }
 .hero-case-veneers:hover { transform:rotate(0) translateY(-10px); }
 @keyframes cinematic-title { from { opacity:0; transform:translateY(80px); } to { opacity:1; transform:translateY(0); } }
 @keyframes cinematic-image { from { opacity:0; transform:translateY(60px) scale(.9); } to { opacity:1; transform:translateY(0) scale(1); } }
}
@media (max-width:800px) {
 .hero.page-width { min-height:850px; padding-top:70px; }
 .hero-copy h1 { font-size:clamp(4.3rem,12vw,7rem); }
 .hero-portrait { top:40%; left:34%; width:58%; height:51%; }
 .hero-actions { top:350px; }
 .hero-case { width:25%; }
 .hero-case-veneers { top:72%; }
}
@media (max-width:600px) {
 .hero.page-width { min-height:1150px; padding:48px 22px 70px; }
 .hero-planning-line { font-size:10px; max-width:250px; line-height:1.5; }
 .hero-copy h1 { font-size:clamp(3.4rem,13vw,5.5rem); letter-spacing:-.04em; }
 .hero-portrait { top:29%; left:23%; width:65%; height:38%; }
 .hero-actions { top:265px; flex-direction:row; gap:12px; }
 .hero-actions .button-primary { padding:13px 16px; }
 .hero-scroll { display:flex; bottom:25px; right:22px; }
 .hero-case { width:38%; top:72%; }
 .hero-case-aligners { left:4%; }
 .hero-case-veneers { right:4%; }
 .hero-case-label { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .hero-copy h1,.hero-portrait { transform:none; } .hero-copy h1,.hero-portrait picture { animation:none !important; } }

/* Carry the oversized editorial language into the site's existing sections. */
.preservation-section h2,.case-gallery-heading h2,.explorer-intro h2,.journey-section .section-heading h2,.simulator-section h2 {
  font-family:var(--font-body); font-weight:750; letter-spacing:-.04em; line-height:1.02;
  font-size:clamp(2.8rem,5.4vw,5.6rem);
}
.preservation-section h2 em,.case-gallery-heading h2 em,.explorer-intro h2 em,.journey-section h2 em,.simulator-section h2 em { font-family:var(--font-display); font-weight:400; }
.case-tabs { border-top:1px solid currentColor; }
.case-tab { transition:background-color .25s ease,color .25s ease,transform .25s ease; }
.case-tab[aria-selected=true] { box-shadow:inset 0 -3px #a84d37; }
@media (max-width:600px) { .preservation-section h2,.case-gallery-heading h2,.explorer-intro h2,.journey-section .section-heading h2,.simulator-section h2 { font-size:clamp(2.6rem,10vw,3.6rem); } }

/* On phones the headline, actions and portraits have their own space. */
@media (max-width:700px) {
 .hero.page-width { min-height:0; padding:48px 22px 52px; }
 .hero-copy h1 { font-size:clamp(2.6rem,11vw,5rem); line-height:.95; overflow-wrap:anywhere; transform:none!important; }
 .hero-actions { position:static; display:flex; flex-direction:row; flex-wrap:wrap; margin:28px 0 36px; gap:14px 20px; }
 .hero-portrait { position:relative; inset:auto; width:min(82%,420px); height:auto; aspect-ratio:4/5; margin:0 auto; transform:none!important; }
 .hero-portrait picture { height:100%; }
 .portrait-note { left:-8%; bottom:5%; font-size:clamp(17px,4vw,22px); }
 .hero-case-collection { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:30px; }
 .hero-case { position:static; width:auto; transform:none!important; }
 .hero-case img { aspect-ratio:1; object-fit:cover; }
 .story-link-label { line-height:1.4; }
 .hero-scroll { position:static; margin-top:30px; display:inline-flex; }
 .mobile-contact { position:static; margin:16px 22px 24px; box-shadow:none; }
}

/* Give the hero actions and portrait collage independent space at every width. */
@media (min-width:701px) {
 .hero.page-width { min-height:0; padding-bottom:105px; }
 .hero-actions { position:static; display:flex; flex-direction:row; flex-wrap:wrap; gap:16px 24px; margin:30px 0 0; }
 .hero-collage { position:relative; height:clamp(520px,58vw,850px); margin-top:48px; }
 .hero-portrait { top:2%; left:34%; width:36%; height:85%; }
 .hero-case-aligners { top:9%; left:0; }
 .hero-case-veneers { top:15%; right:0; }
}
@media (max-width:700px) { .hero-collage { position:relative; } }
