/* ==========================================================================
   SQUARED — the site's one visual system.

   Loaded after each page's inline <style>, so it wins ties on source order
   and becomes the single source of truth for shape, spacing and type.

   THESIS: the old pages were soft-cornered and inconsistent — 15 different
   corner radii, four button shapes, shadows at five blur values. Irregularity
   reads as carelessness. This system replaces all of it with one square
   language: a 3px corner everywhere, one 8pt spacing scale, one type scale,
   one border, one shadow. Structure is carried by defined 1px edges rather
   than by blur, because a square box needs a crisp edge to look deliberate.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens */

:root {
  /* Shape — one corner for the whole site. Not 0: a hairline softening reads
     as machined rather than unfinished, and survives antialiasing. */
  --r: 3px;
  --r-sq: 0px;

  /* Spacing — 8pt scale. Every gap, pad and margin below comes from here. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  /* The rail: one left edge for the whole site. Nav, hero, body and footer
     all start here, so nothing drifts by 16px between sections. */
  --measure: 1200px;
  --rail: max(var(--s5), calc((100% - var(--measure)) / 2));

  /* Brand — the rose/brass commitment is kept; values are tuned for contrast
     on white, since the originals failed at small sizes. */
  --primary-dark: #a82e50;
  --primary: #c4456a;
  --primary-light: #e87fa4;
  --accent: #b07c3e;
  --accent-dark: #8f6330;
  --accent-light: #e8c9a0;

  /* Ground & ink */
  --bg: #f6f2ec;
  --gray-bg: #fbf8f4;
  --surface: #ffffff;
  --text-dark: #2e2620;
  --text-medium: #6b594b;
  --text-light: #857365;
  --border-light: #e3dad0;
  --line: #ded4c8;
  --line-strong: #2e2620;

  /* One shadow, one hover shadow. Flat and offset — a square box sits on the
     page, it does not float in a halo. */
  --shadow: 0 1px 0 rgba(46, 38, 32, 0.04);
  --shadow-lift: 6px 6px 0 rgba(46, 38, 32, 0.07);

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-text: "Inter", "Segoe UI", sans-serif;

  --t-hero: clamp(2.2rem, 5.2vw, 3.4rem);
  --t-h1: clamp(1.9rem, 4vw, 2.6rem);
  --t-h2: clamp(1.5rem, 2.6vw, 1.95rem);
  --t-h3: 1.15rem;
  --t-h4: 1rem;
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.75rem;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 140ms;
}

/* ------------------------------------------------------------------- base */

* {
  font-family: var(--font-text);
}

body {
  background: var(--bg);
  color: var(--text-dark);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
.logo,
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-dark);
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }

p { color: var(--text-medium); }

a { color: var(--primary-dark); }

/* Every corner on the site, in one rule. Anything that opted into a pill, a
   blob or a disc is brought back to the system corner. */
*,
*::before,
*::after {
  border-radius: var(--r);
}

/* Elements that must stay edge-to-edge with their container. */
.navbar,
.hero,
.page-hero,
.page-header,
.footer,
.modal,
.hero::before,
.footer::before,
.section-title::after,
.category-header h2::after,
.footer-col h4::after,
.nav-links a.active::after,
body {
  border-radius: 0;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--gray-bg); }
::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

::selection {
  background: var(--primary);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- the grid */

.container {
  max-width: none;
  margin: 0 auto;
  padding: var(--s7) var(--rail);
}

/* Full-bleed bands share the rail, so their content aligns with the body
   above and below them rather than sitting on its own inset. */
.navbar,
.hero,
.page-hero,
.page-header,
.footer {
  padding-left: var(--rail);
  padding-right: var(--rail);
}

/* One gap for every grid on the site. Cards butt into a visible column
   rhythm rather than drifting at 2rem here and 3rem there. */
.services-grid,
.testimonials-grid,
.team-grid,
.values-grid,
.store-grid,
.process-grid,
.faq-grid,
.footer-grid,
.stats {
  display: grid;
  gap: var(--s5);
  margin: var(--s6) 0;
}

.services-grid,
.testimonials-grid,
.team-grid,
.values-grid,
.faq-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.store-grid,
.process-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

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

/* ----------------------------------------------------------------- navbar */

.navbar {
  padding-top: var(--s4);
  padding-bottom: var(--s4);
  background: rgba(246, 242, 236, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  gap: var(--s4);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--text-dark);
  text-transform: none;
}

.logo span { color: var(--primary-dark); }

.nav-links { gap: var(--s5); }

.nav-links a {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--text-medium);
  padding: var(--s2) 0;
  transition: color var(--fast) var(--ease);
}

.nav-links a:hover,
.nav-links a.active { color: var(--text-dark); }

.nav-links a.active::after {
  height: 2px;
  bottom: 0;
  background: var(--primary);
}

.hamburger span {
  background: var(--text-dark);
  border-radius: 0;
  height: 2px;
}

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

/* Four button classes existed with four different shapes and weights. They
   are one control now, in two ranks: solid for the page's primary action,
   outlined for everything else. Equal visual weight across equal actions is
   the clearest signal that the site was designed rather than assembled. */

.btn,
.btn-login,
.btn-signup,
.btn-submit,
.btn-service,
.btn-contact,
.btn-white {
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: var(--s3) var(--s5);
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--fast) var(--ease),
    color var(--fast) var(--ease), border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  line-height: 1.4;
}

/* Solid */
.btn-signup,
.btn-submit,
.btn-service,
.btn-contact {
  background: var(--primary-dark);
  color: #fff;
  border-color: var(--primary-dark);
}

.btn-signup:hover,
.btn-submit:hover,
.btn-service:hover,
.btn-contact:hover {
  background: var(--text-dark);
  border-color: var(--text-dark);
  color: #fff;
  transform: none;
  box-shadow: var(--shadow-lift);
}

/* Outlined */
.btn-login {
  background: transparent;
  color: var(--text-dark);
  border: 1px solid var(--line-strong);
}

.btn-login:hover {
  background: var(--text-dark);
  color: #fff;
}

/* On dark/branded ground */
.btn,
.btn-white {
  background: #fff;
  color: var(--text-dark);
  border-color: #fff;
  padding: var(--s4) var(--s6);
}

.btn:hover,
.btn-white:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
  transform: none;
  box-shadow: none;
}

.btn-submit { width: 100%; }

/* Buttons sitting on the dark bands. Matched to the same specificity as the
   page rules they replace, so the light-on-dark action looks identical
   whether it sits in the hero, a CTA band or a legal page's footer. */
.cta-section .btn,
.terms-cta .btn,
.privacy-cta .btn,
.cta-section .btn-white,
.hero .btn {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid #fff;
  margin-top: var(--s5);
}

.cta-section .btn:hover,
.terms-cta .btn:hover,
.privacy-cta .btn:hover,
.cta-section .btn-white:hover,
.hero .btn:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.hero .btn { margin-top: 0; }

/* The large action is one size everywhere. Three pages had set their own
   vertical padding on it (16px, 14.4px, 12.8px), which is exactly the kind
   of drift nobody reports and everybody feels. */
.btn,
.btn-white,
.cta-section .btn,
.cta-banner .btn-white,
.cta-banner .btn-contact,
.terms-cta .btn,
.privacy-cta .btn,
.hero .btn {
  padding: var(--s4) var(--s6);
}

/* ------------------------------------------------------------------- hero */

.hero,
.page-hero,
.page-header {
  background: var(--text-dark);
  color: #fff;
  padding-top: var(--s9);
  padding-bottom: var(--s9);
  border-bottom: 1px solid var(--text-dark);
  text-align: left;
  overflow: hidden;
}

/* The wave svg is replaced by a square grid rule — the texture should agree
   with the shape language, not fight it. */
.hero::before,
.page-hero::before,
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.07) 1px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 1;
  border-radius: 0;
}

.hero-content,
.page-hero > *,
.page-header > * {
  position: relative;
  z-index: 1;
}

.hero h1,
.page-hero h1,
.page-header h1 {
  font-size: var(--t-hero);
  color: #fff;
  margin-bottom: var(--s4);
  max-width: 18ch;
}

.hero p,
.page-hero p,
.page-header p {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 var(--s6);
  max-width: 62ch;
  margin-left: 0;
}

/* The floating crown becomes a square plate — a bordered tile, not an
   animated ornament. */
.hero-icon {
  font-size: 1.5rem;
  color: var(--accent-light);
  animation: none;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  margin-bottom: var(--s5);
}

.page-hero i,
.page-header i { color: var(--accent-light); }

.last-updated,
.effective-date {
  display: inline-block;
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: var(--s2) var(--s3);
  background: none;
}

/* --------------------------------------------------------- section titles */

/* Section headings, whichever wrapper they sit in. The page stylesheets each
   styled their own — red here, centred there, a 60px bar in one and a 70px
   bar in the next. One heading treatment now, at a specificity that beats
   those per-section rules. */
.section-title,
.category-header h2,
.story-section h2,
.values-section h2,
.leadership-section h2,
.store-section h2,
.process-section h2,
.faq-section h2,
.mv-section h2,
.contact-info h2,
.contact-form-card h2,
.terms-content h2.section-title,
.privacy-content h2.section-title {
  font-size: var(--t-h2);
  color: var(--text-dark);
  text-align: left;
  margin: 0 0 var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  display: block;
}

.section-title::after,
.category-header h2::after,
.story-section h2::after,
.values-section h2::after,
.leadership-section h2::after,
.store-section h2::after,
.process-section h2::after,
.faq-section h2::after,
.mv-section h2::after,
.contact-info h2::after,
.contact-form-card h2::after {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: var(--primary);
  margin: var(--s4) 0 0;
  border-radius: 0;
  position: static;
}

.category-header { text-align: left; }

/* ------------------------------------------------------------------ cards */

/* Every card on the site is this one surface. The differences that used to
   exist between them — radius, shadow blur, border presence, padding — were
   not carrying meaning, only noise. */
.service-card,
.testimonial-card,
.team-card,
.mv-card,
.faq-item,
.store-item,
.value-card,
.info-item,
.stat-item,
.process-step,
.cta-banner,
.about-grid,
.contact-form-card,
.business-hours,
.map-placeholder,
.privacy-sidebar,
.terms-sidebar,
.service-category {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--s5);
  transition: border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.service-card,
.mv-card,
.cta-banner,
.about-grid,
.contact-form-card {
  padding: var(--s6);
}

/* One hover, everywhere: the edge sharpens and the box takes the offset
   shadow. No scale, no lift, no per-card variation. */
.service-card:hover,
.testimonial-card:hover,
.team-card:hover,
.mv-card:hover,
.faq-item:hover,
.store-item:hover,
.value-card:hover,
.info-item:hover,
.stat-item:hover,
.process-step:hover {
  transform: none;
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lift);
}

/* Card icons become square tiles rather than loose glyphs, so the top-left
   of every card starts on the same anchor. */
.service-card > i,
.mv-card > i,
.value-card > i,
.stat-item > i,
.store-item > i,
.info-item > i,
.map-placeholder > i {
  font-size: 1.15rem;
  color: var(--primary-dark);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin: 0 0 var(--s4);
}

.service-card,
.mv-card,
.value-card,
.stat-item,
.store-item,
.team-card,
.testimonial-card { text-align: left; }

/* Icons inside body copy, lists and headings are glyphs, not tiles — only
   the card's own leading icon gets the square plate. */
.service-features li i,
.faq-item h4 i,
.info-detail i,
.business-hours i,
p i,
li i,
h3 i,
h4 i,
a i,
button i,
.btn i,
.btn-submit i,
.btn-service i,
.btn-contact i {
  width: auto;
  height: auto;
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: var(--primary-dark);
}

.service-features {
  list-style: none;
  padding-left: 0;
}

.service-features li {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

.service-card h3,
.mv-card h3,
.value-card h3,
.team-card h3,
.store-item h3 {
  font-size: var(--t-h3);
  color: var(--text-dark);
  margin-bottom: var(--s2);
}

.service-card p,
.mv-card p,
.value-card p,
.faq-item p,
.store-item p {
  font-size: var(--t-small);
  color: var(--text-medium);
  margin: 0;
}

/* Figures read as data: display face, tabular, aligned down a column. */
.stat-item h3,
.process-step .step-number {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--text-dark);
}

.stat-item h3 {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: var(--s2);
}

.stat-item p,
.team-card .position {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin: 0;
}

.stat-item {
  background: var(--gray-bg);
  padding: var(--s5);
}

/* Testimonials: the quote is the content, the mark is not. */
.testimonial-card {
  border-top: 1px solid var(--line);
  border-left: 3px solid var(--primary);
}

.testimonial-card i.fa-quote-left {
  color: var(--line);
  opacity: 1;
  font-size: 1.25rem;
  margin-bottom: var(--s3);
}

.testimonial-card p {
  font-style: normal;
  font-size: var(--t-body);
  color: var(--text-dark);
  margin: 0 0 var(--s5);
}

.client-info {
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* Portraits are squares — a disc in a square system is the one shape that
   always looks borrowed. */
.client-info img,
.team-card img {
  border-radius: var(--r);
  border: 1px solid var(--line);
  width: 44px;
  height: 44px;
  object-fit: cover;
}

.team-card img {
  width: 72px;
  height: 72px;
  margin-bottom: var(--s4);
}

.client-info h4 {
  font-size: var(--t-small);
  margin: 0;
}

.client-info p {
  font-size: var(--t-label);
  color: var(--text-light);
  margin: 0;
}

/* Numbered steps: a square plate, not a bubble. */
.process-step .step-number,
.step-number {
  border-radius: var(--r);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--text-dark);
  color: #fff;
  font-weight: 700;
  font-size: var(--t-small);
  margin: 0 0 var(--s4);
}

/* About / story blocks share the card surface and the same column gap. */
.about-grid,
.story-content,
.contact-wrapper,
.privacy-wrapper,
.terms-wrapper,
.mv-section,
.values-grid {
  gap: var(--s6);
}

.about-grid { align-items: start; }

.service-features { padding-left: var(--s5); }

.service-features li {
  font-size: var(--t-small);
  color: var(--text-medium);
  margin-bottom: var(--s2);
}

/* ----------------------------------------------------- calls to action */

.cta-section,
.terms-cta,
.privacy-cta {
  background: var(--text-dark);
  color: #fff;
  padding: var(--s8) var(--s6);
  margin: var(--s8) 0;
  border-radius: var(--r);
  text-align: left;
  border: 1px solid var(--text-dark);
}

.cta-section h2,
.terms-cta h2,
.privacy-cta h2,
.cta-section h3,
.terms-cta h3,
.privacy-cta h3 {
  color: #fff;
  font-size: var(--t-h2);
  margin-bottom: var(--s3);
}

.cta-section p,
.terms-cta p,
.privacy-cta p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 60ch;
}

.cta-section .btn { margin-top: var(--s5); }

.cta-banner { text-align: left; }

/* ------------------------------------------------------------------ forms */

.form-group { margin-bottom: var(--s5); }

.form-group label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: var(--s2);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: var(--t-body);
  font-family: var(--font-text);
  color: var(--text-dark);
  background: var(--surface);
  transition: border-color var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-light); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--line-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  outline: none;
}

.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--t-small);
  color: var(--text-medium);
}

.checkbox-group input[type="checkbox"] {
  width: 16px;
  height: 16px;
  border-radius: 0;
  accent-color: var(--primary-dark);
  margin-top: 4px;
  flex: none;
}

/* --------------------------------------------------------------- feedback */

/* Error, success and empty states get the same care as the primary flow —
   a rough state screen makes the whole product read as unreliable. */
.success-banner,
.highlight-box,
.warning-box,
#loginError,
#signupError {
  border-radius: var(--r) !important;
  padding: var(--s4) !important;
  font-size: var(--t-small);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-style: solid;
  margin-bottom: var(--s5);
}

.success-banner {
  background: #eef5ef;
  border-left-color: #2f7d4f;
  color: #1f5537;
}

.highlight-box {
  background: var(--gray-bg);
  border-left-color: var(--primary);
  color: var(--text-medium);
}

.warning-box {
  background: #fdf6ec;
  border-left-color: var(--accent);
  color: #6b4d21;
}

#loginError,
#signupError {
  background: #fdeceb !important;
  border-left-color: #c0392b;
  color: #9c2c20 !important;
}

.success-message {
  text-align: center;
  padding: var(--s6) var(--s5);
}

.success-icon {
  border-radius: var(--r);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--s4);
  background: var(--text-dark);
  color: #fff;
  font-size: 1.4rem;
}

/* ----------------------------------------------------------------- modals */

.modal {
  background: rgba(46, 38, 32, 0.55);
  backdrop-filter: blur(3px);
  border-radius: 0;
}

.modal-content {
  border-radius: var(--r);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(46, 38, 32, 0.22);
  background: var(--surface);
  overflow: hidden;
}

.modal-header {
  padding: var(--s5) var(--s6) var(--s4);
  border-bottom: 1px solid var(--line);
}

.modal-header h2 {
  font-size: var(--t-h3);
  margin: 0;
}

.modal-body { padding: var(--s6); }

.modal-footer {
  padding: var(--s4) var(--s6) var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--text-medium);
}

.modal-close {
  border-radius: var(--r);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-medium);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
}

.modal-close:hover {
  border-color: var(--line-strong);
  color: var(--text-dark);
}

/* ------------------------------------------------------- legal / sidebars */

.privacy-sidebar,
.terms-sidebar {
  padding: var(--s5);
  align-self: start;
  position: sticky;
  top: 96px;
}

.privacy-sidebar h3,
.terms-sidebar h3 {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.sidebar-nav li { margin-bottom: 0; }

.sidebar-nav a {
  border-radius: var(--r);
  padding: var(--s2) var(--s3);
  font-size: var(--t-small);
  color: var(--text-medium);
  border-left: 2px solid transparent;
  transition: background var(--fast) var(--ease),
    color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.sidebar-nav a:hover {
  background: var(--gray-bg);
  color: var(--text-dark);
  border-left-color: var(--primary);
}

.privacy-section,
.terms-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s6);
  margin-bottom: var(--s5);
  box-shadow: var(--shadow);
}

.privacy-section h2,
.terms-section h2 {
  font-size: var(--t-h3);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}

.privacy-section p,
.terms-section p,
.privacy-section li,
.terms-section li {
  font-size: var(--t-small);
  color: var(--text-medium);
}

.privacy-section ul,
.terms-section ul { padding-left: var(--s5); }

.privacy-section li,
.terms-section li { margin-bottom: var(--s2); }

/* Tables: a real grid, since the content is tabular. */
.legal-table,
.data-table {
  border-radius: var(--r);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface);
  font-size: var(--t-small);
  margin: var(--s5) 0;
}

.legal-table th,
.data-table th {
  background: var(--gray-bg);
  color: var(--text-dark);
  font-family: var(--font-display);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s3) var(--s4);
}

.legal-table td,
.data-table td {
  border: 1px solid var(--line);
  border-radius: 0;
  padding: var(--s3) var(--s4);
  color: var(--text-medium);
}

/* ----------------------------------------------------------------- footer */

.footer {
  background: var(--text-dark);
  color: rgba(255, 255, 255, 0.72);
  padding-top: var(--s8);
  padding-bottom: var(--s5);
  margin-top: var(--s9);
  border-radius: 0;
}

.footer::before {
  background: var(--primary);
  height: 3px;
  border-radius: 0;
}

.footer-grid {
  gap: var(--s6);
  max-width: none;
  margin: 0;
}

.footer-col h4 {
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: block;
}

.footer-col h4::after { display: none; }

.footer-col p,
.footer-links a,
.footer-bottom {
  font-size: var(--t-small);
  color: rgba(255, 255, 255, 0.66);
}

.footer-links li { margin-bottom: var(--s2); }

.footer-links a {
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

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

.footer-bottom {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  gap: var(--s4);
}

.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  margin-left: var(--s4);
}

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

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

@media (max-width: 900px) {
  .about-grid,
  .contact-wrapper,
  .privacy-wrapper,
  .terms-wrapper,
  .story-content,
  .mv-section {
    grid-template-columns: 1fr;
  }

  .privacy-sidebar,
  .terms-sidebar { position: static; }
}

@media (max-width: 768px) {
  :root { --rail: var(--s4); }

  .container { padding-top: var(--s6); padding-bottom: var(--s6); }

  .hero,
  .page-hero,
  .page-header {
    padding-top: var(--s7);
    padding-bottom: var(--s7);
    border-radius: 0;
  }

  .navbar {
    padding-top: var(--s3);
    padding-bottom: var(--s3);
  }

  .nav-links {
    gap: var(--s2);
    border-top: 1px solid var(--line);
    padding-top: var(--s4);
  }

  .auth-buttons {
    gap: var(--s2);
    width: 100%;
  }

  .btn-login,
  .btn-signup { flex: 1; }

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

  .service-card,
  .mv-card,
  .cta-banner,
  .about-grid,
  .contact-form-card,
  .privacy-section,
  .terms-section,
  .cta-section,
  .terms-cta,
  .privacy-cta {
    padding: var(--s5);
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer-bottom-links a { margin: 0 var(--s2); }
}

/* ----------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}


/* ------------------------------------------------- heading colour, once */

/* Each page coloured its own card headings rose, at a specificity that beats
   an element selector. Listing them here settles it in one place: headings
   on a light surface are ink, headings on a dark band are white. Rose is
   kept for interactive text and accents, where it means something. */
.business-hours h4,
.client-info h4,
.contact-form-card h2,
.contact-info h2,
.faq-item h4,
.info-item h4,
.modal-header h2,
.mv-card h2,
.mv-card h3,
.privacy-section h2,
.privacy-sidebar h3,
.process-step h4,
.product-item h4,
.service-card h3,
.stat-item h3,
.store-item h4,
.store-section h2,
.story-section h2,
.team-card h3,
.terms-section h2,
.terms-sidebar h3,
.value-card h3,
.category-header h2,
.section-title {
  color: var(--text-dark);
  font-family: var(--font-display);
}

.cta-banner h3,
.cta-section h2,
.privacy-cta h3,
.terms-cta h3 {
  color: #fff;
}

/* Sidebar headings stay the quiet uppercase label they were given above. */
.privacy-sidebar h3,
.terms-sidebar h3 {
  color: var(--text-light);
}

/* ------------------------------------------------- overflow containment */

/* Grid and flex items default to min-width:auto, so a wide table inside the
   legal pages' content column forced the whole grid wider than the viewport
   and the page scrolled sideways on phones and tablets. The column is told
   it may shrink, and the tables are laid out to the column rather than to
   their own content. */
.privacy-wrapper,
.terms-wrapper,
.contact-wrapper,
.about-grid,
.story-content,
.mv-section,
.services-grid,
.testimonials-grid,
.team-grid,
.values-grid,
.store-grid,
.process-grid,
.faq-grid,
.footer-grid {
  min-width: 0;
}

.privacy-content,
.terms-content,
.privacy-sidebar,
.terms-sidebar,
.about-content,
.story-text,
.contact-info,
.contact-form-card,
.privacy-section,
.terms-section,
.service-card,
.testimonial-card,
.team-card,
.mv-card,
.value-card,
.faq-item,
.store-item,
.stat-item,
.info-item,
.footer-col {
  min-width: 0;
}

.legal-table,
.data-table {
  width: 100%;
  table-layout: fixed;
  display: table;
}

.legal-table th,
.legal-table td,
.data-table th,
.data-table td {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Long unbroken strings (emails, GST numbers, urls) wrap instead of pushing
   their container wider. */
.privacy-section,
.terms-section,
.info-detail,
.footer-col,
.business-hours {
  overflow-wrap: anywhere;
}


/* .cta-banner is a light card, so its action is the solid rank rather than
   the light-on-dark one used inside the dark bands. */
.cta-banner .btn-white,
.cta-banner .btn-contact {
  background: var(--primary-dark);
  color: #fff;
  border: 1px solid var(--primary-dark);
}

.cta-banner .btn-white:hover,
.cta-banner .btn-contact:hover {
  background: var(--text-dark);
  border-color: var(--text-dark);
  color: #fff;
}


/* The legal pages' CTA buttons sit on the same dark band as the other pages'
   calls to action, so they take the same light-on-dark rank and size. */
.privacy-cta .btn-contact,
.terms-cta .btn-contact,
.privacy-cta .btn-white,
.terms-cta .btn-white {
  background: #fff;
  color: var(--text-dark);
  border: 1px solid #fff;
  padding: var(--s4) var(--s6);
  margin-top: var(--s5);
}

.privacy-cta .btn-contact:hover,
.terms-cta .btn-contact:hover,
.privacy-cta .btn-white:hover,
.terms-cta .btn-white:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* ==========================================================================
   MOBILE NAVIGATION

   The old mobile menu dropped the six links plus two auth buttons into the
   sticky bar itself, so opening it reflowed the header and pushed the page
   down. Here it is a panel that slides in over the page instead: one link
   per row, full-width targets, and the two account actions parked at the
   bottom where a thumb reaches them. The bar itself keeps only the name and
   one control.
   ========================================================================== */

@media (max-width: 768px) {
  /* The bar keeps its own strip of the screen: the panel starts below it, so
     the name and the close control stay visible and tappable the whole time.
     --bar-h is measured by nav.js, because the bar's height depends on its
     content and a guessed constant leaves a seam. */
  .navbar {
    z-index: 300;
    background: var(--bg);
    backdrop-filter: none;
  }

  .hamburger {
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: -10px;
    padding: 10px;
  }

  .nav-scrim {
    position: fixed;
    inset: var(--bar-h, 58px) 0 0;
    background: rgba(46, 38, 32, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms var(--ease), visibility 200ms var(--ease);
    z-index: 150;
    border-radius: 0;
  }

  .nav-scrim.show {
    opacity: 1;
    visibility: visible;
  }

  /* display stays flex at all times — the panel is hidden by moving it off
     the edge, which is what lets it slide rather than blink into place. */
  .nav-links,
  .nav-links.open {
    display: flex;
    position: fixed;
    top: var(--bar-h, 58px);
    right: 0;
    bottom: 0;
    width: min(82vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border-left: 1px solid var(--line);
    border-top: 0;
    box-shadow: -12px 0 32px rgba(46, 38, 32, 0.12);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 200;
    border-radius: 0;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 240ms var(--ease), visibility 240ms var(--ease);
  }

  .nav-links.open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: var(--s3) var(--s5);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark);
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
    border-radius: 0;
  }

  .nav-links a:active { background: var(--gray-bg); }

  /* The current page is marked by the edge, not by an underline that would
     float in the middle of a full-width row. */
  .nav-links a.active {
    border-left-color: var(--primary);
    background: var(--gray-bg);
    font-weight: 600;
  }

  .nav-links a.active::after { display: none; }

  /* Account actions sit at the bottom of the panel, in thumb reach. */
  .auth-buttons {
    flex-direction: column;
    gap: var(--s2);
    width: 100%;
    margin: auto 0 0;
    padding: var(--s5);
    border-top: 1px solid var(--line);
  }

  .btn-login,
  .btn-signup {
    width: 100%;
    flex: none;
    min-height: 48px;
    padding: var(--s3) var(--s5);
  }

  /* The page behind the panel does not scroll with it. */
  body.nav-open {
    overflow: hidden;
  }
}

@media (min-width: 769px) {
  .nav-scrim { display: none; }
}

/* ==========================================================================
   HOME PAGE ADDITIONS
   New pieces, built from the tokens above rather than new values.
   ========================================================================== */

/* A short lead under a section heading. It explains the section without
   becoming a kicker above it — the heading still carries its own weight. */
.section-lead {
  font-size: 1.02rem;
  color: var(--text-medium);
  max-width: 68ch;
  margin: calc(var(--s6) * -1 + var(--s2)) 0 var(--s6);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}

/* The hero's second action. Outlined rather than solid, so the page still has
   exactly one primary action above the fold. */
.hero .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4) var(--s6);
  font-family: var(--font-text);
  font-size: var(--t-small);
  font-weight: 600;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--r);
  text-decoration: none;
  transition: background var(--fast) var(--ease),
    color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.hero .btn-ghost:hover {
  background: #fff;
  color: var(--text-dark);
  border-color: #fff;
}

/* The facts row: the claims made elsewhere on the site, stated once at the
   top where they answer "who am I dealing with?". Figures are tabular so the
   row reads as data rather than as decoration. */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s5);
  max-width: 820px;
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero-fact strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hero-fact span {
  display: block;
  margin-top: var(--s1);
  font-size: var(--t-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* The store cards carry contact details, so their links must look like links
   without breaking the card's quiet type. */
.info-item a {
  color: var(--primary-dark);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.info-item a:hover {
  color: var(--text-dark);
  border-bottom-color: var(--line-strong);
}

.info-item h4,
.process-step h4,
.faq-item h4 {
  font-size: var(--t-h4);
  margin-bottom: var(--s2);
}

.info-item p,
.process-step p,
.faq-item p {
  font-size: var(--t-small);
  color: var(--text-medium);
  margin: 0;
}

.faq-item h4 {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

@media (max-width: 768px) {
  .hero-actions > .btn,
  .hero-actions > .btn-ghost {
    width: 100%;
  }

  .hero-facts {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s4);
  }
}

/* Four value cards should sit as one row of four, not three and an orphan.
   A row that wraps 3 + 1 reads as an accident rather than a layout. */
.values-grid {
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
}