/* Commercial Renovation — v3 SHARED SYSTEM (docs/DESIGN-V3.md). Loaded first on every v3 page ($page['v3'] = true in
   includes/head.php), before the page's own stylesheet. Extracted verbatim from the approved v3 homepage, plus the shared
   components the other pages need (sections, grid, page hero, media frames, crumbs, preview chips).
   Motion start states only apply under html.a-motion (set before first paint by the gate in head.php); html.a-noanim
   (?noanim=1, reduced motion), html.no-js and html.a-late (motion script late) always get the designed static layout.
   Contents: fonts · tokens · base · type · buttons · header & menu · section heads · layout · page hero · media · form ·
   footer · call bar · reveal start states · Lenis · preview chips & grid overlay · keyframes · reduced motion */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 100% 125%; font-display: swap;
  src: url(/assets/fonts/archivo-v25-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgsAXHNk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Arial scaled to Archivo's metrics, so text keeps its shape while the web font arrives (no layout shift) */
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('ArialMT'), local('Roboto'); font-weight: 400 500; font-stretch: 50% 105%; size-adjust: 99.5%; ascent-override: 88.2%; descent-override: 21.1%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'); font-weight: 600 900; font-stretch: 50% 105%; size-adjust: 97.5%; ascent-override: 90%; descent-override: 21.4%; line-gap-override: 0%; }
/* (the stretched bold fallback, for the 106–108 % titles, is set a touch LARGER than Archivo, about 2–4 % on a headline: when the
   web font swaps in, a headline never grows, so the browser keeps its first paint as the page's largest paint instead of logging
   a new, later one. Only a touch: at 115.5 % it ran 11–13 % wide and titles took an extra line until the font arrived, a layout
   shift. Vertical metrics are the same in every face (ascent 87.8 %, descent 21 % after size-adjust), and the title and lead
   max-widths below are in em, not ch, because Arial's "0" is 3–4 % narrower than Archivo's: a ch box shrank in the fallback.) */
@font-face { font-family: 'Archivo Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Roboto Bold'), local('Roboto-Bold'); font-weight: 400 900; font-stretch: 105.1% 118%; size-adjust: 107%; ascent-override: 82%; descent-override: 19.6%; line-gap-override: 0%; }

/* ------------------------------------------------------------------ tokens */
:root {
  --ink: #0D1012; --ink-2: #14181B; --ink-3: #1C2125;
  --paper: #ECE8E1; --paper-2: #F4F1EC; --white: #FCFBF8;
  --text: #121417; --muted: #585E64; --muted-2: #8A8F94;
  --on-dark: #F2EEE7; --on-dark-2: rgba(242, 238, 231, .7);
  --gold: #D9A72E; --gold-2: #E8BE57; --gold-ink: #7A5A10;
  --line: rgba(18, 20, 23, .13); --line-dark: rgba(242, 238, 231, .14);
  --f: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gut: clamp(20px, 4vw, 56px);
  --max: 1360px;
  --head-h: 80px;
  --sec: clamp(80px, 8.5vw, 128px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 3px;
}
@media (max-width: 767px) { :root { --head-h: 64px; --sec: 72px; } }
/* scale tokens (v3 system). Values match the homepage's literal values, so pages built on them line up with it. */
:root {
  --fs-display: clamp(44px, 7vw, 122px);   /* the home hero headline only */
  --fs-h1: clamp(40px, 5.4vw, 88px);       /* page heroes (one H1 per page) */
  --fs-h2: clamp(36px, 4.4vw, 68px);       /* section titles (.a-h2) */
  --fs-h3: clamp(21px, 1.7vw, 26px);       /* card and item titles (.a-h3) */
  --fs-lead: clamp(17px, 1.3vw, 20px);     /* the one supporting line under a title (.a-lead) */
  --fs-body: 17px; --fs-sm: 15px; --fs-xs: 13px; --fs-label: 12px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gap: clamp(14px, 1.5vw, 22px);         /* between cards / frames in a row */
  --gap-lg: clamp(40px, 6vw, 104px);       /* between the two halves of a split */
  --head-gap: clamp(36px, 4.4vw, 64px);    /* section head → its content */
  --r-2: 4px; --r-3: 6px; --r-round: 999px;
  --sh-card: 0 40px 90px -50px rgba(40, 30, 10, .35);
  --sh-float: 0 30px 60px -20px rgba(0, 0, 0, .6);
  --sh-lift: 0 14px 34px rgba(0, 0, 0, .38);
  --sh-plane: 0 40px 70px -24px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .12);
  --stone: #E6E0D6; --photo-bg: #D8D2C8;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--head-h); background: var(--ink); }
html.a-noanim, html.a-noanim * { scroll-behavior: auto !important; }
body { margin: 0; background: var(--ink); color: var(--text); font: 400 17px/1.55 var(--f); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; }
main:focus { outline: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.icon { width: 1em; height: 1em; flex: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.a-skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 12px 16px; font-weight: 600; border-radius: var(--r); }
.a-skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.a-container { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
/* JS-loaded images. Photos (home_pic) show a blurred copy of themselves (img[data-lqip] background) until the real file has
   arrived, so a frame is never empty; the model frames and the Southbank poster fade in. No-JS uses the <noscript> copy. */
[data-lazy] img:not([data-lqip]), img[data-lazy-img] { transition: opacity .5s ease; }
[data-lazy]:not(.is-in) img:not([data-lqip]), img[data-lazy-img]:not(.is-in) { opacity: 0; }
.no-js [data-lazy], .no-js img[data-lazy-img] { display: none; }
.a-noanim [data-lazy] img, .a-noanim img[data-lazy-img] { transition: none; }

/* ------------------------------------------------------------------ type */
.a-h2 { font-size: clamp(36px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -.028em; font-weight: 600; font-stretch: 106%; max-width: 9.28em; text-wrap: balance; }   /* 9.28em = 15ch of Archivo 600 at 106 % */
.a-label { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.a-label::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.a-label__n { order: -1; color: var(--gold-ink); }
.a-lead { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--muted); max-width: 21.762em; }   /* = 38ch of Archivo 400 */
.a-w { display: inline-block; vertical-align: top; perspective: 600px; }
.a-w > span { display: inline-block; transform-origin: 50% 100%; }
.a-line { display: block; }
.a-line > span { display: inline-block; }
.a-chip { position: absolute; margin: 0; padding: 7px 11px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(10, 12, 14, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 2px; white-space: nowrap; }
/* v3 system type (not used by the homepage itself) */
.a-h1 { font-size: var(--fs-h1); line-height: .98; letter-spacing: -.034em; font-weight: 600; font-stretch: 108%; max-width: 10.132em; text-wrap: balance; }   /* = 16ch of Archivo 600 at 108 % */
.a-h1 em, .a-h2 em { font-style: normal; color: var(--gold-ink); }
.a-h3 { font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.015em; font-weight: 600; text-wrap: balance; }
.a-body { font-size: var(--fs-body); line-height: 1.6; color: var(--muted); max-width: 34.361em; text-wrap: pretty; }   /* = 60ch of Archivo 400 */
.a-small { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.a-mono { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.a-onum { font-weight: 700; font-stretch: 112%; letter-spacing: -.045em; line-height: .86; color: transparent; -webkit-text-stroke: 1.2px var(--muted-2); font-variant-numeric: tabular-nums; }
/* outline numeral: a stroke only (the fill stays transparent); gold stroke when active (.is-on). :where() keeps these at the
   base's specificity, so a page's own .x__n { -webkit-text-stroke-color … } still wins. */
:where(.a-ink, .a-dark) .a-onum { -webkit-text-stroke-color: var(--on-dark-2); }
.a-onum.is-on { -webkit-text-stroke-color: var(--gold-ink); } :where(.a-ink, .a-dark) .a-onum.is-on { -webkit-text-stroke-color: var(--gold-2); }
/* surfaces: .a-ink (dark), .a-paper (warm light), .a-white, .a-stone. .a-dark flips text on a photo or any dark ground. */
.a-ink { background: var(--ink); } .a-paper { background: var(--paper); color: var(--text); } .a-white { background: var(--white); color: var(--text); } .a-stone { background: var(--stone); color: var(--text); }
.a-ink, .a-dark { color: var(--on-dark); }
:is(.a-ink, .a-dark) .a-label { color: var(--on-dark-2); }
:is(.a-ink, .a-dark) .a-label__n, :is(.a-ink, .a-dark) :is(.a-h1, .a-h2) em { color: var(--gold-2); }
:is(.a-ink, .a-dark) :is(.a-lead, .a-body, .a-small) { color: var(--on-dark-2); }

/* ------------------------------------------------------------------ buttons */
.a-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 22px;
  font: 600 16px/1 var(--f); letter-spacing: .005em; border-radius: var(--r); white-space: nowrap; overflow: hidden;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease); }
.a-btn .icon { width: 18px; height: 18px; transition: transform .45s var(--ease); }
.a-btn:hover .icon--arrow { transform: translateX(4px); }
.a-btn--lg { height: 60px; padding: 0 28px; font-size: 17px; }
.a-btn--sm { height: 44px; padding: 0 18px; font-size: 14px; }
.a-btn--call, .a-btn--gold { background: var(--gold); color: var(--ink); }
.a-btn--call:hover, .a-btn--gold:hover { background: var(--gold-2); }
.a-btn--call::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); }
.a-btn--ghost { border: 1px solid currentColor; }
.a-btn--ghost-light { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .07); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.a-btn--ghost-light:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.a-btn.is-busy { opacity: .7; pointer-events: none; }
.a-motion .a-btn--shine::after { animation: aShine 5.5s 2.4s ease-in-out infinite; }   /* the one looping CTA effect: a page's first Call button only */
.a-btn--ink { background: var(--ink); color: #fff; }
.a-btn--ink:hover { background: var(--ink-3); }

/* ------------------------------------------------------------------ header */
.a-head { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--head-h); color: #fff; transition: background-color .45s, box-shadow .45s, -webkit-backdrop-filter .45s, backdrop-filter .45s; }
.a-head::before { content: ''; position: absolute; inset: 0 0 -40px; background: linear-gradient(180deg, rgba(8, 10, 12, .6), rgba(8, 10, 12, 0)); pointer-events: none; transition: opacity .45s; }
.a-head.is-solid, .a-head.is-open { background: rgba(12, 15, 17, .9); -webkit-backdrop-filter: saturate(1.3) blur(16px); backdrop-filter: saturate(1.3) blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, .07); }
.a-head.is-solid::before, .a-head.is-open::before { opacity: 0; }
body:has(.a-phero--paper) .a-head::before { bottom: 0; }   /* a paper hero: the fade stays inside its ink band (no grey wash over the paper) */
.a-head__in { position: relative; height: 100%; display: flex; align-items: center; gap: 36px; }
.a-head__logo { display: flex; align-items: center; min-height: 44px; flex: none; }
.a-head__logo img { height: 56px; width: auto; }
.a-head__nav { display: flex; align-items: center; gap: 30px; margin-left: auto; font-size: 15px; font-weight: 500; }
.a-head__link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: rgba(255, 255, 255, .84); transition: color .25s; }
.a-head__link:hover { color: var(--gold-2); }
.a-head__sub { position: relative; display: flex; align-items: center; gap: 2px; }
.a-head__caret { width: 44px; height: 44px; margin: 0 -14px 0 -4px; display: grid; place-items: center; color: rgba(255, 255, 255, .7); }
.a-head__caret .icon { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.a-head__sub.is-open .a-head__caret .icon { transform: rotate(180deg); }
.a-head__panel { position: absolute; left: -22px; top: calc(100% + 14px); width: 360px; padding: 10px; display: grid; gap: 2px; background: rgba(14, 17, 19, .97);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .35s var(--ease), visibility 0s .35s; }
.a-head__panel::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.a-head__sub.is-open .a-head__panel, .a-head__sub:focus-within .a-head__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease); }
@media (hover: hover) { .a-head__sub:hover .a-head__panel { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .35s var(--ease); } }
.a-head__row { display: flex; align-items: center; gap: 14px; padding: 12px 12px; border-radius: 4px; transition: background-color .2s; }
.a-head__row:hover { background: rgba(255, 255, 255, .06); }
.a-head__row .icon { width: 22px; height: 22px; color: var(--gold); }
.a-head__row strong { display: block; font-weight: 600; font-size: 15px; color: #fff; }
.a-head__row small { display: block; font-size: 13px; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.a-head__all { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 12px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; font-weight: 600; color: var(--gold-2); }
.a-head__all .icon { width: 15px; height: 15px; }
.a-head__act { display: flex; align-items: center; gap: 20px; }
.a-head__tel { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; font-weight: 600; font-size: 16px; letter-spacing: .01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-head__tel .icon { width: 16px; height: 16px; color: var(--gold); }
.a-head__tel:hover { color: var(--gold-2); }
.a-head__menu { display: none; width: 44px; height: 44px; position: relative; flex: none; }
.a-head__bars, .a-head__bars::before, .a-head__bars::after { position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease), opacity .2s; }
.a-head__bars { top: 21px; } .a-head__bars::before { content: ''; left: 0; top: -7px; } .a-head__bars::after { content: ''; left: 0; top: 7px; }
.is-open .a-head__bars { background: transparent; } .is-open .a-head__bars::before { transform: translateY(7px) rotate(45deg); } .is-open .a-head__bars::after { transform: translateY(-7px) rotate(-45deg); }
.a-menu { position: fixed; inset: var(--head-h) 0 0; z-index: 49; background: var(--ink); color: #fff; padding: 20px 0 calc(28px + env(safe-area-inset-bottom)); overflow: auto; display: flex; flex-direction: column; }
.a-menu[hidden] { display: none; }
.a-menu__nav { display: grid; }
.a-menu__nav > a { padding: 16px 0; border-bottom: 1px solid var(--line-dark); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.a-menu__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 16px; padding: 10px 0 14px; border-bottom: 1px solid var(--line-dark); }
.a-menu__sub a { display: flex; align-items: center; min-height: 44px; font-size: 16px; color: var(--on-dark-2); }
.a-menu__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 16px; justify-items: start; }
.a-menu__call { width: 100%; }
.a-menu__mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-2); font-size: 15px; }
@media (max-width: 1100px) { .a-head__nav { display: none; } .a-head__act { margin-left: auto; } .a-head__menu { display: block; } }
@media (max-width: 767px) {
  .a-head__in { gap: 12px; }
  .a-head__logo img { height: 42px; }
  .a-head__act { gap: 4px; }
  .a-head__tel { font-size: 15px; gap: 8px; padding: 10px 4px; }
  .a-head__quote { display: none; }
}
@media (max-width: 359px) { .a-head__tel .icon { display: none; } .a-head__logo img { height: 36px; } }
/* current page (sub-pages; the homepage has no current item) */
.a-head__link[aria-current], .a-head__link.is-active { color: #fff; box-shadow: inset 0 -1.5px 0 var(--gold); }
.a-head__row[aria-current] { background: rgba(255, 255, 255, .06); }
.a-menu__nav a[aria-current] { color: var(--gold-2); }
/* phone held sideways: a shorter header (the homepage adds its hero rules to the same query) */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --head-h: 60px; }
  .a-head__logo img { height: 40px; }
}

/* ------------------------------------------------------------------ section heads */
.a-head2 { margin-bottom: clamp(36px, 4.4vw, 64px); }
.a-head2__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.a-more { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; white-space: nowrap; }
.a-more::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: currentColor; transition: background-color .3s; }
.a-more .icon { width: 16px; height: 16px; transition: transform .45s var(--ease); }
.a-more:hover .icon { transform: translateX(4px); }
:is(.a-ink, .a-dark) .a-more { color: var(--on-dark); }
:is(.a-ink, .a-dark) .a-more::after { background: rgba(242, 238, 231, .35); }
:is(.a-ink, .a-dark) .a-more:hover { color: var(--gold-2); }
:is(.a-ink, .a-dark) .a-more:hover::after { background: var(--gold-2); }

/* ------------------------------------------------------------------ layout (v3 system) */
/* A section: one job, one surface. Vertical rhythm is --sec (80–128 px; 72 px on phones); --tight is .75 of it. */
.a-sec { position: relative; padding: var(--sec) 0; }
.a-sec--tight { padding: calc(var(--sec) * .75) 0; }
.a-sec--flush-top { padding-top: 0; }
/* the 12-column grid (container width, --gap gutters). Children span 12 unless told; collapse to one column under 768 px. */
.a-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s7); }
.a-grid > * { grid-column: span 12; min-width: 0; }
.a-grid > .a-c3 { grid-column: span 3; } .a-grid > .a-c4 { grid-column: span 4; } .a-grid > .a-c5 { grid-column: span 5; }
.a-grid > .a-c6 { grid-column: span 6; } .a-grid > .a-c7 { grid-column: span 7; } .a-grid > .a-c8 { grid-column: span 8; }
.a-grid > .a-o1 { grid-column-start: 2; } .a-grid > .a-o7 { grid-column-start: 7; } .a-grid > .a-o8 { grid-column-start: 8; }
/* the homepage's two-part split (5 : 7, as in Where we work / Start here) */
.a-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--gap-lg); align-items: start; }
.a-split--rev { grid-template-columns: 7fr 5fr; }
.a-split--even { grid-template-columns: 1fr 1fr; }
.a-split--center { align-items: center; }
/* card rows */
.a-row { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gap); }
.a-row--2 { --n: 2; } .a-row--4 { --n: 4; }
@media (max-width: 1023px) {
  .a-split, .a-split--rev, .a-split--even { grid-template-columns: 1fr; }
  .a-row--4 { --n: 2; }
  .a-grid > .a-c3 { grid-column: span 6; } .a-grid > :is(.a-c4, .a-c5, .a-c7, .a-c8) { grid-column: span 12; }
  .a-grid > :is(.a-o1, .a-o7, .a-o8) { grid-column-start: auto; }
}
@media (max-width: 767px) {
  .a-grid { row-gap: var(--s6); }
  .a-grid > * { grid-column: span 12 !important; }
  .a-row { --n: 1; }
  .a-split { gap: 32px; }
}
/* phone rail: a row that scrolls sideways on phones (snap), like the homepage's service cards */
@media (max-width: 767px) {
  .a-rail { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin: 0 calc(-1 * var(--gut)); padding: 4px var(--gut) 8px; scroll-padding: 0 var(--gut); scrollbar-width: none; }
  .a-rail::-webkit-scrollbar { display: none; }
  .a-rail > * { scroll-snap-align: start; }
}

/* sticky sequence (V3.fx.sequence in core.js): the section is one screen + --run; the stage sticks for the run (no pin,
   nothing re-laid out). Without motion (.a-noanim / .no-js / .a-late) it is a normal section: give it a static layout. */
.a-seq { position: relative; }
.a-motion .a-seq { height: calc(100vh + var(--run, 0px)); height: calc(max(100svh, 560px) + var(--run, 0px)); }
.a-motion .a-seq__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
@media (orientation: landscape) and (max-height: 500px) {   /* phones held sideways: the stage is exactly one (short) screen */
  .a-motion .a-seq { height: calc(100svh + var(--run, 0px)); }
  .a-motion .a-seq__stage { min-height: 0; }
}

/* breadcrumbs (visible on sub-pages; the BreadcrumbList JSON-LD comes from head.php) */
.a-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.a-crumbs li { display: flex; align-items: center; gap: 10px; }
.a-crumbs li:not(:last-child)::after { content: '/'; opacity: .5; }   /* trails its crumb: a wrapped second line never starts with a slash */
.a-crumbs a { display: inline-block; padding: 16px 2px; margin: -16px -2px; transition: color .25s; }
.a-crumbs a:hover { color: var(--gold-ink); }
.a-crumbs [aria-current] { color: var(--text); }
:is(.a-ink, .a-dark) .a-crumbs { color: rgba(255, 255, 255, .78); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
:is(.a-ink, .a-dark) .a-crumbs a:hover { color: var(--gold-2); }
:is(.a-ink, .a-dark) .a-crumbs [aria-current] { color: #fff; }
/* small phones: every page's crumbs stay on one line (the longest, "Home / Services / Commercial renovations", needs 309 px at
   360); ol.a-crumbs outranks a page's own crumb spacing */
@media (max-width: 380px) {
  .a-crumbs-nav > ol.a-crumbs { gap: 0 7px; letter-spacing: .05em; }
  .a-crumbs-nav > ol.a-crumbs li { gap: 7px; }
}

/* ------------------------------------------------------------------ page hero (sub-pages) */
/* The shell every sub-page opens with: full-bleed photo (or video poster), the homepage's grade, crumbs under the header,
   the H1 set on the homepage hero's baseline (same gutter, same bottom padding) and at most one lead + the Call button.
   Each page adds its own motion signature on top (DESIGN-V3 §4). --paper: a quiet text-only hero (privacy, 404, thank-you). */
.a-phero { position: relative; display: flex; flex-direction: column; min-height: 560px; height: 86vh; height: 86svh; max-height: 940px; overflow: hidden; background: var(--ink); color: #fff; isolation: isolate; }
.a-phero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.a-phero__media img, .a-phero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-phero__media::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 9, 12, .55) 0%, rgba(7, 9, 12, 0) 22%),
    radial-gradient(125% 100% at 0% 100%, rgba(7, 9, 12, .92) 0%, rgba(7, 9, 12, .8) 32%, rgba(7, 9, 12, .45) 58%, rgba(7, 9, 12, 0) 80%),
    linear-gradient(0deg, rgba(7, 9, 12, .5) 0%, rgba(7, 9, 12, 0) 36%); }
.a-phero__top { position: relative; z-index: 1; padding-top: calc(var(--head-h) + 18px); }
.a-phero__in { position: relative; z-index: 1; margin-top: auto; padding-bottom: clamp(52px, 9vh, 104px); }
.a-phero .a-h1 { margin-bottom: clamp(24px, 3.4vh, 40px); text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.a-phero .a-lead { color: rgba(255, 255, 255, .84); margin: calc(-1 * clamp(8px, 1.4vh, 16px)) 0 clamp(24px, 3.4vh, 36px); }
.a-phero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
/* the photo hero is a dark surface: labels, crumbs and the tinted word flip like .a-ink */
.a-phero:not(.a-phero--paper) :is(.a-h1, .a-h2) em, .a-phero:not(.a-phero--paper) .a-label__n { color: var(--gold-2); }
.a-phero:not(.a-phero--paper) .a-label { color: var(--on-dark-2); }
.a-phero:not(.a-phero--paper) .a-crumbs { color: rgba(255, 255, 255, .78); text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.a-phero:not(.a-phero--paper) .a-crumbs a:hover { color: var(--gold-2); }
.a-phero:not(.a-phero--paper) .a-crumbs [aria-current] { color: #fff; }
/* the entrance (CSS only, from first paint, like the homepage hero): the photo settles, the H1 lines rise, lead + CTAs follow.
   Nothing waits for a script, so the H1 and the LCP photo are painted at once. A page's signature motion goes elsewhere. */
.a-motion .a-phero__media img, .a-motion .a-phero__media video { animation: aSettleIn 2.2s cubic-bezier(.2, .7, .2, 1) both; }
.a-motion .a-phero .a-h1 .a-line > span { animation: aRise .95s var(--ease) both; }
.a-motion .a-phero .a-h1 .a-line:nth-child(2) > span { animation-delay: .06s; }
.a-motion .a-phero .a-h1 .a-line:nth-child(3) > span { animation-delay: .12s; }
.a-motion .a-phero .a-lead, .a-motion .a-phero__ctas { animation: aUp .7s .24s var(--ease) both; }
.a-motion .a-phero__top { animation: aUp .9s .42s var(--ease) both; }
.a-phero--paper { height: auto; min-height: 0; max-height: none; background: var(--paper); color: var(--text); }
.a-phero--paper::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: var(--head-h); background: var(--ink); }   /* the header's white nav and logo stay on dark */
.a-phero--paper .a-phero__top { padding-top: calc(var(--head-h) + 18px); }
.a-phero--paper .a-phero__in { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(48px, 6vw, 88px); }
.a-phero--paper .a-h1 { text-shadow: none; }
.a-phero--paper .a-lead { color: var(--muted); }
@media (max-width: 767px) {
  .a-phero { height: 84svh; min-height: 540px; }
  .a-phero__media::after { background: linear-gradient(180deg, rgba(7, 9, 12, .55) 0%, rgba(7, 9, 12, 0) 17%),
    linear-gradient(0deg, rgba(7, 9, 12, .97) 0%, rgba(7, 9, 12, .9) 30%, rgba(7, 9, 12, .55) 48%, rgba(7, 9, 12, .1) 62%, rgba(7, 9, 12, 0) 70%); }
  .a-phero__top { padding-top: calc(var(--head-h) + 8px); }
  .a-phero .a-h1 { font-stretch: 100%; letter-spacing: -.03em; }
  :where(.a-phero) .a-h1 { max-width: 9.2em; }   /* = 16ch of Archivo 600 at 100 % (the specificity of .a-h1: a page's own H1 width still wins) */
  .a-phero__in { padding-bottom: 30px; }
  .a-phero__ctas { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .a-phero__ctas .a-btn { height: 56px; width: 100%; }
  .a-phero--paper { height: auto; min-height: 0; }   /* a text-only hero is as tall as its content */
}
/* phones held sideways: the photo hero is one short screen and the H1, lead and Call all sit in it (as on the homepage) */
@media (orientation: landscape) and (max-height: 500px) {
  .a-phero:not(.a-phero--paper) { height: auto; min-height: 100vh; min-height: 100svh; max-height: none; }
  .a-phero__top { padding-top: calc(var(--head-h) + 8px); }
  .a-phero .a-h1 { font-size: clamp(30px, 10.5vh, 44px); font-stretch: 100%; margin-bottom: 12px; }
  :where(.a-phero) .a-h1 { max-width: 9.2em; }
  .a-phero .a-lead { margin: 0 0 14px; font-size: 15px; max-width: 32.071em; }   /* = 56ch of Archivo 400 */
  .a-phero__in { padding-bottom: 18px; }
  .a-phero__ctas { display: flex; flex-wrap: nowrap; gap: 10px; }
  .a-phero__ctas .a-btn { width: auto; height: 48px; padding: 0 20px; font-size: 16px; }
}

/* ------------------------------------------------------------------ media frames (v3 system) */
/* <figure class="a-media a-media--land">…v3_pic()…<figcaption class="a-chip">Café</figcaption></figure> (kit.php v3_media).
   Captions name the TYPE of space or the PLACE only (never a client, a suburb + year, or "our project"). */
.a-media { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--ink-3); isolation: isolate; }
.a-paper .a-media, .a-white .a-media, .a-stone .a-media { background: var(--photo-bg); }
.a-media--pano { aspect-ratio: 21 / 9; } .a-media--wide { aspect-ratio: 16 / 9; } .a-media--land { aspect-ratio: 3 / 2; }
.a-media--sq { aspect-ratio: 1; } .a-media--port { aspect-ratio: 4 / 5; } .a-media--tall { aspect-ratio: 3 / 4; }
.a-media__img { position: absolute; inset: 0; display: block; }
.a-media__img[data-parallax] { inset: -8% 0; will-change: transform; }
.a-motion .a-media[data-reveal="mask"] > .a-media__img:not([data-parallax]) { inset: -6% 0; }   /* room for the mask's ±5 % drift */
.a-media__img img { width: 100%; height: 100%; object-fit: cover; }
.a-media--shade::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8, 10, 12, .9) 0%, rgba(8, 10, 12, .38) 40%, rgba(8, 10, 12, 0) 64%); }
.a-media > .a-chip { left: 14px; bottom: 14px; z-index: 1; }
.a-media > .a-chip--tl { top: 14px; bottom: auto; }
/* caption under a frame: mono, muted, numbered like the homepage gallery */
.a-figcap { display: flex; gap: 12px; margin-top: 12px; font: 500 12px/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.a-figcap b { font-weight: 500; color: var(--gold-ink); }
:is(.a-ink, .a-dark) .a-figcap { color: var(--on-dark-2); } :is(.a-ink, .a-dark) .a-figcap b { color: var(--gold-2); }

/* ------------------------------------------------------------------ enquiry form (v3_quote_form() in includes/v3/kit.php) */
.a-form { position: relative; display: grid; gap: 20px; padding: clamp(24px, 3vw, 44px); color: var(--text); background: var(--white); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 40px 90px -50px rgba(40, 30, 10, .35); }
.a-form__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.a-form__title { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.a-form__meta { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); background: rgba(217, 167, 46, .14); border-radius: 2px; white-space: nowrap; }
.a-form__meta .icon { width: 14px; height: 14px; }
@media (max-width: 380px) { .a-form__head { flex-direction: column; align-items: flex-start; gap: 10px; } }   /* narrow phones: badge under the title */
.a-form__alert { padding: 14px 16px; background: #FBEDE7; color: #7A2A12; border-radius: var(--r); font-size: 15px; }
.a-form__spaces { border: 0; padding: 0; margin: 0; min-width: 0; }
.a-form__legend { padding: 0; margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.a-form__chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.a-chipbox { position: relative; display: flex; }   /* the box fills its grid row: every option in a row is the same height */
.a-chipbox input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.a-chipbox > span { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 92px; padding: 12px 10px; border: 1px solid rgba(18, 20, 23, .18); border-radius: var(--r); font-size: 15px; font-weight: 500; line-height: 1.25; text-align: center; transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s; cursor: pointer; }
.a-chipbox .icon { width: 24px; height: 24px; color: var(--gold-ink); transition: color .25s; }
.a-chipbox:hover > span { border-color: rgba(18, 20, 23, .45); }
.a-chipbox input:checked + span { background: var(--text); border-color: var(--text); color: #fff; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .6); }
.a-chipbox input:checked + span .icon { color: var(--gold-2); }
.a-chipbox input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.a-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.a-field { display: grid; gap: 8px; }
.a-field__l { font-size: 14px; font-weight: 600; }
.a-field__l i { font-style: normal; font-weight: 400; color: #66625B; margin-left: 4px; }
.a-field input, .a-field textarea { width: 100%; height: 54px; padding: 0 15px; font: 400 16px/1.4 var(--f); color: var(--text); background: #fff; border: 1px solid rgba(18, 20, 23, .22); border-radius: var(--r); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.a-field textarea { height: auto; min-height: 84px; padding: 14px 15px; resize: vertical; }
.a-field input:focus, .a-field textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(217, 167, 46, .35); }
.a-field [aria-invalid="true"], .a-chipbox input[aria-invalid="true"] + span { border-color: #B8472A; }
.a-form__err { display: block; color: #A63B1F; font-size: 13px; line-height: 1.3; }
.a-form__err:empty { display: none; }
.a-form__spaces .a-form__err { margin-top: 8px; }
.a-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.a-form__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-top: 2px; }
.a-form__fine { font-size: 13px; color: var(--muted); }
.a-form__fine a { display: inline-block; padding: 14px 4px; margin: -14px -4px; text-decoration: underline; text-underline-offset: 3px; }
.a-form__status { font-size: 15px; color: var(--muted); }
.a-form__status:empty { display: none; }
@media (max-width: 767px) {
  .a-form { padding: 20px 18px; gap: 18px; }
  .a-form__chips { grid-template-columns: 1fr 1fr; }
  .a-chipbox > span { min-height: 80px; font-size: 15px; }
  .a-form__row { gap: 12px; }
  .a-field__l { font-size: 13px; }
  .a-field__l i { display: block; margin: 0; font-size: 12px; line-height: 1; }
  .a-form__row .a-field { align-content: end; }
  .a-form__send { width: 100%; }
  .a-btn--lg { height: 56px; }
}
@media (max-width: 479px) {
  .a-form__row { grid-template-columns: 1fr; gap: 18px; }
  .a-field__l i { display: inline; margin-left: 4px; font-size: 13px; line-height: inherit; }
}
/* text-only chip groups (v3_quote_form 'extra': timing, size, scope, occupied …) */
.a-form__chips--text { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
/* exactly four text chips: 4 in a row when each gets ≥ 120 px, otherwise 2 × 2 (never 3 + 1) */
.a-form__chips--text:where(:has(> .a-chipbox:nth-child(4):last-child)) {   /* :where = base specificity: a page's own column rule still wins */
   grid-template-columns: repeat(auto-fit, minmax(max(calc((100% - 24px) / 4), clamp(0px, (504px - 100%) * 1000, calc((100% - 8px) / 2))), 1fr)); }
.a-chipbox.a-chipbox--text > span { flex-direction: row; min-height: 50px; padding: 10px 12px; font-size: 15px; }
.a-form__chips--days { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.a-form__chips--days .a-chipbox > span { padding: 10px 4px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ footer */
.a-foot { background: #090B0D; color: var(--on-dark-2); padding: clamp(60px, 7vw, 96px) 0 36px; font-size: 15px; }
.a-foot__top { display: grid; grid-template-columns: auto 1fr auto; gap: 40px 64px; align-items: start; padding-bottom: 44px; border-bottom: 1px solid var(--line-dark); }
.a-foot__logo img { height: clamp(70px, 7vw, 96px); width: auto; }
.a-foot__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: 0 56px; justify-content: center; margin-top: -8px; }
.a-foot__nav a { display: flex; align-items: center; min-height: 44px; color: rgba(242, 238, 231, .8); transition: color .25s; }
.a-foot__nav a:hover { color: var(--gold-2); }
.a-foot__contact { display: grid; justify-items: end; gap: 0; padding-top: 2px; }
.a-foot__contact a { display: inline-flex; align-items: center; min-height: 44px; }
.a-foot__kicker { margin-bottom: 2px; }
.a-foot__kicker { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 238, 231, .5); }
.a-foot__tel { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.015em; color: #fff; font-variant-numeric: tabular-nums; }
.a-foot__contact a:hover { color: var(--gold-2); }
.a-foot__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; padding-top: 24px; font-size: 13px; color: rgba(242, 238, 231, .52); }
.a-foot__base a { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
.a-foot__base a:hover { color: #fff; }
@media (max-width: 1023px) { .a-foot__top { grid-template-columns: 1fr 1fr; } .a-foot__logo { grid-column: 1 / -1; } .a-foot__nav { justify-content: start; } }
@media (max-width: 767px) {
  .a-foot { padding-top: 52px; padding-bottom: 96px; }
  .a-foot__top { grid-template-columns: 1fr; gap: 26px; padding-bottom: 26px; }
  .a-foot__logo img { height: 56px; }
  .a-foot__nav { gap: 0 28px; margin-top: -10px; }
  .a-foot__contact { justify-items: start; }
  .a-foot__base { flex-direction: column; gap: 8px; }
}

/* ------------------------------------------------------------------ phone call bar */
.a-callbar { display: none; }
@media (max-width: 767px) {
  .a-callbar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60; display: grid; grid-template-columns: 1fr auto; gap: 8px;
    transform: translateY(calc(100% + 24px)); transition: transform .55s var(--ease); }
  .a-callbar.is-on { transform: none; }
  .a-callbar.is-hidden, .a-menu:not([hidden]) ~ .a-callbar { transform: translateY(calc(100% + 24px)); }
  .a-callbar a { height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r); font-weight: 600; box-shadow: 0 14px 34px rgba(0, 0, 0, .38); }
  .a-callbar__call { background: var(--gold); color: var(--ink); font-size: 17px; }
  .a-callbar__call .icon { width: 18px; height: 18px; }
  .a-callbar__quote { padding: 0 20px; background: var(--ink); color: #fff; border: 1px solid rgba(255, 255, 255, .22); font-size: 16px; }
}

/* ------------------------------------------------------------------ reveal start states (only while .a-motion is on) */
.a-motion [data-reveal="words"], .a-motion [data-reveal="fade"], .a-motion [data-reveal="card"] { opacity: 0; }
.a-motion [data-reveal="mask"] { clip-path: inset(100% 0 0 0); }

html.a-locked, html.a-locked body { overflow: hidden; }
/* v3 system reveals (core.js): lines rise out of their masks, children of a group arrive in turn, strokes draw
   (give each drawn path pathLength="1"), masks open from a side */
.a-motion [data-reveal="lines"] .a-line { overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.a-motion [data-reveal="lines"] .a-line > span { transform: translate3d(0, 108%, 0); }
.a-motion [data-reveal="stagger"] > * { opacity: 0; }
.a-motion [data-reveal="draw"] :is(path, line, polyline, polygon, rect, circle, ellipse)[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.a-motion [data-reveal="mask"][data-from="left"] { clip-path: inset(0 100% 0 0); }
.a-motion [data-reveal="mask"][data-from="right"] { clip-path: inset(0 0 0 100%); }
.a-motion [data-reveal="mask"][data-from="down"] { clip-path: inset(0 0 100% 0); }
.a-motion [data-reveal="mask"][data-from="centre"] { clip-path: inset(50% 50% 50% 50%); }

/* phones: no label smaller than 12px (chips over photos, meta) */
@media (max-width: 767px) {
  .a-chip, .a-form__meta, .a-foot__kicker { font-size: 12px; letter-spacing: .08em; }
}

/* smooth scrolling (Lenis, desktop pointer only) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ------------------------------------------------------------------ PREVIEW_MODE chips (chip() / status_chip() in functions.php)
   Only ever printed in preview; ?launch=1 shows exactly what ships (no chips, sample and pending items gone). */
.c-chip { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 .5em; padding: 5px 8px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; white-space: nowrap; }
.c-chip[data-sample] { color: #fff; background: #B8472A; }
.c-chip[data-pending] { color: var(--ink); background: var(--gold-2); }
/* ?grid=1 (preview only): the 12 columns of the container, to check alignment */
html[data-grid] body::after { content: ''; position: fixed; inset: 0 max(var(--gut), calc((100vw - var(--max)) / 2)); z-index: 999; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(224, 69, 58, .09) 0 calc((100% - 11 * var(--gap)) / 12), transparent 0 calc((100% - 11 * var(--gap)) / 12 + var(--gap))); }

/* ------------------------------------------------------------------ keyframes (shared) */
@keyframes aUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes aShine { 0%, 72% { transform: translateX(-120%); } 88%, 100% { transform: translateX(120%); } }
@keyframes aRise { from { transform: translateY(.34em); opacity: .32; } to { transform: none; opacity: 1; } }
@keyframes aSettleIn { from { transform: scale(1.08); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }