@charset "utf-8";

/* ==========================================================================
   Interland Business Ventures — design system
   Mobile-first. Written against the house DESIGN.md token contract.

   Type roles
     display  Poppins   h1 / h2 / h3 — geometric, matches the wordmark
     text     Nunito    body, labels, controls, data — humanist, softer
   Two families, five roles, one scale. Poppins carries structure, Nunito
   carries reading; the contrast is weight and shape, never size alone.
   ========================================================================== */

:root {
  /* ---- colour: brand values mapped to roles -------------------------- */
  --brand:            #0C72BA;   /* taken from the logo artwork, not the old site */
  --brand-deep:       #06588F;
  --brand-tint:       #1D86C8;
  --brand-pale:       #A9D8F7;   /* 8.4:1 on the ink surfaces it is used on */
  --brand-wash:       #EAF2F9;

  --background:       #FFFFFF;
  --surface:          #F6F7F9;
  --surface-ink:      #14173A;   /* midnight indigo */
  --surface-ink-deep: #0D1027;

  --foreground:       #14173A;
  --muted-foreground: #4B5068;   /* 7.4:1 on white */
  --on-ink:           #FFFFFF;
  --on-ink-muted:     rgba(255,255,255,.70);
  --on-ink-faint:     rgba(255,255,255,.64);

  --border:           #E3E6EC;
  --border-ink:       rgba(255,255,255,.18);
  --focus-ring:       #1D86C8;

  /* ---- type ---------------------------------------------------------- */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans:    'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Poppins runs wide and heavy, so the display steps sit lower than they
     would for a serif: 32 → 52 | 25 → 40 | 18 → 21 | 17 → 19 | 16 → 17 */
  /* 40 → 56. The statement is the thing the visitor is here to read, so it
     takes the room rather than leaving a gap under itself. */
  --fs-display: clamp(2.5rem, 1.70rem + 3.40vw, 3.5rem);
  /* only the home hero carries the larger cap; every other hero keeps the
     size it has always had */
  --fs-display-home: clamp(2.5rem, 1.70rem + 3.40vw, 4rem);
  --fs-h2:      clamp(1.5625rem, 1.14rem + 1.80vw, 2.5rem);
  --fs-h3:      clamp(1.125rem, 1.07rem + 0.24vw, 1.3125rem);
  --fs-lede:    clamp(1.0625rem, 1.02rem + 0.20vw, 1.1875rem);
  --fs-body:    clamp(1rem, 0.98rem + 0.09vw, 1.0625rem);
  --fs-sm:      0.9375rem;
  --fs-label:   0.6875rem;

  --lh-display: 1.08;
  --lh-heading: 1.16;
  --lh-body:    1.66;
  --tr-display: -0.022em;

  --measure: 62ch;          /* running text */
  --measure-display: 17ch;  /* headlines break before they sprawl */
  --measure-lede: 52ch;

  /* ---- spacing: 4px base ---------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* One section step, used by every section including the image chapters.
     112px top and bottom put 224px of nothing between two sections on a
     desktop; 88px puts 176px, which still separates them clearly without the
     page going quiet in the middle. */
  --section-y: clamp(48px, 5.4vw, 76px);
  --pad:       clamp(20px, 4.4vw, 64px);
  --container: 1200px;
  /* the section edge as a padding, so full-bleed bands can sit on it */
  --gutter:    calc(var(--pad) + max(0px, (100% - var(--container)) / 2));
  --header-h:  64px;
  --subnav-h:  53px;   /* a coarse-pointer row; the fine-pointer one is shorter */

  /* ---- shape: one radius language — near-square, 4px ------------------ */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-full: 999px;

  /* ---- elevation: each level means something -------------------------- */
  --shadow-raised:   0 1px 2px rgba(20,23,58,.06), 0 2px 8px rgba(20,23,58,.05);
  --shadow-floating: 0 10px 34px rgba(20,23,58,.12);

  /* ---- motion --------------------------------------------------------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --dur-focal: 700ms;
}

@media (min-width: 900px) { :root { --header-h: 80px; } }
@media (pointer: fine) { :root { --subnav-h: 49px; } }

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--admin-bar, 0px) + 16px);
  background: var(--background);
}

/* A page with a pinned sub-nav has two bars above the content, so an anchor
   jump has to clear both. Without this the heading it lands on sits behind
   the bar and reads as cut off. */
html:has(body.page-realty) {
  scroll-padding-top: calc(var(--header-h) + var(--admin-bar, 0px) + var(--subnav-h) + 16px);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--brand); color: #fff; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.on-dark :focus-visible,
.site-header:not(.scrolled) :focus-visible,
.dark-section :focus-visible,
.realty-chapter :focus-visible,
.image-bg-section :focus-visible,
.contact-band :focus-visible,
.site-footer :focus-visible,
.mobile-nav :focus-visible { outline-color: #fff; }

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 200;
  transform: translateY(-180%);
  background: var(--surface-ink); color: #fff;
  padding: 12px 18px; font-size: var(--fs-sm); font-weight: 600;
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ==========================================================================
   Type roles
   ========================================================================== */

/* Section marker. Sentence case and quiet — a standfirst, not a tracked-caps
   chip shouting over the headline.

   Vertical rhythm of a section head, per Gestalt proximity:
     marker → heading  32px  the heading starts a new group
     heading → lede    20px  the lede belongs to the heading
     head → content    68px  with a lede · 44px without
   A heading is always nearer what it introduces than what precedes it. */
.eyebrow {
  display: block;
  margin: 0 0 var(--space-6);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-foreground);
}

.section-head { margin-bottom: clamp(32px, 4.6vw, 56px); }
/* the marker belongs to the heading under it, so it sits close to it */
.section-head > .eyebrow { margin-bottom: var(--space-5); }

/* A heading with a lede binds to it (20px) and the 68px below belongs to the
   section. A heading with no lede binds to the block it introduces instead, so
   that gap closes and the marker above opens up — a heading is always nearer
   what it introduces than what precedes it. */
.section-head:not(:has(> .lede)) { margin-bottom: clamp(28px, 2.9vw, 38px); }
.section-head:not(:has(> .lede)) > .eyebrow { margin-bottom: var(--space-6); }

/* No rule above a section head. Section changes are already carried by the
   ground the section sits on and by the space around it; a hairline on top of
   that is a third marker doing the same job. Rules are kept for the places
   they do real work — separating list rows, accordion items, table cells and
   footer groups — and nowhere else. */

.section-head h1,
.section-head h2,
.page-hero-content h1,
.contact-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  max-width: var(--measure-display);
}

.section-head h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); max-width: 25ch; }

/* One phrase per heading carries the brand colour — the noun the section is
   actually about. Colour does the emphasis, so the weight never changes and
   the line keeps its rhythm. */
.hl { color: var(--brand); }
.dark-section .hl, .realty-chapter .hl, .image-bg-section .hl,
.page-hero .hl, .home-hero .hl, .contact-hero .hl { color: var(--brand-pale); }
.contact-band .hl { color: #fff; }

.section-head .lede {
  margin-top: 16px;   /* tighter than the space above the heading */
  max-width: var(--measure-lede);
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--muted-foreground);
}

h3, .service-tile h3, .principles-grid h3, .timeline h3,
.process-vertical h3, .portfolio-tabs h3, .programme-grid h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: -.012em;
}

/* nothing that is read as prose runs past the measure */
main p, main li, .record-table span, .editorial-list strong { max-width: var(--measure); }

/* List separator. A pipe reads more clearly than a middot at label sizes,
   but at full strength it competes with the words — so it is dimmed and given
   room on both sides, and it does the separating without being read. */
.sep {
  display: inline;
  font-weight: 400;
  opacity: .42;
  padding: 0 .12em;
}

.micro-note { margin-top: var(--space-4); max-width: 58ch; font-size: var(--fs-sm); color: var(--muted-foreground); }
.dark-section .micro-note, .realty-chapter .micro-note,
.image-bg-section .micro-note, .contact-band .micro-note,
.dark-section .stats-grid span, .dark-section .editorial-list p,
.dark-section .timeline p { color: var(--on-ink-muted); }

/* Light type on a dark ground looks tighter than it is, so running text there
   gets one real step of tracking. Applied to prose only — headings carry their
   own negative tracking and must not be diluted. A value below about .006em is
   invisible, so it is noise, not craft. */
.dark-section p, .realty-chapter p, .image-bg-section p,
.contact-band p, .site-footer p, .page-hero p, .home-hero p,
.contact-hero p, .proof-grid p {
  letter-spacing: .008em;
}
.dark-section .section-head .lede,
.realty-chapter .section-head .lede,
.image-bg-section .section-head .lede,
.contact-band .section-head .lede { color: var(--on-ink-muted); line-height: 1.6; }

.dark-section .eyebrow, .realty-chapter .eyebrow,
.image-bg-section .eyebrow, .contact-band .eyebrow,
.page-hero .eyebrow, .home-hero .eyebrow, .contact-hero .eyebrow { color: var(--brand-pale); }
.contact-band .eyebrow { color: rgba(255,255,255,.92); }
.contact-band .section-head .lede { color: rgba(255,255,255,.95); }

/* ==========================================================================
   Layout
   ========================================================================== */

.section { padding: var(--section-y) 0; }
.section-shell { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.section-porcelain { background: var(--surface); }
.dark-section { background: var(--surface-ink); color: var(--on-ink); }
.section-cta { margin-top: var(--space-7); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-4);
  padding-inline: var(--gutter);
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.site-header.scrolled {
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  color: var(--foreground);
  border-bottom-color: var(--border);
}
.site-header.hidden { transform: translateY(-100%); }

/* WordPress puts a 32px admin bar above the page for signed-in users. A fixed
   header at top:0 slides underneath it, so everything fixed or sticky is
   offset while that bar is present. Visitors never see any of this. */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .mobile-nav { top: 32px; }
body.admin-bar .subnav { top: calc(var(--header-h) + 32px); }
body.admin-bar { --admin-bar: 32px; }
body.admin-bar .home-hero, body.admin-bar .page-hero { scroll-margin-top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .mobile-nav { top: 46px; }
  body.admin-bar .subnav { top: calc(var(--header-h) + 46px); }
  body.admin-bar { --admin-bar: 46px; }
}

.brand { display: block; width: 168px; flex: none; }
.brand img { width: 100%; height: auto; }
/* The logo file carries 10.6% of clear space inside its own left edge. Next
   to a layout that already has a gutter that reads as the mark being
   indented from everything below it, so the paint is pulled back onto the
   text column. The box does not move, so the hit area is unchanged. */
.brand img, .footer-brand img { transform: translateX(-10.6%); }
.brand .logo-dark { display: block; }
.brand .logo-light { display: none; }
.site-header.scrolled .brand .logo-dark,
.no-hero .brand .logo-dark { display: none; }
.site-header.scrolled .brand .logo-light,
.no-hero .brand .logo-light { display: block; }

.site-nav { display: none; }

.header-cta {
  margin-left: auto;
  display: none;
  align-items: center; gap: var(--space-3);
  min-height: 44px; padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: 700;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

.menu-btn {
  margin-left: auto;
  width: 44px; height: 44px; margin-right: -10px;
  position: relative; flex: none;
  border-radius: var(--radius-md);
}
.menu-btn span {
  position: absolute; left: 11px; right: 11px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) linear;
}
.menu-btn span:nth-child(1) { top: 18px; }
.menu-btn span:nth-child(2) { top: 25px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---- mobile navigation ------------------------------------------------ */

.mobile-nav {
  position: fixed; inset: 0; z-index: 85;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-6);
  padding: calc(var(--header-h) + 24px) var(--pad) max(32px, env(safe-area-inset-bottom));
  background: var(--surface-ink);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  /* leaves faster than it arrives */
  transition: opacity 150ms var(--ease-out), visibility 0s linear 150ms;
}
.mobile-nav.open {
  visibility: visible; opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear 0s;
}
.mobile-nav .site-nav {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.mobile-nav .site-nav a,
.mobile-nav > a {
  width: 100%;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease-out) var(--d, 0ms),
              transform var(--dur-base) var(--ease-out) var(--d, 0ms);
}
.mobile-nav.open .site-nav a,
.mobile-nav.open > a { opacity: 1; transform: none; }
.mobile-nav > a {
  font-family: var(--font-sans);
  font-size: var(--fs-body); font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--brand-pale);
  border-bottom: 0;
}

/* ==========================================================================
   Buttons and links
   ========================================================================== */

/* Icons: Phosphor Thin, one family, one weight, inlined so every glyph takes
   currentColor. Nothing hand-rolled, nothing from a second set. */
.ico {
  flex: none;
  width: 1.05em; height: 1.05em;
  transition: transform var(--dur-base) var(--ease-out);
}
.ico-down { width: 1.15em; height: 1.15em; }

/* Buttons hug their label. No stretched bar with the icon shoved to the
   far edge — the label and its arrow are one object. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid currentColor;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm); font-weight: 700;
  transition: background var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(.985); }

.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-ghost { background: transparent; }

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
  .btn-ghost:hover { background: rgba(255,255,255,.10); }
  .section .btn-ghost:hover { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-deep); }
  .header-cta:hover { background: #fff; color: var(--surface-ink); }
  .site-header.scrolled .header-cta:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
  .btn:hover .ico, .header-cta:hover .ico,
  .text-link:hover .ico, .contact-choices a:hover .ico { transform: translate(2px, -2px); }
}

.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-size: var(--fs-sm); font-weight: 700;
}
.feature-copy .text-link { min-height: 0; }
.text-link span { transition: transform var(--dur-base) var(--ease-out); }

.hero-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-7);   /* set apart from the reading group */
}
.hero-actions .btn { flex: 1 1 auto; }

/* sticky mobile conversion bar ------------------------------------------ */

.cta-dock {
  position: fixed; z-index: 70;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  /* opaque: text on a translucent bar can land on anything scrolling under it */
  background: var(--background);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(20,23,58,.07);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.cta-dock.visible { transform: none; }
.cta-dock p {
  min-width: 0; flex: 1 1 auto;
  font-size: var(--fs-sm); font-weight: 700; line-height: 1.4;
}
.cta-dock p > span {
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 400; letter-spacing: .01em;
  color: var(--muted-foreground);
}
.cta-dock .btn { min-width: 0; flex: none; padding: 0 16px; gap: var(--space-3); }

/* keep the last of the footer clear of the docked bar */
body:has(.cta-dock) .site-footer { padding-bottom: calc(var(--space-6) + 76px); }

@media (min-width: 900px) {
  .cta-dock { display: none; }
  body:has(.cta-dock) .site-footer { padding-bottom: var(--space-6); }
}

/* ==========================================================================
   Heroes
   ========================================================================== */

.home-hero, .page-hero {
  position: relative;
  display: flex; align-items: stretch;
  min-height: 92svh;
  padding-top: calc(var(--header-h) + var(--space-8));
  overflow: hidden;
  background: var(--surface-ink-deep);
  color: #fff;
}
.page-hero { min-height: 78svh; }

.hero-bg-layer, .page-hero::before {
  position: absolute; inset: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  transform: scale(1.02);
}
/* the hero image is declared on the element itself so its URL resolves
   against the page, not against this stylesheet */
.page-hero { background-position: center; background-size: cover; background-repeat: no-repeat; }
.page-hero::before { content: ""; background-image: inherit; animation: hero-settle 5s var(--ease-out) both; }

/* The image settles once, on arrival and on every change — tied to a state
   change, never an idle loop. */
.hero-bg-layer { animation: hero-settle 6s var(--ease-out) both; }
@keyframes hero-settle {
  from { transform: scale(1.075); }
  to   { transform: scale(1.02); }
}

.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,10,26,.62) 0%, rgba(6,10,26,.24) 26%, rgba(6,10,26,.74) 62%, rgba(6,10,26,.94) 100%),
    linear-gradient(96deg, rgba(6,10,26,.78) 0%, rgba(6,10,26,.50) 46%, rgba(6,10,26,.16) 82%, rgba(6,10,26,.42) 100%);
}

.hero-frame { display: none; }

/* One column, three groups: label · headline · supporting line, then the
   actions set apart. Proximity does the grouping so the hero reads in one
   pass instead of as five competing objects. */
/* Masthead composition: the section marker rides the top edge under the
   header, the statement sits on the bottom edge. Nothing floats directly
   above the headline. */
.home-hero-content, .page-hero-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  width: 100%; max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--pad) clamp(56px, 10vh, 116px);
}
.home-hero-content > *, .page-hero-content > * { max-width: 46rem; }
.page-hero-content h1 { font-size: var(--fs-display); }
/* The hero marker is a masthead line: it sits on a rule that spans the whole
   content column, so it reads as the top edge of the frame rather than a
   label stranded in empty space. */
/* The marker sits directly above the statement, on the same 32px step every
   section head uses. Pinning it to the top of the frame left a quarter of the
   viewport of empty space between the two — space that meant nothing. The
   whole group now sits on the bottom edge and the photograph gets the rest. */
.page-hero-content > .eyebrow, .home-hero-content > .eyebrow {
  /* the marker belongs to the statement under it, so it sits close */
  margin: auto 0 var(--space-4);
  padding: 0;
  max-width: none;
  border-top: 0;
  color: rgba(255,255,255,.82);
}
.page-hero-content > p:not(.eyebrow) {
  margin-top: var(--space-6);
  max-width: var(--measure-lede);
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: rgba(255,255,255,.86);
}
.page-hero.centered .page-hero-content { text-align: left; }

/* ---- the focal moment: the proposition stack -------------------------- */

/* One proposition at a time, at every width. The headline is the single
   thing the eye lands on; the rule underneath shows how long it holds. */
.hero-stack {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: flex-end;   /* reserve two lines, hang type off the baseline */
  margin: 0;
  max-width: var(--measure-display);
  font-size: var(--fs-display-home);
  min-height: 2.24em;
  padding-bottom: 6px;
}
/* Phones are narrower than the hard line breaks the statement is written
   around: "Unlocking property" on its own is wider than a 375px column, so
   the break meant to guarantee two lines produced three and pushed the lede
   down. Below 480px the break is dropped and the browser balances the
   statement instead, which holds it to two lines without shrinking the type. */
@media (max-width: 479px) {
  /* the statement is sized off the column rather than the page, so the
     longest pair of words in any of the five still lands on one line */
  .hero-stack { font-size: clamp(1.9rem, 9.85vw, 2.72rem); }
  .hero-stack button br { display: none; }
  .hero-stack button { text-wrap: balance; }
}

.hero-stack button { display: none; }
.hero-stack button.active {
  display: block;
  animation: line-in 640ms var(--ease-out) both;
}
/* the blur carries the eye across the swap so two words never sit on top
   of each other mid-crossfade */
@keyframes line-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero-stack button {
  position: relative;
  width: 100%;
  min-height: 44px;          /* it is a control, so it takes a finger */
  padding: 4px 0;
  font-family: var(--font-display);
  font-size: 1em; font-weight: 600;
  line-height: var(--lh-display); letter-spacing: var(--tr-display);
  text-align: left;
  color: #fff;
}
/* ---- the index: all five areas, reachable, never a stacked wall ---------
   Phone: five segments under the actions — a thumb can reach any of them and
   the active one fills as its time runs. Desktop: the full list sits in the
   hero's opposite corner, so the statement and its index balance the frame. */

.hero-rail {
  display: grid;
  grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 10px;
  width: 100%; max-width: 26rem;
  margin-top: var(--space-6);
}
.hero-rail button {
  position: relative;
  display: flex; align-items: center;
  min-height: 44px;
  text-align: left;
}
.hero-rail button::before,
.hero-rail button::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
}
.hero-rail button::before { background: rgba(255,255,255,.3); }
.hero-rail button::after {
  background: #fff;
  transform: scaleX(0); transform-origin: left;
}
.hero-rail button[aria-current="true"]::after {
  animation: dwell-x var(--dwell, 6500ms) linear forwards;
}
.hero-rail .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-rail .label { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hero-rail button:hover::before { background: rgba(255,255,255,.6); }
}
@keyframes dwell-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (hover: hover) and (pointer: fine) {
  .hero-stack button:hover { color: rgba(255,255,255,.86); }
}

.hero-copy {
  max-width: var(--measure-lede);
  margin-top: 20px;             /* binds to the statement it explains */
  font-size: var(--fs-lede);
  color: rgba(255,255,255,.86);
}

.scroll-cue {
  position: absolute; z-index: 2;
  right: var(--gutter); bottom: clamp(18px, 3vw, 30px);
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
.scroll-cue::after {
  content: ""; width: 1px; height: 22px;
  transform-origin: top;
  background: linear-gradient(180deg, rgba(255,255,255,.8), transparent);
  animation: cue 2.4s var(--ease-in-out) 3 both;
}
@keyframes cue { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* ==========================================================================
   Editorial split
   ========================================================================== */

.split-grid { display: grid; gap: var(--space-6); align-items: end; }
.split-action { display: flex; }
.split-action .btn { width: 100%; }

/* The picture carries the section and the action sits into its lower corner,
   so the call lands on the image rather than floating in white space. */
.split-media {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.split-media img {
  width: 100%; height: clamp(240px, 54vw, 460px);
  object-fit: cover;
}
.split-media .split-action { margin-top: var(--space-4); }

/* ==========================================================================
   Service mosaic
   ========================================================================== */

.mosaic-grid, .realty-service-grid {
  display: grid; gap: var(--space-3);
}

.feature-card {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 380px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface-ink-deep);
  color: #fff;
  isolation: isolate;
}
.feature-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--ease-out);
}
.feature-shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(9,13,30,.18) 0%,
    rgba(9,13,30,.38) 34%,
    rgba(9,13,30,.80) 66%,
    rgba(9,13,30,.94) 100%);
}
.feature-copy { padding: clamp(20px, 4vw, 36px); }
.feature-copy .eyebrow {
  border-top: 0; padding-top: 0;
  margin-bottom: var(--space-3);
  color: var(--brand-pale);
}
.feature-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.08rem + 0.72vw, 1.5rem);
  font-weight: 600; line-height: 1.32; letter-spacing: var(--tr-display);
  max-width: 26ch;
  margin-bottom: var(--space-3);
}
.feature-copy p {
  max-width: 52ch;
  margin-bottom: var(--space-5);
  font-size: var(--fs-sm); line-height: 1.62;
  color: rgba(255,255,255,.84);
}

/* every pressable surface answers the press */
.feature-card, .contact-choices a, .realty-links a, .direct-contact-grid a {
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.feature-card:active, .contact-choices a:active,
.realty-links a:active, .direct-contact-grid a:active { transform: scale(.993); }

@media (hover: hover) and (pointer: fine) {
  .feature-card:hover img { transform: scale(1.06); }
  .feature-card:hover .text-link span { transform: translate(3px, -3px); }
}

/* ==========================================================================
   Tiles, process, principles — hairline editorial lists, not cards
   ========================================================================== */

.process-line, .principles-grid, .service-grid, .proof-grid {
  display: grid; gap: 0;
}

.service-tile {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--border);
}
.service-tile p { margin: 0; color: var(--muted-foreground); font-size: var(--fs-sm); line-height: 1.6; }
.service-tile h3 { margin-bottom: var(--space-3); }

.dark-section .service-tile, .proof-grid article { border-top-color: var(--border-ink); }
.dark-section .service-tile p, .proof-grid p { color: var(--on-ink-muted); }

/* Phosphor Thin. A hairline weight needs optical size to read, so the glyphs
   run at 30px and take their colour from the surface rather than a filter. */
.ui-icon {
  display: block;
  width: 30px; height: 30px;
  margin-bottom: var(--space-4);
  color: var(--brand);
}
.ui-icon-lg { width: 26px; height: 26px; margin: 0; flex: none; }
.dark-section .ui-icon, .realty-chapter .ui-icon,
.image-bg-section .ui-icon, .site-footer .ui-icon { color: var(--brand-pale); }

.process-line .service-tile h3 { font-size: 1.0625rem; text-wrap: balance; }

.principles-grid article { padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.principles-grid p {
  margin: var(--space-3) 0 0;
  max-width: 42ch;
  color: var(--muted-foreground);
  font-size: var(--fs-sm); line-height: 1.62;
}
.dark-section .principles-grid article,
.realty-chapter .principles-grid article { border-top-color: var(--border-ink); }
.dark-section .principles-grid p,
.realty-chapter .principles-grid p { color: var(--on-ink-muted); }

.proof-grid article { padding: var(--space-5) 0; border-top: 1px solid var(--border-ink); }
.proof-grid article > span {
  display: block; margin-bottom: var(--space-4);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-pale);
}

/* ==========================================================================
   Realty chapter
   ========================================================================== */

.realty-chapter {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  /* the ink ground is the guarantee: if the photograph never arrives the
     white type still has something to sit on */
  background: var(--surface-ink-deep);
  color: #fff;
  padding-block: var(--section-y);
}
.realty-backdrop { position: absolute; inset: 0; background-position: center; background-size: cover; }
.realty-content { position: relative; z-index: 2; }

.realty-links { margin-top: var(--space-7); border-top: 1px solid var(--border-ink); }
.realty-links a {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px var(--space-4);
  align-items: baseline;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border-ink);
}
.realty-links a > * { transition: transform var(--dur-base) var(--ease-out); }
.realty-links span {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  color: var(--brand-pale);
}
.realty-links strong { font-size: var(--fs-h3); font-weight: 600; }
.realty-links em {
  grid-column: 2; font-style: normal;
  font-size: var(--fs-sm); line-height: 1.55; color: var(--on-ink-muted);
}
@media (hover: hover) and (pointer: fine) {
  .realty-links a:hover { background: rgba(255,255,255,.05); }
  .realty-links a:hover > * { transform: translateX(8px); }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-list { max-width: 56rem; }
.faq-list details { border-top: 1px solid var(--border); }
.faq-list details:last-child { border-bottom: 1px solid var(--border); }
.faq-list summary {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  min-height: 44px;
  list-style: none;
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.25rem);
  font-weight: 600; line-height: 1.35;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span {
  flex: none;
  width: 22px; height: 22px; margin-top: 2px;
  position: relative;
  font-size: 0;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-list summary > span::before,
.faq-list summary > span::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 50%;
  height: 1.5px; background: var(--brand); border-radius: 2px;
}
.faq-list summary > span::after { transition: transform var(--dur-base) var(--ease-out); transform: rotate(90deg); }
.faq-list details[open] summary > span::after { transform: rotate(0deg); }
.faq-list details p {
  max-width: var(--measure);
  margin: 0; padding: 0 0 var(--space-6);
  color: var(--muted-foreground);
}
.faq-list details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete;
}
.faq-list details[open]::details-content { block-size: auto; }

/* ==========================================================================
   Contact band
   ========================================================================== */

.contact-band { background: var(--brand); color: #fff; }
.contact-band-grid { display: grid; gap: var(--space-7); }
.contact-choices { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.34); }
.contact-choices a {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  min-height: 60px; padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,.34);
  font-size: var(--fs-lede); font-weight: 600;
}
@media (hover: hover) and (pointer: fine) {
  .contact-choices a:hover { background: rgba(255,255,255,.08); }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--surface-ink-deep); color: #fff;
  padding: var(--space-8) var(--gutter) var(--space-6);
}
.site-footer > * { max-width: var(--container); margin-inline: auto; }
.footer-top {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-ink);
}
.footer-brand { width: 190px; }
.footer-top p { color: var(--on-ink-muted); font-size: var(--fs-sm); }

.footer-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-5);
  padding: var(--space-7) 0;
}
.footer-grid > div { display: flex; flex-direction: column; gap: 2px; }
.footer-label {
  margin-bottom: var(--space-3);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-pale);
}
.footer-grid a {
  display: flex; align-items: center;
  min-height: 44px; padding: 4px 0;
  font-size: var(--fs-sm); color: var(--on-ink-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-grid a:hover { color: #fff; }

.footer-bottom {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-ink);
  font-size: var(--fs-sm); color: var(--on-ink-faint);
}

/* ==========================================================================
   Interior page components
   ========================================================================== */

/* A history reads as a sequence, not a table. One spine runs through the whole
   thing and each milestone is a node on it — vertical on a phone, horizontal
   from tablet up. The spine fades from brand blue at the first milestone to
   the border colour at the last, so direction is visible without an arrow. */
.timeline {
  position: relative;
  display: grid;
  padding-left: 34px;
}
.timeline::before {
  content: "";
  position: absolute; left: 5px; top: 7px; bottom: 7px;
  width: 1px;
  background: linear-gradient(180deg, var(--brand), var(--border));
}
.timeline article {
  position: relative;
  padding: 0 0 var(--space-7);
}
.timeline article:last-child { padding-bottom: 0; }
.timeline article::before {
  content: "";
  position: absolute; left: -34px; top: 7px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--background);
  border: 2px solid var(--brand);
}
.dark-section .timeline article::before { background: var(--surface-ink); }
.dark-section .timeline::before { background: linear-gradient(180deg, var(--brand-pale), var(--border-ink)); }
/* The year is a timestamp on the spine, not the headline. Small, bold and
   close to its node, so the milestone heading below it stays the thing you
   read first. */
.timeline span {
  display: block; margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1; letter-spacing: .005em;
  color: var(--brand);
}
.dark-section .timeline span, .realty-chapter .timeline span { color: var(--brand-pale); }
.timeline p { margin-top: var(--space-2); color: var(--muted-foreground); font-size: var(--fs-sm); line-height: 1.6; }

.section-image-split { display: grid; padding: 0; }
.split-image { min-height: 300px; background-position: center; background-size: cover; }
.split-content { padding: var(--section-y) var(--pad); }
.split-content > * { max-width: 40rem; margin-inline: auto; }

.compact-grid { display: grid; gap: var(--space-4); }

.leadership-grid { display: grid; gap: var(--space-7); align-items: center; }

/* The portrait is a 200px source, so it is framed rather than stretched —
   shown at a size it can actually fill instead of being upscaled soft. */
.portrait { margin: 0; max-width: 240px; }
.portrait img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--surface-ink-deep);
}
.portrait-placeholder {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px; padding: var(--space-6);
  text-align: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, rgba(12,114,186,.18), transparent 62%);
}
.portrait-mark { position: absolute; inset: 20px; border: 1px dashed rgba(255,255,255,.16); }
.portrait-placeholder small { color: rgba(255,255,255,.96); font-size: var(--fs-sm); }
/* the role carries the brand colour — pale, because full brand blue does not
   hold 4.5:1 against the ink ground */
.role { font-size: var(--fs-lede); font-weight: 600; color: var(--brand-pale); }
.section:not(.dark-section):not(.realty-chapter):not(.image-bg-section) .role { color: var(--brand); }

.stats-grid { display: grid; border-top: 1px solid var(--border); }
.stats-grid > div { padding: var(--space-5) 0; border-bottom: 1px solid var(--border); }
.stats-grid > div:last-child { border-bottom: 0; }
.stats-grid span {
  display: block; margin-bottom: var(--space-2);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted-foreground);
}
.stats-grid strong {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
  font-weight: 400; line-height: 1.25; letter-spacing: var(--tr-display);
}

.editorial-image, .image-led-list .editorial-image {
  width: 100%; height: clamp(240px, 52vw, 520px); object-fit: cover;
  border-radius: var(--radius-md);
}
.wide-editorial {
  width: 100%; height: clamp(240px, 56vw, 560px); object-fit: cover;
  margin-top: var(--space-7); border-radius: var(--radius-md);
}

/* Capability list. Each line is a thing Interland does, so each line gets the
   mark that names it — the row scans in one pass instead of reading as a
   column of unformatted sentences. */
.big-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: 1px solid var(--border); }
.big-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1rem + 0.55vw, 1.25rem);
  font-weight: 500; line-height: 1.4; letter-spacing: -.01em;
}
.big-list .list-icon {
  width: 26px; height: 26px;
  color: var(--brand);
}
.dark-section .big-list li, .realty-chapter .big-list li { border-color: var(--border-ink); }
.dark-section .big-list, .realty-chapter .big-list { border-top-color: var(--border-ink); }
.dark-section .big-list .list-icon, .realty-chapter .big-list .list-icon { color: var(--brand-pale); }

@media (min-width: 768px) {
  .big-list li { grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-5); padding: 17px 0; }
  .big-list .list-icon { width: 28px; height: 28px; }
}

.image-triptych { display: grid; gap: var(--space-3); }
.image-triptych img { width: 100%; height: clamp(200px, 46vw, 400px); object-fit: cover; border-radius: var(--radius-md); }

.portrait-pair { display: grid; gap: var(--space-3); }
.portrait-pair img { width: 100%; height: clamp(260px, 62vw, 520px); object-fit: cover; border-radius: var(--radius-md); }

.image-bg-section {
  position: relative; display: flex; align-items: center;
  padding-block: var(--section-y);
  color: #fff;
  background-color: var(--surface-ink-deep);
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.image-bg-section::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,10,26,.78), rgba(6,10,26,.62));
}
.overlay-content { position: relative; z-index: 2; }

.pill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 60rem; }
.pill-list span {
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.36);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
}
.pill-list.light span { border-color: var(--border); background: #fff; color: var(--foreground); }

.programme-grid { display: grid; gap: var(--space-4); align-items: start; }
.programme-grid article {
  overflow: hidden; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: #fff;
}
.programme-grid img { width: 100%; height: 220px; object-fit: cover; }
/* the caption is bound to its own picture, so it sits clear of it */
.programme-grid h3 { margin: var(--space-5) var(--space-5) var(--space-4); }

.marketing-gallery { display: grid; gap: var(--space-3); }
.marketing-gallery > div {
  position: relative; overflow: hidden;
  height: clamp(220px, 50vw, 340px);
  border-radius: var(--radius-md);
}
.marketing-gallery img { width: 100%; height: 100%; object-fit: cover; }
.marketing-gallery > div > span {
  position: absolute; left: 14px; bottom: 14px;
  padding: 7px 11px;
  background: rgba(20,23,58,.88); color: #fff;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm); font-weight: 500;
}

.editorial-list > div { padding: var(--space-5) 0; border-top: 1px solid var(--border); }
.editorial-list strong { display: block; margin-bottom: var(--space-2); font-size: var(--fs-h3); font-weight: 600; }
.editorial-list p { color: var(--muted-foreground); font-size: var(--fs-sm); line-height: 1.6; }

/* The sub-nav parks under the header. When the header slides away on a phone
   it closes the gap and takes the top edge itself, instead of hovering with a
   strip of page showing above it. */
.subnav {
  position: sticky; top: var(--header-h); z-index: 45;
  transition: top var(--dur-base) var(--ease-out);
  display: flex; gap: var(--space-5);
  padding: 6px var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm); font-weight: 600;
}
.subnav::-webkit-scrollbar { display: none; }
/* A wayfinder, not a destination: it should cost the reader as little of
   the viewport as it can. On a pointer the row is 36px; where the pointer is
   coarse it keeps the 44px a finger needs. */
.subnav a {
  position: relative;
  display: flex; align-items: center; min-height: 36px;
  color: var(--muted-foreground);
  transition: color var(--dur-fast) var(--ease-out);
}
.subnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.subnav a.active { color: var(--brand); }
.subnav a.active::after { transform: scaleX(1); }

@media (pointer: coarse) {
  .subnav { padding: 4px var(--gutter); }
  .subnav a { min-height: 44px; }
}

.site-header.hidden ~ main .subnav { top: 0; }

body.admin-bar .site-header.hidden ~ main .subnav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header.hidden ~ main .subnav { top: 46px; }
}

.portfolio-tabs { display: grid; gap: var(--space-4); align-items: start; }
.portfolio-tabs article { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.portfolio-tabs img { width: 100%; height: 210px; object-fit: cover; }
.portfolio-tabs h3 { margin: var(--space-5) var(--space-5) var(--space-3); }
.portfolio-tabs p { margin: 0 var(--space-5) var(--space-5); color: var(--muted-foreground); font-size: var(--fs-sm); line-height: 1.6; }

.process-vertical { max-width: 52rem; border-top: 1px solid var(--border); }
.process-vertical article {
  display: grid; grid-template-columns: 1fr; gap: var(--space-2);
  padding: var(--space-5) 0; border-bottom: 1px solid var(--border);
}
.process-vertical article > span {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand);
}
.process-vertical h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.25rem, 1.1rem + .9vw, 1.625rem); letter-spacing: var(--tr-display); }
.process-vertical strong { font-size: var(--fs-body); font-weight: 600; }
.process-vertical p { color: var(--muted-foreground); }

.legal-panel { background: var(--brand-wash); }

.record-table { display: grid; border-top: 1px solid var(--border); }
.record-table span {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.record-table span:nth-child(3n+1) { font-weight: 600; }

/* ---- contact ---------------------------------------------------------- */

.contact-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--header-h) + clamp(56px, 9vw, 104px)) 0 clamp(56px, 8vw, 96px);
  background: var(--surface-ink); color: #fff;
}
.contact-hero::before {
  content: ""; position: absolute;
  width: 520px; height: 520px; right: -190px; top: -190px;
  border: 1px solid rgba(12,114,186,.42); border-radius: 50%;
}
.contact-hero-grid { display: grid; gap: var(--space-7); align-items: center; }
.contact-hero h1 { font-size: var(--fs-display); }
.contact-hero p:not(.eyebrow) {
  margin-top: var(--space-5); max-width: var(--measure);
  font-size: var(--fs-lede); color: var(--on-ink-muted);
}
.contact-mark { display: none; }

.contact-layout { display: grid; gap: var(--space-8); }

/* Step one: pick an area. One control, one obvious selected state — the
   duplicate dropdown that used to ask the same question again is mirrored
   from this list and kept out of sight. */
.contact-area-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.contact-area-list button {
  position: relative;
  display: block; width: 100%;
  min-height: 68px;
  padding: 16px 14px 16px 42px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.35;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
.contact-area-list button::before {
  content: "";
  position: absolute; left: 10px; top: 21px;
  width: 18px; height: 18px;
  border: 1px solid #B9BFCC; border-radius: 50%;
  background: #fff;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.contact-area-list button span {
  display: block; margin-top: 5px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm); font-weight: 400; line-height: 1.5;
  color: var(--muted-foreground);
}
.contact-area-list button[aria-checked="true"] { background: var(--brand-wash); }
.contact-area-list button[aria-checked="true"]::before {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 4px var(--brand);
}
@media (hover: hover) and (pointer: fine) {
  .contact-area-list button:hover { background: var(--surface); }
  .contact-area-list button:hover::before { border-color: var(--brand); }
}

/* Step two: give us your details. Fields read as fields — a box you type
   into, not a rule floating under a word. */
.field-mirrored {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.contact-form { display: grid; gap: var(--space-5); }
.contact-form label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: var(--fs-sm); font-weight: 700;
}
/* Name and phone are the two Interland actually needs to come back to you.
   The marker sits on those, so the rest read as optional without a second
   label saying so. */
.req { color: var(--brand); margin-left: 2px; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-height: 52px; padding: 0 14px;
  border: 1px solid #D5DAE3;      /* the edge has to be visible to invite a tap */
  border-radius: var(--radius-md);
  background: var(--surface);
  font-size: var(--fs-body); font-weight: 400;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.contact-form textarea { padding: 14px; min-height: 156px; line-height: 1.6; }
.contact-form input:hover, .contact-form textarea:hover { border-color: #C6CCD8; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none;
  background: var(--background);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(12,114,186,.16);
}
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.contact-form .btn { width: 100%; }
.form-status { min-height: 1.4em; font-size: var(--fs-sm); font-weight: 600; color: var(--brand-deep); }
.form-status[data-state="error"] { color: #B3261E; }

.direct-contact-grid { display: grid; gap: var(--space-3); }
.direct-contact-grid a {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 72px; padding: var(--space-5);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  font-size: var(--fs-lede);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.direct-contact-grid a:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.34); }
.direct-contact-grid img { width: 22px; flex: none; filter: brightness(0) invert(1); }

/* Two numbers, one tile. Tapping dials the first; the second is there to be
   read and copied. */
.direct-contact-grid .lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.direct-contact-grid .lines span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.direct-contact-grid .lines span + span {
  font-size: var(--fs-sm);
  color: var(--on-ink-muted);
}

/* ==========================================================================
   Reveal — the one supporting motion, capped
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--ease-out) var(--reveal-delay, 0ms),
              transform 620ms var(--ease-out) var(--reveal-delay, 0ms);
}
.reveal.visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ==========================================================================
   Breakpoints — 600 / 768 / 900 / 1180
   ========================================================================== */

@media (min-width: 600px) {
  .hero-actions .btn { flex: 0 0 auto; }
  .split-action .btn { width: auto; }
  .compact-grid, .image-triptych, .portrait-pair,
  .programme-grid, .portfolio-tabs { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
  .footer-top { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .contact-form { grid-template-columns: 1fr 1fr; }
  .contact-form label:last-of-type { grid-column: 1 / -1; }
  .contact-form .btn, .form-status { grid-column: 1 / -1; width: max-content; }
  .stats-grid, .record-table { grid-template-columns: 1fr 1fr; }
  .stats-grid > div { padding-right: var(--space-5); }
  .process-vertical article { grid-template-columns: 88px 1fr; gap: var(--space-5); }
  .realty-links a { grid-template-columns: 44px minmax(0,1fr); }
  .direct-contact-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .feature-card { min-height: 440px; }
  .service-grid, .principles-grid, .proof-grid, .process-line {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-6);
  }
  .service-grid .service-tile, .process-line .service-tile,
  .principles-grid article, .proof-grid article { padding-right: var(--space-5); }
  /* the spine turns and runs along the top of the row */
  .timeline {
    grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
    padding: 26px 0 0;
  }
  .timeline::before {
    left: 0; right: 0; top: 5px; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg, var(--brand), var(--border));
  }
  .timeline article { padding: 0 var(--space-5) 0 0; }
  .timeline article::before { left: 0; top: -26px; }
  .dark-section .timeline::before { background: linear-gradient(90deg, var(--brand-pale), var(--border-ink)); }
  .section-image-split { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .split-image { min-height: 420px; }
  .marketing-gallery { grid-template-columns: 1fr 1fr; }
  .image-triptych { grid-template-columns: repeat(3, 1fr); }
  .programme-grid, .portfolio-tabs { grid-template-columns: repeat(2, 1fr); }
  .record-table { grid-template-columns: 1fr 1.3fr 1.3fr; }
  .record-table span { border-bottom: 0; padding-right: var(--space-5); }
  .contact-hero-grid { grid-template-columns: 1.15fr .85fr; }
  .contact-mark { display: flex; justify-content: center; }
  .contact-mark img { width: min(280px, 78%); }
  .direct-contact-grid { grid-template-columns: repeat(3, 1fr); }
}

/* two-column band: an odd tile never sits alone on the last row */
@media (min-width: 768px) and (max-width: 899px) {
  .process-line .service-tile:last-child:nth-child(odd),
  .proof-grid article:last-child:nth-child(odd),
  .service-grid .service-tile:last-child:nth-child(odd),
  .principles-grid article:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .menu-btn, .mobile-nav { display: none; }
  .site-nav {
    display: flex; align-items: center; gap: clamp(18px, 2.1vw, 30px);
    margin-left: auto;
    font-size: var(--fs-sm); font-weight: 500;
  }
  .site-nav a {
    position: relative;
    display: flex; align-items: center; min-height: 44px;
    opacity: .88;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .site-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
    background: currentColor;
    transform: scaleX(0); transform-origin: right;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .site-nav a:hover { opacity: 1; }
  .site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .header-cta { display: inline-flex; margin-left: var(--space-6); }
  .brand { width: 196px; }

  .split-grid { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); align-items: center; column-gap: clamp(48px, 5vw, 80px); }
  .split-action { justify-content: flex-start; align-self: end; padding-bottom: 6px; }

  .split-media img { height: clamp(340px, 33vw, 500px); }
  .split-media .split-action {
    position: absolute; left: 24px; bottom: 24px;
    margin: 0;
  }
  /* elevation is declared once — the solid fill separates it from the
     photograph, so no border-plus-shadow ghosting */
  .split-media .btn { border-color: transparent; }

  /* spans are assigned at build time so every row is full — see grids.js */
  .mosaic-grid, .realty-service-grid { grid-template-columns: repeat(12, 1fr); }
  .mosaic-grid .feature-card, .realty-service-grid .feature-card { grid-column: span 6; min-height: 460px; }
  .feature-card[data-span="4"]  { grid-column: span 4; min-height: 480px; }
  .feature-card[data-span="6"]  { grid-column: span 6; min-height: 480px; }
  .feature-card[data-span="12"] { grid-column: span 12; min-height: 520px; }
  .feature-card[data-span="4"] .feature-copy h3 { font-size: 1.3125rem; max-width: 20ch; }
  .feature-card[data-span="12"] .feature-copy h3 { font-size: 1.75rem; max-width: 34ch; }

  .process-line { grid-template-columns: repeat(5, 1fr); column-gap: var(--space-5); }
  .principles-grid { grid-template-columns: repeat(4, 1fr); column-gap: var(--space-6); }
  .proof-grid { grid-template-columns: repeat(5, 1fr); column-gap: var(--space-5); }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .service-grid.four { grid-template-columns: repeat(4, 1fr); }
  .service-grid.three { grid-template-columns: repeat(3, 1fr); }
  .programme-grid, .portfolio-tabs { grid-template-columns: repeat(4, 1fr); }
  .portfolio-tabs { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .stats-grid > div { border-bottom: 0; }

  .marketing-gallery { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 300px; }
  .marketing-gallery > div { height: auto; }
  .marketing-gallery > div:first-child { grid-row: span 2; }
  .marketing-gallery > div:last-child { grid-column: span 2; }

  .contact-band-grid { grid-template-columns: 1.1fr .9fr; column-gap: clamp(48px, 6vw, 88px); }
  .contact-layout { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 80px); }
  .leadership-grid { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); column-gap: clamp(48px, 6vw, 80px); }
  .portrait { max-width: 320px; }
  .portrait-placeholder { min-height: 480px; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { width: 220px; }
  .realty-links a { grid-template-columns: 56px minmax(220px, 1fr) 1.3fr; align-items: center; }
  .realty-links em { grid-column: auto; }
  /* Heading left, questions right — the list sits in its own column instead
     of starting at an arbitrary indent under a full-width heading. */
  .section:has(> .section-shell > .faq-list) > .section-shell {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
    column-gap: clamp(48px, 6vw, 88px);
    align-items: start;
  }
  .section:has(> .section-shell > .faq-list) .section-head { margin-bottom: 0; }
  .faq-list { max-width: none; margin-left: 0; }
  .faq-list details:first-child { border-top: 0; }
  .faq-list summary { padding-top: 4px; }
  .scroll-cue { bottom: clamp(22px, 2.6vw, 34px); }

  .hero-stack { min-height: 2.32em; }
}

/* Wide screens: the statement holds the left of the frame and the full index
   sits opposite it, so all five areas are readable and one click apart. */
@media (min-width: 1024px) {
  .home-hero-content { padding-right: clamp(300px, 30vw, 400px); }
  .hero-rail {
    position: absolute; z-index: 3;
    right: var(--gutter); bottom: clamp(56px, 10vh, 116px);
    display: flex; flex-direction: column; align-items: flex-end;
    gap: 0;
    width: auto; max-width: clamp(240px, 26vw, 320px);
    margin: 0;
    border-top: 1px solid rgba(255,255,255,.26);
  }
  .hero-rail button {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 13px 0 14px;
    border-bottom: 1px solid rgba(255,255,255,.26);
    text-align: right;
  }
  .hero-rail button::before { top: auto; bottom: -1px; margin: 0; background: none; }
  .hero-rail button::after {
    top: auto; bottom: -1px; margin: 0;
    transform-origin: right;
    background: var(--brand-pale);
  }
  .hero-rail .label {
    display: block;
    font-size: 0.9375rem; line-height: 1.35;
    color: rgba(255,255,255,.74);
    transition: color var(--dur-base) var(--ease-out);
  }
  .hero-rail button[aria-current="true"] .label { color: #fff; font-weight: 700; }
  .hero-rail button:hover .label { color: rgba(255,255,255,.9); }
  .hero-rail .sr { display: none; }

}

@media (min-width: 1180px) {
  .home-hero { min-height: min(100svh, 900px); }
  .page-hero { min-height: min(82svh, 720px); }
  .split-content { padding-inline: clamp(48px, 5vw, 88px); }
}

/* ==========================================================================
   Reduced motion — fewer and gentler, not none
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg-layer, .page-hero::before { animation: none; transform: scale(1.02); }
  .hero-stack button.active::before { animation: none; transform: none; }
  .scroll-cue::after { animation: none; }
  .cta-dock { transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  .feature-card img { transition: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .site-header, .mobile-nav, .cta-dock, .scroll-cue, .subnav { display: none !important; }
  .reveal { opacity: 1; transform: none; }
  body { color: #000; }
}