/* ==========================================================================
   header.css — top bar, primary nav, theme toggle, mobile drawer
   ========================================================================== */

/* ---------- Announcement strip ---------- */
.topbar {
  background: var(--ink);
  color: var(--bg);
  font-size: .625rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  text-align: center;
  padding: .7rem 1rem;
  position: relative;
  z-index: 60;
}
.topbar a { border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 1px; }
:root[data-theme="dark"] .topbar { background: var(--champagne-soft); color: var(--ink); }

/* ---------- Header shell ---------- */
/* Always pinned, never hidden. The bar itself never moves and never changes
   its filter — only an underlay fades in. Toggling backdrop-filter on and off
   forces Chromium to tear down and rebuild the blur layer every time, which is
   what produced the flicker; animating one opacity is composited and smooth. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: border-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  opacity: 1;
  transition: opacity .35s var(--ease-soft);
  will-change: opacity;
}
.site-header:not(.is-over-hero) { border-bottom-color: var(--line-soft); }

/* Over a full-bleed hero the bar starts clear, then the underlay fades in */
.site-header.is-over-hero::before { opacity: 0; }
.site-header.is-over-hero { --hdr-fg: #FFFFFF; }

.site-header.is-over-hero.is-scrolled::before { opacity: 1; }
.site-header.is-over-hero.is-scrolled {
  border-bottom-color: var(--line-soft);
  box-shadow: var(--shadow-sm);
  --hdr-fg: var(--ink);
}
.site-header.is-scrolled:not(.is-over-hero) { box-shadow: var(--shadow-sm); }

/* With the drawer open the bar sits on the drawer's own surface, so the
   transparent-over-hero treatment has to be dropped or the burger and
   wordmark would be white-on-cream. Extra class raises specificity above
   the .is-over-hero rule. */
.site-header.is-drawer-open,
.site-header.is-over-hero.is-drawer-open {
  border-bottom-color: var(--line-soft);
  box-shadow: none;
  --hdr-fg: var(--ink);
}
.site-header.is-drawer-open::before,
.site-header.is-over-hero.is-drawer-open::before { opacity: 1; }
.site-header.is-over-hero.is-drawer-open:not(.is-scrolled) .brand img {
  filter: var(--logo-filter);
}
/* the floating consultation button would otherwise sit on top of the menu */
body.no-scroll .cta-fab { opacity: 0; pointer-events: none; }

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  height: var(--nav-h);
  max-width: var(--maxw-wide, 1680px);
  margin-inline: auto;
  padding-inline: var(--gutter);
  color: var(--hdr-fg, var(--ink));
  transition: color .4s var(--ease-soft);
}

/* ---------- Brand ---------- */
.brand {
  grid-column: 2;
  justify-self: center;
  display: block;
  line-height: 0;
}
.brand img {
  height: 34px;
  width: auto;
  filter: var(--logo-filter);
  transition: filter .4s var(--ease-soft), opacity .35s var(--ease), height .4s var(--ease);
}
.site-header.is-over-hero:not(.is-scrolled):not(.is-drawer-open) .brand img {
  filter: brightness(0) invert(1);
}
.brand:hover img { opacity: .72; }
.site-header.is-scrolled .brand img { height: 28px; }

/* ---------- Primary nav ---------- */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.7vw, 1.85rem);
}
.nav-left { grid-column: 1; justify-self: start; }
.nav-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}
/* keep the right-hand dropdowns inside the viewport */
.nav-right .dropdown { left: auto; right: 0; translate: none; }
.nav-right .nav-item:last-of-type .dropdown { right: 0; }

.nav-link {
  position: relative;
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding-block: .5rem;
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: .1rem;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-link[aria-current="page"] { color: var(--champagne-deep); }
.site-header.is-over-hero:not(.is-scrolled) .nav-link[aria-current="page"] { color: #fff; }
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Dropdown ---------- */
.nav-item { position: relative; }
.nav-item > .nav-link[aria-expanded] { display: inline-flex; align-items: center; gap: .45em; }
.nav-item > .nav-link svg { width: 8px; height: 8px; transition: transform .35s var(--ease); }
.nav-item:hover > .nav-link svg,
.nav-item:focus-within > .nav-link svg { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + .35rem);
  left: 50%;
  translate: -50% 0;
  min-width: 232px;
  padding: .85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  color: var(--ink);
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.dropdown a {
  display: block;
  padding: .62rem .9rem;
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-radius: var(--radius);
  transition: background-color .3s var(--ease), color .3s var(--ease), padding-left .3s var(--ease);
}
.dropdown a:hover, .dropdown a:focus-visible {
  background: var(--bg-alt);
  color: var(--ink);
  padding-left: 1.25rem;
}
.dropdown small {
  display: block;
  font-size: .625rem;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink-mute);
  margin-top: .15rem;
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  position: relative;
  width: 54px;
  height: 28px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 99px;
  opacity: .75;
  transition: opacity .3s var(--ease), border-color .4s var(--ease-soft);
}
.theme-toggle:hover { opacity: 1; }
.theme-toggle .knob {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 20px; height: 20px;
  translate: 0 -50%;
  border-radius: 50%;
  background: currentColor;
  transition: left .45s var(--ease);
}
:root[data-theme="dark"] .theme-toggle .knob { left: 29px; }
.theme-toggle .icon {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 12px; height: 12px;
  transition: opacity .35s var(--ease);
}
.theme-toggle .icon-sun  { right: 6px; opacity: 1; }
.theme-toggle .icon-moon { left: 6px;  opacity: 0; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { opacity: 0; }
:root[data-theme="dark"] .theme-toggle .icon-moon { opacity: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .knob { left: 29px; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { opacity: 0; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { opacity: 1; }
}

/* ---------- Burger ---------- */
.burger {
  display: none;
  position: relative;
  width: 30px;
  height: 18px;
  flex: none;
}
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform .45s var(--ease), opacity .3s var(--ease), width .45s var(--ease);
}
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 50%; translate: 0 -50%; width: 70%; }
.burger span:nth-child(3) { bottom: 0; }
.burger.is-open span:nth-child(1) { top: 50%; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { bottom: auto; top: 50%; transform: rotate(-45deg); }

/* ==========================================================================
   Mobile drawer
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  /* below the header (50) so the burger stays visible and can be tapped
     again to close — the drawer's top padding clears the bar */
  z-index: 48;
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--bg);
  padding: calc(var(--nav-h) + 2.5rem) var(--gutter) 2.5rem;
  overflow-y: auto;
  clip-path: circle(0% at 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--ease), visibility .8s;
}
.drawer.is-open {
  clip-path: circle(150% at 100% 0);
  visibility: visible;
}

.drawer-nav { display: flex; flex-direction: column; gap: .35rem; }
.drawer-nav > li {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  border-bottom: 1px solid var(--line-soft);
}
.drawer.is-open .drawer-nav > li { opacity: 1; transform: none; }
.drawer.is-open .drawer-nav > li:nth-child(1) { transition-delay: .18s; }
.drawer.is-open .drawer-nav > li:nth-child(2) { transition-delay: .24s; }
.drawer.is-open .drawer-nav > li:nth-child(3) { transition-delay: .30s; }
.drawer.is-open .drawer-nav > li:nth-child(4) { transition-delay: .36s; }
.drawer.is-open .drawer-nav > li:nth-child(5) { transition-delay: .42s; }
.drawer.is-open .drawer-nav > li:nth-child(6) { transition-delay: .48s; }
.drawer.is-open .drawer-nav > li:nth-child(7) { transition-delay: .54s; }
.drawer.is-open .drawer-nav > li:nth-child(8) { transition-delay: .60s; }

.drawer-nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: .85rem 0;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  font-weight: 300;
  line-height: 1.1;
  transition: color .3s var(--ease), padding-left .4s var(--ease);
}
.drawer-nav a:hover { color: var(--champagne-deep); padding-left: .6rem; }
.drawer-nav .num {
  font-family: var(--sans);
  font-size: .625rem;
  letter-spacing: .2em;
  color: var(--ink-mute);
}

.drawer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--line);
  opacity: 0;
  transition: opacity .6s var(--ease) .55s;
}
.drawer.is-open .drawer-foot { opacity: 1; }
.drawer-foot .socials { display: flex; gap: 1.15rem; }
.drawer-foot a.meta {
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.drawer-foot svg { width: 17px; height: 17px; }

/* ==========================================================================
   Floating consultation button
   ========================================================================== */

/* Its own colours, stated for each theme. It used to paint itself with
   --ink, which is dark on a light page and CREAM on a dark one — so in dark
   mode it was white text on a cream pill, which is nothing at all. */
.cta-fab {
  --fab-bg: #1c1914;
  --fab-fg: #ffffff;
  --fab-disc: var(--champagne-deep, #a5834b);
  --fab-disc-fg: #ffffff;

  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  height: 54px;
  padding: 0 1.25rem 0 .5rem;
  background: var(--fab-bg);
  color: var(--fab-fg);
  border-radius: 99px;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .5);
  transform: translateY(120%);
  opacity: 0;
  transition: transform .7s var(--ease), opacity .5s var(--ease),
              box-shadow .4s var(--ease), background .4s var(--ease);
}
:root[data-theme="dark"] .cta-fab {
  --fab-bg: #D9CDB6;          /* champagne, so it lifts off a dark page */
  --fab-fg: #1c1914;
  --fab-disc: rgba(28, 25, 20, .9);
  --fab-disc-fg: #D9CDB6;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .8);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cta-fab {
    --fab-bg: #D9CDB6;
    --fab-fg: #1c1914;
    --fab-disc: rgba(28, 25, 20, .9);
    --fab-disc-fg: #D9CDB6;
  }
}
.cta-fab.is-ready { transform: none; opacity: 1; }
.cta-fab:hover {
  --fab-bg: var(--champagne-deep, #a5834b);
  --fab-fg: #ffffff;
  --fab-disc: rgba(255, 255, 255, .18);
  --fab-disc-fg: #ffffff;
  box-shadow: 0 18px 42px -12px rgba(165, 131, 75, .55);
}
:root[data-theme="dark"] .cta-fab:hover { --fab-bg: #EFE6D4; --fab-fg: #1c1914; --fab-disc: rgba(28,25,20,.9); --fab-disc-fg: #EFE6D4; }

/* the icon rides in its own disc, so the button reads as a mark first and a
   sentence second */
.cta-fab-ic {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--fab-disc);
  color: var(--fab-disc-fg);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.cta-fab-ic svg { width: 19px; height: 19px; }

.cta-fab .label {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* On a phone the sentence would eat the screen, so it collapses to the mark
   alone — still a clear door, and out of the way of the page. */
@media (max-width: 560px) {
  .cta-fab { padding: 0; width: 54px; justify-content: center; gap: 0; }
  .cta-fab .label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-fab { transition: opacity .3s linear; transform: none; }
}

/* ---------- Scroll progress hairline ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  height: 2px;
  width: 100%;
  background: var(--champagne-deep);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ==========================================================================
   Header responsive
   ========================================================================== */

@media (max-width: 1240px) {
  :root { --nav-h: var(--nav-h-sm); }
  .nav { display: none; }
  .burger { display: block; grid-column: 1; justify-self: start; }
  .header-inner { grid-template-columns: auto 1fr auto; }
  .brand { grid-column: 2; justify-self: start; margin-left: .5rem; }
  .nav-right { grid-column: 3; }
  .brand img { height: 26px; }
  .site-header.is-scrolled .brand img { height: 24px; }
}

@media (max-width: 520px) {
  .topbar { font-size: .5625rem; letter-spacing: .18em; padding: .55rem .75rem; }
  .theme-toggle { width: 48px; height: 26px; }
  .theme-toggle .knob { width: 18px; height: 18px; }
  :root[data-theme="dark"] .theme-toggle .knob { left: 26px; }
  .cta-fab { height: 50px; width: 50px; }
  .cta-fab-ic { width: 34px; height: 34px; }
}