/* =============================================================
   MOVE IT CLEAR IT — brand-system.css
   THE SHARED DESIGN STANDARD, LIFTED OFF THE SERVICES PAGE.

   WHY THIS FILE EXISTS. The five main pages already shared their chrome —
   the same injected announcement bar, the same 68px nav, the same navy
   footer, the same pill button radius, the same palette. What they did NOT
   share was rhythm and scale, and that is what made them read as five
   different companies. Measured on the live pages before this file:

     section padding   index    0 / 80 / 80 / 52 / 96 / 88 / 64 / 88 / 32 / 56
                       pricing  64 / 72 / 96 / 72 / 96 / 96 / 64 / 96 / 80 / 64
                       about    64 / 64 / 64 / 64 / 72 / 64 / 72 / 64 / 64 / 72
                       contact  64 / 96 / 96 / 32
                       services 64 everywhere  <- the standard
     button font-size  13px (pricing) . 15px (about) . 16px (index) .
                       18px (contact) . 19px (services)  <- the standard
     button height     48 . 56 . 62 . 73 . 54
     h1 weight         700 on pricing/about/contact, 800 on index/services

   SERVICES IS THE STANDARD, so this file carries the Services numbers to the
   other four rather than inventing a sixth set.

   LOAD ORDER MATTERS: after css/style.css (so it can normalise), and on
   services.html BEFORE css/services.css (so the page that defined the
   standard keeps the last word on its own details).

   SCOPE: `#main > section` — an id plus an element, which outranks the bare
   `#some-section` rules in style.css without needing a single !important.
   Nothing here reaches into the booking form, the quote page or any other
   template, because none of this file is loaded there.
============================================================= */

/* ============================================================
   1. VERTICAL RHYTHM
   One number for every section on every page.
============================================================ */
:root {
  --section-y:      64px;   /* the Services rhythm */
  --section-y-lg:   88px;   /* reserved for a genuinely spacious band */
  --section-y-sm:   38px;   /* phones — matches services.css's 640px block */
}

/* HEROES ARE EXEMPT. They own their own vertical space: #hero on the home
   page is a full-bleed panel that must be allowed 0, and #page-hero and
   #svc-hero set their own asymmetric top/bottom. Sweeping them into the
   rhythm would flatten the one section on each page that should not be
   the same height as the others. */
#main > section:not(#hero):not(#page-hero):not(#svc-hero) {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* THE ONE DELIBERATE EXCEPTION. #mid-cta is the dark CTA band that
   interrupts the home page halfway down. It is a punctuation mark, not a
   content section, and at the full 64 it read as another block to scroll
   past instead of a break in the page.

   #service-limits is NOT swept in either, and that is a decision rather
   than an oversight: style.css sets `padding: 32px 36px !important` on it
   twice, because it is a compact inset note box and not a full-width
   section. Overriding an !important from another file to make a small note
   as tall as a content section would be losing the argument and the design
   at the same time. It stays a note. */
#main > #mid-cta {
  padding-top: 52px;
  padding-bottom: 52px;
}

/* The Contact page's closing "Read Our Reviews" block is a bare <div>, not a
   <section>, so the rule above never reached it — it was sitting at 76px
   above (48 padding + 28 margin) and 48 below, visibly off the grid at the
   one place on the page where the rhythm is easiest to notice. */
#main > .contact-reviews {
  margin-top: 0;
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
@media (max-width: 640px) {
  #main > .contact-reviews {
    padding-top: var(--section-y-sm);
    padding-bottom: var(--section-y-sm);
  }
}

@media (max-width: 640px) {
  #main > section:not(#hero):not(#page-hero):not(#svc-hero) {
    padding-top: var(--section-y-sm);
    padding-bottom: var(--section-y-sm);
  }
  #main > #mid-cta {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* ============================================================
   2. BUTTONS
   ONE size, everywhere. 19px/700 in a pill.
============================================================ */
/* WHY 19px AND NOT THE 15px BASE. Two reasons, and the accessibility one
   came first. White on the CTA ember (#D2450F) measures 4.57:1 — it clears
   AA for normal text, so this is not a contrast rescue. It is that this
   business is sold to people who are tired, on a phone, often older, and
   frequently reading in their second language; the Services page was
   written at 19px for exactly that audience and it is the right call for
   all five pages.

   `white-space: normal` is the important half. The global component sets
   nowrap, which at 19px is what turns a long bilingual label into a button
   wider than a 320px phone. Wrapping is why the overflow tests pass. */
#main .btn-primary,
#main .btn-secondary {
  min-height: 54px;
  padding: 14px 30px;
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
}

/* The contact page's mega CTA is brought INTO the scale rather than left as
   a sixth button size. It keeps a little extra presence — it is the only
   CTA on that page — but it is now recognisably the same component. */
#main .btn-primary.cta-mega {
  min-height: 60px;
  font-size: 1.25rem;
}

/* Pricing's in-card buttons ran at 13px, the smallest control on the site,
   inside the cards carrying the actual prices. They go full-width in their
   card and pick up the shared scale. */
#main .price-card .btn-primary {
  width: 100%;
  font-size: 1.0625rem;
  padding-inline: 18px;
}

/* ── The arrow. Moves on hover and focus, and only then. ── */
#main .btn-primary .svc-arrow,
#main .btn-secondary .svc-arrow { display: inline-block; transition: transform 200ms ease; }
#main .btn-primary:hover .svc-arrow,
#main .btn-primary:focus-visible .svc-arrow,
#main .btn-secondary:hover .svc-arrow,
#main .btn-secondary:focus-visible .svc-arrow { transform: translateX(3px); }

/* Phones: a CTA that is not full width is a CTA that gets mis-tapped. */
@media (max-width: 640px) {
  #main .hero-actions .btn-primary,
  #main .hero-actions .btn-secondary,
  #main .page-hero-actions .btn-primary,
  #main .page-hero-actions .btn-secondary {
    width: 100%;
    min-height: 52px;
  }
}

/* ============================================================
   3. TYPE SCALE
============================================================ */
/* Archivo 800 for every page title. pricing/about/contact were at 700,
   which next to the home page's 800 read as a lighter, cheaper page. */
#main h1 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
#main h2 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
}

/* The eyebrow. Gold, spaced, uppercase — the one premium signal that costs
   nothing and appears above every major section on the standard page. */
.brand-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}

/* ============================================================
   4. THE INTERIOR HERO  (#page-hero on pricing / about / contact)
   Same dark navy hero as Services, same parts, same order.
============================================================ */
/* WHAT CHANGED. It was a centred title and one grey line — about 258px of
   page on contact. A hero is where the customer decides whether to keep
   reading, and on three of five pages it was doing no selling at all. It
   now carries the same five parts the Services hero does: eyebrow, title,
   one plain sentence, the CTAs, and the trust points.

   IT STAYS CENTRED. Services is two columns because it has a photograph to
   put in the second one; these pages do not, and a one-column centred hero
   is the honest version of the same layout rather than a fake of it. */
#page-hero {
  background:
    radial-gradient(1100px 420px at 50% -10%, rgba(255, 90, 31, .16), transparent 70%),
    linear-gradient(160deg, #0d1f3c 0%, var(--navy) 65%);
  padding: 56px 8% 60px;
}
#page-hero h1 {
  font-size: clamp(2rem, 4.4vw, 2.875rem);
  font-weight: 800;
  margin-bottom: 14px;
}
/* The orange rule under the title is kept — it is an existing brand mark on
   every sub-page — but it is now gold-to-ember so it matches the hairline
   on the Services photo frame. */
#page-hero h1::after {
  width: 52px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--orange));
}
#page-hero .brand-eyebrow { color: var(--gold); }
#page-hero > p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .78);
  max-width: 60ch;
}

/* ── Hero CTAs ── */
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;                    /* >=16px between major tap targets */
  justify-content: center;
  margin: 24px auto 16px;
}
/* On the navy hero the outlined button has to be white-on-navy, not the
   navy-on-white it is over a light section. */
#page-hero .btn-secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, .55);
  background: transparent;
}
#page-hero .btn-secondary:hover {
  background: rgba(255, 255, 255, .10);
  border-color: var(--white);
}
#page-hero .btn-secondary:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

/* ── The line under the CTAs that says what pressing them does ── */
.page-hero-microcopy {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
  max-width: 56ch;
  margin: 0 auto;
}

/* ── Trust points ── */
.brand-trust-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  list-style: none;
  margin: 22px auto 0;
  padding: 0;
  max-width: 780px;
}
.brand-trust-points li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .90);
}
.brand-trust-points svg { flex: none; color: var(--gold); }

/* ── ONE TRUST-BADGE SCALE ──
   Four of the five pages already agree: Services' .svc-hero-trust and the
   .brand-trust-points above are the same component at 15px/600 with the
   same check glyph. The home page's #trust-pills carried the same three
   claims, word for word, at 12px — the smallest text in any hero and a
   visibly different object.

   THE TYPE IS UNIFIED; THE PILL IS KEPT. The home hero is the only LIGHT
   hero on the site, and on a bone background a bare check row loses the
   edge that makes it read as a badge — the pill is doing real work there,
   and it was rebuilt deliberately in the 2026-07-29 hero pass. So this
   matches the size, weight and icon so the three read as one system, and
   leaves the light-surface treatment alone. */
#trust-pills li {
  font-size: 0.9375rem;
  font-weight: 600;
}
#trust-pills li svg { flex: none; }

/* ── The truck disclosure pill. The single most important sentence on this
   site after the price, so it is a bordered object and not a footnote. ── */
.brand-truck-note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 18px auto 0;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(201, 169, 97, .45);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, .92);
  text-align: left;
}
.brand-truck-note svg { flex: none; color: var(--gold); }

/* THE LIGHT-HERO VARIANT. The home page hero is bone, not navy, so the
   white-on-navy pill above is invisible there. Same object, inverted: an
   ember-tinted wash with the AA-safe ember for the text (#A8330B on this
   wash measures well past 4.5:1 — bright Ember #FF5A1F does not, and this
   line is too important to set in a colour that fails). */
.brand-truck-note--light {
  background: rgba(255, 90, 31, .08);
  border-color: rgba(255, 90, 31, .40);
  color: #A8330B;
  margin-inline: 0;
}
.brand-truck-note--light svg { color: #A8330B; }

@media (max-width: 640px) {
  #page-hero { padding: 40px 6% 44px; }
  .page-hero-actions { gap: 12px; }
  .brand-trust-points { gap: 10px 18px; justify-content: flex-start; text-align: left; }
  .brand-truck-note { width: 100%; }
}

/* ============================================================
   5. CARDS
   One radius token, one border weight, one hover.
============================================================ */
.brand-card {
  background: var(--white);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-lg);
  padding: 24px;
  min-width: 0;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.brand-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 90, 31, .30);
  box-shadow: 0 14px 34px rgba(10, 22, 40, .12);
}
.brand-card--accent {
  background: var(--bone);
  border-color: rgba(255, 90, 31, .28);
}

/* ============================================================
   5b. THE PHOTO FRAME
   The Services hero's framed card, generalised so every real photograph on
   the site is presented the same way.
============================================================ */
/* WHY A FRAME AT ALL. These are true job-site photographs taken on a phone,
   which is exactly what makes them worth using — and also what makes them
   look like a phone photo if they are dropped edge-to-edge into a section.
   A navy mat with a gold hairline turns the same picture into a framed
   print. It is the cheapest premium signal available and it costs no
   sharpness, because it never touches the image.

   THE RATIO IS A VARIABLE, and that is deliberate. The Services photograph
   is a true 3:2 and the crew photograph is a true 4:3, and neither is
   cropped to match the other: the crew are standing shoulder to shoulder
   filling the frame top to bottom, so forcing 3:2 on them cuts either the
   caps or the shoes. Same frame, honest ratios.

   THE RATIO LIVES ON THE WELL, NOT THE CARD — see the long note in
   css/services.css. A fixed ratio on the padded card is only correct at one
   width, because the mat is a constant px value and the ratio is not. */
.brand-frame {
  --brand-mat: 14px;
  --brand-frame-radius: 22px;
  --brand-ratio: 3 / 2;
  position: relative;
  padding: var(--brand-mat);
  border-radius: var(--brand-frame-radius);
  background: linear-gradient(160deg, #12233C 0%, var(--navy) 62%);
  border: 1px solid rgba(201, 169, 97, .34);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .28),
    0 22px 48px rgba(0, 0, 0, .34);
}
.brand-frame--4x3 { --brand-ratio: 4 / 3; }

.brand-frame-well {
  position: relative;
  aspect-ratio: var(--brand-ratio);
  overflow: hidden;
  border-radius: calc(var(--brand-frame-radius) - var(--brand-mat));
  background: #8C8B84;                 /* near the photos' mean tone */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .30);
}
/* NO FILTERS, NO TINT, NO SCRIM, NO DUOTONE — on any photograph on this
   site. The people in them are real and are not to be edited, and that
   includes editing them in CSS. The frame is the entire treatment. */
.brand-frame-well img,
.brand-frame-well picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* A single arrival, pure CSS, ending at the natural state — so the picture
   is visible with JS blocked, with animations off, and at every instant in
   between. Same contract as the Services hero. */
.brand-frame { animation: brand-frame-arrive 600ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes brand-frame-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.brand-frame-caption {
  margin: 14px 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--navy-60);
}

@media (max-width: 640px) {
  .brand-frame { --brand-mat: 10px; --brand-frame-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-frame { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── About: the crew photograph beside its explanation ── */
#crew-photo { background: var(--bone); }
.about-crew-wrap {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 8%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.about-crew-copy h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--navy);
  margin: 0 0 14px;
}
.about-crew-copy p {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--navy-80);
  margin: 0 0 14px;
}
.about-crew-copy p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .about-crew-wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-inline: 6%; }
}

/* ============================================================
   6. FOCUS — visible on every interactive thing, on both grounds
============================================================ */
#main a:focus-visible,
#main button:focus-visible,
#main summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* On the navy hero and the navy CTA bands, an ember outline on near-navy is
   not a visible focus ring. White is. */
#page-hero a:focus-visible,
#page-hero button:focus-visible,
#main > section[style*="0A1628"] a:focus-visible {
  outline-color: var(--white);
}

/* ── THE HEADER AND FOOTER HAD NO FOCUS RING AT ALL ──
   Found by matching every `:focus-visible { outline }` rule in every loaded
   stylesheet against the actual elements, on all five pages: the primary
   and secondary buttons and the EN/ES toggle were covered; the NAV LINKS,
   the FOOTER LINKS and the HAMBURGER were not, anywhere.

   That is the whole keyboard path into the site — a customer tabbing from
   the address bar hit the skip link, then the logo, then five invisible nav
   items. It was invisible rather than missing (the elements were always
   focusable), which is exactly why it survived: nothing looks broken unless
   you are the person navigating by keyboard.

   Scoped OUTSIDE #main deliberately — that is where the gap was, because
   every existing rule in this file and in style.css was written against
   #main and the header/footer are siblings of it. */
#main-nav a:focus-visible,
#main-nav button:focus-visible,
#nav-hamburger:focus-visible,
.skip-link:focus-visible,
.skip-link:focus {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* The footer is Ink Navy, where an ember ring is nearly invisible. Gold
   reads on navy and is already the brand's accent-on-dark. */
#site-footer a:focus-visible,
#site-footer button:focus-visible,
footer a:focus-visible,
footer button:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   6b. TARGET SIZE AND MINIMUM TYPE
   Two findings from the 320-1280 sweep, both real, both site-wide.
============================================================ */
/* FINDING 1 — FOOTER LINKS WERE 17px TALL. Measured on all five pages at
   every width. WCAG 2.2's target-size minimum (2.5.8, AA) asks for 24px,
   and the inline-in-a-sentence exception does not apply because these are
   stacked list items, not words inside prose. They were failing AA, and on
   a phone they were also simply hard to hit.

   44px, not 24px, because this is a moving company: the footer phone number
   is a real conversion path and it is being tapped one-handed, outdoors,
   often by someone older. The footer gets taller. That is the correct
   trade — it is the last thing on the page, and nothing is pushed off
   screen by it.

   min-height + inline-flex rather than padding, so the LINK grows to the
   target size while the visual text position barely moves. */
#site-footer a,
footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* The legal row is a single line of inline links; stretching each one to
   44px there would break the line into a staircase. It keeps the 24px AA
   floor instead, which is what that exception exists for. */
#site-footer .footer-legal a,
#site-footer #footer-legal a,
footer .footer-legal a {
  min-height: 24px;
}

/* The EN/ES toggle was 28px tall. It is a real control that a Spanish-
   speaking customer has to find and hit, and it sits in the header next to
   a 44px hamburger. */
#lang-toggle button {
  min-height: 36px;
  min-width: 40px;
}
@media (max-width: 640px) {
  #lang-toggle button { min-height: 40px; }
}

/* The header logo is a link home and was 36px. The bar it sits in is 68px,
   so there is room for it to be a proper target at no visual cost. */
#nav-logo { min-height: 44px; }

/* The named standalone links the sweep found under 40px. Each one is a
   whole link on its own line — not a word inside a sentence — so the
   inline exception does not cover them:
     .starting-context-link  "See full pricing"        (home)
     .cta-textlink           "Prefer texting? Text us" (home, pricing, about)
     #direct-contact phone/email                       (contact)
   The contact ones matter most: that page exists to get a phone number
   tapped, and its phone number was an 18px target. */
#main .starting-context-link,
#main .cta-textlink,
#main #direct-contact a[href^="tel:"],
#main #direct-contact a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* FINDING 2 — TEXT AT 11px AND 12px ON PHONES. Section eyebrows on About,
   the size labels and demanding-job notes on Pricing, several footnotes on
   the home page. This audience skews older and often reads in a second
   language; 11px is not a size at which anyone reads a caveat.

   NAMED, NOT BLANKET. The tempting one-liner is
   `font-size: max(0.875rem, 1em)` across all body text — and it is wrong.
   `1em` resolves against the PARENT's font-size, not the element's own, so
   on a 12px caption inside a 16px paragraph it computes max(14, 16) = 16px
   and deletes the caption styling entirely. There is no way to say "this
   element's own size, but not below 14px" in CSS.

   So these are the actual elements the sweep found below 14px, listed. It
   is longer, but it raises exactly what was too small and leaves every
   deliberate size decision on the site alone.

   THE 11px AND 12px CASES ARE RAISED AT EVERY WIDTH, not just on phones.
   13px on a desktop caption is a defensible design choice; 11px on a
   section eyebrow and 12px on the label that says which home size a price
   belongs to are not, on any screen, for this audience. */
#main .section-eyebrow { font-size: 0.8125rem; letter-spacing: 0.12em; }
#main .cov-foot { font-size: 0.8125rem; }

/* ── EVERY LINE THAT QUALIFIES A PRICE IS 14px ON EVERY SCREEN ──
   Not just on phones. These are the sentences that decide whether a
   customer is surprised on move day:

     .cta-payment              "The temporary $49 authorization is captured
                                only after approval and applied toward…"
     .price-card-size          which home size a price actually covers
     .price-card-desc          what is and is not in that price
     .price-card-demanding-note  the "starting at" caveat on 3-5 bedrooms
     .calc-addons-note         what the estimator has not counted

   They were 12-13px, which is smaller than the body text they qualify —
   and a caveat set smaller than the claim it limits is the oldest trick in
   pricing design. This business does not use it. The floor applies at
   every width because the reason has nothing to do with screen size. */
#main .cta-payment,
#main .price-card-size,
#main .price-card-desc,
#main .price-card-demanding-note,
#main .calc-addons-note {
  font-size: 0.875rem;
  line-height: 1.55;
}

/* The Google rating link measured 22px — just under WCAG 2.2's 24px
   target-size minimum, and it is the one link on the home page that backs
   up the 5.0 star claim. */
#hero-star-label { display: inline-flex; align-items: center; min-height: 24px; }

@media (max-width: 640px) {
  #main .section-eyebrow,
  #main .starting-context,
  #main .video-caption,
  #main .msg-hint,
  #main .town-home,
  #main .cov-subhead,
  #main .cov-foot {
    font-size: 0.875rem;
    line-height: 1.55;
  }

  /* THE MONEY AND TRUCK LINES. These were the smallest text on the site on
     a phone, and they are the exact sentences the brand brief says must
     never be confusing:

       #hero-copy > p          "The temporary $49 authorization is captured
                                only after approval…"          (13px)
       .how-step-includes li   "$49 applied toward your total",
                               "Bring your own truck — $0 extra",
                               "Truck pickup & return add-on — +$49…" (13px)
       #add-ons li p           "$50 for 150-249 lb", "Second flight $40…" (13px)
       #trust-pills li         the home page trust badges            (12px)
       #team-facts li          the About facts list                  (12px)

     A price qualifier set smaller than the body text around it is how
     customers end up surprised on move day. They go to 14px. */
  #main #hero-copy > p,
  #main #trust-pills li,
  #main .how-step-includes li,
  #main #team-facts li,
  #main #calc-result p,
  #main #add-ons li p {
    font-size: 0.875rem;
    line-height: 1.55;
  }
}

/* ============================================================
   7. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .brand-card,
  .brand-card:hover,
  #main .btn-primary,
  #main .btn-secondary,
  #main .btn-primary:hover,
  #main .btn-secondary:hover {
    transform: none !important;
    transition: none !important;
  }
  #main .btn-primary .svc-arrow,
  #main .btn-secondary .svc-arrow,
  #main .btn-primary:hover .svc-arrow,
  #main .btn-secondary:hover .svc-arrow {
    transform: none !important;
    transition: none !important;
  }
}