/* Light, film-led homepage. Shared subpage styles remain in styles.css. */

.scroll-home .site-header { border-bottom:0; }
.scroll-home .header-inner { min-height:80px; }
.scroll-home .brand { width:114px; }
.film-journey { position:relative; --nav-height:80px; }
.film-sticky { position:relative; padding:30px 0 55px; }
.film-frame { position:relative; width:min(82vw,calc((100svh - var(--nav-height)) * .86)); aspect-ratio:1; margin:auto; overflow:hidden; background:#38413b; }
.opening-film { width:100%; height:100%; object-fit:cover; object-position:62% center; display:block; }
.film-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,#100c1499); pointer-events:none; }
.film-wordmark { position:absolute; width:88%; height:auto; bottom:0; left:6%; filter:drop-shadow(0 2px 12px #0002); }
.film-title { position:relative; text-align:center; font-size:clamp(38px,min(6.2vw,11svh),144px); line-height:1.05; margin:60px 20px 30px; letter-spacing:-.025em; text-wrap:balance; }
.film-title em { color:var(--teal); }
.film-scroll-cue { display:none; }
.opening-motion,.gallery-motion,.gallery-step { width:44px; height:44px; display:inline-grid; place-items:center; border:1px solid #29212f30; border-radius:50%; padding:0; background:#ffffff80; color:var(--ink); cursor:pointer; }
.opening-motion svg,.gallery-motion svg,.gallery-step svg { width:20px; height:20px; }
.opening-motion[hidden],.gallery-motion[hidden] { display:none; }
.opening-motion:hover,.gallery-motion:hover,.gallery-step:hover { background:var(--paper); }
.opening-motion { position:absolute; bottom:10px; right:28px; color:var(--ink); background:var(--paper); z-index:5; }
.film-journey.is-scroll-driven { height:230svh; }
.is-scroll-driven .film-sticky { position:sticky; top:var(--nav-height,80px); height:calc(100svh - var(--nav-height,80px)); padding:0; overflow:clip; }
.is-scroll-driven .film-frame { position:absolute; margin:0; left:var(--film-x,25%); top:var(--film-y,30px); width:var(--film-width,50%); height:var(--film-height,80%); aspect-ratio:auto; will-change:width,height; }
.is-scroll-driven .film-wordmark { opacity:var(--mark-opacity,1); }
.is-scroll-driven .film-shade { opacity:var(--shade-opacity,.35); background:linear-gradient(180deg,#100c140d 5%,#100c14bb); }
.is-scroll-driven .film-title { position:absolute; bottom:11%; left:4.5%; right:4.5%; margin:0; color:var(--cream); text-align:left; opacity:var(--title-opacity,0); transform:translateY(var(--title-y,400px)); text-shadow:0 2px 24px #0003; pointer-events:none; }
.is-scroll-driven .film-title em { color:#d6f0e4; }
.is-scroll-driven .film-scroll-cue { display:flex; align-items:center; gap:15px; position:absolute; bottom:15px; left:28px; font-size:10px; color:var(--muted); opacity:var(--cue-opacity,1); }
.film-scroll-cue span { font-size:20px; }
.business-intro { display:grid; grid-template-columns:1fr 4fr; gap:50px; padding-block:130px 145px; }
.business-intro>.eyebrow { padding-top:12px; }
.intro-copy h2 { max-width:930px; font-size:clamp(28px,3.2vw,47px); line-height:1.25; letter-spacing:-.025em; }
.intro-copy>p { max-width:710px; font-size:18px; color:var(--muted); margin-top:28px; }
.intro-model { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:38px; }
.intro-model strong { font-size:22px; color:var(--coral); }
.intro-model .text-link { margin:0; }
.moving-work { padding-block:4px; overflow:hidden; }
.work-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin-bottom:28px; }
.work-heading h2 { white-space:nowrap; font-size:clamp(34px,4.1vw,60px); letter-spacing:-.035em; margin-top:14px; line-height:1.02; }
.gallery-controls { display:flex; flex:none; align-items:center; gap:10px; padding-bottom:4px; }
.work-window { --case-width:clamp(340px,32vw,600px); max-width:1920px; margin:auto; overflow-x:auto; overscroll-behavior-x:contain; overflow-anchor:none; scrollbar-width:thin; padding:0 0 4px; }
.work-track { position:relative; display:flex; gap:26px; align-items:flex-start; padding-inline:28px; width:max-content; }
.work-window.is-drifting { cursor:grab; }
.work-window.is-looping { scrollbar-width:none; }
.work-window.is-looping .work-track { display:block; padding:0; }
.work-window.is-looping .case-card { position:absolute; top:0; }
.work-window.is-looping::-webkit-scrollbar { display:none; }
.work-window.is-drifting .case-preview { cursor:grab; }
.work-window.is-dragging,.work-window.is-dragging * { cursor:grabbing; user-select:none; }
.work-window img { -webkit-user-drag:none; }
.work-window.is-drifting .work-track { padding-inline:0; }
.case-card { flex:0 0 var(--case-width); width:var(--case-width); min-width:0; }
.case-preview { display:block; position:relative; border:0; padding:0; width:100%; height:auto; aspect-ratio:1200 / 1140; overflow:hidden; background:#e0e9e2; text-align:left; }
.case-preview>img,.case-preview>video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .25s; }
.case-preview>video { opacity:0; }
.case-card.is-active .case-preview.has-video>video { opacity:1; }
.case-card.is-active .case-preview.has-video>img { opacity:0; }
.work-window.is-mobile-gallery .case-preview.has-video>video { opacity:1; }
.work-window.is-mobile-gallery .case-preview.has-video>img { opacity:0; }
.work-window.is-mobile-gallery .case-details { animation:none; }
.case-media-label { position:absolute; left:16px; bottom:17px; font-size:8px; letter-spacing:.09em; padding:5px 7px; background:#fff9efe8; color:var(--muted); }
/* Full-size films and one hover paragraph; no nested text scrolling. */
.case-caption { cursor:auto; }
.case-summary { padding:12px 0 0; }
.case-summary .eyebrow { font-size:8px; letter-spacing:.12em; color:var(--muted); }
.case-summary h3 { font-size:clamp(22px,1.8vw,27px); line-height:1.15; margin:8px 0 0; letter-spacing:-.025em; text-wrap:balance; }
.case-details { padding:8px 0 4px; font-size:13px; line-height:1.5; color:var(--muted); }
.case-card.is-active .case-details { animation:case-copy-in .2s ease both; }
/* Reserve room for the complete hover state before interaction. */
.case-card.is-measuring .case-details[hidden] { display:block!important; visibility:hidden; }
@keyframes case-copy-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.five-starts { padding-block:12px 18px; }
.starts-heading { margin-bottom:18px; }
.starts-heading h2 { font-size:clamp(40px,4.2vw,60px); line-height:1.06; margin:12px 0; letter-spacing:-.035em; }
.starts-heading>p:last-child { font-size:15px; color:var(--muted); }
.start-row { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.entry-card { min-width:0; padding:22px 19px 26px; min-height:395px; display:flex; flex-direction:column; border-radius:2px; transition:transform .25s; cursor:default; }
.entry-card:hover { transform:translateY(-7px); }
.entry-card.backlog { background:#dfe8e1; }
.entry-card.growth-boost { background:#eee0c9; }
.entry-card.pricing-advantage { background:#e8d4ca; }
.entry-card.modernization { background:#e4ddeb; color:var(--plum); }
.entry-card.modernization .code-fragment { color:#75627c; border-color:#75627c; }
.entry-card.modernization .code-fragment.new { color:#9a6a20; }
.entry-card.modernization .refactor-arrow { color:#75627c; }
.entry-card.unique-outcome { background:#dbe5e9; }
.entry-card .start-top { display:flex; justify-content:space-between; align-items:center; }
.entry-card .card-number { font-size:12px; }
.entry-card .card-arrow { font-size:24px; }
.entry-card .start-art { height:110px; transform:scale(.7); transform-origin:center; margin:5px -16px; }
.entry-card .start-copy { margin-top:auto; }
.entry-card .start-copy h3 { font-size:clamp(18px,1.7vw,24px); line-height:1.2; letter-spacing:-.02em; margin-bottom:14px; }
.entry-card .start-copy p { font-size:12px; line-height:1.65; }
.scroll-closing { padding-block:90px 115px; text-align:center; border-top:0; }
.scroll-closing h2 { font-size:clamp(42px,5.7vw,80px); line-height:1.07; letter-spacing:-.035em; margin:25px 0 33px; }
@media(max-width:1000px) {
 .business-intro { grid-template-columns:1fr 4fr; gap:28px; padding-block:90px 100px; }
 .intro-copy>p { font-size:16px; }
 .intro-model strong { font-size:19px; }
 .start-row { gap:10px; }
 .entry-card { padding:17px 12px 22px; min-height:380px; }
 .entry-card .start-copy h3 { font-size:18px; }
 .entry-card .start-copy p { font-size:11px; }
 .entry-card .start-art { transform:scale(.55); margin-inline:-32px; }
}
@media(max-width:700px) {
 .scroll-home .header-inner { min-height:72px; }
 .film-journey { --nav-height:72px; }
 .film-frame { width:min(540px,82vw); }
 .film-title { font-size:clamp(35px,8.5vw,58px); }
 .is-scroll-driven .film-title { left:6%; right:6%; bottom:18%; }
 .film-journey.is-scroll-driven { height:205svh; }
 .is-scroll-driven .film-scroll-cue { left:20px; bottom:22px; font-size:9px; gap:8px; }
 .opening-motion { right:15px; bottom:20px; font-size:9px; }
 .business-intro { grid-template-columns:1fr; gap:22px; padding-block:70px 80px; }
 .business-intro>.eyebrow { padding-top:0; }
 .intro-copy h2 { font-size:29px; }
 .intro-copy>p { font-size:15px; margin-top:23px; }
 .intro-model { align-items:flex-start; flex-direction:column; gap:15px; margin-top:27px; }
 .intro-model strong { font-size:21px; }
 .moving-work { padding-top:0; padding-bottom:16px; }
 .work-heading { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:28px; }
 .work-heading>div:not(.gallery-controls) { flex:1 0 100%; }
 .work-heading h2 { white-space:normal; font-size:36px; margin-top:22px; text-wrap:balance; }
 .work-heading>.gallery-controls { position:static; margin-left:auto; gap:6px; padding:0; }
 .work-heading .gallery-motion,.work-heading .gallery-step { width:36px; height:36px; }
 .work-window { --case-width:88vw; }
 .work-track { gap:20px; padding-inline:20px; }
 .case-summary h3 { font-size:clamp(18px,5.3vw,22px); }
 .five-starts { padding-top:28px; padding-bottom:70px; }
 .starts-heading h2 { font-size:41px; }
 .start-row { display:flex; overflow-x:auto; gap:13px; scroll-snap-type:x mandatory; padding-bottom:18px; }
 .entry-card { flex:0 0 78%; min-height:335px; padding:22px; scroll-snap-align:start; }
 .entry-card .start-art { transform:scale(.8); margin:8px 0; }
 .entry-card .start-copy h3 { font-size:25px; }
 .entry-card .start-copy p { font-size:14px; }
 .scroll-closing { padding-block:65px 75px; }
 .scroll-closing h2 { font-size:42px; }
}
@media(prefers-reduced-motion:reduce) { .film-scroll-cue { display:none; } .entry-card:hover { transform:none; } .case-preview { transition:none; } .case-card.is-active .case-details { animation:none; } }
.case-card[data-case=enterprise] .case-preview { background:#d9e7df; }
.case-card[data-case=category] .case-preview { background:#efe1c9; }
.case-card[data-case=growth] .case-preview { background:#dfddeb; }
.case-card[data-case=retail] .case-preview { background:#e9d8ce; }
.case-card[data-case=marketplace] .case-preview { background:#d6e3e8; }
.case-preview>video { object-fit:contain; }

/* One wordmark at a time: the header takes over after the film mark disappears. */
.js .scroll-home .site-header .brand { opacity:0; visibility:hidden; pointer-events:none; transition:none; }
.js .scroll-home .site-header.has-brand .brand { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .22s ease; }
.film-frame { box-shadow:0 0 14px 4px #ffffffe0,0 0 28px 7px #ffffff75; }

/* Short landscape screens get a full-width film, followed by the headline.
   CSS supplies the same readable layout before JS or with reduced motion. */
@media (orientation:landscape) and (max-width:1024px) and (max-height:600px) {
 .scroll-home .header-inner { min-height:56px; flex-wrap:wrap; }
 .scroll-home .site-header nav { display:none; }
 .scroll-home .menu-toggle { display:flex; align-items:center; gap:12px; min-height:44px; padding:7px 13px; background:transparent; color:var(--ink); border:1px solid #d5cbd4; border-radius:4px; font-size:11px; }
 .scroll-home .site-header.menu-open nav { display:flex; position:absolute; top:56px; left:0; width:100%; max-height:calc(100svh - 56px); overflow-y:auto; flex-direction:column; align-items:stretch; gap:4px; padding:8px 24px 16px; background:var(--paper); }
 .scroll-home .site-header.menu-open nav a { padding:10px 5px; }
 .film-journey { --nav-height:56px; --landscape-film-height:max(1px,calc(100svh - var(--nav-height))); }
 .film-journey.is-scroll-driven { height:auto; }
 .film-journey .film-sticky { position:relative; top:auto; height:auto; padding:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:var(--landscape-film-height) auto; overflow:visible; }
 .film-journey .film-frame { grid-area:1 / 1; position:relative; inset:auto; width:100%; height:100%; margin:0; aspect-ratio:auto; will-change:auto; }
 .film-journey .opening-film { object-position:center; }
 .film-journey .film-wordmark { left:max(20px,env(safe-area-inset-left)); bottom:10px; width:min(32vw,260px); opacity:1; }
 .film-journey .film-shade { opacity:1; background:linear-gradient(180deg,transparent 45%,#100c1480); }
 .film-journey .film-title { grid-area:2 / 1; position:relative; inset:auto; margin:26px max(24px,6vw) 34px; font-size:clamp(30px,4.8vw,44px); color:var(--ink); text-align:center; text-shadow:none; opacity:1; transform:none; }
 .film-journey .film-title em { color:var(--teal); }
 .film-journey .film-scroll-cue { display:none; }
 .film-journey .opening-motion { grid-area:1 / 1; position:relative; inset:auto; align-self:end; justify-self:end; margin:0 max(16px,env(safe-area-inset-right)) 16px 0; }
}

/* Outcome explanation and the restored, living twin. */
.business-intro { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; padding-block:110px 125px; }
.intro-copy .eyebrow { margin-bottom:22px; }
.intro-copy>.eyebrow { margin-top:0; font-size:10px; color:var(--ink); }
.intro-copy h2 { font-size:clamp(29px,2.85vw,40px); line-height:1.23; text-wrap:balance; }
.intro-description { margin-top:28px; color:var(--muted); font-size:16px; line-height:1.75; }
.intro-description p+p { margin-top:16px; }
.intro-model { margin-top:30px; }
.intro-model strong { font-size:clamp(21px,2vw,28px); }
.intro-twin.value-stage { display:block; padding:22px 20px 14px; border:1px solid #ffffff25; border-radius:18px; background:radial-gradient(ellipse at 50% 37%,#213333 0%,#181720 48%,#141019 90%); color:#fff9ef; box-shadow:0 16px 45px #38233f15; min-width:0; }
.intro-twin .twin-ensemble { width:100%; max-width:none; aspect-ratio:auto; margin:0; }
.intro-twin .twin-canvas-wrap { position:relative; inset:auto; width:100%; aspect-ratio:1.12; z-index:2; }
/* No stacking context here: rear portraits sit below the canvas, front ones above. */
.intro-workers { --worker-width:calc(10% - 3.2px); position:absolute; inset:0; pointer-events:none; }
.intro-twin .worker-portrait { position:absolute; inset:auto; width:var(--worker-width); max-width:none; margin:0; aspect-ratio:9/16; border:1px solid #393644; border-radius:4px; box-shadow:0 3px 9px #0005; transform:translate(-50%,-50%); z-index:3; }
.intro-twin .worker-bottom-left { left:38%; top:84%; }
.intro-twin .worker-bottom-right { left:62%; top:84%; }
.intro-twin .worker-left-rear { left:11%; top:46%; z-index:1; }
.intro-twin .worker-top-rear { left:67%; top:14%; z-index:1; }
.intro-twin .worker-right-rear { left:88%; top:68%; z-index:1; }
/* Labels remain above the graph while rear portraits sit behind it. */
.worker-label { position:absolute; z-index:4; width:max-content; transform:translateY(-50%); padding:4px 5px; border-radius:4px; background:#141019a6; color:#fff9ef; font-size:10px; line-height:1.3; overflow-wrap:anywhere; }
.worker-label strong { display:block; font-size:11px; font-weight:700; margin-bottom:2px; }
.worker-label span { display:block; color:#ded9e4; }
.worker-label-iris { left:calc(72% + 4.4px); max-width:calc(28% - 4.4px); top:14%; }
/* Percentage margins use the ensemble width: 8/9 of a portrait's width is half its height. */
.worker-label-spark { right:max(0px,calc(12% - 50px)); width:100px; top:68%; margin-top:calc(var(--worker-width) * -8 / 9 - 5px); transform:translateY(-100%); text-align:center; }
.worker-label-jenn { left:calc(67% + 4.4px); max-width:calc(33% - 4.4px); top:84%; }
.worker-label-wilbur { right:calc(67% + 4.4px); max-width:calc(33% - 4.4px); top:84%; text-align:right; }
.worker-label-ann { left:max(0px,calc(11% - 40px)); width:80px; top:46%; margin-top:calc(var(--worker-width) * 8 / 9 + 5px); transform:none; text-align:center; }
.intro-twin-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; color:#c7c0cf; }
.intro-twin-footer>span { font-size:8px; letter-spacing:.14em; }
.intro-twin .motion-toggle { font-size:10px; min-height:40px; padding:8px 0 8px 10px; color:#c7c0cf; }
.intro-twin :focus-visible { outline-color:#7cd9c4; }
@media(max-width:1100px) {
 .business-intro { gap:35px; }
 .intro-description { font-size:15px; }
 .intro-twin.value-stage { padding:18px 14px 12px; }
}
@media(max-width:900px) {
 .business-intro { grid-template-columns:1fr; gap:44px; padding-block:75px 90px; }
 .intro-copy { max-width:680px; }
 .intro-copy h2 { font-size:clamp(29px,4.6vw,39px); text-wrap:initial; }
 .intro-twin.value-stage { width:100%; max-width:620px; justify-self:center; }
}
@media(max-width:400px) {
 .intro-twin.value-stage { padding:12px 9px 8px; border-radius:12px; }
 .intro-workers { --worker-width:calc(10% - 2px); }
 .intro-twin .worker-portrait { border-width:1px; border-radius:2.5px; }
 .intro-twin-footer>span { font-size:7px; }
 .intro-twin .motion-toggle { font-size:9px; }
}
@media(max-width:700px) {
 .worker-label { font-size:9px; padding:3px 4px; }
 .worker-label strong { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
 .js .scroll-home .site-header .brand,.js .scroll-home .site-header.has-brand .brand { transition:none; }
}

/* Compact partner acknowledgement and quiet motion control. */
.intro-partner-badge { display:block; width:150px; max-width:100%; height:auto; margin-top:20px; }
.five-starts .intro-model { justify-content:center; align-items:center; text-align:center; margin-top:38px; }
.intro-twin .motion-toggle { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; background:none; }
.intro-twin .motion-toggle[hidden] { display:none; }
.intro-twin .motion-icon { display:grid; place-items:center; width:26px; height:26px; border:1px solid currentColor; border-radius:50%; }
.intro-twin .motion-icon svg { display:block; width:12px; height:12px; }
.intro-twin .motion-toggle:hover { color:#fffdf3; }
@media(max-width:700px) {
 .scroll-closing .button span[aria-hidden="true"] { display:none; }
 .scroll-closing .button { animation:homeContactPulse 2.4s ease-in-out infinite; }
 .page-inactive .scroll-closing .button { animation-play-state:paused; }
}
@keyframes homeContactPulse {
 0%,100% { box-shadow:0 0 0 0 #52634800; }
 50% { box-shadow:0 0 0 6px #52634838; }
}
@media(prefers-reduced-motion:reduce) {
 .scroll-closing .button { animation:none; }
}