@import "tailwindcss";

:root { --ink:#090b0a; --ivory:#f1ede2; --gold:#b89755; --muted:#a8a69f; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--ink); color:var(--ivory); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }

.hero { min-height:100vh; position:relative; overflow:hidden; padding:0 6vw; background:radial-gradient(circle at 72% 46%,#28312b 0,#111512 34%,#090b0a 68%); }
.hero:after { content:""; position:absolute; inset:0; opacity:.12; pointer-events:none; background-image:repeating-linear-gradient(100deg,transparent 0 4px,#fff 5px,transparent 6px); mix-blend-mode:soft-light; }
.topbar { height:108px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:5; border-bottom:1px solid #ffffff1c; }
.brand { display:flex; align-items:center; gap:13px; font-size:12px; letter-spacing:.34em; font-weight:600; }
.brand-mark { display:block; width:14px; height:21px; position:relative; overflow:hidden; flex:none; }
.brand-mark img { position:absolute; width:44px; height:44px; max-width:none; left:-16px; top:-13px; }
nav { display:flex; gap:40px; font-size:11px; letter-spacing:.17em; text-transform:uppercase; }
nav a { color:#b9bab5; transition:.25s; }
nav a:hover, nav .active { color:var(--ivory); }
.language-switch { display:flex; gap:9px; margin-left:12px; padding-left:22px; border-left:1px solid #ffffff28; color:#73766f; }
.language-switch b { color:var(--gold); font-weight:400; }
.menu-toggle { display:none; align-items:center; gap:10px; height:42px; padding:8px 0 8px 10px; border:0; background:transparent; color:var(--ivory); cursor:pointer; }
.menu-label { font-size:9px; letter-spacing:.18em; text-transform:uppercase; }
.menu-lines { display:block; width:23px; }
.menu-lines i { display:block; width:100%; height:1px; margin:5px 0; background:currentColor; transition:transform .25s,opacity .25s; }

.hero-copy { position:absolute; z-index:3; left:6vw; top:50%; transform:translateY(-46%); }
.hero-photo { position:absolute; z-index:1; inset:0; }
.hero-photo:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.28) 0%,transparent 48%); }
.hero-photo img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.eyebrow { color:var(--gold); text-transform:uppercase; letter-spacing:.28em; font-size:10px; margin:0 0 24px; }
h1 { font:400 clamp(64px,8vw,126px)/.86 Georgia,serif; letter-spacing:-.055em; margin:0 0 44px; }
.cta { display:inline-flex; align-items:center; gap:28px; border-bottom:1px solid var(--gold); padding:0 0 12px; text-transform:uppercase; letter-spacing:.2em; font-size:10px; }
.cta span { color:var(--gold); font-size:16px; }

.bottles { position:absolute; z-index:2; right:11vw; bottom:-2vh; height:82vh; width:42vw; display:flex; align-items:flex-end; justify-content:center; gap:3.5vw; filter:drop-shadow(25px 35px 30px #000a); }
.bottle { width:clamp(120px,12vw,200px); height:90%; position:relative; display:flex; flex-direction:column; align-items:center; }
.bottle.ginger { height:82%; transform:translateY(3%); }
.cap { width:38%; height:7%; background:linear-gradient(90deg,#121512,#4c4b41 45%,#171916); border-radius:3px 3px 1px 1px; box-shadow:inset 0 0 0 1px #ffffff12; }
.neck { height:17%; width:32%; background:linear-gradient(90deg,#171c18,#354039 47%,#131713); display:grid; place-items:center; border-left:1px solid #ffffff13; }
.shoulder { width:77%; height:9%; background:linear-gradient(150deg,transparent 0 21%,#29352d 23%,#151a16 68%,transparent 70%); }
.bottle-body { width:77%; flex:1; border-radius:8% 8% 4% 4%; display:grid; place-items:center; box-shadow:inset 18px 0 20px #ffffff0b,inset -22px 0 24px #0008,0 15px 22px #0008; }
.honey .bottle-body { background:linear-gradient(90deg,#281a0c,#896424 35%,#be8731 50%,#56350f 78%,#170f08); }
.ginger .bottle-body { background:linear-gradient(90deg,#101711,#405537 35%,#6a7d49 50%,#293722 78%,#0b0f0b); }
.label { width:77%; height:42%; padding:12% 10%; background:linear-gradient(120deg,#e9e1cb,#faf4e7 50%,#d4c9ad); color:#14150f; display:flex; flex-direction:column; align-items:center; border:1px solid #ad8c4f; box-shadow:0 2px 14px #0004; }
.label-brand { margin-top:12%; font-size:6px; letter-spacing:.22em; color:#8b6a2f; }
.label-name { margin-top:12%; font:700 clamp(11px,1.2vw,17px) Georgia,serif; letter-spacing:.22em; }
.label-type { margin-top:9%; font-size:6px; text-transform:uppercase; letter-spacing:.2em; color:#6c675a; }
.scroll-cue { position:absolute; z-index:3; bottom:34px; left:6vw; color:#787c76; text-transform:uppercase; letter-spacing:.22em; font-size:8px; display:flex; align-items:center; gap:12px; }
.scroll-cue span { width:42px; height:1px; background:#b8975570; }

.about { min-height:76vh; padding:10vw 8vw; background:#efe9dc; color:#141713; display:grid; grid-template-columns:1fr 4fr 1fr; gap:5vw; align-items:start; }
.about-kicker { font-size:9px; text-transform:uppercase; letter-spacing:.2em; color:#666a62; writing-mode:vertical-rl; transform:rotate(180deg); }
.about-kicker span { color:#a47d37; margin-bottom:15px; }
.about-content { max-width:880px; }
.about h2 { font:400 clamp(48px,6vw,88px)/1.02 Georgia,serif; letter-spacing:-.045em; margin:0 0 64px; }
.about h2 em { color:#9b7433; font-weight:400; }
.about p { max-width:690px; margin:0 0 0 25%; font:400 clamp(17px,1.5vw,23px)/1.7 Georgia,serif; color:#494c45; }

@media (max-width:800px) {
  .hero { min-height:900px; padding:0 24px; }
  .topbar { height:86px; }
  nav { display:none; }
  .menu-toggle { display:flex; position:relative; z-index:22; }
  .menu-toggle.is-open .menu-lines i:first-child { transform:translateY(6px) rotate(45deg); }
  .menu-toggle.is-open .menu-lines i:nth-child(2) { opacity:0; }
  .menu-toggle.is-open .menu-lines i:last-child { transform:translateY(-6px) rotate(-45deg); }
  .topbar .brand { position:relative; z-index:22; }
  .topbar nav.mobile-open { display:flex; position:fixed; z-index:20; inset:0; flex-direction:column; align-items:center; justify-content:center; gap:30px; background:rgba(7,9,8,.98); font-size:14px; }
  .topbar nav.mobile-open .language-switch { margin:10px 0 0; padding:24px 0 0; border-left:0; border-top:1px solid #ffffff28; }
  body.menu-open { overflow:hidden; }
  .hero-copy { left:24px; top:23%; transform:none; }
  .hero-photo { top:38%; }
  .hero-photo:after { background:linear-gradient(180deg,#090b0a 0%,transparent 28%); }
  .hero-photo img { object-position:82% center; }
  h1 { font-size:66px; }
  .bottles { right:0; bottom:-10px; height:52%; width:100%; gap:26px; }
  .bottle { width:132px; }
  .scroll-cue { left:24px; bottom:20px; }
  .about { grid-template-columns:1fr; padding:110px 28px; }
  .about-kicker { writing-mode:horizontal-tb; transform:none; }
  .about h2 { margin-bottom:42px; }
  .about p { margin-left:0; }
  .seal { margin-top:35px; }
}

body.gate-open { overflow:hidden; }
.age-gate { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 35%,#293128 0,#111512 38%,#070908 100%); transition:opacity .35s; }
.age-gate.closing { opacity:0; }
.age-gate-card { width:min(760px,100%); text-align:center; }
.age-logo { width:48px; height:68px; margin:0 auto 34px; overflow:hidden; position:relative; }
.age-logo img { position:absolute; width:150px; height:150px; max-width:none; left:-54px; top:-44px; }
.age-gate h1 { margin:0 0 28px; font:400 clamp(43px,6vw,78px)/1 Georgia,serif; }
.age-gate h1 em { color:var(--gold); font-weight:400; }
.age-gate-card > p:not(.eyebrow) { max-width:480px; margin:0 auto; color:#9da099; font:15px/1.65 Georgia,serif; }
.age-actions { margin:42px 0 30px; display:flex; justify-content:center; gap:14px; }
.age-actions button { min-width:150px; padding:15px 24px; border:1px solid var(--gold); background:var(--gold); color:#0d100e; cursor:pointer; font-size:9px; letter-spacing:.18em; text-transform:uppercase; }
.age-actions button:last-child { background:transparent; color:#c8c7bf; border-color:#ffffff30; }
.age-gate small { color:#5f635d; font-size:8px; letter-spacing:.18em; text-transform:uppercase; }
@media (max-width:520px) { .age-actions { flex-direction:column; }.age-actions button { width:100%; } }

.site-footer { min-height:110px; padding:0 6vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:4vw; border-top:1px solid #ffffff1b; background:#090b0a; color:#747871; font-size:8px; letter-spacing:.16em; text-transform:uppercase; }
.site-footer div { display:flex; gap:28px; }
.site-footer a:hover { color:var(--ivory); }
.footer-social { justify-self:end; display:flex; gap:20px; }
.legal-page { min-height:100vh; padding:8vw; background:#efe9dc; color:#151813; }
.legal-back { display:inline-block; margin-bottom:14vh; color:#7d796f; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.legal-page h1 { max-width:900px; margin:0 0 80px; font:400 clamp(58px,8vw,120px)/.95 Georgia,serif; }
.legal-copy { max-width:670px; margin-left:25%; font:18px/1.75 Georgia,serif; color:#555950; }
.draft-note { margin-top:45px; padding-top:24px; border-top:1px solid #15181325; color:#9b7433; font:9px/1.6 Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.legal-details h2 { margin:48px 0 12px; color:#151813; font:400 28px Georgia,serif; }
.legal-details h2:first-child { margin-top:0; }
.legal-details a { border-bottom:1px solid #9b7433; }
@media (max-width:800px) {
  .site-footer { padding:34px 24px; grid-template-columns:1fr; gap:22px; }
  .site-footer div { flex-direction:column; gap:14px; }
  .footer-social { justify-self:start; }
  .legal-page { padding:60px 28px; }
  .legal-back { margin-bottom:100px; }
  .legal-copy { margin-left:0; }
}

.partner-hero { padding:12vh 0 10vh; max-width:1050px; }
.partner-hero h1 { font-size:clamp(58px,7.5vw,116px); margin:0 0 45px; }
.partner-hero h1 em { color:var(--gold); font-weight:400; }
.partner-hero > p:last-child { max-width:610px; margin-left:34%; color:#aeb0aa; font:18px/1.7 Georgia,serif; }
.resource-list { border-top:1px solid #ffffff1b; }
.resource-list article { min-height:180px; display:grid; grid-template-columns:.5fr 2fr 1fr; gap:4vw; align-items:center; border-bottom:1px solid #ffffff1b; }
.resource-list article > span { color:var(--gold); font-size:9px; letter-spacing:.2em; }
.resource-list h2 { margin:0 0 12px; font:400 32px Georgia,serif; }
.resource-list p { margin:0; color:#898d86; font:15px/1.65 Georgia,serif; }
.resource-list strong { justify-self:end; color:#696d67; font-size:8px; font-weight:400; letter-spacing:.18em; text-transform:uppercase; }
.partner-cta { margin:10vw -6vw 0; padding:9vw 8vw; background:#efe9dc; color:#151813; }
.partner-cta h2 { margin:18px 0 42px; font:400 clamp(46px,6vw,84px) Georgia,serif; }
.partner-cta .cta { color:#151813; }
@media (max-width:800px) {
  .partner-hero { padding:80px 0 70px; }
  .partner-hero h1 { font-size:54px; }
  .partner-hero > p:last-child { margin-left:0; }
  .resource-list article { grid-template-columns:1fr; gap:20px; padding:34px 0; }
  .resource-list strong { justify-self:start; }
  .partner-cta { padding:80px 28px; }
}

.education-intro { padding:11vh 0 9vh; display:grid; grid-template-columns:1fr 2fr; column-gap:5vw; }
.education-intro > .eyebrow { padding-top:15px; }
.education-intro h1 { margin:0; font-size:clamp(58px,7vw,108px); }
.education-intro h1 em { color:var(--gold); font-weight:400; }
.education-intro > p:last-child { grid-column:2; max-width:570px; margin:42px 0 0; color:#aeb0aa; font:18px/1.7 Georgia,serif; }
.education-grid { display:grid; grid-template-columns:1fr 1fr; border:1px solid #ffffff1b; }
.education-card { min-height:500px; padding:40px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(145deg,#111612,#0b0d0c); transition:background .3s; }
.education-card + .education-card { border-left:1px solid #ffffff1b; }
.education-card:hover { background:linear-gradient(145deg,#1b211c,#0c0f0d); }
.education-card.is-pending { opacity:.58; cursor:default; }
.card-index { color:#ffffff50; font-size:9px; letter-spacing:.2em; }
.education-card h2 { margin:0 0 26px; font:400 clamp(44px,5vw,70px)/1 Georgia,serif; }
.education-card p:not(.eyebrow) { max-width:440px; min-height:72px; color:#92968f; font:16px/1.65 Georgia,serif; }
.education-card strong { display:inline-block; margin-top:38px; padding-bottom:10px; border-bottom:1px solid var(--gold); font-size:9px; font-weight:400; letter-spacing:.19em; text-transform:uppercase; }
@media (max-width:800px) {
  .education-intro { grid-template-columns:1fr; padding:80px 0 64px; }
  .education-intro h1 { font-size:54px; }
  .education-intro > p:last-child { grid-column:1; margin-top:30px; }
  .education-grid { grid-template-columns:1fr; }
  .education-card { min-height:430px; padding:28px; }
  .education-card + .education-card { border-left:0; border-top:1px solid #ffffff1b; }
}

.contact-hero { padding:12vh 0 9vh; }
.contact-hero h1 { margin:0; font-size:clamp(62px,8.5vw,130px); }
.contact-hero h1 em { color:var(--gold); font-weight:400; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #ffffff1b; border-bottom:1px solid #ffffff1b; }
.contact-block { min-height:470px; padding:48px 5vw 48px 0; }
.contact-block + .contact-block { padding-left:5vw; border-left:1px solid #ffffff1b; }
.contact-block > span { color:#ffffff45; font-size:9px; letter-spacing:.2em; }
.contact-block .eyebrow { margin-top:80px; }
.contact-block h2 { margin:0 0 24px; font:400 clamp(34px,4vw,54px) Georgia,serif; }
.contact-note { max-width:430px; color:#8d918a; font:15px/1.65 Georgia,serif; }
.contact-person { margin:0 0 8px; color:#d7d6cf; font:20px/1.4 Georgia,serif; }
.contact-role { margin:0; color:#aeb1aa; font:15px/1.6 Georgia,serif; }
.contact-placeholder { margin-top:44px; color:#c9c9c2; font:16px/1.8 Georgia,serif; letter-spacing:0; text-transform:none; }
.contact-placeholder a { color:#d0aa63; border-bottom:1px solid #d0aa6370; }
.distributor-list { margin-top:35px; }
.distributor-list div { display:grid; grid-template-columns:145px 1fr; gap:20px; padding:15px 0; border-bottom:1px solid #ffffff14; }
.distributor-list strong { color:#d7d6cf; font-size:10px; font-weight:400; letter-spacing:.13em; text-transform:uppercase; }
.distributor-list span { color:#b7bab3; font:15px/1.6 Georgia,serif; }
.distributor-list a { color:#d0aa63; border-bottom:1px solid #d0aa6370; }
.contact-closing { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.contact-closing .large-mark { transform:scale(1.7); margin-bottom:24px; }
.contact-closing p { margin:0 0 12px; color:#777b74; text-transform:uppercase; letter-spacing:.28em; font-size:9px; }
.contact-closing strong { font:400 27px Georgia,serif; }
@media (max-width:800px) {
  .contact-hero { padding:80px 0 70px; }
  .contact-hero h1 { font-size:56px; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-block { min-height:auto; padding:45px 0; }
  .contact-block + .contact-block { padding-left:0; border-left:0; border-top:1px solid #ffffff1b; }
  .contact-block .eyebrow { margin-top:45px; }
  .distributor-list div { grid-template-columns:1fr; gap:7px; }
}

.product-detail { padding-bottom:0; }
.detail-hero { min-height:calc(100vh - 108px); position:relative; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7vw; }
.detail-copy { position:relative; z-index:2; }
.detail-copy h1 { font-size:clamp(76px,10vw,150px); margin:0 0 38px; }
.detail-lead { max-width:520px; color:#adafa9; font:18px/1.7 Georgia,serif; }
.detail-photo { height:72vh; border:1px dashed #ffffff22; display:grid; place-items:center; text-align:center; color:#ffffff40; font-size:8px; line-height:1.8; letter-spacing:.2em; text-transform:uppercase; background:radial-gradient(circle,#76511f 0,#25190c 34%,transparent 70%); }
.detail-photo:has(img) { border:0; overflow:hidden; display:block; background:none; }
.detail-photo img { width:100%; height:100%; min-width:0; min-height:0; max-width:100%; max-height:100%; object-fit:contain; object-position:center; display:block; }
@media (min-width:801px) {
  .detail-photo:has(img) { background:none; display:block; }
  .detail-photo img { object-fit:contain; min-width:0; min-height:0; max-width:100%; max-height:100%; }
}
.ginger-detail .detail-photo { background:radial-gradient(circle,#50653b 0,#1b2518 34%,transparent 70%); }
.ginger-detail .eyebrow, .ginger-detail .detail-story h2 em, .ginger-detail .detail-facts span { color:#a8b27a; }
.detail-index { position:absolute; right:0; bottom:36px; color:#ffffff55; font-size:9px; letter-spacing:.22em; }
.detail-story { margin:0 -6vw; padding:10vw 8vw; background:#efe9dc; color:#151813; display:grid; grid-template-columns:.5fr 2fr 1.5fr; gap:5vw; align-items:start; }
.detail-story h2 { font:400 clamp(50px,6vw,88px)/1.02 Georgia,serif; margin:0; letter-spacing:-.04em; }
.detail-story h2 em { color:#9b7433; font-weight:400; }
.detail-story > p { color:#555950; font:17px/1.75 Georgia,serif; margin-top:42px; }
.detail-facts { margin:0 -6vw; padding:60px 8vw; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid #ffffff1b; border-bottom:1px solid #ffffff1b; }
.detail-facts div { display:flex; flex-direction:column; gap:22px; padding:0 38px; border-right:1px solid #ffffff1b; }
.detail-facts div:first-child { padding-left:0; }.detail-facts div:last-child { border:0; }
.detail-facts span { color:var(--gold); font-size:9px; letter-spacing:.2em; }
.detail-facts strong { font:400 21px Georgia,serif; }
.next-product { margin:0 -6vw; padding:75px 8vw; display:flex; justify-content:space-between; align-items:center; background:#111512; }
.next-product span { color:#777b74; text-transform:uppercase; letter-spacing:.2em; font-size:9px; }
.next-product strong { font:400 clamp(34px,4vw,58px) Georgia,serif; }
.product-pagination { margin:0 -6vw; padding:60px 8vw; display:flex; gap:32px; justify-content:space-between; background:#111512; }
.product-pagination a { display:flex; flex-direction:column; gap:16px; }
.product-pagination span { color:#a8a69f; text-transform:uppercase; letter-spacing:.2em; font-size:9px; }
.product-pagination strong { font:400 clamp(28px,3vw,44px) Georgia,serif; }
.product-pagination .following-product { margin-left:auto; text-align:right; }
@media(max-width:800px) {
  .product-pagination { padding:40px 28px; flex-wrap:wrap; }
  .product-pagination strong { font-size:28px; }
}
.product-knowledge { margin:0 -6vw; padding:9vw 8vw; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#ffffff1b; }
.product-knowledge article { padding:5vw; background:#0d100e; }
.product-knowledge h2 { margin:0 0 28px; font:400 clamp(34px,4vw,54px) Georgia,serif; }
.product-knowledge article > p:last-child { color:#90948d; font:16px/1.7 Georgia,serif; }
.product-knowledge .wide { grid-column:1/-1; }
.taste-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5vw; }
.taste-grid p { color:#90948d; font:15px/1.7 Georgia,serif; }
.taste-grid strong { display:block; margin-bottom:12px; color:var(--ivory); font:400 20px Georgia,serif; }
.awards-list { margin:0 -6vw; padding:10vw 8vw; background:#efe9dc; color:#151813; display:grid; grid-template-columns:1fr 1.4fr; gap:7vw; }
.awards-list h2 { margin:15px 0 0; font:400 clamp(48px,6vw,82px)/1 Georgia,serif; }
.awards-list h2 em { color:#9b7433; font-weight:400; }
.awards-list ul { margin:0; padding:0; list-style:none; }
.awards-list li { padding:23px 0; border-bottom:1px solid #15181322; font:18px Georgia,serif; }
.awards-list li span { display:block; margin-bottom:8px; color:#8e7240; font:8px Arial,sans-serif; letter-spacing:.18em; text-transform:uppercase; }
@media (max-width:800px) {
  .detail-hero { grid-template-columns:1fr; padding:70px 0; }
  .detail-copy h1 { font-size:72px; }
  .detail-photo { height:55vh; }
  .detail-story { grid-template-columns:1fr; padding:90px 28px; }
  .detail-facts { grid-template-columns:1fr; padding:20px 28px; }
  .detail-facts div { padding:28px 0; border-right:0; border-bottom:1px solid #ffffff1b; }
  .next-product { padding:55px 28px; }
  .product-knowledge { grid-template-columns:1fr; padding:1px 28px; }
  .product-knowledge .wide { grid-column:1; }
  .taste-grid { grid-template-columns:1fr; gap:14px; }
  .awards-list { grid-template-columns:1fr; padding:90px 28px; }
}

.inner-page { min-height:100vh; padding:0 6vw 8vw; background:var(--ink); }
.inner-nav { position:relative; }
.products-intro { padding:11vh 0 10vh; display:grid; grid-template-columns:1fr 2fr; column-gap:5vw; align-items:start; }
.products-intro .eyebrow { padding-top:14px; }
.products-intro h1 { font-size:clamp(58px,7vw,112px); margin:0; }
.products-intro h1 em { color:var(--gold); font-weight:400; }
.page-lead { grid-column:2; max-width:580px; margin:46px 0 0; color:#aeb0aa; font:18px/1.7 Georgia,serif; }
.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#ffffff1b; border:1px solid #ffffff1b; }
.product-panel { min-height:620px; position:relative; overflow:hidden; padding:40px; background:#101411; display:flex; flex-direction:column; justify-content:flex-end; }
.product-panel:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,transparent 30%,#070908e8 100%); }
.product-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.honey-panel { background:radial-gradient(circle at 60% 32%,#6f4a17 0,#251a0c 30%,#0d100e 72%); }
.ginger-panel { background:radial-gradient(circle at 60% 32%,#465b35 0,#182117 30%,#0d100e 72%); }
.product-number { position:absolute; top:34px; left:40px; color:#ffffff55; font-size:9px; letter-spacing:.22em; z-index:2; }
.product-copy { position:relative; z-index:2; }
.product-copy h2 { margin:0 0 38px; font:400 clamp(52px,5vw,82px)/1 Georgia,serif; }
.photo-placeholder { position:absolute; inset:80px 50px 160px; border:1px dashed #ffffff20; display:grid; place-items:center; text-align:center; color:#ffffff35; font-size:8px; line-height:1.7; letter-spacing:.2em; text-transform:uppercase; }
@media (max-width:800px) {
  .inner-page { padding:0 24px 60px; }
  .products-intro { grid-template-columns:1fr; padding:80px 0 64px; }
  .products-intro h1 { font-size:56px; }
  .page-lead { grid-column:1; margin-top:30px; }
  .product-grid { grid-template-columns:1fr; }
  .product-panel { min-height:520px; padding:28px; }
}