/* Shared stylesheet. Colours come from the :root block build.mjs writes from the client's theme. */

@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-variant-numeric: lining-nums; font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 600; line-height: 1.12; letter-spacing: -0.005em; margin: 0; color: var(--brand); text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.75rem); }
h3 { font-size: 1.5rem; line-height: 1.2; }
p { margin: 0; }
a { color: var(--brand); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
address { font-style: normal; }
svg { display: block; }

.wrap { width: min(100% - 2.5rem, 70rem); margin-inline: auto; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--brand); color: #fff; padding: 0.6rem 1rem; border-radius: 0.5rem; z-index: 20; text-decoration: none; }
.skip:focus { top: 1rem; color: #fff; }

/* ---- header ---- */
.site-header { position: static; z-index: 10; background: color-mix(in srgb, var(--ivory) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 1rem; padding-block: 0.7rem 0.35rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--brand); min-width: 0; }
.brand svg { width: 1.6rem; height: 2.1rem; flex: none; color: var(--gold); }
.brand-text { display: grid; line-height: 1.1; }
.brand-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.2rem; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.brand-sub { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.17em; text-transform: uppercase; color: var(--accent); white-space: nowrap; margin-top: 0.2rem; }
.nav { display: flex; align-items: center; gap: 0.35rem; order: 3; width: 100%; margin-left: -0.6rem; }
.nav a { padding: 0.45rem 0.6rem; border-radius: 0.5rem; text-decoration: none; font-weight: 500; font-size: 0.98rem; color: var(--ink); }
.nav a:hover { color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.nav a[aria-current="page"] { color: var(--brand); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
/* Phones: a round call button beside the logo, the menu on its own row, and the header scrolls away. */
.header-cta { order: 2; }
.btn.header-cta { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; border-radius: 50%; }
.header-cta .cta-label { display: none; }
@media (min-width: 30rem) {
  .brand { gap: 0.7rem; }
  .brand svg { width: 1.9rem; height: 2.5rem; }
  .brand-name { font-size: 1.45rem; letter-spacing: 0.08em; }
  .brand-sub { font-size: 0.66rem; letter-spacing: 0.2em; }
  .btn.header-cta { width: auto; height: auto; min-height: 2.5rem; padding: 0.45rem 1rem; border-radius: 999px; }
  .header-cta .cta-label { display: inline; }
}
@media (min-width: 54rem) {
  .site-header { position: sticky; top: 0; }
  .site-header .wrap { gap: 0.5rem 1.5rem; padding-block: 0.8rem; }
  .nav { order: 2; width: auto; margin-inline: auto 0; gap: 0.6rem; }
  .header-cta { order: 3; }
}

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 2.85rem; padding: 0.6rem 1.25rem; border-radius: 999px; border: 1px solid var(--brand); background: var(--brand); color: #fff; font-weight: 600; font-size: 0.98rem; line-height: 1.2; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.ghost:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand); border-color: var(--brand); }
.btn.small { min-height: 2.5rem; padding: 0.45rem 1rem; font-size: 0.92rem; }
.btn.on-dark { background: #fff; border-color: #fff; color: var(--brand); }
.btn.on-dark:hover { background: var(--ivory); border-color: var(--ivory); color: var(--brand); }
.btn.on-dark.ghost { background: transparent; color: #fff; border-color: color-mix(in srgb, #fff 55%, transparent); }
.btn.on-dark.ghost:hover { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; border-color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ---- shared section furniture ---- */
.section { padding-block: clamp(3.25rem, 2rem + 5vw, 6rem); }
.section.tint { background: color-mix(in srgb, var(--gold-soft) 16%, var(--ivory)); border-block: 1px solid var(--line); }
.eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 2rem; height: 1px; background: var(--gold); }
.lead { font-size: 1.16rem; line-height: 1.6; color: var(--muted); max-width: 38rem; }
.section-head { display: grid; gap: 0.9rem; margin-bottom: clamp(1.75rem, 1rem + 2vw, 3rem); max-width: 44rem; }
.section-head .eyebrow { margin-bottom: 0; }

/* ---- hero ---- */
.hero { padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) clamp(3rem, 2rem + 5vw, 5.5rem); }
.hero .wrap { display: grid; gap: clamp(2.25rem, 1rem + 4vw, 4.5rem); align-items: center; }
.hero-copy { display: grid; gap: 1.4rem; justify-items: start; }
.hero-copy .eyebrow { margin-bottom: -0.3rem; }
.hero-note { font-size: 0.92rem; color: var(--muted); }
@media (min-width: 54rem) { .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }

.arch { justify-self: center; width: min(100%, 21.5rem); background: var(--brand); color: #fff; border-radius: 10.75rem 10.75rem 1.25rem 1.25rem; padding: 3.6rem 2.1rem 2.3rem; outline: 1px solid color-mix(in srgb, var(--gold-soft) 70%, transparent); outline-offset: -0.7rem; box-shadow: 0 1.5rem 3rem -1.5rem color-mix(in srgb, var(--brand) 55%, transparent); }
.arch svg.leaf { width: 2.6rem; height: 3.4rem; margin: 0 auto 0.9rem; color: var(--gold-soft); }
.arch-label { text-align: center; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 1.5rem; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.journey li { position: relative; padding: 0 0 1.15rem 1.9rem; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 1.32rem; line-height: 1.25; }
.journey li:last-child { padding-bottom: 0; }
.journey li::before { content: ""; position: absolute; left: 0.2rem; top: 0.5rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gold-soft); box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--gold-soft) 22%, transparent); }
.journey li:not(:last-child)::after { content: ""; position: absolute; left: 0.42rem; top: 1.25rem; bottom: -0.3rem; width: 1px; background: color-mix(in srgb, var(--gold-soft) 45%, transparent); }

/* ---- cards ---- */
.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 1.1rem; padding: 1.75rem 1.6rem; display: grid; gap: 0.7rem; align-content: start; }
.card .icon { width: 2.9rem; height: 2.9rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--brand); margin-bottom: 0.35rem; }
.card .icon svg { width: 1.45rem; height: 1.45rem; }
.card p { color: var(--muted); font-size: 1rem; }
a.card-cta { background: var(--brand); border-color: var(--brand); color: #fff; text-decoration: none; transition: background-color 0.15s ease; }
a.card-cta:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.card-cta h3 { color: #fff; }
.card-cta p { color: color-mix(in srgb, #fff 82%, transparent); }
.card-cta .icon { background: color-mix(in srgb, #fff 12%, transparent); color: var(--gold-soft); }
.card-cta .go { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; margin-top: 0.35rem; }
.card-cta .go svg { width: 1.1rem; height: 1.1rem; }
.more { margin-top: 2rem; }
.link-arrow { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.link-arrow:hover { text-decoration: underline; }

/* ---- steps ---- */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.steps li { counter-increment: step; display: grid; gap: 0.55rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--gold); }
.steps li::before { content: "0" counter(step); font-family: "Inter", system-ui, sans-serif; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.16em; font-variant-numeric: lining-nums tabular-nums; color: var(--accent); line-height: 1; }
.steps p { color: var(--muted); font-size: 1rem; }

/* ---- service rows (Services page) ---- */
.rows { display: grid; gap: 0; border-top: 1px solid var(--line); }
.row { display: grid; gap: 0.5rem 2rem; padding-block: 1.9rem; border-bottom: 1px solid var(--line); grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.row .icon { width: 3.1rem; height: 3.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); color: var(--brand); }
.row .icon svg { width: 1.5rem; height: 1.5rem; }
.row-body { display: grid; gap: 0.5rem; max-width: 46rem; }
.row-body p { color: var(--muted); }

/* ---- dark band ---- */
.band { background: var(--brand); color: #fff; }
.band .wrap { display: grid; gap: 1.6rem; padding-block: clamp(2.75rem, 2rem + 3vw, 4.25rem); align-items: center; }
.band h2 { color: #fff; }
.band p { color: color-mix(in srgb, #fff 82%, transparent); max-width: 34rem; }
.band-copy { display: grid; gap: 0.7rem; }
@media (min-width: 54rem) { .band .wrap { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---- page top (inner pages) ---- */
.page-top { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.page-top .wrap { display: grid; gap: 1rem; }
.page-top .eyebrow { margin-bottom: 0; }
.page-body { padding-bottom: clamp(3.25rem, 2rem + 5vw, 6rem); }

/* ---- details list ---- */
.details { background: var(--paper); border: 1px solid var(--line); border-radius: 1.1rem; padding: 0.5rem 1.6rem; margin: 0; }
.details div { display: grid; gap: 0.15rem 1.5rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.details div:last-child { border-bottom: 0; }
.details dt { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.details dd { margin: 0; overflow-wrap: anywhere; }
/* Label beside value only when the CARD is wide enough for the business name on one line;
   in a narrow card (a phone, or half a laptop screen) the label sits above the value. */
.details { container-type: inline-size; }
@container (min-width: 30rem) { .details div { grid-template-columns: 8.75rem minmax(0, 1fr); gap: 0.15rem 1rem; align-items: baseline; } }
.two-col { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); align-items: start; }
@media (min-width: 54rem) { .two-col { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); } }
.stack { display: grid; gap: 1.1rem; align-content: start; }
.stack > h2:not(:first-child) { margin-top: 1.4rem; }
.stack ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; color: var(--muted); }
.stack p { color: var(--muted); }
.stack p.lead-ink { color: var(--ink); font-size: 1.16rem; line-height: 1.6; }

.contact-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.contact-card { background: var(--paper); border: 1px solid var(--line); border-radius: 1.1rem; padding: 1.5rem; display: grid; gap: 0.35rem; align-content: start; justify-items: start; }
.contact-card .label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.contact-card .value { font-weight: 600; font-size: 1.22rem; line-height: 1.3; letter-spacing: -0.005em; font-variant-numeric: lining-nums; color: var(--brand); overflow-wrap: anywhere; }
.contact-card .btn { margin-top: 0.8rem; }

/* ---- legal pages ---- */
.prose { max-width: 44rem; display: grid; gap: 1rem; }
.prose h2 { font-size: 1.65rem; margin-top: 1.4rem; }
.prose p, .prose li { color: var(--ink); }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.4rem; }
.prose .dated { color: var(--muted); font-size: 0.95rem; }

/* ---- footer ---- */
.site-footer { background: color-mix(in srgb, var(--gold-soft) 22%, var(--ivory)); border-top: 1px solid var(--line); font-size: 0.95rem; }
.site-footer .wrap { padding-block: 2.75rem 2rem; display: grid; gap: 1.75rem; }
.legal { display: grid; gap: 0.4rem; }
.legal-name { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 1.5rem; line-height: 1.2; color: var(--brand); }
.legal p, .legal address { color: var(--ink); }
.contact-line { display: flex; flex-wrap: wrap; gap: 0.2rem 1.5rem; }
.legal a { color: var(--ink); }
.legal a:hover { color: var(--brand); }
.footer-base { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--brand); }

.notfound { min-height: 55vh; display: grid; align-content: center; gap: 1.2rem; justify-items: start; }

@media (max-width: 29.99rem) {
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.12em; gap: 0.5rem; }
  .eyebrow::before { width: 1.25rem; }
  .lead { font-size: 1.05rem; }
  .hero { padding-top: 1.6rem; }
  .hero-copy { gap: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }
@media print { .site-header, .band, .actions { display: none; } body { background: #fff; } }

/* Wedding Samadhan only. build.mjs adds this file after the shared stylesheet. */

/* The header prints the name as it is written, "Wedding Samadhan", and not in capitals: it is the
   name requested as the WhatsApp display name, and a reviewer compares the header with that name. */
.brand-name { text-transform: none; letter-spacing: 0.005em; font-size: 1.5rem; }
@media (min-width: 30rem) { .brand-name { font-size: 1.85rem; letter-spacing: 0.005em; } }

/* The symbol is the client's own logo, a picture (the shared stylesheet sizes a drawing). */
.brand img { display: block; flex: none; width: auto; height: 2.5rem; }
@media (min-width: 30rem) { .brand img { height: 3rem; } }
.arch img.leaf { display: block; width: auto; height: 4.75rem; margin: 0 auto 1.1rem; }

/* The narrowest phones (under 360 px): the symbol and the name a little smaller and the tagline left out,
   so that the round Call button stays beside the name. shots.mjs checks that row at every window. */
@media (max-width: 22.49rem) {
  .brand img { height: 2.1rem; }
  .brand-name { font-size: 1.3rem; }
  .brand-sub { display: none; }
}

/* The line under the menu item of the page one is on. The shared stylesheet draws it as an inner shadow, and
   Firefox at a 125% screen shows that shadow as a thin line up the item's side as well. A bar drawn as a
   background sits under the word only, in every browser. */
.nav a[aria-current="page"] { box-shadow: none; border-radius: 0; background: linear-gradient(var(--gold), var(--gold)) no-repeat 0.6rem 100% / calc(100% - 1.2rem) 2px; }
.nav a[aria-current="page"]:hover { background: linear-gradient(var(--gold), var(--gold)) no-repeat 0.6rem 100% / calc(100% - 1.2rem) 2px, color-mix(in srgb, var(--brand) 7%, transparent); }

/* Lines of text. A paragraph does not end on one word alone; the short ones are split evenly.
   The three-part label above the main heading breaks only after a dot (its file uses no-break spaces). */
p, li, dd { text-wrap: pretty; }
.lead, .stack p.lead-ink, .band p, .eyebrow { text-wrap: balance; }
/* Words that stay on one line together (the note under the two buttons breaks at its dot). */
.nw { white-space: nowrap; }

/* The footer: the name in the brand colour, like the name in the header (the shared rule for the footer's
   paragraphs is the stronger one and prints it in the text colour), and the legal name a little heavier. */
.legal .legal-name { color: var(--brand); }
.legal-entity { font-weight: 500; }

/* The Contact page: an address of 29 letters on one line where the card allows it. Where it does not,
   the address breaks before its "@" (build.mjs, emailBreakAtSign). */
.contact-card .value { font-size: 1.1rem; }

/* Three cards in two columns leave the third alone on a tablet. One column until all of them fit in one row;
   one width for both grids, at which the e-mail card has room for the address up to its "@". */
.contact-cards, .steps { grid-template-columns: 1fr; }
@media (min-width: 54.5rem) { .contact-cards, .steps { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }

/* Phones. The Services page: a smaller icon and gap, so that the text beside it has room.
   The footer: each link tall enough for a thumb, so that a call is not opened where WhatsApp was meant. */
@media (max-width: 29.99rem) {
  .row { gap: 0.5rem 1rem; }
  .row .icon { width: 2.6rem; height: 2.6rem; }
  .row .icon svg { width: 1.3rem; height: 1.3rem; }
  .contact-line { gap: 0 1.5rem; }
  .contact-line a, .footer-links a { display: inline-block; padding-block: 0.45rem; }
}

/* The keyboard's focus ring is the accent colour everywhere; on the dark band that is 1.8 to 1 and cannot be
   seen. White there. check.mjs holds this rule in the built stylesheet. */
.band :focus-visible { outline-color: #fff; }

/* The header stays at the top in a wide window: what the browser scrolls to (a link reached with Shift+Tab,
   the page after "Skip to content") must stop below it, not under it. */
@media (min-width: 54rem) { html { scroll-padding-top: 5.5rem; } }

/* A browser from before 2023 does not know color-mix(). Two uses matter there: the header would lose its ground,
   and the sentence in the dark card would turn grey on maroon. Such a browser drops a color-mix() line only when
   the line holds no var(); a line WITH var() is kept, found invalid later, and leaves the property with no value,
   so a plain line written before it never takes effect. The plain value therefore stands alone, and color-mix()
   comes back only where the browser says it knows it. */
.site-header { background: var(--ivory); }
.card-cta p { color: #fff; }
@supports (color: color-mix(in srgb, #fff 50%, transparent)) {
  .site-header { background: color-mix(in srgb, var(--ivory) 92%, transparent); }
  .card-cta p { color: color-mix(in srgb, #fff 82%, transparent); }
}

/* A printed page, or a page saved as a PDF, keeps the header with the name (the shared rule hides the whole
   header); the menu and the Call button are left out. */
@media print {
  .site-header { display: block; position: static; background: none; border: 0; }
  .nav, .header-cta, .skip { display: none; }
  /* A browser leaves background colours out of a print unless the person ticks a box, and white words on a
     missing maroon ground print pale grey. These three keep their ground. */
  .arch, .card-cta, .contact-card .btn { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Until the name's own typeface has arrived (a slow first visit), or where web fonts are blocked, the name is set
   in Georgia Bold, a third wider, and on a phone it pushes the Call button onto a row of its own. A copy of that
   face at 78% of its size is as wide as the real one. (Measured with Windows' Georgia Bold; a phone without
   Georgia uses its own serif, not measured.) */
@font-face { font-family: "Name fallback"; src: local("Georgia Bold"), local("Georgia-Bold"); font-weight: 600; size-adjust: 78%; }
.brand-name { font-family: "Cormorant Garamond", "Name fallback", Georgia, serif; }