/* Header glass, client band, Portland topography, cinematic motion base */
/* ===== Liquid glass header (always; compacts after scrolling) ===== */
header{padding-top:27px;padding-bottom:17px;box-shadow:none}
header::before{transition:inset .45s var(--ease-out),border-radius .45s var(--ease-out),background .35s ease,box-shadow .35s ease,border-color .35s ease;border:1px solid transparent}
header::after{content:'';position:absolute;z-index:-1;pointer-events:none;inset:0;border-radius:0;opacity:0;
  background:linear-gradient(112deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 68%,rgba(255,255,255,.22) 100%);
  transition:inset .45s var(--ease-out),border-radius .45s var(--ease-out),opacity .35s ease}
header.scrolled{padding-top:21px;padding-bottom:11px;box-shadow:none}
header::before,header::after{inset:9px max(12px,calc(var(--pad) - 26px)) 0;border-radius:22px}
header::before{
  background:linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(248,246,239,.34) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(1.9) brightness(1.06);backdrop-filter:blur(22px) saturate(1.9) brightness(1.06);
  border-color:rgba(255,255,255,.62);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.3),inset 0 0 22px rgba(255,255,255,.22),
    0 12px 32px -10px rgba(5,20,0,.38),0 2px 6px rgba(5,20,0,.12)}
header::after{opacity:.75}
/* dark glass over dark sections */
header.on-dark::before{
  background:linear-gradient(180deg,rgba(58,72,50,.5) 0%,rgba(8,20,4,.38) 100%);
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 1px rgba(255,255,255,.08),inset 0 0 22px rgba(255,255,255,.06),
    0 12px 32px -10px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.25)}
header.on-dark::after{opacity:.35}
header .wordmark,header .brand-sub{transition:color .3s ease}
header .brand-divider{transition:background .3s ease}
header .brand-icon{transition:filter .3s ease}
header.on-dark .wordmark,header.on-dark .brand-sub{color:var(--paper)}
header.on-dark .brand-divider{background:var(--paper)}
header.on-dark .brand-icon{filter:brightness(0) invert(.94)}
header.on-dark .menu-toggle span{background:var(--paper)}
@media (min-width:1081px){
  header.on-dark nav.links a.navlink{color:var(--paper)}
  header.on-dark nav.links a.navlink:hover,header.on-dark nav.links a.navlink:focus-visible{color:var(--silver)}
  header .btn.desktop-only{transition:background .3s ease,color .3s ease,transform .16s var(--ease-out),box-shadow .25s ease}
  header .btn.desktop-only{border-radius:12px}
  header.on-dark .btn.desktop-only{background:var(--paper);color:var(--green)}
}
@media (prefers-reduced-transparency:reduce){
  header::before{background:var(--paper);-webkit-backdrop-filter:none;backdrop-filter:none}
  header.on-dark::before{background:#10200b}
  header::after{opacity:0}
}
@media (prefers-reduced-motion:reduce){header::before,header::after{transition:none}}

/* ===== Clients: dark band; logos in original colours (dark marks use their white versions) ===== */
.clients{padding:clamp(36px,5vw,56px) 0}
.logo-marquee{height:auto;padding:6px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%)}
.logo-track{gap:clamp(40px,5vw,72px);animation-duration:78s}
.logo-tile{--lh:44px;height:calc(var(--lh) * var(--s,1));cursor:default}
.logo-tile img{height:100%;width:auto;object-fit:contain;filter:none}
@media (max-width:760px){.logo-tile{--lh:32px}.logo-track{gap:34px;animation-duration:62s}.logo-marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}}
/* ===== Portland topography ===== */
.portland{padding:0;background:var(--green);color:var(--paper);position:relative}
.topo-track{height:150vh;position:relative}
.topo-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--topo-low:#4a9e5c;--topo-line:#F8F6EF;--topo-bg:#072304;--topo-p:0;
  background:radial-gradient(120% 90% at 70% 40%,#0a2a05 0%,var(--green) 70%)}
.topo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.topo-scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 56% at 14% 80%,rgba(5,31,0,.84) 0%,rgba(5,31,0,.72) 38%,rgba(5,31,0,.34) 64%,rgba(5,31,0,0) 84%),linear-gradient(0deg,var(--green) 0%,rgba(5,31,0,0) 10%),linear-gradient(180deg,rgba(5,31,0,.85) 0%,rgba(5,31,0,0) 9%),linear-gradient(90deg,rgba(5,31,0,.75) 0%,rgba(5,31,0,0) 6%),linear-gradient(270deg,rgba(5,31,0,.75) 0%,rgba(5,31,0,0) 6%)}@media (max-width:760px){.topo-scrim{background:radial-gradient(ellipse 120% 46% at 30% 84%,rgba(5,31,0,.86) 0%,rgba(5,31,0,.7) 45%,rgba(5,31,0,0) 85%),linear-gradient(0deg,var(--green) 0%,rgba(5,31,0,0) 9%),linear-gradient(180deg,rgba(5,31,0,.85) 0%,rgba(5,31,0,0) 8%),linear-gradient(90deg,rgba(5,31,0,.7) 0%,rgba(5,31,0,0) 8%),linear-gradient(270deg,rgba(5,31,0,.7) 0%,rgba(5,31,0,0) 8%)}}
.topo-copy{transition:none;position:absolute;left:var(--pad);bottom:clamp(40px,8vh,96px);max-width:min(560px,calc(100% - 2 * var(--pad)));z-index:2}
.topo-copy .eyebrow{display:block;margin-bottom:14px}
.topo-copy h2{font-size:clamp(40px,7vw,96px);color:var(--paper);margin-bottom:18px}
.topo-copy p{font-size:16px;color:var(--smoke);max-width:46ch}
.topo-scrollhint{position:absolute;right:var(--pad);bottom:clamp(40px,8vh,96px);z-index:2;display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);opacity:calc(1 - var(--topo-p) * 5)}
.topo-scrollhint span{width:1px;height:28px;background:linear-gradient(var(--silver),transparent);animation:topo-hint 1.8s var(--ease-in-out) infinite}
@keyframes topo-hint{0%{transform:scaleY(0);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}50.01%{transform-origin:0 100%}100%{transform:scaleY(0);transform-origin:0 100%}}
body.motion-paused .topo-scrollhint span{animation-play-state:paused}
@media (max-width:760px){.topo-track{height:150vh}.topo-scrollhint{display:none}.topo-copy p{font-size:15px}}
@media (prefers-reduced-motion:reduce){.topo-copy{opacity:1 !important}.topo-track{height:auto}.topo-stage{position:relative;height:clamp(480px,85vh,820px)}.topo-scrollhint{display:none}}
/* ===== cinematic motion ===== */
.hero h1.split{opacity:1;animation:none}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .w>span{display:inline-block;transform:translateY(110%);animation:word-up .95s var(--ease-out) forwards;animation-delay:calc(.12s + var(--i) * 60ms)}
@keyframes word-up{to{transform:translateY(0)}}
.wipe{clip-path:inset(-20% 100% -20% 0);transition:clip-path 1.1s var(--ease-in-out) .1s}
.wipe.in{clip-path:inset(-20% -4% -20% 0)}
.v-card .frame{clip-path:inset(-60px round 2px);transition:box-shadow .3s ease,clip-path 1.1s var(--ease-in-out)}
.v-card.reveal:not(.in) .frame{clip-path:inset(9% 7% round 2px)}
.v-card.reveal:not(.in) .frame video{transform:scale(1.14)}
.about .frame.reveal{clip-path:inset(0 0 0 0);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),clip-path 1.3s var(--ease-in-out)}
.about .frame.reveal:not(.in){clip-path:inset(100% 0 0 0)}
.about-portrait{transform:scale(1.12)}
.stage-fade{opacity:0;transition:opacity 1.4s ease .15s}
.stage-fade.in{opacity:1}
.hero-video{inset:auto;top:-12%;left:0;width:100%;height:112%}
body.motion-paused .pin-pulse,body.motion-paused .pdx-water path{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  .hero h1 .w>span{transform:none !important}
  .wipe,.v-card .frame,.about .frame{clip-path:none !important}
  .stage-fade{opacity:1 !important}
  .pdx-art [pathLength]{stroke-dashoffset:0 !important;transition:none !important}
  .pdx-art .map-label,.pdx-art .map-pin-label,.pdx-art .map-water,.pdx-art .map-river,.pdx-art .pdx-water path{opacity:1 !important;transition:none !important}
  .pdx-art .pin-dot{transform:none !important;transition:none !important}
  .about-portrait{transform:none !important}
}