/* ========== Sean Blowers Photography — Global CSS ========== */
/* Brand tokens */
:root{
  --sb-green: #00BF63;
  --sb-black: #1A1A1A;
  --sb-white: #F5F5F5;
  --sb-magenta: #FF4DA2;

  --radius-xl: 16px;
  --radius-lg: 12px;
  --radius-md: 10px;

  --container: 1200px;
  --shadow-1: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-2: 0 16px 40px rgba(0,0,0,0.12);
}

/* CSS Reset (minimal) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--sb-black);
  background: var(--sb-white);
  font-family: "HK Grotesk", "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height: 1.6;
  font-size: 16px;
}

/* Typography */
h1,h2,h3,h4{ font-family: "Open Sans", "HK Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; margin: 0 0 .5rem; line-height: 1.2; }
h1{ font-weight:800; font-size: clamp(2.2rem, 2.4rem + 1vw, 3.2rem); letter-spacing: -0.02em;}
h2{ font-weight:800; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);}
h3{ font-weight:700; font-size: 1.25rem; }
p{ margin: 0 0 1rem; }

/* Utilities */
.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .9rem 1.2rem; border-radius: var(--radius-lg);
  font-weight:700; text-decoration:none; transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: var(--shadow-1);
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--sb-green); color: #fff; }
.btn-primary:hover{ filter: brightness(0.98); box-shadow: var(--shadow-2); }
.btn-outline{ border:2px solid var(--sb-black); color: var(--sb-black); background: transparent; }
.btn-outline:hover{ background: #fff; box-shadow: var(--shadow-1); }

.badge{ display:inline-block; font-weight:700; text-transform:uppercase; letter-spacing:.08em; background: var(--sb-magenta); color:#fff; padding:.35rem .6rem; border-radius:999px; font-size:.72rem; }

/* Header */
.site-header{
  position: sticky; top:0; z-index:50;
  background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
.navbar{ display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; color: var(--sb-black); }
.brand img{ height:36px; width:auto; }
.brand .name{ font-weight:800; font-size:1.25rem; letter-spacing: .2px; }
.nav{ display:flex; align-items:center; gap:1rem; }
.nav a{ text-decoration:none; color: var(--sb-black); font-weight:700; padding:.5rem .6rem; border-radius:10px; }
.nav a:hover{ background: rgba(0,0,0,0.05); }
.mobile-only{ display:none; }

/* Hero */
.hero{
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.2)), url('../img/SBP05761.jpg') center/cover no-repeat, var(--sb-green);
  color: #fff;
  padding: clamp(72px, 12vh, 160px) 0;
  text-align:center;
}
.hero .sub{ opacity:.95; max-width: 820px; margin: .5rem auto 1.5rem; }
.actions{ display:flex; align-items:center; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* Services */
.section{ padding: 64px 0; }
.section .eyebrow{ color: var(--sb-green); font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.6rem; }
.grid{
  display:grid; gap: 18px; grid-template-columns: repeat(12, 1fr);
}
.card{
  grid-column: span 6;
  background:#fff; border-radius: var(--radius-xl); padding: 22px; box-shadow: var(--shadow-1);
}
.card h3{ margin-bottom:.25rem; }
.card p{ color:#333; }

/* Portfolio Promo */
.promo{
  background: #fff; border: 2px dashed var(--sb-green);
  padding: 22px; border-radius: var(--radius-xl);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.promo img{ height:48px; width:auto; }

/* Testimonial */
.quote{
  background: var(--sb-black); color: #fff; border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-2);
}

/* Footer */
.footer{ background:#0c0c0c; color:#d9d9d9; padding: 40px 0; }
.footer a{ color:#fff; text-decoration:none; }
.footer small{ color:#aaa; }

/* Responsive */
@media (max-width: 900px){
  .card{ grid-column: span 12; }
  .nav{ display:none; }
  .mobile-only{ display:inline-flex; }
}



/* Shared card style */
.booking-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 28px;
  margin-bottom: 2rem;
}

/* Make form wrapper a card */
#crmWebToEntityForm {
  max-width: 100% !important;
  margin: 0 auto !important;
  width: 100% !important;
}
#crmWebToEntityForm.booking-card {
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  border-radius: 16px;
}

/* Info section as card */
.booking-info {
  width: 100%;
  padding: 20px;
}
.booking-info .card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  padding: 28px;
}