:root {
  --bg: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #f8f7f3;
  --sand: #eee9df;
  --ink: #081523;
  --line: rgba(11, 24, 39, 0.08);
  --text: #0f1a25;
  --muted: #5b6775;
  --blue: #1766ff;
  --cyan: #67e3ff;
  --grad: linear-gradient(135deg, #1766ff 0%, #2e9fff 58%, #67e3ff 100%);
  --shadow: 0 24px 80px rgba(7, 18, 31, 0.10);
  --container: min(1240px, calc(100vw - 56px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Inter",Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%}button,input,select,textarea{font:inherit}
.skip-link{position:absolute;left:16px;top:-42px;padding:10px 14px;background:#fff;border-radius:12px;z-index:120}.skip-link:focus{top:16px}
.container{width:var(--container);margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;padding:18px 0;background:linear-gradient(180deg, rgba(244,242,238,.94), rgba(244,242,238,.72) 72%, rgba(244,242,238,0));backdrop-filter:blur(12px)}
.site-header.is-scrolled{padding:10px 0}.header-shell{width:calc(100vw - 64px);max-width:none;margin:0 auto;display:grid;grid-template-columns:auto 1fr auto auto;gap:22px;align-items:center;min-height:82px;padding:12px 18px 12px 22px;border-radius:28px;background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 40px rgba(7,18,31,.06)}
.brand{display:inline-flex;align-items:center}.brand img{height:48px;width:auto;object-fit:contain}
.desktop-nav{display:flex;justify-content:center;gap:34px;font-size:15px;color:var(--muted)}
.desktop-nav a,.mobile-menu a,.footer-links a{position:relative;transition:color .24s ease}.desktop-nav a[aria-current="page"],.mobile-menu a[aria-current="page"],.desktop-nav a:hover,.mobile-menu a:hover,.footer-links a:hover{color:var(--text)}.desktop-nav a[aria-current="page"]::after,.desktop-nav a:hover::after{content:"";position:absolute;left:50%;bottom:-9px;width:6px;height:6px;border-radius:50%;background:var(--blue);transform:translateX(-50%)}
.header-cta,.button,.hero-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:16px;font-weight:600;white-space:nowrap;transition:transform .24s ease, box-shadow .24s ease, background .24s ease,color .24s ease}
.header-cta{min-height:54px;padding:0 18px;background:linear-gradient(135deg,#08192d,#14385b);color:#fff}.header-cta:hover,.button:hover,.hero-pill:hover{transform:translateY(-1px)}
.menu-toggle{display:none;appearance:none;border:0;background:transparent;width:48px;height:48px;padding:0;cursor:pointer}.menu-toggle span{display:block;width:22px;height:2px;margin:5px auto;background:var(--text);transition:transform .24s ease,opacity .24s ease}
.mobile-menu{display:none}
.hero{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden}.hero-home{background:#d6dde6}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg, rgba(244,242,238,.95) 0%, rgba(244,242,238,.78) 28%, rgba(9,24,39,.10) 56%, rgba(9,24,39,.52) 100%),linear-gradient(180deg, rgba(9,24,39,0) 0%, rgba(9,24,39,.24) 100%)}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:42px;align-items:end;padding:110px 0 72px}.hero-copy{max-width:610px}
.eyebrow{margin:0 0 18px;font-size:12px;line-height:1;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#44607e}.eyebrow-cyan{color:#8ddfff}
h1,h2,h3{margin:0;font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:-.04em;font-weight:600;line-height:.96}h1{font-size:clamp(4rem,8vw,6.9rem);max-width:8ch}h2{font-size:clamp(2.55rem,4.6vw,4.2rem);max-width:12ch}
.hero-lede,.intro-copy,.section-head p,.story-copy,.subhero-grid p,.discipline-copy p,.project-caption p,.contact-note,.form-actions p,.process-card span{font-size:17px;line-height:1.75;color:var(--muted)}.hero-lede{max-width:34ch;color:#243241;margin:26px 0 0}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.button{min-height:56px;padding:0 22px;border:1px solid transparent}.button-primary{background:var(--grad);color:#fff;box-shadow:0 16px 30px rgba(23,102,255,.18)}.button-secondary{background:rgba(255,255,255,.72);border-color:rgba(9,24,39,.1);color:var(--text)}
.hero-aside{display:flex;flex-direction:column;gap:12px;align-items:flex-end;padding-bottom:10px}.hero-pill{padding:12px 16px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);color:#fff;font-size:12px;letter-spacing:.16em;text-transform:uppercase;min-width:116px}.hero-pill:hover{background:rgba(255,255,255,.18)}
.section{position:relative;padding:92px 0}.section-light{background:var(--surface)}.section-sand{background:#eee9df}.section-dark{background:linear-gradient(180deg,#061322 0%,#0a1626 100%);color:#fff}.section-ink{background:linear-gradient(180deg,#081523 0%, #0b1b2e 100%);color:#fff}
.subhero{padding:118px 0 78px}.subhero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(360px,.95fr);gap:44px;align-items:center}.subhero-grid h1{font-size:clamp(3rem,4.8vw,4.8rem);max-width:10ch}.subhero-grid p{margin:18px 0 0;color:rgba(255,255,255,.76)}
.subhero-visual{position:relative;overflow:hidden;border-radius:30px;min-height:360px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}.subhero-visual img{width:100%;height:100%;object-fit:cover}.subhero-visual figcaption{position:absolute;left:18px;bottom:16px;padding:10px 14px;border-radius:999px;background:rgba(8,21,35,.72);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:11px;letter-spacing:.15em;text-transform:uppercase}.subhero-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:18px}.subhero-mosaic .subhero-visual{min-height:320px}
.intro-grid,.story-grid,.contact-layout,.split-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:48px;align-items:start}.intro-copy .lead,.story-copy .lead{font-size:20px;color:var(--text);line-height:1.7}
.text-link{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:15px;font-weight:600;color:var(--text)}.text-link::after{content:"→"}.text-link-light{color:#fff}
.stats,.timeline,.principle-grid,.journey,.capability-columns,.approach-journey{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:42px}.stats article,.timeline article,.principle-grid article,.capability-columns article,.journey article,.approach-journey article,.image-balance-card,.image-balance-copy{padding:26px 24px;border:1px solid rgba(11,24,39,.08);border-radius:20px;background:rgba(255,255,255,.84);box-shadow:0 8px 24px rgba(9,24,39,.04)}.stats strong,.timeline strong{display:block;font-size:32px;font-family:"Cormorant Garamond",Georgia,serif;color:var(--text)}.stats span,.timeline p{display:block;margin-top:8px;color:var(--muted);line-height:1.7}
.timeline{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:38px}.section-head{display:grid;gap:18px;margin-bottom:34px}.split-head{grid-template-columns:minmax(0,1.05fr) minmax(260px,.85fr);align-items:end}
.capability-stage{display:grid;grid-template-columns:300px minmax(0,1fr) 400px;gap:0;border:1px solid rgba(255,255,255,.09);border-radius:30px;overflow:hidden;background:rgba(255,255,255,.03);box-shadow:var(--shadow)}.capability-stage-page{margin-top:8px}.discipline-nav{display:grid;background:rgba(2,10,18,.55)}
.discipline-button{appearance:none;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:transparent;color:#fff;display:grid;grid-template-columns:36px 1fr 22px;gap:14px;align-items:center;text-align:left;padding:22px 22px;cursor:pointer;transition:background .24s ease}.discipline-button:last-child{border-bottom:0}.discipline-button span{font-size:13px;color:rgba(255,255,255,.65)}.discipline-button strong{font-size:28px;line-height:.95;font-weight:600}.discipline-button i{font-style:normal;color:rgba(255,255,255,.68)}.discipline-button.is-active{background:var(--grad)}
.discipline-image-wrap{position:relative;min-height:560px;background:#1a2531}.discipline-image-wrap img{width:100%;height:100%;object-fit:cover}.discipline-image-label{position:absolute;left:22px;bottom:18px;padding:11px 14px;background:rgba(8,21,35,.72);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:999px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.discipline-copy{padding:34px 28px;color:#fff;display:flex;flex-direction:column;min-width:0}.discipline-count{display:block;margin-bottom:18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#7bcfff}.discipline-copy h3{font-size:clamp(1.95rem,2.9vw,3.15rem);line-height:.96;max-width:8.2ch;word-break:normal;overflow-wrap:normal;hyphens:none;white-space:normal}.discipline-copy p{margin:18px 0 0;color:rgba(255,255,255,.76)}.discipline-copy ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}.discipline-copy li{position:relative;padding-left:18px;color:rgba(255,255,255,.9);line-height:1.55}.discipline-copy li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.portfolio-header{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.portfolio-tools{display:flex;flex-wrap:wrap;justify-content:end;gap:14px;align-items:center}.portfolio-tools-tight{margin-bottom:28px}.portfolio-filters,.portfolio-arrows{display:flex;gap:10px;flex-wrap:wrap}.filter-button,.portfolio-arrows button{appearance:none;border:1px solid rgba(11,24,39,.08);background:rgba(255,255,255,.84);color:var(--muted);border-radius:999px;padding:12px 18px;cursor:pointer;transition:all .24s ease}.portfolio-arrows button{width:46px;height:46px;padding:0;border-radius:50%;font-size:19px;color:var(--text)}.filter-button.is-active{background:var(--ink);border-color:var(--ink);color:#fff}.section-dark .filter-button,.section-dark .portfolio-arrows button{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.82)}.section-dark .filter-button.is-active{background:#fff;color:var(--ink);border-color:#fff}
.portfolio-rail{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;cursor:grab}.portfolio-rail.is-dragging{cursor:grabbing}.portfolio-track{display:flex;gap:20px;will-change:transform;transition:transform .5s cubic-bezier(.22,.61,.36,1);padding:0 24px}.project-slide{position:relative;flex:0 0 min(76vw,920px);aspect-ratio:1.58/1;border-radius:30px;overflow:hidden;box-shadow:var(--shadow);background:#d7d7d7}.project-slide img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}.project-slide:hover img{transform:scale(1.03)}.project-caption{position:absolute;inset:auto 0 0 0;padding:28px;background:linear-gradient(180deg, rgba(5,10,16,0) 0%, rgba(5,10,16,.78) 72%, rgba(5,10,16,.9) 100%);color:#fff}.project-caption span{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#a8dcff;margin-bottom:10px}.project-caption h3{font-size:38px;line-height:.97;max-width:12ch}.project-caption p{margin:8px 0 0;color:rgba(255,255,255,.8)}
.journey{grid-template-columns:repeat(4,minmax(0,1fr))}.journey article:nth-child(even){transform:translateY(16px)}.journey article h3,.approach-journey article h3,.principle-grid h3,.capability-columns h3,.image-balance-copy h2,.process-copy h2,.cta-panel h2,.approach-banner h3{font-size:34px;line-height:.98}.journey article span,.approach-journey article span{display:inline-flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#568ad0;margin-bottom:18px}.journey article p,.approach-journey article p,.principle-grid p,.capability-columns p,.image-balance-copy p{margin:12px 0 0;color:var(--muted);line-height:1.75}
.approach-banner,.cta-panel,.process-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.88fr);gap:34px;align-items:center;padding:34px;border-radius:28px;background:#fff;border:1px solid rgba(11,24,39,.08);box-shadow:0 18px 50px rgba(9,24,39,.06);margin-top:28px}.section-ink .cta-panel,.section-dark .process-feature{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);box-shadow:none;color:#fff}.section-ink .cta-panel p,.section-dark .process-feature p,.section-dark .feature-list-light li{color:rgba(255,255,255,.76)}.section-ink .cta-panel h2,.section-dark .process-feature h2,.section-ink .cta-panel h3{color:#fff}
.principle-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.capability-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.approach-journey{grid-template-columns:repeat(2,minmax(0,1fr))}.process-feature{grid-template-columns:minmax(0,1fr) 340px}.process-visual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.process-card{padding:24px;border-radius:22px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);min-height:138px;display:flex;flex-direction:column;justify-content:space-between}.process-card strong{display:inline-flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9fe2ff;margin-bottom:14px}
.feature-list{margin:0;padding:0;list-style:none;display:grid;gap:14px}.feature-list li{position:relative;padding-left:22px;line-height:1.75;color:var(--muted)}.feature-list li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:8px;border-radius:50%;background:var(--blue)}.feature-list-light li::before{background:var(--cyan)}
.contact-panel{padding:32px;border-radius:26px;background:#fff;border:1px solid rgba(11,24,39,.08);box-shadow:0 14px 40px rgba(9,24,39,.05)}.contact-note{margin-top:18px;padding:18px;border-radius:18px;background:#f8f7f3;border:1px solid rgba(11,24,39,.08)}.contact-form{padding:30px;border-radius:28px;background:#fff;border:1px solid rgba(11,24,39,.08);box-shadow:0 18px 50px rgba(9,24,39,.06)}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.contact-form label{display:grid;gap:8px;margin-bottom:16px;color:var(--text);font-weight:600}.contact-form label span{font-size:14px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #d8dee5;border-radius:14px;padding:14px 16px;background:#fff;color:var(--text)}.contact-form textarea{resize:vertical;min-height:190px}.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:2px solid rgba(23,102,255,.18);border-color:#7eaefc}.form-actions{display:flex;justify-content:space-between;gap:18px;align-items:center;flex-wrap:wrap;margin-top:8px}.form-actions p{margin:0;font-size:14px}.form-status{display:none;margin-top:16px;padding:14px 16px;border-radius:14px;background:#eef5ff;color:#11376d;line-height:1.6}.form-status.is-visible{display:block}.form-status.is-error{background:#fff0f0;color:#892b2b}.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.image-balance-grid{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr);gap:28px;align-items:center}.image-balance-card{padding:0;overflow:hidden}.image-balance-card img{width:100%;height:100%;object-fit:cover;min-height:360px}.image-balance-card figcaption{padding:14px 18px;color:var(--muted);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.site-footer{padding:0 0 34px;background:var(--bg)}.footer-shell{width:var(--container);margin:0 auto;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding-top:10px;color:#718092;font-size:14px}.footer-brand{font-weight:700;color:var(--text)}.footer-links{display:flex;justify-content:center;gap:24px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease}.reveal.in-view{opacity:1;transform:none}
@media (max-width:1180px){.capability-stage{grid-template-columns:280px minmax(0,1fr) 370px}.project-slide{flex-basis:min(82vw,800px)}.subhero-grid{grid-template-columns:minmax(0,.95fr) minmax(320px,.95fr)}}
@media (max-width:980px){:root{--container:min(100vw - 32px, 1240px)}.header-shell{width:calc(100vw - 32px);grid-template-columns:auto 1fr auto;gap:16px}.desktop-nav{display:none}.menu-toggle{display:block;justify-self:end}.header-cta{display:none}.mobile-menu{position:absolute;left:16px;right:16px;top:calc(100% + 10px);display:grid;gap:8px;padding:14px;background:rgba(255,255,255,.96);border-radius:20px;box-shadow:0 18px 46px rgba(7,18,31,.08);opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .24s ease, transform .24s ease}body.menu-open .mobile-menu{opacity:1;pointer-events:auto;transform:translateY(0)}.hero-grid,.subhero-grid,.intro-grid,.story-grid,.contact-layout,.split-head,.process-feature,.approach-banner,.cta-panel,.footer-shell,.image-balance-grid{grid-template-columns:1fr}.hero{min-height:80vh}.hero-grid{padding:94px 0 52px;align-items:end}.hero-aside{flex-direction:row;align-items:flex-start;justify-content:flex-start;flex-wrap:wrap}.stats,.timeline,.journey,.principle-grid,.capability-columns,.approach-journey{grid-template-columns:1fr 1fr}.capability-stage{grid-template-columns:1fr}.discipline-image-wrap{min-height:360px;order:2}.discipline-copy{order:3}.portfolio-header{flex-direction:column;align-items:stretch}.portfolio-tools{justify-content:space-between}.subhero-mosaic{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.site-header{padding:10px 0}.header-shell{min-height:74px;padding:10px 14px}.brand img{height:38px}h1{font-size:clamp(3.1rem,15vw,4.6rem)}h2{font-size:clamp(2.15rem,11vw,3.35rem)}.hero-scrim{background:linear-gradient(180deg, rgba(244,242,238,.93) 0%, rgba(244,242,238,.76) 28%, rgba(9,24,39,.2) 68%, rgba(9,24,39,.64) 100%)}.hero-grid{gap:30px;padding-top:82px}.section,.subhero{padding:68px 0}.stats,.timeline,.journey,.principle-grid,.capability-columns,.approach-journey,.field-grid,.process-visual,.subhero-mosaic{grid-template-columns:1fr}.project-slide{flex-basis:calc(100vw - 28px);aspect-ratio:1.18/1}.project-caption h3{font-size:31px}.portfolio-arrows{display:none}.discipline-button strong{font-size:24px}.discipline-copy h3{font-size:clamp(1.9rem,8vw,2.8rem);max-width:100%}.discipline-copy{padding:28px 22px}.journey article:nth-child(even){transform:none}.contact-form,.contact-panel{padding:22px}.footer-links{flex-wrap:wrap;justify-content:flex-start}.footer-shell{padding-top:18px}.subhero-visual{min-height:280px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}


/* ========================= V5 PRODUCTION OVERRIDES ========================= */
/* Header is part of the hero instead of a separate white card. */
.site-header{
  position:absolute;
  top:0;left:0;right:0;
  padding:0;
  background:linear-gradient(180deg,rgba(246,246,243,.84) 0%,rgba(246,246,243,.62) 62%,rgba(246,246,243,.18) 100%);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.36);
}
.site-header.is-scrolled{padding:0}
.header-shell{
  width:100%;
  min-height:104px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  padding:18px clamp(28px,4vw,72px);
}
.hero{padding-top:0}
.hero-grid{grid-template-columns:minmax(0,1fr);padding-top:170px}
.desktop-nav{gap:32px}
.header-cta{min-height:50px}

/* Integrated capability: remove unnecessary breathing room while preserving hierarchy. */
.capability-section{padding-top:66px;padding-bottom:74px}
.capability-head{grid-template-columns:minmax(0,1fr) minmax(320px,.78fr);gap:44px;margin-bottom:24px;align-items:end}
.capability-head h2{max-width:10.5ch}
.capability-head > p{max-width:460px;margin:0 0 4px}
.capability-stage{grid-template-columns:300px minmax(0,1fr) 420px}
.discipline-copy h3{font-size:clamp(1.9rem,2.7vw,3rem);max-width:10ch;word-break:normal;overflow-wrap:normal;hyphens:none}
.capability-page-stage{padding-top:58px}

/* Contact hero imagery blends into the scene instead of sitting in a card. */
.contact-hero-visual{
  position:relative;
  min-height:470px;
  margin-right:calc((100vw - var(--container))/ -2);
  overflow:hidden;
  align-self:stretch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.72) 12%,#000 32%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.72) 12%,#000 32%,#000 100%);
}
.contact-hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,21,35,.08),rgba(8,21,35,.16))}
.contact-hero-visual img{width:100%;height:100%;min-height:470px;object-fit:cover}

/* Portfolio hero is an edge-to-edge art composition, not a pair of cards. */
.subhero-portfolio{overflow:hidden}
.portfolio-hero-art{
  position:relative;
  min-height:430px;
  margin-right:calc((100vw - var(--container))/ -2);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);
}
.portfolio-hero-art img{position:absolute;object-fit:cover}
.portfolio-hero-main{inset:0 0 0 10%;width:90%;height:100%}
.portfolio-hero-secondary{right:0;bottom:0;width:36%;height:50%;border-left:8px solid rgba(8,21,35,.5);border-top:8px solid rgba(8,21,35,.5)}

/* Portfolio carousel runs continuously across the viewport with no large side gap. */
.section-portfolio-home{overflow:hidden}
.portfolio-rail{width:100vw;margin-left:calc(50% - 50vw);padding:0;overflow:hidden}
.portfolio-track{gap:16px;padding:0;align-items:stretch}
.project-slide{flex:0 0 min(67vw,840px);border-radius:0;box-shadow:none}
.project-slide:first-child{margin-left:0}
.project-caption{padding:26px 30px}
.project-slide img{object-fit:cover}
.image-balance-card.image-balance-blend{border:0;border-radius:0;box-shadow:none;background:transparent;padding:0;overflow:visible;position:relative}
.image-balance-card.image-balance-blend::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.04))}
.image-balance-card.image-balance-blend img{border-radius:0;min-height:410px;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,#000 76%,transparent 100%);mask-image:linear-gradient(90deg,#000 76%,transparent 100%)}

/* Internal-page top nav remains legible while visually merged with the dark hero. */
.subhero{padding-top:154px}

@media (max-width:1180px){
  .capability-stage{grid-template-columns:280px minmax(0,1fr) 370px}
  .project-slide{flex-basis:min(76vw,760px)}
}
@media (max-width:980px){
  .site-header{background:linear-gradient(180deg,rgba(246,246,243,.92),rgba(246,246,243,.76) 75%,rgba(246,246,243,.28))}
  .header-shell{width:100%;padding:12px 20px;min-height:82px}
  .hero-grid{padding-top:132px}
  .capability-head{grid-template-columns:1fr;gap:18px;margin-bottom:22px}
  .capability-head > p{max-width:650px}
  .contact-hero-visual,.portfolio-hero-art{margin-right:calc((100vw - var(--container))/ -2);margin-left:0;min-height:360px}
  .contact-hero-visual img{min-height:360px}
  .project-slide{flex-basis:82vw}
  .subhero{padding-top:126px}
}
@media (max-width:720px){
  .site-header{position:absolute}
  .header-shell{padding:10px 16px;min-height:76px}
  .hero-grid{padding-top:118px}
  .capability-section{padding-top:52px;padding-bottom:56px}
  .capability-head{margin-bottom:18px}
  .discipline-copy h3{max-width:100%}
  .contact-hero-visual,.portfolio-hero-art{width:100vw;margin-left:calc((100vw - var(--container))/ -2);margin-right:0;min-height:300px;-webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
  .contact-hero-visual img{min-height:300px}
  .portfolio-hero-main{inset:0;width:100%;height:100%}
  .portfolio-hero-secondary{display:none}
  .project-slide{flex-basis:92vw;aspect-ratio:1.1/1}
  .portfolio-track{gap:10px}
  .project-caption{padding:22px}
  .image-balance-card.image-balance-blend img{min-height:280px;-webkit-mask-image:none;mask-image:none}
  .subhero{padding-top:116px}
}


/* ========================= V6 REFINEMENTS ========================= */
/* Remove the thin white divider and let the header blend directly into the hero. */
.site-header{
  border-bottom:0 !important;
  background:linear-gradient(180deg, rgba(246,246,243,.82) 0%, rgba(246,246,243,.58) 58%, rgba(246,246,243,.12) 100%);
}
.site-header::after{content:none !important;display:none !important}
.header-shell{box-shadow:none !important}

/* Tighten the Integrated Capability intro so it feels balanced, not empty. */
.capability-section{padding-top:58px;padding-bottom:68px}
.capability-head{
  max-width:1120px;
  margin:0 auto 18px;
  grid-template-columns:minmax(0,.88fr) minmax(290px,.62fr);
  gap:18px 28px;
  align-items:end;
}
.capability-head > p{
  max-width:34ch;
  margin:0;
  justify-self:start;
}
.capability-stage,
.capability-stage-page{max-width:1120px;margin-left:auto;margin-right:auto}

/* Use the blended Contact-page visual language on Capabilities / Portfolio / Approach page heroes. */
.page-capabilities .subhero,
.page-approach .subhero,
.page-portfolio .subhero,
.page-contact .subhero{overflow:hidden}
.page-capabilities .subhero-grid,
.page-approach .subhero-grid,
.page-portfolio .subhero-grid{
  grid-template-columns:minmax(0,.88fr) minmax(420px,1fr);
  gap:40px;
  align-items:center;
}
.page-capabilities .subhero-visual,
.page-approach .subhero-visual{
  position:relative;
  min-height:410px;
  margin-right:calc((100vw - var(--container))/ -2);
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 13%, #000 32%, #000 100%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 13%, #000 32%, #000 100%);
}
.page-capabilities .subhero-visual img,
.page-approach .subhero-visual img{width:100%;height:100%;object-fit:cover}
.page-capabilities .subhero-visual::after,
.page-approach .subhero-visual::after,
.portfolio-hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(8,21,35,.18) 0%, rgba(8,21,35,.08) 38%, rgba(8,21,35,.02) 100%);
  pointer-events:none;
}
.portfolio-hero-art{min-height:420px}
.portfolio-hero-main{inset:0 0 0 12%;width:88%}
.portfolio-hero-secondary{border-left:0;border-top:0;box-shadow:none;opacity:.92}

/* Footer icon at left instead of repeating the full corporation name. */
.footer-brand{display:inline-flex;align-items:center;color:inherit}
.footer-brand img{width:34px;height:34px;display:block}

@media (max-width:980px){
  .capability-head{grid-template-columns:1fr;gap:12px;max-width:none}
  .capability-head > p{max-width:52ch}
  .capability-stage,.capability-stage-page{max-width:none}
  .page-capabilities .subhero-grid,
  .page-approach .subhero-grid,
  .page-portfolio .subhero-grid{grid-template-columns:1fr;gap:22px}
  .page-capabilities .subhero-visual,
  .page-approach .subhero-visual,
  .portfolio-hero-art{margin-right:calc((100vw - var(--container))/ -2);min-height:320px}
}
@media (max-width:720px){
  .site-header{background:linear-gradient(180deg, rgba(246,246,243,.9) 0%, rgba(246,246,243,.58) 72%, rgba(246,246,243,.08) 100%)}
  .capability-section{padding-top:48px;padding-bottom:54px}
  .page-capabilities .subhero-visual,
  .page-approach .subhero-visual,
  .portfolio-hero-art{
    min-height:280px;
    -webkit-mask-image:linear-gradient(180deg,#000 78%, transparent 100%);
    mask-image:linear-gradient(180deg,#000 78%, transparent 100%);
  }
}


/* ========================= V7 REFINEMENTS ========================= */
:root{--header-offset:94px}
body:not(.page-home) main{padding-top:var(--header-offset)}

/* Fixed header that stays visible immediately while scrolling. */
.site-header{
  position:fixed !important;
  top:0;left:0;right:0;
  z-index:120;
  padding:12px 0 !important;
  background:rgba(244,242,238,.92) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(8,21,35,.06);
}
.site-header.is-scrolled{padding:8px 0 !important}
.header-shell{
  width:var(--container) !important;
  max-width:var(--container) !important;
  min-height:72px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Remove the extra dead gap under the fixed header on internal pages. */
.page-capabilities .subhero,
.page-portfolio .subhero,
.page-approach .subhero,
.page-company .subhero,
.page-contact .subhero,
.page-404 .subhero{padding-top:62px !important}

/* Internal page heroes: blended, but contained and not spilling into the header/logo area. */
.page-capabilities .subhero,
.page-portfolio .subhero,
.page-approach .subhero{overflow:hidden}
.page-capabilities .subhero-grid,
.page-portfolio .subhero-grid,
.page-approach .subhero-grid{grid-template-columns:minmax(0,.84fr) minmax(420px,1fr);gap:34px;align-items:center}
.page-capabilities .subhero-visual,
.page-approach .subhero-visual,
.portfolio-hero-art{
  position:relative;
  min-height:420px;
  margin-right:calc((100vw - var(--container))/ -2);
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.page-capabilities .subhero-visual::before,
.page-approach .subhero-visual::before,
.portfolio-hero-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(6,18,32,.78) 0%, rgba(6,18,32,.34) 20%, rgba(6,18,32,0) 45%);
  pointer-events:none;
  z-index:1;
}
.page-capabilities .subhero-visual::after,
.page-approach .subhero-visual::after,
.portfolio-hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(8,21,35,.06) 0%, rgba(8,21,35,.14) 100%);
  pointer-events:none;
  z-index:1;
}
.page-capabilities .subhero-visual img,
.page-approach .subhero-visual img,
.portfolio-hero-art img{width:100%;height:100%;object-fit:cover}
.page-capabilities .subhero-visual figcaption,
.page-approach .subhero-visual figcaption{display:none !important}

/* Portfolio hero should use one clean image only, without the doubled inset image. */
.portfolio-hero-art{min-height:420px}
.portfolio-hero-main{position:absolute;inset:0 !important;width:100% !important;height:100% !important}
.portfolio-hero-secondary{display:none !important}

/* Capabilities intro spacing tightened and balanced. */
.capability-section{padding-top:48px !important;padding-bottom:64px !important}
.capability-head{max-width:1080px;gap:14px 24px;margin:0 auto 16px !important}
.capability-head > p{max-width:30ch}
.capability-stage,.capability-stage-page{max-width:1080px}

/* Portfolio note: restore a clean image, no fade distortion. */
.image-balance-card.image-balance-blend{
  border:1px solid rgba(11,24,39,.08) !important;
  border-radius:24px !important;
  box-shadow:0 10px 28px rgba(9,24,39,.06) !important;
  background:#fff !important;
  overflow:hidden !important;
}
.image-balance-card.image-balance-blend::after{display:none !important}
.image-balance-card.image-balance-blend img{
  min-height:360px;
  border-radius:24px !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  object-fit:cover;
}

/* Keep the image blend elegant but do not let the gradient eat too much of the visual. */
.contact-hero-visual,
.page-capabilities .subhero-visual,
.page-approach .subhero-visual,
.portfolio-hero-art{isolation:isolate}

@media (max-width:980px){
  :root{--header-offset:88px}
  body:not(.page-home) main{padding-top:var(--header-offset)}
  .page-capabilities .subhero-grid,
  .page-portfolio .subhero-grid,
  .page-approach .subhero-grid{grid-template-columns:1fr;gap:22px}
  .page-capabilities .subhero,
  .page-portfolio .subhero,
  .page-approach .subhero,
  .page-company .subhero,
  .page-contact .subhero,
  .page-404 .subhero{padding-top:46px !important}
  .page-capabilities .subhero-visual,
  .page-approach .subhero-visual,
  .portfolio-hero-art{margin-right:calc((100vw - var(--container))/ -2);min-height:320px}
}
@media (max-width:720px){
  :root{--header-offset:76px}
  body:not(.page-home) main{padding-top:var(--header-offset)}
  .site-header{padding:8px 0 !important}
  .header-shell{min-height:60px !important}
  .page-capabilities .subhero,
  .page-portfolio .subhero,
  .page-approach .subhero,
  .page-company .subhero,
  .page-contact .subhero,
  .page-404 .subhero{padding-top:34px !important}
  .page-capabilities .subhero-visual,
  .page-approach .subhero-visual,
  .portfolio-hero-art{
    min-height:280px;
    margin-right:0;
    -webkit-mask-image:none !important;
    mask-image:none !important;
  }
  .page-capabilities .subhero-visual::before,
  .page-approach .subhero-visual::before,
  .portfolio-hero-art::before{background:linear-gradient(180deg, rgba(6,18,32,.16) 0%, rgba(6,18,32,0) 55%)}
}


/* ========================= V8 FINAL REFINEMENTS ========================= */
:root{--header-height:86px}
html{scroll-padding-top:calc(var(--header-height) + 12px)}
body:not(.page-home) main{padding-top:var(--header-height) !important}

/* Fixed header visible immediately on every page and not tied to the page scroll position. */
.site-header{
  position:fixed !important;
  top:0;left:0;right:0;
  z-index:200;
  padding:0 !important;
  border:0 !important;
  background:rgba(244,242,238,.96) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(8,21,35,.05), 0 8px 28px rgba(8,21,35,.06);
}
.site-header::before,.site-header::after{content:none !important;display:none !important}
.site-header.is-scrolled{box-shadow:0 1px 0 rgba(8,21,35,.06), 0 10px 34px rgba(8,21,35,.08)}
.header-shell{
  width:var(--container) !important;
  min-height:var(--header-height) !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.page-home .hero-grid{padding-top:146px !important}
.page-home .hero{overflow:hidden}

/* Remove extra blank strip between fixed header and hero areas. */
.subhero{padding-top:54px !important}
.page-capabilities .subhero,
.page-portfolio .subhero,
.page-approach .subhero{overflow:hidden}

/* Subhero visuals: properly blended, contained, and with subtle overlay only inside image bounds. */
.page-capabilities .subhero-grid,
.page-portfolio .subhero-grid,
.page-approach .subhero-grid{
  grid-template-columns:minmax(0,.86fr) minmax(420px,1fr) !important;
  gap:32px !important;
  align-items:center !important;
}
.page-capabilities .subhero-visual,
.page-approach .subhero-visual,
.portfolio-hero-art{
  position:relative;
  min-height:410px !important;
  margin-right:calc((100vw - var(--container))/ -2);
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.page-capabilities .subhero-visual::before,
.page-approach .subhero-visual::before,
.portfolio-hero-art::before{content:none !important;display:none !important}
.page-capabilities .subhero-visual::after,
.page-approach .subhero-visual::after,
.portfolio-hero-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(8,21,35,.22) 0%, rgba(8,21,35,.08) 18%, rgba(8,21,35,0) 42%);
  pointer-events:none;
}
.page-capabilities .subhero-visual img,
.page-approach .subhero-visual img,
.portfolio-hero-art img{
  width:100%;height:100%;object-fit:cover;object-position:center center;
}
.page-capabilities .subhero-visual figcaption,
.page-approach .subhero-visual figcaption,
.portfolio-hero-art figcaption{display:none !important}

/* Use one clean image on the Portfolio hero — no doubled image effect. */
.portfolio-hero-art{min-height:410px !important}
.portfolio-hero-main{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important}
.portfolio-hero-secondary{display:none !important}

/* Capabilities intro spacing tightened to remove the large empty gap. */
.capability-section{padding-top:38px !important;padding-bottom:62px !important}
.capability-head{
  max-width:1080px !important;
  margin:0 auto 14px !important;
  grid-template-columns:minmax(0,.92fr) minmax(260px,.58fr) !important;
  gap:12px 24px !important;
  align-items:end !important;
}
.capability-head > p{max-width:28ch !important;margin:0 !important}
.capability-stage,.capability-stage-page{max-width:1080px !important}

/* Portfolio note restored with a proper clean image and no visual corruption. */
.image-balance-grid{align-items:center !important}
.image-balance-card.image-balance-blend{
  border:0 !important;
  border-radius:26px !important;
  box-shadow:0 14px 34px rgba(8,21,35,.08) !important;
  background:#fff !important;
  overflow:hidden !important;
  position:relative !important;
}
.image-balance-card.image-balance-blend::after{display:none !important}
.image-balance-card.image-balance-blend img{
  width:100%;height:100%;min-height:360px !important;
  object-fit:cover;object-position:center center;
  border-radius:26px !important;
  -webkit-mask-image:none !important;mask-image:none !important;
}

/* Warehouse portfolio cards: keep them crisp and centered. */
.project-slide[data-category="warehouse"] img{object-position:center center}
.project-slide[data-category="warehouse"]{background:#091827}
.project-slide{overflow:hidden}

/* Slightly soften internal page heading scale to keep the image breathing. */
.page-capabilities .subhero-grid h1,
.page-portfolio .subhero-grid h1,
.page-approach .subhero-grid h1{max-width:8.5ch !important}

@media (max-width:980px){
  :root{--header-height:78px}
  body:not(.page-home) main{padding-top:var(--header-height) !important}
  .page-home .hero-grid{padding-top:126px !important}
  .subhero{padding-top:42px !important}
  .page-capabilities .subhero-grid,
  .page-portfolio .subhero-grid,
  .page-approach .subhero-grid{grid-template-columns:1fr !important;gap:22px !important}
  .page-capabilities .subhero-visual,
  .page-approach .subhero-visual,
  .portfolio-hero-art{min-height:320px !important}
  .capability-head{grid-template-columns:1fr !important;gap:10px !important}
  .capability-head > p{max-width:48ch !important}
}
@media (max-width:720px){
  :root{--header-height:70px}
  .site-header{background:rgba(244,242,238,.98) !important}
  .header-shell{min-height:var(--header-height) !important}
  .page-home .hero-grid{padding-top:110px !important}
  .subhero{padding-top:30px !important}
  .page-capabilities .subhero-visual,
  .page-approach .subhero-visual,
  .portfolio-hero-art{min-height:260px !important;margin-right:0 !important}
  .page-capabilities .subhero-visual::after,
  .page-approach .subhero-visual::after,
  .portfolio-hero-art::after{background:linear-gradient(180deg, rgba(8,21,35,.12) 0%, rgba(8,21,35,0) 46%)}
  .image-balance-card.image-balance-blend img{min-height:280px !important}
}


/* ========================= V9 touch-ups ========================= */
/* Portfolio hero: use a cleaner image and blend it more like the contact section. */
.page-portfolio .portfolio-hero-art{
  min-height:430px !important;
  background:#091827 !important;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.70) 12%, #000 34%, #000 100%) !important;
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.70) 12%, #000 34%, #000 100%) !important;
}
.page-portfolio .portfolio-hero-art::after{
  background:linear-gradient(90deg, rgba(8,21,35,.18) 0%, rgba(8,21,35,.06) 16%, rgba(8,21,35,0) 42%) !important;
}
.page-portfolio .portfolio-hero-main{
  object-position:center center !important;
  filter:none !important;
}

/* Footer icon slightly larger for better balance. */
.footer-brand img{
  width:44px !important;
  height:44px !important;
}
@media (max-width:720px){
  .footer-brand img{
    width:40px !important;
    height:40px !important;
  }
  .page-portfolio .portfolio-hero-art{
    min-height:280px !important;
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.15) 0%, #000 18%, #000 100%) !important;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.15) 0%, #000 18%, #000 100%) !important;
  }
}


/* ========================= V10 touch-ups ========================= */
/* Homepage carousel: swap Canopy House to a clean, non-distorted residential hero. */
.project-slide[data-category="residential"] img{object-position:center center}

/* Footer left brand: use the full Crownsworth logo and give it more presence. */
.footer-brand img{
  width:148px !important;
  height:auto !important;
  max-width:100%;
  display:block;
}
.footer-shell{grid-template-columns:auto 1fr auto;}
@media (max-width:720px){
  .footer-brand img{
    width:128px !important;
    height:auto !important;
  }
}

/* Capabilities and Approach page heroes: add a contact-style edge blend without covering too much of the image. */
.page-capabilities .subhero-visual,
.page-approach .subhero-visual{
  background:#091827 !important;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 12%, #000 31%, #000 100%) !important;
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.72) 12%, #000 31%, #000 100%) !important;
}
.page-capabilities .subhero-visual::after,
.page-approach .subhero-visual::after{
  background:linear-gradient(90deg, rgba(8,21,35,.22) 0%, rgba(8,21,35,.08) 18%, rgba(8,21,35,0) 40%) !important;
}
@media (max-width:720px){
  .page-capabilities .subhero-visual,
  .page-approach .subhero-visual{
    -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.16) 0%, #000 20%, #000 100%) !important;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.16) 0%, #000 20%, #000 100%) !important;
  }
}