/* ACLM Monolith component system.
   Ported from brand-guide/assets/monolith.css (24 Aug 2026 revision), namespaced
   mn-* to aclm-* for WordPress. Colour, font and easing tokens come from the
   theme's aclm-chrome.css; this file adds only the scale and tone steps.

   Loaded BEFORE sections.css so the shipped homepage widgets keep the last word.
   Edit the brand guide first, then re-port. Do not diverge here.

   Exception: the site moved to the warm paper ground (client decision, Sep
   2026) before the guide did. The light-ground rules below need porting back. */

/* ACLM Monolith component system.
   Shared by brand-guide/index.html and brand-guide/components.html.
   Transcribed from the BYQ Monolith collection (hero-1, cms-grid-1, team-1,
   contact-1, value-and-features-2, footer-1, navigation-bar-1), re-tokened to
   the ACLM palette and Hanken Grotesk. Edit here only. */

:root {
  /* Scale and tone steps the theme chrome does not define. Colour, font and
     easing tokens live in the theme's aclm-chrome.css; do not redeclare them. */
  --aclm-dim: rgba(246, 240, 238, 0.64);
  --aclm-dim-50: rgba(246, 240, 238, 0.5);
  --aclm-line: rgba(246, 240, 238, 0.08);
  --aclm-ink-16: rgba(28, 19, 21, 0.16);
  --aclm-ink-20: rgba(28, 19, 21, 0.2);
  --aclm-ink-50: rgba(28, 19, 21, 0.5);
  --aclm-ink-64: rgba(28, 19, 21, 0.64);
  --aclm-pad-y: 120px;
  --aclm-pad-x: 32px;
  --aclm-max: 1800px;
}

/* Full-bleed sections centre their content inside --aclm-max. The component
   rules below set only top and bottom padding so these sides always hold. */
.aclm-nav, .aclm-hero, .aclm-folio-sec, .aclm-stats, .aclm-story, .aclm-team, .aclm-contact, .aclm-foot, .aclm-btnboard {
  padding-left: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  padding-right: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
}

/* ---------- Frames ---------- */
.frame-dark, .frame-blush, .frame-paper {
  font-family: var(--aclm-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 150%;
  -webkit-font-smoothing: antialiased;
}
.frame-dark { --aclm-ground: var(--aclm-bg); background: var(--aclm-bg); color: var(--aclm-text); }
.frame-blush { --aclm-ground: var(--aclm-blush); background: var(--aclm-blush); color: var(--aclm-ink); }
.frame-paper { --aclm-ground: var(--aclm-paper); background: var(--aclm-paper); color: var(--aclm-ink); }
.frame-dark *, .frame-blush *, .frame-paper * { box-sizing: border-box; }
.frame-dark a, .frame-blush a, .frame-paper a { color: inherit; text-decoration: none; }

/* ---------- Type scale ---------- */
.aclm-h1 { font-size: 72px; font-weight: 600; line-height: 100%; letter-spacing: -0.04em; margin: 0; }
.aclm-h2 { font-size: 56px; font-weight: 600; line-height: 100%; letter-spacing: -0.04em; margin: 0; }
.aclm-h3 { font-size: 48px; font-weight: 600; line-height: 100%; letter-spacing: -0.02em; margin: 0; }
.aclm-h4 { font-size: 32px; font-weight: 600; line-height: 100%; letter-spacing: -0.02em; margin: 0; }
.aclm-big { font-size: 20px; font-weight: 400; line-height: 140%; margin: 0; }
.aclm-label {
  font-size: 12px; font-weight: 600; line-height: 16px;
  letter-spacing: 0.02em; text-transform: uppercase; margin: 0;
}
.aclm-label.is-dim { opacity: 0.5; }
/* On a light ground the dim label is a colour, not an opacity, so a label inside
   an already-dimmed paragraph is not dimmed twice. */
.frame-paper .aclm-label.is-dim, .frame-blush .aclm-label.is-dim { opacity: 1; color: var(--aclm-ink-64); }
.aclm-h1 em, .aclm-h2 em, .aclm-h3 em { font-style: normal; color: var(--aclm-accent); }
.frame-blush .aclm-h2 em, .frame-paper .aclm-h2 em { color: var(--aclm-accent); }

/* ---------- Buttons (pill, roll-text hover) ---------- */
.aclm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 100vw; padding: 10px 24px;
  font-family: var(--aclm-font); font-size: 16px; font-weight: 600; line-height: 150%;
  border: 1px solid transparent; cursor: pointer; overflow: hidden;
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.aclm-btn.sm { font-size: 14px; line-height: 142%; padding: 8px 16px; }
.aclm-btn .roll { height: 24px; overflow: hidden; }
.aclm-btn.sm .roll { height: 20px; }
.aclm-btn .roll > div {
  display: flex; flex-direction: column;
  transition: transform 0.3s ease-in-out;
}
.aclm-btn .roll span {
  display: flex; align-items: center; gap: 8px; height: 24px;
}
.aclm-btn.sm .roll span { height: 20px; }
.aclm-btn .roll svg { width: 7px; height: 10px; stroke: currentColor; stroke-width: 2; fill: none; }
.aclm-btn:hover .roll > div { transform: translateY(-50%); }

.aclm-btn.aclm-btn-light { background: var(--aclm-text); color: var(--aclm-ink); }
.aclm-btn.aclm-btn-light:hover { background: var(--aclm-accent); color: var(--aclm-ink); }
.aclm-btn.aclm-btn-ghost {
  background: rgba(246, 240, 238, 0.08); color: var(--aclm-text);
  border-color: var(--aclm-border-16); backdrop-filter: blur(16px);
}
.aclm-btn.aclm-btn-ghost:hover { background: var(--aclm-text); color: var(--aclm-ink); border-color: var(--aclm-text); }
.aclm-btn.aclm-btn-dark { background: var(--aclm-ink); color: var(--aclm-text); }
.aclm-btn.aclm-btn-dark:hover { background: var(--aclm-accent); color: var(--aclm-text); }
.aclm-btn.aclm-btn-white { background: #fff; color: var(--aclm-ink); }
.aclm-btn.aclm-btn-white:hover { background: var(--aclm-ink); color: var(--aclm-text); }
/* On a light ground the light and ghost pills invert to ink. Dark cards inside
   a light frame re-assert the paper pill (see the tenant download card). */
.frame-paper .aclm-btn.aclm-btn-light, .frame-blush .aclm-btn.aclm-btn-light { background: var(--aclm-ink); color: var(--aclm-text); }
.frame-paper .aclm-btn.aclm-btn-light:hover, .frame-blush .aclm-btn.aclm-btn-light:hover { background: var(--aclm-accent); color: var(--aclm-text); }
.frame-paper .aclm-btn.aclm-btn-ghost, .frame-blush .aclm-btn.aclm-btn-ghost { background: rgba(28, 19, 21, 0.05); color: var(--aclm-ink); border-color: var(--aclm-ink-16); }
.frame-paper .aclm-btn.aclm-btn-ghost:hover, .frame-blush .aclm-btn.aclm-btn-ghost:hover { background: var(--aclm-ink); color: var(--aclm-text); border-color: var(--aclm-ink); }

/* Round icon buttons (slider arrows) */
.aclm-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 100vw; border: 0; cursor: pointer;
  background: rgba(246, 240, 238, 0.08); color: var(--aclm-text);
  transition: background-color 0.2s, color 0.2s;
}
.aclm-round svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.aclm-round:hover { background: var(--aclm-text); color: var(--aclm-ink); }
.frame-blush .aclm-round, .frame-paper .aclm-round { background: rgba(28, 19, 21, 0.06); color: var(--aclm-ink); }
.frame-blush .aclm-round:hover, .frame-paper .aclm-round:hover { background: var(--aclm-ink); color: var(--aclm-text); }

/* Roll text link */
.aclm-roll-link { font-weight: 600; display: inline-block; height: 24px; overflow: hidden; }
.aclm-roll-link > div { display: flex; flex-direction: column; transition: transform 0.2s; }
.aclm-roll-link span { display: block; height: 24px; line-height: 24px; text-decoration: underline; text-underline-offset: 3px; }
.aclm-roll-link:hover > div { transform: translateY(-24px); }

/* ---------- Nav ---------- */
.aclm-nav {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 16px max(24px, calc((100% - var(--aclm-max)) / 2));
}
.aclm-wordmark {
  font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 24px;
  text-decoration: none; color: inherit;
}
.aclm-wordmark span, .aclm-foot-wordmark em { color: var(--aclm-accent); font-style: normal; }
.aclm-foot-mark tspan.dot { fill: var(--aclm-accent); }
.aclm-links {
  display: flex; align-items: center; gap: 24px; flex: 1 1 auto; justify-content: center;
}
.aclm-links a {
  position: relative; font-size: 14px; font-weight: 600; line-height: 150%; color: var(--aclm-text);
  text-decoration: none; white-space: nowrap;
}
.aclm-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.25s var(--aclm-ease);
}
.aclm-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.aclm-links a.is-on { color: var(--aclm-accent); }
.aclm-links a.is-on::after { transform: scaleX(1); }
.frame-paper .aclm-links a, .frame-blush .aclm-links a { color: var(--aclm-ink); }
/* Small text on a light ground takes the deep red for contrast. */
.frame-paper .aclm-links a.is-on, .frame-blush .aclm-links a.is-on { color: var(--aclm-accent-deep); }
.aclm-nav-right { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; }
.aclm-wordmark { flex: 0 0 auto; }
.aclm-nav-sub {
  padding: 0 24px 20px; display: flex; gap: 24px; align-items: center;
  font-size: 12px; color: var(--aclm-dim);
}

/* ---------- Hero ---------- */
.aclm-hero-frame {
  position: relative; overflow: hidden; min-height: 700px;
  display: flex; align-items: flex-end;
}
.aclm-hero-bg {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s;
}
.aclm-hero-bg.is-active { opacity: 1; }
.aclm-hero-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(16px); scale: 1.12;
}
/* Each slide darkens its own photo, so the overlay crossfades with the slide.
   The hero widget sets it per slide: 10% by default, higher on bright photos. */
.aclm-hero-bg::after { content: ''; position: absolute; inset: 0; background: rgba(15, 11, 11, var(--aclm-slide-veil, 0.1)); }
.aclm-hero {
  position: relative; z-index: 3; width: 100%;
  padding-top: 120px; padding-bottom: 96px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end;
}
.aclm-hero-copy { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.aclm-rating {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px 4px 4px; border-radius: 24px;
  background: rgba(246, 240, 238, 0.16); backdrop-filter: blur(20px);
  font-size: 16px; color: var(--aclm-text);
}
.aclm-rating i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(246, 240, 238, 0.16); font-style: normal;
}
.aclm-rating svg { width: 14px; height: 14px; fill: var(--aclm-accent); }
.aclm-rating b { font-weight: 600; }
.aclm-hero-text { display: flex; flex-direction: column; gap: 16px; }
.aclm-hero-copy .aclm-h1 { max-width: 550px; color: var(--aclm-text); }
.aclm-hero-copy .aclm-big { max-width: 500px; color: var(--aclm-text); }
.aclm-ctas { display: flex; align-items: center; gap: 16px; }
.aclm-dots { display: flex; gap: 16px; }
.aclm-dot {
  width: 40px; height: 40px; border-radius: 50%; background: transparent;
  border: 1px solid var(--aclm-border-16); color: var(--aclm-text); cursor: pointer;
  font-family: var(--aclm-font); font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.2s; padding: 0;
}
.aclm-dot.is-active { border-color: var(--aclm-text); }
/* Hello Elementor's reset paints every button:hover and button:focus #c36, and
   an element selector with a state outranks a bare class. */
.aclm-dot:hover, .aclm-dot:focus { background: transparent; color: var(--aclm-text); }
.aclm-dot:hover { border-color: var(--aclm-text); }
.aclm-dot:focus-visible { outline: 2px solid var(--aclm-text); outline-offset: 2px; }
.aclm-hero-side { display: flex; justify-content: flex-end; }
.aclm-slider-clip { width: 100%; max-width: 528px; overflow: hidden; }
.aclm-strack { display: flex; transition: transform 0.5s ease-in-out; }
.aclm-strack > .aclm-card { flex: 0 0 100%; min-width: 100%; }
.aclm-hero .aclm-card-img { height: 500px; }
/* Hero copy sits on the photograph, so it keeps the light treatment whatever
   the section's frame: light type, the paper pill and the glass ghost. These
   come after the light-frame button inversions above and win on source order. */
.aclm-hero-frame, .aclm-inner { color: var(--aclm-text); }
.aclm-hero-frame .aclm-btn.aclm-btn-light, .aclm-inner .aclm-btn.aclm-btn-light { background: var(--aclm-text); color: var(--aclm-ink); }
.aclm-hero-frame .aclm-btn.aclm-btn-light:hover, .aclm-inner .aclm-btn.aclm-btn-light:hover { background: var(--aclm-accent); color: var(--aclm-ink); }
.aclm-hero-frame .aclm-btn.aclm-btn-ghost, .aclm-inner .aclm-btn.aclm-btn-ghost { background: rgba(246, 240, 238, 0.08); color: var(--aclm-text); border-color: var(--aclm-border-16); }
.aclm-hero-frame .aclm-btn.aclm-btn-ghost:hover, .aclm-inner .aclm-btn.aclm-btn-ghost:hover { background: var(--aclm-text); color: var(--aclm-ink); border-color: var(--aclm-text); }

/* ---------- Property card ---------- */
.aclm-card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: inherit; }
.aclm-card-img { position: relative; overflow: hidden; height: 360px; }
.aclm-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: scale 0.7s var(--aclm-ease);
}
.aclm-card:hover .aclm-card-img img { scale: 1.05; }
.aclm-badge {
  position: absolute; top: 12px; left: 0; z-index: 2;
  padding: 4px 8px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(16px);
  font-size: 14px; font-weight: 600; line-height: 150%; color: #fff;
}
.aclm-arrow {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(16px); color: var(--aclm-ink);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; translate: 0 -8px; transition: opacity 0.3s, translate 0.3s;
}
.aclm-arrow svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.aclm-card:hover .aclm-arrow { opacity: 1; translate: 0 0; }
.aclm-card-grad {
  position: absolute; left: 0; right: 0; bottom: -16px; height: 160px; z-index: 1;
  background: linear-gradient(0deg, #000, transparent); pointer-events: none;
}
.aclm-card-info { position: absolute; left: 24px; bottom: 24px; right: 24px; z-index: 2; display: flex; flex-direction: column; gap: 8px; color: #fff; }
.aclm-card-below { display: flex; flex-direction: column; gap: 8px; }
.aclm-meta { display: flex; align-items: center; gap: 16px; height: 24px; }
.aclm-meta span { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; }
.aclm-meta svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.6; fill: none; }
.aclm-card-name { font-size: 20px; font-weight: 800; line-height: 140%; letter-spacing: -0.02em; text-transform: uppercase; }
.aclm-card-loc { font-size: 16px; line-height: 24px; height: 24px; overflow: hidden; }
.aclm-card-info .aclm-card-loc { color: rgba(255, 255, 255, 0.85); }

/* Cards slider section */
.aclm-folio-sec {
  padding-top: var(--aclm-pad-y); padding-bottom: var(--aclm-pad-y); overflow: hidden;
  /* The next card peeks into the gutter. Past --aclm-max the side padding grows
     well beyond a gutter, so the clip pulls in to keep the peek gutter-sized. */
  clip-path: inset(0 max(0px, calc((100% - var(--aclm-max)) / 2 - var(--aclm-pad-x))));
}
.aclm-folio-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 48px; padding-right: 140px; position: relative;
}
.aclm-folio-nav { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 16px; }
.aclm-folio-clip { overflow: visible; }
.aclm-folio-track { display: flex; gap: 32px; transition: transform 0.7s ease-out; }
.aclm-folio-track > .aclm-card { flex: 0 0 30%; width: 30%; }

/* ---------- Proof rows (three-column band, as on the homepage) ---------- */
.aclm-stats { padding-top: var(--aclm-pad-y); padding-bottom: var(--aclm-pad-y); }
.aclm-stats-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; max-width: 720px; }
.aclm-stats-rows {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  border-top: 1px solid var(--aclm-line); border-bottom: 1px solid var(--aclm-line);
}
.aclm-stat-row { display: grid; grid-template-columns: 1fr; gap: 16px; align-content: start; padding: 48px 40px 48px 0; }
.aclm-stat-row + .aclm-stat-row { border-left: 1px solid var(--aclm-line); padding-left: 40px; }
.aclm-stat-num {
  font-size: 72px; font-weight: 600; line-height: 100%; letter-spacing: -0.04em; height: 80px;
  font-variant-numeric: tabular-nums; display: flex; align-items: flex-end; gap: 8px;
}
.aclm-stat-num em { font-style: normal; font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--aclm-accent); }
.aclm-stat-copy { display: flex; flex-direction: column; gap: 8px; }
.aclm-stat-lbl { font-size: 18px; font-weight: 600; line-height: 140%; letter-spacing: -0.02em; }
.aclm-stat-dsc { font-size: 15px; color: var(--aclm-dim); max-width: 44ch; }
.frame-blush .aclm-stats-rows, .frame-paper .aclm-stats-rows { border-color: var(--aclm-ink-16); }
.frame-blush .aclm-stat-row + .aclm-stat-row, .frame-paper .aclm-stat-row + .aclm-stat-row { border-left-color: var(--aclm-ink-16); }
.frame-blush .aclm-stat-dsc, .frame-paper .aclm-stat-dsc { color: var(--aclm-ink-64); }

/* ---------- Story ---------- */
.aclm-story { padding-top: var(--aclm-pad-y); padding-bottom: var(--aclm-pad-y); }
.aclm-story-head { max-width: 640px; margin-bottom: 80px; }
.aclm-story-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; }
.aclm-story-grid > img { width: 100%; height: 562px; object-fit: cover; display: block; }
.aclm-story-right { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.aclm-story-right p { margin: 0; }

/* ---------- Team ---------- */
.aclm-team { padding-top: var(--aclm-pad-y); padding-bottom: var(--aclm-pad-y); display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
.aclm-team-head { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.aclm-team-head p { margin: 0; max-width: 40ch; color: var(--aclm-ink-64); }
.aclm-team-facts { display: grid; gap: 0; width: 100%; max-width: 360px; margin-top: 16px; }
.aclm-team-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--aclm-ink-16); font-size: 15px; }
.aclm-team-facts div:last-child { border-bottom: 1px solid var(--aclm-ink-16); }
.aclm-team-facts b { font-weight: 600; }
.aclm-team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.aclm-person { position: relative; overflow: hidden; height: 500px; background: var(--aclm-ink); color: var(--aclm-text); }
.aclm-person img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block;
  filter: none; transition: scale 0.9s var(--aclm-ease), filter 0.6s var(--aclm-ease);
}
.aclm-person::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(28,19,21,0) 30%, rgba(28,19,21,0.55) 62%, rgba(28,19,21,0.92) 100%);
}
.aclm-person:hover img { scale: 1.05; filter: none; }
.aclm-person-tile {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; min-height: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  background: transparent; color: var(--aclm-text); padding: 28px 28px 28px;
}
.aclm-person-tile > div { min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 6px; }
.aclm-person-tile b { display: block; font-size: 28px; font-weight: 600; line-height: 110%; letter-spacing: -0.02em; white-space: normal; overflow: visible; text-shadow: 0 1px 12px rgba(28,19,21,0.4); }
.aclm-person-tile .aclm-role {
  display: block; -webkit-line-clamp: unset; overflow: visible;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; line-height: 150%; opacity: 0.85; margin: 0;
  text-shadow: 0 1px 8px rgba(28,19,21,0.5);
}
.aclm-person-tile a.aclm-tel {
  display: inline-flex; align-items: center; width: auto; height: auto;
  border-radius: 100vw; gap: 8px; padding: 8px 16px 8px 12px; margin-top: 16px;
  font-size: 14px; font-weight: 600; line-height: 20px;
  background: var(--aclm-text); color: var(--aclm-ink); border: 0;
  opacity: 0; translate: 0 8px; transition: opacity 0.4s var(--aclm-ease), translate 0.4s var(--aclm-ease), background-color 0.2s, color 0.2s;
}
.aclm-person:hover .aclm-person-tile a.aclm-tel, .aclm-person:focus-within .aclm-person-tile a.aclm-tel { opacity: 1; translate: 0 0; }
.aclm-person-tile a.aclm-tel:hover { background: var(--aclm-accent); color: var(--aclm-ink); }
.aclm-person-tile a.aclm-tel svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Name and role rest on the bottom edge. A card with a phone parks the pill
   just below that, out of sight, and the whole tile slides up on hover or
   focus to bring it in. 58px is the pill's 36, its 16 margin and the 6 gap. */
.aclm-person-tile.has-tel { translate: 0 58px; transition: translate 0.45s var(--aclm-ease); }
.aclm-person:hover .aclm-person-tile.has-tel, .aclm-person:focus-within .aclm-person-tile.has-tel { translate: 0 0; }

.aclm-person-num { position: absolute; top: 20px; left: 24px; z-index: 2; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--aclm-text); opacity: 0.7; }

/* No photo yet: initials on the dark tile, in the accent, so the card still
   reads as a person rather than an empty frame. */
.aclm-person-initials {
  position: absolute; inset: 0 0 30% 0; display: flex; align-items: center; justify-content: center;
  font-size: 120px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--aclm-accent); opacity: 0.9;
}

/* Team carousel. The heading column stays put; the people slide in the wide
   column, two up with the third peeking into the gutter so the row reads as
   one you can move. The carousel clips its own left edge so cards sliding
   out never pass over the heading, but stays open on the right for the peek,
   which the wrap then clips at the page edge. */
.aclm-team-wrap { overflow-x: clip; }
.aclm-team.is-carousel .aclm-team-head { position: static; }
.aclm-team-carousel { min-width: 0; clip-path: inset(-24px -100vw -24px 0); }
.aclm-team-clip { overflow: visible; }
.aclm-team-track { display: flex; gap: 32px; transition: transform 0.7s ease-out; }
.aclm-team-track > .aclm-person { flex: 0 0 42%; width: 42%; }
.aclm-team-track.is-drag { cursor: grab; }
.aclm-team-track.is-drag:active { cursor: grabbing; }
.aclm-team-track.is-drag .aclm-person { user-select: none; -webkit-user-drag: none; }
.aclm-team-track.is-drag img { pointer-events: none; }
.aclm-team-nav { display: flex; gap: 16px; margin-top: 32px; }

/* ---------- Contact ---------- */
.aclm-contact { padding-top: var(--aclm-pad-y); padding-bottom: var(--aclm-pad-y); }
.aclm-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.aclm-contact-left { display: flex; flex-direction: column; gap: 64px; padding-top: 32px; }
.aclm-contact-headline { display: flex; flex-direction: column; gap: 24px; }
.aclm-contact-headline p { margin: 0; max-width: 52ch; }
.aclm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.aclm-tile { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--aclm-border-16); padding-left: 16px; }
.aclm-tile b { font-size: 16px; font-weight: 600; }
.aclm-tile span { font-size: 16px; color: var(--aclm-dim); }
.aclm-tile span a { color: var(--aclm-text); }
.aclm-form { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.aclm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.aclm-field { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.aclm-input, .aclm-area {
  width: 100%; height: 48px; padding: 12px 16px;
  border: 1px solid var(--aclm-border-16); background: transparent; color: var(--aclm-text);
  font-family: var(--aclm-font); font-size: 16px; border-radius: 0; outline: none;
  transition: border-color 0.2s;
}
.aclm-area { height: 169px; resize: none; }
.aclm-input::placeholder, .aclm-area::placeholder { color: var(--aclm-dim-50); }
.aclm-input:hover, .aclm-area:hover { border-color: rgba(246, 240, 238, 0.32); }
.aclm-input:focus, .aclm-area:focus { border-color: var(--aclm-accent); }
.aclm-contact-img { overflow: hidden; min-height: 640px; max-width: 720px; justify-self: end; width: 100%; }
.aclm-contact-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Contact and story on light frames */
.frame-paper .aclm-input, .frame-paper .aclm-area, .frame-blush .aclm-input, .frame-blush .aclm-area { border-color: var(--aclm-ink-16); color: var(--aclm-ink); }
.frame-paper .aclm-input::placeholder, .frame-paper .aclm-area::placeholder, .frame-blush .aclm-input::placeholder, .frame-blush .aclm-area::placeholder { color: var(--aclm-ink-64); }
.frame-paper .aclm-input:hover, .frame-paper .aclm-area:hover, .frame-blush .aclm-input:hover, .frame-blush .aclm-area:hover { border-color: rgba(28, 19, 21, 0.4); }
.frame-paper .aclm-input:focus, .frame-paper .aclm-area:focus, .frame-blush .aclm-input:focus, .frame-blush .aclm-area:focus { border-color: var(--aclm-accent); }
.frame-paper .aclm-tile, .frame-blush .aclm-tile { border-left-color: var(--aclm-ink-16); }
.frame-paper .aclm-tile span, .frame-blush .aclm-tile span { color: var(--aclm-ink-64); }
.frame-paper .aclm-tile span a, .frame-blush .aclm-tile span a { color: var(--aclm-ink); }
.frame-paper .aclm-contact .aclm-btn.aclm-btn-light, .frame-blush .aclm-contact .aclm-btn.aclm-btn-light { background: var(--aclm-ink); color: var(--aclm-text); }
.frame-paper .aclm-contact .aclm-btn.aclm-btn-light:hover, .frame-blush .aclm-contact .aclm-btn.aclm-btn-light:hover { background: var(--aclm-accent); }
.frame-dark .aclm-story-right p { color: var(--aclm-text-dim, rgba(246,240,238,0.85)); }
.frame-dark .aclm-story .aclm-btn.aclm-btn-white { background: var(--aclm-text); color: var(--aclm-ink); }
.frame-dark .aclm-story .aclm-btn.aclm-btn-white:hover { background: var(--aclm-accent); }
.frame-blush .aclm-foot-bottom { border-top-color: var(--aclm-ink-20); }

/* ---------- Footer ---------- */
.aclm-foot { padding-top: 80px; padding-bottom: 32px; }
.aclm-foot-grid { display: grid; grid-template-columns: auto 1px auto auto; gap: 120px; }
.aclm-foot-menu { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.aclm-foot-menu a {
  position: relative; font-size: 32px; font-weight: 600; line-height: 100%; letter-spacing: -0.02em;
  color: var(--aclm-ink); text-decoration: none; transition: color 0.2s;
}
.aclm-foot-menu a:hover { color: var(--aclm-accent); }
.aclm-foot-div { width: 1px; background: var(--aclm-ink); opacity: 0.2; }
.aclm-foot-block { display: flex; flex-direction: column; gap: 40px; }
.aclm-foot-item { display: flex; flex-direction: column; gap: 16px; }
.aclm-foot-item .aclm-big a { color: var(--aclm-ink); }
.aclm-foot-item .aclm-big a:hover { color: var(--aclm-accent); }
.aclm-foot-mark { display: block; width: 100%; margin: 52px 0 40px; }
.aclm-foot-mark svg { display: block; width: 100%; height: auto; }
.aclm-foot-mark text { font-family: var(--aclm-font); font-weight: 700; letter-spacing: -0.05em; fill: var(--aclm-ink); }
.aclm-foot-bottom {
  border-top: 1px solid var(--aclm-ink-20); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 40px; font-size: 16px;
}
.aclm-foot-id { display: flex; align-items: center; gap: 20px; }
.aclm-foot-lockup { display: block; height: 72px; width: auto; }

/* ---------- Reveal ---------- */
html.aclm-js .aclm-reveal {
  opacity: 0; translate: 0 16px;
  transition: opacity 0.7s ease-out, translate 0.7s ease-out;
}
html.aclm-js .aclm-reveal.lift-32 { translate: 0 32px; }
html.aclm-js .aclm-reveal.is-vis { opacity: 1; translate: 0 0; }
.aclm-clip { overflow: hidden; margin: -8px 0 -15px; padding: 8px 0 15px; }
html.aclm-js .aclm-clip > * { translate: 0 200%; transition: translate 0.7s ease-out; }
html.aclm-js .aclm-clip > *.is-vis { translate: 0 0; }
.aclm-folio-track.is-drag { cursor: grab; }
.aclm-folio-track.is-drag:active { cursor: grabbing; }
.aclm-folio-track.is-drag .aclm-card { user-select: none; -webkit-user-drag: none; }
.aclm-folio-track.is-drag img { pointer-events: none; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  :root { --aclm-pad-y: 64px; --aclm-pad-x: 32px; }
  .aclm-h1 { font-size: 64px; }
  .aclm-h2, .aclm-h3 { font-size: 48px; }
  .aclm-story-grid, .aclm-contact-grid { grid-template-columns: 1fr; }
  .aclm-team { grid-template-columns: 1fr; gap: 40px; }
  .aclm-team-head { position: static; }
  .aclm-team-track > .aclm-person { flex-basis: 45%; width: 45%; }
  .aclm-foot-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
  .aclm-foot-div { display: none; }
  .aclm-folio-track > .aclm-card { flex-basis: 45%; width: 45%; }
  .aclm-contact-img { min-height: 500px; }
}
@media (max-width: 767px) {
  .aclm-foot-bottom { flex-wrap: wrap; gap: 16px; }
  .aclm-foot-lockup { height: 56px; }
  .aclm-h1 { font-size: 56px; }
  .aclm-h2 { font-size: 40px; }
  .aclm-h3 { font-size: 36px; }
  .aclm-links { display: none; }
  .aclm-hero-frame { min-height: 0; }
  /* The nav is 80px tall and floats over the hero, so the copy needs to clear
     it rather than start under it. */
  .aclm-hero { grid-template-columns: 1fr; padding-top: 104px; gap: 32px; }
  .aclm-hero-side { justify-content: flex-start; }
  .aclm-slider-clip { max-width: none; }
  .aclm-hero .aclm-card-img { height: 400px; }
  .aclm-stats-rows { grid-template-columns: 1fr; }
  .aclm-stat-row { padding: 32px 0; }
  .aclm-stat-row + .aclm-stat-row { border-left: 0; border-top: 1px solid var(--aclm-line); padding-left: 0; }
  .frame-blush .aclm-stat-row + .aclm-stat-row, .frame-paper .aclm-stat-row + .aclm-stat-row { border-top-color: var(--aclm-ink-16); }
  .aclm-folio-head { flex-direction: column; align-items: flex-start; gap: 24px; padding-right: 0; }
  .aclm-folio-nav { position: static; transform: none; }
  .aclm-folio-track > .aclm-card { flex-basis: 95%; width: 95%; }
  .aclm-foot-grid { grid-template-columns: 1fr; }
  .aclm-form-row, .aclm-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  :root { --aclm-pad-y: 48px; --aclm-pad-x: 16px; }
  .aclm-h1 { font-size: 13vw; }
  .aclm-h2 { font-size: 36px; }
  .aclm-h3 { font-size: 32px; }
  .aclm-h4 { font-size: 24px; }
  .aclm-team-grid { grid-template-columns: 1fr; gap: 16px; }
  .aclm-person { height: 420px; }
  .aclm-person-tile { padding: 20px; }
  .aclm-person-tile a.aclm-tel { opacity: 1; translate: 0 0; }
  .aclm-person-tile.has-tel { translate: 0 0; }
  .aclm-team-track { gap: 16px; }
  .aclm-team-track > .aclm-person { flex-basis: 85%; width: 85%; }
  .aclm-person-initials { font-size: 96px; }
  .aclm-story-grid > img { height: 300px; }
  .aclm-card-img { height: 300px; }
  .aclm-hero .aclm-card-img { height: 350px; }
  .aclm-contact-img { min-height: 300px; }
  .aclm-area { height: 120px; }
  .aclm-stat-num { font-size: 56px; }
}
/* Touch screens have no hover, so the pill shows at rest at any width. */
@media (hover: none) {
  .aclm-person-tile.has-tel { translate: 0 0; }
  .aclm-person-tile a.aclm-tel { opacity: 1; translate: 0 0; }
  /* With the pill always showing, a card with no phone holds the same room
     so its name stays on the line with the rest. */
  .aclm-person-tile:not(.has-tel) { padding-bottom: 86px; }
}
@media (max-width: 479px) {
  .aclm-person-tile:not(.has-tel) { padding-bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .aclm-btn .roll > div, .aclm-roll-link > div, .aclm-card-img img, .aclm-person img, .aclm-person-tile, .aclm-strack, .aclm-folio-track, .aclm-team-track { transition: none; }
}

/* ---------- Inner page hero ---------- */
.aclm-inner {
  position: relative; overflow: hidden; min-height: 520px; display: flex; align-items: flex-end;
  padding-top: 120px; padding-bottom: 64px;
  padding-left: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  padding-right: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
}
.aclm-inner-bg { position: absolute; inset: 0; }
.aclm-inner-bg img { width: 100%; height: 100%; object-fit: cover; display: block; scale: 1.08; }
.aclm-inner-bg::after { content: ''; position: absolute; inset: 0; background: rgba(15, 11, 11, 0.1); }
.aclm-inner-copy { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 24px; max-width: 760px; }
.aclm-crumb { display: flex; gap: 12px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aclm-text-dim, rgba(246,240,238,0.85)); }
.aclm-crumb span { opacity: 0.5; }
/* The current page is small text on a photo, so it stays near full strength. */
.aclm-crumb span:last-child { opacity: 0.8; }
.aclm-inner-copy .aclm-big { color: var(--aclm-text-dim, rgba(246,240,238,0.85)); max-width: 52ch; }

/* ---------- Services ledger ---------- */
.aclm-services {
  padding-top: var(--aclm-pad-y); padding-bottom: var(--aclm-pad-y);
  padding-left: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  padding-right: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start;
}
.aclm-services-head { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.aclm-services-head p { margin: 0; max-width: 40ch; }
.aclm-srow {
  display: grid; grid-template-columns: 72px 1fr; gap: 24px; padding: 32px 0;
  border-top: 1px solid var(--aclm-ink-16);
}
.aclm-srow:last-child { border-bottom: 1px solid var(--aclm-ink-16); }
.aclm-srow i { font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--aclm-accent-deep); padding-top: 6px; }
.aclm-srow b { display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 120%; margin-bottom: 8px; }
.aclm-srow p { margin: 0; color: var(--aclm-ink-64); max-width: 58ch; }
.aclm-srow em { font-style: normal; color: var(--aclm-ink); font-weight: 600; }

/* ---------- Tenant steps + download ---------- */
.aclm-tenant {
  padding-top: var(--aclm-pad-y); padding-bottom: var(--aclm-pad-y);
  padding-left: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  padding-right: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: start;
}
.aclm-tenant-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 48px; }
.aclm-tenant-head p { margin: 0; max-width: 52ch; color: var(--aclm-dim); }
.aclm-steps { display: grid; }
.aclm-step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--aclm-line); }
.aclm-step:last-child { border-bottom: 1px solid var(--aclm-line); }
.aclm-step i { font-style: normal; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--aclm-accent); font-variant-numeric: tabular-nums; }
.aclm-step b { display: block; font-weight: 600; margin-bottom: 2px; }
.aclm-step p { margin: 0; color: var(--aclm-dim); font-size: 15px; }
.aclm-download { position: sticky; top: 96px; overflow: hidden; background: #181112; display: flex; flex-direction: column; }
.aclm-download img { width: 100%; height: 320px; object-fit: cover; display: block; }
.aclm-download-body { padding: 28px 28px 32px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.aclm-download-body b { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 120%; }
.aclm-download-body p { margin: 0; color: var(--aclm-dim); }
.aclm-download-body small { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--aclm-dim-50); }
.aclm-download { color: var(--aclm-text); }
.frame-paper .aclm-tenant-head p, .frame-blush .aclm-tenant-head p { color: var(--aclm-ink-64); }
.frame-paper .aclm-step, .frame-blush .aclm-step { border-top-color: var(--aclm-ink-16); }
.frame-paper .aclm-step:last-child, .frame-blush .aclm-step:last-child { border-bottom-color: var(--aclm-ink-16); }
.frame-paper .aclm-step p, .frame-blush .aclm-step p { color: var(--aclm-ink-64); }
.frame-paper .aclm-step i, .frame-blush .aclm-step i { color: var(--aclm-accent-deep); }
/* The download card is dark inside a light frame, so it keeps the paper pill. */
.frame-paper .aclm-download .aclm-btn.aclm-btn-light, .frame-blush .aclm-download .aclm-btn.aclm-btn-light { background: var(--aclm-text); color: var(--aclm-ink); }
.frame-paper .aclm-download .aclm-btn.aclm-btn-light:hover, .frame-blush .aclm-download .aclm-btn.aclm-btn-light:hover { background: var(--aclm-accent); color: var(--aclm-ink); }

/* ---------- Chinese block ---------- */
.aclm-zh {
  padding-top: var(--aclm-pad-y); padding-bottom: var(--aclm-pad-y);
  padding-left: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  padding-right: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start;
}
.aclm-zh-head { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.aclm-zh .aclm-h2 { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", var(--aclm-font); letter-spacing: 0; }
.aclm-zh-body { display: flex; flex-direction: column; gap: 20px; font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", var(--aclm-font); letter-spacing: 0; }
.aclm-zh-body p { margin: 0; font-size: 17px; line-height: 170%; color: var(--aclm-ink); }
.aclm-zh-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; padding: 0; margin: 8px 0 0; list-style: none; }
.aclm-zh-list li { padding: 12px 0; border-top: 1px solid var(--aclm-ink-16); font-size: 15px; }
.aclm-zh-list li b { font-weight: 600; margin-right: 8px; }

/* ---------- Emergency strip ---------- */
.aclm-emerg {
  padding-top: 40px; padding-bottom: 40px;
  padding-left: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  padding-right: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  display: grid; grid-template-columns: auto 1fr auto; gap: 48px; align-items: center;
  background: var(--aclm-accent); color: var(--aclm-text);
}
.aclm-emerg-lbl { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.aclm-emerg-lbl i { width: 10px; height: 10px; border-radius: 50%; background: var(--aclm-text); box-shadow: 0 0 0 4px rgba(246,240,238,0.25); }
.aclm-emerg p { margin: 0; font-size: 20px; line-height: 140%; max-width: 60ch; }
.aclm-emerg-nums { display: flex; gap: 32px; }
.aclm-emerg-nums a { display: flex; flex-direction: column; gap: 4px; color: var(--aclm-text); text-decoration: none; }
.aclm-emerg-nums a small { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; opacity: 0.7; }
.aclm-emerg-nums a b { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 100%; white-space: nowrap; }
.aclm-emerg-nums a:hover b { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- FAQ ---------- */
.aclm-faq {
  padding-top: var(--aclm-pad-y); padding-bottom: var(--aclm-pad-y);
  padding-left: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  padding-right: max(var(--aclm-pad-x), calc((100% - var(--aclm-max)) / 2));
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start;
}
.aclm-faq-head { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.aclm-faq-head p { margin: 0; max-width: 40ch; color: var(--aclm-ink-64); }
.aclm-q { border-top: 1px solid var(--aclm-ink-16); }
.aclm-q:last-child { border-bottom: 1px solid var(--aclm-ink-16); }
.aclm-q summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 130%;
}
.aclm-q summary::-webkit-details-marker { display: none; }
.aclm-q summary .plus { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.aclm-q summary .plus::before, .aclm-q summary .plus::after { content: ''; position: absolute; background: var(--aclm-ink); left: 0; top: 7px; width: 16px; height: 2px; transition: transform 0.3s var(--aclm-ease); }
.aclm-q summary .plus::after { transform: rotate(90deg); }
.aclm-q[open] summary .plus::after { transform: rotate(0deg); }
.aclm-q[open] summary { color: var(--aclm-accent); }
.aclm-q p { margin: 0; padding: 0 0 28px; color: var(--aclm-ink-64); max-width: 60ch; font-size: 17px; }
/* Smooth open and close: animate ::details-content to auto height.
   Needs interpolate-size (Chrome 129+); older browsers fall back to an instant toggle. */
:root { interpolate-size: allow-keywords; }
.aclm-q::details-content {
  block-size: 0; overflow: clip; opacity: 0;
  transition: block-size 0.5s var(--aclm-ease), opacity 0.4s var(--aclm-ease), content-visibility 0.5s allow-discrete;
}
.aclm-q[open]::details-content { block-size: auto; opacity: 1; }

@media (max-width: 991px) {
  .aclm-services, .aclm-tenant, .aclm-zh, .aclm-faq { grid-template-columns: 1fr; gap: 40px; }
  .aclm-services-head, .aclm-faq-head, .aclm-download { position: static; }
  .aclm-emerg { grid-template-columns: 1fr; gap: 24px; }
  .aclm-zh-list { grid-template-columns: 1fr; }
}
@media (max-width: 479px) {
  .aclm-inner { min-height: 420px; }
  .aclm-emerg-nums { flex-direction: column; gap: 16px; }
  .aclm-q summary { font-size: 18px; }
}

/* ---------- Homepage assembly ----------
   Ported from the guide's `.mn-page` rules (data-assemble
   "c-01 c-02 c-04 c-05:blush c-06:dark c-14 c-08:paper c-09:blush").
   The guide keys these off data-from attributes its review page injects; here
   each widget carries data-aclm-sec instead. Scoped to .aclm-home so inner
   pages keep the plain stacked spacing. */
/* The nav carries a frame class for its text colour, but must not paint a
   ground: it floats over the hero on every page. Class-on-class beats the frame. */
.aclm-navwrap.frame-dark,
.aclm-navwrap.frame-blush,
.aclm-navwrap.frame-paper { background: transparent; }
.aclm-navwrap .aclm-nav { padding-top: 24px; }

/* 760px is the homepage hero's floor, not a fixed height. Between 768px and
   about 1200px the copy (pill, headline, body, proof strip, CTAs and dots) runs
   to roughly 855px, and because .aclm-hero-frame is align-items: flex-end with
   overflow: hidden, a fixed height clipped the headline and pushed the REINZ
   pill up under the nav. min-height lets the band grow with its content. */
@media (min-width: 768px) {
  .aclm-home .aclm-hero-frame { min-height: 760px; }
  /* The homepage headline names both services, so it needs more measure than
     the guide's 550px. At 550px it wrapped to four lines, and because the copy
     block is bottom-aligned, the extra line pushed the REINZ pill up into the
     nav. 680px holds it to three. */
  .aclm-home .aclm-hero-copy .aclm-h1 { max-width: 680px; }
}

/* 1. Stats run as a band straight off the hero, no gutter and no heading. */
.aclm-home [data-aclm-sec="stats"] .aclm-stats { padding-top: 0; padding-bottom: 0; }
.aclm-home [data-aclm-sec="stats"] .aclm-stats-head { display: none; }

.aclm-home [data-aclm-sec="folio"] .aclm-folio-sec,
.aclm-home [data-aclm-sec="story"] .aclm-story,
.aclm-home [data-aclm-sec="contact"] .aclm-contact { padding-top: 96px; padding-bottom: 96px; }
.aclm-home [data-aclm-sec="story"] .aclm-story-head { margin-bottom: 56px; }

/* 2. Buildings: the heading sits on the paper ground above and the card photos
      straddle the seam into blush. */
.aclm-home [data-aclm-sec="folio"].frame-blush {
  background: linear-gradient(180deg, var(--aclm-paper) 0, var(--aclm-paper) 300px, var(--aclm-blush) 300px);
}
.aclm-home [data-aclm-sec="folio"].frame-blush .aclm-card-loc { color: var(--aclm-ink-64); }

/* 3. Dark fades up out of the blush, short so the midtone reads as shadow. */
.aclm-home [data-aclm-sec="story"].frame-dark {
  background: linear-gradient(180deg, var(--aclm-blush) 0, #3a2a2b 110px, var(--aclm-bg) 190px);
}
.aclm-home [data-aclm-sec="story"] .aclm-story { padding-bottom: 152px; }
.aclm-home [data-aclm-sec="story"].frame-dark .aclm-story { padding-top: 200px; }

/* 4. Emergency band floats across both neighbours. */
.aclm-home [data-aclm-sec="emerg"] {
  position: relative; z-index: 4;
  width: min(1672px, calc(100% - 128px));
  margin: -56px auto;
  box-shadow: 0 24px 64px rgba(28, 19, 21, 0.14);
}
.aclm-home [data-aclm-sec="emerg"] .aclm-emerg { padding-left: 48px; padding-right: 48px; }
.aclm-home [data-aclm-sec="contact"] .aclm-contact { padding-top: 152px; }
.aclm-home [data-aclm-sec="contact"] .aclm-contact-grid { align-items: stretch; }

/* 5. The oversized footer wordmark already breaks its own baseline. */
.aclm-home .aclm-foot { padding-top: 96px; }

@media (max-width: 767px) {
  .aclm-home [data-aclm-sec="emerg"] { width: 100%; margin: 0; box-shadow: none; }
  .aclm-home [data-aclm-sec="emerg"] .aclm-emerg { padding-left: var(--aclm-pad-x); padding-right: var(--aclm-pad-x); }
  .aclm-home [data-aclm-sec="story"] .aclm-story { padding-top: 64px; padding-bottom: 64px; }
  .aclm-home [data-aclm-sec="story"].frame-dark .aclm-story { padding-top: 140px; }
  .aclm-home [data-aclm-sec="contact"] .aclm-contact { padding-top: 64px; }
}

/* ---------- CJK ----------
   Hanken Grotesk carries no Hanzi, so the browser falls back per character and
   the Latin letter-spacing reads as broken. Any element marked lang="zh-*" gets
   the CJK stack and neutral tracking. .aclm-zh already does this for its own
   block; this generalises it to headings and body copy anywhere. */
[lang^="zh"] .aclm-h1,
[lang^="zh"] .aclm-h2,
[lang^="zh"] .aclm-h3,
[lang^="zh"] .aclm-h4,
[lang^="zh"] .aclm-big,
[lang^="zh"] p,
[lang^="zh"].aclm-h1,
[lang^="zh"].aclm-h2 {
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", var(--aclm-font);
  letter-spacing: 0;
}
[lang^="zh"] .aclm-h1 { line-height: 115%; }
[lang^="zh"] .aclm-h2 { line-height: 120%; }

/* ---------- Hero bottom fade ----------
   The photo used to stop dead at the bottom of the hero. Two stacked layers
   dissolve it instead: ::before is a light backdrop blur masked so it only bites
   over the lower third, ::after is a heavier blur carrying a colour ramp down to
   the hero's own ground. Both sit above the image and tint but below the copy,
   so headings, buttons and the slider card stay sharp.

   The ramp ends on the hero's own ground. The tone change between sections is
   deliberate everywhere else in the system; this only softens the photograph. */
.aclm-hero-frame::before,
.aclm-hero-frame::after,
.aclm-inner::before,
.aclm-inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.aclm-hero-frame::before,
.aclm-inner::before {
  height: var(--aclm-hero-fade, 220px);
  z-index: 1;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 100%);
}

.aclm-hero-frame::after,
.aclm-inner::after {
  height: calc(var(--aclm-hero-fade, 220px) * 0.62);
  z-index: 1;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 70%);
  /* Fallback for browsers without color-mix. */
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--aclm-hero-fade-to, var(--aclm-ground, var(--aclm-bg))) 100%
  );
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--aclm-hero-fade-to, var(--aclm-ground, var(--aclm-bg))) 55%, transparent) 55%,
    var(--aclm-hero-fade-to, var(--aclm-ground, var(--aclm-bg))) 100%
  );
}

/* Melting into a light section means the bottom of the band goes pale, so the
   copy has to clear it. Without this the white heading would sit on a lightening
   ground and lose contrast as the fade takes hold. */
.aclm-inner[data-aclm-fade="paper"],
.aclm-inner[data-aclm-fade="blush"] {
  padding-bottom: calc(var(--aclm-hero-fade, 220px) * 0.72);
}

/* The hero copy and the slider card must stay above the fade. */
.aclm-hero { z-index: 3; }
.aclm-inner-copy { z-index: 2; }

@media (max-width: 767px) {
  .aclm-hero-frame,
  .aclm-inner { --aclm-hero-fade: 140px; }
}

/* Backdrop blur is the expensive part of this; drop it where motion is reduced
   and keep the colour ramp, which is what actually kills the hard edge. */
@media (prefers-reduced-motion: reduce) {
  .aclm-hero-frame::before,
  .aclm-inner::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .aclm-hero-frame::after,
  .aclm-inner::after {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}