/* Portis Consultancy — site stylesheet
   Source of truth: Claude Design project "Portis" (desktop 1440 + mobile 375 frames).
   Mobile-first. One breakpoint at 1024px. Between 375 and 1440 the gutter and the
   display / section type sizes interpolate linearly between the two approved frames. */

/* ------------------------------------------------------------------ 01 Fonts */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 300; font-display: swap; src: url('../assets/fonts/archivo-latin-300-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/archivo-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 300; font-display: swap; src: url('../assets/fonts/newsreader-latin-300-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }

/* ------------------------------------------------------------------ 02 Tokens */
:root {
  --ink: #0F2B33;          /* Marine Ink */
  --ink-press: #0E282F;
  --chalk: #EDE6D9;        /* Chalk (toolkit "Bone") */
  /* Steel: two tokens so text and non-text uses cannot drift back together.
     --steel-text is darkened to clear WCAG AA on Chalk (4.55:1; the original measures 4.30:1).
     --steel keeps the toolkit value for non-text marks only (rules, tracks). */
  --steel: #5B6E76;
  --steel-text: #586A72;
  --mist: #8FA2A9;
  --rule: #A9A093;
  --red: #A8322D;          /* Chalk Red — form errors only; hex marked TBC on the components sheet */
  --panel: #11303A;        /* empty image slot */
  --mist-40: rgba(143, 162, 169, 0.4);
  --steel-30: color-mix(in srgb, var(--steel) 30%, transparent);  /* timeline rule track */
  --chalk-24: rgba(237, 230, 217, 0.24);
  --chalk-30: rgba(237, 230, 217, 0.3);
  --chalk-40: rgba(237, 230, 217, 0.4);

  --f-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-accent: 'Newsreader', Georgia, serif;

  /* 20px @375 → 120px @1440, then centred 1200px content */
  --gutter: max(clamp(20px, 9.39vw - 15.21px, 120px), calc(50% - 600px));
  --gap: 24px;
  --header-h: 72px;
  --fs-display: clamp(40px, 28.73px + 3.005vw, 72px);
  --fs-section: clamp(32px, 27.07px + 1.315vw, 46px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1024px) { :root { --header-h: 88px; } }

/* ------------------------------------------------------------------ 03 Base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--chalk); color: var(--ink); font-family: var(--f-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
html.menu-open, html.menu-open body { overflow: hidden; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2, h3, th { font-size: inherit; font-weight: inherit; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
[hidden] { display: none !important; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: 0; z-index: 200; padding: 12px 16px; background: var(--chalk); color: var(--ink); font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; transform: translateY(-120%); }
.skip-link:focus { transform: none; outline-offset: -4px; }

/* Surfaces. Full-bleed: every band spans the viewport; its content sits inside --gutter. */
.block { padding-inline: var(--gutter); }
.ink { background: var(--ink); color: var(--chalk); --sub: var(--mist); --hair: var(--mist-40); --heavy: var(--mist); --link-hover: var(--mist); --rest-m: var(--chalk-40); }
.chalk { background: var(--chalk); color: var(--ink); --sub: var(--steel-text); --hair: var(--rule); --heavy: var(--ink); --link-hover: var(--steel-text); --rest-m: var(--rule); }

@media (min-width: 1024px) {
  .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
}

/* ------------------------------------------------------------------ 04 Type */
.t-display { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-display); letter-spacing: -0.022em; line-height: 1.04; text-wrap: pretty; }
.t-section { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-section); letter-spacing: -0.022em; line-height: 1.08; text-wrap: pretty; }
.t-statement { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-section); letter-spacing: -0.022em; line-height: 1.12; text-wrap: pretty; }
.t-register { font-family: var(--f-display); font-weight: 400; font-size: 22px; letter-spacing: -0.022em; line-height: 1.2; }
.t-stand { font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.t-body { font-size: 16px; line-height: 1.6; }
.t-label { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; line-height: 1.35; text-transform: uppercase; }
.t-counter { font-family: var(--f-mono); font-weight: 400; font-size: 12px; letter-spacing: 0.12em; line-height: 1.35; color: var(--sub); }
.accent { font-family: var(--f-accent); font-style: italic; font-weight: 300; font-size: 1.15em; letter-spacing: 0; }
.sub { color: var(--sub); }
@media (min-width: 1024px) {
  .t-display { line-height: 1.02; }
  .t-section { line-height: 1.06; }
}

/* Section divider: opens every section within a block */
.divider { border-top: 2px solid var(--heavy); padding-top: 16px; color: var(--sub); }

/* ------------------------------------------------------------------ 05 Links
   Hairline grows left→right on hover (200ms). --rest draws a resting line. */
.link {
  color: inherit;
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--rest, transparent), var(--rest, transparent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-origin: content-box;
  background-clip: content-box;
  background-size: 0% 1px, 100% 1px;
  transition: background-size 200ms ease-out, color 200ms ease-out;
}
.link:hover { color: var(--link-hover); background-size: 100% 1px, 100% 1px; }
.link--rest { --rest: currentColor; }
.chalk .link--rest { --rest: var(--ink); }
@media (max-width: 1023.98px) {
  .link { display: inline-block; padding: 10px 0; }
  .link--rest-m { --rest: var(--rest-m); }
}

/* ------------------------------------------------------------------ 06 Header */
.site-header__bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  height: var(--header-h);
  color: var(--chalk);
  background: transparent;
  border-bottom: 1px solid var(--chalk-24);
}
html.js .site-header__bar { position: fixed; transition: transform 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out; }
.site-header__bar.is-solid { background: var(--ink); border-bottom-color: var(--mist-40); }
.site-header__bar.is-hidden { transform: translateY(-100%); }
.site-header__inner { height: 100%; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; }

.brand { display: flex; align-items: stretch; gap: 22px; height: 44px; color: var(--chalk); }
.brand__mark { display: block; flex: none; width: 42px; height: 44px; fill: currentColor; }
.brand__word { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0 1px; }
.brand__name { font-family: var(--f-display); font-weight: 400; font-size: 29px; letter-spacing: 0.30em; line-height: 0.74; }
.brand__sub { font-family: var(--f-mono); font-weight: 400; font-size: 9px; letter-spacing: 0.42em; line-height: 0.74; }

.site-nav { display: none; --link-hover: var(--mist); }
.site-nav ul { display: flex; gap: 48px; }
.site-nav a { display: inline; padding: 0; }
.site-nav li:last-child a { margin-right: -0.12em; }
.site-nav a[aria-current="page"] { --rest: var(--chalk); }

.menu-toggle, .menu-close { width: 44px; height: 44px; margin-right: -10px; padding: 0; background: transparent; border: 0; border-radius: 0; cursor: pointer; color: var(--chalk); }
.menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.menu-toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; }
.menu-toggle:focus-visible, .menu-close:focus-visible { outline-offset: 2px; }
html:not(.js) .menu-toggle { display: none; }

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .menu-toggle { display: none; }
  .mobile-menu { display: none !important; }
}

/* Mobile menu: full-screen Marine Ink panel */
.mobile-menu {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  padding: 0 var(--gutter) 40px;
  background: var(--ink); color: var(--chalk);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transition: opacity 200ms ease-out;
}
.mobile-menu.is-open { opacity: 1; }
.mobile-menu__top { flex: none; height: 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--mist-40); }
.menu-close { position: relative; }
.menu-close span { position: absolute; left: 10px; top: 21px; width: 24px; height: 1.5px; background: currentColor; transform: rotate(45deg); }
.menu-close span + span { transform: rotate(-45deg); }
.mobile-menu__nav { margin-top: 56px; display: flex; flex-direction: column; }
.mobile-menu__nav a {
  display: block; min-height: 44px; padding: 20px 0;
  border-top: 1px solid var(--mist-40);
  font-family: var(--f-display); font-weight: 300; font-size: 40px; letter-spacing: -0.022em; line-height: 1.05;
  opacity: 0; transition: opacity 200ms ease-out, color 200ms ease-out;
}
.mobile-menu__nav a:last-child { border-bottom: 1px solid var(--mist-40); }
.mobile-menu__nav a:nth-child(2) { transition-delay: 40ms, 0ms; }
.mobile-menu__nav a:nth-child(3) { transition-delay: 80ms, 0ms; }
.mobile-menu__nav a:nth-child(4) { transition-delay: 120ms, 0ms; }
.mobile-menu.is-open .mobile-menu__nav a { opacity: 1; }
.mobile-menu__nav a:hover { color: var(--mist); }
.mobile-menu__nav span {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--rest, transparent), var(--rest, transparent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px, 100% 1px;
  transition: background-size 200ms ease-out;
}
.mobile-menu__nav a:hover span { background-size: 100% 1px, 100% 1px; }
.mobile-menu__nav a[aria-current="page"] span { --rest: var(--chalk); }

/* ------------------------------------------------------------------ 07 Footer */
.site-footer { padding-bottom: 64px; }
.site-footer__inner { border-top: 1px solid var(--mist-40); }
.site-footer__brand { padding: 56px 0 48px; display: flex; flex-direction: column; gap: 40px; }
.site-footer__endline { font-family: var(--f-display); font-weight: 300; font-size: var(--fs-section); letter-spacing: -0.022em; line-height: 1.08; }
.site-footer__title { color: var(--mist); margin-bottom: 8px; }
.site-footer__nav { border-top: 1px solid var(--mist-40); padding: 24px 0 32px; }
.site-footer__nav ul { display: flex; flex-direction: column; }
.site-footer__nav li { display: flex; }
.site-footer__nav a { line-height: 16px; padding: 14px 0; }
.site-footer__contact { border-top: 1px solid var(--mist-40); padding-top: 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.site-footer__place { color: var(--mist); }
@media (min-width: 1024px) {
  .site-footer { padding-bottom: 96px; }
  .site-footer__inner { padding-top: 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .site-footer__brand { grid-column: 1 / 6; padding: 0; gap: 48px; }
  .site-footer__endline { line-height: 1.06; }
  .site-footer__nav { grid-column: 7 / 10; border-top: 1px solid var(--mist-40); padding: 20px 0 0; }
  .site-footer__nav ul { gap: 16px; align-items: flex-start; }
  .site-footer__nav a { line-height: 1.35; padding: 0; }
  .site-footer__contact { grid-column: 10 / 13; padding-top: 20px; gap: 16px; }
  .site-footer__title { margin-bottom: 8px; }
}

/* ------------------------------------------------------------------ 08 Media
   Image treatment (components sheet 06): saturate 40% + Marine Ink colour layer 35%
   (blend: color) + flat Marine Ink scrim 86%. Worst case (a pure white pixel under the
   scrim) gives Chalk type 7.73:1. */
.media { position: relative; overflow: hidden; background: var(--panel); }
.media picture, .media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.media img { object-fit: cover; }
.media--treated img { filter: saturate(0.4); }
.media__tint { position: absolute; inset: 0; background: var(--ink); mix-blend-mode: color; opacity: 0.35; pointer-events: none; }
.media__scrim { position: absolute; inset: 0; background: rgba(15, 43, 51, 0.86); pointer-events: none; }

/* ------------------------------------------------------------------ 09 Page header (inner pages) */
.page-head { padding-top: 168px; padding-bottom: 80px; }
.page-head__inner { display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) {
  .page-head { padding-top: 248px; padding-bottom: 144px; }
  .page-head__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
  .page-head__inner h1 { grid-column: 1 / 10; }
  .page-head__inner p { grid-column: 1 / 7; }
}

/* ------------------------------------------------------------------ 10 Registers */
.register__row { display: flex; flex-direction: column; gap: 10px; padding: 24px 0; border-top: 1px solid var(--hair); }
.register__row:first-child { border-top: 2px solid var(--heavy); }
.register::after { content: ""; display: block; border-top: 2px solid var(--heavy); }
.register__stage { margin-top: 4px; color: var(--sub); }
@media (min-width: 1024px) {
  .register__row { display: grid; grid-template-columns: 78px minmax(0, 384fr) minmax(0, 690fr); column-gap: var(--gap); align-items: baseline; padding: 32px 0; }
  .register--staged .register__row { grid-template-columns: 78px minmax(0, 384fr) minmax(0, 486fr) minmax(0, 180fr); padding: 36px 0; }
  .register__stage { margin-top: 0; text-align: right; }
}

/* Short numbered list (What We Do deliverables) */
.list { margin-top: 8px; }
.list__row { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--hair); }
.list__row:first-child { border-top: 2px solid var(--heavy); }
.list::after { content: ""; display: block; border-top: 2px solid var(--heavy); }
.list__stage { grid-column: 2; color: var(--sub); }
@media (min-width: 1024px) {
  .list { margin-top: 16px; }
  .list__row { grid-template-columns: 78px minmax(0, 1fr); column-gap: var(--gap); padding: 20px 0; }
  .list--staged .list__row { grid-template-columns: 78px minmax(0, 1fr) 180px; }
  .list__stage { grid-column: auto; text-align: right; }
}

/* ------------------------------------------------------------------ 11 Home */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; background: var(--ink); color: var(--chalk); }
.hero .media { position: absolute; inset: 0; }
.hero .media img { object-position: 70% 30%; }  /* mobile crop lands on the crane leg and girder */
.hero__content { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 64px; display: flex; flex-direction: column; gap: 28px; }
@media (min-width: 1024px) {
  .hero { height: 900px; }
  .hero__content { bottom: 120px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
  .hero__content h1 { grid-column: 1 / 9; }
  .hero__content p { grid-column: 1 / 7; }
}

.home-a { padding-top: 56px; padding-bottom: 112px; }
.scope { }
.sequence { margin-top: 80px; }
@media (min-width: 1024px) {
  .home-a { padding-top: 64px; padding-bottom: 160px; }
  .scope { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .scope p { grid-column: 3 / 11; text-align: center; }
  .sequence { margin-top: 96px; }
}

/* Timeline. Each row owns the rule segment from its node to the next node, so the
   rule always ends exactly at the centre of the final node, whatever the text wraps to. */
.timeline { --node-y: 8px; --row-gap: 160px; position: relative; margin-top: 48px; display: flex; flex-direction: column; gap: var(--row-gap); }
.timeline__row { position: relative; }
.timeline__node { position: absolute; left: 0; top: calc(var(--node-y) - 5px); width: 10px; height: 10px; background: var(--ink); z-index: 1; }
.timeline__track, .timeline__draw { position: absolute; left: 4px; width: 2px; top: var(--node-y); height: calc(100% + var(--row-gap)); }
.timeline__track { background: var(--steel-30); }
.timeline__draw { background: var(--ink); transform-origin: top; }
.timeline__row:last-child .timeline__track, .timeline__row:last-child .timeline__draw { display: none; }
.timeline__content { padding-left: 36px; display: flex; flex-direction: column; gap: 12px; }
.timeline__num { line-height: 16px; }
@media (min-width: 1024px) {
  .timeline { --node-y: 13px; margin-top: 56px; }
  .timeline__content { padding-left: 0; display: grid; grid-template-columns: 78px minmax(0, 384fr) minmax(0, 690fr); column-gap: var(--gap); align-items: baseline; }
  .timeline__num { padding-left: 40px; line-height: 1.35; }
}

.owners-teaser { padding-top: 96px; padding-bottom: 104px; }
.owners-teaser .divider { margin-bottom: 24px; }
.owners-teaser__body { display: flex; flex-direction: column; gap: 48px; }
@media (min-width: 1024px) {
  .owners-teaser { padding-top: 160px; padding-bottom: 160px; }
  .owners-teaser__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 56px; }
  .owners-teaser__body > * { grid-column: 1 / 13; }
  .owners-teaser__body > .t-statement { grid-column: 1 / 11; }
}

.services { padding-top: 80px; padding-bottom: 96px; }
.services__inner { border-top: 2px solid var(--ink); padding-top: 24px; }
.services__intro { margin-bottom: 8px; }
.services__list li + li { border-top: 1px solid var(--rule); }
.services__list::after { content: ""; display: block; border-top: 2px solid var(--ink); }
.services__list a { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
.services__list .t-counter, .services__list .t-register { padding: 22px 0; }
.services__list .t-register { transition: transform 200ms ease-out; }
.services__list a:hover .t-register { transform: translateX(4px); }
.services__more { margin-top: 24px; }
@media (min-width: 1024px) {
  .services { padding-top: 96px; padding-bottom: 120px; }
  .services__inner { padding-top: 32px; }
  .services__intro { max-width: 588px; margin-bottom: 16px; }
  .services__list a { grid-template-columns: 78px minmax(0, 1fr); column-gap: var(--gap); }
  .services__list .t-counter, .services__list .t-register { padding: 28px 0; }
  .services__more { margin-top: 40px; }
  .services__more .link { font-size: 18px; line-height: 1.5; }
}

.sectors { padding-top: 80px; padding-bottom: 96px; }
.sectors__grid { margin-top: 24px; display: flex; flex-direction: column; gap: 64px; }
.sector { border-top: 1px solid var(--chalk-30); padding-top: 24px; display: flex; flex-direction: column; gap: 20px; }
.sector .media { aspect-ratio: 4 / 5; }
@media (min-width: 1024px) {
  .sectors { padding-top: 120px; padding-bottom: 144px; }
  .sectors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .sector { gap: 24px; }
}

.closing-cta { padding-bottom: 64px; }
.closing-cta__inner { border-top: 1px solid var(--mist-40); padding-top: 80px; display: flex; flex-direction: column; gap: 28px; }
.closing-cta .link { font-size: 18px; line-height: 1.5; }
@media (min-width: 1024px) {
  .closing-cta { padding-bottom: 96px; }
  .closing-cta__inner { padding-top: 120px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
  .closing-cta__inner > :first-child { grid-column: 1 / 9; }
  .closing-cta__inner > :last-child { grid-column: 1 / 13; }
}

/* ------------------------------------------------------------------ 12 What We Do */
.service-lines { padding-top: 80px; padding-bottom: 104px; display: flex; flex-direction: column; gap: 96px; }
.service { scroll-margin-top: calc(var(--header-h) + 24px); }
.service__body { margin-top: 20px; display: flex; flex-direction: column; gap: 24px; }
.service__text { display: flex; flex-direction: column; gap: 24px; }
.service .media { aspect-ratio: 1 / 1; background: var(--ink); }
@media (min-width: 1024px) {
  .service-lines { padding-top: 144px; padding-bottom: 160px; gap: 144px; }
  .service__body { margin-top: 24px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .service__text { gap: 32px; }
  .service .media { aspect-ratio: 588 / 600; }
  /* image left, text right */
  .service--img-left .media { grid-column: 1 / 7; grid-row: 1; }
  .service--img-left .service__text { grid-column: 8 / 13; grid-row: 1; }
  /* image right, text left */
  .service--img-right .media { grid-column: 7 / 13; grid-row: 1; }
  .service--img-right .service__text { grid-column: 1 / 6; grid-row: 1; }
  /* heading left, text right */
  .service--split .service__text { display: contents; }
  .service--split h2 { grid-column: 1 / 6; }
  .service--split .service__detail { grid-column: 7 / 13; }
}
.service__detail { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1024px) { .service__detail { gap: 32px; } }

.engagement { padding-top: 88px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 80px; }
.engagement__group { display: flex; flex-direction: column; gap: 16px; }
.engagement__modes li { border-top: 1px solid var(--mist-40); padding: 20px 0; }
.engagement__modes::after, .engagement__outputs::after { content: ""; display: block; border-top: 1px solid var(--mist-40); }
.engagement__lead { margin-bottom: 8px; }
.engagement__outputs li { border-top: 1px solid var(--mist-40); padding: 20px 0; }
@media (min-width: 1024px) {
  .engagement { padding-top: 144px; padding-bottom: 96px; gap: 120px; }
  .engagement__group { gap: 24px; }
  .engagement__modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .engagement__modes li { padding: 24px 0 0; }
  .engagement__modes::after, .engagement__outputs::after { display: none; }
  .engagement__outputs-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .engagement__outputs-wrap > .engagement__group { grid-column: 1 / 9; }
  .engagement__lead { margin-bottom: 0; }
  .engagement__outputs li:first-child { border-top: 0; padding: 4px 0 20px; }
}

/* ------------------------------------------------------------------ 13 The Owner's Side */
.os-register { padding-top: 80px; padding-bottom: 96px; }
@media (min-width: 1024px) { .os-register { padding-top: 144px; padding-bottom: 160px; } }

.band { position: relative; height: 480px; overflow: hidden; background: var(--ink); color: var(--chalk); }
.band .media { position: absolute; inset: 0; background: var(--ink); }
.band .media img { object-position: 20% 50%; }  /* mobile crop offset left of the hero's, so the shared master doesn't repeat */
.band__type { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 56px; pointer-events: none; }
@media (min-width: 1024px) {
  .band { height: 640px; }
  .band__type { bottom: 96px; right: auto; width: min(792px, calc(100% - 2 * var(--gutter))); }
}

.add-most { padding-top: 88px; padding-bottom: 96px; }
.add-most h2 { margin-bottom: 40px; }
.add-most table, .add-most thead, .add-most tbody { display: block; width: 100%; }
.add-most thead { display: none; }
.add-most tbody tr { display: flex; flex-direction: column; gap: 20px; padding: 28px 0 32px; border-top: 1px solid var(--mist-40); }
.add-most tbody tr:first-child { border-top: 2px solid var(--mist); }
.add-most td, .add-most th { padding: 0; text-align: left; font-weight: inherit; vertical-align: baseline; }
.add-most .cell-label { display: block; margin-bottom: 6px; color: var(--mist); }
.add-most .fails { color: var(--mist); }
.add-most .when { color: var(--mist); }
.add-most__foot { border-top: 2px solid var(--mist); padding-top: 20px; color: var(--mist); line-height: 1.6; }
@media (min-width: 1024px) {
  .add-most { padding-top: 144px; padding-bottom: 160px; }
  .add-most h2 { margin-bottom: 64px; }
  .add-most thead { display: block; }
  .add-most thead tr, .add-most tbody tr { display: grid; grid-template-columns: 78px minmax(0, 282fr) minmax(0, 282fr) minmax(0, 282fr) minmax(0, 180fr); column-gap: var(--gap); align-items: baseline; }
  .add-most thead tr { border-top: 2px solid var(--mist); padding: 20px 0; color: var(--mist); }
  .add-most tbody tr, .add-most tbody tr:first-child { border-top: 1px solid var(--mist-40); padding: 36px 0; row-gap: 0; }
  .add-most .cell-label { display: none; }
  .add-most .when, .add-most thead th:last-child { text-align: right; }
  .add-most__foot { line-height: 1.35; }
}

.os-closing { padding-top: 96px; padding-bottom: 104px; }
@media (min-width: 1024px) {
  .os-closing { padding-top: 160px; padding-bottom: 144px; }
  .os-closing .grid > p { grid-column: 1 / 10; }
}

/* ------------------------------------------------------------------ 14 Contact */
.enquiry { padding-top: 64px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 72px; }
.enquiry__form { border-top: 2px solid var(--ink); padding-top: 40px; }
.enquiry__details { border-top: 2px solid var(--ink); padding-top: 32px; display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.enquiry__details .link { overflow-wrap: anywhere; }
.enquiry__details p { border-top: 1px solid var(--rule); padding-top: 20px; color: var(--steel-text); align-self: stretch; }
@media (min-width: 1024px) {
  .enquiry { padding-top: 144px; padding-bottom: 160px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
  .enquiry__form { grid-column: 1 / 8; padding-top: 48px; }
  .enquiry__details { grid-column: 9 / 13; padding-top: 48px; gap: 24px; }
  .enquiry__details p { padding-top: 24px; }
}

.form { display: flex; flex-direction: column; gap: 40px; }
.form__req { color: var(--steel-text); }
.req { color: var(--red); }
.form__pair { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--gap); row-gap: 40px; }
.field { display: flex; flex-direction: column; gap: 12px; }
.field__label { color: var(--steel-text); }
.field input, .field textarea, .field select {
  width: 100%; min-width: 0; margin: 0;
  font-family: var(--f-sans); font-size: 18px; line-height: 1.5; color: var(--ink);
  background: transparent; border: 0; border-radius: 0; border-bottom: 1px solid var(--rule);
  padding: 4px 0 11px; outline: none;
  -webkit-appearance: none; appearance: none;
  transition: box-shadow 200ms ease-out, border-color 200ms ease-out;
}
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.field.is-invalid input { border-bottom-color: var(--red); }
.field.is-invalid input:focus { border-bottom-color: var(--red); box-shadow: 0 1px 0 0 var(--red); }
.field__error { color: var(--red); }
.field__error:empty { display: none; }
.phone { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); column-gap: 16px; align-items: end; }
.phone__code { position: relative; }
.phone__code select { cursor: pointer; padding-right: 20px; }
.phone__value { display: none; }
html.js .phone__value { display: block; padding: 4px 20px 11px 0; font-size: 18px; line-height: 1.5; border-bottom: 1px solid var(--rule); transition: box-shadow 200ms ease-out, border-color 200ms ease-out; }
html.js .phone__code select { position: absolute; inset: 0; height: 100%; opacity: 0; }
html.js .phone__code:focus-within .phone__value { border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.field input { scroll-margin-top: 160px; }
.phone__code::after { content: "▾"; position: absolute; right: 0; bottom: 14px; font-family: var(--f-mono); font-size: 12px; color: var(--steel-text); pointer-events: none; }
.form__submit {
  width: 100%; height: 48px; padding: 0 28px;
  background: var(--ink); color: var(--chalk); border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px;
  transition: background-color 200ms ease-out, text-decoration-color 200ms ease-out;
}
.form__submit:hover { background: var(--ink-press); text-decoration-color: var(--chalk); }
.form__submit:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.form__submit:disabled { cursor: progress; }
.form__alert { border-top: 1px solid var(--red); border-bottom: 1px solid var(--red); padding: 24px 0; display: flex; flex-direction: column; gap: 12px; }
.form__alert .t-register { color: var(--red); }
.form__success { display: flex; flex-direction: column; gap: 32px; }
.form__success p { max-width: 588px; }
.inline-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color 200ms ease-out; }
.inline-link:hover { color: var(--steel-text); }
.honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 1024px) {
  .form__pair { grid-template-columns: 1fr 1fr; }
  .phone { grid-template-columns: minmax(0, 1fr) minmax(0, 4fr); column-gap: var(--gap); }
  .form__submit { width: auto; }
}

/* ------------------------------------------------------------------ 15 Not found */
.not-found { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--header-h) + 64px); padding-bottom: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; text-align: center; }
.not-found .brand__mark { width: 84px; height: 88px; }
.not-found .link { font-size: 18px; line-height: 1.5; }

/* ------------------------------------------------------------------ 16 Motion
   Progressive enhancement only. Hidden states exist only under html.motion, which the
   inline head script sets when JS runs and prefers-reduced-motion is not "reduce".
   Without JS, or with reduced motion, everything is visible and the rule is full length. */
html.motion [data-ri]:not(.is-in),
html.motion [data-hero]:not(.is-in) { opacity: 0; transform: translateY(16px); }
html.motion [data-ri], html.motion [data-hero] { transition: opacity 400ms var(--ease), transform 400ms var(--ease); transition-delay: var(--d, 0ms); }
html.motion [data-band-img]:not(.is-in) { opacity: 0; }
html.motion [data-band-img] { transition: opacity 600ms var(--ease); }
html.motion [data-band-type]:not(.is-in) { opacity: 0; transform: translateY(16px); }
html.motion [data-band-type] { transition: opacity 400ms var(--ease) 200ms, transform 400ms var(--ease) 200ms; }

html.motion .timeline__content { opacity: 0; transform: translateY(16px); transition: opacity 400ms ease-out, transform 400ms ease-out; }
html.motion .timeline__row.is-in .timeline__content { opacity: 1; transform: none; }
html.motion .timeline__draw { transform: scaleY(0); transition: transform 400ms ease-out; }
html.motion .timeline__row.is-drawn .timeline__draw { transform: scaleY(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}