/* ===== v05 theme — cherry · electric · emerald (supersedes the Bauhaus/Sailor Moon primaries) =====
   Night navy #0E1838 · deep night #070B1F · puddle night #050508 · paper #F2EADB · card paper #FBF6EC · ink #14172B · ink muted #4A4458
   parchment #F7F1E4 / #C9BFAE (text on night) · cherry red #9D1425 · electric blue #1A2C5C (text on paper: #1A2C5C)
   emerald #0B8F5E (shapes) / deep emerald #047857 (behind white text) / mint #6EE7B7 (text on night)
   pastel bar: cherry #F6B3C0 → #F9C9D3 · electric #C9DCFF → #A9C8FF · emerald #BFEBD8 → #A8E6CF
   Day sky (landing): #1A2C5C → #5B9BFF → #BFE0FF → #E8F4FF
   Fonts: v01 — Rakkas display · GFS Neohellenic (Greek, italics) · Inter body. */
:root {
  --bh-night: #0E1838; --bh-deep: #070B1F; --bh-black: #050508; --bh-paper: #F2EADB; --bh-card: #FBF6EC;
  --bh-ink: #14172B; --bh-ink-muted: #4A4458; --bh-parch: #F7F1E4; --bh-parch-muted: #C9BFAE;
  --bh-cherry: #9D1425; --bh-electric: #1A2C5C; --bh-electric-text: #1A2C5C; --bh-emerald: #0B8F5E; --bh-emerald-deep: #047857; --bh-mint: #6EE7B7;
  /* v06: THIRD ACCENT — sampled from Georgia's watercolour tiles (teal-green family). Change here only.
     r2 petrol/sea teal (bluer, after her #425C5B / #467B73 tiles): shapes & text on paper #1F5E6B (6.1:1) · behind white text #17434E (white 10.8:1) · text on night #7FB3BD (7.5:1 on #0E1838) */
  --accent-3: #1F5E6B; --accent-3-deep: #17434E; --accent-3-light: #7FB3BD;
  --bh-pastel-cherry: #F6B3C0; --bh-pastel-electric: #A9C8FF; --bh-pastel-emerald: #A8E6CF;
}

/* —— lofi grain: fixed SVG noise over everything, very low opacity —— */
body.bh-site::after {
  content: ""; position: fixed; inset: -50%; z-index: 9999; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: bhGrain 1.2s steps(3) infinite;
}
@keyframes bhGrain { 0% { transform: translate(0,0); } 33% { transform: translate(-3%,2%); } 66% { transform: translate(2%,-3%); } 100% { transform: translate(0,0); } }
@media (prefers-reduced-motion: reduce) { body.bh-site::after { animation: none; } }

/* ================= HOME (night ground around the anime puddle) ================= */
html:has(body.home.bh-site), body.home.bh-site, body.home.bh-site[data-kind], body.home.bh-site .stage, body.home.bh-site .stage.is-sky {
  background: radial-gradient(120% 80% at 50% 0%, #132250 0%, #0E1838 45%, #070B1F 100%) !important;
}
body.home.bh-site .brand { color: #F7F1E4 !important; }
body.home.bh-site .dive-title { color: #F7F1E4 !important; text-shadow: 0 1px 2px rgba(5,5,8,.9), 0 3px 14px rgba(5,5,8,.6) !important; }
body.home.bh-site .dive-sub, body.home.bh-site .dive-title-el-extra { color: #F7F1E4 !important; text-shadow: 0 1px 2px rgba(5,5,8,.95), 0 2px 10px rgba(5,5,8,.7) !important; }
body.home.bh-site[data-accent="blue"] .dive-title .accent-cherry, body.home.bh-site[data-accent="blue"] .dive-sub .accent-cherry {
  background: none !important; -webkit-text-fill-color: var(--accent-3-light) !important; color: var(--accent-3-light) !important; filter: drop-shadow(0 1px 2px rgba(5,5,8,.9)) !important; }
body.home.bh-site[data-accent="cherry"] .dive-title .accent-cherry, body.home.bh-site[data-accent="cherry"] .dive-sub .accent-cherry {
  background: none !important; -webkit-text-fill-color: #E8A3BA !important; color: #E8A3BA !important; filter: drop-shadow(0 1px 2px rgba(5,5,8,.9)) !important; }

/* ================= INNER PAGES (night ground, paper panels) ================= */
body.bh-site.section-page, body.bh-site.section-page.palette-dark, body.bh-site.section-page.summer-page {
  --bg: #0E1838; --fg: #F7F1E4; --muted: #C9BFAE; --accent: var(--accent-3-light);
  background: #0E1838 !important; color: #F7F1E4;
}
body.bh-site.section-page .section-veil, body.bh-site.section-page.summer-page .section-veil {
  background: linear-gradient(180deg, rgba(14,24,56,.55) 0%, rgba(14,24,56,.7) 45%, rgba(7,11,31,.86) 100%) !important; opacity: 1 !important;
}
body.bh-site.section-page .section-bg { filter: saturate(1.05) !important; }
/* content panel: off-white paper, ink border, flat primary offset + soft lofi shadow, tricolour bar on top */
body.bh-site.section-page .dive-main, body.bh-site.section-page .services-main {
  --fg: var(--ink-body); --muted: var(--ink-muted); --accent: #1A2C5C; --bg: #F2EADB;
  background: #F2EADB !important; color: var(--ink-body) !important;
  border: 2px solid var(--ink-body) !important; border-radius: 6px !important;
  box-shadow: 10px 10px 0 #1A2C5C, 0 30px 60px rgba(5,5,8,.45) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  position: relative;
}
body.bh-site.section-page.accent-cherry-tone .dive-main, body.bh-site.section-page.accent-cherry-tone .services-main { box-shadow: 10px 10px 0 #9D1425, 0 30px 60px rgba(5,5,8,.45) !important; }
body.bh-site.section-page .dive-main::before, body.bh-site.section-page .services-main::before {
  content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 10px; border-radius: 6px 6px 0 0;
  background: var(--tone-grad);
}
/* three trio dots (cherry · electric · emerald) in the panel top-right corner */
body.bh-site.section-page .dive-main::after, body.bh-site.section-page .services-main::after {
  content: ""; position: absolute; top: 1.4rem; right: 1.4rem; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  width: .7rem; height: .7rem; background: #9D1425; box-shadow: -1.05rem 0 0 #1A2C5C, -2.1rem 0 0 var(--accent-3); transform: none; pointer-events: none;
}
body.bh-site.section-page .dive-main p, body.bh-site.section-page .dive-main li, body.bh-site.section-page .dive-main dd, body.bh-site.section-page .dive-main td,
body.bh-site.section-page .dive-lede, body.bh-site.section-page .soft-note, body.bh-site.section-page .svc-desc, body.bh-site.section-page .services-main p { color: var(--ink-body) !important; text-shadow: none !important; }
body.bh-site.section-page .title-en, body.bh-site.section-page .dive-sub, body.bh-site.section-page .dive-lede .en, body.bh-site.section-page .lede .en,
body.bh-site.section-page .dive-main .en { color: var(--ink-muted) !important; text-shadow: none !important; }
body.bh-site.section-page h1, body.bh-site.section-page h2, body.bh-site.section-page h3,
body.bh-site.section-page.summer-page h1, body.bh-site.section-page.summer-page h2, body.bh-site.section-page.summer-page h3 { color: var(--ink-heading) !important; text-shadow: none !important; }
body.bh-site.section-page h3 a { color: inherit !important; }
body.bh-site.section-page .dive-kicker, body.bh-site.section-page .eyebrow, body.bh-site.section-page.summer-page .dive-kicker {
  color: #9D1425 !important; font-family: var(--sans) !important; font-weight: 600 !important; text-shadow: none !important; }
body.bh-site.section-page .dive-icon-row svg, body.bh-site.section-page .svc-head svg { stroke: #1A2C5C !important; }
body.bh-site.section-page .dive-icon-row { position: relative; }

/* accent words: flat primaries, no glow */
html body.bh-site.section-page .accent-cherry, html body.bh-site.section-page.accent-cherry-tone .accent-cherry {
  background: none !important; -webkit-text-fill-color: #9D1425 !important; color: #9D1425 !important; filter: none !important; animation: none !important; }
html body.bh-site.section-page.accent-electric .accent-cherry { background: none !important; -webkit-text-fill-color: #1A2C5C !important; color: #1A2C5C !important; filter: none !important; }

/* links & buttons */
body.bh-site.section-page .dive-main a, body.bh-site.section-page .services-main a { color: #1A2C5C; }
body.bh-site.section-page .dive-main a:hover { color: #9D1425; }
body.bh-site .enquiry-btn, body.bh-site.section-page .dive-main a.enquiry-btn {
  background: #9D1425 !important; color: #FFFFFF !important; border: 2px solid var(--ink-body) !important; border-radius: 4px !important;
  box-shadow: 4px 4px 0 var(--ink-body) !important; text-shadow: none !important; letter-spacing: .06em !important; }
body.bh-site .enquiry-btn:hover { background: #561229 !important; transform: translate(1px,1px); box-shadow: 3px 3px 0 var(--ink-body) !important; }
body.bh-site .enquiry-btn * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html body.bh-site.section-page button.price-toggle, html body.bh-site.section-page .proj-filter-chip, html body.bh-site.section-page a.proj-more, html body.bh-site.section-page .svc-contact-link {
  background: #FBF6EC !important; color: var(--ink-body) !important; border: 2px solid var(--ink-body) !important; border-radius: 4px !important; box-shadow: 3px 3px 0 var(--accent-3) !important; }
html body.bh-site.section-page .proj-filter-chip.is-on, html body.bh-site.section-page button.price-toggle[aria-pressed="true"] { background: var(--tone-light) !important; box-shadow: 3px 3px 0 var(--ink-body) !important; }
body.bh-site .price-toggle-note { color: var(--ink-muted) !important; }

/* studio cards: paper tiles with a primary corner shape */
body.bh-site .svc-price { color: #1A2C5C !important; font-weight: 600; }
body.bh-site .svc-price em { color: var(--ink-muted) !important; }
body.bh-site .svc-mini { position: relative; overflow: hidden; background: #FBF6EC !important; border: 2px solid var(--ink-body) !important; border-radius: 4px !important; box-shadow: 4px 4px 0 rgba(20,23,43,.85) !important; }
body.bh-site .svc-mini::after { content: ""; position: absolute; right: 0; top: 0; width: 1.6rem; height: 1.6rem; background: #1A2C5C; border-radius: 0 0 0 100%; }
body.bh-site .svc-minis .svc-mini:nth-child(3n+2)::after { background: #9D1425; border-radius: 0; width: 1.1rem; height: 1.1rem; }
body.bh-site .svc-minis .svc-mini:nth-child(3n)::after { background: var(--accent-3); border-radius: 0 0 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
body.bh-site .svc-mini.svc-featured { background: #FBF6EC !important; border: 3px solid var(--ink-body) !important; box-shadow: 6px 6px 0 #9D1425 !important; }
body.bh-site .svc-badge { color: var(--ink-body) !important; background: var(--tone-light) !important; border: 1.5px solid var(--ink-body) !important; border-radius: 2px !important; text-shadow: none !important; }
body.bh-site .svc-warm, body.bh-site .svc-aside, body.bh-site .svc-private { background: #FBF6EC !important; border: 2px solid var(--ink-body) !important; border-left: 10px solid var(--accent-3) !important; border-radius: 4px !important; }
body.bh-site .svc-warm p, body.bh-site .svc-note-inline { color: var(--ink-body) !important; opacity: 1 !important; }

/* dividers: Bauhaus bar — red circle, yellow square, blue bar */
body.bh-site.section-page .dive-main hr, body.bh-site.section-page .dive-rule, body.bh-site.section-page .services-main hr {
  border: 0 !important; height: 12px !important; opacity: 1 !important; margin: 1.8rem 0 !important;
  background:
    radial-gradient(circle 6px at 6px 6px, #9D1425 98%, transparent 100%) 0 0 / 12px 12px no-repeat,
    linear-gradient(var(--accent-3), var(--accent-3)) 20px 0 / 12px 12px no-repeat,
    linear-gradient(#1A2C5C, #1A2C5C) 40px 3px / calc(100% - 40px) 6px no-repeat !important;
}

/* forms */
body.bh-site.section-page input, body.bh-site.section-page select, body.bh-site.section-page textarea {
  background: #FBF6EC !important; color: var(--ink-body) !important; border: 2px solid var(--ink-body) !important; border-radius: 4px !important; }
body.bh-site.section-page input:focus, body.bh-site.section-page select:focus, body.bh-site.section-page textarea:focus { outline: 3px solid var(--accent-3) !important; outline-offset: 1px; }
body.bh-site.section-page label { color: var(--ink-muted) !important; }
body.bh-site.section-page button[type="submit"] { background: #9D1425 !important; color: #fff !important; border: 2px solid var(--ink-body) !important; box-shadow: 4px 4px 0 var(--ink-body) !important; }

/* back links below the panel sit on night */
body.bh-site.section-page .back-puddle a, body.bh-site.section-page .services-back a { color: var(--accent-3-light) !important; text-shadow: 0 1px 2px rgba(5,5,8,.8) !important; }

/* ================= CHROME (top bar, menu, draft tag) ================= */
body.bh-site .brand { color: #F7F1E4 !important; text-shadow: 0 1px 2px rgba(5,5,8,.8), 0 3px 14px rgba(5,5,8,.5) !important; }
body.bh-site .menu-btn.btn-outline, html body.bh-site.section-page .menu-btn.btn-outline {
  background: #0E1838 !important; border: 2px solid var(--accent-3-light) !important; box-shadow: 0 0 0 3px rgba(14,24,56,.5) !important; }
body.bh-site .menu-btn span { background: var(--accent-3-light) !important; box-shadow: none !important; }
body.bh-site .menu-panel { background: radial-gradient(120% 70% at 85% 0%, #132250 0%, #0E1838 50%, #070B1F 100%) !important; color: #F7F1E4 !important; }
body.bh-site .menu-panel a { color: #F7F1E4 !important; text-shadow: none !important; }
body.bh-site .menu-panel a:hover { color: var(--accent-3-light) !important; }
body.bh-site .menu-panel a .en { color: #C9BFAE !important; }
body.bh-site .menu-panel li { border-color: rgba(247,241,228,.16) !important; }
body.bh-site .menu-group-label { color: var(--accent-3-light) !important; }
body.bh-site .menu-group-sub, body.bh-site .menu-muted, body.bh-site .menu-muted span { color: #C9BFAE !important; }
body.bh-site .menu-ornament { color: var(--tone-sand) !important; }
body.bh-site .menu-brand { color: #F7F1E4 !important; }
html body.bh-site .menu-close, html body.bh-site.section-page .menu-close { color: #F7F1E4 !important; border-color: rgba(127,179,189,.6) !important; box-shadow: none !important; background: transparent !important; }
body.bh-site .draft-tag { opacity: 1 !important; top: auto !important; right: auto !important; bottom: calc(.8rem + var(--safe-bottom)) !important; left: .8rem !important;
  color: #FFFFFF !important; background: var(--accent-3-deep) !important; text-shadow: none !important; padding: .2rem .55rem !important; border-radius: 2px !important; font-size: .7rem !important; }


/* ================= LANDING · day sky + pastel cherry (v05 cherry round) =================
   First snap only. Clouds drift (CSS), follow the pointer by depth, ease aside near the mouse and part
   left/right as you scroll (sky.js sets --px --py --part and per-cloud --push). Reduced motion: static, half-parted. */
html:has(body.home.bh-site[data-kind="sky"]), body.home.bh-site[data-kind="sky"], body.home.bh-site .stage.is-sky {
  background: linear-gradient(180deg, #1A2C5C 0%, #3D86FF 22%, #5B9BFF 42%, #8EC5FF 66%, #BFE0FF 86%, #E8F4FF 100%) !important;
}
.sky-landing {
  --px: 0; --py: 0; --part: 0;
  position: fixed; inset: 0; z-index: 6; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #1A2C5C 0%, #3D86FF 22%, #5B9BFF 42%, #8EC5FF 66%, #BFE0FF 86%, #E8F4FF 100%);
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s;
}
body.home[data-kind="sky"] .sky-landing { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
.sky-sun { position: absolute; left: 50%; top: 46%; width: min(120vw, 1100px); aspect-ratio: 1; transform: translate(-50%,-50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,.18) 45%, rgba(255,255,255,0) 72%); }
.sky-row { position: absolute; inset: 0; }
.sky-cloud {
  position: absolute; left: calc(50% + var(--ox, 0) * var(--w)); top: var(--y); width: var(--w); height: auto; max-width: none;
  transform: translate3d(calc(var(--px) * var(--d) * -28px + var(--part) * var(--dir) * 55vw + var(--push, 0px)), calc(var(--py) * var(--d) * -14px), 0);
  animation: skyDrift var(--t) ease-in-out infinite alternate; will-change: transform, translate;
  filter: drop-shadow(0 10px 18px rgba(31,74,170,.18));
}
.sky-row-back .sky-cloud { opacity: .92; }
.sky-cloud.c1 { --ox: -2.6; --y: 13vh; --w: clamp(120px, 22vw, 230px); }
.sky-cloud.c2 { --ox: 1.15; --y: 9vh;  --w: clamp(130px, 26vw, 270px); animation-delay: -12s; }
.sky-cloud.c3 { --ox: -0.92; --y: 64vh; --w: clamp(250px, 46vw, 600px); }
.sky-cloud.c4 { --ox: -0.08; --y: 68vh; --w: clamp(260px, 48vw, 640px); animation-delay: -9s; }
.sky-cloud.c5 { --ox: 0.55; --y: 24vh; --w: clamp(140px, 24vw, 300px); animation-delay: -20s; }
@keyframes skyDrift { from { translate: calc(var(--dir) * -2.2vw) 0; } to { translate: calc(var(--dir) * 2.2vw) -6px; } }
.sky-cherry {
  position: absolute; left: 50%; top: 47%; width: min(78vw, 56svh, 520px); aspect-ratio: 1;
  transform: translate3d(calc(-50% + var(--px) * 10px), calc(-50% + var(--py) * 6px), 0) scale(calc(1 + var(--part) * .04));
  border-radius: 52% 48% 50% 50% / 47% 53% 47% 53%; overflow: hidden;
  box-shadow: 0 0 0 5px rgba(255,255,255,.7), 0 0 0 11px rgba(169,200,255,.45), 0 28px 60px rgba(14,24,56,.28);
  animation: skyBob 7s ease-in-out infinite alternate;
}
.sky-cherry img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes skyBob { from { translate: 0 -4px; } to { translate: 0 6px; } }
.sky-hint { position: absolute; left: 50%; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .1rem; color: var(--ink-body); font-family: var(--sans); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; opacity: calc(1 - var(--part) * 2); z-index: 2; }
.sky-hint svg { width: 1.2rem; height: 1.2rem; animation: skyHint 2.4s ease-in-out infinite; }
@keyframes skyHint { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* header on the sky: parchment brand gets a deep shadow so it holds AA over #1A2C5C (white on #1A2C5C = 4.56:1) */
body.home.bh-site[data-kind="sky"] .brand { color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(14,24,56,.75), 0 2px 10px rgba(14,24,56,.45) !important; }
body.home.bh-site[data-kind="sky"] .dive-cue, body.home.bh-site[data-kind="sky"] .draft-tag { z-index: 41; }
.sky-landing.sky-static .sky-cloud, .sky-landing.sky-static .sky-cherry, .sky-landing.sky-static .sky-hint svg { animation: none !important; }
.sky-landing.sky-static .sky-hint { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .sky-cloud, .sky-cherry, .sky-hint svg { animation: none !important; }
  .sky-landing { --part: .45; transition: none; }
  .sky-hint { opacity: 1 !important; }
}

/* ================= LANDING · anime bay (v05 bay, Nov 12) — supersedes the cherry pool + clouds above =================
   Static full-bleed picture: wide on landscape, tall on portrait. No drift, parallax, bob or parting (sky.js is no longer loaded).
   Sky behind the image matches its light blue top (#7BC2DE) so nothing flashes while it loads. */
html:has(body.home.bh-site[data-kind="sky"]), body.home.bh-site[data-kind="sky"], body.home.bh-site .stage.is-sky { background: #7BC2DE !important; }
.sky-landing.bay-landing { background: #7BC2DE; }
.bay-picture, .bay-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* focal point: both dinghies sit ~33–66% across, ~60–80% down in the wide frame */
.bay-img { object-fit: cover; object-position: 50% 62%; }
/* tall frame: dinghies sit right of centre (~46–80% across, ~60–82% down) */
@media (orientation: portrait) { .bay-img { object-position: 62% 62%; } }
.bay-landing .sky-hint { opacity: 1; color: #0E1838; background: rgba(251,246,236,.82); padding: .35rem .8rem .25rem; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(14,24,56,.18); }
.bay-landing .sky-hint svg { animation: none !important; }
/* narrow screens: sit the hint above the V05 draft tag so they never overlap */
@media (max-width: 560px) { .bay-landing .sky-hint { bottom: calc(2.9rem + env(safe-area-inset-bottom, 0px)); } }
/* header over the light sky: navy brand with a soft light halo (navy on #7BC2DE ≈ 8:1) */
body.home.bh-site[data-kind="sky"] .brand { color: #0E1838 !important; text-shadow: 0 1px 2px rgba(255,255,255,.35), 0 0 12px rgba(232,244,255,.45) !important; }

/* ================= CONTACT · puddle girl A stays clearly in view (first view is her; the panel rises from below) ================= */
body.bh-site.contact-page .section-bg.contact-girl { object-fit: cover !important; object-position: 50% 84% !important; }
body.bh-site.contact-page .section-veil {
  background: linear-gradient(180deg, rgba(14,24,56,.15) 0%, rgba(14,24,56,0) 35%, rgba(14,24,56,.1) 70%, rgba(7,11,31,.7) 100%) !important; }
body.bh-site.contact-page .dive-main { margin-top: 84svh !important; }
@media (min-width: 900px) { body.bh-site.contact-page .dive-main { margin-top: 86svh !important; } }