/* About: a drifting strip of three tall photos, the story rail, stacking cards, the two badges, the two offices */

/* ---------------------------------------------------------------- opener */
.ab-op { min-height: min(78svh, 840px); display: flex; align-items: center; }
.ab-op > .wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); }
.ab-op__grid { display: grid; gap: clamp(28px, 4.5vw, 80px); align-items: center; }
.ab-op__copy { display: grid; gap: clamp(16px, 1.6vw, 22px); align-content: center; }
.ab-op h1 { font-size: clamp(38px, 4.3vw, 72px); }
.ab-proof { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ab-proof li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: var(--small); color: var(--ink); }
.ab-proof svg { flex: 0 0 22px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--green-deep); stroke: #fff; stroke-width: 3; fill: none; }

.ab-strip { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); height: min(56svh, 480px); }
.ab-ph { position: relative; margin: 0; will-change: transform; }
.ab-ph--a { height: 84%; align-self: end; }
.ab-ph--b { height: 100%; }
.ab-ph--c { height: 78%; align-self: start; margin-top: 7%; }
.ab-ph--b::before { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1.5px solid var(--green-deep); border-radius: var(--radius); opacity: .7; pointer-events: none; }
.ab-ph__frame { position: relative; height: 100%; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); box-shadow: 0 30px 50px -34px rgba(15,36,24,.55); isolation: isolate; }
.ab-ph__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ab-ph--c .ab-ph__frame img { object-position: 30% 50%; }
.ab-ph--b .ab-ph__frame img { object-position: 58% 50%; }
.ab-ph__cap { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 0; padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(255,255,255,.94); color: var(--ink); font-size: 16px; line-height: 1.3; box-shadow: 0 14px 26px -16px rgba(15,36,24,.5); }
.ab-ph__cap em { font-style: normal; }
.ab-ph__cap span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 750; color: var(--green-dark); }
.ab-ph__cap--real { background: var(--ink); color: #fff; }
.ab-ph__cap--real span { color: var(--green); }
.ab-ph__cap--real i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: ab-live 1.8s ease-in-out infinite; }
@keyframes ab-live { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .5; } }

/* ------------------------------------------------------------------ story */
.ab-story__grid { display: grid; gap: clamp(32px, 5vw, 88px); align-items: center; }
.ab-story__copy { display: grid; gap: 18px; align-content: center; }
.ab-story__copy h2 em { font-style: normal; color: var(--green-deep); }
.ab-story__fig { --media-cap: min(70vh, 660px); }
.ab-story__fig .figure__set { width: min(100%, calc(var(--media-cap) * .8)); }
.ab-story__fig .frame { width: 100%; }
.ab-story.tex-photo::before { background: linear-gradient(255deg, #fff 38%, rgba(255,255,255,.9) 68%, rgba(255,255,255,.74)); }
.ab-story__fig .frame { isolation: isolate; }
.ab-story__par { position: absolute; left: 0; right: 0; top: -8%; height: 116%; }
.ab-story__par img { width: 100%; height: 100%; object-fit: cover; }
.ab-story__tag { position: absolute; z-index: 3; right: -18px; bottom: 30px; max-width: 250px; padding: 16px 18px; border-radius: 16px; background: var(--ink); color: rgba(255,255,255,.86); font-size: 16px; line-height: 1.4; box-shadow: 0 24px 40px -20px rgba(15,36,24,.6); animation: ab-bob 5.5s ease-in-out infinite; }
.ab-story__tag b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--green); margin-bottom: 2px; }
@keyframes ab-bob { 50% { transform: translateY(-9px); } }

.ab-rail { position: relative; display: grid; gap: clamp(16px, 1.8vw, 24px); margin-top: 8px; }
.ab-rail__line { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.ab-rail__line i { position: absolute; inset: 0; background: var(--green-deep); transform-origin: top; transform: scaleY(1); }
.ab-ch { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; }
.ab-ch__dot { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--green-deep); color: #fff; box-shadow: 0 0 0 6px #fff; transition: background .5s, color .5s; }
.ab-ch__dot svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-ch h3 { font-size: clamp(20px, 1.5vw, 25px); padding-top: 4px; }
.ab-ch p { color: #33443a; margin-top: 4px; }
html.has-js.motion .ab-ch__dot { background: #fff; color: var(--green-deep); box-shadow: 0 0 0 6px #fff, inset 0 0 0 2px var(--line); }
html.has-js.motion .ab-ch.is-on .ab-ch__dot { background: var(--green-deep); color: #fff; box-shadow: 0 0 0 6px #fff, inset 0 0 0 2px var(--green-deep); }
html.has-js.motion .ab-rail__line i { transform: scaleY(0); }

/* ------------------------------------------------------- stacking cards */
.ab-why { padding-bottom: clamp(72px, 8vw, 128px); }
.ab-stack { position: relative; display: grid; gap: clamp(22px, 3vh, 36px); }
.ab-card { --i: 0; position: relative; display: grid; border-radius: var(--radius); overflow: hidden; background: #fff; color: var(--ink); box-shadow: 0 -20px 50px -30px rgba(0,0,0,.6), 0 40px 70px -40px rgba(0,0,0,.65); transform-origin: 50% 0; will-change: transform; }
.ab-card--paper { background: var(--paper); }
.ab-card--green { background: var(--green-dark); color: #fff; }
.ab-card__copy { position: relative; isolation: isolate; display: grid; gap: 16px; align-content: center; padding: clamp(26px, 3.4vw, 60px); }
.ab-card__copy::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 .5H64M.5 0V64' stroke='%230f2418' stroke-opacity='.07'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(90% 90% at 0% 100%, #000, transparent 75%); mask-image: radial-gradient(90% 90% at 0% 100%, #000, transparent 75%); }
.ab-card--green .ab-card__copy::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 .5H64M.5 0V64' stroke='%23ffffff' stroke-opacity='.1'/%3E%3C/svg%3E"); }
.ab-card__n { font-family: var(--display); font-weight: 650; font-size: 16px; color: var(--muted); }
.ab-card__n b { font-weight: 800; color: var(--green-deep); font-size: 20px; }
.ab-card--green .ab-card__n { color: rgba(255,255,255,.88); }
.ab-card--green .ab-card__n b { color: #c9ecb9; }
.ab-card h3 { font-size: clamp(26px, 2.2vw, 34px); }
.ab-card h3 em { font-style: normal; color: var(--green-deep); }
.ab-card--green h3 em { color: #c9ecb9; }
.ab-card__copy > p:not(.ab-card__n) { color: #33443a; font-size: clamp(17px, 1.2vw, 20px); line-height: 1.55; }
.ab-card--green .ab-card__copy > p:not(.ab-card__n) { color: rgba(255,255,255,.86); }
.ab-card__media { position: relative; min-height: 280px; overflow: hidden; }
.ab-card__img, .ab-papers__img { position: absolute; left: 0; right: 0; top: -8%; height: 116%; }
.ab-card__img img, .ab-papers__img img { width: 100%; height: 100%; object-fit: cover; }

/* card 1: the whole house in one drawing */
.ab-cut { background: #f4e9df; }
.ab-cut__img { position: absolute; inset: 4% 3%; }
.ab-cut__img img { width: 100%; height: 100%; object-fit: contain; }

/* card 2: the order, a line drawing through five icons with a pulse travelling along it */
.ab-order { display: grid; align-items: center; padding: clamp(24px, 3vw, 48px); background: #fff; }
.ab-order::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 .5H48M.5 0V48' stroke='%230f2418' stroke-opacity='.06'/%3E%3C/svg%3E"); }
.ab-order__wrap { position: relative; }
.ab-order__line { position: absolute; left: 10%; right: 10%; top: 33px; height: 3px; border-radius: 3px; background: var(--line); }
.ab-order__line i { position: absolute; inset: 0; border-radius: 3px; background: var(--green-deep); transform-origin: left; transform: scaleX(1); }
.ab-order__line b { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 5px rgba(243,192,76,.3), 0 0 18px 4px rgba(243,192,76,.55); opacity: 0; }
.ab-order__list { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.ab-order__list li { display: grid; justify-items: center; gap: 4px; text-align: center; }
.ab-order__ic { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--green-deep); color: var(--green-deep); margin-bottom: 8px; transition: background .4s, color .4s; }
.ab-order__ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-order__list li.is-lit .ab-order__ic { background: var(--green-deep); color: #fff; }
.ab-order__list b { font-family: var(--display); font-weight: 800; font-size: clamp(17px, 1.3vw, 21px); }
.ab-order__list small { font-size: 16px; color: var(--muted); line-height: 1.3; }

/* card 3: a customer's words */
.ab-said { display: grid; align-content: center; gap: 18px; padding: clamp(26px, 3.4vw, 56px); background: rgba(0,0,0,.16); }
.ab-said__mark { width: 54px; height: 44px; fill: #c9ecb9; opacity: .9; }
.ab-said blockquote { margin: 0; font-family: var(--display); font-weight: 650; font-size: clamp(21px, 1.7vw, 28px); line-height: 1.3; letter-spacing: -.01em; color: #fff; }
.ab-said__who { display: grid; gap: 2px; }
.ab-said__who b { font-family: var(--display); font-size: 18px; }
.ab-said__who span { font-size: 16px; color: rgba(255,255,255,.88); }
.ab-said .link-arrow { color: #c9ecb9; }

/* card 4: the number */
.ab-call { display: grid; align-content: center; gap: 12px; padding: clamp(26px, 3.4vw, 56px); background: var(--ink); color: #fff; }
.ab-call__label { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; color: var(--green); }
.ab-call__label i { width: 10px; height: 10px; border-radius: 50%; background: var(--green); animation: ab-live 1.8s ease-in-out infinite; }
.ab-call__num { display: inline-flex; align-items: center; min-height: 48px; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4vw, 60px); line-height: 1; letter-spacing: -.03em; color: #fff; text-decoration: none; }
.ab-call__num:hover { color: var(--green); }
.ab-call__offices { display: flex; gap: 10px; flex-wrap: wrap; }
.ab-call__offices span { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); font-family: var(--display); font-weight: 650; font-size: 16px; }
.ab-call__wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 90px; opacity: .45; }
.ab-call__wave path { fill: none; stroke: var(--green); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* card 5: the paperwork */
.ab-papers { min-height: 340px; }
.ab-papers::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,20,13,.55), rgba(8,20,13,0) 60%); pointer-events: none; }
.ab-papers__list { position: absolute; z-index: 2; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); display: grid; gap: 8px; padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 24px 40px -20px rgba(0,0,0,.6); }
.ab-papers__list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; line-height: 1.3; }
.ab-papers__list svg { flex: 0 0 24px; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--green-deep); stroke: #fff; stroke-width: 3; fill: none; }

/* --------------------------------------------------------------- badges */
.ab-plates { display: grid; gap: clamp(14px, 1.6vw, 24px); }
.ab-plate { position: relative; display: grid; gap: clamp(20px, 2.4vw, 40px); align-items: center; padding: clamp(24px, 2.8vw, 44px); border-radius: var(--radius); background: #fff; border: 1px solid var(--line); box-shadow: 0 40px 60px -48px rgba(15,36,24,.5); transform-style: preserve-3d; overflow: hidden; }
.ab-plate .scheme__glare { border-radius: var(--radius); background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(122,188,99,.16), transparent 60%); }
.ab-plate:hover .scheme__glare { opacity: 1; }
/* the schemes' own logos, on the white plate */
.ab-seal { position: relative; height: clamp(96px, 8vw, 116px); display: flex; align-items: center; }
.ab-seal img { width: auto; height: 100%; }
/* a slow glint crosses each plate in turn, so the section never sits still */
.ab-plate::after { content: ''; position: absolute; inset: -20% auto -20% -40%; width: 30%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(122,188,99,.13), transparent); transform: skewX(-18deg); animation: ab-glint 9s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 1.6s); }
.ab-plate:nth-child(2) { --n: 1; }
@keyframes ab-glint { 0%, 55% { left: -40%; } 85%, 100% { left: 130%; } }
.ab-plate__body { display: grid; gap: 8px; }
.ab-plate__body h3 { font-size: clamp(23px, 1.8vw, 30px); }
.ab-plate__sub { color: var(--green-dark); font-weight: 600; margin-bottom: 8px; }
.ab-plate .checks span { color: #33443a; }

/* -------------------------------------------------------------- offices */
.ab-offs { position: relative; display: grid; gap: clamp(18px, 2vw, 28px); align-items: center; padding-top: 10px; }
/* the route is drawn in real pixels from pin to pin (about.js), so the coral line runs exactly along the dotted guide */
.ab-offs__route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.ab-offs__route path { fill: none; }
.ab-offs__base { stroke: rgba(15,36,24,.22); stroke-width: 2; stroke-dasharray: 2 9; animation: ab-creep 3s linear infinite; }
.ab-offs__draw { stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }
@keyframes ab-creep { to { stroke-dashoffset: -44; } }
.ab-off { position: relative; z-index: 1; display: grid; gap: 8px; align-content: start; padding: clamp(22px, 2.4vw, 34px); border-radius: var(--radius); background: rgba(255,255,255,.88); border: 1px solid rgba(15,36,24,.08); box-shadow: 0 30px 50px -36px rgba(15,36,24,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.ab-off:hover { transform: translateY(-5px); box-shadow: 0 36px 60px -36px rgba(15,36,24,.55); }
.ab-off__pin { position: absolute; top: -9px; left: clamp(22px, 2.4vw, 34px); width: 18px; height: 18px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 4px #fff; }
.ab-off__pin::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--coral); animation: hotring 1.8s ease-out infinite; }
.ab-off__label { font-family: var(--display); font-weight: 700; color: var(--coral-deep); }
.ab-off h3 { font-size: clamp(26px, 2.1vw, 34px); }
.ab-off address { font-style: normal; color: #33443a; line-height: 1.55; }
.ab-offs__fig { position: relative; z-index: 1; margin: 0; display: grid; gap: 10px; }
.ab-offs__frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--ink-2); box-shadow: 0 40px 60px -40px rgba(15,36,24,.6); }
.ab-offs__par { position: absolute; left: 0; right: 0; top: -9%; height: 118%; }
.ab-offs__par img { width: 100%; height: 100%; object-fit: cover; }
.ab-offs__fig figcaption { text-align: center; font-family: var(--display); font-weight: 650; font-size: 16px; color: var(--muted); }
.ab-offs__links .btn--green { --bg: var(--green-dark); }
.ab-offs__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: clamp(28px, 3vw, 44px); }

/* motion start states (only with JS and motion allowed) */
html.has-js.motion .ab-ph__frame { clip-path: inset(100% 0% 0% 0% round 22px); }
html.has-js.motion .ab-ph__cap, html.has-js.motion .ab-ch, html.has-js.motion .ab-seal, html.has-js.motion [data-ab-fig] { opacity: 0; }

/* ------------------------------------------------------------ responsive */
@media (min-width: 720px) and (max-width: 1099px) {
  .ab-plate { grid-template-columns: 190px 1fr; }
}
@media (min-width: 1100px) {
  .ab-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-plate { align-content: start; align-items: start; }
}
@media (min-width: 1000px) {
  .ab-op__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-story__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  /* the last card scrolls on normally: only the cards beneath it stay stuck, so nothing after the stack ever slides under a card */
  .ab-card:last-child { position: relative; top: auto; }
  .ab-card { position: sticky; top: calc(var(--header-h) + 20px + var(--i) * 16px); height: min(calc(100svh - var(--header-h) - 120px), 560px); grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .ab-card__media { min-height: 0; }
  .ab-offs { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); padding-top: 96px; }
}
@media (max-width: 999px) {
  .ab-op { min-height: 0; }
  .ab-op__copy { order: -1; }
  .ab-strip { height: min(80vw, 380px); }
  .ab-story__tag { right: 10px; bottom: 14px; max-width: 220px; }
  .ab-card__media { min-height: 300px; }
  .ab-offs__route { display: none; }
}
@media (max-width: 719px) {
  .ab-ph__cap { left: 6px; right: 6px; bottom: 6px; padding: 6px 8px; }
  .ab-ph__cap em { display: none; }
  .ab-order__wrap { padding-left: 0; }
  .ab-order__line { left: 33px; right: auto; top: 34px; bottom: 34px; width: 3px; height: auto; }
  .ab-order__line i { transform-origin: top; }
  .ab-order__list { grid-template-columns: 1fr; gap: 12px; }
  .ab-order__list li { grid-template-columns: 68px 1fr; grid-template-rows: auto auto; justify-items: start; text-align: left; column-gap: 16px; row-gap: 0; align-items: center; }
  .ab-order__ic { grid-row: span 2; margin-bottom: 0; }
  .ab-order__list b { align-self: end; }
  .ab-order__list small { align-self: start; }
  .ab-plate { justify-items: start; }
  .ab-seal { height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-ph__cap--real i, .ab-call__label i, .ab-story__tag, .ab-plate::after, .ab-offs__base, .ab-off__pin::after { animation: none; }
  html.has-js.motion .ab-ch__dot { background: var(--green-deep); color: #fff; }
  html.has-js.motion .ab-rail__line i { transform: none; }
  html.has-js.motion .ab-ph__frame { clip-path: none; }
  html.has-js.motion .ab-ph__cap, html.has-js.motion .ab-ch, html.has-js.motion .ab-seal, html.has-js.motion [data-ab-fig] { opacity: 1; }
}

/* the end of the card stack: the room the last card needs to stick carries a closing line */
.ab-stack__end { display: grid; justify-items: center; gap: 18px; text-align: center; margin-top: clamp(48px, 6vw, 88px); }
.ab-stack__close { font-family: var(--display); font-weight: 750; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.15; color: #fff; }
.ab-stack__close span { display: block; color: var(--green); }
.ab-stack__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 999px) { .ab-stack__end { margin-top: 36px; } }