/* BlancaShafaat branding over the supplied reference's exact layout system. */
.brand-filter{position:absolute;pointer-events:none;overflow:hidden}
.brand-lockup{position:relative;display:block;width:270px;line-height:0}
.brand-image{filter:url(#logo-on-dark)}
.brand-lockup>img{width:100%;height:auto;display:block}
.brand-icon-target{position:absolute;left:5.52855%;top:14.73354%;width:13.60875%;height:69.59248%}
.header__logo{display:block;margin-left:-15px;margin-top:-7px;margin-bottom:-7px;line-height:0}
.header__status{white-space:nowrap}
.intro-brand{position:relative;width:min(1000px,92vw);aspect-ratio:1646/319;flex:none}
.intro-brand-piece{position:absolute;display:block;overflow:hidden;will-change:transform}
.intro-brand-piece-inner{position:absolute;inset:0;transform:translateY(115%);will-change:transform}
.intro-brand-piece img{position:absolute;max-width:none;height:auto;display:block}
.intro-brand-divider,.intro-brand-tagline{opacity:0;transform:translateY(12px)}
.intro-brand-icon{position:absolute;left:5.52855%;top:14.73354%;width:13.60875%;height:69.59248%;transform:scale(0) rotate(-90deg);will-change:transform}
.intro-brand-icon-crop{position:absolute;inset:0;overflow:hidden;display:block}
.intro-brand-icon-crop img{position:absolute;width:734.82143%;left:-40.625%;top:-21.17117%;max-width:none;height:auto}
.intro-brand-wipe{position:absolute;inset:0;background:var(--color-accent);opacity:0}
.intro__lockup{padding:0;pointer-events:none}
html[data-intro]{overflow:hidden}
.intro__role{max-width:70%}
.hero__line{font-size:min(18.6vw,53.1915cqh)}
section[id],footer[id]{scroll-margin-top:80px}
.reference-credit{font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;color:var(--color-label);margin-top:28px}
.reference-credit a{color:var(--color-muted)}
.replay-intro{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-label);border:0;padding:0;background:none}
.replay-intro:hover{color:var(--color-accent)}
.project-dialog,.brief-dialog{color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-outline);max-width:min(760px,calc(100vw - 36px));width:760px;max-height:90svh;padding:48px;margin:auto;overflow:auto;scrollbar-width:thin}
dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}
dialog h2{font-variation-settings:"wdth" 75,"wght" 800;font-size:clamp(36px,6vw,72px);line-height:.95;letter-spacing:-.025em;margin:24px 0}
.dialog-close{float:right;background:none;border:0;font:12px var(--font-mono);color:var(--color-muted);padding:0 0 20px 24px;text-transform:uppercase}
.dialog-caption{font-size:16px;line-height:1.5;color:var(--color-muted);max-width:52ch;margin-bottom:28px}
.dialog-project-image{max-height:62vh;max-width:100%;width:auto;height:auto;margin:0 auto;display:block;border-radius:6px}
.dialog-original{display:inline-block;margin-top:26px;color:var(--color-accent)}
.brief-dialog label{display:block;font:11px var(--font-mono);text-transform:uppercase;letter-spacing:.06em;margin:24px 0 12px}
.brief-dialog input,.brief-dialog textarea{width:100%;background:var(--color-surface);border:1px solid var(--color-outline);padding:16px;line-height:1.5;resize:vertical}
.brief-copy{background:var(--color-accent);color:var(--color-on-accent);border-radius:100px;padding:16px 24px;margin-top:24px;font:12px var(--font-mono);text-transform:uppercase}
.brief-feedback{font-size:14px;color:var(--color-muted);margin-top:16px;min-height:20px}
body:has(dialog[open]){overflow:hidden}
body:has(dialog[open]) .cursor-dot,body:has(dialog[open]) .cursor-ring{display:none!important}
body:has(dialog[open]),body:has(dialog[open]) *{cursor:auto!important}
body:has(dialog[open]) :is(button,a){cursor:pointer!important}
.up-close__item img{pointer-events:none}
@media(max-width:1100px){.brand-lockup{width:240px}}
@media(max-width:700px){
 .brand-lockup{width:215px}.header__logo{margin-left:-12px}.header{gap:10px}
 .hero__line{font-size:var(--fit-size,25.1vw)}.hero__line--second{font-size:var(--fit-size,22.3vw)}
 .intro-brand{width:98vw}.intro__role{font-size:9px;line-height:1.6}
 .project-dialog,.brief-dialog{padding:26px 22px}.reference-credit{font-size:9px;line-height:1.6}
}
@media(max-width:380px){.brand-lockup{width:186px}.header__menu-button{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro{display:none!important}.statement__word{opacity:1!important}.intro-brand-piece-inner{transform:none}.intro-brand-icon{transform:none}}

/* Hero-to-content stacking: pin the existing first screen; subsequent sections
   rise over it without changing the design, order, motion, or navigation. */
.page-sections > .page-section:first-child {
  position: sticky;
  top: 0;
  z-index: 0;
  background: var(--color-bg);
}
.page-sections > .page-section:not(:first-child) {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
}

/* Post-hero surface, derived ONLY from the background treatment in the supplied
   BlancaShafaat Opening prototype. Nothing from its intro/reveal UI or scripts
   is imported. The pinned hero retains the original charcoal styling. */
:root {
  --bs-paper: #f4f5f0;
  --bs-paper-ink: #121813;
  --bs-paper-muted: #626e65;
}
.page-sections > .page-section:not(:first-child),
body > .footer {
  --color-bg: var(--bs-paper);
  --color-surface: #e8ece5;
  --color-text: var(--bs-paper-ink);
  --color-muted: #5b685e;
  --color-subtle: #667369;
  --color-label: #67736a;
  --color-faint: #778279;
  --color-hairline: #17332320;
  --color-outline: #17332344;
  --color-chip-border: #1733234d;
  --color-toggle-border: #17332336;
  --color-on-accent: #121813;
  color: var(--color-text);
  background-color: var(--bs-paper);
  position: relative;
}

/* Reference's faint geometric grid and fine paper-grain texture, intentionally
   behind all existing portfolio copy, images, buttons and interactive media. */
.page-sections > .page-section:not(:first-child)::before,
body > .footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--idea-header-space);
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, #17332309 1px, transparent 1px),
    linear-gradient(#17332309 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.07' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  background-size: 72px 72px, 72px 72px, 180px 180px;
  background-position: center top;
  opacity: .78;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 50%, transparent 100%);
}

/* The reference's understated translucent glass arc, used as an ambient
   background accent to the work area, never as intro content. */
.page-sections > .page-section:nth-child(4)::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: min(55vw, 780px);
  height: min(55vw, 780px);
  top: 9%;
  right: -19%;
  border-radius: 50%;
  border: clamp(16px, 4vw, 65px) solid transparent;
  border-top-color: #03d29140;
  border-left-color: #0c42251c;
  border-right-color: #03d29128;
  transform: rotate(-20deg) rotateX(63deg);
  box-shadow: 0 0 45px #03d29110, inset 0 0 30px #03d29110;
  filter: blur(.6px);
  opacity: .65;
}
/* Retain the original layering of the gallery, sticky media and interactions. */
.page-sections > .page-section:nth-child(4) > .selected-work {
  position: relative;
  z-index: 1;
}

/* Only once the paper overlay reaches the top does the fixed navigation
   become dark-on-light. The actual uploaded BS logo is used unfiltered. */
.header {
  transition: color .3s ease, background .3s ease;
}
.header .brand-image { transition: filter .3s ease; }
html.surface-light .header,
html.surface-light .menu,
html.surface-light .project-dialog,
html.surface-light .brief-dialog {
  --color-bg: var(--bs-paper);
  --color-surface: #e8ece5;
  --color-text: var(--bs-paper-ink);
  --color-muted: #5b685e;
  --color-subtle: #667369;
  --color-label: #67736a;
  --color-hairline: #17332320;
  --color-outline: #17332344;
  --color-on-accent: #121813;
  color: var(--color-text);
}
html.surface-light .header {
  background: var(--bs-paper);
  border-bottom: 1px solid #17332318;
}
html.surface-light .header .brand-image { filter: none; }
html.surface-light .menu { background-color: var(--bs-paper); }
html.surface-light .header__cta:hover {
  color: var(--bs-paper-ink);
  background: rgba(3,210,145,.19);
}
html.surface-light .header__menu-button { color: var(--bs-paper-ink); }

/* One new section only: statement between the scrolling skills bar and work.
   Typography/word opacity are inherited from the existing statement__text. */
.work-promise {
  min-height: 150svh;
  position: relative;
  z-index: 1;
}
.work-promise__sticky {
  box-sizing: border-box;
  min-height: 100svh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 120px var(--spacing-gutter) 105px;
}
.work-promise__headline {
  display: block;
  max-width: none;
  width: 100%;
  color: var(--color-text);
}
.work-promise__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: .26em;
}
.work-promise__line--sage { color: #697c61; }
.work-promise__description {
  max-width: 760px;
  margin: clamp(28px, 4vw, 54px) 0 0;
  color: var(--color-muted);
  font-size: clamp(19px, 1.7vw, 28px);
  line-height: 1.6;
  letter-spacing: -.015em;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: opacity, transform;
}
@media (max-width: 1100px) {
  .work-promise__sticky { padding-top: 100px; padding-bottom: 90px; }
}
@media (max-width: 700px) {
  .work-promise { min-height: 140svh; }
  .work-promise__sticky { min-height: 100svh; padding-top: 100px; padding-bottom: 75px; }
  .work-promise__headline { font-size: clamp(34px, 11.5vw, 58px); }
  .work-promise__description { font-size: clamp(18px, 4.8vw, 23px); line-height: 1.5; margin-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-promise .statement__word,
  .work-promise__description { opacity: 1 !important; transform: none !important; }
}
html[data-motion="off"] .work-promise .statement__word,
html[data-motion="off"] .work-promise__description { opacity: 1 !important; transform: none !important; }
html:not([data-js]) .work-promise .statement__word,
html:not([data-js]) .work-promise__description { opacity: 1 !important; transform: none !important; }


/* NEXT APPROVED ADDITION — immersive split-scroll extension of the work promise.
   All styles are scoped to this section; the initial full-width statement is
   visually identical to the previously approved reveal at split=0. */
.work-promise {
  --promise-split: 0;
  --promise-copy-width: 100%;
  --promise-copy-height: 100%;
  --promise-story-top: 0%;
  --promise-story-width: 50%;
  --promise-story-height: 100%;
  --promise-story-shift: 100%;
  --promise-story-y: 0px;
  min-height: 0;
  isolation: isolate;
}
.work-promise__sticky {
  height: 100svh;
  min-height: 100svh;
  padding: 0;
  display: block;
  overflow: hidden;
  background: var(--bs-paper);
  position: sticky;
  top: 0;
}
.work-promise__copy {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: var(--promise-copy-width);
  height: var(--promise-copy-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 120px var(--spacing-gutter) 105px;
  overflow: hidden;
  will-change: width, transform;
}
.work-promise__headline {
  /* Keep the exact approved type size until the scroll animation runs. */
}
.work-promise__description {
  /* JS interpolates only the type size during the split. */
  max-width: 760px;
}
.work-promise__story-pane {
  position: absolute;
  z-index: 1;
  top: var(--promise-story-top);
  bottom: auto;
  right: 0;
  width: var(--promise-story-width);
  height: var(--promise-story-height);
  border-left: 1px solid #17332326;
  background: #f4f5f0;
  overflow: hidden;
  transform: translate3d(var(--promise-story-shift), 0, 0);
  will-change: transform;
}
.work-promise__story-pane::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(90deg,#17332309 1px,transparent 1px),linear-gradient(#17332309 1px,transparent 1px);
  background-size: 72px 72px;
  opacity: .72;
  z-index: 0;
}
.work-promise__story-track {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: clamp(132px, 17svh, 184px) clamp(22px, 3.8vw, 75px) clamp(24px, 3svh, 38px);
  transform: translate3d(0, var(--promise-story-y), 0);
  will-change: transform;
}
.work-promise__story-intro {
  min-height: clamp(250px, 35svh, 370px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.work-promise__story-kicker,
.work-promise__profile-role,
.work-promise__art-label {
  font-family: var(--font-mono);
  font-size: clamp(10px, .82vw, 13px);
  line-height: 1.55;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: #5c675c;
}
.work-promise__story-heading {
  font-family: var(--font-sans);
  font-variation-settings: "wdth" 80, "wght" 700;
  font-size: clamp(60px, 6.4vw, 132px);
  letter-spacing: -.055em;
  line-height: .93;
  white-space: nowrap;
  color: #121813;
  margin: clamp(26px, 4vw, 64px) 0 0;
}
.work-promise__story-period { color: #03d291; }
.work-promise__story-rule {
  display: block;
  margin-top: auto;
  margin-bottom: clamp(36px, 5vw, 76px);
  width: 100%;
  height: 1px;
  background: #17332320;
}
.work-promise__profile {
  display: block;
  padding: 0 0 clamp(110px, 15svh, 165px);
}
.work-promise__profile:last-child {
  padding-bottom: clamp(28px, 4svh, 42px);
}
/* The two-column layout retains the same visual rhythm on tall tablets. */
@media (min-width: 761px) and (max-width: 1100px) {
  .work-promise__story-intro { min-height: clamp(220px, 26svh, 285px); }
}
.work-promise__art {
  position: relative;
  width: 100%;
  aspect-ratio: 1.86 / 1;
  min-height: 190px;
  overflow: hidden;
  isolation: isolate;
}
.work-promise__art--blanca {
  background: radial-gradient(ellipse at 49% 51%, #f0f4e7 0%, #e2e8dc 68%, #d8e1d4 100%);
}
.work-promise__blanca-grid {
  position: absolute;
  width: 31%;
  aspect-ratio: 1;
  left: 34.5%;
  top: 17%;
  background: #cad6c633;
  border: 1px solid #46594316;
  transform: rotate(12deg);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.work-promise__art--blanca:hover .work-promise__blanca-grid { transform: rotate(17deg) scale(1.045); }
.work-promise__blanca-frame {
  position: absolute;
  inset: 10%;
  border: 1px solid #294128;
}
.work-promise__blanca-line { position:absolute; background:#708e66; }
.work-promise__blanca-line--h { width:112%;height:1px;left:-6%;top:50%; }
.work-promise__blanca-line--v { width:1px;height:112%;top:-6%;left:50%; }
.work-promise__blanca-plus {
  font: 300 clamp(24px,5vw,72px)/1 var(--font-sans);
  color:#496e3c;
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%) rotate(-12deg);
}
.work-promise__art--shafaat {
  background: radial-gradient(ellipse at 50% 46%, #263b28 0%, #12291c 55%, #0a1f16 100%);
}
.work-promise__shafaat-orbit {
  position:absolute;
  width:38%;
  aspect-ratio:1;
  left:31%;top:12%;
  display:grid;place-items:center;
}
.work-promise__shafaat-core {
  position:absolute;
  width:67%;height:67%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 29%, #627d4b 0%, #365b32 38%, #112d1e 77%, #0f291b 100%);
  box-shadow: inset -15px -15px 30px #0015097d, 0 0 33px #91c16b19;
}
.work-promise__shafaat-ring {
  position:absolute;
  width:100%;height:61%;
  border:1px solid #82cf5d77;
  border-radius:50%;
  transform:rotate(0deg);
}
.work-promise__shafaat-ring--two { transform:rotate(68deg); }
.work-promise__shafaat-ring--three { transform:rotate(-68deg); }
.work-promise__art--shafaat:hover .work-promise__shafaat-ring--one { animation: promise-orbit-a 5s ease-in-out infinite alternate; }
.work-promise__art--shafaat:hover .work-promise__shafaat-ring--two { animation: promise-orbit-b 5s ease-in-out infinite alternate; }
@keyframes promise-orbit-a { to { transform:rotate(17deg); } }
@keyframes promise-orbit-b { to { transform:rotate(85deg); } }
.work-promise__art-label {
  position:absolute;
  bottom:clamp(16px,2.5vw,29px);
  left:clamp(16px,2.5vw,29px);
  font-size:10px;
  color:#293b2c;
}
.work-promise__art--shafaat .work-promise__art-label {color:#edf7e7;}
.work-promise__profile-name {
  color:#121813;
  font-family:var(--font-sans);
  font-size:clamp(54px,5vw,92px);
  font-variation-settings:"wdth" 78, "wght" 500;
  line-height:1.05;
  letter-spacing:-.045em;
  margin:22px 0 8px;
}
.work-promise__profile-role { color:#455648; }
.work-promise__profile-bio {
  max-width:43ch;
  color:#627065;
  font-size:clamp(17px,1.25vw,21px);
  line-height:1.65;
  margin-top:23px;
}
.work-promise [data-promise-story-item] {
  opacity:0;
  transform:translate3d(0,32px,0);
  will-change:transform,opacity;
}
@media(max-width:1100px) {
 .work-promise__copy { padding-top:100px; padding-bottom:90px; }
 .work-promise__story-heading { font-size:clamp(54px,7vw,90px); }
 .work-promise__profile-name { font-size:clamp(47px,5.6vw,72px); }
}
@media(max-width:760px) {
 .work-promise__copy { padding: var(--promise-mobile-pad-top, 100px) var(--spacing-gutter) var(--promise-mobile-pad-bottom, 90px); }
 .work-promise__story-pane { border-left:0;border-top:1px solid #17332329; transform:translate3d(0,var(--promise-story-shift),0); }
 .work-promise__story-track { padding:48px 24px 56px; }
 .work-promise__story-intro { min-height:clamp(220px,28svh,290px); }
 .work-promise__story-heading { font-size:clamp(51px,14vw,76px); }
 .work-promise__profile-name { font-size:clamp(44px,13vw,68px); }
 .work-promise__profile-bio { font-size:16px;margin-top:16px;line-height:1.55; }
 .work-promise__art { min-height:170px;aspect-ratio:1.6/1; }
 .work-promise__shafaat-orbit { width:48%;left:26%; }
 .work-promise__profile { padding-bottom:95px; }
}
@media(max-width:700px) {
 .work-promise__copy { padding-bottom:var(--promise-mobile-pad-bottom,75px); }
}
/* At reduced motion, remove scroll pinning completely so the text and profiles
   remain accessible with normal page scrolling. */
@media(prefers-reduced-motion:reduce) {
 .work-promise { height:auto!important;min-height:0!important; }
 .work-promise__sticky { height:auto;min-height:0;position:static;overflow:visible; }
 .work-promise__copy { position:relative;width:100%!important;height:auto!important;min-height:80svh;transform:none!important; }
 .work-promise__headline { font-size:clamp(34px,5.2vw,84px); }
 .work-promise__story-pane {position:relative;top:auto;width:100%;height:auto;transform:none!important;overflow:visible;border-left:0;border-top:1px solid #17332329;}
 .work-promise__story-track {position:relative;transform:none!important;}
 .work-promise [data-promise-story-item] {opacity:1!important;transform:none!important;}
 .work-promise__blanca-grid {transition:none;}
 .work-promise__shafaat-ring {animation:none!important;}
}
html[data-motion="off"] .work-promise {height:auto!important;min-height:0!important;}
html[data-motion="off"] .work-promise__sticky {height:auto;min-height:0;position:static;overflow:visible;}
html[data-motion="off"] .work-promise__copy {position:relative;width:100%!important;height:auto!important;min-height:80svh;transform:none!important;}
html[data-motion="off"] .work-promise__story-pane {position:relative;top:auto;width:100%;height:auto;transform:none!important;overflow:visible;border-left:0;border-top:1px solid #17332329;}
html[data-motion="off"] .work-promise__story-track {position:relative;transform:none!important;}
html[data-motion="off"] .work-promise [data-promise-story-item] {opacity:1!important;transform:none!important;}

/* APPROVED LAYOUT POLISH — only the four explicitly requested corrections. */
.hero__top { min-height: 1lh; }
.hero__intro { min-height: 3lh; }
/* The original hero copy occupied different numbers of lines at each breakpoint.
   Match those empty reserved boxes, so removing the text does not change the
   hero, kinetic title placement, bottom controls, or pinning. */
@media (min-width: 701px) and (max-width: 1380px) {
  .hero__intro { min-height: 4lh; }
}
@media (min-width: 701px) and (max-width: 920px) {
  .hero__intro { min-height: 5lh; }
}
@media (min-width: 701px) and (max-width: 755px) {
  .hero__intro { min-height: 6lh; }
}
@media (max-width: 700px) {
  .hero__intro { min-height: 3lh; }
}
@media (max-width: 680px) {
  .hero__intro { min-height: 4lh; }
}
@media (max-width: 540px) {
  .hero__intro { min-height: 5lh; }
}
@media (max-width: 345px) {
  .hero__intro { min-height: 6lh; }
}
@media (max-width: 370px) {
  .hero__top { min-height: 2lh; }
}

/* Consistent handoff from the final split-story panel into Selected Work.
   Leave the gallery and its internal components entirely unchanged. */
.page-sections > .page-section:nth-child(4) > .selected-work {
  padding-top: clamp(64px, 8svh, 110px);
}


/* ONE IDEA / EVERY LAYER — the only new section, directly before Selected Work.
   Scoped styles: the approved hero, promise, projects, and their animations are unchanged. */
.one-idea {
  --idea-enter-top: -105vw;
  --idea-enter-bottom: -105vw;
  --idea-top-opacity: 0;
  --idea-bottom-opacity: 0;
  --idea-text-lift: 0px;
  --idea-text-lift-top: 0px;
  --idea-text-lift-bottom: 0px;
  --idea-video-scale: .12;
  --idea-video-opacity: 0;
  --idea-video-radius: 18px;
  --idea-header-space: clamp(78px, 6.4vw, 92px);
  position: relative;
  height: 370svh; /* JS matches the actual viewport height and scroll distance. */
  background: var(--bs-paper);
  isolation: isolate;
}
.one-idea__stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--bs-paper);
  isolation: isolate;
}
.one-idea__heading {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  z-index: 2;
  pointer-events: none;
}
.one-idea__line {
  position: absolute;
  left: 50%;
  display: block;
  width: max-content;
  max-width: calc(100% - 2 * var(--spacing-gutter));
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: clamp(58px, 8.1vw, 142px);
  line-height: .96;
  letter-spacing: -.07em;
  font-variation-settings: "wdth" 80, "wght" 700;
  font-weight: 700;
  backface-visibility: hidden;
  will-change: transform, opacity;
}
.one-idea__line--top {
  top: calc(50% - clamp(12px, 1.7svh, 20px));
  color: #121813;
  opacity: var(--idea-top-opacity);
  transform: translate3d(calc(-50% + var(--idea-enter-top)), calc(-100% - var(--idea-text-lift-top)), 0);
}
.one-idea__line--bottom {
  top: calc(50% + clamp(12px, 1.7svh, 20px));
  color: #697c61;
  font-variation-settings: "wdth" 86, "wght" 630;
  font-style: italic;
  opacity: var(--idea-bottom-opacity);
  transform: translate3d(calc(-50% + var(--idea-enter-bottom)), var(--idea-text-lift-bottom), 0);
}
.one-idea__media {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: var(--idea-header-space);
  bottom: 0;
  overflow: hidden;
  opacity: var(--idea-video-opacity);
  transform: scale(var(--idea-video-scale));
  transform-origin: 50% 50%;
  border-radius: var(--idea-video-radius);
  background: #e6e8e3;
  pointer-events: none;
  will-change: transform, opacity, border-radius;
}
.one-idea__video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
/* Only while this new viewport-filling chapter is active: keep its full-bleed
   video unobstructed. Fixed navigation reappears as the next section enters. */
html:has(.one-idea) .header {
  transition: color .3s ease, background .3s ease, opacity .3s ease;
}
html.one-idea--immersive .header {
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 760px) {
  .one-idea__line {
    font-size: clamp(39px, 11.2vw, 85px);
    letter-spacing: -.065em;
  }
}
@media (max-width: 370px) {
  .one-idea__line { font-size: clamp(36px, 10.8vw, 43px); }
}
html:not([data-js]) .one-idea { height: auto !important; }
html:not([data-js]) .one-idea__stage { position: relative; height: auto; overflow: visible; }
html:not([data-js]) .one-idea__heading { position: relative; inset: auto; padding: 130px var(--spacing-gutter) 70px; }
html:not([data-js]) .one-idea__line { position: static; opacity: 1 !important; transform: none !important; white-space: normal; }
html:not([data-js]) .one-idea__media { position: relative; inset: auto; height: auto; aspect-ratio: 16 / 9; opacity: 1 !important; transform: none !important; }
/* Respect the site's existing motion-off and OS reduced-motion modes.
   The clip stays silent, looping, and without visible controls. */
@media (prefers-reduced-motion: reduce) {
  .one-idea { height: auto !important; }
  .one-idea__stage { position: relative; height: auto; min-height: auto; overflow: visible; }
  .one-idea__heading { position: relative; inset: auto; padding: clamp(110px, 12vw, 175px) var(--spacing-gutter) clamp(50px, 8vw, 100px); }
  .one-idea__line { position: static; opacity: 1 !important; max-width: 100%; transform: none !important; white-space: normal; }
  .one-idea__media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; opacity: 1 !important; transform: none !important; border-radius: 0; }
}
html[data-motion="off"] .one-idea { height: auto !important; }
html[data-motion="off"] .one-idea__stage { position: relative; height: auto; min-height: auto; overflow: visible; }
html[data-motion="off"] .one-idea__heading { position: relative; inset: auto; padding: clamp(110px, 12vw, 175px) var(--spacing-gutter) clamp(50px, 8vw, 100px); }
html[data-motion="off"] .one-idea__line { position: static; opacity: 1 !important; max-width: 100%; transform: none !important; white-space: normal; }
html[data-motion="off"] .one-idea__media { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; opacity: 1 !important; transform: none !important; border-radius: 0; }

/* Seamless final-paragraph → One idea handoff. Only the new section's stage
   changes position during this short preroll; all approved panels are intact. */
.one-idea.one-idea--preroll .one-idea__stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100svh;
  background: transparent;
  pointer-events: none;
}


/* TECHNOLOGY / RESPONSIBILITY — inserted after the approved One Idea film and before Selected Work. */
.technology-section {
  --tech-title-opacity: 0;
  --tech-title-y: 42px;
  --tech-cards-opacity: 0;
  --tech-cards-y: 44px;
  --tech-track-x: 120px;
  position: relative;
  height: 520svh;
  background: var(--bs-paper);
  isolation: isolate;
}
.technology-section__stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  padding: calc(clamp(84px, 8vw, 104px) + clamp(26px, 3svh, 42px)) var(--spacing-gutter) clamp(32px, 4svh, 52px);
  display: grid;
  align-content: start;
  overflow: hidden;
}
.technology-section__intro {
  max-width: min(980px, 100%);
  opacity: var(--tech-title-opacity);
  transform: translate3d(0, var(--tech-title-y), 0);
  will-change: transform, opacity;
}
.technology-section__kicker {
  display: inline-flex;
  margin-bottom: clamp(16px, 2svh, 22px);
}
.technology-section__title {
  margin: 0;
  display: grid;
  gap: clamp(2px, .8svh, 10px);
  font-family: var(--font-sans);
  font-size: 75px;
  line-height: .92;
  letter-spacing: -.072em;
  font-variation-settings: "wdth" 80, "wght" 700;
  font-weight: 700;
  color: #121813;
}
.technology-section__title-line { display: block; }
/* Same scroll-driven 0.14-to-1 word reveal as the approved statement. */
.technology-section__word { opacity: .14; }
/* Keep a real word gap with the condensed Archivo tracking at every width. */
.technology-section__word + .technology-section__word { margin-left: .12em; }
html:not([data-js]) .technology-section__word,
html[data-motion="off"] .technology-section__word { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .technology-section__word { opacity: 1 !important; }
}
.technology-section__title-line--sage {
  color: #697c61;
  font-variation-settings: "wdth" 86, "wght" 630;
  font-style: italic;
}
.technology-section__summary {
  opacity: var(--tech-summary-opacity, 0);
  margin: clamp(26px, 3svh, 36px) 0 0;
  max-width: min(840px, 100%);
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.46;
  color: rgba(95, 111, 90, .96);
}
.technology-section__rail {
  margin-top: clamp(44px, 6svh, 74px);
  overflow: hidden;
  opacity: var(--tech-cards-opacity);
  transform: translate3d(0, var(--tech-cards-y), 0);
  will-change: transform, opacity;
}
.technology-section__cards {
  display: flex;
  gap: clamp(18px, 1.7vw, 28px);
  width: max-content;
  transform: translate3d(var(--tech-track-x), 0, 0);
  will-change: transform;
  padding-right: max(14vw, 120px);
}
.technology-card {
  width: clamp(280px, 31vw, 390px);
  min-height: clamp(298px, 41svh, 420px);
  padding: clamp(22px, 2.3vw, 30px);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(21, 31, 24, .98), rgba(17, 22, 19, .98));
  color: #ecf0e8;
  border: 1px solid rgba(131, 154, 125, .22);
  box-shadow: 0 22px 80px rgba(16, 24, 19, .15);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.technology-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(18px, 2svh, 26px);
}
.technology-card__index {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(233, 238, 230, .72);
}
.technology-card__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(111, 145, 100, .14);
  border: 1px solid rgba(135, 170, 124, .22);
  color: #cfe0cb;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.technology-card__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.04;
  letter-spacing: -.06em;
  color: #f3f6f0;
}
.technology-card__text {
  margin: clamp(18px, 2.2svh, 24px) 0 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.56;
  color: rgba(233, 238, 230, .82);
}
.technology-card__meta {
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #93a78c;
}
@media (max-width: 960px) {
  .technology-section { height: 660svh; }
  .technology-section__title { font-size: clamp(38px, 8.33vw, 75px); }
  .technology-section__summary { max-width: 22ch; }
  .technology-card { width: min(84vw, 360px); min-height: 332px; }
}
@media (max-width: 640px) {
  .technology-section__title { font-size: clamp(30px, 8.8vw, 56px); }
  .technology-section__stage { padding-top: calc(clamp(82px, 12vw, 96px) + clamp(18px, 2svh, 28px)); }
  .technology-section__rail { margin-top: clamp(32px, 5svh, 48px); }
  .technology-card { width: min(88vw, 340px); padding: 22px; }
}
html:not([data-js]) .technology-section,
html[data-motion="off"] .technology-section { height: auto !important; }
html:not([data-js]) .technology-section__stage,
html[data-motion="off"] .technology-section__stage { position: relative; min-height: auto; overflow: visible; }
html:not([data-js]) .technology-section__summary,
html[data-motion="off"] .technology-section__summary { opacity: 1 !important; }
html:not([data-js]) .technology-section__intro,
html[data-motion="off"] .technology-section__intro,
html:not([data-js]) .technology-section__rail,
html[data-motion="off"] .technology-section__rail { opacity: 1 !important; transform: none !important; }
html:not([data-js]) .technology-section__cards,
html[data-motion="off"] .technology-section__cards { width: auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); transform: none !important; padding-right: 0; }
@media (prefers-reduced-motion: reduce) {
  .technology-section { height: auto !important; }
  .technology-section__stage { position: relative; min-height: auto; overflow: visible; }
  .technology-section__intro, .technology-section__rail, .technology-section__summary { opacity: 1 !important; transform: none !important; }
  .technology-section__cards { width: auto; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); transform: none !important; padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 960px),
html[data-motion="off"] .technology-section__cards,
html:not([data-js]) .technology-section__cards {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}


/* Oct 24 — five narrowly scoped finishing corrections.
   All other sections, artwork, and motion remain at the prior approved baseline. */

/* 1–2: Remove only the central split divider and use the requested panel tone. */
.work-promise__story-pane {
  border-left: 0;
  background-color: #d0d0d0;
}

/* 3: Keep the selected-work media anchored to its existing column, not the pointer. */

/* 4: Dark contact footer with white headline, no changes to footer geometry. */
body > .footer {
  --color-bg: #111010;
  --color-text: #fff;
  --color-muted: #c9c9c7;
  --color-label: #c9c9c7;
  --color-hairline: #ffffff30;
  background-color: #111010;
  color: #fff;
}
body > .footer .footer__big,
body > .footer .footer__big .kinetic__letter { color: #fff; }

/* 5: Reduce only the Selected Work → Up Close inter-section space by 30%. */
.page-sections .selected-work {
  padding-bottom: clamp(56px, 9.8vh, 112px);
}
.page-sections .up-close {
  padding-top: clamp(42px, 7vh, 84px);
}

/* 6: Compact two-line mobile technology summary, leaving desktop unchanged. */
@media (max-width: 760px) {
  .technology-section__summary {
    font-size: 15px;
    line-height: 1.45;
    max-width: 100%;
    text-wrap: pretty;
  }
}