/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand — sampled from the Skinny Bread logo */
  --pink:        #C8127A;   /* Skinny magenta */
  --pink-deep:   #A20D62;
  --pink-soft:   #FBEAF3;
  --gold:        #B4924E;   /* laurel gold */
  --gold-soft:   #EADFC6;
  --sage:        #6E7F55;   /* natural / fresh accent, used sparingly */

  --ink:         #241C1A;   /* warm near-black text */
  --ink-2:       #5A4F4A;   /* secondary text */
  --ink-3:       #8A7F78;   /* muted */

  --cream:       #FBF7F1;   /* page background */
  --cream-2:     #F4EBDD;   /* alt section */
  --surface:     #FFFFFF;
  --border:      #EADFCF;
  --border-2:    #E4D8C4;

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing / rhythm */
  --container: 1180px;
  --radius: 18px;
  --radius-lg: 28px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(36,28,26,.06), 0 2px 8px rgba(36,28,26,.05);
  --shadow-md: 0 8px 24px rgba(36,28,26,.09), 0 2px 6px rgba(36,28,26,.05);
  --shadow-lg: 0 24px 60px rgba(36,28,26,.14), 0 8px 20px rgba(36,28,26,.08);
  --shadow-pink: 0 12px 30px rgba(200,18,122,.28);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
:focus-visible{ outline:3px solid var(--pink); outline-offset:3px; border-radius:6px; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }
.section{ padding-block:clamp(64px,10vw,120px); position:relative; }
.eyebrow{
  font-size:.8rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pink); display:inline-flex; align-items:center; gap:.55rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--gold); display:inline-block; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-.01em; color:var(--ink); }
h2{ font-size:clamp(2rem,4.6vw,3.35rem); }
h3{ font-size:clamp(1.25rem,2.4vw,1.6rem); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-2); max-width:60ch; }
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }
.center .lead{ margin-inline:auto; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:700; font-size:1rem; letter-spacing:.01em;
  padding:15px 28px; border-radius:100px; min-height:52px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
  white-space:nowrap; will-change:transform;
}
.btn svg{ width:19px; height:19px; }
.btn-primary{ background:var(--pink); color:#fff; box-shadow:var(--shadow-pink); }
.btn-primary:hover{ background:var(--pink-deep); transform:translateY(-2px); box-shadow:0 16px 36px rgba(200,18,122,.34); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); border:1px solid var(--border-2); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.btn-ghost:active{ transform:translateY(0); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-top:max(12px, env(safe-area-inset-top));
  transition:background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:12px;
}
.nav.scrolled{
  background:rgba(251,247,241,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--border), 0 6px 24px rgba(36,28,26,.06);
}
.brand{ display:flex; align-items:center; gap:.6rem; }
.brand img{ height:62px; width:auto; background:#fff; border-radius:14px; padding:5px 10px; box-shadow:var(--shadow-sm); }
.nav-links{ display:flex; align-items:center; gap:2px; }
.nav-links a{
  font-weight:600; font-size:clamp(1.05rem, 0.55rem + 0.7vw, 1.18rem); color:var(--ink-2);
  padding:10px 13px; border-radius:100px; transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav-links a:hover{ color:var(--pink); background:var(--pink-soft); }
.nav:not(.scrolled) .nav-links a{ color:#fff; text-shadow:0 1px 3px rgba(28,20,18,.55), 0 2px 14px rgba(28,20,18,.45); }
.nav:not(.scrolled) .nav-links a:hover{ color:#fff; background:rgba(255,255,255,.16); }
.nav:not(.scrolled) .ig-link{ color:#fff; border-color:rgba(255,255,255,.45); }
.nav:not(.scrolled) .nav-toggle{ color:#fff; }
.nav-cta{ display:flex; align-items:center; gap:.75rem; }
.nav-cta .btn{ min-height:44px; padding:11px 20px; font-size:.95rem; }
.ig-link{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  color:var(--ink); border:1px solid var(--border-2); transition:.2s var(--ease);
}
.ig-link:hover{ color:var(--pink); border-color:var(--pink); transform:translateY(-2px); }
.ig-link svg{ width:20px; height:20px; }
.nav-toggle{ display:none; width:44px; height:44px; border-radius:12px; color:var(--ink); place-items:center; }
.nav-toggle svg{ width:26px; height:26px; }

@media (max-width:1024px){
  .nav-cta .ig-link{ display:none; }
  .btn-find .mid{ display:none; }
  .brand img{ height:52px; }
  .nav-toggle{ display:grid; order:-1; }
  .nav-links{
    position:absolute; top:calc(100% + 8px); right:clamp(20px,5vw,40px); left:clamp(20px,5vw,40px);
    flex-direction:column; align-items:stretch; gap:2px; padding:12px;
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow-lg);
    opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98); transform-origin:top;
    transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav-links.open{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
  .nav-links a{ padding:14px 16px; font-size:1.15rem; }
  .nav:not(.scrolled) .nav-links a{ color:var(--ink-2); text-shadow:none; }
  .nav:not(.scrolled) .nav-links a:hover{ color:var(--pink); background:var(--pink-soft); }
}

/* ============================================================
   HERO — cinematic media panel (ported from 21st.dev / tailark hero-section-5)
   ============================================================ */
@keyframes orbit{ to{ transform:rotate(360deg); } }
@keyframes kenburns{
  from{ transform:scale(1.05) translate(0,0); }
  to{ transform:scale(1.17) translate(-2%,-1.5%); }
}
@keyframes heroIn{ from{ opacity:0; transform:scale(.985); } to{ opacity:1; transform:scale(1); } }
@keyframes heroParallaxIn{ from{ transform:translate3d(0,12%,0) scale(1.14); } to{ transform:translate3d(0,0,0) scale(1); } }

.hero{ position:relative; padding:8px 8px 0; }
.hero-media{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:clamp(20px,4vw,48px);
  height:min(94vh,880px); height:min(94svh,880px);
  box-shadow:var(--shadow-lg);
}
.hero-parallax{
  position:absolute; inset:-24% 0; z-index:0; will-change:transform;
}
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.05); will-change:transform;
}
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(28,20,18,.86) 0%, rgba(28,20,18,.48) 34%, rgba(28,20,18,.08) 58%, rgba(28,20,18,0) 70%),
    linear-gradient(to right, rgba(28,20,18,.44) 0%, rgba(28,20,18,.10) 46%, rgba(28,20,18,0) 66%);
}
.hero-content{
  position:absolute; z-index:2; left:0; bottom:0; width:100%;
  padding:clamp(24px,5vw,64px);
}
.hero-content .eyebrow{ color:#FEDCEC; font-size:.85rem; text-shadow:0 1px 2px rgba(28,20,18,.6), 0 2px 14px rgba(28,20,18,.55); }
.hero-content .eyebrow::before{ background:#F5B8D7; box-shadow:0 1px 3px rgba(28,20,18,.5); }
.hero h1{
  color:#fff; font-size:clamp(2.5rem,6.2vw,4.6rem); line-height:1.02;
  margin:.7rem 0 1rem; max-width:14ch;
}
.hero h1 .accent{ color:#F5B8D7; font-style:italic; }
.hero .lead{ color:rgba(251,247,241,.9); max-width:52ch; font-size:clamp(1.05rem,1.6vw,1.25rem); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.8rem; }
.btn-ghost-photo{
  background:rgba(255,255,255,.14); color:#fff;
  border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.btn-ghost-photo:hover{ background:rgba(255,255,255,.28); transform:translateY(-2px); }
.btn-ghost-photo:active{ transform:translateY(0); }

@media (prefers-reduced-motion:no-preference){
  .hero-media{ animation:heroIn 1s var(--ease-out) both; }
  .hero-parallax{ animation:heroParallaxIn 1.2s var(--ease-out) backwards; }
  .hero-photo{ animation:kenburns 24s ease-in-out infinite alternate; }
}
@media (max-width:860px){
  .hero-media{ height:min(88vh,760px); height:min(88svh,760px); min-height:540px; }
}

/* ============================================================
   PROMISE STRIP — infinite slider, slows on hover
   (ported from tailark InfiniteSlider + ProgressiveBlur)
   ============================================================ */
.promise-strip{ padding-block:26px; background:var(--cream); border-bottom:1px solid var(--border); }
.strip-inner{
  display:flex; align-items:center; gap:26px;
  max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,40px);
}
.strip-label{
  flex:0 0 auto; max-width:11rem; padding-right:26px;
  border-right:1px solid var(--border-2);
  font-size:.9rem; font-weight:600; color:var(--ink-2); text-align:end; line-height:1.35;
}
.strip-slider{ position:relative; overflow:hidden; flex:1; min-width:0; }
.strip-track{
  display:flex; align-items:center; gap:clamp(44px,6vw,96px);
  width:max-content; padding-block:10px; will-change:transform;
}
.strip-item{
  display:inline-flex; align-items:center; gap:.7rem; white-space:nowrap;
  font-size:.85rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.strip-item svg{ width:14px; height:14px; color:var(--gold); flex-shrink:0; }
.strip-fade{ position:absolute; top:0; bottom:0; width:72px; z-index:2; pointer-events:none; }
.strip-fade.left{ left:0; background:linear-gradient(to right, var(--cream) 15%, rgba(251,247,241,0)); }
.strip-fade.right{ right:0; background:linear-gradient(to left, var(--cream) 15%, rgba(251,247,241,0)); }
.strip-blur{
  position:absolute; top:0; bottom:0; width:64px; z-index:1; pointer-events:none;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.strip-blur.left{ left:0; -webkit-mask-image:linear-gradient(to right,#000 20%,transparent); mask-image:linear-gradient(to right,#000 20%,transparent); }
.strip-blur.right{ right:0; -webkit-mask-image:linear-gradient(to left,#000 20%,transparent); mask-image:linear-gradient(to left,#000 20%,transparent); }
@media (max-width:760px){
  .strip-inner{ flex-direction:column; gap:8px; }
  .strip-label{ border-right:0; text-align:center; max-width:none; padding-right:0; }
  .strip-label br{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .strip-slider{ overflow-x:auto; }
}

/* ============================================================
   BENEFITS
   ============================================================ */
.benefit-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:3rem;
}
.benefit-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px 28px; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.benefit-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--gold-soft); }
.benefit-ico{
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:var(--pink-soft); color:var(--pink); margin-bottom:20px;
}
.benefit-ico svg{ width:28px; height:28px; }
.benefit-card:nth-child(2n) .benefit-ico{ background:var(--gold-soft); color:var(--gold); }
.benefit-card:nth-child(3n) .benefit-ico{ background:#E9EEDF; color:var(--sage); }
.benefit-card h3{ margin-bottom:.4rem; }
.benefit-card p{ color:var(--ink-2); font-size:1rem; }
@media (max-width:820px){ .benefit-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .benefit-grid{ grid-template-columns:1fr; } }

/* ============================================================
   OUR BREADS — animated product showcase
   ============================================================ */
.breads{ background:var(--cream-2); }
.showcase{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px);
  align-items:center; margin-top:3rem;
}
.showcase-stage{
  position:relative; aspect-ratio:1; max-width:520px; width:100%; margin-inline:auto;
  border-radius:46% 54% 50% 50% / 52% 48% 52% 48%;
  background-image:radial-gradient(circle at 50% 40%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 74%);
  background-color:#D9EFFA; /* panella blue */
  transition:background-color .6s var(--ease);
  border:1px solid var(--border-2);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.showcase-stage[data-tint="rolls"]{ background-color:#E2F2DD; }
.showcase-stage[data-tint="buns"]{ background-color:#F6E9D2; }
.stage-halo{
  position:absolute; inset:8%; border-radius:50%; pointer-events:none;
  border:1.5px dashed rgba(180,146,78,.4);
}
.stage-img{
  position:absolute; inset:0; display:grid; place-items:center;
  opacity:0; transform:scale(.94) rotate(-2deg);
  transition:opacity .45s var(--ease), transform .55s var(--ease-out);
  pointer-events:none;
}
.stage-img.active{ opacity:1; transform:scale(1) rotate(0deg); }
.stage-img img{ max-width:76%; max-height:72%; width:auto; height:auto; object-fit:contain; filter:drop-shadow(0 26px 34px rgba(36,28,26,.24)); }
@media (prefers-reduced-motion:no-preference){
  .stage-halo{ animation:orbit 80s linear infinite; }
  .stage-img.active img{ animation:stageFloat 7s ease-in-out infinite; }
  @keyframes stageFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
}
.bread-tabs{
  display:inline-flex; gap:6px; padding:6px; border-radius:100px;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  margin-bottom:1.6rem; flex-wrap:wrap;
}
.bread-tab{
  font-weight:700; font-size:.98rem; color:var(--ink-2);
  padding:12px 22px; min-height:48px; border-radius:100px;
  transition:color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bread-tab:hover{ color:var(--pink); }
.bread-tab.active{ background:var(--pink); color:#fff; box-shadow:var(--shadow-pink); }
.bread-copy h3{ font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:.6rem; }
.bread-copy p{ color:var(--ink-2); max-width:46ch; }
.bread-points{ list-style:none; display:grid; gap:.55rem; margin:1.1rem 0 1.6rem; }
.bread-points li{
  display:flex; align-items:center; gap:.6rem; font-weight:600; color:var(--ink);
}
.bread-points li::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--gold); flex-shrink:0;
}
.bread-copy.swap{ animation:copySwap .4s var(--ease-out); }
@keyframes copySwap{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){ .bread-copy.swap{ animation:none; } }
@media (max-width:840px){
  .showcase{ grid-template-columns:1fr; }
  .showcase-stage{ max-width:400px; }
  .showcase-panel{ text-align:center; }
  .bread-copy p{ margin-inline:auto; }
  .bread-points{ justify-items:center; }
  .bread-points li::before{ display:none; }
}

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:var(--cream-2); }
.stat-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:2.5rem;
}
.stat{
  text-align:center; padding:28px 18px; background:var(--surface);
  border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.stat .num{
  font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.4rem);
  line-height:1; color:var(--pink); font-variant-numeric:tabular-nums;
}
.stat .num .unit{ font-size:.4em; color:var(--gold); vertical-align:super; margin-left:2px; }
.stat .label{ margin-top:.6rem; font-weight:600; color:var(--ink); }
.stat .sub{ font-size:.85rem; color:var(--ink-3); margin-top:.15rem; }
@media (max-width:720px){ .stat-grid{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   STORY
   ============================================================ */
.story-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,6vw,72px); align-items:center; }
.story-visual{ position:relative; }
.story-frame{
  aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; position:relative;
  background:
    radial-gradient(120% 90% at 30% 20%, #FFFFFF 0%, #FBEFDD 45%, #F0DFBF 100%);
  border:1px solid var(--border-2); box-shadow:var(--shadow-lg);
  display:grid; place-items:center;
}
.story-frame img{ width:100%; height:100%; object-fit:cover; }
.story-badge{
  position:absolute; bottom:-22px; right:-14px;
  background:var(--pink); color:#fff; border-radius:20px; padding:18px 22px;
  box-shadow:var(--shadow-pink); text-align:center; max-width:180px;
}
.story-badge .big{ font-family:var(--font-display); font-size:2rem; line-height:1; }
.story-badge .small{ font-size:.82rem; opacity:.92; margin-top:.25rem; }
.story-copy h2{ margin:.6rem 0 1.1rem; }
.story-copy p + p{ margin-top:1rem; }
.story-copy p{ color:var(--ink-2); }
.signature{
  font-family:var(--font-display); font-style:italic; font-size:1.5rem; color:var(--ink);
  margin-top:1.4rem;
}
.signature span{ display:block; font-family:var(--font-body); font-style:normal; font-size:.85rem; color:var(--ink-3); font-weight:600; letter-spacing:.04em; margin-top:.2rem; }
@media (max-width:840px){ .story-grid{ grid-template-columns:1fr; } .story-visual{ max-width:420px; margin-inline:auto; } }

/* ============================================================
   STORE LOCATOR
   ============================================================ */
.locator{ background:var(--ink); color:var(--cream); }
.locator .eyebrow{ color:#F2A9D0; }
.locator .eyebrow::before{ background:var(--gold); }
.locator h2{ color:var(--cream); }
.locator .lead{ color:rgba(251,247,241,.72); }
.finder{
  margin-top:2.5rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg); padding:clamp(22px,4vw,36px); backdrop-filter:blur(6px);
}
.finder-form{ display:flex; gap:12px; flex-wrap:wrap; }
.zip-field{ position:relative; flex:1 1 240px; }
.zip-field svg{ position:absolute; left:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--ink-3); pointer-events:none; }
.finder-form input{
  width:100%; min-height:56px; font-size:1.05rem; font-family:inherit; color:var(--ink);
  padding:14px 18px 14px 48px; border-radius:100px; border:1px solid transparent; background:#fff;
  box-shadow:var(--shadow-md); transition:box-shadow .2s var(--ease);
}
.finder-form input::placeholder{ color:var(--ink-3); }
.finder-form input:focus{ outline:none; box-shadow:0 0 0 3px var(--pink); }
.finder-form .btn-primary{ flex:0 0 auto; min-height:56px; }
.finder-hint{ font-size:.85rem; color:rgba(251,247,241,.55); margin-top:.9rem; }
.finder-msg{ margin-top:1.4rem; font-weight:600; color:#F7D9E9; min-height:1.4em; }
.store-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:1.5rem; }
.store{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius); padding:22px; transition:transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.store.near{ border-color:var(--pink); background:rgba(200,18,122,.14); }
.store .store-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.5rem; }
.store h3{ color:var(--cream); font-size:1.15rem; }
.store .dist{
  flex:0 0 auto; font-size:.8rem; font-weight:700; color:var(--ink);
  background:var(--gold-soft); padding:4px 10px; border-radius:100px; font-variant-numeric:tabular-nums;
  opacity:0; transition:opacity .3s var(--ease);
}
.store.showdist .dist{ opacity:1; }
.store address{ font-style:normal; color:rgba(251,247,241,.66); font-size:.95rem; margin-top:.5rem; line-height:1.5; }
.store a.dir{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem; font-weight:700; color:#F2A9D0; font-size:.92rem; transition:gap .2s var(--ease), color .2s var(--ease); }
.store a.dir:hover{ gap:.65rem; color:#fff; }
.store a.dir svg{ width:16px; height:16px; }
@media (max-width:820px){ .store-list{ grid-template-columns:1fr; } .finder-form .btn-primary{ flex:1 1 100%; } }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,64px); align-items:start; }
.contact-copy .lead{ margin-bottom:1.6rem; }
.contact-list{ list-style:none; display:grid; gap:1rem; margin-top:1.5rem; }
.contact-list li{ display:flex; gap:.9rem; align-items:flex-start; }
.contact-list .ci{ flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:var(--pink-soft); color:var(--pink); display:grid; place-items:center; }
.contact-list .ci svg{ width:22px; height:22px; }
.contact-list strong{ display:block; }
.contact-list span{ color:var(--ink-2); font-size:.95rem; }
form.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:clamp(24px,4vw,36px); box-shadow:var(--shadow-md);
}
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:600; font-size:.92rem; margin-bottom:7px; }
.field label .req{ color:var(--pink); }
.field input,.field textarea{
  width:100%; font-family:inherit; font-size:1rem; color:var(--ink);
  padding:14px 16px; min-height:52px; border:1px solid var(--border-2); border-radius:12px;
  background:var(--cream); transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-soft); background:#fff; }
.field .err{ color:var(--pink-deep); font-size:.85rem; margin-top:6px; display:none; }
.field.invalid .err{ display:block; }
.field.invalid input,.field.invalid textarea{ border-color:var(--pink-deep); }
form.card .btn{ width:100%; margin-top:6px; }
.form-note{ text-align:center; font-size:.85rem; color:var(--ink-3); margin-top:1rem; }
.form-success{
  display:none; text-align:center; padding:1.4rem; background:#EEF3E4; border:1px solid #D6E0C2;
  border-radius:14px; color:var(--sage); font-weight:600; margin-top:1rem;
}
.form-success svg{ width:26px; height:26px; margin-bottom:.3rem; }
@media (max-width:840px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--cream-2); border-top:1px solid var(--border); padding-block:56px 40px; }
.footer-grid{ display:flex; flex-wrap:wrap; gap:32px; justify-content:space-between; align-items:flex-start; }
.footer .brand img{ height:52px; }
.footer-tagline{ color:var(--ink-2); max-width:34ch; margin-top:1rem; font-size:.95rem; }
.footer-nav{ display:flex; gap:40px; flex-wrap:wrap; }
.footer-col h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-3); margin-bottom:14px; font-weight:700; }
.footer-col a{ display:block; color:var(--ink-2); padding:6px 0; font-size:.95rem; transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--pink); }
.footer-bottom{
  border-top:1px solid var(--border); margin-top:40px; padding-top:24px;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center;
  color:var(--ink-3); font-size:.85rem;
}
.footer-bottom .disclaimer{ max-width:62ch; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Skip link */
.skip{ position:absolute; left:-999px; top:8px; z-index:200; background:var(--pink); color:#fff; padding:10px 18px; border-radius:8px; font-weight:700; }
.skip:focus{ left:8px; }