/* ============================================================
   Jack's Self Storage — Main Stylesheet
   Typography: Playfair Display (headings) + DM Sans (body)
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-dark: #184C4F;
  --color-dark-alt: #1a5c60;
  --color-charcoal: #1f6165;
  --color-text: #2c3e3f;
  --color-text-light: #6F7672;
  --color-light: #F7F5F0;
  --color-cream: #F0EDE6;
  --color-white: #ffffff;
  --color-accent: #D6B26E;
  --color-accent-hover: #c09a54;
  --color-border: #dddbd6;

  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nav-height: 110px;
  --section-padding: 80px;
  --container-width: 1260px;
  --radius: 8px;
  --radius-lg: 12px;
  --transition: 200ms ease;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); }
body { font-family: var(--font-body); color: var(--color-text); line-height: 1.6; background: var(--color-white); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
ul, ol { list-style: none; }
.petchey-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

/* --- Container --- */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }
.container--narrow { max-width: 720px; }

/* --- Typography --- */
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; }
em { font-style: italic; color: var(--color-accent); }

.section-tag { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; color: var(--color-accent); margin-bottom: 12px; }
.section-tag-light { color: var(--color-accent); }
.section-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 16px; }
.section-title-light { color: var(--color-white); }
.section-desc { font-size: 1.1rem; color: var(--color-text-light); max-width: 560px; margin: 0 auto; }
.section-desc-light { color: rgba(255,255,255,0.7); }
.section-header { text-align: center; margin-bottom: 48px; }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  padding: 12px 28px; border-radius: var(--radius); border: 2px solid transparent;
  cursor: pointer; transition: all var(--transition); text-decoration: none;
}
.btn-lg { padding: 14px 32px; font-size: 1rem; }
.btn-sm { padding: 8px 18px; font-size: 0.85rem; }
.btn-full { width: 100%; }
.btn-accent { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.btn-accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-dark { background: var(--color-dark); color: var(--color-white); border-color: var(--color-dark); }
.btn-dark:hover { background: var(--color-dark-alt); }
.btn-outline { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.4); }
.btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--color-white); }
.btn-outline-light { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: var(--color-white); }
.btn-outline-dark { background: transparent; color: var(--color-dark); border-color: var(--color-border); }
.btn-outline-dark:hover { border-color: var(--color-dark); }

/* --- Terms & Conditions --- */
.terms-content h2 { font-size: 1.45rem; margin: 44px 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(24,76,79,0.12); }
.terms-content h3 { font-size: 1.1rem; margin: 24px 0 8px; }
.terms-content p { margin-bottom: 14px; color: var(--color-text); line-height: 1.75; }
.terms-content .terms-updated { color: var(--color-text-light); font-size: 0.9rem; font-style: italic; }

/* Numbered/lettered clause lists — restore markers the global reset strips */
.terms-content ol { list-style: lower-alpha outside; margin: 0 0 18px; padding-left: 28px; }
.terms-content ol[type="i"] { list-style-type: lower-roman; }
.terms-content ol[type="1"] { list-style-type: decimal; }
.terms-content ol li { margin-bottom: 8px; line-height: 1.7; padding-left: 4px; }
.terms-content ol li::marker { font-weight: 700; color: var(--color-dark); }
.terms-content ul { list-style: disc outside; margin: 0 0 18px; padding-left: 26px; }
.terms-content ul li { margin-bottom: 8px; line-height: 1.7; }

/* Numbered clauses. The document carries its own numbering in the text, so
   the markers are not generated — the depth is conveyed by indent alone. */
.terms-content .terms-clause { margin-bottom: 12px; }
.terms-content .terms-clause--2 { margin-left: 0; }
.terms-content .terms-clause--3 { margin-left: 24px; }
.terms-content .terms-clause--4 { margin-left: 48px; }
.terms-content .terms-clause strong { color: var(--color-dark); }
@media (max-width: 640px) {
  .terms-content .terms-clause--3 { margin-left: 12px; }
  .terms-content .terms-clause--4 { margin-left: 24px; }
}

/* Definitions: indented description under each bold term */
.terms-content dl { margin: 0 0 18px; }
.terms-content dt { margin-top: 14px; color: var(--color-dark); }
.terms-content dd { margin: 2px 0 0 20px; padding-left: 12px; border-left: 2px solid rgba(24,76,79,0.15); color: var(--color-text); line-height: 1.7; }
.terms-updated { color: var(--color-text-light); font-size: 0.9rem; }
.footer-legal { margin-top: 6px; }
.footer-legal a { font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--color-white); }

.about-foundation {
  margin-top: 20px;
  padding: 14px 18px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
  color: var(--color-text-light);
}

/* The global reset strips links back to plain text, which left the charity
   link here indistinguishable from the sentence around it. Gold on cream is
   only 1.7:1, so the text takes the dark body colour (9.9:1) and gold is used
   for the underline instead, where contrast does not carry meaning. */
.about-foundation a {
  color: var(--color-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.about-foundation a:hover,
.about-foundation a:focus-visible {
  text-decoration-color: var(--color-text);
}

/* --- Sections --- */
.section { padding: var(--section-padding) 0; }
.section-light { background: var(--color-white); }
.section-cream { background: var(--color-cream); }
.section-dark { background: var(--color-dark); color: var(--color-white); }

/* --- Navbar --- */
.navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-height); display: flex; align-items: center;
  background: rgba(247, 245, 240, 0.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.nav-container { display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 10px; color: var(--color-white); font-size: 1.1rem; flex-shrink: 0; margin-right: 40px; }
.navbar .nav-logo { color: var(--color-dark); }
.nav-logo .custom-logo { height: 104px; width: auto; display: block; }
.logo-icon { display: flex; color: var(--color-accent); }
.logo-text { font-family: var(--font-body); font-weight: 300; white-space: nowrap; }
.logo-text strong { font-weight: 700; }

.nav-links { display: flex; gap: 24px; align-items: center; }
.nav-links a { color: rgba(24,76,79,0.9); font-size: 0.85rem; font-weight: 700; transition: color var(--transition); white-space: nowrap; }
.nav-links a:hover { color: var(--color-dark); }
.nav-cta-group { display: flex; align-items: center; gap: 8px; margin-left: 12px; flex-shrink: 0; }
.nav-cta { white-space: nowrap; }
.navbar .nav-cta { background: var(--color-dark); border-color: var(--color-dark); color: var(--color-light); }
.navbar .nav-cta:hover { background: var(--color-dark-alt); border-color: var(--color-dark-alt); }

.nav-dropdown { position: relative; }
.nav-dropdown > a { display: flex; align-items: center; gap: 4px; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: var(--color-white); border-radius: var(--radius); box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all var(--transition);
}
.nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown-menu li a { color: var(--color-text); padding: 10px 20px; display: block; font-size: 0.9rem; }
.nav-dropdown-menu li a:hover { background: var(--color-cream); color: var(--color-dark); }

.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.mobile-toggle span { display: block; width: 24px; height: 2px; background: var(--color-dark); margin: 5px 0; transition: all var(--transition); }

/* --- Hero --- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  background: var(--color-dark); overflow: hidden; padding-top: var(--nav-height);
}
.hero-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0.3;
}
.hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(26,31,46,0.9), rgba(26,31,46,0.6)); }
.hero-content { position: relative; z-index: 1; max-width: 720px; }
.hero-tag { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; color: var(--color-accent); margin-bottom: 20px; }
.hero-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4rem); color: var(--color-white); margin-bottom: 24px; line-height: 1.1; }
.hero-subtitle { font-size: 1.15rem; color: rgba(255,255,255,0.75); max-width: 540px; margin-bottom: 40px; line-height: 1.7; }

.hero-finder { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-lg); padding: 12px 16px; display: flex; align-items: center; gap: 12px; margin-bottom: 36px; max-width: 600px; }
.hero-finder label { color: rgba(255,255,255,0.5); font-size: 0.8rem; white-space: nowrap; }
.hero-finder__select { flex: 1; background: transparent; border: none; color: var(--color-white); font-family: var(--font-body); font-size: 0.9rem; outline: none; appearance: none; cursor: pointer; padding: 4px 0; }
.hero-finder__select option { color: var(--color-dark); }
.hero-finder__btn { flex-shrink: 0; padding: 10px 24px; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badge { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 8px 18px; border-radius: 50px; color: rgba(255,255,255,0.7); font-size: 0.82rem; }
.badge svg { color: var(--color-accent); flex-shrink: 0; }

.hero-offers { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.hero-offer { display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-left: 3px solid var(--color-accent); border-radius: var(--radius); padding: 12px 18px; }
.hero-offer__loc { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--color-accent); }
.hero-offer__deal { color: var(--color-white); font-weight: 700; font-size: 1rem; }
.hero-offer__note { color: rgba(255,255,255,0.55); font-size: 0.78rem; font-style: italic; }

.hero-content--split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; max-width: 1180px; padding: 0 40px; }
.hero-content--split .hero-copy { max-width: 620px; }
.hero-photo { position: relative; }
.hero-photo img { display: block; width: 100%; max-height: 560px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,0.35); }

/* --- Page Hero (non-home) --- */
.page-hero {
  background: var(--color-dark); padding: calc(var(--nav-height) + 60px) 0 60px; text-align: center;
}
.page-hero__title { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 3rem); color: var(--color-white); margin-bottom: 12px; }
.page-hero__subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.65); max-width: 560px; margin: 0 auto; }

/* --- Location Hero --- */
.loc-hero { position: relative; padding: calc(var(--nav-height) + 80px) 0 80px; background: var(--color-dark); overflow: hidden; }
.loc-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.25; }
.loc-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,31,46,0.95), rgba(26,31,46,0.5)); }
.loc-hero__content { position: relative; z-index: 1; }
.loc-hero__title { font-family: var(--font-heading); font-size: clamp(2.2rem, 5vw, 3.5rem); color: var(--color-white); margin-bottom: 12px; }
.loc-hero__address { color: rgba(255,255,255,0.65); font-size: 1.1rem; margin-bottom: 16px; }
.loc-hero__address a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3); transition: color 0.2s, border-color 0.2s; }
.loc-hero__address a:hover { color: var(--color-white); border-color: var(--color-accent); }
.loc-hero__former { color: rgba(255,255,255,0.55); font-size: 0.95rem; font-style: italic; margin-bottom: 20px; }
.loc-hero__promo { display: flex; flex-direction: column; gap: 3px; border-left: 3px solid var(--color-accent); padding: 4px 0 4px 16px; margin-bottom: 28px; }
.loc-hero__promo strong { font-size: 1.2rem; font-weight: 700; color: var(--color-white); }
.loc-hero__promo span { font-size: 0.92rem; font-weight: 500; color: rgba(255,255,255,0.7); }
.loc-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Rebrand reassurance notice under the hero — heading + left-rule quote */
.loc-rebrand-notice { padding: 44px 0; }
.loc-rebrand-notice__inner { max-width: 820px; margin: 0 auto; }
.loc-rebrand-notice__title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-dark); margin-bottom: 16px; }
.loc-rebrand-notice__quote { border-left: 3px solid var(--color-accent); padding-left: 22px; margin: 0; }
.loc-rebrand-notice__quote p { color: var(--color-text); font-size: 1rem; line-height: 1.7; margin-bottom: 14px; }
.loc-rebrand-notice__quote p:last-child { margin-bottom: 0; }

/* --- Location Details Bar --- */
.loc-details-bar { background: var(--color-cream); padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.loc-details-bar__inner { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }
.loc-detail { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.loc-detail svg { color: var(--color-accent); flex-shrink: 0; }
.loc-detail a:hover { color: var(--color-accent); }

/* --- About Grid --- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.about-lead { font-size: 1.15rem; font-weight: 500; margin-bottom: 16px; line-height: 1.7; }
.about-text p { margin-bottom: 16px; color: var(--color-text-light); line-height: 1.7; }

.loc-about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.loc-about-text p { margin-bottom: 16px; line-height: 1.7; }

/* No hours card to sit beside: the copy fills the row and centres, instead of
   hugging the left edge with an empty column next to it. */
.loc-about-grid--single { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; text-align: center; }

/* --- Hours Card --- */
.loc-hours-card { background: var(--color-cream); border-radius: var(--radius-lg); padding: 28px; }
.loc-hours-card h3 { font-size: 1.2rem; margin-bottom: 16px; }
.hours-table { width: 100%; }
.hours-table tr { border-bottom: 1px solid var(--color-border); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td { padding: 10px 0; font-size: 0.9rem; }
.hours-table td:first-child { font-weight: 600; }
.hours-table td:last-child { text-align: right; color: var(--color-text-light); }

/* --- Features Grid --- */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.features-grid--wide { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.features-grid--balanced { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1080px; margin: 0 auto; }
.features-grid--balanced .feature-card { flex: 0 0 calc((100% - (var(--feature-cols) - 1) * 16px) / var(--feature-cols)); min-width: 180px; }
@media (max-width: 640px) { .features-grid--balanced .feature-card { flex-basis: calc(50% - 8px); min-width: 0; } }
.feature-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  padding: 24px 16px; background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius); transition: all var(--transition);
}
.feature-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.feature-card svg { width: 32px; height: 32px; color: var(--color-accent); }
.feature-card span { font-size: 0.85rem; font-weight: 600; }
.feature-card--detailed { padding: 32px 24px; }
.feature-card--detailed h3 { font-size: 1.1rem; margin-top: 4px; }
.feature-card--detailed p { font-size: 0.9rem; color: var(--color-text-light); margin-top: 8px; }
.section-cream .feature-card { background: var(--color-white); }

/* Rich feature cards (icon + title + description) */
.feature-cards-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 1080px; margin: 0 auto; }
.feature-card-rich {
  flex: 0 0 calc((100% - (var(--feature-cols) - 1) * 20px) / var(--feature-cols));
  min-width: 240px; text-align: left;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px); padding: 26px 24px; transition: all var(--transition);
}
.feature-card-rich:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.feature-card-rich__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(214,178,110,0.14); margin-bottom: 14px; }
.feature-card-rich__icon svg { width: 24px; height: 24px; color: var(--color-accent-dark, #a3762a); }
.feature-card-rich__title { font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-dark); margin-bottom: 8px; }
.feature-card-rich__desc { font-size: 0.92rem; color: var(--color-text-light); line-height: 1.6; }
@media (max-width: 720px) { .feature-card-rich { flex-basis: 100%; } }

/* Featured single offer (Deals section) */
.offer-feature { max-width: 640px; margin: 0 auto; text-align: center; background: var(--color-white); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-lg, 14px); padding: 36px 32px; }
.offer-feature__badge { display: inline-block; background: var(--color-accent); color: var(--color-dark); font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: 5px 14px; border-radius: 50px; margin-bottom: 16px; }
.offer-feature__title { font-family: var(--font-heading); font-size: 1.7rem; color: var(--color-dark); margin-bottom: 12px; }
.offer-feature__copy { font-size: 1.05rem; color: var(--color-text); line-height: 1.6; margin-bottom: 22px; }
.offer-feature__terms { font-size: 0.8rem; color: var(--color-text-light); margin-top: 18px; line-height: 1.5; }

/* Size-guide prompt under the pricing table */
.pricing-size-guide { text-align: center; margin-top: 32px; }
.pricing-size-guide p { color: var(--color-text-light); margin-bottom: 12px; }

/* Find us in [City] section */
.loc-find__gallery { margin-bottom: 40px; }
.loc-find__details { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.loc-find__address-wrap { display: inline-flex; align-items: flex-start; gap: 12px; text-align: left; }
.loc-find__pin { width: 24px; height: 24px; color: var(--color-accent); flex-shrink: 0; margin-top: 3px; }
.loc-find__address { font-style: normal; display: flex; flex-direction: column; gap: 2px; color: var(--color-text-light); font-size: 0.95rem; }
.loc-find__address strong { color: var(--color-dark); font-size: 1.05rem; margin-bottom: 4px; }
.loc-find__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* --- Locations Grid --- */
.locations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }

/* --- Location Card --- */
.location-card {
  background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--color-border); transition: all var(--transition); position: relative;
}
.location-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.08); transform: translateY(-3px); }
.location-card--coming-soon { opacity: 0.7; }
.location-card__badge { position: absolute; top: 12px; right: 12px; background: var(--color-accent); color: var(--color-white); padding: 4px 12px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; z-index: 2; }
.location-card__image { height: 200px; overflow: hidden; background: var(--color-cream); }
.location-card__image img { width: 100%; height: 100%; object-fit: cover; }
.location-card__placeholder {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--color-dark);
  background: linear-gradient(160deg, var(--color-cream) 0%, #e5e0d4 100%);
}
.location-card__placeholder svg { opacity: 0.7; }
.location-card__placeholder-name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; }
.location-card__placeholder-note { font-size: 0.75rem; color: var(--color-text-light); text-transform: uppercase; letter-spacing: 1px; }
.location-card__directions {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.82rem; font-weight: 600; color: var(--color-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.location-card__directions:hover { color: var(--color-accent-hover); }
.location-card__body { padding: 20px; }
.location-card__title { font-size: 1.25rem; margin-bottom: 4px; }
.location-card__title a:hover { color: var(--color-accent); }
.location-card__address { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 12px; line-height: 1.5; }
.location-card__features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.feature-badge-sm { font-size: 0.75rem; background: var(--color-cream); padding: 4px 10px; border-radius: 50px; font-weight: 500; }
.location-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Pricing Grid --- */
.pricing-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.pricing-grid > * { flex: 0 1 280px; min-width: 240px; max-width: 340px; }

.pricing-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 28px; display: flex; flex-direction: column; position: relative; transition: all var(--transition);
}
.pricing-card:hover { border-color: var(--color-accent); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.pricing-card--popular { border-color: var(--color-accent); box-shadow: 0 4px 20px rgba(200,150,90,0.15); }
.pricing-card__badge { position: absolute; top: -1px; right: 20px; background: var(--color-accent); color: var(--color-white); padding: 4px 14px; border-radius: 0 0 var(--radius) var(--radius); font-size: 0.75rem; font-weight: 600; }
.pricing-card__header { margin-bottom: 16px; }
.pricing-card__size { font-size: 2rem; font-family: var(--font-heading); font-weight: 700; display: block; }
.pricing-card__name { font-size: 1.1rem; font-weight: 600; color: var(--color-text); }
.pricing-card__body { flex: 1; margin-bottom: 20px; }
.pricing-card__dimensions { font-size: 0.85rem; color: var(--color-text-light); margin-bottom: 8px; }
.pricing-card__desc { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.6; }
.pricing-card__footer { border-top: 1px solid var(--color-border); padding-top: 16px; }
.pricing-card__price { font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; }
.pricing-card__price span { font-weight: 400; font-size: 0.85rem; color: var(--color-text-light); }

/* --- Offers Grid --- */
.offers-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.offers-grid > * { flex: 0 1 320px; min-width: 260px; max-width: 400px; }
.offer-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 28px; position: relative; overflow: hidden;
}
.offer-card__badge { display: inline-block; background: var(--color-accent); color: var(--color-white); padding: 4px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; margin-bottom: 12px; }
.offer-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.offer-card p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.6; }

/* --- Steps --- */
.steps-grid { display: flex; align-items: flex-start; gap: 0; justify-content: center; flex-wrap: wrap; }
.step-card { flex: 1; min-width: 200px; max-width: 280px; text-align: center; padding: 0 16px; }
.step-number { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--color-accent); margin-bottom: 16px; }
.step-content h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step-content p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.7; }
.step-connector { display: flex; align-items: center; padding-top: 24px; color: var(--color-border); }

.steps-detailed { max-width: 680px; margin: 0 auto; }
.step-detailed { display: flex; gap: 28px; padding: 32px 0; border-bottom: 1px solid var(--color-border); }
.step-detailed:last-child { border-bottom: none; }
.step-detailed__number { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--color-accent); flex-shrink: 0; line-height: 1; }
.step-detailed__content h2 { font-size: 1.3rem; margin-bottom: 8px; }
.step-detailed__content p { color: var(--color-text-light); line-height: 1.7; }

/* --- Gallery Grid --- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.gallery-item { border-radius: var(--radius); overflow: hidden; cursor: pointer; aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.gallery-item:hover img { transform: scale(1.05); }

/* --- Map --- */
.loc-map { border-radius: var(--radius-lg); overflow: hidden; }
.loc-map iframe { width: 100%; height: 400px; border: 0; }

/* --- Gallery Lightbox --- */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all var(--transition); }
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox img { max-width: 90%; max-height: 90vh; border-radius: var(--radius); }
.lightbox-close { position: absolute; top: 20px; right: 20px; background: none; border: none; color: var(--color-white); font-size: 2rem; cursor: pointer; }

/* --- FAQs --- */
.faq-list { margin-bottom: 48px; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question {
  width: 100%; background: none; border: none; padding: 20px 0; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; font-size: 1.05rem; font-weight: 600; font-family: var(--font-body);
  color: var(--color-text); cursor: pointer; text-align: left;
}
.faq-question svg { flex-shrink: 0; transition: transform var(--transition); }
.faq-question[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 300ms ease; }
.faq-answer p { padding: 0 0 20px; color: var(--color-text-light); line-height: 1.7; }
.faq-cta { text-align: center; padding-top: 16px; }
.faq-cta p { font-size: 1.1rem; margin-bottom: 16px; }

/* --- Contact Grid --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.contact-info { display: flex; flex-direction: column; gap: 24px; }
.contact-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-item svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--color-accent); margin-top: 4px; }
.contact-item strong { display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.contact-item p, .contact-item a { font-size: 1rem; line-height: 1.6; }
.contact-item a:hover { color: var(--color-accent); }
.contact-locations { margin-top: 16px; }
.contact-locations h3 { font-size: 1.1rem; margin-bottom: 12px; }
.contact-locations li { padding: 6px 0; font-size: 0.9rem; }
.contact-form-wrap h2 { font-size: 1.5rem; margin-bottom: 24px; }

/* --- Forms --- */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.85rem; font-weight: 600; }
.section-dark .form-group label { color: rgba(255,255,255,0.8); }
.form-group input, .form-group select, .form-group textarea {
  padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 0.95rem; background: var(--color-white);
  transition: border-color var(--transition); outline: none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-accent); }
.section-dark .form-group input, .section-dark .form-group select, .section-dark .form-group textarea { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: var(--color-white); }
.section-dark .form-group input::placeholder, .section-dark .form-group textarea::placeholder { color: rgba(255,255,255,0.4); }

/* --- Footer --- */
.footer { background: var(--color-dark); color: rgba(255,255,255,0.7); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr; gap: 32px; margin-bottom: 40px; }
.footer-brand .nav-logo { margin-bottom: 12px; }
.footer-tagline { font-size: 0.9rem; line-height: 1.6; }
.footer-col h4 { color: var(--color-white); font-size: 0.95rem; margin-bottom: 16px; }
.footer-col ul li { margin-bottom: 8px; }
.footer-col ul li a { font-size: 0.9rem; transition: color var(--transition); }
.footer-col ul li a:hover { color: var(--color-white); }
.footer-contact li { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.footer-contact svg { flex-shrink: 0; color: var(--color-accent); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; text-align: center; font-size: 0.85rem; }

/* --- Content Page --- */
.content-page { max-width: 780px; margin: 0 auto; }
.content-page h2 { font-size: 1.5rem; margin: 32px 0 12px; }
.content-page h3 { font-size: 1.2rem; margin: 24px 0 8px; }
.content-page p { margin-bottom: 16px; line-height: 1.7; color: var(--color-text-light); }
.content-page ul, .content-page ol { margin-bottom: 16px; padding-left: 24px; }
.content-page li { margin-bottom: 8px; list-style: disc; color: var(--color-text-light); }

/* --- Trust Bar --- */
.trust-bar { background: var(--color-cream); border-bottom: 1px solid var(--color-border); padding: 16px 0; }
.trust-bar__inner { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.trust-item svg { width: 22px; height: 22px; color: var(--color-accent); flex-shrink: 0; }

/* --- Use Case Cards --- */
.usecase-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.usecase-grid--compact { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.usecase-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 32px 28px; transition: all var(--transition);
}
.section-cream .usecase-card { background: var(--color-white); }
.usecase-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.usecase-card__icon { width: 48px; height: 48px; background: var(--color-cream); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.usecase-card__icon svg { width: 24px; height: 24px; color: var(--color-accent); }
.usecase-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.usecase-card p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.7; }

/* --- Size Suggestion Cards --- */
.size-suggestion-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.size-suggestion {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 32px 28px; text-align: center; transition: all var(--transition);
}
.size-suggestion:hover { border-color: var(--color-accent); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.size-suggestion__size { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: var(--color-accent); margin-bottom: 4px; }
.size-suggestion h3 { font-size: 1.1rem; margin-bottom: 12px; }
.size-suggestion p { font-size: 0.9rem; color: var(--color-text-light); line-height: 1.6; margin-bottom: 16px; }
.size-suggestion__from { font-weight: 700; font-size: 1rem; color: var(--color-dark); }

/* --- Size Guide Cards --- */
.size-guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.size-guide-card {
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; position: relative; overflow: hidden; transition: all var(--transition);
}
.size-guide-card:hover { border-color: var(--color-accent); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.size-guide-card--popular { border-color: var(--color-accent); box-shadow: 0 4px 20px rgba(200,150,90,0.15); }
.size-guide-card__badge { position: absolute; top: 0; right: 20px; background: var(--color-accent); color: var(--color-white); padding: 4px 14px; border-radius: 0 0 var(--radius) var(--radius); font-size: 0.75rem; font-weight: 600; }
.size-guide-card__header { padding: 28px 28px 0; }
.size-guide-card__size { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--color-accent); display: block; }
.size-guide-card__name { font-size: 1.15rem; font-weight: 600; margin-top: 2px; }
.size-guide-card__dims { font-size: 0.85rem; color: var(--color-text-light); margin-top: 4px; }
.size-guide-card__body { padding: 20px 28px; flex: 1; }
.size-guide-card__equiv { font-size: 0.9rem; color: var(--color-text-light); margin-bottom: 16px; font-style: italic; }
.size-guide-card__body h4 { font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.size-guide-card__body ul { padding-left: 18px; margin-bottom: 16px; }
.size-guide-card__body li { font-size: 0.9rem; color: var(--color-text-light); margin-bottom: 4px; list-style: disc; line-height: 1.5; }
.size-guide-card__ideal { font-size: 0.85rem; color: var(--color-text-light); }
.size-guide-card__ideal strong { color: var(--color-text); }
.size-guide-card__footer { padding: 20px 28px; border-top: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.size-guide-card__price { font-size: 1.2rem; font-weight: 700; }
.size-guide-card__price small { font-weight: 400; font-size: 0.85rem; color: var(--color-text-light); }

/* --- Testimonials --- */
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-bottom: 40px; }
.testimonial-card {
  background: var(--color-cream); border-radius: var(--radius-lg); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.testimonial-stars { display: flex; gap: 2px; color: #f59e0b; }
.testimonial-card blockquote { font-size: 0.95rem; line-height: 1.7; color: var(--color-text); font-style: italic; flex: 1; }
.testimonial-author { display: flex; flex-direction: column; }
.testimonial-author strong { font-size: 0.9rem; color: var(--color-dark); }
.testimonial-author span { font-size: 0.8rem; color: var(--color-text-light); }

/* --- Trust Badge --- */
.trust-badge-row { display: flex; justify-content: center; }
.trust-badge { display: flex; align-items: center; gap: 12px; background: var(--color-cream); padding: 16px 28px; border-radius: 50px; }
.trust-badge__stars { display: flex; gap: 2px; color: #16a34a; }
.trust-badge__text { font-size: 0.95rem; }
.trust-badge__text strong { font-weight: 700; }
.trust-badge__source { font-size: 0.8rem; color: var(--color-text-light); }

/* --- Not Sure Actions --- */
.not-sure-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --- Reveal Animation --- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* --- Utility --- */
.text-center { text-align: center; }
.mt-lg { margin-top: 48px; }
.no-locations { text-align: center; grid-column: 1 / -1; padding: 40px; color: var(--color-text-light); }

/* --- Floating WhatsApp CTA --- */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px 18px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.whatsapp-float:hover {
  color: #fff;
  background: #1fb85a;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}
.whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  flex: 0 0 auto;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .about-grid, .loc-about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .usecase-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .size-guide-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 768px) {
  :root { --section-padding: 60px; }

  .nav-container { width: 100%; }
  .nav-links { display: none; }
  /* Cap by width too: the logo is wide, and a fixed height can push the
     Book Now button off-screen on narrow phones. */
  .nav-logo .custom-logo { height: auto; max-height: 86px; max-width: 44vw; }
  /* Per Kubra (13 July 2026): on phones the facility photo sits between the
     small tag line and the main title, not below the finder. display:contents
     lifts the copy's children into the flex context so they can be ordered
     around the photo, which is a sibling of .hero-copy. */
  .hero-content--split { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0 24px; }
  .hero-content--split .hero-copy { display: contents; }
  .hero-content--split .hero-tag { order: 1; }
  .hero-content--split .hero-photo { order: 2; margin: 2px 0 22px; }
  .hero-content--split .hero-title { order: 3; }
  .hero-content--split .hero-subtitle { order: 4; }
  .hero-content--split .hero-offers { order: 5; }
  .hero-content--split .hero-finder { order: 6; margin-bottom: 0; }
  /* Every child here needs an explicit order: .hero-copy is display:contents,
     so these are all flex items of one container, and anything left unset
     defaults to order:0 and jumps ahead of the lot. */
  .hero-content--split .callback-prompt { order: 7; }
  .hero-photo img { max-height: 240px; }
  .nav-logo { margin-right: 0; }
  .nav-links.active {
    display: flex; flex-direction: column; position: absolute; top: var(--nav-height); left: 0; right: 0;
    background: var(--color-light); padding: 20px 24px; gap: 0;
    border-bottom: 1px solid var(--color-border);
    max-height: calc(100vh - var(--nav-height));
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  .nav-links.active { align-items: stretch; }
  .nav-links.active li { padding: 12px 0; border-bottom: 1px solid rgba(24,76,79,0.12); }
  .nav-links.active li a { display: flex; align-items: center; gap: 4px; }
  .nav-links.active .nav-dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; padding: 0 0 0 16px; }
  .nav-links.active .nav-dropdown-menu li a { color: rgba(24,76,79,0.65); padding: 8px 0; }
  .nav-cta-group { margin-left: 0; }
  .nav-cta-group .nav-cta { padding: 10px 16px; font-size: 0.8rem; }
  .mobile-toggle { display: block; order: -1; margin-right: 12px; }
  body.nav-open { overflow: hidden; }
  .mobile-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
  .mobile-toggle.active span:nth-child(2) { opacity: 0; }
  .mobile-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

  .hero-finder { flex-direction: column; align-items: stretch; }
  .hero-badges { gap: 8px; }
  .hero-title { font-size: 2.2rem; }
  /* On phones the centred hero content can hug the fixed header; give the
     tag line generous breathing room below the nav. */
  .hero { padding-top: calc(var(--nav-height) + 88px); padding-bottom: 56px; }

  .locations-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .offers-grid { grid-template-columns: 1fr; }
  .usecase-grid { grid-template-columns: 1fr; }
  .size-suggestion-grid { grid-template-columns: 1fr; }
  .size-guide-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .steps-grid { flex-direction: column; align-items: center; }
  .step-connector { transform: rotate(90deg); padding: 8px 0; }
  .trust-bar__inner { gap: 16px; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr; }
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    min-height: 52px;
    padding: 12px;
  }
  .whatsapp-float span { display: none; }

  .step-detailed { flex-direction: column; gap: 12px; }
}

@media (max-width: 480px) {
  .nav-logo { font-size: 0.95rem; }
  .nav-logo .custom-logo { max-height: 70px; max-width: 42vw; }
  .nav-cta-group .nav-cta { padding: 9px 12px; font-size: 0.75rem; }
  .hero-title { font-size: 1.8rem; }
  .section-title { font-size: 1.6rem; }
  .loc-hero__title { font-size: 1.8rem; }
  .loc-hero__actions { flex-direction: column; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* Why Choose Jack's? extras */
.features-note { margin-top: 14px; font-size: 0.85rem; color: var(--color-text-light); font-style: italic; }
.about-size-cta { margin-top: 28px; }

.trust-badge__link { font-size: 0.85rem; font-weight: 700; color: var(--color-dark); text-decoration: underline; }

/* Locations map */
.locations-map { height: 460px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); z-index: 0; }
@media (max-width: 768px) { .locations-map { height: 320px; } }

/* Location live pricing */
.pricing-promo-banner { color: var(--color-accent-dark, #a3762a); font-weight: 700; }
.pricing-availability { display: inline-block; padding: 4px 14px; border-radius: 50px; font-size: 0.8rem; font-weight: 700; }
.pricing-availability.is-available { background: rgba(16,185,129,0.12); color: #0f7a4f; }
.pricing-availability.is-unavailable { background: rgba(107,114,128,0.12); color: #6b7280; }
/* Three-line price hierarchy: headline rate / promo tag / then-rate */
.pricing-card__price .price-amount,
.pricing-card__price .price-promo-tag,
.pricing-card__price .price-then { display: block; }
.pricing-card__price .price-amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-dark);
  line-height: 1.2;
}
.pricing-card__price .price-amount__unit { font-size: 0.6em; font-weight: 600; }
.pricing-card__price .price-promo-tag {
  margin-top: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #a3762a;
}
.pricing-card__price .price-then {
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-dark);
  opacity: 0.8;
}

/* Weekly / Monthly price toggle */
.pricing-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 20px auto 0;
  padding: 4px;
  background: var(--color-cream);
  border: 1px solid var(--color-border, #e5e0d8);
  border-radius: 50px;
}
.pricing-toggle__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--color-text, #333);
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 8px 22px;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pricing-toggle__btn.is-active { background: var(--color-dark); color: #fff; }
.pricing-section[data-period="weekly"] .pricing-card__price-block[data-period="monthly"],
.pricing-section[data-period="monthly"] .pricing-card__price-block[data-period="weekly"] { display: none; }

/* Asset manager card (sits in the About grid's side column) */
.loc-manager-card { display: flex; flex-direction: row; align-items: center; gap: 20px; background: var(--color-cream); border-radius: var(--radius-lg); padding: 22px 24px; }
.loc-manager-card__photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow); }
.loc-manager-card__name { font-family: var(--font-heading); font-size: 1.3rem; margin: 2px 0 6px; }
.loc-manager-card__note { color: var(--color-text-light); font-size: 0.92rem; margin-bottom: 10px; }
.loc-manager-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .loc-manager-card { flex-direction: column; align-items: center; text-align: center; } .loc-manager-card__actions { justify-content: center; } }

.loc-about-side { display: flex; flex-direction: column; gap: 24px; }

/* Brand map pin (Leaflet divIcon) */
.jacks-map-pin { background: none; border: none; }
.jacks-map-pin::before {
  content: ''; display: block; width: 30px; height: 30px; margin: 0 auto;
  background: var(--color-dark); border: 3px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
.jacks-map-pin__dot {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent);
}
.locations-map .leaflet-popup-content-wrapper { border-radius: 10px; font-family: var(--font-body); }
.locations-map .leaflet-popup-content a { color: var(--color-dark); font-weight: 700; }

/* Size guide: dynamic pricing note + unavailable-size fallback */
.size-guide-card__price--tbc { font-size: 0.95rem; color: var(--color-text-light); font-weight: 600; }
.size-guide-note { max-width: 760px; margin: 32px auto 0; text-align: center; font-size: 0.9rem; color: var(--color-text-light); line-height: 1.6; }
.size-guide-note a { color: var(--color-accent-dark, #a3762a); text-decoration: underline; }

/* --- Cookie consent banner --- */
.cookie-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2000;
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px); box-shadow: 0 8px 32px rgba(0,0,0,0.16);
  padding: 18px 22px;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent__inner {
  max-width: var(--container-width); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
}
.cookie-consent__text { font-size: 0.92rem; color: var(--color-text); line-height: 1.6; margin: 0; flex: 1 1 320px; }
.cookie-consent__text a { color: var(--color-accent-dark, #a3762a); text-decoration: underline; }
/* Equal prominence: declining must be as easy as accepting. */
.cookie-consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-consent__actions .btn { min-width: 108px; }
@media (max-width: 560px) {
  .cookie-consent__inner { flex-direction: column; align-items: stretch; }
  /* Same trap as the callback prompt: the 320px basis is a width while this is
     a row, but becomes a height once the direction flips — which stretched the
     banner to swallow most of a phone screen. */
  .cookie-consent__text { flex: 0 1 auto; }
  .cookie-consent__actions { justify-content: stretch; }
  .cookie-consent__actions .btn { flex: 1; }
}
.cookie-settings-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Size guide: complete list of live sizes (the cards only cover round numbers) */
.all-sizes { max-width: 1080px; margin: 56px auto 0; padding-top: 40px; border-top: 1px solid var(--color-border); }
.all-sizes__title { font-family: var(--font-heading); font-size: 1.5rem; color: var(--color-dark); text-align: center; margin-bottom: 8px; }
.all-sizes__intro { text-align: center; color: var(--color-text-light); font-size: 0.95rem; max-width: 620px; margin: 0 auto 28px; line-height: 1.6; }
.all-sizes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.all-sizes__item { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--transition); }
.all-sizes__item:hover { border-color: var(--color-accent); }
.all-sizes__size { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--color-dark); }
.all-sizes__price { font-size: 0.95rem; font-weight: 700; color: var(--color-dark); }
.all-sizes__price small { font-weight: 400; font-size: 0.78rem; color: var(--color-text-light); }
.all-sizes__locs { font-size: 0.78rem; color: var(--color-text-light); }
.all-sizes__cta { text-align: center; margin-top: 28px; }

/* The native option list can't be styled; kept minimal for the no-JS fallback. */
.hero-finder__select option { background: var(--color-dark); color: var(--color-white); }

/* Location card photo carousel (featured image + gallery) */
.location-card__image.has-carousel { position: relative; overflow: hidden; }
.location-card__slides { position: relative; width: 100%; height: 100%; }
.location-card__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms ease; }
.location-card__slide.is-active { opacity: 1; position: relative; }
.location-card__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--color-dark);
  font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0;
  transition: opacity var(--transition), background var(--transition); z-index: 2;
}
.location-card__nav--prev { left: 10px; }
.location-card__nav--next { right: 10px; }
.location-card__image.has-carousel:hover .location-card__nav,
.location-card__nav:focus-visible { opacity: 1; }
.location-card__nav:hover { background: var(--color-white); }
.location-card__dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; }
.location-card__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: background var(--transition); }
.location-card__dot.is-active { background: var(--color-accent); }
/* Touch devices have no hover, so keep the arrows visible */
@media (hover: none) { .location-card__image.has-carousel .location-card__nav { opacity: 1; } }
.all-sizes__status { font-size: 0.72rem; font-weight: 700; margin-top: 2px; }
.all-sizes__status.is-available { color: #0f7a4f; }
.all-sizes__status.is-unavailable { color: var(--color-text-light); }

/* --- Custom select (replaces the unstylable native option list) --- */
.cselect { position: relative; display: inline-block; min-width: 220px; }
/* Native select kept for value + no-JS fallback, hidden once enhanced. */
.cselect .cselect__native { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; left: 0; top: 0; }

.cselect__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; cursor: pointer;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius); color: var(--color-white);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; text-align: left;
  transition: border-color var(--transition), background var(--transition);
}
.cselect__trigger::after {
  content: ''; width: 10px; height: 10px; flex-shrink: 0;
  border-right: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--transition);
}
.cselect.is-open .cselect__trigger::after { transform: rotate(-135deg) translate(-2px, -2px); }
.cselect__trigger:hover { border-color: var(--color-accent); background: rgba(255,255,255,0.12); }
.cselect__trigger:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(214,178,110,0.3); }

.cselect__list {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
  margin: 0; padding: 6px; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--color-dark); border: 1px solid rgba(214,178,110,0.35);
  border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}
.cselect__option {
  padding: 10px 14px; border-radius: 6px; cursor: pointer;
  color: rgba(255,255,255,0.85); font-size: 0.92rem; font-weight: 500;
  transition: background var(--transition), color var(--transition);
}
.cselect__option:hover,
.cselect__option.is-active { background: rgba(214,178,110,0.18); color: var(--color-white); }
.cselect__option[aria-selected="true"] { color: var(--color-accent); font-weight: 700; }

/* Hero finder: the custom select must behave as a flex child, and sit *inside*
   the pill rather than drawing its own box within it. */
.hero-finder .cselect { flex: 1 1 auto; min-width: 0; }
.hero-finder .cselect__trigger {
  background: transparent; border: none; border-radius: 0;
  padding: 4px 0; font-size: 0.9rem; font-weight: 500;
}
.hero-finder .cselect__trigger:hover { background: transparent; color: var(--color-accent); }
.hero-finder .cselect__trigger:focus-visible { box-shadow: none; outline: 2px solid var(--color-accent); outline-offset: 4px; }
.hero-finder .cselect__list { min-width: 220px; }
.hero-finder__btn { flex-shrink: 0; }
@media (max-width: 640px) {
  .hero-finder .cselect { width: 100%; }
}

/* Keep the selected value on one line — it wrapped when space was tight. */
.hero-finder .cselect__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-finder label { flex-shrink: 0; }

/* Location hero: two columns when an operations manager is set */
.loc-hero__inner { position: relative; z-index: 1; }
.loc-hero__inner.has-manager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); gap: 40px; align-items: center; }
.loc-hero__manager { justify-self: end; width: 100%; }
/* Keeps the original cream, photo-left card — just lifted off the dark hero. */
.loc-manager-card--hero { box-shadow: 0 12px 32px rgba(0,0,0,0.22); padding: 24px 26px; }
/* Keep the phone/email buttons on one line rather than stacking. */
.loc-manager-card--hero .loc-manager-card__actions { flex-wrap: nowrap; }
.loc-manager-card--hero .loc-manager-card__actions .btn { white-space: nowrap; }
@media (max-width: 900px) {
  .loc-hero__inner.has-manager { grid-template-columns: 1fr; gap: 28px; }
  .loc-hero__manager { justify-self: stretch; }
}
@media (max-width: 520px) {
  .loc-manager-card--hero { flex-direction: column; align-items: flex-start; }
}

/* Reviews: per-location Google reviews picker (replaces the aggregate badge) */
.reviews-picker { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 44px; }
.reviews-picker label { font-size: 0.9rem; font-weight: 600; color: var(--color-text-light); }
.reviews-picker .cselect { min-width: 260px; }
.reviews-picker .cselect__trigger { background: var(--color-white); border-color: var(--color-border); color: var(--color-dark); }
.reviews-picker .cselect__trigger:hover { border-color: var(--color-accent); background: var(--color-white); }
.size-guide-cta { text-align: center; margin-top: 40px; }

/* Raise a section while it contains an open custom select, so the panel isn't
   painted over by the following section (see the note in main.js). */
/* Raising z-index is only half the job: a section that clips its own overflow
   (the hero does, to contain its background) cuts the open panel off at its
   edge no matter how high the panel sits. The clip is lifted for exactly as
   long as a select is open. Safe here because the backgrounds this protects
   are inset:0 with no transform, so they cannot spill in the meantime. */
.has-open-select { position: relative; z-index: 2100; overflow: visible; }

/* --- Callback request ---------------------------------------------------- */
/* The prompt that sits alongside pricing, sized to read as a helpful aside
   rather than another competing call to action. */
.callback-prompt {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; flex-wrap: wrap;
  /* Capped and centred: at full container width the copy and the button end up
     at opposite edges of the page with a gulf between them, which reads as two
     unrelated things rather than one prompt. */
  max-width: 720px; margin: 28px auto; padding: 20px 24px;
  background: var(--color-cream); border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.callback-prompt__text { margin: 0; color: var(--color-text); line-height: 1.6; flex: 1 1 300px; }
.callback-prompt__btn { flex-shrink: 0; }

/* On dark sections the cream panel would fight the background. */
.section-dark .callback-prompt,
.hero .callback-prompt {
  background: rgba(255,255,255,0.06);
  border-left-color: var(--color-accent);
}
.section-dark .callback-prompt__text,
.hero .callback-prompt__text { color: rgba(255,255,255,0.85); }

body.modal-open { overflow: hidden; }

.callback-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.callback-modal[hidden] { display: none; }
.callback-modal__backdrop { position: absolute; inset: 0; background: rgba(20,32,33,0.6); }
.callback-modal__dialog {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--color-white); border-radius: var(--radius-lg, 14px);
  padding: 32px; box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}
.callback-modal__close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: 0; font-size: 28px; line-height: 1;
  color: var(--color-text-light); cursor: pointer; padding: 4px 8px;
}
.callback-modal__close:hover { color: var(--color-text); }
.callback-modal__title { font-family: var(--font-heading); font-size: 1.6rem; margin: 0 0 8px; color: var(--color-dark); }
.callback-modal__intro { margin: 0 0 20px; color: var(--color-text-light); font-size: 0.95rem; line-height: 1.6; }

.callback-field { margin-bottom: 14px; }
.callback-field label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: var(--color-dark); }
.callback-optional { font-weight: 400; color: var(--color-text-light); }
.callback-field input,
.callback-field select,
.callback-field textarea {
  width: 100%; padding: 11px 14px; font: inherit; font-size: 0.95rem;
  color: var(--color-text); background: var(--color-white);
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.callback-field input:focus,
.callback-field select:focus,
.callback-field textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(214,178,110,0.25);
}
.callback-field textarea { resize: vertical; min-height: 76px; }
.callback-form__submit { width: 100%; margin-top: 6px; }
.callback-smallprint { margin: 12px 0 0; font-size: 0.78rem; color: var(--color-text-light); text-align: center; }
.callback-error {
  margin: 0 0 14px; padding: 10px 14px; font-size: 0.88rem;
  color: #7f1d1d; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius);
}
.callback-success { text-align: center; padding: 12px 0; }
.callback-success svg { color: var(--color-accent); margin-bottom: 12px; }
.callback-success h3 { font-family: var(--font-heading); font-size: 1.35rem; margin: 0 0 8px; color: var(--color-dark); }
.callback-success p { margin: 0 0 20px; color: var(--color-text-light); line-height: 1.6; }

@media (max-width: 640px) {
  .callback-modal__dialog { padding: 26px 20px; }
  .callback-prompt { flex-direction: column; align-items: stretch; gap: 16px; padding: 18px 20px; }
  /* The row-direction basis has to be cleared here: flex: 1 1 300px is a width
     while the prompt is a row, but becomes a 300px *height* the moment the
     direction flips to column — which stretched the text block and left a
     chasm between the copy and the button. */
  .callback-prompt__text { flex: 0 1 auto; }
  .callback-prompt__btn { width: 100%; }
}