:root{
  --red:#d22630;
  --silver:#a7adb3;
  --silver-dark:#7e8790;
  --ink:#111418;
  --ink-2:#181d23;
  --line:#e7eaee;
  --shadow:0 16px 44px rgba(12,18,24,0.08);
  --shadow-hover:0 22px 54px rgba(12,18,24,0.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter", Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:#fbfbfc;
  line-height:1.6;
}
img,video{display:block;max-width:100%}
.container{width:min(1220px, calc(100% - 44px)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
.nav-wrap{
  min-height:84px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.brand-logo{height:56px; width:auto}
.nav{display:flex; gap:24px; align-items:center}
.nav a, .site-footer p{
  text-decoration:none; color:var(--silver-dark); font-size:13px; font-weight:600;
}
.nav a:hover{color:var(--red)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:46px; padding:0 22px;
  border-radius:999px; text-decoration:none;
  font-size:14px; font-weight:600; transition:all .25s ease;
}
.btn-primary{
  background:var(--red); color:#fff;
  box-shadow:0 12px 28px rgba(210,38,48,0.20);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 16px 32px rgba(210,38,48,0.26)}
.btn-secondary{
  background:rgba(255,255,255,0.92); color:var(--ink);
  border:1px solid rgba(255,255,255,0.68);
}
.btn-secondary:hover{background:#fff}
.hero{
  position:relative; min-height:88vh; overflow:hidden; background:#0d1014;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0.54) 34%, rgba(0,0,0,0.24) 64%, rgba(0,0,0,0.16) 100%),
    url('assets/hero-ball.jpg') center center/cover no-repeat;
  transform:scale(1.03);
}
.hero-vignette{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 70% 38%, rgba(210,38,48,0.09), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));
}
.grass-strip{
  position:absolute; left:0; right:0; bottom:0; height:130px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.02)),
    repeating-linear-gradient(90deg, rgba(66,122,48,0.18) 0px, rgba(66,122,48,0.18) 4px, rgba(93,145,59,0.20) 4px, rgba(93,145,59,0.20) 8px);
}
.hero-grid{
  position:relative; z-index:2; min-height:88vh;
  display:grid; align-items:center;
}
.hero-copy{
  max-width:620px; color:#fff; padding:90px 0;
}
.eyebrow{
  display:inline-block; margin-bottom:12px;
  font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; font-weight:700;
  color:var(--silver);
}
.eyebrow.light{color:#d4d9de}
h1,h2,h3{
  margin:0; line-height:1.04; letter-spacing:-0.04em;
}
h1{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(54px, 7vw, 84px);
  font-weight:600; max-width:10.5ch;
}
h2{
  font-family:"Cormorant Garamond", Georgia, serif;
  font-size:clamp(36px, 4.8vw, 56px);
  font-weight:600; max-width:13ch;
}
h3{font-size:22px; font-weight:700}
.hero-copy .lead, .hero-copy p{
  color:rgba(255,255,255,0.86);
  max-width:40rem; margin:18px 0 0; font-size:16px;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:30px;
}
.section{padding:92px 0}
.statement{padding-top:34px}
.statement-grid, .split-grid, .trade-grid{
  display:grid; grid-template-columns:.92fr 1.08fr; gap:36px; align-items:center;
}
.section-heading{max-width:780px}
.section-heading p, .statement p, .engraving-copy p, .product-copy p, .gift-overlay p, .trade-card p, .video-caption span, .contact-card p, .split-grid p{
  color:var(--silver-dark); font-size:15px;
}
.section-heading p{margin-top:12px}
.product-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:24px; margin-top:34px;
}
.product-card{
  background:#fff; border:1px solid var(--line);
  border-radius:28px; padding:18px;
  box-shadow:var(--shadow);
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.product-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hover);
  border-color:#dde2e7;
}
.product-media{
  max-width:235px; margin:0 auto;
}
.product-media img{
  width:100%; aspect-ratio:1 / .86;
  object-fit:cover; background:#f3f4f6;
  border-radius:16px;
}
.product-copy{
  text-align:center; padding:16px 8px 4px;
}
.product-copy p{margin:8px 0 0}
.engraving-section{
  background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color:#fff;
}
.engraving-grid{
  display:grid; grid-template-columns:1fr .88fr; gap:42px; align-items:center;
}
.tag-list{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;
}
.tag-list span{
  padding:9px 14px; border-radius:999px; font-size:13px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.05); color:#edf1f4;
}
.engraving-video-card{
  justify-self:end; width:min(100%, 520px);
}
.video-shell{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:28px; padding:16px;
  box-shadow:var(--shadow);
}
.video-shell video{
  width:100%;
  aspect-ratio:16 / 10;
  object-fit:cover;
  border-radius:18px;
  background:#000;
}
.video-caption{
  padding:14px 6px 0;
  display:flex; flex-direction:column; gap:5px;
}
.video-caption strong{
  color:#fff; font-size:15px; letter-spacing:.01em;
}
.spotlight{
  background:linear-gradient(180deg, #fff 0%, #f5f7f9 100%);
}
.spotlight-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:30px; align-items:center;
}
.spotlight-media{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.spotlight-media img{
  width:100%; aspect-ratio:1 / 1;
  object-fit:cover; border-radius:24px;
  box-shadow:var(--shadow);
}
.gifts-section{
  background:linear-gradient(180deg, #f8f9fb 0%, #fff 100%);
}
.gift-grid{
  margin-top:34px;
  display:grid; grid-template-columns:1.2fr .8fr .8fr;
  gap:22px;
}
.gift-card{
  position:relative; min-height:340px;
  overflow:hidden; border-radius:30px;
  box-shadow:var(--shadow);
  transition:transform .28s ease, box-shadow .28s ease;
}
.gift-card:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-hover);
}
.gift-card img{
  width:100%; height:100%; object-fit:cover;
}
.gift-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,13,18,0.06), rgba(9,13,18,0.58));
}
.gift-overlay{
  position:absolute; left:20px; right:20px; bottom:18px;
  z-index:2; color:#fff;
}
.gift-overlay p{margin:8px 0 0; color:rgba(255,255,255,0.84)}
.split-feature{
  background:#fff;
}
.split-media{
  border-radius:30px; overflow:hidden; box-shadow:var(--shadow);
}
.split-media img{
  width:100%; aspect-ratio:1 / .92; object-fit:cover;
}
.trade-cards{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
}
.trade-card{
  background:#fff; border:1px solid var(--line);
  border-radius:24px; padding:24px;
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.trade-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow-hover);
}
.trade-card h3{margin-bottom:6px}
.contact-section{
  background:#f7f8fa;
}
.contact-card{
  background:linear-gradient(135deg, #1a2027 0%, #11161b 100%);
  color:#fff; border-radius:36px; padding:46px;
  box-shadow:var(--shadow);
}
.contact-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:22px;
}
.contact-box{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:24px; padding:22px;
}
.contact-box p{margin:6px 0 0}
.site-footer{
  border-top:1px solid var(--line);
  background:#fff; padding:22px 0;
}
.footer-wrap{
  display:flex; justify-content:space-between; gap:20px;
}
.fade-up{
  opacity:0; transform:translateY(18px);
  animation:rise .8s ease forwards;
}
.delay-1{animation-delay:.12s}
.delay-2{animation-delay:.24s}
.delay-3{animation-delay:.36s}
@keyframes rise{
  to{opacity:1; transform:translateY(0)}
}
@media (max-width:1100px){
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .statement-grid, .engraving-grid, .spotlight-grid, .gift-grid, .split-grid, .trade-grid{grid-template-columns:1fr}
  .engraving-video-card{justify-self:start; width:100%}
}
@media (max-width:820px){
  .nav{display:none}
  .brand-logo{height:50px}
  .trade-cards, .product-grid, .spotlight-media, .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .container{width:min(100% - 24px, 1220px)}
  .section{padding:72px 0}
  .btn{width:100%}
  .hero-actions{flex-direction:column}
  .contact-card{padding:30px 22px}
}
