/* blocks.css: page builder blocks (DESIGN-PLAN v1.2 §4 and §12, motion: docs/MOTION.md). Only tokens,
   no brand values. Every block is a full width <section>; content sits on the gutter lines, wide screens
   add columns. */

/* ======================================================================
   pages.hero
   ====================================================================== */
.hero { padding-top: 0; }
.hero-wrap { padding-inline: 0; }
.hero-main { display: flex; flex-direction: column; min-width: 0; }

/* Display headline split into clauses (ui.headline): one line each from 768 px, raised one by one. */
.hl, .hl-in { display: inline; }
@keyframes m-line-rise { from { transform: translate3d(0, 108%, 0); } to { transform: none; } }

/* ---------- Full screen image layout (stored key "doors"): the whole image carries the page ----------
   The image keeps its own dark tone: no navy scrim over it. Phones show the square crop with the headline
   on its lower part; from 768 px the whole frame; from 1024 px the media covers the first screen edge to
   edge (cropped where the screen's shape differs from the frame's, anchored right so the charger stays
   in; owner 05.10.2026: no black column on the left), its top and left edges melting into a fill of the
   same colour, with the headline on the left, over the photo, and the scroll cue at the bottom centre.
   .hero-frame holds the picture and, on the home page, the owner's video over it (hero.js heroVideo,
   hero-video.js): the picture is the video's first frame, and the video fades in once it really plays.
   --hero-ratio (with its number --hero-ratio-n) is the frame's shape: the photo 2:1, the video 16:9. */
.hero--doors .hero-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--hero-fill);
}
.hero-bg {
  position: relative;
  grid-area: 1 / 1;
  overflow: hidden;
  aspect-ratio: 1 / 1.04;
  background: var(--hero-fill);
}
.hero-bg .hero-frame, .hero-bg picture, .hero-bg .hero-img, .hero-bg .hero-video { display: block; width: 100%; height: 100%; }
.hero-bg .hero-frame { position: relative; }
.hero-bg .hero-img, .hero-bg .hero-video { object-fit: cover; transform-origin: 50% 35%; }
.hero-bg .hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease); }
.hero-frame.is-playing .hero-video { opacity: 1; }
/* Pause / play for the video (hero-video.js shows it): under the glass bar on phones, in the bottom
   right corner from 768 px. */
.hero-video-toggle {
  position: absolute;
  z-index: 3;
  top: calc(var(--site-head-h) + var(--sp-3));
  right: var(--gutter);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 50%;
  background: rgba(var(--hero-fill-rgb), .45);
  color: var(--on-band);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.hero-video-toggle[hidden] { display: none; }
.hero-video-toggle:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .16); }
.hero-video-toggle:focus-visible { outline: var(--bw-focus) solid var(--focus-ring-on-band); outline-offset: 2px; }
/* Playing: two bars (pause); paused: a triangle (play). */
.hv-glyph { width: 12px; height: 14px; border-inline: 4px solid currentColor; }
.hero-video-toggle[data-state="paused"] .hv-glyph { width: 13px; height: 15px; margin-left: 3px; border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
@media (forced-colors: active) {
  .hero-video-toggle { border-color: ButtonText; }
  .hv-glyph { forced-color-adjust: none; color: ButtonText; }
}
/* Under the headline the photo fades into the fill (same colour, not navy). */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(var(--hero-fill-rgb)) 0%, rgba(var(--hero-fill-rgb), .72) 28%, rgba(var(--hero-fill-rgb), 0) 58%);
}
.hero-shade { position: absolute; inset: 0; z-index: 2; background: var(--hero-fill); opacity: 0; pointer-events: none; }
.hero--doors .hero-main { display: contents; }
.hero--doors .hero-title {
  grid-area: 1 / 1;
  align-self: end;
  position: relative;
  z-index: 2;
  max-width: none;
  padding: 0 var(--gutter) var(--sp-8);
  color: var(--on-band);
}
html.motion .hero--doors .hero-title { animation: m-intro-rise var(--dur-intro) var(--ease-out) 160ms both; }

@media (min-width: 768px) {
  .hero--doors .hero-bg { aspect-ratio: var(--hero-ratio, 1774 / 887); }
  .hero-video-toggle { top: auto; bottom: var(--sp-6); }
  .hero--doors .hero-title { padding: 0 var(--gutter) var(--sp-10); }
  /* Each clause on its own line, rising out of its own mask. */
  .hero--doors .hl { display: block; overflow: hidden; padding: .06em 0 .12em; margin: -.06em 0 -.12em; }
  .hero--doors .hl-in { display: block; }
  html.motion .hero--doors .hero-title { animation: none; }
  html.motion .hero--doors .hl-in { animation: m-line-rise 1050ms var(--ease-out) both; animation-delay: calc(220ms + var(--hl-i, 0) * 130ms); }
}

@media (min-width: 1024px) {
  .hero--doors .hero-card {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
    min-height: clamp(560px, calc(100svh - var(--topbar-h) - var(--header-h)), 980px);
    padding: var(--sp-12) var(--gutter);
    overflow: hidden;
  }
  .hero--doors .hero-bg { position: absolute; inset: 0; grid-area: auto; aspect-ratio: auto; z-index: -1; }
  .hero--doors .hero-bg::after { content: none; }
  /* The media covers the whole card: cropped top and bottom on wide screens, left on narrow ones (the
     charger on the right always stays in the picture). */
  .hero--doors .hero-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
  .hero--doors .hero-frame :is(.hero-img, .hero-video) { object-position: 100% 50%; }
  /* A little of the frame's own black under the headline, under the glass bar and under the scroll cue. */
  .hero--doors .hero-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(var(--hero-fill-rgb), .72) 0, rgba(var(--hero-fill-rgb), .36) 32%, rgba(var(--hero-fill-rgb), 0) 60%),
      linear-gradient(180deg, rgb(var(--hero-fill-rgb)) 0, rgba(var(--hero-fill-rgb), .5) 10%, rgba(var(--hero-fill-rgb), 0) 26%),
      linear-gradient(0deg, rgba(var(--hero-fill-rgb), .55) 0, rgba(var(--hero-fill-rgb), 0) 18%);
  }
  .hero--doors .hero-main {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    grid-column: 1 / span 11;
    margin-bottom: calc(var(--sp-12) + var(--sp-8));   /* lifts the headline 40 px above the middle */
  }
  /* The headline on the left, over the photo (it may stand over the car). A soft shadow of the image's
     own tone keeps it clear. */
  .hero--doors .hero-title {
    grid-area: auto;
    align-self: auto;
    padding: 0;
    font-size: min(var(--fs-display), 4.4vw, 4.25rem);
    text-shadow: 0 2px 28px rgba(var(--hero-fill-rgb), .7);
  }
}

/* ---------- Slogan headline (full screen layout; hero.js sloganTitle, owner 05.10.2026) ----------
   Two large bold flush left rows on the left, over the photo: the context words ("Şarjda", "yolda") in
   white, the key words ("konfor,", "özgürlük.") in the red of the light under the car (--hero-glow-rgb;
   owner: "it can be coloured, something animated"). Nothing else: no glow, no charging line, no bolt
   and no buttons (owner, the same day: "the text and symbols on the left still do not look good"; the
   header already carries the map and the survey). A run of one colour never breaks inside, so a phone
   wraps a row where its colour changes. --hs-w is the widest row in em (lib/slogan-fit.js rowsEm) for
   the phone size.
   Motion (html.motion, on load): the rows rise out of their masks in white; the key words then turn red
   from left to right behind a soft edge. Without JavaScript, with reduced motion and in print: the final
   state, still. The masks only exist while the rows rise (clip-path, then none); the shadow of the key
   words is a filter, not a text-shadow, which would paint over a fill clipped to the text. */
.hero--doors .hero-title--slogan {
  --glow: rgb(var(--hero-glow-rgb));
  width: fit-content;
  max-width: 100%;
  font-size: clamp(2.25rem, calc((100vw - 2 * var(--gutter)) * .96 / var(--hs-w, 7.7)), 3.5rem);
  line-height: 1.02;
  font-kerning: normal;
  text-shadow: 0 0 .3em rgba(var(--hero-fill-rgb), .75), 0 2px 28px rgba(var(--hero-fill-rgb), .7);
}
.hs-row, .hs-in { display: block; }
.hero-title--slogan .slogan-run { white-space: nowrap; font-weight: var(--fw-bold); letter-spacing: -.025em; }
.hero-title--slogan .slogan-soft { color: var(--on-band); }
.hero-title--slogan .slogan-key {
  color: var(--glow);
  text-shadow: none;
  filter: drop-shadow(0 2px 18px rgba(var(--hero-fill-rgb), .8));
}

/* The story on load (see above): rows 220-1270 ms, key words 1000-1800 ms. The red fills each key word
   from its right end to its left (owner 13.10.2026), running past the word by its soft edge so it ends
   solid without a jump; the white under it is the clipped ground. */
html.motion .hero-title--slogan .slogan-key {
  color: transparent;
  background-color: var(--on-band);
  background-image: linear-gradient(270deg, var(--glow) 0, var(--glow) calc(100% - .45em), rgba(var(--hero-glow-rgb), 0) 100%);
  background-position: 100% 0;
  background-size: 0% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hs-key 700ms var(--ease-in-out) both;
  animation-delay: calc(1000ms + var(--hl-i, 0) * 120ms);
}
@keyframes hs-key { from { background-size: 0% 100%; } to { background-size: calc(100% + .45em) 100%; } }

@media (min-width: 768px) {
  .hero--doors .hero-title--slogan { font-size: clamp(2.25rem, 5.4vw, 3rem); }
  /* Each row rises out of a mask that opens wide above and to the sides and ends just under the
     descenders; once both rows stand, the mask is gone. */
  html.motion .hero--doors .hs-row { animation: hs-mask 1500ms linear both; }
  html.motion .hero--doors .hs-in { animation: m-line-rise 1050ms var(--ease-out) both; animation-delay: calc(220ms + var(--hl-i, 0) * 130ms); }
}
@keyframes hs-mask { 0%, 99% { clip-path: inset(-1em -2em -.16em -2em); } 100% { clip-path: none; } }
@media (min-width: 1024px) {
  /* 100 px at 1920, 75 px at 1440, 67 px at 1280; never taller than the screen allows. */
  .hero--doors .hero-title--slogan { font-size: min(clamp(3rem, 5.2vw, 7rem), 12svh); }
}
@media (prefers-reduced-motion: reduce) {
  html .hero-title--slogan .slogan-key { color: var(--glow) !important; background: none !important; animation: none !important; }
}

/* ---------- Scroll cue (full screen layout; hero.js scrollCue, owner 05.10.2026) ----------
   Bottom centre of the first screen, only where the hero fills it (from 1024 px): a drawn mouse
   outline (a 2 px line, full pill) with a dot that keeps dropping inside it, and "Keşfet" in
   small spaced capitals under it. It fades in after the headline (html.motion) and scrolls to the next
   block when pressed (hero-video.js). With reduced motion the dot stands still. */
.hero-scroll { display: none; }
@media (min-width: 1024px) {
  .hero-scroll {
    position: absolute;
    left: 50%;
    bottom: var(--sp-6);
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 10px;
    margin: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--r-sm);
    background: none;
    color: var(--on-band);
    font: inherit;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-shadow: 0 1px 12px rgba(var(--hero-fill-rgb), .8);
    cursor: pointer;
    opacity: .85;
    transform: translateX(-50%);
    transition: opacity var(--dur-1) var(--ease);
  }
  .hero-scroll:hover { opacity: 1; }
  .hero-scroll:focus-visible { outline: var(--bw-focus) solid var(--focus-ring-on-band); outline-offset: 2px; }
  .hero-scroll-mouse {
    position: relative;
    width: 24px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, .85);
    border-radius: var(--r-pill);
    filter: drop-shadow(0 1px 8px rgba(var(--hero-fill-rgb), .8));
  }
  .hero-scroll-mouse::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 4px;
    height: 8px;
    margin-left: -2px;
    border-radius: 2px;
    background: #fff;
  }
  .hero-scroll-label { padding-left: .2em; }   /* the tracking after the last letter, centred back */
  html.motion .hero-scroll { animation: m-intro-fade 700ms var(--ease-out) 1500ms both; }
  html.motion .hero-scroll-mouse::before { animation: hero-scroll-dot 1800ms var(--ease-in-out) 1800ms infinite; }
}
@keyframes hero-scroll-dot {
  from { transform: none; opacity: 1; }
  55% { transform: translate3d(0, 12px, 0); opacity: 0; }
  to { transform: translate3d(0, 12px, 0); opacity: 0; }
}
@media (forced-colors: active) {
  .hero-scroll-mouse { border-color: ButtonText; }
  .hero-scroll-mouse::before { background: ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  html .hero-scroll, html .hero-scroll-mouse::before { animation: none !important; }
}

/* ---------- Under the glass header (site layout: the first block is marked data-header-tone="dark") ----------
   As the page's first block the image runs edge to edge from the tariff strip and the floating glass bar
   lies over it (the header takes no room). The headline sits on the page gutter and keeps clear of the
   bar at the top. */
@media (min-width: 768px) {
  /* The opening clip ends square: no rounded corners under the strip or at the page edges. */
  html.motion .site-header--overlay ~ main .hero--doors .hero-bg[data-intro="clip"] { animation-name: hero-bleed-in; }
}
@keyframes hero-bleed-in {
  from { clip-path: inset(6% 4% 6% 4% round var(--r-xl)); transform: scale(1.06); }
  to { clip-path: inset(0 0 0 0 round 0); transform: none; }
}
@media (min-width: 1024px) {
  .site-header--overlay ~ main .hero--doors .hero-card {
    min-height: clamp(560px, calc(100svh - var(--site-strip-h)), 980px);
    padding: calc(var(--site-head-h) + var(--sp-10)) var(--gutter) var(--sp-12);
  }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .site-header--overlay ~ main .hero--doors .hero-card { padding-block: calc(var(--site-head-h) + var(--sp-6)) var(--sp-8); }
}

/* Scrolling away: the image zooms in slowly and darkens; the text stays still. */
html.motion:is(.motion-native, .motion-ready) .hero--doors :is(.hero-img, .hero-video) {
  transform: translate3d(0, calc(var(--p) * 7%), 0) scale(calc(1.02 + var(--p) * .12));
}
html.motion:is(.motion-native, .motion-ready) .hero--doors .hero-shade { opacity: calc(var(--p) * .55); }

/* ---------- Standard layout ---------- */
.hero--standard .hero-card {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--gutter) var(--sp-6);
  background: var(--bg-alt);
}
@media (min-width: 768px) {
  .hero--standard { padding-top: var(--sp-4); }
  .hero--standard .hero-wrap { padding-inline: var(--gutter); }
  .hero--standard .hero-card { border-radius: var(--r-xl); padding: var(--sp-10) var(--hero-pad-x); gap: var(--sp-8); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .hero--standard .hero-card { padding-block: var(--sp-8); }
}
@media (min-width: 1280px) {
  .hero--standard .hero-card { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); padding-block: var(--sp-12); align-items: center; }
  .hero--standard .hero-main { grid-column: span 7; }
  .hero--standard .hero-media { grid-column: span 5; display: flex; align-self: stretch; }
  .hero--standard.hero--no-media .hero-main { grid-column: 1 / -1; }
  .hero--standard.hero--media-left .hero-media { order: -1; }
}
@media (min-width: 1280px) and (max-height: 820px) {
  .hero--standard .hero-card { padding-block: var(--sp-8); }
}
/* Navy hero (corporate pages): edge to edge band, content on the gutter lines. */
.hero--navy { background: var(--band); padding-top: 0; }
.hero--navy .hero-wrap { padding-inline: 0; }
.hero--navy .hero-card { background: transparent; border-radius: 0; padding-inline: var(--gutter); color: var(--on-band-muted); }
.hero--navy .hero-title { color: var(--on-band); }
.hero--standard .hero-title { max-width: 18ch; font-size: min(var(--fs-display), 4.25rem); }

/* Standard layout under the page head band: the band holds the H1 and the buttons, the media follows. */
.page-head .hero-actions, .page-head .hero-badges { margin: 0; }
.hero-after { padding-block: var(--sp-8) 0; }
@media (min-width: 768px) { .hero-after { padding-top: var(--sp-10); } }
.hero-after .hero-photo { aspect-ratio: auto; height: clamp(220px, 34vw, 520px); }
.hero-after .hero-phone-card { height: clamp(260px, 32vw, 460px); }
.hero-after .hero-phone { width: auto; height: 100%; }
.hero-after .hero-intro p { max-width: 68ch; }
.hero-media { min-width: 0; }
.hero-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--bg-tint);
}
.hero-photo-in { position: absolute; inset: 0; }
.hero-photo picture { display: block; width: 100%; height: 100%; }
.hero-img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1280px) {
  .hero-photo { aspect-ratio: auto; min-height: 380px; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-8); }
.hero-phone-card { width: 100%; display: grid; place-items: center; padding: var(--sp-6); border-radius: var(--r-lg); background: var(--bg-tint); }
.hero-phone { width: min(100%, 420px); height: auto; }
.hero-intro p { font-size: var(--fs-intro); line-height: 1.5; }

/* ======================================================================
   tariffs.cards / tariffs.km-index
   The price cards and the idle fee card of tariffs.cards live in tariffs.css (loaded with the block).
   ====================================================================== */
.index-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.index-title { font-size: var(--fs-h3); }
.bars { display: flex; flex-direction: column; gap: var(--sp-2); margin: var(--sp-2) 0; }
.bar-row { display: grid; grid-template-columns: minmax(64px, 30%) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); }
.bar-label { color: var(--ink-2); font-size: .875rem; font-weight: var(--fw-medium); }
.bar-track { display: block; height: 16px; border-left: 1px solid var(--viz-grid, var(--line)); }
@media (min-width: 768px) { .bar-track { height: 20px; } }
.bar { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--viz-ev, var(--ink)); }
.bar-row--fuel .bar { background: var(--viz-context, var(--line-strong)); }
.bar-value { color: var(--ink); font-size: .875rem; font-weight: var(--fw-semibold); min-width: 3.5em; text-align: right; }
.index-table summary { cursor: pointer; color: var(--ink); font-size: .875rem; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; width: max-content; }
.index-table table { width: 100%; margin-top: var(--sp-3); font-size: .875rem; }
.index-table th, .index-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.index-table td { text-align: right; }
.index-table thead th { color: var(--muted); font-weight: var(--fw-semibold); }
.index-note { color: var(--muted); font-size: .8125rem; }
.km-index .index-card { max-width: none; }


/* ======================================================================
   solutions.cards: corporate band (navy) and card layouts
   ====================================================================== */
/* Corporate section, laid out after the owner's reference picture (03.11.2026, DECISIONS). Source order is
   the phone order: the H2 with one line under it, the survey button and the phone, the solution cards as a
   rail, the steps as a vertical list. From 1024 px: the photo slideshow with 2 x 2 cards, the five steps in
   a row with "all solutions" at its end. The ground is near black with a thin red streak at the top
   (--corp-fill-rgb), one more exception to the navy grounds, like the home hero. */
.section.corp {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: rgb(var(--corp-fill-rgb));
}
.section.corp::before, .section.corp::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
/* The soft red light under the streak, and the streak itself. */
.section.corp::before { top: -180px; left: 52%; width: 560px; height: 380px; background: radial-gradient(closest-side, rgba(var(--hero-glow-rgb), .13), rgba(var(--hero-glow-rgb), 0)); }
.section.corp::after { top: -40px; left: 68%; width: 1px; height: 220px; background: linear-gradient(180deg, rgba(var(--hero-glow-rgb), .85), rgba(var(--hero-glow-rgb), 0)); box-shadow: 0 0 14px 2px rgba(var(--hero-glow-rgb), .45); transform: rotate(48deg); transform-origin: 50% 0; }
.corp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-8); margin-bottom: var(--sp-6); }
.corp-heading { flex: 1 1 28rem; min-width: 0; }
.corp-title { margin: 0; color: var(--on-band); font-weight: var(--fw-bold); }
.corp-accent { color: rgb(var(--hero-glow-rgb)); }
.corp-intro { max-width: 80ch; margin: var(--sp-2) 0 0; color: var(--on-band-muted); font-size: var(--fs-body); line-height: 1.5; }
.corp-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.btn.corp-cta { border-radius: var(--r-pill); box-shadow: 0 0 22px rgba(var(--hero-glow-rgb), .4); }
.corp-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--on-band); font-size: 1.125rem; font-weight: var(--fw-bold); text-decoration: none; }
.corp-phone:hover { text-decoration: underline; text-underline-offset: 4px; }

.corp-body { display: grid; gap: var(--sp-3); }
/* Photo slideshow (slides.js): the photos stacked on one spot, the active one on top (the first one without
   JavaScript); a new photo fades in over the previous one. Arrows and dots on a soft shade bottom left, the
   pause button (WCAG 2.2.2) bottom right. */
.corp-slides { position: relative; display: grid; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); background: rgb(var(--corp-fill-rgb)); aspect-ratio: 8 / 3; isolation: isolate; }
.corp-slide { grid-area: 1 / 1; z-index: 0; min-height: 0; margin: 0; }
.corp-slide.is-prev { z-index: 1; }
.corp-slide.is-active { z-index: 2; }
.corp-slides.is-changed .corp-slide.is-active { animation: corp-slide-in 900ms var(--ease) both; }
@keyframes corp-slide-in { from { opacity: 0; } to { opacity: 1; } }
.corp-slide picture, .corp-slide img { display: block; width: 100%; height: 100%; }
.corp-slide img { object-fit: cover; object-position: 50% 50%; }
/* The stations stand in the lower half of the daylight field photos; a little darker on the black ground. */
.corp-slide .corp-slide-field { object-position: 50% 62%; filter: brightness(.82); }
.corp-slides-ui { position: absolute; inset: auto 0 0; z-index: 3; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4) var(--sp-3); background: linear-gradient(0deg, rgba(var(--corp-fill-rgb), .6), rgba(var(--corp-fill-rgb), 0)); pointer-events: none; }
.corp-slides-ui > * { pointer-events: auto; }
.corp-slides-arrow, .corp-slides-toggle { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(var(--corp-fill-rgb), .4); color: var(--on-band); cursor: pointer; transition: background-color var(--dur-1) var(--ease); }
.corp-slides-arrow:hover, .corp-slides-toggle:hover { background: rgba(var(--corp-fill-rgb), .8); }
.corp-slides-toggle { margin-left: auto; }
/* Pause: two bars; play (when paused): a triangle. */
.corp-slides-glyph { width: 10px; height: 12px; background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%); }
.corp-slides.is-paused .corp-slides-glyph { width: 11px; height: 12px; margin-left: 2px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.corp-slides-dots { display: flex; gap: 0; }
.corp-slides-dots button { display: grid; place-items: center; width: 20px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; }
.corp-slides-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .75); transition: background-color var(--dur-2) var(--ease); }
.corp-slides-dots [aria-current="true"] span { width: 10px; height: 10px; background: rgb(var(--hero-glow-rgb)); }
.corp-slides :focus-visible { outline: 2px solid var(--focus-ring-on-band); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .corp-slides.is-changed .corp-slide.is-active { animation: none; } }
/* Phones already opened on a large image; the section stays short there. */
@media (max-width: 767.98px) { .corp-slides { display: none; } }

/* Solution cards: a swipe rail below 1024 px (docs/MOTION.md §10), 2 x 2 from there. Name, one line and the
   round arrow on the left; the picture on the right, melting into the card's ground. */
.segs-rail { --rail-w: min(84vw, 360px); }
.rail-foot { display: flex; align-items: center; gap: var(--sp-5); }
.rail-foot .rail-progress { flex: 1 1 auto; }
.seg {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-3);
  height: 100%;
  min-height: 150px;
  padding: var(--sp-4) var(--sp-5);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-lg);
  background: rgb(var(--corp-card-rgb));
  color: var(--on-band);
  text-decoration: none;
  transition: border-color var(--dur-2) var(--ease);
}
a.seg:hover { border-color: rgba(var(--hero-glow-rgb), .55); }
a.seg:focus-visible { outline: 2px solid var(--focus-ring-on-band); outline-offset: 2px; }
.seg-pic { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 52%; }
.seg-pic picture, .seg-pic img { display: block; width: 100%; height: 100%; }
.seg-pic img { object-fit: cover; object-position: 60% 50%; transition: transform 600ms var(--ease); }
a.seg:hover .seg-pic img { transform: scale(1.04); }
.seg-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--corp-card-rgb)) 0, rgba(var(--corp-card-rgb), 0) 45%); }
.seg-pic--art { padding: var(--sp-2); }
.seg-art { width: 100%; height: 100%; object-fit: contain; }
.seg-txt { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.seg-title { color: var(--on-band); font-size: var(--fs-h4); font-stretch: var(--stretch-heading); line-height: 1.25; }
.seg-text { max-width: 58%; color: var(--on-band-muted); font-size: var(--fs-small); line-height: 1.4; }
.seg-more { display: inline-flex; align-items: center; margin-top: auto; }
.seg-more-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The card's way in: a round arrow that fills white on hover. */
.seg-go {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.seg-go .i { transition: transform var(--dur-2) var(--ease); }
a.seg:hover .seg-go, a.seg:focus-visible .seg-go { border-color: var(--on-band); background: var(--on-band); color: rgb(var(--corp-fill-rgb)); }
a.seg:hover .seg-go .i, a.seg:focus-visible .seg-go .i { transform: translateX(2px); }

/* The five steps: a round icon lit in red, the number, a line that fills while the list scrolls through
   the screen (docs/MOTION.md §6), the name and the text. Without JavaScript the line is full. */
.corp-steps { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-8); }
.chain { --seg: 4; display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.chain-step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--sp-3); padding-bottom: var(--sp-5); }
.chain-step:last-child { padding-bottom: 0; }
.chain-step:not(:last-child)::before,
.chain-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 58px;
  bottom: 6px;
  width: 2px;
  border-radius: 1px;
}
.chain-step:not(:last-child)::before { background: var(--on-band-line); }
.chain-step:not(:last-child)::after { background: rgb(var(--hero-glow-rgb)); transform-origin: 50% 0; transform: scaleY(0); }
.chain-ico { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(var(--hero-glow-rgb), .6); border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--hero-glow-rgb), .2), rgba(var(--hero-glow-rgb), .03)); box-shadow: 0 0 16px rgba(var(--hero-glow-rgb), .3); color: var(--on-band); }
.chain-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chain-top { display: flex; align-items: center; gap: var(--sp-2); }
.chain-num { color: rgb(var(--hero-glow-rgb)); font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: 1.2; }
.chain-line { display: none; }
.chain-name { color: var(--on-band); font-size: var(--fs-body); font-weight: var(--fw-title); line-height: 1.3; }
.chain-text { color: var(--on-band-muted); font-size: var(--fs-small); line-height: 1.4; }
html.motion:is(.motion-native, .motion-ready) .chain-step { --fill: clamp(0, (var(--p) - var(--k)) * var(--seg), 1); }
html.motion:is(.motion-native, .motion-ready) .chain-step:not(:last-child)::after { transform: scaleY(var(--fill)); }
.corp-more { align-self: flex-end; color: var(--on-band); white-space: nowrap; }

@media (min-width: 1024px) {
  .section.corp { padding-block: calc(var(--site-head-h) + var(--sp-6)) var(--sp-8); }
  /* Up to 1279 px the photo stands above the cards, so the cards keep room for their text. */
  .corp-slides { aspect-ratio: 16 / 5; }
  .segs-rail .rail-track {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: var(--sp-3);
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  .segs-rail .rail-item { width: auto; min-height: 0; }
  .segs-rail .rail-foot { display: none; }

  /* The steps in a row ("all solutions" under it, at its end from 1280 px). Here the line runs beside the number to the next step
     and ends on a dot. */
  .corp-steps { margin-top: var(--sp-6); }
  .chain { flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); column-gap: var(--sp-4); min-width: 0; }
  .chain-step { padding-bottom: 0; }
  /* In the row the lines stand full, as in the reference; only the vertical list on phones fills with scroll. */
  html.motion:is(.motion-native, .motion-ready) .chain-step { --fill: 1; }
  .chain-step:not(:last-child)::before, .chain-step:not(:last-child)::after { content: none; }
  .chain-line { position: relative; display: block; flex: 1 1 0; height: 1px; background: linear-gradient(90deg, rgba(var(--hero-glow-rgb), .25), rgb(var(--hero-glow-rgb))) 0 0 / calc(var(--fill, 1) * 100%) 100% no-repeat, var(--on-band-line); }
  .chain-line::after { content: ""; position: absolute; top: -2px; right: 0; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--hero-glow-rgb)); box-shadow: 0 0 6px rgb(var(--hero-glow-rgb)); opacity: var(--fill, 1); }
}
@media (min-width: 1280px) {
  .corp-body { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; height: clamp(345px, 20vw, 440px); }
  .corp-body--solo { grid-template-columns: minmax(0, 1fr); }
  .corp-slides { aspect-ratio: auto; height: 100%; min-height: 0; }
  .corp-body > .segs-rail { min-height: 0; }
  .seg { min-height: 0; padding-block: 14px; }
  .corp-steps { flex-direction: row; align-items: flex-end; gap: var(--sp-5); }
  .chain { flex: 1 1 0; }
}
.sol-cards .sol-card { display: flex; flex-direction: column; gap: var(--sp-4); }
.sol-ico { color: var(--ink); }
.sol-art-wrap { display: grid; place-items: center; margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0; padding: var(--sp-3) var(--sp-4); aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-md) var(--r-md) 0 0; background: var(--bg-tint); }
@media (min-width: 768px) { .sol-art-wrap { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) 0; } }
.sol-art { width: 100%; height: 100%; object-fit: contain; }
.section--gray .sol-art-wrap { background: var(--bg-alt); }
.sol-title { font-size: var(--fs-h3); }

/* ======================================================================
   locations.map-preview (network) and locations.live-stats
   ====================================================================== */
.net-grid { align-items: start; }
.dist-card { display: flex; flex-direction: column; gap: var(--sp-4); margin: 0; }
.dist-title { font-size: var(--fs-h3); }
.coverage { display: flex; flex-direction: column; gap: var(--sp-2); }
.coverage-text { color: var(--ink-2); font-size: .9375rem; }
.meter--steps > span { flex: 1 1 0; }
.meter--steps .m-on { background: var(--viz-ev, var(--ink)); }
.meter--steps .m-off { background: var(--line); }
.net-side { display: flex; flex-direction: column; gap: var(--sp-5); }
.net-live { max-width: none; }
p.net-live:empty { display: none; }
.live-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--grid-gap); margin: 0; }
.live-stat { display: flex; flex-direction: column-reverse; gap: 2px; margin: 0; }
.live-stat dd { margin: 0; }
.live-stats--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .live-stats--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.section--navy .stat-num { color: var(--on-band); }
.section--navy .stat-label { color: var(--on-band-muted); }
.prov-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.prov {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--chip-h);
  padding: 0 6px 0 14px;
  border: 1px solid var(--line-hover);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-size: .875rem;
  font-weight: var(--fw-medium);
  text-decoration: none;
}
a.prov:hover { border-color: var(--ink); background: var(--bg-alt); }
.prov-num { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 6px; border-radius: var(--r-pill); background: var(--bg-tint); font-size: .75rem; font-weight: var(--fw-bold); }
.net-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); }
.net-app { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); width: 100%; }
.net-app p { color: var(--ink-2); }
.net-third { display: none; }
.new-sites { display: flex; flex-direction: column; gap: var(--sp-3); }
.new-sites-title { font-size: var(--fs-h4); }
.new-sites li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.new-name { color: var(--ink); font-weight: var(--fw-semibold); }
.new-meta { flex-basis: 100%; color: var(--muted); font-size: .8125rem; }
.net-soon { color: var(--ink-2); }
@media (min-width: 1600px) { .net-third { display: flex; flex-direction: column; gap: var(--sp-6); } }

/* ======================================================================
   home.network: live station map (dots from real coordinates) + counters board
   ====================================================================== */
/* Map height from the screen: with the section at the top of the screen, the heading, the map and the
   panel beside it fit under the floating header (1440 x 900, 1536 x 864, 1920 x 1080). The panel is as
   tall as the map (both end on one line); a taller panel stretches the map. Phones and tablets: a tall
   map, the panel under it. */
.network {
  --net-top: max(var(--section-y), calc(var(--site-head-h) + var(--sp-4)));
  --net-h: clamp(320px, 62svh, 560px);
}
@media (min-width: 768px) { .network { --net-h: clamp(400px, 58svh, 640px); } }
@media (min-width: 1024px) {
  .network { --net-h: clamp(440px, calc(100svh - var(--net-top) - var(--fs-h2) * var(--lh-h2) - var(--section-head-gap) - var(--sp-6)), 880px); }
}
.network-grid { row-gap: var(--sp-6); }
.network-map-col, .network-side-col { display: flex; flex-direction: column; }
.net-map { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sp-3); margin: 0; }
.net-map-in {
  position: relative;
  display: grid;
  flex: 1 1 auto;
  place-items: center;
  min-height: var(--net-h);
  padding: clamp(20px, 3.4vw, 56px);
  border-radius: var(--r-xl);
  background: var(--bg-alt);
  overflow: hidden;
  container-type: size;
}
.section--gray .net-map-in { background: var(--surface); }
/* The drawing keeps its proportions (--ar, width / height) inside the box: the labels sit in % of it. */
.net-plot { position: relative; width: 100%; width: min(100cqw, 100cqh * var(--ar, 1.6)); }
.net-svg { display: block; width: 100%; height: auto; overflow: visible; }
.net-dot { stroke: var(--bg-alt); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; }
.section--gray .net-dot { stroke: var(--surface); }
.net-dot.s-a { fill: var(--status-available-fill, #12875A); }
.net-dot.s-b { fill: var(--status-busy, #2458C6); }
.net-dot.s-f { fill: var(--status-fault, #5F6673); }
/* District names at the centre of their stations (computed from the same coordinates). */
.net-label {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-size: .8125rem;
  line-height: 1.35;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 12px));
  pointer-events: none;
}
/* Two label sets placed without overlaps: the narrow one below 1024 px, the wide one from 1024 px. */
.net-label--w { display: none; }
@media (min-width: 1024px) { .net-label--w { display: inline-flex; } .net-label--n { display: none; } }
.net-label--below { transform: translate(-50%, 12px); }
.net-label--right { transform: translate(12px, -50%); }
.net-label--left { transform: translate(calc(-100% - 12px), -50%); }
.net-label b { font-weight: var(--fw-semibold); }
.net-label .num { color: var(--muted); font-weight: var(--fw-semibold); }
.net-scale {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7px;
  border: 1.5px solid var(--line-strong);
  border-top: 0;
}
.net-scale > span { position: absolute; left: 0; bottom: 10px; color: var(--muted); font-size: .75rem; font-weight: var(--fw-semibold); white-space: nowrap; }
.net-cap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-6); color: var(--ink-2); font-size: .875rem; }
.net-cap-title { font-weight: var(--fw-semibold); color: var(--ink); }
.net-legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); margin: 0; padding: 0; list-style: none; color: var(--muted); }
.net-legend li { display: inline-flex; align-items: center; gap: 6px; }
.net-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.net-legend b { color: var(--ink); font-weight: var(--fw-semibold); }
.net-legend .lg-a { --c: var(--status-available-fill, #12875A); }
.net-legend .lg-b { --c: var(--status-busy, #2458C6); }
.net-legend .lg-f { --c: var(--status-fault, #5F6673); }
/* Desktop: the caption and colour key float on the map's top left corner (the zoom buttons are on the
   right), so the map and the panel end on the same line. */
@media (min-width: 1024px) {
  .net-cap {
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
    z-index: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    max-width: calc(100% - 96px);
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    pointer-events: none;
  }
  .net-cap .net-legend { gap: var(--sp-1) var(--sp-4); font-size: .75rem; font-weight: var(--fw-semibold); }
  .net-cap .net-legend li::before { width: 8px; height: 8px; }
}
/* Scroll: the stations appear from the centre of the network outwards while the map comes into view. */
html.motion:is(.motion-native, .motion-ready) .net-dot {
  --t: clamp(0, (var(--p) - var(--d) * .8) * 9, 1);
  opacity: var(--t);
  transform: scale(calc(.25 + var(--t) * .75));
}
html.motion:is(.motion-native, .motion-ready) .net-label { opacity: clamp(0, (var(--p) - .55) * 5, 1); }
/* Live map (home-network.js adds .net-live): MapLibre fills the poster's box, so nothing moves when it
   takes over. The drawn picture stays until the map is ready; the map then fades in over it. */
/* Two classes: maplibre-gl.css (loaded later) gives its container position: relative. */
.net-map-in > .net-live { position: absolute; inset: 0; }
.net-live .maplibregl-canvas:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: -3px; }
html.motion .net-map.is-live .net-live { animation: net-live-in var(--dur-reveal, 600ms) var(--ease-out, ease) both; }
@keyframes net-live-in { from { opacity: 0; } }

/* Panel beside the map (under it on phones and tablets): the totals as 2 x 2 tiles that share the free
   height, the district coverage and the suggestion card at the bottom. */
.net-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-xl);
  background: var(--bg-alt);
}
@media (min-width: 768px) { .net-panel { gap: var(--sp-6); padding: var(--sp-6); } }
/* Short laptop screens (up to 820 px tall): tighter rhythm so the panel stays within the map's height. */
@media (min-width: 1024px) and (max-height: 820px) { .net-panel { gap: var(--sp-4); padding: var(--sp-5); } }
.section--gray .net-panel { background: var(--surface); }
.net-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--sp-3); margin: 0; }
@media (min-width: 768px) and (max-width: 1023.98px) { .net-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .net-board { flex: 1 1 auto; } }
/* Tile: number and label centred (column-reverse: dt after dd in the markup) over a large, very faint
   watermark icon that runs off the bottom right corner (decorative, behind the text). */
.net-stat {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 116px;
  padding: var(--sp-5) var(--sp-4);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}
.section--gray .net-stat { background: var(--bg-alt); }
.net-stat dt { color: var(--ink-2); font-size: .875rem; font-weight: var(--fw-medium); line-height: 1.3; }
.net-stat dd { margin: 0; }
.net-stat-mark {
  position: absolute;
  right: -8%;
  bottom: -14%;
  z-index: -1;
  width: auto;
  height: min(78%, 180px);
  aspect-ratio: 1;
  color: var(--ink);
  opacity: .06;
  stroke-width: 1.25;
  pointer-events: none;
}
.net-fig {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: var(--ink);
  font-size: clamp(2.25rem, 1.2rem + 2.4vw, 3.5rem);
  font-weight: var(--fw-bold);
  font-stretch: var(--stretch-heading);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.net-unit { color: var(--muted); font-size: .4em; font-weight: var(--fw-semibold); letter-spacing: 0; }
.net-panel .net-app { padding-top: 0; border-top: 0; }
/* Suggestion card, as wide as the tiles: pin icon, a short bold line, one secondary (navy) button.
   The button takes its own full row when the card is narrow (phones, 1024 px panels). */
.net-suggest {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--surface);
}
.section--gray .net-suggest { background: var(--bg-alt); }
.net-suggest-ico { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-alt); color: var(--ink); }
.section--gray .net-suggest-ico { background: var(--surface); }
.net-suggest-text { flex: 1 1 8rem; margin: 0; color: var(--ink); font-weight: var(--fw-semibold); line-height: 1.3; }
.net-suggest-btn { flex: none; }
@container (max-width: 420px) { .net-suggest-btn { flex: 1 1 100%; } }

/* ======================================================================
   home.charge-story: pinned panel (the active step's title and drawing) + scrolling steps
   ====================================================================== */
.charge-story { row-gap: var(--sp-6); }
.charge-panel {
  position: sticky;
  top: calc(var(--header-h-mobile) + var(--sp-2));
  z-index: 2;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--band-raised);
  transition: transform var(--dur-3) var(--ease);
}
html.hdr-hidden .charge-panel { transform: translate3d(0, calc(var(--header-h-mobile) * -1), 0); }
/* Phones: a slim bar, the step's drawing on the left and its title next to it. The drawing's own
   transparent margin runs into the bar padding (negative block margins), so the bar stays low. */
.charge-frame { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: var(--sp-4); align-items: center; }
.charge-art { grid-column: 1; grid-row: 1; width: 104px; height: 78px; margin-block: -6px -12px; }
.charge-title { grid-column: 2; grid-row: 1; color: var(--on-band); font-size: 1.0625rem; font-weight: var(--fw-title); line-height: 1.25; }
/* The frames crossfade in place (no slide), and switch at once with reduced motion. */
.charge-frame.story-frame:not(.is-active) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .charge-frame.story-frame, .charge-frame.story-frame:not(.is-active) { transition: none; }
}
.charge-panel .stripe-steps { height: 4px; }

.charge-steps { display: flex; flex-direction: column; }
.charge-step {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: var(--sp-4);
  row-gap: var(--sp-2);
  align-content: start;
  min-height: max(22vh, 180px);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--on-band-line);
}
.charge-step-num { grid-row: span 2; color: var(--on-band); font-size: 2.25rem; font-weight: var(--fw-bold); font-stretch: var(--stretch-display); line-height: 1; }
.charge-step-title { color: var(--on-band); font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem); font-stretch: var(--stretch-heading); }
.charge-step-text { color: var(--on-band-muted); font-size: 1.0625rem; max-width: 46ch; }
/* Cable tip as a card (owner 29.09.2026): the Type 2 plug on a white tile (the plug drawings are made for
   light grounds), a short title and the sentence; on the navy band a lighter pane with a hairline edge. */
.charge-tip {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: fit-content;
  max-width: 100%;
  margin-top: var(--sp-8);
  padding: var(--sp-3) var(--sp-6) var(--sp-3) var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--bg-alt);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-2);
}
.charge-tip-tile { display: grid; flex: none; place-items: center; width: 84px; height: 84px; border-radius: var(--r-md); background: #FFFFFF; }
.charge-tip-art { display: block; width: 68px; height: auto; }
.charge-tip-body { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.charge-tip-title { color: var(--ink); font-size: 1.125rem; font-weight: var(--fw-title); line-height: 1.3; }
.charge-tip-text { font-size: .9375rem; line-height: 1.5; }
.section--navy .charge-tip { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--on-band-line); color: var(--on-band-muted); }
.section--navy .charge-tip-title { color: var(--on-band); }
@media (max-width: 559.98px) {
  .charge-tip { align-items: flex-start; gap: var(--sp-4); width: 100%; padding: var(--sp-3); }
  .charge-tip-tile { width: 64px; height: 64px; }
  .charge-tip-art { width: 52px; }
}
@media (min-width: 1024px) {
  /* The panel height follows the screen: a large drawing, yet short enough to stay pinned until the
     last step is active (steps are 32vh tall and switch at 45 % of the screen). */
  .charge-panel {
    top: calc(var(--topbar-h-compact) + var(--header-h-compact) + var(--sp-8));
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    height: clamp(440px, calc(77vh - 150px), 680px);
    padding: var(--sp-10);
    border-radius: var(--r-xl);
    transform: none !important;
  }
  /* Title on top, the drawing fills the rest of the panel (kept whole, centred). */
  .charge-frames { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .charge-frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: var(--sp-6); align-items: stretch; min-height: 0; }
  .charge-title { grid-column: 1; grid-row: 1; font-size: clamp(1.75rem, .9rem + 1.6vw, 2.75rem); font-weight: var(--fw-bold); font-stretch: var(--stretch-heading); letter-spacing: -.015em; line-height: 1.1; }
  .charge-art { grid-column: 1; grid-row: 2; width: 100%; height: 100%; min-height: 0; margin: 0; object-fit: contain; }
  .charge-panel .stripe-steps { flex: none; height: 6px; }
  .charge-step { grid-template-columns: 72px minmax(0, 1fr); min-height: max(32vh, 250px); padding: var(--sp-10) 0; }
  .charge-step-num { font-size: 3.5rem; }
}
/* Pinned (motion.js .is-pinned, motion.css "Pinned story"): the heading, the panel and the steps fit
   one screen under the header and the scroll moves through the steps. */
@media screen and (max-width: 1023.98px) {
  /* Narrow screens: a card with the step's drawing; the active step's number, title and text under it.
     The card never gets shorter than 200 px: a screen without that room is not pinned (motion.js). */
  .story-pin.is-pinned .charge-panel { display: flex; flex-direction: column; gap: var(--sp-4); min-height: 200px; padding: var(--sp-4) var(--sp-4) var(--sp-5); transform: none; }
  .story-pin.is-pinned .charge-frames { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .story-pin.is-pinned .charge-frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); min-height: 0; }
  .story-pin.is-pinned .charge-title { display: none; }
  .story-pin.is-pinned .charge-art { grid-column: 1; grid-row: 1; width: 100%; height: 100%; min-height: 0; margin: 0; object-fit: contain; }
  .story-pin.is-pinned .charge-step { min-height: 0; padding: 0; border-top: 0; }
}
@media screen and (min-width: 1024px) {
  .story-pin.is-pinned .charge-panel { height: auto; gap: clamp(var(--sp-4), 3svh, var(--sp-8)); padding: clamp(var(--sp-6), 4svh, var(--sp-10)); }
  .story-pin.is-pinned .charge-frames { min-height: 160px; }
  .story-pin.is-pinned .charge-step { min-height: auto; padding: clamp(var(--sp-3), 2svh, var(--sp-6)) 0; }
  .story-pin.is-pinned .charge-step-text { max-width: 62ch; }
}

/* "Dört Adımda Şarj" after the examples from the owner's team (03.11.2026, DECISIONS): a deep navy ground;
   the step's picture filling a card with the four progress bars on it; each step a row of a round number,
   a thin line, an icon tile, the name and the text, split by hairlines. The active step lights up in red
   and the others keep their full colour. A step without a picture shows its drawing in the same card. */
.section--navy.charge-sec--story { background: linear-gradient(160deg, var(--navy-900), var(--navy-950)); }
.charge-step-num { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .07); font-size: 1.375rem; transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.charge-step.is-active .charge-step-num { border-color: rgb(var(--hero-glow-rgb)); background: radial-gradient(closest-side, rgba(var(--hero-glow-rgb), .55), rgba(var(--hero-glow-rgb), .25)); box-shadow: 0 0 18px rgba(var(--hero-glow-rgb), .55); }
.charge-step-ico { display: none; }
.charge-step-body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.charge-art--photo { object-fit: cover; border-radius: var(--r-sm); }
.story-pin.is-pinned .charge-art--photo { object-fit: cover; }
.charge-photo { display: block; grid-column: 1; grid-row: 1; min-height: 0; }
.story-pin.is-pinned .charge-photo { width: 100%; height: 100%; }
@media (min-width: 1024px) {
  .charge-story { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); column-gap: clamp(var(--sp-8), 4vw, 68px); }
  .charge-story .story-media, .charge-story .story-steps { grid-column: auto; }
  .charge-panel, .story-pin.is-pinned .charge-panel {
    display: block;
    height: auto;
    aspect-ratio: 6 / 5;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--r-lg);
    background: var(--navy-900);
  }
  .charge-frames, .story-pin.is-pinned .charge-frames { height: 100%; min-height: 0; }
  .charge-frame { height: 100%; grid-template-rows: minmax(0, 1fr); row-gap: 0; }
  .charge-title { display: none; }
  .charge-art { grid-row: 1; padding: var(--sp-10); }
  .charge-art--photo { padding: 0; object-fit: cover; border-radius: 0; }
  .charge-photo { width: 100%; height: 100%; }
  .charge-photo img { display: block; width: 100%; height: 100%; }
  /* The four progress bars lie on the picture, near its lower edge. */
  .charge-panel .stripe-steps { position: absolute; inset: auto 5% var(--sp-6); z-index: 3; height: 5px; gap: var(--sp-2); }
  .section--navy .charge-panel .stripe-steps > span { border-radius: 3px; background: rgba(255, 255, 255, .28); }
  .section--navy .charge-panel .stripe-steps > span.is-active { background: rgb(var(--hero-glow-rgb)); box-shadow: 0 0 10px rgba(var(--hero-glow-rgb), .6); }
  .section--navy .story-pin.is-pinned .charge-panel .stripe-steps > span.is-active { background: rgba(255, 255, 255, .28); box-shadow: none; }
  .story-pin.is-pinned .charge-panel .stripe-steps > span.is-active::after { background: rgb(var(--hero-glow-rgb)); }

  .charge-steps { justify-content: space-between; }
  .charge-step, .story-pin.is-pinned .charge-step {
    flex: 1 1 0;
    grid-template-columns: 58px 64px minmax(0, 1fr);
    column-gap: var(--sp-8);
    align-items: center;
    align-content: center;
    min-height: 0;
    padding: clamp(var(--sp-3), 2.4svh, var(--sp-6)) 0;
    border-top: 1px solid var(--on-band-line);
  }
  .charge-step:first-child, .story-pin.is-pinned .charge-step:first-child { border-top: 0; }
  html.motion .charge-step.story-step:not(.is-active) { opacity: 1; }
  .charge-step-num { grid-row: auto; width: 58px; height: 58px; font-size: 1.875rem; }
  .charge-step-ico { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-left: var(--sp-6); border-radius: var(--r-md); background: rgba(255, 255, 255, .07); color: var(--on-band); transition: background-color var(--dur-2) var(--ease); }
  .charge-step-ico::before { content: ""; position: absolute; top: 0; bottom: 0; left: -28px; width: 1px; background: var(--on-band-line); transition: background-color var(--dur-2) var(--ease); }
  .charge-step.is-active .charge-step-ico { background: rgba(var(--hero-glow-rgb), .24); }
  .charge-step.is-active .charge-step-ico::before { background: rgb(var(--hero-glow-rgb)); }
  .charge-step-body { padding-left: var(--sp-6); }
  .charge-step-title { font-size: clamp(1.25rem, 1rem + .5vw, 1.5rem); }
  .charge-step-text { font-size: var(--fs-body); }
  .story-pin.is-pinned .charge-story { align-items: stretch; }
  .story-pin.is-pinned .story-steps { min-height: 0; }
  /* On a pinned screen the card takes the free height, not its own proportion. */
  .story-pin.is-pinned .charge-panel { aspect-ratio: auto; height: 100%; min-height: 0; }
}

/* ======================================================================
   vehicles.charge-time (guide half while the vehicle data is not available)
   ====================================================================== */
.guide { display: flex; flex-direction: column; gap: var(--sp-6); }
.guide .sec-head { margin-bottom: 0; }
.guide-title { margin-bottom: var(--sp-2); }
.steps { display: grid; gap: var(--sp-5) var(--grid-gap); counter-reset: step; }
@media (min-width: 768px) { .guide--full .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guide--full .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: var(--sp-4); row-gap: 4px; align-content: start; }
.step-num {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--band);
  color: var(--on-band);
  font-size: .9375rem;
  font-weight: var(--fw-bold);
}
.step-name { padding-top: 6px; color: var(--ink); font-size: 1.0625rem; font-weight: var(--fw-title); }
.step-text { color: var(--ink-2); font-size: .9375rem; }
.tip {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: fit-content;
  max-width: 100%;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: var(--stale-tint);
  color: var(--ink);
  font-weight: var(--fw-medium);
}
.tip .i { color: var(--stale); margin-top: 2px; }
/* A vehicle card on its own (layout "solo") uses the whole row instead of leaving half of it empty. */
.charge-grid > :only-child { grid-column: 1 / -1; }
.vehicle-card { display: flex; flex-direction: column; gap: var(--sp-4); height: 100%; border-radius: var(--r-lg); }
.vehicle-rows { display: flex; flex-direction: column; gap: var(--sp-2); }
.vehicle-row { display: flex; align-items: center; gap: var(--sp-3); }

/* ======================================================================
   pages.text-image
   ====================================================================== */
.ti-grid { align-items: center; row-gap: var(--sp-8); }
.ti-text { display: flex; flex-direction: column; gap: var(--sp-5); }
.ti-title { max-width: 24ch; }
.ti-body { color: var(--ink-2); font-size: var(--fs-intro); line-height: 1.5; }
.ti-list { display: grid; gap: var(--sp-3) var(--sp-6); }
@media (min-width: 768px) { .ti-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ti-list li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--ink); font-weight: var(--fw-medium); }
.ti-list .i { color: var(--ink); flex: none; }
.section--navy .ti-list li, .section--navy .ti-list .i { color: var(--on-band); }
.ti-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5) var(--sp-8); margin-top: var(--sp-2); }
.ti-qr { display: none; align-items: center; gap: var(--sp-4); color: var(--muted); font-size: .875rem; max-width: 22ch; }
@media (min-width: 1024px) { .ti-qr { display: flex; } }
.ti-media { overflow: hidden; border-radius: var(--r-lg); }
.ti-media img { width: 100%; height: auto; }
.ti-media--phone { display: grid; place-items: center; padding: var(--sp-6) var(--sp-4); background: var(--bg-tint); }
.ti-media--phone img { width: min(100%, 520px); }
@media (max-width: 767.98px) { .ti-media--phone { padding: var(--sp-4); } .ti-media--phone img { width: min(100%, 300px); } }
/* The app screen drifts a little against the scroll (docs/MOTION.md §6). */
html.motion:is(.motion-native, .motion-ready) .ti-media--phone img { transform: translate3d(0, calc((.5 - var(--p)) * 64px), 0); }
.ti-aside { display: none; }
@media (min-width: 1024px) { .ti--left .ti-media-col { order: -1; } }
/* 1024-1599 px: the QR code on a hairline tile beside its hint, next to the badges. */
.ti-qr .qr-tile { padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ti-qr .qr-tile img { width: 104px; height: 104px; }
.ti-qr-text { color: var(--ink-2); line-height: 1.45; }
/* From 1600 px the download card: the same tint as the app screen beside it, as tall as it, everything
   centred: a large QR code on a white tile, its hint, the badges. */
@media (min-width: 1600px) {
  .ti-aside { display: flex; align-self: stretch; }
  .ti-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    width: 100%;
    padding: var(--sp-10) var(--sp-6);
    border-radius: var(--r-lg);
    background: var(--bg-tint);
    text-align: center;
  }
  .ti-app-qr .qr-tile { padding: var(--sp-4); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
  .ti-app-qr .qr-tile img { width: clamp(184px, 11vw, 232px); height: auto; aspect-ratio: 1; }
  .ti-app .ti-qr-text { max-width: 22ch; font-size: 1rem; font-weight: var(--fw-medium); }
  .ti-app .store-badges { justify-content: center; margin-top: var(--sp-2); }
}

/* ======================================================================
   content.references
   ====================================================================== */
.logo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 768px) { .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); } }
@media (min-width: 1024px) { .logo-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.logo-tile {
  position: relative;
  aspect-ratio: 1 / .56;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
/* The logo sits in the middle of the tile, at most 70 % wide and 50 % high. */
.logo-tile img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 50%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .8;
  transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.logo-tile:hover img { filter: none; opacity: 1; }

/* The sliding rows (layout "marquee", owner 13.10.2026): three rows, each a track of four copies of its
   run that glides by one run and starts over without a seam, the middle row to the left and the others
   to the right (--dur sets the pace of each), fading out at both edges of the screen; a row pauses under
   the pointer and under keyboard focus. With reduced motion the rows stand still and scroll by hand. */
.logo-marquee-rows { display: grid; gap: var(--sp-3); }
@media (min-width: 768px) { .logo-marquee-rows { gap: var(--sp-4); } }
.refs--marquee > .wrap { padding-inline: 0; }
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-marquee-track { display: flex; width: max-content; animation: logo-marquee var(--dur, 70s) linear infinite; }
.logo-marquee--rev .logo-marquee-track { animation-direction: reverse; }
.logo-marquee:hover .logo-marquee-track, .logo-marquee:focus-within .logo-marquee-track { animation-play-state: paused; }
.logo-run { display: flex; flex: none; gap: var(--sp-3); margin: 0; padding: 0 var(--sp-3) 0 0; list-style: none; }
.logo-run .logo-tile { flex: none; width: 150px; }
@media (min-width: 768px) {
  .logo-run { gap: var(--sp-4); padding-right: var(--sp-4); }
  .logo-run .logo-tile { width: 200px; }
}
@keyframes logo-marquee { to { transform: translate3d(-25%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logo-marquee-track { animation: none; }
}

/* ======================================================================
   content.faq (with the 24/7 support card)
   Section head (H2 + "Tüm sorular") on its own row; below it the questions and, beside them, the navy
   support card level with the first question (sticky from 1024 px). Phones: list, then the card.
   ====================================================================== */
.faq-grid { align-items: start; row-gap: var(--sp-8); }
@media (min-width: 1024px) {
  .faq-aside { position: sticky; top: calc(var(--site-head-h) + var(--sp-6)); }
}

/* Questions: soft cards; with-support splits them into two independent columns from 1280 px. */
.faq-qs, .faq-col { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 768px) { .faq-qs, .faq-col { gap: var(--sp-4); } }
@media (min-width: 1280px) {
  .faq-qs--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
}
.faq-item {
  --faq-open: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.section--gray .faq-item { --faq-open: var(--surface); }
.faq-item:hover { border-color: var(--line-hover); }
.faq-item[open] { background: var(--faq-open); border-color: var(--line-hover); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 72px;
  padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  border-radius: inherit;
  color: var(--ink);
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
/* Keyboard focus rings the whole card. */
.faq-q:focus-visible { outline: none; }
.faq-item:has(> .faq-q:focus-visible) { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; }
@supports not selector(:has(*)) {
  .faq-q:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: -2px; }
}
/* Round toggle: a plus that turns into a minus on a navy disc when the answer is open. */
.faq-toggle {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line-hover);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-3) var(--ease);
}
.faq-toggle::before, .faq-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease);
}
.faq-toggle::after { transform: rotate(90deg); }
.faq-item:hover .faq-toggle { border-color: var(--ink); }
.faq-item[open] .faq-toggle { border-color: var(--ink); background: var(--ink); color: var(--on-band); transform: rotate(180deg); }
.faq-item[open] .faq-toggle::after { transform: rotate(0deg); }
.faq-a { padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-2); line-height: 1.7; }
.faq-a > * { max-width: var(--measure); }
.faq-a > * + * { margin-top: var(--sp-3); }
.faq-a :is(ul, ol) { padding-left: 1.25em; }
@media (min-width: 768px) {
  .faq-q { min-height: 84px; padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6); font-size: 1.0625rem; }
  .faq-a { padding: 0 var(--sp-6) var(--sp-6); }
}
/* The answer opens and closes smoothly where the browser can animate <details> (never with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
  @supports selector(::details-content) {
    .faq-item { interpolate-size: allow-keywords; }
    .faq-item::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur-3) var(--ease), content-visibility var(--dur-3) var(--ease) allow-discrete; }
    .faq-item[open]::details-content { block-size: auto; }
  }
}

/* Navy 24/7 support card (home block, list layout and /sss): title, phone, e-mail, two link rows. */
.support-card { container-type: inline-size; display: flex; flex-direction: column; align-items: flex-start; padding: var(--sp-6) var(--sp-6) var(--sp-2); border-radius: var(--r-lg); }
@media (min-width: 1024px) { .support-card { padding: var(--sp-8) var(--sp-8) var(--sp-3); } }
.support-head { display: flex; align-items: center; gap: var(--sp-3); }
.support-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--band-raised); color: var(--on-band); }
.support-title { color: var(--on-band); font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.3; }
.support-phone {
  margin-top: var(--sp-4);
  color: var(--on-band);
  font-size: var(--fs-phone);
  font-size: min(var(--fs-phone), 12.5cqi);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}
.support-phone:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.support-mail { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); color: var(--on-band-muted); text-decoration: none; overflow-wrap: anywhere; }
.support-mail:hover { color: var(--on-band); }
.support-mail:hover span { text-decoration: underline; text-underline-offset: 3px; }
.support-links { align-self: stretch; margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.support-links li { border-top: 1px solid var(--on-band-line); }
.support-links a { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--control-h); padding: var(--sp-2) 0; color: var(--on-band); font-weight: var(--fw-semibold); line-height: var(--lh-ui); text-decoration: none; }
.support-links a > .i:first-child { color: var(--on-band-subtle); }
.support-links span { flex: 1; min-width: 0; }
.support-go { transition: transform var(--dur-2) var(--ease); }
.support-links a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.support-links a:hover .support-go { transform: translateX(3px); }

/* ======================================================================
   campaigns.cards · posts.cards · content.testimonials
   ====================================================================== */
.camp-card, .post-card, .review { display: flex; flex-direction: column; gap: var(--sp-3); }
.camp-img, .post-img { width: calc(100% + 2 * var(--sp-5)); max-width: none; aspect-ratio: 16 / 9; object-fit: cover; margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-2); border-radius: var(--r-md) var(--r-md) 0 0; }
@media (min-width: 768px) {
  .camp-img, .post-img { width: calc(100% + 2 * var(--sp-6)); margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-2); }
}
.camp-title, .post-title { font-size: var(--fs-h3); }
.camp-benefit { color: var(--ink); font-size: 1.75rem; font-weight: var(--fw-bold); line-height: 1.15; }
.post-meta, .camp-meta, .review-meta { color: var(--muted); font-size: .875rem; }
.review-stars { display: flex; gap: 2px; }
.review-stars .star-on { color: var(--ink); }
.review-stars .star-off { color: var(--line-hover); }
.review-quote { margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.6; }
.review-meta { padding-top: var(--sp-3); border-top: 1px dashed var(--line); }
.review-meta strong { color: var(--ink); }

/* ======================================================================
   pages.cta-band (closing card)
   ====================================================================== */
.cta-band { padding-block: var(--sp-6) var(--sp-16); }
.cta-wrap { padding-inline: var(--gutter); }
.cta-card {
  display: grid;
  gap: var(--sp-8);
  padding: var(--cta-pad);
  border-radius: var(--r-xl);
  background: var(--bg-tint);
}
.cta-band--navy { background: var(--bg); }
.cta-band--navy .cta-card { background: var(--band); color: var(--on-band-muted); }
.cta-band--navy .cta-title { color: var(--on-band); }
.cta-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
.cta-card--2 .cta-col + .cta-col { padding-top: var(--sp-8); border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .cta-card--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .cta-card--2 .cta-col:first-child { padding-right: var(--cta-pad); }
  .cta-card--2 .cta-col + .cta-col { padding: 0 0 0 var(--cta-pad); border-top: 0; border-left: 1px solid var(--line); }
}
.cta-title { font-size: 1.75rem; line-height: 1.2; max-width: 22ch; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); }
.cta-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 1.125rem; font-weight: var(--fw-bold); text-decoration: none; }
.cta-phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.cta-badges img { height: 44px; }