/* ACLM extensions.
   Components designed for ACLM that were not in the source Monolith
   collection. Kept out of monolith.css so that file stays a faithful port and
   the provenance of everything here is obvious.

   These are now mirrored in the brand guide as the "ACLM originals" block at
   the end of brand-guide/assets/monolith.css, aclm-* for mn-*. The guide is the
   reference: edit there first, then re-port here.

   Built entirely from existing tokens: no new colours, no new type sizes. */

/* ---------- Credentials strip ----------
   A thin band of trust signals. Deliberately quiet: hairlines and small type,
   so it reads as a footnote between two heavier sections rather than competing. */
.aclm-creds {
  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));
}
.aclm-creds-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--aclm-line);
  border-bottom: 1px solid var(--aclm-line);
}
.aclm-cred {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 32px 26px 0;
}
.aclm-cred + .aclm-cred {
  border-left: 1px solid var(--aclm-line);
  padding-left: 32px;
}
.aclm-cred span {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--aclm-dim);
}
.aclm-cred b {
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.02em;
}
.frame-blush .aclm-creds-in,
.frame-paper .aclm-creds-in { border-color: var(--aclm-ink-16); }
.frame-blush .aclm-cred + .aclm-cred,
.frame-paper .aclm-cred + .aclm-cred { border-left-color: var(--aclm-ink-16); }
.frame-blush .aclm-cred span,
.frame-paper .aclm-cred span { color: var(--aclm-ink-64); }

/* ---------- CTA band ----------
   One line and a button. Exists so a page can end on something lighter than the
   full contact block. */
.aclm-ctaband {
  padding-top: 72px;
  padding-bottom: 72px;
  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 auto;
  gap: 40px;
  align-items: center;
}
.aclm-ctaband-copy { display: flex; flex-direction: column; gap: 12px; }
.aclm-ctaband-copy p { margin: 0; max-width: 56ch; color: var(--aclm-dim); }
.frame-blush .aclm-ctaband-copy p,
.frame-paper .aclm-ctaband-copy p { color: var(--aclm-ink-64); }
.aclm-ctaband-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---------- Fees and inclusions ----------
   Was a flat three-column table where the 7% carried the same weight as "rent
   reviews". Now two panels: what you pay, anchored in a dark card so the numbers
   land, and what is included, as a light list beside it. The eye gets the price
   first and the reassurance second, which is the order a landlord reads in. */
.aclm-fees {
  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));
}
.aclm-fees-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 56px; max-width: 640px; }
.aclm-fees-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* Left: the priced items, on ink so the accent has somewhere dark to sit. */
.aclm-fees-pay {
  background: var(--aclm-ink);
  color: var(--aclm-text);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aclm-fees-pay > .aclm-label { color: var(--aclm-dim); margin-bottom: 16px; }
.aclm-fee { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 26px 0; }
.aclm-fee + .aclm-fee { border-top: 1px solid var(--aclm-border-16); }
.aclm-fee-value {
  font-size: 48px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.04em;
  color: var(--aclm-accent);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.aclm-fee-value em {
  font-style: normal;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--aclm-text);
}
.aclm-fee b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin-top: 4px; }
.aclm-fee p { margin: 0; font-size: 14px; line-height: 150%; color: var(--aclm-dim); max-width: 42ch; }

/* Right: the inclusions, quieter, ticked. */
.aclm-fees-free { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.aclm-fees-free > .aclm-label { color: var(--aclm-ink-64); margin-bottom: 16px; }
.aclm-fees-free ul { list-style: none; margin: 0; padding: 0; display: grid; }
.aclm-fees-free li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-top: 1px solid var(--aclm-ink-16);
}
.aclm-fees-free li:last-child { border-bottom: 1px solid var(--aclm-ink-16); }
.aclm-fees-free svg {
  width: 18px; height: 18px; margin-top: 3px;
  stroke: var(--aclm-accent); stroke-width: 2.2; fill: none;
}
.aclm-fees-free b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.aclm-fees-free span { display: block; font-size: 14px; line-height: 150%; color: var(--aclm-ink-64); margin-top: 2px; }
.aclm-fees-note { margin: 32px 0 0; font-size: 13px; color: var(--aclm-ink-64); max-width: 70ch; }

.frame-dark .aclm-fees-free > .aclm-label,
.frame-dark .aclm-fees-free span,
.frame-dark .aclm-fees-note { color: var(--aclm-dim); }
.frame-dark .aclm-fees-free li { border-top-color: var(--aclm-line); }
.frame-dark .aclm-fees-free li:last-child { border-bottom-color: var(--aclm-line); }

@media (max-width: 991px) {
  .aclm-fees-grid { grid-template-columns: 1fr; gap: 40px; }
  .aclm-fees-pay { padding: 32px 28px; }
  .aclm-fee-value { font-size: 40px; }
}

/* ---------- Alternating feature rows ----------
   The story block, repeated, with the image swapping sides. For pages that need
   length without another ledger. */
.aclm-features {
  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));
}
.aclm-features-head { display: flex; flex-direction: column; gap: 24px; margin-bottom: 64px; max-width: 640px; }
.aclm-frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.aclm-frow + .aclm-frow { margin-top: 88px; }
.aclm-frow.is-flip .aclm-frow-img { order: 2; }
.aclm-frow-img { overflow: hidden; }
.aclm-frow-img img { width: 100%; height: 420px; object-fit: cover; display: block; }
.aclm-frow-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.aclm-frow-copy p { margin: 0; }
.aclm-frow-copy .aclm-label { color: var(--aclm-dim); }
.frame-blush .aclm-frow-copy .aclm-label,
.frame-paper .aclm-frow-copy .aclm-label { color: var(--aclm-ink-64); }

@media (max-width: 991px) {
  .aclm-ctaband { grid-template-columns: 1fr; }
  .aclm-frow { grid-template-columns: 1fr; }
  .aclm-frow.is-flip .aclm-frow-img { order: 0; }
  .aclm-frow + .aclm-frow { margin-top: 56px; }
  .aclm-frow-img img { height: 300px; }
}
@media (max-width: 767px) {
  .aclm-cred { padding: 20px 0; }
  .aclm-cred + .aclm-cred { border-left: 0; border-top: 1px solid var(--aclm-line); padding-left: 0; }
  .frame-blush .aclm-cred + .aclm-cred,
  .frame-paper .aclm-cred + .aclm-cred { border-top-color: var(--aclm-ink-16); }
  .aclm-creds-in { grid-template-columns: 1fr; }
}

/* ---------- Hero proof strip ----------
   The three published fees, sitting between the hero body and the CTAs so the
   number a landlord is scanning for is read before the action is asked for.
   Hairline separators rather than boxes, so it reads as fact and does not
   compete with the headline above it. */
.aclm-hero-proof {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 20px; margin: 0; padding: 0; list-style: none;
  font-size: 15px; font-weight: 500; color: var(--aclm-text);
}
.aclm-hero-proof li { display: flex; align-items: center; gap: 20px; }
.aclm-hero-proof li + li::before {
  content: ""; width: 1px; height: 14px;
  background: var(--aclm-border-16); flex: 0 0 auto;
}

/* Stacked while the copy column is narrow. Inline wrapping left a separator
   hanging at the start of the wrapped line, so up to 1279px the facts each take
   a row and the separators are dropped. The two column hero only gives the copy
   enough width for the three facts inline from about 1280px. */
@media (max-width: 1279px) {
  .aclm-hero-proof { flex-direction: column; align-items: flex-start; gap: 6px; }
  .aclm-hero-proof li { gap: 0; }
  .aclm-hero-proof li + li::before { content: none; }
}
@media (max-width: 767px) {
  .aclm-hero-proof { font-size: 14px; }
}

/* ---------- Audience split ----------
   Three routing cards straight off the hero. The homepage serves a landlord, a
   body corporate chair and a tenant, and each needs a different page: this is
   the fork that sends them there instead of making them read the nav. */
.aclm-audience {
  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: flex; flex-direction: column; gap: 32px;
}
.aclm-aud-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.aclm-aud-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px; text-decoration: none; color: inherit;
  border: 1px solid var(--aclm-border-16); border-radius: 4px;
  transition: border-color 0.25s var(--aclm-ease), background 0.25s var(--aclm-ease);
}
.frame-blush .aclm-aud-card,
.frame-paper .aclm-aud-card { border-color: var(--aclm-ink-16); }
.aclm-aud-card:hover { border-color: var(--aclm-accent); }
.aclm-aud-title { font-size: 24px; font-weight: 600; line-height: 120%; margin: 0; }
.aclm-aud-body { font-size: 16px; color: var(--aclm-text-dim); margin: 0; flex: 1 1 auto; }
.frame-blush .aclm-aud-body,
.frame-paper .aclm-aud-body { color: rgba(28, 19, 21, 0.72); }
.aclm-aud-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--aclm-accent);
}
.aclm-aud-cta svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.aclm-aud-card:hover .aclm-aud-cta { gap: 12px; }
/* 15px text on a light ground takes the deep red for contrast. */
.frame-paper .aclm-aud-cta, .frame-blush .aclm-aud-cta { color: var(--aclm-accent-deep); }

@media (max-width: 991px) {
  .aclm-aud-grid { grid-template-columns: 1fr; gap: 16px; }
  .aclm-aud-card { padding: 24px; }
}

/* ---------- Swipeable carousels ----------
   The guide drags its card track with GSAP Draggable, which the plugin does
   not load, so monolith.js drives both tracks from pointer events instead.
   Two things have to be true for that to work.

   touch-action: pan-y is the important one. It tells the browser we want the
   horizontal gesture and it can keep the vertical one, so a swipe across a
   card never steals the page scroll and a scroll up the page never gets eaten
   by the carousel. Without it the browser claims both axes and no amount of
   JavaScript gets the swipe back on iOS.

   transition: none is the second. The script animates every movement itself,
   on rAF, so a CSS transition on the same property would lag one behind the
   finger. The rules are keyed to .is-drag, which the script adds, so if the
   JavaScript never runs the CSS transitions in monolith.css still apply and
   the arrows and dots keep working. */
.aclm-folio-track.is-drag,
.aclm-team-track.is-drag,
.aclm-strack.is-drag {
  touch-action: pan-y;
  transition: none;
}
.aclm-strack.is-drag { cursor: grab; }
.aclm-strack.is-drag:active { cursor: grabbing; }
.aclm-strack.is-drag .aclm-card { user-select: none; -webkit-user-drag: none; }
.aclm-strack.is-drag img { pointer-events: none; }

/* September content review: readable hero copy and direct WeChat contact. */
.aclm-inner .aclm-rating { align-self: flex-start; }
.page-id-20 .aclm-inner-bg::after {
  background: linear-gradient(90deg, rgba(15,11,11,.78), rgba(15,11,11,.45) 60%, rgba(15,11,11,.12));
}
.page-id-22 .aclm-inner { gap: clamp(24px, 5vw, 80px); align-items: center; }
.page-id-22 .aclm-inner-copy { flex: 1; min-width: 0; }
.page-id-22 .aclm-inner-copy h1 em { display: block; }
.aclm-wechat-card { position: relative; z-index: 2; flex: 0 0 200px; padding: 20px; background: var(--aclm-paper); color: var(--aclm-ink); text-align: center; border-radius: 4px; }
.aclm-wechat-card img { display: block; width: 160px; height: 160px; padding: 8px; background: #fff; }
.aclm-wechat-card p { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.aclm-wechat-card p span { font-size: 13px; }
.aclm-whatsapp { margin: 16px 0 0; font-size: 15px; line-height: 1.5; }
.aclm-whatsapp a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--aclm-ink); }
.aclm-whatsapp a:hover, .aclm-whatsapp a:focus-visible { color: var(--aclm-accent-deep); }
/* A continuous logo rail. Duplicate group is visual only. */
.aclm-partners { overflow: hidden; }
.aclm-partners-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.aclm-partners-heading h2 { margin: 0; }
.aclm-partners-toggle { flex-shrink: 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 8px 0; min-height: 44px; color: var(--aclm-ink); background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.aclm-partners-toggle:hover, .aclm-partners-toggle:focus-visible { color: var(--aclm-accent); background: transparent; }
.aclm-partners-toggle[hidden] { display: none; }
.aclm-partners-window { position: relative; overflow: hidden; }
/* Soft edge veils blend moving logos into the section background. */
.aclm-partners.is-ready .aclm-partners-window::before,
.aclm-partners.is-ready .aclm-partners-window::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 1;
  width: clamp(32px, 6vw, 100px); pointer-events: none;
  background: linear-gradient(var(--aclm-edge-direction), var(--aclm-paper), transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(var(--aclm-edge-direction), #000, transparent);
  mask-image: linear-gradient(var(--aclm-edge-direction), #000, transparent);
}
.aclm-partners-window::before { left: 0; --aclm-edge-direction: to right; }
.aclm-partners-window::after { right: 0; --aclm-edge-direction: to left; }
.aclm-partners-track { display: flex; width: max-content; background: var(--aclm-paper); }
.aclm-partners.is-ready .aclm-partners-track { animation: aclm-partners-drift 64s linear infinite; }
.aclm-partners-group { display: flex; flex: 0 0 auto; gap: 48px; padding-right: 48px; }
.aclm-partners .aclm-cred { flex: 0 0 clamp(220px, 24vw, 340px); width: clamp(220px, 24vw, 340px); min-width: 0; align-items: center; justify-content: flex-start; text-align: center; gap: 24px; padding: 12px 8px; border: 0; background: transparent; }
.aclm-partners .aclm-cred img { display: block; width: 100%; max-width: 230px; height: 112px; object-fit: contain; mix-blend-mode: multiply; }
.aclm-partners .aclm-cred b { max-width: 24ch; min-height: 44px; font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; text-wrap: balance; }
.aclm-partners.is-paused .aclm-partners-track, .aclm-partners-window:hover .aclm-partners-track { animation-play-state: paused; }
@keyframes aclm-partners-drift { to { transform: translateX(-50%); } }
.aclm-partners:not(.is-ready) .aclm-partners-track { width: 100%; }
.aclm-partners:not(.is-ready) .aclm-partners-group { flex: 1; flex-wrap: wrap; justify-content: center; padding: 0; }
.aclm-partners:not(.is-ready) .aclm-partners-group[aria-hidden] { display: none; }
/* Fixed logo row. Same cell, logo box and caption as the partners rail, so the
   two sections read as a pair; it holds still because two logos cannot loop. */
.aclm-accreds-row { display: grid; grid-template-columns: repeat(2, minmax(0, 340px)); gap: 48px; }
.aclm-accreds .aclm-cred { min-width: 0; align-items: center; justify-content: flex-start; text-align: center; gap: 24px; padding: 12px 8px; border: 0; background: transparent; }
.aclm-accreds .aclm-cred + .aclm-cred { border: 0; padding-left: 8px; }
.aclm-accreds .aclm-cred img { display: block; width: 100%; max-width: 230px; height: 112px; object-fit: contain; }
.aclm-accreds .aclm-cred b { max-width: 24ch; min-height: 44px; font-size: 15px; font-weight: 500; line-height: 1.45; letter-spacing: 0; text-transform: none; text-wrap: balance; }
@media (max-width: 991px) {
  .page-id-22 .aclm-inner { flex-direction: column; align-items: flex-start; }
  .aclm-wechat-card { flex-basis: auto; }
}
@media (max-width: 479px) {
  .aclm-partners-heading { gap: 16px; }
  .aclm-partners-group { gap: 24px; padding-right: 24px; }
  .aclm-partners .aclm-cred img { height: 96px; }
  .aclm-accreds-row { gap: 24px; }
  .aclm-accreds .aclm-cred img { height: 96px; }
}
@media (prefers-reduced-motion: reduce) {
  .aclm-partners.is-ready .aclm-partners-window::before,
  .aclm-partners.is-ready .aclm-partners-window::after { display: none; }
  .aclm-partners.is-ready .aclm-partners-track { animation: none; width: 100%; }
  .aclm-partners .aclm-partners-group { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); flex: 1; padding: 0; gap: 24px; }
  .aclm-partners .aclm-cred { width: 100%; }
  .aclm-partners .aclm-partners-group[aria-hidden], .aclm-partners-toggle { display: none; }
  .aclm-partners .aclm-cred img { max-width: 100%; }
}
.page-id-22 .aclm-inner-bg::after {
  background: linear-gradient(90deg, rgba(15,11,11,.56), rgba(15,11,11,.3));
}

/* Keep variable service charges secondary to the two headline fees. */
.aclm-fees-additional { border-top: 1px solid var(--aclm-border-16); margin-top: 4px; padding-top: 24px; }
.aclm-fees-additional h3 { margin: 0 0 18px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--aclm-dim); }
.aclm-fees-additional ul { display: grid; gap: 20px; list-style: none; margin: 0; padding: 0; }
.aclm-fees-additional b { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
.aclm-fees-additional p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--aclm-dim); max-width: 48ch; }

/* Keep the optional listings action within narrow hero layouts. */
.aclm-hero-copy { min-width: 0; }
.aclm-hero-copy .aclm-ctas { flex-wrap: wrap; max-width: 100%; }

/* Elementor editor preview: reveals never fire there, so show everything at rest. */
body.elementor-editor-active .aclm-reveal,
body.elementor-editor-active .aclm-clip > * { opacity: 1 !important; translate: 0 0 !important; }