/* Manoha Villa — page projet web
   Dark tropical dusk: Playfair Display (titles) + Inter (text), amber on deep brown.
   Motion hooks are data-attributes driven by manoha-villa.js (built on Motion).
   Everything is visible without JS. */

@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/playfair-display-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(fonts/playfair-display-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#140f0c;
  --deep:#0f0b09;
  --surface:#18110e;
  --surface2:#1e1510;
  --line:rgba(255,255,255,.07);
  --line-warm:rgba(217,119,43,.3);
  --text:#f2eadf;
  --soft:rgba(242,234,223,.78);
  --mute:#a99d90;
  --dim:#7d7266;
  --orange:#d35b0c;
  --orange-hi:#e66c18;
  --amber:#df8238;
  --gold:#d9a757;
  --serif:'Playfair Display','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  /* proportional unit: ~1vw, capped on very wide screens (the design is drawn at 519 px = 100u/… of width) */
  --u:min(1vw,16px);
  --pad:calc(var(--u)*4.4);
  --head-h:clamp(64px,calc(var(--u)*5.4),84px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 8px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
::selection{background:rgba(223,130,56,.45);color:#fff}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-64px;z-index:200;background:var(--orange);color:#fff;padding:10px 16px;border-radius:6px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}

.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:120;pointer-events:none}
.progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#8a3d0a,var(--orange) 45%,#f0a35a);box-shadow:0 0 12px rgba(230,108,24,.6)}

.toast{position:fixed;left:50%;bottom:26px;z-index:130;display:flex;align-items:center;gap:10px;padding:11px 18px 11px 12px;border-radius:999px;background:#1f1612;border:1px solid var(--line-warm);color:#fff;font-size:.86rem;font-weight:500;box-shadow:0 18px 40px -14px rgba(0,0,0,.8);opacity:0;pointer-events:none;translate:-50% 18px;transition:opacity .3s,translate .45s var(--ease)}
.toast.is-on{opacity:1;translate:-50% 0}
.toast i{width:22px;height:22px;border-radius:50%;background:var(--swatch,#b95441);box-shadow:0 0 0 2px rgba(255,255,255,.85)}

/* ------------------------------------------------------------------ shared */
.wrap{width:min(100% - var(--pad)*2,1500px);margin-inline:auto}
.sec{position:relative;padding-block:clamp(44px,calc(var(--u)*5.2),88px)}

.eyebrow{display:flex;align-items:center;gap:.9em;margin-bottom:1.1em;font-size:max(.68rem,calc(var(--u)*.92));font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);line-height:1}
.eyebrow--tight{letter-spacing:.12em;white-space:nowrap;gap:.7em}
.eyebrow--tight .eyebrow__bar{width:1.6em}
.squig{position:relative;display:inline-block;white-space:nowrap}
.squig svg{position:absolute;left:0;bottom:-.14em;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--amber);stroke-width:1.1;stroke-linecap:round;pointer-events:none}
.eyebrow__n{color:var(--amber);font-variant-numeric:tabular-nums}
.eyebrow__bar{display:block;width:2.2em;height:1px;background:var(--mute);opacity:.7;transform-origin:left;flex:none}

.h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,calc(var(--u)*2.5),3.1rem);line-height:1.14;letter-spacing:-.012em;color:var(--text);text-wrap:balance}
.lead{margin-top:1.1em;max-width:calc(var(--u)*44);font-size:max(.9rem,calc(var(--u)*1.12));line-height:1.68;color:var(--soft)}
.lead--sm{font-size:max(.88rem,calc(var(--u)*.98))}

.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .08em .22em;margin:-.06em -.08em -.22em}
.wi{display:inline-block;will-change:transform}

.btn{--mx:0px;--my:0px;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:1.1em;padding:1.15em 2.1em;border-radius:max(3px,calc(var(--u)*.4));background:var(--orange);color:#fff;font-size:max(.72rem,calc(var(--u)*.98));font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;border:1px solid transparent;translate:var(--mx) var(--my);transition:translate .4s var(--ease),background .3s,box-shadow .4s var(--ease),border-color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.btn:hover{background:var(--orange-hi);box-shadow:0 18px 34px -14px rgba(230,108,24,.7)}
.btn:hover::before{transform:translateX(120%)}
.btn__ico{flex:none;width:1.3em;height:1.3em;transition:transform .45s var(--ease)}
.btn:hover .btn__ico{transform:translateX(5px)}
.btn:active{scale:.98}
.btn--sm{padding:.9em 1.7em;font-size:max(.68rem,calc(var(--u)*.84))}
.btn--ghost{background:rgba(20,15,12,.55);border-color:rgba(255,255,255,.14);backdrop-filter:blur(3px)}
.btn--ghost:hover{background:rgba(35,25,18,.8);border-color:var(--line-warm);box-shadow:none}
.btn--outline{background:rgba(255,255,255,.015);border-color:var(--line-warm);color:var(--text)}
.btn--outline:hover{background:rgba(217,119,43,.12);border-color:var(--amber);box-shadow:none}

.link{display:inline-flex;align-items:center;gap:.7em;font-size:max(.8rem,calc(var(--u)*.98));font-weight:600;color:var(--amber);transition:color .3s}
.link svg{width:1.15em;height:1.15em;transition:transform .45s var(--ease)}
.link:hover{color:#f3a15e}
.link:hover svg{transform:translateX(5px)}
.link--sm{font-size:max(.78rem,calc(var(--u)*.88))}

.head2{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(var(--u)*3);margin-bottom:calc(var(--u)*2.6)}
.head2 .link{padding-bottom:.5em;flex:none}

/* photos: wipe in, pixels untouched */
.ph__in{position:relative;overflow:hidden;border-radius:inherit}
.ph__in img{width:100%;height:100%;object-fit:cover;transition:scale 1.1s var(--ease)}

/* ------------------------------------------------------------------ header */
.head{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--head-h);transition:background .45s,box-shadow .45s,backdrop-filter .45s}
.head.is-solid{background:rgba(18,13,10,.84);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 var(--line)}
.head__in{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*2);height:100%;width:min(100% - var(--pad)*2,1500px);margin-inline:auto}
.brand{display:flex;align-items:center;gap:.9em;flex:none;color:#fff}
.brand__mark{width:clamp(34px,calc(var(--u)*2.9),44px);height:clamp(34px,calc(var(--u)*2.9),44px);color:#f6efe4;flex:none}
.brand__txt{display:flex;flex-direction:column;gap:.4em;line-height:1}
.brand__txt b{font-size:max(.78rem,calc(var(--u)*.98));font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.brand__txt small{font-size:max(.52rem,calc(var(--u)*.56));font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.nav ul{display:flex;gap:calc(var(--u)*2.4)}
.nav a{position:relative;display:block;padding:.6em 0;font-size:max(.68rem,calc(var(--u)*.82));font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,234,223,.82);transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.15em;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav a:hover,.nav a.is-active{color:#fff}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.head__end{display:flex;align-items:center;gap:calc(var(--u)*2);flex:none}
.lang{display:flex;gap:1.1em;font-size:max(.64rem,calc(var(--u)*.78));font-weight:500;letter-spacing:.14em}
.lang a{color:rgba(242,234,223,.6);transition:color .3s}
.lang a:hover,.lang a[aria-current]{color:#fff}
.burger{display:none;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(20,15,12,.5);color:#fff}
.burger svg{grid-area:1/1;width:22px;height:22px;transition:opacity .25s,transform .4s var(--ease)}
.burger__c{opacity:0;transform:rotate(-70deg)}
.burger[aria-expanded="true"] .burger__o{opacity:0;transform:rotate(70deg)}
.burger[aria-expanded="true"] .burger__c{opacity:1;transform:none}

/* ------------------------------------------------------------------ 01 hero
   Drawn at 519 × 217: the hero keeps that ratio on desktop so the photo is shown whole. */
.hero{position:relative;isolation:isolate;height:calc(var(--u)*41.8);overflow:hidden;background:#0d0906}
.hero__bg{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:78% 50%;scale:1.04;transform-origin:70% 55%}
.lamp{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,176,84,.62),rgba(255,150,50,.18) 45%,transparent 68%);mix-blend-mode:screen;opacity:.55;pointer-events:none;translate:-50% -50%}
.lamp--a{left:64%;top:53.5%;width:10%}
.lamp--b{left:60.8%;top:43%;width:5.5%}
.hero__veil{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(13,9,7,.62) 0,rgba(13,9,7,.46) 32%,rgba(13,9,7,.12) 55%,rgba(13,9,7,0) 66%),
    linear-gradient(180deg,rgba(13,9,7,.78) 0,rgba(13,9,7,0) 24%,rgba(13,9,7,0) 80%,rgba(20,15,12,.9) 100%)}
.hero__flies{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fly{position:absolute;width:var(--s,3px);height:var(--s,3px);border-radius:50%;background:#ffd49a;box-shadow:0 0 calc(var(--s,3px)*3) calc(var(--s,3px)*.7) rgba(255,170,70,.65);opacity:0}

.hero__in{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:flex-start;width:min(100% - var(--pad)*2,1500px);margin-inline:auto;padding:calc(var(--u)*10.2) 0 0}
.hero__in>*{flex:none}
.hero .eyebrow{margin-bottom:calc(var(--u)*1.2)}
.hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,calc(var(--u)*3.55),4rem);line-height:1.06;letter-spacing:.005em;text-transform:uppercase}
.hero__l1,.hero__l2{display:block;white-space:nowrap}
.hero__l1{color:#fbf6ee}
.hero__l2{color:#e08233}
.hero__txt{margin-top:calc(var(--u)*1.7);max-width:calc(var(--u)*40);font-size:max(.9rem,calc(var(--u)*1.2));line-height:1.6;color:rgba(242,234,223,.88)}
.hero__feats{display:flex;gap:calc(var(--u)*3.2);margin-top:calc(var(--u)*2.1)}
.hero__feats li{display:flex;align-items:center;gap:calc(var(--u)*.9);font-size:max(.74rem,calc(var(--u)*.96));line-height:1.3;color:rgba(242,234,223,.85)}
.hero__feats svg{width:max(24px,calc(var(--u)*2.7));height:max(24px,calc(var(--u)*2.7));color:var(--amber);flex:none}
.hero__cta{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.1);margin-top:calc(var(--u)*2.4)}

/* ------------------------------------------------------------------ 02 concept */
.concept{background:var(--bg)}
.concept__grid{display:grid;grid-template-columns:calc(var(--u)*44.2) minmax(0,1fr);gap:calc(var(--u)*3.6);align-items:center}
.ph{border-radius:max(8px,calc(var(--u)*.7));overflow:hidden;box-shadow:0 30px 60px -34px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.concept__ph .ph__in{aspect-ratio:229/133}
.concept__ph:hover img{scale:1.04}
.concept .h2{font-size:clamp(1.9rem,calc(var(--u)*3.1),3.7rem)}
.concept .lead{max-width:calc(var(--u)*43)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*3.4)}
.facts li{display:flex;align-items:flex-start;gap:calc(var(--u)*1)}
.facts svg{flex:none;width:max(26px,calc(var(--u)*2.7));height:max(26px,calc(var(--u)*2.7));color:var(--amber);margin-top:.2em}
.facts b{display:block;font-size:max(1.3rem,calc(var(--u)*1.75));font-weight:400;line-height:1.1;letter-spacing:-.01em;color:#fff}
.facts div>span{display:block;margin-top:.3em;font-size:max(.78rem,calc(var(--u)*.98));font-weight:600;color:var(--text)}
.facts small{display:block;margin-top:.55em;font-size:max(.7rem,calc(var(--u)*.76));line-height:1.45;color:var(--mute)}
.facts b+small{margin-top:.5em}

/* ------------------------------------------------------------------ 03 rooms */
.rooms{padding-top:clamp(20px,calc(var(--u)*2),40px)}
.rooms__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1.5)}
.room{display:flex;flex-direction:column;background:var(--surface);border-radius:max(8px,calc(var(--u)*.8));overflow:hidden;box-shadow:0 0 0 1px var(--line),0 22px 40px -30px rgba(0,0,0,.9);transition:translate .55s var(--ease),box-shadow .55s var(--ease)}
.room:hover{translate:0 -6px;box-shadow:0 0 0 1px var(--line-warm),0 34px 56px -30px rgba(0,0,0,.95)}
.room__ph{overflow:hidden}
.room__ph .ph__in{aspect-ratio:153/89;border-radius:0}
.room:hover .room__ph img{scale:1.07}
.room__body{display:flex;flex-direction:column;flex:1;padding:calc(var(--u)*1.9) calc(var(--u)*1.9) calc(var(--u)*2)}
.room h3{font-size:max(1.05rem,calc(var(--u)*1.6));font-weight:500;line-height:1.25;letter-spacing:-.005em;color:#fff}
.room p{margin-top:.55em;font-size:max(.86rem,calc(var(--u)*.98));line-height:1.6;color:var(--mute)}
.room .link{margin-top:auto;padding-top:calc(var(--u)*1.5)}

/* ------------------------------------------------------------------ 04 experience */
.exp__grid{display:grid;grid-template-columns:minmax(0,calc(var(--u)*34.5)) minmax(0,1fr);gap:calc(var(--u)*3.4);align-items:center}
.exp .h2{font-size:clamp(1.8rem,calc(var(--u)*2.6),3.2rem)}
.exp .lead{max-width:calc(var(--u)*34)}
.exp .btn{margin-top:calc(var(--u)*2.2)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*1.1)}
.tile__a{position:relative;display:block;aspect-ratio:143/66;border-radius:max(8px,calc(var(--u)*.8));overflow:hidden;box-shadow:0 0 0 1px var(--line),0 24px 44px -30px rgba(0,0,0,.95);isolation:isolate}
.tile .ph__in{position:absolute;inset:0;border-radius:0}
.tile__a::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(14,9,6,.78) 0,rgba(14,9,6,.3) 42%,rgba(14,9,6,0) 68%)}
.tile__cap{position:absolute;z-index:2;left:calc(var(--u)*1.8);bottom:calc(var(--u)*1.5);right:calc(var(--u)*6)}
.tile h3{font-size:max(1rem,calc(var(--u)*1.5));font-weight:500;line-height:1.2;color:#fff}
.tile p{margin-top:.35em;font-size:max(.74rem,calc(var(--u)*.84));line-height:1.35;color:rgba(242,234,223,.82)}
.tile__go{position:absolute;z-index:2;right:calc(var(--u)*1.6);bottom:calc(var(--u)*1.6);display:grid;place-items:center;width:max(32px,calc(var(--u)*3.3));aspect-ratio:1;border-radius:50%;background:rgba(18,12,9,.6);box-shadow:inset 0 0 0 1px rgba(223,130,56,.75);color:#fff;backdrop-filter:blur(3px);transition:background .35s,scale .5s var(--ease),box-shadow .35s}
.tile__go svg{width:46%;height:46%;transition:transform .45s var(--ease)}
.tile__a:hover img{scale:1.07}
.tile__a:hover .tile__go{background:var(--orange);box-shadow:inset 0 0 0 1px var(--orange);scale:1.1}
.tile__a:hover .tile__go svg{transform:translateX(2px)}

/* ------------------------------------------------------------------ 05 services */
.svc{padding-top:clamp(24px,calc(var(--u)*2.6),48px)}
.svc .h2{font-size:clamp(1.6rem,calc(var(--u)*2.3),2.9rem)}
.svc__grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:calc(var(--u)*1.1);margin-top:calc(var(--u)*2.4)}
.svc__i{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--u)*2.1) calc(var(--u)*.7) calc(var(--u)*1.9);background:rgba(255,255,255,.012);border-radius:max(8px,calc(var(--u)*.8));box-shadow:0 0 0 1px var(--line);transition:translate .5s var(--ease),box-shadow .5s,background .4s}
.svc__i:hover{translate:0 -5px;background:rgba(217,119,43,.06);box-shadow:0 0 0 1px var(--line-warm)}
.ico{width:max(30px,calc(var(--u)*2.6));height:max(30px,calc(var(--u)*2.6));fill:none;stroke:var(--amber);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:calc(var(--u)*1.1);transition:transform .6s var(--ease),stroke .3s}
.svc__i:hover .ico{transform:translateY(-3px) scale(1.1);stroke:#f3a15e}
.svc__i b{font-size:max(.8rem,calc(var(--u)*.96));font-weight:600;line-height:1.25;color:#fff}
.svc__i span{margin-top:.3em;font-size:max(.7rem,calc(var(--u)*.78));line-height:1.35;color:var(--mute)}

/* ------------------------------------------------------------------ 06 gallery */
.gal{padding-top:clamp(20px,calc(var(--u)*2),40px)}
.gal .h2{font-size:clamp(1.6rem,calc(var(--u)*2.3),2.9rem)}
.strip{display:flex;gap:calc(var(--u)*.6);height:clamp(150px,calc(var(--u)*12.5),230px);margin-top:calc(var(--u)*2)}
.strip__i{flex:var(--w) 1 0;min-width:0;border-radius:max(6px,calc(var(--u)*.6));overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:flex-grow .8s var(--ease)}
.strip__i .ph__in{height:100%;border-radius:0}
.strip:hover .strip__i{flex-grow:calc(var(--w)*.88)}
.strip .strip__i:hover{flex-grow:calc(var(--w)*1.75)}
.strip__i:hover img{scale:1.03}

/* ------------------------------------------------------------------ 07 testimonials */
.testi{padding-top:clamp(24px,calc(var(--u)*2.6),48px)}
.testi .h2{font-size:clamp(1.6rem,calc(var(--u)*2.3),2.9rem)}
.testi__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*1.5)}
.quote{--mx:50%;--my:0%;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:calc(var(--u)*1.7);align-items:start;padding:calc(var(--u)*2.1);background:var(--surface);border-radius:max(8px,calc(var(--u)*.8));box-shadow:0 0 0 1px var(--line);overflow:hidden;transition:box-shadow .5s,translate .5s var(--ease)}
.quote::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(calc(var(--u)*22) circle at var(--mx) var(--my),rgba(223,130,56,.1),transparent 60%);opacity:0;transition:opacity .4s}
.quote:hover{box-shadow:0 0 0 1px var(--line-warm);translate:0 -4px}
.quote:hover::before{opacity:1}
.quote__av{width:max(46px,calc(var(--u)*4.8));height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(223,130,56,.35),0 8px 18px -8px rgba(0,0,0,.8)}
.quote blockquote p{font-size:max(.86rem,calc(var(--u)*1));line-height:1.65;color:var(--soft)}
.quote footer{grid-column:2;display:flex;align-items:flex-end;justify-content:space-between;gap:1em;margin-top:calc(var(--u)*1.5)}
.quote footer b{display:block;font-size:max(.84rem,calc(var(--u)*.96));font-weight:600;color:#fff}
.quote footer span:not(.stars){display:block;margin-top:.15em;font-size:max(.74rem,calc(var(--u)*.82));color:var(--mute)}
.stars{display:flex;gap:.2em;color:var(--gold)}
.stars svg{width:max(13px,calc(var(--u)*1.05));height:max(13px,calc(var(--u)*1.05))}

/* ------------------------------------------------------------------ 08 + 09 */
.loc{padding-top:clamp(28px,calc(var(--u)*3),52px)}
.loc__grid{display:grid;grid-template-columns:minmax(0,calc(var(--u)*25)) minmax(0,calc(var(--u)*38)) minmax(0,1fr);gap:calc(var(--u)*3.2);align-items:start}
.loc .h2,.made .h2{font-size:clamp(1.6rem,calc(var(--u)*2.45),3rem)}
.addr{display:flex;gap:calc(var(--u)*1.1);margin-top:calc(var(--u)*2.2)}
.addr svg{flex:none;width:max(28px,calc(var(--u)*2.8));height:max(28px,calc(var(--u)*2.8));color:var(--amber)}
.addr b{display:block;font-size:max(.94rem,calc(var(--u)*1.2));font-weight:500;color:#fff}
.addr p{margin-top:.4em;font-size:max(.84rem,calc(var(--u)*.96));line-height:1.6;color:var(--mute)}
.loc .btn{margin-top:calc(var(--u)*2.2)}

.map{position:relative;aspect-ratio:430/200;border-radius:max(8px,calc(var(--u)*.9));overflow:hidden;background:#0d1316;box-shadow:0 0 0 1px var(--line),0 30px 60px -36px rgba(0,0,0,.9);margin-top:calc(var(--u)*.4)}
.map__bg{position:absolute;inset:0;width:100%;height:100%}
.mp{position:absolute;left:var(--x);top:var(--y);width:max(18px,calc(var(--u)*2));height:max(22px,calc(var(--u)*2.4));translate:-50% -100%}
.mp__pin{width:100%;height:100%;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.mp--main{width:max(24px,calc(var(--u)*2.7));height:max(28px,calc(var(--u)*3.15))}
.mp__ring{position:absolute;left:50%;top:100%;width:calc(var(--u)*6);aspect-ratio:1;margin:calc(var(--u)*-3) 0 0 calc(var(--u)*-3);border-radius:50%;border:1px solid rgba(232,85,63,.8);opacity:0;pointer-events:none}
.mp__lbl{position:absolute;left:calc(100% + .5em);top:12%;white-space:nowrap;display:flex;flex-direction:column;gap:.15em;line-height:1.2}
.mp__lbl b{font-size:max(.62rem,calc(var(--u)*.84));font-weight:500;color:#f6efe4}
.mp__lbl small{font-size:max(.58rem,calc(var(--u)*.74));color:var(--amber);font-weight:500}
.mp__lbl--card{top:-6%;padding:.55em .85em;border-radius:6px;background:rgba(8,6,5,.86);box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.mp__lbl--card b{font-size:max(.68rem,calc(var(--u)*.92));color:#fff}
.mp__lbl--card small{color:var(--mute)}
.map__routes path{stroke-dasharray:.03 .045}

.made .lead{max-width:calc(var(--u)*26)}
.made__list{display:grid;gap:calc(var(--u)*1.1);margin-top:calc(var(--u)*2)}
.made__list li{display:flex;align-items:center;gap:calc(var(--u)*1.1);font-size:max(.82rem,calc(var(--u)*.96));line-height:1.35;color:var(--text)}
.made__list svg{flex:none;width:max(22px,calc(var(--u)*2.1));height:max(22px,calc(var(--u)*2.1));color:var(--amber)}

/* ------------------------------------------------------------------ 10 design system */
.ds{padding-top:clamp(24px,calc(var(--u)*2.6),48px);border-top:1px solid var(--line)}
.ds .h2{font-size:clamp(1.6rem,calc(var(--u)*2.3),2.9rem)}
.ds__grid{display:grid;grid-template-columns:minmax(0,calc(var(--u)*47.5)) minmax(0,1fr);gap:calc(var(--u)*5);align-items:start}
.sw{display:flex;flex-wrap:wrap;gap:calc(var(--u)*1.4);margin-top:calc(var(--u)*2.2)}
.sw button{display:flex;flex-direction:column;align-items:flex-start;gap:.35em;padding:0;background:none;border:0;text-align:left;-webkit-tap-highlight-color:transparent}
.sw i{display:block;width:calc(var(--u)*8.2);min-width:78px;aspect-ratio:2/1;border-radius:max(6px,calc(var(--u)*.6));background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 14px 26px -16px rgba(0,0,0,.9);margin-bottom:.4em;transition:translate .5s var(--ease),box-shadow .4s}
.sw b{font-size:max(.78rem,calc(var(--u)*.86));font-weight:500;color:#fff}
.sw span{font-size:max(.7rem,calc(var(--u)*.76));color:var(--mute);font-variant-numeric:tabular-nums;transition:color .3s}
.sw button:hover i{translate:0 -5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 22px 30px -16px rgba(0,0,0,.95)}
.sw button:hover span{color:var(--amber)}
.sw button:active i{scale:.96}
.ds__lbl{display:block;font-size:max(.78rem,calc(var(--u)*.9));font-weight:500;color:var(--soft)}
.ds__row{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:calc(var(--u)*2.6);align-items:center;margin-top:calc(var(--u)*1.2)}
.ds__aa{position:relative;font-size:clamp(3rem,calc(var(--u)*5.4),6.4rem);line-height:1;color:#fff}
.ds__aa span{display:block;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.ds__aa-a{font-family:var(--sans);font-weight:300;letter-spacing:-.04em}
.ds__aa-b{position:absolute;inset:0;font-family:var(--serif);font-weight:400;opacity:0;transform:translateY(8px)}
.ds.is-b .ds__aa-a{opacity:0;transform:translateY(-8px)}
.ds.is-b .ds__aa-b{opacity:1;transform:none}
.ds__fam b{display:block;font-size:max(.95rem,calc(var(--u)*1.35));font-weight:400;color:#fff}
.ds__serif{font-family:var(--serif)}
.ds__sans{font-family:var(--sans);font-weight:500!important}
.ds__fam small{display:block;margin-top:.3em;font-size:max(.7rem,calc(var(--u)*.78));color:var(--mute)}
.ds__abc{margin-top:calc(var(--u)*1.6);font-size:max(.84rem,calc(var(--u)*1.08));line-height:1.75;letter-spacing:.02em;color:var(--soft);word-break:break-word}
.ds__abc .ch{display:inline-block;white-space:pre}

/* ------------------------------------------------------------------ 11 CTA */
.cta{position:relative;isolation:isolate;overflow:hidden;background:#100b08;border-top:1px solid var(--line);padding-block:clamp(48px,calc(var(--u)*5.6),96px)}
.cta__ph{position:absolute;z-index:-1;top:0;right:0;bottom:0;width:54%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40%);mask-image:linear-gradient(90deg,transparent 0,#000 40%)}
.cta__ph img{width:100%;height:100%;object-fit:cover;object-position:60% 60%;transform-origin:65% 60%;scale:1.05}
.cta__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#100b08 0,rgba(16,11,8,.5) 30%,rgba(16,11,8,0) 70%),linear-gradient(0deg,rgba(16,11,8,.4),transparent 40%)}
.cta__in{position:relative}
.cta__title{max-width:calc(var(--u)*44);font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,calc(var(--u)*3),3.6rem);line-height:1.15;letter-spacing:-.012em;text-wrap:balance}
.cta .lead{max-width:calc(var(--u)*42)}
.cta .btn{margin-top:calc(var(--u)*2.4)}

/* ------------------------------------------------------------------ live details (only while on screen, never with reduced motion) */
@keyframes flick{0%,100%{opacity:.5;scale:1}22%{opacity:.7;scale:1.04}41%{opacity:.42;scale:.97}63%{opacity:.66;scale:1.03}82%{opacity:.5;scale:.99}}
@keyframes march{to{stroke-dashoffset:-.075}}
@keyframes ring{0%{opacity:.8;transform:scale(.25)}70%{opacity:0;transform:scale(1)}100%{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .hero.is-live .lamp--a{animation:flick 5.4s infinite ease-in-out}
  .hero.is-live .lamp--b{animation:flick 7.1s -2s infinite ease-in-out}
  .map.is-live .mp__ring{animation:ring 3.2s 1.6s infinite ease-out}
  .map.is-live .map__routes path{animation:march 3.2s linear infinite}
}

/* ------------------------------------------------------------------ motion starting states */
.js [data-split] .wi{transform:translateY(112%)}
.js [data-r],.js [data-rs]>*{opacity:0}
.js [data-wipe]{clip-path:inset(0 0 100% 0)}
.js [data-line]{transform:scaleX(0)}
.js .head{opacity:0}
.js .ico path,.js .ico rect,.js .ico circle,.js .squig path{stroke-dasharray:1;stroke-dashoffset:1}
.js .map .mp__pin,.js .map .mp__lbl{opacity:0}
.js .map__roads path,.js .map__coast{stroke-dasharray:1;stroke-dashoffset:1}
.js .map__routes{opacity:0}
.reduced [data-r],.reduced [data-rs]>*{opacity:1!important}
.reduced [data-split] .wi{transform:none!important}
.reduced [data-wipe]{clip-path:none!important}
.reduced [data-line]{transform:none!important}
.reduced .head{opacity:1!important}
.reduced .squig path,.reduced .ico path,.reduced .ico rect,.reduced .ico circle{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.reduced .map .mp__pin,.reduced .map .mp__lbl{opacity:1!important}
.reduced .map__roads path,.reduced .map__coast{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.reduced .map__routes{opacity:.75!important}

/* ------------------------------------------------------------------ responsive */
.nav__foot{display:none}
@media (max-width:1279px){
  .svc__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .svc__i{padding:22px 12px 20px}
  .nav ul{gap:calc(var(--u)*1.7)}
  .head__end{gap:calc(var(--u)*1.4)}
}

@media (max-width:1079px){
  :root{--pad:clamp(20px,5vw,48px);--head-h:68px}
  .wrap{width:min(100% - var(--pad)*2,1500px)}
  .head.is-open{background:rgba(16,11,8,.97)}
  .brand__mark{width:38px;height:38px}
  .brand__txt b{font-size:.8rem}
  .brand__txt small{font-size:.54rem}
  .burger{display:grid}
  .lead,.concept .lead,.exp .lead,.made .lead,.cta .lead{max-width:56ch}
  .cta__title{max-width:20em}
  .head__end .lang{display:none}
  .nav{position:fixed;inset:var(--head-h) 0 auto 0;background:rgba(16,11,8,.97);backdrop-filter:blur(14px);padding:6px var(--pad) 26px;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .55s var(--ease),visibility 0s .55s;box-shadow:0 30px 50px -20px rgba(0,0,0,.8)}
  .nav ul{flex-direction:column;gap:0}
  .nav a{padding:1.05em 0;font-size:.8rem;border-bottom:1px solid var(--line)}
  .nav a::after{display:none}
  .nav__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px}
  .nav__foot .lang{display:flex}
  .nav__foot .lang a{padding:.5em 0;border-bottom:0;font-size:.74rem}
  .nav__foot .btn{border-bottom:0;padding:.85em 1.3em;display:none}
  .nav__foot .btn span{padding:0}
  .head.is-open .nav{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .55s var(--ease),visibility 0s}
  .btn--sm{padding:.85em 1.3em;font-size:.7rem}

  /* hero: the photo becomes a banner, copy sits below it on the page colour */
  .hero{--hh:clamp(340px,68vw,560px);height:auto;min-height:0;background:var(--bg)}
  .hero__bg{inset:0 0 auto 0;height:var(--hh)}
  .hero__bg img{object-position:86% 50%}
  .hero__veil{inset:0 0 auto 0;height:var(--hh);background:
    linear-gradient(180deg,rgba(13,9,7,.82) 0,rgba(13,9,7,0) 26%,rgba(13,9,7,0) 44%,var(--bg) 100%)}
  .lamp{display:none}
  .hero__in{height:auto;padding:calc(var(--hh) - 64px) 0 clamp(44px,7vw,72px)}
  .hero .eyebrow{font-size:.7rem;margin-bottom:18px}
  .hero__title{font-size:clamp(2.3rem,8.4vw,4rem)}
  .hero__txt{margin-top:20px;max-width:46ch;font-size:clamp(.95rem,2.2vw,1.08rem)}
  .hero__feats{margin-top:24px;gap:clamp(18px,4vw,36px);flex-wrap:wrap}
  .hero__feats li{font-size:.82rem}
  .hero__feats svg{width:28px;height:28px}
  .hero__cta{margin-top:28px;gap:12px}
  .btn{font-size:.74rem;padding:1.15em 1.9em}

  .concept__grid{grid-template-columns:1fr;gap:34px}
  .concept .h2{font-size:clamp(1.9rem,6vw,2.7rem)}
  .concept .lead,.lead{max-width:62ch;font-size:1rem}
  .facts{gap:16px;margin-top:30px}
  .h2{font-size:clamp(1.7rem,5.2vw,2.5rem)}
  .rooms__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .rooms__grid .room:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}
  .rooms__grid .room:last-child .room__ph .ph__in{height:100%;aspect-ratio:auto}
  .room__body{padding:20px}
  .room h3{font-size:1.15rem}.room p{font-size:.92rem}
  .exp__grid{grid-template-columns:1fr;gap:32px}
  .exp .lead{max-width:62ch}
  .head2{margin-bottom:26px}
  .testi__grid{grid-template-columns:1fr;gap:14px}
  .quote{padding:22px}
  .quote__av{width:56px}
  .quote blockquote p{font-size:.96rem}
  .loc__grid{grid-template-columns:1fr;gap:36px}
  .made .lead{max-width:62ch}
  .ds__grid{grid-template-columns:1fr;gap:36px}
  .ds__row{gap:22px}
  .sw{gap:18px 16px}
  .sw i{width:96px}
  .cta__ph{width:100%;-webkit-mask-image:none;mask-image:none;opacity:.55}
  .cta__ph::after{background:linear-gradient(90deg,#100b08 0,rgba(16,11,8,.78) 55%,rgba(16,11,8,.4) 100%)}
  .cta__title{font-size:clamp(1.8rem,5.6vw,2.7rem)}
  .map{margin-top:0}
}

@media (max-width:819px){
  .svc__grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tiles{gap:12px}
  .strip{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:200px;gap:10px;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
  .strip::-webkit-scrollbar{display:none}
  .strip__i{flex:0 0 min(64%,300px);scroll-snap-align:start}
  .strip:hover .strip__i,.strip .strip__i:hover{flex-grow:0}
  .progress{height:2px}
}

@media (max-width:639px){
  .head__end>.btn{display:none}
  .nav__foot .btn{display:inline-flex}
  .hero__feats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:16px 22px}
  .hero__feats li{flex-direction:column;align-items:flex-start;gap:8px}
  .hero__cta .btn{width:100%}
  .facts{grid-template-columns:1fr;gap:20px}
  .facts li{align-items:center}
  .facts li>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px}
  .facts b{font-size:1.6rem}
  .facts div>span{margin-top:0}
  .facts small{flex-basis:100%;margin-top:2px}
  .rooms__grid{grid-template-columns:1fr}
  .rooms__grid .room:last-child{display:flex}
  .rooms__grid .room:last-child .room__ph .ph__in{height:auto;aspect-ratio:153/89}
  .head2{flex-direction:column;align-items:flex-start;gap:14px}
  .head2 .link{padding-bottom:0}
  .tiles{grid-template-columns:1fr}
  .tile__a{aspect-ratio:16/8.5}
  .tile__cap{left:18px;bottom:16px;right:70px}
  .tile__go{right:16px;bottom:16px;width:40px}
  .svc__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .svc__i{padding:20px 10px 18px}
  .strip{height:170px}
  .strip__i{flex-basis:72%}
  .ds__row{grid-template-columns:auto 1fr;row-gap:18px}
  .ds__row .ds__fam:last-child{grid-column:1/-1}
  .ds__aa{font-size:3.6rem}
  .sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px;margin-top:26px}
  .sw button{width:100%}
  .sw i{width:100%}
  .mp__lbl b{font-size:.6rem}.mp__lbl small{font-size:.56rem}
  .mp__lbl--card{padding:.4em .6em}
  .toast{bottom:18px;max-width:calc(100% - 32px)}
}

@media (hover:none){
  .room:hover,.svc__i:hover,.quote:hover{translate:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}