/* ==========================================================================
   Emerald Family Enterprise — Website 2026 · v2
   Design system derived from the Touchstone Program Core Deck.
   v2 refines v1 towards a quieter, more editorial register: a three-step
   tonal ground instead of flat grey, rule-led blocks instead of filled
   boxes, finer micro-typography, and slower motion.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "Area Normal";
  src: url("../fonts/AreaNormal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Area Normal";
  src: url("../fonts/AreaNormal-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Area Normal";
  src: url("../fonts/AreaNormal-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Brand palette — sampled from the Touchstone deck */
  --charcoal: #292924;
  --slate: #232c33;
  --plum: #8e3b72;
  --plum-deep: #6f2c59;
  --emerald: #00805d;
  --emerald-deep: #00654a;
  --mint: #49bc91;
  --lavender: #dadff7;
  --bone: #ececec;
  --grey: #86867d;
  --white: #ffffff;

  /* v2: a three-step tonal ground — paper, bone, white — so sections
     separate by tone rather than by hard colour blocking. */
  --paper: #f2f2f0;

  /* v3: the scrim laid over the stone photography. This is --emerald taken
     right down in value, not a new hue, so the green surfaces stay inside the
     Touchstone palette. Held as an RGB triplet so the alpha varies per use. */
  --emerald-scrim: 0, 46, 34;

  /* Text tints, all struck from charcoal so the page stays one family. */
  --ink: var(--charcoal);
  --ink-70: rgba(41, 41, 36, 0.72);
  --ink-55: rgba(41, 41, 36, 0.58);

  /* Hairlines. Finer than v1's 1px solid. */
  --rule: rgba(41, 41, 36, 0.14);
  --rule-strong: rgba(41, 41, 36, 0.26);
  --rule-light: rgba(255, 255, 255, 0.18);
  --rule-light-strong: rgba(255, 255, 255, 0.34);

  /* Type */
  --display: "Area Normal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --fs-hero: clamp(3rem, 6.4vw, 6rem);
  --fs-h2: clamp(2.125rem, 4.1vw, 3.625rem);
  --fs-h3: clamp(1.5rem, 2.2vw, 2rem);
  --fs-card: 1.3125rem;
  --fs-lead: clamp(1.125rem, 1.5vw, 1.4375rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.6875rem;

  /* Micro-typography: display type tightens as it grows. */
  --ls-display: -0.028em;
  --ls-eyebrow: 0.2em;
  --ls-label: 0.09em;

  /* Layout */
  --max: 1648px;
  --pad: 40px;

  /* Tightened ~15% in September 2026 after the client read the sections as
     too airy; the ratio between the three steps is unchanged. */
  --section-y-sm: 76px;
  --section-y: 112px;
  --section-y-lg: 152px;

  /* One 12-column grid governs the whole site. Every column edge on every
     page falls on one of these 12 lines; the gutter equals the page margin. */
  --gutter: 40px;

  --nav-h: 88px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  font-weight: 400;
  margin: 0;
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

p {
  margin: 0 0 1.2em;
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--emerald);
  color: var(--white);
}

:focus-visible {
  outline: 1px solid var(--plum);
  outline-offset: 4px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Layout primitives ---------------------------------------------------- */

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

.section {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}

.section--lg {
  padding-block: var(--section-y-lg);
}
.section--sm {
  padding-block: var(--section-y-sm);
}

/* --- The 12-column grid --------------------------------------------------- */
/* Every section-level block is this grid, so a column edge in one section
   lines up with a column edge in every other. Nested grids use the same
   gutter and split into 2, 3, 4 or 6 equal parts, which land on the same
   lines by construction. */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* The backbone: a 4-column label rail beside an 8-column content column.
   One hairline opens the section across all 12 columns and both hang from
   it, so the rail and the content start on the same line. */
.rail,
.contact__grid,
.footer__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}

.rail,
.contact__grid {
  padding-top: 28px;
  border-top: 1px solid var(--rule-strong);
}

.band--plum .rail,
.band--charcoal .rail,
.band--emerald .rail,
.band--stone .rail,
.band--plum .contact__grid,
.band--charcoal .contact__grid,
.band--emerald .contact__grid,
.band--stone .contact__grid {
  border-top-color: var(--rule-light-strong);
}

.rail__head,
.contact__head {
  position: relative;
  grid-column: 1 / span 4;
}

/* The content column is itself a subgrid, so anything inside it still snaps
   to the master lines. */
.rail__body,
.contact__body {
  grid-column: 5 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
}

/* Prose runs 6 of the 8 columns — about 70 characters. */
.rail__body > *,
.contact__body > * {
  grid-column: 1 / span 6;
}

/* Blocks that use the full content column. */
.rail__body > .services,
.rail__body > .full,
.contact__body > .full {
  grid-column: 1 / -1;
}

.rail__body > .cta,
.contact__body > .cta,
.contact__body > .contact__mail {
  justify-self: start;
}

/* A third column for sections that carry an image alongside. */
.rail__aside {
  grid-column: 9 / -1;
}

.rail--aside .rail__body {
  grid-column: 5 / span 4;
}

.rail--aside .rail__body > * {
  grid-column: 1 / -1;
}

.eyebrow {
  display: block;
  font-family: var(--body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 2rem;
}

.eyebrow--plum {
  color: var(--plum);
}
.eyebrow--light {
  color: rgba(255, 255, 255, 0.6);
}

/* Over a photograph the label needs more than 60% white: at 11px it is the
   smallest text on the page and it sits high in the hero, where the scrim is
   at its thinnest. Measured at 4.80:1 over the aerial at 0.6 — too close to
   the 4.5 floor to survive a crop shift. Flat panels keep the softer 0.6. */
.hero--stone .eyebrow--light,
.band--stone .eyebrow--light {
  color: rgba(255, 255, 255, 0.82);
}

h2.section__title {
  font-size: var(--fs-h2);
  line-height: 1.02;
  color: var(--ink);
}

.section__title.section__title--emerald {
  color: var(--emerald);
}
.section__title.section__title--light {
  color: var(--white);
}

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.48;
  letter-spacing: -0.006em;
  color: var(--ink-70);
}

.band--plum .lead,
.band--charcoal .lead,
.band--emerald .lead,
.band--stone .lead {
  color: rgba(255, 255, 255, 0.78);
}


/* --- Brand geometry ------------------------------------------------------- */
/* v2 uses fewer, larger, quieter shapes — tonal where possible, saturated
   only once or twice per page. */

.deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.section > .wrap {
  position: relative;
  z-index: 1;
}

.shape {
  position: absolute;
  display: block;
}

.shape--circle {
  border-radius: 50%;
}

/* Quarter-discs. The modifier names the corner holding the right angle. */
.shape--q-br {
  border-radius: 100% 0 0 0;
}
.shape--q-bl {
  border-radius: 0 100% 0 0;
}
.shape--q-tl {
  border-radius: 0 0 100% 0;
}
.shape--q-tr {
  border-radius: 0 0 0 100%;
}

.fill-plum {
  background: var(--plum);
}
.fill-emerald {
  background: var(--emerald);
}
.fill-mint {
  background: var(--mint);
}
.fill-lavender {
  background: var(--lavender);
}
.fill-slate {
  background: var(--slate);
}
.fill-bone {
  background: var(--bone);
}
.fill-paper {
  background: var(--paper);
}

/* A 2x2 quadrant cluster, as used on the deck's divider pages. */
.shape-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 1;
  pointer-events: none;
}

.shape-grid .shape {
  position: static;
  width: 100%;
  height: 100%;
}

/* --- Buttons and CTA links ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.0625rem 2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease),
    border-color 0.5s var(--ease);
}

.btn__arrow {
  display: inline-block;
  transition: transform 0.5s var(--ease);
}

.btn:hover .btn__arrow {
  transform: translateX(4px);
}

.btn--emerald {
  background: var(--emerald);
  color: var(--white);
}
.btn--emerald:hover {
  background: var(--emerald-deep);
}

.btn--plum {
  background: var(--plum);
  color: var(--white);
}
.btn--plum:hover {
  background: var(--plum-deep);
}

.btn--outline {
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn--outline:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--paper);
}

.btn--ghost-light {
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white);
}
.btn--ghost-light:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--charcoal);
}

/* Text CTA — the rule draws itself in on hover rather than sitting there. */
.cta {
  position: relative;
  margin-top: 2.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--plum);
}

.cta::before,
.cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
}

.cta::before {
  width: 100%;
  background: currentColor;
  opacity: 0.28;
}

.cta::after {
  width: 0;
  background: currentColor;
  transition: width 0.6s var(--ease);
}

.cta:hover::after {
  width: 100%;
}

.cta .btn__arrow {
  transition: transform 0.5s var(--ease);
}

.cta:hover .btn__arrow {
  transform: translateX(4px);
}

.cta--light {
  color: var(--mint);
}

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.nav__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.nav__logo img {
  width: 146px;
}

.nav__logo .logo--dark {
  display: none;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
  margin-left: auto;
}

.nav__link {
  position: relative;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding-block: 0.4rem;
  transition: color 0.4s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.5s var(--ease);
}

.nav__link:hover {
  color: var(--white);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  width: 100%;
}

.nav__cta {
  padding: 0.8rem 1.5rem;
  font-size: 0.6875rem;
}

/* Solid state — applied on scroll and on inner pages from the start. */
.nav.is-solid,
.nav--solid {
  background: rgba(242, 242, 240, 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--rule);
}

.nav.is-solid .logo--white,
.nav--solid .logo--white {
  display: none;
}
.nav.is-solid .logo--dark,
.nav--solid .logo--dark {
  display: block;
}
.nav.is-solid .nav__link,
.nav--solid .nav__link {
  color: var(--ink-70);
}
.nav.is-solid .nav__link:hover,
.nav--solid .nav__link:hover {
  color: var(--ink);
}
.nav.is-solid .btn--ghost-light,
.nav--solid .btn--ghost-light {
  border-color: var(--rule-strong);
  color: var(--ink);
}
.nav.is-solid .btn--ghost-light:hover,
.nav--solid .btn--ghost-light:hover {
  background: var(--charcoal);
  border-color: var(--charcoal);
  color: var(--paper);
}

/* Mobile menu toggle */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  width: 22px;
  height: 1px;
  margin: 6px auto;
  background: var(--white);
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease),
    background-color 0.4s var(--ease);
}

.nav.is-solid .nav__toggle span,
.nav--solid .nav__toggle span,
.nav.is-open .nav__toggle span {
  background: var(--charcoal);
}

.nav.is-open .nav__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav.is-open .nav__toggle span:nth-child(2) {
  opacity: 0;
}
.nav.is-open .nav__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + 3rem) clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  background: var(--charcoal);
}

.hero--short {
  min-height: 74vh;
  min-height: 74svh;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

/* v3: the same weighting as below, struck from emerald rather than charcoal,
   so the stone reads green rather than as a grey-green photograph behind grey. */
.hero--stone .hero__media::after {
  background: linear-gradient(
      to top,
      rgba(var(--emerald-scrim), 0.9) 0%,
      rgba(var(--emerald-scrim), 0.62) 34%,
      rgba(var(--emerald-scrim), 0.2) 66%,
      rgba(var(--emerald-scrim), 0.4) 100%
    ),
    linear-gradient(to right, rgba(var(--emerald-scrim), 0.44) 0%, transparent 62%);
}

/* A lighter scrim than v1 — weighted to the foot so the photograph reads. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to top,
      rgba(41, 41, 36, 0.9) 0%,
      rgba(41, 41, 36, 0.62) 34%,
      rgba(41, 41, 36, 0.18) 66%,
      rgba(41, 41, 36, 0.34) 100%
    ),
    linear-gradient(to right, rgba(41, 41, 36, 0.42) 0%, transparent 62%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.hero__body {
  grid-column: 1 / span 8;
}

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.032em;
  color: var(--white);
  max-width: 15ch;
  margin-bottom: 2.25rem;
}

.hero .eyebrow {
  margin-bottom: 2.25rem;
}

.hero__lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  line-height: 1.48;
  letter-spacing: -0.006em;
  color: rgba(255, 255, 255, 0.8);
  max-width: 52ch;
  margin-bottom: 3rem;
}

/* Two-sentence headline (Sept 2026 copy). At the standard hero size it ran to
   five lines, so it steps down a size and the second sentence drops back a
   tone, which keeps the pair reading as one thought. */
.hero h1.hero__title--long {
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  line-height: 1.02;
  max-width: 20ch;
}

.hero__title-soft {
  display: block;
  color: rgba(255, 255, 255, 0.72);
}

/* The secondary ask is a full sentence, so it sits as a text link under the
   primary button rather than in a second pill. */
.hero__invite {
  margin-top: 0;
  margin-bottom: 2.5rem;
  max-width: 34ch;
  /* A full sentence reads badly in spaced capitals, so this one link drops
     the label treatment and sets as display type. */
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  text-transform: none;
  line-height: 1.25;
  align-items: flex-end;
  /* The rule is drawn at the link's bottom edge, so this is the gap between
     "our team" and the line. The base .cta's 0.5rem is sized for 12px caps. */
  padding-bottom: 1.25rem;
}

/* Home hero, desktop: the body spans the full grid so the invitation can
   sit to the right of the paragraph — lead on columns 1–6, invitation on
   8–12, both hanging from the same top line. */
@media (min-width: 1025px) {
  .hero__body--split {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
  }

  .hero__body--split > * {
    grid-column: 1 / span 8;
  }

  .hero__body--split > .hero__lead,
  .hero__body--split > .hero__actions {
    grid-column: 1 / span 6;
  }

  .hero__body--split > .hero__invite {
    grid-column: 8 / -1;
    grid-row: 2; /* the paragraph's row: h1 is row 1 */
    margin-bottom: 0;
    /* optical: sits level with the paragraph's first line */
    margin-top: 0.1em;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__deco {
  position: absolute;
  right: -3%;
  bottom: 0;
  z-index: 1;
  width: clamp(180px, 22vw, 340px);
}

/* --- Rule-led blocks ------------------------------------------------------ */
/* v2 replaces v1's filled white cards with hairline-led blocks, so every
   grid on the site shares one editorial language. */

/* Thirds of 12 = 4 columns each, so these edges sit on master lines 1, 5, 9. */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 3rem;
}

/* Halves of 12 = 6 columns each: master lines 1 and 7. */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 3rem;
}

.card {
  padding-top: 28px;
  border-top: 1px solid var(--rule-strong);
  background: none;
}

.card__title {
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--plum);
  margin-bottom: 1.1rem;
}

.card p {
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ink-70);
}

/* Numbered pillars */
.pillar {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid var(--rule-strong);
}

.pillar__num {
  display: block;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--plum);
  margin-bottom: 2rem;
}

.pillar__title {
  font-size: var(--fs-h3);
  line-height: 1.08;
  color: var(--emerald);
  margin-bottom: 1.1rem;
}

.pillar p {
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ink-70);
}

/* --- Image tiles ---------------------------------------------------------- */
/* The device from Ekam's resource grid, rebuilt in this site's own language:
   the picture sits directly above the same hairline every other block hangs
   from, so a row of them reads as a gallery without reintroducing the filled
   cards v2 removed. Used twice — as the three pillars on the home page, and
   as a four-up index at the top of Services. */

.tile-media {
  position: relative;
  overflow: hidden;
  background: var(--bone);
}

.tile-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Pillar tiles run three across, so the picture stays landscape — a square at
   that width would stand taller than the copy beneath it. */
.pillar--tile {
  display: block;
  padding-top: 0;
  border-top: 0;
  color: inherit;
  text-decoration: none;
}

.pillar--tile .tile-media {
  aspect-ratio: 4 / 3;
}

/* The rule moves off the article and onto the text below the picture. */
.pillar--tile .tile-body {
  padding-top: 28px;
  border-top: 1px solid var(--rule-strong);
}

.pillar__title {
  transition: color 0.4s var(--ease);
}

.pillar--tile:hover .pillar__title,
.pillar--tile:focus-visible .pillar__title {
  color: var(--plum);
}

/* Quarters of 12 = 3 columns each, so these edges sit on master lines
   1, 4, 7 and 10. */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 3rem;
}

.tile {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Small enough that a square reads as a gallery frame rather than a slab. */
.tile .tile-media {
  aspect-ratio: 1 / 1;
}

.tile__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-strong);
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.tile__label .btn__arrow {
  color: var(--plum);
}

.tile:hover .tile__label,
.tile:focus-visible .tile__label {
  color: var(--plum);
  border-top-color: var(--plum);
}

@media (prefers-reduced-motion: no-preference) {
  .tile-media img {
    transition: transform 0.9s var(--ease);
  }

  .tile:hover .tile-media img,
  .pillar--tile:hover .tile-media img {
    transform: scale(1.04);
  }
}

/* Service list — used on the Services page under each pillar rail */
/* Halves of the 8-column content area: master lines 5 and 9. */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
}

.service {
  padding-block: 30px 34px;
  border-top: 1px solid var(--rule);
}

/* The first row hangs from the rail's rule, so it doesn't double up.
   Which items make up that row depends on the column count. */
.services > .service:first-child {
  border-top: none;
  padding-top: 0;
}

@media (min-width: 861px) {
  .services > .service:nth-child(2) {
    border-top: none;
    padding-top: 0;
  }
}

.service__title {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.014em;
  color: var(--plum);
  margin-bottom: 0.85rem;
}

.service p {
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ink-70);
  margin: 0;
}

/* Numbered steps on a dark band */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 3.5rem;
}

.step {
  padding-top: 28px;
  border-top: 1px solid var(--rule-light-strong);
}

.step__num {
  display: block;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--mint);
  margin-bottom: 1.75rem;
}

.step__title {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.014em;
  color: var(--white);
  margin-bottom: 0.85rem;
}

.step p {
  font-size: var(--fs-small);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.66);
  margin: 0;
}

/* --- People --------------------------------------------------------------- */

/* v3: nine people, so three across — which is also what keeps the cards on the
   master grid, since thirds of 12 fall on lines 1, 5 and 9 exactly as .grid-3. */
.people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 3.5rem;
}

.person {
  padding-top: 28px;
  border-top: 1px solid var(--rule-strong);
}

.person__portrait {
  position: relative;
  width: clamp(120px, 12vw, 156px);
  aspect-ratio: 1;
  margin-bottom: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--emerald);
  overflow: hidden;
}

/* Cycles on 3 rather than alternating, so at three columns the plum falls in a
   clean centre stripe instead of scattering diagonally across the grid. */
.person:nth-child(3n + 2) .person__portrait {
  background: var(--plum);
}

.person__initials {
  font-family: var(--display);
  font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-indent: 0.08em;
  color: var(--white);
}

.person__name {
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 0.6rem;
}

.person__role {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 1.4rem;
}

.person p {
  font-size: var(--fs-small);
  line-height: 1.68;
  color: var(--ink-70);
}

/* Placeholder cards. Deliberately drained of colour and set in a dashed
   outline so nobody mistakes one for a real person mid-review. Remove the
   class once the card carries a real name — nothing else needs changing. */
.person--tbc .person__portrait,
.person--tbc:nth-child(3n + 2) .person__portrait {
  background: transparent;
  border: 1px dashed var(--rule-strong);
}

.person--tbc .person__initials {
  color: var(--ink-55);
}

.person--tbc .person__name,
.person--tbc .person__role,
.person--tbc p {
  color: var(--ink-55);
}

/* The aside circle on "How we do it" was filling its four columns (427px at
   1440) against ~225px of copy, leaving a void under "See how we work".
   Sized to the copy beside it rather than to its columns, so the section ends
   where the text does. Below 1024px the existing 320px rule applies. */
@media (min-width: 1025px) {
  .rail--aside .panel__media {
    max-width: 250px;
  }
}

/* --- Team page ------------------------------------------------------------ */
/* Sixths of 12 = 2 columns each: master lines 1, 3, 5, 7, 9 and 11. Each
   member is display: contents, so its face button and its bio panel are
   both direct grid items. The panel spans the full width, and dense packing
   lets the members that follow it backfill the rest of the button's row —
   so an open bio always lands directly beneath the row of the face that
   opened it, with no script measuring rows. DOM order stays alphabetical,
   and each panel sits right after its own button for keyboard and screen
   reader users. */
.team {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: dense;
  column-gap: var(--gutter);
  row-gap: 3.25rem;
  /* Buttons centre their content vertically, so a stretched button beside a
     neighbour with a three-line role would float its name mid-cell. Start
     alignment keeps every name on the same line across the row. */
  align-items: start;
}

.member {
  display: contents;
}

.member__toggle {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.member__toggle:focus-visible {
  outline: none; /* the ring is drawn on the portrait below */
}

.member__portrait {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bone);
  box-shadow: 0 0 0 1px var(--rule);
  transition: box-shadow 0.35s var(--ease);
}

.member__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member__toggle:hover .member__portrait,
.member__toggle:focus-visible .member__portrait {
  box-shadow: 0 0 0 1px var(--rule), 0 0 0 4px var(--paper), 0 0 0 5px var(--emerald);
}

.member__toggle[aria-expanded="true"] .member__portrait {
  box-shadow: 0 0 0 1px var(--rule), 0 0 0 4px var(--paper), 0 0 0 5px var(--plum);
}

.member__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

/* Keeps a hyphenated surname on one line (build_team.py adds it). */
.nowrap {
  white-space: nowrap;
}

/* The plus is the only affordance that this is a control, so it is always
   drawn, and turns into a cross when the bio is open. */
.member__name::after {
  content: "+";
  flex: none;
  font-weight: 300;
  color: var(--plum);
  transition: transform 0.35s var(--ease);
}

.member__toggle[aria-expanded="true"] .member__name::after {
  transform: rotate(45deg);
}

.member__role {
  display: block;
  font-family: var(--body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--plum);
}

.member__panel {
  grid-column: 1 / -1;
}

.member__panel[hidden] {
  display: none;
}

.member__panel .rail {
  padding-bottom: 8px;
}

.member__panel .member__role {
  margin-top: 0.6rem;
}

.member__panel p + p {
  margin-top: 1em;
}

.member__close {
  margin-top: 1.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .member__panel:not([hidden]) {
    animation: panel-in 0.55s var(--ease);
  }

  @keyframes panel-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* People named by the client whose photo and bio have not arrived yet: an
   initials disc in the brand green, and no toggle, so there is no empty
   profile to open. Swap in the photo and bio and the card becomes live. */
.member__toggle--static {
  cursor: default;
}

.member__portrait--initials {
  display: grid;
  place-items: center;
  background: var(--emerald);
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
  letter-spacing: 0.06em;
  color: var(--white);
}

.member__name--static::after {
  content: none;
}

/* --- Team strip (home page teaser) ---------------------------------------- */
/* A single row of faces, each linking to its profile on the Team page. */
.team-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--gutter);
}

/* Eight to a row, so fifteen reads as a full row and a row of seven; the
   circle takes the column's width, so it scales with the page. Eight does
   not divide the 12-column master grid — only the outer edges sit on master
   lines, which is fine for a row of faces. */
.team-strip a {
  display: block;
  text-decoration: none;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bone);
  box-shadow: 0 0 0 1px var(--rule);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.team-strip a:hover,
.team-strip a:focus-visible {
  outline: none;
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--rule), 0 0 0 3px var(--white), 0 0 0 4px var(--emerald);
}

.team-strip__initials {
  text-decoration: none;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--emerald);
  font-family: var(--display);
  font-size: clamp(0.875rem, 1.6vw, 1.5rem);
  letter-spacing: 0.06em;
  color: var(--white);
}

.team-strip img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Bands ---------------------------------------------------------------- */

.band--plum {
  background: var(--plum);
  color: var(--white);
}
.band--lavender {
  background: var(--lavender);
}
.band--charcoal {
  background: var(--charcoal);
  color: var(--white);
}
.band--emerald {
  background: var(--emerald);
  color: var(--white);
}

/* v3: the one full-bleed stone moment per page. The image sits behind the
   whole band and a scrim carries the type; the fallback colour matters because
   it is what shows for the instant before the photograph decodes. */
.band--stone {
  position: relative;
  overflow: hidden;
  background: var(--emerald-deep);
  color: var(--white);
}

.band--stone > .band__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.band--stone > .band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Heavier than the hero scrim — the band carries running body copy, not a
   single display line, so legibility wins over drama. It lightens to the
   right, where there is no text, so the stone still reads as stone. */
.band--stone > .band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--emerald-scrim), 0.94) 0%,
    rgba(var(--emerald-scrim), 0.88) 46%,
    rgba(var(--emerald-scrim), 0.66) 100%
  );
}

.band--stone > .wrap,
.band--stone > .deco {
  position: relative;
  z-index: 1;
}
.band--white {
  background: var(--white);
}
.band--bone {
  background: var(--bone);
}

.quote {
  font-family: var(--display);
  font-size: clamp(1.875rem, 3.5vw, 3.125rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.028em;
  max-width: 19ch;
  margin: 0 0 2.5rem;
}

.quote__body {
  max-width: 58ch;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.76);
}

/* --- Media panel (text + circular image) ---------------------------------- */

.panel__media {
  position: relative;
  aspect-ratio: 1;
}

.panel__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.panel__media .shape {
  z-index: 0;
}

/* --- Contact band --------------------------------------------------------- */

.contact__mail {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  letter-spacing: -0.014em;
  color: var(--emerald);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 128, 93, 0.32);
  padding-bottom: 0.35rem;
  margin-bottom: 2.5rem;
  transition: border-color 0.5s var(--ease);
  overflow-wrap: break-word;
}

.contact__note {
  margin-top: 1rem;
  margin-bottom: 2rem;
  color: var(--ink-70);
}

/* In the Sept 2026 contact block the address follows the button. */
.contact__mail--after {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.contact__mail:hover {
  border-color: var(--emerald);
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  background: var(--charcoal);
  color: rgba(255, 255, 255, 0.62);
  padding-block: var(--section-y) 40px;
  font-size: var(--fs-small);
}

.footer__top {
  padding-bottom: 72px;
  border-bottom: 1px solid var(--rule-light);
}

.footer__brand {
  grid-column: 1 / span 4;
}

.footer__group:nth-child(2) {
  grid-column: 5 / span 2;
}
.footer__group:nth-child(3) {
  grid-column: 7 / span 3;
}
.footer__group:nth-child(4) {
  grid-column: 10 / -1;
}

.footer__logo {
  width: 196px;
}

.footer__heading {
  font-family: var(--body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.75rem;
}

.footer__group li {
  margin-bottom: 0.85rem;
}

.footer__group a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
  overflow-wrap: anywhere;
}

.footer__group a:hover {
  color: var(--white);
  border-bottom-color: var(--mint);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2.5rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

/* --- Motion --------------------------------------------------------------- */
/* Slower and shallower than v1 — the movement should barely register. */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Children of a staggered block arrive in sequence. */
  .stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
  }

  .stagger.is-visible > * {
    opacity: 1;
    transform: none;
  }

  .stagger.is-visible > *:nth-child(2) {
    transition-delay: 0.09s;
  }
  .stagger.is-visible > *:nth-child(3) {
    transition-delay: 0.18s;
  }
  .stagger.is-visible > *:nth-child(4) {
    transition-delay: 0.27s;
  }
  .stagger.is-visible > *:nth-child(5) {
    transition-delay: 0.36s;
  }
  .stagger.is-visible > *:nth-child(6) {
    transition-delay: 0.45s;
  }

  /* The hero settles on load rather than appearing. */
  .hero__media img {
    animation: hero-settle 2.4s var(--ease) both;
  }

  .hero__body > * {
    opacity: 0;
    animation: rise 1.1s var(--ease) forwards;
  }
  .hero__body > *:nth-child(1) {
    animation-delay: 0.15s;
  }
  .hero__body > *:nth-child(2) {
    animation-delay: 0.27s;
  }
  .hero__body > *:nth-child(3) {
    animation-delay: 0.39s;
  }
  .hero__body > *:nth-child(4) {
    animation-delay: 0.51s;
  }

  .hero__body > *:nth-child(5) {
    animation-delay: 0.63s;
  }
}

@keyframes hero-settle {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --nav-h: 76px;
    --section-y-sm: 52px;
    --section-y: 68px;
    --section-y-lg: 84px;
    --gutter: 32px;
  }

  /* Below the desktop grid the rail stacks, but everything still shares one
     set of column edges — now six of them. */
  .rail,
  .contact__grid,
  .footer__top,
  .hero__inner {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 32px;
  }

  .rail__head,
  .contact__head,
  .rail__aside,
  .footer__brand,
  .hero__body {
    grid-column: 1 / -1;
  }

  .rail__body,
  .contact__body,
  .rail--aside .rail__body {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }

  .rail__body > *,
  .contact__body > *,
  .rail--aside .rail__body > * {
    grid-column: 1 / -1;
  }

  /* Halves and thirds of six. */
  .footer__group:nth-child(2) {
    grid-column: 1 / span 2;
  }
  .footer__group:nth-child(3) {
    grid-column: 3 / span 2;
  }
  .footer__group:nth-child(4) {
    grid-column: 5 / -1;
  }

  .grid-3,
  .steps,
  .people,
  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  /* 21 faces: 7 across gives three full rows, no face left on its own. */
  .team-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .panel__media {
    max-width: 320px;
  }
}

@media (max-width: 860px) {
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1.5rem var(--pad) 2.5rem;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    box-shadow: 0 20px 40px rgba(41, 41, 36, 0.1);
    transform: translateY(-140%);
    transition: transform 0.6s var(--ease);
  }

  .nav.is-open .nav__links {
    transform: none;
  }

  .nav__link,
  .nav.is-solid .nav__link {
    width: 100%;
    padding-block: 1rem;
    font-size: 0.75rem;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }

  .nav__link::after {
    display: none;
  }

  .nav__cta,
  .nav.is-solid .nav__cta {
    margin-top: 1.75rem;
    border-color: var(--rule-strong);
    color: var(--ink);
  }

  .nav__toggle {
    display: block;
  }

  .services,
  .grid-2,
  .people {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__group:nth-child(2) {
    grid-column: 1 / span 3;
  }
  .footer__group:nth-child(3) {
    grid-column: 4 / -1;
  }
  .footer__group:nth-child(4) {
    grid-column: 1 / -1;
    margin-top: 1rem;
  }
}

@media (max-width: 620px) {
  :root {
    --pad: 20px;
    --gutter: 20px;
    --section-y-sm: 36px;
    --section-y: 44px;
    --section-y-lg: 52px;
  }

  .grid-3,
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The index stays two across rather than stacking: four full-width squares
     would be most of a phone screen's scroll for what is only a contents
     list. The label steps down instead so it still fits on one or two lines. */
  .tiles {
    row-gap: 2rem;
  }

  .tile__label {
    margin-top: 14px;
    padding-top: 14px;
    font-size: 0.9375rem;
  }

  .team {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }

  /* 3 across: seven full rows. */
  .team-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .member__name {
    font-size: 1rem;
  }

  .hero h1 {
    max-width: none;
  }

  .hero__deco {
    display: none;
  }

  .hero__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .footer__group:nth-child(2),
  .footer__group:nth-child(3),
  .footer__group:nth-child(4) {
    grid-column: 1 / -1;
    margin-top: 0;
  }
}

/* --- Narrow screens: decoration and the contact button -------------------- */
/* Once the columns stack, text runs the full width of each band, so shapes
   that sat in an empty column on desktop start to sit under words. Each one
   is moved into padding, made smaller, or dropped. Their sizes and positions
   are inline on the shapes themselves, hence !important. */
@media (max-width: 1024px) {
  /* Contact: the small emerald disc moves from beside the email address to
     the top-right corner, clear of the heading. */
  #contact .shape--circle.fill-emerald {
    left: auto !important;
    bottom: auto !important;
    right: -20px !important;
    top: 20px !important;
    width: 64px !important;
  }

  /* Services, Legacy Protection: the plum quarter would sit under the last
     service in the list. */
  #legacy-protection .deco {
    display: none;
  }
}

@media (max-width: 620px) {
  /* Contact: room below the email address for the plum corner. */
  #contact {
    padding-bottom: 112px;
  }

  #contact .shape--q-br.fill-plum {
    width: 96px !important;
  }

  #contact .shape--circle.fill-emerald {
    top: 8px !important;
    width: 52px !important;
  }

  /* The contact button's label is a full sentence: on a phone it wraps inside
     the button instead of running off the screen. */
  .contact__body .btn {
    white-space: normal;
    width: 100%;
    justify-content: center;
    text-align: center;
    line-height: 1.5;
    padding: 1rem 1.5rem;
    border-radius: 28px;
  }

  /* The address is one unbreakable string; it scales with the screen so it
     stays on one line down to a 320px phone. */
  .contact__mail {
    font-size: clamp(0.875rem, 4.4vw, 1.0625rem);
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* Home, Why we do this: a smaller corner keeps clear of the heading. */
  #why .shape--q-tr {
    width: 110px !important;
  }

  /* Home, Three pillars: a smaller corner keeps clear of the link above it. */
  #what-we-do .shape--q-br {
    width: 88px !important;
  }

  /* Services, How we do it: the heading fills the width here. */
  #how .deco {
    display: none;
  }
}

/* --- Spacing utilities ---------------------------------------------------- */
/* Last in the file so they override component defaults such as .cta. */

.mt-60 {
  margin-top: 72px;
}
.mt-40 {
  margin-top: 48px;
}

@media (max-width: 1024px) {
  .mt-60 {
    margin-top: 48px;
  }
  .mt-40 {
    margin-top: 36px;
  }
}