@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&display=swap');

:root { --ink:#12162b; --navy:#181d45; --red:#ec3046; --cream:#fff9ee; --sky:#4cc9e8; --line:rgba(18,22,43,.14); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:0 5vw; color:white; background:rgba(24,29,69,.96); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.13); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.04em; font-size:1.08rem; }
.brand em { display:block; color:var(--sky); font-size:.65rem; font-style:normal; letter-spacing:.19em; text-transform:uppercase; }
.brand-heart { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--red); color:white; font-size:1.1rem; box-shadow:0 0 0 4px rgba(236,48,70,.2); }
nav { display:flex; align-items:center; gap:30px; font-size:.9rem; font-weight:700; }
.nav-order { padding:11px 19px; border-radius:99px; background:var(--red); }
.hero { min-height:690px; display:grid; grid-template-columns:1.02fr .98fr; background:var(--navy); color:white; overflow:hidden; }
.hero-copy { padding:105px 6vw 68px; align-self:center; }
.eyebrow { margin:0 0 16px; color:var(--red); font-weight:800; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; }
h1,h2 { font-family:"Bebas Neue",Impact,sans-serif; font-weight:400; line-height:.91; letter-spacing:.01em; margin:0; }
h1 { font-size:clamp(4.8rem,8vw,8.6rem); }
h1 span { color:var(--sky); }
.hero-text { max-width:620px; margin:28px 0; color:#dfe2f4; font-size:1.1rem; line-height:1.7; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border-radius:5px; font-weight:800; transition:.2s transform,.2s box-shadow; }
.button:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(0,0,0,.18); }
.button.primary { background:var(--red); color:white; }
.button.secondary { border:1px solid rgba(255,255,255,.35); color:white; }
.quick-facts { display:flex; gap:40px; margin-top:55px; padding-top:30px; border-top:1px solid rgba(255,255,255,.16); }
.quick-facts div { display:grid; }
.quick-facts strong { font-family:"Bebas Neue",sans-serif; font-size:2.2rem; color:white; line-height:1; }
.quick-facts span { color:#aeb3d0; font-size:.76rem; margin-top:5px; }
.hero-image-wrap { position:relative; min-height:690px; background:#f2d4ce; }
.hero-image { width:100%; height:100%; object-fit:cover; }
.hero-image-wrap:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(24,29,69,.22),transparent 30%); pointer-events:none; }
.giveback-sticker { position:absolute; z-index:2; right:7%; bottom:7%; width:165px; height:165px; border-radius:50%; display:grid; place-content:center; text-align:center; background:var(--red); color:white; transform:rotate(7deg); box-shadow:0 15px 40px rgba(18,22,43,.35); border:3px solid white; }
.giveback-sticker strong { font-family:"Bebas Neue"; font-size:3rem; line-height:.8; }
.giveback-sticker span { font-size:.68rem; font-weight:800; line-height:1.25; text-transform:uppercase; letter-spacing:.05em; }
.campaign-hero { position:relative; overflow:hidden; background:var(--navy); }
.campaign-hero > img { width:100%; aspect-ratio:1.82/1; object-fit:cover; }
.campaign-actions { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 6vw; background:var(--navy); color:white; border-top:1px solid rgba(255,255,255,.14); }
.campaign-actions p { margin:0; color:#c6c9db; font-weight:700; }
.marquee { display:flex; justify-content:center; align-items:center; gap:30px; min-height:68px; padding:15px; overflow:hidden; background:var(--sky); color:var(--navy); font-family:"Bebas Neue"; font-size:1.5rem; letter-spacing:.05em; }
.marquee i { color:white; font-style:normal; }
.section { padding:110px 6vw; }
.section-heading { max-width:700px; margin-bottom:50px; }
h2 { font-size:clamp(3.7rem,6vw,6.3rem); }
.section-heading > p:last-child { max-width:610px; color:#646777; line-height:1.7; font-size:1.03rem; }
.product-showcase { background:var(--cream); }
.product-picture-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.picture-card { position:relative; min-height:470px; overflow:hidden; background:var(--navy); color:white; border-radius:4px; }
.picture-card img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.picture-card:hover img { transform:scale(1.025); }
.picture-card:after { content:""; position:absolute; inset:38% 0 0; background:linear-gradient(transparent,rgba(10,14,39,.95)); }
.picture-card > div { position:absolute; z-index:2; left:28px; right:28px; bottom:26px; }
.picture-card span { color:var(--sky); font-weight:900; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.picture-card h3 { margin:6px 0; font-family:"Bebas Neue"; font-size:2.5rem; font-weight:400; letter-spacing:.02em; }
.picture-card p { margin:0; color:#d8daea; font-size:.84rem; }
.detail-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:white; }
.detail-grid article { min-height:285px; padding:34px; border-right:1px solid var(--line); }
.detail-grid article:last-child { border-right:0; }
.detail-grid article > span { font-family:"Bebas Neue"; color:var(--red); font-size:2rem; }
.detail-grid h3 { margin:56px 0 10px; font-size:1.15rem; }
.detail-grid p { margin:0; color:#717483; line-height:1.6; font-size:.9rem; }
.detail-grid .accent-card { background:var(--red); color:white; }
.detail-grid .accent-card span,.detail-grid .accent-card p { color:white; }
.colors { background:var(--navy); color:white; }
.section-heading.light > p:last-child { color:#b9bdd5; }
.color-gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.color-gallery figure { margin:0; background:white; color:var(--ink); padding:10px; border-radius:4px; }
.color-gallery img { width:100%; aspect-ratio:3/4; object-fit:cover; background:#eee; }
.color-gallery figcaption { display:flex; align-items:center; gap:10px; padding:14px 8px 6px; font-weight:800; }
.swatch { width:16px; height:16px; border-radius:50%; border:1px solid #aaa; }
.swatch.red { background:#df233b; }.swatch.white { background:white; }.swatch.blue { background:#2872cd; }.swatch.black { background:#151515; }
.order { display:grid; grid-template-columns:.85fr 1.15fr; gap:9vw; align-items:start; }
.order-intro p { color:#646777; line-height:1.7; }
.order-intro .eyebrow { color:var(--red); }
.order-intro ul { list-style:none; padding:0; margin:32px 0; display:grid; gap:14px; font-weight:700; }
.order-intro li span { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:10px; border-radius:50%; background:var(--sky); color:var(--navy); }
.order-card { padding:34px; border:1px solid var(--line); background:white; box-shadow:12px 12px 0 var(--sky); }
fieldset { border:0; padding:0; margin:0 0 20px; }
legend { margin-bottom:12px; font-weight:800; }
fieldset label,.personalize { display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--line); margin-bottom:10px; cursor:pointer; }
fieldset label.selected { border-color:var(--red); box-shadow:inset 4px 0 0 var(--red); }
input { accent-color:var(--red); width:18px; height:18px; }
label span { display:grid; flex:1; }
label small { color:#7b7d88; margin-top:3px; }
.personalize { background:#fff8e9; }
.estimate { display:flex; align-items:end; justify-content:space-between; padding:24px 0; margin-top:12px; border-top:1px solid var(--line); }
.estimate span { font-weight:700; }.estimate strong { font-family:"Bebas Neue"; font-size:3rem; line-height:.8; }
.full { width:100%; }
.fine-print { margin:14px 5px 0; text-align:center; color:#7b7d88; font-size:.74rem; line-height:1.5; }
.keychains { display:grid; grid-template-columns:.82fr 1.18fr; gap:8vw; align-items:center; background:var(--cream); }
.keychain-copy > p:not(.eyebrow) { color:#646777; line-height:1.75; font-size:1.02rem; }
.keychain-points { display:flex; flex-wrap:wrap; gap:9px; margin-top:28px; }
.keychain-points span { padding:9px 13px; border:1px solid var(--line); border-radius:99px; background:white; font-size:.76rem; font-weight:800; }
.keychain-visual { display:grid; grid-template-columns:1.4fr .6fr; gap:12px; }
.keychain-visual img { width:100%; height:100%; object-fit:cover; background:#eee; }
.key-main { min-height:510px; }
.key-small { display:grid; gap:12px; }
.order-form { box-shadow:12px 12px 0 var(--sky); }
.form-step { display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.form-step > span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:50%; background:var(--navy); color:white; font-weight:900; }
.form-step > div { display:grid; gap:2px; }
.form-step strong { font-size:1rem; }
.form-step small { color:#777b89; font-size:.72rem; }
.customer-step,.review-step { margin-top:32px; padding-top:28px; border-top:1px solid var(--line); }
.cart-products { display:grid; gap:14px; }
.cart-item { margin:0; background:white; border:1px solid var(--line); border-radius:5px; }
.cart-item.added { border:2px solid var(--sky); box-shadow:0 5px 18px rgba(18,22,43,.08); }
.cart-item-details { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.cart-added { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; color:#17748c; font-size:.78rem; }
.cart-added button { border:0; padding:0; background:transparent; color:var(--red); font:inherit; font-size:.72rem; font-weight:800; text-decoration:underline; cursor:pointer; }
.tumbler-line,.keychain-line { padding:15px; border:1px solid var(--line); border-radius:4px; background:#faf9f6; }
.tumbler-line + .tumbler-line,.keychain-line + .keychain-line { margin-top:12px; }
.line-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.line-title strong { font-size:.8rem; }
.remove-line { border:0; padding:0; background:transparent; color:var(--red); font:inherit; font-size:.7rem; font-weight:800; text-decoration:underline; cursor:pointer; }
.add-another { width:100%; min-height:42px; margin-top:12px; border:1px dashed #7c8199; border-radius:4px; background:white; color:var(--navy); font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; }
.add-another:hover { border-color:var(--sky); background:#f2fbfd; }
.empty-cart { margin:0 0 14px; padding:11px 14px; border-radius:3px; background:#fff4df; color:#735411; text-align:center; font-size:.76rem; font-weight:700; }
.form-grid,.builder-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.order-form label { display:grid; gap:7px; color:var(--ink); font-size:.8rem; font-weight:800; }
.order-form input,.order-form select,.order-form textarea { width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:3px; background:white; color:var(--ink); font:inherit; font-weight:500; accent-color:var(--red); }
.order-form textarea { resize:vertical; }
.order-form label small,.estimate small { display:block; color:#7b7d88; font-size:.68rem; font-weight:500; }
.product-builder { margin:26px 0 0; padding:22px; border:1px solid var(--line); background:#faf9f6; }
.product-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.product-builder.added .product-head { margin-bottom:18px; }
.product-head > img { width:68px; height:68px; flex:0 0 68px; object-fit:cover; border-radius:3px; background:#eee; }
.product-title { flex:1; }
.product-title small { color:#727582; font-size:.68rem; }
.product-head h3 { margin:3px 0 0; font-size:1.12rem; }
.product-head > label { display:flex; align-items:center; gap:8px; }
.product-head input { width:72px; }
.add-product { min-height:42px; padding:0 15px; border:0; border-radius:3px; background:var(--navy); color:white; font:inherit; font-size:.76rem; font-weight:800; cursor:pointer; }
.qty-control { display:flex; align-items:end; gap:10px; }
.qty-control label { gap:3px; }
.qty-control button { border:0; background:transparent; color:var(--red); font:inherit; font-size:.7rem; font-weight:800; text-decoration:underline; cursor:pointer; padding:0 0 12px; }
.product-kicker { color:var(--red); font-size:.65rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.builder-fields .wide,.full-field { grid-column:1/-1; }
.full-field { margin-top:18px; }
.font-preview { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.font-preview figure { margin:0; padding:8px; border:1px solid var(--line); background:white; }
.font-preview img { width:100%; height:100px; object-fit:contain; }
.font-preview figcaption { padding:6px 3px 0; font-size:.7rem; }
.button:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
footer { min-height:180px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:45px 6vw; background:var(--navy); color:white; }
footer p { color:#9da2c1; font-size:.82rem; } footer > a { color:var(--sky); font-weight:800; }
@media (max-width:900px) { nav a:not(.nav-order){display:none}.campaign-hero > img{aspect-ratio:1.55/1}.hero{grid-template-columns:1fr}.hero-copy{padding-top:80px}.hero-image-wrap{min-height:520px}.detail-grid{grid-template-columns:1fr 1fr}.detail-grid article:nth-child(2){border-right:0}.detail-grid article:nth-child(-n+2){border-bottom:1px solid var(--line)}.color-gallery{grid-template-columns:1fr 1fr}.keychains,.order{grid-template-columns:1fr;gap:45px}.keychain-visual{max-height:620px} }
@media (max-width:580px) { body{overflow-x:hidden}.site-header{min-height:68px;padding:0 16px}.brand{font-size:.9rem}.brand-heart{width:34px;height:34px}.nav-order{padding:9px 12px;font-size:.78rem}.campaign-hero > img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center}.campaign-actions{align-items:stretch;flex-direction:column;padding:18px}.campaign-actions p{font-size:.8rem;line-height:1.45}.campaign-actions .button{width:100%}.hero{min-height:auto}.hero-copy{padding:64px 18px 50px}h1{font-size:4.35rem}.quick-facts{gap:22px;justify-content:space-between}.hero-image-wrap{min-height:410px}.giveback-sticker{width:130px;height:130px}.section{padding:68px 18px}.section-heading{margin-bottom:34px}h2{font-size:3.45rem}.product-picture-grid{grid-template-columns:1fr}.picture-card{min-height:340px}.picture-card > div{left:22px;right:22px;bottom:22px}.detail-grid{grid-template-columns:1fr}.detail-grid article{border-right:0;border-bottom:1px solid var(--line);min-height:230px}.detail-grid h3{margin-top:35px}.color-gallery{gap:8px}.color-gallery figure{padding:6px}.color-gallery figcaption{gap:7px;padding:10px 4px 4px;font-size:.82rem}.color-gallery img{aspect-ratio:3/4}.keychain-visual{grid-template-columns:1fr;max-height:none}.key-main{min-height:330px}.key-small{grid-template-columns:1fr 1fr}.key-small img{aspect-ratio:1/1}.order-card{padding:17px;box-shadow:6px 6px 0 var(--sky)}.form-grid,.builder-fields{grid-template-columns:1fr}.builder-fields .wide{grid-column:auto}.product-builder{padding:13px}.product-head{flex-wrap:wrap}.product-title{min-width:125px}.product-head > img{width:58px;height:58px;flex-basis:58px}.add-product{width:100%}.qty-control{width:100%;justify-content:flex-end}.font-preview{grid-template-columns:1fr 1fr}.full-field{grid-column:auto}footer{flex-direction:column;align-items:flex-start;padding:40px 18px}.marquee{justify-content:flex-start;white-space:nowrap;gap:20px;font-size:1.25rem}.marquee span:nth-of-type(n+4),.marquee i:nth-of-type(n+3){display:none} }