/* =========================================================
   VROUVAS
   Forest green, linen paper, antique gold. Natural light,
   engraved seal, torn-paper edges. Calm and grounded.
   ========================================================= */

:root {
  --forest: #15302a;
  --forest-2: #1d3f37;
  --forest-ink: #0f241f;
  --forest-rgb: 21, 48, 42;
  --ink-rgb: 15, 36, 31;
  --shade-rgb: 10, 24, 20;
  --sage: #6f8268;
  --sage-2: #62755c;
  --linen: #f2ede2;
  --paper: #faf8f3;
  --charcoal: #1c1d1b;

  --ink: #1f2b27;
  --ink-soft: #4f5c56;
  --gold: #b8914b;
  --gold-light: #dcc38e;
  --gold-text: #8a6a2f;
  --on-dark: #f4f0e6;
  --on-dark-soft: #c9d1c6;

  --serif: "EB Garamond", Garamond, Georgia, serif;
  --sans: "Commissioner", "Segoe UI", system-ui, sans-serif;

  --wrap: 1140px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --rough-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.0,2.1 L2.5,2.1 L5.0,0.1 L7.5,0.2 L10.0,1.8 L12.5,1.6 L15.0,1.5 L17.5,0.7 L20.0,1.3 L22.5,1.3 L25.0,1.3 L27.5,0.3 L30.0,0.9 L32.5,0.9 L35.0,1.6 L37.5,2.2 L40.0,2.1 L42.5,1.2 L45.0,1.0 L47.5,0.6 L50.0,0.1 L52.5,0.1 L55.0,1.0 L57.5,0.7 L60.0,0.8 L62.5,2.0 L65.0,1.2 L67.5,1.2 L70.0,0.5 L72.5,0.1 L75.0,0.7 L77.5,0.3 L80.0,1.1 L82.5,2.2 L85.0,1.5 L87.5,0.4 L90.0,2.0 L92.5,1.8 L95.0,1.6 L97.5,2.0 L100.0,1.7 L98.6,2.5 L99.4,5.0 L98.2,7.5 L98.3,10.0 L99.7,12.5 L98.6,15.0 L98.7,17.5 L99.2,20.0 L99.0,22.5 L99.1,25.0 L98.3,27.5 L99.1,30.0 L98.5,32.5 L99.4,35.0 L98.4,37.5 L98.4,40.0 L99.2,42.5 L99.0,45.0 L98.3,47.5 L98.7,50.0 L99.1,52.5 L99.6,55.0 L99.4,57.5 L98.7,60.0 L99.7,62.5 L98.4,65.0 L99.5,67.5 L98.4,70.0 L99.4,72.5 L98.3,75.0 L98.7,77.5 L99.1,80.0 L99.1,82.5 L98.8,85.0 L98.9,87.5 L99.4,90.0 L99.6,92.5 L99.1,95.0 L98.3,97.5 L98.9,100.0 L97.5,99.8 L95.0,98.2 L92.5,98.4 L90.0,98.0 L87.5,99.6 L85.0,98.4 L82.5,99.9 L80.0,98.6 L77.5,99.4 L75.0,99.5 L72.5,98.1 L70.0,99.8 L67.5,98.9 L65.0,98.1 L62.5,99.5 L60.0,99.5 L57.5,98.1 L55.0,99.1 L52.5,98.4 L50.0,99.9 L47.5,99.2 L45.0,99.6 L42.5,98.5 L40.0,99.8 L37.5,97.9 L35.0,99.9 L32.5,98.4 L30.0,100.0 L27.5,99.4 L25.0,98.2 L22.5,99.7 L20.0,99.6 L17.5,98.5 L15.0,99.2 L12.5,99.9 L10.0,97.8 L7.5,99.7 L5.0,99.9 L2.5,99.2 L0.0,98.6 L1.3,97.5 L0.2,95.0 L0.6,92.5 L0.1,90.0 L0.8,87.5 L1.4,85.0 L1.3,82.5 L1.6,80.0 L1.4,77.5 L1.6,75.0 L1.3,72.5 L0.9,70.0 L0.4,67.5 L1.2,65.0 L0.6,62.5 L0.2,60.0 L0.8,57.5 L1.6,55.0 L0.2,52.5 L1.1,50.0 L0.7,47.5 L0.9,45.0 L0.3,42.5 L1.7,40.0 L0.5,37.5 L1.1,35.0 L0.8,32.5 L0.0,30.0 L1.0,27.5 L0.3,25.0 L0.1,22.5 L0.1,20.0 L0.3,17.5 L0.2,15.0 L1.1,12.5 L0.9,10.0 L1.8,7.5 L1.7,5.0 L1.8,2.5Z'/%3E%3C/svg%3E");
  --rough-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.0,1.4 L2.5,1.6 L5.0,1.7 L7.5,2.1 L10.0,1.6 L12.5,2.0 L15.0,0.1 L17.5,1.0 L20.0,2.1 L22.5,1.4 L25.0,2.0 L27.5,0.2 L30.0,1.0 L32.5,0.5 L35.0,1.2 L37.5,1.3 L40.0,0.0 L42.5,0.5 L45.0,0.6 L47.5,2.0 L50.0,1.7 L52.5,0.4 L55.0,1.8 L57.5,0.3 L60.0,1.4 L62.5,0.3 L65.0,0.0 L67.5,1.9 L70.0,0.5 L72.5,0.5 L75.0,2.2 L77.5,1.9 L80.0,0.6 L82.5,2.1 L85.0,1.2 L87.5,1.5 L90.0,0.5 L92.5,2.1 L95.0,1.5 L97.5,2.1 L100.0,2.0 L99.5,2.5 L99.3,5.0 L99.7,7.5 L99.7,10.0 L99.9,12.5 L99.5,15.0 L98.9,17.5 L100.0,20.0 L98.8,22.5 L99.4,25.0 L99.4,27.5 L98.5,30.0 L99.1,32.5 L99.4,35.0 L99.1,37.5 L98.7,40.0 L99.9,42.5 L98.2,45.0 L100.0,47.5 L98.7,50.0 L98.5,52.5 L100.0,55.0 L98.6,57.5 L99.3,60.0 L99.0,62.5 L100.0,65.0 L99.9,67.5 L99.7,70.0 L98.3,72.5 L99.6,75.0 L98.6,77.5 L98.3,80.0 L98.3,82.5 L99.4,85.0 L99.4,87.5 L99.1,90.0 L98.6,92.5 L99.8,95.0 L98.7,97.5 L98.6,100.0 L97.5,98.1 L95.0,99.9 L92.5,97.9 L90.0,99.8 L87.5,99.3 L85.0,98.7 L82.5,98.0 L80.0,99.3 L77.5,98.0 L75.0,98.8 L72.5,99.3 L70.0,99.3 L67.5,99.6 L65.0,99.8 L62.5,99.7 L60.0,98.5 L57.5,97.8 L55.0,99.6 L52.5,99.9 L50.0,97.8 L47.5,98.8 L45.0,99.1 L42.5,99.5 L40.0,98.7 L37.5,98.2 L35.0,99.0 L32.5,99.1 L30.0,99.9 L27.5,98.0 L25.0,99.9 L22.5,98.9 L20.0,98.2 L17.5,99.7 L15.0,98.4 L12.5,97.9 L10.0,98.6 L7.5,98.3 L5.0,99.8 L2.5,99.0 L0.0,99.7 L1.5,97.5 L0.5,95.0 L0.8,92.5 L1.8,90.0 L1.5,87.5 L1.8,85.0 L0.8,82.5 L0.9,80.0 L1.3,77.5 L0.9,75.0 L0.5,72.5 L0.7,70.0 L0.3,67.5 L0.7,65.0 L1.8,62.5 L1.7,60.0 L1.1,57.5 L0.9,55.0 L0.6,52.5 L0.2,50.0 L0.5,47.5 L1.4,45.0 L1.6,42.5 L0.7,40.0 L1.4,37.5 L1.4,35.0 L1.3,32.5 L1.2,30.0 L1.4,27.5 L0.7,25.0 L1.3,22.5 L0.5,20.0 L0.9,17.5 L1.4,15.0 L1.2,12.5 L0.5,10.0 L1.7,7.5 L1.2,5.0 L1.0,2.5Z'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* language switching */
html[data-lang="el"] body [lang="en"],
html[data-lang="en"] body [lang="el"] { display: none !important; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--linen); color: var(--ink);
  font: 400 17px/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 500; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
::selection { background: var(--gold-light); color: var(--forest-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--gold); color: #fff; padding: 8px 14px; }
.skip:focus { left: 8px; }
.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.wrap--narrow { width: min(800px, 100% - 48px); }

/* ---------- the seal: engraved (styled through the symbol) ---------- */
#seal { color: inherit; }
.seal__line { fill: none; stroke: currentColor; stroke-width: 1.2; }
.seal__line--thin { stroke-width: .5; }
.seal__line--hair { stroke-width: .35; }
.seal__line--arm { stroke-width: .9; stroke-linecap: round; }
.seal__line--quill { stroke-width: .55; stroke-linecap: round; }
.seal__text { fill: currentColor; font: 500 10.5px var(--serif); letter-spacing: .5px; }
.seal__ink { fill: currentColor; }
.seal__rays { fill: currentColor; opacity: .85; }
.seal__core { fill: var(--seal-core, var(--forest)); stroke: currentColor; stroke-width: 1; }
.seal__feather { fill: var(--seal-core, var(--forest)); stroke: currentColor; stroke-width: .5; stroke-linejoin: round; }
.seal__hatch { fill: none; stroke: currentColor; stroke-width: .38; stroke-linecap: round; }
.seal__flame { fill: currentColor; }
.seal__flame-light { fill: var(--seal-core, var(--forest)); }
.seal__hatch--fine { stroke-width: .3; opacity: .8; }
.seal__hatch--flame { stroke-width: .32; }
.seal__hatch--dark { stroke: var(--seal-core, var(--forest)); stroke-width: .42; }
.seal__clear { fill: var(--seal-core, var(--forest)); }
.seal__hatch--glow { stroke-width: .3; opacity: .85; }
.seal__hatch--faint { stroke-width: .3; opacity: .7; }
.seal__wick { fill: none; stroke: var(--seal-core, var(--forest)); stroke-width: .75; stroke-linecap: round; }
#wing path { stroke: var(--w-stroke, currentColor); stroke-width: var(--w-sw, .9); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
#wing .f1 { fill: var(--w1, var(--seal-core, var(--forest))); }
#wing .f2 { fill: var(--w2, var(--seal-core, var(--forest))); }
#wing .f3 { fill: var(--w3, var(--seal-core, var(--forest))); }
#wing .arm { fill: none; }

.mini-seal { width: 58px; height: 58px; margin: 0 auto 18px; color: var(--gold); --seal-core: var(--linen); }
.section--paper .mini-seal { --seal-core: var(--paper); }
.mini-seal--left { margin-left: 0; }
.mini-seal--light { color: var(--gold-light); --seal-core: var(--forest); }

/* ---------- type ---------- */
.h2 { font: 500 clamp(32px, 4vw, 46px)/1.15 var(--serif); color: var(--ink); letter-spacing: -.005em; }
.h2--light { color: var(--on-dark); }
.h3 { font: 500 clamp(30px, 3.2vw, 38px)/1.15 var(--serif); }
.sub { margin: 10px 0 0; font: italic 400 clamp(19px, 1.8vw, 22px)/1.4 var(--serif); color: var(--ink-soft); }
.sub--light { color: var(--on-dark-soft); }
.kicker { margin: 0 0 10px; font: 500 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); }
.kicker--light { color: var(--gold-light); }
.ornament { margin: 14px 0 0; color: var(--gold); letter-spacing: .5em; font-size: 11px; }
.ornament--light { color: var(--gold-light); }
.head { text-align: center; margin: 0 auto 56px; max-width: 720px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; border: 1px solid transparent; border-radius: 2px;
  font: 500 13.5px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s, transform .3s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn--green { background: var(--forest); color: var(--on-dark); }
.btn--green:hover { background: var(--forest-2); }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #a6813e; }
.btn--outline-light { border-color: rgba(244, 240, 230, .75); color: var(--on-dark); background: rgba(0, 0, 0, .08); }
.btn--outline-light:hover { background: var(--on-dark); color: var(--forest); }
.btn--block { width: 100%; }

/* ---------- topbar + nav ---------- */
.topbar b { font-weight: inherit; }
.m-only { display: none; }
.topbar { background: var(--gold); color: #fff; text-align: center; font: 500 12.5px/1 var(--sans); letter-spacing: .06em; padding: 9px 12px; }
.nav {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 clamp(20px, 4vw, 48px); height: 66px;
  background: var(--forest); color: var(--on-dark);
  box-shadow: 0 1px 0 rgba(220, 195, 142, .18);
}
.nav__side { display: flex; align-items: center; gap: clamp(16px, 2.2vw, 30px); }
.nav__side--right { justify-content: flex-end; }
.nav__side a, .lang button {
  font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-dark-soft); text-decoration: none; transition: color .3s;
}
.nav__side a:hover { color: var(--gold-light); }
.nav__brand { font: 500 25px/1 var(--serif); letter-spacing: .3em; text-decoration: none; padding-left: .3em; }
.nav__cta { padding: 10px 16px; border: 1px solid rgba(220, 195, 142, .6); color: var(--gold-light) !important; }
.nav__cta:hover { background: var(--gold); border-color: var(--gold); color: #fff !important; }
.lang { display: flex; gap: 6px; align-items: center; color: rgba(244, 240, 230, .4); font-size: 12px; }
.lang button { background: none; border: 0; padding: 4px 2px; cursor: pointer; opacity: .65; }
.lang button[aria-pressed="true"] { opacity: 1; color: var(--gold-light); }
.nav__burger { display: none; justify-self: end; width: 40px; height: 40px; background: none; border: 0; cursor: pointer; position: relative; }
.nav__burger span { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--on-dark); transition: transform .35s var(--ease), top .35s var(--ease); }
.nav__burger span:first-child { top: 15px; }
.nav__burger span:last-child { top: 24px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 20px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 20px; transform: rotate(-45deg); }
.mobile-menu { display: none; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: calc(100vh - 100px); min-height: calc(100svh - 100px);
  display: grid; place-items: center; text-align: center;
  padding: 80px 24px 120px; color: var(--on-dark); overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: slowzoom 30s ease-out forwards; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(var(--ink-rgb), .25), rgba(var(--ink-rgb), .7)),
    linear-gradient(180deg, rgba(var(--ink-rgb), .55), rgba(var(--ink-rgb), .35) 40%, rgba(var(--ink-rgb), .75));
}
.hero__inner { max-width: 820px; }
.hero__seal { width: clamp(120px, 14vw, 168px); height: auto; aspect-ratio: 1; margin: 0 auto 28px; color: var(--on-dark); --seal-core: rgba(var(--ink-rgb), .65); filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .35)); }
.hero__seal .seal__rays { transform-origin: center; }
.hero__title { font: 500 clamp(44px, 6.4vw, 84px)/1.05 var(--serif); letter-spacing: -.01em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero__sub { margin: 14px 0 0; font: italic 400 clamp(22px, 2.6vw, 32px)/1.3 var(--serif); color: var(--gold-light); }
.hero__lead { margin: 22px auto 0; max-width: 46ch; font-size: 17px; color: var(--on-dark-soft); }
.hero__actions { margin-top: 34px; }
@keyframes slowzoom { to { transform: scale(1); } }

/* torn paper edges */
.tear { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 42px; fill: var(--linen); pointer-events: none; z-index: 2; }
.tear--top { top: -41px; bottom: auto; fill: var(--forest); }
.tear--top.tear--sage { fill: var(--linen); }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(80px, 10vw, 130px) 0; }
.section--linen { background: var(--linen) var(--grain); }
.section--paper { background: var(--paper) var(--grain); }
.section--forest { background: var(--forest) var(--grain); color: var(--on-dark); }
.section--sage { background: var(--sage) var(--grain); color: var(--on-dark); }

/* rough (torn) photo frames */
.rough { margin: 0; -webkit-mask: var(--rough-a) center / 100% 100% no-repeat; mask: var(--rough-a) center / 100% 100% no-repeat; }
.rough--b { -webkit-mask-image: var(--rough-b); mask-image: var(--rough-b); }
.rough img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- welcome ---------- */
.welcome { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 7vw, 96px); align-items: center; }
.welcome__photo { aspect-ratio: 5 / 6; }
.welcome__text .h2 { margin-bottom: 0; }
.welcome__text .sub { margin-bottom: 26px; }
.welcome__text p:not(.sub) { color: var(--ink-soft); }
.welcome__text div p:last-child { font: italic 400 21px/1.4 var(--serif); color: var(--gold-text); margin-top: 20px; }

/* ---------- tiles (help) ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile { position: relative; display: block; aspect-ratio: 4 / 4.6; overflow: hidden; text-decoration: none; color: var(--on-dark); background: var(--forest); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ink-rgb), 0) 35%, rgba(var(--ink-rgb), .88)); transition: background .5s; }
.tile:hover img { transform: scale(1.05); }
.tile__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 26px 26px 24px; display: block; }
.tile__title { display: block; font: italic 500 27px/1.15 var(--serif); color: var(--gold-light); }
.tile__text { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--on-dark); }

/* ---------- services ---------- */
.service { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.service + .service { margin-top: clamp(70px, 9vw, 110px); }
.service--flip .service__photo { order: 2; }
.service__photo { aspect-ratio: 11 / 8.5; }
.service__text .sub { margin-bottom: 20px; }
.service__text p:not(.sub):not(.kicker) { color: var(--ink-soft); }
.list { list-style: none; margin: 22px 0 30px; padding: 18px 0 0; border-top: 1px solid rgba(138, 106, 47, .25); font-size: 15px; color: var(--ink-soft); }
.list li { position: relative; padding-left: 22px; margin: 6px 0; }
.list li::before { content: "✦"; position: absolute; left: 0; top: 1px; font-size: 10px; color: var(--gold); }

/* ---------- angel ---------- */
.angel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.letter {
  position: relative; margin: 0; padding: 70px 52px 40px;
  background: #f6efdf var(--grain); color: #3a3428;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .6);
  transform: rotate(-1.5deg);
  -webkit-mask: var(--rough-b) center / 100% 100% no-repeat; mask: var(--rough-b) center / 100% 100% no-repeat;
}
.letter__seal { position: absolute; top: 22px; right: 26px; width: 64px; height: 64px; color: rgba(138, 106, 47, .75); --seal-core: #f6efdf; }
.letter blockquote { margin: 0; font: italic 400 clamp(22px, 2.2vw, 27px)/1.6 var(--serif); }
.ink-line { display: block; }
.ink-line > span { display: inline-block; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.5, .1, .3, 1); }
.letter.is-writing .ink-line > span { clip-path: inset(0 0 0 0); }
.letter figcaption { margin-top: 24px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8d826b; }
.steps { list-style: none; margin: 34px 0 36px; padding: 0; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid rgba(220, 195, 142, .2); }
.steps li:last-child { border-bottom: 1px solid rgba(220, 195, 142, .2); }
.steps__n { font: italic 500 24px/1.2 var(--serif); color: var(--gold-light); }
.steps h3 { font: 500 23px/1.25 var(--serif); margin-bottom: 4px; }
.steps p { font-size: 15.5px; color: var(--on-dark-soft); }

/* ---------- moon ---------- */
.moon { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.moon__now { text-align: center; }
.moon__disc { width: min(260px, 70vw); margin: 0 auto 22px; filter: drop-shadow(0 0 30px rgba(255, 246, 220, .25)); }
.moon__dark { fill: rgba(246, 239, 223, .13); }
.moon__lit { fill: #f6efdf; }
.moon__rim { fill: none; stroke: rgba(246, 239, 223, .6); stroke-width: .8; }
.moon__label { margin: 0; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); }
.moon__phase { margin: 4px 0 0; font: 500 32px/1.2 var(--serif); }
.moon__pct { font: italic 400 19px/1.4 var(--serif); color: var(--on-dark-soft); }
.moon__next { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.moon__next .btn { grid-column: 1 / -1; justify-self: start; margin-top: 10px; }
.moon__card { padding: 26px 24px; background: rgba(246, 239, 223, .1); border: 1px solid rgba(246, 239, 223, .28); }
.moon__kind { margin: 0 0 8px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.moon__date { margin: 0; font: 500 26px/1.2 var(--serif); }
.moon__sign { margin: 4px 0 12px; font: italic 400 19px/1.3 var(--serif); color: var(--on-dark-soft); }
.moon__note { font-size: 14.5px; color: var(--on-dark-soft); }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.about__portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.portrait { margin: 0; }
.portrait--low { margin-top: 60px; }
.portrait__frame { position: relative; aspect-ratio: 4 / 5; background: var(--sage) var(--grain); }
.portrait__frame img { position: absolute; inset: 0; z-index: 1; }
.portrait__initial { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 84px/1 var(--serif); color: rgba(244, 240, 230, .8); }
.portrait figcaption { margin-top: 12px; text-align: center; font: italic 400 21px/1 var(--serif); color: var(--gold-text); }
.about__text .sub { margin-bottom: 24px; }
.about__text p:not(.sub) { color: var(--ink-soft); }

.promise { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 900px; margin-top: clamp(70px, 9vw, 110px); border-top: 1px solid rgba(138, 106, 47, .3); }
.promise__item { padding: 30px 24px 0; text-align: center; border-left: 1px solid rgba(138, 106, 47, .18); }
.promise__item:first-child { border-left: 0; }
.promise__item h3 { font: italic 500 25px/1.2 var(--serif); color: var(--gold-text); margin-bottom: 8px; }
.promise__item p { font-size: 15px; color: var(--ink-soft); }

/* ---------- photo strip ---------- */
.strip { background: var(--sage) var(--grain); padding: 44px 0; }
.strip__row { width: min(1240px, 100% - 48px); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.strip figure { aspect-ratio: 7 / 5.2; }

/* ---------- voices ---------- */
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.voice { position: relative; margin: 0; padding: 10px 34px; text-align: center; border-left: 1px solid rgba(138, 106, 47, .2); }
.voice:first-child { border-left: 0; }
.voice blockquote { margin: 0 0 18px; font: italic 400 22px/1.5 var(--serif); color: var(--ink); }
.voice figcaption { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.voice.is-sample::after { content: "δείγμα"; display: inline-block; margin-top: 12px; padding: 2px 8px; border: 1px dashed rgba(138, 106, 47, .5); font: 500 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
html[data-lang="en"] .voice.is-sample::after { content: "sample"; }

/* ---------- faq ---------- */
.faq { border-top: 1px solid rgba(138, 106, 47, .3); }
.faq details { border-bottom: 1px solid rgba(138, 106, 47, .3); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 22px 48px 22px 0; font: 500 clamp(20px, 2vw, 23px)/1.35 var(--serif); transition: color .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font: 300 28px/1 var(--sans); color: var(--gold); transition: transform .35s var(--ease); }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq summary:hover { color: var(--gold-text); }
.faq details p { padding: 0 48px 24px 0; color: var(--ink-soft); }

/* ---------- contact ---------- */
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 100px); align-items: start; }
.direct { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.direct__btn { padding: 12px 22px; border: 1px solid rgba(244, 240, 230, .35); text-decoration: none; font: 500 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.direct__btn:hover { background: var(--on-dark); color: var(--forest); border-color: var(--on-dark); }
.contact__note { margin-top: 24px; font-size: 14px; color: var(--on-dark-soft); }
.form { padding: clamp(28px, 4vw, 44px); background: var(--paper) var(--grain); color: var(--ink); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: block; margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; margin-bottom: 7px; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border: 1px solid rgba(31, 43, 39, .2); border-radius: 0;
  background: #fff; color: var(--ink); font: 400 16px/1.4 var(--sans); transition: border-color .3s, box-shadow .3s;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(var(--forest-rgb), .12); }
.field .is-invalid { border-color: #b5654f; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.chips input + span { display: inline-block; padding: 9px 16px; border: 1px solid rgba(31, 43, 39, .2); font-size: 14px; background: #fff; transition: all .25s; }
.chips b { font-weight: inherit; }
.chips input:checked + span { background: var(--forest); border-color: var(--forest); color: var(--on-dark); }
.chips input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 22px; font-size: 14px; color: var(--ink-soft); line-height: 1.5; cursor: pointer; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--forest); flex: none; }
.form__error { margin: 14px 0 0; font-size: 14px; color: #a2483a; }
.form__success { text-align: center; padding: 40px 10px; }
.form__success-title { font: 500 38px/1.1 var(--serif); margin: 10px 0; }
.form.is-sent > :not(.form__success) { display: none; }

/* ---------- footer ---------- */
.footer { background: var(--charcoal); color: #b9b8b0; padding: 64px 0 100px; font-size: 14.5px; }
.footer__grid { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; }
.footer__seal { width: 140px; height: 140px; color: #efe9dc; --seal-core: var(--charcoal); }
.footer__brand { font: 500 26px/1 var(--serif); letter-spacing: .3em; color: #efe9dc; margin-bottom: 12px; }
.footer a { text-decoration: none; transition: color .3s; }
.footer a:hover { color: var(--gold-light); }
.footer__social { color: var(--gold-light); }
.footer__legal { font-size: 12.5px; opacity: .75; margin-bottom: 4px; }

.quickbar { display: none; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav__side { display: none; }
  .nav__brand { justify-self: start; font-size: 22px; padding-left: 0; }
  .nav__burger { display: block; }
  .mobile-menu {
    position: fixed; inset: 0; top: 66px; z-index: 49;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    background: var(--forest) var(--grain); color: var(--on-dark);
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; }
  .mobile-menu > a:not(.btn) { font: 500 30px/1.2 var(--serif); text-decoration: none; }
  .mobile-menu .btn { margin-top: 10px; }
  .lang--menu { margin-top: 16px; }
  .lang--menu button { font: 500 13px var(--sans); letter-spacing: .1em; color: var(--on-dark); }

  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .welcome, .service, .angel__grid, .moon, .about, .contact__grid { grid-template-columns: 1fr; }
  .service--flip .service__photo { order: 0; }
  .welcome__photo { max-width: 420px; width: 100%; margin: 0 auto; }
  .voices { grid-template-columns: 1fr; gap: 34px; }
  .voice { border-left: 0; padding: 0 10px; }
  .strip__row { grid-template-columns: repeat(2, 1fr); }
  .about__portraits { max-width: 440px; margin: 0 auto; width: 100%; }
  .letter { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .wrap, .wrap--narrow { width: calc(100% - 32px); }
  .topbar { font-size: 11px; }
  .hero { padding: 60px 18px 100px; min-height: 0; }
  .br-d { display: none; }
  .head { margin-bottom: 40px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { aspect-ratio: 3 / 4; }
  .tile__body { padding: 14px; }
  .tile::after { background: linear-gradient(180deg, rgba(var(--ink-rgb), 0) 15%, rgba(var(--ink-rgb), .92) 75%); }
  .d-only { display: none; }
  .m-only { display: inline; }
  .tile__title { font-size: 19px; }
  .tile__text { font-size: 12.5px; }
  .moon__next { grid-template-columns: 1fr; }
  .promise { grid-template-columns: 1fr; }
  .promise__item { border-left: 0; padding: 20px 0 0; }
  .letter { padding: 64px 26px 30px; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .footer__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 24px; }
  .footer__seal { width: 110px; height: 110px; }

  .quickbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    display: grid; grid-template-columns: 1fr 1fr 1.6fr;
    background: var(--forest); box-shadow: 0 -1px 0 rgba(220, 195, 142, .25);
    transform: translateY(110%); transition: transform .45s var(--ease);
  }
  .quickbar.is-on { transform: none; }
  .quickbar a { display: grid; place-items: center; padding: 15px 6px calc(15px + env(safe-area-inset-bottom)); text-decoration: none; font: 500 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); }
  .quickbar__main { background: var(--gold); color: #fff !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .ink-line > span { clip-path: none; }
}

/* one coherent, warm photographic tone across the site */
.tile img, .rough img, .hero__media img { filter: saturate(.82) sepia(.14) contrast(1.02); }

/* ---------- mosaic: one image across nine tiles (after Theomagica) ---------- */
.mosaic {
  --img: url("https://images.unsplash.com/photo-1706384684950-398e97af024a?auto=format&fit=crop&w=1500&h=1500&q=72");
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  width: min(780px, 100%); margin: 0 auto;
}
.mosaic__tile {
  position: relative; aspect-ratio: 1; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 14px; text-align: center; text-decoration: none; color: var(--on-dark);
  background: var(--forest) var(--img) var(--x) var(--y) / 300% 300% no-repeat;
}
.mosaic__tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--forest-rgb), .46), rgba(var(--forest-rgb), .62));
  mix-blend-mode: multiply; transition: background .5s var(--ease);
}
.mosaic__tile::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(220, 195, 142, 0); transition: border-color .5s var(--ease); pointer-events: none; }
.mosaic__title { font: 500 clamp(17px, 2.1vw, 25px)/1.1 var(--serif); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.mosaic__sub { font: italic 400 clamp(13px, 1.4vw, 17px)/1.25 var(--serif); color: var(--gold-light); text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
.mosaic__text { max-height: 0; opacity: 0; overflow: hidden; font-size: 13.5px; line-height: 1.45; transition: max-height .5s var(--ease), opacity .4s, margin .4s; }
.mosaic__tile:hover::before, .mosaic__tile:focus-visible::before { background: linear-gradient(180deg, rgba(var(--forest-rgb), .78), rgba(var(--forest-rgb), .86)); }
.mosaic__tile:hover::after, .mosaic__tile:focus-visible::after { border-color: rgba(220, 195, 142, .6); }
.mosaic__tile:hover .mosaic__text, .mosaic__tile:focus-visible .mosaic__text { max-height: 120px; opacity: 1; margin-top: 8px; }
.mosaic__tile.reveal { transform: none; }
@media (max-width: 600px) {
  .mosaic { gap: 6px; }
  .mosaic__tile { padding: 6px; }
  .mosaic__title { font-size: 13.5px; letter-spacing: .04em; }
  .mosaic__sub { font-size: 12px; }
  .mosaic__text { display: none; }
}

/* ---------- the questions people bring to their guardian angel ---------- */
.asks { list-style: none; margin: 30px 0 36px; padding: 0; }
.asks li { padding: 14px 0; border-top: 1px solid rgba(220, 195, 142, .2); font: italic 400 clamp(21px, 2.1vw, 26px)/1.35 var(--serif); color: var(--on-dark); }
.asks li:last-child { border-bottom: 1px solid rgba(220, 195, 142, .2); }
.h2, .h3, .hero__title { text-wrap: balance; }
.letter { padding: 84px 40px 36px; }
.letter blockquote { font-size: clamp(18px, 1.75vw, 22.5px); }
.letter__seal { top: 18px; right: 22px; width: 56px; height: 56px; }
@media (max-width: 600px) { .letter { padding: 76px 22px 28px; } .letter blockquote { font-size: 17.5px; } .ink-line > span { display: inline; } }

/* ---------- two brothers, two numbers ---------- */
.people { display: grid; gap: 26px; margin-top: 30px; }
.person { padding-top: 20px; border-top: 1px solid rgba(220, 195, 142, .22); }
.person__name { margin: 0; font: italic 400 22px/1.2 var(--serif); color: var(--gold-light); }
.person__tel { display: inline-block; margin: 4px 0 12px; font: 500 30px/1.2 var(--serif); letter-spacing: .02em; text-decoration: none; color: var(--on-dark); }
.person__tel:hover { color: var(--gold-light); }
.person .direct { margin-top: 0; }

/* ---------- birth details ---------- */
.field__hint { margin: -2px 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); }
.birth__row { display: grid; grid-template-columns: 1.2fr .8fr 1.2fr; gap: 12px; }
.field--inner { margin: 0; }
.field__sublabel { display: block; margin-bottom: 5px; font-size: 13px; color: var(--ink-soft); }
@media (max-width: 600px) { .birth__row { grid-template-columns: 1fr 1fr; } .birth__row .field--inner:last-child { grid-column: 1 / -1; } }

/* ---------- sub-pages ---------- */
.page-head { position: relative; display: grid; place-items: center; text-align: center; min-height: 62vh; padding: 90px 24px 120px; color: var(--on-dark); overflow: hidden; isolation: isolate; }
.page-head__media { position: absolute; inset: 0; z-index: -1; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) sepia(.14); }
.page-head__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--ink-rgb), .72), rgba(var(--ink-rgb), .6) 50%, rgba(var(--ink-rgb), .82)); }
.page-head__inner { max-width: 820px; }
.page-head__seal { width: 110px; height: 110px; margin: 0 auto 22px; color: var(--on-dark); --seal-core: rgba(var(--ink-rgb), .65); }
.page-head__title { font: 500 clamp(38px, 5.4vw, 70px)/1.08 var(--serif); text-wrap: balance; }
.nav__side a[aria-current="page"] { color: var(--gold-light); }

.link-more { display: inline-block; margin-top: 22px; font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); text-decoration: none; border-bottom: 1px solid rgba(138, 106, 47, .4); padding-bottom: 4px; }
.link-more:hover { border-color: var(--gold-text); }

.prose p { color: var(--ink-soft); }
.about__text .h2 { margin-bottom: 24px; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(60px, 8vw, 100px); border-top: 1px solid rgba(138, 106, 47, .3); border-bottom: 1px solid rgba(138, 106, 47, .3); }
.stat { padding: 30px 20px; text-align: center; border-left: 1px solid rgba(138, 106, 47, .18); }
.stat:first-child { border-left: 0; }
.stat__n { margin: 0; font: italic 500 clamp(28px, 3.4vw, 44px)/1.1 var(--serif); color: var(--gold-text); }
.stat__l { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); }

.brothers { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); }
.brother .h3 { margin-bottom: 18px; }

.book { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.book__cover { margin: 0; justify-self: center; width: min(320px, 100%); }
.book__cover img { width: 100%; box-shadow: 0 30px 60px -25px rgba(31, 43, 39, .55), 0 2px 6px rgba(31, 43, 39, .15); transform: rotate(-2deg); }
.book__text .sub { margin-bottom: 22px; }

.promise-wrap .promise { margin-top: 0; }
.cta-band { text-align: center; }
.cta-band__inner { max-width: 980px; }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }

@media (max-width: 820px) {
  .brothers, .book { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid rgba(138, 106, 47, .18); }
  .stat:first-child { border-top: 0; }
}
@media (max-width: 600px) {
  .page-head { min-height: 0; padding: 60px 18px 100px; }
  .page-head__seal { width: 84px; height: 84px; }
  .cta-band__actions .btn { width: 100%; }
}
.tear--top.tear--sagefill { fill: var(--sage); }
@media (max-width: 820px) { .book__cover { width: min(230px, 70%); } }

/* ---------- book page ---------- */
.book__lead { font: italic 400 clamp(22px, 2.2vw, 27px)/1.45 var(--serif); color: var(--ink) !important; margin-bottom: 1.1em; }
.list--book { border-top: 0; padding-top: 0; font-size: 16.5px; }
.list--book li { margin: 0 0 14px; padding-left: 26px; }
.list--book b { font-weight: 600; color: var(--ink); }
.book__author { margin-top: 50px; padding: 34px 36px; background: var(--linen) var(--grain); border: 1px solid rgba(138, 106, 47, .2); }
.book__author p:not(.kicker) { color: var(--ink-soft); }
.book__author .btn { margin-top: 22px; }
.book__buy { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.book__note { margin: 0; font-size: 15px; font-style: italic; color: var(--ink-soft); max-width: 34ch; }
.dk .book__note { color: var(--on-dark-soft); }

/* =========================================================
   Darker, more mystical balance (after Labyrinthos / Occulta)
   ========================================================= */
:root { --deep: #10241f; --night: #131614; --sky: #0e1b1a; }
.section--forest { --sec-bg: var(--forest); }
.section--linen { --sec-bg: var(--linen); }
.section--paper { --sec-bg: var(--paper); }
.section--deep {
  --sec-bg: var(--deep);
  background: radial-gradient(70% 60% at 22% 40%, rgba(233, 196, 120, .09), transparent 70%), var(--deep) var(--grain);
  color: var(--on-dark);
}
.section--night {
  --sec-bg: var(--night);
  background: radial-gradient(60% 50% at 50% 55%, rgba(233, 196, 120, .07), transparent 70%), var(--night) var(--grain);
  color: var(--on-dark);
}
.section--sky {
  --sec-bg: var(--sky);
  color: var(--on-dark);
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 246, 220, .8), transparent 60%),
    radial-gradient(1px 1px at 27% 68%, rgba(255, 246, 220, .6), transparent 60%),
    radial-gradient(1.5px 1.5px at 41% 14%, rgba(255, 246, 220, .7), transparent 60%),
    radial-gradient(1px 1px at 58% 82%, rgba(255, 246, 220, .5), transparent 60%),
    radial-gradient(1px 1px at 66% 31%, rgba(255, 246, 220, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 79% 57%, rgba(255, 246, 220, .6), transparent 60%),
    radial-gradient(1px 1px at 88% 18%, rgba(255, 246, 220, .8), transparent 60%),
    radial-gradient(1px 1px at 94% 74%, rgba(255, 246, 220, .5), transparent 60%),
    radial-gradient(1px 1px at 6% 88%, rgba(255, 246, 220, .6), transparent 60%),
    radial-gradient(55% 60% at 28% 50%, rgba(246, 239, 223, .08), transparent 70%),
    var(--sky) var(--grain);
  background-size: 420px 300px, 380px 340px, 520px 360px, 460px 300px, 400px 380px, 500px 320px, 360px 300px, 440px 360px, 480px 340px, auto, auto;
}
.section--sky .moon__card { background: rgba(246, 239, 223, .05); border-color: rgba(220, 195, 142, .25); }
.section--sky .moon__dark { fill: rgba(246, 239, 223, .08); }
.strip { background: var(--night) var(--grain); }

/* type and components on dark sections */
.dk .h2, .dk .h3 { color: var(--on-dark); }
.dk .sub { color: var(--on-dark-soft); }
.dk .kicker, .dk .ornament { color: var(--gold-light); }
.dk .mini-seal { color: var(--gold-light); --seal-core: var(--sec-bg); }
.dk p:not(.kicker):not(.sub):not(.ornament):not(.stat__n) { color: var(--on-dark-soft); }
.dk .welcome__text div p:last-child { color: var(--gold-light); }
.dk .link-more { color: var(--gold-light); border-color: rgba(220, 195, 142, .45); }
.dk .portrait figcaption { color: var(--gold-light); }
.dk .portrait__frame { background: var(--forest-2) var(--grain); }
.dk .stats, .dk .promise { border-color: rgba(220, 195, 142, .22); }
.dk .stat, .dk .promise__item { border-color: rgba(220, 195, 142, .14); }
.dk .stat__n, .dk .promise__item h3 { color: var(--gold-light); }
.dk .book__lead { color: var(--on-dark) !important; }
.dk .book__cover img { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7), 0 0 60px rgba(233, 196, 120, .12); }
.dk .rough { filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .45)); }
.section--night .mosaic { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5)); }

/* the hero gets a little darker and its light gets dust */
.hero__media::after {
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(var(--shade-rgb), .3), rgba(var(--shade-rgb), .78)),
    linear-gradient(180deg, rgba(var(--shade-rgb), .6), rgba(var(--shade-rgb), .4) 40%, rgba(var(--shade-rgb), .82));
}
.motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero__inner, .page-head__inner { position: relative; z-index: 1; }
.tear--auto { z-index: 3; }
.strip { position: relative; }

/* =========================================================
   Colour themes (prototype): ?theme=blue | wine | charcoal
   ========================================================= */
html[data-theme="blue"] {
  --forest: #172447; --forest-2: #22325c; --forest-ink: #0e1631; --sage: #46557e;
  --forest-rgb: 23, 36, 71; --ink-rgb: 14, 22, 49; --shade-rgb: 9, 14, 34;
  --deep: #111a38; --night: #0c1023; --sky: #0a1229;
  --ink: #1d2238; --ink-soft: #4d5270; --on-dark-soft: #c8cde2;
}
html[data-theme="wine"] {
  --forest: #4a1622; --forest-2: #5e1e2c; --forest-ink: #2c0b12; --sage: #7a4a50;
  --forest-rgb: 74, 22, 34; --ink-rgb: 44, 11, 18; --shade-rgb: 30, 8, 13;
  --deep: #3a111a; --night: #1d0d11; --sky: #170b10;
  --ink: #2c1e20; --ink-soft: #5f4a4c; --on-dark-soft: #e6d0cb;
}
html[data-theme="charcoal"] {
  --forest: #1f1f1d; --forest-2: #2c2b28; --forest-ink: #121211; --sage: #57534b;
  --forest-rgb: 31, 31, 29; --ink-rgb: 18, 18, 17; --shade-rgb: 10, 10, 9;
  --deep: #181816; --night: #0f0f0e; --sky: #0e0f11;
  --ink: #1f1e1b; --ink-soft: #55524c; --on-dark-soft: #d2cec4;
}
html[data-theme="purple"] {
  --forest: #2e1a47; --forest-2: #3d2660; --forest-ink: #1b0f2c; --sage: #6a5a86;
  --forest-rgb: 46, 26, 71; --ink-rgb: 27, 15, 44; --shade-rgb: 17, 9, 29;
  --deep: #23133a; --night: #140c20; --sky: #110a20;
  --ink: #241c30; --ink-soft: #564c66; --on-dark-soft: #d6cde4;
}
/* the forest photo takes on the theme's colour */
html[data-theme="purple"] .hero__media img, html[data-theme="purple"] .page-head__media img { filter: saturate(.5) hue-rotate(150deg) brightness(.88); }
html[data-theme="blue"] .hero__media img, html[data-theme="blue"] .page-head__media img { filter: saturate(.5) hue-rotate(95deg) brightness(.9); }
html[data-theme="wine"] .hero__media img, html[data-theme="wine"] .page-head__media img { filter: saturate(.55) hue-rotate(-95deg) brightness(.85); }
html[data-theme="charcoal"] .hero__media img, html[data-theme="charcoal"] .page-head__media img { filter: saturate(.25) sepia(.2) brightness(.85); }
html[data-frame] .hero { min-height: 860px; }
html[data-frame] .page-head { min-height: 560px; }
html[data-frame] .quickbar { display: none; }

/* ---------- reviews wall ---------- */
.voices--wall { display: block; columns: 3 300px; column-gap: 20px; }
.voices--wall .voice {
  break-inside: avoid; display: block; margin: 0 0 20px; padding: 28px 28px 24px; text-align: left;
  background: #fffdf8; border: 1px solid rgba(138, 106, 47, .16); box-shadow: 0 14px 34px -22px rgba(31, 43, 39, .35);
}
.voices--wall .voice:first-child { border-left: 1px solid rgba(138, 106, 47, .16); }
.voice__stars { margin: 0 0 10px; color: var(--gold); letter-spacing: .18em; font-size: 13px; }
.voices--wall .voice blockquote { margin: 0 0 18px; font: italic 400 19.5px/1.5 var(--serif); }
.voices--wall .voice figcaption { display: block; text-transform: none; letter-spacing: 0; }
.voice__name { display: block; font: 600 14.5px/1.3 var(--sans); color: var(--ink); }
.voice__meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); }
.voices--wall .voice.is-sample::after { position: absolute; top: 14px; right: 14px; margin: 0; }
.voices--wall .voice { position: relative; }

/* ---------- reviews: one slow, endless row ---------- */
.voices--marquee {
  display: block; columns: auto; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); padding: 6px 0 30px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.voices__track { display: flex; gap: 20px; width: max-content; animation: voices-scroll var(--voices-dur, 90s) linear infinite; }
.voices--marquee:hover .voices__track, .voices--marquee:focus-within .voices__track { animation-play-state: paused; }
.voices--marquee .voice {
  flex: 0 0 360px; display: flex; flex-direction: column; margin: 0; padding: 28px 28px 24px; text-align: left; position: relative;
  background: #fffdf8; border: 1px solid rgba(138, 106, 47, .16); box-shadow: 0 14px 34px -22px rgba(31, 43, 39, .35);
}
.voices--marquee .voice:first-child { border-left: 1px solid rgba(138, 106, 47, .16); }
.voices--marquee .voice blockquote { margin: 0 0 18px; font: italic 400 19px/1.5 var(--serif); flex: 1; }
.voices--marquee .voice figcaption { display: block; text-transform: none; letter-spacing: 0; }
.voices--marquee .voice.is-sample::after { position: absolute; top: 14px; right: 14px; margin: 0; }
@keyframes voices-scroll { to { transform: translateX(calc(-50% - 10px)); } }
@media (max-width: 600px) { .voices--marquee .voice { flex-basis: 290px; padding: 24px 22px 20px; } .voices--marquee .voice blockquote { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .voices--marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .voices__track { animation: none; padding: 0 24px; }
}

/* form: placeholder hint, mandatory consent */
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: .55; font-style: italic; }
.consent.is-invalid { color: #a2483a; }
.consent.is-invalid input { outline: 2px solid #c7776a; outline-offset: 2px; }
.btn.is-locked { opacity: .45; }
.voice__star-off { color: rgba(138, 106, 47, .25); }

/* ---------- the Moon, as a badge on the Astrology photo ---------- */
.service__photo.has-moon { position: relative; }
.moon-badge {
  position: absolute; left: 7%; bottom: 9%; z-index: 2;
  display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; max-width: 86%;
  background: rgba(14, 14, 13, .8); color: var(--on-dark);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: 0 0 0 1px rgba(220, 195, 142, .22);
}
.moon-badge__disc { width: 52px; height: 52px; flex: none; filter: drop-shadow(0 0 10px rgba(255, 246, 220, .25)); }
.moon-badge__disc .moon__dark { fill: rgba(246, 239, 223, .14); }
.moon-badge p { margin: 0; }
.moon-badge__k { font: 500 10.5px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); }
.moon-badge__phase { margin-top: 3px !important; font: 500 20px/1.2 var(--serif); color: var(--on-dark); }
.moon-badge__next { margin-top: 2px !important; font: italic 400 15px/1.3 var(--serif); color: var(--on-dark-soft); }
.service__text p.moon-badge__k, .service__text p.moon-badge__phase { color: inherit; }
@media (max-width: 600px) { .moon-badge { left: 5%; bottom: 7%; padding: 10px 14px 10px 10px; gap: 10px; } .moon-badge__disc { width: 40px; height: 40px; } .moon-badge__phase { font-size: 17px; } .moon-badge__next { font-size: 13.5px; } }
.moon-badge__note { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid rgba(220, 195, 142, .22); font: 400 13.5px/1.45 var(--sans); color: var(--on-dark); max-width: 30ch; }
.service__text p.moon-badge__note { color: var(--on-dark); }
@media (max-width: 600px) { .moon-badge__note { font-size: 12.5px; } }

/* =================== MOCKUP additions =================== */
.mockup-flag { position: fixed; left: 12px; bottom: 12px; z-index: 99; padding: 6px 10px; background: #b8914b; color: #fff; font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
@media (max-width: 600px) { .mockup-flag { bottom: 64px; } }
.center { text-align: center; margin-top: 44px; }

/* trust line under the hero */
.trust { background: #121211; color: var(--on-dark); border-bottom: 1px solid rgba(220,195,142,.16); padding: 26px 0; }
.trust__row { list-style: none; margin: 0 auto; padding: 0; width: min(var(--wrap), 100% - 48px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust__row li { display: flex; gap: 12px; align-items: flex-start; }
.trust__mark { color: var(--gold); font-size: 12px; margin-top: 4px; }
.trust__row b { display: block; font: 500 19px/1.25 var(--serif); }
.trust__row small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--on-dark-soft); }

/* "what we do" cards */
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.svc-card .kicker { margin-top: 20px; }
.svc-card .h3 { font-size: clamp(24px, 2.2vw, 29px); margin-bottom: 10px; }
.svc-card p:not(.kicker) { font-size: 15.5px; }
.svc-card__img { aspect-ratio: 4 / 3; position: relative; margin: 0; }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; }
.moon-badge--sm { left: 6%; bottom: 7%; padding: 10px 12px 10px 10px; gap: 10px; max-width: 90%; }
.moon-badge--sm .moon-badge__disc { width: 38px; height: 38px; }
.moon-badge--sm .moon-badge__phase { font-size: 16px; }
.moon-badge--sm .moon-badge__next { font-size: 13px; }
.moon-badge--sm .moon-badge__note { font-size: 12px; }
.dk .moon-badge p { color: inherit; }
.dk .moon-badge .moon-badge__k { color: var(--gold-light); }
.dk .moon-badge .moon-badge__next { color: var(--on-dark-soft); }

/* next steps */
.next-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.next-steps__n { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 50%; border: 1px solid rgba(220,195,142,.45); font: italic 500 22px var(--serif); color: var(--gold-light); }
.next-steps h3 { font: 500 23px/1.25 var(--serif); margin-bottom: 8px; color: var(--on-dark); }
.next-steps p { max-width: 30ch; margin-inline: auto; }

/* booking: one business number */
.biz { margin-top: 30px; }
.biz__call { padding: 18px 40px; font-size: 15px; }
.biz__num { margin: 12px 0 18px; font: 500 22px var(--serif); letter-spacing: .04em; color: var(--on-dark); }
.biz .direct { margin-top: 0; }
.opt { font-style: normal; font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }

/* mosaic on a light background + tap to reveal on touch */
.section--paper .mosaic { filter: drop-shadow(0 26px 50px rgba(31,30,27,.28)); }
.mosaic__tile.is-open .mosaic__text { max-height: 140px; opacity: 1; margin-top: 8px; display: block; }
.mosaic__tile.is-open::before { background: linear-gradient(180deg, rgba(var(--forest-rgb), .8), rgba(var(--forest-rgb), .9)); }

@media (max-width: 900px) {
  .trust__row { grid-template-columns: 1fr 1fr; }
  .svc-cards, .next-steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .trust__row b { font-size: 16px; } .trust__row small { font-size: 12px; }
  .mosaic__tile.is-open .mosaic__text { display: block; font-size: 11px; line-height: 1.3; }
  .mosaic__tile.is-open .mosaic__sub { display: none; }
}
.svc-card .moon-badge .moon-badge__k { font-size: 9.5px; }
.svc-card .moon-badge .moon-badge__phase { font-size: 15.5px; }
.svc-card .moon-badge .moon-badge__next { font-size: 12.5px; }
.svc-card .moon-badge .moon-badge__note { font-size: 11.5px; line-height: 1.35; max-width: 28ch; margin-top: 6px !important; padding-top: 6px; }
.svc-card .moon-badge { left: 5%; bottom: 6%; padding: 9px 12px 9px 9px; }

.mosaic__tile.is-open .mosaic__text { display: none !important; }
.mosaic__tile.is-open::after { border-color: rgba(220,195,142,.85); }
.mosaic__detail { width: min(780px, 100%); margin: 14px auto 0; padding: 20px 20px 22px; background: var(--forest); color: var(--on-dark); text-align: center; }
.mosaic__detail-title { margin: 0 0 6px; font: 500 21px/1.2 var(--serif); color: var(--gold-light); }
.mosaic__detail-text { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--on-dark-soft); }

/* booking on a light background (reviews removed, so dark/light keeps alternating) */
.contact--light { color: var(--ink); }
.contact--light .biz__num { color: var(--ink); }
.contact--light .contact__note { color: var(--ink-soft); }
.contact--light .direct__btn { border-color: rgba(31, 30, 27, .28); color: var(--ink); }
.contact--light .direct__btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.contact--light .form { background: #fffdf8; border: 1px solid rgba(138, 106, 47, .2); box-shadow: 0 30px 70px -35px rgba(31, 30, 27, .45); }