/* ==========================================================================
   Inner pages (services, local SEO, projects, about, contact, book a call,
   articles). Builds on home.css tokens and the Flighty-style pill header.
   ========================================================================== */

/* ---------- page hero ---------- */
/* the hero runs up behind the sticky (transparent) pill header, so the glow has no edge under the header */
.page-hero { position: relative; margin-top: calc(-1 * var(--header-h)); padding: calc(70px + var(--header-h)) 0 44px; text-align: center; background: radial-gradient(1300px 700px at 50% -20%, #fff8d2 0%, rgba(255,248,210,.6) 30%, rgba(255,248,210,.22) 55%, rgba(255,248,210,0) 80%), #fff; }
.page-hero .eyebrow { margin-bottom: 22px; }
.page-hero h1 { font-family: var(--display); font-weight: 400; font-size: 76px; line-height: 1.05; letter-spacing: -2px; max-width: 900px; margin: 0 auto; color: var(--ink); }
.page-hero h1 em { font-style: italic; }
.page-hero .intro { max-width: 660px; margin: 22px auto 0; font-size: 17px; line-height: 1.55; color: var(--text-grey); }
.page-hero .hero-cta { margin-top: 30px; }
.page-hero.left { text-align: left; }
.page-hero.left h1, .page-hero.left .intro { margin-left: 0; }

/* ---------- generic sections ---------- */
.section { position: relative; padding: 100px 0; }
.section.grey { background: var(--grey-bg); }
.section.dark { background: var(--dark); color: #fff; }
.section.soft-top { background-image: linear-gradient(to bottom, #E9E9E9, transparent 140px); }
/* the light section above fades into the dark one over 180px, so there is no hard edge at all */
.section.dark.soft-top { background-image: none; }
.section.dark.soft-top::before { content: ""; position: absolute; left: 0; right: 0; top: -380px; height: 380px; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(23,23,23,0) 0%, rgba(23,23,23,.015) 22%, rgba(23,23,23,.05) 38%, rgba(23,23,23,.12) 52%, rgba(23,23,23,.25) 64%, rgba(23,23,23,.45) 76%, rgba(23,23,23,.68) 86%, rgba(23,23,23,.88) 94%, var(--dark) 100%); }
/* the section above a dark fade gets room at the bottom, so the fade never sits on its content */
.section:has(+ .section.dark.soft-top) { padding-bottom: 230px; }
.section.dark.soft-top > .container { position: relative; z-index: 2; }
.section-head { text-align: center; max-width: 780px; margin: 0 auto 52px; }
.section-head .h2 { margin-bottom: 16px; }
.section-head p { color: var(--text-grey); font-size: 17px; }
.dark .section-head p { color: var(--white-84); }
.section-head.left { text-align: left; margin-left: 0; }
.section-head .eyebrow { display: inline-flex; margin-bottom: 18px; }
.team-strip { display: block; text-align: center; color: var(--text-grey); font-size: 14px; margin-top: 30px; }
.role-main .meta li.region { display: inline-flex; align-items: center; gap: 7px; padding-left: 8px; }
.role-main .meta li.region .flag { display: inline-block; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; }
.role-main .meta li.region .flag svg { display: block; width: 100%; height: 100%; }
.role-video { margin-top: 12px; font-size: 14px; color: var(--text-grey); }
.role-video a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- service rows ---------- */
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; background: #fff; border: 1px solid var(--border-light); border-radius: 28px; padding: 40px; margin-bottom: 20px; box-shadow: 0 30px 60px -50px rgba(10,13,20,.25); scroll-margin-top: 110px; }
.svc-row:nth-child(even) .svc-copy { order: 2; }
.svc-copy { max-width: 520px; padding: 8px 0; }
.svc-row:nth-child(even) .svc-copy { margin-left: auto; }
.svc-row .icons { display: flex; gap: 10px; margin-bottom: 22px; }
.svc-row .icons span { width: 46px; height: 46px; border-radius: 13px; background: var(--yellow); display: grid; place-items: center; }
.svc-row .icons img { width: 22px; height: 22px; }
.svc-row h2 { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1.08; letter-spacing: -1.6px; margin-bottom: 14px; color: var(--ink); }
.svc-row p { color: var(--text-grey); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin: 24px 0 30px; }
.checks li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.checks li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%230A0D14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat; }
.svc-art-box { position: relative; width: 100%; aspect-ratio: 1304 / 1008; max-height: 480px; border-radius: 22px; overflow: hidden; background: #111; border: 1px solid var(--border-dark); }
.svc-art-box .bg, .svc-art-box .art { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; }
.svc-art-box .bg { background-size: cover; }
.svc-art-box .art { background-size: cover; background-position: center bottom; transition: transform .9s var(--ease-out); transform-origin: 50% 100%; }
/* the website artwork is a wide laptop render, so its box is wider and shows the whole device */
#web-dev .svc-art-box { aspect-ratio: 1968 / 1100; }
#web-dev .svc-art-box .art { background-size: 96% auto; background-position: center 78%; }
/* the LSA phone render carries placeholder listing text on its lower half; show the map and rank pins only */
#google-ads .svc-art-box .art { background-size: 132% auto; background-position: center top; }
.svc-row:hover .svc-art-box .art { transform: scale(1.04) translateY(-5px); }

/* service page hero art (same artwork, on its gradient) */
.svc-hero-art { position: relative; width: 100%; aspect-ratio: 1304 / 760; border-radius: 22px; overflow: hidden; background: #111; margin-bottom: 28px; border: 1px solid var(--border-dark); }
.svc-hero-art .bg, .svc-hero-art .art { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; }
.svc-hero-art .bg { background-size: cover; }
.svc-hero-art .art { background-size: cover; background-position: center bottom; }
.prose .lede { font-size: 19px; line-height: 1.55; color: var(--ink); }
.prose .results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0 8px; padding: 0; list-style: none; }
.prose .results li { margin: 0; padding: 16px 18px; border-radius: 16px; background: var(--grey-bg); font-size: 14px; color: var(--text-grey); }
.prose .results b { display: block; font-family: var(--display); font-size: 34px; line-height: 1; color: var(--ink); letter-spacing: -1px; margin-bottom: 6px; }

/* ---------- result strip / process ---------- */
.stat-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.stat-card { border: 1px solid var(--border-dark); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 10px; min-height: 230px; transition: border-color .4s, transform .5s var(--ease-out); }
.stat-card:hover { border-color: #5A5A5A; transform: translateY(-3px); }
.stat-card img { height: 34px; width: auto; object-fit: contain; align-self: flex-start; }
.stat-card .lbl { color: var(--white-84); }
.stat-card .big { font-family: var(--display); font-size: 62px; line-height: 1; color: var(--yellow); letter-spacing: -2px; margin-top: auto; }
.stat-card .cap { color: var(--white-84); font-size: 14px; }
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 10px; }
.step { position: relative; padding-top: 26px; border-top: 2px dashed rgba(255,255,255,.22); }
.step i { position: absolute; top: -13px; left: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--ink); display: grid; place-items: center; font-size: 12px; font-weight: 700; font-style: normal; }
.step h3 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: -1px; margin-bottom: 10px; }
.step p { color: var(--white-84); font-size: 15px; }

/* ---------- feature boxes (Why choose us, Unlock growth) ---------- */
.boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.boxes.four { grid-template-columns: repeat(4, 1fr); }
.box { border-radius: 22px; padding: 30px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: transform .5s var(--ease-out), border-color .4s; }
.box:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
a.box { display: block; color: inherit; }
a.box:hover { border-color: var(--yellow); }
.box i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--yellow); margin-bottom: 18px; }
.box i svg { width: 22px; height: 22px; }
.box h3 { font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: -1px; margin-bottom: 10px; }
.box p { color: var(--white-84); font-size: 15px; }
.light .box { background: #fff; border-color: var(--border-light); }
.light .box p { color: var(--text-grey); }
.light .box h3 { color: var(--ink); }

/* ---------- two column article + sticky form ---------- */
.split { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.prose { max-width: 760px; }
.prose > img, .prose figure img { width: 100%; border-radius: 22px; margin: 0 0 28px; }
.prose h2 { font-family: var(--display); font-weight: 400; font-size: 42px; letter-spacing: -1.5px; line-height: 1.1; margin: 44px 0 14px; color: var(--ink); }
.prose h3 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: -1px; margin: 32px 0 10px; color: var(--ink); }
.prose h4 { font-size: 18px; font-weight: 600; margin: 26px 0 8px; }
.prose p, .prose li { color: var(--text-grey-2); font-size: 16.5px; line-height: 1.6; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 14px 0; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: 8px; }
.prose li b { color: var(--ink); font-weight: 600; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose em { font-style: italic; }
.prose .placeholder { width: 100%; aspect-ratio: 2 / 1; border-radius: 22px; background: #E9E9E6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C9C9C4'%3E%3Cpath d='M4 5h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm1 12h14l-4.5-6-3.5 4.5-2-2.5z'/%3E%3Ccircle cx='8' cy='9' r='1.6'/%3E%3C/svg%3E") center / 80px no-repeat; margin: 0 0 28px; }
.form-card { position: sticky; top: 110px; background: #fff; border-radius: 26px; padding: 32px; border: 1px solid var(--border-light); box-shadow: 0 30px 60px -44px rgba(10,13,20,.3); }
.form-card h3 { font-family: var(--display); font-weight: 400; font-size: 32px; letter-spacing: -1px; line-height: 1.1; margin-bottom: 8px; }
.form-card p { color: var(--text-grey); margin-bottom: 20px; }
.form { display: grid; gap: 12px; }
.form .row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
/* Ben, 19 Sep 2026: in a narrow card the phone field was squeezed to nothing beside the email field.
   auto-fit stacks the pair below ~372px of card width, and the dial code face gives up its padding first. */
.form-card .form .row2 { grid-template-columns: 1fr; }
@media (min-width: 1200px) { .enquire-split .form-card .form .row2, .guide-rail .form-card .form .row2 { grid-template-columns: 1fr; } }
.form input, .form textarea, .form select { width: 100%; font: inherit; font-size: 15px; padding: 14px 16px; border: 1.5px solid #E9E6DA; border-radius: 12px; background: #fff; color: var(--ink); transition: border-color .18s, box-shadow .18s; }
.form input::placeholder, .form textarea::placeholder { color: #A8A69C; }
.form input:focus, .form textarea:focus { outline: none; border-color: #F5C518; box-shadow: 0 0 0 4px rgba(244,225,74,.28); }
.form textarea { min-height: 120px; resize: vertical; }
.form .btn { justify-self: start; }
.form .note { font-size: 12.5px; color: var(--text-grey); }
/* phone with a country code: the native select lies invisibly over a compact face (flag, dial code), so phones
   open their own picker. The pair shares one border so it reads as a single field. */
.form .phone-field { display: flex; min-width: 0; border: 1.5px solid #E9E6DA; border-radius: 12px; background: #fff; transition: border-color .18s, box-shadow .18s; }
.form .phone-field:focus-within { border-color: #F5C518; box-shadow: 0 0 0 4px rgba(244,225,74,.28); }
.form .phone-field input { flex: 1; min-width: 0; border: 0; border-radius: 0 10.5px 10.5px 0; background: none; padding-left: 12px; }
.form .phone-field input:focus { box-shadow: none; }
.form .cc { position: relative; flex: none; display: flex; align-items: center; border-right: 1.5px solid #E9E6DA; border-radius: 10.5px 0 0 10.5px; cursor: pointer; transition: background-color .18s; }
.form .cc:hover, .form .cc:focus-within { background: #FAF9F3; }
.form .cc-face { display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; font-size: 15px; color: var(--ink); pointer-events: none; white-space: nowrap; }
.form .cc-face b { font-weight: 600; min-width: 26px; }
.form .cc-face > svg { width: 14px; height: 14px; color: var(--text-grey); }
.form .cc-flag { display: block; width: 24px; height: 16px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(10,13,20,.12); }
.form .cc-flag i { display: none; width: 100%; height: 100%; }
.form .cc-flag svg { display: block; width: 100%; height: 100%; }
.form .cc-flag .f-any { display: grid; place-items: center; background: #F2F2F2; }
.form .cc-flag .f-any svg { width: 14px; height: 14px; }
.form .cc[data-cc="US"] .f-US, .form .cc[data-cc="AU"] .f-AU, .form .cc[data-cc="NZ"] .f-NZ { display: block; }
.form .cc[data-cc="US"] .f-any, .form .cc[data-cc="AU"] .f-any, .form .cc[data-cc="NZ"] .f-any { display: none; }
.form .cc select { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 16px; }

/* sending, then the thank you: the form fades up and out, the space eases to the panel's height, the tick
   pops and draws itself and the words rise in (pages.js runs the hand-over; without JS nothing here shows) */
.form { transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
.form.leaving { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.form.sent { display: none; }
.form-ok { display: none; overflow: hidden; text-align: center; padding: 38px 28px 36px; border-radius: 18px; background: #fff; border: 1.5px solid #E9E6DA; box-shadow: 0 30px 60px -50px rgba(10,13,20,.35); transition: height .55s var(--ease-out); }
.form.sent + .form-ok { display: block; }
.form-ok .ok-tick { display: block; width: 56px; height: 56px; margin: 0 auto 18px; transform: scale(.4); opacity: 0; }
.form-ok .ok-tick circle { fill: var(--yellow); }
.form-ok .ok-tick path { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; stroke-dashoffset: 36; }
.form-ok b { display: block; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.1; letter-spacing: -1px; color: var(--ink); }
.form-ok > span { display: block; max-width: 380px; margin: 10px auto 0; font-size: 15.5px; line-height: 1.5; color: var(--text-grey); }
.form-ok b, .form-ok > span { opacity: 0; transform: translateY(12px); }
.form-ok.in .ok-tick { animation: ok-pop .6s cubic-bezier(.34,1.56,.64,1) .1s forwards; }
.form-ok.in .ok-tick path { animation: ok-draw .45s var(--ease-out) .45s forwards; }
.form-ok.in b { animation: ok-rise .6s var(--ease-out) .5s forwards; }
.form-ok.in > span { animation: ok-rise .6s var(--ease-out) .62s forwards; }
@keyframes ok-pop { to { transform: none; opacity: 1; } }
@keyframes ok-draw { to { stroke-dashoffset: 0; } }
@keyframes ok-rise { to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .form, .form-ok { transition: none; }
  .form-ok .ok-tick, .form-ok b, .form-ok > span { opacity: 1; transform: none; animation: none !important; }
  .form-ok .ok-tick path { stroke-dashoffset: 0; animation: none !important; }
}
.form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form .form-err { display: block; margin-top: 10px; color: #B42318; font-weight: 600; }
.form.sending button[type="submit"] { pointer-events: none; }
.form button[type="submit"] > span { display: inline-flex; align-items: center; gap: 10px; }
.form.sending button[type="submit"] > span::after { content: ""; width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(10,13,20,.25); border-top-color: var(--ink); animation: form-spin .7s linear infinite; }
@keyframes form-spin { to { transform: rotate(360deg); } }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--border-light); padding: 6px 0; }
.faq details:last-child { border-bottom: 1px solid var(--border-light); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; font-size: 20px; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 22px; height: 22px; transition: transform .35s var(--ease-out); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { color: var(--text-grey-2); padding: 0 0 20px; max-width: 760px; }

/* ---------- projects ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proj-card { display: block; background: #fff; border: 1px solid var(--border-light); border-radius: 24px; overflow: hidden; color: inherit; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.proj-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -36px rgba(10,13,20,.35); }
.proj-card .tile { aspect-ratio: 1; background: #222 center / cover no-repeat; transition: transform .9s var(--ease-out); }
.proj-card:hover .tile { transform: scale(1.03); }
.proj-card .tile-wrap { overflow: hidden; }
.proj-card .body { padding: 22px 24px 26px; }
.proj-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 10px; color: var(--ink); }
.proj-stat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 7px; background: var(--yellow); font-weight: 700; font-size: 14px; }
.proj-cap { font-size: 13.5px; color: var(--text-grey); margin: 8px 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-light); }
.proj-card p.desc { font-size: 14.5px; color: var(--text-grey-2); }

.proj-hero-img { max-width: 1180px; margin: 30px auto 0; border-radius: 26px; overflow: hidden; box-shadow: 0 50px 100px -50px rgba(10,13,20,.5); }
.proj-hero-img img { width: 100%; display: block; }
.delivered { position: sticky; top: 110px; }
.delivered h4 { font-size: 22px; font-weight: 600; margin-bottom: 16px; }
.tags { display: flex; flex-direction: column; gap: 10px; }
.tags a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--label); font-weight: 900; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.tags a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.counter { border: 1px solid var(--border-dark); border-radius: 22px; padding: 30px; }
.counter .stat-num { font-family: var(--display); font-size: 64px; line-height: 1; color: var(--yellow); letter-spacing: -2px; }
.counter .stat-title { margin-top: 12px; color: #fff; font-size: 16px; font-weight: 500; }
.highlight { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: var(--dark); color: #fff; border-radius: 28px; padding: 48px; position: relative; overflow: hidden; }
.highlight::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(247,235,42,.35), transparent); pointer-events: none; }
.highlight h2 { font-family: var(--display); font-weight: 400; font-size: 44px; letter-spacing: -1.5px; line-height: 1.08; margin-bottom: 16px; }
.highlight p { color: var(--white-84); }
.highlight p + p { margin-top: 12px; }
.highlight p a { color: #fff; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.highlight p a:hover { color: var(--yellow); }
.highlight img, .highlight .placeholder { width: 100%; border-radius: 20px; position: relative; z-index: 1; }
.highlight .placeholder { aspect-ratio: 4 / 3; background: #E9E9E6; margin: 0; }
.hl-media { position: relative; z-index: 1; border-radius: 20px; overflow: hidden; aspect-ratio: 1; background: #222 center / cover no-repeat; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.hl-media .chips { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.hl-video { position: relative; z-index: 1; }
.hl-video .vida-embed { width: 100%; position: relative; padding-top: 56.25%; border-radius: 20px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.hl-video .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.hl-video .chip-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; }
.hl-video .chip-stat b { font-family: var(--display); font-size: 24px; line-height: 1; letter-spacing: -.5px; }
.hl-video .chip-stat small { font-size: 12px; color: var(--white-84); max-width: 170px; line-height: 1.25; }
/* the client's own vertical clip in the media slot: the homepage's video card, sized for this column */
.hl-clip { display: flex; flex-direction: column; align-items: center; }
.hl-clip .testi-video { width: min(100%, 330px); height: auto; aspect-ratio: 9 / 16; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.hl-clip .video-name { top: 26px; left: 24px; right: 24px; font-size: 16px; }
.hl-clip .chips { justify-content: center; }
.hl-media .chip-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); backdrop-filter: blur(6px); }
.hl-media .chip-stat b { font-family: var(--display); font-size: 24px; line-height: 1; letter-spacing: -.5px; }
.hl-media .chip-stat small { font-size: 12px; color: var(--text-grey); max-width: 150px; line-height: 1.25; }

/* project filters */
.filters { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: -10px 0 36px; }
.filters button { padding: 10px 18px; border-radius: 999px; border: 1px solid var(--border-light); background: #fff; font-weight: 600; font-size: 14px; color: var(--ink); transition: background-color .25s, color .25s, border-color .25s, transform .3s var(--ease-out); }
.filters button:hover { transform: translateY(-2px); border-color: #D0D0D0; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.proj-card { transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), opacity .4s; }
.proj-card.hide { display: none; }
.proj-card .flag { display: inline-block; font-size: 12px; font-weight: 600; color: var(--text-grey); margin-left: 8px; }
.filter-empty { display: none; text-align: center; padding: 60px 20px; color: var(--text-grey); background: #fff; border: 1px dashed #D6D6D6; border-radius: 22px; }
.filter-empty.show { display: block; }
.filter-empty b { display: block; font-family: var(--display); font-weight: 400; font-size: 32px; letter-spacing: -1px; color: var(--ink); margin-bottom: 8px; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.more-card { position: relative; display: block; min-height: 300px; border-radius: 22px; overflow: hidden; background: #222 center / cover; color: #fff; }
.more-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0) 60%); }
.more-card h3 { position: absolute; left: 24px; bottom: 22px; z-index: 1; font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: -1px; }
.more-card:hover h3 { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 6px; }

/* ---------- about ---------- */
/* book a call: region funnel */
.region-pick { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.region-pick h3 { font-family: var(--display); font-weight: 400; font-size: 36px; letter-spacing: -1px; margin-bottom: 8px; }
.region-pick p { color: var(--text-grey); margin-bottom: 22px; }
.region-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.region-cards.three { grid-template-columns: repeat(3, 1fr); }
.region-card .flag { display: block; width: 54px; height: 36px; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(10,13,20,.08); margin-bottom: 8px; }
.region-card .flag svg { display: block; width: 100%; height: 100%; }
.step-label { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-grey); margin-bottom: 12px; }
.step-label.center { display: block; text-align: center; margin: 0 0 14px; }
.region-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 24px 26px; border-radius: 22px; background: #fff; border: 1.5px solid var(--border-light); box-shadow: 0 30px 60px -50px rgba(10,13,20,.35); transition: transform .4s var(--ease-out), border-color .25s, box-shadow .4s; cursor: pointer; font: inherit; color: var(--ink); }
.region-card:hover { transform: translateY(-3px); border-color: #D0D0D0; }
.region-card[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(247,235,42,.55), 0 30px 60px -50px rgba(10,13,20,.35); }
.region-card .badge { display: inline-block; padding: 6px 11px; border-radius: 999px; background: var(--yellow); font-size: 12px; font-weight: 700; letter-spacing: .02em; margin-bottom: 6px; }
.region-card b { font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
.region-card small { color: var(--text-grey); font-size: 14px; }
.cal-wrap[hidden] { display: none; }
/* careers (redesign): avatar strip, role rows, life quote + socials, icon list, timeline */
.team-strip { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; flex-wrap: wrap; color: var(--text-grey); font-size: 14px; }
.avatar-stack { display: flex; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: #2a2a2a center 12% / 150% no-repeat; border: 3px solid #fff; box-shadow: 0 6px 16px -8px rgba(10,13,20,.5); margin-left: -12px; transition: transform .4s var(--ease-out); }
.avatar:first-child { margin-left: 0; }
.avatar:hover { transform: translateY(-6px) scale(1.12); z-index: 2; position: relative; }
.roles-section { padding-top: 40px; }
.role-list { border-top: 1px solid var(--border-light); }
.role-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 28px; align-items: start; padding: 38px 18px; border-bottom: 1px solid var(--border-light); border-radius: 18px; transition: background-color .35s; }
.role-row:hover { background: var(--grey-bg); }
.role-icon i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: var(--yellow); }
.role-icon svg { width: 28px; height: 28px; }
.role-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.role-head h3 { font-family: var(--display); font-weight: 400; font-size: 38px; letter-spacing: -1.2px; line-height: 1; color: var(--ink); }
.role-sub { color: var(--text-grey); font-size: 15px; }
.role-main > p { color: var(--text-grey-2); margin: 10px 0 14px; max-width: 720px; }
.role-main .meta { display: flex; flex-wrap: wrap; gap: 8px; }
.role-main .meta li { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border-light); background: #fff; color: var(--ink); }
.role-main .meta li.pay { background: var(--ink); color: var(--yellow); border-color: var(--ink); }
.role-more { margin-top: 14px; }
.role-more summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.role-more summary::-webkit-details-marker { display: none; }
.role-more summary svg { width: 14px; height: 14px; transition: transform .3s; }
.role-more[open] summary svg { transform: rotate(180deg); }
.role-more .checks { margin: 14px 0 0; max-width: 640px; }
.role-cta { padding-top: 6px; }
.role-cta .btn { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.role-cta .btn svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.role-row:hover .role-cta .btn svg { transform: translateX(4px); }
.life-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.life-quote blockquote { font-family: var(--display); font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: -1px; margin: 18px 0 14px; }
.life-quote cite { font-style: normal; color: var(--white-84); font-size: 14px; }
.socials { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.socials-label { font-size: 13px; font-weight: 600; color: var(--white-84); margin-right: 6px; }
.socials.on-light .socials-label { color: var(--text-grey); }
.social-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 14px; font-weight: 600; transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out); }
.social-btn svg { width: 18px; height: 18px; }
.social-btn:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); transform: translateY(-2px); }
.socials.on-light .social-btn { border-color: var(--border-light); color: var(--ink); background: #fff; }
.icon-list { display: grid; gap: 22px; }
.icon-list.two { grid-template-columns: 1fr 1fr; gap: 28px 40px; max-width: 1000px; margin: 0 auto; }
.icon-list li { display: flex; gap: 16px; align-items: flex-start; }
.icon-list li i { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--yellow); }
.icon-list li i svg { width: 22px; height: 22px; }
.icon-list b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.3px; margin-bottom: 4px; color: var(--ink); }
.icon-list p { color: var(--text-grey-2); font-size: 15px; }
.icon-list.dark b { color: #fff; }
.icon-list.dark p { color: var(--white-84); }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; list-style: none; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; border-top: 2px dashed #D6D6D6; }
.timeline li { position: relative; }
.tl-icon { position: relative; display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; background: var(--yellow); margin-bottom: 18px; box-shadow: 0 0 0 8px var(--grey-bg); }
.tl-icon svg { width: 26px; height: 26px; }
.tl-icon em { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--yellow); font-style: normal; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.timeline h3 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: -1px; margin-bottom: 8px; color: var(--ink); }
.timeline p { color: var(--text-grey-2); font-size: 15px; }
/* keep exploring (internal links on every inner page) */
.related-wrap { padding: 0 0 70px; }
.related { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 28px; border-top: 1px solid var(--border-light); }
.related-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-grey); margin-right: 8px; }
.related a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--border-light); background: #fff; font-size: 14px; font-weight: 600; color: var(--ink); transition: border-color .25s, transform .3s var(--ease-out), background-color .25s; }
.related a svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.related a:hover { border-color: var(--ink); transform: translateY(-2px); }
.related a:hover svg { transform: translateX(3px); }
.dark + .related-wrap, .section.dark + .related-wrap { padding-top: 60px; }
/* contact: client video band, grey that fades in from white and back out, so neither edge is hard */
.section.proof-band { background: linear-gradient(to bottom, #fff 0, var(--grey-bg) 170px, var(--grey-bg) calc(100% - 170px), #fff 100%); padding: 150px 0; }
.about-copy .checks.one { grid-template-columns: 1fr; margin: 22px 0 28px; }
.proof-band .vnav { background: #fff; }
/* about: client video stack (front card plays, the next ones run muted behind it) */
.vstack { position: relative; width: 100%; max-width: 540px; justify-self: end; }
.vstack-cards { position: relative; height: 540px; touch-action: pan-y; }
.vcard { position: absolute; top: 0; left: 50%; width: 304px; height: 540px; margin-left: -190px; border-radius: 26px; overflow: hidden; background: #111; cursor: pointer; box-shadow: 0 34px 60px -30px rgba(10,13,20,.55), 0 0 0 1px rgba(10,13,20,.06);
  transition: transform .75s cubic-bezier(.22,.8,.2,1), opacity .6s ease, filter .6s ease; will-change: transform; }
.vcard video, .vcard .vfull, .vcard .vida-embed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.vcard .vida-embed { padding: 0; }
.vcard::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0)); pointer-events: none; transition: opacity .4s; }
.vcard[data-pos="0"] { transform: translateX(0) scale(1) rotate(0); z-index: 4; }
.vcard[data-pos="1"] { transform: translateX(96px) scale(.9) rotate(4deg); z-index: 3; filter: brightness(.72); }
.vcard[data-pos="2"] { transform: translateX(176px) scale(.8) rotate(8deg); z-index: 2; filter: brightness(.55); opacity: .9; }
.vcard[data-pos="3"] { transform: translateX(-70px) scale(.82) rotate(-5deg); z-index: 1; opacity: 0; pointer-events: none; }
.vcard:not([data-pos="0"]):hover { filter: brightness(.9); }
.vplay { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; border: 0; background: var(--yellow); color: var(--ink); display: grid; place-items: center; z-index: 2; box-shadow: 0 0 0 10px rgba(247,235,42,.25); transition: transform .35s var(--ease-out), opacity .3s; cursor: pointer; }
.vplay svg { width: 22px; height: 22px; margin-left: 4px; }
.vcard:hover .vplay { transform: scale(1.08); }
.vcard:not([data-pos="0"]) .vplay { opacity: 0; pointer-events: none; }
.vmeta { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; color: #fff; }
.vmeta b { display: block; font-family: var(--display); font-weight: 400; font-size: 28px; letter-spacing: -.8px; line-height: 1; }
.vmeta span { display: block; font-size: 13px; opacity: .85; margin-top: 4px; }
.vcard.playing .vplay, .vcard.playing .vmeta, .vcard.playing::after { opacity: 0; pointer-events: none; }
.vstack-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-right: 20px; }
.vstack-cap { margin: 0; min-height: 44px; }
.vstack-cap b { display: block; font-weight: 600; color: var(--ink); font-size: 16px; }
.vstack-cap span { display: block; font-size: 13.5px; color: var(--text-grey); margin-top: 2px; }
.vstack-nav { display: flex; align-items: center; gap: 10px; flex: none; }
.vnav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-light); background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: border-color .25s, transform .3s var(--ease-out); }
.vnav svg { width: 18px; height: 18px; }
.vnav:hover { border-color: var(--ink); transform: translateY(-2px); }
.vdots { display: flex; gap: 6px; }
.vdot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: #D6D6D6; cursor: pointer; transition: width .35s var(--ease-out), background-color .3s; }
.vdot[aria-current="true"] { width: 22px; background: var(--ink); }
/* about (redesign) */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 70px; padding: 0; list-style: none; }
.facts li { padding: 22px 24px; border-radius: 20px; background: var(--grey-bg); }
.facts b { display: block; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -1.5px; color: var(--ink); margin-bottom: 6px; }
.facts span { font-size: 14px; color: var(--text-grey); }
.about-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.about-copy .h2 { margin: 14px 0 20px; }
.about-copy p { color: var(--text-grey-2); font-size: 17px; line-height: 1.6; }
.about-copy p + p { margin-top: 14px; }
.about-copy .btn { margin-top: 26px; }
.about-video { width: 100%; max-width: 520px; height: 560px; justify-self: end; }
.about-video.vida-card { height: auto; margin: 0; }
.about-video .vida-embed { width: 100%; position: relative; padding-top: 56.25%; border-radius: 22px; overflow: hidden; background: #0c0e13; box-shadow: 0 30px 60px -34px rgba(10,13,20,.5); }
.about-video figcaption { margin-top: 14px; font-size: 14px; color: var(--text-grey); }
.about-video figcaption b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.quote-band { padding: 80px 0; }
.pull-quote { max-width: 860px; margin: 0 auto; text-align: center; }
.pull-quote .qlogo { display: block; height: 40px; width: auto; margin: 0 auto 22px; }  /* metro-roof-logo.png has a transparent background */
.pull-quote blockquote { font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1.2; letter-spacing: -1px; color: var(--ink); }
.pull-quote blockquote em { font-style: italic; }
.pull-quote figcaption { margin-top: 18px; color: var(--text-grey); font-size: 14px; }
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.role-card { display: flex; flex-direction: column; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 30px; transition: transform .5s var(--ease-out), border-color .4s; }
.role-card:hover { transform: translateY(-4px); border-color: rgba(247,235,42,.6); }
.role-card .kind { display: inline-block; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px; background: var(--yellow); color: var(--ink); }
.role-card h3 { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: -1px; line-height: 1.05; margin: 18px 0 4px; }
.role-card .sub { display: block; color: rgba(255,255,255,.7); font-size: 14px; margin-bottom: 14px; }
.role-card p { color: var(--white-84); font-size: 15px; }
.role-card .checks.one { grid-template-columns: 1fr; margin: 18px 0 18px; }
.role-card .checks li { color: #fff; font-size: 14.5px; align-items: flex-start; }
.role-card .checks li::before { margin-top: 3px; }
.role-card .pay { font-weight: 600; color: var(--yellow); font-size: 14px; margin-bottom: 22px; }
.role-card .btn { margin-top: auto; align-self: flex-start; }
.form select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%230A0D14' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 16px no-repeat; padding-right: 40px; }
.form select:invalid { color: #A8A69C; }
.form select:focus { outline: none; border-color: #F5C518; box-shadow: 0 0 0 4px rgba(244,225,74,.28); }
.form > input { margin-bottom: 12px; }
/* legal */
.prose.policy { max-width: 820px; margin: 0 auto; }
.prose.policy h3 { font-size: 30px; margin: 42px 0 10px; }
.prose.policy h4 { font-size: 19px; font-weight: 600; margin: 24px 0 8px; color: var(--ink); }
.prose.policy .effective { color: var(--text-grey); }
.page-hero .intro a { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.story { max-width: 820px; margin: 0 auto; text-align: center; }
.story p { color: var(--text-grey-2); font-size: 17px; line-height: 1.6; }
.story p + p { margin-top: 16px; }
.story .btn { margin-top: 30px; }
.quote-split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.quote-split .testi-video { height: 560px; }
.quote-split .qh { font-family: var(--display); font-weight: 400; font-size: 46px; letter-spacing: -1.5px; line-height: 1.1; margin-bottom: 20px; }
.quote-split .qh em { font-style: italic; }
.quote-split .qlogo { height: 46px; width: auto; margin-bottom: 20px; }
.quote-split p { color: var(--text-grey-2); }
.quote-split p + p { margin-top: 12px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.team-card { position: relative; min-height: 440px; border-radius: 22px; overflow: hidden; background: #2A2A2A; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); isolation: isolate; }
.team-card .photo { position: absolute; inset: 0; background: center top / cover no-repeat; transition: transform 1s var(--ease-out); z-index: 1; }
/* the photos are cut-outs, so role pop-ups rise from behind the person on hover */
.team-card .pops { position: absolute; inset: 0; z-index: 0; }
.tpop { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #fff; color: var(--ink); white-space: nowrap; box-shadow: 0 16px 34px -16px rgba(0,0,0,.65), 0 0 0 1px rgba(10,13,20,.05); opacity: 0; transform: translateY(34px) scale(.8); transition: opacity .45s var(--ease-out), transform .8s cubic-bezier(.34,1.45,.64,1); transition-delay: calc(var(--i) * .16s); }
.tpop i { width: 30px; height: 30px; border-radius: 9px; background: var(--yellow); display: grid; place-items: center; flex: none; }
.tpop i svg { width: 16px; height: 16px; }
.tpop > span { display: flex; flex-direction: column; line-height: 1.15; }
.tpop small { font-size: 9.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; }
.tpop b { font-size: 12.5px; font-weight: 600; }
.tpop:nth-child(1) { left: 10px; top: 12%; }
.tpop:nth-child(2) { right: 10px; top: 40%; }
.team-card:hover .tpop { opacity: 1; transform: none; }
.team-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0) 55%); z-index: 2; }
.team-card h3, .team-card > span { position: relative; z-index: 3; }
.team-card h3 { font-family: var(--display); font-weight: 400; font-size: 32px; letter-spacing: -1px; display: inline-block; transition: transform .5s var(--ease-out); }
.team-card h3::after { content: ""; display: block; height: 3px; width: 0; margin-top: 4px; background: var(--yellow); border-radius: 3px; transition: width .5s var(--ease-out); }
.team-card > span { color: rgba(255,255,255,.8); font-size: 14px; display: block; transform: translateY(6px); opacity: .85; transition: transform .5s var(--ease-out), opacity .5s; }
.team-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.team-card:hover .photo { transform: scale(1.06); }
.team-card:hover h3 { transform: translateY(-4px); }
.team-card:hover h3::after { width: 44px; }
.team-card:hover > span { transform: none; opacity: 1; color: var(--yellow); }

/* ---------- contact / book a call ---------- */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.contact-split .page-hero { margin-top: 0; padding: 0; background: none; }
.contact-lines { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 22px 0 26px; }
.contact-lines a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.contact-lines svg { width: 18px; height: 18px; }
.contact-art { position: relative; perspective: 1200px; }
.contact-art::before { content: ""; position: absolute; left: 10%; right: 10%; top: 12%; bottom: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(247,235,42,.5), rgba(247,235,42,.12) 55%, rgba(247,235,42,0)); filter: blur(24px); animation: glowPulse 6s ease-in-out infinite; z-index: 0; }
.contact-art .laptop { position: relative; z-index: 1; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s linear; animation: floaty 7s ease-in-out infinite; }
.contact-art img { width: 100%; height: auto; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,0) 96%); mask-image: linear-gradient(to bottom, #000 74%, rgba(0,0,0,0) 96%); filter: drop-shadow(0 30px 40px rgba(10,13,20,.25)); }
.contact-art::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -6px; height: 70px; background: radial-gradient(closest-side, rgba(10,13,20,.22), rgba(10,13,20,0)); z-index: 0; }
.float-pill { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: #fff; box-shadow: 0 14px 30px -14px rgba(10,13,20,.4), 0 0 0 1px rgba(10,13,20,.05); font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; animation: floaty 6s ease-in-out infinite; }
.float-pill i { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 4px rgba(34,197,94,.2); }
.float-pill svg { width: 15px; height: 15px; }
.float-pill.p1 { left: -6px; top: 16%; animation-delay: -2.2s; }
.float-pill.p2 { right: -10px; top: 54%; animation-delay: -4.4s; }
.cal-wrap { max-width: 1160px; margin: 30px auto 0; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--border-light); box-shadow: 0 40px 80px -50px rgba(10,13,20,.35); }
.calendly-inline-widget { min-width: 320px; height: 780px; }
.call-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 980px; margin: 34px auto 0; text-align: left; }
.call-points .box { background: #fff; border-color: var(--border-light); padding: 22px; }
.call-points .box h3 { font-size: 22px; color: var(--ink); }
.call-points .box p { color: var(--text-grey); font-size: 14.5px; }

/* ---------- articles ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card { display: block; background: #fff; border: 1px solid var(--border-light); border-radius: 22px; overflow: hidden; color: inherit; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.post-card:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -36px rgba(10,13,20,.3); }
.post-card .img { aspect-ratio: 16 / 9; background: #E9E9E6 center / cover; }
.post-card .body { padding: 20px 22px 24px; }
.post-card h3 { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.post-card .date { font-size: 13px; color: var(--text-grey); margin-bottom: 10px; }
.post-card p { font-size: 14.5px; color: var(--text-grey-2); }
.post-hero { padding: 70px 0 40px; text-align: center; background: linear-gradient(to bottom, var(--grey-bg), #fff); }
.post-hero .kicker { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-grey); margin-bottom: 18px; }
.post-hero h1 { font-family: var(--display); font-weight: 400; font-size: 66px; letter-spacing: -2px; line-height: 1.06; max-width: 900px; margin: 0 auto; }
.post-meta { display: flex; gap: 22px; justify-content: center; margin-top: 18px; font-size: 14px; color: var(--text-grey); }
.post-meta span { display: inline-flex; align-items: center; gap: 6px; }
.post-meta svg { width: 14px; height: 14px; color: var(--ink); }
.post-layout { display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: start; }
.post-side { position: sticky; top: 110px; background: var(--dark); color: #fff; border-radius: 24px; padding: 24px; }
.post-side h4 { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: -1px; margin-bottom: 16px; }
.side-post { display: block; color: #fff; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.1); }
.side-post .img { aspect-ratio: 16 / 9; border-radius: 12px; background: #E9E9E6 center / cover; margin-bottom: 12px; }
.side-post b { display: block; font-size: 16px; font-weight: 600; }
.side-post small { display: block; color: rgba(255,255,255,.65); margin: 4px 0 8px; }
.side-post .link-more { font-size: 12px; color: var(--yellow); }
.post-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 44px; padding: 16px 20px; border-radius: 16px; background: var(--dark); }
.post-nav a { color: var(--yellow); font-family: var(--label); font-weight: 900; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.post-nav a svg { width: 16px; height: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .page-hero h1 { font-size: 56px; }
  .section { padding: 72px 0; }
  .section.dark.soft-top::before { top: -260px; height: 260px; }
  .section:has(+ .section.dark.soft-top) { padding-bottom: 170px; }
  .svc-row { grid-template-columns: 1fr; padding: 32px; }
  .svc-row:nth-child(even) .svc-copy { order: 0; margin-left: 0; }
  .svc-copy { max-width: none; }
  .prose .results { grid-template-columns: 1fr; }
  .stat-strip, .process, .boxes.four, .counters, .more-grid, .team-grid, .proj-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .split, .post-layout { grid-template-columns: 1fr; }
  .form-card, .delivered, .post-side { position: static; }
  .highlight, .quote-split, .contact-split { grid-template-columns: 1fr; }
  .roles { grid-template-columns: 1fr; }
  .region-cards, .region-cards.three { grid-template-columns: 1fr; }
  .role-row { grid-template-columns: 56px minmax(0, 1fr); }
  .role-icon i { width: 52px; height: 52px; border-radius: 14px; }
  .role-cta { grid-column: 2; }
  .life-grid, .about-split, .icon-list.two { grid-template-columns: 1fr; }
  .about-video { margin-left: 0; max-width: none; height: 440px; }
  .vstack { justify-self: center; max-width: 460px; margin: 0 auto; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline::before { display: none; }
  .facts { grid-template-columns: 1fr 1fr; }
  .float-pill.p1 { left: 4px; } .float-pill.p2 { right: 4px; }
  .quote-split .testi-video { height: 420px; }
  .call-points { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .page-hero { padding: calc(40px + var(--header-h)) 0 30px; }
  .page-hero h1 { font-size: 42px; letter-spacing: -1.2px; }
  .page-hero .intro { font-size: 16px; }
  .section { padding: 56px 0; }
  .section.dark.soft-top::before { top: -180px; height: 180px; }
  .section:has(+ .section.dark.soft-top) { padding-bottom: 130px; }
  .about-video.vida-card { height: auto; }
  .svc-row { padding: 22px; border-radius: 22px; }
  .svc-row h2 { font-size: 34px; }
  .role-head h3 { font-size: 30px; }
  .section.proof-band { padding: 90px 0; background: linear-gradient(to bottom, #fff 0, var(--grey-bg) 110px, var(--grey-bg) calc(100% - 110px), #fff 100%); }
  .vstack { overflow: hidden; padding-top: 6px; }
  .vstack-cards { height: 440px; }
  .vcard { width: 248px; height: 440px; margin-left: -150px; border-radius: 22px; }
  .vcard[data-pos="1"] { transform: translateX(62px) scale(.9) rotate(3deg); }
  .vcard[data-pos="2"] { transform: translateX(110px) scale(.8) rotate(6deg); }
  .vstack-bar { padding-right: 0; flex-wrap: wrap; }
  .role-row { padding: 26px 10px; gap: 16px; }
  .life-quote blockquote, .pull-quote blockquote { font-size: 27px; }
  .timeline { grid-template-columns: 1fr; }
  .facts b { font-size: 36px; }
  .team-strip { gap: 12px; }
  .checks { grid-template-columns: 1fr; }
  .hl-media .chip-stat small { max-width: 110px; }
  .stat-strip, .process, .boxes, .boxes.four, .counters, .more-grid, .team-grid, .proj-grid, .post-grid { grid-template-columns: 1fr; }
  .stat-card .big { font-size: 48px; }
  .prose h2 { font-size: 32px; }
  .prose h3 { font-size: 25px; }
  .form .row2 { grid-template-columns: 1fr; }
  .highlight { padding: 26px; }
  .highlight h2 { font-size: 32px; }
  .quote-split .qh { font-size: 34px; }
  .team-card { min-height: 380px; }
  .post-hero h1 { font-size: 38px; }
  .calendly-inline-widget { height: 1000px; }
  .counter .stat-num { font-size: 50px; }
}

/* ---------- service pages, restructured (14 Sep 2026) ---------- */
.prose ul.checks, .prose ul.checks li { list-style: none; }
.prose ul.checks { padding-left: 0; }
.checks.one { grid-template-columns: 1fr; }
.svc-top { padding-top: 10px; padding-bottom: 50px; }
.svc-hero-art.wide { max-width: 1100px; margin: 0 auto; aspect-ratio: 1304 / 620; }
.stat-row { list-style: none; padding: 0; margin: 18px auto 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.stat-row li { background: var(--grey-bg); border-radius: 20px; padding: 22px 24px; }
.stat-row b { display: block; font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -1.5px; color: var(--ink); margin-bottom: 8px; }
.stat-row span { font-size: 14.5px; color: var(--text-grey); }
.why-band { padding-top: 40px; }
.why-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
.why-copy .h2 { margin: 14px 0 18px; }
.why-copy p { color: var(--text-grey-2); font-size: 17px; line-height: 1.6; }
.why-copy p + p { margin-top: 14px; }
.why-copy .btn { margin-top: 26px; }
.who-card { background: #fff; border: 1px solid var(--border-light); border-radius: 26px; padding: 32px; box-shadow: 0 30px 60px -44px rgba(10,13,20,.3); }
.who-card h3 { font-family: var(--display); font-weight: 400; font-size: 34px; letter-spacing: -1px; }
.who-card .checks.one { grid-template-columns: 1fr; margin: 16px 0 0; gap: 14px; }
.boxes.three { grid-template-columns: repeat(3, 1fr); }
.timeline.on-white .tl-icon { box-shadow: 0 0 0 8px #fff; }
.case-band { padding-top: 40px; }
.highlight .eyebrow.light { margin-bottom: 16px; }
.highlight .btn { margin-top: 22px; }
.enquire-split .others-h { font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: -.8px; margin: 36px 0 10px; color: var(--ink); }
.other-links { display: flex; flex-direction: column; border-top: 1px solid var(--border-light); }
.other-links a { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-light); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; transition: padding-left .3s var(--ease-out); }
.other-links a img { width: 22px; height: 22px; }
.other-links a svg { width: 16px; height: 16px; margin-left: auto; transition: transform .3s var(--ease-out); }
.other-links a:hover { padding-left: 6px; }
.other-links a:hover svg { transform: translateX(4px); }

/* ---------- blog ---------- */
.cat { display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--yellow); color: var(--ink); }
.blog-feature { padding-top: 20px; padding-bottom: 40px; }
.feature-post { display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; border: 1px solid var(--border-light); border-radius: 28px; overflow: hidden; color: inherit; box-shadow: 0 40px 80px -60px rgba(10,13,20,.4); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
.feature-post:hover { transform: translateY(-4px); box-shadow: 0 50px 90px -60px rgba(10,13,20,.5); }
.feature-post .img { min-height: 400px; background: #111 center / cover no-repeat; }
.feature-post .body { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.feature-post h2 { font-family: var(--display); font-weight: 400; font-size: 44px; line-height: 1.08; letter-spacing: -1.5px; margin: 16px 0 14px; color: var(--ink); }
.feature-post p { color: var(--text-grey-2); font-size: 16px; }
.feature-post .date { font-size: 13px; color: var(--text-grey); margin-top: 16px; }
.feature-post .read-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-weight: 600; color: var(--ink); }
.feature-post .read-more svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.feature-post:hover .read-more svg { transform: translateX(4px); }
.post-card .img { background-color: #111; }
.post-card .body .cat { margin-bottom: 12px; }
.post-card h3 { line-height: 1.25; }
.post-card .body .date { margin: 14px 0 0; }
.post-hero-2 h1 { font-size: 60px; max-width: 980px; }
.crumbs { display: flex; justify-content: center; gap: 8px; font-size: 14px; color: var(--text-grey); margin-bottom: 18px; }
.crumbs a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-hero-2 .post-meta { margin-top: 22px; flex-wrap: wrap; }
.post-cover-wrap { padding: 0 0 40px; }
.post-cover { display: block; width: 100%; max-width: 1100px; height: auto; margin: 0 auto; border-radius: 26px; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: 0 40px 80px -50px rgba(10,13,20,.45); }
.post-body { padding-top: 10px; }
.article { max-width: 720px; }
.article p, .article li { font-size: 17.5px; line-height: 1.7; }
.article h2 { margin-top: 48px; }
.article a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article .post-nav a { color: var(--yellow); text-decoration: none; font-weight: 900; }
.article .takeaways { background: var(--grey-bg); border-radius: 22px; padding: 26px 28px; margin-bottom: 36px; }
.article .takeaways h2 { font-size: 26px; margin: 0 0 6px; }
.article .takeaways .checks.one { grid-template-columns: 1fr; margin: 8px 0 0; gap: 10px; }
.article .takeaways .checks li { font-size: 15.5px; line-height: 1.5; align-items: flex-start; }
.article .takeaways .checks li::before { margin-top: 3px; }
.callout { display: flex; gap: 14px; align-items: flex-start; background: #fffbe0; border: 1px solid #f3e9a0; border-radius: 18px; padding: 20px 22px; margin: 28px 0; }
.callout i { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--yellow); display: grid; place-items: center; }
.callout i svg { width: 18px; height: 18px; }
.article .callout p { margin: 0; font-weight: 600; color: var(--ink); font-size: 17px; }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 48px 0 0; }
.pager a, .pager .pg-num { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; height: 46px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line, #E6E6E1); background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.pager a:hover { background: var(--yellow); border-color: var(--yellow); transform: translateY(-2px); }
.pager .pg-num.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pager svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .pager { gap: 8px; } .pager a, .pager .pg-num { min-width: 42px; height: 42px; padding: 0 12px; font-size: 14px; } }
.table-wrap { margin: 26px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 18px; border: 1px solid var(--line, #E6E6E1); }
.table-wrap table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 15.5px; }
.table-wrap th, .table-wrap td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line, #E6E6E1); color: var(--text-grey-2); line-height: 1.5; vertical-align: top; }
.table-wrap thead th { background: var(--grey-bg); color: var(--ink); font-weight: 600; font-size: 14px; letter-spacing: .01em; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.table-wrap td:first-child { color: var(--ink); font-weight: 600; }
.post-side-2 { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 16px; }
.side-card { background: #fff; border: 1px solid var(--border-light); border-radius: 22px; padding: 24px; }
.side-card.service { background: var(--dark); color: #fff; border-color: var(--dark); }
.side-card h3 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: -1px; margin: 12px 0 8px; }
.side-card h4 { font-size: 17px; font-weight: 600; margin-bottom: 6px; color: var(--ink); }
.side-card p { font-size: 14.5px; color: var(--text-grey-2); }
.side-card.service p { color: var(--white-84); }
.side-card .btn { margin-top: 16px; }
.link-strong { display: inline-flex; gap: 8px; align-items: center; margin-top: 12px; font-weight: 600; color: var(--ink); }
.link-strong svg { width: 16px; height: 16px; }
@media (max-width: 1024px) {
  .why-split, .feature-post { grid-template-columns: 1fr; }
  .why-split { gap: 36px; }
  .boxes.three { grid-template-columns: repeat(2, 1fr); }
  .post-side-2 { position: static; }
  .feature-post .img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 767px) {
  .stat-row, .boxes.three { grid-template-columns: 1fr; }
  .svc-hero-art.wide { aspect-ratio: 4 / 3; }
  .stat-row b { font-size: 38px; }
  .who-card { padding: 24px; }
  .feature-post .body { padding: 26px; }
  .feature-post h2 { font-size: 32px; }
  .post-hero-2 h1 { font-size: 36px; }
  .article p, .article li { font-size: 16.5px; }
  .article .takeaways { padding: 22px; }
}

/* ---------- 404 (17 Sep 2026): the homepage's pin and city chips, with every city "not found" ---------- */
.nf-hero { padding-bottom: 96px; }
.nf-hero h1 { font-size: 64px; text-wrap: balance; }
.nf-stage { position: relative; height: 320px; max-width: 1100px; margin: 4px auto 18px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.nf-stage .chip-rows { padding-bottom: 0; opacity: .6; }
.nf-stage .chip { font-size: 21px; padding: 11px 18px; }
.nf-stage:hover .chip-track { animation-play-state: paused; }
/* the chips fade out behind the numerals (a mask, so it works over the hero glow at any width) */
.nf-stage .chip-rows { -webkit-mask-image: radial-gradient(ellipse 44% 130% at 50% 50%, transparent 58%, #000 100%); mask-image: radial-gradient(ellipse 44% 130% at 50% 50%, transparent 58%, #000 100%); }
.nf-code { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 18px; font-family: var(--display); font-weight: 400; font-size: 250px; line-height: 1; letter-spacing: -8px; color: var(--ink); }
.nf-code > span:not(.nf-pin) { display: block; opacity: 0; transform: translateY(26px); animation: nf-rise .9s var(--ease-out) .1s forwards; }
.nf-code > span:last-child { animation-delay: .22s; }
.nf-pin { position: relative; display: block; width: 150px; height: 190px; margin: 0 4px; filter: drop-shadow(0 16px 16px rgba(10,13,20,.22)); opacity: 0; transform: translateY(-80px); animation: nf-drop 1s cubic-bezier(.34,1.4,.64,1) .45s forwards; }
.nf-pin svg { position: relative; display: block; width: 100%; height: 100%; animation: nf-bob 3.6s ease-in-out 1.6s infinite; transform-origin: 50% 100%; }
/* the pin is still searching: a slow radar pulse under its tip */
.nf-pin i { position: absolute; left: 50%; bottom: -12px; width: 120px; height: 34px; margin-left: -60px; border-radius: 50%; border: 2px solid rgba(10,13,20,.28); opacity: 0; animation: nf-ping 2.8s var(--ease-out) 1.5s infinite; }
@keyframes nf-rise { to { opacity: 1; transform: none; } }
@keyframes nf-drop { to { opacity: 1; transform: none; } }
@keyframes nf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes nf-ping { 0% { opacity: .7; transform: scale(.25); } 80%, 100% { opacity: 0; transform: scale(1.15); } }
.nf-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; max-width: 760px; margin: 26px auto 0; }
.nf-suggest span { font-size: 15px; font-weight: 600; color: var(--text-grey); margin-right: 2px; }
.nf-suggest a { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: #fff; border: 1.5px solid var(--ink); box-shadow: 0 0 0 4px rgba(247,235,42,.55); font-size: 15px; font-weight: 600; color: var(--ink); transition: transform .3s var(--ease-out), background-color .25s; animation: nf-rise .7s var(--ease-out) both; transform: translateY(12px); }
.nf-suggest a + a { border-color: var(--border-light); box-shadow: none; }
.nf-suggest a:hover { background: var(--yellow); transform: translateY(-2px); }
.nf-suggest a svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.nf-suggest a:hover svg { transform: translateX(3px); }
.nf-hero .hero-cta .ghost:hover svg { transform: translateX(3px); }
@media (max-width: 1024px) {
  .nf-hero h1 { font-size: 52px; }
  .nf-stage { height: 270px; }
  .nf-code { font-size: 190px; letter-spacing: -6px; gap: 12px; }
  .nf-pin { width: 114px; height: 144px; }
  .nf-pin i { width: 92px; height: 26px; margin-left: -46px; bottom: -9px; }
}
@media (max-width: 767px) {
  .nf-hero h1 { font-size: 38px; letter-spacing: -1px; }
  .nf-stage { height: 200px; margin-bottom: 10px; }
  .nf-stage .chip { font-size: 15px; padding: 8px 12px; }
  .nf-code { font-size: 128px; letter-spacing: -4px; gap: 8px; }
  .nf-stage .chip-rows { -webkit-mask-image: radial-gradient(ellipse 62% 130% at 50% 50%, transparent 62%, #000 100%); mask-image: radial-gradient(ellipse 62% 130% at 50% 50%, transparent 62%, #000 100%); }
  .nf-pin { width: 76px; height: 96px; margin: 0 2px; filter: drop-shadow(0 10px 10px rgba(10,13,20,.22)); }
  .nf-pin i { width: 62px; height: 18px; margin-left: -31px; bottom: -6px; }
  .nf-suggest { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-code > span:not(.nf-pin), .nf-pin, .nf-suggest a { opacity: 1; transform: none; animation: none; }
  .nf-pin svg, .nf-pin i, .nf-stage .chip-track { animation: none; }
}


/* ---------------------------------------------------------------- trade + location service pages (19 Sep 2026)
   Suburb chips, example search terms and the card grids that link the hubs to their city pages. */
.area-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 0; }
.area-chips li { background: var(--white); border: 1px solid var(--border-light); border-radius: 999px; padding: 10px 18px; font-weight: 600; font-size: 15px; color: var(--ink); }
.area-note { color: var(--text-grey); font-size: 16px; max-width: 760px; margin: 24px 0 0; }
.term-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0; }
.term-list li { background: var(--white); border: 1px solid var(--border-light); border-radius: 16px; padding: 16px 18px; }
.term-list li span { display: block; font-family: var(--label), var(--body); font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -.2px; }
.term-list li span::before { content: "“"; color: var(--text-grey); }
.term-list li span::after { content: "”"; color: var(--text-grey); }
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.loc-card { display: flex; flex-direction: column; gap: 4px; position: relative; background: var(--white); border: 1px solid var(--border-light); border-radius: 22px; padding: 24px 56px 24px 24px; color: var(--ink); text-decoration: none; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out); }
.grey .loc-card, .section.grey .loc-card { background: var(--white); }
.loc-card b { font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.loc-card span { color: var(--text-grey); font-size: 15px; }
.loc-card svg { position: absolute; right: 22px; top: 26px; width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.loc-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 18px 34px rgba(10,13,20,.08); }
.loc-card:hover svg { transform: translateX(4px); }
.loc-hero .crumbs { margin-bottom: 14px; }
/* inside the article column there is less room, so the search examples go two across */
.article .term-list { grid-template-columns: repeat(2, 1fr); margin: 22px 0 8px; }
.article .area-chips { margin: 22px 0 8px; }
.article .faq { margin-top: 26px; }
.post-side-2 .side-card .link-strong + .link-strong { margin-top: 10px; }
@media (max-width: 1024px) {
  .term-list, .loc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .term-list, .loc-grid { grid-template-columns: 1fr; }
  .area-chips li { padding: 8px 14px; font-size: 14px; }
  .loc-card { padding: 20px 48px 20px 20px; }
}


/* ---------------------------------------------------------------- video embeds (19 Sep 2026)
   Posts that reference one of Ben's videos embed it inside the article. */
.video-embed-wrap { margin: 30px 0; }
.video-embed { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: #111; box-shadow: 0 30px 60px -44px rgba(10,13,20,.5); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-cap { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; color: var(--text-grey); font-size: 14px; line-height: 1.45; }
.video-cap svg { width: 11px; height: 11px; fill: var(--ink); flex: none; }
.video-cap a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .video-embed { border-radius: 16px; }
  .video-cap { align-items: flex-start; font-size: 13px; }
  .video-cap svg { margin-top: 4px; }
}


/* ---------------------------------------------------------------- niche x city guides (19 Sep 2026)
   Written guide on the left, enquiry form in a rail that follows you down the page. No hero image:
   Ben asked for the "hero icon up top" to go. */
.guide-hero { text-align: left; padding-bottom: 26px; }
.guide-hero .container { max-width: 1180px; }
.guide-hero .crumbs { justify-content: flex-start; margin-bottom: 16px; }
.guide-hero h1 { max-width: 15ch; margin-left: 0; }
.guide-hero .intro { margin-left: 0; max-width: 62ch; }
.guide-hero .post-meta { justify-content: flex-start; margin-top: 18px; }
.guide-body { padding-top: 10px; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 54px; align-items: stretch; }
.prose.guide { max-width: none; }
.prose.guide h2 { margin-top: 44px; scroll-margin-top: 120px; }
.prose.guide h2:first-of-type { margin-top: 26px; }
.guide-rail { display: flex; flex-direction: column; gap: 16px; }
.guide-rail .form-card { top: 100px; padding: 26px; }
.guide-rail .form-card h3 { font-size: 26px; }
.rail-card { background: var(--white); border: 1px solid var(--border-light); border-radius: 22px; padding: 22px 24px; }
.rail-card h4 { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: -.5px; margin-bottom: 12px; }
.rail-card .link-strong { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-light); font-size: 15px; }
.rail-card .link-strong:first-of-type { border-top: 0; padding-top: 0; }
.rail-card.points { background: var(--dark); color: #fff; border-color: var(--dark); }
.rail-card.points h4 { color: #fff; }
.rail-card.points .checks li { color: var(--white-84); font-size: 15px; }
.guide-toc { background: var(--grey-bg); border-radius: 18px; padding: 20px 24px; margin-bottom: 30px; }
.guide-toc span { display: block; font-family: var(--label), var(--body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-grey); margin-bottom: 10px; }
.guide-toc ol { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.guide-toc li { counter-increment: toc; font-size: 15px; }
.guide-toc li::before { content: counter(toc) ". "; color: var(--text-grey); }
.guide-toc a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--yellow); }
.guide-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; list-style: none; padding: 0; margin: 0 0 30px; }
.guide-stats li { background: var(--white); border: 1px solid var(--border-light); border-radius: 18px; padding: 16px 18px; }
.guide-stats b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: -1px; line-height: 1.1; }
.guide-stats span { display: block; color: var(--text-grey); font-size: 14px; margin-top: 4px; }
.how-steps { list-style: none; padding: 0; margin: 24px 0 0; counter-reset: how; }
.how-steps li { position: relative; counter-increment: how; padding: 0 0 22px 56px; }
.how-steps li::before { content: counter(how); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--yellow); color: var(--ink); font-family: var(--label), var(--body); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.how-steps li::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 6px; width: 2px; background: var(--border-light); }
.how-steps li:last-child::after { display: none; }
.how-steps h3 { margin: 6px 0 6px; font-size: 21px; }
.how-steps p { margin: 0; }
.matrix-wrap { overflow-x: auto; margin: 24px 0 8px; }
.matrix { width: 100%; border-collapse: collapse; font-size: 15px; }
.matrix th, .matrix td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.matrix thead th { font-family: var(--label), var(--body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-grey); }
.matrix tbody th { white-space: nowrap; font-weight: 700; }
.matrix a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.matrix td a { display: inline-block; margin: 0 14px 6px 0; font-weight: 500; }
@media (max-width: 1024px) {
  .guide-layout { grid-template-columns: 1fr; gap: 34px; }
  .guide-rail { position: static; }
  .guide-rail .form-card { position: static; }
  .guide-hero h1 { max-width: none; }
  .guide-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .guide-stats { grid-template-columns: 1fr; }
  .guide-toc ol { flex-direction: column; gap: 8px; }
  .how-steps li { padding-left: 46px; }
  .how-steps li::before { width: 32px; height: 32px; font-size: 14px; }
  .how-steps li::after { left: 16px; }
}


/* The guide components are lists, and .prose ul/ol would otherwise draw bullets and numbers
   through them (Ben, 19 Sep 2026: "these look real janky"). */
.prose ul.area-chips, .prose ul.term-list, .prose ol.how-steps, .prose .guide-toc ol,
.prose ul.guide-stats, .prose ul.area-chips li, .prose ul.term-list li, .prose ol.how-steps li,
.prose .guide-toc li, .prose ul.guide-stats li { list-style: none; }
.prose ul.area-chips, .prose ul.term-list, .prose ol.how-steps, .prose .guide-toc ol, .prose ul.guide-stats { padding-left: 0; }
.prose ul.area-chips li + li, .prose ul.term-list li + li, .prose ul.guide-stats li + li, .prose .guide-toc li + li { margin-top: 0; }
.prose ol.how-steps li + li { margin-top: 0; }
.prose ul.area-chips li::marker, .prose ul.term-list li::marker, .prose ol.how-steps li::marker,
.prose .guide-toc li::marker, .prose ul.guide-stats li::marker { content: none; }
.prose .area-chips { gap: 10px; }


/* ---------------------------------------------------------------- HTML sitemap (19 Sep 2026) */
.sitemap-cols { columns: 3; column-gap: 40px; }
.sitemap-group { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 28px; }
.sitemap-group h2 { font-family: var(--display); font-weight: 400; font-size: 24px; letter-spacing: -.6px; margin: 0 0 12px; }
.sitemap-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border-light); }
.sitemap-list li { border-bottom: 1px solid var(--border-light); }
.sitemap-list a { display: block; padding: 9px 0; color: var(--ink); font-size: 15px; text-decoration: none; transition: padding-left .25s var(--ease-out); }
.sitemap-list a:hover { padding-left: 6px; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* legal pages: real hierarchy now that the source is parsed rather than regexed */
.prose.policy h2 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: -1px; margin: 40px 0 12px; }
.prose.policy h2:first-child { margin-top: 0; }
.prose.policy h3 { font-size: 19px; font-weight: 700; letter-spacing: -.2px; margin: 26px 0 8px; }
.prose.policy p { margin: 0 0 14px; }
.prose.policy ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.prose.policy li { margin-top: 6px; }
.prose.policy .effective { display: inline-block; background: var(--grey-bg); border-radius: 999px; padding: 8px 18px; font-size: 15px; margin-bottom: 26px; }
@media (max-width: 1024px) { .sitemap-cols { columns: 2; } }
@media (max-width: 767px) { .sitemap-cols { columns: 1; } .prose.policy h2 { font-size: 26px; } }


/* ---------------------------------------------------------------- guide rail, single card (19 Sep 2026)
   The extra rail cards used to slide behind the sticky form, which read as clipping. The rail is now
   one card and the links it held sit at the end of the guide. */
.guide-rail .form-card .rail-points { margin: 0 0 18px; }
.guide-rail .form-card .rail-points li { font-size: 14px; color: var(--text-grey); }
.onward { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin: 44px 0 0; padding-top: 30px; border-top: 1px solid var(--border-light); }
.onward-group h3 { font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: -.5px; margin: 0 0 8px; }
.onward .link-strong { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border-light); font-size: 15px; }
.onward .link-strong svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 767px) { .onward { grid-template-columns: 1fr; gap: 20px; } }