:root{
  --room:#1A2226;        /* dim charcoal-blue room */
  --room-deep:#11181B;
  --glow:#9ED0B5;        /* pale tank light */
  --amber:#E8A24C;       /* incandescent CTA */
  --amber-deep:#C9842F;
  --paper:#F7F1E6;       /* warm cream */
  --paper-card:#FFFDF7;
  --ink:#2B2622;         /* warm dark text */
  --ink-soft:#5A524A;
  --terracotta:#B65C32;  /* gravel accent */
  --line:#E5DBC9;
  --wrap:62rem;          /* content width — widened on desktop (see bottom of file) */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}

body{
  font-family:'Karla',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:1.0625rem;
}

h1,h2,h3{font-family:'Fraunces',serif;line-height:1.15}

a{color:var(--terracotta)}
a:focus-visible,button:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute;left:-999px;top:0;z-index:100;
  background:var(--amber);color:var(--room-deep);
  padding:.6rem 1rem;font-weight:700;text-decoration:none;
}
.skip-link:focus{left:.5rem;top:.5rem}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.25rem}

/* ---------- Header / nav ---------- */
header.top{
  background:var(--room);
}
.nav{
  display:flex;align-items:center;gap:1rem;
  padding:.9rem 0;
  flex-wrap:wrap;
}
.nav .brand{
  font-family:'Fraunces',serif;font-weight:700;font-size:1.1rem;
  color:var(--paper);text-decoration:none;margin-right:auto;
}
.nav a.navlink{
  color:#D8D2C6;text-decoration:none;font-weight:500;font-size:.95rem;
  padding:.25rem .1rem;
}
.nav a.navlink:hover{color:var(--amber)}
.lang-toggle{
  font:inherit;font-weight:700;font-size:.9rem;
  background:transparent;color:var(--glow);
  border:1px solid rgba(158,208,181,.45);
  border-radius:999px;padding:.3rem .85rem;cursor:pointer;
}
.lang-toggle:hover{background:rgba(158,208,181,.12)}

/* ---------- Hero: dim room, one glowing tank, parallax depth ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(60rem 32rem at 18% 115%, rgba(158,208,181,.34), transparent 62%),
    radial-gradient(38rem 22rem at 88% -20%, rgba(232,162,76,.13), transparent 60%),
    linear-gradient(var(--room), var(--room-deep));
  color:var(--paper);
  padding:5rem 0 7rem;
  min-height:92vh;
  display:flex;align-items:center;
}
.hero .wrap{position:relative;z-index:2;width:100%}
[data-depth]{will-change:transform}

/* parallax layers, far → near; generous overscan so motion never reveals an edge */
.layer{position:absolute;inset:-35% 0;z-index:1;pointer-events:none}
.layer-rays{
  background:
    linear-gradient(105deg, transparent 36%, rgba(158,208,181,.08) 42%, transparent 52%),
    linear-gradient(100deg, transparent 55%, rgba(158,208,181,.05) 61%, transparent 72%),
    linear-gradient(112deg, transparent 10%, rgba(232,162,76,.06) 15%, transparent 25%);
}
.layer-fish svg{
  position:absolute;fill:rgba(158,208,181,.10);
}
.layer-fish .f1{width:11rem;top:22%;right:8%}
.layer-fish .f2{width:6rem;top:58%;right:24%;fill:rgba(232,162,76,.09);transform:scaleX(-1)}
.layer-fish .f3{width:4.5rem;top:14%;left:6%}
.layer-bed{
  position:absolute;left:-2%;right:-2%;bottom:-2.5rem;z-index:3;
  width:104%;height:9rem;pointer-events:none;
  fill:#0C1316;
}
@media (prefers-reduced-motion: reduce){
  .layer-fish{display:none}
}
.hero h1{
  font-size:clamp(2.4rem,6vw,4rem);
  font-weight:700;color:#FBF7EE;
  letter-spacing:-.01em;
}
.hero .tagline{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(1.2rem,2.6vw,1.5rem);
  color:var(--glow);margin-top:.7rem;
}
.hero .sub{
  margin-top:1rem;max-width:34rem;color:#CFC9BD;
}
.status{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:1.4rem;
  font-weight:700;font-size:.95rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;padding:.4rem 1rem;
  min-height:2.2rem;
}
.status[hidden]{display:none}
.status .dot{
  width:.6rem;height:.6rem;border-radius:50%;flex:none;
  background:#9aa;
}
.status.is-open .dot{background:#7FD89B}
.status.is-closed .dot{background:#E07856}
.status.is-call .dot{background:var(--amber)}
.status a{color:var(--amber)}

.cta-row{display:flex;gap:.9rem;margin-top:1.8rem;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  border-radius:.6rem;padding:.95rem 1.7rem;font-size:1.05rem;
  border:2px solid transparent;
}
.btn-call{background:var(--amber);color:var(--room-deep)}
.btn-call:hover{background:#F2B264}
.btn-dir{border-color:rgba(158,208,181,.5);color:var(--glow)}
.btn-dir:hover{background:rgba(158,208,181,.1)}

/* ambient bubbles — JS adds them only when motion is allowed */
.bubbles{position:absolute;inset:0;z-index:1;pointer-events:none}
.bubble{
  position:absolute;bottom:-3rem;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(158,208,181,.12) 60%);
  opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translateY(0);opacity:0}
  12%{opacity:.5}
  85%{opacity:.35}
  100%{transform:translateY(-110vh);opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .bubbles{display:none}
}

/* ---------- Sections ---------- */
section{padding:4rem 0}
.kicker{
  font-size:.85rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--terracotta);
}
h2{font-size:clamp(1.7rem,4vw,2.3rem);margin:.35rem 0 1.6rem;font-weight:600}

/* ---------- Story band: "more than an aquarium store" ---------- */
.story{
  background:
    radial-gradient(44rem 24rem at 82% 120%, rgba(158,208,181,.16), transparent 60%),
    linear-gradient(var(--room), var(--room-deep));
  color:var(--paper);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(0,0,0,.25);
}
.story .kicker{color:var(--glow)}
.story .lead{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.3;
  max-width:44rem;margin:.4rem 0 1.1rem;color:#FBF7EE;
}
.story .lead em{color:var(--glow);font-style:normal}
.story p.body{max-width:42rem;color:#CFC9BD;font-size:1.05rem}
.critters{
  display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:2rem;
  list-style:none;padding:0;
}
.critters li{
  display:flex;align-items:center;gap:.55rem;
  font-weight:700;font-size:.95rem;color:#E4DECF;
}
.critters svg{
  width:1.7rem;height:1.7rem;flex:none;
  stroke:var(--glow);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* What we carry */
.cards{
  display:grid;gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.card{
  background:var(--paper-card);
  border:1px solid var(--line);
  border-radius:.8rem;
  padding:1.5rem 1.4rem;
}
.card svg{width:2.6rem;height:2.6rem;stroke:var(--terracotta);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.2rem;font-weight:600;margin:.8rem 0 .45rem}
.card p{font-size:.98rem;color:var(--ink-soft)}
/* gentle lift on hover-capable (desktop) pointers; touch devices skip it */
@media (hover:hover){
  .card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
  .card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(20,28,32,.12);border-color:#D9CDB6}
}

/* Why people come back */
.why{background:#EFE7D7;}
.why-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.why-item h3{font-size:1.15rem;font-weight:600;margin-bottom:.4rem;color:var(--ink)}
.why-item p{font-size:.98rem;color:var(--ink-soft)}
blockquote{
  margin-top:2.2rem;
  border-left:4px solid var(--amber);
  padding:.4rem 0 .4rem 1.2rem;
  font-family:'Fraunces',serif;font-size:1.25rem;font-weight:500;
  max-width:38rem;
}
blockquote footer{
  font-family:'Karla',sans-serif;font-size:.9rem;font-weight:400;
  color:var(--ink-soft);margin-top:.5rem;
}

/* ---------- Gallery carousel ---------- */
.gallery{background:#EFE7D7}
.carousel{
  position:relative;margin-top:1.8rem;
  --frame:#0C1316;
}
.carousel:focus{outline:none}
.carousel-viewport{
  overflow:hidden;border-radius:1rem;
  background:var(--frame);
  box-shadow:0 14px 38px rgba(20,28,32,.22);
  touch-action:pan-y;
}
.carousel-track{
  display:flex;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.slide{
  flex:0 0 100%;
  position:relative;
  aspect-ratio:16/10;
  list-style:none;
}
@media (max-width:34rem){.slide{aspect-ratio:4/3}}
/* illustrated placeholder art — swap each .slide-art for a real <img> later (see HTML comment) */
.slide-art{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
}
.slide-art svg{width:min(58%,17rem);height:auto;display:block}
img.slide-art{width:100%;height:100%;object-fit:cover}
.slide-art svg .ink{fill:rgba(255,255,255,.92)}
.slide-art svg .ink-soft{fill:rgba(255,255,255,.5)}
.slide-art svg .line{fill:none;stroke:rgba(255,255,255,.85);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.art-aquarium{background:radial-gradient(60% 80% at 30% 110%,rgba(158,208,181,.5),transparent 60%),linear-gradient(160deg,#16323a,#0c1c22)}
.art-fish{background:radial-gradient(70% 90% at 70% 0%,rgba(232,162,76,.35),transparent 60%),linear-gradient(160deg,#1d2b46,#101a2c)}
.art-reptile{background:radial-gradient(60% 80% at 20% 0%,rgba(182,92,50,.4),transparent 62%),linear-gradient(160deg,#2a3a22,#15200f)}
.art-bird{background:radial-gradient(70% 80% at 80% 10%,rgba(232,162,76,.4),transparent 60%),linear-gradient(160deg,#3a2a3e,#1d1322)}
.art-hedgehog{background:radial-gradient(60% 80% at 30% 0%,rgba(201,132,47,.4),transparent 62%),linear-gradient(160deg,#3a2e22,#1f1812)}
.art-hamster{background:radial-gradient(60% 90% at 70% 110%,rgba(158,208,181,.4),transparent 60%),linear-gradient(160deg,#27343a,#13202a)}
.slide-cap{
  position:absolute;left:0;right:0;bottom:0;
  margin:0;padding:2.4rem 1.4rem 1.1rem;
  color:#FBF7EE;font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.05rem,2.4vw,1.4rem);
  background:linear-gradient(transparent,rgba(8,14,16,.78));
}
/* arrows */
.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:2.9rem;height:2.9rem;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(12,19,22,.55);color:#fff;
  font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(3px);
}
.car-btn:hover{background:rgba(12,19,22,.8)}
.car-btn.prev{left:.7rem}
.car-btn.next{right:.7rem}
/* dots */
.car-dots{display:flex;gap:.5rem;justify-content:center;margin-top:1rem}
.car-dot{
  width:.62rem;height:.62rem;border-radius:50%;cursor:pointer;padding:0;
  border:none;background:#C9BBA0;transition:transform .2s,background .2s;
}
.car-dot[aria-current="true"]{background:var(--terracotta);transform:scale(1.3)}
@media (prefers-reduced-motion: reduce){
  .carousel-track{transition:none}
  .car-dot{transition:none}
}

/* photo accents littered into other sections */
.photo-accent{
  border-radius:.9rem;display:block;
  box-shadow:0 12px 30px rgba(20,28,32,.28);
}
.story-photo{
  float:right;width:min(40%,19rem);aspect-ratio:4/3;object-fit:cover;
  margin:.2rem 0 1rem 1.7rem;border:3px solid rgba(255,255,255,.14);
}
.why-photo{
  float:left;width:min(38%,15rem);aspect-ratio:3/4;object-fit:cover;
  margin:.2rem 1.7rem 1rem 0;border:3px solid #fff;
}
@media (max-width:40rem){
  .story-photo,.why-photo{float:none;width:100%;aspect-ratio:16/10;margin:0 0 1.4rem}
}

/* Visit */
.visit-grid{
  display:grid;gap:2.2rem;
  grid-template-columns:1fr 1.2fr;
  align-items:start;
}
@media (max-width:46rem){.visit-grid{grid-template-columns:1fr}}
.hours{width:100%;border-collapse:collapse;font-size:1rem}
.hours caption{text-align:left;font-weight:700;margin-bottom:.5rem;font-size:1.05rem}
.hours td{padding:.45rem .2rem;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right}
.hours tr.today td{font-weight:700;color:var(--terracotta)}
.hours .closed-day{color:var(--ink-soft)}
.hours .confirm{font-weight:400;font-size:.85em;white-space:nowrap}
.contact-lines{margin-top:1.6rem;font-style:normal;line-height:1.9}
.contact-lines a{font-weight:700}
.map-frame{
  border:0;width:100%;height:21rem;border-radius:.8rem;
  display:block;
  filter:saturate(.9);
}
.fb-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.8rem;font-weight:700;text-decoration:none}
.fb-link:hover{text-decoration:underline}
.fb-link svg{width:1.15rem;height:1.15rem;fill:currentColor}

/* Footer */
footer.site{
  background:var(--room-deep);color:#BDB7AB;
  padding:2.4rem 0 3rem;font-size:.95rem;
}
footer.site .nap{color:#E8E2D6;font-weight:500}
footer.site a{color:var(--glow)}
footer.site .credit{margin-top:1.1rem;font-size:.85rem;color:#8B867C}

/* Mobile sticky call bar — impossible to miss */
.callbar{display:none}
@media (max-width:45rem){
  .callbar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--amber);text-align:center;
    padding:.95rem 1rem calc(.95rem + env(safe-area-inset-bottom));
    font-weight:700;font-size:1.1rem;color:var(--room-deep);
    text-decoration:none;
    box-shadow:0 -4px 14px rgba(0,0,0,.25);
  }
  body{padding-bottom:4.2rem}
}

/* ============================================================
   Desktop polish — mobile-first above stays the baseline.
   Everything here is min-width gated, so phones are untouched.
   ============================================================ */

/* 6 product cards read best as a clean 3×2 once there's room for it,
   instead of the auto-fit grid drifting into a lopsided 4+2 on wide screens */
@media (min-width:62rem){
  .cards{grid-template-columns:repeat(3,1fr)}
}

/* Larger laptops/desktops: let the page breathe wider and taller */
@media (min-width:75rem){
  :root{--wrap:68rem}
  section{padding:5.25rem 0}
  .hero{padding:6rem 0 8rem}
  /* a touch more presence for the floated photo accents now that there's room */
  .story-photo{width:min(38%,21rem)}
  .why-photo{width:min(34%,16rem)}
}

/* Very wide monitors: a little extra width, but keep text columns sane
   (per-section max-widths on .lead/.body already cap line length) */
@media (min-width:100rem){
  :root{--wrap:72rem}
}