:root {
  --navy: #0A1F44;
  --teal: #009688;
  --gold: #F5A623;
  --magenta: #E91E63;
  --magenta-deep: #C2185B;
  --magenta-tint: rgba(233, 30, 99, 0.10);
  --magenta-tint-strong: rgba(233, 30, 99, 0.18);
  --ah-cta-accent: #D81B60;
  --ah-cta-border: #B01450;
}

/* ============================================================================
   RESTORED 2026-08-08. These tokens lived in group-menu.css, which every page
   stopped linking during the 2026-08-07 estate rollout in favour of
   /ah-shared/autohive-services-menu.css. That file only scopes its own colour
   variables to its own .ahs component, so every other use on this site (the
   "What lives inside the studio" hexagon icons, keeper-tile and about-cta
   buttons, the AI Cloning pricing cards, the Clone Marketplace) was silently
   left with no value at all: invalid stroke/fill/background, rendering as
   nothing rather than a colour. Restored verbatim from group-menu.css so
   every division and studio-room card carries its correct, distinct accent
   again. The old file's .ah-utility-strip/.ah-services/.svc-tile rules are
   NOT restored: partials.js no longer builds that markup, the new .ahs bar
   from autohive-services-menu.js replaced it, and those rules would only
   apply to elements that no longer exist.
   ============================================================================ */
:root {
  --ah-colour-navy: #0A1F44;
  --ah-colour-teal: #009688;
  --ah-colour-gold: #F5A623;

  --ah-marketing-accent:   #D16621;
  --ah-marketing-on-white: #BB5B1E;
  --ah-business-accent:    #33578C;
  --ah-business-on-white:  #33578C;
  --ah-webdev-accent:      #E5A100;
  --ah-webdev-on-white:    #9B6D00;
  --ah-beehive-accent:     #218C5E;
  --ah-beehive-on-white:   #20865A;
  --ah-thinktank-accent:   #D81B60;
  --ah-thinktank-on-white: #D81B60;
  --ah-glasscastle-accent:   #D81B60;
  --ah-glasscastle-on-white: #D81B60;

  --ah-room-equipment:      #D81B60;
  --ah-room-equipment-text: #D81B60;
  --ah-room-edit:           #5B3A8C;
  --ah-room-edit-text:      #5B3A8C;
  --ah-room-beehive:        #F5A623;
  --ah-room-beehive-text:   #A56A08;
  --ah-room-power:          #2E7D32;
  --ah-room-power-text:     #2E7D32;
  --ah-room-safe:           #2C5F8D;
  --ah-room-safe-text:      #2C5F8D;
  --ah-room-nature:         #009688;
  --ah-room-nature-text:    #008478;
  --ah-room-edit-tint:      #B39DDB;
}

/* ---------- Hero with wall-art banner ---------- */
.hero-section {
  background: var(--navy);
  position: relative;
  isolation: isolate;
  min-height: 540px;
}
@media (min-width: 768px)  { .hero-section { min-height: 620px; } }
@media (min-width: 1280px) { .hero-section { min-height: 720px; } }

/* Responsive <picture> banner: covers section edge-to-edge, scales to viewport */
.hero-art-bg {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-art-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  display: block;
}
@media (min-width: 1024px) {
  .hero-art-bg img { object-position: 50% 50%; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(10,31,68,0.10) 0%, rgba(10,31,68,0.30) 55%, rgba(10,31,68,0.55) 100%),
    linear-gradient(180deg, rgba(10,31,68,0.85) 0%, rgba(10,31,68,0.55) 4.5rem, rgba(10,31,68,0.30) 45%, rgba(10,31,68,0.70) 100%),
    linear-gradient(90deg, transparent 0%, transparent 55%, rgba(10,31,68,0.78) 100%);
  z-index: 1;
}
.hero-section .hex-bg { z-index: 2; opacity: 0.05; }
.hero-section > .relative {
  z-index: 3;
  position: absolute;
  inset: 4.5rem 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Scale hero titles to fit the tighter banner. Both lines exactly the same size. */
/* Use class selector with high specificity to beat Tailwind utilities. */
.hero-section .hero-title.hero-title {
  font-size: clamp(1.4rem, 5vw, 4.25rem) !important;
  line-height: 1.02 !important;
  margin: 0 !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: none !important;
}
.hero-section .hero-title + .hero-title { margin-top: 0.15rem !important; }

/* Eyebrow */
.hero-section .relative > p.tracking-\[0\.25em\] {
  font-size: clamp(0.65rem, 1.1vw, 0.9rem) !important;
  margin-bottom: clamp(0.4rem, 1vw, 1rem) !important;
}
/* Magenta divider bar */
.hero-section .relative > span.block { margin: clamp(0.5rem, 1.2vw, 1rem) auto !important; }
/* Tagline + sub-tagline */
.hero-section .relative > p.font-display.font-500 {
  font-size: clamp(0.85rem, 1.6vw, 1.6rem) !important;
  margin: 0 auto !important;
}
.hero-section .relative > p.text-white\/85 {
  font-size: clamp(0.72rem, 1.1vw, 1rem) !important;
  margin-top: clamp(0.4rem, 0.8vw, 0.75rem) !important;
}
/* CTA row */
.hero-section .relative > div:last-child { margin-top: clamp(0.75rem, 1.5vw, 1.5rem) !important; }

/* ---------- Magenta accent helpers ---------- */
.eyebrow-magenta {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.7rem;
  color: var(--magenta);
}
.bar-magenta { background: var(--magenta); }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { -webkit-font-smoothing: antialiased; }

/* The mobile drawer is position:fixed and parked at translateX(100%) when
   closed, which counts toward the document's scrollable width. On a 375px
   phone that made the page 750px wide: a whole empty screen the reader
   could scroll sideways into, and it dragged the consent banner and the
   floating bee button out with it. Clamping on both html and body is the
   only variant that removes it; clip, and hiding the drawer, do not. */
html, body { overflow-x: hidden; }

/* ---------- Weight helpers (Lato) ---------- */
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

/* ---------- Section title ---------- */
.section-title {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.1;
  color: var(--navy);
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-secondary,
.btn-on-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  padding: .8rem 1.6rem;
  border-radius: .6rem;
  transition: all .2s ease;
  cursor: pointer;
}
.btn-primary {
  background: var(--navy);
  color: #fff;
  border: 2px solid var(--navy);
}
.btn-primary:hover { background: var(--teal); border-color: var(--teal); }

.btn-secondary {
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-secondary:hover { border-color: var(--gold); }

/* White-outline CTA for use on the navy hero */
.btn-on-navy {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.55);
}
.btn-on-navy:hover { border-color: var(--magenta); color: var(--magenta); background: rgba(233, 30, 99, 0.08); }

/* ---------- Hex backgrounds ---------- */
.hex-bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/hex-pattern.svg");
  background-size: 180px 156px;
  opacity: 0.08;
  pointer-events: none;
}
.hex-bg--faint { opacity: 0.05; }

.hex-art {
  width: 100%;
  /* Matches the about-studio-1042.webp photo exactly (1042x583), so
     background-size:cover below needs no meaningful crop and the whole
     room stays in frame instead of a square crop losing most of the width. */
  aspect-ratio: 1042 / 583;
  max-width: 560px;
  margin-inline: auto;
  background-image: url("assets/hex-pattern.svg");
  background-size: 110px 95px;
  background-position: center;
  border: 2px solid rgba(194, 24, 91, 0.25);
  border-radius: 1rem;
  position: relative;
  filter: invert(11%) sepia(43%) saturate(2200%) hue-rotate(190deg) brightness(40%);
}
.hex-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/logo.svg") center/45% no-repeat;
  filter: invert(1);
}

/* ---------- Section divider ---------- */
.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--teal), transparent);
  margin: 0 auto;
  max-width: 1180px;
  position: relative;
}
.hex-glyph {
  width: 22px; height: 22px;
  background: #fff;
  border: 2px solid var(--teal);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  position: relative;
  top: 0;
}

/* ---------- Hexagon icon (cards) ---------- */
.hex-icon {
  width: 60px; height: 60px;
  aspect-ratio: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(194, 24, 91, 0.12);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  color: var(--magenta);
  padding: 10px;
}
.hex-icon svg, .hex-icon img {
  width: 100%; height: 100%;
  max-width: 40px; max-height: 40px;
  object-fit: contain; display: block;
  stroke-width: 1.8;
}

/* ---------- Cards ---------- */
.card {
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.12);
  border-radius: .9rem;
  padding: 1.5rem;
}
.card--tt { border-top: 4px solid var(--magenta); }

.pkg-card {
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.12);
  border-top: 4px solid var(--magenta);
  border-radius: 1rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pkg-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -18px rgba(10, 31, 68, 0.35);
}
.pkg-card--feature {
  background: var(--navy);
  color: #fff;
  border-top-color: var(--gold);
}
.pkg-card--feature .pkg-incl { color: rgba(255,255,255,0.8); }

/* ---------- Waiver list ---------- */
.waiver-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(10, 31, 68, 0.82);
}
.waiver-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .35rem;
  width: 12px; height: 12px;
  background: var(--magenta);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* ---------- FAQ ---------- */
.faq-item button {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy);
}
.faq-item .faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item .faq-a p { padding-bottom: 1.25rem; color: rgba(10,31,68,0.75); line-height: 1.6; }
.faq-item.open .faq-a { max-height: 320px; }
.faq-item .faq-toggle {
  flex: none;
  width: 24px; height: 24px;
  color: var(--teal);
  transition: transform .3s ease;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); }

/* ---------- Override magenta references to brighter brand magenta ---------- */
.hex-icon {
  background: rgba(233, 30, 99, 0.16) !important;
  border: 1.5px solid #E91E63 !important;
  color: #E91E63 !important;
}
.card--tt { border-top-color: #E91E63 !important; }
.pkg-card { border-top-color: #E91E63 !important; }
.pkg-card--feature {
  background: linear-gradient(160deg, #0A1F44 0%, #142a55 100%) !important;
  border-top: 4px solid #E91E63 !important;
  box-shadow: 0 24px 50px -24px rgba(233, 30, 99, 0.45);
  position: relative;
}
.pkg-card--feature::before {
  content: "Most popular";
  position: absolute;
  top: -12px; left: 50%; transform: translateX(-50%);
  background: #E91E63;
  color: #fff;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.waiver-list li::before { background: #E91E63 !important; }
.section-divider {
  background: linear-gradient(to right, transparent, #E91E63, transparent) !important;
}
.hex-glyph {
  background: #E91E63 !important;
  border-color: #E91E63 !important;
}
.faq-item .faq-toggle { color: #E91E63 !important; }
.hex-art {
  background:
    linear-gradient(135deg, rgba(10,31,68,0.35) 0%, rgba(233,30,99,0.25) 100%),
    url("assets/about-studio-1042.webp") center/cover no-repeat !important;
  border: 2px solid #E91E63 !important;
  box-shadow: 0 18px 50px -20px rgba(233, 30, 99, 0.45);
  filter: none !important;
  overflow: hidden;
}
.hex-art::after { display: none !important; }

/* embedded bee marks via mask */
.bee-mark {
  display: inline-block;
  background: currentColor;
  -webkit-mask: url("assets/bee.svg") center/contain no-repeat;
          mask: url("assets/bee.svg") center/contain no-repeat;
}

/* ============================================================
   PLATFORM v2, shared header nav, dropdowns, BEE, consent
   ============================================================ */

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--magenta);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 .5rem 0;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* visible focus everywhere for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Sticky platform header ---------- */
.tt-header {
  position: fixed; top: 0; inset-inline: 0; z-index: 1000;
  background: rgba(10,31,68,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.tt-header.scrolled { box-shadow: 0 8px 30px -12px rgba(0,0,0,0.5); }
/* Smaller, mobile-friendlier header */
.tt-header__inner {
  max-width: 1180px; margin: 0 auto;
  height: 4rem; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.tt-logo { display: flex; align-items: center; gap: .65rem; flex: 0 0 auto; }
.tt-logo img { height: 2.6rem; width: auto; background: transparent; padding: 0; border-radius: 0; }
.tt-logo__txt { display: none; flex-direction: column; line-height: 1.1; }
@media (min-width: 768px) { .tt-logo__txt { display: flex; } }
.tt-logo__name { font-family:'Lato',Arial,sans-serif; font-weight:700; color:#fff; font-size:.78rem; letter-spacing:.03em; }
.tt-logo__sub { color: var(--magenta); font-size: 10.5px; font-weight: 600; letter-spacing:.04em; text-transform: uppercase; display:flex; align-items:center; gap:.25rem; margin-top: 2px; }

/* AutoHive parent stamp on right side */
.tt-parent { display:none; align-items:center; gap:.45rem; padding:.25rem .55rem; background: transparent; border:1px solid rgba(255,255,255,0.16); border-radius:.45rem; margin-right:.25rem; text-decoration:none; flex-shrink:0; transition: border-color .15s ease; }
.tt-parent:hover { border-color: var(--gold); }
.tt-parent img { height: 1.75rem; width:auto; flex-shrink:0; }
.tt-parent__txt { font-family:'Lato',Arial,sans-serif; font-weight:700; font-size:.62rem; line-height:1.1; color:#fff; letter-spacing:.04em; text-transform: uppercase; white-space: nowrap; }
.tt-parent__txt small { display:block; font-size:.5rem; font-weight:500; color: rgba(255,255,255,0.55); letter-spacing:.06em; margin-top:1px; }
@media (min-width: 1280px) { .tt-parent { display: inline-flex; } }

/* desktop nav */
.tt-nav { display: none; align-items: center; gap: .15rem; }
@media (min-width: 1024px) { .tt-nav { display: flex; } }
.tt-nav__link { white-space: nowrap; font-size: .82rem; padding: .55rem .75rem; }
.tt-nav__item { position: relative; }
.tt-nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family:'Lato',Arial,sans-serif; font-weight:500; font-size:.9rem;
  color: rgba(255,255,255,0.82); padding: .55rem .75rem; border-radius: .45rem;
  transition: color .18s ease, background .18s ease; cursor: pointer; background:none; border:none;
}
.tt-nav__link:hover, .tt-nav__item:hover .tt-nav__link,
.tt-nav__item:focus-within .tt-nav__link { color:#fff; background: rgba(255,255,255,0.07); }
.tt-nav__caret { width: 14px; height: 14px; transition: transform .2s ease; }
.tt-nav__item:hover .tt-nav__caret, .tt-nav__item:focus-within .tt-nav__caret { transform: rotate(180deg); }

/* dropdown panel */
.tt-drop {
  position: absolute; top: calc(100% + .35rem); left: 0;
  min-width: 280px; background: #fff;
  border-top: 3px solid var(--magenta);
  border-radius: .6rem; box-shadow: 0 20px 50px -18px rgba(0,0,0,0.45);
  padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 1001;
}
.tt-nav__item:hover .tt-drop, .tt-nav__item:focus-within .tt-drop,
.tt-drop.open { opacity: 1; visibility: visible; transform: translateY(0); }
.tt-drop__link {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .7rem .85rem; border-radius: .45rem; color: var(--navy);
  font-family:'Lato',Arial,sans-serif; transition: background .15s ease, color .15s ease;
  border-left: 4px solid transparent;
}
.tt-drop__link:hover, .tt-drop__link:focus-visible { background: var(--navy); color:#fff; }
.tt-drop__link strong { font-weight: 600; font-size: .92rem; }
.tt-drop__link span { font-size: .78rem; color: rgba(10,31,68,0.6); }
.tt-drop__link:hover span, .tt-drop__link:focus-visible span { color: rgba(255,255,255,0.75); }

/* ----- Services mega-menu: six AutoHive pillar tiles ----- */
/* Mega-menu: anchor under the Services item and extend rightward. The
   Services item sits left-of-centre, so a left-anchored 760px panel stays
   on screen at desktop widths. A wrapping flag keeps it inside the viewport. */
.tt-drop--mega {
  left: 0; right: auto;
  width: 760px; max-width: calc(100vw - 2rem); padding: .9rem;
}
.svc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
}
@media (max-width: 1080px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
.svc-tile {
  position: relative; display: flex; flex-direction: column; gap: .45rem;
  background:#fff; border: 1px solid rgba(10,31,68,0.08);
  border-radius: .6rem; padding: 1rem .9rem .9rem; overflow: hidden;
  text-decoration: none; color: var(--navy);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.svc-tile__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--svc);
}
.svc-tile:hover, .svc-tile:focus-visible {
  transform: translateY(-4px);
  border-color: var(--svc);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--svc) 55%, transparent);
  outline: none;
}
.svc-tile__head { display: flex; align-items: flex-start; gap: .55rem; }
.svc-tile__hex { width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain; }
.svc-tile__hex--wide { width: 72px; height: 44px; }
.tt-logo__mark { display: block; object-fit: contain; }
.svc-tile__name {
  font-family:'Lato',Arial,sans-serif; font-weight: 700; font-size: .9rem;
  line-height: 1.2; color: var(--navy);
}
.svc-tile__flag {
  display: inline-block; margin-left: .35rem; vertical-align: middle;
  font-family:'Inter',sans-serif; font-weight: 600; font-size: .58rem;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--svc); border: 1px solid var(--svc);
  border-radius: 999px; padding: .05rem .4rem;
}
.svc-tile__tag {
  font-family:'Inter',sans-serif; font-size: .75rem; color: rgba(10,31,68,0.62);
  line-height: 1.35;
}
.svc-tile__subs { list-style: none; margin: .15rem 0 0; padding: 0; display: grid; gap: .25rem; }
.svc-tile__subs li {
  display: flex; align-items: center; gap: .45rem;
  font-family:'Inter',sans-serif; font-size: .74rem; color: var(--navy);
}
.svc-tile__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }

/* ----- about.html: How AutoHive thinks (5 pillars) ----- */
.think-pillar {
  position: relative; background:#fff; border: 1px solid rgba(10,31,68,0.08);
  border-top: 4px solid var(--p); border-radius: .7rem;
  padding: 1.4rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem;
}
.think-pillar__no {
  font-family:'Lato',Arial,sans-serif; font-weight: 700; font-size: 1.4rem;
  color: var(--p); line-height: 1;
}
.think-pillar__h {
  font-family:'Lato',Arial,sans-serif; font-weight: 600; font-size: .98rem;
  color: var(--navy); line-height: 1.25; margin: 0;
}
.think-pillar__p {
  font-family:'Inter',sans-serif; font-size: .82rem; line-height: 1.5;
  color: rgba(10,31,68,0.68); margin: 0;
}

/* header actions */
.tt-actions { display: flex; align-items: center; gap: .65rem; flex-shrink: 0; }

/* WhatsApp icon button that mirrors the left-hand logo in size and weight. */
.tt-wa {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem;
  flex: 0 0 auto;
  border-radius: .5rem;
  background: transparent;
  transition: transform .18s ease, background .18s ease;
}
.tt-wa img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tt-wa:hover, .tt-wa:focus-visible { transform: translateY(-2px); background: rgba(233,30,99,0.10); outline: none; }
/* On mobile: hide the desktop CTAs, show only the burger */
@media (max-width: 1023px) {
  .tt-actions .btn-bee { display: none; }
  .tt-actions .tt-wa { width: 2.4rem; height: 2.4rem; }
}
.btn-bee {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family:'Lato',Arial,sans-serif; font-weight:600; font-size:.82rem;
  padding: .5rem .85rem; border-radius: .55rem;
  background: var(--magenta); color:#fff; border: 2px solid var(--magenta);
  cursor:pointer; transition: background .18s ease, border-color .18s ease;
}
.btn-bee:hover { background: var(--magenta-deep); border-color: var(--magenta-deep); }
.btn-bee__hex { width: 16px; height: 16px; background:#fff;
  -webkit-mask: url("assets/bee.svg") center/contain no-repeat; mask: url("assets/bee.svg") center/contain no-repeat; }

/* mobile menu button */
.tt-burger { display: inline-flex; background:none; border:none; color:#fff; padding:.4rem; cursor:pointer; }
@media (min-width: 1024px) { .tt-burger { display: none; } }
.tt-burger svg { width: 26px; height: 26px; }

/* mobile drawer */
.tt-mobile {
  position: fixed; inset: 4rem 0 0 0; z-index: 999;
  background: var(--navy); overflow-y: auto;
  transform: translateX(100%); transition: transform .25s ease;
  padding: 1.25rem; display: flex; flex-direction: column; gap: .25rem;
}
.tt-mobile.open { transform: translateX(0); }
.tt-mobile a, .tt-mobile button {
  text-align: left; color:#fff; font-family:'Lato',Arial,sans-serif; font-weight:500;
  padding: .85rem .5rem; background:none; border:none; border-bottom:1px solid rgba(255,255,255,0.08);
  font-size: 1rem; cursor: pointer; width: 100%;
}
.tt-mobile .tt-mobile__group { font-weight:700; color: var(--gold); padding-top: 1rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; border:none; }
.tt-mobile .tt-mobile__sub { padding-left: 1.25rem; font-size:.92rem; color: rgba(255,255,255,0.82); }
.tt-mobile .tt-mobile__div { border-left: 3px solid var(--svc); padding-left: 0.7rem; }

/* ---------- Page hero (interior pages) ---------- */
.page-hero { position: relative; background: var(--navy); color:#fff; isolation:isolate; overflow:hidden; padding: 7.5rem 0 4rem; }
.page-hero__art { position:absolute; inset:0; background-image:url("assets/hero-banner-1920.webp"); background-size:cover; background-position:center 35%; z-index:0; opacity:.5; }
.page-hero__ov { position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(10,31,68,0.92) 0%, rgba(10,31,68,0.7) 50%, rgba(10,31,68,0.92) 100%),
  radial-gradient(circle at 20% 30%, rgba(233,30,99,0.35), transparent 55%); }
.page-hero .hex-bg { z-index:2; opacity:.06; }
.page-hero__inner { position: relative; z-index:3; max-width: 1180px; margin:0 auto; padding: 0 1.25rem; }

/* ---------- Studio gallery placeholders ---------- */
.gallery-grid { display:grid; grid-template-columns: repeat(1,1fr); gap: 1rem; }
@media (min-width:640px){ .gallery-grid{ grid-template-columns: repeat(2,1fr);} }
@media (min-width:900px){ .gallery-grid{ grid-template-columns: repeat(3,1fr);} }
.photo-slot {
  position: relative; aspect-ratio: 4/3; border-radius: .8rem; overflow:hidden;
  border: 1px solid rgba(10,31,68,0.12);
  background:
    linear-gradient(135deg, rgba(10,31,68,0.06) 0%, rgba(233,30,99,0.08) 100%),
    url("assets/hex-pattern.svg");
  background-size: cover, 90px 78px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.photo-slot__file {
  position:absolute; top:.6rem; left:.6rem; font-family:'Lato',Arial,sans-serif; font-size:.66rem;
  color: rgba(10,31,68,0.55); background: rgba(255,255,255,0.85); padding:.15rem .5rem; border-radius:999px;
}
.photo-slot__cap { background: linear-gradient(transparent, rgba(10,31,68,0.85)); color:#fff; padding:1.2rem .9rem .8rem; font-size:.85rem; font-family:'Lato',Arial,sans-serif; font-weight:500; }
.photo-slot--hero { aspect-ratio: 16/7; }

/* ---------- Service tiles (home + nav) ---------- */
.svc-tile { display:block; background:#fff; border:1px solid rgba(10,31,68,0.12); border-radius:.9rem; padding:1.4rem; transition: transform .18s ease, box-shadow .18s ease; }
.svc-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(10,31,68,0.3); }
.svc-tile__bar { height: 6px; border-radius:999px; width: 56px; margin-bottom: 1rem; }
.svc-tile h3 { font-family:'Lato',Arial,sans-serif; font-weight:700; font-size:1.05rem; color:var(--navy); }
.svc-tile p { font-size:.85rem; color: rgba(10,31,68,0.7); margin-top:.4rem; }

/* ---------- Property cards ---------- */
.prop-card { display:flex; flex-direction:column; background:#fff; border:1px solid rgba(10,31,68,0.12); border-top:4px solid var(--gold); border-radius:1rem; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease; }
.prop-card:hover { transform: translateY(-4px); box-shadow:0 18px 40px -18px rgba(245,166,35,0.4); }
.prop-card__body { padding:1.4rem; display:flex; flex-direction:column; flex:1; }

/* booking buttons */
.btn-book { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; font-family:'Lato',Arial,sans-serif; font-weight:600; font-size:.85rem; padding:.7rem .9rem; border-radius:.55rem; color:#fff; border:2px solid transparent; transition: filter .18s ease; }
.btn-book:hover { filter: brightness(1.08); }
.btn-book--direct { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.btn-book--airbnb { background:#FF5A5F; border-color:#FF5A5F; }
.btn-book--booking { background:#003580; border-color:#003580; }
.btn-book--lekke { background:#7EBA00; color: var(--navy); border-color:#7EBA00; }

/* quick facts */
.qfacts { display:grid; grid-template-columns: repeat(2,1fr); gap:.75rem; }
@media (min-width:640px){ .qfacts{ grid-template-columns: repeat(4,1fr);} }
.qfact { text-align:center; background: rgba(10,31,68,0.03); border:1px solid rgba(10,31,68,0.08); border-radius:.7rem; padding:1rem .5rem; }
.qfact strong { display:block; font-family:'Lato',Arial,sans-serif; font-weight:800; font-size:1.6rem; color:var(--magenta); }
.qfact span { font-size:.75rem; color: rgba(10,31,68,0.65); }

/* infra tiles */
.infra-tile { background:#fff; border:1px solid rgba(10,31,68,0.12); border-left:4px solid var(--teal); border-radius:.8rem; padding:1.4rem; }
.infra-tile h3 { font-family:'Lato',Arial,sans-serif; font-weight:600; color:var(--navy); font-size:1rem; }
.infra-tile p { font-size:.85rem; color: rgba(10,31,68,0.7); margin-top:.4rem; }

/* spec list */
.spec-row { display:flex; gap:.75rem; align-items:flex-start; padding:.7rem 0; border-top:1px solid rgba(255,255,255,0.1); }
.spec-row .hexdot { flex:none; width:12px; height:12px; margin-top:.35rem; background: var(--magenta);
  -webkit-clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%); }

/* form fields */
.field { display:block; margin-bottom:1rem; }
.field label { display:block; font-family:'Lato',Arial,sans-serif; font-weight:600; font-size:.85rem; color:var(--navy); margin-bottom:.4rem; }
.field input, .field select, .field textarea {
  width:100%; padding:.7rem .85rem; border:1px solid rgba(10,31,68,0.25); border-radius:.5rem; font-size:.95rem; font-family:'Inter',sans-serif; color:var(--navy); background:#fff;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--magenta); outline:none; box-shadow:0 0 0 3px rgba(233,30,99,0.15); }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Consent banner: full brand override (POPIA) ---------- */
/* Hidden by DEFAULT. JS removes the [hidden] attribute and adds .is-visible
   only after confirming the visitor has no stored consent. This guarantees the
   banner never flashes on a page where consent is already remembered. */
#consent-banner {
  display: none !important;
}
#consent-banner.is-visible {
  display: block !important;
  position: fixed !important;
  left: 50% !important;
  bottom: 16px !important;
  transform: translateX(-50%) !important;
  z-index: 9999 !important;
  width: calc(100% - 24px) !important;
  max-width: 920px !important;
  background: #ffffff !important;
  color: #0A1F44 !important;
  border: 1px solid rgba(10, 31, 68, 0.10) !important;
  border-top: 4px solid var(--magenta) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 50px rgba(10, 31, 68, 0.22) !important;
  padding: 0 !important;
}
#consent-banner[hidden] { display: none !important; }
.consent-banner-content {
  background: #ffffff !important;
  color: #0A1F44 !important;
  padding: 22px 24px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
#consent-banner-heading {
  color: #0A1F44 !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  margin: 0 0 6px 0 !important;
}
#consent-banner-body {
  color: rgba(10, 31, 68, 0.78) !important;
  margin: 0 0 14px 0 !important;
  font-size: 14px !important;
}
.consent-banner-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 4px 0 12px 0 !important;
}
.consent-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  border: 1.5px solid transparent !important;
  transition: all 160ms ease !important;
  text-decoration: none !important;
  line-height: 1 !important;
  min-height: 42px !important;
}
.consent-button--primary {
  background: var(--magenta) !important;
  border-color: var(--magenta) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(233, 30, 99, 0.25) !important;
}
.consent-button--primary:hover,
.consent-button--primary:focus-visible {
  background: var(--magentaDeep, #C2185B) !important;
  border-color: var(--magentaDeep, #C2185B) !important;
  outline: 2px solid var(--magenta) !important;
  outline-offset: 2px !important;
}
#consent-decline-all.consent-button--primary {
  background: #ffffff !important;
  color: #0A1F44 !important;
  border-color: rgba(10, 31, 68, 0.25) !important;
  box-shadow: none !important;
}
#consent-decline-all.consent-button--primary:hover,
#consent-decline-all.consent-button--primary:focus-visible {
  background: rgba(10, 31, 68, 0.04) !important;
  border-color: #0A1F44 !important;
  color: #0A1F44 !important;
}
.consent-button--secondary {
  background: transparent !important;
  color: var(--magenta) !important;
  border-color: transparent !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  padding: 10px 8px !important;
  box-shadow: none !important;
}
.consent-button--secondary:hover,
.consent-button--secondary:focus-visible {
  color: var(--magentaDeep, #C2185B) !important;
  background: transparent !important;
  outline: none !important;
}
.consent-banner-footer {
  margin: 8px 0 0 0 !important;
  font-size: 12.5px !important;
  color: rgba(10, 31, 68, 0.65) !important;
}
.consent-banner-footer a { color: var(--magenta) !important; text-decoration: underline !important; }
.consent-banner-footer a:hover { color: var(--magentaDeep, #C2185B) !important; }

/* Preferences panel inside the banner */
#consent-preferences-panel {
  margin-top: 14px !important;
  padding: 14px 16px !important;
  background: rgba(10, 31, 68, 0.03) !important;
  border: 1px solid rgba(10, 31, 68, 0.08) !important;
  border-radius: 10px !important;
}
.consent-category {
  border: none !important;
  padding: 8px 0 !important;
  margin: 0 !important;
}
.consent-category + .consent-category { border-top: 1px solid rgba(10, 31, 68, 0.08) !important; }
.consent-category legend {
  color: #0A1F44 !important;
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 0 !important;
}
.consent-category p {
  color: rgba(10, 31, 68, 0.70) !important;
  font-size: 12.5px !important;
  margin: 4px 0 0 0 !important;
}

@media (max-width: 480px) {
  #consent-banner { bottom: 10px !important; width: calc(100% - 16px) !important; border-radius: 12px !important; }
  .consent-banner-content { padding: 18px 18px !important; }
  .consent-banner-actions { gap: 8px !important; }
  .consent-button { width: 100% !important; padding: 11px 14px !important; }
  .consent-button--secondary { width: auto !important; padding: 10px 6px !important; }
}

/* ============ About page sections ============ */
.about-block { padding: 4rem 0; position: relative; }
@media (min-width: 768px) { .about-block { padding: 5.5rem 0; } }
.about-block__inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: justify;
  color: rgba(10, 31, 68, 0.88);
}
.about-block__inner > p {
  margin: 0 0 1.1rem 0;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.about-block__inner h2.section-title { margin: 0 0 1.5rem 0; }
.about-block__inner--on-navy { color: rgba(255, 255, 255, 0.92); }
.about-block__inner--on-navy > p { color: rgba(255, 255, 255, 0.88); }
.about-block__pull {
  display: block;
  font-family: 'Lato', Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.25rem !important;
  color: var(--magenta) !important;
  text-align: center;
  margin: 1.5rem 0 1.5rem 0 !important;
  letter-spacing: -0.01em;
}
.about-block__inner--on-navy .about-block__pull { color: #ffd1dc !important; }

.about-block__terms { text-align: center; margin-top: 1.5rem !important; }
.about-block__terms-link {
  display: inline-block;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.65rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.about-block__terms-link:hover,
.about-block__terms-link:focus-visible {
  border-color: var(--magenta);
  color: #fff;
  background: rgba(233, 30, 99, 0.12);
  outline: none;
}

/* ============ Keeper tiles (BeeHive Keeper block on Terms) ============ */
.keeper-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
@media (min-width: 768px) { .keeper-grid { grid-template-columns: 1fr 1fr; } }

.keeper-tile {
  position: relative;
  display: flex; flex-direction: column; gap: .75rem;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: .9rem;
  padding: 1.5rem 1.4rem 1.4rem;
  overflow: hidden;
  text-align: left;
  text-decoration: none;
  color: var(--navy);
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.keeper-tile:hover, .keeper-tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--svc, var(--magenta));
  box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--svc, #E91E63) 50%, transparent);
  outline: none;
}
.keeper-tile__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--svc, var(--magenta));
}
.keeper-tile__head {
  display: flex; align-items: center; gap: .85rem;
  margin-top: .25rem;
}

/* Hex frame: 52x52 with 8px padding leaves the SVG inside the
   geometric safe zone, never touching the clipped corners. */
.keeper-tile__hex {
  width: 52px; height: 52px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--svc, #E91E63) 14%, transparent);
  border: 1.5px solid var(--svc, var(--magenta));
  color: var(--svc, var(--magenta));
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  padding: 8px;
}
.keeper-tile__hex svg {
  width: 100%; height: 100%;
  max-width: 36px; max-height: 36px;
  object-fit: contain; display: block;
  stroke-width: 1.8;
}
.keeper-tile__title {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--navy);
  line-height: 1.2;
  display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
}
.keeper-tile__flag {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--svc, var(--magenta));
  border: 1px solid var(--svc, var(--magenta));
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}
.keeper-tile__desc {
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(10,31,68,0.75);
  margin: .25rem 0 .35rem;
}
.keeper-tile__subs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .35rem;
}
.keeper-tile__subs li {
  display: flex; align-items: center; gap: .55rem;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  color: rgba(10,31,68,0.82);
}
.keeper-tile__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--svc, var(--magenta));
  flex: 0 0 auto;
}

/* ============ About CTA action boxes (Services-style tiles) ============ */
.about-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}
@media (min-width: 720px) { .about-cta-grid { grid-template-columns: repeat(2, 1fr); } }

.about-cta {
  --svc: #E91E63;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.75rem 1.5rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: .85rem;
  text-decoration: none;
  color: var(--navy);
  box-shadow: 0 12px 28px -16px rgba(0,0,0,0.35);
  transition: transform .25s ease, box-shadow .25s ease;
  isolation: isolate;
  overflow: hidden;
  text-align: left;
}
.about-cta__bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px; background: var(--svc);
  border-top-left-radius: .85rem; border-top-right-radius: .85rem;
}
.about-cta__eyebrow {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--svc);
}
.about-cta__title {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--navy);
  margin-top: .15rem;
}
.about-cta__desc {
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(10, 31, 68, 0.72);
  margin-top: .35rem;
}
.about-cta__arrow {
  position: absolute;
  right: 1.25rem; bottom: 1.25rem;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--svc); color: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
}
.about-cta__arrow svg { width: 18px; height: 18px; }
.about-cta:hover,
.about-cta:focus-visible {
  transform: translateY(-4px);
  box-shadow:
    0 18px 35px -18px rgba(0,0,0,0.4),
    0 0 0 2px var(--svc);
  outline: none;
}
.about-cta:hover .about-cta__arrow { transform: translateX(4px); }

/* ============ Studio page buckets (Services-tile style) ============ */
.bucket-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  list-style: none;
  padding: 0;
}
@media (min-width: 640px)  { .bucket-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .bucket-grid { grid-template-columns: repeat(3, 1fr); } }

.bucket {
  --svc: #E91E63;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1.75rem 1.5rem 1.5rem 1.5rem;
  background: #fff;
  border-radius: .85rem;
  text-decoration: none;
  color: var(--navy);
  box-shadow: 0 12px 28px -18px rgba(0,0,0,0.25);
  transition: transform .25s ease, box-shadow .25s ease;
  isolation: isolate;
  overflow: hidden;
}
.bucket__bar {
  position: absolute; top: 0; left: 0; right: 0;
  height: 5px; background: var(--svc);
}
.bucket__head { display: flex; align-items: center; gap: .85rem; }
.bucket__eyebrow {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--svc);
  margin-top: .15rem;
}
/* Universal safety for any hex-clipped icon container, keeps the glyph inside the 6-sided window. */
.hex-safe { padding: 14% !important; }
.hex-safe > * { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ============ Role tiles (Network of Bees) ============ */
.role-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (min-width: 640px)  { .role-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .role-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .role-grid { grid-template-columns: repeat(5, 1fr); } }
.role-tile {
  position: relative;
  display: flex; flex-direction: column; gap: .5rem;
  background: #fff;
  border: 1px solid rgba(10,31,68,0.10);
  border-radius: .75rem;
  padding: 1.1rem 1rem 1rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.role-tile:hover {
  transform: translateY(-3px);
  border-color: var(--svc, var(--magenta));
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--svc, #E91E63) 45%, transparent);
}
.role-tile__bar {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--svc, var(--magenta));
}
.role-tile__hex {
  width: 52px; height: 52px;
  aspect-ratio: 1 / 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--svc, #E91E63) 14%, transparent);
  border: 1.5px solid var(--svc, var(--magenta));
  color: var(--svc, var(--magenta));
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  padding: 8px;
  margin-top: .25rem;
}
.role-tile__hex svg, .role-tile__hex img {
  width: 100%; height: 100%;
  max-width: 36px; max-height: 36px;
  object-fit: contain; display: block;
  stroke-width: 1.8;
}
.role-tile__name {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy);
  line-height: 1.25;
  margin-top: .15rem;
}
.role-tile__desc {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(10,31,68,0.7);
}

.bucket__hex {
  width: 64px; height: 64px;
  aspect-ratio: 1 / 1;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--svc);
  flex: 0 0 auto;
  padding: 0;
}
.bucket__hex svg, .bucket__hex img {
  width: 100%; height: 100%;
  max-width: 64px; max-height: 64px;
  object-fit: contain; display: block;
}
.bucket__name {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--navy);
}
.bucket__tag {
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  line-height: 1.55;
  color: rgba(10, 31, 68, 0.72);
  margin-top: .25rem;
}
.bucket__cta {
  margin-top: auto;
  padding-top: .9rem;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: var(--svc);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.bucket__cta svg {
  width: 16px; height: 16px;
  transition: transform .2s ease;
}
.bucket:hover,
.bucket:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(0,0,0,0.30),
              0 0 0 2px var(--svc);
  outline: none;
}
.bucket:hover .bucket__cta svg { transform: translateX(4px); }

/* ============ Kit lists (inside each bucket-detail section) ============ */
.kit-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .kit-list { grid-template-columns: repeat(2, 1fr); } }
.kit-list li {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.10);
  border-left: 3px solid var(--magenta);
  border-radius: .45rem;
}
.kit-list strong {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: var(--navy);
}
.kit-list span {
  font-size: .82rem;
  color: rgba(10, 31, 68, 0.65);
  line-height: 1.45;
}

/* ============ Photo rows in each bucket-detail section ============ */
.photo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
@media (min-width: 640px)  { .photo-row { grid-template-columns: repeat(3, 1fr); } }
.photo-row .photo-slot {
  aspect-ratio: 4 / 3;
  margin: 0;
}

/* The backdrop swatches: six shots of the same seat and lens, so they read
   as a set of options rather than unrelated photographs. Two up on a
   tablet, three across on desktop, matching the three-up rhythm used
   everywhere else on this page. Six cards divides into that evenly. */
@media (min-width: 640px)  { .photo-row--swatch { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .photo-row--swatch { grid-template-columns: repeat(3, 1fr); } }

/* The places around the studio. Three across, and when the count leaves
   a short final row the leftovers are centred rather than left-hanging.
   Six columns with every card spanning two gives the three-up rhythm;
   the offset below only fires on an odd count, so an even number of
   cards fills clean rows and is left alone. */
@media (min-width: 640px) and (max-width: 1023px) {
  .photo-row--places { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .photo-row--places { grid-template-columns: repeat(6, 1fr); }
  .photo-row--places > * { grid-column: span 2; }
  /* exactly five cards: centre the trailing two */
  .photo-row--places > *:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  /* exactly four or seven cards: centre the trailing one */
  .photo-row--places > *:nth-child(4):nth-last-child(1),
  .photo-row--places > *:nth-child(7):nth-last-child(1) { grid-column: 3 / span 2; }
}
/* These frames are 3:2 and carry a location badge in the bottom-left
   corner. The default 4:3 card crop takes 5.5% off each side, which
   clips the badge, so hold the source ratio. */
.photo-row--places .photo-card img { aspect-ratio: 3 / 2; }

/* The whole card is the link. An <a> cannot legally hold a <figcaption>,
   so these cards caption with .photo-card__cap instead, styled to match
   the figcaption on the photo cards above. */
.photo-card--link { text-decoration: none; color: inherit; }
.photo-card__cap {
  padding: .65rem .85rem;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: var(--navy);
  border-top: 1px solid rgba(10, 31, 68, 0.08);
  background: #fff;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}
.photo-card__km { color: var(--magenta, #E91E63); font-weight: 700; white-space: nowrap; }
.photo-card--link:hover .photo-card__cap { color: var(--magenta, #E91E63); }
.photo-card--link:focus-visible { outline: 3px solid var(--magenta, #E91E63); outline-offset: 3px; }

/* The two edit-suite photographs are wide flat-lay compositions (desk
   gear, the multiview screen). A 4:3 crop would cut the Mac Mini and the
   speaker off the desk shot, so this row holds 16:9 instead. */
.photo-row--edit .photo-card img { aspect-ratio: 16 / 9; }

/* ============ Photo carousel (rooms with more shots than fit a row) ============
   Native scroll-snap, no JS dependency for the swipe itself; the two
   arrow buttons just call scrollBy(). Three cards visible per "page" on
   desktop, sliding to reveal the next three. One full-width card per
   page on a phone, since three abreast there would be unreadable. */
.photo-carousel { position: relative; }
@media (max-width: 639px) { .photo-carousel { margin-bottom: 3.6rem; } }
.photo-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: .85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px; /* room for the focus ring without clipping */
}
@media (prefers-reduced-motion: reduce) { .photo-carousel__track { scroll-behavior: auto; } }
.photo-carousel__track::-webkit-scrollbar { display: none; }
.photo-carousel__track > .photo-card { scroll-snap-align: start; min-width: 0; }
@media (min-width: 640px) {
  .photo-carousel__track { grid-auto-columns: calc((100% - 2 * 0.85rem) / 3); }
}
.photo-carousel__nav {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.15);
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  cursor: pointer;
  z-index: 2;
}
.photo-carousel__nav:hover { background: var(--magenta, #E91E63); color: #fff; border-color: transparent; }
.photo-carousel__nav--prev { left: -.9rem; }
.photo-carousel__nav--next { right: -.9rem; }
@media (max-width: 639px) {
  .photo-carousel__nav { top: auto; bottom: -3rem; transform: none; }
  .photo-carousel__nav--prev { left: calc(50% - 3.2rem); }
  .photo-carousel__nav--next { right: calc(50% - 3.2rem); }
}

/* ============ Capability cards (Green Screen and Editing) ============ */
.capability-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .capability-grid { grid-template-columns: repeat(3, 1fr); } }
.capability-card {
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.10);
  border-top: 4px solid var(--magenta);
  border-radius: .6rem;
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
.capability-card:hover, .capability-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -12px rgba(10, 31, 68, 0.25);
}
.capability-card h3 {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  color: var(--navy);
  font-size: 1.02rem;
}
.capability-card p {
  color: rgba(10, 31, 68, 0.72);
  font-size: .9rem;
  line-height: 1.5;
  margin-top: .5rem;
}
.capability-card__cta {
  margin-top: auto;
  padding-top: .85rem;
  color: var(--magenta);
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* ============ Distance list (nature section) ============ */
.dist-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border-radius: .55rem;
  overflow: hidden;
  border: 1px solid rgba(10, 31, 68, 0.10);
}
.dist-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  border-top: 1px solid rgba(10, 31, 68, 0.08);
}
.dist-list li:first-child { border-top: 0; }
.dist-list span { color: rgba(10, 31, 68, 0.85); font-size: .95rem; }
/* Each place links out to its own official page. Underline on hover only,
   so the list still reads as a table of distances rather than a link farm. */
.dist-list span a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(10, 31, 68, 0.18);
}
.dist-list span a:hover,
.dist-list span a:focus-visible { color: #C2185B; border-bottom-color: #C2185B; }
.dist-list strong {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: #C2185B;
  white-space: nowrap;
}

/* ============ Photo card (real product shot in bucket detail sections) ============ */
.photo-card {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.10);
  border-radius: .55rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 14px -8px rgba(0,0,0,0.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.photo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 22px -10px rgba(0,0,0,0.25);
}
.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #f2f4f8;
}
.photo-card figcaption {
  padding: .65rem .85rem;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: .82rem;
  color: var(--navy);
  border-top: 1px solid rgba(10, 31, 68, 0.08);
  background: #fff;
}

/* === Hive switcher pills (creators network form) ============================ */
.hive-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(10, 31, 68, 0.15);
  background: #fff;
  color: #0A1F44;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 180ms ease;
  text-align: center;
  white-space: nowrap;
}
.hive-pill:hover { border-color: rgba(233, 30, 99, 0.5); color: #E91E63; }
.hive-pill.is-active {
  background: #E91E63;
  border-color: #E91E63;
  color: #fff;
  box-shadow: 0 4px 14px rgba(233, 30, 99, 0.28);
}
.hive-pill:focus-visible { outline: 2px solid #E91E63; outline-offset: 2px; }

/* Required-field asterisk used across long forms */
.req { color: #E91E63; font-weight: 700; margin-left: 2px; }

/* === Quote builder helpers ================================================= */
.quote-card {
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.10);
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(10, 31, 68, 0.06);
}
.quote-card + .quote-card { margin-top: 18px; }

.pkg-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  border: 1.5px solid rgba(10, 31, 68, 0.12);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: all 180ms ease;
}
.pkg-tile:hover { border-color: rgba(233, 30, 99, 0.45); transform: translateY(-1px); }
.pkg-tile input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.pkg-tile.is-active,
.pkg-tile:has(input:checked) {
  border-color: #E91E63;
  background: linear-gradient(180deg, #fff 0%, #fff5f8 100%);
  box-shadow: 0 6px 18px rgba(233, 30, 99, 0.16);
}
.pkg-tile__head {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  color: #0A1F44;
  font-size: 15px;
}
.pkg-tile__sub { color: rgba(10, 31, 68, 0.65); font-size: 12.5px; }
.pkg-tile__price {
  margin-top: 8px;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #E91E63;
}

.addon-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(10, 31, 68, 0.10);
  border-radius: 14px;
  background: #fff;
}
.addon-row + .addon-row { margin-top: 10px; }
.addon-row__info { display: flex; gap: 12px; align-items: flex-start; }
.addon-row__title { font-family: 'Lato', Arial, sans-serif; font-weight: 700; color: #0A1F44; font-size: 14px; }
.addon-row__desc  { color: rgba(10, 31, 68, 0.65); font-size: 12.5px; margin-top: 2px; }
.addon-row__price { font-family: 'Lato', Arial, sans-serif; font-weight: 700; color: #0A1F44; white-space: nowrap; }

.quote-totals {
  background: #0A1F44;
  color: #fff;
  border-radius: 18px;
  padding: 22px 24px;
}
.quote-totals__row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; }
.quote-totals__row + .quote-totals__row { border-top: 1px solid rgba(255,255,255,0.08); }
.quote-totals__label { color: rgba(255,255,255,0.78); font-size: 14px; }
.quote-totals__val   { font-family: 'Lato', Arial, sans-serif; font-weight: 700; font-size: 16px; }
.quote-totals__grand { font-size: 22px; color: #fff; }
.quote-totals__grand .quote-totals__val { color: #fff; font-size: 26px; }

/* Stepper for booking page */
.stepper { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.stepper__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(10, 31, 68, 0.06);
  color: rgba(10, 31, 68, 0.60);
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: 12.5px;
}
.stepper__item.is-active { background: #E91E63; color: #fff; }
.stepper__item.is-done   { background: #0A1F44; color: #fff; }
.stepper__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.18); font-size: 11px;
}
.stepper__item:not(.is-active):not(.is-done) .stepper__num { background: rgba(10, 31, 68, 0.12); }


/* === Keeper tile: static (info card) variant + contact-link styling ============= */
.keeper-tile--static {
  cursor: default;
}
.keeper-tile--static:hover,
.keeper-tile--static:focus-within {
  /* Disable the "press" interaction state on static info cards */
  transform: none;
}
.keeper-tile__link {
  color: var(--magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  transition: color 140ms ease;
}
.keeper-tile__link:hover,
.keeper-tile__link:focus-visible {
  color: var(--magentaDeep, #C2185B);
  outline: none;
}
.keeper-tile__link:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* === Pathway card CTA (Three ways into the hive) ============================ */
.path-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
  padding: 10px 18px;
  background: #fff;
  border: 1.5px solid var(--magenta);
  color: var(--magenta);
  border-radius: 10px;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  transition: all 180ms ease;
  align-self: flex-start;
  width: 100%;
  text-align: center;
}
.path-cta:hover,
.path-cta:focus-visible {
  background: var(--magenta);
  color: #fff;
  box-shadow: 0 4px 14px rgba(233, 30, 99, 0.25);
  outline: none;
}
.path-cta:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 2px;
}
.path-cta svg {
  transition: transform 180ms ease;
}
.path-cta:hover svg {
  transform: translateX(2px);
}

/* Make the three pathway cards equal-height so the CTAs line up */
.card--tt {
  display: flex;
  flex-direction: column;
}
.card--tt > p:not(:last-child) {
  flex: 1 0 auto;
}


/* === Stack chips (CRM & Developer hive: 'Stacks we support') ================= */
.stack-group {
  margin-top: 1.75rem;
}
.stack-group__label {
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(10, 31, 68, 0.55);
  text-align: center;
  margin-bottom: 0.6rem;
}
.stack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.stack-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(10, 31, 68, 0.12);
  color: #0A1F44;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.005em;
  transition: all 160ms ease;
  white-space: nowrap;
}
.stack-chip:hover {
  border-color: var(--magenta);
  color: var(--magenta);
  transform: translateY(-1px);
}

/* === Featured role tile (Agentic Website Developer flagship) ================= */
.role-tile--feature {
  background: linear-gradient(180deg, #fff 0%, #fff5f8 100%);
  box-shadow: 0 8px 24px rgba(233, 30, 99, 0.10);
  position: relative;
}
.role-tile--feature::before {
  content: 'Flagship';
  position: absolute;
  top: -10px;
  right: 14px;
  background: #0A1F44;
  color: #fff;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}
.role-tile__flag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: var(--magenta);
  color: #fff;
  border-radius: 4px;
  font-family: 'Lato', Arial, sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}



/* === WCAG AA contrast overrides (added 16/06/2026) === */
/* Magenta on white text, bump to magentaDeep #C2185B for 4.74:1 contrast */
.text-magenta { color: #C2185B !important; }
/* RESTORED 2026-08-08 from group-menu.css, which the six literal-hex
   overrides above (each keyed to a "--svc:#..." substring) were meant to
   replace: matching a hex string in an inline style breaks the moment that
   style holds a var() reference instead, which is exactly what happened
   here, silently flattening every bucket's CTA to one colour. The token
   pair below carries its own WCAG-safe text colour per card and needs no
   selector maintenance when a value changes. */
.bucket__cta { color: var(--svc-text, var(--svc)); }

/* "A proudly AutoHive company" muted grey too light */
.text-muted, .opacity-70, [class*="text-navy/70"] { /* selectors not specific; below targets the exact span */ }

/* White on magenta buttons need deeper magenta for contrast 4.5+ */
.btn-bee, .btn-primary { background-color: #C2185B !important; }
.btn-bee:hover, .btn-primary:hover { background-color: #A0124A !important; }
.bee-fab { background-color: #C2185B !important; }

/* Magenta backgrounds with white text on flagship banners */
.bg-magenta { background-color: #C2185B !important; }
.hover\:bg-magentaDeep:hover { background-color: #A0124A !important; }

/* Magenta underline-text combinations */
a.text-magenta { color: #C2185B !important; }


/* === Round 2 contrast fixes (16/06/2026) === */
.consent-button--primary { background: #C2185B !important; border-color: #C2185B !important; }
.consent-button--secondary { color: #C2185B !important; }
.consent-banner-footer a, .consent-banner a { color: #C2185B !important; }

/* Bump text-navy/60 muted greys to /75 (deep enough for AA on white) */
.text-navy\/60 { color: rgba(10, 31, 68, 0.75) !important; }
.text-navy\/55 { color: rgba(10, 31, 68, 0.75) !important; }
.text-navy\/50 { color: rgba(10, 31, 68, 0.75) !important; }


/* === Final contrast pass (16/06/2026) === */
/* All magenta-on-white text bumped to #C2185B for WCAG AA */
.stepper__item.is-active { background: #C2185B !important; }
.pkg-tile__price { color: #C2185B !important; }
.marketplace-filter.is-active { background: #C2185B !important; }
.hive-pill.is-active { background: #C2185B !important; }
.btn-bee, .bee-fab { background: #C2185B !important; }
.btn-bee:hover, .bee-fab:hover { background: #A0124A !important; }
.path-cta { color: #C2185B !important; }
.about-cta__eyebrow { color: #C2185B !important; }
.about-cta[style*="--svc:#F5A623"] .about-cta__eyebrow { color: #8B5A00 !important; }
.tt-logo__sub { color: #FF6B9D !important; } /* light pink for magenta on navy bg, contrast 4.5+ */

/* Magenta on navy bg (#0A1F44): needs LIGHTER pink not deeper */
.bg-navy .text-magenta,
.bg-navy [class*="text-magenta"] { color: #FF6B9D !important; }
section.bg-navy p.text-magenta { color: #FF6B9D !important; }
section.bg-navy a.text-magenta { color: #FF6B9D !important; }

/* Stepper inactive grey text */
.stepper__item { color: #4A5568 !important; }

/* stack-group__label too light */
.stack-group__label { color: #4A5568 !important; }

.sr-only-h { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }


/* Round 3 contrast: strong magenta should be magentaDeep on white */
strong { } /* placeholder */
.equipment strong, .kit-list strong, .pkg-tile strong { color: #C2185B !important; }
/* All inline strong elements colored magenta */
.text-magenta strong, strong.text-magenta { color: #C2185B !important; }
/* Generic any strong inside <p class="text-navy/...">  needs to remain navy */


/* Round 4 contrast pass */
.text-gold { color: #8B5A00 !important; }
/* Allow gold on dark backgrounds to stay bright */
.bg-navy .text-gold, section.bg-navy .text-gold,
.bg-magenta .text-gold, [class*="bg-navy"] .text-gold { color: #F5A623 !important; }
.text-teal { color: #00766B !important; }
.bg-navy .text-teal, section.bg-navy .text-teal { color: #4DD0E1 !important; }

/* Stepper: inactive items have a light pill background (#F0F2F4) with dark text; done/active have dark backgrounds with white text */
.stepper__item { color: #2D3748 !important; }
.stepper__item.is-done { color: #ffffff !important; background: #0A1F44 !important; }
.stepper__item.is-active { color: #ffffff !important; background: #B0124A !important; }

/* Airbnb button: #FF5A5F is brand red but fails on white text. Bump background darker */
.btn-book--airbnb { background: #C72129 !important; }
.btn-book--airbnb:hover { background: #9F1A20 !important; }


/* ============ ESTATE TYPOGRAPHY: Lato per the AutoHive Brand Guide ============
   Headings that carried Poppins 800 resolve to Lato 900 automatically under
   CSS font weight matching. Do not reintroduce Poppins or Inter. */
body, .font-body { font-family: 'Lato', Arial, sans-serif; }
.font-display { font-family: 'Lato', Arial, sans-serif; }
/* ============ ESTATE FRAME + HEADER STACK (31 Jul 2026) ============
   The shared frame and the studio header stack in flow. Never fixed. */
#tt-header-slot{position:sticky;top:0;z-index:1000;}
.tt-header{position:relative;inset:auto;}
.hero-section > .relative{inset:0;}
.page-hero{padding-top:4rem;}

/* ── Estate motifs: circuit line and hive, in Think Tank magenta ── */
:root {
  --ah-motif-line: url('/ah-shared/brand/circuit-line-01.svg');
  --ah-motif-accent: #E91E63;
  --ah-motif-opacity: .13;
}