/* ==========================================================================
   Uno Interiors — site stylesheet
   One stylesheet for every page. Colours, type and spacing are set as
   tokens in :root; change them here and the whole site follows.
   ========================================================================== */

/* BRAND FONTS (self-hosted, no third-party requests)
   Plus Jakarta Sans: headings and body. One variable file covers 400–700.
   IBM Plex Mono: small uppercase labels only.
   Both are free under the SIL Open Font License. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fallbacks sized to the same proportions, so text doesn't jump when the fonts arrive */
@font-face { font-family: "Jakarta Fallback"; src: local("Arial"), local("Helvetica"); size-adjust: 103.9%; ascent-override: 100%; descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Courier New"), local("Courier"); size-adjust: 100%; ascent-override: 103%; descent-override: 28%; line-gap-override: 0%; }

:root {
  /* Brand colours (taken from the logo files) */
  --navy: #120c24;
  --navy-2: #1b1533;          /* raised navy for cards on dark bands */
  --mint: #10cc97;
  --mint-deep: #0a7d5d;       /* mint darkened for text and links on light backgrounds */

  /* Neutrals */
  --ground: #f3f5f4;          /* page background, faint mint bias */
  --paper: #ffffff;
  --ink: #120c24;
  --muted: #57536a;
  --line: #dde1df;
  --on-dark: #f4f3f8;
  --on-dark-muted: #b9b5c8;
  --line-dark: rgba(244, 243, 248, 0.16);
  /* Borders that mark a control (fields, outline buttons, filters): at least 3:1 */
  --control-line: #858197;
  --control-line-dark: rgba(244, 243, 248, 0.42);

  /* Placeholder marker: anything still to be written */
  --ph-bg: rgba(16, 204, 151, 0.16);
  --ph-line: #0a7d5d;

  /* Type */
  --sans: "Plus Jakarta Sans", "Jakarta Fallback", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Plex Mono Fallback", "Courier New", monospace;

  --step--1: clamp(0.8rem, 0.77rem + 0.12vw, 0.875rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --step-3: clamp(1.8rem, 1.35rem + 2vw, 3rem);
  --step-4: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem);

  /* Spacing and layout */
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  /* One two-column grid for the whole site: 5/12 + 7/12, so every
     right-hand column starts at the same line on every page. */
  --cols-2: minmax(0, 5fr) minmax(0, 7fr);
  --col-gap: clamp(2rem, 1rem + 4vw, 5rem);
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --max: 80rem;
  --radius: 4px;
  --header-h: 4.5rem;

  color-scheme: light;
}

@media (min-width: 640px) {
  :root { --gutter: max(2rem, env(safe-area-inset-left, 0px)); --gutter-r: max(2rem, env(safe-area-inset-right, 0px)); }
}
@media (min-width: 1100px) {
  :root { --gutter: max(3rem, env(safe-area-inset-left, 0px)); --gutter-r: max(3rem, env(safe-area-inset-right, 0px)); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: contents; }
a { color: var(--mint-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; font-weight: 650; text-wrap: balance; }
h1 { font-size: var(--step-4); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--mint); color: var(--navy); padding: 0.75rem 1rem; z-index: 100; font-weight: 600; }
.skip-link:focus { left: 1rem; top: 1rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Placeholder text: styled as normal text. Search the code for class="ph"
   to find every one before launch. */
.ph { }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) + var(--gutter-r)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.section { padding-block: var(--section); }
.section.tight { padding-block: calc(var(--section) * 0.6); }
.section.paper { background: var(--paper); }
.dark { background: var(--navy); color: var(--on-dark); }
.dark a:not(.btn) { color: var(--mint); }
.dark a:not(.btn):hover { color: var(--on-dark); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--mint-deep);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: currentColor; }
.dark .eyebrow, .page-hero .eyebrow, .hero .eyebrow { color: var(--mint); }

.lede { font-size: var(--step-1); line-height: 1.55; color: var(--muted); max-width: 40rem; }
.dark .lede { color: var(--on-dark-muted); }
.prose { max-width: 42rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: var(--step-2); }
.prose h3 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.muted { color: var(--muted); }

.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 46rem; }
.section-head.split { max-width: none; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .section-head.split { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font: 600 var(--step-0) / 1 var(--sans);
  padding: 0.95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--mint); color: var(--navy); }
.btn-primary:hover { background: #2bd8a6; color: var(--navy); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.dark .btn-ghost, .page-hero .btn-ghost, .hero .btn-ghost, .cta-band .btn-ghost { border-color: var(--line-dark); color: var(--on-dark); }
.dark .btn-ghost:hover, .page-hero .btn-ghost:hover, .hero .btn-ghost:hover, .cta-band .btn-ghost:hover { border-color: var(--on-dark); color: var(--on-dark); }
.btn .arrow { transition: transform 0.15s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.text-link { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.text-link::after { content: "→"; transition: transform 0.15s ease; }
.text-link:hover::after { transform: translateX(3px); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--navy);
  color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); background: var(--navy); z-index: 60; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: block; flex: none; }
.brand img { width: 11.5rem; height: auto; }
.nav { display: none; }
.nav-list { list-style: none; display: flex; align-items: center; gap: 0.25rem; }
.nav-list > li { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.6rem 0.8rem; border-radius: var(--radius);
  color: var(--on-dark); text-decoration: none; font-weight: 500; font-size: 0.95rem;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--mint); }
.nav-link .chev { width: 0.6rem; height: 0.6rem; transition: transform 0.2s ease; }
.has-menu.open .chev { transform: rotate(180deg); }
.submenu {
  position: absolute; top: calc(100% + 0.5rem); left: -0.5rem;
  min-width: 19rem; padding: 0.6rem;
  background: var(--navy-2); border: 1px solid var(--line-dark); border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.has-menu.open .submenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.submenu a { display: block; padding: 0.7rem 0.8rem; border-radius: var(--radius); color: var(--on-dark); text-decoration: none; }
.submenu a:hover { background: rgba(255,255,255,0.06); color: var(--mint); }
.submenu small { display: block; color: var(--on-dark-muted); font-size: 0.82rem; line-height: 1.4; margin-top: 0.15rem; }
.header-cta { display: none; }
.menu-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: none; border: 1px solid var(--line-dark); color: var(--on-dark);
  border-radius: 999px; padding: 0.55rem 1rem; font: 500 0.95rem var(--sans); cursor: pointer;
}
.menu-toggle .bars { width: 1.1rem; height: 0.7rem; position: relative; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 0.2s ease, top 0.2s ease; }
.menu-toggle .bars::before { top: 0; } .menu-toggle .bars::after { top: calc(100% - 2px); }
.menu-open .menu-toggle .bars::before { top: calc(50% - 1px); transform: rotate(45deg); }
.menu-open .menu-toggle .bars::after { top: calc(50% - 1px); transform: rotate(-45deg); }

/* Mobile menu panel */
.mobile-nav {
  position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 49;
  background: var(--navy); color: var(--on-dark);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem var(--gutter-r) calc(2rem + env(safe-area-inset-bottom, 0px)) var(--gutter);
}
.mobile-nav ul { list-style: none; }
.mobile-nav > ul > li { border-bottom: 1px solid var(--line-dark); }
.mobile-nav a { display: block; padding: 1rem 0; color: var(--on-dark); text-decoration: none; font-size: 1.2rem; font-weight: 600; }
.mobile-nav .sub a { font-size: 1rem; font-weight: 500; color: var(--on-dark-muted); padding: 0.55rem 0 0.55rem 1rem; }
.mobile-nav .sub { padding-bottom: 0.75rem; }
.mobile-nav .btn { margin-top: 1.75rem; width: 100%; }
.mobile-nav .contact-lines { margin-top: 1.5rem; color: var(--on-dark-muted); font-size: 0.95rem; }
body.menu-open { overflow: hidden; }

@media (min-width: 1100px) {
  .nav { display: block; }
  .header-cta { display: inline-flex; padding: 0.75rem 1.25rem; }
  .menu-toggle, .mobile-nav { display: none !important; }
}

/* ---------- Home hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--on-dark);
  min-height: min(92vh, 56rem);
  display: flex; align-items: flex-end;
}
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(18,12,36,.92) 0%, rgba(18,12,36,.78) 32%, rgba(18,12,36,.25) 62%, rgba(18,12,36,.1) 100%),
    linear-gradient(0deg, rgba(18,12,36,.85) 0%, rgba(18,12,36,0) 35%);
}
.hero-inner { padding-block: clamp(6rem, 12vh, 9rem) clamp(3rem, 7vh, 5rem); width: 100%; }
.hero h1 { max-width: 15ch; }
.hero h1 em { font-style: normal; color: var(--mint); }
.hero .lede { margin-top: 1.5rem; max-width: 34rem; color: var(--on-dark-muted); }
.hero .btn-row { margin-top: 2.25rem; }
.hero-foot {
  margin-top: clamp(3rem, 8vh, 5rem); padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-muted);
}
.hero-foot strong { color: var(--on-dark); font-weight: 500; }
@media (max-width: 760px) {
  .hero { min-height: 0; display: block; }
  .hero-media { position: relative; height: 46vh; min-height: 18rem; }
  .hero::after { inset: 0 0 auto 0; height: 46vh; min-height: 18rem; background: linear-gradient(180deg, rgba(18,12,36,.1) 40%, rgba(18,12,36,.8) 85%, var(--navy) 100%); }
  .hero-inner { padding-top: 0; margin-top: -4rem; position: relative; }
}

/* ---------- Inner page hero ---------- */
.page-hero { background: var(--navy); color: var(--on-dark); position: relative; isolation: isolate; overflow: hidden; }
.page-hero .container { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 6vw, 5rem); }
.page-hero h1 { font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); max-width: 18ch; }
.page-hero .lede { margin-top: 1.25rem; color: var(--on-dark-muted); }
.page-hero .btn-row { margin-top: 2rem; }
.page-hero.with-image { min-height: clamp(26rem, 60vh, 38rem); display: flex; align-items: flex-end; }
.page-hero.with-image img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.page-hero.with-image::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,12,36,.94) 0%, rgba(18,12,36,.8) 38%, rgba(18,12,36,.35) 75%, rgba(18,12,36,.25) 100%), linear-gradient(0deg, rgba(18,12,36,.7), rgba(18,12,36,0) 40%); }
.page-hero.with-image .container { width: 100%; }
@media (max-width: 760px) {
  .page-hero.with-image::after { background: linear-gradient(180deg, rgba(18,12,36,.55) 0%, rgba(18,12,36,.85) 55%, rgba(18,12,36,.95) 100%); }
}
.breadcrumb { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.breadcrumb a { color: var(--on-dark-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--mint); }
.breadcrumb span[aria-hidden] { opacity: 0.5; }

/* ---------- Grids and cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid-2, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Sector card: image with title over a shade */
.sector-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 26rem; padding: 1.5rem;
  border-radius: var(--radius);
  color: var(--on-dark); text-decoration: none;
  background: var(--navy);
}
.sector-card img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.sector-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18,12,36,0) 20%, rgba(18,12,36,.7) 50%, rgba(18,12,36,.94) 100%); }
.sector-card:hover img { transform: scale(1.04); }
.sector-card .num { font-family: var(--mono); font-size: var(--step--1); color: var(--mint); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; }
.sector-card h3 { font-size: var(--step-2); }
.sector-card p { margin-top: 0.6rem; color: var(--on-dark-muted); font-size: 0.95rem; line-height: 1.5; }
.sector-card .text-link { margin-top: 1rem; color: var(--mint); }
.sector-card:hover { color: var(--on-dark); }

/* Plain card */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.dark .card { background: var(--navy-2); border-color: var(--line-dark); }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--muted); }
.dark .card p { color: var(--on-dark-muted); }
.card .icon { width: 2.5rem; height: 2.5rem; color: var(--mint-deep); margin-bottom: 0.25rem; }
.dark .card .icon { color: var(--mint); }
.card ul { list-style: none; display: grid; gap: 0.45rem; margin-top: 0.25rem; }
.card li { padding-left: 1.2rem; position: relative; color: var(--muted); }
.dark .card li { color: var(--on-dark-muted); }
.card li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.45rem; height: 1px; background: var(--mint-deep); }
.dark .card li::before { background: var(--mint); }
.card .text-link { margin-top: auto; padding-top: 0.5rem; }

/* Project card */
.project-card { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: var(--ink); min-width: 0; }
.project-card .media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 3; background: var(--line); max-width: 100%; }
.project-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(.2,.7,.2,1); }
.project-card:hover .media img { transform: scale(1.04); }
.project-card .meta { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-deep); }
.project-card h3 { font-size: var(--step-1); }
.project-card p { color: var(--muted); font-size: 0.95rem; }
.project-card:hover h3 { color: var(--mint-deep); }
.dark .project-card { color: var(--on-dark); }
.dark .project-card .meta { color: var(--mint); }
.dark .project-card p { color: var(--on-dark-muted); }

/* Split: text beside image */
.split { display: grid; gap: 2.5rem var(--col-gap); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .split { grid-template-columns: var(--cols-2); } .split.reverse .split-media { order: -1; } }
.split-media { position: relative; }
.split-media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius); max-width: 100%; }
.split-media .tag {
  position: absolute; left: 1rem; bottom: 1rem;
  background: var(--navy); color: var(--on-dark);
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.5rem 0.75rem; border-radius: 2px;
}
.split-body > * + * { margin-top: 1.1rem; }
.split-body .btn-row, .split-body .text-link { margin-top: 1.75rem; }

/* Tick list */
.ticks { list-style: none; display: grid; gap: 0.7rem; }
.ticks li { position: relative; padding-left: 1.9rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23120c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
.ticks.cols { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ticks.cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }

/* Facts strip */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { padding: clamp(1.25rem, 3vw, 2.25rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.fact .value { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.fact .value small { font-size: 0.45em; font-weight: 600; letter-spacing: 0; margin-left: 0.15em; }
.fact .label { margin-top: 0.75rem; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.dark .facts, .dark .fact { border-color: var(--line-dark); }
.dark .fact .label { color: var(--on-dark-muted); }
.dark .fact .value { color: var(--on-dark); }

/* Process steps (a real sequence, so numbered) */
.steps { list-style: none; counter-reset: step; display: grid; gap: 0; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem var(--col-gap); padding-block: clamp(1.25rem, 2.5vw, 1.75rem); border-top: 1px solid var(--line); }
.steps > li:last-child { border-bottom: 1px solid var(--line); }
.steps h3 { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: baseline; }
.steps h3::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); font-size: var(--step--1); font-weight: 400; letter-spacing: 0.06em; color: var(--mint-deep); }
.steps p { padding-left: 3rem; }
.steps p { color: var(--muted); }
@media (min-width: 900px) { .steps > li { grid-template-columns: var(--cols-2); } .steps p { padding-left: 0; } }
.dark .steps > li { border-color: var(--line-dark); }
.dark .steps h3::before { color: var(--mint); }
.dark .steps p { color: var(--on-dark-muted); }

/* Quote */
.quote { max-width: 52rem; }
.quote blockquote { margin: 0; font-size: var(--step-2); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; }
.quote blockquote::before { content: "“"; display: block; font-size: 4rem; line-height: 0.6; color: var(--mint); margin-bottom: 0.75rem; }
.quote figcaption { margin-top: 1.5rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.dark .quote figcaption { color: var(--on-dark-muted); }

/* Logo / accreditation row */
.logo-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 700px) { .logo-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .logo-row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.logo-slot {
  display: grid; place-items: center; text-align: center;
  min-height: 5.5rem; padding: 1rem;
  border: 1px dashed var(--line); border-radius: var(--radius);
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem;
  padding: 1.35rem 0; font-weight: 600; font-size: var(--step-1); line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 1.6rem; height: 1.6rem; margin-top: 0.05rem; border-radius: 50%;
  border: 1px solid var(--line);
  background: linear-gradient(var(--ink), var(--ink)) center / 0.7rem 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.5px 0.7rem no-repeat;
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding-bottom: 1.5rem; color: var(--muted); max-width: 46rem; }
.faq .answer > * + * { margin-top: 0.8em; }

/* CTA band */
.cta-band { background: var(--navy); color: var(--on-dark); position: relative; overflow: hidden; isolation: isolate; }
.cta-band::before {
  content: ""; position: absolute; z-index: -1;
  width: 34rem; aspect-ratio: 1; right: -9rem; top: 50%; transform: translateY(-50%);
  background: var(--mint); opacity: 0.08;
  -webkit-mask: url("../brand/uno-symbol-800.webp") center / contain no-repeat;
  mask: url("../brand/uno-symbol-800.webp") center / contain no-repeat;
}
.cta-band .container { padding-block: clamp(4rem, 8vw, 6.5rem); display: grid; gap: 2rem; align-items: end; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cta-band .container { grid-template-columns: minmax(0, 1.4fr) auto; gap: 4rem; } }
.cta-band h2 { max-width: 18ch; }
.cta-band p { margin-top: 1rem; color: var(--on-dark-muted); max-width: 36rem; }

/* Filter buttons (projects) */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2.5rem; }
.filter {
  font: 500 0.95rem var(--sans); padding: 0.6rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer;
}
.filter:hover { border-color: var(--ink); }
.filter[aria-pressed="true"] { background: var(--navy); color: var(--on-dark); border-color: var(--navy); }
.project-grid .project-card[hidden] { display: none; }

/* Case study */
.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; padding: 2rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spec dt { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.spec dd { margin: 0.35rem 0 0; font-weight: 600; }
.gallery { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery .wide { grid-column: 1 / -1; } }
.gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4 / 3; max-width: 100%; }
.gallery .wide img { aspect-ratio: 16 / 8; }

/* Two-column content with sticky aside */
.with-aside { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .with-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } .with-aside aside { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }

/* Timeline (company history: a real sequence of dates) */
.timeline { list-style: none; position: relative; display: grid; gap: 2.25rem; padding-left: 2rem; }
.timeline::before { content: ""; position: absolute; left: 0.35rem; top: 0.5rem; bottom: 0.5rem; width: 1px; background: var(--line); }
.timeline li { position: relative; }
.timeline li::before { content: ""; position: absolute; left: -2rem; top: 0.45rem; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--ground); border: 2px solid var(--mint-deep); }
.timeline .year { font-family: var(--mono); font-size: var(--step--1); color: var(--mint-deep); letter-spacing: 0.06em; }
.timeline h3 { margin: 0.25rem 0 0.4rem; }
.timeline p { color: var(--muted); }
.timeline li.now::before { background: var(--mint); border-color: var(--mint); }

/* Person */
.person { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.portrait { max-width: 22rem; }
@media (min-width: 900px) { .person { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); } }
.portrait {
  aspect-ratio: 4 / 5; max-width: 100%; border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, rgba(18,12,36,.04) 0 10px, transparent 10px 20px), #e7ebe9;
  border: 1px dashed var(--line);
  display: grid; place-items: center; text-align: center; padding: 1rem;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.25rem; }
.form-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field label, .field legend { font-weight: 600; font-size: 0.95rem; }
.field .hint { color: var(--muted); font-size: 0.875rem; font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.85rem 1rem; min-height: 3.1rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23120c24' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.75rem; padding-right: 2.5rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--mint); outline-offset: 0; border-color: transparent; }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field .error { color: #b3261e; font-size: 0.875rem; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.choice-grid { display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); cursor: pointer; font-weight: 500; }
.choice:has(input:checked) { border-color: var(--mint-deep); box-shadow: inset 0 0 0 1px var(--mint-deep); }
.choice input { accent-color: var(--mint-deep); width: 1.1rem; height: 1.1rem; margin: 0; }
.hp { position: absolute; left: -9999px; }
.form-status { padding: 1rem 1.25rem; border-radius: var(--radius); background: rgba(16,204,151,.12); border: 1px solid var(--mint-deep); color: var(--ink); }
.form-status.error { background: rgba(179,38,30,.06); border-color: #b3261e; }
.small-print { font-size: 0.875rem; color: var(--muted); }

/* Contact details block */
.contact-list { list-style: none; display: grid; gap: 1.5rem; }
.contact-list dt, .contact-list .k { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.contact-list .v { margin-top: 0.3rem; font-weight: 600; font-size: var(--step-1); line-height: 1.4; }
.contact-list .v a { color: var(--ink); text-decoration: none; }
.contact-list .v a:hover { color: var(--mint-deep); }
.map-card { display: block; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy); color: var(--on-dark); padding: 1.5rem; text-decoration: none; min-height: 12rem; }
.map-card::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 2rem 2rem; opacity: 0.5; }
.map-card .pin { position: absolute; right: 2rem; top: 2rem; width: 2.75rem; height: 2.75rem; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--mint); }
.map-card span { position: relative; display: block; }
.map-card .text-link { margin-top: 0.75rem; color: var(--mint); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy); color: var(--on-dark-muted); font-size: 0.95rem; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--mint); }
.footer-top { display: grid; gap: 2.5rem; padding-block: clamp(3.5rem, 7vw, 5.5rem) 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .footer-top { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 3rem; } }
.footer-brand img { width: 12rem; }
.footer-brand p { margin-top: 1.25rem; max-width: 22rem; }
.footer-brand .heritage { margin-top: 1rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); }
.site-footer h2 { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); margin-bottom: 1rem; }
.site-footer ul { list-style: none; display: grid; gap: 0.55rem; }
.socials { display: flex; gap: 0.6rem; margin-top: 1.5rem; }
.socials a { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; }
.socials a:hover { border-color: var(--mint); }
.socials svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.footer-legal { border-top: 1px solid var(--line-dark); padding-block: 1.75rem calc(1.75rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: 1rem; font-size: 0.85rem; line-height: 1.55; }
@media (min-width: 900px) { .footer-legal { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 3rem; } }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }

/* ==========================================================================
   Motion
   Subtle and CSS-led. Content never starts hidden unless the script has
   checked it is below the fold, so nothing flashes and the first view is
   never delayed. Everything is switched off for "reduce motion" users.
   ========================================================================== */

/* Fade up as sections scroll into view (classes added by site.js) */
.js .rv { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity 0.9s cubic-bezier(.2,.65,.25,1), transform 0.9s cubic-bezier(.2,.65,.25,1); transition-delay: calc(var(--rv, 0) * 90ms); }
.js .rv.in { opacity: 1; transform: none; }

/* Page-to-page transitions (Chrome, Edge, Safari; others simply load the page) */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out 0.28s ease both; }
::view-transition-new(root) { animation: vt-in 0.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translate3d(0, 14px, 0); } }

/* Heading lines rising on first load */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } }
.rise { animation: rise 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * 1ms); }

/* The Uno symbol: four arrows converging on the centre */
.mark { position: relative; width: var(--mark, 9rem); aspect-ratio: 1; max-width: 100%; flex: none; }
.mark span {
  position: absolute; width: 50%; height: 50%;
  background: url("../brand/uno-symbol-800.webp") no-repeat; background-size: 200% 200%;
  animation: converge 1.5s cubic-bezier(.16,.84,.24,1) both; animation-delay: calc(var(--d, 0) * 1ms);
}
.mark span:nth-child(1) { top: 0; left: 0; background-position: 0 0; --x: -1; --y: -1; }
.mark span:nth-child(2) { top: 0; right: 0; background-position: 100% 0; --x: 1; --y: -1; }
.mark span:nth-child(3) { bottom: 0; left: 0; background-position: 0 100%; --x: -1; --y: 1; }
.mark span:nth-child(4) { bottom: 0; right: 0; background-position: 100% 100%; --x: 1; --y: 1; }
@keyframes converge { from { opacity: 0; transform: translate(calc(var(--x) * 55%), calc(var(--y) * 55%)) rotate(calc(var(--x) * var(--y) * 8deg)); } }
.js .mark.on-view span { animation-play-state: paused; }
.js .mark.on-view.in span { animation-play-state: running; }

/* ==========================================================================
   Concept components
   ========================================================================== */

/* Home hero: from the bench to the building */
.hero-x { min-height: min(100vh, 60rem); }
.hero-x .hero-media img { object-position: center 55%; }
.hero-x::after {
  background:
    linear-gradient(90deg, rgba(18,12,36,.9) 0%, rgba(18,12,36,.62) 45%, rgba(18,12,36,.2) 100%),
    linear-gradient(0deg, rgba(18,12,36,.92) 0%, rgba(18,12,36,0) 45%);
}
.hero-x h1 { font-size: clamp(2.8rem, 1.4rem + 6.4vw, 7.5rem); line-height: 1.02; letter-spacing: -0.045em; max-width: none; }
.hero-x h1 .line { display: block; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.hero-x .mark { --mark: clamp(4.5rem, 3rem + 6vw, 10rem); margin-top: 0.5rem; }
.page-hero .hero-top .mark { --mark: clamp(3.5rem, 2.5rem + 4vw, 7rem); }
.hero-copy { display: grid; gap: 2rem; margin-top: 2rem; grid-template-columns: minmax(0, 36rem); justify-items: start; }
.hero-copy .lede, .hero-copy .btn-row { margin: 0; }
.scroll-cue { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-dark-muted); text-decoration: none; }
.scroll-cue::after { content: ""; width: 1px; height: 2.5rem; background: linear-gradient(var(--mint), transparent); animation: cue 2.4s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero-top .eyebrow { margin-bottom: 0; }
.hero-top + h1 { margin-top: 1.5rem; }
@media (max-width: 600px) {
  .hero-top { align-items: center; }
  .hero-top .mark, .page-hero .hero-top .mark { --mark: 3.25rem; margin-top: 0; }
  .hero-x .scroll-cue { display: none; }
}
.film-note { position: absolute; right: var(--gutter-r); top: calc(var(--header-h) * 0.4); }

/* Editorial statement */
.statement { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.1rem); line-height: 1.18; letter-spacing: -0.025em; font-weight: 550; max-width: 30ch; text-wrap: pretty; }
.statement em { font-style: normal; color: var(--mint-deep); }
.statement-meta { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; align-items: center; }

/* Design / Make / Fit (a real sequence) */
.dmf { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: minmax(0, 1fr); counter-reset: dmf; }
@media (min-width: 800px) { .dmf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 799.98px) {
  .dmf { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 22rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-right: calc(var(--gutter-r) * -1); padding-right: var(--gutter-r); scroll-padding-left: 0; }
  .dmf::-webkit-scrollbar { display: none; }
  .dmf article { scroll-snap-align: start; }
}
.dmf article { counter-increment: dmf; min-width: 0; }
.dmf .media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; max-width: 100%; }
.dmf .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.dmf article:hover .media img { transform: scale(1.04); }
.dmf h3 { display: flex; align-items: baseline; gap: 0.9rem; margin-top: 1.25rem; font-size: var(--step-2); }
.dmf h3::before { content: counter(dmf, decimal-leading-zero); font-family: var(--mono); font-size: var(--step--1); font-weight: 400; color: var(--mint-deep); letter-spacing: 0.06em; }
.dmf p { margin-top: 0.6rem; color: var(--muted); max-width: 30rem; }

/* Sector list with image peek on hover */
.sector-list { list-style: none; border-top: 1px solid var(--line-dark); }
.sector-row {
  position: relative; display: grid; align-items: center; gap: 0.5rem 1.5rem;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  padding-block: clamp(1.25rem, 2.5vw, 2rem); border-bottom: 1px solid var(--line-dark);
  color: var(--on-dark); text-decoration: none;
}
.sector-row .thumb { width: 4.5rem; aspect-ratio: 1; overflow: hidden; border-radius: 2px; }
.sector-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.sector-row .title { font-size: clamp(1.4rem, 1rem + 2.4vw, 3.2rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; transition: transform 0.5s cubic-bezier(.2,.7,.2,1), color 0.3s ease; }
.sector-row .thumb { grid-column: 1; grid-row: 1 / span 2; }
.sector-row .title { grid-column: 2; grid-row: 1; }
.sector-row .go { grid-column: 3; grid-row: 1 / span 2; }
.sector-row .desc { grid-column: 2; grid-row: 2; color: var(--on-dark-muted); font-size: 0.95rem; max-width: 34rem; }
.sector-row .go { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.4s cubic-bezier(.2,.7,.2,1); }
.sector-row .go svg { width: 1rem; height: 1rem; }
.dark .sector-list .sector-row, .dark .sector-list .sector-row:hover { color: var(--on-dark); }
.sector-row:hover .title { color: var(--mint); transform: translateX(0.5rem); }
.sector-row:hover .go { background: var(--mint); border-color: var(--mint); color: var(--navy); transform: rotate(-45deg); }
@media (min-width: 900px) {
  .sector-row { grid-template-columns: 5rem minmax(0, 1.3fr) minmax(0, 1fr) auto; }
  .sector-row .num { font-family: var(--mono); font-size: var(--step--1); color: var(--on-dark-muted); letter-spacing: 0.06em; }
  .sector-row .num { grid-column: 1; grid-row: 1; }
  .sector-row .title { grid-column: 2; grid-row: 1; }
  .sector-row .desc { grid-column: 3; grid-row: 1; }
  .sector-row .go { grid-column: 4; grid-row: 1; }
  .sector-row .thumb {
    position: absolute; z-index: 2; pointer-events: none;
    width: 17rem; aspect-ratio: 4 / 3; right: 6rem; top: 50%;
    opacity: 0; transform: translateY(-50%) scale(0.92) rotate(-3deg);
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(.2,.7,.2,1);
    box-shadow: 0 30px 60px rgba(0,0,0,.45);
  }
  .sector-row:hover .thumb { opacity: 1; transform: translateY(-50%) scale(1) rotate(-1.5deg); }
}
@media (max-width: 899px) { .sector-row .num { display: none; } }

/* Drawing to finished: comparison slider */
.compare { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; max-width: 100%; background: var(--line); --pos: 50%; user-select: none; touch-action: pan-y; }
.compare picture img, .compare > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .drawing { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare .drawing img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--mint); pointer-events: none; }
.compare .handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 3.25rem; height: 3.25rem; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%23120c24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 1.3rem no-repeat;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare input[type="range"]:focus-visible ~ .handle::after { outline: 3px solid var(--on-dark); outline-offset: 3px; }
.compare .tag { position: absolute; bottom: 1rem; z-index: 1; pointer-events: none; font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.45rem 0.7rem; border-radius: 2px; }
.compare .tag.l { left: 1rem; background: var(--paper); color: var(--ink); }
.compare .tag.r { right: 1rem; background: var(--navy); color: var(--on-dark); }

/* Featured project */
.feature { display: grid; gap: clamp(2rem, 4vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 900px) { .feature { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); } .feature .compare { order: 2; } }
.feature .meta { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-deep); }
.feature h3 { font-size: var(--step-3); margin-top: 0.75rem; }
.feature p { margin-top: 1rem; color: var(--muted); }
.feature .btn-row { margin-top: 2rem; }

/* Heritage band */
.heritage-band { background: var(--navy); color: var(--on-dark); overflow: hidden; position: relative; isolation: isolate; }
.heritage-band .container { padding-block: clamp(4rem, 9vw, 8rem); display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .heritage-band .container { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); } }
.big-year { font-size: clamp(5.5rem, 1rem + 13vw, 13rem); font-weight: 700; line-height: 0.8; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(244,243,248,0.32); font-variant-numeric: tabular-nums; }
.big-year span { color: var(--mint); -webkit-text-stroke: 0; }
.heritage-band p { color: var(--on-dark-muted); max-width: 32rem; }
.heritage-band h2 { margin-bottom: 1.25rem; }
.heritage-band .text-link { margin-top: 1.75rem; color: var(--mint); }

/* Editorial case study */
.case-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--on-dark); min-height: min(88vh, 54rem); display: flex; align-items: flex-end; }
.case-hero img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.case-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18,12,36,.92) 0%, rgba(18,12,36,.35) 45%, rgba(18,12,36,.1) 100%); }
.case-hero .container { width: 100%; padding-block: clamp(3rem, 7vw, 5.5rem); }
.case-hero h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 6.5rem); line-height: 1.02; letter-spacing: -0.045em; max-width: 16ch; }
.case-intro { display: grid; gap: clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .case-intro { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); } .case-intro .spec { order: -1; } }
.case-intro .statement { max-width: none; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.4rem); }
.case-intro .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 0; padding: 1.5rem 0 0; }
.chapter { display: grid; gap: 1rem var(--col-gap); grid-template-columns: minmax(0, 1fr); padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .chapter { grid-template-columns: var(--cols-2); } }
.chapter .prose { max-width: 42rem; }
.chapter h2 { font-size: var(--step-1); font-family: var(--mono); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-deep); }
.chapter .prose { font-size: var(--step-1); line-height: 1.6; }
.gallery-ed { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .gallery-ed { grid-template-columns: repeat(12, minmax(0, 1fr)); } .gallery-ed .g1 { grid-column: 1 / -1; } .gallery-ed .g2 { grid-column: 1 / 8; } .gallery-ed .g3 { grid-column: 8 / -1; margin-top: 6rem; } .gallery-ed .g4 { grid-column: 3 / 11; } }
.gallery-ed figure { margin: 0; min-width: 0; }
.gallery-ed img { width: 100%; height: auto; object-fit: cover; border-radius: var(--radius); max-width: 100%; }
.gallery-ed .g1 img { aspect-ratio: 16 / 8; } .gallery-ed .g2 img { aspect-ratio: 4 / 3; } .gallery-ed .g3 img { aspect-ratio: 4 / 5; } .gallery-ed .g4 img { aspect-ratio: 16 / 9; }
.gallery-ed figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--muted); }
.materials { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 700px) { .materials { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--col-gap); } }
.materials li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: center; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.materials .sw { width: 3rem; aspect-ratio: 1; border-radius: 2px; border: 1px solid var(--line); }
.materials strong { display: block; }
.materials span { color: var(--muted); font-size: 0.9rem; }
.next-project { position: relative; isolation: isolate; overflow: hidden; display: block; color: var(--on-dark); text-decoration: none; background: var(--navy); }
.next-project img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), opacity 0.6s ease; }
.next-project::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18,12,36,.9), rgba(18,12,36,.3)); }
.next-project .container { padding-block: clamp(4rem, 10vw, 8rem); }
.next-project .label { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); }
.next-project .name { display: block; margin-top: 0.75rem; font-size: clamp(2.2rem, 1.2rem + 4.5vw, 5.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.next-project:hover { color: var(--on-dark); }
.next-project:hover img { transform: scale(1.04); opacity: 0.6; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .mobile-nav, .cta-band, .site-footer .socials, .filters { display: none !important; }
  body { background: #fff; }
  .dark, .page-hero, .hero { background: #fff !important; color: #000 !important; }
}

/* ==========================================================================
   Concept: shared page parts
   ========================================================================== */

/* Every inner page header uses the same large type as the home page */
.page-hero h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 6.5rem); line-height: 1.02; letter-spacing: -0.045em; max-width: none; }
.page-hero h1 .line { display: block; }
.page-hero h1 em { font-style: normal; color: var(--mint); }
.page-hero .container { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.page-hero.with-image { min-height: min(90vh, 56rem); }
.page-hero .breadcrumb { margin-bottom: 2.5rem; }

/* Index list: rows separated by rules instead of boxed cards */
.index-list { list-style: none; border-top: 1px solid var(--line); }
.index-list > li { display: grid; gap: 0.75rem var(--col-gap); grid-template-columns: minmax(0, 1fr); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .index-list > li { grid-template-columns: var(--cols-2); } }
.index-list h3 { font-size: var(--step-2); letter-spacing: -0.025em; }
.index-list p { color: var(--muted); max-width: 40rem; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tags li { font-size: 0.85rem; padding: 0.35rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: var(--paper); }
.dark .index-list, .dark .index-list > li { border-color: var(--line-dark); }
.dark .index-list p { color: var(--on-dark-muted); }
.dark .tags li { border-color: var(--line-dark); color: var(--on-dark); background: transparent; }
.paper .tags li { background: var(--ground); }

/* Editorial split: tall image, offset from the text */
.split.editorial { align-items: start; }
.split.editorial .split-media img { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .split.editorial .split-body { padding-top: clamp(2rem, 6vw, 6rem); } .split.editorial h2 { font-size: var(--step-3); } }
.split-body > p { color: var(--muted); }
.dark .split-body > p { color: var(--on-dark-muted); }

/* Chapters: label left, text right */
.chapter .prose ul { padding-left: 1.2em; }
.chapter .prose > * + * { margin-top: 1em; }
.chapter:first-child { border-top: 0; padding-top: 0; }
.faq-chapter { border-top: 0; padding-block: 0; }

.dark .chapter { border-color: var(--line-dark); }
.dark .chapter h2 { color: var(--mint); }

/* Next page link */
.next-project .go-inline { display: inline-block; color: var(--mint); transition: transform 0.4s cubic-bezier(.2,.7,.2,1); }
.next-project:hover .go-inline { transform: translateX(0.5rem); }
.heritage-mark { margin-bottom: 2rem; }

/* Contact page */
.contact-wrap { display: grid; gap: clamp(2.5rem, 6vw, 6rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .contact-wrap { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); } .contact-wrap aside { order: -1; position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }

/* Sector rows on the shared grid: number and title left, description right */
.sector-row { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.25rem; }
.sector-row .l { grid-column: 2; grid-row: 1; display: flex; align-items: baseline; gap: 1rem; min-width: 0; }
.sector-row .r { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; }
.sector-row .go { flex: none; }
@media (max-width: 899px) { .sector-row .go { width: 2.5rem; height: 2.5rem; } }
@media (min-width: 900px) {
  .sector-row { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); }
  .sector-row .l { grid-column: 1; grid-row: 1; }
  .sector-row .r { grid-column: 2; grid-row: 1; gap: 2rem; }
  .sector-row .num { width: 3rem; flex: none; }
}

/* ---------- Spacing and alignment refinements ---------- */
/* Two sections with the same background in a row: don't double the gap */
main > .section:not(.paper):not(.dark) + .section:not(.paper):not(.dark),
main > .section.paper + .section.paper,
main > .section.dark + .section.dark { padding-top: 0; }
/* Navy band followed by the navy call to action: the list's last rule is the divider */

/* Lists in running text: dash markers sit on the grid line, text hangs after them */
.prose ul:not(.tags):not(.ticks), .chapter .prose ul:not(.tags):not(.ticks) { list-style: none; padding-left: 0; }
.prose ul:not(.tags):not(.ticks) > li { position: relative; padding-left: 1.4rem; }
.prose ul:not(.tags):not(.ticks) > li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.65rem; height: 1px; background: var(--mint-deep); }
.dark .prose ul:not(.tags):not(.ticks) > li::before { background: var(--mint); }
.prose .tags, .chapter .prose .tags { padding-left: 0; margin-top: 0; }
figure.quote { margin: 0; }
/* Footer on the same grid: brand left (5/12), link columns right (7/12) */
.footer-top { grid-template-columns: minmax(0, 1fr); }
.footer-cols { display: grid; gap: 2.5rem var(--col-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .footer-top { grid-template-columns: minmax(0, 1fr); } .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .footer-top { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); } .footer-cols { column-gap: 2rem; } }
/* Editorial gallery on the shared grid */
@media (min-width: 800px) {
  .gallery-ed { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); row-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .gallery-ed .g1 { grid-column: 1 / -1; }
  .gallery-ed .g2 { grid-column: 1; grid-row: 2 / span 2; }
  .gallery-ed .g3 { grid-column: 2; grid-row: 2; margin-top: 0; }
  .gallery-ed .g4 { grid-column: 2; grid-row: 3; }
  .gallery-ed .g2 img { aspect-ratio: 4 / 5; }
  .gallery-ed .g3 img { aspect-ratio: 16 / 10; }
  .gallery-ed .g4 img { aspect-ratio: 16 / 10; }
}
/* Footer: brand above the links until there's room for the email address in a third of the right column */
@media (min-width: 900px) and (max-width: 1239px) { .footer-top { grid-template-columns: minmax(0, 1fr); } .footer-cols { column-gap: var(--col-gap); } }
/* Very small phones (320–374px): smaller logo, tighter header, buttons may wrap */
.brand img { width: clamp(9rem, 6rem + 12vw, 11.5rem); }
@media (max-width: 374px) {
  .header-inner { gap: 0.75rem; }
  .menu-toggle { padding: 0.5rem 0.8rem; }
  .btn { white-space: normal; text-align: center; }
}
/* Call to action on the shared grid: heading left, buttons from the right-hand column line */
@media (min-width: 900px) { .cta-band .container { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); } }
/* Phones: page-header labels drop the leading rule so long labels wrap cleanly */
@media (max-width: 600px) { .hero-top .eyebrow::before { display: none; } .hero-x h1 { font-size: clamp(2.4rem, 1.1rem + 6.8vw, 7.5rem); } }

/* ---------- Accessible control borders and focus rings ---------- */
:focus-visible { outline: 2px solid var(--mint-deep); outline-offset: 3px; }
.dark :focus-visible, .page-hero :focus-visible, .hero :focus-visible, .site-header :focus-visible,
.mobile-nav :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible, .heritage-band :focus-visible,
.next-project:focus-visible, .case-hero :focus-visible { outline-color: var(--mint); }
.btn-ghost { border-color: var(--control-line); }
.dark .btn-ghost, .page-hero .btn-ghost, .hero .btn-ghost, .cta-band .btn-ghost { border-color: var(--control-line-dark); }
.field input, .field select, .field textarea, .choice, .filter { border-color: var(--control-line); }
.field input:focus, .field select:focus, .field textarea:focus { outline-color: var(--mint-deep); }
.faq summary::after { border-color: var(--control-line); }
.menu-toggle, .sector-row .go { border-color: var(--control-line-dark); }

/* ---------- Round 3 refinements ---------- */
/* Home hero: scroll cue centred at the bottom of the hero */
.hero-x .hero-inner { padding-bottom: clamp(6rem, 12vh, 8rem); }
.hero-x .scroll-cue { position: absolute; left: 50%; bottom: clamp(1.5rem, 4vh, 2.5rem); transform: translateX(-50%); flex-direction: column; gap: 0.6rem; z-index: 1; animation-name: rise-c; }
@keyframes rise-c { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 760px) { .hero-x .scroll-cue { display: none; } .hero-x .hero-inner { padding-bottom: 3rem; } }

/* Sector rows: text only, no photos */
.sector-row { grid-template-columns: minmax(0, 1fr); }
.sector-row .l { grid-column: 1; }
.sector-row .r { grid-column: 1; }
@media (min-width: 900px) { .sector-row .l { grid-column: 1; } .sector-row .r { grid-column: 2; } }

/* Small button (footer) */
.btn-sm { padding: 0.7rem 1.15rem; font-size: 0.9rem; }
.site-footer .btn-primary, .site-footer .btn-primary:hover { color: var(--navy); }
.site-footer .footer-cta { margin-top: 0.75rem; }
.footer-legal p { color: var(--on-dark-muted); }
.legal-note { margin-top: 1.5rem; max-width: 30rem; }

/* Quote slider: centred, arrows, timed auto-advance with a progress line */
.qs { max-width: 50rem; margin: 0 auto; text-align: center; }
.qs-track { display: grid; }
.qs-slide { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0.6s; }
.qs-slide.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.qs blockquote { margin: 0; font-size: var(--step-2); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; text-wrap: balance; }
.qs blockquote::before { content: "\201C"; display: block; font-size: 4rem; line-height: 0.6; color: var(--mint-deep); margin-bottom: 0.75rem; }
.qs figcaption { margin-top: 1.5rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.qs-controls { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.25rem; }
.qs-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--control-line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; }
.qs-btn svg { width: 1rem; height: 1rem; }
.qs-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.qs-count { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; color: var(--muted); min-width: 3.5rem; font-variant-numeric: tabular-nums; }
.qs-progress { width: 7.5rem; height: 2px; margin: 1.25rem auto 0; background: var(--line); overflow: hidden; border-radius: 2px; }
.qs-progress span { display: block; height: 100%; width: 100%; background: var(--mint-deep); transform: scaleX(0); transform-origin: left; }
.qs.is-playing .qs-progress span { animation: qs-fill var(--qs-dur, 9s) linear forwards; }
.qs.is-paused .qs-progress span { animation-play-state: paused; }
@keyframes qs-fill { to { transform: scaleX(1); } }
.dark .qs blockquote::before { color: var(--mint); }
.dark .qs-progress span { background: var(--mint); }
.dark .qs-btn { border-color: var(--control-line-dark); color: var(--on-dark); }
.accreditations { padding-top: 0; }
/* Footer heritage line in normal case (company name is never set in capitals) */
.footer-brand .heritage { font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0; text-transform: none; font-weight: 500; }

/* Sector page intro: who it's for (left) and our approach (right), under the statement */
.sector-intro { display: grid; gap: 2rem var(--col-gap); grid-template-columns: minmax(0, 1fr); margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .sector-intro { grid-template-columns: var(--cols-2); } }
.sector-intro h2 { font-size: var(--step--1); font-family: var(--mono); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-deep); margin-bottom: 1rem; }
.sector-intro ul:not(.tags) { list-style: none; display: grid; gap: 0.6rem; }
.sector-intro ul:not(.tags) li { padding-left: 1.4rem; position: relative; }
.sector-intro ul:not(.tags) li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 0.7rem; height: 1px; background: var(--mint-deep); }
.sector-intro .prose { font-size: var(--step-1); line-height: 1.6; max-width: 42rem; }
.sector-intro .tags { margin-top: 1.5rem; }
/* In the phone swipe row the cards fade in together with the row, not one by one */
@media (max-width: 799.98px) { .js .dmf > .rv { opacity: 1; transform: none; transition: none; } }
.dmf:focus-visible { outline-offset: 4px; }
.tags li { margin: 0; }
/* Navy headers without a photo: the intro text sits in the right-hand column */
@media (min-width: 900px) {
  .page-hero:not(.with-image) .hero-copy { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); margin-top: clamp(2.5rem, 5vw, 4rem); }
  .page-hero:not(.with-image) .hero-copy > * { grid-column: 2; }
}

/* ==========================================================================
   Insights (blog)
   ========================================================================== */
.post-meta { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-deep); }
.dark .post-meta { color: var(--mint); }

/* Index: latest post large, the rest as rows */
.post-feature { display: grid; gap: 1.5rem var(--col-gap); grid-template-columns: minmax(0, 1fr); color: inherit; text-decoration: none; align-items: center; }
@media (min-width: 900px) { .post-feature { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.post-feature-media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; }
.post-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.post-feature:hover .post-feature-media img { transform: scale(1.03); }
.post-feature h2 { font-size: var(--step-3); letter-spacing: -0.03em; margin-top: 0.75rem; text-wrap: balance; }
.post-feature-body > p:not(.post-meta) { color: var(--muted); margin-top: 1rem; max-width: 34rem; }
.post-feature .text-link { margin-top: 1.5rem; display: inline-flex; }
/* Grid of post cards: 3 across on desktop, 2 on tablets, 1 on phones */
.post-grid-head { margin-top: clamp(4rem, 8vw, 6.5rem); }
.post-grid { list-style: none; display: grid; gap: clamp(2.5rem, 4vw, 3.5rem) clamp(1.25rem, 2.5vw, 2.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.post-card-media { overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; background: var(--navy); margin-bottom: 1.25rem; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.post-card:hover .post-card-media img { transform: scale(1.04); }
.post-card-blank { display: flex; align-items: flex-end; height: 100%; padding: 1.25rem; font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); background: radial-gradient(120% 90% at 100% 0%, rgba(16,204,151,.16), transparent 60%), var(--navy); }
.post-card h3 { font-size: var(--step-1); line-height: 1.3; letter-spacing: -0.015em; margin-top: 0.6rem; text-wrap: balance; transition: color .2s; }
.post-card:hover h3 { color: var(--mint-deep); }
.post-card > p:last-child { color: var(--muted); margin-top: 0.6rem; font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-grid > li.is-new { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
@media (prefers-reduced-motion: reduce) { .post-grid > li.is-new { animation: none; } }

/* Older posts: one clear button, page numbers as a quiet fallback */
.pager { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 2.5rem); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.pager-pages { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.pager ol { list-style: none; display: flex; gap: 0.25rem; }
.pager ol a { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; border-radius: 999px; font-family: var(--mono); font-size: var(--step--1); color: var(--muted); text-decoration: none; }
.pager ol a:hover { color: var(--ink); background: var(--paper); }
.pager ol a[aria-current="page"] { color: var(--ink); border: 1px solid var(--control-line); }
.pager [data-more][aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.js .pager.is-loaded-all { display: none; }

/* Article header: long titles at a reading size */
.article-hero h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4.75rem); line-height: 1.04; max-width: 18ch; text-wrap: balance; }
.article-hero .eyebrow { text-transform: uppercase; }

/* Article body: contents on the left, text on the right-hand grid line */
.article { display: grid; gap: 2.5rem var(--col-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .article { grid-template-columns: var(--cols-2); align-items: start; } .article-aside { position: sticky; top: calc(var(--header-h, 4.5rem) + 2rem); } }
.article-aside h2 { font-family: var(--mono); font-size: var(--step--1); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-deep); margin-bottom: 1rem; }
.article-aside h2 + ol, .article-aside h2 + ul { margin-bottom: 2.5rem; }
.article-toc, .article-related { list-style: none; border-top: 1px solid var(--line); }
.article-toc { counter-reset: toc; }
.article-toc li, .article-related li { border-bottom: 1px solid var(--line); }
.article-toc a, .article-related a { display: flex; gap: 0.9rem; padding-block: 0.7rem; color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.article-toc li { counter-increment: toc; }
.article-toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: var(--step--1); color: var(--mint-deep); padding-top: 0.15em; }
.article-toc a:hover, .article-related a:hover { color: var(--mint-deep); }
@media (max-width: 899.98px) { .article-aside h2:nth-of-type(2), .article-related { display: none; } }
.article-body { max-width: 42rem; font-size: var(--step-1); line-height: 1.7; }
.article-body > * + * { margin-top: 1.1em; }
.article-body h2 { font-size: var(--step-2); letter-spacing: -0.025em; line-height: 1.2; margin-top: 2.2em; scroll-margin-top: calc(var(--header-h, 4.5rem) + 1.5rem); }
.article-body h2 + * { margin-top: 0.8em; }
.article-body ul, .article-body ol { padding-left: 0; list-style: none; display: grid; gap: 0.5em; }
.article-body ul li { position: relative; padding-left: 1.4rem; }
.article-body ul li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.7rem; height: 1px; background: var(--mint-deep); }
.article-body strong { font-weight: 600; }
.article-body a { color: var(--mint-deep); }
.article-figure { margin: 0 0 2em; border-radius: var(--radius); overflow: hidden; }
.article-figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.article-sign { margin-top: 3em !important; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.95rem; color: var(--muted); }
@media (max-width: 600px) { .article-hero .eyebrow::before { display: none; } }

/* Call to action: mint band, so it never merges with the navy footer or a navy section above it */
.cta-band { background: var(--mint); color: var(--navy); }
.cta-band::before { background: var(--navy); opacity: 0.07; }
.cta-band h2 { color: var(--navy); }
.cta-band p { color: rgba(18, 12, 36, 0.78); }
.cta-band .btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.cta-band .btn-primary:hover { background: #241c3d; border-color: #241c3d; color: #fff; }
.cta-band .btn-ghost, .cta-band .btn-ghost:hover { border-color: rgba(18, 12, 36, 0.55); color: var(--navy); }
.cta-band .btn-ghost:hover { border-color: var(--navy); background: rgba(18, 12, 36, 0.06); }
.cta-band :focus-visible { outline-color: var(--navy); }

/* ==========================================================================
   Type scale, revised: calmer display sizes that also respect screen height,
   so the home hero fits on short laptop screens (e.g. 1536 x 730).
   ========================================================================== */
:root {
  --step-3: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.4rem + 2.8vw, 4rem);
}
.hero-x h1 { font-size: max(2.5rem, min(clamp(2.6rem, 1.3rem + 4vw, 5.5rem), 10.5vh)); }
.page-hero h1, .case-hero h1 { font-size: max(2.3rem, min(clamp(2.3rem, 1.2rem + 3.3vw, 4.5rem), 9.5vh)); }
.article-hero h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.5rem); }
.hero-x .lede, .page-hero .lede { font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); max-width: 32rem; }
.statement { font-size: clamp(1.5rem, 1rem + 1.9vw, 2.5rem); }
.sector-row .title { font-size: clamp(1.4rem, 1rem + 1.8vw, 2.6rem); }
.big-year { font-size: clamp(5rem, 1rem + 10vw, 10.5rem); }
.hero-x .mark { --mark: min(clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem), 10vh); }

/* Home hero fills the screen below the header, never more */
@media (min-width: 761px) {
  .hero-x { min-height: min(calc(100vh - var(--header-h)), 56rem); min-height: min(calc(100svh - var(--header-h)), 56rem); }
  .hero-x .hero-inner { padding-top: clamp(2rem, 5vh, 4rem); padding-bottom: clamp(8.5rem, 16vh, 10rem); }
}
/* Short screens: drop the scroll cue rather than crowd the buttons */
@media (min-width: 761px) and (max-height: 820px) {
  .hero-x .scroll-cue { display: none; }
  .hero-x .hero-inner { padding-bottom: 3.5rem; }
}

/* ==========================================================================
   Vertical rhythm: one spacing scale for the whole site.
   Each step grows smoothly from a 360px phone to a 1440px desktop, then holds.
     xs  12 → 16px   small gaps (label to title)
     s   16 → 24px   heading to its text, text to its buttons
     m   24 → 36px   padding inside list rows; gaps between cards
     l   32 → 56px   under a section heading; between blocks in a section
     xl  48 → 80px   between major parts of one section
     2xl 64 → 112px  top and bottom of every band: sections, page headers,
                     1957 band, call to action, footer
   ========================================================================== */
:root {
  --sp-xs: clamp(0.75rem, 0.667rem + 0.37vw, 1rem);
  --sp-s: clamp(1rem, 0.833rem + 0.74vw, 1.5rem);
  --sp-m: clamp(1.5rem, 1.25rem + 1.11vw, 2.25rem);
  --sp-l: clamp(2rem, 1.5rem + 2.22vw, 3.5rem);
  --sp-xl: clamp(3rem, 2.333rem + 2.96vw, 5rem);
  --sp-2xl: clamp(4rem, 3rem + 4.44vw, 7rem);
  --section: var(--sp-2xl);
}

/* Bands: all share the same top and bottom space */
.section { padding-block: var(--sp-2xl); }
.section.tight { padding-block: var(--sp-xl); }
.page-hero .container { padding-block: var(--sp-2xl); }
.case-hero .container { padding-block: var(--sp-2xl); }
.cta-band .container { padding-block: var(--sp-2xl); }
.heritage-band .container { padding-block: var(--sp-2xl); }
.next-project .container { padding-block: var(--sp-2xl); }
.footer-top { padding-block: var(--sp-2xl) var(--sp-xl); }

/* Inside a band */
.section-head { gap: var(--sp-s); margin-bottom: var(--sp-l); }
.page-hero .breadcrumb { margin-bottom: var(--sp-l); }
.page-hero .lede, .hero .lede { margin-top: var(--sp-s); }
.page-hero .btn-row, .hero .btn-row, .hero-copy .btn-row { margin-top: 0; }
.hero-copy { gap: var(--sp-m); margin-top: var(--sp-m); }
@media (min-width: 900px) { .page-hero:not(.with-image) .hero-copy { margin-top: var(--sp-l); row-gap: var(--sp-m); } }
.hero-top + h1 { margin-top: var(--sp-s); }
.eyebrow { margin-bottom: var(--sp-s); }
.hero-top .eyebrow { margin-bottom: 0; }
.statement-meta { margin-top: var(--sp-l); }
.sector-intro { margin-top: var(--sp-xl); padding-top: var(--sp-l); gap: var(--sp-l) var(--col-gap); }
.post-grid-head { margin-top: var(--sp-xl); }
.pager { margin-top: var(--sp-xl); padding-top: var(--sp-m); }
.heritage-band .container { row-gap: var(--sp-l); }
.heritage-band h2 { margin-bottom: var(--sp-s); }
.cta-band .container { row-gap: var(--sp-l); }
.cta-band p { margin-top: var(--sp-s); }
.contact-wrap, .case-intro, .with-aside { row-gap: var(--sp-xl); }
.feature { row-gap: var(--sp-l); }
.split.editorial h2 + *, .split-body > h2 + p { margin-top: var(--sp-s); }
.split-body .text-link { margin-top: var(--sp-m); }
@media (min-width: 900px) { .split.editorial .split-body { padding-top: var(--sp-xl); } }

/* Rows in lists: one padding for all */
.steps > li, .index-list > li, .sector-row { padding-block: var(--sp-m); }
.chapter { padding-block: var(--sp-l); }
.materials li { padding-block: var(--sp-xs); }

/* Grids of cards and images */
.grid, .gallery-ed { gap: var(--sp-m); }
.dmf { gap: var(--sp-m); }
.post-grid { gap: var(--sp-l) var(--sp-m); }
@media (min-width: 900px) { .gallery-ed { row-gap: var(--sp-m); } }
.dmf h3, .post-card-media + .post-meta { margin-top: var(--sp-s); }
.post-card-media { margin-bottom: 0; }

/* ==========================================================================
   12-column grid. One gutter (--col-gap) everywhere, so every layout lands
   on the same column lines:
     split 4 / 8      the right-hand column starts on column 5
     3 cards 4/4/4    the second card starts on column 5 too
     2-up 6/6, 4-up 3/3/3/3, logos 2 each
   --cols-2 is written as 4 columns plus 3 gutters, so it matches the card
   grids exactly rather than approximately.
   ========================================================================== */
:root {
  --col-gap: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
  --col-4: calc((100% - 11 * var(--col-gap)) / 3 + 3 * var(--col-gap));
  --cols-2: minmax(0, var(--col-4)) minmax(0, 1fr);
  --cols-2-r: minmax(0, 1fr) minmax(0, var(--col-4));
}
.grid { gap: var(--sp-l) var(--col-gap); }
.post-grid { gap: var(--sp-l) var(--col-gap); }
@media (min-width: 800px) { .dmf { column-gap: var(--col-gap); } }
@media (min-width: 1000px) { .logo-row { column-gap: var(--col-gap); } }
@media (min-width: 800px) { .gallery-ed { column-gap: var(--col-gap); } }
@media (min-width: 900px) {
  .footer-cols { column-gap: var(--col-gap); }
  .post-feature { grid-template-columns: var(--cols-2-r); column-gap: var(--col-gap); }
  .split { column-gap: var(--col-gap); }
}
@media (min-width: 900px) { .sector-row { grid-template-columns: var(--cols-2); column-gap: var(--col-gap); } }
.sector-row .title { font-size: clamp(1.4rem, 1rem + 1.25vw, 2.125rem); }

/* Option cards on the contact form: no ring on the small radio itself.
   Keyboard users get the outline on the whole card instead; mouse clicks show none. */
.choice input:focus, .choice input:focus-visible { outline: none; box-shadow: none; }
.choice:has(input:focus-visible) { outline: 2px solid var(--mint-deep); outline-offset: 2px; }

/* Contact page location card: workshop photo, address, map pin */
.map-card { display: grid; align-items: end; min-height: 17rem; padding: 0; margin-top: var(--sp-l); background: var(--navy); color: var(--on-dark); isolation: isolate; }
.map-card::before { content: none; }
.map-card picture, .map-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.map-card img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.map-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(18,12,36,.94) 0%, rgba(18,12,36,.72) 45%, rgba(18,12,36,.25) 100%); }
.map-card-body { display: grid; gap: var(--sp-xs); padding: var(--sp-m); }
.map-card .map-label { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint); }
.map-card .map-address { font-size: var(--step-1); font-weight: 600; line-height: 1.35; color: var(--on-dark); }
.map-card .text-link { margin-top: var(--sp-xs); color: var(--mint); }
.map-card .map-pin { position: absolute; top: var(--sp-m); right: var(--sp-m); width: 2rem; height: auto; color: var(--mint); filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.map-card:hover, .map-card:focus-visible { color: var(--on-dark); }
.map-card:hover img { transform: scale(1.05); }
.map-card:hover .map-pin { transform: translateY(-4px); }
.map-card:hover .text-link { color: var(--mint); }
@media (prefers-reduced-motion: reduce) { .map-card img, .map-card .map-pin { transition: none; } .map-card:hover img, .map-card:hover .map-pin { transform: none; } }
/* Location card: simplified street plan of The Green, Downpatrick (inline SVG) */
.map-card .town-map { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); transform-origin: 64% 46%; }
.map-card::after { background: linear-gradient(0deg, rgba(18,12,36,.96) 0%, rgba(18,12,36,.7) 34%, rgba(18,12,36,0) 62%); }
.map-card .map-pin { display: none; }
.map-card:hover .town-map { transform: scale(1.04); }
.town-map-ring { transform-box: fill-box; transform-origin: center; animation: map-ring 2.8s ease-out infinite; }
@keyframes map-ring { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .town-map-ring { animation: none; } .map-card .town-map { transition: none; } .map-card:hover .town-map { transform: none; } }
.map-card { align-items: start; min-height: 19rem; }
.map-card::after { background: linear-gradient(180deg, rgba(18,12,36,.94) 0%, rgba(18,12,36,.6) 38%, rgba(18,12,36,0) 62%); }
.map-card .town-map { transform-origin: 51% 66%; }