/* bəˈspōk interior style :  site styles */

:root {
  --bark: #191410;
  --bark-2: #211a15;
  --ink: #33291c;
  --gold: #de9d37;
  --gold-light: #e8ae55;
  --cream: #faf4e9;
  --stone: #c9bfae;
  --smoke: #9aa3a0;
  --teal: #2e6b7c;

  --font-display: "Gambetta", "Iowan Old Style", Georgia, serif;
  --font-body: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-label: "Courier Prime", "Courier New", monospace;

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --measure: 62ch;
  --rule: rgba(201, 191, 174, 0.18);
  --rule-dark: rgba(51, 41, 28, 0.16);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--bark);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

::selection {
  background: var(--gold);
  color: var(--bark);
}

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

/* ---------- type primitives ---------- */

.label {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: lowercase;
  color: var(--gold);
  margin: 0;
}

/* the word mark inside a tracked-out label. Courier Prime has no schwa or
   modifier apostrophe, so those glyphs fell back to another face and the 0.25em
   tracking opened a hole in the middle of the name. Set it in the display face
   at its natural spacing so it reads as one word. */
.label__mark {
  font-family: var(--font-display);
  font-size: 1.18em;
  letter-spacing: 0.01em;
  text-transform: none;
  /* the space before this span still carries the label's 0.25em tracking, which
     reads as a second gap. Pull the mark back so the word sits in tight. */
  margin-left: -0.16em;
  margin-right: 0.06em;
}

.label--smoke {
  color: var(--smoke);
}

.label--ink {
  color: rgba(51, 41, 28, 0.62);
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0;
}

h2.display {
  font-size: clamp(2rem, 1.35rem + 3vw, 3.75rem);
}

h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0 0 1.25em;
  max-width: var(--measure);
}

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

.lede {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.62;
  color: var(--stone);
  font-weight: 300;
}

.muted {
  color: var(--smoke);
}

/* ---------- layout ---------- */

.section {
  padding: clamp(4.5rem, 9vw, 10rem) var(--gutter);
  position: relative;
}

.section--light {
  background: var(--cream);
  color: var(--ink);
}

.section--light .lede {
  color: rgba(51, 41, 28, 0.74);
}

.section--light .muted {
  color: rgba(51, 41, 28, 0.6);
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

.wrap--narrow {
  max-width: 900px;
}

.head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.head__rule {
  width: 100%;
  height: 1px;
  background: var(--rule);
  margin-top: 0.5rem;
}

.section--light .head__rule {
  background: var(--rule-dark);
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem var(--gutter);
  background: rgba(25, 20, 16, 0);
  border-bottom: 1px solid transparent;
  transition: background 0.5s ease, border-color 0.5s ease, padding 0.5s ease;
}

.nav.is-stuck {
  background: rgba(25, 20, 16, 0.9);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(201, 191, 174, 0.12);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.nav__home {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex: 0 0 auto;
}

.nav__mark {
  width: 72px;
  height: auto;
}

/* set in the display face like the subpage masthead: the label mono has no
   schwa, so tracked-out Courier broke the name into two pieces */
.nav__home-text {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--stone);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--stone);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.nav__links a:hover,
.nav__links a.is-active {
  color: var(--gold);
  border-bottom-color: rgba(222, 157, 55, 0.6);
}

.nav__cta {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(222, 157, 55, 0.45);
  padding: 0.7rem 1.1rem;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  white-space: nowrap;
}

.nav__cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bark);
}

/* Between the mobile breakpoint and roughly 1500px the nav row overflows: the
   link list is a flex item that never shrinks, so it pushes the CTA past the
   right edge and the button gets clipped. That was already happening on
   production at 1280 and below with nine links; the tenth ('projects') pushes it
   to 1440 too. Tighten tracking and gap through the band and let the list
   shrink, so the CTA stays inside the viewport at every width. */
@media (min-width: 961px) and (max-width: 1500px) {
  .nav {
    gap: 1rem;
  }
  .nav__links {
    gap: clamp(0.6rem, 1.2vw, 1.5rem);
    min-width: 0;
    flex-shrink: 1;
  }
  .nav__links a {
    font-size: 0.65rem;
    letter-spacing: 0.11em;
  }
  .nav__cta {
    letter-spacing: 0.13em;
    padding: 0.65rem 0.9rem;
  }
}

@media (min-width: 961px) and (max-width: 1160px) {
  .nav__links {
    gap: 0.5rem;
  }
  .nav__links a {
    font-size: 0.625rem;
    letter-spacing: 0.06em;
  }
  /* the mark alone still carries the brand at this width */
  .nav__home-text {
    display: none;
  }
}

/* raised from 900px: ten links plus the CTA no longer fit in the low 900s, so
   the compact nav now takes over before the row can overflow */
@media (max-width: 960px) {
  .nav__links,
  .nav__home-text {
    display: none;
  }
  .nav__cta {
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    padding: 0.6rem 0.85rem;
  }
  .nav {
    justify-content: space-between;
  }
  .nav__mark {
    width: 62px;
  }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 7rem var(--gutter) clamp(2rem, 4vw, 3.25rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: -6% 0 -6% 0;
  z-index: -2;
  will-change: transform;
}

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

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      180deg,
      rgba(25, 20, 16, 0.7) 0%,
      rgba(25, 20, 16, 0.2) 34%,
      rgba(25, 20, 16, 0.5) 72%,
      rgba(25, 20, 16, 0.93) 100%
    ),
    linear-gradient(90deg, rgba(25, 20, 16, 0.7) 0%, rgba(25, 20, 16, 0) 62%);
}

.hero__inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.hero__lockup {
  width: clamp(168px, 17vw, 236px);
  height: auto;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.4rem + 5vw, 5.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 1.35rem;
  max-width: 18ch;
}

.hero h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--stone);
}

.hero__sub {
  max-width: 46ch;
  color: var(--stone);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
}

.hero__caption {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.1rem;
  border-top: 1px solid rgba(201, 191, 174, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
}

.hero__scroll {
  font-family: var(--font-label);
  display: none;
  font-size: 0.625rem;
  letter-spacing: 0.25em;
  color: var(--smoke);
  margin-left: auto;
}

@media (min-width: 640px) {
  .hero__scroll {
    display: block;
  }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  text-decoration: none;
  padding: 1.05rem 1.6rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.btn:hover {
  background: var(--gold);
  color: var(--bark);
}

.btn__arrow {
  transition: transform 0.35s ease;
}

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

.btn--ghost {
  border-color: rgba(201, 191, 174, 0.35);
  color: var(--stone);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--stone);
  color: var(--cream);
}

.link-line {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(222, 157, 55, 0.35);
  padding-bottom: 2px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.link-line:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}

/* ---------- thesis ---------- */

.thesis {
  border-top: 1px solid var(--rule);
}

.thesis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
}

.thesis__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 1.1rem + 3.2vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 24ch;
}

.thesis__aside {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.thesis__aside .rule {
  height: 1px;
  width: 3rem;
  background: rgba(222, 157, 55, 0.6);
  flex: 0 0 auto;
}

.thesis__quote span {
  color: var(--gold);
  font-style: italic;
}

.thesis__body {
  display: grid;
  gap: 2rem;
}

.pillars {
  list-style: none;
  margin: clamp(3rem, 6vw, 5.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.pillars li {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem 2rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
}

.pillars dt,
.pillars .pillar__name {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-transform: lowercase;
  padding-top: 0.35rem;
}

.pillars .pillar__text {
  color: var(--stone);
  margin: 0;
  max-width: 52ch;
}

@media (min-width: 940px) {
  .thesis__grid {
    grid-template-columns: 1.05fr 1fr;
    align-items: start;
  }
}

@media (max-width: 620px) {
  .pillars li {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .pillars .pillar__name {
    padding-top: 0;
  }
}

/* ---------- stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.stat p {
  margin: 0;
  max-width: none;
}

.stat {
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.stats {
  border-bottom: 1px solid var(--rule-dark);
}

.stat__figure {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4.5rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.stat__figure sup {
  font-size: 0.42em;
  vertical-align: super;
  letter-spacing: 0;
  color: var(--gold);
  font-family: var(--font-label);
}

.stat__what {
  margin: 0;
  color: rgba(51, 41, 28, 0.78);
  max-width: 32ch;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.stat__src {
  margin-top: auto;
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: rgba(51, 41, 28, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(51, 41, 28, 0.25);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.stat__src:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

@media (min-width: 760px) {
  .stats {
    gap: 0 clamp(1.5rem, 3vw, 3rem);
  }
}

.note {
  margin-top: 2rem;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(51, 41, 28, 0.6);
  max-width: 78ch;
}

/* ---------- premium ---------- */

.premium__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .premium__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.evidence {
  border-top: 1px solid rgba(222, 157, 55, 0.4);
  padding-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.evidence__figure {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.025em;
}

.evidence p {
  color: var(--stone);
  margin: 0;
  max-width: 44ch;
}

.evidence__src {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--smoke);
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 163, 160, 0.35);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.evidence__src:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.disclaimer {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--smoke);
  max-width: 74ch;
  line-height: 1.7;
}

/* ---------- work grid ---------- */

.work__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2.5vw, 2.25rem);
}

.plate {
  position: relative;
  margin: 0;
  --ar: 4 / 5;
}

.plate picture {
  display: block;
  aspect-ratio: var(--ar);
  overflow: hidden;
}

.plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.plate:hover img {
  transform: scale(1.025);
}

.plate figcaption {
  margin-top: 0.85rem;
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: var(--smoke);
  line-height: 1.7;
}

.plate--a {
  grid-column: 1 / span 7;
  --ar: 4 / 5;
}
.plate--b {
  grid-column: 9 / span 4;
  --ar: 3 / 4;
  align-self: end;
}
.plate--c {
  grid-column: 1 / span 4;
  --ar: 3 / 4;
}
.plate--d {
  grid-column: 6 / span 7;
  --ar: 16 / 10;
  align-self: center;
}
.plate--e {
  grid-column: 3 / span 6;
  --ar: 4 / 5;
}

.work__grid > .plate--c,
.work__grid > .plate--d {
  margin-top: clamp(1rem, 4vw, 4rem);
}

.work__grid > .plate--e {
  margin-top: clamp(1rem, 4vw, 4rem);
}

@media (max-width: 780px) {
  .work__grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .plate--a,
  .plate--b,
  .plate--c,
  .plate--d,
  .plate--e {
    grid-column: 1 / -1;
    align-self: auto;
    margin-top: 0;
  }
  .plate--a,
  .plate--c,
  .plate--e {
    --ar: 4 / 5;
  }
  .plate--b {
    --ar: 3 / 4;
  }
  .plate--d {
    --ar: 3 / 2;
  }
}

/* ---------- materials ---------- */

.materials {
  background: var(--bark-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.materials__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .materials__grid {
    grid-template-columns: 0.85fr 1fr;
  }
}

.materials__img {
  margin: 0;
}

.materials__img picture {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.materials__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spec {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.spec li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}

.spec__no {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  color: var(--gold);
}

.spec__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  letter-spacing: -0.005em;
}

/* ---------- services ---------- */

.tiers {
  border-top: 1px solid var(--rule-dark);
}

.tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-bottom: 1px solid var(--rule-dark);
}

.tier__meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.tier__no {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: rgba(51, 41, 28, 0.45);
}

.tier__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0;
}

.tier__dur {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  color: rgba(51, 41, 28, 0.62);
}

.tier__body p {
  color: rgba(51, 41, 28, 0.78);
  max-width: 54ch;
}

.tier__scope {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.tier__scope li {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: rgba(51, 41, 28, 0.6);
}

@media (min-width: 860px) {
  .tier {
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: 3rem;
  }
}

/* ---------- process ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  padding: clamp(1.75rem, 3.5vw, 2.75rem) 0;
  border-bottom: 1px solid var(--rule);
}

.step:first-child {
  border-top: 1px solid var(--rule);
}

.step__no {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.step__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
}

.step p {
  color: var(--stone);
  max-width: 48ch;
  margin: 0;
}

@media (min-width: 860px) {
  .step {
    grid-template-columns: 5rem 18rem minmax(0, 1fr);
    gap: 2.5rem;
    align-items: baseline;
  }
}

/* ---------- contact ---------- */

.contact {
  border-top: 1px solid var(--rule);
}

.contact__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 940px) {
  .contact__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact__email {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.375rem, 1rem + 2vw, 2.5rem);
  letter-spacing: -0.02em;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(222, 157, 55, 0.3);
  padding-bottom: 0.25rem;
  display: inline-block;
  word-break: break-word;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.contact__email:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}

.contact__facts {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.contact__facts dt {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.22em;
  color: var(--smoke);
  margin-bottom: 0.3rem;
}

.contact__facts dd {
  margin: 0;
  color: var(--cream);
}

/* form */

.form {
  border: 1px solid var(--rule);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.5rem;
  background: rgba(250, 244, 233, 0.02);
}

.field {
  display: grid;
  gap: 0.5rem;
}

.field label {
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  color: var(--smoke);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  color: var(--cream);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(201, 191, 174, 0.28);
  padding: 0.6rem 0;
  border-radius: 0;
  transition: border-color 0.3s ease;
  width: 100%;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--smoke) 50%),
    linear-gradient(135deg, var(--smoke) 50%, transparent 50%);
  background-position: calc(100% - 10px) 1.15rem, calc(100% - 5px) 1.15rem;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.5rem;
}

.field select option {
  background: var(--bark);
  color: var(--cream);
}

.field textarea {
  resize: vertical;
  min-height: 5.5rem;
  line-height: 1.6;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

.form__note {
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--smoke);
  max-width: 40ch;
  margin: 0;
}

/* ---------- footer ---------- */

.footer {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter) 2.5rem;
  border-top: 1px solid var(--rule);
}

.footer__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem clamp(2rem, 6vw, 6rem);
  align-items: flex-start;
  justify-content: space-between;
}

.footer__mark {
  width: 64px;
  height: auto;
}

.footer__col {
  display: grid;
  gap: 0.5rem;
}

.footer__col a {
  text-decoration: none;
  color: var(--cream);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
  justify-self: start;
  font-size: 0.9375rem;
}

.footer__col a:hover {
  color: var(--gold);
  border-bottom-color: rgba(222, 157, 55, 0.5);
}

.footer__col span {
  font-size: 0.9375rem;
  color: var(--stone);
}

/* The fabrication column carries two sister brands. .footer__col is a uniform
   0.5rem grid, so without grouping all four lines read as one flat list and
   each descriptor floats between the two names. Keep a name tight to its own
   descriptor, then space the pairs apart. */
.footer__brand {
  display: grid;
  gap: 0.25rem;
}

.footer__brand + .footer__brand {
  margin-top: 0.75rem;
}

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
}

/* ---------- reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__media {
    transform: none !important;
  }
  .plate img,
  .plate:hover img {
    transition: none;
    transform: none;
  }
}

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

/* ---- inquiry form: honeypot, validation and status states ---- */
.form__trap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.field__opt {
  color: rgba(154, 163, 160, 0.55);
  letter-spacing: 0.12em;
}

.field--error input,
.field--error textarea {
  border-bottom-color: #c4623c;
}

.field--error label {
  color: #d07a55;
}

.form__status {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--stone);
  margin: 0;
  max-width: 46ch;
}

.form__status:empty {
  display: none;
}

.form__status--pending {
  color: var(--smoke);
}

.form__status--ok {
  color: var(--gold-light);
  border-left: 1px solid var(--gold);
  padding-left: 1rem;
}

.form__status--error {
  color: #d07a55;
  border-left: 1px solid #c4623c;
  padding-left: 1rem;
}

.form.is-sent .field,
.form.is-sent .form__foot {
  opacity: 0.35;
  transition: opacity 0.6s ease;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: progress;
}

.btn[disabled]:hover {
  background: transparent;
  color: var(--gold);
}

/* ---------- division (counterwood) ---------- */

.division {
  display: grid;
  gap: 0.9rem;
  max-width: 66ch;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--rule-dark);
  background: rgba(51, 41, 28, 0.035);
}

.division__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.125rem);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  color: var(--ink);
}

.division p:not(.label) {
  margin: 0;
  color: rgba(51, 41, 28, 0.74);
}

.division .link-line {
  justify-self: start;
}

/* footer: resilient tracks now that a fourth column exists */

.footer__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  gap: 2.5rem clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
  justify-content: initial;
}

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

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer__grid > a:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- compact header menu (mobile) ----------------------------
   Below 961px the .nav__links list is hidden, which left the lookbook,
   projects and worksheet pages unreachable from the header on a phone.
   The toggle below opens a panel carrying those pages plus the section
   anchors. Toggle and panel exist only in the compact band. */

.nav__toggle {
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 34px;
  padding: 0;
  margin: 0;
  background: none;
  border: 1px solid rgba(201, 191, 174, 0.28);
  cursor: pointer;
  position: relative;
  transition: border-color 0.35s ease;
}

.nav__toggle:hover,
.nav__toggle[aria-expanded="true"] {
  border-color: rgba(222, 157, 55, 0.55);
}

.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 1px;
  background: var(--stone);
  transform: translateX(-50%);
  transition: background 0.3s ease, transform 0.35s ease, opacity 0.2s ease;
}

.nav__toggle-bars {
  top: 50%;
  margin-top: -0.5px;
}

.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  left: 0;
  transform: none;
}

.nav__toggle-bars::before {
  top: -6px;
}

.nav__toggle-bars::after {
  top: 6px;
}

.nav__toggle:hover .nav__toggle-bars,
.nav__toggle:hover .nav__toggle-bars::before,
.nav__toggle:hover .nav__toggle-bars::after {
  background: var(--gold);
}

/* bars collapse into a cross while the panel is open */
.nav__toggle[aria-expanded="true"] .nav__toggle-bars {
  background: transparent;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before {
  top: 0;
  transform: rotate(45deg);
  background: var(--gold);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after {
  top: 0;
  transform: rotate(-45deg);
  background: var(--gold);
}

.navmenu {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  background: rgba(25, 20, 16, 0.97);
  backdrop-filter: saturate(140%) blur(18px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.navmenu.is-open {
  opacity: 1;
}

.navmenu__inner {
  /* clears the fixed header, then breathes to the safe area at the base */
  padding: calc(4.75rem + env(safe-area-inset-top, 0px)) var(--gutter)
    calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

.navmenu__feature {
  display: block;
  text-decoration: none;
  border: 1px solid rgba(222, 157, 55, 0.4);
  padding: 1.1rem 1.15rem 1.2rem;
  transition: border-color 0.35s ease, background 0.35s ease;
}

.navmenu__feature:active {
  background: rgba(222, 157, 55, 0.07);
  border-color: rgba(222, 157, 55, 0.7);
}

.navmenu__feature-label {
  display: block;
  font-family: var(--font-label);
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--gold);
}

.navmenu__feature-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--cream);
  margin-top: 0.5rem;
}

.navmenu__feature-meta {
  display: block;
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.13em;
  color: var(--stone);
  margin-top: 0.55rem;
}

.navmenu__label {
  font-family: var(--font-label);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--smoke);
  margin: 2rem 0 0.85rem;
}

.navmenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(201, 191, 174, 0.12);
}

.navmenu__list li {
  border-bottom: 1px solid rgba(201, 191, 174, 0.12);
}

.navmenu__list a {
  display: block;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--cream);
  text-decoration: none;
  padding: 0.85rem 0;
}

.navmenu__list a:active {
  color: var(--gold);
}

.navmenu__list--cols {
  columns: 2;
  column-gap: 1.5rem;
  border-top: 0;
}

.navmenu__list--cols li {
  break-inside: avoid;
}

.navmenu__cta {
  display: block;
  margin-top: 2rem;
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(222, 157, 55, 0.45);
  padding: 0.95rem 1rem;
}

@media (max-width: 960px) {
  .nav__toggle {
    display: block;
  }
  .navmenu {
    display: block;
  }
  /* the panel carries the assessment request, so the header keeps only the
     mark and the toggle and stops crowding at 360px */
  .nav__cta {
    display: none;
  }
}

/* the panel is a compact-width device; never leave it open on a resize up */
@media (min-width: 961px) {
  .navmenu {
    display: none;
  }
}

.has-navmenu-open {
  overflow: hidden;
}

/* While the panel is open the header must be opaque: the panel scrolls
   underneath it, and a transparent bar let the feature label slide visibly
   behind the mark. */
.has-navmenu-open .nav {
  background: rgba(25, 20, 16, 0.98);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(201, 191, 174, 0.12);
}