@font-face { font-family: 'Berthold Condensed'; src: url('fonts/BertholdCondensed.ttf') format('truetype'); font-display: swap; }
/* Family name matches jerseymikes.com's own @font-face literally ("Block
   Berthold BQ Regular") - same font file (checksum-verified against their
   live /fonts/Block Berthold BQ Regular.otf), not just an internal alias. */
@font-face { font-family: 'Block Berthold BQ Regular'; src: url('fonts/BertholdBQ.otf') format('opentype'); font-weight: 400; font-display: swap; }

:root {
  --navy: #1A365D;
  /* Kayvan (DM, 2026-08-17): "CTA needs to match the Blue on the US site."
     Live-inspected jerseymikes.com/contact-us's real CTA buttons earlier this
     session (getComputedStyle on "View all FAQs"/"Contact Us"/"Business
     Inquiry") - background: rgb(41, 82, 140) = #29528C, a distinctly
     brighter blue than --navy (#1A365D), used only for CTA buttons, not
     headings/nav/text. Real measured value, not a guess - didn't need to
     wait on James for the hex. */
  --cta-blue: #29528C;
  --tomato: #DA291C;
  --tomato-2: #a81f15;
  --red: #DA291C;
  --deepsea: #1C242B;
  --ink: #1a1a1a;
  --bg: #ffffff;
  --muted: #a9b0b6;
  --cream: #f7f5f0;
}
/* JMUK-35 (Pratima, iPhone SE): "shadow appears around logo when clicked" -
   iOS Safari's default tap-highlight overlay on tappable elements (the
   header logo is an <a>), not anything in our own CSS. Suppressed globally,
   not just on .brand - the same default highlight would show on every link
   on iOS otherwise, this just happened to be the one someone tapped and
   noticed. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0; color: var(--ink); line-height: 1.6;
  background-color: var(--cream);
  background-image: url('bg-pattern.svg');
  background-repeat: repeat;
  background-size: 150px 150px;
  min-height: 100%; display: flex; flex-direction: column;
}
/* Short pages (Contact, Privacy on some viewports) left the footer stranded
   above a blank strip of cream at the bottom of the viewport - main grows to
   fill leftover height so the footer always sits flush against the bottom. */
main#main-content { flex: 1 0 auto; }
.section { background: #fff; }
.section.home-content, .section.culture-belief, .section.culture-belief-plain { background: transparent; }
/* NFR-ACC-04: red on cream measures 4.47:1, under the 4.5:1 AA threshold for
   normal-size text. Navy on cream is 11.1:1 - body-size links use navy;
   large-text elements (.london, .coming-soon) keep using --tomato, which is
   fine at 3:1 large-text threshold. */
/* :not(.btn) is specificity 0-2-0, which beat .contact-link (0-1-0) below -
   the Contact page's "General enquiry" button was rendering navy-on-navy
   (invisible) because this rule's color:navy overrode contact-link-primary's
   color:#fff, and its underline showed through on both buttons. */
.section a:not(.btn):not(.contact-link) { color: var(--navy); font-weight: 600; text-decoration: underline; }
.section a:not(.btn):not(.contact-link):hover { color: var(--tomato); }
h1 {
  font-family: 'Passion One', Impact, 'Arial Narrow', sans-serif;
  font-weight: 700; letter-spacing: 0.02em; line-height: 1.05; text-transform: uppercase;
}
/* Most h2/h3 are mixed-case in Figma (e.g. "The difference is you"), but
   NOT history-block h3s ("Started In 1956" etc, node 188:35818 confirmed
   uppercase) - those get their own override below, .history-text h3. */
h2, h3 {
  font-family: 'Passion One', Impact, 'Arial Narrow', sans-serif;
  font-weight: 700; letter-spacing: 0.02em; line-height: 1.05; font-size: 2rem;
}
/* Figma Dev Mode: Home/Culture/Privacy display headlines (LONDON, "believes",
   HISTORY) are token "Block Berthold"/"Display Header 02" - both map to our
   self-hosted Berthold BQ file. Careers/Contact page h1s are token
   "txp/heading/h1" = FatFrank, which we don't have a licensed file for, so
   those stay on the Passion One substitute (base h1 rule above). */
/* Live jerseymikes.com computed style on this exact h1: font-weight 400,
   letter-spacing 0.67px - our @font-face had no weight declared at all, so
   the base h1 rule's font-weight:700 request didn't match it and the
   browser synthesized a fake bold, which reads bigger/blurrier than the
   real Regular face. Also tightened letter-spacing to match (0.02em was
   noticeably looser than their ~0.0075em). */
.hero-announce, .cream-header h1, .history h2 {
  font-family: 'Block Berthold BQ Regular', 'Passion One', Impact, 'Arial Narrow', sans-serif;
  font-weight: 400; letter-spacing: 0.0075em;
}

/* Figma's Navigation instance (188:35717) is a fixed 56px-tall bar with
   px-16 horizontal padding ONLY - no vertical padding, content is vertically
   centered by the fixed height instead. The prior 0.6rem vertical padding
   made the bar taller/looser than spec. */
/* 2026-08-18 (Jon: "add the dropshadow from us site too under header"):
   live-inspected jerseymikes.com's real nav element - it's not a simple
   single shadow, it's a soft multi-layer stack (Tailwind's "shadow-2xl"
   class family) with a wide 41.78px blur at only 5% opacity, layered down
   to a tighter 2.77px/2% layer close to the edge. The old single
   "0 2px 10px rgba(0,0,0,0.25)" was a much harder, more visible edge than
   their real soft diffuse shadow - matched their exact computed value. */
header.site { background: var(--navy); height: 56px; display: flex; align-items: center; padding: 0 1rem; position: sticky; top: 0; z-index: 10; box-shadow: 0 41.7776px 33.4221px rgba(0,0,0,0.05), 0 22.3363px 17.869px rgba(0,0,0,0.043), 0 12.5216px 10.0172px rgba(0,0,0,0.035), 0 6.6501px 5.32008px rgba(0,0,0,0.027), 0 2.76726px 2.21381px rgba(0,0,0,0.02); overflow: visible; }
/* FR-GLB: Figma r3's nav (188:35717) packs logo+nav together at the left edge
   of a centered 1080px box, flex-start - it is NOT logo-left/nav-right
   space-between like a conventional header. Don't reintroduce space-between here.
   Gap corrected 2026-08-17 (Jon: "header spacing still seems stupid, match
   jerseymikes.com") - live-measured their real header (careers page, 1440px):
   logo right edge at x=188, first nav link ("Menu") starts at x=218, a 30px
   gap. The Figma-derived 12px this had was read off the dev-mode label, not
   the actual rendered gap - trust the live DOM over the export. */
header.site .brand-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 1.875rem; max-width: 1080px; width: 100%; margin: 0 auto; position: relative; }
/* Widened to match the logo's new proportional width (117px tall * 156/113
   aspect = ~162px) - was still 130px after the height bump, so the nav text
   (CULTURE/CAREERS/CONTACT) started overlapping the now-wider logo. */
header.site .brand { position: relative; display: block; width: 162px; height: 40px; flex: none; }
/* Live-measured jerseymikes.com/careers's #masterLogo at rest (scrollY=0):
   162x117px - ours rendered 138x100, ~17% smaller. Bumped height to match.
   JMUK-26 (Pratima): z-index bumped 11->13, above the mobile dropdown's
   z-index:11 - same DOM-order tie the dropdown was winning (nav.site comes
   after .brand in markup), which let the opened mobile menu paint over the
   logo's bled-down portion instead of the logo staying visible above it. */
/* JMUK-68 (Pratima, iPhone SE 378px): logo sharp right after the hamburger
   toggle fires, blurry again once it settles - the signature of a stale
   GPU-compositing raster cache, a known Chromium quirk when an element
   combines a `filter` (drop-shadow, below) with a `transform` (rotate,
   see the 768px-and-under rule further down): the browser sometimes
   reuses a lower-quality cached raster after a repaint instead of
   re-rasterizing at the current scale. Repro'd this ticket's own capture
   method (Chrome DevTools iPhone SE emulation) via Playwright - static
   before/after screenshots showed no difference, consistent with this
   being a transient mid-transition artifact a still frame wouldn't catch.
   `will-change: transform` is the standard mitigation - it tells the
   browser to keep this element on its own consistently-promoted
   compositing layer instead of re-deciding (and re-rasterizing) on every
   repaint. Not visually verified against a real device; flagging in the
   ticket as the specific, reasoned fix attempted rather than a blind
   guess. */
header.site .brand img {
  position: absolute; left: -6px; top: 8px;
  height: 117px; width: auto; display: block; z-index: 13; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
  transform-origin: left center; transition: transform 0.1s linear; will-change: transform;
}
/* James Hoard QA (Slack #jm-uk-qa-support, 2026-08-18): "logo is much bigger
   than the US site... on US they shrink when you make your browser smaller".
   Live-measured jerseymikes.com/careers with real Playwright at several
   widths: #masterLogo is a fixed 162x117px at >=1280px (matches what we
   already had), but 768-1279px renders a DIFFERENT element (#masterLogo-md).
   #masterLogo-md is a visually different asset (not just a scaled
   #masterLogo, its aspect ratio doesn't match), and we only have the one
   logo-header.svg - this fluidly scales OUR existing asset's height across
   the same 768-1279 range as a same-asset approximation rather than a
   swapped one. Real fix needs the actual md-tier asset if pixel-parity
   matters here.
   JMUK-58 QA return (Jeremy, 2026-08-19): the first fix (clamp 76-100px)
   was still visibly bigger than the US site at every width in this range -
   turned out that measurement was taken from getBoundingClientRect(), which
   includes the element's own rotate(9.81deg) transform and so over-reports
   its actual height (a rotated box's axis-aligned bounding box is taller
   than the element itself). Re-measured #masterLogo-md's real CSS height
   instead: a stepped ~54px near 768px up to ~64px near 1279px, not the
   66-78px the bounding-box measurement implied. Corrected clamp to the
   real intrinsic-height range.
   JMUK-67 (Jon, 2026-08-19, "jump from 740 to 787, it drops down"): this
   tier and the <=768px mobile rule below used different position anchors
   (top:8px/left:-6px here vs top:-4px/left:-12px there) on top of a
   height jump (48px -> 54px) - crossing 768px moved the logo's bottom
   edge by 23px and its left edge by ~5px in a single frame, a real,
   confirmed, reproducible jump (verified with Playwright at 768px vs
   769px: bottom 59.3 -> 82.4, left 0.6 -> 5.4), not a caching artifact as
   I wrongly guessed first. Fixed by matching the mobile rule's position
   anchor here too (top/left no longer jump) and re-based the clamp's
   floor at 48px instead of 54px so height is continuous with the mobile
   rule's exact end value at the boundary - ceiling unchanged at ~64px. */
@media (min-width: 768px) and (max-width: 1279px) {
  header.site .brand img { height: clamp(48px, calc(24px + 3.13vw), 64px); top: -4px; left: -12px; }
}
@media (max-width: 1279px) {
  header.site .brand img { transform: rotate(9.81deg); transition: none; }
}
/* jerseymikes.com's nav wrapper (.nav-underline) is md:h-14 md:items-stretch -
   the anchor itself stretches to the FULL header height, so its hover
   box-shadow bar lands flush with the header's bottom edge, not just under
   the text. align-items:center here made our anchors only text-height tall,
   so the same box-shadow sat close under the letters instead - stretch to
   match. */
/* Gap corrected 2026-08-17 alongside .brand-row above - live-measured the real
   gap between adjacent top-level nav links on jerseymikes.com/careers (e.g.
   Menu->Locations, Locations->Culture, Careers->Contact Us): a consistent 32px
   every time, not the 12px this had. */
nav.site { display: flex; align-items: stretch; gap: 2rem; flex-wrap: wrap; height: 56px; }
/* Corrected again 2026-08-17: live-inspected the actual nav link computed
   style on jerseymikes.com/careers AND /contact-us (not Figma's dev-mode
   label, which said "Passion One:Regular" but doesn't match production) -
   both pages agree: font-family "Block Berthold BQ Regular", 20px, weight
   400. Figma's exported class name was wrong/stale; trust the live DOM. */
/* JMUK-36 (Jeremy QA, 2026-08-18): live-inspected jerseymikes.com/careers'
   real nav link computed style again - color is solid rgb(255,255,255),
   opacity 1, unconditionally (not dimmed at rest). The old opacity:0.9 here
   read as grayish text that then visibly brightened on hover, which Jeremy
   flagged as not matching prod (prod links never change brightness on
   hover, only the underline appears). Dropped the opacity dimming entirely -
   full white at all times, exactly like prod. */
/* JMUK-58 QA return (Jeremy, 2026-08-19): nav link text was still visibly
   bigger than the US site at every width. Live-measured jerseymikes.com's
   real nav link font-size across 768-1440px: flat 16px everywhere (it
   doesn't scale with viewport either - the "shrink" QA saw was the logo,
   not the nav text). Was 1.25rem/20px; corrected to match. */
nav.site a { display: flex; align-items: center; height: 100%; color: #fff; text-decoration: none; font-family: 'Block Berthold BQ Regular', 'Passion One', Impact, 'Arial Narrow', sans-serif; font-size: 1rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; }
/* jerseymikes.com's real hover indicator (.nav-underline:has(:hover) a) is an
   inset box-shadow bar, not a border-bottom - box-shadow doesn't add to the
   box height so it doesn't nudge layout, and it uses their exact #f40012
   red (not our --tomato token). Matched pixel-for-pixel, not approximated. */
nav.site a:hover, nav.site a.active { box-shadow: inset 0 -4px #f40012; }
nav.site .nav-pending { color: #fff; opacity: 0.45; font-size: 1.2rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.03em; cursor: default; }
/* Removed 2026-08-17: this extra 24px "Contact section" separation was read
   off Figma's dev-mode grouping, but live-measured jerseymikes.com/careers
   shows NO special gap before Contact Us - it's the same uniform 32px as every
   other adjacent pair (Careers->Contact Us measured 32px, identical to
   Menu->Locations). Trust the live DOM over the Figma grouping. */

.nav-toggle { display: none; }

@media (max-width: 768px) {
  /* Regression from the desktop nav fix (brand-row justify-content:flex-start,
     packing logo+nav together per Figma's 188:35717) - on mobile there's no
     visible nav to pack next to, just the hamburger, which needs to stay
     pinned to the right edge like before. QA flagged this as "hamburger icon
     is in the center" - it was left-packed next to the logo instead. */
  header.site .brand-row { flex-wrap: nowrap; justify-content: space-between; }
  /* JMUK-31: at true mobile widths the desktop bleed treatment (117px tall,
     ~104px overflow below the header) is NOT what jerseymikes.com does -
     live-measured their real #masterLogoMobile (375px viewport, /careers):
     h-[48px], top:4px, left:-16px, same rotate(9.81deg). Ours was still using
     the desktop-bleed size at every width down to 375px, so the logo covered
     the page heading text (confirmed via screenshot on /privacy). The
     desktop/tablet bleed itself is deliberate and correct (JMUK-30, ruled
     Working as Intended - matches jerseymikes.com's own xl/md bleed) - this
     override is mobile-only.
     2026-08-18 (Perse, "mobile logo offset issue still"): this rule matched
     jerseymikes.com's height/top/left, but not its width (auto, so it
     inherited the desktop rule's height-only aspect scaling: 48px * 156/113
     natural ratio = 66px) or its transform-origin (still the base rule's
     "left center" below, meant for the desktop bleed transform). Real
     #masterLogoMobile is a fixed 90x48 box (deliberately wider than its
     natural aspect) rotated around its own center (transform-origin
     computed as "45px 24px", i.e. 50% 50%) - rotating our narrower box
     around the LEFT edge instead of its center swung the bottom-right
     corner much further down, bleeding ~15px below the header instead of
     the real ~3px. Set both explicitly instead of inheriting them.
     top is -4px, not the real DOM's own 4px: jerseymikes.com's equivalent
     logo wrapper spans the header's full 56px height (top-aligned), so its
     top:4px is measured from the header's own top edge. Our .brand element
     is only 40px tall and vertically centered inside the 56px header
     (header.site's align-items:center), landing 8px lower before any
     "top" offset is even applied - subtracting that same 8px here
     (4px - 8px = -4px) re-anchors the logo to the same real absolute
     position instead of sitting 8px too low. */
  /* JMUK-43: jerseymikes.com's own #masterLogoMobile has this exact same
     rotated bounding box hanging ~3.4px off the left/top edge (live-measured,
     identical values), but it never visually clips there because their
     mobile header sits below a promo/rating banner that pushes it down and
     right. Our header has no such banner and starts flush at the viewport
     edge, so the same offset reads as a genuinely clipped logo. Jon's call:
     flatten it into the navy bar instead of reproducing an off-screen bleed
     that only reads clean in the context US has and we don't - nudged top/
     left in by 4px so the rotated bounding box stays fully on-screen. */
  /* JMUK-31 (Pratima, re-check after the first fix): "logo still doesn't fit
     perfectly within the header." Real cause left over from the first pass -
     the 9.81deg rotation inherited from the max-width:1279px rule above
     grows a 90x48 box's bounding height to ~62.6px (w*sin+h*cos), which
     still overflows a 56px header by ~6.6px even at top:0. jerseymikes.com's
     real mobile logo has the identical rotated-bbox overflow (confirmed in
     this ticket's own thread) but it never clips there because their header
     sits below a promo banner that pushes it down - we have no such banner.
     Per Jon's own stated call earlier in this ticket ("flatten it into the
     navy bar instead of reproducing an off-screen bleed that only reads
     clean in a context we don't have"), drop the rotation on mobile too so
     the logo is fully upright and fully contained, zero overflow. */
  /* JMUK-43 (Pratima QA, 2026-08-18): "logo sits slightly low... more space
     above, less space below" - not vertically centered. Root cause: .brand's
     own box is 40px tall, centered in the 56px header (top offset 8px from
     align-items:center), but this image is 48px tall at top:0 *within*
     .brand - so it runs from header-y 8 to 56, flush against the bottom
     edge with zero clearance. -4px pulls it up so it spans header-y 4 to
     52: 4px clearance on both sides, genuinely centered. */
  /* JMUK-43 (Iryna QA, 2026-08-18, returned): "UK header logo is slightly
     rotated counter-clockwise... US logo at the same size is straight."
     JMUK-31's "transform: none" here was wrong - the logo-header.svg
     ARTWORK ITSELF is baked with a ~9.81deg counter-clockwise tilt (confirmed
     by rendering the raw SVG standalone: the oval/wordmark/SUBS bar are
     visibly tilted with zero CSS applied). The site-wide rotate(9.81deg)
     rule (line ~528) isn't a decorative effect added on top of a level
     asset - it's what LEVELS this pre-tilted artwork. Dropping it on mobile
     didn't make the logo "fully upright" as JMUK-31 assumed; it just
     stopped correcting the tilt, exposing the raw skewed asset. This also
     matches JMUK-31's own first-pass live measurement of jerseymikes.com's
     real #masterLogoMobile at 375px ("same rotate(9.81deg)") - the real site
     never drops this rotation on mobile either. Removed the "transform:
     none" override so the earlier @media(max-width:1279px) rule's
     rotate(9.81deg) applies here too - transform-origin stays 50% 50% (JMUK-31
     math), so the rotated bbox grows symmetrically around the already-centered
     box and pokes ~3.4px past each edge, identical to jerseymikes.com's own
     live-measured overflow at this size - expected, not a regression. */
  header.site .brand img { height: 48px; width: 90px; top: -4px; left: -12px; transform-origin: 50% 50%; }
  /* JMUK-33: visual icon was 36x34 (matching the button's own hit-area) -
     live-measured jerseymikes.com's real mobile menu button: 24x24. Shrunk
     the visual bars to a 20px-wide icon to match, but kept the BUTTON itself
     at 44x44 (NFR-ACC-06 minimum touch target) - centered padding grows the
     invisible hit area instead of the icon, so this doesn't trade brand
     parity against accessibility. */
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; z-index: 12; flex: none;
  }
  .nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* JMUK-26 (Pratima) padding-top was 6.75rem, calibrated to clear the old
     ~104px logo bleed at mobile widths. JMUK-31 shrunk the mobile logo to
     48px tall (real jerseymikes.com size, see .brand img above) so that
     bleed no longer exists - a small fixed clearance below the header is
     enough now, not the old logo-bleed-sized gap. */
  nav.site {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 11;
    flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; height: auto;
    background: var(--navy); box-shadow: 0 10px 20px rgba(0,0,0,0.35); padding-top: 0.5rem;
  }
  nav.site.open { display: flex; }
  /* Undo the desktop full-height-anchor trick (nav.site a { height:100% }) -
     the mobile dropdown sizes each row by its own padding instead. */
  nav.site a, nav.site .nav-pending { height: auto; padding: 1rem 1.75rem; border-bottom: 1px solid rgba(255,255,255,0.12); font-size: 1.15rem; width: 100%; }
  /* JMUK-32: the desktop hover indicator (line ~509, inset box-shadow) isn't
     media-scoped, so it was also firing here - on a full-width (width:100%)
     mobile row that inset shadow renders as a thick red bar across the whole
     item, not the thin underline it is on desktop. Cancel it explicitly and
     keep only the mobile row-divider treatment below. */
  nav.site a:hover, nav.site a.active { border-bottom: 1px solid var(--tomato); box-shadow: none; }
}

/* JMUK-28: was aspect-ratio: 1920/422, which scales proportionally with
   viewport width - live-measured jerseymikes.com's real hero (video
   object-fit:cover in a container) is a FIXED 422px tall from 768px all the
   way up through 1920px+ (not aspect-ratio-scaled at all), dropping to 410px
   only below ~600px. Our aspect-ratio approach made the hero up to 34%
   TALLER than theirs on wide monitors (562px vs 422px at 2560px) - this is
   the actual "video is larger than the US" bug, confirmed live at 7
   breakpoints (390/768/1024/1280/1440/1920/2560) on both sites before fixing. */
.hero-strip { position: relative; width: 100%; height: 422px; overflow: hidden; background: var(--deepsea); }
.hero-strip-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video-toggle {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); color: #fff; border: none; border-radius: 999px;
  font-size: 0.9rem; cursor: pointer;
}
.hero-video-toggle:hover { background: rgba(0,0,0,0.75); }
.hero-inner { max-width: 700px; margin: 0 auto 1.5rem; text-align: center; }
.hero-sub { font-size: 1.25rem; opacity: 0.95; margin-bottom: 2rem; }
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Real jerseymikes.com switches its hero from 410px to 422px tall at their
   md breakpoint (768px), not 600px - confirmed live at 601/640/700/767px,
   all still 410px on their site. This is a separate breakpoint from the
   600px one below (page-header/section padding, unrelated to the hero). */
@media (max-width: 767px) {
  .hero-strip { height: 410px; }
}

@media (max-width: 600px) {
  .hero-sub { font-size: 1.05rem; }
  .page-header { padding: 2.5rem 1.25rem; }
  .page-header h1 { font-size: 2rem; }
  .section { padding: 1.75rem 1.25rem; }
}

.page-header {
  position: relative; color: #fff; padding: 3.5rem 1.5rem; text-align: center;
  background-image: linear-gradient(rgba(26,54,93,0.82), rgba(26,54,93,0.88)), var(--hero-img);
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}
.page-header h1 { color: #fff; font-size: 2.6rem; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.4); }

/* 2026-08-18 ("not as wide or as large... for images and giant screens"):
   was clamping .culture-belief/.history (below) to 1100px regardless of
   their own max-width - this wrapper's cap has to widen too, or a child's
   larger max-width has no effect. 1440px matches jerseymikes.com's real
   content width (already used by .cream-header h1's own max-width) and
   every other section here has its own tighter explicit max-width
   (.content-card 1080px, .section 760px, .brand-promise 600px) - none of
   them get any wider from this change, only Culture's two 1440px sections
   actually gain the extra room. */
main { max-width: 1440px; margin: 0 auto; }
.section { max-width: 760px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.section p { font-size: 1.05rem; }
.status {
  display: inline-block; background: var(--tomato); color: #fff; padding: 0.35rem 1rem;
  border-radius: 999px; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em;
}

/* Jon flagged Careers' "Join the team" as still ugly vs. jerseymikes.com/contact-us's
   own CTA buttons ("View all FAQs"/"Contact Us"/"Business Inquiry") - live-inspected
   their computed style: Inter 700 16px, not a display font, with much more generous
   horizontal padding (10px 64px) than this had. Passion One is a headline/display
   face; using it at button scale is what read as clunky/off. .contact-link and
   .btn-outline-navy already use the body font for actionable buttons for the same
   reason - this brings the primary .btn pill in line with that pattern. */
.btn {
  display: inline-block; padding: 0.75rem 3rem; border-radius: 999px; font-weight: 700;
  font-family: 'Inter', sans-serif; text-decoration: none; font-size: 1rem;
  border: 2px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--cta-blue); color: #fff; }
.btn-primary:hover { background: #1f3f6b; }
.btn-outline { border-color: #fff; color: #fff; background: transparent; }
.btn-outline:hover { background: rgba(255,255,255,0.1); }

/* Contact page's two email links - deliberately lighter than .btn (Passion
   One 700 pill CTA) since these are plain mailto links, not marketing CTAs. */
.contact-link {
  display: inline-block; padding: 0.65rem 1.25rem; border-radius: 999px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 2px solid var(--cta-blue); cursor: pointer;
}
.contact-link-primary { background: var(--cta-blue); color: #fff; }
.contact-link-primary:hover { background: #1f3f6b; }
.contact-link-outline { background: transparent; color: var(--cta-blue); }
.contact-link-outline:hover { background: var(--cta-blue); color: #fff; }
/* 2026-08-18 (Jon: "all button should be same width and centered... more
   padding and the how can we help be centered and the vertical spacings
   more closely aligned and the gap"): "General enquiry" was a wide filled
   pill (sized by its own longer label) sitting next to a narrower outline
   pill sized to its shorter label, both left-aligned under left-aligned
   copy - inconsistent widths, no center alignment, and each button's own
   <p> wrapper fell back to the browser's default paragraph margin for
   spacing, which didn't match the tighter, deliberate rhythm the rest of
   the page uses. Scoped to .contact-card only, not .split-card generally -
   Careers' left-aligned single CTA wasn't part of this ask and stays as-is. */
/* Jon (2026-08-19): heading + copy should be left-aligned, not centered -
   supersedes the earlier "centered" ask this comment block used to
   describe. Buttons below are centered independently via their own margin
   (see .contact-link below), so this doesn't affect them. */
.contact-card .split-text { text-align: left; }
.contact-card .split-text p { margin: 0; }
/* Kayvan (Slack DM, 2026-08-19, JMUK-59 follow-up) + Jon: stacked at every
   width, not side-by-side on desktop - the earlier side-by-side layout
   (James Hoard QA, 2026-08-18) is superseded. Both CTAs must be the same
   size - the previous side-by-side version had a bug where each <p> flex
   item sized to its own <a>'s intrinsic content width (the .contact-link's
   own width:100% was 100% of its immediate <p> parent, which itself
   auto-sized to the anchor's natural width - a circular reference that
   resolved to two differently sized pills: "General enquiry" at 165px vs
   "Press and media enquiry" at 232px). Fixed width instead of 100% removes
   the ambiguity. Jon (2026-08-19, same day): centered, not left-aligned -
   supersedes the brief flush-left version this comment used to describe. */
.contact-card .contact-ctas { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.contact-card .contact-link {
  display: block; width: 280px; max-width: 100%; margin: 0 auto;
  text-align: center; padding: 0.85rem 1.75rem;
}
.contact-card.content-card { padding: 3.75rem; }
@media (max-width: 600px) {
  .contact-card.content-card { padding: 2rem 1.75rem; }
}

form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 420px; margin-top: 1.5rem; }
form label { font-weight: 600; font-size: 0.9rem; color: var(--navy); font-family: 'Inter', sans-serif; }
form input, form textarea {
  padding: 0.7rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; font-family: 'Inter', inherit;
}
form input:focus, form textarea:focus { outline: 2px solid var(--navy); border-color: var(--navy); }
/* NFR-ACC-03: default UA focus ring was never overridden for links/buttons,
   so nothing was actually broken, but visibility against the navy header and
   dark footer specifically wasn't guaranteed. An explicit, high-contrast
   focus-visible ring guarantees it works on every background this site uses. */
a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--tomato); outline-offset: 2px;
}
header.site a:focus-visible, header.site button:focus-visible,
footer.site a:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: 0.75rem 1.25rem;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }
form .checkbox { flex-direction: row; align-items: center; gap: 0.5rem; text-transform: none; }
form .btn { align-self: flex-start; }
form .btn:disabled { opacity: 0.6; cursor: not-allowed; }
form .form-status { font-family: 'Inter', sans-serif; font-weight: 600; margin: 0; }
form .form-status.ok { color: #1a7a3c; }
form .form-status.err { color: var(--tomato); }

footer.site { background: var(--deepsea); color: #fff; padding: 3rem 1.5rem 1.5rem; margin-top: 3rem; }
/* Jon (2026-08-19): always use the mobile/centered footer layout at every
   width - the desktop 3-column CSS Grid (logo+social left, legal center,
   Contact Us/Privacy Policy right, >=1100px) is removed. Single flex-column
   stack, centered, at every viewport now. Perse Faily QA (Slack
   #jm-uk-non-ordering, "Footer text center between graphics"/"3 panels")
   noted the legal line's own extra margin-top stacked on top of this gap
   made it read as pinned to the bottom edge instead of evenly spaced from
   row 2 - one shared gap value for all 5 stacked items fixes that without a
   per-element margin. */
footer.site .footer-inner { position: relative; max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
footer.site .footer-logo img { height: 44px; width: auto; }
/* Live-inspected jerseymikes.com/contact-us footer: "Contact Us"/"Gift
   Cards"/etc are Block Berthold BQ Regular 16px, not Passion One. */
footer.site .footer-contact {
  font-family: 'Block Berthold BQ Regular', 'Passion One', Impact, 'Arial Narrow', sans-serif;
  color: #fff; text-decoration: none; font-size: 1rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.03em;
}
footer.site .footer-contact:hover { text-decoration: underline; }
footer.site .footer-social { display: flex; gap: 0.35rem; }
/* NFR-ACC-06: hit area must be >=44x44 CSS px; icon art stays 26px, centered
   in a 44x44 anchor via flex, so the visual size is unchanged. */
footer.site .footer-social .social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; opacity: 0.85;
}
footer.site .footer-social .social-icon:hover { opacity: 1; }
footer.site .footer-social .social-icon img { display: block; width: 26px; height: 26px; }
footer.site .footer-privacy { color: #fff; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.03em; }
footer.site .footer-privacy:hover { text-decoration: underline; }
footer.site .footer-legal { color: var(--muted); font-size: 0.75rem; text-align: center; font-family: 'Inter', sans-serif; margin: 0 auto; }
/* Mobile keeps a slightly larger gap than the universal base rule above
   (0.75rem vs 0.5rem) - confirmed by Jon as "already looking perfect" at
   this value, so it stays pinned here rather than folded into the base
   rule. */
@media (max-width: 768px) {
  footer.site .footer-inner { gap: 0.75rem; }
}

.hero-announce { display: block; }
/* 2026-08-14: re-added - a prior session removed these based on a Figma
   reference that turned out to be a hidden/superseded frame (see the JMUK-17
   correction note). The real current v3 "Homepage opt03" frame has thin red
   rule lines directly above and below COMING SOON, confirmed via direct
   Figma MCP access this session. */
/* Figma's "coming soon" node (I188:35744;106:612) uses solid 6px-tall red
   bars above/below the text, not a 2px border rule - the 2px version read
   noticeably thinner/lighter than the design. */
.hero-announce .coming-soon {
  display: inline-block; color: var(--tomato); font-size: 1.6rem; letter-spacing: 0.08em;
  border-top: 6px solid var(--tomato); border-bottom: 6px solid var(--tomato);
  padding: 0.35rem 0.5rem;
}
.hero-announce .london { display: block; color: var(--tomato); font-size: 6rem; }
/* Fixed 6rem (96px) clips "LONDON" off the right edge below ~520px viewports -
   it's a single unbreakable word, so it can't wrap like the other headings. */
@media (max-width: 520px) {
  .hero-announce .london { font-size: 16vw; }
}

/* Measured directly against the Figma Culture&History frame (pixel-scanned
   the actual render, not guessed): header-bottom to H1-top is ~156px at
   1512px width, not the 56px this had - a real, large shortfall. Scaled back
   down on narrower viewports since Figma only specifies a desktop layout.
   2026-08-18: re-measured against the LIVE site (not Figma) at 2560/3440px -
   real gap is 148px, 8px less than this Figma-derived 156px. Trusting the
   live DOM over the Figma frame here, same as every other correction this
   session. */
.cream-header { text-align: center; padding: 9.25rem 1.5rem 1rem; }
/* QA-reported (Kayvan, 2026-08-17): Culture heading too close to/overlapping
   the logo on mobile/tablet - same root cause as the .white-header overlap
   fixed the same day (logo's absolute-positioned bleed overflows ~104px
   below the 56px header bar at its current 117px height), just never
   applied here since Culture uses .cream-header, a separate rule. Same
   3.5rem->6rem bump for the same real clearance.
   JMUK-27 (Pratima): 6rem still left a real ~7.7px bounding-box overlap -
   bumped to 7rem, matching the same correction on .white-header above.
   2026-08-18 (Perse, "mobile logo offset issue still and padding"):
   re-measured live jerseymikes.com/culture header-to-h1 gap directly instead
   of re-deriving from the logo's old (pre-fix) bleed estimate - it's 92px at
   769-1279px and 72px at <=768px, both well under the 7rem/112px this had at
   every width below 1280px. The logo's real mobile bleed is now ~3px (see
   header.site .brand img's mobile override below, transform-origin was the
   actual remaining overlap risk, not padding) - safe to match the smaller
   real gap. */
@media (max-width: 1279px) {
  .cream-header { padding: 5.75rem 1.5rem 1rem; }
}
@media (max-width: 768px) {
  .cream-header { padding: 4.5rem 1.5rem 1rem; }
}
/* JMUK-63 (QA screenshot, 2026-08-18): our Culture h1 wraps to 4 lines at
   375px ("JERSEY / MIKE'S IS A / BRAND THAT / BELIEVES") vs jerseymikes.com's
   real 3 lines at the identical 52px font-size - live-measured their actual
   h1 container at 343px wide at 375px viewport vs ours at 327px (16px extra
   side padding each edge). Their side gutter is 1rem, not our 1.5rem;
   matching it gives the heading the same available width and wrap points. */
@media (max-width: 480px) {
  .cream-header { padding-left: 1rem; padding-right: 1rem; }
}
/* 2026-08-14: Culture/Privacy h1 was measured against a low-res (481px/497px)
   Figma export as undersized, but the finding was blocked pending a
   trustworthy reference (JMUK-17). Native 1512px Figma MCP screenshots this
   session confirm it directly - roughly doubled here to match.
   2026-08-17: re-checked against the LIVE jerseymikes.com/culture page's own
   computed style at 1920px (not Figma this time) - it's actually 90px
   (5.625rem), and the line wraps because the heading sits in a 1440px-wide
   container, not because of any text-specific max-width. Our 72px/no-cap
   version fit on one line at wide viewports where prod wraps to two -
   that's the "break variance" at 1920px/100% zoom. */
.cream-header h1 { font-size: 5.625rem; max-width: 1440px; margin: 0 auto; line-height: 1.05; }
/* 2026-08-18 (Perse, "culture headers... padding"): the old 480px-and-under
   13vw rule left every width from 481px up to 1279px on the 90px desktop
   size, which is why "JERSEY MIKE'S IS A BRAND THAT BELIEVES" wrapped to 4
   lines and ran off the bottom of the viewport at e.g. 623px. Live-measured
   jerseymikes.com/culture's real h1 font-size at several widths instead of
   guessing a vw scale: flat 52px from >=320px up to 767px, flat 67px from
   768-1279px, 90px (this rule's 5.625rem) only at >=1280px. Fixed px per
   tier, not a fluid vw scale - real site doesn't scale continuously here. */
@media (max-width: 1279px) {
  .cream-header h1 { font-size: 67px; }
}
@media (max-width: 767px) {
  /* JMUK-38: real jerseymikes.com switches to the 67px tier exactly AT
     768px, not above it - a max-width:768px query here made our own 768px
     render stay on the 52px tier, 15px smaller than the real site at that
     exact width (confirmed live: US 767px=52px, 768px=67px; ours was
     52px/52px). max-width:767px matches the real cutover precisely. */
  .cream-header h1 { font-size: 52px; }
}
.cream-header-tomato h1 { color: var(--tomato); }
.cream-header-navy h1 { color: var(--navy); }
.cream-header-sub { color: var(--navy); font-weight: 600; margin: 0.4rem 0 0; text-transform: none; }
/* JMUK-56 (QA, 2026-08-18): "extra space above Privacy Policy content, reduce
   to match other pages". .cream-header's 9.25rem/5.75rem/4.5rem top-padding
   tiers were tuned to jerseymikes.com/culture's real measured header gap -
   Privacy has no such real-site equivalent (from-scratch zero-collection
   notice, see build_privacy() above), so it was inheriting Culture's much
   taller header for no reason. Measured Careers/Contact's .white-header h1
   top at a flat 96px from viewport top at every width (56px sticky nav +
   2.5rem padding) - flat override here (no media tiers, single property so
   it wins over .cream-header's own tiered padding-top at every width per
   CSS cascade order) matches that same 96px landing spot for Privacy's h1. */
.cream-header-navy { padding-top: 2.5rem; }

/* 2026-08-18 (Perse, "you only updated the heights on mobile break need to
   do on desktop too"): the 7rem/112px top padding below (JMUK-27's real,
   at-the-time-correct fix for a genuine overlap) was reasoning from the
   logo's bleed footprint alone. Re-measured jerseymikes.com/careers's real
   header-to-"Careers"-title gap across the FULL width range (390 up through
   1920px) instead of assuming desktop needed more clearance than mobile:
   it's a flat 40px (2.5rem) at every single width, including 1440px+ where
   their logo bleeds even further below the header (~71px) than ours does.
   The reason 40px is safe even with a big bleed: the logo sits in a fixed
   left-hand column while the heading is centered in the full page width -
   at desktop widths they never share the same horizontal space, so the
   logo's vertical bleed doesn't matter past a small margin. The real
   overlap JMUK-27 fixed only happens at narrow/mobile widths, where
   centered text can span underneath the logo's x-range - already covered
   by the mobile-only logo shrink (see header.site .brand img's mobile
   override above). One flat value replaces the old desktop/mobile split. */
/* JMUK-36 (Jeremy QA, 2026-08-18): "missing the defining line" / "spacing
   too small" under the title band. Live-inspected jerseymikes.com/careers'
   real title band (.page-header): box-shadow 2px 2px 2px rgba(0,0,0,0.06) -
   a soft, low-opacity edge that reads as a defining line without a hard
   border. Matched verbatim. Paired with a small margin-bottom so the band
   is visually separated from the section below, not just its own padding. */
.white-header { background: #fff; text-align: center; padding: 2.5rem 1.5rem 2rem; box-shadow: 2px 2px 2px rgba(0,0,0,0.06); margin-bottom: 1rem; position: relative; z-index: 1; }
/* JMUK-40 ("title a few points bigger"): live-checked jerseymikes.com's real
   page-title span on both /careers and /contact-us (same component,
   font-h1-sm/sm:text-5xl) - 48px at every width down to their sm breakpoint,
   not just desktop. Was 2.4rem (38.4px). */
.white-header h1 { color: var(--navy); font-size: 3rem; margin: 0; text-transform: none; }

/* Figma's hero paragraph wraps in a narrower column than .section's default
   760px - pixel-measured at matching 1512px scale: Figma's text block is
   ~584px wide vs. this rendering at ~690px before the fix. */
.brand-promise { text-align: center; font-weight: 600; color: var(--navy); max-width: 600px; margin-left: auto; margin-right: auto; }

.content-card {
  background: #fff; border-radius: 24px; max-width: 1080px; margin: 2rem auto;
  padding: 3rem; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
/* FR-GLB-21: mobile reflows to full width but keeps the cream pattern
   visible at the left/right page edges too, not just above/below the card -
   was margin: 1rem 0 (vertical only), losing the side margins entirely. */
@media (max-width: 600px) { .content-card { border-radius: 12px; margin: 1rem 0.75rem; padding: 1.75rem; } }

.content-card.form-card { max-width: 560px; }
.split-card { display: flex; gap: 3rem; align-items: center; }
.split-card .split-text { flex: 1 1 380px; }
/* James Hoard, Slack 2026-08-15: Careers/Contact h2 should be brand navy -
   had no color rule at all before this, so it fell back to body's --ink
   (near-black). CTA buttons already matched #1A365D exactly (.btn-primary
   background: var(--navy)) - no change needed there. */
/* JMUK-28 (Jeremy): "Main Title Fonts are smaller, for example: How Can We
   Help?" - live-inspected jerseymikes.com/contact-us's real heading: 48px,
   weight 400, Passion One (matches our font-family already, just not the
   size/weight). Ours was inheriting the generic h2,h3 rule (2rem/700) with
   no override - real measured gap, not a guess. */
.split-card .split-text h2 { color: var(--navy); font-size: 3rem; font-weight: 400; margin: 0 0 1rem; }
/* JMUK-39: "'The difference is you' should be script/squiggly, not regular
   type." Careers-only (Contact's "How Can We Help?" isn't part of this
   ticket, stays Passion One) - live-checked jerseymikes.com/careers for
   their real equivalent treatment first rather than assuming it should
   match: they don't have literal matching copy, but every emotional/culture
   heading on that exact page ("Ready To Apply?", "Join a Culture of
   Giving", "The Best Team on The Planet, Always") renders in their script
   face (Aerokids there; Thunder here per Jon's licensing call), weight 400,
   sometimes navy sometimes red depending on context. First pass matched
   "Join a Culture of Giving" (navy) - JMUK-51 (Jeremy) flagged it should be
   red instead. Re-checked: "Ready To Apply?" is the real positional match
   (their first script heading right after the top hero/collage, same as
   ours), not "Join a Culture of Giving" (deep in the page, a different
   section) - that one is red (rgb(238,0,12), matches --tomato exactly).
   Corrected color to match the right analog, not just any script heading. */
.careers-card .split-text h2 { font-family: 'Thunder', cursive; color: var(--tomato); }
/* The collage image read as cramped/clipped against the card edge compared
   to jerseymikes.com/careers's own render of this same asset - not an actual
   CSS crop (verified the full image renders, same aspect as their source),
   just too small/tight in its column. Sized up so it reads bigger/taller. */
.split-card .split-media { flex: 1 1 460px; }
.split-card .split-media img { width: 100%; height: auto; display: block; border-radius: 16px; }
/* FR-CON/FR-CAR: Figma r3's primary CTA button on Careers/Contact spans most
   of the text column, not just the label's intrinsic width - confirmed
   against the real "Home - Career"/"Home - Contact" v3 frames 2026-08-14. */
.split-card .split-text > p > .btn { display: block; width: 100%; max-width: 370px; text-align: center; }
/* flex: 1 1 380px sizes columns by width in the row layout above - stacked to
   flex-direction: column on mobile, that same 380px becomes a min-height
   instead, leaving a large blank gap under the (now full-width, shorter)
   image before the text block starts. Reset the basis so items just take
   their natural content height. */
@media (max-width: 768px) {
  .split-card { flex-direction: column; }
  .split-card .split-text, .split-card .split-media { flex-basis: auto; }
  /* Perse Faily QA (Slack #jm-uk-non-ordering, "on mobile breakpoint the
     image needs to be on top"): matches jerseymikes.com/careers's real
     mobile order (photo collage above the "Ready to apply?" copy). Careers'
     markup has split-text before split-media in the DOM (Contact has the
     opposite order) - use flex order instead of touching markup so both
     pages' mobile stack puts the image first regardless of DOM order. */
  .split-card .split-media { order: -1; }
  .split-card .split-text { order: 2; }
  /* JMUK-40 (Contact mobile: "extra padding between copy and image, and
     between title/paragraph/H2/image"): the 3rem row gap makes sense
     between side-by-side desktop columns but is oversized once stacked -
     live-measured jerseymikes.com/contact-us mobile's real image-to-heading
     gap at 32px, vs. this page's 88px (48px flex gap + h2's own browser-
     default top margin, removed above). Reduced to match. */
  .split-card { gap: 2rem; }
}

/* Same pixel-scan measurement: H1-bottom to sandwich-image-top is ~194px at
   1512px width - cream-header's 1rem bottom padding plus this section's old
   2.5rem top padding (56px total) was well short of that. */
/* 2026-08-18 (Jon: "not as wide or as large... for images and giant
   screens, make sure we match their stuff"): live-measured
   jerseymikes.com/culture's real belief-column container at 1920px - each
   column image renders at 704px (container spans x:240-1680, a real 1440px
   width), vs. this section's 1100px cap rendering images at only 506px.
   Widened to match; gap corrected from 2.5rem to their real measured 32px
   (2rem) gap between columns at the same time. */
/* 2026-08-18 (JMUK-38: "too much padding above the sandwich and between
   sandwich and header"): the flat 11rem top padding was a single value with
   no responsive tiers, live-measured against jerseymikes.com's real h1-to-
   image gap at 3 tiers instead - 148px at >=1280px (this rule's own
   default), 92px at 768-1279px, 72px below that. Their gap already
   includes their header's own bottom padding (~16px, matches our
   .cream-header's own 1rem bottom padding) before this section's padding
   starts, so the values here are the real gap minus that 16px. */
.culture-belief { max-width: 1440px; display: flex; gap: 2rem; align-items: flex-start; padding: 8.25rem 1.5rem 2.5rem; }
@media (max-width: 1279px) {
  .culture-belief { padding-top: 4.75rem; }
}
@media (max-width: 768px) {
  .culture-belief { padding-top: 3.5rem; }
}
.culture-belief-plain { display: grid; gap: 1.5rem; }
.belief-col { flex: 1 1 0; display: flex; flex-direction: column; gap: 1.75rem; }
.belief-col-offset { margin-top: 3rem; }
.belief-col img { width: 100%; height: auto; display: block; border-radius: 12px; }
/* 2026-08-18 ("line heights of culture with those signature needs to match
   live site"): was inheriting body's 1.6 line-height at the base 16.8px font
   size (26.88px), much tighter than jerseymikes.com's real paragraph -
   live-measured their actual computed style instead of guessing a ratio:
   18px/42px line-height at every width up to their xl breakpoint (1280px),
   jumping to 24px/46.128px at >=1280px. */
.belief-col p { margin: 0; font-size: 18px; line-height: 42px; }
@media (min-width: 1280px) {
  .belief-col p { font-size: 24px; line-height: 46.128px; }
}
/* JMUK-17/JMUK-22: Figma r3 renders belief/History emphasis words in a red
   script face. Real brand font wired in 2026-08-15 - started as Aerokids
   (matched jerseymikes.com's own live rendering exactly), same day switched
   to Thunder per James Hoard - Jose's version uses Thunder, not Aerokids.
   Desktop size/line-height match James's actual Figma "Highlight text" style
   exactly (screenshotted from Figma's own Edit text style panel, not
   estimated): Thunder, Regular, 48px, line-height 48 (1.0x), 0% tracking.
   Figma's screenshot doesn't specify a mobile value; kept the 32px mobile
   tier from the original Aerokids/live-US-site measurement since it was
   already verified clean (no overflow) at 375px. Color unchanged, --tomato
   already matches #DA291C. */
.belief-col strong, .history strong {
  color: var(--tomato); font-family: 'Thunder', cursive; font-weight: 400;
  font-size: 32px; line-height: 1.1;
}
@media (min-width: 1280px) {
  .belief-col strong, .history strong { font-size: 48px; line-height: 1; }
}
.btn-outline-navy {
  display: inline-block; align-self: flex-start; padding: 0.55rem 1.75rem; border-radius: 999px;
  border: 2px solid var(--cta-blue); color: var(--cta-blue); font-weight: 700; text-decoration: none; font-size: 0.95rem;
}
.btn-outline-navy:hover { background: var(--cta-blue); color: #fff; }
@media (max-width: 768px) { .culture-belief { flex-direction: column; } .belief-col-offset { margin-top: 0; } }

/* JMUK-29 (Iryna, Galaxy S9/1024/Chrome): clicking "Company History" jumps
   #history flush to the top of the viewport, which lands it directly behind
   the sticky 56px header - the "History" h2 was clipped by the header edge,
   and the first block's h3 ("Started in 1956") sat in the same zone the
   logo's absolute-positioned bleed overlaps (same ~104px past the header
   that .white-header/.cream-header already account for, see their padding
   comments above). scroll-margin-top gives the anchor jump the same
   clearance so neither collides after scrolling.
   JMUK-29 QA return (Iryna): a flat 168px scroll-margin-top reserves the
   right AMOUNT of space above #history, but that space is filled by
   whatever precedes #history in the flow (the tail of .culture-belief's
   last paragraph/strong text), not blank space - it bled through under the
   header/logo instead of being hidden. Moved the same 168px total
   clearance into #history's own top padding instead (56px scroll-margin,
   just enough to clear the sticky bar, + 7rem/112px padding-top = 168px) -
   same pattern .white-header/.cream-header already use for this exact
   logo-bleed problem, so the space above the heading is #history's own
   background, not the previous section's text. */
/* Same 1100px->1440px giant-screen widening as .culture-belief above -
   jerseymikes.com's History images render notably larger (~637-675px vs.
   our 506px at 1920px) because their whole content container is 1440px
   wide here too, not 1100px. */
/* James Hoard QA (Slack #jm-uk-qa-support, 2026-08-18): "reduce the spacing
   between the two sections" - .culture-belief's own bottom padding
   (2.5rem) plus this top padding (was 7rem) totaled ~152px between the
   belief content and the History heading. Reduced to 4.5rem here
   (~104px total with belief's unchanged bottom padding) - a qualitative
   tightening per the direct ask, not a live-matched value like the
   line-height fix below (jerseymikes.com/culture/history's own History
   section has no equivalent section-title heading to measure against). */
/* Jon (2026-08-19): "History" section sits too far below the belief
   section's last line on both desktop and mobile - was 4.5rem/72px flat
   top padding (~98.5px real gap after the belief section's own bottom
   padding), reduced to bring it in line with the page's other section
   gaps (~32-48px elsewhere). scroll-margin-top is unchanged - it's for the
   #history anchor-jump clearance under the sticky header (JMUK-29), a
   separate concern from the visual gap on a normal scroll-down. */
.history { max-width: 1440px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; scroll-margin-top: 56px; }
.history h2 { text-align: center; color: var(--tomato); margin-bottom: 2rem; text-transform: uppercase; }
.history-row { display: flex; gap: 2.5rem; align-items: center; margin-bottom: 2.5rem; }
/* DOM is always text-then-image now (see the render loop above) - desktop
   left/right placement is done with flex-direction alone: row-reverse puts
   the (DOM-second) image visually first/left, plain row leaves the
   (DOM-first) text on the left and image on the right. */
.history-row.image-left { flex-direction: row-reverse; }
.history-row.image-right { flex-direction: row; }
.history-text { flex: 1 1 0; }
/* James Hoard QA: "history section line spacing needs to be adjusted" -
   there was no rule at all for history-text paragraphs before this, so
   they fell back to the page's base font-size/line-height. Live-measured
   jerseymikes.com/culture/history's own history paragraph text directly
   at 1440px viewport (main p / section p): 24px font, 46.128px line-height
   - identical to .belief-col p's already-matched >=1280px tier a few rules
   up, so mirror that same two-tier breakpoint (18px/42px below 1280px,
   24px/46.128px at/above it) rather than re-deriving a new one. */
.history-text p { margin: 0; font-size: 18px; line-height: 42px; }
@media (min-width: 1280px) {
  .history-text p { font-size: 24px; line-height: 46.128px; }
}
.history-image { flex: 1 1 0; }
.history-image img { width: 100%; height: auto; display: block; border-radius: 12px; }
/* Figma's "Started In 1956" node (188:35818) is uppercase Block Berthold BQ
   Regular at #123661 - a prior comment above claimed history h3s were
   mixed-case like h2/h3 elsewhere, but that was never actually checked
   against this node and was wrong. */
.history-text h3 {
  font-family: 'Block Berthold BQ Regular', 'Passion One', Impact, 'Arial Narrow', sans-serif;
  color: #123661; text-transform: uppercase; margin-top: 0;
}
/* .history-row.image-left/.image-right (2 classes) outrank the plain
   .history-row selector below on specificity alone, @media or not - so
   without repeating both classes here, this override never actually wins
   and every history row stays side-by-side (cramped, unreadable) on mobile. */
@media (max-width: 768px) {
  .history-row, .history-row.image-left, .history-row.image-right { flex-direction: column; }
}

/* jerseymikes.com/culture's own "Back to Top" button (data-testid
   scroll-to-top-button): centered, bold, 16px, text-midblue (#29528C),
   generous vertical padding, no border/background - matched directly. */
.back-to-top {
  display: block; margin: 0 auto; background: none; border: none; cursor: pointer;
  color: #29528C; font-weight: 700; font-size: 1rem; font-family: 'Inter', sans-serif;
  padding: 2.5rem 1rem;
}

.pending-badge {
  display: inline-block; background: var(--muted); color: #1a1a1a; font-weight: 700;
  padding: 0.65rem 2rem; border-radius: 999px; font-size: 1rem;
}
.pending-note { display: block; font-size: 0.8rem; color: #6b7178; margin-top: 0.4rem; font-weight: 400; }
/* FR-CAR-02: Figma r3's "Join the team" button carries no visible explanatory
   text - the new-tab note is real accessibility context, kept for screen
   readers via a visually-hidden (not display:none, which VoiceOver/NVDA skip)
   clip pattern, rather than rendered on-screen like a second label. */
.outbound-note {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.pill-form { flex-direction: row; max-width: 560px; margin: 1.5rem auto 0; flex-wrap: wrap; justify-content: center; }
.pill-form input { flex: 1 1 220px; border-radius: 999px; padding: 0.7rem 1.25rem; }
.pill-form .pill-btn { flex: none; }
.pill-form .form-status { flex-basis: 100%; text-align: center; }

.policy-section { margin-top: 2.5rem; }
/* JMUK-54 (Jeremy, 2026-08-18): live-inspected jerseymikes.com/privacy-policy's
   real h2 ("1. What Our Privacy Policy Covers") - plain dark sans-serif, no
   color shift, no underline. Our brand Passion-One/navy/red-underline
   treatment (inherited from the base h2,h3 rule) read as a marketing
   headline instead of a legal document, which is what Jeremy flagged.
   font-family/weight/color overrides here undo the base rule specifically
   for policy headings; nothing else on the page is affected. */
.policy-section h2 {
  font-family: 'Inter', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700; letter-spacing: normal; color: var(--ink); font-size: 1.35rem;
}
.policy-table-wrap { overflow-x: auto; margin: 1rem 0; }
.policy-table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.policy-table th, .policy-table td { border: 1px solid #ddd; padding: 0.6rem 0.75rem; text-align: left; vertical-align: top; }
.policy-table th { background: var(--navy); color: #fff; }
/* FR-LGL: Figma r3's Privacy tables alternate row background for readability
   on wide tables (confirmed against the real "Home - Privacy Policy" v3 frame,
   section 3 "What Personal Data We Collect" onward). */
.policy-table tbody tr:nth-child(even) { background: #e4e4e4; }
.section ul { padding-left: 1.25rem; }
.section li { margin-bottom: 0.5rem; }