/* ============================================================
   ConFoot — mobile + small-tablet overrides.
   Loaded via <link rel="stylesheet" href="/assets/css/mobile.css" media="(max-width: 760px)">
   ============================================================ */

:root { --content-pad-x: 6vw !important; }    /* readable margins on phones */

/* Prevent horizontal scroll. The desktop CSS has a few rules that overflow
   the viewport on phones (.where h2 nowrap, big -50vw margins on .stand-leg,
   etc). Clamp at the document level. */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }

/* HEADER — fixed logo box so it stays identical on every page. */
.site-header { padding: 14px 0 !important; }
.site-header .container { padding: 0 6vw !important; align-items: center !important; }
.logo {
  display: block !important;
  width: 110px !important;
  max-width: 110px !important;
  margin-left: 0 !important;
  padding: 0 !important;
}
.logo img { width: 110px !important; height: auto !important; }

.menu-btn { width: 44px !important; height: 34px !important; padding: 0 !important; }
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after { width: 44px !important; height: 5px !important; }
.menu-btn span::before { top: -11px !important; }
.menu-btn span::after  { top:  11px !important; }

/* HERO (homepage) — keep the desktop pattern on mobile too: leg pinned to
   the right side of the section, text on the left, both filling the same
   vertical space. The leg image is portrait, so 40% width × 100% height of
   a tall hero gives a slot that the leg fills floor-to-ceiling. */
.hero {
  position: relative !important;
  min-height: 115vw !important;
  height: auto !important;
  padding: 96px 0 32px !important;
  display: block !important;             /* not flex — let .hero-leg be absolute */
  overflow: hidden !important;
}
.hero .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 0 6vw !important;
  max-width: none !important;
}
.hero-copy {
  max-width: 60% !important;             /* leave room for the leg on the right */
  position: relative !important;
  z-index: 3 !important;
}
.hero-copy h1 {
  font-size: 12vw !important;
  line-height: 0.95 !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
}
.hero-copy p {
  font-size: 15px !important;
  line-height: 1.4 !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin-bottom: 14px !important;
}
.hero-copy p + p { margin-top: 10px !important; }

/* Container fills the whole hero section so the absolutely-positioned img
   inside it has a definite height to compute `height: 100%` against. The
   image renders at natural aspect at full section height, pinned to the
   right — extends leftward and can pass behind the text (text has higher
   z-index). */
.hero-leg,
.hero-leg.img-slot,
.hero-leg.img-slot.has-image {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 1 !important;
}
.hero-leg img,
.hero-leg.img-slot > img,
.hero-leg.img-slot.has-image > img {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  inset: auto !important;
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: unset !important;
  object-position: unset !important;
  transform: none !important;
}

/* PRODUCT HERO (subpages) — same right-pinned leg pattern as the home hero. */
.product-hero {
  position: relative !important;
  min-height: 115vw !important;
  padding: 96px 0 32px !important;
  display: block !important;
  overflow: hidden !important;
}
.product-hero .container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  padding: 0 6vw !important;
  max-width: none !important;
}
.product-hero-copy {
  max-width: 60% !important;
  position: relative !important;
  z-index: 3 !important;
}
.product-hero-copy h1 { font-size: 18vw !important; padding: 0 !important; margin-bottom: 12px !important; line-height: 0.95 !important; }
.product-hero-copy p { font-size: 15px !important; line-height: 1.4 !important; max-width: 100% !important; }
.product-hero-image,
.product-hero-image.img-slot,
.product-hero-image.img-slot.has-image {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  z-index: 1 !important;
}
.product-hero-image img,
.product-hero-image.img-slot > img,
.product-hero-image.img-slot.has-image > img {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  inset: auto !important;
  height: 100% !important;
  width: auto !important;
  max-width: none !important;
  object-fit: unset !important;
  object-position: unset !important;
  transform: none !important;
}

/* STORY HERO (Our Story) + PAGE HERO (find/become/contact) */
.story-hero, .page-hero { padding: 96px 0 24px !important; }
.story-hero .container, .page-hero .container { padding: 0 6vw !important; }
.story-hero h1 { font-size: clamp(36px, 11vw, 72px) !important; max-width: 100% !important; margin-bottom: 16px !important; }
.story-hero .standfirst { font-size: 17px !important; line-height: 1.5 !important; max-width: 100% !important; }
.page-hero h1 { font-size: clamp(36px, 11vw, 72px) !important; max-width: 100% !important; margin-bottom: 16px !important; }
.page-hero p { font-size: 17px !important; line-height: 1.5 !important; max-width: 100% !important; }
.page-hero .eyebrow, .story-hero .eyebrow { font-size: 11px !important; }

/* SECTION DEFAULTS */
section { padding: 40px 0 !important; }
section .container { padding: 0 6vw !important; }
section h2 { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.05 !important; max-width: 100% !important; margin-bottom: 18px !important; }
section h3 { font-size: clamp(20px, 5vw, 28px) !important; }
section p { font-size: 16px !important; line-height: 1.55 !important; max-width: 100% !important; }
section p + p { margin-top: 14px !important; }

/* TRUSTED — center the grid, keep big numbers inside; widen container */
.trusted .container { padding: 0 6vw !important; }
.trusted-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.trusted-grid h2 { max-width: 100% !important; text-align: left !important; }
.trusted-body p { font-size: 16px !important; max-width: 100% !important; }
.stats {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 28px 16px !important;
  margin-top: 24px !important;
  align-items: start !important;
}
/* Stack number above label per stat — number gets the full cell width so
   +10000 doesn't get clipped by the inline label. */
.stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  min-width: 0 !important;
}
.stat-num {
  font-size: clamp(28px, 11vw, 48px) !important;
  line-height: 0.95 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  padding: 0 !important;
}
.stat-label { font-size: 13px !important; line-height: 1.25 !important; padding: 0 !important; }

/* LEGWORK / STAND — release the vw-height clamps from <style id="typo-overrides">
   on the homepage (.legwork{height:47.5vw;overflow:hidden}, .stand{height:47vw;
   overflow:hidden}). On desktop those keep the section to a single screen; on
   mobile they clip the stacked content into a sliver.
   padding-top:0 so the leg image is flush with the section's top edge. */
.legwork, .stand {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.legwork { padding: 0 0 40px !important; }      /* legwork image flush at section top */
.stand   { padding: 40px 0 0 !important; }       /* stand: text first, image below — no bottom padding so leg meets the footer */
.legwork .container,
.stand .container {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  padding: 0 !important;
  align-items: stretch !important;
  height: auto !important;
  grid-template-rows: auto !important;
}
/* Legwork image sits at the top of its section (already first in DOM). Stand
   image stays in DOM order — text first, leg below — per user preference. */
.legwork .legwork-image {
  order: -1 !important;
  margin: 0 !important;
}
.stand .stand-leg { margin: 0 !important; }
/* Text wrapper gets the side padding that was on the container. */
.legwork .container > div:not(.legwork-image),
.stand .container > div:not(.stand-leg) {
  padding: 0 6vw !important;
}
/* These typo-override rules (specificity 0,1,1) beat my generic section
   rules on mobile, so override directly. */
.legwork p { font-size: 16px !important; line-height: 1.55 !important; max-width: 100% !important; width: auto !important; }
.stand p { font-size: 16px !important; line-height: 1.55 !important; max-width: 100% !important; width: auto !important; }
.trusted-grid p { font-size: 16px !important; line-height: 1.55 !important; max-width: 100% !important; }
.where h2 { font-size: clamp(28px, 8vw, 44px) !important; line-height: 1.05 !important; white-space: normal !important; }
.where-sub { font-size: 16px !important; line-height: 1.45 !important; }
/* Render the editorial leg shots at their natural aspect ratio (image fills
   width, height auto). The whole leg is visible top-to-bottom, no crop. */
.legwork-image,
.legwork-image.img-slot,
.legwork-image.img-slot.has-image,
.stand-leg,
.stand-leg.img-slot,
.stand-leg.img-slot.has-image {
  position: relative !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  align-self: auto !important;
  overflow: hidden !important;
  background: transparent !important;
}
.legwork-image > img,
.legwork-image.img-slot > img,
.legwork-image.img-slot.has-image > img,
.stand-leg > img,
.stand-leg.img-slot > img,
.stand-leg.img-slot.has-image > img {
  position: relative !important;
  inset: auto !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: unset !important;
  object-position: unset !important;
  transform: none !important;
}
/* The stand-leg source image (Left--1-.jpg) is a head-shot — the leg fills
   the top ~67% of the frame and the bottom 33% is empty black background.
   Clip the container to 100vw so the empty portion is cut off. Image is
   pinned to the top of the container so the leg head stays visible. */
.stand-leg,
.stand-leg.img-slot,
.stand-leg.img-slot.has-image {
  max-height: 100vw !important;
  overflow: hidden !important;
}

/* HOW IT WORKS — step cards full-width, badge+text flush against image */
.how-steps {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.step {
  display: block !important;
  background: #fff;
  border-radius: 4px;
  overflow: hidden !important;
}
.step-head {
  height: auto !important;
  min-height: 56px;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  align-items: stretch !important;     /* stretch the badge to fill full row height — no white slivers above/below */
  margin-bottom: 0 !important;
}
.step-num {
  width: 56px !important;
  height: auto !important;
  min-height: 56px !important;
  align-self: stretch !important;
}
.step-text {
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  font-size: 15px !important;
  line-height: 1.35 !important;
  padding: 10px 14px !important;
  margin: 0 !important;
}
.step-img { margin-top: 0 !important; aspect-ratio: 16 / 10 !important; }

/* PRODUCTS — list stacks, each row collapses */
.products .container { padding: 0 6vw !important; }
.products-intro {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.products-intro h2 { max-width: 100% !important; font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.05 !important; }
.products-intro p { max-width: 100% !important; font-size: 17px !important; }
.products-sub { font-size: 17px !important; line-height: 1.4 !important; }
.product {
  grid-template-columns: 1fr !important;
  grid-template-rows: auto !important;
  gap: 14px !important;
  padding: 28px 0 !important;
}
.product > h3,
.product > .product-body,
.product > .product-specs,
.product > .product-img { grid-column: 1 !important; grid-row: auto !important; }
.product h3 { font-size: clamp(22px, 6vw, 30px) !important; line-height: 1.1 !important; }
.product .desc { font-size: 16px !important; line-height: 1.5 !important; max-width: 100% !important; }
.product-specs { font-size: 16px !important; line-height: 1.55 !important; padding-top: 0 !important; }
.product-specs div { margin-bottom: 4px; }
.product .read-more { font-size: 13px !important; }
/* Product images are portrait leg shots — taller box + contain so the whole
   leg shows top-to-bottom without cropping. */
.product-img { aspect-ratio: 3 / 4 !important; height: auto !important; max-height: none !important; margin-top: 8px; }
.product-img > img,
.product-img.img-slot > img,
.product-img.img-slot.has-image > img {
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}

/* TRUSTED-BY logos — 3 columns × 6 rows for the 18 logos, so each gets a
   bit more breathing room than the cramped 4-col grid. */
.trusted-by-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px 16px !important;
  align-items: center !important;
  justify-items: center !important;
}
.trusted-by-grid img { max-height: 32px !important; max-width: 100% !important; object-fit: contain !important; }
.trusted-by h5 { font-size: 13px !important; }

/* WHERE — left text first, image stack below */
.where-grid {
  grid-template-columns: 1fr !important;
  gap: 28px !important;
}
.where-cells {
  grid-template-columns: 1fr 1fr !important;
  column-gap: 16px !important;
  row-gap: 28px !important;
}
.where-cell h4 { font-size: 15px !important; line-height: 1.25 !important; }
.where-cell p { font-size: 14px !important; line-height: 1.45 !important; }
.where-images { flex-direction: row !important; gap: 8px !important; }
.where-image { aspect-ratio: 4 / 3 !important; flex: 1; }

/* USE-CASES (product pages) — 2-col looks better than 3 on phones */
.use-cases-grid { grid-template-columns: 1fr 1fr !important; gap: 12px 16px !important; }
.use-cases-grid li { padding: 16px 0 !important; font-size: 15px !important; }

/* SPECS (product pages) */
.specs .container { grid-template-columns: 1fr !important; gap: 24px !important; }
.specs-list { font-size: 15px !important; }
.specs-list li { grid-template-columns: 9ch 1fr !important; gap: 12px !important; padding: 12px 0 !important; }
.specs-list .k { font-size: 11px !important; }
.specs-list .v { font-size: 15px !important; }

/* FIND-A-DEALER — bigger dealer text, single column */
.dealer-grid {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}
.region h2 { font-size: clamp(28px, 8vw, 40px) !important; margin-bottom: 24px !important; }
.region h2 .label { display: block !important; margin: 0 0 6px !important; font-size: 11px !important; }
.country > h3 { font-size: 14px !important; padding-bottom: 6px !important; }
.country { gap: 14px !important; }
.dealer .name { font-size: 17px !important; line-height: 1.25 !important; }
.dealer .contact { font-size: 15px !important; line-height: 1.55 !important; }
.dealer .contact a { word-break: break-word; }
.hq h2 { font-size: clamp(28px, 8vw, 40px) !important; }
.hq p { font-size: 16px !important; }

/* BECOME-A-DEALER */
.benefits-grid,
.criteria-grid {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.benefits-grid li { font-size: 16px !important; padding: 18px 0 !important; }
.benefits-grid li strong { font-size: 17px !important; }
.profile ol li {
  grid-template-columns: 48px 1fr !important;
  column-gap: 16px !important;
  padding: 20px 0 !important;
}
.profile ol li::before { font-size: 22px !important; }
.profile ol li strong { font-size: 16px !important; }
.profile ol li span { font-size: 15px !important; line-height: 1.5 !important; }

/* CONTACT — Mia stacks vertically */
.person .container {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
}
/* Mia's portrait is 1506×2312 (aspect ~0.65). Keep a portrait box on mobile
   so the head + shoulders + arms stay in frame; 4/3 landscape crop chopped
   off the face/hair. object-position bias toward the head end. */
.person figure { aspect-ratio: 3 / 4 !important; max-height: none !important; }
.person figure img { object-position: 50% 15% !important; }
.person .name { font-size: clamp(28px, 9vw, 40px) !important; }
.person .role { font-size: 11px !important; }
.person p { font-size: 16px !important; line-height: 1.55 !important; }
.person .lines { font-size: 16px !important; }
.general { padding: 56px 0 !important; }
.general .grid { grid-template-columns: 1fr 1fr !important; gap: 22px !important; }
.general .grid h3 { font-size: 11px !important; }
.general .grid p { font-size: 15px !important; line-height: 1.45 !important; word-break: break-word; }

/* OUR STORY (editorial) */
.article { padding: 48px 0 !important; }
.article .container { padding: 0 6vw !important; }
.article .col { max-width: 100% !important; }
.article h2 { font-size: clamp(22px, 6vw, 30px) !important; margin: 40px 0 14px !important; }
.article p { font-size: 17px !important; line-height: 1.55 !important; }
.article p.lead { font-size: 18px !important; }
.article figure { margin: 32px 0 !important; }
.article .meta { font-size: 11px !important; gap: 16px !important; margin-bottom: 32px !important; padding-bottom: 14px !important; }
.pull-quote { margin: 48px 0 !important; padding: 28px 0 !important; }
.pull-quote blockquote { font-size: 22px !important; line-height: 1.25 !important; max-width: 100% !important; }
.pull-quote cite { font-size: 12px !important; }

/* CTA */
.cta { padding: 48px 0 !important; }
.cta h2 { font-size: clamp(32px, 9vw, 56px) !important; margin-bottom: 16px !important; }
.cta p { font-size: 16px !important; max-width: 100% !important; padding: 0 6vw; }
.cta-row { flex-direction: column !important; gap: 10px !important; padding: 0 6vw; }
.cta-row .btn { display: block !important; width: 100% !important; padding: 18px !important; }
.btn { font-size: 14px !important; padding: 16px 28px !important; }

/* FOOTER / closing back-link */
.closing { padding: 28px 0 48px !important; }
.closing .container { padding: 0 6vw !important; }

/* MAIN MENU OVERLAY */
#main-menu { padding: 14px 6vw 24px !important; }
#main-menu .menu-top { align-items: center !important; }
#main-menu .menu-close { width: 44px !important; height: 34px !important; }
#main-menu .menu-close::before,
#main-menu .menu-close::after { width: 38px !important; height: 5px !important; }
#main-menu nav { gap: 10px !important; }
#main-menu nav a { font-size: clamp(26px, 7vw, 44px) !important; }

/* HIDE dev chrome + annotation chrome on mobile */
#typo-popup, #typo-toggle, #edit-toggle, #wysiwyg-toolbar,
#edit-save-hint, #layout-tool, #annotation-ui,
.annotation-marker, .annotation-popup,
.img-slot-hint, #copy-html-btn { display: none !important; }