:root {
  color-scheme: dark;
  --ink: #171410;
  --text: #f6f3ee;
  --muted: #c2bcb4;
  --quiet: #a79c90;
  --accent: #ff9d43;
  --accent-hover: #ffae60;
  --cta-gradient: linear-gradient(180deg, #ffb160 0%, var(--accent) 52%, #ed872e 100%);
  --cta-gradient-hover: linear-gradient(180deg, #ffbc77 0%, var(--accent-hover) 52%, #fa963d 100%);
  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --page-gutter: 5.7vw;
  --brand-gutter: 4.7vw;
  --header-logo-width: clamp(110px,8.15vw,182px);
  --footer-logo-width: 58px;
}
html {-webkit-text-size-adjust:100%;text-size-adjust:100%;}
* {box-sizing: border-box;}
html,body {margin:0; min-width:320px; background:var(--ink);}
body {font-family:var(--font); font-synthesis:none; font-optical-sizing:auto; color:var(--text); -webkit-font-smoothing:antialiased;}
button,input,textarea {font:inherit;}
button,a {-webkit-tap-highlight-color:transparent;}
button {color:inherit;}
button {cursor:pointer;}
button:disabled {cursor:wait; opacity:.65;}
a {color:inherit;}
button:focus-visible,a:focus-visible,canvas:focus-visible {outline:2px solid var(--accent);outline-offset:6px;}
[hidden] {display:none !important;}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.skip-link {position:fixed;z-index:100;top:10px;left:12px;padding:12px 18px;background:var(--accent);color:#171410;transform:translateY(-160%);}
.skip-link:focus {transform:translateY(0);}
.hero {position:relative;isolation:isolate;min-height:680px;height:100svh;overflow:hidden;background:#191510;display:grid;grid-template-columns:max-content 70svh;grid-template-rows:26.55% 1fr;column-gap:clamp(32px,4vw,96px);justify-content:center;}
.atmosphere {position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 73% 18%,#6a5140 0%,#483627 23%,#292118 47%,#141310 78%);}
.atmosphere__glow {position:absolute;inset:0;background:radial-gradient(ellipse at 87% 55%,rgba(164,109,64,.35),transparent 36%),linear-gradient(90deg,rgba(10,11,10,.86) 0%,rgba(13,12,10,.58) 31%,transparent 58%),linear-gradient(180deg,rgba(3,4,3,.09),transparent 70%,rgba(9,8,7,.3));}
.atmosphere__floor {position:absolute;left:0;right:0;top:62%;height:45%;background:radial-gradient(ellipse at 80% 31%,rgba(183,115,62,.27),transparent 38%),linear-gradient(0deg,#15120f 0%,rgba(52,36,25,.6) 40%,transparent 100%);filter:blur(2px);}
.atmosphere__foreground {position:absolute;left:0;bottom:0;width:38.2%;height:31.4%;background:url('./assets/foreground.webp') left bottom/100% 100% no-repeat;opacity:.96;}
.atmosphere__edge {position:absolute;left:0;top:42.3%;width:5.55%;height:39.1%;background:url('./assets/foliage-edge.webp') left top/100% 100% no-repeat;opacity:.95;}
.atmosphere__grain {position:absolute;inset:0;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E");}
/* Keep the warm set subdued behind the separately lit product and mirror. */
.atmosphere::after {content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 25%,rgba(8,6,4,.42) 58%);}
.site-header {position:absolute;top:3.5%;left:var(--brand-gutter);right:4.6%;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.brand {display:block;width:var(--header-logo-width);height:auto;line-height:0;}
.brand img {display:block;width:100%;height:auto;}
.hero-copy {position:relative;z-index:3;grid-column:1;grid-row:2;align-self:start;width:max-content;pointer-events:none;}
.hero-copy > * {pointer-events:auto;}
h1 {font-weight:350;font-size:clamp(40px,3.91vw,88px);line-height:1.085;letter-spacing:-.046em;margin:0;}
h1 span {display:block;white-space:nowrap;}
h1 .accent {color:var(--accent);}
.hero-description {font-weight:350;font-size:clamp(17px,1.43vw,28px);line-height:1.38;letter-spacing:-.02em;color:var(--muted);margin:2.32vw 0 0;max-width:39ch;}
.description-mobile {display:none;}
.preview-button {display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:64px;min-width:290px;padding:18px 39px;margin-top:3.12vw;border:1px solid rgba(255,182,107,.36);border-radius:999px;background:var(--cta-gradient);color:#18140f;font-weight:550;font-size:clamp(16px,1.23vw,24px);line-height:1.35;letter-spacing:-.025em;box-shadow:0 6px 32px rgba(25,12,0,.09);transition:background .2s ease,box-shadow .2s ease,transform .2s ease;}
.preview-button svg {width:25px;height:25px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease;}
@media (hover:hover) {.preview-button:hover {background:var(--cta-gradient-hover);box-shadow:0 8px 34px rgba(255,155,65,.12);transform:translateY(-2px);}.preview-button:hover svg {transform:translateX(3px);}}
.preview-button:active {transform:translateY(0);}
.mobile-preview-button {display:none;}
.product-stage {--product-layout:wide;--product-contain:0;position:relative;grid-column:2;grid-row:1 / -1;align-self:start;justify-self:center;width:54.8vw;height:93.8%;top:6.2%;z-index:1;}
#product-canvas {position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;opacity:0;pointer-events:none;background:transparent;transition:opacity .65s ease;}
.product-stage {touch-action:none;cursor:grab;background:transparent;}
.product-stage.is-dragging {cursor:grabbing;}
.hero.has-live-model #product-canvas {opacity:1;}
.hero.is-model-zoomed {touch-action:none;}
.product-poster {position:absolute;inset:0;opacity:1;transition:opacity .7s ease;pointer-events:none;}
.product-poster img {width:100%;height:100%;object-fit:contain;display:block;}
.product-stage.is-ready .product-poster {opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s;}
.viewer-status {position:absolute;bottom:12%;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;color:#b9aa9a;font-size:11px;letter-spacing:.04em;transition:opacity .3s;}
.status-dot {width:4px;height:4px;flex-shrink:0;border-radius:50%;background:var(--accent);animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse {50% {opacity:.28;}}
.viewer-status.is-error .status-dot {animation:none;}
#retry-viewer {border:0;border-bottom:1px solid currentColor;background:transparent;padding:4px;color:var(--accent);font-size:inherit;}
.product-stage.is-ready .viewer-status {opacity:0;pointer-events:none;}
.viewer-tools {position:absolute;bottom:10.7%;right:7.4%;display:flex;align-items:center;gap:4px;z-index:2;opacity:1;}
.icon-button {padding:10px;border:1px solid rgba(237,214,190,.14);background:rgba(17,14,11,.22);color:#e3d6c9;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;backdrop-filter:blur(8px);}
.icon-button svg {fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;width:20px;height:20px;}
.icon-button:hover {background:rgba(117,81,46,.28);}
.icon-button[aria-pressed="true"] {border-color:var(--accent);color:var(--accent);}
.viewer-tools .icon-button {color:#b6a99a;border-color:rgba(182,169,154,.2);background:rgba(17,14,11,.16);}
.viewer-tools .icon-button:hover {color:#d2c4b1;background:rgba(117,81,46,.22);}
.viewer-tools .icon-button[aria-pressed="true"] {color:#c9ab87;border-color:rgba(201,171,135,.4);}
.noscript-message {position:absolute;left:20%;right:10%;bottom:14%;font-size:12px;line-height:1.5;color:var(--muted);}
/* Align the visible logo ink: the shared SVG has a 7/136 left inset. */
.site-footer {position:absolute;z-index:4;left:calc(var(--brand-gutter) + (var(--header-logo-width) - var(--footer-logo-width))*7/136);right:4.65%;bottom:4.4%;display:flex;justify-content:space-between;align-items:center;gap:24px;}
.footer-signature {position:relative;display:flex;align-items:baseline;gap:25px;}
/* The SVG letter baseline is y=43, with 6 units of padding beneath it. */
.footer-logo {position:relative;display:block;flex:none;width:var(--footer-logo-width);height:calc(var(--footer-logo-width)*38/136);}
.footer-logo img {position:absolute;bottom:calc(var(--footer-logo-width)*-6/136);display:block;width:100%;height:auto;}
.footer-tagline {font-size:clamp(9px,.69vw,13px);line-height:1.35;font-weight:400;text-transform:uppercase;letter-spacing:.135em;color:#b8afa5;}
/* Dialogs are native modal dialogs: focus trapping, Escape, and an inert background. */
html.has-dialog {overflow:hidden;}
body.has-dialog {position:fixed;left:0;right:0;top:var(--locked-page-top,0px);overflow:hidden;}
dialog {margin:0 auto;color:var(--text);border:1px solid #504438;background:linear-gradient(145deg,#272018,#191612 76%);width:min(600px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(var(--dialog-viewport-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#786a5b transparent;border-radius:18px;padding:0;box-shadow:0 28px 120px rgba(0,0,0,.65);}
.preview-dialog {position:absolute;overflow:clip;top:calc(var(--dialog-viewport-top,0px) + var(--dialog-viewport-height,100dvh)/2);bottom:auto;transform:translateY(-50%);}
.preview-dialog[open] {display:flex;flex-direction:column;}
dialog::backdrop {background:rgba(9,8,6,.76);backdrop-filter:blur(12px);}
.dialog-header {position:relative;z-index:2;background:#241e17;display:flex;align-items:center;gap:12px;flex:none;padding:20px 24px 12px;}
dialog h2 {font-size:32px;font-weight:500;letter-spacing:-.035em;line-height:1.18;margin:0 0 14px;}
.dialog-header h2 {margin:0;flex:1;min-width:0;}
#preview-heading:focus,.request-success:focus,.field-error:focus {outline:none;}
.dialog-close {position:static;flex:none;margin-left:auto;border:0;border-radius:8px;background:transparent;color:#ded4c8;backdrop-filter:none;}
.dialog-close svg {width:22px;height:22px;stroke-width:1.7;}
.dialog-close:hover {background:rgba(237,214,190,.08);color:var(--text);}
.dialog-close:focus-visible {outline:2px solid var(--accent);outline-offset:1px;}
#request-content,#preview-form {display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.dialog-scroll {flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:12px;padding:0 24px 20px;}
.dialog-scroll::-webkit-scrollbar,.preview-dialog::-webkit-scrollbar {width:5px;}
.dialog-scroll::-webkit-scrollbar-track,.preview-dialog::-webkit-scrollbar-track {background:transparent;}
.dialog-scroll::-webkit-scrollbar-thumb,.preview-dialog::-webkit-scrollbar-thumb {background:#786a5b;border-radius:999px;}
.dialog-scroll::-webkit-scrollbar-button,.preview-dialog::-webkit-scrollbar-button {display:none;width:0;height:0;}
dialog p {font-size:15px;line-height:1.5;color:#c9c1b8;}
.dialog-intro {margin:0 0 22px;max-width:52ch;}
.form-fields {display:flex;flex-direction:column;gap:16px;}
.form-field {display:flex;flex-direction:column;gap:7px;min-width:0;}
.form-field label {width:100%;}
dialog .field-error {margin:0;color:var(--accent);font-size:13px;line-height:1.4;}
.form-field [aria-invalid="true"] {border-color:var(--accent);}
.form-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;}
form label {display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;font-size:14px;line-height:1.4;font-weight:500;color:#eee6dc;}
.optional {font-size:12px;color:#b4a89a;font-weight:400;}
input,textarea {width:100%;min-width:0;border:1px solid #766757;border-radius:8px;background:#171410;color:var(--text);padding:11px 12px;min-height:48px;font-size:16px;line-height:1.4;outline:none;}
textarea {resize:vertical;min-height:76px;}
input:focus,textarea:focus {border-color:var(--accent);box-shadow:0 0 0 2px rgba(255,157,67,.15);}
input::placeholder,textarea::placeholder {color:#ac9e8d;opacity:1;}
.honey {position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
/* The action follows the final field inside the same natural scroll area. */
.dialog-actions {display:flex;align-items:center;justify-content:center;flex:none;padding:24px 0 0;border:0;background:transparent;}
.preview-dialog .form-submit {transform:none;margin:0;width:100%;min-width:0;font-size:16px;min-height:52px;padding:13px 20px;letter-spacing:-.015em;}
.preview-dialog .form-submit:focus-visible {outline-offset:3px;}
.request-success {min-height:0;overflow-y:auto;padding:4px 24px 24px;}
.dialog-eyebrow {margin:0 0 12px;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;font-size:12px;}
dialog p.dialog-eyebrow {font-size:12px;color:var(--accent);}
.preview-dialog .request-success .form-submit {margin-top:16px;}
.text-button,.inline-link {padding:0;border:0;background:none;color:var(--accent);}
.text-button {margin-top:24px;font-size:15px;}
.inline-link {text-decoration:underline;text-underline-offset:3px;}
/* Portrait tablets and phones recompose, rather than shrink, the desktop artwork. */
@media (max-width:1050px) and (orientation:portrait) {
  :root {--page-gutter:7vw;--header-logo-width:116px;}
  html,body {min-width:0;}
  /* Reserve every row, including the footer and safe-area padding, inside the
     current viewport. Only genuinely short screens grow to fit their content. */
  .hero {height:auto;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(180px,1fr) auto auto;justify-content:stretch;column-gap:0;padding:0;}
  .site-header {position:relative;grid-column:1;grid-row:1;top:auto;left:auto;right:auto;margin:0;padding:calc(32px + env(safe-area-inset-top)) var(--page-gutter) 0;align-items:center;}
  .hero-copy {position:relative;grid-column:1;grid-row:2;left:auto;top:auto;width:auto;align-self:stretch;margin:28px var(--page-gutter) 0;}
  h1 {font-size:clamp(34px,5.3vw,56px);font-weight:500;letter-spacing:-.045em;line-height:1.12;}
  .hero-description {font-size:clamp(17px,2.4vw,20px);font-weight:400;color:#d6d0c8;line-height:1.5;max-width:40ch;margin-top:16px;letter-spacing:-.015em;}
  .description-desktop,.hero-copy > .preview-button {display:none;}
  .description-mobile {display:inline;}
  .mobile-preview-button {display:flex;position:relative;z-index:3;grid-column:1;grid-row:4;justify-self:stretch;align-self:end;min-width:0;min-height:50px;font-size:17px;padding:12px 24px;gap:24px;margin:8px var(--page-gutter) 12px;}
  .product-stage {--product-layout:portrait;position:relative;grid-column:1;grid-row:3;align-self:stretch;justify-self:stretch;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:auto;min-height:0;aspect-ratio:auto;margin:8px 0 0;}
  .product-poster {inset:0 3%;}
  .product-poster img {object-fit:contain;}
  .viewer-status {bottom:7%;font-size:10px;}
  .viewer-tools {bottom:4px;right:var(--page-gutter);opacity:.85;}
  .site-footer {position:relative;grid-column:1;grid-row:5;left:auto;right:auto;bottom:auto;padding:8px var(--page-gutter) calc(16px + env(safe-area-inset-bottom));align-self:stretch;flex-wrap:wrap;gap:8px 18px;}
  .footer-signature {align-items:baseline;gap:10px;margin-left:calc((var(--header-logo-width) - var(--footer-logo-width))*7/136);}
  .footer-tagline {font-size:12px;font-weight:400;color:#c2bcb4;letter-spacing:0;max-width:none;line-height:1.3;text-transform:none;white-space:nowrap;}
  .atmosphere {background:radial-gradient(ellipse at 72% 63%,#60462f,transparent 55%),linear-gradient(155deg,#171611,#272016 60%,#16130f);}
  .atmosphere::after {background:linear-gradient(180deg,transparent 20%,rgba(8,6,4,.42) 50%);}
  .atmosphere__glow {background:linear-gradient(180deg,rgba(7,8,7,.18),rgba(10,10,9,.2) 37%,transparent 64%);}
  .atmosphere__floor {top:auto;bottom:0;height:34%;}
  .atmosphere__foreground {width:53%;height:18%;opacity:.45;}
  .atmosphere__edge {display:none;}
}
@media (max-width:540px) {
  :root {--page-gutter:6.4vw;--header-logo-width:84px;--footer-logo-width:50px;}
  .hero-copy {margin-top:26px;}
  h1 {font-size:clamp(26px,8.1vw,36px);line-height:1.12;letter-spacing:-.04em;}
  .hero-description {font-size:17px;line-height:1.5;max-width:35ch;margin-top:16px;}
  .product-poster {inset:0 0;}
  .site-footer {row-gap:12px;align-items:center;}
  dialog {border-radius:14px;}
  dialog {width:calc(100vw - 24px);max-width:calc(100vw - 24px);}
  .dialog-header {padding:16px 20px 12px;gap:4px;}
  .dialog-header h2 {font-size:clamp(24px,6.7vw,28px);}
  .dialog-scroll {padding:0 20px 20px;}
  .dialog-intro {margin-bottom:18px;}
  .form-fields,.form-row {gap:14px;}
  .form-row {grid-template-columns:minmax(0,1fr);}
  .dialog-actions {padding:24px 0 0;}
  .request-success {padding:4px 20px 20px;}
}
/* Transfer 20px of phone header padding to the space above the CTA.
   Keeping their total constant preserves the stage size and CTA position. */
@media (max-width:540px) and (orientation:portrait) {
  .site-header {padding-top:calc(12px + env(safe-area-inset-top));}
  .mobile-preview-button {margin-top:28px;}
  .site-footer {justify-content:center;}
  .footer-signature {margin-left:0;}
}
@media (max-width:370px) {
  :root {--footer-logo-width:44px;}
  h1 {font-size:26px;letter-spacing:-.05em;}
}
@media (min-width:1051px) and (min-aspect-ratio:21/9) {
  .hero {grid-template-rows:25% 1fr;}
  h1 {font-size:min(3.7vw,10vh);}
  .hero-description {font-size:min(1.3vw,3.1vh);margin-top:3.2vh;}
  .preview-button {margin-top:5vh;}
}
@media (max-height:650px) and (min-width:1367px) and (orientation:landscape) {
  .hero {min-height:560px;}
  h1 {font-size:3.8vw;}
  .hero-description {font-size:clamp(15px,1.5vw,20px);}
  .preview-button {min-height:52px;min-width:240px;padding:13px 26px;font-size:16px;}
  :root {--header-logo-width:106px;}
}

/* Tablets reserve space for the action and footer inside the visible viewport. */
@media (min-width:541px) and (max-width:1050px) and (orientation:portrait) {
  :root {--page-gutter:6vw;--header-logo-width:132px;--footer-logo-width:58px;}

  .site-header {padding-top:calc(28px + env(safe-area-inset-top));}
  .hero-copy {margin-top:24px;}
  h1 {font-size:clamp(36px,5.4vw,56px);line-height:1.12;letter-spacing:-.04em;}
  .hero-description {font-size:clamp(18px,2.5vw,22px);line-height:1.45;max-width:44ch;margin-top:16px;}
  .product-stage {margin-top:14px;}
  .mobile-preview-button {width:min(600px,calc(100% - 2*var(--page-gutter)));justify-self:center;margin:14px 0 10px;min-height:64px;font-size:20px;padding:16px 28px;}
  .site-footer {min-height:58px;padding:8px var(--page-gutter) calc(18px + env(safe-area-inset-bottom));justify-content:center;align-items:center;}
  .footer-signature {gap:14px;margin-left:0;}
  .footer-tagline {font-size:14px;line-height:1.4;}
  .viewer-tools {right:var(--page-gutter);bottom:8px;gap:8px;}
  .viewer-tools .icon-button {width:48px;height:48px;}
}
/* The CSS viewport is the fallback. On touch landscape, the page controller
   refreshes the layout height after app switching and browser-chrome changes. */
@media (max-width:1366px) and (orientation:landscape) {
  :root {--page-gutter:clamp(28px,4.5vw,64px);--header-logo-width:clamp(116px,10.5vw,142px);--footer-logo-width:58px;--landscape-gap:clamp(12px,calc(var(--landscape-page-height,100dvh) * 0.025),24px);--landscape-top-space:clamp(28px,calc(var(--landscape-page-height,100dvh) * 0.07),48px);--landscape-model-inset:clamp(16px,calc(var(--landscape-page-height,100dvh) * 0.04),28px);--landscape-copy-gap:clamp(18px,calc(var(--landscape-page-height,100dvh) * 0.065),40px);--viewer-control-size:44px;--landscape-gutter:max(var(--page-gutter),env(safe-area-inset-left),env(safe-area-inset-right));}
  html,body {overflow-x:hidden;overflow-y:auto;}
  .hero {position:relative;left:0;top:0;width:100%;height:auto;min-height:var(--landscape-page-height,100dvh);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto minmax(min-content,1fr) auto;column-gap:clamp(20px,3vw,48px);row-gap:var(--landscape-gap);padding:calc(var(--landscape-top-space) + env(safe-area-inset-top)) var(--landscape-gutter) max(var(--landscape-gap),env(safe-area-inset-bottom)) var(--landscape-gutter);}
  .site-header {position:relative;grid-column:1;grid-row:1;left:auto;right:auto;top:auto;padding:0;margin:0;min-height:0;}
  .hero-copy {position:relative;grid-column:1;grid-row:2;left:auto;top:auto;width:auto;min-width:0;margin:0;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:var(--landscape-copy-gap);}
  h1 {font-size:clamp(34px,3.75vw,50px);font-weight:450;line-height:1.12;letter-spacing:-.04em;}
  h1 span {white-space:normal;}
  .hero-description {font-size:18px;line-height:1.5;max-width:38ch;margin:0;}
  .description-desktop {display:none;}
  .description-mobile {display:inline;}
  .hero-copy > .preview-button {display:inline-flex;margin:0;font-size:18px;min-height:60px;min-width:0;max-width:100%;padding:15px 28px;}
  .mobile-preview-button {display:none;}
  .product-stage {--product-layout:landscape;--product-contain:1;position:relative;grid-column:2;grid-row:1 / 3;left:auto;right:auto;top:auto;bottom:auto;width:100%;height:auto;margin:var(--landscape-model-inset) 0 0;min-height:0;min-width:0;aspect-ratio:auto;justify-self:stretch;align-self:stretch;}
  .viewer-tools {right:0;top:calc(100% + var(--landscape-gap));bottom:auto;gap:8px;opacity:.85;}
  .viewer-tools .icon-button {width:var(--viewer-control-size);height:var(--viewer-control-size);}
  .site-footer {position:relative;grid-column:1 / -1;grid-row:3;justify-self:start;align-self:center;left:auto;right:auto;top:auto;bottom:auto;width:max-content;max-width:calc(100% - 2*var(--viewer-control-size) - 8px - var(--landscape-gap));min-width:0;min-height:var(--viewer-control-size);padding:0;margin:0;}
  .footer-signature {gap:14px;margin-left:0;max-width:100%;}
  .footer-tagline {font-size:14px;line-height:1.4;text-transform:none;letter-spacing:0;color:#c2bcb4;white-space:normal;}
}
/* Short screens keep readable type and touch targets within the same flexible grid. */
@media (max-width:1366px) and (max-height:600px) and (orientation:landscape) {
  :root {--page-gutter:clamp(24px,4vw,48px);--header-logo-width:75px;--footer-logo-width:42px;}
  .hero {grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);}
  h1 {font-size:clamp(22px,min(3.8vw,calc(var(--landscape-page-height,100dvh) * 0.074)),30px);font-weight:500;line-height:1.1;}
  .hero-description {font-size:clamp(13px,calc(var(--landscape-page-height,100dvh) * 0.037),15px);line-height:1.4;max-width:none;}
  .hero-copy > .preview-button {width:min(240px,100%);min-height:44px;font-size:15px;padding:10px 20px;gap:16px;}
  .hero-copy > .preview-button svg {width:22px;height:22px;}
  .viewer-tools {gap:6px;}
  .footer-signature {gap:10px;}
  .footer-tagline {font-size:12px;line-height:1.3;}
}


/* Bring the touch-landscape composition inward without changing desktop or
   portrait. The model uses the lower right column; controls keep their footer alignment. */
@media (max-width:1366px) and (orientation:landscape) and (pointer:coarse) {
  :root {--landscape-copy-inset:clamp(12px,1.5vw,20px);--landscape-model-shift:clamp(8px,1vw,14px);}
  .hero-copy {left:var(--landscape-copy-inset);}
  .hero-description {font-size:calc(18px + 1pt);}
  .product-stage {grid-row:1 / -1;width:auto;margin-left:calc(-2 * var(--landscape-model-shift));}
  .viewer-tools {top:auto;bottom:0;}
}
@media (max-width:1366px) and (max-height:600px) and (orientation:landscape) and (pointer:coarse) {
  :root {--landscape-copy-inset:clamp(16px,3vw,40px);--landscape-model-shift:clamp(16px,3vw,40px);}
  .hero-description {font-size:calc(clamp(13px,calc(var(--landscape-page-height,100dvh) * 0.037),15px) + 1pt);}
}

/* Art-direction panel is available only at ?studio=1; never visible in normal mode. */
.studio-panel {position:fixed;z-index:20;right:16px;top:90px;width:280px;max-height:75svh;overflow:auto;border:1px solid #66503a;border-radius:12px;padding:20px;background:rgba(18,16,13,.95);backdrop-filter:blur(15px);font-size:12px;}
.studio-panel h2 {font-size:16px;font-weight:450;margin:0 0 15px;}
.studio-panel label {display:block;margin:14px 0 5px;}
.studio-panel input[type=range] {padding:0;min-height:20px;accent-color:var(--accent);}
.studio-panel output {float:right;color:var(--accent);}
.studio-panel button {background:#33281d;border:1px solid #695139;padding:8px 12px;border-radius:6px;margin:10px 4px 0 0;}

/* Feather the photographic set into the surrounding studio and live floor. */
.atmosphere__studio {position:absolute;left:45.2%;top:6.2%;width:54.8%;height:93.8%;background:url('./assets/studio-background.webp') center/100% 100% no-repeat;mask-image:linear-gradient(90deg,transparent,#000 18%,#000);}
.brand img,.footer-signature img {shape-rendering:geometricPrecision;}
.product-stage:focus-visible {outline:1px solid rgba(255,157,67,.38);outline-offset:-16px;}
@media (max-width:1050px) and (orientation:portrait) {
  .atmosphere__studio {}
  .product-poster {}
}

/* Mobile uses the available screen as one form sheet. Fields and the final
   action share a scroller, so the CTA cannot float above unfinished content. */
@media (max-width:600px), (max-width:1366px) and (max-height:600px) and (pointer:coarse) {
  .preview-dialog {--dialog-edge:8px;--dialog-safe-top:env(safe-area-inset-top);--dialog-safe-bottom:env(safe-area-inset-bottom);top:calc(var(--dialog-viewport-top,0px) + var(--dialog-edge) + var(--dialog-safe-top));transform:none;height:calc(var(--dialog-viewport-height,100dvh) - 2*var(--dialog-edge) - var(--dialog-safe-top) - var(--dialog-safe-bottom));max-height:calc(var(--dialog-viewport-height,100dvh) - 2*var(--dialog-edge) - var(--dialog-safe-top) - var(--dialog-safe-bottom));width:min(600px,calc(100% - 2*max(12px,env(safe-area-inset-left),env(safe-area-inset-right))));max-width:none;}
  .preview-dialog[data-keyboard] {--dialog-safe-top:0px;--dialog-safe-bottom:0px;}
  .preview-dialog .dialog-header {padding:12px 20px;}
  .preview-dialog .dialog-header h2 {font-size:clamp(24px,6.7vw,28px);}
  .preview-dialog .dialog-actions {padding:24px 0 0;}
}
.preview-dialog[data-compact] .dialog-header {padding:8px 20px;}
.preview-dialog[data-compact] .dialog-header h2 {font-size:24px;}
.preview-dialog[data-compact] .dialog-close {width:44px;height:44px;}
/* A keyboard can leave too little room for a field plus the header and footer.
   In that case use one scrollable form, so every field and action stays reachable. */
.preview-dialog[data-keyboard-short] {display:block;overflow-y:auto;scroll-padding-block:8px;--dialog-edge:0px;--dialog-safe-top:0px;--dialog-safe-bottom:0px;}
.preview-dialog[data-keyboard-short] #request-content,.preview-dialog[data-keyboard-short] #preview-form {display:block;}
.preview-dialog[data-keyboard-short] .dialog-scroll {overflow:visible;}
.preview-dialog input,.preview-dialog textarea,.preview-dialog button {scroll-margin-block:12px;}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .viewer-tools {opacity:1;}
}

/* Match the assembly guide's staggered UI entrance, with two-second fades.
   Individual translate leaves button hover transforms and layout intact. */
@keyframes razzl-entrance-rise {
  from {opacity:0;translate:0 var(--entrance-lift,6px);}
  to {opacity:1;translate:0 0;}
}
/* Keep readiness opacity independent: a late-loading canvas must remain
   hidden, and the poster must still disappear when the model is ready. */
@keyframes razzl-entrance-artwork {
  from {filter:opacity(0);}
  to {filter:opacity(1);}
}
@keyframes razzl-entrance-arrow {
  0%,100% {translate:0 0;}
  50% {translate:4px 0;}
}
@media (prefers-reduced-motion:no-preference) {
  /* All three layers share the page timeline, including a cached model. */
  .hero:not(.entrance-complete) :is(.atmosphere,.product-poster,#product-canvas) {
    animation:razzl-entrance-artwork 2000ms cubic-bezier(.22,1,.36,1) 600ms backwards;
  }
  .hero:not(.entrance-complete) :is(.site-header .brand,.hero-copy h1 > span,.hero-description,.footer-logo,.footer-tagline) {
    animation:razzl-entrance-rise 2000ms cubic-bezier(.22,1,.36,1) var(--entrance-delay,0ms) backwards;
  }
  .hero-copy h1 > span:first-child {--entrance-delay:200ms;}
  .hero-copy h1 > span:last-child {--entrance-delay:400ms;}
  .hero-description {--entrance-delay:600ms;}
  .footer-logo {--entrance-delay:700ms;}
  .footer-tagline {--entrance-delay:880ms;}
  .hero:not(.entrance-complete) :is(.hero-copy > .preview-button,.mobile-preview-button) {
    --entrance-delay:1200ms;
    --entrance-lift:10px;
    animation:razzl-entrance-rise 2000ms cubic-bezier(.22,1,.36,1) var(--entrance-delay) backwards;
  }
  .hero:not(.entrance-complete) :is(.hero-copy > .preview-button,.mobile-preview-button) > svg {
    animation:razzl-entrance-arrow 700ms cubic-bezier(.22,1,.36,1) 2700ms backwards;
  }
  /* These controls become available after the model loads, so start their
     entrance when the hidden attribute is removed, even on a slow connection. */
  .viewer-tools:not([hidden]):not(.entrance-complete) .icon-button {
    animation:razzl-entrance-rise 2000ms cubic-bezier(.22,1,.36,1) backwards;
  }
  .viewer-tools:not([hidden]):not(.entrance-complete) .icon-button + .icon-button {animation-delay:180ms;}
}
@media (max-width:1050px) and (orientation:portrait) {
  .hero {--entrance-lift:8px;}
}