@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-semi-condensed-latin-600-normal.woff2) format('woff2')}

/* Tokens: Xamfrà design system (docs/DESIGN-SYSTEM-XAMFRA.md). Yellow means selection and focus, nothing else. */
:root{
  --paper:#F6F7F4;--paper2:#ECEFEB;--ink:#17212C;--ink2:#4B5967;--rule:#CDD5D9;--acc:#F2B705;
  --night:#141D27;--night2:#1B2632;--nink:#E8EEF3;--nink2:#A9B8C6;--nrule:#2B3947;
  --cond:'Barlow Semi Condensed','Barlow',system-ui,sans-serif;
  --err:#A3262A;
  --gut:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 'Barlow',system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
h1,h2,h3,p,figure,ul,ol{margin:0}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.num,.status b,.fig b{font-family:var(--cond);font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.skip{position:absolute;left:12px;top:-60px;z-index:10;padding:10px 14px;background:var(--ink);color:var(--paper);text-decoration:none}
.skip:focus{top:12px}

/* Chamfer: the Eixample corner cut, the only ornament. Panels cut two opposite corners; tiles cut all four. */
.frame{--c:18px;padding:1px;background:var(--rule);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.frame img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--paper2);clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}
.frame.dark{background:var(--nrule)}

/* Header */
.top{border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:10px 22px;min-height:68px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:21px;letter-spacing:-.01em;text-decoration:none}
.mark{width:28px;height:28px;background:var(--ink);display:grid;place-items:center;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.mark i{width:11px;height:11px;background:var(--acc);clip-path:inherit}
.credit{font-size:15px;color:var(--ink2)}
.top nav{margin-left:auto;display:flex;gap:22px;font-size:16px}
.top nav a{text-decoration:none;padding:6px 0}
.top nav a:hover{text-decoration:underline}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font:500 16px/1.2 'Barlow',sans-serif;text-decoration:none;white-space:nowrap}
.btn:hover{background:#25313d;text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--paper2)}
.btn.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.light:hover{background:#fff}
.btn.sm{min-height:42px;padding:0 16px;font-size:15px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px 56px;padding-top:56px;align-items:end}
.hero h1{font-size:58px;line-height:1.02;font-weight:600;letter-spacing:-.028em;max-width:12.5em}
.intro .lead{font-size:19px;line-height:1.5;color:var(--ink2);max-width:31em}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.note{margin-top:12px;font-size:14px;color:var(--ink2)}
.stage{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"shot" "cap";gap:14px 18px;margin-top:28px}
.js .stage{grid-template-columns:156px minmax(0,1fr);grid-template-areas:"qs shot" ". cap"}
.qs{grid-area:qs;display:grid;grid-template-rows:repeat(4,1fr);gap:10px;align-self:stretch}
.qs[hidden]{display:none}
.js .qs[hidden]{display:grid}
.shot{grid-area:shot;position:relative}
.shot img{transition:opacity .18s ease}
.shot.is-loading img{opacity:.55}
.stage-cap{grid-area:cap;display:flex;flex-wrap:wrap;gap:4px 24px;align-items:baseline;min-height:3.4em}
.stage-cap b{font-size:21px;font-weight:600;letter-spacing:-.01em}
.stage-cap span{font-size:16px;color:var(--ink2);max-width:46em}

/* View tile: an octagonal Cerdà block, as in the viewer's views grid. Selected = yellow. */
.q{--c:14px;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:12px 8px;min-height:84px;border:0;background:var(--rule);color:var(--ink);font:500 15px/1.15 'Barlow',sans-serif;text-align:center;cursor:pointer;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.q::before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--paper);clip-path:inherit}
.q:hover::before{background:var(--paper2)}
.q[aria-selected="true"],.q.on{background:#C79600}
.q[aria-selected="true"]::before,.q.on::before{background:var(--acc)}
.q:focus-visible{outline:none;box-shadow:none;background:var(--ink)}
.q:focus-visible::before{inset:3px}
.q svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ramp{display:flex;width:58px;height:4px}
.tq{font-size:13.5px;font-weight:400;line-height:1.3;color:var(--ink2);max-width:12em}
.q[aria-selected="true"] .tq{color:var(--ink)}
.ramp i{flex:1}

/* Status strip, after the viewer's status bar */
.status{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin-top:44px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.status li{padding:13px 22px;border-left:1px solid var(--rule);font-size:15.5px;line-height:26px;color:var(--ink2)}
.status li:first-child{border-left:0;padding-left:0}
.status b{font-size:19px;line-height:26px;color:var(--ink);margin-right:3px}

/* Sections */
.sect{padding-top:96px}
.head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 56px;align-items:end}
.head h2,.services h2,.sources h2{font-size:38px;line-height:1.08;font-weight:600;letter-spacing:-.02em}
.head p{font-size:18px;color:var(--ink2);max-width:40em}

/* Reading a view */
.how{display:grid;grid-template-columns:minmax(0,190px) 44px minmax(0,1.25fr) minmax(0,1fr);gap:20px 32px;margin-top:44px;padding:36px 0 0;border-top:1px solid var(--rule)}
.part{display:contents}
.part .vis{grid-row:1;min-height:250px;display:flex;align-items:center}
.part .cap{grid-row:2;font-size:15.5px;color:var(--ink2);max-width:24em}
.p1 .vis,.p1 .cap{grid-column:1}
.arrow{grid-column:2;grid-row:1}
.p2 .vis,.p2 .cap{grid-column:3}
.p3 .vis,.p3 .cap{grid-column:4}
.p2 .vis svg{width:100%;max-width:440px}
.part .cap b{display:block;color:var(--ink);font-size:17px;font-weight:600}
.how .q{width:150px;min-height:120px;cursor:default;font-size:16px}
.how .q svg{width:28px;height:28px}
.ask{font-size:19px;font-weight:600;line-height:1.25;margin-top:14px}
.arrow{display:flex;align-items:center;justify-content:center;min-height:250px}
.arrow svg{width:40px;height:16px}
.panel{width:100%;max-width:220px}
.lg-title{font:600 13.5px/1.3 var(--cond);color:var(--ink2)}
.lg-bar{display:flex;height:8px;margin-top:8px}
.lg-bar i{flex:1}
.lg-ticks{display:flex;justify-content:space-between;margin-top:5px;font:600 13px/1 var(--cond);color:var(--ink2)}
.fig{margin-top:22px;padding-top:16px;border-top:1px solid var(--rule)}
.fig p{font-size:14.5px;color:var(--ink2);line-height:1.4}
.fig b{display:inline-block;font-size:46px;line-height:1;color:var(--ink);margin-right:4px}
.fig .unit{font:600 19px var(--cond);color:var(--ink2)}
.fig .ref{display:inline-block;margin-top:8px;font:600 15px var(--cond);color:var(--ink)}
.diagrams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 32px;margin-top:64px}
.diagrams figure{display:flex;flex-direction:column;gap:16px}
.diagrams svg{width:100%;height:auto}
.diagrams h3{font-size:19px;font-weight:600;line-height:1.25}
.diagrams p{margin-top:6px;font-size:15.5px;color:var(--ink2)}

/* Gallery */
.group{margin-top:60px}
.group h3.gh{font-size:24px;font-weight:600;letter-spacing:-.01em;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.mosaic{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px 32px;margin-top:24px;align-items:start}
.mosaic .lead{grid-column:1;grid-row:1/3}
.mosaic figure:nth-child(2){grid-column:2;grid-row:1}
.mosaic figure:nth-child(3){grid-column:2;grid-row:2}
.group.flip .mosaic{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.group.flip .lead{grid-column:2}
.group.flip figure:nth-child(2),.group.flip figure:nth-child(3){grid-column:1}
.mosaic a{display:block;text-decoration:none}
.mosaic a:hover .frame{background:var(--ink2)}
.mosaic figcaption{margin-top:12px}
.mosaic figcaption b{font-size:17px;font-weight:600}
.mosaic figcaption p{margin-top:3px;font-size:15.5px;color:var(--ink2);max-width:42em}
.mosaic .lead figcaption b{font-size:20px}
.mosaic .lead figcaption p{font-size:16.5px}

/* Use cases: an index, one row per question */
.cases{list-style:none;padding:0;margin-top:40px;border-bottom:1px solid var(--rule)}
.case{display:grid;grid-template-columns:minmax(0,3.3fr) minmax(0,3.7fr) minmax(0,5fr);gap:6px 40px;padding:24px 0;border-top:1px solid var(--rule)}
.case h3{font-size:20px;font-weight:600;line-height:1.25}
.case .who{margin-top:4px;font-size:15px;color:var(--ink2)}
.case .quote{font-size:19px;font-weight:500;line-height:1.3}
.case .tools{font-size:16px;color:var(--ink2)}

/* Services (night) */
.services{margin-top:104px;background:var(--night);color:var(--nink)}
.services .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px 64px;padding-top:88px;padding-bottom:96px}
.services .intro{font-size:18px;color:var(--nink2);margin-top:16px;max-width:30em}
.services .pitch{position:sticky;top:32px;align-self:start}
.services .cta{margin-top:30px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.services .cta small{font-size:15px;color:var(--nink2)}
.services a:not(.btn){color:var(--nink)}
.services :focus-visible{box-shadow:0 0 0 2px var(--night)}
.svc{padding:26px 0;border-top:1px solid var(--nrule)}
.svc:first-child{border-top:0;padding-top:0}
.svc h3{font-size:22px;font-weight:600;letter-spacing:-.01em}
.svc p{margin-top:8px;color:var(--nink2);max-width:38em}
.capture{--c:14px;margin-top:20px;padding:18px 18px 14px;background:var(--paper);color:var(--ink);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.capture svg{width:100%;height:auto}
.capture figcaption{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:10px;font-size:14px;color:var(--ink2)}

/* Sources and footer */
.sources{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px;padding-top:72px;padding-bottom:64px}
footer{border-top:1px solid var(--rule)}
.sources h2{font-size:30px}
.sources p{color:var(--ink2);max-width:44em}
.sources p+p{margin-top:12px}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-top:28px;padding-bottom:44px;font-size:15px;color:var(--ink2)}
footer .brand{font-size:19px;color:var(--ink)}
footer .note{margin:0 0 0 auto}

@media (max-width:1100px){
  .hero{grid-template-columns:1fr;gap:20px}
  .hero h1{font-size:48px}
  .js .stage{grid-template-columns:1fr;grid-template-areas:"qs" "shot" "cap"}
  .qs{grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr))}
  .head{grid-template-columns:1fr}
  .tq{display:none}
  .mosaic,.group.flip .mosaic{grid-template-columns:1fr 1fr}
  .mosaic .lead,.group.flip .lead{grid-column:1/-1;grid-row:1}
  .mosaic figure:nth-child(2),.group.flip figure:nth-child(2){grid-column:1;grid-row:2}
  .mosaic figure:nth-child(3),.group.flip figure:nth-child(3){grid-column:2;grid-row:2}
  .services .pitch{position:static}
  .diagrams{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .case .tools{grid-column:2}
  .services .wrap,.sources{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--gut:16px}
  body{font-size:16.5px}
  .credit{order:3;width:100%;font-size:14px;margin-top:-6px}
  .top nav{display:none}
  .bar .btn{margin-left:auto}
  .hero{padding-top:32px}
  .hero h1{font-size:36px}
  .intro .lead{font-size:17.5px}
  .q{min-height:70px;font-size:14px;padding:10px 4px;gap:5px}
  .q svg{width:21px;height:21px}
  .ramp{width:40px}
  .stage-cap b{font-size:19px}
  .status li{width:50%;padding:11px 12px 11px 0;border-left:0;border-top:1px solid var(--rule)}
  .status li:nth-child(-n+2){border-top:0}
  .status li:last-child{width:100%}
  .sect{padding-top:72px}
  .head h2,.services h2{font-size:31px}
  .how{grid-template-columns:1fr;gap:18px}
  .part .vis,.part .cap,.arrow{grid-column:auto;grid-row:auto}
  .part .vis,.arrow{min-height:0}
  .part .cap{margin-bottom:10px}
  .arrow{justify-content:flex-start;padding-left:60px}
  .arrow svg{transform:rotate(90deg)}
  .diagrams{grid-template-columns:1fr;gap:44px}
  .mosaic,.group.flip .mosaic{grid-template-columns:1fr;gap:28px}
  .mosaic figure,.mosaic .lead,.group.flip .lead,.mosaic figure:nth-child(2),.mosaic figure:nth-child(3),.group.flip figure:nth-child(2),.group.flip figure:nth-child(3){grid-column:auto;grid-row:auto}
  .case{grid-template-columns:1fr;gap:8px}
  .case .tools{grid-column:auto}
  .services{margin-top:80px}
  .services .wrap{padding-top:64px;padding-bottom:72px}
  .capture figcaption{grid-template-columns:1fr;gap:4px}
  footer .note{margin-left:0}
}
@media (max-width:400px){
  .hero h1{font-size:32px}
  .q{font-size:13px}
  .bar .btn{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.shot img{transition:none}}
/* Motion: real viewer loops in the hero and the gallery. Videos are muted loops with the still as poster; reduced motion keeps the still. */
.shot .frame{position:relative}
.shot video{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:cover;opacity:0;transition:opacity .35s ease;clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}
.shot video.on{opacity:1}
.q .prog{position:absolute;left:18%;right:18%;bottom:9px;height:2px;background:rgba(23,33,44,.16);opacity:0}
.q .prog i{display:block;height:100%;width:0;background:var(--ink)}
.q[aria-selected="true"] .prog{opacity:1}
.mosaic video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--paper2);clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}

/* Same corner, ten questions: one camera over the Eixample, the colour changes with the question */
.corner{margin-top:40px}
.corner-shot .frame{position:relative;aspect-ratio:16/10;background:var(--rule)}
.corner-shot .frame img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);opacity:0;transition:opacity .6s ease}
.corner-shot .frame img.on{opacity:1}
.corner-cap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 56px;margin-top:18px;align-items:start;min-height:7.5em}
.corner-cap h3{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.corner-cap .cn{margin-top:6px;font-size:15.5px;color:var(--ink2);max-width:40em}
.corner-cap .fig{margin-top:0;padding-top:0;border-top:0}
.corner-cap .fig p{max-width:26em}
.corner-cap .lg-bar{max-width:300px;margin-top:12px}
.corner-cap .lg-bar.sw{gap:2px}
.corner-qs{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin-top:22px}
.corner-qs .q{--c:11px;min-height:72px;font-size:14px;padding:8px 4px 14px;gap:5px}
.corner-qs .q svg{width:21px;height:21px}
.corner-qs .q .ramp{width:44px;height:3px}
.corner-note{margin-top:14px;font-size:14px;color:var(--ink2)}

/* One case, step by step */
.walk{margin-top:48px}
.walk-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:24px}
.walk-steps .frame img{aspect-ratio:3/4;object-fit:cover;object-position:top}
.walk-steps .wide .frame img{object-position:0 100%}
.walk-steps figcaption{margin-top:14px}
.walk-steps .n{display:inline-grid;place-items:center;width:26px;height:26px;margin-right:8px;background:var(--ink);color:var(--paper);font:600 14px/1 var(--cond);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);vertical-align:2px}
.walk-steps b{font-size:18px;font-weight:600}
.walk-steps p{margin-top:6px;font-size:15.5px;color:var(--ink2)}

/* Use cases with a picture of the answer */
.case.has-thumb{grid-template-columns:minmax(0,3fr) minmax(0,3.3fr) minmax(0,4.2fr) minmax(0,2.6fr)}
.case .thumb{display:block;text-decoration:none}
.case .thumb .frame{--c:10px}
.case .thumb:hover .frame{background:var(--ink2)}

/* Diagrams: the view tints the city, the plane rises */
.tint-wrap{position:relative;width:100%;max-width:440px}
.tint-wrap svg{width:100%}
.tint-wrap .grey{filter:grayscale(1) brightness(1.06) contrast(.92)}
.tint-wrap .col{position:absolute;inset:0}
.anim .tint-wrap .col{animation:tint 7s cubic-bezier(.5,0,.3,1) infinite}
@keyframes tint{0%{clip-path:inset(0 100% 0 0);opacity:1}32%{clip-path:inset(0 0 0 0);opacity:1}84%{clip-path:inset(0 0 0 0);opacity:1}100%{clip-path:inset(0 0 0 0);opacity:0}}
.anim .plane{animation:plane 6s ease-in-out infinite;transform-box:fill-box}
@keyframes plane{0%,100%{transform:translateY(5px)}50%{transform:translateY(-5px)}}

@media (max-width:1100px){
  .corner-qs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .corner-cap{grid-template-columns:1fr}
  .walk-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case.has-thumb{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
  .case.has-thumb .thumb{grid-column:1;grid-row:2;max-width:320px}
}
@media (max-width:760px){
  .corner-qs{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .corner-qs .q{min-height:60px;font-size:12.5px}
  .corner-qs .q svg{width:18px;height:18px}
  .corner-cap h3{font-size:20px}
  .walk-steps{grid-template-columns:1fr 1fr;gap:20px 14px}
  .case.has-thumb{grid-template-columns:1fr}
  .case.has-thumb .thumb{grid-column:auto;grid-row:auto;max-width:none}
}
@media (prefers-reduced-motion:reduce){.corner-shot .frame img{transition:none}.shot video{display:none}}
/* Cities */
.cities{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 40px;margin-top:40px}
.cities li{padding-top:20px;border-top:2px solid var(--ink)}
.cities li:not(:first-child){border-top-color:var(--rule)}
.cities .st{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--cond);color:var(--ink2)}
.cities .st::before{content:"";width:9px;height:9px;background:var(--rule);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.cities .st.on{color:var(--ink)}
.cities .st.on::before{background:var(--ink)}
.cities h3{margin-top:14px;font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.cities p{margin-top:8px;font-size:16px;color:var(--ink2);max-width:28em}
.cities a{display:inline-block;margin-top:12px;font-weight:500}
@media (max-width:860px){.cities{grid-template-columns:1fr}}

/* The viewer, part by part */
.anat{margin-top:40px}
.anat .shot{position:relative}
.hot{position:absolute;pointer-events:none;outline:2px solid transparent;outline-offset:-1px;transition:outline-color .2s ease,box-shadow .3s ease}
.hot.on{outline-color:var(--acc);box-shadow:0 0 0 9999px rgba(23,33,44,.42)}
.pin{position:absolute;z-index:2;width:28px;height:28px;display:grid;place-items:center;transform:translate(-50%,-50%);border:0;padding:0;background:var(--ink);color:var(--paper);font:600 14px/1 var(--cond);cursor:pointer;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.pin.on,.pin:hover{background:var(--acc);color:var(--ink)}
.anat-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px;margin-top:28px}
.anat-list li{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--rule);cursor:default}
.anat-list li:focus-visible{outline-offset:-2px}
.anat-list .n{width:26px;height:26px;display:grid;place-items:center;background:var(--paper2);font:600 14px/1 var(--cond);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);transition:background .2s}
.anat-list li.on .n{background:var(--acc)}
.anat-list b{display:block;font-size:17px;font-weight:600}
.anat-list p{margin-top:4px;font-size:15.5px;color:var(--ink2)}

/* Loops in the mosaics */
.mosaic .frame video,.cased video{position:relative;height:auto}
.mosaic figure{position:relative}
.tag{display:inline-block;margin-right:8px;padding:2px 8px;font:600 13px/1.4 var(--cond);color:var(--ink2);background:var(--paper2);vertical-align:2px}
.more{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* Use-case index rows link to their detail */
.case h3 a{text-decoration:none}
.case h3 a:hover{text-decoration:underline}

/* Sub-pages */
.page-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end;padding-top:56px}
.page-head h1{font-size:52px;line-height:1.03;font-weight:600;letter-spacing:-.028em}
.page-head p{font-size:18.5px;color:var(--ink2);max-width:32em}
.crumbs{grid-column:1/-1;font-size:15px;color:var(--ink2)}
.toc{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin-top:40px;border-top:1px solid var(--rule)}
.toc li{border-bottom:1px solid var(--rule)}
.toc a{display:grid;grid-template-columns:28px 1fr;gap:8px;padding:12px 0;text-decoration:none;font-size:15.5px;line-height:1.3}
.toc a:hover b{text-decoration:underline}
.toc span{font:600 15px/1.3 var(--cond);color:var(--ink2)}
.toc b{font-weight:500}
.cased{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 56px;padding:64px 0;border-top:1px solid var(--rule);scroll-margin-top:16px}
.cased:first-of-type{margin-top:56px}
.cased .k{font:600 15px var(--cond);color:var(--ink2)}
.cased h2{margin-top:6px;font-size:34px;line-height:1.08;font-weight:600;letter-spacing:-.02em}
.cased .who{margin-top:10px;font-size:16px;color:var(--ink2)}
.cased .quote{margin-top:22px;font-size:20px;font-weight:500;line-height:1.3}
.cased dl{margin:24px 0 0}
.cased dt{font:600 14px/1.3 var(--cond);color:var(--ink2);padding-top:14px;border-top:1px solid var(--rule)}
.cased dd{margin:4px 0 14px;font-size:16px}
.cased dd.lim{color:var(--ink2);font-size:15px}
.cased .media{display:grid;gap:18px;align-content:start}
.cased .media .pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cased figcaption{margin-top:10px;font-size:14.5px;color:var(--ink2)}
.cased .diag{padding:18px;background:#fff;--c:14px;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.cased .diag svg{width:100%;height:auto}
.phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:24px;align-items:end}
.phones img{width:100%;height:auto}
.phones figcaption{margin-top:10px;font-size:15px;color:var(--ink2)}
.rules{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 56px;margin-top:40px;align-items:start}
.rules svg{width:100%;height:auto}

@media (max-width:1100px){
  .anat-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-head,.cased,.rules{grid-template-columns:1fr}
  .toc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phones{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .anat-list{grid-template-columns:1fr}
  .pin{width:22px;height:22px;font-size:12px}
  .page-head{padding-top:32px}
  .page-head h1{font-size:36px}
  .toc{grid-template-columns:1fr}
  .cased{padding:44px 0}
  .cased h2{font-size:27px}
  .cased .media .pair{grid-template-columns:1fr}
}
.cased .media{min-width:0}
.cased video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--paper2);clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}
.cased figure{min-width:0}

/* Novelties (03-10-2026): demo loops with a play/pause control, a list of the other changes and a small offline comparison. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero .new{margin-top:18px;font-size:15.5px;color:var(--ink2);max-width:31em}
.hero .new a{color:var(--ink);font-weight:500}
.has-vctl{position:relative}
.vctl{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 11px 0 9px;border:0;background:rgba(23,33,44,.82);color:var(--paper);font:500 14px/1 'Barlow',sans-serif;cursor:pointer;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.vctl:hover{background:var(--ink)}
.vctl:focus-visible{outline:3px solid var(--acc);outline-offset:-3px;box-shadow:none;clip-path:none}
.vctl svg{width:16px;height:16px;fill:currentColor}
.vctl .t{white-space:nowrap}
.vctl.is-on{padding:0 9px}
.vctl.is-on .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.frame.dark .vctl{background:rgba(232,238,243,.16)}
.demo-src{display:block;margin-top:6px;font-size:13.5px;color:var(--ink2)}
.news{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;margin-top:28px}
.news li{padding:18px 0 22px;border-top:1px solid var(--rule)}
.news .ic{display:grid;place-items:center;width:34px;height:34px;background:var(--paper2);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.news .ic svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.news h4{margin:12px 0 0;font-size:17px;font-weight:600;line-height:1.25}
.news p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--ink2)}
.news .tag{margin:8px 0 0;vertical-align:0}
.news a{font-weight:500;color:var(--ink)}

/* Demo player: without JavaScript a grid of stills with captions; with it, one demo at a time and a numbered list to choose. */
.demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:40px;align-items:start}
.demos figure:first-child{grid-column:1/-1}
.demos.pairs figure:first-child{grid-column:auto}
.group .demos{margin-top:28px}
.demos figure[hidden]{display:none}
.demos .frame{position:relative}
.demos figcaption,.demo-fig figcaption{margin-top:12px}
.demos figcaption b{font-size:20px;font-weight:600}
.demos figcaption p{margin-top:4px;font-size:16px;color:var(--ink2);max-width:48em}
.vid{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:cover;background:transparent;opacity:0;transition:opacity .35s ease;clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}
.vid.on{opacity:1}
.demos.is-stage{grid-template-columns:minmax(0,1fr) 290px;gap:0 36px}
.demos.is-stage figure{grid-column:1;grid-row:1}
.demo-tabs{grid-column:2;grid-row:1;display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.dt{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;width:100%;padding:14px 4px 16px 0;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.dt .n{display:grid;place-items:center;width:26px;height:26px;margin-top:1px;background:var(--paper2);font:600 14px/1 var(--cond);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.dt[aria-selected="true"] .n{background:var(--acc)}
.dt b{display:block;font-size:17px;font-weight:600;line-height:1.25}
.dt .sh{display:none}
.dt .ln{display:block;margin-top:3px;font-size:14.5px;line-height:1.4;color:var(--ink2)}
.dt:hover b{text-decoration:underline;text-underline-offset:3px}
.dt:focus-visible{outline-offset:-3px}
.dt .prog{position:absolute;left:40px;right:4px;bottom:-1px;height:2px}
.dt .prog i{display:block;height:100%;width:0;background:var(--ink)}
@media (max-width:1100px){
  .demos.is-stage{grid-template-columns:1fr;gap:18px}
  .demos.is-stage figure{grid-row:2}
  .demo-tabs{grid-column:1;grid-row:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 12px;border-top:0}
  .dt{grid-template-columns:1fr;gap:6px;padding:10px 0 12px;border-bottom:2px solid var(--rule)}
  .dt[aria-selected="true"]{border-bottom-color:var(--ink)}
  .dt .ln{display:none}
  .dt b{font-size:15px}
  .dt .lg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .dt .sh{display:block}
  .dt .prog{left:0;right:0;bottom:-2px}
}
@media (max-width:760px){
  .demos{grid-template-columns:1fr;gap:28px}
  .demo-tabs{gap:0 8px}
  .dt .n{width:24px;height:24px;font-size:13px}
  .dt b{font-size:13.5px;line-height:1.2;hyphens:auto;overflow-wrap:anywhere}
  .demos figcaption b{font-size:18px}
  .demos figcaption p{font-size:15.5px}
}

/* Compare two municipalities: offline, keyboard-friendly; values are embedded in site.js with their sources. */
.cmp{margin-top:40px;border-top:1px solid var(--rule)}
.cmp-pick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 16px;padding-top:24px}
.cmp-pick label{display:flex;flex-direction:column;gap:6px;flex:1 1 240px;max-width:360px;font:600 14px/1.2 var(--cond);color:var(--ink2)}
.cmp-pick .who{display:inline-flex;align-items:center;gap:8px}
.cmp-pick .sel{position:relative;display:block}
.cmp-pick .sel::after{content:"";position:absolute;right:17px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.cmp-pick select{appearance:none;-webkit-appearance:none;width:100%;min-height:46px;padding:0 40px 0 14px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);font:500 16.5px/1.2 'Barlow',sans-serif;cursor:pointer}
.cmp-pick select:hover{background-color:#fff}
.cmp-swap{display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.cmp-swap:hover{background:var(--paper2)}
.cmp-swap svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk{display:inline-block;width:12px;height:12px;flex:none;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.mk.a{background:var(--ink)}
.mk.b{background:#2B7680}
.cmp-sum{margin-top:20px;font-size:18px;line-height:1.45;max-width:46em;min-height:2.9em}
.cmp-t{width:100%;margin-top:18px;border-collapse:collapse}
.cmp-t th,.cmp-t td{padding:14px 0;border-top:1px solid var(--rule);text-align:left;vertical-align:top}
.cmp-t thead th{padding:0 16px 10px 0;border-top:0;font:600 14px/1.25 var(--cond);color:var(--ink2);vertical-align:bottom}
.cmp-t thead .who{display:inline-flex;align-items:baseline;gap:7px;color:var(--ink)}
.cmp-t thead .who .mk{transform:translateY(1px)}
.cmp-t th[scope=row]{width:27%;padding-right:24px;font-weight:600;font-size:16.5px;line-height:1.3}
.cmp-t th[scope=row] small{display:block;margin-top:3px;font-weight:400;font-size:13.5px;line-height:1.35;color:var(--ink2)}
.cmp-t td.v{width:13%;padding-right:16px;font:600 21px/1.15 var(--cond);font-variant-numeric:tabular-nums lining-nums}
.cmp-t td.v small{display:block;margin-top:3px;font:400 13px/1.3 'Barlow',sans-serif;color:var(--ink2)}
.cmp-t td.v.ref{color:var(--ink2)}
.cmp-t td.na{color:var(--ink2);font-size:16px}
.strip{position:relative;height:36px}
.strip::before{content:"";position:absolute;left:0;right:0;top:22px;height:2px;background:var(--rule)}
.strip i{position:absolute;top:17px;width:2px;height:12px;margin-left:-1px;background:#B4BEC5}
.strip .amb{top:12px;height:22px;width:2px;background:var(--ink2)}
.strip .amb::after{content:"AMB";position:absolute;left:-9px;top:-12px;font:600 11px/1 var(--cond);color:var(--ink2)}
.strip .mk{position:absolute;top:16px;margin-left:-7px;width:14px;height:14px}
.cmp-t td.st{width:34%}
.strip-ends{display:flex;justify-content:space-between;font:600 12px/1 var(--cond);color:var(--ink2)}
.cmp-src{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink2);max-width:60em}
.cmp-src+.cmp-src{margin-top:6px;padding-top:0;border-top:0}
.cmp-pick [hidden]{display:none}

@media (max-width:1100px){
  .news{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cmp-t th[scope=row]{width:auto}
  .cmp-t td.st{width:30%}
}
@media (max-width:760px){
  .news{grid-template-columns:1fr}
  .cmp-pick{gap:12px}
  .cmp-pick label{flex:1 1 100%;max-width:none}
  .cmp-swap{order:3}
  .cmp-sum{font-size:16.5px}
  .cmp-t thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp-t,.cmp-t tbody,.cmp-t tr{display:block}
  .cmp-t tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;padding:14px 0;border-top:1px solid var(--rule)}
  .cmp-t th,.cmp-t td{border-top:0;padding:0}
  .cmp-t th[scope=row]{grid-column:1/-1;padding:0 0 6px}
  .cmp-t td.v{width:auto;padding:0;font-size:19px}
  .cmp-t td.v::before{content:attr(data-who);display:block;margin-bottom:3px;font:600 12.5px/1.2 var(--cond);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cmp-t td.v.a::before,.cmp-t td.v.b::before{padding-left:14px;background:linear-gradient(var(--ink),var(--ink)) no-repeat 0 50%/9px 9px}
  .cmp-t td.v.b::before{background-image:linear-gradient(#2B7680,#2B7680)}
  .cmp-t td.st{grid-column:1/-1;width:auto;padding-top:4px}
  .vctl{left:10px;bottom:10px;min-height:32px}
}
@media (prefers-reduced-motion:reduce){.vctl{transition:none}}

/* Forms: contact (home) and beta programme. White fields with a rule border; focus is the yellow ring, a checked
   topic is yellow (selection); errors use their own red, never a data colour. Without JavaScript the browser posts
   the form and the server answers with gracies.html or no-enviat.html. */
.contact{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px 64px;align-items:start}
.contact h2{font-size:38px;line-height:1.08;font-weight:600;letter-spacing:-.02em}
.contact .intro p{margin-top:14px;font-size:18px;color:var(--ink2);max-width:28em}
.callout{--c:14px;margin-top:32px;padding:22px 24px 24px;background:var(--paper2);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.callout .k{font:600 14px/1 var(--cond);color:var(--ink2)}
.callout h3{margin-top:8px;font-size:21px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.callout p{margin-top:6px;font-size:16px;color:var(--ink2)}
.callout .btn{margin-top:16px}
.form-panel{--c:18px;padding:32px 32px 30px;background:#fff;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.mail-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mail-form[hidden]{display:none}
.mail-form .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.mail-form legend{font-size:15.5px;font-weight:500;line-height:1.3}
.opt{font-weight:400;color:var(--ink2)}
.mail-form input[type=text],.mail-form input[type=email],.mail-form select,.mail-form textarea{width:100%;min-height:46px;margin:0;padding:10px 12px;border:1px solid #A9B3BB;border-radius:0;background:#fff;color:var(--ink);font:400 16px/1.4 'Barlow',system-ui,sans-serif;-webkit-appearance:none;appearance:none}
.mail-form textarea{min-height:132px;resize:vertical}
.mail-form input:hover,.mail-form select:hover,.mail-form textarea:hover{border-color:var(--ink2)}
.mail-form input:focus-visible,.mail-form select:focus-visible,.mail-form textarea:focus-visible{outline:3px solid var(--acc);outline-offset:0;box-shadow:none;border-color:var(--ink)}
.mail-form [aria-invalid="true"]{border-color:var(--err);box-shadow:inset 3px 0 0 var(--err)}
.select{position:relative}
.select::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.select select{padding-right:40px;cursor:pointer}
.hint{font-size:14px;line-height:1.4;color:var(--ink2)}
.err{font-size:14.5px;line-height:1.35;font-weight:500;color:var(--err)}
.err::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;background:var(--err);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.mail-form fieldset{min-width:0;margin:0;padding:0;border:0}
.mail-form legend{padding:0;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chip span{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid #A9B3BB;background:#fff;font-size:15px;line-height:1.2;cursor:pointer;user-select:none}
.chip span::before{content:"";width:9px;height:9px;background:var(--rule);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.chip:hover span{border-color:var(--ink2)}
.chip input:checked+span{background:var(--acc);border-color:#C79600}
.chip input:checked+span::before{background:var(--ink)}
.chip input:focus-visible+span{outline:3px solid var(--acc);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);cursor:pointer}
.check label{font-size:15.5px;line-height:1.4}
.check .err{grid-column:2}
.legal{font-size:13.5px;line-height:1.45;color:var(--ink2)}
.submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
button.btn{cursor:pointer}
.btn[disabled]{opacity:.6;cursor:progress}
.form-status{font-size:15.5px;color:var(--ink2)}
.form-status:empty{display:none}
.form-status.error{color:var(--err);font-weight:500}
.form-done{outline:none}
.form-done .k{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--cond);color:var(--ink2)}
.form-done .k::before{content:"";width:12px;height:12px;background:var(--acc);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.form-done h3{margin-top:12px;font-size:26px;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.form-done p{margin-top:8px;font-size:17px;color:var(--ink2);max-width:30em}
.hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Beta programme page */
.audience li:not(:first-child){border-top-color:var(--ink)}
.offer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px;margin-top:56px}
.offer h2{font-size:28px;line-height:1.1;font-weight:600;letter-spacing:-.015em;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.offer ul{list-style:none;padding:0;margin-top:4px}
.offer li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:16.5px}
.offer li::before{content:"";width:10px;height:10px;margin-top:8px;background:var(--ink);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.offer li b{font-weight:600}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:40px;counter-reset:step}
.steps li{padding-top:18px;border-top:1px solid var(--rule)}
.steps .n{display:inline-grid;place-items:center;width:30px;height:30px;background:var(--ink);color:var(--paper);font:600 15px/1 var(--cond);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.steps li:first-child .n{background:var(--acc);color:var(--ink)}
.steps h3{margin-top:14px;font-size:19px;font-weight:600;line-height:1.25}
.steps p{margin-top:6px;font-size:15.5px;color:var(--ink2)}
.signup{margin-top:104px;background:var(--night);color:var(--nink);scroll-margin-top:0}
.signup>.wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:40px 64px;padding-top:88px;padding-bottom:96px}
.signup h2{font-size:38px;line-height:1.08;font-weight:600;letter-spacing:-.02em}
.signup .pitch{position:sticky;top:32px;align-self:start}
.signup .pitch p{margin-top:16px;font-size:18px;color:var(--nink2);max-width:24em}
.signup .pitch a{color:var(--nink)}
.signup .pitch :focus-visible{box-shadow:0 0 0 2px var(--night)}
.signup .form-panel{background:var(--paper);color:var(--ink)}
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 56px}
.faq h2{font-size:30px;line-height:1.1;font-weight:600;letter-spacing:-.02em}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-size:18px;font-weight:500;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:9px;height:9px;margin:7px 4px 0 0;border-right:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(45deg);transition:transform .15s ease}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:11px}
.faq details p{padding:0 0 18px;font-size:16.5px;color:var(--ink2);max-width:40em}
.result{padding-bottom:40px}
.result .actions{margin-top:28px}

@media (max-width:1100px){
  .contact,.faq{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .signup>.wrap{grid-template-columns:1fr}
  .signup .pitch{position:static}
}
@media (max-width:760px){
  .contact h2,.signup h2{font-size:31px}
  .form-panel{--c:14px;padding:22px 18px 22px}
  .mail-form{grid-template-columns:1fr;gap:18px}
  .offer{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .offer h2{font-size:24px}
  .steps{grid-template-columns:1fr;gap:20px}
  .signup{margin-top:80px}
  .signup>.wrap{padding-top:64px;padding-bottom:72px}
  .faq summary{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.faq summary::after{transition:none}}

/* v2: language switch and city captures */
.lang{display:inline-flex;border:1px solid var(--rule)}
.lang a{display:inline-flex;align-items:center;min-height:36px;padding:0 9px;font:600 14px/1 var(--cond);text-decoration:none;color:var(--ink2)}
.lang a[aria-current="true"]{background:var(--ink);color:var(--paper)}
.lang a:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.cities .frame{--c:12px;margin-bottom:16px}
.cities .frame img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.sect .more{margin-top:28px}
@media (max-width:760px){.cities{grid-template-columns:minmax(0,1fr)}}
.demo-film{--c:18px;margin-top:28px}
.demo-film video{display:block;width:100%;height:auto;aspect-ratio:16/10;background:var(--night)}

/* Header with two actions («Entrar al visor» + «Demana accés»): keep one row on desktop.
   The credit also sits in the footer, so it gives way first. Since «Dades» joined the menu (09-10-2026) the row is full
   at every desktop width (the wrapper stops at 1240 px), so the credit stays hidden from 901 px up. */
@media (min-width:901px){
  .top .bar{column-gap:16px}
  .top nav{gap:16px}
  .top .bar .btn.sm{padding:0 13px}
}
@media (min-width:901px){
  .top .credit{display:none}
}
@media (min-width:901px) and (max-width:1280px){
  .top nav{gap:12px;font-size:15px}
}

/* Inici v3 (05-10-2026): llegir · mesurar · assajar. Wall of views, three verbs, walking, teams, planning drawer,
   street section, under/over/now, phones and proof. Motion is decorative and stops with reduced motion. */
.wall{margin-top:72px;overflow:hidden}
.wall .wh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-bottom:20px}
.wall .wh h2{font-size:26px;font-weight:600;letter-spacing:-.01em}
.wall .rows{display:flex;flex-direction:column;gap:12px}
.wall .row{display:flex;gap:12px;width:max-content;animation:wall-l 80s linear infinite}
.wall .row.r{animation-name:wall-r;animation-duration:95s}
.wall:hover .row,.wall:focus-within .row{animation-play-state:paused}
.wall figure{position:relative;width:300px;flex:none}
.wall figure .frame img{aspect-ratio:16/10}
.wall figcaption{position:absolute;left:10px;bottom:10px;background:rgba(246,247,244,.95);padding:3px 8px;font-size:13.5px;font-weight:500}
@keyframes wall-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wall-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.verbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:36px}
.verbs h3{display:flex;gap:10px;align-items:baseline;margin-top:16px;font-size:24px;font-weight:600}
.verbs h3 .n{font-family:var(--cond);font-size:15px;color:var(--ink2)}
.verbs h3 small{font-size:14px;font-weight:400;color:var(--ink2);margin-left:auto}
.verbs p{margin-top:6px}
.verbs video,.apeu video,.sa video,.sec-vid video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--paper2);clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}
.apeu{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 56px;align-items:center}
.apeu .txt{display:flex;flex-direction:column;gap:16px}
.apeu .txt h2{font-size:38px;line-height:1.08;font-weight:600;letter-spacing:-.02em}
.apeu .pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.apeu .pics .frame:first-child{grid-column:1/-1}
.ripple{position:relative;width:220px;height:220px;margin:8px 0 26px}
.ripple i{position:absolute;inset:0;border:2px solid #2B7680;background:rgba(43,118,128,.08);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);animation:ripple 4.5s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.ripple i:nth-child(2){animation-delay:1.5s}.ripple i:nth-child(3){animation-delay:3s}
.ripple b{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--acc);border:2px solid var(--ink)}
.ripple span{position:absolute;left:0;bottom:-26px;font-size:13px;color:var(--ink2)}
@keyframes ripple{0%{transform:scale(.15);opacity:0}15%{opacity:1}100%{transform:scale(1);opacity:0}}
.eyebrow{font-size:15px;color:var(--ink2)}
.teams .tabs{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px;border-bottom:1px solid var(--rule);padding-bottom:10px}
.teams .tabs button{border:0;background:var(--paper2);color:var(--ink);font:400 15px/1.2 'Barlow',sans-serif;min-height:44px;padding:10px 14px;cursor:pointer}
.teams .tabs button[aria-selected=true]{background:var(--ink);color:var(--paper);font-weight:500;box-shadow:inset 0 -4px 0 var(--acc)}
.teams .tpanel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;padding-top:28px}
.js .teams .tpanel[hidden]{display:none}
.teams .tpanel h3{font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.01em;margin-top:6px}
.teams .tsteps{list-style:none;padding:0;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.teams .tsteps li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;border-top:1px solid var(--rule);padding-top:10px}
.teams .tsteps b{font-family:var(--cond);font-weight:600;color:var(--ink2);font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding:0;list-style:none}
.chips li{font-size:14px;padding:5px 10px;background:var(--paper2)}
.teams .lim{margin-top:14px;font-size:15px;color:var(--ink2)}
.teams figcaption{margin-top:10px;font-size:15px;color:var(--ink2)}
.plan{margin-top:104px;background:var(--night);color:var(--nink)}
.plan .wrap{padding-top:96px;padding-bottom:96px}
.plan .head p{color:var(--nink2)}
.plan .eyebrow{color:var(--nink2)}
.plan .key{display:flex;flex-direction:column;gap:8px;font-size:16px}
.plan .key span{display:inline-flex;align-items:center;gap:10px}
.tk{display:inline-block;flex:none;width:10px;height:10px;background:var(--nink)}
.tk.e{width:10px;height:10px;background:transparent;border:1.5px dashed var(--nink2)}
.tools{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;margin-top:40px}
.tools h3{font-size:17px;font-weight:600;border-bottom:1px solid var(--nrule);padding-bottom:8px;margin-bottom:6px}
.tools ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.tools li{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.35;padding:4px 0}
.tools li .tk{transform:translateY(1px)}
.plan .frame{background:var(--nrule)}
.plan figcaption{margin-top:10px;font-size:15px;color:var(--nink2)}
.plan figcaption b{color:var(--nink);font-weight:600}
.ba-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;margin-top:56px;align-items:start}
.ba-side{display:flex;flex-direction:column;gap:28px}
.ba .frame{position:relative}
.ba .after{position:absolute;inset:1px;clip-path:inset(0 0 0 50%)}
.ba .after img{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;clip-path:none}
.ba .cut{position:absolute;top:1px;bottom:1px;left:50%;width:3px;margin-left:-1px;background:var(--acc);pointer-events:none}
.ba .lab{position:absolute;top:12px;padding:3px 9px;font-size:13.5px}
.ba .lab.l{left:12px;background:rgba(246,247,244,.95);color:var(--ink)}
.ba .lab.r{right:12px;background:rgba(20,29,39,.88);color:var(--nink)}
.ba label{display:flex;gap:12px;align-items:center;margin-top:10px;font-size:15px;color:var(--nink2)}
.ba input{flex:1;accent-color:var(--acc);min-height:32px}
.street{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 56px;align-items:start}
.street h2{font-size:38px;line-height:1.08;font-weight:600;letter-spacing:-.02em;margin:8px 0 16px}
.street ul{padding-left:18px;display:flex;flex-direction:column;gap:6px;margin:16px 0 20px}
.sec-toggle{display:flex;gap:6px;margin-bottom:12px}
.sec-toggle button{border:0;background:var(--paper2);color:var(--ink);font:400 15px/1.2 'Barlow',sans-serif;min-height:44px;padding:10px 16px;cursor:pointer}
.sec-toggle button[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:inset 0 -4px 0 var(--acc)}
.sec{--c:18px;background:var(--paper2);padding:28px 28px 18px;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.sec .bars,.sec .labs{display:flex;align-items:flex-end}
.sec .bars{height:200px}
.sec .fa{flex:0 0 22px;height:200px;background:var(--ink2)}
.sec .s{flex-basis:0;flex-shrink:1;position:relative;transition:flex-grow .9s cubic-bezier(.6,0,.2,1)}
.sec .labs{padding:0 22px;margin-top:8px;font-size:12.5px;color:var(--ink2)}
.sec .labs span{flex-basis:0;text-align:center;overflow:hidden;white-space:nowrap;transition:flex-grow .9s cubic-bezier(.6,0,.2,1)}
.sec .tree{position:absolute;bottom:100%;left:50%;width:44px;height:96px;margin-left:-22px}
.sec .tree::before{content:'';position:absolute;left:0;top:6px;width:44px;height:44px;border-radius:50%;background:#5E9C6B}
.sec .tree::after{content:'';position:absolute;left:20px;top:44px;width:4px;height:52px;background:var(--ink2)}
.sec .s.v{background:var(--rule);height:22px}.sec .s.p{background:#C79600;height:14px}.sec .s.c{background:var(--ink2);height:10px}.sec .s.b{background:#2B7680;height:14px}.sec .s.g{background:#5E9C6B;height:18px}
.street-note{margin-top:12px;font-size:14.5px;color:var(--ink2)}
.sa{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 28px;margin-top:36px}
.sa figcaption{margin-top:10px}
.sa figcaption b{font-weight:600}
.sa figcaption span{color:var(--ink2)}
.live{margin-top:48px;overflow:hidden;background:var(--night);color:var(--nink);border-top:1px solid var(--nrule);border-bottom:1px solid var(--nrule)}
.live ul{display:flex;gap:40px;width:max-content;padding:12px 0;list-style:none;margin:0;animation:wall-l 60s linear infinite;font-size:15px}
.live li{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.live li i{width:8px;height:8px;background:#5FA3A8;animation:blink 1.6s ease-in-out infinite}
.live li i.d{background:var(--acc)}
.live li small{color:var(--nink2);font-size:13px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.mobil{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 56px;align-items:center}
.mobil h2{font-size:38px;line-height:1.08;font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.mobil .pair{display:flex;gap:24px;justify-content:center;align-items:flex-end}
.mobil .pair img{width:44%;max-width:260px}
.mobil .pair img:last-child{margin-bottom:40px}
.proof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin-top:32px;border-top:1px solid var(--rule)}
.proof div{padding:22px 0;border-bottom:1px solid var(--rule)}
.proof h3{font-size:20px;font-weight:600;margin-bottom:8px}
.proof p{color:var(--ink2)}
@media (max-width:1100px){
  .tools{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sa{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .verbs,.apeu,.teams .tpanel,.street,.mobil,.ba-row,.sa,.proof{grid-template-columns:minmax(0,1fr)}
  .tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .apeu .txt h2,.street h2,.mobil h2{font-size:30px}
  .teams .tpanel h3{font-size:24px}
  .wall figure{width:220px}
  .sec{padding:20px 14px 14px}.sec .bars{height:160px}.sec .fa{height:160px;flex-basis:12px}
}
@media (max-width:400px){.tools{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .wall .row,.live ul{animation:none}.wall{overflow-x:auto}.live{overflow-x:auto}
  .ripple i{animation:none;opacity:1}.ripple i:nth-child(1){transform:scale(.35)}.ripple i:nth-child(2){transform:scale(.68)}
  .live li i{animation:none}.sec .s,.sec .labs span{transition:none}
}

/* Esquemes animats: representacions, no captures. Each tile explains one idea of the viewer in CSS/SVG. */
.dg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;margin-top:36px}
.dg figure{display:flex;flex-direction:column;gap:10px}
.dg .box{--c:14px;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper2);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.dg .box.n{background:var(--night);color:var(--nink)}
.dg figcaption b{font-size:18px;font-weight:600;display:block}
.dg figcaption span{color:var(--ink2);font-size:15.5px}
.dg .cap{position:absolute;left:12px;bottom:10px;font-family:var(--cond);font-weight:600;font-size:14px}
.dg .oct{clip-path:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%)}
/* 1 scale */
.z{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;transform-origin:54% 56%;animation:z 8s cubic-bezier(.6,0,.4,1) infinite}
.z i{position:absolute;display:block}
.z .a{inset:0;background:var(--night2)}.z .b{left:30%;top:32%;width:40%;height:40%;background:var(--nrule)}.z .c{left:44%;top:46%;width:18%;height:18%;background:var(--ink2)}.z .d{left:51.5%;top:53.5%;width:5%;height:5%;background:var(--nink)}.z .e{left:53.5%;top:55.5%;width:1%;height:1%;background:var(--acc)}
@keyframes z{0%,8%{transform:scale(1)}92%,100%{transform:scale(9)}}
.zl{position:absolute;left:12px;bottom:10px;height:20px;color:var(--nink)}
.zl span{position:absolute;bottom:0;white-space:nowrap;font-family:var(--cond);font-weight:600;font-size:14px;opacity:0;animation:zl 8s infinite}
.zl span:nth-child(2){animation-delay:2s}.zl span:nth-child(3){animation-delay:4s}.zl span:nth-child(4){animation-delay:6s}
@keyframes zl{0%,22%{opacity:1}25%,100%{opacity:0}}
/* 2 one block, many questions */
.box .blk{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:22px}
.box .blk .oct{width:120px;height:120px;animation:recolor 12s infinite}
.box .blk .qq{position:relative;width:170px;height:48px}
.box .blk .qq span{position:absolute;inset:0;opacity:0;animation:fade4 12s infinite}
.box .blk .qq span:nth-child(2){animation-delay:3s}.box .blk .qq span:nth-child(3){animation-delay:6s}.box .blk .qq span:nth-child(4){animation-delay:9s}
.box .blk .qq b{display:block;font-weight:600}.box .blk .qq small{color:var(--nink2);font-size:13px}
@keyframes recolor{0%,22%{background:#2FBF71}25%,47%{background:#E6D45C}50%,72%{background:#E0603A}75%,97%{background:#6B8FB8}100%{background:#2FBF71}}
@keyframes fade4{0%,22%{opacity:1}25%,100%{opacity:0}}
/* 3 walking graph */
.wg{position:absolute;inset:0;width:100%;height:100%}
.wg .st{stroke:var(--rule);stroke-width:2}
.wg path.w{fill:none;stroke-width:5;stroke-linecap:square;stroke-dasharray:120;animation:dash 6s infinite}
.wg .w2{animation-delay:.4s!important}.wg .w3{animation-delay:.9s!important}
@keyframes dash{0%{stroke-dashoffset:120}40%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
/* 4 legend brushing */
.br{position:absolute;inset:16px;display:flex;gap:16px}
.br .cells{flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.br .cells i{background:var(--rule)}.br .cells i.a{animation:litA 7s infinite}.br .cells i.b{animation:litB 7s infinite}
.br .hist{width:120px;position:relative;display:flex;align-items:flex-end;gap:3px;padding-bottom:4px}
.br .hist i{flex:1;background:var(--ink2)}
.br .hist u{position:absolute;bottom:0;top:10%;width:40%;border:2px solid var(--acc);background:rgba(242,183,5,.15);animation:brush 7s infinite}
@keyframes brush{0%,10%{left:8%}45%,55%{left:52%}90%,100%{left:8%}}
@keyframes litA{0%,10%{background:var(--acc)}30%,70%{background:var(--rule)}90%,100%{background:var(--acc)}}
@keyframes litB{0%,10%{background:var(--rule)}30%,70%{background:var(--acc)}90%,100%{background:var(--rule)}}
/* 5 measure / scenario */
.ms{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.ms-btns{display:flex;gap:4px}
.ms-btns button{border:0;background:var(--paper);color:var(--ink);font:400 14.5px/1 'Barlow',sans-serif;min-height:40px;padding:0 14px;cursor:pointer}
.ms-btns button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.ms .bl{display:flex;gap:10px;align-items:flex-end;height:104px}
.ms .bl i{width:42px;background:var(--ink2)}
.ms .bl i.v{height:40px;transition:height .6s,background-color .6s;box-sizing:border-box}
.ms.is-e .bl i.v{height:100px;background:rgba(242,183,5,.2);border:2px dashed var(--ink)}
.ms .lb{font-size:13.5px;background:var(--paper);padding:3px 10px}
.ms .lb .e,.ms.is-e .lb .m{display:none}.ms.is-e .lb .e{display:inline}
/* 6 a day */
.day{position:absolute;inset:0;background:linear-gradient(var(--paper2),var(--paper))}
.day .sun{position:absolute;left:50%;bottom:18%;width:0;height:0;animation:sun 10s linear infinite}
.day .sun::before{content:'';position:absolute;left:-9px;top:-140px;width:18px;height:18px;border-radius:50%;background:var(--acc)}
.day .gr{position:absolute;left:0;right:0;bottom:18%;height:1px;background:var(--ink2)}
.day .bs{position:absolute;left:22%;bottom:18%;display:flex;gap:22px;align-items:flex-end}
.day .bs i{position:relative;width:34px;background:var(--ink2)}
.day .bs i::after{content:'';position:absolute;left:0;top:100%;width:34px;height:24px;background:rgba(23,33,44,.22);transform-origin:top;animation:shadow 10s linear infinite}
.day .bs i.g{width:60px;height:8px;background:#5E9C6B}.day .bs i.g::after{display:none}
.day .clk{position:absolute;left:12px;right:12px;bottom:10px;height:4px;background:var(--rule)}
.day .clk i{display:block;height:100%;background:var(--ink);transform-origin:left;animation:clock 10s linear infinite}
.day .t{position:absolute;left:12px;top:10px;font-family:var(--cond);font-weight:600;font-size:13px;color:var(--ink2)}
@keyframes sun{from{transform:rotate(-80deg)}to{transform:rotate(80deg)}}
@keyframes shadow{0%{transform:skewX(60deg)}50%{transform:skewX(0)}100%{transform:skewX(-60deg)}}
@keyframes clock{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* 7 best location */
.bl7{position:absolute;inset:16px;display:flex;gap:18px}
.bl7 .g{flex:1;display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.bl7 .g i{background:var(--rule)}
.bl7 .g i.c{background:#2B7680;animation:appear 7s infinite}.bl7 .g i.c:nth-of-type(2){animation-delay:.2s}
.bl7 .g i.w{outline:3px solid transparent;outline-offset:2px;animation:appear 7s infinite,win 7s infinite}
.bl7 .bars{width:120px;display:flex;flex-direction:column;justify-content:center;gap:8px;font-size:12px;color:var(--ink2)}
.bl7 .bars i{display:block;height:8px;background:#2B7680}
.bl7 .b1{animation:bar1 7s infinite}.bl7 .b2{animation:bar2 7s infinite}.bl7 .b3{animation:bar3 7s infinite}
@keyframes appear{0%,8%{opacity:0;transform:scale(.6)}20%,100%{opacity:1;transform:scale(1)}}
@keyframes win{0%,55%{outline-color:transparent}65%,100%{outline-color:var(--acc)}}
@keyframes bar1{0%,30%{width:30%}55%,100%{width:88%}}@keyframes bar2{0%,30%{width:70%}55%,100%{width:52%}}@keyframes bar3{0%,30%{width:50%}55%,100%{width:34%}}
/* 8 card */
.card8{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.card8 .c{--c:10px;width:250px;background:var(--paper);padding:14px 16px;display:flex;flex-direction:column;gap:6px;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.card8 .c>*{opacity:0;animation:row 8s infinite}
.card8 .c>:nth-child(2){animation-delay:.4s}.card8 .c>:nth-child(3){animation-delay:.8s}.card8 .c>:nth-child(4){animation-delay:1.2s}.card8 .c>:nth-child(5){animation-delay:1.6s}
.card8 .t{font-size:18px;font-weight:600}.card8 .s{font-size:12.5px;color:var(--ink2)}
.card8 .r{display:flex;justify-content:space-between;font-size:14px;border-top:1px solid var(--rule);padding-top:5px}
.card8 .k{font-size:12px;background:var(--paper2);padding:3px 6px}
@keyframes row{0%{opacity:0;transform:translateY(8px)}6%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
/* 9 export */
.ex{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding-top:26px}
.ex .slot{width:200px;height:14px;background:var(--ink);position:relative;z-index:1}
.ex .win{width:170px;height:150px;overflow:hidden}
.ex .pg{width:170px;height:150px;background:#fff;border:1px solid var(--rule);padding:10px;display:flex;flex-direction:column;gap:6px;animation:paper 6s infinite}
.ex .pg b{font-size:12px}.ex .pg i{display:block;background:var(--paper2);height:6px}.ex .pg i.m{height:50px;background:var(--rule)}
.ex .pg small{margin-top:auto;font-size:9.5px;color:var(--ink2);border-top:1px solid var(--rule);padding-top:4px}
@keyframes paper{0%,15%{transform:translateY(-100%)}45%,100%{transform:translateY(0)}}
@media (max-width:1100px){.dg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.dg{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){
  .dg .box *,.dg .box *::before,.dg .box *::after{animation:none!important}
  .zl span:first-child,.box .blk .qq span:first-child,.card8 .c>*{opacity:1}.wg path.w{stroke-dashoffset:0}
}

/* Inici v3, ronda 2: carrusel de vistes, graf a peu i secció mesurada del Passeig de Sant Joan */
.car{position:relative}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc(50% - 10px);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;scrollbar-width:thin}
.car-track:focus-visible{outline:3px solid var(--acc);outline-offset:4px}
.slide{scroll-snap-align:start}
.slide figcaption{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.slide figcaption b{font-size:19px;font-weight:600}
.slide figcaption span{color:var(--ink2)}
.car-nav{display:flex;align-items:center;gap:8px;margin-top:14px}
.car-nav button{width:46px;height:46px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.car-nav button:hover{background:var(--paper2)}
.car-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.car-count{margin-left:8px;font:600 15px var(--cond);color:var(--ink2);font-variant-numeric:tabular-nums}
.wall .rows{margin-top:28px}
.wall .row figure{width:220px}
.wgraph{margin-top:8px;max-width:420px}
.wgraph svg{width:100%;height:auto;background:var(--paper);border:1px solid var(--rule)}
.wgraph .st{stroke:var(--rule);stroke-width:3;fill:none}
.wgraph path.w{fill:none;stroke-width:6;stroke-linecap:square;stroke-dasharray:240;stroke-dashoffset:240;animation:wdraw 7s infinite}
.wgraph .w1{stroke:#1D6B5E}.wgraph .w2{stroke:#2B7680;animation-delay:.7s!important}.wgraph .w3{stroke:#5FA3A8;animation-delay:1.4s!important}.wgraph .w4{stroke:#9CC8CB;animation-delay:2.1s!important}
@keyframes wdraw{0%{stroke-dashoffset:240}35%,85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.wgraph figcaption{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:14px;color:var(--ink2)}
.wgraph figcaption span{display:inline-flex;align-items:center;gap:6px}
.wgraph figcaption i{width:18px;height:5px;display:inline-block}
.wgraph .m5{background:#1D6B5E}.wgraph .m10{background:#2B7680}.wgraph .m15{background:#5FA3A8}
.wgraph .nb{flex-basis:100%}
.sec-vid{margin-top:8px}
.sec-vid figcaption{margin-top:10px;font-size:15px}
.sec2{--c:18px;background:var(--paper2);padding:20px 24px 18px;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.sec2 .dim{position:relative;margin:0 26px 14px;border-top:1px solid var(--ink2);text-align:center}
.sec2 .dim::before,.sec2 .dim::after{content:'';position:absolute;top:-6px;width:1px;height:11px;background:var(--ink2)}
.sec2 .dim::before{left:0}.sec2 .dim::after{right:0}
.sec2 .dim span{position:relative;top:-11px;background:var(--paper2);padding:0 8px;font:600 14px var(--cond)}
.sec2 .bars{display:flex;align-items:flex-end;height:210px}
.sec2 .fa{flex:0 0 26px;height:210px;background:#C9D0D3 repeating-linear-gradient(0deg,transparent 0 14px,var(--paper) 14px 22px) 6px 10px/12px calc(100% - 14px) no-repeat;border:1px solid var(--ink2);border-bottom:0}
.sec2 .s{position:relative;flex-basis:0;flex-shrink:1;min-width:0;transition:flex-grow .9s cubic-bezier(.6,0,.2,1)}
.sec2 .s.v{height:20px;background:#D9DEDB;border-top:2px solid var(--ink2)}
.sec2 .s.c{height:12px;background:#59646E}.sec2 .s.g{height:16px;background:#5E9C6B}.sec2 .s.b{height:12px;background:#2B7680}.sec2 .s.r{height:12px;background:#B8323A}
.sec2 .tree{position:absolute;bottom:100%;left:22%;width:38px;height:84px;margin-left:-19px}
.sec2 .tree.t2{left:78%}
.sec2 .s.g .tree{left:50%}
.sec2 .tree::before{content:'';position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:#5E9C6B;opacity:.9}
.sec2 .tree::after{content:'';position:absolute;left:17px;top:34px;width:4px;height:50px;background:var(--ink2)}
.sec2 .ppl{position:absolute;bottom:100%;left:50%;width:10px;height:30px;margin-left:-5px}
.sec2 .ppl::before{content:'';position:absolute;left:2px;top:0;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.sec2 .ppl::after{content:'';position:absolute;left:1px;top:8px;width:9px;height:22px;background:var(--ink);clip-path:polygon(20% 0,80% 0,100% 55%,75% 55%,75% 100%,25% 100%,25% 55%,0 55%)}
.sec2 .car{position:absolute;bottom:100%;left:50%;width:44px;height:22px;margin-left:-22px;background:var(--ink2);clip-path:polygon(18% 0,78% 0,92% 45%,100% 50%,100% 100%,0 100%,0 50%,8% 45%)}
.sec2 .bus{position:absolute;bottom:100%;left:50%;width:30px;height:34px;margin-left:-15px;background:#B8323A;clip-path:polygon(8% 0,92% 0,100% 12%,100% 100%,0 100%,0 12%)}
.sec2 .bike{position:absolute;bottom:100%;left:50%;width:24px;height:16px;margin-left:-12px;border:2px solid #2B7680;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;opacity:0;transition:opacity .6s}
.sec2.is-new .bike,[data-sec].is-new .sec2 .bike{opacity:1}
.sec2 .labs{display:flex;margin:8px 26px 0;font-size:12.5px;color:var(--ink2)}
.sec2 .labs span{flex-basis:0;min-width:0;text-align:center;overflow:hidden;white-space:nowrap;transition:flex-grow .9s cubic-bezier(.6,0,.2,1)}
.sec2 .labs b{display:block;font:600 13px var(--cond);color:var(--ink)}
.sec2 .share{display:flex;margin:14px 26px 0;height:22px;font:600 12.5px/22px var(--cond);color:#fff}
.sec2 .share span{flex-basis:0;padding-left:6px;overflow:hidden;white-space:nowrap}
.sec2 .share .pv{background:#8A9590}.sec2 .share .pc{background:#59646E}.sec2 .share .pg{background:#5E9C6B}.sec2 .share .pr{background:#B8323A}
[data-sec].is-new .sec2 .share{opacity:.35}
@media (max-width:760px){.car-track{grid-auto-columns:86%}.sec2{padding:16px 10px}.sec2 .dim,.sec2 .labs,.sec2 .share{margin-left:14px;margin-right:14px}.sec2 .fa{flex-basis:14px}.sec2 .labs{font-size:11px}}
@media (prefers-reduced-motion:reduce){.car-track{scroll-behavior:auto}.wgraph path.w{animation:none;stroke-dashoffset:0}.sec2 .s,.sec2 .labs span{transition:none}}
.wall .slide{position:static;width:auto}
.wall .slide figcaption{position:static;background:none;padding:0;font-size:inherit;font-weight:400}
.wall .slide .frame img{aspect-ratio:16/10}
.mov{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px;margin-top:36px}
.mov figcaption{margin-top:12px}
.mov figcaption b{font-size:18px;font-weight:600}
.mov figcaption p{margin-top:3px;font-size:15.5px;color:var(--ink2)}
.mov video{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:var(--paper2);clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}
@media (max-width:760px){.mov{grid-template-columns:minmax(0,1fr)}}
/* Il·lustracions isomètriques (Fable, 05-10-2026): SVG amb animació pròpia que s’atura amb moviment reduït */
.illo{margin:28px 0 8px}
.illo img{width:100%;height:auto}
.illo.wide{max-width:860px;margin:24px auto 12px}
.proof+.illo,.illo+.proof{margin-top:16px}
#h-proves~.illo,.sect .illo:has(+.proof){max-width:760px;margin-left:auto;margin-right:auto}
.street .illo{margin:20px 0 8px}

/* Assistant entry (11-10-2026): notes under the captures, and a one-line pointer on the home page */
.asst-notes{margin-top:32px;padding-left:20px;border-left:3px solid var(--rule);display:grid;gap:12px;max-width:52em}
.asst-notes p{font-size:16px;color:var(--ink2)}
.com-note{margin-top:28px;max-width:52em;font-size:17px;color:var(--ink2)}
.com-note a{font-weight:600;white-space:nowrap}
@media (max-width:760px){.asst-notes p{font-size:15.5px}.com-note{font-size:16px}}

/* Motor 3D (11-10-2026): the viewer draws with Mapbox GL JS. A night band on the home page and the motor-3d sub-page.
   Every picture keeps the map attribution (bottom edge): wide crops cut from the top only. */
.cine{background:var(--night);color:var(--nink);padding:76px 0 72px;margin-top:72px}
.cine a{color:var(--nink)}
.cine .kick{display:flex;align-items:center;gap:10px;font:600 14px/1.3 var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--nink2)}
.cine .kick i{width:9px;height:9px;background:var(--nink2);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.cine-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end;margin-bottom:34px}
.cine h2,.cine h1{margin-top:14px;font-size:50px;line-height:1.03;font-weight:600;letter-spacing:-.027em;max-width:15em}
.cine-head p{font-size:18px;color:var(--nink2);max-width:31em}
.cine .frame{--c:22px;background:var(--nrule);position:relative}
.cine-stage img,.cine-stage video{display:block;width:100%;aspect-ratio:16/8.4;object-fit:cover;object-position:50% 100%;background:var(--night2);clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}
.cine-stage video{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);aspect-ratio:auto}
.cine-cap{margin-top:12px;font-size:14.5px;color:var(--nink2)}
.cine-cap .tag,.cine-strip .tag{background:var(--night2);color:var(--nink2)}
.cine-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px}
.cine-strip .frame{--c:14px}
.cine-strip img{aspect-ratio:16/10;object-position:50% 100%}
.cine-strip figcaption{margin-top:12px;font-size:15px;line-height:1.45;color:var(--nink2)}
.cine-strip figcaption b{display:block;color:var(--nink);font-weight:500;font-size:16.5px;margin-bottom:2px}
.cine-foot{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;margin-top:34px}
.cine-foot .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.cine-foot .btn:hover{background:#fff}
.cine-foot .btn.ghost{background:transparent;color:var(--nink);border-color:var(--nrule)}
.cine-foot .btn.ghost:hover{background:var(--night2)}
.cine-foot small{font-size:14px;color:var(--nink2)}

/* Day / dusk: one camera, two themes. Without JavaScript the two pictures sit side by side; with it, a handle wipes between them. */
.wipe{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.wipe figure{min-width:0}
.wipe figcaption{margin-top:8px;font-size:14.5px;color:var(--ink2)}
.js .wipe.on{display:block;position:relative;--x:50%}
.js .wipe.on figure{margin:0}
.js .wipe.on figure+figure{position:absolute;inset:0;clip-path:inset(0 0 0 var(--x))}
.js .wipe.on figcaption{display:none}
.wipe-ui{display:none}
.js .wipe.on .wipe-ui{display:block;position:absolute;inset:0;pointer-events:none}
.wipe-ui .bar{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px rgba(20,29,39,.35)}
.wipe-ui .knob{position:absolute;top:50%;left:var(--x);width:44px;height:44px;margin:-22px 0 0 -22px;background:var(--paper);color:var(--ink);display:grid;place-items:center;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.wipe-ui .knob svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.wipe-ui .lb{position:absolute;top:16px;padding:4px 10px;font:600 13px/1.4 var(--cond);background:rgba(20,29,39,.78);color:var(--nink)}
.wipe-ui .lb.l{left:18px}.wipe-ui .lb.r{right:18px}
.wipe input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;pointer-events:auto}
.wipe input[type=range]:focus-visible+.wipe-ui .knob{outline:3px solid var(--acc);outline-offset:2px}
.wipe-note{margin-top:12px;font-size:14.5px;color:var(--ink2)}

/* Motor 3D sub-page */
.m3-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px;margin-top:36px}
.m3-grid figure{min-width:0}
.m3-grid img{object-position:50% 100%}
.m3-grid figcaption{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--ink2)}
.m3-grid figcaption b{display:block;color:var(--ink);font-weight:600;font-size:17px;margin-bottom:3px}
.m3-grid .wide{grid-column:1/-1}
.m3-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px 56px;align-items:center}
.m3-split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.m3-split.rev .txt{order:2}
.m3-split h2{font-size:34px;line-height:1.08;font-weight:600;letter-spacing:-.02em}
.m3-split .txt p{margin-top:14px;color:var(--ink2)}
.m3-split figure{min-width:0}
.m3-split figure .frame{position:relative}
.m3-split video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--paper2);clip-path:polygon(calc(var(--c) - .4px) 0,100% 0,100% calc(100% - var(--c) + .4px),calc(100% - var(--c) + .4px) 100%,0 100%,0 calc(var(--c) - .4px))}
.m3-split figcaption{margin-top:10px;font-size:14.5px;color:var(--ink2)}
.m3-facts{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:0}
.m3-facts li{padding:12px 0;border-top:1px solid var(--rule);font-size:16px}
.m3-facts li b{font-weight:600}
.m3-two{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:36px}
.m3-two div{border-top:2px solid var(--ink);padding-top:14px}
.m3-two h3{font-size:19px;font-weight:600}
.m3-two p{margin-top:8px;font-size:16px;color:var(--ink2)}
@media (max-width:1100px){.cine-head,.m3-split,.m3-split.rev{grid-template-columns:1fr}.m3-split.rev .txt{order:0}.cine-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .cine{padding:52px 0 48px;margin-top:48px}
  .cine h2,.cine h1{font-size:34px}
  .cine-stage img{aspect-ratio:16/10}
  .cine-strip,.m3-grid,.m3-two{grid-template-columns:1fr}
  .m3-split h2{font-size:27px}
  .wipe{grid-template-columns:1fr}
  .wipe-ui .knob{width:38px;height:38px;margin:-19px 0 0 -19px}
}

/* 33 tools (11-10-2026): Mobility has 14 rows, so it takes two columns on wide screens. */
.tools{grid-template-columns:repeat(4,minmax(0,1fr))}
.tools>div:nth-child(3){grid-column:span 2}
.tools>div:nth-child(3) ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
@media (max-width:1100px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tools{grid-template-columns:1fr}.tools>div:nth-child(3){grid-column:auto}.tools>div:nth-child(3) ul{grid-template-columns:1fr}}

/* Gallery (11-10-2026): the new-engine block on top, the 03-10 captures below as an archive */
.gal-k{margin-top:40px}
.gal-old{margin-top:72px;padding-top:24px;border-top:1px solid var(--rule)}