/* Arcadia Homes — homepage sections. Hero first (reference: Sections1.js Hero).
   Deployed flat to wp-content/uploads/elementor/arc-home.css */

/* ---- Hero ---- */
.arc-hero.e-con {
  position: relative; min-height: 92vh; overflow: hidden; padding: 0;
  flex-direction: column; justify-content: flex-end; align-items: stretch;
}
/* Scrims: 240px top darkening strip (behind transparent header) + 3-stop bottom-up gradient.
   ::after — Elementor reserves ::before for its own overlay feature. */
.arc-hero.e-con::after {
  content: ""; position: absolute; inset: 0; width: 100%; pointer-events: none; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(12, 13, 15, 0.6) 0%, rgba(12, 13, 15, 0) 240px),
    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%);
}
/* Elementor's video/fallback layer sits below the scrim and content */
.arc-hero .elementor-background-video-container { z-index: 0; }
/* Poster fallback must cover/centre like the reference's poster (Elementor's default is auto/top-left) */
.arc-hero.e-con { background-size: cover !important; background-position: center center !important; background-repeat: no-repeat; }
/* Reproduce the reference's video mechanism (inset 0 + object-fit cover) instead of Elementor's
   JS transform sizing — whose fractional maths leaves edge slivers of the background showing. */
.arc-hero .elementor-background-video-hosted {
  width: 100% !important; height: 100% !important;
  left: 0 !important; top: 0 !important; transform: none !important;
  object-fit: cover; object-position: center center;
}

.arc-hero .arc-hero-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 9rem var(--gutter) 5.5rem; position: relative; z-index: 2;
  flex-direction: column; align-items: flex-start; gap: 0 !important;
}
/* ⚠️ EYEBROWS: font-weight and colour carry !important on ALL of these, deliberately.
   These selectors are (0,2,0) and merely TIE the Global Kit's heading defaults, so they win only
   while the Kit sheet is enqueued first. The moment a band is lifted into an elementor_library
   template, the template document's sheet loads later and the Kit takes the tie: the FAQ eyebrow
   silently went weight 600 -> 300 and --text-accent -> ink on 2026-08-26, with size, tracking,
   line-height and transform all still correct (the partially-applied-rule tell).
   Swept across all 11 eyebrows at once, not just the one that broke. */
.arc-hero-eyebrow.elementor-widget .elementor-heading-title {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600 !important; text-transform: uppercase;
  letter-spacing: var(--ls-wider); color: rgba(255, 255, 255, 0.9) !important; margin: 0; line-height: 1.25;
}
/* ⚠️ WHY EVERY HEADING SELECTOR CARRIES .elementor-widget
   Elementor emits an UNSCOPED ".elementor-widget-heading .elementor-heading-title{color:...}"
   into the generated stylesheet of EVERY document that contains a Heading widget — including
   library templates. The moment the FAQ band became a template (post-221.css), that sheet was
   enqueued after arc-home.css and, at a tied (0,2,0), took the colour on every heading on the
   site: the hero H1 and the USPs H2 went white -> ink, and the Why H2 went grey -> ink, while
   font-size, weight, line-height and tracking all stayed correct (the partially-applied tell).
   Pinning .elementor-widget — a class the custom class already sits on — makes these (0,3,0)
   and immune to any future template. Do not "tidy" it away. */
.arc-hero-h1.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-xl);
  line-height: 1.03; letter-spacing: -0.02em; margin: 18px 0 22px; max-width: 16ch; color: #fff;
}
.arc-hero-lead p, .arc-hero-lead {
  font-family: var(--font-sans); font-size: 1.15rem; max-width: 48ch; line-height: 1.7;
  color: rgba(255, 255, 255, 0.9); margin: 0;
}
/* Rhythm comes from explicit margins — the inner container's default 20px flex gap is zeroed above. */
.arc-hero .arc-hero-lead { margin-bottom: 32px !important; }

/* Google rating row — native widgets (Heading + Star Rating + Heading).
   Lifted into the shared section template `arcadia-hero-rating` on 2026-08-31, because the
   Awards hero renders the identical cluster. The row rule is therefore NO LONGER scoped to
   .arc-hero: it has two consumers now, and a .arc-hero prefix would silently leave the Awards
   copy unstyled. The per-consumer TOP MARGIN moves onto the embed wrapper below — it is the
   one value that genuinely differs (28 on the homepage, 26 on Awards, both measured). */
.arc-hero-rating.e-con {
  flex-direction: row; align-items: center; gap: 12px !important;
  width: auto; padding: 0;
}
/* The Template widget wrapper becomes the flex item in the hero column, so it has to carry the
   spacing and must not stretch. Elementor also puts a default margin-block-end on any widget
   that is not last, which would stack on top of these. */
.arc-hero-rating-embed.elementor-widget { width: auto !important; margin: 0 !important; }
.arc-hero .arc-hero-rating-embed.elementor-widget { margin-top: 28px !important; }
.arc-chero--awards .arc-hero-rating-embed.elementor-widget { margin-top: 26px !important; }
/* ⚠️ line-height: normal on the score and the meta, not a number. The reference sets none, so
   each resolves to Montserrat's own metric — 1.25 at the 18.4px score (23px) and 1.17 at the
   12.8px meta (15px), two different ratios. The 1.2/1.4 that used to be here made the row
   0.92 short and pushed the meta 1.92px up inside it; the awards hero harness surfaced it,
   and it was equally wrong on the homepage, where nothing had asserted the meta's position. */
.arc-hero-rating .arc-hero-rating-score.elementor-widget .elementor-heading-title {
  font-family: var(--font-sans); font-weight: 600; font-size: 1.15rem; color: #fff; margin: 0; line-height: normal;
}
.arc-hero-rating .elementor-widget-star-rating { line-height: 0; }
.arc-hero-rating .elementor-star-rating { color: #fff; }
/* Reference star mark (SVG path) in place of Elementor's Arial ★ glyph — 17px box, 2px gap = 93px block */
.arc-hero-rating-stars .elementor-star-rating i {
  width: 17px; height: 17px; font-size: 0 !important;
  display: inline-block; vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--arc-star) center / contain no-repeat;
          mask: var(--arc-star) center / contain no-repeat;
}
.arc-hero-rating-stars .elementor-star-rating i.elementor-star-empty { opacity: 0.35; }
.arc-hero-rating .arc-hero-rating-meta.elementor-widget .elementor-heading-title {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 400; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85); margin: 0; line-height: normal;
}
.arc-hero-rating .arc-hero-rating-meta.elementor-widget .elementor-heading-title strong { font-weight: 600; }


/* =============================================================== SECTION 2
   Display Homes — Nested Tabs chrome + two shortcode feeds.
   Reference measured @1920: section pad 136/0, bg --surface-alt, head max-w 640 centred,
   tabs gap 40 (mar 32/44), .arc-3col 3x1fr gap 24 -> 1 col at <=900 (NO 2-col step).
   ------------------------------------------------------------------------ */
.arc-dh.e-con { background: var(--surface-alt); padding: 136px 0; }
.arc-dh .arc-dh-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important;
}

/* Head ------------------------------------------------------------------- */
.arc-dh .arc-dh-head.e-con {
  max-width: 640px; width: 100%; margin: 0 auto; padding: 0;
  text-align: center; gap: 0 !important;
  align-items: stretch !important;   /* column container: align-items is the HORIZONTAL axis —
                                        'center' shrink-wrapped the H2 to 487px of its 640 */
}
/* 3px above + 1px below reproduces the reference eyebrow's line box exactly
   (its inline-flex span sits in a 19px box, not a 15px one). */
.arc-dh-eyebrow { display: flex; justify-content: center; padding: 3px 0 1px; line-height: 0; }
.arc-dh-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: 15px;
}
.arc-dh-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-dh-lead p, .arc-dh-lead {
  font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.7;
  color: var(--text-secondary); margin: 0;
}

/* Nested Tabs chrome ------------------------------------------------------
   .e-n-tabs ships gap:10px between the pill row and the content — the reference is flush
   (its own 44px sits under the tab row as margin), so zero it and rebuild the spacing.    */
.arc-dh .arc-dh-tabs { width: 100%; }
.arc-dh .arc-dh-tabs .e-n-tabs { gap: 0 !important; }
.arc-dh .arc-dh-tabs .e-n-tabs-heading {
  display: flex !important; justify-content: center; gap: 40px;
  margin: 32px 0 44px; border: 0;
}
.arc-dh .arc-dh-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: var(--text-muted) !important;
  border-bottom: 2px solid transparent !important;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.arc-dh .arc-dh-tabs .e-n-tab-title[aria-selected="true"] {
  color: var(--text-primary) !important; border-bottom-color: var(--brand-accent) !important;
}
.arc-dh .arc-dh-tabs .e-n-tab-title > .e-n-tab-title-text { font: inherit; letter-spacing: inherit; }
.arc-dh .arc-dh-tabs .e-n-tabs-content > .e-con { padding: 0 !important; gap: 0 !important; }

/* Shared 3-up grid (matches the reference .arc-3col exactly: 1 col at <=900, no 2-col step) */
.arc-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }

/* Display Home card ------------------------------------------------------ */
.arc-dh-card {
  position: relative; display: block; height: 420px; overflow: hidden;
  border-radius: var(--radius-sm); text-decoration: none;
}
.arc-dh-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-dh-card:hover .arc-dh-card__img { transform: scale(1.05); }
.arc-dh-card__scrim { position: absolute; inset: 0; display: block; background: var(--scrim-bottom); }
.arc-dh-card__chip {
  position: absolute; top: 18px; left: 18px; display: block;
  background: var(--arc-black); color: #fff; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; line-height: 12px; padding: 0.4rem 0.75rem;
}
/* No right constraint — the reference meta block is shrink-to-fit. */
.arc-dh-card__meta { position: absolute; bottom: 22px; left: 24px; display: block; color: #fff; }
.arc-dh-card__region {
  display: block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.16em; line-height: normal;
  color: rgba(255, 255, 255, 0.85); margin-bottom: 4px;
}
.arc-dh-card__name {
  display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 500;
  line-height: normal; color: #fff;
}

/* Home Design card ------------------------------------------------------- */
.arc-hd-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); text-decoration: none;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
/* The Kit sets .elementor-kit-N a{box-shadow:none} at (0,1,1) — needs (0,2,1) to land. */
.arc-dh a.arc-hd-card { box-shadow: var(--shadow-xs); }
.arc-dh a.arc-hd-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.arc-hd-card__media {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--arc-sand);
}
.arc-hd-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-hd-card:hover .arc-hd-card__img { transform: scale(1.05); }
.arc-hd-card__chip {
  position: absolute; top: 14px; left: 14px; display: block;
  background: var(--arc-black); color: #fff; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; line-height: 12px; padding: 0.4rem 0.75rem;
}
.arc-hd-card__body { display: block; padding: 1.35rem 1.4rem 1.5rem; }
.arc-hd-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.arc-hd-card__name {
  font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1;
  letter-spacing: -0.01em; color: var(--text-primary);
}
.arc-hd-card__storeys {
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 400; line-height: normal;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-accent); white-space: nowrap;
}
.arc-hd-card__rule { display: block; height: 1px; background: var(--border-hair); margin: 1.1rem 0; }
.arc-hd-card__specs { display: flex; flex-wrap: wrap; gap: 0.85rem 1.4rem; }
.arc-hd-spec { display: inline-flex; align-items: center; gap: 7px; color: var(--text-secondary); }
.arc-hd-spec .arc-spec-ico { display: block; flex: 0 0 auto; width: 19px; height: 19px; }
.arc-hd-spec__v {
  font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: 600;
  line-height: 19px; color: var(--text-primary);
}
.arc-dh .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* "View all …" text link -------------------------------------------------- */
.arc-dh .arc-dh-more.e-con { margin-top: 44px; padding: 0; align-items: center; }
.arc-dh .arc-dh-more .elementor-button {
  background: none !important; background-color: transparent !important; border: 0 !important;
  border-radius: 0 !important; padding: 0 !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: normal !important;
  color: var(--text-primary) !important; box-shadow: none !important;
}
.arc-dh .arc-dh-more .elementor-button-content-wrapper {
  display: inline-flex; align-items: center;
}
.arc-dh .arc-dh-more .elementor-button:hover { opacity: 0.65; }
.arc-dh .arc-dh-more .elementor-widget-button { line-height: 0; }
.arc-dh .arc-dh-more .elementor-button-content-wrapper { line-height: 17px; }

/* Responsive ----------------------------------------------------------------------
   The reference changes exactly TWO things with width:
     1. .arc-3col -> 1 column at <=900px (its only media query), and
     2. the gutter, via the --gutter clamp (64 -> 4vw -> 20).
   Section padding (8.5rem 0), the display card height (420) and the tab gap (40) are
   INLINE styles on the React nodes with no responsive variant, so they are constant at
   every width. Earlier drafts of this file stepped all three down on mobile — invented
   values the reference does not have. Do not re-add them without measuring first. */
@media (max-width: 900px) {
  .arc-3col { grid-template-columns: 1fr !important; }
}

/* ====================================================== HOME DESIGN SINGLE
   Theme Builder Single template for the home_design CPT (G15 — the client keeps
   adding designs, so a newly-added post must never open blank).
   ------------------------------------------------------------------------ */
.arc-hds-hero.e-con { background: var(--surface-inverse); padding: 0; }
.arc-hds-hero .arc-hds-hero-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 8rem var(--gutter) 4rem; gap: 0 !important; align-items: flex-start !important;
}
.arc-hds-eyebrow { display: flex; padding: 3px 0 1px; line-height: 0; }
.arc-hds-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.7) !important; margin: 0; line-height: 15px;
}
.arc-hds-title.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-lg);
  line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin: 16px 0 0;
}
.arc-hds-specs { margin-top: 28px; line-height: 0; }
.arc-hd-single-specs { display: flex; flex-wrap: wrap; gap: 18px 40px; }
.arc-hd-spec--lg { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.75); }
.arc-hd-spec--lg .arc-spec-ico { width: 22px !important; height: 22px !important; flex: 0 0 auto; display: block; }
.arc-hd-spec--lg .arc-hd-spec__v {
  font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; line-height: 22px; color: #fff;
}
.arc-hd-spec--lg .arc-hd-spec__l {
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 400; line-height: 22px;
  text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.55);
}
/* full-bleed: the post now carries its own full-width sections, each with its own padding.
   This wrapper capped them at --container-max with 5rem of gutter — correct when template
   152 was a stub rendering classic paragraphs, wrong the moment a section arrived. It made
   the specs band 1164.81 wide at x=137.59 against a reference 1440 at 0, and every width
   inside it was a consequence. */
.arc-hds-body .arc-hds-body-inner.e-con {
  max-width: none; width: 100%; margin-inline: 0; padding: 0; gap: 0 !important;
}
/* ⚠️ Scoped to a DIRECT child. Unscoped, this styles every <p> the post renders — which now
   means every paragraph of every section, each of which sets its own type. A leak that
   would have looked like a Kit leak. */
.arc-hds-body .elementor-widget-theme-post-content > .elementor-widget-container > p {
  font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.8; color: var(--text-secondary);
}

/* =============================================================== SECTION 3
   About — static native widgets. Reference measured @1920: section capped 1480,
   pad 136/gutter, .arc-2col 1fr/1fr gap 72 align centre -> 1 col gap 40 at <=900.
   ------------------------------------------------------------------------ */
.arc-about.e-con { padding: 0; }
.arc-about .arc-about-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 136px var(--gutter); gap: 0 !important;
}
/* Elementor's .e-con rules tie a bare class on specificity and load later, so the grid
   display + tracks need !important; --flex-direction must be neutralised too. */
.arc-about .arc-about-grid.e-con {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: center; padding: 0; width: 100%;
}
.arc-about .arc-about-grid.e-con > .e-con {
  width: auto !important; flex: none !important; min-width: 0 !important;
}
.arc-about .arc-about-col.e-con {
  gap: 0 !important; padding: 0; text-align: left;
  align-items: stretch !important;   /* column container: 'flex-start' is HORIZONTAL and
                                        shrink-wrapped the H2 to 425px of its 640 */
}

.arc-about-eyebrow { display: flex; padding: 3px 0 1px; line-height: 0; }
.arc-about-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: 15px;
}
.arc-about-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: var(--text-primary); margin: 18px 0 22px;
}
/* The reference paragraphs keep the UA's 1em top margin and set only margin-bottom. */
.arc-about-p p {
  font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.8;
  color: var(--text-secondary); margin: 0;
}
.arc-about .arc-about-p1 { margin-bottom: 20px !important; }
.arc-about .arc-about-p2 { margin-bottom: 32px !important; }

/* Stats — native Counter. Its DOM order is fixed and no setting inverts it, so the
   number-above-label layout is a column-reverse (visual only; source order unchanged
   for screen readers). Elementor also ships a ~180px min-width on the widget. */
.arc-about .arc-about-stats.e-con {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  gap: 48px; margin-bottom: 36px; padding: 0; align-items: flex-start; width: 100% !important;
}
.arc-about .arc-about-stat { width: auto !important; max-width: none !important; flex: 0 0 auto !important; }
.arc-about .arc-about-stat .elementor-counter {
  display: flex; flex-direction: column-reverse; align-items: stretch;
  min-width: 0 !important; width: auto !important;
}
.arc-about .arc-about-stat .elementor-counter-number-wrapper {
  font-family: var(--font-display); font-weight: 500;
  /* FLUID, not a hardcoded 2.75rem/44px. The reference number is
     font-size:var(--fs-display-md) with line-height:1, so it steps 44 -> 30.72 -> 30.4
     at 1920 / 1024 / 390 and the stat block goes 67 -> 53.7 -> 53.4. A fixed 44px is
     identical at 1920 (the clamp maximum) and 13.3px too tall at every width below it. */
  font-size: var(--fs-display-md); line-height: 1;
  letter-spacing: -0.01em; color: var(--text-primary);
  display: flex; align-items: baseline;
  justify-content: flex-start; text-align: left;
}
/* Elementor CENTRES the counter number by giving the (usually empty) prefix and suffix
   spans flex-grow:1, so they each absorb half the slack — 36.2px per side here. The
   number then floats mid-box while the label below is left-aligned. The reference
   left-aligns both. Zeroing the grow is the fix; text-align alone does nothing,
   because the space is taken by siblings, not by alignment inside one box. */
.arc-about .arc-about-stat .elementor-counter-number-prefix,
.arc-about .arc-about-stat .elementor-counter-number-suffix { flex-grow: 0 !important; }
.arc-about .arc-about-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;
}

/* Primary button — the Kit fills an unset background, so every deviating property is set. */
.arc-about .arc-about-btn .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;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-about .arc-about-btn .elementor-button:hover {
  background-color: transparent !important; color: var(--arc-black) !important;
}
.arc-about .arc-about-btn { line-height: 0; }

/* Media grid: first image spans both columns. */
.arc-about .arc-about-media.e-con {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 0; width: auto !important;
}
.arc-about .arc-about-media > .elementor-widget {
  width: auto !important; max-width: none !important; margin: 0 !important;
}
.arc-about .arc-about-img--wide { grid-column: 1 / -1; }
.arc-about .arc-about-img img {
  display: block; width: 100% !important; max-width: none !important;
  object-fit: cover; border-radius: var(--radius-sm);
}
.arc-about .arc-about-img--wide img { height: 340px !important; }
.arc-about .arc-about-img--sm img { height: 200px !important; }

@media (max-width: 900px) {
  .arc-about .arc-about-grid.e-con { grid-template-columns: 1fr !important; gap: 40px; }
}

/* =============================================================== SECTION 4
   USPs — autoplaying paged carousel (NOT a marquee; the plan row was wrong).
   Reference @1920: pad 136/0, h 749, full-bleed photo under a flat rgba(18,17,16,.8),
   head row space-between align-end mb 48, cards 3-up gap 24 min-h 248, dots mt 40.
   perView is derived in JS from the rendered card width, so CSS owns the breakpoints.
   ------------------------------------------------------------------------ */
.arc-usps-section.e-con {
  position: relative; overflow: hidden; padding: 136px 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
/* Elementor renders background_image with size:auto / position:top-left by default, and
   any container past position 3 gets background:none from its lazy-background reset — hence
   e-no-lazyload on the node plus the explicit values above. */
.arc-usps-section::after {
  content: ""; position: absolute; inset: 0; width: 100%;
  background: rgba(18, 17, 16, 0.8); pointer-events: none; z-index: 1;
}
.arc-usps-section > .e-con { position: relative; z-index: 2; }
.arc-usps-section .arc-usps-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important;
}

/* Head row ---------------------------------------------------------------- */
.arc-usps-section .arc-usps-head.e-con {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  gap: 20px; margin-bottom: 48px; padding: 0; width: 100%;
}
.arc-usps-section .arc-usps-head > * { width: auto !important; flex: 0 1 auto !important; }
.arc-usps-section .arc-usps-headline.e-con {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: 0 !important; padding: 0; max-width: 100%;
}
.arc-usps-eyebrow { display: flex; padding: 3px 0 1px; line-height: 0; }
.arc-usps-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.85) !important; margin: 0; line-height: 15px;
}
.arc-usps-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: #fff; margin: 14px 0 0; max-width: 20ch;
}
.arc-usps-h2.elementor-widget .elementor-heading-title span { color: var(--arc-taupe-300); }

/* Arrows — bare <button>s, so every box property Hello's reset touches is pinned. */
.arc-usps__nav { display: flex; gap: 12px; }
.arc-usps-section .arc-usps__arrow {
  width: 50px !important; height: 50px !important; flex: 0 0 auto;
  border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center; line-height: 0 !important;
  background: transparent !important; background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #fff !important; font-family: var(--font-sans); font-size: 1.05rem; cursor: pointer;
  box-shadow: none !important;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-usps-section .arc-usps__arrow:hover,
.arc-usps-section .arc-usps__arrow:focus {
  background: #fff !important; color: var(--arc-black) !important;
}
.arc-usps-section .arc-usps__arrow:focus:not(:focus-visible) { outline: none; }

/* Track — padding/margin-block keeps the hover lift from being clipped by overflow. */
.arc-usps__viewport { overflow-x: clip; overflow-y: visible; padding-block: 16px; margin-block: -16px; }
.arc-usps__track {
  display: flex; gap: 24px;
  transition: transform var(--dur-slow) var(--ease-out);
}
.arc-usp-card {
  flex: 0 0 calc((100% - 48px) / 3); box-sizing: border-box; min-height: 248px;
  display: flex; flex-direction: column; padding: 2.4rem 2.2rem;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-sm);
  -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}
.arc-usp-card:hover {
  background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-4px);
}
/* height:34 is the REFERENCE's box, not the icon's. Its SVG is display:inline in a
   line-height:normal wrapper, so the line box adds a 4px descender BELOW a 30px icon
   (measured: spaceAbove 0, spaceBelow 4 -- at 1920/1024/768/390 alike). Reproducing that
   mechanism would make the box depend on font metrics; pinning the height keeps the
   line-height:0 determinism and lands the same 30-flush-top + 4-below. The icon itself is
   30px on BOTH sides -- do not "fix" it to 34. */
.arc-usp-card__ico { display: block; color: #fff; height: 34px; margin-bottom: 22px; line-height: 0; }
.arc-usp-card__ico .arc-usp-ico { display: block; width: 30px; height: 30px; }
.arc-usp-card__title {
  display: block; font-family: var(--font-display); font-size: 1.35rem; font-weight: 400;
  line-height: normal; letter-spacing: -0.01em; color: #fff; margin-bottom: 14px;
}
.arc-usp-card__body {
  font-family: var(--font-sans); font-size: 0.92rem; line-height: 1.75;
  color: rgba(255, 255, 255, 0.72); margin: 0;
}

/* Dots -------------------------------------------------------------------- */
.arc-usps__dots { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.arc-usps-section .arc-usps__dot {
  width: 9px !important; height: 9px !important; flex: 0 0 auto; padding: 0 !important;
  margin: 0 !important; border: 0 !important; border-radius: var(--radius-pill) !important;
  background: rgba(255, 255, 255, 0.4) !important; background-image: none !important;
  cursor: pointer; line-height: 0 !important; box-shadow: none !important;
  transition: width var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.arc-usps-section .arc-usps__dot.is-active {
  width: 26px !important; background: #fff !important;
}
.arc-usps-section .arc-usps__dot:focus:not(:focus-visible) { outline: none; }

/* Responsive — the reference steps perView 3 / 2 / 1 at >=1040 / >=680 / <680.
   CSS owns the card width; the JS measures it, so the two can never disagree. */
@media (max-width: 1039px) {
  .arc-usp-card { flex-basis: calc((100% - 24px) / 2); }
}
@media (max-width: 679px) {
  .arc-usp-card { flex-basis: 100%; }
}

/* =============================================================== SECTION 5
   Why Choose Us — static natives. Reference @1920: section capped 1480, pad 136/gutter,
   .arc-2col 640/640 gap 72 align centre; left = staggered image pair (2nd +40 top),
   right = two-tone H2 + lead + em-dash list + primary button (NO arrow on this one).
   ------------------------------------------------------------------------ */
.arc-why.e-con { padding: 0; }
.arc-why .arc-why-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 136px var(--gutter); gap: 0 !important;
}
.arc-why .arc-why-grid.e-con {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: center; padding: 0; width: 100%;
}
.arc-why .arc-why-grid.e-con > .e-con { width: auto !important; flex: none !important; min-width: 0 !important; }

/* Left — staggered pair */
.arc-why .arc-why-media.e-con {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; width: auto !important;
}
.arc-why .arc-why-media > .elementor-widget { width: auto !important; max-width: none !important; margin: 0 !important; }
.arc-why .arc-why-img img {
  display: block; width: 100% !important; max-width: none !important;
  height: 380px !important; object-fit: cover; border-radius: var(--radius-sm);
}
.arc-why .arc-why-media > .elementor-widget.arc-why-img--b { margin-top: 40px !important; }  /* the stagger — must out-specify the wrapper reset above (§2b) */

/* Right — copy column */
.arc-why .arc-why-col.e-con {
  gap: 0 !important; padding: 0; text-align: left; align-items: stretch !important;
}
.arc-why-eyebrow { display: flex; padding: 3px 0 1px; line-height: 0; }
.arc-why-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: 15px;
}
/* Two-tone: line 1 is --text-secondary, the span is --text-primary. */
.arc-why-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: var(--text-secondary); margin: 18px 0 22px;
}
.arc-why-h2.elementor-widget .elementor-heading-title span { color: var(--text-primary); }
.arc-why-lead p {
  font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.8;
  color: var(--text-secondary); margin: 0;
}
.arc-why .arc-why-lead { margin-bottom: 24px !important; }

/* Em-dash list — a plain <ul> from the Text Editor; the marker is CSS, not copy. */
.arc-why .arc-why-points { margin-bottom: 32px !important; }
.arc-why-points ul { list-style: none; padding: 0; margin: 0; }
.arc-why-points li {
  display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 400; line-height: 1.6;
  color: var(--text-secondary);
}
.arc-why-points li:last-child { margin-bottom: 0; }
.arc-why-points li::before {
  content: "\2014"; flex: 0 0 16px; width: 16px;
  font-weight: 700; line-height: 1.5; color: var(--text-primary);
}
.arc-why .arc-why-cta.e-con { padding: 0; gap: 20px; width: auto !important; }

/* Primary button — same spec as the About one, minus the arrow. */
.arc-why .arc-why-btn .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: 16px !important;
  color: #fff !important; box-shadow: none !important;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-why .arc-why-btn .elementor-button:hover {
  background-color: transparent !important; color: var(--arc-black) !important;
}
.arc-why .arc-why-btn { line-height: 0; }

@media (max-width: 900px) {
  .arc-why .arc-why-grid.e-con { grid-template-columns: 1fr !important; gap: 40px; }
}

/* =============================================================== SECTION 6
   Our Team — centred head, ONE group photo (native Elementor lightbox), text link,
   plus a parallax watermark. NOT a team CPT (the plan row's guess was wrong).
   Reference @1920: pad 136/0, bg --surface-alt, h 1235; head max-w 760 mb 48;
   photo max-w 1000 radius 2 --shadow-md; link mt 48.
   ------------------------------------------------------------------------ */
.arc-team.e-con {
  position: relative; overflow: hidden; padding: 136px 0; background: var(--surface-alt);
  gap: 0 !important;   /* the bands are direct children now — Elementor's default 20px flex gap
                          was adding 20 before the photo and 40 before the link */
}
/* Each band caps + gutters itself, exactly as the reference does — one shared wrapper
   would double-inset the head at mobile widths. */
.arc-team > .e-con:not(.arc-team-mark) {
  position: relative; z-index: 1;
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter); gap: 0 !important;
}
/* Watermark — absolutely centred, translated by the parallax handler. */
.arc-team .arc-team-mark.e-con {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(85%, 1000px); padding: 0; opacity: 0.03; pointer-events: none; z-index: 0;
  display: flex !important; justify-content: center; will-change: transform;
}
.arc-team .arc-team-mark .elementor-widget { width: 100% !important; max-width: none !important; margin: 0 !important; }
.arc-team .arc-team-mark-img img { display: block; width: 100% !important; height: auto !important; max-width: none !important; }

/* Head */
.arc-team .arc-team-head.e-con {
  max-width: 760px; width: 100%; margin: 0 auto 48px;
  text-align: center; gap: 0 !important; align-items: stretch !important;
}
.arc-team-eyebrow { display: flex; justify-content: center; padding: 3px 0 1px; line-height: 0; }
.arc-team-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: 15px;
}
/* Bespoke clamp + nowrap — deliberately NOT --fs-display-md (the reference sets its own so the
   single line always fits). Do not "tidy" this to the shared token. */
.arc-team-h2.elementor-widget .elementor-heading-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1rem, 4.6vw, 2.75rem); white-space: nowrap;
  line-height: 1.12; color: var(--text-primary); margin: 14px 0 16px;
}
.arc-team-lead p {
  font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.7;
  color: var(--text-secondary); margin: 0;
}

/* Group photo */
.arc-team .arc-team-photo.e-con { justify-content: center; width: 100%; }
/* width:100%, NOT auto. With auto the wrapper takes its size from the image's INTRINSIC
   width, so a failed/undecoded image collapses the whole band to 0 instead of degrading.
   The reference has no such dependency (its img is width:100% inside a full-width flex row). */
.arc-team .arc-team-photo .elementor-widget { width: 100% !important; max-width: 1000px !important; margin: 0 !important; }
.arc-team .arc-team-photo-img img {
  display: block; width: 100% !important; max-width: 1000px !important; height: auto !important;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); cursor: zoom-in;
}
.arc-team .arc-team-photo-img a { display: block; line-height: 0; }

/* "Meet our team" text link */
.arc-team .arc-team-more.e-con { margin-top: 48px; align-items: center; width: 100%; }
.arc-team .arc-team-more .elementor-button {
  background: none !important; background-color: transparent !important; border: 0 !important;
  border-radius: 0 !important; padding: 0 !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: normal !important;
  color: var(--text-primary) !important; box-shadow: none !important;
}
.arc-team .arc-team-more .elementor-widget-button { line-height: 0; }
.arc-team .arc-team-more .elementor-button-content-wrapper { line-height: 17px; }
.arc-team .arc-team-more .elementor-button:hover { opacity: 0.65; }

@media (prefers-reduced-motion: reduce) {
  .arc-team .arc-team-mark.e-con { transform: translate(-50%, -50%) !important; }
}

/* =============================================================== SECTION 7
   Building Process — paged carousel, NO autoplay (the reference has no timer here).
   Reference @1920: section capped 1480 pad 136/gutter, h 1154; head space-between align-end
   mb 48; track gap 20; cards 437x498; dots mt 40; dark note panel mt 40.
   ------------------------------------------------------------------------ */
.arc-process.e-con { padding: 0; }
.arc-process .arc-bp-inner.e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 136px var(--gutter); gap: 0 !important;
}
.arc-process .arc-bp-head.e-con {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  gap: 20px; margin-bottom: 48px; padding: 0; width: 100%;
}
.arc-process .arc-bp-head > * { width: auto !important; flex: 0 1 auto !important; }
.arc-process .arc-bp-headline.e-con {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important;
  gap: 0 !important; padding: 0; max-width: 46ch;
}
.arc-bp-eyebrow { display: flex; padding: 3px 0 1px; line-height: 0; }
.arc-bp-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: 15px;
}
.arc-bp-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: var(--text-primary); margin: 14px 0 0;
}
/* Owner decision 2026-08-26: the reference hardcodes #7A4900 on this span. Neutralised to
   match the approved black-and-white palette — a deliberate deviation, not an oversight. */
.arc-bp-h2.elementor-widget .elementor-heading-title span { color: var(--text-primary); }

/* Arrows — bare <button>s, every box property Hello's reset touches is pinned. */
.arc-bp__nav { display: flex; gap: 12px; }
.arc-process .arc-bp__arrow {
  width: 50px !important; height: 50px !important; flex: 0 0 auto;
  border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center; line-height: 0 !important;
  background: transparent !important; background-image: none !important;
  border: 1px solid var(--border-soft) !important;
  color: var(--text-primary) !important; font-family: var(--font-sans); font-size: 1.05rem;
  cursor: pointer; box-shadow: none !important;
  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-process .arc-bp__arrow:hover, .arc-process .arc-bp__arrow:focus {
  background: var(--surface-inverse) !important; border-color: var(--surface-inverse) !important;
  color: var(--text-inverse) !important;
}
.arc-process .arc-bp__arrow:focus:not(:focus-visible) { outline: none; }

/* Track */
.arc-bp__viewport { overflow-x: clip; overflow-y: visible; padding-block: 16px; margin-block: -16px; }
.arc-bp__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: 20px;
  transition: transform var(--dur-slow) var(--ease-out);
}
.arc-bp-card {
  flex: 0 0 calc((100% - 40px) / 3); box-sizing: border-box;
  display: flex; flex-direction: column;
  border: 1px solid var(--border-hair); border-radius: var(--radius-sm);
  background: var(--surface-card); padding: 2rem 1.8rem;
  transition: border-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.arc-bp-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.arc-bp-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.arc-bp-card__num {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 300;
  color: var(--text-muted); line-height: 1;
}
.arc-bp-card__chip {
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 600; line-height: normal;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-inverse);
  white-space: nowrap; background: var(--surface-inverse);
  border: 1px solid var(--surface-inverse); border-radius: 999px; padding: 5px 11px;
}
.arc-bp-card__name {
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 400;
  letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 22px; line-height: 1.25;
}
.arc-bs-lbl {
  display: block; font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-muted);
  line-height: normal; margin: 0 0 10px;
}
.arc-bs-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.arc-bs-list li {
  font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.65;
  color: var(--text-secondary); padding-left: 16px; position: relative;
}
.arc-bs-dot {
  position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px;
  border-radius: 50%; background: var(--border-strong); opacity: 0.5;
}
.arc-bp-card__dur {
  display: block; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--border-hair);
}
.arc-bp-card__durval {
  display: block; font-family: var(--font-display); font-size: 1.02rem;
  color: var(--text-primary); margin-bottom: 6px; line-height: normal;
}
.arc-bp-card__durnote {
  margin: 0; font-family: var(--font-sans); font-size: 0.83rem; line-height: 1.6; color: var(--text-muted);
}

/* Dots */
.arc-bp__dots { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.arc-process .arc-bp__dot {
  width: 9px !important; height: 9px !important; flex: 0 0 auto; padding: 0 !important;
  margin: 0 !important; border: 0 !important; border-radius: var(--radius-pill) !important;
  background: var(--border-soft) !important; background-image: none !important;
  cursor: pointer; line-height: 0 !important; box-shadow: none !important;
  transition: width var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.arc-process .arc-bp__dot.is-active { width: 26px !important; background: var(--surface-inverse) !important; }
.arc-process .arc-bp__dot:focus:not(:focus-visible) { outline: none; }

/* Dark note panel */
.arc-process .arc-bp-note.e-con {
  margin-top: 40px; padding: 2rem 2.2rem; background: var(--surface-inverse);
  border-radius: var(--radius-sm); width: 100%; gap: 0 !important;
}
.arc-bp-note-lbl.elementor-widget .elementor-heading-title {
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 600; line-height: normal;
  text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.55); margin: 0 0 10px;
}
.arc-bp-note-body p {
  margin: 0; font-family: var(--font-sans); font-size: 0.94rem; line-height: 1.75;
  color: var(--text-inverse);
}

/* Responsive — perView 3/2/1, same steps as the reference; CSS owns the card width. */
@media (max-width: 1039px) { .arc-bp-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 679px)  { .arc-bp-card { flex-basis: 100%; } }

/* =============================================================== SECTION 8
   CTA Carousel — cross-fading full-bleed slides, NO autoplay.
   Reference @1920: section flex/align-centre, min-h 560, pad 120/0, h 800.9;
   copy col max-w 46ch; controls row mt 44 with the dots INLINE after the arrows.
   ------------------------------------------------------------------------ */
.arc-ctacar.e-con {
  position: relative; overflow: hidden; padding: 0;
  display: flex !important; align-items: center; min-height: 560px; gap: 0 !important;
}
/* The shortcode widget is the flex item here — without this it shrink-wraps to its
   content and every row lands ~432px right of the reference. */
.arc-ctacar > .elementor-widget { width: 100% !important; max-width: none !important; }
.arc-ctacar .arc-cta { position: relative; width: 100%; padding: 120px 0; }
.arc-cta__bgs { position: absolute; inset: 0; z-index: 0; }
.arc-cta__bg {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.arc-cta__bg.is-active { opacity: 1; }
.arc-cta__scrim {
  position: absolute; inset: 0; z-index: 1; display: block;
  background: linear-gradient(90deg, rgba(18,17,16,0.8) 0%, rgba(18,17,16,0.4) 55%, rgba(18,17,16,0.15) 100%);
}
.arc-cta__inner {
  position: relative; z-index: 2; color: #fff;
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter);
}
/* The slides are stacked so the section height is the TALLEST slide, exactly as the
   reference (which mounts one slide but keeps a constant min-height band). */
.arc-cta__copy { position: relative; max-width: 46ch; }
.arc-cta__slide { visibility: hidden; }
.arc-cta__slide:not(:first-child) { position: absolute; inset: 0; }
.arc-cta__slide.is-active { visibility: visible; }
.arc-cta__slide { padding-top: 3px; }
.arc-cta__eyebrow {
  display: block; width: max-content; max-width: 100%;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; line-height: 15px;
  color: rgba(255, 255, 255, 0.85);
}
.arc-cta__title {
  font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display-lg);
  line-height: 1.06; letter-spacing: -0.01em; color: #fff;
  /* 17 = the reference 16px margin + the 1px line-box descender under its inline-flex
     eyebrow span, which a block-rendered eyebrow does not carry (2c). */
  margin: 17px 0 18px;
}
/* Block siblings here, so the <p>'s own top margin collapses against the h2's 18px
   exactly as it does in the reference — do NOT also add a wrapper margin. */
.arc-cta__body {
  font-family: var(--font-sans); font-size: 1.1rem; line-height: 1.7;
  color: rgba(255, 255, 255, 0.9); margin: 1em 0 30px;
}
.arc-cta__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 18.4px 40px; background: #fff !important; border: 1px solid #fff;
  border-radius: var(--radius-sm); text-decoration: none;
  font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 18px;  /* 18.4*2 + 2 border + 18 = the reference 56.8 */
  color: var(--arc-black) !important;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-cta__btn:hover { background: transparent !important; color: #fff !important; }

/* Controls — arrows and dots share ONE row in this section (unlike USPs/Process).
   ⚠️ align-items MUST be `center`, not `stretch` (fixed 2026-09-07). The 09-04 target-size
   work pins every dots row to `height: 9px !important` (arc-foundation.css) so the 24x24 hit
   boxes can overflow symmetrically at zero layout cost. An item with an explicit height does
   NOT stretch, so under `stretch` the 9px dots box fell to the TOP of this 54px arrow row and
   painted 22.5px above the arrows' centre line — (54−9)/2. The reference centres them exactly
   on that line (both at cy 533.89, measured).
   This is the only dots row on the site that shares a flex row with the arrows AND was set to
   stretch; `.arc-chg__nav` and `.arc-dhg__nav` were already `center` and measured delta 0,
   which is what this now matches. USPs and Building Process stack their dots in a block
   parent, so they were never affected. */
.arc-cta__nav { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin-top: 44px; }
.arc-ctacar .arc-cta__arrow {
  width: 54px !important; height: 54px !important; flex: 0 0 auto;
  border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center; line-height: 0 !important;
  background: rgba(255, 255, 255, 0.14) !important; background-image: none !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #fff !important; font-family: var(--font-sans); font-size: 1.1rem; cursor: pointer;
  box-shadow: none !important; transition: background-color var(--dur-fast) var(--ease-out);
}
.arc-ctacar .arc-cta__arrow:hover, .arc-ctacar .arc-cta__arrow:focus {
  background: rgba(255, 255, 255, 0.28) !important;
}
.arc-ctacar .arc-cta__arrow:focus:not(:focus-visible) { outline: none; }
.arc-cta__dots { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.arc-ctacar .arc-cta__dot {
  width: 9px !important; height: 9px !important; flex: 0 0 auto; padding: 0 !important;
  margin: 0 !important; border: 0 !important; border-radius: var(--radius-pill) !important;
  background: rgba(255, 255, 255, 0.45) !important; background-image: none !important;
  cursor: pointer; line-height: 0 !important; box-shadow: none !important;
  transition: width var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out);
}
.arc-ctacar .arc-cta__dot.is-active { width: 26px !important; background: #fff !important; }
.arc-ctacar .arc-cta__dot:focus:not(:focus-visible) { outline: none; }

/* =============================================================== SECTION 9
   Gallery — a genuine marquee (arc-scroll 70s linear, pause on hover) with a native
   Elementor lightbox. Reference @1920: pad 136/0, bg white, overflow hidden, h 868.9;
   head max-w 640 pad 0/64 mb 48; track gap 16 padding-inline 8, 24 tiles of 420x300.
   ------------------------------------------------------------------------ */
@keyframes arc-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.arc-gallery.e-con {
  padding: 136px 0; background: var(--surface-page); overflow: hidden; gap: 0 !important;
}
.arc-gallery > .e-con:not(.arc-gal-wrap), .arc-gallery > .elementor-widget {
  max-width: var(--container-wide); margin-inline: auto; width: 100%; padding: 0 var(--gutter);
}
/* Head */
.arc-gallery .arc-gal-head.e-con {
  max-width: 640px; margin: 0 auto 48px; text-align: center;
  gap: 0 !important; align-items: stretch !important;
}
.arc-gal-eyebrow { display: flex; justify-content: center; padding: 3px 0 1px; line-height: 0; }
.arc-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; color: var(--text-accent) !important; margin: 0; line-height: 15px;
}
.arc-gal-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: nowrap;
}
.arc-gal-lead p {
  font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.7;
  color: var(--text-secondary); margin: 0;
}
/* Strip — full-bleed, so this widget must NOT take the capped/gutter treatment above. */
.arc-gallery .arc-gal-strip.elementor-widget {
  max-width: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important;
}
.arc-gal { overflow: hidden; width: 100%; }
.arc-gal__track {
  display: flex; gap: 16px; width: max-content; padding-inline: 8px;
  animation: arc-scroll 70s linear infinite;
}
.arc-gal:hover .arc-gal__track { animation-play-state: paused; }
.arc-gal__tile {
  flex: 0 0 auto; width: 420px; height: 300px; display: block;
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; text-decoration: none;
}
.arc-gal__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-gal__tile:hover .arc-gal__img { transform: scale(1.05); }
/* "View full gallery" link */
.arc-gallery .arc-gal-more.e-con { margin-top: 48px; align-items: center; width: 100%; }
.arc-gallery .arc-gal-more .elementor-button {
  background: none !important; background-color: transparent !important; border: 0 !important;
  border-radius: 0 !important; padding: 0 !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: normal !important;
  color: var(--text-primary) !important; box-shadow: none !important;
}
.arc-gallery .arc-gal-more .elementor-widget-button { line-height: 0; }
.arc-gallery .arc-gal-more .elementor-button-content-wrapper { line-height: 17px; }
.arc-gallery .arc-gal-more .elementor-button:hover { opacity: 0.65; }

@media (prefers-reduced-motion: reduce) {
  .arc-gal__track { animation: none !important; }
}

/* ============================================================== SECTION 10
   Testimonials — cross-fading photo + quote, NO autoplay.
   Reference @1920: bg --surface-alt, pad 136/0, h 752; grid 0.9fr/1.1fr gap 64 align centre;
   media 480 tall radius 2; quote glyph 80px/lh.7 in --arc-stone-200.
   ------------------------------------------------------------------------ */
.arc-testimonials.e-con { padding: 136px 0; background: var(--surface-alt); gap: 0 !important; }
.arc-testimonials > .elementor-widget {
  max-width: var(--container-wide) !important; margin-inline: auto !important;
  width: 100% !important; padding: 0 var(--gutter) !important;
}
.arc-ts__grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center;
}
/* Left — cross-fading stack */
.arc-ts__media {
  position: relative; height: 480px; border-radius: var(--radius-sm); overflow: hidden;
}
.arc-ts__photo {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover; display: block;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.arc-ts__photo.is-active { opacity: 1; }

/* Right */
.arc-ts__mark {
  display: block; font-family: var(--font-display); font-size: 5rem; line-height: 0.7;
  color: var(--arc-stone-200); margin-bottom: 12px;
}
/* max-content, or the block-level flex fills the 708px column instead of the
   reference's shrink-wrapped 98px inline-flex span. */
.arc-ts__stars { display: flex; width: max-content; gap: 2px; line-height: 0; }
.arc-ts__star {
  display: block; width: 18px; height: 18px; flex: 0 0 auto;
  background-color: var(--text-primary);
  -webkit-mask: var(--arc-star) center / contain no-repeat;
          mask: var(--arc-star) center / contain no-repeat;
}
/* Slides stack so the column height is the tallest quote — the reference mounts one at a
   time but the band is a fixed 480 grid row, so this cannot change the section height. */
/* padding, not margin: the reference stars span sits in a line box 4px taller than the
   glyphs, and padding also stops the quote's 20px margin collapsing out of the wrapper. */
.arc-ts__slides { position: relative; padding-top: 4px; }
.arc-ts__slide { visibility: hidden; }
.arc-ts__slide:not(:first-child) { position: absolute; inset: 0; }
.arc-ts__slide.is-active { visibility: visible; }
.arc-ts__quote {
  font-family: var(--font-display); font-weight: 300; font-size: 1.7rem; line-height: 1.5;
  letter-spacing: -0.01em; color: var(--text-primary); margin: 20px 0 28px;
}
.arc-ts__name {
  font-family: var(--font-sans); font-weight: 600; font-size: 1rem; line-height: 19px;
  color: var(--text-primary);
}
.arc-ts__place {
  font-family: var(--font-sans); font-size: 0.8rem; font-weight: 400; line-height: 15px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-top: 4px;
}
.arc-ts__nav { display: flex; gap: 12px; margin-top: 40px; align-items: center; }
.arc-testimonials .arc-ts__arrow {
  width: 50px !important; height: 50px !important; flex: 0 0 auto;
  border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center; line-height: 0 !important;
  background: transparent !important; background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important; font-family: var(--font-sans); font-size: 1.05rem;
  cursor: pointer; box-shadow: none !important;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-testimonials .arc-ts__arrow:hover, .arc-testimonials .arc-ts__arrow:focus {
  background: var(--arc-black) !important; color: #fff !important;
}
.arc-testimonials .arc-ts__arrow:focus:not(:focus-visible) { outline: none; }
.arc-ts__count {
  margin-left: 12px; font-family: var(--font-sans); font-size: 0.8rem; line-height: 15px;
  letter-spacing: 0.1em; color: var(--text-muted);
}

@media (max-width: 900px) {
  .arc-ts__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================== SECTION 11
   FAQ — native Nested Accordion (G16) in a 0.8fr / 1.2fr grid with a sticky
   left rail. Reference @1920: section pad 136/64 inside the 1480 cap, h 843.7;
   grid cols 515.188 / 772.812, gap 64, align-items start; left rail sticky
   top 110, h 158; accordion rail border-top hair, each item border-bottom hair;
   title row 772.8x75.2, pad 25.6/0, 19.2px/400 lh 24 ls -0.192px, gap 24,
   icon 11x11 (a plus that rotates 45deg to a cross); open answer p 16px/28.8,
   max-width 60ch, pad 0 0 27.2, colour --text-secondary.
   @<=900 the grid collapses to 1fr / gap 40 — the reference's own .arc-2col
   rule, not an invented breakpoint.
   ------------------------------------------------------------------------ */
.arc-faq.e-con {
  padding: 136px 0; background: var(--surface-page); gap: 0 !important;
}
.arc-faq > .e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter);
}
.arc-faq .arc-faq-grid.e-con {
  display: grid !important; grid-template-columns: 0.8fr 1.2fr;
  gap: 64px; align-items: start;
}
/* Grid children: Elementor's .e-con{width:var(--width)} makes every flex/grid
   child fill its track and re-adds a default inline padding. */
.arc-faq .arc-faq-grid > .e-con {
  width: auto !important; max-width: none !important; padding: 0 !important;
  gap: 0 !important; align-items: stretch !important;
}
/* --- Left rail ---------------------------------------------------------- */
.arc-faq .arc-faq-left.e-con { position: sticky; top: 110px; align-self: start; }
/* ⚠️ UN-STICK once the two columns stack (owner instruction 2026-09-02). Sticky is right
   while the rail is a narrow column beside the accordion; once the grid is ONE column the
   rail is a full-width block ABOVE the questions, and pinning it eats viewport while the
   reader scrolls the answers — worst exactly where there is least room.

   ⚠️ This is a DEVIATION FROM THE REFERENCE, which keeps position:sticky at 900 and 390 too
   (measured on ?design=Airlie). Taken deliberately on owner instruction, and it follows the
   call this project already made on /faqs/, whose own rail resets the same way.

   900, NOT the 1023 the /faqs/ rail uses: that page grid collapses at 1023, THIS panel at
   900 (measured — two columns at 1024, one at 900). Borrowing the other breakpoint would
   leave the rail pinned across 901-1023, precisely the band where it is already full width.
   The top offset stays declared: it has no effect on a static box, and clearing it is a
   change with no reason — the same choice the /faqs/ reset documents. */
@media (max-width: 900px) {
  .arc-faq .arc-faq-left.e-con { position: static; }
}
.arc-faq-eyebrow { display: flex; padding: 3px 0 1px; line-height: 0; }
.arc-faq-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: 15px;
}
.arc-faq-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 0;
}
.arc-faq-h2.elementor-widget .elementor-heading-title span { color: var(--text-primary); }
.arc-faq .arc-faq-cta.e-con {
  margin-top: 28px; align-items: flex-start !important; width: auto !important;
  padding: 0 !important; gap: 0 !important;
}
.arc-faq .arc-faq-btn { line-height: 0; }
.arc-faq .arc-faq-btn .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;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.arc-faq .arc-faq-btn .elementor-button:hover {
  background-color: transparent !important; color: var(--arc-black) !important;
}
/* --- Accordion rail ----------------------------------------------------- */
.arc-faq .arc-faq-acc.elementor-widget { width: 100% !important; margin: 0 !important; }
.arc-faq .arc-faq-acc .e-n-accordion {
  border-top: 1px solid var(--border-hair); display: block; gap: 0 !important;
}
.arc-faq .arc-faq-acc .e-n-accordion-item {
  border: 0 !important; border-bottom: 1px solid var(--border-hair) !important;
  border-radius: 0 !important; background: none !important; margin: 0 !important;
}
.arc-faq .arc-faq-acc .e-n-accordion-item-title {
  padding: 25.6px 0 !important; gap: 24px !important; background: none !important;
  border: 0 !important; border-radius: 0 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  color: var(--text-primary) !important;
}
/* space-between with two children: the header must shrink-wrap like the reference's
   text span (485.7px) — flex:1 here stops the icon being flush right. */
.arc-faq .arc-faq-acc .e-n-accordion-item-title-header { flex: 0 1 auto; min-width: 0; }
.arc-faq .arc-faq-acc .e-n-accordion-item-title-text,
.arc-faq .arc-faq-acc .e-n-accordion-item-title-header > * {
  font-family: var(--font-display) !important; font-size: 19.2px !important;
  font-weight: 400 !important; line-height: 24px !important; letter-spacing: -0.192px !important;
  color: var(--text-primary) !important; margin: 0 !important; text-align: left;
}
/* Icon: the reference draws an 11x11 plus from two 1.5px bars and rotates it
   45deg when open. Elementor ships a FontAwesome glyph here, which renders
   blank on this site (G7) — hide it and paint the project glyph in CSS (G17). */
.arc-faq .arc-faq-acc .e-n-accordion-item-title-icon span { display: none !important; }
.arc-faq .arc-faq-acc .e-n-accordion-item-title-icon {
  order: 1 !important; flex: 0 0 auto !important; position: relative;
  width: 11px !important; height: 11px !important; min-width: 0 !important;
  transition: transform var(--dur-med) var(--ease-out);
}
.arc-faq .arc-faq-acc .e-n-accordion-item-title-icon::before,
.arc-faq .arc-faq-acc .e-n-accordion-item-title-icon::after {
  content: ""; position: absolute; background: var(--text-primary);
}
.arc-faq .arc-faq-acc .e-n-accordion-item-title-icon::before {
  top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%);
}
.arc-faq .arc-faq-acc .e-n-accordion-item-title-icon::after {
  left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%);
}
.arc-faq .arc-faq-acc .e-n-accordion-item-title[aria-expanded="true"] .e-n-accordion-item-title-icon,
.arc-faq .arc-faq-acc .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon {
  transform: rotate(45deg);
}
/* Answer container — Elementor ships a border and a default padding here. */
.arc-faq .arc-faq-acc .e-n-accordion-item > .e-con {
  border: 0 !important; background: none !important;
  padding: 0 !important; margin: 0 !important; gap: 0 !important;
}
.arc-faq .arc-faq-acc .arc-faq-a.elementor-widget { width: 100% !important; margin: 0 !important; }
.arc-faq .arc-faq-acc .arc-faq-a p {
  margin: 0; padding: 0 0 27.2px; max-width: 60ch;
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.8; color: var(--text-secondary);
}
@media (max-width: 900px) {
  .arc-faq .arc-faq-grid.e-con { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================== SECTION 12
   News — a 3-up paged carousel of real WordPress posts (G1 feed shortcode), one
   card per step, arrows DISABLE at the ends (they do not wrap — this carousel
   differs from USPs/Process on purpose), no dots, no autoplay.
   Reference @1920: section pad 136/64 inside the 1480 cap, h 974.4; head row
   h 82.3 flex space-between/flex-end gap 20 mb 44; nav 112x50 (two 50px circles,
   gap 12); viewport padding-block 20 margin-block -20; track gap 24;
   card 434.7x481.4 (media 432.7x288.4 at 3/2), body pad 24/25.6/28;
   meta row h 14 gap 12 mb 12; h3 20.8/500 lh 26 ls -0.208 mb 12;
   excerpt 14.4/24.48; "View all news" 182.9x46.8, mt 48, centred.

   DELIBERATE DEVIATION (owner-approved 2026-08-26): the reference locks the
   cards to 3-up at EVERY width, so at 390 each card renders 95.7px wide with a
   62px image. This build steps 3 / 2 / 1 at the project's existing carousel
   breakpoints (1039 / 679), matching the USPs and Building Process carousels.
   Do not "restore" the reference value here.
   ------------------------------------------------------------------------ */
.arc-news.e-con {
  padding: 136px 0; background: var(--surface-page); gap: 0 !important;
}
.arc-news > .e-con {
  max-width: var(--container-wide); margin-inline: auto; width: 100%;
  padding: 0 var(--gutter);
}
.arc-news .arc-news-inner.e-con { gap: 0 !important; align-items: stretch !important; }
/* --- Head row ----------------------------------------------------------- */
.arc-news .arc-news-head.e-con {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap;
  justify-content: space-between; align-items: flex-end;
  gap: 20px !important; margin-bottom: 44px; padding: 0 !important; width: 100%;
}
.arc-news .arc-news-headl.e-con {
  width: auto !important; max-width: none !important; flex: 0 1 auto;
  padding: 0 !important; gap: 0 !important; align-items: stretch !important;
}
.arc-news-eyebrow { display: flex; padding: 3px 0 1px; line-height: 0; }
.arc-news-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: 15px;
}
.arc-news-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 0;
}
/* NO white-space:nowrap here. The Gallery H2 has it (and clips at 390, reference-inherited);
   this one does not — the reference wraps it to two lines at 390 and lets the nav wrap under. */
.arc-news-h2.elementor-widget .elementor-heading-title span { color: var(--text-primary); }
.arc-news .arc-news-nav-w.elementor-widget {
  width: auto !important; max-width: none !important; flex: 0 0 auto;
  margin: 0 !important; line-height: 0;
}
.arc-news__nav { display: flex; gap: 12px; }
/* Bare <button>: the Hello Elementor reset owns width/height/radius/display/padding
   on every unstyled button, so each of those has to be pinned back (see 2b). */
.arc-news .arc-news__arrow {
  width: 50px !important; height: 50px !important; flex: 0 0 auto;
  border-radius: 50% !important; padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center; line-height: 0 !important;
  background: transparent !important; background-image: none !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important; font-family: var(--font-sans); font-size: 1.05rem;
  cursor: pointer; box-shadow: none !important; opacity: 1;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.arc-news .arc-news__arrow:hover, .arc-news .arc-news__arrow:focus {
  background: var(--surface-inverse) !important; border-color: var(--surface-inverse) !important;
  color: var(--text-inverse) !important;
}
.arc-news .arc-news__arrow:focus:not(:focus-visible) { outline: none; }
/* Disabling at the ends is the whole point of this carousel — it does not wrap. */
.arc-news .arc-news__arrow[disabled] { opacity: 0.3; cursor: not-allowed; }
.arc-news .arc-news__arrow[disabled]:hover, .arc-news .arc-news__arrow[disabled]:focus {
  background: transparent !important; border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}
/* --- Track -------------------------------------------------------------- */
.arc-news .arc-news-feed.elementor-widget { width: 100% !important; margin: 0 !important; }
.arc-newsfeed { width: 100%; }
.arc-news__viewport { overflow-x: clip; overflow-y: visible; padding-block: 20px; margin-block: -20px; }
.arc-news__track {
  display: flex; align-items: stretch; gap: 24px;
  transition: transform var(--dur-slow) var(--ease-out);
}
.arc-news__card {
  flex: 0 0 calc((100% - 48px) / 3); min-width: 0;
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--surface-card); border: 1px solid var(--border-hair);
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
/* The Kit emits .elementor-kit-N a{box-shadow:none} at (0,1,1) — this needs (0,2,1). */
.arc-news a.arc-news__card { box-shadow: var(--shadow-xs); color: var(--text-primary); }
.arc-news a.arc-news__card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.arc-news__media {
  aspect-ratio: 3 / 2; overflow: hidden; background: var(--arc-sand); width: 100%;
}
.arc-news__media 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-news__card:hover .arc-news__media img { transform: scale(1.05); }
.arc-news__body { padding: 24px 25.6px 28px; }
.arc-news__meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.arc-news__cat {
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--text-accent); line-height: 12px;
}
.arc-news__dot {
  width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto;
}
.arc-news__date {
  font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--text-muted); line-height: 14px;
}
.arc-news__title {
  font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; line-height: 1.25;
  letter-spacing: -0.01em; margin: 0 0 12px; color: var(--text-primary);
}
.arc-news__excerpt {
  font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.7;
  color: var(--text-secondary); margin: 0;
}
/* --- View all ----------------------------------------------------------- */
.arc-news .arc-news-more.e-con {
  margin-top: 48px; align-items: center !important; width: 100%; padding: 0 !important; gap: 0 !important;
}
.arc-news .arc-news-more-btn { line-height: 0; }
.arc-news .arc-news-more-btn .elementor-button {
  background: transparent !important; background-image: none !important;
  border: 1px solid var(--border-strong) !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: 16px !important;
  color: var(--text-primary) !important; box-shadow: none !important;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.arc-news .arc-news-more-btn .elementor-button:hover {
  transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 22, 26, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .arc-news .arc-news-more-btn .elementor-button:hover { transform: none; box-shadow: none; }
  .arc-news a.arc-news__card:hover { transform: none; }
}
@media (max-width: 1039px) { .arc-news__card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 679px)  { .arc-news__card { flex-basis: 100%; } }

/* ---- Mobile section padding (owner request 2026-09-03) ----
   These sections carried their DESKTOP vertical rhythm all the way down to 375px — every one
   measured identical at 375 and 1920, because nothing in the build reduced them. That is not a
   broken value, it is a missing one, and it added ~1176px (about 10%) to a single mobile page.
   40px top/bottom on mobile portrait, per the owner's figure.
   VERTICAL ONLY — padding-top/bottom, never the shorthand, because the horizontal value differs
   per section (0 vs var(--gutter)) and the shorthand would flatten it.
   !important because .arc-inc, .arc-inc-cta, .arc-newsp and .arc-relnews declare it.
   Hero bands (.arc-chero, .arc-ghero, .arc-psingle-hero, .arc-newsp-hero) are deliberately
   EXCLUDED: there the 150-192px padding IS the banner height, not breathing room.
   Reverse by deleting this block. */
@media (max-width: 767px) {
  .arc-about .arc-about-inner.e-con,
  .arc-ctacar .arc-cta,
  .arc-dh.e-con,
  .arc-faq.e-con,
  .arc-gallery.e-con,
  .arc-news.e-con,
  .arc-process .arc-bp-inner.e-con,
  .arc-team.e-con,
  .arc-testimonials.e-con,
  .arc-usps-section.e-con,
  .arc-why .arc-why-inner.e-con {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ---- USP carousel dots: 24px hit area without changing the dot (BugHerd #20) ----
   The dots render 9x9px (26x9 when active), failing WCAG 2.5.8 (AA, 24x24). Rather than resize
   them — which would change an approved design — an invisible ::after is stretched past the
   visual dot to carry the touch target. position:absolute means it costs no layout at all, so
   the 8px gap between dots and the band's height are untouched.
   inset -8px gives 25px on the short axis (9 + 8 + 8), clearing the 24px minimum.
   Reverse by deleting this block. */
.arc-usps__dot, .arc-bp__dot, .arc-cta__dot,
.arc-dhg__dot, .arc-chg__dot, .arc-news__dot { position: relative; }
.arc-usps__dot::after, .arc-bp__dot::after, .arc-cta__dot::after,
.arc-dhg__dot::after, .arc-chg__dot::after, .arc-news__dot::after {
  content: ""; position: absolute; inset: -8px; border-radius: inherit;
}