/* ==========================================================================
   ΚΕΝΤΑΥΡΟΣ — Τέντες Ξενιτίδης, Ζωγράφου
   Design system: "Κρασί, ορείχαλκος, λινό"

   Two warm families, kept deliberately apart so neither one floods the page:
   burgundy carries every primary action (the CTA, the wine panels), brass is
   the quiet one — hairlines, badges, numerals, the sun itself in the light
   slider — never a large fill. The emblem's own red (sampled straight off
   the ΚΕΝΤΑΥΡΟΣ mark, H1° S74% L49%) is held back for a single live signal
   (the archive reel's REC dot) and the text-selection highlight; spending it
   on every hairline and eyebrow just reads as noise, not brand. Ratio
   follows the A3 leaflet — charcoal and linen do the work. Every
   foreground/background pair in use clears WCAG AAA.

   Display: Sofia Sans Extra Condensed · Body: Commissioner
   ========================================================================== */

/* --------------------------------------------------------------- webfonts */
/* Self-hosted, not pulled from fonts.googleapis.com. The Google stylesheet
   sat in front of the woff2 files as a render-blocking request on a third
   origin — DNS + TLS + CSS + font, ~4.3s of it on a throttled phone — and the
   hero could not paint until it came back. Same bytes, same two families,
   one origin, nothing queued in front of them.

   Both families ship as variable fonts, so one file per script covers the
   whole weight range the page uses. unicode-range keeps the latin file off
   the wire until something latin (a numeral, a fabric code) needs it.
   Commissioner and Sofia Sans are SIL Open Font License 1.1 — assets/fonts/OFL.txt. */
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/commissioner-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/commissioner-latin.woff2") format("woff2");
  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: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url("../assets/fonts/sofia-xcond-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url("../assets/fonts/sofia-xcond-latin.woff2") format("woff2");
  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;
}

/* The display face is *extremely* condensed, and nothing on a stock device is
   close to it. Left to a plain fallback the hero title set in Arial Narrow ran
   to five lines instead of three - 216px instead of 129px - so the moment the
   real font arrived, everything below the title jumped 87px. That is a 0.15
   CLS on the largest text on the page, and it fires on any load where the font
   misses first paint.

   So the fallback gets told what shape to be. size-adjust is measured, not
   guessed: the same string set at the same size is 0.7336 of its Arial Narrow
   width in Sofia, 0.6509 of Roboto, 0.5216 of Arial. ascent/descent are Sofia's
   own (900/300 per 1000 upm) divided by that same ratio, so the line box comes
   out identical too. One face per likely local font, narrowest last because CSS
   picks the last face in a family whose source actually resolves; if none of
   them do, the stack below falls through to plain Arial Narrow as before.

   The result measures 129px on all three - the same height as the real font -
   so the swap moves nothing. Re-measure these if the display face ever changes. */
@font-face {
  font-family: "Sofia XC fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 52.16%;
  ascent-override: 172.5%;
  descent-override: 57.5%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sofia XC fallback";
  src: local("Roboto Condensed"), local("Roboto");
  size-adjust: 65.09%;
  ascent-override: 138.3%;
  descent-override: 46.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Sofia XC fallback";
  src: local("Arial Narrow");
  size-adjust: 73.36%;
  ascent-override: 122.7%;
  descent-override: 40.9%;
  line-gap-override: 0%;
}
/* Commissioner needs none of this: it measures within 0.2% of system-ui and
   Segoe UI and 2% of Arial, so its swap was never moving anything. */

:root {
  /* --- Charcoal: the leaflet's dark panels --- */
  --ink:        #16151A;
  --ink-2:      #201E1F;
  --ink-3:      #6E6255;

  /* --- Ivory / linen: the leaflet's paper --- */
  --bone:       #FAF5E9;
  --bone-2:     #F1E7D2;
  --bone-3:     #B7A88F;
  --marble:     #FFFFFF;

  /* --- Brass: the badges, the hairlines, the sun in the light slider --- */
  --brass:      #A87C2E;
  --brass-deep: #8C6423;
  --brass-lite: #D8B876;

  /* --- Burgundy: the leaflet's band, and every primary action --- */
  --wine:       #5C171B;
  --wine-deep:  #471216;
  --wine-soft:  #7E272B;

  /* the emblem's own red, sampled off the logo. It belongs to the mark —
     the page borrows it only for the selection highlight. */
  --red:        #D91F26;

  --olive:      #5C6B34;

  /* the neobrutalist edge: hard border, hard offset shadow, no blur */
  --edge-radius: 5px;
  --edge-x: 4px;
  --edge-y: 4px;

  --line:       color-mix(in srgb, var(--ink) 14%, transparent);
  --line-soft:  color-mix(in srgb, var(--ink) 8%, transparent);
  --line-brass: color-mix(in srgb, var(--brass) 42%, transparent);

  /* --- Type --- */
  --display: "Sofia Sans Extra Condensed", "Sofia XC fallback", "Sofia Sans Condensed", "Arial Narrow", sans-serif;
  --body:    "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.22vw, 1.14rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  /* Display sizes track the SHORTER axis. Width-only scaling blew the hero
     headline up to ~136px on a 1366x768 laptop, pushing the copy under the
     fixed header. min(vw, vh) keeps it sane on wide-but-short screens. */
  --step-4:  clamp(2.2rem, min(5vw, 7vh), 4.4rem);
  --step-5:  clamp(2.6rem, min(8vw, 11vh), 6.2rem);

  /* --- Space --- */
  --gutter: clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --maxw: 1320px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* --------------------------------------------------------- reset & base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

::selection { background: var(--red); color: var(--marble); }

body {
  margin: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background: var(--bone);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  /* `hidden` makes <body> a scroll container (overflow-y resolves to auto),
     which destabilises position:sticky and causes scroll-chaining glitches on
     mobile. `clip` suppresses the same overflow WITHOUT creating one.
     `hidden` stays first as the fallback for old engines. */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; }

/* The header is fixed (~71px). Without this every nav jump buries the section
   heading underneath it. */
:target, section[id], main[id] { scroll-margin-top: clamp(84px, 8vh, 104px); }

/* UA fieldset styling breaks the wizard layout: it ships a border, padding,
   inline margins and — the nasty one — min-width:min-content, which stops the
   panel shrinking inside grid/flex. */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; display: block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; border-radius: 2px; }

/* Skip link */
.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 1300;
  background: var(--ink); color: var(--bone); padding: .8rem 1.2rem;
  border-radius: 4px; font-weight: 600; transition: top .2s;
}
.skip:focus { top: 1rem; }

/* --------------------------------------------------------- eyebrow / rules */
.eyebrow {
  font-family: var(--body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wine);
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 1.25rem;
}
/* currentColor, so the rule always matches its label — hard-coding --wine
   made the dash invisible on the terracotta repair section. */
.eyebrow::before {
  content: ""; width: 2rem; height: 2px; background: currentColor; flex: none;
}
.eyebrow--light { color: var(--brass); }
.hero__content .eyebrow--light { text-shadow: 0 1px 12px rgba(14,14,19,.85); }
.eyebrow--on-wine { color: rgba(255,255,255,.86); }

/* --------------------------------------------------------- buttons */
/* Shared action row. .hero__actions adds the entrance animation on top;
   other sections use the plain .actions so they don't inherit it. */
.actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Buttons are neobrutalist: a hard 2px edge and a solid offset shadow with no
   blur, and pressing one moves it onto its own shadow instead of lifting it.
   Same geometry everywhere — only the colours change per surface. */
.btn {
  --btn-bg: var(--wine);
  --btn-fg: var(--marble);
  --btn-edge: var(--ink);
  --btn-shadow: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1rem 1.85rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid var(--btn-edge); border-radius: var(--edge-radius);
  box-shadow: var(--edge-x) var(--edge-y) 0 0 var(--btn-shadow);
  font-weight: 700; font-size: var(--step-0); letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .3s var(--ease);
}
.btn:hover, .btn:focus-visible {
  transform: translate(var(--edge-x), var(--edge-y));
  box-shadow: 0 0 0 0 var(--btn-shadow);
}
.btn:active { transform: translate(var(--edge-x), var(--edge-y)); }

/* on the dark panels a black shadow would be invisible — brass carries it */
.btn--on-dark {
  --btn-bg: transparent; --btn-fg: var(--bone);
  --btn-edge: var(--bone); --btn-shadow: var(--brass);
}
.btn--on-dark:hover { --btn-bg: var(--bone); --btn-fg: var(--ink); }
.btn--primary { --btn-bg: var(--wine); --btn-fg: var(--marble); }
.btn--primary:hover { --btn-bg: var(--wine-soft); }
/* The offset edge is the whole point of these buttons, and a black one is
   invisible on the dark panels — every wine button sitting on ink or on the
   hero photo gets a bone edge instead. .btn--on-dark keeps its brass. */
.hero .btn:not(.btn--on-dark),
.section--ink .btn:not(.btn--on-dark),
.quote .btn:not(.btn--on-dark),
.repair .btn:not(.btn--on-dark) { --btn-shadow: var(--bone); }
.btn--lg { padding: 1.2rem 2.3rem; font-size: var(--step-1); }
.btn[disabled] { opacity: .35; pointer-events: none; }

/* The page's fixed furniture sits above 1000 deliberately: Leaflet numbers its
   own controls up to 1000, and anything below that can end up underneath the
   map. Order among themselves is unchanged — skip link, header, drawer, bar. */
/* --------------------------------------------------------- header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1200;
  padding-block: 1rem;
  transition: background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(22,21,26,.72), transparent);
  transition: opacity .4s var(--ease);
}
.site-header.is-stuck {
  padding-block: .55rem;
  box-shadow: 0 1px 0 var(--line-soft), 0 12px 30px -24px rgba(22,21,26,.5);
}
/* backdrop-filter lives on the pseudo-element, never on .site-header itself —
   putting it on the element that also holds the <img> logo is what makes iOS
   Safari silently fail to composite that child image (it renders blank). */
.site-header.is-stuck::before {
  opacity: 1;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.header-inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

/* wordmark — the workshop's own mark, ivory disc and all */
.wordmark { display: flex; align-items: center; gap: .72rem; text-decoration: none; flex: none; }
.wordmark__logo {
  width: 46px; height: 46px; flex: none; object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(22,21,26,.45));
  transition: width .4s var(--ease), height .4s var(--ease), filter .4s var(--ease);
}
.is-stuck .wordmark__logo { width: 40px; height: 40px; filter: none; }
@media (max-width: 620px) { .wordmark__logo { width: 38px; height: 38px; } }
.wordmark__text { display: grid; line-height: 1; }
.wordmark__name {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: 1.62rem; letter-spacing: .03em; color: var(--bone);
  transition: color .4s var(--ease);
}
/* the strapline runs in the emblem's own red, to tie it to the mark beside it.
   It is 10px type, so on the pale stuck header it steps down to the deeper red
   — the bright one only clears AA against the dark header. */
.wordmark__sub {
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 700; color: var(--red); margin-top: .2rem;
}
.is-stuck .wordmark__name { color: var(--ink); }
.is-stuck .wordmark__sub { color: var(--wine-soft); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(.7rem, 1.1vw, 1.25rem); }
/* The hard-edged chip belongs on things you press — buttons and the burger.
   The nav wears a red rule instead, swiping out from under the label the way
   the one under «ΣΚΙΑ» draws itself in. */
.site-nav a {
  text-decoration: none; font-weight: 700; font-size: 1rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--bone);
  position: relative; padding: .4rem .16rem;
  /* multi-word labels ("Το φως") were wrapping to two lines and knocking
     themselves out of alignment with the rest of the row */
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--red);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after {
  transform: scaleX(1); transform-origin: left;
}
.is-stuck .site-nav a { color: var(--ink); }

.callpick { position: relative; flex: none; }

/* Sized off the ΜΕΝΟΥ button beside it rather than off the number it used
   to print — at display-800/1.4rem it towered over its neighbour. Same type
   ramp, same padding, same 4px offset edge: the two now read as one pair. */
.header-phone {
  background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  flex: none; white-space: nowrap;
  padding: .6rem .85rem; border-radius: var(--edge-radius);
  border: 2px solid var(--bone);
  box-shadow: var(--edge-x) var(--edge-y) 0 0 var(--brass);
  font-family: var(--body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--bone);
  transition: color .3s var(--ease), background .3s var(--ease),
              border-color .3s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.header-phone:hover, .header-phone:focus-visible {
  background: var(--bone); color: var(--ink);
  transform: translate(var(--edge-x), var(--edge-y)); box-shadow: 0 0 0 0 var(--brass);
}
.is-stuck .header-phone {
  color: var(--ink); border-color: var(--ink);
  box-shadow: var(--edge-x) var(--edge-y) 0 0 var(--wine);
}
.is-stuck .header-phone:hover { background: var(--wine); color: var(--marble); box-shadow: 0 0 0 0 var(--wine); }
.header-phone svg { width: 15px; height: 15px; }

.nav-toggle { display: none; }

/* The seven Greek labels + the phone number need ~1240px now that both wear a
   bordered chip. Below that we switch to the burger rather than let the row
   crowd, wrap or run off the right edge. */
@media (max-width: 1240px) {
  .site-nav { display: none; }
  .callpick { margin-left: auto; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .55rem; margin-left: .9rem;
    cursor: pointer; padding: .6rem .85rem;
    background: var(--bone); color: var(--ink);
    border: 2px solid var(--ink); border-radius: var(--edge-radius);
    box-shadow: var(--edge-x) var(--edge-y) 0 0 var(--wine);
    font-weight: 700; font-size: var(--step--1); letter-spacing: .12em;
    text-transform: uppercase;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  }
  .nav-toggle:hover, .nav-toggle:focus-visible, .nav-open .nav-toggle {
    transform: translate(var(--edge-x), var(--edge-y));
    box-shadow: 0 0 0 0 var(--wine);
  }
  .is-stuck .nav-toggle { color: var(--ink); }
  .nav-toggle__bars { display: grid; gap: 4px; width: 22px; }
  .nav-toggle__bars span { height: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .3s; }
  .nav-open .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}
/* On a phone the wordmark + number + burger stop fitting on one row; the
   sticky ΚΑΛΕΣΕ bar already covers calling, so the header number steps aside.
   Needs the attribute in the selector to outrank the generic
   `a[href^="tel:"] { display:inline-flex }` tap-target rule below. */
@media (max-width: 620px) {
  .header-phone[href^="tel:"] { display: none; }
}

/* mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 1150;
  background: var(--ink); color: var(--bone);
  display: grid; align-content: center; gap: .4rem;
  padding: 6rem var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease), visibility 0s linear .6s;
  visibility: hidden;
}
.nav-open .mobile-nav { clip-path: inset(0 0 0 0); visibility: visible; transition-delay: 0s; }
.mobile-nav__mark {
  width: clamp(64px, 18vw, 92px); height: auto; margin-bottom: 1.25rem;
  opacity: 0; transform: translateY(14px);
}
.nav-open .mobile-nav__mark { animation: navIn .5s var(--ease) .06s forwards; }
.mobile-nav a {
  font-family: var(--display); font-size: clamp(2.4rem, 11vw, 4rem);
  text-transform: uppercase; text-decoration: none; font-weight: 800;
  line-height: 1.02; opacity: 0; transform: translateY(18px);
  /* the drawer answers the header: same red rule, sized to the bigger type */
  position: relative; width: fit-content;
}
.mobile-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: 4px;
  background: var(--red); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.mobile-nav a:hover::after, .mobile-nav a:focus-visible::after,
.mobile-nav a:active::after { transform: scaleX(1); transform-origin: left; }
.nav-open .mobile-nav a { animation: navIn .5s var(--ease) forwards; }
.nav-open .mobile-nav a:nth-child(2) { animation-delay: .12s; }
.nav-open .mobile-nav a:nth-child(3) { animation-delay: .18s; }
.nav-open .mobile-nav a:nth-child(4) { animation-delay: .24s; }
.nav-open .mobile-nav a:nth-child(5) { animation-delay: .30s; }
.nav-open .mobile-nav a:nth-child(6) { animation-delay: .36s; }
.nav-open .mobile-nav a:nth-child(7) { animation-delay: .42s; }
.nav-open .mobile-nav a:nth-child(8) { animation-delay: .48s; }
@keyframes navIn { to { opacity: 1; transform: none; } }
.mobile-nav__foot { margin-top: 2rem; font-family: var(--body); font-size: var(--step-0); color: var(--bone-3); }
.mobile-nav__foot a { font-family: var(--body); font-size: var(--step-1); color: var(--brass); opacity: 1; transform: none; }

/* ==========================================================================
   HERO — «Η σκιά πέφτει»
   Scroll-scrubbed: noon glare → awning unfurls → shadow sweeps → colour returns
   ========================================================================== */
/* svh on BOTH, deliberately. Mixing `vh` here with `svh` on the sticky meant
   that on a real phone the section was sized to the URL-bar-hidden viewport
   while its child was sized to the URL-bar-shown one — so every time the bar
   slid away the layout resized mid-scroll and the scrub jumped. svh never
   changes as the bar moves, so the scroll stays glued. When the bar does
   retract, the extra strip revealed below is the hero's own dark background. */
.hero { position: relative; height: 200vh; height: 200svh; background: var(--ink); }
.hero__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; display: grid; place-items: end stretch;
}
.hero__media { position: absolute; inset: 0; }
.hero__media picture { position: absolute; inset: 0; display: block; }
/* The frame-sequence canvas sits over the stills and only fades in once every
   frame has decoded. The photo crossfade underneath never stops working, so a
   slow connection degrades silently instead of stuttering. */
.hero__media canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .6s var(--ease);
}
.hero__media canvas.is-live { opacity: 1; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__shade { opacity: 0; will-change: opacity; }

/* The stock frames run amber. A small hue rotation and a desaturation pull
   them off yellow and onto the leaflet's warm-neutral, without touching the
   real job photography elsewhere on the page. */
/* and the scene desaturates going into shade, rather than saturating up —
   colour drains out of a shaded balcony, it doesn't intensify */
.hero__media { filter: saturate(calc(.86 - .08 * var(--shade, 0))) hue-rotate(-8deg); }
.sun__layer img { filter: saturate(.84) hue-rotate(-7deg); }
/* Glare overlay driven by --shade (0 = blinding noon, 1 = full shade).
   Hotspot lives top-RIGHT, deliberately clear of the copy block (which sits
   bottom-left) — centring it over the headline is what washed the type out. */
.hero__glare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(78% 62% at 82% 6%,
    rgba(255,247,226,.82), rgba(255,229,176,.28) 44%, transparent 74%);
  opacity: calc(1 - var(--shade, 0));
  mix-blend-mode: screen;
}
/* Shade is lit by open sky, so it falls COOL. This layer used to fade in
   burgundy (--wine-deep), which tinted the whole balcony red the moment the
   awning came down — the one place on the page where the brand colour was
   lying about the light. Slate blue reads as actual shade. */
.hero__cool {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(44,56,78,.24), rgba(20,21,28,.44));
  opacity: var(--shade, 0);
}
/* the hard shadow edge that sweeps across as the awning opens */
.hero__shadowline {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(101deg,
      rgba(24,29,40,.62) 0%,
      rgba(22,26,35,.5) calc(var(--sweep, 0%) - 6%),
      rgba(22,21,26,.06) var(--sweep, 0%),
      transparent calc(var(--sweep, 0%) + 3%));
}
/* Two-axis scrim. The bottom ramp carries the copy block, the left ramp keeps
   the headline legible no matter how bright the photo behind it gets — the copy
   must never depend on the image being dark in the right place. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(18,15,21,.94) 0%, rgba(18,15,21,.72) 24%,
      rgba(18,15,21,.34) 50%, rgba(18,15,21,.06) 72%, transparent 86%),
    linear-gradient(to right,
      rgba(18,18,25,.68) 0%, rgba(17,17,23,.30) 32%, transparent 64%);
}
.hero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .32;
  mix-blend-mode: overlay;
  background-image: var(--grain);
  background-size: 180px 180px;
}

.hero__content {
  position: relative; z-index: 2;
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  /* guarantees the copy can never tuck under the fixed header, whatever the
     viewport height does to the type scale */
  padding-top: clamp(76px, 12vh, 116px);
  padding-bottom: clamp(2rem, 7vh, 5rem);
  color: var(--bone);
}
.hero__title {
  font-size: var(--step-5);
  letter-spacing: -0.015em;
  max-width: 15ch;
  margin-bottom: 1.25rem;
}
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span {
  display: block;
  transform: translateY(105%);
  animation: lineUp 1.05s var(--ease) forwards;
}
.hero__title .ln:nth-child(1) > span { animation-delay: .25s; }
.hero__title .ln:nth-child(2) > span { animation-delay: .37s; }
.hero__title .ln:nth-child(3) > span { animation-delay: .49s; }
@keyframes lineUp { to { transform: none; } }

/* JS splits the headline into words and letters, so they rise out of the line
   mask one after another instead of a line at a time. The whole-line rise
   above stays as the fallback for no-JS and for reduced motion, where the
   split never happens. */
.hero__title.is-split .ln > span { transform: none; animation: none; }
.hero__title .wd { display: inline-block; white-space: nowrap; }
.hero__title .chr {
  display: inline-block; transform: translateY(110%);
  animation: letterUp .75s var(--ease) calc(var(--i) * 16ms + .22s) forwards;
}
@keyframes letterUp { to { transform: none; } }
/* «ΣΚΙΑ» is the whole pitch, so the word gets the demo: once the letters land,
   an awning unrolls under it — canopy first, then the scalloped valance
   dropping and settling like real fabric — and the letters fall into shade one
   after another as it crosses them. Sunlit bone → shaded brass. */
.hero__title em {
  font-style: normal; color: var(--brass-lite);
  position: relative; display: inline-block;
}
.hero__title.is-split em .chr {
  color: var(--bone);
  animation: letterUp .75s var(--ease) calc(var(--i) * 16ms + .22s) forwards,
             intoShade .55s var(--ease) calc(var(--j) * 90ms + 1.5s) forwards;
}
@keyframes intoShade {
  to { color: var(--brass-lite); text-shadow: 0 .04em .07em rgba(22,21,26,.55); }
}
/* the canopy, unrolling left to right off its arm */
.hero__title em::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: .07em; height: .085em;
  background: linear-gradient(180deg, var(--brass-lite), var(--brass) 58%, var(--brass-deep));
  transform-origin: left; transform: scaleX(0);
  animation: underlineIn .85s var(--ease) 1.4s forwards;
}
/* the valance: wipes across with the canopy, then drops off it and settles */
.hero__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.01em; height: .08em;
  background-image: radial-gradient(circle 0.045em at 50% 0, var(--brass) 99%, transparent 100%);
  background-size: .16em 100%; background-repeat: repeat-x;
  transform-origin: left top; transform: scaleX(0); scale: 1 .1;
  animation: underlineIn .85s var(--ease) 1.4s forwards,
             valanceDrop 1.1s var(--ease-io) 1.62s forwards;
}
@keyframes underlineIn { to { transform: scaleX(1); } }
@keyframes valanceDrop {
  0%   { scale: 1 .1;   rotate: 0deg; }
  52%  { scale: 1 1.16; rotate: .45deg; }
  76%  { scale: 1 .95;  rotate: -.22deg; }
  100% { scale: 1 1;    rotate: 0deg; }
}

.hero__lede {
  max-width: 46ch; font-size: var(--step-1); color: var(--bone-2);
  opacity: 0; animation: fadeUp .9s var(--ease) .72s forwards;
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem;
  opacity: 0; animation: fadeUp .9s var(--ease) .86s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --- hero on phones ------------------------------------------------------
   At 375×812 the display type + lede + two CTAs + a 3-row meta list measured
   853px inside an 812px viewport, so the block pushed up under the header.
   Tighten the type ramp, stack the CTAs full-width, and reserve header space. */
@media (max-width: 620px) {
  .hero__content {
    padding-top: calc(var(--gutter) + 62px);
    padding-bottom: clamp(1.5rem, 5vh, 2.5rem);
  }
  .hero__title { font-size: clamp(2.5rem, 12.5vw, 3.6rem); max-width: 13ch; margin-bottom: .9rem; }
  .hero__lede  { font-size: var(--step-0); max-width: 36ch; }
  .hero__actions { margin-top: 1.4rem; gap: .6rem; }
  .hero__actions .btn { width: 100%; padding-block: 1.05rem; }
  /* keep the primary CTA on one line — a 3-line button reads as a paragraph */
  .hero__actions .btn--lg { font-size: var(--step-0); }
  .eyebrow { margin-bottom: .9rem; font-size: .72rem; letter-spacing: .12em; }
  .eyebrow::before { width: 1.25rem; }
}
/* When the label wraps, centre-aligning the rule floats it between the lines;
   pin it to the optical centre of the FIRST line instead. */
.eyebrow { align-items: flex-start; }
.eyebrow::before { margin-top: .58em; }
/* very short phones in landscape-ish ratios: let the hero grow instead of clipping */
@media (max-width: 620px) and (max-height: 700px) {
  .hero__sticky { height: auto; min-height: 100svh; }
}

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust { background: var(--ink); color: var(--bone); border-top: 1px solid rgba(250,245,233,.1); }
.trust__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  /* the rules are drawn by the gap, so a wrapped row can never end on a
     dangling hairline the way per-cell borders did */
  gap: 1px; background: rgba(250,245,233,.1);
}
.trust__item {
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.25rem, 2.4vw, 2rem);
  background: var(--ink);
  display: grid; gap: .45rem; align-content: start;
}
.trust__k {
  font-variant-numeric: tabular-nums;
  font-family: var(--display); font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 800; color: var(--brass); line-height: .9;
}
.trust__k--sm { font-size: clamp(1.4rem, 2.2vw, 1.9rem); color: var(--bone); }
.trust__v { font-size: var(--step--1); color: var(--bone-3); letter-spacing: .04em; }

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section { padding-block: var(--section); position: relative; }
.section--bone { background: var(--bone); }
.section--marble { background: var(--marble); }
.section--ink { background: var(--ink); color: var(--bone); }
.section--ink .section__title { color: var(--bone); }
.section--ink .section__lede { color: var(--bone-3); }

.section__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* the leaflet rules everything off with a thin brass line — so does the page */
.section__head .section__title::after {
  content: ""; display: block; width: 84px; height: 2px; margin-top: 1.1rem;
  background: linear-gradient(90deg, var(--brass), color-mix(in srgb, var(--brass) 10%, transparent));
}
.section__title { font-size: var(--step-4); margin-bottom: 1rem; }
.section__lede { font-size: var(--step-1); color: var(--ink-3); max-width: 52ch; }

/* reveal on scroll */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   ΚΑΤΑΣΚΕΥΕΣ, the catalogue
   ========================================================================== */
/* v2: the catalogue styles live in css/v2.css */

/* ==========================================================================
   «ΤΟ ΦΩΣ ΣΤΙΣ 3» — sun-angle slider
   ========================================================================== */
.sun { --pos: 44; }

/* The scene. It is no longer the drag surface — dragging a photograph fights
   the browser's own image-drag and its scroll gesture, which is exactly what
   made this section feel broken. The photo now only ever displays. */
.sun__stage {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--ink-2); border-radius: 3px;
  box-shadow: 0 30px 60px -40px rgba(22,21,26,.8);
}
@media (max-width: 640px) { .sun__stage { aspect-ratio: 4 / 5; } }

/* Three exposures of the same balcony, crossfaded — the whole scene re-lights. */
.sun__layer { position: absolute; inset: 0; }
.sun__layer picture { position: absolute; inset: 0; display: block; }
.sun__layer img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-select: none; pointer-events: none;
}
.sun__layer--mid, .sun__layer--eve { opacity: 0; will-change: opacity; }

/* the sun rides an arc across the frame — a read-out, not a control */
.sun__sky { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sun__sky::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--pos, 44) * 1%); width: 1px;
  background: linear-gradient(to bottom, rgba(168,124,46,.65), rgba(168,124,46,.02));
}
.sun__knob {
  position: absolute; left: calc(var(--pos, 44) * 1%); top: var(--knob-y, 40%);
  translate: -50% -50%;
  width: clamp(50px, 6.6vw, 62px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--brass-lite), var(--brass) 62%, var(--brass-deep));
  color: var(--ink); display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: clamp(.9rem, 1.9vw, 1.08rem);
  box-shadow: 0 0 0 6px rgba(168,124,46,.16), 0 0 26px rgba(168,124,46,.34);
}

/* ── the control: a real range input, so touch, mouse, keyboard and AT all
   behave exactly as the platform intends ─────────────────────────────────── */
.sun__scrub { margin-top: 1.15rem; }
.sun__rail { position: relative; height: 46px; display: grid; align-items: center; }
/* the dawn→dusk gradient the thumb travels along */
.sun__rail::before {
  content: ""; position: absolute; left: 0; right: 0; height: 8px; border-radius: 99px;
  background: linear-gradient(90deg, #4A5A72 0%, var(--brass-lite) 44%, var(--brass) 62%, #7A3324 88%, #3A2130 100%);
  box-shadow: inset 0 0 0 1px rgba(250,245,233,.16);
}
.sun__range {
  position: relative; z-index: 2; width: 100%; margin: 0;
  height: 46px; background: none; -webkit-appearance: none; appearance: none;
  cursor: grab; touch-action: pan-y;
}
.sun__range:active { cursor: grabbing; }
.sun__range::-webkit-slider-runnable-track { height: 46px; background: none; }
.sun__range::-moz-range-track { height: 46px; background: none; }
.sun__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 34px; height: 34px; margin-top: 6px;
  border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(circle at 34% 30%, var(--brass-lite), var(--brass) 66%, var(--brass-deep));
  box-shadow: 0 0 0 4px rgba(168,124,46,.22), 0 6px 16px -6px rgba(22,21,26,.9);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.sun__range::-moz-range-thumb {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(circle at 34% 30%, var(--brass-lite), var(--brass) 66%, var(--brass-deep));
  box-shadow: 0 0 0 4px rgba(168,124,46,.22), 0 6px 16px -6px rgba(22,21,26,.9);
}
.sun__range:hover::-webkit-slider-thumb { transform: scale(1.06); }
.sun__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--brass-lite); }
.sun__range:focus-visible { outline: 0; }
/* until it is first touched, the thumb breathes so it reads as draggable */
.sun__range:not(.is-touched)::-webkit-slider-thumb { animation: knobPulse 2.4s var(--ease-io) infinite; }
.sun__range:not(.is-touched)::-moz-range-thumb { animation: knobPulse 2.4s var(--ease-io) infinite; }
@keyframes knobPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(168,124,46,.22), 0 6px 16px -6px rgba(22,21,26,.9); }
  50%      { box-shadow: 0 0 0 12px rgba(168,124,46,0), 0 6px 16px -6px rgba(22,21,26,.9); }
}

.sun__stops { display: flex; justify-content: space-between; margin-top: .5rem; }
.sun__stop {
  background: none; border: 0; cursor: pointer; padding: .35rem .5rem;
  font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.7rem); font-weight: 800;
  color: rgba(250,245,233,.42); line-height: 1;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.sun__stop:first-child { padding-left: 0; }
.sun__stop:last-child { padding-right: 0; }
.sun__stop:hover { color: var(--bone-2); }
.sun__stop.is-active { color: var(--brass); transform: translateY(-2px); }

.sun__foot {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .75rem clamp(1rem, 3vw, 2.5rem);
  margin-top: 1.15rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line-brass);
}
.sun__caption {
  margin: 0; flex: 1 1 26ch; min-width: 0;
  color: var(--bone); font-size: var(--step-0); line-height: 1.55;
  border-left: 2px solid var(--brass); padding-left: .9rem;
}
.sun__hint {
  margin: 0; flex: none; font-size: var(--step--1); color: var(--bone-3);
  display: inline-flex; align-items: center; gap: .55rem; letter-spacing: .04em;
}
.sun__hint svg { width: 17px; height: 17px; color: var(--brass); }

/* ==========================================================================
   ΥΦΑΣΜΑ — macro fabric section
   ========================================================================== */
.fabric { position: relative; overflow: hidden; background: var(--ink); color: var(--bone); }
.fabric__bg { position: absolute; inset: 0; }
.fabric__bg picture, .fabric__bg video { position: absolute; inset: 0; display: block; }
.fabric__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
/* fades over the poster only once it is actually playing — no black flash */
.fabric__bg video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s var(--ease);
}
.fabric__bg video.is-live { opacity: .55; }
.fabric__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(18,17,22,.94) 18%, rgba(18,17,22,.55) 58%, rgba(18,17,22,.2));
}
.fabric__inner { position: relative; z-index: 2; }
.fabric__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .fabric__grid { grid-template-columns: 1.05fr .95fr; align-items: center; } }

/* the three things the cloth actually decides, in place of eight invented
   gradients that were never real fabric codes */
.fabric__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.fabric__facts li {
  padding-left: 1rem; border-left: 2px solid var(--brass);
  font-size: var(--step--1); color: var(--bone-3); line-height: 1.6;
}
.fabric__facts b {
  display: block; color: var(--bone); font-size: var(--step-0);
  font-weight: 700; margin-bottom: .15rem; line-height: 1.35;
}

/* ==========================================================================
   ΕΠΙΣΚΕΥΕΣ — repair fast lane
   ========================================================================== */
.repair {
  background: var(--wine); color: var(--marble);
  position: relative; overflow: hidden;
}
/* diagonal awning-stripe texture, in-CSS (no image) */
.repair::before {
  content: ""; position: absolute; inset: -20%;
  background: repeating-linear-gradient(115deg,
    rgba(255,255,255,.055) 0 34px, transparent 34px 68px);
  pointer-events: none;
}
/* the emblem, blown up and knocked back — the leaflet does the same with its
   watermark centaur on the burgundy panel */
.repair__mark {
  position: absolute; right: -6%; top: 50%; translate: 0 -50%;
  width: min(46%, 460px); height: auto; opacity: .07;
  pointer-events: none; z-index: 1;
}
@media (max-width: 880px) { .repair__mark { right: -18%; width: 62%; opacity: .06; } }
.repair__inner { position: relative; z-index: 2; display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
@media (min-width: 880px) { .repair__inner { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.repair__title { font-size: var(--step-4); color: var(--marble); }
.repair__lede { color: rgba(255,255,255,.86); font-size: var(--step-1); max-width: 44ch; }
.repair__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
.repair__list li {
  display: flex; gap: .7rem; align-items: baseline;
  font-size: var(--step-0); color: rgba(255,255,255,.92);
}
.repair__list li::before { content: ""; flex: none; }
.repair__card {
  background: var(--ink); color: var(--bone);
  padding: clamp(1.6rem, 3.5vw, 2.4rem); border-radius: 3px;
  box-shadow: 0 30px 60px -30px rgba(22,21,26,.6);
}
.repair__card h3 { font-size: var(--step-2); margin-bottom: .6rem; }
.repair__card p { color: var(--bone-3); font-size: var(--step--1); }
.repair__phones { display: grid; gap: .55rem; margin-top: 1.3rem; }
.repair__phone {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .95rem 1.1rem; border-radius: 2px; text-decoration: none;
  background: rgba(250,245,233,.06); color: var(--bone);
  border: 1px solid rgba(250,245,233,.12);
  transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.repair__phone:hover { background: rgba(168,124,46,.14); border-color: var(--brass); transform: translateX(4px); }
.repair__phone b { font-variant-numeric: tabular-nums; font-family: var(--display); font-size: 1.5rem; font-weight: 800; letter-spacing: .02em; }
.repair__phone span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-3); }

/* ==========================================================================
   QUOTE WIZARD
   ========================================================================== */
.quote { background: var(--ink); color: var(--bone); }
.quote__shell {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 940px) { .quote__shell { grid-template-columns: .82fr 1.18fr; align-items: start; } }

.quote__aside .section__title { font-size: var(--step-3); }
.quote__points { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.quote__points li { display: grid; grid-template-columns: 26px 1fr; gap: .85rem; align-items: start; font-size: var(--step--1); color: var(--bone-3); }
.quote__points svg { width: 20px; height: 20px; color: var(--brass); margin-top: 2px; }
.quote__points b { color: var(--bone); display: block; font-size: var(--step-0); font-weight: 700; margin-bottom: .1rem; }

.wizard {
  background: var(--marble); color: var(--ink); border-radius: 3px;
  padding: clamp(1.5rem, 3.5vw, 2.6rem);
  box-shadow: 0 40px 80px -40px rgba(22,21,26,.7);
}
.wizard__bar { display: flex; gap: .4rem; margin-bottom: 1.6rem; }
.wizard__seg { height: 3px; flex: 1; background: var(--bone-2); border-radius: 2px; overflow: hidden; }
.wizard__seg::after {
  content: ""; display: block; height: 100%; width: 100%; background: var(--wine);
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease);
}
.wizard__seg.is-done::after { transform: scaleX(1); }

.wizard__stepno {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 700; color: var(--wine); margin-bottom: .5rem;
}
.wizard__q { font-size: var(--step-2); margin-bottom: 1.4rem; }

.wizard__panel { display: none; }
/* A <legend> is painted at the top of its fieldset regardless of DOM order and
   ignores `order`, which forced the question above "Βήμα 1 από 4". The visible
   question is now a <p>; an sr-only <legend> + aria-labelledby keep the group
   properly named for assistive tech. */
.wizard__panel.is-active {
  display: flex; flex-direction: column;
  animation: panelIn .5s var(--ease);
}
@keyframes panelIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.opts { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.opt {
  position: relative; display: grid; gap: .3rem; cursor: pointer;
  padding: 1.05rem 1.15rem; border-radius: 2px; text-align: left;
  background: var(--bone); border: 1.5px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.opt:hover { transform: translateY(-2px); background: var(--bone-2); }
.opt.is-selected { border-color: var(--wine); background: color-mix(in srgb, var(--wine) 8%, var(--marble)); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt__t { font-weight: 700; font-size: var(--step-0); }
.opt__d { font-size: .78rem; color: var(--ink-3); line-height: 1.45; }
.opt__check {
  position: absolute; top: .7rem; right: .8rem; width: 16px; height: 16px;
  border-radius: 50%; border: 1.5px solid var(--bone-3);
  display: grid; place-items: center;
  transition: .3s var(--ease);
}
.opt.is-selected .opt__check { border-color: var(--wine); background: var(--wine); }
.opt__check::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--marble); transform: scale(0); transition: transform .3s var(--ease); }
.opt.is-selected .opt__check::after { transform: scale(1); }

.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.field input, .field textarea {
  padding: .9rem 1rem; border-radius: 2px; background: var(--bone);
  border: 1.5px solid transparent; transition: border-color .3s var(--ease), background .3s;
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--wine); background: var(--marble); }
.field textarea { resize: vertical; min-height: 90px; }
.field__row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

/* dimension sliders with live visual */
.dim { display: grid; gap: 1.1rem; }
.dim__row { display: grid; gap: .5rem; }
.dim__top { display: flex; justify-content: space-between; align-items: baseline; }
.dim__label { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.dim__val { font-family: var(--display); font-size: 1.7rem; font-weight: 800; color: var(--wine); }
.dim input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; background: var(--bone-2); border-radius: 2px; }
.dim input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--wine); cursor: grab; border: 3px solid var(--marble);
  box-shadow: 0 3px 10px -2px rgba(22,21,26,.5);
}
.dim input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; background: var(--wine);
  cursor: grab; border: 3px solid var(--marble);
}
.dim__preview {
  margin-top: .3rem; background: var(--bone); border-radius: 2px; padding: 1rem;
  display: grid; place-items: center; min-height: 132px;
}
.dim__preview svg { width: 100%; max-width: 240px; height: auto; }

.wizard__nav { display: flex; gap: .7rem; margin-top: 1.6rem; align-items: center; }
.wizard__back {
  background: none; border: 0; cursor: pointer; padding: .6rem .2rem;
  font-size: var(--step--1); font-weight: 700; color: var(--ink-3);
  letter-spacing: .06em; text-transform: uppercase;
}
.wizard__back:hover { color: var(--ink); }
.wizard__nav .btn { margin-left: auto; }
.wizard__note { font-size: .74rem; color: var(--ink-3); margin: 1rem 0 0; line-height: 1.5; }

.wizard__done { display: none; text-align: center; padding: 1.5rem 0; }
.wizard__done.is-active { display: block; animation: panelIn .5s var(--ease); }
.wizard__done svg { width: 54px; height: 54px; color: var(--olive); margin: 0 auto 1rem; }


/* ==========================================================================
   THE CALL PICKER
   Three ways into the workshop, and the header no longer guesses which one you
   want. The trigger keeps the chip geometry the header already had; the panel
   below borrows the dark card treatment from the repair section.
   ========================================================================== */
.header-phone__caret {
  width: 12px; height: 12px; opacity: .65;
  transition: transform .3s var(--ease);
}
.callpick.is-open .header-phone__caret { transform: rotate(180deg); }
/* the trigger is pressed while its panel is open, so it wears the pressed state */
.callpick.is-open .header-phone {
  background: var(--bone); color: var(--ink);
  transform: translate(var(--edge-x), var(--edge-y)); box-shadow: 0 0 0 0 var(--brass);
}
.is-stuck .callpick.is-open .header-phone { background: var(--wine); color: var(--marble); box-shadow: 0 0 0 0 var(--wine); }

.callpick__panel {
  position: absolute; top: calc(100% + .75rem); right: 0; z-index: 30;
  width: min(20rem, calc(100vw - var(--gutter) * 2));
  padding: .5rem;
  background: var(--ink); color: var(--bone);
  border: 2px solid var(--bone); border-radius: var(--edge-radius);
  box-shadow: var(--edge-x) var(--edge-y) 0 0 var(--brass),
              0 26px 50px -30px rgba(0, 0, 0, .9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-9px) scale(.98); transform-origin: top right;
  transition: opacity .24s var(--ease), transform .24s var(--ease),
              visibility 0s linear .24s;
}
.callpick.is-open .callpick__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; transition-delay: 0s;
}
.callpick__head {
  margin: .45rem .65rem .55rem; font-size: .6rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3);
}
.callpick__row {
  display: flex; align-items: center; gap: .8rem;
  padding: .7rem .65rem; border-radius: 3px;
  text-decoration: none; color: var(--bone);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.callpick__row:hover, .callpick__row:focus-visible {
  background: rgba(168, 124, 46, .16); transform: translateX(3px);
}
.callpick__ico {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(250, 245, 233, .07);
  box-shadow: inset 0 0 0 1px rgba(250, 245, 233, .15);
}
.callpick__ico svg { width: 17px; height: 17px; color: var(--brass-lite); }
.callpick__txt { display: grid; gap: .08rem; min-width: 0; }
.callpick__txt span {
  font-size: .6rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--bone-3);
}
.callpick__txt b {
  font-family: var(--display); font-size: 1.3rem; font-weight: 800;
  letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
/* an address is not a phone number and will not fit the condensed numerals */
.callpick__row[href^="mailto:"] .callpick__txt b {
  font-family: var(--body); font-size: .84rem; font-weight: 700;
  letter-spacing: 0; overflow-wrap: anywhere;
}
/* on a phone the label is dead weight — the icon and the caret say enough,
   and the sticky ΚΑΛΕΣΕ bar is the primary call target down there anyway */
@media (max-width: 620px) {
  /* hidden VISUALLY, not with display:none: both SVGs inside are aria-hidden,
     so dropping the text would leave the button with no accessible name */
  .header-phone__label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .header-phone { padding: .5rem .62rem; }

  /* A 20rem panel hung off the right edge of a compact trigger starts 25px
     off the left of a 375px screen, and `overflow-x: clip` on <body> silently
     eats the icons rather than scrolling. Dropping .callpick out of the
     positioned chain hands the panel to .site-header instead, so it spans the
     header's own gutters and sits squarely under it. */
  .callpick { position: static; }
  .callpick__panel {
    top: calc(100% + .5rem);
    left: var(--gutter); right: var(--gutter);
    width: auto;
  }
}

/* Three items in a row that only ever fitted two. The wordmark, the call
   trigger and the burger measured 397px inside 333px of gutter at 375px wide,
   and `overflow-x: clip` on <body> was quietly eating the right-hand end of
   ΜΕΝΟΥ rather than scrolling. Below 440px the wordmark steps down and both
   controls go icon-only — matched pair, ~297px, room to spare. */
@media (max-width: 440px) {
  .header-inner { gap: .75rem; }
  .wordmark { gap: .55rem; }
  .wordmark__name { font-size: 1.24rem; letter-spacing: .02em; }
  .wordmark__sub { font-size: .52rem; letter-spacing: .16em; }
  .wordmark__logo { width: 34px; height: 34px; }
  .is-stuck .wordmark__logo { width: 32px; height: 32px; }

  .nav-toggle { margin-left: .5rem; padding: .6rem .7rem; gap: 0; }
  /* visually hidden, not display:none — the bars are aria-hidden, so this text
     is the button's only accessible name */
  .nav-toggle__label {
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

/* ==========================================================================
   ΚΑΛΥΨΗ — the whole country, one dot per 25km or so
   ========================================================================== */
.reach { background: var(--ink); color: var(--bone); }
.reach .section__title { color: var(--bone); }
.reach .section__lede { color: var(--bone-3); }
.reach .section__title em { font-style: normal; color: var(--brass-lite); }

.reach__grid {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr); align-items: center;
}
@media (min-width: 900px) { .reach__grid { grid-template-columns: 1.02fr .98fr; } }

.reach__facts {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; border-top: 1px solid rgba(250, 245, 233, .14);
}
.reach__facts li {
  display: grid; grid-template-columns: 11rem 1fr; gap: 1rem;
  align-items: baseline; padding: 1.05rem 0;
  border-bottom: 1px solid rgba(250, 245, 233, .14);
}
/* "Ένα συνεργείο" is two words: the column has to hold it, and a 0.9
   leading drops the descenders of a wrapped second line onto the rule below. */
.reach__facts b {
  font-family: var(--display); font-weight: 800; line-height: 1.05;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem); color: var(--brass);
}
.reach__facts span { font-size: var(--step--1); color: var(--bone-3); letter-spacing: .03em; }
@media (max-width: 520px) {
  .reach__facts li { grid-template-columns: 1fr; gap: .2rem; }
}

.reach__fig { margin: 0; display: grid; gap: 1.1rem; }
.reach__map { position: relative; }
.reach__svg { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; }

/* Each ring of dots is one <path>, and they light up outward from the workshop
   on a per-ring delay — the shape arrives the way the vans do. */
/* Painted by default, animated as a bonus. Hanging visibility off the observer
   meant a reload that restored the scroll position mid-section could register
   the observer with the map already on screen, get one "not intersecting"
   callback, and leave the country blank. `both` holds the band at zero through
   its own delay, so the stagger survives without the map ever depending on it. */
.reach__dots { fill: var(--bone-2); opacity: .58; }
.reach__map.is-live .reach__dots {
  animation: reachIn .9s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes reachIn { from { opacity: 0; } to { opacity: .58; } }

/* Brass on ink, same as every other hairline on the page. Drawn by default
   and animated on arrival, for the reason in the note above the dots. */
.reach__route {
  fill: none; stroke: var(--brass); stroke-width: .24;
  stroke-linecap: round; opacity: .72;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.reach__head { fill: var(--brass-lite); opacity: .95; }
.reach__map.is-live .reach__route {
  animation: reachDraw 1.5s var(--ease) both; animation-delay: var(--d);
}
.reach__map.is-live .reach__head {
  animation: reachHead .45s var(--ease) both; animation-delay: calc(var(--d) + 1.1s);
}
@keyframes reachDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes reachHead { from { opacity: 0; } to { opacity: .95; } }

.reach__hub > circle:not(.reach__halo) { fill: var(--red); }
.reach__halo {
  fill: none; stroke: var(--red); stroke-width: .45; opacity: .35;
  transform-box: fill-box; transform-origin: 50% 50%;
}
.reach__map.is-live .reach__halo { animation: reachPing 2.8s var(--ease-io) .9s infinite; }
@keyframes reachPing {
  0%   { opacity: .55; scale: .3; }
  100% { opacity: 0;   scale: 1.25; }
}

.reach__legend {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem 1.75rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone-3);
}
.reach__legend span { display: inline-flex; align-items: center; gap: .5rem; }
.reach__key {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--bone-2); opacity: .6;
}
.reach__key--hub { background: var(--red); opacity: 1; }

.reach__regions {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid rgba(250, 245, 233, .14);
}
/* Two labelled, counted sets instead of fifteen equal chips in one ragged
   wrap. The grouping is the point: ηπειρωτική AND νησιά says
   "everywhere" faster than counting the buttons does. */
.reach__rgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 720px) { .reach__rgrid { grid-template-columns: 1.5fr 1fr; } }
.reach__rgroup ul { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.reach__rlabel {
  font-family: var(--body); font-size: .66rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3);
  margin: 0 0 .85rem; display: flex; align-items: center; gap: .55rem;
}
.reach__rlabel span {
  font-variant-numeric: tabular-nums; color: var(--brass);
  border: 1px solid var(--line-brass); border-radius: 0;
  padding: .1rem .45rem; font-size: .62rem; letter-spacing: .04em;
}
.reach__rlabel::after {
  content: ""; flex: 1; height: 1px; background: rgba(250, 245, 233, .14);
}

/* the master: lights the whole country, and reads as the headline of the set */
.reach__all {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: .6rem 1.15rem;
  background: transparent; color: var(--bone);
  border: 2px solid var(--bone); border-radius: var(--edge-radius);
  box-shadow: var(--edge-x) var(--edge-y) 0 0 var(--brass);
  font-family: var(--body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .3s var(--ease), color .3s var(--ease);
}
.reach__all svg { width: 16px; height: 16px; color: var(--brass-lite); }
.reach__all:hover, .reach__all:focus-visible {
  transform: translate(var(--edge-x), var(--edge-y)); box-shadow: 0 0 0 0 var(--brass);
}
.reach__all[aria-pressed="true"] {
  background: var(--wine); color: var(--marble);
  transform: translate(var(--edge-x), var(--edge-y)); box-shadow: 0 0 0 0 var(--brass);
}
.reach__all[aria-pressed="true"] svg { color: var(--marble); }
/* Same hard edge and offset shadow as every other button on the page — they
   are pressable, so they wear the page's button, not a soft pill. */
.reach__region {
  padding: .5rem .95rem;
  background: transparent; color: var(--bone-2);
  border: 2px solid rgba(250, 245, 233, .3);
  border-radius: var(--edge-radius);
  box-shadow: none;
  font-family: var(--body); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .04em; cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.reach__region:hover, .reach__region:focus-visible {
  color: var(--bone); border-color: var(--bone);
  transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--brass);
}
/* pressed means pressed: it sits down on its own shadow and stays there */
.reach__region[aria-pressed="true"] {
  background: var(--wine); color: var(--marble); border-color: var(--bone);
  transform: translate(3px, 3px); box-shadow: 0 0 0 0 var(--brass);
}

/* on a phone fifteen full-size chips is most of a screen — tighten them */
@media (max-width: 560px) {
  .reach__region { padding: .45rem .7rem; font-size: .78rem; letter-spacing: .02em; }
  .reach__rgroup ul { gap: .4rem; }
}

/* the picked region, and the rest of the country knocked back behind it */
.reach__lit { fill: var(--brass-lite); }
.reach__map.has-pick .reach__dots { opacity: .16; }
.reach__map.has-pick .reach__route,
.reach__map.has-pick .reach__head { opacity: .22; }
.reach__dots, .reach__route, .reach__head { transition: opacity .45s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .reach__dots, .reach__route, .reach__head { transition: none; }
  .reach__map.is-live .reach__dots,
  .reach__map.is-live .reach__route,
  .reach__map.is-live .reach__head { animation: none; }
  .reach__halo { animation: none; opacity: .3; }
}

/* ==========================================================================
   ΤΟ ΠΑΝΙ — the sample book, photographed page by page
   ========================================================================== */
.pania { background: var(--ink); color: var(--bone); border-top: 1px solid var(--line-brass); }
.pania .section__title { color: var(--bone); }
.pania .section__lede { color: var(--bone-3); }

.pania__shell { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .pania__shell { grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); align-items: start; }
  /* the swatch grid is three rows tall — the chosen cloth rides along with it */
  .pania__stage { position: sticky; top: clamp(92px, 9vh, 112px); }
}

.pania__stage { margin: 0; display: grid; gap: 1.1rem; }
.pania__shot {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  background: var(--ink-2);
  border: 2px solid var(--bone); border-radius: var(--edge-radius);
  box-shadow: var(--edge-x) var(--edge-y) 0 0 var(--brass);
}
.pania__meta { display: grid; gap: .3rem; }
.pania__code {
  font-family: var(--display); font-size: 1.45rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; color: var(--brass);
  font-variant-numeric: tabular-nums;
}
.pania__name { font-family: var(--display); font-size: var(--step-2); font-weight: 800; text-transform: uppercase; line-height: 1; }
.pania__desc { font-size: var(--step--1); color: var(--bone-3); line-height: 1.55; }
.pania__cta { width: fit-content; }
.pania__cta svg { width: 15px; height: 15px; }

.pania__grid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 116px), 1fr));
}
.pania__opt {
  position: relative; display: block; cursor: pointer;
  border-radius: 3px; overflow: hidden; background: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(250, 245, 233, .14);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pania__opt:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--brass-lite), 0 14px 26px -16px rgba(0, 0, 0, .9); }
.pania__opt.is-on { box-shadow: inset 0 0 0 3px var(--brass), 0 14px 26px -16px rgba(0, 0, 0, .9); }
.pania__opt:has(input:focus-visible) { outline: 3px solid var(--brass-lite); outline-offset: 2px; }
.pania__opt input { position: absolute; opacity: 0; pointer-events: none; }
.pania__opt img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pania__tag {
  position: absolute; inset: auto 0 0 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: .4rem;
  padding: .45rem .55rem; color: var(--bone);
  background: linear-gradient(to top, rgba(18, 17, 22, .92), rgba(18, 17, 22, .5) 72%, transparent);
}
.pania__tag b { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pania__tag i {
  font-style: normal; font-size: .62rem; color: var(--brass-lite);
  letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.pania__note { margin: 1.4rem 0 0; font-size: .76rem; color: var(--bone-3); line-height: 1.6; max-width: 66ch; }

/* the choice, carried down to the request that actually gets sent */
.wizard__fabric {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: 2px;
  background: color-mix(in srgb, var(--wine) 8%, var(--marble));
  border-left: 3px solid var(--wine);
  font-size: .8rem; font-weight: 700; color: var(--wine);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.5rem 3rem 1.5rem 0; position: relative;
  font-family: var(--display); font-size: var(--step-2); font-weight: 800;
  text-transform: uppercase; line-height: 1.05;
  transition: color .3s var(--ease);
}
.faq__q:hover { color: var(--wine); }
.faq__q::after, .faq__q::before {
  content: ""; position: absolute; right: .4rem; top: 50%; background: var(--wine);
  transition: transform .45s var(--ease);
}
.faq__q::before { width: 16px; height: 2px; translate: 0 -50%; }
.faq__q::after  { width: 2px; height: 16px; translate: 7px -50%; }
.faq__item.is-open .faq__q::after { transform: rotate(90deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 1.5rem; max-width: 68ch; color: var(--ink-3); margin: 0; }

/* ==========================================================================
   ΕΡΓΑ — the reel, and a crossfading slideshow, both from the workshop's own archive
   ========================================================================== */
.works__reel {
  position: relative; border-radius: 4px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--ink-2);
  box-shadow: 0 40px 80px -46px rgba(22,21,26,.65), inset 0 0 0 1px var(--line-brass);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}
.works__reel video, .works__reel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.works__reel video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease); }
.works__reel video.is-live { opacity: 1; }
.works__reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(22,21,26,.55), transparent 42%);
}
.works__tag {
  position: absolute; z-index: 2; left: clamp(.9rem, 2.4vw, 1.6rem); bottom: clamp(.8rem, 2.2vw, 1.3rem);
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--bone); text-shadow: 0 1px 8px rgba(22,21,26,.7);
}
/* the one spot that keeps the emblem's pure red — a REC dot reads as red
   everywhere, so this is where the brand's red gets to actually appear */
.works__tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 0 rgba(217,31,38,.6); animation: recPulse 2s ease-out infinite;
}
@keyframes recPulse { 70%, 100% { box-shadow: 0 0 0 9px rgba(217,31,38,0); } }

.slideshow {
  position: relative; border-radius: 4px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--ink-2);
  box-shadow: 0 40px 80px -46px rgba(22,21,26,.65), inset 0 0 0 1px var(--line-brass);
}
.slideshow img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.slideshow img.is-active { opacity: 1; }

/* ==========================================================================
   CONTACT + FOOTER
   ========================================================================== */
.contact__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: .9fr 1.1fr; align-items: start; } }
.contact__rows { display: grid; gap: 0; margin-top: 1.5rem; }
.contact__row {
  display: grid; grid-template-columns: 118px 1fr; gap: 1rem; align-items: baseline;
  padding: 1.05rem 0; border-top: 1px solid rgba(250,245,233,.14);
  font-size: var(--step-0);
}
.contact__row:last-child { border-bottom: 1px solid rgba(250,245,233,.14); }
.contact__row dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--bone-3); }
.contact__row dd { margin: 0; }
.contact__row a { text-decoration: none; border-bottom: 1px solid rgba(168,124,46,.4); transition: border-color .3s, color .3s; }
.contact__row a:hover { color: var(--brass); border-color: var(--brass); }
.contact__map {
  aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden;
  background: var(--ink-2); box-shadow: 0 30px 60px -35px rgba(22,21,26,.8);
  /* Leaflet stacks its own panes at 400 and its controls at 1000. The map
     element makes no stacking context of its own, so those numbers were
     competing with the page directly and winning against the fixed header
     (100), the drawer (99) and the action bar (90) — the map painted straight
     over the menu. Opening a context here keeps all of that inside the map. */
  position: relative; z-index: 0; isolation: isolate;
}
/* OSM ships one light basemap. Inverting the lightness (and spinning the hue
   back so nothing turns cyan) makes a dark map out of it — applied to the tile
   pane only, so the pin, popup and controls keep their real colours. */
.contact__map .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) grayscale(.62) brightness(.94) contrast(1.04);
}
.contact__map .leaflet-container { background: var(--ink-2); font-family: var(--body); }
/* the no-map fallback: the address, still useful, still clickable */
.contact__map--flat { filter: none; display: grid; }
.contact__mapfall {
  display: grid; align-content: center; justify-items: center; gap: .35rem;
  text-align: center; text-decoration: none; color: var(--bone);
  background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-brass);
  transition: background .35s var(--ease);
}
.contact__mapfall:hover { background: var(--wine-deep); }
.contact__mapfall strong { font-family: var(--display); font-size: var(--step-2); letter-spacing: .01em; }
.contact__mapfall span { font-size: var(--step--1); color: var(--bone-3); letter-spacing: .06em; }

/* our own pin, in the wine/brass palette instead of Leaflet's blue teardrop */
.map-pin { position: relative; }
.map-pin__dot {
  position: absolute; inset: 7px; border-radius: 50%;
  background: var(--wine); box-shadow: 0 0 0 2px var(--brass-lite), 0 3px 10px -2px rgba(22,21,26,.8);
}
.map-pin__ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--brass);
  animation: pinRing 2.2s var(--ease-io) infinite;
}
@keyframes pinRing { 0% { opacity: .8; scale: .5; } 100% { opacity: 0; scale: 1; } }

/* Leaflet's chrome, recoloured onto the site's own panels */
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bone); color: var(--ink); }
.leaflet-popup-content { font-family: var(--body); font-size: var(--step--1); line-height: 1.5; margin: .7rem .9rem; }
.leaflet-popup-content strong { font-family: var(--display); letter-spacing: .02em; }
.leaflet-control-zoom a {
  background: var(--ink-2) !important; color: var(--bone) !important; border-color: rgba(250,245,233,.14) !important;
}
.leaflet-control-zoom a:hover { background: var(--wine) !important; color: var(--marble) !important; }
/* OSM's ODbL and CARTO's basemap terms both require visible credit, so this
   line has to stay — but it can stay quiet: 9px, half-opaque, no panel. */
.leaflet-control-attribution {
  background: transparent !important; color: rgba(250,245,233,.38) !important;
  font-size: 9px !important; line-height: 1.4; padding: 0 4px !important;
  text-shadow: 0 1px 3px rgba(22,21,26,.9);
}
.leaflet-control-attribution a { color: rgba(250,245,233,.5) !important; text-decoration: none; }
.leaflet-control-attribution a:hover { color: var(--brass-lite) !important; }
.leaflet-attribution-flag { display: none !important; }

.site-footer { background: var(--ink); color: var(--bone-3); padding-block: 2.5rem; border-top: 1px solid rgba(250,245,233,.12); font-size: var(--step--1); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.site-footer__brand { display: flex; align-items: center; gap: .9rem; }
.site-footer__brand img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.site-footer__brand small { color: var(--bone-3); opacity: .75; letter-spacing: .06em; }
.site-footer a { color: var(--bone); text-decoration: none; }
.site-footer a:hover { color: var(--brass); }

/* ==========================================================================
   STICKY MOBILE ACTION BAR
   ========================================================================== */
.actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: var(--ink); border-top: 1px solid rgba(250,245,233,.14);
  transform: translateY(100%); transition: transform .5s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.actionbar.is-visible { transform: none; }
.actionbar a {
  display: grid; gap: .25rem; place-items: center; padding: .8rem .5rem;
  text-decoration: none; color: var(--bone);
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  border-right: 1px solid rgba(250,245,233,.12);
}
.actionbar a:last-child { border-right: 0; }
.actionbar a svg { width: 19px; height: 19px; }
.actionbar a.is-primary { background: var(--wine); color: var(--marble); }
@media (max-width: 940px) {
  .actionbar { display: grid; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* Phone links are the highest-value target on this site — never let one be a
   thin inline sliver on a thumb-driven screen. */
@media (max-width: 940px) {
  a[href^="tel:"], a[href^="viber:"] {
    display: inline-flex; align-items: center;
    min-height: 44px; padding-block: .4rem;
  }
  /* The header trigger stopped matching that rule the moment it became a
     <button>, and with its label hidden it collapsed to 35px beside a 44px
     ΜΕΝΟΥ. Both of these are thumb targets; both get the full 44. */
  .header-phone, .nav-toggle, .reach__region { min-height: 44px; }
  .actionbar a[href^="tel:"], .actionbar a[href^="viber:"] {
    display: grid; min-height: 56px; padding-block: .8rem;
  }
  .contact__row { grid-template-columns: 1fr; gap: .25rem; padding-block: .9rem; }
  .contact__row dd { display: flex; flex-wrap: wrap; gap: 0 .6rem; align-items: center; }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero { height: auto; }
  .hero__sticky { position: relative; height: auto; min-height: 88svh; }
  .hero__title .ln > span { transform: none; }
  /* the split only runs for motion-safe visitors, but the setting can flip
     mid-session — leave the letters and the valance where they belong */
  .hero__title .chr { transform: none; }
  .hero__title em::after { scale: 1 1; }
  .hero__lede, .hero__actions { opacity: 1; }
}