/* ==========================================================================
   One10 Consulting – main stylesheet
   Direction: "Concrete and yellow light". Palette, type and devices from the client's Final Theme board.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
    /* Brand palette (Final Theme board): yellow, charcoal and greys. */
    --accent: #FFC000;        /* Primary Yellow: buttons, bars, rules, text on dark only */
    --charcoal: #1A1A1A;
    --ink: #111111;
    --grey: #4D4D4D;          /* Dark Grey: secondary text on light */
    --ink-soft: #4D4D4D;      /* labels and hover text on light (yellow fails contrast on light) */
    --grey-mid: #A6A6A6;
    --line: #DADADA;          /* rules and borders on light */
    --grey-light: #EFEFEF;    /* alternate sections */
    --off-white: #F8F8F8;     /* page background */
    --on-dark: #F2F2F2;
    --on-dark-muted: #A6A6A6;

    --font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-logo: Poppins, Inter, Arial, sans-serif;

    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.25rem;
    --fs-lg: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
    --fs-d3: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem);
    --fs-d2: clamp(2.125rem, 1.4rem + 2.9vw, 3.5rem);
    --fs-d1: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
    --fs-hero: clamp(2.6rem, 1.2rem + 5.2vw, 5.5rem);

    --container: 1240px;
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --space-section: clamp(4.5rem, 9vw, 8.5rem);
    --header-h: 76px;

    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--charcoal);
    background: var(--off-white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, picture, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--charcoal); outline-offset: 3px; }
.section--dark :focus-visible, .hero :focus-visible, .banner--dark :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible { outline-color: var(--accent); }

.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 200;
    background: var(--charcoal); color: var(--off-white); padding: .75rem 1rem; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ---------- Typography ---------- */
.display-1, .display-2, .display-3,
.hero__title, .banner__title, .profile-hero__name, .cta-band__title, .article__title {
    font-weight: 500;
    font-stretch: 88%;
    letter-spacing: -0.022em;
    line-height: 1.06;
    text-wrap: balance;
}
.display-1 { font-size: var(--fs-d1); }
.display-2 { font-size: var(--fs-d2); }
.display-3 { font-size: var(--fs-d3); line-height: 1.12; }
.lede { font-size: var(--fs-lg); line-height: 1.45; color: var(--charcoal); max-width: 38em; }
.lede--light { color: var(--on-dark); }
.muted { color: var(--grey); }

.prose { max-width: 40rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-lg); font-weight: 600; margin-top: 2em; }
.prose .display-3 { font-size: var(--fs-d3); font-weight: 500; margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose a:not(.btn):not(.link) { color: var(--ink-soft); }

.pull {
    font-size: var(--fs-lg); line-height: 1.35; font-stretch: 92%;
    border-left: 3px solid var(--accent); padding: .2em 0 .2em 1.25rem; color: var(--charcoal);
}

/* ---------- Brand devices (Final Theme board) ---------- */
/* Spaced-caps labels with the short yellow bar: "PEOPLE · PLACES · POTENTIAL", "STRATEGY LED EXECUTION". */
.label, .service__name, .profile-hero__role, .adviser__heading, .form__title {
    display: block; font-size: .75rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; line-height: 1.5; color: var(--charcoal);
}
.label::after, .service__name::after, .profile-hero__role::after, .adviser__heading::after, .form__title::after {
    content: ""; display: block; width: 32px; height: 3px; margin-top: .85rem; background: var(--accent); transform-origin: left;
}
:is(.hero, .banner--dark, .cta-band, .section--dark, .profile-hero, .notfound) :is(.label, .profile-hero__role) { color: var(--on-dark); }
.cta-band .label::after { margin-inline: auto; transform-origin: center; }

/* The short yellow bar under section headings. */
.display-1::after, .display-2::after, .display-3::after, .section__title::after, .cta-band__title::after {
    content: ""; display: block; width: 40px; height: 3px; margin-top: .45em; background: var(--accent); transform-origin: left;
}
.cta-band__title::after { margin-inline: auto; transform-origin: center; }

/* Yellow highlight words ("a Changing World"). Yellow text is used on dark backgrounds only. */
.hl { font-style: normal; color: var(--accent); }

/* Numbered blocks: 01, 02… before each service and practice. */
main { counter-reset: svc hub; }
.service { counter-increment: svc; }
.service__name::before { content: counter(svc, decimal-leading-zero) "\2002\2002"; color: var(--grey-mid); }
.hub-block { counter-increment: hub; }
.hub-block__body h2::before {
    content: counter(hub, decimal-leading-zero); display: block; margin-bottom: .9rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .24em; color: var(--grey-mid);
}

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--cream { background: var(--grey-light); }
.section--dark { background: var(--charcoal); color: var(--on-dark); }
.section--dark .lede { color: var(--on-dark); }
.section__title { font-size: var(--fs-d3); font-weight: 500; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1.12; }
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__head > .display-2, .section__head > .display-3 { max-width: 20ch; }
.section__head > .lede { max-width: 30em; }

.split { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
    .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
    .split--narrow { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
}
.split__image { aspect-ratio: 4 / 5; }

/* ---------- Links & buttons ---------- */
.link {
    display: inline-flex; align-items: center; gap: .5em;
    font-weight: 500; color: var(--charcoal); text-decoration: none;
    background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat;
    padding-bottom: .15em; transition: background-size .35s var(--ease), color .2s;
}
.link:hover { color: var(--ink-soft); background-size: 0 2px; background-position: 100% 100%; }
.link--light, .section--dark .link { color: var(--on-dark); background-image: linear-gradient(var(--accent), var(--accent)); }
.link--light:hover, .section--dark .link:hover { color: var(--accent); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: .8rem 1.5rem; border: 1px solid transparent; border-radius: 0;
    font-weight: 600; font-size: var(--fs-sm); letter-spacing: .01em; text-decoration: none; cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, background-size .45s var(--ease), transform .15s ease;
}
.btn:active { transform: scale(.98); }
/* Solid buttons: a contrasting fill slides in from the left on hover. */
.btn--accent { --fill: var(--charcoal); --fill-text: #fff; background: linear-gradient(var(--fill), var(--fill)) 0 0 / 0 100% no-repeat var(--accent); color: var(--charcoal); }
.btn--dark { --fill: var(--accent); --fill-text: var(--charcoal); background: linear-gradient(var(--fill), var(--fill)) 0 0 / 0 100% no-repeat var(--charcoal); color: #fff; }
.btn--accent:hover, .btn--dark:hover { background-size: 100% 100%; color: var(--fill-text); }
/* On dark backgrounds the yellow button fills with white instead, so it never disappears. */
:is(.section--dark, .hero, .banner--dark, .profile-hero, .cta-band, .notfound, .mobile-menu, .action-bar) .btn--accent { --fill: #fff; --fill-text: var(--charcoal); }
.btn--ghost-light { border-color: rgba(255, 255, 255, .45); color: var(--on-dark); }
.btn--ghost-light:hover { border-color: var(--accent); color: var(--accent); }
.btn--block { width: 100%; }
.btn--large { min-height: 56px; padding-inline: 2rem; }

.chip {
    display: inline-flex; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: 2px;
    font-size: var(--fs-sm); text-decoration: none; background: transparent; transition: border-color .2s, color .2s;
}
.chip:hover { border-color: var(--charcoal); }
.chip.is-current { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }

.tag-illustrative {
    display: inline-block; margin-left: .35em; padding: .05em .45em; border: 1px solid currentColor; border-radius: 2px;
    font-size: .72em; font-weight: 500; letter-spacing: .02em; vertical-align: .1em; color: var(--ink-soft); text-decoration: none;
}
.section--dark .tag-illustrative, .outcomes__list--dark .tag-illustrative { color: var(--accent); }

/* ---------- Placeholder plates (until generated images are in place) ---------- */
.media { position: relative; overflow: hidden; background: var(--charcoal); }
.media img { width: 100%; height: 100%; object-fit: cover; }
/* Charcoal concrete with a single shaft of yellow light, echoing the brand imagery. */
.plate--dark {
    background:
        linear-gradient(90deg, transparent 64%, rgba(255, 192, 0, .9) 64%, rgba(255, 192, 0, .9) 64.5%, transparent 64.5%),
        radial-gradient(ellipse 26% 70% at 64% 50%, rgba(255, 192, 0, .20), transparent 70%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 72px),
        linear-gradient(165deg, #2b2b2b 0%, #1f1f1f 55%, #141414 100%);
}
.plate--light {
    background:
        linear-gradient(90deg, transparent 64%, var(--accent) 64%, var(--accent) 64.5%, transparent 64.5%),
        repeating-linear-gradient(90deg, rgba(17, 17, 17, .04) 0 1px, transparent 1px 56px),
        linear-gradient(165deg, #E9E9E9, #DCDCDC);
}

/* ---------- Gold arc (signature device) ---------- */
.arc { position: absolute; pointer-events: none; overflow: visible; }
.arc__line, .arc__ticks { fill: none; stroke: var(--grey-mid); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.arc__ticks { stroke: var(--accent); }
.arc__ticks { stroke-width: 6; stroke-dasharray: .35 1.65; opacity: .55; }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 100; height: var(--header-h);
    background: rgba(248, 248, 248, .96); backdrop-filter: saturate(1.2) blur(8px);
    border-bottom: 1px solid rgba(26, 26, 26, .08);
    transition: background-color .3s, border-color .3s, color .3s, transform .45s var(--ease);
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: 2rem; }
.has-dark-hero .site-header { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; color: var(--on-dark); }
.has-dark-hero .site-header.is-scrolled,
.has-dark-hero .site-header.is-open { background: rgba(248, 248, 248, .97); border-color: rgba(26, 26, 26, .08); color: var(--charcoal); }

.brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; flex-shrink: 0; }
.brand__mark { font-family: var(--font-logo); font-size: 1.85rem; font-weight: 700; letter-spacing: -0.045em; }
.brand__ten { color: var(--accent); }
.brand__word { margin-top: .2rem; font-size: .62rem; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; padding-left: .1em; }
.site-footer .brand, .brand--light { color: #fff; }

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: .25rem; }
.nav__link, .nav__trigger {
    display: inline-flex; align-items: center; gap: .4rem; height: 44px; padding: 0 .9rem;
    background: none; border: 0; font-size: var(--fs-sm); font-weight: 500; text-decoration: none; cursor: pointer;
    position: relative;
}
.nav__trigger::after {
    content: ""; width: .42rem; height: .42rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .2s;
}
.nav__trigger[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.nav__link::before, .nav__trigger::before {
    content: ""; position: absolute; left: .9rem; right: .9rem; bottom: 6px; height: 1px; background: var(--accent);
    transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__link:hover::before, .nav__trigger:hover::before, .is-current::before { transform: scaleX(1); }

.nav__item--has-menu { position: relative; }
.dropdown {
    position: absolute; top: calc(100% + 14px); left: -.5rem; width: 22rem; padding: .75rem;
    background: var(--off-white); color: var(--charcoal); border: 1px solid var(--line); box-shadow: 0 24px 48px -24px rgba(17, 17, 17, .35);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.dropdown__link { display: block; padding: .85rem 1rem; text-decoration: none; border-radius: 2px; }
.dropdown__link:hover { background: var(--grey-light); }
.dropdown__title { display: block; font-weight: 600; }
.dropdown__desc { display: block; font-size: var(--fs-sm); color: var(--grey); }

.nav__item--mega { position: static; }
.mega {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    background: var(--off-white); color: var(--charcoal); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    box-shadow: 0 32px 48px -32px rgba(17, 17, 17, .4);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s;
}
.mega__inner { padding-block: 2.5rem 1.75rem; }
.mega__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.mega__col { padding: 0 1.5rem; border-left: 1px solid var(--line); }
.mega__col:first-child { padding-left: 0; border-left: 0; }
.mega__practice { display: block; font-weight: 600; font-size: var(--fs-base); line-height: 1.3; text-decoration: none; margin-bottom: 1rem; min-height: 2.6em; }
.mega__practice:hover { color: var(--ink-soft); }
.mega__services li + li { margin-top: .55rem; }
.mega__services a { font-size: var(--fs-sm); color: var(--grey); text-decoration: none; line-height: 1.35; display: inline-block; }
.mega__services a:hover { color: var(--ink-soft); }
.mega__foot { display: flex; justify-content: space-between; gap: 2rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); }

.nav__item.is-open > .dropdown, .nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; }

.site-header__actions { display: flex; align-items: center; gap: 1.25rem; }
.header-phone { font-size: var(--fs-sm); font-weight: 500; text-decoration: none; white-space: nowrap; display: none; }
@media (min-width: 1320px) { .header-phone { display: inline; } }

.menu-toggle { display: none; width: 44px; height: 44px; background: none; border: 0; cursor: pointer; position: relative; }
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
    position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor; transition: transform .25s, opacity .2s;
}
.menu-toggle__bars { top: 21px; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; left: 0; }
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1080px) {
    .nav, .site-header__actions .btn { display: none; }
    .menu-toggle { display: block; }
    .site-header__actions { margin-left: auto; }
}

/* Mobile menu */
.mobile-menu {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 99; overflow-y: auto;
    background: var(--charcoal); color: var(--on-dark);
}
.mobile-menu__inner { padding: 1.5rem var(--gutter) 3rem; display: flex; flex-direction: column; min-height: 100%; }
.mobile-menu__list > li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.mobile-menu__link, .mobile-menu__acc {
    display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 60px;
    background: none; border: 0; padding: 0; text-align: left; text-decoration: none;
    font-size: 1.5rem; font-weight: 500; font-stretch: 90%; letter-spacing: -0.01em; cursor: pointer; color: inherit;
}
.mobile-menu__acc::after { content: "+"; font-weight: 300; color: var(--accent); font-size: 1.5rem; }
.mobile-menu__acc[aria-expanded="true"]::after { content: "–"; }
.mobile-menu__acc--sub { font-size: 1.05rem; min-height: 48px; font-weight: 500; }
.mobile-menu__sub { padding: 0 0 1rem; }
.mobile-menu__sub a { display: block; padding: .55rem 0; color: var(--on-dark-muted); text-decoration: none; }
.mobile-menu__sub a:hover { color: var(--accent); }
.mobile-menu__sub--deep { padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, .16); }
.mobile-menu__foot { margin-top: auto; padding-top: 2rem; display: grid; gap: .75rem; }
.mobile-menu__contact { color: var(--on-dark-muted); text-decoration: none; }
body.menu-open { overflow: hidden; }

/* ---------- Home: hero ---------- */
.hero {
    position: relative; min-height: min(100svh, 980px); display: flex; align-items: flex-end;
    color: var(--on-dark); background: var(--charcoal); isolation: isolate; overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(17, 17, 17, .78) 0%, rgba(17, 17, 17, .45) 45%, rgba(17, 17, 17, 0) 75%),
                linear-gradient(0deg, rgba(17, 17, 17, .7) 0%, rgba(17, 17, 17, 0) 40%);
}
.hero__content { padding-top: calc(var(--header-h) + 4rem); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.hero__label { margin-bottom: 1.75rem; }
.hero__title { font-size: var(--fs-hero); max-width: 15ch; color: #FFFFFF; }
.hero__sub { margin-top: 1.5rem; font-size: var(--fs-lg); font-weight: 500; color: #fff; }
.hero__lead { margin-top: 1rem; max-width: 36rem; color: var(--on-dark); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2.25rem; }
.hero__strip { display: flex; flex-wrap: wrap; gap: .5rem 0; margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: var(--fs-sm); color: var(--on-dark-muted); max-width: 44rem; }
.hero__strip li { padding-right: 1.25rem; margin-right: 1.25rem; border-right: 1px solid rgba(255, 255, 255, .25); }
.hero__strip li:last-child { border-right: 0; }

.arc--hero { right: -6vw; top: 50%; width: min(58vw, 860px); height: auto; aspect-ratio: 1; transform: translateY(-48%) rotate(-28deg); z-index: -1; opacity: .9; }
.arc--hero .arc__line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: arc-draw 2.6s var(--ease) .4s forwards; }
@keyframes arc-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 767px) {
    .hero { min-height: 92svh; }
    .hero::before { background: linear-gradient(0deg, rgba(17, 17, 17, .92) 0%, rgba(17, 17, 17, .55) 55%, rgba(17, 17, 17, .2) 100%); }
    .arc--hero { right: -40vw; top: 4%; width: 120vw; transform: rotate(-28deg); }
    .hero__strip li { border: 0; margin-right: 0; width: 100%; }
}

/* ---------- Inner banner ---------- */
.banner { position: relative; isolation: isolate; color: var(--on-dark); background: var(--charcoal); min-height: clamp(26rem, 52vw, 36rem); display: flex; align-items: flex-end; }
.banner__media { position: absolute; inset: 0; z-index: -2; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 17, 17, .82) 0%, rgba(17, 17, 17, .5) 50%, rgba(17, 17, 17, .05) 85%); }
.banner__content { padding-block: clamp(3rem, 6vw, 4.5rem); }
.banner__title { font-size: var(--fs-d1); max-width: 16ch; color: #FFFFFF; }
.banner__lead { margin-top: 1.25rem; max-width: 34rem; font-size: var(--fs-lg); line-height: 1.45; color: var(--on-dark); }
.banner .btn { margin-top: 2rem; }
.banner__jump { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, .16); font-size: var(--fs-sm); }
.banner__jump a { color: var(--on-dark-muted); text-decoration: none; }
.banner__jump a:hover { color: var(--accent); }
.banner--light { color: var(--charcoal); background: var(--grey-light); }
.banner--light::before { background: linear-gradient(90deg, rgba(248, 248, 248, .92) 0%, rgba(248, 248, 248, .6) 50%, rgba(248, 248, 248, 0) 85%); }
.banner--light .banner__title { color: var(--charcoal); }
.banner--light .banner__lead { color: var(--charcoal); }
.banner--light .crumbs a, .banner--light .crumbs li { color: var(--grey); }

.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; font-size: var(--fs-xs); margin-bottom: 1.5rem; }
.crumbs li { color: var(--on-dark-muted); }
.crumbs li + li::before { content: "/"; margin-right: .3rem; opacity: .6; }
.crumbs a { color: var(--on-dark-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs--dark li, .crumbs--dark a { color: var(--grey); }
.crumbs--dark a:hover { color: var(--ink-soft); }

/* ---------- Home: intro & pillars ---------- */
.intro__grid { display: grid; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 960px) { .intro__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.intro__statement .display-2 { max-width: 14ch; }
.intro__statement .lede { margin-top: 1.75rem; margin-bottom: 1.75rem; }
.pillars__item { padding: 1.4rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; }
.pillars__item:last-child { border-bottom: 1px solid var(--line); }
.pillars dt { font-weight: 600; color: var(--ink-soft); }

/* ---------- Founder band ---------- */
.founder__grid { display: grid; gap: clamp(3rem, 6vw, 6rem); align-items: center; }
@media (min-width: 960px) { .founder__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.founder__portrait, .adviser__portrait, .profile-hero__portrait, .teaser__portrait { position: relative; aspect-ratio: 1; max-width: 30rem; width: 100%; }
.founder__photo, .adviser__photo, .profile-hero__photo, .teaser__photo { position: absolute; inset: 9%; border-radius: 50%; }
.arc--portrait { inset: 0; width: 100%; height: 100%; }
.arc--portrait .arc__line { stroke: var(--grey-mid); }
.founder__body .display-2 { max-width: 15ch; }
.founder__name { margin-top: 1.5rem; font-weight: 600; color: var(--accent); }
.founder__body .lede { margin-top: .75rem; font-size: var(--fs-md); color: var(--on-dark); }
.founder__body > .link { margin-top: 2.5rem; }

.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 2.5rem; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stats__item { padding: 1.25rem 1.25rem 1.25rem 0; border-top: 1px solid rgba(255, 255, 255, .16); }
.stats dt { white-space: nowrap; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 500; font-stretch: 85%; letter-spacing: -0.02em; line-height: 1.1; color: #FFFFFF; }
.stats dt span { font-size: .45em; font-stretch: 100%; letter-spacing: 0; color: var(--accent); font-weight: 600; }
.stats dd { margin-top: .35rem; font-size: var(--fs-sm); color: var(--on-dark-muted); line-height: 1.4; }
.stats--light .stats__item { border-color: var(--line); }
.stats--light dt { color: var(--charcoal); }
.stats--light dt span { color: var(--ink-soft); }
.stats--light dd { color: var(--grey); }
@media (min-width: 640px) { .stats--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .stats--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1rem; } }

.mini-timeline { margin-top: 2.5rem; display: grid; gap: 0; }
.mini-timeline li { display: grid; grid-template-columns: 4rem minmax(0, 1fr); column-gap: 1rem; padding: .7rem 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-sm); }
.mini-timeline__year { color: var(--accent); font-weight: 600; grid-row: span 2; }
.mini-timeline__org { color: #FFFFFF; font-weight: 500; }
.mini-timeline__role { color: var(--on-dark-muted); }
@media (min-width: 720px) {
    .mini-timeline li { grid-template-columns: 4rem minmax(0, 13rem) minmax(0, 1fr); }
    .mini-timeline__year { grid-row: auto; }
}

/* ---------- Home: practice index ---------- */
.practice-index { border-top: 1px solid var(--charcoal); }
.practice-index__row { position: relative; border-bottom: 1px solid var(--line); }
.practice-index__link {
    display: grid; gap: .75rem 3rem; padding: clamp(1.75rem, 3vw, 2.5rem) 0; text-decoration: none;
    grid-template-columns: 1fr;
}
@media (min-width: 900px) {
    .practice-index__link { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; padding-right: 15rem; }
}
.practice-index__name { font-size: var(--fs-d3); font-weight: 500; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1.1; transition: color .25s; }
.practice-index__promise { font-size: var(--fs-base); color: var(--charcoal); }
.practice-index__services { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: var(--fs-sm); color: var(--grey); }
@media (min-width: 900px) { .practice-index__services { grid-column: 2; } }
.practice-index__media {
    position: absolute; right: 0; top: 1.25rem; bottom: 1.25rem; width: 10rem;
    display: none;
}
@media (min-width: 900px) {
    .practice-index__media { display: block; opacity: .5; transition: opacity .45s var(--ease); }
    .practice-index__media img { filter: grayscale(1); transition: filter .45s var(--ease); }
    .practice-index__row:hover .practice-index__media img { filter: none; }
    .practice-index__row:hover .practice-index__media, .practice-index__link:focus-visible + .practice-index__media { filter: none; opacity: 1; }
}
.practice-index__row:hover .practice-index__name { color: var(--ink-soft); }
.practice-index__media.plate { display: none; } /* show only once real images exist */

/* ---------- Home: audiences ---------- */
.audience-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.audience-tile {
    display: flex; flex-direction: column; gap: .6rem; height: 100%; padding: 1.75rem 1.5rem 2rem 0;
    border-bottom: 1px solid var(--line); text-decoration: none; transition: color .2s;
}
.audience-tile__name { font-size: var(--fs-md); font-weight: 600; }
.audience-tile__need { color: var(--grey); }
.audience-tile:hover .audience-tile__name { color: var(--ink-soft); }

/* ---------- Method ---------- */
.method .section__title { max-width: 18ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.method__steps { display: grid; gap: 2rem; counter-reset: step; }
@media (min-width: 900px) { .method__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.method__step { position: relative; padding-top: 1.5rem; border-top: 2px solid var(--line); }
@media (min-width: 900px) { .method__step { padding-right: 2rem; } }
.method__num { display: block; font-size: clamp(3rem, 2rem + 3vw, 4.5rem); font-weight: 400; font-stretch: 80%; line-height: 1; color: var(--charcoal); margin-bottom: 1rem; }
.method__verb { font-size: var(--fs-md); font-weight: 600; }
.method__verb span { font-weight: 400; color: var(--grey); }
.method__step p { margin-top: .6rem; font-size: var(--fs-sm); color: var(--grey); max-width: 26ch; }
.method__delivery { margin-top: 2.5rem; color: var(--grey); font-size: var(--fs-sm); }
.method--compact .method__num { font-size: 2.25rem; }

/* ---------- Home: illustrative value ---------- */
.value .display-2 { max-width: 16ch; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.value__grid { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 720px) { .value__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .value__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.value__item { display: flex; flex-direction: column; gap: .75rem; padding: 2rem 2rem 2rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.value__figure { font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.75rem); font-weight: 500; font-stretch: 82%; letter-spacing: -0.02em; line-height: 1; color: var(--accent); }
.value__figure::after { content: "Illustrative"; display: inline-block; margin-left: .6rem; padding: .1em .45em; border: 1px solid rgba(255, 255, 255, .16); border-radius: 2px; font-size: .75rem; font-stretch: 100%; letter-spacing: .02em; vertical-align: middle; color: var(--accent); }
.value__caption { color: var(--on-dark); font-size: var(--fs-sm); line-height: 1.5; }
.value__link { margin-top: auto; font-size: var(--fs-xs); color: var(--on-dark-muted); text-decoration: none; }
.value__link:hover { color: var(--accent); }
.value__note { margin-top: 2rem; font-size: var(--fs-xs); color: var(--on-dark-muted); max-width: 46rem; }
.value__note a { color: var(--accent); }

/* ---------- CTA band ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark); background: var(--ink); text-align: center; }
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(17, 17, 17, .45); }
.cta-band__content { position: relative; padding-block: clamp(5rem, 10vw, 8.5rem); display: flex; flex-direction: column; align-items: center; }
.arc--cta { width: min(44rem, 120vw); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(200deg); opacity: .5; }
.cta-band__title { position: relative; font-size: var(--fs-d2); max-width: 18ch; color: #FFFFFF; }
.cta-band__text { position: relative; margin-top: 1.25rem; max-width: 38rem; color: var(--on-dark); }
.cta-band__actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.25rem; }

/* ---------- Adviser panel ---------- */
.adviser__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 800px) { .adviser__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.adviser__portrait { max-width: 22rem; }
.adviser__heading { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.adviser__name { margin-top: .5rem; font-size: var(--fs-d3); font-weight: 500; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1.1; }
.adviser__credential { margin-top: .5rem; color: var(--grey); }
.adviser__note { margin-top: 1.5rem; font-size: var(--fs-md); max-width: 36rem; line-height: 1.5; }
.adviser__direct { margin-top: 1rem; color: var(--grey); max-width: 36rem; }
.adviser__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

/* ---------- Practice: overview, services, outcomes ---------- */
.overview .lede { font-size: var(--fs-lg); }
.lifecycle { display: grid; gap: 0; align-self: center; border-top: 1px solid var(--charcoal); }
.lifecycle a { display: flex; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-d3); font-weight: 500; font-stretch: 88%; text-decoration: none; }
.lifecycle a:hover { color: var(--ink-soft); }
.lifecycle__num { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); width: 1.5rem; }

.service { padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.service:nth-of-type(even) { background: var(--grey-light); }
.service__head { max-width: 50rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.service__name { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); letter-spacing: .01em; }
.service__headline { margin-top: .75rem; font-size: var(--fs-d2); font-weight: 500; font-stretch: 88%; letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; }
.service__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); }
@media (min-width: 900px) {
    .service__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .service--flip .service__body { order: 2; }
}
.service__context { font-size: var(--fs-md); line-height: 1.55; max-width: 38rem; }
.service__label { margin-top: 2.25rem; margin-bottom: .75rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); }
.section--dark .service__label { color: var(--accent); }
.service__help { border-top: 1px solid var(--line); }
.service__help li { padding: .9rem 0 .9rem 1.75rem; border-bottom: 1px solid var(--line); position: relative; }
.service__help li::before { content: ""; position: absolute; left: 0; top: 1.45em; width: .9rem; height: 3px; background: var(--accent); }
.service__for { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--grey); }
.service__for span { font-weight: 600; color: var(--charcoal); margin-right: .35rem; }
.service__aside { display: flex; flex-direction: column; gap: 1.5rem; }
.service__image { aspect-ratio: 4 / 5; }
.service__value { border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1.5rem; }
.service__value .service__label { margin-top: 0; }
.service__value p { font-size: var(--fs-lg); line-height: 1.4; font-stretch: 94%; }
.service__cta { margin-top: 2.5rem; }

.outcomes { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.outcomes__title { font-size: var(--fs-sm); font-weight: 600; color: var(--grey); margin-bottom: 1rem; }
.outcomes__list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--charcoal); }
@media (min-width: 640px) { .outcomes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.outcomes__item { padding: 1.25rem 1.5rem 1.25rem 0; border-bottom: 1px solid var(--line); }
.outcomes__item dt { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 500; font-stretch: 84%; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-soft); }
.outcomes__item dd { margin-top: .35rem; font-size: var(--fs-sm); color: var(--grey); }
.outcomes__list--dark { margin-top: 2.5rem; border-color: rgba(255, 255, 255, .16); }
.outcomes__list--dark .outcomes__item { border-color: rgba(255, 255, 255, .12); }
.outcomes__list--dark dt { color: var(--accent); }
.outcomes__list--dark dd { color: var(--on-dark-muted); }

/* ---------- Related ---------- */
.related .section__title { margin-bottom: 2rem; }
.related__list { border-top: 1px solid var(--charcoal); margin-bottom: 2rem; }
.related__item { display: grid; gap: .25rem 3rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
@media (min-width: 800px) { .related__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; } }
.related__name { font-size: var(--fs-md); font-weight: 600; }
.related__teaser { color: var(--grey); }
.related__item:hover .related__name { color: var(--ink-soft); }
.related__sub { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); margin-bottom: .75rem; }
.related__articles li + li { margin-top: .5rem; }

/* ---------- About ---------- */
.principles { display: grid; gap: 0; margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--charcoal); }
@media (min-width: 800px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; } }
.principles__item { padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.principles dt { font-size: var(--fs-md); font-weight: 600; }
.principles dd { margin-top: .5rem; color: var(--grey); max-width: 32rem; }

.success__list { display: grid; gap: 0; margin-top: 2.5rem; border-top: 1px solid rgba(255, 255, 255, .16); }
@media (min-width: 900px) { .success__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.success__list li { padding: 1.5rem 1rem 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-lg); font-weight: 500; font-stretch: 90%; line-height: 1.25; color: #FFFFFF; }

.teaser { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 800px) { .teaser { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.teaser__portrait { max-width: 20rem; }
.teaser__photo { inset: 0; }
.teaser__body .lede { margin-top: 1rem; }
.teaser__body .stats { margin-top: 2rem; }
.teaser__body > .link { margin-top: 2rem; }

/* ---------- Leadership ---------- */
.profile-hero {
    position: relative; isolation: isolate; overflow: hidden; color: var(--on-dark);
    background: radial-gradient(ellipse 55% 75% at 74% 52%, #2e2e2e 0%, #1c1c1c 55%, #111 100%);
}
.profile-hero__grid { display: grid; gap: 2.5rem; align-items: center; padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) { .profile-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.profile-hero__name { margin-top: .5rem; font-size: var(--fs-d1); color: #FFFFFF; }
.profile-hero__tagline { margin-top: 1.25rem; font-size: var(--fs-lg); color: var(--on-dark); max-width: 26rem; line-height: 1.4; }
.profile-hero .btn { margin-top: 2.25rem; }

/* Career fan: portrait with year wedges, nodes and callouts (includes/partials/career-fan.php) */
.profile-hero__visual { min-width: 0; }
.career-fan { position: relative; }
.career-fan__svg { width: 100%; height: auto; overflow: visible; }
.career-fan__wedge path { fill: #2f2f2f; stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.career-fan__wedge:nth-child(even) path { fill: #383838; }
.career-fan__wedge text {
    fill: var(--on-dark); font-family: var(--font); font-size: 21px; font-weight: 700; letter-spacing: .06em;
    text-anchor: middle; dominant-baseline: central;
}
.career-fan__wedge.is-current path { fill: var(--accent); stroke: none; }
.career-fan__wedge.is-current text { fill: var(--charcoal); }
.career-fan__link path { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1; vector-effect: non-scaling-stroke; }
.career-fan__node { fill: var(--charcoal); stroke: var(--on-dark); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.career-fan__node.is-current { fill: var(--accent); stroke: var(--accent); }
.career-fan__portrait { position: absolute; aspect-ratio: 1; }
.career-fan__photo { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -20px rgba(0, 0, 0, .6); }
.career-fan__list { position: absolute; top: 0; bottom: 0; right: 0; margin: 0; padding: 0; list-style: none; }
.career-fan__list li { position: absolute; left: 0; right: 0; transform: translateY(-50%); line-height: 1.3; }
.career-fan__list strong { display: block; font-size: var(--fs-sm); font-weight: 600; color: #fff; }
.career-fan__list span:not(.visually-hidden) { display: block; margin-top: .15rem; font-size: var(--fs-xs); color: var(--on-dark-muted); }
.career-fan__list li.is-current strong { color: var(--accent); }

/* Phones and tablets: show the portrait and year wedges only (the full career timeline follows below). */
@media (max-width: 899px) {
    .profile-hero__visual { overflow: hidden; max-width: 30rem; width: 100%; justify-self: center; }
    .career-fan { width: 143.75%; }   /* 920 / 640: crop the drawing to the portrait and wedges */
    .career-fan__list, .career-fan__link { display: none; }
}
.arc--draw .arc__line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: arc-draw 2.4s var(--ease) .3s forwards; }

.timeline { margin-top: clamp(2rem, 4vw, 3rem); border-left: 2px solid var(--line); }
.timeline__item { position: relative; display: grid; gap: .5rem 3rem; padding: 0 0 2.5rem 2rem; }
.timeline__item::before { content: ""; position: absolute; left: -5.5px; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
@media (min-width: 800px) { .timeline__item { grid-template-columns: 9rem minmax(0, 1fr); } }
.timeline__years { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.timeline__role { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.timeline__org { margin-top: .25rem; color: var(--charcoal); }
.timeline__scope { margin-top: .25rem; font-size: var(--fs-sm); color: var(--grey); }

.relevance { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--charcoal); }
.relevance__row { display: grid; gap: .25rem 3rem; padding: 1.25rem 0; border-bottom: 1px solid var(--line); }
@media (min-width: 800px) { .relevance__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; } }
.relevance__exp { font-size: var(--fs-md); }
.relevance__service { font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.relevance__service:hover { text-decoration: underline; }

/* ---------- Services hub ---------- */
.need-list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--charcoal); }
.need-list__row { display: grid; gap: .25rem 3rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
@media (min-width: 800px) { .need-list__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: baseline; } }
.need-list__q { font-size: var(--fs-lg); font-weight: 500; font-stretch: 92%; line-height: 1.3; }
.need-list__a { color: var(--ink-soft); font-weight: 600; font-size: var(--fs-sm); }
.need-list__row:hover .need-list__q { color: var(--ink-soft); }

.hub-block__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 900px) {
    .hub-block__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    .hub-block--flip .hub-block__media { order: 2; }
    .hub-block--flip .hub-block__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}
.hub-block__image { aspect-ratio: 3 / 4; }
@media (max-width: 899px) { .hub-block__image { aspect-ratio: 16 / 9; } }
.hub-block__body h2 a { text-decoration: none; }
.hub-block__body h2 a:hover { color: var(--ink-soft); }
.hub-block__body .lede { margin-top: 1rem; }
.hub-services { margin: 2rem 0; border-top: 1px solid var(--line); }
.hub-services li { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.hub-services__name { font-size: var(--fs-md); font-weight: 600; }
.hub-services__name a { text-decoration: none; }
.hub-services__name a:hover { color: var(--ink-soft); }
.hub-services p { margin-top: .25rem; color: var(--grey); }

/* ---------- Redevelopment ---------- */
.role-diagram { position: relative; aspect-ratio: 1; max-width: 26rem; width: 100%; justify-self: center; border: 1px solid var(--grey-mid); border-radius: 50%; }
.role-diagram__centre {
    position: absolute; inset: 32%; display: grid; place-items: center; text-align: center; border-radius: 50%;
    background: var(--charcoal); color: var(--off-white); font-weight: 600; font-size: var(--fs-md);
}
.role-diagram__ring li { position: absolute; transform: translate(-50%, -50%); background: var(--grey-light); padding: .3rem .7rem; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; border: 1px solid var(--line); }
.role-diagram__ring li:nth-child(1) { left: 50%; top: 0; }
.role-diagram__ring li:nth-child(2) { left: 100%; top: 50%; }
.role-diagram__ring li:nth-child(3) { left: 50%; top: 100%; }
.role-diagram__ring li:nth-child(4) { left: 0; top: 50%; }
.role-diagram__lead { background: var(--accent) !important; color: var(--charcoal); border-color: var(--accent) !important; }
@media (max-width: 520px) { .role-diagram { max-width: 18rem; margin-block: 1.5rem; } .role-diagram__ring li { font-size: var(--fs-xs); } }

.journey__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .journey__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.journey__step { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 1rem; padding: 1.75rem 0; border-top: 1px solid var(--line); }
.journey__step:last-child { border-bottom: 1px solid var(--line); }
.journey__num { grid-row: span 2; font-size: 2.75rem; font-stretch: 80%; line-height: 1; color: var(--charcoal); }
.journey__step h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.journey__step p { margin-top: .5rem; color: var(--grey); }
.journey__image { aspect-ratio: 4 / 5; }

.faq { margin-top: 2rem; border-top: 1px solid var(--charcoal); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; font-size: var(--fs-md); font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-soft); font-weight: 400; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 1.5rem; color: var(--grey); max-width: 40rem; }

.scope-note { font-size: var(--fs-sm); color: var(--grey); max-width: 46rem; padding-left: 1rem; border-left: 3px solid var(--accent); }
.scope-note a { color: var(--ink-soft); }

/* ---------- Disputes ---------- */
.causes { display: flex; flex-wrap: wrap; border-top: 1px solid var(--charcoal); }
.causes li { flex: 1 1 12rem; padding: 1.25rem 1rem 1.25rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-lg); font-weight: 500; font-stretch: 90%; }
.dispute-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 900px) { .dispute-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.dispute-item { padding: 1.75rem 0; border-top: 1px solid var(--line); }
.dispute-item:last-child { border-bottom: 1px solid var(--line); }
.dispute-item h3 { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.dispute-item p { margin-top: .5rem; color: var(--grey); }
.dispute-grid__image { aspect-ratio: 4 / 5; }

/* ---------- Who we serve ---------- */
.audience__grid { display: grid; gap: 1.5rem clamp(2rem, 5vw, 5rem); }
@media (min-width: 900px) { .audience__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.audience__intro .display-3 { max-width: 14ch; }
.audience__need { margin-top: 1rem; font-size: var(--fs-lg); color: var(--ink-soft); font-stretch: 94%; line-height: 1.35; }
.audience__body > .service__label:first-child { margin-top: 0; }
.audience__questions { border-top: 1px solid var(--line); }
.audience__questions li { padding: .8rem 0; border-bottom: 1px solid var(--line); }

/* ---------- Insights ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 3rem; }
.article-grid { display: grid; gap: 2.5rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .article-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.article-card__link { display: flex; flex-direction: column; gap: .75rem; text-decoration: none; }
.article-card__media { aspect-ratio: 3 / 2; }
.article-card__meta { display: flex; gap: 1rem; font-size: var(--fs-xs); color: var(--grey); }
.article-card__meta span { color: var(--ink-soft); font-weight: 600; }
.article-card__title { font-size: var(--fs-lg); font-weight: 500; font-stretch: 92%; line-height: 1.25; }
.article-card__summary { color: var(--grey); font-size: var(--fs-sm); }
.article-card__link:hover .article-card__title { color: var(--ink-soft); }
.featured { margin-bottom: 4rem; }
.featured__link { display: grid; gap: 2rem; text-decoration: none; }
@media (min-width: 900px) { .featured__link { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; } }
.featured__media { aspect-ratio: 16 / 9; }
.featured__body { display: flex; flex-direction: column; gap: 1rem; }
.featured__title { font-size: var(--fs-d3); font-weight: 500; font-stretch: 88%; line-height: 1.12; }

.article__head { padding-top: clamp(3rem, 6vw, 5rem); max-width: 56rem; }
.article__title { font-size: var(--fs-d1); }
.article__byline { margin-top: 1.5rem; color: var(--grey); font-size: var(--fs-sm); }
.article__byline a { color: var(--ink-soft); }
.article__media { aspect-ratio: 16 / 9; margin-top: 3rem; max-width: var(--container); padding: 0; }
.article__body { padding-block: 3rem var(--space-section); }
.takeaways { margin-top: 3rem; padding: 1.5rem 1.75rem; background: var(--grey-light); border-left: 3px solid var(--accent); }
.takeaways h2 { margin-top: 0; font-size: var(--fs-base); }
.related-service { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.related-service__name { font-size: var(--fs-lg); font-weight: 600; text-decoration: none; }

/* ---------- Contact ---------- */
.contact { padding-top: clamp(3rem, 6vw, 5rem); }
.contact__title { max-width: 14ch; }
.contact__lede { margin-top: 1.25rem; }
.contact__grid { display: grid; gap: clamp(3rem, 6vw, 6rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 1000px) { .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } }
.form__title { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); margin-bottom: 1.5rem; }
.form__row { display: grid; gap: 0 1.5rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.4rem; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-size: var(--fs-sm); font-weight: 600; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
    width: 100%; min-height: 50px; padding: .75rem .9rem; background: #FFFFFF; border: 1px solid var(--line); border-radius: 2px;
    transition: border-color .2s, box-shadow .2s, background-size .5s var(--ease);
}
/* Focus: a yellow underline draws left to right (select keeps its native rendering). */
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea {
    background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
}
.field input:focus, .field textarea:focus { background-size: 100% 2px; }
.field label { transition: color .25s; }
.field:focus-within > label { color: var(--ink-soft); }
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--charcoal); box-shadow: 0 0 0 3px rgba(255, 192, 0, .35); }
.field [aria-invalid="true"] { border-color: #A23B2A; }
.field__error { color: #A23B2A; font-size: var(--fs-sm); }
.field--radios { flex-direction: row; flex-wrap: wrap; gap: .5rem 1.5rem; }
.field--radios legend { width: 100%; margin-bottom: .5rem; }
.radio, .check { display: inline-flex; align-items: flex-start; gap: .6rem; font-size: var(--fs-sm); cursor: pointer; }
.radio input, .check input { width: 18px; height: 18px; margin-top: .15rem; accent-color: var(--accent); flex-shrink: 0; }
.check a { color: var(--ink-soft); }
.form__alert { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border-left: 2px solid #A23B2A; background: #F6E9E3; font-size: var(--fs-sm); }
.form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form__note { margin-top: 1rem; font-size: var(--fs-xs); color: var(--grey); }
.contact__aside { display: grid; gap: 2.5rem; }
.contact__media { position: relative; aspect-ratio: 1; max-width: 16rem; }
.contact__photo { position: absolute; inset: 0; border-radius: 50%; }
.contact__person { font-weight: 600; font-size: var(--fs-md); line-height: 1.3; margin-bottom: 1rem; }
.contact__person span { font-weight: 400; color: var(--grey); font-size: var(--fs-sm); }
.contact__line { text-decoration: none; font-weight: 500; }
.contact__line:hover { color: var(--ink-soft); }
.contact__direct p + p { margin-top: .4rem; }
.next-steps { counter-reset: n; display: grid; gap: .9rem; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 1.75rem 1fr; font-size: var(--fs-sm); color: var(--grey); }
.next-steps li::before { content: counter(n); color: var(--ink-soft); font-weight: 600; }

/* ---------- Legal & notices ---------- */
.legal .display-1, .notice .display-1 { font-size: var(--fs-d2); margin-bottom: 1rem; }
.legal h2[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

.notfound { position: relative; isolation: isolate; min-height: 80svh; display: flex; align-items: center; color: var(--on-dark); background: var(--ink); }
.notfound__media { position: absolute; inset: 0; z-index: -2; }
.notfound::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(17, 17, 17, .85), rgba(17, 17, 17, .2)); }
.notfound__content { padding-block: 6rem; }
.notfound .display-1 { max-width: 14ch; color: #FFFFFF; }
.notfound .lede { margin-top: 1.25rem; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2.5rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--on-dark-muted); padding-top: clamp(4rem, 8vw, 6rem); padding-bottom: 2rem; font-size: var(--fs-sm); }
.site-footer__grid { display: grid; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); } }
.site-footer__brand p { margin-top: 1.25rem; max-width: 22rem; }
.site-footer__line { color: var(--accent); font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.site-footer__heading { font-size: var(--fs-sm); font-weight: 600; color: var(--on-dark); margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li + li { margin-top: .55rem; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer address strong { color: var(--on-dark); font-weight: 600; }
.site-footer address { line-height: 1.8; }
.site-footer__social { display: inline-block; margin-top: .75rem; }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: .75rem 2rem; align-items: center; padding-top: 1.5rem; font-size: var(--fs-xs); }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.site-footer__note { flex-basis: 100%; opacity: .8; }

/* ---------- Mobile action bar ---------- */
.action-bar { display: none; }
@media (max-width: 767px) {
    .action-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex;
        background: var(--charcoal); border-top: 1px solid rgba(255, 255, 255, .16);
        transform: translateY(100%); transition: transform .3s var(--ease);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .action-bar.is-visible { transform: none; }
    .action-bar a { flex: 1; display: grid; place-items: center; min-height: 56px; color: var(--on-dark); text-decoration: none; font-weight: 600; font-size: var(--fs-sm); }
    .action-bar a + a { border-left: 1px solid rgba(255, 255, 255, .12); }
    .action-bar__primary { background: var(--accent); color: var(--charcoal) !important; }
    body:has(.action-bar.is-visible) .site-footer { padding-bottom: calc(2rem + 56px); }
}

/* ==========================================================================
   Motion: "light moving across concrete"
   Hidden-before-reveal states apply only under html.motion, which the inline
   script in <head> adds when reduced motion is not requested. main.js tags
   elements (data-reveal) and adds .is-in as they enter the viewport. Without
   JavaScript, or with reduced motion, everything is simply visible.
   ========================================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* Hold the page for a moment until main.js has tagged elements (fail-safe timer in <head>). */
.motion:not(.motion-ready) main { opacity: 0; }

/* Transitions live on the revealed (.is-in) state only, so hiding an element that was
   already painted is instant and only the reveal animates. */

/* M1 Rise / rise from the right */
.motion [data-reveal="rise"]:not(.is-in) { opacity: 0; transform: translateY(22px); }
.motion [data-reveal="rise-x"]:not(.is-in) { opacity: 0; transform: translateX(32px); }
.motion :is([data-reveal="rise"], [data-reveal="rise-x"]).is-in {
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms);
}

/* Stagger: direct children rise one after another */
.motion [data-reveal="stagger"]:not(.is-in) > * { opacity: 0; transform: translateY(22px); }
.motion [data-reveal="stagger"].is-in > * {
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
    transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 90ms);
}

/* M2 Line mask: words sit in clipped boxes and rise line by line */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.w__i { display: inline-block; }
.motion [data-reveal="lines"]:not(.is-in) .w__i { transform: translateY(112%); }
.motion [data-reveal="lines"].is-in .w__i { transition: transform 1.05s var(--ease-out); transition-delay: calc(var(--d, 0ms) + var(--ln, 0) * 110ms); }

/* M3 Light bar: heading and label bars draw in after their text */
.motion [data-reveal="lines"]:not(.is-in)::after,
.motion :is(.label, .service__name, .profile-hero__role, .adviser__heading, .form__title)[data-reveal]:not(.is-in)::after { transform: scaleX(0); }
.motion [data-reveal="lines"].is-in::after { transition: transform .9s var(--ease-out) calc(var(--d, 0ms) + .55s); }
.motion :is(.label, .service__name, .profile-hero__role, .adviser__heading, .form__title)[data-reveal].is-in::after { transition: transform .9s var(--ease-out) calc(var(--d, 0ms) + .35s); }
/* "Changing World" turns yellow after its line has risen */
.motion .hero__title:not(.is-in) .hl .w__i { color: #fff; }
.motion [data-reveal="lines"].is-in .hl .w__i {
    transition: transform 1.05s var(--ease-out) calc(var(--d, 0ms) + var(--ln, 0) * 110ms), color .9s ease calc(var(--d, 0ms) + 1.15s);
}

/* M4 Rule draw: a container's top border is redrawn as a line that grows left to right */
.motion [data-rule] { position: relative; border-top-color: transparent !important; }
.motion [data-rule]::before {
    content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--rule-w, 1px)); height: var(--rule-w, 1px);
    background: var(--rule-c, currentColor); transform: scaleX(0); transform-origin: left;
}
.motion [data-rule].is-ruled::before { transform: none; transition: transform 1.3s var(--ease-out) var(--d, 0ms); }

/* M5 Curtain: image uncovered by a moving edge while it settles from 112% */
.motion [data-reveal="curtain"]:not(.is-in) { clip-path: inset(100% 0 0 0); }
.motion [data-reveal="curtain-left"]:not(.is-in) { clip-path: inset(0 100% 0 0); }
.motion [data-reveal="curtain-right"]:not(.is-in) { clip-path: inset(0 0 0 100%); }
.motion [data-reveal^="curtain"]:not(.is-in) img { transform: scale(1.12); }
.motion [data-reveal^="curtain"].is-in { transition: clip-path 1.4s var(--ease-out) var(--d, 0ms); }
.motion [data-reveal^="curtain"].is-in img { transition: transform 1.9s var(--ease-out) var(--d, 0ms); }

/* M6 Iris: round portraits open from the centre, then the arc draws around them */
.motion [data-reveal="iris"]:not(.is-in) .media { clip-path: circle(0% at 50% 50%); }
.motion [data-reveal="iris"]:not(.is-in) .media img { transform: scale(1.18); }
.motion [data-reveal="iris"]:not(.is-in) .arc__ticks { opacity: 0; }
.motion [data-reveal="iris"] .arc__line { stroke-dasharray: 100; stroke-dashoffset: 100; }
.motion [data-reveal="iris"].is-in .media { transition: clip-path 1.5s var(--ease-out) var(--d, 0ms); }
.motion [data-reveal="iris"].is-in .media img { transition: transform 2s var(--ease-out) var(--d, 0ms); }
.motion [data-reveal="iris"].is-in .arc__line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease-out) calc(var(--d, 0ms) + .45s); }
.motion [data-reveal="iris"].is-in .arc__ticks { transition: opacity 1.2s ease calc(var(--d, 0ms) + 1.1s); }

/* M7 Count-up: steady digits while numbers roll */
.is-counting { font-variant-numeric: tabular-nums; }

/* M8 Drift: background media is taller than its frame so it can move slower than the page */
.motion.can-drift :is(.hero__media, .banner__media, .cta-band__media, .notfound__media) { top: -7%; bottom: -7%; will-change: transform; }
.motion.can-drift :is(.banner, .notfound) { overflow: hidden; }

/* Hero: the building's lights switch on, then the copy follows (sequenced by main.js) */
.motion :is(.hero__media, .notfound__media) img { animation: lights-on 2.6s var(--ease-out) both; }
@keyframes lights-on { from { filter: brightness(.3) saturate(.2); transform: scale(1.1); } to { filter: none; transform: none; } }
.motion .hero__content { will-change: opacity, transform; }
.scroll-cue { display: none; }
@media (min-width: 768px) {
    .motion .scroll-cue {
        display: block; position: absolute; right: var(--gutter); bottom: clamp(3rem, 7vw, 5.5rem); width: 1px; height: 64px;
        background: rgba(255, 255, 255, .28); overflow: hidden; transition: opacity .5s; animation: fade-in 1s ease 2.4s both;
    }
    .motion .scroll-cue::after {
        content: ""; position: absolute; left: -2px; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
        animation: cue 2.2s var(--ease) infinite;
    }
    .hero.is-past .scroll-cue { opacity: 0; }
}
@keyframes cue { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(64px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

/* Inner banners: the image is uncovered bottom to top, like a lifting shutter */
.motion .banner__media { animation: shutter 1.6s var(--ease-out) both; }
.motion .banner__media img { animation: settle 2.2s var(--ease-out) both; }
@keyframes shutter { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes settle { from { transform: scale(1.12); } }

/* Header: hides while reading down, returns on scroll up; first-visit light sweep across the wordmark */
.site-header.is-hidden { transform: translateY(-100%); }
.motion.first-visit .brand__ten {
    background: linear-gradient(105deg, var(--accent) 0 42%, #FFF6D6 50%, var(--accent) 58% 100%) 100% 0 / 300% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: sweep 1.8s var(--ease) .5s both;
}
@keyframes sweep { to { background-position: 0 0; } }
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }

/* Mega-menu columns arrive one after another */
.motion .mega__col { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease-out), transform .5s var(--ease-out); }
.motion .nav__item.is-open .mega__col { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 55ms); }
.mega__col:nth-child(2) { --i: 1; } .mega__col:nth-child(3) { --i: 2; } .mega__col:nth-child(4) { --i: 3; } .mega__col:nth-child(5) { --i: 4; }

/* Home: practice index hover (the hovered row feels lit, the others dim) */
@media (hover: hover) and (min-width: 900px) {
    .practice-index__row { transition: opacity .45s var(--ease-out); }
    .practice-index:hover .practice-index__row:not(:hover) { opacity: .42; }
    .practice-index__name { transition: color .25s, transform .6s var(--ease-out); }
    .practice-index__row:hover .practice-index__name { transform: translateX(10px); }
    .practice-index__media img { transform: scale(1.08); transition: filter .45s var(--ease), transform 1s var(--ease-out); }
    .practice-index__row:hover .practice-index__media img { transform: none; }
}

/* Home: audience tiles fill with charcoal from the bottom on hover */
@media (hover: hover) {
    .audience-tile { position: relative; isolation: isolate; transition: color .35s; }
    .audience-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--charcoal); transform: scaleY(0); transform-origin: bottom; transition: transform .55s var(--ease-out); }
    .audience-tile > * { transition: transform .55s var(--ease-out), color .35s; }
    .audience-tile:hover::before { transform: none; }
    .audience-tile:hover > * { transform: translateX(1.25rem); }
    .audience-tile:hover .audience-tile__name { color: var(--accent); }
    .audience-tile:hover .audience-tile__need { color: var(--on-dark-muted); }
}

/* Method: a line fills across the four steps as you scroll; numbers light up as it reaches them */
.motion .method__step::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--accent); transform: scaleX(var(--f, 0)); transform-origin: left; }
.motion .method__num { color: var(--line); transition: color .6s ease; }
.motion .method__step.is-lit .method__num { color: var(--charcoal); }

/* Light sweeps: a faint band across the value section, a single line across the CTA band */
.motion .value { position: relative; overflow: hidden; isolation: isolate; }
.motion .value::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; z-index: -1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 192, 0, .10), transparent); transform: translateX(-120%) skewX(-14deg);
}
.motion .value.is-in::after { transform: translateX(330%) skewX(-14deg); transition: transform 3s var(--ease-out) .2s; }
.motion .cta-band::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.motion .cta-band.is-in::after { transform: none; transition: transform 1.8s var(--ease-out) .2s; }

/* Leadership timeline: the line draws as you scroll; each role's marker lights when reached */
.motion .timeline { position: relative; }
.motion .timeline::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(var(--p, 0)); transform-origin: top; }
.motion .timeline__item::before { background: var(--line); transition: background-color .5s, transform .5s var(--ease-out); }
.motion .timeline__item.is-lit::before { background: var(--accent); transform: scale(1.35); }
.motion .timeline__item.is-lit .timeline__years { color: var(--charcoal); }
.timeline__years { transition: color .5s; }

/* Redevelopment journey: step numbers light up in sequence */
.motion .journey__num { color: var(--line); transition: color .6s ease; }
.motion .journey__step.is-lit .journey__num { color: var(--charcoal); }

/* Leadership career fan: wedges sweep in, then lines draw out to each node and callout */
.career-fan__wedge { transform-box: view-box; transform-origin: 290px 320px; }
.career-fan__node { transform-box: fill-box; transform-origin: center; }
.motion [data-reveal="iris"]:not(.is-in) .career-fan__wedge { opacity: 0; transform: rotate(-14deg); }
.motion [data-reveal="iris"]:not(.is-in) .career-fan__link path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion [data-reveal="iris"]:not(.is-in) .career-fan__node { transform: scale(0); }
.motion [data-reveal="iris"]:not(.is-in) .career-fan__list li { opacity: 0; translate: 14px 0; }
.motion [data-reveal="iris"].is-in .career-fan__wedge { transition: opacity .6s ease, transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0ms) + .5s + var(--i) * 120ms); }
.motion [data-reveal="iris"].is-in .career-fan__link path { stroke-dasharray: 1; transition: stroke-dashoffset .9s var(--ease-out) calc(var(--d, 0ms) + 1.1s + var(--i) * 120ms); }
.motion [data-reveal="iris"].is-in .career-fan__node { transition: transform .5s var(--ease-out) calc(var(--d, 0ms) + 1.5s + var(--i) * 120ms); }
.motion [data-reveal="iris"].is-in .career-fan__list li { transition: opacity .7s ease, translate .9s var(--ease-out); transition-delay: calc(var(--d, 0ms) + 1.6s + var(--i) * 120ms); }

/* Redevelopment role diagram assembles itself; One10 arrives last */
.motion [data-reveal="diagram"]:not(.is-in) { opacity: 0; transform: scale(.86); }
.motion [data-reveal="diagram"]:not(.is-in) .role-diagram__centre { opacity: 0; transform: scale(.6); }
.motion [data-reveal="diagram"]:not(.is-in) .role-diagram__ring li { opacity: 0; translate: 0 12px; }
.motion [data-reveal="diagram"].is-in { transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out); }
.motion [data-reveal="diagram"].is-in .role-diagram__centre { transition: opacity .8s ease .45s, transform 1s var(--ease-out) .45s; }
.motion [data-reveal="diagram"].is-in .role-diagram__ring li { transition: opacity .6s var(--ease-out), translate .8s var(--ease-out); transition-delay: calc(.85s + var(--i, 0) * 160ms); }
.role-diagram__ring li:nth-child(1) { --i: 3; } .role-diagram__ring li:nth-child(2) { --i: 0; } .role-diagram__ring li:nth-child(3) { --i: 1; } .role-diagram__ring li:nth-child(4) { --i: 2; }

/* Disputes: a redaction bar wipes off the confidentiality heading */
.motion .redact { position: relative; width: fit-content; }
.motion .redact::after { content: ""; position: absolute; inset: .04em -.12em; background: var(--charcoal); transform-origin: right; }
.motion .redact.is-in::after { transform: scaleX(0); transition: transform 1.2s var(--ease-out) .35s; }

/* FAQ: answers open smoothly where the browser supports it */
.faq summary::after { transition: transform .35s var(--ease-out); }
.faq details[open] summary::after { transform: rotate(180deg); }
@supports selector(::details-content) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease-out), content-visibility .45s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
}

/* Contact: errors nudge once; the submit button shows a progress line while sending */
.motion .field [aria-invalid="true"] { animation: nudge .45s ease .25s 1; }
@keyframes nudge { 25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.btn.is-sending { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-sending::after { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 50%; height: 2px; background: rgba(255, 255, 255, .9); transform-origin: left; animation: sending 1.1s var(--ease-out) infinite; }
@keyframes sending { from { transform: scaleX(0); opacity: 1; } 80% { opacity: 1; } to { transform: scaleX(1); opacity: 0; } }

/* Thank-you: a check draws itself */
.notice__check { width: 3.25rem; height: 3.25rem; margin-bottom: 1.5rem; fill: none; stroke: var(--charcoal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.motion .notice__check :is(circle, path) { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw-stroke 1.1s var(--ease-out) .3s forwards; }
.motion .notice__check path { animation-delay: .95s; }
@keyframes draw-stroke { to { stroke-dashoffset: 0; } }

/* Page-to-page: the old page fades out, the new one rises in; the header stays put */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: vt-out .28s ease both; }
    ::view-transition-new(root) { animation: vt-in .55s var(--ease-out) both; }
    .site-header { view-transition-name: site-header; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .arc--hero .arc__line, .arc--draw .arc__line { stroke-dashoffset: 0; animation: none; }
}

/* ---------- Print ---------- */
@media print {
    .site-header, .mobile-menu, .action-bar, .cta-band, .hero__media, .banner__media { display: none !important; }
    body { background: #fff; color: #000; }
    .hero, .banner, .section--dark { color: #000; background: #fff; }
    .motion main, .motion [data-reveal], .motion [data-reveal] > *, .motion .w__i, .motion [data-reveal] .media { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}