/* Partners typography and the blue sampled from Changes.png. */
:root{--paper:#f6f6f6;--blue:#034e7c;--blue-dark:#034e7c;--line:#034e7c40;--blue-wash:#034e7c0a;--media-shade:linear-gradient(180deg,#000d 0%,#034e7c38 45%,#034e7c38 55%,#000d 100%)}
body,
body h1,body h2,body h3,body h4,body h5,body h6,body b,body strong,
body button,body input,body textarea,body select,body nav a,
body .service-choice,body .footer-word{
 font-family:"Inter Display",sans-serif;
}
/* Service labels use a compact bold face with a touch of breathing room. */
@font-face{font-family:"Inter Display";src:url('assets/inter-display-600.woff2') format('woff2');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Inter Display";src:url('assets/inter-display-700.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
body .service-choice{font-weight:700;letter-spacing:.005em}
.network,.shared-header{background:transparent;color:#fff;mix-blend-mode:difference;backdrop-filter:none;-webkit-backdrop-filter:none}
.network{border-bottom:1px solid #ffffff26}
.shared-header .brand img{filter:none}
.shared-header .menu-toggle span{background:#fff}
.shared-header nav a{color:#fff}
@media(max-width:991px){.shared-header nav{background:#101010}.shared-header:has(nav.is-open){mix-blend-mode:normal;background:#101010}}
.inquiry-page{background:var(--paper)}
.reference-hero{background:var(--paper)}
.reference-heading{background-image:repeating-linear-gradient(90deg,#7d91a92b 0 1px,transparent 1px 25%)}
.reference-facts{border-color:#7d91a933}
.fact-controls button.active{border-color:var(--blue-dark)}
.fact-controls button.active:after{background:var(--blue-dark)}
#about.intro{display:block;background:var(--paper);padding:6.8vw var(--first-gutter) 1.6vw}
#about .intro-heading{font-size:3.55vw;font-weight:700;letter-spacing:.005em;max-width:65%}
@media(max-width:991px){#about .intro-heading{font-size:3.95vw}}
@media(max-width:600px){#about .intro-heading{font-size:29px}}
.services-tag,.service-inquire{background:var(--blue)}
.services-tag{width:max-content;margin:2.2vw 0 0 auto}
.reference-heading .partners-period{color:var(--blue)}
.fact-copy #hero-fact-label{color:var(--blue)}
.service-showcase{background:var(--paper)}
.service-choice{border-color:#7d91a980}
.service-choice:hover,.service-choice.is-active{color:var(--blue-dark);border-color:var(--blue-dark)}
.reference-photo>:is(img,video),.service-image,.community-track img,.community-wide img,
.place-row img,.place-row:hover img,.wide-photo>img{filter:none}
.reference-photo:after,.service-media:after,.community-track figure:after,.community-wide:after{content:"";position:absolute;inset:0;background:var(--media-shade);pointer-events:none;z-index:1}
.service-detail:after{content:none}
.service-media,.community-track figure{position:relative;isolation:isolate;overflow:hidden;background:#034e7c}
.community-gallery{background:var(--paper);padding-top:8.5vw}
.gallery-controls button{color:var(--blue-dark);border-color:#7d91a980}
.gallery-controls button:hover{background:var(--blue-dark);color:#fff}
.community-wide{background:var(--blue);position:relative;isolation:isolate}
.collaborations,.careers,.faq{background:linear-gradient(110deg,var(--paper),#e9eef3)}
.process{background:linear-gradient(110deg,#11171d,#1b2835)}
.contact{background:linear-gradient(110deg,#e6ecf1,#dce5ed)}
footer{background:linear-gradient(110deg,#0d1116,#17212c)}
/* Black copy, with color reserved for deliberate headline and interface accents. */
:root{--ink:#000;--first-text:#000}
body .reference-heading h1,.fact-copy strong,.fact-copy>span,
.service-choice,.service-choice:hover,.service-choice.is-active,
.section-heading>p,.collab-grid article>span,.collab-grid p,
.faq-list details>p,.contact-grid>div>p,.careers>span,.careers>p,
.inquiry-status{color:#000}
.service-choice.is-active svg,.service-choice:hover svg{color:var(--blue-dark)}
.process p,.process-grid p{color:#fff}
footer .footer-bottom{color:#fff}
#about .intro-word{display:inline-block;white-space:nowrap;color:#b4b7ba;opacity:1;transition:none;--reveal-color:#000}
#about .intro-word.is-blue{--reveal-color:var(--blue-dark)}
#about .intro-letter{color:#b4b7ba;transition:color .16s linear}
#about .intro-letter.lit{color:var(--reveal-color)}
#about .intro-stop{--reveal-color:#000}
@media(prefers-reduced-motion:reduce){#about .intro-letter{color:var(--reveal-color);transition:none}}
.service-scroll{--service-top:140px;--service-height:min(calc(100svh - var(--service-top) - 84px),44vw);--service-travel:3000px;position:relative;height:calc(var(--service-height) + var(--service-travel));background:var(--paper)}
.service-scroll .service-showcase{position:sticky;top:var(--service-top);height:var(--service-height);grid-template-columns:40% 48.5%;align-items:stretch;background:transparent}
.service-scroll .service-menu{position:static;top:auto;grid-template-rows:repeat(6,minmax(0,1fr));height:calc(100% - 60px);align-self:start;gap:clamp(10px,1.5svh,18px);padding:0 .6vw 0}
.service-scroll .service-choice{padding:0 0 1.1svh;align-items:flex-end;font-size:clamp(18px,min(2.1vw,3.5svh),34px);min-height:0}
.service-scroll .service-detail{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:1.4vw;padding-bottom:clamp(18px,1.7vw,28px);background:transparent;overflow:visible}
.service-scroll .service-media{min-height:0}
.service-scroll .service-image{display:block;height:100%;width:100%;object-fit:cover}
/* Fill each service frame while keeping the video action centered. */
.service-scroll video.service-image{object-fit:cover;object-position:50% 50%}
.service-scroll .service-description{position:static;inset:auto;gap:2vw;color:#000;align-items:end}
.service-scroll .service-inquire{background:var(--blue);color:#fff;width:clamp(44px,4vw,72px);height:clamp(44px,4vw,72px);min-width:44px;min-height:44px;padding:clamp(10px,.85vw,16px)}
.service-scroll .service-inquire:hover{background:#023958}
.service-scroll .service-description p{font-size:clamp(14px,min(1.6vw,2.5svh),24px);font-weight:400;line-height:1.35;letter-spacing:-.015em}
.service-scroll .service-description strong{font-weight:600;color:var(--blue)}
@media(max-width:991px){.service-scroll{--service-top:125px}.service-scroll .service-choice{font-size:clamp(16px,2.2vw,24px)}.service-scroll .service-menu{gap:15px}}
@media(max-width:767px){
 .service-scroll{--service-top:128px;--service-height:calc((100svh - var(--service-top)) * .94)}
 .service-scroll .service-showcase{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:16px;padding:0 20px}
 .service-scroll .service-menu{grid-row:1;height:auto;gap:5px;padding:0}
 .service-scroll .service-choice{font-size:clamp(15px,3.95vw,19px);padding:4px 0 5px;border-bottom-width:2px;line-height:1.1}
 .service-scroll .service-choice svg{width:24px;height:24px}
 .service-scroll .service-detail{grid-row:2;max-height:none;width:100%}
 .service-scroll .service-detail{gap:27px;padding-bottom:0}.service-scroll .service-description{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
 .service-scroll .service-description p{width:100%;font-size:clamp(16px,4.4vw,19px);line-height:1.3}
 .service-scroll .service-description .service-inquire{align-self:flex-start;margin:0}
 .service-scroll .service-inquire{width:38px;height:38px;min-width:38px;min-height:38px;padding:9px}
}
@media(prefers-reduced-motion:reduce){
 .service-scroll{height:auto}.service-scroll .service-showcase{position:static;height:auto;min-height:0}
 .service-scroll .service-detail{height:auto;min-height:0;grid-template-rows:auto auto}.service-scroll .service-media{aspect-ratio:4/3}.service-scroll .service-menu{height:auto}
}
/* Upcoming services stay at 50%; the current service is black with a filling blue rule. */
.service-scroll{--service-rule:4px}
.service-scroll .service-choice{position:relative;border-bottom-color:transparent;color:var(--blue);opacity:.5;transition:color .25s,opacity .25s}
.service-scroll .service-choice:before,.service-scroll .service-choice:after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--service-rule));height:var(--service-rule);pointer-events:none}
.service-scroll .service-choice:before{background:var(--blue)}
.service-scroll .service-choice:after{background:var(--blue);transform:scaleX(0);transform-origin:left center;will-change:transform}
.service-scroll .service-choice.is-active{color:#000;opacity:1;border-bottom-color:transparent}
.service-scroll .service-choice.is-active:before{opacity:.5}
.service-scroll .service-choice.is-past{color:#000;opacity:1}
.service-scroll .service-choice.is-past:before{background:var(--blue)}
.service-scroll .service-choice:focus-visible{outline:2px solid var(--blue);outline-offset:6px;opacity:1}
.service-scroll .service-choice.is-active:after{transform:scaleX(var(--service-progress,1))}
.service-scroll .service-choice svg{display:block;width:clamp(20px,.95em,30px);height:clamp(20px,.95em,30px);min-width:0;flex:0 0 auto;margin:0 2px .05em 0;color:var(--blue);transform:none}
.service-scroll .service-choice:hover svg,.service-scroll .service-choice.is-active svg{transform:none}
@media(max-width:991px){.service-scroll{--service-rule:3px}}
@media(max-width:767px){.service-scroll{--service-rule:2px}}
/* The photo expands upward over the heading while the hero holds its position. */
.reference-hero{--hero-pin-top:100px;--hero-progress:0}
.reference-stage{isolation:isolate}
.reference-heading{position:relative;top:auto;z-index:0}
.reference-photo{z-index:1;height:clamp(440px,55svh,740px)}
.reference-photo>:is(img,video){object-position:50% 30%}
.reference-hero.hero-scroll-ready{height:calc(var(--hero-pin-top) + var(--hero-scene-height) + var(--hero-travel));padding-top:var(--hero-pin-top)}
.hero-scroll-ready .reference-stage{position:sticky;top:var(--hero-pin-top);height:var(--hero-scene-height)}
.hero-scroll-ready .reference-heading{position:absolute;inset:0 0 auto}
.hero-scroll-ready .reference-photo{position:absolute;top:calc(var(--hero-heading-height) * (1 - var(--hero-progress)));bottom:0;left:0;right:0;height:auto;width:auto}
@media(min-width:1800px){.reference-hero{--hero-pin-top:7vw}}
@media(max-width:991px){.reference-hero{--hero-pin-top:120px}}
@media(max-width:600px){.reference-hero{--hero-pin-top:105px}.reference-photo{height:52svh;min-height:300px}.reference-photo>:is(img,video){object-position:38% 30%}.hero-scroll-ready .reference-photo{min-height:0}}

/* Match the compact intro-to-services spacing on smaller screens. */
@media(max-width:991px){#about.intro{padding-top:64px;padding-bottom:20px}#about .intro-heading{max-width:80%}}
@media(max-width:767px){.service-scroll .service-showcase{grid-template-columns:1fr}.community-gallery{padding-top:54px}}
@media(max-width:600px){.reference-heading h1{font-size:17.8vw}#about.intro{padding:54px 20px 22px}#about .intro-heading{max-width:100%}.services-tag{margin:25px 0 0 auto}}

/* Three deliberate lines keep each rotating statement compact. */
.fact-copy{width:max-content;max-width:none;padding-bottom:10px}
.fact-copy #hero-fact,.fact-copy #hero-fact-label{font-size:clamp(14px,1.5vw,24px);line-height:1.08}
.fact-copy #hero-fact>span,.fact-copy #hero-fact-label{display:block;white-space:nowrap}
.reference-photo>video{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:991px){.fact-copy{max-width:none}.fact-copy #hero-fact,.fact-copy #hero-fact-label{font-size:14px}}
@media(max-width:600px){.fact-copy{padding-bottom:0}.fact-copy #hero-fact,.fact-copy #hero-fact-label{font-size:15px}}

/* Keep the complete service scene readable when the phone viewport is short. */
@media(max-width:767px) and (max-height:739px) {
 .service-scroll .service-menu { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:7px 16px; }
 .service-scroll .service-choice { font-size:clamp(12px,3.6vw,15px); line-height:1.2; padding:4px 0 6px; gap:5px; align-items:center; }
 .service-scroll .service-choice span { min-width:0; }
 .service-scroll .service-choice svg { width:17px; height:17px; }
 .service-scroll .service-showcase { gap:12px; }
 .service-scroll .service-detail { gap:23px; padding-bottom:0; }
 .service-scroll .service-description { gap:10px; }
}

@media(max-width:350px) and (max-height:739px) {
 .service-scroll .service-menu { column-gap:10px; }
 .service-scroll .service-choice { gap:3px; }
 .service-scroll .service-choice svg { width:12px; height:12px; }
}