:root{
  --ink:#15130f; --ink-2:#24201a; --ply:#ece1c9; --ply-2:#ddcfb2; --plate:#163f94; --plate-d:#0e2c6b;
  --sig:#ffb21a; --wa:#1f9d55; --line:rgba(21,19,15,.18);
  --f:'Archivo',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.23,1,.32,1); --pad:clamp(16px,4vw,56px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ply);color:var(--ink);font:400 16px/1.55 var(--f);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{margin:0;font-stretch:112%;line-height:.95;letter-spacing:-.02em}
em{font-style:normal;color:var(--plate)}
.eyebrow{font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;opacity:.75}

/* Header */
.hd{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:12px;padding:10px var(--pad);background:rgba(21,19,15,.9);color:var(--ply);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(236,225,201,.1)}
.hd__brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto}
.hd__no{display:grid;place-items:center;min-width:44px;height:34px;padding:0 6px;background:var(--plate);color:#fff;border:2px solid #fff;border-radius:4px;font:800 16px/1 var(--f);font-stretch:90%;box-shadow:0 0 0 2px var(--plate)}
.hd__name{font:800 13px/1 var(--f);font-stretch:120%;letter-spacing:.04em}
.hd__nav{display:flex;gap:26px}
.hd__nav a{text-decoration:none;font-weight:600;font-size:15px;opacity:.85}
.hd__nav a:hover{opacity:1;color:var(--sig)}
.hd__badge{all:unset;cursor:pointer;font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 7px;border:1px solid rgba(236,225,201,.35);border-radius:3px;color:rgba(236,225,201,.8)}
.hd__badge:focus-visible{outline:2px solid var(--sig)}
.hd__cta{background:var(--sig);color:var(--ink);text-decoration:none;font-weight:800;font-size:14px;padding:10px 14px;border-radius:3px;white-space:nowrap;transition:transform .16s var(--ease)}
.hd__cta:active{transform:scale(.97)}
.hd__menu{display:none;background:none;border:0;width:40px;height:40px;padding:10px;cursor:pointer}
.hd__menu i{display:block;height:2px;background:var(--ply);margin:6px 0;transition:transform .25s var(--ease)}
.nav-open .hd__menu i:first-child{transform:translateY(4px) rotate(45deg)}
.nav-open .hd__menu i:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (max-width:860px){
  .hd{gap:8px}
  .hd__name{display:none}
  .hd__menu{display:block}
  .hd__cta{padding:9px 11px;font-size:13px}
  .hd__nav{position:fixed;inset:55px 0 auto;flex-direction:column;gap:0;background:var(--ink);padding:8px var(--pad) 24px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
  .hd__nav a{font-size:28px;font-weight:800;font-stretch:115%;padding:12px 0;border-bottom:1px solid rgba(236,225,201,.12)}
  .nav-open .hd__nav{opacity:1;transform:none;visibility:visible;transition:opacity .2s var(--ease),transform .2s var(--ease)}
}

/* Hero */
.hero{background:var(--ink);color:var(--ply);padding-top:56px;display:grid;grid-template-columns:1fr;overflow:hidden}
.hero__stage{position:relative;height:min(58svh,520px);min-height:340px;overflow:hidden;color:var(--sig);background:#1b1813}
.hero__floor{position:absolute;inset:0}
.hero__floor svg{width:100%;height:100%;will-change:transform}
.fp text{font:600 13px var(--mono);fill:currentColor;stroke:none;letter-spacing:.06em}
.fp text.v{writing-mode:vertical-rl}
.fp rect,.fp path{stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 2.2s var(--ease) .6s}
.opened .fp rect,.opened .fp path{stroke-dashoffset:0}
.fp path[stroke-dasharray="6 8"]{stroke-dasharray:6 8;stroke-dashoffset:0}
.fp text{opacity:0;transition:opacity .6s ease 1.4s}
.opened .fp text{opacity:.9}
.shutter{position:absolute;inset:0;background:
  repeating-linear-gradient(180deg,#8c8a84 0 3px,#b9b6ad 3px 16px,#6e6c66 16px 18px,#a7a49b 18px 22px);
  transform-origin:top;transition:transform 1.25s cubic-bezier(.7,0,.2,1) .2s;box-shadow:inset 0 -12px 0 #4c4a45}
.shutter::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 30%,transparent 70%,rgba(0,0,0,.35))}
.shutter__hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font:600 11px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#2a2925;z-index:1}
.opened .shutter{transform:translateY(-100%)}
.plate{position:absolute;z-index:2;left:50%;top:clamp(26px,7vh,60px);transform:translateX(-50%) rotate(-1.2deg);width:min(86vw,560px);
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 14px;padding:14px 18px 12px;background:var(--plate);color:#fff;border-radius:8px;
  border:3px solid #fff;box-shadow:0 0 0 3px var(--plate),0 22px 40px rgba(0,0,0,.45);transition:transform 1.4s var(--ease) .3s}
.opened .plate{transform:translateX(-50%) rotate(0)}
.plate::before,.plate::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:#c9cfd9;box-shadow:inset 0 0 0 1px #7b8494}
.plate::before{left:6px}.plate::after{right:6px}
.plate__top,.plate__bot{grid-column:1/-1;font:700 11px/1 var(--mono);letter-spacing:.14em;opacity:.85}
.plate__street{font:900 clamp(30px,8.4vw,58px)/.9 var(--f);font-stretch:82%;letter-spacing:-.01em;padding:6px 0 4px}
.plate__no{font:700 14px/1 var(--f);text-align:right;align-self:center}
.plate__no b{display:block;font:900 clamp(40px,11vw,76px)/.85 var(--f);font-stretch:75%;color:var(--sig)}
.plate__bot{border-top:2px solid rgba(255,255,255,.6);padding-top:7px}
.hero__copy{padding:28px var(--pad) 40px}
.hero h1{font-size:clamp(46px,13vw,124px);font-weight:900;font-stretch:118%;text-transform:uppercase;margin-bottom:16px}
.hero h1 em{color:var(--sig)}
.lead{max-width:34em;font-size:17px;opacity:.85;margin:0 0 22px}
.hero__btns,.visit__btns,.sheet__btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:12px 18px;border-radius:3px;font-weight:800;text-decoration:none;font-size:15px;transition:transform .16s var(--ease),background-color .2s}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;fill:currentColor}
.btn--wa{background:var(--wa);color:#fff}
.btn--line{border:2px solid currentColor}
@media (min-width:1000px){
  .hero{grid-template-columns:1.15fr 1fr;min-height:100svh}
  .hero__stage{height:auto;min-height:0}
  .hero__copy{align-self:center;padding:48px var(--pad)}
  .plate{top:12%}
}

/* Showroom floor */
section{padding:clamp(64px,10vw,140px) var(--pad)}
.sec-head{max-width:900px;margin-bottom:clamp(32px,5vw,64px)}
.sec-head h2,.use__h{font-size:clamp(38px,8vw,92px);font-weight:900;text-transform:uppercase}
.sec-note{font-size:15px;opacity:.7;margin:16px 0 0;max-width:32em}
.floor{background:var(--ply) linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 48px;position:relative}
.aisle{border-top:3px solid var(--ink);padding-top:18px;margin-bottom:56px}
.aisle__label{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:20px}
.aisle__id{font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;background:var(--ink);color:var(--ply);padding:4px 8px}
.aisle__label h3{font-size:clamp(26px,5vw,44px);font-weight:900;text-transform:uppercase}
.aisle__note{font:600 12px var(--mono);color:var(--plate);text-transform:uppercase;letter-spacing:.06em}
.aisle__label a{margin-left:auto;font-weight:700;text-decoration:none;border-bottom:2px solid var(--sig)}
.bays{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.bay__btn{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;height:100%;position:relative;background:#f6efe0;border:2px solid var(--ink);padding:12px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.bay__btn:focus-visible{outline:3px solid var(--plate);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.bay__btn:hover{transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--ink)}}
.bay__btn:active{transform:scale(.98)}
.bay__no{position:absolute;z-index:1;top:0;left:0;background:var(--sig);font:900 22px/1 var(--f);font-stretch:80%;padding:7px 9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.bay__media{position:relative;display:block;aspect-ratio:4/3;background:#fff;overflow:hidden;border:1px solid var(--line)}
.bay__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
@media (hover:hover){.bay__btn:hover img{transform:scale(1.04)}}
.bay__media svg{position:absolute;inset:14% 6%;width:88%;height:72%;fill:none;stroke:var(--plate);stroke-width:2;background:linear-gradient(rgba(22,63,148,.08) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,rgba(22,63,148,.08) 1px,transparent 1px) 0 0/12px 12px}
.bay__tag{position:absolute;bottom:8px;right:8px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--plate)}
.bay__fp{display:flex;align-items:center;gap:8px;margin:12px 0 8px;font:600 10px var(--mono);color:rgba(21,19,15,.6)}
.bay__fp i{height:8px;width:calc(var(--fp) * 55%);border:1.5px solid var(--ink);border-left-width:3px;border-right-width:3px;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(21,19,15,.25) 5px 6px)}
.bay__fp em{color:inherit}
.bay__maker{font:600 12px var(--mono);color:var(--plate);text-transform:uppercase}
.bay__name{font-weight:800;font-size:18px;line-height:1.2;margin:4px 0 10px;font-stretch:105%}
.bay__price{margin-top:auto;font:900 22px/1 var(--f);font-stretch:90%}
.bay__price small{font:600 11px var(--mono);opacity:.6}
.floor__all{display:inline-flex;gap:10px;font:900 clamp(22px,4vw,36px)/1 var(--f);text-transform:uppercase;text-decoration:none;border-bottom:4px solid var(--sig);padding-bottom:6px}

/* Ribbon */
.ribbon{background:var(--plate);color:#fff;overflow:hidden;padding:14px 0;border-block:3px solid #fff;box-shadow:0 0 0 3px var(--plate)}
.ribbon__t{white-space:nowrap;font:900 22px/1 var(--f);font-stretch:85%;letter-spacing:.02em;width:max-content;animation:run 40s linear infinite}
@keyframes run{to{transform:translateX(-50%)}}
.still .ribbon__t{animation:none}

/* Service path */
.path{background:var(--ink);color:var(--ply)}
.path em{color:var(--sig)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:72px 1fr;gap:4px 18px;padding:24px 0;border-top:1px solid rgba(236,225,201,.18)}
.steps__n{grid-row:span 2;font:900 52px/.85 var(--f);font-stretch:75%;color:var(--sig)}
.steps h3{font-size:clamp(22px,3.4vw,34px);font-weight:800;text-transform:uppercase}
.steps p{margin:0;opacity:.75;max-width:36em}
.path__more{display:inline-block;margin-top:28px;font-weight:800;text-decoration:none;border-bottom:2px solid var(--sig)}
@media (min-width:1000px){.steps li{grid-template-columns:140px 1fr 1fr;align-items:baseline}.steps__n{grid-row:auto;font-size:80px}}

/* Use */
.use{background:var(--sig);padding-block:clamp(48px,7vw,96px)}
.use__h{font-size:clamp(28px,5vw,56px);margin-bottom:22px}
.use__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.use__list li{font:800 clamp(18px,3vw,28px)/1 var(--f);text-transform:uppercase;border:2px solid var(--ink);padding:12px 16px;border-radius:999px}

/* Makers */
.makers__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.makers__grid li{background:#fff;border-radius:6px;padding:16px 14px;border:2px solid var(--ink);display:flex;flex-direction:column;gap:6px}
.makers__grid b{font:900 22px/1 var(--f);font-stretch:95%;text-transform:uppercase}
.makers__grid span{font:600 11px var(--mono);text-transform:uppercase;opacity:.65}
.makers__grid .is-klk{background:var(--plate);color:#fff;box-shadow:inset 0 0 0 3px #fff}
.makers__grid .is-klk span{opacity:1;color:var(--sig)}

/* Visit */
.visit{background:var(--plate);color:#fff;display:grid;gap:36px;align-items:center}
.visit em{color:var(--sig)}
.visit__plate{justify-self:start;display:flex;align-items:center;gap:16px;border:4px solid #fff;border-radius:10px;padding:14px 20px;box-shadow:0 0 0 4px var(--plate),0 0 0 6px rgba(255,255,255,.3)}
.visit__plate span{font:900 clamp(28px,6vw,64px)/.9 var(--f);font-stretch:82%}
.visit__plate b{font:900 clamp(64px,14vw,150px)/.8 var(--f);font-stretch:72%;color:var(--sig)}
.visit h2{font-size:clamp(28px,5vw,52px);font-weight:900;margin-bottom:10px}
.visit p{margin:0 0 6px}
.visit__who{margin:14px 0 22px!important}
.visit .btn--line{color:#fff}
@media (min-width:1000px){.visit{grid-template-columns:auto 1fr;gap:64px}}

/* Footer */
.ft{background:var(--ink);color:var(--ply);padding:56px var(--pad) calc(88px + env(safe-area-inset-bottom));overflow:hidden}
.ft__top{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ft__brand{display:flex;gap:12px;align-items:flex-start}
.ft__brand p{margin:0;font-weight:900;font-stretch:115%;line-height:1.1}
.ft__brand small{font:500 12px var(--f);opacity:.65}
.ft__nav{display:flex;flex-direction:column;gap:8px}
.ft__nav a{text-decoration:none;opacity:.8}
.ft__nav a:hover{color:var(--sig);opacity:1}
.ft__addr{font-style:normal;opacity:.85;line-height:1.7}
.ft__big{margin:48px 0 18px;font:900 clamp(40px,13.5vw,220px)/.8 var(--f);font-stretch:75%;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1.5px rgba(236,225,201,.35);white-space:nowrap}

/* Sheet */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(21,19,15,.6);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .22s ease}
.sheet.is-open{opacity:1}
.sheet__card{position:relative;background:var(--ply);width:100%;max-width:560px;max-height:90svh;overflow:auto;padding:18px 18px calc(22px + env(safe-area-inset-bottom));border-top:4px solid var(--sig);transform:translateY(40px);transition:transform .32s var(--ease)}
.sheet.is-open .sheet__card{transform:none}
.sheet__x{position:absolute;top:10px;right:10px;z-index:1;width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);color:var(--ply);font-size:24px;cursor:pointer}
.sheet__media{aspect-ratio:4/3;background:#fff;border:2px solid var(--ink);display:grid;place-items:center}
.sheet__media img{width:100%;height:100%;object-fit:cover}
.sheet__media svg{width:86%;fill:none;stroke:var(--plate);stroke-width:2}
.sheet__bay{font:600 12px var(--mono);text-transform:uppercase;margin:14px 0 6px;color:var(--plate)}
.sheet h3{font-size:28px;font-weight:900}
.sheet__maker{font:600 13px var(--mono);margin:8px 0}
.sheet__price{font:900 30px/1 var(--f);font-stretch:90%;margin:0 0 18px}
.sheet__price small{font:600 12px var(--mono);opacity:.6}
.sheet .btn--line{color:var(--ink)}
@media (min-width:700px){.sheet{align-items:center}.sheet__card{border:2px solid var(--ink);border-top-width:4px}}

/* Reveal */
.reveal-on .sec-head,.reveal-on .aisle,.reveal-on .steps li,.reveal-on .makers__grid li,.reveal-on .visit,.reveal-on .use{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-on .in{opacity:1!important;transform:none!important}
.reveal-on .makers__grid li:nth-child(2n){transition-delay:.06s}
.still .shutter,.still .plate,.still .fp rect,.still .fp path,.still .fp text{transition:none!important}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}
.sheet[hidden]{display:none}
@media (max-width:999px){.hero__stage{height:40svh;min-height:280px}.hero__copy{padding-top:22px}.hero h1{font-size:clamp(42px,12vw,96px)}.lead{font-size:16px;margin-bottom:18px}}
/* Headings at normal width (Aleran, 2026-11-02: stretched headings read badly) */
h1,h2,h3,.hero h1,.hd__name,.hd__nav a,.ft__brand p,.bay__name{font-stretch:92%;letter-spacing:-.015em}
/* Desktop hero fills exactly one screen, the drawn floor edge to edge */
@media (min-width:1000px){
  .hero{height:100svh;min-height:640px;grid-template-rows:1fr}
  .hero__stage{height:100%}
  .hero__floor svg{display:block;position:absolute;inset:0}
  .hero h1{font-size:clamp(56px,7.4vw,132px)}
}
/* The generic section padding was framing the hero and leaving a dark band under it */
section.hero{padding:56px 0 0}
/* Desktop hero, second pass (Aleran, 2026-11-02): the floor plan is drawn whole, below the plate,
   on a grid that fills the stage, instead of being cropped at the edges. Smaller headline. */
@media (min-width:1000px){
  .hero__stage{background:#1b1813 linear-gradient(rgba(255,178,26,.07) 1px,transparent 1px) 0 0/40px 40px,linear-gradient(90deg,rgba(255,178,26,.07) 1px,transparent 1px) 0 0/40px 40px}
  .hero__floor{inset:30% 5% 6%}
  .hero__floor svg{preserveAspectRatio:xMidYMid}
  .hero__floor rect[fill]{display:none}
  .hero h1{font-size:clamp(48px,5.4vw,104px)}
}
@media (min-width:1000px){.hero__floor .fp-svg{width:100%;height:100%}}
.visit__addr{font-style:normal;font-size:20px;font-weight:700;line-height:1.4;margin-bottom:6px}
/* Footer credit */
.ft__credit{margin:40px 0 10px;padding-top:16px;border-top:1px solid rgba(236,225,201,.14);font-size:13px;opacity:.7}
.ft__credit a{font-weight:700;text-decoration:none;border-bottom:1px solid currentColor}
.ft__credit a:hover{color:var(--sig)}
/* Every machine card one width and one height (Aleran, phone check) */
.bay__btn{width:100%}
.bay__maker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bay__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.4em}
/* Same card height on every width: fixed text rows */
.bay__fp{white-space:nowrap;overflow:hidden;height:16px;flex:none}
.bay__fp em{overflow:hidden;text-overflow:ellipsis}
.bay__price{min-height:22px;white-space:nowrap}
/* Footer ends with a normal bottom padding; extra room only while the preview bar is showing */
.ft{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
html[data-pb] .ft{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
.ft__credit{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:0}
.ft__credit a.ft__emp{border:0;display:inline-flex;line-height:0;opacity:.95}
.ft__credit a.ft__emp:hover{opacity:1}
.ft__credit a.ft__emp img{height:18px;width:auto;display:block}
.ft__credit a.ft__emp:focus-visible{outline:2px solid var(--sig);outline-offset:3px}
/* Dim only the credit text; the EmporNAT logo keeps its own colours */
.ft__credit{opacity:1;color:rgba(236,225,201,.7)}
.ft__credit a.ft__emp,.ft__credit a.ft__emp:hover{opacity:1}