/* Floral editorial redesign. Existing brand colours and self-hosted fonts live in main.css. */
:root { --container-max: 1328px; --gutter: clamp(24px, 5vw, 80px); --header-h: 96px; --fs-body: 1.125rem; --fs-body-sm: 1rem; --fs-kicker: 1rem; }
html { overflow-x: visible; scroll-behavior: auto; scroll-padding-top: 112px; }
body { background: var(--c-alabaster); overflow-x: visible; }
body > main { min-height: 60svh; }
body.menu-open { overflow: hidden; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: var(--container-max); }
h1, h2, h3 { font-weight: 400; overflow-wrap: anywhere; }
h1 { font-size: clamp(4rem, 8.5vw, 8rem); line-height: .95; letter-spacing: -.035em; }
h2 { font-size: clamp(2.75rem, 4.5vw, 4.5rem); line-height: 1.05; letter-spacing: -.02em; }
p { line-height: 1.6; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 5px; }
.btn-primary { min-height: 56px; padding: 16px 24px; border-radius: 0; font-size: 1rem; letter-spacing: .06em; font-weight: 600; gap: 24px; background: var(--c-accent); color: var(--c-blush); border: 1px solid var(--c-accent); }
.text-link { display: inline-flex; align-items: center; gap: 24px; min-height: 48px; padding-block: 8px; border-bottom: 1px solid currentColor; color: var(--c-accent); font-size: 1rem; text-decoration: none; }
.text-link span, .btn-primary span { font-size: 1.4rem; line-height: 1; }
.eyebrow { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 24px; color: var(--c-accent); }
/* Two clear controls frame the identity. Native dialog supplies modal focus and inertness. */
.site-header { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: var(--header-h); height: auto; padding: 16px var(--gutter); background: var(--c-alabaster); border: 0; backdrop-filter: none; transform: none; }
.header-consult { justify-self: start; min-height: 48px; display: inline-flex; align-items: center; padding-block: 8px; color: var(--c-accent); text-transform: uppercase; font-size: 1rem; letter-spacing: .08em; text-decoration: none; }
.header-wordmark { font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 500; text-decoration: none; color: var(--c-onyx); }
.home-page .header-wordmark { visibility: hidden; }
.home-page .site-header, .home-page .home-nameplate, .home-page .site-footer { text-transform: uppercase; }
.nav-toggle { justify-self: end; display: inline-flex; align-items: center; gap: 16px; min-height: 48px; padding: 8px 0 8px 16px; border: 0; border-radius: 0; color: var(--c-onyx); background: transparent; font-size: 1rem; font-weight: 500; letter-spacing: .08em; cursor: pointer; }
.site-nav { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0; padding: 96px var(--gutter) 48px; background: var(--c-sage); color: var(--c-alabaster); transform: none; opacity: 1; pointer-events: auto; transition: none; overflow-y: auto; }
.site-nav:not([open]) { display: none; }
.site-nav[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px; }
.site-nav::backdrop { background: var(--c-sage); }
.nav-close { display: inline-flex; position: absolute; top: 24px; right: var(--gutter); align-items: center; gap: 16px; width: auto; height: auto; min-height: 48px; background: transparent; color: var(--c-alabaster); border: 0; border-radius: 0; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.nav-close span { font-size: 2rem; font-weight: 300; }
.menu-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.site-nav .nav-link { display: block; font-family: var(--font-serif); font-size: clamp(3.5rem, 8vw, 6rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; padding: 8px 0; color: var(--c-alabaster); text-transform: none; text-decoration: none; border: 0; }
.site-nav .nav-link[aria-current="page"] { color: var(--c-alabaster); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 12px; }
.site-nav a:focus-visible, .site-nav button:focus-visible { outline-color: var(--c-alabaster); }
.menu-note { margin: 0; font-size: 1rem; }
.noscript-nav { display: flex; flex-wrap: wrap; gap: 16px; grid-column: 1 / -1; }
.noscript-nav a { min-height: 44px; padding-block: 8px; }
html:not(.js) .nav-toggle { display: none; }
/* A full-strength floral field. The solid nameplate is the only reading zone. */
.home-entrance { position: relative; isolation: isolate; display: grid; align-content: center; min-height: calc(100svh - var(--header-h) - 80px); padding-block: clamp(112px, 20vh, 240px); }
.home-entrance__flowers { position: absolute; inset: 0; z-index: -1; background: var(--c-sage) url('/assets/images/sarviWebBG-web.jpg') center / cover no-repeat; }
.home-nameplate { background: var(--c-alabaster); padding: 32px var(--gutter) 40px; text-align: center; }
.home-nameplate h1 { margin: 0 0 24px; font-size: clamp(4.25rem, 9.8vw, 10rem); font-weight: 400; line-height: .9; letter-spacing: -.02em; }
.home-nameplate h1 span { display: inline-block; }
.home-nameplate p { max-width: none; margin: 0; font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: .025em; }
/* Quiet interior titles and generous editorial rows. */
.editorial-heading { padding-top: 64px; padding-bottom: 64px; }
.editorial-heading h1 { margin: 0; }
.service-list { padding-bottom: 96px; }
.service-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 112px); align-items: center; padding-block: 64px; border-top: 1px solid var(--line-strong); }
.service-row:first-child { padding-top: 0; border: 0; }
.service-row:last-child { padding-bottom: 0; }
.service-row:nth-child(2) .photo-slot { background: var(--c-sage); color: var(--c-alabaster); }
.service-row:nth-child(3) .photo-slot { background: var(--c-onyx); color: var(--c-alabaster); }
.service-row__body h2 { max-width: 12ch; margin-bottom: 24px; }
.service-promise { max-width: 28ch; margin-bottom: 32px; }
.service-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; font-size: 1rem; margin-bottom: 24px; }
.service-price { color: var(--c-accent); font-family: var(--font-serif); font-size: 2.5rem; line-height: 1; }
.service-details { margin-top: 32px; max-width: 36ch; font-size: 1rem; }
.service-details summary, .booking-notes summary { cursor: pointer; padding-block: 16px; min-height: 48px; }
.service-details div { padding-block: 8px; }
.service-details ul { padding-left: 20px; }
.service-details li { margin-bottom: 8px; }
.service-details p { margin-top: 16px; }
/* Explicit photo mats reserve useful crops, without borrowing anybody's identity. */
.photo-slot { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; min-width: 0; width: 100%; margin: 0; background: var(--c-blush); color: var(--c-onyx); }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot--editorial { aspect-ratio: 5 / 4; }
.photo-slot__frame { position: absolute; inset: 24px; border: 1px solid currentColor; opacity: .35; }
.photo-slot figcaption { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 80%; font-size: 1rem; padding: 24px; text-align: center; }
.photo-slot figcaption span:first-child { font-family: var(--font-serif); font-size: 2rem; }
.photo-slot figcaption span:last-child { font-size: 1rem; }
.consult-section { position: relative; overflow: hidden; scroll-margin-top: 112px; background: var(--c-blush); }
.consult-flowers { position: absolute; inset: 0 0 0 75%; background: url('/assets/images/sarviWebBG-web.jpg') 18% center / cover; }
.consult-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding-block: 96px; background: var(--c-blush); background-clip: content-box; }
.consult-layout > div { background: var(--c-blush); }
.consult-layout h2 { max-width: 12ch; margin: 0; }
.consult-body { padding-right: 32px; }
.consult-meta { font-size: 1rem; font-weight: 600; margin-bottom: 24px; }
.consult-body > p:not(.consult-meta) { max-width: 36ch; margin-bottom: 32px; }
.booking-notes { padding-block: 32px 64px; }
.booking-notes details { max-width: 720px; font-size: 1rem; }
.booking-notes details div { padding-top: 16px; }
/* Portrait and story together; the two approved passages have their own reading space. */
.about-intro { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); align-items: center; gap: clamp(48px, 8vw, 112px); padding-bottom: 96px; }
.about-intro__body p { max-width: 38ch; margin: 32px 0 0; }
.about-work { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 112px); padding-block: 64px 96px; border-top: 1px solid var(--line-strong); }
.about-work h2 { max-width: 10ch; }
.about-work p { max-width: 38ch; margin-bottom: 32px; }
.about-work p:last-child { margin-bottom: 0; }
.about-who { background: var(--c-sage); color: var(--c-alabaster); }
.about-who__inner { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 112px); padding-block: 80px; }
.about-who h2 { color: var(--c-alabaster); max-width: 10ch; }
.about-who p { max-width: 38ch; margin: 0; font-size: 1.25rem; font-weight: 500; }
.about-invitation { padding-block: 96px; }
.about-invitation h2 { margin-bottom: 32px; }
/* Five questions, with persistent labels. */
.contact-sheet { max-width: 1040px; padding-top: 64px; padding-bottom: 96px; }
.contact-sheet h1 { margin-bottom: 64px; }
.contact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.form-field { margin-bottom: 32px; }
.form-field label { font-size: 1rem; font-weight: 500; margin-bottom: 8px; }
.required-note, .optional-note { font-weight: 400; }
.form-field input, .form-field select, .form-field textarea { border: 1px solid var(--c-sage); border-radius: 0; background: var(--c-alabaster); color: var(--c-onyx); min-height: 56px; padding: 16px; font-size: max(1rem, 16px); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--c-accent); }
.form-field textarea { min-height: 136px; resize: vertical; }
.contact-send { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; margin-top: 40px; }
.contact-privacy { display: inline-flex; align-items: center; min-height: 44px; font-size: 1rem; text-underline-offset: 4px; }
.form-status { margin-top: 24px; }
.field-error, .form-error-banner { color: var(--c-accent); font-size: 1rem; }
.hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* A single compact closing line; the home entrance stays the whole page. */
.site-footer { background: var(--c-alabaster); background-image: none; color: var(--c-onyx); padding: 0 var(--gutter); }
.footer-line { max-width: calc(var(--container-max) - 2 * var(--gutter)); margin-inline: auto; min-height: 80px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; border-top: 1px solid var(--line-strong); padding-block: 16px; font-size: 1rem; }
.home-page .footer-line { border-top: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer a { color: var(--c-onyx); display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.footer-copyright { font-size: 1rem; }
.quick-email { background: var(--c-alabaster); border-radius: 0; }
.quick-email__close { min-height: 48px; min-width: 48px; }
/* Auxiliary states share the type and solid reading zones. */
.message-page { min-height: 68svh; padding-block: 96px; }
.message-page h1 { font-size: clamp(3.5rem, 7vw, 7rem); margin-bottom: 32px; }
.message-page p { margin-bottom: 32px; }
.privacy-hero .h1 { font-size: clamp(3rem, 7vw, 6rem); }
.privacy-who { background: var(--c-onyx); }
.privacy-who p, .privacy-who h2 { color: var(--c-alabaster); }
.privacy-cta { background: var(--c-alabaster); color: var(--c-onyx); }
.privacy-cta h2 { color: var(--c-onyx); }
.privacy-cta .btn-primary { background: var(--c-accent); color: var(--c-blush); }
.error-page { text-align: left; }
.login__card { border-radius: 0; }
.login__floral { background-image: url('/assets/images/sarviWebBG-web.jpg'); }
.login__card { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .text-link:hover { color: var(--c-onyx); }
  .nav-link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 12px; }
}
@media (max-width: 760px) {
  :root { --header-h: 80px; }
  .site-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .header-wordmark { display: none; }
  .nav-toggle { font-size: 1rem; gap: 8px; padding-left: 0; min-width: 0; }
  .header-consult { font-size: 1rem; min-width: 0; }
  .home-entrance { min-height: calc(100svh - 160px); padding-block: 112px; }
  .home-nameplate { padding-block: 32px; }
  .home-nameplate h1 { font-size: clamp(3.5rem, 16vw, 7rem); line-height: .95; }
  .home-nameplate h1 span { display: block; }
  .home-nameplate p { max-width: 26ch; margin-inline: auto; }
  .editorial-heading { padding-block: 48px; }
  .service-list { padding-bottom: 64px; }
  .service-row, .about-intro, .about-work, .about-who__inner, .consult-layout { grid-template-columns: 1fr; gap: 32px; }
  .service-row { padding-block: 48px; }
  .service-row__body h2 { max-width: none; }
  .service-promise { max-width: 34ch; }
  .photo-slot--editorial { aspect-ratio: 5 / 4; }
  .consult-layout { padding-block: 64px; background: var(--c-blush); }
  .consult-flowers { display: none; }
  .consult-body { padding-right: 0; }
  .about-intro { padding-bottom: 64px; }
  .about-intro .photo-slot { max-width: 480px; }
  .about-work { padding-block: 48px 64px; }
  .about-who__inner { padding-block: 64px; }
  .about-invitation { padding-block: 64px; }
  .contact-sheet { padding-block: 48px 64px; }
  .contact-sheet h1 { margin-bottom: 48px; }
  .contact-pair { grid-template-columns: 1fr; gap: 0; }
  .footer-line { padding-block: 16px 24px; justify-content: flex-start; }
  .footer-location { flex-basis: 100%; }
  .footer-copyright { flex-basis: 100%; }
  .home-page .footer-copyright { display: none; }
  .message-page { padding-block: 64px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (forced-colors: active) { .home-entrance__flowers, .consult-flowers { background-image: none; } .photo-slot__frame { opacity: 1; } .site-nav, .site-nav .nav-link, .nav-close { color: CanvasText; background: Canvas; } }
