/* ============================================================
   NeonShdw LLC — Integrated Systems Design
   NEON SIGN SHOP theme: glass bench, lit tube runs, pattern wall.
   Dark palette. No text gradients. No rgba. Pre-blended hex only.
   ============================================================ */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

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

body {
  font-size: 16px;
  margin: 0;
  background-color: #1E1E26;
  color: #F2F1EC;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.65;
  overflow-x: hidden;
}

body.has-js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s ease 0.05s, transform 0.75s ease 0.05s;
}

body.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

a {
  color: #FF6A5A;
  text-decoration: none;
}

a:hover {
  color: #F2F1EC;
}

/* ---------- Reveal elements stay visible if JS is off ---------- */
body:not(.has-js) .reveal {
  opacity: 1;
  transform: none;
}

/* ============================================================
   PATTERN WALL HEADER  (non-sticky, scrolls away)
   ============================================================ */
.pattern-wall-header {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 34px;
  background-color: #131318;
  border-bottom: 1px solid #7B7E8C;
  background-image:
    linear-gradient(#1d1d26 1px, transparent 1px),
    linear-gradient(90deg, #1d1d26 1px, transparent 1px);
  background-size: 46px 46px;
  position: relative;
}

.wall-plate {
  display: inline-flex;
  align-items: center;
}

.wall-plate::before {
  content: "";
  width: 6px;
  height: 100%;
  margin-right: 12px;
  align-self: stretch;
  background-color: #FF6A5A;
}

.wall-brand {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #1E1E26;
  background-color: #FF6A5A;
  border-radius: 3px;
  padding: 6px 16px;
  line-height: 1.2;
}

.plate-coral {
  color: #131318;
  -webkit-text-fill-color: #FFF4F0;
}

.wall-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.wall-sheet {
  display: inline-block;
  color: #2a2a33;
  background-color: #F6F3E9;
  padding: 8px 18px;
  border-radius: 2px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 15px;
  position: relative;
}

.wall-sheet::before,
.wall-sheet::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 5px;
  background-color: #E8E2D2;
  opacity: 1;
}

.wall-sheet::before {
  top: -2px;
  left: -2px;
}

.wall-sheet::after {
  bottom: -2px;
  right: -2px;
  background-color: #FF6A5A;
}

.wall-sheet:hover {
  color: #FFFFFF;
  background-color: #131318;
}

.wall-link-home {
  outline: 2px solid #7B7E8C;
  outline-offset: 2px;
}

.wall-sheet-here {
  color: #131318;
  outline: 2px solid #FF6A5A;
  outline-offset: 2px;
}

.wall-chip {
  display: inline-block;
  background-color: #FF6A5A;
  color: #131318;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 12px 20px;
  border-radius: 3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.wall-chip:hover {
  background-color: #F2F1EC;
  color: #1E1E26;
}

.wall-chip-big {
  font-size: 17px;
  padding: 14px 30px;
}

.clip-seal {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  background-color: #131318;
  border: 2px solid #F6EFE0;
  border-radius: 50%;
  vertical-align: 2px;
}

/* ============================================================
   MAIN SHOP RUN CANVAS
   ============================================================ */
.shop-run {
  padding: 0 34px 40px;
  margin: 0 auto;
}

/* ---------- RUN 1 · THE BENCH hero ---------- */
.bench-section {
  position: relative;
  padding: 70px 0 40px;
  max-width: 1000px;
}

.bench-two-line {
  position: relative;
  padding-left: 34px;
}

.bench-glyph {
  position: absolute;
  left: 0;
  top: 6px;
}

.glyph-ring {
  display: block;
  width: 22px;
  height: 22px;
  border: 3px solid #ff6a5a;
}

.glyph-dot {
  display: block;
  width: 8px;
  height: 8px;
  margin: 4px;
  background-color: #FF6A5A;
}

.glyph-stem {
  display: block;
  width: 3px;
  height: 34px;
  margin: 0 auto;
  background-color: #7B7E8C;
}

.bench-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #5AA7C7;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.bench-title-line {
  font-size: 48px;
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -1px;
  margin: 0;
  color: #F2F1EC;
}

.bench-break {
  display: block;
}

.coral-fire-law {
  margin-top: 26px;
  height: 5px;
  width: 180px;
  background-color: #7B7E8C;
  position: relative;
}

.coral-fire-law::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  height: 11px;
  width: 64px;
  background-color: #FF6A5A;
  box-shadow: 0 0 16px #FF6A5A;
}

.fire-tick {
  display: none;
}

.wall-tag {
  display: inline-block;
  background-color: #d9d6c9;
  color: #34342e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 12px;
  border-radius: 2px;
  text-align: center;
  margin-top: 24px;
  line-height: 1.4;
}

.run-tag-standfirst {
  background-color: #7B7E8C;
  color: #1a1a20;
}

/* ---------- standfirst lines ---------- */
.standfirst-section {
  max-width: 900px;
}

.bench-standfirst {
  font-size: 20px;
  line-height: 1.7;
  color: #E8E6DC;
  max-width: 62ch;
  margin: 22px auto 0 0;
}

/* ============================================================
   BENCH RUN wrapper + LIT TUBE LINE
   ============================================================ */
.section-run {
  padding: 64px 0 40px;
  border-bottom: 1px dashed #4a4a56;
}

.section-run-wide {
  max-width: 1100px;
}

.lit-tube-line {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 30px;
}

.run-dial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background-color: #5d606c;
  color: #F6F3E9;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 1px;
  text-align: center;
  border: 5px solid #7B7E8C;
  position: relative;
  flex: none;
}

.run-dial::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dashed #131318;
  border-radius: 50%;
  opacity: 1;
}

.tube-arc {
  display: block;
  height: 18px;
  background-color: #7B7E8C;
  border-radius: 12px;
  flex: 1;
  position: relative;
  overflow: hidden;
}

.tube-seg {
  display: block;
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 12px;
}

.seg-one {
  left: 0;
  width: 30%;
}

.seg-two {
  left: 30%;
  width: 44%;
}

.seg-three {
  right: 0;
  width: 26%;
}

.seg-coral {
  background-color: #FF6A5A;
  box-shadow: 0 0 14px #FF6A5A;
}

.seg-blue {
  background-color: #5AA7C7;
  box-shadow: 0 0 12px #5AA7C7;
}

.seg-iron {
  background-color: #3a3a44;
  box-shadow: none;
}

.tube-cap {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #2d2d37;
  border: 2px solid #F2F1EC;
  box-shadow: none;
}

.cap-left {
  left: -4px;
  transform: translateY(-50%);
}

.cap-right {
  right: -4px;
  transform: translateY(-50%);
}

.run-tag {
  font-size: 12px;
  letter-spacing: 2px;
  color: #9b9ba6;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

.run-tag-right {
  color: #FF8E80;
}

/* ============================================================
   RUN HEADINGS (shared title)
   ============================================================ */
.run-head {
  max-width: 62ch;
}

.run-title {
  font-size: 36px;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -1px;
  color: #F2F1EC;
  margin: 0 0 12px;
}

.run-sub {
  font-size: 18px;
  color: #D3D1C6;
  margin: 0 0 26px;
}

/* ============================================================
   RUN 2 · PATTERN WALL (3 x 2 grid of pinned drawings)
   ============================================================ */
.run-id {
  scroll-margin-top: 20px;
}

.wall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin: 6px 0 30px;
}

.pattern-card {
  display: block;
  background-color: #F6F3E9;
  color: #2a2620;
  border-radius: 2px;
  padding: 30px 24px 24px;
  box-shadow: 0 2px 0 #7B7E8C;
  transform: rotate(0.4deg);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.pattern-card:hover {
  outline: 3px solid #FF6A5A;
  outline-offset: 4px;
}

.pattern-card:nth-child(even) {
  transform: rotate(-0.5deg);
}

.tape {
  position: absolute;
  width: 46px;
  height: 16px;
  background-color: #e2ddd0;
  z-index: 1;
}

.ta-top-left {
  top: -4px;
  left: 8px;
  transform: rotate(-4deg);
}

.ta-top-right {
  top: -4px;
  right: 8px;
  transform: rotate(4deg);
}

.ta-bottom-left {
  bottom: -4px;
  left: 8px;
  transform: rotate(-4deg);
}

.ta-bottom-right {
  bottom: -4px;
  right: 8px;
  transform: rotate(4deg);
}

.pattern-head {
  display: block;
  font-size: 20px;
  font-weight: 800;
  color: #131318;
  margin: 4px 0 14px;
}

.pattern-card:hover .pattern-head {
  color: #c43726;
}

.pattern-line {
  display: block;
  height: 3px;
  background-color: #FF6A5A;
  margin: 0 0 12px;
  position: relative;
}

.pl-angle-one {
  width: 84%;
}

.pl-angle-one::after {
  content: "";
  position: absolute;
  top: 2px;
  height: 3px;
  width: 40%;
  left: 0;
  background-color: #3a3a44;
  transform: rotate(-4deg);
  transform-origin: left center;
}

.pl-angle-two {
  width: 70%;
  margin-left: 30%;
}

.pl-arc-one {
  width: 100%;
  background-color: #5AA7C7;
  height: 18px;
  border-radius: 50% 50% 0 0;
}

.pl-angle-one-rev {
  width: 78%;
  margin-left: 0;
}

.pl-angle-one-rev::after {
  content: "";
  position: absolute;
  top: 2px;
  height: 3px;
  width: 38%;
  right: 0;
  background-color: #3a3a44;
}

.pl-arc-two {
  width: 86%;
  margin-left: auto;
  background-color: #5AA7C7;
}

.pl-circle-mark {
  height: 26px;
  width: 26px;
  margin: 2px auto;
  border-radius: 50%;
  border: 3px solid #3a3a44;
  background-color: #5AA7C7;
}

.pattern-note {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #5d606c;
  margin-bottom: 6px;
}

.note-two,
.note-five {
  text-align: right;
}

.pattern-tube {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #3a362e;
}

.wall-cta {
  font-size: 18px;
  color: #F2F1EC;
  max-width: 62ch;
}

.wall-cta a {
  color: #FF6A5A;
  border-bottom: 1px dotted #7B7E8C;
}

/* ============================================================
   RUN 3 · TRANSFORMER ROOM
   ============================================================ */
.transformer-room {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}

.transformer-split {
  max-width: 62ch;
}

.transformer-prose {
  font-size: 16px;
  color: #DDDBD2;
  line-height: 1.78;
  margin: 0 0 22px;
  max-width: 62ch;
}

.transformer-panel {
  background-color: #3a3a44;
  border: 6px solid #6a6c78;
  border-radius: 8px;
  padding: 22px;
  position: relative;
  min-height: 380px;
  color: #F6F3E9;
}

.panel-bolt {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #9a9ba4;
}

.bolt-tl {
  top: 6px;
  left: 6px;
}

.bolt-tr {
  top: 6px;
  right: 6px;
}

.bolt-bl {
  bottom: 6px;
  left: 6px;
}

.bolt-br {
  bottom: 6px;
  right: 6px;
}

.panel-scree {
  display: block;
  font-size: 11px;
  letter-spacing: 3px;
  color: #b7b7c0;
  text-align: center;
  margin-bottom: 18px;
}

.gauge {
  display: block;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background-color: #F6F3E9;
  border: 5px solid #5d606c;
  margin: 0 auto 6px;
  position: relative;
}

.gauge-one {
  float: left;
}

.gauge-two {
  float: right;
}

.gauge-three {
  clear: both;
  margin-right: 36%;
}

.gauge-dial-marks {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid #d4ccc0;
  background: repeating-conic-gradient(#c6bdad 0deg 6deg, #F6F3E9 6deg 18deg);
  opacity: 1;
}

.gauge-needle {
  position: absolute;
  width: 3px;
  height: 26px;
  bottom: 43px;
  left: 41px;
  background-color: #c43726;
  border-radius: 2px;
  transform-origin: bottom center;
}

.n-one {
  transform: rotate(24deg);
}

.n-two {
  transform: rotate(140deg);
}

.n-three {
  transform: rotate(-30deg);
}

.gauge-read {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  color: #2a2a33;
}

.read-one,
.read-two,
.read-three {
  color: #2a2a33;
}

.panel-band {
  display: block;
  height: 10px;
  background-color: #26262f;
  margin: 14px 0 10px;
  border-radius: 6px;
  overflow: hidden;
}

.band-bar {
  display: block;
  height: 100%;
  width: 60%;
  background-color: #FF6A5A;
  box-shadow: 0 0 10px #FF6A5A;
}

.panel-band-led-led {
  display: flex;
  justify-content: space-between;
}

.band-led {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 3px;
  color: #131318;
}

.led-phased {
  background-color: #FF6A5A;
  box-shadow: 0 0 10px #FF6A5A;
}

.led-idle {
  background-color: #5AA7C7;
}

/* ============================================================
   COUNTER CTA  (RUN 4 summary call on index)
   ============================================================ */
.counter-cta {
  display: inline-block;
  margin: 26px 0 10px;
  background-color: #FF6A5A;
  color: #131318;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 1px;
  padding: 16px 34px;
  border-radius: 3px;
  text-transform: uppercase;
}

.counter-cta:hover {
  background-color: #F2F1EC;
  color: #1E1E26;
}

/* ============================================================
   SERVICES page — one service per RUN
   ============================================================ */
.service-pair {
  max-width: 62ch;
}

/* ============================================================
   RUN · WHO SHELL + bank piece
   ============================================================ */
.who-shell {
  max-width: 62ch;
}

.who-text {
  font-size: 17px;
  color: #DCDAD0;
  line-height: 1.78;
  margin: 0 0 18px;
  max-width: 62ch;
}

.who-contact-email,
.who-contact-phone {
  color: #FF6A5A;
  border-bottom: 1px dotted #7B7E8C;
}

/* ============================================================
   ETHOS ROW
   ============================================================ */
.ethos-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 8px;
}

.ethos-item {
  background-color: #F6F3E9;
  color: #2a2620;
  border-radius: 3px;
  padding: 24px 20px;
  box-shadow: 0 2px 0 #7B7E8C;
}

.ethos-glyph {
  display: inline-flex;
  position: relative;
  margin-bottom: 14px;
}

.e-ring {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 4px solid #FF6A5A;
}

.e-ring-two {
  border-color: #5AA7C7;
}

.e-ring-three {
  border-color: #FF6A5A;
}

.e-ring-four {
  border-color: #5AA7C7;
}

.e-dot {
  display: block;
  position: absolute;
  top: 11px;
  left: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #FF6A5A;
}

.e-dot-a {
  background-color: #FF6A5A;
}

.e-dot-b {
  background-color: #5AA7C7;
}

.e-dot-c {
  background-color: #FF6A5A;
}

.e-dot-d {
  background-color: #5AA7C7;
}

.ethos-head {
  font-size: 19px;
  font-weight: 800;
  color: #131318;
  margin: 0 0 8px;
}

.ethos-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #3a362e;
}

.ethos-link-row {
  margin-top: 30px;
}

/* ============================================================
   CONTACT · DISPATCH COUNTER layout
   ============================================================ */
.counter-shell {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

.job-ticket {
  background-color: #F6F3E9;
  color: #2a2620;
  padding: 30px 28px 28px;
  border-radius: 3px;
  position: relative;
  box-shadow: 0 2px 0 #7B7E8C;
}

.ticket-clip {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 40px;
  height: 22px;
  background-color: #7B7E8C;
  border-radius: 4px;
  transform: translateX(-50%);
  border: 1px solid #5d606c;
}

.ticket-head {
  font-size: 26px;
  font-weight: 800;
  color: #131318;
  margin: 4px 0 6px;
}

.ticket-note {
  font-size: 14px;
  color: #5d5a52;
  margin: 0 0 18px;
}

.ticket-field {
  display: block;
  margin: 0 0 16px;
  font-weight: 700;
  font-size: 14px;
  color: #37342e;
}

.ticket-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  font-size: 15px;
  font-family: inherit;
  border: 2px solid #c9c2b2;
  border-radius: 2px;
  background-color: #FFFFFF;
  color: #2a2a33;
}

.ticket-input:focus {
  outline: 3px solid #FF6A5A;
  outline-offset: 0;
  border-color: #FF6A5A;
}

.ticket-textarea {
  resize: vertical;
  min-height: 130px;
}

.ticket-hint {
  font-size: 13px;
  color: #5d5a52;
  margin: 4px 0 18px;
}

.ticket-mailto {
  color: #c43726;
  text-decoration: underline;
}

.ticket-send {
  display: inline-block;
  background-color: #FF6A5A;
  border: none;
  color: #131318;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 14px 26px;
  border-radius: 3px;
  text-transform: uppercase;
  cursor: pointer;
}

.ticket-send:hover {
  background-color: #131318;
  color: #F6F3E9;
}

.counter-stamp {
  background-color: #3a3a44;
  border: 4px solid #5d606c;
  border-radius: 6px;
  padding: 26px 24px;
  color: #F6F3E9;
}

.stamp-rule {
  display: block;
  height: 3px;
  background-color: #FF6A5A;
  margin: 12px 0;
}

.stamp-head {
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #F1F6F8;
  margin: 0 0 12px;
}

.plaque-name {
  font-size: 24px;
  font-weight: 800;
  color: #FF6A5A;
  margin: 0 0 8px;
}

.plaque-line {
  margin: 2px 0;
  font-size: 15px;
  line-height: 1.5;
  color: #E6E3DA;
}

.plaque-facts {
  margin: 10px 0;
}

.fact-term {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #9a9ba4;
}

.fact-value {
  margin: 2px 0 10px;
  font-size: 15px;
  color: #F2F1EC;
}

.fact-value .ticket-mailto,
.fact-value .ticket-phone {
  color: #FF6A5A;
  border-bottom: 1px dotted #7B7E8C;
}

.hours-head {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #F1F6F8;
  margin: 6px 0 6px;
}

.hours-line {
  margin: 2px 0;
  font-size: 15px;
  color: #E6E3DA;
}

.hours-note {
  font-size: 13px;
  color: #9a9ba4;
  margin-top: 8px;
}

.ticket-phone {
  color: #FF6A5A;
}

/* ============================================================
   FAQ  (counter notes)
   ============================================================ */
.faq-list {
  max-width: 64ch;
}

.faq-item {
  padding: 6px 0 10px;
}

.faq-q {
  font-size: 21px;
  font-weight: 800;
  color: #FF6A5A;
  margin: 0 0 6px;
}

.faq-a {
  font-size: 16px;
  color: #DCDAD0;
  margin: 0 0 20px;
  line-height: 1.7;
}

.faq-link {
  color: #5AA7C7;
  border-bottom: 1px dotted #7B7E8C;
}

/* ============================================================
   SHOP BASE FOOTER
   ============================================================ */
.shop-base {
  background-color: #131318;
  border-top: 1px solid #3a3a44;
  padding: 30px 20px 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.base-rail {
  height: 5px;
  background-color: #FF6A5A;
  box-shadow: 0 0 12px #FF6A5A;
  margin: -30px 0 24px;
  border-radius: 3px;
}

.base-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 26px;
  margin-bottom: 22px;
}

.base-link {
  color: #F2F1EC;
  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 15px;
}

.base-link:hover {
  color: #FF6A5A;
}

.base-text-line {
  margin: 3px 0;
  color: #b5b4bd;
  font-size: 14px;
}

.base-email,
.base-phone {
  color: #F2F1EC;
  text-decoration: underline;
}

.base-email:hover,
.base-phone:hover {
  color: #FF6A5A;
}

/* ============================================================
   GO TO TOP round button
   ============================================================ */
.go-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #131318;
  background-color: #FF6A5A;
  color: #131318;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  z-index: 60;
  box-shadow: 0 0 16px #FF6A5A;
  display: none;
}

.go-top.show-button {
  display: block;
}

.go-top:hover {
  background-color: #F2F1EC;
  color: #1E1E26;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.has-js .reveal {
    transition: none;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .transformer-room {
    grid-template-columns: 1fr;
  }

  .transformer-panel {
    min-height: 0;
  }

  .counter-shell {
    grid-template-columns: 1fr;
  }

  .wall-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ethos-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .pattern-wall-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
  }

  .wall-nav {
    flex-wrap: wrap;
  }

  .wall-chip {
    align-self: stretch;
    text-align: center;
  }

  .bench-title-line {
    font-size: 34px;
  }

  .wall-grid {
    grid-template-columns: 1fr;
  }

  .ethos-row {
    grid-template-columns: 1fr;
  }

  .shop-run {
    padding: 0 18px 30px;
  }

  .bench-kicker {
    letter-spacing: 2px;
  }
}

/* end */