/* Marketing and legal pages (homepage, privacy, terms, 404).
   Layout and look take after the Viewlight photo studio kit: a full-bleed hero with an
   overlaid nav, uppercase thin-serif headlines with one italic accent word, pill labels,
   terracotta bands, photo cards with text over the image, cream plan cards. The copy and
   every image are Kahwin Hari Ini's own (screenshots of the product and the card artwork).
   Display type: Cormorant Garamond (SIL OFL, self-hosted in /assets/fonts). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --paper: #f4eee5;
  --tint: #ece3d6;
  --card: #fffcf7;
  --card-featured: #fbf3e8;
  --ink: #3a2a22;
  --muted: #6e5c50;
  --line: #e0d4c3;
  --clay: #9c5f47;
  --clay-dark: #7c4733;
  --on-clay: #fbf5ee;
  --on-clay-muted: rgb(251 245 238 / 0.86);
  --accent-ink: #8e5139;
  --gold: #e2c49a;
  --button-tan: #f0e3d2;
  --warn-ink: #7a4a10;
  --warn-tint: #faefd9;
  --radius: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-variant-numeric: lining-nums;
  --serif: Georgia, "Times New Roman", serif;
  --script: "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1512;
    --tint: #241b17;
    --card: #2a201b;
    --card-featured: #32261f;
    --ink: #f2e8dd;
    --muted: #c2ae9e;
    --line: #3d2f28;
    --clay: #5e3627;
    --clay-dark: #c9805f;
    --on-clay: #f7ede3;
    --on-clay-muted: rgb(247 237 227 / 0.86);
    --accent-ink: #e3a386;
    --button-tan: #3a2b24;
    --warn-ink: #eec27e;
    --warn-tint: #33280f;
  }
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.65; background: var(--paper); }
html { scroll-padding-top: 24px; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.1; text-wrap: balance; }
a { color: var(--ink); text-decoration-color: var(--clay); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
::selection { background: var(--tint); }
img { max-width: 100%; }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 30; background: var(--paper); padding: 8px 12px; }
.skip-link:focus { left: 8px; }
.wrap { width: min(1200px, 100% - 48px); margin: 0 auto; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 32px; min-height: 76px; padding: 12px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 1.3rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.brand img { width: 30px; height: 30px; display: block; }
.brand:hover { color: inherit; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; font-size: 0.92rem; }
.site-nav a { color: inherit; text-decoration: none; padding: 8px 0; }
.site-nav a:hover { opacity: 0.75; color: inherit; }
.site-nav a.btn { padding: 0 18px; }
.site-nav a.btn:hover { opacity: 1; }

/* On the homepage the header sits over the hero artwork. */
.site-header--overlay { position: absolute; inset: 0 0 auto; background: transparent; border-bottom: 0; color: #fbf5ee; }
.site-header--overlay .brand, .site-header--overlay .brand:hover { color: #fbf5ee; }
.site-header--overlay .site-nav a.btn { color: #3a2a22; }

/* Small screens: the homepage links fold into a menu. */
.nav-menu { display: none; position: relative; }
.nav-menu summary { list-style: none; display: grid; width: 44px; height: 44px; place-items: center; cursor: pointer; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu summary span, .nav-menu summary span::before, .nav-menu summary span::after { display: block; width: 22px; height: 1.5px; background: currentColor; content: ""; transition: transform 200ms var(--ease); }
.nav-menu summary span { position: relative; }
.nav-menu summary span::before { position: absolute; top: -7px; }
.nav-menu summary span::after { position: absolute; top: 7px; }
.nav-menu[open] summary span { background: transparent; }
.nav-menu[open] summary span::before { transform: translateY(7px) rotate(45deg); }
.nav-menu[open] summary span::after { transform: translateY(-7px) rotate(-45deg); }
.nav-menu__panel { position: absolute; right: 0; top: 52px; width: min(280px, calc(100vw - 32px)); display: flex; flex-direction: column; padding: 12px; border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 24px 60px -20px rgb(40 24 16 / 0.4); }
.nav-menu__panel a { padding: 12px; color: var(--ink); text-decoration: none; }
.nav-menu__panel a.btn { margin-top: 8px; color: var(--on-clay); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 0; border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--clay); color: var(--on-clay); }
.btn-primary:hover { background: var(--clay-dark); color: var(--on-clay); }
.btn-secondary { background: var(--button-tan); color: var(--ink); }
.btn-secondary:hover { background: var(--tint); color: var(--ink); }
.btn-light { background: #fbf5ee; color: #3a2a22; }
.btn-light:hover { background: #ffffff; color: #3a2a22; }
.btn-small { min-height: 40px; padding: 0 18px; font-size: 0.88rem; }
.btn-link { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; font-size: 0.95rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.btn-link::after { content: "\2192"; font-weight: 400; transition: translate 180ms var(--ease); }
.btn-link:hover::after { translate: 3px 0; }
.btn-link--light, .btn-link--light:hover { color: #fbf5ee; text-decoration-color: rgb(251 245 238 / 0.6); }
.button-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

/* ---------- Shared section pieces ---------- */
.section { padding: clamp(80px, 9vw, 128px) 0; }
.section-title { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.06; letter-spacing: 0.03em; text-transform: uppercase; }
.section-title em { font-style: italic; color: var(--accent-ink); }
.section-sub { margin: 0; color: var(--muted); font-size: 1.02rem; }
.section-head-center { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 760px; margin: 0 auto; text-align: center; }
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; color: var(--accent-ink); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.section--band { background: var(--clay); color: var(--on-clay); }
.section--band .section-title, .section--band h3 { color: var(--on-clay); }
.section--band .section-title em { color: var(--gold); }
.section--band .pill { color: var(--on-clay); }
.section--band .section-sub, .section--band p { color: var(--on-clay-muted); }

/* ---------- Hero: the card's own artwork, full bleed ---------- */
.hero { position: relative; display: flex; min-height: clamp(620px, 100dvh, 880px); align-items: flex-end; overflow: hidden; color: #fbf5ee; background: #3b3a2a; }
.hero__media { position: absolute; inset: 0; background: url("/assets/hero.svg") center 34% / cover no-repeat; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(30 20 14 / 0.5) 0%, rgb(30 20 14 / 0.1) 28%, rgb(30 20 14 / 0.4) 58%, rgb(30 20 14 / 0.86) 100%); }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr); align-items: end; gap: 32px 64px; padding: 160px 0 clamp(56px, 7vw, 88px); }
.hero-kicker { margin: 0 0 16px; font-family: var(--script); font-size: 1.6rem; line-height: 1; color: var(--gold); }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3rem, 6.6vw, 5.8rem); line-height: 0.98; letter-spacing: 0.02em; text-transform: uppercase; color: #fbf5ee; }
.hero h1 em { font-style: italic; color: var(--gold); }
.hero__aside { display: flex; flex-direction: column; gap: 22px; padding-bottom: 10px; }
.lead { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--muted); }
.hero .lead { color: rgb(251 245 238 / 0.92); }

/* ---------- About: heading left, copy and facts right ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 72px; align-items: start; }
.about__grid .pill { margin-bottom: 22px; }
.about__copy p { margin: 0 0 16px; color: var(--muted); font-size: 1.02rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 28px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.stats div { display: flex; flex-direction: column; gap: 6px; }
.stats dt { font-family: var(--display); font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--ink); }
.stats dd { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.4; }
.screen { margin: clamp(48px, 6vw, 80px) 0 0; }
.screen img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 50px 100px -60px rgb(40 24 16 / 0.6), 0 2px 10px rgb(40 24 16 / 0.06); }

/* ---------- On the Card: four screenshots, caption under each ---------- */
.on-card { background: var(--tint); }
.photo-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; margin-top: 56px; }
.photo-card { margin: 0; }
.photo-card img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: center top; border-radius: var(--radius); background: var(--paper); box-shadow: 0 30px 60px -40px rgb(40 24 16 / 0.55); transition: transform 700ms var(--ease); }
.photo-card:first-child img { object-position: center; }
.photo-card__text { padding: 20px 2px 0; border-top: 0; }
.photo-card h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 500; line-height: 1.15; color: var(--ink); }
.photo-card p { margin: 8px 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--muted); }

/* ---------- On the Day: terracotta band, heading row then a grid ---------- */
.values__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; gap: 24px 72px; }
.values__head .pill { margin-bottom: 22px; }
.values__head p { margin: 0; font-size: 1.05rem; }
.values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 36px; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgb(251 245 238 / 0.25); }
.values__grid h3 { font-size: 1.05rem; font-weight: 650; line-height: 1.3; }
.values__grid p { margin: 10px 0 0; font-size: 0.93rem; line-height: 1.6; }

/* ---------- How it works: screenshot beside numbered steps ---------- */
.process__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 40px 64px; align-items: center; margin-top: 64px; }
.process__media { margin: 0; }
.process__media img { display: block; width: 100%; height: auto; border-radius: var(--radius); box-shadow: 0 40px 80px -50px rgb(40 24 16 / 0.55); }
.process__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.process__steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.process__steps li:first-child { padding-top: 0; }
.process__steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.process__num { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; color: var(--accent-ink); }
.process__steps h3 { font-size: 1.05rem; font-weight: 650; line-height: 1.4; }
.process__steps p { margin: 6px 0 0; color: var(--muted); font-size: 0.95rem; }

/* ---------- Pricing: cream cards on the terracotta band ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin-top: 56px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px 28px 28px; border-radius: var(--radius); background: var(--card); color: var(--ink); }
.plan-featured { background: var(--card-featured); }
.section--band .plan p { color: var(--muted); }
.section--band .plan h3 { color: var(--ink); }
.plan h3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; font-size: 1.25rem; font-weight: 650; line-height: 1.3; }
.plan-note { display: inline-flex; align-items: center; min-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--clay); color: var(--on-clay); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.plan-desc { margin: 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 0.9rem; line-height: 1.5; }
.price-label { margin: 6px 0 0; font-size: 0.8rem; }
.section--band .plan .price { margin: 0; font-family: var(--display); font-size: 3.2rem; line-height: 1; color: var(--ink); }
.plan ul { margin: 12px 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; color: var(--muted); }
.plan li { position: relative; padding-left: 24px; line-height: 1.5; }
.plan li::before { content: ""; position: absolute; left: 3px; top: 0.42em; width: 9px; height: 5px; border-left: 1.5px solid var(--clay-dark); border-bottom: 1.5px solid var(--clay-dark); transform: rotate(-45deg); }
.plan li strong { color: var(--ink); font-weight: 600; }
.btn-plan { width: 100%; margin-top: auto; background: var(--button-tan); color: var(--ink); }
.btn-plan:hover { background: var(--tint); color: var(--ink); }
.btn-plan--dark { background: #7c4733; color: #fbf5ee; }
.btn-plan--dark:hover { background: #643827; color: #fbf5ee; }
.section--band .pricing-note { margin: 32px auto 0; max-width: 72ch; text-align: center; font-size: 0.9rem; }

/* ---------- FAQ: centred, ruled rows ---------- */
.faq { max-width: 780px; margin: 48px auto 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { position: relative; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font-family: var(--display); font-size: 1.7rem; font-weight: 400; color: var(--accent-ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0 0 20px; max-width: 64ch; color: var(--muted); }

/* ---------- Closing call: the arch artwork, full bleed ---------- */
.cta { position: relative; overflow: hidden; color: #fbf5ee; background: #3b3a2a; }
.cta__media { position: absolute; inset: 0; background: url("/assets/portrait.svg") center 42% / cover no-repeat; }
.cta__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(30 20 14 / 0.88) 0%, rgb(30 20 14 / 0.6) 55%, rgb(30 20 14 / 0.4) 100%); }
.cta__inner { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; min-height: 420px; padding: clamp(64px, 8vw, 104px) 0; }
.cta h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; color: #fbf5ee; }
.cta h2 em { font-style: italic; color: var(--gold); }
.cta p { margin: 14px 0 0; color: rgb(251 245 238 / 0.88); }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 32px; color: var(--muted); font-size: 0.92rem; }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 0.8fr)); gap: 40px 32px; }
.footer__brand p { margin: 16px 0 0; max-width: 32ch; }
.site-footer nav { display: flex; flex-direction: column; gap: 10px; }
.site-footer h3 { margin-bottom: 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.site-footer nav a { color: var(--muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }
.footer__base { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.84rem; }
/* Legal pages use a one-line footer. */
.site-footer > .wrap:only-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.site-footer > .wrap:only-child nav { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
.site-header + .legal + .site-footer { padding-top: 0; }

/* ---------- Legal pages ---------- */
.legal { padding: 56px 0 88px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 10px; }
.legal h2 { font-family: var(--display); font-weight: 500; font-size: 1.7rem; margin: 40px 0 12px; }
.legal p, .legal li { color: color-mix(in srgb, var(--ink) 86%, var(--muted)); }
.legal table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.95rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.legal thead th { background: var(--tint); }
.updated { color: var(--muted); font-size: 0.92rem; margin: 0 0 24px; }
.draft-note { padding: 14px 18px; border-radius: var(--radius); background: var(--warn-tint); color: var(--warn-ink); font-size: 0.92rem; }

/* ---------- Not found ---------- */
.not-found { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 48px 20px; }
.not-found .inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 480px; }
.not-found h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 6vw, 3.4rem); letter-spacing: 0.03em; text-transform: uppercase; }
.not-found .button-row { justify-content: center; }
.flourish { display: flex; justify-content: center; color: var(--clay); }
.flourish span { position: relative; width: 10px; height: 10px; transform: rotate(45deg); background: currentColor; font-size: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .photo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .home .site-nav { display: none; }
  .nav-menu { display: block; }
  .hero__inner, .about__grid, .values__head, .process__grid { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 32px); }
  .brand { font-size: 1.1rem; letter-spacing: 0.1em; }
  .site-nav { gap: 0 18px; }
  .hero { min-height: 640px; }
  .hero__inner { padding-top: 120px; }
  .stats { gap: 12px; }
  .stats dt { font-size: 2.1rem; }
  .photo-cards { gap: 28px 12px; }
  .photo-card__text { padding-top: 14px; }
  .photo-card h3 { font-size: 1.2rem; }
  .photo-card p { font-size: 0.84rem; }
  .hero__media { background-position: 62% 30%; }
  .hero__media::after { background: linear-gradient(180deg, rgb(30 20 14 / 0.55) 0%, rgb(30 20 14 / 0.45) 30%, rgb(30 20 14 / 0.7) 55%, rgb(30 20 14 / 0.9) 100%); }
  .values__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .screen { width: min(300px, 100%); margin-inline: auto; }
  .screen img { border-radius: 20px; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .button-row .btn { flex: 1 1 100%; }
  .cta__inner { min-height: 360px; }
}

/* Motion is limited to feedback on buttons and a slow zoom on photo cards.
   Off for people who ask for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .btn, .site-nav a, .site-footer a { transition: background-color 180ms var(--ease), color 180ms var(--ease), opacity 180ms var(--ease), transform 180ms var(--ease); }
  .btn:active { transform: translateY(1px); }
  .photo-card:hover img { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-link::after, .photo-card img, .nav-menu summary span, .nav-menu summary span::before, .nav-menu summary span::after { transition: none; }
}

/* ---------- Inner pages (Features, How it works, Pricing, FAQ) ---------- */
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.nav-menu__panel a[aria-current="page"] { color: var(--accent-ink); }
.page-hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(420px, 56vh, 520px); overflow: hidden; color: #fbf5ee; background: #3b3a2a; }
.page-hero .hero__media { background-position: center 40%; }
.page-hero .hero__media::after { background: linear-gradient(180deg, rgb(30 20 14 / 0.6) 0%, rgb(30 20 14 / 0.45) 45%, rgb(30 20 14 / 0.85) 100%); }
.page-hero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 140px 0 clamp(48px, 6vw, 72px); }
.page-hero h1 { max-width: 18ch; font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: #fbf5ee; }
.page-hero h1 em { font-style: italic; color: var(--gold); }
.page-hero .lead { max-width: 52ch; color: rgb(251 245 238 / 0.9); }
.pill--light { color: #fbf5ee; }
.inner .process__grid, .inner .photo-cards, .inner .plans, .inner .faq { margin-top: 0; }

/* Home: links to the other pages. */
.section--tint { background: var(--tint); }
.explore__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.explore__item { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 32px 28px; border-radius: var(--radius); background: var(--card); color: var(--ink); text-decoration: none; }
.explore__item:hover { color: var(--ink); }
.explore__item h2 { font-family: var(--display); font-size: clamp(1.8rem, 2.6vw, 2.2rem); line-height: 1.08; letter-spacing: 0.03em; text-transform: uppercase; }
.explore__item h2 em { font-style: italic; color: var(--accent-ink); }
.explore__item p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.explore__item .btn-link { margin-top: auto; min-height: 36px; color: var(--accent-ink); }
@media (max-width: 900px) {
  .explore__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
  .explore__item { transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
  .explore__item:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -40px rgb(40 24 16 / 0.5); }
}

/* The flower-arch artwork belongs to the homepage hero only. Page banners and the
   closing call are plain colour, so the illustration doesn't repeat on every screen. */
.page-hero { min-height: clamp(340px, 44vh, 420px); background: #4a2e23; }
.page-hero .hero__media { display: none; }
.cta { background: var(--clay-dark); }
.cta__media { display: none; }
.cta__inner { min-height: 0; padding: clamp(56px, 7vw, 88px) 0; }
.btn-plan--dark { background: var(--clay); }
.plan-featured { outline: 2px solid var(--clay); outline-offset: -2px; }
@media (prefers-color-scheme: dark) {
  .page-hero { background: #2b1b15; }
  .cta { background: #4a2e23; }
}