/* Demo 13: the Sora template's structure in her brand.
   Sora's cream, yellow bands, brown and orange become paper, sage bands,
   deep forest and honey; its flower ornament becomes the honey rule of her logo. */

:root {
  --paper: #FAFAF7;
  --band: #E7EEE5;      /* the template's yellow bands */
  --card: #EEF3EC;      /* warm cards on paper */
  --card-line: #D6E2D6;
  --wash: #DCE7DD;
  --honey-t: #F4E5CB;
  --sand: #ECE4D6;      /* the template's peach tiles */
  --ink: #2E3A31;
  --soft: #4F5C52;
  --sage: #5E7F66;
  --deep: #43604B;
  --night: #2C3E33;     /* the template's brown */
  --night-2: #364A3D;
  --on-night: #F3F6F1;
  --on-night-soft: #CBD8CD;
  --honey: #D9A15B;
  --honey-ink: #A9742A; /* honey for text on paper: 3.6:1, large italics only */
  --honey-hover: #CC9247;
  --honey-text: #855A1E; /* honey for small text: 5.1:1 on the bands, AA */
  --line: rgba(46, 58, 49, .14);

  --m: clamp(16px, 8.4vw, 120px);
  --max: 1200px;
  --gap: clamp(72px, 8vw, 120px);
  --r-xl: 28px;
  --r-lg: 20px;
  --r: 14px;
  --r-sm: 10px;
  --head-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);

  --t1: clamp(34px, 5.3vw, 76px);
  --t2: clamp(27px, 3.3vw, 48px);
  --t3: clamp(20px, 1.6vw, 23px);
  --t4: 18px;
  --t5: 15px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
html.locked { overflow: hidden; }
body {
  margin: 0;
  padding-top: var(--head-h);
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 'Commissioner', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
.strip :focus-visible, .numbers :focus-visible, .dark-cta :focus-visible, .dark-sec :focus-visible,
.office :focus-visible, .foot :focus-visible { outline-color: var(--honey); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }
.skip:focus { top: 12px; }
.ic { width: 20px; height: 20px; flex: none; }

.wrap { width: min(var(--max), 100% - 2 * var(--m)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * var(--m)); }

h1, h2, h3 { font-family: 'Literata', Georgia, serif; font-weight: 400; color: var(--ink); letter-spacing: -.01em; }
h1 { font-size: var(--t1); line-height: 1.08; }
h2 { font-size: var(--t2); line-height: 1.15; }
h3 { font-size: var(--t3); line-height: 1.3; }
h1 .ln, h2 .ln { display: block; }
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }
em { font-style: italic; }
em.honey { color: var(--honey-ink); }
em.sage { color: var(--sage); }
.body { color: var(--soft); }
.body + .body { margin-top: 16px; }

.eyebrow {
  font-size: var(--t5); font-weight: 600; letter-spacing: .16em; color: var(--honey-text);
  margin-bottom: 16px;
}
.sample {
  display: inline-block; margin-top: 32px; padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--honey-t); color: #6E5126; font-size: var(--t5); line-height: 1.5;
}
.sample.center { display: table; margin-inline: auto; }
.sample-dark { background: rgba(217, 161, 91, .16); color: #F2DDB8; }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 16px; }
.actions.center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 12px 24px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: var(--t5); font-weight: 600; text-decoration: none; line-height: 1.2;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn > span, .dc-btn > span, .textlink { white-space: nowrap; }
.btn-ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.btn:hover .btn-ic { transform: translate(2px, -2px); }
.btn-honey { background: var(--honey); color: var(--ink); }
.btn-honey:hover { background: var(--honey-hover); }
.btn-line { border-color: var(--honey); color: var(--ink); background: transparent; }
.btn-line .btn-ic { color: var(--honey-ink); }
.btn-line:hover { background: var(--honey-t); }
.btn-dark { background: var(--night); color: var(--on-night); }
.btn-dark:hover { background: var(--deep); }
.btn-chip { min-height: 44px; padding: 8px 18px; background: var(--paper); border-color: var(--card-line); color: var(--deep); margin-top: 24px; align-self: flex-start; }
.btn-chip:hover { border-color: var(--sage); }
.textlink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: var(--t5);
  text-decoration: none; color: var(--ink); border-bottom: 1.5px solid var(--honey);
}
.textlink .ic { width: 16px; height: 16px; }

/* ---------- lockup (from demo 9/12) ---------- */
.lockup { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-height: 44px; }
.lk-name { font-family: 'Bona Nova', Georgia, serif; font-size: 23px; line-height: 1; white-space: nowrap; }
.lk-rule { width: 1.5px; height: 30px; background: var(--honey-ink); }
.lk-role { font-size: 10px; font-weight: 500; letter-spacing: .22em; line-height: 1.45; color: var(--soft); }
.lockup-light { color: var(--on-night); }
.lockup-light .lk-rule { background: var(--honey); }
.lockup-light .lk-role { color: var(--on-night-soft); }

/* ---------- header: fixed (a sticky one flickered on her phone, demo 9) ---------- */
.site-head {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h);
  background: rgba(250, 250, 247, .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(94, 127, 102, .45);
}
.head-row { height: 100%; display: flex; align-items: center; gap: 24px; }
.nav { margin-left: auto; margin-right: auto; }
.nav ul { display: flex; gap: 8px; }
.nav a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: var(--t5); font-weight: 500;
  text-decoration: none; color: var(--ink); border-radius: 999px; white-space: nowrap;
}
.nav a:hover { color: var(--deep); background: var(--card); }
.nav a[aria-current="page"] { color: var(--deep); background: var(--wash); }
.site-head .btn { min-height: 44px; padding: 8px 20px; }
.burger {
  display: none; flex: none; margin-left: auto; width: 48px; height: 48px; border-radius: 50%;
  border: 0; background: var(--wash); color: var(--deep); align-items: center; justify-content: center;
}
.burger .ic-close { display: none; }
.burger[aria-expanded="true"] .ic-open { display: none; }
.burger[aria-expanded="true"] .ic-close { display: block; }

.sheet {
  position: fixed; inset: var(--head-h) 0 0; z-index: 49; background: var(--paper);
  padding: 24px var(--m) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 32px;
  opacity: 0; transition: opacity .25s var(--ease); overflow-y: auto; overscroll-behavior: contain;
}
.sheet.open { opacity: 1; }
/* a staggered fade, no rise: the ease-out tail left every row crawling under 1px for ~170ms, one
   row after another until 560ms, so the hairlines and titles stepped by a device pixel at different
   moments and read as a tremble just before they settled (04/11) */
.sheet nav li { opacity: 0; transition: opacity .35s var(--ease); transition-delay: calc(60ms + var(--n) * 50ms); }
.sheet.open nav li { opacity: 1; }
.sheet nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 16px 0; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.sheet nav li:first-child a { border-top: 1px solid var(--line); }
.sn-num { flex: none; width: 2ch; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--honey-text);
  font-variant-numeric: tabular-nums; }
.sn-t { flex: 1; font-family: 'Literata', Georgia, serif; font-size: clamp(26px, 7.4vw, 32px); line-height: 1.2; }
.sn-ic { flex: none; align-self: center; width: 20px; height: 20px; color: var(--sage); transition: transform .2s var(--ease); }
.sheet nav a:active .sn-ic { transform: translateX(4px); }
.sheet nav a[aria-current="page"] .sn-t { color: var(--deep); font-style: italic; }
/* the page you are on: a honey dot where the arrow would be */
.sheet nav a[aria-current="page"] .sn-ic { display: none; }
.sheet nav a[aria-current="page"]::after { content: ''; flex: none; align-self: center; width: 8px; height: 8px;
  margin: 0 6px; border-radius: 50%; background: var(--honey); }
.sheet-foot { margin-top: auto; display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--band); }
.sheet-where { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; color: var(--ink); font-size: 15px; }
.sheet-where span { display: grid; line-height: 1.35; color: var(--soft); }
.sheet-where strong { font-weight: 600; color: var(--ink); }
.sheet-where .tile { background: var(--paper); }
/* phones: booking first, full width, the call under it; side by side from 560 px */
.sheet-acts { display: grid; gap: 10px; }
.sheet-acts .btn { order: -1; }
@media (min-width: 560px) { .sheet-acts { grid-template-columns: auto 1fr; } .sheet-acts .btn { order: 0; } }
.sheet-call { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px;
  border-radius: 999px; background: var(--paper); color: var(--deep); text-decoration: none; font-weight: 600; white-space: nowrap; }
.sheet-acts .btn { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .sheet nav li { opacity: 1; transition: none; } }

/* ---------- tiles ---------- */
.tile { width: 48px; height: 48px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--deep); flex: none; }
.tile .ic { width: 22px; height: 22px; }
.tile-wash { background: var(--wash); }
.tile-honey { background: var(--honey-t); color: #85602A; }
.tile-rose { background: var(--sand); color: #7A5E3A; }

/* ---------- home hero: the Sora hero, centred, her plate turning slowly behind it ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; text-align: center;
  /* one screen, no more: the plate lives behind the words, not in a band of its own below them
     (a 350 px band of turning salad cost a whole extra scroll, 01/11) */
  min-height: clamp(600px, calc(100svh - var(--head-h)), 860px); display: flex; align-items: center;
  padding: clamp(48px, 6vw, 80px) 0; }
.hero-inner { width: min(var(--max), 100% - 2 * var(--m)); }
.hero-deco { position: absolute; inset: 0; pointer-events: none; }
.hero-inner { position: relative; z-index: 1; }
.hero-title { margin-top: 20px; }
.hero-lead {
  max-width: 34em; margin: 24px auto 32px; font-family: 'Literata', Georgia, serif; font-style: italic;
  font-size: var(--t4); line-height: 1.6; color: var(--ink);   /* ink, not soft: it sits over the plate */
}
/* over the plate the outline button needs paper behind it, like the chip below */
.hero .btn-line { background: rgba(250, 250, 247, .94); }
.hero .btn-line:hover { background: var(--honey-t); }
/* the eyebrow breaks only between its parts: the address never splits */
.hero-eyebrow .nb { white-space: nowrap; }
/* the address is the longest part: on the narrowest phones it keeps one line by tighter tracking */
@media (max-width: 400px) { .hero-eyebrow { letter-spacing: .08em; } }
@media (max-width: 380px) { .hero-eyebrow { font-size: 13px; letter-spacing: .06em; } }
/* the one real proof, right under the buttons */
.hero-trust { margin-top: 24px; }
/* a quiet paper halo, so the line reads on any part of the turning plate without looking like a
   third button: no border, no shadow, smaller and softer (the chip with both drew the eye, 01/11) */
.hero-trust a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px; font-size: 15px; color: var(--soft);
  text-decoration: none; border-radius: 999px; background: rgba(250, 250, 247, .88); }
.hero-trust .st { width: 14px; height: 14px; }
.hero-trust a:hover span { text-decoration: underline; text-decoration-color: var(--honey); text-underline-offset: 3px; }
.stars { display: inline-flex; gap: 2px; color: var(--honey); }
.st { width: 16px; height: 16px; display: block; }
.st-part { position: relative; display: block; color: var(--card-line); }
.st-fill { position: absolute; inset: 0; width: 70%; overflow: hidden; color: var(--honey); }

/* the plate: lies in perspective behind the hero where the template's drawn ring was, turning
   slowly; the pointer tilts it and scrolling lifts it. Background, never the subject. */
.p3 { overflow: hidden; z-index: -1; }
.p3-stage {
  position: absolute; left: 50%; top: 60%; width: min(1040px, 125vw); aspect-ratio: 1; translate: -50% -50%;
  perspective: 1500px; perspective-origin: 50% 30%;
}
.p3-tilt {
  position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform;
  transform: translateY(var(--p3-y, 0px)) rotateX(var(--p3-x, 64deg)) rotateY(var(--p3-ry, 0deg)) scale(var(--p3-s, 1));
}
.p3-spin, .p3-layer, .p3-shadow { position: absolute; inset: 0; border-radius: 50%; }
.p3-spin { transform: translateZ(0); animation: p3-turn 80s linear infinite; overflow: hidden; }
.p3-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* the rim's thickness: stacked discs under the photo */
.p3-layer { background: #E3E6DF; transform: translateZ(var(--z)); }
.p3-layer:last-of-type { background: #C9CEC4; }
.p3-shadow { inset: 4%; transform: translateZ(-60px) scale(1.04);
  background: radial-gradient(closest-side, rgba(46, 58, 49, .32), rgba(46, 58, 49, 0)); filter: blur(18px); }
@keyframes p3-turn { to { transform: translateZ(0) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .p3-spin { animation: none; } }
/* the words sit on a paper veil, never straight on the photo. Its edge fades over a long distance
   with many stops, so it never reads as a shape (the critique saw the old one's edge).
   Washed out on purpose: the veil also hides the photo's flaws at this size (04/11, the full-colour
   plate was tried and showed compression and soft edges). */
.hero-veil {
  /* a soft, strong pool of paper behind the words only: the plate shows fully around and below
     them, faintly through them */
  position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1080px, 120vw); height: 100%; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(ellipse 48% 50% at 50% 54%,
    rgba(250, 250, 247, .93) 0%, rgba(250, 250, 247, .9) 45%, rgba(250, 250, 247, .78) 62%,
    rgba(250, 250, 247, .5) 78%, rgba(250, 250, 247, .2) 90%, rgba(250, 250, 247, 0) 100%);
}
/* the first appearance is eased, on the stage: opacity on the 3D group itself would flatten it.
   An animation, not a transition (a cached image is ready before the first paint), with its own
   keyframes (sharing the fallback's kept its start time, so the fade was over before it began). */
.js .p3-stage { opacity: 0; animation: p3-show 0s 2.5s forwards; }   /* if site.js never runs, it still shows */
.js .p3-stage.ready { animation: p3-in .6s var(--ease) forwards; }
@keyframes p3-show { to { opacity: 1; } }
@keyframes p3-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .p3-stage.ready { animation-duration: .01s; } }
@media (max-width: 640px) {
  .hero { min-height: 0; padding: 40px 0 44px; }
  .p3-stage { width: 150vw; top: 62%; }
  .hero-veil { width: 100%; height: 100%; top: 0; translate: none; left: 0;
    background: linear-gradient(rgba(250, 250, 247, .9), rgba(250, 250, 247, .88) 75%, rgba(250, 250, 247, .55)); }
  .hero .actions .btn { width: 100%; }
  .hero-trust { display: flex; justify-content: center; }
}

/* ---------- dark strip ---------- */
.strip { background: var(--night); color: var(--on-night); padding: 36px 0; }
.strip-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.strip li { display: flex; gap: 14px; align-items: flex-start; }
.strip .ic { width: 26px; height: 26px; color: var(--honey); margin-top: 2px; }
.strip strong { display: block; font-family: 'Literata', Georgia, serif; font-weight: 500; font-size: var(--t4); line-height: 1.35; }
.strip small { display: block; font-size: var(--t5); color: var(--on-night-soft); line-height: 1.5; }

/* ---------- sections ---------- */
.sec { position: relative; padding: var(--gap) 0; }
.band { background: var(--band); overflow: hidden; }
.two { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.two-text h2 { margin-bottom: 0; }
.rule { display: block; width: 96px; height: 1px; background: var(--honey); margin: 28px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 48px; }
.card { background: var(--paper); border: 1px solid var(--card-line); border-radius: var(--r-lg); padding: 28px; display: flex; flex-direction: column; }
.card-warm { background: var(--card); }
.card h3 { margin-top: 20px; }
.card p { margin-top: 10px; font-size: 16px; color: var(--soft); line-height: 1.6; }
.card p.sample { font-size: var(--t5); color: #6E5126; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; }
.sec-side { max-width: 26em; color: var(--soft); }
.center-head { text-align: center; margin-bottom: 40px; }

/* services cards */
.card-svc, .svc-full { box-shadow: 0 1px 0 rgba(46, 58, 49, .04), 0 10px 24px -18px rgba(46, 58, 49, .25); }
.svc-top { display: flex; justify-content: space-between; align-items: flex-start; }
.svc-for { text-align: right; line-height: 1.2; }
.svc-for small { display: block; font-size: var(--t5); letter-spacing: .14em; color: var(--soft); }
.svc-for span { font-family: 'Literata', Georgia, serif; font-style: italic; font-size: var(--t4); color: var(--honey-text); }
.more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px; min-height: 44px;
  font-size: var(--t5); font-weight: 600; color: var(--deep); text-decoration: none;
}
.more .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.more:hover .ic { transform: translateX(3px); }

/* kids */
.kids {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden;
  padding: clamp(32px, 5vw, 64px); border-radius: var(--r-xl); border: 1px solid var(--card-line);
  background: linear-gradient(135deg, #F6E9D3 0%, #F3F0E4 45%, #DCE7DD 100%);
}
.kids h2 { margin-bottom: 20px; }
.kchips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 28px 0 32px; }
.kchips li {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px; border-radius: 999px;
  background: rgba(250, 250, 247, .7); border: 1px solid rgba(214, 226, 214, .9); font-size: var(--t5); font-weight: 500;
}
.kchips .ic { width: 18px; height: 18px; color: var(--honey-ink); }
.kids-art { position: relative; aspect-ratio: 1; max-width: 420px; width: 100%; justify-self: center; }
/* a light 3D touch: the disc is a plate lit from the top left, raised a little off the card */
.bowl-disc {
  position: absolute; inset: 5%; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #EEF4EE 0%, var(--wash) 46%, #CFDDD1 100%);
  display: flex; align-items: center; justify-content: center; color: var(--paper);
  box-shadow: inset 0 0 0 14px rgba(250, 250, 247, .4), inset 0 -10px 22px rgba(46, 58, 49, .08),
    inset 0 10px 18px rgba(255, 255, 255, .5), 0 26px 40px -26px rgba(46, 58, 49, .45);
}
.bowl { width: 62%; color: var(--deep); }
.tag {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-sm);
  background: var(--paper); font-size: var(--t5); font-weight: 600;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 4px rgba(46, 58, 49, .06), 0 14px 26px -14px rgba(46, 58, 49, .4);
}
/* the near tags float a little higher than the far ones */
.tag-1, .tag-3 { box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 2px 4px rgba(46, 58, 49, .06), 0 20px 32px -14px rgba(46, 58, 49, .45); }
.tag .ic { width: 17px; height: 17px; color: var(--honey-ink); }
.tag-0 { left: 4%; top: 10%; }
.tag-1 { right: 0; top: 24%; }
.tag-2 { left: 0; bottom: 18%; }
.tag-3 { right: 6%; bottom: 8%; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.step-top { display: flex; align-items: center; gap: 14px; color: var(--deep); }
.step-n { font-family: 'Literata', Georgia, serif; font-style: italic; font-size: 30px; line-height: 1; color: var(--honey-ink); }
.step-line { flex: 1; height: 1px; background: rgba(94, 127, 102, .35); }
.step-top .ic { width: 22px; height: 22px; }
.step h3 { margin-top: 20px; }
.step p { margin-top: 10px; color: var(--soft); font-size: 16px; }

/* numbers */
.numbers { background: var(--night); color: var(--on-night); padding: 56px 0; }
.num-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.num-n { font-family: 'Literata', Georgia, serif; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; color: var(--honey); }
.num-l { margin-top: 10px; font-size: var(--t5); color: var(--on-night-soft); }

/* reviews */
.big-quote p { font-family: 'Literata', Georgia, serif; font-style: italic; font-size: clamp(22px, 3.3vw, 48px); line-height: 1.25; max-width: 24em; }
h2.eyebrow { font-family: 'Commissioner', system-ui, sans-serif; letter-spacing: .16em; }
/* the problem the approach answers: in the visitor's words, quieter than the heading */
.ap-problem { margin: 4px 0 16px; max-width: 28em; font-family: 'Literata', Georgia, serif; font-style: italic;
  font-size: var(--t4); line-height: 1.5; color: var(--soft); }
.big-by { margin-top: 16px; font-size: var(--t5); color: var(--soft); }
.rev-grid { margin-top: 48px; }
.rev .quote { width: 26px; height: 20px; color: var(--sage); }
.rev .q1 { color: var(--honey); }
.rev blockquote { margin-top: 16px; flex: 1; }
.rev blockquote p { margin: 0; font-family: 'Literata', Georgia, serif; font-style: italic; font-size: var(--t4); line-height: 1.6; color: var(--ink); }
.rev figcaption { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--card-line); }
.init { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t5); font-weight: 600; background: var(--wash); color: var(--deep); flex: none; }
.init-1 { background: var(--honey-t); color: #6E5126; }
.init-2 { background: var(--sand); color: #6E5126; }
.rev figcaption strong { display: block; font-size: var(--t5); font-weight: 600; line-height: 1.3; }
.rev figcaption small { display: block; font-size: var(--t5); color: var(--soft); line-height: 1.4; }
.rev-google { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }

/* faq */
.faq-list { display: grid; gap: 12px; }
.faq-row { background: var(--paper); border: 1px solid var(--card-line); border-radius: var(--r); }
/* the services page's «Πριν έρθετε»: colours inverted (02/11), white section, light sage rows */
.faq-inv .faq-row { background: var(--card); }
.faq-row h3 { font-family: 'Commissioner', system-ui, sans-serif; font-size: var(--t4); font-weight: 500; }
.faq-row button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px;
  padding: 14px 20px; background: none; border: 0; text-align: left; border-radius: var(--r);
}
.faq-ic { width: 20px; height: 20px; color: var(--honey-ink); transition: transform .25s var(--ease); }
.faq-row.open .faq-ic { transform: rotate(45deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 20px 20px; color: var(--soft); }
.faq-row.open .faq-a { grid-template-rows: 1fr; }
html:not(.js) .faq-a { grid-template-rows: 1fr; }

/* dark cta */
.dark-cta {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
  padding: clamp(36px, 5vw, 64px); border-radius: var(--r-xl); background: var(--night); color: var(--on-night);
}
.dc-ic { width: 32px; height: 32px; color: var(--honey); }
.dark-cta h2 { color: var(--on-night); margin-top: 20px; }
.dark-cta p { margin-top: 20px; color: var(--on-night-soft); max-width: 30em; }
.dc-actions { display: grid; gap: 14px; max-width: 360px; justify-self: end; width: 100%; }
.dc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 24px;
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: var(--t5);
}
.dc-honey { background: var(--honey); color: var(--ink); }
.dc-honey:hover { background: var(--honey-hover); }
.dc-line { border: 1.5px solid rgba(243, 246, 241, .45); color: var(--on-night); }
.dc-line:hover { border-color: var(--on-night); }

/* ---------- the home biography: the three cities cards of the Η Λουκία page ---------- */
/* the approach sits on the sage band: its cards turn paper, like the services cards */
/* light cards on the sage band, like the approach (02/11: the services menu too) */
.approach .card-warm, .svc-menu .svc-full { background: var(--paper); }
.hc-more { margin-top: 32px; }

/* three city cards stay three across down to phones: two plus one left Corfu alone at 768 */
@media (min-width: 641px) and (max-width: 900px) {
  .grid3:has(> .city) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* the tag would wrap over a narrow photo: it steps out under the picture */
  .grid3:has(> .city) .city-tag { position: static; display: inline-block; margin: 14px 10px 0; padding: 0;
    background: none; white-space: nowrap; color: var(--honey-text); }
}
/* on phones the plate keeps turning but its ring of words goes: too small to read, and it ran behind the trust line */
@media (max-width: 640px) {
}

/* ---------- inner page heroes ---------- */
/* Η Λουκία's card: the template's drawing card, no photo */
.portrait .table-draw { width: 54%; color: var(--honey-ink); opacity: .85; margin-bottom: 16%; }
/* the office address opens the map */
.office .office-map { display: inline; margin: 0; min-height: 0; color: var(--on-night-soft); text-decoration: underline;
  text-decoration-color: rgba(217, 161, 91, .6); text-underline-offset: 3px; }
.office .office-map:hover { color: var(--on-night); text-decoration-color: var(--honey); }

/* each inner page opens with its own plate, half out of the right edge, turning very slowly */
/* the badge and title start at the same height on every inner page: top-aligned, not centred
   (centred, each page's text length moved them by up to 60 px, 01/11) */
.phero-plate { min-height: clamp(460px, 44vw, 600px); display: flex; align-items: flex-start; }
.phero-plate > .wrap { width: min(var(--max), 100% - 2 * var(--m)); }
.phero-plate h1 { max-width: min(860px, 60vw); }
.phero-plate .phero-lead { max-width: min(640px, 52vw); }
.pp {
  position: absolute; z-index: 0; top: 50%; right: calc(min(620px, 46vw) * -0.36); width: min(620px, 46vw); aspect-ratio: 1;
  translate: 0 -50%; border-radius: 50%; overflow: hidden; border: 14px solid var(--wash); pointer-events: none;
}
.pp-img { width: 100%; height: 100%; object-fit: cover; animation: pp-turn 90s linear infinite; }
@keyframes pp-turn { to { transform: rotate(360deg); } }
.facts-row { grid-template-columns: repeat(3, max-content); gap: 12px; margin-top: 32px; }
@media (max-width: 900px) {
  .facts-row { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}
@media (max-width: 640px) {
  /* on phones the plate follows the words, half out of the right edge, never under a line of text */
  .phero-plate { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; }
  .phero-plate h1, .phero-plate .phero-lead { max-width: none; }
  .phero-plate > .wrap { order: 1; }
  .pp { order: 2; position: relative; top: auto; right: auto; translate: none; align-self: flex-end;
    width: 66vw; margin: 32px -18vw -18vw 0; border-width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-img { animation: none; }
}

.phero { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); }
.phero-center { text-align: center; }
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; margin-bottom: 24px;
  background: var(--honey-t); border: 1px solid rgba(217, 161, 91, .45); color: #6E5126;
  font-size: var(--t5); font-weight: 600; letter-spacing: .02em;
}
.badge .ic { width: 16px; height: 16px; }
.phero-lead { max-width: 36em; margin-top: 24px; color: var(--soft); font-size: var(--t4); }
.phero-center .phero-lead { margin-inline: auto; }
.phero .wrap { position: relative; }
.phero-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; align-items: center; }
.facts { display: grid; gap: 12px; }
.fact { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r); background: var(--card); border: 1px solid var(--card-line); font-family: 'Literata', Georgia, serif; font-size: var(--t5); }
.fact .ic { color: var(--honey-ink); }
.fact small { display: block; font-family: 'Commissioner', system-ui, sans-serif; font-size: var(--t5); letter-spacing: .06em; color: var(--soft); }

/* about */
.two-photo { grid-template-columns: 5fr 7fr; align-items: center; }
.portrait { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--card-line);
  background: linear-gradient(160deg, #DCE7DD 0%, #F3F0E4 55%, #F4E5CB 100%); }
.portrait-field { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.portrait-ic { width: 72px; height: 72px; color: var(--sage); opacity: .7; }
.sample-chip { margin-top: 0; }
.portrait-card {
  position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 16px 20px; border-radius: var(--r);
  background: rgba(250, 250, 247, .92); border: 1px solid var(--card-line);
}
.portrait-card small { display: block; font-size: var(--t5); letter-spacing: .02em; color: var(--soft); }
.portrait-card span { display: block; margin-top: 4px; font-family: 'Literata', Georgia, serif; font-style: italic; font-size: var(--t4); }
.origin h2 { margin-bottom: 24px; }
.h2-narrow { max-width: 14em; }
.principle h3 { color: var(--honey-text); font-style: italic; }
.principle p { margin-top: 8px; }
.city { padding: 14px 14px 24px; }
.city h3, .city p { padding-inline: 10px; }
.city-photo { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.city-photo img { width: 100%; height: 100%; object-fit: cover; }
.city { position: relative; }
.city-tag {
  position: absolute; top: 26px; right: 26px; padding: 4px 10px; border-radius: 999px; background: rgba(250, 250, 247, .92);
  font-size: var(--t5); font-weight: 600; letter-spacing: .04em; color: var(--deep);
}
.dark-sec { background: var(--night); color: var(--on-night); }
/* Η Λουκία, as a story */
.why-note { margin-top: 20px; }
/* the rest of her training: a small chapter under the cities, ruled like the hours list */
.route-also { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px 48px; margin-top: 48px;
  padding-top: 32px; border-top: 1px solid rgba(46, 58, 49, .16); }
.route-also h3 { font-family: 'Literata', Georgia, serif; font-weight: 400; font-size: var(--t3); line-height: 1.2; color: var(--ink); }
.route-also p { margin-top: 10px; font-size: var(--t5); color: var(--soft); }
.route-also li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0;
  border-bottom: 1px solid rgba(46, 58, 49, .16); }
.route-also li:first-child { padding-top: 0; }
.ra-n { font-family: 'Literata', Georgia, serif; font-size: 18px; color: var(--ink); }
.ra-k { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--honey-text); }
@media (max-width: 900px) {
  .route-also { grid-template-columns: 1fr; margin-top: 36px; }
  .route-also li { flex-direction: column-reverse; gap: 4px; }
}
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.theme { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-xl); border: 1px solid var(--card-line); }
.theme-0 { background: linear-gradient(150deg, #F6E9D3 0%, #F7F3EA 70%); }
.theme-1 { background: linear-gradient(150deg, #DCE7DD 0%, #F1F4EE 70%); }
/* the theme's icon, large and faint in the corner: the only ornament */
.theme-mark { position: absolute; top: -18px; right: -18px; width: 150px; height: 150px; stroke-width: 1;
  color: var(--honey-ink); opacity: .16; }
.theme-1 .theme-mark { color: var(--deep); }
.theme h3 { position: relative; max-width: 11em; padding-right: clamp(64px, 8vw, 110px); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.15; }
.theme-1 h3 { color: var(--deep); }
.theme-text { position: relative; margin-top: 20px; max-width: 30em; color: var(--ink); line-height: 1.6; }
.theme .more { margin-top: auto; padding-top: 24px; }
@media (max-width: 900px) { .themes { grid-template-columns: 1fr; } }
.about-quote .big-quote p { color: var(--on-night); }
.about-quote .big-by { display: flex; align-items: center; gap: 10px; color: var(--on-night-soft); }
.dark-sec h2 { color: var(--on-night); }
.dark-sec .eyebrow { color: var(--honey); }
.soft-cta {
  text-align: center; max-width: 880px; margin-inline: auto; padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px);
  border-radius: var(--r-xl); border: 1px solid var(--card-line);
  background: linear-gradient(120deg, #F4E5CB 0%, #EEF3EC 50%, #DCE7DD 100%);
}
.soft-cta h2 { margin-top: 0; }
.soft-cta p { margin: 16px auto 32px; max-width: 32em; color: var(--soft); }
/* on the sage band (Υπηρεσίες) the card is warm cream fading to paper: its usual gradient ends in
   sage and melted into the band (02/11) */
.band .soft-cta { background: linear-gradient(120deg, #F3E1C2 0%, #F8F1E4 55%, var(--paper) 100%); border-color: #EADCC3;
  box-shadow: 0 24px 48px -32px rgba(46, 58, 49, .45); }
.soft-cta .eyebrow { margin: 0 0 16px; max-width: none; color: var(--honey-text); }   /* the section eyebrow, as everywhere */

/* services page */
.tabs { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px; background: var(--card); border: 1px solid var(--card-line); margin-bottom: 32px; }
.tab { min-height: 44px; padding: 8px 20px; border: 0; border-radius: 999px; background: none; font-size: var(--t5); font-weight: 600; color: var(--soft); }
.tab[aria-selected="true"] { background: var(--honey); color: var(--ink); }
/* on the services menu's sage band the strip of tabs is light, like its cards (02/11) */
.svc-menu .tabs { background: var(--paper); }
.svc-menu .tab:hover:not([aria-selected="true"]) { background: var(--card); }   /* hover still shows on the light strip */
.tab:hover:not([aria-selected="true"]) { color: var(--ink); background: var(--paper); }
.panel + .panel { margin-top: 48px; }
.js .panel + .panel { margin-top: 0; }
.panel-h { font-size: var(--t3); margin-bottom: 20px; }
.js .panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.grid2-wide { gap: 20px; }
.svc-full h3 { margin-top: 20px; }

/* contact page */
.con { padding-top: 0; }
/* Επικοινωνία (02/11): the form's section is on the sage band, and the form with its side column is
   lifted onto the hero's foot. The band starts where the hero ends, so the cards' tops sit on the
   hero's white and the rest on the green. */
.phero-lift { padding-bottom: calc(clamp(40px, 5vw, 72px) + var(--lift)); }
.phero-lift, .phero-lift + .con { --lift: clamp(56px, 6vw, 88px); }
.phero-lift + .con { position: relative; z-index: 2; margin-top: calc(-1 * var(--lift));
  background: linear-gradient(to bottom, transparent var(--lift), var(--band) var(--lift)); }
.phero-lift + .con .form, .phero-lift + .con .hours, .phero-lift + .con .small-card { background: var(--paper); }
.phero-lift + .con .form, .phero-lift + .con .office, .phero-lift + .con .hours { box-shadow: 0 20px 40px -28px rgba(46, 58, 49, .4); }
@media (max-width: 640px) { .phero-lift, .phero-lift + .con { --lift: 44px; } }
/* the form and the side column end on one line: both stretch to the taller one, and in the side
   column the hours card takes up the difference */
.con-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: stretch; }
.form { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 40px); background: var(--card); }
.form .field-msg { flex: 1; display: flex; flex-direction: column; }
.form .field-msg textarea { flex: 1; }
.form .btn { align-self: flex-start; }
.form .eyebrow { margin-bottom: 8px; }
.form-h { font-size: var(--t3); margin-bottom: 24px; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field label { font-size: var(--t5); font-weight: 600; }
.req { color: var(--honey-text); margin-left: 2px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border-radius: var(--r-sm); border: 1px solid #B9CBBB;
  background: var(--paper); font-size: 16px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--deep); outline-offset: 1px; }
.form .btn { margin-top: 8px; }
.form-note { margin-top: 16px; font-size: var(--t5); color: var(--soft); }
.form-done { margin-top: 8px; font-size: var(--t5); font-weight: 600; color: var(--deep); }
.form-done:empty { display: none; }
.con-side { display: flex; flex-direction: column; gap: 20px; }
.con-side .hours { flex: 1; display: flex; flex-direction: column; }
.office { position: relative; overflow: hidden; padding: 32px; border-radius: var(--r-lg); background: var(--night); color: var(--on-night); }
.office-ic { width: 28px; height: 28px; color: var(--honey); }
.office h2, .hours h2 { font-size: var(--t3); margin-top: 16px; color: inherit; }
.office ul { display: grid; gap: 14px; margin-top: 20px; font-size: var(--t5); }
.office li { display: flex; gap: 12px; align-items: flex-start; color: var(--on-night-soft); }
.office li .ic { color: var(--honey); width: 18px; height: 18px; margin-top: 2px; }
.office a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; color: var(--on-night); text-decoration: none; overflow-wrap: anywhere; }
.office a:hover { text-decoration: underline; }
.office strong { color: var(--on-night); font-weight: 600; }
.hours { padding: 32px; }
.hours-ic { width: 26px; height: 26px; color: var(--honey-ink); }
.hours ul { margin-top: 16px; }
.hours li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--card-line); font-size: var(--t5); }
.h-time { flex: none; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.smalls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.small-card {
  /* the icon beside its words, two short actions side by side on every screen */
  display: flex; align-items: center; gap: 10px; padding: 14px 18px; min-height: 56px; border-radius: var(--r);
  border: 1px solid var(--card-line); background: var(--paper); text-decoration: none; font-weight: 600; font-size: var(--t5);
}
.small-card .ic { flex: none; color: var(--honey-ink); }
.small-card:hover { border-color: var(--sage); }
.two-map { grid-template-columns: 1fr 1fr; align-items: center; }
.find h2 { margin-bottom: 20px; }
.find .kchips { display: flex; flex-wrap: wrap; margin-bottom: 0; }
.find .kchips li { white-space: nowrap; }
.map-tile {
  position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--card-line);
  background:
    linear-gradient(rgba(94, 127, 102, .35) 1px, transparent 1px) 0 0 / 33.33% 33.33%,
    linear-gradient(90deg, rgba(94, 127, 102, .35) 1px, transparent 1px) 0 0 / 33.33% 33.33%,
    linear-gradient(135deg, #DCE7DD 0%, #F3F0E4 50%, #F4E5CB 100%);
  text-decoration: none;
}
.map-badge {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px;
  background: rgba(250, 250, 247, .9); font-size: var(--t5); font-weight: 600; letter-spacing: .06em; color: var(--soft);
}
.map-badge .ic { width: 15px; height: 15px; }
.map-pin {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 22px; border-radius: var(--r); background: var(--paper); box-shadow: 0 12px 28px -16px rgba(46, 58, 49, .45); text-align: center;
}
.map-pin .ic { width: 26px; height: 26px; color: var(--honey-ink); }
.map-pin strong { font-family: 'Literata', Georgia, serif; font-weight: 500; font-size: var(--t4); }
.map-pin small { font-size: var(--t5); color: var(--soft); }
.map-tile:hover .map-pin { box-shadow: 0 16px 32px -14px rgba(46, 58, 49, .55); }

/* ---------- footer ---------- */
.foot { background: var(--night); color: var(--on-night-soft); padding: 72px 0 32px; font-size: var(--t5); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand p { margin-top: 20px; max-width: 24em; }
.foot-addr strong { color: var(--on-night); font-weight: 600; }
.foot-h { font-family: 'Literata', Georgia, serif; font-size: var(--t4); font-weight: 500; color: var(--on-night); margin-bottom: 16px; }
.foot-list { display: grid; gap: 4px; }
.foot-list a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.foot-list a:hover { color: var(--on-night); text-decoration: underline; }
.foot-hours span:last-child { color: var(--on-night); font-variant-numeric: tabular-nums; }
.foot-degree { margin-top: 24px; padding-top: 20px; border-top: 1px dotted rgba(243, 246, 241, .35); }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(243, 246, 241, .14); }

/* ---------- phone dock ---------- */
.dock { display: none; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; opacity: 0; z-index: 60; padding: 12px 20px; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-size: var(--t5); transition: opacity .25s, translate .25s; pointer-events: none; }
.toast.show { opacity: 1; translate: -50% 0; }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0s !important; }
}

/* ---------- responsive ---------- */
/* the full menu needs 958px of row, which the wrap only gives from about 1155 up; below that it
   shrank and «Η Λουκία» broke onto two lines (04/11). Keep this in step with site.js. */
@media (max-width: 1160px) {
  .nav, .site-head .btn { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 1080px) {
  .grid5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  :root { --head-h: 64px; }
  .two, .two-photo, .two-map, .phero-split, .con-grid, .kids, .dark-cta { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .strip-row, .num-row { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .who { grid-template-columns: 1fr; max-width: 420px; }
  .dc-actions { justify-self: start; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .portrait { max-width: 480px; }
  .sec-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  body { font-size: 17px; padding-bottom: 72px; }
  .lk-name { font-size: 19px; }
  .lk-rule { height: 26px; }
  .lk-role { font-size: 9px; letter-spacing: .18em; }
  .lockup { gap: 10px; min-width: 0; }
  .head-row { gap: 12px; }
  .hero { text-align: left; }
  .hero-meta { justify-content: flex-start; }
  .hero-lead { margin-left: 0; }
  .actions.center { justify-content: flex-start; }
  .actions .btn { width: 100%; }
  .who { margin-left: 0; }
  .trust { justify-content: flex-start; margin-left: 0; flex-direction: column; gap: 10px; }
  .ring { left: 80%; }
  .grid2, .grid3, .grid5, .kchips, .field-row { grid-template-columns: 1fr; }
  /* call and map stay side by side under the hours: two short actions, one row */
  .smalls { gap: 10px; }
  .small-card { padding: 12px; gap: 8px; }
  .strip-row, .num-row, .steps { grid-template-columns: 1fr; }
  .center-head, .phero-center { text-align: left; }
  .phero-center .phero-lead { margin-left: 0; }
  .sample.center { margin-left: 0; }
  .kids-art { max-width: 320px; }
  .foot-grid { grid-template-columns: 1fr; }
  .soft-cta { text-align: left; }
  .soft-cta .actions.center { justify-content: flex-start; }
  .card { padding: 24px; }
  .kids { padding: 28px 20px; }
  .dark-cta { padding: 32px 20px; }
  .dc-btn { padding: 12px 18px; }
  .dock {
    display: grid; grid-template-columns: auto 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(250, 250, 247, .96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--card-line); transition: transform .3s var(--ease);
  }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: var(--t5); }
  .dock-call { background: var(--wash); color: var(--deep); }
  .dock-cta { background: var(--honey); color: var(--ink); }
  .dock.away { transform: translateY(110%); }
  /* the header leaves on scroll down and returns on the first scroll up */
  .site-head { transition: transform .3s var(--ease); }
  .site-head.head-hide { transform: translateY(-100%); }
}
@media (max-width: 380px) {
  .site-head .lk-rule, .site-head .lk-role { display: none; }
}

/* ---------- phone and tablet pass (31/10): each screen composed, not just stacked ---------- */
@media (max-width: 900px) {
  /* Η Λουκία's drawing card: a wide band on tablets instead of a tall card beside nothing */
  .two-photo .portrait { aspect-ratio: 16 / 9; max-width: none; width: 100%; }
  .two-photo .portrait .table-draw { width: 30%; margin-bottom: 9%; }
}
@media (max-width: 640px) {
  /* services tabs: one row that scrolls, never a pill broken over two lines */
  .tabs { display: flex; flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; border-radius: 999px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; white-space: nowrap; padding: 8px 16px; }
  /* cards: the icon beside the title, not above it, so a list of cards stays short */
  .approach .card, .svc-sec .card-svc, .svc-full, .principle {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 20px;
  }
  .approach .card .tile, .svc-full > .tile, .principle .tile { width: 44px; height: 44px; grid-row: 1 / span 3; }
  .svc-sec .card-svc .svc-top { grid-row: 1 / span 4; display: block; }
  .svc-sec .card-svc .svc-for { display: none; }
  .approach .card h3, .svc-sec .card-svc h3, .svc-full h3, .principle h3 { margin-top: 8px; grid-column: 2; }
  .approach .card p, .svc-sec .card-svc p, .svc-full p, .principle p { grid-column: 2; margin-top: 6px; }
  .svc-sec .card-svc .more, .svc-full .btn-chip { grid-column: 2; margin-top: 12px; }
  .approach .grid2, .svc-sec .grid3, .svc-menu .grid2 { gap: 12px; }
  /* numbers: two by two */
  .num-row { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .num-n { font-size: 44px; }
  /* kids: the bowl smaller, it is a picture, not a screen */
  .kids-art { max-width: 250px; }
  /* contact map: square, so the studio card never covers the city badge */
  .map-tile { aspect-ratio: 1; }
  .map-pin { padding: 12px 16px; }
}
@media (max-width: 640px) {
  /* Η Λουκία's drawing card on phones: tall enough that the quote card never covers the drawing */
  .two-photo .portrait { aspect-ratio: 1; }
  .two-photo .portrait .table-draw { width: 46%; margin-bottom: 34%; }
  /* services tabs: three equal buttons across the width, a long label may take two lines inside its own button */
  .tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; border-radius: 18px; }
  .tab { white-space: normal; line-height: 1.2; min-height: 48px; padding: 6px 8px; border-radius: 14px; text-align: center; }
  /* inner pages: the plate small, peeking from the top-right corner, half off the screen, beside the
     badge and above the title. It takes no room: centred above the title it pushed every page down
     about 270 px and the contact form below the first screen (01/11) */
  .pp { position: absolute; top: -26px; right: -13vw; width: 36vw; margin: 0; border-width: 6px; translate: none; }
  .phero-plate > .wrap { position: relative; z-index: 1; }
}