/* Memory Reel Maker: night-blue film band with a warm gold reel and coral heart (the logo), on a clean light page.
   Layout: a deep navy-to-teal hero band, then alternating white and pale-blue bands, one centered column. */
:root{
  --ink:#16213d; --soft:#56627d; --page:#ffffff; --band:#eef3fa; --line:#d9e1ee; --card:#ffffff;
  --navy:#0b2a5b; --teal:#0b6b73; --gold:#e8b64c; --coral:#e2574c; --coral-ink:#ffffff; --link:#1458b8;
  --hero-ink:#ffffff; --hero-soft:#d4e6f7;
  --display:"Playfair Display",Georgia,"Times New Roman",serif; --body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light}
@media (prefers-color-scheme:dark){:root{--ink:#e8edf7;--soft:#a9b4ca;--page:#0d1426;--band:#111c33;--line:#26324d;--card:#152039;--link:#8cc2ff;--coral:#ef6a5f;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:400 1.0625rem/1.6 var(--body)}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--link)}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0 0 .6em}
h1{font-size:clamp(2rem,4.2vw,3.1rem)} h2{font-size:clamp(1.6rem,3vw,2.2rem)} h3{font-size:1.25rem}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
.sec{padding-block:3.5rem}
.sub{color:var(--soft);max-width:65ch;margin:0 0 1.6rem}
.btn{display:inline-block;background:var(--coral);color:var(--coral-ink);font-weight:700;text-decoration:none;padding:.85rem 1.5rem;border-radius:999px;border:2px solid var(--coral);font:700 1.05rem/1.2 var(--body);cursor:pointer;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)} .btn:focus-visible,.chip:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor} .btn.small{padding:.5rem 1rem;font-size:.95rem}
/* header */
.top{position:sticky;top:0;z-index:5;background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.bar{display:flex;align-items:center;gap:1.2rem;padding-block:.6rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font:700 1.25rem var(--display)}
.nav{display:flex;gap:1.1rem;margin-left:auto;flex-wrap:wrap}
.nav a{color:#cfe2f6;text-decoration:none;font-size:.95rem}.nav a:hover,.nav a[aria-current]{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--gold)}
.top .btn.small{background:var(--gold);border-color:var(--gold);color:#1d1a10}
/* hero */
.hero{background:linear-gradient(125deg,#0b2a5b 0%,#0f4c81 55%,#0b6b73 100%);color:var(--hero-ink)}
.hgrid{display:grid;grid-template-columns:1fr 1.15fr;gap:3rem;align-items:center;padding-block:3.5rem}
.hgrid>*{min-width:0}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:600;color:var(--gold);margin:0 0 1rem}
.hero h1 em{font-style:italic;color:var(--gold)}
.lead{font-size:1.2rem;color:var(--hero-soft);margin:0 0 1.6rem;max-width:40ch}
.ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.from{color:var(--hero-soft);font-size:.95rem;margin:1rem 0 0}
.pts{margin:0 0 1.6rem;padding-left:1.2rem;color:var(--hero-soft)}.pts li{margin:.3rem 0}
.player{margin:0}
.player video,.player img{width:100%;aspect-ratio:16/9;border-radius:14px;background:#000;object-fit:cover}
.player.big video,.player.big img{box-shadow:0 0 0 6px rgba(232,182,76,.35),0 18px 50px rgba(0,0,0,.45)}
.player figcaption{font-size:.85rem;margin-top:.7rem;color:var(--soft)}
.hero .player figcaption{color:var(--hero-soft)}.hero .player figcaption a{color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.chip{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.35rem .8rem;font:500 .85rem var(--body);cursor:pointer}
.chip.on{background:var(--gold);border-color:var(--gold);color:#1d1a10}
/* bands */
.band{background:var(--band);padding-block:3.5rem}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:.4rem}
.steps li::before{content:counter(s);font:700 2.6rem/1 var(--display);color:var(--coral)}
.steps b{font-size:1.1rem}.steps span{color:var(--soft)}
/* occasions */
.grp{font-family:var(--body);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:2rem 0 .9rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.2rem}
.occ{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .15s,transform .15s}
.occ:hover{border-color:var(--coral);transform:translateY(-2px)}
.ph{position:relative}.ph img{width:100%;aspect-ratio:16/9;object-fit:cover}
.tag{position:absolute;left:.6rem;bottom:.6rem;background:var(--coral);color:#fff;font-size:.75rem;font-weight:700;padding:.2rem .55rem;border-radius:999px}
.ot{padding:.8rem 1rem 1rem;display:flex;flex-direction:column;gap:.2rem}.ot small{color:var(--soft);font-size:.88rem;line-height:1.4}
/* prices */
.incl{background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.4rem;margin:0 0 2rem}.incl h3{margin:0 0 .6rem}.incl ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 2rem}.incl li{padding-left:1.6rem;position:relative}.incl li:before{content:"\2713";position:absolute;left:0;color:var(--teal);font-weight:700}
@media (max-width:700px){.incl ul{grid-template-columns:1fr}}
.prices{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:start}.prices>*{min-width:0}
.ptable{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--line)}th{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.num{text-align:right}td.num{font:700 1.15rem var(--body)}
.adds ul{list-style:none;padding:0;margin:0}.adds li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.fine{font-size:.88rem;color:var(--soft);margin-top:.8rem}
/* samples */
.sgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}.sgrid>*{min-width:0}.sitem p{margin:.6rem 0 0}
/* faq */
.faq details{border-bottom:1px solid var(--line);padding:1rem 0}.faq summary{cursor:pointer;font-weight:600;font-size:1.08rem}.faq p{color:var(--soft);margin:.6rem 0 0;max-width:70ch}
/* contact */
.cbox{border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.6rem;margin-bottom:1.2rem;background:var(--card)}.cbox h2{font-size:1.35rem}
.mail{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;font-weight:600;font-size:1.1rem}.row{display:flex;gap:.7rem;flex-wrap:wrap}
.cta{text-align:center}.cta p{color:var(--soft)}
/* footer */
.foot{background:var(--navy);color:#cbd8ea;padding-block:3rem 1.5rem;font-size:.92rem}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}.fgrid>div{display:flex;flex-direction:column;gap:.45rem}
.fgrid b{color:#fff}.fbrand{font:700 1.2rem var(--display)}.foot a{color:#cbd8ea;text-decoration:none}.foot a:hover{color:#fff;text-decoration:underline}
.foot p{margin:0}.foot p.copy{margin:2rem auto 0;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:#9fb1cc}
@media (max-width:900px){.hgrid,.prices{grid-template-columns:1fr;gap:2rem}.steps{grid-template-columns:1fr;gap:1.4rem}.fgrid{grid-template-columns:1fr 1fr}.sgrid{grid-template-columns:1fr}}
@media (max-width:640px){.top{position:static}.nav{order:3;width:100%;margin-left:0;gap:.9rem;overflow-x:auto}.top .btn.small{margin-left:auto}.hgrid{padding-block:2.2rem}.sec,.band{padding-block:2.5rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Holiday launch offer: shown until data-until (site.js adds .promo-ended after it) */
.promobar{background:var(--gold);color:#1b2440;text-align:center;padding:.55rem 0;font-size:.95rem}
.soonbar{background:var(--ink,#1b2440);color:#fff;text-align:center;padding:.6rem 0;font-size:.98rem}.soonbar a{color:#fff;text-decoration:underline}
.promo-off{display:none} .promo-on s{opacity:.7;font-weight:400}
html.promo-ended .promo-on{display:none!important} html.promo-ended .promo-off{display:inline}

/* Reviews (filled in by site.js) */
.rstars{color:#d99a1e;letter-spacing:.05em;font-size:1.15rem}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin:1rem 0}
.rev{margin:0;background:#fff;border:1px solid #dfe5f0;border-radius:12px;padding:1rem}
.rev blockquote{margin:.5rem 0;font-size:1rem;line-height:1.5}
.rev figcaption{color:#5b6680;font-size:.88rem}

/* Phones: a slim "Make a video" button pinned to the bottom (the page itself still scrolls normally).
   site.js hides it while another order button is on screen and points it at the page's own occasion. */
.phonecta{display:none}
@media (max-width:640px){
  .phonecta{display:block;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;text-align:center;
    box-shadow:0 6px 20px rgba(0,0,0,.25);transition:opacity .2s,transform .2s}
  .phonecta.away{opacity:0;transform:translateY(120%);pointer-events:none}
  body{padding-bottom:76px}
}