:root{--ink:#29251f;--muted:#716a61;--line:#eadfce;--accent:#8d3d4d;--accent2:#f3e4d8;--green:#416b52;--error:#a12626}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:linear-gradient(180deg,#f8e9dc 0,#fffaf3 300px);font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
header{padding:36px 18px 26px;text-align:center}header .eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;color:var(--accent);font-weight:750}
h1{margin:8px 0;font-size:clamp(2rem,6vw,3.2rem);line-height:1.1}header p{max-width:650px;margin:12px auto 0;color:var(--muted)}
main{width:min(100% - 28px,1000px);margin:0 auto 60px}.notice{background:#f0f8f0;border:1px solid #c9dfc9;border-radius:14px;padding:13px 16px;margin-bottom:18px;font-size:.93rem}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.tab{border:1px solid var(--line);background:white;padding:10px 15px;border-radius:999px;cursor:pointer;font:inherit;font-weight:700}.tab[aria-selected="true"]{background:var(--accent);color:white;border-color:var(--accent)}
.panel{background:white;border:1px solid var(--line);border-radius:18px;padding:clamp(16px,3vw,26px);box-shadow:0 8px 30px #55351a0a}.panel h2{margin:0 0 4px;font-size:1.55rem}.muted{color:var(--muted)}
.flow{margin:18px 0 24px;padding-left:23px}.flow li{padding:4px 0 4px 4px}.section-title{margin:26px 0 10px;font-size:1.1rem}
.idea-submit{margin-top:14px;padding:18px;border:1px solid var(--line);border-radius:15px;background:#fffdf9}.idea-submit h3{margin:0 0 6px}.idea-submit>p{margin-top:0;color:var(--muted)}
label{display:block;font-weight:700;margin:12px 0 5px;font-size:.93rem}input,select,textarea{width:100%;padding:11px 12px;border:1px solid #d9cbbb;border-radius:10px;font:inherit;background:#fff;color:var(--ink)}textarea{min-height:105px;resize:vertical}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:3px solid #d9a8af;outline-offset:2px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.full{grid-column:1/-1}
.btn{border:0;border-radius:10px;padding:11px 15px;font:inherit;font-weight:750;cursor:pointer}.btn:disabled{opacity:.65;cursor:wait}.primary{background:var(--accent);color:white}.secondary{background:var(--accent2);color:var(--ink)}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
#formMessage,#ideasMessage{margin:14px 0 0;font-weight:650;overflow-wrap:anywhere}#formMessage.success{color:var(--green)}#formMessage.error,#ideasMessage.error{color:var(--error)}
.privacy-note{font-size:.86rem;color:var(--muted);margin-top:12px}.ideas-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.idea-list{display:grid;gap:12px;margin-top:12px}.idea-card{border:1px solid var(--line);border-radius:13px;padding:14px;background:#fffdf9}.idea-top{display:flex;justify-content:space-between;gap:10px;align-items:start}.idea-card h4{margin:0;font-size:1.05rem;overflow-wrap:anywhere}.pill{font-size:.75rem;padding:3px 8px;border-radius:999px;background:var(--accent2);white-space:nowrap}.idea-card p{margin:8px 0;white-space:pre-wrap;overflow-wrap:anywhere}.idea-card small{color:var(--muted)}.idea-card a{color:var(--accent);overflow-wrap:anywhere}.empty{border:1px dashed #d8c7b4;padding:18px;border-radius:12px;color:var(--muted);text-align:center}
footer{text-align:center;padding:0 18px 32px;color:var(--muted);font-size:.86rem}@media(max-width:620px){.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.idea-top{align-items:start}}

/* Wedding countdown */
.countdown {
  width: min(100% - 28px, 680px);
  margin: 0 auto 26px;
  padding: 20px 16px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 8px 30px #55351a0a;
}
.countdown-label {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.countdown h2 {
  margin: 0 0 5px;
  font-size: clamp(1.25rem, 4vw, 1.8rem);
}
.countdown-date {
  margin: 0 0 16px;
  color: var(--muted);
}
.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  max-width: 480px;
  margin: 0 auto;
}
.countdown-unit {
  padding: 12px 5px;
  background: #fff8f1;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.countdown-number {
  display: block;
  color: var(--accent);
  font-size: clamp(1.45rem, 5vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.countdown-unit span:last-child {
  color: var(--muted);
  font-size: .75rem;
}
#countdownMessage {
  margin: 12px 0 0;
  font-weight: 700;
}
@media (max-width: 380px) {
  .countdown-grid { gap: 5px; }
  .countdown-unit { padding: 10px 2px; }
  .countdown-unit span:last-child { font-size: .68rem; }
}


/* Sagar quiz */
.quiz-card{margin:22px 0;padding:clamp(16px,3vw,26px);background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 8px 30px #55351a0a}
.quiz-card h2{margin:0 0 5px}.quiz-card .muted{margin-top:0}.quiz-progress{height:8px;background:#f3e4d8;border-radius:99px;overflow:hidden;margin:16px 0}.quiz-progress span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}.quiz-option{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:11px;padding:11px;margin:9px 0;cursor:pointer}.quiz-option:has(input:checked){border-color:var(--accent);background:#fff8f1}.quiz-option input{width:auto;margin-top:5px}.quiz-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}.quiz-result{padding:14px;border-radius:12px;background:#fff8f1;margin-top:14px}.quiz-result h3{margin:0 0 5px}.quiz-small{font-size:.86rem;color:var(--muted)}



/* ===== Modern Bhai Ki Shaadi design system ===== */
:root {
  color-scheme: light;
  --ink: #29211f;
  --muted: #766a64;
  --paper: #fffaf5;
  --surface: #fff;
  --line: #eadfd4;
  --accent: #803b4a;
  --accent-hover: #682b39;
  --accent2: #f3e4d8;
  --gold: #b99459;
  --green: #416b52;
  --error: #a12626;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-pill: 999px;
  --page-width: 1160px;
  --section-space: clamp(48px, 8vw, 92px);
  --shadow-card: 0 12px 36px rgb(50 30 20 / 7%);
  --shadow-hover: 0 20px 48px rgb(50 30 20 / 12%);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { color: var(--ink); background: var(--paper); font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgb(185 148 89 / 70%); outline-offset: 3px; }
.site-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px max(20px, calc((100vw - var(--page-width)) / 2)); background: rgb(255 250 245 / 88%); border-bottom: 1px solid rgb(234 223 212 / 80%); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 800; letter-spacing: -.025em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: white; background: var(--accent); }
.nav-links { display: flex; align-items: center; gap: clamp(12px, 2.5vw, 28px); }
.nav-links a { color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 650; transition: color .18s ease; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); }
.nav-links .nav-cta { padding: 9px 16px; border-radius: var(--radius-pill); background: var(--accent); color: white; }
.nav-links .nav-cta:hover { background: var(--accent-hover); color: white; }
.hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(54px, 9vw, 104px) 22px clamp(44px, 7vw, 78px); text-align: center; background: radial-gradient(ellipse at 50% 0%, rgb(185 148 89 / 18%), transparent 58%), linear-gradient(180deg, #f8e9dc 0%, var(--paper) 100%); }
.hero::before, .hero::after { position: absolute; z-index: -1; width: 240px; height: 240px; border: 1px solid rgb(185 148 89 / 22%); border-radius: 50%; content: ""; pointer-events: none; }
.hero::before { top: -145px; left: -90px; box-shadow: 0 0 0 22px rgb(185 148 89 / 4%), 0 0 0 46px rgb(185 148 89 / 3%); }
.hero::after { right: -110px; bottom: -160px; box-shadow: 0 0 0 22px rgb(185 148 89 / 4%), 0 0 0 46px rgb(185 148 89 / 3%); }
.hero-inner { width: min(100%, 860px); margin: 0 auto; }
.eyebrow { margin: 0 0 15px; color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.hero h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.7rem, 7.4vw, 5.8rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.03; text-wrap: balance; }
.hero h1 span { color: var(--accent); font-style: italic; }
.hero-copy { max-width: 600px; margin: 22px auto 0; color: var(--muted); font-size: clamp(1rem, 2.3vw, 1.16rem); }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn, .hero-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 20px; border: 1px solid transparent; border-radius: var(--radius-pill); font-weight: 750; text-decoration: none; cursor: pointer; transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.primary, .hero-link-primary { background: var(--accent); color: white; }
.primary:hover, .hero-link-primary:hover { background: var(--accent-hover); color: white; }
.secondary, .hero-link-secondary { border-color: var(--line); background: rgb(255 255 255 / 72%); color: var(--ink); }
.btn:not(:disabled):hover, .hero-link:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgb(50 30 20 / 10%); }
.countdown { width: min(calc(100% - 32px), 760px); margin: -8px auto 0; padding: clamp(24px, 5vw, 42px); position: relative; z-index: 1; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(ellipse at top, rgb(185 148 89 / 12%), transparent 65%), var(--surface); box-shadow: var(--shadow-card); }
.countdown-grid { gap: clamp(8px, 2vw, 14px); }
.countdown-unit { padding: 16px 8px; border-radius: var(--radius-sm); background: #fff8f0; }
main { width: min(calc(100% - 36px), var(--page-width)); margin: 0 auto 70px; }
.home-section { padding-top: var(--section-space); scroll-margin-top: 88px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.section-heading h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.15; }
.section-heading p { max-width: 500px; margin: 8px 0 0; color: var(--muted); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-card { display: flex; flex-direction: column; min-height: 210px; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.feature-card:hover { transform: translateY(-4px); border-color: rgb(185 148 89 / 65%); box-shadow: var(--shadow-hover); }
.feature-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 24px; border-radius: 15px; background: var(--accent2); font-size: 1.35rem; }
.feature-card h3 { margin: 0 0 7px; font-size: 1.12rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: .94rem; }
.feature-card .feature-arrow { margin-top: auto; padding-top: 18px; color: var(--accent); font-weight: 800; }
.notice { border-radius: var(--radius-sm); }
.panel, .quiz-card { border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.idea-card { border-radius: var(--radius-sm); background: #fffdf9; }
.btn:disabled { opacity: .65; cursor: wait; }
.tabs { gap: 10px; }
.tab { border-radius: var(--radius-pill); transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
.engagement-film { position: relative; isolation: isolate; overflow: hidden; margin: var(--section-space) calc(50% - 50vw) 0; padding: clamp(52px, 8vw, 96px) 20px; color: #fff8ed; text-align: center; background: radial-gradient(ellipse at 50% 0%, #60452d 0%, transparent 58%), linear-gradient(145deg, #17120f, #090807 70%); border-block: 1px solid rgb(185 148 89 / 35%); }
.film-inner { width: min(100%, 1080px); margin-inline: auto; }
.film-eyebrow { margin: 0 0 14px; color: #d9b77e; font-size: .75rem; font-weight: 800; letter-spacing: .22em; }
.engagement-film h2 { margin: 0 auto 14px; color: #fff8ed; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 400; line-height: 1.12; text-wrap: balance; }
.film-description { max-width: 580px; margin: 0 auto 30px; color: #d4c8b8; }
.film-frame { position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; background: #000; border: 1px solid rgb(217 183 126 / 45%); border-radius: 10px; box-shadow: 0 24px 70px rgb(0 0 0 / 50%); }
.film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-caption { margin: 20px 0 0; color: #d4c8b8; font-family: Georgia, "Times New Roman", serif; font-style: italic; }
footer { padding: 30px 18px 42px; border-top: 1px solid var(--line); background: #f8f0e8; }
@media (max-width: 760px) { .feature-grid { grid-template-columns: 1fr; } .feature-card { min-height: auto; } .feature-icon { margin-bottom: 16px; } .section-heading { display: block; } }
@media (max-width: 620px) { .site-nav { padding: 10px 14px; gap: 10px; } .brand { font-size: .9rem; } .brand-mark { width: 32px; height: 32px; } .nav-links { gap: 12px; } .nav-links a { font-size: .8rem; } .nav-links .nav-cta { padding: 8px 11px; } .hero { padding-inline: 18px; } main { width: calc(100% - 28px); } .countdown { width: calc(100% - 28px); border-radius: var(--radius-md); } .panel, .quiz-card { border-radius: 18px; } .btn { min-height: 48px; } }
@media (max-width: 420px) { .brand-text { display: none; } .nav-links { gap: 10px; } .nav-links a { font-size: .76rem; } .hero h1 { font-size: clamp(2.45rem, 12vw, 3.4rem); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ===== Compact, minimal refinement ===== */
:root {
  --section-space: clamp(30px, 4vw, 48px);
}
body { line-height: 1.55; }
.site-nav { padding-top: 8px; padding-bottom: 8px; }
.brand-mark { width: 32px; height: 32px; }
.hero { padding-top: clamp(38px, 5vw, 58px); padding-bottom: clamp(30px, 4vw, 44px); }
.eyebrow { margin-bottom: 9px; font-size: .7rem; letter-spacing: .15em; }
.hero h1 { font-size: clamp(2.15rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -.04em; }
.hero-copy { max-width: 540px; margin-top: 13px; font-size: 1rem; }
.hero-actions { gap: 9px; margin-top: 18px; }
.btn, .hero-link { min-height: 40px; padding: 9px 16px; font-size: .92rem; }
.countdown { padding: 22px 18px; border-radius: 20px; }
.countdown h2 { font-size: clamp(1.2rem, 3vw, 1.55rem); }
.countdown-date { margin-bottom: 12px; font-size: .92rem; }
.countdown-grid { gap: 8px; }
.countdown-unit { padding: 10px 6px; }
.countdown-number { font-size: clamp(1.25rem, 3.5vw, 1.7rem); }
#countdownMessage { margin-top: 9px; font-size: .9rem; }
.home-section { padding-top: var(--section-space); }
.section-heading { margin-bottom: 14px; }
.section-heading h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.section-heading p { margin-top: 5px; font-size: .94rem; }
.feature-grid { gap: 12px; }
.feature-card { min-height: 164px; padding: 18px; border-radius: 17px; }
.feature-icon { width: 36px; height: 36px; margin-bottom: 14px; border-radius: 11px; font-size: 1.1rem; }
.feature-card h3 { margin-bottom: 4px; font-size: 1rem; }
.feature-card p { font-size: .9rem; line-height: 1.5; }
.feature-card .feature-arrow { padding-top: 12px; font-size: .9rem; }
.engagement-film { margin-top: var(--section-space); padding: clamp(32px, 5vw, 54px) 18px; }
.film-eyebrow { margin-bottom: 9px; font-size: .68rem; letter-spacing: .16em; }
.engagement-film h2 { margin-bottom: 9px; font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
.film-description { margin-bottom: 20px; font-size: .94rem; }
.film-frame { border-radius: 8px; }
.film-caption { margin-top: 12px; font-size: .9rem; }
main { margin-bottom: 42px; }
.notice { margin-bottom: 12px; padding: 10px 13px; font-size: .9rem; }
.tabs { margin: 12px 0; gap: 7px; }
.tab { padding: 8px 12px; font-size: .9rem; }
.panel, .quiz-card { padding: clamp(14px, 2.5vw, 21px); }
.panel h2, .quiz-card h2 { font-size: 1.3rem; }
.section-title { margin: 18px 0 8px; font-size: 1rem; }
.flow { margin: 12px 0 18px; }
.flow li { padding-top: 2px; padding-bottom: 2px; }
.idea-submit { padding: 14px; }
label { margin-top: 9px; font-size: .9rem; }
input, select, textarea { padding: 9px 11px; }
textarea { min-height: 82px; }
.ideas-head { margin-top: 16px; }
.idea-list { gap: 9px; margin-top: 9px; }
.idea-card { padding: 11px; }
.idea-card h4 { font-size: .98rem; }
.idea-card p { margin: 6px 0; }
.quiz-card { margin-top: 18px; }
footer { padding: 20px 16px 26px; font-size: .82rem; }
@media (max-width: 760px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card { min-height: 158px; }
}
@media (max-width: 520px) {
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: auto; }
  .feature-icon { margin-bottom: 10px; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .nav-links { gap: 9px; }
  .nav-links a { font-size: .76rem; }
  .nav-links .nav-cta { padding: 7px 10px; }
}

/* ===== Final compact pass: tighter spacing, restrained typography ===== */
:root { --section-space: clamp(22px, 3vw, 34px); }
body { font-size: 15px; line-height: 1.5; }
.site-nav { gap: 14px; }
.nav-links { gap: clamp(10px, 1.8vw, 20px); }
.nav-links a { font-size: .86rem; }
.hero { padding-top: clamp(30px, 4vw, 44px); padding-bottom: clamp(24px, 3vw, 34px); }
.hero h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
.hero-copy { max-width: 500px; font-size: .96rem; }
.hero-actions { margin-top: 15px; }
.countdown { width: min(calc(100% - 28px), 700px); margin-top: -4px; padding: 18px 16px; border-radius: 18px; }
.countdown-label { margin-bottom: 3px; font-size: .68rem; }
.countdown h2 { font-size: 1.25rem; }
.countdown-date { margin-bottom: 10px; font-size: .88rem; }
.countdown-grid { max-width: 430px; gap: 7px; }
.countdown-unit { padding: 8px 5px; }
.countdown-number { font-size: clamp(1.15rem, 2.8vw, 1.5rem); }
.countdown-unit span:last-child { font-size: .7rem; }
#countdownMessage { margin-top: 7px; font-size: .82rem; }
.home-section { padding-top: var(--section-space); }
.section-heading { margin-bottom: 12px; }
.section-heading h2 { font-size: clamp(1.35rem, 2.8vw, 1.8rem); }
.section-heading p { font-size: .9rem; }
.feature-grid { gap: 10px; }
.feature-card { min-height: 142px; padding: 15px; border-radius: 15px; }
.feature-icon { width: 32px; height: 32px; margin-bottom: 9px; }
.feature-card h3 { font-size: .96rem; }
.feature-card p, .feature-card .feature-arrow { font-size: .85rem; }
.feature-card .feature-arrow { padding-top: 8px; }
.engagement-film { margin-top: var(--section-space); padding: clamp(26px, 3.5vw, 38px) 16px; }
.engagement-film h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.film-description { margin-bottom: 14px; font-size: .9rem; }
.film-caption { margin-top: 9px; }
main { margin-bottom: 30px; }
.panel, .quiz-card { border-radius: 16px; }
.quiz-card { margin-top: var(--section-space); }
@media (max-width: 520px) {
  body { font-size: 14px; }
  .site-nav { padding-inline: 12px; }
  .nav-links { gap: 9px; }
  .nav-links a { font-size: .75rem; }
  .nav-links .nav-cta { padding: 7px 10px; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
  .hero-copy { font-size: .9rem; }
  .hero-actions { gap: 7px; }
  .btn, .hero-link { min-height: 38px; padding: 8px 13px; font-size: .85rem; }
  .countdown { padding: 15px 11px; }
  .countdown h2 { font-size: 1.08rem; }
  .countdown-grid { gap: 5px; }
  .countdown-unit { padding: 8px 2px; }
  .countdown-number { font-size: 1.12rem; }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-card { padding: 12px; }
  .feature-card p { font-size: .82rem; }
}


/* Cousins' wedding illustration */
.cousins-art { width: min(calc(100% - 36px), 1000px); margin: 22px auto 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-card); }
.cousins-art img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 620px) { .cousins-art { width: calc(100% - 28px); margin-top: 16px; border-radius: 14px; } .cousins-art img { aspect-ratio: 4 / 3; object-position: center; } }

/* Small cousins illustration in the top-left brand area */
.nav-brand-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.nav-family-image { display: block; width: 52px; height: 40px; flex: 0 0 auto; object-fit: cover; object-position: center; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 2px 8px rgb(50 30 20 / 10%); }
@media (max-width: 620px) { .nav-brand-group { gap: 8px; } .nav-family-image { width: 40px; height: 32px; border-radius: 6px; } }


/* Hero illustration: side-by-side at every viewport, scaled for mobile */
.nav-brand-group { display: flex; align-items: center; min-width: 0; }
.hero-layout { width: min(100%, 1040px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 34%); align-items: center; gap: clamp(16px, 4vw, 42px); text-align: left; }
.hero-inner { width: 100%; min-width: 0; margin: 0; }
.hero-copy { margin-left: 0; margin-right: 0; }
.hero-actions { justify-content: flex-start; }
.hero-cousins-image { display: block; width: 100%; max-width: 330px; aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: center; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); }
@media (max-width: 620px) {
  .hero { padding: 26px 14px 24px; }
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(92px, 31%); gap: 10px; align-items: center; }
  .hero-inner { min-width: 0; }
  .hero .eyebrow { font-size: .58rem; letter-spacing: .08em; margin-bottom: 6px; }
  .hero h1 { font-size: clamp(1.25rem, 5.2vw, 1.9rem); line-height: 1.08; letter-spacing: -.035em; overflow-wrap: normal; }
  .hero-copy { margin-top: 8px; font-size: clamp(.72rem, 2.8vw, .86rem); line-height: 1.4; }
  .hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
  .hero-link { min-height: 30px; padding: 6px 9px; font-size: clamp(.65rem, 2.5vw, .78rem); white-space: normal; text-align: center; }
  .hero-cousins-image { width: 100%; min-width: 0; max-width: none; aspect-ratio: 3 / 4; border-radius: 10px; object-fit: cover; }
}
@media (max-width: 360px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr) minmax(78px, 29%); gap: 8px; }
  .hero h1 { font-size: 1.2rem; }
  .hero-copy { font-size: .68rem; }
  .hero-link { padding: 5px 7px; font-size: .62rem; }
}