:root { --ink: #231f20; --paper: #ffffff; --brand: #00b3aa; --coral: var(--brand); --yellow: var(--brand); --blue: var(--brand); --line: rgba(35,31,32,.22); }

* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; } a { color: inherit; text-decoration: none; }
.site-header { position: sticky; top: 0; z-index: 10; background: #f7f7f6; border-bottom: 1px solid var(--line); }.header-top, .header-bottom { padding: 0 6.3vw; display: flex; align-items: center; justify-content: space-between; }.header-top { height: 62px; background: #fafafa; font-size: 13px; color: #30435e; }.utility-nav, .main-nav, .header-contact, .account-actions { display: flex; align-items: center; }.utility-nav { gap: 45px; }.header-contact { gap: 20px; }.header-contact a { color: #1689e8; font-weight: 700; }.whatsapp { width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; color: var(--paper) !important; background: #25d366; font-size: 17px; line-height: 1; }.whatsapp span { display: block; transform: rotate(-18deg); }.country-pill { border: 1px solid #d2d2d0; border-radius: 24px; padding: 10px 17px; display: flex; align-items: center; gap: 8px; }.header-bottom { height: 66px; background: #f4f0e4; }.brand { font: 700 22px 'Space Grotesk', sans-serif; letter-spacing: -.8px; display: flex; align-items: center; gap: 9px; }.brand-mark { width: 28px; height: 28px; display: inline-grid; place-items: center; color: var(--paper); background: var(--ink); font-size: 17px; }.header-logo { display: block; width: 154px; height: auto; }.main-nav { gap: 30px; margin-left: auto; margin-right: auto; font-size: 13px; font-weight: 600; }.main-nav a, .socials a { transition: color .2s; }.main-nav a:hover, .socials a:hover { color: var(--coral); }.account-actions { gap: 25px; font-size: 13px; font-weight: 600; }.sign-in { color: #e87c7c; }.cart { font-size: 22px; }.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 20px; font-size: 13px; font-weight: 700; transition: transform .2s, background .2s; }.button:hover { transform: translateY(-3px); }.button-dark { color: var(--paper); background: var(--ink); }.button-coral { color: var(--ink); background: var(--coral); }.button-paper { color: var(--ink); background: var(--paper); padding: 0 25px; }.button-outline { border: 1px solid var(--ink); }.menu-button { display: none; border: 0; background: none; font-size: 22px; }
.hero { min-height: 670px; padding: 74px 9vw 70px 11vw; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; overflow: hidden; }.hero-copy { padding-top: 32px; position: relative; z-index: 1; }.eyebrow { text-transform: uppercase; font-size: 10px; letter-spacing: 1.7px; font-weight: 700; display: flex; gap: 10px; align-items: center; }.eyebrow span { display: inline-block; width: 23px; height: 2px; background: var(--coral); }.hero h1 { max-width: 540px; margin: 27px 0 22px; font: 600 clamp(58px, 7vw, 105px)/.92 'Space Grotesk', sans-serif; letter-spacing: -5px; }.hero h1 em, h2 em { color: var(--coral); font-style: normal; }.hero-intro { max-width: 360px; color: #535451; line-height: 1.65; font-size: 15px; }.hero-actions { margin-top: 33px; display: flex; gap: 27px; align-items: center; }.text-link { font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--ink); padding-bottom: 5px; }.text-link span { margin-left: 12px; }.hero-note { margin-top: 79px; display: flex; align-items: center; gap: 12px; text-transform: uppercase; font-size: 9px; letter-spacing: 1px; line-height: 1.5; font-weight: 700; }.star { color: var(--coral); font-size: 28px; }
.hero-art { min-height: 500px; position: relative; }.paper { position: absolute; width: 310px; height: 385px; box-shadow: 11px 16px 25px rgba(32,34,34,.13); }.paper-far-back { background: #b8b9b1; transform: rotate(-20deg) translate(-6px, 72px); }.paper-back { background: var(--yellow); transform: rotate(15deg) translate(75px, 55px); }.paper-far-mid { background: #e87c7c; transform: rotate(21deg) translate(118px, 68px); }.paper-mid { background: var(--blue); transform: rotate(-10deg) translate(30px, 55px); }.paper-front { z-index: 2; border: 0; cursor: pointer; background-color: var(--coral); background-position: center; background-size: cover; transform: rotate(3deg) translate(65px, 38px); padding: 33px; display: flex; flex-direction: column; justify-content: space-between; text-align: left; color: var(--ink); font: 600 42px/.9 'Space Grotesk', sans-serif; letter-spacing: -2px; transition: background-image .3s, transform .2s; }.paper-front:hover, .paper-front:focus-visible { transform: rotate(3deg) translate(65px, 38px) scale(1.02); }.paper-front b { font: 700 10px 'DM Sans'; letter-spacing: 1px; }.sun-stamp { position: absolute; z-index: 3; right: 2%; top: 10px; width: 120px; height: 120px; border-radius: 50%; background: var(--yellow); display: grid; place-content: center; text-align: center; font: 700 15px/.95 'Space Grotesk'; transform: rotate(12deg); }.sun-stamp small { font: 700 9px/.9 'DM Sans'; margin-top: 5px; }.ink-shape { position: absolute; width: 85px; height: 125px; right: 8%; bottom: 28px; background: var(--ink); clip-path: polygon(20% 0, 100% 14%, 80% 100%, 0 78%); transform: rotate(18deg); }.art-caption { position: absolute; bottom: 5px; left: 3px; font-size: 11px; line-height: 1.25; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.service-strip { background: var(--ink); color: var(--paper); padding: 35px 11vw 48px; display: grid; grid-template-columns: 20% 1fr; }.section-label { color: #b8b9b1; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; }.service-list { display: grid; grid-template-columns: 1fr 1fr; }.service-list a { border-top: 1px solid #555752; padding: 18px 0; display: grid; grid-template-columns: 40px 1fr 20px; align-items: center; font-size: 16px; }.service-list span { color: var(--coral); font-size: 10px; }.service-list b { font-size: 20px; font-weight: 400; }
.feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; }.feature-image { background: url('https://images.unsplash.com/photo-1544816155-12df9643f363?auto=format&fit=crop&w=1200&q=85') center/cover; position: relative; }.image-tag { position: absolute; top: 30px; left: 30px; background: var(--paper); padding: 9px 13px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }.feature-copy { padding: 100px 12vw 70px 9vw; }.feature-copy h2, .about h2, .quote-section h2 { font: 600 clamp(38px, 4.5vw, 65px)/.98 'Space Grotesk'; letter-spacing: -3px; margin: 25px 0; }.feature-copy p:not(.eyebrow) { max-width: 370px; font-size: 15px; color: #5c5d59; line-height: 1.7; margin-bottom: 36px; }
.about { padding: 105px 11vw 115px; background: var(--yellow); }.about h2 { margin: 32px 0 55px; max-width: 650px; }.about-bottom { display: flex; justify-content: space-between; align-items: end; gap: 30px; }.about-bottom p { max-width: 390px; font-size: 15px; line-height: 1.6; margin: 0; }.quote-section { padding: 85px 11vw; background: var(--coral); display: flex; align-items: end; justify-content: space-between; gap: 30px; }.quote-section h2 { margin-bottom: 0; }.eyebrow.light span { background: var(--ink); }.site-footer { padding: 27px 5.5vw; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); }.footer-logo { display: block; width: 154px; height: auto; }.site-footer p, .socials { font-size: 11px; color: #666761; }.socials { display: flex; gap: 20px; color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .header-top { display: none; }.header-bottom { height: 70px; padding: 0 6vw; }.main-nav, .account-actions { display: none; }.menu-button { display: block; }.hero { display: block; padding: 52px 8vw 45px; min-height: 0; }.hero h1 { font-size: 61px; letter-spacing: -3px; }.hero-note { margin-top: 48px; }.hero-art { min-height: 430px; margin-top: 24px; transform: scale(.88); transform-origin: top left; width: 114%; }.service-strip { display: block; padding: 33px 8vw 43px; }.service-list { margin-top: 25px; display: block; }.service-list a { padding: 17px 0; }.feature { display: block; }.feature-image { height: 320px; }.feature-copy { padding: 65px 8vw 75px; }.about { padding: 70px 8vw 76px; }.about h2 { margin-bottom: 36px; }.about-bottom { display: block; }.about-bottom .button { margin-top: 30px; }.quote-section { display: block; padding: 68px 8vw 75px; }.quote-section .button { margin-top: 38px; width: 100%; justify-content: space-between; }.site-footer { padding: 26px 6vw; display: grid; gap: 20px; }.site-footer p { margin: 0; }.socials { justify-content: space-between; } }
.hero h1, .paper-front { color: var(--ink); }
.header-logo { transform: translateX(-10px); }
.paper-message { display: none; }
.sun-stamp { padding: 15px; }
.sun-stamp strong { display: block; font: 700 17px/.92 'Space Grotesk', sans-serif; }
.trust-section { background: var(--paper); }
.trust-section img { display: block; width: 100%; height: auto; }
.products-section { padding: 76px 6.3vw 92px; background: var(--soft, #f4f0e4); border-top: 1px solid rgba(35,31,32,.12); }
.products-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.products-heading h2 { margin: 0; color: var(--ink); font: 600 clamp(32px, 3.5vw, 48px)/1 'Space Grotesk', sans-serif; letter-spacing: -2px; }
.products-heading h2::after { content: ''; display: inline-block; width: 42px; height: 8px; margin: 0 0 5px 13px; background: var(--brand); }
.products-link { color: #d9787c; font-size: 14px; font-weight: 700; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.product-card { min-width: 0; overflow: hidden; background: #fff; border-top: 5px solid var(--brand); box-shadow: 0 10px 24px rgba(35, 31, 32, .1); transition: transform .2s, box-shadow .2s; }
.product-card:nth-child(3n + 2) { border-top-color: var(--coral); }
.product-card:nth-child(3n) { border-top-color: var(--ink); }
.product-card:hover { transform: translateY(-6px); box-shadow: 0 16px 30px rgba(35, 31, 32, .15); }
.product-card > img { display: block; width: 100%; height: 224px; object-fit: cover; background: #e7e8e6; }
.product-info { min-height: 218px; padding: 18px 16px 17px; display: flex; flex-direction: column; align-items: flex-start; }
.product-info h3 { min-height: 40px; margin: 0 0 15px; color: #1e3d61; font: 600 16px/1.35 'DM Sans', sans-serif; }
.product-info .starting { margin: 0 0 8px; color: #718198; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; }
.product-info > strong { color: #1e3d61; font: 700 20px/1.2 'DM Sans', sans-serif; }
.product-info > strong small { font-size: 13px; font-weight: 600; }
.product-info > a { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: auto; padding: 11px 13px; overflow: hidden; color: var(--ink); background: var(--brand); font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.product-info > a span { font-size: 23px; line-height: 12px; }
.product-info > a:hover { background: #008f89; }
@media (max-width: 900px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .products-section { padding: 52px 8vw 65px; }.products-heading { align-items: flex-start; }.products-heading h2 { font-size: 31px; }.products-link { font-size: 12px; text-align: right; }.product-grid { gap: 16px; }.product-card > img { height: 165px; }.product-info { min-height: 205px; padding: 15px 12px 13px; }.product-info h3 { font-size: 14px; }.product-info > strong { font-size: 16px; }.product-info > strong small { font-size: 11px; }.product-info > a { width: 100%; gap: 5px; padding: 10px 9px; font-size: 11px; } }
.header-top { position: relative; }
.site-search { position: absolute; left: 50%; transform: translateX(-50%); width: min(280px, 30vw); height: 34px; display: flex; border: 1px solid #d2d2d0; background: var(--paper); }
.site-search input { min-width: 0; flex: 1; border: 0; outline: 0; padding: 0 12px; color: var(--ink); background: transparent; font: 13px 'DM Sans', sans-serif; }
.site-search input::placeholder { color: #777872; }
.site-search button { width: 36px; border: 0; color: var(--paper); background: var(--ink); cursor: pointer; font-size: 22px; line-height: 1; }
.site-search button:hover, .site-search button:focus-visible { background: var(--brand); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.search-highlight { outline: 3px solid var(--brand); outline-offset: 8px; }