:root{
  --cream:#F4EEE4;
  --paper:#FBF7F1;
  --cream-deep:#EAE0D1;
  --blush:#E0B4B6;
  --blush-soft:#EFDAD8;
  --blush-deep:#C68A8F;
  --wine:#7C3E48;
  --wine-deep:#57262F;
  --ink:#241F1B;
  --ink-soft:#5C534B;
  --ink-faint:#8B8076;
  --gold:#E2B77E;
  --gold-soft:#EFD9BC;
  --line: rgba(36,31,27,0.14);
  --shadow: rgba(69,32,34,0.22);
  --radius: 2px;
  --container: 1180px;
  --ease: cubic-bezier(.22,.7,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Cormorant Garamond', serif;
  font-size:18px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button{ font-family:inherit; }

.eyebrow{
  font-family:'Mrs Saint Delafield', cursive;
  font-size:1.9rem;
  color:var(--wine);
  margin:0 0 .1em;
  line-height:1;
  font-weight:400;
}
.container{ max-width:var(--container); margin:0 auto; padding:0 clamp(20px,5vw,64px); }
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:440; color:var(--ink); margin:0; }
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
  letter-spacing:.03em;
  padding:.85em 1.7em;
  border-radius:var(--radius);
  border:1px solid var(--ink);
  cursor:pointer;
  text-decoration:none;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .3s var(--ease);
}
.btn-primary{ background:var(--wine); border-color:var(--wine); color:var(--paper); }
.btn-primary:hover{ background:var(--wine-deep); border-color:var(--wine-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--wine); outline-offset:3px;
}

/* reveal-on-scroll — only hidden once JS confirms it can reveal them again */
.has-js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.has-js .reveal.in-view{ opacity:1; transform:none; }

/* ---------- NAV ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  background:rgba(251,247,241,0.88);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; }
.wordmark{
  font-family:'Fraunces', serif; font-weight:500; font-size:1.15rem;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--ink);
}
.wordmark span{ color:var(--wine); }
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ text-decoration:none; font-size:1.02rem; letter-spacing:.02em; color:var(--ink-soft); position:relative; }
.nav-links a:not(.nav-cta):after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--wine);
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-links a:not(.nav-cta):hover:after{ transform:scaleX(1); }
.nav-links a:not(.nav-cta):hover{ color:var(--ink); }
.nav-cta{
  border:1px solid var(--ink); padding:.55em 1.3em; border-radius:var(--radius);
  color:var(--ink); transition:background .3s var(--ease), color .3s var(--ease);
}
.nav-cta:hover{ background:var(--ink); color:var(--paper); }
/* 44x44 hit area (the icon itself stays 34x26, inset by the offsets below).
   This is the only way into the menu on a phone, so it needs a real target. */
.nav-toggle{
  display:none; width:44px; height:44px; position:relative; background:none; border:none; cursor:pointer; padding:0;
  margin-right:-5px; /* keeps the icon optically aligned with the container edge */
}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:""; position:absolute; left:5px; right:5px; height:1px; background:var(--ink); transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle::before{ top:11px; }
.nav-toggle span{ top:50%; transform:translateY(-50%); }
.nav-toggle::after{ bottom:11px; }
.nav-toggle[aria-expanded="true"]::before{ top:50%; transform:translateY(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span{ opacity:0; }
.nav-toggle[aria-expanded="true"]::after{ bottom:50%; transform:translateY(50%) rotate(-45deg); }
.nav-mobile{
  display:none; flex-direction:column; gap:2px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
}
.nav-mobile a{ text-decoration:none; color:var(--ink); font-size:1.2rem; padding:12px 0; border-bottom:1px solid var(--line); }
.nav-mobile.open{ display:flex; }

/* ---------- HERO ---------- */
.hero{
  position:relative; overflow:hidden;
  /* tied to vh as well as px so the whole composition still fits on short
     laptop viewports instead of pushing the buttons below the fold */
  padding:clamp(112px, 15vh, 150px) 0 clamp(64px, 9vh, 90px);
  min-height:88vh;
  min-height:88svh;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse 80% 60% at 82% 8%, var(--blush-soft) 0%, transparent 60%),
    linear-gradient(160deg, var(--paper) 0%, var(--cream) 46%, var(--cream-deep) 100%);
}
.hero-arcs{ position:absolute; inset:0; z-index:0; opacity:.34; pointer-events:none; }
.hero-arcs svg{ position:absolute; top:-6%; right:-8%; width:min(58vw,720px); height:auto; }
.arc-set line{ stroke:var(--blush); stroke-width:2.4; }
.arc-2{ opacity:.5; }
.arc-2 line{ stroke:var(--gold); }

.hero .container{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.hero-content{ max-width:620px; }
.hero-title{
  font-size:clamp(2.4rem, 4.2vw, 3.7rem);
  line-height:1.06;
  font-weight:400;
  margin:.2em 0 .5em;
  letter-spacing:-.01em;
}
.hero-sub{ color:var(--ink-soft); font-size:1.18rem; max-width:46ch; margin:0 auto 2em; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }

/* ---- self-drawing line-art bouquet, traced from the client's drawing ---- */
/* Sits behind the copy as the hero's backdrop rather than in a boxed column. */
.hero-bouquet{
  position:absolute; z-index:0; pointer-events:none;
  left:50%; top:46%; transform:translate(-50%,-50%);
  width:min(620px, 62vw, 92vh);
  width:min(620px, 62vw, 92svh);
  animation:breathe 12s ease-in-out infinite; animation-delay:3.4s;
}
@keyframes breathe{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.014);} }
.bouquet-svg{ width:100%; height:auto; display:block; overflow:visible; }

/* Cream veil between the bouquet and the copy, so the headline never has to
   compete with the linework underneath it. */
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 62% 46% at 50% 62%, var(--cream) 0%, rgba(244,238,228,.72) 42%, transparent 74%);
}

.petal{
  fill:var(--wash, var(--blush));
  fill-opacity:0;
  stroke:var(--wine);
  stroke-width:1.5;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  /* inner blooms sit darker than the outer leaves, so the bouquet has depth
     instead of reading as one flat sheet of linework */
  opacity:calc(.78 - var(--b) * .022);
  animation:
    petaldraw .9s cubic-bezier(.5,.05,.2,1) forwards,
    petalfill 1.3s ease forwards;
  /* staggered by radial band (--b), not by path index: 111 petals at a
     per-path delay would run for six seconds. */
  animation-delay:
    calc(var(--b) * .085s),
    calc(var(--b) * .085s + .5s);
}
@keyframes petaldraw{ to{ stroke-dashoffset:0; } }
@keyframes petalfill{ to{ fill-opacity:var(--fo,.3); } }

/* ---- the FloralsRomero signature, written on last and on top ---- */
/* Traced from her card by tools/trace-signature.py: a filled outline of the
   real monoline script, not a redrawn approximation. Because it's a filled
   shape rather than a stroke, it reveals with a left-to-right clip wipe —
   which on a signature reads as the pen writing it. */
.monogram-wrap{
  position:relative;
  width:clamp(300px, 43vw, 470px);
  margin:0 auto clamp(18px, 3vh, 32px);
}
.monogram-wrap::before{
  content:""; position:absolute; inset:-26% -10%; z-index:0;
  background:radial-gradient(ellipse 56% 54% at 50% 50%, var(--cream) 0%, rgba(244,238,228,.58) 52%, transparent 78%);
  opacity:0; animation:washin 1.3s var(--ease) forwards; animation-delay:1.1s;
}
@keyframes washin{ to{ opacity:1; } }
.monogram{
  position:relative; z-index:1;
  display:block; width:100%; height:auto;
  clip-path:inset(0 100% 0 0);
  animation:writeon 1.75s cubic-bezier(.42,.02,.24,1) forwards; animation-delay:1.35s;
}
/* ends slightly past the right edge so antialiasing isn't shaved off the tail */
@keyframes writeon{ to{ clip-path:inset(0 -5% 0 0); } }
.monogram .mk{ fill:var(--wine); }

/* With her script signature now sitting directly above it, the hero eyebrow
   can't also be script — two cursives stacked read as an echo. Tracked caps
   instead, which is how "ZAIRA ROMERO / Florist" is set on her card, and gives
   script -> caps -> serif down the stack. Other sections keep their script. */
.hero .eyebrow{
  font-family:'Fraunces', serif;
  font-size:.78rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--blush-deep); margin-bottom:1.1em;
}

/* ---------- CLOSING CTA (home page) ---------- */
.cta{ padding:118px 0 130px; background:var(--paper); border-top:1px solid var(--line); }
.cta-inner{ max-width:620px; margin:0 auto; text-align:center; }
.cta-art{ width:62px; height:auto; color:var(--blush-deep); margin:0 auto 18px; display:block; overflow:visible; }
.cta h2{ font-size:clamp(2rem,2.8vw,2.7rem); margin-bottom:.45em; }
.cta-sub{ color:var(--ink-soft); font-size:1.12rem; margin:0 auto 2em; max-width:46ch; }

/* ---------- STUDIO ---------- */
.studio{ padding:120px 0; background:var(--paper); overflow:hidden; }
.studio .container{ display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.studio-art{ color:var(--blush-deep); }
/* The peony is traced ink (a filled shape), not strokes — so it takes its
   colour from fill, and currentColor keeps the .studio-art hook working. */
.studio-art svg{ width:100%; max-width:300px; height:auto; overflow:visible; margin:0 auto; }
.studio-peony path{ fill:currentColor; }
.studio-copy h2{ font-size:clamp(2.1rem,3vw,2.9rem); margin-bottom:.5em; }
.studio-copy p{ color:var(--ink-soft); font-size:1.15rem; max-width:52ch; }
.pull-quote{
  font-family:'Mrs Saint Delafield', cursive; font-size:1.9rem; color:var(--wine);
  line-height:1.35; margin-top:1.1em; max-width:20ch;
}

/* ---------- LOOKBOOK / GALLERY ---------- */
.lookbook{ padding:120px 0 130px; background:var(--cream); }
.section-head{ text-align:center; max-width:640px; margin:0 auto 68px; }
.section-head h2, .section-head h1{ font-size:clamp(2.1rem,3vw,2.9rem); }

.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:38px 30px; align-items:start;
}
.gal-item{ margin:0; }
/* Lift the middle column and give each column a different tilt, so 16 photos
   read as a hand-laid spread rather than a product grid.
   The `.gallery-grid` prefix is load-bearing: these need specificity (0,3,0)
   to beat `.has-js .reveal.in-view{ transform:none }`, which these figures
   also match. Gallery tiles therefore fade in without the slide-up. */
.gallery-grid .gal-item:nth-child(3n+1){ transform:rotate(-1.2deg); }
.gallery-grid .gal-item:nth-child(3n+2){ transform:translateY(-38px) rotate(.9deg); }
.gallery-grid .gal-item:nth-child(3n+3){ transform:rotate(-.5deg); }

.gal-open{
  display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in;
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 24px 40px -18px var(--shadow);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.gal-open img{
  /* height:auto is required — the img's height="" attribute otherwise wins
     over aspect-ratio and the tile renders at the photo's full height. */
  width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.gal-open:hover{ box-shadow:0 30px 52px -18px var(--shadow); }
.gal-open:hover img{ transform:scale(1.045); }
.gal-item figcaption{
  margin-top:14px; font-size:.95rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-faint); text-align:center;
}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; gap:clamp(4px,2vw,24px);
  background:rgba(23,19,17,.95);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:clamp(16px,4vw,48px);
  animation:lbin .3s var(--ease);
}
@keyframes lbin{ from{ opacity:0; } to{ opacity:1; } }
.lb-figure{ margin:0; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:16px; min-width:0; }
.lb-figure img{
  max-width:100%; max-height:78vh; width:auto; object-fit:contain;
  border-radius:var(--radius); box-shadow:0 30px 60px rgba(0,0,0,.45);
}
.lb-figure figcaption{
  color:var(--cream-deep); font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; text-align:center;
}
.lb-close, .lb-nav{
  flex:none; background:none; border:1px solid rgba(244,238,228,.35); color:var(--cream);
  cursor:pointer; border-radius:50%; line-height:1;
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.lb-close:hover, .lb-nav:hover{ background:rgba(244,238,228,.14); border-color:var(--cream); }
.lb-nav{ width:52px; height:52px; font-size:2rem; }
.lb-close{
  position:absolute; top:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px);
  width:44px; height:44px; font-size:1.7rem; z-index:1;
}

/* ---------- ORDER PORTAL ---------- */
.order{ padding:120px 0 140px; background:var(--paper); position:relative; }
/* order.html stands alone under the fixed nav, so it needs the same top
   clearance as .legal rather than the in-page section padding */
.order-page{ padding-top:150px; }
.order-intro{ color:var(--ink-soft); font-size:1.15rem; margin-top:.6em; }
.order-ticket, .order-success{
  max-width:760px; margin:0 auto; background:var(--cream); border-radius:6px;
  padding:clamp(28px,5vw,56px); position:relative;
  box-shadow:0 40px 70px -40px var(--shadow);
  border:1px solid var(--line);
}
.perforation{
  position:absolute; top:0; left:0; right:0; height:0; border-top:2px dashed var(--blush-deep); opacity:.5;
}
.field-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:24px; }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:24px; }
.field-grid .field{ margin-bottom:0; }
.field-label{
  font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.field-label em{ font-style:italic; text-transform:none; letter-spacing:0; opacity:.75; }
input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea, .other-input{
  font-family:'Cormorant Garamond', serif; font-size:1.12rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:.75em .9em; width:100%;
}
textarea{ resize:vertical; min-height:110px; }
.other-input{ margin-top:12px; }
::placeholder{ color:var(--ink-faint); }

.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  border:1px solid var(--line); background:var(--paper); color:var(--ink-soft);
  display:inline-flex; align-items:center; min-height:44px;
  padding:.55em 1.15em; border-radius:22px; font-size:1rem; cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover{ border-color:var(--blush-deep); }
.chip.active{ background:var(--wine); border-color:var(--wine); color:var(--paper); }

.upload-zone{
  display:block; border:1px dashed var(--blush-deep); border-radius:var(--radius);
  padding:28px; text-align:center; cursor:pointer; background:var(--paper);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.upload-zone.dragging{ background:var(--blush-soft); border-color:var(--wine); }
.upload-empty svg{ width:30px; height:30px; margin:0 auto 10px; color:var(--blush-deep); }
.upload-empty p{ margin:0; color:var(--ink-soft); font-size:1.02rem; }
.upload-preview{ display:flex; align-items:center; gap:16px; text-align:left; }
.upload-preview img{ width:84px; height:84px; object-fit:cover; border-radius:var(--radius); }
.upload-remove{
  border:1px solid var(--line); background:none; color:var(--ink-soft); padding:.5em 1em;
  border-radius:var(--radius); cursor:pointer; font-family:'Cormorant Garamond',serif; font-size:.95rem;
}
.upload-remove:hover{ border-color:var(--wine); color:var(--wine); }

.btn-submit{ width:100%; justify-content:center; font-size:1.15rem; padding:1em; margin-top:8px; }

.order-success{ text-align:center; }
.order-success h3{ font-size:2rem; margin:.3em 0; }
.order-success p{ color:var(--ink-soft); font-size:1.1rem; }
.order-success .btn{ margin-top:22px; }

/* screen-reader-only label: present for AT, invisible on screen */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Honeypot. Moved off-screen rather than display:none — bots that skip
   hidden inputs still fill this one in, which is the whole point. */
.hp-field{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}

.consent{ margin-bottom:20px; }
.consent-row{
  display:flex; align-items:flex-start; gap:12px; cursor:pointer;
  font-size:1.02rem; color:var(--ink-soft); line-height:1.45;
}
.consent-row input[type=checkbox]{
  flex:none; width:19px; height:19px; margin-top:.18em;
  accent-color:var(--wine); cursor:pointer;
}
.consent-row a{ color:var(--wine); text-underline-offset:2px; }

.field-note{ font-size:1rem; color:var(--wine-deep); margin:10px 0 0; }
.form-error{
  font-size:1.02rem; color:var(--wine-deep); margin:0 0 16px;
  background:var(--blush-soft); border:1px solid var(--blush-deep);
  border-radius:var(--radius); padding:.85em 1em;
}
.btn[disabled]{ opacity:.6; cursor:progress; }
.btn[disabled]:hover{ transform:none; background:var(--wine); border-color:var(--wine); }

/* ---------- LEGAL / PRIVACY PAGE ---------- */
.legal{ padding:150px 0 110px; background:var(--paper); }
.legal-inner{ max-width:720px; margin:0 auto; }
.legal h1{ font-size:clamp(2.1rem,3.4vw,3rem); margin-bottom:.2em; }
.legal h2{ font-size:1.45rem; margin:2.2em 0 .5em; }
.legal p, .legal li{ color:var(--ink-soft); font-size:1.1rem; }
.legal ul{ padding-left:1.2em; }
.legal li{ margin-bottom:.5em; }
.legal a{ color:var(--wine); text-underline-offset:2px; }
.legal-updated{ font-size:.95rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); }

/* ---------- FOOTER ---------- */
.site-footer{
  position:relative; overflow:hidden;
  background:var(--ink); color:var(--cream-deep);
  padding:90px 0 40px; text-align:center;
}
.footer-arcs{ position:absolute; inset:0; opacity:.14; pointer-events:none; }
.footer-arcs svg{ position:absolute; bottom:-30%; left:50%; transform:translateX(-50%) rotate(180deg); width:min(90vw,900px); }
.footer-arcs line{ stroke:var(--blush); stroke-width:2; }
.footer-mark{ font-family:'Mrs Saint Delafield', cursive; font-size:3rem; color:var(--blush); margin:0; position:relative; z-index:1; }
.footer-name{
  font-family:'Fraunces', serif; letter-spacing:.24em; text-transform:uppercase; font-size:1rem;
  margin:.3em 0 1.4em; color:var(--paper); position:relative; z-index:1;
}
.footer-contact{ list-style:none; display:flex; justify-content:center; gap:16px 28px; flex-wrap:wrap; padding:0; margin:0 0 32px; position:relative; z-index:1; }
.footer-contact a{
  text-decoration:none; color:var(--cream-deep); font-size:1.05rem;
  border-bottom:1px solid transparent;
  /* padded to a ~44px tap target — these are phone/email links on a phone */
  display:inline-block; padding:11px 4px;
  transition:border-color .25s var(--ease), color .25s var(--ease);
}
.footer-contact a:hover{ color:var(--blush); border-color:var(--blush); }
.footer-credit{ font-size:.85rem; color:var(--ink-faint); position:relative; z-index:1; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .nav-links{ display:none; }
  .nav-toggle{ display:block; }
  .hero-content{ max-width:640px; margin:0 auto; }
  .studio .container{ grid-template-columns:1fr; gap:40px; text-align:center; }
  .studio-art{ max-width:280px; margin:0 auto; }
  .studio-copy p{ margin-left:auto; margin-right:auto; }
  .pull-quote{ margin-left:auto; margin-right:auto; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:30px 22px; }
  .gallery-grid .gal-item:nth-child(3n+1),
  .gallery-grid .gal-item:nth-child(3n+2),
  .gallery-grid .gal-item:nth-child(3n+3){ transform:none; }
  .gallery-grid .gal-item:nth-child(2n){ transform:translateY(-26px); }
  .field-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  body{ font-size:17px; }
  .hero{ padding-top:120px; }
  .hero-bouquet{ width:112vw; top:44%; opacity:.85; }
  .monogram-wrap{ margin-bottom:16px; }
  /* tighten the tracking so the eyebrow stays on one line at 390px */
  .hero .eyebrow{ font-size:.7rem; letter-spacing:.16em; }
  .gallery-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; gap:26px; }
  .gallery-grid .gal-item, .gallery-grid .gal-item:nth-child(2n){ transform:none; }
  .lb-nav{ width:44px; height:44px; font-size:1.6rem; }
  .footer-contact{ flex-direction:column; gap:14px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-bouquet{ animation:none !important; }
  /* show the finished bouquet and monogram immediately, no drawing */
  .petal{ animation:none !important; stroke-dashoffset:0; fill-opacity:var(--fo,.3); }
  .monogram{ animation:none !important; clip-path:none; }
  .monogram-wrap::before{ animation:none !important; opacity:1; }
  .lightbox{ animation:none !important; }
  .gal-open img, .gal-open{ transition:none !important; }
  .gallery-grid .gal-item{ transform:none !important; }
  .gal-open:hover img{ transform:none; }
  /* These must match the specificity of the `.has-js .reveal` rules above
     (0,2,0 and 0,3,0) — a bare `.reveal` here is only (0,1,0) and loses the
     cascade, leaving reduced-motion users with the fade-in anyway. Equal
     specificity + later in the file means these win. */
  .has-js .reveal, .has-js .reveal.in-view{ opacity:1; transform:none; transition:none; }
}