@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/barlow-700.woff2) format("woff2")}
:root{
  --ground:#E6E5E0;--ink:#121212;--yellow:#F2C200;--white:#FFFFFF;
  --soft:rgba(18,18,18,.72);--rule:rgba(18,18,18,.16);
  --font:"Barlow","DIN Alternate","Helvetica Neue",Arial,sans-serif;
  --wrap:1200px;--gutter:32px;--rail:64px;--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{font-size:100%;background:var(--ground);scrollbar-color:var(--ink) var(--ground);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none !important}}
body{margin:0;color:var(--ink);background:var(--ground);font:400 1.125rem/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--yellow);text-decoration-thickness:3px}
p{margin:0}
h1,h2,h3{font-family:var(--font);margin:0;text-wrap:balance}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:var(--white);padding:10px 16px;z-index:9}

/* zone: a marked place on the floor, four L-shaped corner marks just outside its edge */
.zone{position:relative;background:var(--white)}
.zone::before{content:"";position:absolute;inset:-8px;pointer-events:none;
  background:linear-gradient(var(--ink),var(--ink)) 0 0/20px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 0/2px 20px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 0/20px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 0/2px 20px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 0 100%/20px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/2px 20px no-repeat,
    linear-gradient(var(--ink),var(--ink)) 100% 100%/20px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 100%/2px 20px no-repeat}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:32px;padding-bottom:32px;border-bottom:1px solid var(--rule)}
.brand{display:block}
.logo{display:block;height:32px;width:auto}
.nav nav{display:flex;align-items:center;gap:4px}
.nav nav a{font:600 .875rem/1 var(--font);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;padding:12px 12px;white-space:nowrap}
.nav nav a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.nav nav a.lang{border:1px solid var(--ink);margin-left:12px;padding:10px 16px}

/* hero: claim on the left, the route line starts under the action; a marked board on the right */
.hero{display:grid;grid-template-columns:1.3fr .7fr;gap:72px;align-items:stretch;padding-top:72px}
.claim{display:flex;flex-direction:column;min-width:0}
.claim::after{content:"";flex:1;min-height:24px;width:4px;margin:24px 0 0 10px;background:var(--yellow)}
h1{font-weight:600;font-size:clamp(2.75rem,5.4vw,5rem);line-height:1;letter-spacing:-.025em;max-width:16ch;margin-bottom:32px}
.hero-home h1{font-size:clamp(3rem,6.6vw,6rem);line-height:.96}
h1 em{font-style:normal}
.lead{font-size:clamp(1.1875rem,1.6vw,1.375rem);line-height:1.5;color:var(--soft);max-width:46ch;margin-bottom:40px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:32px}
.btn{display:inline-flex;align-items:center;font:600 1.125rem/1 var(--font);text-decoration:none;color:var(--white);background:var(--ink);gap:8px;padding:24px 32px;transition:background .2s var(--ease),color .2s var(--ease)}
.btn:hover{background:var(--yellow);color:var(--ink);text-decoration:none}
.link{display:inline-flex;align-items:center;gap:8px;font:600 1.0625rem/1 var(--font);text-decoration:none;padding:12px 0;border-bottom:2px solid var(--ink)}
.link:hover{border-bottom-color:var(--yellow)}
.link svg,.btn svg{width:18px;height:18px}
.alt{margin-top:20px;font-size:.9375rem;color:var(--soft)}
.alt a{color:var(--ink)}

/* board: measured results (home) or the route plate (sub-pages) */
.board{align-self:start;padding:32px 32px 16px;margin-top:12px}
.board-title{font:600 .8125rem/1 var(--font);text-transform:uppercase;letter-spacing:.1em;color:var(--soft);padding-bottom:16px;border-bottom:2px solid var(--ink)}
.board dl{margin:0;display:grid;grid-template-columns:max-content 1fr;column-gap:24px}
.board dl div{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule)}
.board dl div:last-child{border-bottom:0}
.board dt{font:600 1.75rem/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.board dd{margin:0;font-size:.9375rem;line-height:1.35;color:var(--soft)}
.board dd b{display:block;font-weight:600;font-size:1rem;color:var(--ink)}
.board-link{display:inline-flex;align-items:center;gap:8px;margin:16px 0 8px;font-weight:600;font-size:1rem;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:4px}
.board-link svg{width:16px;height:16px}
.board-link:hover{border-bottom-color:var(--yellow)}
.route ol{list-style:none;margin:0;padding:0;counter-reset:r}
.route li{counter-increment:r;border-bottom:1px solid var(--rule)}
.route li:last-child{border-bottom:0}
.route a{display:grid;grid-template-columns:2.25rem 1fr;align-items:baseline;padding:16px 0;font:600 1.125rem/1.3 var(--font);text-decoration:none}
.route a::before{content:counter(r,decimal-leading-zero);font-size:.875rem;color:var(--soft);font-variant-numeric:tabular-nums}
.route a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}

/* sections: every section hangs from the route line; its heading is a stop */
.sec{position:relative;padding-top:80px;padding-left:calc(var(--gutter) + var(--rail))}
.sec::before{content:"";position:absolute;left:calc(var(--gutter) + 10px);top:0;bottom:0;width:4px;background:var(--yellow)}
main > .sec:last-child{padding-bottom:96px}
.hero + .sec{padding-top:48px}
.sec > h2{position:relative;font-weight:600;font-size:clamp(2rem,3.6vw,3rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:20px}
.sec > h2::before{content:"";position:absolute;left:calc(4px - var(--rail));top:.3em;width:16px;height:16px;background:var(--ink);box-shadow:0 0 0 4px var(--yellow)}
.intro{font-size:1.1875rem;color:var(--soft);max-width:60ch;margin:-4px 0 40px}
.more{display:inline-flex;align-items:center;gap:8px;font-weight:600;margin-top:20px;text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:4px}
.more svg{width:18px;height:18px}

/* service rows */
.rows{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rows li{border-bottom:1px solid var(--rule)}
.row{display:grid;grid-template-columns:1fr 1.4fr 24px;gap:32px;align-items:baseline;padding:24px 0;text-decoration:none}
.row h3{font-weight:600;font-size:1.375rem;line-height:1.2}
.rows.lg .row h3{font-size:clamp(1.625rem,2.6vw,2.125rem);letter-spacing:-.015em}
.row p{color:var(--soft)}
.row svg{width:24px;height:24px;align-self:center}
.row:hover{text-decoration:none}
.row:hover h3{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:.2em}
.row svg{transition:transform .2s var(--ease)}
.row:hover svg{transform:translateX(4px)}
.sub{font:600 1.25rem/1.2 var(--font);margin:56px 0 16px}

/* stations: a band where the steps are stops on one line */
.band{background:var(--white);box-shadow:0 0 0 100vmax var(--white);clip-path:inset(0 -100vmax);padding-bottom:96px}
.sec:has(+ .band){padding-bottom:96px}
.band.sec{padding-top:96px}
.stations{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));counter-reset:s}
.stations li{position:relative;counter-increment:s;padding:40px 32px 0 0}
.stations li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;background:var(--ink);box-shadow:0 0 0 4px var(--yellow);z-index:1}
.stations li::after{content:"";position:absolute;left:16px;right:0;top:6px;height:4px;background:var(--yellow)}
.stations:not(.to-result) li:last-child::after{display:none}
.stations b{display:block;font:600 1.1875rem/1.25 var(--font);margin-bottom:8px}
.stations b::before{content:counter(s,decimal-leading-zero) " ";color:var(--soft);font-weight:500;font-variant-numeric:tabular-nums}
.stations span{display:block;font-size:1rem;line-height:1.5;color:var(--soft)}
.result{position:relative;width:fit-content;max-width:100%;margin:48px 0 0;background:var(--ink);color:var(--white);padding:24px 32px;font:600 clamp(1.25rem,2vw,1.625rem)/1.25 var(--font)}
.result::before{content:"";position:absolute;left:calc(4px - var(--rail));top:calc(50% - 8px);width:16px;height:16px;background:var(--ink);box-shadow:0 0 0 4px var(--yellow)}

/* points */
.points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 56px;border-top:2px solid var(--ink);padding-top:32px}
.points li{position:relative;padding-left:32px;font-size:1.1875rem;line-height:1.5}
.points li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;background:var(--ink)}
.points.one{grid-template-columns:1fr;gap:8px;border-top:0;padding-top:0;margin:32px 0 8px}
.points.one li{font-size:1.0625rem}

/* track record: a measured ledger */
.track{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.track li{display:grid;grid-template-columns:14rem 1fr 15rem;gap:32px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--rule)}
.fig{font:600 clamp(2.25rem,3.4vw,2.875rem)/1 var(--font);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.track h3{font-weight:600;font-size:1.25rem;margin-bottom:4px}
.track li div p{font-size:1rem;color:var(--soft)}
.note{font-size:.9375rem;color:var(--soft)}

/* project facts: three label plates */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:0}
.plate{background:var(--white);border-top:4px solid var(--ink);padding:24px 24px 32px}
.plate dt{font:600 1.375rem/1.2 var(--font)}
.plate dd{margin:8px 0 0;color:var(--soft)}

/* work */
.cases{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.case{padding:40px 32px 32px}
.case h3{font-weight:600;font-size:clamp(1.625rem,2.6vw,2.125rem);letter-spacing:-.015em;margin-bottom:16px}
.case h3 a{text-decoration:none}
.case h3 a::after{content:"";position:absolute;inset:0}
.case h3 a:focus-visible{outline:none}
.case:focus-within{outline:3px solid var(--ink);outline-offset:12px}
.case:hover h3{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:.2em}
.case p{color:var(--soft)}
.case .tag{font:600 .8125rem/1 var(--font);text-transform:uppercase;letter-spacing:.1em;margin-top:20px}
.case .more{margin-top:16px}
.lab{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:2px solid var(--ink)}
.lab li{padding:24px 0 24px;border-bottom:1px solid var(--rule)}
.lab h3{font-weight:600;font-size:1.125rem;margin-bottom:6px}
.lab h3 a{display:inline-flex;align-items:center;gap:6px;text-decoration:none;padding:10px 0;margin:-10px 0}
.lab h3 a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.lab h3 svg{width:16px;height:16px}
.lab p{font-size:1rem;color:var(--soft)}

/* text and about */
.text .body,.about .body{font-size:1.1875rem;line-height:1.6;max-width:62ch}
.body p + p{margin-top:16px}
.about{display:grid;grid-template-columns:280px 1fr;gap:64px;align-items:start}
.photo{margin:8px 0 0;padding:12px}
.photo img{display:block;width:100%;height:auto}

/* close: the route ends at the email */
.close{background:var(--ink);color:var(--white);padding-top:96px;padding-bottom:48px}
.close .wrap{position:relative}
.close .wrap::before{content:"";position:absolute;left:calc(var(--gutter) + 10px);top:-96px;height:calc(96px + 24px);width:4px;background:var(--yellow)}
.close .cta{position:relative;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:0 0 56px var(--rail);border-bottom:1px solid rgba(255,255,255,.18)}
.close .cta::before{content:"";position:absolute;left:4px;top:16px;width:16px;height:16px;background:var(--yellow)}
.close .cta p{font:600 clamp(1.625rem,2.8vw,2.375rem)/1.2 var(--font);letter-spacing:-.015em;max-width:28ch}
.btn-on-dark{background:var(--yellow);color:var(--ink)}
.btn-on-dark:hover{background:var(--white)}
.close :focus-visible{outline-color:var(--yellow)}
.sitemap{list-style:none;margin:0;padding:24px 0 0;display:flex;flex-wrap:wrap;gap:0 32px;font-size:1rem}
.sitemap a{display:inline-block;padding:10px 0;color:rgba(255,255,255,.88)}
.sitemap a[aria-current]{color:var(--yellow);font-weight:600;text-decoration:none}
.fine{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;padding-top:24px;font-size:.875rem;line-height:1.55;color:rgba(255,255,255,.72)}

@media (max-width:960px){
  .hero{grid-template-columns:1fr;gap:0}
  .claim::after{flex:none;height:40px;min-height:0}
  .board{margin:0 0 0 var(--rail)}
  .board::after{content:"";position:absolute;left:calc(10px - var(--rail));top:-8px;bottom:-96px;width:4px;background:var(--yellow)}
  .track li{grid-template-columns:9rem 1fr;gap:8px 32px}
  .track .note{grid-column:2}
  .cases{grid-template-columns:1fr;gap:40px}
  .about{grid-template-columns:200px 1fr;gap:40px}
}
@media (max-width:720px){
  .nav{flex-wrap:wrap;gap:12px;padding-bottom:12px}
  .nav nav{width:100%;justify-content:space-between;margin:0 -10px}
  .nav nav a{padding:12px 10px;font-size:.8125rem;letter-spacing:.06em}
  .nav nav a.lang{margin-left:0}
  .row{grid-template-columns:1fr 24px;gap:8px 16px}
  .row p{grid-column:1}
  .row svg{grid-row:1;grid-column:2}
  .points,.facts,.lab{grid-template-columns:1fr}
  .stations{grid-template-columns:1fr}
  .stations li{padding:0 0 32px 40px}
  .stations li::before{top:.2em}
  .stations li::after{left:7px;right:auto;top:calc(.2em + 20px);bottom:0;width:2px;height:auto;background:var(--ink)}
  .stations li:last-child::after{display:none}
  .about{grid-template-columns:1fr}
  .about .photo{width:200px}
  .close .cta{grid-template-columns:1fr;gap:24px;justify-items:start}
  .fine{grid-template-columns:1fr;gap:20px}
}
@media (max-width:560px){
  :root{--gutter:20px;--rail:40px}
  body{font-size:1.0625rem}
  .logo{height:24px}
  .hero{padding-top:40px}
  h1,.hero-home h1{font-size:11vw;max-width:none}
  .actions{flex-direction:column;align-items:flex-start;gap:16px}
  .board{padding:24px 24px 16px}
  .board dt{font-size:1.5rem}
  .sec{padding-top:72px}
  .band{padding-bottom:72px}
  .sec:has(+ .band){padding-bottom:72px}
  .track li{grid-template-columns:1fr;gap:6px}
  .track .note{grid-column:1}
  .case{padding:32px 24px}
}