/* ============================================================
   DogGone Natural — site styles  (v3)
   - Display/nav font: Oswald (condensed) with a chalk-eroded edge
     (#rough SVG filter). Swap point: --font-display.
   - Aged paper body; centered "sheet"; deep gradient greens/browns.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Yellowtail&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root{
  /* deeper, layered palette for depth */
  --sage:#6f9056; --sage-dark:#52703d;
  --green:#4d6a37; --green-deep:#364d27; --green-hi:#6a8a4b;
  --brown:#4c390f; --brown-deep:#2f2209; --brown-hi:#6a5224;
  --gold:#efb00f; --gold-dark:#cf9405; --gold-hi:#ffce4d;
  --teal:#3b8093; --teal-dark:#2c6072;

  --paper:#efeadd; --paper-2:#e6dfcc; --photo-bg:#e3dac8;
  --sheet:#f6f2e8; --panel:#fbf8ef;
  --ink:#352a18; --ink-soft:#6a5d44; --line:#d6ccb2;

  --grad-green:linear-gradient(180deg,#5e7d44 0%,#41572b 100%);
  --grad-green-btn:linear-gradient(180deg,#6f9056 0%,#4d6a37 100%);
  --grad-brown:linear-gradient(180deg,#574321 0%,#332509 100%);
  --grad-gold:linear-gradient(180deg,#ffce4d 0%,#e7a30b 100%);

  --font-display:"Oswald","Arial Narrow",sans-serif;
  --font-body:"PT Sans","Helvetica Neue",Arial,sans-serif;
  --sheet-w:1080px; --radius:8px;
  --shadow:0 2px 10px rgba(60,44,14,.12);
  --depth:0 10px 24px rgba(40,30,8,.18);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  font-size:17px; line-height:1.65;
  background-color:#e9e2cf;
  background-image:url("../images/paper-aged.jpg");
  background-size:540px;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; will-change:transform;
  background:
    linear-gradient(to right, rgba(80,62,30,.12), rgba(80,62,30,0) 12%,
                    rgba(80,62,30,0) 88%, rgba(80,62,30,.12));
}
body>*{ position:relative; z-index:1; }

a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--teal-dark); text-decoration:underline; }
img{ max-width:100%; display:block; }

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--green); line-height:1.1; font-weight:600; margin:0 0 .5em; letter-spacing:.5px; }
.rough{ filter:url(#rough); }

/* ---------- Header: masthead (darker paper) + dark chalk nav ---------- */
.topbar{
  position:relative;
  background:#e7e1d1;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(244,239,228,.55)),
    url("../images/homey-bg.jpg");
  background-size:cover; background-position:center;
  border-bottom:1px solid #cbc2a8;
  box-shadow:inset 0 -10px 20px rgba(120,130,120,.10);
}
.topbar-inner{ max-width:var(--sheet-w); margin:0 auto; padding:16px 26px;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:20px; min-height:120px; }
.brand img{ width:300px; height:auto; filter:drop-shadow(2px 5px 6px rgba(40,28,8,.42)); }
.masthead-text{ text-align:center; }
.masthead-text{ position:relative; text-align:center; }
.ma-script{ display:block; font-family:"Yellowtail", cursive; font-size:2.7rem; letter-spacing:.5px; line-height:1;
  color:#8a5a2a; text-shadow:1px 2px 2px rgba(70,45,15,.20); }
.ma-sub{ display:block; font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:2px; font-size:1.35rem; color:#3f7c8c; margin-top:4px; text-shadow:0 1px 1px rgba(255,255,255,.4); }
@media(max-width:1050px){ .ma-script{ font-size:2.1rem; } .ma-sub{ font-size:1.1rem; letter-spacing:1.5px; } }
@media(max-width:820px){ .ma-script{ font-size:2.3rem; } .ma-sub{ font-size:1.15rem; } }
.topbar-right{ display:flex; flex-direction:column; align-items:flex-end; gap:11px; }
.awards-mini{ display:flex; gap:8px; align-items:stretch; }
.seal{ width:84px; padding:8px 6px; border-radius:8px;
  background:linear-gradient(180deg,#fce6a6 0%,#e7b53a 100%);
  border:1px solid #c8901f; box-shadow:0 2px 5px rgba(60,44,14,.25), inset 0 1px 0 rgba(255,255,255,.5);
  text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.seal .star{ color:#8a5a12; font-size:.8rem; line-height:1; letter-spacing:1px; }
.seal b{ display:block; font-family:var(--font-display); font-weight:600; font-size:.6rem;
  letter-spacing:.4px; color:#4a370c; text-transform:uppercase; line-height:1.15; margin-top:2px; }
.topbar .stores{ display:flex; gap:22px; font-size:.82rem; color:var(--ink-soft); }
.topbar .stores > div{ text-align:center; }
.topbar .stores b{ display:block; font-family:var(--font-display); color:var(--green); font-weight:600; letter-spacing:.5px; text-transform:uppercase; font-size:.74rem; }
.topbar .stores a{ color:var(--brown); font-weight:700; }
@media(max-width:820px){
  .masthead-bfly{ display:none; }
  .topbar-inner{ grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; min-height:0; }
  .topbar-right{ align-items:center; } .topbar .stores{ text-align:center; }
  .masthead-text img{ max-width:360px; } .brand img{ width:212px; }
}

.nav-bar{
  position:sticky; top:0; z-index:50;
  background:var(--grad-brown);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,0) 40%, rgba(0,0,0,.22)),
    var(--grad-brown),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:3px solid var(--brown-deep);
  box-shadow:0 4px 14px rgba(30,20,5,.28);
}
.nav-inner{ max-width:var(--sheet-w); margin:0 auto; padding:0 14px;
  display:flex; align-items:center; justify-content:center; }
.main-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:2px; flex-wrap:wrap; justify-content:center; }
.main-nav a{
  font-family:var(--font-display); font-weight:500; font-size:1rem;
  text-transform:uppercase; letter-spacing:1.8px;
  color:#e7dcc2; text-decoration:none; padding:15px 18px; display:inline-block;
  filter:url(#rough); transition:color .15s, background .15s;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.main-nav a:hover{ color:#fff; background:rgba(255,255,255,.06); text-decoration:none; }
.main-nav a.active{ color:var(--gold-hi); background:rgba(0,0,0,.20); }
.nav-toggle{ display:none; background:transparent; color:#e7dcc2; border:1px solid rgba(255,255,255,.3);
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:1.5px; font-size:.95rem;
  padding:12px 16px; margin:8px auto; cursor:pointer; border-radius:5px; }
a:focus-visible,button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:4px; }

/* ---------- Full-bleed top imagery (blended) ---------- */
.hero{ width:100%; background:var(--photo-bg); text-align:center; }
.hero img{ width:100%; max-width:1180px; height:auto; margin:0 auto; display:block;
  /* feather the bottom + sides into the paper so the photo blends */
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%),
                     linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:linear-gradient(180deg,#000 78%,transparent 100%),
             linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
.page-banner{ width:100%; background:var(--photo-bg); text-align:center; }
.page-banner img{ width:100%; max-width:1180px; height:auto; margin:0 auto; display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%); }

.hero-strip{ background:var(--grad-green); color:#f1efe0; text-align:center;
  padding:13px 22px; font-family:var(--font-display); font-weight:500; text-transform:uppercase;
  letter-spacing:2px; font-size:.92rem; box-shadow:inset 0 2px 6px rgba(0,0,0,.18); }
.hero-strip span{ color:var(--gold-hi); }

/* ---------- Sheet ---------- */
.sheet{ max-width:var(--sheet-w); margin:26px auto; background:var(--sheet);
  border:1px solid #cdc3a8; border-radius:6px; overflow:hidden;
  box-shadow:var(--depth), 0 1px 0 rgba(255,255,255,.6) inset; }
.block{ padding:0; }
.pad{ padding:48px 56px; }
.block.tan{ background:linear-gradient(180deg,#ece5d3,#e7e0cd); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.block.green{ background:var(--grad-green); color:#eef2e6; text-align:center;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.20), inset 0 -3px 10px rgba(0,0,0,.18); }
.block.green h2,.block.green h3{ color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.25); }

/* ---------- Buttons (depth) ---------- */
.btn{ display:inline-block; font-family:var(--font-display); font-weight:600; text-transform:uppercase;
  letter-spacing:1px; background:var(--grad-gold); color:#4a370c; padding:12px 24px; border-radius:30px;
  text-decoration:none; border:1px solid var(--gold-dark); font-size:.86rem;
  box-shadow:0 3px 0 var(--gold-dark), 0 6px 12px rgba(60,44,14,.20);
  transition:transform .1s, box-shadow .1s; }
.btn:hover{ color:#3a2c08; text-decoration:none; transform:translateY(2px); box-shadow:0 1px 0 var(--gold-dark),0 3px 8px rgba(60,44,14,.20); }
.btn.green{ background:var(--grad-green-btn); color:#fff; border-color:var(--green-deep); box-shadow:0 3px 0 var(--green-deep),0 6px 12px rgba(40,30,8,.22); }
.btn.green:hover{ color:#fff; box-shadow:0 1px 0 var(--green-deep),0 3px 8px rgba(40,30,8,.22); }

/* ---------- Type helpers ---------- */
.lead{ font-size:1.2rem; color:var(--brown); line-height:1.55; max-width:760px; }
.eyebrow{ font-family:var(--font-display); font-weight:600; color:var(--teal); text-transform:uppercase; letter-spacing:2.5px; font-size:.72rem; margin:0 0 10px; }
h2.big{ font-size:1.85rem; font-weight:700; }
.page-title h1{ font-size:2.1rem; color:var(--brown); margin:0; font-weight:700; }
.page-title p{ margin:10px 0 0; color:var(--ink-soft); max-width:720px; }

.intro-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:30px; }
.card{ background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--sage);
  border-radius:var(--radius); padding:24px 22px; box-shadow:var(--shadow); }
.card h3{ font-size:1.15rem; color:var(--green); font-weight:600; }
.card .ico{ width:46px; height:46px; border-radius:50%; background:linear-gradient(180deg,#eee6d4,#e3dac4);
  color:var(--green); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px;
  border:2px solid var(--sage); box-shadow:inset 0 1px 3px rgba(0,0,0,.08); }

/* 3-up feature strip (echoes original home) */
.feature-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.feature{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; text-align:center; }
.feature .top{ padding:26px 18px; background:linear-gradient(180deg,#fbf8ef,#f0ead9); border-bottom:3px solid var(--teal); }
.feature .top.g{ border-bottom-color:var(--sage); }
.feature .top.o{ border-bottom-color:var(--gold-dark); }
.feature .badge{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--teal-dark); font-size:1.25rem; }
.feature .badge .num{ color:var(--gold-dark); }
.feature h3{ font-size:1.15rem; margin:6px 0 0; color:var(--brown); }
.feature .cap{ padding:16px 18px; }
.feature .cap b{ font-family:var(--font-display); color:var(--green); letter-spacing:.5px; text-transform:uppercase; font-size:.86rem; display:block; }
.feature .cap span{ color:var(--ink-soft); font-size:.92rem; }

.awards .row{ display:flex; gap:30px; justify-content:center; align-items:flex-start; flex-wrap:wrap; margin-top:8px; }
.awards .award{ color:#eef2e6; font-family:var(--font-display); font-weight:400; max-width:210px; font-size:.9rem; letter-spacing:.5px; }
.awards .award b{ display:block; color:var(--gold-hi); font-size:1.02rem; font-weight:600; margin-bottom:3px; text-transform:uppercase; }

/* content + sidebar */
.content-grid{ display:grid; grid-template-columns:1fr 280px; gap:44px; }
@media(max-width:860px){ .content-grid{ grid-template-columns:1fr; } }
.prose h2{ font-size:1.5rem; margin-top:1.3em; color:var(--green); font-weight:600; }
.prose h3{ font-size:1.15rem; color:var(--brown); }
.prose p{ margin:0 0 1.1em; }
.prose em{ color:var(--brown); }

.article{ background:var(--panel); border:1px solid var(--line); border-left:5px solid var(--sage);
  border-radius:var(--radius); padding:24px 28px; margin-bottom:24px; box-shadow:var(--shadow); }
.article h2{ font-size:1.4rem; margin-bottom:.35em; color:var(--green); font-weight:600; }
.article .tags{ margin-top:14px; }
.tag{ display:inline-block; font-size:.7rem; font-family:var(--font-body); background:var(--paper-2); color:var(--ink-soft);
  padding:3px 11px; border-radius:20px; margin:0 6px 6px 0; border:1px solid var(--line); text-transform:uppercase; letter-spacing:.5px; }

.qa{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; margin-bottom:22px; box-shadow:var(--shadow); }
.qa .q{ font-style:italic; color:var(--teal-dark); border-left:4px solid var(--teal); padding-left:16px; margin:0 0 15px; font-size:1.02rem; }
.qa .a p{ margin:0 0 1em; } .qa .a p:last-child{ margin-bottom:0; }
.qa h2{ font-size:1.2rem; margin-bottom:.5em; }

.sidebar .box{ background:var(--panel); border:1px solid var(--line); border-top:4px solid var(--teal); border-radius:var(--radius); padding:20px; margin-bottom:20px; box-shadow:var(--shadow); }
.sidebar h3{ font-size:1rem; color:var(--green); margin-bottom:.5em; font-weight:600; }
.sidebar ul{ list-style:none; margin:0; padding:0; }
.sidebar li{ border-bottom:1px dashed var(--line); } .sidebar li:last-child{ border-bottom:0; }
.sidebar li a{ display:block; padding:8px 0; color:var(--brown); font-size:.95rem; }
.sidebar li a:hover{ color:var(--teal); text-decoration:none; padding-left:5px; transition:padding .15s; }

/* brands */
.brand-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-top:8px; }
.brand-chip{ background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--sage); border-radius:var(--radius);
  padding:15px 18px; box-shadow:var(--shadow); font-family:var(--font-display); font-weight:500; color:var(--brown); font-size:1rem; letter-spacing:.4px; }
.brand-chip.feat{ border-left-color:var(--gold-dark); background:linear-gradient(180deg,#fdf6e2,#fbf8ef); }
.brand-cat{ margin-top:34px; }
.brand-cat h2{ font-size:1.4rem; color:var(--green); border-bottom:2px solid var(--line); padding-bottom:8px; font-weight:600; }

/* contact / stores */
.stores-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
@media(max-width:760px){ .stores-grid{ grid-template-columns:1fr; } }
.store-card{ background:var(--panel); border:1px solid var(--line); border-top:5px solid var(--sage); border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow); }
.store-card h2{ font-size:1.35rem; color:var(--green); margin-bottom:.4em; }
.info-line{ display:flex; gap:12px; margin-bottom:14px; align-items:flex-start; }
.info-line .ico{ flex:0 0 38px; height:38px; border-radius:50%; background:linear-gradient(180deg,#eee6d4,#e3dac4);
  border:2px solid var(--sage); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:1.05rem; }
.info-line b{ display:block; color:var(--green); font-family:var(--font-display); font-weight:600; letter-spacing:.4px; }
.hours-table{ width:100%; border-collapse:collapse; }
.hours-table td{ padding:9px 0; border-bottom:1px dashed var(--line); }
.hours-table td:last-child{ text-align:right; color:var(--brown); font-weight:700; }

/* footer */
.site-footer{ background:var(--grad-brown);
  background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.18)),var(--grad-brown);
  color:#e9e0cd; padding:42px 0 24px; border-top:4px solid var(--green-deep);
  box-shadow:inset 0 4px 12px rgba(0,0,0,.22); }
.footer-inner{ max-width:var(--sheet-w); margin:0 auto; padding:0 22px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; }
.site-footer h4{ color:var(--gold-hi); font-size:1rem; margin-bottom:.7em; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.site-footer a{ color:#e9e0cd; } .site-footer a:hover{ color:#fff; }
.site-footer ul{ list-style:none; margin:0; padding:0; } .site-footer li{ padding:5px 0; }
.footer-logo{ width:224px; margin-bottom:14px; filter:drop-shadow(0 2px 5px rgba(0,0,0,.45)); }
.footer-bottom{ text-align:center; border-top:1px solid rgba(255,255,255,.15); margin-top:30px; padding-top:16px; font-size:.84rem; color:#c7bba1; }

/* responsive */
@media(max-width:900px){ .sheet{ margin:14px; } .pad{ padding:36px 30px; } .intro-grid{ grid-template-columns:1fr; gap:26px; }
  .cards,.feature-row{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:1fr; gap:24px; } }
@media(max-width:680px){
  .topbar .stores{ width:100%; justify-content:space-between; }
  .nav-toggle{ display:block; }
  .main-nav{ display:none; width:100%; } .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; width:100%; gap:0; padding-bottom:8px; }
  .main-nav a{ display:block; text-align:center; padding:13px; border-top:1px solid rgba(255,255,255,.08); }
  h2.big{ font-size:1.5rem; } .page-title h1{ font-size:1.7rem; } body{ font-size:16px; } .pad{ padding:30px 22px; }
}
@media(prefers-reduced-motion:reduce){ *{ scroll-behavior:auto!important; transition:none!important; } }

/* ---------- Products catalog (sidebar filter) ---------- */
.catalog{ display:grid; grid-template-columns:230px 1fr; gap:36px; align-items:start; }
@media(max-width:780px){ .catalog{ grid-template-columns:1fr; } }
.cat-side{ position:sticky; top:74px; background:var(--panel); border:1px solid var(--line);
  border-top:4px solid var(--sage); border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); }
.cat-side h3{ font-size:.78rem; text-transform:uppercase; letter-spacing:1.5px; color:var(--teal); margin:6px 8px 10px; }
.cat-side .filter{ display:block; width:100%; text-align:left; background:none; border:0; cursor:pointer;
  font-family:var(--font-display); font-weight:500; font-size:1rem; letter-spacing:.4px; color:var(--brown);
  padding:11px 12px; border-radius:6px; transition:background .12s, color .12s; border-left:3px solid transparent; }
.cat-side .filter:hover{ background:var(--paper-2); color:var(--green); }
.cat-side .filter.active{ background:linear-gradient(180deg,#5e7d44,#41572b); color:#fff; border-left-color:var(--gold); }
.cat-side .filter .n{ float:right; font-family:var(--font-body); font-size:.78rem; opacity:.7; margin-top:3px; }

.cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.cat-head h2{ font-size:1.5rem; color:var(--green); margin:0; }
.cat-head .count{ color:var(--ink-soft); font-size:.9rem; }

.cat-search{ margin-bottom:18px; }
.cat-search input{ width:100%; font-family:var(--font-body); font-size:1rem; color:var(--ink);
  padding:12px 16px; border:1px solid var(--line); border-radius:30px; background:var(--panel);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.05); }
.cat-search input:focus{ outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(111,144,86,.18); }

.brand-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media(max-width:820px){ .brand-list{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .brand-list{ grid-template-columns:1fr; } }
.brand-card{ background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--sage);
  border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); transition:transform .1s, box-shadow .1s; }
.brand-card:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(40,30,8,.14); }
.brand-card.feat{ border-left-color:var(--gold-dark); background:linear-gradient(180deg,#fdf6e2,#fbf8ef); }
.brand-meta b{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--brown); letter-spacing:.3px; }
.brand-meta .note{ font-family:var(--font-body); font-weight:400; font-style:italic; color:var(--ink-soft); font-size:.78rem; }
.brand-meta .types{ margin-top:7px; }
.brand-meta .t{ display:inline-block; font-size:.64rem; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-soft);
  background:var(--paper-2); border:1px solid var(--line); border-radius:20px; padding:2px 8px; margin:0 4px 4px 0; }
.brand-card.feat .brand-meta b::after{ content:" \2605"; color:var(--gold-dark); font-size:.8em; }
.brand-card.hide{ display:none; }
.no-results{ color:var(--ink-soft); padding:20px 4px; display:none; }


/* ---------- chalk butterfly accents (replaces award gloating) ---------- */
.bfly{ display:inline-block; vertical-align:middle; opacity:.9; }
.bfly.sm{ width:34px; } .bfly.md{ width:52px; } .bfly.lg{ width:76px; }
.eyebrow-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.eyebrow-row .eyebrow{ margin:0; color:var(--teal); }
.eyebrow-row .bfly{ width:30px; opacity:.8; }
.masthead-bfly{ position:absolute; pointer-events:none; opacity:.55; }
.section-flourish{ text-align:center; margin:6px 0 2px; }
.section-flourish img{ width:60px; opacity:.7; display:inline-block; }

/* ---------- homey soft section ---------- */
.block.homey{ position:relative; background:linear-gradient(180deg,rgba(247,243,233,.92),rgba(240,235,222,.94)), url("../images/homey-bg.jpg"); background-size:cover; background-position:center; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* ---------- storefront banner (contact) ---------- */
.store-banner{ line-height:0; border-bottom:1px solid var(--line); }
.store-banner img{ width:100%; height:auto; display:block; }

/* ---------- Contact: single-view stage over faded storefront ---------- */
.contact-stage{
  position:relative; min-height:calc(100vh - 210px);
  display:flex; align-items:center; justify-content:flex-end; padding:44px 40px;
  background:linear-gradient(rgba(246,241,230,.26),rgba(246,241,230,.40)), url("../images/storefront.jpg");
  background-size:cover; background-position:left center;
}
.contact-panel{
  max-width:600px; width:100%;
  background:rgba(251,248,239,.90);
  border:1px solid rgba(203,194,168,.9); border-radius:14px;
  box-shadow:0 16px 44px rgba(40,30,8,.28), 0 1px 0 rgba(255,255,255,.6) inset;
  padding:32px 40px;
}
.contact-panel-head{ text-align:center; margin-bottom:22px; }
.contact-panel-head .eyebrow-row{ justify-content:center; }
.contact-panel-head h1{ font-size:2.1rem; color:var(--brown); margin:0 0 6px; }
.contact-panel-head p{ color:var(--ink-soft); max-width:520px; margin:0 auto; }

/* two stores side by side */
.contact-stores{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.contact-stores .c-store{ padding:0 24px; }
.contact-stores .c-store + .c-store{ border-left:1px solid var(--line); }
.c-store h2{ font-size:1.1rem; color:var(--green); margin:0 0 8px; letter-spacing:.5px; }
.c-store .addr{ margin:0 0 10px; color:var(--ink); }
.c-phone{ display:inline-block; white-space:nowrap; font-family:var(--font-display); font-weight:600;
  font-size:1.2rem; color:var(--brown); letter-spacing:.6px; }
.c-phone:hover{ color:var(--teal); text-decoration:none; }

/* hours in a single row underneath */
.contact-hours{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); text-align:center; }
.contact-hours h2{ font-size:1.1rem; color:var(--green); margin:0 0 10px; letter-spacing:.5px; }
.hours-row{ display:flex; justify-content:center; align-items:baseline; gap:14px 28px; flex-wrap:wrap; }
.hours-row span{ white-space:nowrap; color:var(--ink); font-size:.98rem; }
.hours-row b{ color:var(--brown); font-family:var(--font-display); font-weight:600; margin-right:5px; letter-spacing:.3px; }

@media(max-width:760px){
  .contact-stage{ min-height:0; padding:26px 16px; justify-content:center; background-position:center; }
  .contact-panel{ padding:26px 22px; }
  .contact-stores{ grid-template-columns:1fr; }
  .contact-stores .c-store{ padding:16px 0; }
  .contact-stores .c-store + .c-store{ border-left:0; border-top:1px solid var(--line); }
}

/* Best of Ashburn badge (home welcome column) */
.boa-wrap{ text-align:center; }
.boa-badge{ width:min(74%,250px); height:auto; margin:0 auto; display:block;
  filter:drop-shadow(0 8px 18px rgba(40,30,8,.30)); }
@media(max-width:820px){ .boa-badge{ width:200px; margin-top:6px; } }

/* Welcome: full-width illustration with text overlaid on its cream left side */
.welcome-hero{ position:relative; overflow:hidden;
  background:#e9dac1 url("../images/welcome-scene.jpg") no-repeat right center;
  background-size:contain; }
.welcome-hero::before{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,#e9dac1 32%, rgba(233,218,193,0) 45%); }
.welcome-hero .wt{ max-width:var(--sheet-w); margin:0 auto; padding:48px 56px;
  min-height:560px; display:flex; align-items:center; position:relative; z-index:2; }
.welcome-text{ width:42%; }
.welcome-mobile-img{ display:none; }
@media(max-width:900px){
  .welcome-hero{ background-image:none; }
  .welcome-hero::before{ display:none; }
  .welcome-hero .wt{ min-height:0; padding:34px 24px 8px; display:block; }
  .welcome-text{ width:100%; }
  .welcome-mobile-img{ display:block; width:100%; height:auto; margin-top:4px; }
}

/* Products: paired brand boxes with wheat divider */
.brand-pair{ display:grid; grid-template-columns:1fr 38px 1fr; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--sage);
  border-radius:var(--radius); padding:16px 12px; box-shadow:var(--shadow); min-height:96px; }
.bp-name{ text-align:center; font-family:var(--font-display); font-weight:600; color:var(--brown);
  font-size:1.02rem; letter-spacing:.3px; line-height:1.2; }
.bp-div{ position:relative; align-self:stretch; display:flex; align-items:center; justify-content:center; }
.bp-div::before{ content:""; position:absolute; top:14px; bottom:14px; left:50%; border-left:1px dashed var(--line); }
.sprig{ position:relative; z-index:1; width:30px; height:30px; background:var(--panel); }

/* Larger butterfly heading on page tops (Our Story, About Us, Products, Ask Us) */
.page-eyebrow{ gap:14px; margin-bottom:16px; }
.page-eyebrow .eyebrow{ font-size:1.15rem; letter-spacing:2.5px; }
.page-eyebrow .bfly{ width:54px; opacity:.9; }