/* ============================================================
   DMC custom.css  v4
   Base custom.css unified with v-1-dmc-custom-additions.css.
   Each addition now lives next to the rule it extends, so no
   selector is declared twice with different values.
   ============================================================ */

/* ============================================================
   DMC : base
   Reset and element defaults. Everything that used to hardcode
   a color now reads a scheme variable, so bare tags inherit the
   tone of the section they sit in.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--surface-dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input,
textarea,
select {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--heading);
}

h1 { font-size: var(--fs-4xl); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-2xl); }
h4 { font-size: var(--fs-xl); }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

p {
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.75;
  text-wrap: pretty;
}
/* ============================================================
   DMC : design system
   v-2-dmc-system.css

   Purpose
   -------
   Replaces the per section CSS of the current template with one
   shared vocabulary. Every section is built from the same skeleton
   and the same primitives, and all color decisions come from the
   scheme class on the section wrapper:

     .scheme-light        light surface
     .scheme-light-dark   mid light surface
     .scheme-dark         dark surface

   Rules of the system
   -------------------
   1. No component ever names a color. It reads a scheme variable.
   2. No component ever names a scheme. There are no
      ".scheme-dark .something" overrides anywhere below.
   3. Single class selectors only. No nesting, no !important, no
      element selectors outside the .prose block. This keeps
      specificity flat so nothing cancels anything else.
   4. Every value comes from a token. No loose pixels except
      hairlines.

   Load order: base, then this file, then the bespoke blocks
   (hero, navbar, footer, before and after, testimonials slider,
   faq accordion, gallery mosaic).
   ============================================================ */


/* ============================================================
   1. GLOBAL TOKENS
   Values carried over from the current template so the design
   does not shift during migration.
   ============================================================ */

:root {

  /* Palette */
  --clr-black: #0a0a09;
  --clr-dark: #111110;
  --clr-dark-mid: #1a1a18;
  --clr-mid: #2a2a27;
  --clr-muted: #5a5a55;
  --clr-silver: #b8b8b0;
  --clr-light: #e8e8e2;
  --clr-white: #f5f5f0;

  --clr-gold: oklch(68% 0.18 68);
  --clr-gold-dim: oklch(55% 0.15 68);
  --clr-gold-pale: oklch(82% 0.12 68);

  /* Surfaces used by the three schemes */
  --surface-light: #f4f2ee;
  --surface-light-dark: #e8e8e2;
  --surface-dark: var(--clr-black);

  /* Typography */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Verdana', system-ui, sans-serif;
  --fs-xsm: clamp(0.6rem, 0.8vw, 0.7rem);
  --fs-xs: clamp(0.7rem, 0.9vw, 0.8rem);
  --fs-sm: clamp(0.8rem, 1.1vw, 0.9rem);
  --fs-base: clamp(0.9rem, 1.3vw, 1rem);
  --fs-md: clamp(1rem, 1.5vw, 1.2rem);
  --fs-lg: clamp(1.2rem, 2vw, 1.5rem);
  --fs-xl: clamp(1.5rem, 2.8vw, 2rem);
  --fs-2xl: clamp(1.9rem, 3.5vw, 2.75rem);
  --fs-3xl: clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-4xl: clamp(2.75rem, 5.5vw, 5rem);

  --lh-tight: 1.1;
  --lh-body: 1.7;
  --measure: 68ch;

  /* Spacing */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 2rem;
  --sp-lg: 4rem;
  --sp-xl: 7rem;

  --section-py: clamp(5rem, 10vw, 10rem);
  --gap: clamp(1rem, 2vw, 1.75rem);
  --pad-card: clamp(1.25rem, 2.5vw, 1.75rem);

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --hairline: 1px;

  /* Motion */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.7s;
  --dur-xslow: 1.1s;

  /* Layers */
  --z-below: -1;
  --z-base: 0;
  --z-overlay: 10;
  --z-nav: 100;
  --z-modal: 200;

  /* Layout */
  --container-max: 1320px;
  --container-pad: clamp(1.05rem, 2vw, 1.05rem);
}


/* ============================================================
   2. SCHEME TOKENS
   The only place in the whole stylesheet where a color is chosen.
   Adding a fourth scheme later means adding one block here and
   nothing else.

   Contract every scheme must define:
     --surface         section background
     --raised          card and panel background
     --heading         titles
     --text            body copy
     --text-soft       secondary copy, captions, labels
     --accent          gold tone that reads correctly on the surface
     --border          hairline borders on cards and list rows
     --border-strong   hover state of the same
     --rule            bottom hairline of the section
     --shadow          resting shadow
     --shadow-lift     hover shadow
     --btn-solid-bg / --btn-solid-ink / --btn-ghost-ink /
     --btn-ghost-line  button colors
   ============================================================ */

/* Default contract, so a component still renders correctly if it
   is placed outside any scheme wrapper. */
:root {
  --surface: var(--surface-light);
  --raised: #ffffff;
  --heading: var(--clr-black);
  --text: #4a4a45;
  --text-soft: #55554f;
  --accent: var(--clr-gold-dim);
  --border: rgba(17, 17, 16, 0.08);
  --border-strong: rgba(17, 17, 16, 0.18);
  --rule: rgba(17, 17, 16, 0.07);
  --shadow: 0 2px 10px rgba(17, 17, 16, 0.05);
  --shadow-lift: 0 14px 34px rgba(17, 17, 16, 0.12);
  --btn-solid-bg: var(--clr-gold);
  --btn-solid-ink: var(--clr-black);
  --btn-ghost-ink: var(--clr-black);
  --btn-ghost-line: rgba(17, 17, 16, 0.28);
}

.scheme-light {
  --surface: var(--surface-light);
  --raised: #ffffff;
  --heading: var(--clr-black);
  --text: #4a4a45;
  --text-soft: #55554f;
  --accent: var(--clr-gold-dim);
  --border: rgba(17, 17, 16, 0.08);
  --border-strong: rgba(17, 17, 16, 0.18);
  --rule: rgba(17, 17, 16, 0.07);
  --shadow: 0 2px 10px rgba(17, 17, 16, 0.05);
  --shadow-lift: 0 14px 34px rgba(17, 17, 16, 0.12);
  --btn-solid-bg: var(--clr-gold);
  --btn-solid-ink: var(--clr-black);
  --btn-ghost-ink: var(--clr-black);
  --btn-ghost-line: rgba(17, 17, 16, 0.28);
}

.scheme-light-dark {
  --surface: var(--surface-light-dark);
  --raised: #ffffff;
  --heading: var(--clr-black);
  --text: #4a4a45;
  --text-soft: #55554f;
  --accent: var(--clr-gold-dim);
  --border: rgba(17, 17, 16, 0.10);
  --border-strong: rgba(17, 17, 16, 0.20);
  --rule: rgba(17, 17, 16, 0.08);
  --shadow: 0 2px 10px rgba(17, 17, 16, 0.06);
  --shadow-lift: 0 14px 34px rgba(17, 17, 16, 0.14);
  --btn-solid-bg: var(--clr-gold);
  --btn-solid-ink: var(--clr-black);
  --btn-ghost-ink: var(--clr-black);
  --btn-ghost-line: rgba(17, 17, 16, 0.28);
}

.scheme-dark {
  --surface: var(--surface-dark);
  --raised: var(--clr-dark-mid);
  --heading: var(--clr-white);
  --text: var(--clr-silver);
  --text-soft: #9a9a92;
  --accent: var(--clr-gold);
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.18);
  --rule: rgba(255, 255, 255, 0.06);
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.55);
  --btn-solid-bg: var(--clr-gold);
  --btn-solid-ink: var(--clr-black);
  --btn-ghost-ink: var(--clr-white);
  --btn-ghost-line: rgba(255, 255, 255, 0.3);
}


/* ============================================================
   3. SECTION SKELETON
   Replaces services__header, sec__head, gallery__header,
   process__header, testimonials__header and industries__header.
   ============================================================ */

.section {
  position: relative;
  overflow: hidden;
  padding-block: var(--section-py);
  background-color: var(--surface);
  color: var(--text);
}

/* Half height section, for short blocks like the trust bar. */
.section--tight {
  --section-py: clamp(2.5rem, 5vw, 4rem);
}

/* No vertical padding, for full bleed blocks. */
.section--flush {
  padding-block: 0;
}

/* Hairline that separates two sections of similar tone. */
.section--ruled::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--hairline);
  background: var(--rule);
  pointer-events: none;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow {
  max-width: 900px;
}

/* Section header block: eyebrow, title, divider, lead. */
.head {
  max-width: 72ch;
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}

.head--start {
  margin-inline: 0;
  text-align: left;
}

/* Header placed inside a split or a stack, where the spacing below
   is already handled by the parent. */
.head--flush {
  margin-bottom: 0;
}

/* Eyebrow. The flanking rules are pseudo elements, so the markup
   no longer carries empty span elements. */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--font-body);
  font-size: var(--fs-xsm);
  font-weight: 100;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.eyebrow::before,
.eyebrow::after {
  content: '';
  display: block;
  width: 1.5rem;
  height: var(--hairline);
  background: var(--accent);
}

/* One rule only, on the left, for headers aligned to the start. */
.head--start .eyebrow {
  justify-content: flex-start;
}

.head--start .eyebrow::after {
  display: none;
}

.title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--heading);
  text-wrap: balance;
}

.title--lg {
  font-size: var(--fs-3xl);
}

.title--sm {
  font-size: var(--fs-xl);
}

/* Gold gradient run inside a title. Defined once, was repeated in
   six different title blocks before. */
.accent {
  background: linear-gradient(135deg,
      var(--clr-gold-pale) 0%,
      var(--clr-gold) 50%,
      var(--clr-gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.divider {
  width: 250px;
  height: 2px;
  margin-block: var(--sp-md);
  margin-inline: auto;
  background: linear-gradient(90deg, transparent, var(--clr-gold), transparent);
}

.head--start .divider {
  margin-inline: 0;
}

.lead {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text);
  margin-top: 1rem;
}

/* Centered call to action under a section body. */
.section__cta {
  display: flex;
  justify-content: center;
  gap: var(--sp-sm);
  flex-wrap: wrap;
  margin-top: clamp(2rem, 4vw, 3rem);
}


/* ============================================================
   4. LAYOUT
   Replaces the seventeen separate __grid rules. Columns collapse
   on their own through auto fit, so most of the old media queries
   disappear with them.
   ============================================================ */

.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col, 18rem)), 1fr));
}
#certifications .grid {
  --col: 12rem;
}
#certifications .grid > li {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#certifications .grid img {
  display: block;
  margin: 0 auto;
}

/* Trust bar on phones: two logos per row, the odd one centered */
@media (max-width: 767.98px) {
  #certifications .grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 0;
  }

  #certifications .grid > li {
    flex: 0 0 50%;
    padding-inline: 8px;
  }

  #certifications .grid img {
    width: 100%;
    max-width: 130px;
    height: auto;
  }
}
.grid--2 { --col: 26rem; }
.grid--3 { --col: 20rem; }
.grid--4 { --col: 15rem; }
.grid--tight { --gap: 1px; }

/* Two column block: copy beside a panel, an image or a form. */
.split {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
}

.split--wide { grid-template-columns: 1.35fr 0.65fr; }
.split--top { align-items: start; }

/* Vertical rhythm inside a column. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.stack--lg { gap: var(--sp-md); }
.stack--sm { gap: var(--sp-xs); }

/* Row of small items that wraps: tags, actions, meta. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.warranty-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #111110;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.warranty-card__icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--clr-gold);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   5. CONTENT PRIMITIVES
   These replace service-card, material-card, warranty-card,
   post-card, industry-card, finishes__item, local__cert-item,
   ship__step and process__step.
   ============================================================ */

/* ---- Card --------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--pad-card);
  background: var(--raised);
  border: var(--hairline) solid var(--border);
  box-shadow: var(--shadow);
  transition:
    transform var(--dur-base) var(--ease-smooth),
    box-shadow var(--dur-base) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--border-strong);
}

/* No surface of its own. Use when cards sit directly on the
   section background, like the materials list. */
.card--plain {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.card--plain:hover {
  transform: none;
  box-shadow: none;
}

/* Card that opens with an image and pads only the text. */
.card--media {
  padding: 0;
  overflow: hidden;
}

.card--media .card__body {
  padding: var(--pad-card);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--border);
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-smooth);
}

.card:hover .card__img {
  transform: scale(1.05);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.card__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--border-strong);
  color: var(--accent);
}

.card__icon svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: var(--hairline) solid var(--border-strong);
  color: var(--text-soft);
  white-space: nowrap;
}

.card__badge--accent {
  color: var(--accent);
  border-color: var(--accent);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--heading);
}

.card__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
  flex: 1;
  text-wrap: pretty;
}

.card__foot {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* ---- List --------------------------------------------------- */

.list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.65rem;
  border-bottom: var(--hairline) solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text);
}

.list__item:last-child {
  border-bottom: 0;
}

/* Gold dot marker, for catalogs and feature lists. */
.list--dot .list__item::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* Check marker, for included items and certifications. */
.list--check .list__item::before {
  content: '';
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Cross marker, for exclusions. */
.list--cross .list__item::before {
  content: '';
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--text-soft);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Step (numbered sequence) -------------------------------- */

.step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step__num {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

/* Fixed width number column so text lines up (01 to 04).
   The circle variant keeps its own size. */
.step:not(.step--circle) .step__num {
  flex: 0 0 2.2em;
  font-variant-numeric: tabular-nums;
}

.step__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.35rem;
}

.step__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
}

/* Process grid: flex instead of auto-fit so an incomplete last row
   (five steps = 3 + 2) sits centered instead of hugging the left.
   Three per row on desktop, two per row below 992px. */
.grid:has(> .step) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: clamp(2.25rem, 6vw, 3.5rem); /* more air between rows */
}

.grid:has(> .step) > .step {
  flex: 0 1 calc((100% - 2 * var(--gap)) / 3);
  min-width: 0;
}

@media (max-width: 991.98px) {
  .grid:has(> .step) > .step {
    flex-basis: calc((100% - var(--gap)) / 2);
  }
}

/* Circular numbered variant, used on the process timeline. */
.step--circle {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
}

.step--circle .step__num {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border: var(--hairline) solid var(--accent);
  border-radius: var(--radius-pill);
}

/* ---- Small parts -------------------------------------------- */

.tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: var(--hairline) solid var(--border-strong);
  color: var(--text-soft);
}

.tag--link {
  transition: color var(--dur-fast) var(--ease-smooth),
    border-color var(--dur-fast) var(--ease-smooth);
}

.tag--link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.stat__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.note {
  padding: var(--pad-card);
  border: var(--hairline) solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--raised);
}

.note__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--heading);
  margin-bottom: 0.5rem;
}

.note__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
}

/* ---- Links and buttons -------------------------------------- */

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: gap var(--dur-fast) var(--ease-smooth),
    color var(--dur-fast) var(--ease-smooth);
}

.link::after {
  content: '\2192';
  font-size: 1.1em;
  line-height: 1;
}

.link:hover {
  gap: 0.8rem;
  color: var(--clr-gold);
}

/* Same link without the arrow, for inline use. */
.link--bare::after {
  content: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 2.25rem;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: var(--hairline) solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-smooth),
    color var(--dur-base) var(--ease-smooth),
    border-color var(--dur-base) var(--ease-smooth),
    transform var(--dur-base) var(--ease-bounce),
    box-shadow var(--dur-base) var(--ease-smooth);
}

.btn--primary {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-ink);
  border-color: var(--btn-solid-bg);
}

.btn--primary:hover {
  background: var(--heading);
  color: var(--btn-solid-bg);
  border-color: var(--heading);
  box-shadow: var(--shadow-lift);
}

/* Ghost button now works on light and dark without a patch,
   because its colors come from the scheme. */
.btn--ghost {
  background: transparent;
  color: var(--btn-ghost-ink);
  border-color: var(--btn-ghost-line);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Media -------------------------------------------------- */

.media {
  position: relative;
  overflow: hidden;
  background: var(--border);
}

.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--square { aspect-ratio: 1 / 1; }

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Logos and diagrams must never be cropped. */
.media--contain {
  background: transparent;
}

.media--contain img {
  object-fit: contain;
}

/* ============================================================
About Us section styles
 ============================================================ */

/* ── Section ──────────────────────────────────────────────── */
.about {
 background-color: #f0f0ea; /* slightly lighter than --clr-light #e8e8e2 */
 padding-block: var(--section-py);
 position: relative;
 overflow: hidden;
}

/* ── Inner layout: 2 columns ──────────────────────────────── */
.about__inner {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: clamp(3rem, 6vw, 7rem);
 align-items: center;
}

/* ════════════════════════════════════════════════════════════
 LEFT — Image stack
════════════════════════════════════════════════════════════ */
.about__images {
 position: relative;
 aspect-ratio: 4 / 4.2;
}

/* Main image */
.about__img-main {
 position: absolute;
 top: 0;
 left: 0;
 width: 72%;
 aspect-ratio: 3 / 4;
 object-fit: cover;
 display: block;
}

.about__img-main-placeholder {
 width: 100%;
 height: 100%;
 background: repeating-linear-gradient(
 -45deg,
 #d8d8d2 0px, #d8d8d2 3px,
 #e0e0da 3px, #e0e0da 18px
 );
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-body);
 font-size: 0.6rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--clr-muted);
 text-align: center;
 padding: 1rem;
 line-height: 1.6;
}

/* Secondary image */
.about__img-secondary {
 position: absolute;
 bottom: 0;
 right: 0;
 width: 55%;
 aspect-ratio: 1 / 1;
 object-fit: cover;
 border: 4px solid #f0f0ea;
 display: block;
}

.about__img-secondary-placeholder {
 width: 100%;
 height: 100%;
 background: repeating-linear-gradient(
 -45deg,
 #c8c8c2 0px, #c8c8c2 3px,
 #d0d0ca 3px, #d0d0ca 18px
 );
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-body);
 font-size: 0.6rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--clr-muted);
 text-align: center;
 padding: 1rem;
 line-height: 1.6;
}

/* Years badge */
.about__badge {
 position: absolute;
 bottom: 8rem;
 left: 0;
 background: var(--clr-dark);
 padding: 1rem 1.5rem;
 display: flex;
 flex-direction: column;
 gap: 0.2rem;
 z-index: 2;
 border-left: 3px solid var(--clr-gold);
}

.about__badge-value {
 font-family: var(--font-display);
 font-size: clamp(1.75rem, 3vw, 2.5rem);
 font-weight: 700;
 color: var(--clr-gold);
 line-height: 1;
}

.about__badge-label {
 font-family: var(--font-body);
 font-size: 0.6rem;
 font-weight: 500;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--clr-silver);
}

/* ════════════════════════════════════════════════════════════
 RIGHT — Content
════════════════════════════════════════════════════════════ */
.about__content {
 display: flex;
 flex-direction: column;
 gap: 0;
}

.about__eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 0.75rem;
 font-family: var(--font-body);
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--clr-gold);
 margin-bottom: 1rem;
}

.about__eyebrow-line {
 display: block;
 width: 1.5rem;
 height: 1px;
 background: var(--clr-gold);
}

.about__title {
 font-family: var(--font-display);
 font-size: var(--fs-2xl);
 font-weight: 700;
 color: var(--clr-black);
 letter-spacing: -0.02em;
 line-height: 1.1;
 margin-bottom: 1.5rem;
}

.about__title .accent {
 background: linear-gradient(
 135deg,
 var(--clr-gold-pale) 0%,
 var(--clr-gold) 50%,
 var(--clr-gold-dim) 100%
 );
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}

.about__text {
 font-size: var(--fs-sm);
 font-weight: 400;
 color: var(--clr-muted);
 line-height: 1.8;
 text-wrap: pretty;
 margin-bottom: 2rem;
}

/* ── Feature list ─────────────────────────────────────────── */
.about__features {
 display: flex;
 flex-direction: column;
 gap: 1.5rem;
 margin-bottom: 2.5rem;
}

.about__feature {
 display: flex;
 align-items: flex-start;
 gap: 1rem;
}

.about__feature-icon {
 width: 42px;
 height: 42px;
 border: 1px solid rgba(180, 140, 60, 0.35);
 background: rgba(180, 140, 60, 0.06);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 transition:
 background var(--dur-base) var(--ease-smooth),
 border-color var(--dur-base) var(--ease-smooth);
}

.about__feature:hover .about__feature-icon {
 background: var(--clr-gold);
 border-color: var(--clr-gold);
}

.about__feature-icon svg {
 width: 18px;
 height: 18px;
 stroke: var(--clr-gold);
 fill: none;
 stroke-width: 1.75;
 stroke-linecap: round;
 stroke-linejoin: round;
 transition: stroke var(--dur-base) var(--ease-smooth);
}

.about__feature:hover .about__feature-icon svg {
 stroke: var(--clr-black);
}

.about__feature-body {
 flex: 1;
}

.about__feature-title {
 font-family: var(--font-body);
 font-size: var(--fs-sm);
 font-weight: 600;
 color: var(--clr-dark);
 margin-bottom: 0.25rem;
}

.about__feature-text {
 font-size: var(--fs-xs);
 font-weight: 400;
 color: var(--clr-muted);
 line-height: 1.65;
 text-wrap: pretty;
}

/* ── CTA ──────────────────────────────────────────────────── */
.about .btn--primary {
 background: var(--clr-gold);
 color: var(--clr-black);
 border: 1px solid var(--clr-gold);
 align-self: flex-start;
}

.about .btn--primary:hover {
 background: transparent;
 color: var(--clr-dark);
 border-color: var(--clr-dark);
}

/* ============================================================
   6. EDITOR CONTENT
   Anything pasted from the Joomla editor arrives as bare p, h2,
   h3, ul, ol, li and a. Wrapping it in .prose is what makes it
   inherit the scheme without adding a single class by hand.
   This is the only block with element selectors, and it is scoped.
   ============================================================ */

.prose {
  max-width: var(--measure);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-display);
  color: var(--heading);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  margin-top: 2rem;
}

.prose h2 { font-size: var(--fs-xl); }
.prose h3 { font-size: var(--fs-md); }
.prose h4 { font-size: var(--fs-base); }

.prose ul,
.prose ol {
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.prose ul { list-style: none; padding-left: 0; }
.prose ol { list-style: decimal; }

.prose ul > li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.prose ul > li::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  transform: translateY(-0.2em);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prose strong { color: var(--heading); font-weight: 700; }

.prose blockquote {
  padding-left: 1rem;
  border-left: 2px solid var(--accent);
  color: var(--text-soft);
  font-style: italic;
}

.prose img {
  max-width: 100%;
  height: auto;
  display: block;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.prose th,
.prose td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: var(--hairline) solid var(--border);
}

.prose th {
  color: var(--heading);
  font-weight: 700;
}


/* ============================================================
   7. UTILITIES, STATE AND ACCESSIBILITY
   ============================================================ */

.u-center { text-align: center; }
.u-start { text-align: left; }
.u-measure { max-width: var(--measure); }
.u-center-x { margin-inline: auto; }
.u-nowrap { white-space: nowrap; }
.u-mt { margin-top: var(--sp-md); }
.u-mt-sm { margin-top: var(--sp-sm); }

/* Postal address inside a card, without the browser italic. */
.address {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  font-style: normal;
  color: var(--text);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Scroll animations. Same contract as the current template.js,
   so the existing script keeps working untouched. */
[data-anim] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--dur-xslow);
  transition-timing-function: var(--ease-out-expo);
}

[data-anim="fade-up"] { transform: translateY(28px); }
[data-anim="fade-right"] { transform: translateX(-28px); }
[data-anim="fade-left"] { transform: translateX(28px); }

[data-anim].is-visible {
  opacity: 1;
  transform: none;
}

[data-anim-delay="1"] { transition-delay: 0.08s; }
[data-anim-delay="2"] { transition-delay: 0.16s; }
[data-anim-delay="3"] { transition-delay: 0.24s; }
[data-anim-delay="4"] { transition-delay: 0.32s; }
[data-anim-delay="5"] { transition-delay: 0.40s; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ============================================================
   8. BREAKPOINTS
   Two only. Auto fit handles everything in between.
   ============================================================ */

@media (max-width: 900px) {

  .split,
  .split--wide {
    grid-template-columns: 1fr;
  }

  .head {
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
}

@media (max-width: 640px) {

  .divider {
    width: 160px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .step--circle .step__num {
    width: 3rem;
    height: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .card,
  .card__img,
  .btn,
  .link {
    transition: none;
  }

  .card:hover {
    transform: none;
  }

  .card:hover .card__img {
    transform: none;
  }
}

/* ============================================================
   BESPOKE BLOCKS
   Only the seven blocks that carry unique behaviour or layout.
   Everything else in the page is built from the system above.
   Carried over from v-2 without visual changes.
   ============================================================ */

.back-to-top {
 position: fixed;
 bottom: 2rem;
 right: 2rem;
 z-index: var(--z-nav);
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background: rgba(18, 18, 17, 0.5);
 border: 1px solid rgba(180, 140, 60, 0.35);
 backdrop-filter: blur(12px);
 -webkit-backdrop-filter: blur(12px);
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 opacity: 0;
 transform: translateY(12px);
 pointer-events: none;
 transition:
 opacity var(--dur-base) var(--ease-smooth),
 transform var(--dur-base) var(--ease-smooth),
 background var(--dur-base) var(--ease-smooth),
 border-color var(--dur-base) var(--ease-smooth);
}
.back-to-top.is-visible {
 opacity: 1;
 transform: translateY(0);
 pointer-events: auto;
}
.back-to-top:hover {
 background: var(--clr-gold);
 border-color: var(--clr-gold);
}
.back-to-top:hover svg {
 stroke: var(--clr-black);
}
.back-to-top svg {
 width: 18px;
 height: 18px;
 stroke: var(--clr-gold);
 fill: none;
 stroke-width: 2;
 stroke-linecap: round;
 stroke-linejoin: round;
 transition: stroke var(--dur-base) var(--ease-smooth);
}
.grain-overlay {
 position: fixed;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: var(--z-overlay);
 opacity: 0.022;
 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
 background-size: 256px 256px;
}
.navbar {
  position: fixed; 
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: 80px;
  display: flex;
  align-items: center;
  padding-inline: var(--container-pad);
  transition: 
    background var(--dur-slow) var(--ease-smooth),
    height var(--dur-slow) var(--ease-smooth),
    box-shadow var(--dur-slow) var(--ease-smooth),
    transform var(--dur-base) var(--ease-smooth);
}
.navbar--hidden {
  transform: translateY(-100%);
}
.navbar::before {
 content: '';
 position: absolute;
 inset: 0;
 background: linear-gradient(
 to bottom,
 rgba(10, 10, 9, 0.85) 0%,
 rgba(10, 10, 9, 0) 100%
 );
 opacity: 1;
 transition: opacity var(--dur-slow) var(--ease-smooth);
 pointer-events: none;
}
.navbar--scrolled {
 height: 64px;
 background: rgba(18, 18, 17, 0.35);
 backdrop-filter: blur(20px) saturate(160%) brightness(0.9);
 -webkit-backdrop-filter: blur(20px) saturate(160%) brightness(0.9);
 box-shadow:
 0 1px 0 rgba(180, 150, 80, 0.12),
 0 4px 32px rgba(0, 0, 0, 0.25),
 inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.navbar--scrolled::before {
 opacity: 0;
}
.navbar__inner {
 width: 100%;
 max-width: var(--container-max);
 margin-inline: auto;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: var(--sp-md);
}
.navbar__logo {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 text-decoration: none;
 flex-shrink: 0;

}
.navbar__logo-mark {
 width: 140px;
 height: 38px;
 position: relative;
}
.navbar__logo-mark svg {
 width: 100%;
 height: 100%;
}
.navbar__logo-text {
 display: flex;
 flex-direction: column;
 line-height: 1;
}
.navbar__logo-name {
 font-family: var(--font-display);
 font-size: 1.25rem;
 font-weight: 500;
 letter-spacing: 0.05em;
 color: var(--clr-white);
 transition: color var(--dur-base) var(--ease-smooth);
}
.navbar__logo-tagline {
 font-family: var(--font-body);
 font-size: 0.6rem;
 font-weight: 400;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--clr-gold);
 margin-top: 2px;
}
.navbar__logo:hover .navbar__logo-name {
 color: var(--clr-gold);
}
.navbar__menu {
 display: flex;
 align-items: center;
 gap: var(--sp-lg);
 justify-content: center;
}
.navbar__nav {
 display: flex;
 align-items: center;
 gap: 2.5rem;
}
.navbar__link {
 font-family: var(--font-body);
 font-size: var(--fs-xs);
 font-weight: 500;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: rgba(245, 245, 240, 0.75);
 text-decoration: none;
 position: relative;
 padding-block: 0.25rem;
 transition: color var(--dur-base) var(--ease-smooth);
}
.navbar__link::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left: 0;
 width: 0;
 height: 1px;
 background: var(--clr-gold);
 transition: width var(--dur-slow) var(--ease-out-expo);
}
.navbar__link:hover {
 color: var(--clr-white);
}
.navbar__link:hover::after,
.navbar__link.is-active::after {
 width: 100%;
}
.navbar__link.is-active {
 color: var(--clr-white);
}
.navbar__link--has-dropdown {
 display: flex;
 align-items: center;
 gap: 0.35rem;
}
.navbar__dropdown-icon {
 width: 10px;
 height: 10px;
 opacity: 0.5;
 transition: transform var(--dur-base) var(--ease-smooth), opacity var(--dur-base) var(--ease-smooth);
}
.navbar__link--has-dropdown:hover .navbar__dropdown-icon {
 transform: rotate(180deg);
 opacity: 1;
}
.navbar__actions {
 display: flex;
 align-items: center;
 gap: var(--sp-sm);
 flex-shrink: 0;
}
.navbar__cta {
 font-size: var(--fs-xs);
 padding: 0.625rem 1.5rem;
}
.navbar__burger {
 display: none;
 flex-direction: column;
 justify-content: center;
 gap: 5px;
 width: 40px;
 height: 40px;
 cursor: pointer;
 background: none;
 border: none;
 padding: 4px;
 z-index: var(--z-nav);
 flex-shrink: 0;
}
.navbar__burger-line {
 display: block;
 width: 100%;
 height: 1.5px;
 background: var(--clr-white);
 transition:
 transform var(--dur-base) var(--ease-smooth),
 opacity var(--dur-base) var(--ease-smooth),
 width var(--dur-base) var(--ease-smooth);
 transform-origin: center;
}
.navbar__burger-line:nth-child(3) {
 width: 65%;
 margin-left: auto;
}
.navbar__burger.is-active .navbar__burger-line:nth-child(1) {
 transform: translateY(6.5px) rotate(45deg);
}
.navbar__burger.is-active .navbar__burger-line:nth-child(2) {
 opacity: 0;
 transform: scaleX(0);
}
.navbar__burger.is-active .navbar__burger-line:nth-child(3) {
 transform: translateY(-6.5px) rotate(-45deg);
 width: 100%;
}
.navbar__overlay {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.6);
 backdrop-filter: blur(4px);
 z-index: calc(var(--z-nav) - 1);
 opacity: 0;
 transition: opacity var(--dur-slow) var(--ease-smooth);
}
.navbar__overlay.is-active {
 opacity: 1;
}
.hero {
 position: relative;
 width: 100%;
 /* Grows with its content so wrapped titles never slide under the header */
 min-height: max(85dvh, 640px);
 display: flex;
 align-items: center;
 overflow: hidden;
 background: var(--clr-black);
}
.hero__bg {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: 0;
}
/* Hero image: no stretching, focal point adjustable per page.
   Per page, on the <img class="hero__bg-img">:
   style="--hero-pos: 70% center; --hero-pos-m: 80% bottom"
   --hero-pos   desktop focal point
   --hero-pos-m mobile focal point (falls back to --hero-pos) */
.hero__bg picture {
 display: block;
 width: 100%;
 height: 100%;
}
.hero__bg-img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: var(--hero-pos, center);
}
@media (max-width: 767.98px) {
 .hero__bg-img {
 object-position: var(--hero-pos-m, var(--hero-pos, center));
 }
}
.hero__bg-placeholder {
 width: 100%;
 height: 100%;
 background:
 repeating-linear-gradient(
 -45deg,
 #111110 0px,
 #111110 2px,
 #161615 2px,
 #161615 18px
 );
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-body);
 font-size: var(--fs-xs);
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--clr-muted);
}
.hero__overlay {
 position: absolute;
 inset: 0;
 z-index: 1;
 background:
 linear-gradient(to top, rgba(10,10,9,0.96) 0%, rgba(10,10,9,0.3) 40%, transparent 70%),
 linear-gradient(to right, rgba(10,10,9,0.75) 0%, transparent 60%),
 linear-gradient(to bottom, rgba(10,10,9,0.5) 0%, transparent 30%);
}
.hero__vignette {
 position: absolute;
 inset: 0;
 z-index: 1;
 background: radial-gradient(
 ellipse 80% 60% at 20% 60%,
 rgba(180, 140, 60, 0.06) 0%,
 transparent 70%
 );
 pointer-events: none;
}
.hero__content {
 position: relative;
 z-index: 2;
 width: 100%;
 max-width: var(--container-max);
 margin-inline: auto;
 padding-inline: var(--container-pad);
 display: flex;
 flex-direction: column;
 justify-content: center;
 height: auto;
 /* Clears the absolute header and logo on narrow or short screens */
 padding-top: calc(var(--msg_header_height, 88px) + 2.5rem);
 padding-bottom: 4rem;
}
.hero__eyebrow {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 margin-bottom: 1.5rem;
 opacity: 0;
 transform: translateY(20px);
 animation: heroFadeUp 0.9s var(--ease-out-expo) 0.3s forwards;
}
.hero__eyebrow-line {
 display: block;
 width: 2rem;
 height: 1px;
 background: var(--clr-gold);
}
.hero__eyebrow-text {
 font-family: var(--font-body);
 font-size: var(--fs-xsm);
 font-weight: 100;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--clr-gold);
}
.hero__title {
 font-family: var(--font-display);
 font-weight: 700;
 font-size: clamp(2rem, 4vw, 5rem);
 line-height: 1.1;
 letter-spacing: -0.02em;
 color: var(--clr-light);
 max-width: 14ch;
 text-wrap: balance;
 opacity: 0;
 transform: translateY(30px);
 animation: heroFadeUp 1s var(--ease-out-expo) 0.5s forwards;
}
.hero__title em {
 font-style: normal;
}
.hero__title .accent {
 background: linear-gradient(
 135deg,
 var(--clr-gold-pale) 0%,
 var(--clr-gold) 50%,
 var(--clr-gold-dim) 100%
 );
 -webkit-background-clip: text;
 background-clip: text;
 -webkit-text-fill-color: transparent;
}
.hero__subtitle {
 margin-top: 1.5rem;
 font-family: var(--font-body);
 font-size: var(--fs-sm);
 font-weight: 300;
 color: rgba(184, 184, 176, 0.85);
 max-width: 48ch;
 line-height: 1.7;
 text-wrap: pretty;
 opacity: 0;
 transform: translateY(20px);
 animation: heroFadeUp 1s var(--ease-out-expo) 0.7s forwards;
}
.hero__actions {
 display: flex;
 align-items: center;
 flex-wrap: wrap;
 gap: 1rem;
 margin-top: 2.75rem;
 opacity: 0;
 transform: translateY(20px);
 animation: heroFadeUp 1s var(--ease-out-expo) 0.9s forwards;
}
.hero__scroll-hint {
 position: absolute;
 bottom: 2.5rem;
 right: var(--container-pad);
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.75rem;
 opacity: 0;
 animation: heroFadeUp 1s var(--ease-out-expo) 1.4s forwards;
 transition: opacity 0.4s ease;
}
.hero__scroll-hint-text {
 font-family: var(--font-body);
 font-size: 0.6rem;
 font-weight: 500;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--clr-muted);
 writing-mode: vertical-rl;
 text-orientation: mixed;
}
.hero__scroll-line {
 width: 1px;
 height: 3.5rem;
 background: linear-gradient(to bottom, var(--clr-gold), transparent);
 position: relative;
 overflow: hidden;
}
.hero__scroll-line::after {
 content: '';
 position: absolute;
 top: -100%;
 left: 0;
 width: 100%;
 height: 100%;
 background: var(--clr-gold);
 animation: scrollLineAnim 2s var(--ease-smooth) 1.6s infinite;
}
.hero__metal-line {
 position: absolute;
 top: 0;
 right: 0;
 width: 1px;
 height: 100%;
 background: linear-gradient(
 to bottom,
 transparent 0%,
 var(--clr-gold-dim) 30%,
 var(--clr-gold) 50%,
 var(--clr-gold-dim) 70%,
 transparent 100%
 );
 opacity: 0.3;
 z-index: 2;
}
@keyframes heroFadeUp {
 to {
 opacity: 1;
 transform: translateY(0);
 }
}
@keyframes scrollLineAnim {
 0% { top: -100%; }
 100% { top: 100%; }
}
.testimonials {
 background-color: var(--clr-light);
 padding-block: var(--section-py);
 position: relative;
 overflow: hidden;
}
.testimonials__slider {
 position: relative;
 overflow: hidden;
 margin-bottom: 1.5rem;
 min-height: 420px;
}
.testimonials__track {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1.25rem;
 transition: opacity var(--dur-slow) var(--ease-smooth);
 align-items: stretch;
}
.testimonials__track.is-transitioning {
 opacity: 0;
 transform: translateY(8px);
 transition: opacity 0.25s ease, transform 0.25s ease;
}
.testimonial-card {
 background: #fff;
 border: 1px solid rgba(0,0,0,0.07);
 min-height: 320px;
 height: 100%;
 padding: 2rem;
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
 transition:
 box-shadow var(--dur-base) var(--ease-smooth),
 transform var(--dur-base) var(--ease-smooth),
 border-color var(--dur-base) var(--ease-smooth);
}
.testimonial-card:hover {
 box-shadow: 0 8px 40px rgba(0,0,0,0.1);
 transform: translateY(-3px);
 border-color: rgba(180,140,60,0.25);
}
.testimonial-card__stars {
 display: flex;
 gap: 3px;
}
.testimonial-card__star {
 width: 16px;
 height: 16px;
 fill: var(--clr-gold);
}
.testimonial-card__quote {
 font-family: var(--font-body);
 font-size: var(--fs-sm);
 font-weight: 400;
 color: var(--clr-dark);
 line-height: 1.75;
 text-wrap: pretty;
 flex: 1;
 position: relative;
 padding-top: 0.5rem;
}
.testimonial-card__quote::before {
 content: '\201C';
 font-family: var(--font-display);
 font-size: 4rem;
 line-height: 0;
 color: var(--clr-gold);
 opacity: 0.3;
 position: absolute;
 top: 0.75rem;
 left: -0.25rem;
}
.testimonial-card__author {
 display: flex;
 align-items: center;
 gap: 0.875rem;
 padding-top: 1rem;
 border-top: 1px solid rgba(0,0,0,0.06);
}
.testimonial-card__avatar {
 width: 42px;
 height: 42px;
 border-radius: 50%;
 background: var(--clr-dark);
 border: 2px solid rgba(180,140,60,0.3);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 font-family: var(--font-display);
 font-size: var(--fs-sm);
 font-weight: 600;
 color: var(--clr-gold);
}
.testimonial-card__info {
 display: flex;
 flex-direction: column;
 gap: 0.1rem;
}
.testimonial-card__name {
 font-family: var(--font-body);
 font-size: var(--fs-xs);
 font-weight: 600;
 color: var(--clr-dark);
}
.testimonial-card__role {
 font-size: 0.7rem;
 font-weight: 400;
 color: var(--clr-muted);
 letter-spacing: 0.05em;
}
.testimonials__controls {
 display: flex;
 align-items: center;
 justify-content: center;
 gap: 1.5rem;
}
.testimonials__arrow {
 width: 42px;
 height: 42px;
 border-radius: 50%;
 border: 1px solid rgba(0,0,0,0.15);
 background: transparent;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition:
 background var(--dur-base) var(--ease-smooth),
 border-color var(--dur-base) var(--ease-smooth),
 transform var(--dur-base) var(--ease-bounce);
 flex-shrink: 0;
 /* Comfortable tap target */
 min-width: 44px;
 min-height: 44px;
}
.testimonials__arrow:hover {
 background: var(--clr-gold);
 border-color: var(--clr-gold);
 transform: scale(1.08);
}
.testimonials__arrow:hover svg {
 stroke: var(--clr-black);
}
.testimonials__arrow svg {
 width: 16px;
 height: 16px;
 stroke: var(--clr-dark);
 fill: none;
 stroke-width: 2;
 stroke-linecap: round;
 stroke-linejoin: round;
 transition: stroke var(--dur-base) var(--ease-smooth);
}
#.testimonials__arrow:disabled {
 opacity: 0.3;
 cursor: not-allowed;
 pointer-events: none;
}
#.testimonials__dots {
 display: flex;
 align-items: center;
 gap: 0.5rem;
}
#.testimonials__dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(0,0,0,0.2);
 border: none;
 cursor: pointer;
 padding: 0;
 transition:
 background var(--dur-base) var(--ease-smooth),
 transform var(--dur-base) var(--ease-bounce),
 width var(--dur-base) var(--ease-smooth);
}
.testimonials__dots {
  display: flex;
  align-items: center;
  gap: 0;
}
 
.testimonials__dot {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 8px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-clip: content-box;
  cursor: pointer;
}
 
/* Visible keyboard focus around the whole hit area */
.testimonials__dot:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0;
}
 
/* On phones there is one card per page (nine pages), so nine dots do not
   fit next to the arrows. The dots are hidden and the counter (1 / 9) plus
   the arrows handle navigation. */
@media (max-width: 560px) {
  .testimonials__dots {
    display: none;
  }
}
 
.testimonials__dot.is-active {
 background: var(--clr-gold);
 width: 24px;
 border-radius: 4px;
}
.testimonials__counter {
 font-family: var(--font-body);
 font-size: var(--fs-xs);
 font-weight: 500;
 color: var(--clr-muted);
 letter-spacing: 0.08em;
 min-width: 3rem;
 text-align: center;
}
.testimonials__counter span {
 color: var(--clr-gold);
 font-weight: 600;
}
.gallery {
 background-color: var(--clr-dark);
 padding-block: var(--section-py);
 position: relative;
 overflow: hidden;
}
.gallery__filters {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
 gap: 0.5rem;
 margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.gallery__filter-btn {
 font-family: var(--font-body);
 font-size: var(--fs-xs);
 font-weight: 500;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--clr-silver);
 background: transparent;
 border: 1px solid rgba(255,255,255,0.1);
 padding: 0.5rem 1.25rem;
 cursor: pointer;
 transition:
 color var(--dur-base) var(--ease-smooth),
 background var(--dur-base) var(--ease-smooth),
 border-color var(--dur-base) var(--ease-smooth);
}
.gallery__filter-btn:hover {
 color: var(--clr-white);
 border-color: rgba(255,255,255,0.3);
}
.gallery__filter-btn.is-active {
 color: var(--clr-black);
 background: var(--clr-gold);
 border-color: var(--clr-gold);
}
.gallery__grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 grid-auto-rows: 260px;
 gap: 0.75rem;
}
.gallery__item--featured {
 grid-column: span 2;
 grid-row: span 2;
}
.gallery__item--wide {
 grid-column: span 2;
}
.gallery__item {
 position: relative;
 overflow: hidden;
 cursor: pointer;
 background: var(--clr-dark-mid);
 transition:
 opacity 0.4s ease,
 transform 0.4s ease;
}
.gallery__item-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform 0.8s var(--ease-out-expo);
 display: block;
}
/* Any image inside a tile fills it, even without the class
   (no empty band under each photo) */
.gallery__item img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.gallery__item-placeholder {
 width: 100%;
 height: 100%;
 background: repeating-linear-gradient(
 -45deg,
 #161615 0px, #161615 3px,
 #1a1a18 3px, #1a1a18 18px
 );
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--font-body);
 font-size: 0.6rem;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--clr-muted);
 text-align: center;
 padding: 1rem;
 line-height: 1.6;
 transition: transform 0.8s var(--ease-out-expo);
}
.gallery__item:hover .gallery__item-img,
.gallery__item:hover .gallery__item-placeholder {
 transform: scale(1.06);
}
.gallery__item-overlay {
 position: absolute;
 inset: 0;
 background: linear-gradient(
 to top,
 rgba(10,10,9,0.9) 0%,
 rgba(10,10,9,0.4) 40%,
 transparent 70%
 );
 opacity: 0;
 transition: opacity var(--dur-base) var(--ease-smooth);
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 1.5rem;
}
.gallery__item:hover .gallery__item-overlay {
 opacity: 1;
}
.gallery__item-category {
 font-family: var(--font-body);
 font-size: 0.6rem;
 font-weight: 500;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--clr-gold);
 margin-bottom: 0.4rem;
 transform: translateY(8px);
 transition: transform var(--dur-slow) var(--ease-out-expo);
}
.gallery__item-title {
 font-family: var(--font-display);
 font-size: var(--fs-md);
 font-weight: 600;
 color: var(--clr-white);
 letter-spacing: -0.01em;
 transform: translateY(8px);
 transition: transform var(--dur-slow) var(--ease-out-expo) 0.05s;
}
.gallery__item:hover .gallery__item-category,
.gallery__item:hover .gallery__item-title {
 transform: translateY(0);
}
.gallery__item-icon {
 position: absolute;
 top: 1rem;
 right: 1rem;
 width: 36px;
 height: 36px;
 border: 1px solid rgba(255,255,255,0.4);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 opacity: 0;
 transform: scale(0.8);
 transition:
 opacity var(--dur-base) var(--ease-smooth),
 transform var(--dur-base) var(--ease-bounce);
}
.gallery__item:hover .gallery__item-icon {
 opacity: 1;
 transform: scale(1);
}
.gallery__item-icon svg {
 width: 16px;
 height: 16px;
 stroke: white;
 fill: none;
 stroke-width: 2;
 stroke-linecap: round;
}
.gallery__item.is-fading-out {
  opacity: 0;
  transform: scale(0.92);
}
.gallery__item.is-fading-in {
  opacity: 1;
  transform: scale(1);
}
.gallery__item.is-hidden {
  display: none;
}
.gallery__cta {
 display: flex;
 justify-content: center;
 margin-top: clamp(2.5rem, 5vw, 4rem);
}
.faq {
 background: var(--clr-gdk);
 padding-block: var(--section-py);
 position: relative;
 overflow: hidden;
}
.faq__eyebrow {
 font-family: var(--font-body);
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.22em;
 text-transform: uppercase;
 color: var(--clr-gold);
}
.faq__title {
 font-family: var(--font-display);
 font-size: clamp(1.8rem, 3.2vw, 2.6rem);
 font-weight: 800;
 line-height: 1.1;
 color: var(--clr-white);
 letter-spacing: -0.02em;
}
.faq__title .accent {
 color: var(--clr-gold);
}
.faq__subtitle {
 font-size: var(--fs-sm);
 font-weight: 300;
 line-height: 1.75;
 color: var(--clr-silver);
 text-wrap: pretty;
 max-width: 36ch;
}
.faq__cta {
 display: inline-flex;
 align-items: center;
 gap: 0.625rem;
 padding: 0.875rem 1.75rem;
 background: var(--clr-gold);
 color: var(--clr-black);
 font-family: var(--font-body);
 font-size: var(--fs-xs);
 font-weight: 700;
 letter-spacing: 0.15em;
 text-transform: uppercase;
 text-decoration: none;
 border: none;
 cursor: pointer;
 width: fit-content;
 transition:
 background var(--dur-base) var(--ease-smooth),
 color var(--dur-base) var(--ease-smooth),
 transform var(--dur-base) var(--ease-bounce);
}
.faq__cta:hover {
 background: var(--clr-gold-pale);
 transform: translateY(-2px);
}
.faq__cta-icon {
 width: 16px;
 height: 16px;
 stroke: currentColor;
 fill: none;
 stroke-width: 2;
 stroke-linecap: round;
 stroke-linejoin: round;
}
.faq__item {
 border-bottom: 1px solid rgba(255,255,255,0.08);
 overflow: hidden;
}
.faq__item:first-child {
 border-top: 1px solid rgba(255,255,255,0.08);
}
.faq__question {
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 1.5rem;
 padding: 1.25rem 0;
 background: none;
 border: none;
 cursor: pointer;
 text-align: left;
 transition: background var(--dur-fast) var(--ease-smooth);
}
.faq__question:hover {
 background: rgba(255,255,255,0.02);

}
.faq__question-text {
 font-family: var(--font-display);
 font-size: var(--fs-base);
 font-weight: 600;
 color: var(--clr-white);
 line-height: 1.4;
 transition: color var(--dur-base) var(--ease-smooth);
}
.faq__item.is-open .faq__question-text {
 color: var(--clr-gold-pale);
}
.faq__icon {
 flex-shrink: 0;
 width: 22px;
 height: 22px;
 position: relative;
 color: var(--clr-gold);
 transition: transform var(--dur-base) var(--ease-smooth);
}
.faq__icon::before,
.faq__icon::after {
 content: '';
 position: absolute;
 background: currentColor;
 border-radius: 2px;
 transition: transform var(--dur-base) var(--ease-smooth), opacity var(--dur-base);
}
.faq__icon::before {
 width: 100%;
 height: 1.5px;
 top: 50%;
 left: 0;
 transform: translateY(-50%);
}
.faq__icon::after {
 width: 1.5px;
 height: 100%;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
}
.faq__item.is-open .faq__icon::after {
 transform: translateX(-50%) rotate(90deg);
 opacity: 0;
}
.faq__answer {
 display: grid;
 grid-template-rows: 0fr;
 transition: grid-template-rows var(--dur-slow) var(--ease-out-expo);
}
.faq__item.is-open .faq__answer {
 grid-template-rows: 1fr;
}
.faq__answer-inner {
 overflow: hidden;
}
.faq__answer-text {
 padding-bottom: 1.25rem;
 font-size: var(--fs-sm);
 font-weight: 300;
 line-height: 1.75;
 color: var(--clr-silver);
 text-wrap: pretty;
 padding-right: 2rem;
}
.footer {
 background-color: var(--clr-black);
 border-top: 1px solid rgba(180, 140, 60, 0.12);
 padding-top: clamp(4rem, 8vw, 7rem);
}
.footer__grid {
 display: grid;
 grid-template-columns: 2fr 1fr 1fr 1.5fr;
 gap: clamp(2rem, 4vw, 4rem);
 padding-bottom: clamp(3rem, 6vw, 5rem);
}
.footer__brand {
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
}
.footer__logo {
 display: inline-flex;
 align-items: center;
 gap: 0.75rem;
 text-decoration: none;
}
.footer__logo-mark {
 width: 34px;
 height: 34px;
 flex-shrink: 0;
}
.footer__logo-text {
 display: flex;
 flex-direction: column;
 line-height: 1;
}
.footer__logo-name {
 font-family: var(--font-display);
 font-size: 1.1rem;
 font-weight: 600;
 letter-spacing: 0.05em;
 color: var(--clr-white);
}
.footer__logo-tagline {
 font-size: 0.58rem;
 font-weight: 400;
 letter-spacing: 0.2em;
 text-transform: uppercase;
 color: var(--clr-gold);
 margin-top: 2px;
}
.footer__brand-text {
 font-size: var(--fs-xs);
 font-weight: 300;
 color: var(--clr-muted);
 line-height: 1.75;
 max-width: 30ch;
 text-wrap: pretty;
}
.footer__social {
 display: flex;
 gap: 0.75rem;
 margin-top: 0.5rem;
}
.footer__social-link {
 width: 36px;
 height: 36px;
 border: 1px solid rgba(255,255,255,0.1);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--clr-muted);
 text-decoration: none;
 transition:
 border-color var(--dur-base) var(--ease-smooth),
 color var(--dur-base) var(--ease-smooth),
 background var(--dur-base) var(--ease-smooth);
}
.footer__social-link:hover {
 border-color: var(--clr-gold);
 color: var(--clr-gold);
 background: rgba(180,140,60,0.06);
}
.footer__social-link svg {
 width: 15px;
 height: 15px;
 fill: currentColor;
}
.footer__col-title {
 font-family: var(--font-body);
 font-size: var(--fs-xs);
 font-weight: 600;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: var(--clr-white);
 margin-bottom: 1.5rem;
 position: relative;
 padding-bottom: 0.75rem;
}
.footer__col-title::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 1.5rem;
 height: 1px;
 background: var(--clr-gold);
}
.footer__nav {
 display: flex;
 flex-direction: column;
 gap: 0.75rem;
}
.footer__nav-link {
 font-size: var(--fs-xs);
 font-weight: 300;
 color: var(--clr-muted);
 text-decoration: none;
 transition: color var(--dur-base) var(--ease-smooth), padding-left var(--dur-base) var(--ease-smooth);
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
}
.footer__nav-link::before {
 content: '–';
 color: var(--clr-gold);
 opacity: 0;
 transition: opacity var(--dur-base) var(--ease-smooth);
 font-size: 0.7rem;
}
.footer__nav-link:hover {
 color: var(--clr-light);
 padding-left: 0.4rem;
}
.footer__nav-link:hover::before {
 opacity: 1;
}
.footer__contact {
 display: flex;
 flex-direction: column;
 gap: 1rem;
}
.footer__contact-item {
 display: flex;
 align-items: flex-start;
 gap: 0.75rem;
}
.footer__contact-icon {
 width: 16px;
 height: 16px;
 stroke: var(--clr-gold);
 fill: none;
 stroke-width: 1.75;
 stroke-linecap: round;
 stroke-linejoin: round;
 flex-shrink: 0;
 margin-top: 2px;
}
.footer__contact-text {
 font-size: var(--fs-xs);
 font-weight: 300;
 color: var(--clr-muted);
 line-height: 1.6;
 text-decoration: none;
 transition: color var(--dur-base) var(--ease-smooth);
}
a.footer__contact-text:hover {
 color: var(--clr-gold);
}
.footer__bottom {
 border-top: 1px solid rgba(255,255,255,0.05);
 padding-block: 1.5rem;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 1rem;
}
.footer__copyright {
 font-size: var(--fs-xs);
 font-weight: 300;
 color: var(--clr-muted);
}
.footer__copyright span {
 color: var(--clr-gold);
}
.footer__legal {
 display: flex;
 gap: 1.5rem;
}
.footer__legal-link {
 font-size: var(--fs-xs);
 font-weight: 300;
 color: var(--clr-muted);
 text-decoration: none;
 transition: color var(--dur-base) var(--ease-smooth);
}
.footer__legal-link:hover {
 color: var(--clr-gold);
}
@media (max-width: 480px) {.hero__subtitle {
 font-size: var(--fs-base);}
.navbar__logo-tagline { display: none; }
.gallery__grid {
 grid-template-columns: 1fr;
 grid-auto-rows: 220px;
 }
.gallery__item--featured,
 .gallery__item--wide {
 grid-column: span 1;
 grid-row: span 1;
 }}
@media (max-width: 600px) {.hero__subtitle {
 font-size: 0.9rem;
 }
.footer__grid {
 grid-template-columns: 1fr;
 }
.footer__brand {
 grid-column: span 1;
 }
.footer__bottom {
 flex-direction: column;
 align-items: flex-start;
 }}
@media (max-width: 768px) {.hero__title {
 font-size: clamp(1.75rem, 7vw, 2.75rem);
 }
.hero__scroll-hint {
 display: none;
 }
.hero__actions {
 flex-direction: column;
 align-items: flex-start;
 }
.hero__actions .btn {
 width: 100%;
 justify-content: center;
 }
.testimonials__track {
 grid-template-columns: 1fr;
 }
.testimonials__controls {
 gap: 0.75rem;
 }
.testimonials__arrow {
 width: 38px;
 height: 38px;
 }
.gallery__grid {
 grid-template-columns: repeat(2, 1fr);
 grid-auto-rows: 200px;
 }
.gallery__item--featured {
 grid-column: span 2;
 grid-row: span 1;
 }
.footer__grid {
 grid-template-columns: 1fr;
 }}
@media (max-width: 1024px) {.navbar {
 height: 72px;
 }
.navbar__burger {
 display: flex;
 }
.navbar__actions {
 display: none;
 }
.navbar__menu {
 position: fixed;
 top: 0;
 right: 0;
 width: min(360px, 85vw);
 height: 100dvh;
 background: var(--clr-dark);
 border-left: 1px solid rgba(180, 150, 80, 0.15);
 flex-direction: column;
 justify-content: flex-start;
 align-items: flex-start;
 padding: 6rem 2rem 2rem;
 gap: 1.5rem;
 transform: translateX(100%);
 transition: transform var(--dur-slow) var(--ease-out-expo);
 overflow-y: auto;
 flex: unset;
 }
.navbar__menu.is-open {
 transform: translateX(0);
 }
.navbar__nav {
 width: 100%;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 0;
 }
.navbar__link {
 width: 100%;
 font-size: var(--fs-sm);
 padding: 1rem 0;
 border-bottom: 1px solid rgba(255,255,255,0.08);
 }
.navbar__menu .navbar__cta {
 display: flex;
 width: 100%;
 justify-content: center;
 margin-top: 1rem;
 }}

.ba__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ba__compare {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111110;
  --pos: 50%;
  user-select: none;
}
.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ba__before {
  position: absolute;
  inset: 0;
  z-index: 2;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba__label {
  position: absolute;
  bottom: 0.75rem;
  z-index: 3;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  background: rgba(10, 10, 9, 0.78);
  color: var(--clr-white);
  pointer-events: none;
}
.ba__label--before { left: 0.75rem; }
.ba__label--after { right: 0.75rem; }
.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--clr-gold);
  transform: translateX(-1px);
  z-index: 4;
  pointer-events: none;
}
.ba__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.ba__handle svg {
  width: 22px;
  height: 22px;
  stroke: #111110;
  stroke-width: 2;
  fill: none;
}
.ba__range {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  appearance: none;
  background: transparent;
}
.ba__range:focus-visible {
  outline: 2px solid var(--clr-gold);
  outline-offset: 2px;
  opacity: 0.001;
}
.ba__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.ba__cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
@media (max-width: 600px) {.ba__handle { width: 36px; height: 36px; }
.ba__handle svg { width: 18px; height: 18px; }} 

/* ==========================================================
   HERO SLIDESHOW v2.0.0
   Append to custom.css AFTER your existing .hero styles.
   Your original hero classes keep working; this only adds the slider layer.
   ========================================================== */

/* Background images: stacked and crossfaded under the overlay */
.hero_slider .hero__bg .hero_slide_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero_slider .hero__bg .hero_slide_bg.is_active {
  opacity: 1;
}

/* Text: all slides share one grid cell, so the hero height never jumps */
.hero_slides_text {
  display: grid;
  width: 100%;
}
.hero_slides_text > .hero_slide_text {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.hero_slides_text > .hero_slide_text.is_active {
  opacity: 1;
  visibility: visible;
  transform: none;
  /* Small delay so the new text enters after the old one leaves */
  transition: opacity .7s ease .35s, transform .7s ease .35s, visibility 0s;
}

/* Dots: thin vertical metal bars on the right (desktop) */
.hero_dots {
  position: absolute;
  z-index: 5;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero_dot {
  padding: 8px 12px;      /* Large tap target, thin visible bar */
  border: 0;
  background: none;
  cursor: pointer;
}
.hero_dot::before {
  content: "";
  display: block;
  width: 3px;
  height: 26px;
  background: rgba(255, 255, 255, .35);
  transition: height .3s ease, background .3s ease;
}
.hero_dot:hover::before { background: rgba(255, 255, 255, .7); }
.hero_dot[aria-current="true"]::before {
  height: 46px;
  background: #fff;
}
.hero_dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Mobile: horizontal bars at the bottom left, away from the scroll hint */
@media (max-width: 767px) {
  .hero_dots {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 4%;
    transform: none;
    flex-direction: row;
  }
  .hero_dot { padding: 12px 6px; }
  .hero_dot::before { width: 24px; height: 3px; transition: width .3s ease, background .3s ease; }
  .hero_dot[aria-current="true"]::before { width: 42px; height: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero_slider .hero__bg .hero_slide_bg,
  .hero_slides_text > .hero_slide_text,
  .hero_slides_text > .hero_slide_text.is_active {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   JOOMLA MENU (msg_nav)
   ============================================================ */

/* Desktop dropdown: two columns with subtle cell dividers */
@media (min-width: 992px) {
  .msg_nav__item > .msg_subnav:has(> .msg_subnav__item:nth-child(7)) {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 0;
    left: auto;
    right: 0;
    padding: 6px 0;
  }

  /* Safety net for short screens: the dropdown scrolls instead of being cut off */
  .msg_nav__item > .msg_subnav {
    max-height: calc(100vh - 140px);
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* Row dividers, tinted from the text color so they stay subtle */
  .msg_nav__item > .msg_subnav > .msg_subnav__item {
    border-bottom: 1px solid color-mix(in srgb, currentColor 9%, transparent);
    transition: background-color 0.2s;
  }

  .msg_nav__item > .msg_subnav > .msg_subnav__item:last-child {
    border-bottom: 0;
  }

  .msg_nav__item > .msg_subnav > .msg_subnav__item:hover {
    background-color: color-mix(in srgb, currentColor 4%, transparent);
  }

  /* Column divider on the left column items */
  .msg_nav__item > .msg_subnav:has(> .msg_subnav__item:nth-child(7)) > .msg_subnav__item:nth-child(odd) {
    border-right: 1px solid color-mix(in srgb, currentColor 9%, transparent);
  }

  /* No bottom line on the last row when the item count is even */
  .msg_nav__item > .msg_subnav:has(> .msg_subnav__item:nth-child(7)) > .msg_subnav__item:nth-child(odd):nth-last-child(2) {
    border-bottom: 0;
  }
}

/* Mobile menu panel: slide in from the right instead of the left */
@media (max-width: 991.98px) {
  .msg_panel {
    transform: translateX(100%);
  }
}

/* ============================================================
   HERO MOBILE FULL SCREEN (added in custom.css v2, content position updated in v3)
   Applies only to heroes that use a <picture> with a dedicated
   mobile image (service pages). Full screen hero, content pinned
   under the transparent header, wider title, and the image
   anchored to the bottom so the parts stay visible below the CTA.
   ============================================================ */
@media (max-width: 767.98px) {
  .hero:has(.hero__bg picture) {
    height: 100vh;   /* Fallback for older browsers */
    height: 100svh;  /* Matches the visible screen on mobile browsers */
    min-height: 600px;
    align-items: flex-start;
  }
  .hero:has(.hero__bg picture) .hero__bg-img {
    --hero-pos-m: center bottom;
  }
  /* Content sits right above the parts: images keep the parts in the bottom third */
  .hero:has(.hero__bg picture) .hero__content {
    justify-content: flex-end;
    height: 100%;
    padding-top: calc(var(--msg_header_height, 80px) + 1rem);
    padding-bottom: 34svh;
  }
  .hero:has(.hero__bg picture) .hero__eyebrow {
    margin-bottom: 1rem;
  }
  .hero:has(.hero__bg picture) .hero__title {
    max-width: none;
    font-size: clamp(1.85rem, 8vw, 2.75rem);
  }
  .hero:has(.hero__bg picture) .hero__subtitle {
    margin-top: 1rem;
    line-height: 1.6;
  }
  .hero:has(.hero__bg picture) .hero__actions {
    margin-top: 1.5rem;
  }
}

/* ============================================================
   Contact page v1.1.0 (hero now uses the shared page_hero)
   Compact hero, form layout, info cards, map loader and
   theming for the msgcontact module. Reuses the global tokens.
   ============================================================ */

/* Compact page hero (shared by Contact and About). Image bleeds in from the right and fades into the dark background. */
.page_hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: clamp(420px, 55vh, 540px);
  background: var(--surface);
  color: var(--text);
  padding-top: calc(var(--msg_header_height, 88px) + 2.5rem);
  padding-bottom: 3.5rem;
  border-bottom: var(--hairline) solid var(--border);
}
.page_hero_media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page_hero_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 75% center;
  opacity: 0.4;
}
.page_hero_media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--surface) 0%, transparent 40%),
    linear-gradient(180deg, rgba(10, 10, 9, 0.55) 0%, rgba(10, 10, 9, 0.35) 100%);
}
.page_hero_glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(40% 60% at 5% 100%, oklch(82% 0.12 68 / 0.06), transparent 70%);
}
.page_hero_inner {
  position: relative;
  z-index: 2;
  width: 100%;
}
.page_hero .head { max-width: 40rem; }
.page_hero .title { margin-top: 0.75rem; }
.page_hero .lead { margin-top: 1rem; max-width: 34rem; }
.page_hero_chips {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}
@media (min-width: 900px) {
  .page_hero_media { left: auto; width: 64%; }
  .page_hero_media img { opacity: 1; }
  .page_hero_media::after {
    background:
      linear-gradient(90deg, var(--surface) 0%, rgba(10, 10, 9, 0.75) 22%, rgba(10, 10, 9, 0.2) 55%, transparent 80%),
      linear-gradient(0deg, var(--surface) 0%, transparent 30%),
      linear-gradient(180deg, rgba(10, 10, 9, 0.5) 0%, transparent 35%);
  }
}

/* Form and details layout */
.contact_layout {
  display: grid;
  gap: var(--gap);
  align-items: start;
}
@media (min-width: 992px) {
  .contact_layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; }
  .contact_aside { position: sticky; top: calc(var(--msg_header_height, 88px) + 1.5rem); }
}
.contact_tips { margin-top: 0.75rem; }
.contact_form_card { padding: var(--pad-card); }
.contact_form_card .moduletable { margin: 0; }

/* Info cards */
.contact_info_card { position: relative; }
.contact_big_link {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.contact_big_link:hover { color: var(--accent); }
.contact_hours .list__item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.contact_small { font-size: var(--fs-xs); color: var(--text-soft); }

/* Open now badge, filled in by custom.js */
.contact_status {
  display: none;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--heading);
}
.contact_status.is_ready { display: inline-flex; }
.contact_status::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #b42318;
}
.contact_status.is_open::before {
  background: #12b76a;
  box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.18);
}

/* Click to load map */
.contact_map {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--raised);
}
.contact_map img { transition: transform var(--dur-slow) var(--ease-smooth); }
.contact_map:hover img { transform: scale(1.03); }
.contact_map_hint svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.contact_map_hint {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(10, 10, 9, 0.82);
  color: var(--clr-white);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.contact_map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact_map.is_loaded { cursor: default; }
.contact_cities { align-items: start; }

/* msgcontact module themed with the DMC tokens */
.contact_form_card .msgc {
  --msgc_text: var(--heading);
  --msgc_muted: var(--text-soft);
  --msgc_field_bg: var(--surface-light);
  --msgc_border: var(--border-strong);
  --msgc_focus: var(--clr-gold-dim);
  --msgc_accent: var(--clr-gold);
  --msgc_accent_text: var(--clr-black);
  --msgc_accent_hover: var(--clr-gold-pale);
  --msgc_font: var(--font-body);
  --msgc_radius: var(--radius-sm);
  --msgc_button_radius: var(--radius-sm);
  --msgc_focus_ring: 0 0 0 3px oklch(68% 0.18 68 / 0.25);
}
.contact_form_card .msgc_intro {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.contact_form_card .msgc_label { font-family: var(--font-display); color: var(--heading); }
.contact_form_card .msgc_submit {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   About page v1.0.0
   Stats strip, timeline, shop gallery and team placeholders
   ============================================================ */
.about_stats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.about_stat {
  display: grid;
  gap: 0.35rem;
  text-align: center;
  padding: var(--pad-card);
  border: var(--hairline) solid var(--border);
}
.about_stat .stat__value { color: var(--accent); }

/* Timeline */
.about_timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 2rem;
}
.about_timeline::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.45rem;
  width: 1px;
  background: var(--border-strong);
}
.about_timeline_item {
  position: relative;
  padding-left: 2.5rem;
  display: grid;
  gap: 0.35rem;
}
.about_timeline_item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
}
.about_timeline_year {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}
@media (min-width: 768px) {
  .about_timeline_item { grid-template-columns: 6rem 1fr; column-gap: 1.5rem; padding-left: 2.75rem; }
  .about_timeline_year { grid-row: span 2; padding-top: 0.15rem; }
}

/* Inside the shop gallery */
.about_shop_item { margin: 0; display: grid; gap: 0.75rem; }
.about_shop_item figcaption {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--heading);
}
.about_shop_item img { transition: transform var(--dur-slow) var(--ease-smooth); }
.about_shop_item:hover img { transform: scale(1.04); }

/* Team placeholders, remove once real photos are in */
.about_team_photo {
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  color: var(--text-soft);
  font-size: var(--fs-sm);
}
.about_team_card .card__badge { justify-self: start; }

.msg_footer { background: #0a0a09; color: #a8a8a0; border-top: 1px solid #2a2a27; }
.msg_footer .footer__brand { color: #f5f5f0; }
.msg_footer .footer__brand-text { color: #a8a8a0; }
.msg_footer .footer__col-title { color: #f5f5f0; }
.msg_footer .footer__col { color: #a8a8a0; }
.msg_footer a { color: #d4d4cc; text-decoration: none; transition: color 0.2s ease; }
.msg_footer a:hover, .msg_footer a:focus-visible { color: oklch(0.68 0.18 68); }
.msg_footer .footer__col svg, .msg_footer .footer__col i { color: oklch(0.68 0.18 68); fill: oklch(0.68 0.18 68); }
.msg_footer .footer__brand a { color: #d4d4cc; }
.msg_footer .footer__brand a:hover, .msg_footer .footer__brand a:focus-visible { color: oklch(0.68 0.18 68); }
.msg_footer__bottom { background: #0a0a09; color: #8a8a82; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.msg_footer__bottom .msg_copyright { color: #8a8a82; }
/* Light card for the contact form inside the dark CTA section */
#contact .scheme-light {
  display: block;
  background: var(--surface-light);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: 6px;
  border-top: 3px solid var(--clr-gold);
  box-shadow: var(--shadow-lift);
}

/* Submit button uses the site gold instead of the default blue */
#contact .scheme-light .msgf_submit {
  background: var(--btn-solid-bg);
  color: var(--btn-solid-ink);
}