/* Give the illustration its own column and keep captions on a light surface. */
/* Diffuse light across the page, with no panel behind the anatomy. */
body{isolation:isolate;background:#faf6f2}
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 85% 24%,#c4876430 0%,#c4876412 27%,transparent 58%),radial-gradient(ellipse at 12% 78%,#ae80601a 0%,transparent 49%),radial-gradient(ellipse at 32% 12%,#ffffffd9 0%,#ffffff40 34%,transparent 65%),linear-gradient(118deg,#fdfaf6 8%,#f7efe7 56%,#eee2d5 100%)}
.anatomy-story{background:transparent!important}
.anatomy-story:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.9%,#a8784e08 50%,transparent 50.1%);z-index:-1}
.services{background:linear-gradient(155deg,#fffdfbf5,#f2e9dfed);box-shadow:0 -24px 70px #72523b05}
@media(max-width:700px){body:before{background:radial-gradient(ellipse at 100% 30%,#c4876424,transparent 62%),radial-gradient(ellipse at 0% 5%,#ffffffe6,transparent 55%),linear-gradient(130deg,#fdfaf6,#f2e7db)}.anatomy-stage:before{background:linear-gradient(110deg,#f8f1e9,#f3e8dc)!important}}
@media(min-width:701px){
  .hero-copy,.about-copy,.journey-copy{width:43%;max-width:530px;min-width:0}
  .hero h1{font-size:clamp(48px,5.8vw,88px);overflow-wrap:normal}
  .anatomy-image{left:53%;width:42%;height:78vh;overflow:visible;background:none;box-shadow:none;border-radius:0}
  .anatomy-image:before{display:none}
  #scene,.anatomy-image img{top:0;bottom:116px;height:calc(100% - 116px);border-radius:120px 120px 12px 12px;overflow:hidden}
  .anatomy-image:after{display:none}
  .scene-caption{bottom:66px;left:0;right:0;color:var(--ink)}
  .scene-caption small{display:none}
  .scene-caption strong{font-size:15px}
  #scene-counter{color:var(--muted)}
  #scene-meter{left:0;right:0;bottom:52px;background:var(--line)}
  #scene-meter:after{background:var(--blue)}
  .simulation-note{top:auto;bottom:0;left:0;right:0;margin:0;font-size:11px;line-height:1.5;text-align:left;color:var(--muted)}
  #compare-face{top:auto;bottom:12px;left:auto;right:0;transform:none;background:var(--paper);color:var(--blue);border-color:var(--line);font-size:11px}
  .facial .simulation-note{max-width:52%}
}
@media(max-width:700px){
  .anatomy-stage{position:sticky;top:0;z-index:4;height:52svh;min-height:0;margin-bottom:-52svh;background:var(--paper);overflow:visible;padding:10px 6% 0;box-shadow:0 12px 15px var(--paper);pointer-events:none}
  .anatomy-image{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:100%;max-height:none;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .anatomy-image:before{display:none}
  .anatomy-image:after{display:none}
  #scene,.anatomy-image img{inset:0 0 83px;height:calc(100% - 83px);border-radius:55px 55px 8px 8px;overflow:hidden}
  .scene-caption{bottom:57px;left:0;right:0;color:var(--ink)}
  .scene-caption small{display:none}
  .scene-caption strong{font-size:12px}
  #scene-counter{color:var(--muted);font-size:11px}
  #scene-meter{bottom:49px;left:0;right:0;background:var(--line)}
  #scene-meter:after{background:var(--blue)}
  .simulation-note{top:auto;bottom:3px;left:0;right:auto;max-width:52%;margin:0;text-align:left;font-size:10px;line-height:1.3;color:var(--muted)}
  #compare-face{top:auto;bottom:9px;left:auto;right:0;transform:none;font-size:10px;padding:7px 10px;background:var(--paper);color:var(--blue);border-color:var(--line)}
  .hero,.about,.journey-panel{padding:57svh 6% 7svh;min-height:110svh;display:block}
  .journey-panel[data-region=face]{min-height:135svh}
  .hero-copy,.about-copy,.journey-copy{width:100%;max-width:none}
  .hero h1{font-size:44px;line-height:1.08;letter-spacing:-2px}
  .hero-bottom{display:none}
  .journey-copy h2,.about-copy h2{font-size:36px}
}
.anatomy-image,#scene{background:transparent;box-shadow:none;border-radius:0}
.experience-consent{position:fixed;bottom:20px;left:20px;width:min(460px,calc(100% - 40px));padding:22px;background:var(--paper);border:1px solid var(--line);box-shadow:0 8px 35px #382d291a;z-index:100;border-radius:12px}
.experience-consent strong{font:600 17px 'Manrope',sans-serif}.experience-consent p{font-size:14px;line-height:1.55;margin:12px 0 18px;color:var(--muted)}
.experience-consent>div{display:flex;flex-wrap:wrap;gap:10px}.experience-consent button{border:1px solid var(--blue);padding:12px 15px;font:14px 'DM Sans',sans-serif;cursor:pointer;border-radius:5px;color:var(--blue);background:transparent}.experience-consent button:first-child{background:var(--blue);color:white}
.experience-preferences{border:0;background:transparent;color:var(--muted);font:12px 'DM Sans',sans-serif;text-decoration:underline;cursor:pointer;padding:8px 0}
.experience-consent button:focus-visible,.experience-preferences:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.anatomy-image{will-change:left}
.change-status{position:absolute;top:0;left:0;right:0;margin:0;text-align:center;color:var(--blue);font-size:12px;line-height:1.5;z-index:6;pointer-events:none}
.change-status[hidden]{display:none}
@media(min-width:701px){
  [data-visual-side=left]>.about-copy,[data-visual-side=left]>.journey-copy{margin-left:auto}
  .hero-copy,.about-copy,.journey-copy{background:transparent;box-shadow:none;position:relative;z-index:2}
  /* The empty interval is the crossing lane, not a mask over the model. */
  .hero,.about,.journey-panel{display:block;min-height:190vh;padding-top:20vh;padding-bottom:110vh}
  .journey-panel[data-region=face]{min-height:200vh}
  .hero-bottom{bottom:104vh}
}
.anatomy-image:before,.anatomy-image:after{display:none!important}
:is(#region-label,#maxilla-label){color:var(--blue)}
:is(#region-label,#maxilla-label) i{background:var(--blue);box-shadow:0 0 0 5px #a4523c18}
:is(#region-label,#maxilla-label) span{color:var(--ink);background:#faf6f2ed;border-color:var(--line)}
@media(max-width:700px){
  .anatomy-stage{height:100svh;margin-bottom:-100svh;min-height:0;padding:0;background:transparent;box-shadow:none}
  .anatomy-stage:before{content:'';position:absolute;left:0;right:0;bottom:0;height:43svh;background:var(--paper)}
  .anatomy-image{position:absolute;left:6%;right:auto;top:auto;bottom:8px;width:88%;height:43svh;max-height:460px}
  #scene,.anatomy-image img{border-radius:0}
  .hero,.about,.journey-panel{padding:38px 6% 49svh;min-height:105svh}
  .journey-panel[data-region=face]{min-height:125svh}
}

/* Mobile: a compact sticky viewer, bounded by the anatomy section. */
@media(max-width:700px){
  .anatomy-story{isolation:isolate;overflow:clip}
  .anatomy-stage{position:sticky;inset:auto;top:0;height:40svh;min-height:250px;max-height:360px;margin:0;z-index:4;padding:12px 6% 0;background:var(--paper);overflow:hidden;box-shadow:none}
  .anatomy-stage:before{display:none}
  .anatomy-image{position:relative;inset:auto!important;width:100%;height:100%;max-height:none;margin:0}
  #scene{inset:8px 0 90px;height:calc(100% - 98px)}
  .scene-caption{bottom:64px}
  #scene-meter{bottom:55px}
  .simulation-note{bottom:8px;max-width:60%}
  #compare-face{bottom:12px}
  .hero,.about,.journey-panel,.journey-panel[data-region=face]{min-height:0;padding:28px 6% 36px;display:block}
  .hero-copy,.about-copy,.journey-copy{width:100%;max-width:none}
  .journey-panel+.journey-panel{border-top:1px solid var(--line)}
  .hero .hero-title{font-size:38px;line-height:1.12}
  .hero .intro{max-width:none}
  .journey-copy h2,.about-copy h2{font-size:32px}
  .portrait-profile{z-index:5;padding:40px 6%;gap:28px}
  .portrait-seated{overflow:visible}
  .portrait-seated img{max-height:75svh;object-fit:contain}
  .services,.contact-with-portrait{padding-top:48px;padding-bottom:48px}
}