@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400;font-display:swap;src:url('./assets/fonts/bodoni-italic.ttf')}
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400;font-display:swap;src:url('./assets/fonts/bodoni-regular.ttf')}

*{box-sizing:border-box}html{background:#e9e4d9}body{margin:0;color:#283b39;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}body.intro{height:100svh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;cursor:none}body.journey{height:1140vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible{outline:1px solid currentColor;outline-offset:10px}button:disabled{cursor:default}#scene{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}#backdrop,#halo,#trail,#mist{display:none}
header,footer{position:fixed;left:4vw;right:4vw;z-index:5;display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:2.4px}header{top:34px;pointer-events:none}footer{bottom:28px}footer button{font-size:9px;letter-spacing:1.4px;padding:10px 0}#footer-hint{font-size:9px;letter-spacing:2px;opacity:.6}body.intro header,body.intro footer{visibility:hidden}main{position:relative;z-index:3;pointer-events:none}
#entrance{position:fixed;inset:0;text-align:center;padding-top:5.5vh}.begin-wrap{width:100%}#entrance .eyebrow,.begin-dot{display:none}#begin{pointer-events:auto;font-family:'Bodoni Moda',Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;font-size:clamp(64px,6.2vw,112px);letter-spacing:-.05em;line-height:1.12;padding:0 25px 12px;transition:opacity .6s,color .4s;touch-action:none} #begin{opacity:.74;color:#46594f}#begin:disabled{opacity:.32}body[data-stage=confirming] #begin{opacity:.35}#begin:hover{color:#54645b}.gesture-guide{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);margin:0;opacity:.55;transition:opacity .65s}.gesture-guide svg{width:220px;height:155px;overflow:visible}.gesture-guide path{fill:none;stroke:#6c7d72;stroke-opacity:.5;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}.gesture-guide circle{fill:#6c7d72;opacity:.4}.gesture-guide:after{content:'';position:absolute;inset:0;filter:blur(8px);opacity:.1}body[data-stage=confirming] .gesture-guide,body[data-stage=entering] .gesture-guide{opacity:0}
#hint{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.load-error #hint{clip:auto;width:auto;height:auto;position:fixed;left:15%;right:15%;top:60%;font-size:13px;white-space:normal}
#story,#finale{position:fixed;inset:0;opacity:0;visibility:hidden}#story-left,#story-right{position:absolute;top:40%;width:26%}#story-left{left:6vw}#story-right{right:5vw;top:48%;text-align:right}.eyebrow{font-size:9px;letter-spacing:3px;line-height:1.6;margin:0 0 26px;opacity:.55}h1,h2{font-family:'Bodoni Moda',Georgia,serif;font-weight:400;font-size:clamp(38px,4.5vw,78px);line-height:1.02;letter-spacing:-.045em;margin:0}#finale{padding-left:9vw;padding-top:28vh}#finale h2{font-size:clamp(52px,6.7vw,112px)}.actions{margin-top:40px;display:flex;flex-direction:column;align-items:start;gap:18px;pointer-events:auto}.actions button{font-size:19px;border-bottom:1px solid #a6ada7;padding:0 0 12px;min-width:230px;text-align:left}.actions button span{float:right}.actions button+button{font-size:13px;border:0;opacity:.65}.placeholder{font-size:10px;opacity:.45;margin-top:18px;max-width:250px;line-height:1.5}#credits{position:fixed;z-index:10;bottom:80px;right:4vw;max-width:370px;background:#1b282b;color:#eee9dd;padding:20px;font-size:11px;line-height:1.8}#credits a{color:inherit}#line-progress{position:fixed;bottom:0;left:0;height:1px;background:#b4a17a;z-index:12;transform-origin:left;transform:scaleX(0);width:100%}
@media(max-width:700px){header{top:24px;font-size:7px;letter-spacing:1px}header span:first-child{max-width:135px}footer{bottom:20px}#footer-hint{font-size:7px;letter-spacing:1px}#entrance{padding-top:5vh}#begin{font-size:15vw;padding-bottom:12px}.gesture-guide{top:43%}.gesture-guide svg{width:155px;height:120px}.eyebrow{font-size:8px;letter-spacing:2px}#story-left,#story-right{width:80%;left:8vw;right:auto;text-align:left;top:18%}#story-right{top:18%;bottom:auto}h1,h2{font-size:38px}#finale{padding:19vh 8vw 0}#finale h2{font-size:14vw}.actions{margin-top:26px}.actions button{font-size:17px}.placeholder{max-width:180px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* Shared opening clock: a strong first demonstration settles into the film. */
html{background:#193e43}
#begin{filter:drop-shadow(0 0 12px rgba(239,235,220,.6))}
#begin:hover{opacity:1}
body.intro #begin{cursor:none}
body[data-stage=arriving] #begin{opacity:var(--opening-title-opacity,0);color:var(--opening-title-color,#eae5da);transition:none}
/* A broad, tall gesture fills the opening; the viewport wrapper prevents overflow. */
.gesture-guide{left:0;top:0;width:100vw;height:100svh;transform:none;overflow:hidden;opacity:0;transition:opacity .22s}
.gesture-guide svg{display:block;position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(1660px,92vw);height:118svh;overflow:visible}
.gesture-guide path{stroke-dasharray:1;stroke-dashoffset:0}
.gesture-guide .guide-under{stroke:#fffbea;stroke-width:14;stroke-opacity:calc(.22 + .50 * var(--guide-emphasis,0));filter:blur(1.3px)}
.gesture-guide .guide-base{stroke:#729083;stroke-width:7;stroke-opacity:.31;filter:blur(.25px)}
.gesture-guide .guide-trace{stroke:#315f56;stroke-width:6;stroke-opacity:calc(.39 + .56 * var(--guide-emphasis,0));filter:blur(.35px);animation:none}
.gesture-guide .guide-start-ring{fill:none;stroke:#739082;stroke-width:1;opacity:.27}
.gesture-guide .guide-start{fill:#718c7b;opacity:.5}
.gesture-guide .guide-cursor{fill:#fffbed;stroke:#a1b2a0;stroke-width:.4;filter:drop-shadow(0 0 2px #fff5dd);r:3.3px;animation:none}
body[data-stage=arriving] .guide-start-ring,body[data-stage=arriving] .guide-start{opacity:0}
@media(max-width:700px){
 #entrance{padding-top:5.5svh}
 #begin{font-size:clamp(48px,15vw,76px)}
 .gesture-guide svg{left:50%;top:51%;width:116vw;height:100svh}
}
@media(prefers-reduced-motion:reduce){.guide-cursor{display:none}}

/* Visible guide is composited inside the same material as the film and hand. */
.gesture-guide svg{opacity:0}

/* Reconstruction copy passes through the petrol space. */
#story-last{position:absolute;left:6vw;top:45%;width:27%;opacity:0}#story-right{top:43%}#story-left,#story-right,#story-last{will-change:transform,opacity}
@media(max-width:700px){#story-left,#story-right,#story-last{left:7vw;top:13%;width:86%;text-align:left}#story h1,#story h2{font-size:36px}body.journey{height:1206.6667svh}}

/* Semantic copy is retained; its visible counterpart is etched into the 3D panes. */
#story{clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;}

/* V37: semantic hit areas share their exact bounds with the 3D tile faces. */
#finale{padding:0;pointer-events:none;text-align:center}
#finale [hidden]{display:none!important}
#finale h2{position:absolute;top:12svh;left:5%;width:90%;font-size:clamp(54px,6.1vw,104px);line-height:.98;letter-spacing:-.055em;outline:none}
#finale h2 em{font-weight:400;color:#cfcab7}
.next-tiles{position:absolute;top:46svh;left:50%;transform:translateX(-50%);width:min(64vw,1000px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,58px);pointer-events:auto}
.next-tile{display:block;width:100%;height:clamp(185px,27svh,290px);background:transparent;border:0;padding:0;border-radius:12px}
.next-tile span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.next-tile:focus-visible{outline:2px solid #d5cfb0;outline-offset:9px}
body.next-active{cursor:none}
body.next-active button,body.next-active a{cursor:none}
body.next-active header{opacity:0;pointer-events:none}
body.next-active #footer-hint{visibility:hidden}
.next-back{position:absolute;left:8vw;top:9svh;font-size:11px;letter-spacing:2px;pointer-events:auto;z-index:2}
.next-view{position:absolute;inset:0}
#work-view h2{top:12svh}
.work-tiles{grid-template-columns:1fr;width:min(38vw,470px);top:47svh}
#contact-view h2{left:11%;top:17svh;width:38%;text-align:left;font-size:clamp(52px,5.7vw,96px)}
#enquiry-form{position:absolute;top:23svh;left:54%;width:34%;text-align:left;pointer-events:auto}
#enquiry-form label{display:block;font-size:10px;letter-spacing:1.4px;color:#bcbeb0}
.enquiry-row{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-bottom:35px}
#enquiry-form input,#enquiry-form textarea{box-sizing:border-box;display:block;width:100%;border:0;border-bottom:1px solid #6c797180;background:transparent;color:#eeebdc;padding:13px 0;font:15px Arial;outline:none;border-radius:0;cursor:text;letter-spacing:0}
#enquiry-form input:focus,#enquiry-form textarea:focus{border-bottom-color:#d5cfb0}
#enquiry-form textarea{resize:vertical;min-height:100px;max-height:25svh}
#enquiry-form textarea::placeholder{color:#a9b1a6}
.enquiry-submit{display:flex;justify-content:space-between;gap:45px;width:100%;padding:20px 0;margin-top:16px;font-size:16px;border-bottom:1px solid #788276}
#enquiry-status{min-height:24px;font-size:11px;color:#d5cfb0;letter-spacing:.5px}
#finale button:focus-visible{outline:2px solid #d5cfb0;outline-offset:7px}
body.next-active footer{font-size:9px}
@media(max-width:700px){
 #finale h2{top:13svh;font-size:clamp(46px,13.5vw,70px)}
 .next-tiles{top:40svh;width:82vw;gap:19px;grid-template-columns:1fr}
 .next-tile{height:19svh;min-height:130px;max-height:190px}
 .next-back{top:7svh}
 #work-view h2{top:15svh}.work-tiles{top:45svh}
 #contact-view h2{top:13svh;left:9%;width:82%;font-size:12vw}
 #enquiry-form{top:39svh;left:9%;width:82%}
 .enquiry-row{margin-bottom:22px;gap:18px}
 #enquiry-form textarea{min-height:70px;max-height:15svh}
 .enquiry-submit{padding:15px 0}
}
@media(max-height:600px) and (min-width:701px){
 #finale h2{top:9svh;font-size:54px}.next-tiles{top:44svh}.next-tile{height:34svh;min-height:140px}
 #enquiry-form{top:17svh}#contact-view h2{top:20svh}
}

html{scrollbar-width:none}html::-webkit-scrollbar{width:0;height:0}

/* V41 — tactile modules: graphite, aluminium and ivory. */
#finale{color:#efeeea}
#finale h2{font-family:Arial,Helvetica,sans-serif;font-weight:500;letter-spacing:-.045em;line-height:1.01}
#finale h2 em{font-style:normal;color:inherit;font-weight:inherit}
#finale #next-title{top:7.5svh;left:7%;width:80%;font-size:clamp(64px,7.5vw,126px);text-align:left}
.next-tiles,.work-tiles{position:absolute;inset:0;transform:none;width:100%;height:100%;display:block;pointer-events:none}
.next-tile{position:absolute;min-height:0;max-height:none;height:auto;border-radius:0;pointer-events:auto;touch-action:pan-y}
body.next-active footer{color:#aaa9a3;opacity:.5;font-size:8px}
body.next-active #line-progress{opacity:0}
#enquiry-form label{color:#c5c7c7}
#enquiry-form input,#enquiry-form textarea{color:#efeeea;border-bottom-color:#969ea259}
#enquiry-form input:focus,#enquiry-form textarea:focus{border-bottom-color:#e4dfd5}
#enquiry-form textarea::placeholder{color:#9ca1a3}
.enquiry-submit{border-bottom-color:#b3b1a780}
#enquiry-status{color:#d7d6ce}
@media(max-width:700px){
 #finale #next-title{top:6svh;left:8%;width:84%;font-size:clamp(40px,11.4vw,65px);line-height:1.04}
 #work-view h2{top:12svh;font-size:12vw}
 #contact-view h2{top:13svh;font-size:12vw}
 .next-tiles,.work-tiles{inset:0;width:100%;height:100%}
 .next-tile{min-height:0;max-height:none}
}
@media(max-height:600px) and (min-width:701px){
 #finale #next-title{top:6svh;font-size:11svh;line-height:1}
 .next-tiles,.work-tiles{inset:0}
}