/* CEDRO site v4 (2026-10-09): catalogue site. Light Nordic palette, Inter only. */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("/fonts/inter-600.woff2") format("woff2")}

:root{
  --bg:#ffffff;--bg-2:#f4f3ef;--ink:#1c1e1b;--ink-2:#3a3d38;--muted:#6c7068;--line:#e3e2dc;
  --green:#2c4a3b;--green-2:#22392d;--green-ink:#15231b;--oak:#a87b4f;
  --radius:14px;--radius-sm:10px;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-h1:clamp(2.2rem,1.4rem + 3.4vw,4.2rem);--fs-h2:clamp(1.7rem,1.2rem + 2vw,2.8rem);--fs-h3:1.2rem;
  --fs-lead:clamp(1.05rem,.98rem + .35vw,1.25rem);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --hdr:72px;
  --shadow:0 18px 40px -20px rgba(20,24,20,.28);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font:400 1.0625rem/1.6 var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.lock{overflow:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
@media (hover:hover){a:not([class]):hover,.crumbs a:hover,.compare tbody th a:hover{text-decoration:underline}.lang:hover{opacity:1}}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.wrap{width:min(1280px,100% - 2*clamp(16px,4vw,48px));margin-inline:auto}
.sr,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;top:10px;left:10px;z-index:200;background:#fff;padding:10px 14px;border-radius:8px}
main:focus{outline:none}

h1,h2,h3,h4{font-weight:600;letter-spacing:-.025em;line-height:1.1;color:var(--ink);text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.3}
p{text-wrap:pretty}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.lead{font-size:var(--fs-lead);color:var(--ink-2);line-height:1.55}
.muted{color:var(--muted);font-size:.95rem}
.note{color:var(--muted);font-size:.875rem;margin-top:28px;max-width:85ch}
.caption,figcaption{color:var(--muted);font-size:.8rem;margin-top:8px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--green);color:#fff;font-weight:600;font-size:.95rem;text-decoration:none;border:1px solid var(--green);transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-sm{min-height:40px;padding:0 18px;font-size:.875rem}
.btn-light{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-block{width:100%}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--green-2)}
  .btn-light:hover{background:rgba(255,255,255,.26)}
  .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
}

/* Header */
.hdr{position:sticky;top:0;z-index:50;height:var(--hdr);background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line);transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.hdr-over{position:fixed;inset:0 0 auto;background:transparent;border-color:transparent;color:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr-over.solid{background:rgba(255,255,255,.94);color:var(--ink);border-color:var(--line);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}
.hdr-in{height:100%;display:flex;align-items:center;gap:28px}
.logo{font-weight:600;font-size:1.35rem;letter-spacing:.16em;text-decoration:none}
.logo span{color:var(--oak)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:8px;text-decoration:none;font-size:.92rem;font-weight:500;opacity:.88;transition:background-color 160ms ease,opacity 160ms ease}
.nav a[aria-current]{opacity:1;box-shadow:inset 0 -2px 0 currentColor;border-radius:0}
@media (hover:hover){.nav a:hover{opacity:1;background:rgba(127,127,127,.12)}}
.lang{font-size:.85rem;font-weight:600;text-decoration:none;padding:6px 8px;opacity:.8}
.hdr-over:not(.solid) .hdr-cta{background:#fff;color:var(--ink);border-color:#fff}
.burger{display:none;width:44px;height:44px;margin-left:auto;position:relative}
.burger span:not(.sr){position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform 200ms var(--ease-out)}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
/* inset alone is not enough: .hdr has backdrop-filter, which makes it the containing block of this fixed drawer, so give it an explicit viewport height */
.drawer{position:fixed;inset:var(--hdr) 0 auto;height:calc(100vh - var(--hdr));height:calc(100dvh - var(--hdr));background:#fff;color:var(--ink);overflow:auto;overscroll-behavior:contain;padding:16px 0 calc(40px + env(safe-area-inset-bottom))}
.drawer nav{display:flex;flex-direction:column}
.drawer a:not(.btn){padding:16px 0;border-bottom:1px solid var(--line);font-size:1.15rem;font-weight:500;text-decoration:none}
.drawer .btn{margin-top:24px}
@media (max-width:1100px){.nav,.hdr-cta{display:none}.burger{display:block}.lang{margin-left:auto}.burger{margin-left:0}}

/* Hero */
.hero{position:relative;min-height:min(92svh,860px);display:flex;align-items:flex-end;color:#fff;isolation:isolate}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,14,11,.55) 0%,rgba(10,14,11,.15) 55%,rgba(10,14,11,0) 75%),linear-gradient(180deg,rgba(10,14,11,.45) 0%,rgba(10,14,11,0) 28%,rgba(10,14,11,.15) 50%,rgba(10,14,11,.72) 100%)}
.hero-in{padding:140px 0 clamp(48px,8vw,96px)}
.hero h1{color:#fff;max-width:16ch}
.hero .eyebrow{color:#e6dccd}
.hero-sub{font-size:var(--fs-lead);max-width:52ch;margin-top:18px;color:rgba(255,255,255,.9)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.facts-band{border-bottom:1px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(4,1fr)}
.facts div{padding:28px 20px 28px 0;display:flex;flex-direction:column;gap:4px}
.facts div+div{padding-left:24px;border-left:1px solid var(--line)}
.facts strong{font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.facts span{color:var(--muted);font-size:.9rem}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.facts div{padding:20px 12px}.facts div+div{padding-left:12px}.facts div:nth-child(3){border-left:0;padding-left:0}.facts div:nth-child(n+3){border-top:1px solid var(--line)}}

/* Sections */
.sec{padding-block:clamp(64px,9vw,120px)}
.sec-tight{padding-top:24px}
.sec-alt{background:var(--bg-2)}
.sec-dark{background:var(--green-ink);color:#e9ece8}
.sec-dark h2,.sec-dark h3{color:#fff}.sec-dark .eyebrow{color:#cdb595}.sec-dark .note,.sec-dark p{color:rgba(233,236,232,.78)}
.sec-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(32px,4vw,56px)}
.page-head h1{max-width:20ch;margin-bottom:18px}
.page-head .lead{max-width:62ch}
.page-head .btn{margin-top:28px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.split h2{margin-bottom:18px}
.split .muted{margin-top:16px}
.split-img img{border-radius:var(--radius);width:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:900px){.split{grid-template-columns:1fr}}

.ticks,.dashes{list-style:none;display:grid;gap:10px;margin-top:20px}
.ticks li,.dashes li{position:relative;padding-left:28px}
.ticks li::before{content:"";position:absolute;left:2px;top:.5em;width:12px;height:7px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.sec-dark .ticks li::before{border-color:#cdb595}
.dashes li::before{content:"";position:absolute;left:2px;top:.8em;width:12px;height:2px;background:var(--muted)}

/* Product lines */
.lines{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.line{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:transform 240ms var(--ease-out),box-shadow 240ms ease}
.line img{aspect-ratio:16/10;object-fit:cover;width:100%}
.line>div{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.line p:not(.eyebrow){color:var(--muted)}
.line .eyebrow{margin:0}
.more{margin-top:auto;padding-top:8px;font-weight:600;color:var(--green)}
@media (hover:hover){.line:hover{transform:translateY(-3px);box-shadow:var(--shadow)}}
@media (max-width:900px){.lines{grid-template-columns:1fr}}

/* Model cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.card-wrap{display:contents}
.card-wrap[hidden]{display:none}
.card{display:flex;flex-direction:column;text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform 240ms var(--ease-out),box-shadow 240ms ease}
.card-img{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--bg-2)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--ease-out)}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.card-top h3{font-size:1.3rem}
.pill{font-size:.8rem;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--bg-2);color:var(--ink-2)}
.card-tag{color:var(--muted);font-size:.92rem}
.card-facts{display:flex;gap:24px;margin:10px 0 4px}
.card-facts dt{font-size:.75rem;color:var(--muted)}
.card-facts dd{font-weight:600}
.card-price{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.card-price small{color:var(--muted);font-size:.8rem}
.card-price strong{font-size:1.3rem;letter-spacing:-.01em}
@media (hover:hover) and (pointer:fine){.card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.card:hover .card-img img{transform:scale(1.03)}}
.cards-scroll{grid-auto-flow:column;grid-auto-columns:minmax(280px,1fr);grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px}
.cards-scroll .card{scroll-snap-align:start}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.filters button{padding:9px 16px;border-radius:999px;border:1px solid var(--line);font-size:.9rem;font-weight:500;transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease}
.filters button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters button:active{transform:scale(.97)}

.table-wrap{overflow-x:auto;margin-top:48px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.compare tbody th,.compare thead th:first-child{position:sticky;left:0;background:var(--bg);box-shadow:1px 0 0 var(--line)}
.sec-alt .compare tbody th,.sec-alt .compare thead th:first-child{background:var(--bg-2)}
.compare{width:100%;border-collapse:collapse;font-size:.95rem;min-width:640px}
.compare caption{text-align:left;font-weight:600;font-size:1.2rem;margin-bottom:14px}
.compare th,.compare td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.compare thead th{font-size:.78rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.compare tbody th a{font-weight:600;text-decoration:none;color:var(--green)}
.compare.small{min-width:0;margin-top:16px;font-size:.88rem}
.compare.small th,.compare.small td{padding:8px 10px}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);margin-top:56px}
.sec>.incl,.wrap.incl{margin-top:0}
.incl>div{background:var(--bg-2);border-radius:var(--radius);padding:28px}
.sec-alt .incl>div{background:#fff}
.incl p{margin-top:12px;color:var(--ink-2)}
@media (max-width:760px){.incl{grid-template-columns:1fr}}
.cta-band{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.cta-band h2{margin-bottom:8px}

/* Model page */
.crumbs{padding:20px 0 0;font-size:.85rem;color:var(--muted)}
.crumbs a{text-decoration:none}
.model-top{padding:20px 0 clamp(48px,6vw,80px)}
.model-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(320px,1fr);gap:clamp(24px,4vw,56px);align-items:start}
@media (max-width:980px){.model-grid{grid-template-columns:1fr}}
.g-main{display:block;width:100%;border-radius:var(--radius);overflow:hidden;cursor:zoom-in;background:var(--bg-2)}
.g-main img{width:100%;aspect-ratio:16/9;object-fit:cover}
.g-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:10px}
.g-thumbs button{border-radius:8px;overflow:hidden;opacity:.7;outline:2px solid transparent;outline-offset:-2px;transition:opacity 160ms ease}
.g-thumbs button[aria-current],.g-thumbs button:focus-visible{opacity:1;outline-color:var(--green)}
.g-thumbs img{aspect-ratio:16/10;object-fit:cover;width:100%}
@media (hover:hover){.g-thumbs button:hover{opacity:1}}
.spec{position:sticky;top:calc(var(--hdr) + 20px)}
.spec h1{font-size:clamp(2rem,1.5rem + 2vw,3rem)}
.spec-intro{color:var(--ink-2);margin-top:14px}
.spec-list{display:grid;grid-template-columns:1fr 1fr;margin-top:24px;border-top:1px solid var(--line)}
.spec-list div{padding:12px 0;border-bottom:1px solid var(--line)}
.spec-list div:nth-child(odd){padding-right:12px}
.spec-list dt{font-size:.78rem;color:var(--muted)}
.spec-list dd{font-weight:600;font-size:1.05rem}
.price-box{margin-top:24px;padding:24px;border-radius:var(--radius);background:var(--bg-2)}
.price-label{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.price{margin:4px 0 6px}
.price strong{font-size:2.2rem;letter-spacing:-.03em}
.price span{color:var(--muted);font-weight:500}
.price-note{font-size:.9rem;color:var(--ink-2);margin-bottom:18px}
.ideal{margin-top:20px;font-size:.95rem;color:var(--ink-2)}
@media (max-width:980px){.spec{position:static}}

.plan-row{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:24px 0}
.plan-row+.plan-row{border-top:1px solid var(--line)}
.plan-zoom{display:block;width:100%;background:#fff;border-radius:var(--radius);padding:clamp(12px,2vw,28px);cursor:zoom-in}
.plan-zoom img{width:100%}
.rooms h3{margin-bottom:12px}
.rooms table{width:100%;border-collapse:collapse;font-size:.95rem}
.rooms td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.rooms .code{width:44px;color:var(--muted);font-variant-numeric:tabular-nums}
.rooms .area{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:12px}
@media (max-width:900px){.plan-row{grid-template-columns:1fr}}

.lightbox{position:fixed;inset:0;z-index:300;background:rgba(8,10,9,.94);display:flex;align-items:center;justify-content:center;padding:56px 64px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lightbox.plan-mode img{background:#fff;padding:16px}
.lightbox button{position:absolute;color:#fff;font-size:2.4rem;line-height:1;width:56px;height:56px;border-radius:50%}
.lb-close{top:10px;right:12px}
.lb-prev{left:8px;top:50%;translate:0 -50%}
.lb-next{right:8px;top:50%;translate:0 -50%}
.lightbox.plan-mode .lb-prev,.lightbox.plan-mode .lb-next{display:none}
@media (hover:hover){.lightbox button:hover{background:rgba(255,255,255,.12)}}
@media (max-width:600px){.lightbox{padding:56px 8px}}

/* Steps, specs */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.steps li{border-top:1px solid rgba(255,255,255,.2);padding-top:20px}
.steps span{display:inline-block;font-size:.85rem;font-weight:600;color:#cdb595;margin-bottom:12px}
.steps h3{margin-bottom:8px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);border-radius:var(--radius);overflow:hidden}
.specs div{background:var(--green-ink);padding:24px}
.specs dt{font-size:.8rem;color:#cdb595;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.specs dd{margin-top:6px}
.specs-v{display:block;font-size:1.6rem;font-weight:600;color:#fff;margin-bottom:4px;letter-spacing:-.02em}
.specs p{font-size:.9rem}
@media (max-width:760px){.specs{grid-template-columns:1fr 1fr}}

/* Products */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prod{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;text-decoration:none}
.prod img{aspect-ratio:3/2;object-fit:cover;width:100%}
.prod>div{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod p{color:var(--ink-2);font-size:.95rem}
.prod-spec{margin-top:auto;padding-top:10px;font-weight:600;color:var(--green)!important;font-size:.9rem!important}
.prod-link{background:var(--bg-2)}
@media (max-width:900px){.prod-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.prod-grid{grid-template-columns:1fr}}
.ben{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.ben div{border-top:2px solid var(--green);padding-top:16px}
.ben p{color:var(--muted);margin-top:6px}
@media (max-width:760px){.ben{grid-template-columns:1fr 1fr}}
.nh{display:grid;gap:24px}
.nh-item{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(20px,3vw,40px);background:#fff;border-radius:var(--radius);overflow:hidden;align-items:start}
.nh-item img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.nh-item>div{padding:28px 28px 28px 0}
.nh-item p{margin-top:8px;color:var(--ink-2)}
@media (max-width:760px){.nh-item{grid-template-columns:1fr}.nh-item>div{padding:0 22px 24px}}
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.who-item{border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.who-item>p:not(.eyebrow){color:var(--ink-2);margin-top:8px}
@media (max-width:1000px){.who{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.who{grid-template-columns:1fr}}
.gal3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gal3 img{border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;width:100%}
@media (max-width:760px){.gal3{grid-template-columns:1fr}}
.contact-list{margin-top:28px;display:grid;gap:14px}
.contact-list dt{font-size:.78rem;color:var(--muted)}
.contact-list dd{font-weight:600}
.page-head .muted{margin-top:24px}

/* Forms */
.lead-form{display:grid;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,3vw,32px)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.lead-form label{display:grid;gap:6px;font-size:.85rem;font-weight:500;color:var(--ink-2)}
.lead-form input:not([type=checkbox]),.lead-form select,.lead-form textarea{font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #cfcec7;border-radius:var(--radius-sm);padding:12px 14px;width:100%;transition:border-color 160ms ease,box-shadow 160ms ease}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(44,74,59,.15)}
.lead-form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400}
.lead-form .check input{margin-top:4px;accent-color:var(--green);width:18px;height:18px;flex:none}
.lead-form fieldset{border:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lead-form legend{font-size:.85rem;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.lead-form .btn{justify-self:start}
.lead-form [aria-invalid=true]{border-color:#b3261e!important}
.hp{position:absolute;left:-9999px}
.form-msg{font-size:.95rem;min-height:1.4em}
.form-msg.ok{color:var(--green);font-weight:600}
.form-msg.err{color:#b3261e}

/* Footer */
.ftr{background:var(--green-ink);color:rgba(233,236,232,.78);padding:64px 0 32px;font-size:.92rem}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.ftr .logo{color:#fff;display:inline-block;margin-bottom:14px}
.ftr p+p{margin-top:8px}
.ftr nav{display:flex;flex-direction:column;gap:8px}
.ftr-h{color:#fff;font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px}
.ftr p a,.contact-list a,.page-head .muted a{display:inline-block;padding:3px 0}
.ftr a{text-decoration:none}
@media (hover:hover){.ftr a:hover{color:#fff}}
.ftr-legal{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;display:grid;gap:6px}
@media (max-width:760px){.ftr-grid{grid-template-columns:1fr 1fr}.ftr-grid>div:first-child{grid-column:1/-1}}

/* v4.1: gallery tabs, card hover interior, projects, before/after */
.g-tabs{display:inline-flex;gap:4px;padding:4px;background:var(--bg-2);border-radius:999px;margin-bottom:12px}
.g-tabs button{padding:8px 16px;border-radius:999px;font-size:.9rem;font-weight:600;color:var(--muted);transition:background-color 160ms ease,color 160ms ease}
.g-tabs button span{font-weight:500;opacity:.7;margin-left:4px}
.g-tabs button[aria-selected=true]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.g-thumbs button[hidden]{display:none}
.card-img .card-int{position:absolute;inset:0;opacity:0;transition:opacity 400ms ease}
@media (hover:hover){.card:hover .card-int{opacity:1}}
.card-badge{position:absolute;left:12px;top:12px;background:rgba(255,255,255,.92);color:var(--ink);font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:999px}
.proj-head{max-width:760px;margin-bottom:28px}
.proj-head h2{margin-bottom:14px}
.proj-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
.proj-grid .big{grid-row:1/3}
.proj-grid img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.proj-grid figure{display:flex;flex-direction:column;min-height:0}
.proj-grid figure img{flex:1;min-height:0}
@media (max-width:760px){.proj-grid{grid-template-columns:1fr;grid-template-rows:none}.proj-grid .big{grid-row:auto}}
.strip-label{margin:28px 0 10px;font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.strip img{border-radius:var(--radius-sm);aspect-ratio:16/10;object-fit:cover;width:100%}
@media (max-width:760px){.strip{grid-template-columns:1fr 1fr}}
.ba-grid{display:grid;grid-template-columns:1fr;gap:24px}
.ba-tag{position:absolute;top:12px;font-size:.75rem;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;z-index:2}
.ba-tag-l{left:12px}.ba-tag-r{right:12px}
.pair-imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair-imgs>div{position:relative}
.pair-imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm)}
@media (min-width:1000px){.ba-grid{grid-template-columns:1fr 1fr}}
.wa-fab{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:60;width:56px;height:56px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:var(--shadow);transition:transform 160ms var(--ease-out)}
.wa-fab:active{transform:scale(.95)}
@media (hover:hover) and (pointer:fine){.wa-fab:hover{transform:scale(1.05)}}
body.lock .wa-fab{display:none}
.hero-tag{position:absolute;right:16px;bottom:12px;font-size:.72rem;color:rgba(255,255,255,.75)}

.card-tk{display:flex;flex-wrap:wrap;column-gap:6px;align-items:baseline;font-size:.9rem;color:var(--ink-2);margin-top:4px}
.card-tk small{color:var(--muted);font-size:.8rem;margin-right:4px}
.price-tk strong{font-size:clamp(1.3rem,1.1rem + 1vw,1.6rem)}

.build{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px;margin-top:8px}
.build figure{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);margin-bottom:14px;background:var(--line)}
.build img{width:100%;height:100%;object-fit:cover}
.build span{font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.build h3{margin:4px 0 6px}
.build p{font-size:.92rem;color:var(--ink-2)}
@media (max-width:900px){.build{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.build{gap:22px 12px}.build p{font-size:.85rem}}

/* 2026-10-09 good-css pass */
@media (max-width:760px){
  .wa-fab{width:48px;height:48px;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
  .ftr{padding-bottom:88px} /* last footer line never sits under the WhatsApp button */
}
.nw{white-space:nowrap}
.price,.card-price,.card-tk,.compare td{font-variant-numeric:tabular-nums}
/* form: flag a field only after the visitor has interacted with it */
.lead-form :is(input,select,textarea):user-invalid{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.lead-form textarea{field-sizing:content;min-height:5.5lh;max-height:16lh}
/* soft crossfade between pages (same-origin), only when motion is welcome */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:220ms;animation-timing-function:var(--ease-out)}
}

/* long-form text (privacy policy) */
.prose{max-width:760px;margin-left:0}
.prose h2{margin:40px 0 12px;font-size:1.35rem}
.prose h3{margin:24px 0 8px;font-size:1.05rem}
.prose p,.prose li{margin:0 0 12px;line-height:1.65}
.prose ul{padding-left:1.2em;margin:0 0 12px}

/* 2026-10-12 audit: reduced motion + print */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .card:hover,.line:hover,.btn:active,.filters button:active,.wa-fab:active{transform:none}
}
@media print{
  .hdr,.drawer,.skip,.wa-fab,.lightbox,.lead-form,.filters,.g-tabs,.g-thumbs,.cards-scroll,.cta-band .btn,.price-box .btn,.hdr-cta{display:none!important}
  body{font-size:11pt;color:#000}
  .hero{min-height:0;color:#000}.hero picture,.hero-shade{display:none}.hero h1,.hero .eyebrow,.hero-sub{color:#000}
  .sec,.page-head,.model-top{padding-block:16pt}
  .sec-dark,.ftr{background:none;color:#000}.sec-dark h2,.sec-dark h3,.sec-dark p,.sec-dark .eyebrow,.ftr .logo,.ftr-h,.specs-v,.specs dt{color:#000}
  .specs div{background:none;border:1px solid #999}
  .card,.line,.prod,.who-item,.incl>div{break-inside:avoid;border:1px solid #999;box-shadow:none}
  .table-wrap{overflow:visible}.compare{min-width:0}.compare th,.compare td{white-space:normal}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
  .spec{position:static}
}

/* real-photo strip: four portrait photos under a project */
.proj-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:16px}
.proj-strip img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
@media (max-width:760px){.proj-strip{grid-template-columns:1fr 1fr}}
.proj+.proj{margin-top:56px}
.proj-wide img{width:100%;height:auto;border-radius:var(--radius)}
.proj-strip-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:760px){.proj-strip-3{grid-template-columns:1fr 1fr}}

/* 2026-10-14 home v5: two paths, real build sequence, catalogues */
.nav a{padding:8px 10px;font-size:.9rem;white-space:nowrap}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.path{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:400px;border-radius:var(--radius);overflow:hidden;text-decoration:none;color:#fff;isolation:isolate}
.path img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 600ms var(--ease-out)}
.path::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,14,11,.05) 25%,rgba(10,14,11,.82) 100%)}
.path>div{padding:28px}
.path .eyebrow{color:#e6dccd}
.path h3{color:#fff;font-size:1.5rem;margin-bottom:8px}
.path p:not(.eyebrow){color:rgba(255,255,255,.86);max-width:44ch}
.path .more{display:block;margin-top:14px;color:#fff}
@media (hover:hover){.path:hover img{transform:scale(1.03)}}
@media (max-width:760px){.paths{grid-template-columns:1fr}.path{min-height:300px}}
.seq{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px 20px}
.seq figure{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);margin-bottom:14px;background:var(--line)}
.seq img{width:100%;height:100%;object-fit:cover}
.seq span{font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.seq h3{margin:4px 0 6px}
.seq p{font-size:.92rem;color:var(--ink-2)}
@media (max-width:760px){.seq{grid-template-columns:1fr}}
.cat-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.cat-grid h2{margin-bottom:18px}
.covers{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.covers img{border-radius:var(--radius-sm);box-shadow:var(--shadow);width:100%;aspect-ratio:1191/1685;object-fit:cover;background:var(--bg-2)}
.covers figcaption{margin-top:12px;font-size:.92rem;color:var(--ink);font-weight:600}
.covers .muted{margin-top:6px;font-size:.88rem}
@media (max-width:900px){.cat-grid{grid-template-columns:1fr}}
@media (max-width:480px){.covers{grid-template-columns:1fr}}
.lead-form .radios{grid-template-columns:1fr;gap:8px}
.lead-form .radios .check{font-size:.95rem}
.lead-form .radios input{width:18px;height:18px;accent-color:var(--green);margin-top:3px;flex:none}
.dl{display:grid;gap:10px}
.dl[hidden]{display:none}
.dl .btn{justify-self:stretch;white-space:normal;text-align:center}
.page-catalogues .sec-tight{padding-top:8px}
/* 2026-10-14 professionals page */
.page-head .hero-cta{margin-top:28px}
.page-head .hero-cta .btn{margin-top:0}
.cat-grid .covers:has(figure:only-child){grid-template-columns:minmax(0,320px)}
/* 2026-10-14 proposal form toggle */
.pf{display:grid;gap:14px}
.pf-tabs{justify-self:start;margin-bottom:0;flex-wrap:wrap}
.pf [data-pf-pane][hidden]{display:none}
.lead-form .checks{grid-template-columns:1fr 1fr}
@media (max-width:480px){.lead-form .checks{grid-template-columns:1fr}.pf-tabs button{padding:8px 12px}}
/* 2026-10-15 good-css pass: edge fade on horizontal scrollers (only while they overflow), contained overscroll, optically centred button labels */
@keyframes edge-fade{from,to{--fade:32px}}
@property --fade{syntax:"<length>";inherits:false;initial-value:0px}
.cards-scroll,.table-wrap{overscroll-behavior-x:contain;scroll-padding-inline:4px}
@supports (animation-timeline:scroll()){
  .cards-scroll{animation:edge-fade linear both;animation-timeline:scroll(self inline);
    mask-image:linear-gradient(to right,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
}
@supports (text-box:trim-both cap alphabetic){.btn{text-box:trim-both cap alphabetic}}
.lead-form [hidden]{display:none!important}
/* projects: every photo opens the lightbox */
[data-zoom-group] img{cursor:zoom-in}
[data-zoom-group] img:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.lb-cap{position:absolute;left:64px;right:64px;bottom:16px;text-align:center;color:rgba(255,255,255,.85);font-size:.9rem;line-height:1.35}
@media (max-width:600px){.lb-cap{left:12px;right:12px}}