/* CORETXIA · coretxia.ai
   Built from the brand kit v1.0 (04-Colour, 05-Fonts) and guidelines p.17 (graphic system) and p.19 (on screen).
   Layout inspired by the Integrated Biosciences style on styles.refero.design ("lab instrument panel"):
   mono metadata in outlined pills, one accent used as a signal lamp, an asymmetric hero, flat cards, one light band.
   Brand rules win over the reference: dark first; gold is the logo plus one Champagne action per view;
   Steel Light is secondary text on dark, Steel on Ivory; Steel is never text on Midnight. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
/* Fallbacks shaped to Geist's metrics (width measured against Arial and Menlo; ascent 1005, descent 295 per 1000),
   so the text keeps its size and line breaks while the web fonts load: no jump in the 160 px headline */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 102.8%;
  ascent-override: 97.8%;
  descent-override: 28.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Geist Mono Fallback";
  src: local("Menlo"), local("Courier New"), local("Liberation Mono");
  size-adjust: 100%;
  ascent-override: 100.5%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

:root {
  /* Brand colours, from CORETXIA_Colours.css */
  --midnight: #0D1420;
  --night: #16202F;
  --ivory: #F4F1EA;
  --champagne: #CDB07A;
  --pewter: #CED3D8;
  --steel-light: #AAB6C6;
  --steel: #566982;
  /* Hairline on dark. Translucent, so it lands on the guidelines' #253246 over Midnight
     and still reads over Night Blue cards and the footer. */
  --line: rgb(133 170 222 / 0.2);
  /* Hairline on Ivory, as in the guidelines */
  --line-light: #DCD7CB;
  /* Form errors only. Not a brand colour; a muted red that reads on Midnight and Night Blue (7.0:1 on Night Blue) */
  --error: #E8938A;

  --sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale. The brand's screen scale (guidelines p.16: 64, 44, 30, 17, 14, 11 at a 1.4 ratio) stretched for a
     landing page: nine roles, each step at least 1.17 apart. Headings are fluid; the maximum is shown. */
  --text-hero: min(clamp(3.5rem, min(1.6rem + 6vw, 16vw, 15vh), 7rem), 16vw);   /* 112: the line in the hero (the user, 2026-10-26: it took 60% of the screen). 16vw outer cap: with large phone text "Intelligence" still fits */
  --text-display: clamp(2.5rem, 1.1rem + 4.2vw, 4.5rem);                  /* 72: the region statement (40 on phones, a step above headings) */
  --text-heading: min(clamp(2.25rem, 1.3rem + 2.8vw, 3.5rem), 11.5vw);    /* 56: section headings. 11.5vw cap: long words fit with large phone text */
  --text-statement: clamp(1.625rem, 1rem + 1.9vw, 2.75rem);               /* 44: card numbers */
  --text-lead: clamp(1.375rem, 0.9rem + 1.6vw, 2rem);                     /* 32: the hero line, industries, integration */
  --text-title: 1.375rem;                                                 /* 22: card and step titles */
  --text-body: 1.0625rem;                                                 /* 17 / 26 */
  --text-small: 0.875rem;                                                 /* 14 / 21 */
  --text-label: 0.75rem;                                                  /* 12: mono capitals */
  --text-control: 0.9375rem;                                              /* 15: button labels, a control size */
  /* Tracking: tighter as the size grows. Headings and the line −3%, leads and titles −2%, body 0, labels +8% */
  --track-heading: -0.03em;
  --track-title: -0.02em;
  --track-label: 0.08em;

  /* Motion: strong ease-out for entrances and feedback, ease-in-out for movement on screen */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-hero: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1280px;
  --section: clamp(96px, 11vw, 168px);
  --col-gap: 24px;

  color-scheme: dark;
}
/* Big screens (the user, 2026-10-26, on a 24-inch monitor): the page widens and every rem-based size grows with
   the root, so the layout keeps its laptop proportions instead of sitting in a strip. Below 1800 px nothing changes. */
@media (min-width: 1800px) { :root { --max: 1440px; } html { font-size: 106.25%; } }   /* body 18 */
@media (min-width: 2400px) { :root { --max: 1680px; } html { font-size: 118.75%; } }   /* body 20 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--midnight);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: var(--text-body);
  line-height: 1.53;         /* 26 */
  font-kerning: normal;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;    /* clip, not hidden: nothing can scroll it sideways */
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
/* Running text: no single word left on the last line */
p, dd, li { text-wrap: pretty; }
/* With very large text a long word may still not fit: break it rather than run off the screen */
h1, h2, h3, p, dd, li, label { overflow-wrap: break-word; }
/* Every pressable element has its own :active state, so drop the grey tap flash */
a, button { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid var(--ivory); outline-offset: 3px; border-radius: 6px; }
.band-light :focus-visible { outline-color: var(--midnight); }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: var(--gutter); top: -100px; z-index: 20;
  background: var(--ivory); color: var(--midnight); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 500;
}
.skip:focus { top: 12px; }

/* ---------- Type ---------- */
/* Mono label in an outlined pill: the instrument-panel voice for section labels */
.pill {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: var(--text-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--steel-light);
}
/* Section headings: a step up from the 44 px H1 of the guidelines, so the page keeps the hero's scale */
.h2 {
  font-size: var(--text-heading);
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: 1.04;
  text-wrap: balance;
}
.h3 {
  font-size: var(--text-title);
  font-weight: 600;
  letter-spacing: var(--track-title);
  line-height: 1.25;
}

/* ---------- Buttons ---------- */
/* One system (the user, 2026-10-26): every button and nav item is a pill. Heights: header items 36 on wide screens,
   buttons 48, main buttons on phones 52, nothing you tap under 44 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px;   /* a real <button> brings its own border and font: reset both */
  font-family: var(--sans); font-size: var(--text-control); font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
/* Very large text on a phone: a label wider than the screen wraps inside its pill instead of pushing the page sideways */
@media (max-width: 520px) { .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; padding-block: 8px; } }
/* The one Champagne action in a view: the signal lamp */
.btn--primary { background: var(--champagne); color: var(--midnight); padding-right: 8px; }
.btn__arrow {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--midnight); color: var(--champagne);
  transition: translate 200ms var(--ease-out);
}
.btn--line { border: 1px solid var(--line); color: var(--ivory); }
/* On the Ivory band, where gold doesn't carry: Midnight, with an Ivory arrow */
.btn--dark { background: var(--midnight); color: var(--ivory); padding-right: 8px; }
.btn--dark .btn__arrow { background: var(--ivory); color: var(--midnight); }

/* ---------- Masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 10;
  background: rgb(13 20 32 / 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: background-color 200ms ease, border-color 200ms ease;
}
/* Over the hero the header is part of the stage; it turns solid once the page scrolls (site.js adds .is-scrolled) */
.js .masthead:not(.is-scrolled):not(:has(.nav.is-open)) {
  background-color: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Reading progress, a hairline along the header's lower edge */
.masthead__progress {
  position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: var(--steel-light);
  transform: scaleX(var(--progress, 0)); transform-origin: left;
}
html:not(.js) .masthead__progress { display: none; }
.masthead__bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.masthead__logo { flex: none; display: block; padding-block: 4px; margin-block: -4px; border-radius: 2px; }   /* a 44 px tap area round the 36 px lockup */
.masthead__logo img { width: 178px; height: 36px; }   /* horizontal lockup, never below 170 px */

/* Nav as mono labels with no outline (the user, 2026-10-26); the section in view gets a soft fill */
.nav { display: flex; align-items: center; gap: 8px; }
.nav__list { display: flex; gap: 8px; }
.nav__list a, .nav__contact {
  display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 14px;
  border-radius: 999px;
  font-family: var(--mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  text-decoration: none; color: var(--steel-light);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out);
}
/* The section in view */
.nav__list a[aria-current="true"] { color: var(--ivory); background: rgb(170 182 198 / 0.12); }
/* Contact: filled Ivory, not gold (the logo's gold counts for the header) */
.nav__contact { background: var(--ivory); color: var(--midnight); }

.masthead__toggle {
  display: none;
  font: 500 var(--text-label)/1 var(--mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory);
  background: none; border: 0; border-radius: 999px;
  min-height: 44px; padding: 0 16px; margin-right: -16px; cursor: pointer;   /* the label lines up with the page edge */
  transition: transform 160ms var(--ease-out);
}

@media (max-width: 1000px) {
  .js .masthead__toggle { display: inline-flex; align-items: center; }
  .js .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 20px;
    padding: 20px var(--gutter) 28px;
    background: var(--midnight);
    border-bottom: 1px solid var(--line);
  }
  /* Opens with a short drop; closes instantly (display: none has nothing to transition) */
  .js .nav.is-open { display: flex; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  .js .nav__list { flex-direction: column; gap: 0; }
  .js .nav__list a { display: flex; min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: var(--text-small); color: var(--ivory); }
  .js .nav__contact { align-self: stretch; justify-content: center; min-height: 48px; font-size: var(--text-small); }
  /* Without script, the pills wrap under the logo */
  html:not(.js) .masthead__bar { flex-wrap: wrap; padding-block: 16px; }
  html:not(.js) .nav, html:not(.js) .nav__list { flex-wrap: wrap; }
}
@starting-style {
  .js .nav.is-open { opacity: 0; transform: translateY(-8px); }
}

/* ---------- Hero ---------- */
/* Two lines and the actions as one block on a moving stage: left, a little above the middle of the space under the header.
   The hero runs up under the transparent header (77 px: the bar plus its hairline), so the stage is one surface. */
.hero {
  --header: 77px;
  position: relative;
  overflow: clip;
  min-height: max(600px, 100svh);
  margin-top: calc(-1 * var(--header));
  display: grid;
  align-content: center;
  padding-top: calc(var(--header) + clamp(48px, 8vh, 96px));
  padding-bottom: clamp(96px, 16vh, 176px);   /* more room below than above: the block sits a little high */
}
.hero > .wrap { position: relative; z-index: 2; }

/* The background: brushed-steel ribbons turning on navy (v4, on trial; deliverables/web/hero-video).
   The poster shows at once; the video fades in over it.
   No gold in it: gold stays in the logo and the primary button. */
.hero__media { position: absolute; inset: 0; z-index: 0; background: var(--midnight); }
/* The poster: shows at once, and stays for reduced motion and Save-Data */
.hero__media::before {
  content: "";
  position: absolute; inset: 0;
  background: url("/assets/video/hero-v4-poster.webp") 60% 50% / cover no-repeat;
}
.hero__video {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  opacity: 0;
  transition: opacity 800ms ease;
}
.hero__video.is-ready { opacity: 1; }
/* Legibility: the loop shows in its original colour (the user, 2026-10-26); Midnight deepens only behind the copy
   (left), along the foot and under the header line */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 75% at 0% 50%, rgb(13 20 32 / 0.8) 0%, rgb(13 20 32 / 0) 100%),
    linear-gradient(0deg, rgb(13 20 32 / 0.85) 0%, rgb(13 20 32 / 0) 30%),
    linear-gradient(180deg, rgb(13 20 32 / 0.5) 0%, rgb(13 20 32 / 0) 16%);
}

/* Material: a fine grain over the whole stage */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.67 0 0 0 0 0.71 0 0 0 0 0.78 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
}

.hero__body { display: flex; flex-direction: column; align-items: flex-start; }
/* Geist 300, lighter than the 600 used elsewhere: on the moving stage the headline sits in, not on top.
   Size: 56 px on phones up to 112 px from about 1440 px wide; 16vw keeps "Intelligence" inside the narrowest phones
   and 15vh keeps the block under half of short laptop screens. The negative margin pulls the I's side bearing
   back to the column, so the headline, the line and the buttons share one left edge. */
.hero__title {
  font-size: var(--text-hero);
  margin-left: -0.06em;
  font-weight: 300;
  letter-spacing: var(--track-heading);   /* a lighter weight needs less pull than the 400 at −4% */
  line-height: 0.95;
  max-width: 10ch;
  text-wrap: balance;
}
/* Headline, line and actions as one block: the line close under the headline, the actions a step further */
.hero__sub {
  margin-top: clamp(16px, 1.8vw, 28px);
  font-size: var(--text-title);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.45;   /* light text on a dark, moving ground wants the extra air */
  max-width: 40ch;
  text-wrap: balance;   /* the plain line: what CORETXIA does and for whom, in about three even lines */
}
.hero__actions { margin-top: clamp(28px, 2.8vw, 40px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Over the moving light the outline button keeps a dark, frosted backing */
.hero .btn--line { background: rgb(13 20 32 / 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* Intro, on the first view of the session with motion welcome: the headline rises word by word (the words are split
   in the markup), then the line, then the actions. Pure CSS, so it starts with the first paint and never waits for
   script; the scroll-out is GSAP's, on the parent. */
.motion:not(.hero-seen) .hero__title .w__i { animation: hero-word 1.3s cubic-bezier(0.16, 1, 0.3, 1) calc(0.15s + var(--i) * 0.09s) both; }
.motion:not(.hero-seen) .hero__sub { animation: hero-rise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s both; --rise: 20px; }
.motion:not(.hero-seen) .hero__actions { animation: hero-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both; --rise: 16px; }
@keyframes hero-word { from { transform: translateY(110%); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(var(--rise)); } }

/* Phones: the two actions side by side in equal columns (the user's call). Labels may wrap to two centred lines;
   the arrow goes so both labels sit centred */
@media (max-width: 520px) {
  .hero__sub { font-size: var(--text-body); line-height: 1.55; }   /* three lines, a clear step under the headline */
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-self: stretch; }
  .hero__actions .btn {
    min-height: 52px; padding: 4px 16px;
    font-size: var(--text-control); line-height: 1.2;
    white-space: normal; text-align: center; text-wrap: balance;
  }
  .hero__actions .btn__arrow { display: none; }
}
/* Short screens (a phone on its side): the hero fits the screen and the line runs on one row */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 100svh; padding-top: calc(var(--header) + 24px); padding-bottom: 32px; }
  .hero__sub { max-width: none; margin-top: 12px; }
  .hero__actions { margin-top: 20px; }
}

@media (max-width: 700px) {
  .hero__media::before { background-position: 72% 50%; }
  .hero__video { object-position: 72% 50%; }
}

/* Tall screens: the upright render and its poster, centred (it was made for this shape) */
@media (max-aspect-ratio: 3/4) {
  .hero__media::before { background-image: url("/assets/video/hero-v4-portrait-poster.webp"); background-position: 50% 50%; }
  .hero__video { object-position: 50% 50%; }
  /* A soft Midnight glow around the letters only, for the moments a bright ribbon passes behind them */
  .hero__title, .hero__sub { text-shadow: 0 1px 16px rgb(13 20 32 / 0.55); }
  /* No even tint, as on desktop (the user, 2026-10-26): shading only behind the copy, under the header and at the foot */
  .hero__media::after {
    background:
      radial-gradient(ellipse 115% 38% at 0% 50%, rgb(13 20 32 / 0.85) 0%, rgb(13 20 32 / 0) 100%),
      linear-gradient(0deg, rgb(13 20 32 / 0.7) 0%, rgb(13 20 32 / 0) 22%),
      linear-gradient(180deg, rgb(13 20 32 / 0.6) 0%, rgb(13 20 32 / 0) 14%);
  }
}

/* ---------- Split headings (site.js) ---------- */
/* Each word rises inside its own clipped box; the padding keeps descenders inside the clip */
.w { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.w__i { display: inline-block; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--rule { border-top: 1px solid var(--line); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.intro__text { color: var(--steel-light); max-width: 52ch; }
/* Mono index numbers: the instrument-panel voice for counts */
.card__num, .sectors__num {
  font-family: var(--mono); font-weight: 500; letter-spacing: var(--track-label);
  font-variant-numeric: tabular-nums;
}

/* ---------- About: the symbol assembles beside the brand statement ---------- */
.about { border-top: 1px solid var(--line); }
.about__stage {
  min-height: 100svh;
  display: grid; align-content: center;
  padding-block: calc(77px + clamp(40px, 6vh, 72px)) clamp(48px, 7vh, 80px);
}
.about__grid { row-gap: clamp(48px, 8vh, 88px); align-items: center; }
.about__mark { grid-column: 1 / span 5; }
.about__mark svg { width: min(100%, 400px, 44vh); height: auto; overflow: visible; }
.about__copy { grid-column: 7 / -1; display: grid; gap: 24px; justify-items: start; }   /* the label-to-heading step of every section */
.about__statement {
  font-size: var(--text-heading);   /* six words: section-heading size beside the symbol */
  font-weight: 400;   /* text weight, in the hero's voice; the size carries it */
  letter-spacing: var(--track-heading);
  line-height: 1.08;
  text-wrap: balance;   /* each sentence on its own line, never "…One / clear purpose." */
}
/* Words for the scrubbed brightening (site.js). Real text, so screen readers read the sentence as written. */
.sw { opacity: 1; }
.about__support {
  max-width: 44ch;
  font-size: var(--text-title);
  font-weight: 400;
  line-height: 1.55;   /* light on dark: a touch more air */
  color: var(--steel-light);
  text-wrap: pretty;
}
.contact__details dt, .footer__label {
  font-family: var(--mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--steel-light);
}
.contact__details dd { margin: 8px 0 0; }
.contact__details a { display: inline-block; padding-block: 11px; margin-block: -11px; }   /* a 44 px tap area; the line stays where it was */
.contact__details a, .footer__contact a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--steel); text-underline-offset: 4px; transition: text-decoration-color 160ms ease; }
@media (max-width: 1000px) {
  .about__stage { min-height: 0; padding-block: var(--section); }
  .about__mark, .about__copy { grid-column: 1 / -1; }
  .about__mark svg { width: clamp(140px, 36vw, 240px); }
}
/* Phones: the heading drops to 36 px, so the support drops to body size and keeps the step between them */
@media (max-width: 620px) { .about__support { font-size: var(--text-body); line-height: 1.6; } }

/* ---------- Services: a pinned sideways track on wide screens with motion (.is-track); a swipe row (scroll snap) at
   1000 px and under; a grid of three on wide screens without motion ---------- */
.solutions { padding-block: var(--section); border-top: 1px solid var(--line); }
.solutions__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 24px; align-items: end; margin-bottom: 56px; }
.solutions__intro { grid-column: 1 / span 7; display: grid; gap: 24px; justify-items: start; }
.solutions__aside { grid-column: 9 / -1; display: grid; gap: 28px; }
.track { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1200px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* four and three, so no card sits alone */
.card {
  position: relative;
  overflow: clip;
  display: flex; flex-direction: column;
  background: var(--night);
  border-radius: 16px;
}
/* The picture: one image of the series per service (assets/img/services/), cropped to fill. Until the images exist,
   and if one fails to load, the frame shows the brand's 45° field on a lifted Night Blue. */
.card__media {
  position: relative;
  overflow: clip;
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(45deg, rgb(170 182 198 / 0.07) 0 1px, transparent 1px 14px),
    color-mix(in srgb, var(--night) 82%, var(--steel));
}
.card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.card__body { display: grid; align-content: start; gap: 8px; padding: 20px 24px 24px; }
/* The number sits on the picture's corner (the meter already counts), so the body reads name, sentence, spec */
.card__num {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  padding: 5px 8px; border-radius: 6px;
  background: rgb(13 20 32 / 0.72);   /* a small Midnight tag, so it reads on busy photographs */
  font-size: var(--text-label); line-height: 1; color: var(--ivory);
}
.card__name { font-size: var(--text-title); font-weight: 600; letter-spacing: var(--track-title); line-height: 1.2; text-wrap: balance; }
/* Every card reserves the same room for its name and sentence, so the pictures share one height and the text starts
   on one line across the row. A one-line name sits at the foot of its two-line room, on its sentence. */
.card__name { min-height: 2.4em; display: flex; align-items: flex-end; }
.card__lead { min-height: 3.1em; }
/* Narrow cards (about 350 px and under) wrap a sentence to three lines, so all of them keep room for three */
.card { container-type: inline-size; }
@container (max-width: 350px) { .card__lead { min-height: 4.65em; } }
.card__lead { color: var(--pewter); font-size: var(--text-body); line-height: 1.55; text-wrap: pretty; }   /* the line to read */
/* The spec list: under a hairline, the three tags as mono rows, one per line (as chips they wrapped to a ragged second
   row on most cards; the user, 2026-10-26). Things to scan, not text to read. */
.card__tags {
  display: grid; gap: 6px;
  margin-top: 8px; padding: 14px 0 0; list-style: none;
  border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label);
  line-height: 1.2; text-transform: uppercase; color: var(--steel-light);
}
/* Light under a fine pointer: a soft spotlight follows it across the card (site.js sets --mx and --my) */
.card::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(170 182 198 / 0.1), transparent 65%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}

/* The meter only means something on the track */
.track-meter { display: none; align-items: center; gap: 16px; font-family: var(--mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); color: var(--steel-light); font-variant-numeric: tabular-nums; }
.track-meter__now { color: var(--ivory); }
.track-meter__bar { position: relative; flex: 1; height: 1px; background: var(--line); }
.track-meter__fill { position: absolute; inset: 0; background: var(--ivory); transform: scaleX(0); transform-origin: left; }

.solutions.is-track { padding-block: 0; }
.is-track .solutions__stage {
  height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(77px + 16px) 32px;
  overflow: clip;
}
.is-track .solutions__head { margin-bottom: clamp(28px, 5vh, 56px); }
.is-track .track-meter { display: flex; }
.is-track .track { max-width: none; padding-inline: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
.is-track .cards { display: flex; width: max-content; gap: 16px; }
/* On the track the row takes a share of the screen's height, and gives some back on short screens so the heading
   always clears the header; inside each card the picture takes what the text leaves */
.is-track .track { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; }
.is-track .cards { flex: 0 1 auto; min-height: 0; height: clamp(360px, 57vh, 36rem); }   /* clear air under the row */
.is-track .card { flex: none; width: clamp(320px, 27vw, 23.75rem); }
.is-track .card__media { flex: 1 1 auto; min-height: 120px; aspect-ratio: auto; }
.is-track .card__body { flex: none; }
/* Short laptop windows (768 px and under): a smaller heading and a tighter card body, so the picture keeps its room */
@media (max-height: 780px) {
  .is-track .solutions__head { margin-bottom: 24px; }
  .is-track .cards { height: clamp(360px, 60vh, 36rem); }   /* the picture keeps its room; less air below */
  .is-track .h2 { font-size: var(--text-statement); }
  .is-track .card__body { gap: 8px; padding: 16px 20px 20px; }
  .is-track .card__media { min-height: 96px; }
}

/* 1000 px and under: one row you swipe, each card snapping to the column with the next one showing at the edge.
   The row runs to the screen's edges; the meter (site.js) follows it. Works without script. */
@media (max-width: 1000px) {
  .solutions__intro, .solutions__aside { grid-column: 1 / -1; }
  .solutions__head { margin-bottom: 24px; }
  .js .track-meter { display: flex; }
  .cards {
    display: flex; gap: 12px;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: none; width: min(calc(100vw - 2 * var(--gutter) - 32px), 380px); scroll-snap-align: start; }
}

/* ---------- Approach, the light band (Ivory ground, Midnight text, Steel secondary) ---------- */
.band-light { background: var(--ivory); color: var(--midnight); }
.band-light .pill { border-color: var(--line-light); color: var(--steel); }
.approach { row-gap: 56px; align-items: start; }
.approach__intro { grid-column: 1 / span 5; display: grid; gap: 24px; justify-items: start; }
.approach__text { color: var(--steel); max-width: 44ch; }
.approach__intro .btn { margin-top: 8px; }
/* The steps: one open at a time (site.js). Each row is a button; the panel opens with a short height ease
   (grid rows 0fr to 1fr) and is hidden from focus and screen readers while closed. Without script all four are open. */
.steps { grid-column: 7 / -1; border-top: 1px solid var(--midnight); }
.step { border-bottom: 1px solid var(--line-light); }
.step__head { font: inherit; }
.step__toggle {
  display: grid; grid-template-columns: 48px 1fr 24px; align-items: center;
  width: 100%; min-height: 72px; padding: 16px 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.step__num { font-family: var(--mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); font-variant-numeric: tabular-nums; color: var(--steel); }
.step__name { font-size: var(--text-title); font-weight: 600; letter-spacing: var(--track-title); line-height: 1.25; }
/* Plus, turning to a cross when open */
.step__icon { position: relative; width: 14px; height: 14px; justify-self: end; color: var(--steel); transition: transform 250ms var(--ease-out), color 160ms ease; }
.step__icon::before, .step__icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; margin-top: -0.75px; background: currentColor; }
.step__icon::after { transform: rotate(90deg); }
.step.is-open .step__icon { transform: rotate(45deg); color: var(--midnight); }
html:not(.js) .step__icon { display: none; }
html:not(.js) .step__toggle { cursor: default; }
.step__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 250ms var(--ease-out), visibility 0s; }
.js .step:not(.is-open) .step__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 250ms var(--ease-out), visibility 0s 250ms; }
.step__clip { min-height: 0; overflow: hidden; }
.step__body { display: grid; gap: 16px; justify-items: start; padding: 0 0 28px 48px; }
.step__body p { color: var(--steel); max-width: 46ch; }
.step__tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.step__tags li {
  padding: 6px 12px; border: 1px solid var(--line-light); border-radius: 999px;
  font-family: var(--mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); line-height: 1.3; text-transform: uppercase;
  color: var(--steel);
}
@media (max-width: 1000px) { .approach__intro, .steps { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .step__toggle { grid-template-columns: 36px 1fr 24px; min-height: 64px; }
  .step__body { padding-left: 36px; }
}

/* ---------- Industries: a large-type index ---------- */
.industries { row-gap: 48px; align-items: start; }
.industries__intro { grid-column: 1 / span 5; display: grid; gap: 24px; justify-items: start; position: sticky; top: 120px; }
.sectors { grid-column: 7 / -1; }
.sectors li {
  position: relative;
  display: grid; grid-template-columns: 48px 1fr; align-items: baseline;
  padding: 24px 0;
}
.sectors li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--line); transform-origin: left; transform: scaleX(var(--draw, 1)); }
.sectors li:last-child { border-bottom: 1px solid var(--line); }
.sectors__num { font-size: var(--text-label); color: var(--steel-light); }
.sectors__name { font-size: var(--text-lead); font-weight: 400; letter-spacing: var(--track-title); line-height: 1.2; }
@media (max-width: 1000px) { .industries__intro { position: static; } .industries__intro, .sectors { grid-column: 1 / -1; } }
@media (max-width: 560px) { .sectors li { grid-template-columns: 36px 1fr; padding: 18px 0; } }

/* ---------- Region: three lines, never wrapped (the user, 2026-10-27). The clock lives in the footer. ---------- */
.statement {
  margin-top: 32px;
  display: grid;
  /* "Founded in Abu Dhabi." is 10 em wide: on phones the size follows the screen so each line stays whole */
  font-size: min(var(--text-display), calc((100vw - 2 * var(--gutter)) / 10.4));
  font-weight: 600;
  letter-spacing: var(--track-heading);
  line-height: 1.04;
}
.statement span + span { color: var(--steel-light); }

/* ---------- Leadership: the founder's portrait left, name and bio right (the user, 2026-10-27) ---------- */
.leader { row-gap: 40px; align-items: center; }
.leader__photo { grid-column: 1 / span 5; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: var(--night); }
.leader__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.leader__copy { grid-column: 7 / -1; display: grid; gap: 24px; justify-items: start; container-type: inline-size; }
/* The name always sits on one line (the user, 2026-10-27): it is 10.4 em wide, so below the heading size it follows its column */
.leader__copy .h2 { white-space: nowrap; font-size: min(var(--text-heading), 100cqi / 10.8); }
.leader__role {
  font-family: var(--mono); font-size: var(--text-label); font-weight: 500;
  letter-spacing: var(--track-label); line-height: 1.3; text-transform: uppercase; text-wrap: balance;
  color: var(--steel-light);
}
.leader__bio { color: var(--steel-light); max-width: 52ch; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); }
/* Tablets keep the pair side by side, with the copy taking one more column. Phones stack in one column: the pill first,
   then the photo, smaller and on the left edge, then the name and bio (the user, 2026-10-27). The copy block dissolves into that
   column so the pill can move up; the section becomes the width container that keeps the name on one line. */
@media (max-width: 1000px) { .leader__copy { grid-column: 6 / -1; } }
@media (max-width: 640px) {
  .leader { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; container-type: inline-size; }
  .leader__copy { display: contents; }
  .leader .pill { order: -1; }
  .leader__photo { width: min(75%, 300px); margin-block: 8px 16px; }   /* left, on the same edge as the text (the user, 2026-10-27) */
}

/* ---------- Contact: copy left, the enquiry form right ---------- */
.contact {
  position: relative;
  overflow: hidden;
  padding-block: var(--section);
  border-top: 1px solid var(--line);
}
/* The 45° field fills the empty band above the content, fading in from the left; never behind text */
.contact__field {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--section) - 24px);
  background: repeating-linear-gradient(45deg, var(--night) 0 1px, transparent 1px 16px);
  -webkit-mask-image: linear-gradient(to right, transparent 30%, #000);
  mask-image: linear-gradient(to right, transparent 30%, #000);
}
.contact__body { position: relative; row-gap: 56px; align-items: start; }
.contact__copy { grid-column: 1 / span 5; display: grid; gap: 24px; justify-items: start; }
.contact__text { color: var(--steel-light); max-width: 44ch; }
.contact__details { display: grid; gap: 20px; margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--line); width: 100%; }

.enquiry { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
.field { display: grid; gap: 10px; align-content: start; }
.field--wide, .enquiry__foot { grid-column: 1 / -1; }
.field label {
  font-family: var(--mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--steel-light);
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background: var(--night);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ivory);
  font: 400 1rem/1.4 var(--sans);   /* 16 px: no zoom on iPhone */
  transition: border-color 160ms ease, background-color 160ms ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23AAB6C6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field select:invalid { color: var(--steel-light); }
.field option { color: var(--ivory); background: var(--night); }
.field :focus-visible { outline: 2px solid var(--ivory); outline-offset: 2px; border-color: var(--steel-light); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { font-size: var(--text-small); color: var(--error); }
.enquiry__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.enquiry__status { color: var(--steel-light); font-size: var(--text-small); max-width: 44ch; }
.enquiry__privacy { grid-column: 1 / -1; color: var(--steel-light); font-size: var(--text-small); }
.enquiry .btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }
@media (max-width: 1000px) { .contact__copy, .enquiry { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .enquiry { grid-template-columns: 1fr; }
  .enquiry .btn { position: relative; width: 100%; min-height: 52px; padding: 0 48px; }
  .enquiry .btn__arrow { position: absolute; right: 10px; top: 50%; margin-top: -16px; }
}

/* ---------- Footer (the user, 2026-10-27, from their mockup): the ribbons behind, the logo large with the brand line
   smaller beneath it, Contact and Menu between hairlines, then the base ---------- */
.footer { position: relative; overflow: hidden; background: var(--midnight); border-top: 1px solid var(--line); }
.footer__media { position: absolute; inset: 0; pointer-events: none; }
.footer__media picture { position: absolute; inset: 0; }
.footer__media img { width: 100%; height: 100%; object-fit: cover; object-position: right top; }
/* Midnight along the foot and the left, so every line of text sits on dark ground */
.footer__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--midnight) 0%, rgb(13 20 32 / 0.85) 30%, rgb(13 20 32 / 0) 62%),
    linear-gradient(90deg, rgb(13 20 32 / 0.6) 0%, rgb(13 20 32 / 0) 50%);
}
/* Wide screens: the ribbons reach down behind the columns, so a soft Midnight pool sits under them; the upper ribbons stay bright */
@media (min-width: 1001px) {
  .footer__media::after {
    background:
      radial-gradient(ellipse 42% 46% at 72% 64%, rgb(13 20 32 / 0.9) 0%, rgb(13 20 32 / 0.75) 55%, rgb(13 20 32 / 0) 100%),
      linear-gradient(0deg, var(--midnight) 0%, rgb(13 20 32 / 0.85) 30%, rgb(13 20 32 / 0) 62%),
      linear-gradient(90deg, rgb(13 20 32 / 0.6) 0%, rgb(13 20 32 / 0) 50%);
  }
}
.footer__main, .footer__base { position: relative; }   /* above the picture */
.footer__main {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 56px; align-items: end;
  padding-block: clamp(160px, 17vw, 280px) clamp(64px, 6vw, 96px);
}
/* The logo leads; the brand line is clearly the smaller voice */
.footer__brand { grid-column: 1 / span 6; display: grid; gap: 28px; justify-items: start; }
.footer__logo { width: clamp(240px, 27vw, 390px); height: auto; }
/* Wide screens: the logo fills most of its half, so it holds the left against the two columns (the user, 2026-10-27) */
@media (min-width: 1001px) { .footer__logo { width: clamp(390px, 36vw, 36rem); } }   /* rem cap: grows with the big-screen root */
.footer__line { font-size: var(--text-lead); font-weight: 300; letter-spacing: var(--track-title); line-height: 1.2; color: var(--steel-light); }
/* Two columns, each opened by a hairline, as in the mockup */
.footer__col { align-self: stretch; padding-left: 32px; border-left: 1px solid var(--line); }
.footer__contact { grid-column: 7 / span 3; display: grid; gap: 24px; align-content: start; margin: 0; }
.footer__nav { grid-column: 10 / span 3; display: grid; gap: 8px; align-content: start; }
.footer__label { margin: 0; }
.footer__contact dd { margin: 8px 0 0; color: var(--ivory); }
/* A 44 px tap area for the email; the negative margin keeps the line where it was */
.footer__contact a { display: inline-block; padding-block: 11px; margin-block: -11px; transition: text-decoration-color 160ms ease, transform 160ms var(--ease-out); }
.footer__time { font-variant-numeric: tabular-nums; }   /* the minutes change without the line shifting; shows only with script */
.footer__nav ul { margin: 0; }
.footer__nav a {
  display: inline-flex; align-items: center; min-height: 44px;   /* every link a full tap area */
  color: var(--ivory); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px;
  font-family: var(--mono); font-size: var(--text-small); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase;
  transition: text-decoration-color 160ms ease, transform 160ms var(--ease-out);
}
/* © on the left, Back to top on the right, on one row at every width. The rule starts and ends with the content. */
.footer__base {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-block: 12px 20px;   /* Back to top's 44 px tap area makes up the rest */
  background: linear-gradient(var(--line), var(--line)) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px no-repeat;
  font-family: var(--mono); font-size: var(--text-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--steel-light);
}
.footer__top {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px;
  color: var(--steel-light); text-decoration: none;
  transition: color 160ms ease, transform 160ms var(--ease-out);
}
.footer__arrow { display: inline-block; transition: translate 200ms var(--ease-out); }

/* Tablets: the logo on its own row, then the two columns side by side */
@media (max-width: 1000px) {
  .footer__brand { grid-column: 1 / -1; }
  .footer__contact { grid-column: 1 / span 6; padding-left: 0; border-left: 0; }
  .footer__nav { grid-column: 7 / -1; }
}
/* Phones: the upright ribbons (their own picture, the user's, 2026-10-27) behind the whole footer, the logo under
   the bright part, then each column under a hairline */
@media (max-width: 760px) {
  /* At its own shape, from the top: the bright crossing sits above the logo, the lower curves fade out behind the columns */
  .footer__media { bottom: auto; aspect-ratio: 941 / 1672; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
  .footer__media img { object-position: 50% 0; }
  .footer__media::after { background: linear-gradient(90deg, rgb(13 20 32 / 0.55) 0%, rgb(13 20 32 / 0) 75%); }
  .footer__main { row-gap: 40px; padding-top: 64vw; }
  .footer__brand { gap: 20px; }
  .footer__contact, .footer__nav { grid-column: 1 / -1; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .footer__contact { grid-template-columns: 1fr 1fr; gap: 24px var(--col-gap); }
  .footer__email { grid-column: 1 / -1; }
  .footer__nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--col-gap); }
}

/* ---------- Press and hover ---------- */
/* Press feedback everywhere it can be pressed */
.btn:active, .nav__list a:active, .nav__contact:active, .masthead__toggle:active,
.footer__nav a:active, .footer__top:active, .footer__contact a:active { transform: scale(0.97); }

/* Arriving from a link to a discipline: the card you asked for is outlined */
.card:target { box-shadow: inset 0 0 0 1px var(--steel-light); }

/* Hover only where there is a real pointer, so taps don't leave sticky hover states */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: color-mix(in srgb, var(--champagne) 82%, var(--ivory)); }
  .btn--primary:hover .btn__arrow { translate: 2px 0; }
  .btn--line:hover { border-color: var(--steel-light); }
  .btn--dark:hover { background: var(--night); }
  .btn--dark:hover .btn__arrow { translate: 2px 0; }
  .step__toggle:hover .step__icon { color: var(--midnight); }
  .nav__list a:hover { color: var(--ivory); }
  .nav__contact:hover { background: var(--pewter); }
  .card:hover::after { opacity: 1; }
  .card:hover .card__media img { transform: scale(1.04); }
  .field input:hover, .field select:hover, .field textarea:hover { border-color: rgb(170 182 198 / 0.45); }
  .footer__top:hover { color: var(--ivory); }
  .footer__nav a:hover { text-decoration-color: var(--steel-light); }
  .contact__details a:hover, .footer__contact a:hover { text-decoration-color: var(--ivory); }
  .footer__top:hover .footer__arrow { translate: 0 -2px; }
}

/* Reduced motion: keep the fades, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .js .nav.is-open { transition: opacity 200ms ease; }
  @starting-style { .js .nav.is-open { transform: none; } }
  .step__panel, .js .step:not(.is-open) .step__panel, .step__icon { transition: none; }
}