/* SmartSana Energies — Grid at Night
   Type follows the logo: Quicksand (the rounded geometric of SMARTSANA / energies) for display, labels and controls;
   Nunito (rounded humanist) for reading. Labels echo the spaced lowercase "energies" of the lockup.
   Central Africa from orbit at night (NASA Black Marble). Darkness is the problem, light is the work.
   Warm light (gold, ember) is reserved for power; everything else is cool satellite line-work. */
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-latin-ext.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Quicksand"; src: url("/assets/fonts/quicksand-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Quicksand"; src: url("/assets/fonts/quicksand-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --space: #04060B;
  --deep: #0A0F1A;
  --deep-2: #111827;
  --line: #5B6B85;
  --line-2: rgba(91, 107, 133, 0.45);
  --gold: #FFC857;
  --ember: #FF8A3D;
  --text: #E6EDF5;
  --text-2: #A5B1C4;
  --text-3: #7D8AA0;
  --gutter: clamp(16px, 4vw, 64px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--line) var(--space); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--space); color: var(--text); font-family: "Nunito", system-ui, sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.62; -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: var(--space); }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--space); }
::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--space); }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: "Quicksand", "Nunito", sans-serif; font-weight: 700; letter-spacing: -0.015em; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
.ico { width: 18px; height: 18px; flex: none; }
.coords, .ticket, .map-filter .n { font-variant-numeric: tabular-nums; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--gold); color: var(--space); padding: 10px 14px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 16px; }
section { scroll-margin-top: 72px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 20px; font-weight: 650; text-decoration: none; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.btn:active { transform: scale(0.97); }
.btn-wa { background: var(--gold); color: #1A1204; }
.btn-wa:hover { background: #FFD47A; }
.btn-ghost { border-color: var(--line); color: var(--text); background: rgba(10, 15, 26, 0.5); }
.btn-ghost:hover { border-color: var(--text-2); }
.btn.small { min-height: 40px; padding: 8px 14px; font-size: 0.9rem; }
.lnk { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--gold); }
.lnk .ico { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .lnk:hover .ico { transform: translateX(4px); } }

/* ---------- header ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 16px var(--gutter); }
.k-projects .top, .k-project .top { position: sticky; background: rgba(4, 6, 11, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line-2); }
.brand img { height: 40px; width: auto; }
.nav { display: flex; gap: clamp(12px, 1.6vw, 24px); margin-left: auto; }
.nav a { text-decoration: none; font-size: 0.94rem; color: var(--text-2); }
.nav a:hover { color: var(--text); }
.top-act { display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang a { padding: 6px 10px; font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; text-decoration: none; color: var(--text-2); }
.lang a[aria-current="true"] { background: var(--text); color: var(--space); }

/* ---------- hero: the night map ---------- */
.hero { position: relative; min-height: max(100svh, 680px); display: grid; grid-template-rows: 1fr auto; overflow: hidden; isolation: isolate; }
.hero-map { position: absolute; inset: 0; z-index: -1; }
.hero-map .map-stage, .hero-map .map-svg { width: 100%; height: 100%; }
.hero-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4, 6, 11, 0.92) 0%, rgba(4, 6, 11, 0.72) 30%, rgba(4, 6, 11, 0.05) 55%), linear-gradient(0deg, rgba(4, 6, 11, 0.95) 0%, rgba(4, 6, 11, 0) 30%), linear-gradient(180deg, rgba(4, 6, 11, 0.7) 0%, rgba(4, 6, 11, 0) 16%); }
.map-svg { display: block; }
.country { fill: none; stroke: var(--line-2); stroke-width: 0.7; vector-effect: non-scaling-stroke; }
.country.cemac { stroke: rgba(165, 177, 196, 0.5); stroke-dasharray: 3 3; }
.country.home { stroke: rgba(230, 237, 245, 0.85); stroke-width: 1.3; stroke-dasharray: none; fill: rgba(255, 200, 87, 0.025); }
.clabel { fill: rgba(165, 177, 196, 0.55); font: 700 9.5px "Quicksand", sans-serif; letter-spacing: 0.2em; text-anchor: middle; }
.hq .ring { fill: none; stroke: var(--text); stroke-width: 0.8; opacity: 0.7; transform-box: fill-box; transform-origin: center; animation: ping 3.2s var(--ease-out) 3; opacity: 0; }
.hq circle:not(.ring) { fill: var(--text); }
.hq text { fill: var(--text); font: 700 9px "Quicksand", sans-serif; letter-spacing: 0.16em; }
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.9; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.site { cursor: pointer; outline: none; transition: opacity 200ms ease; }
.site .bloom { fill: url(#glow); opacity: 0.85; transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.site .halo { fill: var(--gold); opacity: 0.6; transition: opacity 450ms var(--ease-out); }
.site .core { fill: #FFF4D6; transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out); }
.site[data-sector="education"] .halo { fill: #FFE3A3; }
.site[data-sector="business"] .halo { fill: var(--ember); }
.js .map:not(.lit) .site .bloom { opacity: 0; transform: scale(0.4); }
.js .map:not(.lit) .site .halo { opacity: 0; }
.js .map:not(.lit) .site .core { opacity: 0; transform: scale(0.6); }
.map.lit:not(.settled) .site .bloom, .map.lit:not(.settled) .site .halo, .map.lit:not(.settled) .site .core { transition-delay: calc(var(--d) + 200ms); }
.instant .site .bloom, .instant .site .halo, .instant .site .core { transition: none !important; }
.site.on .bloom, .site:focus-visible .bloom { transform: scale(1.5); opacity: 1; transition-duration: 200ms; }
.map[data-filter="health"] .site:not([data-sector="health"]), .map[data-filter="education"] .site:not([data-sector="education"]), .map[data-filter="business"] .site:not([data-sector="business"]) { opacity: 0.12; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .hq .ring { animation: none; opacity: 0.4; } }

.tip {
  position: absolute; left: var(--x); top: var(--y); z-index: 5; width: max-content; max-width: 280px;
  display: grid; gap: 2px; padding: 12px 14px; border: 1px solid rgba(255, 200, 87, 0.5); border-radius: 10px;
  background: rgba(10, 15, 26, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.86rem; line-height: 1.4; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.8);
  transform: translate(14px, -50%) scale(0.97); transform-origin: left center; opacity: 0;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.tip[data-side="left"] { transform: translate(calc(-100% - 14px), -50%) scale(0.97); transform-origin: right center; }
.tip.show { opacity: 1; transform: translate(14px, -50%) scale(1); }
.tip[data-side="left"].show { transform: translate(calc(-100% - 14px), -50%) scale(1); }
.tip[data-instant="1"] { transition-duration: 0ms; }
.tip strong { font-weight: 700; }
.tip span { color: var(--text-2); }
.tip .meta { font-size: 0.76rem; font-variant-numeric: tabular-nums; color: var(--text-3); }
.tip a { margin-top: 6px; color: var(--gold); font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.tip a .ico { width: 16px; height: 16px; }

.hero-copy { align-self: center; display: grid; gap: 24px; padding: 120px var(--gutter) 24px; max-width: min(720px, 58vw); }
.hero h1 { font-weight: 700; font-size: clamp(2.5rem, 4.8vw, 4.9rem); line-height: 1.02; letter-spacing: -0.025em; }
.hero .sub { color: var(--text-2); font-size: clamp(1.05rem, 1.25vw, 1.2rem); max-width: 50ch; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.hero-foot { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 12px 32px; padding: 0 var(--gutter) 28px; }
.facts { font-size: 0.9rem; color: var(--text-2); justify-self: end; text-align: right; max-width: 52ch; padding: 10px 14px; border-radius: 10px; background: rgba(4, 6, 11, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.facts .note { display: block; color: var(--text-3); font-size: 0.78rem; }
.coords { grid-column: 1 / -1; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--text-3); }
.map-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.map-filter button { appearance: none; font: inherit; font-size: 0.85rem; cursor: pointer; padding: 6px 12px; min-height: 36px; color: var(--text-2); background: rgba(10, 15, 26, 0.7); border: 1px solid var(--line); border-radius: 999px; transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
.map-filter button:active { transform: scale(0.97); }
.map-filter button[aria-pressed="true"] { background: var(--text); color: var(--space); border-color: var(--text); }
.map-filter .n { font-size: 0.75rem; opacity: 0.7; }
.map-filter .replay { border-color: rgba(255, 200, 87, 0.4); color: var(--gold); }

/* ---------- sections ---------- */
main > section:not(.hero) { padding: clamp(72px, 11vh, 128px) var(--gutter); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(32px, 5vh, 56px); }
.sec-head h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1.04; }
.sec-head p { color: var(--text-2); max-width: 60ch; }
.sec-head .lnk { grid-column: 2; }

.atlas { border-top: 1px solid var(--line-2); }
.site-lists { columns: 3 260px; column-gap: 48px; }
.region-list { margin-bottom: 32px; }
.region-list summary { break-after: avoid; }
.region-list summary { list-style: none; cursor: pointer; }
.region-list summary::-webkit-details-marker { display: none; }
.region-list h3 { font-size: 0.86rem; letter-spacing: 0.1em; color: var(--gold); padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 4px; }
.region-list h3 .n { color: var(--text-3); }
.region-list li { display: grid; padding: 9px 0; border-bottom: 1px solid rgba(91, 107, 133, 0.2); transition: opacity 200ms ease; break-inside: avoid; }
.region-list li.dim { opacity: 0.25; }
.region-list .nm { font-weight: 600; }
.region-list .nm a { color: var(--gold); text-decoration: none; }
.region-list .nm a:hover { text-decoration: underline; }
.region-list .tp { color: var(--text-3); font-size: 0.85rem; }
.src { margin-top: 32px; color: var(--text-3); font-size: 0.8rem; }

/* services: a lit grid of capabilities, one warm point each */
.services { background: linear-gradient(180deg, var(--space), var(--deep)); }

/* process: a flight path of six waypoints */
.process { background: var(--deep); }
.stations { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; }
.stations::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--line) 30%, var(--line) 70%, var(--ember)); }
.stations li { position: relative; padding: 36px 20px 0 0; display: grid; gap: 8px; align-content: start; }
.stations li::before { content: ""; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--space); border: 2px solid var(--gold); }
.stations .step { display: none; }
.stations h3 { font-size: 1.05rem; }
.stations p { color: var(--text-2); font-size: 0.95rem; }

/* portfolio: daylight windows cut into the night */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; text-decoration: none; background: var(--deep-2); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.28); }
.tile a::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 40px rgba(255, 200, 87, 0.18); }
.tile-img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.tile-img.noimg { display: block; background: radial-gradient(circle at 60% 40%, rgba(255, 200, 87, 0.25), transparent 50%), var(--deep-2); }
@media (hover: hover) and (pointer: fine) { .tile a:hover .tile-img { transform: scale(1.04); } }
.tile-body { position: absolute; inset: auto 0 0 0; display: grid; gap: 8px; padding: 48px 18px 16px; background: linear-gradient(to top, rgba(4, 6, 11, 0.95) 50%, rgba(4, 6, 11, 0)); }
.tile-title { font-weight: 700; font-size: 1.02rem; line-height: 1.32; }
.ticket { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; color: var(--text-2); letter-spacing: 0.02em; }
.ticket div { display: flex; gap: 6px; }
.ticket dt { color: var(--gold); font-family: "Quicksand", sans-serif; font-weight: 700; letter-spacing: 0.06em; text-transform: lowercase; }
.ticket dd { margin: 0; }

/* brands */
.brands { background: var(--deep); }
.logo-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.logo-row li { display: flex; align-items: center; justify-content: center; padding: 30px 16px; min-height: 112px; background: var(--deep); }
.logo-row img { max-height: 38px; max-width: 150px; width: auto; filter: brightness(0) invert(1); opacity: 0.8; transition: opacity 200ms ease; }
.logo-row li:hover img { opacity: 1; }

/* offers */
.dl { display: grid; gap: 6px; }
.dl a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 600; text-decoration: none; }
.dl a:hover { text-decoration: underline; }


.faq { background: var(--deep); }
.qa { max-width: 920px; border-top: 1px solid var(--line-2); }
.qa details { border-bottom: 1px solid var(--line-2); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px 0; font-weight: 650; font-size: 1.08rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa .pm { width: 16px; height: 16px; flex: none; position: relative; }
.qa .pm::before, .qa .pm::after { content: ""; position: absolute; inset: 7px 0 auto 0; height: 2px; border-radius: 2px; background: var(--gold); transition: transform 200ms var(--ease-out); }
.qa .pm::after { transform: rotate(90deg); }
.qa details[open] .pm::after { transform: rotate(0deg); }
.qa details p { padding: 0 48px 22px 0; color: var(--text-2); max-width: 70ch; }

.channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.ch { display: grid; grid-template-columns: 8rem 1fr auto; align-items: center; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line-2); text-decoration: none; transition: color 200ms ease; }
.ch .lbl { font-size: 0.86rem; color: var(--text-3); }
.ch .v { font-weight: 700; font-size: clamp(1.05rem, 1.7vw, 1.45rem); overflow-wrap: anywhere; }
.ch .v.small { font-weight: 450; font-size: 1rem; }
.ch:hover { color: var(--gold); }
.ch-wa .v, .ch-wa .ico { color: var(--gold); }
.ch-wa .ico { width: 24px; height: 24px; }

.page-head, .p-head { padding: clamp(48px, 8vh, 96px) var(--gutter) 32px; display: grid; gap: 16px; }
.page-head h1, .p-head h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.05; max-width: 22ch; letter-spacing: -0.035em; }
.page-head .sub, .p-head .sub { color: var(--text-2); max-width: 60ch; font-size: 1.1rem; }
.crumbs { font-family: "Quicksand", sans-serif; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.03em; color: var(--text-3); }
.crumbs a { color: var(--gold); text-decoration: none; }
.work.all { padding-top: 0 !important; }
.project { padding-bottom: 64px; }
.p-figure { margin: 0 var(--gutter); border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.p-figure img { width: 100%; max-height: 72vh; object-fit: cover; }
.p-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); padding: 56px var(--gutter); }
.p-body { display: grid; gap: 20px; align-content: start; font-size: 1.1rem; max-width: 68ch; }
.p-facts { display: grid; gap: 24px; align-content: start; }
.p-facts dl { border-top: 1px solid var(--line-2); }
.p-facts dl > div { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
.p-facts dt { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 0.8rem; color: var(--gold); letter-spacing: 0.1em; text-transform: lowercase; }
.p-facts dd { margin: 4px 0 0; }
.p-sites li span { color: var(--text-3); }
.gallery { padding: 0 var(--gutter) 48px; }
.gallery h2 { font-size: 1.4rem; margin-bottom: 24px; }
.gallery ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gallery li { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.28); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.p-more { padding: 0 var(--gutter); display: grid; gap: 16px; }
.p-more ul { display: grid; gap: 8px; }
.p-more a { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.p-more ul a:hover { color: var(--gold); }

.foot { border-top: 1px solid var(--line-2); padding: 56px 0 32px; background: var(--space); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 40px; padding: 0 var(--gutter); }
.f-brand img { height: 44px; width: auto; }
.f-brand p { margin-top: 14px; color: var(--text-2); font-size: 0.92rem; }
.f-brand .addr { color: var(--text-3); }
.foot .foot-h { font-size: 0.86rem; letter-spacing: 0.12em; text-transform: lowercase; margin-bottom: 12px; color: var(--gold); font-weight: 700; }
.foot ul { display: grid; gap: 8px; font-size: 0.92rem; }
.foot ul a { text-decoration: none; color: var(--text-2); }
.foot ul a:hover { color: var(--text); text-decoration: underline; }
.foot .legal { margin: 48px var(--gutter) 0; padding-top: 24px; border-top: 1px solid var(--line-2); }
.foot .legal p { color: var(--text-3); font-size: 0.8rem; max-width: 110ch; }
.foot .base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 24px var(--gutter) 0; color: var(--text-3); font-size: 0.8rem; }
.foot .base a { color: var(--text-2); }

@media (max-width: 1100px) {
  .nav { display: none; }
  .top-act { margin-left: auto; }
  .hero-copy { max-width: 100%; }
  .hero-map::after { background: linear-gradient(180deg, rgba(4, 6, 11, 0.55) 0%, rgba(4, 6, 11, 0.25) 40%, rgba(4, 6, 11, 0.95) 100%); }
  .site-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stations { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .stations::before { display: none; }
  .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles, .gallery ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .top { gap: 12px; padding-block: 12px; }
  .brand img { height: 32px; }
  .btn-wa.small span { display: none; }
  .hero { min-height: 0; grid-template-rows: auto auto auto; }
  .hero-map { position: relative; inset: auto; z-index: 0; order: 2; height: 70vw; min-height: 300px; }
  .hero-map::after { background: linear-gradient(180deg, var(--space) 0%, rgba(4, 6, 11, 0) 18%, rgba(4, 6, 11, 0) 82%, var(--space) 100%); }
  .hero-copy { order: 1; padding-top: 96px; }
  .hero-foot { order: 3; grid-template-columns: 1fr; padding-top: 16px; }
  .facts { justify-self: start; text-align: left; }
  .sec-head, .channels, .p-grid { grid-template-columns: 1fr; }
  .sec-head .lnk { grid-column: 1; }
  .site-lists { grid-template-columns: 1fr; }
  .stations { grid-template-columns: 1fr; row-gap: 28px; padding-left: 28px; border-left: 1px solid var(--line); }
  .stations li { padding-top: 0; }
  .stations li::before { left: -36px; top: 4px; }
  .tiles, .gallery ul { grid-template-columns: 1fr; }
  .logo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch { grid-template-columns: 1fr auto; }
  .ch .lbl { grid-column: 1 / -1; }
  .foot-grid { grid-template-columns: 1fr; }
  .tip { max-width: 230px; }
}


/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quotes li { display: grid; gap: 16px; align-content: space-between; padding: 28px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--deep); }
.quotes blockquote { margin: 0; font-size: 1.08rem; line-height: 1.5; }
.quotes .who { color: var(--text-2); font-size: 0.9rem; }
.quotes .who strong { color: var(--gold); font-weight: 600; }
@media (max-width: 1100px) { .quotes { grid-template-columns: 1fr; max-width: 680px; } }

.ticket .coord dd, .ticket .coord dt { font-variant-numeric: tabular-nums; }
.p-figure { border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 200, 87, 0.3); }
/* portfolio index map and project locator: windows onto the night */
.index-map { padding: 0 var(--gutter) 56px !important; }
.index-map .map { display: grid; gap: 14px; }
.index-map .map-stage { aspect-ratio: 16 / 9; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.index-map .map-svg { width: 100%; height: 100%; }
.locator { margin: 0; display: grid; gap: 10px; }
.locator figcaption { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--gold); }
.locator .map-stage { aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.locator .map-svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .tip, .tip.show, .tip[data-side="left"], .tip[data-side="left"].show { transition: opacity 150ms var(--ease-out); }
  .tip.show { transform: translate(14px, -50%); }
  .tip[data-side="left"].show { transform: translate(calc(-100% - 14px), -50%); }
  .site.on .bloom, .site:focus-visible .bloom { transform: none; }
}
@media (max-width: 760px) {
  .hero { min-height: 100svh; grid-template-rows: auto 1fr auto; }
  .hero-map { position: absolute; inset: 0; height: auto; min-height: 0; order: 0; z-index: -1; }
  .hero-map .map-stage, .hero-map .map-svg { height: 100%; }
  .hero-map::after { background: linear-gradient(180deg, rgba(4, 6, 11, 0.92) 0%, rgba(4, 6, 11, 0.7) 38%, rgba(4, 6, 11, 0.05) 62%, rgba(4, 6, 11, 0.9) 100%); }
  .hero-copy { order: 1; padding-top: 88px; gap: 18px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero .btn-ghost, .hero-copy > .acts > .lnk { display: none; }
  .hero-foot { order: 2; align-self: end; }
  .facts { justify-self: stretch; text-align: left; }
  .site-lists { columns: 1; }
  .region-list summary h3 { display: flex; justify-content: space-between; }
  .region-list summary h3::after { content: ""; width: 8px; height: 8px; margin: 2px 4px 0 0; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform 200ms var(--ease-out); }
  .region-list[open] summary h3::after { transform: rotate(-135deg); margin-top: 8px; }
}

.hero-map > .map { height: 100%; }

/* phones keep tap-to-call in the first viewport, as a compact link */
@media (max-width: 760px) {
  .hero .btn-ghost { display: inline-flex; min-height: 44px; padding: 0; border: 0; background: none; font-weight: 600; text-decoration: underline; text-underline-offset: 0.25em; }
}
.hero .sub { max-width: 62ch; }

/* catalogue photo: capped, cropped to the inverters; cards keep their own height */
/* locator: the lit site carries its own name */
.locator .site-label { font-weight: 700; }
.locator .hq text { display: none; }
.locator .site-label { fill: var(--text); font-family: "Quicksand", sans-serif; font-size: 9.5px; letter-spacing: 0.1em; }
@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero-copy { padding-bottom: 82vw; }
  .hero-foot { position: relative; background: var(--space); padding-top: 18px; }
  .hero-map::after { background: linear-gradient(180deg, rgba(4, 6, 11, 0.92) 0%, rgba(4, 6, 11, 0.6) 34%, rgba(4, 6, 11, 0) 52%, rgba(4, 6, 11, 0) 80%, var(--space) 100%); }
}
.hero .sub { text-wrap: balance; }

/* ================= round 2: segments, crew, film, smart, warranty ================= */
.hero .trust { color: var(--text-2); font-size: 0.92rem; text-wrap: balance; }
.crew { background: var(--deep); }
.work { background: linear-gradient(180deg, var(--deep), var(--space)); }

/* crew: daylight windows onto the work, a mosaic of five */
.crew-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(200px, 21vw, 330px)); gap: 12px; }
.crew-grid li { position: relative; overflow: hidden; border-radius: 3px; background: var(--deep-2); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.28); }
.crew-grid img { width: 100%; height: 100%; object-fit: cover; }
.crew-grid .c1 { grid-column: 1 / 5; grid-row: 1 / 3; }
.crew-grid .c2 { grid-column: 5 / 8; grid-row: 1 / 3; }
.crew-grid .c3 { grid-column: 8 / 13; grid-row: 1; }
.crew-grid .c4 { grid-column: 8 / 11; grid-row: 2; }
.crew-grid .c5 { grid-column: 11 / 13; grid-row: 2; }
.crew-grid .c1 img { object-position: center 30%; }
.crew-grid .c2 img { object-position: center 25%; }
.crew-grid .c4 img, .crew-grid .c5 img { object-position: center 35%; }
.train { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; align-items: center; margin-top: clamp(32px, 5vh, 56px); padding-top: 24px; border-top: 1px solid var(--line-2); }
.train h3 { font-size: 1.3rem; margin-bottom: 8px; }
.train p { color: var(--text-2); max-width: 80ch; }

/* solutions: six needs, alternating wide and square windows */
.segs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(48px, 7vh, 80px) clamp(20px, 2.4vw, 36px); }
.seg { display: grid; gap: 20px; align-content: start; }
.seg-wide { grid-column: span 7; }
.seg-narrow { grid-column: span 5; }
.seg-fig { position: relative; margin: 0; overflow: hidden; border-radius: 3px; background: var(--deep-2); box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.28); }
.seg-wide .seg-fig { aspect-ratio: 3 / 2; }
.seg-narrow .seg-fig { aspect-ratio: 15 / 14; }
.seg-img { width: 100%; height: 100%; object-fit: cover; }
.seg-farm img { object-position: center 70%; }
.seg-borehole img { object-position: center 25%; }
.seg-home img, .seg-health img { object-position: center 40%; }
.seg-body { display: grid; gap: 10px; }
.seg h2, .seg h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.seg p { color: var(--text-2); max-width: 60ch; }
.seg-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }

/* film: the drone footage, full bleed; a lit point is the play control */
main > section.film { padding-inline: 0; }
.film-stage { position: relative; aspect-ratio: 16 / 9; max-height: 86vh; width: 100%; overflow: hidden; background: #000; }
.film-poster { width: 100%; height: 100%; object-fit: cover; }
.film-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-stage.playing .film-poster, .film-stage.playing .film-play { display: none; }
.film-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; text-decoration: none; color: var(--text); background: radial-gradient(closest-side, rgba(4, 6, 11, 0.45), transparent); }
.film-play .disc { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--space); box-shadow: 0 0 0 8px rgba(255, 200, 87, 0.18); transition: transform 160ms var(--ease-out); }
.film-play .disc svg { width: 32px; height: 32px; transform: translateX(2px); }
.film-play .lbl { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: lowercase; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.8); }
@media (hover: hover) and (pointer: fine) { .film-play:hover .disc { transform: scale(1.06); } }
.film-play:active .disc { transform: scale(0.97); }
.film-cap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px clamp(24px, 5vw, 80px); align-items: end; padding: 32px var(--gutter) 0; }
.film-cap h2 { font-size: clamp(1.6rem, 2.8vw, 2.6rem); line-height: 1.08; }
.film-cap p { color: var(--text-2); max-width: 60ch; }
.film-cap .note { display: block; margin-top: 6px; color: var(--text-3); font-size: 0.8rem; }

/* smart solar */
.smart { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; background: linear-gradient(180deg, var(--deep), var(--space)); }
.smart-fig { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.3); }
.smart-img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.smart-body h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1.04; }
.smart .lead { color: var(--text-2); margin: 16px 0 36px; max-width: 60ch; }
.smart-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.smart-list li { position: relative; display: grid; gap: 6px; align-content: start; padding: 22px 0 24px 26px; border-top: 1px solid var(--line-2); }
.smart-list li::before { content: ""; position: absolute; left: 2px; top: 31px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.smart-list h3 { font-size: 1.08rem; }
.smart-list p { color: var(--text-2); font-size: 0.97rem; }

/* warranty: the closing terms of the process */
.terms { margin-top: clamp(56px, 8vh, 88px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 12px clamp(24px, 5vw, 80px); }
.terms h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
.terms-lead { color: var(--text-2); max-width: 60ch; align-self: end; }
.war-list { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr); gap: 0 clamp(24px, 4vw, 56px); margin-top: 20px; }
.war-list div { padding: 20px 0 8px; border-top: 1px solid var(--line-2); }
.war-list div:first-child { border-top-color: var(--gold); }
.war-list dt { font-weight: 700; }
.war-list dd { margin: 6px 0 0; color: var(--text-2); font-size: 0.97rem; }

/* offers: catalogue and guide */

/* closing band on project pages */
main > section.cta-band { position: relative; padding: 0; min-height: 540px; display: grid; align-items: end; isolation: isolate; overflow: hidden; }
.cta-fig { position: absolute; inset: 0; margin: 0; z-index: -1; }
.cta-fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.cta-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 6, 11, 0.97) 12%, rgba(4, 6, 11, 0.62) 55%, rgba(4, 6, 11, 0.2)); }
.cta-copy { display: grid; gap: 16px; padding: 140px var(--gutter) 56px; max-width: 820px; }
.cta-copy h2 { font-size: clamp(1.9rem, 3.4vw, 3.2rem); line-height: 1.04; }
.cta-copy p { color: var(--text-2); max-width: 60ch; }

@media (max-width: 1100px) {
  .smart { grid-template-columns: 1fr; }
  .smart-fig { aspect-ratio: 16 / 10; }
  .war-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .crew-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 52vw; gap: 8px; }
  .crew-grid .c1 { grid-column: 1 / -1; grid-row: 1 / 3; }
  .crew-grid .c2 { grid-column: 1; grid-row: 3; }
  .crew-grid .c4 { grid-column: 2; grid-row: 3; }
  .crew-grid .c3 { grid-column: 1 / -1; grid-row: 4; }
  .crew-grid .c5 { display: none; }
  .train, .segs, .film-cap, .smart-list, .war-list, .terms { grid-template-columns: 1fr; }
  .seg-wide, .seg-narrow { grid-column: auto; }
  .seg-wide .seg-fig, .seg-narrow .seg-fig { aspect-ratio: 16 / 10; }
  .film-stage { aspect-ratio: 4 / 3; }
  .film-play .disc { width: 68px; height: 68px; }
  main > section.cta-band { min-height: 480px; }
  .cta-copy { padding-top: 120px; }
}

.hero .trust { max-width: 46ch; }
@media (max-width: 760px) { .offers { grid-template-columns: 1fr; } }

/* solution quote links: labelled, gold text rather than six filled buttons */
.lnk-wa { color: var(--gold); }
.lnk-wa .ico { width: 20px; height: 20px; }
/* testimonials: quotation typography, one lead and two smaller, no boxes */
.quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.quotes li { padding: 24px 0 0; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; background: none; align-content: start; }
.quotes li.lead { grid-column: 1 / -1; border-top-color: var(--gold); padding-top: 32px; }
.quotes li.lead blockquote { font-size: clamp(1.45rem, 2.5vw, 2.2rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; max-width: 40ch; }
/* projects index: two wide windows close the rows */
.work .tile.wide { grid-column: span 2; }
.work .tile.wide a { aspect-ratio: auto; height: 100%; }
@media (max-width: 760px) {
  .quotes { grid-template-columns: 1fr; }
  .work:not(.all) .tile:nth-child(n+4) { display: none; }
  .work .tile.wide { grid-column: auto; }
  .work .tile.wide a { aspect-ratio: 4 / 3; height: auto; }
  .hero .trust { justify-self: start; padding: 8px 12px; border-radius: 10px; background: rgba(4, 6, 11, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}

/* verdict fixes: wide index tiles keep the row height; solution frames share one height; catalogue meets its neighbours */
.work .tile.wide .tile-img { position: absolute; inset: 0; }
@media (min-width: 761px) {
  .seg-wide .seg-fig, .seg-narrow .seg-fig { aspect-ratio: auto; height: clamp(300px, 31vw, 480px); }
}
@media (max-width: 760px) {
  .work .tile.wide .tile-img { position: static; }
}

.crew-grid .c5 img { object-position: center 30%; }
@media (min-width: 761px) {
}

/* 2026 sectors: homes glow lamp-white, the farm warm lime, the public office coral */
.site[data-sector="residential"] .halo { fill: #FFF1C9; }
.site[data-sector="agriculture"] .halo { fill: #D7E36B; }
.site[data-sector="public"] .halo { fill: #FF7A5C; }
.map[data-filter="residential"] .site:not([data-sector="residential"]), .map[data-filter="agriculture"] .site:not([data-sector="agriculture"]), .map[data-filter="public"] .site:not([data-sector="public"]) { opacity: 0.12; pointer-events: none; }

/* portrait phone covers keep their native size instead of being stretched to full width */
.p-figure.tall { max-width: min(560px, calc(100% - 2 * var(--gutter))); }
.p-figure.tall img { max-height: none; }

/* controls and short display roles speak in the logo face */
.btn, .nav a, .lnk, .map-filter button, .tile-title, .ch .v, .qa summary, .offer .go, .dl a, .tip strong, .seg-act a { font-family: "Quicksand", "Nunito", sans-serif; font-weight: 700; }
.ch .v.small { font-family: "Nunito", sans-serif; font-weight: 500; }
.coords { font-family: "Quicksand", sans-serif; font-weight: 600; letter-spacing: 0.03em; }
.quotes li.lead blockquote { font-family: "Quicksand", sans-serif; font-weight: 600; letter-spacing: -0.01em; }

/* ================= polish: solutions index, brand installer pages ================= */
/* home: the six needs as one scannable index, each row a lit window plus its line */
.si-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); border-top: 1px solid var(--line-2); }
.si-list li { border-bottom: 1px solid var(--line-2); }
.si-list a { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 20px; align-items: center; padding: 18px 0; text-decoration: none; }
.si-img { grid-row: 1 / 3; width: 72px; height: 72px; object-fit: cover; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.28); transition: filter 200ms ease; filter: saturate(0.85) brightness(0.9); }
.si-t { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: 1.12rem; line-height: 1.32; align-self: end; }
.si-b { color: var(--text-2); font-size: 0.95rem; align-self: start; }
.si-list .ico { grid-row: 1 / 3; grid-column: 3; color: var(--gold); transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .si-list a:hover .si-img { filter: none; }
  .si-list a:hover .ico { transform: translateX(4px); }
  .si-list a:hover .si-t { color: var(--gold); }
}
.solutions { padding-top: 0 !important; }

/* brand installer pages */
.brand-head .brand-logo { width: auto; height: 44px; filter: brightness(0) invert(1); opacity: 0.9; margin: 8px 0 4px; }
.brand-head .acts { margin-top: 8px; }
.brand-work { padding-top: 32px !important; }
.brand-other { margin-top: 32px; color: var(--text-2); max-width: 70ch; }
.brand-other .lnk { margin-left: 6px; }

/* partner logos lead to their installer pages */
.logo-row li.partner { background: radial-gradient(120% 120% at 50% 0%, rgba(255, 200, 87, 0.1), transparent 70%), var(--deep); }
.logo-row li.partner a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.logo-row li.partner a:focus-visible { outline-offset: -6px; }

/* footer now carries four columns */
.foot-grid { grid-template-columns: 1.3fr 1fr 1.2fr 1.3fr; }
@media (max-width: 1100px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .si-list { grid-template-columns: 1fr; }
  .si-list a { grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: 16px; }
  .si-img { width: 60px; height: 60px; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ================= resources, brand head, map legend ================= */
/* catalogue, guide, training: three rows, a window, a line and its action */
.res-list { border-top: 1px solid var(--line-2); }
.res-list li { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(220px, auto); gap: 8px clamp(24px, 4vw, 56px); align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line-2); }
.res-fig { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.28); background: var(--deep-2); }
.res-fig img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.res-fig.doc img { object-position: top; }
@media (hover: hover) and (pointer: fine) { .res-list li:hover .res-fig img { transform: scale(1.03); } }
.res-body h3 { font-size: clamp(1.25rem, 1.8vw, 1.55rem); margin-bottom: 8px; }
.res-body p { color: var(--text-2); max-width: 58ch; }
.res-act { display: grid; gap: 10px; justify-items: start; }

/* brand pages: the lit sites share the first viewport with the promise */
.brand-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
.bh-copy { display: grid; gap: 16px; align-content: start; }
.brand-map .map-stage { aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-2); }
.brand-map .map-svg { width: 100%; height: 100%; }
.brand-why .sec-head { align-items: start; margin-bottom: 0; }
.why-prose { display: grid; gap: 20px; }
.why-prose p { color: var(--text-2); max-width: 62ch; }
.why-prose strong { color: var(--text); font-family: "Quicksand", sans-serif; font-weight: 700; }
.why-prose .lnk { margin-left: 4px; }

/* map legend: the caption sits on the map as a chip, not above it */
.locator { position: relative; }
.locator figcaption { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 5px 12px; border-radius: 999px; background: rgba(4, 6, 11, 0.8); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 0.78rem; max-width: calc(100% - 20px); }
.site-label { paint-order: stroke; stroke: var(--space); stroke-linejoin: round; }

/* a portrait lead photo sits in the reading column, beside the facts */
.p-body .p-figure.tall { margin: 0 0 12px; max-width: 100%; }
.p-body .p-figure.tall img { width: 100%; max-height: 82vh; object-fit: cover; }
@media (max-width: 1023px) {
  .brand-head { grid-template-columns: 1fr; row-gap: 32px; }
}
@media (max-width: 760px) {
  .res-list li { grid-template-columns: 1fr; gap: 14px; }
  .res-fig { aspect-ratio: 16 / 9; }
}
.gallery li { position: relative; }
.gallery li::after { content: ""; position: absolute; inset: 0; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 200, 87, 0.28); pointer-events: none; }
@media (max-width: 760px) { .region-list summary h3 .n { margin: 0 auto 0 10px; } }

/* footer social icons (Simple Icons shapes), quiet until hovered or focused */
.foot .socials { display: flex; gap: 4px; margin-top: 14px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--text-2); transition: color 200ms ease, background-color 200ms ease; }
.socials li:first-child a { margin-left: -12px; }
.socials svg { width: 20px; height: 20px; fill: currentColor; }
.socials a:focus-visible { color: var(--gold); }
@media (hover: hover) and (pointer: fine) { .socials a:hover { color: var(--gold); background: rgba(255, 200, 87, 0.08); } }

/* ================= NGO and home-power landing pages ================= */
/* partners: names set large, each with its one line, ruled like the resources */
.pt-list { border-top: 1px solid var(--line-2); }
.pt-list li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 6px clamp(24px, 5vw, 80px); align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line-2); }
.pt-n { font-family: "Quicksand", sans-serif; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.45rem); line-height: 1.25; }
.pt-d { color: var(--text-2); }
.ngo-quote { margin: clamp(40px, 6vh, 64px) 0 0; padding-top: 28px; border-top: 1px solid var(--gold); max-width: 60ch; }
.ngo-quote p { font-family: "Quicksand", sans-serif; font-weight: 600; font-size: clamp(1.3rem, 2.2vw, 1.9rem); line-height: 1.35; letter-spacing: -0.01em; }
.ngo-quote footer { margin-top: 14px; color: var(--text-2); font-size: 0.92rem; }
.ngo-quote footer strong { color: var(--gold); font-weight: 600; }
.res-act .price { font-family: "Quicksand", sans-serif; font-weight: 700; color: var(--gold); max-width: 22ch; }
@media (max-width: 760px) { .pt-list li { grid-template-columns: 1fr; } }

/* TIDE timeline: dates in the logo face, one ruled line per milestone */
.tide { background: var(--deep); }
.timeline { border-top: 1px solid var(--line-2); }
.timeline li { display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 9fr); gap: 6px clamp(24px, 4vw, 56px); align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.tl-y { font-family: "Quicksand", sans-serif; font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.timeline p { color: var(--text-2); max-width: 70ch; }
@media (max-width: 760px) { .timeline li { grid-template-columns: 1fr; } }