<!-- FILE: styles.css -->
/* Shared styles for all pages */
:root{
--baby-blue:#b3d9ff; /* light */
--sky:#99ccff; /* baby blue */
--ink:#003366; /* deep text */
--ink-2:#004080;
--bg:#f8fbff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0; font-family:'Montserrat',system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
color:#222; background:linear-gradient(180deg,var(--baby-blue) 0%, var(--bg) 100%);
}
.container{max-width:1100px;margin:0 auto;padding:2rem}
.header{
position:sticky; top:0; z-index:50;
background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
border-bottom-left-radius:24px; border-bottom-right-radius:24px;
box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.header-inner{display:flex;align-items:center;gap:1rem;justify-content:space-between;padding:1rem 1.25rem}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{height:48px;width:auto}
.nav{display:flex;gap:.25rem;flex-wrap:wrap}
.nav a{color:var(--ink);text-decoration:none;padding:.7rem 1rem;border-radius:12px;font-weight:700;transition:transform .2s ease, background-color .2s ease, color .2s ease}
/* Higher-contrast hover/focus styles */
.nav a:hover,.nav a:focus-visible{background:#004c99;color:#fff;transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.18);outline:none}
/* Active page pill */
.nav a[aria-current="page"], .nav a.active{background:#003a80;color:#fff}
.hero{height:60vh;min-height:380px;margin:1.25rem auto 0;border-radius:24px;overflow:hidden;display:grid;place-items:center;position:relative}
.hero::before{content:"";position:absolute;inset:0;background:url('https://github.com/LibertyCountyFamilyJewels/familyjewelswebpage/blob/main/65d8d0f9-ff1d-454a-89ac-3c471f5ea620.jpg?raw=true') center/cover no-repeat;filter:contrast(1.05) saturate(1.05)}
/* Darker overlay for readability */
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,34,68,.55),rgba(0,34,68,.45))}
/* Switch to frosted white pill with dark text so it's always legible */
.hero h1{position:relative;color:#fff;font-family:'Playfair Display',serif;font-size:clamp(2rem,4vw,3.5rem);padding:1rem 2rem;border-radius:18px;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card{background:rgba(255,255,255,.94);backdrop-filter:blur(4px);border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.08);padding:2rem;margin:1.25rem 0;transition:transform .2s ease}
.card:hover{transform:translateY(-6px)}
.catalog-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.product{border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.08);transition:transform .2s ease, box-shadow .2s ease}
.product:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 12px 28px rgba(0,0,0,.18)}
.product img{width:100%;height:220px;object-fit:cover}
.product h3{margin:.75rem;font-family:'Playfair Display',serif;color:var(--ink-2)}
.btn{background:var(--sky);color:var(--ink);border:none;padding:.8rem 1.2rem;border-radius:12px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.12);cursor:pointer;transition:transform .2s ease, background-color .2s ease, color .2s ease}
.btn:hover,.btn:focus-visible{background:#004c99;color:#fff;transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.2);outline:none}
.footer{background:rgba(230,242,255,.95);border-top:2px solid var(--sky);border-top-left-radius:20px;border-top-right-radius:20px;box-shadow:0 -2px 12px rgba(0,0,0,.06)}
.footer-inner{padding:1.25rem;color:var(--ink);text-align:center}
/* utility */
.hide{display:none}

.story-image img {
  width: 100%;
  max-height: 400px;   /* keeps them uniform */
  object-fit: cover;
  border-radius: 10px;
}

/* Team grid */
.team-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.team-card{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.08);transition:transform .2s ease, box-shadow .2s ease;text-align:center}
.team-card:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.team-photo img{width:100%;height:260px;object-fit:cover;display:block}
.team-body{padding:1rem 1.25rem}
.team-body h3{margin:.25rem 0;font-family:'Playfair Display',serif;color:var(--ink)}
.role{color:var(--ink-2);font-weight:700;margin-bottom:.5rem}
.chips{margin-top:.5rem}
.chip{display:inline-block;background:var(--baby-blue);color:var(--ink);padding:.3rem .6rem;border-radius:999px;font-size:.85rem;margin:.2rem}