/* /about (v3) — DESIGN-V3 §8.1 "Who we are, and how to check us". Page-only layout + the page's motion signature (§6.5):
     1 hero        the logo lock-up: the supplied logo at display size, revealed by a left-to-right mask wipe (CSS, from
                   first paint; opacity / mask / scale only, never moved or recoloured), then the H1 lines rise
     2 the group   two names, one company: the Apollo Builders and Commercial Renovation cards slide in from either side and
                   lock into one plate (about.js, fx.scrub)
     4 credentials a squared-up stack of credential cards deals out into a row (about.js, fx.scrub)
   Start states apply only under html.a-motion; .a-noanim / .no-js / .a-late get the finished, flat layout below. */

/* ------------------------------------------------------------------ 1 hero: the logo lock-up */
.ab-hero .a-phero__media img { object-position: 52% 60%; }
.ab-lock { display: block; width: max-content; margin: 0 -56px clamp(22px, 3.4vh, 38px) 0; padding-right: 56px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }   /* the window's soft leading edge sits in its own 56 px, never over the logo */
.ab-lock img { display: block; width: auto; height: clamp(72px, 8.4vw, 124px); transform-origin: 0 50%; }
.ab-place { position: absolute; z-index: 1; right: 0; left: 0; bottom: clamp(52px, 9vh, 104px); pointer-events: none; }
.ab-place p { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 60px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.ab-place p::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 4px rgba(232, 190, 87, .18); }
.ab-hero .a-h1 .c-chip { font-size: 11px; transform: translateY(-.4em); }
/* the entrance: the logo wipes in first, the headline follows it (overrides the shared hero timing). The wipe is a mask made
   of two opposite translations (the window slides right while the logo inside counter-slides, so the logo itself never moves):
   the same left-to-right reveal as a clip-path inset, with a soft leading edge, but it runs on the compositor, so it stays smooth while the page's
   scripts start up. The logo only scales (1.035 → 1) as it is uncovered. */
.a-motion .ab-lock { animation: abWin 1.35s .1s cubic-bezier(.7, 0, .2, 1) both; }
.a-motion .ab-lock img { animation: abLogo 1.35s .1s cubic-bezier(.7, 0, .2, 1) both; }
.a-motion .ab-hero .a-h1 .a-line > span { animation-delay: .52s; }
.a-motion .ab-hero .a-h1 .a-line:nth-child(2) > span { animation-delay: .6s; }
.a-motion .ab-hero .a-lead, .a-motion .ab-hero .a-phero__ctas { animation-delay: .74s; }
.a-motion .ab-hero .a-phero__top, .a-motion .ab-place { animation: aUp .9s .9s var(--ease) both; }
@keyframes abWin { from { transform: translate3d(-100%, 0, 0); } to { transform: none; } }
@keyframes abLogo { from { transform: translate3d(calc(100% + 56px), 0, 0) scale(1.035); } to { transform: none; } }   /* = the window's own width: the logo stays put */
@media (max-width: 767px) {
  .ab-hero .a-phero__media img { object-position: 50% 55%; }
  .ab-lock { margin-bottom: 20px; }
  .ab-lock img { height: 62px; }
  .ab-place { bottom: auto; top: calc(var(--head-h) + 8px); }
  .ab-place p { height: 12px; letter-spacing: .1em; }
}
@media (max-width: 359px) { .ab-place { display: none; } }

/* ------------------------------------------------------------------ 2 the group: two names, one company */
.ab-group { overflow: hidden; }   /* the cards start outside the plate */
.ab-join { position: relative; }
.ab-join__photo img { object-position: 50% 55%; }   /* the towers in the frame's top third, above the plate */
.ab-join__photo.a-media--shade::after { background: linear-gradient(0deg, rgba(8, 10, 12, .88) 0%, rgba(8, 10, 12, .45) 34%, rgba(8, 10, 12, 0) 62%); }
/* the plate spans grid columns 3–10 of the container (1–12 on tablets), so its edges sit on the page's 12-column grid */
.ab-deal { --col: calc((100% - 11 * var(--gap)) / 12); position: absolute; z-index: 2; left: calc(2 * var(--col) + 2 * var(--gap)); right: calc(2 * var(--col) + 2 * var(--gap));
  bottom: clamp(20px, 3.4vw, 52px); display: grid; grid-template-columns: 1fr 1fr; isolation: isolate; }
.ab-deal__plate { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-3); background: rgba(13, 16, 18, .74); border: 1px solid rgba(242, 238, 231, .16);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--sh-plane); }
.ab-deal__seam { grid-row: 1; grid-column: 2; justify-self: start; width: 1px; background: var(--line-dark); }
.ab-name { position: relative; grid-row: 1; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 38px) clamp(22px, 2.6vw, 40px) clamp(20px, 2.2vw, 32px); will-change: transform; }
.ab-name--a { grid-column: 1; } .ab-name--b { grid-column: 2; }
.ab-name__own { position: absolute; inset: 0; z-index: -1; border-radius: var(--r-3); background: rgba(13, 16, 18, .78); border: 1px solid rgba(242, 238, 231, .18);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: var(--sh-plane); opacity: 0; }
.ab-name__k { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-2); }
.ab-name__k::before { content: ''; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.ab-name--b .ab-name__k { color: var(--gold-2); }
.ab-name--b .ab-name__k::before { background: currentColor; }
.ab-name__t { margin-top: clamp(16px, 2vw, 26px); font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.015em; font-weight: 600; color: #fff; text-wrap: balance; }   /* the h3 step of the type scale (§2), as on every page */
.ab-name__p { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--on-dark-2); }
.ab-name__link { align-self: flex-start; margin-top: 14px; font-size: 14px; }
.ab-name__link .icon { width: 14px; height: 14px; }
.ab-deal__foot { grid-row: 2; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px;
  padding: 16px clamp(22px, 2.6vw, 40px) 18px; border-top: 1px solid var(--line-dark); }
.ab-deal__one { font-size: 16px; font-weight: 500; color: var(--on-dark-2); }
.ab-deal__tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; transition: color .3s; }
.ab-deal__tel .icon { width: .7em; height: .7em; color: var(--gold-2); transition: transform .5s var(--ease); }
.ab-deal__tel:hover { color: var(--gold-2); }
.ab-deal__tel:hover .icon { transform: translate(3px, -3px); }
/* start state (about.js scrubs it to the finished plate): two separate cards, apart and tilted, no shared plate yet */
.a-motion .ab-name__own { opacity: 1; }
.a-motion .ab-deal__plate, .a-motion .ab-deal__seam, .a-motion .ab-deal__foot { opacity: 0; }
.a-motion .ab-name--a { transform: translate3d(-44%, 28px, 0) rotate(-5deg); }
.a-motion .ab-name--b { transform: translate3d(44%, -14px, 0) rotate(4deg); }
@media (max-width: 1023px) { .ab-join__photo { aspect-ratio: 16 / 10; } .ab-join__photo img { object-position: 38% 50%; } .ab-deal { left: calc(var(--col) + var(--gap)); right: calc(var(--col) + var(--gap)); } }
@media (max-width: 767px) {
  .ab-join__photo { aspect-ratio: 4 / 5; }
  .ab-join__photo img { object-position: 46% 50%; }
  .ab-deal { left: 12px; right: 12px; bottom: 12px; }
  .ab-name { padding: 18px 16px 16px; }
  .ab-name__t { margin-top: 14px; }
  .ab-name__p { font-size: 13px; }
  .ab-name__k { font-size: 12px; letter-spacing: .1em; gap: 8px; }
  .ab-name__link { font-size: 13px; }
  .ab-deal__foot { padding: 10px 16px 12px; gap: 0 16px; }
  .ab-deal__one { font-size: 14px; }
  .ab-deal__tel { font-size: 22px; }
}

/* ------------------------------------------------------------------ 3 who you'll deal with */
.ab-people__grid { align-items: stretch; }
.ab-people__text { display: flex; flex-direction: column; }
.ab-people__line { margin-top: auto; padding-top: clamp(32px, 4vw, 56px); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.24; letter-spacing: -.02em; font-weight: 500; max-width: 19ch; text-wrap: balance; }
.ab-team { display: grid; gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
.ab-team li { display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; padding: 18px 20px; background: var(--paper-2); border: 1px dashed rgba(18, 20, 23, .22); border-radius: var(--r-2); }
.ab-team .icon { grid-row: span 2; width: 26px; height: 26px; margin-top: 2px; color: var(--gold-ink); }
.ab-team strong { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ab-team p { font-size: 14px; line-height: 1.45; color: var(--muted); }
.ab-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.ab-pair > :nth-child(2) { margin-top: clamp(56px, 8vw, 128px); }
@media (max-width: 1023px) { .ab-people__line { margin-top: 0; padding-top: 20px; } }
@media (max-width: 767px) {
  .ab-people__line { font-size: 20px; padding-top: 16px; }
  .ab-pair > :nth-child(2) { margin-top: 48px; }
  .ab-team li { padding: 14px 16px; grid-template-columns: 30px 1fr; gap: 2px 12px; }
}

/* ------------------------------------------------------------------ 4 check us before you call: the credential deck */
.ab-deck { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--gap); }
.ab-cred { position: relative; display: flex; flex-direction: column; min-height: 280px; padding: 26px 26px 20px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-2); will-change: transform; }
.ab-cred:nth-child(1) { z-index: 4; } .ab-cred:nth-child(2) { z-index: 3; } .ab-cred:nth-child(3) { z-index: 2; } .ab-cred:nth-child(4) { z-index: 1; }   /* the first card tops the stack */
.ab-cred__lift { position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 30px 60px -28px rgba(40, 30, 10, .5), 0 2px 6px rgba(40, 30, 10, .08); opacity: 0; pointer-events: none; }
.ab-cred__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ab-cred__top .icon { width: 30px; height: 30px; color: var(--gold-ink); }
.ab-cred__n { font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--muted-2); }
.ab-cred__k { margin-top: clamp(28px, 3vw, 40px); font: 500 12px/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.ab-cred__v { margin-top: 10px; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; letter-spacing: -.016em; font-weight: 600; font-variant-numeric: tabular-nums; text-wrap: balance; }
.ab-cred__note { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.ab-cred__act { align-self: flex-start; margin-top: auto; }
.ab-cred__act .icon { width: 14px; height: 14px; }
.ab-cred__body { display: flex; flex-direction: column; flex: 1; padding-bottom: 18px; }
.ab-cred__chip { margin-top: 12px; }
.ab-cred__chip .c-chip { margin: 0; }
@media (max-width: 1023px) { .ab-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .ab-cred { min-height: 0; padding: 18px 16px 12px; }
  .ab-cred__top .icon { width: 24px; height: 24px; }
  .ab-cred__k { margin-top: 22px; font-size: 12px; letter-spacing: .08em; }
  .ab-cred__v { font-size: 17px; }
  .ab-cred__note { font-size: 13px; }
  .ab-cred__more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ------------------------------------------------------------------ 5 rather we call you? */
.ab-call__grid { align-items: start; }
.ab-call .a-lead { margin-top: 20px; }
.ab-talk { display: grid; justify-items: start; gap: 6px; margin-top: clamp(32px, 4vw, 52px); padding-top: 26px; border-top: 1px solid var(--line); }
.ab-talk__or { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ab-talk__tel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.1; letter-spacing: -.025em; font-weight: 600; font-variant-numeric: tabular-nums; transition: color .3s; }
.ab-talk__tel .icon { width: .62em; height: .62em; color: var(--gold-ink); transition: transform .5s var(--ease); }
.ab-talk__tel:hover .icon { transform: translate(3px, -3px); }
.ab-talk__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }
.ab-talk__mail { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--muted); text-decoration: underline; text-decoration-color: rgba(18, 20, 23, .25); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.ab-talk__mail:hover { color: var(--text); text-decoration-color: var(--text); }
.ab-call .a-form { width: 100%; }
.ab-call .a-form__row:has(> .a-field:only-child) { grid-template-columns: minmax(0, 1fr); }   /* suburb on its own row: full width */
@media (max-width: 767px) { .ab-talk { margin-top: 24px; padding-top: 20px; } }