/* ============================================================
   Casa Ochoa Events - audio & video guestbooks
   Design system: elegant Mexican hacienda.
   Accent locked to talavera cobalt (--azul #1D4E89) on every
   surface. Neutrals are limewashed plaster and cantera stone.
   Display: EB Garamond (inscriptional, carved-stone).
   Body: Karla (humanist).
   Ornament: round-headed hacienda arches + one talavera tile band.
   ============================================================ */


:root{
  --bg:#F5F4F0;            /* limewashed plaster */
  --bg-warm:#E9E6DD;       /* cantera stone panel */
  --bg-deep:#12202E;       /* deep indigo-slate (footer / dark sections) */
  --ink:#1E242B;           /* cool near-black text */
  --ink-soft:#5A626C;      /* muted body */
  --azul:#1D4E89;          /* THE accent - talavera cobalt */
  --azul-deep:#14375F;
  --sage:#A9C4E0;          /* pale azul, for text on dark */
  --tile-wash:#DCE7F2;     /* pale talavera wash */
  --copper:#B0714A;        /* warm metallic hairline, sparing */
  --line:#DCD8CE;          /* stone hairline */
  --white:#FCFCFA;
  --r-card:16px;
  --r-input:9px;
  --arch-h:50%;            /* arch head: horizontal radius, half the width */
  --arch-v:34%;            /* arch head: vertical radius, the dome rise */
  --maxw:1240px;
  --shadow:0 24px 60px -28px rgba(18,32,46,.34);
  --shadow-sm:0 12px 30px -18px rgba(18,32,46,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Karla',system-ui,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'EB Garamond',Georgia,serif;font-weight:500;margin:0;line-height:1.06;letter-spacing:.005em}
p{margin:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:600;color:var(--azul);
}
.eyebrow.on-dark{color:var(--sage)}
.serif-italic{font-family:'EB Garamond',serif;font-style:italic;font-weight:500}

/* ---------- buttons (pill, consistent) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  font-family:'Karla',sans-serif;font-weight:600;font-size:15px;
  letter-spacing:.01em;padding:14px 28px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;transition:transform .18s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--azul);color:var(--white)}
.btn-primary:hover{background:var(--azul-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--azul);border-color:var(--azul)}
.btn-ghost:hover{background:var(--azul);color:var(--white);transform:translateY(-2px)}
.btn-light{background:var(--white);color:var(--azul);border-color:var(--line)}
.btn-light:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-on-dark{background:var(--tile-wash);color:var(--azul-deep)}
.btn-on-dark:hover{background:var(--white);transform:translateY(-2px)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(245,244,240,.88);backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:18px}
.brand{display:flex;align-items:baseline;gap:.5ch;font-family:'EB Garamond',serif;font-size:30px;font-weight:600;letter-spacing:.01em;color:var(--azul)}
.brand small{font-family:'Karla',sans-serif;font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;transform:translateY(-2px)}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink);position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1.5px;background:var(--azul);transition:right .25s ease}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-toggle{display:none}
.hamburger{display:none}
.mobile-menu{display:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Scrim is tuned for the blue hour hacienda shot, which is already dark.
   Kept just heavy enough on the left for AA contrast under the headline
   while letting the arcade read on the right. */
.hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(14,26,38,.80) 0%, rgba(14,26,38,.58) 44%, rgba(14,26,38,.30) 80%, rgba(14,26,38,.18) 100%),
  linear-gradient(180deg, rgba(14,26,38,.20) 0%, rgba(14,26,38,.12) 32%, rgba(14,26,38,.44) 70%, rgba(14,26,38,.72) 100%)}
.hero-inner{position:relative;z-index:2;padding-bottom:64px;padding-top:120px;color:var(--white)}
.hero h1{font-size:clamp(48px,8vw,104px);color:var(--white);font-weight:500;max-width:14ch;text-shadow:0 2px 26px rgba(8,16,26,.7),0 1px 3px rgba(8,16,26,.6)}
.hero h1 em{font-style:italic;color:#DCE7F2}
.hero .lede{max-width:46ch;margin-top:22px;font-size:clamp(17px,2.1vw,21px);color:#EEF3F8;line-height:1.55;text-shadow:0 1px 14px rgba(8,16,26,.8),0 1px 2px rgba(8,16,26,.6)}
.hero .hero-actions{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero .kicker{font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:#DCE7F2;font-weight:600;margin-bottom:18px;text-shadow:0 1px 12px rgba(8,16,26,.85)}

/* ---------- sections ---------- */
section{padding:clamp(64px,9vw,128px) 0}
.section-head{max-width:62ch}
.section-head h2{font-size:clamp(34px,5vw,60px);margin-top:14px}
.section-head .sub{margin-top:18px;color:var(--ink-soft);font-size:18px;max-width:54ch}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* lead intro */
.intro{background:var(--bg-warm)}
.intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.intro h2{font-size:clamp(32px,4.5vw,54px);max-width:18ch}
.intro p{margin-top:20px;color:var(--ink-soft);font-size:18px;max-width:52ch}
.intro-stats{display:flex;gap:38px;margin-top:34px;flex-wrap:wrap}
.intro-stats .n{font-family:'EB Garamond',serif;font-size:46px;color:var(--azul);line-height:1}
.intro-stats .l{font-size:13.5px;color:var(--ink-soft);margin-top:4px;max-width:16ch}
.intro-figure{position:relative}
.intro-figure img{border-radius:var(--r-card);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover}
.intro-figure .tag{position:absolute;left:-18px;bottom:28px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 18px;box-shadow:var(--shadow-sm);max-width:220px}
.intro-figure .tag .serif-italic{color:var(--azul);font-size:22px;display:block;line-height:1.1}
.intro-figure .tag span{font-size:12.5px;color:var(--ink-soft)}

/* the two ways - offerings */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:54px}
.way{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:520px;display:flex;align-items:flex-end;color:var(--white);box-shadow:var(--shadow)}
.way img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.way:hover img{transform:scale(1.05)}
/* The card body starts ~9% down and runs to the base, so the scrim has to
   carry contrast across almost the whole card, not just the bottom edge.
   Keeps the arch crown readable while holding AA on the white copy. */
.way::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(18,32,46,.34) 0%,
  rgba(18,32,46,.62) 26%,
  rgba(18,32,46,.82) 62%,
  rgba(18,32,46,.92) 100%)}
.way-body{position:relative;z-index:2;padding:38px}
.way-body .badge{display:inline-block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;background:var(--tile-wash);color:var(--azul-deep);padding:6px 13px;border-radius:999px;margin-bottom:16px}
.way-body h3{font-size:42px;color:var(--white);line-height:1.02}
/* The subtitle is its own line on every card. Inline, "The Phone audio
   guestbook" broke mid-phrase while the other two happened to fit, so the
   three cards did not share a shape. */
.way-body .es{display:block;margin-top:6px;font-style:italic;color:#C8DCEF;font-size:22px;font-family:'EB Garamond',serif;line-height:1.25}
.way-body p{margin-top:12px;color:#E4EDF6;max-width:40ch;font-size:16px}
.way-body .price{margin-top:16px;font-size:15px;color:#C8DCEF}
.way-body .price b{font-family:'EB Garamond',serif;font-size:30px;color:var(--white);font-weight:600}
.way-body .arrow{margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;border-bottom:1.5px solid rgba(255,255,255,.5);padding-bottom:3px}

/* steps */
.steps{background:var(--bg-deep);color:var(--bg)}
.steps .section-head h2{color:var(--white)}
.steps .section-head .sub{color:#BDD2E6}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:56px}
.step{border-top:1px solid rgba(169,196,224,.32);padding-top:24px}
.step .num{font-family:'EB Garamond',serif;font-size:30px;color:var(--sage);font-style:italic}
.step h3{font-size:28px;color:var(--white);margin-top:10px}
.step p{margin-top:10px;color:#A9C4E0;font-size:15.5px;max-width:34ch}

/* editing tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px}
.tier{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:34px 30px;transition:transform .25s ease,box-shadow .25s ease}
.tier:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tier .ic{width:46px;height:46px;color:var(--azul)}
.tier h3{font-size:30px;margin-top:18px}
.tier .es{font-style:italic;color:var(--copper);font-size:18px;font-family:'EB Garamond',serif}
.tier p{margin-top:10px;color:var(--ink-soft);font-size:15.5px}
.tier .meta{margin-top:18px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);font-weight:600}

/* audience split */
.aud{background:var(--bg-warm)}
.aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:48px}
.aud-card{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:460px;display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow)}
.aud-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.aud-card:hover img{transform:scale(1.04)}
.aud-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,32,46,.1),rgba(18,32,46,.78))}
.aud-card .b{position:relative;z-index:2;padding:36px}
.aud-card h3{font-size:40px;color:#fff}
.aud-card .es{font-style:italic;color:#C8DCEF;font-size:21px;font-family:'EB Garamond',serif}
.aud-card p{margin-top:12px;color:#E4EDF6;font-size:15.5px;max-width:38ch}
.aud-card .arrow{margin-top:18px;display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:14px;border-bottom:1.5px solid rgba(255,255,255,.5);padding-bottom:3px}

/* experiences / add-ons grid */
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:50px}
.exp{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:28px;transition:transform .2s ease,border-color .2s ease}
.exp:hover{transform:translateY(-4px);border-color:var(--sage)}
.exp .ic{width:34px;height:34px;color:var(--azul);margin-bottom:14px}
.exp h4{font-size:25px}
.exp .es{font-style:italic;color:var(--copper);font-family:'EB Garamond',serif;font-size:16px}
.exp p{margin-top:8px;color:var(--ink-soft);font-size:14.5px}
.exp .price{margin-top:14px;font-weight:600;color:var(--azul);font-size:14px}

/* audio sample player */
.audio-sample{margin-top:30px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px 20px;max-width:440px;box-shadow:var(--shadow-sm)}
.audio-sample .lbl{font-size:13px;letter-spacing:.03em;color:var(--azul);font-weight:600;display:flex;align-items:center;gap:9px;margin-bottom:12px}
.audio-sample .lbl svg{width:18px;height:18px;flex:none}
.audio-sample audio{width:100%;height:40px;display:block}
.audio-sample .cap{margin-top:10px;font-family:'EB Garamond',serif;font-style:italic;font-size:17px;color:var(--ink-soft)}

/* photo booth band */
.pbooth-grid{display:grid;grid-template-columns:.8fr 1.1fr;gap:60px;align-items:center}
.pbooth-figure{justify-self:center;max-width:300px}
.pbooth-figure img{border-radius:14px;box-shadow:var(--shadow);width:100%}
.pbooth-copy h2{font-size:clamp(32px,4.6vw,54px)}
.pbooth-copy p{margin-top:18px;color:var(--ink-soft);font-size:18px;max-width:48ch}

/* sample video section */
.sample{background:var(--bg-warm)}
.sample-grid{display:grid;grid-template-columns:1fr .82fr;gap:64px;align-items:center}
.sample-copy h2{font-size:clamp(34px,5vw,58px)}
.sample-copy .sub{margin-top:18px;color:var(--ink-soft);font-size:18px;max-width:46ch}
.sample-copy ul{list-style:none;padding:0;margin:26px 0 30px;display:flex;flex-direction:column;gap:12px}
.sample-copy li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px}
.sample-copy li svg{flex:none;width:19px;height:19px;color:var(--azul);margin-top:3px}
.phone-frame{justify-self:center;position:relative;width:296px;max-width:80vw;aspect-ratio:9/19.2;background:#12202E;border-radius:44px;padding:11px;box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.05);border:1px solid #2A323C}
.phone-frame::before{content:"";position:absolute;top:20px;left:50%;transform:translateX(-50%);width:54px;height:6px;border-radius:99px;background:rgba(255,255,255,.18);z-index:3}
.phone-frame video{width:100%;height:100%;object-fit:cover;border-radius:34px;display:block;background:#12202E}
.phone-frame .badge-live{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;background:rgba(18,32,46,.72);backdrop-filter:blur(6px);color:#DCE7F2;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:7px 14px;border-radius:99px;white-space:nowrap}

/* quote */
.quote{background:var(--azul);color:#fff;text-align:center}
.quote blockquote{max-width:24ch;margin:0 auto;font-family:'EB Garamond',serif;font-size:clamp(30px,4.6vw,52px);font-style:italic;line-height:1.18;font-weight:500}
.quote .who{margin-top:26px;font-size:14px;letter-spacing:.04em;color:#C8DCEF}
.quote .who b{color:#fff;font-weight:600}

/* testimonials */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.tcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:30px}
.tcard .stars{color:var(--copper);letter-spacing:3px;font-size:14px}
.tcard p{margin-top:14px;font-family:'EB Garamond',serif;font-style:italic;font-size:22px;line-height:1.3;color:var(--ink)}
.tcard .who{margin-top:18px;font-size:14px;color:var(--ink-soft)}
.tcard .who b{color:var(--ink);font-weight:600;display:block}

/* gallery strip */
.gstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:46px}
.gstrip img{border-radius:12px;aspect-ratio:4/5;object-fit:cover}
.gstrip .tall{grid-row:span 2;aspect-ratio:auto;height:100%}

/* pricing page */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px;align-items:stretch}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:36px 32px;display:flex;flex-direction:column;position:relative}
.plan.featured{border-color:var(--azul);box-shadow:var(--shadow);transform:translateY(-8px)}
.plan .flag{position:absolute;top:-14px;left:32px;background:var(--azul);color:#fff;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;padding:6px 14px;border-radius:999px}
.plan h3{font-size:34px}
.plan .es{font-style:italic;color:var(--copper);font-family:'EB Garamond',serif;font-size:18px}
.plan .cost{margin:18px 0 6px;font-family:'EB Garamond',serif;font-size:54px;color:var(--azul);line-height:1}
.plan .cost small{font-size:16px;color:var(--ink-soft);font-family:'Karla',sans-serif}
.plan .desc{color:var(--ink-soft);font-size:15px;min-height:48px}
.plan ul{list-style:none;margin:22px 0 28px;padding:0;display:flex;flex-direction:column;gap:12px}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:15px}
.plan li svg{flex:none;width:19px;height:19px;color:var(--azul);margin-top:2px}
.plan .btn{margin-top:auto;width:100%}

/* add-on table-ish list */
.addons{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;margin-top:46px}
.addon{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.addon .t{font-weight:600;font-size:16.5px}
.addon .t .es{font-style:italic;color:var(--copper);font-weight:500;font-family:'EB Garamond',serif;font-size:16px;margin-left:8px}
.addon .t p{font-weight:400;color:var(--ink-soft);font-size:14px;margin-top:3px;max-width:42ch}
.addon .p{font-family:'EB Garamond',serif;font-size:26px;color:var(--azul);white-space:nowrap}

/* faq */
.faq-list{max-width:820px;margin:46px auto 0}
.faq-list details{border-bottom:1px solid var(--line);padding:6px 0}
.faq-list summary{cursor:pointer;list-style:none;padding:22px 0;font-size:21px;font-family:'EB Garamond',serif;font-weight:600;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--azul);font-size:28px;font-family:'Karla',sans-serif;transition:transform .2s ease}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list p{padding:0 0 22px;color:var(--ink-soft);font-size:16px;max-width:64ch}

/* big CTA band */
.cta-band{background:var(--bg-deep);color:#fff;text-align:center}
.cta-band h2{font-size:clamp(36px,6vw,72px);color:#fff;max-width:18ch;margin:0 auto}
.cta-band h2 em{color:var(--sage);font-style:italic}
.cta-band p{margin:20px auto 0;color:#BDD2E6;max-width:46ch;font-size:18px}
.cta-band .hero-actions{justify-content:center;display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

/* contact / book form */
.book-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.book-aside h2{font-size:clamp(34px,5vw,56px)}
.book-aside p{margin-top:18px;color:var(--ink-soft);font-size:17px;max-width:42ch}
.book-aside .pts{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-direction:column;gap:16px}
.book-aside .pts li{display:flex;gap:12px;align-items:flex-start}
.book-aside .pts svg{flex:none;width:22px;height:22px;color:var(--azul);margin-top:2px}
.book-aside .pts b{display:block}
.book-aside .pts span{color:var(--ink-soft);font-size:14.5px}
.form{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:36px;box-shadow:var(--shadow-sm)}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-size:13.5px;font-weight:600;letter-spacing:.02em}
.field input,.field select,.field textarea{
  font-family:'Karla',sans-serif;font-size:15.5px;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-input);
  padding:13px 15px;transition:border-color .2s ease,box-shadow .2s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#98A2AE}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,78,137,.14)}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23a9817d' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .note{font-size:13px;color:var(--ink-soft);margin-top:6px}

/* book tool: deposit summary + demo checkout + success */
.sum-date{margin-top:16px;padding-top:14px;border-top:1px solid rgba(169,196,224,.3);color:#A9C4E0;font-size:14px}
.sum-date.set{color:#fff}
.sum-date b{font-family:'EB Garamond',serif;font-size:21px}
.sum-deposit{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;color:#D7E3F0;font-size:13px;letter-spacing:.02em}
.sum-deposit b{font-family:'EB Garamond',serif;font-size:28px;color:#fff}
.sum-balance{font-size:12.5px;color:#A9C4E0;margin-top:3px;text-align:right}
.sum-err{color:#ffb3a8;font-size:13px;min-height:16px;margin-top:10px;text-align:center}
.demo-pay{background:var(--bg-warm);border:1px dashed var(--sage);border-radius:12px;padding:18px}
.demo-pay-note{font-size:12px;color:var(--azul);font-weight:600;text-align:center;margin-bottom:14px;letter-spacing:.02em}
.demo-pay .field{margin-bottom:14px}
.demo-pay .field:last-child,.demo-pay .field-row{margin-bottom:0}
.book-success{position:fixed;inset:0;background:rgba(14,26,38,.62);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:200;padding:24px}
.book-success.show{display:flex}
.bs-card{background:var(--white);border-radius:20px;max-width:480px;width:100%;padding:40px;text-align:center;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.bs-check{width:64px;height:64px;border-radius:50%;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.bs-check svg{width:32px;height:32px}
.bs-card h2{font-size:38px}
.bs-card>p{color:var(--ink-soft);margin-top:12px;font-size:15.5px}
.bs-summary{background:var(--bg-warm);border-radius:12px;padding:18px;margin:22px 0;text-align:left}
.bs-summary .line{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:5px 0;color:var(--ink-soft)}
.bs-summary .line span:last-child{color:var(--ink);font-weight:500;text-align:right}
.bs-summary .line.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:10px}
.bs-summary .line.tot span:last-child{color:var(--azul);font-weight:700}
.bs-fine{font-size:12px;color:var(--ink-soft);margin-top:14px}

/* availability calendar */
.cal{max-width:600px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow-sm)}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-head h3{font-size:24px}
.cal-nav{display:flex;gap:8px}
.cal-nav button{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--white);cursor:pointer;color:var(--azul);font-size:17px;transition:background .15s ease}
.cal-nav button:hover:not(:disabled){background:var(--bg-warm)}
.cal-nav button:disabled{opacity:.35;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding-bottom:6px}
.cal-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:14.5px;border:1px solid transparent}
.cal-day.empty{visibility:hidden}
.cal-day.past{color:#B4C2D2}
.cal-day.open{cursor:pointer;background:var(--bg-warm);color:var(--ink);border-color:var(--line)}
.cal-day.open:hover{border-color:var(--azul);background:#fff;transform:translateY(-1px)}
.cal-day.booked{background:#DCE7F2;color:#5A7FA8;text-decoration:line-through}
.cal-day.booked.admin{cursor:pointer;text-decoration:none}
.cal-day.selected{background:var(--azul)!important;color:#fff!important;border-color:var(--azul)}
.cal-legend{display:flex;gap:22px;justify-content:center;margin-top:18px;font-size:13px;color:var(--ink-soft);flex-wrap:wrap}
.cal-legend span{display:flex;align-items:center;gap:7px}
.cal-legend i{width:14px;height:14px;border-radius:4px;display:inline-block;border:1px solid var(--line)}
.cal-legend i.open{background:var(--bg-warm)}
.cal-legend i.booked{background:#DCE7F2;border-color:#CBDAEA}
.cal-status{text-align:center;margin-top:16px;font-size:15px;min-height:22px;color:var(--azul);font-weight:500}
.cal-loading{text-align:center;color:var(--ink-soft);padding:30px;font-style:italic;font-family:'EB Garamond',serif;font-size:18px}

/* ===== admin dashboard ===== */
.dash-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:30px}
.dash-tab{padding:11px 18px;border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink-soft);font-family:'Karla',sans-serif}
.dash-tab:hover{color:var(--ink)}
.dash-tab.active{color:var(--azul);border-bottom-color:var(--azul)}
.dash-tab .badge-n{display:inline-block;background:var(--azul);color:#fff;font-size:11px;border-radius:999px;padding:1px 7px;margin-left:6px;vertical-align:middle}
.tab-panel{display:none}
.tab-panel.active{display:block}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:22px}
.kpi .kl{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.kpi .kv{font-family:'EB Garamond',serif;font-size:38px;color:var(--azul);line-height:1.05;margin-top:8px}
.kpi.dark{background:var(--bg-deep);border-color:var(--bg-deep)}
.kpi.dark .kl{color:var(--sage)}
.kpi.dark .kv{color:#fff}
.kpi .ksub{font-size:12.5px;color:var(--ink-soft);margin-top:4px}

.panel-card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:24px}
.panel-card h3{font-size:24px;margin-bottom:4px}
.panel-card .ph{color:var(--ink-soft);font-size:14px;margin-bottom:18px}

.dtable{width:100%;border-collapse:collapse;font-size:14.5px}
.dtable th{text-align:left;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;padding:0 14px 12px;border-bottom:1px solid var(--line)}
.dtable td{padding:14px;border-bottom:1px solid var(--line);vertical-align:top}
.dtable tr:last-child td{border-bottom:0}
.dtable .num{font-family:'EB Garamond',serif;font-size:18px;color:var(--ink)}
.dtable .num.accent{color:var(--azul)}
.dtable .who b{display:block}
.dtable .who span{font-size:13px;color:var(--ink-soft)}
.dtable .msg{max-width:340px;color:var(--ink-soft);font-size:13.5px}
.dtable-wrap{overflow-x:auto}

.pill{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:4px 11px;border-radius:999px;text-transform:capitalize}
.pill.reserved{background:#dff0e4;color:#2f7d4f}
.pill.upcoming{background:var(--tile-wash);color:var(--azul-deep)}
.pill.completed{background:#e7e2f0;color:#5b4b8a}
.pill.cancelled{background:#DCE7F2;color:#5A7FA8}
.pill.new{background:var(--tile-wash);color:var(--azul-deep)}
.pill.contacted{background:#dff0e4;color:#2f7d4f}
.pill.past{background:var(--bg-warm);color:var(--ink-soft)}
.pill.requested{background:#fbe8cf;color:#9a6a1f}
.pill.deposit{background:#dfe8f5;color:#3a5a8a}
.pill.paid{background:#dff0e4;color:#2f7d4f}
.pill.rejected{background:#DCE7F2;color:#5A7FA8}
.pill.declined{background:#f7d9c4;color:#b0552a}

/* activity timeline */
.timeline{margin-top:6px}
.tl-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.tl-item:last-child{border-bottom:0}
.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--azul);margin-top:6px;flex:none}
.tl-dot.email{background:var(--copper)}
.tl-body{flex:1}
.tl-body b{font-size:14px}
.tl-email{background:var(--bg-warm);border-radius:8px;padding:10px 12px;margin-top:7px;font-size:12.5px;color:var(--ink-soft);line-height:1.45}
.tl-email .tl-subj{font-weight:600;color:var(--azul);display:block;margin-bottom:3px}
.tl-when{font-size:11.5px;color:var(--ink-soft);margin-top:3px}

/* needs-attention banner + run charges */
.attn{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.attn-card{flex:1;min-width:220px;background:var(--white);border:1px solid var(--line);border-left:4px solid var(--azul);border-radius:12px;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px}
.attn-card .at-l b{display:block;font-size:15px}
.attn-card .at-l span{font-size:13px;color:var(--ink-soft)}

/* bookings-this-month list (calendar tab) */
.bk-list{margin-top:8px}
.bk-item{display:flex;justify-content:space-between;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:11px;margin-bottom:9px;cursor:pointer;align-items:center}
.bk-item:hover{border-color:var(--azul);background:var(--bg-warm)}
.bk-item .bk-when{font-family:'EB Garamond',serif;color:var(--azul);font-size:19px;white-space:nowrap}
.bk-item .bk-who b{display:block;font-size:14.5px}
.bk-item .bk-who span{font-size:13px;color:var(--ink-soft)}

/* calendar cell states */
.cal-day.hold{background:repeating-linear-gradient(45deg,#d6dad7,#d6dad7 5px,#c4c9c5 5px,#c4c9c5 10px);color:#4f5b56;cursor:pointer}
.cal-day.hold:hover{box-shadow:inset 0 0 0 1.5px var(--sage)}
.cal-day.booking{background:var(--azul);color:#fff;cursor:pointer}
.cal-day.booking:hover{background:var(--azul-deep)}
/* back-office calendar: bookings shown inside the day cells */
#aDays .cal-day{aspect-ratio:auto;min-height:60px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;padding:5px 5px 4px;text-align:left}
#aDays .cal-day.empty{min-height:0;border:0}
#aDays .cd-num{font-size:12.5px;font-weight:600;line-height:1.1}
#aDays .cal-bk{font-size:9.5px;font-weight:600;line-height:1.2;border-radius:4px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(255,255,255,.22)}
#aDays .cal-day.open .cal-bk,#aDays .cal-day.hold .cal-bk{background:rgba(29,78,137,.10);color:var(--azul)}
#aDays .cal-bk-more{font-size:9px;opacity:.8;padding:0 3px}
.cal-legend i.hold{background:repeating-linear-gradient(45deg,#d6dad7,#d6dad7 3px,#c4c9c5 3px,#c4c9c5 6px);border-color:#a9b0ab}
.cal-legend i.booking{background:var(--azul);border-color:var(--azul)}

.row-act{background:none;border:1px solid var(--line);border-radius:8px;padding:5px 11px;font-size:12.5px;cursor:pointer;color:var(--azul);font-weight:600;white-space:nowrap}
.row-act:hover{background:var(--bg-warm)}
.row-acts{display:flex;gap:6px;flex-wrap:wrap}
.erow{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.empty-state{text-align:center;color:var(--ink-soft);font-family:'EB Garamond',serif;font-style:italic;font-size:19px;padding:40px}

/* mini bar chart */
.barchart{display:flex;align-items:flex-end;gap:14px;height:150px;padding-top:10px}
.barchart .bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.barchart .bar{width:100%;max-width:46px;background:var(--azul);border-radius:6px 6px 0 0;min-height:3px;transition:height .4s ease}
.barchart .blabel{font-size:11.5px;color:var(--ink-soft)}
.barchart .bval{font-size:12px;color:var(--azul);font-weight:600;font-family:'EB Garamond',serif}

/* invoice modal */
.inv-modal{position:fixed;inset:0;background:rgba(14,26,38,.6);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:200;padding:24px}
.inv-modal.show{display:flex}
.inv-card{background:#fff;border-radius:16px;max-width:520px;width:100%;padding:38px;box-shadow:var(--shadow);max-height:90vh;overflow:auto}
.inv-card .inv-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.inv-card .inv-top .brand{font-size:26px}
.inv-card .inv-meta{text-align:right;font-size:13px;color:var(--ink-soft)}
.inv-card h2{font-size:30px;margin-bottom:6px}
.inv-bill{font-size:14px;color:var(--ink-soft);margin-bottom:20px}
.inv-bill b{color:var(--ink)}
.inv-lines{width:100%;border-collapse:collapse;margin-bottom:18px}
.inv-lines td{padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.inv-lines td:last-child{text-align:right;font-family:'EB Garamond',serif;font-size:17px}
.inv-tot td{border:0;padding-top:14px;font-weight:600}
.inv-tot td:last-child{color:var(--azul);font-size:22px}
.inv-row{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;color:var(--ink-soft)}
.inv-row b{color:var(--ink)}
.inv-close{margin-top:20px;width:100%}

@media(max-width:820px){
  .kpis{grid-template-columns:repeat(2,1fr)}
}

/* admin product tabs */
.prod-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:6px;flex-wrap:wrap}
.prod-tab{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:var(--white);cursor:pointer;font-size:14px;font-weight:600;color:var(--ink);transition:background .15s ease}
.prod-tab:hover{background:var(--bg-warm)}
.prod-tab.active{background:var(--azul);color:#fff;border-color:var(--azul)}

/* admin login gate */
.gate{max-width:420px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:32px;box-shadow:var(--shadow-sm);text-align:center}
.gate h2{font-size:32px;margin-bottom:8px}
.gate p{color:var(--ink-soft);font-size:15px;margin-bottom:20px}
.gate input{width:100%;font-family:'Karla',sans-serif;font-size:16px;text-align:center;letter-spacing:.05em;padding:14px;border:1px solid var(--line);border-radius:10px;margin-bottom:14px}
.gate input:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 3px rgba(29,78,137,.14)}
.gate .err{color:#b0392f;font-size:13.5px;min-height:18px;margin-top:6px}

/* quote banner on contact */
.quote-banner{background:var(--bg-warm);border:1px solid var(--sage);border-left:4px solid var(--azul);border-radius:12px;padding:16px 18px;margin-bottom:22px}
.quote-banner .qb-lbl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--azul);margin-bottom:6px}
.quote-banner .qb-sum{font-size:14.5px;color:var(--ink)}
.quote-banner .qb-tot{font-family:'EB Garamond',serif;color:var(--azul);font-weight:600}

/* footer */
.site-foot{background:var(--bg-deep);color:#A9C4E0;padding:72px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.site-foot .brand{color:#fff}
.site-foot h5{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);margin:0 0 16px;font-weight:700;font-family:'Karla',sans-serif}
.site-foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
/* Size the list item, not just the anchor. Several footer entries are plain
   text with no link (phone number, service area, "Family-run") and were
   inheriting the 17px body size while their linked neighbours sat at 14.5px. */
.site-foot li,.site-foot a{font-size:14.5px;line-height:1.5}
.site-foot a:hover{color:#fff}
.foot-tag{margin-top:16px;color:#A9C4E0;max-width:34ch;font-family:'EB Garamond',serif;font-style:italic;font-size:19px}
.foot-bottom{margin-top:54px;padding-top:24px;border-top:1px solid rgba(169,196,224,.22);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:#93A3B5}
.mock-note{background:var(--copper);color:#12202E;text-align:center;font-size:13px;font-weight:600;padding:9px 16px;letter-spacing:.02em}

/* content always visible; motion lives in hover interactions */
.reveal{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .intro-grid,.book-grid{grid-template-columns:1fr;gap:40px}
  /* These two were never collapsed, so on a phone the video stage was
     squeezed to about 90x50px and the photo booth image to a sliver. */
  .sample-grid,.pbooth-grid{grid-template-columns:1fr;gap:36px}
  .ways,.aud-grid{grid-template-columns:1fr}
  .step-grid,.tiers,.tgrid,.exp-grid,.plans{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .addons{grid-template-columns:1fr}
  .gstrip{grid-template-columns:repeat(2,1fr)}
  .plan.featured{transform:none}
  .intro-figure .tag{left:14px}
}
/* Tablet nav. The full bar needs about 1040px to sit comfortably; between
   that and the hamburger it was crowding the wordmark against the links.
   Tighten the bar through this band, then hand over to the hamburger at
   900px so iPad portrait (768) gets the menu rather than a squeezed row. */
@media (max-width:1040px) and (min-width:901px){
  .nav-links{gap:20px}
  .nav-links a{font-size:13.5px}
  .brand{font-size:25px}
  .brand small{letter-spacing:.22em}
  .nav-cta{gap:10px}
  .nav-cta .btn{padding:11px 20px;font-size:14px}
}

@media (max-width:900px){
  .nav-links,.nav-cta .btn{display:none}
  .hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
  .hamburger span{width:24px;height:2px;background:var(--ink);display:block}
  .nav-toggle:checked ~ .mobile-menu{display:flex}
  .mobile-menu{display:none;position:absolute;top:72px;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;padding:18px 24px;gap:6px;z-index:59}
  .mobile-menu a{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
  .mobile-menu .btn{margin-top:12px}
}

/* Layout collapses stay on the original phone breakpoint. Only the nav
   moved up to 900, so a tablet keeps its two column footer. */
@media (max-width:760px){
  .field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{min-height:84vh}
}

/* ---------- back office: mobile-first ---------- */
@media (max-width:720px){
  /* tab strip scrolls sideways instead of wrapping into rows */
  .dash-tabs{flex-wrap:nowrap;overflow-x:auto;gap:2px;margin-bottom:22px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .dash-tabs::-webkit-scrollbar{display:none}
  .dash-tab{flex:none;white-space:nowrap;padding:10px 13px;font-size:14px}
  /* tighter cards + headings */
  .panel-card{padding:16px;border-radius:14px;margin-bottom:16px}
  .panel-card h3{font-size:20px}
  .kpis{gap:12px;margin-bottom:24px}
  .kpi{padding:15px}
  .kpi .kv{font-size:30px}
  .erow{grid-template-columns:1fr}
  /* data tables become stacked cards with inline labels */
  .dtable-wrap{overflow:visible}
  .dtable,.dtable tbody,.dtable tr,.dtable td{display:block;width:100%}
  .dtable thead{display:none}
  .dtable tr{background:var(--bg-warm);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px}
  .dtable td{border:0!important;padding:5px 0;display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-align:right;font-size:14.5px}
  .dtable td::before{content:attr(data-label);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);text-align:left;flex:none}
  .dtable td.who,.dtable td.msg,.dtable td.stack{flex-direction:column;align-items:flex-start;text-align:left;max-width:none}
  .dtable td.msg .msg,.dtable td.stack>div{text-align:left}
  .dtable td.acts-cell{justify-content:flex-start;padding-top:10px}
  .dtable td.acts-cell::before{display:none}
  .dtable td:empty{display:none}
  .row-act{padding:8px 13px;font-size:13.5px}
  .row-acts{gap:8px}
  /* booking / invoice modal becomes a bottom sheet */
  .inv-modal{padding:0;align-items:flex-end}
  .inv-card{max-width:100%;width:100%;max-height:94vh;border-radius:18px 18px 0 0;padding:24px 18px 30px}
  .inv-card h2{font-size:25px}
  .inv-card .inv-top .brand{font-size:22px}
  /* inline form rows stack full-width */
  .formflex{flex-direction:column;align-items:stretch}
  .formflex .field{min-width:0;width:100%}
  .formflex>button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto}
  .way img,.aud-card img{transition:none}
}

/* ===== additions: 3-up offerings, landscape video, reel, occasions, calculator ===== */
.ways.three{grid-template-columns:repeat(3,1fr)}
.ways.three .way{min-height:460px}
.way-body .badge.hot{background:var(--azul);color:#fff}

/* landscape video stage */
.video-stage{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#12202E;aspect-ratio:16/9}
.video-stage video{width:100%;height:100%;object-fit:cover;display:block}
.video-stage .badge-live{position:absolute;left:18px;bottom:16px;transform:none;background:rgba(18,32,46,.74);backdrop-filter:blur(6px);color:#DCE7F2;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:7px 14px;border-radius:99px}

/* edited reel showcase */
.reel-showcase{margin-top:62px;background:var(--bg-warm);border-radius:22px;padding:clamp(28px,5vw,52px);display:grid;grid-template-columns:1fr auto;gap:52px;align-items:center}
.reel-showcase .rs-copy h3{font-size:clamp(28px,4vw,42px)}
.reel-showcase .rs-copy .es{font-style:italic;color:var(--copper);font-family:'EB Garamond',serif;font-size:20px}
.reel-showcase .rs-copy p{margin-top:14px;color:var(--ink-soft);font-size:16.5px;max-width:42ch}
.phone-frame.sm{width:238px}
.reel-cap{position:absolute;left:18px;right:18px;bottom:56px;z-index:3;text-align:center;color:#fff;font-weight:700;font-size:14.5px;line-height:1.32;text-shadow:0 2px 9px rgba(0,0,0,.85)}

/* occasions */
.occ-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:42px}
.occ{background:var(--white);border:1px solid var(--line);border-radius:999px;padding:12px 22px;font-size:15px;font-weight:500;display:flex;align-items:center;gap:9px;transition:border-color .2s ease,transform .2s ease}
.occ:hover{border-color:var(--sage);transform:translateY(-2px)}
.occ svg{width:16px;height:16px;color:var(--azul);flex:none}

/* collection bundle band */
.bundle{margin-top:30px;background:var(--bg-deep);color:#fff;border-radius:20px;padding:clamp(28px,4vw,46px);display:grid;grid-template-columns:1fr auto;gap:34px;align-items:center}
.bundle h3{color:#fff;font-size:clamp(28px,3.6vw,40px)}
.bundle h3 .es{font-style:italic;color:var(--sage);font-family:'EB Garamond',serif}
.bundle p{margin-top:10px;color:#BDD2E6;max-width:52ch;font-size:15.5px}
.bundle .b-price{text-align:right}
.bundle .b-price .n{font-family:'EB Garamond',serif;font-size:56px;line-height:1;color:#fff}
.bundle .b-price .s{color:#A9C4E0;font-size:13px}

/* calculator */
.calc-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:40px;align-items:start;margin-top:50px}
.calc-group{margin-bottom:30px}
.calc-group h4{font-family:'EB Garamond',serif;font-size:24px;margin-bottom:6px}
.calc-group .hint{font-size:13.5px;color:var(--ink-soft);margin-bottom:16px}
.opt{display:flex;align-items:center;gap:14px;padding:15px 17px;border:1px solid var(--line);border-radius:12px;background:var(--white);margin-bottom:10px;cursor:pointer;transition:border-color .18s ease,box-shadow .18s ease}
.opt:hover{border-color:var(--sage)}
.opt input{accent-color:var(--azul);width:18px;height:18px;flex:none;cursor:pointer}
.opt .opt-main{flex:1}
.opt .opt-main b{display:block;font-size:15.5px}
.opt .opt-main span{font-size:13px;color:var(--ink-soft)}
.opt .opt-price{font-family:'EB Garamond',serif;color:var(--azul);font-size:21px;white-space:nowrap}
.opt.selected{border-color:var(--azul);box-shadow:0 0 0 2px rgba(29,78,137,.13)}
.stepper{display:flex;align-items:center;gap:14px;padding:6px 0}
.stepper button{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--white);font-size:20px;line-height:1;cursor:pointer;color:var(--azul);transition:background .15s ease}
.stepper button:hover{background:var(--bg-warm)}
.stepper .qv{min-width:96px;text-align:center;font-size:15px}
.calc-summary{position:sticky;top:90px;background:var(--bg-deep);color:#fff;border-radius:18px;padding:30px;box-shadow:var(--shadow)}
.calc-summary h3{color:#fff;font-size:25px}
.calc-summary .lines{margin:18px 0 0;display:flex;flex-direction:column;gap:11px;font-size:14.5px;min-height:40px}
.calc-summary .line{display:flex;justify-content:space-between;gap:12px;color:#D7E3F0}
.calc-summary .line span:last-child{color:#fff;white-space:nowrap}
.calc-summary .empty{color:#AFC0D2;font-style:italic;font-family:'EB Garamond',serif;font-size:17px}
.calc-summary .tot{border-top:1px solid rgba(169,196,224,.3);margin-top:16px;padding-top:16px;display:flex;justify-content:space-between;align-items:baseline}
.calc-summary .tot span{color:#D7E3F0;font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.calc-summary .tot b{font-family:'EB Garamond',serif;font-size:40px;color:#fff}
.calc-summary .btn{width:100%;margin-top:20px}
.calc-summary .fine{font-size:12px;color:#A9C4E0;margin-top:12px;text-align:center;line-height:1.4}

@media (max-width:980px){
  .ways.three{grid-template-columns:1fr}
  .reel-showcase{grid-template-columns:1fr;gap:32px;justify-items:center;text-align:center}
  .reel-showcase .rs-copy p{margin-left:auto;margin-right:auto}
  .bundle{grid-template-columns:1fr;gap:20px;text-align:center}
  .bundle .b-price{text-align:center}
  .calc-grid{grid-template-columns:1fr;gap:28px}
  .calc-summary{position:static}
}

/* ============================================================
   HACIENDA ORNAMENT
   Two devices only, both structural rather than decorative:
   1. the round-headed arch silhouette on feature imagery
   2. a single talavera tile band used once as a section rule
   ============================================================ */

/* 1. Arch. Hacienda arcades spring from a round head, so feature
   imagery is masked to that silhouette instead of a plain rectangle.
   It also echoes the white arch backdrop on the real booth.
   Elliptical radii rather than a fixed px corner: the horizontal radius
   is half the element width, so the head is a true dome that scales with
   the card instead of a rounded-off rectangle. */
.intro-figure img,
.way,
.arch{
  border-radius:
    var(--arch-h) var(--arch-h) var(--r-card) var(--r-card) /
    var(--arch-v) var(--arch-v) var(--r-card) var(--r-card);
}
.intro-figure .tag{ border-radius:12px }

/* The dome rise is a percentage of the element HEIGHT, so a narrow tall
   card (phone) needs a LARGER percentage than a wide short one to keep the
   same semicircular head. Dropping it on mobile flattened the arch, which
   is the opposite of what was wanted. Phone cards are taller, so it goes up. */
@media (max-width:900px){
  :root{ --arch-v:30% }
}

/* 2. Talavera band. One 8 point star tile in cobalt with a copper
   centre, the standard poblano motif, used as a section rule. */
.talavera{
  height:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 40 40'><rect width='40' height='40' fill='%23FCFCFA'/><path d='M20 5l3.6 9.9 9.9 3.6-9.9 3.6L20 32l-3.6-9.9L6.5 18.5l9.9-3.6z' fill='%231D4E89' opacity='.9'/><circle cx='20' cy='18.7' r='2.4' fill='%23B0714A'/></svg>");
  background-repeat:repeat-x;
  background-size:34px 34px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

/* Hero entrance. Motivated: establishes hierarchy on load, the
   headline arrives before the supporting copy and the actions. */
@media (prefers-reduced-motion:no-preference){
  .hero h1,.hero .lede,.hero .hero-actions,.hero .kicker{
    animation:riseIn .7s cubic-bezier(.16,1,.3,1) both;
  }
  .hero .kicker{animation-delay:.05s}
  .hero h1{animation-delay:.12s}
  .hero .lede{animation-delay:.24s}
  .hero .hero-actions{animation-delay:.34s}
  @keyframes riseIn{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:none}
  }
}

/* ============================================================
   PAGE HEADER (interior pages)
   Weddings and Quinceaneras had full photo heroes while Packages,
   Contact and Book opened on flat text, so interior pages did not
   share a shape. This is the one compact header they all use.
   ============================================================ */
.page-hero{
  position:relative;min-height:46vh;display:flex;align-items:flex-end;
  overflow:hidden;
}
.page-hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.page-hero::after{
  content:"";position:absolute;inset:0;background:
    linear-gradient(90deg, rgba(14,26,38,.78) 0%, rgba(14,26,38,.56) 46%, rgba(14,26,38,.30) 100%),
    linear-gradient(180deg, rgba(14,26,38,.18) 0%, rgba(14,26,38,.40) 62%, rgba(14,26,38,.70) 100%);
}
.page-hero .wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:52px;color:var(--white)}
.page-hero h1{
  font-size:clamp(38px,5.4vw,68px);color:var(--white);font-weight:500;max-width:16ch;
  text-shadow:0 2px 22px rgba(8,16,26,.66),0 1px 3px rgba(8,16,26,.55);
}
.page-hero .sub{
  margin-top:16px;max-width:54ch;font-size:clamp(16px,1.9vw,19px);color:#EEF3F8;
  line-height:1.55;text-shadow:0 1px 12px rgba(8,16,26,.75);
}
.page-hero .eyebrow{color:var(--sage);margin-bottom:14px;text-shadow:0 1px 10px rgba(8,16,26,.8)}
@media (max-width:760px){
  .page-hero{min-height:38vh}
  .page-hero .wrap{padding-top:64px;padding-bottom:38px}
}

/* SiteReady credit in the footer bar */
.foot-credit{color:var(--sage);border-bottom:1px solid rgba(169,196,224,.42);padding-bottom:1px}
.foot-credit:hover{color:#fff;border-bottom-color:#fff}

/* ============================================================
   HERO HEIGHT LOCK
   Both hero types were sized by their own copy, so a longer
   headline or lede made one page taller than its siblings. On
   desktop the height is fixed so every page in a tier matches
   regardless of copy. Below 900px they go back to min-height so
   nothing can clip on a phone.
   ============================================================ */
@media (min-width:901px){
  .hero{height:88vh;min-height:680px}
  .hero-inner{padding-top:96px}
  .page-hero{height:46vh;min-height:560px}
}