/* =============================================================
   KJC Landing Page — Kristopher James Company
   Responsive, semantic, flow-based layout.
   Desktop (>=1200) matches the Figma design; tablet (768-1199)
   and mobile (<768) reflow. Mobile-first base + min-width queries.
   ============================================================= */


:root {
  /* Palette (exact Figma values) */
  --navy:  #143157;
  --gold:  #F0C74C;
  --blue:  #007EB9;
  --sky:   #90D9FB;
  --white: #FFFFFF;
  --ink:   #000000;

  /* Brand font: Avenir Next where available, Mulish fallback */
  --ff: 'Avenir Next','Avenir','Mulish',-apple-system,BlinkMacSystemFont,
        'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  /* Layout */
  /* Whole-page "zoom out". body{zoom:var(--zoom)} scales the whole page like a
     browser zoom (and, unlike transform:scale, it shrinks the layout height too, so
     there is no phantom gap at the bottom). The one thing zoom does NOT fix is
     100vw-based full-bleed (those elements end up scaled to zoom*100vw, leaving a
     side gap), so full-bleed calcs use var(--pagew) = 100vw / zoom instead of 100vw.
     Erring slightly large is safe here: any overshoot is clipped by overflow-x. */
  --zoom: 0.9;
  --pagew: calc(100vw / var(--zoom));
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 100px);
  --section-y: clamp(48px, 7vw, 104px);

  /* Radii */
  --r-sm: 10px;
  --r-md: 15px;
  --r-lg: 20px;
  --r-pill: 50px;

  /* Fluid type scale (max = exact Figma px) */
  --t-display: clamp(2.75rem, 6vw, 5rem);     /* 80 */
  --t-1:       clamp(2.125rem, 5vw, 3.75rem); /* 60 */
  --t-2:       clamp(1.875rem, 4.2vw, 3.125rem); /* 50 */
  --t-3:       clamp(1.625rem, 3.2vw, 2.5rem);   /* 40 */
  --t-4:       clamp(1.625rem, 3vw, 2.375rem);   /* 38 */
  --t-5:       clamp(1.375rem, 2.6vw, 2rem);     /* 32 */
  --t-6:       clamp(1.25rem, 2.1vw, 1.75rem);   /* 28 */
  --lead:      clamp(1.125rem, 1.5vw, 1.5rem);   /* 24 */
  --body:      clamp(1.0625rem, 1.3vw, 1.375rem);/* 22 */
  --body-sm:   clamp(1rem, 1.05vw, 1.125rem);    /* 18 */
  --cap:       clamp(0.875rem, 0.95vw, 1rem);    /* 16 */

  --shadow-card: 0 10px 30px rgba(20,49,87,.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  zoom: var(--zoom);
  margin: 0;
  font-family: var(--ff);
  color: var(--navy);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1,h2,h3,h4,h5,h6,p,ul,blockquote,figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
strong { font-weight: 700; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); position: relative; }
.flow > * + * { margin-top: 1.05em; }
.flow > * + .mt, .mt { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.flow > * + .mt-xl, .mt-xl { margin-top: clamp(36px, 4.6vw, 68px); }
.center { text-align: center; }
.center-block { max-width: 960px; margin-inline: auto; text-align: center; }
.mw-head { max-width: 600px; margin-inline: auto; }
.narrow { max-width: 56ch; }
/* intro paragraph is constrained (not full row) so the decorative gold lines have
   clear space on the right; widens to a readable column on small screens */
.intro-lead { max-width: 60ch; }
@media (min-width: 768px) { .intro-lead { max-width: 58%; } }

.cols { display: grid; grid-template-columns:minmax(0,1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.ai-center { align-items: center; }
.ai-start  { align-items: start; }
/* prevent grid/flex blowout: let tracks shrink below intrinsic content (e.g. wide images) */
.cols > *, .hero__grid > *, .store-card > *, .footer-grid > *,
.grid-cards > *, .grid-stats > *, .chips > *, .reason, .chip,
.contact-rows li, .media-col, .media-col img, .flow { min-width: 0; }

/* ---------- Typography helpers ---------- */
.display { font-size: var(--t-display); line-height: 1.02; font-weight: 700; letter-spacing: -0.01em; }
.t-1 { font-size: var(--t-1); line-height: 1.06; font-weight: 700; }
.t-2 { font-size: var(--t-2); line-height: 1.08; font-weight: 700; }
.t-3 { font-size: var(--t-3); line-height: 1.12; }
.t-4 { font-size: var(--t-4); line-height: 1.1; }
.t-5 { font-size: var(--t-5); line-height: 1.18; }
.t-6 { font-size: var(--t-6); line-height: 1.22; }
.lead { font-size: var(--lead); line-height: 1.42; }
.body { font-size: var(--body); line-height: 1.5; }
.body-sm { font-size: var(--body-sm); line-height: 1.5; }
.cap { font-size: var(--cap); line-height: 1.45; }
.w5 { font-weight: 500; } .w6 { font-weight: 600; } .w7 { font-weight: 700; }
.c-navy { color: var(--navy); } .c-gold { color: var(--gold); }
.c-blue { color: var(--blue); } .c-white { color: var(--white); } .c-ink { color: var(--ink); }

/* ---------- Section backgrounds ---------- */
.sec-white { background: var(--white); }
/* Why-Partner sits on the white page (body) so that, on desktop, its lower content
   can overlap the navy section that follows (see the >=1200 overlap rules). */
.why-partner { background: transparent; }
.sec-sky   { background: var(--sky); }
.sec-navy-flat { background: var(--navy); color: #fff; }
.sec-navy, .sec-navy--foot { background: #15294a; color: #fff; }
/* The Rethink + Every Detail sections sit inside `.navy-waves`, which paints ONE
   continuous navy wave field across both: the crest rises behind the warehouse photo /
   Contact Us and the crosshatch lands toward the navy->sky line. The wrapper has no
   z-index (no stacking context), so the Support card's gold lines can still bleed
   through it into the Redefine testimonial. The Rethink section is transparent so the
   wrapper field shows behind its content. */
.navy-waves { position: relative; color: #fff; }
.navy-waves::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #0d3b64 url('assets/bg-waves-bottom.svg') center bottom / 100% auto no-repeat;
}
.sec-navy--top { background: transparent; color: #fff; }
/* Footer keeps its own wave plate. `100% auto` keeps the wave pattern at its natural
   proportion: width-limited on desktop (identical to `cover`), and on tall narrow
   sections it stays a proportional bottom band with solid navy above. The SVG's top
   edge is #0d3b64 (== background-color), so the band blends seamlessly. */
.sec-navy--foot {
  background-color: #0d3b64;
  background-image: url('assets/bg-waves-bottom.svg');
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  color: #fff;
}
/* (checks band is flat navy in the design — the wave belongs to the footer below it) */
/* Every Detail heading is the bottom of the navy-waves wrapper — it sits on the wave
   crest (transparent section, navy+waves come from the wrapper). */
.everydetail-head { color: #fff; }
/* The feature cards live on sky just below the wrapper; on desktop the first row is
   pulled up to straddle the navy→sky line (over the wrapper crosshatch), as in the
   design. No z-index here, so the Support gold lines bleed into the Redefine band. */
.sec-cards { background: var(--sky); }

/* ---------- Header / Hero ---------- */
.hero {
  /* Layer 1 (top): the wave/crosshatch plate — waves-only, transparent bg.
     Layers 2-3: the navy depth gradient + top highlight, moved out of the SVG so
     they always span the FULL width. That way capping the plate on wide desktops
     (below) clips only the waves; the navy fill has no seam at the plate edges. */
  background:
    url('assets/bg-hero-vector.svg') center top / cover no-repeat,
    radial-gradient(circle at 60% 4%, rgba(28,80,129,.5), rgba(28,80,129,0) 55%),
    linear-gradient(190deg, #16456f 0%, #123a64 50%, #0d426d 100%);
  background-color: var(--navy);
  color: #fff;
  padding-bottom: clamp(48px, 7vw, 104px);
}
/* On desktop, cap the hero wave plate so it does not scale up on wide screens (which
   would drag the pattern down over the lower text). Capped at the ~smaller-desktop
   size, it stays in the upper band and the body copy reads on clean navy; on <=1280
   it is still full-width (identical to cover). Only the wave layer is capped; the
   two gradient layers stay `auto` (full width) so the navy fill is seamless. */
@media (min-width: 1200px) {
  .hero { background-size: min(100%, 1280px) auto, auto, auto; }
}
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: clamp(20px, 3vw, 34px); flex-wrap: wrap;
  max-width: 1440px; margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 60px);
}
.topbar__logo img { width: clamp(220px, 28vw, 400px); height: auto; }
.topbar__contact { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); }
.phone-link {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  color: var(--gold); font-weight: 700; font-size: var(--t-6); text-decoration: none;
}
.phone-link i { font-size: .85em; }
.phone-link--lg { font-size: var(--t-3); }

.hero__body { padding-top: clamp(24px, 4vw, 48px); }
.hero__grid {
  display: grid; grid-template-columns:minmax(0,1fr); gap: clamp(28px, 4vw, 48px); align-items: end;
}
.eyebrow { font-size: var(--t-3); font-weight: 700; color: #fff; line-height: 1.1; }
.hero__headline .display { margin-top: .06em; }
.hero__headline > p.t-6 { margin-top: clamp(20px, 2.4vw, 36px); max-width: 26ch; }
.arrow-list { display: grid; gap: clamp(12px, 1.4vw, 18px); align-content: end; }
.arrow-list li { position: relative; padding-left: 44px; color: #fff; }
.arrow-list li::before {
  content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; left: 0; top: .04em; color: #fff; font-size: .8em;
}
.hero__rule { border: none; border-top: 1px solid rgba(255,255,255,.85); margin-block: clamp(28px, 4vw, 48px); }
.hero__foot { display: grid; gap: clamp(20px, 3vw, 40px); max-width: 980px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--navy); font-weight: 700; font-size: 1.375rem;
  padding: 13px 30px; border-radius: var(--r-pill); text-decoration: none; border: 0;
  cursor: pointer; line-height: 1; transition: filter .15s ease, transform .12s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce){ .btn { transition: none; } }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.sec-white :focus-visible, .sec-sky :focus-visible { outline-color: var(--navy); }
.btn:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }

/* ---------- Lists ---------- */
.bullets { display: grid; gap: .4em; padding-left: 1.4em; list-style: disc; }
.bullets li { padding-left: .2em; }
.bullets li::marker { color: var(--navy); }

/* ---------- Cards ---------- */
.card { border-radius: var(--r-lg); }
.card--gold { background: var(--gold); }
.card--blue { background: var(--blue); }
.card--navy { background: var(--navy); }
.card--sky  { background: var(--sky); }
.rounded { border-radius: var(--r-lg); }
.shadow { box-shadow: var(--shadow-card); }
.media-col { position: relative; }
.media-col img { width: 100%; height: auto; }

/* We Store It — heading with a gold pointer, over the storage photo */
.we-store { display: grid; gap: .6em; }
.we-store__head { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.we-store__arrow { color: var(--gold); font-size: clamp(30px, 3.6vw, 46px); flex: none; }

/* storage photo (transparent rounded PNG) with an overlapping sky benefits box */
.store-media__img { width: 100%; height: auto; }
.store-benefits {
  position: relative; z-index: 1;
  padding: clamp(20px, 2.4vw, 30px); display: grid; gap: .35em;
  width: 88%; margin-left: auto; margin-top: -14%;
}
/* only on desktop is the right column wide/tall enough for the box to overlap the
   photo; below that it flows beneath the photo so it never collides with Rethink */
@media (min-width: 1200px) {
  .store-media__img { width: 80%; }
  .store-benefits { position: absolute; right: 0; top: 55%; width: 66%; margin: 0; }
}

/* reason cards (Why partner) */
.reasons { display: grid; gap: 16px; }
.reason {
  display: grid; grid-template-columns:auto minmax(0,1fr); align-items: center; gap: clamp(20px,2.6vw,32px);
  background: var(--gold); border-radius: var(--r-lg); padding: clamp(18px,2.2vw,26px) clamp(22px,2.6vw,32px);
}
.reason__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(64px,7vw,92px); height: clamp(64px,7vw,92px);
  color: var(--blue); font-size: clamp(48px,5.4vw,72px); flex: none;
}
.reason p { color: var(--ink); }

/* feature cards (Every Detail) */
.grid-cards { display: grid; grid-template-columns:minmax(0,1fr); gap: clamp(16px, 2vw, 24px); }
.feature { padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-md); display: grid; gap: .5em; align-content: start; }
.feature__ic { color: var(--blue); font-size: 44px; margin-bottom: .2em; }

/* testimonial cards */
.testimonial {
  position: relative; background: var(--navy); color: #fff; border-radius: var(--r-lg);
  padding: clamp(28px, 3.4vw, 48px); padding-top: clamp(44px, 5vw, 70px);
  display: grid; gap: 1.1em; margin-top: 1.4em;
}
.testimonial__mark {
  position: absolute; top: clamp(-48px,-4.4vw,-62px); left: clamp(6px,1vw,16px);
  color: var(--gold); font-size: clamp(72px, 9vw, 118px); line-height: 1;
  -webkit-text-stroke: 3px var(--navy); paint-order: stroke fill;
}
.testimonial__mark--right { left: auto; right: clamp(2px, 0.6vw, 10px); }
/* the quote mark overhangs the card top; give the No More testimonial extra top
   margin so the mark clears the lead paragraph above it with breathing room */
.testimonial--bleed-left { margin-top: clamp(52px, 5.4vw, 84px); }
.testimonial blockquote { line-height: 1.18; }
.testimonial__sub { border-left: 3px solid var(--gold); padding-left: 20px; }

/* outcome chips (Redefine) */
.chips { display: grid; grid-template-columns:minmax(0,1fr); gap: clamp(14px,1.6vw,20px); margin-top: clamp(28px,4vw,56px); }
.chip {
  display: grid; grid-template-columns:auto minmax(0,1fr); align-items: center; gap: 16px;
  background: #fff; border-radius: var(--r-sm); padding: 18px 20px; box-shadow: var(--shadow-card);
}
.chip i { color: var(--navy); font-size: 24px; }

/* benefit cards (No More) */
.benefits { display: grid; gap: clamp(28px, 3vw, 44px); padding-top: 40px; }
.benefit {
  position: relative; background: var(--gold); border-radius: var(--r-sm);
  padding: clamp(40px,4vw,52px) clamp(20px,3vw,34px) clamp(22px,2.6vw,30px); text-align: center;
  display: grid; gap: .6em;
}
.ico-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 55px; height: 55px; border-radius: 50%; background: var(--gold); color: var(--navy); flex: none;
}
.ico-circle i { font-size: 26px; }
.ico-circle--lg { width: 78px; height: 78px; position: absolute; top: -39px; left: 50%; transform: translateX(-50%); }
.ico-circle--lg i { font-size: 42px; }

/* stat cards (Checks) */
.grid-stats { display: grid; grid-template-columns:minmax(0,1fr); gap: clamp(16px,2vw,24px); }
.stat { display: grid; align-items: center; padding: clamp(20px,2.4vw,28px); }

/* company-store card */
.store-card {
  position: relative; border: 3px solid var(--blue); border-radius: var(--r-lg);
  padding: clamp(24px,3vw,40px);
  display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(20px,3vw,30px); align-items: center;
}
.store-card__img { width: 100%; max-width: 440px; height: auto; justify-self: center; border-radius: 8px; }

/* Smarter-Tools add-on cards (SSO + Company Store) */
.tools-cards { display: grid; gap: clamp(24px, 3vw, 40px); }

/* hand-drawn arrow curving down toward the cards, in the gap after the heading */
.tools-arrow { display: none; }
@media (min-width: 768px) {
  .tools-arrow {
    display: block; position: absolute; left: 52%; top: 100%;
    width: clamp(44px, 4vw, 63px); height: auto;
    margin-top: 6px;
  }
}

.shield { width: clamp(120px, 16vw, 195px); height: auto; justify-self: end; }

/* contact rows (conversation band) — rows left-align to a shared edge, the
   whole block is centered under the heading */
.contact-rows { display: grid; gap: clamp(18px,2vw,26px); margin-top: clamp(28px,4vw,44px); width: fit-content; margin-inline: auto; }
.contact-rows li { display: grid; grid-template-columns:auto auto minmax(0,1fr); align-items: center; gap: 18px; }
.contact-rows .arrow { color: #fff; font-size: 24px; }
/* phone/email hug the start of their column (right after the icon), so both are
   left-justified to the same edge instead of the short phone number centering */
.contact-rows li > a { justify-self: start; text-align: left; }
.ico-circle .fa-phone { transform: scaleX(-1); }
.plain { text-decoration: none; }
.wrap-any { overflow-wrap: anywhere; }

/* decorative gold lines */
.goldlines { display: flex; gap: 12px; }
.goldlines--h { flex-direction: column; width: 124px; }
.gl-head { position: relative; }
@media (min-width: 1200px) {
  /* horizontal gold marker bleeds from the heading out to the left screen edge */
  .gl-head > .goldlines--h {
    position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
    margin-right: 28px;
    width: calc(max(0px, (var(--pagew) - var(--maxw)) / 2) + var(--gutter) - 28px);
  }
}
.goldlines--h > i { display: block; height: 4px; background: var(--gold); }
.goldlines--v { flex-direction: row; gap: 12px; }
.goldlines--v > i { display: block; width: 4px; background: var(--gold); }
/* absolutely-placed decorative vertical gold-line clusters (from the source) */
.gl-deco { position: absolute; z-index: 1; pointer-events: none; }
/* gold lines sit directly above the invoice image and extend up past the section
   top; `.gl-clip` (overflow:hidden on this section only) trims them flush with the
   navy bar above, so they span navy-bar → image at every width. 760px comfortably
   exceeds the tallest navy-bar→image gap (~450px). */
.gl-onestop { bottom: 100%; right: 26%; height: 760px; }
.gl-clip { overflow: hidden; }
.feature--wide { position: relative; }
/* descend from the Support card's bottom edge down into the navy testimonial below */
/* lines drop from the Support card and land right on the navy testimonial's top edge
   (gap ~= 14vw+22px on tablet→1440, plateauing ~230px wide, so cap at 232) */
.gl-detail  { top: 100%; left: 65%; height: clamp(130px, calc(14vw + 22px), 231px); }
.gl-convo   { top: 0; left: clamp(20px, 13vw, 185px); height: 100%; }
@media (max-width: 767px) { .gl-deco { display: none; } } /* decorative — hide on mobile */

/* ---------- Footer ---------- */
.site-footer { padding-block: clamp(40px,6vw,80px); }
.footer-grid { display: grid; grid-template-columns:minmax(0,1fr) auto; gap: 32px; align-items: end; }
.footer-copy { align-self: end; white-space: nowrap; }

/* =============================================================
   TABLET  (>=768)
   ============================================================= */
@media (min-width: 768px) {
  .cols { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .cols--6040 { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
  .cols--7030 { grid-template-columns:minmax(0,1.95fr) minmax(0,1fr); }
  .hero__grid { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
  .hero__foot { grid-template-columns:minmax(0,1fr); }
  .grid-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .feature--wide { grid-column: span 2; }
  .chips { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .grid-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .benefits { padding-top: 50px; }
  .stat { min-height: 200px; }
}

/* =============================================================
   DESKTOP  (>=1200)  — full Figma layout
   ============================================================= */
@media (min-width: 1200px) {
  .grid-cards { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .grid-cards .feature:nth-child(4) { grid-column: span 1; }
  .feature--wide { grid-column: span 2; }
  .chips { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .grid-stats { grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .hero__foot { max-width: 1000px; }
  .hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); }
  /* Extend / Smarter-Tools: two add-on cards side by side, SSO stepped slightly
     higher than Company Store (as in the mockup) */
  .tools-cards { grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr); align-items: start; }
  .tools-cards > .store-card:last-child { margin-top: clamp(32px, 4vw, 64px); }
  /* each card lays the laptop beside the text, inside the blue outline */
  .tools-cards .store-card {
    display: grid; align-items: center; gap: clamp(14px, 1.8vw, 26px);
    grid-template-columns: minmax(0,1fr) minmax(0,38%);
  }
  .tools-cards .store-card__img {
    position: static; right: auto; bottom: auto; transform: none;
    width: 100%; max-width: 280px; justify-self: end; border-radius: 8px;
  }
  /* SSO mirrors it: laptop on the left, text on the right */
  .tools-cards .store-card--sso { grid-template-columns: minmax(0,38%) minmax(0,1fr); }
  .tools-cards .store-card--sso .store-card__img--left { justify-self: start; }
  /* ----- Why-Partner content overlaps the navy section below -----
     The navy band is pulled up under the tail of the Why-Partner content, so the
     bottom reason cards and the empty space under the Core-Trusted text land on
     navy. The Why-Partner section paints on top (z-index) and is transparent, so
     the navy shows through wherever it has no card/text. We Store It rides up into
     the overlap (top-right); the Rethink heading is padded down to clear the
     overlapping reason cards. */
  .why-partner { position: relative; z-index: 1; }
  /* pull the whole navy-waves region up under the Why-Partner tail. No z-index on the
     wrapper (it must not trap the Support gold lines), so the why-partner z-index:1 is
     what lifts the reason cards above it. */
  .navy-waves { margin-top: -320px; }
  /* clears the overlapping reason cards / Core-Trusted tail: pushes both the
     We Store It heading and the storage photo down below the overlap */
  .rethink-head { padding-top: 286px; }
  /* pull the feature cards up so the first row straddles the navy→sky line (over the
     wrapper crosshatch), as in the design */
  .sec-cards .grid-cards { margin-top: -150px; }

  /* Testimonial cards bleed to the outer page edge (quote sits on the inner side) */
  .testimonial--bleed-right, .testimonial--bleed-left {
    --bleed: calc(max(0px, (var(--pagew) - var(--maxw)) / 2) + var(--gutter));
  }
  .testimonial--bleed-right {
    margin-right: calc(-1 * var(--bleed));
    padding-right: calc(clamp(28px, 3.4vw, 48px) + var(--bleed));
    border-top-right-radius: 0; border-bottom-right-radius: 0;
  }
  .testimonial--bleed-left {
    margin-left: calc(-1 * var(--bleed));
    /* content sits flush with the inner-wrap text (no extra inset) */
    padding-left: var(--bleed);
    border-top-left-radius: 0; border-bottom-left-radius: 0;
  }
  /* No More: widen the testimonial column to match the design proportions
     (fewer quote lines → its base lines up closer with the benefit cards) */
  .cols--testi { grid-template-columns: minmax(0,1.18fr) minmax(0,0.82fr); }
  /* Six-figure testimonial: the quote mark straddles the card's left edge so its
     left half sits off the navy box (on the sky), per the mockup. */
  .testimonial--bleed-right .testimonial__mark { left: clamp(-58px, -3.6vw, -40px); }
  /* No More: give the three benefit cards more even spacing, and pin the navy
     testimonial to the bottom of its column so the last card (Fast, Easy Ordering)
     lines up with the navy box's bottom edge. The left column becomes a flex column
     and the testimonial takes the leftover space above it (margin-top:auto). */
  .cols--testi { align-items: stretch; }
  .cols--testi > .flow { display: flex; flex-direction: column; }
  .cols--testi .testimonial--bleed-left { margin-top: auto; }
  .cols--testi .benefits { gap: clamp(34px, 3.8vw, 56px); }
  /* On desktop the contact block has ample room (email ~750px < 960px), so keep the
     phone + email each on a single line (they wrapped on wide viewports otherwise). */
  .contact-rows li > a { white-space: nowrap; }
}

/* =============================================================
   LARGE DESKTOP  (>=1280) — single-line headings/bullets.
   Gated above 1200 so the columns have room for the longest runs
   ("Industry-Recommended.", "Redefine Operational Management.")
   before forcing nowrap; 1200-1279 wraps gracefully.
   ============================================================= */
@media (min-width: 1280px) {
  .nowrap-lg { white-space: nowrap; }
  .arrow-list li { white-space: nowrap; }
}

/* =============================================================
   TABLET refinements (<1280)
   ============================================================= */
@media (max-width: 1280px) {
   .goldlines--h { margin-bottom: 15px; }
   .benefit { margin-bottom: 25px; }
}

/* =============================================================
   MOBILE refinements (<768)
   ============================================================= */
@media (max-width: 767px) {
  .topbar { justify-content: center; text-align: center; gap: 14px; }
  .topbar__contact { gap: 12px 16px; flex-wrap: wrap; justify-content: center; }
  .topbar .phone-link { font-size: 1.1rem; }
  .topbar .btn { font-size: 1.05rem; padding: 11px 22px; }
  .store-card { grid-template-columns:minmax(0,1fr); }
  .store-card__img { width: 100%; max-width: 420px; margin-inline: auto; }
  .shield { justify-self: center; margin-top: 8px; }
  .cols--7030 .shield { order: -1; }
  .footer-grid { grid-template-columns:minmax(0,1fr); }
  .footer-copy { white-space: normal; }
  .contact-rows { width: auto; }
  .contact-rows li { grid-template-columns:auto auto minmax(0,1fr); }
}

/* =============================================================
   Contact form (HubSpot embed) — CONVERSATION BAND
   The standard HubSpot embed (div.hs-form-frame) renders the form in
   an IFRAME, so field/label/button appearance is set in the HubSpot
   form editor, NOT here. Our job on the page is only the wrapper:
   a clean white card so the form reads well on the navy band, plus a
   width guard so the iframe never overflows on mobile. Keep this block
   LAST in the file (its white background overrides .card--sky by order).
   ============================================================= */
.contact-intro { max-width: 46ch; margin-inline: auto; }
.contact-form {
  background: var(--white);
  width: min(560px, 100%);
  margin: clamp(24px,3vw,36px) auto 0;
  padding: clamp(18px,2.4vw,28px);
  text-align: left;
}
/* Keep the HubSpot iframe/frame inside the card on every viewport */
.contact-form .hs-form-frame,
.contact-form iframe { width: 100%; max-width: 100%; box-sizing: border-box; }
/* Secondary phone/email rows read as an alternative below the form */
.contact-rows--alt { margin-top: clamp(24px,3vw,36px); }