/* SCK Grocery Stores — self-contained responsive interface */
:root {
  --navy: #0d3340;
  --navy-2: #082630;
  --navy-3: #174b59;
  --red: #cf2338;
  --red-dark: #a91329;
  --gold: #ee9e20;
  --cream: #f5f0e8;
  --cream-2: #ece4d9;
  --paper: #fffdf9;
  --white: #ffffff;
  --ink: #142f36;
  --muted: #64767a;
  --line: #d9e0df;
  --green: #209264;
  --shadow-sm: 0 8px 24px rgba(8, 38, 48, .08);
  --shadow-md: 0 18px 50px rgba(8, 38, 48, .14);
  --shadow-lg: 0 28px 80px rgba(8, 38, 48, .22);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shell: min(1180px, calc(100% - 40px));
  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-ui); line-height: 1.55; -webkit-font-smoothing: antialiased; }
body.no-scroll { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
::selection { color: white; background: var(--red); }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 9999; transform: translateY(-150%); color: white; background: var(--navy); padding: 10px 16px; border-radius: 8px; font-weight: 800; text-decoration: none; }
.skip-link:focus { transform: none; }
.shell { width: var(--shell); margin-inline: auto; }
.section { padding: 100px 0; }

.research-bar { position: relative; z-index: 51; color: rgba(255,255,255,.9); background: var(--navy-2); font-size: 12px; letter-spacing: .02em; }
.research-bar__inner { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.research-bar__inner > span { display: inline-flex; align-items: center; gap: 8px; }
.research-bar__note { color: rgba(255,255,255,.62); }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #4bd194; box-shadow: 0 0 0 4px rgba(75,209,148,.13); }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,253,249,.92); border-bottom: 1px solid rgba(13,51,64,.08); backdrop-filter: blur(18px); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--navy); text-decoration: none; }
.brand-mark { width: 56px; height: 42px; display: grid; place-items: center; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { color: var(--red); font-size: 25px; font-weight: 950; letter-spacing: -.05em; }
.brand-copy span { margin-top: 4px; color: var(--navy); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 34px; }
.main-nav a { position: relative; color: #34525a; font-size: 13px; font-weight: 800; text-decoration: none; }
.main-nav > a:not(.nav-cta)::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; transform: scaleX(0); background: var(--red); transition: transform .25s ease; }
.main-nav > a:hover::after, .main-nav > a:focus-visible::after { transform: scaleX(1); }
.main-nav .nav-cta { color: white; background: var(--navy); padding: 12px 19px; border-radius: 999px; transition: background .2s ease, transform .2s ease; }
.main-nav .nav-cta:hover { background: var(--red); transform: translateY(-1px); }
.nav-toggle { display: none; width: 42px; height: 42px; padding: 10px; background: transparent; border: 0; }
.nav-toggle > span:not(.sr-only) { display: block; width: 100%; height: 2px; margin: 5px 0; background: var(--navy); transition: transform .25s ease, opacity .25s ease; }

.hero { position: relative; overflow: hidden; color: white; background: var(--navy); }
.hero::before { content: ""; position: absolute; width: 500px; height: 500px; top: -250px; left: -160px; border: 80px solid rgba(255,255,255,.035); border-radius: 50%; }
.hero-pattern { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(120deg, transparent 0 70%, rgba(255,255,255,.08) 70% 70.5%, transparent 70.5%), radial-gradient(circle at 85% 22%, rgba(238,158,32,.45) 0 2px, transparent 2px); background-size: 720px 720px, 34px 34px; }
.hero-grid { position: relative; min-height: 680px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; padding-top: 74px; padding-bottom: 74px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.78); font-size: 11px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow > span { width: 30px; height: 2px; background: var(--red); }
.eyebrow--dark { color: #5a6d70; }
.eyebrow--center { justify-content: center; }
.hero h1 { max-width: 650px; margin: 24px 0 22px; font-family: var(--font-display); font-size: clamp(54px, 6.2vw, 86px); font-weight: 500; line-height: .94; letter-spacing: -.055em; }
.hero h1 em { color: #f1b34b; font-weight: 500; }
.hero-lede { max-width: 590px; margin: 0; color: rgba(255,255,255,.74); font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 20px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 900; text-decoration: none; transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .text-button:focus-visible, .icon-button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(238,158,32,.42); outline-offset: 2px; }
.button--primary { color: white; background: var(--red); box-shadow: 0 10px 24px rgba(207,35,56,.24); }
.button--primary:hover { background: var(--red-dark); box-shadow: 0 14px 30px rgba(207,35,56,.32); }
.button--ghost { color: white; border-color: rgba(255,255,255,.27); background: rgba(255,255,255,.04); }
.button--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.42); }
.button--dark { color: white; background: var(--navy); }
.button--dark:hover { background: var(--red); }
.button--light { color: var(--navy); background: white; }
.button--light:hover { color: white; background: var(--red); }
.button--line { color: var(--navy); border-color: #c7d2d2; background: transparent; }
.button--line:hover { color: white; border-color: var(--navy); background: var(--navy); }
.button--accent { color: var(--navy-2); background: var(--gold); box-shadow: 0 12px 30px rgba(238,158,32,.2); }
.button--accent:hover { background: #ffb73f; }
.button--small { min-height: 42px; padding: 10px 16px; font-size: 12px; }
.button--full { width: 100%; }
.hero-facts { display: flex; gap: 38px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.13); }
.hero-facts div { display: flex; flex-direction: column; }
.hero-facts strong { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1; }
.hero-facts span { margin-top: 6px; color: rgba(255,255,255,.56); font-size: 10px; font-weight: 750; letter-spacing: .04em; }
.hero-visual { position: relative; min-width: 0; }
.hero-photo-wrap { position: relative; width: min(100%, 560px); margin-left: auto; }
.hero-photo-wrap::before { content: ""; position: absolute; inset: -16px 16px 16px -16px; border: 1px solid rgba(255,255,255,.15); border-radius: 26px; }
.hero-photo { position: relative; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-lg); }
.photo-shade { position: absolute; inset: 0; border-radius: 24px; background: linear-gradient(180deg, transparent 54%, rgba(4,22,28,.66)); }
.photo-source { position: absolute; right: 16px; bottom: 17px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; color: rgba(255,255,255,.85); background: rgba(5,27,34,.7); backdrop-filter: blur(8px); font-size: 10px; font-weight: 800; }
.camera-icon { color: #58d099; font-size: 9px; }
.hero-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; min-width: 190px; padding: 12px 14px; color: var(--ink); background: rgba(255,255,255,.96); border-radius: 14px; box-shadow: var(--shadow-md); }
.hero-card strong, .hero-card small { display: block; }
.hero-card strong { font-size: 12px; }
.hero-card small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.hero-card--top { top: 38px; left: -46px; }
.hero-card--bottom { right: -22px; bottom: 64px; }
.hero-card__icon { width: 34px; height: 34px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 50%; font-weight: 900; }
.hero-card img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.hero-ribbon { position: relative; color: var(--navy); background: var(--gold); overflow: hidden; }
.hero-ribbon__inner { min-height: 46px; display: flex; align-items: center; justify-content: space-around; gap: 18px; white-space: nowrap; font-size: 10px; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.hero-ribbon i { width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: var(--red); }

.intro { background: var(--cream); }
.intro-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 90px; align-items: start; }
.section-heading h2, .section-top h2, .center-heading h2, .loyalty-copy h2, .community-head h2, .contact-copy h2, .sources-grid h2 { margin: 20px 0 0; font-family: var(--font-display); font-size: clamp(40px, 5vw, 61px); font-weight: 500; line-height: 1.03; letter-spacing: -.045em; }
.intro-copy { padding-top: 26px; }
.intro-copy > p:first-child { margin: 0; color: #425b60; font-family: var(--font-display); font-size: 22px; line-height: 1.5; }
.verification-note { margin: 28px 0 0; padding: 18px 20px; border-left: 3px solid var(--red); color: #51666a; background: rgba(255,255,255,.5); font-size: 12px; line-height: 1.7; }
.verification-note strong { color: var(--ink); }

.products-section { background: var(--paper); }
.section-top { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.section-top > div:first-child { max-width: 780px; }
.section-top p, .center-heading p, .community-head p, .sources-grid > div > p { max-width: 680px; margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.catalog-count { width: 110px; height: 110px; flex: 0 0 auto; display: grid; place-content: center; text-align: center; color: white; background: var(--navy); border-radius: 50%; box-shadow: var(--shadow-sm); }
.catalog-count strong { font-family: var(--font-display); font-size: 34px; font-weight: 500; line-height: 1; }
.catalog-count span { margin-top: 5px; color: rgba(255,255,255,.65); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.catalog-tools { display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 14px; background: var(--cream); border-radius: 16px; }
.search-box { min-width: 300px; flex: 0 0 320px; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; background: white; border: 1px solid transparent; border-radius: 10px; }
.search-box:focus-within { border-color: rgba(13,51,64,.35); box-shadow: 0 0 0 3px rgba(13,51,64,.06); }
.search-box svg { width: 18px; fill: none; stroke: var(--navy); stroke-width: 2; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.search-box input::placeholder { color: #89989a; }
.search-box kbd { min-width: 25px; padding: 2px 7px; color: #718184; background: #f4f5f3; border: 1px solid #e3e6e5; border-radius: 5px; font: 10px var(--font-ui); text-align: center; }
.category-scroll { min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.category-scroll::-webkit-scrollbar { display: none; }
.filter-button { flex: 0 0 auto; min-height: 40px; padding: 9px 14px; border: 1px solid #d5dddb; border-radius: 999px; color: #4e666b; background: rgba(255,255,255,.65); cursor: pointer; font-size: 11px; font-weight: 800; transition: all .2s ease; }
.filter-button:hover, .filter-button[aria-pressed="true"] { color: white; border-color: var(--navy); background: var(--navy); }
.catalog-summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.catalog-summary p { margin: 0; color: var(--muted); font-size: 12px; }
.text-button { padding: 5px; border: 0; cursor: pointer; color: var(--red); background: transparent; font-size: 11px; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.text-button--center { align-self: center; margin-top: 12px; color: #6b7e81; }
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #e3e8e6; border-radius: 16px; background: white; box-shadow: 0 8px 25px rgba(12,49,61,.045); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.product-card:hover { transform: translateY(-5px); border-color: #d1dbd9; box-shadow: var(--shadow-md); }
.product-card__media { position: relative; overflow: hidden; aspect-ratio: 4/3; background: var(--cream); cursor: pointer; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .product-card__media img { transform: scale(1.045); }
.product-card__source { position: absolute; top: 10px; left: 10px; padding: 5px 8px; border-radius: 999px; color: white; background: rgba(7,34,42,.78); backdrop-filter: blur(6px); font-size: 8px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
.product-card__body { display: flex; flex: 1; flex-direction: column; padding: 16px; }
.product-category { color: var(--red); font-size: 9px; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.product-card h3 { margin: 8px 0 7px; font-size: 16px; line-height: 1.24; letter-spacing: -.02em; }
.product-card__variant { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.product-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.ask-price { display: flex; flex-direction: column; }
.ask-price strong { color: var(--navy); font-size: 11px; }
.ask-price span { color: #889699; font-size: 8px; }
.add-product { width: 35px; height: 35px; display: grid; place-items: center; padding: 0; border: 1px solid #cbd7d6; border-radius: 50%; cursor: pointer; color: var(--navy); background: white; font-size: 19px; line-height: 1; transition: all .2s ease; }
.add-product:hover, .add-product.is-added { color: white; border-color: var(--red); background: var(--red); }
.product-details-link { position: absolute; inset: 0; z-index: 1; border: 0; cursor: pointer; background: transparent; }
.product-details-link:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; }
.add-product { position: relative; z-index: 2; }
.empty-state { padding: 70px 20px; border: 1px dashed #cdd8d6; border-radius: 18px; text-align: center; background: var(--cream); }
.empty-state > div { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; color: white; background: var(--navy); font: 28px var(--font-display); }
.empty-state h3 { margin: 0; font-size: 20px; }
.empty-state p { margin: 8px 0 20px; color: var(--muted); font-size: 12px; }
.catalog-disclaimer { display: flex; align-items: flex-start; gap: 13px; margin-top: 28px; padding: 18px 20px; border: 1px solid #e0e6e4; border-radius: 12px; color: #5c7074; background: #faf8f4; font-size: 11px; }
.catalog-disclaimer > span, .modal-note > span { width: 23px; height: 23px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-family: var(--font-display); font-weight: 800; }
.catalog-disclaimer p { margin: 0; }
.catalog-disclaimer strong { color: var(--ink); }

.inquiry-how { padding-top: 30px; background: var(--paper); }
.center-heading { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.center-heading h2 { font-size: clamp(38px, 4.5vw, 54px); }
.steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.step-card { position: relative; min-height: 260px; padding: 28px; overflow: hidden; border: 1px solid #e0e6e4; border-radius: 18px; background: white; }
.step-card > span { position: absolute; top: 18px; right: 23px; color: #e5e9e7; font: 50px var(--font-display); }
.step-icon { width: 52px; height: 52px; display: grid; place-items: center; color: white; background: var(--navy); border-radius: 13px; font-size: 24px; }
.step-card:nth-child(2) .step-icon { background: var(--red); }
.step-card:nth-child(3) .step-icon { color: var(--navy); background: var(--gold); }
.step-card h3 { margin: 46px 0 8px; font-size: 18px; }
.step-card p { margin: 0; color: var(--muted); font-size: 12px; }

.loyalty-section { position: relative; overflow: hidden; color: white; background: var(--red); }
.loyalty-section::before { content: ""; position: absolute; width: 540px; height: 540px; right: -200px; bottom: -310px; border: 80px solid rgba(255,255,255,.06); border-radius: 50%; }
.loyalty-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 100px; }
.loyalty-photo { position: relative; min-height: 420px; display: grid; place-items: center; }
.loyalty-halo { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: 0 0 0 35px rgba(255,255,255,.035), 0 0 0 70px rgba(255,255,255,.018); }
.loyalty-photo img { position: relative; width: 310px; aspect-ratio: 1; object-fit: cover; transform: rotate(-5deg); border: 12px solid white; border-radius: 30px; box-shadow: 0 30px 70px rgba(83,5,16,.38); }
.loyalty-photo > span { position: absolute; right: 12%; bottom: 13%; padding: 7px 10px; color: var(--navy); background: var(--gold); border-radius: 999px; font-size: 9px; font-weight: 900; text-transform: uppercase; }
.loyalty-copy { max-width: 600px; }
.loyalty-copy h2 { font-size: clamp(44px,5vw,64px); }
.loyalty-copy > p { margin: 20px 0 0; color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.8; }
.check-list { display: grid; gap: 11px; margin: 26px 0 30px; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 700; }
.check-list span { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; font-size: 10px; }

.branches-section { background: var(--cream); }
.text-link { padding: 7px 0; border: 0; cursor: pointer; color: var(--navy); background: transparent; font-size: 12px; font-weight: 900; text-decoration: none; border-bottom: 1px solid var(--navy); }
.text-link span { color: var(--red); }
.text-link--light { color: white; border-bottom-color: rgba(255,255,255,.45); }
.text-link--light span { color: var(--gold); }
.network-map { position: relative; overflow: hidden; margin-bottom: 22px; border: 8px solid white; border-radius: 20px; box-shadow: var(--shadow-sm); }
.network-map > img { width: 100%; aspect-ratio: 2/1; object-fit: cover; }
.map-legend { position: absolute; left: 16px; bottom: 15px; display: flex; gap: 14px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); box-shadow: 0 5px 18px rgba(13,51,64,.12); }
.map-legend > span { display: flex; align-items: center; gap: 6px; color: #38545a; font-size: 9px; font-weight: 850; }
.pin { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.pin--navy { background: var(--navy); }.pin--gold { background: var(--gold); }
.branch-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.branch-card { overflow: hidden; border: 1px solid #dfe5e2; border-radius: 18px; background: white; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.branch-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.branch-map { position: relative; overflow: hidden; aspect-ratio: 3/1.48; background: #e8ece9; }
.branch-map img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.branch-card:hover .branch-map img { transform: scale(1.035); }
.area-badge { position: absolute; top: 10px; right: 10px; padding: 5px 8px; color: var(--navy); background: rgba(255,255,255,.9); border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.branch-body { padding: 21px; }
.branch-kicker { display: flex; align-items: center; gap: 7px; color: #5d7074; font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(32,146,100,.1); }
.status-dot--gold { background: var(--gold); box-shadow: 0 0 0 4px rgba(238,158,32,.1); }
.branch-body h3 { margin: 10px 0 2px; font-family: var(--font-display); font-size: 27px; font-weight: 500; }
.alias { min-height: 32px; margin: 0; color: #859396; font-size: 9px; }
.branch-body dl { display: grid; gap: 12px; margin: 18px 0 20px; padding-top: 16px; border-top: 1px solid #edf0ef; }
.branch-body dl > div { display: grid; grid-template-columns: 55px 1fr; gap: 10px; }
.branch-body dt { color: #89979a; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.branch-body dd { margin: 0; color: #415a60; font-size: 10px; line-height: 1.55; }
.branch-actions { display: flex; gap: 8px; }
.map-caveat { margin: 18px 0 0; padding-left: 14px; border-left: 3px solid var(--gold); color: #637578; font-size: 10px; line-height: 1.7; }
.map-caveat strong { color: var(--ink); }

.gallery-section { color: white; background: var(--navy-2); }
.section-top--light p { color: rgba(255,255,255,.62); }
.gallery-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 270px; gap: 12px; }
.gallery-item { position: relative; overflow: hidden; margin: 0; border-radius: 14px; background: #123d49; }
.gallery-item--wide { grid-column: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease, filter .4s ease; }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(4,24,30,.82)); }
.gallery-item:hover img { transform: scale(1.045); filter: saturate(1.06); }
.gallery-item figcaption { position: absolute; z-index: 1; right: 15px; bottom: 13px; left: 15px; display: flex; align-items: end; justify-content: space-between; gap: 10px; font-family: var(--font-display); font-size: 18px; }
.gallery-item figcaption span { padding: 5px 7px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: rgba(255,255,255,.7); font: 8px var(--font-ui); font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }

.community-section { background: var(--paper); }
.community-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.community-head > div:first-child { max-width: 700px; }
.rating-callout { display: flex; align-items: center; gap: 11px; padding: 13px 16px; border: 1px solid #e2e7e5; border-radius: 12px; background: var(--cream); }
.rating-callout > strong { color: var(--gold); font-size: 29px; line-height: 1; }
.rating-callout span, .rating-callout small { display: block; }
.rating-callout span { color: var(--ink); font-size: 11px; font-weight: 850; }
.rating-callout small { margin-top: 2px; color: #829194; font-size: 8px; font-weight: 600; }
.community-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 20px; }
.panel { padding: 26px; border: 1px solid #e0e6e4; border-radius: 18px; background: white; box-shadow: var(--shadow-sm); }
.panel-head { display: flex; align-items: center; gap: 13px; margin-bottom: 23px; }
.panel-head > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font: 14px var(--font-display); }
.panel-head h3 { margin: 0; font-size: 18px; }
.panel-head p { margin: 2px 0 0; color: var(--muted); font-size: 9px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { position: relative; display: block; margin-bottom: 14px; }
.field > span, .rating-field legend { display: block; margin-bottom: 7px; color: #40595e; font-size: 9px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #d8e0de; border-radius: 9px; outline: 0; color: var(--ink); background: #fbfcfa; font-size: 12px; transition: border-color .2s, box-shadow .2s; }
.field input, .field select { height: 46px; padding: 0 12px; }
.field textarea { min-height: 112px; padding: 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(13,51,64,.06); }
.field small { position: absolute; right: 10px; bottom: 8px; color: #95a1a3; font-size: 8px; }
.rating-field { margin: 0 0 14px; padding: 0; border: 0; }
.stars { width: max-content; display: flex; flex-direction: row-reverse; gap: 5px; }
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars label { cursor: pointer; color: #d5dcda; font-size: 28px; line-height: 1; transition: color .15s, transform .15s; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: var(--gold); }
.stars label:hover { transform: scale(1.1); }
.stars input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.check-field { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 16px; color: #64767a; font-size: 9px; line-height: 1.5; }
.check-field input { accent-color: var(--red); }
.form-status { min-height: 18px; margin: 10px 0 0; color: var(--green); font-size: 10px; font-weight: 700; text-align: center; }
.form-status.is-error { color: var(--red); }
.community-wall { min-height: 480px; }
.feedback-list { max-height: 520px; display: grid; gap: 12px; overflow-y: auto; padding-right: 4px; }
.wall-empty { padding: 65px 25px; border: 1px dashed #d6dfdd; border-radius: 13px; text-align: center; background: var(--cream); }
.wall-empty > span { color: var(--gold); font-size: 33px; }
.wall-empty h4 { margin: 10px 0 4px; font: 22px var(--font-display); }
.wall-empty p { margin: 0; color: var(--muted); font-size: 10px; }
.feedback-item { padding: 16px; border: 1px solid #e4e9e7; border-radius: 12px; background: #fcfcfa; }
.feedback-item__top { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.feedback-person { display: flex; align-items: center; gap: 9px; }
.feedback-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); font-size: 11px; font-weight: 900; }
.feedback-person strong, .feedback-person span { display: block; }
.feedback-person strong { font-size: 11px; }
.feedback-person span { color: #879598; font-size: 8px; }
.feedback-stars { color: var(--gold); font-size: 11px; letter-spacing: 1px; }
.feedback-item p { margin: 12px 0 0; color: #52686c; font-size: 10px; line-height: 1.7; }
.feedback-item time { display: block; margin-top: 9px; color: #9aa5a7; font-size: 8px; }

.contact-section { position: relative; overflow: hidden; color: white; background: var(--navy); }
.contact-section::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: linear-gradient(135deg, transparent 49.5%, white 49.5% 50%, transparent 50%); background-size: 80px 80px; }
.contact-grid { position: relative; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.contact-copy { padding-top: 30px; }
.contact-copy > p { margin: 20px 0 0; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.8; }
.contact-channel { display: grid; grid-template-columns: 43px 1fr 28px; align-items: center; gap: 12px; margin-top: 30px; padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(255,255,255,.055); }
.fb-icon { width: 43px; height: 43px; display: grid; place-items: center; color: white; background: #1877f2; border-radius: 50%; font: 900 25px Arial; }
.contact-channel strong, .contact-channel span { display: block; }
.contact-channel strong { font-size: 11px; }
.contact-channel span { color: rgba(255,255,255,.53); font-size: 8px; }
.contact-channel a { display: grid; place-items: center; text-decoration: none; font-size: 20px; }
.contact-truth { display: flex; align-items: flex-start; gap: 12px; margin-top: 17px; padding: 14px; border-radius: 12px; color: rgba(255,255,255,.62); background: rgba(255,255,255,.04); font-size: 9px; line-height: 1.65; }
.contact-truth > span { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: var(--gold); font-weight: 900; }
.contact-truth p { margin: 0; }
.contact-truth strong { color: white; }
.inquiry-form { padding: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 20px; background: rgba(6,32,40,.84); box-shadow: var(--shadow-lg); backdrop-filter: blur(8px); }
.inquiry-form__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.inquiry-form__top > div:first-child > span { color: var(--gold); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.inquiry-form__top h3 { margin: 3px 0 0; font: 28px var(--font-display); font-weight: 500; }
.inquiry-count { width: 54px; height: 54px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.inquiry-count strong { font-size: 18px; line-height: 1; }
.inquiry-count span { color: rgba(255,255,255,.5); font-size: 7px; text-transform: uppercase; }
.selected-products { max-height: 140px; margin-bottom: 16px; overflow-y: auto; }
.selected-products > p { margin: 0; padding: 12px; border: 1px dashed rgba(255,255,255,.17); border-radius: 9px; color: rgba(255,255,255,.55); font-size: 9px; text-align: center; }
.selected-products > p a { color: var(--gold); }
.selected-chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; padding: 8px 10px; border-radius: 8px; color: rgba(255,255,255,.8); background: rgba(255,255,255,.06); font-size: 9px; }
.selected-chip button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: white; background: rgba(255,255,255,.1); }
.field--dark > span { color: rgba(255,255,255,.67); }
.field--dark input, .field--dark select, .field--dark textarea { color: white; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); }
.field--dark input::placeholder, .field--dark textarea::placeholder { color: rgba(255,255,255,.32); }
.field--dark select option { color: var(--ink); background: white; }
.field--dark input:focus, .field--dark select:focus, .field--dark textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(238,158,32,.08); }
.check-field--dark { color: rgba(255,255,255,.55); }
.check-field--dark input { accent-color: var(--gold); }

.sources-section { background: var(--cream); }
.sources-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.sources-grid h2 { font-size: clamp(38px,4.3vw,54px); }
.source-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: source; }
.source-list li { display: grid; grid-template-columns: 48px 1fr; gap: 15px; padding: 20px 0; border-top: 1px solid #d9dfdc; }
.source-list li:last-child { border-bottom: 1px solid #d9dfdc; }
.source-list li > span { color: var(--red); font: 16px var(--font-display); }
.source-list strong { display: block; font-size: 12px; }
.source-list p { margin: 5px 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.source-list a { color: var(--navy); font-size: 9px; font-weight: 900; text-underline-offset: 3px; }

.site-footer { color: rgba(255,255,255,.65); background: #061e26; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1.2fr; gap: 60px; padding: 65px 0 45px; }
.brand--footer .brand-copy span { color: white; }
.footer-brand > p { max-width: 330px; margin: 18px 0 0; font-size: 11px; line-height: 1.8; }
.footer-main h3 { margin: 0 0 14px; color: white; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.footer-main > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; }
.footer-main a, .footer-main > div > span { margin: 4px 0; color: rgba(255,255,255,.58); font-size: 10px; text-decoration: none; }
.footer-main a:hover { color: var(--gold); }
.footer-bottom { display: flex; justify-content: space-between; gap: 30px; padding: 19px 0 26px; border-top: 1px solid rgba(255,255,255,.08); font-size: 8px; }
.footer-bottom p { margin: 0; }

.inquiry-fab { position: fixed; z-index: 40; right: 22px; bottom: 20px; display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 9px 10px 9px 13px; border: 0; border-radius: 999px; cursor: pointer; color: white; background: var(--red); box-shadow: 0 12px 35px rgba(110,14,28,.35); font-size: 11px; font-weight: 900; transform: translateY(90px); opacity: 0; transition: transform .3s ease, opacity .3s ease, background .2s; }
.inquiry-fab.is-visible { transform: translateY(0); opacity: 1; }
.inquiry-fab:hover { background: var(--red-dark); }
.fab-icon { font-size: 17px; }
.inquiry-fab strong { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: white; }
.drawer-backdrop { position: fixed; z-index: 90; inset: 0; background: rgba(5,25,32,.56); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
.drawer-backdrop.is-open { opacity: 1; }
.inquiry-drawer { position: fixed; z-index: 91; top: 0; right: 0; bottom: 0; width: min(430px, 100%); display: flex; flex-direction: column; transform: translateX(105%); color: var(--ink); background: var(--paper); box-shadow: -20px 0 60px rgba(5,25,32,.24); transition: transform .32s cubic-bezier(.22,.78,.25,1); }
.inquiry-drawer.is-open { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid #e3e8e6; }
.drawer-head span { color: var(--red); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.drawer-head h2 { margin: 2px 0 0; font: 29px var(--font-display); }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(13,51,64,.15); border-radius: 50%; cursor: pointer; color: var(--navy); background: transparent; font-size: 25px; line-height: 1; }
.icon-button:hover { color: white; border-color: var(--red); background: var(--red); }
.drawer-items { flex: 1; overflow-y: auto; padding: 18px 24px; }
.drawer-empty { padding: 70px 20px; text-align: center; color: var(--muted); font-size: 11px; }
.drawer-empty span { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 13px; border-radius: 50%; color: white; background: var(--navy); font-size: 22px; }
.drawer-item { display: grid; grid-template-columns: 70px 1fr 28px; align-items: center; gap: 11px; margin-bottom: 10px; padding: 9px; border: 1px solid #e1e7e5; border-radius: 11px; background: white; }
.drawer-item img { width: 70px; height: 57px; object-fit: cover; border-radius: 7px; }
.drawer-item strong, .drawer-item small { display: block; }
.drawer-item strong { font-size: 11px; line-height: 1.25; }
.drawer-item small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.drawer-item button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #75878a; background: #f1f3f1; }
.drawer-footer { display: flex; flex-direction: column; padding: 20px 24px; border-top: 1px solid #e2e8e6; background: white; }
.drawer-total { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer-total span { color: var(--muted); font-size: 10px; }
.drawer-total strong { font: 25px var(--font-display); }

.modal, .video-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }
.modal[hidden], .video-modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4,24,31,.75); backdrop-filter: blur(6px); }
.modal-card { position: relative; width: min(880px,100%); max-height: min(700px,calc(100vh - 40px)); display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; border-radius: 22px; background: white; box-shadow: var(--shadow-lg); }
.modal-close { position: absolute; z-index: 2; top: 14px; right: 14px; color: white; border-color: rgba(255,255,255,.4); background: rgba(4,30,37,.5); }
.modal-image { position: relative; min-height: 520px; background: var(--cream); }
.modal-image img { width: 100%; height: 100%; object-fit: cover; }
.modal-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 65%, rgba(5,29,36,.62)); }
.modal-image > span { position: absolute; z-index: 1; bottom: 17px; left: 17px; padding: 7px 9px; border-radius: 999px; color: white; background: rgba(5,29,36,.65); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.modal-copy { align-self: center; padding: 40px; }
.modal-copy h2 { margin: 9px 0 12px; font: 39px var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.modal-copy > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.product-facts { display: grid; gap: 0; margin: 22px 0; border-top: 1px solid #e2e7e5; }
.product-facts > div { display: grid; grid-template-columns: 92px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid #e8eceb; }
.product-facts dt { color: #8a9799; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.product-facts dd { margin: 0; color: #40585d; font-size: 9px; }
.modal-note { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; padding: 12px; border-radius: 9px; color: #67787b; background: var(--cream); font-size: 8px; line-height: 1.6; }
.modal-note p { margin: 0; }
.video-card { position: relative; width: min(860px,100%); overflow: hidden; border-radius: 20px; color: white; background: var(--navy-2); box-shadow: var(--shadow-lg); }
.video-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; }
.video-head span { color: var(--gold); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.video-head h2 { margin: 2px 0 0; font: 24px var(--font-display); }
.video-head .icon-button { color: white; border-color: rgba(255,255,255,.2); }
.video-card video { width: 100%; max-height: 65vh; background: black; }
.video-card > p { margin: 0; padding: 12px 20px 16px; color: rgba(255,255,255,.55); font-size: 9px; }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; max-width: min(430px,calc(100% - 30px)); transform: translate(-50%,100px); padding: 11px 16px; border-radius: 999px; color: white; background: var(--navy-2); box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; font-size: 10px; font-weight: 750; text-align: center; transition: transform .3s ease, opacity .3s ease; }
.toast.is-visible { transform: translate(-50%,0); opacity: 1; }

.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.reveal--delay { transition-delay: .1s; }
.js .reveal.reveal--delay-2 { transition-delay: .2s; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1060px) {
  :root { --shell: min(100% - 34px, 920px); }
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 36px; min-height: 620px; }
  .hero h1 { font-size: clamp(50px,6.7vw,70px); }
  .hero-card--top { left: -20px; }.hero-card--bottom { right: -8px; }
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .branch-grid { grid-template-columns: 1fr; }
  .branch-card { display: grid; grid-template-columns: .9fr 1.1fr; }
  .branch-map { height: 100%; aspect-ratio: auto; }
  .gallery-grid { grid-auto-rows: 230px; }
  .contact-grid, .sources-grid { gap: 45px; }
  .footer-main { gap: 35px; }
}

@media (max-width: 820px) {
  .research-bar__note { display: none!important; }
  .research-bar__inner { justify-content: center; }
  .header-inner { min-height: 68px; }
  .nav-toggle { display: block; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(2) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] > span:nth-child(3) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] > span:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }
  .main-nav { position: absolute; top: 100%; right: 0; left: 0; display: grid; gap: 0; padding: 12px 17px 18px; transform: translateY(-10px); border-bottom: 1px solid #e1e7e5; background: rgba(255,253,249,.98); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: all .25s; }
  .main-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .main-nav a { padding: 12px; }
  .main-nav .nav-cta { margin-top: 6px; text-align: center; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; padding-top: 70px; padding-bottom: 60px; }
  .hero-copy { text-align: center; }
  .hero-copy .eyebrow { justify-content: center; }
  .hero h1, .hero-lede { margin-right: auto; margin-left: auto; }
  .hero-actions, .hero-facts { justify-content: center; }
  .hero-visual { width: min(520px,100%); margin: 5px auto 0; }
  .hero-photo-wrap { margin: auto; }
  .hero-photo { aspect-ratio: 1.25/1; }
  .hero-card--top { left: 12px; }.hero-card--bottom { right: 12px; bottom: 54px; }
  .intro-grid, .loyalty-grid, .community-grid, .contact-grid, .sources-grid { grid-template-columns: 1fr; gap: 45px; }
  .intro-copy { padding-top: 0; }
  .section { padding: 78px 0; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .catalog-tools { align-items: stretch; flex-direction: column; }
  .search-box { min-width: 0; flex-basis: auto; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 190px; }
  .step-card h3 { margin-top: 30px; }
  .loyalty-grid { gap: 30px; }
  .loyalty-photo { min-height: 350px; }
  .loyalty-copy { text-align: center; margin: auto; }
  .loyalty-copy .eyebrow { justify-content: center; }
  .check-list { width: max-content; max-width: 100%; margin-right: auto; margin-left: auto; text-align: left; }
  .gallery-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 230px; }
  .community-head { align-items: flex-start; flex-direction: column; }
  .rating-callout { align-self: stretch; }
  .contact-copy { padding-top: 0; }
  .footer-main { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-main > div:last-child { display: none; }
  .modal-card { width: min(620px,100%); grid-template-columns: 1fr; max-height: calc(100vh - 30px); overflow-y: auto; }
  .modal-image { min-height: 270px; max-height: 330px; }
  .modal-copy { padding: 28px; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 28px); }
  .research-bar { font-size: 9px; }
  .brand-mark { width: 48px; height: 35px; }
  .brand-copy strong { font-size: 22px; }
  .brand-copy span { font-size: 8px; }
  .hero-grid { padding-top: 54px; }
  .hero h1 { font-size: 49px; }
  .hero-lede { font-size: 14px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-facts { gap: 18px; }
  .hero-facts > div { flex: 1; }
  .hero-facts strong { font-size: 24px; }
  .hero-facts span { font-size: 8px; }
  .hero-visual { margin-top: 10px; }
  .hero-photo { aspect-ratio: 1/1; }
  .hero-card { min-width: 0; padding: 9px; }
  .hero-card strong { font-size: 10px; }.hero-card small { font-size: 7px; }
  .hero-card--top { top: 17px; left: -4px; }.hero-card--bottom { right: -4px; bottom: 52px; }
  .hero-card__icon { width: 29px; height: 29px; }.hero-card img { width: 34px; height: 34px; }
  .hero-ribbon__inner { justify-content: flex-start; overflow: hidden; }
  .hero-ribbon__inner span:nth-of-type(n+4), .hero-ribbon__inner i:nth-of-type(n+4) { display: none; }
  .section { padding: 64px 0; }
  .section-heading h2, .section-top h2, .center-heading h2, .loyalty-copy h2, .community-head h2, .contact-copy h2, .sources-grid h2 { font-size: 39px; }
  .intro-grid { gap: 28px; }
  .intro-copy > p:first-child { font-size: 19px; }
  .section-top { align-items: flex-start; flex-direction: column; gap: 18px; }
  .catalog-count { width: auto; height: auto; display: flex; align-items: baseline; gap: 7px; padding: 9px 13px; border-radius: 999px; }
  .catalog-count strong { font-size: 20px; }.catalog-count span { font-size: 8px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .product-card__body { padding: 12px; }
  .product-card h3 { font-size: 13px; }
  .product-card__variant { font-size: 8px; }
  .product-card__meta { padding-top: 12px; }
  .ask-price strong { font-size: 9px; }.ask-price span { font-size: 7px; }
  .add-product { width: 31px; height: 31px; }
  .product-card__source { top: 7px; left: 7px; font-size: 6px; }
  .step-card { min-height: 180px; }
  .loyalty-photo { min-height: 300px; }
  .loyalty-halo { width: 260px; height: 260px; }
  .loyalty-photo img { width: 230px; border-width: 9px; border-radius: 22px; }
  .network-map > img { aspect-ratio: 1.25/1; }
  .map-legend { right: 8px; bottom: 8px; left: 8px; justify-content: center; padding: 8px; }
  .branch-card { display: block; }
  .branch-map { aspect-ratio: 3/1.55; }
  .branch-actions { flex-direction: column; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 230px; }
  .gallery-item--wide { grid-column: auto; }
  .section-top--light .text-link { align-self: flex-start; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .panel, .inquiry-form { padding: 20px; }
  .community-wall { min-height: 390px; }
  .contact-grid { gap: 35px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 34px; padding-top: 50px; }
  .footer-brand { grid-column: 1/-1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 7px; }
  .inquiry-fab { right: 14px; bottom: 14px; }
  .inquiry-fab > span:nth-child(2) { display: none; }
  .inquiry-drawer { width: 100%; }
  .modal { padding: 8px; }
  .modal-card { max-height: calc(100vh - 16px); border-radius: 16px; }
  .modal-image { min-height: 220px; }
  .modal-copy { padding: 22px; }
  .modal-copy h2 { font-size: 31px; }
  .video-modal { padding: 8px; }
  .video-card { border-radius: 14px; }
}

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