/* ==========================================================================
   True North Partners - Redesign
   Palette : #f58634 (accent)  |  #606062 (neutral)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
    --orange: #f58634;
    --orange-d: #dd6f1c;
    --orange-l: #ffa563;
    --grey: #606062;
    --grey-d: #4a4a4c;
    --grey-l: #8a8a8d;

    --ink: #232325;
    --ink-2: #2e2e30;
    --white: #ffffff;
    --tint: #f7f6f4;
    --tint-2: #efedea;
    --line: rgba(96, 96, 98, .16);
    --line-light: rgba(255, 255, 255, .14);

    --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Sora', 'Inter', sans-serif;

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 26px;
    --r-xl: 36px;

    --shadow-s: 0 6px 20px rgba(35, 35, 37, .06);
    --shadow-m: 0 18px 48px rgba(35, 35, 37, .10);
    --shadow-l: 0 34px 80px rgba(35, 35, 37, .16);
    --shadow-o: 0 22px 44px rgba(245, 134, 52, .30);

    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --t: .45s var(--ease);

    --header-h: 88px;
    --gap: clamp(22px, 3vw, 44px);

    /* arrow-trend-up, used as a mask so it can take any colour */
    --icon-trend: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 10px);
    -webkit-text-size-adjust: 100%
}

body {
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--grey);
    background: var(--white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

body.is-locked {
    overflow: hidden
}

img {
    max-width: 100%;
    display: block;
    height: auto
}

a {
    color: inherit;
    text-decoration: none
}

ul,
ol {
    list-style: none
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer
}

svg {
    width: 100%;
    height: 100%;
    display: block
}

::selection {
    background: var(--orange);
    color: #fff
}

h1,
h2,
h3,
h4 {
    font-family: var(--display);
    color: var(--ink);
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -.02em
}

/* scrollbar */
::-webkit-scrollbar {
    width: 10px
}

::-webkit-scrollbar-track {
    background: var(--tint)
}

::-webkit-scrollbar-thumb {
    background: var(--grey-l);
    border-radius: 20px;
    border: 3px solid var(--tint)
}

::-webkit-scrollbar-thumb:hover {
    background: var(--orange)
}

/* ---------- 3. Layout helpers ---------- */
.container {
    width: min(100% - 40px, 1240px);
    margin-inline: auto
}

.full-container {
    width: calc(100% - 24px);
    margin-inline: auto
}

.section {
    padding: clamp(72px, 9vw, 130px) 0;
    position: relative
}

.section--tint {
    background: var(--tint)
}

.section--dark {
    background: var(--ink);
    color: rgba(255, 255, 255, .72)
}

/* The deeper orange, not --orange: the accent lands on white headings, where
   #f58634 reads at only 2.5:1 and misses even the 3:1 large-text bar.
   --orange-d clears it at 3.2:1 on white and 4.9:1 on the dark sections. */
.text-accent {
    color: var(--orange-d)
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--grey);
    background: rgba(96, 96, 98, .07);
    padding: 8px 16px;
    border-radius: 100px;
    margin-bottom: 22px;
    border: 1px solid var(--line);
}

/* arrow-trend-up glyph, painted with a mask so it inherits the accent colour.
   Drawn in CSS so every .eyebrow on every page picks it up automatically. */
.eyebrow .dot {
    width: 16px;
    height: 16px;
    flex: none;
    background: var(--orange);
    -webkit-mask: var(--icon-trend) center / contain no-repeat;
    mask: var(--icon-trend) center / contain no-repeat;
    animation: trendRise 2.8s var(--ease) infinite;
}

.eyebrow--light {
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .07);
    border-color: var(--line-light)
}

@keyframes trendRise {

    0%,
    100% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(1px, -2px)
    }
}

.section__head {
    max-width: 760px;
    margin: 0 auto clamp(44px, 5vw, 70px);
    text-align: center
}

.section__head--split {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: var(--gap);
    max-width: none;
    text-align: left;
    align-items: end;
}

.section__title {
    font-size: clamp(30px, 4.2vw, 52px)
}

.section__title--light {
    color: #fff
}

.section__lead {
    margin-top: 20px;
    font-size: clamp(15px, 1.5vw, 17.5px);
    color: var(--grey);
    max-width: 58ch
}

.section__lead--center {
    margin-inline: auto
}

.section__lead--light {
    color: rgba(255, 255, 255, .66)
}

.section__lead strong {
    color: var(--ink);
    font-weight: 600
}

.section--dark .section__lead strong {
    color: #fff
}

.split {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(38px, 6vw, 90px);
    align-items: start
}

.split--sticky .split__left {
    position: sticky;
    top: calc(var(--header-h) + 40px)
}

/* ---------- 4. Buttons ----------
   Shared hover: "liquid arc". A blob sitting under the button swells up and
   its curved top edge flattens as it arrives, so the fill reads as a wave
   rather than a straight wipe. The label sits above it and the arrow steps
   forward. Variants only change the resting look and the arc colour.       */
.btn {
    --btn-bg: var(--orange);
    /* resting fill  */
    --btn-fg: #fff;
    /* resting text  */
    --btn-bd: transparent;
    /* resting border*/
    --btn-arc: var(--ink);
    /* the rising arc*/
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    border-radius: 100px;
    overflow: hidden;
    isolation: isolate;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .01em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    transition: color .4s var(--ease), border-color .45s var(--ease),
        letter-spacing .5s var(--ease-out);
    white-space: nowrap;
}

/* the arc - parked below the button, curved along its top edge */
.btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    bottom: 0;
    /* height stays close to the button: the arc travels its own height, so a
       tall blob would finish covering in the first third of the animation */
    width: 132%;
    height: 145%;
    background: var(--btn-arc);
    border-radius: 46% 44% 0 0 / 40% 38% 0 0;
    transform: translate(-50%, 100%);
    transition: transform .62s cubic-bezier(.22, .61, .36, 1),
        border-radius .62s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}

.btn:hover::before,
.btn:focus-visible::before {
    transform: translate(-50%, 0);
    border-radius: 0;
}

.btn svg {
    width: 17px;
    height: 17px;
    flex: none;
    transition: transform .5s var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
    color: #fff;
    letter-spacing: .035em;
}

.btn:hover svg,
.btn:focus-visible svg {
    transform: translateX(4px);
}

.btn:active::before {
    transition-duration: .18s;
}

/* resting variants only */
.btn--solid {
    --btn-bg: var(--orange);
    --btn-arc: var(--ink);
}

.btn--ghost,
.btn--outline {
    --btn-bg: transparent;
    --btn-bd: var(--line-light);
    --btn-arc: var(--orange);
}

.btn--ghost:hover,
.btn--outline:hover,
.btn--ghost:focus-visible,
.btn--outline:focus-visible {
    border-color: var(--orange);
}

/* outline button sitting on a light background */
.btn--onlight {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--line);
    --btn-arc: var(--orange);
}

.btn--onlight:hover,
.btn--onlight:focus-visible {
    border-color: var(--orange);
}

.btn--sm {
    padding: 12px 22px;
    font-size: 13.5px
}

@media (prefers-reduced-motion:reduce) {
    .btn::before {
        border-radius: 0
    }
}
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    font-weight: 600;
    font-size: 14.5px;
    color: var(--ink);
    padding-bottom: 4px;
    position: relative;
}

.link-arrow svg {
    width: 17px;
    height: 17px;
    transition: transform .4s var(--ease-out)
}

.link-arrow::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1.5px;
    background: var(--orange);
    transform: scaleX(.3);
    transform-origin: left;
    transition: transform .45s var(--ease-out);
}

.link-arrow:hover {
    color: var(--orange)
}

.link-arrow:hover svg {
    transform: translateX(6px)
}

.link-arrow:hover::after {
    transform: scaleX(1)
}

/* ---------- 5. Preloader ---------- */
.tnp-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background: var(--ink);
    display: grid;
    place-items: center;
    /* plain fade out - no panel slide */
    transition: opacity .55s var(--ease), visibility .55s;
}

.tnp-preloader.is-done {
    opacity: 0;
    visibility: hidden;
}

/* display:grid above beats the default [hidden] rule, so say it explicitly -
   main.js sets the attribute once the fade is over and the panel should be
   gone rather than merely transparent */
.tnp-preloader[hidden] {
    display: none;
}

.preloader__logo {
    height: clamp(38px, 6vw, 58px);
    width: auto;
    animation: preLogo 1.9s var(--ease) infinite;
    transition: opacity .4s var(--ease), transform .5s var(--ease);
}

.tnp-preloader.is-done .preloader__logo {
    opacity: 0;
    animation: none;
}

@keyframes preLogo {

    0%,
    100% {
        opacity: .55;
        transform: scale(.98)
    }

    50% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ---------- 6. Scroll progress ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 1002;
    background: linear-gradient(90deg, var(--orange), var(--orange-l));
    transition: width .12s linear;
}

/* ---------- 7. Header ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-h);
    display: flex;
    align-items: center;
    transition: height .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
    border-bottom: 1px solid transparent;
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: min(100% - 40px, 1240px)
}

.brand {
    position: relative;
    display: block;
    flex: none;
    z-index: 2
}

.brand__img {
    height: 64px;
    width: auto;
    transition: opacity .35s var(--ease), height .4s var(--ease);
}

.brand__img--dark {
    position: absolute;
    top: 0;
    left: 0;
    /* not inset:0 - that stretches the logo to the box and distorts it */
    height: 100%;
    width: auto;
    opacity: 0
}

.site-header.is-stuck {
    height: 74px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(35, 35, 37, .07);
    border-bottom-color: var(--line);
}

.site-header.is-stuck .brand__img {
    height: 62px
}

.site-header.is-stuck .brand__img--light {
    opacity: 0
}

.site-header.is-stuck .brand__img--dark {
    opacity: 1
}

/* drawer-only header, revealed at the mobile breakpoint */
.nav__head {
    display: none
}

.nav__list {
    display: flex;
    align-items: center;
    gap: 4px
}

.nav__item {
    position: relative
}

.nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 15px;
    border-radius: 100px;
    font-size: 14.5px;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    transition: color .35s var(--ease), background .35s var(--ease);
}

.nav__caret {
    width: 13px;
    height: 13px;
    flex: none;
    transition: transform .4s var(--ease-out)
}

.nav__item--drop:hover .nav__caret {
    transform: rotate(180deg)
}

.nav__sub-btn {
    display: none
}

.nav__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--orange);
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity .35s var(--ease), transform .35s var(--ease-out);
}

.nav__link:hover {
    color: #fff
}

.nav__link.is-active {
    color: #fff
}

.nav__link.is-active::after {
    opacity: 1;
    transform: translate(-50%, 0)
}

.site-header.is-stuck .nav__link {
    color: var(--grey)
}

.site-header.is-stuck .nav__link:hover,
.site-header.is-stuck .nav__link.is-active {
    color: var(--ink);
    background: rgba(96, 96, 98, .06)
}

/* ----- Services mega menu ----- */
.mega {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 5;
    width: min(86vw, 760px);
    padding-top: 16px;
    transform: translateX(-50%) translateY(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s var(--ease), transform .5s var(--ease-out), visibility .4s;
}

.nav__item--drop:hover .mega,
.nav__item--drop:focus-within .mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mega__panel {
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: 0 30px 70px rgba(35, 35, 37, .20);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* icon + label menu items */
.mega__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px
}

/* narrower dropdown for a short list (portfolio verticals) */
.mega--sm {
    width: min(86vw, 330px);
}

.mega__grid--one {
    grid-template-columns: 1fr;
}

.mega__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 13px;
    border-radius: 12px;
    overflow: hidden;
    transition: background .35s var(--ease), padding-left .4s var(--ease-out);
}

.mega__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: var(--orange);
    transform: translateY(-50%);
    transition: height .4s var(--ease-out);
}

.mega__item:hover {
    background: var(--tint);
    padding-left: 18px
}

.mega__item:hover::before {
    height: 58%
}

/* one common arrow chip on every item */
.mega__icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex: none;
    border: 1px solid rgba(245, 134, 52, .38);
    background: rgba(245, 134, 52, .1);
    color: var(--orange);
    transition: background .4s var(--ease), color .4s var(--ease),
        border-color .4s var(--ease), transform .5s var(--ease-out);
}

.mega__icon svg {
    width: 12px;
    height: 12px
}

.mega__item:hover .mega__icon {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(245, 134, 52, .32);
}

.mega__item span {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.32;
    color: var(--ink);
    transition: color .35s var(--ease);
}

.mega__item:hover span {
    color: var(--orange)
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 14px
}

.nav__mobile-foot {
    display: none
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-light);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color .35s var(--ease), background .35s var(--ease);
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .4s var(--ease-out), opacity .3s var(--ease), background .35s
}

.site-header.is-stuck .nav-toggle {
    border-color: var(--line)
}

.site-header.is-stuck .nav-toggle span {
    background: var(--ink)
}

.nav-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.nav-toggle.is-open span:nth-child(2) {
    opacity: 0
}

.nav-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(35, 35, 37, .5);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s var(--ease), visibility .4s;
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible
}

/* ---------- 8. Hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--header-h) + 60px) 0 90px;
    background: var(--ink);
    color: rgba(255, 255, 255, .7);
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.hero__grid {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image: linear-gradient(var(--line-light) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-light) 1px, transparent 1px);
    background-size: 78px 78px;
    -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 78%);
    mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 78%);
}

.hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .4
}

.hero__orb--1 {
    width: 520px;
    height: 520px;
    background: var(--orange);
    top: -160px;
    right: -90px;
    animation: drift 16s ease-in-out infinite
}

.hero__orb--2 {
    width: 440px;
    height: 440px;
    background: var(--grey);
    bottom: -190px;
    left: -120px;
    opacity: .55;
    animation: drift 20s ease-in-out infinite reverse
}

@keyframes drift {

    0%,
    100% {
        transform: translate(0, 0) scale(1)
    }

    50% {
        transform: translate(-40px, 45px) scale(1.12)
    }
}

.hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(30px, 5vw, 70px);
    align-items: center
}

.hero__title {
    font-size: clamp(38px, 6.4vw, 80px);
    color: #fff;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.06;
}

.hero__title-line {
    display: block
}

.hero__text {
    margin-top: 26px;
    font-size: clamp(15.5px, 1.55vw, 18.5px);
    max-width: 52ch;
    color: rgba(255, 255, 255, .66)
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px
}

.hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 54px);
    margin-top: 54px;
    padding-top: 34px;
    border-top: 1px solid var(--line-light);
}

.hero__meta-item strong {
    display: block;
    font-family: var(--display);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.hero__meta-item span {
    display: block;
    margin-top: 9px;
    font-size: 12.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45)
}

/* compass */
.hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 380px
}

.compass {
    position: relative;
    width: min(100%, 380px);
    aspect-ratio: 1;
    display: grid;
    place-items: center
}

.compass__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--line-light)
}

.compass__ring--outer {
    inset: 0;
    border-style: dashed;
    border-color: rgba(245, 134, 52, .35);
    animation: spin 42s linear infinite
}

.compass__ring--mid {
    inset: 13%;
    border-color: rgba(255, 255, 255, .16)
}

.compass__ring--inner {
    inset: 26%;
    border-color: rgba(245, 134, 52, .28);
    animation: spin 26s linear infinite reverse
}

.compass__needle {
    position: absolute;
    width: 4px;
    height: 47%;
    border-radius: 4px;
    transform-origin: bottom center;
    bottom: 50%;
    background: linear-gradient(180deg, var(--orange), rgba(245, 134, 52, 0));
    animation: needle 7s var(--ease) infinite;
    box-shadow: 0 0 26px rgba(245, 134, 52, .6);
}

@keyframes needle {

    0%,
    100% {
        transform: rotate(-16deg)
    }

    50% {
        transform: rotate(22deg)
    }
}

.compass__core {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--orange);
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: 24px;
    box-shadow: 0 0 0 10px rgba(245, 134, 52, .14), 0 0 60px rgba(245, 134, 52, .4);
}

.compass__tick {
    position: absolute;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .16em;
    color: rgba(255, 255, 255, .4);
}

.compass__tick--n {
    top: -6px
}

.compass__tick--s {
    bottom: -6px
}

.compass__tick--e {
    right: -6px
}

.compass__tick--w {
    left: -6px
}

.hero__float {
    position: absolute;
    padding: 11px 20px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid var(--line-light);
    backdrop-filter: blur(10px);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    animation: float 6s ease-in-out infinite;
}

.hero__float--a {
    top: 8%;
    left: -4%
}

.hero__float--b {
    bottom: 10%;
    right: -2%;
    animation-delay: -3s
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-16px)
    }
}

.hero__scroll {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .42);
    transition: color .35s var(--ease);
}

.hero__scroll:hover {
    color: var(--orange)
}

.hero__scroll-line {
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .5));
    position: relative;
    overflow: hidden
}

.hero__scroll-line::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--orange);
    animation: scrollLine 2.2s ease-in-out infinite;
}

@keyframes scrollLine {
    0% {
        top: -50%
    }

    100% {
        top: 100%
    }
}

/* ---------- 9. Marquee ---------- */
.marquee {
    background: var(--orange);
    /* white on this orange is only 2.5:1 - ink reads at 6.4:1 and keeps the
       band inside the brand palette */
    color: var(--ink);
    padding: 16px 0;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee 26s linear infinite
}

.marquee:hover .marquee__track {
    animation-play-state: paused
}

.marquee__item {
    /* the band's colour is repeated on the text element itself so a contrast
       checker never has to infer it from an animated ancestor */
    background: var(--orange);
    display: inline-flex;
    align-items: center;
    gap: 36px;
    padding-right: 36px;
    font-family: var(--display);
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 600;
    letter-spacing: .01em;
}

.marquee__item i {
    font-size: 9px;
    opacity: .65;
    font-style: normal
}

@keyframes marquee {
    to {
        transform: translateX(-50%)
    }
}

/* ---------- 10. About ---------- */
.tick-list {
    display: grid;
    gap: 6px
}

.tick-list__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    align-items: start;
    padding: 24px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease-out);
}

.tick-list__item:hover {
    background: var(--white);
    border-color: var(--line);
    box-shadow: var(--shadow-s);
    transform: translateX(8px)
}

.tick-list__num {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    /* 13px orange on the pale orange chip is only 2.3:1 - ink reads clearly
       and the chip still carries the accent */
    color: var(--ink);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(245, 134, 52, .1);
    flex: none;
    transition: background .4s var(--ease), color .4s var(--ease), transform .5s var(--ease-out);
}

.tick-list__item:hover .tick-list__num {
    background: var(--orange);
    color: var(--ink);
    transform: rotate(360deg)
}

.tick-list__item h3 {
    font-size: 18px;
    margin-bottom: 6px
}

.tick-list__item p {
    font-size: 15px
}

.quote-card {
    position: relative;
    margin-top: 30px;
    padding: 32px 34px;
    border-radius: var(--r-lg);
    background: var(--ink);
    color: #fff;
    overflow: hidden;
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease);
}

.quote-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-l)
}

.quote-card::after {
    content: '';
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: var(--orange);
    filter: blur(60px);
    opacity: .4;
    transition: opacity .5s var(--ease);
}

.quote-card:hover::after {
    opacity: .65
}

.quote-card__mark {
    width: 34px;
    height: 34px;
    color: var(--orange);
    margin-bottom: 14px
}

.quote-card p {
    position: relative;
    font-family: var(--display);
    font-size: clamp(17px, 1.9vw, 21px);
    line-height: 1.45;
    font-weight: 500;
    z-index: 1
}

/* ---------- 11. Cards / Approach ---------- */
.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px
}

/* two-up variant - used by Vision & Mission on the about page */
.cards--two {
    grid-template-columns: repeat(2, 1fr)
}

.card {
    position: relative;
    padding: 38px 32px 34px;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--line);
    overflow: hidden;
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease), border-color .5s var(--ease);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-l);
    border-color: transparent
}

.card__index {
    position: absolute;
    top: 26px;
    right: 30px;
    font-family: var(--display);
    font-size: 44px;
    font-weight: 800;
    color: var(--tint-2);
    line-height: 1;
    transition: color .5s var(--ease), transform .5s var(--ease-out);
}

.card:hover .card__index {
    color: rgba(245, 134, 52, .22);
    transform: scale(1.1)
}

.card__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: rgba(245, 134, 52, .1);
    color: var(--orange);
    margin-bottom: 26px;
    transition: background .45s var(--ease), color .45s var(--ease), transform .55s var(--ease-out), border-radius .45s var(--ease);
}

.card__icon svg {
    width: 28px;
    height: 28px
}

.card:hover .card__icon {
    background: var(--orange);
    color: #fff;
    transform: translateY(-4px) rotate(-8deg);
    border-radius: 50%
}

.card__title {
    font-size: 21px;
    margin-bottom: 12px;
    transition: color .4s var(--ease)
}

.card:hover .card__title {
    color: var(--orange)
}

.card__text {
    font-size: 15px
}

.card__glow {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--orange), var(--orange-l));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease-out);
}

.card:hover .card__glow {
    transform: scaleX(1)
}

/* ---------- 11b. Ecosystem flow (brand-deck 8-stage sequence) ---------- */
.eco__flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}

.eco-node {
    position: relative;
    text-align: center;
}

/* connector runs between nodes, never off the last one */
.eco-node::after {
    content: "";
    position: absolute;
    top: 34px;
    left: calc(50% + 38px);
    right: calc(-50% + 38px);
    height: 1px;
    background: linear-gradient(90deg, var(--orange), rgba(0, 0, 0, .12));
    opacity: .5;
}

.eco-node:last-child::after {
    display: none;
}

.eco-node a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.eco-node__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s;
}

.eco-node__ring svg {
    width: 28px;
    height: 28px;
    color: var(--orange);
}

.eco-node__ring em {
    position: absolute;
    top: -6px;
    right: -6px;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 20px;
    color: #fff;
    background: var(--orange);
}

.eco-node__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    padding: 0 4px;
}

.eco-node a:hover .eco-node__ring {
    transform: translateY(-5px);
    border-color: var(--orange);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .1);
}

.eco-node a:hover .eco-node__label {
    color: var(--orange);
}

/* ---------- 11c. Verticals hub (Four Verticals. One Mission.) ---------- */
.hub {
    display: grid;
    grid-template-columns: 1fr minmax(230px, 260px) 1fr;
    grid-template-rows: auto auto;
    gap: 34px 30px;
    align-items: center;
    margin-top: 54px;
}

.hub__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    text-decoration: none;
    color: inherit;
    transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}

/* offset block behind each card, echoing the deck graphic */
.hub__card::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    width: 26px;
    border-radius: 8px;
    z-index: -1;
}

.hub__card--left::before {
    left: -12px;
    background: var(--ink, #2b2b2b);
}

.hub__card--right::before {
    right: -12px;
    background: var(--orange);
}

.hub__card--2::before,
.hub__card--3::before {
    background: var(--orange);
}

.hub__card--1::before,
.hub__card--4::before {
    background: #33373d;
}

.hub__card--left {
    grid-column: 1;
    flex-direction: row;
}

.hub__card--right {
    grid-column: 3;
    flex-direction: row-reverse;
}

/* label fills the card so it does not float against the icon */
.hub__body {
    display: block;
    flex: 1 1 auto;
}

.hub__card--1 { grid-row: 1 }
.hub__card--2 { grid-row: 1 }
.hub__card--3 { grid-row: 2 }
.hub__card--4 { grid-row: 2 }

.hub__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, .12);
}

.hub__card--right .hub__icon {
    border-color: rgba(245, 134, 52, .55);
}

.hub__icon svg {
    width: 36px;
    height: 36px;
    color: var(--orange);
}

.hub__name {
    display: block;
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    text-transform: uppercase;
}

.hub__card--right .hub__name {
    color: var(--orange);
}

.hub__rule {
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 10px;
    background: currentColor;
    opacity: .35;
}

.hub__card--right .hub__rule {
    background: var(--orange);
    opacity: .8;
}

.hub__card:hover {
    transform: translateY(-4px);
    border-color: var(--orange);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .09);
}

/* ----- the core ----- */
.hub__core {
    position: relative;
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    justify-self: center;
    width: 100%;
    max-width: 260px;
}

.hub__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* half orange, half dark - as in the deck graphic. The white core sits on
       top and leaves only a thin ring visible, so no mask is needed. */
    background:
        conic-gradient(from 180deg,
            var(--orange) 0deg 180deg,
            #33373d 180deg 360deg);
}

.hub__core-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: calc(100% - 11px);
    height: calc(100% - 11px);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .08);
    padding: 26px 18px;
}

.hub__core-inner strong {
    font-size: clamp(34px, 3.4vw, 46px);
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1;
}

.hub__core-rule {
    display: block;
    width: 54px;
    height: 1.5px;
    margin: 10px auto 12px;
    background: var(--orange);
}

.hub__core-inner em {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.7;
    white-space: nowrap;
    opacity: .7;
}

/* ----- connectors from each card to the core ----- */
.hub__link {
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: rgba(0, 0, 0, .18);
}

.hub__card--left .hub__link {
    right: -30px;
}

.hub__card--right .hub__link {
    left: -30px;
}

.hub__link::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #33373d;
    transform: translateY(-50%);
}

.hub__card--left .hub__link::after {
    right: -3px;
}

.hub__card--right .hub__link::after {
    left: -3px;
    background: var(--orange);
}

/* ----- vertical card link variant on the listing below ----- */
.strength--link h4 a {
    color: inherit;
    text-decoration: none;
}

.strength--link h4 a:hover {
    color: var(--orange);
}

.strength--link .link-arrow {
    margin-top: 14px;
}

.strength--link .strength__tick {
    color: var(--orange);
}

/* ----- emblem used on a vertical page that has no photograph ----- */
.vert-emblem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 26px 28px;
    margin-bottom: 22px;
    border-radius: 22px;
    background: linear-gradient(150deg, #fff, #faf6f2);
    border: 1px solid rgba(0, 0, 0, .08);
    overflow: hidden;
}

.vert-emblem__ring {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid rgba(245, 134, 52, .4);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
}

.vert-emblem__ring svg {
    width: 46px;
    height: 46px;
    color: var(--orange);
}

.vert-emblem__chip {
    position: relative;
    z-index: 1;
    font-style: normal;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.5;
}

.vert-emblem__glow {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -70px;
    bottom: -110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 134, 52, .22), transparent 68%);
}

/* ---------- 12. Services (image cards) ---------- */
.services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(20px, 2.4vw, 30px)
}

/* two-up variant - the four portfolio verticals sit 2x2 */
.services__grid--two {
    grid-template-columns: repeat(2, 1fr)
}

/* four across - the verticals teaser on the homepage */
.services__grid--four {
    grid-template-columns: repeat(4, 1fr)
}

.s-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--line);
    transition: transform .55s var(--ease-out), box-shadow .55s var(--ease), border-color .5s var(--ease);
}

.s-card:hover {
    transform: translateY(-12px);
    box-shadow: var(--shadow-l);
    border-color: transparent
}

/* media */
.s-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16/11;
    overflow: hidden;
    background: var(--tint-2)
}

.s-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease-out), filter .6s var(--ease);
}

.s-card:hover .s-card__media img {
    transform: scale(1.09)
}

.s-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(35, 35, 37, 0) 38%, rgba(35, 35, 37, .55) 100%);
    transition: opacity .55s var(--ease);
}

.s-card__veil::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(245, 134, 52, .10), rgba(245, 134, 52, .62));
    opacity: 0;
    transition: opacity .55s var(--ease);
}

.s-card:hover .s-card__veil::after {
    opacity: 1
}

.s-card__num {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: grid;
    place-items: center;
    min-width: 42px;
    height: 34px;
    padding: 0 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, .92);
    font-family: var(--display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ink);
    /* keeps the chip readable when the photo behind it is light */
    box-shadow: 0 4px 14px rgba(35, 35, 37, .22);
    transition: background .45s var(--ease), color .45s var(--ease),
        transform .5s var(--ease-out), box-shadow .45s var(--ease);
}

.s-card:hover .s-card__num {
    background: var(--orange);
    color: #fff;
    transform: translateY(-2px)
}

.s-card__go {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    opacity: 0;
    transform: translate(12px, -12px) scale(.7);
    transition: opacity .5s var(--ease), transform .55s var(--ease-out);
    box-shadow: 0 10px 24px rgba(35, 35, 37, .22);
}

.s-card__go svg {
    width: 17px;
    height: 17px
}

.s-card:hover .s-card__go {
    opacity: 1;
    transform: translate(0, 0) scale(1)
}

/* body */
.s-card__body {
    display: block;
    padding: 26px 26px 28px
}

.s-card__title {
    font-size: clamp(17px, 1.75vw, 20px);
    line-height: 1.3;
    margin-bottom: 10px;
    transition: color .4s var(--ease);
}

.s-card:hover .s-card__title {
    color: var(--orange)
}

.s-card__text {
    font-size: 14.6px;
    line-height: 1.7;
    color: var(--grey)
}

.s-card__more {
    display: inline-flex;
    align-items: center;
    margin-top: 16px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--grey-l);
    transition: color .4s var(--ease), letter-spacing .45s var(--ease)
}

.s-card__more::after {
    content: '';
    width: 0;
    height: 1.5px;
    margin-left: 10px;
    background: var(--orange);
    transition: width .5s var(--ease-out);
}

.s-card:hover .s-card__more {
    color: var(--orange)
}

.s-card:hover .s-card__more::after {
    width: 26px
}

.s-card__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--orange), var(--orange-l));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--ease-out);
}

.s-card:hover .s-card__bar {
    transform: scaleX(1)
}

/* view all */
.services__more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: clamp(38px, 4.5vw, 58px);
}

.services__more-note {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--grey-l);
}

.services__more-note::before,
.services__more-note::after {
    content: '';
    width: clamp(28px, 6vw, 70px);
    height: 1px;
    background: var(--line)
}

/* ---------- 12b. Inner page hero ---------- */
.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: rgba(255, 255, 255, .7);
    padding: calc(var(--header-h) + clamp(56px, 7vw, 96px)) 0 clamp(56px, 7vw, 90px);
}

.page-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.page-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .9;
    transform: scale(1.06);
    animation: heroPan 26s ease-in-out infinite alternate;
}

/* Overlay: dark enough to read the title on the left, then it lifts so the
   photo is clearly visible across the rest of the banner. One horizontal
   gradient plus a light vertical one - stacking two heavy ones goes muddy. */
.page-hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg,
            rgba(35, 35, 37, .9) 0%,
            rgba(35, 35, 37, .74) 34%,
            rgba(35, 35, 37, .38) 66%,
            rgba(35, 35, 37, .18) 100%),
        linear-gradient(180deg,
            rgba(35, 35, 37, .55) 0%,
            rgba(35, 35, 37, 0) 32%,
            rgba(35, 35, 37, 0) 62%,
            rgba(35, 35, 37, .6) 100%);
}

/* a thin orange rule anchoring the banner to the page */
.page-hero::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--orange), rgba(245, 134, 52, 0) 62%);
}

/* the grid and orb are decoration here, not the main event */
.page-hero__bg .hero__grid {
    opacity: .22
}

.page-hero__bg .hero__orb--1 {
    opacity: .22
}

@keyframes heroPan {
    from {
        transform: scale(1.06) translate3d(0, 0, 0)
    }

    to {
        transform: scale(1.14) translate3d(-1.5%, -1.5%, 0)
    }
}

.page-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
    align-items: end;
    gap: clamp(28px, 4vw, 60px);
}

/* no meta pills - one full-width column */
.page-hero__inner--solo {
    grid-template-columns: 1fr
}

.page-hero__main {
    max-width: 720px
}

.page-hero__title {
    font-size: clamp(34px, 5.4vw, 66px);
    color: #fff;
    letter-spacing: -.035em;
    line-height: 1.08
}

.page-hero__text {
    margin-top: 22px;
    font-size: clamp(15px, 1.5vw, 18px);
    color: rgba(255, 255, 255, .66);
    max-width: 56ch
}

.page-hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.page-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 100px;
    border: 1px solid var(--line-light);
    background: rgba(255, 255, 255, .05);
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    transition: border-color .4s var(--ease), background .4s var(--ease), transform .45s var(--ease-out);
}

.page-hero__meta span:hover {
    border-color: rgba(245, 134, 52, .5);
    background: rgba(245, 134, 52, .1);
    transform: translateY(-3px)
}

.page-hero__meta strong {
    font-family: var(--display);
    color: #fff;
    font-weight: 700
}

/* breadcrumb trail - icon chips, same language as the site's other icons */
.crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 26px;
}

.crumb__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px 6px 6px;
    border-radius: 100px;
    border: 1px solid var(--line-light);
    background: rgba(255, 255, 255, .05);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
    transition: color .35s var(--ease), border-color .4s var(--ease),
        background .4s var(--ease), transform .45s var(--ease-out);
}

.crumb__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    background: rgba(245, 134, 52, .16);
    color: var(--orange);
    transition: background .4s var(--ease), color .4s var(--ease),
        transform .5s var(--ease-out);
}

.crumb__icon svg {
    width: 15px;
    height: 15px
}

a.crumb__item:hover {
    color: #fff;
    border-color: rgba(245, 134, 52, .5);
    transform: translateY(-2px);
}

a.crumb__item:hover .crumb__icon {
    background: var(--orange);
    color: #fff;
    transform: scale(1.08);
}

.crumb__item--now {
    color: #fff;
    border-color: rgba(245, 134, 52, .42);
    background: rgba(245, 134, 52, .12);
}

.crumb__item--now .crumb__icon {
    background: var(--orange);
    color: #fff;
}

.crumb__sep {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    margin: 0 2px;
    color: rgba(255, 255, 255, .3);
}

/* ---------- 13. Stats ---------- */
.stats {
    position: relative;
    overflow: hidden;
    padding: clamp(54px, 7vw, 88px) 0;
    background: linear-gradient(135deg, var(--orange) 0%, var(--orange-d) 100%);
}

.stats__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 15%, rgba(255, 255, 255, .26), transparent 44%),
        radial-gradient(circle at 88% 85%, rgba(35, 35, 37, .3), transparent 48%);
}

/* faint peak outline, echoing the footer artwork */
.stats__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 74px 74px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000, transparent 78%);
    opacity: .5;
}

.stats__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.8vw, 22px);
}

/* each figure sits on its own translucent panel instead of a hard divider */
.stat {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(26px, 3vw, 36px) clamp(14px, 2vw, 24px);
    border-radius: var(--r-lg);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .24);
    transition: background .45s var(--ease), border-color .45s var(--ease),
        transform .5s var(--ease-out), box-shadow .5s var(--ease);
}

.stat:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .5);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(35, 35, 37, .18);
}

/* sheen that sweeps across on hover */
.stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: skewX(-18deg);
    transition: left .75s var(--ease-out);
}

.stat:hover::before {
    left: 120%
}

.stat__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: #fff;
    color: var(--orange);
    box-shadow: 0 10px 22px rgba(35, 35, 37, .16);
    transition: border-radius .45s var(--ease), transform .5s var(--ease-out);
}

.stat__icon svg {
    width: 24px;
    height: 24px
}

.stat:hover .stat__icon {
    border-radius: 50%;
    transform: translateY(-3px) rotate(-6deg);
}

.stat__body {
    position: relative;
    display: block;
}

.stat__num {
    position: relative;
    display: block;
    font-family: var(--display);
    font-size: clamp(32px, 4vw, 50px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    color: #fff;
    text-shadow: 0 8px 24px rgba(35, 35, 37, .2);
}

.stat__label {
    position: relative;
    display: block;
    margin-top: 12px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
}
/* ---------- 14. Accordion / Why ---------- */
.accordion {
    display: grid;
    gap: 12px
}

.acc-item {
    border: 1px solid var(--line-light);
    border-radius: var(--r-md);
    overflow: hidden;
    background: rgba(255, 255, 255, .02);
    transition: background .45s var(--ease), border-color .45s var(--ease);
}

.acc-item:hover {
    border-color: rgba(245, 134, 52, .4)
}

.acc-item.is-open {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(245, 134, 52, .5)
}

.acc-item__head {
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 18px;
    align-items: center;
    padding: 22px 24px;
    text-align: left;
}

.acc-item__num {
    font-family: var(--display);
    font-size: 13px;
    font-weight: 700;
    color: var(--orange)
}

.acc-item__title {
    font-family: var(--display);
    font-size: clamp(15.5px, 1.65vw, 18px);
    font-weight: 600;
    color: #fff;
    transition: color .4s var(--ease)
}

.acc-item__head:hover .acc-item__title {
    color: var(--orange-l)
}

.acc-item__icon {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--line-light);
    flex: none;
    transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease-out)
}

.acc-item__icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 11px;
    height: 1.6px;
    background: #fff;
    transform: translate(-50%, -50%);
    transition: transform .45s var(--ease-out), background .4s
}

.acc-item__icon i:last-child {
    transform: translate(-50%, -50%) rotate(90deg)
}

.acc-item.is-open .acc-item__icon {
    background: var(--orange);
    border-color: var(--orange);
    transform: rotate(180deg)
}

.acc-item.is-open .acc-item__icon i:last-child {
    transform: translate(-50%, -50%) rotate(0)
}

.acc-item__body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s var(--ease-out)
}

.acc-item__body p {
    padding: 0 24px 24px 60px;
    font-size: 15px;
    color: rgba(255, 255, 255, .62)
}

/* ---------- 15. Testimonials ---------- */
.slider {
    max-width: 900px;
    margin-inline: auto
}

.slider__viewport {
    overflow: hidden;
    border-radius: var(--r-lg)
}

.slider__track {
    display: flex;
    transition: transform .65s var(--ease-out)
}

.slide {
    min-width: 100%;
    padding: 4px
}

.testimonial {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(30px, 4vw, 52px);
    text-align: center;
    box-shadow: var(--shadow-s);
    transition: box-shadow .5s var(--ease), transform .5s var(--ease-out);
}

.testimonial:hover {
    box-shadow: var(--shadow-m);
    transform: translateY(-4px)
}

.testimonial__stars {
    color: var(--orange);
    letter-spacing: .28em;
    font-size: 16px;
    margin-bottom: 20px
}

.testimonial__text {
    font-family: var(--display);
    font-size: clamp(16.5px, 2vw, 22px);
    line-height: 1.55;
    color: var(--ink);
    font-weight: 400
}

.testimonial__author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 30px
}

.avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    background: linear-gradient(135deg, var(--orange), var(--orange-d));
    color: #fff;
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .04em;
    box-shadow: 0 10px 24px rgba(245, 134, 52, .3);
}

.testimonial__author div {
    text-align: left
}

.testimonial__author strong {
    display: block;
    font-family: var(--display);
    font-size: 15.5px;
    color: var(--ink)
}

.testimonial__author em {
    font-style: normal;
    font-size: 13px;
    color: var(--grey-l)
}

.slider__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 34px
}

.slider__btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    color: var(--grey);
    background: var(--white);
    transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .45s var(--ease-out);
}

.slider__btn svg {
    width: 18px;
    height: 18px
}

.slider__btn:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: scale(1.08)
}

.slider__dots {
    display: flex;
    gap: 9px
}

.slider__dots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(96, 96, 98, .26);
    transition: width .4s var(--ease-out), background .4s var(--ease);
}

.slider__dots button.is-active {
    width: 30px;
    border-radius: 100px;
    background: var(--orange)
}

/* ---------- 16. CTA + Contact ---------- */
.cta {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--ink);
    padding: clamp(46px, 6.5vw, 86px) clamp(26px, 5vw, 70px);
    text-align: center;
}

.cta__inner {
    position: relative;
    z-index: 1;
    max-width: 660px;
    margin-inline: auto
}

.cta__title {
    font-size: clamp(30px, 4.6vw, 58px);
    color: #fff
}

.cta__text {
    margin-top: 20px;
    color: rgba(255, 255, 255, .66);
    font-size: clamp(15px, 1.5vw, 17.5px)
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 36px
}

.cta__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 640px;
    height: 640px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(245, 134, 52, .34), transparent 62%);
    animation: breathe 9s ease-in-out infinite;
}

@keyframes breathe {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .85
    }

    50% {
        transform: translate(-50%, -50%) scale(1.22);
        opacity: 1
    }
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 26px
}

/* contact page runs four cards */
.contact .info-grid:has(.info-card:nth-child(4)) {
    grid-template-columns: repeat(4, 1fr)
}

/* grid children default to min-content floor, which blows the tracks out */
.info-card {
    min-width: 0
}

.info-card .link-arrow {
    margin-top: 18px;
    font-size: 13.5px
}

.info-card .socials {
    margin-top: 20px;
    gap: 10px
}

.socials--dark .social {
    width: 40px;
    height: 40px;
    color: var(--ink);
    border-color: var(--line);
    background: var(--white);
}

.socials--dark .social svg {
    width: 17px;
    height: 17px
}

.socials--dark .social:hover {
    color: #fff
}

/* ----- map ----- */
.map-frame {
    position: relative;
    /* width must be explicit: with only aspect-ratio + min-height the box
       resolves its WIDTH from the height (320 x 21/8 = 840px) and overflows */
    width: 100%;
    height: clamp(320px, 38vw, 460px);
    border-radius: var(--r-xl);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-m);
    background: var(--tint-2);
}

.map-frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: grayscale(1) contrast(1.05);
    transition: filter .6s var(--ease);
}

.map-frame:hover iframe {
    filter: grayscale(0) contrast(1)
}

.info-card {
    padding: 32px 30px;
    border-radius: var(--r-lg);
    background: var(--tint);
    border: 1px solid transparent;
    transition: background .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease-out), box-shadow .5s var(--ease);
}

.info-card:hover {
    background: var(--white);
    border-color: var(--line);
    transform: translateY(-8px);
    box-shadow: var(--shadow-m)
}

.info-card__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--white);
    color: var(--orange);
    margin-bottom: 20px;
    box-shadow: var(--shadow-s);
    transition: background .45s var(--ease), color .45s var(--ease), transform .5s var(--ease-out);
}

.info-card__icon svg {
    width: 24px;
    height: 24px
}

.info-card:hover .info-card__icon {
    background: var(--orange);
    color: #fff;
    transform: scale(1.08)
}

.info-card h3 {
    font-size: 18px;
    margin-bottom: 10px
}

.info-card p {
    font-size: 14.8px;
    line-height: 1.75
}

.info-card a {
    transition: color .35s var(--ease)
}

.info-card a:hover {
    color: var(--orange)
}

/* ==========================================================================
   Service detail page
   ========================================================================== */

/* ----- service photo with offset frame -----
   The photo carries its own slow drift so the block is never static, and the
   outline settles into its offset once the section scrolls into view.
   --fo drives the offset from one place, so hover and the breakpoints only
   have to change that one value.                                            */
.svc-media {
    --fo: 22px;
    position: relative;
    margin: 0 0 clamp(34px, 4vw, 48px) 0;
}

/* the offset frame sits --fo outside the photo; at some widths that is wider
   than the container gutter and would put a scrollbar on the page. Clip on x
   only - unlike overflow:hidden this creates no scroll container. */
.svc-intro {
    overflow-x: clip;
}

/* outline sitting behind, offset down-right */
.svc-media__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    border: 1.5px solid rgba(245, 134, 52, .45);
    border-radius: var(--r-xl);
    transition: inset .8s var(--ease-out), opacity .6s var(--ease);
}

/* .reveal puts is-in on the block once it enters the viewport */
.svc-media.is-in .svc-media__frame,
.svc-media__frame {
    inset: var(--fo) calc(-1 * var(--fo)) calc(-1 * var(--fo)) var(--fo);
}

.svc-media.is-in .svc-media__frame {
    opacity: 1;
}

.svc-media:hover {
    --fo: 30px;
}

.svc-media__inner {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-m);
    /* the photo wipes open from the bottom once the block scrolls in */
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.05s var(--ease-out);
}

.svc-media.is-in .svc-media__inner {
    clip-path: inset(0 0 0 0);
}

.svc-media__inner img {
    width: 100%;
    aspect-ratio: 16/11;
    object-fit: cover;
}

.svc-media__chip {
    position: absolute;
    z-index: 2;
    left: -14px;
    bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 12px 12px;
    border-radius: 100px;
    background: var(--white);
    box-shadow: var(--shadow-m);
    transition: transform .5s var(--ease-out);
}

.svc-media:hover .svc-media__chip {
    transform: translateY(-5px)
}

.svc-media__chip i {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: none;
    background: var(--orange);
    color: #fff;
}

.svc-media__chip i svg {
    width: 18px;
    height: 18px
}

.svc-media__chip em {
    font-style: normal;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}
/* ----- definition card ----- */
.def-card {
    position: relative;
    overflow: hidden;
    padding: clamp(32px, 4vw, 52px);
    border-radius: var(--r-xl);
    background: var(--ink);
    color: rgba(255, 255, 255, .72);
    transition: transform .55s var(--ease-out), box-shadow .55s var(--ease);
}

.def-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-l)
}

.def-card__icon {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 20px;
    margin-bottom: 24px;
    background: rgba(245, 134, 52, .16);
    color: var(--orange);
    transition: border-radius .45s var(--ease), transform .5s var(--ease-out);
}

.def-card__icon svg {
    width: 28px;
    height: 28px
}

.def-card:hover .def-card__icon {
    border-radius: 50%;
    transform: rotate(-8deg)
}

.def-card__label {
    position: relative;
    z-index: 1;
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 14px;
}

.def-card__quote {
    position: relative;
    z-index: 1;
    font-family: var(--display);
    font-size: clamp(17px, 2vw, 22px);
    line-height: 1.5;
    font-weight: 400;
    color: #fff;
}

.def-card__glow {
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: var(--orange);
    filter: blur(70px);
    opacity: .38;
    transition: opacity .55s var(--ease);
}

.def-card:hover .def-card__glow {
    opacity: .6
}

/* ----- reason list ----- */
.reason-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2vw, 24px);
}

.reason {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 20px;
    overflow: hidden;
    padding: clamp(26px, 3vw, 36px);
    border-radius: var(--r-lg);
    background: var(--white);
    border: 1px solid var(--line);
    transition: transform .5s var(--ease-out), box-shadow .5s var(--ease),
        border-color .5s var(--ease);
}

.reason:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-l);
    border-color: transparent
}

.reason__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    flex: none;
    background: rgba(245, 134, 52, .1);
    color: var(--orange);
    transition: background .45s var(--ease), color .45s var(--ease),
        border-radius .45s var(--ease), transform .55s var(--ease-out);
}

.reason__icon svg {
    width: 26px;
    height: 26px
}

.reason:hover .reason__icon {
    background: var(--orange);
    color: #fff;
    border-radius: 50%;
    transform: translateY(-3px);
}

.reason__title {
    font-size: 20px;
    margin-bottom: 8px;
    transition: color .4s var(--ease);
}

.reason:hover .reason__title {
    color: var(--orange)
}

.reason__text {
    font-size: 15px
}

.reason__num {
    position: absolute;
    right: 24px;
    bottom: 8px;
    font-family: var(--display);
    font-size: 60px;
    font-weight: 800;
    line-height: 1;
    color: var(--tint-2);
    transition: color .5s var(--ease), transform .55s var(--ease-out);
    pointer-events: none;
}

.reason:hover .reason__num {
    color: rgba(245, 134, 52, .18);
    transform: scale(1.08)
}

/* ----- licence chips ----- */
.chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 24px 13px 13px;
    border-radius: 100px;
    background: var(--tint);
    border: 1px solid var(--line);
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    transition: background .4s var(--ease), border-color .4s var(--ease),
        transform .45s var(--ease-out), box-shadow .45s var(--ease);
}

.chip__tick {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    background: rgba(245, 134, 52, .14);
    color: var(--orange);
    transition: background .4s var(--ease), color .4s var(--ease);
}

.chip__tick svg {
    width: 14px;
    height: 14px
}

.chip:hover {
    background: var(--white);
    border-color: rgba(245, 134, 52, .45);
    transform: translateY(-4px);
    box-shadow: var(--shadow-s);
}

.chip:hover .chip__tick {
    background: var(--orange);
    color: #fff
}

/* ----- sitemap ----- */
.sitemap-group+.sitemap-group {
    margin-top: clamp(38px, 5vw, 62px)
}

.sitemap-group__title {
    font-size: clamp(22px, 2.6vw, 30px);
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

/* ----- process steps ----- */
.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
}

/* the connecting rail */
.steps::before {
    content: '';
    position: absolute;
    top: 34px;
    left: 12%;
    width: 76%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--line-light) 0 8px, transparent 8px 18px);
}

.step {
    position: relative;
    text-align: center;
}

.step__node {
    position: relative;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--ink);
    border: 1px solid rgba(245, 134, 52, .4);
    color: var(--orange);
    transition: background .45s var(--ease), color .45s var(--ease),
        transform .55s var(--ease-out), box-shadow .5s var(--ease);
}

.step__node svg {
    width: 26px;
    height: 26px
}

.step__node em {
    position: absolute;
    right: -4px;
    top: -4px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-family: var(--display);
    font-style: normal;
    font-size: 12.5px;
    font-weight: 700;
}

.step:hover .step__node {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(245, 134, 52, .35);
}

.step__title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 10px;
    transition: color .4s var(--ease);
}

.step:hover .step__title {
    color: var(--orange)
}

.step__text {
    font-size: 14.6px;
    color: rgba(255, 255, 255, .6);
}

/* ----- strengths / offerings ----- */
.strength-list {
    display: grid;
    gap: 6px;
}

/* the "what we handle" list runs two-up on wide screens */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 20px;
}

/* the vertical pages show segment pills AND offerings - without this the
   offering cards butt straight up against the last row of pills */
.chip-grid + .offer-grid {
    margin-top: clamp(30px, 3.6vw, 48px);
}

.offer-grid:empty {
    display: none
}

/* a six-step process still reads as a row of three */
.steps--six {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 44px;
}

.steps--six::before {
    display: none
}

.strength {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: start;
    padding: 20px 22px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    transition: background .4s var(--ease), border-color .4s var(--ease),
        transform .45s var(--ease-out);
}

.strength:hover {
    background: var(--white);
    border-color: var(--line);
    box-shadow: var(--shadow-s);
    transform: translateX(8px);
}

.strength__tick {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    margin-top: 2px;
    background: rgba(245, 134, 52, .12);
    color: var(--orange);
    transition: background .4s var(--ease), color .4s var(--ease),
        transform .5s var(--ease-out);
}

.strength__tick svg {
    width: 15px;
    height: 15px
}

.strength:hover .strength__tick {
    background: var(--orange);
    color: #fff;
    transform: scale(1.08)
}

.strength h4 {
    font-size: 17.5px;
    margin-bottom: 5px
}

.strength p {
    font-size: 14.8px
}

/* ---------- 16a. Coming-soon page ---------- */
.coming {
    display: grid;
    place-items: center;
    text-align: center;
    min-height: calc(100vh - var(--header-h));
    padding: calc(var(--header-h) + 60px) 0 clamp(70px, 10vw, 140px);
    background: var(--ink);
}

.coming__title {
    font-size: clamp(40px, 9vw, 96px);
    line-height: 1.05;
    letter-spacing: -.04em;
    color: #fff;
}

/* a heading by rank, a standfirst by weight - it keeps the page from jumping
   straight from h1 to the footer's headings */
.coming__text {
    max-width: 46ch;
    margin: clamp(16px, 2.4vw, 24px) auto 0;
    font-family: var(--body);
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0;
    color: rgba(255, 255, 255, .72);
}

.coming__text a {
    color: var(--orange);
    /* underlined, not colour alone - the link sits inside a block of text */
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--t);
}

.coming__text a:hover {
    color: var(--orange-l);
}

/* ---------- 16b. Enquiry form ---------- */
.form-card {
    margin-top: clamp(24px, 3vw, 34px);
    background: var(--tint);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(30px, 4.4vw, 62px);
}

.form-card__head {
    max-width: 620px;
    margin-bottom: clamp(28px, 3.4vw, 42px);
}

.form-card__title {
    font-size: clamp(24px, 3vw, 38px);
}

.form-card__text {
    margin-top: 14px;
    font-size: 15.5px;
}

.tnp-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(18px, 2.2vw, 26px);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.field--full {
    grid-column: 1 / -1;
}

.field label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--grey);
}

.field label em {
    font-style: normal;
    color: var(--orange);
}

.field input,
.field textarea,
.field select {
    width: 100%;
    font: inherit;
    font-size: 15.5px;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 15px 18px;
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease),
        background .35s var(--ease);
}

.field textarea {
    resize: vertical;
    min-height: 128px;
    line-height: 1.7;
}

.field input::placeholder,
.field textarea::placeholder {
    color: var(--grey-l);
}

.field input:hover,
.field textarea:hover,
.field select:hover {
    border-color: rgba(96, 96, 98, .3);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
    outline: 0;
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(245, 134, 52, .15);
}

/* custom select */
.select-wrap {
    position: relative;
}

/* ----- phone field: dial code and number in one control ----- */
.tel-field {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.tel-field:hover {
    border-color: rgba(96, 96, 98, .3);
}

.tel-field:focus-within {
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(245, 134, 52, .15);
}

.tel-field__pick {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 0 15px;
    background: none;
    border: 0;
    /* a hairline keeps the two halves readable inside the one box */
    border-right: 1px solid var(--line);
    border-radius: 14px 0 0 14px;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
    transition: background .3s var(--ease);
}

.tel-field__pick:hover {
    background: var(--tint);
}

.tel-field__pick:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: -2px;
}

.tel-field__flag {
    display: block;
    width: 24px;
    height: 17px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(35, 35, 37, .1);
}

.tel-field__flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tel-field__code {
    font-size: 15.5px;
    font-weight: 500;
}

.tel-field__caret {
    width: 13px;
    height: 13px;
    color: var(--orange);
    transition: transform .3s var(--ease-out);
}

.tel-field.is-open .tel-field__caret {
    transform: rotate(180deg);
}

/* the number half carries no chrome of its own - the wrapper is the field.
   The left padding is trimmed because the divider already separates the two,
   and the popup lays the form out in two narrow columns. */
.field .tel-field__input {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 13px;
    border: 0;
    border-radius: 0 14px 14px 0;
    background: none;
    box-shadow: none;
}

.field .tel-field__input:hover,
.field .tel-field__input:focus {
    border: 0;
    box-shadow: none;
}

/* ----- country list ----- */
.tel-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    max-height: 274px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-m);
}

.tel-menu__item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 10px;
    font-size: 14.5px;
    color: var(--ink);
    cursor: pointer;
}

/* divider under the markets we pin to the top */
.tel-menu__item--rule {
    margin-top: 7px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
}

.tel-menu__item:hover,
.tel-menu__item.is-active {
    background: rgba(245, 134, 52, .1);
}

.tel-menu__item.is-on {
    background: rgba(245, 134, 52, .16);
    font-weight: 600;
}

.tel-menu__flag {
    flex: none;
    display: block;
    width: 22px;
    height: 16px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(35, 35, 37, .1);
}

.tel-menu__flag svg {
    display: block;
    width: 100%;
    height: 100%;
}

.tel-menu__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tel-menu__code {
    flex: none;
    color: var(--grey-l);
}

.tel-menu__item.is-on .tel-menu__code {
    color: var(--orange);
}

/* ----- consent -----
   `.field label` is (0,1,1), so this has to be at least as specific or the
   consent line inherits the uppercase, tracked label styling. */
.field label.consent {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    color: var(--grey);
}

.consent input {
    width: 17px;
    height: 17px;
    flex: none;
    margin-top: 2px;
    accent-color: var(--orange);
    cursor: pointer;
}

.consent a {
    color: var(--orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consent a:hover {
    color: var(--orange-d);
}

.field.has-error .consent span {
    color: #d9463c;
}

.select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    /* smaller than the text inputs - the option labels are long.
       line-height comes from `font: inherit` as a length, so the control
       keeps the same height and stays aligned with the Email field. */
    font-size: 14px;
    cursor: pointer;
}

.select-wrap select option {
    font-size: 14px;
    background: var(--white);
    color: var(--ink);
}

.select-wrap svg {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    color: var(--orange);
    pointer-events: none;
    transition: transform .4s var(--ease-out);
}

.select-wrap:hover svg {
    transform: translateY(-50%) translateY(2px);
}

/* validation */
.field__err {
    font-size: 12.5px;
    color: #d9463c;
    min-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .3s var(--ease), transform .3s var(--ease-out);
}

.field.has-error input,
.field.has-error textarea,
.field.has-error select {
    border-color: #d9463c;
    background: rgba(217, 70, 60, .04);
}

/* the number input has no border of its own, so the wrapper carries the error */
.field.has-error .tel-field {
    border-color: #d9463c;
    background: rgba(217, 70, 60, .04);
}

.field.has-error .tel-field__input {
    background: none;
}

.field.has-error .field__err {
    opacity: 1;
    transform: translateY(0);
}

.form-foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 22px;
    margin-top: 4px;
}

.form-note {
    font-size: 14px;
    color: var(--grey);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s var(--ease), transform .4s var(--ease-out);
}

.form-note.is-shown {
    opacity: 1;
    transform: translateY(0);
}

.form-note.is-ok {
    color: var(--orange);
    font-weight: 600;
}

/* ---------- 16c. Enquiry popup ----------
   Split panel: the pitch on the left, the form on the right. Separate from
   the Quick Connect widget, which keeps its own markup and styles.        */
.eq-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: clamp(14px, 3vw, 30px);
    overflow-y: auto;
    background: rgba(35, 35, 37, .66);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: eqVeilIn .32s var(--ease) both;
}

.eq-overlay[hidden] {
    display: none
}

.eq-modal {
    position: relative;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    width: min(100%, 960px);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--white);
    box-shadow: 0 48px 100px rgba(35, 35, 37, .42);
    animation: eqIn .55s var(--ease-out) both;
}

/* ----- come in / come out ----- */
@keyframes eqVeilIn {
    from {
        opacity: 0
    }
}

@keyframes eqIn {
    from {
        opacity: 0;
        transform: translateY(42px) scale(.95)
    }
}

.eq-overlay.is-closing {
    animation: eqVeilOut .32s var(--ease) both;
}

/* leaves upward, so closing never reads as a repeat of opening */
.eq-overlay.is-closing .eq-modal {
    animation: eqOut .32s cubic-bezier(.5, 0, .75, 0) both;
}

@keyframes eqVeilOut {
    to {
        opacity: 0
    }
}

@keyframes eqOut {
    to {
        opacity: 0;
        transform: translateY(-22px) scale(.97)
    }
}

/* ----- left panel ----- */
.eq-aside {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* column flex stretches children by default, which blows the eyebrow
       pill out to the full panel width */
    align-items: flex-start;
    padding: clamp(30px, 3.4vw, 46px);
    background: var(--ink);
    color: rgba(255, 255, 255, .68);
}

.eq-aside__glow {
    position: absolute;
    left: -70px;
    bottom: -90px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 134, 52, .4), transparent 66%);
    animation: breathe 9s ease-in-out infinite;
}

/* must exclude the glow: it has the same specificity, so a plain
   `.eq-aside > *` would override its position:absolute and drop a 300px
   block into the flow */
.eq-aside> :not(.eq-aside__glow) {
    position: relative;
}

.eq-aside__title {
    font-size: clamp(24px, 2.6vw, 32px);
    line-height: 1.2;
    color: #fff;
    margin-bottom: 14px;
}

.eq-aside__text {
    font-size: 14.8px;
    line-height: 1.7;
}

.eq-aside__list {
    display: grid;
    gap: 14px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--line-light);
}

.eq-aside__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.8px;
}

.eq-aside__list i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    background: rgba(245, 134, 52, .14);
    color: var(--orange);
    transition: background .4s var(--ease), color .4s var(--ease);
}

.eq-aside__list i svg {
    width: 16px;
    height: 16px
}

.eq-aside__list li:hover i {
    background: var(--orange);
    color: #fff
}

.eq-aside__list a {
    transition: color .35s var(--ease)
}

.eq-aside__list a:hover {
    color: #fff
}

/* ----- right panel ----- */
.eq-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 3.2vw, 44px);
    overflow-y: auto;
}

.eq-body .tnp-form {
    gap: 16px 20px;
}

.eq-body .field input,
.eq-body .field textarea,
.eq-body .field select {
    background: var(--tint);
    border-color: transparent;
}

.eq-body .field input:focus,
.eq-body .field textarea:focus,
.eq-body .field select:focus {
    background: var(--white);
}

/* the phone control is the field here, so it takes the same treatment - the
   inner input stays transparent or it would paint a lighter block on top */
.eq-body .tel-field {
    background: var(--tint);
    border-color: transparent;
}

.eq-body .tel-field:focus-within {
    background: var(--white);
    border-color: var(--orange);
}

.eq-body .field .tel-field__input,
.eq-body .field .tel-field__input:focus {
    background: none;
}

.eq-body .tel-field__pick {
    border-right-color: rgba(96, 96, 98, .18);
}

.eq-body .tel-field__pick:hover {
    background: rgba(35, 35, 37, .04);
}

.eq-body .field textarea {
    min-height: 96px;
}

.eq-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--ink);
    transition: background .35s var(--ease), border-color .35s var(--ease),
        color .35s var(--ease), transform .45s var(--ease-out);
}

.eq-close svg {
    width: 17px;
    height: 17px
}

.eq-close:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    transform: rotate(90deg);
}

/* ---------- 16d. Thank-you + 404 ---------- */
.endpage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ink);
    color: #fff;
    padding: calc(var(--header-h) + clamp(56px, 8vw, 104px)) 0 clamp(64px, 9vw, 118px);
}

.endpage__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.endpage__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* ---- the drawn tick on the thank-you page ---- */
.endpage__tick {
    width: clamp(64px, 9vw, 86px);
    height: clamp(64px, 9vw, 86px);
    margin-bottom: clamp(22px, 3vw, 30px);
    color: var(--orange);
    filter: drop-shadow(0 14px 30px rgba(245, 134, 52, .34));
}

.endpage__tick svg {
    width: 100%;
    height: 100%;
}

.endpage__tick circle {
    stroke-dasharray: 176;
    stroke-dashoffset: 176;
    animation: tickRing .85s var(--ease-out) forwards;
}

.endpage__tick path {
    stroke-dasharray: 44;
    stroke-dashoffset: 44;
    animation: tickMark .42s var(--ease-out) .55s forwards;
}

@keyframes tickRing {
    to {
        stroke-dashoffset: 0
    }
}

@keyframes tickMark {
    to {
        stroke-dashoffset: 0
    }
}

/* ---- the oversized numerals on the 404 ---- */
.endpage__code {
    font-family: var(--display);
    font-size: clamp(96px, 21vw, 236px);
    font-weight: 800;
    line-height: .82;
    letter-spacing: -.06em;
    margin-bottom: clamp(10px, 2vw, 20px);
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .2);
    background: linear-gradient(180deg, rgba(245, 134, 52, .22), transparent 76%);
    -webkit-background-clip: text;
    background-clip: text;
    user-select: none;
}

.endpage__title {
    font-size: clamp(34px, 6.4vw, 72px);
    line-height: 1.04;
    letter-spacing: -.035em;
    margin-top: clamp(14px, 2vw, 20px);
    color: #fff;
}

.endpage__text {
    max-width: 58ch;
    margin-top: clamp(16px, 2.2vw, 22px);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.75;
    color: rgba(255, 255, 255, .72);
}

.endpage__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(26px, 3.6vw, 40px);
}

/* ---- numbered steps on the thank-you page ---- */
.next-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    margin-top: clamp(30px, 4vw, 52px);
}

.next-step {
    position: relative;
    padding: clamp(26px, 3.2vw, 38px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.next-step:hover {
    transform: translateY(-6px);
    border-color: rgba(245, 134, 52, .35);
    box-shadow: var(--shadow-m);
}

.next-step__n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(245, 134, 52, .12);
    color: var(--orange);
    font-family: var(--display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
}

.next-step h3 {
    margin-top: 20px;
    font-size: clamp(18px, 1.9vw, 21px);
    letter-spacing: -.02em;
    color: var(--ink);
}

.next-step p {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--grey);
}

.next-steps__aside {
    margin-top: clamp(26px, 3.4vw, 40px);
    text-align: center;
    font-size: 15px;
    line-height: 1.8;
    color: var(--grey);
}

.next-steps__aside a {
    color: var(--ink);
    font-weight: 600;
    box-shadow: inset 0 -1px 0 rgba(245, 134, 52, .5);
    transition: color var(--t), box-shadow var(--t);
}

.next-steps__aside a:hover {
    color: var(--orange);
    box-shadow: inset 0 -2px 0 var(--orange);
}

/* ---- the four ways back on the 404 ---- */
.route-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    margin-top: clamp(30px, 4vw, 52px);
}

.route-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(24px, 3vw, 34px);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}

.route-card:hover {
    transform: translateY(-6px);
    border-color: rgba(245, 134, 52, .35);
    box-shadow: var(--shadow-m);
}

.route-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(245, 134, 52, .12);
    color: var(--orange);
    transition: background var(--t), color var(--t);
}

.route-card__icon svg {
    width: 24px;
    height: 24px;
}

.route-card:hover .route-card__icon {
    background: var(--orange);
    color: #fff;
}

.route-card h3 {
    margin-top: 20px;
    font-size: clamp(17px, 1.8vw, 20px);
    letter-spacing: -.02em;
    color: var(--ink);
}

.route-card p {
    margin-top: 9px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--grey);
}

.route-card .link-arrow {
    margin-top: auto;
    padding-top: 18px;
}

@media (max-width:1024px) {
    .route-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width:880px) {
    .next-steps {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .route-grid {
        grid-template-columns: 1fr
    }

    .endpage__actions .btn {
        width: 100%;
        justify-content: center
    }
}

@media (prefers-reduced-motion:reduce) {

    .endpage__tick circle,
    .endpage__tick path {
        animation: none;
        stroke-dashoffset: 0
    }
}

/* ---------- 17. Footer (inset card) ---------- */
.site-footer {
    background: var(--tint);
    padding: 0 0 clamp(18px, 2.4vw, 14px)
}

.footer__card {
    --fc-pad: clamp(24px, 4vw, 64px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: var(--ink);
    color: rgba(255, 255, 255, .62);
    border-radius: clamp(20px, 2.6vw, 34px);
    padding: clamp(38px, 5vw, 70px) var(--fc-pad) 0;
}

/* decorative peak line-art */
.footer__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    fill: none;
    stroke: rgba(255, 255, 255, .075);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer__lines .fl-rings {
    stroke: rgba(255, 255, 255, .06);
    stroke-dasharray: 5 10;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1.15fr 1.25fr;
    gap: clamp(30px, 4vw, 56px);
    padding-bottom: clamp(40px, 5vw, 68px);
}

/* --- brand block --- */
.footer__logo {
    height: 77px;
    width: auto;
    margin-bottom: 26px
}

.footer__tag {
    font-size: 15.5px;
    line-height: 1.75;
    max-width: 34ch
}

.footer__tag strong {
    color: #fff;
    font-weight: 600
}

.socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
}

.social {
    position: relative;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    isolation: isolate;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .05);
    transition: border-color .4s var(--ease), transform .5s var(--ease-out),
        box-shadow .45s var(--ease);
}

/* orange disc that grows from the centre */
.social::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange), var(--orange-d));
    transform: scale(0);
    transition: transform .5s var(--ease-out);
}

/* thin ring that pulses outward */
.social::after {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: 50%;
    border: 1px solid var(--orange);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .5s var(--ease), transform .6s var(--ease-out);
}

.social svg {
    width: 19px;
    height: 19px;
    transition: transform .5s var(--ease-out);
}

.social:hover {
    border-color: transparent;
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(245, 134, 52, .38);
}

.social:hover::before {
    transform: scale(1);
}

.social:hover::after {
    opacity: .5;
    transform: scale(1.35);
}

.social:hover svg {
    transform: scale(1.12);
}

.back-top {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    padding: 15px 26px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
    transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}

.back-top svg {
    width: 17px;
    height: 17px;
    transition: transform .45s var(--ease-out)
}

.back-top:hover {
    background: var(--orange);
    border-color: var(--orange)
}

.back-top:hover svg {
    transform: translateY(-4px)
}

/* --- link columns --- */
.footer__col h3 {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 26px;
}

.footer__col ul {
    display: grid;
    gap: 14px
}

.footer__col li {
    font-size: 15px;
    line-height: 1.6
}

/* common chevron bullet on the link columns */
/* arrow-in-a-circle bullet on the link columns */
.footer__col ul:not(.footer__contact) li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: gap .4s var(--ease-out);
}

.footer__col ul:not(.footer__contact) li:hover {
    gap: 15px;
}

.footer__col ul:not(.footer__contact) li::before {
    content: '';
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    border: 1px solid rgba(245, 134, 52, .38);
    background-color: rgba(245, 134, 52, .10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f58634' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
    transition: background-color .4s var(--ease), border-color .4s var(--ease),
        transform .5s var(--ease-out), box-shadow .45s var(--ease);
}

.footer__col ul:not(.footer__contact) li:hover::before {
    background-color: var(--orange);
    border-color: var(--orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
    transform: scale(1.1) rotate(0deg);
    box-shadow: 0 6px 16px rgba(245, 134, 52, .35);
}

/* the orange "view all" row reads as already-active */
.footer__col ul:not(.footer__contact) li:has(.footer__more)::before {
    background-color: var(--orange);
    border-color: var(--orange);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

.footer__col a {
    display: inline;
    color: rgba(255, 255, 255, .66);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color .35s var(--ease), border-color .35s var(--ease);
}

.footer__col a:hover {
    color: #fff;
    border-bottom-color: #fff
}

.footer__more {
    color: var(--orange) !important
}

.footer__more:hover {
    border-bottom-color: var(--orange) !important
}

/* contact list with icons */
.footer__contact {
    gap: 18px
}

.footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    line-height: 1.7
}

.fc-icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    flex: none;
    margin-top: 1px;
    background: rgba(245, 134, 52, .12);
    color: var(--orange);
    transition: background .4s var(--ease), color .4s var(--ease),
        transform .5s var(--ease-out), border-radius .4s var(--ease);
}

.fc-icon svg {
    width: 17px;
    height: 17px
}

.footer__contact li:hover .fc-icon {
    background: var(--orange);
    color: #fff;
    transform: scale(1.06);
    border-radius: 50%;
}

/* second heading inside a footer column (Quick Links + Verticals) */
.footer__col-second {
    margin-top: 26px;
}

/* --- accent bar --- */
.footer__bar {
    margin-inline: calc(-1 * var(--fc-pad));
    display: flex;
    flex-wrap: wrap;
    gap: 8px 26px;
    justify-content: space-between;
    align-items: center;
    background: var(--orange);
    /* white on this orange is 2.5:1 - ink clears 4.5:1 and matches the
       marquee band, which uses the same colour pairing */
    color: var(--ink);
    padding: 13px var(--fc-pad);
    font-size: 13px;
}

.footer__copy i {
    font-style: normal;
    opacity: .55;
    margin: 0 4px;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.footer__legal li+li::before {
    content: '|';
    opacity: .55;
    margin: 0 12px;
}

.footer__bar a {
    border-bottom: 1px solid rgba(35, 35, 37, .4);
    transition: border-color .35s var(--ease), opacity .35s var(--ease);
}

.footer__bar a:hover {
    border-bottom-color: var(--ink);
}

.footer__legal a {
    border-bottom-color: transparent;
}

.footer__legal a:hover {
    border-bottom-color: #fff;
}

/* ---------- 18. Back to top ---------- */
.to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--orange);
    color: #fff;
    box-shadow: var(--shadow-o);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity .4s var(--ease), visibility .4s, transform .5s var(--ease-out), background .35s var(--ease);
}

.to-top svg {
    width: 19px;
    height: 19px
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.to-top:hover {
    background: var(--ink);
    transform: translateY(-5px)
}

/* ---------- 19. Reveal animation ---------- */
.reveal {
    opacity: 0;
    transform: translateY(38px);
    transition: opacity .85s var(--ease-out), transform .85s var(--ease-out)
}

.reveal.is-in {
    opacity: 1;
    transform: translateY(0)
}

/* ---------- 20. Responsive ---------- */
@media (max-width:1100px) {

    /* the 8-stage flow wraps - connectors only make sense on one row */
    .eco__flow {
        grid-template-columns: repeat(4, 1fr);
        gap: 22px 10px
    }

    .eco-node::after {
        display: none
    }

    .nav__list {
        gap: 0
    }

    .nav__link {
        padding: 9px 11px;
        font-size: 14px
    }

    .section__head--split {
        grid-template-columns: 1fr;
        align-items: start
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .contact .info-grid:has(.info-card:nth-child(4)) {
        grid-template-columns: repeat(2, 1fr)
    }

    /* hero: give the copy more room before the compass column collapses */
    .hero__inner {
        gap: clamp(22px, 3vw, 44px)
    }

    .compass {
        width: min(100%, 300px)
    }

    .hero__float--a {
        left: -2%
    }

    .hero__float--b {
        right: -1%
    }

    .steps,
    .steps--six {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px
    }

    .steps::before {
        display: none
    }

    /* once .split is a single column the media fills the container, so the
       offset frame has to stay inside the 20px gutter */
    .svc-media,
    .svc-media:hover {
        --fo: 12px
    }

    .svc-media__chip {
        left: 12px
    }

    .footer__grid {
        grid-template-columns: 1fr 1fr;
        row-gap: 44px
    }

    .footer__brand {
        grid-column: 1 / -1
    }

    .footer__tag {
        max-width: 46ch
    }

    .mega {
        width: min(92vw, 660px)
    }
}

@media (max-width:980px) {

    /* the core stops sitting between the cards - it leads instead */
    .hub {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px
    }

    .hub__core {
        grid-column: 1 / -1;
        grid-row: 1;
        max-width: 210px;
        margin-bottom: 8px
    }

    .hub__card--1,
    .hub__card--2 {
        grid-row: 2
    }

    .hub__card--3,
    .hub__card--4 {
        grid-row: 3
    }

    .hub__card--left,
    .hub__card--right {
        grid-column: auto;
        flex-direction: row;
        text-align: left
    }

    .hub__link {
        display: none
    }

    :root {
        --header-h: 76px
    }

    .nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
        width: min(86vw, 340px);
        height: 100dvh;
        background: var(--ink);
        padding: 18px 20px 28px;
        display: flex;
        flex-direction: column;
        transform: translateX(105%);
        transition: transform .5s var(--ease-out);
        box-shadow: -20px 0 60px rgba(0, 0, 0, .35);
    }

    .nav.is-open {
        transform: translateX(0)
    }

    /* drawer header - flex-end keeps the close button top-right whether or
       not a logo sits beside it */
    .nav__head {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
        padding-bottom: 14px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--line-light);
    }

    .nav__head-logo {
        height: 28px;
        width: auto;
        margin-right: auto;
    }

    .nav__close {
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        flex: none;
        border: 1px solid var(--line-light);
        color: #fff;
        transition: background .35s var(--ease), border-color .35s var(--ease),
            transform .4s var(--ease-out);
    }

    .nav__close svg {
        width: 16px;
        height: 16px
    }

    .nav__close:hover {
        background: var(--orange);
        border-color: var(--orange);
        transform: rotate(90deg);
    }

    /* the outside hamburger sits under the drawer, so hand over to nav__close */
    .nav-toggle.is-open {
        opacity: 0;
        pointer-events: none
    }

    .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 1px
    }

    .nav__link {
        padding: 11px 14px;
        border-radius: 10px;
        font-size: 14.5px;
        font-weight: 500;
        color: rgba(255, 255, 255, .78);
    }

    .nav__link::after {
        left: auto;
        right: 14px;
        bottom: 50%;
        transform: translate(0, 50%)
    }

    .nav__link.is-active {
        background: rgba(245, 134, 52, .14);
        color: #fff
    }

    .site-header.is-stuck .nav__link {
        color: rgba(255, 255, 255, .78)
    }

    .site-header.is-stuck .nav__link:hover,
    .site-header.is-stuck .nav__link.is-active {
        color: #fff;
        background: rgba(255, 255, 255, .07)
    }

    .nav__mobile-foot {
        display: grid;
        gap: 10px;
        margin-top: 20px;
        padding-top: 18px;
        border-top: 1px solid var(--line-light)
    }

    /* the fixed WhatsApp / Call Us bar already carries the CTA on mobile,
       so the drawer does not need to repeat it */
    .nav__cta {
        display: none
    }

    .nav__mobile-link {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 12.8px;
        color: rgba(255, 255, 255, .6);
        transition: color .35s
    }

    .nav__mobile-link i {
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        flex: none;
        background: rgba(245, 134, 52, .14);
        color: var(--orange);
    }

    .nav__mobile-link i svg {
        width: 13px;
        height: 13px
    }

    .nav__mobile-link:hover {
        color: var(--orange)
    }

    .socials--nav {
        margin-top: 6px;
        gap: 8px
    }

    .socials--nav .social {
        width: 34px;
        height: 34px
    }

    .socials--nav .social svg {
        width: 15px;
        height: 15px
    }

    .nav-toggle {
        display: flex
    }

    .header__actions .btn {
        display: none
    }

    /* nav becomes scrollable, mega menu becomes an inline accordion */
    .nav {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch
    }

    .nav__list {
        flex: 1 0 auto
    }

    .nav__caret {
        display: none
    }

    .nav__sub-btn {
        display: grid;
        place-items: center;
        position: absolute;
        top: 2px;
        right: 4px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        color: rgba(255, 255, 255, .7);
        transition: transform .4s var(--ease-out), background .35s var(--ease), color .35s var(--ease);
    }

    .nav__sub-btn svg {
        width: 16px;
        height: 16px
    }

    .nav__item--drop.is-open .nav__sub-btn {
        transform: rotate(180deg);
        background: var(--orange);
        color: #fff
    }

    .mega {
        position: static;
        width: auto;
        padding-top: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height .55s var(--ease-out)
    }

    .nav__item--drop:hover .mega,
    .nav__item--drop:focus-within .mega {
        transform: none
    }

    .nav__item--drop:not(.is-open) .mega {
        max-height: 0 !important
    }

    .mega__panel {
        background: rgba(255, 255, 255, .04);
        border-color: var(--line-light);
        box-shadow: none;
        padding: 8px;
        margin: 4px 0 8px;
        border-radius: 14px;
    }

    .mega__grid {
        grid-template-columns: 1fr;
        gap: 0
    }

    .mega__item {
        padding: 5px 6px;
        gap: 10px
    }

    .mega__item:hover {
        background: rgba(255, 255, 255, .07);
        padding-left: 13px
    }

    .mega__item span {
        color: rgba(255, 255, 255, .82);
        font-size: 13px;
        font-weight: 500
    }

    .mega__icon {
        width: 22px;
        height: 22px;
        background: rgba(245, 134, 52, .16)
    }

    .mega__icon svg {
        width: 10px;
        height: 10px
    }

    .hero {
        min-height: auto;
        padding: calc(var(--header-h) + 70px) 0 80px
    }

    .hero__inner {
        grid-template-columns: 1fr;
        gap: 56px
    }

    .hero__visual {
        order: -1;
        min-height: 0
    }

    .compass {
        width: min(78%, 300px)
    }

    .hero__float--a {
        left: 0
    }

    .hero__float--b {
        right: 0
    }

    .hero__scroll {
        display: none
    }

    .page-hero__inner {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .page-hero__meta {
        justify-content: flex-start
    }

    .split,
    .cards,
    .info-grid {
        grid-template-columns: 1fr
    }

    /* popup stacks: the pitch becomes a compact header above the form.
       auto/1fr keeps the panel at content height instead of splitting the
       modal in half. */
    .eq-modal {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .eq-aside {
        justify-content: flex-start;
        padding: 26px 24px;
    }

    .eq-aside__title {
        font-size: 22px;
        margin-bottom: 10px;
    }

    .eq-aside__text {
        font-size: 14px;
    }

    .eq-aside__glow {
        left: auto;
        right: -110px;
        top: -130px;
        bottom: auto;
    }

    .eq-aside__list {
        display: none
    }

    .split--sticky .split__left {
        position: static
    }

    /* three cards read better as 2-up on a tablet than stacked full width */
    .cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }

    .stats__grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .s-card:hover {
        transform: translateY(-6px)
    }
}

@media (max-width:600px) {

    .hub {
        grid-template-columns: 1fr
    }

    .hub__card--1 { grid-row: 2 }
    .hub__card--2 { grid-row: 3 }
    .hub__card--3 { grid-row: 4 }
    .hub__card--4 { grid-row: 5 }

    .hub__icon {
        width: 60px;
        height: 60px
    }

    .hub__icon svg {
        width: 30px;
        height: 30px
    }

    .vert-emblem {
        padding: 20px;
        gap: 16px
    }

    .vert-emblem__ring {
        width: 68px;
        height: 68px
    }

    .vert-emblem__ring svg {
        width: 34px;
        height: 34px
    }

    .vert-emblem__chip {
        font-size: 13px
    }


    .eco__flow {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 10px
    }

    .container {
        width: calc(100% - 32px)
    }

    .brand__img {
        height: 50px
    }

    .site-header.is-stuck .brand__img {
        height: 64px;
    }

    /* three stats sit awkwardly as wrapped flex items on a phone */
    .hero__meta {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 20px;
        margin-top: 38px;
        padding-top: 28px
    }

    .hero__meta-item:last-child {
        grid-column: 1 / -1
    }

    .hero__meta-item span {
        font-size: 11.5px;
        letter-spacing: .08em
    }

    /* compass eats most of a phone screen before the headline appears */
    .hero__visual {
        display: none
    }

    .hero {
        padding: calc(var(--header-h) + 54px) 0 70px
    }

    .hero__actions .btn {
        flex: 1 1 100%;
        justify-content: center
    }

    .tick-list__item {
        padding: 20px 18px;
        gap: 14px
    }

    .tick-list__item:hover {
        transform: none
    }

    .cards {
        grid-template-columns: 1fr
    }

    .card {
        padding: 30px 24px
    }

    .card__index {
        font-size: 34px;
        top: 22px;
        right: 24px
    }

    .services__grid {
        grid-template-columns: 1fr
    }

    /* must repeat the :has() selector - it outranks a plain .info-grid rule */
    .info-grid,
    .contact .info-grid:has(.info-card:nth-child(4)) {
        grid-template-columns: 1fr
    }

    .info-card {
        padding: 26px 22px
    }

    .services__more-note {
        font-size: 11.5px;
        letter-spacing: .12em;
        gap: 12px
    }

    .reason-list,
    .steps,
    .steps--six,
    .offer-grid {
        grid-template-columns: 1fr
    }

    .reason {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .reason__num {
        top: 22px;
        right: 22px;
        bottom: auto;
        font-size: 42px
    }

    .chip {
        width: 100%
    }

    .strength:hover {
        transform: none
    }

    .svc-media {
        margin-bottom: 32px
    }

    .svc-media__chip {
        bottom: 12px;
        padding: 10px 16px 10px 10px
    }

    .svc-media__chip em {
        font-size: 12px
    }

    .s-card__body {
        padding: 22px 22px 24px
    }

    .stats__grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .stat {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 16px;
        padding: 20px 20px
    }

    .stat__icon {
        width: 46px;
        height: 46px;
        margin-bottom: 0;
        flex: none
    }

    .stat__label {
        margin-top: 4px
    }

    .tnp-form {
        grid-template-columns: 1fr
    }

    .form-card {
        border-radius: 22px
    }

    .eq-close {
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px
    }

    .form-foot .btn {
        width: 100%;
        justify-content: center
    }

    .acc-item__head {
        padding: 18px;
        gap: 12px
    }

    .acc-item__body p {
        padding: 0 18px 20px 18px
    }

    .slider__controls {
        gap: 14px
    }

    .footer__grid {
        grid-template-columns: 1fr;
        row-gap: 36px
    }

    .footer__card {
        border-radius: 20px
    }

    .footer__logo {
        height: 73px
    }

    .back-top {
        width: 100%;
        justify-content: center
    }

    .footer__bar {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 15px 18px;
        font-size: 12.5px
    }

    /* the bar is a column flex on mobile, so the list sizes to its content
       and overflows the card unless it is capped */
    .footer__legal {
        max-width: 100%;
        justify-content: center;
    }

    .footer__legal li+li::before {
        margin: 0 9px
    }

    .to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px
    }
}

/* ---------- 21. Motion preference ---------- */
@media (prefers-reduced-motion:reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none
    }
}