/* Our story page (2026 design). Loaded after hvb-2026-base. */
html{scroll-padding-top:0}
#timeline,#founder,#process{scroll-margin-top:72px}

/* hero: the rule, the statue and four numbers */
.sy-hero{position:relative;overflow:hidden;background:radial-gradient(ellipse at 74% 30%,#21493a 0%,#143528 40%,#0b2119 78%);color:var(--cream)}
.sy-hero .grain{opacity:.08}
.sy-leaf{position:absolute;left:-90px;bottom:-170px;width:420px;height:735px;opacity:.05;transform:rotate(-24deg);pointer-events:none}
.sy-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(40px,5vw,84px);align-items:center;padding-top:30px;padding-bottom:clamp(52px,5vw,76px)}
.sy-copy{display:flex;flex-direction:column;gap:26px;min-width:0}
.sy-copy .crumbs{margin-bottom:6px}
.sy-hero h1{font:600 clamp(38px,4vw,58px)/1.07 var(--serif);letter-spacing:.01em}
.sy-hero h1 span{display:block;text-wrap:balance}
.sy-hero h1 .g{color:var(--gold)}
.sy-lede{max-width:34em;font-size:clamp(16.5px,1.2vw,18.5px);line-height:1.7;color:var(--cream-80);text-wrap:pretty}
.sy-badges{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 24px}
.sy-badges li{display:flex;align-items:center;gap:9px;font:600 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,249,230,.82)}
.sy-badges .i{color:var(--gold)}
.sy-art{position:relative;justify-self:center;width:min(100%,470px)}
.sy-arch{position:relative;aspect-ratio:.8;border-radius:999px 999px 6px 6px;overflow:hidden;background:#0d251b;border:1px solid rgba(212,175,55,.5);box-shadow:0 60px 120px -60px rgba(0,0,0,.9)}
.sy-arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
.sy-arch::after{content:"";position:absolute;inset:12px;border-radius:999px 999px 4px 4px;border:1px solid rgba(232,200,115,.4);pointer-events:none}
.sy-arch::before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;background:linear-gradient(rgba(8,26,19,0),rgba(8,26,19,.78));pointer-events:none}
.sy-cap{position:absolute;left:0;right:0;bottom:30px;z-index:2;text-align:center;font:600 10px/1.5 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft)}
.sy-art-stats{list-style:none;margin:22px 0 0;padding:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid rgba(212,175,55,.3)}
.sy-art-stats li{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0 14px;text-align:center}
.sy-art-stats li+li{border-left:1px solid rgba(212,175,55,.24)}
.sy-art-stats b{font:600 26px/1 var(--serif);color:var(--cream);font-variant-numeric:tabular-nums}
.sy-art-stats span{font:600 9.5px/1.45 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-soft);text-wrap:balance}
.sy-stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(212,175,55,.24)}
.sy-stats div{padding:26px 24px 30px;border-left:1px solid rgba(212,175,55,.16)}
.sy-stats div:first-child{padding-left:0;border-left:0}
.sy-stats b{display:block;font:600 clamp(30px,2.6vw,40px)/1 var(--serif);color:var(--cream);font-variant-numeric:tabular-nums}
.sy-stats span{display:block;margin-top:10px;font:600 10px/1.45 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,249,230,.66)}

/* the rule and the timeline */
.sy-origin{background:var(--cream);color:var(--forest)}
.rule{position:relative;max-width:1000px;margin:0 auto;padding-top:clamp(72px,8vw,112px);text-align:center}
.rule .q{display:block;height:58px;font:600 110px/1 var(--serif);color:var(--gold-dark);opacity:.5}
.rule blockquote{margin:0;font:600 clamp(26px,3vw,44px)/1.22 var(--serif);text-wrap:balance}
.rule blockquote .g{color:var(--gold-dark)}
.rule figcaption{margin-top:24px;display:flex;justify-content:center;align-items:center;gap:12px;font:600 11px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--forest-mid)}
.rule figcaption::before,.rule figcaption::after{content:"";width:28px;height:1px;background:var(--gold-dark)}
.tl-wrap{padding-top:clamp(72px,8vw,112px);padding-bottom:clamp(80px,9vw,128px)}
.tl{position:relative;list-style:none;margin:56px auto 0;padding:0;max-width:1080px}
.tl::before{content:"";position:absolute;left:50%;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gold-dark),rgba(184,150,12,.5) 70%,rgba(184,150,12,.08));transform:translateX(-50%)}
.tl>li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr);align-items:start}
.tl>li+li{margin-top:clamp(28px,3vw,40px)}
.tl-dot{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:46px;height:46px;margin-top:6px;display:grid;place-items:center;border-radius:50%;background:var(--cream);border:1px solid var(--gold-dark);color:var(--gold-dark)}
.tl-dot .i{width:19px;height:19px}
.tl>li:last-child .tl-dot{background:var(--forest);border-color:var(--forest);color:var(--gold-soft)}
.tl-yr{grid-row:1;align-self:center;font:600 clamp(44px,5vw,72px)/1 var(--serif);color:rgba(26,58,46,.16);font-variant-numeric:tabular-nums}
.tl-card{grid-row:1;padding:24px 26px 26px;background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 30px 60px -50px rgba(15,42,31,.55)}
.tl-card small{display:block;font:700 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dark)}
.tl-card h3{margin-top:10px;font:600 22px/1.2 var(--serif)}
.tl-card p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--ink-80);text-wrap:pretty}
.tl>li:nth-child(odd) .tl-card{grid-column:3}
.tl>li:nth-child(odd) .tl-yr{grid-column:1;justify-self:end;padding-right:6px}
.tl>li:nth-child(even) .tl-card{grid-column:1}
.tl>li:nth-child(even) .tl-yr{grid-column:3;justify-self:start;padding-left:6px}

/* how a batch earns its pouch */
.sy-process{position:relative;overflow:hidden;background:var(--forest-deep);color:var(--cream)}
.sy-process .grain{opacity:.07}
.sy-process>.wrap{position:relative}
.pr-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 56px}
.pr-head .h2{margin-top:16px}
.pr-head .lede{max-width:28em}
.pr-steps{position:relative;list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.pr-steps::before{content:"";position:absolute;left:28px;right:28px;top:28px;height:1px;background:linear-gradient(90deg,rgba(212,175,55,.65),rgba(212,175,55,.2))}
.pr-steps li{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.pr-ic{position:relative;width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:#123326;border:1px solid rgba(212,175,55,.55);color:var(--gold)}
.pr-ic .i{width:23px;height:23px;stroke-width:1.5}
.pr-steps small{margin-top:6px;font:700 10px/1 var(--sans);letter-spacing:.26em;color:var(--gold)}
.pr-steps h3{font:600 20px/1.2 var(--serif)}
.pr-steps p{font-size:15px;line-height:1.65;color:rgba(255,249,230,.74);text-wrap:pretty}
.pr-foot{margin-top:44px;padding-top:28px;border-top:1px solid rgba(212,175,55,.18);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.pr-foot p{display:flex;align-items:center;gap:12px;font-size:15.5px;line-height:1.55;color:var(--cream-80)}
.pr-foot p .i{color:var(--gold)}

/* four pillars */
.sy-pillars{background:var(--cream);color:var(--forest)}
.pl-grid{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pl{display:flex;flex-direction:column;gap:14px;padding:30px 28px 32px;background:var(--paper)}
.pl span{font:600 34px/1 var(--serif);color:var(--gold-dark)}
.pl h3{font:600 21px/1.2 var(--serif)}
.pl p{font-size:15.5px;line-height:1.65;color:var(--ink-80);text-wrap:pretty}

/* the name */
.sy-name{position:relative;overflow:hidden;background:radial-gradient(ellipse at 22% 50%,#1f4636 0%,#123326 45%,#0b2119 85%);color:var(--cream)}
.sy-name .grain{opacity:.08}
.nm-grid{position:relative;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(48px,6vw,96px);align-items:center}
.emblem{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:1}
.emblem .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 60s linear infinite}
.emblem img{position:absolute;left:50%;top:50%;width:48%;transform:translate(-50%,-50%);filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))}
.nm-copy{display:flex;flex-direction:column;gap:18px}
.nm-copy .h2{margin-top:-2px}
.nm-copy>p{max-width:36em;font-size:17px;line-height:1.75;color:var(--cream-80);text-wrap:pretty}
.motto{margin-top:8px;padding:20px 22px;border:1px solid rgba(212,175,55,.4);border-radius:4px;background:rgba(212,175,55,.08)}
.motto small{display:block;font:700 10px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.motto b{display:block;margin-top:10px;font:600 clamp(19px,1.7vw,24px)/1.3 var(--serif);color:var(--cream)}

/* the founder */
.sy-founder{background:var(--cream);color:var(--forest)}
.fd-head{max-width:760px}
.fd-head .h2{margin-top:16px}
.fd-head .lede{margin-top:18px}
.fd-grid{margin-top:48px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:32px;align-items:start}
.letter{position:relative;padding:40px 44px 38px;background:var(--paper);border:1px solid var(--line);border-radius:4px;box-shadow:0 40px 80px -60px rgba(15,42,31,.55)}
.letter::before{content:"";position:absolute;inset:10px;border:1px solid rgba(184,150,12,.22);border-radius:2px;pointer-events:none}
.letter small{font:700 10px/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dark)}
.letter h3{margin-top:14px;font:600 clamp(24px,2.2vw,30px)/1.2 var(--serif)}
.letter p{margin-top:16px;font-size:16.5px;line-height:1.75;color:var(--ink-80);text-wrap:pretty}
.sign{margin-top:26px;display:flex;align-items:center;gap:18px}
.sign img{width:64px;height:auto;flex-shrink:0}
.sign .sign-av{height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--paper);box-shadow:0 0 0 1px rgba(184,150,12,.6)}
.sign b{display:block;font:600 italic 30px/1 var(--serif);color:var(--forest)}
.sign span{display:block;margin-top:8px;font:600 10px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--forest-mid)}
.letter .ctas{margin-top:28px}
.roles{display:flex;flex-direction:column;gap:12px}
.role{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:24px 24px 24px 22px;background:var(--paper);border:1px solid var(--line);border-radius:4px}
.role>span{font:600 30px/1 var(--serif);color:var(--gold-dark)}
.role h3{font:600 19px/1.25 var(--serif)}
.role em{display:block;margin-top:6px;font:600 10px/1.4 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--forest-mid)}
.role p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--ink-80)}
.creds{margin-top:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:40px;border-top:1px solid var(--line)}
.cred{display:flex;flex-direction:column;gap:10px}
.cred .badge-c{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(184,150,12,.6);color:var(--gold-dark)}
.cred .badge-c .i{width:22px;height:22px;stroke-width:1.5}
.cred h3{margin-top:4px;font:600 18px/1.25 var(--serif)}
.cred p{font-size:14.5px;line-height:1.6;color:var(--ink-80)}
.cred a{color:var(--forest);font-weight:600;text-underline-offset:3px}

/* closing */
.sy-final{position:relative;overflow:hidden;background:var(--forest);color:var(--cream)}
.sy-final>.wrap{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 56px;padding-top:72px;padding-bottom:76px}
.sy-final h2{font:600 clamp(30px,2.9vw,40px)/1.1 var(--serif)}
.sy-final h2 span{display:block}
.sy-final h2 .g{color:var(--gold)}
.sy-final p{margin-top:14px;font:600 10.5px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,249,230,.7)}

@media (max-width:1180px){
.pr-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}
.pr-steps::before{display:none}
.pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.creds{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}
@media (max-width:960px){
.sy-grid{grid-template-columns:minmax(0,1fr);gap:48px}
.sy-art{width:min(100%,420px)}
.sy-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.sy-stats div:nth-child(3){padding-left:0;border-left:0}
.sy-stats div:nth-child(n+3){border-top:1px solid rgba(212,175,55,.16)}
.nm-grid{grid-template-columns:minmax(0,1fr);gap:40px}
.emblem{width:min(100%,320px)}
.fd-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
.tl::before{left:23px;transform:none}
.tl>li{grid-template-columns:46px minmax(0,1fr);column-gap:18px}
.tl-dot{grid-column:1;margin-top:0}
.tl>li:nth-child(n) .tl-yr{grid-column:2;grid-row:1;justify-self:start;padding:0;align-self:center;font-size:34px;color:rgba(26,58,46,.22)}
.tl>li:nth-child(n) .tl-card{grid-column:2;grid-row:2;margin-top:12px}
.pr-steps{grid-template-columns:minmax(0,1fr);row-gap:28px}
.pr-steps li{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:18px;row-gap:6px}
.pr-steps .pr-ic{grid-row:1/span 3}
.pr-steps small{margin-top:4px}
}
@media (max-width:640px){
.sy-grid{padding-top:22px;gap:40px}
.sy-copy{gap:20px}
.sy-hero h1{font-size:clamp(32px,9.4vw,42px)}
.sy-copy .ctas{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.sy-badges{flex-direction:column;gap:12px}
.sy-stats div{padding:20px 14px 22px 16px}
.sy-stats div:nth-child(odd){padding-left:0}
.rule .q{height:44px;font-size:84px}
.tl-card{padding:20px 18px 22px}
.tl-card h3{font-size:20px}
.pl-grid{grid-template-columns:minmax(0,1fr)}
.pl{padding:24px 20px 26px}
.letter{padding:30px 22px 28px}
.letter .ctas{display:grid;grid-template-columns:minmax(0,1fr)}
.role{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:20px 18px}
.role>span{font-size:24px}
.creds{grid-template-columns:minmax(0,1fr);gap:22px}
.cred{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:6px}
.cred .badge-c{grid-row:1/span 2;width:44px;height:44px}
.cred .badge-c .i{width:19px;height:19px}
.cred h3{margin-top:0}
.sy-final>.wrap{padding-top:56px;padding-bottom:60px}
.sy-final .ctas{display:grid;grid-template-columns:minmax(0,1fr);width:100%}
}

.sy-origin .center-head,.sy-pillars .center-head{margin-bottom:0}
@media (max-width:640px){.sy-art-stats{margin-top:18px;padding-top:16px}.sy-art-stats li{padding:0 8px}.sy-art-stats b{font-size:22px}.sy-art-stats span{font-size:8.5px;letter-spacing:.14em}}