/* NORTHLEE — styles
   Palette and tone follow the brand brief. One typeface (Archivo, variable
   weight + width): the width axis is the brand device — type expands the
   way the caravan does. */

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

:root{
  --forest:#24372F;
  --obsidian:#17201D;
  --sand:#D8CDBB;
  --light:#B58B55;
  --paper:#F4F1EA;

  --ink:var(--obsidian);
  --muted:#58635C;
  --rule:rgba(23,32,29,.16);
  --rule-inv:rgba(244,241,234,.18);
  --muted-inv:rgba(244,241,234,.68);

  --font:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,5vw,76px);
  --ease:cubic-bezier(.22,.7,.2,1);
  --hdr-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:1.0625rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,dt,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--light);outline-offset:3px;border-radius:2px}
::selection{background:var(--forest);color:var(--paper)}
body.is-locked{overflow:hidden}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:2px;transition:top .2s}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Type ---------- */
.display{font-stretch:125%;font-weight:300;letter-spacing:-.028em;line-height:.98;font-size:clamp(2.6rem,8vw,7.25rem);text-wrap:balance}
.h1{font-stretch:125%;font-weight:300;letter-spacing:-.026em;line-height:1;font-size:clamp(2.5rem,5.8vw,5.25rem);text-wrap:balance}
.h2{font-stretch:120%;font-weight:350;letter-spacing:-.022em;line-height:1.05;font-size:clamp(1.85rem,4.4vw,3.6rem);text-wrap:balance}
.h3{font-stretch:112%;font-weight:500;letter-spacing:-.005em;line-height:1.3;font-size:1.125rem}
.lede{font-size:clamp(1.0625rem,1.45vw,1.3125rem);line-height:1.5;max-width:34em}
.body{max-width:36em}
.body p+p{margin-top:1.1em}
.note{font-size:.8125rem;line-height:1.55;color:var(--muted);max-width:44em}
.on-dark .note{color:var(--muted-inv)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- Links & buttons ---------- */
.link{display:inline-block;font-weight:500;font-stretch:108%;text-decoration:none;padding-bottom:5px;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color .3s}
.link:hover{background:linear-gradient(var(--light),var(--light)) 0 100%/100% 2px no-repeat}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:.8em 1.6em;border:1px solid transparent;border-radius:2px;
  font-size:.9375rem;font-weight:500;font-stretch:110%;letter-spacing:.005em;text-decoration:none;cursor:pointer;
  transition:background-color .35s,color .35s,border-color .35s,box-shadow .45s var(--ease)}
.btn--light{background:var(--paper);color:var(--obsidian)}
.btn--light:hover{box-shadow:inset 0 -3px 0 var(--light)}
.btn--dark{background:var(--forest);color:var(--paper)}
.btn--dark:hover{box-shadow:inset 0 -3px 0 var(--light)}
.btn--ghost{border-color:currentColor;background:transparent}
.btn--ghost:hover{box-shadow:inset 0 -3px 0 var(--light)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Layout ---------- */
.wrap{padding-inline:var(--pad);max-width:1720px;margin-inline:auto}
.sec{padding-block:clamp(72px,11vw,176px)}
.sec--tight{padding-block:clamp(56px,7vw,112px)}
.on-dark{background:var(--obsidian);color:var(--paper)}
.on-forest{background:var(--forest);color:var(--paper)}
.on-sand{background:var(--sand)}
.split{display:grid;gap:clamp(28px,6vw,112px)}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .split--even{grid-template-columns:1fr 1fr}
  .split .stick{position:sticky;top:calc(var(--hdr-h) + 40px);align-self:start}
}
.stack>*+*{margin-top:clamp(18px,2.2vw,28px)}
.stack-lg>*+*{margin-top:clamp(36px,5vw,72px)}
.rule{border:0;border-top:1px solid var(--rule);margin:0}
.on-dark .rule,.on-forest .rule{border-color:var(--rule-inv)}

/* Dimension line — the recurring structural device (from technical drawings) */
.dim{display:flex;align-items:center;gap:14px;font-size:.8125rem;font-weight:500;font-stretch:112%;white-space:nowrap;font-variant-numeric:tabular-nums}
.dim::before,.dim::after{content:"";flex:1;height:11px;min-width:24px;
  background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat;opacity:.5}
.dim::before{border-left:1px solid currentColor}
.dim::after{border-right:1px solid currentColor}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--hdr-h);display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-inline:var(--pad);color:var(--paper);
  transition:transform .55s var(--ease),background-color .4s}
.hdr::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,32,29,.55),rgba(23,32,29,0));transition:opacity .4s}
.hdr.is-solid{background:rgba(23,32,29,.82);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.hdr.is-solid::before{opacity:0}
.hdr.is-hidden{transform:translateY(-105%)}
.hdr.menu-open{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
.hdr.menu-open::before{opacity:0}
.wordmark{font-stretch:125%;font-weight:500;font-size:.9375rem;letter-spacing:.44em;text-decoration:none;white-space:nowrap;padding:8px 0}
.hdr-nav{display:none;gap:clamp(18px,2.3vw,38px)}
.hdr-nav a{position:relative;font-size:.875rem;font-weight:450;font-stretch:108%;text-decoration:none;padding:8px 0;opacity:.9}
.hdr-nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--light);box-shadow:0 0 8px var(--light);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.hdr-nav a:hover::after,.hdr-nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr-nav a[aria-current="page"]{opacity:1}
.hdr-end{display:flex;align-items:center;gap:clamp(10px,2vw,20px)}
.hdr-cta{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border-radius:2px;background:var(--paper);color:var(--obsidian);
  font-size:.875rem;font-weight:500;font-stretch:108%;text-decoration:none;white-space:nowrap;transition:box-shadow .45s var(--ease)}
.hdr-cta:hover{box-shadow:inset 0 -3px 0 var(--light)}
.menu-btn b{font-weight:inherit}
@media (max-width:480px){
  .wordmark{font-size:.8125rem;letter-spacing:.32em}
  .hdr-cta{padding:0 12px;min-height:36px}
  .menu-btn b{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 2px;border:0;background:none;cursor:pointer;
  font-size:.875rem;font-weight:500;font-stretch:108%}
.menu-btn i{position:relative;width:22px;height:10px;display:block}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .45s var(--ease)}
.menu-btn i::before{top:0}.menu-btn i::after{bottom:0}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(4.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-4.5px) rotate(-45deg)}
@media (min-width:1100px){
  .hdr-nav{display:flex}.menu-btn{display:none}
}

.menu{position:fixed;inset:0;z-index:55;background:var(--obsidian);color:var(--paper);
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:calc(var(--hdr-h) + 28px) var(--pad) 28px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .4s}
.menu-links a{display:block;font-stretch:125%;font-weight:300;font-size:clamp(1.9rem,8.6vw,3.25rem);line-height:1.22;letter-spacing:-.022em;text-decoration:none;
  transform:translateY(14px);opacity:0;transition:transform .7s var(--ease),opacity .5s}
.menu.is-open .menu-links a{transform:none;opacity:1}
.menu.is-open .menu-links li:nth-child(2) a{transition-delay:.04s}
.menu.is-open .menu-links li:nth-child(3) a{transition-delay:.08s}
.menu.is-open .menu-links li:nth-child(4) a{transition-delay:.12s}
.menu.is-open .menu-links li:nth-child(5) a{transition-delay:.16s}
.menu.is-open .menu-links li:nth-child(6) a{transition-delay:.2s}
.menu.is-open .menu-links li:nth-child(7) a{transition-delay:.24s}
.menu.is-open .menu-links li:nth-child(8) a{transition-delay:.28s}
.menu-links a[aria-current="page"]{color:var(--light)}
.menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:20px;border-top:1px solid var(--rule-inv)}
.menu-foot p{font-size:.8125rem;color:var(--muted-inv)}

/* ---------- Scroll scenes (home) ---------- */
.scene{position:relative}
.stage{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden;background:var(--obsidian);color:var(--paper)}
.js .stage{position:sticky;top:0}
.js .s-hero{height:460vh}
.js .s-living{height:270vh}
.stage-media{position:absolute;inset:0;overflow:hidden}
.lay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 58%;
  transform:scale(var(--z,1));transform-origin:70% 60%;will-change:transform,opacity}
.lay-open{opacity:var(--x,0)}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,32,29,.42) 0%,rgba(23,32,29,0) 24%,rgba(23,32,29,0) 46%,rgba(23,32,29,.82) 100%)}
.s-hero .scrim{background:
  radial-gradient(90% 70% at 0% 100%,rgba(23,32,29,.72) 0%,rgba(23,32,29,0) 70%),
  linear-gradient(180deg,rgba(23,32,29,.42) 0%,rgba(23,32,29,0) 22%,rgba(23,32,29,0) 55%,rgba(23,32,29,.7) 100%)}
.grain{position:absolute;inset:0;pointer-events:none;background:url("../img/grain.png");background-size:160px;mix-blend-mode:overlay;opacity:.4}
.cap{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(36px,8vh,92px);max-width:58rem}
.cap .display{font-size:clamp(2.5rem,6vw,5.5rem)}
.cap p{margin-top:clamp(14px,1.8vw,24px)}
.cap .link{margin-top:clamp(16px,2vw,26px)}
.js .cap{will-change:opacity,transform}
.js .cap-a{opacity:var(--ao,1);transform:translateY(calc(var(--at,0) * -36px))}
.js .cap-b{opacity:var(--bo,0);transform:translateY(calc((1 - var(--bo,0)) * 28px))}
.js .cap-c{opacity:var(--co,0);transform:translateY(calc((1 - var(--co,0)) * 28px))}
.js .cap.is-off{pointer-events:none}
html:not(.js) .cap-b,html:not(.js) .cap-c,html:not(.js) .lay-open{display:none}
.xp{font-variation-settings:"wdth" var(--w,125)}
.readout{display:flex;align-items:center;gap:18px;margin-top:clamp(16px,2vw,26px);max-width:30rem}
.readout b{font-stretch:125%;font-weight:300;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.readout .dim{flex:1;color:var(--sand)}
.scroll-hint{position:absolute;z-index:3;right:var(--pad);bottom:clamp(36px,9vh,104px);display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.75rem;font-weight:500;font-stretch:112%;letter-spacing:.04em;opacity:var(--ao,1)}
.scroll-hint::after{content:"";width:1px;height:54px;background:linear-gradient(var(--paper),var(--paper)) 0 0/100% 40% no-repeat,rgba(244,241,234,.28);animation:hint 2.6s var(--ease) infinite}
@keyframes hint{0%{background-position:0 -30px,0 0}100%{background-position:0 60px,0 0}}

/* Portrait: the image sits in the upper part so the whole caravan fits */
@media (max-aspect-ratio:1/1){
  .s-hero .stage-media{inset:0 0 auto 0;height:60vh;height:60svh}
  .s-hero .lay{object-position:94% 50%;transform-origin:52% 62%}
  .s-hero .scrim{background:linear-gradient(180deg,rgba(23,32,29,.5) 0%,rgba(23,32,29,0) 26%,rgba(23,32,29,0) 62%,var(--obsidian) 100%)}
  .s-hero .cap{bottom:clamp(28px,6vh,64px)}
  .scroll-hint{display:none}
}

/* Living scene: a window that opens to full bleed */
.window{position:absolute;inset:0;
  clip-path:inset(calc((1 - var(--e,1)) * 19%) calc((1 - var(--e,1)) * 25%) round calc((1 - var(--e,1)) * 6px))}
.window img{width:100%;height:100%;object-fit:cover;object-position:56% 50%;transform:scale(calc(1.16 - var(--e,1) * .16));will-change:transform}
.s-living .scrim{opacity:var(--e,1);background:linear-gradient(180deg,rgba(23,32,29,.3) 0%,rgba(23,32,29,0) 26%,rgba(23,32,29,.1) 52%,rgba(23,32,29,.84) 100%)}
.js .cap-l1{opacity:var(--l1,1)}
.js .cap-l2{opacity:var(--l2,0);transform:translateY(calc((1 - var(--l2,0)) * 24px))}
html:not(.js) .cap-l1{display:none}
@media (max-aspect-ratio:1/1){
  .window{clip-path:inset(calc((1 - var(--e,1)) * 24%) calc((1 - var(--e,1)) * 12%) round calc((1 - var(--e,1)) * 6px))}
  .window img{object-position:42% 50%}
}

/* Statement with words that light up as you scroll */
.statement{font-stretch:118%;font-weight:350;letter-spacing:-.02em;line-height:1.14;font-size:clamp(1.7rem,4.2vw,3.5rem);max-width:22em}
.js .statement .w{opacity:.16;transition:opacity .5s}
.js .statement .w.on{opacity:1}

/* ---------- Page heroes ---------- */
.hero{position:relative;min-height:min(92vh,960px);min-height:min(92svh,960px);display:flex;align-items:flex-end;overflow:hidden;background:var(--obsidian);color:var(--paper)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,60% 55%)}
.js .hero-media img{transform:scale(1.07);transition:transform 2.6s var(--ease)}
.js.is-ready .hero-media img{transform:none}
.hero .scrim{background:linear-gradient(180deg,rgba(23,32,29,.5) 0%,rgba(23,32,29,0) 26%,rgba(23,32,29,.06) 44%,rgba(23,32,29,.86) 100%)}
.hero-copy{position:relative;z-index:2;width:100%;padding:calc(var(--hdr-h) + 80px) var(--pad) clamp(40px,7vw,96px)}
.hero-copy .lede{margin-top:clamp(14px,1.8vw,24px)}
.hero--plain{min-height:0;background:var(--obsidian)}
.hero--plain .hero-copy{padding-top:calc(var(--hdr-h) + clamp(72px,14vw,200px));padding-bottom:clamp(40px,6vw,88px)}
.hero--forest{background:var(--forest)}
/* One load moment per page: the title rises out of a mask */
.mask{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.mask>span{display:block}
.js .mask>span{transform:translateY(104%);transition:transform 1.3s var(--ease)}
.js.is-ready .mask>span{transform:none}
.js .hero-copy .lede,.js .hero-copy .btn-row,.js .hero-copy .price,.js .hero-copy .note{opacity:0;transition:opacity 1.2s .5s}
.js.is-ready .hero-copy .lede,.js.is-ready .hero-copy .btn-row,.js.is-ready .hero-copy .price,.js.is-ready .hero-copy .note{opacity:1}
.xp-load{font-variation-settings:"wdth" 125}
.js .xp-load{font-variation-settings:"wdth" 62;transition:font-variation-settings 2.2s var(--ease) .25s}
.js.is-ready .xp-load{font-variation-settings:"wdth" 125}

/* ---------- Figures ---------- */
.fig{position:relative;overflow:hidden;background:var(--obsidian);border-radius:2px}
.fig img{width:100%;height:100%;object-fit:cover}
.fig--32{aspect-ratio:3/2}.fig--43{aspect-ratio:4/3}.fig--11{aspect-ratio:1/1}.fig--45{aspect-ratio:4/5}.fig--wide{aspect-ratio:21/9}
.cap-line{margin-top:12px;font-size:.875rem;color:var(--muted);max-width:34em}
.on-dark .cap-line,.on-forest .cap-line{color:var(--muted-inv)}
.bleed{width:100%}
.bleed{margin:0}
.bleed img{width:100%;max-height:88vh;object-fit:cover;object-position:60% 58%}

/* Hotspots */
.spots{position:relative;color:var(--paper)}
.spots-media{position:relative;overflow:hidden;background:var(--obsidian);aspect-ratio:3/2;border-radius:2px}
.spots-media img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.spots--interior .spots-media{aspect-ratio:1536/800}
@media (max-width:760px){
  .spots--camp .spots-media{aspect-ratio:1/1}
  .spots--camp .spots-media img{object-position:97% 50%}
  .spots--interior .spots-media{aspect-ratio:952/1024}
}
.spot{position:absolute;z-index:2;left:var(--sx,50%);top:var(--sy,50%);width:0;height:0}
.spot[hidden]{display:none}
.spot-btn{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center}
.spot-btn::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 0 7px rgba(244,241,234,.2),0 0 20px 5px rgba(181,139,85,.75);transition:transform .45s var(--ease),background-color .3s}
.spot-btn:hover::before,.spot.is-open .spot-btn::before{transform:scale(1.3);background:var(--light)}
.spot-card{position:absolute;left:var(--shift,0px);bottom:26px;width:min(250px,72vw);transform:translate(-50%,8px);
  padding:14px 16px 15px;border-radius:2px;background:rgba(23,32,29,.94);border-top:2px solid var(--light);
  font-size:.875rem;line-height:1.45;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s,transform .45s var(--ease),visibility 0s .3s}
.spot.is-below .spot-card{bottom:auto;top:26px;transform:translate(-50%,-8px)}
.spot.is-open{z-index:5}
.spot.is-open .spot-card{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .3s,transform .45s var(--ease)}
.spot-card strong{display:block;font-stretch:112%;font-weight:500;margin-bottom:3px}
.spot-card span{color:var(--muted-inv)}
html:not(.js) .spot{display:none}
.spots-list{display:none}
html:not(.js) .spots-list{display:block}

/* Before / after */
.compare{position:relative;aspect-ratio:1494/996;overflow:hidden;background:var(--obsidian);--pos:50%;border-radius:2px;color:var(--paper);user-select:none;-webkit-user-select:none}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:94% 50%;pointer-events:none}
.compare-top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare-line{position:absolute;top:0;bottom:0;left:var(--pos);width:1px;margin-left:-.5px;background:var(--paper);box-shadow:0 0 14px 1px rgba(181,139,85,.9);pointer-events:none}
.compare-knob{position:absolute;top:50%;left:var(--pos);width:50px;height:50px;margin:-25px 0 0 -25px;border-radius:50%;background:var(--paper);color:var(--obsidian);display:grid;place-items:center;pointer-events:none;
  box-shadow:0 6px 24px rgba(0,0,0,.35)}
.compare{cursor:ew-resize;touch-action:pan-y}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.compare:focus-within .compare-knob{outline:2px solid var(--light);outline-offset:3px}
.compare-tag{position:absolute;bottom:14px;font-size:.8125rem;font-weight:500;font-stretch:110%;padding:6px 10px;background:rgba(23,32,29,.7);border-radius:2px;pointer-events:none}
.compare-tag.l{left:14px}.compare-tag.r{right:14px}
@media (max-width:760px){.compare{aspect-ratio:1/1.08}}

/* Three states */
.modes-view{position:relative;aspect-ratio:1494/996;overflow:hidden;background:var(--obsidian);border-radius:2px}
.modes-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:94% 50%;opacity:0;transition:opacity 1.1s var(--ease)}
.modes-view img.is-on{opacity:1}
@media (max-width:760px){.modes-view{aspect-ratio:1/1.05}}
.modes-bar{display:grid;gap:20px;margin-top:22px}
@media (min-width:820px){.modes-bar{grid-template-columns:auto 1fr;align-items:start;gap:48px}}
.seg{display:inline-flex;border:1px solid var(--rule-inv);border-radius:2px;padding:3px;gap:3px}
.seg button{border:0;background:none;cursor:pointer;min-height:42px;padding:0 18px;border-radius:1px;font-size:.875rem;font-weight:500;font-stretch:108%;color:inherit;transition:background-color .3s,color .3s}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--paper);color:var(--obsidian)}
.on-paper .seg{border-color:var(--rule)}
.on-paper .seg button[aria-selected="true"],.on-paper .seg button[aria-pressed="true"]{background:var(--forest);color:var(--paper)}
.modes-cap{max-width:34em;color:var(--muted-inv);min-height:3.2em}

/* ---------- Lists without cards ---------- */
.cols{display:grid;gap:0;border-top:1px solid var(--rule)}
.on-dark .cols,.on-forest .cols{border-color:var(--rule-inv)}
.cols>li,.cols>div{padding:24px 0 28px;border-bottom:1px solid var(--rule)}
.on-dark .cols>li,.on-forest .cols>li,.on-dark .cols>div,.on-forest .cols>div{border-color:var(--rule-inv)}
.cols p{margin-top:6px;color:var(--muted);max-width:30em;font-size:1rem}
.on-dark .cols p,.on-forest .cols p{color:var(--muted-inv)}
@media (min-width:720px){
  .cols{grid-template-columns:repeat(2,1fr);column-gap:clamp(28px,4vw,72px)}
}
@media (min-width:1100px){
  .cols--3{grid-template-columns:repeat(3,1fr)}
}
.rows{border-top:1px solid var(--rule)}
.on-dark .rows{border-color:var(--rule-inv)}
.rows>li{display:grid;gap:6px 32px;padding:26px 0;border-bottom:1px solid var(--rule)}
.on-dark .rows>li{border-color:var(--rule-inv)}
.rows p{color:var(--muted);max-width:36em}
.on-dark .rows p{color:var(--muted-inv)}
.rows .val{font-variant-numeric:tabular-nums;font-weight:500;font-stretch:108%}
@media (min-width:860px){.rows>li{grid-template-columns:minmax(0,3fr) minmax(0,6fr) minmax(0,3fr);align-items:baseline}.rows .val{text-align:right}}

/* ---------- Schematic drawings ---------- */
.sch{width:100%;height:auto;color:currentColor;overflow:visible}
.sch .s{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sch .s-thin{stroke-width:1;opacity:.5}
.sch .s-body{fill:var(--sch-bg,var(--obsidian))}
.sch .s-warm{stroke:var(--light);stroke-width:2;opacity:.55;transition:opacity .6s,filter .6s}
.sch.lights-on .s-warm{opacity:1;filter:drop-shadow(0 0 5px var(--light))}
.sch .s-fillsoft{fill:currentColor;fill-opacity:.07}
.sch text{fill:currentColor;font-family:var(--font);font-size:19px;font-weight:500;font-stretch:112%;font-variant-numeric:tabular-nums}
.sch .t-soft{opacity:.6;font-weight:400;font-size:13px}
@media (max-width:760px){.sch text{font-size:27px}}
.sch-wrap{--sch-bg:var(--paper)}
.on-dark .sch-wrap,.on-dark.sch-wrap{--sch-bg:var(--obsidian)}
.on-forest .sch-wrap{--sch-bg:var(--forest)}
.on-sand .sch-wrap{--sch-bg:var(--sand)}

/* Expand steps */
.steps{display:grid;gap:clamp(24px,5vw,96px)}
.steps-view{position:sticky;top:var(--hdr-h);z-index:3;background:var(--obsidian);padding:10px 0 14px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);border-bottom:1px solid var(--rule-inv)}
.steps-list>li{padding:clamp(36px,7vw,64px) 0;border-bottom:1px solid var(--rule-inv);opacity:.42;transition:opacity .6s}
.steps-list>li.is-on{opacity:1}
.steps-list>li:last-child{border-bottom:0}
.step-n{font-stretch:125%;font-weight:300;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--light);font-variant-numeric:tabular-nums}
.steps-list h3{margin-top:14px}
.steps-list p{margin-top:10px;color:var(--muted-inv);max-width:30em}
.steps-list .fig{margin-top:22px;max-width:520px}
@media (min-width:900px){
  .steps{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:start}
  .steps-view{top:calc(var(--hdr-h) + 6vh);margin:0;padding:0;border:0;background:none}
  .steps-list>li{min-height:62vh;display:flex;flex-direction:column;justify-content:center}
}

/* Control concept */
.ctl{display:grid;gap:clamp(24px,4vw,72px);align-items:center}
@media (min-width:900px){.ctl{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.ctl-panel{border:1px solid var(--rule-inv);border-radius:4px;padding:8px 22px 14px;background:rgba(244,241,234,.03)}
.ctl-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule-inv)}
.ctl-row:last-of-type{border-bottom:0}
.ctl-row span{font-weight:500;font-stretch:108%}
.ctl-row small{display:block;font-size:.8125rem;font-weight:400;color:var(--muted-inv);font-stretch:100%}
.sw{position:relative;flex:none;width:58px;height:32px;border-radius:16px;border:1px solid var(--rule-inv);background:transparent;cursor:pointer;transition:background-color .4s,border-color .4s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--paper);transition:transform .45s var(--ease)}
.sw[aria-checked="true"]{background:var(--light);border-color:var(--light)}
.sw[aria-checked="true"]::after{transform:translateX(26px)}

/* ---------- Specs ---------- */
.spec-group+.spec-group{margin-top:clamp(40px,5vw,72px)}
.spec{margin-top:16px;border-top:1px solid var(--ink)}
.spec>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 24px;padding:15px 0;border-bottom:1px solid var(--rule)}
.spec dt{color:var(--muted)}
.spec dd{font-weight:500;font-variant-numeric:tabular-nums}
.spec dd.tbc{font-weight:400;color:var(--muted)}
@media (min-width:640px){.spec>div{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* Materials */
.mats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (min-width:860px){.mats{grid-template-columns:repeat(5,1fr)}}
.mat i{display:block;aspect-ratio:4/5;border-radius:2px;background:var(--c);border:1px solid rgba(23,32,29,.08)}
.mat b{display:block;margin-top:10px;font-weight:500;font-stretch:108%;font-size:.9375rem}
.mat span{font-size:.8125rem;color:var(--muted)}
.on-dark .mat span,.on-forest .mat span{color:var(--muted-inv)}
.mat--wood i{background:linear-gradient(96deg,#c9a071 0%,#d5ae80 22%,#c49a69 41%,#d2aa7a 63%,#bf9563 82%,#cda676 100%)}
.mat--metal i{background:linear-gradient(160deg,#3a403d,#23292600 140%),#2a302d}
.mat--glow i{background:radial-gradient(120% 80% at 50% 100%,#e9b56d 0%,#B58B55 38%,#3b2f20 100%)}

/* Asymmetric image groups */
.duo{display:grid;gap:clamp(14px,2vw,28px)}
@media (min-width:820px){
  .duo{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}
  .duo--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .duo .drop{margin-bottom:clamp(40px,7vw,120px)}
}
.trio{display:grid;gap:clamp(14px,2vw,28px)}
@media (min-width:820px){
  .trio{grid-template-columns:repeat(12,1fr)}
  .trio>:nth-child(1){grid-column:1/6}
  .trio>:nth-child(2){grid-column:6/13;margin-top:clamp(40px,8vw,140px)}
  .trio>:nth-child(3){grid-column:3/11}
}

/* ---------- Final CTA ---------- */
.final{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--obsidian);color:var(--paper)}
.final img{position:absolute;inset:0 0 auto 0;width:100%;height:86%;object-fit:cover;object-position:68% 56%}
.final .scrim{background:linear-gradient(180deg,rgba(23,32,29,.3) 0%,rgba(23,32,29,0) 26%,rgba(23,32,29,0) 48%,rgba(23,32,29,.82) 72%,var(--obsidian) 86%)}
.final-copy .display{font-size:clamp(2.4rem,5vw,4.75rem)}
.final-copy{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(48px,8vw,112px)}
.final-copy .lede{margin-top:16px}
.final-copy .btn-row{margin-top:clamp(22px,3vw,36px)}
.final--short{min-height:min(78vh,760px)}
.band{display:grid;gap:28px;align-items:end}
@media (min-width:860px){.band{grid-template-columns:1fr auto}}

/* ---------- Form ---------- */
.form{display:grid;gap:clamp(34px,4vw,52px)}
.form legend,.form .lab{display:block;font-weight:500;font-stretch:108%;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:2px;font-size:.9375rem;transition:background-color .3s,color .3s,border-color .3s}
.chip input:hover+span{border-color:var(--ink)}
.chip input:checked+span{background:var(--forest);border-color:var(--forest);color:var(--paper)}
.chip input:focus-visible+span{outline:2px solid var(--light);outline-offset:3px}
.fields{display:grid;gap:26px}
@media (min-width:640px){.fields{grid-template-columns:1fr 1fr}.fields .full{grid-column:1/-1}}
.field label{display:block;font-size:.875rem;color:var(--muted);margin-bottom:4px}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0;font-size:1.0625rem;outline-offset:6px}
.field textarea{min-height:110px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:rgba(23,32,29,.38)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--light);box-shadow:0 1px 0 var(--light)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.9375rem}
.check input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--forest)}
.form-msg{padding:18px 20px;border-left:2px solid var(--light);background:rgba(36,55,47,.06);max-width:40em}
.form-msg[hidden]{display:none}
.form-msg strong{font-weight:500}

/* ---------- Footer ---------- */
.ftr{background:var(--obsidian);color:var(--paper);padding:clamp(56px,8vw,112px) 0 28px}
.ftr-top{display:grid;gap:44px}
@media (min-width:900px){.ftr-top{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.ftr-mark{font-stretch:125%;font-weight:400;font-size:clamp(1.25rem,2.4vw,1.75rem);letter-spacing:.44em;text-decoration:none;display:inline-block}
.ftr-tag{margin-top:12px;color:var(--muted-inv)}
.ftr-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px}
@media (min-width:560px){.ftr-nav{grid-template-columns:repeat(3,1fr)}}
.ftr-nav h2{font-size:.8125rem;font-weight:500;font-stretch:108%;color:var(--muted-inv);margin-bottom:12px}
.ftr-nav a{display:inline-block;padding:5px 0;text-decoration:none;font-size:.9375rem}
.ftr-nav a:hover{color:var(--light)}
.ftr-fine{margin-top:clamp(48px,7vw,96px);padding-top:22px;border-top:1px solid var(--rule-inv);display:grid;gap:10px;font-size:.8125rem;color:var(--muted-inv)}
@media (min-width:900px){.ftr-fine{grid-template-columns:1fr auto;gap:40px}.ftr-fine p:first-child{max-width:52em}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .js .mask>span,.js .hero-media img,.js .xp-load{transition:none;transform:none}
  .js .xp-load{font-variation-settings:"wdth" 125}
  .js .cap-a,.js .cap-b,.js .cap-c,.js .cap-l2{transform:none}
  .window img{transform:none}
  .menu-links a{transform:none}
}

@media print{
  .hdr,.menu,.scroll-hint,.grain{display:none!important}
  .js .s-hero,.js .s-living{height:auto}
  .js .stage{position:relative}
}

/* ---------- Portrait adjustments for full-bleed imagery ---------- */
@media (max-aspect-ratio:1/1){
  .hero{min-height:74vh;min-height:74svh}
  .hero-media img{object-position:var(--pos-m,var(--pos,60% 55%))}
  .hero--plain{min-height:0}
  .final{min-height:86vh;min-height:86svh}
  .final img{object-position:90% 56%}
  .final--short{min-height:72vh;min-height:72svh}
  .bleed img{aspect-ratio:1/1;object-position:86% 50%}
}

/* Tablet portrait: more image, less empty space under it */
@media (max-aspect-ratio:1/1) and (min-width:600px){
  .s-hero .stage-media{height:72vh;height:72svh}
  .s-hero .lay{object-position:98% 50%}
}


/* =====================================================================
   Shop layer: prices, models, comparison, configurator
   ===================================================================== */
.price{font-stretch:112%;font-weight:500;font-size:1.0625rem;letter-spacing:.005em;font-variant-numeric:tabular-nums lining-nums}
.cap .btn-row{margin-top:clamp(16px,2vw,26px)}
.cap-a .display{font-size:clamp(1.95rem,5.2vw,4.75rem)}
.hero-copy .price{margin-top:16px}
.hero-copy .btn-row{margin-top:24px}

/* Models: photo first, price underneath, no boxes */
.models{display:grid;gap:clamp(44px,5vw,64px) clamp(16px,2.4vw,36px)}
.model{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none}
.model .fig{width:100%;aspect-ratio:4/3}
.model .fig img{object-position:var(--mp,94% 50%);transition:transform 1.6s var(--ease)}
.model:hover .fig img{transform:scale(1.035)}
.model-name{margin-top:18px;font-stretch:120%;font-weight:400;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.015em;line-height:1.12}
.model-tag{margin-top:6px;color:var(--muted)}
.on-dark .model-tag,.on-forest .model-tag{color:var(--muted-inv)}
.model .price{margin-top:14px}
.model .link{margin-top:14px}
.model:hover .link{background:linear-gradient(var(--light),var(--light)) 0 100%/100% 2px no-repeat}
@media (min-width:860px){
  .models--3{grid-template-columns:repeat(3,1fr)}
  .models--2{grid-template-columns:repeat(2,1fr)}
  .models--3 .model .fig{aspect-ratio:4/5}
}

/* Comparison */
.cmp{border-top:1px solid var(--ink)}
.cmp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 14px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:.9375rem}
.cmp-k{grid-column:1/-1;color:var(--muted);font-size:.875rem}
.cmp .v{font-weight:500}
.cmp .v.opt{font-weight:400;color:var(--muted)}
.cmp-head .v{font-stretch:112%;font-size:1rem}
.cmp-head .cmp-k{display:none}
.cmp-row:last-child .v{font-variant-numeric:tabular-nums}
@media (min-width:700px){
  .cmp-row{grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,3fr));align-items:baseline;font-size:1rem}
  .cmp-k{grid-column:auto;font-size:1rem}
  .cmp-head .cmp-k{display:block}
}
.order .step-n{display:block;margin-bottom:12px}

/* Configurator */
.cfg{display:grid;gap:clamp(28px,5vw,88px);align-items:start}
.cfg-step{padding:clamp(28px,4vw,44px) 0;border-top:1px solid var(--rule)}
.cfg-steps .cfg-step:first-child{border-top:0;padding-top:0}
.cfg-h{font-stretch:118%;font-weight:400;font-size:clamp(1.3rem,2.1vw,1.8rem);letter-spacing:-.015em;line-height:1.15;margin-bottom:18px}
.tiles{display:grid;gap:10px}
@media (min-width:640px){.tiles--3{grid-template-columns:repeat(3,1fr)}.tiles--2{grid-template-columns:repeat(2,1fr)}}
.tile{position:relative;display:block}
.tile input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tile-body{display:block;height:100%;padding:16px 18px 18px;border:1px solid var(--rule);border-radius:2px;transition:border-color .3s,background-color .3s,box-shadow .3s,opacity .3s}
.tile b{display:block;font-weight:500;font-stretch:110%}
.tile-body>span{display:block;margin-top:3px;font-size:.875rem;line-height:1.4;color:var(--muted)}
.tile em{display:block;margin-top:10px;font-style:normal;font-size:.875rem;font-weight:500;font-variant-numeric:tabular-nums}
.tile input:hover+.tile-body{border-color:var(--ink)}
.tile input:checked+.tile-body{border-color:var(--forest);background:rgba(36,55,47,.05);box-shadow:inset 0 0 0 1px var(--forest),inset 0 -3px 0 var(--light)}
.tile input:focus-visible+.tile-body{outline:2px solid var(--light);outline-offset:3px}
.tile input:disabled{cursor:not-allowed}
.tile input:disabled+.tile-body{opacity:.42}
.tile.is-inc input:disabled+.tile-body{opacity:1}
.sw-dot{display:block;width:28px;height:28px;margin-bottom:12px;border-radius:50%;background:var(--c);border:1px solid rgba(23,32,29,.16)}
.cfg-sum{background:var(--forest);color:var(--paper);border-radius:2px;overflow:hidden}
.cfg-sum .modes-view{aspect-ratio:3/2;border-radius:0}
.cfg-sum .modes-view img{object-position:60% 55%}
.cfg-sum-body{padding:22px 24px 26px}
.cfg-sum .model-name{margin-top:0}
.cfg-sum .price{margin-top:6px}
.cfg-sum dl{margin-top:18px;border-top:1px solid var(--rule-inv)}
.cfg-sum dl div{display:grid;grid-template-columns:5.5em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-inv);font-size:.9375rem}
.cfg-sum dt{color:var(--muted-inv)}
.cfg-reserve .cfg-step{border-top:1px solid var(--rule)}
.cfg-bar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-inline:calc(var(--pad) * -1);padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
  background:rgba(23,32,29,.95);color:var(--paper);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cfg-bar b{display:block;font-weight:500;font-stretch:110%;font-size:.9375rem}
.cfg-bar span{font-size:.8125rem;color:var(--muted-inv);font-variant-numeric:tabular-nums}
.cfg-bar .btn{min-height:44px;padding:0 20px}
#reserve{scroll-margin-top:calc(var(--hdr-h) + 12px)}
#models,#compare{scroll-margin-top:var(--hdr-h)}
@media (min-width:980px){
  .cfg{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"steps sum" "reserve sum";row-gap:0}
  .cfg-steps{grid-area:steps}.cfg-reserve{grid-area:reserve}
  .cfg-sum{grid-area:sum;position:sticky;top:calc(var(--hdr-h) + 20px)}
  .cfg-bar{display:none}
}