/* ===== Multi-page extension + front-end motion ===== */
:root { --page-pad: clamp(1.25rem, 7vw, 8rem); }
body.arko-inner-page { cursor: none; }
.arko-progress { position: fixed; top:0; left:0; width:0; height:2px; background:var(--warm-amber); z-index:10050; pointer-events:none; }
.arko-page-wash { position:fixed; inset:0; z-index:10040; pointer-events:none; background:var(--cinema-black); transform:translateY(-100%); }
.nav.arko-nav-solid { mix-blend-mode:normal; background:linear-gradient(to bottom, rgba(10,10,12,.94), rgba(10,10,12,.72), transparent); }
.nav-links a.current-page { color:var(--warm-amber); }
.inner-hero { min-height:78vh; position:relative; display:flex; align-items:flex-end; overflow:hidden; padding:11rem var(--page-pad) 6rem; background:var(--cinema-black); }
.inner-hero-media { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); }
.inner-hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(10,10,12,.97) 5%, rgba(10,10,12,.72) 48%, rgba(10,10,12,.25) 100%), linear-gradient(to top, var(--cinema-black), transparent 45%); }
.inner-hero-grid { position:absolute; inset:0; opacity:.08; background-image:linear-gradient(rgba(245,230,204,.28) 1px, transparent 1px),linear-gradient(90deg, rgba(245,230,204,.28) 1px, transparent 1px); background-size:12.5vw 12.5vw; }
.inner-hero-content { position:relative; z-index:3; max-width:1050px; }
.inner-kicker { font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--warm-amber); margin-bottom:1.25rem; }
.inner-title { font-family:var(--font-display); font-size:clamp(3.4rem, 9vw, 9rem); line-height:.84; letter-spacing:-.055em; text-transform:uppercase; }
.inner-title em { font-family:var(--font-accent); font-weight:400; color:var(--warm-amber); text-transform:none; }
.inner-lede { max-width:730px; margin-top:2rem; color:var(--film-grain); font-size:clamp(1rem,1.5vw,1.25rem); line-height:1.8; }
.page-section { position:relative; padding:clamp(5rem, 9vw, 9rem) var(--page-pad); background:var(--cinema-black); }
.page-section.alt { background:var(--deep-shadow); }
.page-section.soft { background:var(--mid-tone); }
.section-shell { max-width:1400px; margin:0 auto; }
.section-topline { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.55fr); gap:4rem; align-items:end; margin-bottom:clamp(3rem,6vw,6rem); }
.section-display { font-family:var(--font-display); font-size:clamp(2.6rem,6vw,6.3rem); line-height:.92; letter-spacing:-.045em; }
.section-display .accent { color:var(--warm-amber); font-family:var(--font-accent); font-style:italic; font-weight:400; }
.section-copy { color:var(--film-grain); line-height:1.85; font-size:.98rem; max-width:650px; }
.section-copy + .section-copy { margin-top:1.25rem; }
.motion-rule { width:80px; height:2px; background:var(--warm-amber); margin:1.5rem 0 2rem; transform-origin:left; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(201,146,74,.17); border:1px solid rgba(201,146,74,.17); }
.feature-card { background:var(--cinema-black); padding:clamp(1.6rem,3vw,3rem); min-height:280px; position:relative; overflow:hidden; transition:transform .5s cubic-bezier(.2,.7,.2,1), background .4s ease; }
.feature-card:hover { background:#111116; }
.feature-index { font-family:var(--font-display); font-size:.65rem; letter-spacing:.2em; color:var(--warm-amber); }
.feature-card h3 { font-family:var(--font-display); font-size:clamp(1.5rem,2.2vw,2.4rem); line-height:1.05; margin:4rem 0 1rem; }
.feature-card p { color:var(--film-grain); line-height:1.75; font-size:.9rem; }
.feature-arrow { position:absolute; right:1.5rem; bottom:1.5rem; font-size:1.5rem; color:var(--warm-amber); transition:transform .35s ease; }
.feature-card:hover .feature-arrow { transform:translate(6px,-6px); }
.split-story { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,7vw,8rem); align-items:center; }
.story-image { position:relative; min-height:650px; overflow:hidden; }
.story-image img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; filter:var(--grade-cinematic); transform:scale(1.05); }
.story-image::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(201,146,74,.18); pointer-events:none; }
.story-image .frame-mark { position:absolute; inset:1.25rem; border:1px solid rgba(245,230,204,.22); z-index:2; }
.story-stack { display:grid; gap:2rem; }
.story-block { padding:0 0 2rem; border-bottom:1px solid rgba(201,146,74,.16); }
.story-block small { display:block; color:var(--warm-amber); letter-spacing:.22em; text-transform:uppercase; margin-bottom:.75rem; }
.story-block h3 { font-family:var(--font-display); font-size:clamp(1.6rem,3vw,3rem); margin-bottom:.75rem; }
.story-block p { color:var(--film-grain); line-height:1.8; }
.timeline { border-top:1px solid rgba(201,146,74,.2); }
.timeline-row { display:grid; grid-template-columns:150px 1fr 1fr; gap:2rem; padding:2rem 0; border-bottom:1px solid rgba(201,146,74,.14); align-items:start; }
.timeline-year { color:var(--warm-amber); font-family:var(--font-display); font-size:1.2rem; }
.timeline-row h3 { font-family:var(--font-display); font-size:1.35rem; }
.timeline-row p { color:var(--film-grain); line-height:1.65; }
.marquee { overflow:hidden; border-block:1px solid rgba(201,146,74,.18); background:var(--deep-shadow); }
.marquee-track { display:flex; width:max-content; gap:3rem; padding:1.1rem 0; animation:arkoMarquee 28s linear infinite; }
.marquee-track span { font-family:var(--font-display); font-size:.72rem; letter-spacing:.25em; text-transform:uppercase; white-space:nowrap; color:var(--film-grain); }
.marquee-track b { color:var(--warm-amber); font-weight:400; }
@keyframes arkoMarquee { to { transform:translateX(-50%); } }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.gallery-shot { position:relative; overflow:hidden; min-height:280px; background:var(--mid-tone); }
.gallery-shot:nth-child(1),.gallery-shot:nth-child(4){ grid-column:span 7; min-height:520px; }
.gallery-shot:nth-child(2),.gallery-shot:nth-child(3){ grid-column:span 5; }
.gallery-shot img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter:var(--grade-cinematic); }
.gallery-shot:hover img { transform:scale(1.06); filter:var(--grade-warm); }
.gallery-shot figcaption { position:absolute; left:1.25rem; bottom:1.25rem; z-index:2; background:rgba(10,10,12,.76); padding:.55rem .8rem; color:var(--architectural-white); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; }
.film-list-pro { border-top:1px solid rgba(201,146,74,.2); }
.film-row-pro { display:grid; grid-template-columns:110px 1fr 1fr 44px; gap:2rem; padding:2.3rem 0; border-bottom:1px solid rgba(201,146,74,.14); align-items:center; transition:padding .35s ease, background .35s ease; }
.film-row-pro:hover { padding-left:1rem; padding-right:1rem; background:rgba(201,146,74,.035); }
.film-row-pro .yr { color:var(--warm-amber); font-family:var(--font-display); }
.film-row-pro h3 { font-family:var(--font-display); font-size:clamp(1.55rem,3vw,3.2rem); line-height:1; }
.film-row-pro .roles { color:var(--film-grain); line-height:1.6; }
.film-row-pro .arr { color:var(--warm-amber); font-size:1.4rem; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(201,146,74,.15); }
.process-step { background:var(--deep-shadow); padding:2.3rem; min-height:330px; }
.process-step .num { color:var(--warm-amber); font-family:var(--font-display); font-size:.7rem; letter-spacing:.16em; }
.process-step h3 { font-family:var(--font-display); margin:5rem 0 1rem; font-size:1.75rem; }
.process-step p { color:var(--film-grain); line-height:1.75; font-size:.9rem; }
.quote-panel { position:relative; padding:clamp(4rem,8vw,8rem); overflow:hidden; background:var(--mid-tone); }
.quote-panel blockquote { max-width:1000px; font-family:var(--font-accent); font-size:clamp(2.1rem,5vw,5.4rem); line-height:1.08; color:var(--architectural-white); position:relative; z-index:2; }
.quote-panel blockquote span { color:var(--warm-amber); }
.quote-panel .quote-ghost { position:absolute; right:-.02em; bottom:-.3em; font-size:32vw; font-family:var(--font-display); color:rgba(201,146,74,.035); line-height:1; }
.contact-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(201,146,74,.16); }
.contact-card { background:var(--cinema-black); padding:2.5rem; min-height:260px; }
.contact-card .label { color:var(--warm-amber); text-transform:uppercase; letter-spacing:.2em; font-size:.65rem; }
.contact-card h3 { font-family:var(--font-display); font-size:1.8rem; margin:3.5rem 0 .8rem; }
.contact-card a,.contact-card p { color:var(--film-grain); line-height:1.8; text-decoration:none; }
.contact-card a:hover { color:var(--warm-amber); }
.cta-band { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:clamp(2rem,5vw,5rem); border:1px solid rgba(201,146,74,.2); background:linear-gradient(115deg, rgba(201,146,74,.12), rgba(42,123,139,.06)); }
.cta-band h2 { font-family:var(--font-display); font-size:clamp(2rem,4.5vw,5rem); max-width:800px; line-height:.95; }
.arko-button { display:inline-flex; align-items:center; gap:.8rem; padding:1rem 1.35rem; border:1px solid var(--warm-amber); color:var(--architectural-white); text-decoration:none; text-transform:uppercase; font-size:.66rem; letter-spacing:.18em; white-space:nowrap; transition:background .3s ease,color .3s ease,transform .3s ease; }
.arko-button:hover { background:var(--warm-amber); color:var(--cinema-black); }
.page-portal { padding:clamp(5rem,9vw,9rem) 8vw; background:var(--deep-shadow); }
.page-portal-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(201,146,74,.18); border:1px solid rgba(201,146,74,.18); margin-top:3rem; }
.page-portal-card { min-height:340px; background:var(--cinema-black); color:inherit; text-decoration:none; padding:2rem; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden; }
.page-portal-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(201,146,74,.17), transparent 38%); opacity:0; transition:opacity .35s ease; }
.page-portal-card:hover::before { opacity:1; }
.page-portal-card small,.page-portal-card h3,.page-portal-card p,.page-portal-card span { position:relative; z-index:2; }
.page-portal-card small { color:var(--warm-amber); letter-spacing:.2em; text-transform:uppercase; }
.page-portal-card h3 { font-family:var(--font-display); font-size:2rem; margin-top:auto; margin-bottom:1rem; }
.page-portal-card p { color:var(--film-grain); line-height:1.65; font-size:.85rem; }
.page-portal-card span { margin-top:1.2rem; color:var(--warm-amber); }
[data-reveal="clip"] { clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.2,.75,.2,1); }
[data-reveal="clip"].is-visible { clip-path:inset(0 0 0 0); }
[data-reveal="up"] { opacity:0; transform:translateY(42px); transition:opacity .8s ease,transform .9s cubic-bezier(.2,.75,.2,1); }
[data-reveal="up"].is-visible { opacity:1; transform:none; }
[data-reveal="line"] { transform:scaleX(0); transition:transform 1s cubic-bezier(.2,.75,.2,1); transform-origin:left; }
[data-reveal="line"].is-visible { transform:scaleX(1); }
.parallax-media { will-change:transform; }
@media (max-width: 980px){
  .section-topline,.split-story{grid-template-columns:1fr;}
  .feature-grid,.contact-cards{grid-template-columns:1fr 1fr;}
  .process-grid,.page-portal-grid{grid-template-columns:1fr 1fr;}
  .timeline-row{grid-template-columns:100px 1fr;}.timeline-row p{grid-column:2;}
  .film-row-pro{grid-template-columns:80px 1fr 44px}.film-row-pro .roles{grid-column:2}.film-row-pro .arr{grid-column:3;grid-row:1/3;}
  .story-image{min-height:520px;}
}
@media (max-width: 640px){
  .inner-hero{min-height:68vh;padding-top:9rem;}
  .feature-grid,.contact-cards,.process-grid,.page-portal-grid{grid-template-columns:1fr;}
  .gallery-shot,.gallery-shot:nth-child(n){grid-column:1/-1;min-height:300px;}
  .timeline-row{grid-template-columns:1fr;gap:.6rem}.timeline-row p{grid-column:1;}
  .film-row-pro{grid-template-columns:65px 1fr 30px;gap:1rem}.film-row-pro .roles{grid-column:2;}
  .cta-band{align-items:flex-start;flex-direction:column;}
  body.arko-inner-page{cursor:auto}.cursor,.cursor-dot{display:none!important;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}.marquee-track{animation:none!important}[data-reveal]{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}.parallax-media{transform:none!important}.film-grain{animation:none!important}
}

/* ===== Performance + responsive pass 2.1 ===== */
html, body { max-width: 100%; }
img { display:block; max-width:100%; }
.film-grain { animation:none !important; opacity:.018; transform:none !important; }
.hero-bg { background-attachment:scroll !important; background-image:linear-gradient(135deg,rgba(10,10,12,.88) 0%,rgba(20,20,24,.78) 40%,rgba(30,30,36,.68) 60%,rgba(10,10,12,.92) 100%),url('../../images/optimized/arko-london-award.webp') !important; }
.architecture { background-attachment:scroll !important; }
.parallax-media { will-change:auto; }
[data-tilt], [data-magnetic] { will-change:auto; }

@media (hover:none), (pointer:coarse) {
  body, body.arko-inner-page { cursor:auto !important; }
  .cursor,.cursor-dot { display:none !important; }
  .feature-card,.page-portal-card,.contact-card,[data-tilt],[data-magnetic] { transform:none !important; }
}

@media (max-width: 1024px) {
  :root { --space-lg:3rem; --space-xl:5.5rem; --page-pad:clamp(1.15rem,5vw,3.5rem); }
  .film-grain { display:none !important; }
  .vignette { opacity:.55; }
  .hero,.inner-hero { min-height:100svh; }
  .hero { height:auto; }
  .hero-bg,.inner-hero-media { background-attachment:scroll !important; transform:none !important; }
  .nav { padding:1.2rem 1.5rem; mix-blend-mode:normal; background:linear-gradient(to bottom,rgba(10,10,12,.92),rgba(10,10,12,.58),transparent); }
  .nav-links { gap:1.4rem; }
  .about-visual { min-height:440px; height:55svh; max-height:620px; }
  .arch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; grid-template-rows:none !important; gap:1rem; }
  .arch-item,.arch-item:nth-child(n) { grid-column:auto !important; grid-row:auto !important; display:block !important; min-height:260px; }
  .arch-item:nth-child(1) { grid-column:1/-1 !important; min-height:340px; }
  .film-roles { display:block !important; }
  .story-image { min-height:480px; }
  .process-step,.feature-card,.page-portal-card,.contact-card { min-height:0; }
  .page-section,.page-portal { padding-top:clamp(4rem,7vw,6rem); padding-bottom:clamp(4rem,7vw,6rem); }
}

@media (max-width: 768px) {
  :root { --space-md:1.35rem; --space-lg:2.5rem; --space-xl:4.25rem; }
  html { scroll-padding-top:72px; }
  .nav { padding:1rem 1.1rem; }
  .nav-logo { font-size:1.25rem; }
  .nav-links { height:100dvh; padding:5.5rem 1.25rem 2rem; overflow-y:auto; z-index:1000; }
  .nav-links a { font-size:.95rem; }
  .hamburger { min-width:44px; min-height:44px; align-items:center; justify-content:center; }
  .hero { min-height:100svh; align-items:center; padding-block:5.5rem 3rem; }
  .hero-content { padding:0 1.15rem; }
  .hero-title { font-size:clamp(2.65rem,15vw,5rem); line-height:.91; overflow-wrap:anywhere; }
  .hero-label { font-size:.65rem; letter-spacing:.2em; margin-bottom:1.2rem; }
  .hero-subtitle { font-size:.96rem; line-height:1.65; max-width:38rem; }
  .letterbox-top,.letterbox-bottom { height:3.5vh; }
  .scroll-indicator { display:none; }
  .grid-lines { opacity:.035; }
  .about,.filmography-header,.films-container,.architecture,.credentials,.contact,.footer { padding-left:1.15rem !important; padding-right:1.15rem !important; }
  .about { padding-top:4rem; padding-bottom:4rem; }
  .about-grid { gap:2.25rem; }
  .about-visual { min-height:0; height:auto; aspect-ratio:4/5; max-height:none; }
  .portrait-container { inset:1.4rem; }
  .vertical-text { display:none; }
  .about-heading,.filmography-title,.architecture-title,.credentials-title { overflow-wrap:anywhere; }
  .about-stats { grid-template-columns:1fr !important; gap:.75rem !important; }
  .stat { padding:1rem 0; border-bottom:1px solid rgba(201,146,74,.13); }
  .filmography-header { grid-template-columns:1fr !important; display:grid; gap:1.5rem; align-items:start; }
  .filmography-header > div:last-child { align-items:flex-start !important; }
  .film-card { grid-template-columns:52px minmax(0,1fr) !important; gap:.8rem 1rem !important; padding:1.35rem 0; align-items:start; }
  .film-year { grid-column:1; grid-row:1/3; }
  .film-info { min-width:0; }
  .film-title { overflow-wrap:anywhere; font-size:clamp(1.25rem,7vw,2rem); }
  .film-roles { grid-column:2; display:block !important; font-size:.8rem; line-height:1.55; text-align:left; }
  .arch-grid { grid-template-columns:1fr !important; }
  .arch-item,.arch-item:nth-child(n) { grid-column:1 !important; min-height:270px; }
  .architecture-header { display:grid !important; grid-template-columns:1fr !important; gap:1rem; }
  .credentials-grid,.contact-content { gap:1.25rem; }
  .social-links { flex-wrap:wrap; }
  .inner-hero { min-height:72svh; padding:8.5rem 1.15rem 4rem; align-items:flex-end; }
  .inner-title { font-size:clamp(2.65rem,14vw,5.5rem); line-height:.9; overflow-wrap:anywhere; }
  .inner-lede { margin-top:1.25rem; font-size:.96rem; line-height:1.65; }
  .page-section,.page-portal { padding-left:1.15rem; padding-right:1.15rem; }
  .section-topline { gap:1.5rem; margin-bottom:2.5rem; }
  .section-display { font-size:clamp(2.25rem,12vw,4rem); overflow-wrap:anywhere; }
  .feature-grid,.contact-cards,.process-grid,.page-portal-grid { grid-template-columns:1fr !important; }
  .feature-card,.contact-card,.process-step,.page-portal-card { padding:1.4rem; min-height:0; }
  .feature-card h3 { margin:2.5rem 0 .8rem; }
  .contact-card h3 { margin:2.5rem 0 .8rem; }
  .process-step h3 { margin:2.8rem 0 .8rem; }
  .page-portal-card { min-height:245px; }
  .split-story { gap:2rem; }
  .story-image { min-height:0; aspect-ratio:4/5; }
  .timeline-row { padding:1.35rem 0; }
  .film-row-pro { grid-template-columns:55px minmax(0,1fr) 26px !important; gap:.7rem; padding:1.35rem 0; }
  .film-row-pro h3 { overflow-wrap:anywhere; }
  .film-row-pro .roles { grid-column:2 !important; display:block !important; font-size:.84rem; }
  .gallery-grid { grid-template-columns:1fr !important; }
  .gallery-shot,.gallery-shot:nth-child(n) { grid-column:1 !important; min-height:0; aspect-ratio:4/3; }
  .quote-panel { padding:3rem 1.15rem; }
  .quote-panel blockquote { font-size:clamp(2rem,10vw,3.4rem); }
  .cta-band { padding:1.5rem; }
  .cta-band h2 { font-size:clamp(2rem,10vw,3.6rem); }
  .arko-button { white-space:normal; text-align:center; justify-content:center; width:100%; }
  .footer { padding-top:1.4rem; padding-bottom:1.4rem; }
}

@media (max-width: 420px) {
  .hero-title { font-size:clamp(2.35rem,14.5vw,3.9rem); }
  .hero-subtitle { font-size:.9rem; }
  .inner-title { font-size:clamp(2.35rem,13.5vw,4rem); }
  .film-card { grid-template-columns:1fr !important; }
  .film-year,.film-info,.film-roles { grid-column:1 !important; grid-row:auto !important; }
  .film-year { margin-bottom:.2rem; }
  .film-row-pro { grid-template-columns:1fr 24px !important; }
  .film-row-pro .yr,.film-row-pro h3,.film-row-pro .roles { grid-column:1 !important; }
  .film-row-pro .arr { grid-column:2 !important; grid-row:1/4 !important; }
  .about-stats { grid-template-columns:1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .film-grain,.marquee-track { animation:none !important; }
}