/* Studio Lévézou · shared styles */
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f1.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;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f2.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f3.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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f4.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/f5.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;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/f6.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/f7.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;
}
/* Schibsted Grotesk is one variable font (wght 400–900): one face per subset */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/f8.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/f9.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;
}
/* Layout: the product is the hero. A slow 3D carousel of real-looking client sites opens the page, then three scroll-told scenes (a phone search, a before/after, the towns), a dark film strip of trades, and quiet paper sections. */
:root{
  --paper:#ece6db;
  --paper-2:#e3dbcd;
  --card:#f7f3ec;
  --ink:#1b1a17;
  --ink-2:#5f594f;
  --muted:#8e877b;
  --gold:#d6a03c;
  --gold-ink:#93610e;
  --night:#161512;
  --night-ink:#efe8dc;
  --line:rgba(27,26,23,.13);
  --f-display:"Instrument Serif","Iowan Old Style","Times New Roman",serif;
  --f-body:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gut:clamp(16px,4.4vw,72px);
  --maxw:1400px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper);font-size:clamp(16px,calc(10.4px + .38vw),18px)}   /* 16px up to ~1470px wide, 18px on very large screens */
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;font-optical-sizing:auto}
p{text-wrap:pretty}
::selection{background:var(--gold);color:#1a1205}
a{color:inherit}
img,video{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:6px}
.wrap{--side:max(var(--gut),calc((100% - var(--maxw)) / 2));padding-left:max(var(--side),env(safe-area-inset-left,0px));padding-right:max(var(--side),env(safe-area-inset-right,0px))}

/* loader */
#loader{position:fixed;inset:0;z-index:80;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding-block:max(28px,env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-bottom,0px));transition:transform 1.1s var(--ease) .15s,visibility 0s 1.3s}
#loader.done{transform:translateY(-100%);visibility:hidden}
#loader .lt{font:500 11px/1.4 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);display:flex;justify-content:space-between;gap:16px}
#loader .ln{font:400 clamp(5rem,18vw,16rem)/.8 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
#loader .ln em{font-size:.3em;font-style:italic;color:var(--gold-ink);margin-left:.15em}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--paper)}
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:18px;transition:color .5s,background .5s}
.top.on-dark{color:var(--night-ink)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:15px;line-height:.98;letter-spacing:-.02em}
.brand img{width:44px;height:auto;flex:none;transition:transform .6s var(--ease)}
.brand:hover img{transform:rotate(-4deg) scale(1.04)}
.nav{display:flex;gap:26px;font-size:14px;font-weight:500}
.nav a{text-decoration:none;opacity:.75;position:relative;padding-block:4px;transition:opacity .3s}
.nav a:hover{opacity:1}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}

.btn{display:inline-flex;align-items:center;gap:.7em;padding:1.05em 1.5em;border-radius:999px;font:600 15px/1 var(--f-body);text-decoration:none;cursor:pointer;border:0;white-space:nowrap;transition:background .35s,color .35s,box-shadow .35s,border-color .35s}
.btn svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:#34322d}
.btn-gold{background:var(--gold);color:#1d1406;box-shadow:0 18px 40px -18px rgba(150,95,10,.8)}
.btn-gold:hover{background:#e3b151}
.btn-line{border:1px solid currentColor;color:inherit;background:transparent}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.on-dark .btn-ink{background:var(--night-ink);color:var(--ink)}
.btn-sm{padding:.85em 1.2em;font-size:13.5px}

.eyebrow{font:650 .74rem/1.3 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink);margin:0;display:flex;align-items:center;gap:12px}
.eyebrow b{font-weight:550;color:var(--ink-2)}
h1,h2{margin:0;text-wrap:balance}
h2{font-weight:760;font-size:clamp(2.2rem,4.6vw,5rem);line-height:.98;letter-spacing:-.035em}
h2 em,.serif{font-family:var(--f-display);font-style:italic;font-weight:400;letter-spacing:-.015em}
h2 em{color:var(--gold-ink)}
.lead{font-size:clamp(1.04rem,1.1vw,1.24rem);line-height:1.55;color:var(--ink-2);max-width:34rem;margin:0}

.js [data-r]{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
.sp .wd{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sp .wd>span{display:inline-block;transition:transform 1.2s var(--ease)}
.js .sp:not(.in) .wd>span{transform:translateY(110%)}

/* ---------- hero: carousel of sites ---------- */
main{position:relative}
.hero{position:relative;height:100vh;height:100svh;min-height:640px;display:flex;flex-direction:column;padding-top:clamp(92px,13vh,140px);padding-bottom:max(28px,env(safe-area-inset-bottom,0px));overflow:hidden}
.hero h1{text-align:center;line-height:.9;position:relative;z-index:2}
.hero h1 .a{display:block;font:800 clamp(2.4rem,6.6vw,7.6rem)/.9 var(--f-body);letter-spacing:-.05em}
.hero h1 .b{display:block;font:italic 400 clamp(2.8rem,7.6vw,8.8rem)/.95 var(--f-display);letter-spacing:-.02em;color:var(--gold-ink)}
.ring-stage{position:relative;flex:1;min-height:0;perspective:1900px;perspective-origin:50% 30%;margin-top:-1vh;cursor:grab;touch-action:pan-y}
.ring-stage:active{cursor:grabbing}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.rcard{position:absolute;left:calc(var(--w) / -2);top:calc(var(--w) * -.31);width:var(--w);aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 40px 80px -40px rgba(50,35,15,.55),0 0 0 1px rgba(27,26,23,.06);backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:inline-size;user-select:none}
.rc-chrome{display:flex;align-items:center;gap:1.1cqw;height:6.4cqw;padding:0 2.6cqw;background:#ece7df}
.rc-chrome i{width:1.9cqw;height:1.9cqw;border-radius:50%;background:#e06a5f}
.rc-chrome i:nth-child(2){background:#e6b84d}.rc-chrome i:nth-child(3){background:#68b45a}
.rc-chrome span{margin-left:2cqw;flex:1;max-width:60%;height:4cqw;border-radius:2cqw;background:#fbf8f3;font:500 2.2cqw/4cqw var(--f-body);color:#6d665c;text-align:center;overflow:hidden;white-space:nowrap}
.rc-site{position:absolute;inset:6.4cqw 0 0;background:#2a2622;overflow:hidden}
.rc-site img,.rc-site video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc-site video{opacity:0;transition:opacity .8s}
.rc-site video.on{opacity:1}
.rc-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,10,.78) 0%,rgba(14,12,10,.38) 45%,rgba(14,12,10,0) 72%)}
.rc-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:3cqw 4.4cqw;color:#fff;font:800 1.9cqw/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase}
.rc-nav em{font:600 1.8cqw/1 var(--f-body);font-style:normal;letter-spacing:0;text-transform:none;background:var(--acc);padding:1.2cqw 2cqw;border-radius:9cqw}
.rc-txt{position:absolute;left:4.4cqw;bottom:9cqw;max-width:62%;color:#fff}
.rc-txt small{display:block;font:500 1.7cqw/1.3 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accl)}
.rc-txt b{display:block;font:italic 400 7.6cqw/.95 var(--f-display);margin:1.6cqw 0 2.2cqw;font-weight:400}
.rc-txt span{display:inline-block;font:600 2cqw/1 var(--f-body);padding:1.8cqw 3cqw;border-radius:9cqw;background:var(--acc);color:#fff}
.hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;position:relative;z-index:2}
.hero-foot .lead{max-width:24rem;font-size:15.5px}
.hero-foot .right{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.drag-hint{position:absolute;left:50%;bottom:max(36px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);font:500 10.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);display:flex;align-items:center;gap:10px;z-index:2;pointer-events:none}
.drag-hint::before,.drag-hint::after{content:"";width:22px;height:1px;background:currentColor;opacity:.5}

/* ---------- scene 1: phone search ---------- */
.scene{position:relative}
.scene .pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.s1{height:340vh}
.s1 .grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,7vw,120px);align-items:center;width:100%;max-width:1240px;margin-inline:auto}
.s1-copy{display:grid;gap:22px;max-width:30rem}
.steps-mini{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.steps-mini li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--muted);transition:color .5s}
.steps-mini li b{font:italic 400 24px/1 var(--f-display);color:inherit}
.steps-mini li strong{display:block;font-weight:700;color:inherit}
.steps-mini li span{font-size:14px}
.steps-mini li.on{color:var(--ink)}
.steps-mini li.on b{color:var(--gold-ink)}
.phone{position:relative;width:min(320px,74vw);aspect-ratio:9/19.3;border-radius:46px;background:#141311;padding:11px;box-shadow:0 60px 120px -50px rgba(50,35,15,.6),0 0 0 1px rgba(0,0,0,.25),inset 0 0 0 2px #2e2b27}
.phone .scr{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#f7f4ef;container-type:inline-size}
.notch{position:absolute;top:3cqw;left:50%;transform:translateX(-50%);width:30cqw;height:8cqw;background:#141311;border-radius:9cqw;z-index:5}
.sb{position:absolute;top:0;left:0;right:0;height:13cqw;display:flex;justify-content:space-between;align-items:center;padding:0 8cqw;font:600 4cqw/1 var(--f-body);z-index:4;color:#1b1a17}
.serp{position:absolute;inset:0;padding:17cqw 5cqw 0;transition:transform .7s var(--ease),opacity .5s}
.serp.out{transform:translateX(-18%);opacity:0}
.sfield{display:flex;align-items:center;gap:3cqw;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:9cqw;padding:3.8cqw 5cqw;font:500 4.3cqw/1.2 var(--f-body);box-shadow:0 4px 12px -6px rgba(0,0,0,.15)}
.sfield svg{width:5cqw;height:5cqw;color:#8e877b;flex:none}
.sfield .q{white-space:nowrap;overflow:hidden}
.sfield .cur{width:.4cqw;height:5cqw;background:var(--gold-ink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.res{margin-top:5cqw;display:grid;gap:3.4cqw}
.ri{background:#fff;border-radius:4.4cqw;padding:4cqw;border:1px solid rgba(0,0,0,.06);opacity:0;transform:translateY(4cqw);transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .4s,outline-color .4s;outline:2px solid transparent;outline-offset:1cqw}
.ri.show{opacity:1;transform:none}
.ri small{display:block;font:500 3cqw/1.3 var(--f-mono);color:#8e877b}
.ri b{display:block;font:700 4.6cqw/1.25 var(--f-body);color:#1a3e8f;margin:1cqw 0}
.ri p{margin:0;font:400 3.5cqw/1.4 var(--f-body);color:#5f594f}
.ri.first{display:grid;grid-template-columns:22cqw minmax(0,1fr);gap:3.4cqw}
.ri.first img{width:22cqw;height:22cqw;border-radius:3cqw;object-fit:cover}
.ri.first .st{font:500 3.4cqw/1.2 var(--f-body);color:#93610e}
.ri.dim b{color:#5a5a68}
.ri.tap{outline-color:var(--gold);box-shadow:0 10px 30px -12px rgba(150,95,10,.6);transform:scale(1.02)}
.pg{position:absolute;inset:0;background:#fbf8f3;transform:translateX(100%);transition:transform .8s var(--ease)}
.pg.in{transform:none}
.pg .vid{position:absolute;left:0;right:0;top:0;height:56%;overflow:hidden;background:#2a2622}
.pg .vid img,.pg .vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% center}
.pg .vid::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.25),transparent 30%,transparent 60%,rgba(0,0,0,.35))}
.pg .bar{position:absolute;top:13cqw;left:5cqw;right:5cqw;display:flex;justify-content:space-between;align-items:center;color:#fff;font:800 3.4cqw/1 var(--f-body);letter-spacing:.14em;z-index:2}
.pg .bar span{font:500 3cqw/1 var(--f-body);letter-spacing:0;background:rgba(255,255,255,.18);padding:2cqw 3cqw;border-radius:9cqw;backdrop-filter:blur(6px)}
.pg .body{position:absolute;left:6cqw;right:6cqw;top:59%;color:#1b1a17}
.pg .body small{display:block;font:500 3.2cqw/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#2f5e70}
.pg .body b{display:block;font:italic 400 10.5cqw/1 var(--f-display);margin:2.4cqw 0 3cqw}
.pg .chips{display:flex;gap:2cqw;flex-wrap:wrap}
.pg .chips span{font:500 3.3cqw/1 var(--f-body);padding:2.2cqw 3cqw;border-radius:9cqw;background:#ede6da}
.pg .book{position:absolute;left:5cqw;right:5cqw;bottom:6cqw;display:grid;grid-template-columns:1fr 1.5fr;gap:3cqw;align-items:center}
.pg .book small{font:400 3.3cqw/1.25 var(--f-body);color:#5f594f}
.pg .book small b{display:block;font:700 4.8cqw/1.1 var(--f-body);color:#1b1a17}
.pg .book span{text-align:center;font:600 4cqw/1 var(--f-body);padding:4.6cqw 0;border-radius:9cqw;background:#2f5e70;color:#fff}

/* ---------- scene 2: before / after ---------- */
.s2{height:280vh}
.s2 .pin{padding-top:72px}
.s2 .inner2{width:100%;max-width:1240px;margin-inline:auto;display:grid;gap:clamp(18px,3vh,32px)}
.s2-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.s2-head .lead{max-width:26rem}
.s2-head h2{font-size:clamp(2rem,4vw,4.2rem)}
.cmp{position:relative;width:min(100%,calc((100vh - 430px) * 1.7778));aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(50,35,15,.45),0 0 0 1px rgba(27,26,23,.08);background:#fff;user-select:none;touch-action:pan-y;container-type:inline-size;margin-inline:auto}
.cmp .layer{position:absolute;inset:0}
.cmp .chrome{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:.8cqw;height:3.2cqw;padding:0 1.4cqw;background:#ece7df;border-bottom:1px solid rgba(0,0,0,.06)}
.cmp .chrome i{width:1cqw;height:1cqw;border-radius:50%;background:#e06a5f}
.cmp .chrome i:nth-child(2){background:#e6b84d}.cmp .chrome i:nth-child(3){background:#68b45a}
.cmp .chrome span{margin-left:1.4cqw;width:32cqw;height:2.1cqw;border-radius:2cqw;background:#fbf8f3;font:500 1.15cqw/2.1cqw var(--f-body);color:#6d665c;text-align:center}
/* the 2009 site */
.old{top:3.2cqw;background:#c9e3f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 0h4v4H0zM4 4h4v4H4z' fill='%23b4d4ec'/%3E%3C/svg%3E");font-family:"Times New Roman",Times,serif;color:#000;padding:2cqw 5cqw;text-align:center}
.old h4{margin:0;font:bold 3cqw/1.2 "Comic Sans MS","Comic Sans",cursive;color:#c00;text-shadow:2px 2px 0 #ff0}
.old .onav{margin:1.2cqw 0;font-size:1.5cqw;color:#00e}
.old .onav u{margin:0 .6cqw}
.old .ogrid{display:grid;grid-template-columns:24cqw 1fr;gap:2cqw;text-align:left;margin-top:1.4cqw;background:#fff;border:3px ridge #999;padding:1.6cqw}
.old .oimg{height:16cqw;background:#ddd;border:1px solid #999;display:grid;place-items:center;font:1.3cqw/1.2 Arial,sans-serif;color:#666}
.old p{margin:0;font-size:1.6cqw;line-height:1.35}
.old .cnt{margin-top:1.6cqw;font:1.4cqw Arial,sans-serif;color:#333}
.old .cnt span{font-family:"Courier New",monospace;background:#000;color:#0f0;padding:.2cqw .6cqw;letter-spacing:.2em}
.old .blink{color:#f0f;font-weight:bold;animation:blink 1s steps(1) infinite}
/* the new site */
.new{top:3.2cqw;background:#2a2622;clip-path:inset(0 0 0 var(--x,50%))}
.new img,.new video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% center;transform:scaleX(-1)}
.new .shade{position:absolute;inset:0;background:linear-gradient(270deg,rgba(244,234,216,.95) 0%,rgba(244,234,216,.78) 38%,rgba(244,234,216,0) 66%)}
.new nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:flex-end;gap:4cqw;align-items:center;padding:2.2cqw 4cqw;font:800 1.3cqw/1 var(--f-body);letter-spacing:.16em;color:#3b2415}
.new nav span{display:flex;gap:2.4cqw;font:500 1.2cqw/1 var(--f-body);letter-spacing:0;align-items:center}
.new nav em{font-style:normal;background:#3b2415;color:#f4ead8;padding:.9cqw 1.6cqw;border-radius:9cqw}
.new .t{position:absolute;right:4cqw;top:24%;color:#3b2415;width:42%}
.new .t small{font:500 1.2cqw/1.3 var(--f-mono);letter-spacing:.2em;color:#a2622d}
.new .t b{display:block;font:italic 400 6.4cqw/.95 var(--f-display);margin:1.2cqw 0 1.6cqw;font-weight:400}
.new .t p{margin:0;font:400 1.6cqw/1.45 var(--f-body);color:#6d5440}
.new .t .bt{display:flex;gap:1cqw;margin-top:2.2cqw}
.new .t .bt span{font:600 1.35cqw/1 var(--f-body);padding:1.3cqw 2.2cqw;border-radius:9cqw;background:#3b2415;color:#f4ead8}
.new .t .bt span+span{background:transparent;border:1px solid rgba(59,36,21,.4);color:#3b2415}
.handle{position:absolute;top:3.2cqw;bottom:0;left:var(--x,50%);width:0;z-index:5}
.handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.handle button{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;border:0;background:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.4);cursor:ew-resize;display:grid;place-items:center;color:var(--ink)}
.handle button svg{width:22px;height:22px}
.tagx{position:absolute;bottom:2cqw;z-index:4;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;padding:8px 11px;border-radius:999px;background:rgba(27,26,23,.82);color:#efe8dc}
.tagx.l{left:2cqw}.tagx.r{right:2cqw;background:var(--gold);color:#1d1406}
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.vs .lbl{font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;margin-bottom:12px;display:block}
.vs .bad li{color:var(--ink-2)}
.vs .bad li::before{content:"✕  ";color:#b0412e}
.vs .good li::before{content:"✓  ";color:#4d6a35;font-weight:700}

/* ---------- scene 3: towns ---------- */
.s3{padding-block:clamp(90px,16vh,170px);overflow:hidden}
.marq{display:flex;white-space:nowrap;will-change:transform;font:italic 400 clamp(3.6rem,10vw,10rem)/1.02 var(--f-display);letter-spacing:-.02em}
.marq span{padding-right:.4em}
.marq .o{color:transparent;-webkit-text-stroke:1px rgba(27,26,23,.55)}
.marq .dot{color:var(--gold-ink)}
.s3-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,6vw,100px);align-items:end;max-width:1240px;margin:clamp(40px,7vh,80px) auto 0}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.nums div{padding:20px 14px 0 0;display:grid;gap:6px}
.nums b{font:400 clamp(2.4rem,3.6vw,3.6rem)/1 var(--f-display);font-variant-numeric:tabular-nums}
.nums span{font-size:13px;color:var(--ink-2);line-height:1.35}

/* ---------- trades film strip ---------- */
.trades{position:relative;background:var(--night);color:var(--night-ink)}
.tr-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:3.2vh;padding-top:70px}
.tr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.tr-head h2{color:var(--night-ink);max-width:14ch;font-size:clamp(2.2rem,4.4vw,4.6rem)}
.tr-head h2 em{color:var(--gold)}
.tr-head p{max-width:24rem;color:#b8b0a3;margin:0}
.track{display:flex;gap:2.4vw;will-change:transform;padding-left:max(var(--gut),env(safe-area-inset-left,0px))}
.tcard{flex:none;width:min(52vw,820px,calc((100vh - 380px) * 1.68));display:grid;gap:14px;color:inherit;text-decoration:none}
.tcard .media{position:relative;aspect-ratio:16/9.5;border-radius:6px;overflow:hidden;background:#2a2722}
.tcard .media img,.tcard .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.tcard:hover .media img,.tcard:hover .media video{transform:scale(1.04)}
.tcard .cap{display:flex;justify-content:space-between;align-items:baseline;gap:20px;border-top:1px solid rgba(239,232,220,.18);padding-top:14px}
.tcard .cap h3{margin:0;font:italic 400 clamp(2rem,3.4vw,3.4rem)/1 var(--f-display);letter-spacing:-.01em}
.tcard .cap span{font:500 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#a79f92;text-align:right}
.tcard .cap small{display:block;font:400 14px/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:#cfc7ba;margin-top:4px}
.tr-foot{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:#8f877a}
.tr-bar{flex:1;max-width:240px;height:1px;background:rgba(239,232,220,.18);margin-left:20px;align-self:center;position:relative;overflow:hidden}
.tr-bar i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(var(--p,0))}

/* ---------- flow sections ---------- */
.flow{position:relative;background:var(--paper);padding-block:clamp(90px,16vh,180px)}
.flow.alt{background:var(--paper-2)}
.inner{max-width:none}   /* width now comes from .wrap (--maxw), so every section shares the same edges */
.sec-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(40px,7vh,80px)}
.sec-head .eyebrow{margin-bottom:22px}

.config{display:grid;grid-template-columns:minmax(0,310px) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.ctrl{display:grid;gap:24px;position:sticky;top:100px}
.lab{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:10px}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tgrid button{display:flex;align-items:center;gap:10px;text-align:left;font:600 14px/1.2 var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px;cursor:pointer;transition:all .3s;min-width:0}
.tgrid button img{width:36px;height:36px;border-radius:8px;object-fit:cover;flex:none}
.tgrid button span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tgrid button:hover{border-color:rgba(147,97,14,.5)}
.tgrid button[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.namefield{width:100%;font:600 17px/1.3 var(--f-body);color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:border-color .3s,box-shadow .3s}
.namefield:focus{outline:none;border-color:var(--gold-ink);box-shadow:0 0 0 4px rgba(214,160,60,.2)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatches button{width:32px;height:32px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line);cursor:pointer;transition:transform .25s,box-shadow .25s}
.swatches button:hover{transform:scale(1.1)}
.swatches button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.cfg-note{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0}
.stage{position:relative;min-width:0;padding-bottom:48px}
.desk{position:relative;border-radius:14px;background:#fff;box-shadow:0 50px 100px -40px rgba(50,35,15,.45),0 10px 30px -15px rgba(50,35,15,.25);overflow:hidden;aspect-ratio:16/10.4;max-width:100%}
.chrome2{display:flex;align-items:center;gap:7px;height:32px;padding:0 14px;background:#ece7df;border-bottom:1px solid rgba(0,0,0,.06)}
.chrome2 i{width:10px;height:10px;border-radius:50%;background:#e06a5f}
.chrome2 i:nth-child(2){background:#e6b84d}.chrome2 i:nth-child(3){background:#68b45a}
.chrome2 .url{margin-left:12px;flex:1;max-width:360px;height:21px;border-radius:11px;background:#fbf8f3;font:500 11.5px/21px var(--f-body);color:#6d665c;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 10px}
.site{position:absolute;inset:32px 0 0 0;overflow:hidden;container-type:inline-size;background:#2a2622}
.site .ph,.site video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center;transition:opacity .8s ease}
.site .ph.out,.site video.out{opacity:0}
.site .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,10,.78) 0%,rgba(14,12,10,.45) 40%,rgba(14,12,10,0) 72%)}
.site nav{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:2.6cqw 4cqw;color:#fff}
.site nav b{font:800 1.5cqw/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;max-width:40%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.site nav span{display:flex;gap:2.6cqw;font:500 1.35cqw/1 var(--f-body);align-items:center}
.site nav em{font-style:normal;background:var(--acc,#d6a03c);color:#fff;padding:.9cqw 1.6cqw;border-radius:99px;font-weight:600}
.site .txt{position:absolute;left:4.2cqw;top:22%;max-width:54%;color:#fff}
.site .eb{font:500 1.3cqw/1.3 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--acc-l,#f3c98a)}
.site h3{font:italic 400 6.6cqw/.95 var(--f-display);margin:1.4cqw 0 1.6cqw;letter-spacing:-.01em;text-wrap:balance;overflow-wrap:anywhere}
.site p{font:400 1.75cqw/1.45 var(--f-body);margin:0;opacity:.92;max-width:36ch}
.site .b{display:flex;gap:1.2cqw;margin-top:2.6cqw;flex-wrap:wrap}
.site .b span{font:600 1.45cqw/1 var(--f-body);padding:1.3cqw 2.2cqw;border-radius:99px;background:var(--acc,#d6a03c);color:#fff}
.site .b span+span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45)}
.site .info{position:absolute;left:4.2cqw;right:31cqw;bottom:3cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw}
.site .info div{background:rgba(255,255,255,.93);color:#2a2622;border-radius:1.2cqw;padding:1.4cqw 1.8cqw;font:500 1.25cqw/1.35 var(--f-body);min-width:0}
.site .info b{display:block;font:600 1.05cqw/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc,#93610e);margin-bottom:.6cqw}
.fict{position:absolute;right:3cqw;top:7.6cqw;font:500 1cqw/1 var(--f-mono);letter-spacing:.14em;color:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.35);padding:.6cqw .8cqw;border-radius:.6cqw}
.mphone{position:absolute;right:-1%;bottom:0;width:26%;min-width:150px;aspect-ratio:9/19;border-radius:28px;background:#111;padding:8px;box-shadow:0 40px 70px -30px rgba(40,25,5,.6),0 0 0 1px rgba(0,0,0,.2)}
.mphone .scr{position:relative;width:100%;height:100%;border-radius:21px;overflow:hidden;background:#fbf8f3;container-type:inline-size}
.mphone .ph{position:absolute;left:0;right:0;top:0;height:52%;background-size:cover;background-position:70% center;transition:opacity .8s ease}
.mphone .ph.out{opacity:0}
.mphone .pt{position:absolute;left:6cqw;right:6cqw;top:56%;color:#2a2622}
.mphone .pt small{display:block;font:500 3.6cqw/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--acc,#93610e)}
.mphone .pt b{display:block;font:italic 400 10cqw/1 var(--f-display);margin:2cqw 0;overflow-wrap:anywhere}
.mphone .pt p{font:400 4.4cqw/1.4 var(--f-body);margin:0;color:#5b544b}
.mphone .mbar{position:absolute;left:5cqw;right:5cqw;bottom:5cqw;display:grid;grid-template-columns:1fr 1.4fr;gap:3cqw}
.mphone .mbar span{font:600 4.2cqw/1 var(--f-body);text-align:center;padding:4.4cqw 0;border-radius:99px;background:#eee7dc;color:#2a2622;white-space:nowrap;overflow:hidden}
.mphone .mbar span+span{background:var(--acc,#d6a03c);color:#fff}
.stage.swap .site h3,.stage.swap .site p,.stage.swap .site .eb,.stage.swap .mphone .pt{animation:sw .8s var(--ease)}
@keyframes sw{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) minmax(0,2fr);gap:clamp(16px,3vw,48px);align-items:baseline;padding:clamp(22px,4vh,40px) 0;border-bottom:1px solid var(--line)}
.steps .n{font:italic 400 clamp(3.4rem,6vw,6rem)/.8 var(--f-display);color:var(--gold-ink)}
.steps h3{margin:0;font-size:clamp(1.3rem,2vw,1.8rem);font-weight:700;letter-spacing:-.02em}
.steps p{margin:0;color:var(--ink-2)}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{position:relative;border-radius:18px;padding:32px 28px 28px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0;transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-6px)}
.card.reco{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.reco p,.card.reco ul{color:#c9c1b4}
.card .k{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.card.reco .k{color:var(--gold)}
.card h3{font-size:21px;font-weight:700;margin:14px 0 0}
.price{display:flex;align-items:baseline;gap:12px;margin:22px 0 8px;font-variant-numeric:tabular-nums}
.price b{font:400 clamp(3.2rem,4.4vw,4.2rem)/1 var(--f-display);letter-spacing:-.02em}
.price s{color:var(--muted);font-size:17px}
.price small{font-size:15px;opacity:.7}
.card p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.5}
.card ul{list-style:none;padding:0;margin:22px 0 28px;display:grid;gap:9px;font-size:14px;color:var(--ink-2)}
.card ul li::before{content:"— ";color:var(--gold-ink)}
.card.reco ul li::before{color:var(--gold)}
.card .btn{margin-top:auto;align-self:flex-start}
.badge{position:absolute;top:24px;right:24px;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;background:var(--gold);color:#1a1205;padding:7px 10px;border-radius:999px}
.fine{max-width:52rem;margin-top:30px;font-size:12.5px;color:var(--muted)}

.contact{position:relative;padding-block:clamp(110px,18vh,190px);background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(28px,6vw,100px);align-items:start}
.contact h2{font-size:clamp(2.6rem,6vw,6.4rem)}
.reach{display:grid;gap:10px;margin-top:34px;max-width:30rem}
.reach-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);min-width:0}
.reach-row div{min-width:0}
.reach-row small{display:block;font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;color:var(--muted);text-transform:uppercase;margin-bottom:7px}
.reach-row span{display:block;font-weight:600;font-size:17px;user-select:all;overflow-wrap:anywhere}
.copybtn{flex:none;font:500 12px/1 var(--f-mono);color:var(--gold-ink);background:transparent;border:1px solid rgba(147,97,14,.35);padding:9px 12px;border-radius:999px;cursor:pointer;transition:all .3s}
.copybtn:hover{background:var(--gold);color:#1a1205;border-color:var(--gold)}
form.fcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 40px 90px -40px rgba(50,35,15,.35)}
.field{display:grid;gap:7px;margin-bottom:14px}
.field label{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{width:100%;font:500 15.5px/1.4 var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .3s,box-shadow .3s}
.field textarea{min-height:88px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold-ink);box-shadow:0 0 0 4px rgba(214,160,60,.18)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form-ok{margin-top:14px;padding:12px 14px;border-radius:10px;background:rgba(214,160,60,.14);font-size:14px;color:var(--gold-ink)}
.form-note{font-size:12px;color:var(--muted);margin:14px 0 0}

/* about */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,110px);align-items:center}
.portrait{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:3/4;max-width:460px;width:100%;box-shadow:0 50px 100px -40px rgba(50,35,15,.45);background:var(--paper-2)}
.portrait img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.portrait figcaption{position:absolute;left:16px;bottom:16px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;background:rgba(247,243,236,.92);padding:9px 12px;border-radius:999px}
.about-text{display:grid;gap:20px;max-width:36rem;min-width:0}
.about-text p{margin:0;color:var(--ink-2);font-size:clamp(1rem,1.2vw,1.12rem)}
.about-text p.eyebrow{color:var(--gold-ink);font-size:11.5px}
.about-text p.big{font:400 clamp(1.5rem,2.4vw,2.2rem)/1.25 var(--f-display);color:var(--ink)}
.promise{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.promise li{font:500 13px/1 var(--f-body);padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.sign{font:italic 400 clamp(2.6rem,4vw,3.6rem)/1 var(--f-display);color:var(--gold-ink)}
/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,6vw,100px);align-items:start}
.faq-side{position:sticky;top:110px;display:grid;gap:22px;min-width:0}
.callme{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);max-width:24rem}
.callme small{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.callme b{font:400 1.8rem/1 var(--f-display);user-select:all}
.qa{border-top:1px solid var(--line);min-width:0}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr) 20px;gap:12px;align-items:baseline;padding:22px 0;font-weight:700;font-size:clamp(1.02rem,1.4vw,1.2rem);letter-spacing:-.01em;transition:color .3s}
.qa summary:hover{color:var(--gold-ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary em{font:italic 400 1.25rem/1 var(--f-display);color:var(--gold-ink)}
.qa summary::after{content:"";justify-self:end;align-self:center;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;transition:transform .5s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .ans{padding:0 32px 24px 56px;color:var(--ink-2);max-width:46rem}
.qa details[open] .ans{animation:qa .6s var(--ease)}
@keyframes qa{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qa .ans p{margin:0}
/* mobile call bar */
.callbar{display:none}

#cursor{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:none;mix-blend-mode:difference}
.has-cursor #cursor{display:block}
#cursor i{position:fixed;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;transform:translate3d(-100px,-100px,0);transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease)}
#cursor.big i{width:54px;height:54px;margin:-27px 0 0 -27px}

@media (max-width:1000px){
  .nav{display:none}
  .config{grid-template-columns:minmax(0,1fr)}
  .ctrl{position:static}
  .sec-head{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:minmax(0,1fr)}
  .contact-grid{grid-template-columns:minmax(0,1fr)}
  .steps li{grid-template-columns:minmax(0,1fr) minmax(0,3fr)}
  .steps li p{grid-column:2}
  .s3-grid{grid-template-columns:minmax(0,1fr)}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about,.faq{grid-template-columns:minmax(0,1fr)}
  .faq-side{position:static}
  .portrait{max-width:380px}
}
@media (max-width:760px){
  .hero{padding-top:104px}
  .hero-foot{flex-direction:column;align-items:flex-start}
  .hero-foot .right{justify-content:flex-start}
  .drag-hint{display:none}
  .s1 .grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px;align-content:center}
  .s1-copy{gap:10px;text-align:left;justify-self:stretch}
  .s1-copy h2{font-size:1.9rem}
  .s1-copy .lead,.s1-copy .steps-mini{display:none}
  .phone{width:min(250px,62vw)}
  .s2-head{flex-direction:column;align-items:flex-start;gap:12px}
  .s2-head h2{font-size:2rem}
  .s2-head .lead{font-size:15px}
  .cmp{aspect-ratio:4/5;max-height:none}
  .cmp .old{font-size:150%}
  .s2 .vs{display:none}
  .cmp .chrome{height:6cqw}.cmp .chrome i{width:2cqw;height:2cqw}.cmp .chrome span{font-size:2.6cqw;height:4cqw;line-height:4cqw;width:50cqw}
  .cmp .old,.cmp .new,.handle{top:6cqw}
  .old{padding:4cqw}.old h4{font-size:5.4cqw}.old .onav{font-size:3cqw}.old .ogrid{grid-template-columns:minmax(0,1fr);gap:3cqw}.old .oimg{height:26cqw;font-size:2.6cqw}.old p{font-size:3.2cqw}.old .cnt{font-size:2.6cqw}
  .new .t{width:74%;top:22%}.new .t small{font-size:2.6cqw}.new .t b{font-size:11cqw}.new .t p{font-size:3.5cqw}.new .t .bt span{font-size:3cqw;padding:2.6cqw 3.8cqw}
  .new nav{font-size:2.8cqw;padding:3.4cqw 4cqw}.new nav span{font-size:2.6cqw}
  .s2 .pin{padding-top:64px}
  .cmp{width:100%}
  .vs{grid-template-columns:minmax(0,1fr);gap:16px}
  .vs ul{font-size:13.5px}
  .tr-pin{position:relative;height:auto;padding-block:90px 70px}
  .track{overflow-x:auto;scroll-snap-type:x mandatory;padding-right:var(--gut);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .tcard{width:82vw;scroll-snap-align:start}
  .tr-head{flex-direction:column;align-items:flex-start}
  .tr-foot{display:none}
  .tgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tgrid button{flex-direction:column;font-size:12px;padding:8px 4px;text-align:center}
  .mphone{width:34%;min-width:0;border-radius:16px;padding:5px;right:0;bottom:-6%}
  .mphone .scr{border-radius:12px}
  .row2{grid-template-columns:minmax(0,1fr)}
  .steps li{grid-template-columns:minmax(0,1fr)}
  .steps li p{grid-column:auto}
  .nums div{padding-right:8px}
  .qa summary{grid-template-columns:30px minmax(0,1fr) 18px;padding:18px 0}
  .qa .ans{padding:0 8px 20px 42px}
  .callbar{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(236,230,219,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .5s var(--ease)}
  .callbar.on{transform:none}
  .callbar .btn{justify-content:center;padding:1em .8em}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* =====================================================================
   Multi-page additions: header menu, footer, page heroes, inner pages
   ===================================================================== */
html.menu-open{overflow:hidden}
.seen #loader{display:none}
#loader .lmark{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:clamp(120px,16vw,190px)}
#loader .lmark svg{display:block;width:100%;height:auto}

/* paper grain: a fixed, very light noise so the warm paper feels printed */
body::after{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* page-to-page transition (browsers that support it; others just load the page) */
@view-transition{navigation:auto}
.top{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .4s cubic-bezier(.7,0,.84,0) both}
::view-transition-new(root){animation:vt-in .8s cubic-bezier(.16,1,.3,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-18px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(40px)}}

.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.top-r{display:flex;align-items:center;gap:10px}
.burger{display:none;position:relative;width:46px;height:46px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;flex:none}
.burger i{position:absolute;left:14px;right:14px;height:1.5px;background:currentColor;transition:transform .55s var(--ease)}
.burger i:first-child{top:18px}.burger i:last-child{top:26px}
.menu-open .burger i:first-child{transform:translateY(4px) rotate(45deg)}
.menu-open .burger i:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:29;background:var(--paper);display:flex;flex-direction:column;justify-content:flex-end;padding-top:110px;padding-bottom:max(30px,env(safe-area-inset-bottom,0px));clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .8s var(--ease),visibility 0s .8s}
.menu-open .menu{clip-path:inset(0);visibility:visible;transition:clip-path .8s var(--ease)}
.menu nav{display:grid;gap:4px}
.menu nav a{display:flex;align-items:baseline;gap:16px;font:italic 400 clamp(2.6rem,11vw,4.6rem)/1.06 var(--f-display);letter-spacing:-.02em;text-decoration:none;opacity:0;transform:translateY(36px);transition:opacity .5s,transform .8s var(--ease)}
.menu nav a small{font:500 11px/1 var(--f-mono);font-style:normal;letter-spacing:.16em;color:var(--gold-ink)}
.menu nav a[aria-current="page"]{color:var(--gold-ink)}
.menu-open .menu nav a{opacity:1;transform:none}
.menu-open .menu nav a:nth-child(2){transition-delay:.05s}.menu-open .menu nav a:nth-child(3){transition-delay:.1s}
.menu-open .menu nav a:nth-child(4){transition-delay:.15s}.menu-open .menu nav a:nth-child(5){transition-delay:.2s}
.m-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.menu-open .top{color:var(--ink)}
.menu-open .top .btn-ink{background:var(--ink);color:var(--paper)}

/* footer */
.foot{position:relative;background:var(--night);color:var(--night-ink);padding-block:clamp(80px,13vh,140px) max(26px,env(safe-area-inset-bottom,0px));overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.6fr));gap:clamp(28px,4vw,64px)}
.foot-brand img{width:min(250px,72%);height:auto}
.foot-brand p{color:#b8b0a3;max-width:22rem;margin:22px 0 26px}
.foot h4{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#8f877a;margin:6px 0 18px;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:15px}
.foot a{text-decoration:none;transition:color .3s}
.foot a:hover{color:var(--gold)}
.foot .btn-gold{color:#1d1406}
.foot .btn-gold:hover{color:#1d1406}
.bigmark{margin:clamp(60px,12vh,120px) 0 0;font:italic 400 clamp(4rem,15.6vw,17.5rem)/.82 var(--f-display);letter-spacing:-.035em;white-space:nowrap;color:var(--night-ink);user-select:none}
.bigmark span{color:var(--gold)}
.foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:28px;padding-top:20px;border-top:1px solid rgba(239,232,220,.14);font-size:12.5px;color:#8f877a}
.foot-bot a{color:#b8b0a3}

/* inner page hero */
.phero{position:relative;padding-top:clamp(140px,22vh,230px);padding-bottom:clamp(50px,9vh,100px)}
.phero h1{margin:24px 0 0;font:780 clamp(2.8rem,6.4vw,7.2rem)/.92 var(--f-body);letter-spacing:-.045em;max-width:14ch}
.phero h1 em,.ahero h1 em{display:block;font:italic 400 1.08em/.95 var(--f-display);letter-spacing:-.02em;color:var(--gold-ink)}
.phero .lead{margin-top:30px;max-width:40rem;font-size:clamp(1.05rem,1.4vw,1.28rem)}
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0;padding:0}
.pills li{display:flex;align-items:center;gap:8px;font:500 13.5px/1 var(--f-body);padding:11px 15px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.pills li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* numbered block titles */
.btitle{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,26rem);gap:12px 22px;align-items:end;margin:0 0 clamp(28px,5vh,48px);padding-top:28px;border-top:1px solid var(--line)}
.btitle b{font:italic 400 clamp(2.8rem,5vw,4.4rem)/.8 var(--f-display);color:var(--gold-ink)}
.btitle h2{font-size:clamp(1.8rem,3.2vw,3rem);letter-spacing:-.035em}
.btitle p{margin:0;color:var(--ink-2);font-size:15px}
.blk+.blk{margin-top:clamp(80px,14vh,150px)}

/* pricing additions */
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}
.price .from{font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.65;align-self:center}
.card .alt{font:500 12.5px/1.4 var(--f-mono);color:var(--muted);margin:0 0 6px}
.card.reco .alt{color:#9f978a}
.side-note{display:flex;gap:16px;align-items:flex-start;max-width:980px;margin-top:18px;padding:20px 22px;border-radius:16px;border:1px dashed rgba(27,26,23,.25);font-size:14.5px;color:var(--ink-2)}
.side-note b{color:var(--ink)}
.side-note svg{width:22px;height:22px;flex:none;color:var(--gold-ink);margin-top:1px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,5vw,80px);border-top:1px solid var(--line)}
.opts>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:19px 0;border-bottom:1px solid var(--line);min-width:0}
.opts b{display:block;font-weight:600;font-size:16px}
.opts small{display:block;color:var(--ink-2);font-size:13.5px;margin-top:3px}
.opts span{font:400 1.75rem/1 var(--f-display);white-space:nowrap;font-variant-numeric:tabular-nums}
.opts span.free{font-style:italic;color:var(--gold-ink)}

/* budget simulator */
.sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(24px,4vw,64px);align-items:start}
.sim-steps{display:grid;gap:34px;min-width:0}
.sim-h{display:flex;align-items:baseline;gap:10px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.sim-h b{font:italic 400 1.4rem/1 var(--f-display);letter-spacing:0;color:var(--gold-ink);text-transform:none}
.choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.choice label{position:relative;display:grid;gap:6px;align-content:start;padding:16px 16px 18px;border-radius:14px;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:border-color .3s,box-shadow .3s,transform .4s var(--ease);min-width:0}
.choice label:hover{transform:translateY(-2px)}
.choice input,.toggles input{position:absolute;opacity:0;pointer-events:none}
.choice label:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.choice label:has(input:focus-visible),.toggles label:has(input:focus-visible){outline:2px solid var(--gold-ink);outline-offset:3px}
.choice b{font-weight:700;font-size:15px}
.choice span{font:400 1.9rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.choice small{color:var(--ink-2);font-size:13px;line-height:1.4}
.toggles{display:flex;flex-wrap:wrap;gap:8px}
.toggles label{position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:14px;font-weight:500;transition:background .3s,color .3s,border-color .3s}
.toggles label em{font-style:normal;font-size:12.5px;opacity:.6}
.toggles label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.toggles label:has(input:disabled){opacity:.55;cursor:default}
.ticket{position:sticky;top:100px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px;box-shadow:0 40px 90px -40px rgba(50,35,15,.35);min-width:0}
.ticket::before,.ticket::after{content:"";position:absolute;top:64px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:1px solid var(--line)}
.ticket::before{left:-10px;clip-path:inset(0 0 0 50%)}.ticket::after{right:-10px;clip-path:inset(0 50% 0 0)}
.flow.alt .ticket::before,.flow.alt .ticket::after{background:var(--paper-2)}
.ticket h3{margin:0 0 30px;display:flex;justify-content:space-between;align-items:baseline;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ticket h3 b{font:italic 400 1.5rem/1 var(--f-display);letter-spacing:0;text-transform:none;color:var(--ink)}
.t-lines{list-style:none;margin:0 0 18px;padding:18px 0 0;border-top:1px dashed rgba(27,26,23,.25);display:grid;gap:9px;font-size:14px}
.t-lines li{display:flex;justify-content:space-between;gap:12px;color:var(--ink-2)}
.t-lines li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.t-tot{display:grid;gap:14px;padding-top:18px;border-top:1px dashed rgba(27,26,23,.25)}
.t-tot div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.t-tot small{font:500 11px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.t-tot b{font:400 2.5rem/1 var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.t-tot b i{font-style:normal;font-size:.5em;color:var(--ink-2)}
.t-tot .first b{font-size:1.6rem}
.t-split{margin:14px 0 0;font-size:13px;color:var(--gold-ink);min-height:1.4em}
.ticket .btn{width:100%;justify-content:center;margin-top:18px}
.ticket .fine{margin-top:12px;font-size:12px}

/* contact form: project choice */
.field .toggles{gap:6px}
.field .toggles label{padding:9px 13px;font-size:13.5px}

/* =========================== automation =========================== */
.ahero{position:relative;background:var(--night);color:var(--night-ink);padding-top:clamp(130px,19vh,200px);padding-bottom:clamp(70px,11vh,120px);overflow:hidden}
.ahero::before{content:"";position:absolute;left:62%;top:58%;width:min(1100px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(214,160,60,.15),rgba(214,160,60,0) 60%);pointer-events:none}
.ahero .eyebrow{color:var(--gold)}.ahero .eyebrow b{color:#8f877a}
.ahero h1{position:relative;margin:24px 0 0;font:800 clamp(2.8rem,6.4vw,7rem)/.9 var(--f-body);letter-spacing:-.05em;max-width:15ch}
.ahero h1 em{color:var(--gold)}
.ahero .lead{color:#b8b0a3;margin-top:28px;max-width:38rem;font-size:clamp(1.05rem,1.35vw,1.25rem)}
.ahero .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.ahero .btn-line:hover{background:var(--night-ink);color:var(--ink);border-color:var(--night-ink)}
.ahero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:center}

.scen{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:26px}
.scen button{font:500 13px/1 var(--f-body);color:#cfc7ba;background:rgba(239,232,220,.06);border:1px solid rgba(239,232,220,.14);padding:10px 14px;border-radius:999px;cursor:pointer;transition:all .3s}
.scen button:hover{color:var(--night-ink);border-color:rgba(239,232,220,.35)}
.scen button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1d1406}
.flowd{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr);align-items:center;gap:clamp(34px,5vw,80px)}
.flowd .wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flowd .wire{fill:none;stroke:rgba(239,232,220,.16);stroke-width:1.5;stroke-dasharray:3 5}
.flowd .lit{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;opacity:0}
.flowd .dot{fill:#ffd88c}
.flowd .halo{fill:rgba(214,160,60,.28)}
.node{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;border-radius:16px;background:#211f1b;border:1px solid rgba(239,232,220,.1);box-shadow:0 20px 40px -24px rgba(0,0,0,.8);transition:border-color .5s,background .5s,transform .5s var(--ease)}
.node .ic{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center;background:rgba(214,160,60,.13);color:var(--gold)}
.node .ic svg{width:20px;height:20px}
.node>div{min-width:0}
.node small{display:block;font:500 10px/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8f877a;margin-bottom:4px}
.node b{display:block;font:600 14.5px/1.3 var(--f-body);color:var(--night-ink)}
.n-in{padding:18px}
.n-in.fire{border-color:rgba(214,160,60,.6);transform:scale(1.03)}
.hub{position:relative;z-index:1;width:clamp(96px,9vw,128px);aspect-ratio:1;border-radius:30%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#2e2a22,#1a1814);border:1px solid rgba(214,160,60,.35);box-shadow:0 0 0 10px rgba(214,160,60,.04),0 0 90px -10px rgba(214,160,60,.4)}
.hub img{width:58%;height:auto}
.hub::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--gold);opacity:0}
.hub.fire::after{animation:ring 1s var(--ease)}
@keyframes ring{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
.hub span{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#8f877a;white-space:nowrap}
.outs{display:grid;gap:10px;min-width:0}
.node.out .ok{margin-left:auto;flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(239,232,220,.18);color:transparent;transition:all .45s var(--ease)}
.node.out .ok svg{width:12px;height:12px}
.node.out.done{border-color:rgba(214,160,60,.42);background:#26231d}
.node.out.done .ok{background:var(--gold);border-color:var(--gold);color:#1d1406;transform:scale(1.1)}
.flow-note{margin:30px 0 0;font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#8f877a}
.flow-note b{color:var(--gold);font-weight:500}

/* automation catalogue */
.autos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.acard{position:relative;display:flex;flex-direction:column;gap:12px;padding:24px 22px 22px;border-radius:18px;background:var(--card);border:1px solid var(--line);min-width:0;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.acard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(50,35,15,.4)}
.acard .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(214,160,60,.16);color:var(--gold-ink)}
.acard .ic svg{width:22px;height:22px}
.acard h3{margin:6px 0 0;font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.acard p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.acard .for{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font:500 10.5px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* time calculator */
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,90px);align-items:start}
.tpick{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:28px}
.tpick button{font:600 13.5px/1 var(--f-body);padding:11px 15px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:all .3s}
.tpick button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sliders{display:grid;gap:22px}
.sl{display:grid;gap:10px}
.sl-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:15px;font-weight:600}
.sl-top output{flex:none;font:500 12.5px/1 var(--f-mono);color:var(--gold-ink);font-variant-numeric:tabular-nums}
.sl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;--v:50%}
.sl input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--v),rgba(27,26,23,.14) var(--v))}
.sl input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--v),rgba(27,26,23,.14) var(--v))}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--ink);border:4px solid var(--paper);box-shadow:0 0 0 1px var(--ink),0 6px 14px -4px rgba(0,0,0,.4)}
.sl input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);border:4px solid var(--paper);box-shadow:0 0 0 1px var(--ink)}
.sl.rate{margin-top:10px;padding-top:22px;border-top:1px solid var(--line)}
.result{position:sticky;top:100px;background:var(--ink);color:var(--paper);border-radius:22px;padding:clamp(28px,3.4vw,44px);box-shadow:0 50px 100px -40px rgba(27,26,23,.6);overflow:hidden}
.result::before{content:"";position:absolute;right:-30%;top:-40%;width:90%;aspect-ratio:1;background:radial-gradient(circle,rgba(214,160,60,.25),transparent 65%);pointer-events:none}
.result small{position:relative;display:block;font:500 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#a79f92}
.result .big{position:relative;display:flex;align-items:baseline;gap:14px;margin:18px 0 12px;font:400 clamp(4.6rem,8.6vw,8rem)/.85 var(--f-display);font-variant-numeric:tabular-nums;color:var(--gold);letter-spacing:-.03em}
.result .big em{font-size:.26em;font-style:italic;color:var(--paper);letter-spacing:0}
.result p{position:relative;margin:0;color:#cfc7ba;font-size:15.5px}
.result p b{color:var(--paper);font-weight:600}
.result .bars{position:relative;display:grid;gap:10px;margin:26px 0}
.result .bar{display:grid;grid-template-columns:104px minmax(0,1fr) 56px;gap:10px;align-items:center;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#a79f92}
.result .bar span:last-child{text-align:right;color:var(--paper)}
.result .bar i{display:block;height:8px;border-radius:8px;background:rgba(239,232,220,.12);overflow:hidden;position:relative}
.result .bar i::after{content:"";position:absolute;inset:0;background:#8f877a;transform-origin:left;transform:scaleX(var(--s,0));transition:transform .8s var(--ease)}
.result .bar.g i::after{background:var(--gold)}
.result .fine{color:#8f877a;font-size:12px;margin:18px 0 0}
.result .btn{position:relative;margin-top:24px}

/* home: automation teaser + pricing teaser */
.ateaser{position:relative;background:var(--night);color:var(--night-ink);padding-block:clamp(90px,15vh,170px);overflow:hidden}
.ateaser::before{content:"";position:absolute;right:-10%;top:50%;width:min(900px,110vw);aspect-ratio:1;transform:translateY(-50%);background:radial-gradient(circle,rgba(214,160,60,.13),rgba(214,160,60,0) 60%);pointer-events:none}
.ateaser .eyebrow{color:var(--gold)}
.ateaser h2{color:var(--night-ink)}
.ateaser h2 em{color:var(--gold)}
.ateaser .lead{color:#b8b0a3}
.at-grid{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(30px,6vw,100px);align-items:center}
.at-list{list-style:none;margin:30px 0 34px;padding:0;border-top:1px solid rgba(239,232,220,.14)}
.at-list li{display:flex;gap:14px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(239,232,220,.14);color:#cfc7ba;font-size:15px}
.at-list li b{color:var(--night-ink);font-weight:600}
.at-list li::before{content:"→";color:var(--gold)}
.ptease{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ptease a{display:grid;gap:10px;align-content:start;padding:28px 26px;border-radius:18px;background:var(--card);border:1px solid var(--line);text-decoration:none;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.ptease a:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(50,35,15,.4)}
.ptease a.reco{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ptease small{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.ptease a.reco small{color:var(--gold)}
.ptease b{font:400 clamp(2.8rem,4vw,3.8rem)/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-weight:400}
.ptease b i{font-size:.4em;font-style:normal;opacity:.65;margin-left:4px}
.ptease span{font-size:14.5px;color:var(--ink-2)}
.ptease a.reco span{color:#c9c1b4}
.more{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}

/* contact page, legal, 404 */
.after{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.after div{padding:26px 24px;border-radius:18px;background:var(--card);border:1px solid var(--line)}
.after b{display:block;font:italic 400 2.8rem/1 var(--f-display);color:var(--gold-ink);margin-bottom:14px;font-weight:400}
.after h3{margin:0 0 8px;font-size:18px}
.after p{margin:0;color:var(--ink-2);font-size:14.5px}
.zones{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font:italic 400 1.6rem/1.25 var(--f-display);color:var(--ink-2)}
.zones span:nth-child(odd){color:var(--ink)}
.legal{max-width:46rem}
.legal h2{font:italic 400 1.9rem/1.1 var(--f-display);letter-spacing:-.01em;margin:44px 0 12px;padding-top:26px;border-top:1px solid var(--line)}
.legal p{margin:0 0 12px;color:var(--ink-2)}
.legal a{color:var(--gold-ink)}

@media (max-width:1100px){
  .autos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ahero-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){
  .burger{display:block}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
  .btitle{grid-template-columns:auto minmax(0,1fr)}
  .btitle p{grid-column:1/-1}
  .cards.two{grid-template-columns:minmax(0,1fr)}
  .sim,.calc,.at-grid{grid-template-columns:minmax(0,1fr)}
  .ticket,.result{position:relative;top:0}
  .ptease,.after{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .top-r .btn{display:none}
  .choice{grid-template-columns:minmax(0,1fr)}
  .opts{grid-template-columns:minmax(0,1fr)}
  .autos{grid-template-columns:minmax(0,1fr)}
  .flowd{grid-template-columns:minmax(0,1fr);justify-items:stretch;gap:46px}
  .flowd .hub{justify-self:center}
  .outs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .outs .node{flex-direction:column;align-items:flex-start;gap:10px;padding:14px}
  .outs .node .ok{position:absolute;top:12px;right:12px}
  .node b{font-size:13.5px}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .result .bar{grid-template-columns:84px minmax(0,1fr) 48px}
}

/* form + flow fixes */
.flabel{display:block;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field .toggles label{font:500 13.5px/1 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink);padding:9px 13px}
.form-note a{color:inherit}
.flowd.swap .node>div,.flowd.swap .node .ic{animation:sw .6s var(--ease)}
.ateaser .flowd{gap:clamp(26px,3.2vw,46px)}
.ahero-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.ahero h1{font-size:clamp(2.8rem,5.4vw,6.2rem)}
.ahero .flowd{gap:clamp(22px,2.6vw,44px)}
.ahero .hub,.ateaser .hub{width:clamp(88px,7.4vw,112px)}
.ateaser h2{font-size:clamp(2.2rem,4.2vw,4.4rem)}
.phero+.contact{padding-top:clamp(10px,3vh,40px)}
@media (max-width:1100px){.ahero-grid{grid-template-columns:minmax(0,1fr)}}
/* frosted header once the page scrolls */
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(236,230,219,.93);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line);opacity:0;transition:opacity .5s,background .5s}
.top{transition:color .5s,padding .5s var(--ease)}
.top.scrolled{padding-block:12px}
.top.scrolled::before{opacity:1}
.top.on-dark::before{background:rgba(22,21,18,.9);border-color:rgba(239,232,220,.08)}
.menu-open .top::before{opacity:0}
.menu-open .callbar{transform:translateY(110%)}

/* ---------- offer detail tables ---------- */
.odetail{margin-top:clamp(56px,9vh,96px)}
.od-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 30px;flex-wrap:wrap;margin-bottom:8px}
.od-head h3{margin:0;font:italic 400 clamp(2rem,3.2vw,2.9rem)/1 var(--f-display);letter-spacing:-.015em}
.od-head p{margin:0;max-width:30rem;color:var(--ink-2);font-size:15px}
.otable{position:relative}
.otable table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px}
.otable thead th{position:sticky;top:68px;z-index:3;background:var(--paper);padding:18px 12px 14px;border-bottom:1px solid var(--ink);text-align:center;vertical-align:bottom;font-weight:400}
.flow.alt .otable thead th{background:var(--paper-2)}
.otable thead th.ot-lab{text-align:left;padding-left:0;font:500 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.otable thead th span{display:block;font:700 15.5px/1.2 var(--f-body);color:var(--ink)}
.otable thead th b{display:block;margin-top:5px;font:400 1.55rem/1.05 var(--f-display);color:var(--ink);white-space:nowrap}
.otable thead th.reco{background:var(--ink);border-radius:14px 14px 0 0;border-bottom-color:var(--ink)}
.otable thead th.reco span,.otable thead th.reco b{color:var(--paper)}
.otable thead th.reco::before{content:"Recommandé";display:block;margin:-6px auto 8px;width:max-content;font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#1a1205;background:var(--gold);padding:5px 8px;border-radius:999px}
.otable tbody th{width:44%;text-align:left;vertical-align:top;font-weight:400;padding:17px 28px 17px 0;border-bottom:1px solid var(--line)}
.otable tbody th b{display:block;font-weight:600;font-size:15.5px;color:var(--ink);line-height:1.3}
.otable tbody th small{display:block;margin-top:5px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.otable td{width:18.6%;text-align:center;vertical-align:middle;padding:14px 12px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.35;color:var(--ink)}
.otable td.reco{background:rgba(214,160,60,.09)}
.otable tr:last-child td.reco{border-radius:0 0 14px 14px}
.ot-grp th{width:auto!important;padding:40px 0 12px!important;text-align:left;font:500 11px/1 var(--f-mono)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);border-bottom:1px solid var(--ink)!important}
.otable tbody tr.ot-grp:first-child th{padding-top:26px!important}
.ot-y{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#1d1406}
.ot-y svg{width:13px;height:13px}
.ot-n{font-size:18px;color:rgba(27,26,23,.28)}
.ot-opt{display:inline-flex;align-items:baseline;gap:5px;padding:6px 10px;border-radius:999px;border:1px dashed rgba(147,97,14,.55);font-size:12.5px;color:var(--gold-ink);white-space:nowrap}
.ot-opt b{font-weight:600}
.ot-t{font-weight:500}
.ot-switch{display:none}
@media (max-width:760px){
  .ot-switch{position:sticky;top:68px;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:10px 0;background:var(--paper)}
  .flow.alt .ot-switch{background:var(--paper-2)}
  .ot-switch button{display:grid;gap:4px;align-content:start;padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:var(--card);font:600 13px/1.15 var(--f-body);color:var(--ink);cursor:pointer;transition:background .3s,color .3s}
  .ot-switch button small{font:400 11.5px/1.2 var(--f-body);color:var(--ink-2)}
  .ot-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
  .ot-switch button[aria-pressed="true"] small{color:#c9c1b4}
  .otable thead{display:none}
  .otable[data-col="1"] .c2,.otable[data-col="1"] .c3,.otable[data-col="2"] .c1,.otable[data-col="2"] .c3,.otable[data-col="3"] .c1,.otable[data-col="3"] .c2{display:none}
  .otable tbody th{width:auto;padding-right:14px}
  .otable td{width:40%;text-align:right;padding-right:0;padding-left:8px}
  .otable td.reco{background:transparent}
  .ot-opt{white-space:normal}
}
.flow.alt .otable thead th.reco{background:var(--ink)}

.choice.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.otable.n2 td{width:28%}
@media (max-width:760px){.otable.n2 .ot-switch{grid-template-columns:repeat(2,minmax(0,1fr))}.choice.two{grid-template-columns:minmax(0,1fr)}}

/* =================== marketing pass: founders offer, flagship, Damien, SMS =================== */
.no-fond [data-fond]{display:none!important}

/* hero: launch offer pill + Damien */
.hero-pill{position:relative;z-index:2;align-self:center;display:inline-flex;align-items:center;gap:12px;max-width:100%;margin:0 auto 20px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--card);border:1px solid var(--line);text-decoration:none;font-size:13.5px;color:var(--ink-2);box-shadow:0 12px 30px -18px rgba(50,35,15,.5);transition:transform .5s var(--ease),border-color .3s}
.hero-pill:hover{transform:translateY(-2px);border-color:rgba(147,97,14,.45)}
.hero-pill b{flex:none;font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:#1a1205;padding:7px 10px;border-radius:999px}
.hero-pill svg{flex:none;width:14px;height:14px;color:var(--gold-ink)}
.hero-me{display:flex;align-items:center;gap:14px;max-width:31rem}
.hero-me img{flex:none;width:60px;height:60px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 3px var(--paper),0 0 0 4px rgba(147,97,14,.4)}
.hero-me p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.hero-me b{color:var(--ink);font-weight:600}

/* flagship formula */
.flagship{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);padding:clamp(28px,4vw,54px);border-radius:24px;background:var(--ink);color:var(--paper);overflow:hidden;box-shadow:0 60px 120px -50px rgba(27,26,23,.65)}
.flagship::before{content:"";position:absolute;left:-18%;bottom:-70%;width:75%;aspect-ratio:1;background:radial-gradient(circle,rgba(214,160,60,.24),transparent 65%);pointer-events:none}
.fs-main,.fs-side{position:relative;min-width:0}
.fs-k{font:500 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.flagship h3{margin:16px 0 0;font:800 clamp(1.9rem,3vw,2.8rem)/1 var(--f-body);letter-spacing:-.035em}
.flagship h3 em{display:block;margin-top:6px;font:italic 400 1.08em/1 var(--f-display);letter-spacing:-.01em;color:var(--gold)}
.fs-price{display:flex;align-items:flex-end;flex-wrap:wrap;gap:8px 18px;margin-top:30px}
.fs-price b{font:400 clamp(4.2rem,7vw,6.6rem)/.8 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-weight:400}
.fs-price span{padding-bottom:4px;font-size:18px;line-height:1.3;color:#e3dbcd}
.fs-price small{display:block;margin-top:4px;font-size:13px;color:#9f978a}
.fs-fond{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;width:max-content;max-width:100%;margin:24px 0 0;padding:11px 14px;border-radius:12px;background:rgba(214,160,60,.14);border:1px solid rgba(214,160,60,.38);font-size:14px;color:#f3e3c3}
.fs-fond b{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.fs-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.fs-h{margin:4px 0 14px;font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#9f978a}
.fs-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(239,232,220,.14)}
.fs-list li{position:relative;padding:15px 0 15px 36px;border-bottom:1px solid rgba(239,232,220,.14);font-size:15px;line-height:1.45;color:#c9c1b4}
.fs-list li b{font-weight:600;color:var(--paper)}
.fs-list li::before{content:"";position:absolute;left:0;top:15px;width:22px;height:22px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1406' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.ptease.mini{margin-top:18px}
.ptease.mini a{padding:22px}
.ptease.mini b{font-size:clamp(2.2rem,3vw,2.8rem)}
.ptease.mini b i{margin:0 2px 0 0}

/* founders card (tarifs) */
.fond-card{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:clamp(24px,4vw,60px);align-items:center;margin-top:18px;padding:clamp(26px,3.6vw,46px);border-radius:24px;background:linear-gradient(135deg,rgba(214,160,60,.24),rgba(214,160,60,.07));border:1px solid rgba(147,97,14,.35);scroll-margin-top:100px}
.fond-card .fs-k{color:var(--gold-ink)}
.fond-card h3{margin:14px 0 0;font:800 clamp(1.9rem,3.2vw,2.9rem)/1.02 var(--f-body);letter-spacing:-.035em}
.fond-card h3 em{font:italic 400 1.15em/1 var(--f-display);letter-spacing:-.01em;color:var(--gold-ink)}
.fond-card h3 s{margin-left:6px;font:400 .62em/1 var(--f-display);color:var(--muted)}
.fond-card p{max-width:42rem;margin:16px 0 0;color:var(--ink-2)}
.fc-deal{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.fc-deal li{display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13.5px;font-weight:500}
.fc-deal li::before{content:"✓";color:var(--gold-ink);font-weight:700}
.fc-side{display:grid;gap:16px;justify-items:start}
.fc-places{display:flex;align-items:baseline;gap:12px}
.fc-places b{font:400 clamp(4.6rem,7vw,6.4rem)/.8 var(--f-display);color:var(--gold-ink);font-weight:400}
.fc-places span{max-width:9rem;font:500 11px/1.35 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.fc-side small{font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.card .alt.fond{color:var(--gold);font-weight:500}
.card:not(.reco) .alt.fond{color:var(--gold-ink)}

/* contact: Damien's card */
.me-card{display:flex;align-items:center;gap:16px;max-width:30rem;margin-top:30px}
.me-card img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 20%;box-shadow:0 0 0 3px var(--paper),0 0 0 4px rgba(147,97,14,.4)}
.me-card b{display:block;font-size:17px}
.me-card span{display:block;font-size:14px;color:var(--ink-2)}
.me-card small{display:block;margin-top:3px;font:italic 400 1.15rem/1.2 var(--f-display);color:var(--gold-ink)}
.me-card+.reach{margin-top:20px}
a.copybtn{text-decoration:none;white-space:nowrap}

/* shorter scroll scenes (desktop a little, phones a lot) */
.s1{height:300vh}
.s2{height:250vh}

@media (max-width:1000px){
  .flagship,.fond-card{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .s1{height:210vh}
  .s2{height:190vh}
  .hero-pill{font-size:12.5px;gap:9px;padding-right:10px;margin-bottom:16px;text-align:left}
  .hero-pill span{line-height:1.3}
  .hero-me img{width:52px;height:52px}
  .hero-me p{font-size:14px}
  .callbar{grid-template-columns:1fr .8fr 1.6fr}
  .callbar .btn{font-size:14px;padding:1em .6em}
  .m-foot .btn{padding:.95em 1.2em}
}

/* hero: keep Damien above the 3D carousel */
.ring-stage{z-index:1}
.hero-foot{z-index:3}
.hero-me{padding:12px 20px 12px 12px;border-radius:22px;background:rgba(247,243,236,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 24px 50px -28px rgba(50,35,15,.55)}
@media (max-width:760px){.hero-me{padding:10px 14px 10px 10px}}

/* flagship: payment toggle */
.fs-pay{display:inline-flex;gap:4px;margin-top:26px;padding:4px;border-radius:999px;background:rgba(239,232,220,.07);border:1px solid rgba(239,232,220,.16)}
.fs-pay button{font:600 13.5px/1 var(--f-body);color:#cfc7ba;background:transparent;border:0;padding:11px 16px;border-radius:999px;cursor:pointer;transition:background .35s,color .35s}
.fs-pay button:hover{color:var(--paper)}
.fs-pay button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.flagship .fs-price{margin-top:22px}
.swap-in{animation:sw .6s var(--ease)}

/* ============================ HOME v3: cinematic ============================ */
/* 1 · the window */
.hw{position:relative;height:290vh}
.hw-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hw-head{position:absolute;left:0;right:0;top:0;z-index:3;padding-top:clamp(96px,13.5vh,150px);text-align:center;will-change:transform,opacity}
.hw-head .eyebrow{justify-content:center;margin-bottom:clamp(14px,2.2vh,22px)}
.hw-title{margin:0}
.hw-title .a{display:block;font:800 clamp(2.4rem,6.3vw,7.3rem)/.9 var(--f-body);letter-spacing:-.05em}
.hw-title .b{display:block;font:italic 400 clamp(2.8rem,7.3vw,8.5rem)/.96 var(--f-display);letter-spacing:-.02em;color:var(--gold-ink)}
.js .hw-title .a,.js .hw-title .b,.js .hw-head .eyebrow{animation:hwIn 1.4s var(--ease) both}
.js .hw-title .b{animation-delay:.12s}
.js .hw-head .eyebrow{animation-delay:.24s}
.seen .hw-title .a,.seen .hw-title .b,.seen .hw-head .eyebrow{animation-duration:.9s}
@keyframes hwIn{from{opacity:0;transform:translateY(40px)}}
.hw-frame,.hw-view{position:absolute;inset:0;will-change:clip-path;clip-path:inset(46% 10% 8% 10% round 30px)}
.hw-frame{z-index:1;background:linear-gradient(160deg,#e0ad4a,#c48f2c)}
.hw-view{z-index:2;background:#2a2622;overflow:hidden}
.hw-view img,.hw-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center;transform:scale(1.16);transform-origin:50% 60%}
.hw-view video{opacity:0;transition:opacity 1s}
.hw-view video.on{opacity:1}
.hw-shade{position:absolute;inset:0;opacity:0;background:linear-gradient(90deg,rgba(14,12,10,.75) 0%,rgba(14,12,10,.35) 48%,rgba(14,12,10,0) 75%),linear-gradient(0deg,rgba(14,12,10,.55),rgba(14,12,10,0) 45%)}
.hw-dark{position:absolute;inset:0;background:var(--night);opacity:0}
.hw-site{position:absolute;inset:0;opacity:0;color:#fff}
.hw-txt{position:absolute;left:max(var(--gut),env(safe-area-inset-left,0px));bottom:15vh;max-width:min(680px,84vw)}
.hw-txt small{font:500 12px/1.3 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:#cfe1ea}
.hw-txt b{display:block;margin:16px 0 18px;font:italic 400 clamp(3.4rem,8.4vw,8.6rem)/.9 var(--f-display);letter-spacing:-.02em;font-weight:400}
.hw-txt p{margin:0;max-width:30rem;font-size:clamp(1rem,1.3vw,1.2rem);opacity:.92}
.hw-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hw-btns i{font:600 15px/1 var(--f-body);font-style:normal;padding:15px 22px;border-radius:999px;background:#2f5e70}
.hw-btns i+i{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.45)}
.hw-fict{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));bottom:15vh;font:500 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.35);padding:8px 10px;border-radius:6px}
.hw-dots{position:absolute;left:0;top:0;z-index:3;display:flex;gap:clamp(6px,.7vw,10px);will-change:transform,opacity}
.hw-dots i{width:clamp(9px,.9vw,13px);height:clamp(9px,.9vw,13px);border-radius:50%;background:#f7f0e2}
.hw-end{position:absolute;inset:0;z-index:4;display:grid;place-content:center;padding:0 var(--gut);text-align:center;color:var(--night-ink);opacity:0;pointer-events:none}
.hw-end p{margin:0;font:800 clamp(2.4rem,6.2vw,6.8rem)/.95 var(--f-body);letter-spacing:-.045em}
.hw-end p em{font:italic 400 1.2em/1 var(--f-display);letter-spacing:-.02em;color:var(--gold)}
.hw-end small{display:block;margin-top:26px;font:500 12px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:#a79f92}
.hw-hint{position:absolute;left:50%;bottom:2.4vh;z-index:3;transform:translateX(-50%);display:flex;align-items:center;gap:12px;font:500 10.5px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.hw-hint i{width:1px;height:22px;background:currentColor;transform-origin:top;animation:hint 1.8s var(--ease) infinite}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* 2 · the ring */
.hr{position:relative;height:250vh;background:var(--night);color:var(--night-ink)}
.hr-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;padding-top:clamp(92px,13vh,130px);padding-bottom:max(30px,env(safe-area-inset-bottom,0px));overflow:hidden}
.hr-pin::before{content:"";position:absolute;left:50%;top:58%;width:min(1200px,130vw);aspect-ratio:2/1;transform:translate(-50%,-50%);background:radial-gradient(ellipse,rgba(214,160,60,.16),rgba(214,160,60,0) 62%);pointer-events:none}
.hr-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.hr-head h2{color:var(--night-ink);font-size:clamp(2.2rem,4.6vw,4.8rem)}
.hr-head h2 em{color:var(--gold)}
.hr-head p{max-width:23rem;margin:0;color:#b8b0a3}
.hr .ring-stage{perspective-origin:50% 42%}
.hr .rcard{box-shadow:0 60px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.hr-foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px}
.hr-now{display:flex;align-items:baseline;gap:16px}
.hr-now b{font:italic 400 clamp(2.6rem,4vw,3.8rem)/1 var(--f-display);color:var(--gold);font-weight:400}
.hr-now span{font:italic 400 clamp(1.7rem,2.8vw,2.6rem)/1 var(--f-display)}
.hr .btn-line{color:var(--night-ink)}
.hr .btn-line:hover{background:var(--night-ink);color:var(--ink);border-color:var(--night-ink)}

/* 3 · Damien + towns */
.ht{padding-block:clamp(80px,14vh,150px);overflow:hidden}
.ht-me{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:1100px;margin:clamp(40px,7vh,70px) auto}
.ht-face{margin:0;width:clamp(120px,14vw,190px);aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px var(--paper),0 0 0 7px rgba(147,97,14,.4),0 40px 70px -30px rgba(50,35,15,.6)}
.ht-face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.ht-quote{margin:0;font:400 clamp(1.6rem,3.2vw,3rem)/1.15 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.ht-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font:600 15px/1 var(--f-body);text-decoration:none;color:var(--gold-ink);border-bottom:1px solid currentColor;padding-bottom:6px}
.ht-link svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.ht-link:hover svg{transform:translateX(4px)}

/* 4 · doors */
.hd{padding-block:clamp(60px,10vh,110px) clamp(90px,14vh,160px)}
.hd-head{margin-bottom:clamp(30px,5vh,54px)}
.hd-head .eyebrow{margin-bottom:22px}
.doors{display:flex;gap:12px;height:min(74vh,740px)}
.door{position:relative;flex:1;min-width:0;border-radius:24px;overflow:hidden;text-decoration:none;color:#fff;background:#2a2622;transition:flex .9s var(--ease),transform .6s var(--ease)}
.doors:not(:hover) .door:first-child,.doors .door:hover,.doors .door:focus-visible{flex:2.6}
.door .dm{position:absolute;inset:0}
.door .dm img,.door .dm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.door:hover .dm img,.door:hover .dm video{transform:scale(1.06)}
.door::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(14,12,10,.86) 0%,rgba(14,12,10,.2) 55%,rgba(14,12,10,.04))}
.door .dt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2.4vw,34px)}
.door small{font:500 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--gold)}
.door h3{margin:10px 0 0;font:italic 400 clamp(1.9rem,2.6vw,3.1rem)/1 var(--f-display);letter-spacing:-.01em}
.door p{max-width:25rem;margin:12px 0 0;font-size:15px;line-height:1.5;color:#e9e1d3;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .8s var(--ease)}
.door .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:12px 17px;border-radius:999px;background:var(--gold);color:#1d1406;font:600 14px/1 var(--f-body);opacity:0;transform:translateY(12px);transition:opacity .45s .06s,transform .8s var(--ease)}
.door .go svg{width:14px;height:14px}
.doors:not(:hover) .door:first-child p,.doors:not(:hover) .door:first-child .go,.door:hover p,.door:hover .go,.door:focus-visible p,.door:focus-visible .go{opacity:1;transform:none}
.door.auto{background:radial-gradient(circle at 50% 40%,#2c2820,#141310 70%)}
.dm-auto svg{position:absolute;inset:0;width:100%;height:100%}
.dm-auto .p{stroke-dasharray:70 1100;animation:dmPulse 3.6s linear infinite}
.dm-auto .d2{animation-delay:-.9s}.dm-auto .d3{animation-delay:-1.6s}.dm-auto .d4{animation-delay:-2.2s}.dm-auto .d5{animation-delay:-2.8s}
@keyframes dmPulse{from{stroke-dashoffset:1170}to{stroke-dashoffset:0}}
.dm-hub{position:absolute;left:50%;top:40%;width:clamp(76px,7vw,104px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:30%;background:#211f1b;border:1px solid rgba(214,160,60,.45);box-shadow:0 0 0 10px rgba(214,160,60,.05),0 0 90px -10px rgba(214,160,60,.55)}
.dm-hub img{width:58%;height:auto}
.door.tarifs{background:linear-gradient(160deg,#e9bd62,#b67e1d)}
.door.tarifs::after{background:linear-gradient(0deg,rgba(54,34,6,.7),rgba(54,34,6,0) 60%)}
.dm-euro{position:absolute;right:-4%;top:-10%;font:italic 400 min(62vh,620px)/1 var(--f-display);color:rgba(255,255,255,.24);animation:floaty 9s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-16px) rotate(-3deg)}}
.fond-chip{display:inline-block;margin-bottom:14px;padding:7px 10px;border-radius:999px;background:#1b1a17;color:var(--gold);font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}

/* 5 · call to action */
.hc{padding-block:clamp(90px,15vh,170px);background:var(--paper-2);overflow:hidden}
.hc-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(30px,6vw,100px);align-items:center}
.hc .eyebrow{margin-bottom:22px}
.hc h2{font-size:clamp(2.6rem,6vw,6.2rem)}
.hc .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.hc-mark svg{display:block;width:100%;max-width:440px;height:auto;margin-inline:auto;filter:drop-shadow(0 40px 60px rgba(150,95,10,.32))}
.hc-mark .sun{transform:translateY(271px);transition:transform 2.4s var(--ease) .35s}
.hc-mark.in .sun{transform:none}

@media (max-width:900px){
  .doors{flex-direction:column;height:auto}
  .door,.doors:not(:hover) .door:first-child,.doors .door:hover{flex:none;height:min(52vh,420px);min-height:300px}
  .door p,.door .go{opacity:1;transform:none}
  .hc-grid{grid-template-columns:minmax(0,1fr)}
  .hc-mark svg{max-width:240px}
  .hr-head{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:760px){
  .hw{height:240vh}
  .hw-head{padding-top:96px}
  .hw-txt{bottom:17vh}
  .hw-fict{left:var(--gut);right:auto;bottom:10vh}
  .hr{height:200vh}
  .hr-head p{font-size:14.5px}
  .ht-me{grid-template-columns:minmax(0,1fr);justify-items:start}
}
@media (prefers-reduced-motion:reduce){
  .hw,.hr{height:auto}
  .hw-pin,.hr-pin{position:relative;height:100vh}
}

/* ============================ TARIFS v3: simple ============================ */
.tphero{padding-bottom:clamp(30px,5vh,56px)}
.pz{padding-top:10px}
.ptabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--card);border:1px solid var(--line);margin-bottom:clamp(26px,4vh,40px)}
.ptabs button{font:600 15px/1 var(--f-body);padding:13px 22px;border-radius:999px;border:0;background:transparent;color:var(--ink-2);cursor:pointer;transition:background .35s,color .35s}
.ptabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.ppanel[hidden]{display:none}
.fond-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-bottom:22px;padding:14px 18px;border-radius:16px;background:linear-gradient(135deg,rgba(214,160,60,.24),rgba(214,160,60,.08));border:1px solid rgba(147,97,14,.32);scroll-margin-top:100px}
.fb-k{font:500 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;background:var(--gold);color:#1a1205;padding:7px 10px;border-radius:999px}
.fond-bar p{flex:1;min-width:16rem;margin:0;font-size:14.5px;color:var(--ink-2)}
.fond-bar p b{color:var(--ink)}
.fond-bar p em{font-style:normal;font-weight:600;color:var(--gold-ink);white-space:nowrap}
.fond-bar a{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--f-body);color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.fond-bar a svg{width:14px;height:14px}
.pay-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-bottom:22px}
.fs-pay.light{margin:0;background:var(--card);border-color:var(--line)}
.fs-pay.light button{color:var(--ink-2)}
.fs-pay.light button:hover{color:var(--ink)}
.fs-pay.light button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.pay-note{margin:0;max-width:40rem;font-size:14.5px;color:var(--ink-2)}
.pay-note.solo{margin:0 0 22px}
.pay-note.solo+.plans+.pay-note.solo,.plans+.pay-note.solo{margin:18px 0 0}
.pay-note a{color:var(--gold-ink)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;min-width:0;padding:30px 28px 28px;border-radius:22px;background:var(--card);border:1px solid var(--line);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.plan:hover{transform:translateY(-6px);box-shadow:0 34px 70px -36px rgba(50,35,15,.45)}
.plan.reco{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 40px 80px -40px rgba(27,26,23,.7)}
.plan .k{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.plan.reco .k{color:var(--gold)}
.plan h3{margin:12px 0 0;font:italic 400 clamp(2rem,2.6vw,2.6rem)/1 var(--f-display);letter-spacing:-.01em}
.pp{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:22px 0 4px;min-height:5.2rem}
.pp b{font:400 clamp(3.4rem,4.6vw,4.6rem)/.9 var(--f-display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;font-weight:400;white-space:nowrap}
.pp b i{font-size:.36em;font-style:normal;letter-spacing:.06em;text-transform:uppercase;opacity:.6;margin-right:4px}
.pp span{font-size:14.5px;line-height:1.35;color:var(--ink-2)}
.plan.reco .pp span{color:#c9c1b4}
.pfond{margin:8px 0 0;font:500 12.5px/1.4 var(--f-mono);color:var(--gold)}
.pd{margin:14px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.plan.reco .pd{color:#c9c1b4}
.plan ul{list-style:none;margin:20px 0 26px;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:14.5px}
.plan.reco ul{border-top-color:rgba(239,232,220,.14)}
.plan li{position:relative;padding-left:26px;line-height:1.4}
.plan li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1406' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat}
.plan .btn{margin-top:auto;align-self:flex-start}
.plan .badge{top:26px;right:24px}
.incl{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:22px 0 0;padding:0}
.incl li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border-radius:16px;border:1px solid var(--line);font-size:13.5px;font-weight:500;line-height:1.3}
.incl svg{width:22px;height:22px;color:var(--gold-ink)}
.more-d{margin-top:22px;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.more-d summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;font-weight:600;font-size:16px}
.more-d summary::-webkit-details-marker{display:none}
.more-d summary i{position:relative;width:16px;height:16px;flex:none}
.more-d summary i::before,.more-d summary i::after{content:"";position:absolute;left:0;top:7px;width:16px;height:1.6px;background:currentColor;transition:transform .5s var(--ease)}
.more-d summary i::after{transform:rotate(90deg)}
.more-d[open] summary i::after{transform:rotate(0)}
.more-d summary:hover{color:var(--gold-ink)}
.md-in{padding:0 24px 26px}
.md-in h4{margin:30px 0 4px;font:italic 400 1.8rem/1.1 var(--f-display)}
.md-in h4:first-child{margin-top:6px}
.md-note{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
.more-d .otable thead th,.more-d .ot-switch{background:var(--card)}
.more-d .otable thead th.reco{background:var(--ink)}
.more-d .opts{margin-top:12px}

/* automatisation: link to the prices */
.cta-band{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:30px clamp(30px,5vw,80px);align-items:end}
.cb-acts{display:flex;flex-wrap:wrap;gap:10px}

/* qui suis-je page */
.about-top{padding-top:clamp(130px,19vh,200px)}
.h2like{margin:0;font-weight:800;font-size:clamp(2.4rem,5.4vw,5.6rem);line-height:.95;letter-spacing:-.04em;text-wrap:balance}
.h2like em{font-family:var(--f-display);font-style:italic;font-weight:400;letter-spacing:-.015em;color:var(--gold-ink)}
.vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.vals>div{padding:28px 24px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.vals b{display:block;margin-bottom:16px;font:italic 400 2.6rem/1 var(--f-display);color:var(--gold-ink);font-weight:400}
.vals h3{margin:0 0 8px;font-size:18px;letter-spacing:-.01em}
.vals p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}

@media (max-width:1100px){
  .incl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vals{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .plans{grid-template-columns:minmax(0,1fr);max-width:560px}
  .cta-band{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .ptabs{display:flex}
  .ptabs button{flex:1;padding:12px 10px;font-size:14px}
  .incl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vals{grid-template-columns:minmax(0,1fr)}
  .md-in{padding:0 16px 20px}
  .more-d summary{padding:18px 16px}
  .fs-pay.light{display:flex;width:100%}
  .fs-pay.light button{flex:1;padding:12px 8px}
}

.hw-head{z-index:0}
.fond-chip{white-space:nowrap}

@media (max-width:760px){.hw-head .eyebrow b{display:none}.hr-pin{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}}

@media (max-width:760px){.hw-view img,.hw-view video{object-position:50% 40%}}

/* ============ HOME v4: brand title, bigger ring, towns band, café video ============ */
.hw-brand{margin:0;line-height:.86;letter-spacing:-.045em;white-space:nowrap}
.hw-brand span{display:inline-block;overflow:hidden;padding:.06em .02em .1em;margin:-.06em 0 -.1em;vertical-align:top}
.hw-brand .hb-a{font:800 clamp(3rem,10.4vw,12.2rem)/.86 var(--f-body)}
.hw-brand .hb-b{font:italic 400 clamp(3.4rem,11.6vw,13.6rem)/.86 var(--f-display);letter-spacing:-.025em;color:var(--gold-ink)}
.hw-brand i{display:inline-block;font-style:inherit;transform-origin:50% 100%}
.js .hw-brand i{animation:charIn 1.3s var(--ease) both;animation-delay:calc(var(--i) * .05s + .1s)}
.js:not(.ld-done) .hw-brand i,.js:not(.ld-done) .hw-tag{animation-play-state:paused}
@keyframes charIn{from{transform:translateY(110%) rotate(8deg);opacity:0}}
.hw-tag{margin:clamp(12px,1.8vh,20px) 0 0;font:500 clamp(1rem,1.5vw,1.35rem)/1.3 var(--f-body);color:var(--ink-2)}
.hw-tag em{font:italic 400 1.18em/1 var(--f-display);color:var(--ink)}
.js .hw-tag{animation:hwIn 1.2s var(--ease) .75s both}

/* bigger ring: more room for the stage */
.hr{height:270vh}
.hr-pin{padding-top:clamp(84px,11vh,112px)}
.hr-head h2{font-size:clamp(2rem,3.8vw,4rem)}
.hr .ring-stage{margin-top:0;perspective:2200px;perspective-origin:50% 45%}

/* towns band */
.ht{padding-block:clamp(56px,9vh,96px) clamp(24px,4vh,40px)}
.ht-k{justify-content:center;margin-bottom:clamp(14px,2.4vh,24px)}

/* café call to action */
.hcv{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#1d1a15;color:var(--night-ink)}
.hcv-media{position:absolute;inset:0;transform:scale(1.18);transform-origin:70% 60%;will-change:transform}
.hcv-media img,.hcv-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.hcv-media video{opacity:0;transition:opacity 1s}
.hcv-media video.on{opacity:1}
.hcv-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,10,.82) 0%,rgba(14,12,10,.55) 40%,rgba(14,12,10,.08) 72%),linear-gradient(0deg,rgba(14,12,10,.55),rgba(14,12,10,0) 40%)}
.hcv-in{position:relative;z-index:1;width:100%;padding-block:clamp(110px,16vh,170px)}
.hcv .eyebrow{color:var(--gold);margin-bottom:22px}
.hcv h2{max-width:11ch;color:var(--night-ink);font-size:clamp(2.8rem,6.6vw,7rem)}
.hcv h2 em{color:var(--gold)}
.hcv .lead{max-width:30rem;margin-top:26px;color:#d8d0c3}
.hcv .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
.hcv .btn-line{color:var(--night-ink)}
.hcv .btn-line:hover{background:var(--night-ink);color:var(--ink);border-color:var(--night-ink)}

@media (max-width:760px){
  .hw-brand{white-space:normal}
  .hw-brand .hb-a,.hw-brand .hb-b{display:block;margin:0 auto}
  .hw-brand .hb-a{font-size:clamp(3.2rem,17vw,5rem)}
  .hw-brand .hb-b{font-size:clamp(3.6rem,19vw,5.6rem);margin-top:-.08em}
  .hw-tag{font-size:15px;padding:0 10px}
  .hcv{min-height:90vh}
  .hcv-media img,.hcv-media video{object-position:78% center}
  .hcv-shade{background:linear-gradient(0deg,rgba(14,12,10,.88) 0%,rgba(14,12,10,.55) 55%,rgba(14,12,10,.25) 100%)}
  .hcv-in{align-self:flex-end;padding-bottom:110px}
}
/* doors: compact titles while closed, large once open */
.door .dt{padding:clamp(18px,1.9vw,30px)}
.door h3{font-size:clamp(1.45rem,1.9vw,2.1rem);transition:font-size .6s var(--ease)}
.doors:not(:hover) .door:first-child h3,.doors .door:hover h3,.doors .door:focus-visible h3{font-size:clamp(1.9rem,2.8vw,3.2rem)}
@media (max-width:900px){.door h3,.doors:not(:hover) .door:first-child h3,.doors .door:hover h3{font-size:clamp(1.9rem,7vw,2.6rem)}}

/* ============ gold thread (all pages) ============ */
.thread{position:absolute;left:0;top:0;z-index:6;pointer-events:none;overflow:visible}
.th-route{fill:none;stroke:rgba(214,160,60,.22);stroke-width:1.2;stroke-dasharray:2 7}
.th-line{fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.th-head{fill:#ffe3a6;transition:opacity .3s}
.th-glow{fill:rgba(214,160,60,.28);transition:opacity .3s}
.th-node circle{fill:var(--paper);stroke:var(--gold);stroke-width:1.5;transition:fill .5s}
.th-node.on circle{fill:var(--gold)}
.th-node text{font:500 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;fill:var(--gold);opacity:0;transition:opacity .6s}
.th-node.on text{opacity:1}
.th-node.end circle{fill:transparent;stroke-width:1.5}
.th-node.end.on circle{fill:var(--gold)}
.foot-brand img{transition:filter 1s,transform 1s var(--ease)}
.foot.th-done .foot-brand img{filter:drop-shadow(0 0 24px rgba(214,160,60,.55));transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.th-head,.th-glow{display:none}}

/* ============ intro v5: lake inside the letters ============ */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hw2{height:300vh}
.hm{position:absolute;inset:0;z-index:1;background:#2a2622;-webkit-mask:url(/assets/brand-mask.svg) no-repeat;mask:url(/assets/brand-mask.svg) no-repeat;-webkit-mask-size:80vw auto;mask-size:80vw auto;-webkit-mask-position:center 40%;mask-position:center 40%;will-change:mask-size,mask-position}
.hm.open{-webkit-mask:none;mask:none}
.hm img,.hm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:scale(1.1)}
.hm video{opacity:0;transition:opacity 1.2s}
.hm video.on{opacity:1}
.js .hm{animation:hmIn 1.6s var(--ease) .05s both}
.js:not(.ld-done) .hm,.js:not(.ld-done) .hw-tag2{animation-play-state:paused}
@keyframes hmIn{from{opacity:0;filter:blur(14px)}}
.hw-tag2{position:absolute;left:0;right:0;top:78%;z-index:3;margin:0;display:grid;justify-items:center;gap:12px;text-align:center;padding:0 var(--gut)}
.hw-tag2 .k{font:500 11px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink)}
.hw-tag2 .t{font:500 clamp(1.05rem,1.6vw,1.45rem)/1.3 var(--f-body);color:var(--ink-2)}
.hw-tag2 em{font:italic 400 1.18em/1 var(--f-display);color:var(--ink)}
.js .hw-tag2{animation:hwIn 1.2s var(--ease) .7s both}
.hw2 .hw-site,.hw2 .hw-end{z-index:4}
.hw2 .hw-shade{z-index:1}.hw2 .hw-dark{z-index:2}
@media (max-width:760px){
  .hw2{height:250vh}
  .hw-tag2 .t{font-size:15px}
}

/* ============ inner pages: gold window hero ============ */
.phero.has-media{padding-bottom:clamp(40px,7vh,90px)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,90px);align-items:center}
.has-media h1{font-size:clamp(2.6rem,5.2vw,6.2rem);max-width:12ch}
.has-media .lead{max-width:34rem}
.ph-win{position:relative;max-width:560px;justify-self:end;width:100%;padding:0 12px 12px;border-radius:30px;background:linear-gradient(160deg,#e6b85a,#c48f2c);box-shadow:0 60px 110px -50px rgba(120,80,10,.65),0 0 0 1px rgba(150,95,10,.25);transform:perspective(1200px) translate3d(0,var(--ty,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .9s var(--ease);will-change:transform}
.js .ph-win{animation:pwIn 1.6s var(--ease) .25s backwards}
@keyframes pwIn{from{opacity:0;transform:perspective(1200px) translate3d(0,70px,0) rotateX(16deg) scale(.94)}}
.pw-bar{display:flex;align-items:center;gap:9px;height:46px;padding-left:12px}
.pw-bar i{width:13px;height:13px;border-radius:50%;background:#f7f0e2}
.pw-view{position:relative;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:#2a2622}
.pw-view img,.pw-view video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pw-view video{opacity:0;transition:opacity 1s}
.pw-view video.on{opacity:1}
.ph-win::after{content:"";position:absolute;inset:46px 12px 12px;border-radius:20px;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%)}
@media (max-width:1000px){
  .ph-grid{grid-template-columns:minmax(0,1fr)}
  .ph-win{justify-self:start;max-width:440px}
}
@media (max-width:760px){
  .ph-win{max-width:none;border-radius:24px;padding:0 9px 9px}
  .pw-bar{height:36px}
  .pw-view{aspect-ratio:4/3;border-radius:16px}
  .ph-win::after{inset:36px 9px 9px;border-radius:16px}
}
/* intro v5b: paper stencil with the letters cut out, over a full video layer (no CSS mask) */
.hm{-webkit-mask:none!important;mask:none!important;background:var(--paper);animation:hmFade 1.6s var(--ease) .1s both!important}
.js:not(.ld-done) .hm{animation-play-state:paused!important}
@keyframes hmFade{from{opacity:0}}
.hm-stencil{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.hm-stencil path{fill:var(--paper)}

.hm-tint{position:absolute;inset:0;background:rgba(84,52,18,.26);mix-blend-mode:multiply;pointer-events:none}
@media (max-width:760px){.hm-tint{background:rgba(70,42,14,.34)}}
/* thread v2: river of light */
.th-route{stroke:rgba(214,160,60,.2);stroke-width:1.1;stroke-dasharray:1.5 8}
.th-halo{fill:none;stroke:rgba(230,176,72,.22);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.th-line{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.th-comet{fill:none;stroke:#eaa431;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s}
.th-comet2{fill:none;stroke:#fff1c9;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s}
.th-head{fill:#fffaf0;stroke:#e39a24;stroke-width:1.6}
.th-glow{transform-box:fill-box;transform-origin:center;animation:thPulse 1.8s ease-in-out infinite}
@keyframes thPulse{50%{transform:scale(1.35)}}
.th-spark{fill:#e9a02c}
.th-node .dot{fill:var(--paper);stroke:var(--gold);stroke-width:1.6;transition:fill .5s}
.th-node.on .dot{fill:var(--gold)}
.th-node .ring{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center}
.th-node.on .ring{animation:thRing 1.3s cubic-bezier(.16,1,.3,1)}
@keyframes thRing{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(5.5)}}
.th-node text{transform-box:fill-box;transform:translateX(-10px);transition:opacity .7s,transform .9s cubic-bezier(.16,1,.3,1)}
.th-node.r text{transform:translateX(10px)}
.th-node.on text{transform:none}
@media (prefers-reduced-motion:reduce){.th-comet,.th-comet2,.th-glow{display:none}}

/* ---------- dark section + bento of live automation scenes (automatisation) ---------- */
.flow.dark{background:var(--night);color:var(--night-ink)}
.flow.dark h2{color:var(--night-ink)}
.flow.dark .eyebrow{color:var(--gold)}
.flow.dark h2 em{color:var(--gold)}
.flow.dark .lead{color:#b0a89b}
.bento-sec{overflow:hidden}
.bento-sec::before{content:"";position:absolute;left:50%;top:-10%;width:110%;height:60%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(214,160,60,.12),transparent);pointer-events:none}
.bento{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(300px,auto);gap:14px;
  grid-template-areas:"a a b b" "a a c d" "g g e f" "h h e f"}
.bt-a{grid-area:a}.bt-b{grid-area:b}.bt-c{grid-area:c}.bt-d{grid-area:d}.bt-e{grid-area:e}.bt-f{grid-area:f}.bt-g{grid-area:g}.bt-h{grid-area:h}
.bento .bt:nth-child(2),.bento .bt:nth-child(5){transition-delay:.08s}
.bento .bt:nth-child(3),.bento .bt:nth-child(6){transition-delay:.16s}
.bento .bt:nth-child(4),.bento .bt:nth-child(8){transition-delay:.24s}
.bt{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;border-radius:24px;overflow:hidden;
  background:linear-gradient(180deg,#25221d,#1b1915);border:1px solid rgba(239,232,220,.08);container-type:inline-size}
.bt.wide{flex-direction:row}
.bt-vis{position:relative;z-index:2;flex:1;min-width:0;padding:24px 24px 0}
.bt-txt{position:relative;z-index:2;padding:22px 24px 24px}
.bt.wide .bt-txt{width:42%;flex:none;display:flex;flex-direction:column;justify-content:flex-end;order:-1}
.bt.wide .bt-vis{padding:24px 24px 24px 4px;display:flex;align-items:center}
.bt-for{font:500 10.5px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.bt h3{margin:8px 0 0;font-size:clamp(18px,1.4vw,21px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:#f5efe4}
.bt-a h3{font-size:clamp(24px,2.3vw,34px);letter-spacing:-.03em}
.bt-txt p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:#a59d90;max-width:38ch}

/* video tiles */
.bt-media{position:absolute;inset:0;z-index:0}
.bt-media img,.bt-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s,transform 1.6s var(--ease)}
.bt-media video{opacity:0}.bt-media video.on{opacity:1}
.bt-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,15,12,.5) 0%,rgba(17,15,12,.12) 34%,rgba(17,15,12,.7) 66%,#17150f 100%)}
.bt.media:hover .bt-media img,.bt.media:hover .bt-media video{transform:scale(1.05)}

/* spotlight: a gold light on the border and inside, following the pointer across the group */
[data-spot]>*{position:relative;isolation:isolate}
[data-spot]>*::before{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(340px circle at var(--mx,-500px) var(--my,-500px),rgba(246,200,108,.95),rgba(214,160,60,.32) 38%,transparent 72%);
  -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}
[data-spot]>*::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(520px circle at var(--mx,-500px) var(--my,-500px),rgba(214,160,60,.13),transparent 45%)}
[data-spot]:hover>*::before{opacity:1}
[data-spot]>*:hover::after{opacity:1}

/* keyframed parts: switched on by the data-loop timeline in site.js */
.kf{opacity:0;transform:translateY(10px) scale(.97);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.kf.on{opacity:1;transform:none}
[data-loop].out .kf{opacity:0;transition-duration:.5s}
[data-loop].rs .kf,[data-loop].rs .kf *{transition:none!important}

.msg{max-width:290px;border-radius:18px;padding:11px 14px 12px;font-size:13.5px;line-height:1.4;box-shadow:0 22px 40px -22px rgba(0,0,0,.75)}
.msg small{display:block;font:500 9.5px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-bottom:6px}
.msg p{margin:0;font-size:13.5px;line-height:1.4;color:inherit}
.msg.out{background:var(--gold);color:#241a08;border-bottom-right-radius:6px}
.msg.in{background:rgba(246,241,232,.96);color:#1b1a17;border-bottom-left-radius:6px}
.msg u{color:var(--gold-ink);text-underline-offset:2px}
.chip-s{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:rgba(214,160,60,.16);border:1px solid rgba(214,160,60,.45);
  color:#f3c873;font:500 10px/1.1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.notif{display:grid;gap:2px;padding:10px 13px;border-radius:14px;background:rgba(246,241,232,.96);color:#1b1a17;box-shadow:0 18px 36px -18px rgba(0,0,0,.75)}
.notif b{font-size:13px}.notif span{font-size:12px;color:#5f594f}
.notif.ok2{background:rgba(214,160,60,.15);color:#f3c873;border:1px solid rgba(214,160,60,.42)}
.notif.ok2 span{color:#cdb98f}

/* A · menu du jour */
.va{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start;padding-top:30px}
.slate{display:grid;gap:3px;padding:11px 13px;border-radius:10px;background:#2b2d28;color:#f1ede4;border:3px solid #6e4c2b}
.slate em{font:italic 400 16px/1 var(--f-display);color:#ead9b2}
.slate b{font:600 14px/1.25 var(--f-body)}
.slate span{font:500 12px var(--f-mono);color:#f0c060}
.pub{display:grid;gap:8px;justify-items:end}
.dest{display:flex;align-items:center;gap:10px;width:min(100%,232px);padding:8px 10px 8px 8px;border-radius:14px;background:rgba(20,18,15,.6);
  border:1px solid rgba(239,232,220,.13);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:13.5px;color:#efe8dc}
.dest i{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:9px;background:rgba(239,232,220,.1);font:700 12px var(--f-body);font-style:normal}
.dest span{flex:1}
.dest .ok{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--gold);color:#1b1a17;font-size:12px;transform:scale(.3)}
.dest .ok.on{transform:none;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .3s}
@container (max-width:520px){.va{grid-template-columns:minmax(0,1fr);padding-top:6px}.pub{justify-items:start}}

/* B · avis */
.vb{position:relative;display:block;width:100%;min-height:210px}
.vb .msg{max-width:250px;transform-origin:0 100%}
.rv{position:absolute;right:12px;bottom:4px;display:grid;justify-items:center;gap:7px;padding:16px 16px 14px;border-radius:18px;background:rgba(36,33,28,.92);border:1px solid rgba(239,232,220,.12);box-shadow:0 26px 50px -24px rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rv>b{font:800 44px/1 var(--f-body);letter-spacing:-.04em;color:#f5efe4}
.stars{display:flex;gap:3px}
.stars i{width:16px;height:16px;opacity:1;transform:none;background:rgba(239,232,220,.18);transition:background .3s;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.on{background:#f0b84a;animation:btPop .5s var(--ease)}
[data-loop].out .stars i{opacity:1}
@keyframes btPop{40%{transform:scale(1.5)}}
.rvn{position:relative;height:16px;width:116px}
.rvn span{position:absolute;inset:0;text-align:center;font:500 10.5px/16px var(--f-mono);letter-spacing:.04em;color:#a59d90;white-space:nowrap}
.plus{position:absolute;top:-10px;right:-10px;padding:5px 8px;border-radius:99px;background:var(--gold);color:#1b1a17;font:700 12px/1 var(--f-body)}

/* C · rendez-vous */
.vc{display:grid;gap:10px;align-content:start}
.cal{padding:12px;border-radius:16px;background:rgba(239,232,220,.05);border:1px solid rgba(239,232,220,.1)}
.cal .mo{display:block;margin-bottom:8px;font:500 10px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#a59d90}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.days i{font:500 11px/24px var(--f-body);font-style:normal;text-align:center;border-radius:7px;color:#d9d1c4;background:rgba(239,232,220,.05)}
.days i.we{color:#6f685d}
.days i.day{opacity:1;transform:none;transition:background .4s,color .4s,box-shadow .5s}
.days i.day.on{background:var(--gold);color:#1b1a17;box-shadow:0 0 0 4px rgba(214,160,60,.22)}
[data-loop].out .days i.day{opacity:1}
.vc .notif{grid-area:2/1}

/* D · devis */
.vd{display:grid;align-content:start;padding-top:28px}
.sheet{position:relative;display:grid;gap:7px;padding:14px 16px;border-radius:14px;background:#f5efe4;color:#1b1a17;box-shadow:0 26px 44px -26px rgba(0,0,0,.85);transform:rotate(-1.6deg)}
.sh-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;margin-bottom:3px}
.dst{display:grid;justify-items:end}
.dst i{grid-area:1/1;padding:5px 8px;border-radius:99px;background:#e3dbcd;color:#5f594f;font:600 10px/1 var(--f-mono);font-style:normal;letter-spacing:.03em;white-space:nowrap}
.dst i.warm{background:#f6e2b8;color:#93610e}.dst i.good{background:#1b1a17;color:#f0c060}
.sheet .ln{height:6px;border-radius:3px;background:#e0d8ca}.sheet .ln.s{width:62%}
.sh-bot{display:flex;justify-content:space-between;align-items:baseline;margin-top:3px;padding-top:8px;border-top:1px dashed #cfc5b3;font-size:12px;color:#5f594f}
.sh-bot b{font-size:14px;color:#1b1a17}
.bsig{position:absolute;right:12px;bottom:36px;width:96px;height:28px;opacity:1;transform:none}
.bsig path{fill:none;stroke:#28478a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s ease}
.bsig.on path{stroke-dashoffset:0}

/* E · gîte */
.ve{display:flex;flex-direction:column;gap:14px}
.sync{display:grid;gap:8px;padding:14px;border-radius:16px;background:rgba(20,18,15,.6);border:1px solid rgba(239,232,220,.13);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sync .row{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:10px;font-size:12px;color:#d9d1c4}
.strip{position:relative;height:14px;border-radius:5px;background:repeating-linear-gradient(90deg,rgba(239,232,220,.13) 0 calc(10% - 2px),transparent calc(10% - 2px) 10%)}
.strip b{position:absolute;left:30%;width:30%;top:0;bottom:0;border-radius:4px;background:var(--gold);opacity:1;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease),opacity .4s}
.strip b.on{transform:none}
.sync small{font:500 10px var(--f-mono);letter-spacing:.06em;color:#f3c873}
.ve .msg{align-self:flex-start}

/* F · commandes */
.vf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.vf .notif{align-self:stretch}
.printer{position:relative;width:min(100%,236px);overflow:hidden;padding:0 4px 4px}
.slot{position:relative;z-index:2;height:12px;border-radius:6px;background:#0c0b09;box-shadow:inset 0 2px 5px #000,0 1px 0 rgba(239,232,220,.1)}
.rcpt{position:relative;z-index:1;display:grid;gap:5px;margin:-6px 10px 0;padding:18px 14px 24px;background:#f5efe4;color:#1b1a17;font:500 11.5px/1.4 var(--f-mono);
  opacity:1;transform:translateY(-102%);transition:transform 1.8s cubic-bezier(.3,.7,.2,1);
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.rcpt.on{transform:none}
.rcpt b{font:700 13px/1.2 var(--f-body)}
.rcpt small{margin-bottom:4px;font-size:10px;color:#8e877b}
.rcpt span,.rcpt em{transform:none;transition:opacity .4s}
.rcpt em{margin-top:4px;padding-top:6px;border-top:1px dashed #bfb5a3;font-style:normal;font-weight:700}

/* G · assistant */
.chat{flex:1;display:flex;flex-direction:column;min-height:236px;padding:12px;border-radius:18px;background:rgba(239,232,220,.04);border:1px solid rgba(239,232,220,.1)}
.ch-top{display:flex;align-items:center;gap:8px;padding-bottom:9px;border-bottom:1px solid rgba(239,232,220,.08);font-size:12px;font-weight:600;color:#efe8dc}
.ch-top i{width:8px;height:8px;border-radius:50%;background:#7fcf8f;box-shadow:0 0 0 3px rgba(127,207,143,.18)}
.ch-top span{margin-left:auto;font:500 9.5px var(--f-mono);letter-spacing:.06em;color:#8e877b}
.chat p{max-width:84%;margin:0;padding:0 12px;max-height:0;overflow:hidden;border-radius:14px;font-size:13px;line-height:1.35;
  transition:max-height .5s var(--ease),padding .5s var(--ease),margin .5s var(--ease),opacity .4s,transform .6s var(--ease)}
.chat p.on{max-height:80px;padding:8px 12px;margin-top:7px}
.chat .q{align-self:flex-end;background:var(--gold);color:#241a08;border-bottom-right-radius:5px}
.chat .a{align-self:flex-start;background:rgba(246,241,232,.95);color:#1b1a17;border-bottom-left-radius:5px}
.chat .dots{align-self:flex-start;display:flex;gap:4px;background:rgba(239,232,220,.12)}
.chat .dots.on{padding:10px 12px}
.dots i{width:6px;height:6px;border-radius:50%;background:#cfc6b6;animation:btDot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes btDot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}

/* H · factures */
.vh{flex-direction:column;justify-content:center;gap:18px}
.invs{display:flex;justify-content:center;gap:10px}
.inv{position:relative;display:grid;gap:5px;width:96px;padding:12px 10px 14px;border-radius:10px;background:#f5efe4;color:#1b1a17;box-shadow:0 18px 30px -18px rgba(0,0,0,.85)}
.inv:nth-child(1){transform:rotate(-4deg)}.inv:nth-child(3){transform:rotate(3deg)}
.inv small{font:500 9.5px var(--f-mono);letter-spacing:.03em;color:#8e877b}
.inv b{font-size:15px}
.inv .ln{height:5px;border-radius:3px;background:#e0d8ca}.inv .ln.s{width:60%}
.stamp{position:absolute;right:-12px;top:62%;padding:3px 7px;border:2px solid #2f7a4a;border-radius:6px;background:rgba(245,239,228,.92);color:#2f7a4a;
  font:800 11px/1 var(--f-body);font-style:normal;letter-spacing:.08em;text-transform:uppercase;transform:rotate(-14deg) scale(2.2)}
.stamp.on{transform:rotate(-14deg) scale(1);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}

@media (max-width:1100px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"a a" "b b" "c d" "e f" "g g" "h h"}
  .bt.tall{min-height:560px}
}
@media (max-width:760px){
  .bento{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "b" "c" "d" "e" "f" "g" "h";grid-auto-rows:auto;gap:12px}
  .bt{border-radius:20px}
  .bt.wide{flex-direction:column}
  .bt.wide .bt-txt{width:auto;order:0}
  .bt-vis,.bt.wide .bt-vis{padding:22px 20px 0}
  .bt-txt{padding:20px 20px 22px}
  .bt-a{min-height:600px}
  .bt.tall{min-height:0}
  .bt-e{min-height:520px}
  .vb{min-height:250px}
}

/* ---------- the living quote: Tarifs hero window + home Tarifs door (site/_devis.html) ---------- */
.dv{position:absolute;inset:0;container-type:size;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(90% 70% at 30% 12%,#4d3d27 0%,#251f16 55%,#15120d 100%);--w:min(80cqw,66cqh)}
.dv-glow{position:absolute;left:50%;top:42%;width:120cqmax;height:120cqmax;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(240,188,88,.26),transparent 70%);animation:dvGlow 9s ease-in-out infinite}
@keyframes dvGlow{50%{transform:translate(-45%,-55%) scale(1.1)}}
.dv-doc{position:relative;width:var(--w);font-size:calc(var(--w) / 22);padding:1.3em 1.35em 1.15em;border-radius:.6em;background:#f8f3ea;color:#1b1a17;
  box-shadow:0 2.4em 4em -1.6em rgba(0,0,0,.7),0 .3em .8em rgba(0,0,0,.2);transform:rotate(-2.5deg);animation:dvFloat 8s ease-in-out infinite;transition:scale .9s var(--ease)}
@keyframes dvFloat{50%{transform:rotate(-1.3deg) translateY(-.35em)}}
.dv-head{display:flex;align-items:center;gap:.6em;padding-bottom:.8em;border-bottom:1px solid #e3dacb}
.dv .dv-head img.dvl{position:static;inset:auto;flex:none;width:2em;height:2em;object-fit:contain;opacity:1;transform:none;transition:none}
.dv-head b{display:block;font:800 .95em/1.1 var(--f-body);letter-spacing:-.02em}
.dv-head small{display:block;font:500 .56em/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#8e877b}
.dv-no{margin-left:auto;text-align:right;font:500 .6em/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.dv-to{display:flex;gap:.55em;align-items:baseline;margin:.8em 0 .45em;font-size:.82em}
.dv-to small{font:500 .74em var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#8e877b}
.dv-lines{display:grid;margin:0;padding:0;list-style:none}
.dv-lines li{display:flex;justify-content:space-between;gap:1em;padding:.45em 0;border-bottom:1px dashed #e0d6c5;font-size:.8em;line-height:1.25}
.dv-lines b{font-weight:600;white-space:nowrap}.dv-lines b.g{color:var(--gold-ink)}
.dv-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:.55em}
.dv-tot span{font:500 .68em var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#5f594f}
.dv-tot b{font:800 2.1em/1 var(--f-body);letter-spacing:-.045em}
.dv-tot i{font-style:normal;font-variant-numeric:tabular-nums;opacity:1;transform:none}
.dv-alt{margin:.35em 0 0;font-size:.7em;color:#5f594f}
.dv-alt b{color:#1b1a17}
.dv-sign{display:flex;align-items:flex-end;gap:.5em;margin-top:.5em;min-height:4.3em}
.dv-sign small{padding-bottom:.35em;border-bottom:1px solid #d9cfbd;font:500 .56em var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#8e877b}
.dv-sign svg{width:6.4em;height:1.9em;opacity:1;transform:none}
.dv-sign path{fill:none;stroke:#28478a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.5s ease}
.dv-sign svg.on path{stroke-dashoffset:0}
.dv-stamp{position:absolute;right:.9em;bottom:.75em;display:grid;place-items:center;width:4.9em;height:4.9em;color:#b07a18;mix-blend-mode:multiply;transform:rotate(-16deg) scale(2.4)}
.dv-stamp.on{transform:rotate(-16deg) scale(1);transition:transform .45s cubic-bezier(.3,1.5,.5,1),opacity .25s}
.dv-stamp svg{position:absolute;inset:0;width:100%;height:100%}
.dv-stamp text{font:700 9.5px var(--f-mono);letter-spacing:1.5px;fill:currentColor}
.dv-stamp b{font-size:1.6em;line-height:1}
.ph-win .dv{--w:min(84cqw,75cqh)}
@media (max-width:760px){.tphero .pw-view{aspect-ratio:4/5}}
.door .dv{align-items:start;--w:min(78cqw,47cqh)}
.door .dv-doc{margin-top:7cqh}
.door:hover .dv-doc{scale:1.04}
@media (prefers-reduced-motion:reduce){.dv-doc,.dv-glow{animation:none}}

/* spotlight on light cards: softer inner light, gold rim */
.after[data-spot]>*::after,.vals[data-spot]>*::after,.plans[data-spot]>*::after{z-index:-1;background:radial-gradient(460px circle at var(--mx,-500px) var(--my,-500px),rgba(214,160,60,.16),transparent 50%)}

/* ---------- home v6: one continuous pinned scene (lake → gîte → ring → Rodez → map) ---------- */
.cine{position:relative}
.cine-pin{position:sticky;top:0;z-index:1;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.cx-sec{position:relative;pointer-events:none}
.cx-a{margin-top:-100vh;margin-top:-100svh}   /* the chapters run under the pin (a negative margin on the pin itself would keep it stuck one screen too long) */
.cx-a{height:290vh}.cx-b{height:270vh}.cx-c{height:330vh}
.cine .hm-stencil,.cine .hw-tag2,.cine .hw-hint{pointer-events:none}
.cine .hm-stencil{z-index:3}
.cine .hw-tag2,.cine .hw-hint{z-index:4}

/* the ring of trades, behind the lake until it pulls back */
.cx-ring{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;padding-top:clamp(84px,11vh,112px);padding-bottom:max(30px,env(safe-area-inset-bottom,0px));
  background:var(--night);color:var(--night-ink);opacity:0;visibility:hidden;pointer-events:none}
.cx-ring::before{content:"";position:absolute;left:50%;top:58%;width:min(1200px,130vw);aspect-ratio:2/1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(ellipse,rgba(214,160,60,.16),rgba(214,160,60,0) 62%)}
.cx-ring .ring-stage{margin-top:0;perspective:2200px;perspective-origin:50% 45%}
.cx-ring .rcard{box-shadow:0 60px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06)}
.cx-ring .btn-line{color:var(--night-ink)}
.cx-ring .btn-line:hover{background:var(--night-ink);color:var(--ink);border-color:var(--night-ink)}
.cx-ring .hr-head,.cx-ring .hr-foot{opacity:0}

/* the lake scene: full screen, then scaled + clipped onto card n°1 */
.hw-scene{position:absolute;inset:0;z-index:2;transform-origin:0 0;will-change:transform;pointer-events:none}
.hw-scene .hw-site{z-index:2}
.hw-scene .hw-shade{z-index:1}

/* the dive into the Rodez workshop */
.cx-zoom{position:absolute;inset:0;z-index:5;transform-origin:0 0;opacity:0;visibility:hidden;pointer-events:none;will-change:transform}
.cx-zm{position:absolute;inset:0;overflow:hidden;background:#2a2622}
.cx-zm img,.cx-zm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% center}
.cx-zm video{opacity:0;transition:opacity .6s}.cx-zm video.on{opacity:1}
.cx-zshade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,12,10,.7),rgba(14,12,10,.2) 60%,rgba(14,12,10,0));opacity:1}

/* landing: an index of towns rolling past, one local business photo per town */
.cx-ztitle{position:absolute;left:max(var(--gut),calc((100% - var(--maxw)) / 2));bottom:14vh;z-index:6;color:#fff;opacity:0;visibility:hidden;pointer-events:none}
.cx-ztitle small{display:block;font:650 .78rem/1.3 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:#ead0b4}
.cx-ztitle b{display:block;margin-top:10px;font:italic 400 clamp(5rem,15vw,15rem)/.85 var(--f-display);letter-spacing:-.03em;font-weight:400}
.cx-idx{position:absolute;inset:0;z-index:4;background:var(--paper);opacity:0;visibility:hidden;overflow:hidden;--side:max(var(--gut),calc((100% - var(--maxw)) / 2));--cw:min(40vw,720px)}
.cx-idx::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 60% at 74% 50%,rgba(214,160,60,.14),transparent 70%)}
.ci-txt{position:absolute;left:var(--side);top:0;bottom:0;width:calc(100% - var(--side) * 2 - var(--cw) - 4vw);display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,30px)}
.ci-win{position:relative;height:calc(var(--lh,110px) * 5);overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);mask:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent)}
.ci-list{list-style:none;margin:0;padding:0;will-change:transform}
.ci-list li{display:flex;align-items:baseline;gap:.5em;font:italic 400 clamp(2.6rem,4.2vw,5.2rem)/1.1 var(--f-display);letter-spacing:-.02em;white-space:nowrap;color:var(--ink);transform-origin:0 60%}
.ci-list li .n{font:600 .14em/1 var(--f-body);font-style:normal;letter-spacing:.12em;color:var(--gold-ink);transform:translateY(-1.4em);min-width:2.4em}
.ci-txt .lead{max-width:28rem}
.ci-card{position:absolute;right:var(--side);top:50%;width:var(--cw);margin:0;transform:translateY(-50%)}
.ci-pic{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:16px;background:#2a2622;box-shadow:0 50px 90px -45px rgba(50,35,15,.6),0 0 0 1px rgba(27,26,23,.06)}
.ci-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.08);transition:clip-path 1s cubic-bezier(.7,0,.2,1),transform 1.6s var(--ease)}
.ci-pic img.on{clip-path:inset(0);transform:none}
.ci-card figcaption{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:18px}
.ci-cap b{display:block;font:italic 400 clamp(1.6rem,2.2vw,2.3rem)/1 var(--f-display)}
.ci-cap span{display:block;margin-top:8px;font:600 .74rem/1.3 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.ci-card em{font:italic 400 clamp(1.3rem,1.7vw,1.8rem)/1 var(--f-display);color:var(--gold-ink);white-space:nowrap}
.ci-cap{transition:opacity .35s}
.ci-cap.swap{opacity:0}
@media (max-width:760px){
  .cx-a{height:250vh}.cx-b{height:240vh}.cx-c{height:300vh}
  .cx-ring{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))}
  .ci-card{left:var(--side);right:var(--side);top:clamp(84px,11vh,100px);width:auto;transform:none}
  .ci-card figcaption{margin-top:12px}
  .ci-txt{left:var(--side);right:var(--side);width:auto;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));justify-content:flex-end;gap:12px}
  .ci-txt .eyebrow b,.ci-txt .lead{display:none}
  .ci-win{height:calc(var(--lh,60px) * 3)}
  .ci-list li{font-size:clamp(2.4rem,11vw,3.4rem)}
  .cx-ztitle{bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}

/* ---------- home Automatisation door: a lock screen where the automations report in (site/_door-auto.html) ---------- */
.da{position:absolute;inset:0;container-type:size;overflow:hidden;background:radial-gradient(90% 70% at 50% 8%,#3d3225 0%,#1e1a15 55%,#12100c 100%);--pw:min(70cqw,40cqh)}
.da img.da-bg{position:absolute;inset:-12px;width:calc(100% + 24px);height:calc(100% + 24px);object-fit:cover;object-position:70% center;filter:blur(3px) brightness(.62) saturate(1.05)}
.da::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,12,.15),rgba(20,16,12,.35) 60%,rgba(20,16,12,.6))}
.da-glow{position:absolute;left:50%;top:30%;width:110cqmax;height:110cqmax;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(240,188,88,.24),transparent 70%);animation:dvGlow 9s ease-in-out infinite}
.da-phone{position:absolute;z-index:1;left:50%;top:7cqh;width:var(--pw);margin-left:calc(var(--pw) / -2);aspect-ratio:9/19.3;padding:calc(var(--pw) * .035);
  font-size:calc(var(--pw) / 21);border-radius:calc(var(--pw) * .16);background:linear-gradient(150deg,#45433f,#161513 55%,#2c2b28);
  box-shadow:0 3em 5em -2em rgba(0,0,0,.85),inset 0 0 0 .12em rgba(255,255,255,.09);transform:rotate(-3deg);animation:daFloat 8s ease-in-out infinite;transition:scale .9s var(--ease)}
@keyframes daFloat{50%{transform:rotate(-1.6deg) translateY(-.4em)}}
.door:hover .da-phone{scale:1.04}
.da-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--pw) * .13);background:#222}
.da img.da-wall{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:brightness(.62) saturate(1.1)}
.da-island{position:absolute;left:50%;top:.7em;z-index:2;width:4.6em;height:1.35em;margin-left:-2.3em;border-radius:1em;background:#000}
.da-time{position:absolute;left:0;right:0;top:3.1em;z-index:2;text-align:center;color:#fff}
.da-time small{display:block;font:500 .78em/1 var(--f-body);letter-spacing:0;color:#fff;opacity:.85}
.da-time b{display:block;margin-top:.1em;font:700 4.4em/1 var(--f-body);letter-spacing:-.04em}
.da-list{position:absolute;left:.55em;right:.55em;top:10.4em;z-index:2;display:flex;flex-direction:column}
.da-n{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.55em;align-items:start;max-height:0;margin-top:0;padding:0 .7em;overflow:hidden;border-radius:1.1em;
  background:rgba(245,240,230,.2);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:#fff;
  transition:max-height .7s var(--ease),margin .7s var(--ease),padding .7s var(--ease),opacity .5s,transform .7s var(--ease)}
.da-n.on{max-height:6em;margin-top:.45em;padding:.65em .7em}
.da-n i{display:grid;place-items:center;width:1.9em;height:1.9em;border-radius:.5em;background:var(--gold);color:#1b1a17;font:700 .9em/1 var(--f-body);font-style:normal}
.da-n i.g{background:#fff;color:#e3a21a}
.da-n b{display:block;font:700 .8em/1.2 var(--f-body)}
.da-n span{display:block;margin-top:.15em;font:400 .72em/1.3 var(--f-body);opacity:.88}
.da-n em{font:500 .62em/1.2 var(--f-body);font-style:normal;white-space:nowrap;opacity:.7}
@media (prefers-reduced-motion:reduce){.da-phone,.da-glow{animation:none}}

/* ---------- page polish v7: steps and questions as cards, hero badges, cleaner bands ---------- */
/* steps: a row of cards, a big serif numeral each, and a gold rule that draws in */
.steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(12px,1.4vw,22px);border-top:0}
.steps li{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(24px,2.2vw,34px);border:1px solid var(--line);border-radius:22px;background:var(--card)}
.steps li::after{content:"";position:absolute;left:clamp(24px,2.2vw,34px);right:clamp(24px,2.2vw,34px);top:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(214,160,60,0));transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .3s}
.steps li.in::after{transform:scaleX(1)}
.steps .n{margin-bottom:clamp(14px,3.4vh,36px);font:italic 400 clamp(3.4rem,4.4vw,5.2rem)/.8 var(--f-display)}
.steps h3{font-size:clamp(1.2rem,1.4vw,1.5rem)}
.steps p{font-size:.97rem;line-height:1.55}
.flow.alt .steps li{background:#f5f0e7}

/* questions: soft cards, a gold round toggle */
.qa{display:grid;gap:10px;border-top:0}
.qa details{padding:0 clamp(16px,1.6vw,26px);border:1px solid var(--line);border-radius:18px;background:var(--card);transition:background .4s,border-color .4s,box-shadow .5s}
.qa details:hover{border-color:rgba(214,160,60,.4)}
.qa details[open]{background:#fffdf8;border-color:rgba(214,160,60,.5);box-shadow:0 30px 60px -44px rgba(50,35,15,.45)}
.qa summary{grid-template-columns:44px minmax(0,1fr) 32px;align-items:center;padding:clamp(17px,2.1vh,22px) 0}
.qa summary::after{width:32px;height:32px;border-radius:50%;color:var(--gold-ink);
  background:linear-gradient(currentColor,currentColor) center/12px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 12px no-repeat,rgba(214,160,60,.15)}
.qa .ans{padding:0 48px 24px 56px}
.faq-side h2{font-size:clamp(2.1rem,3.6vw,4rem)}

/* hero windows: two floating badges that carry the key promise */
.pw-badge{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;white-space:nowrap;color:var(--ink);
  background:rgba(255,253,248,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 26px 50px -24px rgba(50,35,15,.55),0 0 0 1px rgba(27,26,23,.06);
  animation:pwBadge .9s var(--ease) 1.1s both,pwFloat 7s ease-in-out 2.2s infinite}
.pw-badge i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--gold);color:#1d1406}
.pw-badge i svg{width:20px;height:20px}
.pw-badge b{display:block;font:700 .92rem/1.2 var(--f-body)}
.pw-badge small{display:block;margin-top:3px;font:500 .78rem/1.3 var(--f-body);color:var(--ink-2)}
.pw-badge.b1{left:-60px;top:20%}
.pw-badge.b2{right:-44px;bottom:11%;animation-delay:1.35s,-1.3s}
@keyframes pwBadge{from{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes pwFloat{50%{transform:translateY(-9px)}}
@media (max-width:1100px){.pw-badge.b1{left:-14px}.pw-badge.b2{right:-10px}}
@media (max-width:760px){
  .pw-badge{gap:9px;padding:9px 13px 9px 9px;border-radius:13px}
  .pw-badge i{width:30px;height:30px;border-radius:9px}.pw-badge i svg{width:16px;height:16px}
  .pw-badge b{font-size:.8rem}.pw-badge small{font-size:.7rem}
  .pw-badge.b1{left:-6px;top:12%}.pw-badge.b2{right:-6px;bottom:8%}
}
@media (prefers-reduced-motion:reduce){.pw-badge{animation:none}}

/* pills under the hero text */
.pills li{padding:12px 16px;font-size:.84rem;font-weight:600}

/* tarifs: the "included" tiles become one clean band */
.incl{gap:0;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.incl li{align-items:center;justify-content:center;gap:12px;padding:24px 16px;border:0;border-radius:0;text-align:center;font-size:.9rem;font-weight:600}
.incl li+li{border-left:1px solid var(--line)}
.incl svg{width:26px;height:26px}
@media (max-width:1000px){.incl li{border-left:0!important;border-top:1px solid var(--line)}.incl li:nth-child(-n+3){border-top:0}.incl li:not(:nth-child(3n+1)){border-left:1px solid var(--line)!important}}
@media (max-width:760px){.incl li:nth-child(3){border-top:1px solid var(--line)}.incl li:not(:nth-child(3n+1)){border-left:0!important}.incl li:nth-child(even){border-left:1px solid var(--line)!important}}

/* automatisation: the price call-out as a dark panel */
.cta-band{position:relative;overflow:hidden;padding:clamp(34px,5vw,76px);border-radius:28px;background:var(--night);color:var(--night-ink);align-items:center}
.cta-band::before{content:"";position:absolute;right:-10%;top:-60%;width:70%;aspect-ratio:1;pointer-events:none;background:radial-gradient(closest-side,rgba(214,160,60,.24),transparent 70%)}
.cta-band>*{position:relative}
.cta-band h2{color:var(--night-ink)}
.cta-band h2 em{color:var(--gold)}
.cta-band .lead{color:#b8b0a3}
.cta-band .btn-ink{background:var(--gold);color:#1d1406;border-color:var(--gold)}
.cta-band .btn-line{color:var(--night-ink);border-color:rgba(239,232,220,.4)}
.cta-band .btn-line:hover{background:var(--night-ink);color:var(--ink)}

/* contact: towns as chips, bigger step numbers */
.zones{gap:8px;margin-top:26px;font:600 .82rem/1 var(--f-body);color:var(--ink-2)}
.zones span{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.zones span:nth-child(odd){color:var(--ink-2)}
.after b{font-size:clamp(2.8rem,3.6vw,4rem)}
.after div{padding:clamp(24px,2.2vw,34px);border-radius:22px}

@media (max-width:760px){
  .steps{grid-auto-flow:row}
  .steps .n{margin-bottom:6px}
  .qa summary{grid-template-columns:30px minmax(0,1fr) 28px}
  .qa summary::after{width:28px;height:28px}
  .qa .ans{padding:0 8px 20px 42px}
}