.landing-page .container { padding-bottom: 0; }
.landing-page h1, .landing-page h2 { font-family: Georgia, 'Noto Naskh Arabic', serif; font-weight: 400; }
html[lang=ar] .landing-page h1, html[lang=ar] .landing-page h2 { font-family: 'Noto Naskh Arabic', Georgia, serif; }
.landing-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 7%; padding: 52px 0 56px; min-height: 650px; }
.landing-hero-copy { padding-block: 24px 20px; }
.landing-hero-copy .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; }
.eyebrow-line { width: 25px; height: 1px; background: #85976c; }
.landing-hero h1 { font-size: clamp(48px, 5.8vw, 77px); line-height: 1.12; letter-spacing: -2.5px; margin: 0; }
html[lang=ar] .landing-hero h1 { font-size: clamp(56px, 6.4vw, 88px); line-height: 1.3; }
.landing-hero h1 > span { color: #7b8b5d; font-style: italic; }
html[lang=ar] .landing-hero h1 > span { font-style: normal; }
.landing-lead { font-size: 13px; line-height: 2.1; color: #738069; max-width: 390px; margin-block: 25px 30px; }
.landing-hero-actions { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.hero-assurance { display: flex; align-items: center; gap: 12px; border-top: 1px solid #e0e5d5; margin-block-start: 43px; padding-block-start: 22px; max-width: 390px; }
.assurance-icon { width: 32px; height: 32px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #d9e1ca; border-radius: 50%; color: #6e8153; font-size: 12px; }
.hero-assurance p { font-size: 11px; color: #47603d; margin: 0; }
.hero-assurance small { display: block; font-size: 9px; color: #8b927f; margin-top: 2px; }
.landing-hero-visual { position: relative; padding-inline: 12px; }
.hero-photo-frame { position: relative; overflow: hidden; background: #e6e9dc; border-radius: 220px 220px 6px 6px; height: clamp(420px, 43vw, 550px); }
.hero-photo-frame picture, .hero-photo-frame img { display: block; width: 100%; height: 100%; }
.hero-photo-frame img { object-fit: cover; object-position: 50% 45%; }
.hero-photo-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #16372455, transparent 45%); pointer-events: none; }
.hero-photo-label { position: absolute; z-index: 1; inset-inline: 25px; bottom: 24px; display: flex; justify-content: space-between; gap: 15px; color: #f8f9eb; font-size: 8px; letter-spacing: 1.3px; }
.hero-photo-label span { color: #d9e1bc; }
.hero-seal { position: absolute; top: 50px; inset-inline-start: -35px; z-index: 2; width: 104px; height: 104px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #e9edda; border: 5px solid #fbfaf5; border-radius: 50%; outline: 1px solid #c8d1b6; transform: rotate(-12deg); box-shadow: 0 5px 15px #152e1b0a; }
.hero-seal > span { font-size: 7px; line-height: 1.5; letter-spacing: 1px; color: #4c6344; }
.hero-seal svg { height: 45px; width: 45px; color: #5e764f; }
.hero-margin-note { margin: 11px 0 0; font-size: 8px; color: #7f8c72; text-align: end; letter-spacing: 1px; }
.landing-benefits { display: grid; grid-template-columns: repeat(4, 1fr); padding: 22px 0; border-block: 1px solid #dfe5d4; }
.landing-benefits p { display: flex; justify-content: center; align-items: center; gap: 13px; margin: 0; font-size: 11px; color: #67765b; border-inline-end: 1px solid #dfe5d4; }
.landing-benefits p:last-child { border-inline-end: 0; }
.landing-benefits span { color: #8b9a70; font-size: 13px; }
.landing-section { padding-block: 82px; scroll-margin-top: 30px; }
.landing-section-header { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 32px; }
.landing-section-header .eyebrow { margin-bottom: 11px; }
.landing-section-header h2 { font-size: clamp(32px, 3.4vw, 45px); line-height: 1.3; margin-bottom: 13px; letter-spacing: -1px; }
.landing-section-header p:not(.eyebrow) { font-size: 12px; color: #7c8670; max-width: 370px; line-height: 1.9; margin-bottom: 0; }
.landing-section-header .text-link { flex-shrink: 0; margin-bottom: 6px; }
.landing-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px,100%),1fr)); gap: 22px; }
.landing-product-grid .product-art { max-height: 330px; }
.selection-editorial { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background: #e9eddf; border-radius: 8px; padding: 35px; min-height: 360px; }
.editorial-star { color: #849c62; font-size: 58px; line-height: 1; margin-bottom: 30px; }
.selection-editorial .eyebrow { font-size: 9px; }
.selection-editorial h3 { font-family: Georgia, 'Noto Naskh Arabic', serif; font-size: 30px; font-weight: 400; line-height: 1.5; max-width: 300px; }
html[lang=ar] .selection-editorial h3 { font-family: 'Noto Naskh Arabic', Georgia, serif; }
.selection-editorial > p:not(.eyebrow) { font-size: 12px; color: #788569; max-width: 300px; }
.selection-editorial .text-link { margin-top: 13px; }
.landing-story { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; padding-block: 20px 80px; align-items: center; }
.story-wordmark { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; aspect-ratio: 1.15; background: #e7ebdc; padding: 12%; overflow: hidden; border-radius: 6px; direction: ltr; color: #385b3a; }
.story-wordmark > span { position: relative; z-index: 1; font-family: Georgia,serif; font-size: clamp(40px, 6vw, 77px); line-height: 1.05; letter-spacing: -3px; }
.wordmark-dot { color: #a2ac78; }
.wordmark-rule { margin-top: 23px; width: 35px; height: 1px; background: #8fa478; }
.story-wordmark > p { position: relative; z-index: 1; font-size: 10px; letter-spacing: 1px; color: #7e8b69; margin-top: 15px; }
.story-wordmark svg { position: absolute; right: -34px; bottom: -25px; width: 65%; opacity: .25; transform: rotate(18deg); }
.story-copy h2 { font-size: clamp(34px, 3.6vw, 46px); line-height: 1.4; margin-bottom: 22px; letter-spacing: -1px; }
.story-copy > p:not(.eyebrow) { font-size: 12px; line-height: 2; color: #7a8570; }
.story-signature { display: flex; align-items: center; gap: 12px; margin-top: 27px; }
.signature-mark { font-size: 30px; color: #8e9d6b; }
.story-signature strong { display: block; font-size: 15px; font-family: Georgia,serif; font-style: italic; font-weight: 400; }
.story-signature div > span { display: block; font-size: 8px; color: #8b947e; margin-top: 3px; }
.landing-ordering { border-top: 1px solid #dfe5d4; }
.ordering-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; margin-top: 35px; }
.ordering-steps article { padding-inline-end: 30px; border-inline-end: 1px solid #e0e5d6; }
.ordering-steps article:last-child { border-inline-end: 0; }
.ordering-number { display: block; margin-bottom: 18px; color: #9ba883; font-family: Georgia,serif; font-size: 37px; line-height: 1; }
.ordering-steps h3 { font-size: 15px; font-weight: 500; margin-bottom: 10px; }
.ordering-steps p { color: #7b8671; font-size: 11px; line-height: 2; max-width: 300px; }
.landing-cta { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 50px; background: #254c36; padding: 43px 48px; border-radius: 7px; color: #fbf8e8; }
.landing-cta > div, .landing-cta > a { position: relative; z-index: 1; }
.landing-cta .eyebrow { color: #b8c49a; margin-bottom: 10px; font-size: 9px; }
.landing-cta h2 { font-size: clamp(32px, 3.5vw, 47px); line-height: 1.4; margin-bottom: 8px; }
.landing-cta p:not(.eyebrow) { font-size: 11px; color: #bfccb5; margin-bottom: 0; max-width: 380px; }
.landing-cta .button { color: #2e5035; background: #e7ebd5; border-color: #e7ebd5; white-space: nowrap; min-width: 160px; }
.landing-cta .button:hover { background: #f2f3e4; }
.cta-decoration { position: absolute; inset-inline-end: 10%; top: -50px; font-size: 340px; line-height: 1; color: #4a7049; opacity: .22; transform: rotate(-16deg); pointer-events: none; }
.landing-faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10%; }
.landing-faq h2 { font-size: 39px; line-height: 1.4; }
.landing-faq > div > p:not(.eyebrow) { font-size: 12px; line-height: 2; color: #7d8871; margin-bottom: 24px; }
.faq-list details { border-bottom: 1px solid #dfe5d4; }
.faq-list details:first-child { border-top: 1px solid #dfe5d4; }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 23px 0; font-size: 12px; font-weight: 500; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { color: #88966f; font-size: 24px; line-height: 1; transition: transform .15s; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list details > p { font-size: 11px; color: #7a866e; line-height: 2; margin: 0; padding-bottom: 23px; padding-inline-end: 35px; }
@media(max-width:1100px) {
    .landing-hero { gap: 6%; min-height: 600px; }
    .landing-hero h1 { font-size: 59px; }
    html[lang=ar] .landing-hero h1 { font-size: 67px; }
    .landing-hero-actions { gap: 20px; }
    .landing-hero .button { padding-inline: 16px; }
    .hero-photo-frame { height: 470px; }
    .hero-seal { inset-inline-start: -20px; width: 90px; height: 90px; }
    .landing-product-grid { gap: 18px; }
}
@media(max-width:850px) {
    .landing-hero { padding-block: 30px 45px; min-height: 520px; }
    .landing-hero h1 { font-size: 48px; }
    html[lang=ar] .landing-hero h1 { font-size: 57px; }
    .landing-lead { font-size: 11px; margin-block: 20px 25px; }
    .hero-photo-frame { height: 410px; }
    .hero-assurance { margin-top: 25px; padding-top: 16px; }
    .landing-benefits p { font-size: 9px; gap: 8px; }
    .landing-section { padding-block: 60px; }
    .landing-story { gap: 6%; padding-top: 0; }
    .story-copy h2 { font-size: 33px; }
    .story-wordmark { aspect-ratio: .85; }
    .story-copy > p:not(.eyebrow) { font-size: 11px; }
    .landing-faq { gap: 6%; }
    .landing-faq h2 { font-size: 34px; }
}
@media(max-width:700px) {
    .landing-hero { grid-template-columns: 1fr; gap: 34px; padding-block: 28px 35px; }
    .landing-hero-copy { padding: 0; }
    .landing-hero-copy .eyebrow { margin-bottom: 15px; font-size: 9px; }
    .landing-hero h1 { font-size: clamp(45px, 9vw, 65px); letter-spacing: -2px; }
    html[lang=ar] .landing-hero h1 { font-size: clamp(54px, 12vw, 72px); line-height: 1.25; }
    .landing-lead { font-size: 12px; max-width: 440px; margin-block: 20px 23px; }
    .landing-hero-actions { gap: 24px; }
    .hero-assurance { border-top: 0; margin-top: 18px; padding-top: 0; }
    .hero-assurance small { font-size: 8px; }
    .landing-hero-visual { padding-inline: 15px; }
    .hero-photo-frame { height: 400px; max-width: 450px; margin: auto; border-radius: 190px 190px 5px 5px; }
    .hero-photo-frame img { object-position: center 45%; }
    .hero-seal { inset-inline-start: 0; top: 38px; width: 92px; height: 92px; }
    .hero-margin-note { font-size: 7px; }
    .landing-benefits { grid-template-columns: 1fr 1fr; padding: 10px 0; }
    .landing-benefits p { padding-block: 12px; justify-content: flex-start; gap: 10px; font-size: 10px; }
    .landing-benefits p:nth-child(even) { border-inline-end: 0; padding-inline-start: 18px; }
    .landing-section { padding-block: 44px; }
    .landing-section-header { align-items: flex-start; gap: 16px; flex-direction: column; margin-bottom: 26px; }
    .landing-section-header h2 { font-size: 35px; margin-bottom: 8px; }
    .landing-section-header p:not(.eyebrow) { font-size: 11px; }
    .landing-product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
    .landing-product-grid .product-art { min-height: 160px; }
    .selection-editorial { grid-column: 1/-1; min-height: 250px; padding: 27px; }
    .editorial-star { font-size: 40px; margin-bottom: 16px; }
    .selection-editorial h3 { font-size: 29px; }
    .landing-story { grid-template-columns: 1fr; gap: 30px; padding-top: 0; }
    .story-wordmark { aspect-ratio: 1.4; padding: 10%; }
    .story-wordmark > span { font-size: 65px; }
    .story-wordmark svg { width: 55%; }
    .story-copy h2 { font-size: 37px; }
    .story-copy > p:not(.eyebrow) { font-size: 12px; }
    .ordering-steps { grid-template-columns: 1fr; gap: 23px; margin-top: 20px; }
    .ordering-steps article { position: relative; border-inline-end: 0; border-bottom: 1px solid #e0e5d6; padding-block: 0 20px; padding-inline: 60px 0; }
    .ordering-steps article:last-child { border-bottom: 0; padding-bottom: 0; }
    .ordering-number { position: absolute; inset-inline-start: 0; top: 5px; font-size: 32px; }
    .ordering-steps p { max-width: none; margin-bottom: 0; }
    .landing-cta { flex-direction: column; align-items: flex-start; padding: 31px 26px; gap: 23px; }
    .landing-cta h2 { font-size: 36px; }
    .cta-decoration { font-size: 260px; inset-inline-end: -50px; top: 30px; }
    .landing-faq { grid-template-columns: 1fr; gap: 26px; }
    .landing-faq h2 { font-size: 36px; }
    .landing-faq > div > p:not(.eyebrow) { margin-bottom: 16px; }
    .faq-list summary { font-size: 12px; padding-block: 20px; }
}
/* Olive oil is the current focus; show the actual bottle rather than crop it. */
.hero-photo-frame.olive-oil-frame { background: radial-gradient(ellipse at 50% 35%, #f3f2df 0%, #e3e8d4 65%, #dbe2cc 100%); border: 1px solid #dce3cd; }
.hero-photo-frame.olive-oil-frame img { object-fit: contain; object-position: center; padding: 52px 35px 58px; mix-blend-mode: multiply; }
.hero-photo-frame.olive-oil-frame::after { background: none; }
.olive-oil-frame .hero-photo-label { color: #4c6040; font-size: 8px; }
.olive-oil-frame .hero-photo-label span { color: #9b8c53; }
@media(max-width:700px) { .hero-photo-frame.olive-oil-frame img { padding: 38px 24px 48px; } }