/* ==========================================================================
   CONTACT PAGE  +  the shared page-title band
   Reference: contact.html, DOM read at 1920.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .arc-chero — the page-title band. Named for what it IS, not the page it
   debuts on: 404, Thank You, Privacy and Terms all reuse it with modifiers.
   Reference @1920: full-bleed, position relative, min-height 500, contents
   vertically centred, h 500.0. contact.jpg cover behind two scrims. Content
   capped 1480, padding 150/64/64; first column 500 wide.
   -------------------------------------------------------------------------- */
.arc-chero.e-con {
  position: relative; overflow: hidden;
  min-height: 500px; padding: 0; gap: 0 !important;
  justify-content: center;          /* column container: this is the VERTICAL axis */
  align-items: stretch !important;  /* ...and this is the horizontal one */
  background: var(--surface-inverse);
}
/* Photo. Elementor's .elementor img{height:auto;max-width:100%} is (0,1,1) and beats a
   plain class, so height/width/max-width all need !important here. */
.arc-chero .arc-chero-img.elementor-widget {
  position: absolute; inset: 0; width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; z-index: 0; line-height: 0;
}
.arc-chero .arc-chero-img .elementor-widget-container,
.arc-chero .arc-chero-img figure,
.arc-chero .arc-chero-img .elementor-image { height: 100%; }
.arc-chero .arc-chero-img img {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; object-position: 50% 50%; display: block;
}
/* TWO scrims, as TWO layers — the reference's own structure (an inset:0 div for the left
   wash, plus a separate 240px-tall div for the top wash), not a single pseudo-element with a
   three-layer background list. The one-element re-expression computed to exactly the same
   gradients and background-sizes, yet rendered the whole band near-black instead of revealing
   the house from the middle rightwards. Proven by toggling: with ::after disabled the photo is
   correct and bright; with the three-layer version it is flat dark; with this structure it
   matches the reference. Reproduce the mechanism, not a re-expression of it. */
/* ⚠️ content: "" — the quotes are load-bearing and were once lost to shell escaping.
   A node -e one-liner wrote  content: \;  here. That is an INVALID declaration, and CSS error
   recovery discards everything up to the next UNESCAPED semicolon — so it silently took
   "position: absolute" with it. Both scrims stopped generating entirely: no dark overlay on
   the contact hero, the 404, thank-you, privacy or terms bands, with white text sitting on a
   bright photograph. Nothing errored, and the rule still LOOKED present in devtools because
   background-image and z-index survived. Edit this file directly or from a script FILE, never
   from an inline -e string. */
.arc-chero.e-con::after {
  content: ""; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(90deg, rgba(18, 17, 16, 0.8) 0%, rgba(18, 17, 16, 0.48) 60%, rgba(18, 17, 16, 0.22) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* the top wash, confined to the first 240px exactly as the reference's second div is */
.arc-chero .arc-chero-img::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 240px; z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(12, 13, 15, 0.5) 0%, rgba(12, 13, 15, 0) 32%);
}
.arc-chero > .e-con {
  position: relative; z-index: 2;
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 150px var(--gutter) 64px;
  gap: 0 !important; align-items: stretch !important;
}
/* The reference column has no width of its own — it is sized by the lead paragraph's
   max-width:500. Reproduce the mechanism, not the measured number, or it stays 500 at 390. */
.arc-chero .arc-chero-col.e-con {
  width: auto !important; max-width: 500px !important;
  padding: 0 !important; gap: 0 !important; align-items: stretch !important;
}
.arc-chero .arc-chero-crumbs.elementor-widget { margin: 0 0 18px !important; line-height: 0; }
.arc-chero-h1.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: clamp(2.6rem, 6vw, 3.8rem); line-height: 1.05; letter-spacing: -0.01em;
  color: #fff !important; margin: 0;
}
.arc-chero-lead p {
  font-family: var(--font-sans); font-weight: 300; font-size: 1.05rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.85); margin: 20px 0 0; max-width: 500px;
}
/* --- breadcrumbs ---------------------------------------------------------- */
.arc-crumbs { display: flex; align-items: center; gap: 8px; line-height: 15px; }
.arc-crumbs__link, .arc-crumbs__current {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 400;
  line-height: 15px; letter-spacing: normal; text-decoration: none;
}
.arc-crumbs--dark .arc-crumbs__link { color: rgba(255, 255, 255, 0.8) !important; }
.arc-crumbs--dark .arc-crumbs__current { color: #fff; }
.arc-crumbs--light .arc-crumbs__link { color: var(--text-secondary) !important; }
.arc-crumbs--light .arc-crumbs__current { color: var(--text-primary); }
.arc-crumbs__link:hover { color: #fff !important; }
.arc-crumbs--light .arc-crumbs__link:hover { color: var(--text-primary) !important; }
.arc-crumbs__sep {
  flex: 0 0 auto; width: 15px; height: 15px; display: block;
  -webkit-mask-image: var(--arc-chevron); mask-image: var(--arc-chevron);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 15px 15px; mask-size: 15px 15px;
}
.arc-crumbs--dark .arc-crumbs__sep { background-color: rgba(255, 255, 255, 0.8); }
.arc-crumbs--light .arc-crumbs__sep { background-color: var(--text-muted); }

/* --------------------------------------------------------------------------
   .arc-cform — the enquiry card. Reference @1920: band capped 1480,
   padding 96/64, white; ONE card w 1352, padding 48, border 1px --border-soft,
   radius 2, shadow rgba(66,58,45,.07) 0 2px 8px. Gravity Forms inside (G6).
   -------------------------------------------------------------------------- */
.arc-cform.e-con { padding: 96px 0; background: var(--surface-page); gap: 0 !important; }
.arc-cform > .e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important; align-items: stretch !important;
}
.arc-cform .arc-cform-card.e-con {
  background: var(--surface-card); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); box-shadow: 0 2px 8px rgba(66, 58, 45, 0.07);
  padding: clamp(28px, 4vw, 48px) !important; gap: 0 !important; align-items: stretch !important;
}
/* Gravity Forms: the Orbital framework injects a per-form inline <style> scoped
   #gform_wrapper_N[data-form-index].gform-theme at (1,2,0), downstream of this file,
   plus custom properties that win per-property. Every visual declaration below is
   !important by necessity, and font-family is forced across the whole subtree first
   because GF ships its own stack on the wrapper AND on individual controls. */
.arc-cform .gform_wrapper, .arc-cform .gform_wrapper * {
  font-family: var(--font-sans) !important;
}
.arc-cform .gform_wrapper .gform_fields {
  display: grid !important; grid-template-columns: repeat(12, 1fr) !important;
  column-gap: 18px !important; row-gap: 18px !important;
}
.arc-cform .gform_wrapper .gfield { margin: 0 !important; padding: 0 !important; }
/* The required asterisk ships its own line-height (17.16px), which inflates the label line
   box from 15 to 17.2 and pushes every required row +2.2px — and the section +4.3. Pin it into
   the label's own line box. (The reference marks nothing required because its form cannot
   submit at all; the asterisks are a deliberate, flagged addition.) */
.arc-cform .gform_wrapper .gfield_required,
.arc-cform .gform_wrapper .gfield_required * {
  font-size: 0.8rem !important; line-height: 15px !important; vertical-align: baseline !important;
  /* GF ships these in its own red, which is the only non-greyscale ink on the page. */
  color: var(--text-muted) !important;
}
.arc-cform .gform_wrapper .gfield_label {
  font-size: 0.8rem !important; font-weight: 600 !important; line-height: 15px !important;
  color: var(--text-secondary) !important; margin: 0 0 7px !important; letter-spacing: normal !important;
  text-transform: none !important;
}
.arc-cform .gform_wrapper input[type="text"],
.arc-cform .gform_wrapper input[type="email"],
.arc-cform .gform_wrapper input[type="tel"],
.arc-cform .gform_wrapper select,
.arc-cform .gform_wrapper textarea {
  width: 100% !important; box-sizing: border-box !important;
  font-family: var(--font-sans) !important; font-size: 0.9rem !important; font-weight: 400 !important;
  color: var(--text-primary) !important; background: var(--surface-page) !important;
  border: 1px solid var(--border-soft) !important; border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important; box-shadow: none !important;
  /* GF sets block-size from --gf-ctrl-size-md (38px) independently of padding, and derives
     line-height from the same variable — so height and line-height ship together. */
  height: 44px !important; min-height: 44px !important; line-height: normal !important;
  transition: border-color var(--dur-fast) var(--ease-out);
}
/* The select is 44 — the SAME height as every input — at 1920, 1024 and 390. An earlier
   reading of 46/68 came from an un-settled render; the fonts-ready, iframe-isolated probe is
   authoritative. Its 44px right padding is there to clear a custom chevron, so draw one
   (CSS mask, G7) rather than leaving the native arrow floating in that gap. */
.arc-cform .gform_wrapper select {
  height: 44px !important; min-height: 44px !important;
  padding: 12px 44px 12px 16px !important;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: none !important;
}
.arc-cform .gform_wrapper .ginput_container_select { position: relative; display: block; }
.arc-cform .gform_wrapper .ginput_container_select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 15px; height: 15px;
  transform: translateY(-50%) rotate(90deg); pointer-events: none;
  background-color: var(--text-muted);
  -webkit-mask-image: var(--arc-chevron); mask-image: var(--arc-chevron);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 15px 15px; mask-size: 15px 15px;
}
.arc-cform .gform_wrapper textarea {
  height: 150px !important; min-height: 150px !important; resize: vertical;
}
.arc-cform .gform_wrapper input:focus,
.arc-cform .gform_wrapper select:focus,
.arc-cform .gform_wrapper textarea:focus {
  border-color: var(--border-strong) !important; outline: none !important;
}
.arc-cform .gform_wrapper ::placeholder { color: var(--text-muted) !important; opacity: 1; }
.arc-cform .gform_wrapper .gform_footer {
  /* The submit row sits 18px (the form flex gap) plus a FLUID margin below the last field:
     30 @1920, 20.48 @1024, 10 @390 — i.e. clamp(10px, 2vw, 30px). A fixed 48 was right only
     at 1920 and ran the section 9.5px long at 1024 and 20px long at 390. GF renders the
     footer as a sibling of .gform_fields, so both parts live in this one margin. */
  margin: calc(18px + clamp(10px, 2vw, 30px)) 0 0 !important; padding: 0 !important;
  display: flex !important; align-items: center !important; gap: 18px !important;
}
/* The submit is rebuilt as a real <button> by the gform_submit_button_N filter so the arrow
   can be a flex sibling — an <input type=submit> is a replaced element with no ::after. */
.arc-cform .gform_wrapper .gform_button,
.arc-cform .gform_wrapper button.gform_button {
  background: var(--arc-black) !important; background-image: none !important;
  color: #fff !important; border: 1px solid var(--arc-black) !important;
  border-radius: var(--radius-sm) !important;
  padding: 18.4px 40px !important; min-height: 0 !important; height: auto !important; width: auto !important;
  font-family: var(--font-sans) !important; font-size: 0.875rem !important; font-weight: 600 !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important; line-height: 19px !important;
  box-shadow: none !important; cursor: pointer;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 0 !important;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-cform .gform_wrapper .gform_button:hover {
  background: transparent !important; color: var(--arc-black) !important;
}
/* The reference label is ONE text run, "Send message →", so the gap before the arrow is a
   real space plus one letter-spacing unit (~5.0px at 14px/0.08em) — NOT a 0.55em margin,
   which is 7.7px and made the button 2.7px too wide. The nbsp lives in the span. */
.arc-cform .gform_button__icon { margin-left: 0; }
.arc-cform .arc-cform-note {
  font-family: var(--font-sans); font-size: 0.78rem; font-weight: 400;
  line-height: 1.6; color: var(--text-muted); letter-spacing: normal;
}
/* The design has no required legend and no honeypot row. */
.arc-cform .gform_wrapper .gform_required_legend { display: none !important; }
.arc-cform .gform_wrapper .gform_validation_container { display: none !important; }
/* The reference keeps hero padding at 150/64 and the column max-width at 500 for every
   width — only var(--gutter) and the card's own clamp step. Do not invent more. The one
   real change is the two-up field rows wrapping, which the reference does via flex-wrap. */
@media (max-width: 900px) {
  .arc-cform .gform_wrapper .gform_fields { grid-template-columns: repeat(1, 1fr) !important; }
  .arc-cform .gform_wrapper .gfield { grid-column: 1 / -1 !important; }
}

/* --------------------------------------------------------------------------
   .arc-msg — 404 / Thank You. The same band with the breadcrumb removed and a
   button row added. ⚠️ NOT reference-verified: no such screen exists on the
   approved static design (see plan/plan-widget-utility-pages.html).
   -------------------------------------------------------------------------- */
.arc-msg .arc-msg-eyebrow { display: flex; padding: 3px 0 1px; line-height: 0; }
.arc-msg .arc-msg-eyebrow.elementor-widget .elementor-heading-title {
  display: block; width: auto;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important; text-transform: uppercase;
  letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.75) !important; margin: 0 0 14px; line-height: 15px;
}
.arc-msg .arc-chero-col.e-con { width: auto !important; max-width: 620px !important; }
.arc-msg .arc-msg-actions.e-con {
  flex-direction: row !important; flex-wrap: wrap; gap: 12px !important;
  margin-top: 32px; padding: 0 !important; width: auto !important; align-items: center !important;
}
.arc-msg .arc-msg-actions > .elementor-widget { width: auto !important; margin: 0 !important; line-height: 0; }
.arc-msg .arc-msg-btn .elementor-button {
  background: var(--arc-white) !important; background-image: none !important;
  color: var(--arc-black) !important; border: 1px solid var(--arc-white) !important;
  border-radius: var(--radius-sm) !important; padding: 14.4px 28px !important; min-height: 0 !important;
  font-family: var(--font-sans) !important; font-size: 0.8125rem !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 17px !important;
  box-shadow: none !important;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-msg .arc-msg-btn .elementor-button:hover { background: transparent !important; color: var(--arc-white) !important; }
.arc-msg .arc-msg-btn--ghost .elementor-button {
  background: transparent !important; color: var(--arc-white) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.arc-msg .arc-msg-btn--ghost .elementor-button:hover {
  background: var(--arc-white) !important; color: var(--arc-black) !important; border-color: var(--arc-white) !important;
}

/* --------------------------------------------------------------------------
   .arc-legal — Privacy / Terms prose column. ⚠️ NOT reference-verified.
   -------------------------------------------------------------------------- */
.arc-legal.e-con { padding: 96px 0 120px; background: var(--surface-page); gap: 0 !important; }
.arc-legal > .e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important; align-items: stretch !important;
}
.arc-legal .arc-legal-col.e-con {
  max-width: 720px; width: 100% !important; padding: 0 !important; gap: 0 !important;
  align-items: stretch !important;
}
.arc-legal .arc-legal-updated p {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-accent); margin: 0 0 32px;
}
.arc-legal .arc-legal-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important; font-size: var(--fs-display-md);
  line-height: 1.2; color: var(--text-primary) !important; margin: 40px 0 14px;
}
.arc-legal .arc-legal-h2:first-of-type .elementor-heading-title { margin-top: 0; }
.arc-legal .arc-legal-body p {
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.8;
  color: var(--text-secondary); margin: 0 0 16px;
}
.arc-legal .arc-legal-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   GALLERY PAGE  (/gallery/, page 21)
   Reference: gallery.html + build/GalleryPage.js?v=118, DOM read headless at
   1920x1200, 1024x1200, 768x1200 and 390x1400 -> build/_ref_gallery.json.
   Two sections only: .arc-ghero then .arc-ggrid. Nothing else is in the design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .arc-ghero — the gallery title band.
   NOT a modifier of .arc-chero. That band was checked first and rejected on
   STRUCTURE, not looks: chero is crumbs + h1 + lead at a fixed 500px behind a
   90deg LEFT wash; this is eyebrow + h1 at max(432px, 44.4vh) behind a
   bottom-up wash. Different DOM, different height mechanism, different scrim.

   Height is VIEWPORT-DEPENDENT and must stay so — reproduce the mechanism, not
   one measured number. Reference: 532.8 at 1920x1200 and 1024x1200 (44.4vh
   wins), 621.59 at 390x1400 (44.4vh wins), 463.63 at 1920x901 (the CONTENT
   wins the max()). Any QA that pins a single height here is measuring its own
   viewport, not the design.
   -------------------------------------------------------------------------- */
.arc-ghero.e-con {
  position: relative; overflow: hidden;
  min-height: max(432px, 44.4vh);
  padding: 0; gap: 0 !important;
  justify-content: center;          /* column container: this is the VERTICAL axis */
  align-items: stretch !important;  /* ...and this is the horizontal one */
  background: var(--surface-inverse);
}
/* Photo. Elementor's .elementor img{height:auto;max-width:100%} is (0,1,1) and beats a
   plain class, so height/width/max-width all need !important here. */
.arc-ghero .arc-ghero-img.elementor-widget {
  position: absolute; inset: 0; width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; z-index: 0; line-height: 0;
}
.arc-ghero .arc-ghero-img .elementor-widget-container,
.arc-ghero .arc-ghero-img figure,
.arc-ghero .arc-ghero-img .elementor-image { height: 100%; }
.arc-ghero .arc-ghero-img img {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; object-position: 50% 50%; display: block;
}
/* TWO scrims as TWO layers — the reference has two absolutely-positioned divs, and on this
   project collapsing an equivalent pair into one multi-layer background has already been
   proven to render differently (see the .arc-chero note above). Reproduce the mechanism.
   The quotes in content: "" are load-bearing — see the warning on .arc-chero. */
.arc-ghero.e-con::after {
  content: ""; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(to top, rgba(18, 17, 16, 0.72) 0%, rgba(18, 17, 16, 0.28) 42%, rgba(18, 17, 16, 0.12) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* the top wash, confined to the first 240px exactly as the reference's second div is */
.arc-ghero .arc-ghero-img::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 240px; z-index: 1;
  pointer-events: none;
  background-image: linear-gradient(180deg, rgba(12, 13, 15, 0.6) 0%, rgba(12, 13, 15, 0) 100%);
}
/* Content wrap. 0,3,0 is required to beat .e-con-full{max-width:100%} at 0,2,0. */
.arc-ghero > .arc-ghero-inner.e-con {
  position: relative; z-index: 2;
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 192px var(--gutter) 120px;
  gap: 0 !important; align-items: stretch !important;
}
/* Eyebrow. The reference's SectionLabel is a 15px inline-flex span sitting in a 19px LINE
   BOX (3 above, 1 below) — that 19px, not the 15px glyph box, is what the h1's 14px
   margin-top is measured from. Same wrapper/inner split as every other eyebrow on the site;
   flex + width:auto is what shrink-wraps the inner div to the text's own 72.38px. */
.arc-ghero .arc-ghero-eyebrow.elementor-widget {
  display: flex; justify-content: flex-start;
  margin: 0 !important; padding: 3px 0 1px; line-height: 0;
}
.arc-ghero-eyebrow.elementor-widget .elementor-heading-title {
  display: block; width: auto;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.18em;
  line-height: 15px; margin: 0;
  color: rgba(255, 255, 255, 0.9) !important;
}
/* H1. max-width is 18ch in the reference — a MECHANISM, not a number: it is what forces the
   two-line break together with the non-breaking space in "Arcadia\u00A0Difference".
   Hardcoding 682px would be right at 1920 and wrong everywhere else. */
.arc-ghero .arc-ghero-h1.elementor-widget { margin: 0 !important; }
.arc-ghero-h1.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.03; letter-spacing: -0.02em;
  color: #fff !important; margin: 14px 0 0; max-width: 18ch;
}

/* --------------------------------------------------------------------------
   .arc-ggrid — the masonry grid. In the reference the <section> IS the capped
   wrap (max-width 1480, centred, padding 88px var(--gutter) 104px); here that
   is the inner container, with a full-bleed outer so the band can take a
   background later without another rebuild.
   Reference section heights: 2411.69 @1920, 1752.17 @1024, 5547.88 @390.
   -------------------------------------------------------------------------- */
.arc-ggrid.e-con { padding: 0; gap: 0 !important; }
/* 0,3,0 — required to beat .e-con-full{max-width:100%} at 0,2,0. */
.arc-ggrid > .arc-ggrid-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 88px var(--gutter) 104px;
  gap: 0 !important; align-items: stretch !important;
}
/* The Shortcode widget's wrapper otherwise contributes an inherited line box on top of the
   column container's own height (§2b: a widget with no explicit line-height inherits the
   body's at 16px and inflates its row). */
.arc-ggrid .arc-gg-strip.elementor-widget { margin: 0 !important; line-height: 0; }
/* Same treatment for the grid's own Shortcode widget (2026-09-07, owner request: one ACF
   gallery field on the page instead of 18 Image widgets). Without the width pair the widget
   wrapper takes Elementor's --width and the columns are computed from the wrong box. */
.arc-ggrid .arc-gg-page.elementor-widget {
  margin: 0 !important; line-height: 0;
  width: 100% !important; max-width: none !important;
}
.arc-ggrid .arc-gg-page .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
/* ⚠️ The Elementor container that used to BE .arc-gg is now .arc-gg-holder, and the rename is
   load-bearing. The shortcode emits its own <div class="arc-gg">, so while the container also
   carried .arc-gg the multicol nested inside itself and every tile came out (440−32)/3 = 136px
   instead of 440px — the harness caught it as a −1910px masonry height. The holder is now just
   a transparent full-width block; .arc-gg (the plain div inside it) is the multicol element. */
.arc-ggrid > .arc-ggrid-inner > .arc-gg-holder.e-con {
  display: block !important; padding: 0 !important;
  width: 100%; max-width: none;
}

/* CSS COLUMN masonry — the reference's own mechanism, and the reason this is a feed and
   not Elementor's Gallery widget. Columns fill top-to-bottom, so tiles 1-6 land in column
   one, 7-12 in column two, 13-18 in column three. A JS masonry would place them
   shortest-column-first and put different photographs in different places. */
.arc-gg { column-count: 3; column-gap: 16px; }
@media (max-width: 900px) { .arc-gg { column-count: 2; } }
@media (max-width: 560px) { .arc-gg { column-count: 1; } }

.arc-gg__brick {
  display: block; break-inside: avoid; margin: 0 0 16px;
  border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in;
  background: var(--arc-sand); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-med) var(--ease-out);
}
/* The Kit writes .elementor-kit-N a{box-shadow:none} at (0,1,1), which beats a single
   custom class — an anchor-tile would show its hover shadow and never its resting one. */
.arc-ggrid a.arc-gg__brick { box-shadow: var(--shadow-xs); }
.arc-ggrid a.arc-gg__brick:hover { box-shadow: var(--shadow-md); }
/* ⚠️ Those two are ANCHOR-specific and stopped matching the moment each tile became a native
   Image widget: the brick is then a <div> wrapping the anchor, so `a.arc-gg__brick` selected
   nothing and the hover shadow silently vanished. The image still scaled, so it looked right
   in every screenshot and every computed-style check at rest — only the behaviour probe,
   which hovers and re-reads, caught it. This element-agnostic pair is what drives the tile
   now; the anchor pair stays for the shortcode shape. */
.arc-ggrid .arc-gg__brick { box-shadow: var(--shadow-xs); }
.arc-ggrid .arc-gg__brick:hover { box-shadow: var(--shadow-md); }
/* height:auto + the per-image inline aspect-ratio is what gives each tile its photo's own
   shape. Elementor's .elementor img{height:auto;max-width:100%} is (0,1,1) and beats a
   plain class, so anything that must not be overridden is pinned here. */
.arc-gg__img {
  display: block; width: 100% !important; height: auto !important; max-width: 100% !important;
  transition: transform var(--dur-slow) var(--ease-out);
}
.arc-gg__brick:hover .arc-gg__img { transform: scale(1.045); }
@media (prefers-reduced-motion: reduce) {
  .arc-gg__img { transition: none; }
  .arc-gg__brick:hover .arc-gg__img { transform: none; }
}

/* --------------------------------------------------------------------------
   Gallery tiles as NATIVE Image widgets (owner instruction 2026-08-27).
   The container is an Elementor container carrying .arc-gg, and each tile is an
   Image widget carrying .arc-gg__brick — so the brick chrome above is reused
   unchanged and the existing verified QA harnesses keep working against the
   same selectors. Only the Elementor-specific neutralising lives here.
   -------------------------------------------------------------------------- */
/* .e-con is display:flex; CSS multicol needs a block container. 0,2,0 beats .e-con.
   ⚠️ Do NOT write `gap: 0` here. `gap` is shorthand for row-gap AND column-gap, so it
   silently zeroed the 16px column-gap set on .arc-gg above — columns came out 450.656px
   instead of 440 and every tile drifted up to 10.67px left. Restate column-gap explicitly. */
.arc-gg.e-con {
  display: block !important;
  padding: 0 !important;
  row-gap: 0 !important;
  column-gap: 16px !important;
}
/* Elementor gives non-last widgets a margin-block-end from the kit, and sets widget width
   from --width; both have to go or the column rhythm and the 16px brick gap fight. */
.arc-gg > .elementor-element.arc-gg__brick {
  break-inside: avoid;
  margin: 0 0 16px !important;
  width: auto !important; max-width: none !important;
}
/* The widget wrapper IS the tile box, so the anchor and figure inside must not add one. */
.arc-gg .arc-gg__brick .elementor-widget-container,
.arc-gg .arc-gg__brick figure { margin: 0 !important; padding: 0 !important; line-height: 0; }
.arc-gg .arc-gg__brick a { display: block; line-height: 0; text-decoration: none; }
/* The Kit writes .elementor-kit-N a{box-shadow:none} at (0,1,1); this is (0,3,1). */
.arc-gg .arc-gg__brick a, .arc-gg .arc-gg__brick a:hover { box-shadow: none !important; }
/* ⚠️ Elementor renders the Image widget's <img> as inline-block, so it sits on a baseline and
   adds a ~7.11px descender to EVERY tile — which then compounds down each column (the last
   brick in a column of six was 44px low). `display:block` on .arc-gg__img alone lost to
   Elementor's own rule; it needs !important. This is the whole reason the column drifted. */
.arc-gg .arc-gg__brick img.arc-gg__img { display: block !important; vertical-align: top; }

/* ==========================================================================
   MEET THE TEAM  (/about-us/, page 24)
   Reference: about.html + build/AboutPage.js?v=119, DOM read headless at
   1920 / 1024 / 390 -> build/_ref_about.json.
   Eight sections: hero > 3 x .arc-ab > .arc-mvv > 3 shared embeds.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 1 — the hero, as a MODIFIER of the existing .arc-chero page-title
   band. Unlike the Gallery hero (which was correctly refused this reuse), the
   reuse here is justified on STRUCTURE, not visual family: crumbs + h1 + lead
   behind a 90deg left wash plus the identical 240px top wash, with a
   byte-identical H1 clamp, crumb spec and lead spec. Exactly four values differ.
   Every selector below carries BOTH classes so it is (0,3,0)+ and beats the
   base block regardless of source order — a tie that only works because of
   file order is a trap for whoever reorders this file next.
   -------------------------------------------------------------------------- */
.arc-chero.arc-chero--team.e-con { min-height: 660px; }
.arc-chero.arc-chero--team.e-con::after {
  background-image: linear-gradient(90deg, rgba(18, 17, 16, 0.82) 0%, rgba(18, 17, 16, 0.46) 60%, rgba(18, 17, 16, 0.2) 100%);
}
/* the reference frames the group shot high — center 22%, not the band's 50% */
.arc-chero.arc-chero--team .arc-chero-img img { object-position: center 22%; }
.arc-chero.arc-chero--team > .e-con { padding-bottom: 80px; }
/* ⚠️ The two heroes differ here, and copying Contact's column cap was wrong. Contact's
   reference wraps its content in a 500px column, so the H1 wraps inside it. The About
   reference has NO column at all — crumbs, h1 and lead are direct children of the wrap, so
   the H1 spans the full 1352 content width and ONLY the lead is capped (540). Capping the
   column made the H1 540 wide: invisible today because "Meet the team" is ~370px at 60.8px,
   and a wrapping bug the moment the heading gets longer. Reproduce the mechanism. */
.arc-chero.arc-chero--team .arc-chero-col.e-con { max-width: none !important; }
.arc-chero.arc-chero--team .arc-chero-lead p { max-width: 540px; }

/* --------------------------------------------------------------------------
   .arc-ab — the About page's two-column block. ONE component, three instances
   (sections 2, 3 and 5) differing only by modifier:
     --alt      bg --surface-alt instead of --surface-page
     --flip     image column first (imageSide:"left")
     --natural  image keeps its own ratio instead of the clamped well
   Reference: section padding 7rem 0 (112px), AWRAP, grid 1fr 1fr / gap 72 /
   align-items:center, and the reference's own .arc-2col rule collapses it to
   1fr / gap 40 at <=900 (NOT at 1024 — at 1024 it is still two columns).
   -------------------------------------------------------------------------- */
.arc-ab.e-con { padding: 112px 0; gap: 0 !important; background: var(--surface-page); }
.arc-ab.arc-ab--alt.e-con { background: var(--surface-alt); }
/* 0,3,0 to beat .e-con-full{max-width:100%} at 0,2,0 */
.arc-ab > .arc-ab-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important; align-items: stretch !important;
}
/* A CSS grid inside an Elementor container renders as its flex unless forced. */
.arc-ab .arc-ab-grid.e-con {
  display: grid !important; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
  width: 100% !important; padding: 0 !important;
}
@media (max-width: 900px) {
  .arc-ab .arc-ab-grid.e-con { grid-template-columns: 1fr; gap: 40px; }
}
/* Grid children keep an inline width from Elementor's container sizing — force auto,
   or the tracks are computed from the child rather than the other way round. */
.arc-ab .arc-ab-grid > .e-con {
  width: auto !important; max-width: none !important; padding: 0 !important;
  gap: 0 !important; align-items: stretch !important;
}
/* imageSide:"left" is a SOURCE-ORDER flip in the reference — it emits the image column first.
   Here it is a CSS `order` swap instead, so the DOM keeps heading-then-photo (a better reading
   order for screen readers and crawlers) while the rendered layout is identical, side by side
   and stacked. Verified: every rect matches the reference at 1920 / 1024 / 390, including the
   stacked order at <=900. The section QA therefore asserts VISUAL order and only reports the
   DOM difference — asserting DOM order would fail a build that renders the same and reads
   better. This is a deliberate, documented divergence. */
.arc-ab.arc-ab--flip .arc-ab-text { order: 2; }
.arc-ab.arc-ab--flip .arc-ab-media { order: 1; }

/* Media well: a clamped height with a cover crop, or the photo's own ratio. */
.arc-ab .arc-ab-media.e-con { height: clamp(360px, 44vw, 560px); }
.arc-ab.arc-ab--natural .arc-ab-media.e-con { height: auto; }
.arc-ab .arc-ab-media .elementor-widget-image,
.arc-ab .arc-ab-media .elementor-widget-image .elementor-widget-container,
.arc-ab .arc-ab-media figure { height: 100%; margin: 0 !important; line-height: 0; }
/* .elementor img{height:auto;max-width:100%} is (0,1,1) and beats a plain class. */
.arc-ab .arc-ab-media img {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; display: block; border-radius: var(--radius-sm);
}
.arc-ab.arc-ab--natural .arc-ab-media .elementor-widget-image,
.arc-ab.arc-ab--natural .arc-ab-media .elementor-widget-container,
.arc-ab.arc-ab--natural .arc-ab-media figure { height: auto; }
/* ⚠️ Pin the ratio from the ORIGINAL's dimensions (team-group.jpg is 2048x1365). With plain
   width:100%/height:auto the rendered height comes from whichever srcset candidate the browser
   picked, and WP's derivatives round theirs — a 1024x683 candidate gives 426.88 where the
   original gives 426.56. Same drift the gallery tiles needed pinning for. */
.arc-ab.arc-ab--natural .arc-ab-media img {
  height: auto !important; object-fit: fill; aspect-ratio: 2048 / 1365;
}

/* Text rows. Same 19px eyebrow line box as every other eyebrow on the site. */
.arc-ab .arc-ab-eyebrow.elementor-widget {
  display: flex; justify-content: flex-start;
  margin: 0 !important; padding: 3px 0 1px; line-height: 0;
}
.arc-ab-eyebrow.elementor-widget .elementor-heading-title {
  display: block; width: auto;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.18em; line-height: 15px; margin: 0;
  color: var(--text-accent) !important;
}
.arc-ab .arc-ab-h2.elementor-widget { margin: 0 !important; }
.arc-ab-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: var(--fs-display-md); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text-primary) !important; margin: 18px 0 22px;
}
.arc-ab .arc-ab-p.elementor-widget { margin: 0 !important; }
.arc-ab .arc-ab-p p {
  font-family: var(--font-sans); font-weight: 400; font-size: 1.05rem; line-height: 1.8;
  color: var(--text-secondary); margin: 0 0 20px;
}
/* Stats row — three native Counters. The reference's row is margin:10px 0 32px, but its
   10px top COLLAPSES with the preceding paragraph's 20px bottom (block layout). Elementor
   stacks widgets in a FLEX column where margins never collapse, so reproducing the declared
   10px would add 30px instead of 20 and push the button and the whole column down. The
   collapsed OUTCOME is 20 + 32, which is what these values produce. */
.arc-ab .arc-ab-stats.e-con {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  gap: 48px; margin: 0 0 32px !important; padding: 0 !important;
  align-items: flex-start; width: 100% !important;
}
.arc-ab .arc-ab-stat { width: auto !important; max-width: none !important; flex: 0 0 auto !important; }
/* Counter DOM order is fixed title -> number and no setting inverts it; column-reverse is
   visual only (screen readers still read source order). Elementor also ships a ~180px
   min-width on the widget. */
.arc-ab .arc-ab-stat .elementor-counter {
  display: flex; flex-direction: column-reverse; align-items: stretch;
  min-width: 0 !important; width: auto !important;
}
.arc-ab .arc-ab-stat .elementor-counter-number-wrapper {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-display-md); line-height: 1;   /* FLUID — never re-hardcode to 44px */
  letter-spacing: -0.01em; color: var(--text-primary);
  display: flex; align-items: baseline; justify-content: flex-start; text-align: left;
}
/* Elementor centres the number by giving the empty prefix/suffix spans flex-grow:1, so each
   absorbs half the slack and the number floats over a left-aligned label. text-align alone
   does nothing — the space is taken by siblings, not by alignment inside one box. */
.arc-ab .arc-ab-stat .elementor-counter-number-prefix,
.arc-ab .arc-ab-stat .elementor-counter-number-suffix { flex-grow: 0 !important; }
.arc-ab .arc-ab-stat .elementor-counter-title {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600; line-height: 15px;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-secondary);
  margin: 8px 0 0; text-align: left;
}
.arc-ab .arc-ab-btn.elementor-widget { margin: 0 !important; line-height: 0; }
/* Primary button. The Kit fills an UNSET background, so every deviating property is stated —
   and without typography the label inherited the Kit's 15px/500 and wrapped to two lines,
   which made the button 39px instead of 47.78 and dragged the whole vertically-centred text
   column 4.39px down. 17 + 2*14.4 + 2*1 = 47.8, the reference's height. */
/* The Knockdown comparer's CTA is the same primary button. Added to the SELECTOR LIST, not
   copied: a second set of declarations is how two buttons that must match start to drift. */
.arc-ab .arc-ab-btn .elementor-button,
.arc-kr-ba .arc-kr-ba-cta .elementor-button {
  background-color: var(--arc-black) !important; background-image: none !important;
  border: 1px solid var(--arc-black) !important; border-radius: var(--radius-sm) !important;
  padding: 14.4px 28px !important; min-height: 0 !important;
  font-family: var(--font-sans) !important; font-size: 0.8125rem !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important; line-height: 17px !important;
  color: #fff !important; box-shadow: none !important; white-space: nowrap !important;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-ab .arc-ab-btn .elementor-button:hover,
.arc-kr-ba .arc-kr-ba-cta .elementor-button:hover {
  background-color: transparent !important; color: var(--arc-black) !important;
}

/* --------------------------------------------------------------------------
   Section 4 — .arc-mvv, Mission / Vision / Values.
   Dark band, padding 8.5rem 0 (136), centred head capped 640 with a 40px gap to
   the tab row, tab row centred gap 40 margin-bottom 44, panel capped 840 and
   centred with min-height 210.
   ⚠️ The values grid collapses at <=620px — its OWN breakpoint, not the page's
   900 or the footer's 560. Do not "tidy" it into either.
   -------------------------------------------------------------------------- */
.arc-mvv.e-con {
  padding: 136px 0; gap: 0 !important;
  background: var(--surface-inverse); color: #fff;
}
.arc-mvv > .arc-mvv-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important; align-items: stretch !important;
}
.arc-mvv .arc-mvv-head.e-con {
  max-width: 640px; margin: 0 auto 40px; width: 100% !important;
  padding: 0 !important; gap: 0 !important; text-align: center; align-items: center !important;
}
.arc-mvv .arc-mvv-eyebrow.elementor-widget {
  display: flex; justify-content: center; margin: 0 !important; padding: 3px 0 1px; line-height: 0;
}
.arc-mvv-eyebrow.elementor-widget .elementor-heading-title {
  display: block; width: auto;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.18em; line-height: 15px; margin: 0;
  color: rgba(255, 255, 255, 0.72) !important;
}
.arc-mvv .arc-mvv-h2.elementor-widget { margin: 0 !important; }
.arc-mvv-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: var(--fs-display-md); line-height: 1.12; letter-spacing: normal;
  margin: 14px 0 0; color: #fff !important; text-align: center;
}

/* Tabs. .e-n-tabs ships gap:10px between the pill row and the content — the reference's
   spacing is the row's own 44px margin, so zero the gap and rebuild it. Nested-Tab titles
   render as bare <button>s, so Hello's reset owns background, border, radius, padding,
   width and line-height until every one is pinned. */
.arc-mvv .arc-mvv-tabs { width: 100%; }
.arc-mvv .arc-mvv-tabs .e-n-tabs { gap: 0 !important; }
.arc-mvv .arc-mvv-tabs .e-n-tabs-heading {
  display: flex !important; justify-content: center; gap: 40px; margin: 0 0 44px; border: 0;
}
.arc-mvv .arc-mvv-tabs .e-n-tab-title {
  background: none !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 0 10px !important; margin: 0 !important; width: auto !important;
  font-family: var(--font-sans) !important; font-size: 0.8125rem !important; font-weight: 600 !important;
  text-transform: uppercase !important; letter-spacing: 0.14em !important; line-height: normal !important;
  color: rgba(255, 255, 255, 0.5) !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.arc-mvv .arc-mvv-tabs .e-n-tab-title[aria-selected="true"] {
  color: #fff !important; border-bottom-color: #fff !important;
}
.arc-mvv .arc-mvv-tabs .e-n-tab-title > .e-n-tab-title-text { font: inherit; letter-spacing: inherit; }
.arc-mvv .arc-mvv-tabs .e-n-tabs-content > .e-con {
  padding: 0 !important; gap: 0 !important;
  max-width: 840px; margin-inline: auto; width: 100% !important; min-height: 210px;
}

/* Mission / Vision panes — centred heading + body. */
.arc-mvv .arc-mvv-pane-h3.elementor-widget { margin: 0 !important; }
.arc-mvv-pane-h3.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.2; margin: 0 0 20px;
  color: #fff !important; text-align: center;
}
.arc-mvv .arc-mvv-pane-p.elementor-widget { margin: 0 !important; }
.arc-mvv .arc-mvv-pane-p p {
  font-family: var(--font-sans); font-weight: 400; font-size: 1.1rem; line-height: 1.8;
  color: rgba(255, 255, 255, 0.8); margin: 0; text-align: center;
}

/* Values pane — a 2-up grid of four. A CSS grid inside an Elementor container renders as
   its flex unless forced. */
.arc-mvv .arc-mvv-values.e-con {
  display: grid !important; grid-template-columns: repeat(2, 1fr);
  gap: 32px 48px; width: 100% !important; padding: 0 !important;
}
@media (max-width: 620px) {
  .arc-mvv .arc-mvv-values.e-con { grid-template-columns: 1fr; }
}
.arc-mvv .arc-mvv-values > .e-con {
  width: auto !important; max-width: none !important; padding: 0 !important; gap: 0 !important;
  align-items: stretch !important;
}
.arc-mvv .arc-mvv-val-h4.elementor-widget { margin: 0 !important; }
.arc-mvv-val-h4.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 500 !important; font-size: 1.25rem;
  line-height: normal; margin: 0 0 8px; color: #fff !important;
}
.arc-mvv .arc-mvv-val-p.elementor-widget { margin: 0 !important; }
.arc-mvv .arc-mvv-val-p p {
  font-family: var(--font-sans); font-weight: 400; font-size: 0.95rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.7); margin: 0;
}

/* ==========================================================================
   DISPLAY HOMES (/display-homes/, page 16)
   Six sections: hero > .arc-ab--dhintro > .arc-dh-loc > .arc-dh-gal > 2 shared embeds.
   Reference: display-homes.html + build/DisplayHomesPage.js?v=118, whose own stylesheet is
   inlined in that page and is reproduced verbatim where it applies.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 1 — hero. The .arc-chero page-title band with a --dh modifier.
   The reuse was checked against the reference's DOM before being chosen, not
   assumed from the family resemblance: img + two absolutely-positioned wash
   divs + a content column of crumbs > h1 > lead, the same 90deg left wash and
   the same 240px top wash, and a byte-identical H1 clamp, crumb spec and lead
   spec. Measured against the ABOUT hero, only THREE values differ.
   (Contrast the Gallery hero, which was correctly refused this reuse: eyebrow
   not crumbs, a bottom-up wash, and a viewport-height mechanism.)
   Every selector carries BOTH classes so it is (0,3,0)+ and beats the base
   block regardless of source order — a tie that only works because of file
   order is a trap for whoever reorders this file next.
   -------------------------------------------------------------------------- */
/* ⚠️ The Inclusions hero shares --dh's spec EXACTLY — min-height 600, scrims .82/.46/.2, wrap
   padding-bottom 80, no column cap, lead cap 560. All five were measured independently off
   inclusions.html BEFORE this was written, not assumed from the family resemblance. So it joins
   the selector lists rather than repeating five rules that would then have to be kept in step.
   Both modifiers stay named per PAGE, which is the honest description: two pages that happen to
   share a hero spec, not one component with two names. If either reference diverges later, split
   only the rule that diverges. */
.arc-chero.arc-chero--dh.e-con,
.arc-chero.arc-chero--inclusions.e-con,
.arc-chero.arc-chero--designs.e-con,
.arc-chero.arc-chero--custom.e-con,
.arc-chero.arc-chero--kdr.e-con { min-height: 600px; }
/* Same stops as --team, and deliberately NOT hoisted into the base block: the base
   carries CONTACT's stops (.8/.48/.22) and is shared by contact, 404, thank-you,
   privacy and terms — five bands already verified at 0.0px. Two modifiers repeating
   three numbers is cheaper than re-opening five verified pages. */
.arc-chero.arc-chero--dh.e-con::after,
.arc-chero.arc-chero--inclusions.e-con::after,
.arc-chero.arc-chero--designs.e-con::after,
.arc-chero.arc-chero--custom.e-con::after {
  background-image: linear-gradient(90deg, rgba(18, 17, 16, 0.82) 0%, rgba(18, 17, 16, 0.46) 60%, rgba(18, 17, 16, 0.2) 100%);
}
/* The wrap padding is 150px 64px 80px on the reference, same as About's — the base
   block's 64px bottom is Contact's. Measured, not inherited by assumption. */
.arc-chero.arc-chero--dh > .e-con,
.arc-chero.arc-chero--inclusions > .e-con,
.arc-chero.arc-chero--designs > .e-con,
.arc-chero.arc-chero--custom > .e-con,
.arc-chero.arc-chero--kdr > .e-con { padding-bottom: 80px; }
/* ⚠️ Same trap as --team: do NOT let Contact's 500px column cap through. This
   reference has no column at all, so the H1 spans the full 1352 content width and
   ONLY the lead is capped. Capping the column would cap a 60.8px H1 to 560 — invisible
   while the heading is short, a wrapping bug the moment it grows. */
.arc-chero.arc-chero--dh .arc-chero-col.e-con,
.arc-chero.arc-chero--inclusions .arc-chero-col.e-con,
.arc-chero.arc-chero--designs .arc-chero-col.e-con,
.arc-chero.arc-chero--custom .arc-chero-col.e-con,
.arc-chero.arc-chero--kdr .arc-chero-col.e-con { max-width: none !important; }
/* 560 here, 540 on About, 500 on Contact — three heroes, three lead caps. Measured. */
.arc-chero.arc-chero--dh .arc-chero-lead p,
.arc-chero.arc-chero--inclusions .arc-chero-lead p,
.arc-chero.arc-chero--designs .arc-chero-lead p,
.arc-chero.arc-chero--custom .arc-chero-lead p,
.arc-chero.arc-chero--kdr .arc-chero-lead p { max-width: 560px; }
/* ⚠️ A THIRD set of wash stops on this site, and the reason --kdr is not the pure
   selector-list addition it first looked like. Measured on knockdown-rebuild.html:
     --kdr        .82 / .48 / .22   <- the family's first stop, the BASE's other two
     --dh family  .82 / .46 / .20
     base         .80 / .48 / .22
   The wash HEIGHTS (600 / 240) do match the family, which is exactly how this was missed:
   checking that a wash exists, and at the right size, is not checking what it paints. */
.arc-chero.arc-chero--kdr.e-con::after {
  background-image: linear-gradient(90deg, rgba(18, 17, 16, 0.82) 0%, rgba(18, 17, 16, 0.48) 60%, rgba(18, 17, 16, 0.22) 100%);
}
/* --kdr adds NOTHING else. Measured independently: its H1 runs 60.8/60.8/60.8/41.6, which IS
   the base .arc-chero-h1 clamp, and object-position is the base 50% 50%. Contrast --custom,
   which genuinely needed both overridden — same family, different answer, so each was checked. */
/* The two values that are NOT shared. Measured on custom-homes.html independently:
   the H1 runs 57.6 / 57.6 / 51.2 / 35.2 at 1920/1440/1024/390, which is
   clamp(2.2rem, 5vw, 3.6rem) — the base .arc-chero-h1 clamp(2.6rem, 6vw, 3.8rem) gives
   60.8 at 1440 (what Home Designs uses) and would ship this hero 3.2px large at desktop
   and 6.4px large at 390. And the photo is framed lower than the base 50% 50%. */
.arc-chero.arc-chero--custom .arc-chero-h1 .elementor-heading-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
}
.arc-chero.arc-chero--custom .arc-chero-img img { object-position: 50% 60%; }
/* object-position is left alone on purpose: the reference frames this photo at
   50% 50%, which is exactly what the BASE block already sets. --team overrides to
   center 22% for its group shot; this band must not inherit that. */

/* --------------------------------------------------------------------------
   Section 2 — "Walk through a home made for memories". The FOURTH instance of
   the .arc-ab two-column block, not a new component. Measured against the
   About page's first .arc-ab before being chosen, and every structural value
   is identical: section padding 112px 0, background --surface-page, inner
   capped 1480, grid 640px/640px gap 72 align-items:center, the reference's own
   .arc-2col collapse to 1fr/gap 40 at <=900, the 360px media floor at 390,
   object-fit cover / position 50% 50%, and heading-then-photo DOM order.
   THREE values differ, and they are all here.
   -------------------------------------------------------------------------- */
/* 540, not the block's 560. Both are clamps on the same 44vw middle, so 1024
   reads 450.55 on BOTH sides and only the 1920 end differs — a sweep that
   skipped 1920 would call these two blocks identical.
   Radius and shadow are the project's own tokens, which were checked against the
   reference's before being used here: --radius-sm is 2px and --shadow-lg is
   0 20px 48px rgba(66,58,45,.12) on both sides. Use the token, not the literal —
   a hardcoded copy is a value that stops tracking the design system. */
.arc-ab.arc-ab--dhintro .arc-ab-media.e-con {
  height: clamp(360px, 44vw, 540px);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
/* The well clips, so the figure and the img must not paint outside its corners. */
.arc-ab.arc-ab--dhintro .arc-ab-media figure,
.arc-ab.arc-ab--dhintro .arc-ab-media img { border-radius: inherit; }
/* The last paragraph carries 32px here and 20px on About — About has a stats row
   after it that owns the 32. Elementor stacks these widgets in a FLEX column where
   margins never collapse, so transcribe the reference's RENDERED gap, not its
   declared one.
   ⚠️ Targets an explicit --last class from the builder, NOT :last-of-type. Every
   Elementor widget is a <div>, so :last-of-type resolves to the last DIV child of the
   column — the BUTTON — and the rule silently never fires. That cost 12px of column
   height and read as a mysterious 6px shift on every row above it.
   The margin lives on the inner <p>, matching the base rule it overrides
   (.arc-ab .arc-ab-p p, 0-2-1); this is 0-3-1 and needs no !important. */
.arc-ab.arc-ab--dhintro .arc-ab-p--last p { margin-bottom: 32px; }

/* --------------------------------------------------------------------------
   Section 3 — "Display homes by location". The reference's OWN stylesheet,
   reproduced from the inline <style> in display-homes.html rather than
   eyeballed from a screenshot. Only the class prefix differs.

   ⚠️ WHY THE PREFIX CHANGED. The reference calls these .arc-dh-locrow /
   .arc-dh-map / .arc-dh-pair / .arc-dh-card. The HOMEPAGE's Display Homes
   strip already owns .arc-dh-card — eight rules in arc-home.css describing a
   completely different component (full-bleed photo, scrim, chip, overlaid
   meta) — and arc-home.css is enqueued on EVERY page, not just the front one.
   Reusing the reference's name would have inherited all eight silently.
   So: arc-dhl-* here. This is the only place on this page where the
   reference's own class names are deliberately not reused.

   ⚠️ THREE BREAKPOINTS, ALL THE REFERENCE'S OWN, ALL DIFFERENT: the row
   collapses at 900, the card pair at 760, and the gallery below at 820. None
   is the project's 1039/679 carousel pair or the footer's 560. Do not tidy
   them into each other or into one another's values.
   -------------------------------------------------------------------------- */
.arc-dh-loc.e-con { padding: 7rem 0; gap: 0 !important; background: var(--surface-alt); }
.arc-dh-loc > .arc-dh-loc-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding-inline: var(--gutter); gap: 0 !important;
}
/* The head is capped 620 and left-aligned; the gallery band's head below is
   centred and capped 680. Two heads, two caps — measured, not shared. */
.arc-dh-loc .arc-dh-loc-head.e-con {
  max-width: 620px; width: 100%; padding: 0 !important; gap: 0 !important;
  align-items: stretch !important; margin: 0 0 52px !important;
}
.arc-dh-loc .arc-dh-loc-eyebrow.elementor-widget {
  display: flex; margin: 0 !important; padding: 3px 0 1px; line-height: 0;
}
.arc-dh-loc .arc-dh-loc-h2.elementor-widget { margin: 14px 0 0 !important; }
.arc-dh-loc .arc-dh-loc-p.elementor-widget { margin: 16px 0 0 !important; }
.arc-dh-loc .arc-dh-loc-p p {
  font-family: var(--font-sans); font-weight: 400; font-size: 1.05rem; line-height: 1.7;
  color: var(--text-secondary); margin: 0;
}

/* the three location rows */
.arc-dhl { display: flex; flex-direction: column; gap: 56px; }
.arc-dhl-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 40px; align-items: stretch; }
@media (max-width: 900px) { .arc-dhl-row { grid-template-columns: 1fr; } }

/* map — a keyless Google embed, so there is no API key and no billing account
   to provision. The grayscale filter is the reference's. */
.arc-dhl-map {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--arc-sand); border: 1px solid var(--border-hair); min-height: 340px;
}
.arc-dhl-map iframe {
  width: 100%; height: 100%; min-height: 340px; border: 0; display: block;
  filter: grayscale(1) contrast(1.03);
}
.arc-dhl-pin {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.arc-dhl-pin__dot {
  width: 15px; height: 15px; border-radius: 50%; background: var(--text-primary);
  border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.arc-dhl-pin__label {
  margin-top: 6px; background: var(--surface-inverse); color: #fff;
  font-family: var(--font-sans); font-size: 0.66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 10px;
  border-radius: var(--radius-pill); white-space: nowrap;
}

/* the right-hand column: heading row, then the paged pair */
.arc-dhl-col { display: block; }
.arc-dhl-head { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.arc-dhl-head__ico { display: inline-flex; color: var(--text-primary); }
/* line-height NORMAL on both, explicitly. The reference inherits normal from the page;
   this document inherits Elementor's heading default (1.2 -> 35.52px on a 29.6px h3), which
   is half a pixel short of normal's 36 and made every location row 0.5px short. Half a pixel
   is still a difference, and three rows of it is 1.5 on the section. */
.arc-dhl-head__title {
  font-family: var(--font-display); font-weight: 400; font-size: 1.85rem;
  line-height: normal; margin: 0; color: var(--text-primary);
}
.arc-dhl-head__count { font-size: 0.85rem; line-height: normal; color: var(--text-muted); }

.arc-dhl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .arc-dhl-pair { grid-template-columns: 1fr; } }
/* A hidden page must leave the grid entirely, not merely go invisible — [hidden] is only
   display:none by UA default and Elementor's reset does not touch it, but say it anyway:
   any rule that sets display on .arc-dhl-slot would otherwise revive a hidden page. */
.arc-dhl-slot[hidden] { display: none !important; }

.arc-dhl-card {
  display: flex; flex-direction: column; background: var(--surface-card);
  border: 1px solid var(--border-hair); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow-xs);
}
.arc-dhl-card__media {
  position: relative; height: 220px; overflow: hidden; background: var(--arc-sand);
}
/* Elementor renders images inline-block; that baseline descender compounds inside a fixed
   220px well and pushes the chip off-centre. Same trap as the gallery tiles.
   ⚠️ width AND height carry !important because `.elementor img{height:auto;max-width:100%}`
   is (0,1,1) and this class is (0,1,0) — Elementor's reset WINS. Without it the img keeps
   its natural ratio inside the 220px well and overflows it: 242.44 for a landscape photo,
   544.53 for The Marlowe's portrait at 1920, so object-fit:cover never crops and the card
   shows the TOP of the photo, clipped, instead of its centre. Geometry-only QA cannot see
   this — the well stays 220 and every text row stays correct. */
.arc-dhl-card__img {
  width: 100% !important; height: 100% !important; object-fit: cover; display: block !important;
  max-width: none !important;
}
.arc-dhl-card__chip {
  position: absolute; top: 14px; left: 14px;
  background: rgba(18, 17, 16, 0.55); color: #fff;
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0.4rem 0.75rem; border-radius: var(--radius-sm);
}
.arc-dhl-card__chip.is-open { background: var(--arc-black); }

.arc-dhl-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; }
.arc-dhl-card__name {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 500;
  color: var(--text-primary); margin: 0 0 14px; line-height: normal;
}
.arc-dhl-card__meta { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.arc-dhl-card__metarow {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-secondary);
}
/* the address row aligns to the TOP because it wraps to two lines; the hours row does not */
.arc-dhl-card__metarow--addr { align-items: flex-start; line-height: 1.6; }
/* ⚠️ The two meta icons are NOT styled the same, and the difference is load-bearing.
   The reference gives the HOURS icon span display:inline-flex and gives the ADDRESS icon
   span no display at all — so the address icon is a blockified flex item whose <svg> sits
   INLINE on a line box, and the resulting descender makes that span 25.05 tall instead of
   18. That is what makes the address row 26.05 and not 23.04.
   Setting inline-flex on both made every single-line-address card exactly 3px short, on
   two of the three locations. Same family as the USPs icon defect: an inline replaced
   element in a line box is taller than the element. Reproduce the mechanism. */
.arc-dhl-card__metaico { flex: none; color: var(--text-muted); }
.arc-dhl-card__metarow:not(.arc-dhl-card__metarow--addr) .arc-dhl-card__metaico { display: inline-flex; }
.arc-dhl-card__metarow--addr .arc-dhl-card__metaico { margin-top: 1px; }

.arc-dhl-card__specs {
  display: flex; gap: 20px; padding-top: 14px; margin-bottom: 18px;
  border-top: 1px solid var(--border-hair);
}
.arc-dhl-card__spec {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-sans); font-size: 0.9rem; color: var(--text-secondary);
}
.arc-dhl-card__specico { color: var(--text-primary); display: inline-flex; }
.arc-dhl-card__specval { font-weight: 600; color: var(--text-primary); }

/* ⚠️ 1fr 1fr with THREE buttons, so the third wraps to its own row — that is the
   reference's layout, not an accident. `1fr` is minmax(auto, 1fr), and the button labels do
   not wrap, so the tracks come out unequal (168.89 / 145.98 at 1920) and the row is slightly
   wider than the padded box, eating into the 24px right padding. Reproduce the MECHANISM;
   pinning the measured track widths would break at every other width. */
.arc-dhl-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.arc-dhl-card__actions .arc-btn-el { width: 100%; justify-content: center; white-space: nowrap; }

.arc-dhl-pager {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px;
}
.arc-dhl-pager__arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border-strong);
  background: var(--surface-card); color: var(--text-primary); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
/* ⚠️ HOVER / FOCUS / ACTIVE — scoped to the pager on purpose, and colour is declared as well
   as background. Hello Elementor's reset.css ships the unstyled-button dev warning:

     [type="button"]:focus, [type="button"]:hover, button:focus, button:hover
       { background-color:#c36; color:#fff }

   These arrows are <button type="button">, so that selector is (0,2,0) — it TIES a bare
   `.arc-dhl-pager__arrow:hover` and loses the background only because ours loads later. It was
   never competing for `color`, so the chevron (stroke:currentColor) rendered #FFFFFF on the
   #F8F9FA hover fill — a white arrow on near-white, effectively invisible — and on :focus,
   where we had no rule at all, the whole 46px circle painted #c36 magenta.
   Scoping under .arc-dhl-pager makes these (0,3,0), which wins outright and also survives the
   foundation-level neutraliser the doctrine recommends (body …:hover is (0,2,1) and would beat
   a single-class component rule). Declare colour AND background on every state, never one.

   The reference's states, measured (React sets them inline via onMouseEnter, so there are no
   stylesheet rules to read — the values below come from a driven pointer, not a CSS scan):
     hover  → background #F8F9FA (--surface-alt), colour #14161A, stroke #14161A
     active → identical to hover; the reference has no distinct pressed state
     focus  → background stays #FFFFFF (--surface-card), colour #14161A */
.arc-dhl-pager .arc-dhl-pager__arrow:hover,
.arc-dhl-pager .arc-dhl-pager__arrow:active {
  background: var(--surface-alt);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.arc-dhl-pager .arc-dhl-pager__arrow:focus {
  background: var(--surface-card);          /* focus does NOT take the hover fill */
  color: var(--text-primary);
  border-color: var(--border-strong);
}
/* hover wins when the button is both focused and hovered (source order settles the tie) */
.arc-dhl-pager .arc-dhl-pager__arrow:focus:hover {
  background: var(--surface-alt);
}
.arc-dhl-pager__count {
  font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* Head typography. ⚠️ EVERY heading selector on this project carries `.elementor-widget`
   and `!important` on weight and colour: Elementor writes an UNSCOPED heading-colour
   default into the generated stylesheet of every document containing a Heading widget, and
   at a tied (0,2,0) that sheet wins on load order. Creating one library template silently
   turned the Hero H1, USPs H2 and Why H2 to ink while every geometry check stayed green.
   Do not "tidy" .elementor-widget out of these. */
.arc-dh-loc .arc-dh-loc-eyebrow.elementor-widget .elementor-heading-title {
  display: block; width: auto;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.18em; line-height: 15px; margin: 0;
  color: var(--text-accent) !important;
}
.arc-dh-loc .arc-dh-loc-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: var(--fs-display-md); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text-primary) !important; margin: 0;
}

/* ⚠️ THE GRID ITEM IS THE SLOT, NOT THE CARD, and that difference cost 9.68px per card.
   A grid item's automatic minimum size is its min-content UNLESS its overflow is not
   visible. The reference's card IS the grid item and carries overflow:hidden, so its
   automatic minimum is 0 and the pair's tracks are pure `1fr 1fr` (365.203 each at 1920).
   This build wraps each card in .arc-dhl-slot so the pager can hide a whole page — and the
   slot has no overflow of its own, so ITS automatic minimum was the card's min-content
   (374.875, inflated by the nowrap action buttons, which deliberately overflow the card's
   padding by 9.675px exactly as they do on the reference).
   That widened every card, which widened the column past its 1.15fr share, which froze
   track 2 and left track 1 taking only 85% of what remained — 457.5 instead of 557.594,
   a 100px error in the map from one missing declaration.
   min-width:0 restores the automatic minimum the card's overflow:hidden would have given. */
.arc-dhl-slot { min-width: 0; }

/* ⚠️ LINE-HEIGHT. The reference's card body inherits `normal` from the page; this build
   inherits Elementor's Kit body line-height (1.5 -> 24px), and that alone made every card
   9.22px too tall: the meta rows +3.61, the specs row +3.61, and each action button +2.5
   over two rows = +5. Set the reference's own values explicitly rather than relying on
   inheritance, which differs between the two documents by construction.
   The address row is the one row the component gives an explicit 1.6 — because it wraps to
   two lines and the others do not. */
.arc-dhl-card__metarow { line-height: normal; }
.arc-dhl-card__metarow--addr { line-height: 1.6; }
.arc-dhl-card__specs,
.arc-dhl-card__spec { line-height: normal; }
/* Scoped to this section, NOT to .arc-btn-el globally: that class is shared with the
   contact, about and home bands, which are already verified at 0.0px with the Kit's
   line-height. Fixing it here is a 1-line override; fixing it globally would re-open
   every page that uses a button. */
.arc-dhl-card__actions .arc-btn-el { line-height: normal; }

/* --------------------------------------------------------------------------
   Section 4 — "A look inside our display homes". A 2-up carousel over the same
   twelve photographs the homepage strip uses, dropping to 1-up at 820.

   ⚠️ 820 IS THIS COMPONENT'S OWN BREAKPOINT and lives ONLY here, in CSS. It is
   not one of Elementor's (1039 / 679), not the location row's 900, not the
   card pair's 760 and not the footer's 560. The JS derives perView by
   MEASURING the rendered tile width, so the number exists in one language and
   the two cannot drift apart — the mistake that shows one tile while paging
   by two.
   -------------------------------------------------------------------------- */
.arc-dh-gal.e-con { padding: 8.5rem 0; gap: 0 !important; background: var(--surface-page); }
.arc-dh-gal > .arc-dh-gal-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding-inline: var(--gutter); gap: 0 !important;
}
/* Centred and capped 680 — the location band above is left-aligned and capped 620.
   Two heads, two caps, measured separately. */
/* ⚠️ align-items:STRETCH, not center. Centring the flex column shrink-wraps every child
   to its own text width, so the H2 measured 671.59 instead of 680 at 1920 and 468.89 instead
   of 680 at 1024 — and a heading that is narrower than its cap wraps at the wrong place.
   The head is centred by margin:auto on the block and text-align on the text; the CHILDREN
   still need to span the full 680. */
.arc-dh-gal .arc-dh-gal-head.e-con {
  max-width: 680px; width: 100%; margin: 0 auto 48px !important;
  padding: 0 !important; gap: 0 !important; align-items: stretch !important; text-align: center;
}
.arc-dh-gal .arc-dh-gal-eyebrow.elementor-widget {
  display: flex; justify-content: center; margin: 0 !important; padding: 3px 0 1px; line-height: 0;
}
/* ⚠️ .elementor-widget in the selector and !important on weight and colour — Elementor writes
   an unscoped heading-colour default into every document's generated stylesheet and wins a
   (0,2,0) tie on load order. Do not tidy these out. */
.arc-dh-gal .arc-dh-gal-eyebrow.elementor-widget .elementor-heading-title {
  display: block; width: auto;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.18em; line-height: 15px; margin: 0;
  color: var(--text-accent) !important;
}
.arc-dh-gal .arc-dh-gal-h2.elementor-widget { margin: 14px 0 0 !important; }
.arc-dh-gal .arc-dh-gal-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: var(--fs-display-md); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text-primary) !important; margin: 0;
}

.arc-dhg { display: block; }
.arc-dhg__viewport { overflow: hidden; border-radius: var(--radius-sm); }
.arc-dhg__track {
  display: flex; gap: 24px;
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
/* The tile width IS the breakpoint. 2-up above 820, 1-up at or below it — expressed as the
   reference's own calc() so the gap is subtracted exactly once per gutter. */
.arc-dhg__tile {
  flex: 0 0 calc((100% - 24px) / 2); min-width: 0;
  height: clamp(300px, 34vw, 480px);
  position: relative; display: block; padding: 0; border: 0;
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--arc-sand); cursor: zoom-in; text-decoration: none;
  line-height: 0;
}
@media (max-width: 820px) { .arc-dhg__tile { flex: 0 0 100%; } }
/* Elementor renders an <img> inline-block; the baseline descender would show as a strip of
   --arc-sand under every tile inside a fixed-height well. Same trap as the gallery grid. */
.arc-dhg__img {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; display: block !important;
}
.arc-dhg__badge {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  border-radius: var(--radius-pill); background: rgba(18, 17, 16, 0.72); color: #fff;
  display: flex; align-items: center; justify-content: center; line-height: 0;
}

.arc-dhg__controls {
  display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 34px;
}
.arc-dhg__arrow {
  width: 52px; height: 52px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: var(--surface-card);
  color: var(--text-primary); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
/* ⚠️ Same reset.css dev-warning as .arc-dhl-pager__arrow — found by sweeping every bare
   <button> on the built pages after the pager defect, exactly as the doctrine's sweep rule
   requires. This one is worse than the pager's: the hover fill and the chevron both went
   #FFFFFF, so the arrow vanished completely on hover, and :focus painted the 52px circle
   #c36 magenta. Scoped under .arc-dhg__controls for (0,3,0), colour declared alongside
   background on every state. Reference measured: hover #F8F9FA / #14161A, active identical to
   hover, focus background stays #FFFFFF. */
.arc-dhg__controls .arc-dhg__arrow:hover,
.arc-dhg__controls .arc-dhg__arrow:active {
  background: var(--surface-alt);
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.arc-dhg__controls .arc-dhg__arrow:focus {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.arc-dhg__controls .arc-dhg__arrow:focus:hover {
  background: var(--surface-alt); border-color: var(--text-primary);
}
.arc-dhg__dots { display: flex; gap: 8px; }
.arc-dhg__dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill); border: none;
  cursor: pointer; padding: 0; background: var(--border-strong);
  transition: all var(--dur-med) var(--ease-out);
}
.arc-dhg__dot.is-active { width: 28px; background: var(--text-primary); }
@media (prefers-reduced-motion: reduce) {
  .arc-dhg__track, .arc-dhg__dot { transition: none; }
}

/* ==========================================================================
   AWARDS (/awards/, page 25)
   Reference: awards.html. Four sections read from [data-screen-label]:
   Awards Hero > Recent Awards > Awards Night > Testimonials. There is NO news
   band on this page (display-homes has one; awards does not) and Recent Awards
   has NO section heading at all — every heading in that band is a card title.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 1 — hero. The .arc-chero page-title band with an --awards modifier.
   Reuse checked against the reference's DOM, not assumed: img + the same two
   absolutely-positioned wash divs + a content column of crumbs > h1 > lead.
   Measured against the BASE block, only two of its values differ (lead cap and
   the wrap's bottom padding) and the scrim stops match --dh/--team exactly.
   ⚠️ min-height and object-position are deliberately NOT overridden — the
   reference is 500px at 50% 50%, which is precisely what the base already sets.
   Writing them again would look like intent and hide that they are shared.
   The band is 516.75 tall because its CONTENT (150 + 286.75 + 80) exceeds 500,
   not because a height was set.
   Every selector carries BOTH classes so it is (0,3,0)+ and beats the base
   regardless of source order.
   -------------------------------------------------------------------------- */
/* Same stops as --dh and --team, read off this reference's own wash div (the
   reference paints the washes as real children, so they cannot be read from the
   section's pseudo-elements — the probe that tries returns background-image:none
   and reads as "no scrim"). The base block carries CONTACT's .8/.48/.22. */
.arc-chero.arc-chero--awards.e-con::after {
  background-image: linear-gradient(90deg, rgba(18, 17, 16, 0.82) 0%, rgba(18, 17, 16, 0.46) 60%, rgba(18, 17, 16, 0.2) 100%);
}
/* 150px 64px 80px, same as About and --dh; the base's 64px bottom is Contact's. */
.arc-chero.arc-chero--awards > .e-con { padding-bottom: 80px; }
/* Do not let Contact's 500px column cap through — this reference has no column,
   so the H1 is capped on ITSELF (below) and only the lead is capped here. */
.arc-chero.arc-chero--awards .arc-chero-col.e-con { max-width: none !important; }
/* 560 here; 540 on About, 500 on Contact, 560 on --dh. Measured per hero. */
.arc-chero.arc-chero--awards .arc-chero-lead p { max-width: 560px; }
/* ⚠️ The H1 cap is an EM, not a px. It computes to 720.115 at both 1440 and 1024
   (font-size 60.8) and 492.71 at 390 (font-size 41.6) — and 720.115/60.8 ==
   492.71/41.6 == 11.844 exactly. Pinning 720px would be right at two widths and
   46% too wide at 390, where it would stop wrapping where the reference wraps.
   Reproduce the mechanism. */
.arc-chero.arc-chero--awards .arc-chero-h1 .elementor-heading-title { max-width: 11.844em; }
/* The rating row — the fourth element in this hero's column, which no other
   .arc-chero consumer has. It renders [arc_google_rating tone="dark"], the same
   component the reference uses (score + 5 stars + "Google · N reviews"), so the
   score and count stay a single ACF source rather than being typed in twice. */
/* The rating row is now the shared arcadia-hero-rating TEMPLATE, embedded as a native
   widget stack, so the .arc-chero-rating shortcode-wrapper rules that used to live here are
   gone with it — including the line-height:normal override, which existed only because the
   shared .arc-grating sets 1.4. The native Headings carry their own line-heights.
   Spacing for the embed lives with the component, in arc-home.css. */

/* --------------------------------------------------------------------------
   Section 2 — Recent Awards (.arc-aw). CPT feed, plain HTML from
   [arc_awards_grid] (G1). Class prefix arc-aw-* — checked mechanically against
   every existing token in this project before it was chosen, not assumed free.

   ⚠️ This band has NO section heading. Every heading in it is a card title.
   Nothing was invented to fill the gap; the reference simply opens on the grid.
   -------------------------------------------------------------------------- */
.arc-aw.e-con { background: var(--surface-card); padding: 112px 0; }
/* The reference's band inset is 57.6 at 1440, 40.95 at 1024, 20 at 390 — which is
   exactly clamp(1.25rem, 4vw, 4rem), the project's own --gutter, not three steps. */
.arc-aw .arc-aw-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter);
}
.arc-aw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* ⚠️ 1fr 1fr, NOT the 650.406px the DOM reports at 1440. The track was derived across six
   widths (664 / 650.4 / 459 / 365.2 / …), and every one equals (container − 24) ÷ 2. A fixed
   px track reads identical at the width you measured and breaks at every other one. */
@media (max-width: 720px) { .arc-aw-grid { grid-template-columns: 1fr; } }

.arc-aw-card {
  display: flex; flex-direction: row; overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-hair);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  /* ⚠️ A FIXED height, and it has to be. The card's own content comes to 137.27 (the media
     well's 93.27 graphic + 42 padding + 2 border), so nothing about the content produces 164
     — the reference declares `.arc-awards-grid article { height: 164px }` outright. That is
     why the card stays exactly 164 at every width while its copy grows and the org wraps: the
     body is centred inside a fixed box. Derived from the reference's own rule, after arithmetic
     from the measured boxes refused to reach 164 from any combination of its children. */
  height: 164px;
}
/* Hover measured with a driven pointer, not read from a stylesheet — the reference is React
   and applies this as an inline style, so a :hover rule scan finds nothing and reports "no
   hover" on a card that has one. Border and background do NOT change. */
.arc-aw-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) {
  .arc-aw-card { transition: none; }
  .arc-aw-card:hover { transform: none; }
}


.arc-aw-card__media {
  flex: 0 0 auto; width: 172px; background: var(--surface-inverse);
  /* ⚠ The hairline between the well and the body. Missed on the first pass because it is
     invisible in a geometry read — and it is also what makes the graphic 129 wide rather than
     130: 172 - 42 padding - 1 border. Reading the reference's own markup gave both. */
  border-right: 1px solid var(--border-hair);
  display: flex; align-items: center; justify-content: center; padding: 21px;
}
/* ⚠ filter: brightness(0) invert(1) is the whole point of this element. The source graphic
   is a full-colour badge; the reference paints it PURE WHITE on the near-black well. A filter
   changes appearance without moving a single rect, so every geometry, colour and box check
   passes with the original artwork sitting there in its own colours. §2c lists filter among
   the visual-effect properties that must be in a computed-style comparison for exactly this
   reason, and this harness now asserts it.
   No width/height here on purpose: the reference sets neither, and lets max-width/max-height
   against the padded well derive 129x93.27. Reproduce the mechanism. Elementor's
   .elementor img{height:auto;max-width:100%} agrees with both, so no !important is needed. */
.arc-aw-card__img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  filter: brightness(0) invert(1);
}
.arc-aw-card__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.4rem 1.6rem;
}
.arc-aw-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
/* line-height: normal on each row, never a number. The reference sets none, so each row takes
   Montserrat's own metric at its own size - chip 11, year 15, org 14, three different ratios.
   The Kit's inherited body line-height would inflate all three. Sizes and tracking are kept in
   the reference's own rem/em, not the px they resolve to, so they scale with the root. */
.arc-aw-card__chip {
  background: var(--arc-black); color: #fff;
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); line-height: normal;
}
.arc-aw-card__year {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
  color: var(--text-secondary); letter-spacing: 0.04em; line-height: normal;
}
.arc-aw-card__title {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 500;
  line-height: 1.25; letter-spacing: -0.01em; color: var(--text-primary);
  margin: 0 0 10px;
}
.arc-aw-card__org {
  font-family: var(--font-sans); font-size: 0.72rem; font-weight: 400;
  color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase;
  line-height: normal;
}

/* Grid stacks at 720, card flips to a column at 420. Both are the reference's own declared
   values, confirmed three ways: the rule text, window.matchMedia, and computed flex-direction
   either side (421 is still a row, 420 is a column).
   ⚠️ 420 was first written here as 424 off a misread bisection — the fine sweep showed 424,
   423, 422 and 421 all still row, and the coarse bracket (425 row / 420 column) was reported
   as if the flip sat at 424. A breakpoint wrong by four pixels is wrong for every width in
   between, and nothing else in the build would have shown it. These are NOT the project's
   other breakpoints (900 / 820 / 760 elsewhere); do not tidy them together. */
@media (max-width: 420px) {
  .arc-aw-card { flex-direction: column; height: auto; }
  /* the hairline moves from the right edge to the bottom when the well goes full width */
  .arc-aw-card__media {
    width: 100%; height: 160px;
    border-right: none; border-bottom: 1px solid var(--border-hair);
  }
}

/* --------------------------------------------------------------------------
   Section 3 — Awards Night (.arc-anight). The SAME marquee component as the
   homepage Gallery strip, checked by structure before it was reused: identical
   track classes on the reference (arc-marquee__track--slow), identical
   arc-scroll 70s linear, identical 16px gap and 8px track inset, identical 12
   photos rendered twice for the seamless loop. Three things differ, all here.
   -------------------------------------------------------------------------- */
.arc-anight.e-con {
  padding: 136px 0; background: var(--surface-alt); overflow: hidden; gap: 0 !important;
}
/* Head — capped 640 and centred, same shape as the Gallery head. */
.arc-anight .arc-anight-head.e-con {
  max-width: 640px; margin: 0 auto 48px; text-align: center;
  padding: 0 var(--gutter); gap: 0 !important; align-items: stretch !important;
}
.arc-anight-eyebrow { display: flex; justify-content: center; padding: 3px 0 1px; line-height: 0; }
.arc-anight-eyebrow.elementor-widget .elementor-heading-title {
  display: block; width: auto;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--text-accent) !important; margin: 0; line-height: normal;
}
/* ⚠️ white-space stays NORMAL here. The homepage Gallery h2 sets nowrap; this reference's
   does not, and copying the sibling's value would stop this heading wrapping where the
   design wraps it the moment the copy grows. Measured per consumer, not inherited. */
.arc-anight-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-md);
  line-height: 1.12; color: var(--text-primary); margin: 14px 0 16px; white-space: normal;
}
.arc-anight-lead p {
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 400; line-height: 1.7;
  color: var(--text-secondary); margin: 0;
}
/* Strip — full-bleed, so this widget must NOT take the capped/gutter treatment. */
.arc-anight .arc-anight-strip.elementor-widget {
  max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important;
}
/* The three differences from the homepage strip, scoped so the verified homepage is untouched:
   tiles are 320x220 rather than 420x300; the tile is not a link, so the pointer stays default;
   and there is NO hover zoom — confirmed by driving a real pointer over the reference's tile
   and reading the image transform, which stays `none` on both sides. */
.arc-anight .arc-gal__tile { width: 320px; height: 220px; cursor: auto; }
.arc-anight .arc-gal__tile:hover .arc-gal__img { transform: none; }

/* ==========================================================================
   FAQs (/faqs/, page ?)
   Reference: faqs.html. Three sections read from [data-screen-label]:
   FAQ Hero > FAQs > Contact CTA.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 1 — hero. The .arc-chero page-title band with a --faqs modifier and
   NO image widget.
   ⚠️ This is the only inner hero on the site with no photograph: a flat
   #111315 band. The base already paints --surface-inverse, so the colour comes
   free — but the base also draws a 90deg scrim over it, and the reference has
   NO wash at all (probed: zero absolutely-positioned gradient children, and
   both ::before and ::after background-image read `none`). Left in place the
   scrim would darken a flat band by an amount no one would think to question.
   The base's 500px min-height has to go too: this band is 421.9 and would be
   silently stretched to 500.
   -------------------------------------------------------------------------- */
.arc-chero.arc-chero--faqs.e-con { min-height: 0; }
/* content:none removes the pseudo entirely. Deliberately not `background:none`,
   which would leave a transparent box still participating in the stack. */
.arc-chero.arc-chero--faqs.e-con::after { content: none; }
/* 168px top / 80px bottom — measured, and both differ from every other hero
   (Awards is 150/80, Contact 150/64). */
.arc-chero.arc-chero--faqs > .e-con { padding: 168px var(--gutter) 80px; }
.arc-chero.arc-chero--faqs .arc-chero-col.e-con { max-width: none !important; }
/* 620 here. Five heroes, five lead caps: 500 Contact, 540 About, 560 Awards and
   --dh, 620 FAQs. Measured per hero, never inherited from the sibling. */
.arc-chero.arc-chero--faqs .arc-chero-lead p { max-width: 620px; }
/* ⚠️ The crumbs are a SHARED component and this band is the only consumer that
   dims them: .6 / .85 here against .8 / 1.0 on Awards. With no scrim behind the
   text the design compensates in the ink instead. Scoped, never global — every
   other page's crumbs are already verified. */
/* ⚠️ !important is required on the LINK, and only on the link. The shared crumb component
   declares `.arc-crumbs--dark .arc-crumbs__link { color: rgba(255,255,255,.8) !important }`,
   and an !important at (0,2,0) beats a plain declaration at (0,3,0) — specificity only settles
   ties between declarations of equal importance. The CURRENT segment carries no !important, so
   it needs none here; matching them "for consistency" would hide which one is actually
   fighting something. */
.arc-chero.arc-chero--faqs .arc-crumbs__link { color: rgba(255, 255, 255, 0.6) !important; }
.arc-chero.arc-chero--faqs .arc-crumbs__current { color: rgba(255, 255, 255, 0.85); }
/* 0.72 here against the base's 0.85 — this band has no scrim, so the design carries the
   contrast in the ink instead. Same reasoning as the crumbs above. */
.arc-chero.arc-chero--faqs .arc-chero-lead p { color: rgba(255, 255, 255, 0.72); }

/* --------------------------------------------------------------------------
   Section 2 — the FAQ band (.arc-faqp): a sticky category rail beside five
   grouped accordions.
   -------------------------------------------------------------------------- */
.arc-faqp.e-con { background: var(--surface-card); padding: 96px 0 64px; }
.arc-faqp .arc-faqp-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter);
}
/* 260px fixed + 1fr, gap 64. Derived across widths: at 1024 the second track is 618.09, which
   is (942.09 - 260 - 64) — so the rail is fixed and the content column flexes, not both. */
.arc-faqp-grid { display: grid; grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }

/* ---- the rail ---- */
/* ⚠️ STICKY LIVES ON THE WRAPPER, NOT THE RAIL — and this was a real defect (2026-08-31).
   position:sticky was declared on .arc-faqp-rail and computed correctly, and the rail still
   scrolled away: a sticky element can only travel inside its own containing block, and here
   that was the Elementor Shortcode widget wrapper, which is exactly as tall as the rail
   (277.9 vs 277.9). Zero travel, so sticky is a no-op. Nothing about the computed style says
   so — `position: sticky` and `top: 140px` both read back correctly — which is why this
   survived a green 156-check harness. It is only visible by SCROLLING and watching the rail's
   viewport position: the reference pins at 140 from y=400 through y=1400; ours went 517.9 →
   117.9 → -282.1 → -882.1, straight off the top.
   Moving it to the grid item gives it the grid (1844px) as its containing block. The rail
   itself goes static.
   Standing lesson: a sticky/fixed element is not verified until it has been scrolled past. */
.arc-faqp-railwrap.elementor-widget { position: sticky; top: 140px; align-self: start; }
.arc-faqp-rail { position: static; }
/* ⚠️ The rail is a CARD, not bare links on the page background. Reference: white fill, a 1px
   --border-hair edge, 2px radius and a soft drop shadow. Ours shipped transparent with no
   border and no shadow — geometry-identical and visually a different component, which no
   metric check would ever catch because every metric was right.
   The shadow is NOT one of the project's tokens: 0 10px 34px rgba(20,22,26,.08) sits between
   --shadow-md (0 8px 24px rgba(66,58,45,.09)) and --shadow-lg (0 20px 48px rgba(66,58,45,.12)),
   and its ink is the near-black rather than the warm brown the other two use. Written
   literally rather than rounded to the nearest token, because a sticky panel's shadow is the
   thing the eye tracks while the page moves under it. */
.arc-faqp-rail {
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 34px rgba(20, 22, 26, 0.08);
}
.arc-faqp-rail__hd {
  height: 40px; display: flex; align-items: center; padding: 0 20px;
  background: var(--surface-inverse); color: #fff;
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; line-height: normal;
}
/* 8px inside the card, so the links inset to 242 rather than spanning the full 260. This is
   not cosmetic: at 242 "Home designs & customisation" wraps to two lines and the row grows to
   58.4, which is what the reference renders. At 260 it fits on one line and the whole rail is
   short. The header strip is deliberately NOT inset — it spans the card's full inner width. */
.arc-faqp-rail__nav { display: block; padding: 8px; }
.arc-faqp-rail__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0.7rem 0.85rem;
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; line-height: normal;
  color: var(--text-secondary); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
/* ⚠️ The chevron is dimmer than the label and stays dim when the link is active — it is
   var(--text-muted) on both, not currentColor. Reading it off the reference rather than
   assuming it inherits is what keeps the active state from over-brightening. */
/* ⚠️ The chevron follows currentColor — it brightens with the link when a category becomes
   active. Pinning it to --text-muted looked right at rest and froze it grey on the active
   link, which is exactly the state anyone actually looks at. */
.arc-faqp-rail__link .arc-chev { flex: none; }
/* ⚠️ Hello's reset paints every bare <a> (#c36 base, #336 on hover) and the Kit sets its own
   link colour, so this needs colour declared on the BASE rule with !important — that
   immunises rest, hover, focus and active in one declaration rather than four rules that each
   have to win their own fight. Same lesson as the card action buttons. */
.arc-faqp-rail__link { color: var(--text-secondary) !important; }
.arc-faqp-rail__link:hover { color: var(--text-primary) !important; background: var(--surface-alt); }
/* the active link also takes a fill, not just weight and ink — measured on the reference,
   where the current category sits on --surface-alt */
.arc-faqp-rail__link.is-active {
  color: var(--text-primary) !important; font-weight: 600; background: var(--surface-alt);
}

/* ---- the groups ---- */
.arc-faqp-groups { display: block; }
/* ⚠️ Elementor's default container gap (20px) was still in force here. It put 20px between
   the group heading and its first question where the reference has 9 — the heading's own 8px
   margin plus a pixel. Every OTHER container on this page had its gap zeroed explicitly; this
   one was missed, and 11px of extra air five times over is exactly the kind of drift that
   reads as "the spacing is off" without pointing at anything. */
.arc-faqp-group.e-con { gap: 0 !important; }
.arc-faqp-group + .arc-faqp-group { margin-top: 56px; }
/* scroll-margin so an anchor jump clears the sticky header instead of hiding the heading
   under it — the same 140px the rail is pinned at. */
.arc-faqp-group { scroll-margin-top: 140px; }
.arc-faqp-grouptitle.elementor-widget .elementor-heading-title {
  font-family: var(--font-display);
  /* ⚠️ FLUID, not 2rem. Measured 32 / 30.72 / 24 at 1440 / 1024 / 390 — and 30.72 is exactly
     3vw of 1024, so the value is clamp(1.5rem, 3vw, 2rem): capped at 1440, fluid at 1024,
     floored at 390. A fixed 2rem is right at one width and 33% too large at mobile. */
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 300;
  line-height: 1.15; color: var(--text-primary); margin: 0 0 8px;
}
/* ---- accordion chrome ----
   Elementor's Nested Accordion ships two defaults that always need overriding, both visible
   only in a render: the icon span is order:-1 (plus on the LEFT), and each item's content
   container carries a default border top/bottom. */
/* ⚠️ The TOP rule lives on the CONTAINER, not on the first item. Each row carries only a
   border-BOTTOM (reference and build agree: 0/0/1/0), so the line above the first question has
   to come from the wrapper — and without it the list opened with no rule at all while every row
   below it had one. Owner-reported.
   Read from the reference's own container: border 1/0/0/0 solid rgb(234, 236, 239).
   Same family as the specs card's missing 1px border: a border paints without moving a box, so
   no geometry check on this page could see it — 198 checks were green over it. */
.arc-faqp-acc { border-top: 1px solid var(--border-hair); }
.arc-faqp-acc .e-n-accordion-item { border-bottom: 1px solid var(--border-hair); }
.arc-faqp-acc .e-n-accordion-item > .e-con { border: 0 !important; }
.arc-faqp-acc .e-n-accordion-item-title {
  /* display/justify are NOT inherited from the widget: Elementor leaves justify-content at
     normal, so the toggle glyph sits next to the question instead of at the far edge. */
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0; gap: 24px;
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 400;
  line-height: normal; color: var(--text-primary); letter-spacing: -0.01em;
  background: transparent; border: 0;
}
/* line-height normal on the title AND its inner text node. Setting it only on the summary
   left the row 4px short per line (67 against 71, and 8px short at 390 where the question
   wraps to two) because Elementor styles an inner element that the summary does not reach. */
.arc-faqp-acc .e-n-accordion-item-title,
.arc-faqp-acc .e-n-accordion-item-title > * { line-height: normal; }
/* ⚠ display:block on the question text. Elementor ships it as a FLEX container, whose height
   is its content (19) rather than its line box (23) — so the row came out 4px short per line,
   and 8px at 390 where the question wraps to two. The reference renders this span as a block;
   reproduce the mechanism rather than padding the difference back in. */
.arc-faqp-acc .e-n-accordion-item-title-header { display: block; }
/* ⚠ The question TEXT lives one level deeper again, in .e-n-accordion-item-title-text, and
   Elementor gives that its own 16px. Typography set on the <summary> is inherited by nothing
   that paints — the row rendered at 16px while every check that read the summary reported a
   correct 18.4. Style the element the reader actually sees. */
.arc-faqp-acc .e-n-accordion-item-title-text {
  display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 400;
  line-height: normal; letter-spacing: -0.01em; color: var(--text-primary);
}
/* ---- the toggle: a hairline cross that ROTATES, not a FontAwesome plus/minus swap ----
   ⚠️ Three things were wrong here at once, and all three are G17's warning made concrete.
   Elementor's Nested Accordion icon picker is FontAwesome-only, so the widget shipped a solid
   FA plus (viewBox 0 0 448 512) at 13.1×15 in --text-muted #9AA0A6. The reference draws an
   11×11 box holding two 1.5px bars in --text-primary #14161A: a hairline cross, square, and
   nearly twice as dark. Next to it the FA glyph reads as a different, heavier icon set — the
   exact "two clashing icon vocabularies" failure the doctrine describes.
   ⚠️ And the MECHANISM is different too, which is the part a size fix alone would have missed:
   the reference does not swap + for −. Both bars stay at opacity 1 and full size in both
   states (measured, not inferred) and the 11×11 wrapper takes rotate(45deg) — so the open
   state is an ×, not a minus. Driven on the reference before this was written.
   Drawn with the element's own two pseudos rather than a custom widget (G13) or a second icon
   file (G17): the glyph is two rectangles, and two rectangles is what ::before and ::after are. */
.arc-faqp-acc .e-n-accordion-item-title-icon {
  order: 1 !important;
  position: relative;
  flex: 0 0 11px; width: 11px; height: 11px;
  color: var(--text-primary);
  transition: transform var(--dur-med) var(--ease-out);
}
/* the FA <svg>s Elementor insists on rendering — both the opened and closed spans */
.arc-faqp-acc .e-n-accordion-item-title-icon > * { display: none !important; }
.arc-faqp-acc .e-n-accordion-item-title-icon::before,
.arc-faqp-acc .e-n-accordion-item-title-icon::after {
  content: ""; position: absolute; background: currentColor;
}
.arc-faqp-acc .e-n-accordion-item-title-icon::before {   /* horizontal bar */
  left: 0; top: 50%; width: 11px; height: 1.5px; transform: translateY(-0.75px);
}
.arc-faqp-acc .e-n-accordion-item-title-icon::after {    /* vertical bar */
  top: 0; left: 50%; width: 1.5px; height: 11px; transform: translateX(-0.75px);
}
.arc-faqp-acc .e-n-accordion-item[open] .e-n-accordion-item-title-icon { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .arc-faqp-acc .e-n-accordion-item-title-icon { transition: none; }
}
.arc-faqp-acc .arc-faqp-a p {
  /* 1rem/1.8 here — the answer copy is a notch smaller and looser than this project’s usual
     1.05rem/1.7 lead. Measured, not inherited from the sibling components. */
  font-family: var(--font-sans); font-size: 1rem; font-weight: 400; line-height: 1.8;
  color: var(--text-secondary); margin: 0 0 1.5rem;
}

@media (max-width: 1023px) {
  /* the rail stops being a rail: one column, and it stacks above the questions rather than
     pinning beside them */
  .arc-faqp-grid { grid-template-columns: 1fr; gap: 28px; }
  /* position only — the top offset stays declared, exactly as the reference leaves it. It has
     no effect on a static box, and resetting it to auto is a difference with no reason.
     ⚠️ This now targets the WRAPPER, because that is where sticky lives. Left on .arc-faqp-rail
     it would un-stick nothing and the rail would still pin at every width. */
  .arc-faqp-railwrap.elementor-widget { position: static; }
}

/* --------------------------------------------------------------------------
   Section 3 — Contact CTA (.arc-faqp-cta). Built INLINE, not as a template:
   checked against all eleven reference pages and this band exists on FAQs and
   nowhere else, so there is no second consumer to reuse it from.
   ⚠️ Its head spec is currently identical to .arc-anight-head on the Awards
   page (640 cap, same eyebrow/h2/lead metrics). Deliberately NOT merged into a
   shared class yet: they are different components in the design and could
   legitimately diverge, and consolidating would mean re-verifying a signed-off
   page for no behaviour change. Flagged in project-state as a consolidation
   candidate rather than silently duplicated.
   -------------------------------------------------------------------------- */
.arc-faqp-cta.e-con { background: var(--surface-alt); padding: 112px 0; }
.arc-faqp-cta .arc-faqp-cta-head.e-con {
  max-width: 640px; margin: 0 auto; text-align: center;
  padding: 0 var(--gutter); gap: 0 !important; align-items: stretch !important;
}
.arc-faqp-cta-eyebrow { display: flex; justify-content: center; padding: 3px 0 1px; line-height: 0; }
.arc-faqp-cta-eyebrow.elementor-widget .elementor-heading-title {
  display: block; width: auto;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--text-accent) !important; margin: 0; line-height: normal;
}
.arc-faqp-cta-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-md);
  line-height: 1.12; color: var(--text-primary); margin: 14px 0 16px;
}
.arc-faqp-cta-lead p {
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 400; line-height: 1.7;
  color: var(--text-secondary); margin: 0;
}
/* 28px below the lead. The button itself is the site's existing primary at --lg size, and the
   trailing arrow comes from the site-wide .arc-arrow layer — never a literal → in the label,
   which is how ~13 call sites on an earlier build ended up with an un-styleable glyph. */
.arc-faqp-cta .arc-faqp-cta-btn.elementor-widget { margin-top: 28px !important; }
.arc-faqp-cta .arc-faqp-cta-btn .elementor-button-wrapper { display: flex; justify-content: center; }
/* ⚠ The arrow gap, scoped. The shared .arc-arrow layer separates label and glyph with
   0.55em (7.7px); this reference separates them with a literal SPACE character, which comes
   to ~5.0px once the 0.08em tracking is counted — a 2.7px difference in button width. The
   gap is a variable precisely so a call site can match its own design without anyone
   hand-writing a glyph, so this is what the variable is for. Not changed globally: the layer
   is shared with ~13 verified call sites. */
.arc-faqp-cta .arc-faqp-cta-btn { --arc-arrow-gap: 0.355em; }

/* ==========================================================================
   News (/news/, page 22)
   Reference: news.html. TWO sections read from [data-screen-label]:
   News Hero > News Grid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 1 — hero.
   ⚠️ NOT an .arc-chero modifier, and that was a real decision (D1, owner-approved
   2026-08-31). .arc-chero brings a 500px min-height, two scrim pseudo-elements, a
   photo layer, a breadcrumb row and a lead paragraph. This hero has none of the
   five and adds a control the base has no concept of, so a --news modifier would
   inherit nothing it keeps and would put the shared component at risk every time
   this page changes. The FAQs hero took the modifier route because it kept the
   crumb, the lead and the geometry; this one keeps only "dark band, eyebrow, H1".
   ⚠️ The colour is --arc-black (#14161A), NOT --surface-inverse (#111315).
   Every other dark band on this site is #111315; this reference measures
   rgb(20,22,26). Two tokens that look alike at a glance and differ by 3 points
   per channel — read the measured value, never the neighbouring page's.
   -------------------------------------------------------------------------- */
/* ⚠️ The band is VIEWPORT-HEIGHT driven: min-height: max(389px, 40vh).
   It reads 480 at 1440, 1024 and 390 — the same number at every width — and I first
   recorded that as a fixed 480px. It is not. My survey varied WIDTH only, and 480 is
   40% of the 1200px viewport height I happened to use every single time. Varying the
   height instead: 1200 → 480, 1400 → 560 (both exactly 40vh), and 900 / 700 / 600 /
   500 all → 389, a flat floor. Two exact vh matches and a constant floor at four
   heights is the rule; one number repeated across three widths was a coincidence.
   Lesson for the next hero: a band that measures identically at every width has told
   you nothing about height until you have moved the height.
   Written as min-height + centring so a longer H1 or a third wrapped row grows the
   band rather than spilling out of it. Three levels, mirroring the reference:
   band > padded inner > space-between row. */
.arc-newsp-hero.e-con {
  position: relative;
  min-height: max(389px, 40vh);
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center;          /* column container: the VERTICAL axis */
  align-items: stretch !important;  /* ...and this is the horizontal one */
  background: var(--arc-black);
}
/* ⚠️ THE CONTENT WRAPPER IS CAPPED AT --container-wide (1480px), and shipping without this cap
   was a real defect. Every section harness on this project tests 1440 / 1024 / 390 — all three
   at or below the cap — so all three agreed exactly while the page was wrong at every width
   above 1440: at 1920 the cards rendered 581px against the reference's 434.7, and at 2560 they
   were 794.7. The band itself stays full-bleed (it paints the dark colour edge to edge); it is
   the INNER that stops growing and centres, which is the same shape the site header uses.
   Standing lesson: a max-width is invisible below its own cap. Probe above the widest
   breakpoint or the cap is untested. */
.arc-newsp-hero .arc-newsp-heroinner.e-con {
  flex-direction: column !important;
  gap: 0 !important;
  padding: 192px var(--gutter) 120px !important;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
}
/* the heading block and the filter share one row: space-between, wrapping to
   stacked at 390 where a 240px control will not sit beside a 322.7px H1. */
.arc-newsp-hero .arc-newsp-herorow.e-con {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 32px !important;
  padding: 0 !important;
  width: 100%;
}
.arc-newsp-hero .arc-newsp-herol.e-con {
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  width: auto;
  flex: 0 1 auto;
}
/* ⚠️ padding-top: 3px is not a nudge. The reference's eyebrow is an inline-flex span
   whose 15px box sits inside a block whose strut is 3px taller, so the heading block
   measures 92.3 where the visible ink measures 89.3. Zeroing the line-height (which is
   what keeps Elementor's own leading out of the way) removes that 3px too, and the
   whole row then centres 1.5px high — visible as every element below it sitting off by
   the same amount. Reproducing the leading explicitly is honest about where the 3px
   comes from; the same pattern is already used by .arc-news-eyebrow on the homepage. */
.arc-newsp-hero-eyebrow.elementor-widget { line-height: 0; padding-top: 3px; }
.arc-newsp-hero-eyebrow.elementor-widget .elementor-heading-title {
  display: inline-block;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0; line-height: normal;
}
/* 57.6 / 51.2 / 35.2 at 1440 / 1024 / 390. Solved, not guessed: 5vw is 51.2 at
   1024 exactly, the 3.6rem cap bites above ~1152, the 2.2rem floor below ~704.
   All three measured values fall out of clamp(2.2rem, 5vw, 3.6rem) to the pixel. */
.arc-newsp-hero-h1.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.03; letter-spacing: -0.02em;
  color: #FFFFFF; margin: 15px 0 0;
}

/* --------------------------------------------------------------------------
   Section 1b — the category filter. Lives inside the hero, but it is the
   substantial part of this section: a button, an absolutely-positioned menu and
   the only client-side behaviour on the page.
   ⚠️ The closed menu is opacity:0 + visibility:hidden + translateY(-6px), NOT
   display:none — read off the reference, which keeps the rows in the layout so
   the menu can animate. visibility (not just opacity) is what keeps the hidden
   rows out of the tab order and away from the pointer; opacity alone leaves a
   240x241 invisible click target sitting over the top of the grid.
   -------------------------------------------------------------------------- */
.arc-newsp-hero .arc-newsp-filterw.elementor-widget {
  width: auto !important; flex: 0 0 auto; line-height: 0;
}
.arc-newsp-filter { position: relative; width: 240px; }
/* ⚠️ SCOPED TO (0,2,0), and that is load-bearing, not tidiness. Hello Elementor's reset.css
   declares `[type="button"]:focus, ..., button:focus, button:hover { background-color:#c36;
   color:#fff }` at **(0,1,1)** — one pseudo-class plus one type — which beats a bare
   `.arc-newsp-filter__btn` at (0,1,0). The hover state was already scoped and safe; :focus was
   not, and the menu returns focus to the trigger after a selection, so the button painted
   HOT PINK (#c36 = rgb(204,51,102)) whenever a category was applied. It never showed at rest,
   on hover, or while open — only in the state the control spends most of its life in.
   Note a programmatic .focus() often DOES match :focus-visible, so an in-page probe reported
   the correct .18 while a real mouse-click selection painted #c36. The state has to be reached
   the way a user reaches it.
   Scoping the base to (0,2,0) beats (0,1,1) on class count and immunises rest, hover, focus and
   active in one declaration — no !important, and no four separate rules each fighting their own
   fight. Third time this reset has caught this project. */
.arc-newsp-filter .arc-newsp-filter__btn {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; width: 100%;
  padding: 13.6px 18.4px;
  font-family: var(--font-sans); font-size: 12.48px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  /* ⚠️ line-height is NOT cosmetic here: the Kit gives buttons 1.5, which makes the
     label box 18.72 against the reference's 15 and the control 47.9 against 44.2.
     A 3.7px control in a space-between row moves nothing horizontally, so it is
     invisible to the eye and obvious to a measurement. */
  line-height: normal;
  color: #FFFFFF; text-align: left;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
/* ⚠️ Hello Elementor's reset.css styles an unstyled <button> #c36 on #fff at
   (0,2,0), which is how two arrow components on this site shipped invisible.
   Every property that reset touches is set here, and the states below are
   scoped to (0,2,0) so they are not out-specified by it. */
.arc-newsp-filter .arc-newsp-filter__btn:hover,
.arc-newsp-filter .arc-newsp-filter__btn:focus-visible {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.7);
  color: #FFFFFF;
}
/* ⚠️ There is NO open state, and the one I first wrote here was invented.
   The reference's .18/.7 is purely `:hover`. Proved by opening the menu and then moving the
   pointer away: the menu stays open and the button returns to .1/.42. My harness's "button
   darkens while open" check passed on BOTH sides — because it clicked and left the pointer
   sitting on the button, so it was measuring hover and calling it open. A check that cannot
   distinguish two states will confirm whichever one you already believe.
   The chevron rotation on [aria-expanded="true"] IS real and stays; only the fill/border
   override is gone. */
.arc-newsp-filter .arc-newsp-filter__btn:focus { outline: none; }
.arc-newsp-filter .arc-newsp-filter__btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px;
}
.arc-newsp-filter__btn .arc-chev {
  flex: 0 0 auto; color: #FFFFFF;
  transition: transform var(--dur-fast) var(--ease-out);
}
.arc-newsp-filter__btn[aria-expanded="true"] .arc-chev { transform: rotate(180deg); }

/* ⚠️ top:100% + margin-top:8px, not top:calc(100% + 8px). The reference computes
   top:44.1875px (exactly the control's height) and still paints 8px lower, which only
   adds up if the offset is a MARGIN — `top` positions the margin box. Written the same
   way so the two stay in step if the control's height ever changes. The 8px sits
   underneath the -6px rest transform, so a closed menu measures +2 from the button's
   bottom edge and an open one +8. */
.arc-newsp-filter__menu {
  position: absolute; top: 100%; margin-top: 8px; left: 0; right: 0; z-index: 40;
  padding: 8px;
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility 0s linear var(--dur-fast);
}
.arc-newsp-filter__menu[data-open="true"] {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              visibility 0s;
}
.arc-newsp-filter__opt {
  display: block; width: 100%; text-align: left;
  padding: 9.6px 13.6px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  letter-spacing: normal; text-transform: none;
  line-height: normal;   /* same Kit 1.5 as the trigger: 21 against the reference's 18 */
  color: var(--text-secondary);
  background: transparent; border: 0; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-newsp-filter .arc-newsp-filter__opt:hover,
.arc-newsp-filter .arc-newsp-filter__opt:focus-visible {
  background: var(--surface-alt); color: var(--text-primary);
}
.arc-newsp-filter .arc-newsp-filter__opt[aria-selected="true"] {
  background: var(--surface-alt); color: var(--text-primary); font-weight: 600;
}
.arc-newsp-filter .arc-newsp-filter__opt:focus { outline: none; }
.arc-newsp-filter .arc-newsp-filter__opt:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .arc-newsp-filter__menu, .arc-newsp-filter__btn,
  .arc-newsp-filter__btn .arc-chev, .arc-newsp-filter__opt { transition: none; }
}

/* ⚠️ The [hidden] attribute is NOT enough here, and this would have shipped broken.
   The UA stylesheet's [hidden]{display:none} loses to any AUTHOR rule that sets
   display — and .arc-news__card sets display:flex. Origin beats specificity: an
   author class defeats a UA attribute rule no matter how the selectors compare. So
   every filtered-out card would have stayed visible while aria-selected, the button
   label and the hidden attribute all reported a working filter. Caught by reasoning
   about the cascade before deploying; the harness asserts painted visibility, not the
   attribute, so it would have caught it too. */
.arc-news-grid [hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Section 2 — the listing grid (.arc-newsp / .arc-news-grid).
   The SAME card as the homepage carousel (arc_news_card), laid out in a CSS
   grid instead of a flex track. No new card CSS is written here: everything
   from .arc-news__media down already exists in arc-home.css and was measured
   identical to this reference — media aspect-ratio 3/2, body padding
   24px 25.6px 28px, meta gap 12 with a 3px dot, h3 20.8/500 lh 26, p 14.4/400
   lh 24.48, rest shadow --shadow-xs, hover translateY(-3px) + scale(1.05).
   -------------------------------------------------------------------------- */
/* Same 1480 cap. Here it goes on the BAND rather than an inner, because this band paints
   nothing — the reference's own News Grid section measures 1480 wide and centred, so capping
   the section reproduces its structure instead of adding a wrapper it does not have. */
.arc-newsp.e-con {
  padding: 88px var(--gutter) 104px !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: transparent;
  max-width: var(--container-wide);
  margin-inline: auto;
}
.arc-newsp .arc-newsp-gridw.elementor-widget { width: 100% !important; margin: 0 !important; }

/* ⚠️ 900 and 560, NOT this project's 1039 / 679. The homepage carousel steps 3/2/1 at the
   project's own breakpoints; this grid declares its own, read out of the reference's
   stylesheet and confirmed by bisection (3-up at 901, 2-up at 900, 1-up at 560, each agreed
   by computed columns, matchMedia and the declared @media rule). Two different components on
   two different pages are allowed different breakpoints; guessing that they share them is how
   a listing reflows one step early on a tablet and nobody notices for a month. */
.arc-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .arc-news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .arc-news-grid { grid-template-columns: 1fr; } }

/* ⚠️ D3, owner-approved: WIDEN the existing card selectors rather than duplicate the card.
   These two rules live in arc-home.css scoped to `.arc-news a.arc-news__card` — not for
   tidiness but because the Kit emits `.elementor-kit-N a { box-shadow: none }` at (0,1,1), so
   the card's shadow needs (0,2,1) to win. `.arc-news` is the homepage SECTION class and is
   absent on /news/, so on this page the shadow, the hover lift and the link colour would all
   silently not apply — the card would sit flat with no hover while every other measurement
   passed. Adding the listing wrapper as a second scope keeps ONE card definition, so a future
   change to the card cannot land on one page and not the other. */
.arc-newsp a.arc-news__card { box-shadow: var(--shadow-xs); color: var(--text-primary); }
.arc-newsp a.arc-news__card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .arc-newsp a.arc-news__card:hover { transform: none; }
}
/* the flex sizing the carousel needs is meaningless in a grid, but `flex-basis` on a grid item
   is simply ignored, so the shared rule needs no override — asserted in the harness rather
   than assumed, because "ignored" is a claim about the spec and not about this browser. */

/* Empty state. No reference category is empty, so the design shows nothing here — this is our
   addition and is named as such. A filter that can empty the grid has to say so; a blank band
   reads as a broken page. */
.arc-newsp-empty {
  margin: 48px 0 0; text-align: center;
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.7;
  color: var(--text-secondary);
}
.arc-newsp-empty[hidden] { display: none; }

/* ==========================================================================
   News SINGLE (Theme Builder template for core `post`)
   Reference: post.html?post=<slug>. Two bands: Post > Latest News.
   ⚠️ Nearly every value below was read from the reference's own DECLARED rule
   (its stylesheet, or its inline style attribute where it uses CSS-in-JS) —
   not fitted to four sampled widths. Where the reference names a token, the
   same token is used here, because they are the same design system:
   --container-wide, --gutter, --surface-card, --radius-sm, --shadow-lg.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section 1a — the hero banner.
   ⚠️ min-height is a FIXED 540px, confirmed against viewport HEIGHT as well as
   width (1200 / 800 / 600 all render 540). That check exists because the News
   hero's "fixed 480" turned out to be 40vh — a band that measures the same at
   every WIDTH has told you nothing about height until you move the height.
   -------------------------------------------------------------------------- */
.arc-psingle-hero.e-con {
  position: relative;
  min-height: 540px;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center;
  align-items: stretch !important;
  overflow: hidden;
  background: var(--arc-black);
}
/* The photograph fills the band. Elementor's .elementor img{height:auto;max-width:100%} is
   (0,1,1) and beats a plain class, so height/width/max-width all need !important — the same
   trap that rendered a hero 1440x1152 on this project once. */
.arc-psingle-hero .arc-psingle-heroimg.elementor-widget {
  position: absolute; inset: 0; width: 100% !important; max-width: none !important;
  margin: 0 !important; padding: 0 !important; z-index: 0; line-height: 0;
}
.arc-psingle-hero .arc-psingle-heroimg .elementor-widget-container,
.arc-psingle-hero .arc-psingle-heroimg figure,
.arc-psingle-hero .arc-psingle-heroimg .elementor-image { height: 100%; }
.arc-psingle-hero .arc-psingle-heroimg img {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; object-position: 50% 50%; display: block;
}
/* TWO scrims as TWO layers — the reference's own structure (two absolutely-positioned divs),
   not one multi-layer background. Re-expressing them as a single three-layer background
   computed to identical gradients on this project once and rendered the whole band near-black;
   reproduce the mechanism, not a re-expression of it.
   ⚠️ content: "" — the quotes are load-bearing. A node -e one-liner once wrote `content: \;`
   here, which is invalid, and CSS error recovery swallowed `position: absolute` with it, so
   BOTH scrims stopped generating on five pages. Edit this file directly, never from an inline
   -e string.
   ⚠️ These gradients are NOT .arc-chero's. Measured .82/.42/.16 here against .8/.48/.22 there —
   close enough to copy by mistake, different enough to see. */
.arc-psingle-hero.e-con::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(18, 17, 16, 0.82) 0%, rgba(18, 17, 16, 0.42) 58%, rgba(18, 17, 16, 0.16) 100%);
}
.arc-psingle-hero .arc-psingle-heroimg::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(12, 13, 15, 0.5) 0%, rgba(12, 13, 15, 0) 32%);
}
/* the capped inner — the reference's own declaration, token for token */
.arc-psingle-hero .arc-psingle-heroinner.e-con {
  position: relative; z-index: 2;
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 150px var(--gutter) !important;
  gap: 0 !important;
  flex-direction: column !important;
}
.arc-psingle-hero .arc-psingle-herorow.e-con {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
  padding: 0 !important;
  width: 100%;
}
.arc-psingle-hero .arc-psingle-herotext.e-con {
  flex-direction: column !important;
  gap: 0 !important; padding: 0 !important;
  max-width: 760px; width: auto; flex: 0 1 auto;
}
@media (max-width: 1024px) { .arc-psingle-hero .arc-psingle-herotext.e-con { max-width: 600px; } }
/* ⚠️ At <=860 the row stacks and the text goes BACK to 760 — the reference declares both, and
   dropping the second rule leaves mobile capped at 600 for no reason. */
@media (max-width: 860px) {
  .arc-psingle-hero .arc-psingle-herorow.e-con {
    flex-direction: column !important; align-items: flex-start !important;
    /* the gap drops to 24 once the row stacks — 40px of vertical air between the H1 and the
       button is a row gap doing a column's job */
    gap: 24px !important;
  }
  .arc-psingle-hero .arc-psingle-herotext.e-con { max-width: 760px; }
}

/* ---- breadcrumb ---- */
.arc-postcrumbs__list {
  display: flex; align-items: center; gap: 8px;
  list-style: none; margin: 0 0 18px; padding: 0;
}
.arc-postcrumbs__list li { display: flex; align-items: center; margin: 0; }
.arc-postcrumbs__sep { color: rgba(255, 255, 255, 0.8); line-height: 0; }
/* ⚠️ !important on the link colour: Hello's reset paints every bare <a> (#c36 base, #336 hover)
   and the Kit sets its own link colour. Declaring it on the BASE rule immunises rest, hover,
   focus and active in one line rather than four rules each fighting their own fight. */
.arc-postcrumbs__link {
  font-family: var(--font-sans); font-size: 12.8px; font-weight: 400; line-height: normal;
  color: rgba(255, 255, 255, 0.8) !important; text-decoration: none !important;
}
.arc-postcrumbs__link:hover { color: #FFFFFF !important; }
.arc-postcrumbs__current {
  font-family: var(--font-sans); font-size: 12.8px; font-weight: 400; line-height: normal;
  color: #FFFFFF;
}

/* ---- H1: the reference's own clamp, verbatim ---- */
.arc-psingle-h1.elementor-widget .elementor-heading-title {
  margin: 0; color: #FFFFFF;
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -0.01em;
}
.arc-psingle-hero .arc-psingle-viewall.elementor-widget { width: auto !important; flex: 0 0 auto; line-height: 0; }

/* --------------------------------------------------------------------------
   Section 1b — the article card. Overlaps the hero by 96px.
   -------------------------------------------------------------------------- */
.arc-psingle-wrap.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter) !important;
  gap: 0 !important;
  background: var(--surface-page);
}
.arc-psingle-card.e-con {
  margin-top: -96px !important;
  position: relative; z-index: 2;
  background: var(--surface-card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: clamp(32px, 4vw, 60px) clamp(24px, 4vw, 64px) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

/* ---- meta row + rule ---- */
.arc-postmeta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.arc-postmeta__pill {
  display: inline-block; padding: 6.4px 12px; border-radius: var(--radius-sm);
  background: var(--arc-black); color: #FFFFFF;
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; line-height: 12px;
}
.arc-postmeta__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 12.8px; font-weight: 400; line-height: normal;
  color: var(--text-muted);
}
.arc-postmeta__item .arc-ico { flex: none; }
.arc-postrule {
  height: 0; border-top: 1px solid var(--border-soft); margin: 26px 0 32px;
}

/* --------------------------------------------------------------------------
   The article body — rendered by theme-post-content from each post's own
   Elementor canvas, so these target the classes the seeder stamps on the
   per-post widgets rather than the template's own.
   -------------------------------------------------------------------------- */
/* ⚠️ Target the inner <p>, not .elementor-text-editor: the <p> is often a DIRECT child of
   .elementor-element on this stack, so a .elementor-text-editor p rule compiles, serves and
   matches nothing. And zero the browser-default <p> margin or it stacks on the widget margin. */
.arc-post-lead p {
  font-family: var(--font-sans); font-size: 1.2rem; font-weight: 400; line-height: 1.6;
  color: var(--text-primary); margin: 0 0 22px;
}
.arc-post-p p {
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 400; line-height: 1.8;
  color: var(--text-secondary); margin: 0 0 22px;
}
.arc-post-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 42px 0 16px;
}
/* the figures. Height is the reference's own clamp, and the <img> needs !important on both
   axes to beat .elementor img{height:auto;max-width:100%} at (0,1,1). */
.arc-post-fig.elementor-widget {
  width: 100% !important; margin: 46px 0 !important; line-height: 0; overflow: hidden;
}
.arc-post-fig figure, .arc-post-fig .elementor-image { margin: 0; line-height: 0; }
.arc-post-fig img {
  width: 100% !important; height: clamp(255px, 36vw, 375px) !important; max-width: none !important;
  object-fit: cover; object-position: 50% 50%; display: block;
}
@media (max-width: 640px) {
  .arc-post-fig img { height: clamp(220px, 60vw, 300px) !important; }
}
/* the widget wrapper's own bottom margin stacks on the <p> margin — Elementor ships
   margin-block-end on every non-last widget */
.arc-psingle-card .arc-post-lead.elementor-widget,
.arc-psingle-card .arc-post-p.elementor-widget,
.arc-psingle-card .arc-post-h2.elementor-widget { margin-block-end: 0 !important; }

/* --------------------------------------------------------------------------
   Section 1c — the author block. Sits INSIDE the article card, which is why
   the reference's article contains seven paragraphs and three images rather
   than six and two: the blurb and the logo are part of it.
   -------------------------------------------------------------------------- */
.arc-author {
  display: flex; align-items: flex-start; gap: 28px;
  border-top: 1px solid var(--border-soft);
  padding: 44px 0 0; margin: 52px 0 0;
}
/* ⚠️ The 1px border is load-bearing, not decoration. With box-sizing:border-box the chip's
   content box is 92 − 32 (padding) − 2 (border) = 58, which is the logo's rendered height;
   without the border it is 60, so the mark renders 55.7x60 against the reference's 53.8x58 AND
   the chip grows 2px wider, which as a flex sibling takes 2.6px off the blurb column. One
   missing 1px line, two failures that look unrelated. */
.arc-author__logo {
  display: flex; align-items: center; justify-content: center;
  height: 92px; padding: 16px 24px; flex: 0 0 auto;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
/* height:100%; width:auto is the reference's own declaration, and both need !important:
   .elementor img{height:auto;max-width:100%} is (0,1,1) and beats a plain class. */
.arc-author__logo img {
  height: 100% !important; width: auto !important; max-width: none !important;
  object-fit: contain; display: block;
}
.arc-author__body { flex: 1 1 auto; min-width: 0; }
.arc-author__eyebrow {
  display: block; margin: 0 0 6px;
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; line-height: normal;
  color: var(--text-muted);
}
.arc-author__name {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 500;
  line-height: normal; color: var(--text-primary); margin: 0 0 8px;
}
.arc-author__blurb {
  font-family: var(--font-sans); font-size: 0.9rem; font-weight: 400; line-height: 1.7;
  color: var(--text-secondary); margin: 0; max-width: 640px;
}
.arc-author__cta { flex: 0 0 auto; align-self: center; }
/* the hand-built CTA takes the site's --lg button metrics, matching every other primary on the
   site; the arrow comes from the shared .arc-arrow layer (extended in arc-foundation.css to
   cover hand-built buttons), never a glyph written into the label */
.arc-author .arc-author__cta.arc-btn-el {
  font-size: 0.875rem; padding: 1.15rem 2.5rem;
  background: var(--brand-primary); color: #FFFFFF !important; border-color: var(--brand-primary);
  /* ⚠ The same 2.7px the FAQs CTA needed, from the same cause: the reference separates label
     and arrow with a literal SPACE (~5.0px once the 0.08em tracking is counted) where the
     shared .arc-arrow layer uses 0.55em (7.7px). The variable exists for exactly this. Scoped,
     never global — the layer is shared with ~14 verified call sites.
     It shows up as the BLURB being 2.7px narrow at 1024, because the button is a flex sibling
     and the blurb takes what is left. A width failure three elements away from its cause. */
  --arc-arrow-gap: 0.355em;
}
@media (max-width: 860px) {
  /* the gap drops to 20 once the block stacks — 28px was a row gap doing a column's job */
  .arc-author { flex-direction: column; align-items: flex-start; gap: 20px; }
  .arc-author__cta { align-self: flex-start; }
}
@media (max-width: 640px) {
  .arc-author__cta, .arc-author .arc-author__cta.arc-btn-el { width: 100%; }
}

/* --------------------------------------------------------------------------
   Section 1d — previous / next.
   ⚠️ grid-template-columns: 1fr 1fr with an EMPTY first cell on the newest post.
   The empty span is emitted by the shortcode rather than collapsed, because a
   one-child grid would put the "next" card in the left column — which looks
   like a working nav and is wrong on exactly the newest and oldest posts.
   -------------------------------------------------------------------------- */
.arc-postnav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid var(--border-soft);
  padding: 36px 0 0; margin: 40px 0 0;
}
.arc-postnav__empty { display: block; }
.arc-postnav__card {
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none !important;
}
/* the next card is right-aligned inside its own cell and inset from the divider */
.arc-postnav__card.is-next { align-items: flex-end; text-align: right; padding: 2px 0 2px 36px; }
.arc-postnav__card.is-prev { align-items: flex-start; text-align: left;  padding: 2px 36px 2px 0; }
.arc-postnav__dir {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; line-height: normal;
  color: var(--text-muted);
}
.arc-postnav__title {
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 500;
  line-height: normal; color: var(--text-primary);
}
/* ⚠️ Hello's reset paints every bare <a> (#c36, #336 on hover) and the Kit sets its own link
   colour — declared on the BASE rule so rest, hover, focus and active are all immunised at once
   rather than by four rules each fighting separately. */
.arc-postnav .arc-postnav__card { color: var(--text-primary) !important; }
.arc-postnav .arc-postnav__card:hover .arc-postnav__title { color: var(--text-secondary); }
@media (max-width: 640px) {
  /* one column, gap 0 — the vertical separation is the next card's own 22px top padding, which
     is what the reference uses. A grid gap here would double it. */
  .arc-postnav { grid-template-columns: 1fr; gap: 0; }
  .arc-postnav__card.is-next { align-items: flex-start; text-align: left; padding: 22px 0 2px; }
  .arc-postnav__card.is-prev { align-items: flex-start; text-align: left; padding: 2px 0; }
  .arc-postnav__empty { display: none; }
}

/* --------------------------------------------------------------------------
   Section 2 — Latest news. The SAME card and the SAME grid as the /news/
   listing: a third consumer of arc_news_card(), no new card CSS.
   -------------------------------------------------------------------------- */
.arc-relnews.e-con {
  padding: 96px var(--gutter) 112px !important;
  gap: 0 !important;
  align-items: stretch !important;
  max-width: var(--container-wide); margin-inline: auto;
  background: var(--surface-page);
}
.arc-relnews .arc-relnews-head.e-con {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 0 !important;
  margin-bottom: 40px;
  width: 100%;
}
.arc-relnews-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-display-md);   /* clamp(1.9rem, 3vw, 2.75rem) — 44 / 43.2 / 30.72 / 30.4 */
  line-height: normal; color: var(--text-primary); margin: 0;
}
.arc-relnews-link.elementor-widget { width: auto !important; flex: 0 0 auto; line-height: 0; }
.arc-relnews-link .elementor-button {
  background: transparent !important; border: 0 !important; padding: 0 !important;
  font-family: var(--font-sans) !important; font-size: 0.85rem !important; font-weight: 600 !important;
  letter-spacing: normal !important; text-transform: none !important;
  color: var(--text-primary) !important;
  /* BugHerd #12: this rendered as a 13.6px tap target (padding:0 above), failing WCAG 2.5.8
     (AA, 24px). min-height lifts it to 30px, matching the footer convention set on #11. The
     element is transparent with no border, so the added height is invisible; inline-flex +
     align-items keeps the label optically where it was. Reverse by deleting these 3 lines. */
  min-height: 30px; display: inline-flex; align-items: center;
}
.arc-relnews .arc-relnews-gridw.elementor-widget { width: 100% !important; margin: 0 !important; }
/* ⚠️ The card's shadow, hover lift and link colour are declared as `.arc-news a.arc-news__card`
   and `.arc-newsp a.arc-news__card` — scoped that way because the Kit emits
   .elementor-kit-N a{box-shadow:none} at (0,1,1), so the card needs (0,2,1) to win. This band is
   a THIRD consumer and needs adding, or the cards sit flat with no hover while every other
   measurement passes. Widening the existing selector keeps one card definition. */
.arc-relnews a.arc-news__card { box-shadow: var(--shadow-xs); color: var(--text-primary); }
.arc-relnews a.arc-news__card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) {
  .arc-relnews a.arc-news__card:hover { transform: none; }
}
@media (max-width: 640px) {
  .arc-relnews .arc-relnews-head.e-con {
    flex-direction: column !important; align-items: flex-start !important; gap: 16px !important;
  }
}

/* ==========================================================================
   Inclusions (/inclusions/, page 20)
   Reference: inclusions.html. Six sections read from [data-screen-label]:
   Inclusions Hero > Inclusion Levels > Tailored Packages > Inclusions CTA >
   FAQ > Testimonials. The last two are the existing shared templates.
   The hero rides .arc-chero--inclusions, folded into --dh's rules above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sections 2 + 3 — ONE component, two bands.
   "Inclusion Levels" and "Tailored Packages" were walked node for node and are
   structurally identical: same card tree, same 3-up/gap-28 grid, same 680 head,
   same type at every level. The ONLY differences are the band background and the
   copy. So this block is written once and both bands share it; .arc-inc--alt
   carries the grey. A second card would be two things to keep in step for nothing.
   -------------------------------------------------------------------------- */
.arc-inc.e-con {
  padding: 112px 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
  background: var(--surface-page);
}
.arc-inc.arc-inc--alt.e-con { background: var(--surface-alt); }
/* the capped inner — the site's standard content wrapper */
.arc-inc .arc-inc-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter) !important;
  gap: 0 !important;
}

/* ---- band head: 680 cap, centred ---- */
.arc-inc .arc-inc-head.e-con {
  max-width: 680px; margin-inline: auto; width: 100%;
  text-align: center;
  padding: 0 !important; gap: 0 !important; align-items: stretch !important;
  margin-bottom: 52px;
}
/* ⚠️ padding: 3px 0 1px — BOTH numbers, and the 1px was missed first time round.
   The reference's eyebrow is an inline-flex span: its own box is 15px, but the line box it
   sits in is 19 — 3px of half-leading above and 1px below. Zeroing line-height (which keeps
   Elementor's own leading out of the way) removes both, so both are added back.
   Shipping only the 3px left the H2 sitting 1px high, which then pushed the lead, the grid and
   everything below it — visible as a 2px band error on Tailored Packages once it stacked with
   a second residual. This is the same `padding: 3px 0 1px` the homepage's .arc-news-eyebrow
   already uses; I quoted that rule in this comment and then only copied half of it. */
.arc-inc-eyebrow.elementor-widget { line-height: 0; padding: 3px 0 1px; }
.arc-inc-eyebrow.elementor-widget .elementor-heading-title {
  display: block;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-accent) !important; margin: 0; line-height: normal;
}
.arc-inc-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300;
  /* 44 / 43.2 / 30.72 / 30.4 at 1920 / 1440 / 1024 / 390 — the project's existing
     --fs-display-md, clamp(1.9rem, 3vw, 2.75rem), fits all four to the pixel. */
  font-size: var(--fs-display-md);
  line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 14px 0 0;
}
.arc-inc-lead p {
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 400; line-height: 1.7;
  color: var(--text-secondary);
  max-width: 560px; margin: 18px auto 0;
}

/* ---- the grid ----
   ⚠️ 900 / 600, bisected and confirmed by matchMedia — NOT this project's other
   breakpoints. The news listing steps at 900/560 and the homepage carousel at
   1039/679; three grids, three sets. Assuming any of them would be a guess, and at
   1024 this grid is still 3-up where the news grid is 2-up. */
.arc-inc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .arc-inc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .arc-inc-grid { grid-template-columns: 1fr; } }

/* ---- the card ---- */
.arc-inc-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
/* ⚠️ aspect-ratio on the WELL, with the image filling it — not aspect-ratio on the image.
   Inside a grid item, aspect-ratio resolves to zero during intrinsic sizing, which has left
   a band shorter than its own content on this stack before. The well is a plain block with
   a real height, and the <img> is stretched into it. */
.arc-inc-card__media {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  background: var(--arc-sand); overflow: hidden;
}
/* Elementor's .elementor img{height:auto;max-width:100%} is (0,1,1) and beats a plain
   class, so all three need !important. */
.arc-inc-card__img {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; object-position: 50% 50%; display: block;
}
/* the reference's second media child — an overlay layer that paints nothing at rest.
   Reproduced as a real element rather than dropped, so the DOM shapes match and any
   future hover treatment has somewhere to live. */
.arc-inc-card__wash { position: absolute; inset: 0; pointer-events: none; }
.arc-inc-card__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  padding: 26px 28px 30px;
}
.arc-inc-card__eyebrow {
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; line-height: normal;
  color: var(--text-accent);
}
.arc-inc-card__title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 500;
  line-height: normal; letter-spacing: -0.01em;
  color: var(--text-primary); margin: 8px 0 12px;
}
.arc-inc-card__blurb {
  font-family: var(--font-sans); font-size: 0.95rem; font-weight: 400; line-height: 1.7;
  color: var(--text-secondary); margin: 0 0 22px;
}
/* ⚠️ margin-top:auto pins the link to the bottom of a variable-height card, so three cards
   in a row keep their links on one line. A flex height:100% chain does not resolve through
   shortcode DOM; this does. */
/* ⚠️ display:BLOCK, and this took two wrong attempts to diagnose.
   The link wraps to two lines at 1024 and 390 (not at 1440 or 1920), and there ours measured
   30 against the reference's 32 — a 2px error that propagated up through the card body, the
   grid and the whole band height.
   The reference's anchor is display:flex, so the obvious reading is "make ours flex too". That
   is wrong, and changing inline-flex → flex produced NO change in the number at all, which is
   the tell that the hypothesis was wrong rather than the fix too small.
   What actually differs: on the reference the arrow is a TEXT NODE inside the anchor's own text
   flow, so the line containing it takes the arrow glyph's taller metrics and BOTH wrapped lines
   become 16px (2 × 16 = 32). A pseudo-element on a flex container is blockified into a separate
   flex item, so ours sat beside the text instead of in it, leaving two 15px lines (30).
   As a block, ::after is ordinary inline content in the same flow — the reference's mechanism,
   with the glyph still coming from the one shared .arc-arrow-txt layer (G17) rather than a
   literal character written into the label, which is what keeps it out of the copy and the
   accessible name. Width is left to stretch: the reference's link spans the full body content
   width (237.36 at 1024), it does not shrink to its text. */
.arc-inc-card__link {
  margin-top: auto;
  display: block;
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; line-height: normal;
  text-decoration: none !important;
}
/* ⚠️ Declared on the BASE rule with !important. Hello's reset paints every bare <a>
   (#c36 base, #336 on hover) and the Kit sets its own link colour — one declaration here
   immunises rest, hover, focus and active, instead of four rules each fighting separately. */
.arc-inc-card .arc-inc-card__link { color: var(--text-primary) !important; }
.arc-inc-card .arc-inc-card__link:hover { color: var(--text-secondary) !important; }

/* --------------------------------------------------------------------------
   Section 4 — the CTA band.
   ⚠️ Its head is NOT .arc-faqp-cta's or .arc-anight-head's, despite the family
   resemblance: those cap at 640 on a light background, this one spans the full
   content width on #111315 and centres. Third near-duplicate on this site, and
   deliberately not merged — recorded in project-state as a consolidation
   candidate rather than silently duplicated.
   -------------------------------------------------------------------------- */
.arc-inc-cta.e-con {
  background: var(--surface-inverse);
  padding: 96px 0 !important;
  gap: 0 !important; align-items: stretch !important;
}
.arc-inc-cta .arc-inc-cta-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter) !important;
  text-align: center;
  gap: 0 !important; align-items: stretch !important;
}
.arc-inc-cta-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-display-md); line-height: 1.12; letter-spacing: -0.01em;
  color: #FFFFFF; margin: 0;
}
.arc-inc-cta-lead p {
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 400; line-height: 1.7;
  /* .8 and 560 — measured, not carried over from .arc-faqp-cta. Guessing .78/640 from the
     family resemblance was wrong on both counts, which is the point of measuring each near
     duplicate rather than assuming the third one matches the first two. */
  color: rgba(255, 255, 255, 0.8);
  max-width: 560px; margin: 18px auto 0;
}
.arc-inc-cta .arc-inc-cta-btn.elementor-widget { margin-top: 32px !important; }
.arc-inc-cta .arc-inc-cta-btn .elementor-button-wrapper { display: flex; justify-content: center; }

/* ======================================================== CUSTOM HOMES ==
   /custom-homes/ (page 18). Sections 2 and 3 reuse the shared .arc-ab component. Compared
   against About's blocks at 1440 and 1024 before reusing it — everything matched except the
   three values below, so this modifier is three rules rather than a new band.               */

/* About's media well maxes at 560; this page's measures 540 at both 1920 and 1440 (they
   coincide at 1024, where 44vw dominates both). NOT folded into --dhintro's 540 rule: that
   one also carries a radius, overflow clip and shadow which this page does not have. */
.arc-ab.arc-ab--ch .arc-ab-media.e-con { height: clamp(360px, 44vw, 540px); }
/* Square corners here; About's photos carry --radius-sm. */
.arc-ab.arc-ab--ch .arc-ab-media img,
.arc-ab.arc-ab--ch .arc-ab-media figure { border-radius: 0; }
/* Only the journey band caps its paragraph. 0-3-1 beats the base .arc-ab .arc-ab-p p (0-2-1)
   without !important. */
/* The paragraph AND the list share one cap on the reference (measured 520 on both, at
   1920/1600/1440/1280 — below ~1180 the column is narrower than the cap and they agree by
   accident). One declaration for both, so they cannot drift. */
.arc-ab.arc-ab--ch2 .arc-ab-p p,
.arc-ab.arc-ab--ch2 .arc-ab-list .elementor-icon-list-items { max-width: 520px; }
/* The last paragraph before the stats row carries 30px here, where About carries 20. Measured
   on the reference: its second <p> has margin-bottom:30px and the stats row margin-top:0 — so
   this is simply a different paragraph margin, NOT the margin-collapse subtlety About had to
   reason about. Without it everything from the stats row down sat exactly 10px high.
   ⚠️ Targets the builder-set --last class, never :last-of-type: every Elementor widget renders
   as a <div>, so :last-of-type resolves to the BUTTON and the rule silently never fires. */
.arc-ab.arc-ab--ch1 .arc-ab-p--last p { margin-bottom: 30px; }
/* And 22px on the journey band. Three different last-paragraph margins across one component
   (base 20, --ch1 30, --ch2 22) — each measured on its own band rather than inferred from
   the one next to it. */
.arc-ab.arc-ab--ch2 .arc-ab-p--last p { margin-bottom: 22px; }

/* ---- Knockdown Rebuild: the seventh .arc-ab consumer ---- */
/* 520 here, where About clamps to 560 and Custom Homes to 540. */
.arc-ab.arc-ab--kr .arc-ab-media.e-con { height: clamp(360px, 44vw, 520px); }
.arc-ab.arc-ab--kr .arc-ab-media img,
.arc-ab.arc-ab--kr .arc-ab-media figure { border-radius: 0; }
.arc-ab.arc-ab--kr .arc-ab-p p,
.arc-ab.arc-ab--kr .arc-ab-list .elementor-icon-list-items { max-width: 520px; }
.arc-ab.arc-ab--kr .arc-ab-p--last p { margin-bottom: 22px; }

/* The journey band's four-item list. Measured: ul flex column gap 14 / margin 0 0 32,
   li flex gap 12 align-items:flex-start, a 20x20 glyph with margin-top:2px, and the text at
   16px/27.2 in --text-secondary while the glyph is --text-primary. */
.arc-ab .arc-ab-list.elementor-widget { margin: 0 !important; width: 100%; }
.arc-ab .arc-ab-list .elementor-icon-list-items {
  display: flex; flex-direction: column; gap: 14px;
  margin: 0 0 32px; padding: 0; list-style: none;
  /* Elementor ships line-height:24px on the list; the reference leaves it normal. It changes
     no geometry (the children are flex items with their own 27.2px), but it is a real computed
     difference and the harness compares computed type per row. */
  line-height: normal;
}
.arc-ab .arc-ab-list .elementor-icon-list-item {
  display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 0;
}
/* The widget's own icon slot never receives the glyph (it needs a real attachment), so it is
   hidden and the row paints the mask itself. */
.arc-ab .arc-ab-list .elementor-icon-list-icon { display: none !important; }
.arc-ab .arc-ab-list .elementor-icon-list-item::before {
  content: ""; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  background-color: var(--text-primary);
  -webkit-mask-image: var(--arc-check); mask-image: var(--arc-check);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 20px 20px; mask-size: 20px 20px;
}
.arc-ab .arc-ab-list .elementor-icon-list-text {
  font-family: var(--font-sans); font-weight: 400; font-size: 16px; line-height: 27.2px;
  color: var(--text-secondary); padding: 0 !important;
}

/* ---- section 4: the gallery carousel ---- */
.arc-ch-gal.e-con { padding: 136px 0; background: var(--surface-page); }
/* 0,3,0 to beat .e-con-full{max-width:100%} at 0,2,0 */
.arc-ch-gal > .arc-ch-gal-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important;
}
/* the head is CENTRED here, unlike the two bands above it */
.arc-ch-gal .arc-ch-gal-eyebrow.elementor-widget {
  display: flex; justify-content: center; margin: 0 !important; padding: 3px 0 1px; line-height: 0;
}
.arc-ch-gal-eyebrow.elementor-widget .elementor-heading-title {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.18em; line-height: 15px; margin: 0;
  color: var(--text-accent) !important;
}
.arc-ch-gal .arc-ch-gal-h2.elementor-widget { margin: 0 !important; }
.arc-ch-gal-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: var(--fs-display-md); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text-primary) !important; text-align: center; margin: 14px 0 0;
}

.arc-chg { margin-top: 48px; }
/* overflow:hidden is what makes this a viewport; the track slides inside it */
.arc-chg__viewport { overflow: hidden; }
.arc-chg__track {
  display: flex; gap: 24px;
  transition: transform .58s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
/* 2-up: each card is half the viewport minus half the gap. perView is DERIVED from this in
   JS, so the width lives in one place. Card height is a clamp, fitted from the sweep:
   480 at 1920 and 1440, 348.2 at 1024, 300 at 768/640/390. */
.arc-chg__card {
  flex: 0 0 calc((100% - 24px) / 2);
  height: clamp(300px, 34vw, 480px);
  display: block; overflow: hidden; background: var(--surface-alt);
  border-radius: var(--radius-sm); cursor: zoom-in;
}
/* .elementor img{height:auto;max-width:100%} is (0,1,1) and beats a plain class. */
.arc-chg__card img {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; display: block;
}
.arc-chg__nav {
  display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 34px;
}
/* Hello's reset owns every bare <button> — base state included (border 1px #c36, radius 3,
   padding, width:auto, display:inline-block, line-height:24px) at a tied specificity that
   loads later. Pin every one of them. */
.arc-chg__arrow {
  width: 52px !important; height: 52px !important; border-radius: 999px !important;
  display: flex !important; align-items: center; justify-content: center; line-height: 0;
  padding: 0 !important; background: var(--surface-card) !important;
  border: 1px solid var(--text-primary) !important; color: var(--text-primary) !important;
  cursor: pointer; transition: background .16s var(--ease-out), color .16s var(--ease-out);
}
.arc-ch-gal .arc-chg__arrow:hover {
  background: var(--text-primary) !important; color: var(--surface-card) !important;
}
.arc-chg__arrow:focus:not(:focus-visible) { outline: none; }
.arc-chg__arrow svg { display: block; width: 20px; height: 20px; }
.arc-chg__arrow[data-arc-chg-dir="-1"] svg { transform: rotate(180deg); }
.arc-chg__dots { display: flex; align-items: center; gap: 8px; }
.arc-chg__dot {
  width: 8px !important; height: 8px !important; border-radius: 999px !important;
  padding: 0 !important; border: 0 !important; line-height: 0;
  background: var(--text-primary) !important; opacity: .28; cursor: pointer;
  transition: width .22s var(--ease-out), opacity .22s var(--ease-out);
}
.arc-chg__dot.is-active { width: 28px !important; opacity: 1; }

/* 1-up at <=820 — bisected on the reference (2-up still holds at 821), and deliberately NOT
   the 900 the two bands above use. Two different breakpoints on one page, each measured. */
@media (max-width: 820px) {
  .arc-chg__card { flex: 0 0 100%; }
}

/* ===================================================== HOME DESIGNS LISTING ==
   /home-designs/ (page 17) section 2 — the sticky filter card and the 23-card feed.
   Every number is read from the reference at 1920 / 1440 / 1024 / 640 / 390 via
   build/_probe_hd_metrics.js. Breakpoints BISECTED, not borrowed: the card restacks at
   <=1024 (3-up still holds at 1025) and the media heights + grid gap step again at <=640
   (28px gap still holds at 641). Both are NEW to this project, which has used 1039/679 for
   the homepage carousels and 900/560 for news — reaching for either would have been wrong.  */

/* ---- the capped section. Standard pattern: full-bleed outer band, inner column capped and
        padded by CSS. Specificity 0,3,0 is REQUIRED to beat Elementor's own
        .e-con.e-con-full{max-width:100%} at 0,2,0 — without it the whole section runs to the
        viewport edge, which is exactly how this section first failed its harness (137 checks,
        nearly all of them one missing cap). ---- */
.arc-hd-listing.e-con { background: #FFFFFF; }
.arc-hd-listing .arc-hd-listing-inner.e-con {
  max-width: 1480px; width: 100%; margin-inline: auto;
  padding: 80px var(--gutter) 104px;
}

/* ---- the filter card. It is STICKY; a static survey cannot see that and the first pass
        missed it entirely. top:130 clears the sticky header. ---- */
.arc-hdf {
  position: sticky; top: 130px; z-index: 20;
  background: #FFFFFF;
  border: 1px solid #EAECEF;
  border-radius: 2px;
  box-shadow: 0 12px 34px rgba(20, 22, 26, .1);
  padding: clamp(20px, 3vw, 28px);
  margin: 0 0 40px;
}
.arc-hdf__row {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end;
}
/* flex 1 1 170px is what produces 301.7 at 1440 and 206 at 1024 — a fluid basis, not four
   fixed columns. min-width:0 stops a long option label forcing an overflow. */
.arc-hdf__field {
  display: flex; flex-direction: column; gap: 7px; flex: 1 1 170px; min-width: 0;
}
/* The reference leaves these at line-height:normal, inside a document that does not set one.
   Ours inherits the site's body line-height, so every one of these needs an explicit value or
   the rows inflate — the filter card measured 3.61px too tall from exactly this. */
.arc-hdf__label {
  font-size: 10.88px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1.5232px; color: var(--text-muted); line-height: 14px;
}
.arc-hdf__control { position: relative; display: block; }
.arc-hdf__select {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; height: 46px;
  background: #F8F9FA; border: 1px solid #EAECEF; border-radius: 2px;
  padding: 12px 40px;
  font-family: inherit; font-size: 14.4px; font-weight: 400; color: #14161A;
  line-height: normal; outline: none; cursor: pointer;
}
.arc-hdf__select:focus-visible { outline: 2px solid #14161A; outline-offset: 2px; }
/* both icon slots are pointer-events:none so the whole control stays clickable */
.arc-hdf__ico,
.arc-hdf__chev {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: var(--text-muted); pointer-events: none;
}
.arc-hdf__ico { left: 13px; }
.arc-hdf__chev { right: 12px; }
.arc-hdf__ico .arc-spec-ico, .arc-hdf__chev svg { display: block; }

.arc-hdf__meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 18px;
}
.arc-hdf__count { font-size: 14.4px; line-height: 18px; color: #565B62; }
.arc-hdf__count strong { color: #14161A; font-weight: 600; }
.arc-hdf__clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12.8px; font-weight: 600; line-height: 18px;
  text-transform: uppercase; letter-spacing: 1.28px; color: #14161A;
}
.arc-hdf__clear:hover { text-decoration: underline; }
/* display:flex/inline-flex beats the UA's [hidden]{display:none} — every element the filter
   JS toggles needs this companion or "hidden" stays visible */
.arc-hdf__clear[hidden] { display: none !important; }

/* ---- the feed ---- */
.arc-designs-grid {
  display: grid; grid-template-columns: 1fr; gap: 28px;
}
.arc-designs-grid[hidden] { display: none !important; }

/* ⚠️ SCOPED TO .arc-designs-grid, and it must stay scoped. `.arc-hd-card` is ALSO the
   homepage's vertical Home Design card (arc-home.css:199) in the Visit & Explore band's
   second tab. arc-pages.css loads last, so an unscoped rule here silently reshapes that
   card on every page in the site — it rendered 425.6x185 against the reference's
   425.6x445.3 until this scope was added, and only inside a tab nobody had clicked.
   19fr 26fr 20fr reproduces the reference's 386.656 / 529.125 / 407.031 at 1440 AND its
   394.609 / 540 / 415.375 at 1920 — the ratios are identical at both, so the columns are
   fractional, not fixed. Named areas because the stacked layout REORDERS: the photo moves
   above the info block at <=1024 while DOM order stays info-first. */
.arc-designs-grid .arc-hd-card {
  display: grid;
  grid-template-columns: 19fr 26fr 20fr;
  /* 1fr auto, NOT auto auto. The image/plan wells span both rows at a fixed 438, leaving
     16.06px of slack over the two content rows — and two AUTO tracks split slack equally,
     giving 8.03px to each and pushing the CTA row 8px too tall while every value inside it
     measured exactly right. 1fr on row 1 takes all the slack, which is what the reference
     does: row 2 stays at the CTA's content height of 81.78. */
  grid-template-rows: 1fr auto;
  grid-template-areas: "info image plan" "cta image plan";
  background: #FFFFFF; border: 1px solid #EAECEF; border-radius: 2px; overflow: hidden;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
/* ⚠️ HOVER, added 2026-09-02 (owner-reported). The listing card had NO hover at all — driven with
   a real pointer, the reference lifts it 3px, deepens the shadow and zooms the photo to 1.04,
   and ours did none of the three. The existing rules could never have applied: they are scoped
   `.arc-dh a.arc-hd-card:hover`, i.e. the HOMEPAGE strip's card, which is an <a> inside .arc-dh —
   this one is an <article> outside it, and its <img> has no .arc-hd-card__img class either. Two
   different components sharing one class name, and the hover only ever reached one of them.
   Values measured settled (a first read caught the zoom mid-transition at 1.03992):
     card 320ms  translateY(-3px) + rgba(66,58,45,.09) 0 8px 24px
     photo 640ms scale(1.04)
   Both durations and the easing are the reference's own, and both match this project's tokens. */
.arc-designs-grid .arc-hd-card:hover {
  transform: translateY(-3px);
  box-shadow: rgba(66, 58, 45, 0.09) 0 8px 24px 0;
}
.arc-designs-grid .arc-hd-card:hover .arc-hd-image img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  /* the shadow stays — a shadow is not motion — but the two transforms go */
  .arc-designs-grid .arc-hd-card:hover { transform: none; }
  .arc-designs-grid .arc-hd-card:hover .arc-hd-image img { transform: none; }
}
.arc-designs-grid .arc-hd-card[hidden] { display: none !important; }
.arc-hd-info  { grid-area: info; padding: 28px 30px 12px; }
/* The media wells are a FIXED height at desktop, not an aspect ratio: 438 at BOTH 1440 and
   1920 while their widths differ (529 vs 540). Because they span both grid rows, that height
   is also what sizes row 1 (438 - the 81.78 cta row = 356.22), which the info column then
   stretches to fill. Deriving row 1 from the info content instead left the card 16px short.
   The plan well carries a hairline DIVIDER against the photo — border-left here, and it moves
   to border-top when the card stacks. Missing it also put the zoom badge 1.81px out. */
/* overflow:hidden so the hover zoom is clipped by the well, as the reference's is — ours read
   `visible`, which would have let the scaled photo bleed over the card's edge. */
.arc-hd-image { grid-area: image; position: relative; background: #EEF0F2; height: 438px; overflow: hidden; }
.arc-hd-plan  { grid-area: plan; display: flex; flex-direction: column;
                background: #F8F9FA; overflow: hidden; height: 438px;
                border-left: 1px solid #EAECEF; }
.arc-hd-cta   { grid-area: cta; padding: 6px 30px 28px; }

.arc-hd-storey {
  display: block; font-size: 10.56px; font-weight: 600; letter-spacing: 1.4784px;
  text-transform: uppercase; color: #6B7076; line-height: 13px;
}
.arc-hd-name {
  margin: 8px 0 0; font-size: 25.6px; font-weight: 400; letter-spacing: -0.256px;
  line-height: 28.16px; color: #14161A;
}
.arc-hd-specs { margin: 18px 0 0; padding: 0; list-style: none; }
/* the rows carry a hairline divider, and the last one does not — that is what makes the
   reference's row heights 39/39/39/39/39/38 and the list exactly 233 */
.arc-hd-specs li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 0; font-size: 14.4px;
  border-bottom: 1px solid #EAECEF;
}
.arc-hd-specs li:last-child { border-bottom: 0; }
.arc-hd-spec-label {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.4px; line-height: 18px; color: #565B62;
}
/* the spec glyphs are rendered at 16 here and 19 on the homepage/display-homes cards, from
   the same icon map — one vocabulary, two sizes (G17) */
.arc-hd-spec-label .arc-spec-ico { display: block; flex: 0 0 auto; }
.arc-hd-spec-value { font-size: 14.4px; line-height: 18px; font-weight: 600; color: #14161A; }

/* .elementor img{height:auto;max-width:100%} is (0,1,1) and beats a plain class, so the
   photo needs !important on both axes or it renders at its natural height inside a correct
   text layout — a defect this project has shipped before. */
.arc-hd-image img {
  display: block; width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.arc-hd-plan-img {
  position: relative; display: block; width: 100%; height: 100%;
  overflow: hidden; text-align: center;
}
/* ⚠️ NOT `inset:16px; width:auto`. For a REPLACED element an auto width resolves to the
   INTRINSIC width and the right/bottom insets are ignored, so the floor plan rendered at its
   natural 3000x4500 inside a correctly-sized well. Size it explicitly off the containing
   block instead. */
.arc-hd-plan-img img {
  position: absolute; top: 16px; left: 16px;
  width: calc(100% - 32px) !important; height: calc(100% - 32px) !important;
  max-width: none !important; object-fit: contain;
}
.arc-hd-plan-zoom {
  position: absolute; top: 16px; right: 14px;
  width: 32.4px; height: 32.4px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(18, 17, 16, .82); color: #FFFFFF;
}
.arc-hd-plan-zoom svg { display: block; }

/* The Kit paints every <a> (.elementor-kit-N a at 0,1,1) and would leave this button on the
   kit's own colours; this selector is 0,2,0 and wins, with !important on the two properties
   the kit sets directly. Values read off the reference's own button. */
/* display:FLEX, not inline-flex. An inline-level box sits on .arc-hd-cta's line box and is
   baseline-aligned, which added 8.03px of descender space below a button that measured exactly
   right at 47.78 — the row was wrong while every value inside it was correct. The reference
   avoids it by wrapping its inline-flex button in a display:block anchor. */
.arc-hd-cta .arc-btn-el {
  display: flex; align-items: center; justify-content: center; gap: 7.8px;
  width: 100%; padding: 14.4px 28px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.04px; text-transform: uppercase;
  line-height: normal; white-space: nowrap; text-decoration: none;
  background: #14161A !important; color: #FFFFFF !important;
  border: 1px solid #14161A; border-radius: 2px;
}

/* ---- the empty state, copy read by DRIVING the reference's filter to zero results ---- */
.arc-hd-empty {
  text-align: center; color: #565B62; font-size: 16.8px; padding: 3rem 0; margin: 0;
}
.arc-hd-empty[hidden] { display: none !important; }
.arc-hd-empty__clear {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; font-weight: 600;
  color: #14161A; text-decoration: underline;
}

@media (max-width: 1024px) {
  /* the photo leads the stack; info, plan, then the CTA */
  /* scoped for the same reason as the desktop rule — see the warning above */
  .arc-designs-grid .arc-hd-card {
    grid-template-columns: 1fr;
    /* reset the desktop 1fr — stacked, every row is content-sized */
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "image" "info" "plan" "cta";
  }
  .arc-hd-info  { padding: 26px 26px 6px; }
  .arc-hd-cta   { padding: 0 26px 26px; }
  .arc-hd-image { height: 280px; }
  /* stacked: the divider becomes a rule above the plan */
  .arc-hd-plan  { height: 520px; border-left: 0; border-top: 1px solid #EAECEF; }
}

@media (max-width: 640px) {
  .arc-designs-grid { gap: 22px; }
  .arc-hd-image { height: 220px; }
  .arc-hd-plan  { height: 420px; }
}


/* ================================================ KNOCKDOWN BEFORE / AFTER ==
   /knockdown-rebuild/ section 3. Values MEASURED on the reference (_probe_kr_ba_full.js) and
   the frame FITTED across 17 widths (_probe_kr_ba_fit.js) — never carried over from another
   section that merely looks similar.

   ONE custom property drives the control: --arc-krba-pos. The clip and the divider both read
   it, so they cannot drift apart at any width. The JS sets that one value and nothing else. */
.arc-kr-ba.e-con { padding: 112px 0 0; background: var(--surface-alt); }
/* (0,3,0) to beat .e-con-full{max-width:100%} at (0,2,0) — the standard capped-section shape */
.arc-kr-ba > .arc-kr-ba-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important;
}

/* ---- the head column: 640 wide, centred, 44px above the frame ---- */
.arc-kr-ba .arc-kr-ba-head.e-con {
  max-width: 640px; margin: 0 auto 44px; width: 100%;
  padding: 0; gap: 0 !important; text-align: center;
}
/* 3px above / 1px below reproduces the ~19px line box the reference's inline-flex span sits
   on; without it the eyebrow starts 3px high and everything below it moves up 4px. */
.arc-kr-ba .arc-kr-ba-eyebrow.elementor-widget {
  margin: 0 !important; line-height: 0; padding: 3px 0 1px; text-align: center;
}
/* inline-flex so the box SHRINKS TO THE TEXT, as the reference's span does. As a block it
   spanned the full 640 column: the words looked centred and the measured box was 225px out. */
.arc-kr-ba .arc-kr-ba-eyebrow .elementor-heading-title {
  display: inline-flex; align-items: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: normal;
  letter-spacing: 2.16px; text-transform: uppercase; color: #6B7076; margin: 0;
}
.arc-kr-ba .arc-kr-ba-h2.elementor-widget { margin: 0 !important; }
.arc-kr-ba .arc-kr-ba-h2 .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  /* the same token .arc-ab-h2 uses — clamp(1.9rem, 3vw, 2.75rem) reproduces all five measured
     sizes (44 / 43.2 / 38.4 / 35.4 / 30.72 / 30.4). Shared by TOKEN, not by copied numbers. */
  font-size: var(--fs-display-md); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text-primary) !important;
  /* 14/0/18 here, where .arc-ab-h2 is 18/0/22 — measured, not assumed */
  margin: 14px 0 18px;
}
.arc-kr-ba .arc-kr-ba-p.elementor-widget { margin: 0 !important; }
.arc-kr-ba .arc-kr-ba-p p {
  font-family: var(--font-sans); font-weight: 400; font-size: 16.8px; line-height: 30.24px;
  color: var(--text-secondary); max-width: 560px; margin: 0 auto;
}

/* ---- the comparer frame ---- */
/* Both containers, so Elementor's own .e-con defaults cannot win. */
.arc-kr-ba .arc-krba.e-con {
  max-width: 920px; margin-inline: auto; width: 100%; padding: 0; gap: 0 !important;
}
.arc-krba .arc-krba__frame.e-con {
  position: relative; overflow: hidden; width: 100%; padding: 0; gap: 0 !important;
  /* fitted at 1920/1600/1480/1440/1280/1180/1024/1000/960/900/820/768/640/540/480/390/360 */
  height: clamp(340px, 46vw, 560px);
  cursor: ew-resize;
  /* both required, and both are BEHAVIOUR rather than appearance: without touch-action the
     browser scrolls the page instead of dragging, and without user-select a drag selects
     the labels. Neither shows up in a screenshot. */
  touch-action: none; -webkit-user-select: none; user-select: none;
}

/* ---- the two photos: native Image widgets ---- */
/* The class lands on Elementor's WRAPPER, so the wrapper is what gets positioned. */
.arc-krba .arc-krba__img.elementor-widget {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0 !important;
}
.arc-krba .arc-krba__img .elementor-widget-container,
.arc-krba .arc-krba__img figure,
.arc-krba .arc-krba__img a { display: block; width: 100%; height: 100%; margin: 0; }
/* (0,2,1) — Elementor's own `.elementor img { height: auto }` is (0,1,1) and beat a bare class
   here once already: a 1600x2400 photo rendered 1380px tall inside a 560px frame, and
   overflow:hidden made that invisible while the clip-path quietly cut the wrong box. */
.arc-krba .arc-krba__img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; border-radius: 0; display: block;
}
/* The BEFORE photo sits on top and is the clipped one, so the reveal shows the AFTER photo
   underneath. inset(0 X 0 0) with X = 100% - pos, exactly as the reference computes it.
   ⚠️ ON THE <img>, never on the wrapper — see the header of _patch_krba_elementor_css.js. */
.arc-krba .arc-krba__img--before img {
  clip-path: inset(0 calc(100% - var(--arc-krba-pos, 50%)) 0 0);
}
/* DOM order is after-then-before so the clipped one paints on top; z-index is stated anyway
   because a client reordering the two widgets in Elementor would otherwise invert the whole
   control while every measurement still passed. */
.arc-krba .arc-krba__img--after.elementor-widget  { z-index: 1; }
.arc-krba .arc-krba__img--before.elementor-widget { z-index: 2; }

/* ---- the two labels: native Heading widgets ---- */
.arc-krba .arc-krba__label.elementor-widget {
  position: absolute; top: 16px; margin: 0 !important; line-height: 0; z-index: 3;
  pointer-events: none; width: auto;
}
/* the pill is painted on the TITLE, not the wrapper — see the header */
.arc-krba .arc-krba__label .elementor-heading-title {
  display: inline-block; margin: 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 10.88px; line-height: normal;
  letter-spacing: 1.088px; text-transform: uppercase;
  color: #FFFFFF; background: var(--text-primary);
  padding: 5px 12px; border-radius: 2px;
}
.arc-krba .arc-krba__label--before.elementor-widget { left: 16px; }
.arc-krba .arc-krba__label--after.elementor-widget  { right: 16px; }

/* ---- the divider and knob: injected by the JS, not editable ---- */
.arc-krba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--arc-krba-pos, 50%);
  width: 3px; background: #FFFFFF; transform: translateX(-1.5px);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.28); z-index: 4;
  /* the bar must never eat the pointer, or a drag that lands on it stops dead */
  pointer-events: none;
}
.arc-krba__knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: #FFFFFF;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);   /* the glyph strokes with currentColor */
}
/* 🟢 DEVIATION D3: the reference sets outline-style:none and has no tabindex, so its slider
   is unreachable by keyboard. This build makes it focusable, which means it MUST show where
   focus is. :focus-visible only, so a pointer drag never paints a ring. */
.arc-krba__frame:focus { outline: none; }
.arc-krba__frame:focus-visible {
  outline: 3px solid var(--text-primary); outline-offset: 3px;
}

/* ---- the CTA below the frame ---- */
.arc-kr-ba .arc-kr-ba-cta.elementor-widget { margin: 40px 0 0 !important; text-align: center; }
.arc-kr-ba .arc-kr-ba-cta .elementor-widget-container { display: flex; justify-content: center; }


/* ============================================ HOME DESIGN SINGLE — HERO ==
   Template 152, the home_design CPT's Theme Builder Single. Values MEASURED on the reference
   (home-design.html) and FITTED across 1920/1440/1024/900/640/390.

   The BANNER IS NATIVE (owner direction 2026-09-01): an Elementor Image Carousel bound to the
   arc_hd_gallery ACF field, plus theme-post-title and an ACF-bound Heading. So this CSS drives
   Elementor's own Swiper markup rather than markup we control, and every rule below has to
   out-specify a widget stylesheet that loads after ours.

   The section is 768 tall at EVERY width — it does not scale — and the content is
   BOTTOM-ANCHORED, so the stack always ends the same distance above the foot however long a
   design's name or lead runs. In a bottom-anchored column a POSITION error is a HEIGHT error
   somewhere below it: the crumb bar being 3px short moved every row above it. */
.arc-hds-hero.e-con {
  position: relative; overflow: hidden; height: 768px; padding: 0;
  gap: 0 !important; justify-content: flex-end;
}

/* ---- the media layer: Elementor Image Carousel, full-bleed ---- */
.arc-hds-hero .arc-hds-media.elementor-widget { position: absolute; inset: 0; margin: 0 !important; }
.arc-hds-hero .arc-hds-media .elementor-widget-container,
.arc-hds-hero .arc-hds-media .elementor-image-carousel-wrapper,
.arc-hds-hero .arc-hds-media .swiper,
.arc-hds-hero .arc-hds-media .swiper-wrapper,
.arc-hds-hero .arc-hds-media .swiper-slide,
/* ⚠️ .swiper-slide-inner is the <figure> Elementor wraps each slide image in, and it was the
   missing link in this chain: with it left at height:auto the img's own height:100% resolved
   against an AUTO-height parent and fell back to the natural aspect — 960 tall in a 768 slide
   at 1440, 260 at 390. The rule was matching and !important the whole time; a percentage
   height is only as good as the chain of definite heights above it. */
.arc-hds-hero .arc-hds-media .swiper-slide-inner { height: 100% !important; }
/* ⛔ Elementor reserves a 30px strip under the slides for its pagination
   (`.swiper{padding:0 0 30px}`), so inside our fixed 768 band the slides render 738 and
   THREE separate-looking defects follow from it: the photo is 30 short, the arrows centre
   on 738 (342 instead of 357), and the dots sit in the strip (754 instead of 711).
   Zero the padding once; the pagination is positioned explicitly below. */
.arc-hds-hero .arc-hds-media .elementor-image-carousel-wrapper,
.arc-hds-hero .arc-hds-media .swiper { padding-bottom: 0 !important; }
.arc-hds-hero .arc-hds-media .elementor-carousel-image {
  height: 100% !important; background-size: cover; background-position: 50% 50%;
}
/* (0,3,1) — Elementor's own `.elementor img { height: auto }` is (0,1,1) and has beaten a bare
   class twice on this build, rendering a photo at its intrinsic height inside an
   overflow:hidden box where nothing looked wrong. */
/* The slide image rendered 960 tall in a 768 slide — its natural 3:2 at 1440 wide, i.e.
   `height: auto` still winning. Widened to every img in the media layer and raised to
   (0,4,1), because `.elementor img { height: auto }` is only the most famous of several
   rules that reach it. */
.arc-hds-hero .arc-hds-media .swiper .swiper-slide img,
.arc-hds-hero .arc-hds-media .swiper img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; object-position: 50% 50%; display: block;
}

/* ---- the two washes, on the media WIDGET's pseudos ---- */
/* NOT the container's ::before: every .e-con reserves that for Elementor's background-overlay
   feature and forces width:max(100%,…), so a custom one there loses its geometry. A widget div
   has both pseudos free. Insets are stated explicitly for the same reason. */
.arc-hds-hero .arc-hds-media::before,
.arc-hds-hero .arc-hds-media::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 2;
}
.arc-hds-hero .arc-hds-media::before {
  top: 0; bottom: 0;
  background-image: linear-gradient(to top, rgba(18, 17, 16, 0.78) 0%,
                                    rgba(18, 17, 16, 0.3) 45%, rgba(18, 17, 16, 0.12) 100%);
}
.arc-hds-hero .arc-hds-media::after {
  top: 0; height: 240px;
  background-image: linear-gradient(rgba(12, 13, 15, 0.55) 0%, rgba(12, 13, 15, 0) 32%);
}

/* ---- arrows: Elementor's swiper buttons, restyled to the reference's 54px circles ---- */
/* ⚠️ ties lost to source order. e-swiper.min.css sets
   `.elementor-element.elementor-pagination-position-outside .elementor-swiper-button
    { top: calc(50% - 15px) }` at (0,3,0) — the same specificity as a three-class rule of
   ours — and loads later, so it won and the arrows centred 15px high. Out-specify by adding
   .swiper to the chain AND state !important on the positional properties: between two
   !important declarations the MORE SPECIFIC selector still decides. */
.arc-hds-hero .arc-hds-media .swiper .elementor-swiper-button {
  top: 50% !important; transform: translateY(-50%) !important;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #FFFFFF; cursor: pointer; padding: 0; z-index: 4;
  display: flex !important; align-items: center; justify-content: center; line-height: 0;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.arc-hds-hero .arc-hds-media .swiper .elementor-swiper-button:hover { background: rgba(255, 255, 255, 0.26); }
.arc-hds-hero .arc-hds-media .swiper .elementor-swiper-button svg,
.arc-hds-hero .arc-hds-media .swiper .elementor-swiper-button i { width: 22px; height: 22px; font-size: 22px; }
/* 14 at 390, 19.2 at 640, 27 at 900, 28 from 1024 up — one clamp reproduces all six */
.arc-hds-hero .arc-hds-media .swiper .elementor-swiper-button-prev {
  left: clamp(14px, 3vw, 28px) !important; right: auto !important;
}
.arc-hds-hero .arc-hds-media .swiper .elementor-swiper-button-next {
  right: clamp(14px, 3vw, 28px) !important; left: auto !important;
}

/* ---- dots: dragged out of Elementor's centred strip to the CONTENT column's left edge ---- */
/* The carousel is full-bleed and knows nothing about the content cap, so the cap arithmetic is
   re-derived here: the column starts at the gutter, or at half the slack plus the gutter once
   the viewport is wider than --container-wide. Same formula the .arc-hds-inner container gets
   for free from max-width + margin-inline:auto. */
/* swiper.min.css sets `bottom:10px` and e-swiper.min.css `bottom:5px` on
   `.swiper-horizontal > .swiper-pagination-bullets`, both later than ours — hence 754. */
.arc-hds-hero .arc-hds-media .swiper .swiper-pagination {
  /* absolute against the swiper, which is the full 768 now that its bottom padding is
     zeroed — 768 − 48 − 9 = 711, the reference's dot row */
  position: absolute !important; bottom: 48px !important; top: auto !important;
  left: max(var(--gutter), calc((100% - var(--container-wide)) / 2 + var(--gutter)));
  right: auto; width: auto;
  display: flex; align-items: center; gap: 8px; z-index: 4;
}
.arc-hds-hero .arc-hds-media .swiper .swiper-pagination-bullet {
  width: 9px; height: 9px; border-radius: 999px; margin: 0 !important;
  background: rgba(255, 255, 255, 0.5); opacity: 1;
  transition: width var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.arc-hds-hero .arc-hds-media .swiper .swiper-pagination-bullet-active {
  width: 28px !important; background: #FFFFFF !important;
}

/* ---- the content column: bottom-anchored inside the standard capped container ---- */
/* (0,3,0) to beat .e-con-full{max-width:100%} at (0,2,0) */
.arc-hds-hero > .arc-hds-inner.e-con {
  position: relative; z-index: 3;
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  /* 81 = the dots' 48 + their 9 + the reference's 24 gap — the content stack ends at 687 */
  padding: 0 var(--gutter) 81px; gap: 0 !important;
  align-items: flex-start;
}
/* ⛔ NO `pointer-events: none` HERE. It was added so the column could not swallow a drag on the
   banner carousel beneath it, with `a { pointer-events: auto }` to keep links working — but it
   made every non-link thing in the hero click-through, so the H1, the breadcrumb text and the
   lead could not be hovered or selected at all: 717 of 720 hit-test points over the hero text
   landed on `.swiper-wrapper` instead. Reported as "the swiper is in higher priority than the
   text", which is exactly right — the column is above it visually (z-index 3) and transparent
   to the pointer.
   ⚠️ The REFERENCE's own hero column is `pointer-events: auto`, and its H1 and lead hit-test to
   themselves. The click-through was an invention to protect a drag the reference does not
   protect either — the carousel is navigated by its dots. Matching the reference restores the
   text and costs nothing.
   Interaction-only, so no pixel diff, computed-style pass, axe run or geometry harness could
   ever have seen it: 384 hero checks were green throughout. `_qa-hero-pointer.js` asserts it now. */
.arc-hds-hero .arc-hds-crumbs.elementor-widget { margin: 0 !important; line-height: 0; }
/* The reference's bar measures 18 tall against our 15 — its own font-size is 12.8 where ours
   inherited the body's 16. min-height reproduces the measured outcome directly rather than
   guessing at the line-height arithmetic behind it. */
.arc-hds-hero .arc-hds-crumbs .arc-crumbs { min-height: 18px; font-size: 12.8px; }
.arc-hds-hero .arc-hds-h1.elementor-widget { margin: 16px 0 0 !important; }
.arc-hds-hero .arc-hds-h1 .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  /* 41.6 at 640 and below, 54 at 900, 60.8 from 1024 up — fitted, not stepped */
  font-size: clamp(41.6px, 6vw, 60.8px); line-height: 1.04; letter-spacing: -0.01em;
  color: #FFFFFF !important; margin: 0;
}
.arc-hds-hero .arc-hds-lead.elementor-widget { margin: 18px 0 0 !important; }
/* the lead is a Heading widget rendering <p class="elementor-heading-title"> — the Text Editor
   editor control is NOT dynamic-capable, so it could not be bound to the ACF field */
.arc-hds-hero .arc-hds-lead p,
.arc-hds-hero .arc-hds-lead .elementor-heading-title {
  font-family: var(--font-sans); font-weight: 300; font-size: 16.8px; line-height: 28.56px;
  color: rgba(255, 255, 255, 0.85); max-width: 520px; margin: 0;
}


/* ====================================== HOME DESIGN SINGLE — SPECS ==
   A design post's own content, section 1. Values MEASURED on the reference (?design=Airlie)
   and FITTED across 1920/1440/1024/900/768/640/480/390.

   ⚠️ It IS capped at --container-wide, like the hero. An earlier version of this comment
   said the opposite, from reading the reference card's left edge as 65 at 1920 — but that
   65 was SECTION-RELATIVE (the probe measures from the section), and the section is itself
   1480 centred, so the card's absolute left is 285. Mistaking a relative coordinate for an
   absolute one made the columns 832 wide against the reference's 611. */
.arc-hdss.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 64px var(--gutter) 80px; background: #FFFFFF; gap: 0 !important;
}
/* ---- the CARD. Owner-reported "missing border", fixed 2026-09-02. ----
   This box is the reference's card and it carries a real border, read from computed style
   at 1920/1024/390 (`_probe_hdss_border.js`):
     border 1px solid rgb(234,236,239)  ·  radius 2  ·  background #FFFFFF
     box-shadow rgba(66,58,45,.07) 0 2px 8px 0
   ⚠️ It shipped as 1px of container PADDING on a note asserting the reference had no border.
   With box-sizing:border-box the two give the IDENTICAL box — same outer 1352, same child at
   65 — so the geometry agreed at every width and the border and shadow were simply absent.
   That is why 1095 green checks did not catch it: nothing in the harness read border-*.
   ⚠️ NO padding here, and the builder now sets an explicit 0 rather than 1: padding declared
   in both places is a cascade coin-toss (that is what cancelled the inset once before), and
   an UNSET container padding falls back to Elementor's own ~10px default.
   (0,3,0) to clear Elementor's own `.e-con` rules, which tie a bare class and load later. */
.arc-hdss > .arc-hdss-inner.e-con {
  width: 100%; gap: 0 !important;
  border: 1px solid #EAECEF; border-radius: 2px; background: #FFFFFF;
  box-shadow: rgba(66, 58, 45, 0.07) 0 2px 8px 0;
}

/* ---- card 1: the dark header ---- */
/* rgb(17,19,21), which is why the eyebrow computes to white-60% and one button carries white
   text on a transparent ground. Reading those colours WITHOUT the card would have looked like
   a palette error rather than a dark band. */
/* ⚠️ width:100% is load-bearing. Without it Elementor's `.e-con` sizes this flex child
   from its own --width and the card came out shrink-to-fit — 1049.63 against the
   reference's 1322.81 — which then narrowed the floorplan columns and moved everything
   below. One missing width produced four different-looking failures.
   No border on THIS card — verified, and still true: the dark head and the body card both
   measure border 0px none, margin 0. ⚠️ Read "this card", not "the cards": their WRAPPER
   (.arc-hdss-inner) does carry a 1px border, and this sentence previously read as though it
   covered all three, which is how the wrapper's border came to ship as padding. */
.arc-hdss .arc-hdss-head.e-con {
  width: 100%; background: rgb(17, 19, 21);
  padding: clamp(26px, 4vw, 40px); gap: 0 !important;
}
/* ⚠️ align-items is FLEX-START, not center. Found 2026-09-02 while probing the missing
   border. The row is as tall as the title column (70.67 at 1920) and the reference
   top-aligns the buttons in it — button top == row top == 105. Centring them put both
   buttons exactly half the slack low: 6.44px at 1920, 6.11 at 1024, and 0 at 390, where
   the row is already a column and the bug cannot show. The section total is unaffected,
   so this is invisible to a height check — it is a POSITION inside a row the title
   governs, the same shape as the dCentre lesson on the plan split. */
.arc-hdss .arc-hdss-head-row.e-con {
  flex-direction: row; align-items: flex-start; justify-content: space-between;
  gap: 24px; padding: 0; width: 100%;
}
.arc-hdss .arc-hdss-title.e-con { width: auto; padding: 0; gap: 0 !important; align-items: flex-start; }
/* 5px above / 1px below reproduces the 19px line box the reference's eyebrow sits in
   (its glyph box is 13). Without it the H2, the dark card, the body card and every grid
   row below measured 5px high — in a stack a position error is a height error above. */
.arc-hdss .arc-hdss-eyebrow.elementor-widget {
  margin: 0 !important; line-height: 0; padding: 5px 0 1px;
}
.arc-hdss .arc-hdss-eyebrow .elementor-heading-title {
  display: inline-flex; margin: 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 10.56px; line-height: normal;
  letter-spacing: 1.4784px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.arc-hdss .arc-hdss-h2.elementor-widget { margin: 8px 0 0 !important; }
.arc-hdss .arc-hdss-h2 .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  /* 41.6 at 1440, 40.96 at 1024, 36 at 900, 30.4 at 640 and below */
  font-size: clamp(30.4px, 4vw, 41.6px); line-height: 1.05; letter-spacing: -0.01em;
  color: #FFFFFF !important; margin: 0; white-space: nowrap;
}
.arc-hdss .arc-hdss-actions.e-con {
  flex-direction: row; align-items: center; width: auto; padding: 0; gap: 12px;
}
/* At <=900 the head row becomes a column: the reference drops the buttons UNDER the title
   with a 24px gap, which is 24 + 57.78 = the 81.78 the dark card was short. */
@media (max-width: 900px) {
  .arc-hdss .arc-hdss-head-row.e-con {
    flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 24px;
  }
  .arc-hdss .arc-hdss-title.e-con { width: 100%; }
}
/* At <=480 the two buttons stack as well: 12 + 57.78 = the further 69.78 at 390. */
@media (max-width: 480px) {
  .arc-hdss .arc-hdss-actions.e-con {
    flex-direction: column; align-items: flex-start; width: 100%; gap: 12px;
  }
}
/* Both buttons: 18.4/40 padding, radius 2, 14/600, ls 1.12 — measured, and deliberately NOT
   the site .arc-ab-btn primary, which is 14.4/28 at 13px. A different button gets its own
   rule rather than a modifier that would drift when either changes. */
.arc-hdss .arc-hdss-btn .elementor-button {
  padding: 18.4px 40px !important; border-radius: 2px !important; min-height: 0 !important;
  font-family: var(--font-sans) !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 1.12px !important;
  /* `normal` (≈19 at 14px), not 21 — with box-sizing:border-box that is the 2px of
     button height, and the reference computes normal. */
  line-height: normal !important;
  text-transform: uppercase !important; /* the reference renders the label UPPERCASE.
     textContent reads "Enquire about this home" either way — the case comes from this
     property, and it was the whole 30.67px of missing button width. */
  white-space: nowrap !important;
  /* ⚠️ transform + box-shadow BELONG IN THIS LIST. The site-wide lift layer (arc-btn-*) supplies
     the hover itself, but this rule is (0,3,0) against its (0,2,0), so whatever transition THIS
     declares is what the button gets — omitting them made the lift snap instead of easing. */
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
/* ⚠️ AT REST ONLY. This was `box-shadow: none !important` on the base rule, and an !important
   beats the foundation's hover shadow whatever its specificity — so the button lifted on hover
   but never gained the reference's `rgba(20,22,26,.16) 0 10px 26px`. A partially-applied hover
   (transform landed, shadow did not) is the classic tell for a single-property override rather
   than a broken selector. Excluding the hover states keeps the at-rest reset and lets the shared
   layer through, instead of re-declaring the shadow per section (which is what G17 exists to
   prevent). */
.arc-hdss .arc-hdss-btn .elementor-button:not(:hover):not(:focus-visible) {
  box-shadow: none !important;
}
.arc-hdss .arc-hdss-btn--ghost .elementor-button {
  background-color: transparent !important; background-image: none !important;
  border: 1px solid rgb(20, 22, 26) !important; color: #FFFFFF !important;
}
.arc-hdss .arc-hdss-btn--solid .elementor-button {
  background-color: #FFFFFF !important; background-image: none !important;
  border: 1px solid #FFFFFF !important; color: rgb(20, 22, 26) !important;
}

/* ---- card 2: the specs + floorplan body ---- */
/* symmetric. The extra 4px I briefly put here belongs to the plan block below — the harness
   reads the reference's padding DIRECTLY as "40px", which beat my arithmetic. */
.arc-hdss .arc-hdss-body.e-con {
  width: 100%; padding: clamp(26px, 4vw, 40px); gap: 0 !important;
}
.arc-hdss .arc-hdss-specs.elementor-widget { margin: 0 !important; width: 100%; }
/* row gap is 28, column gap 20. Derived, not guessed: a cell measures 37.23 on both sides
   ⚠️ 28 was WRONG and this comment used to argue for it from arithmetic on a body-card height
   whose parts I had assumed. The harness reads the reference grid DIRECTLY — gap "26px 20px",
   height 163.7 — and a direct reading beats a derivation from assumed parts every time. */
.arc-hdss-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }
@media (max-width: 900px) {
  .arc-hdss-grid { grid-template-columns: repeat(2, 1fr); }
}
.arc-hdss-cell { display: flex; align-items: center; gap: 14px; }
/* 1.6, not the shared helper 1.5 — scoped here so three verified consumers keep theirs */
.arc-hdss-cell .arc-spec-ico {
  flex: 0 0 auto; width: 18px; height: 18px; stroke-width: 1.6; color: #14161A; display: block;
}
.arc-hdss-cell__txt { display: block; }
.arc-hdss-cell__v {
  display: block; font-family: var(--font-sans); font-size: 18.4px; font-weight: 500;
  line-height: 23.2px; color: #14161A;
}
.arc-hdss-cell__l {
  display: block; font-family: var(--font-sans); font-size: 11.52px; font-weight: 400;
  line-height: 14px; letter-spacing: 1.152px; color: var(--text-muted);
}

/* ---- the floorplan block, under a 1px rule ---- */
/* The reference draws a real <hr> with margin 44px 0. Reproduced as a border on the block so
   the tree carries no empty widget whose only job is to be a line: 44 above + 1 + 44 below is
   exactly the 419.4 -> 508.4 the reference measures. */
.arc-hdss .arc-hdss-plan.e-con {
  width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; gap: 48px;
  /* the 1px rule and its air live on the Divider widget above.
     ⚠️ align-items centres against the ROW, not the padding box — so the 4px below must NOT
     live here. It belongs to the image widget; see .arc-hdss-plan-img. */
  align-items: center;
}
@media (max-width: 900px) {
  .arc-hdss .arc-hdss-plan.e-con { grid-template-columns: 1fr; gap: 40px; }
}
/* the divider: the reference's <hr>, 1px #EAECEF.
   ⚠️ The divider margin is 4vw between a 30 floor and a 44 ceiling, NOT a fixed 44. Measured
   grid-to-floorplan gap: 89.01 at 1440/1920, 82.91 at 1024, 73 at 900, 61.01 at 480/390 —
   1px of rule plus twice 44 / 40.96 / 36 / 30, and 1024 x .04 = 40.96 to the pixel. The same
   clamp shape the cards' own padding uses. A fixed 44 was right at 2 of 8 widths. */
.arc-hdss .arc-hdss-rule.elementor-widget {
  margin: clamp(30px, 4vw, 44px) 0 !important; width: 100%;
}
.arc-hdss .arc-hdss-rule .elementor-divider { padding: 0 !important; }
.arc-hdss .arc-hdss-rule .elementor-divider-separator {
  border-top: 1px solid #EAECEF !important; width: 100% !important; margin: 0 !important;
}
.arc-hdss .arc-hdss-plan-text.e-con { width: 100%; padding: 0; gap: 0 !important; align-items: flex-start; }
/* plan eyebrow line box: 3px above / 1px below reproduces the 19px row the reference's glyph
   (15 tall) sits in. The SAME fix the dark card's eyebrow needed — I patched that one and did
   not check its twin, so 4px propagated down the whole card. */
.arc-hdss .arc-hdss-plan-eyebrow.elementor-widget {
  margin: 0 !important; line-height: 0; padding: 3px 0 1px;
}
.arc-hdss .arc-hdss-plan-eyebrow .elementor-heading-title {
  display: inline-flex; margin: 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: normal;
  letter-spacing: 2.16px; text-transform: uppercase; color: #6B7076;
}
.arc-hdss .arc-hdss-plan-h2.elementor-widget { margin: 14px 0 18px !important; }
.arc-hdss .arc-hdss-plan-h2 .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: var(--fs-display-md); line-height: 1.12; letter-spacing: -0.01em;
  color: var(--text-primary) !important; margin: 0;
}
.arc-hdss .arc-hdss-plan-lead.elementor-widget { margin: 0 !important; }
.arc-hdss .arc-hdss-plan-lead p,
.arc-hdss .arc-hdss-plan-lead .elementor-heading-title {
  font-family: var(--font-sans); font-weight: 400; font-size: 16.8px; line-height: 30.24px;
  color: var(--text-secondary); max-width: 460px; margin: 0;
}
/* the reference wraps the plan in a <figure> that is 4px taller than the 540 image inside it,
   at every width (544 at 1024/1440/1920, and +4 again at 900 and 390). That 4px is what sets
   the split's row height to 544, and the row is what the centred text column is centred in —
   put it on the split instead and the text column rides 2px high. */
.arc-hdss .arc-hdss-plan-img.elementor-widget {
  margin: 0 !important; text-align: center; padding-bottom: 4px;
}
/* (0,3,1) — `.elementor img { height: auto }` is (0,1,1) and has beaten a bare class three
   times on this build. The plan is a FIXED 360x540 and scales only below 420. */
/* object-fit is CONTAIN, not fill. It was authored as `fill` against the placeholder plan
   (400x600 - exactly the box ratio 2:3), so nothing distorted while all 23 designs shared that
   one file. The real per-design plans are not 2:3: Airlie 1200x1664 (0.721), Aura 1000x1738
   (0.575), Arlo 996x2560 (0.389). `fill` stretched every one of them, Arlo severely.
   CONTAIN keeps the element box at exactly 360x540, so the block's 4px / 544 row height and the
   centred text column it governs are untouched - only the pixels inside the box change.
   Trade-off: a plan taller than 2:3 now letterboxes (Arlo renders about 210x540), and there is
   NO lightbox or enlarge on this image, so a very tall plan reads small. Per-design sizing or a
   real enlarge affordance is the proper fix; this stops the distortion without moving layout. */
.arc-hdss .arc-hdss-plan-img img {
  width: 360px !important; height: 540px !important; max-width: 100% !important;
  object-fit: contain; display: block; margin-inline: auto; cursor: zoom-in;
}
@media (max-width: 420px) {
  .arc-hdss .arc-hdss-plan-img img { width: 296px !important; height: 444px !important; }
}

/* ---- the floor plan inside Elementor's lightbox ----
   The plans are transparent PNGs. Arlo-185-Floorplan is 74% transparent by sampled area, with
   fully transparent corners (alpha 0.00), and the others are the same shape. That is invisible
   on the page, which is white - but Elementor's lightbox overlay is rgba(0,0,0,.8), so an
   un-backed plan renders dark-on-dark and the room labels and wall lines disappear. Painting
   the lightbox image white is what makes the enlarge readable.
   Scope: every lightbox on pages this sheet loads on, not just the plan. That is deliberate and
   safe - every other lightboxed image on the build is an opaque photograph, and a white ground
   behind an opaque JPEG is invisible. arc-home.css already assumes a white lightbox ground for
   the team photo. Revisit only if a lightbox is ever meant to show transparency over the dim. */
.elementor-lightbox .elementor-lightbox-image { background-color: #fff; }


/* ==================================== HOME DESIGN SINGLE — FACADE OPTIONS ==
   Section 3 of a design's own page. Reference: home-design.html?design=Airlie, section 3,
   swept across 24 widths by build/_probe_hds_facades2.js.

   Section height falls out of the parts and is asserted rather than set: at 1440 that is
   80 + 48.38 (H2) + 44 + 281.5 (row) + 36 + 50 (arrows) + 96 = 635.88, which is the
   reference's own number. Nothing here sets a height. */
.arc-hdsf-sec.e-con {
  width: 100%; max-width: var(--container-wide); margin-inline: auto;
  padding: 80px var(--gutter) 96px; background: #FFFFFF; gap: 0 !important;
}
/* The H2 is centred on a 640 measure, NOT full-bleed: at 480 and 390 the measure is wider than
   the column and it falls back to 100%, which is what the reference does (w=440 at 480,
   w=350 at 390 — read, not assumed). letter-spacing is normal here where the Floorplan H2
   two sections up is -0.01em; they are different headings on the same page and the reference
   sets them differently. */
.arc-hdsf-sec .arc-hdsf-h2.elementor-widget { margin: 0 !important; width: 100%; }
.arc-hdsf-sec .arc-hdsf-h2 .elementor-heading-title {
  width: min(640px, 100%); margin: 0 auto; text-align: center;
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: var(--fs-display-md); line-height: 1.12; letter-spacing: normal;
  color: var(--text-primary) !important;
}
/* the fixed 44px between the heading and the row, at every width (measured 1920 -> 390) */
.arc-hdsf-sec .arc-hdsf-w.elementor-widget { margin: 44px 0 0 !important; width: 100%; }
.arc-hdsf-sec .arc-hdsf-w .elementor-widget-container { width: 100%; }

/* ---- the scrolling row ---- */
/* safe center and not plain center: the row overflows at every width below 1290, and plain
   centring pushes the overflow equally out of BOTH ends, putting the first card behind the
   scroll origin where nothing can reach it. */
.arc-hdsf__row {
  display: flex; gap: 24px; justify-content: safe center;
  overflow-x: auto; overflow-y: hidden; padding: 0 0 6px;
  scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none;
}
.arc-hdsf__row::-webkit-scrollbar { width: 0; height: 0; display: none; }
.arc-hdsf__item { margin: 0; flex: 0 0 auto; scroll-snap-align: start; }

/* ---- the card ---- */
/* 29.44vw between a 280 floor and a 380 ceiling — fitted on 24 widths, not four.
   aspect-ratio rather than a height: 380/237.5, 301.47/188.41 and 280/175 are all exactly 1.6,
   so the reference is holding a ratio and not two independent ramps. */
.arc-hdsf__card {
  display: block; position: relative; overflow: hidden;
  width: clamp(280px, 29.44vw, 380px); aspect-ratio: 1.6;
  background: #EEF0F2; border-radius: 2px;
}
/* (0,3,1) — .elementor img { height: auto } is (0,1,1) and has beaten a bare class three
   times on this build. */
.arc-hdsf__card img {
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.arc-hdsf__card:hover img,
.arc-hdsf__card:focus-visible img { transform: scale(1.04); }

/* the enlarge badge: opacity 0 AND scale(.9) at rest — both, not either. Reading only the
   transform would have shipped a badge that is always visible but slightly small. */
.arc-hdsf__zoom {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(18, 17, 16, 0.72); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.9); pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.arc-hdsf__card:hover .arc-hdsf__zoom,
.arc-hdsf__card:focus-visible .arc-hdsf__zoom { opacity: 1; transform: scale(1); }

/* the caption is FIXED type at every width — no ramp. Checked at 1920/1480/1440/1024/900/700/
   480/390, all 19.2/500/-0.192px, because a single-width read cannot tell a fixed size from a
   clamped one (the divider margin two sections up was misread exactly that way). */
.arc-hdsf__name {
  margin: 14px 0 0; font-family: var(--font-sans);
  font-size: 19.2px; font-weight: 500; line-height: normal;
  letter-spacing: -0.192px; color: #14161A; text-align: start;
}

/* ---- the arrows ---- */
.arc-hdsf__nav { display: flex; justify-content: center; gap: 12px; margin-top: 36px; }
.arc-hdsf__arrow {
  width: 50px; height: 50px; padding: 1px 6px; border-radius: 50%;
  background: #FFFFFF; border: 1px solid #14161A; color: #14161A;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--dur-fast) var(--ease-out);
}
.arc-hdsf__arrow:hover { background: #F8F9FA; }

/* ---- /single-storey/ and /double-storey/: the section heading above the grid ----
   The one element the BuildTec format has that our own listing page does not. Styled to this
   site's standard section-heading treatment — the same clamp/line-height/weight the CTA band and
   Our Inclusions use — rather than to another site's CSS: the FORMAT was the brief, the type
   scale is ours. Left-aligned to the content column, and 44 to the grid, which is the head->row
   gap this design system already uses in two other sections. */
.arc-hd-listing .arc-hd-listing-h2.elementor-widget { margin: 0 0 44px !important; }
.arc-hd-listing .arc-hd-listing-h2 .elementor-heading-title {
  margin: 0; font-family: var(--font-display); font-weight: 300 !important;
  font-size: clamp(30.4px, 3vw, 44px); line-height: 1.12; letter-spacing: normal;
  color: var(--text-primary) !important;
}

/* ============================ HOME DESIGN SINGLE — OUR INCLUSIONS (D4) ==
   The shared library section template `arcadia-design-inclusions`, embedded on every design
   post by a Template widget inside .arc-hdsi-sec. Values MEASURED on the reference
   (?design=Airlie, main.children[3]) and FITTED across
   1920/1600/1440/1280/1100/1024/900/768/640/480/390 — nothing here is a guessed breakpoint.

   Reference facts worth keeping, because each one is a thing that would otherwise be invented:
     - the head->grid gap is a CONSTANT 44 at every one of the eleven widths (it is a margin on
       the head, not a grid gap);
     - the h2 is fluid `clamp(30.4px, 3vw, 44px)` — 3vw fits 43.2@1440, 38.4@1280, 33@1100 and
       30.72@1024 exactly, so it is one clamp, not three media-query steps;
     - the media is aspect-ratio 3/2, measured 1.5000 at ALL eleven widths;
     - columns break 3->2 at <=900 and 2->1 at <=620, both found by bisection (621 is 2 col,
       620 is 1) rather than assumed from another section;
     - the CTA is pinned to the CARD bottom: card 3 has a 4-line blurb to card 1's 5 and all
       three CTAs still sit at the same y with the cards equal height. Grid stretch +
       margin-top:auto, never a measured offset. */

/* the embed wrapper contributes no chrome of its own */
.arc-hdsi-sec.e-con { width: 100%; padding: 0; gap: 0 !important; }

.arc-hdsi.e-con {
  width: 100%; padding: 80px 0 96px; background: #F8F9FA; gap: 0 !important;
}
/* (0,3,0) to clear Elementor's own .e-con-full{max-width:100%} at (0,2,0) */
.arc-hdsi .arc-hdsi-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important;
}

/* ---- head: a centred 640 measure, 44 above the grid ---- */
.arc-hdsi .arc-hdsi-head.e-con {
  width: min(640px, 100%); margin-inline: auto; margin-bottom: 44px;
  padding: 0; gap: 0 !important; text-align: center; align-items: stretch;
}
/* The eyebrow sits in a 19px LINE BOX on the reference (its own glyph box is 15, 3px in).
   Reproduced as 3 above / 1 below on a zeroed widget — the same shape the specs section needed.
   Get this wrong and the h2, the grid and every card below it move as one. */
.arc-hdsi .arc-hdsi-eyebrow.elementor-widget {
  margin: 0 !important; line-height: 0; padding: 3px 0 1px;
}
.arc-hdsi .arc-hdsi-eyebrow .elementor-heading-title {
  display: inline-flex; margin: 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: normal;
  letter-spacing: 2.16px; text-transform: uppercase; color: #6B7076;
}
.arc-hdsi .arc-hdsi-h2.elementor-widget { margin: 14px 0 0 !important; }
.arc-hdsi .arc-hdsi-h2 .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300 !important;
  font-size: clamp(30.4px, 3vw, 44px); line-height: 1.12; letter-spacing: -0.01em;
  color: #14161A !important; margin: 0;
}

/* ---- the three cards ---- */
.arc-hdsi .arc-hdsi-grid.e-con {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px !important; align-items: stretch;
  width: 100%; padding: 0;
}
/* width:auto is load-bearing — Elementor gives every .e-con a --width, which a grid item keeps
   and which then overrides the track. Same gotcha as the COL() inline widths. */
.arc-hdsi .arc-hdsi-card.e-con {
  width: auto !important; height: 100%; padding: 0; gap: 0 !important;
  background: #FFFFFF; border: 1px solid #EAECEF; border-radius: 2px;
  box-shadow: rgba(66, 58, 45, 0.06) 0 1px 2px 0;
}
/* `.elementor img{height:auto;max-width:100%}` is (0,1,1) and beats a plain class, so every
   dimension here needs !important or the photo renders at its natural 2400px. */
.arc-hdsi .arc-hdsi-img.elementor-widget { margin: 0 !important; width: 100%; line-height: 0; }
.arc-hdsi .arc-hdsi-img .elementor-widget-container { line-height: 0; }
.arc-hdsi .arc-hdsi-img img {
  display: block !important; width: 100% !important; height: auto !important;
  max-width: none !important; aspect-ratio: 3 / 2; object-fit: cover; background: #EEF0F2;
}
.arc-hdsi .arc-hdsi-body.e-con {
  flex: 1 1 auto; width: 100%; padding: 26px 28px 28px; gap: 0 !important;
  align-items: stretch;
}
.arc-hdsi .arc-hdsi-lvl.elementor-widget { margin: 0 !important; }
.arc-hdsi .arc-hdsi-lvl .elementor-heading-title {
  margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: 9.92px;
  line-height: normal; letter-spacing: 1.3888px; text-transform: uppercase; color: #6B7076;
}
.arc-hdsi .arc-hdsi-name.elementor-widget { margin: 12px 0 0 !important; }
.arc-hdsi .arc-hdsi-name .elementor-heading-title {
  margin: 0; font-family: var(--font-display); font-weight: 500 !important; font-size: 24px;
  line-height: normal; letter-spacing: -0.24px; color: #14161A !important;
}
/* target the widget's own class + p, never `.elementor-text-editor p` — the <p> is not reliably
   nested there, and a <p> left at full column width changes where the text wraps */
/* ⚠️ 26 BELOW the blurb as well as 14 above it. margin-top:auto on the CTA alone is not
   enough: it pins the CTA on the two SHORT cards, but the tallest card has no free space for
   auto to consume, so its CTA sat hard against the blurb and every card came out 26 short
   (and the section 26, 52 or 78 short as the grid rewrapped). The reference holds this gap on
   the tallest card too, so it is a real margin plus the auto-pin, not the auto-pin alone. */
.arc-hdsi .arc-hdsi-text.elementor-widget { margin: 14px 0 26px !important; }
.arc-hdsi .arc-hdsi-text p {
  margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 15.2px;
  line-height: 26.144px; color: #565B62;
}
/* margin-top:auto is what pins the CTA to the card bottom across three different blurb lengths */
.arc-hdsi .arc-hdsi-cta.elementor-widget { margin: auto 0 0 !important; width: 100%; }
.arc-hdsi .arc-hdsi-cta .elementor-button {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 13px 22px !important; border-radius: 2px !important; min-height: 0 !important;
  background-color: #FFFFFF !important; color: #14161A !important;
  border: 1px solid #14161A !important;
  font-family: var(--font-sans) !important; font-size: 12.16px !important;
  font-weight: 600 !important; letter-spacing: 1.216px !important;
  line-height: normal !important; text-transform: uppercase !important;
}

/* ⚠️ HOVER IS AN INVERT HERE, NOT A LIFT — measured by driving a real pointer over the
   reference: this card CTA does NOT move (transform stays none, no shadow); it swaps
   background #FFFFFF -> #14161A and text #14161A -> #FFFFFF. The head-row and CTA-band buttons
   on the same page DO lift, so the site-wide lift layer is deliberately not applied here.
   Reproducing "a button, so it must lift" would have been inventing a hover the design does not
   have. No reduced-motion guard: a colour change is not motion. */
.arc-hdsi .arc-hdsi-cta .elementor-button {
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.arc-hdsi .arc-hdsi-cta .elementor-button:hover,
.arc-hdsi .arc-hdsi-cta .elementor-button:focus-visible {
  background-color: #14161A !important; color: #FFFFFF !important; border-color: #14161A !important;
}

/* 3 -> 2 columns at <=900, 2 -> 1 at <=620. Bisected on the reference, not inherited from
   another section's breakpoint. */
@media (max-width: 900px) {
  .arc-hdsi .arc-hdsi-grid.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .arc-hdsi .arc-hdsi-grid.e-con { grid-template-columns: minmax(0, 1fr); }
}

/* ================================ HOME DESIGN SINGLE — DESIGN CTA (D7) ==
   The shared library template `arcadia-design-cta`, embedded on every design post by a Template
   widget inside .arc-hdsc-sec. Values MEASURED on the reference (?design=Airlie,
   main.children[4]) and FITTED across 1920/1600/1440/1280/1100/1024/900/768/640/480/390.

     section  min-height 540 — CONSTANT at all eleven widths — padding 64 0, flex row,
              align-items center; full-bleed photo + a rgba(12,13,15,.4) scrim
     content  min(640px,100%) centred, padding 0 var(--gutter)
     h2       clamp(30.4px, 3vw, 44px) / 1.12 / 300 / #FFFFFF
     lead     16.8/400 lh 28.56 rgba(255,255,255,.88), 16 below the h2
     button   padding 18.4/40, radius 2, #FFF on a #FFF border, 14/600 ls 1.12, 28 below the lead

   ⚠️ The h2's letter-spacing is `normal` HERE, where Our Inclusions' h2 — same family, same
   weight, same clamp — is -0.01em. Two sections, one type scale, different tracking. Never carry
   a type property across sections on the strength of it matching in one. */

.arc-hdsc-sec.e-con { width: 100%; padding: 0; gap: 0 !important; }

.arc-hdsc.e-con {
  position: relative; width: 100%; min-height: 540px; padding: 64px 0; gap: 0 !important;
  --flex-direction: row; --align-items: center;
  flex-direction: row !important; align-items: center !important;
}
/* The scrim is ::AFTER, not ::before — every .e-con reserves ::before for Elementor's own
   background-overlay feature. `width` is declared explicitly because Elementor forces a width on
   that reserved pseudo-element and a custom one that omits it inherits the fight. */
.arc-hdsc.e-con::after {
  content: ""; position: absolute; inset: 0; width: 100%; height: 100%;
  background: rgba(12, 13, 15, 0.4); pointer-events: none; z-index: 0;
}
/* the photo — one shared image (D7), full-bleed behind the scrim */
.arc-hdsc .arc-hdsc-bg.elementor-widget {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0 !important; line-height: 0; z-index: 0;
}
.arc-hdsc .arc-hdsc-bg .elementor-widget-container { width: 100%; height: 100%; line-height: 0; }
/* `.elementor img{height:auto;max-width:100%}` is (0,1,1) and beats a plain class — without
   !important on height the photo renders at its natural ratio and the cover crop never happens */
.arc-hdsc .arc-hdsc-bg img {
  display: block !important; width: 100% !important; height: 100% !important;
  max-width: none !important; object-fit: cover; object-position: center;
}
/* content sits above both layers: ::after has z-index 0, so z-index 1 here is what keeps the
   copy out from under the scrim */
.arc-hdsc .arc-hdsc-content.e-con {
  position: relative; z-index: 1;
  width: min(640px, 100%); margin-inline: auto; padding: 0 var(--gutter);
  gap: 0 !important; text-align: center; align-items: stretch;
}
.arc-hdsc .arc-hdsc-h2.elementor-widget { margin: 0 !important; }
.arc-hdsc .arc-hdsc-h2 .elementor-heading-title {
  margin: 0; font-family: var(--font-display); font-weight: 300 !important;
  font-size: clamp(30.4px, 3vw, 44px); line-height: 1.12; letter-spacing: normal;
  color: #FFFFFF !important;
}
.arc-hdsc .arc-hdsc-lead.elementor-widget { margin: 16px 0 0 !important; }
.arc-hdsc .arc-hdsc-lead .elementor-heading-title {
  margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 16.8px;
  line-height: 28.56px; color: rgba(255, 255, 255, 0.88);
}
.arc-hdsc .arc-hdsc-btn.elementor-widget { margin: 28px 0 0 !important; }
.arc-hdsc .arc-hdsc-btn .elementor-button {
  display: inline-flex; align-items: center;
  padding: 18.4px 40px !important; border-radius: 2px !important; min-height: 0 !important;
  background-color: #FFFFFF !important; color: #14161A !important;
  border: 1px solid #FFFFFF !important;
  font-family: var(--font-sans) !important; font-size: 14px !important;
  font-weight: 600 !important; letter-spacing: 1.12px !important;
  line-height: normal !important; text-transform: uppercase !important;
}

/* ======================================== 404 / THANK YOU — below the band ==
   ⚠️ NEITHER PAGE EXISTS IN THE APPROVED DESIGN (re-checked 2026-09-02: the reference has no
   404.html and no thank-you.html, and a missing URL there returns the host's own error page).
   So these values are OURS — the site's own tokens and type scale, not measurements — and this
   band must never be described as pixel-perfect. If the screens are added to the reference later,
   expect to rebuild.

   The two pages were previously identical; they now diverge below the shared .arc-msg band:
   the 404 offers the destinations a lost visitor actually wanted, Thank You answers "what now". */

/* the footer's global CTA is suppressed on both: each page carries ONE action of its own, and
   the band made it a third competing call to action */
body.arc-msg-page .arc-foot-cta { display: none !important; }

/* shared shell for both sections */
.arc-msg-links.e-con, .arc-msg-steps.e-con {
  width: 100%; padding: 80px 0 96px; background: var(--surface-page); gap: 0 !important;
}
.arc-msg-links .arc-msg-links-inner.e-con,
.arc-msg-steps .arc-msg-steps-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important;
}
/* the small uppercase label, matching every other eyebrow on the site */
.arc-msg-sub.elementor-widget { margin: 0 0 28px !important; line-height: 0; padding: 3px 0 1px; }
.arc-msg-sub .elementor-heading-title {
  display: inline-flex; margin: 0;
  font-family: var(--font-sans); font-weight: 600; font-size: 12px; line-height: normal;
  letter-spacing: 2.16px; text-transform: uppercase; color: var(--text-muted);
}

/* ---- 404: three destination cards ---- */
.arc-msg-links .arc-msg-linkrow.e-con {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px !important; width: 100%; padding: 0;
}
/* Buttons, not container-links: a container link needs BOTH link.url AND html_tag 'a', and has
   been seen not to emit an anchor at all for programmatically-inserted nodes — an inert card. */
.arc-msg-links .arc-msg-link.elementor-widget { width: auto !important; margin: 0 !important; }
.arc-msg-links .arc-msg-link .elementor-button {
  --arc-arrow-gap: 8px;
  display: flex !important; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  padding: 26px 28px !important; border-radius: 2px !important; min-height: 0 !important;
  background-color: var(--surface-page) !important; color: var(--text-primary) !important;
  border: 1px solid var(--border-hair) !important;
  font-family: var(--font-display) !important; font-size: 20px !important;
  font-weight: 400 !important; letter-spacing: normal !important;
  line-height: normal !important; text-transform: none !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.arc-msg-links .arc-msg-link .elementor-button:hover {
  border-color: var(--border-strong) !important;
  transform: translateY(-3px); box-shadow: rgba(66, 58, 45, 0.09) 0 8px 24px 0;
}

/* ---- Thank You: what happens next ---- */
.arc-msg-steps .arc-msg-steprow.e-con {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px !important; width: 100%; padding: 0; align-items: start;
}
.arc-msg-steps .arc-msg-step.e-con {
  width: auto !important; padding: 26px 0 0; gap: 0 !important;
  border-top: 1px solid var(--border-hair);
}
.arc-msg-step-n.elementor-widget { margin: 0 0 14px !important; }
.arc-msg-step-n .elementor-heading-title {
  margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 2.16px; color: var(--text-muted); line-height: normal;
}
.arc-msg-step-h.elementor-widget { margin: 0 0 10px !important; }
.arc-msg-step-h .elementor-heading-title {
  margin: 0; font-family: var(--font-display); font-weight: 400 !important; font-size: 20px;
  line-height: 1.3; letter-spacing: normal; color: var(--text-primary) !important;
}
.arc-msg-step-p.elementor-widget { margin: 0 !important; }
.arc-msg-step-p p {
  margin: 0; font-family: var(--font-sans); font-weight: 400; font-size: 15.2px;
  line-height: 26.144px; color: var(--text-secondary);
}

/* both rows stack on the same breakpoint the site's other 3-ups use */
@media (max-width: 900px) {
  .arc-msg-links .arc-msg-linkrow.e-con { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc-msg-steps .arc-msg-steprow.e-con { grid-template-columns: 1fr; gap: 28px !important; }
}
@media (max-width: 620px) {
  .arc-msg-links .arc-msg-linkrow.e-con { grid-template-columns: 1fr; }
  .arc-msg-links.e-con, .arc-msg-steps.e-con { padding: 56px 0 64px; }
}

/* ---- Mobile section padding (owner request 2026-09-03) ----
   Companion to the block at the end of arc-home.css; same reasoning, inner-page sections.
   Vertical only, !important, hero bands excluded. Reverse by deleting this block.
   .arc-dh-loc and .arc-dh-gal were ADDED 2026-09-03 after /display-homes/ was re-checked: they
   declare padding in REM (7rem, 8.5rem), so the original px-only CSS grep never saw them. Any
   future audit of this kind must match rem, em and separate padding-top/bottom as well as px. */
@media (max-width: 767px) {
  .arc-ab.e-con,
  .arc-anight.e-con,
  .arc-aw.e-con,
  .arc-cform.e-con,
  .arc-ch-gal.e-con,
  .arc-faqp.e-con,
  .arc-faqp-cta.e-con,
  .arc-ggrid > .arc-ggrid-inner.e-con,
  .arc-hd-listing .arc-hd-listing-inner.e-con,
  .arc-hdsc.e-con,
  .arc-hdsf-sec.e-con,
  .arc-hdsi.e-con,
  .arc-hdss.e-con,
  .arc-inc.e-con,
  .arc-inc-cta.e-con,
  .arc-legal.e-con,
  .arc-msg-links.e-con,
  .arc-msg-steps.e-con,
  .arc-mvv.e-con,
  .arc-dh-loc.e-con,
  .arc-dh-gal.e-con,
  .arc-newsp.e-con,
  .arc-relnews.e-con {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* deliberate zero bottom — this section butts against the one below it */
  .arc-kr-ba.e-con { padding-top: 40px !important; padding-bottom: 0 !important; }
}

/* ---- Breadcrumb tap target (BugHerd #18) ----
   .arc-crumbs__link rendered 15px tall with padding 0 — fails WCAG 2.5.8 (AA, 24px). 30px matches
   the convention set on #11/#12. min-height + inline-flex keeps the label optically in place; the
   crumb row has space above and below so nothing moves. Reverse by deleting this block. */
@media (max-width: 880px) {
  .arc-crumbs__link,
  .arc-postcrumbs__link { min-height: 30px; display: inline-flex; align-items: center; }
}

/* ---- .elementor-button-link text CTAs (BugHerd #19) ----
   #12 fixed this pattern but scoped it to .arc-relnews-link only. The same class combination is
   used for at least 7 more CTAs (/knockdown-rebuild/ "View all display homes", /inclusions/ the
   three "View ... inclusions" and three "Download ... inclusions"), all 17px tall with padding 0
   at EVERY width, not just mobile — so this rule is unscoped, like #12's.
   These render as bare text with no background or border, so the added height is invisible.
   Reverse by deleting this block. */
/* min-height does NOT work on these: an explicit height is in play and even an inline
   min-height:30px !important leaves the box at 17px (verified in-browser). Vertical PADDING does
   work, so that is the mechanism here. 17px text + 7 + 6 = 30px. The links are bare text with no
   background or border, so the added height is invisible. */
.arc-dh-more .elementor-button.elementor-button-link,
.arc-team-more .elementor-button.elementor-button-link,
.arc-gal-more .elementor-button.elementor-button-link,
.arc-inc-card__link {
  padding-top: 7px !important; padding-bottom: 6px !important;
}

/* ---- Hero banners on mobile (owner request 2026-09-03) ----
   Inner-page heroes carried desktop geometry to 375px: min-height 389-660px, so most of the first
   screen was hero. Owner's brief: ~250px floor, ~80px from the nav to the first text, ~60px below.
   THE HEADER OVERLAYS THE HERO, so padding-top is not 80 — it must clear the header first.
   ⚠️ RE-MEASURED 2026-09-07, and the original decomposition below it was wrong. It read:
   "the overlap differs by hero type, measured: .arc-chero and .arc-psingle-hero 101px,
   .arc-ghero and .arc-newsp-hero 68px. Hence 181 and 148." At 390 today the burger header is
   69px and it overlays EVERY hero by exactly 69 — .arc-chero, .arc-ghero, .arc-newsp-hero and
   .arc-hds-hero alike. No header on this site measures 101 (desktop is 121, the burger 69).
   So 181 and 148 do not come from two different overlaps. What actually differs is what sits
   at the top of the stack: the 181 heroes open with a BREADCRUMB, the 148 heroes do not, and
   181 − 148 = 33 is that breadcrumb row. Measured first-text gaps at 390:
     .arc-ghero / .arc-newsp-hero (no crumb)          148 − 69 =  79, measured 82   ✅ the brief
     .arc-chero / .arc-psingle-hero / .arc-hds-hero   181 − 69 = 112, measured 112  ⚠️ +32
   🚨 So the breadcrumb heroes sit ~32px BELOW the owner's ~80px brief — /about-us/, /faqs/,
   /awards/, the 26 /home-designs/ singles, /display-homes/, /inclusions/, /custom-homes/,
   /knockdown-rebuild/, /contact/, /single-storey/ and the news singles, all at 112px.
   It is uniform, it shipped on 09-03 and the owner has seen it, so it is LOGGED, NOT CHANGED —
   pulling 181 back to 149 is an owner decision, not a cleanup. Do not "fix" one hero on its
   own: the value is consistent across all of them and that consistency is worth more than the
   32px. See project-state.md, 2026-09-07.
   min-height 250px rarely binds — content plus padding exceeds it — so heroes become
   content-driven at roughly 314-525px instead of 389-660px. That is the intent.
   The HOMEPAGE hero (.arc-hero) is deliberately excluded: its min-height derives from vh and a
   full-viewport landing hero is a design decision, not an oversight.
   Reverse by deleting this block. */
@media (max-width: 767px) {
  .arc-chero.e-con,
  .arc-ghero.e-con,
  .arc-newsp-hero.e-con,
  .arc-psingle-hero.e-con { min-height: 250px !important; }

  .arc-chero > .e-con,
  .arc-psingle-hero .arc-psingle-heroinner.e-con {
    padding-top: 181px !important; padding-bottom: 60px !important;
  }
  .arc-ghero > .arc-ghero-inner.e-con,
  .arc-newsp-hero .arc-newsp-heroinner.e-con {
    padding-top: 148px !important; padding-bottom: 60px !important;
  }
}

/* ---- home_design single: carousel dot hit area (BugHerd #24) ----
   The banner carousel uses Swiper's own .swiper-pagination-bullet, a SEVENTH dot class beyond the
   six arc-* ones #20 covered. 9x9px, failing WCAG 2.5.8 (AA, 24x24).
   Same technique as #20: an absolutely-positioned ::after carries the touch target, so the dot
   keeps its approved 9x9 (28x9 active) appearance and NOTHING moves — important here, because the
   dots sit inside the hero and .arc-hds-inner reserves exactly 81px to clear them.
   Scoped to this carousel rather than all Swipers on the site. Reverse by deleting this block. */
.arc-hds-hero .swiper-pagination-bullet { position: relative; }
.arc-hds-hero .swiper-pagination-bullet::after {
  content: ""; position: absolute; inset: -8px; border-radius: inherit;
}

/* ---- home_design single hero on mobile (BugHerd #24, owner 2026-09-03) ----
   768px is most of the first screen on a 375px phone. 440px brings it into line with the other
   heroes, which land 314-539px after #23.
   HEIGHT, not min-height: this hero is built with an explicit height and justify-content:flex-end,
   so its content is BOTTOM-anchored over a full-bleed carousel. Switching it to min-height would
   change how the stack sits. The 81px clearance on .arc-hds-inner that keeps the content off the
   pagination dots is deliberately untouched.
   This rule sits after the 768px declaration in the same file, so it wins on order.
   Reverse by deleting this block. */
@media (max-width: 767px) {
  .arc-hds-hero.e-con {
    /* height:auto + min-height, NOT a fixed height. A fixed 440px was tried first and the
       bottom-anchored content overflowed UPWARD under the sticky header (first text measured
       21px ABOVE the header bottom). With auto height the hero grows to fit its content, and
       padding-top guarantees the header clearance the way #23 does for the other heroes:
       181 = the 69px burger header + 112 (the breadcrumb row + the ~80px gap); see the
       re-measurement in the mobile-hero block above — the old "101px overlap" was wrong. */
    height: auto;
    min-height: 440px;
    padding-top: 181px;
  }
}

/* --------------------------------------------------------------------------
   ARC-HDF-CLEAR-RESET-GUARD — the two "Clear filters" buttons on /home-designs/
   ⚠️ Hello Elementor's reset.css declares
       [type="button"]:focus, [type="button"]:hover,
       [type="submit"]:focus, [type="submit"]:hover,
       button:focus,          button:hover  { background-color:#c36; color:#fff }
   Both buttons are <button type="button">, so the reset claims them on TWO arms,
   and the winning arm is `[type="button"]:hover` — an attribute plus a pseudo-class,
   which is (0,2,0), NOT the (0,1,1) recorded in the arc-newsp-filter note above.
   That extra 100 is why the old guard shape was not enough here:
     .arc-hdf__clear:hover      was (0,1,1) and declared only text-decoration, so the
                                reset kept background-color and color and painted the
                                label HOT PINK (#c36 = rgb(204,51,102)) on white.
     .arc-hd-empty__clear       had no :hover and no :focus rule at all, so it lost
                                both states outright.
   :focus matters as much as :hover here — the button keeps focus after a click, and
   clearing filters re-renders the meta row with the button still focused, so the pink
   persists after the pointer leaves.

   Measured on /home-designs/ (staging, 2026-09-09): these were the only 2 of the 11
   buttons on the page with no higher-specificity author rule. The other 9 are covered.

   Scoped to (0,3,0) — parent class + own class + pseudo-class — so rest, hover, focus
   and active are immune in one declaration, no !important and no four rules each
   fighting their own fight. Fourth time this reset has caught this project.

   Behaviour is unchanged from the reference: underline on hover, NO colour change.
   The focus ring mirrors .arc-hdf__select:focus-visible so the a11y-100 baseline holds.
   -------------------------------------------------------------------------- */
.arc-hdf__meta .arc-hdf__clear,
.arc-hdf__meta .arc-hdf__clear:hover,
.arc-hdf__meta .arc-hdf__clear:focus,
.arc-hdf__meta .arc-hdf__clear:active {
  background-color: transparent;
  color: #14161A;
}
.arc-hdf__meta .arc-hdf__clear:hover { text-decoration: underline; }
.arc-hdf__meta .arc-hdf__clear:focus { outline: none; }
.arc-hdf__meta .arc-hdf__clear:focus-visible {
  outline: 2px solid #14161A; outline-offset: 2px;
}

.arc-hd-empty .arc-hd-empty__clear,
.arc-hd-empty .arc-hd-empty__clear:hover,
.arc-hd-empty .arc-hd-empty__clear:focus,
.arc-hd-empty .arc-hd-empty__clear:active {
  background-color: transparent;
  color: #14161A;
  text-decoration: underline;
}
.arc-hd-empty .arc-hd-empty__clear:focus { outline: none; }
.arc-hd-empty .arc-hd-empty__clear:focus-visible {
  outline: 2px solid #14161A; outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   ARC-HD-FILTER-ENTER — the cards a filter change reveals fade and rise in.
   ⚠️ A DELIBERATE DIVERGENCE FROM THE REFERENCE, asked for by the owner
   2026-09-09. The reference does not animate this at all, and that was measured
   rather than assumed: driving its filter with a real change that MOVED the card
   count 23 -> 1, it reported 0 concurrent getAnimations() across 57 frames,
   opacity flat at 1, transform flat at none, and it defines no @keyframes
   anywhere on the page. So there is nothing here to match — this is ours, and a
   future reference diff will flag it as a divergence. That is expected.

   ⚠️ FILL MODE IS `backwards`, NOT `forwards` OR `both`, and that is load-bearing.
   The stagger needs the from-state held during animation-delay, which is exactly
   what backwards buys. A forwards/both fill would leave `transform: none` winning
   as an animation-origin value AFTER the run finishes, which sits above every
   normal declaration in the cascade and would permanently kill the card's own
   :hover lift (translateY(-3px)) — the hover added 2026-09-02, measured off the
   reference. The card would silently stop lifting, but only after someone had
   touched a filter, which is the kind of state a page-load check never reaches.

   The animation is applied ONLY on a user-driven filter change, never on the
   initial apply(). On load the cards are simply there, as the reference has them,
   and nothing is mid-flight while the geometry harness is measuring.
   -------------------------------------------------------------------------- */
@keyframes arc-hd-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.arc-designs-grid .arc-hd-card.is-hd-entering {
  animation: arc-hd-in var(--dur-med) var(--ease-out) backwards;
}
@media (prefers-reduced-motion: reduce) {
  /* the card still appears, it just appears — no fade, no rise, no stagger */
  .arc-designs-grid .arc-hd-card.is-hd-entering { animation: none; }
}

/* --------------------------------------------------------------------------
   ARC-HDF-PANEL — the home-designs filter dropdowns, wearing the nav menu's panel.
   ⚠️ A DELIBERATE DIVERGENCE from the reference, asked for by the owner 2026-09-09.
   The reference uses four bare native selects.

   ⚠️ THE NATIVE <select> IS STILL THERE, still visible, and still the source of truth.
   It is NOT hidden, and that is load-bearing in three separate ways:
     1. _qa-hd-listing measures document.querySelector('select') directly — box, padding,
        background, border, font-size — and asserts selCount === 4, across four viewports.
        Hiding it or swapping it for a div would fail those checks at every viewport.
     2. Screen readers and keyboard users keep a real, complete select. Nothing here is
        announced or operated through the decorative panel, so the axe 0-violation baseline
        holds without a single aria role being invented.
     3. The deep-link reader and both harnesses set `select.value` and fire `change`. That
        still drives everything; the panel only ever writes through the same door.
   The panel is therefore aria-hidden decoration layered over a working control, not a
   replacement for one. On a coarse pointer it never opens at all and the OS picker is used,
   because a native picker beats any custom panel on touch.

   Geometry: this file adds NO rule that changes the closed control's box. Every value below
   either sits on the panel (absolutely positioned, out of flow) or is a colour/transform.
   -------------------------------------------------------------------------- */

/* The panel itself — every value here is lifted from .arc-nav__panel in arc-header.css so the
   two read as one component. If that panel is restyled, this follows it by hand. */
.arc-hdf__panel {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 8px; z-index: 40;
  background: var(--surface-page); border: 1px solid var(--border-hair);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 10px;
  display: flex; flex-direction: column; gap: 0;
  max-height: 280px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              visibility var(--dur-med);
}
.arc-hdf__field.is-open .arc-hdf__panel {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}

/* Items — .arc-nav__sub, as a button rather than a link. */
.arc-hdf__opt {
  display: block; width: 100%; text-align: left;
  padding: 0.6rem 0.85rem; border: 0; border-radius: var(--radius-xs);
  background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--text-secondary); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* ⚠️ Hello Elementor's reset.css paints any <button> #c36 on #fff at :hover AND :focus, and its
   strongest arm ([type="button"]:hover) is (0,2,0). These are (0,3,0) — parent class, own class,
   pseudo — so rest, hover, focus and active are all immune. Fourth component in this project to
   need this; see ARC-HDF-CLEAR-RESET-GUARD. */
.arc-hdf__panel .arc-hdf__opt:hover,
.arc-hdf__panel .arc-hdf__opt:focus,
.arc-hdf__panel .arc-hdf__opt.is-active {
  background: var(--surface-alt); color: var(--text-primary);
}
.arc-hdf__panel .arc-hdf__opt:focus { outline: none; }
.arc-hdf__panel .arc-hdf__opt:focus-visible { outline: 2px solid #14161A; outline-offset: -2px; }
/* The chosen value, so an open panel says which one is current the way the nav marks a section. */
.arc-hdf__panel .arc-hdf__opt[aria-current="true"] {
  color: var(--text-primary); font-weight: 600;
}

/* The chevron turns over, matching .arc-chev on the nav's own dropdowns. */
.arc-hdf__chev { transition: transform var(--dur-med) var(--ease-out); }
.arc-hdf__field.is-open .arc-hdf__chev { transform: translateY(-50%) rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .arc-hdf__panel { transition: none; }
  .arc-hdf__chev  { transition: none; }
}

/* Touch: the panel is never built, so nothing here should reserve space or intercept a tap. */
@media (pointer: coarse) {
  .arc-hdf__panel { display: none !important; }
}