/* ==========================================================================
   The Himalayan Pink Salt Co. — theme styles
   Loads AFTER bootstrap.css and overrides it.
   Media queries live in responsive.css.
   ========================================================================== */

:root {
  /* brand palette */
  --navy: #0B2545;
  --navy-700: #123258;
  --navy-500: #1D4571;
  --navy-300: #4E6B90;
  --salt: #E8836F;
  --salt-dark: #C9604B;
  --salt-tint: #FCEDE8;
  --salt-light: #F5A791;
  --sand: #FAF6F1;
  --sand-2: #F3ECE3;
  --line: #E4DDD4;
  --line-dark: #D5C9BA;
  --ink: #152238;
  --muted: #5C6B82;
  --white: #fff;
  --ok: #2E7D5B;
  --ok-tint: #E7F3ED;
  --warn: #8A6A1F;
  --warn-tint: #FBF3DE;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 4px 14px rgba(11, 37, 69, .06);
  --shadow-md: 0 10px 34px rgba(11, 37, 69, .10);

  /* bootstrap variable overrides */
  --bs-body-font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-font-size: 1.03rem;
  --bs-body-line-height: 1.68;
  --bs-body-color: #152238;
  --bs-body-bg: #fff;
  --bs-primary: #E8836F;
  --bs-primary-rgb: 232, 131, 111;
  --bs-link-color: #C9604B;
  --bs-link-hover-color: #0B2545;
  --bs-border-color: #E4DDD4;
  --bs-border-radius: 10px;
  --bs-emphasis-color: #0B2545;
}

/* ---------- base ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px
}

body {
  background: var(--white);
  color: var(--ink);
  -webkit-font-smoothing: antialiased
}

img {
  max-width: 100%;
  height: auto
}

h1,
h2,
h3,
h4,
h5 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--navy);
  text-wrap: balance
}

h1 {
  font-size: clamp(2rem, 4.3vw, 3.2rem);
  margin-bottom: .5em
}

h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-top: 0;
  margin-bottom: .5em
}

h3 {
  font-size: 1.2rem;
  font-family: Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: .5em
}

h4 {
  font-size: 1.02rem;
  font-family: Inter, sans-serif;
  font-weight: 700
}

p {
  margin-bottom: 1.05rem
}

a {
  text-decoration: none
}

a:hover {
  text-decoration: none
}

.section {
  padding: 80px 0
}

.section-sm {
  padding: 52px 0
}

.section-sand {
  background: var(--sand)
}

.section-navy {
  background: var(--navy);
  color: #DCE7F3
}

.section-navy h1,
.section-navy h2,
.section-navy h3,
.section-navy h4 {
  color: #fff
}

.section-navy a {
  color: var(--salt-light)
}

.section-navy .lead {
  color: #B4C6DA
}

.section-navy .card {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  color: #DCE7F3
}

.section-navy .card h3,
.section-navy .card h4 {
  color: #fff
}

.section-navy .card p {
  color: #B4C6DA
}

.section-navy .card-link {
  color: var(--salt-light)
}

.section-navy .card:hover {
  border-color: rgba(255, 255, 255, .3)
}

.narrow {
  max-width: 820px
}

.center {
  text-align: center
}

.center .lead {
  margin-left: auto;
  margin-right: auto
}

.center .eyebrow::before {
  display: none
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--salt-dark);
  margin-bottom: 13px
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--salt);
  display: block
}

.section-navy .eyebrow {
  color: var(--salt-light)
}

.text-center .eyebrow::before {
  display: none
}

.lead {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 66ch;
  font-weight: 400
}

.text-center .lead {
  margin-left: auto;
  margin-right: auto
}

.note {
  font-size: .8rem;
  color: var(--muted)
}

.section-navy .note {
  color: #8FA8C4
}

/* ---------- buttons ---------- */
.btn {
  border-radius: 9px;
  font-weight: 600;
  font-size: .95rem;
  padding: 13px 25px;
  border-width: 1.5px;
  transition: .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap
}

.btn-sm {
  padding: 10px 17px;
  font-size: .86rem
}

.btn-primary {
  --bs-btn-bg: var(--salt);
  --bs-btn-border-color: var(--salt);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--salt-dark);
  --bs-btn-hover-border-color: var(--salt-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--salt-dark);
  --bs-btn-active-border-color: var(--salt-dark);
  box-shadow: 0 6px 18px rgba(232, 131, 111, .30)
}

.btn-primary:hover {
  transform: translateY(-1px)
}

.btn-outline-dark {
  --bs-btn-color: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy);
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-hover-color: #fff;
  background: #fff
}

.btn-outline-light {
  --bs-btn-color: #fff;
  --bs-btn-border-color: rgba(255, 255, 255, .42);
  --bs-btn-hover-bg: rgba(255, 255, 255, .14);
  --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
  --bs-btn-hover-color: #fff
}

.btn-dark {
  --bs-btn-bg: var(--navy);
  --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy-500);
  --bs-btn-hover-border-color: var(--navy-500)
}

.btn-row {
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  margin: 26px 0
}

/* ---------- topbar ---------- */
.topbar {
  background: var(--navy);
  color: #B7CBE0;
  font-size: .82rem;
  padding: 9px 0
}

.topbar a {
  color: #B7CBE0
}

.topbar a:hover {
  color: #fff
}

.topbar .tb-badge {
  color: var(--salt-light);
  font-weight: 600
}

.topbar .tb-right {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap
}

/* ---------- navbar ---------- */
.navbar.site-nav {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 1030
}

.navbar.site-nav .container {
  min-height: 74px
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0
}

.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: 0 0 auto;
  background: linear-gradient(140deg, var(--navy), var(--navy-500));
  display: grid;
  place-items: center
}

.logo-txt {
  line-height: 1.15
}

.logo-txt b {
  display: block;
  font-family: Fraunces, serif;
  font-size: 1.06rem;
  letter-spacing: -.02em;
  color: var(--navy)
}

.logo-txt span {
  font-size: .63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600
}

.site-nav .nav-link {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
  padding: 9px 12px;
  border-radius: 7px
}

.site-nav .nav-link:hover,
.site-nav .nav-item.show>.nav-link {
  background: var(--sand);
  color: var(--navy)
}

.site-nav .nav-link.active {
  color: var(--salt-dark);
  font-weight: 600
}

.site-nav .dropdown-menu {
  min-width: 270px;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 8px;
  margin-top: 6px
}

.site-nav .dropdown-item {
  border-radius: 8px;
  padding: 9px 12px;
  font-size: .9rem;
  color: var(--ink);
  white-space: normal;
  line-height: 1.35
}

.site-nav .dropdown-item small {
  display: block;
  font-size: .76rem;
  color: var(--muted);
  margin-top: 1px
}

.site-nav .dropdown-item:hover,
.site-nav .dropdown-item:focus {
  background: var(--sand);
  color: var(--navy)
}

.navbar-toggler {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px
}

.navbar-toggler:focus {
  box-shadow: none
}

.nav-cta {
  display: flex;
  gap: 10px;
  align-items: center;
  flex: 0 0 auto
}

/* ---------- breadcrumb ---------- */
.crumbs {
  background: var(--sand);
  border-bottom: 1px solid var(--line);
  padding: 11px 0
}

.crumbs .breadcrumb {
  margin: 0;
  font-size: .83rem
}

.crumbs .breadcrumb-item a {
  color: var(--muted)
}

.crumbs .breadcrumb-item a:hover {
  color: var(--salt-dark);
  text-decoration: underline
}

.crumbs .breadcrumb-item.active {
  color: var(--ink)
}

.crumbs .breadcrumb-item+.breadcrumb-item::before {
  color: var(--line-dark)
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, #0B2545 0%, #123258 55%, #1B3E68 100%)
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 380px at 82% 18%, rgba(232, 131, 111, .28), transparent 65%),
    radial-gradient(520px 320px at 6% 92%, rgba(232, 131, 111, .13), transparent 60%)
}

.hero>.container {
  position: relative;
  z-index: 2;
  padding-top: 74px;
  padding-bottom: 74px
}

.hero h1 {
  color: #fff
}

.hero h1 em {
  font-style: normal;
  color: var(--salt-light)
}

.hero .lead {
  color: #C2D3E6;
  font-size: 1.1rem
}

.hero-page>.container {
  padding-top: 58px;
  padding-bottom: 58px
}

.hero-points {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: .88rem;
  color: #B4C6DA
}

.hero-points>div {
  display: flex;
  align-items: center;
  gap: 8px
}

.tick {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(232, 131, 111, .22);
  display: grid;
  place-items: center;
  flex: 0 0 auto
}

.tick svg {
  width: 10px;
  height: 10px;
  stroke: var(--salt-light);
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round
}

.hero-card {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(6px)
}

.hero-stats b {
  display: block;
  font-family: Fraunces, serif;
  font-size: 1.5rem;
  color: #fff;
  line-height: 1.1
}

.hero-stats small {
  font-size: .71rem;
  color: #B4C6DA
}

.anchor-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 20px
}

.anchor-list a {
  font-size: .83rem;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #D6E2EF;
  padding: 8px 14px;
  border-radius: 8px
}

.anchor-list a:hover {
  background: rgba(255, 255, 255, .13);
  color: #fff
}

.meta-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .84rem;
  color: #B4C6DA;
  margin-top: 16px
}

/* ---------- image placeholders (replace with real <img> in assets/images/) ---------- */
.ph {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 12px
}

.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, .5), transparent),
    radial-gradient(2px 2px at 70% 60%, rgba(255, 255, 255, .42), transparent),
    radial-gradient(3px 3px at 45% 80%, rgba(255, 255, 255, .32), transparent),
    radial-gradient(2px 2px at 85% 25%, rgba(255, 255, 255, .38), transparent)
}

.ph span {
  position: relative;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, .94);
  background: rgba(11, 37, 69, .34);
  padding: 6px 13px;
  border-radius: 99px;
  text-align: center
}

.ph-1 {
  background: radial-gradient(120px 90px at 30% 28%, rgba(255, 255, 255, .34), transparent 60%), linear-gradient(150deg, #F6C3B3, #E8836F 45%, #C9604B)
}

.ph-2 {
  background: linear-gradient(140deg, #FBE3D2, #E9A07F)
}

.ph-3 {
  background: linear-gradient(140deg, #E6D9CB, #C29B7E)
}

.ph-4 {
  background: linear-gradient(140deg, #DCE7F2, #8FA9C4)
}

.ph-5 {
  background: linear-gradient(140deg, #F3E2DC, #D08F87)
}

.ph-6 {
  background: linear-gradient(140deg, #E3E9E4, #93A99B)
}

.ph-7 {
  background: linear-gradient(140deg, #EFE0D2, #B98A6A)
}

.ph-8 {
  background: linear-gradient(140deg, #D9E2EC, #7E93AC)
}

.ph-h180 {
  height: 180px
}

.ph-h220 {
  height: 220px
}

.ph-h300 {
  height: 300px
}

.ph-h380 {
  height: 380px
}

/* ---------- certifications strip ---------- */
.trust {
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 20px 0
}

.trust-label {
  font-size: .71rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700
}

.cert-row {
  display: flex;
  gap: 9px;
  flex-wrap: wrap
}

.cert {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 14px;
  font-size: .79rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff
}

.cert i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--salt);
  display: block
}

/* ---------- cards & panels ---------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: .2s ease;
  color: inherit
}

a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-dark);
  color: inherit
}

.card-img {
  height: 158px;
  position: relative;
  display: grid;
  place-items: center
}

.card-img .badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .93);
  color: var(--navy);
  padding: 5px 10px;
  border-radius: 99px
}

.card-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1
}

.card-body p {
  font-size: .92rem;
  color: var(--muted);
  margin-bottom: 14px
}

.card-link {
  font-size: .86rem;
  font-weight: 600;
  color: var(--salt-dark);
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none
}

.tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto
}

.tag {
  font-size: .72rem;
  background: var(--sand);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 500
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  height: 100%
}

.panel-sand,
.panel--sand {
  background: var(--sand);
  color: var(--ink)
}

.panel-sand h1,
.panel-sand h2,
.panel-sand h3,
.panel-sand h4,
.panel--sand h1,
.panel--sand h2,
.panel--sand h3,
.panel--sand h4 {
  color: var(--navy)
}

.panel-sand p,
.panel--sand p {
  color: var(--muted)
}

.panel-navy,
.panel--navy {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  color: #DCE7F3
}

.panel-navy h1,
.panel-navy h2,
.panel-navy h3,
.panel-navy h4,
.panel--navy h1,
.panel--navy h2,
.panel--navy h3,
.panel--navy h4 {
  color: #fff
}

.panel-navy p,
.panel--navy p {
  color: #B4C6DA
}

.panel-navy a,
.panel--navy a {
  color: var(--salt-light)
}

.pill {
  display: inline-block;
  background: var(--salt-tint);
  color: var(--salt-dark);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 99px;
  margin-bottom: 12px
}

.pill-ok {
  background: var(--ok-tint);
  color: var(--ok)
}

/* ---------- feature blocks ---------- */
.feat {
  display: flex;
  gap: 16px;
  align-items: flex-start
}

.feat-ic {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--salt-tint);
  display: grid;
  place-items: center;
  flex: 0 0 auto
}

.feat-ic svg {
  width: 21px;
  height: 21px;
  stroke: var(--salt-dark);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

.section-navy .feat-ic {
  background: rgba(232, 131, 111, .18)
}

.section-navy .feat-ic svg {
  stroke: var(--salt-light)
}

.feat h3 {
  margin-bottom: 5px;
  font-size: 1.05rem
}

.feat p {
  font-size: .92rem;
  color: var(--muted);
  margin: 0
}

.section-navy .feat p {
  color: #B4C6DA
}

/* ---------- framed images & stats ---------- */
.frame {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-md)
}

.frame-cap {
  padding: 15px 20px;
  font-size: .82rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px
}

.statbox {
  border-left: 3px solid var(--salt);
  padding-left: 16px
}

.statbox b {
  display: block;
  font-family: Fraunces, serif;
  font-size: 1.8rem;
  color: var(--navy);
  line-height: 1.1
}

.statbox small {
  font-size: .83rem;
  color: var(--muted)
}

.section-navy .statbox b {
  color: #fff
}

.section-navy .statbox small {
  color: #B4C6DA
}

/* ---------- numbered steps ---------- */
.steps {
  counter-reset: s
}

.step {
  position: relative;
  padding-top: 26px
}

.step::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  font-family: Fraunces, serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--salt);
  position: absolute;
  top: 0;
  left: 0
}

.step h3 {
  font-size: 1.02rem;
  margin-bottom: 6px
}

.step p {
  font-size: .9rem;
  color: var(--muted);
  margin: 0
}

.section-navy .step p {
  color: #B4C6DA
}

/* ---------- tables ---------- */
.table-responsive {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff
}

table.table {
  margin: 0;
  font-size: .91rem;
  --bs-table-bg: transparent
}

table.table>thead th {
  background: var(--sand);
  color: var(--navy);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  vertical-align: bottom
}

table.table>tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--sand-2);
  vertical-align: top
}

table.table>tbody tr:last-child td {
  border-bottom: none
}

table.table>tbody td strong {
  color: var(--navy)
}

table.table>tbody tr:hover>* {
  --bs-table-accent-bg: var(--sand);
  background: var(--sand)
}

.section-navy .table-responsive {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16)
}

.section-navy table.table {
  color: #C2D3E6
}

.section-navy table.table>thead th {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .16)
}

.section-navy table.table>tbody td {
  border-bottom-color: rgba(255, 255, 255, .1);
  color: #C2D3E6
}

.section-navy table.table>tbody td strong {
  color: #fff
}

.section-navy table.table>tbody tr:hover>* {
  background: rgba(255, 255, 255, .04)
}

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0
}

.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: .93rem
}

.spec-list li:last-child {
  border-bottom: none
}

.spec-list b {
  color: var(--navy);
  text-align: right
}

.section-navy .spec-list li {
  border-bottom-color: rgba(255, 255, 255, .12)
}

.section-navy .spec-list b {
  color: #fff
}

/* ---------- article prose ---------- */
.prose {
  font-size: 1.03rem
}

.prose h2 {
  margin-top: 2em;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem)
}

.prose h3 {
  margin-top: 1.7em;
  font-size: 1.15rem
}

.prose ul,
.prose ol {
  margin-bottom: 1.1em;
  padding-left: 1.3em
}

.prose li {
  margin-bottom: .5em
}

.prose li::marker {
  color: var(--salt)
}

.prose blockquote {
  margin: 1.6em 0;
  padding: 18px 24px;
  background: var(--sand);
  border-left: 3px solid var(--salt);
  border-radius: 0 10px 10px 0;
  font-size: 1rem;
  color: var(--ink)
}

.prose blockquote p:last-child {
  margin-bottom: 0
}

.prose .table-responsive {
  margin: 1.6em 0
}

.prose .ph {
  margin: 1.6em 0
}

.prose a {
  color: var(--salt-dark);
  text-decoration: underline;
  text-underline-offset: 2px
}

.prose strong {
  color: var(--navy)
}

.toc {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 26px;
  margin-bottom: 2em
}

.toc b {
  display: block;
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px
}

.toc ol {
  margin: 0;
  padding-left: 1.2em;
  font-size: .94rem
}

.toc a {
  color: var(--navy);
  text-decoration: none
}

.toc a:hover {
  color: var(--salt-dark);
  text-decoration: underline
}

/* ---------- callouts (bootstrap alerts, restyled) ---------- */
.alert.callout {
  border-radius: 12px;
  padding: 20px 24px;
  margin: 1.6em 0;
  font-size: .96rem;
  border-width: 1px
}

.alert.callout p:last-child {
  margin-bottom: 0
}

.alert.callout b {
  display: block;
  margin-bottom: 5px
}

.callout-tip {
  background: var(--ok-tint);
  border-color: #BFDFCF;
  color: #1E4636
}

.callout-tip b {
  color: var(--ok)
}

.callout-note {
  background: var(--salt-tint);
  border-color: #F3D3C9;
  color: #7A3D2E
}

.callout-note b {
  color: var(--salt-dark)
}

.callout-warn {
  background: var(--warn-tint);
  border-color: #EBDCAE;
  color: #5F4A14
}

.callout-warn b {
  color: var(--warn)
}

.placeholder-note {
  background: var(--warn-tint);
  border: 1px dashed #D8C081;
  color: #5F4A14;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: .86rem;
  margin-bottom: 26px
}

.placeholder-note b {
  color: #7A5F19
}

/* ---------- quotes / reviews ---------- */
.quote {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  height: 100%
}

.stars {
  color: var(--salt);
  letter-spacing: 2px;
  font-size: .9rem
}

.quote p {
  font-size: .97rem;
  margin: 0;
  color: var(--ink)
}

.who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #F6C3B3, #C9604B);
  color: #fff;
  font-weight: 700;
  font-size: .85rem
}

.who b {
  display: block;
  font-size: .89rem;
  color: var(--navy)
}

.who small {
  color: var(--muted);
  font-size: .79rem
}

/* ---------- accordion (FAQ) ---------- */
.accordion {
  --bs-accordion-border-color: var(--line);
  --bs-accordion-border-radius: 11px;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(232, 131, 111, .25);
  --bs-accordion-active-bg: #fff;
  --bs-accordion-active-color: var(--navy);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C9604B'%3e%3cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C9604B'%3e%3cpath fill-rule='evenodd' d='M2.5 8a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3e%3c/svg%3e")
}

.accordion-item {
  margin-bottom: 11px;
  border-radius: 11px !important;
  overflow: hidden;
  border: 1px solid var(--line)
}

.accordion-button {
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy);
  padding: 18px 22px;
  background: #fff
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
  border-bottom: 1px solid var(--line)
}

.accordion-button:focus {
  border-color: var(--line)
}

.accordion-button::after {
  transform: none
}

.accordion-button:not(.collapsed)::after {
  transform: none
}

.accordion-body {
  padding: 17px 22px 20px;
  color: var(--muted);
  font-size: .94rem
}

.accordion-body p:last-child {
  margin-bottom: 0
}

.accordion-body ul {
  margin-bottom: .8em;
  padding-left: 1.2em
}

/* ---------- CTA band ---------- */
.band {
  background: linear-gradient(135deg, var(--salt), #C9604B);
  color: #fff;
  border-radius: 20px;
  padding: 44px
}

.band h2 {
  color: #fff;
  margin-bottom: 6px
}

.band p {
  color: rgba(255, 255, 255, .92);
  margin: 0;
  max-width: 54ch
}

.band .btn-primary {
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #fff;
  --bs-btn-color: var(--navy);
  --bs-btn-hover-bg: var(--navy);
  --bs-btn-hover-border-color: var(--navy);
  --bs-btn-hover-color: #fff;
  box-shadow: none
}

/* ---------- forms ---------- */
.enq {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--shadow-sm)
}

.form-label {
  font-size: .81rem;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 6px;
  color: var(--ink);
  display: block
}

.row .form-label {
  margin-top: 0
}

.form-control,
.form-select {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: .93rem;
  background: var(--sand);
  color: var(--ink);
  width: 100%
}

fieldset .form-select {
  margin-bottom: 14px
}

.form-control:focus,
.form-select:focus {
  background: #fff;
  border-color: var(--salt);
  box-shadow: 0 0 0 .2rem rgba(232, 131, 111, .2)
}

textarea.form-control {
  min-height: 114px;
  margin-bottom: 18px
}

.enq .btn,
.enq button[type=submit] {
  margin-top: 6px
}

.form-note {
  font-size: .78rem;
  color: var(--muted);
  margin: 14px 0 0
}

.info-item {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line)
}

.info-item:last-child {
  border-bottom: none
}

.info-item b {
  display: block;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 3px
}

.info-item span {
  font-size: .97rem;
  color: var(--ink)
}

/* ---------- related links ---------- */
.related-link {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  transition: .18s;
  height: 100%
}

.related-link:hover {
  border-color: var(--line-dark);
  box-shadow: var(--shadow-sm)
}

.related-link b {
  display: block;
  color: var(--navy);
  font-size: .97rem;
  margin-bottom: 3px
}

.related-link small {
  color: var(--muted);
  font-size: .83rem
}

/* ---------- footer ---------- */
footer.site-footer {
  background: var(--navy);
  color: #A2B8D0;
  padding: 62px 0 0;
  font-size: .91rem
}

footer.site-footer h4 {
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: .76rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 14px
}

footer.site-footer a {
  color: #A2B8D0;
  display: block;
  padding: 5px 0
}

footer.site-footer a:hover {
  color: var(--salt-light)
}

footer.site-footer .foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 22px 0;
  margin-top: 20px;
  font-size: .82rem
}

footer.site-footer .foot-bottom a {
  display: inline;
  padding: 0
}

footer.site-footer a.btn {
  display: inline-flex;
  color: #fff
}

.foot-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px
}

.foot-logo .logo-txt b {
  color: #fff
}

.foot-logo .logo-txt span {
  color: #7B93AF
}

/* ---------- floating WhatsApp ---------- */
.wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1040;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22)
}

.wa svg {
  width: 28px;
  height: 28px;
  fill: #fff
}

/* ---------- figures (diagrams & illustrations) ---------- */
.site-figure {
  margin: 2.2rem 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm)
}

.site-figure img {
  display: block;
  width: 100%;
  height: auto
}

.site-figure figcaption {
  padding: 14px 20px;
  font-size: .86rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  background: var(--sand)
}

.section-navy .site-figure {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16)
}

.section-navy .site-figure figcaption {
  background: rgba(255, 255, 255, .04);
  color: #B4C6DA;
  border-top-color: rgba(255, 255, 255, .12)
}

.prose .site-figure {
  margin: 2.4rem 0
}

.frame img {
  display: block;
  width: 100%;
  height: auto
}

/* card image wells — keep the artwork inside its fixed-height frame */
.card-img {
  overflow: hidden;
  background: var(--sand-2)
}

.card-img>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}