/* Hill Consultancy page.
   Layout, type, spacing, radii and motion follow the vectrfl.com reference spec
   (group-companies/reference/vectr/spec, measured 2026-10-20). Logo, copy and story are ours.
   Breakpoints as the reference: 1200, 1079, 1024, 820. */

@font-face { font-family: Roboto; src: url("assets/fonts/roboto-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Roboto; src: url("assets/fonts/roboto-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  --ground: #EEF3F7;          /* reference ground hue, much paler (Abdi 2026-10-20), never white */
  --surface: #FCFCFC;         /* reference light surface: light pill, badge fill, cell fill, menu */
  --ink: #050419;             /* reference text */
  --muted: #585765;           /* reference secondary text */
  --accent: #2E5E45;          /* our logo green in the reference's brand-colour role */
  --dark: #1B1D21;            /* graphite band and footer (Abdi's call: not navy) */
  --on-dark: #FCFCFC;
  --on-dark-muted: #8C8C95;
  --line: rgba(5, 4, 25, .1);
  --line-dark: rgba(252, 252, 252, .14);
  --track: rgba(5, 4, 25, .2);
  --glass: rgba(5, 4, 25, .1);
  --glass-dark: rgba(252, 252, 252, .15);

  --ease-ui: cubic-bezier(.25, 1, .5, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-css: cubic-bezier(.25, .1, .25, 1);
  --ease-out-cubic: cubic-bezier(.33, 1, .68, 1);
  --ease-collapse: cubic-bezier(.55, 0, 1, .45);

  --tilt-from: perspective(1000px) translate(50%) translate3d(-222.2px, 88px, 0) rotateY(60deg) rotateX(35deg);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped, html.is-locked { overflow: clip; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 18px/1.4 Roboto, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: fixed; left: 12px; top: -64px; z-index: 100001; height: 48px; padding: 0 24px; display: inline-flex; align-items: center; border-radius: 156px; background: var(--surface); font-size: 14px; letter-spacing: .28px; text-transform: uppercase; opacity: 0; }
.skip:focus { top: 12px; opacity: 1; }
.lines > span { display: block; }

/* Loader */
.loader { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.loader.is-gone { display: none; }
.ring { position: absolute; left: 50%; top: 50%; translate: -50% -50%; overflow: visible; }
.ring--outer { width: min(1500px, calc(100vw - 120px)); aspect-ratio: 1500 / 800; }
.ring--inner { width: min(calc(100vh - 60px), calc((100vw - 120px) * 8 / 15)); aspect-ratio: 1; }
.ring__dash { fill: none; stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; animation: ring-march 4s linear infinite; }
.ring--outer .ring__dash { stroke-dashoffset: 24; }
.ring__mask { fill: none; stroke: #fff; stroke-width: 4; vector-effect: non-scaling-stroke; }
.ring--outer .ring__mask { stroke-dasharray: 3700 3700; stroke-dashoffset: 3700; }
.ring--inner .ring__mask { stroke-dasharray: 2520 2520; stroke-dashoffset: 2520; }
.loader .ring--outer .ring__mask, .bridge.is-in .ring--outer .ring__mask { animation: ring-draw 2s ease-out forwards; }
.loader .ring--inner .ring__mask, .bridge.is-in .ring--inner .ring__mask { animation: ring-draw 1.8s ease-out .2s forwards; }
.loader.is-hide .ring--outer .ring__mask { animation: ring-erase-outer 2s ease forwards; }
.loader.is-hide .ring--inner .ring__mask { animation: ring-erase-inner 2s ease .2s forwards; }
@keyframes ring-march { to { stroke-dashoffset: -24; } }
@keyframes ring-draw { to { stroke-dashoffset: 0; } }
@keyframes ring-erase-outer { from { stroke-dasharray: 3700 3700; stroke-dashoffset: 0; } to { stroke-dasharray: 0 3700; stroke-dashoffset: -3700; } }
@keyframes ring-erase-inner { from { stroke-dasharray: 2520 2520; stroke-dashoffset: 0; } to { stroke-dasharray: 0 2520; stroke-dashoffset: -2520; } }
.loader__logo { --mark: clamp(80px, min(calc((100vw - 120px) * .064), calc((100vh - 60px) * .12)), 96px); position: relative; width: calc(var(--mark) * 2.734); }
.loader__logo img { width: 100%; height: auto; opacity: 0; rotate: -60deg; animation: logo-in-rotate 1.5s ease-out forwards, logo-in-fade .4s ease forwards; }
.loader.is-hide .loader__logo { opacity: 0; translate: 0 -40px; transition: opacity .6s ease .5s, translate .6s ease .5s; }
@keyframes logo-in-rotate { to { rotate: 0deg; } }
@keyframes logo-in-fade { to { opacity: 1; } }

/* Header */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 11; height: 80px; padding: 0 18px 0 2px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; transform: translate3d(0, -100%, 0); transition: transform 1.2s var(--ease-ui); }
.header.is-show { transform: translateZ(0); }
.header__left { display: flex; }
.header__link { padding: 16px; font-size: 12px; line-height: 12px; letter-spacing: .72px; text-transform: uppercase; transition: color .3s var(--ease-ui); }
.header__logo { justify-self: center; position: relative; padding: 18px; }
.header__logo img { width: 120px; height: auto; transition: opacity .3s var(--ease-ui); }
.header__logo .logo-white { position: absolute; left: 18px; top: 18px; opacity: 0; }
.header__right { justify-self: end; display: flex; align-items: center; gap: 10px; }
.header__menu { display: none; width: 66px; height: 64px; place-items: center; }
.header__menu span { display: block; width: 30px; height: 10px; position: relative; }
.header__menu span::before, .header__menu span::after, .header__menu i { content: ""; position: absolute; left: 0; width: 30px; height: 2px; background: currentColor; }
.header__menu span::before { top: 0; } .header__menu i { top: 4px; } .header__menu span::after { top: 8px; }
.header.is-white { color: var(--on-dark); }
.header.is-white .logo-colour { opacity: 0; }
.header.is-white .logo-white { opacity: 1; }
@media (min-width: 769px) { .header.is-white .pill--glass { background: var(--glass-dark); color: var(--on-dark); } }

/* Pills */
.pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 156px; font-size: 14px; line-height: 19.6px; letter-spacing: .28px; text-transform: uppercase; white-space: nowrap; transition: color .3s var(--ease-ui); }
.pill::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent); opacity: 0; transition: opacity .3s var(--ease-ui); }
.pill--glass { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); }
.pill--dark { background: var(--dark); color: var(--on-dark); }
.pill--light { background: var(--surface); color: var(--ink); }
@media (pointer: fine) {
  .pill:hover::before { opacity: 1; }
  .pill--glass:hover, .pill--light:hover { color: var(--on-dark); }
  .header__link:hover { color: var(--accent); }
  .header.is-white .header__link:hover { color: var(--on-dark-muted); }
}

/* 3D stage (pre-rendered clips, fixed behind the page like the reference canvas) */
.stage { position: fixed; left: 0; top: 0; z-index: -1; width: 100vw; height: 100lvh; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .7s ease-out; }
.stage.is-ready { opacity: 1; }
.stage__cam { position: absolute; inset: 0; scale: .85; } /* FINAL: the hero picture fills the viewport at rest (was inset -9%, a 118 percent zoom); the camera drop and the pointer parallax are unchanged, the poster edge colours match the ground */
.stage.is-ready .stage__cam { animation: cam-drop 1.4s var(--ease-out-cubic) forwards; }
@keyframes cam-drop { to { scale: 1; } }
.stage__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.stage__layer.is-on { opacity: 1; }
.stage__layer.is-fade { transition: opacity .4s ease-out; }

/* Hero (fixed, like the reference). #top is the first screen in the page flow, the hero inside it stays fixed. */
.top { height: 100svh; }
.hero { position: fixed; left: 0; top: 0; z-index: 0; width: 100%; height: 100svh; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
/* FINAL: Abdi moved the text block to the bottom left (left edge 59.3 px at 1440 x 900). FINAL cut its last line at the viewport edge (bottom -9.2 px); Abdi 2026-10-21: every line fully visible, at least 24 px clear at 1440 x 900 and 1366 x 768, so it now sits 28 px up. Anchored to the bottom so it holds at any height. */
.hero__content { position: absolute; left: 59.3px; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 48px; text-align: center; }
@media (min-width: 821px) and (max-width: 1340px) { .hero__content { bottom: 96px; } } /* below about 1340 px the scroll cue's text starts left of the block's right edge: lift the block clear of it, 96 px as on phones */
.hero__title { font-weight: 500; font-size: 96px; line-height: 86.4px; letter-spacing: -5.76px; }
.hero__sub { max-width: 620px; font-size: 24px; line-height: 28.8px; }
.hero__title, .hero__sub, .tilt__title, .tilt__body { opacity: 0; transform: var(--tilt-from); transition: opacity 1.5s var(--ease-expo), transform 1.5s var(--ease-expo); }
.hero__sub { transition-delay: .3s; }
.hero.is-show .hero__title, .hero.is-show .hero__sub { opacity: 1; transform: none; }
.hero.is-scrolled .hero__title, .hero.is-scrolled .hero__sub { transition: none; }
.hero__cue { position: absolute; bottom: 40px; height: 40px; padding: 0 20px; overflow: hidden; display: flex; align-items: flex-end; font-size: 14px; letter-spacing: .28px; text-transform: uppercase; }
.hero__cue-text { position: relative; display: inline-block; padding-bottom: 8px; transform: translate3d(0, calc(100% + 7px), 0); transition: transform 1.5s var(--ease-expo) .65s; }
.hero__cue-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .9s var(--ease-expo) .25s; }
.hero.is-show .hero__cue-text { transform: none; }
.hero.is-show .hero__cue-text::after { transform: scaleX(1); }
.hero.is-show .hero__cue.is-hidden .hero__cue-text { transform: translate3d(0, calc(100% + 7px), 0); transition: transform .35s ease; }
.hero.is-show .hero__cue.is-hidden .hero__cue-text::after { transform: scaleX(0); transition: transform .4s var(--ease-collapse) .1s; }

/* Pinned journey (pre-sprint behaviour, restored: 420 svh track, 100 svh sticky frame, four clips on the fixed stage behind the step list).
   FINAL's look on top of it: its h2 at the top left of the section (96 px down, 48 px in), its step type and colours. #how starts after the 900 px hero as in FINAL. */
.flow { position: relative; z-index: 2; height: 420svh; }
.flow__sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: flex-end; }
.flow__title { position: absolute; left: 0; top: 96px; padding: 0 48px; font-weight: 500; font-size: 88px; line-height: 88px; letter-spacing: -4.4px; } /* FINAL: the section title 96 px down, 48 px in; it scrolls with the page, the frame below pins as before */
.steps { width: max-content; max-width: 100%; padding: 48px; display: flex; flex-direction: column; }
.step__head { display: flex; align-items: center; gap: 20px; text-align: left; }
.step.is-active .step__head { pointer-events: none; cursor: default; }
.step__badge { position: relative; isolation: isolate; flex: none; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-weight: 500; font-size: 16px; color: var(--accent); }
.step__badge::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); transform: scale(0); transition: transform .5s var(--ease-expo); }
.step.is-active .step__badge::before { transform: scale(1); transition-duration: .6s; }
.step__title { font-weight: 500; font-size: 28px; line-height: 1.2; transform: scale(.5714); transform-origin: left center; transition: transform .5s var(--ease-expo); }
.step.is-active .step__title { transform: scale(1); line-height: 1.2; }
.step__body { display: grid; grid-template-rows: 0px 0fr; transition: grid-template-rows .6s var(--ease-expo); }
.step.is-active .step__body { grid-template-rows: 24px 1fr; }
.step__inner { grid-row: 2; min-height: 0; overflow: hidden; display: flex; gap: 20px; }
.step__track { position: relative; flex: none; width: 48px; display: flex; justify-content: center; }
.step__track::before, .step__fill { content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 1px); width: 2px; border-radius: 2px; }
.step__track::before { background: var(--track); }
.step__fill { background: var(--accent); transform: scaleY(var(--fill, 0)); transform-origin: top; }
.step__desc { max-width: 588px; font-size: 20px; line-height: 28px; color: var(--muted); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-expo), transform .5s var(--ease-expo); }
.step.is-active .step__desc { opacity: 1; transform: none; transition-delay: .15s; }

/* Features: statement plus services. The section is the track: 150vh taller than its sticky block (FINAL's 96 / 48 padded block), the pre-sprint pin length (250vh track, 100vh frame), so the block stays pinned while the three columns rise in turn (consultancy.js). */
.features { position: relative; z-index: 3; background: var(--ground); }
.features::after { content: ""; display: block; height: 150vh; }
.features__sticky { position: sticky; top: 0; display: flex; flex-direction: column; gap: 48px; padding: 96px 48px; background: var(--ground); }
.features__title { font-weight: 500; font-size: 88px; line-height: 88px; letter-spacing: -4.4px; }
.features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px; }
.feature { padding-left: 24px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; opacity: 0; transform: translateY(80px); }
.feature__icon { width: 200px; height: 200px; object-fit: contain; border-radius: 12px; }
.feature__text { display: contents; }
.feature__title { font-weight: 500; font-size: 40px; line-height: 44px; letter-spacing: -1.6px; }
.feature__desc { font-size: 24px; line-height: 34px; color: var(--muted); }

/* Image plus statement */
.standards { position: relative; z-index: 3; background: var(--ground); padding: 48px; box-shadow: 0 24px 0 var(--ground); } /* the shadow paints FINAL's 24 px gap above the FAQ in the ground colour, so the fixed stage never shows through */
.standards__inner { display: flex; align-items: center; gap: 96px; max-width: 1344px; margin: 0 auto; }
.standards__media { flex: 0 1 800px; width: 800px; aspect-ratio: 1920 / 1089; border-radius: 24px; overflow: hidden; } /* frame = the picture's own ratio, so the whole scene shows */
.standards__media img { width: 100%; height: 100%; object-fit: cover; }
.standards__media picture, .type-card__media picture { display: block; height: 100%; }
.standards__text { flex: 0 0 448px; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.standards__title { font-weight: 500; font-size: 96px; line-height: 96px; letter-spacing: -3.84px; }
.standards__body { font-size: 22px; line-height: 30.8px; color: var(--muted); }

/* FAQ */
.faq { position: relative; z-index: 3; margin-top: 24px; background: var(--ground); padding: 0 48px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.faq__inner { display: flex; flex-direction: column; max-width: 1344px; margin: 0 auto; padding-bottom: 24px; } /* one column: the title sits over the questions, no blank column under it */
.faq__left { padding: 40px 0 24px; }
.faq__title { font-weight: 500; font-size: 88px; line-height: 88px; letter-spacing: -4.4px; }
.faq__title.lines > span { display: inline; }
.faq__divider { height: 1px; background: var(--line); }
.faq__right { display: flex; flex-direction: column; }
.faq__item { padding: 24px 0 20px; border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }
.faq__q { display: flow-root; }
.faq__q button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 20px; margin: -24px 0 -20px; text-align: left; font-weight: 500; font-size: 24px; line-height: 28px; letter-spacing: -1.12px; } /* padding and negative margin: the whole row is the click target, the layout is FINAL's 24 / 20 item padding */
.faq__icon { flex: none; width: 40px; height: 24px; border-radius: 6px; background: var(--ink); color: var(--on-dark); display: grid; place-items: center; transition: background-color .3s ease; }
.faq__icon svg { width: 40px; height: 24px; transform: rotate(180deg); transition: transform .3s ease; } /* closed: chevron down; open: up on green, FINAL's open state */
.faq__item.is-open .faq__icon svg { transform: rotate(0); }
.faq__item.is-open .faq__icon { background: var(--accent); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .6s var(--ease-css), padding .5s ease; }
.faq__a p { max-width: 960px; padding-top: 8px; font-size: 18px; line-height: 26px; color: var(--muted); }
@media (pointer: fine) { .faq__q button:hover .faq__icon { background: var(--accent); } }

/* Project types: sticky cover stack */
.types { position: relative; z-index: 3; background: var(--ground); }
.types__heading { padding: 64px 48px 0; font-weight: 500; font-size: 88px; line-height: 88px; letter-spacing: -4.4px; }
.types__stack { position: relative; border-bottom: 1px solid var(--line); }
.type-wrap { position: sticky; top: 0; }
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) { .type-wrap:not(:last-child) { min-height: 100dvh; } }
.type-row { position: relative; background: var(--ground); padding: 48px; display: flex; justify-content: space-between; gap: 48px; }
.type-wrap + .type-wrap .type-row { border-top: 1px solid var(--line); }
.type-row__dim { position: absolute; inset: 0; z-index: 10; background: #000; opacity: 0; pointer-events: none; }
.type-nav { flex: none; width: 340px; padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.type-nav a { font-weight: 500; font-size: 52px; line-height: 62.4px; letter-spacing: -2.08px; color: var(--muted); transition: color .3s var(--ease-ui); }
.type-nav a[aria-current="true"] { color: var(--accent); }
@media (pointer: fine) { .type-nav a:hover { color: var(--accent); } }
.hl { color: var(--accent); }
.type-card { flex: 0 1 960px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.type-card__media { width: 100%; aspect-ratio: 1920 / 1089; border-radius: 24px; overflow: hidden; }
.type-card__media img { width: 100%; height: 100%; object-fit: cover; }
.type-card__title { max-width: 680px; font-weight: 500; font-size: 28px; line-height: 33.6px; letter-spacing: -1.12px; }
.type-list { display: flex; flex-direction: column; gap: 16px; }
.type-list li { font-weight: 500; font-size: 24px; line-height: 28.8px; letter-spacing: -.96px; }
.type-list li + li { padding-top: 16px; border-top: 1px solid var(--line); }

/* Tilted statement plus abstract clip */
.tilt { position: relative; z-index: 3; background: var(--ground); padding-bottom: 32px; }
.tilt__head { padding: 64px 48px 32px; display: flex; flex-direction: column; gap: 32px; }
.tilt__title { font-weight: 500; font-size: 96px; line-height: 86.4px; letter-spacing: -3.84px; }
@media (min-width: 1280px) { .tilt__title { font-size: 80px; line-height: 80px; letter-spacing: -3.2px; } .tilt__title.lines > span { display: inline; } } /* one line, no blank beside a short first line */
.tilt__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
.tilt__down { position: relative; isolation: isolate; overflow: hidden; flex: none; width: 40px; height: 40px; border-radius: 6px; background: var(--ink); color: var(--on-dark); }
.tilt__down::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); opacity: 0; transition: opacity .3s ease; }
.tilt__down svg { position: absolute; left: 8px; top: 8px; width: 24px; height: 24px; transition: transform .8s ease; }
.tilt__down svg + svg { transform: translateY(-40px); }
@media (pointer: fine) { .tilt__down:hover::before { opacity: 1; } .tilt__down:hover svg { transform: translateY(40px); } .tilt__down:hover svg + svg { transform: none; } }
.tilt__body { width: 760px; max-width: 100%; font-size: 28px; line-height: 36px; color: var(--muted); }
.tilt__body { transition-delay: .1s; }
.tilt__down { opacity: 0; transform: translateY(120px); transition: opacity 1s ease .2s, transform 2s var(--ease-expo) .2s; }
.tilt.is-show .tilt__title, .tilt.is-show .tilt__body, .tilt.is-show .tilt__down { opacity: 1; transform: none; }
.tilt.is-scrolled .tilt__title { transition: none; }
.tilt__media { padding: 0 48px; overflow: hidden; }
.tilt__frame { aspect-ratio: 16 / 9; border-radius: 24px; overflow: hidden; background: var(--accent); opacity: 0; transform: translate3d(80px, 60px, -60px); transition: opacity 1.3s var(--ease-expo) .167s, transform 1.3s var(--ease-expo) .167s; }
.tilt.is-show .tilt__frame { opacity: 1; transform: none; }
.tilt__frame video { width: 100%; height: 100%; object-fit: cover; }

/* Orbit-line statement */
.bridge { position: relative; z-index: 3; overflow: hidden; min-height: 972px; padding: 96px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; background: var(--ground); text-align: center; }
.bridge .ring--inner { width: min(calc(100vh - 60px), calc((100vw - 120px) * 8 / 15)); }
/* FINAL: 780 px of content between 96 px paddings (972 px), the two rings placed from the top left of the section */
@media (min-width: 821px) { .bridge .ring--outer { left: 60px; top: 50px; translate: none; width: calc(100% - 120px); height: 680px; aspect-ratio: auto; } .bridge .ring--inner { left: calc(50% - 340px); top: 50px; translate: none; width: 680px; height: 680px; } }
.bridge__mark { position: relative; width: 360px; height: auto; opacity: 0; transform: rotate(-60deg); transition: opacity 1.5s var(--ease-ui) .3s, transform 1.5s var(--ease-ui) .3s; }
.bridge__title { position: relative; font-weight: 500; font-size: 88px; line-height: 88px; letter-spacing: -4.4px; }
.bridge__title > span { display: block; opacity: 0; transform: perspective(1000px) translate3d(0, 88px, 0) rotateY(60deg) rotateX(35deg); transition: opacity 1.5s var(--ease-ui) .3s, transform 1.5s var(--ease-ui) .3s; }
.bridge__title > span + span { transition-delay: .42s; }
.bridge.is-in .bridge__mark, .bridge.is-in .bridge__title > span { opacity: 1; transform: none; }

/* Dark CTA band */
.cta { position: relative; z-index: 3; background: var(--dark); color: var(--on-dark); padding: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 48px; border-bottom: 1px solid var(--line-dark); }
.cta__title { font-weight: 500; font-size: 120px; line-height: 112px; letter-spacing: -4.8px; }
.cta__mark { position: absolute; right: 48px; top: 50%; width: min(640px, 40vw); height: auto; transform: translateY(-50%); }
@media (max-width: 1299px) { .cta__mark { display: none; } } /* below this the 120 px title runs into the lockup */

/* Footer */
.footer { position: relative; z-index: 3; background: var(--dark); color: var(--on-dark); }
.footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 201px; border-bottom: 1px solid var(--line-dark); } /* FINAL: equal columns, 200 px cell plus the 1 px rule */
.footer__nav--family { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cell { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: space-between; padding: 0 48px; border-right: 1px solid var(--line-dark); }
.cell:last-child { border-right: 0; }
.cell__fill { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-ui); }
.cell__label { position: relative; font-weight: 500; font-size: 48px; line-height: 57.6px; letter-spacing: -1.92px; transition: color .8s var(--ease-ui), transform .8s var(--ease-ui); }
.cell__arrow { position: relative; flex: none; width: 23px; height: 32px; overflow: hidden; }
.cell__arrow svg { position: absolute; top: 0; left: 0; width: 23px; height: 32px; transition: transform .8s var(--ease-ui); }
.cell__arrow svg + svg { left: -100%; color: var(--on-dark); }
@media (pointer: fine) {
  .cell:hover .cell__fill { transform: scaleX(1); }
  .cell:hover .cell__label { transform: translateX(10px); }
  .cell:hover .cell__arrow svg { transform: translateX(200%); }
  .cell:hover .cell__arrow svg + svg { transform: translateX(100%); }
}
.footer__bottom { padding: 48px; display: flex; flex-direction: column; gap: 48px; }
.wordmark { display: flex; overflow: hidden; white-space: nowrap; font-weight: 500; font-size: 10.2vw; line-height: .76; letter-spacing: -.02em; text-transform: uppercase; padding-top: .04em; }
.wordmark > span { display: inline-block; transform: translateY(115%); }
.wordmark > .wm-space { width: .2276em; } /* the font's space (.2476em) less the .02em tracking, as in running text */
.footer__bottom.is-visible .wordmark > span { transform: none; transition: transform .8s var(--ease-ui) calc(var(--i) * .06s); }
.footer__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; font-size: 14px; line-height: 19.6px; color: var(--on-dark-muted); }
.footer__meta .meta-copy { margin-right: auto; }
.footer__meta a { position: relative; color: var(--on-dark); }
.footer__meta a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-ui); }
.footer__meta a.meta-credit { color: var(--on-dark-muted); transition: color .3s var(--ease-ui); }
@media (pointer: fine) { .footer__meta a:hover::after { transform: scaleX(1); } .footer__meta a.meta-credit:hover { color: var(--on-dark); } .footer__meta a.meta-credit::after { display: none; } }
/* FINAL: phone and email sit in the row itself; the social coins (Abdi 2026-10-21) follow the credit link on the second line */
.footer__meta .contact-row { display: contents; }
.footer__meta a.meta-credit { order: 1; }
.meta-credit__logo { display: inline-block; width: 96px; height: auto; margin-right: 12px; vertical-align: middle; } /* official Hill logo, reversed (white, for the graphite footer), at a set width, never recoloured (Abdi 2026-10-21); inline so the credit text keeps the row's baseline */
.footer__meta .coins { order: 2; align-self: center; }
.footer__meta a.coin::after { display: none; } /* no footer underline on coins */

/* Mobile menu */
.menu { position: fixed; inset: 0; z-index: 12; visibility: hidden; }
.menu.is-open { visibility: visible; }
.menu__overlay { position: absolute; inset: 0; background: rgba(5, 4, 25, .3); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); opacity: 0; transition: opacity .4s var(--ease-ui); }
.menu__panel { position: absolute; left: 12px; right: 12px; top: 12px; overflow: hidden; max-height: 0; border-radius: 24px; background: var(--surface); padding: 0 12px; opacity: 0; transform: translateY(-40px); transition: opacity .3s var(--ease-ui), transform .4s var(--ease-ui), max-height .4s var(--ease-ui); }
.menu__panel > :last-child { margin-bottom: 12px; }
.menu.is-open .menu__overlay, .menu.is-open .menu__panel { opacity: 1; transform: none; }
.menu.is-open .menu__panel { max-height: var(--panel-h, 280px); }
.menu__top { height: 64px; display: flex; align-items: center; justify-content: space-between; padding-left: 6px; }
.menu__top img { width: 80px; height: auto; }
.menu__close { width: 32px; height: 32px; display: grid; place-items: center; }
.menu__close svg { width: 16px; height: 16px; }
.menu__links a, .menu__ctas { opacity: 0; transform: translateY(40px); transition: opacity .6s var(--ease-ui), transform .6s var(--ease-ui); }
.menu.is-open .menu__links a, .menu.is-open .menu__ctas { opacity: 1; transform: none; }
.menu__links a { display: block; padding: 12px; font-size: 18px; line-height: 1; letter-spacing: 1.08px; text-transform: uppercase; }
.menu__ctas { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.menu__ctas .pill { width: 100%; }

/* Responsive, following the reference breakpoints */
@media (max-width: 1200px) {
  .features::after { display: none; }
  .features__sticky { position: static; padding: 64px 24px; }
  .feature { opacity: 1; transform: none; }
}
@media (max-width: 1079px) {
  .standards { padding: 0 24px 32px; }
  .standards__inner { flex-direction: column; align-items: flex-start; gap: 48px; }
  .standards__media { flex: none; width: 100%; border-radius: 12px; }
  .standards__text { flex: none; max-width: 600px; gap: 32px; }
  .standards__title { font-size: 40px; line-height: 40px; letter-spacing: -1.6px; }
  .standards__body { font-size: 17px; }
}
@media (max-width: 1024px) {
  .hero__title { font-size: 64px; line-height: 57.6px; letter-spacing: -3px; }
  .hero__sub { font-size: 18px; }
}
@media (max-width: 820px) {
  .header { height: 64px; padding: 0; grid-template-columns: 1fr auto; }
  .header__left, .header__right { display: none; }
  .header__logo { justify-self: start; }
  .header__logo img { width: 96px; }
  .header__menu { display: grid; }
  .ring--outer { width: calc(100vw - 60px); }
  .ring--inner { width: calc((100vw - 60px) * 8 / 15); }
  .loader__logo { --mark: 48px; }
  .hero__content { left: 24px; right: 24px; bottom: 96px; gap: 24px; }
  .hero__title { letter-spacing: -3.84px; } /* 64 / 57.6 px from the 1024 rule, tracking -0.06em as at 96 px so "We supervise" fits one line at 390 */
  .hero__sub { max-width: 280px; font-size: 16px; line-height: 19.2px; }
  .hero__cue { bottom: 32px; font-size: 11px; }
  .flow { height: 510svh; }
  .flow__sticky { height: 100dvh; }
  .flow__title { top: 64px; padding: 0 24px; font-size: 32px; line-height: 32px; letter-spacing: -1.28px; }
  .steps { padding: 24px; width: 100%; }
  .step__badge { width: 40px; height: 40px; }
  .step__title { font-size: 22px; transform: scale(.7273); }
  .step__track { width: 40px; }
  .step__desc { max-width: 300px; font-size: 17px; line-height: 24px; }
  .features__sticky { padding: 48px 24px 24px; }
  .features__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .feature__text { display: flex; flex-direction: column; gap: 20px; }
  .feature { flex-direction: row; align-items: flex-start; padding: 0 0 32px; border-left: 0; border-bottom: 1px solid var(--line); gap: 20px; } /* icon beside the text: no blank cell next to the icon */
  .feature:last-child { border-bottom: 0; padding-bottom: 0; }
  .features__title { font-size: 32px; line-height: 32px; letter-spacing: -1.5px; }
  .features__title.lines > span { display: inline; }
  .feature__title { font-size: 22px; line-height: 26px; }
  .feature__desc { font-size: 18px; line-height: 26px; }
  .feature__icon { flex: none; width: 88px; height: 88px; }
  .faq { padding: 0 24px; }
  .faq__inner { padding-bottom: 12px; }
  .faq__left { padding: 40px 0 16px; }
  .faq__title { font-size: 32px; line-height: 32px; letter-spacing: -1.28px; }
  .faq__item { padding: 20px 0 16px; }
  .faq__q button { gap: 12px; padding: 20px 0 16px; margin: -20px 0 -16px; font-size: 22px; line-height: 27px; }
  .faq__a p { padding-top: 8px; font-size: 17px; line-height: 26px; }
  .type-wrap { position: relative; }
  .type-row { flex-direction: column; padding: 16px 24px; gap: 24px; }
  .type-nav { display: none; }
  .type-card { flex: none; width: 100%; gap: 24px; }
  .type-card__media { border-radius: 12px; }
  .types__heading { margin-bottom: 0; padding: 32px 24px 0; font-size: 48px; line-height: 52px; letter-spacing: -1.92px; }
  .tilt { padding-bottom: 24px; }
  .cta__mark { display: none; }
  .type-card__title { font-size: 22px; line-height: 26px; }
  .type-list { gap: 14px; }
  .type-list li { font-size: 18px; line-height: 22px; }
  .type-list li + li { padding-top: 14px; }
  .tilt__head { padding: 80px 24px 32px; gap: 32px; }
  .tilt__title { font-size: 32px; line-height: 32px; letter-spacing: -1.28px; }
  .tilt__row { flex-direction: column; gap: 32px; }
  .tilt__down { display: none; }
  .tilt__body { font-size: 16px; line-height: 19.2px; }
  .tilt__media { padding: 0 24px; }
  .tilt__frame { border-radius: 12px; }
  .bridge { padding: 24px 24px 48px; min-height: 0; }
  .bridge__title { font-size: 44px; line-height: 44px; letter-spacing: -1.76px; }
  .bridge__mark { width: 200px; }
  .cta { padding: 48px 24px; }
  .cta { padding-top: 32px; }
  .cta__title { font-size: 52px; line-height: 52px; letter-spacing: -2.08px; }
  .cta .pill { width: 100%; height: 56px; }
  .standards__title.lines > span { display: inline; }
  .cta__title.lines > span { display: inline; }
  .footer__nav { display: flex; flex-direction: column; height: auto; border-bottom: 0; border-top: 1px solid var(--line-dark); }
  .cell { flex: none; height: 72px; padding: 0 24px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .cell__label { font-size: 24px; line-height: 28.8px; letter-spacing: -.96px; }
  .cell__arrow, .cell__arrow svg { width: 18px; height: 26px; }
  .footer__bottom { padding: 48px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .loader { display: none; }
  .header { transform: none; }
  .hero__title, .hero__sub, .hero__cue-text, .tilt__title, .tilt__body, .tilt__down, .tilt__frame, .feature, .bridge__mark, .bridge__title > span, .wordmark > span { opacity: 1; transform: none; }
  .features::after { display: none; }
  .features__sticky { position: static; }
  .hero__cue-text::after { transform: scaleX(1); }
  .stage { opacity: 1; }
  .stage__cam { scale: 1; }
  .ring__dash { animation: none; }
}

/* family (sprint 2026-10-20) */
/* WhatsApp button: the shared snippet (/shared/wa-float.*, rule in CLAUDE.md); this page sets only its colours, in its glass-pill material */
.wa-float { --wa-z: 10; --wa-bg: var(--glass); --wa-fg: var(--ink); --wa-bg-light: var(--glass-dark); --wa-fg-light: var(--on-dark); --wa-hover-bg: var(--accent); --wa-hover-fg: var(--on-dark); --wa-ring: var(--accent); --wa-ring-light: var(--on-dark); --wa-backdrop: blur(10px); }
/* Phone, email and the six social coins (footer and contact band, both graphite) */
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.cta .contact-row > a { position: relative; }
.cta .contact-row > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-ui); }
.contact-row a:focus-visible { outline-color: var(--on-dark); } /* the accent ring is under 3:1 on graphite */
@media (pointer: fine) { .cta .contact-row > a:hover::after { transform: scaleX(1); } }
/* Social coins (Abdi 2026-10-21): round 3D coins in the platform colours, CSS and inline SVG only. The 3D effect sits on the coin; the white glyph stays flat and exact.
   Links come from social.json at build time (standalone/consultancy/build.mjs). A coin with no link shows muted, is not a link, and says "Coming soon" on hover. */
.coins { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.coin-slot { position: relative; display: inline-grid; }
.coin {
  --coin: #1877F2; --face: var(--coin); --rim: rgba(255, 255, 255, .16); --drop: 0 6px 12px rgba(0, 0, 0, .45);
  position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 50% 135%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 58%), var(--face);
  box-shadow: inset 0 0 0 1.5px var(--rim), inset 0 2px 1px rgba(255, 255, 255, .55), inset 0 -3px 4px rgba(0, 0, 0, .3), 0 1px 1px rgba(0, 0, 0, .5), var(--drop);
  transition: transform .25s var(--ease-ui), box-shadow .25s var(--ease-ui);
}
.coin::before { content: ""; position: absolute; top: 3px; left: 8px; right: 8px; height: 42%; border-radius: 50% 50% 50% 50% / 80% 80% 30% 30%; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; } /* soft inner highlight */
.coin__g { position: relative; width: 24px; height: 24px; fill: currentColor; }
.coin--facebook { --coin: #1877F2; }
.coin--whatsapp { --coin: #25D366; }
.coin--instagram { --face: linear-gradient(45deg, #F58529 0%, #DD2A7B 52%, #8134AF 100%); }
.coin--x { --coin: #000; --rim: rgba(255, 255, 255, .7); } /* black on graphite needs the light rim */
.coin--linkedin { --coin: #0A66C2; }
.coin--youtube { --coin: #FF0000; }
a.coin:focus-visible { outline: 2px solid var(--on-dark); outline-offset: 3px; }
@media (pointer: fine) { a.coin:hover { transform: translateY(-3px); --drop: 0 11px 18px rgba(0, 0, 0, .5); } }
a.coin:active { transform: translateY(0); }
.coin.is-off { opacity: .6; filter: saturate(.55); cursor: default; }
.coin-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 2; transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 8px; background: var(--on-dark); color: var(--ink); font-size: 12px; line-height: 1; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-ui), transform .2s var(--ease-ui), visibility .2s; }
.coin-tip::after { content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; background: var(--on-dark); transform: translate(-50%, -4px) rotate(45deg); }
.coin-slot:hover .coin-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (max-width: 767px) { .coin { width: 44px; height: 44px; } .coin::before { left: 7px; right: 7px; } .coin__g { width: 22px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .coin, .coin-tip { transition: none; } a.coin:hover { transform: none; } }
/* Second footer row: the sister companies */
@media (max-width: 820px) { .footer__nav--family { border-top: 0; } }
/* End of page clears the WhatsApp button: var(--wa-clear) = 54 button + 24 gap, at every width */
.footer__bottom { padding-bottom: calc(48px + var(--wa-clear)); }
@media (max-width: 767px) { .footer__bottom { padding-bottom: calc(48px + var(--wa-clear) + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .cta .contact-row > a::after { transition: none; } }
/* /family */