/* Almond Group: quiet-luxury theme on the group burgundy (#4A1C1C).
   Direction drawn from Grosvenor, Cadogan and Pontiac Land: serif display
   type, small spaced capitals for labels, hairline rules instead of cards,
   square corners, ivory on burgundy, orange used only in the wordmark and
   the odd detail. Cormorant Garamond (free) for display; Avenir Next
   (installed on Apple devices, never served) with free Satoshi fallback. */

:root {
  --bg: #4a1c1c;
  --bg-deep: #3d1616;
  --bg-raised: #552323;
  --ink: #f4ede3;
  --ink-soft: rgba(244, 237, 227, 0.74);
  --ink-faint: rgba(244, 237, 227, 0.66);
  --line: rgba(244, 237, 227, 0.18);
  --line-strong: rgba(244, 237, 227, 0.4);
  --orange: #ea733d;
  --accent: #ea733d;
  --accent-ink: #4a1c1c;
  --accent-soft: rgba(244, 237, 227, 0.08);
  --co: #ea733d;
  --radius: 0;
  --radius-pill: 0;
  --maxw: 1240px;
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "Avenir Next", "Avenir", "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-body);
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--orange);
  color: var(--bg);
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.06;
  margin: 0;
  color: var(--ink);
}

p {
  margin: 0;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
}

@media (max-width: 760px) {
  .wrap {
    padding: 0 20px;
  }
}

/* --- Nav --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(74, 28, 28, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.nav .wrap {
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex: none;
}

.nav-brand img {
  height: 24px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-links a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--orange);
}

.nav-links a.btn {
  padding: 12px 20px;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  background: transparent;
}

.nav-links a.btn:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  flex: none;
}

.nav-toggle svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 860px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px 20px 24px;
    display: none;
  }

  .nav-links.is-open {
    display: flex;
  }

  .nav-links a {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
  }

  .nav-links a.btn {
    margin-top: 18px;
    text-align: center;
    justify-content: center;
  }
}

/* --- Buttons: square, hairline, spaced capitals --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.btn-primary:hover {
  background: transparent;
  color: var(--ink);
}

.btn-ghost:hover,
.btn-accent:hover {
  border-color: var(--ink);
}

.btn-accent {
  border-color: var(--orange);
  color: var(--ink);
}

/* --- Layout helpers --- */
.section {
  padding: 128px 0;
}

.section-tight {
  padding: 80px 0;
}

.section + .section,
.section-tight + .section,
.section + .section-tight {
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .section {
    padding: 80px 0;
  }

  .section-tight {
    padding: 56px 0;
  }
}

.band {
  background: var(--bg-deep);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--co);
  flex: none;
}

.section-title {
  font-size: clamp(34px, 4.2vw, 56px);
  margin: 22px 0 56px;
  max-width: 24ch;
}

.lede {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 54ch;
  line-height: 1.75;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.grid-2 h2 {
  font-size: clamp(34px, 4vw, 52px);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}

.grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}

@media (max-width: 860px) {
  .grid-2,
  .grid-3,
  .grid-2x2 {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .grid-2 {
    gap: 28px;
  }
}

/* Cards become hairline-ruled cells, no boxes. */
.card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 40px 40px 44px 0;
}

.grid-3 .card + .card,
.grid-2x2 .card:nth-child(even) {
  padding-left: 40px;
  border-left: 1px solid var(--line);
}

@media (max-width: 860px) {
  .card,
  .grid-3 .card + .card,
  .grid-2x2 .card:nth-child(even) {
    padding: 32px 0;
    border-left: 0;
  }
}

.card h3 {
  font-size: 26px;
}

.card .lede {
  font-size: 15px;
  margin-top: 14px;
}

.pill-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card .pill-tag {
  margin-top: 20px;
}

/* --- Hero --- */
.hero {
  padding-top: 120px;
  padding-bottom: 120px;
  border-bottom: 1px solid var(--line);
}

.hero-eyebrow {
  margin-bottom: 32px;
}

.hero h1 {
  font-size: clamp(44px, 6vw, 88px);
  font-weight: 400;
  line-height: 1;
  max-width: 18ch;
}

.hero .lede {
  margin-top: 36px;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  margin-top: 48px;
  flex-wrap: wrap;
}

/* Hero with a photograph: image fills the band, burgundy wash on the left for the type. */
.hero--image {
  position: relative;
  overflow: hidden;
  min-height: min(88dvh, 860px);
  display: flex;
  align-items: flex-end;
  padding-top: 160px;
  padding-bottom: 96px;
  background: var(--bg-deep);
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  z-index: 0;
}

.hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(61, 22, 22, 0.95) 0%, rgba(61, 22, 22, 0.76) 34%, rgba(61, 22, 22, 0.16) 68%, rgba(61, 22, 22, 0) 100%),
    linear-gradient(0deg, rgba(61, 22, 22, 0.85) 0%, rgba(61, 22, 22, 0) 45%);
}

.hero--image .wrap {
  position: relative;
  z-index: 2;
  width: 100%;
}

@media (max-width: 760px) {
  .hero {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .hero--image {
    min-height: 92dvh;
    padding-bottom: 64px;
  }

  .hero-bg {
    object-position: 65% center;
  }

  .hero--image::before {
    background: linear-gradient(0deg, rgba(61, 22, 22, 0.97) 0%, rgba(61, 22, 22, 0.82) 50%, rgba(61, 22, 22, 0.25) 100%);
  }
}

/* --- Companies: a ruled ledger of the group --- */
.lines {
  display: block;
  border-top: 1px solid var(--line);
}

.line-card {
  display: grid;
  grid-template-columns: 300px 1fr auto;
  gap: 48px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.line-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--orange);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.line-card:hover::before {
  width: 100%;
}

.line-logo {
  height: 28px;
  width: auto;
}

.line-card h3 {
  font-size: clamp(26px, 2.4vw, 32px);
}

.line-card p {
  color: var(--ink-soft);
  font-size: 15px;
  margin-top: 8px;
  max-width: 52ch;
}

.line-card .line-link {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  white-space: nowrap;
}

.line-card .line-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.line-card:hover .line-link svg {
  transform: translateX(4px);
}

.line-card .line-link::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (max-width: 860px) {
  .line-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 36px 0;
  }
}

/* --- Ledger rows (recent work) --- */
.ledger {
  border-top: 1px solid var(--line);
}

.ledger-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.ledger-sector {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.ledger-scope {
  font-family: var(--font-display);
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.25;
  color: var(--ink);
}

@media (max-width: 760px) {
  .ledger-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* --- Capabilities --- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}

.cap {
  padding: 36px 32px 40px 0;
}

.cap + .cap {
  padding-left: 32px;
  border-left: 1px solid var(--line);
}

.cap h3 {
  font-size: 26px;
}

.cap-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.cap p {
  margin-top: 14px;
  font-size: 15px;
  color: var(--ink-soft);
}

.cap-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 960px) {
  .cap-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cap:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .cap-grid--3 {
    grid-template-columns: 1fr;
  }

  .cap-grid--3 .cap,
  .cap-grid--3 .cap + .cap {
    padding: 28px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .cap:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 600px) {
  .cap-grid {
    grid-template-columns: 1fr;
  }

  .cap,
  .cap + .cap {
    padding: 28px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* --- Statement and closing band --- */
.statement {
  text-align: center;
}

.statement h2 {
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 400;
  line-height: 1.12;
  max-width: 22ch;
  margin: 28px auto 0;
}

.statement .eyebrow {
  justify-content: center;
}

.statement .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--co);
  flex: none;
}

.statement p {
  margin: 28px auto 0;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: 17px;
}

.cta-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.cta-band h2 {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 400;
  max-width: 24ch;
}

.cta-band .btn {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.cta-band .btn:hover {
  background: transparent;
  color: var(--ink);
}

/* --- Footer --- */
.footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  padding: 72px 0 40px;
}

.footer .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-brand img {
  height: 26px;
  width: auto;
}

.footer-meta {
  margin-top: 22px;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.35;
  max-width: 26ch;
}

.footer-cols {
  display: flex;
  gap: 72px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font-size: 10px;
  font-family: var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 20px;
  font-weight: 500;
}

.footer-col a,
.footer-col p {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.footer-col a:hover {
  color: var(--ink);
}

.footer-bottom {
  margin-top: 80px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.08em;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Reveal (gentle, once) --- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Footer enquiries: where every Enquiries button lands --- */
/* Each company's own colour, used once: the full-width Enquiries band.
   Group pages keep a deeper burgundy. */
body.co-group { --band: #3a1414; }
body.co-construction { --band: #1b3a57; }
body.co-developments { --band: #5b5a34; }
body.co-engineering { --band: #0f493f; }
body.co-home { --band: #285f57; }

.footer {
  padding-top: 0;
}

.enquiries-band {
  background: var(--band, var(--bg-deep));
  margin-bottom: 72px;
  border-bottom: 1px solid var(--line);
}

.footer .footer-enquiries {
  display: block;
  padding-top: 88px;
  padding-bottom: 88px;
}

.enquiries-band .eyebrow {
  color: rgba(244, 237, 227, 0.78);
}

.footer-email {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 64px);
  line-height: 1.05;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s ease;
  overflow-wrap: anywhere;
}

.footer-email:hover {
  border-bottom-color: var(--orange);
}

/* --- Keyboard access --- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bg);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.btn:focus-visible,
.nav-toggle:focus-visible {
  outline-offset: 4px;
}

/* Balanced headline wrapping avoids single-word last lines. */
h1,
h2,
h3 {
  text-wrap: balance;
}

/* --- Phone refinements: comfortable tap targets and legible labels --- */
.footer-col h4,
.pill-tag {
  font-size: 11px;
}

@media (max-width: 760px) {
  .footer-cols {
    gap: 40px;
  }

  .footer-col a,
  .footer-col p {
    padding: 8px 0;
    margin-bottom: 2px;
  }

  .footer-bottom {
    flex-direction: column;
  }
}