@import url("fonts.css");

/* ============================================================
   Plumbing only. Nothing here is a design decision — no colour,
   no typeface, no layout. Each site writes its own visual system
   on top; this file only carries the things that must be right
   on every site and are invisible when they are.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A sideways-scrollable page drags position:fixed elements out of view on
     phones. Clip rather than scroll. (clip, not hidden: hidden would make html
     a scroll container and break scroll-padding and sticky.) */
  overflow-x: clip;
}

body { margin: 0; }
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
/* A <button> inherits the user agent's grey `buttonface` unless something says
   otherwise. An outline/ghost button that sets only border-color and color then
   renders as light-grey with (often white) text on it — invisible. Reset here;
   any variant that wants a fill sets one and wins on specificity. */
button { background: transparent; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll. The JS failsafe shows everything if the observer
   never runs, so content can never be stranded invisible. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .site-header, .lightbox, .skip-link, .gallery-more, .filters, .map-consent, .callbar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* ============================================================
   Ο Υδραυλικός σου — dark "operations" system.
   Ledger rows, tabular numbers, a hairline grid. No cards.
   ============================================================ */
:root {
  --ink:        #0b0e11;   /* page ground */
  --ink-2:      #12171c;   /* raised panel */
  --ink-3:      #1a2129;   /* hairline-bounded block */
  --line:       #232c35;
  --line-2:     #2f3a45;
  --text:       #c3ccd4;
  --text-dim:   #8b97a2;
  --white:      #f2f5f7;
  --blue:       #35a8e0;
  --blue-deep:  #1b86bb;
  --blue-dim:   #123243;
  --amber:      #f5a623;
  --amber-deep: #c67f0b;

  --display: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(1.1rem, 4vw, 3rem);
  --wrap: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body {
  background: var(--ink); color: var(--text);
  font-family: var(--sans); font-size: 1rem; line-height: 1.68;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--blue); text-underline-offset: 3px; }
a:hover { color: #6cc4ee; }
h1,h2,h3,h4 { font-family: var(--display); font-weight: 700; color: var(--white); line-height: 1.08; letter-spacing: .002em; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link { position:absolute; left:1rem; top:-100px; z-index:300; background:var(--amber); color:#1a1200; padding:.7rem 1.1rem; font-weight:700; text-decoration:none; }
.skip-link:focus { top:1rem; }

/* ---------- Alert bar ---------- */
.alertbar { background:var(--amber); color:#241800; font-size:.82rem; font-weight:600; }
.alertbar .wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.4rem 1.5rem; padding-block:.5rem; }
.alertbar a { color:#241800; text-decoration:none; font-weight:700; }
.alertbar a:hover { text-decoration:underline; color:#241800; }
.alertbar .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#1c6b32; margin-right:.5rem; vertical-align:middle; }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(11,14,17,.94); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; gap:1.2rem; min-height:70px; position:relative; }
.brand { margin-right:auto; display:inline-flex; align-items:center; text-decoration:none; }
.brand img { height:34px; width:auto; }
.nav { display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.6rem); }
.nav a { font-family:var(--display); font-weight:600; font-size:.94rem; letter-spacing:.02em; text-transform:uppercase; color:var(--text); text-decoration:none; padding:.4rem 0; border-bottom:2px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); }
.nav a:hover { color:var(--white); border-bottom-color:var(--line-2); }
.nav a[aria-current="page"] { color:var(--amber); border-bottom-color:var(--amber); }
.header-call { display:inline-flex; align-items:center; gap:.5rem; background:var(--blue); color:#04222f; font-family:var(--display); font-weight:700; font-size:1rem; padding:.55rem 1rem; text-decoration:none; transition:background-color .2s var(--ease); }
.header-call:hover { background:#5cc0f0; color:#04222f; }
.header-call svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.nav-toggle { display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--white); position:relative; transition:background-color .2s var(--ease); }
.nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0; width:22px; height:2px; background:var(--white); transition:transform .3s var(--ease), top .2s var(--ease); }
.nav-toggle span::before { top:-7px; } .nav-toggle span::after { top:7px; }
.site-header.is-open .nav-toggle span { background:transparent; }
.site-header.is-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
.site-header.is-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }
@media (max-width:900px) {
  .nav-toggle { display:inline-flex; }
  .header-call span { display:none; }
  .nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--ink-2); border-top:1px solid var(--line); padding:0 var(--gutter) 1rem; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .35s var(--ease), visibility .35s; }
  .site-header.is-open .nav { max-height:75vh; visibility:visible; overflow-y:auto; }
  .nav a { font-size:1.05rem; padding:.95rem 0; border-bottom:1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom-color:var(--line); }
}

/* ---------- Masthead (no photo) ---------- */
.masthead { border-bottom:1px solid var(--line); background:
  radial-gradient(120% 90% at 12% 0%, #14202a 0%, var(--ink) 62%); }
.masthead .wrap { padding-block: clamp(2.75rem,7vw,5rem); }
.mast-grid { display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:end; }
@media (max-width:880px) { .mast-grid { grid-template-columns:1fr; gap:2rem; } }
.kicker { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display); font-size:.82rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:1.1rem; }
.kicker::before { content:""; width:28px; height:2px; background:var(--blue); }
.masthead h1 { font-size:clamp(2.1rem,5.6vw,3.9rem); text-transform:uppercase; max-width:15ch; }
.masthead h1 .hl { color:var(--amber); }
.masthead .stand { margin-top:1.2rem; max-width:50ch; font-size:clamp(1rem,1.4vw,1.13rem); color:var(--text); }

.callbox { border:1px solid var(--line-2); background:var(--ink-2); padding:1.4rem 1.5rem; }
.callbox .lbl { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); }
.callbox .tel { display:block; margin-top:.35rem; font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,4.4vw,2.6rem); color:var(--white); text-decoration:none; letter-spacing:.01em; }
.callbox .tel:hover { color:var(--amber); }
.callbox .tel2 { display:inline-block; margin-top:.5rem; font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--blue); text-decoration:none; }
.callbox .meta { margin-top:.9rem; padding-top:.9rem; border-top:1px solid var(--line); font-size:.84rem; color:var(--text-dim); }

/* ---------- Ticker of credentials ---------- */
.creds { border-bottom:1px solid var(--line); background:var(--ink-2); }
.creds ul { list-style:none; display:grid; grid-template-columns:repeat(4,1fr); }
.creds li { padding:1.1rem clamp(.8rem,1.6vw,1.4rem); border-left:1px solid var(--line); }
.creds li:first-child { border-left:0; }
.creds .k { display:block; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.3rem; }
.creds .v { font-family:var(--display); font-weight:700; font-size:clamp(1rem,1.8vw,1.2rem); color:var(--white); line-height:1.2; }
@media (max-width:760px) { .creds ul { grid-template-columns:repeat(2,1fr); } .creds li:nth-child(odd){border-left:0} .creds li:nth-child(n+3){border-top:1px solid var(--line)} }

/* ---------- Sections ---------- */
.section { padding-block: clamp(3rem,7vw,5.5rem); }
.section--panel { background:var(--ink-2); border-block:1px solid var(--line); }
.sec-head { max-width:52rem; margin-bottom:clamp(1.75rem,3.5vw,2.75rem); }
.sec-head h2 { font-size:clamp(1.6rem,3.6vw,2.5rem); text-transform:uppercase; }
.sec-head p { margin-top:.9rem; font-size:1.02rem; }

/* ---------- Ledger: numbered service index ---------- */
.ledger { border-top:1px solid var(--line); }
.ledger-row { border-bottom:1px solid var(--line); display:grid; grid-template-columns:4.5rem 1fr; gap:0 1.4rem; padding-block:1.5rem; transition:background-color .25s var(--ease); }
.ledger-row:hover { background:var(--ink-2); }
.ledger-row .no { font-family:var(--display); font-weight:700; font-size:1rem; color:var(--amber); padding-top:.28rem; letter-spacing:.06em; }
.ledger-row h3 { font-size:clamp(1.15rem,2.2vw,1.45rem); }
.ledger-row p { margin-top:.55rem; font-size:.95rem; max-width:70ch; }
.ledger-row .eg { margin-top:.55rem; font-size:.88rem; color:var(--text-dim); max-width:70ch; }
.ledger-row .eg b { color:var(--text); font-weight:600; }
@media (max-width:640px) { .ledger-row { grid-template-columns:1fr; gap:.4rem; } .ledger-row .no { padding-top:0; } }

/* ---------- Price table ---------- */
.pricewrap { overflow-x:auto; border:1px solid var(--line); }
table.prices { width:100%; border-collapse:collapse; min-width:26rem; }
table.prices caption { text-align:left; padding:1.1rem 1.3rem; background:var(--ink-2); border-bottom:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--white); text-transform:uppercase; }
table.prices th, table.prices td { padding:.85rem 1.3rem; border-bottom:1px solid var(--line); text-align:left; font-size:.96rem; }
table.prices thead th { font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); font-weight:600; background:var(--ink-2); }
table.prices tbody tr:hover { background:var(--ink-2); }
table.prices td.price { text-align:right; font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--amber); white-space:nowrap; }
table.prices tbody tr:last-child td { border-bottom:0; }
.price-note { margin-top:.9rem; font-size:.84rem; color:var(--text-dim); }

/* ---------- Areas ---------- */
.areas { list-style:none; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem; }
.areas li { border:1px solid var(--line-2); padding:.45rem 1rem; font-size:.88rem; color:var(--text); }
.areas li.base { background:var(--blue-dim); border-color:var(--blue-deep); color:var(--white); font-weight:600; }

/* ---------- Reasons ---------- */
.reasons { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.reason { background:var(--ink); padding:1.5rem 1.6rem; }
.reason svg { width:24px; height:24px; stroke:var(--blue); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.85rem; }
.reason h3 { font-size:1.08rem; }
.reason p { margin-top:.45rem; font-size:.9rem; color:var(--text-dim); }

/* ---------- Partner ---------- */
.partner { display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.25rem,3vw,2.5rem); border:1px solid var(--line-2); background:var(--ink-2); padding:clamp(1.4rem,3vw,2rem); }
.partner img { width:132px; height:auto; flex-shrink:0; }
.partner .txt h3 { font-size:1.2rem; } .partner .txt p { margin-top:.4rem; font-size:.92rem; }

/* ---------- Gallery ---------- */
.filters { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.75rem; }
.filter { padding:.5rem 1rem; border:1px solid var(--line-2); background:transparent; cursor:pointer; font-family:var(--display); font-weight:600; font-size:.9rem; text-transform:uppercase; letter-spacing:.03em; color:var(--text); transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.filter:hover { border-color:var(--blue); color:var(--white); }
.filter[aria-pressed="true"] { background:var(--amber); border-color:var(--amber); color:#241800; }
.filter .count { opacity:.7; margin-left:.4rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:2px; }
.tile { position:relative; display:block; padding:0; border:0; cursor:zoom-in; overflow:hidden; background:var(--ink-2); aspect-ratio:4/3; }
.tile img { width:100%; height:100%; object-fit:cover; filter:saturate(.92); transition:transform .55s var(--ease), filter .35s var(--ease); }
.tile:hover img, .tile:focus-visible img { transform:scale(1.05); filter:saturate(1.05); }
.tile::after { content:""; position:absolute; inset:0; border:2px solid transparent; transition:border-color .25s var(--ease); }
.tile:hover::after, .tile:focus-visible::after { border-color:var(--amber); }
.tile[hidden] { display:none; }
.tile.is-entering { animation:tileIn .35s var(--ease) both; }
@keyframes tileIn { from { opacity:0; } to { opacity:1; } }
.gallery-more { display:flex; justify-content:center; margin-top:1.6rem; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; background:transparent; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.6rem; border:2px solid transparent; font-family:var(--display); font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.03em; text-decoration:none; cursor:pointer; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn--amber { background:var(--amber); color:#241800; }
.btn--amber:hover { background:#ffbf4d; color:#241800; }
.btn--outline { border-color:var(--line-2); color:var(--white); }
.btn--outline:hover { border-color:var(--blue); color:var(--blue); }

/* ---------- Contact ---------- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; }
@media (max-width:840px) { .contact-grid { grid-template-columns:1fr; } }
.cbox { border:1px solid var(--line); }
.cbox .row { display:flex; align-items:center; gap:1rem; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); }
.cbox .row:last-child { border-bottom:0; }
.cbox svg { width:20px; height:20px; flex-shrink:0; stroke:var(--blue); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.cbox .k { display:block; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); }
.cbox .v, .cbox a { font-family:var(--display); font-weight:700; font-size:1.2rem; color:var(--white); text-decoration:none; }
.cbox a:hover { color:var(--amber); }
.cbox .v.small { font-family:var(--sans); font-weight:500; font-size:.98rem; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); background:#080a0d; padding-block:2rem; font-size:.85rem; color:var(--text-dim); }
.footer-inner { display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.site-footer img { height:26px; width:auto; opacity:.75; }
.footer-links { display:flex; gap:1.2rem; list-style:none; flex-wrap:wrap; }
.site-footer a { color:var(--text); text-decoration:none; }
.site-footer a:hover { color:var(--amber); }

/* ---------- Mobile call bar ---------- */
.callbar { display:none; }
@media (max-width:700px) {
  .callbar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1fr; background:var(--amber); padding-bottom:env(safe-area-inset-bottom); }
  .callbar a { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem .5rem; font-family:var(--display); font-weight:700; font-size:1rem; text-transform:uppercase; text-decoration:none; color:#241800; }
  .callbar a + a { border-left:1px solid rgba(0,0,0,.22); }
  .callbar svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  body { padding-bottom:3.6rem; }
}

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; z-index:300; display:none; background:rgba(5,7,9,.98); opacity:0; transition:opacity .25s var(--ease); }
.lightbox.is-open { display:block; } .lightbox.is-visible { opacity:1; }
.lb-stage { position:absolute; inset:0; display:grid; place-items:center; padding:clamp(3.5rem,8vw,5rem) clamp(1rem,7vw,5.5rem); }
.lb-figure { margin:0; display:grid; place-items:center; gap:1rem; max-width:100%; max-height:100%; }
.lb-img { max-width:100%; max-height:calc(100svh - 11rem); width:auto; height:auto; object-fit:contain; border:1px solid var(--line-2); transition:opacity .2s var(--ease); }
.lb-img.is-loading { opacity:.35; }
.lb-caption { color:var(--text-dim); font-size:.82rem; text-align:center; max-width:60ch; }
.lb-btn { position:absolute; z-index:2; display:grid; place-items:center; width:46px; height:46px; cursor:pointer; background:var(--ink-2); border:1px solid var(--line-2); color:var(--white); transition:background-color .2s var(--ease), border-color .2s var(--ease); }
.lb-btn:hover { background:var(--amber); border-color:var(--amber); color:#241800; }
.lb-btn:disabled { opacity:.3; cursor:default; }
.lb-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lb-close { top:clamp(1rem,3vw,1.6rem); right:clamp(1rem,3vw,1.6rem); }
.lb-prev { left:clamp(.5rem,2.4vw,1.6rem); top:50%; transform:translateY(-50%); }
.lb-next { right:clamp(.5rem,2.4vw,1.6rem); top:50%; transform:translateY(-50%); }
.lb-counter { position:absolute; top:clamp(1rem,3vw,1.7rem); left:50%; transform:translateX(-50%); font-family:var(--display); font-weight:600; font-size:.9rem; letter-spacing:.1em; color:var(--text-dim); }
@media (max-width:640px) { .lb-prev{left:.4rem} .lb-next{right:.4rem} .lb-btn{width:42px;height:42px} .lb-img{max-height:calc(100svh - 9rem)} }

@media print { .alertbar, .callbar { display:none !important; } body { padding-bottom:0; } }

/* [hidden] must win. A rule like `.gallery-more { display:flex }` outranks the
   browser's own `[hidden] { display:none }`, which left an empty "Show 0 more"
   button on screen whenever a gallery had nothing further to reveal. */
[hidden] { display: none !important; }

/* ---------- Διάγνωση: schematic cards ---------- */
.diag { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); }
.diag-card { background:var(--ink); padding:clamp(1.4rem,3vw,2rem); }
.diagram { width:100%; height:auto; display:block; background:var(--ink-2); border:1px solid var(--line); }
.diag-card h3 { margin-top:1.25rem; font-size:clamp(1.15rem,2.4vw,1.5rem); }
.diag-card p { margin-top:.6rem; font-size:.95rem; }
.diag-list { list-style:none; margin-top:1rem; display:grid; gap:.4rem; }
.diag-list li { position:relative; padding-left:1.1rem; font-size:.92rem; color:var(--text-dim); }
.diag-list li::before { content:""; position:absolute; left:0; top:.68rem; width:6px; height:1px; background:var(--amber); }

.diag-out { display:grid; grid-template-columns:1.25fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:start; margin-top:2rem; }
@media (max-width:860px) { .diag-out { grid-template-columns:1fr; } }
.diag-out h3 { margin-top:.8rem; font-size:clamp(1.2rem,2.6vw,1.6rem); }
.diag-out p { margin-top:.75rem; }
.diag-steps { list-style:none; counter-reset:dg; margin-top:1rem; display:grid; gap:.7rem; }
.diag-steps li { counter-increment:dg; position:relative; padding-left:2.2rem; font-size:.95rem; }
.diag-steps li::before { content:counter(dg); position:absolute; left:0; top:.05rem; font-family:var(--display); font-weight:700; color:var(--amber); }
.diag-steps b { color:var(--white); font-weight:600; }
.diag-when { border:1px solid var(--line-2); background:var(--ink-2); padding:1.4rem 1.5rem; }
.diag-when .k { display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim); margin-bottom:.8rem; }
.diag-when ul { list-style:none; display:grid; gap:.5rem; }
.diag-when li { position:relative; padding-left:1.1rem; font-size:.93rem; }
.diag-when li::before { content:""; position:absolute; left:0; top:.68rem; width:6px; height:1px; background:var(--blue); }
.diag-note { margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--line); font-size:.86rem; color:var(--text-dim); }

/* ---------- Homepage masthead: photographic background ----------
   Only the homepage carries it; inner pages keep the plain typographic
   masthead so they stay light. The scrim has to be heavy on the left, where
   the headline sits, and behind the call box on the right. */
.masthead--hero { position:relative; overflow:hidden; }
.mast-bg { position:absolute; inset:0; z-index:0; }
.mast-bg .hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease); }
.mast-bg .hero-slide.is-active { opacity:1; }
.mast-bg img { width:100%; height:100%; object-fit:cover; }
.masthead--hero::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:
  linear-gradient(100deg, rgba(11,14,17,.95) 0%, rgba(11,14,17,.88) 38%, rgba(11,14,17,.62) 66%, rgba(11,14,17,.5) 100%),
  linear-gradient(to bottom, rgba(11,14,17,.55) 0%, rgba(11,14,17,.2) 40%, rgba(11,14,17,.8) 100%); }
.masthead--hero .wrap { position:relative; z-index:2; }
.masthead--hero .hero-dots { position:absolute; z-index:3; right:var(--gutter); bottom:clamp(1rem,3vw,1.75rem); display:flex; gap:.5rem; }
.masthead--hero .hero-dots button { width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer; border:1px solid rgba(255,255,255,.7); background:transparent; transition:background-color .3s var(--ease); }
.masthead--hero .hero-dots button[aria-current="true"] { background:var(--amber); border-color:var(--amber); }
@media (max-width:880px) {
  .masthead--hero::after { background:
    linear-gradient(to bottom, rgba(11,14,17,.82) 0%, rgba(11,14,17,.7) 45%, rgba(11,14,17,.92) 100%); }
  .masthead--hero .hero-dots { left:var(--gutter); right:auto; }
}