/* Only the photographic hero uses this layer; earlier studies remain intact. */
#experience{min-height:700px;isolation:isolate;--copy-x:0px;--copy-y:0px;--copy-ry:0deg;--copy-rx:0deg}
header{padding:34px 4.5%;align-items:center;border-bottom:1px solid #fff1;background:linear-gradient(#06100b30,transparent)}
header nav{display:flex;gap:34px;margin-left:10%}
header nav a,.header-contact{font-size:16px;font-weight:500;text-decoration:none;color:#f4f2e9d9;transition:color .2s}
header nav a:hover,.header-contact:hover{color:#e5d2a7}
.header-contact{display:flex;gap:12px;align-items:center}
.header-contact>span:first-child{font-size:14px;color:#eee8d9}
.hero-copy{left:7.5%;top:50%;transform:translateY(-48%);max-width:650px;perspective:1100px}
.copy-plane{transform:translate3d(var(--copy-x),var(--copy-y),28px) rotateX(var(--copy-rx)) rotateY(var(--copy-ry));transform-origin:25% 55%;backface-visibility:hidden;will-change:transform}
.eyebrow{font-size:14px;letter-spacing:.14em;font-weight:500;margin-bottom:25px;color:#dfc799}
h1{font-size:clamp(64px,5.85vw,108px);line-height:.98;letter-spacing:-.055em;color:#fffdf5;text-shadow:0 2px 1px #10181024,0 12px 23px #06110d65,0 30px 65px #040e0b80}

.intro{max-width:400px;font-size:16px;line-height:1.75;color:#f0efe3c9;margin:30px 0 27px;text-shadow:0 2px 12px #04100c99}
.hero-actions{display:flex;align-items:center;gap:27px;pointer-events:auto}
.sample-cta{font-size:16px;font-weight:600;text-decoration:none;padding:17px 23px;min-height:58px;background:#e0c58f;box-shadow:0 6px 0 #06100c13,0 16px 38px #0004;transition:background .2s,transform .2s,box-shadow .2s}
.sample-cta:hover{background:#eed9af;transform:translateY(-2px);box-shadow:0 18px 40px #0005}
.sample-cta span{margin-left:3px}
.secondary-action{font-size:16px;color:#f7f4e9;text-decoration:none;border-bottom:1px solid #f7f4e948;padding:7px 0;white-space:nowrap}
.secondary-action span{margin-left:12px}.secondary-action:hover{border-color:#e0c58f;color:#e0c58f}
.reassurance{font-size:14px;line-height:1.6;letter-spacing:.015em;color:#efeee0d9;margin:20px 0 0}
.shade{background:linear-gradient(90deg,#07120ee0 0%,#07120e9c 26%,#09150e2e 53%,transparent 73%),linear-gradient(0deg,#08110ddd,transparent 24%,transparent 80%,#08110d50)}
.edge{box-shadow:inset 0 0 90px #07120b30}
.caption{right:4.5%;bottom:123px;align-items:center;gap:14px;opacity:.95;text-shadow:0 2px 15px #000}
.scene-mark{display:block;width:2px;height:44px;background:#dfc799}
.scene-label{font-size:14px;font-weight:500;letter-spacing:.14em;color:#e6d4aa;display:block;margin-bottom:6px}
.scene-caption{display:block;font-size:15px;color:#f2f1e8e6;line-height:1.5}
.controls{left:4.5%;right:4.5%;padding:20px 0 24px;border-top-color:#f7f4e927}
.instruction{font-size:14px;letter-spacing:.025em;color:#eeeede;gap:12px}
.instruction i{font-size:21px}.view-tools{display:flex;align-items:center;gap:22px}
.view-tools>button,.scene-settings summary{font-size:14px;background:none;border:0;padding:12px 0;color:#eeeddf;cursor:pointer;white-space:nowrap}
.view-tools>button:hover,.scene-settings summary:hover{color:#e5d2a7}
#clean span{margin-left:9px}.scene-settings{position:relative}.scene-settings summary{list-style:none}
.scene-settings summary::-webkit-details-marker{display:none}.scene-settings summary::after{content:'+';margin-left:9px;color:#d9bd86}.scene-settings[open] summary::after{content:'−'}
.settings{position:absolute;bottom:48px;right:0;width:330px;padding:20px;background:#14241eee;border:1px solid #e5d2a730;box-shadow:0 15px 45px #0005;backdrop-filter:blur(18px);border-radius:4px}
.settings input{width:110px}.settings label{min-width:58px;font-size:13px}.settings output{font-size:12px}.settings button{background:#ffffff08;font-size:13px}
.clean .hero-copy{opacity:0;transform:translateY(-48%);visibility:hidden;pointer-events:none}.clean .hero-actions{pointer-events:none}.clean .shade{opacity:.12}
@media(min-width:1500px){.hero-copy{left:8%;top:49%}.intro{font-size:17px;max-width:425px}}
@media(max-width:1000px){header nav{gap:23px;margin-left:0}.header-contact>span:first-child{display:none}.hero-actions{gap:20px}h1{font-size:72px}}
@media(max-width:750px){
 #experience{min-height:740px}header{padding:25px 7%}header nav{display:none}.header-contact{font-size:15px;gap:9px}.brand{font-size:29px}
 .hero-copy{left:8%;right:8%;top:46%;transform:translateY(-45%);max-width:none;perspective:none}.copy-plane{transform:none!important;will-change:auto}
 h1{font-size:clamp(49px,11.5vw,69px);line-height:1.02;letter-spacing:-.055em}.eyebrow{font-size:12px;letter-spacing:.1em;margin-bottom:22px;gap:9px}.eyebrow span{width:21px}
 .intro{font-size:16px;line-height:1.65;max-width:310px;margin:23px 0}.hero-actions{align-items:flex-start;flex-direction:column;gap:14px}.sample-cta{min-height:53px;padding:15px 20px;font-size:16px}.secondary-action{font-size:15px}
 .reassurance{font-size:13px;margin-top:18px;line-height:1.6;max-width:310px}.caption{display:none}.controls{left:7%;right:7%;gap:9px;align-items:stretch;padding:15px 0 18px}.instruction{font-size:12px}.view-tools{gap:0;justify-content:space-between}.view-tools>button,.scene-settings summary{font-size:12px;min-height:44px}.settings{width:min(310px,84vw);bottom:48px}
 .shade{background:linear-gradient(90deg,#07120eda,#07120e82 67%,#07120e30),linear-gradient(0deg,#08110df0,transparent 35%,transparent 75%,#08110d65)}.clean .hero-copy{transform:translateY(-45%)}
}
@media(max-height:780px) and (min-width:751px){#experience{min-height:650px}.hero-copy{top:48%;transform:translateY(-44%)}h1{font-size:72px}.intro{margin:22px 0}.eyebrow{margin-bottom:20px}.caption{bottom:115px}.clean .hero-copy{transform:translateY(-44%)}}
@media(prefers-reduced-motion:reduce){.copy-plane{transform:none!important;will-change:auto}.sample-cta:hover{transform:none}}

/* Navigation and scene controls share the same quiet, tactile treatment. */
header nav a{position:relative;padding:13px 0}
header nav a::after{content:'';position:absolute;bottom:5px;left:0;width:100%;height:1px;background:#e0c58f;transform:scaleX(0);transform-origin:left;transition:transform .22s}
header nav a:hover::after,header nav a:focus-visible::after{transform:scaleX(1)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid #edcf93;outline-offset:5px}
.sample-cta span,.secondary-action span{display:inline-block;transition:transform .2s}
.sample-cta:hover span,.secondary-action:hover span{transform:translate(2px,-2px)}
.sample-cta:active{transform:translateY(0);box-shadow:0 5px 18px #0004}
.view-tools>button,.scene-settings summary{min-height:44px;transition:color .2s}
#motion::before{content:'';display:inline-block;width:7px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor;margin-right:8px;vertical-align:-1px}
#motion[data-paused="true"]::before{width:0;height:0;border:5px solid transparent;border-right:0;border-left:7px solid currentColor}
#clean[aria-pressed="true"],.scene-settings[open] summary{color:#e0c58f}
.settings{display:grid;grid-template-columns:1fr;gap:14px;padding:24px;width:320px;border-radius:8px;background:#13241df7}
.settings label{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:15px;text-transform:none;letter-spacing:0}
.settings output{font-size:14px;margin:0}
.settings input{width:100%;max-width:none;height:24px;margin:0;accent-color:#e0c58f}
.depth-scale{display:flex;justify-content:space-between;color:#dddccbcc;font-size:12px;margin-top:-11px}
.settings button{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:4px;font-size:14px;border-radius:3px;padding:11px 13px;transition:background .2s}
.settings button:hover{background:#e0c58f18}.settings button span{font-size:19px;color:#e0c58f}
.scene-settings[open] .settings{animation:panel-in .2s ease-out}
.menu-toggle{display:none}
#mobile-menu{position:fixed;inset:0 0 auto auto;margin:0;width:min(440px,100%);max-width:100%;max-height:100svh;overflow:auto;padding:28px;background:#12231ff5;color:#f7f4e9;border:1px solid #e0c58f26;border-radius:0 0 0 12px;box-shadow:-20px 20px 100px #0006;backdrop-filter:blur(24px)}
#mobile-menu::backdrop{background:#030c0980;backdrop-filter:blur(6px)}
#mobile-menu[open]{animation:panel-in .25s ease-out}
.menu-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.menu-heading h2{font-size:14px;color:#e0c58f;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin:0}
.menu-close{background:none;border:0;font-size:14px;padding:10px 0 10px 14px;min-height:44px}.menu-close span{font-size:25px;vertical-align:-2px;margin-left:10px}
#mobile-menu nav{display:flex;flex-direction:column}
#mobile-menu nav a{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid #f7f4e924;font-size:25px;text-decoration:none;color:inherit}
#mobile-menu nav a span{font-size:19px;color:#e0c58f}
#mobile-menu nav a:hover,.menu-phone:hover{color:#e0c58f}
.menu-message{font-size:14px;color:#dddccbcc;margin:35px 0 18px}
#mobile-menu .sample-cta{width:100%;justify-content:space-between;gap:10px;font-size:15px}
.menu-phone{display:flex;flex-direction:column;gap:8px;font-size:14px;color:#eee;text-decoration:none;padding:24px 0 5px}.menu-phone span{font-size:19px}
@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:750px){
 header{gap:12px}.header-contact{margin-left:auto;font-size:14px}.header-contact>span:last-child{display:none}
 .menu-toggle{display:flex;gap:9px;align-items:center;font-size:14px;padding:10px 0 10px 9px;min-height:44px;border:0}
 .menu-icon{position:relative;display:block;width:17px;height:9px;border-top:1px solid #e0c58f;border-bottom:1px solid #e0c58f;margin:0}
 .settings{width:min(320px,86vw)}.settings input{max-width:none}
 .view-tools>button,.scene-settings summary{font-size:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.sample-cta:hover span,.secondary-action:hover span{transform:none}}
@media(max-width:360px){
 #experience{min-height:820px}.hero-copy{top:44%}
 h1{font-size:44px}.eyebrow{font-size:11px}.hero-actions .sample-cta{width:100%;gap:12px;justify-content:space-between;font-size:15px}
 .view-tools{flex-wrap:wrap;column-gap:18px;justify-content:flex-start}.scene-settings{margin-left:auto}
 .header-contact{font-size:13px}header{gap:8px}.menu-toggle{padding-left:5px}
}

/* A deliberate scene choice keeps the headline and camera movement continuous. */
.controls{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-top:14px;padding-bottom:18px}
.controls-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.scene-picker{position:relative;display:flex;align-items:center;gap:27px;min-height:48px}
.picker-label{font-size:13px;color:#e1d3b9;letter-spacing:.045em;white-space:nowrap}
.scene-options{display:flex;gap:10px;align-items:center}
.scene-options button{position:relative;min-height:44px;padding:10px 17px;border:1px solid transparent;border-radius:3px;background:transparent;color:#efeee0;font-size:16px;transition:color .2s,background .2s,border-color .2s}
.scene-options button:hover{background:#e0c58f12;color:#e0c58f}
.scene-options button[aria-pressed="true"]{color:#f1dab0;background:#e0c58f16;border-color:#e0c58f70}
.scene-options button.is-loading{border-color:#e0c58f90;border-style:dashed}
#scene-status{font-size:12px;color:#e4dac5;margin-left:auto}
#scene-status:not(:empty){animation:panel-in .2s ease-out}
.caption{bottom:181px}
@media(max-width:1100px){.scene-picker{gap:18px}.scene-options{gap:3px}.scene-options button{padding:10px 12px}#scene-status{position:absolute;right:0;bottom:100%;padding-bottom:5px}}
@media(max-height:800px) and (min-width:751px){
 #experience{min-height:720px}.hero-copy{top:43%;transform:translateY(-42%)}.clean .hero-copy{transform:translateY(-42%)}
 h1{font-size:68px}.intro{margin:20px 0}.eyebrow{margin-bottom:18px}.reassurance{margin-top:16px}.caption{bottom:174px}
}
@media(max-width:750px){
 #experience{min-height:840px}.hero-copy{top:38%;transform:translateY(-43%)}.clean .hero-copy{transform:translateY(-43%)}
 .controls{gap:8px;padding-top:14px;padding-bottom:18px}.controls-row{flex-direction:column;align-items:stretch;gap:8px}
 .scene-picker{flex-direction:column;align-items:stretch;gap:9px}.picker-label{font-size:13px}
 .scene-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 6px}
 .scene-options button{font-size:14px;padding:10px 4px;min-height:44px}
 #scene-status{position:static;min-height:0;margin:0;font-size:12px;padding:0}#scene-status:empty{display:none}
 .instruction{font-size:12px}.view-tools{gap:0}.scene-settings{margin-left:0}
}
@media(max-width:360px){#experience{min-height:940px}.hero-copy{top:35%}.view-tools{gap:0 16px}.scene-settings{margin-left:auto}}
#scene-status[data-visible="false"]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


