/* ============================================================
   TripleSupport - Tongshan Zhenfusan Trading Co., Ltd.
   Public site stylesheet - LIGHT trade-olive theme
   Palette: cream #F7F4EC / trade-olive #6E7A3E / deep olive
   #4A5430 / olive-charcoal #2E3324 / dim moss #8B9076 / white
   #FFFFFF / olive tint #E9EBD9
   ============================================================ */

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

html {
  scroll-behavior: smooth;
}

body {
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
  background-color: #F7F4EC;
  color: #2E3324;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #6E7A3E;
}

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

.btn-primary {
  display: inline-block;
  background-color: #6E7A3E;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 30px;
  border: 2px solid #6E7A3E;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.btn-primary:hover {
  background-color: #4A5430;
  border-color: #4A5430;
  transform: translateY(-2px);
}

.btn-outline {
  display: inline-block;
  background-color: transparent;
  color: #4A5430;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 28px;
  border: 2px solid #4A5430;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.btn-outline:hover {
  background-color: #4A5430;
  color: #FFFFFF;
}

/* ---------- two-row navigation ---------- */

.two-row-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #F7F4EC;
  border-bottom: 1px solid #E9EBD9;
}

.two-row-nav.scrolled {
  box-shadow: 0 6px 18px #E4DFCE;
}

.nav-row-1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-chip {
  width: 40px;
  height: 40px;
  background-color: #6E7A3E;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #6E7A3E;
}

.brand-chip-glyph {
  width: 20px;
  height: 16px;
  border: 2px solid #FFFFFF;
  position: relative;
  display: block;
}

.brand-chip-glyph::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  background-color: #FFFFFF;
}

.brand-chip-glyph::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 9px;
  width: 2px;
  background-color: #FFFFFF;
}

.brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #4A5430;
  white-space: nowrap;
}

.nav-contact {
  font-size: 13px;
  color: #8B9076;
  letter-spacing: 0.4px;
}

.nav-contact a {
  color: #8B9076;
  text-decoration: none;
}

.nav-contact a:hover {
  color: #6E7A3E;
}

.nav-row-2 {
  border-top: 1px solid #E9EBD9;
}

.nav-list {
  display: flex;
  justify-content: center;
  gap: 6px;
  list-style: none;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 24px;
}

.nav-list a {
  display: inline-block;
  color: #3E4436;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 14px;
  transition: color 0.2s ease;
}

.nav-list a:hover {
  color: #6E7A3E;
  text-decoration: underline;
  text-underline-offset: 7px;
}

.nav-list a.active {
  color: #6E7A3E;
  text-decoration: underline;
  text-underline-offset: 7px;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid #C9CDB8;
  color: #4A5430;
  font-size: 22px;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
}

/* ---------- typographic stat hero (homepage) ---------- */

.stat-hero {
  background-color: #F7F4EC;
  text-align: center;
  padding: 76px 24px 90px;
}

.eyebrow-chip {
  display: inline-block;
  background-color: #6E7A3E;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  padding: 9px 20px;
}

.hero-headline {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  line-height: 1.14;
  color: #4A5430;
  max-width: 900px;
  margin: 28px auto 22px;
  font-weight: 700;
}

.hero-headline .accent {
  color: #6E7A3E;
}

.hero-headline .line {
  display: block;
}

.hero-subcopy {
  max-width: 720px;
  margin: 0 auto;
  color: #3E4436;
  font-size: 18px;
  line-height: 1.75;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}

/* ---------- trade graphic row ---------- */

.trade-graphic-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 30px 44px;
  background-color: #FFFFFF;
  border: 1px solid #E9EBD9;
  max-width: 1040px;
  margin: 48px auto 0;
  padding: 36px 28px 30px;
}

.tg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tg figcaption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8B9076;
}

/* container box with straps */
.tg-box {
  position: relative;
  width: 72px;
  height: 56px;
  border: 3px solid #6E7A3E;
  background-color: #FFFFFF;
  box-shadow: 7px 7px 0 #E9EBD9;
}

.tg-box .strap-h {
  position: absolute;
  left: 0;
  right: 0;
  top: 25px;
  height: 3px;
  background-color: #6E7A3E;
}

.tg-box .strap-v {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 33px;
  width: 3px;
  background-color: #6E7A3E;
}

/* pallet of stacked packs */
.tg-pallet {
  position: relative;
  width: 86px;
  height: 58px;
}

.tg-pallet .pack {
  position: absolute;
  width: 24px;
  height: 20px;
  background-color: #FFFFFF;
  border: 2px solid #6E7A3E;
}

.tg-pallet .p1 { left: 0; top: 12px; }
.tg-pallet .p2 { left: 29px; top: 4px; }
.tg-pallet .p3 { left: 58px; top: 12px; }

.tg-pallet .pallet-deck {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 6px;
  background-color: #4A5430;
}

.tg-pallet .pallet-deck::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 10px;
  width: 6px;
  height: 8px;
  background-color: #4A5430;
}

.tg-pallet .pallet-deck::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 10px;
  width: 6px;
  height: 8px;
  background-color: #4A5430;
}

/* cargo ship silhouette */
.tg-ship {
  position: relative;
  width: 108px;
  height: 58px;
}

.tg-ship .ship-hull {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 108px;
  height: 22px;
  background-color: #6E7A3E;
  clip-path: polygon(5% 0, 95% 0, 82% 100%, 18% 100%);
}

.tg-ship .ship-deck {
  position: absolute;
  left: 10px;
  bottom: 21px;
  width: 76px;
  height: 7px;
  background-color: #4A5430;
}

.tg-ship .ship-stack {
  position: absolute;
  bottom: 28px;
  width: 18px;
  height: 17px;
  background-color: #FFFFFF;
  border: 2px solid #6E7A3E;
}

.tg-ship .s1 { left: 10px; }
.tg-ship .s2 { left: 31px; }
.tg-ship .s3 { left: 52px; }

/* truck */
.tg-truck {
  position: relative;
  width: 102px;
  height: 58px;
}

.tg-truck .truck-body {
  position: absolute;
  left: 0;
  top: 8px;
  width: 58px;
  height: 28px;
  background-color: #6E7A3E;
}

.tg-truck .truck-body::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  width: 46px;
  height: 2px;
  background-color: #E9EBD9;
}

.tg-truck .truck-body::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  width: 46px;
  height: 2px;
  background-color: #E9EBD9;
}

.tg-truck .truck-cab {
  position: absolute;
  right: 0;
  top: 16px;
  width: 30px;
  height: 20px;
  background-color: #4A5430;
  border-radius: 0 4px 0 0;
}

.tg-truck .truck-window {
  position: absolute;
  right: 5px;
  top: 3px;
  width: 9px;
  height: 8px;
  background-color: #E9EBD9;
}

.tg-truck .truck-wheel {
  position: absolute;
  bottom: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #2E3324;
}

.tg-truck .w1 { left: 12px; }
.tg-truck .w2 { left: 42px; }
.tg-truck .w3 { right: 3px; }

/* rising arrow chart */
.tg-chart {
  position: relative;
  width: 82px;
  height: 58px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.tg-chart .cbar {
  flex: 1;
  background-color: #E9EBD9;
  border: 1px solid #C9CDB8;
}

.tg-chart .cb1 { height: 16px; }
.tg-chart .cb2 { height: 28px; }
.tg-chart .cb3 { height: 40px; }
.tg-chart .cb4 {
  height: 52px;
  background-color: #6E7A3E;
  border-color: #6E7A3E;
}

.tg-chart .chart-arrow {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 18px;
  line-height: 1;
  color: #6E7A3E;
}

/* globe with latitude lines */
.tg-globe {
  position: relative;
  width: 56px;
  height: 56px;
  border: 3px solid #6E7A3E;
  border-radius: 50%;
  overflow: hidden;
  background-color: #FFFFFF;
}

.tg-globe .lat {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #C9CDB8;
}

.tg-globe .l1 { top: 22%; }
.tg-globe .l2 { top: 48%; }
.tg-globe .l3 { top: 74%; }

.tg-globe .merid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #C9CDB8;
}

/* ---------- stat strip ---------- */

.stat-strip {
  display: flex;
  max-width: 980px;
  margin: 42px auto 0;
  background-color: #FFFFFF;
  border: 1px solid #E9EBD9;
}

.stat-item {
  flex: 1;
  text-align: center;
  padding: 24px 14px;
  border-right: 1px solid #C9CDB8;
}

.stat-item:last-child {
  border-right: none;
}

.stat-num {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: #6E7A3E;
}

.stat-label {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #8B9076;
}

/* ---------- section heads ---------- */

.section-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 54px;
}

.section-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 38px;
  line-height: 1.2;
  color: #4A5430;
  margin: 14px 0 16px;
}

.section-head p {
  color: #3E4436;
  font-size: 17px;
}

/* ---------- ledger table (homepage) ---------- */

.ledger-table {
  background-color: #F7F4EC;
  padding: 90px 0 96px;
}

.ledger {
  max-width: 1180px;
  margin: 0 auto;
  border-top: 1px solid #E9EBD9;
}

.ledger-row {
  display: grid;
  grid-template-columns: 20px 72px 1fr auto;
  gap: 22px;
  align-items: start;
  padding: 30px 24px;
  border-bottom: 1px solid #E9EBD9;
}

.node-dot {
  margin-top: 20px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #6E7A3E;
}

.row-num {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 700;
  color: #6E7A3E;
  border: 2px solid #6E7A3E;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row-card {
  background-color: #FFFFFF;
  border: 1px solid #E9EBD9;
  padding: 24px 30px;
}

.row-card h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  color: #4A5430;
  margin-bottom: 10px;
}

.row-card p {
  color: #3E4436;
  font-size: 15.5px;
}

.status-chip {
  align-self: center;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8B9076;
  border: 1px solid #C9CDB8;
  padding: 9px 14px;
}

/* ---------- metric band (homepage) ---------- */

.metric-band {
  background-color: #6E7A3E;
  padding: 62px 24px;
}

.metric-row {
  display: flex;
  max-width: 1000px;
  margin: 0 auto;
}

.metric {
  flex: 1;
  text-align: center;
  border-right: 1px solid #EFF1DE;
  padding: 10px 12px;
}

.metric:last-child {
  border-right: none;
}

.metric-num {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}

.metric-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #EFF1DE;
}

/* ---------- statement band (homepage) ---------- */

.statement-band {
  background-color: #FFFFFF;
  border-top: 1px solid #E9EBD9;
  border-bottom: 1px solid #E9EBD9;
  padding: 92px 24px;
}

.statement {
  max-width: 860px;
  margin: 0 auto;
  border-left: 4px solid #6E7A3E;
  padding-left: 34px;
}

.statement p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  line-height: 1.65;
  color: #4A5430;
}

.statement .statement-sign {
  display: block;
  margin-top: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6E7A3E;
}

/* ---------- CTA band ---------- */

.cta-band {
  background-color: #E9EBD9;
  text-align: center;
  padding: 84px 24px;
}

.cta-band h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  color: #4A5430;
  margin-bottom: 14px;
}

.cta-band p {
  color: #3E4436;
  max-width: 640px;
  margin: 0 auto 30px;
  font-size: 17px;
}

/* ---------- single-row footer ---------- */

.single-row-footer {
  background-color: #4A5430;
  padding: 34px 24px;
  text-align: center;
}

.footer-line {
  max-width: 1120px;
  margin: 0 auto;
  color: #F7F4EC;
  font-size: 13px;
  line-height: 2.1;
}

.footer-line a {
  color: #F7F4EC;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-line a:hover {
  color: #B9C281;
  text-decoration: underline;
}

.footer-sep {
  color: #8B9076;
  margin: 0 8px;
}

/* ---------- secondary page hero ---------- */

.page-hero {
  background-color: #F7F4EC;
  text-align: center;
  padding: 74px 24px 70px;
  border-bottom: 1px solid #E9EBD9;
}

.page-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 44px;
  line-height: 1.18;
  color: #4A5430;
  max-width: 840px;
  margin: 16px auto 18px;
}

.page-hero p {
  max-width: 780px;
  margin: 0 auto;
  color: #3E4436;
  font-size: 18px;
}

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

.services-list {
  padding: 84px 0 40px;
}

.service-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 28px;
  padding: 44px 0;
  border-bottom: 1px solid #E9EBD9;
}

.service-row h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  color: #4A5430;
  margin-bottom: 12px;
}

.service-row p {
  color: #3E4436;
  margin-bottom: 12px;
}

.service-row ul {
  margin: 4px 0 0 20px;
  color: #3E4436;
}

.service-row li {
  margin-bottom: 5px;
}

.service-row .row-num {
  margin-top: 6px;
}

/* process overview (services page) */

.process-band {
  background-color: #FFFFFF;
  border-top: 1px solid #E9EBD9;
  border-bottom: 1px solid #E9EBD9;
  padding: 84px 0;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.process-step {
  background-color: #E9EBD9;
  border-top: 3px solid #6E7A3E;
  padding: 24px 20px;
}

.process-step .step-num {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  color: #6E7A3E;
}

.process-step h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #4A5430;
  margin: 10px 0 8px;
}

.process-step p {
  color: #3E4436;
  font-size: 14px;
}

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

.contact-section {
  padding: 84px 0 60px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 390px;
  gap: 48px;
  align-items: start;
}

.contact-form {
  background-color: #FFFFFF;
  border: 1px solid #E9EBD9;
  padding: 34px;
}

.contact-form h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  color: #4A5430;
  margin-bottom: 6px;
}

.contact-form .form-intro {
  color: #3E4436;
  margin-bottom: 8px;
}

.contact-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #4A5430;
  margin: 18px 0 7px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #C9CDB8;
  background-color: #F7F4EC;
  color: #2E3324;
  font-size: 15px;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 2px solid #6E7A3E;
  border-color: #6E7A3E;
}

.contact-form .btn-primary {
  margin-top: 22px;
  border: none;
  cursor: pointer;
}

.form-status {
  display: none;
  margin-top: 16px;
  padding: 12px 16px;
  background-color: #E9EBD9;
  border-left: 3px solid #6E7A3E;
  color: #3E4436;
  font-size: 14px;
}

.form-status.shown {
  display: block;
}

.form-status.error {
  border-left-color: #2E3324;
}

.contact-side .contact-card {
  background-color: #FFFFFF;
  border: 1px solid #E9EBD9;
  padding: 24px 26px;
  margin-bottom: 20px;
}

.contact-side .label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8B9076;
  margin-bottom: 6px;
}

.contact-side h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  color: #4A5430;
  margin-bottom: 8px;
}

.contact-side p,
.contact-side a {
  color: #3E4436;
  word-break: break-word;
}

.contact-side a:hover {
  color: #6E7A3E;
}

/* FAQ accordion */

.faq-band {
  padding: 70px 0 96px;
}

.faq-list {
  max-width: 860px;
  margin: 36px auto 0;
}

.faq-item {
  background-color: #FFFFFF;
  border: 1px solid #E9EBD9;
  margin-bottom: 14px;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 24px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #4A5430;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.faq-question .faq-icon {
  font-size: 20px;
  color: #6E7A3E;
  transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer p {
  padding: 0 24px 22px;
  color: #3E4436;
}

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

.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .hero-headline {
    font-size: 40px;
  }

  .ledger-row {
    grid-template-columns: 20px 62px 1fr;
  }

  .status-chip {
    grid-column: 3;
    justify-self: start;
  }

  .process-steps {
    grid-template-columns: 1fr 1fr;
  }

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

@media (max-width: 720px) {
  .nav-toggle {
    display: block;
  }

  .nav-row-1 {
    position: relative;
  }

  .nav-contact {
    display: none;
  }

  .nav-row-2 {
    display: none;
  }

  .nav-row-2.open {
    display: block;
    border-top: 1px solid #E9EBD9;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
    padding: 12px 24px 18px;
  }

  .hero-headline {
    font-size: 34px;
  }

  .stat-strip {
    flex-wrap: wrap;
  }

  .stat-item {
    flex: 1 1 45%;
    border-bottom: 1px solid #C9CDB8;
  }

  .stat-item:nth-child(2n) {
    border-right: none;
  }

  .metric-row {
    flex-wrap: wrap;
  }

  .metric {
    flex: 1 1 45%;
    border-bottom: 1px solid #EFF1DE;
  }

  .metric:nth-child(2n) {
    border-right: none;
  }

  .ledger-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .node-dot {
    display: none;
  }

  .row-num {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }

  .status-chip {
    grid-column: 1;
    justify-self: start;
  }

  .service-row {
    grid-template-columns: 60px 1fr;
    gap: 18px;
  }

  .statement p {
    font-size: 19px;
  }

  .metric-num {
    font-size: 44px;
  }
}

@media (max-width: 480px) {
  .process-steps {
    grid-template-columns: 1fr;
  }

  .brand-name {
    font-size: 18px;
  }

  .page-hero h1 {
    font-size: 34px;
  }

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

  .service-row .row-num {
    margin-top: 0;
  }
}