/* ============================================================
   Doug's Seafood — Homepage & feature sections
   ============================================================ */

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:min(92svh,860px);
  display:flex;align-items:flex-end;
  background:var(--navy-deep);overflow:hidden;
}
.hero-media{position:absolute;inset:0;will-change:transform}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(8,28,46,.34) 0%,rgba(8,28,46,.18) 40%,rgba(8,28,46,.86) 86%,rgba(8,28,46,.96) 100%);
}
.hero-inner{position:relative;width:100%;padding-block:clamp(110px,16vw,170px) clamp(40px,6vw,64px)}
.hero .pill{margin-bottom:22px}
.hero-script{
  display:block;font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(20px,2.6vw,28px);color:var(--red-bright);margin-bottom:14px;letter-spacing:.01em;
}
.hero h1{
  font-family:var(--display);font-weight:800;color:var(--cream);
  font-size:clamp(38px,6.2vw,68px);line-height:1.06;letter-spacing:-.015em;max-width:820px;
}
.hero .lead{color:var(--cream-70);max-width:580px;margin-top:20px;font-size:clamp(16.5px,1.7vw,19px)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-trust{
  display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;margin-top:42px;
  padding-top:24px;border-top:1px solid rgba(251,247,239,.22);
}
.hero-trust .ht{display:flex;align-items:center;gap:10px;color:var(--cream);font-weight:700;font-size:14.5px}
.hero-trust .ht svg{color:#E8A11C}
.hero-trust .ht small{display:block;font-weight:600;font-size:12px;color:var(--cream-70);letter-spacing:.04em}

/* ---------- Marquee tide-line ---------- */
.tide{background:var(--red);color:#fff;overflow:hidden;padding-block:13px;white-space:nowrap}
.tide-track{display:inline-flex;gap:0;animation:tide 30s linear infinite;will-change:transform}
.tide span{display:inline-flex;align-items:center;gap:14px;padding-inline:22px;font-weight:700;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
.tide svg{width:13px;height:13px;opacity:.75}
@keyframes tide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tide-track{animation:none}}

/* ---------- Fish market band ---------- */
.market-band{position:relative;background:var(--navy);overflow:hidden}
.market-band .mb-media{position:absolute;inset:0}
.market-band .mb-media img{width:100%;height:100%;object-fit:cover;opacity:.2}
.market-band .mb-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,42,64,.96) 38%,rgba(14,42,64,.62))}
.market-band .container{position:relative}
.season-card{
  background:var(--cream);border-radius:var(--radius-lg);padding:28px 28px 30px;
  box-shadow:var(--shadow);max-width:430px;
}
.season-card h3{display:flex;align-items:center;gap:10px;font-size:20px;color:var(--navy);margin-bottom:14px}
.season-card h3 svg{color:var(--red)}
.season-card .row{display:flex;justify-content:space-between;gap:14px;padding-block:10px;border-bottom:1px dashed var(--line);font-size:15px}
.season-card .row:last-of-type{border-bottom:0}
.season-card .row b{color:var(--navy)}
.season-card .row span{font-weight:700;color:var(--red);text-align:right}
.season-card .fine{font-size:13px;color:var(--muted);margin-top:12px;font-style:italic}

/* ---------- Order online options ---------- */
.order-grid{display:grid;gap:20px;grid-template-columns:1fr;max-width:980px;margin-inline:auto}
@media(min-width:820px){.order-grid{grid-template-columns:1.25fr 1fr 1fr;align-items:stretch}}
.order-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px 28px;display:flex;flex-direction:column;gap:12px;text-align:center;align-items:center;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);position:relative;
}
.order-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.order-card.primary{border:2px solid var(--red);box-shadow:var(--shadow)}
.order-card .tag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--red);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 16px;border-radius:999px;white-space:nowrap;
}
.order-card .oi{width:58px;height:58px;border-radius:50%;background:var(--sand);color:var(--red);display:grid;place-items:center}
.order-card .oi svg{width:28px;height:28px}
.order-card h3{font-size:21px}
.order-card p{font-size:14.5px;color:var(--muted);flex:1}
.order-card .btn{width:100%}

/* ---------- Happy hour strip ---------- */
.hh{background:var(--sand)}
.hh-grid{display:grid;gap:26px;align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.hh-grid{grid-template-columns:1fr 1.2fr}}
.hh-clock{
  font-family:var(--display);font-weight:800;color:var(--navy);
  font-size:clamp(30px,4vw,44px);line-height:1.1;
}
.hh-clock em{display:block;font-style:italic;font-weight:600;font-size:.55em;color:var(--red);margin-top:8px}
.hh-items{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:560px){.hh-items{grid-template-columns:1fr 1fr;column-gap:40px}}

/* ---------- Gallery ribbon ---------- */
.gallery-row{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.gallery-row{grid-template-columns:repeat(4,1fr)}}
.gallery-row a{border-radius:var(--radius);overflow:hidden;display:block;aspect-ratio:1}
.gallery-row img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.gallery-row a:hover img{transform:scale(1.07)}

/* ---------- Heroes discount band ---------- */
.heroes-band{
  border:2px solid var(--red);border-radius:var(--radius-lg);
  background:var(--white);padding:clamp(26px,4vw,40px);
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
}
.heroes-band .hb-left{display:flex;gap:18px;align-items:center;min-width:min(100%,420px);flex:1}
.heroes-band .hb-icon{width:62px;height:62px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;flex:none}
.heroes-band .hb-icon svg{width:30px;height:30px}
.heroes-band h3{font-size:clamp(20px,2.4vw,26px)}
.heroes-band p{color:var(--muted);font-size:15px;margin-top:4px}
.heroes-band .pct{font-family:var(--display);font-weight:800;font-size:clamp(38px,5vw,56px);color:var(--red);line-height:1}

/* ---------- QA mode (force-reveal for screenshots) ---------- */
body.qa [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
body.qa .faq-a{max-height:none!important}