/* SR GLOBAL / REFERENCE-LED CINEMATIC EDITION.
   Layout language: centered editorial headline, inline footage, brand rail,
   horizontal filmstrip and sticky copy paired with dominant moving media.
   All colour values are taken from the supplied SR Global source ZIP. */
:root { --ref-paper:#f7f7f4; --ref-silver:#e9eaec; --ref-red:#e60012; --ref-deep:#98000e; --ref-ink:#17191b; --ref-rule:#d5d6cf; --ref-ease:cubic-bezier(.16,1,.3,1); }
body { background:var(--ref-paper); }
.site-header { background:rgba(247,247,244,.96); border-bottom:0; height:80px; min-height:80px; padding-inline:clamp(20px,3.5vw,64px); }
.site-header .brand { width:197px; }
.site-header .desktop-nav { position:absolute; left:50%; transform:translateX(-50%); margin:0; gap:27px; }
.site-header .desktop-nav a { font-weight:600; font-size:clamp(14px,1vw,16px); letter-spacing:-.025em; }
.site-header .header-cta { color:var(--ref-ink); border:0; background:var(--ref-silver); padding:13px 15px; border-radius:6px; font-weight:600; font-size:14px; gap:14px; transition:background .3s,transform .3s; }
.site-header .header-cta:hover { background:var(--ref-red); color:#fff; transform:translateY(-2px); }
.site-header .header-cta .arrow { width:16px; height:16px; color:var(--ref-red); }
.site-header .header-cta:hover .arrow { color:#fff; }
body[data-page="home"] .water-hero.eh-hero { padding:0 clamp(20px,3.5vw,64px) 18px; background:var(--ref-paper); color:var(--ref-ink); overflow:hidden; }
.eh-layout { display:flex; flex-direction:column; max-width:1750px; align-items:stretch; gap:0; }
body[data-page="home"] .eh-hero .water-copy { width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; min-height:min(77vh,760px); padding:55px 18px 52px; margin:0; text-align:center; }
body[data-page="home"] .eh-hero .water-copy .eh-kicker { color:#51555a; margin:0 0 33px; }
body[data-page="home"] .eh-hero .water-copy h1 { font-family:Arial,Helvetica,sans-serif; font-size:clamp(44px,5.85vw,84px); font-weight:750; letter-spacing:-.075em; line-height:1.08; text-align:center; max-width:1170px; width:100%; margin:0 0 34px; }
body[data-page="home"] .eh-hero h1 span:not(.cinema-inline-clip) { color:var(--ref-ink); }
body[data-page="home"] .eh-hero h1 .cinema-accent { color:var(--ref-red)!important; }
.cinema-inline-clip { position:relative; display:inline-flex; vertical-align:middle; flex-shrink:0; width:clamp(115px,15.5vw,220px); height:clamp(59px,7.4vw,107px); margin:0 .1em .05em; overflow:hidden; border-radius:9px; background:var(--ref-ink); box-shadow:0 15px 28px rgba(23,25,27,.13); }
.cinema-inline-clip img, .cinema-inline-clip video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cinema-inline-clip video { opacity:0; transition:opacity .6s ease; }
.cinema-inline-clip.is-playing video { opacity:1; }
body[data-page="home"] .eh-hero .water-copy .eh-intro { font-size:clamp(16px,1.35vw,20px); line-height:1.5; color:#51575b; max-width:650px; margin:0 auto 24px; }
body[data-page="home"] .eh-actions { justify-content:center; margin:0; }
body[data-page="home"] .eh-hero .water-copy .eh-copy-note { font-size:11px; margin-top:23px; }
.cinema-hero-micro { display:flex; align-items:center; justify-content:center; gap:18px; font:11px/1.3 "Courier New",monospace; letter-spacing:.12em; text-transform:uppercase; margin-top:27px; color:#70747a; }
.cinema-hero-micro::before,.cinema-hero-micro::after { content:""; width:35px; height:1px; background:var(--ref-red); }
body[data-page="home"] .eh-visual { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.02fr); grid-template-rows:1fr 1fr; gap:12px; width:100%; height:clamp(510px,44vw,750px); margin:0; padding:0; }
body[data-page="home"] .eh-photo--main { grid-column:1; grid-row:1/span 2; border-radius:9px; }
body[data-page="home"] .eh-photo--detail { grid-column:2; grid-row:1; border-radius:9px; }
body[data-page="home"] .eh-red-panel { grid-column:2; grid-row:2; border-radius:9px; }
body[data-page="home"] .eh-photo figcaption { background:rgba(23,25,27,.7); border-left:0; border-radius:0 7px 0 0; left:12px; right:auto; bottom:13px; padding:9px 13px; }
body[data-page="home"] .eh-red-panel { justify-content:space-around; padding:clamp(25px,3vw,50px); }
body[data-page="home"] .eh-red-panel strong { font-size:clamp(27px,3vw,47px); }
body[data-page="home"] .eh-service-strip { display:flex; gap:11px; overflow-x:auto; scrollbar-width:thin; scroll-snap-type:x mandatory; padding:23px 0; margin:0; border:0; background:transparent; width:100%; }
body[data-page="home"] .eh-service { flex:1 0 260px; min-height:108px; border:1px solid var(--ref-rule)!important; border-radius:6px; background:var(--ref-silver); padding:22px 19px; scroll-snap-align:start; }
body[data-page="home"] .eh-service:hover { background:#fff; }
body[data-page="home"] .eh-service strong { font-size:16px; }
body[data-page="home"] .eh-service>span { color:#646970; }
body[data-page="home"] .eh-utility { max-width:none; padding:18px 0 23px; }
.cinema-filmstrip { padding:clamp(85px,9vw,150px) 0 clamp(65px,7vw,110px); background:var(--ref-paper); color:var(--ref-ink); overflow:hidden; }
.cinema-filmstrip-top { padding:0 clamp(20px,4vw,70px); display:flex; justify-content:space-between; align-items:end; gap:35px; margin-bottom:52px; }
.cinema-filmstrip-title p { font:12px/1.45 "Courier New",monospace; letter-spacing:.09em; color:#63666a; margin:0 0 24px; }
.cinema-filmstrip-title h2 { font-size:clamp(35px,4.8vw,68px); font-weight:650; line-height:1.08; letter-spacing:-.07em; }
.cinema-filmstrip-title h2 em { color:var(--ref-red); font-style:normal; }
.cinema-filmstrip-intro { max-width:350px; color:#5f6266; font-size:16px; }
.cinema-filmstrip-track { display:flex; align-items:stretch; gap:18px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scroll-padding-inline:clamp(20px,4vw,70px); padding:0 clamp(20px,4vw,70px) 22px; scrollbar-width:none; cursor:grab; }
.cinema-filmstrip-track::-webkit-scrollbar { display:none; }
.cinema-filmstrip-track.is-dragging { cursor:grabbing; user-select:none; scroll-snap-type:none; }
.cinema-film-card { flex:0 0 min(69vw,980px); display:block; position:relative; overflow:hidden; aspect-ratio:1.85; min-width:0; border-radius:9px; background:var(--ref-ink); color:#fff; scroll-snap-align:center; isolation:isolate; }
.cinema-film-card .cinema-film-image,.cinema-film-card .cinema-film-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ref-ease),opacity .7s; }
.cinema-film-card .cinema-film-image { z-index:0; }
.cinema-film-card .cinema-film-video { z-index:1; opacity:0; }
.cinema-film-card.video-ready .cinema-film-video { opacity:1; }
.cinema-film-card:hover .cinema-film-video,.cinema-film-card:hover .cinema-film-image { transform:scale(1.04); }
.cinema-film-card::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,rgba(10,11,11,.68)); z-index:2; pointer-events:none; }
.cinema-film-info { position:absolute; z-index:3; left:clamp(24px,3vw,47px); right:clamp(24px,3vw,47px); bottom:clamp(25px,3vw,47px); display:flex; align-items:end; justify-content:space-between; gap:20px; }
.cinema-film-info strong { display:block; font-size:clamp(26px,3.7vw,58px); line-height:1.06; font-weight:650; letter-spacing:-.06em; }
.cinema-film-info small { font:12px/1.4 "Courier New",monospace; letter-spacing:.1em; display:block; margin-bottom:12px; }
.cinema-film-link { display:flex; align-items:center; justify-content:center; gap:10px; font-size:14px; font-weight:650; color:var(--ref-ink); background:#fff; border-radius:6px; padding:16px 19px; white-space:nowrap; transition:background .3s,transform .3s; }
.cinema-film-card:hover .cinema-film-link { transform:translateY(-4px); background:var(--ref-red); color:#fff; }
.cinema-film-controls { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; padding:25px clamp(20px,4vw,70px) 0; }
.cinema-film-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cinema-film-filter button { padding:9px 15px; border-radius:5px; font-size:13px; line-height:1.2; font-weight:600; background:var(--ref-silver); color:var(--ref-ink); transition:background .3s; }
.cinema-film-filter button[aria-pressed=true] { background:var(--ref-red); color:#fff; }
.cinema-film-filter button:hover { background:#d5d6cf; }
.cinema-film-filter button[aria-pressed=true]:hover { background:var(--ref-red); }
.cinema-film-nav { display:flex; align-items:center; gap:10px; }
.cinema-film-nav button { width:47px; height:47px; border:1px solid var(--ref-rule); border-radius:50%; font-size:21px; transition:background .2s; }
.cinema-film-nav button:hover { background:var(--ref-red); color:#fff; }
.cinema-film-counter { font:13px "Courier New",monospace; padding:0 16px; white-space:nowrap; }
#capabilities.br-section--dark { background:var(--ref-paper); color:var(--ref-ink); border-top:1px solid var(--ref-rule); }
#capabilities .br-heading>p { color:#61656a; }
#capabilities .br-kicker { color:#676b70; }
#capabilities .br-service-nav { display:flex; flex-wrap:wrap; gap:9px; border:0; background:transparent; margin:0 0 25px; }
#capabilities .br-service-nav a { border:1px solid var(--ref-rule)!important; border-radius:5px; padding:11px 16px!important; font-size:13px; background:var(--ref-silver); color:var(--ref-ink); }
#capabilities .br-service-nav a:hover,#capabilities .br-service-nav a[aria-current=location] { background:var(--ref-red); border-color:var(--ref-red)!important; color:#fff; }
#capabilities .br-service-nav a span { color:inherit; }
#capabilities .br-engineering-feature { display:grid; grid-template-columns:minmax(280px,.73fr) minmax(0,1.27fr); gap:clamp(34px,5vw,98px); align-items:start; min-height:min(860px,93vh); padding:clamp(60px,8vw,125px) 0; margin:0; border:0; border-bottom:1px solid var(--ref-rule); background:transparent; border-radius:0; overflow:visible; }
#capabilities .br-feature-copy { order:0; grid-column:1; grid-row:1; position:sticky; top:115px; min-height:0; padding:22px 0 0; display:block; align-self:start; color:var(--ref-ink); }
#capabilities .br-feature-image,#capabilities .br-engineering-feature:nth-of-type(even) .br-feature-image { order:0; grid-column:2; grid-row:1; position:relative; align-self:start; width:100%; height:min(74vh,725px); min-height:460px; border-radius:10px; overflow:hidden; box-shadow:0 16px 60px rgba(23,25,27,.09); }
#capabilities .br-feature-image img { max-height:none; height:100%; }
#capabilities .br-feature-copy .br-kicker { color:var(--ref-red); font-size:12px; font-weight:650; margin-bottom:28px; }
#capabilities .br-feature-copy h3 { font-size:clamp(32px,3.9vw,58px); font-weight:650; color:var(--ref-ink); letter-spacing:-.06em; margin:0 0 24px; }
#capabilities .br-feature-copy>p:not(.br-kicker) { color:#66696d; max-width:44ch; line-height:1.55; font-size:16px; }
#capabilities .br-scope { display:grid; grid-template-columns:1fr 1fr; margin:35px 0 24px; gap:0 14px; }
#capabilities .br-scope li { color:var(--ref-ink); font-size:13px; border-color:var(--ref-rule); }
#capabilities .br-scope li::before { background:var(--ref-red); }
#capabilities .br-feature-copy .br-link { color:var(--ref-ink); border:1px solid var(--ref-rule); padding:14px 18px; border-radius:6px; font-size:14px; }
#capabilities .br-feature-copy .br-link:hover { color:#fff; background:var(--ref-red); border-color:var(--ref-red); }
#capabilities .br-engineering-feature .cinema-index { border:0; background:rgba(23,25,27,.6); }
.cinema-view-project { position:absolute; bottom:25px; right:25px; z-index:6; color:var(--ref-ink); background:#fff; border-radius:6px; font-size:14px; font-weight:650; padding:15px 20px; box-shadow:0 8px 30px rgba(0,0,0,.14); transition:transform .3s var(--ref-ease),background .2s; }
.cinema-view-project:hover { background:var(--ref-red); color:#fff; transform:translateY(-4px); }
#capabilities .br-feature-image figcaption { bottom:25px; left:25px; border-radius:6px; padding:11px 16px; }
.br-band { background:var(--ref-red); }
.br-section--silver { background:var(--ref-silver); }
.br-section--dark:not(#capabilities) { background:var(--ref-ink); }
.br-client-grid .br-client { transition:transform .6s var(--ref-ease); }
.br-client:hover { transform:translateY(-8px); }
.project-cta { padding-block:clamp(65px,8vw,115px); }
.project-cta .cta-heading { font-size:clamp(42px,6vw,86px); max-width:960px; }
@media (max-width:1200px) {
  .site-header .desktop-nav { position:static; transform:none; margin-left:auto; }
  #capabilities .br-engineering-feature { grid-template-columns:minmax(250px,.85fr) minmax(0,1.15fr); gap:42px; }
  #capabilities .br-feature-image { min-height:490px; }
}
@media (max-width:900px) {
  body[data-page="home"] .eh-hero .water-copy { min-height:68vh; }
  body[data-page="home"] .eh-hero .water-copy h1 { font-size:clamp(44px,8.1vw,72px); }
  body[data-page="home"] .eh-visual { height:500px; }
  .cinema-filmstrip-top { align-items:start; flex-direction:column; }
  .cinema-film-card { flex-basis:80vw; aspect-ratio:1.45; }
  #capabilities .br-engineering-feature { display:flex; flex-direction:column-reverse; min-height:0; padding:45px 0 70px; gap:26px; }
  #capabilities .br-feature-copy { position:static; order:0; padding:0 3px; width:100%; }
  #capabilities .br-feature-image,#capabilities .br-engineering-feature:nth-of-type(even) .br-feature-image { order:1; width:100%; height:56vh; min-height:380px; }
  #capabilities .br-feature-copy h3 { font-size:clamp(30px,6vw,45px); }
}
@media (max-width:680px) {
  .site-header { height:76px; min-height:76px; padding-inline:16px; }
  .site-header .brand { width:149px; }
  .site-header .desktop-nav { display:none; }
  .site-header .header-cta { padding:10px 12px; font-size:12px; white-space:nowrap; }
  body[data-page="home"] .water-hero.eh-hero { padding-inline:17px; }
  body[data-page="home"] .eh-hero .water-copy { min-height:66vh; padding:45px 4px 30px; }
  body[data-page="home"] .eh-hero .water-copy h1 { font-size:clamp(34px,9vw,52px); line-height:1.13; margin-bottom:22px; }
  .cinema-inline-clip { width:105px; height:57px; border-radius:6px; }
  body[data-page="home"] .eh-hero .water-copy .eh-kicker { font-size:9px; margin-bottom:25px; }
  body[data-page="home"] .eh-hero .water-copy .eh-intro { font-size:15px; margin-bottom:20px; max-width:34ch; }
  body[data-page="home"] .eh-visual { height:auto; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:clamp(250px,60vw,390px) 220px; gap:9px; }
  body[data-page="home"] .eh-photo--main { grid-column:1/span 2; grid-row:1; }
  body[data-page="home"] .eh-photo--detail { grid-column:1; grid-row:2; }
  body[data-page="home"] .eh-red-panel { grid-column:2; grid-row:2; padding:19px 15px; }
  body[data-page="home"] .eh-red-panel strong { font-size:25px; }
  body[data-page="home"] .eh-service { flex-basis:240px; min-height:104px; }
  .cinema-filmstrip { padding-top:70px; }
  .cinema-filmstrip-top { margin-bottom:27px; }
  .cinema-filmstrip-title h2 { font-size:clamp(34px,8vw,45px); }
  .cinema-filmstrip-track { padding-inline:17px; gap:10px; }
  .cinema-film-card { flex-basis:87vw; aspect-ratio: .91; }
  .cinema-film-info { align-items:start; flex-direction:column; bottom:23px; left:20px; right:20px; gap:16px; }
  .cinema-film-info strong { font-size:30px; }
  .cinema-film-link { padding:12px 14px; font-size:12px; }
  .cinema-film-controls { padding-inline:17px; align-items:flex-start; }
  .cinema-film-filter { gap:6px; }
  .cinema-film-filter button { padding:9px 11px; font-size:12px; }
  #capabilities .br-service-nav a { font-size:11px; padding:9px 10px!important; }
  #capabilities .br-feature-image,#capabilities .br-engineering-feature:nth-of-type(even) .br-feature-image { height:58vh; min-height:345px; }
  #capabilities .br-feature-copy .br-kicker { margin:0 0 15px; }
  #capabilities .br-feature-copy>p:not(.br-kicker) { font-size:15px; }
  #capabilities .br-scope { grid-template-columns:1fr 1fr; gap:0 12px; margin:25px 0 20px; }
  #capabilities .br-feature-image figcaption { left:12px; bottom:12px; padding:8px 10px; }
  .cinema-view-project { right:12px; bottom:12px; padding:11px 12px; font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  .cinema-film-card .cinema-film-video,.cinema-inline-clip video { display:none; }
  .cinema-film-card:hover .cinema-film-image { transform:none; }
  .cinema-film-track { scroll-behavior:auto; }
}
html.motion-paused .cinema-film-video,html.motion-paused .cinema-inline-clip video { display:none; }

/* Reference-specific refinements: accessible filters, client rail, tighter typography. */
.cinema-film-card[hidden] { display:none!important; }
body[data-page="home"] .eh-hero .water-copy h1 { font-size:clamp(40px,5vw,72px); }
.cinema-filmstrip-title h2 { font-size:clamp(34px,4vw,60px); }
#capabilities .br-feature-copy h3 { font-size:clamp(31px,3.5vw,52px); }
.cinema-hero-brands { padding:25px 0 32px; background:var(--ref-paper); overflow:hidden; border-top:1px solid var(--ref-rule); border-bottom:1px solid var(--ref-rule); }
.cinema-hero-brands>p { text-align:center; font:10px/1.4 "Courier New",monospace; color:#656b70; letter-spacing:.13em; margin:0 0 17px; }
.cinema-hero-brands-view { width:100%; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.cinema-hero-brands-track { display:flex; gap:70px; align-items:center; width:max-content; animation:cinema-marquee 42s linear infinite; }
.cinema-hero-brands-track span { display:inline-flex; align-items:center; gap:70px; color:#50565a; font-size:clamp(15px,2vw,24px); font-weight:600; white-space:nowrap; letter-spacing:-.04em; }
.cinema-hero-brands-track span::before { content:"✳"; font-size:13px; color:var(--ref-red); }
.cinema-film-card:focus-visible,.cinema-view-project:focus-visible,.cinema-film-controls button:focus-visible { outline:3px solid var(--ref-red); outline-offset:5px; }
.cinema-film-card[hidden] .cinema-film-video { display:none; }
@media (max-width:900px) {
  #capabilities .br-engineering-feature { flex-direction:column; }
  #capabilities .br-feature-image,#capabilities .br-engineering-feature:nth-of-type(even) .br-feature-image { order:0; }
  #capabilities .br-feature-copy { order:1; }
}
@media (max-width:680px) {
  .cinema-hero-brands-track { gap:37px; }
  .cinema-hero-brands-track span { gap:37px; font-size:15px; }
  .cinema-filmstrip-title h2 { font-size:38px; }
  body[data-page="home"] .eh-hero .water-copy h1 { font-size:clamp(38px,10vw,51px); }
}
@media (prefers-reduced-motion:reduce) {
  .cinema-hero-brands-track { animation:none; }
}
html.motion-paused .cinema-hero-brands-track { animation-play-state:paused; }

/* Final navbar hierarchy: the source header had a 26px CTA override. */
.site-header .header-cta {
  display:inline-flex!important; align-items:center!important; justify-content:center!important;
  background:var(--ref-silver)!important; color:var(--ref-ink)!important;
  font-size:14px!important; line-height:1.2!important; font-weight:650!important;
  padding:13px 16px!important; height:auto!important; min-height:43px!important;
  border:0!important; border-radius:7px!important; text-decoration:none!important;
  gap:12px!important; box-shadow:none!important;
}
.site-header .header-cta .arrow {
  width:16px!important; height:16px!important; color:var(--ref-red)!important; flex:0 0 16px;
}
.site-header .header-cta:hover,.site-header .header-cta:focus-visible {
  background:var(--ref-red)!important; color:#fff!important;
}
.site-header .header-cta:hover .arrow,.site-header .header-cta:focus-visible .arrow { color:#fff!important; }
@media(max-width:680px) {
  .site-header .header-cta { font-size:12px!important; padding:10px 12px!important; min-height:38px!important; gap:8px!important; }
  .site-header .header-cta .arrow { width:14px!important; height:14px!important; flex-basis:14px; }
}