@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
:root{--bg:#161c1e;--bg2:#1f2829;--bg3:#111618;--teal:#0e3d41;--teal2:#16595d;--nh:4.7rem;--lw:clamp(120px,8.4vw,230px);--ln:rgba(255,255,255,.09);--fg:#f2f0ec;--gr:#8f8b85;--dk:#3f4d50;--ac:#ff8a3d;--sans:'Inter Tight',system-ui,sans-serif;--serif:'Instrument Serif','Times New Roman',serif;--mont:'Montserrat',system-ui,sans-serif;--pad:clamp(1.2rem,3.2vw,3.5rem);--ease:cubic-bezier(.22,1,.36,1);--noise:url(grain.png);color-scheme:dark}
html{background:var(--bg);scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--fg);font:300 1rem/1.55 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden}
/* film grain: one oversized layer, jittered with transform only (GPU) */
#grain{position:fixed;left:-50%;top:-50%;width:200%;height:200%;z-index:700;pointer-events:none;opacity:.4;background:var(--noise);will-change:transform;animation:grain .9s steps(8) infinite}
@keyframes grain{0%{transform:translate3d(0,0,0)}12%{transform:translate3d(-6%,-9%,0)}25%{transform:translate3d(-12%,5%,0)}37%{transform:translate3d(8%,-14%,0)}50%{transform:translate3d(-4%,12%,0)}62%{transform:translate3d(13%,3%,0)}75%{transform:translate3d(-9%,-6%,0)}87%{transform:translate3d(5%,9%,0)}}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}img,video{display:block;max-width:100%}
:focus-visible{outline:1px solid var(--fg);outline-offset:5px}
h1,h2,h3{font-weight:400;font-family:var(--serif);letter-spacing:-.015em}
.lb{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#4fc7bc;font-weight:500}
.w,.wi{display:inline-block}.wr{display:inline-block;white-space:nowrap}.wr .c{color:var(--dk)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* media frames: .mi is swapped for <img>/<video> once its file exists */
.frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}
.fb{position:absolute;inset:0;overflow:hidden;background:var(--bg2)}
.px{position:absolute;inset:0;will-change:transform}
.mi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 22s ease-in-out infinite alternate;animation-play-state:paused}
.on .mi{animation-play-state:running}
.mi:not(img):not(video){background:hsl(190 14% var(--t,16%))}
.mi:not(img):not(video)::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;font:500 9px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.26)}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translate3d(-1.2%,-.8%,0)}}
/* glow button: a short, thin light orbits the border */
.gb{position:relative;display:inline-block;padding:1.05rem 2.3rem;font:500 .6rem/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .5s,box-shadow .5s;cursor:pointer}
.gb::before,.gb::after{content:"";position:absolute;inset:0;padding:.7px;pointer-events:none;background:conic-gradient(from var(--a),transparent 0 87%,rgba(255,150,70,1) 96.5%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:rot 2.6s linear infinite}
.gb::after{inset:-2px;padding:2.5px;filter:blur(3.5px);opacity:.5}
@keyframes rot{to{--a:360deg}}
.gb:hover{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
/* ===== LOADER ===== */
#ld{position:fixed;inset:0;z-index:500;background:#000;color:#fff}
.ld-brand{position:absolute;top:7.3%;left:50%;transform:translateX(-50%);width:var(--lw);opacity:0}
.ld-logo{width:100%;height:auto}
.role{display:flex;justify-content:space-between;font:500 clamp(5.5px,.35vw,9px)/1 var(--mont);text-transform:uppercase;color:#fff}
.ld-brand .role{margin-top:clamp(7px,.55vw,12px)}
#tg{position:absolute;top:49.8%;left:50%;transform:translate(-50%,-50%);width:max-content;max-width:96vw;text-align:center;font:600 clamp(9px,.7vw,17px)/1.7 var(--mont);letter-spacing:.2em;text-transform:uppercase}
#tg .l{display:block;white-space:nowrap;padding-left:.2em}
.lw{display:inline-block;filter:blur(10px);opacity:0;white-space:pre;will-change:filter,opacity}
#pb{position:absolute;top:93.1%;left:50%;transform:translate(-50%,-50%);width:clamp(110px,11vw,260px);height:1px;background:rgba(255,255,255,.16)}
#pb i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
#en{padding:0;position:absolute;top:85.7%;left:50%;transform:translate(-50%,-50%);width:var(--lw);text-align:center;font:400 clamp(20px,1.62vw,40px)/1 var(--serif);letter-spacing:-.01em;color:#fff;opacity:0;filter:blur(8px);visibility:hidden}
#en .t{position:relative;display:block;width:100%;padding-bottom:.14em;border-bottom:1px solid #fff;transition:color .35s,border-color .35s}
#en .g{position:absolute;left:0;top:0;width:100%;text-align:center;pointer-events:none;opacity:0;padding-bottom:.14em;border-bottom:1px solid #fff}
#en.h .t{color:#7a7a7a;border-color:transparent}
#fn{position:absolute;top:93.1%;left:50%;transform:translate(-50%,-50%);width:max-content;text-align:center;font:700 clamp(8px,.62vw,15px)/1.08 Arial,Helvetica,sans-serif;letter-spacing:-.01em;text-transform:uppercase;color:#7c7c7c;opacity:0;filter:blur(8px)}
#fn span{display:block}
/* ===== NAV (glass) ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:300;height:calc(var(--nh) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--pad) 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;opacity:0}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(20,26,28,.55);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-bottom:1px solid rgba(255,255,255,.08);transition:opacity .5s}
.nav.mo::before{opacity:0}
.soc{display:flex;align-items:center;gap:1.05rem}.soc a{display:flex}.soc svg{width:15px;height:15px;fill:#fff;display:block;transition:opacity .3s}.soc a:hover svg{opacity:.5}
.lg{justify-self:center;position:relative;display:block;width:clamp(120px,9vw,190px);transform:translate3d(0,-.42rem,0);transition:transform .8s var(--ease)}
.lg img{position:relative;z-index:2;width:100%;height:auto}
.lg .role{position:absolute;z-index:1;left:0;right:0;top:calc(100% + clamp(5px,.4vw,8px));transition:transform .8s var(--ease),opacity .5s;will-change:transform,opacity}
.nav.s .lg{transform:translate3d(0,0,0)}.nav.s .lg .role{transform:translate3d(0,-190%,0);opacity:0}
#mb{justify-self:end;display:flex;align-items:center;gap:.9rem;font:500 .62rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase}
#mb i{position:relative;width:20px;height:9px;display:block}#mb i::before,#mb i::after{content:"";position:absolute;left:0;right:0;height:1px;background:#fff;transition:transform .5s,top .5s}
#mb i::before{top:0}#mb i::after{top:8px}#mb.o i::before{top:4px;transform:rotate(45deg)}#mb.o i::after{top:4px;transform:rotate(-45deg)}
#pg{position:fixed;left:var(--pad);right:var(--pad);bottom:1.1rem;height:1px;background:rgba(255,255,255,.14);z-index:290;opacity:0}#pg i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left}
/* ===== MENU ===== */
#menu{position:fixed;inset:0;z-index:250;background:var(--teal);overflow:hidden;clip-path:inset(0 0 100% 0);display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--nh) + env(safe-area-inset-top,0px)) var(--pad) 0}
#menu .shape{position:absolute;background:var(--teal2);pointer-events:none}
#menu .s1{width:70vw;height:70vw;left:-22vw;bottom:-46vw;border-radius:50%}#menu .s2{width:46vw;height:46vw;right:-12vw;top:-20vw;transform:rotate(45deg);border-radius:4vw}
.mlinks{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;width:100%}
#menu ul{list-style:none;padding:0}#menu li{overflow:hidden;padding-bottom:.02em}
#menu li a{display:inline-block;font:400 min(calc((100lvh - var(--nh) - 13rem)/4),11vw)/1 var(--serif);text-transform:uppercase;transition:opacity .45s}
#menu ul:hover li a{opacity:.26}#menu ul li a:hover{opacity:1}
.mc{display:inline-block;white-space:nowrap}
.mx{position:relative;display:inline-block;overflow:hidden;height:1em;vertical-align:top}
.mx b{display:block;font-weight:400;transition:transform .6s var(--ease);transition-delay:calc(var(--i)*24ms);will-change:transform}
.mx b+b{position:absolute;left:0;top:100%;color:#ff8a3d}
a:hover .mx b{transform:translate3d(0,-100%,0)}
#menu .sm{position:relative;gap:1.9rem;margin-bottom:clamp(1.2rem,3vh,2rem)}#menu .sm svg{width:22px;height:22px}
.mbot{position:relative;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;padding:0 0 1.5rem;font:700 .52rem/1.2 Arial,Helvetica,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#9fc7c4}
.mbot>span:first-child{text-align:left}.mbot .pw{display:flex;flex-direction:column;align-items:center;gap:.7rem}.mbot .pw img{width:clamp(90px,7vw,130px)}.mbot span:last-child{text-align:right}
/* ===== PAGE CURTAIN ===== */
#curtain{position:fixed;inset:0;z-index:600;background:var(--bg);transform:translate3d(0,100%,0);pointer-events:none}
.pt #curtain{transform:none}
/* ===== INTRO PINNED SCENE ===== */
.pin{position:relative;height:100lvh;overflow:hidden;background:#000}
.layer{position:absolute;inset:0}
.l-m1{transform-origin:50% 66%}
.l-dark{background:var(--bg);opacity:0}
.txt{display:flex;flex-direction:column;pointer-events:none}
.stm{align-items:center;justify-content:center;text-align:center}.stm h2{font-size:clamp(2.4rem,3.5vw,4.8rem);line-height:1.1}
.l-m3{inset:auto;left:var(--pad);top:calc(50% - 12.4vw);width:44vw;aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}
.abt{left:54vw;right:var(--pad);justify-content:center}
.abt-in{display:flex;flex-direction:column;align-items:flex-start;max-width:34rem;padding-top:2rem}
.abt h2{font-size:clamp(3rem,4.9vw,6.4rem);line-height:1;margin:1rem 0 .7rem}
.aka{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:#ff8a3d;font-weight:500;margin-bottom:1.6rem}
.abt p{font:300 clamp(.82rem,.92vw,1.08rem)/1.55 var(--sans);color:#e6e2db;margin-bottom:1rem}
/* ===== CREDENTIAL ===== */
.cred{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(5rem,12vh,9rem) var(--pad);background:var(--bg3)}
.cr-card{aspect-ratio:16/9;background:#000;overflow:hidden;border:1px solid rgba(255,138,61,.3)}.cr-card img{width:100%;height:100%;object-fit:cover}
.cred h2{font-size:clamp(2.6rem,4.3vw,5.6rem);line-height:1.04;margin:1.1rem 0 1.6rem}.cred p{max-width:30rem;color:#d6d1c9;margin-bottom:1rem;font-size:clamp(.85rem,.95vw,1.1rem)}
/* ===== SERVICES ===== */
.svc-intro{position:relative;padding:clamp(7rem,20vh,12rem) var(--pad) clamp(3rem,8vh,6rem);background:var(--bg)}
.svc-intro h2{font-size:clamp(3.2rem,7.2vw,9.6rem);line-height:.98;margin-top:1.1rem}
.svc{position:relative}
.svc-pin{position:relative;height:100lvh;overflow:hidden;background:var(--bg3)}
.sbg{position:absolute;inset:0}.sbg .bgl{position:absolute;inset:-6%;opacity:0;filter:blur(34px) brightness(.5) saturate(.85)}.sbg::after{content:"";position:absolute;inset:0;background:rgba(18,18,18,.36)}
.sbox{position:absolute;left:6vw;top:50%;width:46vw;aspect-ratio:16/9;margin-top:-12.95vw;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.sbox .simg{position:absolute;inset:0;overflow:hidden;background:var(--bg2)}
.stxts{position:absolute;left:58vw;right:var(--pad);top:0;bottom:0}
.stxt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;pointer-events:none}
.stxt .gb{pointer-events:auto}
.n{font:400 1.25rem/1 var(--serif);color:var(--gr);margin-bottom:1.2rem}.n b{font-weight:400;color:#fff}
.stxt h3,.blk h3{font-size:clamp(3rem,5.4vw,7rem);line-height:1;margin-bottom:1.3rem}
.stxt p,.blk p{max-width:26rem;color:#d9d5ce;margin-bottom:2rem;font-size:clamp(.85rem,.95vw,1.1rem)}
.sm-only{display:none}
/* ===== TOOLS ===== */
.tools{position:relative;padding:clamp(3.2rem,8vh,5.2rem) 0;background:var(--bg3);overflow:hidden;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln)}
.tools .lb{display:block;padding:0 var(--pad);margin-bottom:1.8rem}
.trw{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.tr{display:flex;width:max-content;will-change:transform}
.tr span{display:flex;align-items:center;font:500 clamp(.7rem,.85vw,1rem)/1 var(--sans);letter-spacing:.34em;text-transform:uppercase;white-space:nowrap;color:#ddd8d0;padding-left:2.6rem}
.tr span::after{content:"";width:5px;height:5px;border-radius:50%;background:#ff8a3d;margin-left:2.6rem}
/* ===== BRAND ===== */
.brandx{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100lvh;padding:clamp(6rem,14vh,10rem) var(--pad);background:var(--teal)}
.brandx>div{display:flex;flex-direction:column;align-items:center}
.brandx h2{font-size:clamp(3.2rem,6.2vw,8.4rem);line-height:.98;margin:1.1rem 0 clamp(1.4rem,3.6vh,2.4rem);text-transform:uppercase}
.bx-logo{width:clamp(96px,10vw,170px);height:auto;margin:0 auto clamp(1.6rem,4vh,2.6rem)}
.bx-r{max-width:34rem;margin:0 auto}.bx-r p{color:#e3f0ef;margin-bottom:1.3rem;font-size:clamp(.92rem,1.05vw,1.2rem)}
.hl{color:#ffc9a0;background:rgba(255,138,61,.2);border-bottom:1px solid #ff8a3d;padding:.05em .3em;margin:0 .05em;transition:background .4s,color .4s}.hl:hover{background:#ff8a3d;color:#1a0f06}
.bgp{position:relative;min-height:100lvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.2rem;padding:5.5rem var(--pad) 3rem;background:var(--bg)}
.bgp:nth-child(even){background:var(--bg3)}
.bgp .frame{width:min(78vw,calc(76lvh*16/9))}
.cap{width:min(78vw,calc(76lvh*16/9));display:flex;justify-content:space-between;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#a39e96;font-weight:500}
/* ===== ORDINARY + PANELS ===== */
.ord{height:240lvh;position:relative}
.ordp{position:sticky;top:0;height:100lvh;overflow:hidden;background:var(--bg)}
.fb.shade::after,.ordp .fb::after,.pan .fb::after{content:"";position:absolute;inset:0;background:rgba(10,10,10,.4);z-index:2}
.oword{position:absolute;left:0;right:0;top:19%;text-align:center;font-size:clamp(4rem,9vw,12rem);line-height:1;z-index:3}
.oend{position:absolute;left:0;right:0;bottom:14%;text-align:center;display:flex;flex-direction:column;align-items:center;z-index:3}
.oend h3{font-size:clamp(3rem,6.2vw,8rem);line-height:1;margin-bottom:1.2rem}.oend p{max-width:24rem;color:#e0dcd5}
.pan{position:relative;min-height:100lvh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:7rem var(--pad)}
.pt{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:2rem}
.pan h2{font-size:clamp(3.2rem,6.4vw,8.4rem);line-height:1.04;padding-bottom:.08em}.pan p{max-width:27rem;color:#e0dcd5}
.cta h2{font-size:clamp(3.2rem,7vw,9rem)}
.csoc{margin-top:1.4rem;justify-content:center}
.btt{position:absolute;bottom:calc(var(--nh) + 1.6rem);left:50%;transform:translateX(-50%);z-index:3}
/* ===== FOOTER ===== */
.ft{position:relative;z-index:6;margin-top:calc(var(--nh) * -1);height:var(--nh);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.42rem;padding:0 var(--pad);background:rgba(20,26,28,.55);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border-top:1px solid rgba(255,255,255,.08);font:700 .48rem/1 Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#b4cdcb;text-align:center}
.ft img{width:clamp(120px,9vw,190px);height:auto}
/* ===== CONTACT + CATALOGUE PAGES ===== */
.sub-hero{position:relative;min-height:100lvh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:8rem var(--pad)}
.sub-hero .pt h1{font-size:clamp(3.2rem,7vw,9.4rem);line-height:1;max-width:12ch}
.info{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--ln);background:var(--bg)}
.info>div{padding:clamp(2rem,5vh,3.4rem) var(--pad);border-right:1px solid var(--ln)}.info>div:last-child{border-right:0}
.info h2{font:500 .62rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--gr);margin-bottom:1.3rem}
.info h3{font-size:clamp(1.5rem,2vw,2.5rem);line-height:1.1;margin-bottom:.7rem}.info p{color:#a9a49d;font-size:.9rem}
.info a{transition:color .3s}.info a:hover{color:var(--ac)}.info .lks{display:flex;gap:1.1rem;margin-top:.9rem;font-size:.62rem;letter-spacing:.26em;text-transform:uppercase}
.enq{position:relative;display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,7vw,8rem);padding:clamp(5rem,12vh,9rem) var(--pad);background:var(--bg2)}
.enq h2{font-size:clamp(2.8rem,4.8vw,6.4rem);line-height:1;margin-bottom:1.4rem}.enq .intro p{color:#c9c5be;max-width:26rem}
.fld{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1.7rem}
.fld label,.fld .fl{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gr);font-weight:500}.fld .opt{color:#6c6862;letter-spacing:.2em;margin-left:.6rem}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld select,.fld textarea{width:100%;padding:.85rem 0;background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.18);color:#fff;font:300 1rem/1.4 var(--sans);border-radius:0;transition:border-color .4s;-webkit-appearance:none;appearance:none}
.fld select{background:var(--bg2);cursor:pointer}.fld textarea{resize:vertical;min-height:7rem}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--ac)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.chips{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{position:relative;cursor:pointer}.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-block;padding:.7rem 1.1rem;border:1px solid rgba(255,255,255,.16);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:#bdb8b0;transition:background .35s,color .35s,border-color .35s}
.chip:hover span{border-color:rgba(255,255,255,.4)}.chip input:checked+span{background:#f2f0ec;color:#161616;border-color:#f2f0ec}.chip input:focus-visible+span{outline:1px solid #fff;outline-offset:3px}
.note{font-size:.78rem;color:#8f8b85;margin-top:1.2rem;max-width:30rem}.note a{color:var(--ac);border-bottom:1px solid currentColor}
.process{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);align-items:center;padding:clamp(5rem,12vh,9rem) var(--pad);background:var(--bg3)}
.process h2{font-size:clamp(2.6rem,4.4vw,5.8rem);line-height:1.04;margin-bottom:2.4rem}
.process ol{list-style:none;padding:0}.process li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.5rem 0;border-top:1px solid var(--ln)}.process li:last-child{border-bottom:1px solid var(--ln)}
.process li em{font:400 1.1rem var(--serif);color:var(--gr);font-style:normal}.process li h3{font-size:clamp(1.5rem,2vw,2.5rem);margin-bottom:.4rem}.process li p{color:#a9a49d;font-size:.92rem;max-width:26rem}
.cat-top{padding:clamp(9rem,20vh,12rem) var(--pad) clamp(2rem,5vh,4rem);background:var(--bg)}
.cat-top h1{font-size:clamp(3.4rem,7vw,9.4rem);line-height:.98;margin:1.1rem 0 1.6rem}.cat-top p{max-width:34rem;color:#c9c5be;font-size:clamp(.95rem,1.05vw,1.2rem)}
.cat{padding:clamp(2rem,5vh,4rem) var(--pad) clamp(5rem,12vh,9rem);background:var(--bg);display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(2rem,6vw,7rem)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-content:start}
.tile{position:relative;cursor:pointer;display:block}.tile input{position:absolute;opacity:0;inset:0;cursor:pointer;z-index:2}
.tile .tb{display:flex;flex-direction:column;height:100%;border:1px solid var(--ln);background:var(--bg2);transition:border-color .4s,background .4s,transform .6s var(--ease),box-shadow .4s}
.tile .ti{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg3)}
.tile .ti .px{position:absolute;inset:0;transition:transform 1.2s var(--ease)}.tile:hover .ti>.px{transform:scale(1.07)}
.tile .tb2{opacity:0;transition:opacity .6s}.tile:hover .tb2,.tile input:checked+.tb .tb2{opacity:1}
.tile .tt{display:block;padding:1.05rem 1.2rem 1.3rem}.tile .tt em{display:block;font:400 1rem var(--serif);color:var(--gr);font-style:normal;margin-bottom:.7rem}
.tile .tt strong{display:block;font:400 clamp(1.5rem,2vw,2.5rem)/1.05 var(--serif);margin-bottom:.45rem}.tile .tt small{display:block;color:#9fb0b0;font-size:.82rem;line-height:1.45}
.tile:hover .tb{border-color:rgba(255,255,255,.3);transform:translate3d(0,-3px,0)}
.tile input:checked+.tb{background:#f2f0ec;border-color:#f2f0ec;box-shadow:0 0 0 2px #ff8a3d}.tile input:checked+.tb .tt *{color:#161616}
.tile input:focus-visible+.tb{outline:1px solid #fff;outline-offset:3px}
.opt .mi:not(img):not(video){display:none}
.cnt{align-self:flex-end;font-size:.6rem;letter-spacing:.2em;color:#6c6862}
/* ===== PHONE / TABLET ===== */
@media(max-width:900px){
 :root{--nh:3.7rem;--lw:34vw}
 .lg{width:104px;transform:translate3d(0,-.33rem,0)}.nav.s .lg{transform:translate3d(0,0,0)}.soc{gap:.8rem}.soc svg{width:14px;height:14px}#mb span{display:none}
 #tg{font-size:clamp(8px,2.3vw,12px);max-width:94vw}#tg .l{padding-left:.2em}#en{font-size:1.45rem}#fn{font-size:8px}
 #menu li a{font-size:min(calc((100lvh - var(--nh) - 13rem)/4),19vw)}#menu .sm{gap:1.25rem}#menu .sm svg{width:20px;height:20px}
 .mbot{grid-template-columns:1fr 1fr;row-gap:.9rem;font-size:.4rem;padding-bottom:1.1rem}.mbot .pw{grid-column:1/-1;grid-row:1;align-items:center}.mbot .pw img{width:84px}
 .stm h2{font-size:clamp(2.2rem,9vw,3.6rem)}
 .l-m3{left:var(--pad);right:var(--pad);width:auto;top:calc(var(--nh) + 1.6rem + env(safe-area-inset-top,0px))}
 .abt{left:var(--pad);top:calc(var(--nh) + 2.8rem + (100vw - 2*var(--pad))*.5625 + env(safe-area-inset-top,0px));justify-content:flex-start}.abt-in{padding-top:0}.abt h2{font-size:clamp(2.6rem,12vw,4rem);margin:.4rem 0 .4rem}.aka{margin-bottom:.9rem}.abt p{font-size:.8rem;margin-bottom:.6rem;line-height:1.45}
 .cred,.process,.cat,.enq{grid-template-columns:1fr}.cred{gap:2rem}
 .sbox{left:0;right:0;width:100%;top:calc(var(--nh) + env(safe-area-inset-top,0px));margin-top:0;box-shadow:none}
 .stxts{left:var(--pad);right:var(--pad);top:calc(var(--nh) + 56.25vw + env(safe-area-inset-top,0px));bottom:3.2rem}
 .stxt{justify-content:center}.stxt h3{font-size:clamp(2.7rem,13vw,4.2rem);margin-bottom:.9rem}.stxt p{font-size:.92rem;margin-bottom:1.6rem}.stxt .n{margin-bottom:.8rem}
 .brandx{min-height:auto}.bx-logo{width:clamp(90px,28vw,140px)}.bgp{min-height:auto;padding:3rem var(--pad)}.bgp .frame,.cap{width:100%}
 .ord{height:200lvh}.oword{font-size:clamp(3.6rem,19vw,7rem)}
 .pan{padding-top:6rem}.pan h2{font-size:clamp(3rem,13vw,5rem)}
 .ft img{width:104px}
 .info{grid-template-columns:1fr 1fr}.info>div{border-bottom:1px solid var(--ln)}.row2{grid-template-columns:1fr}
 .tiles{gap:.7rem}.tile .tt{padding:.8rem .85rem 1rem}.tile .tt strong{font-size:1.3rem}.tile .tt small{display:none}.tile .tt em{margin-bottom:.4rem}
}
@media(prefers-reduced-motion:reduce){#grain,.mi,.gb::before,.gb::after{animation:none}}
.nog .l-m2,.nog .l-m3,.nog .l-dark,.nog .stm,.nog .abt{display:none}.nog .pin{height:100lvh}.nog .w,.nog .wi{opacity:1!important;filter:none!important;transform:none!important}.nog .wr .c{color:#f4f2ee}.nog #nav,.nog #pg{opacity:1}.nog #pb{display:none}.nog #fn{opacity:1;filter:none}

/* ===== icon rows ===== */
.ics{display:flex;align-items:center;gap:1.5rem}.ics a{display:flex;color:#fff;opacity:.85;transition:opacity .3s,color .3s,transform .5s var(--ease)}.ics a:hover{opacity:1;color:#ff8a3d;transform:translate3d(0,-2px,0)}.ics svg{width:20px;height:20px;fill:currentColor;display:block}
.info .ics{margin-top:1rem}
/* ===== brand flip ===== */
.bgp{perspective:1400px}.bgp .frame{backface-visibility:hidden;transform-style:preserve-3d;will-change:transform,opacity}
/* ===== protection: no selecting, dragging, zooming or printing ===== */
html{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:pan-x pan-y;-webkit-tap-highlight-color:transparent}
input,textarea,select{-webkit-user-select:text;user-select:text}
img,video,.mi,.px,.frame,.fb{pointer-events:none;-webkit-user-drag:none}
html.shield body{visibility:hidden}
@media print{html{display:none!important}}