/* Nova Anchor Management — bilingual homepage (Wix-independent)
   Brand palette mirrored from the public site reference */

:root {
  --navy-deep: #072136;
  --navy: #0c3c60;
  --navy-mid: #0a4a75;
  --ink: #0a0a0a;
  --charcoal: #1a1a1a;
  --gold: #e6cc87;
  --gold-deep: #c9a84c;
  --cream: #f4efe6;
  --snow: #f7fafc;
  --muted: #8a93a0;
  --danger: #ff4040;
  --white: #ffffff;
  --glass: rgba(7, 33, 54, 0.55);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Outfit", "Helvetica Neue", sans-serif;
  --header-h: 7.5rem;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--navy-deep);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: 1000;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.container {
  width: min(1120px, calc(100% - 2.5rem));
  margin-inline: auto;
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(7, 33, 54, 0.98), rgba(7, 33, 54, 0.94));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(230, 204, 135, 0.18);
  overflow: visible;
}

.header-shell {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 1rem;
  align-items: center;
  width: min(1680px, calc(100% - 2rem));
  margin-inline: auto;
  padding: 0.4rem 0 0.55rem;
}

.brand-mark {
  display: flex;
  align-items: center;
  align-self: center;
}

.brand-logo {
  width: clamp(58px, 6.2vw, 76px);
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}

.brand-logo--cover {
  width: clamp(9.5rem, 22vw, 15.5rem);
  height: clamp(3.2rem, 7.2vw, 5.1rem);
  object-fit: cover;
  object-position: center;
  border-radius: 0.35rem;
  background: #f4efe6;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  filter: none;
}

.brand-logo--official {
  width: clamp(11rem, 22vw, 16.5rem);
  height: clamp(6.5rem, 14vw, 9rem);
  object-fit: contain;
  object-position: center;
  border-radius: 0.35rem;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  filter: none;
  padding: 0.25rem 0.4rem;
}

.header-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  align-self: start;
  padding-top: 0.85rem;
}

.nav-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.65rem;
  overflow: visible;
}

.header-identity {
  position: absolute;
  left: 50%;
  top: 3.55rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.04rem;
  padding: 0;
  width: max-content;
  max-width: calc(100% - 2rem);
  z-index: 2;
}

.brand-title {
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 1.45vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--white);
  line-height: 1.1;
}

.brand-tagline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.62rem, 0.95vw, 0.72rem);
  color: var(--gold);
  letter-spacing: 0.02em;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.05rem;
}

.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 1.05rem;
  padding: 0.04rem 0.28rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.lang-pill .flag {
  width: 0.82rem;
  height: 0.55rem;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.lang-pill .flag-en { background-image: url("../images/flag-en.svg"); }
.lang-pill .flag-fr { background-image: url("../images/flag-fr.svg"); }

.lang-pill.is-active {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(230, 204, 135, 0.55);
  color: var(--gold);
}

a.lang-pill:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
  flex-shrink: 0;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.login-link {
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.9;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.login-link:hover {
  color: var(--gold);
  opacity: 1;
}

.nav-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(230, 204, 135, 0.35);
  background: transparent;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  place-items: center;
  gap: 5px;
  flex-direction: column;
}

.nav-toggle span {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  background: var(--gold);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

.primary-nav {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  border-top: 0;
  overflow: visible;
}

.nav-list {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0.12rem 0.14rem;
  width: 100%;
  margin: 0;
  padding: 0.15rem 0;
  overflow: visible;
}

.nav-list > li {
  position: relative;
  flex-shrink: 0;
}

.has-submenu {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.has-submenu > .submenu-parent-link {
  padding-inline-end: 0.15rem;
}

.has-submenu > .submenu-trigger {
  padding-inline: 0.4rem;
  min-width: 1.7rem;
  justify-content: center;
}

.nav-list a,
.nav-list .submenu-parent-link,
.submenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.16rem;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.675rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: none;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s var(--ease);
}

.nav-list a:hover,
.nav-list a.active,
.submenu-trigger:hover,
.has-submenu.open > .submenu-trigger,
.has-submenu.open > .submenu-parent-link {
  color: var(--gold);
}

.nav-visit {
  gap: 0.32rem;
  padding: 0.16rem 0.42rem 0.16rem 0.16rem;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.05;
}

.nav-visit-mark {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 0.2rem;
  object-fit: cover;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.nav-cta-quickmart .nav-visit-mark {
  background: var(--navy-deep);
  color: var(--gold);
}

.nav-cta-mason .nav-visit-mark {
  border-radius: 50%;
  background: #fff;
}

.nav-visit-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.02rem;
}

.nav-visit-hint {
  font-family: var(--font-body);
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-visit-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.nav-cta-mason .nav-visit-name {
  font-family: Georgia, "Palatino Linotype", Palatino, serif;
  font-weight: 600;
}

.nav-visit-arrow {
  font-size: 0.85rem;
  font-weight: 700;
}

.nav-cta-quickmart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--gold);
  color: var(--navy-deep);
  background: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav-cta-quickmart:hover,
.nav-cta-quickmart.active {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
}

.nav-cta-mason {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.65rem;
  background: #0e0e0e;
  border: 1px solid #fff;
  color: #fff;
  font-family: Georgia, "Palatino Linotype", Palatino, serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-cta-mason:hover {
  background: #1a1a1a;
  border-color: #fff;
  color: #fff;
}

.nav-cta-gorilla-wrap {
  position: relative;
  z-index: 40;
}

.nav-cta-gorilla {
  --gorilla: #3e5b58;
  --gorilla-deep: #2f4543;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--gorilla);
  color: #f4f7f6;
  background: var(--gorilla);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav-cta-gorilla:hover,
.nav-cta-gorilla-wrap.is-open .nav-cta-gorilla,
.nav-cta-gorilla-wrap:focus-within .nav-cta-gorilla {
  background: var(--gorilla-deep);
  color: #f4f7f6;
  border-color: var(--gorilla-deep);
}

.gorilla-preview {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  width: min(20.5rem, calc(100vw - 1.5rem));
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.35rem);
  pointer-events: none;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}

.nav-cta-gorilla-wrap:hover .gorilla-preview,
.nav-cta-gorilla-wrap:focus-within .gorilla-preview,
.nav-cta-gorilla-wrap.is-open .gorilla-preview,
.qm-gorilla-wrap:hover .gorilla-preview,
.qm-gorilla-wrap:focus-within .gorilla-preview,
.qm-gorilla-wrap.is-open .gorilla-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.gorilla-preview-card {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(62, 91, 88, 0.45);
  background: #1c2e2c;
  color: #f4f7f6;
  box-shadow: 0 14px 36px rgba(7, 33, 54, 0.35);
  text-decoration: none;
}

.gorilla-preview-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.gorilla-preview-copy {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.8rem 0.85rem;
}

.gorilla-preview-copy strong {
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  color: #f4f7f6;
}

.gorilla-preview-copy small {
  color: rgba(244, 247, 246, 0.78);
  font-size: 0.78rem;
  line-height: 1.35;
}

.gorilla-preview-copy em {
  margin-top: 0.25rem;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c9e0dc;
}

.gorilla-preview-card:hover .gorilla-preview-copy em,
.gorilla-preview-card:focus-visible .gorilla-preview-copy em {
  color: #e6cc87;
}

.submenu-trigger::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.75;
  transition: transform 0.2s var(--ease);
}

.has-submenu.open > .submenu-trigger::after {
  transform: rotate(180deg);
}

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 17rem;
  margin-top: 0.15rem;
  padding: 0.55rem 0;
  background: rgba(7, 33, 54, 0.98);
  border: 1px solid rgba(230, 204, 135, 0.22);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  z-index: 200;
}

.has-submenu.open > .submenu {
  display: block;
}

.nav-more[hidden] {
  display: none !important;
}

.nav-more > .submenu {
  left: auto;
  right: 0;
}

.submenu > .has-submenu {
  display: flex;
  position: relative;
  align-items: center;
  width: 100%;
}

.submenu > .has-submenu > .submenu-parent-link {
  flex: 1;
}

.submenu > .has-submenu > .submenu {
  top: 0;
  left: auto;
  right: 100%;
  margin-top: 0;
}

@media (hover: hover) and (pointer: fine) {
  .has-submenu:hover > .submenu {
    display: block;
  }
}

.submenu a {
  display: block;
  width: 100%;
  padding: 0.52rem 0.79rem;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
}

.submenu a:hover,
.submenu a.active {
  background: rgba(230, 204, 135, 0.1);
  color: var(--gold);
}

/* ---------- Shared ---------- */

.eyebrow {
  margin: 0 0 0.35rem;
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.lead-label {
  margin: 1.4rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--gold);
}

.lead {
  margin: 0;
  max-width: 38rem;
  font-size: clamp(1.05rem, 2.1vw, 1.3rem);
  font-weight: 300;
  line-height: 1.7;
}

.support {
  margin: 1rem 0 0;
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.02rem;
}

.motto {
  margin: 1.5rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  color: var(--gold);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.75rem;
  min-height: 2.85rem;
  padding: 0.7rem 1.7rem;
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
}

.btn-gold:hover {
  background: var(--gold-deep);
  color: var(--white);
}

.btn-outline-light {
  background: transparent;
  color: var(--white);
  border-color: rgba(230, 204, 135, 0.65);
}

.btn-outline-light:hover {
  background: var(--gold);
  color: var(--navy-deep);
  border-color: var(--gold);
}

.btn-navy {
  background: var(--navy-deep);
  color: var(--white);
}

.btn-navy:hover {
  background: var(--navy);
}

.btn-wide {
  width: 100%;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--white);
  text-align: center;
}

.hero-media,
.about-media,
.services-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media img,
.about-media img,
.services-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: slow-zoom 28s ease-in-out infinite alternate;
}

.hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(7, 33, 54, 0.25), rgba(0, 0, 0, 0.72) 70%),
    linear-gradient(180deg, rgba(7, 33, 54, 0.35), rgba(0, 0, 0, 0.78));
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(820px, calc(100% - 2.5rem));
  padding: 4.5rem 0 5.5rem;
}

.hero-to {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
}

.hero h1 {
  margin: 0.15rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--white);
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.hero .lead,
.hero .support {
  margin-inline: auto;
}

.scroll-cue {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--gold);
  font-size: 1.25rem;
  opacity: 0.75;
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes slow-zoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.08); }
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ---------- About ---------- */

.about {
  position: relative;
  min-height: 88vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: var(--white);
}

.about-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(7, 33, 54, 0.82) 0%, rgba(7, 33, 54, 0.55) 42%, rgba(10, 20, 40, 0.35) 100%);
}

.about-content {
  position: relative;
  z-index: 1;
  width: min(640px, calc(100% - 2.5rem));
  margin: 0 auto 0 clamp(1.25rem, 8vw, 8rem);
  padding: 5.5rem 0;
}

.about h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.1;
}

.about-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 600;
  line-height: 1.1;
}

.about-who {
  background:
    linear-gradient(180deg, #f7f4ef 0%, #efeae2 100%);
  text-align: center;
}

.about-who-inner {
  max-width: 44rem;
}

.about-who-kicker {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy-deep);
}

.about-who-name {
  margin: 0.85rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--navy);
}

.lead-label.on-light {
  color: var(--gold-deep);
}

.about-who-lead {
  margin: 0.75rem auto 1.25rem;
  max-width: 38rem;
  font-size: 1.12rem;
  line-height: 1.75;
}

.about-who-sub {
  margin: 2rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--navy-deep);
}

.about-who-journey {
  margin-top: 1.5rem;
  font-style: italic;
}

.about-service-links {
  display: grid;
  gap: 0.65rem;
  margin: 2rem auto 0;
  max-width: 28rem;
  padding: 0;
  list-style: none;
}

.about-service-links a {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(12, 60, 96, 0.18);
  background: rgba(255, 255, 255, 0.72);
  color: var(--navy-deep);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.about-service-links a:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}

.about-mvv {
  background: var(--navy-deep);
  padding: 3.5rem 0 4rem;
}

.about-mvv .mvv-grid {
  margin: 0;
}

.about-values-list {
  padding-left: 0;
  list-style: none;
}

.about-values-list li {
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(12, 60, 96, 0.12);
}

.about-values-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.mvv-values .about-values-list li {
  border-bottom-color: rgba(12, 60, 96, 0.12);
}

.about-ceo {
  background:
    linear-gradient(165deg, #0c3c60 0%, var(--navy-deep) 55%, #041018 100%);
  color: var(--white);
  text-align: center;
}

.about-ceo-inner {
  max-width: 42rem;
}

.about-ceo h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.5vw, 2.5rem);
  color: var(--gold);
}

.about-ceo-greeting {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
}

.about-ceo p {
  margin: 0.85rem 0 0;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

.about-ceo .btn {
  margin-top: 2rem;
}

/* ---------- Services ---------- */

.services {
  position: relative;
  overflow: hidden;
  color: var(--navy-deep);
  background: var(--cream);
}

.services-bg {
  opacity: 0.42;
}

.services-bg img {
  filter: saturate(0.85) contrast(1.05);
}

.services-inner {
  position: relative;
  z-index: 1;
  padding: 5.5rem 0 6rem;
  text-align: center;
}

.services h2 {
  margin: 0 0 2rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 600;
}

.service-list {
  display: grid;
  gap: 0.85rem;
  max-width: 42rem;
  margin: 0 auto;
}

.service-list a {
  display: block;
  padding: 1.05rem 1.25rem;
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(7, 33, 54, 0.12);
  font-size: clamp(1rem, 2vw, 1.15rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}

.service-list a:hover {
  background: var(--navy-deep);
  color: var(--gold);
  transform: translateX(4px);
}

/* ---------- Contact ---------- */

.contact {
  background:
    linear-gradient(160deg, #0a2a45 0%, var(--navy-deep) 45%, #04121f 100%);
  color: var(--white);
  padding: 5.5rem 0 6rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: start;
}

.contact h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.contact-question {
  font-size: 1.15rem;
}

.faq-cta {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(230, 204, 135, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.faq-cta a {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 0.08em;
}

.faq-cta a:hover {
  text-decoration: underline;
}

.contact-form-wrap,
.testimonial-form-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(230, 204, 135, 0.18);
  padding: 1.75rem;
}

.field {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.field span {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.25);
  color: var(--white);
  border-radius: 0;
  outline: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: rgba(0, 0, 0, 0.35);
}

.field select option {
  color: var(--ink);
}

/* Light panels (Jobs, etc.): keep inputs readable on cream/white cards */
.content-panel.contact-form-wrap {
  background: #fff;
  border: 1px solid rgba(15, 35, 60, 0.16);
  box-shadow: 0 8px 24px rgba(15, 35, 60, 0.06);
}

.content-panel.contact-form-wrap .field span,
.content-panel .contact-form .field span {
  color: var(--navy-deep);
  font-weight: 600;
}

.content-panel .contact-form .field-hint {
  color: rgba(7, 33, 54, 0.72);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
}

.pay-choices {
  border: 0;
  margin: 0.8rem 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.pay-choices legend {
  color: var(--navy-deep);
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.pay-choice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  border: 1px solid rgba(15, 35, 60, 0.16);
  border-radius: 0.6rem;
  padding: 0.75rem 0.9rem;
  background: #fff;
}

.pay-choice input {
  width: auto;
  margin-top: 0.25rem;
}

.pay-choice span {
  display: grid;
  gap: 0.15rem;
}

.pay-choice small {
  color: rgba(7, 33, 54, 0.72);
  line-height: 1.4;
}

.content-panel.contact-form-wrap .field input,
.content-panel.contact-form-wrap .field select,
.content-panel.contact-form-wrap .field textarea,
.content-panel .contact-form .field input,
.content-panel .contact-form .field select,
.content-panel .contact-form .field textarea {
  border: 1px solid rgba(15, 35, 60, 0.28);
  background: #f7f8fa;
  color: var(--navy-deep);
}

.content-panel.contact-form-wrap .field input::placeholder,
.content-panel.contact-form-wrap .field textarea::placeholder,
.content-panel .contact-form .field input::placeholder,
.content-panel .contact-form .field textarea::placeholder {
  color: rgba(15, 35, 60, 0.45);
}

.content-panel.contact-form-wrap .field input:focus,
.content-panel.contact-form-wrap .field select:focus,
.content-panel.contact-form-wrap .field textarea:focus,
.content-panel .contact-form .field input:focus,
.content-panel .contact-form .field select:focus,
.content-panel .contact-form .field textarea:focus {
  border-color: var(--navy-deep);
  background: #fff;
}

.content-panel.contact-form-wrap .field input[type="file"] {
  padding: 0.65rem 0.75rem;
  background: #fff;
  color: var(--navy-deep);
}

.content-panel.contact-form-wrap .field select,
.content-panel .contact-form .field select {
  color: var(--navy-deep);
}

.content-panel.contact-form-wrap .field select:invalid,
.content-panel.contact-form-wrap .field select option[value=""],
.content-panel .contact-form .field select:invalid,
.content-panel .contact-form .field select option[value=""] {
  color: rgba(15, 35, 60, 0.55);
}

.flash-stack {
  margin-bottom: 1rem;
}

.flash {
  margin: 0 0 0.5rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.92rem;
}

.flash-success {
  background: rgba(33, 117, 86, 0.35);
  border: 1px solid rgba(174, 229, 208, 0.45);
}

.flash-error {
  background: rgba(255, 64, 64, 0.18);
  border: 1px solid rgba(255, 64, 64, 0.45);
}

/* ---------- Clients / Testimonials / Partners / Hours ---------- */

.clients {
  background: var(--charcoal);
  color: var(--white);
  padding: 4.5rem 0;
  text-align: center;
}

.clients h2,
.testimonials h2,
.partners h2,
.hours h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 600;
}

.section-note {
  margin: 0 auto;
  max-width: 36rem;
  color: var(--muted);
}

.testimonials {
  background:
    radial-gradient(circle at top right, rgba(230, 204, 135, 0.08), transparent 40%),
    #101820;
  color: var(--white);
  padding: 5rem 0;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
  align-items: start;
}

.quote-card {
  margin: 1.5rem 0 0;
  padding: 1.75rem;
  border-left: 2px solid var(--gold);
  background: rgba(255, 255, 255, 0.03);
}

.stars {
  color: var(--gold);
  letter-spacing: 0.15em;
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
}

.stars .dim {
  opacity: 0.28;
}

.quote-card blockquote {
  margin: 0;
}

.quote-card p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-style: italic;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.quote-card figcaption {
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.04em;
}

.testimonial-form-wrap {
  background: rgba(255, 255, 255, 0.03);
}

.testimonial-form-wrap h3 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
}

.check {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin: 0.5rem 0 1.25rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.78);
}

.check input {
  margin-top: 0.2rem;
}

.partners {
  background: #0b1622;
  color: var(--white);
  padding: 4.5rem 0 5rem;
  text-align: center;
}

.partner-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
  margin-top: 2rem;
}

.partner {
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  width: min(220px, 100%);
  padding: 1.25rem;
  background: transparent;
  color: var(--navy-deep);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.partner:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.partner img {
  max-height: 110px;
  width: auto;
  object-fit: contain;
}

.partner span {
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
}

.hours {
  background:
    linear-gradient(180deg, #120a0a, #1a0f0f 40%, #0d0808);
  color: var(--white);
  padding: 4.5rem 0 5rem;
  text-align: center;
}

.hours h2 {
  color: var(--danger);
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 16rem));
  justify-content: center;
  gap: 2rem;
  margin-top: 1.75rem;
}

.hours-block h3 {
  margin: 0 0 0.75rem;
  color: var(--danger);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.hours-block p {
  margin: 0.25rem 0;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- Footer ---------- */

.site-footer {
  background: #05080c;
  color: rgba(255, 255, 255, 0.82);
  padding: 0.65rem 0 0.55rem;
  text-align: center;
  border-top: 1px solid rgba(230, 204, 135, 0.12);
}

.footer-inner {
  display: grid;
  gap: 0.3rem;
  justify-items: center;
}

.socials {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.socials a {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.socials a:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.socials img {
  width: 14px;
  height: 14px;
}

.footer-email {
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
}

.footer-email:hover {
  color: var(--gold);
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.4rem;
  font-size: 0.68rem;
}

.footer-legal a:hover {
  color: var(--gold);
}

.copyright {
  margin: 0.05rem 0 0;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-transform: uppercase;
}

/* ---------- Footer trust blocks ---------- */

.footer-trust {
  background: #0a121a;
  border-bottom: 1px solid rgba(230, 204, 135, 0.12);
  padding: 0.4rem 0 0.35rem;
}

.footer-trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  gap: 0.4rem;
  align-items: start;
}

.footer-trust .testimonials,
.footer-trust .partners,
.footer-trust .affiliated-brands,
.footer-trust .hours {
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
}

.footer-trust .testimonials-grid {
  gap: 0.4rem;
}

.testimonials-dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.2rem 0 0.45rem;
}

.testimonials-dual--single {
  grid-template-columns: 1fr;
}

.testimonial-column {
  min-width: 0;
  padding: 0.45rem 0.5rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.testimonial-column-heading {
  margin: 0 0 0.2rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 0.88rem;
  font-weight: 700;
  color: #e6cc87;
}

.footer-trust .testimonials > h2 {
  margin: 0 0 0.15rem;
}

.footer-trust .testimonials h2,
.footer-trust .partners h2,
.footer-trust .affiliated-brands h2,
.footer-trust .hours h2 {
  margin: 0 0 0.12rem;
  font-size: clamp(0.92rem, 1.6vw, 1.1rem);
}

.affiliated-brands-lead {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.72);
}

.affiliated-brand-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 4.6rem));
  gap: 0.35rem;
  margin: 0.15rem 0 0;
  width: fit-content;
  max-width: 100%;
}

.partner-brand {
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0.2rem;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  overflow: hidden;
  transform: none;
  box-shadow: none;
}

.partner-brand:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.32);
  background: transparent;
}

.partner-brand img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.partner-brand strong {
  display: none;
}

.partner-brand--gorilla,
.partner-brand--mason,
.partner-brand--nam {
  padding: 0.2rem;
  background: transparent;
  color: inherit;
  border-color: rgba(255, 255, 255, 0.16);
}

.partner-brand--gorilla:hover,
.partner-brand--mason:hover,
.partner-brand--nam:hover {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
  color: inherit;
}

.partner-brand--gorilla img,
.partner-brand--mason img,
.partner-brand--nam img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
}

.footer-side {
  display: grid;
  gap: 0.35rem;
}

.footer-trust .partner-logos {
  margin-top: 0.1rem;
  gap: 0.35rem;
}

.footer-trust .partner-logos--tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 5.6rem));
  gap: 0.35rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.1rem;
}

.footer-trust .partner-tile {
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  overflow: hidden;
  transform: none;
  box-shadow: none;
}

.footer-trust .partner-tile:hover {
  transform: none;
  box-shadow: none;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.32);
}

.footer-trust .partner-tile img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

.footer-trust .partner-tile span {
  display: none;
}

.footer-trust .partner {
  width: min(96px, 100%);
  padding: 0.3rem;
  gap: 0.35rem;
}

.footer-trust .partner img {
  max-height: 2.1rem;
  width: auto;
}

.footer-trust .partner span {
  font-size: 0.68rem;
}

.footer-trust .quote-card {
  margin: 0.1rem 0 0;
  padding: 0.3rem 0.45rem;
}

.footer-trust .quote-card p {
  font-size: 0.78rem;
  line-height: 1.3;
}

.footer-trust .quote-card figcaption {
  margin-top: 0.4rem;
  font-size: 0.72rem;
}

.footer-trust .stars {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.testimonial-carousel {
  margin-top: 0.1rem;
}

.testimonial-carousel-track {
  position: relative;
  min-height: 5.75rem;
}

.testimonial-slide {
  margin: 0;
}

.testimonial-slide[hidden] {
  display: none !important;
}

.testimonial-slide.is-active:not([hidden]) {
  display: block;
  animation: testimonial-fade 0.35s ease;
}

@keyframes testimonial-fade {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-slide.is-active:not([hidden]) {
    animation: none;
  }
}

.quote-card figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
}

.testimonial-service {
  font-weight: 500;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
}

.testimonial-carousel-controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
}

.testimonial-carousel-btn {
  appearance: none;
  border: 1px solid rgba(230, 204, 135, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gold);
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  line-height: 1;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.testimonial-carousel-btn:hover,
.testimonial-carousel-btn:focus-visible {
  border-color: var(--gold);
  background: rgba(230, 204, 135, 0.12);
  outline: none;
}

.testimonial-carousel-status {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
  min-width: 3.5rem;
  text-align: center;
}

.footer-trust .testimonial-form-wrap {
  background: transparent;
}

.footer-trust .testimonial-form-wrap h3 {
  font-size: 0.92rem;
  margin-bottom: 0.2rem;
}

.footer-trust .testimonial-form .field {
  margin-bottom: 0.2rem;
}

.footer-trust .testimonial-form .field span {
  font-size: 0.72rem;
}

.footer-trust .testimonial-form input,
.footer-trust .testimonial-form select,
.footer-trust .testimonial-form textarea {
  min-height: 1.85rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.78rem;
}

.footer-trust textarea {
  min-height: 2.25rem;
}

.footer-trust .check {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.72rem;
  gap: 0.4rem;
}

.footer-trust .btn {
  margin-top: 0.2rem;
  min-height: 1.85rem;
  padding-inline: 0.75rem;
  font-size: 0.68rem;
}

.footer-trust .hours {
  text-align: center;
}

.footer-trust .hours h2 {
  text-align: center;
}

.footer-trust .hours-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.85rem;
  justify-content: center;
  justify-items: start;
  width: fit-content;
  max-width: 100%;
  margin: 0.15rem auto 0;
}

.footer-trust .hours-block {
  text-align: left;
}

.footer-trust .hours-block h3 {
  margin: 0 0 0.2rem;
  font-size: 0.82rem;
}

.footer-trust .hours-block p {
  margin: 0.05rem 0;
  font-size: 0.78rem;
}

.partner-text {
  min-height: 2.75rem;
  align-content: center;
}

.partner-badge {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--navy-deep);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.footer-trust .hours h2,
.footer-trust .hours-block h3 {
  color: #e08a5b;
}

.footer-bar {
  padding-top: 0.55rem;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  justify-content: center;
}

/* ---------- Chat widget ---------- */

.chat-widget {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  display: grid;
  justify-items: end;
  gap: 0.65rem;
}

.chat-launcher {
  min-height: 2.75rem;
  padding: 0.65rem 1.1rem;
  border: 0;
  background: var(--navy-mid);
  color: var(--white);
  font-weight: 600;
  letter-spacing: 0.03em;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.chat-launcher:hover {
  background: var(--navy);
}

.chat-panel {
  width: min(22rem, calc(100vw - 1.5rem));
  background: #0c1b2a;
  border: 1px solid rgba(230, 204, 135, 0.28);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  color: var(--white);
}

.chat-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  background: var(--navy-mid);
}

.chat-panel-head strong {
  display: block;
}

.chat-status {
  display: inline-block;
  margin-top: 0.2rem;
  color: #7ddea5;
  font-size: 0.78rem;
}

.chat-close {
  border: 0;
  background: transparent;
  color: var(--white);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.chat-body {
  padding: 0.95rem;
  min-height: 8rem;
  max-height: 16rem;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}

.chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0 0.95rem 0.95rem;
}

.chat-actions .btn {
  margin-top: 0;
  min-height: 2.35rem;
  padding-inline: 0.9rem;
  font-size: 0.78rem;
}

/* ---------- Inner pages ---------- */

.page-hero {
  background:
    radial-gradient(circle at top right, rgba(230, 204, 135, 0.12), transparent 42%),
    linear-gradient(165deg, #0c3c60 0%, var(--navy-deep) 55%, #041018 100%);
  color: var(--white);
  padding: 4rem 0 3.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(230, 204, 135, 0.14);
}

.page-hero-inner {
  max-width: 46rem;
}

.page-hero h1 {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 600;
  line-height: 1.12;
}

.page-hero-sub {
  margin: 1rem auto 0;
  max-width: 38rem;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
}

.page-section {
  background: var(--cream);
  color: var(--ink);
  padding: 4rem 0 5rem;
}

.page-section-form {
  background:
    linear-gradient(160deg, #0a2a45 0%, var(--navy-deep) 45%, #04121f 100%);
  color: var(--white);
}

.page-section-form .prose h2 {
  color: var(--white);
}

.prose {
  max-width: 46rem;
}

.prose h2,
.section-heading {
  margin: 2rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--navy-deep);
}

.prose h2:first-child,
.section-heading:first-child {
  margin-top: 0;
}

.prose p,
.prose li {
  line-height: 1.75;
}

.prose .btn {
  margin-top: 1.5rem;
  margin-right: 0.75rem;
}

.values-list,
.feature-list {
  display: grid;
  gap: 0.55rem;
  padding-left: 1.1rem;
  list-style: disc;
}

.ceo-message {
  margin-top: 2.5rem;
  padding: 1.5rem;
  background: rgba(7, 33, 54, 0.06);
  border-left: 3px solid var(--gold-deep);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.25rem;
}

.service-card,
.portfolio-card,
.event-card,
.product-card {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(7, 33, 54, 0.1);
  box-shadow: 0 8px 24px rgba(7, 33, 54, 0.06);
}

.service-card h2,
.service-card h3,
.portfolio-card h2,
.event-card h2,
.product-card h2 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--navy-deep);
}

.service-card p,
.portfolio-card p,
.event-card p,
.product-card p {
  margin: 0 0 1rem;
  color: rgba(10, 10, 10, 0.82);
}

.service-card .btn,
.product-card .btn {
  margin-top: 0;
}

.section-cta {
  margin-top: 2rem;
  text-align: center;
}

.section-cta .btn {
  margin-top: 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

.gallery-item {
  margin: 0;
}

.gallery-placeholder {
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(135deg, rgba(12, 60, 96, 0.35), rgba(230, 204, 135, 0.25)),
    var(--navy);
}

.gallery-item img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gallery-item figcaption {
  margin-top: 0.55rem;
  font-size: 0.92rem;
  color: rgba(10, 10, 10, 0.72);
}

.blog-grid {
  display: grid;
  gap: 1.25rem;
}

.blog-card {
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border-left: 3px solid var(--gold-deep);
}

.blog-card time {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.blog-card h2 {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
}

.blog-card h2 a:hover {
  color: var(--navy);
}

.blog-link {
  color: var(--navy-deep);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.blog-link:hover {
  color: var(--gold-deep);
}

.event-meta {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1rem;
}

.event-meta dt {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.event-meta dd {
  margin: 0.15rem 0 0;
  font-weight: 600;
}

.event-date {
  color: var(--muted);
  font-size: 0.92rem;
}

.program-duration {
  color: var(--gold-deep);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.faq-list {
  max-width: 48rem;
  margin-inline: auto;
}

.faq-item {
  margin-bottom: 0.75rem;
  border: 1px solid rgba(7, 33, 54, 0.12);
  background: rgba(255, 255, 255, 0.92);
}

.faq-item summary {
  padding: 1rem 1.15rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  float: right;
  color: var(--gold-deep);
  font-weight: 700;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-answer {
  padding: 0 1.15rem 1rem;
  color: rgba(10, 10, 10, 0.82);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(7, 33, 54, 0.1);
}

.pricing-card-featured {
  border-color: var(--gold-deep);
  box-shadow: 0 16px 40px rgba(7, 33, 54, 0.12);
  transform: translateY(-4px);
}

.pricing-badge {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  padding: 0.25rem 0.55rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pricing-card h2 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  color: var(--navy-deep);
}

.pricing-price {
  margin: 0 0 1rem;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
}

.pricing-period {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
}

.pricing-features {
  flex: 1;
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
  list-style: disc;
}

.pricing-features li {
  margin-bottom: 0.35rem;
}

.pricing-card .btn {
  margin-top: auto;
}

.pricing-duration {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.mvv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
  margin: 2rem 0 2.5rem;
}

.mvv-card {
  padding: 1.5rem;
  border: 1px solid rgba(184, 148, 74, 0.45);
  min-height: 12rem;
}

.mvv-mission {
  background: #0a0a0a;
  color: #f5f1ea;
}

.mvv-vision {
  background: #0f3a45;
  color: #f5f1ea;
}

.mvv-values {
  background: #ece8e1;
  color: #0a0a0a;
}

.mvv-card h2 {
  margin-top: 0;
  font-family: var(--font-display);
  color: #c9a24d;
}

.mvv-mission h2,
.mvv-vision h2 {
  color: #e6cc87;
}

.service-section {
  margin: 2rem 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(7, 33, 54, 0.1);
}

.built-on {
  color: var(--gold-deep);
}

.service-note,
.service-disclaimer {
  padding: 0.85rem 1rem;
  background: rgba(230, 204, 135, 0.18);
  border-left: 3px solid var(--gold-deep);
}

.talent-block {
  margin-top: 2.5rem;
}

.talent-card {
  margin-top: 1.5rem;
}

.talent-photo {
  display: block;
  width: min(100%, 22rem);
  height: auto;
  margin: 0 0 1rem;
  object-fit: cover;
}

.booking-block {
  margin-top: 2.5rem;
}

.free-consult {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(7, 33, 54, 0.1);
}

/* ——— Services intro value strip ——— */
.services-intro {
  padding: 2.75rem 0 2.5rem;
  background:
    linear-gradient(180deg, #f3f6f9 0%, #e9eef3 100%);
  border-block: 1px solid rgba(7, 33, 54, 0.08);
}

.services-intro-inner {
  width: min(52rem, calc(100% - 2rem));
  margin-inline: auto;
  text-align: center;
}

.services-intro-eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.services-intro-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 3.4vw, 2.55rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy-deep);
}

.services-intro-lead {
  margin: 0 auto 1.5rem;
  max-width: 42ch;
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(7, 33, 54, 0.82);
}

.services-intro-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.35rem;
  padding: 0;
  list-style: none;
  text-align: left;
}

.services-intro-point {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1.05rem 1.1rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(7, 33, 54, 0.1);
  box-shadow: 0 8px 20px rgba(7, 33, 54, 0.05);
}

.services-intro-point-mark {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.45rem;
  border-radius: 50%;
  background: var(--gold-deep);
}

.services-intro-point-title {
  margin: 0 0 0.3rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--navy-deep);
}

.services-intro-point-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(7, 33, 54, 0.75);
}

.services-intro-tagline {
  margin: 0 auto;
  max-width: 40ch;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--navy);
}

/* ——— Career story strip ——— */
.career-story {
  padding: 2.75rem 0 3rem;
  background: linear-gradient(180deg, #f4f7fa 0%, #e9eef3 100%);
  border-block: 1px solid rgba(7, 33, 54, 0.08);
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.career-story-inner {
  width: min(56rem, calc(100% - 2rem));
  margin-inline: auto;
}

.career-story-eyebrow {
  margin: 0 0 0.55rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.career-story-lead {
  margin: 0 0 1.5rem;
  max-width: 48ch;
  font-size: 1.08rem;
  line-height: 1.55;
  color: rgba(7, 33, 54, 0.82);
}

.career-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1rem;
  align-items: start;
}

.career-story-panel {
  padding: 1.35rem 1.3rem 1.4rem;
  background: #fff;
  border: 1px solid rgba(7, 33, 54, 0.1);
  box-shadow: 0 8px 20px rgba(7, 33, 54, 0.05);
}

.career-story-panel--benefits {
  background: linear-gradient(165deg, #fff 0%, #f7f2ea 100%);
  border-color: rgba(201, 168, 76, 0.35);
}

.career-story-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy-deep);
}

.career-story-text {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(7, 33, 54, 0.8);
}

.career-benefit-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.career-benefit-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(7, 33, 54, 0.82);
}

.career-benefit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gold-deep);
}

.career-story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.35rem;
}

/* ——— Book Your Service flow ——— */
.book-flow {
  background:
    linear-gradient(180deg, #f7f4ef 0%, #eef2f6 42%, #e8edf2 100%);
  padding: 3rem 0 3.5rem;
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.book-flow-inner {
  width: min(72rem, calc(100% - 2rem));
  margin-inline: auto;
  display: grid;
  gap: 1.75rem;
}

.book-flow-header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1.5rem;
  align-items: end;
}

.book-flow-title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.85rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy-deep);
}

.book-flow-lead {
  margin: 0;
  max-width: 36ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(7, 33, 54, 0.78);
}

.book-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-step {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.85rem 0.9rem;
  background: #fff;
  border: 1px solid rgba(7, 33, 54, 0.12);
}

.book-step-num {
  flex: 0 0 auto;
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.book-step-label {
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--navy-deep);
  font-weight: 600;
}

.book-policy {
  padding: 1.15rem 1.25rem 1.25rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(7, 33, 54, 0.1);
}

.book-policy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.book-policy-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy-deep);
}

.book-policy-tagline {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: rgba(7, 33, 54, 0.7);
}

.book-policy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.book-policy-item {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
}

.book-policy-icon {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  background: var(--navy);
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.book-policy-item--1 .book-policy-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='1.5'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='1.5'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
}

.book-policy-item--2 .book-policy-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

.book-policy-item--3 .book-policy-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E");
}

.book-policy-item--4 .book-policy-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.5 2.5L16 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 2.5 2.5L16 9'/%3E%3C/svg%3E");
}

.book-policy-item-title {
  margin: 0 0 0.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy-deep);
}

.book-policy-item-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(7, 33, 54, 0.72);
}

.book-consult {
  display: grid;
  gap: 0.85rem;
  padding: 1.35rem 1.5rem;
  background:
    linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 55%, #16456a 100%);
  color: #fff;
  box-shadow: 0 14px 36px rgba(7, 33, 54, 0.18);
}

.book-consult-badge {
  margin: 0;
  display: inline-flex;
  align-self: start;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.book-consult-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 1.5rem;
  align-items: center;
}

.book-consult-title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  font-weight: 600;
  color: var(--gold);
}

.book-consult-text {
  margin: 0;
  max-width: 48ch;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.book-consult-actions {
  display: grid;
  gap: 0.45rem;
  justify-items: stretch;
}

.book-consult-tz {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.book-services-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}

.book-services-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 600;
  color: var(--navy-deep);
}

.book-services-note {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(7, 33, 54, 0.65);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1.2rem 1.3rem;
  background: #fff;
  border: 1px solid rgba(7, 33, 54, 0.12);
  box-shadow: 0 8px 22px rgba(7, 33, 54, 0.06);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.book-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(7, 33, 54, 0.12);
}

.book-card--featured {
  border-color: var(--gold-deep);
  box-shadow: 0 12px 28px rgba(201, 168, 76, 0.2);
}

.book-card-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.22rem 0.5rem;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.book-card-duration {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(7, 33, 54, 0.55);
}

.book-card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--navy-deep);
}

.book-card--featured .book-card-title {
  padding-right: 3.5rem;
}

.book-card-price {
  margin: 0;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--navy);
}

.book-card-features {
  flex: 1;
  margin: 0.15rem 0 0.35rem;
  padding-left: 1.05rem;
  list-style: disc;
}

.book-card-features li {
  margin-bottom: 0.3rem;
  font-size: 0.88rem;
  line-height: 1.4;
  color: rgba(7, 33, 54, 0.8);
}

.book-card-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

.book-card--unsure {
  background:
    linear-gradient(160deg, rgba(12, 60, 96, 0.06), rgba(230, 204, 135, 0.18));
  border-color: rgba(12, 60, 96, 0.18);
  justify-content: center;
}

.book-card-unsure-text {
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(7, 33, 54, 0.78);
}

@media (prefers-reduced-motion: reduce) {
  .book-card,
  .book-card:hover {
    transition: none;
    transform: none;
  }
}

.feature-list.compact {
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.empty-state {
  font-size: 1.15rem;
  color: rgba(10, 10, 10, 0.75);
}

.eyebrow-inline {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--gold-deep);
}

.legal-section {
  margin-bottom: 2.5rem;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.product-price {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
}

.thank-you-section {
  min-height: 60vh;
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at top, rgba(230, 204, 135, 0.12), transparent 45%),
    var(--navy-deep);
  color: var(--white);
}

.thank-you-card {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}

.test-copies {
  margin: 0 0 1.25rem;
  text-align: left;
}

.test-copies h2,
.test-copies h3 {
  margin: 0 0 0.35rem;
}

.test-copies article {
  margin-top: 0.75rem;
  padding: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.4rem;
}

.test-copies pre {
  white-space: pre-wrap;
  font: inherit;
  margin: 0.45rem 0 0;
}

.thank-you-card h1 {
  margin: 0.25rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
}

.thank-you-message {
  margin: 0 0 1.5rem;
  color: rgba(255, 255, 255, 0.86);
}

.newsletter-form-wrap {
  max-width: 28rem;
  margin-inline: auto;
}

.form-note {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.search-field {
  flex: 1 1 14rem;
  margin-bottom: 0;
}

.search-field input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(7, 33, 54, 0.18);
  background: rgba(255, 255, 255, 0.95);
}

.search-form .btn {
  margin-top: 0;
}

.search-result-list {
  display: grid;
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.search-result-list a {
  font-weight: 600;
  color: var(--navy-deep);
}

.search-result-list a:hover {
  color: var(--gold-deep);
}

.footer-phone {
  color: var(--white);
  font-weight: 500;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
}

.footer-phone:hover {
  color: var(--gold);
}

.btn-outline-light.on-dark {
  background: transparent;
  color: var(--white);
  border-color: rgba(230, 204, 135, 0.65);
}

.btn-outline-light.on-dark:hover {
  background: var(--gold);
  color: var(--navy-deep);
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--danger);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Dialogs / cookies / errors ---------- */

.linkish {
  appearance: none;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.linkish:hover,
.linkish:focus-visible {
  color: var(--gold);
}

.site-dialog {
  width: min(32rem, calc(100% - 2rem));
  padding: 0;
  border: 1px solid rgba(230, 204, 135, 0.28);
  background: transparent;
  color: var(--white);
}

.site-dialog::backdrop {
  background: rgba(0, 0, 0, 0.65);
}

.dialog-panel {
  margin: 0;
  padding: 1.35rem 1.4rem 1.5rem;
  background: linear-gradient(165deg, #0c3c60, #072136 55%, #041018);
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.dialog-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 600;
}

.dialog-close {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--white);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.dialog-close:hover,
.dialog-close:focus-visible {
  border-color: var(--gold);
  color: var(--gold);
}

.dialog-body {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, 0.86);
}

.dialog-body a {
  color: var(--gold);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.cookie-actions .btn {
  margin-top: 0;
}

.btn-sm {
  min-height: 2.25rem;
  padding: 0.45rem 0.9rem;
  margin-top: 0;
  font-size: 0.75rem;
}

.cookie-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 120;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  max-width: min(24rem, calc(100% - 2rem));
  padding: 0.9rem 1rem;
  background: rgba(7, 33, 54, 0.96);
  border: 1px solid rgba(230, 204, 135, 0.28);
  color: var(--white);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.cookie-toast[hidden] {
  display: none !important;
}

.cookie-toast p {
  margin: 0;
  flex: 1 1 10rem;
  font-size: 0.9rem;
}

.conditional-panel {
  background: #0b1622;
  color: var(--white);
  padding: 3.5rem 0;
  border-top: 1px solid rgba(230, 204, 135, 0.14);
}

.conditional-panel[hidden] {
  display: none !important;
}

.conditional-panel.is-open {
  display: block !important;
}

.conditional-panel h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: 2rem;
}

.error-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
  padding: 4rem 0;
  background:
    radial-gradient(circle at top, rgba(230, 204, 135, 0.12), transparent 45%),
    var(--navy-deep);
}

.error-page h1 {
  margin: 0.35rem 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

body.entrance {
  overflow-x: hidden;
}

body.entrance .brand-gate {
  zoom: 0.65;
  width: calc(100vw / 0.65);
  min-height: calc(100vh / 0.65);
  min-height: calc(100dvh / 0.65);
}

.entrance-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1.35rem 1.5rem 1.2rem;
  background:
    radial-gradient(ellipse 46% 120% at 50% -20%, rgba(230, 204, 135, 0.22), transparent 68%),
    linear-gradient(180deg, #06192b 0%, #0b2a44 100%);
  border-bottom: 1px solid rgba(230, 204, 135, 0.32);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.entrance-bar .brand-gate-lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0 0.35rem;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
}

.welcome-line {
  display: block;
  max-width: 100%;
}

.welcome-line--greet {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-size: clamp(0.72rem, 1.35vw, 0.92rem);
  font-weight: 500;
  letter-spacing: 0.38em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--gold);
}

.welcome-line--greet::before,
.welcome-line--greet::after {
  content: "";
  width: clamp(1.4rem, 4vw, 2.6rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.welcome-line--greet::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.welcome-line--small {
  margin-top: 0.28rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  line-height: 1;
  color: rgba(230, 204, 135, 0.88);
}

.welcome-line--name {
  margin-top: 0.12rem;
  font-family: var(--font-display, Georgia, "Palatino Linotype", serif);
  font-weight: 600;
  font-size: clamp(1.7rem, 4.4vw, 3.2rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #f8f3ea;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.welcome-line--group {
  margin-top: 0.42rem;
  font-family: var(--font-body);
  font-size: clamp(0.68rem, 1.15vw, 0.82rem);
  font-weight: 500;
  letter-spacing: 0.46em;
  line-height: 1;
  text-indent: 0.46em;
  text-transform: uppercase;
  color: var(--gold);
}

.entrance-lang {
  position: static;
  order: -1;
  display: flex;
  gap: 0.15rem;
  padding: 0.18rem;
  border: 1px solid rgba(230, 204, 135, 0.35);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
}

.entrance-lang a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: rgba(248, 243, 234, 0.78);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 0.22rem 0.55rem;
  border: 0;
  border-radius: 999px;
}

.entrance-lang .flag {
  width: 1.05rem;
  height: 0.7rem;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.entrance-lang .flag-en { background-image: url("../images/flag-en.svg"); }
.entrance-lang .flag-fr { background-image: url("../images/flag-fr.svg"); }

.entrance-lang a.is-active {
  background: rgba(230, 204, 135, 0.18);
  color: var(--gold);
}

/* ——— Brand choice (first screen of the Nova home) ——— */
.brand-gate {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 11rem);
  background: #071c2e;
  color: #fff;
}

.brand-gate-lead {
  margin: 0;
  padding: 0.85rem 1.25rem 0.45rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(230, 204, 135, 0.88);
}

.brand-gate-block--nova {
  flex: 1 1 15rem;
  min-height: 15rem;
  align-items: center;
  justify-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.brand-gate-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 1.15 0 auto;
  min-height: min-content;
}

.brand-gate-split .brand-gate-block {
  min-height: 22rem;
  container-type: inline-size;
}

.brand-gate-block {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 22rem;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
}

.brand-gate-block.brand-gate-block--nova {
  align-items: center;
  justify-items: center;
  min-height: 34vh;
}

.brand-gate-block + .brand-gate-block {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.brand-gate-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.brand-gate-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.7s var(--ease);
}

.brand-gate-media::after {
  content: "";
  position: absolute;
  inset: 0;
}

.brand-gate-block--nova .brand-gate-media::after {
  background:
    radial-gradient(circle at 78% 18%, rgba(230, 204, 135, 0.32), transparent 42%),
    linear-gradient(180deg, rgba(7, 28, 46, 0.18) 0%, rgba(7, 28, 46, 0.68) 58%, rgba(7, 28, 46, 0.94) 100%);
}

.brand-gate-block--quick .brand-gate-media::after {
  background:
    radial-gradient(circle at 78% 18%, rgba(230, 204, 135, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(7, 33, 54, 0.2) 0%, rgba(7, 33, 54, 0.72) 62%, rgba(7, 33, 54, 0.94) 100%);
}

.brand-gate-block--fizzo .brand-gate-media::after {
  background:
    radial-gradient(circle at 74% 20%, rgba(212, 26, 145, 0.48), transparent 42%),
    linear-gradient(180deg, rgba(40, 8, 28, 0.22) 0%, rgba(18, 6, 16, 0.72) 58%, rgba(12, 4, 12, 0.94) 100%);
}

.brand-gate-block--gorilla .brand-gate-media::after {
  background:
    radial-gradient(circle at 72% 18%, rgba(62, 91, 88, 0.35), transparent 42%),
    linear-gradient(180deg, rgba(18, 32, 30, 0.18) 0%, rgba(18, 32, 30, 0.7) 58%, rgba(12, 22, 20, 0.94) 100%);
}

.brand-gate-badge,
.brand-gate-portrait {
  position: absolute;
  z-index: 1;
  top: 1.15rem;
  right: 1.1rem;
  width: 5.6rem;
  height: 5.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.brand-gate-badge {
  background: #e6cc87;
  color: #072136;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.brand-gate-block--fizzo .brand-gate-portrait {
  background: #d41a91;
  box-shadow: 0 0 0 4px rgba(212, 26, 145, 0.35), 0 12px 28px rgba(0, 0, 0, 0.35);
}

.brand-gate-portrait--square {
  border-radius: 0.35rem;
  object-fit: cover;
}

.brand-gate-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 2.2rem 1.15rem 1.5rem;
  max-width: 100%;
}

.brand-gate-kicker {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-gate-block--nova .brand-gate-kicker,
.brand-gate-block--quick .brand-gate-kicker { color: #e6cc87; }
.brand-gate-block--fizzo .brand-gate-kicker { color: #f5a6d8; }
.brand-gate-block--gorilla .brand-gate-kicker { color: #c9e0dc; }

.brand-gate-name {
  font-family: var(--font-display, Georgia, "Palatino Linotype", serif);
  font-size: clamp(1.18rem, 8.5cqi, 2.8rem);
  font-weight: 600;
  line-height: 0.95;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

.brand-gate-block--nova .brand-gate-copy {
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: min(96vw, 72rem);
}

.brand-gate-block--nova .brand-gate-name {
  white-space: nowrap;
  font-size: clamp(0.85rem, 3.6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.brand-gate-block--nova .brand-gate-hint {
  max-width: 40rem;
  font-size: 0.78rem;
}

.brand-gate-block--nova .brand-gate-cta {
  margin-top: 0.7rem;
  padding: 0.85rem 1.2rem;
  font-size: 0.58rem;
}

.brand-gate-block--nova .brand-gate-cta strong {
  font-size: clamp(0.7rem, 1.8vw, 0.85rem);
  white-space: nowrap;
}

.brand-gate-hint {
  font-size: 0.68rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.84);
}

.brand-gate-cta {
  margin-top: 0.45rem;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.7rem 0.95rem;
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: transform 0.2s var(--ease), filter 0.2s var(--ease);
}

.brand-gate-cta strong {
  font-family: var(--font-display, Georgia, "Palatino Linotype", serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
}

.brand-gate-block--nova .brand-gate-cta,
.brand-gate-block--quick .brand-gate-cta {
  color: #072136;
  background: #e6cc87;
}

.brand-gate-portrait--logo {
  width: 8.2rem;
  height: 4.4rem;
  border-radius: 0.35rem;
  object-fit: contain;
  background: #f4efe6;
  padding: 0.2rem 0.35rem;
}

.brand-gate-block--fizzo .brand-gate-cta { background: #d41a91; }
.brand-gate-block--gorilla .brand-gate-cta { background: #3e5b58; }

.brand-gate-block:hover .brand-gate-bg,
.brand-gate-block:focus-visible .brand-gate-bg {
  transform: scale(1.1);
}

.brand-gate-block:hover .brand-gate-cta,
.brand-gate-block:focus-visible .brand-gate-cta {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.brand-gate-block:focus-visible {
  outline: 2px solid #e6cc87;
  outline-offset: -3px;
}

/* ——— Welcome hero (above Home / About) ——— */
.welcome-hero {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  min-height: clamp(18rem, 42vh, 26rem);
  margin: 0 0 1rem;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.welcome-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.welcome-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.04);
  animation: welcome-drift 28s var(--ease) infinite alternate;
}

.welcome-hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(7, 28, 46, 0.42) 0%, rgba(7, 28, 46, 0.72) 68%),
    linear-gradient(180deg, rgba(7, 28, 46, 0.38) 0%, rgba(7, 28, 46, 0.78) 100%);
}

.welcome-hero-grain {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(230, 204, 135, 0.18), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(12, 60, 96, 0.22), transparent 32%);
  pointer-events: none;
}

.welcome-hero-inner {
  position: relative;
  z-index: 1;
  width: min(42rem, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: clamp(1.25rem, 3.5vh, 2rem) 0 clamp(1.1rem, 3vh, 1.75rem);
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  text-align: center;
  animation: welcome-rise 0.9s var(--ease) both;
}

.welcome-hero-kicker {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  animation: welcome-rise 0.9s var(--ease) 0.08s both;
}

.welcome-hero-to {
  margin: 0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
  animation: welcome-rise 0.9s var(--ease) 0.12s both;
}

.welcome-hero-brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4.2vw, 3.35rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gold);
  white-space: nowrap;
  animation: welcome-rise 0.9s var(--ease) 0.18s both;
}

.welcome-hero-brand-link {
  color: inherit;
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.welcome-hero-brand-link:hover,
.welcome-hero-brand-link:focus-visible {
  color: var(--gold-deep);
  text-decoration: none;
  opacity: 0.92;
}

.welcome-hero-rule {
  width: 3.5rem;
  height: 2px;
  margin: 0.45rem auto 0.15rem;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: welcome-rule 1s var(--ease) 0.28s both;
}

.welcome-hero-we {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold);
  animation: welcome-rise 0.9s var(--ease) 0.3s both;
}

.welcome-hero-lead,
.welcome-hero-support {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  animation: welcome-rise 0.9s var(--ease) 0.36s both;
}

.welcome-hero-support {
  color: rgba(255, 255, 255, 0.72);
  animation-delay: 0.42s;
}

.welcome-hero-actions {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.45rem;
  animation: welcome-rise 0.9s var(--ease) 0.48s both;
}

.welcome-hero-cta {
  min-height: 1.85rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}

.welcome-hero-motto {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(255, 255, 255, 0.7);
}

.home-gateway {
  margin: 0;
  padding: 0.85rem 1rem 0.35rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy, #072136);
}

@keyframes welcome-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); }
}

@keyframes welcome-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 1.1rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes welcome-rule {
  from {
    opacity: 0;
    width: 0;
  }
  to {
    opacity: 1;
    width: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-hero-media img,
  .welcome-hero-inner,
  .welcome-hero-kicker,
  .welcome-hero-to,
  .welcome-hero-brand,
  .welcome-hero-rule,
  .welcome-hero-we,
  .welcome-hero-lead,
  .welcome-hero-support,
  .welcome-hero-actions {
    animation: none;
  }
}

/* ——— Reference portal layout ——— */
.home-board {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 1rem;
  align-items: start;
  width: min(92rem, calc(100% - 1.5rem));
  margin: 1rem auto 2rem;
  padding: 0;
}

main:has(.home-board) {
  background: #e8edf2;
  padding-bottom: 1rem;
}

.home-board-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.portal-section {
  background:
    linear-gradient(180deg, #e2e7ed 0%, #d5dce6 100%);
  padding: 0 0 1rem;
}

.portal-section--board {
  border-radius: 0.45rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(7, 33, 54, 0.1);
  padding-bottom: 1rem;
  scroll-margin-top: calc(var(--header-h) + 0.75rem);
}

.portal-page {
  width: min(92rem, calc(100% - 1.5rem));
  margin: 1rem auto 2rem;
}

.portal-page .portal-grid {
  width: calc(100% - 1.5rem);
  margin-inline: auto;
}

.portal-page .portal-card {
  min-height: 12.5rem;
  border-radius: 0.55rem;
}

.content-page {
  width: min(92rem, calc(100% - 1.5rem));
  margin: 1rem auto 2rem;
  background: linear-gradient(180deg, #e2e7ed 0%, #d5dce6 100%);
  border-radius: 0.45rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(7, 33, 54, 0.1);
}

main:has(.content-page),
main:has(.portal-page) {
  background: #dbe2ea;
  padding-bottom: 1rem;
}

.content-page-body {
  padding: 1.35rem 1.25rem 1.75rem;
  display: grid;
  gap: 1.25rem;
}

.content-lead {
  margin: 0;
  max-width: 62ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(7, 33, 54, 0.82);
}

.content-panel {
  background: #fff;
  border: 1px solid rgba(7, 33, 54, 0.1);
  padding: 1.25rem 1.3rem 1.35rem;
  box-shadow: 0 8px 20px rgba(7, 33, 54, 0.05);
}

.content-panel--dark {
  background: var(--navy-deep);
  border-color: transparent;
  color: #fff;
}

.content-panel--dark .content-panel-title,
.content-panel--dark .content-panel-text,
.content-panel--dark h2,
.content-panel--dark h3,
.content-panel--dark p,
.content-panel--dark li {
  color: inherit;
}

.content-panel--navy {
  background: var(--navy);
  border-color: transparent;
  color: #fff;
}

.content-panel--navy .content-panel-title,
.content-panel--navy .content-panel-text,
.content-panel--navy h2,
.content-panel--navy h3,
.content-panel--navy p,
.content-panel--navy li {
  color: inherit;
}

.content-panel--cream {
  background: #f7f2ea;
}

.content-panel-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  font-weight: 600;
  color: var(--navy-deep);
}

.content-panel-title--sm {
  font-size: 1.15rem;
}

.content-panel-kicker {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.content-panel--dark .content-panel-kicker,
.content-panel--navy .content-panel-kicker {
  color: var(--gold);
}

.content-panel-text {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(7, 33, 54, 0.8);
}

.content-panel-text:last-child {
  margin-bottom: 0;
}

.content-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1rem;
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}

.content-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.content-page--about .content-grid--3 {
  align-items: stretch;
}

.content-page--about .content-grid--3 > .content-panel,
.content-page--about .content-grid--3 > .about-mvv-band {
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.content-page--about .content-grid--3 > .content-panel .content-panel-actions {
  margin-top: auto;
}

.content-page--about .about-mvv-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: 1fr 1fr auto;
  min-height: 0;
}

.content-page--about .about-mvv-card {
  min-height: 0;
}

.content-page--about .about-mvv-card--values {
  flex: 1 1 auto;
}

/* Soft cream/gold wash — keeps Who readable next to MVV + CEO */
.content-page--about .about-who-panel {
  background:
    linear-gradient(165deg, rgba(230, 204, 135, 0.22) 0%, rgba(244, 239, 230, 0.96) 42%, #f7f3ea 100%),
    var(--cream, #f4efe6);
  border-color: rgba(201, 168, 76, 0.28);
  box-shadow: 0 8px 22px rgba(109, 66, 42, 0.08);
}

.service-accordions {
  margin: 0.85rem 0 0.35rem;
  display: grid;
  gap: 0.45rem;
}

.service-accordion {
  border: 1px solid rgba(7, 33, 54, 0.12);
  background: rgba(7, 60, 80, 0.03);
  border-radius: 0.35rem;
  overflow: hidden;
}

.service-accordion[open] {
  background: #fff;
  border-color: rgba(12, 90, 100, 0.28);
  box-shadow: 0 6px 18px rgba(7, 33, 54, 0.06);
}

.service-accordion-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0c5a64;
  line-height: 1.35;
  user-select: none;
}

.service-accordion-summary::-webkit-details-marker {
  display: none;
}

.service-accordion-summary::after {
  content: "+";
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(12, 90, 100, 0.35);
  color: #0c5a64;
  font-size: 1.05rem;
  line-height: 1;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}

.service-accordion[open] > .service-accordion-summary {
  color: var(--navy-deep, #072136);
  border-bottom: 1px solid rgba(7, 33, 54, 0.08);
}

.service-accordion[open] > .service-accordion-summary::after {
  content: "–";
  background: rgba(12, 90, 100, 0.1);
  transform: rotate(180deg);
}

.service-accordion-summary:hover,
.service-accordion-summary:focus-visible {
  background: rgba(12, 90, 100, 0.07);
  outline: none;
}

.service-accordion-body {
  padding: 0.75rem 0.95rem 0.95rem;
  display: grid;
  gap: 0.45rem;
}

.content-list {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.content-list li {
  font-size: 0.92rem;
  line-height: 1.45;
  color: rgba(7, 33, 54, 0.8);
}

.content-panel--dark .content-list li,
.content-panel--navy .content-list li {
  color: rgba(255, 255, 255, 0.88);
}

.content-list--divisions {
  list-style: none;
  padding-left: 0;
  margin-top: 0.85rem;
  gap: 0.55rem;
}

.content-list--divisions a {
  display: inline-block;
  color: var(--gold-deep, #8a6a2a);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.content-list--divisions a:hover,
.content-list--divisions a:focus-visible {
  color: var(--navy-deep, #072136);
  border-bottom-color: var(--gold, #e6cc87);
  transform: translateX(3px);
}

.content-meta {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(7, 33, 54, 0.55);
}

.content-panel--dark .content-meta,
.content-panel--navy .content-meta {
  color: rgba(255, 255, 255, 0.65);
}

.content-cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: linear-gradient(120deg, var(--navy-deep), var(--navy));
  color: #fff;
}

.content-cta-bar .content-panel-actions {
  margin-top: 0;
}

.content-cta-bar p {
  margin: 0;
  max-width: 42ch;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.9);
}

.content-media {
  margin: 0 0 0.85rem;
  overflow: hidden;
  border-radius: 0.2rem;
}

.content-media img {
  display: block;
  width: 100%;
  height: 11rem;
  object-fit: cover;
}

.content-gallery-item {
  padding: 0;
  overflow: hidden;
}

.content-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
}

.content-gallery-item figcaption {
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: rgba(7, 33, 54, 0.72);
}

.content-gallery-item figcaption a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.content-gallery-item figcaption a:hover,
.content-gallery-item figcaption a:focus-visible {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.gallery-item-link {
  display: block;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.gallery-item-link img,
.gallery-item-link .gallery-placeholder {
  transition: transform 0.35s var(--ease);
}

.content-gallery-item--linked:hover .gallery-item-link img,
.content-gallery-item--linked:focus-within .gallery-item-link img {
  transform: scale(1.04);
}

.gallery-item-link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item-link img,
  .gallery-item-link .gallery-placeholder {
    transition: none;
  }

  .content-gallery-item--linked:hover .gallery-item-link img,
  .content-gallery-item--linked:focus-within .gallery-item-link img {
    transform: none;
  }
}

.content-faq .faq-item,
.content-legal .legal-section {
  background: #fff;
  border: 1px solid rgba(7, 33, 54, 0.1);
  margin-bottom: 0.75rem;
  padding: 0;
}

.content-faq .faq-item summary {
  padding: 1rem 1.15rem;
}

.content-faq .faq-answer {
  padding: 0 1.15rem 1rem;
}

.content-legal .legal-section {
  padding: 1.25rem 1.3rem;
}

.content-legal .legal-section h2 {
  margin-top: 0;
}

.home-board .portal-grid {
  width: calc(100% - 1.5rem);
  margin-inline: auto;
}

.home-board .portal-card {
  min-height: 11.5rem;
  border-radius: 0.55rem;
}

.home-board .portal-card--banner {
  min-height: 7.25rem;
}

.home-board .brand-panel {
  border-radius: 0.45rem;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(7, 33, 54, 0.1);
  padding-top: 2.25rem;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-board .brand-panel-lockup {
  flex-direction: column;
  text-align: center;
}

.home-board .brand-values {
  margin-bottom: 1.5rem;
}

.portal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.95rem 1.35rem;
  color: #fff;
}

.portal-head-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.portal-head-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.portal-head-link:hover .portal-head-title,
.portal-head-link:focus-visible .portal-head-title {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.portal-head-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portal-head-slogan {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.8vw, 1.2rem);
  opacity: 0.95;
}

.portal-head-icon {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-block;
  background: currentColor;
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.portal-head--home {
  background: linear-gradient(90deg, #0c3c60, #145a8c);
}
.portal-head--home .portal-head-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5 10.5V20h14v-9.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5 10.5V20h14v-9.5'/%3E%3C/svg%3E");
}

.portal-head--about {
  background: linear-gradient(90deg, #6b4f3a, #8a684c);
}
.portal-head--about .portal-head-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='16' cy='9' r='2.5'/%3E%3Cpath d='M3.5 19c.8-3 2.8-4.5 5.5-4.5s4.7 1.5 5.5 4.5'/%3E%3Cpath d='M13 19c.5-2 1.8-3.2 3.8-3.2 1.4 0 2.5.6 3.2 1.7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='16' cy='9' r='2.5'/%3E%3Cpath d='M3.5 19c.8-3 2.8-4.5 5.5-4.5s4.7 1.5 5.5 4.5'/%3E%3Cpath d='M13 19c.5-2 1.8-3.2 3.8-3.2 1.4 0 2.5.6 3.2 1.7'/%3E%3C/svg%3E");
}

.portal-head--services {
  background: linear-gradient(90deg, #0d5c63, #147a84);
}
.portal-head--services .portal-head-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
}

.portal-head--media {
  background: linear-gradient(90deg, #6b1f3a, #8e2a4d);
}
.portal-head--media .portal-head-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5.5v13l11-6.5L8 5.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M8 5.5v13l11-6.5L8 5.5z'/%3E%3C/svg%3E");
}

.portal-head--career {
  background: linear-gradient(90deg, #1a4f8a, #2563a8);
}
.portal-head--career .portal-head-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='7' width='18' height='13' rx='1.5'/%3E%3Cpath d='M8 7V5.5A1.5 1.5 0 0 1 9.5 4h5A1.5 1.5 0 0 1 16 5.5V7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='7' width='18' height='13' rx='1.5'/%3E%3Cpath d='M8 7V5.5A1.5 1.5 0 0 1 9.5 4h5A1.5 1.5 0 0 1 16 5.5V7'/%3E%3C/svg%3E");
}

.portal-grid {
  display: grid;
  gap: 1rem;
  width: min(72rem, calc(100% - 2rem));
  margin: 1.15rem auto 0;
}

.portal-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portal-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-board .portal-grid-3 .portal-card,
.home-board .portal-grid-4 .portal-card {
  min-height: 12rem;
}

.portal-media-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  width: min(72rem, calc(100% - 2rem));
  margin: 0.35rem auto 0;
}

.portal-media-link {
  display: grid;
  gap: 0.25rem;
  padding: 0.85rem 1rem;
  background: #0c3c60;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, transform 0.2s ease;
}

.portal-media-link:hover,
.portal-media-link:focus-visible {
  background: #072136;
  transform: translateY(-1px);
}

.portal-media-link-title {
  font-family: var(--font-body, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.portal-media-link-sub {
  font-size: 0.82rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}

.portal-media-link--blog { background: #1a4d3a; }
.portal-media-link--blog:hover,
.portal-media-link--blog:focus-visible { background: #123828; }

.portal-media-link--events { background: #3c2a1a; }
.portal-media-link--events:hover,
.portal-media-link--events:focus-visible { background: #2a1c12; }

/* ——— About 4-column layout ——— */
.about-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 0;
  align-items: start;
  background: #0a121a;
}

.about-col {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.about-col:last-child {
  border-right: 0;
}

.about-col-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.about-col-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-col-veil {
  position: absolute;
  inset: 0;
}

.about-col-veil--dark {
  background:
    linear-gradient(180deg, rgba(7, 33, 54, 0.35) 0%, rgba(4, 16, 24, 0.88) 70%);
}

.about-col-veil--cream {
  background:
    linear-gradient(180deg, rgba(247, 244, 239, 0.88) 0%, rgba(239, 234, 226, 0.96) 100%);
}

.about-col-veil--navy {
  background:
    linear-gradient(180deg, rgba(7, 33, 54, 0.72) 0%, rgba(4, 16, 24, 0.94) 100%);
}

.about-col-veil--ceo {
  background:
    linear-gradient(180deg, rgba(12, 60, 96, 0.55) 0%, rgba(7, 33, 54, 0.92) 65%);
}

.about-col-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 0 1 auto;
  padding: 1.25rem 1.15rem 1.35rem;
  overflow: visible;
  max-height: none;
}

.about-col-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.about-col-eyebrow--on-cream {
  color: var(--gold-deep);
}

.service-columns--plain .about-col-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-wrap: balance;
}

.service-page-banner {
  width: 100%;
  padding: 1.35rem 1.25rem 1.15rem;
  text-align: center;
  background: #f7f4ef;
  color: #0a0a0a;
}

.service-page-banner h1 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.45rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.2;
  color: #0a0a0a;
}

.service-page-banner p {
  margin: 0.45rem auto 0;
  max-width: 46rem;
  font-size: clamp(0.9rem, 1.4vw, 1.02rem);
  line-height: 1.5;
  color: #1a1a1a;
}

.events-block {
  padding: 0.85rem 0 0.35rem;
}

.events-block-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 600;
  color: #0a0a0a;
}

.events-block-lead {
  margin: 0 0 0.85rem;
  max-width: 42rem;
  color: #4a5560;
  font-size: 0.95rem;
}

.events-block--past {
  padding-top: 1.15rem;
  border-top: 1px solid rgba(10, 10, 10, 0.1);
}

.service-col-label--ink {
  color: #0a0a0a;
}

.service-col-heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  text-wrap: balance;
}

.service-col-heading--ink {
  color: #0a0a0a;
}

.about-col-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.8vw, 1.85rem);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
}

.about-col-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.7vw, 1.65rem);
  color: var(--navy-deep);
}

.about-col-heading--gold {
  color: var(--gold);
}

.about-col-brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy);
}

.about-col-label {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold);
}

.about-col-label--ink {
  color: var(--gold-deep);
}

.about-col-sub {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--navy-deep);
}

.about-col-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

.about-col-text--muted {
  color: rgba(255, 255, 255, 0.75);
}

.about-col-text--ink {
  color: #1a1a1a;
}

.about-col-text--italic {
  font-style: italic;
}

.about-col-cta {
  margin-top: 0.85rem;
  align-self: flex-start;
}

.about-col-links {
  display: grid;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.about-col-links a {
  display: block;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(12, 60, 96, 0.2);
  background: rgba(255, 255, 255, 0.7);
  color: var(--navy-deep);
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.about-col-links a:hover {
  background: var(--navy);
  color: #fff;
}

.about-col-body--stack {
  gap: 0.75rem;
}

.about-mvv-band {
  margin: 0;
  padding: 0.95rem;
  background: #6d422a;
  border: 12px solid #0c2b4e;
  align-self: stretch;
}

.about-mvv-card h2 span {
  font-size: 1.28em;
  font-weight: 700;
}

.about-mvv-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
}

.about-mvv-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 1.15rem 1.1rem;
  text-align: left;
  border: 1px solid rgba(7, 33, 54, 0.35);
}

.about-mvv-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #c5a368;
  background: none;
  -webkit-text-fill-color: #c5a368;
}

.about-mvv-card p,
.about-mvv-card li {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
}

.about-mvv-card ul {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
  text-align: left;
}

.about-mvv-card li {
  display: block;
}

.about-mvv-card li strong {
  margin-right: 0.35rem;
  font-weight: 700;
}

.about-mvv-card--mission {
  background: #0a1a2a;
  color: #fff;
}

.about-mvv-card--vision {
  background: #163e4d;
  color: #fff;
}

.about-mvv-card--values {
  background: #e4e2da;
  color: #1a1a1a;
}

.about-mvv-card--values h2 {
  color: #c5a368;
  -webkit-text-fill-color: #c5a368;
}

.about-col--who .about-col-heading {
  color: var(--navy-deep);
}

.service-disclaimer--col {
  margin-top: 0.5rem;
  padding: 0.55rem 0.65rem;
  font-size: 0.72rem;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.28);
  border-left: 2px solid var(--gold);
}

.service-disclaimer--col p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
}

.about-col--service .about-col-heading:not(.about-col-heading--gold) {
  color: var(--navy-deep);
}

/* Immigration / service / media columns — no photo backgrounds, hug content */
.service-columns--plain {
  background: #f4f6f8;
  min-height: 0;
  align-items: start;
}

.service-columns--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.service-columns--plain .about-col {
  min-height: 0;
  height: auto;
}

.service-columns--plain .about-col-body {
  max-height: none;
  flex: 0 1 auto;
  justify-content: flex-start;
  padding: 1.25rem 1.15rem 1.35rem;
  overflow: visible;
}

.about-col--plain {
  background: #0a1620;
}

.about-col--plain.about-col--dark {
  background: #0a1620;
}

.about-col--plain.about-col--cream {
  background: #f7f4ef;
}

.about-col--plain.about-col--navy {
  background: #072136;
}

.about-col--plain.about-col--ceo {
  background: #0c3c60;
}

.blog-card-media {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-cover {
  margin: 0 0 1.5rem;
}

.blog-post-cover img {
  display: block;
  width: 100%;
  max-height: 28rem;
  object-fit: cover;
  border-radius: 0;
}

.blog-cats {
  margin: 0 0 1.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(15, 35, 60, 0.12);
}

.blog-cats-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-cats-link {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--navy-deep, #072136);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.blog-cats-link:hover,
.blog-cats-link.is-active {
  color: var(--gold-deep, #8a6a2a);
}

.blog-cats-link.is-active {
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

.blog-category-intro {
  max-width: 46rem;
  margin: 0 0 1.5rem;
  line-height: 1.7;
  color: var(--ink-soft, #334155);
}

.blog-feed {
  display: grid;
  gap: 1.75rem;
}

.blog-feed-item {
  display: grid;
  gap: 1.25rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(15, 35, 60, 0.1);
}

.blog-feed-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.blog-feed-media {
  display: block;
  overflow: hidden;
  background: rgba(15, 35, 60, 0.06);
}

.blog-feed-media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.blog-feed-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  color: rgba(15, 35, 60, 0.72);
}

.blog-feed-author {
  font-weight: 600;
  color: var(--navy-deep);
}

.blog-feed-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy-deep);
}

.blog-feed-title a {
  color: inherit;
  text-decoration: none;
}

.blog-feed-title a:hover {
  color: var(--gold, #c4a35a);
}

.blog-feed-excerpt {
  margin: 0 0 0.85rem;
  max-width: 48rem;
  line-height: 1.7;
  color: var(--ink-soft, #334155);
}

.blog-engagement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.15rem;
  margin: 0 0 1rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(15, 35, 60, 0.1);
  font-size: 0.88rem;
  color: rgba(15, 35, 60, 0.72);
}

.blog-engagement-likes {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  color: var(--navy-deep);
  font-weight: 600;
}

.blog-engagement-likes [aria-hidden="true"] {
  color: #b42318;
}

.blog-feed-actions {
  margin: 0;
}

.prose .blog-engagement {
  margin: 0 0 1.25rem;
  max-width: 46rem;
}

.blog-engagement--on-dark {
  border-top-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
}

.blog-engagement--on-dark .blog-engagement-likes {
  color: var(--white);
}

.blog-empty {
  margin: 1rem 0 0;
  font-size: 1.05rem;
  color: rgba(15, 35, 60, 0.75);
}

@media (min-width: 768px) {
  .blog-feed-item {
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    align-items: start;
    gap: 1.75rem;
  }
}

.about-col--plain .about-col-body {
  max-height: none;
  justify-content: flex-start;
  padding-top: 1.25rem;
  padding-bottom: 1.35rem;
}

.media-hub .about-col-heading {
  font-size: clamp(1.35rem, 2vw, 1.85rem);
}

.media-hub .about-col-text {
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  max-width: 28ch;
}

.media-hub-card {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s ease;
}

.media-hub-card:hover {
  opacity: 0.88;
}

.media-hub-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}

.service-col-bullets {
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}

.service-col-bullets--ink {
  color: var(--navy-deep);
}

.talent-plain {
  background: #f4f6f8;
}

.talent-release {
  margin-top: 2rem;
  padding: 1.35rem 1.1rem 1.45rem;
  text-align: center;
  color: #f4f7fb;
  background-color: #071c2e;
  background-image:
    linear-gradient(180deg, rgba(7, 28, 46, 0.78) 0%, rgba(7, 28, 46, 0.88) 55%, rgba(7, 28, 46, 0.94) 100%),
    url("../images/nam/fizzo-release-bg.png");
  background-size: cover;
  background-position: center 18%;
  background-repeat: no-repeat;
  border: 1px solid rgba(230, 204, 135, 0.28);
}

.talent-release-artist {
  margin: 0 0 0.35rem;
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.talent-release-kicker {
  margin: 0 0 0.3rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.talent-release-song {
  margin: 0.1rem 0 0.7rem;
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
  font-weight: 600;
  line-height: 1.15;
  color: #e23b3b;
  border-bottom: 2px solid #e23b3b;
  padding-bottom: 0.08rem;
}

.talent-release-blurb {
  margin: 0 auto 0.85rem;
  max-width: 32rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}

.talent-release-em {
  color: var(--gold);
  font-weight: 600;
}

.talent-release-links {
  list-style: none;
  margin: 0 auto 0.85rem;
  padding: 0;
  display: grid;
  gap: 0.32rem;
  width: min(18rem, 100%);
  text-align: left;
}

.talent-release-links a {
  display: block;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.28rem 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(7, 28, 46, 0.35);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.talent-release-links a:hover,
.talent-release-links a:focus-visible {
  color: var(--gold);
  border-color: rgba(230, 204, 135, 0.55);
  background: rgba(230, 204, 135, 0.12);
}

.talent-release-remember {
  margin: 0.25rem 0 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold);
}

.talent-release-actions {
  margin: 0 0 0.65rem;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: 0.01em;
}

.talent-release-social-label {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.92);
}

.talent-release-links--social {
  margin-bottom: 0;
}

.gallery-plain {
  background: #f4f6f8;
  padding-top: 1.5rem;
}

.gallery-plain .gallery-item {
  background: #fff;
  box-shadow: none;
  border: 1px solid rgba(7, 33, 54, 0.08);
}

.portal-grid-1 {
  grid-template-columns: 1fr;
}

.home-board .portal-grid-1 .portal-card {
  min-height: 14rem;
}

.portal-banners {
  margin-top: 1rem;
}

.portal-card {
  position: relative;
  display: block;
  min-height: 15rem;
  overflow: hidden;
  border-radius: 0.35rem;
  color: #fff;
  isolation: isolate;
  box-shadow: 0 10px 28px rgba(7, 33, 54, 0.16);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.portal-card:hover,
.portal-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(7, 33, 54, 0.22);
  outline: none;
}

.portal-card-media,
.portal-card-media img,
.portal-card-veil {
  position: absolute;
  inset: 0;
}

.portal-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 0.45s var(--ease);
}

.portal-card:hover .portal-card-media img {
  transform: scale(1.08);
}

.portal-card-veil {
  background:
    linear-gradient(180deg, rgba(7, 33, 54, 0.15) 0%, rgba(7, 33, 54, 0.72) 78%),
    linear-gradient(90deg, rgba(7, 33, 54, 0.35), transparent 55%);
  z-index: 1;
}

.portal-card--welcome .portal-card-media {
  background: radial-gradient(circle at 50% 35%, #1a6fa3, #072136 70%);
}

.portal-card--welcome .portal-card-media img {
  object-fit: contain;
  width: 48%;
  height: 48%;
  inset: auto;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.92;
}

.portal-card--welcome:hover .portal-card-media img {
  transform: translate(-50%, -50%) scale(1.05);
}

.portal-card--services .portal-card-veil {
  background:
    linear-gradient(180deg, rgba(13, 92, 99, 0.25), rgba(7, 33, 54, 0.78)),
    repeating-linear-gradient(-25deg, transparent, transparent 18px, rgba(255, 255, 255, 0.04) 18px, rgba(255, 255, 255, 0.04) 19px);
}

.portal-card--banner {
  min-height: 9.5rem;
}

.portal-card--banner .portal-card-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  font-weight: 600;
  max-width: 16ch;
}

.portal-card-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.35rem;
  min-height: inherit;
  padding: 1.35rem 1.25rem 1.4rem;
}

.portal-card-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.portal-card-sub {
  font-size: clamp(0.86rem, 1.5vw, 0.98rem);
  line-height: 1.35;
  opacity: 0.92;
  max-width: 28ch;
}

.portal-card-arrow {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  margin-top: 0.85rem;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.12);
  font-size: 1.35rem;
  line-height: 1;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}

.portal-card:hover .portal-card-arrow {
  background: rgba(230, 204, 135, 0.95);
  color: var(--navy-deep);
  transform: translateX(3px);
}

.portal-card-icon {
  width: 1.7rem;
  height: 1.7rem;
  margin-bottom: 0.35rem;
  background: #fff;
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.portal-card-icon--camera .portal-card-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 8h3l2-2h6l2 2h3v11H4V8z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 8h3l2-2h6l2 2h3v11H4V8z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
}

.portal-card-icon--pen .portal-card-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16v4z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E");
}

.portal-card-icon--calendar .portal-card-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

.portal-card-icon--clock .portal-card-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v5l3 2'/%3E%3C/svg%3E");
}

.hub-detail {
  background: var(--snow);
  color: var(--ink);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.hub-detail h2 {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  color: var(--navy-deep);
}

.brand-panel {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(20, 90, 140, 0.12), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(230, 204, 135, 0.14), transparent 40%),
    linear-gradient(180deg, #f4f7fb, #e8eef5);
  padding: 3rem 1.25rem 0;
  overflow: hidden;
}

.brand-panel::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cg fill='none' stroke='%230c3c60' stroke-opacity='0.08' stroke-width='1'%3E%3Ccircle cx='400' cy='200' r='160'/%3E%3Ccircle cx='400' cy='200' r='110'/%3E%3Cpath d='M80 200h640M400 40v320M140 90l520 220M140 310l520-220'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  pointer-events: none;
}

.brand-panel-inner {
  position: relative;
  z-index: 1;
  width: min(52rem, 100%);
  margin: 0 auto;
  text-align: center;
}

.brand-panel-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.brand-panel-lockup img {
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(7, 33, 54, 0.2));
}

.brand-panel-lockup h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--navy-deep);
  letter-spacing: 0.02em;
}

.brand-panel-tagline {
  margin: 0.35rem 0 0;
  color: #4a5a6a;
  font-family: var(--font-display);
  font-style: italic;
}

.brand-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 2.25rem;
}

.brand-values li {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.brand-value-icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(12, 60, 96, 0.18);
  box-shadow: 0 6px 16px rgba(7, 33, 54, 0.08);
  mask: none;
  position: relative;
}

.brand-value-icon::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  background: var(--navy);
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.brand-value-icon--shield::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2 4 5v7c0 5 3.4 8.4 8 10 4.6-1.6 8-5 8-10V5l-8-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2 4 5v7c0 5 3.4 8.4 8 10 4.6-1.6 8-5 8-10V5l-8-3z'/%3E%3C/svg%3E");
}

.brand-value-icon--people::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='9' r='2.5'/%3E%3Cpath d='M2 19c1-3.2 3.2-5 6-5s5 1.8 6 5M13 19c.6-2.2 2-3.5 4.2-3.5 1.5 0 2.7.7 3.5 1.9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='9' r='2.5'/%3E%3Cpath d='M2 19c1-3.2 3.2-5 6-5s5 1.8 6 5M13 19c.6-2.2 2-3.5 4.2-3.5 1.5 0 2.7.7 3.5 1.9'/%3E%3C/svg%3E");
}

.brand-value-icon--chart::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 20V10h3v10H4zm6 0V4h3v16h-3zm6 0v-7h3v7h-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 20V10h3v10H4zm6 0V4h3v16h-3zm6 0v-7h3v7h-3z'/%3E%3C/svg%3E");
}

.brand-value-icon--leaf::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M5 19c8 0 14-6 14-14-8 0-14 6-14 14zm0 0c3-3 6-5 10-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M5 19c8 0 14-6 14-14-8 0-14 6-14 14zm0 0c3-3 6-5 10-6'/%3E%3C/svg%3E");
}

.brand-panel-band {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 1.1rem 1.25rem 1.25rem;
  text-align: center;
  color: #fff;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.25rem);
  background: linear-gradient(90deg, #072136, #0c3c60 45%, #072136);
  border-radius: 2.5rem 2.5rem 0 0;
}

@keyframes portal-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

.portal-card {
  animation: portal-in 0.55s var(--ease) both;
}

.portal-grid .portal-card:nth-child(1) { animation-delay: 0.05s; }
.portal-grid .portal-card:nth-child(2) { animation-delay: 0.12s; }
.portal-grid .portal-card:nth-child(3) { animation-delay: 0.19s; }
.portal-grid .portal-card:nth-child(4) { animation-delay: 0.26s; }
.portal-grid .portal-card:nth-child(5) { animation-delay: 0.33s; }
.portal-grid .portal-card:nth-child(6) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  .portal-card,
  .portal-card:hover,
  .portal-card:hover .portal-card-media img,
  .portal-card:hover .portal-card-arrow {
    animation: none;
    transform: none;
  }
}

.intake-section {
  margin: 0 0 0.35rem;
  color: #8a6d2f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.intake-progress {
  margin: 0 0 0.75rem;
  color: #5c6b76;
  font-size: 0.85rem;
}

.intake-question {
  margin: 0 0 1rem;
  color: #072136;
  font-size: 1.35rem;
  line-height: 1.35;
}

.intake-gate-label {
  display: block;
  margin: 0 0 0.4rem;
  color: #072136;
  font-weight: 600;
}

.intake-field input,
.intake-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(7, 33, 54, 0.2);
  background: #fff;
  color: #072136;
  font: inherit;
}

.intake-choices {
  display: grid;
  gap: 0.5rem;
}

.intake-choices label {
  display: flex;
  justify-content: flex-start;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(7, 33, 54, 0.16);
  background: #f7f5f0;
  color: #072136;
  text-align: left;
  cursor: pointer;
}

.intake-field .intake-choices input {
  width: auto;
  flex: 0 0 auto;
  margin: 0.2rem 0 0;
  padding: 0;
}

.intake-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(7, 33, 54, 0.2);
  background: #fff;
  color: #072136;
  font: inherit;
}

.intake-phone {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.intake-phone select {
  width: min(16rem, 100%);
  flex: 1 1 12rem;
}

.intake-field .intake-phone input {
  width: auto;
  flex: 2 1 12rem;
  min-width: 0;
}

.intake-error {
  min-height: 1.2rem;
  margin: 0.75rem 0 0;
  color: #8b1e1e;
}

.intake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.5rem;
}

.intake-actions [hidden] {
  display: none;
}

.brand-gate-services {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  line-height: 1.35;
}

.brand-gate-split .brand-gate-copy {
  gap: 0.52rem;
}

.brand-gate-split .brand-gate-kicker {
  font-size: 1.02rem;
  letter-spacing: 0.08em;
}

.brand-gate-split .brand-gate-name {
  font-size: clamp(1.77rem, 12.75cqi, 3.15rem);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.brand-gate-split .brand-gate-hint,
.brand-gate-split .brand-gate-services {
  font-size: 1.02rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.65);
}

.brand-gate-split .brand-gate-cta {
  font-size: 0.78rem;
  padding: 0.68rem 0.86rem;
}

.brand-gate-split .brand-gate-cta strong {
  font-size: 1.02rem;
}

.coming-soon-lead {
  max-width: 40rem;
}

.coming-soon-services {
  margin: 0.5rem 0 1.5rem;
  padding-left: 1.2rem;
}

.coming-soon-services li + li {
  margin-top: 0.35rem;
}
