/* Scroll films of the service pages (solar: /services/solar-energy, fire: /services/fire-suppression).
   Full-page scroll film: one WebGL scene pinned to the viewport, the chapter titles scroll over it.
   Same Playfair + Space Grotesk language as the rest of the site. */

.shs {
  --shs-text: #F4F2EC;
  --shs-muted: rgba(231,237,244,0.66);
  --shs-sun: #F2B33D;
  --shs-ac: #FFB347;
  --shs-bat: #3FE08A;
  --shs-ease: cubic-bezier(.22,1,.36,1);
  --shs-top: 96px;                       /* clears the fixed site header */
  --shs-edge: clamp(20px, 6vw, 96px);    /* replaced by the header container's measured edge */
  position: relative;
  background: #050b14;
  color: var(--shs-text);
}

/* The site's floating quote-cart button would sit on the film; this page has its own call to action. */
body:has(.shs) .qcart-fab { display: none !important; }

/* Page exception: on this page the site header stays clear, with light chrome,
   the same way html.hero-hold keeps it clear over the homepage film. */
html.solar-film .navbar-area.scrolled { background: transparent; border-bottom-color: transparent; box-shadow: none; transition: background-color .4s ease, backdrop-filter .4s ease; }
html.solar-film.solar-glass .navbar-area.scrolled { background: rgba(5,11,20,0.72); border-bottom: 0;
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); padding: 12px 0; }
html.solar-film .navbar-area.scrolled .nav-desktop-link { color: rgba(244,242,236,0.72); }
html.solar-film .navbar-area.scrolled .nav-desktop-link.active,
html.solar-film .navbar-area.scrolled .nav-desktop-link:hover { color: #fff; }
html.solar-film .navbar-area.scrolled .ham-line { background: #F4F2EC; }
html.solar-film .navbar-area.scrolled .navbar-brand .logo1 { filter: brightness(0) invert(1); }
html.solar-film .navbar-area.scrolled .nav-cta { border-color: rgba(244,242,236,0.3); color: #F4F2EC; }
html.solar-film .navbar-area.scrolled .nav-cta:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
html.solar-film .navbar-area.scrolled .lang-dd-btn { color: rgba(244,242,236,0.9) !important; }

/* The page ends like the rest of the site: the footer, on the same night colour as the closing scene. */
body:has(.shs) .footer { background: #050b14; border-top: 1px solid rgba(255,255,255,0.06); }

/* The site preloader, on this page only (this stylesheet loads in <head> here and nowhere else, so it
   applies from the first paint). Elsewhere it is paper; here the bars, the scene's own loader and
   everything after are the night, so a paper preloader flashed: Safari 26 tints its status bar and
   toolbar from a fixed full-screen element, so they went paper, then jumped to night when it faded.
   Now it is the scene loader's exact backdrop (solid night underneath for the bars, the same radial
   glow over the same 100lvh box, which also reaches under the collapsed toolbar where inset: 0 stops
   short) and the wordmark sweeps light on dark. Its fade reveals an identical backdrop: no flash. */
.preloader { bottom: auto; height: 100lvh; background-color: #050b14;
  background-image: radial-gradient(80% 70% at 50% 60%, #1a2a44, #050b14); }
.preloader-mark { background-image: linear-gradient(115deg, #DCE4EE 0 42%, #7FA8D8 50%, #DCE4EE 58% 100%); }

/* ── the pinned scene ── */
.shs-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 0; }
.shs-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shs-vignette { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3,8,16,0.55) 0%, rgba(3,8,16,0.0) 45%), radial-gradient(130% 100% at 60% 50%, transparent 60%, rgba(0,0,0,0.3)); }

.shs-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; z-index: 6;
  font: 500 14px/1.4 var(--f-ui); letter-spacing: .04em; color: var(--shs-muted);
  background: radial-gradient(80% 70% at 50% 60%, #1a2a44, #050b14); transition: opacity .9s ease, visibility .9s; }
.shs:not([data-state="loading"]) .shs-loading { opacity: 0; visibility: hidden; }
.shs-loader { position: relative; width: 56px; height: 56px; }
.shs-loader::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(242,179,61,0.25); border-top-color: var(--shs-sun); animation: shs-spin 1.4s linear infinite; }
.shs-loader span { position: absolute; inset: 17px; border-radius: 50%; background: var(--shs-sun); box-shadow: 0 0 24px 6px rgba(242,179,61,0.45); animation: shs-pulse 1.8s ease-in-out infinite; }
@keyframes shs-spin { to { transform: rotate(360deg); } }
@keyframes shs-pulse { 50% { transform: scale(.8); opacity: .7; } }
.shs[data-state="nogl"] .shs-stage { background: radial-gradient(90% 80% at 60% 40%, #1d3256, #050b14); }

/* ── HUD ── */
.shs-clock { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.shs-dial { width: 48px; height: 48px; flex: 0 0 auto; }
.shs-dial-face { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.35); stroke-width: 1.2; }
.shs-dial-tick { stroke: rgba(255,255,255,0.35); stroke-width: 1; stroke-linecap: round; }
.shs-dial-tick.is-major { stroke: rgba(255,255,255,0.8); stroke-width: 1.6; }
.shs-hand-h { stroke: #F4F2EC; stroke-width: 2.6; stroke-linecap: round; }
.shs-hand-m { stroke: #7FA8D8; stroke-width: 1.8; stroke-linecap: round; }
.shs-dial-pin { fill: #F4F2EC; }
.shs-clock-text { display: flex; flex-direction: column; gap: 4px; }
.shs-clock-time { font: 600 24px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.shs-clock-day { font: 500 10px/1 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--shs-muted); }
.shs-energy {
  position: absolute; z-index: 4; top: var(--shs-top); inset-inline-end: var(--shs-edge); pointer-events: none;
  min-width: 210px; padding: 12px 14px; border-radius: 14px; display: grid; gap: 7px;
  background: rgba(8,18,32,0.4); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.shs-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; font: 500 12px/1.2 var(--f-ui); }
.shs-row svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.shs-row-l { color: var(--shs-muted); }
.shs-row-l small { font-size: 10px; opacity: .85; margin-inline-start: 4px; }
.shs-row b { font: 600 13px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.shs-row-pv svg { color: var(--shs-sun); }
.shs-row-home svg { color: var(--shs-ac); }
.shs-row-bat svg { color: var(--shs-bat); }
.shs-row-grid { opacity: .65; }
.shs-row-grid b { font: 500 11px/1 var(--f-ui); color: var(--shs-muted); }
.shs-row-grid b.is-cut { color: #ff8a7a; }
.shs-row-grid:has(.is-cut) { opacity: 1; }
.shs-soc { grid-column: 2 / 4; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.shs-soc span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #2bbf6e, var(--shs-bat)); box-shadow: 0 0 10px rgba(63,224,138,0.7);
  transform: scaleX(0); transform-origin: left; transition: transform .4s linear; }
[dir="rtl"] .shs-soc span { transform-origin: right; }
.shs-energy, .shs-cue { transition: opacity .6s ease; }
.shs[data-mode="inter"] .shs-energy { opacity: 0; pointer-events: none; }
.shs[data-state="loading"] .shs-energy, .shs[data-state="nogl"] .shs-energy { opacity: 0; }


/* ── titles: fixed on screen, cross-fading (slow in, slow out); type follows the site's dark sections ── */
.shs-titles { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.shs-copy {
  position: absolute; inset-inline-start: var(--shs-edge); bottom: clamp(56px, 13vh, 140px); max-width: 640px;
  opacity: 0; transition: opacity .45s cubic-bezier(.45,0,1,1); text-shadow: 0 2px 28px rgba(0,0,0,0.5);
}
/* hand-over: the old title fades out first (.45s), the new one fades in after it (slow in, slow out) */
.shs-copy.is-in { opacity: 1; pointer-events: auto; transition: opacity .9s cubic-bezier(.45,0,.55,1) .45s; }
.shs-copy .section-label { color: #7FA8D8; margin-bottom: 18px; }
.shs-copy h1 { margin: 0 0 22px; font-family: var(--f-serif); font-weight: 500; font-size: clamp(44px, 6.6vw, 96px); line-height: .98; letter-spacing: -0.02em; color: #F4F2EC; max-width: 15ch; }
.shs-copy h2 { margin: 0 0 14px; font-family: var(--f-serif); font-weight: 500; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -0.02em; color: #F4F2EC; }
.shs-copy h1 em, .shs-copy h2 em { font-style: italic; color: #7FA8D8; }
.shs-copy p { margin: 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; color: rgba(244,242,236,0.82); max-width: 46ch; }
.shs-copy-intro { bottom: auto; top: 50%; transform: translateY(-42%); }
/* the page's breadcrumb sits over the opening title and fades with it */
.shs-copy-intro .hero-breadcrumb { margin-bottom: 22px; }
.shs-copy-intro .breadcrumb-list li { color: rgba(244,242,236,0.6); }
.shs-copy-intro .breadcrumb-list li + li::before { color: rgba(244,242,236,0.35); }
.shs-copy-intro .breadcrumb-list li a { color: rgba(244,242,236,0.8); }
.shs-copy-end { inset-inline-start: 50%; bottom: auto; top: 50%; transform: translate(-50%, -50%); max-width: 720px; text-align: center; }
[dir="rtl"] .shs-copy-end { transform: translate(50%, -50%); }
.shs-copy-end h2 { margin-bottom: 16px; }
.shs-copy-end p { margin: 0 auto; }

/* scroll cue: bottom centre of the screen, only before the day starts */
.shs-cue { position: absolute; z-index: 4; left: 50%; bottom: 28px; transform: translateX(-50%); pointer-events: none; display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: rgba(244,242,236,0.6); }
.shs-cue span { position: relative; width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,0.6); border-radius: 12px; }
.shs-cue span::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #7FA8D8; animation: shs-wheel 1.8s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes shs-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.shs-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 30px 0 26px; }
.shs-disclaimer { font-size: 12.5px !important; color: rgba(231,237,244,0.45) !important; }

/* the end of the day dims the scene behind the call to action */
.shs-vignette { transition: background-color 1s cubic-bezier(.45,0,.55,1); }
.shs[data-mode="inter"] .shs-vignette { background-color: rgba(5,11,20,0.4); }

/* scroll length: each spacer is one stretch of the day */
.shs-intro { margin-top: -100svh; height: 100svh; }
.shs-ch { height: 140svh; }
.shs:not([data-intro="true"]) .shs-cue, .shs[data-state="loading"] .shs-cue { opacity: 0; }

/* ── the hand-over and the tour ── */
.shs-inter { height: 110svh; }
.shs-tour { height: calc(var(--stops, 8) * 80svh); }
.shs[data-mode="info"] .shs-energy { opacity: 0; pointer-events: none; }
.shs-tourui {
  position: absolute; z-index: 4; inset-inline-start: var(--shs-edge); top: 50%; transform: translateY(-46%);
  width: min(420px, calc(100% - 40px)); opacity: 0; pointer-events: none;
  transition: opacity .7s cubic-bezier(.45,0,.55,1);
}
.shs[data-mode="tour"] .shs-tourui { opacity: 1; pointer-events: auto; transition-delay: .2s; }
.shs-tour-title { margin: 0 0 8px; font-family: var(--f-serif); font-weight: 500; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.02em; color: #F4F2EC; text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
.shs-tour-title em { font-style: italic; color: #7FA8D8; }
.shs-tour-lead { margin: 0 0 22px; color: rgba(244,242,236,0.78); font-size: 15px; line-height: 1.55; text-shadow: 0 2px 18px rgba(0,0,0,0.5); }
.shs-stops { list-style: none; margin: 0; padding: 14px; border-radius: 16px; background: rgba(8,18,32,0.5); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); display: grid; gap: 2px; }
.shs-stop-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer;
  font: 500 15px/1.25 var(--f-ui); color: rgba(244,242,236,0.6); text-align: start; transition: color .3s, background .3s; }
.shs-stop-btn:hover { color: #fff; background: rgba(255,255,255,0.05); }
.shs-stop-btn:focus-visible { outline: 2px solid #7FA8D8; outline-offset: 2px; }
.shs-stop-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--f-display);
  border: 1px solid rgba(255,255,255,0.25); color: rgba(244,242,236,0.7); transition: background .3s, border-color .3s, color .3s; }
.shs-stop.is-active .shs-stop-btn { color: #fff; }
.shs-stop.is-active .shs-stop-n { background: #7FA8D8; border-color: #7FA8D8; color: #0b1830; }
/* only the active stop opens its description: grid-row height animates without touching layout props */
.shs-stop-role { display: grid; grid-template-rows: 0fr; margin: 0; padding: 0 10px 0 46px; color: rgba(244,242,236,0.8); font-size: 14px; line-height: 1.55;
  opacity: 0; transition: grid-template-rows .5s cubic-bezier(.45,0,.55,1), opacity .4s ease; overflow: hidden; }
.shs-stop.is-active .shs-stop-role { grid-template-rows: 1fr; opacity: 1; }
.shs-stop-role > span { min-height: 0; overflow: hidden; padding-bottom: 12px; }

/* ── act two: after the film the page carries on as a normal, full-width site section on the night colour
   the scene ends on; a long gradient melts the last frame into it, so nothing floats over the video ── */
.shs-act2 { position: relative; z-index: 1; background: #050b14; color: rgba(244,242,236,0.85); }
.shs-act2::before { content: ""; position: absolute; left: 0; right: 0; top: -45svh; height: 45svh; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,11,20,0) 0%, rgba(5,11,20,0.75) 60%, #050b14 100%); }
.shs-panel { padding: clamp(72px, 10vw, 128px) 0; border-top: 1px solid rgba(255,255,255,0.06); }
.shs-panel:first-child { border-top: 0; padding-top: 24px; }
.shs-panel h2 { margin: 0 0 18px; font-family: var(--f-serif); font-weight: 500; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.03; letter-spacing: -0.02em; color: #F4F2EC; }
.shs-panel h2 em { font-style: italic; color: #7FA8D8; }
.shs-panel p { font-size: 16.5px; line-height: 1.7; margin: 0 0 14px; }
.shs-panel-sub { color: rgba(244,242,236,0.7); }
.shs-features { list-style: none; margin: 22px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.shs-features li { padding: 8px 14px; border-radius: 999px; font-size: 13.5px; color: #F4F2EC; background: rgba(127,168,216,0.12); border: 1px solid rgba(127,168,216,0.28); }
.shs-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.shs-type { position: relative; padding: 24px 22px; border-radius: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); }
.shs-type.is-featured { background: rgba(127,168,216,0.1); border-color: rgba(127,168,216,0.45); }
.shs-type h3 { margin: 0 0 10px; font-family: var(--f-serif); font-weight: 500; font-size: 26px; color: #F4F2EC; }
.shs-type p { font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.shs-type-flag { display: inline-block; margin-bottom: 12px; font: 600 11px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #7FA8D8; }
.shs-type-badge { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: 12px; color: #F4F2EC; border: 1px solid rgba(255,255,255,0.22); }
.shs-faq .faq-list { margin-top: 24px; }
.shs-faq .faq-item { border-color: rgba(255,255,255,0.12) !important; background: transparent !important; }
.shs-faq .faq-question { color: #F4F2EC !important; background: transparent !important; }
.shs-faq .faq-answer p { color: rgba(244,242,236,0.8) !important; }
.shs-final { text-align: center; }
.shs-final p { max-width: 52ch; margin-left: auto; margin-right: auto; }

@media (max-width: 991.98px) {
  .shs-type-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
  .shs { --shs-top: 84px; }
  .shs-energy { min-width: 0; padding: 9px 10px; gap: 5px; }
  .shs-row { grid-template-columns: 14px auto; gap: 6px; font-size: 11px; }
  .shs-row-l, .shs-row-grid { display: none; }
  .shs-row svg { width: 14px; height: 14px; }
  .shs-soc { grid-column: 1 / 3; }
  .shs-ch { height: 120svh; }
  .shs-copy { bottom: 48px; inset-inline-end: 20px; }
  .shs-tourui { top: auto; bottom: 24px; transform: none; }
  .shs-stop:not(.is-active) { display: none; }
  .shs-tour-lead { display: none; }
  .shs-panel { padding: 64px 0; }
  .shs-vignette { background: linear-gradient(0deg, rgba(3,8,16,0.6) 0%, rgba(3,8,16,0) 50%); }
}

@media (prefers-reduced-motion: reduce) {
  .shs-copy { transition-duration: .3s; }
  .shs-cue span::after, .shs-loader::before, .shs-loader span { animation: none; }
  .shs-soc span { transition: none; }
}

.shs-faq.faq-section { background: transparent !important; }
.shs-offer p { max-width: 72ch; }

/* ── phones: every overlay sized for a 360–430 px screen ── */
@media (max-width: 767.98px) {
  .shs-copy { inset-inline-start: 16px; inset-inline-end: 16px; max-width: none; bottom: 36px; }
  .shs-copy-intro { top: auto; bottom: 96px; transform: none; }
  .shs-copy h1 { font-size: clamp(34px, 10vw, 46px); margin-bottom: 14px; }
  .shs-copy h2 { font-size: clamp(28px, 8.4vw, 38px); margin-bottom: 10px; }
  .shs-copy p { font-size: 15px; line-height: 1.5; }
  .shs-copy-end { inset-inline-start: 16px; inset-inline-end: 16px; transform: translateY(-50%); }
  [dir="rtl"] .shs-copy-end { transform: translateY(-50%); }
  .shs-cue { bottom: 18px; font-size: 10px; letter-spacing: .16em; }
  .shs-cue span { width: 18px; height: 28px; }
  /* tour: one compact sheet at the bottom with the active part only */
  .shs-tourui { inset-inline-start: 12px; inset-inline-end: 12px; width: auto; top: auto; bottom: 14px; transform: none; }
  .shs-tour-title { font-size: 24px; margin-bottom: 8px; }
  .shs-stops { padding: 6px 8px 2px; }
  .shs-stop-btn { font-size: 15px; padding: 8px 6px; }
  .shs-stop-role { padding-inline-start: 42px; font-size: 13.5px; line-height: 1.5; }
  .shs-energy { top: 76px; inset-inline-end: 12px; }
  .shs-panel h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .shs-panel p { font-size: 15.5px; }
  .shs-features li { font-size: 12.5px; padding: 7px 12px; }
}

/* FAQ: answers stay closed until their question is opened (the page's own text sizes were showing a first line) */
.shs-faq .faq-answer:not(.open) { display: none; }
.shs-faq .faq-answer.open { display: block; padding: 0 28px 22px; }
.shs-faq .faq-question { font-size: 18px; }

/* ── review fixes ── */
/* 5. a soft top scrim keeps the clear header readable over bright sky and the scene */
html.solar-film:not(.solar-glass) .navbar-area { background-image: linear-gradient(180deg, rgba(3,8,16,0.32) 0%, rgba(3,8,16,0) 100%) !important; }
/* no rule under the header on this page, in any state */
html.solar-film .navbar-area, html.solar-film .navbar-area.scrolled { border-bottom: 0 !important; box-shadow: none !important; }
/* 3. titles get a left scrim so they never sit on a white wall or a lit window */
.shs-vignette { background: linear-gradient(90deg, rgba(3,8,16,0.42) 0%, rgba(3,8,16,0.12) 34%, rgba(3,8,16,0) 50%),
  linear-gradient(0deg, rgba(3,8,16,0.3) 0%, rgba(3,8,16,0) 28%) !important; }
/* 2. the hand-over line sits on a dark halo, its accent in a light tone */
.shs-copy-end::before { content: ""; position: absolute; inset: -18% -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3,8,16,0.78), rgba(3,8,16,0)); }
.shs-copy-end h2 em { color: #BCD3EE; }
/* 10. the tour block is anchored at the top, so it does not jump as descriptions open */
.shs-tourui { top: 15%; transform: none; }
/* 11. FAQ aligned to the container like its heading */
.shs-faq .faq-list { margin-left: 0; margin-right: 0; max-width: none; }
/* 12. a filled primary action */
.shs-act2 .shs-btn-primary { background: #F4F2EC; border-color: #F4F2EC; color: #0b1830; }
.shs-act2 .shs-btn-primary:hover { background: #fff; color: #0b1830; }
/* 14. tighter section rhythm; card tags pinned to the card bottom */
.shs-panel { padding: clamp(56px, 7vw, 96px) 0; }
.shs-type { display: flex; flex-direction: column; }
.shs-type-badge { margin-top: auto; align-self: flex-start; }
@media (max-width: 767.98px) {
  /* 6. in the tour the HUD shrinks to the clock so it does not cover the part */
  .shs[data-mode="tour"] .shs-energy .shs-row, .shs[data-mode="tour"] .shs-clock { border: 0; margin: 0; padding: 0; }
  .shs[data-mode="tour"] .shs-energy .shs-row { display: none; }
  .shs-tourui { top: auto; }
}

/* in the tour the energy card shrinks to the clock on every screen, so it never covers the part */
.shs[data-mode="tour"] .shs-energy .shs-row { display: none; }
.shs[data-mode="tour"] .shs-clock { border: 0; margin: 0; padding: 0; }

/* intro title: two lines at most, "Solar Energy / Solutions Lebanon" */
.shs-copy-intro { max-width: min(980px, calc(100vw - 2 * var(--shs-edge))); }
.shs-copy-intro h1 { max-width: none; font-size: clamp(34px, 5.4vw, 82px); text-wrap: balance; }
.shs-copy-intro h1 em { white-space: nowrap; }
.shs-tour-title em { color: #BCD3EE; }
@media (max-width: 767.98px) {
  .shs-copy-intro h1 { font-size: clamp(30px, 9.2vw, 42px); }
  /* tour: title and stop share one frosted sheet, readable over a pale sky */
  .shs-tourui { padding: 14px 12px 6px; border-radius: 18px; background: rgba(8,18,32,0.72);
    border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
  .shs-tour-title { font-size: 22px; margin: 0 4px 6px; text-shadow: none; }
  .shs-stops { background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ── edge to edge on phones ──
   iOS Safari 26 ignores theme-color: it tints the status bar and the collapsed toolbar from the
   page background, so on this page the page itself is the scene's night. The scene fills the large
   viewport (100lvh) and runs on under the collapsed toolbar.
   --shs-safe-b is the band at the bottom of the stage that the OPEN toolbar covers, plus the home
   indicator. It is built from svh, not dvh, on purpose: dvh changes the moment Safari hides its
   toolbar on the first swipe, and everything anchored to it jumped (the "lag" on the opening
   titles). svh never changes, so anchored UI sits still; with the toolbar collapsed it simply sits
   that much higher than it has to. */
html:has(.shs), html:has(.shs) body { background-color: #050b14; }
.shs { --shs-safe-b: calc(100lvh - 100svh + env(safe-area-inset-bottom, 0px)); }
.shs-stage { height: 100lvh; }
.shs-intro { margin-top: -100lvh; height: 100lvh; }
.shs-cue { bottom: calc(28px + var(--shs-safe-b)); }
.shs-copy:not(.shs-copy-intro):not(.shs-copy-end) { bottom: calc(clamp(56px, 13vh, 140px) + var(--shs-safe-b)); }
/* the hand-over line centres on the part of the stage that is always visible */
.shs-copy-end { top: calc(50% - var(--shs-safe-b) / 2); }
/* landscape: the header keeps clear of the notch the scene now runs under */
html:has(.shs) .navbar-area { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (max-width: 767.98px) {
  .shs-cue { bottom: calc(18px + var(--shs-safe-b)); }
  .shs-copy:not(.shs-copy-intro):not(.shs-copy-end) { bottom: calc(36px + var(--shs-safe-b)); }
  .shs-copy-intro { bottom: calc(96px + var(--shs-safe-b)); }
  .shs-tourui { bottom: calc(14px + var(--shs-safe-b)); }
}

/* ── the bleed: the page dissolves into the browser bars, one definition for the whole page ──
   Each edge has ONE fade (--shs-bleed-t / --shs-bleed-b, defined once below) drawn by ONE of two
   layers with the SAME geometry as the stage (top 0, 100lvh), so they line up to the pixel:
     - on the stage (z 3: over the scene, under its titles and cards) while the film owns that edge;
     - pinned to the screen (z 2: over act two and the footer, under the header) once act two's own
       shading reaches that edge (html.shs-bleed-t / html.shs-bleed-b, set by the script).
   The swap is instant and the two never show together, so the fade never stops, doubles or jumps.
   The fixed layer spans 100lvh from the top, not bottom: 0, because a fixed bottom: 0 box sits above
   Safari's collapsed bar and left page content showing under it.
   Five stops, not two: a linear ramp bands on an OLED screen. Touch screens only. */
@media (hover: none) and (pointer: coarse) {
  .shs {
    --shs-bleed-th: calc(env(safe-area-inset-top, 0px) + 140px);
    --shs-bleed-bh: calc(var(--shs-safe-b) + 120px);
    --shs-bleed-t: linear-gradient(180deg, #050b14 env(safe-area-inset-top, 0px), rgba(5,11,20,0.86) calc(env(safe-area-inset-top, 0px) + 24px),
      rgba(5,11,20,0.52) calc(env(safe-area-inset-top, 0px) + 62px), rgba(5,11,20,0.2) calc(env(safe-area-inset-top, 0px) + 100px), rgba(5,11,20,0) 100%);
    --shs-bleed-b: linear-gradient(0deg, #050b14 env(safe-area-inset-bottom, 0px), rgba(5,11,20,0.9) 22%, rgba(5,11,20,0.6) 45%,
      rgba(5,11,20,0.25) 70%, rgba(5,11,20,0) 100%);
  }
  .shs-stage::before, .shs-stage::after, .shs::before, .shs::after {
    content: ""; top: 0; left: 0; right: 0; height: 100lvh; pointer-events: none; background-repeat: no-repeat; }
  .shs-stage::before, .shs-stage::after { position: absolute; z-index: 3; }
  .shs::before, .shs::after { position: fixed; z-index: 2; display: none; }
  .shs-stage::before, .shs::before { background-image: var(--shs-bleed-t); background-position: top; background-size: 100% var(--shs-bleed-th); }
  .shs-stage::after, .shs::after { background-image: var(--shs-bleed-b); background-position: bottom; background-size: 100% var(--shs-bleed-bh); }
  html.shs-bleed-t .shs::before, html.shs-bleed-b .shs::after { display: block; }
  html.shs-bleed-t .shs-stage::before, html.shs-bleed-b .shs-stage::after { display: none; }
  /* the energy card would sit under the pinned top fade for the last moments of the tour */
  html.shs-bleed-t .shs-energy { opacity: 0; }
  /* the page ends clear of the bottom fade, so the last links are not dimmed */
  body:has(.shs) .footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
}

/* ── title hand-over, second pass ──
   The first pass was one plain opacity fade per title with a .45s empty screen between them, and the
   opening title held still for half a screen of scroll before fading on a timer: it read as lag.
   Now: the opening title is scrubbed by the scroll (--shs-io, set by the script), a pure fade with
   no movement, because the first swipe is also when Safari hides its toolbar; chapter titles fade out quickly and
   come in heading first, line after, each rising a few pixels with a long ease-out. Only opacity and
   transform move, on their own layers, so the compositor runs them beside the WebGL frames. */
.shs-copy { transition: opacity .35s cubic-bezier(.4,0,1,1); will-change: opacity; }
.shs-copy.is-in { transition: opacity .5s ease-out .2s; }
.shs-ch-copy > h2, .shs-ch-copy > p { transform: translateY(12px); will-change: transform, opacity;
  transition: transform .35s cubic-bezier(.4,0,1,1), opacity .35s cubic-bezier(.4,0,1,1); }
.shs-ch-copy > p { opacity: 0; }
.shs-ch-copy.is-in > h2 { transform: none; transition: transform 1.1s var(--shs-ease) .2s; }
.shs-ch-copy.is-in > p { transform: none; opacity: 1; transition: transform 1.1s var(--shs-ease) .32s, opacity .8s ease-out .32s; }

/* opening title: follows the scroll exactly, no transition to lag behind the finger */
.shs-copy.shs-copy-intro.is-in { opacity: calc(1 - var(--shs-io, 0)); transition: none; }
.shs-copy.shs-copy-intro:not(.is-in) { opacity: 0; transition: opacity .25s linear; }
/* it rises in once, when the scene is ready under it, heading first */
.shs-copy-intro > h1, .shs-copy-intro > p { will-change: transform, opacity; transition: transform 1.2s var(--shs-ease), opacity 1s ease-out; }
.shs-copy-intro > p { transition-delay: .14s; }
.shs[data-state="loading"] .shs-copy-intro > h1, .shs[data-state="loading"] .shs-copy-intro > p { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
  .shs-ch-copy > h2, .shs-ch-copy > p, .shs-copy-intro > h1, .shs-copy-intro > p { transform: none !important; translate: none !important; }
}


/* ── third pass: calmer, clearer chapters ──
   The chapter titles were display-size over a busy scene with a thin side gradient behind them, and nothing
   told the reader how far through the film they were. Now: smaller, balanced titles on a soft shade that
   follows the copy (bottom-start corner), a segmented progress bar (one segment per chapter, filled from the
   title on screen, so no script), and shorter scroll stretches so a chapter never outstays its sentence.
   Still opacity and transform only for motion; the shade and the bar are static paint. */
.shs-vignette { background:
    radial-gradient(115% 85% at 0% 100%, rgba(3,8,16,0.72) 0%, rgba(3,8,16,0.42) 32%, rgba(3,8,16,0) 62%),
    linear-gradient(0deg, rgba(3,8,16,0.35) 0%, rgba(3,8,16,0) 30%) !important; }
[dir="rtl"] .shs-vignette { background:
    radial-gradient(115% 85% at 100% 100%, rgba(3,8,16,0.72) 0%, rgba(3,8,16,0.42) 32%, rgba(3,8,16,0) 62%),
    linear-gradient(0deg, rgba(3,8,16,0.35) 0%, rgba(3,8,16,0) 30%) !important; }
.shs-copy { text-shadow: 0 1px 18px rgba(0,0,0,0.45); }
.shs-copy h2 { font-size: clamp(30px, 3.5vw, 50px); line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; max-width: 18ch; margin-bottom: 16px; }
.shs-copy p { font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.65; max-width: 44ch; text-wrap: pretty; color: rgba(244,242,236,0.86); }
.shs-copy-end h2 { max-width: none; }
.shs-copy-intro p { max-width: 50ch; }
.shs-tour-lead { text-wrap: pretty; }

/* progress: one short bar per chapter, bottom-start, aligned with the titles */
.shs-progress { position: absolute; z-index: 4; inset-inline-start: var(--shs-edge); bottom: calc(30px + var(--shs-safe-b, 0px));
  display: flex; gap: 6px; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.shs-progress span { display: block; width: 22px; height: 2px; border-radius: 2px; background: rgba(244,242,236,0.22);
  transition: background-color .6s ease, transform .6s var(--shs-ease); }
.shs:has(.shs-ch-copy.is-in) .shs-progress { opacity: 1; }
.shs[data-mode="inter"] .shs-progress, .shs[data-mode="tour"] .shs-progress, .shs[data-state="loading"] .shs-progress { opacity: 0; }
.shs:has(.shs-ch-copy.is-in[data-i="0"]) .shs-progress span:nth-child(-n+1),
.shs:has(.shs-ch-copy.is-in[data-i="1"]) .shs-progress span:nth-child(-n+2),
.shs:has(.shs-ch-copy.is-in[data-i="2"]) .shs-progress span:nth-child(-n+3),
.shs:has(.shs-ch-copy.is-in[data-i="3"]) .shs-progress span:nth-child(-n+4),
.shs:has(.shs-ch-copy.is-in[data-i="4"]) .shs-progress span:nth-child(-n+5),
.shs:has(.shs-ch-copy.is-in[data-i="5"]) .shs-progress span:nth-child(-n+6),
.shs:has(.shs-ch-copy.is-in[data-i="6"]) .shs-progress span:nth-child(-n+7),
.shs:has(.shs-ch-copy.is-in[data-i="7"]) .shs-progress span:nth-child(-n+8),
.shs:has(.shs-ch-copy.is-in[data-i="8"]) .shs-progress span:nth-child(-n+9),
.shs:has(.shs-ch-copy.is-in[data-i="9"]) .shs-progress span:nth-child(-n+10) { background: rgba(244,242,236,0.92); }
.shs:has(.shs-ch-copy.is-in[data-i="0"]) .shs-progress span:nth-child(1),
.shs:has(.shs-ch-copy.is-in[data-i="1"]) .shs-progress span:nth-child(2),
.shs:has(.shs-ch-copy.is-in[data-i="2"]) .shs-progress span:nth-child(3),
.shs:has(.shs-ch-copy.is-in[data-i="3"]) .shs-progress span:nth-child(4),
.shs:has(.shs-ch-copy.is-in[data-i="4"]) .shs-progress span:nth-child(5),
.shs:has(.shs-ch-copy.is-in[data-i="5"]) .shs-progress span:nth-child(6),
.shs:has(.shs-ch-copy.is-in[data-i="6"]) .shs-progress span:nth-child(7),
.shs:has(.shs-ch-copy.is-in[data-i="7"]) .shs-progress span:nth-child(8),
.shs:has(.shs-ch-copy.is-in[data-i="8"]) .shs-progress span:nth-child(9),
.shs:has(.shs-ch-copy.is-in[data-i="9"]) .shs-progress span:nth-child(10) { transform: scaleY(1.6); }
/* the chapter text sits above the bar */
.shs-copy:not(.shs-copy-intro):not(.shs-copy-end) { bottom: calc(clamp(72px, 14vh, 150px) + var(--shs-safe-b, 0px)); }

/* status cards: quieter glass, no glow, so the eye stays on the scene and the title */
.shs-energy { background: rgba(6,12,22,0.55); border-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.shs-energy [class$="-led"], .shs-energy [class$="-dot"] { box-shadow: none !important; }

/* tour: the active stop reads as selected without a filled disc */
.shs-stop.is-active .shs-stop-n { background: transparent; border-color: #BCD3EE; color: #F4F2EC; }
.shs-stop.is-active .shs-stop-btn { background: rgba(255,255,255,0.05); }

/* scroll stretches: a little shorter, the story keeps moving */
.shs-ch { height: 112svh; }
.shs-inter { height: 90svh; }
.shs-tour { height: calc(var(--stops, 8) * 64svh); }

@media (max-width: 767.98px) {
  .shs-ch { height: 100svh; }
  .shs-copy h2 { font-size: clamp(26px, 7.4vw, 34px); max-width: none; }
  .shs-copy p { font-size: 15px; line-height: 1.55; }
  .shs-progress { inset-inline-start: 16px; bottom: calc(18px + var(--shs-safe-b, 0px)); gap: 4px; }
  .shs-progress span { width: 14px; }
  .shs-copy:not(.shs-copy-intro):not(.shs-copy-end) { bottom: calc(54px + var(--shs-safe-b, 0px)); }
  .shs-vignette { background: linear-gradient(0deg, rgba(3,8,16,0.78) 0%, rgba(3,8,16,0.45) 30%, rgba(3,8,16,0) 58%) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .shs-progress span { transition: none; }
}

::selection { background: rgba(127,168,216,0.4); color: #fff; }

/* opening title: anchored low at the start edge like the chapters, on its own deeper shade that fades with it,
   so the first screen never sets white type on a lit facade */
.shs-vignette::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(3,8,16,0.74) 0%, rgba(3,8,16,0.5) 30%, rgba(3,8,16,0) 62%);
  opacity: 0; transition: opacity .5s ease; }
[dir="rtl"] .shs-vignette::before { background: linear-gradient(270deg, rgba(3,8,16,0.74) 0%, rgba(3,8,16,0.5) 30%, rgba(3,8,16,0) 62%); }
.shs[data-intro="true"]:not([data-state="loading"]) .shs-vignette::before { opacity: 1; }
.shs-copy-intro { top: auto; transform: none; bottom: calc(clamp(96px, 17vh, 180px) + var(--shs-safe-b, 0px)); }
.shs-copy-intro h1 em { color: #BCD3EE; }
@media (max-width: 767.98px) {
  .shs-vignette::before { background: linear-gradient(0deg, rgba(3,8,16,0.8) 0%, rgba(3,8,16,0.5) 40%, rgba(3,8,16,0) 70%); }
  .shs-copy-intro { bottom: calc(96px + var(--shs-safe-b, 0px)); }
}

/* the last tour stop holds before act two arrives. The stage is sticky inside the film, so it unpinned as soon as the
   tour spacer's end reached the bottom of the screen: the last stops slid away with the page. A tail spacer after
   the tour keeps the stage pinned (the script holds the last stop over it), then act two takes over. */
.shs-tail { height: 80lvh; }

/* the tour's list reads over light walls in the close-ups: the opening shade comes back behind it */
.shs[data-mode="tour"] .shs-vignette::before { opacity: 1; }

/* tour panel: the title stays on one line, and the panel never runs past the bottom of the screen (on a short
   window the last stop's description was cut off). It starts under the header and the list scrolls inside it. */
@media (min-width: 768px) {
  .shs-tourui { top: calc(var(--shs-top) + 2vh); width: min(460px, calc(100% - 40px));
    max-height: calc(100% - var(--shs-top) - 4vh - var(--shs-safe-b, 0px)); display: flex; flex-direction: column; }
  .shs-tour-title { font-size: clamp(28px, 2.6vw, 40px); white-space: nowrap; }
  .shs-tour-lead { margin-bottom: 16px; }
  .shs-stops { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
  .shs-stop-btn { padding: 7px 10px; }
}
@media (max-width: 767.98px) {
  .shs-tour-title { white-space: nowrap; font-size: clamp(19px, 5.6vw, 22px); }
}
@media (min-width: 768px) {
  /* when the list scrolls, its edges fade instead of cutting a row in half */
  .shs-stops { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%); }
}