/* Site chrome styles — translated 1:1 from SiteHeaderB.dc.html and
   SiteFooterB.dc.html (etags in LEDGER.md). Values are the drawing's values;
   classes replace repeated inline styles; style-hover becomes :hover. The one
   addition the drawing cannot express is :focus-visible (quality floor). */

/* ───────────────────────── header bar ───────────────────────── */

.bos-hdr {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  z-index: 6;
  font-family: var(--font-body);
}
.bos-hdr-logo-link { display: block; }
.bos-hdr-logo { height: 62px; display: block; }
.bos-hdr-right { display: flex; align-items: center; gap: 10px; }

.bos-login {
  text-decoration: none;
  display: flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--cream);
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-weight: 500; font-size: 14px; cursor: pointer;
  box-shadow: 0 8px 30px rgba(17,35,40,0.25);
  transition: transform 0.3s, box-shadow 0.3s;
}
.bos-login:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(17,35,40,0.35); }

.bos-burger {
  display: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); border: 1px solid rgba(242,217,168,0.35);
  align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  box-shadow: 0 8px 30px rgba(17,35,40,0.25);
  padding: 0;
}
.bos-burger .bos-burger-close { display: none; }
.bos-chrome-header.is-menu-open .bos-burger .bos-burger-open { display: none; }
.bos-chrome-header.is-menu-open .bos-burger .bos-burger-close { display: block; }

/* ───────────────────────── nav pill + mega ───────────────────── */

/* As drawn 2026-09-15: the scrims are a plain tint (0.55), no live blur (the
   blur was re-blurring the whole page beneath it every frame), and hidden
   outright when closed so they cost nothing at idle; the fades stay. */
.bos-mega-scrim {
  position: fixed; inset: 0; z-index: 5;
  background: rgba(5,24,38,0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s, visibility 0.35s;
}
.bos-chrome-header.is-mega-open .bos-mega-scrim { opacity: 1; visibility: visible; }

.bos-nav {
  position: absolute; top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--font-body);
}
.bos-nav-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.88);
  border: 1px solid rgba(17,35,40,0.08);
  box-shadow: 0 8px 30px rgba(20,60,90,0.1);
}
.bos-nav-item {
  text-decoration: none; font-size: 14px; font-weight: 400;
  color: rgba(17,35,40,0.7);
  padding: 9px 18px; border-radius: var(--radius-pill);
  cursor: pointer; border: 0; background: transparent;
  font-family: inherit;
  transition: background 0.3s, color 0.3s;
  display: flex; align-items: center; gap: 7px;
}
.bos-nav-item:hover { background: rgba(17,35,40,0.07); color: var(--ink); }
/* the current-page pill: a colour change only, exactly as drawn */
.bos-chrome-header[data-active="home"] .bos-nav-item[data-nav="home"],
.bos-chrome-header[data-active="services"] .bos-nav-item[data-nav="services"],
.bos-chrome-header[data-active="about"] .bos-nav-item[data-nav="about"],
.bos-chrome-header[data-active="contact"] .bos-nav-item[data-nav="contact"] { color: var(--ink); }
.bos-chrome-header.is-mega-open .bos-nav-services { background: rgba(17,35,40,0.07); color: var(--ink); }
.bos-nav-chev { display: block; transform: rotate(0deg); transition: transform 0.3s; }
.bos-chrome-header.is-mega-open .bos-nav-chev { transform: rotate(180deg); }

.bos-mega-wrap {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  padding-top: 12px;
  opacity: 0; visibility: hidden; pointer-events: none;   /* hidden when closed, as drawn 2026-09-15: its 80px shadow is not composited at idle */
  transition: opacity 0.3s, transform 0.3s, visibility 0.25s;
}
.bos-chrome-header.is-mega-open .bos-mega-wrap {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.bos-mega {
  width: 900px; border-radius: 26px;
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(17,35,40,0.08);
  box-shadow: 0 30px 80px rgba(20,60,90,0.28);
  overflow: hidden;
  display: grid; grid-template-columns: 380px minmax(0, 1fr);
}
.bos-mega-left {
  position: relative;
  background: linear-gradient(175deg, var(--navy-1) 0%, var(--navy-2) 70%, var(--navy-3) 100%);
  color: var(--foam);
  padding: 34px 32px 30px;
  display: flex; flex-direction: column; overflow: hidden;
}
.bos-mega-glow {
  position: absolute; top: -70px; left: -60px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238,198,132,0.35) 0%, rgba(238,198,132,0) 70%);
}
.bos-mega-kicker { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(242,217,168,0.65); }
.bos-mega-tag {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: 31px; line-height: 1.2; color: var(--gold-dark-bg);
  margin-top: 14px; min-height: 112px;
}
/* pinned to three lines and two chip rows (the Social Media hover's size) so the
   card no longer changes height as you hover different services (drawn 2026-09-01) */
.bos-mega-desc { font-size: 13px; line-height: 1.7; font-weight: 300; color: rgba(238,246,250,0.72); margin-top: 6px; min-height: 67px; }
.bos-mega-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; min-height: 61px; align-content: flex-start; }
.bos-mega-chips > div {
  font-size: 11px; font-weight: 400; color: rgba(238,246,250,0.8);
  border: 1px solid rgba(242,217,168,0.3); border-radius: var(--radius-pill);
  padding: 6px 12px;
}
.bos-mega-spacer { flex: 1; }
.bos-mega-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  border-top: 1px solid rgba(242,217,168,0.22);
  padding-top: 18px; margin-top: 22px;
}
.bos-mega-price { font-size: 20px; font-weight: 600; color: var(--gold-dark-bg); }
.bos-mega-visit { font-size: 12.5px; font-weight: 500; color: var(--foam); cursor: pointer; text-decoration: none; transition: color 0.25s; }
.bos-mega-visit:hover { color: var(--gold-dark-bg); }

.bos-mega-right { padding: 18px 18px 14px; display: flex; flex-direction: column; }
.bos-mega-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 14px;
  cursor: pointer; background: transparent;
  transition: background 0.25s;
  border: 0; width: 100%; text-align: left; font-family: inherit; text-decoration: none;
}
.bos-mega-item.is-hot { background: rgba(17,35,40,0.055); }
.bos-mega-item .bos-mi-icon {
  width: 36px; height: 36px; border-radius: 11px;
  background: rgba(212,170,111,0.16); border: 1px solid rgba(168,127,66,0.28);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bos-mega-item .bos-mi-body { min-width: 0; flex: 1; }
.bos-mega-item .bos-mi-name { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.bos-mega-item .bos-mi-desc { font-size: 11.5px; font-weight: 300; color: rgba(17,35,40,0.58); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bos-mega-item .bos-mi-arrow { opacity: 0; transition: opacity 0.25s; }
.bos-mega-item.is-hot .bos-mi-arrow { opacity: 1; }

.bos-mega-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 10px -18px -14px; margin-top: auto;
  padding: 14px 16px;
  border-top: 1px solid rgba(17,35,40,0.08);
  background: rgba(212,170,111,0.09);
  cursor: pointer; text-decoration: none; border-left: 0; border-right: 0; border-bottom: 0;
  font-family: inherit;
  transition: background 0.3s;
}
.bos-mega-cta:hover { background: rgba(212,170,111,0.18); }
.bos-mega-cta-serif { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--gold); }
.bos-mega-cta-plain { font-size: 12.5px; font-weight: 500; color: var(--ink); }

/* ───────────────────────── overlay menu ─────────────────────── */

.bos-menu {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5,24,38,0.55);   /* plain tint, no blur, hidden when closed: as drawn 2026-09-15 */
  color: var(--foam); font-family: var(--font-body);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s, visibility 0.3s;
}
.bos-chrome-header.is-menu-open .bos-menu { opacity: 1; visibility: visible; pointer-events: auto; }
.bos-menu-panel {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--navy-2) 0%, var(--abyss) 100%);
  display: flex; flex-direction: column;
  padding: 20px 26px 34px;
  overflow-y: auto; box-sizing: border-box;
}
.bos-menu-label { display: flex; align-items: center; min-height: 46px; font-size: 11.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(242,217,168,0.7); }
.bos-menu-links { display: flex; flex-direction: column; gap: 2px; margin-top: 36px; }
.bos-menu-links a {
  text-decoration: none;
  font-family: var(--font-display); font-style: italic;
  font-size: 38px; font-weight: 500; line-height: 1.3;
  padding: 6px 0; cursor: pointer; width: fit-content;
  color: rgba(238,246,250,0.88);
}
.bos-chrome-header[data-active="home"] .bos-menu-links a[data-nav="home"],
.bos-chrome-header[data-active="about"] .bos-menu-links a[data-nav="about"],
.bos-chrome-header[data-active="contact"] .bos-menu-links a[data-nav="contact"] { color: var(--gold-dark-bg); }
.bos-menu-svc { margin-top: 34px; }
.bos-menu-svc-label { font-size: 11.5px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(242,217,168,0.6); margin-bottom: 14px; }
.bos-menu-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.bos-menu-chips a, .bos-menu-chips .bos-chip-static {
  text-decoration: none; padding: 12px 18px; border-radius: var(--radius-pill);
  border: 1px solid rgba(242,217,168,0.3);
  color: rgba(238,246,250,0.85); font-size: 13px; font-weight: 400;
  cursor: pointer; white-space: nowrap;
}
.bos-menu-cta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 44px; }
.bos-menu-book {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gold-dark-bg); color: var(--ink);
  padding: 16px 30px; border-radius: var(--radius-pill);
  font-weight: 500; font-size: 15px; cursor: pointer; text-decoration: none; border: 0; font-family: inherit;
}
.bos-menu-book span { font-size: 14px; color: var(--gold); }
.bos-menu-login {
  text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid rgba(242,217,168,0.4); color: var(--foam);
  padding: 15px 30px; border-radius: var(--radius-pill);
  font-weight: 400; font-size: 14.5px; cursor: pointer;
}
.bos-menu-close {
  position: absolute; top: 14px; right: 18px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); border: 1px solid rgba(242,217,168,0.35);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 8px 30px rgba(17,35,40,0.25);
  z-index: 2; padding: 0;
}

/* tablet: the overlay renders as an anchored panel (from the drawing) */
@media (min-width: 741px) {
  .bos-menu-panel {
    inset: auto; top: 74px; right: 18px;
    width: 430px; max-height: calc(100vh - 96px);
    border: 1px solid rgba(242,217,168,0.2);
    border-radius: 24px;
    padding: 34px 34px 30px;
    box-shadow: 0 30px 70px rgba(5,24,38,0.5);
  }
  .bos-menu-label { display: none; }
  .bos-menu-links { margin-top: 0; }
  .bos-menu-links a { font-size: 36px; line-height: 1.35; }
  .bos-menu-svc { border-top: 1px solid rgba(242,217,168,0.2); padding-top: 22px; margin-top: 26px; }
  .bos-menu-cta { margin-top: 26px; padding-top: 0; }
}

@media (max-width: 1180px) {
  .bos-hdr { padding: 14px 18px; }
  .bos-hdr-logo { height: 46px; }
  .bos-login { padding: 11px 18px; font-size: 13px; }
  .bos-nav { display: none; }
  .bos-burger { display: flex; }
}

/* mobile: the Log in pill is hidden (it wrapped to two lines on phones).
   Drawn 2026-08-31 in SiteHeaderB.dc.html; kept at tablet and desktop, and the
   burger menu's own Log in entry is untouched, so the way in never disappears. */
@media (max-width: 740px) {
  .bos-login { display: none; }
}

/* ───────────────────────── footer ───────────────────────────── */

.bos-foot {
  position: relative;
  background: var(--paper); color: var(--ink);
  font-family: var(--font-body);
  overflow: hidden;
  padding: 0 72px;
}
.bos-foot-hairline { position: absolute; top: 0; left: 0; right: 0; height: 1px; background: rgba(168,127,66,0.25); pointer-events: none; z-index: 5; }
.bos-foot-halo {
  position: absolute; top: -420px; left: 50%; transform: translateX(-50%);
  width: 820px; height: 820px; border-radius: 50%;
  background: radial-gradient(circle, rgba(238,198,132,0.3) 0%, rgba(238,198,132,0.1) 45%, rgba(238,198,132,0) 68%);
  pointer-events: none;
}
.bos-foot-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.bos-foot-inner { position: relative; z-index: 3; max-width: 1150px; margin: 0 auto; padding: 90px 0 0; }
.bos-foot-grid { display: grid; grid-template-columns: 1.5fr 0.8fr 1fr 1.2fr; gap: 48px; align-items: start; }
.bos-foot-brand { display: flex; flex-direction: column; gap: 18px; }
.bos-foot-logo-link { display: block; width: fit-content; }
.bos-foot-logo-link img { height: 58px; width: fit-content; display: block; }
.bos-foot-serif { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--gold); }
.bos-foot-social { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.bos-soc {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(17,35,40,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; cursor: pointer;
  /* they are anchors since 2026-09-01, so the two things a link brings with it
     have to be undone, exactly as the drawing's own inline styles do */
  text-decoration: none; color: inherit;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.bos-soc:hover { background: var(--ink); color: var(--gold-dark-bg); border-color: var(--ink); transform: translateY(-2px); }

.bos-foot-col { display: flex; flex-direction: column; gap: 13px; }
.bos-foot-eyebrow { font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.bos-foot-col a {
  text-decoration: none; font-size: 14px; color: rgba(17,35,40,0.65);
  cursor: pointer; width: fit-content;
  transition: color 0.3s, transform 0.3s;
}
.bos-foot-col a:hover { color: var(--ink); transform: translateX(3px); }
.bos-foot-static { font-size: 14px; color: rgba(17,35,40,0.65); cursor: pointer; width: fit-content; transition: color 0.3s, transform 0.3s; }
.bos-foot-static:hover { color: var(--ink); transform: translateX(3px); }

.bos-foot-acc { display: none; flex-direction: column; }
.bos-acc-rule { border-top: 1px solid rgba(17,35,40,0.1); }
.bos-acc-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 56px; cursor: pointer;
  background: transparent; border: 0; padding: 0; font-family: inherit; width: 100%;
}
.bos-acc-head .bos-foot-eyebrow { margin-bottom: 0; font-size: 12px; }
.bos-acc-head svg { transform: rotate(0deg); transition: transform 0.3s; }
.bos-acc-head.is-open svg { transform: rotate(180deg); }
.bos-acc-body { display: none; flex-direction: column; gap: 14px; padding: 2px 0 22px; }
.bos-acc-body.is-open { display: flex; }
.bos-acc-body a { text-decoration: none; font-size: 14px; color: rgba(17,35,40,0.7); cursor: pointer; }
.bos-acc-body .bos-foot-static { font-size: 14px; color: rgba(17,35,40,0.7); }

.bos-foot-co { display: flex; flex-direction: column; gap: 4px; }
.bos-foot-co-eyebrow { margin-bottom: 17px; }
.bos-foot-co-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.bos-foot-co-lines { font-size: 13.5px; line-height: 1.9; color: rgba(17,35,40,0.6); }
.bos-foot-ico { font-size: 11.5px; line-height: 1.8; color: rgba(17,35,40,0.45); margin-top: 18px; }

.bos-foot-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: 70px; padding: 22px 0;
  border-top: 1px solid rgba(17,35,40,0.1);
}
.bos-foot-copy { font-size: 12.5px; color: rgba(17,35,40,0.5); }
.bos-foot-legal { display: flex; align-items: center; gap: 26px; }
.bos-foot-legal a, .bos-foot-legal button { text-decoration: none; font-size: 12.5px; color: rgba(17,35,40,0.55); cursor: pointer; transition: color 0.3s; }
.bos-foot-legal a:hover, .bos-foot-legal button:hover { color: var(--ink); }
.bos-foot-tail { height: 34px; }

.bos-wa-float { position: fixed; right: 26px; bottom: 26px; z-index: 50; display: flex; align-items: center; gap: 12px; font-family: var(--font-body); }
.bos-wa-float a {
  width: 58px; height: 58px; border-radius: 50%;
  background: #1fae62;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 10px 30px rgba(17,35,40,0.25);
  text-decoration: none;
  transition: transform 0.3s;
}
.bos-wa-float a:hover { transform: translateY(-3px) scale(1.04); }

@media (max-width: 1180px) {
  .bos-foot { padding: 0 40px; }
}
@media (max-width: 980px) {
  .bos-foot-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 740px) {
  .bos-foot { padding: 0 22px; }
  .bos-foot-grid { grid-template-columns: 1fr; gap: 0; }
  .bos-foot-brand { padding-bottom: 30px; }
  .bos-foot-col { display: none; }
  .bos-foot-acc { display: flex; }
  .bos-foot-co { padding-top: 26px; }
  .bos-foot-bar { margin-top: 44px; }
}

/* quality floor: the skip link. Off-screen at rest (so the drawing is
   untouched), an ink pill matching .bos-login when keyboard focus arrives.
   z-index above everything: it must never surface underneath the chrome. */
.bos-skip {
  position: absolute;
  top: 20px; left: 20px;
  z-index: 200;
  transform: translateY(-200px);
  background: var(--ink); color: var(--cream);
  padding: 14px 26px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 30px rgba(17,35,40,0.25);
}
.bos-skip:focus-visible { transform: none; }

/* quality floor: keyboard focus is visible everywhere in the chrome */
.bos-chrome-header a:focus-visible,
.bos-chrome-header button:focus-visible,
.bos-foot a:focus-visible,
.bos-foot button:focus-visible,
.bos-wa-float a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── the cookie banner (drawn: CookieBanner.dc.html) ─────────────────────── */
/* Its drawn style-hover as a real rule, and its two states (ADR-013): asleep,
   the banner's whole life until advertising arrives, and open, only while a
   visitor has asked for the settings panel. chrome/consent.js stamps
   data-consent on <html> synchronously, so nothing flashes before paint. */
.bos-cb-accept:hover, .bos-cb-done:hover { background: #a87f42; color: #f8f5ee; }

/* A native button that renders exactly as the drawn div it replaces. A button
   carries user-agent styling a div does not: a grey face, its own border and
   margin, the system font instead of the inherited one, centred text, and
   and centred text. Each is put back to the div default here, so the drawn
   inline styles land on identical ground and the pixels do not move. Keyboard
   operation, focus ring and Enter/Space come free with the real element.

   display is set to block because that is a div's default and a button's is
   inline-block: without it every converted control that declared no display of
   its own shrank to fit its text. Any control with its own inline display, flex
   most often, overrides this, as does any rule in the page's own style block.

   box-sizing is INHERITED, not named. Nine of the ten pages declare their own
   `* { box-sizing: border-box }` in their drawn style block; Dolphin declares
   none, so a div there is content-box. Naming either value would be wrong on
   one kind of page, and the geometry witness caught both mistakes in turn.
   Inheriting takes the parent's computed value, which is exactly what the
   replaced div resolved to on every page. */
.bos-btn-reset {
  appearance: none; -webkit-appearance: none;
  box-sizing: inherit;
  display: block;
  background: transparent; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: inherit;
  cursor: pointer;
}

/* A form control sizes to fit its content even as a block-level flex container:
   that is intrinsic to buttons and no `display` can undo it. A div in the same
   place filled its parent. These three families sit in block parents and were
   full width when drawn, so the fill is restored explicitly. The list is not a
   guess: the geometry witness named exactly these, and every other converted
   control measured identical without it. */
button.bos-btn-reset[data-act="faqs"],
button.bos-btn-reset[data-act="faq"] { width: 100%; }

/* The one converted control that is an inline run of text inside a heading is a
   link, not a button, because no form control can flow inside a line of type the
   way the drawn span did. This puts back the two things a browser styles on an
   anchor that a span does not carry. Under the mouse too (2026-09-11, found by
   Marcus): a page's own `a:hover` rule, drawn for real links, must not recolour a
   span-turned-link that the drawing gives no hover state. */
.bos-lnk-reset, .bos-lnk-reset:hover { color: inherit; text-decoration: none; }
[data-cb] { display: none; }
[data-consent="open"] [data-cb] { display: block; }

/* The drawn state that is not live (the banner, until advertising) and the
   panel's failure line wait hidden inside the widget; inline flex would
   otherwise outrank the hidden attribute. */
[data-cb] [hidden] { display: none !important; }