/* /contact (v3) — docs/DESIGN-V3.md §8.8. Loaded after assets/css/v3/base.css. This page's layout and its two moves only:
   the call card (one card, rotateY: turns over on load, turns again on tap) and the suburb check (a flat street-grid tile flies to
   the suburb and a gold pin drops). Start states apply only under html.a-motion; ?noanim=1 / reduced motion / no-js / a-late
   show the finished, designed state. */

/* ------------------------------------------------------------------ 1 hero + the call card */
.ct-hero .a-phero__media img { object-position: 50% 42%; }
.ct-hero .a-phero__media::after {   /* a quiet photo: the base grade plus an even veil, so the card owns the right-hand side */
  background: linear-gradient(180deg, rgba(7, 9, 12, .62) 0%, rgba(7, 9, 12, .16) 24%, rgba(7, 9, 12, .16) 60%, rgba(7, 9, 12, .5) 100%),
    radial-gradient(120% 110% at 0% 100%, rgba(7, 9, 12, .92) 0%, rgba(7, 9, 12, .78) 34%, rgba(7, 9, 12, .42) 62%, rgba(7, 9, 12, .12) 86%); }
.ct-hero__place { top: calc(var(--head-h) + 11px); right: max(var(--gut), calc((100% - var(--max)) / 2)); z-index: 1; }
.a-motion .ct-hero__place { animation: aUp .9s .42s var(--ease) both; }
.ct-hero__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap-lg); align-items: end; }
.ct-hero .a-h1 { margin-bottom: 0; }

.ct-card { position: relative; justify-self: end; width: 100%; max-width: 540px; perspective: 1800px; }
.ct-card__in { position: relative; display: grid; transform-style: preserve-3d; transition: transform 1.05s var(--ease); }
.ct-card.is-flipped .ct-card__in { transform: rotateY(180deg); }
.ct-card__face { position: relative; grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 2.5vw, 36px);
  border-radius: var(--r-3); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ct-card__face--front { background: var(--paper-2); color: var(--text); box-shadow: 0 60px 110px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
.ct-card__face--back { transform: rotateY(180deg); background: var(--ink-2); color: var(--on-dark); box-shadow: 0 60px 110px -50px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(242, 238, 231, .14); }
.ct-card__face::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateX(-70%);
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 68%); }
.ct-card__face--back::after { background: linear-gradient(105deg, transparent 32%, rgba(232, 190, 87, .16) 50%, transparent 68%); }
.ct-card__top { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 24px; font: 500 12px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.ct-card__face--back .ct-card__top { color: var(--on-dark-2); }
.ct-status { display: inline-flex; align-items: center; gap: 9px; }
.ct-status > i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--muted-2); }
.ct-status.is-open > i { background: #2FA36B; box-shadow: 0 0 0 4px rgba(47, 163, 107, .16); }
.ct-card__num { display: block; align-self: flex-start; margin: clamp(20px, 2.4vw, 34px) 0 clamp(22px, 2.6vw, 36px); font-size: clamp(40px, 4.4vw, 66px); font-weight: 600; font-stretch: 104%;
  letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .3s; }
.ct-card__num:hover { color: var(--gold-ink); }
.ct-card__acts { display: flex; gap: 12px; margin-top: auto; }
.ct-card__acts .a-btn--call { flex: 1 1 auto; }
.ct-card__flip { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 60px; padding: 0 20px; border: 1px solid rgba(18, 20, 23, .2); border-radius: var(--r);
  font-size: 15px; font-weight: 600; white-space: nowrap; transition: border-color .3s, background-color .3s, color .3s; }
.ct-card__flip:hover { border-color: var(--text); }
.ct-card__flip .icon { width: 18px; height: 18px; transition: transform .7s var(--ease); }
.ct-card__flip:hover .icon { transform: rotate(180deg); }
.ct-card__flip--sm { height: 44px; margin: -10px -12px -10px 0; padding: 0 12px; border-color: transparent; font: 500 12px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark); }
.ct-card__flip--sm:hover { border-color: var(--line-dark); color: var(--gold-2); }
.ct-card__flip--sm .icon { width: 16px; height: 16px; }
.ct-card__line { margin-top: clamp(20px, 2.4vw, 32px); font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: #fff; }
.ct-card__line > i { align-self: flex-start; margin-top: .52em; }
.ct-card__hours { margin-top: 10px; padding-left: 17px; font: 500 13px/1.4 var(--mono); letter-spacing: .08em; color: var(--on-dark-2); }
.ct-card__mailwrap { display: grid; gap: 8px; margin-top: auto; padding-top: clamp(22px, 2.6vw, 34px); }
.ct-card__k { font: 500 12px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--on-dark-2); }
.ct-card__mail { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; font-size: clamp(18px, 1.55vw, 23px); font-weight: 600; letter-spacing: -.01em; color: #fff;
  text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 6px; overflow-wrap: anywhere; transition: color .3s; }
.ct-card__mail:hover { color: var(--gold-2); }
/* the turn: on load the card deals in and turns from its hours side to the number (CSS from first paint, no script); a tap
   turns it again (.is-flipped); .is-turning runs the light sweep across the face that comes round */
.a-motion .ct-card { animation: ctDeal 1.1s .18s var(--ease) backwards; }
.a-motion .ct-card__in { animation: ctTurn 1.75s .34s cubic-bezier(.2, .8, .22, 1) backwards; }
.a-motion .ct-card__face--front::after { animation: ctSweep 1.3s 1s ease-out; }
.a-motion .ct-card.is-turning .ct-card__face::after { animation: ctSweep 1.1s .25s ease-out; }
@keyframes ctDeal { from { opacity: 0; transform: translateY(46px); } }
@keyframes ctTurn { from { transform: rotateY(-180deg) rotateX(9deg); } 55% { transform: rotateY(-38deg) rotateX(3deg); } }
@keyframes ctSweep { 0% { opacity: 0; transform: translateX(-70%); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(70%); } }
.a-noanim .ct-card__in { transition: none; }
/* without JS the card cannot turn: both sides show, stacked */
.no-js .ct-card__in { gap: 12px; }
.no-js .ct-card__face { grid-area: auto; }
.no-js .ct-card__face--back { transform: none; }
.no-js .ct-card__flip { display: none; }

@media (max-width: 1023px) {
  .ct-hero__in { grid-template-columns: 1fr; row-gap: 28px; }
  .ct-card { justify-self: start; max-width: 520px; }
}
@media (max-width: 767px) {
  .ct-hero .a-phero__media img { object-position: 50% 30%; }
  .ct-hero .a-phero__media::after { background: linear-gradient(180deg, rgba(7, 9, 12, .6) 0%, rgba(7, 9, 12, .1) 18%),
    linear-gradient(0deg, rgba(7, 9, 12, .97) 0%, rgba(7, 9, 12, .9) 38%, rgba(7, 9, 12, .5) 58%, rgba(7, 9, 12, .12) 74%); }
  .ct-hero.a-phero { height: 78svh; }   /* a touch shorter than the other heroes: the card carries the call, the form comes sooner */
  .ct-hero__place { top: calc(var(--head-h) + 1px); }
  .ct-hero__in { row-gap: 22px; }
  .ct-card { max-width: none; }
  .ct-card__face { padding: 20px; }
  .ct-card__num { margin: 16px 0 18px; font-size: clamp(38px, 11.4vw, 48px); }
  .ct-card__acts { gap: 8px; }
  .ct-card__acts .a-btn { height: 56px; padding: 0 16px; }
  .ct-card__flip { height: 56px; padding: 0 14px; font-size: 14px; gap: 8px; }
  .ct-card__flip--sm { height: 44px; }
  .ct-card__line { margin-top: 16px; }
}
/* phones held sideways: H1 and card side by side, the hero one screen tall, so the Call button is in the first view */
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  .ct-hero.a-phero { height: auto; min-height: max(100svh, 340px); max-height: none; }
  .ct-hero .a-phero__in { padding-bottom: 24px; }
  .ct-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; align-items: end; }
  .ct-hero .a-h1 { font-size: clamp(32px, 5vw, 44px); }
  .ct-card { justify-self: end; max-width: 440px; }
  .ct-card__face { padding: 18px 20px; }
  .ct-card__num { margin: 12px 0 14px; font-size: clamp(32px, 4.6vw, 42px); }
  .ct-card__acts .a-btn, .ct-card__flip { height: 50px; }
}
@media (max-width: 359px) { .ct-card__flip:not(.ct-card__flip--sm) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

/* ------------------------------------------------------------------ 2 send an enquiry */
.ct-enq .a-head2__row { align-items: flex-end; }
.ct-enq__who { margin-top: 16px; font-size: 15px; color: var(--muted); }
.ct-enq__talk { display: grid; justify-items: end; gap: 4px; text-align: right; }
.ct-enq__or { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ct-enq__tel { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: color .3s; }
.ct-enq__tel .icon { width: .6em; height: .6em; color: var(--gold-ink); transition: transform .5s var(--ease); }
.ct-enq__tel:hover { color: var(--gold-ink); }
.ct-enq__tel:hover .icon { transform: translate(3px, -3px); }
/* the form as one wide card: the two choices on the left, the details on the right, the send row across (desktop) */
@media (min-width: 1024px) {
  .ct-form.a-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); column-gap: clamp(36px, 4.4vw, 72px); row-gap: 22px; align-items: start; padding: clamp(32px, 3.4vw, 52px); }
  .ct-form > .a-form__head { grid-column: 1 / -1; grid-row: 1; }
  .ct-form > .a-form__alert { grid-column: 1 / -1; grid-row: 2; }
  .ct-form > .a-form__spaces--text { grid-column: 1; grid-row: 2; }
  .ct-form > .a-form__spaces:not(.a-form__spaces--text) { grid-column: 1; grid-row: 3 / span 2; }
  .ct-form > .a-form__row { grid-column: 2; grid-row: 2; }
  .ct-form > .a-form__row + .a-form__row { grid-row: 3; }
  .ct-form > .a-field { grid-column: 2; grid-row: 4; }
  .ct-form > .a-form__foot { grid-column: 1 / -1; grid-row: 5; padding-top: 22px; border-top: 1px solid var(--line); }
  .ct-form > .a-form__status { grid-column: 1 / -1; grid-row: 6; }
  .ct-form:has(> .a-form__alert) > .a-form__spaces--text, .ct-form:has(> .a-form__alert) > .a-form__row { grid-row: 3; }
  .ct-form:has(> .a-form__alert) > .a-form__spaces:not(.a-form__spaces--text) { grid-row: 4 / span 2; }
  .ct-form:has(> .a-form__alert) > .a-form__row + .a-form__row { grid-row: 4; }
  .ct-form:has(> .a-form__alert) > .a-field { grid-row: 5; }
  .ct-form:has(> .a-form__alert) > .a-form__foot { grid-row: 6; }
  .ct-form:has(> .a-form__alert) > .a-form__status { grid-row: 7; }
  .ct-form .a-form__spaces--text .a-form__chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ct-form .a-form__spaces:not(.a-form__spaces--text) .a-form__chips { grid-template-columns: 1fr 1fr; }
  .ct-form .a-form__spaces:not(.a-form__spaces--text) .a-chipbox span { flex-direction: row; justify-content: flex-start; gap: 14px; min-height: 76px; padding: 12px 18px; text-align: left; }
  .ct-form .a-form__spaces--text .a-chipbox span { min-height: 58px; }
  .ct-form .a-field textarea { min-height: 102px; }
}
@media (max-width: 767px) {
  .ct-enq .a-head2__row { row-gap: 12px; }
  .ct-enq__talk { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; text-align: left; }
  .ct-enq__tel { font-size: 22px; }
  /* phones: the fields follow the site-wide rule (one per row under 480px); the four spaces stay compact 2 × 2 chips */
  .ct-form .a-field__l i { display: inline; margin-left: 4px; font-size: 12px; }
  .ct-form .a-form__spaces:not(.a-form__spaces--text) .a-chipbox span { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 56px; padding: 8px 12px; font-size: 14px; text-align: left; }
  .ct-form .a-form__spaces:not(.a-form__spaces--text) .a-chipbox .icon { width: 20px; height: 20px; }
  .ct-form .a-form__spaces--text .a-chipbox span { min-height: 46px; padding: 8px 10px; font-size: 14px; }
  .ct-form .a-form__chips--text { grid-template-columns: 1fr 1fr; }
  .ct-form .a-form__chips--text .a-chipbox:last-child { grid-column: 1 / -1; }
  .ct-form .a-field textarea { min-height: 64px; }   /* two lines to start; it grows (resize) for longer notes */
}

/* ------------------------------------------------------------------ 3 is my suburb covered? */
.ct-cov__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr;
  grid-template-areas: "check tile" "answer tile" "areas tile"; column-gap: var(--gap-lg); row-gap: 26px; }
.ct-check { grid-area: check; }
.ct-answer { grid-area: answer; }
.ct-tile { grid-area: tile; }
.ct-areas { grid-area: areas; }
.ct-check__l { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.ct-check__row { display: flex; gap: 10px; }
.ct-check__field { position: relative; flex: 1; min-width: 0; }
.ct-check__field .icon { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--gold-ink); pointer-events: none; }
.ct-check__in { width: 100%; height: 60px; padding: 0 16px 0 46px; font: 500 18px/1.3 var(--f); color: var(--text); background: #fff; border: 1px solid rgba(18, 20, 23, .22); border-radius: var(--r);
  -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s; }
.ct-check__in::placeholder { color: #8A8F94; font-weight: 400; }
.ct-check__in:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(217, 167, 46, .35); }
.ct-check__go { height: 60px; padding: 0 26px; }
.ct-answer { min-height: 92px; }
.ct-answer__idle { font-size: clamp(22px, 2vw, 30px); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; color: var(--muted); text-wrap: balance; }
.ct-answer__big { font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.ct-answer__big span { color: var(--gold-ink); }
.ct-answer__p { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.ct-answer__p a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(18, 20, 23, .3); text-underline-offset: 4px; transition: text-decoration-color .25s, color .25s; }
.ct-answer__p a:hover { text-decoration-color: var(--gold); }
.ct-answer__p .ct-answer__call { display: inline-block; padding: 10px 0; margin: -10px 0; font-weight: 600; text-decoration-color: var(--gold); white-space: nowrap; }
.ct-answer [data-state]:not([hidden]) { animation: aUp .55s var(--ease) both; }
.a-noanim .ct-answer [data-state] { animation: none; }

.ct-areas { display: grid; align-content: start; gap: 20px; }
.ct-areas__r { margin-bottom: 4px; font: 500 12px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.ct-areas__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.ct-areas__list li { display: flex; align-items: center; min-width: 0; }
.ct-areas__b { min-height: 36px; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--text); text-align: left;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .25s, opacity .35s, text-decoration-color .25s; }
.ct-areas__b:hover { text-decoration-color: var(--gold); }
.ct-areas__b[aria-current] { color: var(--gold-ink); text-decoration-color: var(--gold); }
.ct-areas__b.is-dim { opacity: .3; }
.ct-areas__office { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.ct-areas__office .icon { width: 18px; height: 18px; color: var(--gold-ink); }

/* the tile: a flat, top-down street grid (no tilt, no depth: the 3D map board is the homepage's). The world group is moved by
   contact.js (translate + scale); the pin never moves, it sits at the centre and drops onto whatever is under it. */
.ct-tile { position: relative; min-height: 520px; margin: 0; overflow: hidden; border-radius: var(--r-3); background: #ECE6DB; box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; }
.ct-tile__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ct-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 50%, rgba(236, 230, 219, 0) 55%, rgba(214, 206, 192, .55) 100%); box-shadow: inset 0 0 0 1px var(--line); }
.ct-g-land { fill: #ECE6DB; }
.ct-g-street { fill: none; stroke: #FBF9F4; stroke-width: .24; }
.ct-g-road { fill: none; stroke: #fff; stroke-width: .58; }
.ct-g-park { fill: #D3DAC4; }
.ct-g-water { fill: #C3CFD6; }
.ct-g-coast { fill: none; stroke: #A3B3BD; stroke-width: .16; }
.ct-g-river { fill: none; stroke: #C3CFD6; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.ct-g-rail { fill: none; stroke: #7E858C; stroke-width: .26; stroke-linejoin: round; }
.ct-g-rail2 { fill: none; stroke: #ECE6DB; stroke-width: .11; stroke-dasharray: .7 .7; }
.ct-g-dot { fill: #6E757C; }
.ct-tile__tag { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 7px 10px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  background: rgba(252, 251, 248, .82); border-radius: 2px; box-shadow: 0 0 0 1px var(--line); }
.ct-pin { position: absolute; left: 50%; top: 50%; z-index: 3; width: 0; height: 0; }
.ct-pin__drop { position: absolute; left: -17px; bottom: 0; width: 34px; height: 46px; transform-origin: 50% 100%; filter: drop-shadow(0 6px 8px rgba(13, 16, 18, .28)); transition: transform .4s var(--ease), opacity .3s; }
.ct-pin__drop svg { width: 100%; height: 100%; }
.ct-g-pin { fill: var(--gold); stroke: rgba(13, 16, 18, .28); stroke-width: 1; }
.ct-g-pinhole { fill: var(--ink); }
.ct-pin__shadow { position: absolute; left: -15px; top: -5px; width: 30px; height: 10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 16, 18, .42), rgba(13, 16, 18, 0)); transition: transform .4s var(--ease), opacity .3s; }
.ct-pin__ring { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; }
.ct-pin__tag { position: absolute; left: 26px; bottom: 22px; display: grid; gap: 5px; padding: 9px 12px; white-space: nowrap; background: var(--ink); color: #fff; border-radius: 2px;
  font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); transition: opacity .3s, transform .45s var(--ease); }
.ct-pin__sub { font-size: 11px; letter-spacing: .1em; color: rgba(242, 238, 231, .62); }
.ct-pin.is-up .ct-pin__drop { transform: translateY(-70px); opacity: 0; }
.ct-pin.is-up .ct-pin__shadow { transform: scale(.3); opacity: 0; }
.ct-pin.is-up .ct-pin__tag { opacity: 0; transform: translateY(6px); }
.a-motion .ct-pin.is-drop .ct-pin__drop { animation: ctDrop .8s cubic-bezier(.16, 1, .3, 1) both; }
.a-motion .ct-pin.is-drop .ct-pin__shadow { animation: ctShadow .8s cubic-bezier(.16, 1, .3, 1) both; }
.a-motion .ct-pin.is-drop .ct-pin__ring { animation: ctRing 1.1s .32s ease-out both; }
.a-motion .ct-pin.is-drop .ct-pin__tag { animation: aUp .6s .38s var(--ease) both; }
@keyframes ctDrop { from { transform: translateY(-150px); opacity: 0; } 25% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes ctShadow { from { transform: scale(.25); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ctRing { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
.a-noanim .ct-pin__drop, .a-noanim .ct-pin__shadow, .a-noanim .ct-pin__tag { transition: none; }

@media (max-width: 1023px) {
  .ct-cov__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "check" "tile" "answer" "areas"; row-gap: 22px; }
  .ct-tile { min-height: 0; aspect-ratio: 4 / 3; }
  .ct-answer { min-height: 0; }
}
@media (max-width: 767px) {
  .ct-cov__grid { row-gap: 16px; }
  .ct-check__go { padding: 0 18px; }
  .ct-check__in { font-size: 17px; }
  /* phones: the four region lists run on as one dotted line of suburbs (the region names stay for screen readers and as the
     lists' labels), so the 44px tap rows don't stack up into a long column */
  .ct-areas { display: block; margin-top: -6px; font-size: 0; }   /* -6px: the first row's tap padding sits in the grid gap */
  .ct-areas__grp, .ct-areas__list { display: inline; }
  .ct-areas__r { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ct-areas__list li { display: inline-flex; vertical-align: top; font-size: 15px; }
  .ct-areas__list li:not(:last-child)::after, .ct-areas__grp:not(:last-of-type) li:last-child::after { content: '·'; margin: 0 7px; color: var(--muted-2); }
  .ct-areas__b { min-height: 44px; font-size: 15px; }   /* 44px tap target; the text stays centred on its row */
  .ct-areas__office { margin-top: 12px; font-size: 15px; }
  .ct-tile { aspect-ratio: 2 / 1; }
  .ct-answer__idle { font-size: 19px; }
  .ct-tile__tag { left: 10px; top: 10px; font-size: 12px; letter-spacing: .08em; }
  .ct-pin__tag { left: 22px; font-size: 12px; letter-spacing: .08em; }
  .ct-pin__sub { font-size: 12px; letter-spacing: .06em; }
}

/* ------------------------------------------------------------------ 4 good to know */
.ct-faq__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.ct-faq__item { padding: clamp(24px, 2.4vw, 34px) clamp(4px, 1vw, 12px) 0 0; border-top: 1px solid rgba(18, 20, 23, .22); }
.ct-faq__n { display: block; margin-bottom: 18px; font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--gold-ink); }
.ct-faq__item .a-h3 { max-width: 18ch; }
.ct-faq__item .a-body { margin-top: 12px; max-width: 34ch; overflow-wrap: anywhere; }
@media (max-width: 1023px) { .ct-faq__list { grid-template-columns: 1fr; gap: 26px; } .ct-faq__item .a-h3, .ct-faq__item .a-body { max-width: 46ch; } }
@media (max-width: 767px) {   /* phones: the number sits beside the question, not above it */
  .ct-faq__list { gap: 22px; }
  .ct-faq__item { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding-top: 18px; }
  .ct-faq__n { grid-row: 1; margin: 0; padding-top: .45em; }
  .ct-faq__item .a-h3, .ct-faq__item .a-body { grid-column: 2; }
  .ct-faq__item .a-body { margin-top: 8px; }
}