/* =============================================================
   R&F LEGAL MAURITIUS — main stylesheet
   Brand tokens, layout primitives and component styles for every page.
   Tailwind utility classes still come from the CDN script in head.php.
============================================================= */

:root {
  --navy:        #0F2747;
  --navy-deep:   #0A1C34;
  --navy-soft:   #16335A;
  --gold:        #C7A15A;
  --gold-light:  #D9BE86;
  --gold-deep:   #A6843E;
  --ivory:       #FAFAF8;
  --mist:        #F3F4F6;
  --charcoal:    #2C2C2C;
  --ink-2:       #5B6573;
  --hair-gold:   rgba(199, 161, 90, .32);
  --hair-light:  rgba(255, 255, 255, .14);
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--charcoal);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display { font-feature-settings: "lnum", "ss01"; }

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

/* -------------------------------------------------------------
   Justified body prose
   Applied to wide-measure paragraphs only. Hyphenation is enabled
   so the browser can break long words rather than opening rivers
   of whitespace between them. Falls back to left-alignment on
   narrow viewports, where the measure is too short to justify well.
------------------------------------------------------------- */
.prose-justify {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
@media (max-width: 640px) {
  .prose-justify {
    text-align: left;
    -webkit-hyphens: manual;
            hyphens: manual;
  }
}

/* -------------------------------------------------------------
   Practice Areas dropdown (desktop nav)
   Opens on hover and on keyboard focus. The panel carries its own
   transparent top padding so the pointer can travel from the nav
   link into the panel without crossing a dead gap.
------------------------------------------------------------- */
.nav-dd { position: relative; }

.nav-dd-panel {
  position: absolute;
  top: 100%;
  left: -22px;
  padding-top: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index: 60;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dd-inner {
  background: #0B1E38;
  border: 1px solid rgba(199, 161, 90, 0.3);
  padding: 20px 22px;
  /* Multi-column rather than grid: items flow DOWN the first column, then
     the second, so the list reads top-to-bottom in array order. A grid
     fills row by row, which scatters related items across columns. */
  display: block;
  columns: 2;
  column-gap: 24px;
  width: 490px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.32);
}
.nav-dd-inner > a { break-inside: avoid; }

.nav-dd-inner a {
  display: block;
  padding: 9px 12px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  border-left: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.nav-dd-inner a:hover {
  color: #fff;
  border-left-color: var(--gold);
  background: rgba(255, 255, 255, 0.045);
}
.nav-dd-inner a.is-current {
  color: var(--gold);
  border-left-color: var(--gold);
}

.nav-dd-foot {
  column-span: all;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-dd-foot a {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding-left: 12px;
  border-left: 0;
}
.nav-dd-foot a:hover {
  color: #fff;
  background: transparent;
  border-left: 0;
}

.nav-caret {
  display: inline-block;
  margin-left: 6px;
  transition: transform .22s ease;
}
.nav-dd:hover .nav-caret,
.nav-dd:focus-within .nav-caret { transform: rotate(180deg); }

/* Mobile accordion for the same list */
.m-dd > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-dd > summary::-webkit-details-marker { display: none; }
.m-dd > summary .m-caret { transition: transform .22s ease; }
.m-dd[open] > summary .m-caret { transform: rotate(180deg); }
.m-dd-list {
  margin: 12px 0 4px 0;
  padding-left: 14px;
  border-left: 1px solid rgba(199, 161, 90, 0.35);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.m-dd-list a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}
.m-dd-list a:hover { color: var(--gold); }
.m-dd-list a.is-current { color: var(--gold); }

/* -------------------------------------------------------------
   WhatsApp button
   Uses WhatsApp's own green so the channel is instantly
   recognisable. The icon carries most of the recognition, so the
   fill can be swapped for a brand colour without losing clarity.
------------------------------------------------------------- */
.btn-whatsapp {
  background: #25D366;
  border: 1px solid #25D366;
  color: #06331A;
}
.btn-whatsapp:hover {
  background: #1DA851;
  border-color: #1DA851;
  color: #fff;
}
.btn-whatsapp .wa-icon {
  flex-shrink: 0;
  margin-left: 9px;
}

/* -------------------------------------------------------------
   Corner-frame motif
------------------------------------------------------------- */
.corner-frame { position: relative; }
.corner-frame::before,
.corner-frame::after,
.corner-frame > .cf-tr,
.corner-frame > .cf-bl {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold);
  pointer-events: none;
}
.corner-frame::before { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.corner-frame::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.corner-frame > .cf-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.corner-frame > .cf-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }

/* -------------------------------------------------------------
   Brand logo (used in header and footer)
------------------------------------------------------------- */
.brand-logo {
  display: block;
  height: 57px;
  width: 220px;
}

/* -------------------------------------------------------------
   Sticky header
------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 28, 52, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .35s ease, background-color .35s ease;
  border-bottom: 1px solid rgba(199, 161, 90, .16);
}
.site-header.is-stuck {
  background: rgba(10, 28, 52, 0.96);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}

.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

/* -------------------------------------------------------------
   HOMEPAGE HERO (72vh)
------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
  min-height: 72vh;
  display: flex;
  flex-direction: column;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.06);
  animation: kenburns 22s ease-out infinite alternate;
  will-change: transform;
}
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 28, 52, .72) 0%, rgba(10, 28, 52, .78) 38%, rgba(15, 39, 71, .92) 100%),
    radial-gradient(900px 600px at 85% 10%, rgba(199, 161, 90, .18), transparent 60%);
}
.hero-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, .02) 0,
    rgba(255, 255, 255, .02) 1px,
    transparent 1px,
    transparent 7px
  );
  pointer-events: none;
}

/* -------------------------------------------------------------
   SUB-PAGE HERO (32vh — half the height of the homepage hero)
------------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--navy-deep);
  color: #fff;
  overflow: hidden;
  min-height: 32vh;
  display: flex;
  flex-direction: column;
}
.page-hero-bg {
  position: absolute; inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.04);
  animation: kenburns 22s ease-out infinite alternate;
  will-change: transform;
}
.page-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10, 28, 52, .78) 0%, rgba(10, 28, 52, .82) 38%, rgba(15, 39, 71, .94) 100%),
    radial-gradient(900px 600px at 85% 10%, rgba(199, 161, 90, .18), transparent 60%);
}
.page-hero-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, .02) 0,
    rgba(255, 255, 255, .02) 1px,
    transparent 1px,
    transparent 7px
  );
  pointer-events: none;
}

@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1%, -2%, 0); }
}

/* -------------------------------------------------------------
   Watermark "RF" monogram (decorative)
------------------------------------------------------------- */
.watermark {
  position: absolute;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  color: #fff;
  opacity: 0.06;
  line-height: 0.85;
  letter-spacing: -0.04em;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

/* Vertical edge label (used on homepage hero) */
.vlabel {
  position: absolute;
  top: 50%; right: 28px;
  transform: translateY(-50%) rotate(90deg);
  transform-origin: right center;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  z-index: 3;
}
.vlabel::before {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--gold);
}

/* -------------------------------------------------------------
   Buttons
------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary       { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--gold); color: #fff; }

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

.btn-on-dark       { background: var(--gold); color: var(--navy-deep); }
.btn-on-dark:hover { background: #fff; color: var(--navy); }

.btn-ghost-light       { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost-light:hover { background: #fff; color: var(--navy); border-color: #fff; }

.btn .arrow         { transition: transform .2s ease; }
.btn:hover .arrow   { transform: translateX(4px); }

/* -------------------------------------------------------------
   Decorative rules
------------------------------------------------------------- */
.gold-rule {
  display: inline-block;
  width: 48px;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
}
.gold-rule-block {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--gold);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: "";
  height: 1px;
  width: 28px;
  background: var(--gold);
  display: inline-block;
}

/* Breadcrumb (sub-pages) */
.breadcrumb {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.breadcrumb a {
  color: rgba(255, 255, 255, .7);
  transition: color .2s ease;
}
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb .sep    { color: rgba(255, 255, 255, .3); margin: 0 12px; }
.breadcrumb .here   { color: var(--gold); }

/* -------------------------------------------------------------
   HOMEPAGE practice-area cards (3x3 grid)
------------------------------------------------------------- */
.practice-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .4s ease;
}
.practice-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1), filter .6s ease;
  filter: saturate(.95);
  z-index: 0;
}
.practice-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 28, 52, .10) 0%, rgba(10, 28, 52, .55) 55%, rgba(10, 28, 52, .92) 100%);
  transition: background .4s ease;
  z-index: 1;
}
.practice-card > * { position: relative; z-index: 2; }
.practice-card:hover::before { transform: scale(1.10); filter: saturate(1.05); }
.practice-card:hover::after  { background: linear-gradient(180deg, rgba(10, 28, 52, .05) 0%, rgba(10, 28, 52, .45) 50%, rgba(15, 39, 71, .85) 100%); }

.practice-card .pcf {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--gold);
  opacity: 0;
  transition: opacity .35s ease, width .35s ease, height .35s ease;
  z-index: 3;
}
.practice-card .pcf-tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; }
.practice-card .pcf-br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; }
.practice-card:hover .pcf { opacity: 1; width: 28px; height: 28px; }

.practice-card .desc { transform: translateY(8px); transition: transform .45s ease; }
.practice-card:hover .desc { transform: translateY(0); }

.practice-card .arrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, gap .25s ease;
}
.practice-card:hover .arrow-pill {
  background: var(--gold);
  color: var(--navy-deep);
  gap: 14px;
}

/* Arrow pill for light backgrounds (ivory / white cards). The base pill
   is only styled inside the dark image cards above, so it needs its own
   rule anywhere else. Pair with a hover-parent: .group or .route-card. */
.arrow-pill.on-light {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid var(--gold);
  color: var(--gold-deep, #9A7B3F);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, gap .25s ease;
}
.group:hover .arrow-pill.on-light,
.route-card:hover .arrow-pill.on-light {
  background: var(--gold);
  color: var(--navy);
  gap: 14px;
}

/* -------------------------------------------------------------
   SUB-PAGE service cards (smaller — used inside a carousel)
   320px × 16/10 ≈ 200px tall, ~half the previous portrait height.
------------------------------------------------------------- */
.service-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform .4s ease;
  width: 320px;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.service-card::before {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--card-img);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  transition: transform 1.1s cubic-bezier(.22, .61, .36, 1), filter .6s ease;
  filter: saturate(.92);
  z-index: 0;
}
.service-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 28, 52, .10) 0%, rgba(10, 28, 52, .55) 55%, rgba(10, 28, 52, .92) 100%);
  transition: background .4s ease;
  z-index: 1;
}
.service-card > * { position: relative; z-index: 2; }
.service-card:hover::before { transform: scale(1.10); filter: saturate(1.05); }
.service-card:hover::after  { background: linear-gradient(180deg, rgba(10, 28, 52, .05) 0%, rgba(10, 28, 52, .45) 50%, rgba(15, 39, 71, .85) 100%); }

.service-card .scf {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gold);
  opacity: 0;
  transition: opacity .35s ease, width .35s ease, height .35s ease;
  z-index: 3;
}
.service-card .scf-tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.service-card .scf-br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.service-card:hover .scf { opacity: 1; width: 22px; height: 22px; }

.service-card .desc { transform: translateY(6px); transition: transform .45s ease; }
.service-card:hover .desc { transform: translateY(0); }

.service-card .arrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, gap .25s ease;
}
.service-card:hover .arrow-pill {
  background: var(--gold);
  color: var(--navy-deep);
  gap: 12px;
}

/* -------------------------------------------------------------
   Horizontal carousel for service cards
------------------------------------------------------------- */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 0 24px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.carousel-fade {
  position: absolute;
  top: 0;
  bottom: 24px;
  width: 56px;
  pointer-events: none;
  z-index: 3;
  transition: opacity .25s ease;
}
.carousel-fade.left  { left: 0;  background: linear-gradient(90deg,  var(--ivory) 0%, transparent 100%); }
.carousel-fade.right { right: 0; background: linear-gradient(-90deg, var(--ivory) 0%, transparent 100%); }
.carousel.at-start .carousel-fade.left  { opacity: 0; }
.carousel.at-end   .carousel-fade.right { opacity: 0; }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  border: 1px solid var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  margin-top: -12px;
  transition: background-color .25s ease, color .25s ease, transform .25s ease, opacity .25s ease;
  cursor: pointer;
}
.carousel-btn:hover           { background: var(--gold); color: var(--navy-deep); }
.carousel-btn.prev            { left: -22px; }
.carousel-btn.next            { right: -22px; }
.carousel.at-start .carousel-btn.prev,
.carousel.at-end   .carousel-btn.next,
.carousel-btn:disabled        { opacity: 0; pointer-events: none; }

@media (max-width: 768px) {
  .carousel-btn { display: none; }
  .service-card { width: 280px; }
}

/* -------------------------------------------------------------
   Persona cards (Who We Help / Who We Serve)
------------------------------------------------------------- */
.persona {
  background: var(--ivory);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background-color .3s ease;
}
.persona:hover { background: #fff; }
.persona .ico  { color: var(--gold); }
.persona h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.2;
}
.persona p {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* Brand personality strip (on homepage hero) */
.pers-item + .pers-item { border-left: 1px solid var(--hair-gold); }

/* -------------------------------------------------------------
   Accordion (native <details>)
------------------------------------------------------------- */
.acc {
  background: #fff;
  border: 1px solid rgba(15, 39, 71, .08);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.acc + .acc { margin-top: 12px; }
.acc[open]  { border-color: rgba(199, 161, 90, .35); box-shadow: 0 8px 28px rgba(15, 39, 71, .06); }
.acc > summary {
  cursor: pointer;
  list-style: none;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: background-color .25s ease;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { background: rgba(199, 161, 90, .04); }

.acc .acc-num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
  min-width: 38px;
}
.acc .acc-title {
  flex: 1;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.005em;
}
.acc .acc-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 0;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), background-color .25s ease, color .25s ease;
  flex-shrink: 0;
}
.acc[open] .acc-toggle {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--navy-deep);
}
.acc .acc-body {
  padding: 0 28px 28px 28px;
  border-top: 1px solid rgba(15, 39, 71, .05);
}
.acc .acc-body > p:first-of-type {
  padding-top: 22px;
  color: var(--charcoal);
  font-size: 15.5px;
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
@media (max-width: 640px) {
  .acc .acc-body > p:first-of-type {
    text-align: left;
    -webkit-hyphens: manual;
            hyphens: manual;
  }
}
.acc .acc-section { margin-top: 22px; }
.acc .acc-section-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.acc .acc-section-label::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--gold);
}
.acc ul.acc-list,
.acc ol.acc-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.acc ul.acc-list li,
.acc ol.acc-list li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--charcoal);
}
.acc ul.acc-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.85em;
  width: 10px; height: 1px;
  background: var(--gold);
}
.acc ol.acc-list      { counter-reset: step; }
.acc ol.acc-list li   { counter-increment: step; padding-left: 32px; }
.acc ol.acc-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--gold-deep);
}

/* -------------------------------------------------------------
   Pull-quote (used in Approach sections)
------------------------------------------------------------- */
.pull-quote {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}
.pull-quote::before {
  content: "“";
  font-family: 'Playfair Display', serif;
  font-size: 4em;
  line-height: 0.1;
  color: var(--gold);
  vertical-align: -0.35em;
  margin-right: .15em;
  font-style: normal;
}

/* -------------------------------------------------------------
   Framed image with ribbon caption
------------------------------------------------------------- */
.frame-img            { position: relative; isolation: isolate; }
.frame-img img        { display: block; width: 100%; height: 100%; object-fit: cover; }
.frame-img .ribbon {
  position: absolute;
  left: -12px;
  bottom: 24px;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border-left: 2px solid var(--gold);
}

/* -------------------------------------------------------------
   Administrative support cards (sub-pages)
------------------------------------------------------------- */
.support-card {
  background: #fff;
  border: 1px solid rgba(15, 39, 71, .08);
  padding: 28px;
  transition: border-color .25s ease, box-shadow .25s ease, transform .35s ease;
}
.support-card:hover {
  border-color: rgba(199, 161, 90, .4);
  box-shadow: 0 10px 30px rgba(15, 39, 71, .07);
  transform: translateY(-2px);
}
.support-card .num {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  color: var(--gold);
  font-size: 22px;
  line-height: 1;
}

/* -------------------------------------------------------------
   Reveal-on-scroll
------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------
   Scroll progress + scroll hint
------------------------------------------------------------- */
#scrollbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
#scrollbar > span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transition: width .1s linear;
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .55);
  font-size: 10.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 3;
}
.scroll-hint .line {
  width: 1px;
  height: 38px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: line-drop 2.2s ease-in-out infinite;
}

@keyframes line-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* -------------------------------------------------------------
   Focus states + reduced motion
------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal           { opacity: 1; transform: none; transition: none; }
  .btn              { transition: background-color .2s ease, color .2s ease; }
  .btn:hover        { transform: none; }
  html              { scroll-behavior: auto; }
  .hero-bg,
  .page-hero-bg     { animation: none; transform: none; }
  .scroll-hint .line { animation: none; }
  .carousel-track   { scroll-behavior: auto; }
}