/* v2/v3 shared: configurator, plan/render, reveal, pano, scroll motion */
.hero__img[data-parallax]{will-change:transform;transform:scale(1.08)}
.js .ph.rv{overflow:hidden}
.js .ph.rv img{transform:scale(1.08);transition:transform 1.4s var(--ease)}
.js .ph.rv.is-in img{transform:none}

/* configurator */
.cf{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.cf__view{margin:0;position:sticky;top:88px}
.cf__img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--alt)}
.cf__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.cf__img img.is-new{opacity:0;transform:scale(1.04)}
.cf__spec{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-top:0}
.cf__spec div{background:var(--bg);padding:12px 12px 14px;min-width:0}
.cf__spec dt{font:11px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cf__spec dd{margin:6px 0 0;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.cf__tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.cf__tabs[hidden]{display:none}
.cf__tabs button{flex:1 0 auto;appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 10px;font:inherit;font-size:15px;color:var(--muted);cursor:pointer;display:flex;gap:6px;align-items:baseline;transition:color .2s var(--ease),border-color .2s var(--ease)}
.cf__tabs button .num{font:11px var(--mono)}
.cf__tabs button[aria-selected=true]{color:var(--ink);border-color:var(--ink)}
.cf__tabs button.is-done .num::after{content:" ✓"}
.cf__tabs button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.cf__hint{margin:18px 0 6px;color:var(--muted)}
.cf__p{border:0;margin:0;padding:18px 0 0;min-width:0}
.cf__p legend{padding:0;margin-bottom:14px;font-size:clamp(22px,2vw,28px);letter-spacing:-.03em;display:flex;gap:10px;align-items:baseline}
.cf__p legend .num{font:12px var(--mono);color:var(--muted)}
.cf.is-js .cf__p legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cf__p .chips{grid-template-columns:minmax(0,1fr)}
.cf__p .chip span{justify-content:space-between;flex-direction:row-reverse;min-height:60px;font-size:17px}
.cf__p .chip b{font:400 11px var(--mono);color:var(--muted)}
.cf__go{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}

/* plan -> render */
.ba{position:relative;user-select:none;touch-action:pan-y}
:is(.v2,.v3) .ba img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}
.ba__top{position:absolute;inset:0;clip-path:inset(0 0 0 var(--p));pointer-events:none}
:is(.v2,.v3) .ba__top img{height:100%}
.ba__h{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;background:#fff;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ba__h::after{content:"↔";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;color:#111;display:grid;place-items:center;font-size:18px}
.ba__l{position:absolute;top:14px;font:11px var(--mono);text-transform:uppercase;letter-spacing:.08em;background:rgba(255,255,255,.9);color:#111;padding:6px 8px;pointer-events:none}
.ba__l--a{left:14px}.ba__l--b{right:14px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba input:focus-visible~.ba__h::after{outline:2px solid var(--focus);outline-offset:2px}
.reveal{position:relative;cursor:crosshair}
:is(.v2,.v3) .reveal img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}
.reveal__top{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
  -webkit-mask:radial-gradient(circle 150px at var(--x,50%) var(--y,50%),#000 98%,transparent);mask:radial-gradient(circle 150px at var(--x,50%) var(--y,50%),#000 98%,transparent)}
:is(.v2,.v3) .reveal__top img{height:100%}
.reveal.is-on .reveal__top{opacity:1}
.reveal.is-tap .reveal__top{opacity:1;-webkit-mask:none;mask:none}
.ba figcaption,.reveal figcaption{margin-top:12px}

/* tours */
.tours{display:grid;gap:var(--gap)}.tours>*{min-width:0}
.ph--video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--alt)}
.pano{margin:0}
.pano__s{overflow-x:auto;scrollbar-width:thin;cursor:grab}
.pano__s img{display:block;height:clamp(260px,38vw,520px);width:auto;max-width:none;aspect-ratio:2000/848}
.pano__s:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pano figcaption{margin-top:12px}

/* markets: 4 + coming next */
.mks--5{grid-template-columns:repeat(5,minmax(0,1fr))}
:is(.v2,.v3) .mks--5 .ph img{aspect-ratio:4/5}
.mk--soon{opacity:.62}
.mk--soon .mk__t::after{content:none}
:is(.v2,.v3) .work .ph img{aspect-ratio:3/2}

@media (max-width:1100px){.mks--5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899px){
  .cf{grid-template-columns:minmax(0,1fr)}
  .cf__view{position:sticky;top:56px;z-index:2}
  .cf__img{aspect-ratio:16/10}
  .cf__spec{grid-template-columns:repeat(6,minmax(0,1fr))}.cf__spec div{grid-column:span 2}.cf__spec div:nth-child(n+4){grid-column:span 3}
  .cf__spec div{padding:8px 6px}
  .cf__spec dt{font-size:10px}.cf__spec dd{font-size:12px;overflow-wrap:break-word;hyphens:auto}
  .cf__p .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cf__p .chip span{min-height:52px;font-size:15px}
  .cf__p .chip b{display:none}
  .mks--5{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.js .ph.rv img,.cf__img img{transition:none;transform:none}}
/* What we make: 2×5 service cards */
.sgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 20px;margin-top:8px}
.sg{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.sg__m{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line);margin-bottom:14px}
.sg__m img,.sg__m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s,object-position 2.4s ease}
.sg__alt{position:absolute;inset:0;opacity:0;transition:opacity .5s;background:var(--surface)}
.sg--swap .sg__alt img{object-fit:contain;padding:6%}
.sg:hover .sg__alt,.sg:focus-visible .sg__alt{opacity:1}
.sg--zoom:hover .sg__m>img,.sg--zoom:focus-visible .sg__m>img{transform:scale(1.07)}
.sg--pan .sg__m img{object-position:0 50%}
.sg--pan:hover .sg__m img,.sg--pan:focus-visible .sg__m img{object-position:100% 50%}
.sg__site{position:absolute;inset:9% 9% 0;background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.18);overflow:hidden}
.sg__bar{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line)}
.sg__bar i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.sg__pg{position:absolute;inset:19px 0 0;overflow:hidden}
.sg__pg img{height:180%;object-position:50% 0;transition:transform 2.4s ease}
.sg--site:hover .sg__pg img,.sg--site:focus-visible .sg__pg img{transform:translateY(-40%)}
.sg__t{font-size:clamp(20px,1.6vw,24px);margin:0 0 6px;letter-spacing:-.015em}
.sg__d{margin:0 0 10px;color:var(--muted);font-size:15px;line-height:1.45}
.sg__h{margin:auto 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sg:hover .sg__t{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
@media (max-width:1100px){.sgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.sgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}.sg__d{font-size:14px}.sg__t{font-size:18px}}
@media (prefers-reduced-motion:reduce){.sg__m img,.sg__m video,.sg__alt{transition:none!important;transform:none!important}}
/* home compare: ?tabla selector */
.tvar[hidden],.e-tsel[hidden]{display:none}
.e-tsel{position:sticky;top:76px;z-index:5;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 24px;padding:8px 10px;background:var(--bg);border:1px solid var(--line);max-width:100%;width:max-content;font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.e-tsel button{width:34px;height:34px;border:1px solid var(--line);background:none;color:inherit;font:inherit;cursor:pointer}
.e-tsel button[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.tvar s{text-decoration-thickness:1px;color:var(--muted)}
/* 1 split */
/* 2 rows */
/* 3 mosaic */
/* 4 slider */
/* 5 three columns */
/* 6 dark band */
/* 7 tickets */
/* 8 magazine */
/* 9 timeline */
/* 10 calendar */
/* 11 expanding panels */
/* 12 cards */
/* 13 statement */
/* 14 contact sheet */
/* 15 questions */
@media (max-width:899px){
  .e-tsel{top:64px;gap:4px;padding:6px}.e-tsel span{flex-basis:100%}.e-tsel button{width:30px;height:30px}
}

/* Compare table: ten treatments of one table (/?tabla=N) */
.ct-w{position:relative}
.ct{display:block;width:100%;font-size:17px;line-height:1.35}
.ct thead,.ct tbody{display:block}
.ct tr{display:grid;grid-template-columns:28% 36% 36%}
.ct th,.ct td{display:block;padding:20px 24px;text-align:left;font-weight:400;min-width:0}
.ct tbody th{font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);align-self:stretch;display:flex;align-items:center}
.ct thead th{font-size:15px;font-weight:600}
.ct tbody tr{border-top:1px solid var(--line)}
.ct .ct__o{color:var(--muted)}
.ct tbody .ct__n{color:var(--ink);font-weight:600}
.ct__i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* 1 our column in solid ink */
.ct--1 .ct__n,.ct--1 tbody .ct__n{background:var(--ink);color:#fff}
.ct--1 thead .ct__n{border-radius:12px 12px 0 0}.ct--1 tbody tr:last-child .ct__n{border-radius:0 0 12px 12px}
.ct--1 tbody tr{border-top:0;box-shadow:inset 0 1px 0 var(--line)}.ct--1 tbody .ct__n{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* 2 crosses and ticks */
.ct--2 td{display:flex;gap:12px;align-items:flex-start}.ct--2 .ct__i{margin-top:2px}
.ct--2 .ct__o .ct__i{color:#A33A2A}.ct--2 .ct__n .ct__i{color:#1F7A4D}
/* 3 our column as a raised card */
.ct-w--3{padding-block:20px}
.ct-w--3::before{content:"";position:absolute;inset:0 0 0 64%;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(28,27,25,.16),0 0 0 1px var(--line)}
.ct--3{position:relative}.ct--3 tbody .ct__n{font-size:19px}.ct--3 .ct__o{opacity:.9}
/* 4 a picture on top of each column */
.ct--4 thead tr{align-items:end}
.ct--4 thead img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:8px;margin-bottom:12px}
.ct--4 thead .ct__o img{filter:grayscale(1);opacity:.8}
/* 5 big type */
.ct--5 tr{grid-template-columns:18% 30% 52%;align-items:center}
.ct--5 tbody .ct__n{font:400 clamp(26px,3vw,44px)/1.1 var(--serif);letter-spacing:-.02em}
.ct--5 tbody .ct__o{text-decoration:line-through;text-decoration-thickness:1px}
.ct--5 tbody td,.ct--5 tbody th{padding-block:28px}
/* 6 face to face, label in the middle */
.ct--6 tr{grid-template-columns:1fr 170px 1fr}
.ct--6 th:first-child,.ct--6 td:first-child{order:2;justify-content:center;text-align:center}
.ct--6 .ct__o{order:1;text-align:right}.ct--6 .ct__n{order:3}
.ct--6 tbody .ct__o{background:var(--alt)}.ct--6 tbody .ct__n{background:var(--ink);color:#fff}
.ct--6 tbody tr{border-top:0;margin-top:6px}
/* 7 dark table, our column in white */
.ct-w--7{background:var(--ink);border-radius:16px;padding:12px 12px 12px 0}
.ct--7 tbody tr{border-top-color:rgba(255,255,255,.16)}
.ct--7 th,.ct--7 .ct__o,.ct--7 tbody th{color:rgba(255,255,255,.76)}
.ct--7 thead .ct__o{color:#fff}
.ct--7 .ct__n,.ct--7 tbody .ct__n{background:#fff;color:var(--ink)}
.ct--7 thead .ct__n{border-radius:10px 10px 0 0}.ct--7 tbody tr:last-child .ct__n{border-radius:0 0 10px 10px}
/* 8 the delivery row drawn to scale */
.ct__bar{display:block;height:10px;margin-top:12px;background:#BDB8AD;border-radius:5px;width:100%}
.ct__bar--n{background:var(--ink);width:7%;min-width:12px}
.ct--8 tbody tr:first-child td{font-size:24px;letter-spacing:-.02em}
/* 9 our column sits on a render */
.ct-w__ph{position:absolute;inset:0 0 0 64%;border-radius:14px;overflow:hidden}
.ct-w__ph img{width:100%;height:100%;object-fit:cover;display:block}
.ct-w__ph::after{content:"";position:absolute;inset:0;background:rgba(20,18,15,.76)}
.ct--9{position:relative}.ct--9 .ct__n,.ct--9 tbody .ct__n{color:#fff}
.ct--9 tbody tr{border-top:0;box-shadow:inset 0 1px 0 var(--line)}.ct--9 tbody .ct__n{box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
/* 10 yes or no */
.ct--10 tr{grid-template-columns:1fr 150px 150px}
.ct--10 tbody th{font:500 clamp(18px,1.7vw,24px)/1.25 var(--sans,inherit);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.ct--10 td,.ct--10 thead th{text-align:center;justify-content:center}
.ct--10 tbody td{display:flex;align-items:center;justify-content:center}
.ct--10 .ct__i{width:26px;height:26px}
.ct--10 tbody .ct__o{color:#A33A2A}.ct--10 tbody .ct__n{color:#1F7A4D;background:var(--alt)}.ct--10 thead .ct__n{background:var(--alt);border-radius:10px 10px 0 0}
@media (max-width:767px){
  .ct{font-size:15px}
  .ct tr,.ct--5 tr,.ct--6 tr{grid-template-columns:1fr 1fr}
  .ct thead td{display:none}
  .ct th,.ct td{padding:14px 12px}
  .ct tbody th{grid-column:1/-1;padding:16px 12px 2px}
  .ct--1 tbody th,.ct--9 tbody th{padding-bottom:10px}
  .ct-w--3::before,.ct-w__ph{left:50%}
  .ct-w--7{padding:8px}
  .ct--6 tbody th:first-child{order:0;justify-content:flex-start;text-align:left}
  .ct--1 tbody th{background:linear-gradient(90deg,transparent 50%,var(--ink) 50%)}
  .ct--7 tbody th{background:linear-gradient(90deg,transparent 50%,#fff 50%)}
  .ct--6 .ct__o{order:1;text-align:left}.ct--6 .ct__n{order:2}.ct--6 thead .ct__o{order:1}.ct--6 thead .ct__n{order:2}
  .ct--5 tbody td,.ct--5 tbody th{padding-block:12px}.ct--5 tbody th{padding-bottom:0}.ct--5 tbody .ct__n{font-size:24px}
  .ct--8 tbody tr:first-child td{font-size:19px}
  .ct--10 tr{grid-template-columns:1fr 76px 76px}
  .ct--10 tbody th{grid-column:auto;padding:14px 8px 14px 0;font-size:16px}
  .ct--10 thead tr{grid-template-columns:1fr 76px 76px}.ct--10 thead td{display:block}
  .ct--10 th,.ct--10 td{padding-inline:6px}.ct--10 thead th{font-size:12px}
}