/* Layered bronze and ivory panels, scoped exclusively to sections 2 and 3. */
#story{isolation:isolate;overflow:hidden;clip-path:none;margin:0;padding:100px 7% 125px;grid-template-columns:1fr 1.05fr;gap:0;align-items:center;background:radial-gradient(ellipse at 35% 15%,#c3a582 0%,transparent 48%),linear-gradient(130deg,#51321f,#967354 55%,#d9c9b4);color:#fff4e6;border-radius:0 70px 0 0}
#story::before{content:'';position:absolute;z-index:-1;left:3%;top:32px;width:65%;height:78%;border:1px solid #fff4dc44;border-radius:130px 36px 180px 40px;box-shadow:inset 20px 4px 40px #ffe1b522;pointer-events:none}
#story .heritage-identity{position:relative;align-self:center;padding:0 30px 0 0;min-width:0}
#story .group-logo{width:110px;max-width:45%;padding:12px;background:#fffaf1;border-radius:18px;mix-blend-mode:normal;position:relative;z-index:2;margin:0 0 -32px 25px;box-shadow:0 12px 24px #24160d22}
#story .heritage-art{width:100%;max-width:none;height:480px;aspect-ratio:auto;margin:0;border-radius:100px 28px 110px 28px;box-shadow:0 28px 60px #21130840}
#story .heritage-art img{object-fit:cover}
#story .heritage-number{position:relative;margin:-78px 0 0 22px;font-size:clamp(5.5rem,10vw,10rem);color:#fff5df;text-shadow:0 3px 20px #26180d66;line-height:1}
#story .heritage-number span{font-size:12px;color:#efe0cc;letter-spacing:.12em;margin:15px 0 0 8px}
#story>div:last-child{position:relative;z-index:3;margin:110px 0 0 -28px;padding:48px 42px;background:linear-gradient(135deg,#fffef9,#f3ebdf);border:1px solid #fffaf0aa;border-radius:32px 32px 80px 32px;box-shadow:0 30px 60px #2b1c2033;color:#352015}
#story h2{font-size:clamp(2.4rem,3.6vw,4.1rem);margin-bottom:26px}
#story>div:last-child p{font-size:16px;line-height:1.75;color:#6d5848}
#story .text-link{font-size:14px;margin-top:28px}
#vision{isolation:isolate;clip-path:none;margin:0;overflow:hidden;padding:105px 7% 100px;background:radial-gradient(ellipse at 20% 85%,#bda99166,transparent 55%),linear-gradient(135deg,#e8dfd2,#fcfaf6 70%);min-height:990px}
#vision::before{content:'';position:absolute;z-index:-1;left:-14%;top:35%;width:75%;height:65%;border-radius:50%;background:linear-gradient(145deg,#fffcf4,#b7a18a77 50%,#fffbf5);transform:rotate(-32deg);box-shadow:25px 20px 55px #7d614318;pointer-events:none}
#vision .vision-art{z-index:-1;inset:55px 5% auto auto;width:53%;height:610px;background:#e8d4b7 url('assets/section-2-cocoa.png') 76% center/auto 100% no-repeat;border-radius:35px 110px 35px 90px;box-shadow:0 25px 65px #4934212b;overflow:hidden}
#vision .today-intro{max-width:57%;min-height:0;margin:40px 0 0;padding:44px 42px 48px;border-radius:32px;background:radial-gradient(ellipse at 90% 0%,#d9bca477,transparent 50%),linear-gradient(130deg,#987252,#51321f 80%);border:1px solid #ead2b788;box-shadow:0 28px 55px #4b332e30;color:#fff6e9}
#vision .today-intro h2{font-size:clamp(2.5rem,3.8vw,4.4rem);line-height:1.1}
#vision .today-intro p:last-child{font-size:17px;line-height:1.7;background:transparent;color:#efe3d3;margin-top:24px}
#vision .vision-columns{display:grid;grid-template-columns:1fr 1fr;gap:35px;position:relative;margin:85px 0 34px;background:transparent;align-items:start}
#vision .vision-columns>div{padding:36px 36px 40px;background:#fffdf8f5;border:1px solid #ffffffaa;border-radius:28px;box-shadow:0 20px 50px #61463018}
#vision .vision-columns>div+div{margin-top:65px;border-left:1px solid #e8d2b577;padding:36px 36px 40px;color:#fff6e9;background:radial-gradient(ellipse at 0% 100%,#d3b59988,transparent 52%),linear-gradient(135deg,#a37d5b,#543521 80%)}
#vision .vision-columns h3{font-size:clamp(2rem,2.8vw,3rem);margin-bottom:20px}
#vision .vision-columns p{font-size:16px;line-height:1.7}
#vision>.text-link{position:relative;margin-left:20px;font-size:14px;background:transparent}
@media(max-width:1000px){#story{padding:85px 6% 95px}#story>div:last-child{padding:34px 28px}#story .heritage-art{height:430px}#vision{padding:75px 6% 85px}#vision .today-intro{max-width:64%;padding:34px 30px}#vision .vision-columns{gap:22px}#vision .vision-columns>div,#vision .vision-columns>div+div{padding:30px 26px}}
@media(max-width:700px){#story{grid-template-columns:1fr;padding:60px 6% 75px;border-radius:0 40px 0 0;gap:0}#story .heritage-identity{padding:0 15px 0 0}#story .heritage-art{height:330px;border-radius:65px 24px 65px 24px}#story .group-logo{width:90px;margin-left:18px}#story .heritage-number{font-size:6rem;margin-top:-58px}#story>div:last-child{margin:35px 0 0 20px;padding:30px 25px;border-radius:26px 26px 55px 26px}#story h2{font-size:2.35rem}#story>div:last-child p{font-size:15px}#vision{padding:310px 6% 65px;min-height:0}#vision .vision-art{top:35px;right:5%;width:83%;height:355px;border-radius:28px 65px 28px 65px}#vision .today-intro{max-width:100%;margin:0 20px 0 0;padding:30px 25px;border-radius:26px}#vision .today-intro h2{font-size:2.45rem}#vision .today-intro p:last-child{font-size:15px}#vision .vision-columns{grid-template-columns:1fr;gap:24px;margin:30px 0}#vision .vision-columns>div{margin-right:20px}#vision .vision-columns>div+div{margin:0 0 0 20px;border-top:none}#vision .vision-columns p{font-size:15px}#vision>.text-link{margin-left:0}}

/* Gently tilted reading cards settle face-on when approached. */
#story>div:last-child,#vision .today-intro,#vision .vision-columns>div{transform-origin:center;transition:transform .55s cubic-bezier(.2,.75,.25,1),box-shadow .55s;backface-visibility:hidden}
#story>div:last-child{transform:perspective(1200px) rotateY(-9deg) rotateZ(2deg)}
#vision .today-intro{transform:perspective(1200px) rotateY(8deg) rotateZ(-2deg)}
#vision .vision-columns>div:first-child{transform:perspective(1100px) rotateY(-8deg) rotateZ(-2deg)}
#vision .vision-columns>div+div{transform:perspective(1100px) rotateY(9deg) rotateZ(2deg)}
@media(hover:hover) and (pointer:fine){
#story>div:last-child:hover,#vision .today-intro:hover,#vision .vision-columns>div:hover{transform:perspective(1200px) rotateY(0) rotateZ(0) translateZ(20px);box-shadow:0 35px 65px #38261840;z-index:4}
}
#story>div:last-child:focus-within,#vision .today-intro:focus-within,#vision .vision-columns>div:focus-within{transform:perspective(1200px) rotateY(0) rotateZ(0) translateZ(20px)}
/* Section 3 uses the cocoa artwork as a full background rather than a framed panel. */
#vision{background:#e8dccb}
#vision .vision-art{inset:-50px 0;width:100%;height:calc(100% + 100px);border-radius:0;box-shadow:none;background:#e8dccb url('assets/section-2-cocoa.png') 72% center/cover no-repeat}
#vision::before{inset:0;width:100%;height:100%;border-radius:0;transform:none;box-shadow:none;background:linear-gradient(90deg,#f7f0e47a,transparent 60%),linear-gradient(0deg,#f4ecdfdc,transparent 55%);z-index:-1}
#vision .vision-art{z-index:-2}
#vision .today-intro{background:radial-gradient(ellipse at 90% 0%,#d9bca466,transparent 50%),linear-gradient(130deg,#987252f5,#51321ff5 80%)}
@media(max-width:700px){#story>div:last-child,#vision .today-intro,#vision .vision-columns>div{transform:none}#vision{padding-top:245px}#vision .vision-art{inset:-30px 0;width:100%;height:calc(100% + 60px);background-position:70% top;background-size:auto 620px;background-repeat:no-repeat}#vision::before{background:linear-gradient(0deg,#eee2d1 35%,#eee2d133 80%,transparent)}}
@media(prefers-reduced-motion:reduce){#story>div:last-child,#vision .today-intro,#vision .vision-columns>div{transition:none;transform:none!important}}

/* A continuous tonal transition from the story into the purpose cards. */
#story{border-radius:0;background:linear-gradient(180deg,transparent 50%,#e8dccb 100%),radial-gradient(ellipse at 35% 15%,#c3a582 0%,transparent 48%),linear-gradient(130deg,#51321f,#967354 55%,#d9c9b4);padding-bottom:65px}
#story::before{border-bottom-color:transparent;box-shadow:inset 20px 4px 40px #ffe1b522;height:95%}
#story .heritage-number{color:#fff7e8}
#story .heritage-number span{color:#59412f;text-shadow:none}
#vision{padding-top:65px;background:#e8dccb}
#vision .vision-art{mask-image:linear-gradient(180deg,transparent 0%,black 24%,black 88%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,black 24%,black 88%,transparent 100%)}
#vision::before{background:linear-gradient(90deg,#e8dccb70,transparent 65%),linear-gradient(0deg,#e8dccb,transparent 55%)}
#vision .today-intro{margin-top:10px}
@media(max-width:700px){#story{padding-bottom:35px}#vision{padding-top:210px}#vision .vision-art{background-color:#e8dccb;mask-image:linear-gradient(180deg,transparent,black 14%,black 80%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,black 14%,black 80%,transparent)}#vision::before{background:linear-gradient(0deg,#e8dccb 35%,#e8dccb22 80%,transparent)}}

#story .group-logo{background:none;padding:0;box-shadow:none;mix-blend-mode:normal;filter:brightness(1.16) saturate(.88);opacity:.8;width:120px}
#story .story-group-watermark{position:absolute;right:3%;bottom:0;width:370px;height:370px;object-fit:contain;opacity:.11;pointer-events:none;z-index:0}
.header-group-logo{position:absolute;left:calc(5.5% + 96px);top:50%;width:72px;height:72px;transform:translateY(-50%);opacity:0;visibility:hidden;pointer-events:none}
.header-group-logo img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(1.16) saturate(.88)}
.header-group-logo.is-visible{opacity:.8;visibility:visible}
.hg-logo-travel{position:fixed;left:0;top:0;width:1px;height:1px;object-fit:contain;z-index:21;pointer-events:none;filter:brightness(1.16) saturate(.88);transform-origin:0 0}
@media(max-width:700px){#story .group-logo{width:100px}.header-group-logo{left:calc(6% + 72px);width:58px;height:58px}#story .story-group-watermark{width:260px;height:260px;right:0}}

/* One large heritage watermark provides the source for the header transition. */
#story .story-group-watermark{left:50%;top:50%;right:auto;bottom:auto;width:min(96vw,1050px);height:auto;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.28;filter:brightness(1.2) saturate(.8)}
@media(max-width:700px){#story .story-group-watermark{width:145vw;max-width:none;top:48%}}
/* Original storefront photograph set into a translucent glass panel. */
#story .heritage-art{position:relative;background:linear-gradient(135deg,#fff4dc30,#b9936b18);border:1px solid #fff6e880;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 30px #fff8e522,0 28px 60px #21130830;border-radius:42px 24px 60px 24px;height:560px}
#story .heritage-art img{object-fit:contain;object-position:center;scale:1;opacity:.78}
#story .heritage-art::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,#fff9ec30 0%,#fff9ec0a 30%,transparent 46%,#fff9ec26 48%,transparent 63%);box-shadow:inset 1px 1px 0 #fff9ee99,inset -1px -1px 0 #fff9ee33}
@media(max-width:700px){#story .heritage-art{height:450px;border-radius:32px 20px 45px 20px}}
/* Keep the traveling mark inside the story background stacking context. */
#story .hg-logo-travel{position:absolute;z-index:0;filter:brightness(1.2) saturate(.8)}
#story .heritage-identity{z-index:1}
/* Navigation begins at the hero's foot, then joins the fixed header. */
.site-header nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(var(--nav-offset,0px));display:flex;align-items:center;justify-content:center;gap:32px;width:max-content;max-width:94vw;padding:14px 24px;border-radius:40px;background:#f8f3e9d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-header::before{opacity:0}
.site-header.nav-is-docked::before{opacity:1}
.site-header.nav-is-docked nav{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.site-header nav a,.site-header nav a:hover{border:0;text-decoration:none;transition:color .2s ease}
.site-header nav a:hover,.site-header nav a:focus-visible{color:#98704e}
@media(max-width:1000px){.site-header nav{gap:20px;padding:12px 18px;font-size:14px}}
@media(max-width:700px){.site-header nav{gap:16px;padding:10px 14px;font-size:12px}.site-header.nav-is-docked nav{top:100%;transform:translate(-50%,0);background:#f8f3e9ed}.site-header.nav-is-docked{height:95px}html{scroll-padding-top:145px}}
@media(max-width:700px){.site-header nav,.site-header.nav-is-docked nav{top:calc(100% + 22px);transform:translate(-50%,-50%) translateY(var(--nav-offset,0px));background:#f8f3e9ed}}
/* The full-pane mirrored photograph shares the reading cards' 3D motion. */
#story .heritage-art img{object-fit:fill;transform:scaleX(-1)}
#story .heritage-art{transform:perspective(1200px) rotateY(9deg) rotateZ(-2deg);transform-origin:center;transition:transform .55s cubic-bezier(.2,.75,.25,1),box-shadow .55s;backface-visibility:hidden}
@media(hover:hover) and (pointer:fine){#story .heritage-art:hover{transform:perspective(1200px) rotateY(0) rotateZ(0) translateZ(20px);box-shadow:inset 0 0 30px #fff8e522,0 35px 65px #38261840}}
@media(max-width:700px){#story .heritage-art{transform:none}}
@media(prefers-reduced-motion:reduce){#story .heritage-art{transition:none;transform:none!important}}
/* Original photo orientation; retain the full-pane stretch and glass motion. */
#story .heritage-art img{transform:none}
/* Fill the hero continuously behind the logo and contact controls. */
@media(min-width:701px){#home .hero-art{inset:-48px 0;background-size:cover;background-position:center center;mask-image:none;-webkit-mask-image:none}}
/* Standalone heritage photo, retaining the separate HG watermark. */
#story .heritage-art{background:transparent;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:0 24px 50px #21130826}
#story .heritage-art::after{content:none}
#story .heritage-art img{opacity:1}
@media(hover:hover) and (pointer:fine){#story .heritage-art:hover{box-shadow:0 35px 65px #38261840}}
/* A lighter cream veil preserves more of the artwork beneath the header. */
.site-header::before{background:linear-gradient(90deg,transparent 10%,rgba(248,243,233,.25) 24%,rgba(248,243,233,.66) 34%,rgba(248,243,233,.66) 66%,rgba(248,243,233,.25) 76%,transparent 90%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.site-header nav{background:rgba(248,243,233,.66)}
.site-header.nav-is-docked nav{background:transparent}
@media(max-width:700px){.site-header nav,.site-header.nav-is-docked nav{background:rgba(248,243,233,.66)}}
/* Fine, high-contrast serif lettering inspired by the supplied type reference. */
.site-header nav a,.site-header>.button{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;letter-spacing:-.025em}
.site-header nav{gap:30px}
.site-header>.button{font-size:20px}
@media(max-width:1000px){.site-header nav{gap:20px}.site-header nav a{font-size:19px}}
@media(max-width:700px){.site-header nav{gap:16px}.site-header nav a{font-size:16px}.site-header>.button{font-size:18px}}
/* Classic Roman serif for headings; navigation and card titles retain Didot. */
:root{--heading-serif:Georgia,'Times New Roman',serif}
h1,h2,h3{font-family:var(--heading-serif);font-weight:400;letter-spacing:-.04em}
#products .showcase-heading h2{font-family:var(--heading-serif);font-weight:400;letter-spacing:-.045em}
footer>span:first-child{font-family:var(--heading-serif)}
/* Apply the reference-inspired classic serif to page copy, leaving brand artwork intact. */
body{font-family:var(--heading-serif)}
main p,main a,main button,main .eyebrow,.heritage-number span,footer{font-family:var(--heading-serif)}
#products .product-card-tag,#products .product-picker button,#product-count{font-family:var(--heading-serif)}
#products .product-card-name{font-family:var(--serif)}
.site-header nav a,.site-header>.button{font-family:var(--serif)}
/* Use the fine Didot display style for these two featured headings. */
#hero-title,#products .showcase-heading h2{font-family:var(--serif);font-weight:400;letter-spacing:-.04em}
/* Glass belongs to the photograph, not the surrounding section decoration. */
#story::before{content:none}
#story .heritage-art{background:linear-gradient(135deg,#fff4dc30,#b9936b18);border:1px solid #fff6e880;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 30px #fff8e522,0 28px 60px #21130830}
#story .heritage-art img{opacity:.8}
#story .heritage-art::after{content:''}
@media(hover:hover) and (pointer:fine){#story .heritage-art:hover{box-shadow:inset 0 0 30px #fff8e522,0 35px 65px #38261840}}
@font-face{font-family:'Old Money';src:url('assets/fonts/old-money.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sulphur Point';src:url('assets/fonts/sulphur-point-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sulphur Point';src:url('assets/fonts/sulphur-point-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
body,main p,main a,main button,main .eyebrow,.heritage-number span,footer,#products .product-card-tag,#products .product-picker button,#product-count{font-family:'Sulphur Point',Arial,sans-serif}
#products .product-card-name{font-family:var(--serif)}
#hero-title{font-family:'Old Money',var(--serif);font-weight:400;letter-spacing:-.025em}
/* Consistent Sulphur Point typography across every interactive control. */
button,.button,.text-link,.site-header nav a,.site-header>.button,#products .product-picker button,#products .product-card-name,.scroll-note,.skip-link{font-family:'Sulphur Point',Arial,sans-serif}
/* Restore the original display heading pair. */
#hero-title{font-family:var(--serif);font-weight:400;letter-spacing:-.045em}
#products .showcase-heading h2{font-family:var(--sans);font-weight:600;letter-spacing:-.055em}
.year-navigation button{font-family:'Sulphur Point',Arial,sans-serif}
.site-footer{display:block;padding:42px 7% 30px;background:#f8f3e9;border-top:1px solid #d9c9b3}
.footer-top{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;gap:24px}
.footer-company{display:flex;align-items:center;gap:16px}
.footer-company>img{width:76px;height:76px;object-fit:contain;mix-blend-mode:multiply}
.footer-company-name{font-family:var(--serif);font-size:24px;line-height:1.25}
.footer-company p{margin:8px 0 0;font-size:13px;color:var(--muted)}
.footer-hgc{display:block;width:120px;height:120px;justify-self:center}
.footer-hgc img{display:block;width:100%;height:100%;object-fit:contain}
.footer-back{justify-self:end;font-size:14px}
.footer-navigation{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 30px;border-top:1px solid #d9c9b3;margin-top:30px;padding-top:26px;font-size:15px}
.footer-navigation a,.footer-back{transition:color .2s}
.footer-navigation a:hover,.footer-back:hover{color:#98704e}
@media(max-width:700px){.site-footer{padding:32px 6%}.footer-top{grid-template-columns:1fr;text-align:center;gap:20px}.footer-company{justify-content:center}.footer-hgc{grid-row:1;width:100px;height:100px}.footer-back{justify-self:center}.footer-navigation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));text-align:center;gap:18px}.footer-company-name{font-size:22px}.footer-company>img{width:62px;height:62px}}

/* Brown shadows and white highlights on the original heritage photograph. */
#story .heritage-art{background:#fff}
#story .heritage-art img{filter:url(#heritage-duotone) contrast(1.08);opacity:.88}