.sec{padding:clamp(68px,9vw,150px) var(--g)}
.grey{background:var(--grey)}
.black{background:#000;color:#fff}
.black a:hover{color:#b9b6ff}
.cols{display:grid;gap:28px}
@media (min-width:900px){.cols{grid-template-columns:1fr 1fr;gap:40px}}
.body{max-width:515px}
.body p+p{margin-top:1em}
.lead{font-size:clamp(18px,1.6vw,24px);font-weight:500;line-height:1.3}
.small{font-size:13px;line-height:1.5}
.more{display:inline-block;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px;padding:12px 0}
.mores{display:flex;flex-wrap:wrap;gap:0 32px;margin-top:20px}
.rule{display:block;height:1px;background:currentColor;border:0;margin:0}
.muted{color:var(--ink-2)}
.black .muted{color:#b5b5b5}

/* home hero: one photo across 200vh */
.hero-home{position:relative;height:200vh;color:#fff;background:#0d0851}
.hero-home .stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-home .stick>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tint::after{content:"";position:absolute;inset:0;background:var(--tint);pointer-events:none}
.hero-home .copy{position:absolute;z-index:1;left:var(--g);right:var(--g);bottom:clamp(48px,12vh,140px)}
.hero-home h1{max-width:9.5em}
.hero-home .rule{width:min(40vw,560px);margin:34px 0 18px;opacity:.9}
.hero-home .lead{max-width:24em;font-size:clamp(16px,1.3vw,20px)}
.hero-home .two{position:absolute;z-index:1;top:100vh;left:var(--g);right:var(--g);height:100vh;display:flex;align-items:center;justify-content:flex-end}
.triad{display:flex;flex-direction:column;font-size:clamp(33px,3.5vw,50px);font-weight:500;line-height:1.05}
@media (max-width:767px){.hero-home .rule{width:60vw}}

/* inner hero */
.ihero{padding:calc(118px + 5vw) var(--g) clamp(48px,6vw,90px);display:grid;gap:40px}
.ihero h1{max-width:11em}
.ihero .rule{width:min(610px,70vw);margin-top:36px;background:#000}
.ihero .lead{margin-top:24px;max-width:30em}
@media (min-width:900px){.ihero{grid-template-columns:1fr auto;align-items:end}.ihero .triad{text-align:left}}

/* photo bands with parallax */
.band{position:relative;margin:0;height:clamp(300px,62vw,980px);overflow:hidden;background:#1a1840}
.band img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;will-change:transform}
.band::after{content:"";position:absolute;inset:0;background:var(--tint-band);pointer-events:none}
.band.short{height:clamp(260px,40vw,640px)}

/* marquee */
.marquee{overflow:hidden;white-space:nowrap;font-size:clamp(48px,12.5vw,200px);font-weight:500;line-height:1.2;letter-spacing:-.01em;position:relative;padding:.12em var(--g)}
/* One word at a time: it rises out of a mask from blur to sharp, holds, then leaves upward (JS cycles .on/.off). */
.marquee .track{display:grid}
.marquee .track span{grid-area:1/1;opacity:0;transform:translateY(55%);filter:blur(14px);transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .8s,filter .9s}
.marquee .track span.on{opacity:1;transform:none;filter:none}
.marquee .track span.off{opacity:0;transform:translateY(-45%);filter:blur(10px);transition-duration:.7s}
@keyframes mq{to{transform:translateX(-50%)}}
html.paused .marquee .track,html.paused .ribbon .track{animation-play-state:paused}
.mq-ctl{position:absolute;right:var(--g);bottom:8px;font-size:12px;font-weight:600;background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:12px 0;line-height:1;letter-spacing:0}


/* Lifecycle steps: Remotion (steps.js) reveals them one by one on first view; all stay visible after. */
.steps-wrap{position:relative;padding:clamp(28px,4vw,64px) var(--g)}
.steps-wrap{container-type:inline-size}
.steps{list-style:none;margin:0;padding:0;display:flex;justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap;align-items:baseline;font-size:calc((100vw - 2 * var(--g)) / 24);font-size:calc(100cqw / 24);font-weight:500;line-height:1.15;letter-spacing:-.01em}
.steps li{display:flex;align-items:baseline;white-space:nowrap}
.steps li:not(:last-child){flex:1 1 auto}
/* connector: a hairline that stretches to the next step and ends in a dot, so the row always spans the full width */
.steps .arr{flex:1 1 0;min-width:.5em;align-self:center;height:1em;margin:0 .3em;position:relative;color:var(--accent)}
.steps .arr::before{content:"";position:absolute;left:0;right:.16em;top:50%;height:max(1px,.025em);background:currentColor;transform:translateY(-50%)}
.steps .arr::after{content:"";position:absolute;right:0;top:50%;width:.16em;height:.16em;border-radius:50%;background:currentColor;transform:translateY(-50%)}
.js .steps:not(.done)>li{opacity:0;animation:steps-show 0s 6s forwards} /* hidden from first paint; shown after 6 s only if steps.js never runs */
.js .steps.armed:not(.done)>li{animation:none}                         /* steps.js runs: hidden until the Remotion play ends */
@keyframes steps-show{to{opacity:1}}

/* blur-to-sharp words */
.display{font-size:clamp(46px,7.4vw,124px);font-weight:500;line-height:1.02;margin-top:clamp(56px,8vw,120px)}
.display em{font-style:italic;font-weight:700}
.display .ln{display:block}
.display .ln:nth-child(2){padding-left:clamp(0px,18vw,320px)}
.display .cap{display:inline-block;vertical-align:top;font-size:12px;font-style:normal;font-weight:400;line-height:1.3;max-width:11em;margin:.6em 0 0 14px;letter-spacing:0}
html.js .bw{display:inline-block;filter:blur(30px);opacity:.15;transition:filter .9s ease,opacity .9s ease;transition-delay:var(--d,0ms)}
html.js .in .bw,html.js .bw.in{filter:none;opacity:1}

/* service teaser: giant staggered words */
.svc{list-style:none;margin:clamp(48px,6vw,90px) 0 0;padding:0}
.svc li{border-top:1px solid var(--line)}
.svc li:last-child{border-bottom:1px solid var(--line)}
.svc a{display:flex;align-items:flex-start;gap:14px;text-decoration:none;padding:.08em 0}
.svc .nm{font-size:clamp(44px,8.9vw,160px);font-weight:500;line-height:1.08;letter-spacing:-.01em}
.svc .cp{font-size:12px;line-height:1.3;max-width:13em;padding-top:1.3em}
@media (min-width:768px){
  .svc li:nth-child(1) a{padding-left:0}.svc li:nth-child(2) a{padding-left:14vw}.svc li:nth-child(3) a{padding-left:5vw}.svc li:nth-child(4) a{padding-left:24vw}
  .svc li:nth-child(5) a{padding-left:9vw}.svc li:nth-child(6) a{padding-left:30vw}.svc li:nth-child(7) a{padding-left:2vw}.svc li:nth-child(8) a{padding-left:18vw}
  .svc .cp{font-size:11px}
}

/* black figures block over a photo band */
.figs{position:relative;margin:calc(-1 * clamp(160px,24vw,420px)) var(--g) 0;padding:clamp(48px,6vw,96px) clamp(24px,4vw,72px);overflow:hidden}
.ribbon{margin:clamp(40px,5vw,70px) calc(-1 * clamp(24px,4vw,72px) - 20px);transform:rotate(-3deg);border-top:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.55);overflow:hidden;white-space:nowrap;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:12px 0}
.ribbon .track{display:flex;justify-content:center;flex-wrap:wrap;gap:0 3em}
.ribbon{white-space:normal}
.counts{display:grid;gap:44px;margin-top:clamp(36px,5vw,72px)}
.counts>div{max-width:16em}
.counts b,.factgrid b{display:block;font-size:clamp(64px,7vw,110px);font-weight:500;line-height:.9;letter-spacing:-.06em;white-space:nowrap}
.cu{font-variant-numeric:tabular-nums}
.unit{font-style:normal;font-size:.36em;letter-spacing:0;margin-left:.15em}
.counts>div>span,.factgrid>div>span{display:block;font-size:14px;margin-top:18px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.7);width:max-content;max-width:100%}
.counts>div>small,.factgrid>div>small{display:block;font-size:12px;color:#b5b5b5;margin-top:8px}
@media (min-width:768px){.counts{grid-template-columns:repeat(3,1fr)}.counts>div:nth-child(2){margin-top:70px}.counts>div:nth-child(3){margin-top:24px}}
.factgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:56px 40px}
.factgrid b{font-size:clamp(56px,5vw,84px)}

/* openings teaser */
.news{display:grid;gap:40px;margin-top:clamp(40px,5vw,72px)}
.news figure{margin:0;position:relative;overflow:hidden;aspect-ratio:750/685;background:#1a1840}
.news figure img{width:100%;height:100%;object-fit:cover}
@media (min-width:1024px){.news{grid-template-columns:1fr 1fr;gap:64px}}
.stack{font-size:clamp(20px,1.8vw,26px);font-weight:500;line-height:1.1;margin-top:20px}

/* list rows with arrows */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid #000}
.rows>li{border-bottom:1px solid var(--line)}
.rows .r{display:grid;grid-template-columns:1fr auto;gap:6px 24px;padding:22px 0;text-decoration:none;align-items:start}
.rows .meta{grid-column:1;font-size:13px;font-weight:500}
.rows .t{grid-column:1;font-size:clamp(20px,1.8vw,26px);font-weight:600;line-height:1.1}
.rows .d{grid-column:1;font-size:15px;color:var(--ink-2);max-width:44em}
.rows .ar{grid-column:2;grid-row:1/span 3;align-self:center;font-size:22px}
.black .rows{border-color:#fff}.black .rows>li{border-color:rgba(255,255,255,.3)}.black .rows .d{color:#c9c9c9}
@media (min-width:900px){.rows.wide .r{grid-template-columns:minmax(220px,30vw) 1fr auto}.rows.wide .t{grid-column:1;grid-row:1/span 2}.rows.wide .meta,.rows.wide .d{grid-column:2}.rows.wide .ar{grid-column:3}}
.rows .n{font-size:13px;font-weight:500;color:var(--ink-2)}

/* accordion (services: 120 px round button) */
.acc{border-top:1px solid #000}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:12px 32px;align-items:center;padding:clamp(18px,2vw,28px) 0}
.acc summary::-webkit-details-marker{display:none}
.acc summary .n{display:none}
.acc summary h3{font-size:clamp(28px,3vw,44px);font-weight:500;line-height:1.05}
.acc summary .sub{display:block;font-size:14px;color:var(--ink-2);margin-top:8px;max-width:40em}
.acc summary:hover h3{color:var(--accent)}
.rb{width:56px;height:56px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;flex:none;transition:transform .3s,background .2s,color .2s}
.rb::before{content:"";width:28%;height:28%;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-20%) rotate(45deg)}
details[open]>summary .rb{transform:rotate(180deg)}
summary:hover .rb{color:var(--accent)}
.acc.big summary{grid-template-columns:1fr auto}
.acc.big summary h3{font-size:clamp(44px,8.9vw,128px);line-height:1.15}
.acc.big .rb{width:clamp(64px,8.3vw,120px);height:clamp(64px,8.3vw,120px)}
@media (min-width:1024px){.acc.big summary{grid-template-columns:auto 1fr auto}.acc.big summary .sub{grid-column:2;grid-row:1;max-width:24em;font-size:16px;color:#000;margin:0;justify-self:end}}
.acc details::details-content{block-size:0;overflow:hidden;transition:block-size .5s ease,content-visibility .5s allow-discrete}
.acc details[open]::details-content{block-size:auto}
.acc .body{max-width:none;display:grid;gap:28px 48px;padding:8px 0 48px}
@media (min-width:900px){.acc .body{grid-template-columns:repeat(3,1fr)}}
.acc .body h4{margin-bottom:8px}
.acc .body h4~h4{margin-top:24px}
.acc .body p,.acc .body li{font-size:16px}
.acc .body ul{margin:0;padding:0 0 0 18px}
.acc .body li+li{margin-top:4px}
.acc .body .actions{margin-top:20px}

/* chips, tags, small grids */
.chips{display:flex;flex-wrap:wrap;gap:6px 22px}
.chip{font-size:15px;text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.chip.quiet{text-decoration:none;color:var(--ink-2)}
.tag{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-top:14px}
.actions{display:flex;flex-wrap:wrap;gap:8px 28px;align-items:center;margin-top:28px}
.mini-grid,.lifecycle,.cities{display:grid;gap:0 40px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));border-top:1px solid #000}
.mini-grid>div,.lifecycle>div,.cities>div{padding:24px 0 28px;border-bottom:1px solid var(--line)}
.mini-grid h3,.cities h3{margin-bottom:10px}
.mini-grid p,.lifecycle p,.cities p{font-size:15px}
.lifecycle b{display:block;font-size:clamp(28px,2.6vw,40px);font-weight:500;line-height:1;margin-bottom:10px}
.lifecycle ul{margin:14px 0 0;padding:0 0 0 18px;font-size:15px}
.cities b{display:block;font-size:clamp(48px,5vw,80px);font-weight:500;line-height:.95;letter-spacing:-.05em;margin-bottom:12px}
.black .mini-grid,.black .cities{border-color:#fff}.black .cities>div{border-color:rgba(255,255,255,.3)}
.source{font-size:12px;color:#b5b5b5;margin-top:32px}
.filters{display:flex;flex-wrap:wrap;gap:4px 22px}
.filters button{background:none;border:0;cursor:pointer;font-size:14px;padding:10px 0;color:var(--ink-2)}
.filters button[aria-pressed="true"]{color:#000;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.filters button:hover{color:var(--accent)}
.table-wrap{overflow-x:auto;border-top:1px solid #000;margin-top:24px}
table.data{width:100%;border-collapse:collapse;font-size:15px;min-width:720px}
table.data th{text-align:left;font-size:13px;font-weight:500;padding:16px 16px 12px 0;border-bottom:1px solid var(--line);white-space:nowrap}
table.data td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
table.data td:first-child{color:#000;white-space:nowrap}
table.data td b{color:#000;font-weight:600}
.lines{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid #000}
.lines li{display:grid;grid-template-columns:48px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}
.lines .n{font-size:13px;font-weight:500;color:var(--ink-2);padding-top:2px}
.callout{margin-top:32px;padding-left:18px;border-left:2px solid #000;max-width:36em;font-size:16px}

/* buttons: low-key links; filled only for form submits */
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0;background:none;border:0;cursor:pointer;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.btn:hover{color:var(--accent)}
form .btn,.opt-go{min-height:52px;padding:0 30px;background:#000;color:#fff;text-decoration:none;font-size:15px;font-weight:600;transition:background .15s}
form .btn:hover{background:var(--accent);color:#fff}
form .btn:disabled{opacity:.5;cursor:wait}
.textbtn{background:none;border:0;cursor:pointer;font-size:14px;font-weight:600;padding:12px 0;min-height:44px;color:var(--ink-2);text-decoration:underline;text-underline-offset:4px}
.textbtn:hover{color:var(--accent)}

/* forms */