/* ==========================================================================
   RMG Quantity Surveyors — shared stylesheet
   One file for all three pages. Plain CSS, no build step.

   CONTENTS
     1. Fonts (self-hosted)
     2. Design tokens — every colour, font, size and space lives here
     3. Base & reset
     4. Accessibility helpers (skip link, focus, visually-hidden)
     5. Layout (container, sections, section themes)
     6. Colour fields & panels (the profile's big flat colour blocks)
     7. Headings — the eyebrow + script signature device
     8. Text & small components (lead, accent bar, buttons, lists)
     9. Site header & navigation
    10. Home hero
    11. Photo mosaics & caption bars
    12. Pillars (At a Glance)
    13. Services list
    14. How We Work — stage cards
    15. Directors & contact details
    16. Project blocks
    17. Site footer
    18. Motion & reduced-motion

   CONTRAST RULE (brief §4): type is black, or it is on black.
   Yellow and sage fields carry black type only. Dark fields carry
   yellow, sage or off-white type. Never white or sage text on yellow,
   never white text on sage.
   ========================================================================== */


/* 1. Fonts ================================================================ */

@font-face { font-family: "Poppins"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/poppins-200.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family: "Lobster Two"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lobster-two-700.woff2") format("woff2"); }


/* 2. Design tokens ======================================================== */

:root {
  /* Brand colour — exact values sampled from the logo vector */
  --sage:      #99B7B9;   /* primary panel fill */
  --yellow:    #DFFF00;   /* accent fields, rules, highlights */
  --ink:       #000000;   /* ALL body and heading type on light grounds */
  --dark:      #101010;   /* dark full-bleed sections */
  --deepsage:  #47686A;   /* small headings / eyebrows on white only (6.08:1) */
  --offwhite:  #F7F8F7;   /* alternate page ground; body type on dark */
  --white:     #FFFFFF;

  /* Supporting neutrals (derived, not brand colours) */
  --card-dark:     #1B1B1B;           /* stage cards sitting on --dark */
  --rule-light:    rgb(0 0 0 / 0.16); /* hairlines on white, sage, yellow */
  --rule-dark:     rgb(255 255 255 / 0.14); /* hairlines on dark */
  --backdrop:      rgb(16 16 16 / 0.94);    /* lightbox backdrop */
  --muted-dark:    #C4CCCC;           /* secondary text on dark (11.7:1, 10.5:1 on cards) */

  /* Typography */
  --font-sans:   "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-script: "Lobster Two", "Poppins", Georgia, serif;

  /* Fluid type scale — min at 360px viewport, max at ~1440px */
  --text-xs:     0.8125rem;                                  /* 13px captions */
  --text-sm:     0.9375rem;                                  /* 15px */
  --text-base:   clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);   /* 16 → 17px body */
  --text-md:     clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);    /* subheads */
  --text-lg:     clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --text-xl:     clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem);    /* statements */
  --text-eyebrow: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  --text-script: clamp(2.625rem, 1.9rem + 3.4vw, 4.75rem);   /* "Work", "Us" */
  --text-number: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);       /* stage 01–06 */

  --leading-body:  1.55;
  --leading-tight: 1.15;
  --tracking-wide: 0.09em;

  /* Space scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --section-pad: clamp(3.5rem, 2rem + 6vw, 7.5rem);   /* vertical rhythm */
  --gutter:      clamp(1rem, 0.2rem + 3.6vw, 3.5rem); /* 16px on phones */
  --container:   75rem;                               /* 1200px */
  --measure:     36rem;                               /* comfortable line length */
  --mosaic-gap:  6px;                                 /* the profile's 1.6mm gutters */

  --header-h:    4.25rem;
  --accent-w:    7.5rem;   /* yellow accent bar */
  --accent-h:    0.625rem;
  --radius:      0;        /* the profile is all square corners */

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 64em) {
  :root { --header-h: 5.25rem; }
}


/* 3. Base & reset ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

h1, h2, h3, h4 { font-weight: 600; line-height: var(--leading-tight); text-wrap: balance; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

address { font-style: normal; }


/* 4. Accessibility helpers =============================================== */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-5);
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

:focus-visible {
  outline: 3px solid var(--focus, var(--ink));
  outline-offset: 3px;
}

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


/* 5. Layout ============================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); position: relative; }
.section--tight { padding-block: calc(var(--section-pad) * 0.6); }

/* Section themes set the colour of everything inside them through
   custom properties, so components never need to know where they sit. */
.theme-white    { background: var(--white); }
.theme-offwhite { background: var(--offwhite); }
.theme-sage     { background: var(--sage);   --eyebrow: var(--ink); --accent: var(--ink); }
.theme-yellow   { background: var(--yellow); --eyebrow: var(--ink); --accent: var(--ink); }
.theme-dark {
  background: var(--dark);
  color: var(--offwhite);
  --heading: var(--white);
  --eyebrow: var(--sage);
  --accent:  var(--yellow);
  --focus:   var(--yellow);
  --rule:    var(--rule-dark);
  --muted:   var(--muted-dark);
}

/* Two-column split used across the site: stacks on phones */
.split {
  display: grid;
  gap: var(--space-7) var(--space-8);
}
@media (min-width: 56em) {
  .split { grid-template-columns: 5fr 7fr; align-items: start; }
  .split--even { grid-template-columns: 1fr 1fr; }
  .split--center { align-items: center; }
}


/* 6. Colour fields & panels ============================================= */
/* The profile's signature layout: a flat colour field bleeding off one
   edge of the page, with a second colour panel laid over it.
   Markup:
     <section class="section field field--yellow field--left">
       <div class="container"> <div class="panel panel--sage"> … </div> </div>
     </section>
   The field is decorative, drawn with ::before so content order stays
   simple. On phones it becomes a top band. */

.field { position: relative; isolation: isolate; }
.field::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto 0;
  height: 45%;
  background: var(--field-color, var(--yellow));
}
.field--yellow { --field-color: var(--yellow); }
.field--sage   { --field-color: var(--sage); }
.field--dark   { --field-color: var(--dark); }

@media (min-width: 56em) {
  .field::before { inset: 0 auto 0 0; height: auto; width: var(--field-width, 50%); }
  .field--right::before { inset: 0 0 0 auto; }
  .field--wide   { --field-width: 62%; }
  .field--narrow { --field-width: 38%; }
}

.panel {
  position: relative;
  padding: clamp(2rem, 1rem + 5vw, 5rem) clamp(1.25rem, 0.5rem + 5vw, 5rem);
  background: var(--panel-color, var(--sage));
  color: var(--ink);
  --eyebrow: var(--ink);
  --accent: var(--ink);
  --focus: var(--ink);
}
.panel--sage   { --panel-color: var(--sage); }
.panel--yellow { --panel-color: var(--yellow); }
.panel--white  { --panel-color: var(--white); --eyebrow: var(--deepsage); }

/* Panel pushed to one side of a field, as on profile p.4 */
@media (min-width: 56em) {
  .panel--offset-right { margin-left: 30%; }
  .panel--offset-left  { margin-right: 30%; }
}

/* Panel that runs to the viewport edge on one side (profile p.6, p.8).
   --bleed = distance from the container's content edge to the viewport edge. */
.panel--bleed-left, .panel--bleed-right {
  --bleed: calc(var(--gutter) + max(0px, (100vw - var(--container) - 2 * var(--gutter)) / 2));
}
.panel--bleed-left  { margin-left:  calc(-1 * var(--bleed)); padding-left:  calc(var(--bleed) + clamp(0.25rem, 3vw, 3rem)); }
.panel--bleed-right { margin-right: calc(-1 * var(--bleed)); padding-right: calc(var(--bleed) + clamp(0.25rem, 3vw, 3rem)); }
@media (max-width: 55.99em) {   /* phones: bleed both edges so no sliver is left over */
  .panel--bleed-left, .panel--bleed-right { margin-inline: calc(-1 * var(--gutter)); padding-inline: calc(var(--gutter) + 0.25rem); }
}


/* 7. Headings — eyebrow + script ========================================= */
/* The single most distinctive thing in the identity:
       Our      ← Poppins 200, tracked
       Work     ← Lobster Two 700, large
   Markup (keep the space between the spans — screen readers need it):
     <h2 class="heading"><span class="heading__eyebrow">Our</span> <span class="heading__script">Work</span></h2>
*/

.heading {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  font-weight: 400;
  line-height: 1;
  margin-bottom: var(--space-6);
}
.heading__eyebrow {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  color: var(--eyebrow, var(--deepsage));
}
.heading__script {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--text-script);
  line-height: 1.05;
  color: var(--heading, var(--ink));
  letter-spacing: 0;
}
.heading--center { align-items: center; text-align: center; }

/* Subheads */
.subhead {
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--heading, var(--ink));
}
.kicker {           /* small uppercase label, e.g. "Heritage redevelopment" */
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--kicker, var(--deepsage));
}
.theme-dark .kicker { --kicker: var(--yellow); }
.panel .kicker, .theme-sage .kicker, .theme-yellow .kicker { --kicker: var(--ink); }


/* 8. Text & small components ============================================= */

.prose > * + * { margin-top: 1.1em; }
.prose { max-width: var(--measure); }
.prose--wide { max-width: 44rem; }

.lead {
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.45;
}

.statement {       /* big single line, e.g. the merger line */
  font-size: var(--text-xl);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--heading, var(--ink));
  max-width: 23em;
}
.statement strong { font-weight: 600; white-space: nowrap; }
@media (max-width: 29.99em) { .statement strong { white-space: normal; } }

.muted { color: var(--muted, var(--deepsage)); }
.theme-dark .statement strong { color: var(--yellow); }

/* Heading on the left, intro text on the right */
.section-head { display: grid; gap: var(--space-5); margin-bottom: var(--space-7); }
.section-head .heading { margin-bottom: 0; }
@media (min-width: 56em) {
  .section-head { grid-template-columns: 5fr 7fr; gap: var(--space-8); align-items: end; }
}

/* Short facts in a row, split by thin rules (merger strip) */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  list-style: none;
  padding: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--eyebrow, var(--deepsage));
}
.facts li + li { padding-left: var(--space-5); border-left: 1px solid var(--rule, var(--rule-light)); }
@media (max-width: 47.99em) {
  .facts { flex-direction: column; }
  .facts li + li { padding-left: 0; border-left: 0; }
}

/* Thin accent bar — the profile's punctuation mark */
.accent-bar {
  display: block;
  width: var(--accent-w);
  height: var(--accent-h);
  background: var(--accent, var(--yellow));
  border: 0;
  margin-inline: 0;
}
.accent-bar--short { width: calc(var(--accent-w) * 0.6); height: calc(var(--accent-h) * 0.7); }
.accent-bar--center { margin-inline: auto; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.875rem;
  padding: 0.7em 1.4em;
  border: 2px solid var(--btn-border, var(--ink));
  background: var(--btn-bg, var(--ink));
  color: var(--btn-fg, var(--white));
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.btn:hover { --btn-bg: var(--yellow); --btn-fg: var(--ink); text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--accent  { --btn-bg: var(--yellow); --btn-fg: var(--ink); --btn-border: var(--yellow); }
.btn--accent:hover { --btn-bg: var(--ink); --btn-fg: var(--yellow); --btn-border: var(--ink); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--white); }
.theme-dark .btn--outline { --btn-fg: var(--offwhite); --btn-border: var(--offwhite); }
.theme-dark .btn--outline:hover { --btn-bg: var(--yellow); --btn-fg: var(--ink); --btn-border: var(--yellow); }
.theme-dark .btn--accent:hover { --btn-bg: var(--offwhite); --btn-fg: var(--ink); --btn-border: var(--offwhite); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--accent, var(--yellow));
  padding-bottom: 2px;
}
.arrow-link::after { content: "→"; transition: transform 200ms var(--ease-out); }
.arrow-link:hover::after { transform: translateX(4px); }

/* Pill label for the pending practice number etc. */
.tag {
  display: inline-block;
  padding: 0.1em 0.5em;
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9em;
}

/* Hairline-separated list (sectors, facts) */
.rule-list { list-style: none; padding: 0; }
.rule-list > li { padding-block: var(--space-3); border-bottom: 1px solid var(--rule, var(--rule-light)); }
.rule-list > li:first-child { border-top: 1px solid var(--rule, var(--rule-light)); }


/* 9. Site header & navigation ============================================ */
/* Three links fit on one line even at 320px, so there is no hamburger:
   every page is always one tap away. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--rule-light);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-h);
}
.site-logo { flex: none; display: block; }
.site-logo img { width: auto; height: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem); }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.1rem + 1.8vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  position: relative;
  display: inline-block;
  padding-block: var(--space-2);
  font-size: clamp(0.8125rem, 0.75rem + 0.3vw, 0.9375rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__link::after {                   /* yellow underline bar */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { font-weight: 600; }

.nav__link--cta {
  padding: 0.45em 0.9em;
  background: var(--yellow);
  font-weight: 600;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover { background: var(--ink); color: var(--yellow); }
.nav__link--cta[aria-current="page"] { outline: 2px solid var(--ink); outline-offset: -2px; }


/* 10. Home hero ========================================================== */
/* Echoes the profile cover: a tall portrait photo, a sage band crossing
   behind it and bleeding off the left edge, the statement to the right. */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-6) var(--section-pad);
}
.hero::before {                         /* sage band */
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  width: 100%;
  top: 38%;
  height: 34%;
  background: var(--sage);
}
.hero__grid { display: grid; gap: var(--space-7); }
.hero__media img {
  width: 100%;
  height: clamp(20rem, 60vh, 34rem);
  object-fit: cover;
  object-position: 50% 60%;
}
.hero__content { display: flex; flex-direction: column; gap: var(--space-5); }
.hero__eyebrow {
  font-weight: 200;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-wide);
  color: var(--deepsage);
}
.hero__title {
  font-weight: 300;
  font-size: var(--text-xl);
  line-height: 1.25;
  max-width: 22ch;
}

@media (max-width: 47.99em) {
  .hero { padding-top: 0; }
  .hero::before { display: none; }
  .hero__media { margin-inline: calc(-1 * var(--gutter)); }
  .hero__media img { height: min(68vh, 30rem); }
}
@media (min-width: 48em) {
  .hero { padding-block: 0; min-height: min(calc(100svh - var(--header-h)), 52rem); display: grid; }
  .hero::before { width: 46%; top: 56%; height: 28%; }
  .hero__grid {
    grid-template-columns: minmax(18rem, 5fr) 7fr;
    align-items: center;
    gap: var(--space-8);
  }
  .hero__media { align-self: stretch; }
  .hero__media picture, .hero__media img { height: 100%; }
  .hero__media img { min-height: 30rem; object-position: 50% 70%; }
  .hero__content { padding-block: var(--space-8); }
}


/* 11. Photo mosaics & caption bars ======================================= */
/* Tight grids of full-bleed photos with 6px gutters and a black caption
   bar underneath, exactly like the profile.
   Markup:
     <figure class="mosaic-group">
       <div class="mosaic mosaic--feature"> <picture>…</picture> × n </div>
       <figcaption class="caption-bar">Premier Mill — silos</figcaption>
     </figure>
*/

.mosaic-group { display: grid; gap: var(--mosaic-gap); }

.mosaic {
  display: grid;
  gap: var(--mosaic-gap);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(9rem, 22vw, 15rem);
}
.mosaic > * { min-width: 0; overflow: hidden; background: var(--offwhite); }
.mosaic picture, .mosaic img { width: 100%; height: 100%; }
.mosaic img { object-fit: cover; }

/* first tile spans full width, the rest pair up */
.mosaic--feature > :first-child { grid-column: 1 / -1; grid-row: span 2; }

/* one big tile left, stacked tiles right (lead goes full width on phones) */
.mosaic--side > :first-child { grid-column: 1 / -1; }
@media (min-width: 48em) {
  .mosaic--side > :first-child { grid-column: auto; }
  .mosaic--3 { grid-template-columns: repeat(3, 1fr); }
  .mosaic--side { grid-template-columns: 2fr 1fr; }
  .mosaic--side > :first-child { grid-row: span 2; }
}

/* AUTO mosaic — use this for project photos. Any number of images works:
   the first is the large lead shot, the rest share the row(s) below.
   Add or remove <a class="tile"> lines freely. */
.mosaic--auto { grid-template-columns: repeat(var(--cols, 2), 1fr); }
.mosaic--auto > :first-child { grid-column: 1 / -1; grid-row: span 2; }
/* the column count follows the number of photos under the lead one */
.mosaic--auto:has(> :nth-child(2):last-child) { --cols: 1; }
@media (max-width: 47.99em) {       /* odd photo left over on phones: let it fill the row */
  .mosaic--auto > :last-child:nth-child(even) { grid-column: 1 / -1; }
}
@media (min-width: 48em) {
  .mosaic--auto { --cols: 3; }
  .mosaic--auto:has(> :nth-child(2):last-child) { --cols: 1; }
  .mosaic--auto:has(> :nth-child(3):last-child) { --cols: 2; }
  .mosaic--auto:has(> :nth-child(5):last-child) { --cols: 4; }
}

/* Clickable tiles (open the lightbox; plain link to the photo without JS) */
.mosaic .tile { display: block; height: 100%; cursor: zoom-in; }
.mosaic .tile img { transition: transform 500ms var(--ease-out), opacity 200ms; }
.mosaic .tile:hover img { transform: scale(1.03); }
.mosaic .tile:focus-visible { outline-offset: -4px; outline-color: var(--yellow); }

/* Tall tile for portrait shots */
.mosaic .tall { grid-row: span 2; }
.mosaic .wide { grid-column: 1 / -1; }

/* Single image with caption */
.photo img { width: 100%; }

.caption-bar {
  padding: 0.8em 1.1em;
  background: var(--ink);
  color: var(--white);            /* white on black: 21:1 */
  font-weight: 400;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
}
.caption-bar--yellow { background: var(--yellow); color: var(--ink); }
.theme-dark .caption-bar { background: var(--yellow); color: var(--ink); }


/* 12. Pillars (At a Glance) ============================================== */

.pillars {
  display: grid;
  gap: var(--space-7);
  list-style: none;
  padding: 0;
  text-align: center;
}
@media (min-width: 48em) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }

.pillar { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.pillar__icon {
  display: grid;
  place-items: center;
  width: clamp(6.5rem, 5rem + 5vw, 9rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white);
  color: var(--deepsage);        /* icon strokes use currentColor */
}
.pillar__icon svg { width: 46%; height: auto; }
.pillar__title { font-weight: 600; font-size: var(--text-md); }
.theme-offwhite .pillar__icon, .theme-white .pillar__icon { background: var(--sage); color: var(--ink); }
.pillar p { max-width: 20rem; font-size: var(--text-sm); }


/* 13. Services list ====================================================== */

.service-list { list-style: none; padding: 0; }
.service {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--rule, var(--rule-light));
}
.service:last-child { border-bottom: 0; }
.service__name { font-weight: 600; font-size: var(--text-md); line-height: 1.35; }
.service__detail { font-size: var(--text-sm); }

.sectors { list-style: none; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-lg); }


/* 14. How We Work — stage cards ========================================= */

.stages {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  counter-reset: stage;
}
@media (min-width: 40em) { .stages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .stages { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }

.stage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-5);
  align-content: start;
  padding: var(--space-6) var(--space-5) var(--space-7);
  background: var(--card-dark);
  border-top: 6px solid var(--yellow);
}
.stage__num {
  grid-row: span 2;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--text-number);
  line-height: 1;
  color: var(--yellow);
}
.stage__title { font-weight: 600; font-size: var(--text-md); color: var(--white); }
.stage p { font-size: var(--text-sm); color: var(--muted-dark); }
.stages-close {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-dark);
  font-size: var(--text-sm);
}


/* 15. Directors & contact details ======================================= */

.directors {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 48em) {
  .directors { grid-template-columns: 1fr 1fr; gap: 0; }
  .directors > * + * { border-left: 1px solid var(--rule, var(--rule-light)); padding-left: var(--space-7); }
  .directors > :first-child { padding-right: var(--space-7); }
}

.director { display: grid; gap: var(--space-3); align-content: start; }
.director__name {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: var(--text-xl);
  line-height: 1.1;
  color: var(--heading, var(--ink));
}
.director__role { font-weight: 600; font-size: var(--text-sm); }
.director__creds { list-style: none; padding: 0; font-size: var(--text-sm); }
.director__creds abbr { font-weight: 600; text-decoration: none; }
.director__contact { display: grid; gap: var(--space-1); margin-top: var(--space-3); }

/* Closing block under the two directors */
.panel__foot {
  display: grid;
  gap: var(--space-5);
  max-width: 44rem;
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule-light);
}

/* Tappable phone / email links: generous hit area */
.contact-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.contact-link:hover { text-decoration-thickness: 2px; }
@media (pointer: coarse) { .contact-link { min-height: 2.75rem; } }   /* 44px touch target */

/* Label / value pairs (contact page, registration details) */
.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-3) var(--space-5);
}
.details dt {
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding-top: 0.2em;
}
@media (max-width: 29.99em) {
  .details { grid-template-columns: 1fr; gap: 0; }
  .details dd { margin-bottom: var(--space-4); }
}


/* 16. Project blocks ===================================================== */

.project { display: grid; gap: var(--space-6); }
.project + .project { margin-top: var(--section-pad); }
.project__title {
  font-weight: 600;
  font-size: var(--text-xl);
  color: var(--heading, var(--ink));
}
.project__meta { margin-top: var(--space-2); }

/* "See all projects" link under the teaser */
.section-foot { margin-top: var(--space-6); }

/* Teaser cards on Home */
.project-cards {
  display: grid;
  gap: var(--mosaic-gap);
  list-style: none;
  padding: 0;
}
@media (min-width: 48em) { .project-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72em) { .project-cards { grid-template-columns: repeat(4, 1fr); } }

.project-card { background: var(--ink); color: var(--white); }
.project-card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.project-card__img { aspect-ratio: 4 / 3; overflow: hidden; }
.project-card__img picture, .project-card__img img { width: 100%; height: 100%; }
.project-card__img img { object-fit: cover; transition: transform 500ms var(--ease-out); }
.project-card a:hover img { transform: scale(1.03); }
.project-card__body { padding: var(--space-4) var(--space-4) var(--space-5); display: grid; gap: var(--space-1); align-content: start; }
.project-card__name { font-weight: 600; font-size: var(--text-md); }
.project-card__meta {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--muted-dark);
}
.project-card a:hover .project-card__name { color: var(--yellow); }


/* Project page header: title + intro, with the project index beside it */
.page-head { padding-block: var(--section-pad); }
.page-head .lead { max-width: 32rem; }
.page-head__grid { display: grid; gap: var(--space-7); align-items: end; }
@media (min-width: 56em) { .page-head__grid { grid-template-columns: 6fr 5fr; gap: var(--space-8); } }

.project-index { list-style: none; padding: 0; }
.project-index li { border-bottom: 1px solid var(--rule-light); }
.project-index li:last-child { border-bottom: 0; }
.project-index a {
  display: grid;
  gap: 0.1rem;
  padding-block: var(--space-4);
  text-decoration: none;
}
.project-index strong { font-size: var(--text-md); }
.project-index span { font-size: var(--text-sm); }
.project-index a:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* One project = text column + photo column (stacks on phones) */
.project-block { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 56em) {
  .project-block { grid-template-columns: 4fr 7fr; gap: var(--space-8); }
  .project-block--flip { grid-template-columns: 7fr 4fr; }
  .project-block--flip > :first-child { order: 2; }
  .project-block__text { position: sticky; top: calc(var(--header-h) + var(--space-6)); }
}
.project-block__text { display: grid; gap: var(--space-4); align-content: start; }
.project-block__text .heading { margin-bottom: 0; }
.project-block__text .panel { padding: var(--space-6) var(--space-5); }
.project-block__text .panel > * + * { margin-top: var(--space-3); }

/* Premier Mill's two extra photo groups sit side by side on desktop */
.project-more { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
@media (min-width: 56em) { .project-more { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }


/* Lightbox (built by js/main.js) ----------------------------------------- */
.lightbox {
  width: 100%; height: 100%;
  max-width: 100vw; max-height: 100vh;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  color: var(--offwhite);
  --focus: var(--yellow);
}
.lightbox::backdrop { background: var(--backdrop); }
.lightbox__stage {
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-8) var(--space-4) var(--space-5);
}
.lightbox__img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; }
.lightbox__caption {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-align: center;
}
.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border: 0;
  background: var(--yellow);
  color: var(--ink);
  font: 600 1.25rem/1 var(--font-sans);
  cursor: pointer;
}
.lightbox__btn:hover { background: var(--offwhite); }
.lightbox__close { top: var(--space-4); right: var(--space-4); }
.lightbox__prev  { left: var(--space-4);  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--space-4); top: 50%; transform: translateY(-50%); }
@media (max-width: 47.99em) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--space-4); transform: none; }
  .lightbox__stage { padding-bottom: calc(var(--space-5) + 3.5rem); }
}


/* Contact page ----------------------------------------------------------- */
/* Colour field that only shows on desktop (on phones the logo column is hidden) */
.contact-brand {
  display: grid;
  justify-items: center;
  gap: var(--space-6);
  text-align: center;
}
.contact-brand__plate { padding: var(--space-6) var(--space-7); background: var(--white); }
.contact-brand__plate img { width: min(22rem, 100%); height: auto; }
.contact-brand p { max-width: 20rem; }
@media (max-width: 55.99em) {   /* phones/tablets: logo is already in the header */
  .field--desktop::before { display: none; }
  .contact-brand { display: none; }
}

.details--contact { gap: var(--space-5) var(--space-6); }
.details--contact dd { display: grid; gap: 0.1rem; }
.details--contact .contact-link { min-height: auto; }
@media (pointer: coarse) { .details--contact .contact-link { min-height: 2.75rem; } }

.address-lg { font-size: var(--text-lg); line-height: 1.4; }
.contact-lead { margin-block: var(--space-6) var(--space-7); max-width: 30rem; }
.panel--stack > * + * { margin-top: var(--space-5); }


/* 17. Site footer ======================================================== */

.site-footer {
  background: var(--dark);
  color: var(--offwhite);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
  --focus: var(--yellow);
  --rule: var(--rule-dark);
}
.site-footer__grid { display: grid; gap: var(--space-7); }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr; } }

.site-footer__logo {                 /* logo needs a white plate on dark */
  display: inline-block;
  padding: var(--space-4) var(--space-5);
  background: var(--white);
}
.site-footer__logo img { width: 11rem; height: auto; }
.site-footer h2 {
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.site-footer a { text-decoration: none; }
.site-footer__nav { margin-top: var(--space-5); }
.site-footer a:hover { color: var(--yellow); text-decoration: underline; }
.site-footer__legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--muted-dark);
}


/* 18. Motion & reduced motion =========================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* RMG web direction: brand colours, restrained typography, screen-first layouts. */
:root{--soft-sage:#e9efec;--line:#d9dfdc;--muted:#525a59;--container:80rem;--section-pad:clamp(4rem,7vw,7rem);--gutter:clamp(1rem,4vw,4rem)}
body{background:var(--offwhite);font-weight:300;line-height:1.75}h1,h2,h3{font-family:var(--font-sans);font-weight:400;letter-spacing:-.045em;line-height:1.15}.field:before,.hero:before{display:none}.field .panel,.panel--bleed-left,.panel--bleed-right{margin:0;width:auto}.heading__script{font-family:var(--font-sans);font-weight:400;font-size:inherit}.heading__eyebrow{display:inline;font-size:inherit;font-weight:inherit;letter-spacing:inherit}.heading{font-size:clamp(2rem,3.3vw,3.1rem)}.accent-bar{display:none}.panel{background:var(--soft-sage);padding:2rem}.theme-white{background:var(--offwhite)}.theme-offwhite{background:var(--soft-sage)}.theme-yellow{background:var(--sage)}.eyebrow,.kicker{font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.6rem;color:var(--deepsage)}.theme-dark .kicker{color:var(--sage)}.intro-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(3rem,7vw,8rem);align-items:start}.intro-grid h2{font-size:clamp(2rem,3.3vw,3.1rem)}.intro-grid .text-link{margin-top:2rem}.measure{max-width:40rem;margin-top:1.7rem;color:var(--muted)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:3rem}.section-head .measure{max-width:30rem;margin:0}.section-head h2{font-size:clamp(2rem,3.3vw,3.1rem)}.btn{min-height:52px;gap:2rem;padding:14px 23px;font-size:.875rem;font-weight:400}.btn--accent:hover{background:var(--sage);color:var(--ink)}.text-link{display:inline-flex;align-items:center;gap:1.5rem;min-height:48px;font-size:.875rem;font-weight:400;border-bottom:1px solid var(--ink)}.text-link:hover{color:var(--deepsage)}
/* Persistent header: all three links stay visible on small screens. */
.site-header{background:var(--offwhite);border-bottom:1px solid var(--line)}.site-header__inner{min-height:100px}.site-logo img{width:180px;height:auto}.nav__list{gap:2.5rem}.nav__link{font-size:.875rem;font-weight:400;min-height:44px}.nav__link[aria-current=page]{font-weight:400}.nav__link:after{height:2px;background:var(--ink)}.nav__link--cta{padding:11px 24px}.nav__link--cta[aria-current=page]{outline:0;border-bottom:2px solid var(--ink)}
/* Homepage */
.home-hero{padding:3rem 0 3.5rem}.hero-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,5.5rem);align-items:center}.hero-copy{padding-block:2rem}.hero-copy h1{font-size:clamp(2.8rem,5.2vw,5rem);letter-spacing:-.055em;max-width:13ch}.hero-description{max-width:33rem;margin:1.8rem 0 2rem;font-size:1.0625rem}.hero-photo{position:relative;height:650px;max-height:calc(100svh - 180px);min-height:480px;overflow:hidden}.hero-photo picture,.hero-photo img{width:100%;height:100%}.hero-photo img{object-fit:cover;object-position:50% 62%}.hero-photo figcaption{position:absolute;bottom:0;left:0;right:0;background:var(--dark);color:var(--sage);padding:17px 22px;font-size:.7rem;letter-spacing:.05em}.hero-proof{display:flex;gap:1.8rem;align-items:center;margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--line);max-width:33rem}.hero-proof strong{display:flex;align-items:baseline;gap:.6rem;font-size:3.8rem;font-weight:400;letter-spacing:-.05em;line-height:1}.hero-proof strong span{font-size:.8rem;letter-spacing:0}.hero-proof p{font-size:.8rem;line-height:1.6}.sector-strip{background:var(--sage);padding:23px 0}.sector-strip .container{display:flex;justify-content:space-between;gap:1rem}.sector-strip span{font-size:.8rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase}.services-section{background:var(--soft-sage)}.software-note{font-size:.8rem;border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2.5rem}.service-list{counter-reset:service}.service{counter-increment:service;display:grid;grid-template-columns:2rem 1fr;gap:.35rem 1rem;border-top:1px solid var(--line);border-bottom:0;padding:1.25rem 0}.service:before{content:'0' counter(service);font-size:.75rem;color:var(--deepsage)}.service__name{font-size:1.1rem;font-weight:400;line-height:1.45}.service__detail{grid-column:2;font-size:.85rem;color:var(--muted)}.project-cards{grid-template-columns:1.2fr 1fr;gap:3rem 2rem}.project-card{background:transparent;color:var(--ink)}.project-card:nth-child(even){padding-top:4rem}.project-card__img{aspect-ratio:auto;height:340px}.project-card__body{padding:1.25rem 0;gap:.4rem;border-bottom:1px solid var(--line)}.project-card__name{font-size:1.4rem;font-weight:400}.project-card__meta{font-size:.8rem;color:var(--muted);text-transform:none;letter-spacing:0}.project-card a:hover .project-card__name{color:var(--deepsage)}.process-section{background:var(--dark);color:var(--offwhite)}.process-section .eyebrow,.process-section .measure{color:var(--sage)}.process-row{border-top:1px solid var(--rule-dark)}.process-row:last-child{border-bottom:1px solid var(--rule-dark)}.process-row summary{list-style:none;display:flex;gap:1.2rem;align-items:center;padding:1.4rem 0;cursor:pointer;font-size:1rem;min-height:64px}.process-row summary::-webkit-details-marker{display:none}.process-num{color:var(--sage);font-size:.8rem}.process-toggle{margin-left:auto;color:var(--yellow);font-size:1.5rem}.process-row[open] .process-toggle{transform:rotate(45deg)}.process-row p{padding:0 2.4rem 1.6rem;color:var(--sage);font-size:.9rem}.process-row summary:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}.directors{gap:4rem}.director{border-top:2px solid var(--sage);padding-top:1.6rem;gap:.7rem}.director__name{font-size:1.6rem;font-weight:400}.director+.director{border-left:0;padding-left:0}.director__role,.director__creds{font-size:.85rem;font-weight:300;color:var(--muted)}.director__contact{justify-items:start;margin-top:1rem}.contact-link{min-height:44px;overflow-wrap:anywhere}.contact-cta{background:var(--sage);padding:4.5rem 0}.contact-cta .eyebrow{color:var(--ink)}.contact-cta h2{font-size:clamp(2.7rem,4.5vw,4.5rem)}.contact-cta p:not(.eyebrow){max-width:38rem;margin:1.5rem 0}.contact-cta .btn{margin-top:.5rem}
/* Projects */
.page-head{padding-block:4rem}.page-head h1{font-size:clamp(3rem,5.5vw,5.5rem)}.page-head__grid{gap:4rem;align-items:start}.project-index strong{font-weight:400}.project-index span{font-size:.75rem;color:var(--muted)}.project-block{grid-template-columns:.85fr 1.3fr;gap:3rem}.project-block__text .prose{font-size:.9rem}.project-block__text .panel{background:transparent;padding:0}.project__title{font-family:var(--font-sans);font-size:clamp(2rem,3vw,3rem);font-weight:400}.mosaic{gap:10px;grid-auto-rows:150px}.mosaic--auto{grid-template-columns:repeat(2,1fr)}.mosaic:has(>:only-child){grid-auto-rows:220px}.caption-bar,.caption-bar--yellow,.theme-dark .caption-bar{background:transparent;padding:.5rem 0 0;color:var(--muted);font-size:.7rem;letter-spacing:.05em}.theme-dark .caption-bar{color:var(--sage)}.project-more{gap:2rem;margin-top:3rem}
/* Contact */
.contact-photo img{width:100%;height:560px;object-fit:cover}.contact-photo figcaption{font-size:.75rem;color:var(--muted);margin-top:1rem}.details--contact{display:block}.details--contact dt{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:1rem;font-size:1.125rem;text-transform:none;letter-spacing:0;font-weight:400}.details--contact dd{justify-items:start;margin:.4rem 0 0}.details--contact dd>span{color:var(--muted);font-size:.8rem}.details--contact .contact-link{min-height:44px}.address-lg{line-height:1.8}.site-footer__logo{width:190px;padding:12px}.site-footer__legal{font-size:.7rem}.site-footer a{display:inline-block;min-height:32px}
/* Responsive */
@media(min-width:1600px){.hero-photo{height:720px}.home-hero{padding-block:4rem}}
@media(max-width:900px){.hero-layout{gap:2rem}.hero-photo{min-height:480px;height:560px;max-height:none}.hero-copy h1{font-size:clamp(2.7rem,5.4vw,4rem)}.hero-proof{flex-wrap:wrap;gap:1rem}.intro-grid{gap:3rem;grid-template-columns:1fr 1fr}.project-block{grid-template-columns:1fr}.project-block--flip .project-block__text{order:0}.project-card__img{height:280px}.contact-photo img{height:480px}}
@media(max-width:650px){.site-header__inner{min-height:86px;flex-wrap:wrap;padding:14px 0;gap:8px}.site-logo img{width:128px}.nav__list{gap:14px}.nav__link{font-size:.75rem}.nav__link--cta{padding:10px 12px}.hero-layout,.intro-grid,.split,.page-head__grid,.project-more,.directors{grid-template-columns:1fr;gap:2.5rem}.home-hero{padding-top:1.5rem}.hero-copy{padding:1rem 0 0}.hero-copy h1{font-size:clamp(2.6rem,9.3vw,3.8rem);max-width:none}.hero-description{font-size:1rem}.hero-proof{margin-top:2rem;flex-wrap:nowrap}.hero-photo{height:520px;min-height:0;max-height:none}.sector-strip .container{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.sector-strip span{font-size:.75rem}.section-head{align-items:start;flex-direction:column}.project-cards{grid-template-columns:1fr;gap:2rem}.project-card:nth-child(even){padding-top:0}.project-card__img{height:280px}.project-block{gap:2rem}.mosaic{grid-auto-rows:120px}.mosaic:has(>:only-child){grid-auto-rows:150px}.page-head{padding-block:3rem}.panel{padding:1.5rem}.contact-photo img{height:350px}.site-footer__grid{grid-template-columns:1fr;gap:2rem}.site-footer__legal{flex-direction:column;gap:.5rem}.process-row summary{font-size:.9rem}.details{grid-template-columns:1fr;gap:.4rem}.details dd{margin-bottom:.8rem}}
.hero-copy h1{max-width:none;font-size:clamp(2.8rem,4.6vw,4.7rem)}.director__name{font-family:var(--font-sans)}
@media(max-width:650px){.hero-copy h1{font-size:clamp(2.6rem,9.3vw,3.8rem)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}


/* Keep incomplete gallery rows balanced. */
.mosaic--auto:has(> :nth-child(2):last-child){grid-template-columns:1fr}.mosaic--auto > :last-child:nth-child(even){grid-column:1/-1}

/* Lindsay revision — option 2 photo cards within option 1; grouped project index. */
.project-cards{gap:var(--mosaic-gap);grid-template-columns:repeat(3,minmax(0,1fr))}
.project-card,.project-card:nth-child(even){padding-top:0;background:var(--ink);color:var(--white)}
.project-card__img{height:auto;aspect-ratio:4/3}
.project-card__body{padding:var(--space-4) var(--space-4) var(--space-5);border:0;flex:1}
.project-card__name{font-size:var(--text-md);font-weight:600}
.project-card__meta{font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--muted-dark)}
.project-card a:hover .project-card__name{color:var(--yellow)}
.project-category+.project-category{margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.project-category h2{font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;line-height:1.5}
.project-category .project-index li:last-child{border-bottom:0}
@media(max-width:1000px){.project-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.project-cards{grid-template-columns:1fr}.project-category h2{font-size:.75rem}}