:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #253529; background: #f7f1e8; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; height: 100%; overflow: hidden; background: #f7f1e8; }
main { height: 100svh; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 36svh); }
.hero { height: auto; min-height: 0; max-height: none; padding: clamp(.9rem, 2.2svh, 2rem) clamp(1.25rem, 3.2vw, 3.75rem) clamp(.75rem, 1.8svh, 1.5rem); display: grid; grid-template-columns: minmax(0, .9fr) minmax(340px, 1.1fr); grid-template-rows: auto minmax(0, 1fr); gap: clamp(.75rem, 2.2svh, 1.75rem); align-items: center; overflow: hidden; background: #f7f1e8; }
.brand { width: min(210px, 22vw); height: auto; grid-column: 1 / -1; }
.hero-copy { max-width: 680px; align-self: center; min-width: 0; }
.eyebrow { margin: 0 0 .8rem; color: #b23c2d; font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .85rem; font-family: Georgia, "Times New Roman", serif; color: #1f4936; font-size: clamp(2.5rem, 4.7vw, 5rem); line-height: .92; letter-spacing: -.055em; }
h1 span { display: block; }
.lead { max-width: 48ch; margin-bottom: 0; color: #586052; font-size: clamp(.92rem, 1.25vw, 1.08rem); line-height: 1.5; }
.film-frame { width: min(100%, 840px); max-height: 100%; min-width: 0; padding: clamp(.35rem, .8vw, .65rem); border-radius: 2rem; background: #fffdf9; box-shadow: 0 22px 55px rgba(57, 46, 28, .17); transform: rotate(1.5deg); }
video { display: block; width: 100%; max-height: min(43svh, 380px); aspect-ratio: 16 / 10; object-fit: cover; border-radius: 1.5rem; background: #20382d; pointer-events: none; cursor: default; user-select: none; }
.how { height: 100%; min-height: 0; padding: clamp(.65rem, 1.3svh, 1.25rem) clamp(1.25rem, 5vw, 5.5rem); display: grid; grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr); gap: clamp(.25rem, .7svh, .65rem); background: #f7f1e8; }
.section-heading { max-width: 680px; margin: 0 auto clamp(.55rem, 1.3svh, 1.1rem); text-align: center; }
.flow-block { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.flow-label { margin: 0 0 .25rem; color: #6e7f5e; font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
h2 { margin-bottom: 0; color: #17261c; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.045em; overflow-wrap: anywhere; }
.how-grid { width: 100%; height: 100%; max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 72px 1fr 72px 1fr; gap: 8px; align-items: center; }
.how-card { height: 100%; min-height: 0; min-width: 0; padding: 8px 12px; display: grid; grid-template-columns: auto 50px 1fr; align-items: center; gap: 10px; border: 1px solid #e6ddca; border-radius: 18px; background: #fff; }
.step-number { align-self: start; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #2e6843; color: #fff; font-size: .85rem; font-weight: 900; }
.how-card img { width: 46px; height: 46px; object-fit: contain; }
.how-card h3 { margin: 0 0 3px; color: #173a28; font-size: .85rem; }
.how-card p { margin: 0; color: #687269; font-size: .7rem; line-height: 1.3; }
.how-card > div { min-width: 0; }
.step-connector { width: 100%; overflow: visible; fill: none; stroke: #7ca34f; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 4 5; }
h3 { margin-bottom: .45rem; color: #294936; font-size: 1.15rem; }
@media (min-width: 801px) and (max-height: 760px) { .hero { gap: .65rem; } h1 { font-size: clamp(2.25rem, 4.6vw, 4.25rem); } .lead { font-size: .92rem; } video { max-height: 39svh; } }
@media (max-width: 800px) { main { grid-template-rows: minmax(0, 55%) minmax(0, 45%); } .hero { width: 100%; height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); gap: .45rem; padding: .7rem 1.25rem .65rem; } .brand { width: min(150px, 36vw); grid-column: auto; } .hero-copy { width: 100%; max-width: 100%; order: 1; overflow: hidden; } .eyebrow { margin-bottom: .35rem; font-size: .62rem; } h1 { margin-bottom: .45rem; font-size: clamp(2rem, 9vw, 3rem); line-height: .9; } .lead { max-width: 42ch; font-size: .82rem; line-height: 1.32; } .film-frame { width: 100%; max-width: 100%; height: 100%; order: 2; transform: none; overflow: hidden; display: flex; align-items: center; } video { width: 100%; max-width: 100%; max-height: 100%; height: auto; } .how { gap: .1rem; padding: .35rem .9rem .4rem; } .section-heading { width: 100%; min-width: 0; margin-bottom: .1rem; } .flow-label { margin-bottom: .1rem; font-size: .48rem; letter-spacing: .1em; } h2 { max-width: 100%; font-size: clamp(1.4rem, 6vw, 1.9rem); } .how-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 3px; } .how-card { height: auto; padding: .2rem .4rem; grid-template-columns: auto 32px minmax(0, 1fr); gap: 5px; border-radius: 11px; } .step-number { width: 24px; height: 24px; font-size: .68rem; } .how-card img { width: 28px; height: 28px; } .how-card h3 { margin-bottom: 1px; font-size: .66rem; } .how-card p { font-size: .55rem; line-height: 1.1; } .step-connector { display: none; } }
@media (max-width: 460px) { h1 { width: 100%; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(1.85rem, 8.7vw, 2.45rem); } .how-card { grid-template-columns: auto 30px minmax(0, 1fr); } .how-card img { width: 26px; height: 26px; } }
@media (max-width: 400px), (max-height: 720px) and (max-width: 800px) { body { min-width: 0; overflow-x: hidden; overflow-y: auto; } main { height: auto; min-height: 100svh; overflow: visible; display: block; } .hero { height: auto; min-height: 0; padding: .75rem 1rem 1rem; display: grid; grid-template-rows: auto auto auto; gap: .7rem; } .brand { width: min(135px, 36vw); } .hero-copy { overflow: visible; } h1 { font-size: clamp(2.05rem, 10vw, 2.7rem); } .lead { font-size: .78rem; } .film-frame { height: auto; min-height: 0; aspect-ratio: 16 / 10; } video { height: 100%; max-height: none; } .how { height: auto; min-height: 0; padding: .85rem .85rem 1rem; display: grid; grid-template-rows: auto auto auto; gap: .5rem; } .section-heading { margin-bottom: .15rem; overflow: hidden; } h2 { font-size: clamp(1.25rem, 5.6vw, 1.6rem); white-space: normal; overflow-wrap: anywhere; } .flow-block { min-height: 0; } .how-grid { height: auto; grid-template-rows: repeat(3, auto); } .how-card { min-height: 3rem; height: auto; } }