/* ==========================================================================
   LORQEN — SHARED COMPONENT CORE
   --------------------------------------------------------------------------
   Identical in every theme that ships it. This file contains no design
   decisions: every colour, rule weight, radius, shadow, marker shape and
   plate treatment resolves through a token, so the same 900 lines render as
   a survey map, a travel docket, a spa, a coachbuilder's plate or a flight
   deck depending only on what tokens.css and signature.css say.

   Structure lives here. Identity lives in signature.css, which is loaded
   after this file and is free to override anything in it.
   ========================================================================== */


/* ==========================================================================
   HEADER
   ========================================================================== */

.header {
  /* Not sticky: it scrolls away with the page and never returns. */
  position: static;
  z-index: 100;
  background: var(--bg);
  border-bottom: var(--hair) solid var(--line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.header.is-stuck { box-shadow: 0 10px 30px -22px var(--shadow-c, rgba(0,0,0,0.5)); }
.header.is-hidden { transform: translateY(-100%); }

.header__inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  transition: height var(--dur) var(--ease);
}

.header.is-stuck .header__inner { height: var(--header-h-stuck); }

.brand { display: flex; align-items: center; flex: 0 0 auto; margin-right: auto; line-height: 1; }
.brand__logo { display: block; width: auto; height: 36px; transition: height var(--dur) var(--ease); }
.header.is-stuck .brand__logo { height: 28px; }

@media (max-width: 1279px) {
  .brand__logo { height: 31px; }
  .header.is-stuck .brand__logo { height: 25px; }
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: var(--ls-brand);
  text-indent: var(--ls-brand);
  text-transform: uppercase;
  color: var(--text);
}

.brand__tag {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- Navigation — a vine leaf marks the current page --------------------- */

.nav { display: none; }
@media (min-width: 1024px) { .nav { display: block; } }

.nav__list { display: flex; align-items: center; gap: clamp(1rem, 0.2rem + 1.3vw, 1.9rem); }

.nav__link {
  position: relative;
  display: block;
  padding: 0.6rem 0;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.1rem;
  width: var(--mark-w, 8px);
  height: var(--mark-h, 8px);
  margin-left: -6px;
  border-radius: var(--mark-radius, 0);
  background: var(--accent);
  transform: scale(0);
  transition: transform var(--dur) var(--ease-rule);
}

.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scale(1); }
.nav__link[aria-current="page"] { color: var(--accent); }

.header__actions { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }

.header__phone {
  display: none;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text);
  padding-right: var(--sp-4);
  border-right: var(--hair) solid var(--line);
  transition: color var(--dur-fast) var(--ease);
}

.header__phone:hover { color: var(--accent); }
.header__phone .icon-svg { width: 15px; height: 15px; color: var(--accent); }

@media (min-width: 640px) { .header__phone { display: flex; } }
@media (min-width: 1024px) and (max-width: 1279px) { .header__phone { display: none; } }

.header .header__cta { display: none; }
@media (min-width: 520px) { .header .header__cta { display: inline-flex; } }

.burger { position: relative; width: 40px; height: 40px; display: grid; place-items: center; gap: 5px; grid-auto-rows: 2px; }
@media (min-width: 1024px) { .burger { display: none; } }

.burger__bar {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.burger[aria-expanded="true"] .burger__bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; }
.progress__bar { height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; }

/* ==========================================================================
   MOBILE DRAWER — the canopy drawn over the page
   ========================================================================== */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--btn-fill);
  color: var(--btn-fill-text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + var(--sp-6)) var(--gutter) var(--sp-7);
  clip-path: circle(0% at calc(100% - 3rem) 3rem);
  visibility: hidden;
  transition: clip-path var(--dur-slow) var(--ease), visibility var(--dur-slow);
  overflow-y: auto;
}

.drawer.is-open { clip-path: circle(150% at calc(100% - 3rem) 3rem); visibility: visible; }
body.is-locked { overflow: hidden; }

.drawer__list { display: grid; }
.drawer__item { border-bottom: var(--hair) solid var(--line); }
.drawer__item:first-child { border-top: var(--hair) solid var(--line); }

.drawer__link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2rem);
  color: var(--btn-fill-text);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
  transition-delay: calc(var(--i, 0) * 38ms + 160ms);
}

.drawer.is-open .drawer__link { opacity: 1; transform: none; }

.drawer__link::before {
  content: "";
  flex: 0 0 auto;
  width: var(--mark-w, 8px);
  height: var(--mark-h, 8px);
  border-radius: var(--mark-radius, 0);
  background: var(--mark);
  opacity: 0.6;
}

.drawer__link:hover, .drawer__link[aria-current="page"] { color: var(--accent); }
.drawer__foot { display: grid; gap: var(--sp-3); padding-top: var(--sp-6); }

@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none; }
  .drawer__link { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   BUTTONS
   The primary button is vine green, not gold and not black — the single
   clearest signal that this theme belongs to a different place.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.92rem 1.9rem;
  border-radius: var(--radius);
  border: var(--btn-border-w, 1px) solid var(--line-strong);
  background: transparent;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.btn:hover { background: var(--btn-fill); color: var(--btn-fill-text); border-color: var(--btn-fill); }

.btn--primary { background: var(--btn-fill); color: var(--btn-fill-text); border-color: var(--btn-fill); }
.btn--primary:hover { background: var(--btn-fill-hover); border-color: var(--btn-fill-hover); color: var(--btn-fill-text); }

.btn--sm { padding: 0.78rem 1.3rem; font-size: 0.6875rem; border-width: var(--hair); }
.btn--full { width: 100%; }

/* ==========================================================================
   LINKS
   ========================================================================== */

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.3rem;
  border-bottom: var(--rule-w, 1px) solid var(--line-accent);
  transition: gap var(--dur) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.link:hover { gap: 1rem; color: var(--accent-hover); border-color: currentColor; }
.link__arrow { width: 14px; height: 14px; flex: 0 0 auto; }

.link--inline {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: inherit;
  gap: 0;
  border-bottom-width: var(--hair);
  padding-bottom: 0.05em;
}

.link--inline:hover { gap: 0; }
.icon-svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--sp-6);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
}

.breadcrumb li + li::before { content: "·"; margin-right: 0.55rem; color: var(--mark); }
.breadcrumb a:hover { color: var(--accent); }

/* ==========================================================================
   THE ARCH — image slots
   Every plate in this theme is a cellar-door opening: a full half-round at
   the top, square at the foot. With no photography supplied, the opening is
   filled with the ground's own contour lines and captioned underneath, so it
   reads as a view that has not been photographed yet rather than as a hole.
   ========================================================================== */

.media {
  position: relative;
  aspect-ratio: var(--plate-ratio, 4 / 3);
  border-radius: var(--radius);
  background-color: var(--surface-sunk);
  background-image: var(--plate-art, none);
  border: var(--plate-border-w, 1px) solid var(--line-accent);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--sp-5);
  overflow: hidden;
}

.media__hint {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  max-width: min(24ch, 100%);
  overflow-wrap: anywhere;
  line-height: 1.7;
  background: var(--bg);
  padding: 0.45rem 0.7rem;
  border-radius: var(--radius);
}

/* An inner rule struck inside the plate edge. */
.framed { position: relative; }

.framed::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: var(--hair) solid var(--line-accent);
  border-radius: var(--radius);
  pointer-events: none;
  z-index: 3;
  opacity: 0.8;
}

.zoom { position: relative; overflow: hidden; border-radius: var(--radius); }
.zoom > * { transition: transform var(--dur-slow) var(--ease-out); }
a:hover .zoom > *, .card:hover .zoom > * { transform: scale(1.04); }

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-5);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card:hover { transform: translateY(-3px); border-color: var(--line-accent); box-shadow: 0 22px 40px -30px var(--shadow-c, rgba(0,0,0,0.55)); }
.card > a { display: block; }
.card .media { aspect-ratio: var(--plate-ratio-card, 4 / 3); }
.card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: var(--sp-5); }

.card__icon { width: 26px; height: 26px; color: var(--accent); margin-bottom: var(--sp-4); }
.card__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); transition: color var(--dur-fast) var(--ease); }
.card:hover .card__title { color: var(--accent); }
.card__text { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.card__foot { margin-top: auto; }

.grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

.services-grid, .fleet-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .services-grid, .fleet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
  .fleet-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   SPLIT AND EDITORIAL
   ========================================================================== */

.split { display: grid; gap: var(--sp-7); align-items: center; grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.15fr; gap: clamp(2.5rem, 1rem + 5vw, 6rem); }
  .split--reverse > .split__media { order: 2; }
}

.split__media { position: relative; }
.split__media .media { aspect-ratio: 16 / 10; }

.editorial { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .editorial { grid-template-columns: 5fr 7fr; gap: clamp(2.5rem, 1rem + 4vw, 5rem); align-items: start; }
  .editorial--even { grid-template-columns: 1fr 1fr; }
  .editorial__aside { position: sticky; top: calc(var(--header-h-stuck) + 2.5rem); }
}

/* ==========================================================================
   PILLARS — rows on a trellis
   ========================================================================== */

/* One column-gap value, used for spacing instead of a border-left divider.
   The old system toggled border-left/padding-left per column via nth-child
   math that had to stay in sync across two breakpoints (2-col, then
   3-col) -- easy to get subtly wrong, which is exactly what made two of
   the six "Why LORQEN" blocks look different from the rest. Whitespace
   can't get that kind of bug: it's the same rule for every item, at
   every column count. */
.pillars { display: grid; gap: 0 var(--sp-7); grid-template-columns: 1fr; border-top: var(--rule-w, 1px) solid var(--line-accent); }
@media (min-width: 720px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .pillars--4 { grid-template-columns: repeat(4, 1fr); } }

.pillar { position: relative; padding: var(--sp-6) 0 var(--sp-7); border-bottom: var(--hair) solid var(--line); }

.pillar__num {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--sp-5);
  font-variant-numeric: oldstyle-nums;
}

.pillar__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.pillar__text { color: var(--text-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   STEPS
   ========================================================================== */

.steps { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px)  { .steps--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 760px)  { .steps--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .steps--4 { grid-template-columns: repeat(4, 1fr); } }

.step { position: relative; counter-increment: step; padding-top: var(--sp-5); border-top: var(--rule-w, 1px) solid var(--line-accent); }

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: var(--sp-5);
  font-variant-numeric: oldstyle-nums;
}

.step__title { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.step__text { color: var(--text-muted); font-size: var(--fs-sm); }

/* ==========================================================================
   STATISTICS
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat { padding: var(--sp-6) var(--sp-5); text-align: center; border-top: var(--hair) solid var(--line); border-left: var(--hair) solid var(--line); }

.stats > .stat:nth-child(2n + 1) { border-left: 0; }
@media (min-width: 900px) {
  .stats > .stat:nth-child(2n + 1) { border-left: var(--hair) solid var(--line); }
  .stats > .stat:first-child { border-left: 0; }
}

.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.4rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.stat__label {
  margin-top: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A wax seal on the corner of the plate. */
.stat-plate {
  position: absolute;
  right: -10px;
  bottom: var(--sp-6);
  z-index: 3;
  background: var(--btn-fill);
  color: var(--btn-fill-text);
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--radius);
  min-width: 9rem;
  text-align: center;
  box-shadow: 0 18px 34px -24px var(--shadow-c, rgba(0,0,0,0.7));
}

.stat-plate:empty { display: none; }
.stat-plate__value { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--accent); }

.stat-plate__label {
  margin-top: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 640px) { .stat-plate { position: static; margin-top: var(--sp-4); display: block; } }

/* ==========================================================================
   CHIPS, TICKS, CHECKLISTS
   ========================================================================== */

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.chip {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  border: var(--hair) solid var(--line-accent);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

button.chip { cursor: pointer; }
button.chip:hover, button.chip[aria-selected="true"] { background: var(--btn-fill); color: var(--btn-fill-text); border-color: var(--on-accent); }
.chip--wine { border-color: var(--line-accent); color: var(--accent); }

.ticks { display: grid; gap: var(--sp-3); }
.ticks li { position: relative; padding-left: 1.85rem; color: var(--text-muted); font-size: var(--fs-sm); }

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--mark-w, 8px);
  height: var(--mark-h, 8px);
  border-radius: var(--mark-radius, 0);
  background: var(--mark);
}

.ticks--lg li { font-size: var(--fs-body); }

.checklist { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }

.checklist li {
  position: relative;
  padding-left: 2rem;
  padding-bottom: var(--sp-4);
  border-bottom: var(--hair) solid var(--line-soft);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: var(--mark-w, 8px);
  height: var(--mark-h, 8px);
  border-radius: var(--mark-radius, 0);
  background: var(--mark);
}

/* ==========================================================================
   ACCORDION
   ========================================================================== */

.accordion { border-top: var(--rule-w, 1px) solid var(--line-accent); }
.accordion__item { border-bottom: var(--hair) solid var(--line); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--text);
  transition: color var(--dur-fast) var(--ease);
}

.accordion__trigger:hover, .accordion__trigger[aria-expanded="true"] { color: var(--accent); }

.accordion__icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 0.35em; }

.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur) var(--ease);
}

.accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.accordion__content { padding: 0 0 var(--sp-6); max-width: 62ch; color: var(--text-muted); font-size: var(--fs-sm); }
@media (min-width: 720px) { .accordion__content { padding-right: 4rem; } }

/* ==========================================================================
   QUOTES
   ========================================================================== */

.quotes { position: relative; text-align: center; }
.quote { margin: 0; display: none; }
.quote.is-active { display: block; }

.quote__stars { display: flex; justify-content: center; gap: 0.35rem; margin-bottom: var(--sp-5); color: var(--accent); }
.quote__stars .icon-svg { width: 14px; height: 14px; }

.quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.2rem);
  line-height: 1.44;
  color: var(--text);
  max-width: 30ch;
  margin-inline: auto;
  text-wrap: balance;
}

.quote__text::before { content: "“"; }
.quote__text::after  { content: "”"; }

.quote__author {
  margin-top: var(--sp-6);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
}

.quote__author::before {
  content: "";
  display: block;
  width: var(--mark-w, 8px);
  height: var(--mark-h, 8px);
  border-radius: var(--mark-radius, 0);
  background: var(--mark);
  margin: 0 auto var(--sp-4);
  opacity: 0.7;
}

.quote__source { display: block; }
.quotes__dots { display: flex; justify-content: center; gap: 0.7rem; margin-top: var(--sp-7); }

.quotes__dot {
  width: var(--mark-w, 8px);
  height: var(--mark-h, 8px);
  padding: 0;
  border-radius: var(--mark-radius, 0);
  background: var(--line-accent);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.quotes__dot[aria-selected="true"] { background: var(--accent); transform: scale(1.2); }

/* ==========================================================================
   RIBBON
   ========================================================================== */

.ribbon { overflow: hidden; padding-block: var(--sp-5); }
.ribbon__track { display: flex; gap: 3.5rem; width: max-content; animation: ribbon-run 46s linear infinite; }

.ribbon__item {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.ribbon__item::after { content: ""; width: 13px; height: 8px; border-radius: var(--mark-radius, 0); background: var(--mark); flex: 0 0 auto; }

@keyframes ribbon-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon__track { animation: none; } }

/* ==========================================================================
   CTA BAND
   ========================================================================== */

.cta-band { padding-block: clamp(4rem, 2rem + 7vw, 9rem); overflow: hidden; }
.cta-band__inner { text-align: center; position: relative; z-index: 2; }
.cta-band .display { margin-bottom: var(--sp-5); }
.cta-band .lead { margin-inline: auto; }
.cta-band .eyebrow { justify-content: center; }
.cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-7); }

@media (max-width: 480px) {
  .cta-band__actions { flex-direction: column; }
  .cta-band__actions .btn { width: 100%; }
}

/* ==========================================================================
   CALLOUT
   ========================================================================== */

.callout {
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-left: var(--rule-w-lg, 3px) solid var(--mark);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.callout__title { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.callout__text { color: var(--text-muted); max-width: var(--measure); }
.callout > * + * { margin-top: var(--sp-4); }

/* ==========================================================================
   FORMS
   ========================================================================== */

.form { position: relative; }

.form__required-note {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: var(--sp-5);
}

.form__fieldset { margin: 0 0 var(--sp-8); }

.form__legend {
  padding: 0 0 var(--sp-4);
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: var(--rule-w, 1px) solid var(--line-accent);
  margin-bottom: var(--sp-6);
}

.form__fields, .form__grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .form__fields, .form__grid { grid-template-columns: repeat(2, 1fr); }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }

.field__label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-muted);
}

.field__req { color: var(--mark); }

.field__control {
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--bg-raised);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}

textarea.field__control { min-height: 9rem; resize: vertical; font-family: var(--font-body); font-size: var(--fs-body); }

select.field__control {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.05rem center, right 0.7rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field__control::placeholder { color: var(--text-dim); }
.field__control:hover { border-color: var(--line-accent); }
.field__control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring, rgba(0,0,0,0.14)); }

.field__hint { font-family: var(--font-ui); font-size: var(--fs-label); color: var(--text-dim); }

.field--group { gap: var(--sp-4); border: var(--hair) solid var(--line); border-radius: var(--radius); padding: var(--sp-5); }

.field--group > legend {
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-muted);
}

.checks { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .checks { grid-template-columns: repeat(2, 1fr); } }

.check { display: flex; align-items: flex-start; gap: 0.7rem; font-size: var(--fs-sm); color: var(--text-muted); }
.check input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: 0.3rem; accent-color: var(--on-accent); }
.check label { cursor: pointer; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: var(--hair) solid var(--line); }
.form__privacy, .form__status { font-size: var(--fs-xs); color: var(--text-dim); max-width: 44ch; }
.form__privacy a { border-bottom: var(--hair) solid var(--line-accent); }

.field.has-error .field__control, .field--group.has-error { border-color: var(--error, #8C2F39); box-shadow: 0 0 0 3px var(--error-ring, rgba(160,40,55,0.16)); }
.field__error { font-family: var(--font-ui); font-size: var(--fs-label); font-weight: 700; color: var(--error, #8C2F39); }
.surface-dark .field__error, .cta-band .field__error, .footer .field__error { color: var(--error-light, #E8A0AB); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-9) var(--sp-6);
}

/* The bare LQ monogram, bled off the right edge as a watermark -- the
   plain mark itself (no ring, no disc, just the gold letterforms), the
   same artwork the header/footer brand lockup uses elsewhere on the site.
   --footer-mark-img is set by images-map.php via brand_asset(), auto-
   versioned the same as every other photo on the site; this rule is the
   fallback for the rare case that file is missing. The monogram's own
   canvas is ~1245x951 (not square), so the box follows that ratio rather
   than forcing a square crop -- background-size: contain still guarantees
   it is never stretched, only scaled. Low opacity is what keeps it a
   watermark rather than a second logo competing with the real one in
   .footer__top. */
/* It hangs off the CONTAINER, not the footer, so its right edge lands on
   the same line the region text ends on (the container's inner edge) at
   every width. Hung off the footer it was pinned to the viewport and bled
   past the text into the right margin. */
.footer > .container::before {
  content: "";
  position: absolute;
  top: 52%;
  right: var(--gutter);
  height: 330px;
  width: auto;
  aspect-ratio: 141 / 108;
  transform: translateY(-50%);
  background-image: var(--footer-mark-img, url("../../../../brand/final/monogram/lorqen-monogram-white.svg"));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  /* 4%, per the build spec. It was 14% and gold; above roughly 8% the mark
     stops being a watermark and starts competing with the footer type for
     the eye. White rather than gold because at this opacity a gold mark
     dirties the ground instead of lightening it. */
  opacity: 0.045;
  pointer-events: none;
  /* The container carries z-index: 1 and so opens a stacking context; -1
     puts the mark behind the footer's own text but still in front of the
     footer's ground. */
  z-index: -1;
}

@media (max-width: 767px) {
  /* Off the foot rather than the middle: on a phone the vertical centre of
     the footer is the middle of the link columns. */
  .footer > .container::before {
    top: auto;
    bottom: 64px;
    transform: none;
    height: 190px;
  }
}

.footer > .container { position: relative; z-index: 1; }

.footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4) var(--sp-6);
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-7);
  border-bottom: var(--hair) solid var(--line);
}

.footer__region {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--accent);
}

.footer__grid { display: grid; gap: var(--sp-7); grid-template-columns: 1fr; padding-bottom: var(--sp-8); }
@media (min-width: 640px)  { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-8); } }

.footer .brand { margin-right: 0; display: block; }
.footer .brand__logo--footer { height: 42px; width: auto; max-width: 60%; }
.footer .brand__name { color: var(--btn-fill-text); }
.footer .brand__tag { color: var(--text-dim); }
.footer p { color: var(--text-muted); font-size: var(--fs-sm); }

.footer__title {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: var(--hair) solid var(--line);
}

.footer__contact-line { margin-top: var(--sp-3); }
.footer__contact-line:first-of-type { margin-top: 0; }
.footer__contact-line a {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--pewter);
  transition: color var(--dur-fast) var(--ease);
}
.footer__contact-line a:hover { color: var(--accent); }

.footer__list { display: grid; gap: var(--sp-3); }
.footer__list a { font-size: var(--fs-sm); color: var(--text-muted); transition: color var(--dur-fast) var(--ease); }
.footer__list a:hover { color: var(--btn-fill-text); }
.footer__list li { color: var(--text-muted); font-size: var(--fs-sm); }

.footer__socials { display: flex; gap: 0.55rem; margin-top: var(--sp-6); }

.footer__social {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  border: var(--hair) solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.footer__social:hover { background: var(--mark); color: var(--on-accent); border-color: var(--accent); }

.footer__bottom {
  text-align: center;
  padding-top: var(--sp-5);
  border-top: var(--hair) solid var(--line);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ==========================================================================
   FLOATING ACTIONS
   ========================================================================== */

.whatsapp {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 90;
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--btn-fill);
  color: var(--btn-fill-text);
  border: var(--hair) solid var(--line-accent);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.whatsapp:hover { background: var(--mark); color: var(--on-accent); }
.whatsapp .icon-svg { width: 22px; height: 22px; }

@media (max-width: 767px) { .whatsapp { bottom: calc(var(--sp-5) + 64px); } }

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--btn-fill);
  border-top: var(--rule-w, 1px) solid var(--line-accent);
}

@media (min-width: 768px) { .callbar { display: none; } }

.callbar__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.15rem 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--btn-fill-text);
}

.callbar__action + .callbar__action { border-left: var(--hair) solid var(--line); }
.callbar__action .icon-svg { width: 15px; height: 15px; color: var(--accent); }
.callbar__action--gold { background: var(--mark); color: var(--on-accent); }
.callbar__action--gold .icon-svg { color: var(--on-accent); }

@media (max-width: 767px) { body { padding-bottom: 64px; } }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--overlay, rgba(12,12,12,0.94));
  display: none;
  place-items: center;
  padding: var(--gutter);
}

.lightbox.is-open { display: grid; }
.lightbox__frame { position: relative; max-width: 1000px; width: 100%; }
.lightbox__frame img { width: 100%; height: auto; border-radius: var(--radius); border: var(--rule-w, 1px) solid var(--line-accent); }

.lightbox__close, .lightbox__nav {
  position: absolute;
  color: var(--btn-fill-text);
  font-size: 1.5rem;
  line-height: 1;
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: var(--hair) solid var(--line);
  background: var(--overlay-2, rgba(12,12,12,0.75));
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.lightbox__close:hover, .lightbox__nav:hover { background: var(--mark); color: var(--on-accent); }
.lightbox__close { top: -3.6rem; right: 0; }
.lightbox__nav--prev { left: -3.6rem; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: -3.6rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 900px) { .lightbox__nav--prev { left: 0; } .lightbox__nav--next { right: 0; } }

.lightbox__caption {
  margin-top: var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-index);
  text-transform: uppercase;
  color: var(--text-dim);
  text-align: center;
}