/* ==========================================================================
   CJ DECORATORS LTD — Design System  (v2: premium minimal, light, on-brand)
   Real brand colours sampled from logo: green #51AF31 · blue #009FE3
   Direction: restrained, architectural, lots of whitespace, hairline rules.
   No invented imagery — photography slots are honest, labelled placeholders.
   ========================================================================== */

/* ----- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Surfaces (light) */
  --paper:    #ffffff;
  --paper-2:  #f5f7f8;   /* cool off-white alt section */
  --paper-3:  #eef1f3;   /* placeholder / panel */
  --ink:      #14181b;   /* near-black text + primary buttons */
  --ink-2:    #2b3238;
  --muted:    #5c666c;   /* secondary text */
  --muted-2:  #8a9298;   /* tertiary / captions */
  --line:     #e4e8ea;   /* hairlines */
  --line-2:   #d3d9dc;

  /* Brand */
  --green:        #51af31;
  --green-deep:   #3f8c25;  /* green that passes contrast on white for text */
  --green-tint:   #eef6ea;
  --blue:         #009fe3;
  --blue-deep:    #0072a8;  /* accessible blue for inline links */
  --blue-tint:    #e6f5fc;

  /* Form validation */
  --error:      #b3261e;
  --error-tint: #fdecea;

  /* Type */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Fluid scale */
  --t-label:   0.78rem;
  --t-sm:      0.9375rem;
  --t-body:    1.0625rem;
  --t-lead:    clamp(1.125rem, 0.98rem + 0.7vw, 1.375rem);
  --t-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --t-h2:      clamp(1.9rem, 1.4rem + 2.4vw, 3.1rem);
  --t-display: clamp(2.5rem, 1.5rem + 4.6vw, 5.25rem);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --radius: 8px;
  --radius-sm: 5px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-sm: 0 1px 2px rgba(20,24,27,0.04), 0 6px 20px -12px rgba(20,24,27,0.12);
  --shadow:    0 24px 60px -34px rgba(20,24,27,0.30);
}

/* ----- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--green-tint); }

/* ----- 3. Layout helpers -------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.section { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bg-paper { background: var(--paper); }
.bg-paper-2 { background: var(--paper-2); }
.bg-ink { background: var(--ink); color: #fff; }
.bg-ink * { border-color: rgba(255,255,255,0.14); }

/* ----- 4. Typography utilities ------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--green-deep);
}
.eyebrow::before { content: ""; width: 1.6rem; height: 2px; background: var(--green); border-radius: 2px; }
.eyebrow--blue { color: var(--blue-deep); }
.eyebrow--blue::before { background: var(--blue); }
.bg-ink .eyebrow { color: #9fe089; }
.bg-ink .eyebrow--blue { color: #6fd0f5; }

.display { font-size: var(--t-display); letter-spacing: -0.04em; line-height: 1.0; }
.h2 { font-size: var(--t-h2); }
.h3 { font-size: var(--t-h3); }
.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--muted); max-width: 60ch; }
.bg-ink .lead { color: rgba(255,255,255,0.72); }
.muted { color: var(--muted); }
.measure { max-width: 64ch; }
.text-green { color: var(--green-deep); }
.text-blue { color: var(--blue-deep); }

.section-head { max-width: 46ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .eyebrow { margin-bottom: 1.25rem; }
.section-head .lead { margin-top: 1.25rem; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; max-width: none; }

/* ----- 5. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.9rem 1.5rem; font-weight: 600; font-size: var(--t-sm); letter-spacing: -0.01em;
  border-radius: var(--radius-sm); border: 1px solid transparent; transition: all 0.25s var(--ease); white-space: nowrap;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn--primary:hover { background: #000; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }
.bg-ink .btn--primary { background: #fff; color: var(--ink); border-color: #fff; }
.bg-ink .btn--primary:hover { background: var(--green); border-color: var(--green); color: #06270a; }
.bg-ink .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.28); }
.bg-ink .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.arrow {
  display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--blue-deep);
  transition: gap 0.2s var(--ease); width: fit-content;
}
.arrow svg { width: 1em; height: 1em; transition: transform 0.2s var(--ease); }
.arrow:hover { gap: 0.8rem; }
.arrow--ink { color: var(--ink); }
.bg-ink .arrow { color: #6fd0f5; }

/* ----- 6. Header / Nav ---------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px) saturate(150%); border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 0 rgba(20,24,27,0.02); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 2rem; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 0.15rem; }
.nav__links a {
  padding: 0.55rem 0.9rem; font-size: 0.925rem; font-weight: 500; color: var(--ink-2);
  border-radius: var(--radius-sm); transition: color 0.2s, background 0.2s; position: relative;
}
.nav__links a:hover { color: var(--ink); background: var(--paper-2); }
.nav__links a.is-active { color: var(--blue-deep); }
.nav__right { display: flex; align-items: center; gap: 0.85rem; flex-shrink: 0; }
.nav__phone { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 0.9rem; color: var(--ink-2); }
.nav__phone svg { width: 1em; height: 1em; color: var(--green-deep); }
.nav__toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: #fff; align-items: center; justify-content: center; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: 0.3s; }
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
body.nav-open .nav__toggle span { background: transparent; }
body.nav-open .nav__toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav__toggle span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1040px) {
  .nav__phone { display: none; }
  .nav__links { display: flex; flex-direction: column; } /* stack links inside the dropdown panel */
  .nav__toggle { display: inline-flex; }
  .nav__panel {
    /* The header uses backdrop-filter, which makes it the containing block for
       fixed descendants — so size by viewport height rather than bottom:0. */
    position: fixed; top: 76px; right: 0; left: 0; height: calc(100vh - 76px); height: calc(100dvh - 76px);
    background: var(--paper); z-index: 99; border-top: 1px solid var(--line);
    padding: 1.5rem var(--gutter) 3rem; display: flex; flex-direction: column;
    transform: translateY(-10px); opacity: 0; pointer-events: none; transition: 0.3s var(--ease); overflow-y: auto;
  }
  body.nav-open .nav__panel { transform: none; opacity: 1; pointer-events: auto; }
  .nav__panel a { padding: 1.05rem 0.25rem; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; border-bottom: 1px solid var(--line); }
  .nav__panel a.is-active { color: var(--blue-deep); }
  .nav__panel .btn { margin-top: 1.5rem; justify-content: center; }
}
@media (min-width: 1041px) { .nav__panel { display: contents; } }

/* ----- 7. Hero ------------------------------------------------------------ */
.hero { position: relative; padding-top: calc(76px + clamp(3.5rem, 8vw, 7rem)); padding-bottom: clamp(3.5rem, 7vw, 6rem); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__title { margin-top: 1.5rem; }
.hero__sub { margin-top: 1.75rem; max-width: 52ch; }
.hero__actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero__aside { position: relative; }
/* brand ring motif drawn from the logo — pure vector, no imagery */
.ring-motif { width: 100%; max-width: 420px; margin-inline: auto; }
.hero__stats { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; border-top: 1px solid var(--line); padding-top: 2rem; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__aside { display: none; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
}

/* ----- 7b. Video hero ----------------------------------------------------- */
.hero--video { min-height: min(92vh, 820px); display: flex; align-items: center; padding-top: calc(76px + clamp(1rem, 3vh, 2.5rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); overflow: hidden; isolation: isolate; }
/* keep hero content compact so it always fits a pinned 100vh scene without clipping */
.hero--video .display { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.9rem); line-height: 1.02; }
.hero--video .hero__sub { margin-top: 1.1rem; font-size: clamp(1.02rem, 0.95rem + 0.45vw, 1.2rem); max-width: 48ch; }
.hero--video .hero__actions { margin-top: 1.5rem; }
.hero--video .hero__stats { margin-top: clamp(1.5rem, 3.5vh, 2.4rem); padding-top: clamp(1.1rem, 2.5vh, 1.6rem); }
.hero__video, .hero__poster {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--ink);
}
.hero__poster { z-index: 0; } /* sits under <video>; visible until video paints */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,16,20,0.82) 0%, rgba(10,16,20,0.52) 38%, rgba(10,16,20,0.12) 70%, rgba(10,16,20,0.02) 100%),
    linear-gradient(0deg, rgba(10,16,20,0.55) 0%, rgba(10,16,20,0.05) 40%);
}
.hero--video .hero__content { position: relative; z-index: 2; width: 100%; color: #fff; }
.hero--video .hero__title { color: #fff; }
.hero--video .lead { color: rgba(255,255,255,0.88); }
.hero--video .eyebrow { color: #9fe089; }
.hero--video .eyebrow::before { background: #9fe089; }
.hero--video .stat__num { color: #fff; }
.hero--video .stat__num em { color: #9fe089; }
.hero--video .stat__label { color: rgba(255,255,255,0.7); }
.hero--video .hero__stats { border-top-color: rgba(255,255,255,0.2); }
.hero--video .btn--primary { background: #fff; color: var(--ink); border-color: #fff; }
.hero--video .btn--primary:hover { background: var(--green); border-color: var(--green); color: #06270a; }
.hero--video .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
.hero--video .btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.12); }
.hero--video .hero__stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .hero--video .hero__stats { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } } /* show poster instead of motion */

/* Subpage video hero (e.g. Projects) — shorter height, light breadcrumb,
   stronger scrim so white text reads over brighter interior footage */
.hero--sub { min-height: min(64vh, 600px); }
.hero--video .breadcrumb { color: rgba(255,255,255,0.72); }
.hero--video .breadcrumb a { color: rgba(255,255,255,0.72); }
.hero--video .breadcrumb a:hover { color: #fff; }
.hero--dim .hero__scrim {
  background:
    linear-gradient(90deg, rgba(8,10,14,0.9) 0%, rgba(8,10,14,0.62) 42%, rgba(8,10,14,0.28) 78%, rgba(8,10,14,0.12) 100%),
    linear-gradient(0deg, rgba(8,10,14,0.62) 0%, rgba(8,10,14,0.08) 45%);
}

/* ----- 8. Stats ----------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: 0.35rem; }
.stat__num { font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.85rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.stat__num em { font-style: normal; color: var(--green-deep); }
.stat__label { font-size: 0.82rem; color: var(--muted); letter-spacing: 0.01em; }
.bg-ink .stat__label { color: rgba(255,255,255,0.6); }

/* ----- 9. Grids ----------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--text { grid-template-columns: 1.05fr 0.95fr; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split--text { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
}
@media (max-width: 600px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
}

/* ----- 10. Cards ---------------------------------------------------------- */
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2rem); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s; }
.card:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.bg-paper-2 .card { background: #fff; }
.card__icon { width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--green-tint); color: var(--green-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; }
.card__icon--blue { background: var(--blue-tint); color: var(--blue-deep); }
.card__icon svg { width: 22px; height: 22px; }
.card h3 { font-size: 1.18rem; margin-bottom: 0.55rem; }
.card p { font-size: var(--t-sm); color: var(--muted); }
.card__num { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: var(--muted-2); letter-spacing: 0.04em; }

/* --- Sticky card stack (Capabilities) --- */
.capstack__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.capstack__intro { position: sticky; top: 108px; }
/* Travel for the last card comes from a spacer INSIDE the flex container:
   sticky is clamped to the parent's content box, so padding-bottom gives the
   final card nothing to travel through and it never pins. */
.capstack__cards { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 0; }
.capstack__spacer { flex: 0 0 auto; height: 30vh; }
.capcard {
  position: sticky;
  top: calc(108px + var(--i) * 16px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.6rem, 2.5vw, 2.2rem);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.3s var(--ease);
}
.capcard:hover { border-color: var(--line-2); }
.capcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }
.capcard__head .card__icon { margin-bottom: 0; }
.capcard__num { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--green-deep); letter-spacing: 0.02em; line-height: 1; }
.capcard:nth-child(even) .capcard__num { color: var(--blue-deep); }
.capcard h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); margin-bottom: 0.5rem; }
.capcard__tag { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.02rem; margin-bottom: 0.5rem; }
.capcard p:not(.capcard__tag) { font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
@media (max-width: 900px) {
  .capstack__grid { grid-template-columns: 1fr; }
  .capstack__intro { position: static; margin-bottom: 2.5rem; }
  /* the stack works on mobile too: tighter offsets, and a top that clears the
     76px fixed header */
  .capcard { position: sticky; top: calc(90px + var(--i) * 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .capstack__intro { position: static; }
  .capcard { position: relative; }
}

/* ----- 11. Service / index rows ------------------------------------------ */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 5rem 1fr auto; gap: 1.5rem; align-items: baseline;
  padding: 1.9rem 0.5rem; border-bottom: 1px solid var(--line);
  transition: background 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.row:hover { background: var(--paper-2); padding-left: 1.1rem; }
.row__no { font-family: var(--font-display); font-weight: 600; color: var(--muted-2); font-size: 0.95rem; }
.row__body h3 { font-size: var(--t-h3); margin-bottom: 0.5rem; }
.row__body p { color: var(--muted); max-width: 62ch; font-size: var(--t-sm); }
.row__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tag { font-size: 0.78rem; font-weight: 500; padding: 0.32rem 0.7rem; border: 1px solid var(--line-2); border-radius: 999px; color: var(--muted); }
.tag:hover { border-color: var(--blue); color: var(--blue-deep); }
.row__media { color: var(--muted-2); }
.row__media svg { width: 26px; height: 26px; }
@media (max-width: 680px) { .row { grid-template-columns: 2.5rem 1fr; } .row__media { display: none; } }

/* ----- 12. Media slot (honest photography placeholder) ------------------- */
.media {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background:
    linear-gradient(135deg, var(--paper-2), var(--paper-3));
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.media::before { /* faint brand wash */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 85% 15%, rgba(0,159,227,0.06), transparent 45%),
              radial-gradient(120% 120% at 10% 90%, rgba(81,175,49,0.07), transparent 45%);
}
.media__note { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; color: var(--muted-2); text-align: center; padding: 1.5rem; }
.media__note svg { width: 30px; height: 30px; opacity: 0.7; }
.media__label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); }
.media__cap { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.media--4x5 { aspect-ratio: 4/5; }
.media--4x3 { aspect-ratio: 4/3; }
.media--16x9 { aspect-ratio: 16/9; }
.media--21x9 { aspect-ratio: 21/9; }
.media--tall { aspect-ratio: 3/4; }
/* real photo, when supplied: add class .media--photo and inline background-image */
.media--photo { background-size: cover; background-position: center; }
.media--photo .media__note { display: none; }
/* looping video fill */
.media--video::before { display: none; }
.media__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* --- Featured project (Projects page) — edge-bleed cinematic video ------ */
.feat { overflow: hidden; }
.feat__grid {
  display: grid; grid-template-columns: minmax(0, min(67vw, 1100px)) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem); align-items: center;
}
.feat__media {
  position: relative; overflow: hidden; background: var(--ink);
  border-radius: var(--radius);
  margin-left: clamp(1rem, 2.5vw, 2.5rem);   /* breathe off the viewport edge so the rounding reads */
  box-shadow: var(--shadow);
}
.feat__video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 72vh; object-fit: cover; }
.feat__body { min-width: 0; padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.feat__meta { display: flex; flex-wrap: wrap; gap: 1.1rem 2.25rem; margin: 1.4rem 0 0; }
.feat__meta dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.25rem; }
.feat__meta dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.01em; }
.feat__kicker { margin-top: 1rem; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.015em; color: var(--ink); max-width: 26ch; }
@media (max-width: 960px) {
  .feat__grid { grid-template-columns: 1fr; gap: 1.9rem; }
  .feat__media { margin-inline: var(--gutter); }   /* inset strip, rounding visible both sides */
  .feat__body { padding-inline: var(--gutter); }
}

/* --- Expanding project selector (More projects) ------------------------- */
.expsel { position: relative; display: flex; gap: 0.6rem; height: clamp(340px, 40vw, 460px); }

/* Only five cards share the row at a time, so the open/collapsed proportions
   stay exactly as they were when there were only five projects. The arrows
   step the window along, revealing one further project per click. */
.expsel__opt.is-out { display: none; }
.expsel__nav {
  position: absolute; top: 50%; z-index: 4;
  width: 48px; height: 48px; border-radius: 999px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,24,27,0.72); color: #fff; cursor: pointer;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.38);
  transform: translateY(-50%);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.expsel__nav:hover { background: var(--ink); border-color: rgba(255,255,255,0.6); transform: translateY(-50%) scale(1.07); }
.expsel__nav:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.expsel__nav svg { width: 21px; height: 21px; }
.expsel__nav--next { right: 0.85rem; }
.expsel__nav--prev { left: 0.85rem; }
.expsel__opt {
  position: relative; flex: 1 1 0%; min-width: 0; padding: 0; border: 0;
  cursor: pointer; overflow: hidden; isolation: isolate;
  border-radius: var(--radius);
  background-color: var(--ink); background-size: cover; background-position: center;
  box-shadow: var(--shadow-sm);
  transition: flex 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.expsel__opt.is-active { flex: 6 1 0%; box-shadow: var(--shadow); }
.expsel__opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.expsel__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,13,15,0.74), rgba(10,13,15,0.18) 42%, transparent 62%);
  opacity: 0.55; transition: opacity 0.7s var(--ease);
}
.expsel__opt.is-active .expsel__shade { opacity: 1; }
.expsel__label {
  position: absolute; left: 0; right: 0; bottom: 1.1rem; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem;
  padding-inline: 1rem; pointer-events: none; text-align: left;
}
.expsel__head { display: flex; align-items: center; gap: 0.8rem; min-width: 0; max-width: 100%; }
.expsel__more {
  display: block; max-width: 52ch; max-height: 0; opacity: 0; transform: translateY(10px); overflow: hidden;
  transition: max-height 0.6s var(--ease), opacity 0.55s var(--ease) 0.18s, transform 0.55s var(--ease) 0.18s;
}
.expsel__opt.is-active .expsel__more { max-height: 240px; opacity: 1; transform: none; }
.expsel__desc { display: block; color: rgba(255,255,255,0.88); font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.85rem; white-space: normal; }
.expsel__more .pill-list { display: flex; }
.expsel__chip {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,24,27,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.35);
  font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; color: #fff;
}
.expsel__info { min-width: 0; overflow: hidden; white-space: nowrap; }
.expsel__title {
  display: block; font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem); letter-spacing: -0.015em; line-height: 1.25;
  opacity: 0; transform: translateX(22px); transition: opacity 0.55s var(--ease) 0.12s, transform 0.55s var(--ease) 0.12s;
}
.expsel__sub {
  display: block; font-size: 0.86rem; font-weight: 500; color: rgba(255,255,255,0.72); margin-top: 0.15rem;
  opacity: 0; transform: translateX(22px); transition: opacity 0.55s var(--ease) 0.2s, transform 0.55s var(--ease) 0.2s;
}
.expsel__opt.is-active .expsel__title, .expsel__opt.is-active .expsel__sub { opacity: 1; transform: translateX(0); }
/* staggered entrance once the reveal observer fires */
.js .reveal.expsel .expsel__opt { opacity: 0; transform: translateX(-40px); }
.js .reveal.expsel.is-in .expsel__opt {
  animation: expselIn 0.6s var(--ease) both;
  animation-delay: calc(var(--i) * 110ms);
}
@keyframes expselIn { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@media (max-width: 720px) {
  .expsel { flex-direction: column; height: auto; }
  .expsel__opt.is-out { display: block; }   /* stacked: every project is listed */
  .expsel__nav { display: none; }
  .expsel__opt { flex: 0 0 auto; height: 72px; transition: flex 0.7s var(--ease), height 0.7s var(--ease), box-shadow 0.7s var(--ease); }
  .expsel__opt.is-active { flex: 0 0 auto; height: clamp(340px, 82vw, 440px); }
  .expsel__title, .expsel__sub { opacity: 1; transform: none; }   /* labels always readable stacked */
  .expsel__label { bottom: 0.9rem; }
  .expsel__opt:not(.is-active) .expsel__label { bottom: 50%; transform: translateY(50%); }
  .expsel__opt:not(.is-active) .expsel__sub { display: none; }
  .expsel__opt:not(.is-active) .expsel__shade { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal.expsel .expsel__opt { opacity: 1; transform: none; animation: none; }
}

/* --- Sustainability page ------------------------------------------------ */
/* Compressed vertical rhythm, scoped to this page so other pages are unaffected.
   Aim: each section communicates one idea within roughly one viewport. */
.sus .section { padding-block: clamp(2.75rem, 5vw, 4rem); }
.sus .section--keep { padding-block: clamp(4rem, 8vw, 6.5rem); }  /* dark band keeps its drama */
.sus .section-head { margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }
/* headline total reads as one dashboard line: figure and label share a baseline */
.sus .sus-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.25rem; margin-bottom: 1.4rem; }
.sus .sus-total__intro { flex: 0 0 100%; margin-bottom: 0.15rem; }
.sus .sus-total__label { margin-top: 0; }
.sus .sus-callout { margin: 1.4rem 0; }
.sus .scopes__key { margin-top: 1.2rem; }
.sus .scopekey { padding-top: 0.85rem; }
.sus .drivers__list { gap: 1.15rem; }
.sus .drivers__title { margin-bottom: 1.1rem; }
.sus .drivers__foot { margin-top: 1.1rem; }
.sus .prio { padding: clamp(1.35rem, 2.2vw, 1.9rem) 0; }
/* priorities reuse the homepage card stack, but carry longer copy than the
   capability cards, so let them size to their content */
.sus .capcard { height: auto; min-height: clamp(220px, 24vw, 265px); justify-content: flex-start; }
.sus .capcard .prio__note { margin-top: 0.9rem; font-size: var(--t-sm); }
/* Sticky is constrained to the parent's CONTENT box, so padding-bottom gives the
   last card no travel. A spacer inside the box lets card 03 pin too. */
.sus .capstack__cards { padding-bottom: 0; }
.sus .capstack__spacer { flex: 0 0 auto; height: 34vh; }
/* climate project names are far longer than the project-page labels, so let
   the active panel's title wrap instead of being clipped by nowrap */
.sus .expsel__info { white-space: normal; }
.sus .expsel__title { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); line-height: 1.25; }
.sus .expsel__more { max-width: 46ch; }
.sus .ptable th, .sus .ptable td { padding-top: 0.9rem; padding-bottom: 0.9rem; }

/* hero proof line */
.sus-proof {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.sus-proof::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* headline total */
.sus-total { margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.sus-total__intro { font-size: var(--t-sm); color: var(--muted); margin-bottom: 0.6rem; }
.sus-total__fig {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95;
  font-size: clamp(3.5rem, 2rem + 7vw, 7rem); color: var(--ink);
}
.sus-total__unit { font-size: clamp(1rem, 0.8rem + 0.8vw, 1.6rem); font-weight: 600; letter-spacing: -0.01em; color: var(--green-deep); }
.sus-total__label { margin-top: 0.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }

/* scope proportion bar */
.scopes__bar { display: flex; height: 20px; border-radius: 3px; overflow: hidden; background: var(--paper-3); gap: 2px; }
.scopes__seg { display: block; min-width: 3px; }
.scopes__seg--s2 { background: var(--blue); }
.scopes__seg--s3 { background: var(--green); }
.scopes__key { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2.5vw, 2.5rem); margin: 1.75rem 0 0; }
.scopekey { border-top: 1px solid var(--line); padding-top: 1rem; }
.scopekey dt { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.scopekey dd { margin: 0; }
.scopekey__swatch { width: 10px; height: 10px; border-radius: 2px; background: var(--line-2); flex-shrink: 0; }
.scopekey__swatch--s2 { background: var(--blue); }
.scopekey__swatch--s3 { background: var(--green); }
.scopekey__fig { margin-top: 0.5rem !important; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); letter-spacing: -0.03em; color: var(--ink); }
/* :not([data-countup]) so the count-up wrapper keeps the figure's own size */
.scopekey__fig span:not([data-countup]) { font-size: 0.8rem; font-weight: 600; color: var(--muted-2); letter-spacing: 0; }
.scopekey__note { margin-top: 0.4rem !important; font-size: var(--t-sm); color: var(--muted); line-height: 1.5; }
.scopekey--dominant .scopekey__fig { color: var(--green-deep); }

/* pull-quote style callout */
.sus-callout {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0; padding-left: 1.25rem;
  border-left: 3px solid var(--green);
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 1.2;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.25rem); color: var(--ink); max-width: 24ch;
}

/* scope 3 drivers */
.drivers__title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.5rem; }
.drivers__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.driver { display: grid; grid-template-columns: minmax(120px, auto) 1fr; grid-template-areas: "fig name" "track track"; gap: 0.35rem 1.25rem; align-items: baseline; }
.driver__fig { grid-area: fig; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); letter-spacing: -0.03em; color: var(--ink); }
.driver__fig span { font-size: 0.75rem; font-weight: 600; color: var(--muted-2); letter-spacing: 0; }
.driver__name { grid-area: name; font-size: var(--t-sm); color: var(--muted); }
.driver__track { grid-area: track; height: 8px; border-radius: 3px; background: var(--paper-3); margin-top: 0.5rem; overflow: hidden; }
.driver__fill { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width 1.2s var(--ease); }
@media (prefers-reduced-motion: reduce) { .driver__fill { transition: none; } }
.drivers__foot { margin-top: 1.5rem; font-size: 0.78rem; color: var(--muted-2); }

/* priorities */
.prios { border-top: 1px solid var(--line); }
.prio { display: grid; grid-template-columns: 5rem minmax(0, 14rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); padding: clamp(2rem, 3.5vw, 3rem) 0; border-bottom: 1px solid var(--line); align-items: start; }
.prio__no { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--muted-2); padding-top: 0.35rem; }
.prio__kicker { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.8rem); letter-spacing: -0.025em; }
.prio__lead { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); margin-bottom: 0.8rem; }
.prio__body p { color: var(--muted); font-size: var(--t-sm); line-height: 1.65; max-width: 62ch; }
.prio__note { margin-top: 0.9rem; padding-left: 0.9rem; border-left: 2px solid var(--green); color: var(--ink-2) !important; }

/* pathway table */
.ptable-wrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; text-align: left; }
.ptable th, .ptable td { padding: 1.15rem 1.25rem 1.15rem 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.ptable thead th { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--line-2); padding-bottom: 0.9rem; }
.ptable tbody th { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--ink); letter-spacing: -0.015em; }
.ptable td { font-size: var(--t-sm); color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem; padding: 0.24rem 0.65rem; border-radius: 999px; border: 1px solid var(--line-2); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-2); }
.status--measured { color: var(--green-deep); border-color: rgba(81,175,49,0.4); }
.status--measured::before { background: var(--green); }
.status--progress::before { background: var(--blue); }

/* 2026 review — editorial band */
.review { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.review__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.3rem); color: #fff; }
.review__body p { color: rgba(255,255,255,0.72); line-height: 1.65; margin-bottom: 1.1rem; }
.review__note { margin-top: 1.4rem !important; margin-bottom: 0 !important; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.16); color: #9fe089 !important; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; }

/* understated trio (supply chain, accountability) */
.trio { --trio-gap: clamp(1.5rem, 3vw, 3rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--trio-gap); }
.trio__item { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
/* subtle Board -> Management -> Projects progression */
.trio--flow .trio__item { position: relative; }
.trio--flow .trio__item:not(:last-child)::after {
  content: ""; position: absolute; top: 0.35rem;
  right: calc(var(--trio-gap) / -2 - 4px);
  width: 7px; height: 7px;
  border-top: 2px solid var(--line-2); border-right: 2px solid var(--line-2);
  transform: rotate(45deg);
}
.trio__item h3 { font-size: 1.1rem; letter-spacing: -0.02em; margin-bottom: 0.55rem; }
.trio__item p { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; }

/* ecologi */
.eco { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.eco__panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.8rem, 3vw, 2.5rem); }
.eco__fig { display: flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4rem); color: var(--ink); }
/* :not([data-countup]) so the count-up wrapper keeps the figure's own size */
.eco__fig span:not([data-countup]) { font-size: 0.95rem; font-weight: 600; letter-spacing: 0; color: var(--green-deep); }
.eco__label { margin-top: 0.7rem; font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--ink-2); }
.eco__meta { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.78rem; line-height: 1.6; color: var(--muted); }

/* blueprint download */
.doc { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.doc__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; background: var(--paper-3); }
.doc__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.doc__meta { margin-top: 1rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }

@media (max-width: 900px) {
  .scopes__key { grid-template-columns: 1fr; gap: 0; }
  .scopekey { padding: 1rem 0; }
  .prio { grid-template-columns: 3.5rem 1fr; grid-template-areas: "no kicker" ". body"; gap: 0.75rem 1.25rem; }
  .prio__no { grid-area: no; }
  .prio__kicker { grid-area: kicker; }
  .prio__body { grid-area: body; margin-top: 0.4rem; }
  .review, .eco, .doc { grid-template-columns: 1fr; }
  .doc__media { order: 2; aspect-ratio: 16/10; }
  .trio { grid-template-columns: 1fr; }
  .trio--flow .trio__item:not(:last-child)::after { display: none; }   /* stacking order implies the sequence */
  /* pathway table stacks into labelled blocks */
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ptable, .ptable tbody, .ptable tr, .ptable th, .ptable td { display: block; width: 100%; }
  .ptable tr { padding: 1.4rem 0; border-bottom: 1px solid var(--line); }
  .ptable th, .ptable td { border: 0; padding: 0 0 0.7rem; }
  .ptable tbody th { font-size: 1.15rem; margin-bottom: 0.6rem; }
  .ptable td::before { content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.25rem; }
  .ptable tbody th::before { display: none; }
  .status { margin-left: 0; margin-top: 0.4rem; }
}
@media (max-width: 560px) {
  .driver { grid-template-columns: 1fr; grid-template-areas: "fig" "name" "track"; }
}

/* --- Services page ------------------------------------------------------ */
/* shared: section number + understated capability labels */
.svc-num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--muted-2); }
.svc-tags { display: flex; flex-wrap: wrap; gap: 0.5rem 1.15rem; margin-top: 1.3rem; }
.svc-tag { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.svc-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
/* images share one treatment across the page */
.svclead__media, .svcitem__media, .projcard__media { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--paper-3); }
.svclead__media img, .svcitem__media img, .projcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); }
.svcitem__media .media, .projcard__media .media { height: 100%; border: 0; border-radius: 0; }

/* 01 — primary service: dominant two-column band */
.svclead { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.svclead__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.04; margin-top: 1.1rem; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); }
.svclead__media { aspect-ratio: 4 / 3; }
.svclead__media:hover img { transform: scale(1.03); }

/* 02-06 — service panels (image-led, no card chrome) */
.svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.5rem); }
.svcgrid--2 { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.svcitem__media { aspect-ratio: 4 / 3; margin-bottom: 1.5rem; }
.svcitem--wide .svcitem__media { aspect-ratio: 16 / 10; }
.svcitem:hover .svcitem__media img { transform: scale(1.03); }
.svcitem__title { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); letter-spacing: -0.02em; margin: 0.75rem 0 0.7rem; }
.svcitem--wide .svcitem__title { font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.75rem); }
.svcitem p { color: var(--muted); font-size: var(--t-sm); line-height: 1.6; max-width: 46ch; }

/* project evidence */
.projgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 2.5vw, 2.25rem); }
.projcard { display: block; color: inherit; }
.projcard__media { aspect-ratio: 4 / 3; margin-bottom: 1.1rem; }
.projcard:hover .projcard__media img { transform: scale(1.03); }
.projcard__name { font-size: 1.1rem; letter-spacing: -0.02em; transition: color 0.25s var(--ease); }
.projcard:hover .projcard__name { color: var(--blue-deep); }
.projcard__type { display: block; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); }

@media (max-width: 1000px) {
  .svcgrid { grid-template-columns: repeat(2, 1fr); }
  .projgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  /* primary service stacks: text first, then image */
  .svclead { grid-template-columns: 1fr; gap: 1.9rem; }
  .svclead__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 760px) {
  .svcgrid, .svcgrid--2, .projgrid { grid-template-columns: 1fr; }
  .svcitem--wide .svcitem__media { aspect-ratio: 4 / 3; }
  .svcitem p { max-width: none; }
}

/* --- Feature grid with hover effects (How We Work, About) --------------- */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fgrid__cell { position: relative; padding: 2.4rem 1.9rem; border-right: 1px solid var(--line); }
.fgrid__cell:first-child { border-left: 1px solid var(--line); }
.fgrid__wash {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(to top, var(--paper-2), transparent);
  transition: opacity 0.25s var(--ease);
}
.fgrid__cell:hover .fgrid__wash { opacity: 1; }
.fgrid__num { position: relative; display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--muted-2); margin-bottom: 1.5rem; }
.fgrid__title { position: relative; font-size: 1.2rem; margin-bottom: 0.75rem; }
.fgrid__title::before {
  content: ""; position: absolute; left: -1.9rem; top: 50%; transform: translateY(-50%);
  width: 4px; height: 24px; border-radius: 0 4px 4px 0; background: var(--line-2);
  transition: height 0.2s var(--ease), background 0.2s var(--ease);
}
.fgrid__cell:hover .fgrid__title::before { height: 34px; background: var(--green); }
.fgrid__title span { display: inline-block; transition: transform 0.2s var(--ease); }
.fgrid__cell:hover .fgrid__title span { transform: translateX(8px); }
.fgrid__lead { position: relative; font-weight: 600; font-size: 0.95rem; color: var(--ink); line-height: 1.45; margin-bottom: 0.6rem; }
.fgrid__desc { position: relative; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
@media (max-width: 1000px) {
  .fgrid { grid-template-columns: 1fr 1fr; }
  .fgrid__cell { border: 0; border-bottom: 1px solid var(--line); }
  .fgrid__cell:nth-child(odd) { border-right: 1px solid var(--line); }
  .fgrid__cell:nth-last-child(-n+2) { border-bottom: 0; }
  .fgrid__cell:first-child { border-left: 0; }
}
@media (max-width: 640px) {
  .fgrid { grid-template-columns: 1fr; }
  .fgrid__cell { border: 0 !important; border-bottom: 1px solid var(--line) !important; padding: 1.9rem 0 1.9rem 1.6rem; }
  .fgrid__cell:last-child { border-bottom: 0 !important; }
  .fgrid__title::before { left: 0; }
}

/* --- Team showcase (About) — staggered grid + interactive name list ----- */
.team { display: flex; align-items: flex-start; gap: clamp(2rem, 4.5vw, 4rem); }
.team__grid { display: flex; gap: 0.75rem; flex-shrink: 0; }
.team__col { display: flex; flex-direction: column; gap: 0.75rem; }
.team__col--1 .team__card { width: clamp(112px, 11.5vw, 142px); height: clamp(118px, 12vw, 146px); }
.team__col--2 { margin-top: clamp(34px, 4.5vw, 56px); }
.team__col--2 .team__card { width: clamp(124px, 12.6vw, 156px); height: clamp(130px, 13.2vw, 160px); }
.team__col--3 { margin-top: clamp(16px, 2.2vw, 26px); }
.team__col--3 .team__card { width: clamp(116px, 12vw, 148px); height: clamp(124px, 12.6vw, 152px); }
.team__card {
  position: relative; overflow: hidden; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, var(--paper-3), var(--paper-2));
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s var(--ease), border-color 0.3s var(--ease);
}
.team__ph {
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  letter-spacing: 0.02em; color: var(--muted-2); transition: color 0.3s var(--ease);
}
/* when real photos are added, drop an <img> straight into .team__card */
.team__card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.85); transition: filter 0.5s var(--ease); }
.team--hover .team__card { opacity: 0.55; }
.team--hover .team__card.is-active { opacity: 1; }
.team__card.is-active { border-color: var(--ink-2); }
.team__card.is-active .team__ph { color: var(--ink); }
.team__card.is-active img { filter: none; }
.team__card:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.team__body { flex: 1; min-width: 0; }
.team__list { margin-top: clamp(1.6rem, 2.5vw, 2.4rem); display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem 2rem; }
.team__row { cursor: pointer; transition: opacity 0.3s var(--ease); }
.team--hover .team__row { opacity: 0.5; }
.team--hover .team__row.is-active { opacity: 1; }
.team__row:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.team__rowhead { display: flex; align-items: center; gap: 0.65rem; }
.team__dash { width: 18px; height: 10px; border-radius: 5px; background: var(--line-2); flex-shrink: 0; transition: background 0.3s var(--ease), width 0.3s var(--ease); }
.team__row.is-active .team__dash { background: var(--green); width: 24px; }
.team__name { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; letter-spacing: -0.015em; color: var(--ink-2); transition: color 0.3s; }
.team__row.is-active .team__name { color: var(--ink); }
.team__role { display: block; margin-top: 0.35rem; padding-left: calc(18px + 0.65rem); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-2); }
@media (max-width: 900px) {
  .team { flex-direction: column-reverse; }   /* heading first on small screens */
  .team__grid { margin-inline: auto; }
  .team__body { width: 100%; }
}
@media (max-width: 480px) {
  .team__list { grid-template-columns: 1fr; }
}

/* --- Understated proof strip -------------------------------------------- */
.proof__title {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: -0.01em; color: var(--ink); margin-bottom: 1.9rem;
}
.proof__title::before { content: ""; width: 1.6rem; height: 2px; background: var(--green); border-radius: 2px; }

/* ----- 13. Sectors (clean index) ----------------------------------------- */
.sector { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items: center; padding: 1.6rem 0.5rem; border-bottom: 1px solid var(--line); transition: padding-left 0.3s var(--ease); }
.sector:first-child { border-top: 1px solid var(--line); }
.sector:hover { padding-left: 1rem; }
.sector__no { font-family: var(--font-display); font-weight: 600; color: var(--blue-deep); font-size: 0.9rem; }
.sector__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); letter-spacing: -0.02em; }
.sector__desc { color: var(--muted); font-size: var(--t-sm); }
.sector__arrow { color: var(--muted-2); transition: transform 0.25s var(--ease), color 0.25s; }
.sector:hover .sector__arrow { color: var(--blue-deep); transform: translateX(4px); }
.sector__arrow svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .sector { grid-template-columns: auto 1fr; } .sector__desc { display: none; } }

/* ----- 14. Quote ---------------------------------------------------------- */
.quote { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.quote blockquote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); }
.quote__author { margin-top: auto; display: flex; align-items: center; gap: 0.9rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.quote__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-tint); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; flex-shrink: 0; }
.quote__name { font-weight: 600; font-size: 0.95rem; }
.quote__role { font-size: 0.82rem; color: var(--muted); }
.quote--feature blockquote { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.85rem); line-height: 1.2; font-weight: 500; letter-spacing: -0.03em; max-width: 22ch; }

/* ----- 15. Steps ---------------------------------------------------------- */
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; padding: 1.85rem 0; border-top: 1px solid var(--line); }
.step:last-child { border-bottom: 1px solid var(--line); }
.step__no { font-family: var(--font-display); font-weight: 600; color: var(--green-deep); font-size: 0.95rem; }
.step h3 { font-size: var(--t-h3); margin-bottom: 0.5rem; }
.step p { color: var(--muted); max-width: 56ch; font-size: var(--t-sm); }

/* --- Card swap (How we work) — 3D auto-cycling card stack --------------- */
.cardswap {
  position: relative; width: 100%; max-width: 460px; margin-inline: auto;
  height: clamp(300px, 42vw, 360px);
  perspective: 1000px; overflow: visible;
}
.swapcard {
  position: absolute; top: 50%; left: 50%;
  width: min(100%, 420px); height: clamp(230px, 34vw, 268px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: clamp(1.6rem, 2.5vw, 2.1rem);
  display: flex; flex-direction: column; justify-content: center;
  transform-style: preserve-3d; will-change: transform; backface-visibility: hidden;
  transform: translate(-50%, -50%);
}
.swapcard__no {
  font-family: var(--font-display); font-weight: 600; font-size: 1.6rem;
  color: var(--green-deep); letter-spacing: 0.01em; line-height: 1; margin-bottom: 0.9rem;
}
.swapcard__no--blue { color: var(--blue-deep); }
.swapcard h3 { font-size: var(--t-h3); margin-bottom: 0.55rem; }
.swapcard p { color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }
/* static fallback when JS/motion is off: simple stacked list */
.cardswap.no-swap { height: auto; perspective: none; max-width: none; }
.cardswap.no-swap .swapcard { position: relative; top: auto; left: auto; width: 100%; height: auto;
  transform: none; box-shadow: var(--shadow-sm); margin-bottom: 1rem; }
@media (prefers-reduced-motion: reduce) {
  .swapcard { transition: none !important; }
}
/* Once .split stacks (900px) the fan sits directly under the CTA, so give the
   container room for the upward offsets plus clearance above it. */
@media (max-width: 900px) {
  .cardswap { margin-top: 3.5rem; height: clamp(320px, 46vw, 380px); }
}

/* --- Testimonial carousel (In their words) ----------------------------- */
/* compact section so the whole carousel fits within one viewport */
.section--tcar { padding-block: clamp(2.5rem, 4.5vw, 3.25rem); }
.section--tcar .section-head { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }
.tcar { max-width: 960px; margin-inline: auto; }
.tcar__viewport { position: relative; }
.tcar__slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.tcar__slide.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }
/* media tile (brand monogram panel in place of a stock portrait) */
.tcar__media {
  position: relative; flex: 0 0 auto;
  width: clamp(240px, 26vw, 330px); aspect-ratio: 1;
  border-radius: 20px; overflow: hidden; z-index: 1;
  background: linear-gradient(150deg, var(--green-tint), #fff 55%, var(--blue-tint));
  border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
}
.tcar__media::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 82% 12%, rgba(0,159,227,0.10), transparent 46%),
              radial-gradient(120% 120% at 12% 92%, rgba(81,175,49,0.12), transparent 46%);
}
.tcar__mono {
  position: relative; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3.2rem, 6vw, 5rem); letter-spacing: -0.03em; line-height: 1;
  color: var(--green-deep);
}
.tcar__media--blue .tcar__mono { color: var(--blue-deep); }
.tcar__sector {
  position: relative; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
/* overlapping card */
.tcar__card {
  position: relative; z-index: 2; flex: 1 1 auto; margin: 0 0 0 -72px;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow); padding: clamp(1.6rem, 2.4vw, 2.2rem);
  min-height: clamp(240px, 26vw, 300px);
  display: flex; flex-direction: column; justify-content: center;
}
.tcar__mark { font-family: var(--font-display); font-weight: 700; font-size: 3rem; line-height: 0.4; color: var(--green); height: 1.2rem; }
.tcar__card blockquote {
  margin: 0.5rem 0 1.3rem; border: 0; padding: 0;
  font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.4rem); line-height: 1.4; color: var(--ink);
}
.tcar__by { display: flex; flex-direction: column; gap: 0.15rem; }
.tcar__name { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.tcar__role { font-size: 0.85rem; color: var(--muted); }
/* controls */
.tcar__nav { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.5rem; }
.tcar__btn {
  width: 48px; height: 48px; border-radius: 999px; flex-shrink: 0;
  background: #fff; border: 1px solid var(--line-2); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--ink-2); transition: border-color 0.25s var(--ease), background 0.25s, color 0.25s, transform 0.2s var(--ease);
}
.tcar__btn:hover { border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.tcar__btn svg { width: 22px; height: 22px; }
.tcar__dots { display: flex; gap: 0.55rem; }
.tcar__dot {
  width: 9px; height: 9px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: var(--line-2); transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.tcar__dot.is-active { background: var(--green); transform: scale(1.25); }
@media (max-width: 768px) {
  .tcar__slide { flex-direction: column; }
  .tcar__media { width: 100%; max-width: 340px; margin-inline: auto; }
  .tcar__card { margin: -56px auto 0; width: 100%; text-align: center; min-height: 0; align-items: center; }
  .tcar__card blockquote { text-align: center; }
  .tcar__mark { align-self: center; }
  .tcar__by { align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .tcar__slide { transition: none; } }

/* ----- 16. Logos ---------------------------------------------------------- */
/* Client logo row — even columns spread across the full width */
.logos { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.logos__item { font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.4rem); letter-spacing: -0.02em; color: var(--muted-2); transition: color 0.3s; }
.logos__item:hover { color: var(--ink-2); }
/* Client logo images — sized to fill their column, greyscale at rest, full colour on hover */
.logos__logo { max-height: clamp(36px, 2.8vw, 44px); max-width: 100%; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: 0.6; transition: filter 0.3s var(--ease), opacity 0.3s var(--ease); }
.logos__logo:hover { filter: grayscale(0); opacity: 1; }
/* Compact / stacked logos (Overbury, Structure Tone) get more height to balance the wordmarks */
.logos__logo--lg { max-height: clamp(44px, 3.4vw, 52px); }
@media (max-width: 900px) { .logos { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; } }
@media (max-width: 560px) { .logos { grid-template-columns: repeat(2, 1fr); } }

/* ----- 16b. Logo carousel (cycling columns) ------------------------------ */
.logo-carousel { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(0.75rem, 3vw, 2.75rem); margin-top: clamp(2.5rem, 5vw, 3.75rem); min-height: clamp(66px, 9vw, 104px); }
.logo-col { position: relative; flex: 0 0 auto; width: clamp(108px, 15vw, 188px); height: clamp(66px, 9vw, 104px); overflow: hidden; }
.logo-col__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(65%); filter: blur(8px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), filter 0.55s var(--ease); }
.logo-col__item.is-active { opacity: 1; transform: none; filter: blur(0); }
.logo-col__item.is-leaving { opacity: 0; transform: translateY(-45%); filter: blur(6px); transition: opacity 0.35s ease-in, transform 0.35s ease-in, filter 0.35s ease-in; }
.logo-col__item img { max-width: 82%; max-height: 64%; width: auto; height: auto; object-fit: contain; }
/* reduced-motion / no-cycle fallback: static wrapped row of all logos */
.logo-carousel--static { gap: clamp(1.75rem, 5vw, 3.5rem); }
.logo-carousel--static img { max-height: clamp(30px, 4vw, 44px); max-width: 150px; width: auto; object-fit: contain; }

/* Compact banner variant: heading left, cycling logos right */
.clients-banner { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients-banner__inner { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.clients-banner__head { flex: 0 0 auto; width: clamp(190px, 26%, 290px); }
.clients-banner__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.3rem); letter-spacing: -0.02em; line-height: 1.22; margin-top: 0.55rem; text-wrap: balance; }
.logo-carousel--banner { flex: 1 1 auto; margin-top: 0; justify-content: space-around; gap: clamp(0.5rem, 1.5vw, 1.25rem); min-height: 58px; }
.logo-carousel--banner .logo-col { height: 58px; width: clamp(84px, 11vw, 150px); }
.logo-carousel--banner .logo-col__item img { max-width: 88%; max-height: 74%; }
@media (max-width: 820px) {
  .clients-banner__inner { flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
  .clients-banner__head { width: 100%; max-width: 42ch; }
  .logo-carousel--banner { width: 100%; }
}

/* ----- 17. Checklist ------------------------------------------------------ */
.check { display: flex; flex-direction: column; gap: 1.1rem; }
.check li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.check__tick { width: 26px; height: 26px; border-radius: 50%; background: var(--green-tint); color: var(--green-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.check__tick svg { width: 15px; height: 15px; }
.check b { font-weight: 600; }
.check p { color: var(--muted); font-size: var(--t-sm); margin-top: 0.1rem; }

/* ----- 18. Forms ---------------------------------------------------------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem); box-shadow: var(--shadow-sm); }
.field { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.2rem; }
.field label { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 0.8rem 0.95rem; width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.field textarea { resize: vertical; min-height: 130px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .field--row { grid-template-columns: 1fr; } }
.form-note { font-size: 0.82rem; color: var(--muted); margin-top: 0.6rem; }

/* Attachment field */
.field__hint { font-size: 0.78rem; line-height: 1.5; color: var(--muted); }
.field__hint a { color: var(--blue-deep); }
.field input[type="file"] { padding: 0.5rem 0.55rem; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ink);
  background: var(--paper-3); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 0.45rem 0.85rem; margin-right: 0.85rem; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.field input[type="file"]:hover::file-selector-button { background: var(--line); border-color: var(--muted-2); }

/* Validation. :user-invalid rather than :invalid so empty required fields
   aren't flagged red before the visitor has even reached them. */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: var(--error); }
.field input:user-invalid:focus, .field select:user-invalid:focus, .field textarea:user-invalid:focus { box-shadow: 0 0 0 3px var(--error-tint); }
.field__error { font-size: 0.78rem; font-weight: 600; line-height: 1.5; color: var(--error); }

/* ----- 19. Contact info --------------------------------------------------- */
.cinfo { display: flex; flex-direction: column; gap: 1.6rem; }
.cinfo__item { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.cinfo__icon { width: 46px; height: 46px; border-radius: var(--radius-sm); border: 1px solid var(--line); color: var(--blue-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cinfo__icon svg { width: 20px; height: 20px; }
.cinfo__label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.25rem; }
.cinfo__value { font-size: 1.05rem; font-weight: 500; }
.cinfo__value a:hover { color: var(--blue-deep); }

/* ----- 20. Page header band ---------------------------------------------- */
.pagehead { padding-top: calc(76px + clamp(3rem, 6vw, 5rem)); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.breadcrumb { font-size: 0.8rem; color: var(--muted-2); margin-bottom: 1.5rem; letter-spacing: 0.02em; }
.breadcrumb a:hover { color: var(--blue-deep); }

/* ----- 21. CTA ------------------------------------------------------------ */
.cta { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 8rem); }
.cta__ring { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); width: clamp(150px, 16vw, 230px); height: auto; opacity: 0.45; pointer-events: none; }
@media (max-width: 720px){ .cta__ring { display: none; } }

/* ----- 22. Footer --------------------------------------------------------- */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 6vw, 5rem) 2.25rem; }
.footer__grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: clamp(2rem, 4vw, 3.5rem); }
.footer__brand img { height: 44px; width: auto; }
.footer__brand p { color: var(--muted); font-size: var(--t-sm); margin-top: 1.25rem; max-width: 34ch; }
.footer__col h4 { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 1.15rem; }
.footer__col ul { display: flex; flex-direction: column; gap: 0.7rem; }
.footer__col a, .footer__col li { font-size: 0.94rem; color: var(--ink-2); }
.footer__col a:hover { color: var(--blue-deep); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted); }
.footer__bottom a { color: var(--ink-2); font-weight: 600; }
.footer__bottom a:hover { color: var(--blue-deep); }
.footer__accred { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 1.5rem; }
.footer__accred span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 0.35rem 0.7rem; }
.footer__accred img.footer__chas { width: 96px; height: auto; display: block; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

/* --- Legal / long-form prose (privacy policy) --------------------------- */
.legal { max-width: 72ch; }
.legal h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin: 2.75rem 0 0.9rem; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 1.05rem; margin: 1.6rem 0 0.5rem; }
.legal p { color: var(--muted); line-height: 1.65; margin-bottom: 1rem; }
.legal ul { margin: 0 0 1rem 1.2rem; padding: 0; }
.legal li { color: var(--muted); line-height: 1.6; margin-bottom: 0.5rem; }
.legal a { color: var(--blue-deep); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal__meta { font-size: 0.9rem; color: var(--muted-2); margin-bottom: 2.5rem; }
.legal__card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; margin: 0.5rem 0 1rem; }
.legal__card p { margin: 0.2rem 0; }

/* ----- 23. Reveal --------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.07s; }
.reveal[data-delay="2"] { transition-delay: 0.14s; }
.reveal[data-delay="3"] { transition-delay: 0.21s; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ----- 24. Misc ----------------------------------------------------------- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.75rem 1.25rem; z-index: 200; font-weight: 600; border-radius: 0 0 var(--radius-sm) 0; }
.skip-link:focus { left: 0; top: 0; }
.divider { height: 1px; background: var(--line); border: 0; }
.pill-list { display: flex; flex-wrap: wrap; gap: 0.55rem; }
/* light pills for use over photography */
.tag--light { color: #fff; border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.10); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tag--light:hover { border-color: #fff; color: #fff; }

/* ----- 25. Projects — full-bleed horizontal parallax --------------------- */
.phx { position: relative; background: var(--ink); }
.phx__stage {
  /* default (no-JS / mobile): native horizontal swipe carousel */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.phx__stage::-webkit-scrollbar { display: none; }
.phx__track { display: flex; }
.phx__panel {
  position: relative; flex: 0 0 100%; height: min(82vh, 680px);
  overflow: hidden; scroll-snap-align: start;
  display: block; color: #fff; isolation: isolate;
}
.phx__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.06); will-change: transform;
  z-index: -2;
}
.phx__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,13,15,0.78) 0%, rgba(10,13,15,0.42) 42%, rgba(10,13,15,0.05) 70%),
    linear-gradient(0deg, rgba(10,13,15,0.72) 0%, rgba(10,13,15,0.15) 40%, transparent 65%);
}
.phx__content {
  position: absolute; left: 0; bottom: 0;
  width: min(100%, var(--container, 1200px));
  margin: 0 auto; left: 0; right: 0;
  padding: clamp(1.75rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
}
.phx__eyebrow {
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #9fe089;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.phx__eyebrow::before { content: ""; width: 1.8rem; height: 2px; background: var(--green); border-radius: 2px; }
.phx__title {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); line-height: 1.02;
  letter-spacing: -0.03em; margin: 0.1rem 0 0.2rem; color: #fff;
}
.phx__meta { display: flex; flex-wrap: wrap; gap: 2.25rem; margin: 0; }
.phx__meta dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-bottom: 0.2rem; }
.phx__meta dd { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: #fff; }
.phx__cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem;
  font-weight: 600; font-size: 0.95rem; color: #fff;
  border-bottom: 2px solid rgba(255,255,255,0.4); padding-bottom: 2px;
  transition: gap 0.25s var(--ease), border-color 0.25s var(--ease);
}
.phx__cta svg { width: 1.05em; height: 1.05em; }
.phx__panel:hover .phx__cta { gap: 0.85rem; border-color: var(--green); }
.phx__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.15); z-index: 3; }
.phx__progress-bar { display: block; height: 100%; width: 16.6667%; background: var(--green); transform-origin: left; transition: transform 0.1s linear; }

/* Enhanced (desktop, motion OK): pin section, vertical scroll drives horizontal pan */
.phx.is-pinned .phx__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; scroll-snap-type: none; }
.phx.is-pinned .phx__panel { height: 100vh; }
.phx.is-pinned .phx__track { will-change: transform; }

@media (max-width: 640px) {
  .phx__meta { gap: 1.5rem; }
  .phx__meta dd { font-size: 1rem; }
}

/* ----- Testimonial columns (vertical marquee) ----------------------------- */
/* Base state is a plain grid of cards — that is also what no-JS and
   reduced-motion visitors keep, so the quotes are never trapped in motion. */
.tcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.tcols.is-live {
  display: flex; justify-content: center; gap: 1.5rem;
  height: clamp(420px, 66vh, 660px);
  overflow: hidden;
  --tcols-mask: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
  -webkit-mask-image: var(--tcols-mask);
          mask-image: var(--tcols-mask);
}
.tcols__col { flex: 0 1 320px; min-width: 0; }
.tcols__track {
  display: flex; flex-direction: column; gap: 1.5rem;
  /* padding-bottom must equal the gap: it makes the doubled list exactly twice
     one loop, so translateY(-50%) lands seamlessly instead of half a gap out. */
  padding-bottom: 1.5rem;
  animation: tcols-roll 20s linear infinite;
  will-change: transform;
}
@keyframes tcols-roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* Stop it so a quote can actually be read */
.tcols.is-live:hover .tcols__track,
.tcols.is-live:focus-within .tcols__track { animation-play-state: paused; }

.tcols__card { height: auto; }
.tcols__card .quote { gap: 1.25rem; }
.tcols__card blockquote { font-size: 1.05rem; }

@media (max-width: 900px) { .tcols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tcols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tcols__track { animation: none; } }

/* Capability cards link through to their section on Services. The anchor is
   stretched over the whole card so the click target matches what looks
   clickable, without restructuring the card markup.
   NB: do NOT add `position: relative` to .capcard here — it would override the
   `position: sticky` that drives the card stack. Sticky already positions the
   card, so the overlay resolves against it; the non-sticky fallbacks below use
   relative instead of static for the same reason. */
.capcard__link { color: inherit; text-decoration: none; }
.capcard__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.capcard__link:hover { color: var(--green-deep); }
.capcard__link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Clear the fixed 76px header when a deep link lands on a service */
.svclead[id], .svcitem[id] { scroll-margin-top: 100px; }

/* Awaiting photography: a quiet empty frame, not a labelled placeholder.
   The slot stays in the layout so a real image can drop straight in. */
.media--empty .media__note { gap: 0; padding: 0; }
.media--empty .media__note svg { opacity: 0.28; }