@import url("fonts.css");

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

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

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

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

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

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

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

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

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

/* ============================================================
   Skiathos Taxi — service utility.
   Ink navy, signal yellow used only where it means "act", a
   locations matrix, numbered steps, no rounded corners except
   the pill of the call button.
   ============================================================ */
:root {
  --shell:   #f6f7f9;
  --paper:   #ffffff;
  --navy:    #0e1a2b;
  --navy-2:  #182a42;
  --ink:     #0b1420;
  --body:    #4a5666;
  --dim:     #5d6a7a;
  --sig:     #f2c200;
  --sig-2:   #d9ae00;
  --sig-ink: #2a2200;
  --sea:     #14607f;
  --hair:    #dde2e8;
  --hair-d:  #26374d;

  --display: "Space Grotesk", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.15rem, 4.5vw, 3.25rem);
  --wrap: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body { background:var(--paper); color:var(--body); font-family:var(--sans); font-size:1.02rem; line-height:1.72;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--sea); text-underline-offset:3px; }
a:hover { color:var(--navy); }
h1,h2,h3 { font-family:var(--display); font-weight:700; color:var(--ink); line-height:1.14; letter-spacing:-.025em; }
:focus-visible { outline:3px solid var(--sig); outline-offset:2px; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link { position:absolute; left:1rem; top:-100px; z-index:300; background:var(--sig); color:var(--sig-ink); padding:.7rem 1.2rem; font-weight:700; text-decoration:none; }
.skip-link:focus { top:1rem; color:var(--sig-ink); }
.label { display:inline-flex; align-items:center; gap:.6rem; font-family:var(--display); font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--sea); }
.label::before { content:""; width:20px; height:2px; background:var(--sig-2); }

/* ---------- Call strip ---------- */
.callstrip { background:var(--sig); color:var(--sig-ink); font-size:.86rem; font-weight:600; }
.callstrip .wrap { display:flex; flex-wrap:wrap; gap:.3rem 1.5rem; justify-content:space-between; padding-block:.55rem; }
.callstrip a { color:var(--sig-ink); text-decoration:none; font-weight:700; }
.callstrip a:hover { text-decoration:underline; color:var(--sig-ink); }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--hair); }
.header-inner { display:flex; align-items:center; gap:1.25rem; min-height:72px; position:relative; }
.brand { margin-right:auto; display:inline-flex; align-items:center; text-decoration:none; }
.brand img { height:34px; width:auto; }
.nav { display:flex; align-items:center; gap:clamp(.7rem,1.8vw,1.75rem); }
.nav a { font-family:var(--display); font-size:.88rem; font-weight:600; color:var(--ink); text-decoration:none; padding-block:.35rem; border-bottom:3px solid transparent; transition:border-color .22s var(--ease), color .22s var(--ease); }
.nav a:hover { color:var(--sea); border-bottom-color:var(--hair); }
.nav a[aria-current="page"] { border-bottom-color:var(--sig); }
.header-call { display:inline-flex; align-items:center; gap:.5rem; background:var(--navy); color:#fff; border-radius:999px; padding:.6rem 1.25rem; font-family:var(--display); font-weight:700; font-size:.92rem; text-decoration:none; transition:background-color .2s var(--ease); }
.header-call:hover { background:var(--sea); color:#fff; }
.header-call svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; }
.nav-toggle { display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--ink); position:relative; }
.nav-toggle span::before,.nav-toggle span::after { content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink); transition:transform .3s var(--ease), top .2s var(--ease); }
.nav-toggle span::before { top:-7px; } .nav-toggle span::after { top:7px; }
.site-header.is-open .nav-toggle span { background:transparent; }
.site-header.is-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
.site-header.is-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }
@media (max-width:900px) {
  .nav-toggle { display:inline-flex; }
  .header-call span { display:none; }
  .nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-top:1px solid var(--hair); padding:0 var(--gutter) 1rem; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .35s var(--ease), visibility .35s; }
  .site-header.is-open .nav { max-height:70vh; visibility:visible; overflow-y:auto; }
  .nav a { font-size:1rem; padding:.95rem 0; border-bottom:1px solid var(--hair); }
  .nav a[aria-current="page"] { border-bottom-color:var(--sig); }
}

/* ---------- Hero ---------- */
.hero { background:var(--navy); color:#b9c6d6; }
.hero .wrap { padding-block:clamp(2.75rem,7vw,5rem); display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (max-width:900px) { .hero .wrap { grid-template-columns:1fr; } }
.hero .label { color:var(--sig); } .hero .label::before { background:var(--sig); }
.hero h1 { color:#fff; margin-top:1rem; font-size:clamp(2.1rem,5.4vw,3.6rem); max-width:15ch; }
.hero p { margin-top:1.1rem; max-width:44ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.9rem; }
.hero-art img { width:100%; aspect-ratio:16/10; object-fit:cover; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; background:transparent; align-items:center; justify-content:center; gap:.55rem; padding:.9rem 1.7rem; border:2px solid transparent; border-radius:999px; font-family:var(--display); font-weight:700; font-size:.95rem; text-decoration:none; cursor:pointer; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); }
.btn:hover { transform:translateY(-1px); }
.btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; }
.btn--sig { background:var(--sig); color:var(--sig-ink); } .btn--sig:hover { background:#ffd726; color:var(--sig-ink); }
.btn--ghost-d { border-color:rgba(255,255,255,.35); color:#fff; } .btn--ghost-d:hover { border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.btn--navy { background:var(--navy); color:#fff; } .btn--navy:hover { background:var(--sea); color:#fff; }
.btn--line { border-color:var(--hair); color:var(--ink); } .btn--line:hover { border-color:var(--sea); color:var(--sea); }

/* ---------- Page head ---------- */
.pagehead { background:var(--shell); border-bottom:1px solid var(--hair); }
.pagehead .wrap { padding-block:clamp(2.25rem,5.5vw,3.75rem); }
.pagehead h1 { margin-top:.9rem; font-size:clamp(1.85rem,4.6vw,3rem); max-width:20ch; }
.pagehead p { margin-top:.9rem; max-width:62ch; }

/* ---------- Sections ---------- */
.section { padding-block:clamp(2.75rem,6.5vw,5rem); }
.section--shell { background:var(--shell); }
.sec-head { max-width:50rem; margin-bottom:clamp(1.6rem,3.5vw,2.5rem); }
.sec-head h2 { margin-top:.9rem; font-size:clamp(1.55rem,3.5vw,2.3rem); }
.sec-head p { margin-top:.85rem; }

/* ---------- Promises ---------- */
.promises { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.promises > div { background:var(--paper); padding:1.6rem 1.7rem; }
.promises svg { width:26px; height:26px; stroke:var(--sea); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.9rem; }
.promises h3 { font-size:1.1rem; }
.promises p { margin-top:.4rem; font-size:.9rem; color:var(--dim); }

/* ---------- Locations matrix ---------- */
.locs { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr)); gap:1px; background:var(--hair); border:1px solid var(--hair); }
.locs span { background:var(--paper); padding:.85rem 1.1rem; font-size:.93rem; color:var(--ink); display:flex; align-items:center; gap:.6rem; }
.locs span::before { content:""; width:6px; height:6px; background:var(--sig-2); flex-shrink:0; }
.locs span.hub { background:var(--navy); color:#fff; font-weight:600; }
.locs span.hub::before { background:var(--sig); }

/* ---------- Steps ---------- */
.steps { counter-reset:st; display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); }
.steps > li { counter-increment:st; list-style:none; background:var(--paper); padding:1.5rem 1.7rem; display:grid; grid-template-columns:3rem 1fr; gap:.3rem 1.2rem; }
.steps > li::before { content:counter(st); grid-row:1/3; font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--sig-2); line-height:1; }
.steps h3 { font-size:1.08rem; }
.steps p { margin-top:.35rem; font-size:.94rem; }
@media (max-width:560px) { .steps > li { grid-template-columns:1fr; } .steps > li::before { grid-row:auto; margin-bottom:.3rem; } }

/* ---------- FAQ ---------- */
.faq { border-top:1px solid var(--hair); }
.faq details { border-bottom:1px solid var(--hair); }
.faq summary { cursor:pointer; list-style:none; padding:1.15rem 0; font-family:var(--display); font-weight:600; font-size:1.03rem; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:""; flex-shrink:0; width:10px; height:10px; border-right:2px solid var(--sea); border-bottom:2px solid var(--sea); transform:rotate(45deg) translateY(-3px); transition:transform .25s var(--ease); }
.faq details[open] summary::after { transform:rotate(-135deg) translateY(-3px); }
.faq .a { padding:0 0 1.2rem; font-size:.96rem; max-width:70ch; }

/* ---------- Notice ---------- */
.notice { display:flex; gap:.9rem; padding:1.15rem 1.4rem; background:#fff8dd; border:1px solid #f0e0a0; font-size:.94rem; color:#4a3c00; }
.notice svg { width:20px; height:20px; flex-shrink:0; margin-top:.2rem; stroke:#8a6d00; fill:none; stroke-width:1.8; stroke-linecap:round; }
.notice strong { color:#3a2f00; }

/* ---------- Contact band ---------- */
.cband { background:var(--navy); color:#b9c6d6; }
.cband .wrap { padding-block:clamp(2.5rem,6vw,4rem); }
.cband h2 { color:#fff; font-size:clamp(1.55rem,3.4vw,2.3rem); }
.cband .label { color:var(--sig); } .cband .label::before { background:var(--sig); }
.clines { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--hair-d); border:1px solid var(--hair-d); margin-top:1.8rem; }
.clines > div { background:var(--navy-2); padding:1.35rem 1.5rem; }
.clines .k { display:block; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:#8ba0b8; margin-bottom:.35rem; }
.clines a, .clines .v { color:#fff; font-family:var(--display); font-weight:700; font-size:1.15rem; text-decoration:none; }
.clines a:hover { color:var(--sig); }
.clines .v.sm { font-family:var(--sans); font-weight:500; font-size:.98rem; }

/* ---------- Footer ---------- */
.site-footer { padding-block:2rem; font-size:.85rem; color:var(--dim); border-top:1px solid var(--hair); }
.footer-inner { display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center; justify-content:space-between; }
.site-footer img { height:26px; width:auto; }
.footer-links { display:flex; gap:1.3rem; list-style:none; flex-wrap:wrap; }
.site-footer a { color:var(--ink); text-decoration:none; }
.site-footer a:hover { color:var(--sea); }

/* ---------- Mobile call bar ---------- */
.callbar { display:none; }
@media (max-width:700px) {
  .callbar { position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:1fr 1fr; background:var(--sig); padding-bottom:env(safe-area-inset-bottom); }
  .callbar a { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.95rem .5rem; font-family:var(--display); font-weight:700; font-size:.95rem; text-decoration:none; color:var(--sig-ink); }
  .callbar a + a { border-left:1px solid rgba(0,0,0,.2); }
  .callbar svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
  body { padding-bottom:3.6rem; }
}
@media print { .callstrip,.callbar { display:none !important; } body { padding-bottom:0; } }
.cband .mt-h { margin-top:.9rem; }
.section .notice { margin-top:1.5rem; }
.cband-note { margin-top:.9rem; max-width:48ch; }