/* ============================================================
   Crestalon — West Coast renovation studio home page
   Palette: plaster-grey base + brass accent (locked)
   ============================================================ */

:root {
  /* Shared colors live in /theme.css. */









  --serif: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --header-height: 76px;             /* sticky header — offsets hero min-height */
  --maxw: 1240px;                    /* text reading tier (unchanged)     */
  --maxw-media: 1460px;              /* imagery tier — Selected Work grid  */
  --maxw-banner: 1680px;             /* near-full-bleed exterior banner cap */
  --edge: clamp(1rem, 3vw, 2.5rem);  /* small edge gutter for the banner   */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --band: clamp(4.5rem, 9vw, 8rem);   /* single vertical rhythm token */
  --radius: 4px;
}

* { box-sizing: border-box; }
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scrollbar-color: var(--ink) var(--paper);
  scrollbar-width: thin;
}

::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--ink);
  border: 3px solid var(--paper);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--brass); }

body {
  overflow-x: clip;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;              /* scales with the root step-up on large displays */
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Type scale (one clear scale, dramatic H→body jump) ---------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: clamp(3.1rem, 7.5vw, 5.8rem); }
h2 { font-size: clamp(2.3rem, 5vw, 4rem); }
h3 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }

p { margin: 0 0 1rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.4rem;
  font-weight: 600;
}
.eyebrow.light { color: var(--brass-hi); }

/* Thin brass section rule under eyebrows / heads */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  background: var(--brass);
  vertical-align: middle;
  margin-right: 0.75rem;
  transform: translateY(-2px);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  text-decoration: none;
  padding: 0.9em 1.7em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
  white-space: nowrap;
}
/* primary = brass fill / ink text */
.btn-solid { background: var(--brass); color: var(--accent-ink); }
.btn-solid:hover { background: var(--brass-hi); transform: translateY(-1px); }
/* secondary = ink hairline outline, transparent, brass on hover */
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--brass); color: var(--brass); }
.btn-lg { padding: 1.1em 2.3em; font-size: 0.92rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 1rem var(--gutter);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* ---------- Brand lockup (header + footer) ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  justify-self: start;
  text-decoration: none;
}
.brand-mark { height: 46px; width: auto; display: block; }
.brand-mark--dark { display: none; }
:root[data-theme='dark'] .site-header .brand-mark--light { display: none; }
:root[data-theme='dark'] .site-header .brand-mark--dark { display: block; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; }
.brand-word { height: 22px; width: auto; display: block; }
.brand:not(.brand--footer) .brand-word { filter: var(--header-logo-filter); }
/* tagline sits under the wordmark, left edge aligned to it (not the whole logo) */
.brand-tagline {
  font-family: var(--sans);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 5px;
  font-weight: 600;
}
.nav { display: flex; align-items: center; gap: clamp(1rem, 1.7vw, 1.55rem); justify-self: center; }
.nav > a,
.nav-link {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  position: relative;
  white-space: nowrap;
}
.nav > a::after,
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 0; height: 1px; background: var(--brass);
  transition: width .25s ease;
}
.nav > a:hover,
.nav > a.is-active,
.nav-link:hover,
.nav-link.is-active { color: var(--brass); }
.nav > a:hover::after,
.nav > a.is-active::after,
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item--has-menu::after { content: ""; position: absolute; left: -0.75rem; right: -0.75rem; top: 100%; height: 2.05rem; }
.nav-menu {
  position: absolute;
  top: calc(100% + 1.85rem);
  left: 50%;
  z-index: 60;
  display: grid;
  min-width: 270px;
  padding: 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--menu-bg);
  box-shadow: 0 24px 55px -32px rgba(27, 30, 34, 0.55);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  visibility: hidden;
}
.nav-item.is-hover-open .nav-menu,
.nav-link:focus-visible + .nav-menu,
.nav-menu:focus-within { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); visibility: visible; }

.nav-menu a {
  border-radius: var(--radius);
  color: var(--ink);
  padding: 0.56rem 0.65rem;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
.nav-menu a:hover,
.nav-menu a.is-active { background: var(--paper); color: var(--brass); }
.nav-menu__all { margin-bottom: 0.35rem; border-bottom: 1px solid var(--line); font-weight: 600; }
.nav-toggle { display: none; justify-self: end; }
.header-cta { justify-self: end; }

/* ---------- Hero ---------- */
.hero {
  max-width: var(--maxw);
  margin: 0 auto;
  /* Height follows content, top-anchored: the content sits a comfortable,
     bounded distance below the header at every viewport height — no centred
     void on tall monitors, no cutoff on short ones. Top/bottom padding scale
     with viewport height but are clamped at both ends. */
  padding: clamp(3rem, 8vh, 9rem) var(--gutter) clamp(2.5rem, 6vh, 7rem);
  display: grid;
  grid-template-columns: 45fr 55fr;   /* image column wider than text */
  grid-template-areas:
    "eyebrow ."
    "body    image";
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
  align-content: start;
}
.hero-eyebrow { grid-area: eyebrow; }
.hero-body { grid-area: body; max-width: 40ch; }   /* room for a 3-line headline */
.lede {
  max-width: 34ch;                    /* keep the subhead's reading measure */
  font-size: 1.1rem;
  font-weight: 300;
  color: var(--ink-soft);
  margin: 1.6rem 0 2.2rem;
}
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }
/* Full-height plate: spans only the headline→buttons row, so its top edge
   aligns with the top of the headline and its bottom with the CTA buttons.
   Image is absolutely positioned so it never dictates the row height — the
   frame grows and crops to fill (no upscaling / stretching of the photo). */
.hero-figure {
  grid-area: image;
  position: relative;
  align-self: stretch;
  min-height: clamp(340px, 44vh, 560px);
  /* never taller than the viewport beside the text */
  max-height: calc(100svh - var(--header-height) - 5rem);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 34px 70px -30px rgba(27, 30, 34, 0.45);
}

.hero-figure img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* ---------- Sections (single rhythm token) ---------- */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--band) var(--gutter);
}
.section-head {
  max-width: var(--maxw);                     /* sits in the text tier, left edge aligned */
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding-inline: var(--gutter);
}
.section-head .section-lede { max-width: 48ch; }   /* keep the reading measure */
.section-lede { font-size: 1.08rem; font-weight: 300; color: var(--ink-soft); margin-top: 1.1rem; }

/* ---------- Work gallery — wide, editorial, gap-free 12-column grid ---------- */
/* Full-width shell: the heading (.section-head) self-centers at the text tier,
   while the gallery grid self-centers at the wider imagery tier. Text columns
   keep their editorial side margins; only the photography breaks wider. */
.section.work { max-width: none; padding-inline: 0; }
.work .grid {
  max-width: var(--maxw-media);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(140px, 13vw, 210px);   /* row unit; plates span 2–3 for varied heights */
  gap: clamp(0.9rem, 1.4vw, 1.5rem);
}
.plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  margin: 0;
  background: var(--paper-2);
}
.plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.plate:hover img { transform: scale(1.04); }

/* explicit placement — varied spans/heights, every plate on a line, zero orphan gaps */
.plate-a { grid-column: 1 / 8;   grid-row: 1 / 4; }  /* large landscape feature */
.plate-b { grid-column: 8 / 13;  grid-row: 1 / 4; }  /* tall portrait beside it   */
.plate-c { grid-column: 1 / 13;  grid-row: 4 / 6; }  /* full-width feature         */
.plate-d { grid-column: 1 / 6;   grid-row: 6 / 8; }  /* asymmetric bottom row      */
.plate-e { grid-column: 6 / 13;  grid-row: 6 / 8; }

.card-label {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.5rem 1.1rem 0.95rem;
  background: linear-gradient(to top, rgba(14, 16, 19, 0.85), rgba(14, 16, 19, 0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.plate:hover .card-label {
  opacity: 1;
  transform: none;
}
.card-label .cap-eye {
  color: var(--brass-hi);
  font-family: var(--sans);
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.card-label .cap-t {
  color: var(--text-on-dark);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.15;
}
@media (hover: none) {
  .card-label {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Craft ---------- */
.craft {
  display: grid;
  grid-template-columns: clamp(360px, 45%, 540px) 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
}
/* Tall portrait detail plate — a confident vertical counterweight to the copy.
   Locked to the photo's native 2:3 ratio so it fills the frame without cropping;
   sized by its column width and top-aligned with the eyebrow/headline. */
.craft-figure {
  position: relative;
  align-self: start;
  aspect-ratio: 1024 / 1536;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(27, 30, 34, 0.45);
}
.craft-figure img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.craft-copy { max-width: 44ch; }
.craft-copy > p:not(.eyebrow) { margin-top: 1.35rem; color: var(--ink-soft); font-weight: 300; font-size: 1.08rem; }
.craft-points { list-style: none; padding: 0; margin: 2.2rem 0 0; }
.craft-points li {
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink-soft);
}
.craft-points strong { color: var(--ink); font-weight: 600; }

/* ---------- Trusted brands / materials band ---------- */
/* Full-colour source logos normalised to one calm greyscale set on the plaster
   background; full colour on hover. Uses the standard section rhythm. */
.trusted-logos {
  list-style: none;
  margin: clamp(1.75rem, 3.5vw, 2.75rem) 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  flex-wrap: wrap;
}
.trusted-logos li {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.trusted-logos img {
  width: auto;
  max-width: 100%;
  height: clamp(28px, 3.4vw, 40px);
  object-fit: contain;
  filter: var(--trusted-logo-filter);
  opacity: 0.62;
  transition: filter .3s ease, opacity .3s ease;
}
.trusted-logos img:hover { filter: grayscale(0); opacity: 1; }

@media (max-width: 620px) {
  .trusted-logos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 7vw, 2.75rem) clamp(1.25rem, 6vw, 2rem);
  }
  .trusted-logos li { width: 100%; }
  .trusted-logos img { width: min(100%, 128px); height: 34px; }
}

/* ---------- Services + exterior banner ---------- */
/* Full-width shell: banner goes near-full-bleed, services list stays text-tier. */
.section.services { max-width: none; padding-inline: 0; }
.services-banner {
  position: relative;
  width: min(var(--maxw-banner), calc(100% - 2 * var(--edge)));
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius);
  overflow: hidden;
}
.services-banner img {
  width: 100%;
  height: clamp(320px, 44vw, 560px);
  object-fit: cover;
  display: block;
}
/* dark scrim for guaranteed AA contrast on overlay text —
   bottom-up plus a stronger left-side wash where the headline sits */
.services-banner::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(12, 14, 17, 0.90) 0%,
      rgba(12, 14, 17, 0.55) 30%,
      rgba(12, 14, 17, 0) 65%),
    linear-gradient(to right,
      rgba(12, 14, 17, 0.72) 0%,
      rgba(12, 14, 17, 0.30) 38%,
      rgba(12, 14, 17, 0) 62%);
  pointer-events: none;
}
.services-banner-caption {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: var(--text-on-dark);
}
.services-banner-caption h2 { color: var(--text-on-dark); max-width: 18ch; }

/* services list — fixed grid, columns aligned via subgrid */
.services-list {
  list-style: none;
  max-width: var(--maxw);         /* text tier */
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 0;
}
.services-list li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 0.4rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
  transition: border-color .2s ease;
}
.services-list li:hover { border-top-color: var(--brass); }
.services-list li:hover h3 { color: var(--brass); }
.services-list a {
  display: grid;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}
.services-list a:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 6px;
}
.services-list h3 { transition: color .2s ease; }
.services-list p { color: var(--ink-soft); font-weight: 300; font-size: 0.94rem; margin: 0; }

/* fallback for browsers without subgrid: keep headings a consistent height */
@supports not (grid-template-rows: subgrid) {
  .services-list li { grid-row: auto; grid-template-rows: none; align-content: start; }
  .services-list h3 { min-height: 2.7rem; }
}

/* ---------- Contact ---------- */
.contact { text-align: center; max-width: 720px; }
.contact .section-lede { margin: 1rem auto 2.2rem; }
.contact h2 { margin-top: 0.5rem; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  padding: var(--band) 0 clamp(1.5rem, 3vw, 2.5rem);
}
.footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 1.8fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.7rem; }
/* footer brand uses the reversed art + a muted-light tagline */
.brand--footer .brand-mark { height: 52px; }
.brand--footer .brand-word { height: 25px; }
.brand--footer .brand-tagline { color: var(--text-on-dark-medium); }

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 0.8fr 1.7fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.footer-col h3 {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.1rem;
  font-weight: 600;
}
.footer-col p { color: var(--text-on-dark-medium); font-weight: 300; font-size: 0.92rem; margin: 0 0 0.55rem; line-height: 1.6; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.55rem; }
.footer-col a { color: var(--text-on-dark-strong); text-decoration: none; transition: color .2s ease; }
.footer-col a:hover { color: var(--brass-hi); }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.footer-copy { color: var(--text-on-dark-subtle); font-size: 0.8rem; margin: 0; }
.footer-legal a { color: var(--text-on-dark-subtle); font-size: 0.8rem; text-decoration: none; transition: color .2s ease; }
.footer-legal a:hover { color: var(--brass-hi); }

/* ---------- Responsive ---------- */
@media (min-width: 761px) and (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 0.96fr) minmax(280px, 0.9fr);
    column-gap: clamp(1.25rem, 4vw, 2rem);
    padding-top: clamp(3rem, 7vh, 4.5rem);
    padding-bottom: clamp(2.5rem, 6vh, 4rem);
  }
  .hero h1 { font-size: clamp(2.7rem, 6vw, 3.35rem); }
  .hero .lede { max-width: 31ch; font-size: 1.02rem; }
  .hero-figure {
    align-self: start;
    min-height: 0;
    max-height: none;
    height: clamp(360px, 48vw, 420px);
  }
  .hero-figure img { object-position: center 32%; }
}

@media (max-width: 760px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "eyebrow" "body" "image";
  }
  .hero-body { max-width: none; }
  .hero-figure {
    align-self: auto;
    justify-self: stretch;
    width: 100%;
    min-height: 0;
    max-height: none;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 1rem 0 0;
  }
  .hero-figure img { object-position: center 32%; }

  /* gallery keeps its editorial composition; row unit grows for touch sizes */
  .grid { grid-auto-rows: clamp(150px, 20vw, 210px); }

  .craft { grid-template-columns: 1fr; }
  .craft-figure { max-width: 460px; }
  .services-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1060px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .header-cta { display: none; }
  .nav {
    position: fixed;
    inset: 0 0 auto 0;
    top: calc(var(--header-height) + 4px);
    width: 100%;
    max-height: calc(100svh - var(--header-height));
    justify-self: stretch;
    align-items: stretch;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.25rem;
    transform: translateY(-140%);
    transition: transform .3s ease;
  }
  .nav.open { transform: translateY(0); }
  .nav > a,
  .nav-link { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .nav > a::after,
  .nav-link::after { display: none; }
  .nav-item { display: block; }
  .nav-item--has-menu::after { display: none; }
  .nav-menu {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0.35rem 0 0.75rem clamp(0.85rem, 4vw, 1.2rem);
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    box-shadow: none;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    transition: none;
    visibility: visible;
  }
  .nav-menu a {
    display: block;
    padding: 0.45rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-soft);
    font-size: 0.82rem;
    white-space: normal;
  }
  .nav-menu a:hover,
  .nav-menu a.is-active { background: transparent; color: var(--brass); }
  .nav-menu__all { margin-bottom: 0; border-bottom: 0; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 40px;
    background: none; border: none; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; width: 24px; background: var(--ink); transition: transform .3s ease, opacity .2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

@media (max-width: 560px) {
  /* single-column stack — natural heights per orientation */
  .grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .plate-a, .plate-b, .plate-c, .plate-d, .plate-e {
    grid-column: 1; grid-row: auto;
  }
  .plate img { height: auto; }
  .plate-a img, .plate-c img, .plate-e img { aspect-ratio: 3 / 2; }  /* landscapes */
  .plate-b img, .plate-d img { aspect-ratio: 3 / 4; }                /* portraits  */
  .services-list { grid-template-columns: 1fr; }
}

/* ---------- Footer responsive ---------- */
@media (max-width: 820px) {
  .footer-top { grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 3rem); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .footer-col--wide { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* ---------- Large-display scaling ---------- */
/* On wide screens, step the text tier and the root font-size up together so the
   text sections stay proportional to the wider gallery/banner and the reading
   measure holds ~70–90 chars/line instead of shrinking as the page widens.
   Image tiers (--maxw-media / --maxw-banner) stay fixed, so they remain wider —
   the gap just closes. Breakpoints target 1920px and 2560px. */
@media (min-width: 1600px) {
  :root { --maxw: 1300px; }
  html { font-size: 106.25%; }   /* ~17px */
}
@media (min-width: 2400px) {
  :root { --maxw: 1320px; }
  html { font-size: 112.5%; }    /* ~18px */
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; transition: none !important; }
}

/* Dark theme composition: denser spacing and distinct section depth. */
:root[data-theme='dark'] .section.work,
:root[data-theme='dark'] .section.services {
  background: var(--paper-2);
}

:root[data-theme='dark'] .section.work {
  padding-block: clamp(4.5rem, 7vw, 6.75rem);
}

@media (min-width: 761px) {
  :root[data-theme='dark'] .section.craft {
    grid-template-columns: minmax(440px, 1.05fr) minmax(0, 0.85fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
}

:root[data-theme='dark'] .section.craft {
  padding-block: clamp(4rem, 6vw, 6rem);
}

:root[data-theme='dark'] .craft-figure {
  aspect-ratio: 4 / 5;
}

:root[data-theme='dark'] .section.trusted {
  background: var(--surface-card);
  box-shadow: 0 0 0 100vmax var(--surface-card);
  clip-path: inset(0 -100vmax);
  padding-block: clamp(3rem, 5vw, 4.5rem);
}

:root[data-theme='dark'] .trusted-logos img {
  opacity: 0.82;
}

:root[data-theme='dark'] .trusted-logos img:hover {
  filter: none;
  opacity: 1;
}

:root[data-theme='dark'] .section.services {
  padding-block: clamp(4.5rem, 7vw, 6.75rem);
}