/* ---------- tokens ---------- */
:root{
  --shadow:#143524;
  --forest:#1F5135;
  --forest-mist:#2C6B45;
  --cream:#EDE4D0;
  --cream-alt:#DED5C0;
  --cream-card:#DCD3BE;
  --border-cream:#D8CFB6;
  --orange:#F08A24;
  --sage:#8FB59B;
  --sage-light:#C6DCCD;
  --olive-meta:#8C8266;
  --brown-body:#6B6250;
  --ink:#3B3830;
  --soft-deep:#5F8A6E;

  --font-display:'Bevan', Georgia, serif;
  --font-body:'Rubik', -apple-system, BlinkMacSystemFont, sans-serif;

  --side-pad: clamp(20px, 4.4vw, 64px);
  --header-h: 74px;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;}
/* scroll-padding keeps #anchor targets clear of the sticky header */
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);}
body{
  margin:0;
  background:var(--cream);
  font-family:var(--font-body);
  color:var(--ink);
}
h1,h2,h3,p,dl,ul{margin:0;}
ul{padding:0;list-style:none;}
img{max-width:100%;}
button{font-family:inherit;cursor:pointer;background:none;border:0;}
a{text-decoration:none;color:inherit;}

.container{
  max-width:1440px;
  margin:0 auto;
  padding-left:var(--side-pad);
  padding-right:var(--side-pad);
}

/* ---------- shared bits ---------- */
.eyebrow{
  font:500 12px/1 var(--font-body);
  letter-spacing:.2em;
  text-transform:uppercase;
}
.eyebrow--on-dark{color:var(--orange);letter-spacing:.28em;}
.eyebrow--on-cream{color:var(--orange);}
.eyebrow--accent{color:var(--orange);letter-spacing:.24em;font-size:11px;}
.eyebrow--accent-on-cream{color:var(--orange);letter-spacing:.24em;font-size:11px;}
.eyebrow--on-orange{color:var(--shadow);letter-spacing:.24em;}

.section-heading{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:38px;
}
.section-heading h2{
  font:400 44px/1 var(--font-display);
}
.section-note{
  font:500 11px/1 var(--font-body);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--olive-meta);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:800 12px/1 var(--font-body);
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:15px 24px;
  white-space:nowrap;
}
.btn--lg{padding:18px 30px;font-size:13px;}
.btn--solid{background:var(--orange);color:var(--shadow);}
.btn--dark{background:var(--shadow);color:var(--cream);}
.btn--outline-light{border:1.5px solid var(--sage);color:var(--cream);}
.btn--outline-dark{border:1.5px solid var(--forest);color:var(--forest);}
.btn--block{width:100%;padding:15px;}

/* flash lamp mark (brand icon) */
.flash-mark{
  display:inline-block;
  border-radius:3px;
  background:var(--orange);
  box-shadow:0 0 14px rgba(240,138,36,.55);
}
.flash-mark--sm{width:13px;height:22px;}
.flash-mark--md{width:22px;height:38px;box-shadow:0 0 22px rgba(240,138,36,.5);}

/* ---------- header ---------- */
.site-header{
  background:var(--shadow);
  position:sticky;
  top:0;
  z-index:100;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:18px;
  padding-bottom:18px;
}
.logo{display:flex;align-items:center;gap:12px;}
.logo-word{font:400 22px/1 var(--font-display);letter-spacing:-0.01em;color:var(--cream);}
.logo-word--sm{font-size:18px;}

.main-nav{display:flex;align-items:center;gap:34px;}
.main-nav a{
  font:500 12px/1 var(--font-body);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage);
}
.main-nav a:hover{color:var(--orange);}
.main-nav .btn{padding:13px 22px;}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:100%;
  height:2px;
  background:var(--cream);
}

/* ---------- hero ---------- */
.hero{background:var(--forest);padding-top:80px;}
.hero-inner{
  display:grid;
  grid-template-columns:1fr 330px;
  gap:70px;
  align-items:center;
}
.hero-copy{
  display:flex;
  flex-direction:column;
  gap:26px;
  padding-bottom:88px;
}
.hero-kicker{display:flex;align-items:center;gap:14px;}
.hero-headline{
  font:400 clamp(38px, 5.4vw, 78px)/0.98 var(--font-display);
  letter-spacing:-0.015em;
  color:var(--cream);
}
.hero-sub{
  max-width:540px;
  font:400 19px/1.6 var(--font-body);
  color:var(--sage-light);
}
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.hero-meta{
  display:flex;
  align-items:center;
  gap:22px;
  font:500 11px/1 var(--font-body);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--sage);
  flex-wrap:wrap;
}
.hero-meta .dot{width:4px;height:4px;background:var(--forest-mist);border-radius:50%;}

.hero-visual-wrap{height:600px;align-self:end;}
.hero-visual{
  position:relative;
  height:100%;
  width:300px;
  margin:0 auto;
}
.print{
  position:absolute;
  width:300px;
  background:#FFFFFF;
  padding:14px 14px 46px;
  box-shadow:0 26px 50px rgba(11,20,14,.45);
}
.print--1{left:-24px;bottom:96px;transform:rotate(-6.5deg);}
.print--2{left:36px;bottom:196px;width:288px;padding:13px 13px 44px;box-shadow:0 24px 46px rgba(11,20,14,.4);transform:rotate(4deg);}
.print--3{left:-6px;bottom:312px;width:270px;padding:12px 12px 40px;box-shadow:0 22px 42px rgba(11,20,14,.36);transform:rotate(-2deg);}
.print-photo{aspect-ratio:3/2;}
.grad-a{background:linear-gradient(150deg,#6B2E1C,#C9A46A 55%,#F0D9A8);}
.grad-b{background:linear-gradient(150deg,#1F3350,#7E93AE 60%,#D8E0E8);}
.grad-c{background:linear-gradient(150deg,#2E4A38,#9BB48C 60%,#E4EADF);}
.print-caption{
  position:absolute;left:16px;bottom:14px;
  font:400 13px/1 var(--font-body);
  color:var(--olive-meta);
}
.frame-tag{
  position:absolute;right:-30px;bottom:24px;
  background:var(--orange);color:var(--shadow);
  padding:13px 17px;
  display:flex;flex-direction:column;gap:3px;
  transform:rotate(3deg);
  box-shadow:0 14px 30px rgba(11,20,14,.35);
}
.frame-tag-num{font:800 20px/1 var(--font-body);}
.frame-tag-label{font:500 9px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase;}

/* ---------- how it works ---------- */
.how{background:var(--cream);padding:82px 0;}
.how-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.how-card{
  background:#FFFFFF;
  border:1.5px solid var(--border-cream);
  padding:30px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.how-icon{
  width:84px;height:84px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.how-copy{display:flex;flex-direction:column;gap:9px;}
.how-copy h3{font:400 27px/1.05 var(--font-display);color:var(--forest);}
.how-copy p{font:400 15px/1.6 var(--font-body);color:var(--brown-body);}

.icon-frame{width:56px;height:37px;border:2px solid var(--forest);position:absolute;top:6px;}
.icon-ticks{
  position:absolute;bottom:8px;
  display:flex;gap:1.5px;align-items:flex-end;
}
.tick{width:1.5px;height:8px;background:var(--forest);opacity:.3;}
.tick--lit{height:12px;background:var(--orange);opacity:1;}

.icon-glow{
  position:absolute;width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,138,36,.34),transparent 66%);
}
.how-icon .flash-mark{position:relative;}

.icon-doubles{position:relative;width:48px;height:32px;}
.doubles-frame{
  position:absolute;inset:0;
  width:48px;height:32px;
  border:2px solid var(--forest);
}
.doubles-frame--back{opacity:.45;transform:translate(-9px,-9px);}
.doubles-frame--mid{opacity:.7;}
.doubles-frame--front{border-color:var(--orange);transform:translate(9px,9px);}

/* ---------- no gallery ---------- */
.no-gallery{background:var(--shadow);padding:76px 0;}
.no-gallery-inner{
  display:grid;
  grid-template-columns:440px 1fr;
  gap:70px;
  align-items:center;
}
.no-gallery-copy{display:flex;flex-direction:column;gap:20px;}
.no-gallery-copy h2{font:400 46px/1.02 var(--font-display);color:var(--cream);}
.no-gallery-copy p{font:400 17px/1.65 var(--font-body);color:var(--sage);}

.thumb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.thumb{aspect-ratio:3/2;filter:saturate(.9);display:block;}
.thumb--1{background:linear-gradient(150deg,#8A5C33,#E8D6B8);}
.thumb--2{background:linear-gradient(150deg,#2E4A38,#9BB48C);}
.thumb--3{background:linear-gradient(150deg,#6B2E1C,#F08A24);}
.thumb--4{background:linear-gradient(150deg,#1F3350,#7E93AE);}
.thumb--5{background:linear-gradient(150deg,#5C2438,#D98BA0);}
.thumb--6{background:linear-gradient(150deg,#4A3A22,#C9A46A);}
.thumb--7{background:linear-gradient(150deg,#243A3A,#8FB5AE);}
.thumb--8{background:linear-gradient(150deg,#7A5A18,#F0CE7A);}

/* ---------- film ---------- */
.film{background:var(--forest);padding:76px 0;}
.film .section-heading h2{color:var(--cream);}
.film .section-note{color:var(--sage);}
.film-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.film-card{
  background:var(--cream-card);
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.film-card--active{background:var(--cream);border:2px solid var(--orange);}
.film-bar{height:8px;}
.film-bar--album{background:var(--orange);}
.film-bar--mall{background:#4A7FA5;}
.film-bar--party{background:#C0243B;}
.film-bar--bw{background:#2E2A22;}
.film-name{font:800 12px/1.3 var(--font-body);letter-spacing:.06em;color:var(--forest);}
.film-name--album{color:var(--orange);}
.film-iso{font:400 44px/1 var(--font-display);color:var(--forest);}
.film-type{font:500 9px/1 var(--font-body);letter-spacing:.16em;color:var(--olive-meta);}
.film-card p{font:400 13px/1.55 var(--font-body);color:var(--brown-body);}
.film-tags{font:500 9px/1.6 var(--font-body);letter-spacing:.12em;color:var(--olive-meta);}

/* ---------- gift ---------- */
.gift{background:var(--cream);padding:82px 0;}
.gift-inner{
  display:grid;
  grid-template-columns:1fr 420px;
  gap:70px;
  align-items:center;
}
.gift-copy{display:flex;flex-direction:column;gap:20px;}
.gift-copy h2{font:400 46px/1.02 var(--font-display);color:var(--forest);}
.gift-copy p{max-width:520px;font:400 17px/1.65 var(--font-body);color:var(--brown-body);}
.gift-list{display:flex;flex-direction:column;gap:11px;}
.gift-list li{
  display:flex;align-items:center;gap:12px;
  font:400 15px/1 var(--font-body);color:var(--ink);
}
.gift-bullet{flex:none;width:9px;height:16px;border-radius:2px;background:var(--orange);}
.gift-actions{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap;}

.gift-card{background:var(--shadow);padding:34px;display:flex;flex-direction:column;gap:22px;}
.gift-card-top{display:flex;justify-content:space-between;align-items:center;}
.gift-card-label{font:500 10px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--soft-deep);}
.gift-code-panel{
  background:var(--forest);padding:26px;
  display:flex;flex-direction:column;gap:14px;align-items:center;
}
.gift-code-label{font:500 9px/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--sage);}
.gift-code{font:800 26px/1 var(--font-body);letter-spacing:.24em;color:var(--orange);}
.gift-details{display:flex;flex-direction:column;gap:9px;font:400 13px/1 var(--font-body);color:var(--sage-light);}
.gift-details div{display:flex;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid var(--forest-mist);}
.gift-details div.no-rule{border-bottom:0;padding-bottom:0;}
.gift-details dt{color:var(--sage);font-weight:400;}
.gift-details dd{margin:0;}
.gift-share{
  background:var(--cream);color:var(--forest);text-align:center;padding:15px;
  font:800 12px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;width:100%;
}

/* ---------- pricing ---------- */
.pricing{background:var(--cream-alt);padding:82px 0;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
.price-card{
  background:#FFFFFF;
  border:1.5px solid var(--border-cream);
  padding:30px;
  display:flex;flex-direction:column;gap:16px;
  position:relative;
}
.price-card--featured{border:2px solid var(--orange);}
.price-badge{
  position:absolute;top:-11px;right:22px;
  background:var(--orange);color:var(--shadow);
  padding:4px 9px;
  font:800 9px/1 var(--font-body);letter-spacing:.16em;
}
.price-tier{font:800 13px/1 var(--font-body);color:var(--forest);}
.price-amount{font:400 46px/1 var(--font-display);color:var(--forest);}
.price-card p{font:400 14px/1.6 var(--font-body);color:var(--brown-body);}
.pricing-fine-print{margin-top:22px;font:400 13px/1.6 var(--font-body);color:var(--olive-meta);}

/* ---------- closing cta ---------- */
.closing-cta{background:var(--orange);padding:64px 0;}
.closing-cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:50px;flex-wrap:wrap;
}
.closing-cta-copy{display:flex;flex-direction:column;gap:12px;}
.closing-cta-copy h2{font:400 46px/1 var(--font-display);color:var(--shadow);}

/* ---------- footer ---------- */
.site-footer{background:var(--shadow);padding:40px 0;}
.footer-inner{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;
}
.footer-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.footer-made{font:500 10px/1 var(--font-body);letter-spacing:.18em;text-transform:uppercase;color:var(--soft-deep);}
.footer-nav{display:flex;gap:28px;flex-wrap:wrap;font:400 12px/1 var(--font-body);color:var(--sage);}
.footer-nav a{color:var(--sage);}
.footer-nav a:hover{color:var(--orange);}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width:1024px){
  .main-nav{
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--shadow);
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:22px var(--side-pad) 28px;
    display:none;
  }
  .main-nav.is-open{display:flex;}
  .main-nav .btn{width:100%;}
  /* .site-header stays sticky here; sticky is a positioned ancestor, so it
     still anchors the absolutely-positioned .main-nav drawer above. */
  .nav-toggle{display:flex;}

  .hero-inner{grid-template-columns:1fr;gap:40px;}
  .hero-copy{padding-bottom:40px;}
  .hero-visual-wrap{height:460px;justify-self:center;}
  .hero-visual{transform:scale(.86);transform-origin:bottom center;}

  .how-grid{grid-template-columns:repeat(2,1fr);}

  .no-gallery-inner{grid-template-columns:1fr;gap:40px;}
  .thumb-grid{grid-template-columns:repeat(4,1fr);}

  .film-grid{grid-template-columns:repeat(2,1fr);}

  .gift-inner{grid-template-columns:1fr;gap:40px;}
  .gift-card{max-width:420px;}

  .pricing-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:640px){
  :root{--header-h:66px;}
  .header-inner{padding-top:16px;padding-bottom:16px;}

  .hero{padding-top:56px;}
  .hero-actions{flex-direction:column;align-items:stretch;}
  .hero-actions .btn{width:100%;}
  .hero-visual-wrap{height:340px;}
  .hero-visual{transform:scale(.62);}

  .section-heading{flex-direction:column;align-items:flex-start;gap:8px;}

  .how-grid{grid-template-columns:1fr;}

  .thumb-grid{grid-template-columns:repeat(3,1fr);}

  .film-grid{grid-template-columns:1fr;}

  .gift-actions{flex-direction:column;align-items:stretch;}
  .gift-actions .btn{width:100%;}

  .pricing-grid{grid-template-columns:1fr;}

  .closing-cta-inner{flex-direction:column;align-items:flex-start;}
  .closing-cta .btn{width:100%;}

  .footer-inner{flex-direction:column;align-items:flex-start;}
}