/* ==========================================================================
   Evergreen Dream Home — Premium section components
   --------------------------------------------------------------------------
   The richer blocks the home page is built from. Everything here is plain
   CSS with no JavaScript dependency: if motion.js never runs, these sections
   still lay out and read exactly as designed — the motion layer only adds
   the entrances.

   New class names throughout (or a --lux modifier on an existing one), so
   nothing in style.css changes behaviour for the other sixteen pages. The
   modifiers deliberately keep the original element names — .pillar, .stat,
   .step, .acc — because motion.js hangs its bespoke timelines off those.

   Sections
     1.  Assurances strip        .creds
     2.  Pillar columns          .pillar--lux
     3.  Signature line          .sig
     4.  Service panels          .svc
     5.  Figures band            .stats--lux
     6.  Point-tier ladder       .tiers
     7.  Process cards           .steps--lux
     8.  Gallery header          .galhead / .gal--lux
     9.  Rating panel            .rating
     10. Numbered FAQ + ask card .acc--lux / .askcard
     11. Framed CTA              .cta--lux
     12. Site-wide polish        banner, icard, card, table, forms, filters…
     13. Stage spine             .spine  (our-process)
   ========================================================================== */

/* ---------- 1. Assurances strip ------------------------------------------
   A thin light band directly under the dark pillars section. Four things a
   client actually wants confirmed before they read any further, each one
   already promised elsewhere on the site. */
.creds {
  background: var(--sand);
  border-block: 1px solid var(--line);
  padding-block: clamp(26px, 3vw, 40px);
}
.creds__in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 34px);
}
@media (max-width: 900px) { .creds__in { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .creds__in { grid-template-columns: 1fr; } }
.cred {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 14px;
  align-items: start;
}
/* A hairline between the columns rather than four boxes — reads as one
   engraved band instead of a row of cards. */
.cred + .cred { padding-left: clamp(18px, 2.4vw, 34px); border-left: 1px solid var(--line); }
@media (max-width: 900px) {
  .cred:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
  .cred + .cred { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--line); }
}
.cred svg {
  grid-row: span 2; width: 30px; height: 30px; color: var(--gold-dk);
  padding: 0; margin-top: 3px;
}
.cred b {
  font-family: var(--f-sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--char);
  line-height: 1.35;
}
.cred span { font-size: .82rem; color: var(--muted); }

/* ---------- 2. Pillar columns -------------------------------------------
   Trust / Quality / Commitment. The boxed version in style.css becomes an
   open three-column plate divided by gold hairlines, with a struck numeral
   and a medallion that fills on hover. */
.pils {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; margin-top: clamp(6px, 1vw, 14px);
}
@media (max-width: 900px) { .pils { grid-template-columns: 1fr; } }

.pillar--lux {
  position: relative; background: none; border: 0;
  padding: clamp(28px, 3vw, 44px) clamp(22px, 2.6vw, 40px);
  text-align: center;
  transition: background var(--t);
}
.pillar--lux + .pillar--lux { border-left: 1px solid var(--line-dark); }
@media (max-width: 900px) {
  .pillar--lux + .pillar--lux { border-left: 0; border-top: 1px solid var(--line-dark); }
}
.pillar--lux:hover { background: rgba(213, 168, 63, .045); }

/* Solid rather than outlined: a 1px stroke on type this small reads as fuzz. */
.pillar__no {
  display: block; font-family: var(--f-display); font-weight: 700;
  font-size: .92rem; letter-spacing: .34em; line-height: 1;
  color: rgba(213, 168, 63, .6); margin-bottom: 1.5rem;
}
/* Double ring: a wide outer hairline and the medallion inside it. */
.pillar--lux .pillar__ico {
  position: relative; width: 78px; height: 78px; margin: 0 auto 1.5rem;
  border-color: rgba(213, 168, 63, .5);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.pillar--lux .pillar__ico::after {
  content: ""; position: absolute; inset: -9px;
  border: 1px solid rgba(213, 168, 63, .18); border-radius: 50%;
  transition: inset var(--t), border-color var(--t);
}
.pillar--lux:hover .pillar__ico {
  background: var(--gold-sheen); color: var(--ink); border-color: transparent;
}
.pillar--lux:hover .pillar__ico::after { inset: -14px; border-color: rgba(213, 168, 63, .4); }
.pillar--lux .pillar__ico svg { width: 30px; height: 30px; }

.pillar--lux h3 { font-size: 1rem; letter-spacing: .26em; margin-bottom: 1rem; }
.pillar--lux h3::after {
  content: ""; display: block; width: 26px; height: 1px; margin: 1rem auto 0;
  background: var(--gold); transition: width var(--t);
}
.pillar--lux:hover h3::after { width: 64px; }
.pillar--lux p { font-size: .95rem; }

/* ---------- 3. Signature line ------------------------------------------- */
.sig {
  display: flex; align-items: center; gap: 1em; margin-top: 2.2rem;
  font-family: var(--f-serif); font-size: 1.12rem; font-style: italic;
  color: var(--char);
}
.sig::before { content: ""; width: clamp(24px, 4vw, 54px); height: 1px; background: var(--gold); flex: none; }
.sig span {
  font-family: var(--f-sans); font-style: normal; font-size: .74rem;
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 620px) { .sig { flex-wrap: wrap; gap: .5em 1em; } }

/* ---------- 4. Service panels -------------------------------------------
   The two ways we build. A photograph with the index and audience burnt into
   it, then a paper panel whose gold top rule draws across on hover. */
.svcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 2.8vw, 38px); }
@media (max-width: 860px) { .svcs { grid-template-columns: 1fr; } }

.svc {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.svc:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: rgba(213, 168, 63, .45); }

.svc__media {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; background: var(--sand);
}
.svc__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(var(--sz, 1.04)); transition: transform 1s var(--ease);
}
.svc:hover .svc__media img { --sz: 1.12; }
.svc__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 8, .78), rgba(8, 9, 8, .12) 46%, transparent 72%);
}
.svc__no {
  position: absolute; top: 18px; left: 22px; z-index: 2;
  font-family: var(--f-display); font-weight: 700; font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .55);
}
.svc__kick {
  position: absolute; bottom: 20px; left: 22px; right: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: .8em;
  font-size: .7rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-lt);
}
.svc__kick::before { content: ""; width: 28px; height: 1px; background: var(--gold); flex: none; }

.svc__body {
  position: relative; flex: 1; display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 40px);
}
/* the rule that draws across the top of the panel on hover */
.svc__body::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--gold-sheen); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--ease);
}
.svc:hover .svc__body::before { transform: none; }
.svc__body h3 { margin-bottom: .8rem; }
.svc__body .ticks { margin-top: 1.5rem; }
.svc__body .ticks li { font-size: .92rem; }

.svc__go {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4em;
  margin-top: auto; padding-top: 1.8rem;
  font-size: .76rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--char); transition: color var(--t);
}
.svc__go i {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--gold-dk);
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
}
.svc__go svg { width: 15px; height: 15px; }
.svc:hover .svc__go { color: var(--gold-dk); }
.svc:hover .svc__go i { background: var(--gold-sheen); border-color: var(--gold); color: var(--ink); transform: translateX(4px); }

/* ---------- 5. Figures band ---------------------------------------------
   Same .stat mark-up (so the counters in motion.js still find it), rebuilt
   as an engraved row: gold hairline dividers, sheen numerals, a caption
   under each label. */
.stats--lux { background: var(--line-dark); border-block: 1px solid rgba(213, 168, 63, .3); }
.stats--lux .stat { background: var(--ink); position: relative; }
.stats--lux .stat::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 46px; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
/* inline-block so the sheen gradient is measured across the digits rather
   than across the full width of the cell */
.stats--lux .stat__n {
  display: inline-block;
  background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-size: clamp(2.5rem, 5vw, 3.9rem);
}
.stats--lux .stat__l { letter-spacing: .22em; color: rgba(255, 255, 255, .72); }
.stat__s {
  display: block; margin-top: .5rem; font-size: .74rem;
  color: rgba(255, 255, 255, .38); letter-spacing: .04em;
}

/* ---------- 6. Point-tier ladder ----------------------------------------
   The MLI Select amortisation ladder, straight off the table on the
   cmhc-mli-select page. Bar widths are proportional to the years, and the
   caveat travels with it. */
.tiers {
  margin-top: 20px; padding: clamp(20px, 2.4vw, 28px);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-dark);
}
.tiers__h {
  font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.2rem;
}
.tier { display: grid; grid-template-columns: 74px 1fr auto; gap: 14px; align-items: center; }
.tier + .tier { margin-top: 14px; }
.tier > b {
  font-family: var(--f-sans); font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums;
}
.tier i { display: block; height: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.tier i b {
  display: block; height: 100%; width: var(--w, 100%);
  background: linear-gradient(90deg, var(--gold-dk), var(--gold) 70%, var(--gold-lt));
  transform-origin: left;
}
.tier > span {
  font-family: var(--f-serif); font-size: 1.02rem; font-weight: 600; color: #fff;
  min-width: 62px; text-align: right;
}
.tier--top i b { box-shadow: 0 0 18px rgba(213, 168, 63, .5); }
.tier--top > span { color: var(--gold-lt); }
.tiers__f { margin-top: 1.2rem; font-size: .76rem; color: rgba(255, 255, 255, .42); }

/* ---------- 7. Process cards --------------------------------------------
   The four stages, still a .steps row with the hairline motion.js draws
   across it, but each stage now sits in its own plate with the numeral
   straddling the line and the real duration attached. */
/* The hairline motion.js draws sits clear above the plates rather than
   through them — no alignment maths, and it stays visible while the cards
   carry their own background. */
.steps--lux { padding-top: 28px; }
.steps--lux .steps__rail { top: 0; }
.steps--lux .step {
  padding: 46px clamp(20px, 2vw, 26px) clamp(22px, 2.4vw, 28px);
  background: var(--paper); border: 1px solid var(--line);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.steps--lux .step:hover { transform: translateY(-5px); box-shadow: var(--sh-2); border-color: rgba(213, 168, 63, .45); }
.steps--lux .step::before {
  left: clamp(20px, 2vw, 26px); top: -1px;
  background: var(--gold-sheen); border: 1px solid var(--gold-dk);
  font-size: 1rem; padding: .5em .9em;
}
/* style.css draws a rule through each step — the plate replaces it */
.steps--lux .step::after { display: none; }
.step__when {
  display: inline-flex; align-items: center; gap: .6em; margin-bottom: .9rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-dk);
}
.step__when::before { content: ""; width: 16px; height: 1px; background: var(--gold); flex: none; }
.steps--lux .step h3 { margin-bottom: .5rem; }
/* ghost numeral in the corner of the plate */
.steps--lux .step > .step__ix {
  position: absolute; right: 14px; bottom: 6px;
  font-family: var(--f-display); font-weight: 700; font-size: 3.4rem; line-height: 1;
  color: rgba(18, 17, 16, .05); pointer-events: none; user-select: none;
}

/* ---------- 8. Gallery header ------------------------------------------- */
.galhead {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 12px 24px; margin-bottom: 18px;
  border-top: 1px solid var(--line); padding-top: 16px;
}
.galhead p {
  font-size: .74rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.galhead p b { color: var(--gold-dk); }
.gal--lux .gal__item { outline: 1px solid var(--line); outline-offset: -1px; }
.gal--lux .gal__item::before {
  content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none;
  border: 1px solid rgba(246, 230, 180, .55); opacity: 0; transform: scale(1.04);
  transition: opacity var(--t), transform var(--t);
}
.gal--lux .gal__item:hover::before { opacity: 1; transform: none; }

/* ---------- 9. Rating panel --------------------------------------------- */
.rating {
  display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 38px);
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 3vw, 38px);
  margin-bottom: clamp(26px, 3vw, 40px);
  border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .03);
}
.rating__n {
  font-family: var(--f-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.2rem, 4vw, 3rem);
  background: var(--gold-sheen); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rating__stars { display: flex; gap: 4px; color: var(--gold); margin-top: .6rem; }
.rating__stars svg { width: 14px; height: 14px; }
.rating__rule { width: 1px; align-self: stretch; background: var(--line-dark); flex: none; }
.rating p { font-size: .92rem; max-width: 34ch; }
.rating p b { color: #fff; font-weight: 600; }
/* on a light section (testimonials page) */
.rating--light { border-color: var(--line); background: var(--paper); box-shadow: var(--sh-1); }
.rating--light .rating__rule { background: var(--line); }
.rating--light p b { color: var(--char); }
@media (max-width: 620px) {
  .rating { flex-direction: column; text-align: center; }
  .rating__rule { width: 60px; height: 1px; align-self: center; }
  .rating__stars { justify-content: center; }
}

/* Initials medallion on every testimonial. Written as a descendant of
   figcaption because style.css already styles `.quote figcaption span`, which
   would otherwise out-specify this and flatten the disc. */
.quote figcaption .quote__av {
  width: 54px; height: 54px; margin: 0 auto .9rem;
  display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 50%;
  font-family: var(--f-display); font-size: .84rem; font-weight: 700;
  letter-spacing: .1em; color: var(--gold);
}
.quote--light figcaption .quote__av { border-color: rgba(143, 106, 28, .45); color: var(--gold-dk); }

/* ---------- 10. Numbered FAQ + ask card --------------------------------- */
.acc--lux { counter-reset: q; border-top-color: var(--line); }
.acc--lux .acc__btn { gap: 16px; align-items: flex-start; }
.acc--lux .acc__btn > span:first-child { display: flex; gap: .9em; }
.acc--lux .acc__btn > span:first-child::before {
  counter-increment: q; content: "0" counter(q);
  font-family: var(--f-display); font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; color: var(--gold-dk); flex: none; padding-top: .4em;
}
.acc--lux .acc__panel p { padding-left: calc(.9em + 2.1ch); }
.acc--lux .acc__item.is-open { background: linear-gradient(90deg, rgba(213, 168, 63, .07), transparent 60%); }

.askcard {
  margin-top: 2.2rem; padding: clamp(24px, 2.8vw, 34px);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--sh-1);
  position: relative;
}
.askcard::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gold-sheen);
}
.askcard p { font-size: .94rem; }
/* needs the extra class to out-specify `.askcard p` above */
.askcard .askcard__h {
  font-family: var(--f-serif); font-size: 1.3rem; font-weight: 600;
  color: var(--char); margin-bottom: .6rem;
}
.askcard .btn { margin-top: 1.4rem; width: 100%; }
.askcard__tel {
  display: flex; align-items: center; justify-content: center; gap: .6em; margin-top: 1rem;
  font-size: .84rem; font-weight: 600; letter-spacing: .1em; color: var(--gold-dk);
  transition: color var(--t);
}
.askcard__tel svg { width: 15px; height: 15px; }
.askcard__tel:hover { color: var(--char); }

/* ---------- 11. Framed CTA ---------------------------------------------- */
/* An inset gold hairline, so the closing band reads as a plate rather than a
   photograph with type on it. */
.cta--lux .shell { position: relative; padding-block: clamp(28px, 4vw, 52px); }
.cta--lux .shell::before {
  content: ""; position: absolute; inset: 0 clamp(0px, 2vw, 40px); pointer-events: none;
  border: 1px solid rgba(213, 168, 63, .34);
}
/* style.css already targets `.cta p`, so this needs the extra class to win */
.cta .cta__or {
  display: inline-flex; align-items: center; gap: .9em; margin: 1.9rem auto 0; max-width: none;
  font-size: .74rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.cta .cta__or::before, .cta .cta__or::after {
  content: ""; width: 34px; height: 1px; background: rgba(255, 255, 255, .22); flex: none;
}
.cta__or a { color: var(--gold-lt); border-bottom: 1px solid rgba(246, 230, 180, .35); }
.cta__or a:hover { color: #fff; border-color: #fff; }

/* ==========================================================================
   12. Site-wide polish
   --------------------------------------------------------------------------
   These rules re-dress components style.css already defines, so every one of
   the sixteen interior pages inherits the home page's finish without a single
   mark-up change. Nothing here alters layout — only surface: hairlines,
   medallions, sheen and hover behaviour. sections.css loads after style.css,
   so equal-specificity rules win on cascade order.
   ========================================================================== */

/* ---------- page banner ----------
   The interior-page hero. Adds the header's own signature — a gold hairline
   that fades at both ends — plus a warm wash in the top-right dead space, so
   the photograph reads as lit rather than simply darkened. */
.banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(213, 168, 63, .5) 26%, rgba(246, 230, 180, .78) 50%, rgba(213, 168, 63, .5) 74%, transparent) bottom / 100% 1px no-repeat,
    radial-gradient(58% 66% at 88% 8%, rgba(213, 168, 63, .16), transparent 72%);
}
/* a struck rule under the page title */
.banner h1::after {
  content: ""; display: block; height: 1px; margin-top: 1.5rem;
  width: clamp(46px, 7vw, 92px); background: var(--gold-sheen);
}
.crumbs { letter-spacing: .16em; }
.crumbs [aria-current] { font-weight: 600; }

/* ---------- icon feature card ----------
   Used on eleven pages, so this is the single biggest lift available. The
   medallion gains a second ring and fills with polished metal; the rule along
   the bottom edge becomes the same sheen as the buttons. */
.icard::before { height: 2px; background: var(--gold-sheen); }
.icard:hover { box-shadow: var(--sh-2), inset 0 0 0 1px rgba(213, 168, 63, .2); }
.icard__ico {
  position: relative; width: 62px; height: 62px;
  border-color: rgba(213, 168, 63, .4);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.icard__ico::after {
  content: ""; position: absolute; inset: -8px;
  border: 1px solid rgba(213, 168, 63, .16); border-radius: 50%;
  transition: inset var(--t), border-color var(--t);
}
.icard:hover .icard__ico {
  background: var(--gold-sheen); color: var(--ink); border-color: transparent;
}
.icard:hover .icard__ico::after { inset: -13px; border-color: rgba(213, 168, 63, .38); }
.icard--dark .icard__ico::after { border-color: rgba(213, 168, 63, .22); }
/* the ghost numeral goes warm instead of grey */
.icard--num::after { color: rgba(213, 168, 63, .13); font-size: 4.8rem; }
.icard--dark.icard--num::after { color: rgba(213, 168, 63, .12); }

/* ---------- project / inventory card ----------
   The same sheen rule as the service panels, a scrim that deepens on hover,
   and a corner tick — so a grid of cards reads as a set of plates. */
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 3;
  background: var(--gold-sheen); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.card:hover::before { transform: none; }
.card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 9, 8, .45), transparent 58%);
  opacity: 0; transition: opacity var(--t);
}
.card:hover .card__media::after { opacity: 1; }
.card__tag {
  border: 1px solid rgba(213, 168, 63, .35); letter-spacing: .18em;
  backdrop-filter: blur(3px);
}
.card__tag--gold { background: var(--gold-sheen); border-color: var(--gold-dk); }
/* This sheet loads last, so the sold badge has to restate its colours here or
   the gold border above it would still ring a deep-red chip. */
.card__tag--sold { background: #7d2b28; color: #fff; border-color: #93393540; }
.card__price { letter-spacing: .01em; }
.card__price::before {
  content: ""; display: block; width: 22px; height: 1px;
  background: var(--gold); margin-bottom: .6rem;
}

/* ---------- long-form project rows ----------
   .deflist is the spec sheet under each project. Each row lights up as the
   pointer crosses it, which makes a long table legible to skim. */
.deflist > div { transition: background var(--t); }
.deflist > div:hover { background: rgba(213, 168, 63, .05); }
.deflist dt { display: flex; align-items: center; gap: .7em; }
.deflist dt::before { content: ""; width: 10px; height: 1px; background: var(--gold); flex: none; }
@media (max-width: 620px) { .deflist dt::before { display: none; } }
/* outlined index numeral on each project row — written by Blocks.projectRows */
.row__ix {
  display: block; font-family: var(--f-display); font-weight: 700; line-height: 1;
  font-size: clamp(2.4rem, 4.4vw, 3.6rem); margin-bottom: .6rem;
  color: transparent; -webkit-text-stroke: 1px rgba(213, 168, 63, .42);
}

/* ---------- data table ---------- */
.tablewrap { border-top: 2px solid var(--gold-dk); }
.table caption { letter-spacing: .2em; }
.table tbody tr { transition: background var(--t); }
.table tbody tr:hover { background: rgba(213, 168, 63, .07); }
.table tbody th { position: relative; padding-left: 26px; }
.table tbody th::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1px;
  background: var(--gold); transform: translateY(-50%) scaleX(0); transform-origin: left;
  transition: transform var(--t);
}
.table tbody tr:hover th::before { transform: translateY(-50%); }

/* ---------- form panel ---------- */
.form-panel { position: relative; }
.form-panel::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--gold-sheen);
}
.form-panel::after {
  content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 26px;
  border-top: 1px solid rgba(213, 168, 63, .5);
  border-right: 1px solid rgba(213, 168, 63, .5);
}
/* Inline rather than flex: these labels carry a trailing required marker, and
   a flex gap would strand the asterisk away from the word. */
.field > label:not(.check)::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 8px; height: 1px; background: var(--gold); margin-right: .7em;
}
.stepbar__i.is-now { position: relative; }
.stepbar__i.is-now::before {
  content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 3px;
  background: var(--gold-sheen);
}

/* ---------- contact tiles ---------- */
.infoblock { position: relative; overflow: hidden; }
.infoblock::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--gold-sheen); transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease);
}
.infoblock:hover::before { transform: none; }
.infoblock__ico {
  border: 1px solid rgba(213, 168, 63, .35);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.infoblock:hover .infoblock__ico { background: var(--gold-sheen); color: var(--ink); border-color: transparent; }

/* ---------- filters ---------- */
.filters button { border-radius: 100px; padding-inline: 1.65em; }
.filters button:hover { border-color: var(--gold-dk); color: var(--gold-dk); }
.filters button[aria-pressed="true"] {
  background: var(--gold-sheen); border-color: var(--gold-dk); color: var(--ink);
}

/* ---------- map ---------- */
.mapwrap { border-top: 2px solid var(--gold-dk); }
.mapwrap::before, .mapwrap::after {
  content: ""; position: absolute; width: 26px; height: 26px; z-index: 2; pointer-events: none;
}
.mapwrap::before { top: 10px; left: 10px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.mapwrap::after { bottom: 10px; right: 10px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

/* ---------- paired photography ---------- */
.duo img { box-shadow: var(--sh-2); }

/* ---------- static testimonial grid ----------
   The oversized glyph gives a wall of quotes some hierarchy without changing
   any of the type. */
.quote--light { position: relative; overflow: hidden; }
.quote--light::before {
  content: "\201C"; position: absolute; top: -.06em; right: .16em;
  font-family: var(--f-serif); font-size: 9rem; line-height: 1;
  color: rgba(213, 168, 63, .11); pointer-events: none;
}
.quote--light blockquote::before, .quote--light blockquote::after { color: var(--gold-dk); }

/* ---------- empty state ---------- */
.empty { border-color: rgba(213, 168, 63, .35); }

/* ==========================================================================
   13. Stage spine
   --------------------------------------------------------------------------
   The scroll-linked chapter marker on our-process.html. Fixed to the left
   edge, one node per stage; motion.js fills the line and lights the nodes
   from the scroll position, and each node scrolls to its stage. Hidden below
   1200px, where there is no room for it beside the content — and it is a
   navigation convenience, never the only way to reach a stage.
   ========================================================================== */
.spine {
  position: fixed; left: 26px; top: 50%; transform: translateY(-50%); z-index: 100;
  display: none; grid-auto-flow: row; gap: 22px; align-items: start;
}
@media (min-width: 1200px) { .spine { display: grid; } }
@media (prefers-reduced-motion: reduce) { .spine { display: none; } }
/* With motion on, motion.js fades it in once the first stage arrives — hold
   it back until then rather than letting it flash in at the top of the page. */
html.motion .spine { opacity: 0; visibility: hidden; }
.spine::before {
  content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: rgba(18, 21, 20, .14);
}
.spine__fill {
  position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--gold-dk), var(--gold) 60%, var(--gold-lt));
  transform: scaleY(var(--sp, 0)); transform-origin: top;
}
.spine a {
  position: relative; display: flex; align-items: center; gap: 14px;
  font-size: .66rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); transition: color var(--t);
}
.spine a::before {
  content: ""; width: 11px; height: 11px; flex: none; border-radius: 50%;
  background: var(--paper); border: 1px solid rgba(18, 21, 20, .22);
  transition: background var(--t), border-color var(--t), transform var(--t);
}
.spine a span {
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--t), transform var(--t);
}
.spine:hover a span, .spine a.is-on span { opacity: 1; transform: none; }
.spine a.is-on { color: var(--gold-dk); }
.spine a.is-on::before { background: var(--gold-sheen); border-color: var(--gold-dk); transform: scale(1.25); }
.spine a:hover { color: var(--char); }