/* ================================
   WINDSOR BUTLER — LUXURY STYLES
   ================================ */

/* Brand palette & measures */
:root{
  --navy: #001B36;
  --navy-2: #001528;
  --gold: #C2A86E;
  --ivory: #F6F5F2;

  --measure: min(92vw, 760px);   /* paragraph width */
  --heading: min(92vw, 680px);   /* title width */
}

/* Base */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--navy);
  color:var(--ivory);
  font: 16px/1.65 "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
}
img,svg{max-width:100%; height:auto; display:block}

/* Type */
h1,h2,h3{
  font-family: "Cormorant Garamond", serif;
  font-weight:600;
  color:var(--gold);
  letter-spacing:.02em;
  font-kerning:normal;
  font-feature-settings:"kern"1,"liga"1,"dlig"1;
  margin:0 0 .6em;
}
p{margin:0 0 1em}

/* Links */
a{color:#D5C69C; text-decoration:none; transition:opacity .25s}
a:hover{opacity:.85; text-decoration:underline}

/* Accessibility skip link */
.skip{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  position:static;
  width:auto; height:auto;
  padding:8px 16px;
  background:#000; color:#fff;
  z-index:999;
}

/* ===== Layout primitives ===== */
.container{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.center-narrow{ max-width: var(--measure); margin: 0 auto; text-align:center; }
.center-title{ max-width: var(--heading); margin: 0 auto .8em; text-align:center; text-wrap: balance; }

/* ===== Hero ===== */
.hero{
  background: radial-gradient(ellipse at center, var(--navy-2) 0%, var(--navy) 100%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  min-height: 92vh;
  display: grid;
  place-items: center;
  padding: 100px 20px 90px;
  text-align:center;
}
.hero .crest{
  width: clamp(200px, 28vw, 260px);
  margin: 0 auto 18px;
  color: var(--gold); /* external SVG uses currentColor */
  filter: drop-shadow(0 0 8px rgba(0,0,0,.25));
}

.hero h1{
  max-width: var(--heading);
  margin: 0 auto 6px;
  text-wrap: balance;
  font-size: clamp(30px, 4vw, 40px);
}

.hero-subtitle{
  max-width: var(--heading);
  margin: 0 auto 10px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-tagline{
  max-width: var(--heading);
  margin: 0 auto 14px;
  opacity:.96;
  font-size: clamp(15px,1.6vw,18px);
  text-wrap: balance;
}

.hero-pillars{
  max-width: var(--heading);
  margin: 0 auto;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

/* ===== Sections ===== */
.section{
  padding: 72px 20px 80px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.section:first-of-type{ border-top: none }
.section h2{
  max-width: var(--heading);
  margin:0 auto 22px;
  text-align:center;
  text-wrap:balance;
}
.section p{
  max-width: var(--measure);
  margin:0 auto 16px;
  text-align:center;
  font-size: clamp(15px,1.4vw,18px);
}

/* ===== Lists for visit / families ===== */
.visit-list,
.tag-list{
  list-style:none;
  padding:0;
  margin: 10px auto 24px;
  max-width: var(--measure);
}
.visit-list li,
.tag-list li{
  position:relative;
  padding-left: 20px;
  margin-bottom: 8px;
  text-align:left;
  font-size: clamp(14px,1.3vw,17px);
}
.visit-list li::before,
.tag-list li::before{
  content:"\2022";
  position:absolute;
  left:4px;
  top:0;
  color:var(--gold);
}

/* ===== Retainers (cards) ===== */
.retainers-grid{
  max-width: 960px;
  margin: 28px auto 10px;
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  justify-content:center;
}
.retainer-card{
  flex: 1 1 260px;
  max-width:320px;
  padding: 24px 22px;
  border:1px solid rgba(194,168,110,.34);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  text-align:left;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.retainer-card:hover{
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: 0 10px 26px rgba(0,0,0,.38);
}
.retainer-card h3{
  margin:0 0 10px;
  font-size: clamp(18px,2vw,22px);
}
.retainer-card p{
  margin:0 0 8px;
  text-align:left;
  font-size: clamp(14px,1.3vw,17px);
}
.retainer-price{
  color: var(--gold);
  font-weight:500;
}
.retainer-meta{
  opacity:.86;
  font-size: clamp(13px,1.2vw,15px);
}
.retainer-note{
  max-width: var(--measure);
  margin: 24px auto 0;
  font-size: clamp(13px,1.2vw,15px);
  opacity:.9;
  text-align:center;
}

/* ===== Founders / Contact ===== */
.founders p,
.contact p{
  font-size: clamp(15px,1.4vw,18px);
}

.contact .invitation{
  max-width: 700px;
  margin: 0 auto 18px;
  padding: 24px 20px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(194,168,110,.35);
  border-radius: 10px;
  text-align:center;
}

.contact small,
.contact p,
.contact .invitation {
  display: block;
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

/* ===== Footer ===== */
#wb-footer{
  text-align:center;
  padding: 56px 20px 40px;
  border-top: 1px solid rgba(255,255,255,.06);
}
#wb-footer .crest{
  width: clamp(140px, 22vw, 180px);
  margin: 0 auto 12px;
  color: var(--gold);
  filter: drop-shadow(0 0 4px rgba(255,255,255,.10));
  opacity:.95;
}
#wb-footer p{
  max-width: var(--heading);
  margin: 0 auto;
  color: var(--gold);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(13px,1.2vw,16px);
  letter-spacing:.03em;
  line-height:1.2;
}

/* ===== Motion (kept gentle) ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)}}
.hero h1,
.hero-subtitle,
.hero-tagline,
.hero-pillars,
.retainer-card{
  animation: fadeUp .8s ease both;
}
.retainer-card:nth-child(2){animation-delay:.1s}
.retainer-card:nth-child(3){animation-delay:.2s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ===== Responsive ===== */
@media (max-width: 600px){
  .hero{ padding: 90px 16px 70px }
  .section{ padding: 60px 16px 70px }
}