/* Navy-led brand refresh, October 19, 2026. */
:root { --brand-navy: #1c3c5b; --brand-cream: #f8f6ee; }
.brand-invitation { background: var(--brand-navy); color: #fff; }
.brand-invitation a { color: #fff; }
[data-page="index"] .products { background: var(--brand-navy); }
[data-page="index"] .products .section-header h2,
[data-page="index"] .products .section-header h2 span { color: #fff !important; }
[data-page="index"] .products .section-header p,
[data-page="index"] .products .products-note { color: #e1e8ef; }
[data-page="index"] .products .label { color: #b6d9e0; }
[data-page="index"] .products .can-scroll-name { color: #fff; }
[data-page="index"] .products .can-scroll-flavor,
[data-page="index"] .products .can-scroll-state { color: #d5eaf1; }
[data-page="index"] .products .products-note a { color: #d5eaf1 !important; }
[data-page="why-soberly"] .page-hero { background: var(--brand-navy); }
.story-chapters { background: var(--brand-navy); padding-top: 1rem; }
.story-chapters > .container { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.story-chapters .manifesto-block { margin: 0; padding: clamp(1.5rem,3vw,2.5rem); border: 1px solid #ffffff29; border-radius: 16px; background: #ffffff06; }
.story-chapters .manifesto-block h2 { color: #fff; }
.story-chapters .manifesto-block p, .story-chapters .name-sign { color: #e1e8ef; }
[data-page="collection"] .collection-lineup-section,
[data-page="collection"] .collection-lineup-section + .page-section { background: var(--brand-navy); color: #e1e8ef; }
[data-page="collection"] .collection-lineup-section + .page-section .section-header h2 { color: #fff; }
[data-page="collection"] .collection-lineup-section + .page-section .section-header p { color: #e1e8ef; }
[data-page="collection"] .collection-lineup-section + .page-section .label { color: #b6d9e0; }
.collection-lineup img { border-radius: 12px; }
.collection-lineup a { display: block; cursor: zoom-in; }
.can-card { border-radius: 14px; overflow: hidden; }
[data-page="giving"] #giving-causes { background: var(--brand-navy); }
[data-page="giving"] #giving-causes .section-header h2 { color: #fff; }
[data-page="giving"] #giving-causes .section-header p { color: #e1e8ef; }
[data-page="giving"] #giving-causes .label { color: #b6d9e0; }
[data-page="giving"] .cause-card { background: #ffffff0a; border: 1px solid #ffffff29; }
[data-page="giving"] .cause-card h3 { color: #fff; }
[data-page="giving"] .cause-card p { color: #e1e8ef; }
.alum-intro, .alum-label { color: #dbe6ed; opacity: 1; }
.packaging-mission { background: var(--brand-navy); color: #e1e8ef; text-align: center; padding: 3rem 0; }
.packaging-mission h2 { color: #fff; }
.packaging-mission a { color: #d5eaf1; text-decoration: underline; }
.can-image-trigger { display: block; width: 100%; padding: 0; border: 0; background: #fff; cursor: zoom-in; }
.can-image-trigger:focus-visible, [data-can-lightbox]:focus-visible { outline: 3px solid #f5ba56; outline-offset: 4px; }
body.can-view-open { position: fixed; width: 100%; overflow: hidden; }
.can-lightbox { position: fixed; inset: 0; margin: auto; border: 0; padding: 0; border-radius: 18px; background: var(--brand-cream); color: #103057; width: min(1100px,96vw); max-width: 96vw; max-height: 94dvh; overflow: auto; box-shadow: 0 20px 90px #0006; }
.can-lightbox::backdrop { background: #071b30d9; backdrop-filter: blur(5px); }
.can-lightbox[open] { animation: can-pop-in .24s ease-out; }
.can-lightbox-panel header { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: var(--brand-navy); color: #fff; position: sticky; top: 0; z-index: 1; }
.can-lightbox-panel h2 { color: #fff; margin: 0; font-size: clamp(1.1rem,3vw,1.6rem); }
.can-lightbox-close { flex: none; min-height: 44px; padding: .4rem .8rem; border: 1px solid #ffffff99; border-radius: 30px; background: transparent; color: #fff; cursor: pointer; font: inherit; }
.can-lightbox-close span { font-size: 1.5rem; vertical-align: middle; }
.can-lightbox-hint { font-size: .85rem; padding: .65rem 1rem; margin: 0; text-align: center; }
.can-lightbox-stage { padding: 0 12px 12px; text-align: center; }
.can-lightbox-stage img { display: block; max-width: 100%; width: auto; height: auto; max-height: calc(94dvh - 135px); margin: auto; object-fit: contain; cursor: zoom-out; }
@keyframes can-pop-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@media(max-width:700px) { .story-chapters > .container { grid-template-columns: 1fr; } .can-lightbox-panel header { padding: .75rem; } }
@media(prefers-reduced-motion:reduce) { .can-lightbox[open] { animation: none; } }

/* October 20: purpose, everyday moments and a comfortable mobile collection. */
.giving-spotlight { background: #102c47; color: #f8f6ee; padding: clamp(2rem,5vw,4rem) 0; }
.giving-spotlight-inner { display:grid; grid-template-columns: minmax(120px,.65fr) 2fr; align-items:center; gap:clamp(1.5rem,5vw,4rem); }
.giving-number { color:#e8c68e; font-family:var(--font-display); font-size:clamp(5rem,14vw,11rem); line-height:1; text-align:center; }
.giving-number span { font-size:.53em; }
.giving-spotlight .label { color:#b6d9e0; }
.giving-spotlight h2 { color:#fff; font-family:var(--font-display); font-size:clamp(1.8rem,3.7vw,3rem); line-height:1.1; margin:.8rem 0 1rem; }
.giving-spotlight p { color:#dfe9ef; max-width:700px; font-size:1.05rem; line-height:1.65; }
.giving-spotlight strong { color:#fff; }
.text-link { display:inline-block; color:inherit; text-underline-offset:5px; font-size:.95rem; font-weight:600; line-height:1.5; }
.giving-spotlight .text-link { color:#e8c68e; margin-top:1.1rem; }
.occasions-refresh { background:#f8f6ee; padding:clamp(2.5rem,6vw,5rem) 0; }
.occasions-refresh h2 { color:#103057; font-size:clamp(2.3rem,5vw,4rem); line-height:1.04; margin:1rem 0; }
.occasions-refresh h2 em { color:#337f91; font-weight:400; }
.occasions-refresh .occasions-note { color:#52616e; font-size:1.05rem; max-width:620px; line-height:1.65; }
.occasion-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.2rem; text-align:left; margin-top:2rem; }
.occasion-grid > div { border-top:1px solid #bdcbd0; padding:1.2rem 0; }
.occasion-index { font-size:.8rem; color:#337f91; letter-spacing:.12em; }
.occasion-grid h3 { font-family:var(--font-display); font-weight:400; font-size:1.65rem; margin:.5rem 0; color:#103057; }
.occasion-grid p { color:#52616e; font-size:.95rem; line-height:1.55; }
.certs-redesign { padding-bottom:3rem; }
.certs-redesign .why-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.certs-redesign .why-card { position:relative; overflow:hidden; padding:1.5rem; border:0; border-radius:12px; background:#255a78; color:#fff; }
.certs-redesign .why-card:nth-child(2) { background:#246c68; }
.certs-redesign .why-card:nth-child(3) { background:#9a4a32; }
.certs-redesign .why-card:nth-child(4) { background:#103057; color:#fff; }
.certs-redesign .why-num { font-size:3.2rem; line-height:1; display:block; margin-bottom:1rem; color:#f2d6a6; }
.certs-redesign .why-card h3 { font-size:1.2rem; line-height:1.25; color:#fff; }
.certs-redesign .why-card p { font-size:.95rem; color:#f2f6f8; line-height:1.55; }
.certs-redesign .why-card:nth-child(4) .why-num { color:#e8c68e; }
.certs-redesign .why-card:nth-child(4) h3 { color:#fff; }
.certs-redesign .why-card:nth-child(4) p { color:#dfe9ef; }
.certs-redesign .why-card .text-link { margin-top:1rem; color:#e8c68e; }
.inside-refresh { background:#1c3c5b; color:#e1e8ef; padding:clamp(2.5rem,6vw,5rem) 0; }
.inside-refresh .label { color:#b6d9e0; }
.inside-refresh h2 { color:#fff; font-size:clamp(2rem,4vw,3.3rem); line-height:1.08; }
.inside-refresh .compare-intro p { color:#dfe9ef; margin-top:1rem; }
.inside-layout { display:grid; grid-template-columns:minmax(150px,.7fr) 2fr; gap:clamp(2rem,5vw,5rem); align-items:center; max-width:1050px; margin:auto; }
.inside-can { margin:0; text-align:center; }
.inside-can img { display:block; width:auto; max-width:100%; height:350px; object-fit:contain; margin:0 auto; border-radius:10px; }
.inside-can figcaption { color:#d2e4eb; font-size:.9rem; line-height:1.5; margin-top:1rem; }
.inside-refresh .inside-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; background:transparent; border:0; border-radius:0; overflow:visible; max-width:none; }
.inside-refresh .inside-row { display:block; border:0; border-top:1px solid #ffffff38; padding:1.3rem 0 0; }
.inside-refresh dt { color:#b6d9e0; display:flex; align-items:center; gap:.65rem; font-size:.78rem; letter-spacing:.12em; margin-bottom:.8rem; }
.detail-icon { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:none; border:1px solid #b6d9e088; border-radius:50%; font-size:1rem; letter-spacing:0; font-weight:400; }
.inside-refresh dd { color:#fff; font-size:1rem; line-height:1.65; }
.founders-visual { background:#102c47; }
.founders-intro { padding:2rem 1.5rem 1rem; }
.founders-intro .label { color:#b6d9e0; }
.founders-intro h3 { color:#fff; font:400 clamp(2rem,4vw,3rem)/1.1 var(--font-display); margin:1rem 0; }
.founders-intro p { color:#dfe9ef; font-size:1rem; line-height:1.6; }
.founders-names { background:transparent; padding:1.5rem; }
.founders-location { color:#b6d9e0; line-height:1.5; }
.footer-grid { grid-template-columns:2fr 1fr; }
.footer-wordmark { color:#fff; font-size:1.4rem; font-weight:700; letter-spacing:.16em; text-decoration:none; display:inline-block; margin-bottom:1rem; }
.footer-brand .footer-social { margin-top:1.4rem; gap:1.2rem; }
.footer-brand .footer-social a { color:#d5eaf1; flex-direction:row; min-height:44px; gap:.5rem; }
.footer-brand .social-label { font-size:.8rem; text-transform:none; letter-spacing:0; }
.footer-brand .footer-social svg { margin:0; }
.contact-section .contact-sub { margin-bottom:1rem; }
.contact-section .retailer-invitation { color:#e1e8ef; margin:1rem 0; padding:.85rem 1rem; border-left:2px solid #e8c68e; background:#ffffff06; font-size:1rem; line-height:1.55; }
.contact-section .retailer-invitation strong { color:#fff; }
.contact-section .retailer-invitation a { color:#e8c68e; text-underline-offset:4px; }
.contact-section .contact-email { margin-top:0; margin-bottom:1rem; max-width:100%; overflow-wrap:anywhere; }

/* Override the old full-width portrait rule; never crop or stretch a can. */
.can-card .can-card-image { padding:1.25rem .75rem 0; }
.can-card .can-card-image img { width:auto; height:360px; max-width:100%; max-height:55svh; object-fit:contain; margin:0 auto; }
.can-card .can-image-trigger { width:100%; background:transparent; }
.can-card .can-proof-link { padding:.85rem .4rem 1rem; }
.can-card .can-card-info { padding:1.25rem; }
.can-card .can-card-name { font-size:1.8rem; }
@media(max-width:900px) {
 .certs-redesign .why-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .occasion-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .giving-spotlight-inner { grid-template-columns:1fr; gap:1rem; }
 .giving-number { text-align:left; font-size:5rem; }
 .giving-spotlight p { font-size:1rem; }
 .giving-spotlight h2 { margin-top:.6rem; }
 .certs-redesign .why-grid { gap:.75rem; }
 .certs-redesign .why-card { padding:1.25rem 1rem; }
 .certs-redesign .why-num { font-size:2.6rem; }
 .certs-redesign .why-card h3 { font-size:1.12rem; }
 .certs-redesign .why-card p { font-size:.95rem; }
 .inside-layout { grid-template-columns:1fr; gap:1.5rem; }
 .inside-can { display:flex; align-items:center; justify-content:center; gap:1.5rem; }
 .inside-can img { height:220px; margin:0; }
 .inside-can figcaption { text-align:left; margin:0; }
 .inside-refresh .inside-list { gap:1.25rem; }
 .inside-refresh dd { font-size:1rem; }
 .can-card .can-card-image img { height:340px; max-height:48svh; }
 .footer-grid { grid-template-columns:1fr; }
 .contact-section .contact-inner { gap:1.5rem; }
}
@media(max-width:360px) {
 .inside-refresh .inside-list { grid-template-columns:1fr; }
 .certs-redesign .why-grid { grid-template-columns:1fr; }
}


/* Keep the homepage can labels readable on the navy product section. */
[data-page="index"] .products .can-scroll-track { background: transparent; }
[data-page="collection"] .can-card .can-card-state { color: #226375; }
[data-page="collection"] .can-card .can-card-format { color: #52616e; opacity: 1; }