/* ==========================================================
   Sunroof King — Homepage Styles (Red / Black / White)
   Light, bright, premium automotive shop site.
   Built to match: Website Media/Website Design References/
   Sunroof-King-Homepage-Visual-Reference-CORRECT-2026-08-17.png
   ========================================================== */

:root{
  --red:#D2141B;
  --red-dark:#A50F15;
  --black:#171412;
  --charcoal:#221E1B;
  --charcoal-soft:#4A433D;
  --white:#FFFFFF;
  --cream:#FAF8F5;
  --gray-light:#F4F3F1;
  --line:#E7E3DD;
  --shadow-sm: 0 2px 10px rgba(23,20,18,0.08);
  --shadow-md: 0 10px 28px rgba(23,20,18,0.13);
  --shadow-lg: 0 24px 56px rgba(23,20,18,0.24);
  --radius: 12px;
  /* Approved Call/Text banner artwork (call and text us/call and text.png) uses its
     own orange brand color, independent of the red used elsewhere on the page. */
  --orange:#F2600C;
  --orange-dark:#C94A03;
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
[id]{ scroll-margin-top:96px; }

body{
  font-family:var(--font-sans);
  background:var(--white);
  color:var(--charcoal);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }

.wrap{ max-width:1280px; margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family:var(--font-serif); font-weight:700; color:var(--black); }

.eyebrow-rule{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-bottom:6px;
}
.eyebrow-rule .line{ width:56px; height:3px; background:var(--red); border-radius:2px; }
.eyebrow-rule h2{ font-size:2rem; text-transform:uppercase; letter-spacing:0.02em; }
.eyebrow-rule h2 .accent{ color:var(--red); }
.section-sub{ text-align:center; color:var(--charcoal-soft); font-weight:700; text-transform:uppercase; letter-spacing:0.1em; font-size:0.82rem; margin-bottom:30px; }

.section{ padding:52px 0; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-weight:700; font-size:0.98rem;
  border-radius:8px; border:2px solid transparent; cursor:pointer;
  transition:transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--red); border-color:var(--red); color:var(--white); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); }
.btn-outline-dark{ background:transparent; border-color:var(--black); color:var(--black); }
.btn-outline-dark:hover{ background:var(--black); color:var(--white); transform:translateY(-2px); }
.btn-outline-light{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.8); color:var(--white); }
.btn-outline-light:hover{ background:var(--white); color:var(--black); transform:translateY(-2px); }
.btn-lg{ padding:17px 34px; font-size:1.02rem; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn svg{ width:19px; height:19px; flex-shrink:0; }

/* ============================================================
   HEADER
   ============================================================ */
header{
  background:var(--white);
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 12px rgba(23,20,18,0.05);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:24px;
}

.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo-img{ width:205px; height:auto; display:block; }

.main-nav{ display:flex; gap:26px; font-size:0.94rem; font-weight:700; color:var(--charcoal); flex-wrap:wrap; }
.main-nav a{ padding:6px 0; border-bottom:2px solid transparent; }
.main-nav a:hover, .main-nav a.is-active{ color:var(--red); border-bottom-color:var(--red); }

/* Narrow-desktop band: keeps the nav + Call/Text box on ONE line now that the
   brand logo is larger. Gap only - no wording, colour or component changes. */
@media (min-width: 981px) and (max-width: 1160px){
  .header-inner{ gap:18px; }
  .main-nav{ gap:18px; }
}

/* ============================================================
   REUSABLE COMPONENT — Call / Text Banner  ( .ct-banner )
   This reproduces the approved artwork at
   `call and text us/call and text.png` (= assets/call-text-banner-reference.png)
   in live HTML/CSS so it keeps real tel:/sms: links, instead of a flat image.
   Three sizes: --sm (header), --lg (footer, full width), --card (fitted to a
   narrower column, used in the "Visit Our Shop" CTA card).
   ============================================================ */
.ct-banner{
  position:relative; background:var(--white);
  border:2px solid var(--orange); border-radius:28px;
  box-shadow:0 22px 50px rgba(242,96,12,0.14), 0 18px 40px rgba(23,20,18,0.16), 0 2px 6px rgba(23,20,18,0.08);
}
.ct-icon-btn{
  flex-shrink:0; border-radius:50%; border:3px solid var(--white);
  display:flex; align-items:center; justify-content:center; color:var(--white);
  background:radial-gradient(circle at 32% 28%, #FFB066 0%, var(--orange) 55%, var(--orange-dark) 100%);
  box-shadow:0 10px 20px rgba(242,96,12,0.4), inset 0 2px 3px rgba(255,255,255,0.65), inset 0 -4px 8px rgba(0,0,0,0.22);
  transition:transform 0.15s ease;
}
.ct-icon-btn:hover{ transform:translateY(-2px) scale(1.05); }
.ct-strip-dot{ width:4px; height:4px; border-radius:50%; background:var(--orange); display:inline-block; flex-shrink:0; }

/* ---- Shared banner internals (sized down per variant below) ---- */
.ct-banner-crown{
  position:absolute; top:-24px; left:50%; transform:translateX(-50%);
  width:54px; height:54px; border-radius:50%;
  background:var(--white); border:2px solid var(--orange); color:var(--orange-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(23,20,18,0.16);
}
.ct-banner-crown svg{ width:26px; height:26px; }
.ct-banner-row{ display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; row-gap:14px; }
.ct-banner-center{ text-align:center; }
.ct-banner-label{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:1.22rem; font-weight:700; font-style:italic; color:var(--charcoal);
  font-family:var(--font-serif); margin-bottom:4px;
}
.ct-line{ width:32px; height:2px; background:linear-gradient(90deg, transparent, var(--orange)); }
.ct-banner-label .ct-line:last-child{ background:linear-gradient(90deg, var(--orange), transparent); }
.ct-banner-phone{
  display:block; font-family:var(--font-sans); font-weight:800; color:var(--black);
  font-size:clamp(1.9rem, 4.4vw, 3.1rem); letter-spacing:0.01em;
}
.ct-banner-phone:hover{ color:var(--orange-dark); }
.ct-banner-strip{
  margin-top:22px; background:var(--cream); border:1px solid var(--orange); border-radius:999px;
  padding:12px 22px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:8px 12px; font-size:0.8rem; font-weight:700; color:var(--charcoal-soft); text-transform:uppercase; letter-spacing:0.02em;
}
.ct-banner-strip svg{ width:15px; height:15px; color:var(--orange-dark); flex-shrink:0; }

/* ---- Compact variant (header) ---- */
.ct-banner--sm{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 18px 6px 6px; border-radius:999px; flex-shrink:0;
}
.ct-banner--sm .ct-icon-btn{ width:38px; height:38px; border-width:2px; }
.ct-banner--sm .ct-icon-btn svg{ width:17px; height:17px; }
.ct-banner-center-sm{ display:flex; flex-direction:column; line-height:1.2; }
.ct-banner-label-sm{ font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--charcoal-soft); font-weight:700; }
.ct-banner-phone-sm{ font-size:0.98rem; font-weight:800; color:var(--black); font-family:var(--font-sans); }
.ct-banner-phone-sm:hover{ color:var(--orange-dark); }

/* ---- Reduced footer variant — same design, sized down in fixed px (not
   vw-clamp) so it complements the footer instead of dominating it. ---- */
.ct-banner--footer{ max-width:460px; margin:0 auto; padding:22px 24px 13px; }
.ct-banner--footer .ct-banner-row{ gap:16px; }
.ct-banner--footer .ct-icon-btn{ width:52px; height:52px; }
.ct-banner--footer .ct-icon-btn svg{ width:22px; height:22px; }
.ct-banner--footer .ct-banner-label{ font-size:0.98rem; margin-bottom:2px; }
.ct-banner--footer .ct-banner-phone{ font-size:1.7rem; }
.ct-banner--footer .ct-banner-crown{ width:42px; height:42px; top:-20px; }
.ct-banner--footer .ct-banner-crown svg{ width:19px; height:19px; }
.ct-banner--footer .ct-banner-strip{ font-size:0.64rem; padding:8px 14px; gap:5px 7px; margin-top:16px; }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.hamburger span{ display:block; width:100%; height:2px; background:var(--black); border-radius:2px; }

.mobile-nav{
  display:none; flex-direction:column;
  background:var(--white); border-top:1px solid var(--line);
  padding:8px 24px 20px;
}
.mobile-nav.is-open{ display:flex; }
.mobile-nav a{ color:var(--charcoal); padding:12px 0; font-size:1.02rem; font-weight:700; border-bottom:1px solid var(--line); }
.mobile-nav-cta{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.mobile-nav-cta .btn{ flex:1; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ background:var(--white); padding:36px 0 0; overflow:hidden; }
.hero-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:44px; align-items:center; }

.hero-copy h1{
  font-family:var(--font-sans); font-weight:900; text-transform:uppercase;
  font-size:clamp(2.1rem, 4vw, 3.05rem); line-height:1.08; letter-spacing:-0.01em;
  color:var(--black);
}
.hero-copy h1 .accent{ color:var(--red); }
.hero-copy p.lede{ margin-top:18px; font-size:1.12rem; color:var(--charcoal-soft); max-width:480px; }
.hero-copy .btn-row{ margin-top:22px; }

.hero-badges{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-top:26px; max-width:520px; }
.hero-badge-card{
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow-sm); padding:14px 8px; text-align:center;
}
.hero-badge-card .icon{
  width:34px; height:34px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin:0 auto 8px;
}
.hero-badge-card .icon svg{ width:17px; height:17px; }
.hero-badge-card span{ font-size:0.68rem; font-weight:800; text-transform:uppercase; letter-spacing:0.02em; color:var(--charcoal); line-height:1.25; display:block; }

.hero-photo{ position:relative; }
.hero-social{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:18px; }
.hero-social-icon{
  width:60px; height:60px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--white);
  border:3px solid var(--white);
  box-shadow:0 12px 24px rgba(23,20,18,0.28), inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -5px 9px rgba(0,0,0,0.28);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-social-icon svg{ width:28px; height:28px; }
.hero-social-icon:hover{ transform:translateY(-4px) scale(1.07); box-shadow:0 16px 30px rgba(23,20,18,0.34), inset 0 2px 3px rgba(255,255,255,0.55), inset 0 -5px 9px rgba(0,0,0,0.28); }

.hero-social-icon.instagram{
  background:radial-gradient(circle at 30% 105%, #fdf497 0%, #fdf497 6%, #fd5949 42%, #d6249f 62%, #285AEB 92%);
}
.hero-social-icon.tiktok{
  background:radial-gradient(circle at 32% 26%, #3a3a3a 0%, #161616 55%, #000000 100%);
}
.hero-social-icon.youtube{
  background:radial-gradient(circle at 32% 26%, #ff6b62 0%, #FF0000 55%, #c40000 100%);
}
.hero-photo-frame{
  position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:1672/941; background:var(--cream);
}
.hero-photo-frame img{ width:100%; height:100%; object-fit:cover; }

/* ---------- Trust strip ---------- */
.trust-strip{ background:var(--black); margin-top:32px; }
.trust-strip-inner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:14px 40px; padding:20px 24px; text-align:center;
}
.trust-strip .trust-item{ display:flex; align-items:center; gap:10px; position:relative; }
.trust-strip .trust-item svg{ width:19px; height:19px; color:var(--red); flex-shrink:0; }
.trust-strip .trust-item span{ font-size:0.8rem; font-weight:700; color:var(--white); text-transform:uppercase; letter-spacing:0.04em; }
.trust-strip .trust-item:not(:last-child)::after{
  content:""; position:absolute; right:-20px; top:50%; transform:translateY(-50%);
  width:4px; height:4px; border-radius:50%; background:var(--red);
}

/* ============================================================
   SERVICE DIRECTORY — "Everything We Do at Sunroof King"
   Text-only list restored from the pre-redesign homepage backup.
   Sits between the hero/trust strip and the 12-card services grid.
   No photos, no icons — deliberately plain and scannable.
   ============================================================ */
.directory-section{ background:var(--white); padding:44px 0 6px; }
.directory-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; max-width:1080px; margin:0 auto; }
.directory-group h3{
  font-family:var(--font-serif); font-size:1.05rem; color:var(--black);
  padding-bottom:9px; margin-bottom:8px; border-bottom:2px solid rgba(210,20,27,0.28);
}
.directory-list{ list-style:none; }
.directory-list li{
  font-weight:700; font-size:0.86rem; color:var(--charcoal);
  padding:7px 0; border-bottom:1px dashed var(--line); line-height:1.3;
}
.directory-list li:last-child{ border-bottom:none; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-section{ background:var(--white); }
.svc-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; }
.svc-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); text-align:center;
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.svc-photo{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--cream); }
.svc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.svc-icon{
  position:absolute; left:50%; bottom:-19px; transform:translateX(-50%);
  width:38px; height:38px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; border:3px solid var(--white);
  box-shadow:var(--shadow-sm);
}
.svc-icon svg{ width:18px; height:18px; }
.svc-body{ padding:28px 14px 18px; }
.svc-body h3{ font-family:var(--font-sans); font-size:0.92rem; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:6px; line-height:1.3; }
.svc-body p{ font-size:0.86rem; color:var(--charcoal-soft); line-height:1.48; }
/* Service cards that link to a detail page. Purely additive: keeps the exact
   approved .svc-card appearance and hover lift, just makes the card clickable
   and adds a small "View Details" affordance. */
a.svc-card--link{ display:block; color:inherit; text-decoration:none; }
.svc-more{
  display:inline-block; margin-top:10px;
  font-size:0.74rem; font-weight:800; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--red);
}
.svc-more::after{ content:" \2192"; }
a.svc-card--link:hover .svc-more{ text-decoration:underline; }

/* ============================================================
   WHY CHOOSE US — dark section
   ============================================================ */
.why-section{ background:var(--black); padding:52px 0; }
.why-section .eyebrow-rule h2{ color:var(--white); }
.why-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; margin-top:28px; }
.why-card{ display:flex; align-items:flex-start; gap:16px; }
.why-icon{
  width:52px; height:52px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.why-icon svg{ width:24px; height:24px; }
.why-card h3{ font-family:var(--font-sans); font-size:0.98rem; font-weight:800; text-transform:uppercase; color:var(--white); margin-bottom:6px; line-height:1.3; }
.why-card p{ font-size:0.86rem; color:rgba(255,255,255,0.68); line-height:1.5; }

/* ============================================================
   OWNER MESSAGE — "A Personal Note" (homepage only)
   ============================================================ */
.owner-section{ background:var(--white); padding:48px 0; }
.owner-card{
  display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:center;
  max-width:1140px; margin:0 auto;
  background:var(--cream); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--shadow-md); padding:36px 42px;
}
.owner-photo-col{ text-align:center; }
.owner-photo-frame{
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid var(--line); aspect-ratio:4/5;
}
.owner-photo-frame img{ width:100%; height:100%; object-fit:cover; }
.owner-name{ font-family:var(--font-serif); font-style:italic; font-size:1.2rem; color:var(--black); margin-top:14px; }
.owner-title{
  font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--charcoal-soft); margin-top:5px; padding-top:9px;
  border-top:1px solid var(--line); display:inline-block;
}
.owner-copy .eyebrow-rule{ justify-content:flex-start; margin-bottom:4px; }
.owner-copy .eyebrow-rule .line{ display:none; }
.owner-copy .eyebrow-rule h2{ font-size:1.7rem; text-transform:none; }
.owner-subtitle{
  color:var(--red); font-weight:800; text-transform:uppercase; letter-spacing:0.14em;
  font-size:0.72rem; margin-bottom:14px; display:flex; align-items:center; gap:12px;
}
.owner-subtitle::before, .owner-subtitle::after{ content:""; width:26px; height:2px; background:var(--red); }
.owner-copy p{ color:var(--charcoal); font-size:0.98rem; line-height:1.68; margin-bottom:11px; }
.owner-signoff{ font-family:var(--font-sans); font-weight:800; color:var(--black); font-size:0.92rem; margin-bottom:0 !important; }

/* ============================================================
   OUR PROCESS
   ============================================================ */
.process-section{ background:var(--gray-light); padding:40px 0; }
.process-row{ display:flex; align-items:flex-start; justify-content:center; gap:0; margin-top:26px; flex-wrap:wrap; }
.process-step{ display:flex; flex-direction:column; align-items:center; text-align:center; width:132px; }
.process-icon{
  width:48px; height:48px; border-radius:50%; background:var(--red); color:var(--white);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-sm); margin-bottom:10px;
}
.process-icon svg{ width:21px; height:21px; }
.process-step h3{ font-family:var(--font-sans); font-size:0.82rem; font-weight:800; text-transform:uppercase; margin-bottom:3px; }
.process-step p{ font-size:0.74rem; color:var(--charcoal-soft); line-height:1.35; }
.process-arrow{ color:var(--red); flex-shrink:0; align-self:center; margin-top:12px; }
.process-arrow svg{ width:18px; height:18px; }

/* ============================================================
   VISIT SHOP + CTA
   ============================================================ */
.shop-section{ background:var(--white); }
.shop-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:stretch; }
.shop-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); }
.shop-photo img{ width:100%; height:100%; object-fit:cover; min-height:340px; }

.shop-info-stack{ display:flex; flex-direction:column; justify-content:center; gap:22px; }
.shop-info-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:28px 30px;
}
.shop-info-card h3{ font-size:1.3rem; margin-bottom:4px; }
.shop-info-card .shop-info-highlight{ color:var(--red); font-weight:800; text-transform:uppercase; font-size:0.92rem; letter-spacing:0.03em; margin-bottom:16px; }
.shop-info-line{ display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:0.92rem; font-weight:600; color:var(--charcoal); }
.shop-info-line:last-child{ border-bottom:none; }
.shop-info-line svg{ width:19px; height:19px; color:var(--red); flex-shrink:0; margin-top:2px; }
.shop-info-line a{ color:var(--red); font-weight:700; }
.shop-info-line a:hover{ color:var(--red-dark); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:var(--black); color:rgba(255,255,255,0.85); padding:32px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:28px; padding-bottom:20px; border-bottom:1px solid rgba(255,255,255,0.12); }

.footer-logo-chip{
  display:inline-block; background:var(--white); padding:8px 14px;
  border-radius:8px; line-height:0;
}
.footer-logo-img{ height:48px; width:auto; display:block; }
.footer-brand p{ font-size:0.88rem; line-height:1.55; margin-top:10px; color:rgba(255,255,255,0.68); }

.footer-cta{ padding:10px 0 0; }

.footer-col h4{
  color:var(--red); text-transform:uppercase; letter-spacing:0.08em; font-size:0.78rem;
  margin-bottom:12px; font-weight:800;
}
.footer-col a, .footer-col p{
  display:block; font-size:0.88rem; font-weight:500; margin-bottom:8px; color:rgba(255,255,255,0.72);
}
.footer-col a:hover{ color:var(--red); }
.footer-col .footer-line-icon{ display:flex; align-items:flex-start; gap:9px; }
.footer-col .footer-line-icon svg{ width:16px; height:16px; color:var(--red); flex-shrink:0; margin-top:2px; }

.footer-bottom{
  background:var(--red); margin-top:0; padding:9px 0;
}
.footer-bottom-inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size:0.82rem; color:var(--white); font-weight:700;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px){
  .svc-grid{ grid-template-columns:repeat(3, 1fr); }
  .why-grid{ grid-template-columns:repeat(2, 1fr); }
  .hero-badges{ grid-template-columns:repeat(2, 1fr); max-width:100%; }
  .directory-grid{ grid-template-columns:1fr 1fr; max-width:640px; }
}

@media (max-width: 980px){
  .main-nav{ display:none; }
  .hamburger{ display:flex; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ order:-1; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .shop-grid{ grid-template-columns:1fr; }
  .owner-card{ grid-template-columns:240px 1fr; gap:30px; padding:30px 34px; }
}

@media (max-width: 760px){
  .owner-card{ grid-template-columns:1fr; gap:20px; text-align:center; padding:26px 22px; border-radius:16px; }
  .owner-photo-frame{ max-width:220px; margin:0 auto; aspect-ratio:1/1; }
  .owner-copy{ text-align:left; }
}

@media (max-width: 700px){
  .process-row{ flex-direction:column; align-items:center; gap:24px; }
  .process-arrow{ display:none; }
}

@media (max-width: 640px){
  .brand-logo-img{ width:135px; }
  .hero{ padding-top:32px; }
  .hero-copy h1{ font-size:1.9rem; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .btn{ text-align:center; }
  .hero-badges{ grid-template-columns:repeat(2, 1fr); }
  .trust-strip-inner{ gap:10px 20px; }
  .section{ padding:52px 0; }
  .eyebrow-rule h2{ font-size:1.5rem; }
  .svc-grid{ grid-template-columns:1fr 1fr; gap:14px; }
  .svc-body{ padding:24px 10px 16px; }
  .svc-body h3{ font-size:0.8rem; }
  .why-grid{ grid-template-columns:1fr; }
  .directory-section{ padding:36px 0 4px; }
  .directory-grid{ grid-template-columns:1fr; max-width:100%; gap:26px; }
  .footer-grid{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; justify-content:center; }
  .ct-banner--footer{ padding:24px 18px 14px; border-radius:22px; }
  .ct-banner--footer .ct-icon-btn{ width:46px; height:46px; }
  .ct-banner--footer .ct-icon-btn svg{ width:19px; height:19px; }
  .ct-banner--footer .ct-banner-strip{ font-size:0.6rem; padding:8px 12px; gap:5px 8px; }
}

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

/* Mobile: show the shop photo whole. The 340px min-height on .shop-photo img
   squeezes a 16:9 photo into a near-square box and crops ~46% of its width,
   cutting off the Sunroof King signage. .shop-photo is used by index.html only. */
@media (max-width: 640px){
  .shop-photo img{ min-height:0; height:auto; aspect-ratio:16/9; }
}

/* ============================================================
   MOBILE HEADER — CALL / TEXT CTA   (added 2026-08-25)

   The header Call/Text pill used to be switched off below 700px
   (`.ct-banner--sm{ display:none }`), leaving phones with only a logo and a
   hamburger. Mobile is the primary customer experience, so the CTA now stays
   in the header at every width.

   Nothing here is new design: the 701-980px band already renders exactly this
   arrangement (logo + Call/Text pill + hamburger on one row) and is approved.
   These rules only size that same arrangement down so it fits a phone. The
   markup, the wording, and the tel:/sms: hrefs are untouched.

   Desktop (>= 981px) is not reached by any rule below.

   Fit arithmetic, measured on staging at the header's real widths (the header
   row has no horizontal padding: `.header-inner{ padding:14px 0 }` overrides
   `.wrap`, so the full viewport width is available):

     <= 700px   205 + 240 + 38 + 48 gaps = 531   fits from 531px
     <= 480px   135 + 204 + 38 + 24 gaps = 401   fits from 402px
     <= 400px   118 + 195 + 38 + 20 gaps = 371   fits from 372px
     <= 374px   wraps to two rows, so it cannot overflow at any width
   ============================================================ */

/* Step 1 — 481-700px. The pill fits at its approved size; it only had to stop
   being hidden. No other change in this band. */

/* Step 2 — <= 480px. Below ~462px the approved pill no longer clears the logo
   and the hamburger, so the pill is sized down. Wording, colours, artwork and
   links are unchanged; only metrics move. */
@media (max-width: 480px){
  .header-inner{ gap:12px; }
  .ct-banner--sm{ padding:4px 12px 4px 4px; gap:7px; }
  .ct-banner--sm .ct-icon-btn{ width:34px; height:34px; }
  .ct-banner--sm .ct-icon-btn svg{ width:15px; height:15px; }
  .ct-banner-label-sm{ font-size:0.55rem; letter-spacing:0.04em; }
  .ct-banner-phone-sm{ font-size:0.86rem; }

  /* Touch targets. The icon buttons are 34px so the pill stays compact, but a
     tap target must be at least 44px. An empty, transparent ::after centred on
     each button extends the hit area to 44px without the artwork growing: the
     pseudo-element is part of the <a>, so a tap anywhere in it still triggers
     the same tel:/sms: link. The centre text link reaches 44px through
     min-height instead, which is shorter than the pill's own height and so
     does not make the header taller. */
  .ct-banner--sm .ct-icon-btn{ position:relative; }
  .ct-banner--sm .ct-icon-btn::after{
    content:""; position:absolute; top:50%; left:50%;
    transform:translate(-50%, -50%);
    width:44px; height:44px; border-radius:50%;
  }
  .ct-banner-center-sm{ min-height:44px; justify-content:center; }
}

/* Step 3 — <= 400px. The last step that keeps one row on a 375px iPhone.
   The logo takes one more step down, 135px -> 118px, continuing the reduction
   it already makes at 981px (205px) and 640px (135px). */
@media (max-width: 400px){
  .header-inner{ gap:10px; }
  .brand-logo-img{ width:118px; }
  .ct-banner--sm{ padding:4px 10px 4px 4px; gap:6px; }
  .ct-banner-phone-sm{ font-size:0.82rem; }
}

/* Step 4 — <= 374px. Narrower than any current iPhone (SE is 375px), so this
   is a safety net rather than a layout anyone should see. Rather than let the
   row overflow, the pill drops onto its own full-width line beneath the logo
   and hamburger. Wrapping is done with flex order on the existing elements,
   so the markup order is untouched. */
@media (max-width: 374px){
  .header-inner{ flex-wrap:wrap; row-gap:8px; }
  .brand{ order:1; }
  .hamburger{ order:2; margin-left:auto; }
  .ct-banner--sm{ order:3; flex-basis:100%; justify-content:center; }
}