/* The hidden attribute must actually hide. See note in admin.css. */
[hidden] { display: none !important; }

/* .shell is the width container and is always combined with a block class
   that owns its own vertical rhythm. Its padding is therefore declared as
   left and right longhands, never as a shorthand, so a responsive override
   cannot silently wipe the top and bottom spacing of whatever it wraps.
   That single mistake removed the spacing from both banners, the hero, the
   strip and the whole footer on every screen under 680px. */

/* base.css - tokens, reset, typography
   Mark's Cart Rentals. Palette taken from the brand logo:
   cart green #1bac4b and wordmark blue #2560ad. */

:root {
  --green:        #1bac4b;
  --green-dark:   #158c3c;
  --green-soft:   #e8f7ee;
  --blue:         #2560ad;
  --blue-dark:    #1b4783;
  --blue-soft:    #eaf1fa;

  --ink:          #16202e;
  --muted:        #58657a;
  --line:         #e2e9f1;
  --band:         #f1f6fb;
  --sand:         #fbf7ef;
  --white:        #ffffff;

  --font-display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body:    "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale. One locked size per level, used sitewide, never
     overridden in a component. H1 to H3 are each unique in size, weight
     and family. H4 to H6 share one size and one weight and differ only by
     colour or italic, never by weight. */
  --fs-h1:      60px;
  --fs-h2:      50px;
  --fs-h3:      40px;

  /* H4, H5 and H6 used to share one size. They are now three steps, so each
     has its own token. --fs-h456 stays as an alias of H4 because components
     across the site already reference it, and silently repointing those at a
     different size would resize half the interface without anyone asking. */
  --fs-h4:      34px;
  --fs-h5:      26px;
  --fs-h6:      20px;
  --fs-h456:    var(--fs-h4);

  --fs-body:    18px;
  --fs-small:   15px;
  --fs-eyebrow: 16px;
  --fs-micro:   13px;
  --fs-btn:     16px;   /* buttons, one size sitewide */

  /* Display numerals only: prices, stat figures, step numbers. These are
     not headings and carry no hierarchy, so they live apart from the
     heading scale and are the only other place 700 is allowed. */
  --fs-num-xl:  42px;
  --fs-num-lg:  30px;
  --fs-num-md:  22px;

  /* Four weights exist on this site. Nothing else is allowed. */
  --w-body: 400;   /* body copy, and every paragraph on the site  */
  --w-ui:   600;   /* headings below H2, buttons, nav, labels     */
  --w-h2:   600;   /* H2 only, on the condensed face              */
  --w-h1:   700;   /* H1 and large display numerals only          */

  /* Line heights, tied to the level rather than guessed per block. */
  --lh-h1:   1.1;
  --lh-h2:   1.16;
  --lh-h3:   1.3;
  --lh-h456: 1.4;
  --lh-body: 1.65;

  --pad-section: 88px;
  --pad-card:    30px;
  --gap-grid:    22px;
  --shell:       1320px;

  --radius:      14px;
  --radius-sm:   9px;
  --shadow:      0 2px 10px rgba(22, 32, 46, .07);
  --shadow-lift: 0 12px 30px rgba(22, 32, 46, .12);
  --ease:        cubic-bezier(.22, .61, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

html,
body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
iframe { display: block; max-width: 100%; }

/* Nothing may push the page wider than the screen. */
table { max-width: 100%; }

img { height: auto; }

/* ------------------------------------------------------------------
   Heading hierarchy

   The hierarchy is carried by size and family, not by making everything
   bold. Only H1 and large display numerals use 700. Reading down the
   page the weight goes 700, 600, 600, 600, and the body sits at 400,
   so the eye has somewhere to rest.

   H1  42px  700  condensed          one per page
   H2  30px  600  condensed
   H3  22px  600  body face
   H4  17px  600  body face, blue
   H5  17px  600  body face, ink
   H6  17px  600  body face, green, italic
   p   16.5 400  body face
------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 14px;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--w-h1);
  line-height: var(--lh-h1);
  letter-spacing: .004em;
  max-width: 15em;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--w-h2);
  line-height: var(--lh-h2);
  letter-spacing: .006em;
  max-width: 19em;
}

h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--w-ui);
  line-height: var(--lh-h3);
  letter-spacing: 0;
  max-width: 24em;
}

/* H4, H5 and H6 now step down in size as well as colour. They keep the same
   family, weight and line height so the ladder still reads as one system. */
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--w-ui);
  line-height: var(--lh-h456);
  letter-spacing: 0;
  max-width: 100%;
  margin-bottom: 10px;
}

h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

h4 { color: var(--blue); }
h5 { color: var(--ink); }
h6 { color: var(--green-dark); font-style: italic; }

/* One paragraph size sitewide. */
p {
  margin: 0 0 16px;
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
}

p:last-child { margin-bottom: 0; }

li, td, th, label, input, select, textarea, button {
  font-size: var(--fs-body);
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); text-decoration: underline; }

ul { margin: 0 0 16px; padding: 0; list-style: none; }

strong, b { font-weight: var(--w-ui); }

address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--blue-dark);
  color: var(--white);
  padding: 10px 16px;
  font-weight: var(--w-ui);
}
.skip-link:focus { left: 8px; top: 8px; }

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green-dark);
}
.eyebrow--light { color: #bdf0cf; }

.center { text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Available to screen readers, invisible on screen. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
}