/* ============================================
   FPL – Furniture Pros Logistics Solution
   Main Stylesheet
   ============================================

   TABLE OF CONTENTS
   -----------------
   1.  Reset & Base
   2.  CSS Variables
   3.  Navigation
   4.  Mobile Menu
   5.  Hero
   6.  Buttons
   7.  Stats Strip
   8.  Section Base
   9.  About
   10. Services
   11. Why Us
   12. Savings CTA Banner
   13. Custom Crating
   14. Contact
   15. WMS CTA
   16. Footer
   17. Responsive — Tablet  (max-width: 900px)
   18. Responsive — Mobile  (max-width: 640px)
   ============================================ */

/* ============================================
   1. Reset & Base
   ============================================ */

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

html {
  scroll-behavior: smooth;
  /* Prevents layout shift when a scrollbar appears */
  scrollbar-gutter: stable;
  /* 新增：让所有锚点跳转自动留出导航栏的高度，防止被遮挡 */
  scroll-padding-top: calc(var(--nav-height) + 2rem);
}

body {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
  /* Sharper font rendering on Mac / iOS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

img {
  display: block;
  max-width: 100%;
  height: auto; /* Prevents distortion inside flex / grid */
}

/* ============================================
   2. CSS Variables
   ============================================ */

:root {
  /* Brand colors */
  --navy: #0b1f3a;
  --navy2: #132947;
  --blue: #1a5fa8;
  --blue2: #2272c3;
  --sky: #e8f3ff;
  --orange: #e8611a;
  --orange2: #f07830;
  --gray: #f4f6f9;
  --muted: #6b7a8e;
  --text: #1c2b3a;
  --border: rgba(26, 95, 168, 0.12);

  /* Radii */
  --radius: 10px;
  --radius-lg: 14px;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 68px;
}

/* ============================================
   3. Navigation
   ============================================ */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(11, 31, 58, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari */
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s;
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  height: var(--nav-height);
}

.nav-logo img {
  height: 44px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: #fff;
}

/*
  Use higher specificity (.nav-links .nav-cta) instead of !important
  so overrides stay clean and predictable.
*/
.nav-links .nav-cta {
  background: var(--orange);
  color: #fff;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  transition: background 0.2s;
}

.nav-links .nav-cta:hover {
  background: var(--orange2);
  color: #fff;
}

/* Hamburger — styled as <button> for accessibility */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition:
    transform 0.3s,
    opacity 0.3s;
}

/* ============================================
   4. Mobile Menu
   ============================================ */

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--navy2);
  padding: 1rem 2rem 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-menu a {
  color: rgba(255, 255, 255, 0.8);
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.2s;
}

.mobile-menu a:last-child {
  border-bottom: none;
}

.mobile-menu a:hover {
  color: #fff;
}

/* "Get a Free Quote" CTA link in mobile menu */
.mobile-menu-cta {
  color: var(--orange2);
  font-weight: 700;
}

.mobile-menu.open {
  display: flex;
}

/* ============================================
   5. Hero
   ============================================ */

.hero {
  min-height: 100vh;
  /* Gradient fallback — background-image set via inline style in HTML */
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-height);
}

/* Semi-transparent dark overlay on top of the background image */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 31, 58, 0.82) 0%,
    rgba(13, 42, 80, 0.75) 60%,
    rgba(25, 61, 110, 0.7) 100%
  );
}

/* Diagonal white accent at the bottom */
.hero::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 100px;
  background: #fff;
  clip-path: polygon(0 100%, 100% 100%, 100% 40%, 0 100%);
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2; /* sits above both ::before and ::after */
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 2rem 8rem;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}

/* Orange dot inside the badge */
.hero-badge span {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

.hero h1 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.hero h1 em {
  color: var(--orange2);
  font-style: normal;
}

.hero p {
  max-width: 560px;
  margin: 0 auto 2.5rem;
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   6. Buttons
   ============================================ */

/* Shared base for all button variants */
.btn-primary,
.btn-outline,
.btn-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.15s;
}

.btn-primary {
  background: var(--orange);
  color: #fff;
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--orange2);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: #fff;
  font-weight: 500;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.btn-outline:hover {
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}

.btn-white {
  background: #fff;
  color: var(--orange);
  font-weight: 700;
  margin-top: 1.5rem;
}

.btn-white:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}

/* ============================================
   7. Stats Strip
   ============================================ */

.stats-strip {
  background: var(--navy);
  padding: 2.5rem 2rem;
}

.stats-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--orange2);
  line-height: 1;
}

.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ============================================
   7.5 Trust Strip
   ============================================ */
.trust-strip {
  background: #fff;
  padding: 2.5rem 2rem 1.5rem; /* 稍微增加了底部内边距，让图片有呼吸感 */
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.trust-strip p {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 2rem; /* 拉开标题和图片的距离 */
}

.trust-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem; /* 图片之间需要更大的间距 */
  flex-wrap: wrap;
}

/* 针对图片的专业化处理 */
.trust-logos img {
  height: 36px; /* 统一高度，宽度自适应 */
  width: auto;
  object-fit: contain;
  /* 核心技巧：默认全灰且半透明，不喧宾夺主 */
  filter: grayscale(100%) opacity(50%);
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); /* 平滑的过渡动画 */
  cursor: default;
}

/* 鼠标悬停时：恢复全彩和100%不透明度，并微微放大 */
.trust-logos img:hover {
  filter: grayscale(0%) opacity(100%);
  transform: scale(1.08);
}

/* 移动端适配：缩小高度和间距 */
@media (max-width: 640px) {
  .trust-logos { 
    gap: 2rem; 
  }
  .trust-logos img { 
    height: 24px; 
  }
}

/* ============================================
   8. Section Base
   ============================================ */

section {
  padding: 6rem 2rem;
}

.section-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.section-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blue);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: "Barlow Condensed", sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 1rem;
}

.section-sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 560px;
}

/* ============================================
   9. About
   ============================================ */

.about {
  background: #fff;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-img {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.about-img img {
  width: 100%;
  height: 90%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Orange decorative block behind the photo */
.about-accent {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 160px;
  height: 160px;
  background: var(--orange);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.about-checkmarks {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
}

.check-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
}

/* ============================================
   10. Services
   ============================================ */

.services {
  background: var(--gray);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.service-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

.service-card:hover {
  box-shadow: 0 12px 36px rgba(26, 95, 168, 0.1);
  transform: translateY(-3px);
}

/* 新增：Hover 时图标微动，增加引导点击的感觉 */
.service-card:hover .service-icon {
  transform: scale(1.08);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Colored top-border accent */
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--blue);
}

.service-card.orange::before {
  background: var(--orange);
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--sky);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 1.25rem;
  transition: transform 0.3s; /* 确保有动画过渡 */
}

.service-card.orange .service-icon {
  background: #fef0e7;
  color: var(--orange);
}

.service-card h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--navy);
  margin-bottom: 0.75rem;
}

.service-card p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 1rem;
}

.tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--blue);
  background: var(--sky);
  padding: 3px 10px;
  border-radius: 100px;
}

.tag.orange-tag {
  color: var(--orange);
  background: #fef0e7;
}

/* ============================================
   11. Why Us
   ============================================ */

.why {
  background: var(--navy);
  padding: 6rem 2rem;
}

/* Override light-mode section defaults for dark background */
.why .section-tag {
  color: rgba(255, 255, 255, 0.5);
}

.why .section-title {
  color: #fff;
}

.why .section-sub {
  color: rgba(255, 255, 255, 0.6);
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.why-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: background 0.2s;
}

.why-card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.why-num {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 3rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.why-card h3 {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
}

.why-card p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.7;
}

/* ============================================
   12. Savings CTA Banner
   ============================================ */

.savings-cta {
  background: var(--orange);
  padding: 5rem 2rem;
}

.savings-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}

.savings-text h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: 0.75rem;
}

.savings-text p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  max-width: 480px;
}

.savings-badge {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  text-align: center;
}

.savings-pct {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 4rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.savings-pct-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ============================================
   13. Custom Crating
   ============================================ */

.crating {
  background: #fff;
}

.crating-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.crating-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

.crating-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.crating-item:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 16px rgba(26, 95, 168, 0.08);
}

.crating-icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--sky);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.crating-item h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 4px;
}

.crating-item p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.crating-img img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* ============================================
   14. Contact
   ============================================ */

.contact {
  background: var(--gray);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Spacing below the sub-paragraph in the contact column */
.contact-sub {
  margin-bottom: 2.5rem;
}

.contact-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--sky);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.contact-block strong {
  display: block;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}

.contact-block span {
  color: var(--muted);
  font-size: 14px;
}

.contact-block a {
  display: block;
  color: var(--blue);
  font-size: 15px;
  transition: color 0.2s;
}

.contact-block a:hover {
  color: var(--blue2);
}

/* Form card */
.contact-form-card {
  background: #fff;
  border-radius: 16px;
  padding: 2.5rem;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(11, 31, 58, 0.06);
}

.contact-form-card h3 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1rem;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer; /* Reinforces the label–input link */
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  border: 1.5px solid #dde1e7;
  border-radius: 8px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  appearance: auto; /* Keep native select arrow */
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 95, 168, 0.12);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-submit {
  width: 100%;
  padding: 13px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
}

.form-submit:hover {
  background: var(--blue2);
  transform: translateY(-1px);
}

.form-submit:active {
  transform: translateY(0);
}

/* ============================================
   15. WMS CTA
   ============================================ */

.wms-cta {
  background: #fff;
  padding: 4rem 2rem;
  text-align: center;
  border-top: 1px solid var(--border);
}

.wms-cta h2 {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

.wms-cta p {
  color: var(--muted);
  margin-bottom: 1.5rem;
}

/* ============================================
   16. Footer
   ============================================ */

footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.6);
  padding: 3rem 2rem;
}

.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.footer-logo img {
  height: 38px;
  width: auto;
  opacity: 0.85;
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.footer-links a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #fff;
}

.footer-copy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.35);
}

/* ============================================
   17. Responsive — Tablet (max-width: 900px)
   ============================================ */

@media (max-width: 900px) {
  .about-grid,
  .crating-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

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

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

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

  .savings-inner {
    flex-direction: column;
    text-align: center;
  }

  /* Shorter images on tablet */
  .about-img img,
  .crating-img img {
    height: 280px;
  }

  /* Hide the decorative orange block — it clips on narrow screens */
  .about-accent {
    display: none;
  }
}

/* ============================================
   18. Responsive — Mobile (max-width: 640px)
   ============================================ */

@media (max-width: 640px) {
  /* Switch to hamburger menu */
  .nav-links {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

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

  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  /* Stack name fields vertically */
  .form-row {
    grid-template-columns: 1fr;
  }

  section {
    padding: 4rem 1.25rem;
  }

  .hero-inner {
    padding: 3rem 1.25rem 6rem;
  }

  /* Stack footer items centrally on small screens */
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}