/* Cross Rhodes Print & Technologies · built from concept A · Field
   Ground: the logo's forest green and near-black. Accents: khaki-gold and olive.
   Structural idea: the lockup's diagonal stripe bands and angled blocks, all at one angle (28°). */

:root {
  --ink-0: #0b1410;
  --ink-1: #143023;
  --ink-2: #1a3a2b;
  --ink-3: #22483a;
  --olive: #475131;
  --olive-2: #6e7840; /* the middle stripe: light enough to read on the near-black */
  --khaki: #9c8a54;
  --khaki-deep: #8b7a47;
  --khaki-hi: #c2ae70;
  --bone: #ede7d8;
  --bone-1: #ddd6c2;
  --bone-2: #cfc6ae;
  --stone: #e6dfcd;
  --stone-2: #d9d0ba;
  --stone-ink: #2f3b31;
  --stone-ink-2: #3d4a3a;
  --stone-line: rgba(20, 48, 35, .22);
  --line: rgba(237, 231, 216, .14);
  --line-strong: rgba(237, 231, 216, .28);

  --display: "Big Shoulders Display", "Archivo Narrow", "Arial Narrow", sans-serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --lean: 0.53; /* tan 28°: the lockup's stripe angle */
  --angle: 28deg;
  --gutter: clamp(20px, 4vw, 56px);
  --measure: 62ch;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--bone);
  font: 400 17px/1.55 var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

::selection { background: var(--khaki); color: var(--ink-0); }
:focus-visible { outline: 2px solid var(--khaki-hi); outline-offset: 3px; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--ink-0); }
::-webkit-scrollbar-thumb { background: var(--olive); border: 3px solid var(--ink-0); }
[hidden] { display: none !important; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--khaki-hi); }
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: .95; text-wrap: balance; letter-spacing: .005em; }
h2 { font-size: clamp(2.6rem, 5.2vw, 4.6rem); text-transform: uppercase; }
h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); text-transform: uppercase; letter-spacing: .02em; }
.lead { font-size: clamp(1.05rem, 1.35vw, 1.25rem); color: var(--bone-1); }
.muted { color: var(--bone-1); }
.label { font-family: var(--text); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--khaki-hi); }

.wrap { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--khaki); color: var(--ink-0); padding: 10px 14px; font-weight: 600;
}
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Stripe blocks: the lockup's motif, at the two ends of the page only ---------- */
.band {
  height: 32px; background-color: var(--ink-0);
  background-image: repeating-linear-gradient(118deg,
    var(--khaki) 0 26px, transparent 26px 38px,
    var(--olive-2) 38px 64px, transparent 64px 76px,
    var(--ink-3) 76px 102px, transparent 102px 150px);
}
.band--short { display: none; width: 180px; height: 16px; background-image: repeating-linear-gradient(118deg,
    var(--khaki) 0 16px, transparent 16px 24px,
    var(--olive-2) 24px 40px, transparent 40px 48px,
    var(--ink-3) 48px 64px, transparent 64px 86px); }

/* Angled index tab: a plan-sheet number on the three main sections */
.tab {
  display: inline-block; margin-bottom: 18px; padding: 7px 24px 6px 18px;
  font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1; letter-spacing: .04em;
  color: var(--ink-0); background: var(--khaki);
  clip-path: polygon(0 0, 100% 0, calc(100% - 17px) 100%, 0 100%);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  min-height: 46px; padding: 0 20px;
  font: 600 .95rem/1 var(--text); letter-spacing: .01em; text-decoration: none;
  color: var(--bone); background: transparent; border: 1.5px solid var(--line-strong);
  cursor: pointer; white-space: nowrap;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { border-color: var(--khaki-hi); color: var(--khaki-hi); }
.btn--fill { background: var(--khaki); border-color: var(--khaki); color: var(--ink-0); }
.btn--fill:hover { background: var(--khaki-hi); border-color: var(--khaki-hi); color: var(--ink-0); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--on-stone { color: var(--ink-1); border-color: rgba(20, 48, 35, .35); }
.btn--on-stone:hover { color: var(--ink-1); border-color: var(--ink-1); }
.btn--on-stone.btn--fill { background: var(--ink-1); color: var(--bone); border-color: var(--ink-1); }
.btn--on-stone.btn--fill:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--bone); }

/* ---------- Header ---------- */
.topbar {
  background: var(--ink-0); border-bottom: 1px solid var(--line);
  font-size: .86rem; color: var(--bone-1);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 24px; }
.topbar ul { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar a { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.topbar a:hover { color: var(--khaki-hi); }
.topbar strong { color: var(--bone); font-weight: 600; }
.topbar svg { width: 14px; height: 14px; }

.header { position: sticky; top: 0; z-index: 50; background: var(--ink-1); border-bottom: 1px solid var(--line); }
.header .wrap { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: block; flex: none; margin-right: auto; }
.brand img { height: 40px; width: auto; }
.nav > ul { display: flex; gap: 2px; }
.nav__item { position: relative; }
.nav a {
  display: block; padding: 10px 12px; text-decoration: none; font-weight: 500; font-size: .96rem;
  position: relative; white-space: nowrap;
}
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px;
  background: var(--khaki); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a svg { width: 12px; height: 12px; margin-left: 5px; vertical-align: 1px; color: var(--khaki-hi); }
.nav__menu {
  position: absolute; left: 0; top: 100%; z-index: 60; min-width: 250px; padding: 8px 0;
  background: var(--ink-1); border: 1px solid var(--line); border-top: 2px solid var(--khaki);
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .25s var(--ease), visibility .2s;
}
.nav__item:hover > .nav__menu, .nav__item:focus-within > .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { padding: 9px 18px; font-size: .95rem; white-space: nowrap; }
.nav__menu a::after { display: none; }
.nav__menu a:hover, .nav__menu a[aria-current="page"] { color: var(--khaki-hi); background: rgba(237, 231, 216, .04); }
.actions { display: flex; gap: 8px; flex: none; }

.call { display: none; }
.menu { display: none; }
.menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 0 10px 12px; font-weight: 600; font-size: .95rem; -webkit-user-select: none; user-select: none;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__icon { width: 26px; height: 18px; position: relative; }
.menu__icon::before, .menu__icon::after, .menu__icon i {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: var(--bone);
  transition: transform .3s var(--ease), opacity .2s;
}
.menu__icon::before { top: 0; } .menu__icon i { top: 8px; } .menu__icon::after { top: 16px; }
.menu[open] .menu__icon::before { transform: translateY(8px) rotate(45deg); }
.menu[open] .menu__icon::after { transform: translateY(-8px) rotate(-45deg); }
.menu[open] .menu__icon i { opacity: 0; }
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--ink-1);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 12px var(--gutter) 24px; display: grid; gap: 18px;
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
}
.menu__panel { max-height: calc(100vh - 64px); overflow-y: auto; }
.menu__nav > li > a { display: block; padding: 12px 0; font-size: 1.15rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.menu__nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.menu__nav ul a { display: block; padding: 7px 0; font-size: .97rem; color: var(--bone-1); text-decoration: none; }
.menu__nav a[aria-current="page"] { color: var(--khaki-hi); }
@media (max-width: 420px) { .menu__nav ul { grid-template-columns: 1fr; } }
.menu__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu__actions .btn { justify-content: center; }
.menu__calls { display: grid; gap: 6px; font-size: .95rem; }
.menu__calls a { text-decoration: none; display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }
.menu__calls strong { color: var(--khaki-hi); font-weight: 600; }
.call { position: relative; }
.call > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.call > summary::-webkit-details-marker { display: none; }
.call__panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 30; width: max-content; min-width: 260px;
  background: var(--ink-1); border: 1px solid var(--line-strong); padding: 6px 16px;
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .6);
}
.call__panel a { gap: 20px; }
.call__panel a:last-child { border-bottom: 0; }
.menu__links { display: flex; gap: 18px; font-size: .9rem; color: var(--bone-1); }
.menu__links a { text-decoration: none; }

/* The full menu needs about 1260px on one line; below that the header uses the Menu button. */
@media (max-width: 1260px) {
  .nav, .actions, .topbar ul.topbar__links { display: none; }
  .menu { display: block; }
  .call { display: block; margin-left: auto; }
  .call > summary { padding: 0 14px; border: 1.5px solid var(--line-strong); font-weight: 600; font-size: .92rem; }
  .call[open] > summary { border-color: var(--khaki-hi); }
  .call svg { width: 15px; height: 15px; color: var(--khaki-hi); }
}
@media (max-width: 640px) {
  .topbar { display: none; }
  .brand img { height: 34px; }
  .header .wrap { min-height: 64px; gap: 10px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--ink-0); border-bottom: 1px solid var(--line-strong);
  min-height: min(calc(100vh - 116px), 820px); display: grid; align-items: center;
}
/* The photo panel is a true 28° parallelogram: the panel is skewed, the picture inside is skewed back. */
.hero__photo {
  position: absolute; inset: 0 -300px 0 48%;
  transform: skewX(calc(-1 * var(--angle))); transform-origin: 50% 50%; overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0 300px 0 -240px;
  transform: skewX(var(--angle)); transform-origin: 50% 50%;
}
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 60%; }
.hero__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 20, 16, .5), rgba(11, 20, 16, 0) 40%);
}
.hero__stripes {
  position: absolute; top: -6%; bottom: -6%; left: calc(48% - 74px); width: 74px;
  transform: skewX(calc(-1 * var(--angle))); transform-origin: 50% 50%;
  background: repeating-linear-gradient(90deg,
    var(--ink-3) 0 18px, transparent 18px 28px,
    var(--olive-2) 28px 46px, transparent 46px 56px,
    var(--khaki) 56px 74px);
}
.hero .wrap { position: relative; z-index: 1; padding-block: clamp(36px, 4vw, 48px); }
.hero__copy { max-width: 520px; }
.hero h1 {
  font-size: clamp(3.6rem, 7vw, 6rem); text-transform: uppercase; line-height: .9;
  letter-spacing: 0; color: var(--bone);
}
.hero h1 em { font-style: normal; color: var(--khaki-hi); }
.hero .lead { margin-top: 26px; max-width: 38ch; }
.hero__cta { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
.hero__caption {
  position: absolute; right: var(--gutter); top: 18px; z-index: 1; margin: 0;
  font-size: .84rem; color: var(--bone-1); letter-spacing: .01em; white-space: nowrap;
  background: rgba(11, 20, 16, .78); padding: 7px 11px;
}
/* The hero stacks (photo above, copy below) wherever the slanted panel would crowd the copy. */
@media (max-width: 1200px) {
  .hero { min-height: 0; display: block; }
  .hero__stripes { display: none; }
  .hero__photo {
    position: relative; inset: auto; transform: none; aspect-ratio: 1;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 96px), calc(100% - 181px) 100%, 0 100%);
  }
  .hero__img { inset: 0; transform: none; }
  .hero__img img { object-position: 64% 60%; }
  .hero__img::after { background: linear-gradient(180deg, rgba(11, 20, 16, 0) 60%, rgba(11, 20, 16, .55)); }
  .hero__caption { right: auto; bottom: auto; top: 14px; left: var(--gutter); max-width: calc(100% - 2 * var(--gutter)); white-space: normal; }
  .band--short { display: block; margin: 0 0 22px; }
  .hero .wrap { padding-block: 0 48px; }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(72px, 9vw, 128px); position: relative; }
.section--forest { background: var(--ink-1); }
.section--ink { background: var(--ink-0); }
.section--stone { background: var(--stone); color: var(--ink-1); }
.section--stone .muted, .section--stone .lead { color: var(--stone-ink-2); }
.section--stone ::selection { background: var(--ink-1); color: var(--bone); }
.section__head { display: grid; gap: 22px; margin-bottom: clamp(36px, 5vw, 64px); align-items: end; }
.section__head .lead { max-width: 56ch; }
@media (min-width: 900px) { .section__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } }
.section__head--stack { grid-template-columns: 1fr; align-items: start; gap: 14px; }
.section__head--stack .lead { max-width: 60ch; }

/* ---------- Signs and graphics: the ledger ---------- */
.ledger { border-top: 1px solid var(--line-strong); }
.ledger__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) 340px;
  gap: clamp(20px, 3vw, 48px); align-items: center;
  padding: 28px 0 28px 22px; border-bottom: 1px solid var(--line); position: relative;
  text-decoration: none; color: inherit; scroll-margin-top: 90px;
}
.ledger__row::before {
  content: ""; position: absolute; left: 6px; top: 50%; margin-top: -16px; height: 32px; width: 4px;
  background: var(--khaki); transform: skewX(calc(-1 * var(--angle)));
}
.ledger__name { font-size: clamp(1.9rem, 3vw, 2.8rem); text-transform: uppercase; line-height: .95; }
.ledger__last { white-space: nowrap; }
.ledger__name .arrow { display: inline-block; margin-left: .25em; color: var(--khaki-hi); transition: transform .3s var(--ease); }
.ledger__text { color: var(--bone-1); font-size: 1.05rem; max-width: 50ch; }
.ledger__text p { max-width: none; }
.ledger__text .tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .9rem; color: var(--khaki-hi); letter-spacing: .01em; }
.ledger__pic { justify-self: end; width: 340px; aspect-ratio: 2 / 1; overflow: hidden;
  clip-path: polygon(90px 0, 100% 0, calc(100% - 90px) 100%, 0 100%); }
.ledger__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
/* Only the row that has a page behaves as a link */
a.ledger__row::before { transition: width .45s var(--ease), background .3s; }
a.ledger__row:hover::before, a.ledger__row:focus-visible::before { width: 10px; background: var(--khaki-hi); }
a.ledger__row:hover { background: linear-gradient(90deg, rgba(237, 231, 216, .04), transparent 70%); }
a.ledger__row:hover .ledger__name { color: var(--khaki-hi); }
a.ledger__row:hover .arrow { transform: translateX(8px); }
a.ledger__row:hover .ledger__pic img { transform: scale(1.05); }
a.ledger__row:focus-visible { outline-offset: -2px; }
.ledger details { margin-top: 12px; }
.ledger summary { cursor: pointer; color: var(--khaki-hi); font-weight: 500; font-size: .95rem; list-style: none; display: inline-flex; align-items: center; gap: 8px; }
.ledger summary::-webkit-details-marker { display: none; }
.ledger summary::before { content: ""; width: 9px; height: 9px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.ledger details[open] summary::before { transform: rotate(-135deg) translateY(-2px); }
.ledger details ul { margin-top: 12px; columns: 2; column-gap: 24px; font-size: .95rem; color: var(--bone); }
.ledger details li { padding: 3px 0; break-inside: avoid; }
@media (max-width: 1000px) {
  .ledger__row { grid-template-columns: minmax(0, 1fr) 220px; }
  .ledger__text { grid-column: 1; }
  .ledger__pic { grid-column: 2; grid-row: 1 / span 2; width: 220px; clip-path: polygon(58px 0, 100% 0, calc(100% - 58px) 100%, 0 100%); }
}
@media (max-width: 640px) {
  .ledger__row { grid-template-columns: 1fr; gap: 12px; padding-left: 18px; }
  .ledger__row::before { top: 30px; margin-top: 0; height: 26px; }
  .ledger__pic { grid-column: 1; grid-row: auto; width: 100%; max-width: 340px; justify-self: start; }
  .ledger details ul { columns: 1; }
}

/* ---------- Work: the mosaic, edge to edge ---------- */
.work__head { align-items: end; }
.work__head .lead { margin-top: 14px; }
@media (min-width: 900px) { .work__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.filter { display: flex; flex-wrap: wrap; gap: 8px; justify-self: end; }
.filter button {
  font: 500 .9rem/1 var(--text); color: var(--bone-1); background: transparent;
  border: 1px solid var(--line-strong); padding: 10px 14px; cursor: pointer; letter-spacing: .01em;
  transition: border-color .2s, color .2s, background .2s;
}
.filter button:hover { border-color: var(--khaki-hi); color: var(--khaki-hi); }
.filter button[aria-pressed="true"] { background: var(--khaki); border-color: var(--khaki); color: var(--ink-0); }
@media (max-width: 900px) { .filter { justify-self: start; } }

.mosaic {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px;
  width: min(100%, 1600px); margin-inline: auto;
}
.tile { position: relative; margin: 0; overflow: hidden; background: var(--ink-2); grid-column: span 3; }
.tile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .9s var(--ease); }
.tile:hover img { transform: scale(1.04); }
.tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px;
  font-size: .92rem; line-height: 1.35; color: var(--bone);
  background: linear-gradient(180deg, rgba(11, 20, 16, 0), rgba(11, 20, 16, .9));
}
.tile figcaption b { display: block; font-family: var(--display); font-size: 1.2rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1; margin-bottom: 4px; }
.tile figcaption span { color: var(--bone-1); }
.tile--w4 { grid-column: span 4; }
.tile--w6 { grid-column: span 6; }
.tile--w8 { grid-column: span 8; }
.tile--w9 { grid-column: span 9; }
.tile--w12 { grid-column: span 12; }
.tile--w12 img { aspect-ratio: 2.6 / 1; }
.tile--w9 img { aspect-ratio: 3 / 1; }
.tile--w8 img { aspect-ratio: 2.2 / 1; }
.tile--w6 img { aspect-ratio: 16 / 9; }
.tile--wide img { aspect-ratio: 2.2 / 1; }
.tile--short img { aspect-ratio: 16 / 10; }
/* A filtered view uses one even grid, so the gaps left by hidden tiles never show */
.mosaic[data-filter]:not([data-filter="all"]) { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
.mosaic[data-filter]:not([data-filter="all"]) .tile { grid-column: auto; }
.mosaic[data-filter]:not([data-filter="all"]) .tile img { aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  /* Small tiles fill the holes beside full-width ones, so none sits alone. */
  .mosaic { grid-auto-flow: dense; }
  .tile, .tile--w4 { grid-column: span 6; }
  .tile--w6, .tile--w8, .tile--w9, .tile--w12 { grid-column: span 12; }
  .tile--w9 img, .tile--w12 img { aspect-ratio: 2.2 / 1; }
  /* Pair the half-width tiles up on narrow screens so none sits alone */
  .tile--pair-late { order: 1; }
  .tile--full-sm { grid-column: span 12; }
  .tile--wide, .tile--short { order: 2; }
}
@media (max-width: 520px) {
  .mosaic { gap: 8px 8px; }
  .tile, .tile--w4 { grid-column: span 6; }
  .tile--w6, .tile--w8, .tile--w9, .tile--w12 { grid-column: span 12; }
  .tile--w9 img, .tile--w12 img { aspect-ratio: 2 / 1; }
  .tile { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .tile img { min-height: 0; }
  .tile figcaption { position: static; background: none; padding: 8px 8px 10px; font-size: .84rem; }
  .tile figcaption b { font-size: 1.05rem; }
}
.work__clients { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-strong); padding-top: 28px; display: grid; gap: 18px 40px; }
.work__clients ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 20px; font-size: 1.02rem; font-weight: 500; color: var(--bone); }
.work__clients li { display: flex; align-items: center; gap: 12px; }
.work__clients li::before { content: ""; width: 7px; height: 16px; background: var(--khaki); transform: skewX(calc(-1 * var(--angle))); flex: none; }
@media (min-width: 900px) { .work__clients { grid-template-columns: 200px minmax(0, 1fr); } }
@media (max-width: 640px) { .work__clients ul { grid-template-columns: 1fr 1fr; font-size: 1rem; gap: 10px 12px; } }

/* ---------- Builder services (the one light band, entered through a 28° corner block) ---------- */
/* Only the corner-block band and the specs strip start flush; a stone Text, Lists or Points section keeps its padding. */
.section--stone:has(> .corner), .section--stone.section--tight { padding-top: 0; }
.corner {
  position: absolute; left: 0; top: 0; z-index: 1;
  /* As wide as the left margin plus room for the heading, so a wide window never squeezes it. */
  width: min(calc(max(var(--gutter), (100% - 1320px) / 2) + 400px), 100%); height: 212px; padding: 30px 110px 28px max(var(--gutter), calc((100% - 1320px) / 2));
  background: var(--ink-1); color: var(--bone);
  clip-path: polygon(0 0, 100% 0, calc(100% - 112px) 100%, 0 100%);
}
.corner h2 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); color: var(--bone); line-height: .9; }
.corner .tab { margin-bottom: 14px; }
.corner--foot {
  top: auto; bottom: 0; left: auto; right: 0; width: 300px; height: 96px; padding: 0;
  clip-path: polygon(51px 0, 100% 0, 100% 100%, 0 100%);
}
.builders__open { display: grid; gap: 32px; padding-top: 250px; }
.builders__open .lead { max-width: 52ch; align-self: end; }
.builders__plotter { margin: 0; justify-self: end; width: min(100%, 520px); aspect-ratio: 2 / 1; overflow: hidden; clip-path: polygon(130px 0, 100% 0, calc(100% - 130px) 100%, 0 100%); }
.builders__plotter img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .builders__open { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; padding-top: 0; }
  .builders__open .lead { padding-top: 250px; }
  .builders__plotter { margin-top: 28px; }
}
.specs {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: clamp(40px, 5vw, 64px) 0; border-top: 2px solid var(--ink-1); border-bottom: 1px solid var(--stone-line);
}
.specs li { padding: 22px 16px 20px 0; border-left: 1px solid var(--stone-line); padding-left: 16px; }
.specs li:first-child { border-left: 0; padding-left: 0; }
.specs b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 3.6vw, 3.6rem); line-height: .9; color: var(--ink-1); letter-spacing: .01em; white-space: nowrap; }
.specs span { display: block; margin-top: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--stone-ink-2); line-height: 1.3; }
@media (max-width: 900px) { .specs { grid-template-columns: repeat(3, minmax(0, 1fr)); } .specs li:nth-child(4) { border-left: 0; padding-left: 0; } .specs li:nth-child(n + 4) { border-top: 1px solid var(--stone-line); } }
@media (max-width: 520px) { .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .specs li:nth-child(4) { border-left: 1px solid var(--stone-line); padding-left: 16px; } .specs li:nth-child(odd) { border-left: 0; padding-left: 0; } .specs li:nth-child(n + 3) { border-top: 1px solid var(--stone-line); } }

.builders { display: grid; gap: clamp(32px, 4vw, 64px); }
@media (min-width: 960px) { .builders { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.builders__col h3 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); margin-bottom: 8px; }
.builders__col > p { color: var(--stone-ink-2); }
.spec { margin-top: 24px; border-top: 2px solid var(--ink-1); }
.spec > li { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--stone-line); font-size: 1rem; align-items: start; }
.spec > li.has-thumb { grid-template-columns: minmax(0, 180px) minmax(0, 1fr) 132px; }
/* Two columns side by side leave little room between 960 and 1180: the thumbnail drops under the text. */
@media (min-width: 960px) and (max-width: 1180px) {
  .spec > li.has-thumb { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); }
  .spec > li.has-thumb .thumb { grid-column: 2; }
}
.spec b { font-family: var(--display); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.05; padding-top: 2px; }
.spec span { color: var(--stone-ink); }
.thumb { margin: 0; }
.thumb img { width: 132px; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 3px solid var(--khaki); }
.thumb figcaption { margin-top: 6px; font-size: .76rem; line-height: 1.3; color: var(--stone-ink-2); }
@media (max-width: 520px) {
  .spec > li, .spec > li.has-thumb { grid-template-columns: 1fr; gap: 6px; }
  .thumb { margin-top: 6px; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: end; }
  .thumb figcaption { margin: 0 0 4px; }
}
.builders__cta { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; margin-top: clamp(32px, 4vw, 48px); padding-bottom: 16px; }
@media (max-width: 960px) {
  .corner { position: relative; height: auto; width: auto; max-width: 440px; padding: 26px 90px 24px var(--gutter); clip-path: polygon(0 0, 100% 0, calc(100% - 64px) 100%, 0 100%); }
  .corner--foot { display: none; }
  .builders__open { padding-top: 40px; }
  .builders__cta { padding-bottom: 0; }
}

/* ---------- Certified ---------- */
.certified { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 960px) { .certified { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.certified__lede { display: grid; gap: 22px; align-content: start; }
.certified__badge { width: 164px; padding: 16px; background: var(--bone); }
.certified__badge img { width: 100%; mix-blend-mode: multiply; }
.certified h2 { font-size: clamp(2.8rem, 5.6vw, 5rem); }
.certified h2 em { font-style: normal; color: var(--khaki-hi); }
/* Short version (home): badge, words and buttons in one row; the full list lives on Why Cross Rhodes. */
.certified--short { display: block; }
@media (min-width: 960px) {
  .certified--short .certified__lede { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; }
  .certified--short .certified__badge { grid-row: span 2; }
  .certified--short h2 { font-size: clamp(2.4rem, 4vw, 3.6rem); }
  .certified--short .lead { grid-column: 2; }
  .certified--short .btn-row { grid-column: 3; grid-row: 1 / span 2; flex-direction: column; align-items: stretch; }
}
.certs { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.cert { border-bottom: 1px solid var(--line); }
.cert summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; list-style: none; cursor: pointer; }
.cert summary::-webkit-details-marker { display: none; }
.cert summary b { font-family: var(--display); font-size: 1.4rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--khaki-hi); line-height: 1; padding-top: 3px; }
.cert__count { display: inline-flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--bone-1); }
.cert__count::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--khaki-hi); border-bottom: 1.5px solid var(--khaki-hi); transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.cert[open] .cert__count::after { transform: rotate(-135deg) translateY(-2px); }
.cert ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 16px; }
.cert ul a {
  display: inline-block; padding: 7px 11px; font-size: .92rem; text-decoration: none;
  border: 1px solid var(--line-strong); color: var(--bone);
  transition: border-color .25s, color .25s, background .25s;
}
.cert ul a:hover { border-color: var(--khaki-hi); color: var(--khaki-hi); }
.cert ul a::after { content: " PDF"; font-size: .74rem; color: var(--bone-1); letter-spacing: .06em; }
@media (min-width: 641px) {
  .cert { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px; padding: 16px 0; align-items: start; }
  .cert summary { pointer-events: none; padding: 0; display: block; }
  .cert__count { display: none; }
  .cert ul { padding: 0; }
}

/* ---------- Testimonials ---------- */
.quote--lead { margin: 0 0 clamp(36px, 5vw, 56px); padding: 0 0 clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--line-strong); display: grid; gap: 28px 64px; }
/* Heading first, then the big quote: the heading names what follows. */
@media (min-width: 900px) { .quote--lead { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.quote--lead blockquote { margin: 0; }
.quote--lead blockquote p { font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.1; letter-spacing: .005em; max-width: 28ch; color: var(--bone); }
.quote--lead cite { font-style: normal; display: grid; gap: 4px; align-self: end; font-size: 1rem; color: var(--bone-1); line-height: 1.4; }
.quote--lead cite b { font-family: var(--display); font-size: 1.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1; color: var(--khaki-hi); }
.quotes__aside { display: grid; gap: 12px; align-content: start; order: -1; }
.quotes__aside h2 { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.quotes__aside .lead { font-size: 1.05rem; max-width: 34ch; }
.quotes { display: grid; }
.quote { margin: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 16px 48px; padding: 24px 0; border-bottom: 1px solid var(--line); align-items: start; }
.quote p { font-size: 1.12rem; line-height: 1.5; color: var(--bone); max-width: none; }
.quote cite { font-style: normal; font-size: .95rem; color: var(--bone-1); display: block; line-height: 1.4; padding-top: 4px; }
.quote cite b { display: block; color: var(--khaki-hi); font-weight: 600; }
@media (max-width: 720px) { .quote { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- About ---------- */
.about { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .about { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.about h2 { margin-bottom: 22px; }
.about h2 em { font-style: normal; color: var(--khaki-hi); }
/* Home's short version: heading, words, button in one row. */
.about--short { gap: 18px 56px; align-items: center; }
.about--short h2 { margin: 0; }
.about__words { display: grid; gap: 12px; max-width: 62ch; }
@media (min-width: 960px) { .about--short { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; } }
/* One treatment for mismatched team photos: plain black and white */
.team__pic { background: var(--ink-3); border-bottom: 3px solid var(--khaki); max-width: 200px; }
.team__pic img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.02); }

/* ---------- Locations (olive: the two utility blocks for people who already know us) ---------- */
.locations { display: grid; gap: 12px; }
@media (min-width: 800px) { .locations { grid-template-columns: 1fr 1fr; } }
.loc { background: var(--olive); color: var(--bone); padding: 32px; }
.loc h3 { font-size: clamp(1.8rem, 2.4vw, 2.3rem); }
.loc address { font-style: normal; margin-top: 12px; line-height: 1.5; color: var(--bone); }
.loc__phone { font-family: var(--display); font-size: 2.1rem; font-weight: 700; text-decoration: none; color: var(--khaki-hi); letter-spacing: .02em; display: inline-block; margin-top: 10px; }
.loc__phone:hover { color: var(--bone); }
.loc__hours { margin-top: 12px; font-size: .95rem; color: var(--bone); }
.loc__hours b { font-weight: 600; }
.loc__map { margin-top: 18px; }
.loc .btn { border-color: rgba(237, 231, 216, .4); }
.loc .btn:hover { border-color: var(--bone); color: var(--bone); }
@media (max-width: 480px) { .loc { padding: 22px; } }

/* ---------- Orders strip ---------- */
.orders { background: var(--olive); color: var(--bone); }
.orders .wrap { display: grid; gap: 16px 40px; padding-block: 30px; align-items: center; }
@media (min-width: 900px) { .orders .wrap { grid-template-columns: minmax(0, 1fr) auto; } }
.orders h2 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); scroll-margin-top: 90px; }
.orders p { color: var(--bone); margin-top: 6px; font-size: 1rem; }
.orders__btns { display: flex; gap: 10px; flex-wrap: wrap; }
.orders .btn { border-color: rgba(237, 231, 216, .4); }
.orders .btn:hover { border-color: var(--bone); color: var(--bone); }
.orders .btn--fill { border-color: var(--khaki); }
.orders .btn--fill:hover { border-color: var(--khaki-hi); color: var(--ink-0); }

/* ---------- Contact ---------- */
.contact { display: grid; gap: clamp(32px, 5vw, 72px); }
@media (min-width: 960px) { .contact { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.contact__aside { display: grid; gap: 22px; align-content: start; }
.contact__aside .calls { display: grid; gap: 10px; }
.contact__aside .calls a { text-decoration: none; display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line-strong); transition: border-color .25s; }
.contact__aside .calls a:hover { border-color: var(--khaki-hi); }
.contact__aside .calls b { font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--khaki-hi); letter-spacing: .02em; line-height: 1; }
.contact__aside .calls span { font-size: .9rem; color: var(--bone-1); }
.form { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.form label { display: grid; gap: 6px; font-size: .88rem; font-weight: 600; letter-spacing: .02em; color: var(--bone-1); }
.form label.full { grid-column: 1 / -1; }
.form input, .form textarea {
  width: 100%; font: 400 1rem/1.4 var(--text); color: var(--bone);
  background: rgba(11, 20, 16, .55); border: 1px solid var(--line-strong); padding: 12px 14px; border-radius: 0;
  caret-color: var(--khaki-hi); transition: border-color .2s, background .2s;
}
.form input::placeholder, .form textarea::placeholder { color: rgba(207, 198, 174, .75); }
.form input:hover, .form textarea:hover { border-color: rgba(237, 231, 216, .45); }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--khaki-hi); background: rgba(11, 20, 16, .8); }
.form textarea { min-height: 150px; resize: vertical; }
.form .btn { grid-column: 1 / -1; justify-self: start; min-height: 50px; padding-inline: 28px; }
.form__note { grid-column: 1 / -1; font-size: .88rem; color: var(--bone-1); }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } .form label.full { grid-column: auto; } .form .btn { grid-column: auto; } .form__note { grid-column: auto; } }

/* ---------- Footer ---------- */
.footer { background: var(--ink-0); color: var(--bone-1); font-size: .94rem; }
.footer .wrap { padding-block: 48px 128px; display: grid; gap: 36px 40px; }
@media (min-width: 900px) { .footer .wrap { grid-template-columns: 1.3fr 1fr 1fr 1.4fr; } }
.footer h3 { font-family: var(--text); font-size: .8rem; letter-spacing: .12em; color: var(--khaki-hi); margin-bottom: 14px; }
.footer ul { display: grid; gap: 8px; }
.footer a { text-decoration: none; }
.footer a:hover { color: var(--khaki-hi); }
.footer__brand img { height: 36px; width: auto; margin-bottom: 16px; }
.footer__brand p { max-width: 36ch; }
.footer__social { display: flex; gap: 10px; margin-top: 16px; }
.footer__social a { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); transition: border-color .25s, color .25s; }
.footer__social a:hover { border-color: var(--khaki-hi); color: var(--khaki-hi); }
.footer__social svg { width: 16px; height: 16px; fill: currentColor; }
.newsletter { display: flex; gap: 0; margin-top: 4px; }
.newsletter input { flex: 1; min-width: 0; font: 400 .95rem var(--text); color: var(--bone); background: rgba(237, 231, 216, .06); border: 1px solid var(--line-strong); border-right: 0; padding: 10px 12px; border-radius: 0; }
.newsletter input:focus { outline: none; border-color: var(--khaki-hi); }
.newsletter .btn { min-height: 0; padding-inline: 16px; }
.footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--line); font-size: .86rem; }
.footer__legal > span:first-child { margin-right: auto; }
.footer__links { display: inline-flex; gap: 24px; white-space: nowrap; }

/* ---------- Wallcoverings page ---------- */
.crumbs { font-size: .9rem; color: var(--bone-1); display: flex; flex-wrap: wrap; gap: 6px; padding-block: 14px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--khaki-hi); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--khaki); }
.hero--page { min-height: 0; }
.hero--page .hero__photo { inset: 0 -300px 0 52%; }
.hero--page .hero__stripes { left: calc(52% - 74px); }
.hero--page .hero__img img { object-position: 100% 50%; }
.hero--page .wrap { padding-block: clamp(32px, 4vw, 56px) clamp(48px, 7vw, 96px); }
.hero--page h1 { font-size: clamp(3.2rem, 6.4vw, 5.6rem); }
@media (max-width: 1200px) {
  .hero--page .hero__photo { inset: auto; aspect-ratio: 4 / 3; }
  .hero--page .hero__img img { object-position: 50% 50%; }
  .hero--page .crumbs { padding-top: 20px; }
}

.benefits { display: grid; gap: 0 48px; border-top: 2px solid var(--khaki); }
@media (min-width: 720px) { .benefits { grid-template-columns: 1fr 1fr; } }
/* Three points read better in one row than two plus one. */
@media (min-width: 960px) { .benefits:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); } }
.benefit { display: grid; gap: 14px; padding: 28px 0 32px; border-bottom: 1px solid var(--line); align-content: start; }
.benefit h3 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.benefit p { color: var(--bone-1); max-width: 48ch; font-size: 1.08rem; }

.substrates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 16px; }
.substrate { display: grid; gap: 10px; align-content: start; }
.substrate img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.85); clip-path: polygon(26.5% 0, 100% 0, 73.5% 100%, 0 100%); transition: transform .6s var(--ease); }
.substrate:hover img { transform: translateY(-4px); }
.substrate h3 { font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
.substrate .where { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--khaki-hi); font-weight: 600; margin: 2px 0 0; }
.substrate__links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .92rem; }
.substrate__links a { color: var(--bone-1); }
.substrate__links a:hover { color: var(--khaki-hi); }
@media (max-width: 900px) { .substrates { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .substrates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 901px) { .substrates:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 260px)); } }

.inspire { margin-top: clamp(32px, 4vw, 48px); padding: 24px 28px; border: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.inspire p { max-width: 60ch; color: var(--bone-1); }

.more { background: var(--ink-1); padding-block: clamp(40px, 5vw, 64px); }
.more .wrap { display: grid; gap: 24px 48px; align-items: start; }
@media (min-width: 900px) { .more .wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.more h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
.more ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.more a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px;
  border: 1px solid var(--line-strong); text-decoration: none; font-family: var(--display); font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1;
  transition: border-color .25s, color .25s;
}
.more a svg { width: 18px; height: 18px; flex: none; color: var(--khaki-hi); transition: transform .3s var(--ease); }
.more a:hover { border-color: var(--khaki-hi); color: var(--khaki-hi); }
.more a:hover svg { transform: translateX(6px); }
@media (max-width: 480px) { .more ul { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .more ul:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.more--chips ul { display: flex; flex-wrap: wrap; gap: 8px; }
.more--chips a { font-size: 1.15rem; padding: 10px 14px; gap: 10px; }
.more--chips a svg { width: 14px; height: 14px; }

/* ---------- Reveal (section heads only; JS adds .js). The stripes slide in on the home hero only. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .js .hero:not(.hero--page) .hero__stripes { animation: stripes-in 1.1s var(--ease) both; }
  @keyframes stripes-in { from { transform: skewX(calc(-1 * var(--angle))) translateX(-120px); opacity: 0; } to { transform: skewX(calc(-1 * var(--angle))) translateX(0); opacity: 1; } }
}

/* =====================================================================
   The rest of the site: inner pages built from the concept's parts.
   ===================================================================== */

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.text-link { color: var(--khaki-hi); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.section--olive { background: var(--olive); color: var(--bone); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--stone .section__head h2, .section--stone h3 { color: var(--ink-1); }
.section--tight .specs { margin: 0; }

/* Inner page title band without a photo */
.hero--plain { min-height: 0; background: var(--ink-0); }
.hero--plain .wrap { padding-block: 28px 64px; }
/* A quiet wedge at the photo heroes' 28° slant, so a title band without a photo still rhymes with the rest. */
@media (min-width: 1201px) {
  .hero--plain::before {
    content: ""; position: absolute; inset: 0 -300px 0 64%; background: var(--ink-1);
    transform: skewX(calc(-1 * var(--angle))); transform-origin: 50% 50%;
  }
}
.hero--plain .hero__copy { max-width: 900px; }
.hero--plain .band--short { display: block; margin: 0 0 22px; }
.hero--page .hero__copy { max-width: 560px; }
.hero--plain .lead { max-width: 60ch; }
@media (min-width: 1201px) { .hero--page:not(.hero--plain) { min-height: 520px; } }
@media (max-width: 1200px) { .hero--page .crumbs { padding-top: 20px; } }

/* Long text */
.prose { color: var(--bone-1); font-size: 1.05rem; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1em; }
.prose p { max-width: 68ch; }
.prose > h2, .prose > h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--bone); margin-top: 1.6em; }
.prose h4 { font-family: var(--text); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--khaki-hi); line-height: 1.3; }
.prose > h4 { margin-top: 1.6em; }
.prose > h3 + *, .prose > h4 + * { margin-top: .5em; }
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--bone); font-weight: 600; }
.prose a { color: var(--khaki-hi); }
.prose ul, .prose ol { display: grid; gap: 6px; max-width: 68ch; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 5px; height: 11px; background: var(--khaki); transform: skewX(calc(-1 * var(--angle))); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; position: relative; padding-left: 28px; }
.prose ol li::before { content: counter(n); position: absolute; left: 0; font-family: var(--display); font-weight: 700; color: var(--khaki-hi); }
.prose blockquote { margin: 0; padding-left: 18px; border-left: 3px solid var(--khaki); }
.prose .table-wrap { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; max-width: 900px; font-size: .98rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); }
.prose th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--khaki-hi); border-bottom: 2px solid var(--khaki); }
.prose td:first-child { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--bone); white-space: nowrap; width: 9ch; }
.prose :is(th, td) > p { margin: 0; }
.section--stone .prose { color: var(--stone-ink); }
.section--stone .prose strong, .section--stone .prose h3 { color: var(--ink-1); }
.section--stone .prose h4, .section--stone .prose a { color: var(--khaki-deep); }

.prose-block { display: grid; gap: clamp(28px, 4vw, 64px); align-items: start; }
.prose-block .section__head { margin-bottom: 28px; }
@media (min-width: 960px) { .prose-block--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.prose-block__pic { margin: 0; position: sticky; top: 110px; }
.prose-block__pic img { width: 100%; max-width: 640px; border-bottom: 3px solid var(--khaki); }
.prose-block__pic figcaption { margin-top: 8px; font-size: .88rem; color: var(--bone-1); }

/* Product list: names that jump to each item, then the items */
.catalog__index { margin: -12px 0 clamp(28px, 4vw, 48px); }
.catalog__index ul { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog__index a { display: inline-block; padding: 8px 12px; border: 1px solid var(--line-strong); font-size: .92rem; text-decoration: none; transition: border-color .2s, color .2s; }
.catalog__index a:hover { border-color: var(--khaki-hi); color: var(--khaki-hi); }
.catalog { border-top: 1px solid var(--line-strong); }
.catalog__item { display: grid; gap: 20px clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
@media (min-width: 900px) { .catalog__item { grid-template-columns: 340px minmax(0, 1fr); } }
.catalog__pic { width: 100%; max-width: 340px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-2); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), calc(100% - 86px) 100%, 0 100%); }
.catalog__pic img { width: 100%; height: 100%; object-fit: cover; }
.catalog__body h3 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin-bottom: 14px; }
.section--stone .catalog__index a { border-color: rgba(20, 48, 35, .3); }

/* Cards */
.cards { display: grid; gap: 28px 20px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { display: grid; gap: 10px; align-content: start; border-top: 2px solid var(--khaki); padding-top: 18px; }
.card__pic { background: var(--bone); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 6px; }
.card__pic img { width: 100%; height: 100%; object-fit: cover; }
.cards--4 .card__pic { background: #f4f2ec; aspect-ratio: 1; }
.cards--4 .card__pic img { object-fit: contain; }
.card h3 { font-size: clamp(1.5rem, 2vw, 1.9rem); }
.card p { color: var(--bone-1); }
.card__lines { display: grid; gap: 2px; font-size: .95rem; color: var(--bone-1); }
.section--stone .card p, .section--stone .card__lines { color: var(--stone-ink); }

/* Lists */
.lists { display: grid; gap: 32px clamp(28px, 4vw, 64px); }
@media (min-width: 800px) { .lists { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
/* Four lists sit two by two, not three and a lone one. */
@media (min-width: 800px) { .lists:has(> .list:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.list h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 14px; }
.list__pic { width: 100%; max-width: 560px; margin-bottom: 20px; border-bottom: 3px solid var(--khaki); }
.ticks { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.ticks li { position: relative; padding: 11px 0 11px 24px; border-bottom: 1px solid var(--line); color: var(--bone); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 17px; width: 5px; height: 12px; background: var(--khaki); transform: skewX(calc(-1 * var(--angle))); }
.section--stone .ticks { border-color: var(--stone-line); }
.section--stone .ticks li { color: var(--ink-1); border-color: var(--stone-line); }

/* Numbered steps */
.steps { display: grid; gap: 0; border-top: 1px solid var(--line-strong); counter-reset: none; }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.step__n { display: inline-grid; place-items: center; width: 52px; height: 36px; font-family: var(--display); font-weight: 800; font-size: 1.4rem; color: var(--ink-0); background: var(--khaki); clip-path: polygon(0 0, 100% 0, calc(100% - 17px) 100%, 0 100%); padding-right: 10px; }
.step h3 { font-family: var(--text); font-size: clamp(1.1rem, 1.6vw, 1.35rem); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.35; padding-top: 4px; }
.step p { color: var(--bone-1); margin-top: 6px; }

/* Pull quote on olive */
.pull { margin: 0; display: grid; gap: 18px; max-width: 980px; }
.pull p { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.08; color: var(--bone); max-width: 30ch; }
.pull cite { font-style: normal; color: var(--bone); font-size: 1rem; }
.pull cite b { display: block; font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; color: var(--khaki-hi); }

/* Testimonial letters */
.letters { columns: 2 420px; column-gap: clamp(28px, 4vw, 56px); }
.letter { break-inside: avoid; margin: 0 0 clamp(24px, 3vw, 36px); padding: 26px 28px; background: var(--ink-1); border-top: 3px solid var(--khaki); }
.letter__body { font-size: 1rem; }
.letter__from { margin-top: 18px; font-size: .95rem; color: var(--bone-1); }
.letter__from b { display: block; font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; color: var(--khaki-hi); line-height: 1.05; }
.letter__from span { display: block; }
.recs { margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line-strong); }
.recs h2 { font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: 22px; }
.recs ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.recs a { display: grid; gap: 10px; text-decoration: none; }
.recs img { width: 100%; aspect-ratio: 612 / 792; object-fit: cover; object-position: top; border: 1px solid var(--line-strong); background: #fff; transition: border-color .2s; }
.recs a:hover img { border-color: var(--khaki-hi); }
.recs span { font-weight: 600; }

/* Team page */
.people { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.person { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.person h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
.person__role { color: var(--khaki-hi); font-weight: 600; margin: 6px 0 16px; }
@media (max-width: 600px) { .person { grid-template-columns: 96px minmax(0, 1fr); } .person h2 { font-size: 1.8rem; } }

/* Closing call to action on inner pages */
.cta { background: var(--ink-1); border-top: 1px solid var(--line); }
.cta .wrap { display: grid; gap: 20px 48px; padding-block: clamp(44px, 6vw, 72px); align-items: center; }
@media (min-width: 960px) { .cta .wrap { grid-template-columns: minmax(0, 1fr) auto; } }
.cta h2 { font-size: clamp(2.4rem, 4.4vw, 4rem); }
.cta p { margin-top: 8px; font-size: 1.15rem; color: var(--bone-1); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.cta__call { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--khaki-hi); letter-spacing: .02em; }
.cta__call span { font-family: var(--text); font-size: .85rem; font-weight: 600; color: var(--bone-1); letter-spacing: 0; }
.cta__call svg { width: 15px; height: 15px; }

/* FileRocket forms */
.embed { min-width: 0; }
.embed__frame { background: #fff; padding: clamp(8px, 1.5vw, 20px); min-height: 400px; border-top: 4px solid var(--khaki); }
.embed__frame iframe { display: block; width: 100%; background: #fff; }
.embed .form__note { margin-top: 14px; }
.embed .form__note a { color: var(--khaki-hi); }
/* White band for FileRocket's white form: the form reads as part of the page. */
.section--paper { background: #fff; color: var(--ink-1); }
.section--paper h2, .section--paper h3 { color: var(--ink-1); }
.section--paper .lead, .section--paper .muted, .section--paper .form__note { color: var(--stone-ink-2); }
.section--paper .text-link, .section--paper .form__note a { color: var(--khaki-deep); }
.section--paper ::selection { background: var(--ink-1); color: var(--bone); }
.section--paper .contact__aside .calls a { border-color: var(--stone-line); }
.section--paper .contact__aside .calls a:hover { border-color: var(--khaki-deep); }
.section--paper .contact__aside .calls b { color: var(--ink-1); }
.section--paper .contact__aside .calls span { color: var(--stone-ink-2); }
.section--paper .embed__frame { padding: 0; border-top: 0; }
.contact--wide .contact__aside { order: 2; }
@media (min-width: 960px) { .contact--wide { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .contact--wide .contact__aside { order: 2; } }

/* Work page extras */
/* "The story": a small button at the tile's top right; open, the text covers the photo and scrolls. */
.tile__story { position: absolute; top: 10px; right: 10px; z-index: 2; font-size: .86rem; }
.tile__story > summary {
  list-style: none; cursor: pointer; padding: 5px 10px; background: rgba(11, 20, 16, .82);
  border: 1px solid var(--line-strong); color: var(--bone); font-weight: 600;
}
.tile__story > summary::-webkit-details-marker { display: none; }
.tile__story[open] { position: absolute; inset: 0; top: 0; right: 0; }
/* On narrow screens an open story takes the whole row, so it doesn't scroll in a half-width box. */
@media (max-width: 900px) { .tile:has(> .tile__story[open]) { grid-column: 1 / -1; } }
.tile__story[open] > summary { position: absolute; top: 10px; right: 10px; z-index: 1; }
.tile__story[open] > summary::after { content: " ×"; }
.tile__story > p {
  position: absolute; inset: 0; margin: 0; padding: 52px 20px 20px; overflow: auto;
  background: rgba(11, 20, 16, .94); color: var(--bone-1); line-height: 1.55;
}
.tile--small img { image-rendering: auto; }
.builders__col .spec b a { text-decoration: none; }
.builders__col .spec b a:hover { color: var(--khaki-deep); text-decoration: underline; }
.footer h2 { font-family: var(--text); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--khaki-hi); margin-bottom: 14px; font-weight: 700; line-height: 1.3; }
.footer__news { margin-top: 24px; }

.work__head--bare { grid-template-columns: 1fr !important; }
.work__head--bare .filter { justify-self: start; }

.catalog--products .catalog__pic { background: #f4f2ec; }
.catalog--products .catalog__pic img { object-fit: contain; padding: 12px; }
@media (min-width: 900px) { .catalog--products .catalog__item { grid-template-columns: 260px minmax(0, 1fr); } }
.catalog--products .catalog__pic { max-width: 260px; aspect-ratio: 1; }
/* A linked card: the title's link covers the whole card */
.card--link { position: relative; }
.card--link h3 a { text-decoration: none; }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; }
.card--link:hover h3 { color: var(--khaki-hi); }
.card--link:hover .card__pic img { transform: scale(1.03); }
.card__pic img { transition: transform .6s var(--ease); }
.catalog--products .prose ul { display: block; columns: 2 200px; column-gap: 32px; }
.catalog--products .prose ul li { break-inside: avoid; margin-bottom: 6px; }

/* Team page grid: room for eight or more */
.crew { display: grid; gap: 36px 24px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
@media (max-width: 520px) { .crew { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; } .crew__person h2 { font-size: 1.4rem; } .crew__summary { font-size: .9rem; } }
.crew__person { display: grid; gap: 6px; align-content: start; }
.crew__person .team__pic { max-width: none; margin-bottom: 10px; aspect-ratio: 3 / 4; display: grid; }
.crew__person .team__pic img { height: 100%; }
.crew__initials { place-self: center; font-family: var(--display); font-weight: 800; font-size: 4rem; color: var(--khaki-hi); letter-spacing: .04em; }
.crew__person h2 { font-size: 1.9rem; }
.crew__person .person__role { margin: 0; }
.crew__summary { color: var(--bone-1); font-size: .97rem; }
.crew__bio summary { cursor: pointer; color: var(--khaki-hi); font-weight: 600; font-size: .95rem; }
.crew__bio .prose { margin-top: 10px; font-size: .97rem; }

/* Careers */
.jobs { border-top: 1px solid var(--line-strong); }
.job { border-bottom: 1px solid var(--line); }
.job summary { display: grid; gap: 4px 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.job summary::-webkit-details-marker { display: none; }
@media (min-width: 800px) { .job summary { grid-template-columns: minmax(0, 1fr) auto; } .job__summary { grid-column: 1 / -1; } }
.job__title { font-family: var(--display); font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 700; text-transform: uppercase; line-height: 1; }
.job__meta { color: var(--khaki-hi); font-weight: 600; align-self: center; }
.job__summary { color: var(--bone-1); }
.job__body { padding: 0 0 28px; }

/* Gradient's own forms (careers), dressed like the concept's form */
.site-form .cms-form { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.site-form fieldset { display: contents; border: 0; margin: 0; padding: 0; }
.site-form legend { display: none; }
.site-form .cms-field { display: grid; gap: 6px; grid-column: 1 / -1; }
.site-form .cms-field[data-width="1/2"] { grid-column: auto; }
.site-form label { font-size: .88rem; font-weight: 600; letter-spacing: .02em; color: var(--bone-1); }
.site-form input:not([type="checkbox"]), .site-form textarea, .site-form select {
  width: 100%; font: 400 1rem/1.4 var(--text); color: var(--bone);
  background: rgba(11, 20, 16, .55); border: 1px solid var(--line-strong); padding: 12px 14px; border-radius: 0;
}
.site-form input:focus, .site-form textarea:focus { outline: none; border-color: var(--khaki-hi); }
.site-form textarea { min-height: 150px; resize: vertical; }
.site-form input[type="file"] { padding: 10px; color: var(--bone-1); }
.site-form input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 9px 16px; cursor: pointer;
  font: 600 .9rem/1 var(--text); color: var(--bone); background: transparent; border: 1.5px solid var(--line-strong);
}
.site-form input[type="file"]::file-selector-button:hover { border-color: var(--khaki-hi); color: var(--khaki-hi); }
.site-form .cms-error, .site-form .cms-form-status[role="alert"] { color: #f0b9a8; grid-column: 1 / -1; }
.site-form .cms-form-status a { color: inherit; }
.site-form button[type="submit"] {
  grid-column: 1 / -1; justify-self: start; min-height: 50px; padding: 0 28px; cursor: pointer;
  font: 600 .95rem/1 var(--text); color: var(--ink-0); background: var(--khaki); border: 1.5px solid var(--khaki);
}
.site-form button[type="submit"]:hover { background: var(--khaki-hi); border-color: var(--khaki-hi); }
.site-form .cms-form-sent p { font-size: 1.15rem; }
@media (max-width: 560px) { .site-form .cms-form { grid-template-columns: 1fr; } .site-form .cms-field[data-width="1/2"] { grid-column: 1 / -1; } }

/* Contact page maps */
.loc__embed { display: block; width: 100%; height: 260px; border: 0; margin-top: 18px; filter: grayscale(.35) contrast(1.05); }
/* A linked card without a photo is a box with an arrow, like the order choices */
.card--link:not(:has(.card__pic)) { border: 1px solid var(--line-strong); border-top: 3px solid var(--khaki); padding: 22px 22px 24px; transition: border-color .25s, background .25s; }
.card--link:not(:has(.card__pic)) h3::after { content: "→"; display: inline-block; margin-left: .3em; color: var(--khaki-hi); transition: transform .3s var(--ease); }
.card--link:not(:has(.card__pic)):hover { border-color: var(--khaki-hi); background: rgba(237, 231, 216, .04); }
.card--link:not(:has(.card__pic)):hover h3::after { transform: translateX(6px); }

/* A section that opens the page with no heading of its own (the Work page's filter) starts close under the title band. */
.section--first { padding-top: clamp(32px, 4vw, 48px); }

/* Stacked hero on a tablet: a wide crop, not the phone's square. */
@media (min-width: 641px) and (max-width: 1200px) {
  .hero__photo { aspect-ratio: 16 / 9; }
  .hero--page .hero__photo { aspect-ratio: 21 / 9; }
}

/* ---------- Product list with a side index (Small format, Large format) ---------- */
.catalog__more { margin-top: 18px; border-top: 1px solid var(--line); }
.catalog__more > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 0 4px; font-weight: 600; color: var(--khaki-hi);
}
.catalog__more > summary::-webkit-details-marker { display: none; }
.catalog__more > summary::before {
  content: "+"; display: inline-grid; place-items: center; width: 22px; height: 22px;
  border: 1.5px solid currentColor; font-weight: 700; line-height: 1;
}
.catalog__more[open] > summary::before { content: "–"; }
.catalog__more > summary:hover { color: var(--bone); }
.catalog__more > .prose { padding-top: 10px; }
/* The details' headed lists sit in columns instead of one long column. */
@media (min-width: 700px) {
  .catalog__more > .prose { columns: 2; column-gap: 40px; }
  .catalog__more > .prose > p { column-span: all; }
  .catalog__more > .prose > h4 { break-after: avoid; }
  .catalog__more > .prose > ul { break-inside: avoid; }
}
.catalog__more .prose > * + * { margin-top: 0; }
.catalog__more .prose > p + p { margin-top: 1em; }
.catalog__more .prose > h4 { margin-top: 0; }
.catalog__more .prose > h4 + ul { margin-top: .6em; }
.catalog__more .prose > ul, .catalog__more .prose > p { margin-bottom: 1.4em; }
@media (max-width: 699px) {
  .catalog--index .catalog__pic { aspect-ratio: 2 / 1; max-width: none; }
}

@media (min-width: 1100px) {
  .catalog-indexed { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
  .catalog__index--side { position: sticky; top: 110px; margin: 0; max-height: calc(100vh - 130px); overflow: auto; }
  .catalog__index--side ul { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
  .catalog__index--side a {
    display: block; border: 0; border-bottom: 1px solid var(--line); padding: 9px 0 9px 14px;
    position: relative; font-size: .95rem; color: var(--bone-1);
  }
  .catalog__index--side a::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px;
    background: var(--khaki); transform: scaleY(0); transition: transform .25s var(--ease);
  }
  .catalog__index--side a[aria-current="true"] { color: var(--bone); }
  .catalog__index--side a[aria-current="true"]::before, .catalog__index--side a:hover::before { transform: none; }
  .catalog--index { border-top: 1px solid var(--line-strong); }
  .catalog--index .catalog__item { grid-template-columns: 240px minmax(0, 1fr); }
  .catalog--index .catalog__pic { max-width: 240px; }
}
/* On narrower screens the index is one row that scrolls sideways. */
@media (max-width: 1099px) {
  .catalog__index--side ul { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
  .catalog__index--side li { flex: none; }
}

/* Two sections of the same colour in a row get a hairline between them. */
.section--forest + .section--forest, .section--ink + .section--ink { border-top: 1px solid var(--line-strong); }