:root {
  --bg: #f7f2ea;
  --ink: #3a2a20;
  --accent: #b8531c;
  --accent-dark: #8a3b10;
  --eyebrow: #8a6a52;
  --muted: #6b5444;
  --sand: #efe6d9;
  --card: #fbf8f3;
  --dark: #241a14;
  --glow: #e3915a;
  --rule: rgba(58, 42, 32, .14);
  --serif: 'Cormorant Garamond', serif;
  --sans: Manrope, system-ui, sans-serif;
}

html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased }
* { box-sizing: border-box }
a { color: var(--accent) }
a:hover { color: var(--accent-dark) }
img { display: block }
[hidden] { display: none !important }
button { font-family: var(--sans) }

.wrap { max-width: 1200px; margin: 0 auto }
.eyebrow { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--eyebrow) }
.h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05 }
.anchor { scroll-margin-top: 60px }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(247, 242, 234, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(58, 42, 32, .08) }
.site-header .wrap { padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px }
.logo { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: .01em }
.logo:hover { color: var(--ink) }
.site-nav { display: flex; gap: 22px; align-items: center; font-size: 14px; flex-wrap: wrap }
.site-nav a { color: var(--ink); text-decoration: none }

/* 01 Hero */
.hero { max-width: 1200px; margin: 0 auto; padding: 56px 24px 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: center }
.hero-copy { display: flex; flex-direction: column; gap: 24px }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(44px, 6vw, 76px); line-height: 1; letter-spacing: -.01em; text-wrap: balance }
.hero h1 em { color: var(--accent) }
.hero-lead { display: flex; flex-direction: column; gap: 12px; font-size: 18px; line-height: 1.6; max-width: 520px; text-wrap: pretty }
.hero-lead p { margin: 0 }
.hero-lead .soft { color: var(--muted) }
.btn-dark { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); text-decoration: none; padding: 16px 28px; border-radius: 999px; font-weight: 600; font-size: 16px }
.btn-dark:hover { background: var(--accent); color: #fff }
.hero-collage { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: clamp(420px, 52vw, 600px) }
.hero-collage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 16px }
.hero-collage .p-full { grid-row: 1 / span 2;}

/* 02 Choose */
.choose { background: var(--sand); padding: 80px 24px }
.choose .wrap { display: flex; flex-direction: column; gap: 40px }
.section-head-center { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center }
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px }
.path { background: var(--card); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column }
.path img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover }
.path-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1 }
.path h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.1 }
.path p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); text-wrap: pretty }
.path-links { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap }
.path-links a { border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; padding: 10px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .08em }
.path-links a:hover { background: var(--ink); color: var(--bg) }

/* 03 Formats */
.formats { max-width: 1200px; margin: 0 auto; padding: 88px 24px 40px }
.formats-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 48px }
.product { scroll-margin-top: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 40px; padding: 40px 0; border-top: 1px solid var(--rule) }
.product-media { position: sticky; top: 90px; align-self: start }
.product-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px }
.sale-badge { position: absolute; top: -14px; right: -10px; width: 124px; height: 124px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transform: rotate(-10deg); box-shadow: 0 0 0 5px var(--bg), 0 10px 24px rgba(138, 59, 16, .35); animation: sale-pop .5s cubic-bezier(.3, 1.6, .5, 1) both }
.sale-badge-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9 }
.sale-badge-price { font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: .9; white-space: nowrap }
.sale-badge-currency { font-size: 12px; font-weight: 600; opacity: .9 }
.sale-badge-price sup { font-size: .45em; vertical-align: .9em; margin-left: 1px }
@keyframes sale-pop { from { transform: rotate(-10deg) scale(.4); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .sale-badge { animation: none } }
@media (max-width: 480px) { .sale-badge { width: 104px; height: 104px; top: -10px; right: -4px } .sale-badge-price { font-size: 36px } }
.product-body { display: flex; flex-direction: column; gap: 18px }
.product-titles { display: flex; flex-direction: column; gap: 6px }
.product-tag { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent) }
.product h3 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05 }
.product-subtitle { font-size: 17px; color: var(--muted) }
.product-for { margin: 0; font-size: 16px; line-height: 1.6; text-wrap: pretty }
.product-desc { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty }
.box { background: var(--sand); border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px }
.box-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow) }
.box ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 20px }
.box li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45 }
.box li::before { content: '•'; color: var(--accent) }
.product-note { margin: 0; font-size: 15px; font-style: italic; color: var(--muted) }

.picker { display: flex; flex-direction: column; gap: 14px; padding-top: 4px }
.picker-title { font-size: 15px; font-weight: 600 }
.segmented { display: flex; gap: 4px; background: var(--sand); border-radius: 999px; padding: 4px; width: fit-content; max-width: 100%; flex-wrap: wrap }
.segmented button { border: 0; background: transparent; color: var(--ink); padding: 9px 16px; border-radius: 999px; font: 500 13px var(--sans); cursor: pointer }
.segmented button:hover { background: rgba(58, 42, 32, .08) }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 600 }
.swatch-rows { display: flex; flex-direction: column; gap: 12px }
.swatch-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap }
.swatch-label { width: 92px; font-size: 13px; color: var(--eyebrow) }
.swatches { display: flex; gap: 14px; flex-wrap: wrap }
.swatch { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 500 12px var(--sans); color: var(--ink) }
.swatch-img { position: relative; width: 56px; height: 56px; display: block }
.swatch-img img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover }
.swatch[aria-pressed="true"] .swatch-img::after { content: ''; position: absolute; inset: -5px; border: 2px solid var(--ink); border-radius: 50% }
.author-note { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1.5px dashed rgba(58, 42, 32, .3); border-radius: 14px }
.author-stack { display: flex }
.author-stack img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg) }
.author-stack img + img { margin-left: -10px }
.author-note div { font-size: 14px; line-height: 1.45 }

.buy { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px }
.price { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap }
.price.is-sale { display: flex; align-items: baseline; gap: 12px }
.price.is-sale .price-now { color: var(--accent) }
.price-old { font-size: .6em; font-weight: 500; color: var(--muted); text-decoration-thickness: 2px; text-decoration-color: var(--accent) }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.btn-accent { border: 0; background: var(--accent); color: #fff; padding: 16px 28px; border-radius: 999px; font: 600 16px var(--sans); cursor: pointer }
.btn-accent:hover { background: var(--ink) }
.btn-accent:disabled { opacity: .6; cursor: progress; background: var(--accent) }
.buy-summary { font-size: 14px; color: var(--muted) }

/* 04 Start simple */
.simple { max-width: 1200px; margin: 0 auto; padding: 72px 24px 96px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: center }
.simple-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.simple-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px }
.simple-photos .tall { aspect-ratio: 3 / 4; grid-row: span 2; height: 100% }
.simple-photos .detail { object-position: center 30% }
.simple-copy { display: flex; flex-direction: column; gap: 20px }
.simple-copy .h2 { text-wrap: balance }
.simple-copy p { margin: 0; font-size: 17px; line-height: 1.65; text-wrap: pretty }
.duration { display: flex; align-items: baseline; gap: 16px; padding-top: 12px; border-top: 1px solid var(--rule) }
.duration-value { font-family: var(--serif); font-size: 56px; line-height: 1; color: var(--accent); white-space: nowrap }
.duration-text { font-size: 15px; line-height: 1.5; color: var(--muted) }

/* 05 Process */
.process { background: var(--ink); color: var(--bg); padding: 88px 24px }
.process .wrap { display: flex; flex-direction: column; gap: 40px }
.process-head { display: flex; flex-direction: column; gap: 10px; max-width: 640px }
.process-head .eyebrow { color: #d9b89a }
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: start }
.video { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--dark) }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45 }
.video-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 24px }
.play { width: 76px; height: 76px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink); font-size: 24px; padding-left: 5px }
.video-caption { font: 500 13px ui-monospace, Menlo, monospace; color: var(--bg); background: rgba(36, 26, 20, .7); padding: 6px 10px; border-radius: 6px }
.steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0 28px; counter-reset: step }
.steps li { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(247, 242, 234, .15); font-size: 16px; line-height: 1.4; counter-increment: step }
.steps li::before { content: counter(step); font-family: var(--serif); font-size: 26px; color: var(--glow); min-width: 26px }

/* 06 Delivery */
.delivery { max-width: 1200px; margin: 0 auto; padding: 88px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 40px }
.delivery-head { display: flex; flex-direction: column; gap: 10px }
.delivery-rows { display: flex; flex-direction: column; grid-column: span 2; min-width: 0 }
.delivery-row { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--rule) }
.delivery-row:last-child { border-bottom: 1px solid var(--rule) }
.delivery-row dt { font-weight: 600; font-size: 16px }
.delivery-row dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted) }
@media (max-width: 719px) { .delivery-rows { grid-column: auto } }

/* 07 FAQ */
.faq { background: var(--sand); padding: 88px 24px }
.faq .wrap { max-width: 820px; display: flex; flex-direction: column; gap: 32px }
.faq .h2 { text-align: center }
.faq-list { display: flex; flex-direction: column; gap: 10px }
.faq-item { background: var(--card); border-radius: 16px; overflow: hidden }
.faq-item button { width: 100%; border: 0; background: none; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; text-align: left; font: 600 17px var(--sans); color: var(--ink) }
.faq-sign { font-size: 22px; font-weight: 400; color: var(--accent); line-height: 1 }
.faq-item p { margin: 0; padding: 0 24px 22px; font-size: 16px; line-height: 1.6; color: var(--muted); text-wrap: pretty }

/* 08 Final */
.final { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden }
.final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60% }
.final-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(36, 26, 20, .1) 0%, rgba(36, 26, 20, .55) 45%, rgba(36, 26, 20, .92) 100%) }
.final-copy { position: relative; max-width: 1200px; width: 100%; margin: 0 auto; padding: 120px 24px 72px; color: var(--bg); display: flex; flex-direction: column; gap: 20px }
.final-copy h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(42px, 5.5vw, 72px); line-height: 1 }
.final-lines { display: flex; flex-direction: column; gap: 4px; font-family: var(--serif); font-style: italic; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3 }
.final-copy p { margin: 0; max-width: 560px; font-size: 17px; line-height: 1.6; text-wrap: pretty }
.btn-light { background: var(--bg); color: var(--ink); text-decoration: none; padding: 16px 28px; border-radius: 999px; font-weight: 600; font-size: 16px }
.btn-light:hover { background: var(--glow); color: var(--dark) }

.site-footer { background: var(--dark); color: #d9c8b8; padding: 28px 24px }
.site-footer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px }
.footer-brand { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap }
.instagram { display: inline-flex; align-items: center; gap: 8px; color: #d9c8b8; text-decoration: none }
.instagram:hover { color: var(--glow) }

/* Order modal */
.modal { position: fixed; inset: 0; z-index: 50; background: rgba(36, 26, 20, .55); display: flex; align-items: center; justify-content: center; padding: 16px }
.modal[hidden] { display: none }
.modal-card { background: var(--bg); border-radius: 24px; width: 100%; max-width: 480px; max-height: calc(100vh - 32px); overflow: auto; padding: 28px; display: flex; flex-direction: column; gap: 18px; position: relative }
.modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--sand); cursor: pointer; font-size: 18px; color: var(--ink) }
.order-head { display: flex; gap: 14px; align-items: center; padding-right: 44px }
.order-head img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover }
.order-head-text { display: flex; flex-direction: column; gap: 4px }
.order-title { font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1.1 }
.order-summary { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--accent-dark) }
.order-form { display: flex; flex-direction: column; gap: 18px }
.order-fields { display: flex; flex-direction: column; gap: 12px }
.order-fields input { padding: 14px 16px; border: 1px solid rgba(58, 42, 32, .2); border-radius: 12px; background: #fff; font: 15px var(--sans); color: var(--ink); width: 100% }
.order-fields input:focus { outline: 2px solid var(--accent); outline-offset: -1px }
.order-fields input[aria-invalid="true"] { border-color: var(--accent) }
.carriers { display: flex; gap: 8px }
.carriers button { flex: 1; padding: 12px; border: 1.5px solid rgba(58, 42, 32, .25); border-radius: 12px; background: transparent; color: var(--ink); font: 500 14px var(--sans); cursor: pointer }
.carriers button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); font-weight: 600 }
.order-note { font-size: 13px; line-height: 1.5; color: var(--muted) }
.order-error { font-size: 14px; line-height: 1.5; color: var(--accent-dark); background: rgba(184, 83, 28, .08); border-radius: 12px; padding: 10px 14px }
.order-error:empty { display: none }
.order-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule) }
.order-total span:first-child { font-size: 15px; color: var(--muted) }
.order-total span:last-child { font-family: var(--serif); font-size: 32px; font-weight: 600 }
.order-form .btn-accent { padding: 16px }
.order-done { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; padding: 20px 8px }
.order-done img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover }
.order-done-title { font-family: var(--serif); font-size: 30px; font-weight: 600 }
.order-done-text { font-size: 15px; line-height: 1.6; color: var(--muted) }
.btn-outline { border: 1.5px solid var(--ink); background: none; color: var(--ink); padding: 12px 24px; border-radius: 999px; font: 600 14px var(--sans); cursor: pointer }