/* Page overrides for /projects/ (property-level diffs vs global.css + page-only rules, original order) */
h1,h2,h3,.display{font-family:'Saira Condensed','Saira',sans-serif;font-weight:600;line-height:1.04;letter-spacing:-.01em}
.nav-link:hover{color:var(--blue)}
.submenu-inner a:hover{background:var(--paper);color:var(--blue)}
.hero .lede{font-size:clamp(.95rem,1.55vw,1.17rem);color:var(--on-dark-body);max-width:46ch;font-weight:400;line-height:1.45}
.intro h2{font-size:clamp(1.9rem,3.5vw,2.9rem);font-weight:600;margin:.45em 0 .55em;color:var(--navy);max-width:16ch}
.intro p{color:var(--ink-muted);font-size:.95rem;margin-bottom:1.1em;max-width:54ch;line-height:1.5}
.family-figure{position:sticky;top:110px;margin-top:46px}
.values{margin-top:30px;border-top:1px solid var(--line)}
.value{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);align-items:baseline}
.gptw{display:inline-flex;align-items:center;gap:12px;margin-top:26px;font-family:'Saira',sans-serif;font-size:.86rem;letter-spacing:.04em;color:var(--navy);background:var(--paper);border:1px solid var(--line);padding:10px 16px;border-radius:3px}
.gptw b{color:var(--blue)}
@media(prefers-reduced-motion:reduce){
.btn,.unique,.ind{transition:none}
}
/* Match the sibling industry/solutions .hero size so the cover image is the same
   height everywhere (min-height grows on mobile; desktop locks to one height). */
.pagehead{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden;min-height:clamp(520px,46vw,620px);display:flex;flex-direction:column;justify-content:flex-end}
.pagehead::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg, rgba(12,52,87,.95) 0%, rgba(13,56,94,.82) 35%, rgba(14,60,101,.55) 62%, rgba(16,69,115,.18) 85%, rgba(16,69,115,.05) 100%)}
.pagehead .wrap{position:relative;z-index:2;padding-top:clamp(40px,5vw,68px);padding-bottom:clamp(48px,6vw,80px)}
.crumb{font-family:'Saira',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:6px}
.crumb a{color:var(--on-dark-muted)}
.crumb span{color:var(--blue-soft);margin:0 .5em}
.pagehead h1{font-size:clamp(2.5rem,5.4vw,4.4rem);color:#fff;margin:.35em 0 .3em;max-width:16ch}
.pagehead h1 .accent{color:var(--blue-soft)}
.pagehead .lede{color:var(--on-dark-body);font-size:clamp(.95rem,1.55vw,1.17rem);font-weight:400;max-width:52ch;margin-top:16px;line-height:1.45}
.pagehead-stats{display:flex;gap:clamp(24px,4vw,52px);margin-top:32px;flex-wrap:wrap}
.pagehead-stats div{border-left:2px solid var(--blue);padding-left:14px}
.pagehead-stats b{display:block;font-family:'Saira Condensed',sans-serif;font-weight:600;font-size:1.7rem;color:#fff;line-height:1}
.pagehead-stats span{font-family:'Saira',sans-serif;font-size:.8rem;letter-spacing:.04em;color:var(--on-dark-foot)}
/* Desktop: lock the hero to the sibling pages' height and pin the copy to the
   bottom (crumb + eyebrow at the top). Placed after the base rules so it wins. */
@media(min-width:901px){.pagehead{height:clamp(620px,56.5vw,700px);min-height:0}.pagehead .wrap{flex:1;display:flex;flex-direction:column;width:100%}.pagehead h1{margin-top:auto}.pagehead-stats{margin-top:auto}}
.projects-section{padding:clamp(56px,8vw,96px) 0;background:var(--paper)}
/* Industry filter bar */
.proj-filter{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;margin:28px 0 0;padding-bottom:26px;border-bottom:1px solid var(--line)}
/* Segmented "slider" track: a translucent pill rail with a frosted thumb that
   glides behind the active option (positioned in JS via offsetLeft/offsetWidth). */
.proj-filter-pills{position:relative;display:flex;flex-wrap:wrap;flex:1 1 auto;gap:4px;padding:5px;background:rgba(12,52,87,.05);border:1px solid rgba(12,52,87,.08);border-radius:22px}
.proj-filter-thumb{position:absolute;top:0;left:0;width:0;height:0;opacity:0;z-index:0;pointer-events:none;border-radius:999px;background:rgba(28,147,209,.16);box-shadow:0 6px 16px -8px rgba(28,147,209,.55),inset 0 0 0 1px rgba(28,147,209,.5);transition:transform .32s cubic-bezier(.4,0,.2,1),width .32s cubic-bezier(.4,0,.2,1),height .32s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.proj-filter-pills.is-measuring .proj-filter-thumb{transition:none}
.proj-filter-btn{position:relative;z-index:1;flex:1 1 auto;text-align:center;white-space:nowrap;font-family:'Saira',sans-serif;font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--navy);background:transparent;border:0;border-radius:999px;padding:.55em 1em;cursor:pointer;transition:color .2s ease}
.proj-filter-btn:hover{color:var(--blue)}
.proj-filter-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.proj-filter-btn.is-active{color:var(--blue)}
.proj-filter + .proj-grid{margin-top:26px}
.proj-card[hidden]{display:none}
@media(prefers-reduced-motion:reduce){
.proj-filter-thumb,.proj-filter-btn{transition:none}
}
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:8px}
.proj-card{display:block;background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease}
.proj-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(12,52,87,.28);border-color:var(--blue)}
/* aspect-ratio instead of a fixed short height, so a contained landscape photo has the
   vertical room to reach the full card width at rest (scale 1.0). The height is ~5%
   taller than the industry cards' 300/192 so the slightly-narrow PNG canvas fills the
   width without any side padding — no resting zoom needed. */
.proj-img{position:relative;aspect-ratio:300/202;overflow:hidden;background:var(--navy-deep)}
.proj-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(180deg,rgba(12,52,87,0) 0%,rgba(12,52,87,.55) 100%)}
.proj-icon{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
.proj-icon svg{width:46px;height:46px;opacity:.85;transition:transform .3s ease}
.proj-card:hover .proj-icon svg{transform:scale(1.08)}
.proj-tag{position:absolute;top:14px;left:14px;z-index:2;font-family:'Saira',sans-serif;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(28,147,209,.85);padding:.4em .8em;border-radius:2px}
/* Rest slightly inset (scale .95) so the hover zoom grows back to full width
   without overflowing .proj-img and cropping the photo's edges. */
.proj-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:0;transform:scale(.93);transition:transform .4s ease}
.proj-card:hover .proj-photo{transform:scale(.98)}
/* Project photos are transparent PNGs — show the light card behind them (like the
   industry-page cards) instead of the navy gradient + dark overlay, which are only
   the placeholder styling for cards that have no photo. */
.proj-img.has-photo{background:transparent}
.proj-img.has-photo::before{display:none}
.proj-img.has-photo::after{display:none}
.proj-img.has-photo .proj-icon{display:none}
.proj-body{padding:20px 22px 22px}
.proj-name{font-family:'Saira Condensed',sans-serif;font-weight:600;font-size:1.25rem;color:var(--navy);line-height:1.15}
.proj-loc{display:flex;align-items:center;gap:6px;margin-top:8px;font-family:'Saira',sans-serif;font-size:.86rem;color:var(--gray)}
.proj-loc svg{width:13px;height:13px;flex:none;color:var(--blue)}
.proj-more{display:flex;align-items:center;gap:.5em;margin-top:16px;font-family:'Saira',sans-serif;font-weight:600;font-size:.85rem;color:var(--blue)}
.proj-card:hover .proj-more .arr{transform:translateX(4px)}
.proj-more .arr{display:inline-block;transition:transform .2s ease}
@media(max-width:980px){
.proj-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.proj-grid{grid-template-columns:1fr}
}
@media(max-width:1080px){
.menu-toggle span{transition:transform .2s ease,opacity .2s ease}
}