/* ===========================================
   HEIGHTS GOODS — Retro Workshop, Magazine Masthead
   =========================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #1A1A1A;
  --paper: #FAF7F1;
  --cream: #EFE7D5;
  --orange: #E8542E;
  --orange-deep: #C44320;
  --mute: #6B6258;
  --line: #1A1A1A;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* Skip link — visible only when focused, first stop for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 20px;
  background: var(--orange);
  color: var(--paper);
  border: 3px solid var(--ink);
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.skip-link:focus { left: 8px; top: 8px; }

img { max-width: 100%; display: block; }
::selection { background: var(--orange); color: var(--paper); }

/* ===========================================
   LAYOUT
   =========================================== */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .container { padding: 0 40px; } }
@media (min-width: 1024px) { .container { padding: 0 56px; } }

.section { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 88px 0; } }
@media (min-width: 1024px) { .section { padding: 104px 0; } }

.section.divider-top { border-top: 3px solid var(--ink); }
.section.divider-bottom { border-bottom: 3px solid var(--ink); }
.section.bg-ink { background: var(--ink); color: var(--paper); }
.section.bg-orange { background: var(--orange); color: var(--paper); }
.section.bg-cream { background: var(--cream); }

/* ===========================================
   MAGAZINE MASTHEAD — top of page, scrolls away
   =========================================== */
.masthead {
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}

.masthead-title {
  max-width: 1320px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--ink);
  flex-wrap: wrap;
}
@media (min-width: 768px) { .masthead-title { padding: 20px 40px; } }
@media (min-width: 1024px) { .masthead-title { padding: 22px 56px; } }

.masthead-mark {
  font-family: 'Shrikhand', cursive;
  font-size: 28px;
  color: var(--orange);
  line-height: 1;
}

.masthead-tag {
  font-family: 'Staatliches', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
}

.masthead-issue {
  font-family: 'Staatliches', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mute);
}

.masthead-nav {
  max-width: 1320px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
@media (min-width: 768px) { .masthead-nav { padding: 14px 40px; } }
@media (min-width: 1024px) { .masthead-nav { padding: 14px 56px; } }

.masthead-nav .links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

@media (min-width: 768px) { .masthead-nav .links { gap: 32px; } }

.masthead-nav .links a {
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color 0.2s;
}
.masthead-nav .links a:hover { color: var(--orange); }

/* On phones all three links share roughly 182px with the quote button. The
   numeric prefixes and wide letterspacing are what push them onto a second
   row, so both are dropped below 768px — measured at 163px on one row rather
   than 210px on two. Must come after the base .links a rule above, which has
   equal specificity and would otherwise win on source order.
   A menu would be the wrong answer here: the masthead is not sticky, so it
   scrolls away regardless of how the links are packaged. */
@media (max-width: 767px) {
  .masthead-nav .links .num { display: none; }
  .masthead-nav .links a { font-size: 13px; letter-spacing: 1.5px; }
}

.masthead-nav .links a .num {
  font-family: 'Shrikhand', cursive;
  font-size: 16px;
  color: var(--orange);
  letter-spacing: 0;
}

.masthead-nav .quote-link {
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}
.masthead-nav .quote-link:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

@media (max-width: 640px) {
  .masthead-nav .links a.hide-mobile { display: none; }
  .masthead-tag.hide-mobile { display: none; }
  .masthead-issue.hide-mobile { display: none; }
}

/* ===========================================
   FLOATING QUOTE BUTTON
   =========================================== */
.floating-quote {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  background: var(--orange);
  color: var(--paper);
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 3px solid var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  transition: all 0.15s;
  box-shadow: 4px 4px 0 var(--ink);
}
.floating-quote:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.floating-quote .arrow { font-size: 18px; }

@media (min-width: 768px) {
  .floating-quote {
    bottom: 32px;
    right: 32px;
    padding: 16px 26px;
    font-size: 15px;
  }
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'Staatliches', sans-serif;
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 32px;
}
.kicker::before, .kicker::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 3px;
  background: var(--orange);
}

.display-h {
  font-family: 'Shrikhand', cursive;
  font-size: 56px;
  line-height: 0.95;
  color: var(--ink);
  margin-bottom: 28px;
  max-width: 950px;
}
@media (min-width: 640px) { .display-h { font-size: 80px; } }
@media (min-width: 1024px) { .display-h { font-size: 120px; line-height: 0.9; } }
@media (min-width: 1280px) { .display-h { font-size: 140px; } }

.display-h .orange { color: var(--orange); }

.section-h {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -1.5px;
  margin-bottom: 24px;
  max-width: 900px;
  text-transform: uppercase;
}
@media (min-width: 768px) { .section-h { font-size: 56px; letter-spacing: -2px; } }
@media (min-width: 1024px) { .section-h { font-size: 72px; letter-spacing: -2.5px; } }

.section-h .shrik {
  font-family: 'Shrikhand', cursive;
  font-weight: 400;
  text-transform: none;
  color: var(--orange);
  letter-spacing: 0;
}

.hero-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  max-width: 540px;
  color: var(--ink);
  margin-bottom: 40px;
}
/* Centred variant. .hero-sub is a 540px column, so inside a centred parent it
   still sits flush left — the text centres within its own box and reads as
   misaligned against whatever sits above it. Auto margins centre the box too. */
.hero-sub.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media (min-width: 768px) { .hero-sub { font-size: 20px; } }

.bg-ink .hero-sub, .bg-orange .hero-sub { color: var(--paper); opacity: 0.92; }
.bg-ink .display-h, .bg-ink .section-h { color: var(--paper); }
.bg-ink .display-h .orange { color: var(--orange); }
.bg-orange .display-h, .bg-orange .section-h { color: var(--paper); }
.bg-orange .kicker { color: var(--paper); }
.bg-orange .kicker::before, .bg-orange .kicker::after { background: var(--paper); }
.bg-ink .kicker { color: var(--orange); }
.bg-ink .kicker::before, .bg-ink .kicker::after { background: var(--orange); }

/* ===========================================
   BUTTONS
   =========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  padding: 22px 36px;
  font-family: 'Staatliches', sans-serif;
  font-size: 17px;
  letter-spacing: 4px;
  text-transform: uppercase;
  transition: all 0.15s;
  cursor: pointer;
  border: 3px solid var(--ink);
  line-height: 1;
}
.btn:hover {
  background: var(--orange);
  border-color: var(--orange);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.btn .arrow { font-size: 20px; }

.btn.orange { background: var(--orange); border-color: var(--orange); }
.btn.orange:hover { background: var(--ink); border-color: var(--ink); }


.bg-ink .btn { background: var(--orange); border-color: var(--orange); }
.bg-ink .btn:hover {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
  box-shadow: 4px 4px 0 var(--orange);
}

.bg-orange .btn { background: var(--ink); border-color: var(--ink); }
.bg-orange .btn:hover {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Staatliches', sans-serif;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 6px;
  transition: color 0.2s, border-color 0.2s;
}
.text-link:hover { color: var(--orange); border-bottom-color: var(--orange); }
.bg-ink .text-link { border-bottom-color: var(--paper); color: var(--paper); }
.bg-ink .text-link:hover { border-bottom-color: var(--orange); color: var(--orange); }
.bg-orange .text-link { border-bottom-color: var(--paper); color: var(--paper); }
.bg-orange .text-link:hover { border-bottom-color: var(--ink); color: var(--ink); }

/* ===========================================
   HERO
   =========================================== */
/* Top padding is deliberately smaller than the bottom. The masthead already
   supplies visual separation above, so a large top pad just pushes the
   headline down; at 140px the subhead and CTA both fell below an 800px
   laptop viewport. The bottom pad stays generous to give the display type
   room before the next band. */
.hero-section { padding: 56px 0 88px; position: relative; }
@media (min-width: 768px) { .hero-section { padding: 72px 0 120px; } }
@media (min-width: 1024px) { .hero-section { padding: 88px 0 140px; } }

/* ===========================================
   GRIDS
   =========================================== */
.three-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 48px;
}
@media (min-width: 768px) { .three-col { grid-template-columns: repeat(3, 1fr); } }

.three-col .col {
  border: 3px solid var(--ink);
  padding: 32px 28px;
  margin-top: -3px;
  margin-left: -3px;
  background: var(--paper);
}
@media (min-width: 768px) { .three-col .col { margin-top: 0; } }

.col .col-number {
  font-family: 'Shrikhand', cursive;
  font-size: 56px;
  color: var(--orange);
  line-height: 0.9;
  margin-bottom: 16px;
}
.col h3 {
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
  line-height: 1;
}
.col p { font-size: 15px; font-weight: 500; line-height: 1.55; }
.bg-ink .col h3 { color: var(--paper); }
.bg-ink .col p { color: var(--paper); opacity: 0.85; }

/* ===========================================
   ASYMMETRIC PROJECT GRID
   =========================================== */
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 56px;
}
@media (min-width: 640px) {
  .project-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 200px;
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .project-grid { grid-auto-rows: 260px; gap: 24px; }
}

.project {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border: 3px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.project:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.project img { width: 100%; height: 100%; object-fit: cover; display: block; }

.project.ink { background: var(--ink); }
.project.orange { background: var(--orange); }
.project.cream { background: var(--cream); }
.project.warm { background: #D4B886; }
.project.deep { background: #2A1810; }

.project .placeholder-label {
  font-family: 'Staatliches', sans-serif;
  font-size: 13px;
  letter-spacing: 3.5px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  padding: 12px;
}
.project.cream .placeholder-label,
.project.warm .placeholder-label { color: var(--ink); opacity: 0.4; }

.project .caption {
  position: absolute;
  inset: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.2s;
}
.project:hover .caption { opacity: 1; }
/* Keyboard parity: tiles carry tabindex so captions are reachable without a mouse */
.project:focus .caption,
.project:focus-within .caption { opacity: 1; }
.project:focus-visible {
  outline: 4px solid var(--orange);
  outline-offset: 3px;
}
.project .caption .cap-meta {
  font-family: 'Staatliches', sans-serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 8px;
}
.project .caption .cap-title {
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
}
.project .caption .cap-desc {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.85;
}

/* On mobile, captions always visible */
@media (max-width: 639px) {
  .project { min-height: 260px; }
  .project .caption {
    opacity: 1;
    background: linear-gradient(to top, rgba(26,26,26,0.95) 0%, rgba(26,26,26,0.7) 60%, transparent 100%);
    padding: 20px;
  }
  .project .caption .cap-title { font-size: 18px; }
}

@media (min-width: 640px) {
  /* Six columns, and every row must sum to 6 or the grid leaves holes.
     Layout:  row1  big(2) + wide(4)
              row2  big    + third(2) + third(2)
              row3  third(2) + third(2) + third(2)
              row4  full(6)
     size-wide previously spanned 2, identical to size-third, so the "wide"
     tile was never wide. */
  .project.size-big   { grid-column: span 2; grid-row: span 2; }
  .project.size-third { grid-column: span 2; }
  .project.size-wide  { grid-column: span 4; }
  /* Two rows tall: 1208x544 is 2.22:1, which nearly matches the panorama it
     holds (2.34:1). At one row the tile is 4.65:1 and a centre crop would keep
     half the image height, discarding both the foreground detail and the
     scoreboard — the two things that make the shot read as scale. */
  .project.size-full  { grid-column: span 6; grid-row: span 2; }
}

/* ===========================================
   STATS BAND
   =========================================== */
.stats-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 3px solid var(--paper);
  margin-top: 56px;
}
@media (min-width: 640px) { .stats-band { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .stats-band { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: 32px 24px;
  border: 3px solid var(--paper);
  margin: -3px;
}
.stat .stat-number {
  font-family: 'Shrikhand', cursive;
  font-size: 56px;
  line-height: 0.95;
  color: var(--orange);
  margin-bottom: 8px;
}
.stat .stat-label {
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.85;
}

/* ===========================================
   INDUSTRIES — 2x2 solid colour cards, type only
   No icons and no images by design: a four-icon set turns an editorial layout
   into a generic SaaS grid, and context photography (a restaurant interior, a
   school gym) is a different subject and lighting setup from the product
   specimen shots in the services panels. Colour carries the differentiation.
   =========================================== */
.industry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 48px;
}
@media (min-width: 768px) { .industry-grid { grid-template-columns: 1fr 1fr; } }

.industry-card {
  border: 3px solid var(--ink);
  /* Negative margins collapse adjoining borders so the grid reads as one
     ruled block rather than a set of separated boxes. */
  margin: -3px 0 0 -3px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
@media (min-width: 768px) { .industry-card { padding: 40px 36px; } }

/* Card themes. Text colour is chosen for contrast, not habit: paper on orange
   is 3.42:1 and fails WCAG AA for body text, while ink on orange is 4.76:1
   and passes. Ink on tan is 9.12:1. */
.industry-card.ind-tan     { background: #D4B886;      color: var(--ink); }
.industry-card.ind-black   { background: var(--ink);   color: var(--paper); }
.industry-card.ind-orange  { background: var(--orange); color: var(--ink); }
.industry-card.ind-outline { background: var(--paper); color: var(--ink); }

.ind-number {
  font-family: 'Shrikhand', cursive;
  font-size: 56px;
  line-height: 0.9;
  color: var(--orange);
  margin-bottom: 16px;
}
/* Orange on orange would vanish; ink reads as deliberate against the fill. */
.ind-orange .ind-number { color: var(--ink); }

.ind-title {
  font-family: 'Staatliches', sans-serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.ind-desc {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  margin-bottom: 24px;
}

/* Chips sit on the baseline of every card so the row reads level even when
   descriptions run to different lengths. */
.industry-card .cat-tags { margin-top: auto; }

/* ===========================================
   CATEGORIES
   =========================================== */
.category { padding: 0; border-top: 3px solid var(--ink); }
.category:last-child { border-bottom: 3px solid var(--ink); }

.category-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 1024px) { .category-inner { grid-template-columns: 1fr 1fr; } }

.category-info {
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) { .category-info { padding: 80px 56px; } }

/* Panel rhythm is declared per panel, not derived from nth-child. The old rules
   counted every child of #services — including the intro block — so the pattern
   was correct only by accident and would scramble if the section were reordered. */
.category .category-info {
  background: var(--paper);
  border-right: 3px solid var(--ink);
}
.category.image-left .category-info { background: var(--cream); }

@media (min-width: 1024px) {
  /* Flip the grid so the photo lands on the left. Children are set back to ltr
     so only column order reverses, never text direction. */
  .category.image-left .category-inner { direction: rtl; }
  .category.image-left .category-inner > * { direction: ltr; }
  .category.image-left .category-info { border-right: none; border-left: 3px solid var(--ink); }
}

.cat-number {
  font-family: 'Shrikhand', cursive;
  font-size: 72px;
  color: var(--orange);
  line-height: 0.9;
  margin-bottom: 20px;
}
.cat-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -1px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 24px;
}
@media (min-width: 768px) { .cat-name { font-size: 52px; letter-spacing: -1.5px; } }

.cat-desc { font-size: 17px; line-height: 1.6; margin-bottom: 28px; max-width: 500px; font-weight: 500; }
.cat-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-tag {
  font-family: 'Staatliches', sans-serif;
  font-size: 13px;
  letter-spacing: 2.5px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-transform: uppercase;
}

.cat-image {
  aspect-ratio: 4/3;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1024px) { .cat-image { aspect-ratio: auto; min-height: 540px; } }

/* Tile colour behind a photo only shows while a panel is still a placeholder. */
.category.theme-tan    .cat-image { background: #D4B886; }
.category.theme-orange .cat-image { background: var(--orange); }
.category.theme-black  .cat-image { background: var(--ink); }

/* Photos fill the category panel and crop from the centre. The panel is a fixed
   540px tall while its width tracks the viewport, so the same image renders
   portrait on a tablet and near-letterbox on a wide monitor. */
.cat-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cat-image .placeholder-label {
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 3.5px;
  color: rgba(255,255,255,0.4);
}
.category.theme-tan .cat-image .placeholder-label { color: var(--ink); opacity: 0.4; }

/* ===========================================
   OCCASIONS STRIP
   A thin chip band, not a panel — roughly the height of the orange scale band.
   Sits outside #services so the last category keeps its :last-child border.
   =========================================== */
/* Background is set here rather than via .bg-cream, which is scoped to
   .section.bg-cream and would not match this element. */
.occasions { padding: 44px 0; background: var(--cream); }
@media (min-width: 768px) { .occasions { padding: 56px 0; } }

/* The strip and the work grid are both cream, so without a rule they merge
   into one block and the two sets of section padding read as a void rather
   than a break. divider-bottom supplies the rule; this trims the doubled
   padding underneath it. */
/* Full border declared here: the .divider-bottom utility is scoped as
   .section.divider-bottom and matches nothing on an element that is not also
   a .section. Same trap as .bg-cream. */
.occasions.divider-bottom { border-bottom: 3px solid var(--ink); }
@media (min-width: 768px)  { .occasions + .section { padding-top: 64px; } }
@media (min-width: 1024px) { .occasions + .section { padding-top: 72px; } }

.occasions .kicker { margin-bottom: 12px; }

.occasions-line {
  font-size: 17px;
  font-weight: 500;
  color: var(--mute);
  margin-bottom: 22px;
}

/* ===========================================
   CLIENT LOGO WALL
   =========================================== */
/* Sits high on the page — the third thing a visitor sees — so it is a strip
   rather than a full section: eyebrow and one line, no display headline. Proof
   this early has to be quick to scan, not another thing to read. */
/* Cream, so the strip reads as its own band. On paper it sat between the orange
   band and the paper Industries section with nothing to separate it, which is
   what made it feel like a gap in the page rather than a section of it. */
.logo-strip { background: var(--cream); padding: 40px 0 44px; }
@media (min-width: 768px) { .logo-strip { padding: 52px 0 56px; } }

/* Stacked, matching the occasions strip exactly — same content shape (eyebrow
   plus one line, no headline), same rhythm. Every other section on the page
   stacks its header; running this one horizontally made it read as a different
   kind of thing and broke the vertical flow down the page. */
.logo-strip-head { margin-bottom: 22px; }
.logo-strip-head .kicker { margin-bottom: 12px; }

.logo-wall-line {
  font-size: 16px;
  font-weight: 500;
  color: var(--mute);
  margin: 0;
}

.logo-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 0;
}
@media (min-width: 700px)  { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .logo-wall { grid-template-columns: repeat(5, 1fr); } }


/* No borders. Every other bordered element on this page contains text that
   benefits from containment; a logo is already its own shape, and boxing solid
   black marks inside black boxes doubles the structure and reads as a table.
   The strip is framed at section level instead — the orange band above and the
   Industries rule below. Hairlines were the other option and were rejected:
   the brand rule is 3px solid, never hairlines. */
.logo-slot {
  min-height: 104px;
  padding: 18px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The SVGs are rewritten to a single ink rather than filtered here — greyscale
   plus opacity left the lighter marks washed out, and solid ink matches the
   3px black rules the rest of the page is built from. Colour originals are
   kept alongside each -mono file if the wall ever needs to go full colour.
   max-height rather than width: a wide wordmark and a square badge scaled to
   equal widths look wrong side by side. */
/* Each viewBox is cropped to its own artwork, so a height here is a height of
   actual ink rather than of whatever padding the exporter baked in. Sizes are
   set for comparable optical area, not equal height: these marks range from
   0.84:1 (a portrait crest) to 3.35:1 (a wide wordmark), and matching their
   heights would make the wordmarks look half the size. */
.logo-slot img {
  max-height: 56px;
  max-width: 88%;
  width: auto;
  object-fit: contain;
}

.logo-slot.logo-crest img { max-height: 88px; }

/* On one line the row becomes a flex band rather than a grid: space-between
   puts the first mark on the same left spine as the header text and the last
   flush to the right edge, while distributing the gaps evenly. Edge-aligning
   grid cells achieved the spine but left a wider gap at each end, because the
   outer logos sat at their cell edges and the inner ones stayed centred.
   Below 1024px it stays a grid so it can wrap. */
@media (min-width: 1024px) {
  .logo-wall {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
  }
  .logo-slot { margin: 0; padding: 0; min-height: 0; flex: 0 1 auto; }
  /* Explicit height, not max-height. These SVGs carry a viewBox but no
     intrinsic width or height, so inside a shrink-to-fit flex item there is
     nothing for width:auto to resolve against and the image collapses to 0x0.
     A definite height lets the width follow from the viewBox ratio. */
  .logo-slot img { height: 52px; width: auto; max-width: none; max-height: none; }
  .logo-slot.logo-crest img { height: 80px; }
}

.logo-slot .placeholder-label { color: var(--ink); opacity: 0.35; text-align: center; }

/* ===========================================
   TESTIMONIALS
   Intentionally not another bordered card grid — the page already has the
   industries grid and two three-column sections. A thick orange rule carries
   the structure instead, so this reads as a different kind of content.
   =========================================== */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 48px;
}
@media (min-width: 900px) { .testimonials { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

.testimonial {
  border-left: 6px solid var(--orange);
  padding-left: 24px;
  /* Quotes run to different lengths, so the attributions are pushed to a
     shared baseline rather than floating at three different heights. */
  display: flex;
  flex-direction: column;
}
.testimonial .tm-attr { margin-top: auto; }

.tm-quote {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  margin-bottom: 20px;
}

.tm-attr {
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink);
}
.tm-attr span {
  display: block;
  margin-top: 4px;
  color: var(--mute);
  letter-spacing: 2px;
}

/* ===========================================
   QUOTE BLOCK
   =========================================== */
.quote-block { text-align: center; max-width: 820px; margin: 0 auto; }

.quote-block .quote {
  font-family: 'Shrikhand', cursive;
  font-size: 40px;
  line-height: 1.05;
  margin-bottom: 40px;
  color: var(--ink);
}
@media (min-width: 768px) { .quote-block .quote { font-size: 60px; } }
@media (min-width: 1024px) { .quote-block .quote { font-size: 76px; } }

.bg-ink .quote-block .quote { color: var(--paper); }
.bg-orange .quote-block .quote { color: var(--paper); }
.quote-block .quote .orange { color: var(--orange); }
.bg-ink .quote-block .quote .orange { color: var(--orange); }
.bg-orange .quote-block .quote .orange { color: var(--ink); }

/* ===========================================
   FORMS
   =========================================== */
.form-wrap { max-width: 720px; margin: 0 auto; }
.form-field { margin-bottom: 32px; }
.form-field label {
  display: block;
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
  color: var(--ink);
}
.form-field label .required { color: var(--orange); margin-left: 4px; }

/* Radio groups are fieldsets so screen readers announce the group question.
   Reset the browser's default fieldset chrome and style legend like a label. */
fieldset.form-field { border: 0; min-width: 0; }
.form-field legend {
  display: block;
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 0;
  color: var(--ink);
}

/* Big email address on the contact page. Scales with the viewport — at a fixed
   48px it was wider than a phone screen and pushed the whole page sideways. */
.email-display {
  font-family: 'Shrikhand', cursive;
  font-size: clamp(22px, 6.4vw, 48px);
  color: var(--orange);
  line-height: 1.1;
  border-bottom: 4px solid var(--orange);
  padding-bottom: 8px;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Phone under the email on the contact page. Deliberately a step down in
   scale from .email-display — email is still the primary channel. */
.contact-phone {
  margin-top: 20px;
  font-family: 'Staatliches', sans-serif;
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--paper);
}
.contact-phone a { border-bottom: 3px solid var(--orange); padding-bottom: 4px; }

/* Off-screen but still read by assistive tech — used for the spam honeypot */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea {
  width: 100%;
  padding: 16px 16px;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  border: 3px solid var(--ink);
  background: var(--paper);
  outline: none;
  transition: background 0.2s;
}
.form-field input:focus, .form-field textarea:focus { background: var(--cream); }
.form-field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }

.radio-group { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) { .radio-group { grid-template-columns: 1fr 1fr; } }
.radio-option {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  border: 3px solid var(--ink);
  margin: -3px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 15px;
  font-weight: 500;
  background: var(--paper);
}
.radio-option:hover { background: var(--cream); }
.radio-option input { margin-right: 12px; accent-color: var(--orange); }
.radio-option:has(input:checked) { background: var(--orange); color: var(--paper); }

/* ===========================================
   FOOTER
   =========================================== */
footer.site-footer {
  background: var(--ink);
  color: var(--paper);
  border-top: 3px solid var(--ink);
}
footer.site-footer .footer-top {
  max-width: 1320px;
  margin: 0 auto;
  padding: 80px 24px 56px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}
@media (min-width: 768px) {
  footer.site-footer .footer-top {
    grid-template-columns: 2fr 1fr 1fr;
    padding: 80px 40px 56px;
  }
}
@media (min-width: 1024px) { footer.site-footer .footer-top { padding: 96px 56px 64px; } }

footer .ftr-mark { display: inline-flex; align-items: baseline; gap: 12px; line-height: 1; margin-bottom: 20px; }
footer .ftr-mark .heights {
  font-family: 'Shrikhand', cursive;
  font-size: 56px;
  color: var(--orange);
  line-height: 0.85;
}
footer .ftr-mark .goods {
  font-family: 'Staatliches', sans-serif;
  font-size: 28px;
  letter-spacing: 5px;
  color: var(--paper);
  position: relative;
  top: -4px;
}
footer .ftr-desc { font-size: 16px; font-weight: 500; color: var(--paper); opacity: 0.75; max-width: 380px; line-height: 1.5; }
footer .ftr-heading {
  font-family: 'Staatliches', sans-serif;
  font-size: 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
}
footer .ftr-list a, footer .ftr-list span {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--paper);
  opacity: 0.85;
  padding: 6px 0;
  transition: color 0.2s, opacity 0.2s;
}
footer .ftr-list a:hover { color: var(--orange); opacity: 1; }

footer .footer-bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 24px 40px;
  border-top: 2px solid rgba(250,247,241,0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
@media (min-width: 768px) { footer .footer-bottom { padding: 24px 40px 40px; } }
@media (min-width: 1024px) { footer .footer-bottom { padding: 28px 56px 48px; } }
footer .footer-bottom span,
footer .footer-bottom a {
  font-family: 'Staatliches', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0.6;
}
footer .footer-bottom a:hover { color: var(--orange); opacity: 1; }

/* ===========================================
   LEGAL PAGES
   =========================================== */
.legal-body { max-width: 720px; margin: 0 auto; padding: 56px 24px; }
@media (min-width: 768px) { .legal-body { padding: 80px 24px; } }

.legal-body h2 {
  font-family: 'Staatliches', sans-serif;
  font-size: 22px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 48px 0 16px;
  line-height: 1;
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { font-size: 16px; line-height: 1.7; font-weight: 500; margin-bottom: 18px; }
.legal-body ul { margin: 16px 0 24px; padding-left: 24px; }
.legal-body li { font-size: 16px; line-height: 1.7; margin-bottom: 8px; font-weight: 500; }
.legal-body a {
  color: var(--orange);
  border-bottom: 2px solid var(--orange);
  padding-bottom: 1px;
}
.legal-meta {
  font-family: 'Staatliches', sans-serif;
  font-size: 14px;
  letter-spacing: 3px;
  color: var(--mute);
  text-transform: uppercase;
  padding-bottom: 24px;
  border-bottom: 3px solid var(--ink);
  margin-bottom: 32px;
}


/* ===========================================
   MOBILE TOUCH + WRAPPING FIXES
   Deliberately the last block in the file. These override base rules of equal
   specificity, and media queries add no specificity — three separate fixes
   have silently lost on source order in this stylesheet already.
   =========================================== */
@media (max-width: 767px) {

  /* Every tappable thing reaches the 44px minimum. Measured before: footer
     links 22px, nav links 20px, wordmark and quote link 28px, text links 34px.
     min-height plus centring rather than padding, so the text position does
     not shift — only the hit area grows. */
  footer .ftr-list a,
  footer .ftr-list span {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 2px 0;
  }

  .masthead-nav .links a,
  .masthead-nav .quote-link {
    min-height: 44px;
    align-items: center;
  }

  .masthead-mark {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .text-link { min-height: 44px; }

  .footer-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* The eyebrow's trailing dash strands at the far right of the first line
     when the label wraps — the text is a single flex item spanning the full
     width, so ::after lands after it rather than beside the words. Dropping it
     on narrow screens leaves "— LABEL", which reads as intentional. */
  .kicker::after { display: none; }
}