/*
Theme Name: TRG — Texas Rug Gallery
Theme URI: https://texasruggallery.com
Author: Texas Rug Gallery
Description: Standalone brand theme for Texas Rug Gallery — wholesale handcrafted rugs. Includes built-in Home, About, Collections and Contact page designs in the TRG palette — a light, cream-forward look with navy, terracotta and espresso accents.
Version: 1.2.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trg
*/

/* ============================================================
   DESIGN TOKENS — light-dominant. Cream is the canvas; navy /
   espresso / terracotta are accents (header, hero, footer, CTA).
   ============================================================ */
:root {
  --navy: #1b1c47;
  --navy-soft: #26285f;
  --cream: #fcf4e3; /* primary page background */
  --cream-soft: #fffdf7; /* cards / raised surfaces on light */
  --cream-sand: #f4e9d2; /* alternate light section */
  --cream-dim: #e7d9ba; /* hairlines / borders on light */
  --terracotta: #8f5337;
  --terra-bright: #a86440;
  --terra-deep: #743f27;
  --espresso: #2d1b18;
  --ink: #241f3d; /* body text on light */

  --bg: var(--cream);
  --bg-alt: var(--cream-sand);
  --surface: var(--cream-soft);
  --text: var(--ink);
  --text-strong: var(--navy);
  --text-muted: rgba(45, 27, 24, 0.66);
  --accent: var(--terracotta);
  --accent-hover: var(--terra-bright);
  --hairline: rgba(45, 27, 24, 0.13);

  /* On-dark sections (hero, page-hero, footer, CTA) */
  --on-dark: #fbf1da;
  --on-dark-muted: rgba(251, 241, 218, 0.66);
  --on-dark-line: rgba(251, 241, 218, 0.16);

  --maxw: 1200px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
h1,
h2,
h3,
h4 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text-strong);
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Shared ---------- */
.eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.eyebrow.center {
  justify-content: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.35s var(--ease);
}
.btn-primary {
  background: var(--accent);
  color: var(--cream-soft);
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
}
/* Ghost button: dark outline on light backgrounds by default… */
.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--hairline);
}
.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}
/* …and a light outline when it sits on a dark section. */
.hero .btn-ghost,
.page-hero .btn-ghost {
  color: var(--on-dark);
  border-color: var(--on-dark-line);
}
.hero .btn-ghost:hover,
.page-hero .btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent-hover);
}
.btn-dark {
  background: var(--navy);
  color: var(--on-dark);
}
.btn-dark:hover {
  background: var(--espresso);
  transform: translateY(-2px);
}

.section {
  padding: clamp(56px, 7vw, 104px) 0;
}

/* Visible by default — content must never be hidden if JS fails to run.
   The entrance animation only arms once <html> gets the `js` class. */
.reveal {
  opacity: 1;
  transform: none;
}
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}
.js .reveal.in {
  opacity: 1;
  transform: none;
}

.section-head {
  max-width: 620px;
  margin-bottom: 60px;
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
}
.section-head h2 {
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  margin: 18px 0 16px;
}
.section-head p {
  color: var(--text-muted);
}

/* ============================================================
   HEADER / NAV  — transparent over the hero, navy on scroll
   ============================================================ */
header.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition:
    background 0.4s var(--ease),
    padding 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
  padding: 24px 0;
  color: var(--on-dark);
}
header.site-header.scrolled {
  /* Transparent over the hero, then a solid navy bar once the user scrolls —
     keeps nav text crisp and legible (the faint frost read as "messed" on
     phones). A light blur stays for a premium edge. */
  background: rgba(27, 28, 71, 0.95);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  padding: 14px 0;
  box-shadow: 0 1px 0 var(--on-dark-line);
}
/* All pages share the same treatment: the header is transparent over the
   banner image and turns navy on scroll. Every template opens with a dark
   .page-hero banner, so the transparent bar always sits on a dark backdrop. */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav a,
.nav .nav-phone {
  color: var(--on-dark);
}
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo-mark {
  width: 50px;
  height: 50px;
  flex: none;
  border: 1.5px solid var(--accent);
  display: grid;
  place-items: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 1.45rem;
  color: var(--accent);
  border-radius: 3px;
}
.logo-text {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.05;
}
.logo-text small {
  display: block;
  font-family: "Jost", sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
/* Bundled brand logo image (header + footer) */
.logo--brand {
  gap: 0;
}
.logo-img {
  height: 52px;
  width: auto;
  display: block;
  transition: height 0.4s var(--ease);
}
.site-header.scrolled .logo-img {
  height: 42px;
}
.site-footer .logo-img {
  height: 58px;
}

/* Uploaded custom logo (Customizer → Site Identity) */
.logo--image .custom-logo-link {
  display: inline-flex;
  align-items: center;
}
.logo--image .custom-logo {
  height: 66px;
  width: auto;
  transition: height 0.4s var(--ease);
}
.site-header.scrolled .logo--image .custom-logo {
  height: 50px;
}
.site-footer .logo--image .custom-logo {
  height: 66px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
}
.nav-links a {
  font-size: 0.84rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}
.nav-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  /* Highlighted call CTA — terracotta pill that fills on hover. A subtle dark
     fill is kept by default so the "Call" label and number stay legible over
     light areas of the hero image (otherwise the cream text washes out). */
  color: var(--on-dark);
  background: rgba(27, 28, 71, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--accent);
  border-radius: 40px;
  padding: 9px 18px;
  transition:
    background 0.3s var(--ease),
    color 0.3s var(--ease);
}
.nav-phone:hover {
  background: var(--accent);
  color: var(--cream-soft);
}
.nav-phone strong {
  color: var(--accent);
  font-weight: 600;
}
.nav-phone:hover strong {
  color: var(--cream-soft);
}
.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.burger span {
  width: 24px;
  height: 2px;
  background: var(--on-dark);
  transition: 0.3s;
}

/* ============================================================
   HERO (home) + PAGE HERO (inner) — kept dark for premium feel
   ============================================================ */
.hero {
  position: relative;
  /* Just under a full viewport so the first line of stats peeks above the
     fold; the negative margin below pulls it up under the transparent header
     so nothing is clipped. */
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: center;
  color: var(--on-dark);
  /* Pull the hero up under the header so a transparent header overlays the
     rug image instead of sitting on a band above it. */
  margin-top: -95px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(27, 28, 71, 0.78) 0%,
      rgba(27, 28, 71, 0.66) 45%,
      rgba(45, 27, 24, 0.6) 100%
    ),
    url("assets/img/home-hero-v2.jpg") center bottom/cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--on-dark-line) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.4;
}
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
  /* Top padding clears the fixed header; keep the box short enough that the
     whole banner fits in one viewport without scrolling. */
  padding-block: 84px 36px;
}
.hero .eyebrow {
  justify-content: center;
}
.hero h1 {
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.08;
  margin: 12px 0 14px;
  color: var(--on-dark);
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero p {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--on-dark-muted);
  max-width: 560px;
  margin: 0 auto 22px;
  font-weight: 300;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.hero-scroll {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--accent), transparent);
}

/* Short viewports (e.g. laptops): tighten the hero further and drop the
   scroll cue so the full banner stays within one screen. */
@media (max-height: 760px) {
  .hero-inner {
    padding-block: 76px 28px;
  }
  .hero h1 {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    margin: 10px 0 12px;
  }
  .hero p {
    margin: 0 auto 18px;
  }
  .hero-scroll {
    display: none;
  }
}

.page-hero {
  position: relative;
  /* Centered banner that mirrors the homepage hero: a prominent rug image
     under the same gradient, with the transparent header overlaying it. */
  padding: 170px 0 92px;
  overflow: hidden;
  background: var(--navy);
  color: var(--on-dark);
  text-align: center;
  border-bottom: 1px solid var(--on-dark-line);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
}
/* Same gradient wash as the homepage hero (.hero-bg) so the image reads
   clearly while the light banner text stays legible. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(27, 28, 71, 0.78) 0%,
    rgba(27, 28, 71, 0.66) 45%,
    rgba(45, 27, 24, 0.6) 100%
  );
}
/* Dotted texture overlay, matching the homepage hero. */
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(var(--on-dark-line) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.4;
}
.page-hero .wrap {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
}
.page-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  margin: 18px 0 14px;
  color: var(--on-dark);
}
.page-hero p {
  color: var(--on-dark-muted);
  max-width: 560px;
  margin-inline: auto;
}
.crumbs {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.crumbs a:hover {
  color: var(--accent);
}

/* ============================================================
   STATS STRIP — now light (sand), 6 even cells
   ============================================================ */
.stats {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--hairline);
}
.stats .wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  padding-block: 56px;
}
.stat {
  text-align: center;
}
.stat .num {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}
.stat .label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 10px;
}
.stat:not(:nth-child(3n + 1)) {
  border-left: 1px solid var(--hairline);
}

/* ============================================================
   WHY TRG (light)
   ============================================================ */
.why {
  background: var(--bg);
  color: var(--text);
}
.why .section-head p {
  color: var(--text-muted);
}
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--cream-dim);
  border: 1px solid var(--cream-dim);
}
.feature {
  background: var(--cream-soft);
  padding: 40px 34px;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease);
}
.feature:hover {
  background: var(--navy);
  color: var(--on-dark);
}
.feature:hover h3 {
  color: var(--on-dark);
}
.feature .fi {
  width: 46px;
  height: 46px;
  color: var(--terracotta);
  margin-bottom: 22px;
  transition: color 0.4s var(--ease);
}
.feature:hover .fi {
  color: var(--accent-hover);
}
.feature h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}
.feature p {
  font-size: 0.93rem;
  color: var(--text-muted);
  transition: color 0.4s var(--ease);
}
.feature:hover p {
  color: var(--on-dark-muted);
}

/* ============================================================
   COLLECTIONS GRID (home) — light
   ============================================================ */
.collections {
  background: var(--bg);
}

/* Featured collection — leads the grid with full description + specs. */
.featured-col {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: stretch;
  gap: 0;
  margin-bottom: 26px;
  background: var(--cream-soft);
  border: 1px solid var(--cream-dim);
  border-radius: var(--radius);
  overflow: hidden;
}
.fc-media {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}
.fc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.featured-col:hover .fc-media img {
  transform: scale(1.05);
}
.fc-body {
  padding: clamp(28px, 3.4vw, 52px);
}
.fc-body .idx {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.fc-body h3 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  margin: 8px 0 14px;
}
.fc-body p {
  color: var(--text-muted);
  margin-bottom: 22px;
}
.fc-body .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  transition: gap 0.3s var(--ease);
}
.featured-col:hover .fc-body .more {
  gap: 14px;
}

.col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Per-card qualities shown on the overlay (home grid). */
.col-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.col-spec span {
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(27, 28, 71, 0.4);
  border: 1px solid var(--on-dark-line);
  backdrop-filter: blur(3px);
  border-radius: 40px;
  padding: 4px 11px;
}
.col-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 5;
  cursor: pointer;
  display: block;
}
.col-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.col-card:hover img {
  transform: scale(1.08);
}
.col-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(45, 27, 24, 0.85) 0%,
    rgba(45, 27, 24, 0.1) 55%,
    transparent 100%
  );
}
.col-meta {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 28px;
}
.col-meta .idx {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--accent);
}
.col-meta h3 {
  font-size: 1.9rem;
  margin-top: 4px;
  color: var(--on-dark);
}
.col-meta .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-top: 12px;
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s var(--ease);
}
.col-card:hover .col-meta .more {
  opacity: 1;
  transform: none;
}

/* ============================================================
   PROJECTS — light (sand)
   ============================================================ */
.projects {
  background: var(--bg-alt);
}
.proj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 16px;
  margin-top: 56px;
}
.proj {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
}
.proj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
  filter: saturate(0.96);
}
.proj:hover img {
  transform: scale(1.07);
}
.proj.tall {
  grid-row: span 2;
}
.proj.wide {
  grid-column: span 2;
}
.proj .tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(27, 28, 71, 0.72);
  backdrop-filter: blur(4px);
  padding: 7px 14px;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: 0.4s var(--ease);
}
.proj:hover .tag {
  opacity: 1;
  transform: none;
}
.proj-foot {
  text-align: center;
  margin-top: 50px;
}

/* ============================================================
   CTA BAND (terracotta) — kept
   ============================================================ */
.cta {
  background: var(--accent);
  color: var(--cream-soft);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    rgba(45, 27, 24, 0.18) 1px,
    transparent 1px
  );
  background-size: 22px 22px;
}
.cta .wrap {
  position: relative;
  z-index: 2;
}
.cta h2 {
  font-size: clamp(2.4rem, 5vw, 4rem);
  margin-bottom: 18px;
  color: var(--cream-soft);
}
.cta p {
  max-width: 540px;
  margin: 0 auto 36px;
  color: rgba(255, 246, 227, 0.9);
}
.cta .eyebrow {
  color: var(--espresso);
}
.cta .eyebrow::before {
  background: var(--espresso);
}
.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 80px);
  align-items: center;
}
.split.flip .split-media {
  order: 2;
}
.split-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 5 / 4;
}
.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split-body h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin: 16px 0 16px;
}
.about-intro {
  background: var(--bg);
  color: var(--text);
}
.about-intro .split-body p {
  color: var(--text-muted);
  margin-bottom: 16px;
}
/* Shift the crop so the seated figure on the chair sits centred. */
.about-intro .split-media img {
  object-position: 35% center;
}

/* "Why we exist" — readable pointer rows */
.exist-lead {
  font-size: 1.18rem;
  color: var(--text);
  font-weight: 400;
  margin-bottom: 26px;
}
.exist-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
/* White chips matching the "0 …" markup chips above. */
.exist-pillars span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--navy);
  background: var(--cream-soft);
  border: 1px solid var(--cream-dim);
  border-radius: 40px;
  padding: 8px 16px;
}
.exist-pillars span::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
}
.exist-stand {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
  border-left: 3px solid var(--accent);
  padding-left: 18px;
  margin-top: 4px;
}

.about-logo {
  background: var(--bg-alt);
}
.about-logo .split-body p {
  color: var(--text-muted);
  margin-bottom: 16px;
}
.logo-emblem {
  display: grid;
  place-items: center;
  aspect-ratio: 5 / 4;
  /* Dark brand ground for the white logo variant. */
  background: var(--espresso);
  border-radius: var(--radius);
  padding: clamp(28px, 6vw, 64px);
}
.logo-emblem img {
  width: 100%;
  max-width: 360px;
  height: auto;
  object-fit: contain;
}
.logo-emblem .logo-mark {
  width: 130px;
  height: 130px;
  font-size: 3.4rem;
  border-width: 2px;
}

.process {
  background: var(--bg);
}
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 56px;
}
.step {
  background: var(--cream-soft);
  border: 1px solid var(--cream-dim);
  border-radius: var(--radius);
  overflow: hidden;
}
.step-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.step-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.step:hover .step-media img {
  transform: scale(1.06);
}
.step-media .step-no {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 2;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--on-dark);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  line-height: 1;
}
.step-body {
  padding: 24px 24px 30px;
}
.step h3 {
  font-size: 1.5rem;
  margin: 0 0 8px;
}
.step p {
  font-size: 0.92rem;
  color: var(--text-muted);
}

.sustain {
  position: relative;
  background:
    linear-gradient(rgba(45, 27, 24, 0.86), rgba(27, 28, 71, 0.9)),
    url("assets/img/sustain-v4.jpg") center/cover fixed;
  color: var(--on-dark);
}
.sustain h2,
.sustain .section-head h2 {
  color: var(--on-dark);
}
.sustain .section-head p {
  color: var(--on-dark-muted);
}
.sustain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.sustain-card {
  background: rgba(251, 241, 218, 0.07);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  padding: 34px 30px;
  backdrop-filter: blur(3px);
}
.sustain-card .fi {
  width: 40px;
  height: 40px;
  color: var(--accent-hover);
  margin-bottom: 18px;
}
.sustain-card h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--on-dark);
}
.sustain-card p {
  font-size: 0.92rem;
  color: var(--on-dark-muted);
}

/* ============================================================
   COLLECTIONS PAGE — alternating rows (light)
   ============================================================ */
.collection-list {
  background: var(--bg);
}

/* Custom-rugs note banner */
.custom-note {
  background: var(--navy);
  color: var(--on-dark);
}
.custom-note .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-block: 26px;
  flex-wrap: wrap;
}
.custom-note .cn-ic {
  width: 46px;
  height: 46px;
  flex: none;
  border: 1px solid var(--on-dark-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.custom-note .cn-ic svg {
  width: 22px;
  height: 22px;
}
.custom-note h3 {
  font-size: 1.5rem;
  color: var(--on-dark);
  margin-bottom: 2px;
}
.custom-note p {
  color: var(--on-dark-muted);
  font-size: 0.94rem;
  max-width: 760px;
}
.custom-note p b {
  color: var(--accent-hover);
  font-weight: 500;
}

.collection-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 70px);
  border-bottom: 1px solid var(--hairline);
  scroll-margin-top: 90px;
}
.collection-row:last-child {
  border-bottom: 0;
}
.collection-row.flip .cr-media {
  order: 2;
}
/* Media column = two portrait slider panels side by side. */
.cr-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.rug-slider {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
}
/* Slider track fills its panel; slides cross-fade within it. */
.rs-track {
  position: absolute;
  inset: 0;
}
.rs-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease);
  pointer-events: none;
}
.rs-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Prev / next arrows — revealed on hover */
.rs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cream-soft);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.cr-media:hover .rs-arrow,
.rug-slider:focus-within .rs-arrow {
  opacity: 1;
}
.rs-arrow svg {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 3px rgba(27, 28, 71, 0.55));
}
.rs-prev {
  left: 14px;
}
.rs-next {
  right: 14px;
}

/* Dots */
.rs-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.rs-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(252, 244, 227, 0.5);
  box-shadow: 0 0 0 1px rgba(27, 28, 71, 0.15);
  cursor: pointer;
  transition:
    background 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.rs-dot.is-active {
  background: var(--cream-soft);
  transform: scale(1.35);
}
.cr-body .idx {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  text-transform: uppercase;
}
.cr-body h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  margin: 8px 0 14px;
}
.cr-body p {
  color: var(--text-muted);
  margin-bottom: 22px;
}
.cr-spec {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cr-spec span {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--cream-soft);
  border: 1px solid var(--cream-dim);
  border-radius: 40px;
  padding: 6px 14px;
}

/* ============================================================
   CONTACT PAGE — light
   ============================================================ */
.contact {
  background: var(--bg);
}
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: start;
}
.contact-form {
  background: var(--cream-soft);
  border: 1px solid var(--cream-dim);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 46px);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-field {
  margin-bottom: 18px;
}
.form-field label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.form-field label .req {
  color: var(--accent);
}
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: #fffefb;
  border: 1px solid var(--cream-dim);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--ink);
  font-family: "Jost", sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.3s var(--ease);
}
.form-field select {
  /* Match the height of the text inputs and keep the native caret usable. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238f5337' stroke-width='1.5' d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--accent);
}
.form-field textarea {
  min-height: 130px;
  resize: vertical;
}
.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 10px;
}
.form-alert {
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 22px;
  font-size: 0.9rem;
}
.form-alert.ok {
  background: rgba(143, 83, 55, 0.14);
  border: 1px solid var(--accent);
  color: var(--terra-deep);
}
.form-alert.err {
  background: rgba(180, 60, 60, 0.12);
  border: 1px solid #b43c3c;
  color: #8c2b2b;
}

.contact-info .ci {
  display: flex;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
}
.contact-info .ci:first-child {
  padding-top: 0;
}
.contact-info .ci-ic {
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.contact-info .ci-ic svg {
  width: 18px;
  height: 18px;
}
.contact-info h4 {
  font-family: "Jost", sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
  font-weight: 500;
}
.contact-info p,
.contact-info a {
  color: var(--ink);
  font-size: 0.98rem;
}
.contact-info a:hover {
  color: var(--accent);
}

/* Map embed */
.contact-map {
  margin-top: 36px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--cream-dim);
}
.contact-map iframe {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
  filter: saturate(0.95);
}

/* ============================================================
   FOOTER — navy anchor
   ============================================================ */
footer.site-footer {
  background: var(--navy);
  color: var(--on-dark);
  padding-top: 80px;
}
.site-footer .logo-text,
.site-footer .logo-text small {
  color: var(--on-dark);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.4fr;
  gap: 50px;
  padding-bottom: 60px;
}
.foot-about p {
  color: var(--on-dark-muted);
  font-size: 0.92rem;
  margin-top: 20px;
  max-width: 340px;
}
.foot-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
  border: 1px solid var(--accent);
  border-radius: 40px;
  padding: 7px 16px;
}
.foot-badge svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
}
.foot h4 {
  font-family: "Jost", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  font-weight: 500;
}
.foot ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.foot ul a,
.foot-contact li {
  font-size: 0.92rem;
  color: var(--on-dark-muted);
  transition: color 0.3s;
}
.foot ul a:hover {
  color: var(--accent);
}
.foot-contact {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.foot-contact li {
  display: flex;
  gap: 12px;
}
.foot-contact .k {
  color: var(--accent);
  flex: none;
}
.socials {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}
.socials a {
  width: 38px;
  height: 38px;
  border: 1px solid var(--on-dark-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-dark);
  transition: 0.3s var(--ease);
}
.socials a:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.socials svg {
  width: 16px;
  height: 16px;
}
.foot-bottom {
  border-top: 1px solid var(--on-dark-line);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--on-dark-muted);
}

/* ============================================================
   ELEMENTOR FOOTER (#colophon — built with Header Footer Elementor)
   It sits on a dark background but inherits the light theme's dark
   body text, which makes it invisible. Force readable light text.
   ============================================================ */
#colophon,
#colophon p,
#colophon li,
#colophon span,
#colophon a,
#colophon .elementor-heading-title,
#colophon .elementor-icon-list-text {
  color: var(--on-dark);
}
#colophon a:hover {
  color: var(--accent);
}
#colophon .elementor-icon-list-icon svg,
#colophon .elementor-icon-list-icon i {
  color: var(--accent);
}

/* ============================================================
   BACK TO TOP — floating
   ============================================================ */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 60;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-dark);
  border: 1px solid var(--accent);
  box-shadow: 0 8px 24px rgba(27, 28, 71, 0.28);
  /* Always visible — a persistent floating "back to top" button on every page. */
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.35s var(--ease),
    transform 0.35s var(--ease),
    background 0.3s var(--ease);
}
/* Kept for the scroll script; base state is already visible. */
.to-top.show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.to-top:hover {
  background: var(--accent);
  transform: translateY(-3px);
}
.to-top svg {
  width: 20px;
  height: 20px;
}

/* ============================================================
   CLIENTS — logo wall (home)
   ============================================================ */
.clients {
  /* Sand band between the two cream sections (Collections / Why) so the
     three consecutive light sections read as distinct, not one long block. */
  background: var(--bg-alt);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.client-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 56px;
  background: var(--cream-dim);
  border: 1px solid var(--cream-dim);
}
.client-logo {
  background: var(--cream-soft);
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 22px;
  transition: background 0.4s var(--ease);
}
.client-logo:hover {
  background: var(--cream);
}
.client-logo img {
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition:
    filter 0.3s var(--ease),
    opacity 0.3s var(--ease);
}
.client-logo:hover img {
  filter: none;
  opacity: 1;
}
/* Wordmark fallback shown until a real logo image is supplied. */
.client-logo span {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  line-height: 1.2;
  color: var(--navy);
  opacity: 0.72;
  transition:
    color 0.3s var(--ease),
    opacity 0.3s var(--ease);
}
.client-logo:hover span {
  color: var(--accent);
  opacity: 1;
}

/* ============================================================
   ABOUT — founder ("The Eye Behind the Collection")
   ============================================================ */
.founder {
  background: var(--bg);
}
.founder .split-media {
  aspect-ratio: 4 / 5;
}
.founder-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: rgba(27, 28, 71, 0.78);
  backdrop-filter: blur(4px);
  padding: 8px 14px;
  border-radius: 40px;
}
.founder-badge svg {
  width: 15px;
  height: 15px;
}
.founder-lead {
  font-size: 1.18rem;
  color: var(--text);
  margin: 4px 0 22px;
}
.point-list {
  list-style: none;
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
}
.point-list li {
  position: relative;
  padding-left: 30px;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.5;
}
.point-list li strong {
  color: var(--navy);
  font-weight: 600;
}
.point-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--accent);
  border-radius: 50%;
}
.founder-close {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  border-left: 3px solid var(--accent);
  padding-left: 18px;
}

/* ============================================================
   ABOUT — textile fluency ("We Know How They're Made")
   ============================================================ */
.textile {
  background: var(--bg-alt);
}
.textile-media {
  margin-top: 52px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 24 / 7;
}
.textile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.textile-media:hover img {
  transform: scale(1.04);
}
.know-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 52px;
}
.know-card {
  background: var(--cream-soft);
  border: 1px solid var(--cream-dim);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.know-card h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 1.45rem;
  margin-bottom: 8px;
}
.know-card h3 .n {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.7rem;
  color: var(--accent);
}
.know-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.textile-close {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  max-width: 860px;
  margin: 44px auto 0;
  text-align: center;
}

/* ============================================================
   SHOWROOM / VISIT (home)
   ============================================================ */
.showroom {
  background: var(--bg-alt);
  border-top: 1px solid var(--hairline);
}
.showroom-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.sr-shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
}
.sr-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease);
}
.sr-shot:hover img {
  transform: scale(1.06);
}

/* Honeypot — visually hidden, kept in the layout flow for bots. */
.trg-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .features,
  .col-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .proj-grid,
  .steps,
  .sustain-grid,
  .know-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .client-logos {
    grid-template-columns: repeat(3, 1fr);
  }
  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stats .wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }
  .stat:not(:nth-child(3n + 1)) {
    border-left: 0;
  }
  .stat:not(:nth-child(2n + 1)) {
    border-left: 1px solid var(--hairline);
  }
  .split,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .split.flip .split-media {
    order: 0;
  }
  .collection-row,
  .collection-row.flip {
    grid-template-columns: 1fr;
  }
  .collection-row.flip .cr-media {
    order: 0;
  }
  /* Touch devices have no hover — keep slider arrows visible. */
  .rs-arrow {
    opacity: 1;
  }
}
/* Collapse the inline nav to a burger menu early enough that the links and
   call button never overflow the bar on mid-width desktops/laptops/tablets.
   Above 768px the bar can't fit the logo + 4 links + call pill side by side. */
@media (max-width: 1024px) {
  .nav-links,
  .nav-phone {
    display: none;
  }
  .burger {
    display: flex;
  }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(27, 28, 71, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 24px;
    gap: 22px;
    border-top: 1px solid var(--on-dark-line);
  }
  .nav-links.open a {
    /* Comfortable tap target inside the menu. */
    padding: 6px 0;
  }
  /* Keep the inline header CTA from crowding the burger. */
  .nav-cta {
    gap: 12px;
  }
}
@media (max-width: 768px) {
  /* Slim the header bar and logo so it stays a compact strip on phones. */
  header.site-header {
    padding: 14px 0;
  }
  .logo-img {
    height: 44px;
  }
  /* Hero: anchor content to the top and clear the fixed header. When the
     banner was vertically centered, the tall text overflowed UPWARD behind
     the header and got clipped on phones. Drop the negative pull-up margin
     and pad the top enough to sit below the header with breathing room. */
  .hero {
    margin-top: 0;
    min-height: calc(100svh - 64px);
    align-items: flex-start;
  }
  .hero-inner {
    padding-block: 104px 48px;
  }
  /* background-attachment: fixed is janky / often broken on iOS Safari —
     fall back to a normal scrolling background on mobile. */
  .sustain {
    background-attachment: scroll;
  }
  /* Lighten the inner-page hero so it isn't a tall navy band on phones. */
  .page-hero {
    padding: 116px 0 56px;
  }
  /* Stack the featured collection (media over body) on phones/tablets. */
  .featured-col {
    grid-template-columns: 1fr;
  }
  .fc-media {
    min-height: 240px;
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 560px) {
  .features,
  .col-grid,
  .proj-grid,
  .foot-grid,
  .steps,
  .sustain-grid,
  .showroom-grid,
  .know-grid {
    grid-template-columns: 1fr;
  }
  .client-logos {
    grid-template-columns: repeat(2, 1fr);
  }
  .stats .wrap {
    grid-template-columns: 1fr 1fr;
  }
  .proj.wide {
    grid-column: span 1;
  }
  .proj.tall {
    grid-row: span 1;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  /* Stack the CTA band buttons full-width too, matching the hero. */
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }
  .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Small phones — reclaim side padding and tighten heroes/headers. */
@media (max-width: 480px) {
  .wrap {
    padding-inline: 18px;
  }
  .stats .wrap {
    grid-template-columns: 1fr;
  }
  .stat:not(:nth-child(2n + 1)) {
    border-left: 0;
  }
  .logo-img {
    height: 44px;
  }
  .site-header.scrolled .logo-img {
    height: 38px;
  }
  .page-hero {
    padding: 104px 0 48px;
  }
  .col-meta,
  .step-body {
    padding: 22px;
  }
  /* Keep the floating back-to-top clear of the screen edge. */
  .to-top {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}