/* Polish: the Reveal layout, re-dressed in the brand's own garden colours: the logo's lime, fresh leaf
   greens, sunshine yellow and warm honey and clay, on cream and on a bright leaf green (never the old
   murky forest green or a dark brown). Leaf & lime is the palette; titles are Manrope 800 with the
   highlighted words in Noto Serif Display italic, both of which carry Greek. Lucide icons on every
   control, and a garden layer per section that moves with the scroll. */

:root {
  --night: #16603A; --night-2: #1C7045; --night-3: #238151; --deep: #135535;
  --petal: #FAF8EC; --mist: #EEF5DC; --paper: #FFFFFF;
  --ink: #1C2E17; --muted: #5C6B4E;
  --c-1: #C5E02B; --c-2: #8CC63F; --c-3: #FFC83D; --c-4: #3FAE5A; --sun: #FFC83D;
  --soil: #B98A52;
  --wa: #25D366; --on-wa: #063A1B; --fb: #1877F2;
  --on-hot: #163A19; --on-cool: #3B2A0B;
  --accent-ink: #2F7F33;
  --sea-a: #135E77; --sea-b: #0C4054;

  --line: rgb(28 46 23 / .11);
  --on-night: #F4FAEC; --on-night-2: #CFE3C0; --line-night: rgb(244 250 236 / .16);
  --glass: rgb(255 255 255 / .09); --glass-2: rgb(255 255 255 / .15);

  --g-hot: linear-gradient(118deg, var(--c-1), var(--c-2));
  --g-cool: linear-gradient(118deg, #FFD65A, #F2A93B);
  --g-sunrise: linear-gradient(100deg, var(--c-3) 0%, var(--c-1) 45%, var(--c-2) 100%);
  --g-hl-dark: linear-gradient(100deg, #2F8F3E 0%, #6BAA22 55%, #C9972B 100%);
  --g-hl-light: linear-gradient(100deg, #FFD65A 0%, var(--c-1) 50%, #A6DC62 100%);
  --g-hl: var(--g-hl-dark);
  --g-header: linear-gradient(90deg, #0B3F24, #0F4E2E 45%, #16603A);
  --map-land-a: color-mix(in srgb, var(--c-2) 70%, transparent);
  --map-land-b: color-mix(in srgb, var(--c-4) 62%, transparent);

  --display: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --display-w: 800;
  --display-ls: -.035em;
  --body: "Manrope", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --accent-font: "Noto Serif Display", Georgia, serif;
  --accent-style: italic;

  --gutter: clamp(16px, 4.5vw, 64px);
  --max: 1320px;
  --section: clamp(88px, 11vw, 168px);
  --radius: 24px;
  --ease: cubic-bezier(.2, .8, .1, 1);
  --shadow: 0 30px 60px -30px rgb(28 46 23 / .45);
  color-scheme: light;
}
/* anywhere the ground is dark, highlighted words use the light gradient */
.sec-night, .hero, .gw, .ft, .menu, .map-card { --g-hl: var(--g-hl-light); }

/* a Greek reader's saved choice is applied before the page shows, never after */
html[data-lang-boot="el"] body { opacity: 0; animation: boot-show 0s 1.4s forwards; }
@keyframes boot-show { to { opacity: 1; } }

html { background: var(--deep); color: var(--ink); scroll-padding-top: 90px; }
body { font: 400 clamp(1rem, .96rem + .2vw, 1.1rem)/1.6 var(--body); background: var(--petal); color: var(--ink); }
::selection { background: var(--c-1); color: var(--on-hot); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: var(--display-w); line-height: 1.02; letter-spacing: var(--display-ls); text-wrap: balance; }
h2 { font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.6rem); }
h3 { font-size: clamp(1.2rem, 1.08rem + .45vw, 1.45rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.hl { background: var(--g-hl); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--accent-font); font-style: var(--accent-style); font-weight: 600; letter-spacing: -.01em; padding-right: .04em; }
/* reveal.js splits headings into word spans; each word inside a highlight carries the gradient itself */
.hl .rw-i { background: var(--g-hl); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Icons ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.i-sm { width: 1em; height: 1em; }
.stars { display: inline-flex; gap: 2px; color: var(--sun); }
.stars .i { width: 1em; height: 1em; fill: currentColor; stroke: currentColor; stroke-width: 1.5; }

/* ---------- Buttons and chips (a control label never wraps: shorten it instead) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: 0 22px; border-radius: 14px; border: 1px solid transparent; font: 700 1rem/1.2 var(--body); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; isolation: isolate; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s, background-color .3s, border-color .3s, color .3s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-lg { min-height: 58px; padding: 0 28px; font-size: 1.05rem; border-radius: 16px; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: .9rem; border-radius: 12px; }
.btn-hot { color: var(--on-hot); background: var(--g-hot); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c-1) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .25); }
.btn-hot::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(118deg, var(--c-2), var(--c-1) 50%, var(--c-3)); opacity: 0; transition: opacity .4s; }
.btn-hot:hover::after { opacity: 1; }
.btn-hot:hover { box-shadow: 0 20px 36px -14px color-mix(in srgb, var(--c-1) 85%, transparent), inset 0 1px 0 rgb(255 255 255 / .25); }
.btn-glass { color: #fff; background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .28); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.btn-glass:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .5); }
.btn-white { color: var(--ink); background: #fff; box-shadow: 0 14px 30px -16px rgb(0 0 0 / .45); }
.btn-ink { color: #fff; background: var(--night); }
.btn-ink:hover { background: var(--night-3); }
.btn-wa { color: var(--on-wa); background: var(--wa); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--wa) 75%, transparent); }
.btn-wa:hover { background: color-mix(in srgb, var(--wa) 88%, #fff); }
.btn-outline { color: #fff; background: transparent; border-color: rgb(255 255 255 / .7); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); }
.btn-outline:hover { background: rgb(255 255 255 / .1); border-color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.btn-line { color: var(--ink); background: transparent; border-color: var(--line); }
.btn-line:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.btn[disabled] { opacity: .65; cursor: progress; }
.chip { display: inline-flex; align-items: center; gap: .5em; min-height: 42px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 700 .92rem/1.2 var(--body); white-space: nowrap; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.chip b { font-weight: 700; font-size: .78em; padding: 3px 7px; border-radius: 99px; background: var(--mist); color: var(--muted); }
.chip:hover { transform: translateY(-2px); border-color: var(--c-1); }
.chip-glass { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .2); }
.chip-glass b { background: rgb(255 255 255 / .14); color: #fff; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 800 .78rem/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); white-space: nowrap; }
.eyebrow > .i { width: 32px; height: 32px; padding: 7px; border-radius: 10px; color: var(--on-hot); background: var(--g-hot); box-shadow: 0 8px 18px -8px var(--c-1); }
.sec-night .eyebrow, .gw .eyebrow, .ft .eyebrow { color: var(--c-1); }

/* ---------- Sections ---------- */
section { position: relative; isolation: isolate; }
.sec-night { background: var(--night); color: var(--on-night); padding: var(--section) var(--gutter); overflow: hidden; }
.sec-night::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 12% 0%, color-mix(in srgb, var(--c-3) 32%, transparent), transparent 70%),
    radial-gradient(50% 45% at 95% 30%, color-mix(in srgb, var(--c-1) 22%, transparent), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, color-mix(in srgb, var(--c-4) 16%, transparent), transparent 70%); }
.sec-light { background: var(--petal); padding: var(--section) var(--gutter); overflow: hidden; }
.sec-light::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 40% at 100% 0%, color-mix(in srgb, var(--c-2) 14%, transparent), transparent 70%),
    radial-gradient(45% 45% at 0% 100%, color-mix(in srgb, var(--c-3) 12%, transparent), transparent 70%); }
.sec-white { background: var(--paper); padding: var(--section) var(--gutter); overflow: hidden; }
.head { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px 48px; }
.head > p { max-width: 44ch; color: var(--muted); }
.sec-night .head > p { color: var(--on-night-2); }

/* ---------- Decorative garden layers (drawn by deco.js) ---------- */
.deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.deco svg { position: absolute; overflow: visible; }
.deco [data-sway] { transform-box: fill-box; transform-origin: 50% 100%; animation: sway var(--sd, 5s) ease-in-out var(--sdl, 0s) infinite alternate; }
@keyframes sway { from { transform: rotate(calc(var(--sa, 4deg) * -1)); } to { transform: rotate(var(--sa, 4deg)); } }
.is-still .deco *, .is-still .deco { animation-play-state: paused !important; }
/* the window is not the one in use (page.js): every loop on the page holds still until it is */
.is-away *, .is-away *::before, .is-away *::after { animation-play-state: paused !important; }

/* ---------- Header ---------- */
/* one darker green bar, flush to the top and edge to edge in both states (no margin, border or radius);
   scrolling only makes it shorter. The controls inside keep their own rounding. */
.hd { position: fixed; inset: 0 0 auto; z-index: 50; padding: env(safe-area-inset-top, 0px) 0 0; background: var(--g-header); box-shadow: 0 14px 30px -20px rgb(0 0 0 / .6); }
.hd-bar { position: relative; max-width: 1480px; height: 84px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; color: #fff; transition: height .45s var(--ease); }
.hd[data-state="scrolled"] .hd-bar { height: 66px; }
.hd-logo { display: block; color: #fff; }
.logo { display: block; height: 58px; width: auto; aspect-ratio: 801.82 / 329.5; color: #fff; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .35)); transition: height .45s var(--ease); }
.hd[data-state="scrolled"] .logo { height: 44px; filter: none; }
.hd-nav { display: flex; justify-content: center; gap: 4px; }
.hd-nav a { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 12px; color: rgb(255 255 255 / .86); text-decoration: none; font-weight: 700; font-size: .95rem; white-space: nowrap; transition: background .25s, color .25s; }
.hd-nav a .i { width: 18px; height: 18px; opacity: .9; }
.hd-nav a:hover { background: rgb(255 255 255 / .1); color: #fff; }
.hd-nav a:hover .i { stroke: url(#dg-icon); opacity: 1; }
.hd-tools { display: flex; align-items: center; gap: 10px; }
.hd-social { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .18); transition: transform .25s var(--ease), background .25s, border-color .25s; }
.hd-social .i { width: 21px; height: 21px; }
.hd-social:hover { transform: translateY(-2px); }
.hd-fb:hover { background: #1877F2; border-color: #1877F2; }
.hd-wa:hover { background: var(--g-hot); background-image: var(--g-hot); border-color: transparent; color: var(--on-hot); }
.hd-call { min-height: 46px; padding: 0 18px; }
.hd-menu { display: none; place-items: center; width: 46px; height: 46px; border-radius: 13px; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .1); color: #fff; }
.hd-menu .i { width: 22px; height: 22px; }
.hd-menu .i-close, .hd-menu[aria-expanded="true"] .i-open { display: none; }
.hd-menu[aria-expanded="true"] .i-close { display: block; }

/* the language switch: one button wearing the current flag, which opens a small popover with both languages.
   A flag is round in its own SVG (clip and ring drawn inside it), never by border-radius and overflow on the
   svg, which iOS Safari does not clip reliably (it drew an uneven circle, and a filter made it square) */
.flag { display: block; width: 28px; height: 28px; flex: none; }
.lang { position: relative; display: inline-block; }
.lang-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 10px 0 7px; border-radius: 99px; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .1); color: #fff; font: 800 .8rem/1.35 var(--body); letter-spacing: .04em; white-space: nowrap; transition: background .25s, border-color .25s; }
.lang-btn:focus-visible { outline: 2px solid var(--c-1); outline-offset: 2px; }
.lang-cur { display: grid; }
.lang-cur .flag { grid-area: 1 / 1; transition: opacity .3s, transform .45s var(--ease); }
.lang:not([data-active="el"]) .flag-el, .lang[data-active="el"] .flag-en { opacity: 0; transform: scale(.5) rotate(-60deg); }
.lang-chev { width: 15px; height: 15px; opacity: .75; transition: transform .35s var(--ease); }
.lang[data-open] .lang-chev { transform: rotate(180deg); }
@media (hover: hover) { .lang-btn:hover { background: rgb(255 255 255 / .18); border-color: rgb(255 255 255 / .32); } }

.lang-pop { position: absolute; top: calc(100% + 12px); right: 0; z-index: 60; display: grid; gap: 2px; width: max-content; min-width: 200px; padding: 8px; border-radius: 18px; background: #fff; color: var(--on-hot); box-shadow: 0 24px 50px -18px rgb(0 0 0 / .55), 0 2px 8px rgb(0 0 0 / .12); transform-origin: calc(100% - var(--lang-ax, 40px)) -8px; opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.94); transition: opacity .2s, transform .3s var(--ease), visibility 0s .3s; }
.lang-pop::before { content: ""; position: absolute; top: -6px; right: calc(var(--lang-ax, 40px) - 7px); width: 14px; height: 14px; border-radius: 3px 0 0 0; background: #fff; transform: rotate(45deg); }
.lang[data-open] .lang-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .35s var(--ease), visibility 0s; }
.lang-pop-t { margin: 4px 10px 6px; font: 800 .68rem/1.35 var(--body); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.lang-pop button { position: relative; display: grid; grid-template-columns: 28px 1fr 18px; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px 0 8px; border: 0; border-radius: 12px; background: none; color: inherit; font: 700 1rem/1.35 var(--body); text-align: left; white-space: nowrap; transition: background .2s; }
.lang-pop button:focus-visible { outline: 2px solid var(--c-3); outline-offset: -2px; }
.lang-pop button[aria-checked="true"] { background: color-mix(in srgb, var(--c-1) 22%, #fff); }
.lang-tick { width: 18px; height: 18px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--ease); }
.lang-pop button[aria-checked="true"] .lang-tick { opacity: 1; transform: none; }
@media (hover: hover) { .lang-pop button[aria-checked="false"]:hover { background: rgb(0 0 0 / .05); } }
/* at the foot of the phone menu and the page the popover opens upwards, centred on its button */
.lang[data-up] .lang-pop { top: auto; bottom: calc(100% + 12px); right: auto; left: 50%; translate: -50% 0; transform-origin: 50% calc(100% + 8px); transform: translateY(6px) scale(.94); }
.lang[data-up][data-open] .lang-pop { transform: none; }
.lang[data-up] .lang-pop::before { top: auto; bottom: -6px; right: auto; left: calc(50% - 7px); border-radius: 0 0 3px 0; }

/* the phone menu opens under the header (which stays on top, keeping only the logo and the close button):
   tidy rows of an icon tile, a label and a chevron, then the ways to reach us and the language switch */
.menu { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; padding: calc(98px + env(safe-area-inset-top, 0px)) var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px)); background: var(--night); color: var(--on-night); overflow-y: auto; overscroll-behavior: contain; }
.menu-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 40% at 90% 10%, color-mix(in srgb, var(--c-1) 35%, transparent), transparent), radial-gradient(60% 40% at 0% 90%, color-mix(in srgb, var(--c-3) 35%, transparent), transparent); }
.menu-inner { flex: 1; display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 560px; margin: 0 auto; }
.menu-nav { display: grid; gap: 5px; }
.menu-nav a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 18px; align-items: center; gap: 14px; min-height: 54px; padding: 6px 14px 6px 7px; border-radius: 16px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .09); color: #fff; text-decoration: none; font: 700 1.1rem/1.3 var(--body); letter-spacing: -.01em; transition: background .25s, border-color .25s, transform .25s var(--ease); }
.menu-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(255 255 255 / .1); }
.menu-ic .i { width: 20px; height: 20px; stroke: url(#dg-icon); }
.menu-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-go { width: 18px; height: 18px; opacity: .5; transition: transform .25s var(--ease), opacity .25s; }
.menu-nav a:hover, .menu-nav a:focus-visible { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .22); }
.menu-nav a:hover .menu-go { transform: translateX(3px); opacity: 1; }
.menu-nav a:active { transform: scale(.985); }
.menu-foot { display: grid; gap: 8px; margin-top: auto; }
.menu-foot .btn { width: 100%; min-height: 52px; padding: 0 14px; }
.menu-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-lang { display: block; width: 100%; margin-top: 4px; }
.menu-lang .lang-btn { width: 100%; height: 52px; justify-content: center; font-size: .95rem; letter-spacing: 0; }
html.menu-open { overflow: hidden; }
html.menu-open .hd-tools > :not(.hd-menu) { opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }

@media (max-width: 1180px) {
  .hd-nav { display: none; }
  .hd-menu { display: grid; }
  .hd-bar { grid-template-columns: auto 1fr; }
  .hd-tools { justify-self: end; }
}
@media (max-width: 760px) {
  .hd-bar { height: 72px; gap: 10px; }
  .hd[data-state="scrolled"] .hd-bar { height: 62px; }
  .logo, .hd[data-state="scrolled"] .logo { height: 40px; }
  .hd-call { display: none; }
  .hd-tools { gap: 6px; }
  .hd-social, .hd-menu { width: 40px; height: 40px; border-radius: 12px; }
  .hd-social .i { width: 19px; height: 19px; }
  .hd .lang-btn { gap: 4px; height: 40px; padding: 0 7px 0 5px; }
  .hd .lang-code { display: none; }
  .hd .lang-chev { width: 13px; height: 13px; }
  .menu { padding-top: calc(84px + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 370px) { .hd-fb { display: none; } }

/* ---------- Opening splash (put up by the page's first scripts, animated by page.js) ---------- */
.splash { position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer; }
/* the photo carries the backing colour (shown while it loads), so fading it and the tint clears the lot */
/* the crew illustration's five stand between about 21% and 72% across, so a phone's narrow crop is
   centred on them rather than on the picture */
.splash-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; background: var(--deep); }
.splash-tint { position: absolute; inset: 0; background: linear-gradient(145deg, rgb(11 63 36 / .9) 0%, rgb(22 96 58 / .62) 50%, rgb(197 224 43 / .42) 100%); }
.splash-logo { position: absolute; left: 50%; top: 50%; width: min(560px, 70vw); height: auto; aspect-ratio: 801.82 / 329.5; overflow: visible; color: #fff; opacity: 0; transform: translate(-50%, -50%) scale(.4); filter: drop-shadow(0 6px 18px rgb(0 0 0 / .35)); }
/* while it plays, the header logo waits for the flying one, and what comes in after it waits too */
html[data-splash] .hd-logo { visibility: hidden; }
html[data-splash] :is(.hd-nav a, .hd-tools > *, .hero-rating, .hero-copy h1, .hero-copy p, .hero-actions, .hero-pairs button, .hero-label, .hero-scroll) { opacity: 0; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--deep); color: #fff; }
.hero-compare { position: absolute; inset: 0; --pos: 50; }
.hero-compare::after { content: ""; position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgb(6 12 7 / .38) 0%, transparent 24%, transparent 46%, rgb(6 12 7 / .8) 100%),
  linear-gradient(90deg, rgb(6 12 7 / .45) 0%, transparent 55%); }
.hero-handle { width: 4px; margin-left: -2px; background: var(--g-hot); background-image: linear-gradient(var(--c-2), var(--c-1), var(--c-3)); box-shadow: 0 0 22px color-mix(in srgb, var(--c-1) 70%, transparent); z-index: 3; }
.hero-handle::after { display: none; }
.hero-grip { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; margin: -39px 0 0 -39px; border-radius: 50%; background: var(--g-hot); color: var(--on-hot); box-shadow: 0 14px 34px rgb(0 0 0 / .35), 0 0 0 10px color-mix(in srgb, var(--c-1) 25%, transparent); animation: grip-pulse 2.6s ease-in-out infinite; }
.hero-grip .i { width: 24px; height: 24px; stroke-width: 2.6; }
.hero-grip .i:first-child { margin-right: -4px; }
@keyframes grip-pulse { 50% { box-shadow: 0 14px 34px rgb(0 0 0 / .35), 0 0 0 18px color-mix(in srgb, var(--c-1) 10%, transparent); } }
.hero-drag { position: absolute; top: calc(50% + 52px); left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--deep) 60%, transparent); color: #fff; font: 700 .78rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-label { position: absolute; top: 116px; z-index: 4; padding: 8px 16px; border-radius: 99px; background: color-mix(in srgb, var(--deep) 55%, transparent); font: 800 .82rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }
.hero-label-before { left: var(--gutter); }
.hero-label-after { right: var(--gutter); background: var(--g-hot); color: var(--on-hot); }
.hero-copy { position: absolute; z-index: 4; left: var(--gutter); bottom: clamp(32px, 7vh, 80px); max-width: min(680px, 54vw); pointer-events: none; }
.hero-rating { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 8px 14px 8px 10px; border-radius: 99px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero-copy h1 { font-size: clamp(2.7rem, 1.2rem + 4.6vw, 6rem); line-height: .96; text-shadow: 0 6px 40px rgb(0 0 0 / .3); }
/* Greek runs about a fifth longer, so the cover line steps down a size and stays clear of the slider */
html[lang="el"] .hero-copy h1 { font-size: clamp(2.4rem, 1.1rem + 3.7vw, 5rem); }
.hero-copy .hl { text-shadow: none; filter: drop-shadow(0 4px 20px rgb(0 0 0 / .25)); }
.hero-copy p { margin-top: 18px; max-width: 46ch; font-size: clamp(1rem, .96rem + .3vw, 1.2rem); color: rgb(255 255 255 / .9); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; pointer-events: auto; }
.hero-pairs { position: absolute; z-index: 4; right: var(--gutter); bottom: clamp(32px, 7vh, 80px); display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
.hero-pairs button { display: grid; grid-template-columns: 46px auto; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 14px; border: 1px solid rgb(255 255 255 / .22); background: color-mix(in srgb, var(--deep) 50%, transparent); color: #fff; font: 700 .88rem/1.35 var(--body); white-space: nowrap; text-align: left; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .25s, background .25s, transform .25s; }
.hero-pairs button img { width: 46px; height: 36px; object-fit: cover; border-radius: 9px; }
.hero-pairs button:hover { border-color: rgb(255 255 255 / .6); transform: translateY(-2px); }
.hero-pairs button[aria-pressed="true"] { border-color: transparent; background: linear-gradient(color-mix(in srgb, var(--deep) 55%, transparent), color-mix(in srgb, var(--deep) 55%, transparent)) padding-box, var(--g-hot) border-box; border: 2px solid transparent; }
.hero-scroll { position: absolute; z-index: 4; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; background: rgb(255 255 255 / .12); animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }
@media (max-width: 960px) {
  .hero { min-height: 660px; }
  .hero-label { top: 88px; }
  .hero-copy { max-width: none; right: var(--gutter); bottom: 124px; }
  .hero-copy h1 { font-size: clamp(2.4rem, 10vw, 3.6rem); }
  .hero-copy p { font-size: .98rem; }
  .hero-actions .btn { flex: 1 1 auto; min-height: 52px; padding: 0 12px; }
  .hero-pairs { left: 0; right: 0; bottom: 22px; display: flex; overflow-x: auto; padding: 0 var(--gutter); scrollbar-width: none; }
  .hero-pairs button { flex: none; }
  .hero-scroll { display: none; }
  .hero-grip { top: 34%; }
  .hero-drag { top: calc(34% + 50px); }
}
@media (max-width: 960px) and (max-height: 740px) { .hero-copy p { display: none; } }
@media (max-width: 420px) { .hero-rating { font-size: .8rem; } .hero-actions .btn { font-size: .95rem; } }

/* ---------- Trust ---------- */
.trust { background: var(--petal); padding: clamp(44px, 5vw, 72px) var(--gutter) clamp(110px, 10vw, 136px); overflow: hidden; }
.trust-list { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.trust-list li { position: relative; display: grid; align-content: start; row-gap: 8px; padding: 22px 22px 22px; border-radius: 22px; background: rgb(255 255 255 / .75); border: 1px solid var(--line); box-shadow: 0 20px 40px -32px rgb(28 46 23 / .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* solid icons with nothing behind them, in each card's top right corner: leaf green, and gold for the
   reviews star */
.trust-ic { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; fill: url(#dg-leaf); stroke: none; filter: drop-shadow(0 8px 10px rgb(42 133 64 / .22)); }
.trust-ic-gold { fill: url(#dg-gold); stroke: url(#dg-gold); filter: drop-shadow(0 8px 10px rgb(238 159 34 / .28)); }
.trust-list strong { display: block; padding-right: 52px; font: var(--display-w) clamp(2rem, 1.5rem + 1.6vw, 2.9rem)/1 var(--display); letter-spacing: var(--display-ls); background: var(--g-hl); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trust-list li > span:last-child { color: var(--muted); font-size: .92rem; line-height: 1.4; }
@media (max-width: 1060px) { .trust-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust-list { grid-template-columns: 1fr; } .trust-list li { padding: 16px; } }

/* ---------- Services ---------- */
.svc-grid { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.svc { position: relative; display: grid; grid-template-rows: auto auto 1fr; border-radius: var(--radius); overflow: hidden; color: var(--on-night); text-decoration: none; border: 1px solid transparent; background: linear-gradient(var(--night-2), var(--night-2)) padding-box, linear-gradient(160deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04)) border-box; transition: transform .5s var(--ease), box-shadow .5s; }
.svc:hover { transform: translateY(-8px); background: linear-gradient(var(--night-2), var(--night-2)) padding-box, var(--g-sunrise) border-box; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c-1) 60%, transparent); }
.svc-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; filter: saturate(1.05); }
.svc:hover .svc-img img { transform: scale(1.08); }
.svc-ic { position: relative; z-index: 1; justify-self: start; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 -27px 20px; border-radius: 16px; color: var(--on-hot); background: var(--g-hot); box-shadow: 0 12px 26px -10px var(--c-1), 0 0 0 5px var(--night-2); transition: transform .5s var(--ease); }
.svc:hover .svc-ic { transform: rotate(-8deg) scale(1.06); }
.svc-ic .i { width: 26px; height: 26px; }
.svc-body { position: relative; display: grid; gap: 10px; padding: 40px 24px 24px; align-content: start; }
.svc-body p { color: var(--on-night-2); font-size: .97rem; line-height: 1.55; }
.svc-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; font-size: .92rem; color: #fff; white-space: nowrap; }
.svc-cta .i { width: 18px; height: 18px; }
.svc-cta .i-arrow { transition: transform .35s var(--ease); }
.svc:hover .svc-cta .i-arrow { transform: translateX(5px); }
.svc-bag { grid-template-rows: 1fr; background: var(--g-hot); border: 0; color: var(--on-hot); }
.svc-bag:hover { background: linear-gradient(118deg, var(--c-3), var(--c-1) 55%, var(--c-2)); }
.svc-bag h3, .svc-bag .svc-cta { color: var(--on-hot); }
.svc-bag .svc-body { align-content: end; padding: 28px 24px 24px; }
.svc-bag p { color: color-mix(in srgb, var(--on-hot) 82%, transparent); }
.svc-bag-art { position: absolute; right: -30px; top: -30px; color: color-mix(in srgb, var(--on-hot) 14%, transparent); }
.svc-bag-art .i { width: 220px; height: 220px; stroke-width: 1.4; animation: spin 40s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.svc-new { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--on-hot); color: var(--c-1); font: 800 .75rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.svc-new .i { width: 14px; height: 14px; }
@media (max-width: 960px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Before / after ---------- */
.results-grid { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.mini .compare { aspect-ratio: 3 / 4; border-radius: 22px; background: var(--mist); box-shadow: 0 24px 40px -28px rgb(28 46 23 / .6); }
.mini .compare-handle { width: 3px; margin-left: -1.5px; background: #fff; }
.mini .compare-handle::after { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: var(--g-hot) center / 20px no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%23163A19' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(118deg, var(--c-1), var(--c-2)); background-size: 20px, cover; background-position: center; box-shadow: 0 8px 20px -6px var(--c-1), 0 0 0 4px rgb(255 255 255 / .6); }
.mini .compare-tag { top: 12px; padding: 6px 10px; font: 800 .68rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.mini .compare-tag-before { left: 12px; }
.mini .compare-tag-after { right: 12px; background: var(--g-hot); color: var(--on-hot); }
.mini figcaption { margin-top: 14px; font-weight: 700; line-height: 1.35; }
.mini figcaption time { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; font-size: .88rem; }
@media (max-width: 1000px) { .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .results-grid { gap: 16px 10px; }
  .mini .compare { border-radius: 16px; }
  .mini .compare-tag { top: 8px; padding: 5px 7px; font-size: .6rem; }
  .mini .compare-tag-before { left: 8px; } .mini .compare-tag-after { right: 8px; }
  .mini .compare-handle::after { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .mini figcaption { font-size: .9rem; }
}

/* ---------- Process ---------- */
.steps-wrap { position: relative; max-width: var(--max); margin: 0 auto; }
.deco-trail { z-index: 0; inset: -20px -10px; overflow: visible; }
.steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; list-style: none; padding: 0; margin: 0; }
.steps li { display: grid; gap: 12px; align-content: start; }
/* each step is just its number in a lime circle; the Dig it man walks the trail between them (deco.js) */
.step-n { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--g-hot); color: var(--on-hot); font: 800 1.75rem/1 var(--display); letter-spacing: -.02em; box-shadow: 0 14px 30px -14px var(--c-1), 0 0 0 8px var(--night); }
.steps h3 { margin-top: 10px; }
.steps p { color: var(--on-night-2); max-width: 30ch; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .steps li { grid-template-columns: 64px 1fr; column-gap: 20px; }
  .steps li .step-n { grid-row: span 2; }
  .steps h3 { margin-top: 4px; }
}

/* ---------- Crew ---------- */
.crew-grid { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.crew-main { position: relative; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
.crew-main img { width: 100%; height: 100%; object-fit: cover; }
.crew-badge { position: absolute; left: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; background: rgb(255 255 255 / .92); color: var(--ink); font-weight: 800; font-size: .9rem; white-space: nowrap; box-shadow: 0 10px 30px -10px rgb(0 0 0 / .4); }
.crew-badge .i { stroke: url(#dg-icon); }
.crew-copy { display: grid; gap: 20px; }
.crew-copy .eyebrow { margin-bottom: -2px; }
.crew-copy > p { color: var(--muted); }
.crew-copy blockquote { position: relative; margin: 0; padding: 22px 24px 22px 70px; border-radius: 20px; background: var(--mist); }
.q-ic { position: absolute; left: 20px; top: 22px; width: 34px; height: 34px; stroke: url(#dg-icon); }
.crew-copy blockquote p { font: 700 1.22rem/1.4 var(--display); }
.crew-copy cite { display: block; margin-top: 8px; font-style: normal; color: var(--muted); font-size: .9rem; }
.crew-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.crew-thumbs figure { border-radius: 16px; overflow: hidden; aspect-ratio: 1; }
.crew-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.crew-thumbs figure:hover img { transform: scale(1.08); }
@media (max-width: 860px) { .crew-grid { grid-template-columns: 1fr; } }

/* ---------- Reviews ---------- */
.tq { padding: var(--section) 0; }
.tq-head { position: relative; z-index: 1; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto clamp(32px, 4vw, 56px); padding: 0 var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; }
.tq-rating { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 20px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; box-shadow: 0 16px 30px -24px rgb(28 46 23 / .5); transition: transform .3s var(--ease), border-color .3s; }
.tq-rating:hover { transform: translateY(-2px); border-color: var(--c-1); }
.tq-g { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--mist); color: #4285F4; }
.tq-g .i { width: 24px; height: 24px; }
.tq-rating-body { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
.tq-rating-body .stars .i { width: 18px; height: 18px; }
@media (max-width: 420px) { .tq-rating { gap: 10px; } }
.tq-letter { position: relative; z-index: 1; max-width: 980px; width: calc(100% - var(--gutter) * 2); margin: 0 auto clamp(40px, 5vw, 72px); padding: clamp(28px, 4vw, 56px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.tq-letter blockquote { margin: 0; display: grid; gap: 14px; }
.tq-letter blockquote p { font: 500 clamp(1.08rem, 1rem + .45vw, 1.35rem)/1.6 var(--body); color: var(--ink); }
.tq-letter figcaption { margin-top: 22px; color: var(--muted); font-size: .95rem; }
.tq-letter figcaption strong { display: block; color: var(--ink); font-size: 1.05rem; }
.tq-rows { position: relative; z-index: 1; display: grid; gap: 16px; }
.tq-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tq-track { display: flex; gap: 16px; width: max-content; padding: 6px 0 18px; }
.tq-row.is-running .tq-track { animation: tq-left var(--tq-dur, 80s) linear infinite; }
.tq-row[data-marquee="right"].is-running .tq-track { animation-name: tq-right; }
.tq-row:focus-within .tq-track { animation-play-state: paused; }
/* a phone keeps :hover after a tap, which would leave the rows (and the wall below) stopped */
@media (hover: hover) { .tq-row:hover .tq-track { animation-play-state: paused; } }
@keyframes tq-left { to { transform: translateX(-50%); } }
@keyframes tq-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.tq-card { width: clamp(280px, 30vw, 390px); flex: none; margin: 0; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); display: grid; gap: 14px; align-content: start; box-shadow: 0 18px 30px -26px rgb(28 46 23 / .5); }
.tq-src { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .8rem; color: var(--muted); font-weight: 700; }
.tq-src .stars .i { width: 16px; height: 16px; }
.tq-via { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tq-via .i { width: 15px; height: 15px; }
.tq-card blockquote { margin: 0; }
.tq-card blockquote p { font-size: 1rem; line-height: 1.55; color: var(--ink); }
.tq-card figcaption { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--ink); }
.tq-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--on-hot); background: var(--g-hot); font-size: .85rem; }
.tq-msg { background: linear-gradient(160deg, #fff, var(--mist)); }
.tq-msg .tq-av { background: var(--g-cool); }
@media (prefers-reduced-motion: reduce) { .tq-row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding: 0 var(--gutter); } }

/* ---------- Gallery wall ---------- */
/* the photo wall IS the section: edge to edge, no inset card, border or rounding */
.gallery { padding: 0; }
.gw { position: relative; z-index: 1; height: clamp(640px, 92vh, 980px); overflow: hidden; background: var(--deep); isolation: isolate; }
.gw-list { list-style: none; margin: 0; padding: 20px; height: 100%; overflow-y: auto; columns: 4 220px; column-gap: 12px; }
.gw-list li { break-inside: avoid; margin-bottom: 12px; border-radius: 14px; overflow: hidden; }
.gw.is-ready .gw-list { display: none; }
.gw-cols { position: absolute; inset: -12% -8%; z-index: 0; display: flex; gap: 14px; transform: rotate(-7deg); }
.gw-col { flex: 1; min-width: 0; will-change: transform; }
.gw-track { display: flex; flex-direction: column; gap: 14px; animation: gw-up var(--dur, 70s) linear infinite; }
.gw-col:nth-child(even) .gw-track { animation-name: gw-down; }
.is-still .gw-track { animation-play-state: paused; }
@media (hover: hover) { .gw:hover .gw-track { animation-play-state: paused; } }
@keyframes gw-up { to { transform: translateY(-50%); } }
@keyframes gw-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.gw-tile { display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--night-2); cursor: zoom-in; box-shadow: 0 20px 40px -24px rgb(0 0 0 / .8); }
.gw-tile img { width: 100%; height: auto; transition: transform .8s var(--ease), filter .5s; filter: saturate(1.08); }
@media (hover: hover) { .gw-tile:hover img { transform: scale(1.07); } }
.gw-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(180deg, var(--deep) 0%, transparent 16%, transparent 70%, color-mix(in srgb, var(--deep) 90%, transparent) 100%),
  radial-gradient(70% 80% at 0% 100%, color-mix(in srgb, var(--deep) 88%, transparent), transparent 70%); }
.gw-panel { position: absolute; z-index: 2; left: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: clamp(24px, 4vw, 64px); width: min(560px, calc(100% - 32px)); padding: clamp(22px, 2.6vw, 36px); border-radius: 28px; color: #fff; background: color-mix(in srgb, var(--deep) 68%, transparent); border: 1px solid rgb(255 255 255 / .16); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 30px 70px -30px rgb(0 0 0 / .8); }
.gw-panel .eyebrow { margin-bottom: 14px; }
.gw-count { display: inline-flex; gap: 4px; margin-left: 4px; padding: 5px 10px; border-radius: 99px; background: rgb(255 255 255 / .12); color: #fff; letter-spacing: .06em; }
.gw-panel h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); }
.gw-panel > p { margin-top: 12px; color: rgb(255 255 255 / .8); max-width: 44ch; }
.gw-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 22px; }
@media (max-width: 1000px) { .gw-cols { inset: -10% -20%; } }
@media (max-width: 640px) {
  .gw { height: max(720px, 92svh); }
  .gw-cols { inset: -6% -30% 20%; gap: 10px; }
  .gw-track { gap: 10px; }
  .gw-tile { border-radius: 14px; }
  .gw-panel { left: 10px; right: 10px; bottom: 10px; width: auto; border-radius: 22px; }
  .gw-panel > p { font-size: .95rem; }
  .gw-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 16px -4px 18px; padding: 2px 4px; }
  .gw-filters::-webkit-scrollbar { display: none; }
  .gw-filters .chip { flex: none; min-height: 38px; padding: 0 12px; font-size: .85rem; }
  .gw-panel .btn { width: 100%; }
}

/* ---------- Photo viewer ---------- */
.viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: radial-gradient(60% 50% at 50% 40%, color-mix(in srgb, var(--c-3) 14%, var(--deep)), var(--deep)); color: #fff; overflow: hidden; }
.viewer::backdrop { background: transparent; }
/* minmax(0, ...) everywhere: a portrait photo's natural width must never widen the grid past the screen */
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); animation: lb-in .3s ease-out; overscroll-behavior: contain; }
.viewer-top { display: flex; align-items: center; gap: 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 10px; }
.viewer-filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 4px 2px; }
.viewer-filters .chip { background: rgb(255 255 255 / .08); color: #fff; border-color: rgb(255 255 255 / .16); }
.viewer-filters .chip b { background: rgb(255 255 255 / .14); color: #fff; }
.viewer-filters .chip[aria-pressed="true"] { background: var(--g-hot); border-color: transparent; color: var(--on-hot); }
.viewer-filters .chip[aria-pressed="true"] b { background: color-mix(in srgb, var(--on-hot) 16%, transparent); color: var(--on-hot); }
.viewer-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); gap: 12px; justify-items: center; min-height: 0; min-width: 0; margin: 0; padding: 0 72px; }
/* the photo sits centred in a frame that takes the grid row: Safari ignores a percentage max-height on a
   grid item, so a portrait photo spilled over the close button and the caption on an iPhone */
.viewer-frame { position: relative; justify-self: stretch; min-height: 0; }
.viewer-img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 16px; opacity: 0; transform: scale(.985); transition: opacity .35s, transform .5s var(--ease); }
.viewer-img.is-loaded { opacity: 1; transform: none; }
.viewer-cap { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-weight: 600; text-align: center; color: rgb(255 255 255 / .9); }
.viewer-count { color: rgb(255 255 255 / .6); font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-btn { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .2); background: rgb(255 255 255 / .08); color: #fff; transition: background .25s; flex: none; }
.viewer-btn:hover { background: var(--g-hot); border-color: transparent; color: var(--on-hot); }
.viewer-btn .i { width: 24px; height: 24px; }
.viewer-prev, .viewer-next { position: absolute; top: 50%; transform: translateY(-50%); }
.viewer-prev { left: 12px; } .viewer-next { right: 12px; }
.viewer-strip { display: flex; gap: 8px; min-width: 0; overflow-x: auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); scrollbar-width: thin; }
.viewer-strip button { flex: none; width: 64px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: none; opacity: .55; transition: opacity .25s, border-color .25s; }
.viewer-strip button img { width: 100%; height: 100%; object-fit: cover; }
.viewer-strip button[aria-current="true"] { opacity: 1; border-color: var(--c-1); }
.viewer-strip button:hover { opacity: 1; }
html.viewer-open { overflow: hidden; }
@media (max-width: 700px) {
  .viewer-stage { padding: 0 10px; }
  .viewer-prev, .viewer-next { top: auto; bottom: 96px; transform: none; width: 46px; height: 46px; }
  .viewer-cap { padding: 0 58px; }
}

/* ---------- WhatsApp ---------- */
.wa-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
/* grid items may shrink below their content, so a swipe row scrolls inside its column instead of widening it */
.wa-inner > *, .areas-grid > *, .contact-grid > *, .faq-grid > *, .crew-grid > * { min-width: 0; }
.wa-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 8px 16px 8px 8px; border-radius: 99px; color: var(--on-hot); background: var(--g-hot); font-weight: 800; font-size: .95rem; white-space: nowrap; box-shadow: 0 12px 24px -12px var(--c-1); }
.wa-badge .i { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: rgb(255 255 255 / .35); }
.wa-lede { margin-top: 18px; max-width: 48ch; color: var(--muted); font-size: clamp(1.02rem, 1rem + .25vw, 1.18rem); }
.wa-pick { margin-top: 28px; font-weight: 800; }
.wa-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wa-quick a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--petal); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .93rem; white-space: nowrap; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.wa-quick a .i { width: 18px; height: 18px; stroke: url(#dg-icon); }
.wa-quick a:hover { color: var(--on-hot); background: var(--g-hot); border-color: transparent; transform: translateY(-2px); }
.wa-quick a:hover .i { stroke: var(--on-hot); }
.wa-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.wa-note { display: flex; gap: 10px; color: var(--muted); font-size: .95rem; max-width: 36ch; }
.wa-note .i { margin-top: 3px; stroke: url(#dg-icon); }
.wa-note a { color: var(--ink); font-weight: 700; }
.wa-visual { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.wa-phone { max-width: 340px; width: 100%; justify-self: center; border-radius: 40px; border: 9px solid #17231A; background: var(--mist); overflow: hidden; box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--c-3) 60%, #000), 0 0 0 1px rgb(0 0 0 / .1); }
.wa-phone-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--night); color: #fff; }
.wa-ava { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; }
.wa-ava svg { height: 26px; width: auto; aspect-ratio: 186.75 / 329.5; }
.wa-phone-top strong { display: block; font-size: .95rem; line-height: 1.1; }
.wa-phone-top small { font-size: .75rem; opacity: .75; }
.wa-top-ic { margin-left: auto; opacity: .7; }
.wa-chat { list-style: none; margin: 0; padding: 14px 12px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 330px; background: radial-gradient(circle at 20% 20%, rgb(255 255 255 / .6), transparent 40%), var(--mist); }
.wa-chat li { max-width: 84%; padding: 9px 11px; border-radius: 14px; font-size: .9rem; line-height: 1.4; color: var(--ink); box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.wa-in { align-self: flex-end; background: color-mix(in srgb, var(--c-2) 22%, #fff); border-top-right-radius: 4px; }
.wa-out { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.wa-photo { padding: 4px !important; }
.wa-photo img { width: 200px; height: 150px; object-fit: cover; border-radius: 10px; }
.wa-example { text-align: center; font-size: .72rem; color: var(--muted); padding: 0 0 12px; background: var(--mist); }
.wa-chat.is-armed li { opacity: 0; transform: translateY(10px) scale(.97); }
.wa-chat li.is-in { opacity: 1; transform: none; transition: opacity .4s, transform .5s var(--ease); }
.wa-qr { width: 160px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid var(--line); text-align: center; box-shadow: 0 24px 40px -26px rgb(28 46 23 / .5); }
.wa-qr img { width: 124px; height: 124px; margin: 0 auto; color: var(--night); }
.wa-qr p { display: flex; gap: 6px; margin-top: 8px; font-size: .75rem; line-height: 1.35; color: var(--muted); text-align: left; }
.wa-qr p .i { width: 16px; height: 16px; stroke: url(#dg-icon); }
@media (max-width: 960px) { .wa-inner, .wa-visual { grid-template-columns: 1fr; } .wa-qr { display: none; } }

/* ---------- Areas + map ---------- */
.areas-grid { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.areas-copy > p { margin-top: 16px; color: var(--on-night-2); max-width: 46ch; }
.area-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0; }
.area-stats li { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; padding: 12px 16px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line-night); }
.area-stats .i { grid-row: span 2; width: 24px; height: 24px; stroke: url(#dg-icon); }
.area-stats b { font: var(--display-w) 1.35rem/1.1 var(--display); white-space: nowrap; }
.area-stats span { font-size: .8rem; color: var(--on-night-2); white-space: nowrap; }
.area-list { display: flex; flex-wrap: wrap; gap: 8px; }
.area-list button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-night); background: var(--glass); color: var(--on-night); font: 700 .9rem/1 var(--body); white-space: nowrap; transition: background .2s, border-color .2s, transform .2s; }
.area-list button .i { width: 16px; height: 16px; }
.area-list button:hover, .area-list button:focus-visible, .area-list button.is-hot { background: rgb(255 255 255 / .16); border-color: var(--c-1); transform: translateY(-2px); }
.area-list .is-base { background: var(--g-hot); border-color: transparent; color: var(--on-hot); }
.area-note { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--on-night-2); font-size: .95rem; }
.area-note a { color: #fff; font-weight: 700; }
.area-note .i { stroke: url(#dg-icon); }
.map-card { position: relative; border-radius: 32px; overflow: hidden; background: radial-gradient(80% 60% at 20% 60%, color-mix(in srgb, var(--c-4) 20%, transparent), transparent 70%), linear-gradient(160deg, var(--sea-a), var(--sea-b)); border: 1px solid var(--line-night); box-shadow: 0 50px 100px -50px color-mix(in srgb, var(--c-3) 70%, transparent); }
.map-svg { display: block; width: 100%; height: auto; font-family: var(--body); }
.map-waves path { fill: none; stroke: rgb(255 255 255 / .07); stroke-width: 2; stroke-linecap: round; }
.map-other { fill: rgb(255 255 255 / .05); stroke: rgb(255 255 255 / .14); stroke-width: 1.5; }
.map-district { fill: url(#map-land); stroke: none; }
.map-district-line { fill: none; stroke: url(#map-edge); stroke-width: 3.5; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-1) 60%, transparent)); }
.map-cover { fill: url(#map-glow); animation: cover-pulse 5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cover-pulse { 50% { opacity: .6; transform: scale(1.06); } }
.map-route { fill: none; stroke: color-mix(in srgb, var(--c-2) 80%, #fff); stroke-width: 1.6; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .45; transition: opacity .3s, stroke-width .3s; }
.map-route.is-hot { opacity: 1; stroke-width: 3.2; stroke-dasharray: none; stroke: #fff; }
.map-pin { cursor: pointer; }
.map-pin-halo { fill: var(--c-1); opacity: .22; transform-box: fill-box; transform-origin: center; transition: opacity .3s, transform .3s; }
.map-pin-dot { fill: #fff; stroke: var(--c-1); stroke-width: 3.5; transition: fill .3s; }
.map-pin[data-rank="2"] .map-pin-dot, .map-pin[data-rank="3"] .map-pin-dot { stroke: var(--c-2); }
.map-label { fill: #fff; font-size: 23px; font-weight: 800; paint-order: stroke; stroke: var(--deep); stroke-width: 7px; stroke-linejoin: round; letter-spacing: .01em; transition: opacity .3s; }
.map-pin[data-rank="3"] .map-label { opacity: 0; }
.map-pin.is-hot .map-label { opacity: 1; }
.map-pin.is-hot .map-pin-halo { opacity: .6; transform: scale(1.7); animation: halo 1.2s ease-out infinite; }
.map-pin.is-hot .map-pin-dot { fill: var(--c-1); stroke: #fff; }
.map-pin.is-hot { filter: drop-shadow(0 0 10px var(--c-1)); }
@keyframes halo { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
.map-base-pin { fill: url(#map-pin-g); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .5)); }
.map-base-icon { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.map-label-base { font-size: 30px; }
.map-sub { fill: color-mix(in srgb, var(--c-2) 70%, #fff); font-size: 18px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; paint-order: stroke; stroke: var(--deep); stroke-width: 6px; }
.map-radar { fill: none; stroke: var(--c-1); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: radar 3.2s ease-out infinite; }
.map-radar-2 { animation-delay: 1.6s; }
@keyframes radar { from { transform: scale(.4); opacity: .9; } to { transform: scale(5.5); opacity: 0; } }
.map-sea { fill: rgb(255 255 255 / .16); font-size: 30px; font-style: italic; font-weight: 700; letter-spacing: .35em; }
.map-sea-sm { font-size: 24px; }
.map-region { fill: rgb(255 255 255 / .3); font-size: 17px; font-weight: 800; letter-spacing: .4em; }
.map-scale path { fill: none; stroke: rgb(255 255 255 / .6); stroke-width: 2.5; }
.map-scale text, .map-north text { fill: rgb(255 255 255 / .7); font-size: 18px; font-weight: 800; letter-spacing: .08em; }
.map-north circle { fill: rgb(255 255 255 / .05); stroke: rgb(255 255 255 / .2); stroke-width: 1.5; }
.map-north path { fill: var(--c-1); }
.map-credit { position: absolute; left: 16px; bottom: 10px; font-size: .7rem; color: rgb(255 255 255 / .5); }
.map-credit a { color: inherit; }
/* on a phone: heading and figures, then the map, then the list of areas */
@media (max-width: 960px) {
  .areas-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .areas-copy { display: contents; }
  .map-card { order: 1; margin: 4px 0 28px; }
  .area-list, .area-note { order: 2; }
}
@media (max-width: 560px) {
  .map-label { font-size: 34px; stroke-width: 9px; }
  .map-label-base { font-size: 40px; }
  .map-sub { font-size: 24px; }
  .map-pin[data-rank="2"] .map-label { opacity: 0; }
  .map-pin[data-rank="2"].is-hot .map-label { opacity: 1; }
  .map-pin-dot { r: 10; }
  .map-sea, .map-region { display: none; }
}

/* ---------- FAQ ---------- */
.faq-grid { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 100px); align-items: start; }
.faq-side { position: sticky; top: 110px; display: grid; gap: 18px; justify-items: start; }
.faq-side .eyebrow { margin-bottom: -2px; }
.faq-side > p { color: var(--muted); max-width: 36ch; }
.faq-list { display: grid; gap: 12px; }
.faq-list details { border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 30px -28px rgb(28 46 23 / .6); transition: border-color .3s, box-shadow .3s; }
.faq-list details[open] { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--g-sunrise) border-box; border: 1.5px solid transparent; box-shadow: 0 24px 40px -28px color-mix(in srgb, var(--c-1) 60%, transparent); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 18px 20px; font: 700 1.08rem/1.3 var(--body); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-ic { display: grid; place-items: center; width: 42px; height: 42px; padding: 10px; border-radius: 12px; background: var(--mist); stroke: url(#dg-icon); flex: none; }
.faq-list summary span { flex: 1; }
.faq-plus { width: 30px; height: 30px; padding: 6px; border-radius: 50%; color: var(--on-hot); background: var(--g-hot); transition: transform .35s var(--ease); }
.faq-list details[open] .faq-plus { transform: rotate(180deg); }
.faq-list details p { padding: 0 22px 22px 78px; color: var(--muted); }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-side { position: static; } .faq-list details p { padding-left: 22px; } }

/* ---------- Contact ---------- */
.contact-grid { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-side { display: grid; gap: 18px; }
.contact-side .eyebrow { margin-bottom: -2px; }
.contact-side > p { color: var(--on-night-2); }
.contact-lines { display: grid; gap: 10px; margin-top: 10px; }
.cl { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--glass); border: 1px solid var(--line-night); color: var(--on-night); text-decoration: none; transition: background .25s, border-color .25s, transform .25s; }
a.cl:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .3); transform: translateX(4px); }
.cl-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--g-hot); color: var(--on-hot); flex: none; }
.cl-ic .i { width: 22px; height: 22px; }
.cl-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cl-t small { font-size: .78rem; color: var(--on-night-2); font-weight: 600; }
.cl-t b { font-weight: 700; overflow-wrap: anywhere; }
.cl-t .open-now { margin-top: 4px; color: var(--on-night-2); }
.cl-t .open-now.is-open { color: #fff; }
.cl-go { opacity: .6; }
.open-now { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 800; white-space: nowrap; }
.open-now:empty { display: none; }
.open-now::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9CA88F; }
.open-now.is-open { color: #fff; }
.open-now.is-open::before { background: var(--c-1); box-shadow: 0 0 0 0 var(--c-1); animation: live 1.8s ease-out infinite; }
@keyframes live { to { box-shadow: 0 0 0 10px transparent; } }
.contact-card { background: #fff; color: var(--ink); border-radius: 30px; padding: clamp(22px, 3.5vw, 44px); box-shadow: 0 50px 100px -50px rgb(0 0 0 / .7); }
.form { display: grid; gap: 20px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; }
.field label, .picks legend { font-weight: 800; font-size: .9rem; }
.fi { position: relative; display: block; }
.fi .i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--muted); pointer-events: none; transition: color .2s; }
.field input, .field textarea { width: 100%; min-height: 54px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--petal); font-size: 1.02rem; transition: border-color .2s, background .2s, box-shadow .2s; }
.fi input { padding-left: 46px; }
.field textarea { resize: vertical; min-height: 124px; line-height: 1.5; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent-ink); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-1) 16%, transparent); }
.fi:focus-within .i { color: var(--accent-ink); }
.field [aria-invalid="true"] { border-color: #D6334A; }
.field-error { color: #C0263D; font-weight: 700; }
.picks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.picks legend { margin-bottom: 10px; padding: 0; }
.picks label { position: relative; }
.picks input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.picks span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 99px; border: 1.5px solid var(--line); font-size: .93rem; white-space: nowrap; transition: background .2s, border-color .2s, color .2s; }
.picks span .i { width: 18px; height: 18px; stroke: url(#dg-icon); }
.picks b { font-weight: 700; }
.picks input:checked + span { background: var(--g-hot); color: var(--on-hot); border-color: transparent; }
.picks input:checked + span .i { stroke: var(--on-hot); }
.picks input:focus-visible + span { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-status { color: var(--muted); }
.form-privacy { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .85rem; }
.form-privacy .i { stroke: url(#dg-icon); }
.form-success { display: grid; gap: 16px; justify-items: start; }
.form-success-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; color: var(--on-hot); background: var(--g-hot); }
.form-success-ic .i { width: 32px; height: 32px; stroke-width: 3; }
.form-success-copy { display: grid; gap: 14px; }
.form-success h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem); }
.form-success p { color: var(--muted); }
.handoff-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } .form-foot .btn { width: 100%; } }

/* ---------- CTA band ---------- */
.cta { position: relative; overflow: hidden; padding: clamp(72px, 10vw, 140px) var(--gutter); color: var(--on-hot); background: linear-gradient(118deg, var(--c-3) 0%, var(--c-1) 42%, var(--c-2) 100%); }
.cta::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(50% 80% at 85% 50%, rgb(255 255 255 / .2), transparent 70%); }
.cta-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.3fr .7fr; gap: 22px 60px; align-items: end; }
.cta-inner h2 { font-size: clamp(2.3rem, 1.2rem + 3.8vw, 5rem); line-height: .98; grid-row: span 2; text-shadow: none; }
.cta-inner p { max-width: 42ch; font-size: 1.1rem; color: color-mix(in srgb, var(--on-hot) 85%, transparent); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .cta-inner { grid-template-columns: 1fr; } .cta-inner h2 { grid-row: auto; } }

/* ---------- Footer ---------- */
/* the "Talk to us" band sits straight under the CTA band, so the footer has no top padding of its own */
.ft { position: relative; isolation: isolate; overflow: hidden; background: var(--deep); color: var(--on-night); padding: 0 var(--gutter) calc(120px + env(safe-area-inset-bottom, 0px)); }
.ft::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(50% 40% at 10% 20%, color-mix(in srgb, var(--c-3) 26%, transparent), transparent 70%), radial-gradient(40% 40% at 90% 90%, color-mix(in srgb, var(--c-1) 18%, transparent), transparent 70%); }
.ft-inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; }
/* "Talk to us" is a band from edge to edge: it steps out over the footer's side padding, no border or radius */
.ft-call { position: relative; z-index: 1; margin: 0 calc(var(--gutter) * -1); padding: clamp(28px, 3.5vw, 48px) var(--gutter); background: linear-gradient(90deg, rgb(255 255 255 / .08), rgb(255 255 255 / .04)); }
.ft-call-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: center; }
.ft-call .eyebrow { margin-bottom: 10px; }
.ft-call-big { font: var(--display-w) clamp(2.2rem, 1.2rem + 3.6vw, 4.4rem)/1 var(--display); letter-spacing: var(--display-ls); }
.ft-call-big a { text-decoration: none; background: var(--g-hl); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.open-now-lg { margin-top: 14px; font-size: .9rem; color: var(--on-night-2); }
.ft-call-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.ft-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px 48px; margin-top: clamp(48px, 6vw, 80px); }
.ft-logo { height: auto; width: min(280px, 80%); filter: none; }
.ft-brand p { margin-top: 20px; color: var(--on-night-2); max-width: 40ch; line-height: 1.6; }
.ft-social { display: flex; gap: 10px; margin-top: 24px; }
.ft-social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 2px; background: rgb(255 255 255 / .07); border: 1px solid var(--line-night); color: #fff; transition: filter .25s, background .25s, border-color .25s, transform .25s; }
.ft-social a:hover { transform: translateY(-3px); filter: brightness(1.08); }
.ft-social .i { width: 21px; height: 21px; }
/* each way to reach us has its own colour: Facebook blue, WhatsApp green, the phone in lime, email plain */
.ft-social .ft-so-fb { background: var(--fb); border-color: transparent; }
.ft-social .ft-so-wa { background: var(--wa); border-color: transparent; color: var(--on-wa); }
.ft-social .ft-so-call { background: var(--g-hot); border-color: transparent; color: var(--on-hot); }
.ft-social .ft-so-mail:hover { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .4); }
/* the footer's controls are near-square */
.ft .btn, .ft .lang-btn { border-radius: 2px; }
.ft .lang-btn { height: 40px; font-size: .88rem; letter-spacing: 0; }
.ft-col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 800 .82rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.ft-col h3 .i { stroke: url(#dg-icon); }
.ft-col h3:not(:first-child) { margin-top: 34px; }
.ft-links, .ft-contact, .ft-hours { display: grid; gap: 4px; }
.ft-links a, .ft-contact a { display: flex; align-items: center; gap: 12px; padding: 7px 8px; margin-left: -8px; border-radius: 10px; color: var(--on-night-2); text-decoration: none; transition: background .2s, color .2s; }
.ft-links a .i, .ft-contact a > .i { width: 18px; height: 18px; opacity: .7; }
.ft-links a:hover, .ft-contact a:hover { color: #fff; background: rgb(255 255 255 / .06); }
.ft-links a:hover .i, .ft-contact a:hover > .i { stroke: url(#dg-icon); opacity: 1; }
.ft-contact a > span { display: grid; color: var(--on-night); }
.ft-contact small { font-size: .74rem; color: var(--on-night-2); }
.ft-hours li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-night); color: var(--on-night-2); }
.ft-hours b { color: #fff; white-space: nowrap; }
.ft-areas { color: var(--on-night-2); line-height: 1.6; font-size: .95rem; }
.ft-areas a { color: #fff; font-weight: 700; }
.ft-bottom { margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--line-night); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 30px; color: var(--on-night-2); font-size: .88rem; }
.ft-bottom-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.deco-meadow { inset: auto 0 0; height: 160px; }
@media (max-width: 1060px) { .ft-top { grid-template-columns: 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
/* on a phone the three share rows by their own width (Email drops below), so no label is ever cut */
@media (max-width: 760px) { .ft-call-inner { grid-template-columns: 1fr; } .ft-call-btns { justify-content: flex-start; } .ft-call-btns .btn { flex: 1 1 auto; padding: 0 16px; } }
@media (max-width: 560px) { .ft-top { grid-template-columns: 1fr; } .ft-call-big { font-size: clamp(2rem, 10vw, 2.6rem); } }
@media (min-width: 961px) { .ft { padding-bottom: 130px; } }

/* ---------- Mobile dock ---------- */
.dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: none; grid-template-columns: 1fr 1.2fr 1.3fr; gap: 6px; padding: 6px; border-radius: 20px; background: color-mix(in srgb, var(--night) 88%, transparent); border: 1px solid rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 40px -16px rgb(0 0 0 / .6); transform: translateY(160%); transition: transform .5s var(--ease); }
.dock.is-on { transform: none; }
.dock a { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; border-radius: 14px; color: #fff; font-weight: 800; font-size: .92rem; text-decoration: none; white-space: nowrap; background: rgb(255 255 255 / .08); }
.dock .i { width: 19px; height: 19px; }
/* three buttons, three looks: Call in lime (as it is everywhere at the foot), WhatsApp in its own green,
   the quote in white */
.dock .dock-call { background: var(--g-hot); color: var(--on-hot); }
.dock .dock-wa { background: var(--wa); color: var(--on-wa); }
.dock .dock-quote { background: #fff; color: var(--ink); }
@media (max-width: 960px) { .dock { display: grid; } }

/* ---------- Garden layer pieces (deco.js) ---------- */
/* The Dig it man: lime with a dark edge like the logo, a honey-wood spade handle, light-brown soil */
.man { position: absolute; overflow: visible; --man: var(--c-1); --man-edge: var(--on-hot); }
.man .man-fill { fill: var(--man); }
.man .man-fill-s { stroke: var(--man); }
.man .man-edge { stroke: var(--man-edge); }
.man .man-edge-f { fill: var(--man-edge); stroke: var(--man-edge); stroke-linejoin: round; }
.man .spade-handle { stroke: #C9972B; }
.man .soil, .man .clod { fill: var(--soil); }
.man .soil-line { stroke: var(--soil); }
.man .phone { fill: var(--man-edge); }
.man .call-wave { stroke: var(--night); }
.sec-night .man .call-wave { stroke: var(--c-1); }
.man .sparkle-fill { fill: var(--c-3); }
/* his kit: a sun-yellow wheelbarrow of green clippings, a sun-yellow can with blue drops, a green shoot */
.man .barrow-tyre { fill: var(--man-edge); }
.man .barrow-spoke { stroke: var(--man); }
.man .barrow-tray, .man .can-fill { fill: var(--c-3); }
.man .can-fill-s { stroke: var(--c-3); }
.man .barrow-load, .man .plant { fill: var(--c-4); }
.man .plant-s { stroke: var(--c-4); }
.man .drop { fill: #6CC6EE; }
.man-ink { --man: var(--on-hot); --man-edge: transparent; opacity: .16; }
.man-ink .spade-handle { stroke: var(--on-hot); }
.man-ink .soil, .man-ink .clod { fill: var(--on-hot); }
.man-ink .soil-line { stroke: var(--on-hot); }
.digger .dig-upper { transform-box: view-box; transform-origin: 70px 162px; animation: dig-upper var(--dig, 1.6s) ease-in-out infinite; }
.digger .dig-tool { transform-box: view-box; transform-origin: 80px 116px; animation: dig-tool var(--dig, 1.6s) ease-in-out infinite; }
.digger .clod { transform-box: view-box; opacity: 0; animation: clod var(--dig, 1.6s) ease-out var(--cd, 0s) infinite; }
@keyframes dig-upper { 0%, 100% { transform: rotate(-3deg); } 28% { transform: rotate(9deg); } 45% { transform: rotate(12deg); } 66% { transform: rotate(-7deg); } 80% { transform: rotate(-2deg); } }
@keyframes dig-tool { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 28% { transform: translate(0, 9px) rotate(3deg); } 45% { transform: translate(0, 13px) rotate(6deg); } 66% { transform: translate(0, -3px) rotate(-26deg); } 80% { transform: translate(0, 0) rotate(-12deg); } }
@keyframes clod { 0%, 60% { transform: translate(0, 0); opacity: 0; } 64% { transform: translate(0, -6px); opacity: 1; } 82% { transform: translate(calc(var(--dx) * .6), var(--h)); opacity: 1; } 100% { transform: translate(var(--dx), 6px); opacity: 0; } }
/* walking (the trail, and pushing the wheelbarrow): the legs swing from the hip deco.js sets as origin */
:is(.walker, .man-barrow) .walk-leg { transform-box: view-box; animation: walk-leg .8s ease-in-out infinite alternate; }
:is(.walker, .man-barrow) .walk-leg-b { animation-delay: -.8s; opacity: .8; }
:is(.walker, .man-barrow) .walk-body { animation: walk-bob .4s ease-in-out infinite alternate; }
.man-barrow .barrow-wheel { transform-box: fill-box; transform-origin: center; animation: spin 1.6s linear infinite; }
@keyframes walk-leg { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes walk-bob { to { transform: translateY(-4px); } }
/* on the phone he bobs and the call rings out; with his spade slung he breathes slowly and shifts his
   weight from the hip; leaning, he rocks back proud; waving, his arm swings from the shoulder;
   watering, the can tips and the drops fall; any sparkles twinkle */
.man-call .man-body { animation: man-bob 1.6s ease-in-out infinite alternate; }
.man-call .call-wave { animation: call-wave 1.5s ease-out var(--wd, 0s) infinite; }
.man-slung .slung-upper { transform-box: view-box; animation: man-breathe 3.6s ease-in-out infinite alternate; }
.man-lean .man-proud { transform-box: view-box; animation: man-proud 3s ease-in-out infinite alternate; }
.man-wave .wave-arm { transform-box: view-box; animation: man-wave .65s ease-in-out infinite alternate; }
.man-water .can { transform-box: view-box; animation: can-tip 2.2s ease-in-out infinite alternate; }
.man-water .drop { transform-box: view-box; animation: drop 1.1s linear var(--dd, 0s) infinite; }
.man .sparkle { transform-box: fill-box; transform-origin: 50% 50%; animation: sparkle 1.8s ease-in-out var(--sk, 0s) infinite; }
@keyframes man-bob { to { transform: translateY(-5px); } }
@keyframes call-wave { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes man-breathe { from { transform: rotate(-1deg) scaleY(.992); } to { transform: rotate(1.2deg) scaleY(1.01); } }
@keyframes man-proud { from { transform: rotate(-1.5deg); } to { transform: rotate(2.5deg); } }
@keyframes man-wave { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
@keyframes can-tip { from { transform: rotate(-4deg); } to { transform: rotate(6deg); } }
@keyframes drop { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(80px); opacity: 0; } }
@keyframes sparkle { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.is-still .man * { animation-play-state: paused !important; }
.trail-walker { z-index: 2; pointer-events: none; }
.trail-bed { stroke: color-mix(in srgb, var(--soil) 30%, transparent); }
.trail { stroke: var(--soil); }
@media (max-width: 760px) { .man { --man-scale: .72; } }
/* a figure marked data-mobile="hide" has no free spot once the section stacks */
@media (max-width: 960px) { .deco[data-mobile="hide"] { display: none; } }
/* the digger stands over the service cards until the page is wide enough to leave him a margin */
@media (max-width: 1180px) { .deco[data-mobile="hide-1180"] { display: none; } }
/* ...and a smaller one of each stands on its section's floor where the big one has no room: the digger
   under the service cards, a walker crossing under the steps, the waving man under the crew photos */
@media (min-width: 861px) { .deco[data-mobile="only-860"] { display: none; } }
@media (min-width: 961px) { .deco[data-mobile="only"] { display: none; } }
@media (min-width: 1181px) { .deco[data-mobile="only-1180"] { display: none; } }
@media (max-width: 1180px) { .services { padding-bottom: calc(var(--section) + 56px); } }
@media (max-width: 960px) { .services { padding-bottom: calc(var(--section) + 70px); } .crew { padding-bottom: calc(var(--section) + 64px); } }
@media (max-width: 860px) { .process { padding-bottom: calc(var(--section) + 40px); } }
@media (max-width: 760px) { .services { padding-bottom: calc(var(--section) + 56px); } .crew { padding-bottom: calc(var(--section) + 50px); } }
/* where the sections stack, their content comes down to the floor these two stand on, so each gets a
   strip of its own under it (his drawn height, less the section's padding, plus a gap): the watering
   man below "Not on the list?", the man on the phone below the quote form */
@media (max-width: 1180px) { .areas { padding-bottom: calc(var(--section) + 24px); } }
@media (max-width: 960px) { .areas { padding-bottom: calc(var(--section) + 48px); } .contact { padding-bottom: calc(var(--section) + 120px); } }
@media (max-width: 760px) { .areas { padding-bottom: calc(var(--section) + 40px); } .contact { padding-bottom: calc(var(--section) + 90px); } }

.deco-grass { inset: auto 0 0; height: 96px; }
.deco-grass svg { overflow: hidden; }
/* the sun: in the top corner of Before & after, clear of the photos */
.deco .sun { width: 340px; height: 340px; right: max(-30px, calc(50% - 770px)); top: -147px; }
.sun .sun-rays { transform-box: view-box; transform-origin: 180px 180px; animation: spin 60s linear infinite; }
.sun .sun-glow { transform-box: fill-box; transform-origin: center; animation: sun-glow 3.6s ease-in-out infinite alternate; }
@keyframes sun-glow { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.06); opacity: 1; } }
@media (max-width: 760px) { .deco .sun { width: 200px; height: 200px; right: -50px; top: -130px; } }
/* palms: honey trunks, fronds in the garden greens; the row behind is paler. The section keeps a band
   free under its content for them to stand in, as the trust strip does for its grass. */
.wa { padding-bottom: calc(var(--section) + 110px); }
.deco-palms { inset: auto 0 0; height: 300px; }
.palm { transform-box: view-box; animation: palm-lean var(--pd, 6s) ease-in-out var(--pdl, 0s) infinite alternate; }
.palm-crown { transform-box: view-box; animation: palm-crown calc(var(--pd, 6s) * .6) ease-in-out var(--pdl, 0s) infinite alternate; }
.palm-frond { transform-box: view-box; animation: palm-frond var(--fd, 3s) ease-in-out var(--fdl, 0s) infinite alternate; }
.palm-far .palm-frond { animation: none; }
@keyframes palm-lean { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
@keyframes palm-crown { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes palm-frond { from { transform: rotate(-3deg); } to { transform: rotate(3.5deg); } }
.palm-trunk { fill: #C9972B; }
.palm-ring { fill: none; stroke: #9E7420; }
.palm-date { fill: #B7791F; }
.palm-rib { fill: none; stroke: rgb(255 255 255 / .35); }
.palms-back { opacity: .38; }
.palms-ground { fill: var(--mist); }
/* question marks: the big one bobs and tilts on its dot, the small ones float up and fade */
.deco .ask { width: 200px; height: 273px; left: max(16px, calc(50% - 700px)); bottom: 0; }
.ask .ask-big { transform-box: fill-box; transform-origin: 50% 88%; animation: ask-bob 3.2s ease-in-out infinite; }
.ask .ask-float { transform-box: fill-box; transform-origin: center; animation: ask-float 5.4s ease-in-out var(--adl, 0s) infinite; }
@keyframes ask-bob { 0%, 100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-14px) rotate(7deg); } }
@keyframes ask-float { 0% { transform: translateY(40px) scale(.7) rotate(-10deg); opacity: 0; } 20%, 70% { opacity: 1; } 100% { transform: translateY(-110px) scale(1.05) rotate(14deg); opacity: 0; } }
@media (max-width: 860px) { .deco .ask { width: 110px; height: 150px; left: auto; right: 4px; top: 30px; bottom: auto; } }
/* the Greek heading ("Συχνές ερωτήσεις") is three times as wide as "FAQs" and ran under the question mark on
   phones up to the iPhone 13 and came within 4px of it at 440px: up to 500px it sits smaller, in the room above
   the heading beside the eyebrow (from 480px up the heading clears it by 25px and more) */
@media (max-width: 500px) { html[lang="el"] .deco .ask { width: 70px; height: 96px; top: 6px; } }
.firefly { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: color-mix(in srgb, var(--sun) 70%, #fff); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--sun) 70%, transparent); animation: ff-move var(--d) ease-in-out var(--dl) infinite alternate, ff-blink var(--b) ease-in-out var(--dl) infinite alternate; }
@keyframes ff-move { to { transform: translate(40px, -30px); } }
@keyframes ff-blink { from { opacity: .1; } to { opacity: .95; } }

/* ---------- Phones: fewer tall stacks, more rows you swipe ---------- */
@media (max-width: 760px) {
  :root { --section: clamp(64px, 16vw, 96px); }
  .head { margin-bottom: 26px; gap: 12px; }
  h2 { font-size: clamp(2.05rem, 9vw, 2.6rem); }
  .eyebrow { margin-bottom: 12px; }
  .trust { padding-bottom: 116px; }
  .trust-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .trust-list li { row-gap: 6px; padding: 14px; border-radius: 18px; }
  .trust-ic { top: 12px; right: 12px; width: 34px; height: 34px; }
  .trust-list strong { padding-right: 38px; font-size: 1.9rem; }
  .trust-list li > span:last-child { font-size: .84rem; }
  .svc-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 18px; scrollbar-width: none; }
  .svc-grid::-webkit-scrollbar { display: none; }
  .svc { flex: 0 0 84%; scroll-snap-align: center; }
  .svc:hover { transform: none; }
  .svc-body { padding: 36px 20px 20px; }
  ul.wa-quick { flex-wrap: nowrap; overflow-x: auto; margin: 12px calc(var(--gutter) * -1) 0; padding: 2px var(--gutter) 8px; scrollbar-width: none; }
  .wa-quick::-webkit-scrollbar { display: none; }
  .wa-quick li { flex: none; }
  .wa-actions .btn { width: 100%; }
  ul.area-list { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); justify-content: start; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px; scrollbar-width: none; }
  .area-list::-webkit-scrollbar { display: none; }
  .area-stats { margin: 20px 0; gap: 8px; }
  .area-stats li { padding: 10px 12px; }
  .tq-card { width: min(84vw, 340px); padding: 20px; }
  .tq-letter { padding: 24px 20px; }
  .faq-list summary { gap: 12px; padding: 16px; font-size: 1rem; }
  .faq-ic { width: 36px; height: 36px; padding: 8px; }
  .faq-list details p { padding: 0 18px 18px; }
  .contact-card { border-radius: 24px; }
  .ft-links { grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .ft-links a { font-size: .9rem; gap: 8px; }
  .ft-bottom { justify-content: center; text-align: center; }
  .ft-bottom-tools { justify-content: center; }
  .cta-actions .btn { flex: 1 1 100%; }
}
@media (max-width: 380px) { .ft-links { grid-template-columns: 1fr; } }

/* reduced motion reduces rather than removes: the Dig it men and the garden keep their small loops in
   place (base.css leaves .man and .deco alone), while anything that travels, zooms or pulses stays off,
   with the splash, the parallax, the reveals, the marquees and the wall */
@media (prefers-reduced-motion: reduce) {
  .hero-grip, .hero-scroll, .map-radar, .map-cover, .gw-track, .svc-bag-art .i, .ask .ask-float { animation: none !important; }
  .ask .ask-float { opacity: 0; }
}