/* Screens pass, 7 October 2026. Loaded last. Removing this file and its
   <link> returns the page to the quality pass. Goals: each main section is
   one composed screen on desktop and laptop, one button system, Phosphor
   duotone process art, and a hero that leaves the ribbon free. */

/* Registered so fluid clamp()/svh row heights resolve to pixels for JS. */
@property --band-height{syntax:'<length>';inherits:true;initial-value:280px}
:root{--btn-h:52px;--screen-pad:clamp(36px,6.5svh,84px);--h2:clamp(42px,min(5.1vw,8svh),74px)}

/* Buttons. Blue fill: the main action. Outline: the second action.
   Underline: inline links. One height and one type size. */
.pill{min-height:var(--btn-h);padding:0 20px 0 24px;gap:12px;font-size:15px;font-weight:650;line-height:1.2;border-width:1.5px}
.pill .round-arrow{width:auto;height:auto;background:transparent;color:inherit;border:0}
.pill .round-arrow .icon,.enquiry-submit>.icon{width:17px;height:17px}
.studio-primary,.enquiry-actions .enquiry-submit{background:#365BFF;border-color:#365BFF;color:#fff}
.project-pill,.hero-actions .hero-cta,.work-aside .work-browse,.service-actions .pill{background:#0202044d;border-color:#F3F1EBb3;color:#F3F1EB;box-shadow:none}
.project-pill:hover,.hero-actions .hero-cta:hover,.work-aside .work-browse:hover,.service-actions .pill:hover{background:#F3F1EB;border-color:#F3F1EB;color:#020204}
.project-pill{min-height:46px;font-size:14px;padding:0 16px 0 20px}

/* Hero A (default): headline high over the sky, lower half left to the ribbon. */
.hero{min-height:100svh;padding:0;align-items:start}
.hero-copy{align-self:start;padding-top:calc(88px + clamp(18px,6svh,76px))}
.hero h1{font-size:clamp(64px,min(8.6vw,13.4svh),156px);line-height:.93;letter-spacing:-.062em;max-width:none;margin:16px 0 0}
.hero-description{max-width:640px;margin:clamp(16px,2.6svh,28px) 0 clamp(22px,3.6svh,36px)}
.hero-overlay{background:linear-gradient(180deg,#020204a8 0%,#02020466 30%,#02020400 56%,#02020400 80%,#020204 100%),linear-gradient(90deg,#0202047a 0%,#02020426 48%,#02020400 72%)}
.hero-scroll{bottom:clamp(20px,4svh,38px)}

/* Hero B: one giant headline along the bottom, copy and actions beside it. */
[data-hero-layout=bottom] .hero{align-items:end}
[data-hero-layout=bottom] .hero-copy{align-self:end;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,440px);grid-template-areas:"eyebrow ." "title desc" "title actions";column-gap:clamp(32px,5vw,80px);align-items:end;padding:0 0 clamp(48px,9svh,100px)}
[data-hero-layout=bottom] .hero-eyebrow{grid-area:eyebrow}
[data-hero-layout=bottom] .hero h1{grid-area:title;font-size:clamp(72px,min(10.6vw,19svh),210px);line-height:.86;margin:10px 0 0}
[data-hero-layout=bottom] .hero-description{grid-area:desc;margin:0 0 22px;font-size:clamp(16px,1.3vw,19px)}
[data-hero-layout=bottom] .hero-description .desktop-break{display:none}
[data-hero-layout=bottom] .hero-actions{grid-area:actions;gap:14px;flex-wrap:nowrap}
[data-hero-layout=bottom] .hero-overlay{background:linear-gradient(0deg,#020204 0%,#020204b3 24%,#0202044d 48%,#02020400 66%),linear-gradient(180deg,#0202048c 0%,#02020400 24%)}
[data-hero-layout=bottom] .hero-scroll{display:none}

/* Shared section rhythm: one heading size, one spacing scale. */
.section-heading h2,.closing h2{font-size:var(--h2);line-height:1.02}
.section-heading{margin-bottom:clamp(22px,4svh,48px)}
.work-showcase .section-heading{margin-bottom:clamp(18px,3svh,36px)}

/* Work: compact row labels and rows sized from the remaining screen height. */
/* Fixed part measured in the browser: kicker, heading, row labels, captions
   and hover room. The rows share whatever height remains. */
.work-showcase{--work-fixed:calc(var(--screen-pad)*2 + var(--h2)*1.02 + 302px)}
.section-heading--work .work-aside{display:flex;flex-direction:column;align-items:flex-end;gap:14px;text-align:right;flex:none}
.section-heading--work .work-invite{margin:0;font-size:17px;color:#C0C8D7;max-width:none}
.band-window{height:calc(var(--band-height) + 78px);padding-block:22px 20px;margin-top:-10px}
.band-heading{margin-bottom:10px}
.band-heading>div{display:flex;align-items:baseline;gap:6px 16px;flex-wrap:wrap}
.band-heading h3{font-size:21px;margin:0}
.band-heading p{font-size:15px}
#presenter-band .band-window{--band-height:clamp(168px,calc((100svh - var(--work-fixed))*.6),330px)}
#product-band .band-window{--band-height:clamp(110px,calc((100svh - var(--work-fixed))*.4),240px)}
/* Presenter previews crop 9:16 films to 3:4: larger faces, and fewer cards
   (so fewer simultaneous videos) across the screen. Full films stay uncropped
   in the gallery. shift.js reads --card-ratio when sizing the rail. */
#presenter-band .band-window{--card-ratio:.75}
#presenter-band .band-media img,#presenter-band .preview-clip{object-fit:cover;object-position:50% 38%}
/* Presenter captions: name on one line, title on the next, never cut. */
#presenter-band .band-card figcaption{font-size:13px;line-height:17px;white-space:normal;padding-top:2px}
#presenter-band .band-card figcaption strong{display:block}
#presenter-band .band-card figcaption .caption-sep{display:none}
#presenter-band .band-card figcaption .caption-title{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-band+.work-band{margin-top:clamp(6px,1.4svh,18px)}

/* Services: footage scales with the screen. */
.service-visual{height:clamp(160px,26svh,300px)}

/* Process: plain numbers on the timeline, Phosphor duotone art. */
.process-section{--line-gap:clamp(20px,3.4svh,34px)}
.process-grid{padding-top:var(--line-gap)}
.process-card::after{top:calc(-1*var(--line-gap) - 7px)}
.step-pill,.is-featured .step-pill{font-size:clamp(40px,6.2svh,60px)}
.process-illustration{width:clamp(100px,15svh,136px);aspect-ratio:320/256;margin:clamp(12px,2.4svh,24px) 0 clamp(10px,2svh,20px)}
.process-card h3{margin:0 0 10px}
.ph-art{overflow:visible}
.ph-art path,.ph-art circle{stroke:none}
.ph-art .ph-line{fill:#F3F1EB}
.ph-art .ph-ghost{opacity:.42}
.ph-art .ph-tone{fill:#365BFF;opacity:.7}
.ph-art .ph-fill{fill:#04060C}
.ph-art .ph-guide{fill:none;stroke:none}
.ph-art .ph-dot{fill:#365BFF;stroke:#F3F1EB;stroke-width:6}
.ph-art .ph-part,.ph-art .ph-spin{transform-box:view-box}
.ph-art .ph-back{transform-origin:48px 224px}
.ph-art .ph-front{transform-origin:128px 224px}
.ph-art .ph-stick{transform-origin:32px 112px}
.ph-art .ph-seal,.ph-art .ph-spin{transform-origin:128px 128px}
/* Lucide comparison page: the earlier line icons, larger, cobalt accents. */
.process-illustration:has(.lc-art){width:clamp(72px,11svh,96px);aspect-ratio:1}
.process-illustration .lc-art{width:100%;height:100%;stroke-width:1.5;color:#F3F1EB}
.lc-art .doc-lines path,.lc-art .delivery-check{stroke:#365BFF;stroke-width:2}
.lc-art .route-marker{fill:#365BFF;stroke:#365BFF}
.process-card.is-active .lc-art .delivery-check{stroke:#365BFF}
.process-card.is-active .process-illustration:has(.lc-art){color:#F3F1EB}

/* Contact: same heading scale; the brief field gives way on short screens. */
.closing-layout{align-items:center}
.enquiry-fields textarea{min-height:clamp(92px,13svh,142px)}

/* Desktop and laptop: every main section is one screen. */
@media(min-width:901px) and (min-height:600px){
  .work-showcase,.services-section,.process-section,.closing{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:var(--screen-pad)}
  .closing-inner{width:min(1280px,calc(100% - 96px))}
}

@media(max-width:700px){
  :root{--btn-h:48px;--h2:clamp(38px,10.4vw,52px);--screen-pad:56px}
  .project-pill{min-height:40px;font-size:13px;padding:0 12px 0 14px}
  .hero-copy{padding-top:calc(67px + 6svh)}
  .hero h1{font-size:clamp(52px,15.4vw,80px)}
  .hero-actions{flex-direction:column;align-items:stretch;gap:12px;max-width:340px}
  .hero-actions .pill{justify-content:space-between}
  [data-hero-layout=bottom] .hero-copy{grid-template-columns:1fr;grid-template-areas:"eyebrow" "title" "desc" "actions";padding-bottom:44px}
  [data-hero-layout=bottom] .hero h1{font-size:clamp(60px,18vw,92px);margin-bottom:18px}
  .band-heading>div{display:block}
  .section-heading--work .work-aside{align-items:flex-start;text-align:left;margin-top:18px}
  .band-heading h3{font-size:20px}
  #presenter-band .band-window{--band-height:clamp(170px,26svh,240px)}
  #product-band .band-window{--band-height:clamp(118px,17svh,170px)}
  /* Services become one swipeable row: a card plus a peek of the next. */
  .service-list{display:flex;flex-direction:row;align-items:flex-start;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;margin-inline:-18px;padding:0 18px 4px;scroll-padding-inline:18px;scrollbar-width:none}
  .service-list::-webkit-scrollbar{display:none}
  .service-offer{flex:0 0 86%;scroll-snap-align:start}
  .service-visual{height:clamp(170px,26svh,220px)}
  .process-grid{gap:26px 18px}
  .process-card::after{top:-7px}
  .step-pill,.is-featured .step-pill{font-size:38px}
  .process-illustration{width:104px}
  .process-card p{font-size:14px;line-height:1.55}
}
@media(prefers-reduced-motion:reduce){.service-list{scroll-behavior:auto}}