/* =============================================================
   MOVE IT CLEAR IT — services.css
   SERVICES PAGE ONLY. Loaded after css/style.css by services.html and by
   nothing else. Every selector is either a `svc-`-prefixed class or an
   `#svc-` id, so this file cannot reach another page.

   WHY A SEPARATE FILE
   -------------------
   css/style.css is the shared global sheet used by 8 pages. This layout —
   two-column hero, comparison block, package grid, rate grid, truck add-on
   panel, equipment grid — could not be expressed by the old services-only
   rules in style.css (#studio-tiers, #apartment-tiers, .includes-strip,
   .tier-link, #services-cta). Rather than edit a file six other pages
   depend on, the new layout lives here. Those old rules are now unused but
   deliberately left in place; deleting them is a separate, dedicated pass.

   Design tokens (--navy, --bone, --orange, --gold, --radius-*, --shadow-*)
   come from css/style.css :root. Nothing there is redefined.

   ANIMATION CONTRACT
   ------------------
   • transform + opacity only — no width/height/top/left animation.
   • Section reveals are gated behind `.fade-up`, which main.js adds at
     runtime, so with JS off nothing is ever left at opacity:0.
   • The hero is a REAL, UNRETOUCHED PHOTOGRAPH in a premium navy frame —
     see the note at the stage rules. NOTHING ON THIS PAGE LOOPS. The card
     fades and rises ONCE on first view (services.js adds `.svc-arrived` and
     stops observing) and is then permanently still. No character art, no
     ambient drift, no ghosting.
   • prefers-reduced-motion collapses everything to its end state.
============================================================= */

/* ============================================================
   0. PRIMITIVES
============================================================ */

/* Ember Orange (#FF5A1F) on white measures 3.12:1 — fine for a large
   display number or a fill, below WCAG AA's 4.5:1 for normal-size text.
   Small ember TEXT therefore uses a darkened ember that keeps the brand
   hue and clears AA (5.2:1 on white). Bright Ember still does fills,
   rules, icons and the big price numbers, where 3:1 is the threshold. */
:root {
  --svc-ember-text: #C1400F;
  /* "Included" green. #15803D cleared AA on white (5.0:1) but measured
     4.45:1 against the Bone panel inside the adjustments accordion — a hair
     under. Darkened until it passes on BOTH surfaces: 6.3:1 on white,
     5.6:1 on Bone. */
  --svc-green-text: #146F34;
}

/* Tighter than the global 96px. The page carries a lot of necessary
   detail; the vertical rhythm is where length was being wasted. */
#svc-hero, #svc-how, #svc-types, #svc-packages, #svc-truck,
#svc-adjust, #svc-equipment, #svc-process, #svc-trust, #svc-faq,
#svc-final-cta { padding-top: 64px; padding-bottom: 64px; }

.svc-wrap { width: 100%; }

.svc-eyebrow {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--svc-ember-text);
  margin-bottom: 10px;
}

.svc-h2 {
  font-size: clamp(1.625rem, 3.2vw, 2.25rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--navy);
  margin-bottom: 12px;
}

.svc-lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--navy-80);
  max-width: 68ch;
  margin-bottom: 28px;
}

/* Antique Gold is PREMIUM-ONLY per the house rule in style.css: hairline
   accents only, never on a button, price or icon. */
.svc-rule {
  width: 52px; height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin-bottom: 20px;
}

/* The one truck-status label. Repeated in the hero and on every package
   card so it can never be missed, and never needs a tap. */
.svc-truck-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 90, 31, 0.10);
  border: 1px solid rgba(255, 90, 31, 0.30);
  color: #A8330B;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
}
.svc-truck-note svg { flex-shrink: 0; }
.svc-truck-note--dark {
  background: rgba(255, 90, 31, 0.16);
  border-color: rgba(255, 90, 31, 0.45);
  color: #FFC8AE;
  font-size: 0.875rem;
}

/* ============================================================
   1. HERO
============================================================ */
#svc-hero {
  background: linear-gradient(160deg, #0d1f3c 0%, var(--navy) 65%);
  color: var(--white);
  max-width: none;
  overflow: hidden;
}
.svc-hero-grid {
  display: grid;
  /* The artwork is the hero's second voice, not a spot icon: 44% of the hero
     for the art, ~52% for the copy once the 44px gap is paid — large enough
     that the mover, the load and the truck all read at a glance.

     44% and not a flat 520px, because a FIXED art column does not shrink: on
     a 940px-wide laptop it would still claim 520px and squeeze the headline
     into a 226px gutter. The percentage keeps the ratio at every width down
     to the 900px breakpoint, where the hero stacks. 520px is the cap, which
     is what 44% comes to at the 1180px content width. */
  grid-template-columns: minmax(0, 1fr) minmax(0, min(520px, 44%));
  gap: 44px;
  align-items: center;
}
.svc-hero-copy { min-width: 0; }

/* The dark small-text ember inverts on navy: a light ember tint carries
   8.2:1 on Ink Navy. (#svc-process uses gold for the same reason.) */
#svc-hero .svc-eyebrow { color: #FFB59A; }

#svc-hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.875rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 16px;
}
.svc-hero-sub {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.80);
  max-width: 54ch;
  margin-bottom: 18px;
}
/* Exactly ONE truck statement per width. On desktop the stage badge carries
   it (it sits with the price, where the brief wants it); the copy pill would
   be a second identical sentence in the same hero, so it is hidden. The
   mobile block below flips this: badges off, copy pill on. */
.svc-hero-copy > .svc-truck-note { display: none; }

/* ── Buttons ──
   SIZE: white on Ember Orange measures 3.12:1. WCAG AA asks 4.5:1 of
   normal text but 3:1 of LARGE text (>=18.66px bold), and no shade of
   Ember carries white at 4.5:1 while still being the brand colour. Rather
   than repaint the site's primary button from one page, Services buttons
   run at 19px/700 — which clears AA on the large-text threshold and reads
   better for the older customers this page is written for. Labels wrap,
   since the global component sets white-space: nowrap. */
#main .btn-primary,
#main .btn-secondary {
  font-size: 1.1875rem;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}
.svc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;                       /* >=16px between major tap targets */
  margin-bottom: 14px;
}
#svc-hero .btn-secondary,
#svc-process .btn-secondary,
#svc-final-cta .btn-secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}
#svc-hero .btn-secondary:hover,
#svc-process .btn-secondary:hover,
#svc-final-cta .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--white);
}
#svc-hero .btn-secondary:focus-visible,
#svc-process .btn-secondary:focus-visible,
#svc-final-cta .btn-secondary:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
}

.svc-hero-microcopy {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  max-width: 52ch;
  margin-bottom: 22px;
}
.svc-hero-trust {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 169, 97, 0.35);   /* gold hairline */
}
.svc-hero-trust li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
}
.svc-hero-trust li svg { flex-shrink: 0; margin-top: 2px; color: var(--orange); }

/* ── HERO ARTWORK STAGE ──
   THE LIVE HERO IS THE APPROVED PHOTO-STYLE RENDER. The panel is only a frame
   for it: a matching edge tone, a rounded clip and a GROUNDED shadow.

   ANIMATED SVG HERO IS EXPERIMENTAL. PRODUCTION HERO USES THE APPROVED
   PHOTO-STYLE IMAGE UNTIL SVG CHARACTER ART IS VISUALLY APPROVED. The rig, its
   keyframes, its per-breakpoint travel and its reduced-motion cancel are saved
   whole in services-hero-svg-demo.html; none of it is loaded here, and the
   selectors it needed (.svc-rig, #mover-rig, #dolly-rig, #cargo-rig,
   #ground-shadow, #dolly-wheel-*) are gone from this file rather than left
   behind as dead rules that would drift.

   THE BIG SHADOW IS GONE. This used to be `0 24px 60px rgba(0,0,0,.42)` — a
   60px-blur, 24px-offset drop shadow that floated the whole hero above the
   page. The brief calls that out by name: no large decorative floating shadow,
   no big under-scene blur, contact shadows only. It is now 10px of blur at 3px
   offset, which reads as the panel sitting ON the hero rather than hovering
   over it.

   ASPECT IS THE IMAGE'S OWN 790 x 612, NOT 4:3. The render is 1.291:1 and a
   4:3 box is 1.333:1, so filling a 4:3 stage would cost 3.2% of the picture's
   height — and the bottom of this picture is the dolly's wheels and the
   mover's shoes, the two things that must stay visible. The stage reserves the
   exact ratio instead, so the image paints into space that is already the
   right shape: nothing letterboxed, nothing cropped by the layout, no shift.

   The panel tone is the render's own mean colour, so the frame does not flash
   a different grey for the moment before the image paints. */
.svc-hero-media { min-width: 0; }

.svc-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-left: auto;

  /* ══ THE PREMIUM FRAME ══
     The photograph is matted, not bled. A real snapshot dropped edge-to-edge
     into a dark hero reads as a phone photo someone pasted in; the same
     photograph inside a navy mat with a gold hairline reads as a framed
     print on a wall — which is the whole difference between "local guy" and
     "local business worth $1,049".

     THE MAT IS PADDING and THE RATIO LIVES ON THE WELL, NOT ON THE CARD.
     That split is load-bearing. A fixed aspect-ratio on the card cannot be
     correct at more than one width: the mat is a constant number of CSS px
     while the photo's 1448x965 is a ratio, so (1448+2m)/(965+2m) only holds
     if the card happens to be 1448px wide. Written that way the well came
     out at 1.537 instead of 1.500 on a 467px card — a 7px vertical crop of
     a photograph the brief says not to crop.

     So .svc-scene carries `aspect-ratio: 3 / 2` and sizes itself, and this
     card is simply whatever that is plus the mat on four sides. The print is
     then EXACTLY 3:2 at every width, the space is still reserved before the
     image paints (no layout shift), and --svc-mat can change freely without
     any arithmetic following it. */
  --svc-mat: 14px;
  padding: var(--svc-mat);
  border-radius: 22px;
  background:
    linear-gradient(160deg, #12233C 0%, var(--navy, #0A1628) 62%);
  border: 1px solid rgba(201, 169, 97, .34);   /* the gold hairline */
  /* Two shadows, not one: a tight contact shadow so the card sits ON the
     hero rather than floating over it, and a wide soft one for depth. */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .28),
    0 22px 48px rgba(0, 0, 0, .34);

}

/* The photo well. Inset by the mat, so the navy frame shows on all four
   sides. The badges are SIBLINGS of .svc-scene and overhang the frame edge
   on purpose, which is why the clip lives here and not on .svc-stage.

   The radius is the card's minus the mat — the standard concentric-radius
   rule. Anything else makes the inner corner look like a mistake. */
.svc-scene {
  position: relative;                  /* sizes the card; see the note above */
  aspect-ratio: 3 / 2;                 /* the photograph's true ratio */
  overflow: hidden;
  border-radius: calc(22px - var(--svc-mat));
  /* Under the photograph until it paints: a neutral mid-tone close to the
     picture's own mean, so the frame never flashes a bright empty hole. */
  background: #8C8B84;
  /* Seats the print into the mat instead of letting it sit on top of it. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .30);
}

/* ══ THE PHOTOGRAPH ══
   NO CSS FILTERS, NO TINT, NO GRADIENT SCRIM, NO DUOTONE. This is a real
   person on a real job; every one of those would cost sharpness, push the
   picture toward "stock", and buy nothing. The brief is explicit that the
   photograph is not to be edited, and that includes editing it in CSS.

   THE ONLY TREATMENT IS THE FRAME AROUND IT.

   `object-fit: cover` is belt-and-braces for sub-pixel rounding: the well is
   the file's own 3:2, so at every width it resolves to a 1:1 fit and covers
   nothing. `object-position: 50% 42%` biases the (never-used) overflow above
   centre, so if a future crop ever does bite it takes sky, not shoes. */
.svc-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: 50% 42%;
}

/* ── Badges: HTML, never text baked into the picture. Translatable through
   data-en/data-es, selectable, searchable, and the price stays in the markup
   where services.js can stamp it from the price book. They are SIBLINGS of
   .svc-scene, not children, so they are not clipped and not panned: the camera
   moves, the price does not. ── */
.svc-badge {
  position: absolute;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(10,22,40,.30);
}
.svc-badge svg { flex: none; width: auto; height: auto; }
/* Pinned to the bottom-right CORNER, deliberately straddling it, because it
   cannot fit inside the picture without covering it.

   RE-DERIVED FOR THE APPROVED RENDER. In this picture the lowest thing on the
   right-hand side is the truck's near wheel, which bottoms out at 68% of the
   stage height — the whole bottom-right quadrant below that is empty floor.
   That is a far kinder corner than the rig's was (its truck wheel reached
   87.3%), so the old -50px offset now clears the vehicle with ~100px to
   spare and the chip sits on floor, not on artwork.

   It is KEPT at -50px rather than raised: the offset is what makes the chip
   read as hanging off the panel onto the navy hero, and pulling it inside
   would put a navy pill on a grey floor with no edge to define it. */
.svc-badge--price {
  right: -14px; bottom: -50px;
  flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--navy); color: var(--white);
  padding: 12px 20px; border-radius: 16px;
  /* Hanging off the panel, the chip sits on the navy hero, and navy on navy
     has no edge — only the drop shadow was holding it. A gold hairline gives
     it one, reusing the premium-accent convention from .svc-hero-trust. */
  border: 1px solid rgba(201, 169, 97, 0.38);
}
.svc-badge--price b {
  font-family: var(--font-display);
  font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
}
.svc-badge-kicker {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--gold);
}
.svc-badge--truck {
  /* Top-left, and the stage's only badge up there: the truck responsibility
     must never be obscured, so it gets the corner to itself.

     WHAT IT COVERS IN THIS RENDER: the pill reaches ~30px into the stage, and
     the mover's cap is the first artwork it could reach — at 19% of the
     picture's height, which the 5% top bleed lifts to ~15% of the stage. On
     the shortest desktop stage (about 262px tall at a 901px viewport) that is
     39px down, so the pill clears his cap at every desktop width.

     Capped to the panel plus its intended 24px overhang. At "Customer
     reserves and pays for the rental truck" this pill measures 368px, and on
     the 339px stage a 901px viewport gives it, an uncapped badge sails past
     both edges and reads as a banner laid over a small picture. Wrapping to
     two lines inside the cap looks deliberate; overhanging by 40px does not. */
  max-width: calc(100% + 24px);
  left: -12px; top: -14px;
  background: var(--white); color: #A8330B;
  border: 1.5px solid rgba(255,90,31,.42);
  padding: 9px 14px; font-size: 0.84rem; line-height: 1.3;
}
/* NARROW DESKTOP (901-1080px). The art column is a percentage, so here the
   stage is only ~328x254 — and a chip sized for a 520px stage is then 58% as
   wide as the art is tall, which is a banner laid over a small picture no
   matter where it is hung. Scaling the chips to the stage they sit on is the
   right lever; dropping them lower reads as a tag that fell off. */
@media (min-width: 901px) and (max-width: 1080px) {
  .svc-badge--price { bottom: -40px; padding: 9px 14px; }
  .svc-badge--price b { font-size: 1.5rem; }
  .svc-badge--price .svc-badge-kicker { font-size: 0.68rem; }
  /* Same reasoning for the disclosure: sized to the stage it sits on. */
  .svc-badge--truck { font-size: 0.76rem; padding: 8px 12px; }
}

/* ============================================================
   2. HOW LABOR-ONLY MOVING WORKS
============================================================ */
#svc-how { background: var(--white); }
.svc-compare {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
  margin-bottom: 22px;
}
.svc-compare-col {
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-lg);
  padding: 24px 24px;
  min-width: 0;
}
.svc-compare-col--ours {
  background: var(--bone);
  border-color: rgba(255, 90, 31, 0.28);
}
.svc-compare-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.svc-compare-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px; min-width: 44px;
  border-radius: var(--radius-md);
  background: rgba(10, 22, 40, 0.05);
  border: 1.5px solid var(--navy-12);
  color: var(--navy);
}
.svc-compare-col--ours .svc-compare-icon {
  background: rgba(255, 90, 31, 0.10);
  border-color: rgba(255, 90, 31, 0.30);
  color: #A8330B;
}
.svc-compare-head h3 { font-size: 1.1875rem; color: var(--navy); }

.svc-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--navy);
}
.svc-check-list li svg { flex-shrink: 0; margin-top: 3px; color: var(--orange); }
/* The nine-item "We provide" list runs two-up so it does not tower over
   the four-item column beside it.

   CSS COLUMNS, NOT A GRID. As a two-column grid the items are laid out in
   ROWS, so "Approved disassembly and reassembly" — the only entry that wraps
   to two lines — made its whole row taller and left a visible hole in the
   left-hand column beside it. Columns flow the items continuously instead, so
   a wrapping item pushes the next item down rather than opening a gap.
   `break-inside: avoid` keeps a single item from splitting across the fold. */
.svc-check-list--two {
  columns: 2;
  column-gap: 20px;
}
.svc-check-list--two li { break-inside: avoid; }

/* Plain, non-alarming disclosure strip. */
.svc-disclosure {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--bone);
  border: 1px solid var(--navy-12);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--navy-80);
}
.svc-disclosure svg { flex-shrink: 0; margin-top: 3px; color: var(--navy-60); }

/* ── "NEED A TRUCK?" CARD ──
   Reuses the section's own card language — same radius token, same border
   weight, same bone fill as .svc-compare-col--ours — so it reads as the
   third member of the set rather than a promo box someone dropped in.

   THE EMBER LEFT EDGE is the only thing that separates it: this is the one
   card in the section that answers a question instead of listing a fact,
   and it is carrying the page's most common objection.

   Grid, not flex, so the CTA can sit beside the copy on a wide card and drop
   under it on a narrow one without a second set of rules. */
.svc-truck-ask {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 20px 24px;
  background: var(--bone);
  border: 1.5px solid rgba(255, 90, 31, 0.28);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius-lg);
}
.svc-truck-ask-icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 90, 31, 0.10);
  color: #A8330B;                    /* the AA-safe ember; see section 0 */
}
.svc-truck-ask-body { min-width: 0; }
.svc-truck-ask h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 4px;
}
.svc-truck-ask p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--navy-80);
}
/* The disclosure. Smaller, but never below the page's 14px floor — this is
   the line that assigns who pays for the truck, and it is not fine print
   that may be squinted at. */
.svc-truck-ask-fine {
  margin-top: 6px !important;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--navy-60);
}
.svc-truck-ask-cta { flex: none; white-space: nowrap; }

/* Stack below the copy once three columns stop fitting. The icon rides up
   next to the heading rather than sitting alone on its own row. */
@media (max-width: 780px) {
  .svc-truck-ask {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 16px;
  }
  .svc-truck-ask-icon { align-self: start; }
  .svc-truck-ask-cta {
    grid-column: 1 / -1;
    justify-self: start;
    white-space: normal;
  }
}
@media (max-width: 420px) {
  .svc-truck-ask { padding: 18px 16px; }
  .svc-truck-ask-cta { width: 100%; text-align: center; }
}

/* ============================================================
   3. SERVICE-TYPE CARDS
============================================================ */
#svc-types { background: var(--bone); }
.svc-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.svc-type-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-lg);
  padding: 24px 22px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  min-width: 0;
}
.svc-type-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 90, 31, 0.35);
}
.svc-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: rgba(255, 90, 31, 0.10);
  border: 1.5px solid rgba(255, 90, 31, 0.26);
  color: #A8330B;
  margin-bottom: 14px;
}
.svc-type-card h3 { font-size: 1.125rem; color: var(--navy); margin-bottom: 8px; }
.svc-type-card p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--navy-80);
  margin-bottom: 16px;
}

/* ── Every card answers the same four questions in the same order: what the
   service includes (.svc-type-lead), who it is for, the one condition that
   matters, then the next action. A <dl> because these genuinely are
   term/description pairs — a screen reader announces "Best for" as the label
   of the sentence that follows it, which a stack of <p>s cannot do.

   The labels are set in the small-caps ember treatment the page already uses
   for .svc-eyebrow, so the pattern reads as part of the design rather than as
   a new component. The phone block's 16px-minimum rule already lists dt and
   dd, so both grow on small screens without a rule here. ── */
.svc-type-meta {
  margin: 0 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--navy-12);
}
.svc-type-meta dt {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--svc-ember-text);
  margin-bottom: 3px;
}
.svc-type-meta dd {
  margin: 0 0 12px;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--navy-60);
}
.svc-type-meta dd:last-child { margin-bottom: 0; }
.svc-type-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--svc-ember-text);
  align-self: flex-start;
}
.svc-type-cta:hover { color: var(--orange-dk); }
.svc-type-cta:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.svc-type-cta .svc-arrow { transition: transform var(--t); }
.svc-type-cta:hover .svc-arrow { transform: translateX(3px); }

/* ============================================================
   4. PACKAGES
============================================================ */
#svc-packages { background: var(--white); }

/* Scope clarifier — the room-size prices are for COMPLETE moves. */
.svc-scope-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 90, 31, 0.07);
  border: 1px solid rgba(255, 90, 31, 0.28);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--navy);
  font-weight: 600;
}
.svc-scope-note svg { flex-shrink: 0; margin-top: 3px; color: #A8330B; }

/* Said ONCE instead of on all eight cards. */
.svc-includes-panel {
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-lg);
  background: var(--bone);
  padding: 20px 22px;
  margin-bottom: 22px;
}
.svc-includes-title {
  font-size: 1.0625rem;
  color: var(--navy);
  margin-bottom: 12px;
}
.svc-includes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 6px 22px;
}
.svc-includes-grid li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--navy);
  font-weight: 600;
}
.svc-includes-grid li svg { flex-shrink: 0; margin-top: 3px; color: var(--svc-green-text); }

.svc-pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.svc-pkg {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  min-width: 0;
}
.svc-pkg:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(255, 90, 31, 0.35);
}
.svc-pkg h3 { font-size: 1.125rem; color: var(--navy); margin-bottom: 4px; }

/* Price sits directly under the name — never separated from it, at any
   width, without a tap. */
.svc-pkg-priceline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--navy-06);
}
.svc-pkg-price {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--orange);
  line-height: 1.1;
}
.svc-pkg-price--starting { font-size: 1.25rem; }
.svc-pkg-price-unit {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--navy-60);
}
.svc-pkg-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--navy-80);
  margin-bottom: 12px;
}
.svc-pkg-crew {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 12px;
}
.svc-pkg-crew svg { flex-shrink: 0; margin-top: 2px; color: var(--navy-60); }
.svc-pkg .svc-truck-note { align-self: flex-start; margin-bottom: 16px; }
.svc-pkg .btn-primary { margin-top: auto; width: 100%; }

/* ONE shared disclosure, replacing eight identical paragraphs. */
.svc-pkg-shared-note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--navy-80);
  padding: 14px 18px;
  border-left: 3px solid var(--gold);
  background: var(--bone);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: 16px;
}
.svc-pkg-footnote {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--navy-60);
  max-width: 82ch;
  margin-bottom: 16px;
}
.svc-pkg-links { display: flex; flex-wrap: wrap; gap: 12px 26px; }
.svc-pkg-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--svc-ember-text);
}
.svc-pkg-links a:hover { color: var(--orange-dk); text-decoration: underline; text-underline-offset: 3px; }
.svc-pkg-links a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   5. RENTAL-TRUCK PICKUP AND RETURN
   Offered but REVIEW-GATED (no legal/insurance/licensing sign-off yet).
   Nothing here may read as approved, guaranteed or automatic.
============================================================ */
#svc-truck { background: var(--bone); }
.svc-truck-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 26px;
  align-items: start;
}
.svc-truck-copy { min-width: 0; }
.svc-truck-copy .svc-lede { margin-bottom: 18px; }
.svc-truck-copy .svc-lede strong { color: var(--svc-ember-text); font-weight: 800; }

/* The pending-review badge. Deliberately factual, not alarming. */
.svc-truck-review {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  background: rgba(201, 169, 97, 0.13);
  border: 1px solid rgba(201, 169, 97, 0.55);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--navy);
}
.svc-truck-review svg { flex-shrink: 0; margin-top: 3px; color: #8A6D2F; }

.svc-truck-terms {
  background: var(--white);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  min-width: 0;
}
.svc-truck-terms h3 { font-size: 1.0625rem; color: var(--navy); margin-bottom: 8px; }
.svc-truck-terms-lede {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--navy-80);
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--navy-06);
}
.svc-truck-list li {
  position: relative;
  padding: 5px 0 5px 18px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--navy-80);
}
.svc-truck-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.85em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

/* ============================================================
   6. POSSIBLE ADJUSTMENTS
   A two-column rate grid instead of six bordered cards — same
   information, a fraction of the height.
============================================================ */
#svc-adjust { background: var(--white); }

/* Permanently visible promise. Never inside the accordion. */
.svc-promise {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 24px;
}
.svc-promise svg { flex-shrink: 0; margin-top: 2px; color: var(--gold); }

.svc-rate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
}
.svc-rate-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--navy-06);
}
.svc-rate-row dt {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--navy-80);
  min-width: 0;
}
.svc-rate-value {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
  margin: 0;
}
.svc-rate-value--included { color: var(--svc-green-text); }
.svc-rate-value--review {
  color: var(--navy-60);
  font-weight: 700;
  font-size: 0.875rem;
  white-space: normal;
}

/* Secondary detail. <details> so it works with JS off and carries its own
   expanded state for assistive tech. */
.svc-more {
  margin-top: 20px;
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-md);
  background: var(--bone);
}
.svc-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 12px 18px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  list-style: none;
}
.svc-more > summary::-webkit-details-marker { display: none; }
.svc-more > summary::marker { content: ''; }
.svc-more > summary:hover { color: var(--svc-ember-text); }
.svc-more > summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
  border-radius: var(--radius-md);
}
.svc-more-chevron { flex-shrink: 0; color: var(--navy-60); transition: transform var(--t); }
.svc-more[open] .svc-more-chevron { transform: rotate(180deg); color: var(--svc-ember-text); }
.svc-more-body { padding: 4px 18px 18px; }
.svc-adjust-note {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--navy-60);
  padding-top: 14px;
}

/* ============================================================
   7. WHAT ARRIVES WITH YOUR CREW
============================================================ */
#svc-equipment { background: var(--bone); }
.svc-kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}
.svc-kit-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 18px;
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-md);
  background: var(--white);
  transition: border-color var(--t), transform var(--t);
  min-width: 0;
}
.svc-kit-item:hover { border-color: rgba(255, 90, 31, 0.35); transform: translateY(-3px); }
.svc-kit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-md);
  background: var(--bone);
  border: 1.5px solid var(--navy-12);
  color: var(--navy);
}
.svc-kit-item h3 { font-size: 1rem; color: var(--navy); line-height: 1.35; }
.svc-kit-item p { font-size: 0.875rem; line-height: 1.55; color: var(--navy-60); }

/* ============================================================
   8. THREE-STEP PROCESS
============================================================ */
#svc-process { background: var(--navy); color: var(--white); }
#svc-process .svc-eyebrow { color: var(--gold); }
#svc-process .svc-h2 { color: var(--white); }
#svc-process .svc-rule { background: var(--gold); }

.svc-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 26px;
}
.svc-step {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  padding: 22px 22px;
  min-width: 0;
}
.svc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1.25rem;      /* >=18.66px bold -> AA large-text threshold */
  font-weight: 800;
  margin-bottom: 14px;
}
.svc-step h3 { font-size: 1.125rem; color: var(--white); margin-bottom: 8px; }
.svc-step p { font-size: 0.9375rem; line-height: 1.6; color: rgba(255,255,255,0.78); }

.svc-auth {
  border: 1px solid rgba(201, 169, 97, 0.45);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  background: rgba(201, 169, 97, 0.07);
  margin-bottom: 24px;
}
.svc-auth h3 { font-size: 1.0625rem; color: var(--white); margin-bottom: 9px; }
.svc-auth > p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: 14px;
  max-width: 74ch;
}
.svc-auth-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 22px;
}
.svc-auth-points li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.svc-auth-points li svg { flex-shrink: 0; margin-top: 3px; color: var(--gold); }
.svc-process-cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* ============================================================
   9. TRUST
============================================================ */
#svc-trust { background: var(--bone); }
.svc-trust-media {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 22px;
  margin-bottom: 26px;
  align-items: start;
}
/* Flex column so the caption can be lifted above the description disclosure.
   figcaption is legal only as the FIRST or LAST child of <figure>, and it has
   to be last (a caption above the player is not a caption) — but visually it
   belongs directly under the video, with the "Video description" details
   below it. `order` resolves the two without moving the DOM: nothing here is
   focusable except the details summary, so tab order still matches what a
   sighted keyboard user sees. */
.svc-video-figure {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.svc-video-box  { order: 1; }
.svc-video-figure figcaption { order: 2; }
.svc-video-desc { order: 3; }

/* Same treatment as the two photo captions beside it, so the three figures in
   this section read as one set rather than a player and two pictures. */
.svc-video-figure figcaption {
  max-width: 320px;
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--navy-60);
}
/* Reserved aspect ratio: poster and video can never shift the layout. */
.svc-video-box {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-md);
}
.svc-video-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-video-box video:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }

.svc-video-desc {
  margin-top: 10px;
  /* width:100% matters because .svc-video-figure is a COLUMN FLEX container and
     the <=980px rule gives this element `margin-inline: auto`. An auto inline
     margin on a flex item overrides the default `align-items: stretch`, so
     without an explicit width the <details> collapsed to the width of its own
     summary text — 168px against a 315px video — and centred itself. That made
     the caption above it look like it had spilled out of the card. */
  width: 100%;
  max-width: 320px;
  border: 1px solid var(--navy-12);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.svc-video-desc > summary {
  cursor: pointer;
  padding: 9px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
}
.svc-video-desc > summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.svc-video-desc p { padding: 0 14px 12px; font-size: 0.875rem; line-height: 1.6; color: var(--navy-80); }

/* ── The photo column beside the video ──
   ONE WIDE COLUMN, TWO ROWS — not two side by side. The clip is a portrait
   9:16 and stands 625px tall; two landscape photos laid side by side came to
   280px, so the right-hand column ended 345px short and the section carried a
   block of dead space the width of the page. Measured, not eyeballed.

   Stacking them instead fills that column and gives each photograph 838px of
   width instead of 411px, which is the difference between a thumbnail and a
   picture you can actually read.

   THE HEIGHT IS SET BY THE PICTURES, NOT BY THE VIDEO. Matching the video
   exactly wanted 268px, and at 838px wide that is a 3.1:1 letterbox — it cut
   the padded furniture out of the truck photo entirely and left the caption
   describing something no longer in frame. 306px (2.7:1) keeps the subject of
   both. The stack now runs ~95px past the video, which is 95px of slack in a
   320px-wide column rather than 345px across an 838px one: a twelfth of the
   dead area, in the place where it does not read.

   These are still WIDE frames, so object-position matters — each photo names
   the band that has to survive the crop, derived from where the subject
   actually sits in the file. Below 980px the media grid collapses to one
   column, the stack takes the full page width, and the photos go back to
   two-up — see the responsive block. */
.svc-photo-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: start;
  min-width: 0;
}
.svc-photo { margin: 0; min-width: 0; }
/* Derived from where the subject sits in each file, not chosen by eye.
   `object-position: 50% P` shows the band [P(1-f), P(1-f)+f] where f is the
   fraction of the image height the box can show.

   CREW PHOTO (800x533, f=0.55): his face is 19% down and the wrapped load runs
   from 33% to the bottom edge. P=32% shows 14%-69% — face in, load in.
   TRUCK PHOTO (800x600, f=0.49): the padded furniture and the bagged mattress
   occupy 35%-90%; the top third is empty truck ceiling. P=68% shows 35%-84%,
   which is the load and nothing but the load. */
.svc-photo:first-child img  { object-position: 50% 32%; }
.svc-photo + .svc-photo img { object-position: 50% 68%; }
.svc-photo img {
  width: 100%;
  height: 306px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.svc-photo figcaption {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--navy-60);
  margin-top: 8px;
}

.svc-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  margin-bottom: 22px;
}
.svc-review {
  background: var(--white);
  border: 1.5px solid var(--navy-12);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  min-width: 0;
}
.svc-review blockquote p {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--navy-80);
  margin-bottom: 12px;
}
/* Long review ships as an EXCERPT; the remainder is one click away. The
   quote itself is never edited — only hidden. Collapsed by default, and
   the button is only shown when JS can operate it, so a no-JS visitor
   sees the complete review instead of a dead control. */
.svc-review-rest { display: inline; }   /* no JS -> the FULL review shows */
.svc-review-more {
  display: none;                       /* no JS -> no dead control */
  min-height: 44px;
  padding: 0;
  margin-bottom: 10px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--svc-ember-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.svc-review-more:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.js-clamp .svc-review-rest { display: none; }
.js-clamp .svc-review-more { display: inline-flex; align-items: center; }
.js-clamp .svc-review.is-open .svc-review-rest { display: inline; }

.svc-review cite { display: flex; flex-direction: column; gap: 3px; font-style: normal; }
.svc-review-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--navy);
  font-size: 0.9375rem;
}
.svc-review-meta { font-size: 0.8125rem; color: var(--navy-60); }

.svc-trust-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px 24px;
}
.svc-trust-facts li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--navy-80);
}
.svc-trust-facts li svg { flex-shrink: 0; margin-top: 3px; color: var(--orange); }

/* ============================================================
   10. FAQ
   Native <details>, NOT the global .faq-question accordion — that one
   hides every answer with display:none and needs main.js to reveal them,
   so with JavaScript blocked the answers become unreachable. <details>
   opens with no script, is keyboard-operable, and announces its own state.
============================================================ */
#svc-faq { background: var(--white); }
.svc-faq-list { max-width: 820px; margin-inline: auto; border-top: 1px solid var(--navy-12); }
.svc-faq-item { border-bottom: 1px solid var(--navy-12); }
.svc-faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 16px 14px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
  list-style: none;
  transition: background var(--t), color var(--t);
}
.svc-faq-item > summary::-webkit-details-marker { display: none; }
.svc-faq-item > summary::marker { content: ''; }
.svc-faq-item > summary:hover { background: var(--bone); }
.svc-faq-item > summary:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: -3px;
  border-radius: var(--radius-sm);
}
.svc-faq-item[open] > summary { color: var(--svc-ember-text); background: var(--bone); }
.svc-faq-chevron { flex-shrink: 0; color: var(--navy-60); transition: transform var(--t); }
.svc-faq-item[open] .svc-faq-chevron { transform: rotate(180deg); color: var(--svc-ember-text); }
.svc-faq-answer { padding: 0 14px 18px; }
.svc-faq-answer p { font-size: 1rem; line-height: 1.7; color: var(--navy-80); }
.svc-faq-answer p + p { margin-top: 10px; }

/* ============================================================
   11. FINAL CTA
============================================================ */
#svc-final-cta {
  background: linear-gradient(160deg, #0d1f3c 0%, var(--navy) 70%);
  color: var(--white);
  text-align: center;
  max-width: none;
}
.svc-final-inner { max-width: 720px; margin-inline: auto; }
#svc-final-cta h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.375rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 14px;
}
.svc-final-copy {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: 22px;
}
.svc-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 20px;
}
.svc-final-payment {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  max-width: 58ch;
  margin-inline: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(201, 169, 97, 0.35);
}
.svc-final-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.svc-final-phone:hover { color: var(--orange); }
.svc-final-phone:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ============================================================
   12. ANIMATION
============================================================ */

/* ── HERO: A SINGLE ARRIVAL, AND NO JAVASCRIPT ANYWHERE NEAR IT ──
   THE HERO NO LONGER LOOPS. It used to run an 18-second ambient camera
   drift over an illustrated render. The live hero is now a PHOTOGRAPH of a
   real person, and a photograph of a real person that never stops sliding
   does not read as premium — it reads as a slideshow widget. The brief is
   explicit: subtle premium motion, once, and no constant animation.

   IT IS PURE CSS, DELIBERATELY, AND THIS IS THE IMPORTANT PART. The obvious
   build is an IntersectionObserver that hides the card and reveals it on
   entry — that is how every other reveal on this site works. It was built
   that way first and it was WRONG here, for a reason that only shows up when
   you look: the hero is ABOVE THE FOLD. There is no scroll event to wait
   for, so an observer buys nothing at all — and it can cost everything. An
   observer that never fires (script blocked, script error earlier in the
   file, a browser that throttles callbacks in a tab that is not compositing)
   leaves opacity:0 latched on the largest element on the page. That failure
   was reproduced on this page during development: the card measured
   468x322, in the viewport, at opacity 0. A hero that can be invisible is
   not a trade worth making for a fade.

   So nothing hides it. The animation runs from the moment it paints, fills
   `both`, and ends at the natural state — meaning that at every instant in
   the life of the page, including before any script has run and including
   when animations are disabled entirely, this card resolves to VISIBLE.

   THE MOTION IS ON THE CARD, NOT ON THE IMAGE. Moving the frame moves the
   mat, the hairline and the shadow with it, so the whole object arrives as
   one physical thing. Animating the picture inside a static frame would
   just look like the print slipping in its mount.

   OPACITY AND TRANSFORM ONLY — nothing that touches layout or forces a
   repaint. 14px over 600ms on a long expo tail: far enough to be felt, slow
   enough to read as settling rather than as a transition effect, and short
   enough that it is not meaningfully delaying the LCP element. */
.svc-stage {
  animation: svc-hero-arrive 600ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes svc-hero-arrive {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.svc-scene picture {
  position: absolute;
  inset: 0;
  display: block;
}


/* THE PRICE CHIP DOES NOT ANIMATE, and the rule that used to say it did is
   gone. It read `.svc-play .svc-badge--price { animation: svc-badge-rise … }`,
   but the badges are SIBLINGS of .svc-scene and .svc-play goes ON .svc-scene,
   so the descendant selector never matched a single element — verified in the
   browser: the chip carried zero animations. It was dead before this change
   and is deleted rather than repaired, because the repaired version is worse:
   with a 3.4s delay and `both` fill the price would sit at 0.92 opacity, 4px
   out of place, for the first 3.4 seconds of every visit. It is live text
   carrying the price, and a price that fades in is a price nobody trusts. */

/* ── One-time section reveals, staggered. Gated behind .fade-up, which
   main.js adds at runtime — so no JS means nothing is ever hidden. ── */
/* SHORTER TRAVEL, LONGER DURATION. These were 16px over 420ms, and a scale
   pop for the kit tiles. Both are the house style of cheap reveal: enough
   distance that the eye follows the card instead of reading it, fast enough
   to feel like a transition effect. 10px over 640ms on a long expo tail
   reads as the card settling into place, and the scale pop is gone — a tile
   that grows into position is a slideshow, not a page. */
@keyframes svc-rise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes svc-appear { from { opacity: 0; transform: translateY(7px); }  to { opacity: 1; transform: none; } }

.fade-up .svc-type-card,
.fade-up .svc-pkg,
.fade-up .svc-step,
.fade-up .svc-compare-col { opacity: 0; }

.fade-up.visible .svc-type-card,
.fade-up.visible .svc-pkg,
.fade-up.visible .svc-step,
.fade-up.visible .svc-compare-col {
  animation: svc-rise 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.fade-up.visible .svc-type-card:nth-child(2),
.fade-up.visible .svc-pkg:nth-child(2),
.fade-up.visible .svc-step:nth-child(2),
.fade-up.visible .svc-compare-col:nth-child(2) { animation-delay: 80ms; }
.fade-up.visible .svc-type-card:nth-child(3),
.fade-up.visible .svc-pkg:nth-child(3),
.fade-up.visible .svc-step:nth-child(3) { animation-delay: 160ms; }
.fade-up.visible .svc-type-card:nth-child(4),
.fade-up.visible .svc-pkg:nth-child(4) { animation-delay: 220ms; }
.fade-up.visible .svc-pkg:nth-child(5) { animation-delay: 270ms; }
.fade-up.visible .svc-pkg:nth-child(6) { animation-delay: 310ms; }
.fade-up.visible .svc-pkg:nth-child(7) { animation-delay: 350ms; }
.fade-up.visible .svc-pkg:nth-child(8) { animation-delay: 390ms; }

.fade-up .svc-kit-item { opacity: 0; }
.fade-up.visible .svc-kit-item { animation: svc-appear 560ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.fade-up.visible .svc-kit-item:nth-child(2) { animation-delay:  60ms; }
.fade-up.visible .svc-kit-item:nth-child(3) { animation-delay: 120ms; }
.fade-up.visible .svc-kit-item:nth-child(4) { animation-delay: 180ms; }
.fade-up.visible .svc-kit-item:nth-child(5) { animation-delay: 240ms; }

/* ── The gold section hairline draws itself in, ONCE, as its section arrives.
   52px of 2px-high gold on a transform-only scaleX — the cheapest possible
   animation, and it lands a beat before the cards so the eye has somewhere to
   start. Gated behind .fade-up exactly like the card reveals, so with JS
   blocked the class is never added and every rule is full width from the
   first paint. ── */
.fade-up .svc-rule { transform: scaleX(0); transform-origin: left center; }
.fade-up.visible .svc-rule { animation: svc-rule-draw 760ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both; }
@keyframes svc-rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Equipment icons lift off their card on hover. The CARD already lifts 3px;
   the icon takes another 3px and warms, so the tile reads as a physical thing
   with a chip sitting on it rather than a rectangle that moved. Hover and
   focus-within only — nothing here animates on its own. ── */
.svc-kit-icon {
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              background var(--t), border-color var(--t), color var(--t);
}
.svc-kit-item:hover .svc-kit-icon,
.svc-kit-item:focus-within .svc-kit-icon {
  transform: translateY(-3px);
  background: #FFF1E9;
  border-color: rgba(255, 90, 31, 0.32);
  color: #A8330B;
}

/* ── The booking CTA's arrow steps forward on hover and on keyboard focus.
   FOCUS TOO, deliberately: a hover-only affordance is one a keyboard user
   never gets. The arrow is a real sibling span (see services.html) because
   main.js rewrites the textContent of every translated element, so an arrow
   inside the label could not be targeted and a child of the label would not
   survive a language switch. 3px, the same step .svc-type-cta uses. ── */
#main .btn-primary .svc-arrow { transition: transform var(--t); }
#main .btn-primary:hover .svc-arrow,
#main .btn-primary:focus-visible .svc-arrow { transform: translateX(3px); }

/* ============================================================
   13. RESPONSIVE
============================================================ */

/* ── Tablet / small laptop ── */
@media (max-width: 980px) {
  .svc-compare      { grid-template-columns: minmax(0, 1fr); }
  .svc-truck-inner  { grid-template-columns: minmax(0, 1fr); }
  .svc-steps        { grid-template-columns: minmax(0, 1fr); }
  .svc-trust-media  { grid-template-columns: minmax(0, 1fr); }
  .svc-video-box, .svc-video-desc { margin-inline: auto; }
  /* The media grid is one column now, so the stack has the whole page width.
     Two-up again — a single 1180px-wide photo at 268px tall would be a 4.4:1
     letterbox strip. Back to a normal landscape shape at this width. */
  .svc-photo-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-photo img   { height: 232px; }
}

/* ── Hero collapses, and the illustration is ORDERED between the
   paragraph and the CTAs so it is on screen immediately. .svc-hero-copy
   becomes display:contents so its children join the hero grid directly;
   it is a plain wrapper with no semantics, so nothing is lost. ── */
@media (max-width: 900px) {
  .svc-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .svc-hero-copy { display: contents; }
  .svc-hero-copy > .svc-eyebrow        { order: 1; }
  .svc-hero-copy > h1                  { order: 2; }
  .svc-hero-copy > .svc-hero-sub       { order: 3; margin-bottom: 20px; }
  /* 88px, not 20px: the price chip now hangs 70px BELOW the panel and the
     truck pill sits directly under it. At 20px they overlapped. */
  .svc-hero-media                      { order: 4; margin-bottom: 88px; }
  .svc-hero-copy > .svc-truck-note     { order: 5; }
  .svc-hero-copy > .svc-hero-actions   { order: 6; }
  .svc-hero-copy > .svc-hero-microcopy { order: 7; }
  .svc-hero-copy > .svc-hero-trust     { order: 8; }

  /* ── MOBILE FRAME ──
     The card goes full width and KEEPS the photograph's true 3:2 rather than
     being cropped to a fixed strip. A 186px letterbox slice of this picture
     cuts the owner off at the chest, which defeats the entire point of using
     a real photograph of a real person. Full width at 375px gives a 222px
     print inside the frame — he is small, but he is whole, and the boxes and
     equipment behind him still read.

     THE MAT THINS WITH THE CARD. A 14px mat around a 520px print is a frame;
     the same 14px around a 295px print is a border. 10px keeps the same
     visual proportion, and the aspect-ratio calc() below is restated to
     match it — the two numbers must always agree or the print letterboxes
     inside its own well. */
  .svc-stage {
    max-width: none;
    margin-left: 0;
    --svc-mat: 10px;
    border-radius: 18px;
  }
  .svc-scene { border-radius: calc(18px - var(--svc-mat)); }
  .svc-badge--truck { display: none; }
  .svc-hero-copy > .svc-truck-note { display: inline-flex; margin-bottom: 0; }
  /* Same derivation as desktop, but on a phone the chip is BIGGER, not
     smaller: the 16px-minimum rule below lifts the kicker to 1rem for older
     customers, giving a 74px chip on a ~210px stage. It cannot be shrunk
     without breaking that rule, so it drops clear instead. The obstruction
     that reaches lowest under the chip is the DOLLY's left wheel at 92% of
     stage height, so the offset is chipHeight - 0.08 x stageHeight: 67px at
     the 192px stage a 320px phone gives. 70px, with cushion — which puts the
     chip under the artwork as a price strip rather than on top of it. */
  .svc-badge--price { right: 8px; bottom: -70px; }
}

/* ── Phone ── */
@media (max-width: 640px) {
  #svc-hero, #svc-how, #svc-types, #svc-packages, #svc-truck,
  #svc-adjust, #svc-equipment, #svc-process, #svc-trust, #svc-faq,
  #svc-final-cta { padding-top: 38px; padding-bottom: 38px; }
  /* The fixed nav + the injected announcement bar sit over the top of the
     first section, so the hero needs more clearance than the rest. */
  #svc-hero { padding-top: 56px; }

  .svc-check-list--two { columns: 1; }
  .svc-rate-grid       { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* ONE COLUMN ON PHONES. Two-up put each photograph in a 152x130 box — a
     thumbnail, on the section whose whole job is "see the work before you book
     it", and small enough that the crop no longer showed what the caption
     described. Full width gives 343px x 200px at 375px, which is a picture.
     The section grows by ~200px, which is the right trade on the one page
     where proof matters more than scroll length. */
  .svc-photo-stack     { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .svc-photo img       { height: 200px; }

  /* Full-width, >=48px, >=16px apart. */
  .svc-hero-actions, .svc-process-cta, .svc-final-actions { flex-direction: column; gap: 16px; }
  .svc-hero-actions .btn-primary, .svc-hero-actions .btn-secondary,
  .svc-process-cta .btn-primary, .svc-process-cta .btn-secondary,
  .svc-final-actions .btn-primary, .svc-final-actions .btn-secondary { width: 100%; min-height: 52px; }
  .svc-truck-copy .btn-primary { width: 100%; min-height: 52px; }

  /* One column — no carousel, no swiping to compare prices. */
  .svc-type-grid, .svc-pkg-grid, .svc-reviews { grid-template-columns: minmax(0, 1fr); }
  .svc-kit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .svc-compare-col { padding: 18px 16px; }
  .svc-type-card   { padding: 18px 16px; }
  .svc-pkg         { padding: 16px 16px 14px; }
  .svc-step        { padding: 18px 16px; }
  .svc-auth        { padding: 18px 16px; }
  .svc-promise     { padding: 16px 16px; flex-direction: column; gap: 10px; }
  .svc-truck-terms { padding: 16px 16px 12px; }
  .svc-includes-panel { padding: 16px 16px; }
  .svc-kit-item    { padding: 16px 14px; gap: 8px; }

  /* Tighter vertical rhythm inside the cards — the biggest single source of
     phone height was 8 package cards + 5 service cards + 5 kit cards each
     carrying desktop-sized gaps. */
  .svc-lede            { margin-bottom: 20px; }
  .svc-rule            { margin-bottom: 16px; }
  .svc-pkg h3          { margin-bottom: 2px; }
  .svc-pkg-priceline   { padding-bottom: 9px; margin-bottom: 9px; }
  .svc-pkg-desc        { margin-bottom: 9px; line-height: 1.45; }
  .svc-pkg-crew        { margin-bottom: 9px; }
  .svc-pkg .svc-truck-note { margin-bottom: 12px; }
  .svc-type-card p     { margin-bottom: 12px; line-height: 1.5; }
  .svc-type-icon       { width: 42px; height: 42px; margin-bottom: 10px; }
  .svc-kit-icon        { width: 40px; height: 40px; }
  .svc-kit-item p      { line-height: 1.45; }
  .svc-compare-head    { margin-bottom: 10px; }
  .svc-check-list li   { padding: 5px 0; }
  .svc-includes-title  { margin-bottom: 9px; }
  .svc-step-num        { width: 36px; height: 36px; margin-bottom: 10px; }
  .svc-steps           { gap: 14px; margin-bottom: 20px; }
  .svc-trust-media     { gap: 16px; margin-bottom: 20px; }
  /* The tighter-rhythm pass used to drop these to 130px. It no longer does —
     they are one-up now (see the 640px block), and 130px of a full-width
     landscape frame is a letterbox slot, not a photograph. 190px keeps the
     shape while still saving height against the 200px above. */
  .svc-photo img       { height: 190px; }
  .svc-photo figcaption{ margin-top: 6px; line-height: 1.4; }
  .svc-video-desc      { margin-top: 8px; }
  .svc-reviews         { gap: 14px; margin-bottom: 18px; }
  .svc-review          { padding: 18px 18px 14px; }

  /* ── 16px MINIMUM for everything readable. The audience includes older
     customers, so nothing on a phone drops into fine print. Sizes go on
     the CONTAINERS so the inner spans carrying data-en/data-es inherit.
     The only exception is .svc-eyebrow — an uppercase kicker label above
     an H2, not reading text — which stops at 14px. ── */
  #main p, #main li, #main dt, #main dd, #main figcaption,
  #main summary, #main cite, #main blockquote p, #main button,
  .svc-pkg-price-unit, .svc-badge-kicker, .svc-review-meta,
  .svc-review-name, .svc-type-cta, .svc-final-phone { font-size: 1rem; }
  .svc-eyebrow { font-size: 0.875rem; }

  .svc-pkg-price { font-size: 2rem; }
  .svc-pkg-price--starting { font-size: 1.375rem; }

  /* ONE mobile CTA area: the shared sticky #mobile-cta-bar. The floating
     text chip is hidden so the two never compete for the same corner.
     Texting stays one tap away via the hero and final-CTA buttons. */
  #text-widget { display: none; }
}

@media (max-width: 400px) {
  .svc-kit-grid { grid-template-columns: minmax(0, 1fr); }
  .svc-badge--price { right: -6px; padding: 10px 15px; }
  .svc-badge--price b { font-size: 1.625rem; }
  .svc-badge--truck { left: -6px; bottom: 18px; font-size: .8rem; padding: 8px 12px; }
}

/* Only genuinely tiny screens need the rate rows to stack; at 375px the
   labels fit on one line and stacking doubled the section's height. */
@media (max-width: 344px) {
  .svc-rate-row    { flex-direction: column; align-items: flex-start; gap: 2px; }
  .svc-rate-value  { text-align: left; }
  /* The .svc-photo-stack single-column override that used to live here is
     gone: the 640px block now puts the photos one-up for every phone, so this
     was a rule that could never change anything. */
}

/* ============================================================
   14. REDUCED MOTION — everything lands on its end state.
============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* The hero is NOT hidden, dimmed, emptied or swapped for something else —
     the framed photograph is simply THERE, at full opacity and full size, on
     the first frame. Someone who asked for less motion did not ask for a
     worse page, and certainly not for a page whose hero never appears.

     Cancelling the arrival is safe BECAUSE nothing hides the card in the
     first place: the entrance is a pure-CSS animation whose end state is the
     natural state, so killing it here lands exactly where it would have
     finished. There is no JS-set class to unwind and no way for this to
     leave the hero at opacity 0 — see the arrival note in section 12.

     The old rules here froze a pan/bleed transform that no longer exists —
     the drift is gone and the photograph is drawn 1:1 in its frame for
     everyone. Layout is untouched either way: the well reserves its space
     through aspect-ratio, and none of this ever participated in layout. */
  .svc-stage {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .fade-up .svc-type-card,
  .fade-up .svc-pkg,
  .fade-up .svc-step,
  .fade-up .svc-compare-col,
  .fade-up .svc-kit-item {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .svc-type-card:hover, .svc-pkg:hover, .svc-kit-item:hover { transform: none; }
  .svc-type-cta:hover .svc-arrow,
  .btn-primary:hover .svc-arrow,
  .btn-primary:focus-visible .svc-arrow { transform: none; }
  .svc-kit-item:hover .svc-kit-icon,
  .svc-kit-item:focus-within .svc-kit-icon { transform: none; }
  /* The hairline is FULL WIDTH, not scaled to zero waiting for an animation
     that will never run. */
  .fade-up .svc-rule,
  .fade-up.visible .svc-rule { transform: none !important; animation: none !important; }
}

/* =====================================================================
   DAMAGE PROMISE (#svc-damage)
   The trust section people actually look for. Palette-locked: Ember
   Orange for the numbered steps, the green/ember text tokens for the
   covered / not-covered columns, Navy for the promise band. No gold —
   gold stays reserved for the hero underline and the "popular" border.
   Both columns are deliberately given equal visual weight; hiding the
   exclusions in small print is what makes customers distrust them.
===================================================================== */
#svc-damage { background: var(--white); }

.svc-dmg-lead {
  max-width: 62ch;
  margin: 0 0 30px;
}
.svc-dmg-lead p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--navy-80);
}

/* ── How to report: three steps ─────────────────────────────────── */
.svc-dmg-steps {
  list-style: none;
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  counter-reset: dmgstep;
}
.svc-dmg-steps > li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num title" "num body";
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  padding: 20px 22px;
  background: var(--bone);
  border-radius: var(--radius-lg);
  border: 1px solid var(--navy-06);
}
.svc-dmg-step-n {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.svc-dmg-step-t {
  grid-area: title;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.svc-dmg-step-b {
  grid-area: body;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--navy-60);
}

/* ── Covered vs not covered ─────────────────────────────────────── */
.svc-dmg-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 26px;
}
.svc-dmg-col {
  padding: 26px 26px 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--navy-12);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.svc-dmg-col--yes { border-top: 3px solid var(--svc-green-text); }
.svc-dmg-col--no  { border-top: 3px solid var(--navy-40); }

.svc-dmg-col h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
}
.svc-dmg-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.svc-dmg-col li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--navy-80);
}
.svc-dmg-col li svg { flex-shrink: 0; margin-top: 3px; }
.svc-dmg-col--yes li svg { color: var(--svc-green-text); }
.svc-dmg-col--no  li svg { color: var(--navy-40); }

/* ── Closing note ───────────────────────────────────────────────── */
.svc-dmg-note {
  margin: 0;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: var(--navy);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9375rem;
  line-height: 1.65;
  border-left: 3px solid var(--orange);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .svc-dmg-steps { grid-template-columns: 1fr; gap: 12px; }
  .svc-dmg-steps > li { padding: 16px 18px; }
  .svc-dmg-grid  { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 560px) {
  .svc-dmg-lead p { font-size: 1rem; }
  .svc-dmg-col    { padding: 22px 20px 18px; }
  .svc-dmg-note   { padding: 18px 20px; }
}