:root{
  --ink:#1d1b18; --muted:#77736c; --line:#dcdad6; --band:#f3f3f1;
  --gold:#b48c3c;
  --serif:"Cormorant Garamond", Georgia, serif;
  --mono:"Jost", system-ui, sans-serif;
  --sans:"Jost", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);font-weight:300;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-weight:300;font-size:12px;letter-spacing:.08em;text-transform:uppercase}

.topbar{background:var(--gold);color:#fff;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:8px 16px}

/* nav: thin line box like a ledger */
.nav{position:absolute;z-index:5;left:32px;right:32px;top:62px;display:grid;grid-template-columns:290px 1fr 1.4fr;border:1px solid rgba(255,255,255,.45);color:#fff;background:rgba(20,16,12,.32);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nav>*{border-right:1px solid rgba(255,255,255,.45)}
.nav>*:last-child{border-right:0}
.nav-logo{display:flex;align-items:center;justify-content:center;padding:12px 18px}
.nav-logo img{width:236px}
.nav-note{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:10px 18px;font-size:11px;text-transform:none}
.nav-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.nav-grid a{padding:14px 18px;border-right:1px solid rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.45)}
.nav-grid a:nth-child(3n){border-right:0}
.nav-grid a:nth-child(n+4){border-bottom:0}

.hero{position:relative;height:100vh;min-height:560px;max-height:920px;overflow:hidden;background:#2a2622}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 26%),radial-gradient(ellipse 46% 30% at 50% 52%,rgba(0,0,0,.5),rgba(0,0,0,0) 100%)}
.hero h1,.hero-sub{text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 24px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,7vw,96px);line-height:1;letter-spacing:-.01em;margin-bottom:14px}
.hero-sub{font-family:var(--serif);font-size:clamp(19px,2vw,26px);margin-bottom:30px;opacity:.95}
.btn-line{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.8);color:#fff;padding:12px 22px}
.btn-line.dark{border-color:var(--ink);color:var(--ink)}

/* leaf row */
.leaves{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;padding:56px 32px 40px}
.leaves a{text-align:center}
.leaves img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}
.leaves span{display:block;margin-top:10px;text-transform:none;font-size:13px;letter-spacing:.04em}

/* tall tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:0 32px 32px}
.tile{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;background:#ddd}
.tile img{width:100%;height:100%;object-fit:cover}
.tile div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:rgba(0,0,0,.12)}
.tile h2{font-family:var(--serif);font-weight:400;font-size:clamp(40px,4.6vw,68px);line-height:1}
.tile span{margin-top:10px}

/* why */
.why{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:72px 32px;background:var(--band);margin-top:40px}
.why img{width:100%;aspect-ratio:3/4;object-fit:cover;max-height:720px}
.why-copy{max-width:480px}
.label{color:var(--muted);margin-bottom:22px}
.why ul{list-style:none;margin-bottom:34px}
.why li{font-family:var(--serif);font-size:24px;line-height:1.35;padding:14px 0;border-top:1px solid var(--line)}
.why li:last-child{border-bottom:1px solid var(--line)}

/* featured */
.featured{padding:88px 32px 40px}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4vw,54px);margin-bottom:32px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.card img{width:100%;aspect-ratio:33/20;object-fit:cover}
.card h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;margin:16px 0 6px}
.card p{color:var(--muted);text-transform:none}

/* wide */
.wide{padding:72px 32px 24px;border-top:1px solid var(--line);margin:0 32px;padding-left:0;padding-right:0}
.wide img{width:100%;height:68vh;max-height:640px;object-fit:cover}
.wide p{max-width:760px;margin:0 auto;text-align:center;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.45}

/* quotes */
.quotes{padding:72px 32px 96px;text-align:center}
.quote-track{position:relative;min-height:190px;max-width:820px;margin:0 auto}
.quotes blockquote{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.35}
.quotes blockquote.on{opacity:1}
.quotes cite{display:block;margin-top:20px;font-style:normal;color:var(--muted)}

/* newsletter + footer */
.news{display:grid;grid-template-columns:1fr 1fr;background:var(--band)}
.news>*{padding:48px 32px}
.news>div{border-right:1px solid var(--line)}
.muted{color:var(--muted);margin-top:8px;font-size:15px}
.news-row{display:flex;gap:12px;margin-top:16px}
.news input{flex:1;border:0;border-bottom:1px solid var(--ink);background:none;font-family:var(--mono);font-size:14px;padding:10px 0;outline:none}
.news button{border:1px solid var(--ink);background:none;padding:10px 22px;cursor:pointer}
.foot{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:48px 32px 64px;text-transform:none}
.foot h4{font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.foot a{display:block;font-size:13px;padding:4px 0}

/* gentle reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .nav{left:12px;right:12px;top:52px;grid-template-columns:1fr}
  .nav>*{border-right:0;border-bottom:1px solid rgba(255,255,255,.45)}
  .nav>*:last-child{border-bottom:0}
  .nav-note{display:none}
  .nav-logo img{width:180px}
  .nav-grid a{padding:11px 12px;font-size:11px}
  .leaves{grid-template-columns:repeat(4,1fr);gap:14px 8px;padding:36px 16px 24px}
  .tiles{grid-template-columns:1fr;gap:14px;padding:0 16px 16px}
  .tile{aspect-ratio:4/3}
  .why{grid-template-columns:1fr;gap:32px;padding:48px 16px}
  .why li{font-size:21px}
  .featured{padding:56px 16px 24px}
  .cards{grid-template-columns:1fr 1fr;gap:20px 14px}
  .card h3{font-size:19px}
  .wide{padding:32px 16px}
  .wide img{height:44vh}
  .quotes{padding:56px 16px 72px}
  .quote-track{min-height:260px}
  .news{grid-template-columns:1fr}
  .news>*{padding:32px 16px}
  .news>div{border-right:0;border-bottom:1px solid var(--line)}
  .foot{grid-template-columns:1fr 1fr;padding:32px 16px 48px}
}

/* ---------- product page ---------- */
.nav.solid{position:relative;left:auto;right:auto;top:auto;margin:24px 32px 0;color:var(--ink);border-color:var(--line);background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav.solid>*,.nav.solid .nav-grid a{border-color:var(--line)}

.pdp{padding:28px 32px 0}
.crumb{color:var(--muted);text-transform:none;margin-bottom:24px}
.pdp-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:start}
.gallery .main{width:100%;aspect-ratio:33/20;object-fit:cover}
.thumbs{display:flex;gap:12px;margin-top:12px}
.thumbs button{border:1px solid transparent;padding:0;background:none;cursor:pointer;width:110px}
.thumbs button.on{border-color:var(--ink)}
.thumbs img{aspect-ratio:33/20;object-fit:cover}
.buy{position:sticky;top:24px;padding-top:8px}
.muted-label{color:var(--muted);margin-bottom:14px}
.buy h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4vw,58px);line-height:1.02}
.buy .sub{font-family:var(--serif);font-style:normal;font-size:20px;color:var(--muted);margin-top:8px}
.price{margin:26px 0 24px;font-size:22px}
.price del{color:var(--muted);font-size:16px;margin-left:8px}
.opt-label{margin-bottom:10px}
.weights{display:flex;gap:10px;margin-bottom:22px}
.weights button{font-family:var(--mono);font-size:13px;padding:12px 26px;border:1px solid var(--line);background:#fff;cursor:pointer}
.weights button.on{border-color:var(--ink)}
.cart-row{display:flex;gap:12px;align-items:stretch}
.qty{display:flex;border:1px solid var(--line)}
.qty button{width:42px;border:0;background:none;font-size:18px;cursor:pointer}
.qty input{width:44px;border:0;text-align:center;font-family:var(--mono);font-size:14px}
.btn-solid{flex:1;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;font-family:var(--mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:16px 20px}
.note{color:var(--muted);text-transform:none;margin-top:14px}
.lede{margin-top:28px;padding-top:24px;border-top:1px solid var(--line);font-size:16px;line-height:1.7}
.brew{display:grid;grid-template-columns:repeat(3,1fr);margin-top:72px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.brew>div{padding:34px 24px;text-align:center;border-right:1px solid var(--line)}
.brew>div:last-child{border-right:0}
.brew .big{font-family:var(--serif);font-size:clamp(40px,5vw,64px);line-height:1.1;margin:6px 0}
.brew .mono{color:var(--muted)}
.story{max-width:780px;margin:72px auto 0;text-align:center}
.story p{font-family:var(--serif);font-size:clamp(21px,2vw,26px);line-height:1.5;margin-bottom:22px}
.notes{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:56px;padding-top:40px;border-top:1px solid var(--line)}
.notes h3{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.notes ul{list-style:none}
.notes li{padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
.tip{background:var(--band);margin:64px -32px 0;padding:64px 32px;text-align:center}
.tip p:last-child{max-width:720px;margin:0 auto;font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.45}
.related{padding-left:0;padding-right:0}
@media (max-width:900px){
  .nav.solid{margin:12px 12px 0}
  .pdp{padding:20px 16px 0}
  .pdp-grid{grid-template-columns:1fr;gap:28px}
  .buy{position:static}
  .brew>div{padding:24px 8px}
  .notes{grid-template-columns:1fr 1fr;gap:24px}
  .tip{margin:48px -16px 0;padding:48px 16px}
}

/* photos on plain white, no panel (Kay 11/06: remove the square floor) */
.ph img{mix-blend-mode:multiply}
.card .ph img{aspect-ratio:3/2;object-fit:cover}
/* product hero: cut-out cup, shadow falls BEHIND it (up-right), so it floats toward the viewer */
.ph-main .main{display:block;width:66%;margin:24px auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:normal;filter:drop-shadow(22px -16px 18px rgba(30,25,15,.18))}
/* cup: front view on white; amber tea light cast on the wall behind it (Kay 11/06) */
.ph-main{position:relative;isolation:isolate}
.ph-main::before{content:"";position:absolute;left:22%;right:14%;top:8%;bottom:20%;background:radial-gradient(closest-side at 58% 55%,rgba(222,138,44,.34),rgba(222,138,44,0));filter:blur(24px);z-index:-1}
.ph-main .main{mix-blend-mode:multiply;filter:none}
/* soft grey shadow of the cup falling on the wall BEHIND it (offset right/up), amber tea light inside it */
.ph-main::before{left:26%;right:6%;top:6%;bottom:22%;background:radial-gradient(closest-side at 50% 50%,rgba(222,138,44,.30),rgba(222,138,44,0) 70%),radial-gradient(closest-side at 50% 50%,rgba(60,45,30,.20),rgba(60,45,30,0));filter:blur(18px)}
/* final: cut-out cup (no floor shadow below); its shadow is cast on the wall BEHIND it (up-right), amber tea light inside */
.ph-main .main{mix-blend-mode:normal;filter:drop-shadow(34px -26px 22px rgba(50,40,30,.22))}
.ph-main::before{background:radial-gradient(closest-side at 50% 50%,rgba(222,138,44,.28),rgba(222,138,44,0) 75%)}
/* Kay's own cup image (11/06): use as-is, no added glow/shadow */
.ph-main::before{display:none}
.ph-main .main{mix-blend-mode:multiply;filter:none}
/* square thumbnails (Kay 11/06) */
.thumbs button{width:96px}
.thumbs img{aspect-ratio:1;object-fit:contain;width:100%;display:block;background:#fff}
.leaves img{aspect-ratio:3/2}
.tile-note{font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);line-height:1.35;max-width:300px;margin:10px auto 4px;padding:0 16px;text-align:center;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.7)}

/* nav v2 (Kay 11/06: ledger box felt out of place) — plain row: logo left, links right, no box/lines */
.nav,.nav.solid{display:flex;align-items:center;justify-content:space-between;gap:24px;border:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;left:32px;right:32px;top:44px}
.nav>*,.nav.solid>*{border:0}
.nav-note{display:none}
.nav-logo{padding:0}
.nav-logo img{width:200px}
.nav-grid{display:flex;gap:34px}
.nav-grid a,.nav.solid .nav-grid a{padding:4px 0;border:0;font-size:13px;letter-spacing:.14em}
.nav:not(.solid) .nav-grid a{text-shadow:0 1px 10px rgba(0,0,0,.45)}
.nav.solid{margin:28px 32px 0;padding-bottom:22px;border-bottom:1px solid var(--line)}
@media (max-width:900px){
  .nav,.nav.solid{flex-direction:column;gap:12px;left:16px;right:16px;top:44px}
  .nav.solid{margin:16px 16px 0}
  .nav-logo img{width:170px}
  .nav-grid{flex-wrap:wrap;justify-content:center;gap:8px 20px}
  .nav-grid a,.nav.solid .nav-grid a{padding:2px 0;font-size:11px}
}
.nav.solid{left:auto;right:auto;top:auto}
@media (max-width:900px){ .nav:not(.solid){top:70px} .nav.solid{left:auto;right:auto;top:auto} }
/* full-bleed photo band */
.band{position:relative;margin:32px 0 0;height:min(78vh,760px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band p{position:absolute;left:0;right:0;bottom:12%;text-align:center;color:#fff;font-family:var(--serif);font-size:clamp(34px,4.6vw,64px);text-shadow:0 2px 24px rgba(0,0,0,.45)}
@media (max-width:900px){.band{height:62vh}.band img{object-position:40% 50%}}
.band p{bottom:auto;top:11%}
/* calm photo moments (Kay 11/06: more photos, but quiet, not busy) */
.quotes-photo{position:relative;color:#fff;padding:120px 32px 140px;background:url(img/band_porch.jpg?v=28) center/cover}
.quotes-photo::before{content:"";position:absolute;inset:0;background:rgba(20,22,18,.38)}
.quotes-photo>*{position:relative}
.quotes-photo .label,.quotes-photo cite{color:rgba(255,255,255,.85)}
.moments{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px 0 0}
.moments img{width:100%;aspect-ratio:1;object-fit:cover}
@media (max-width:900px){.moments{grid-template-columns:1fr 1fr}.quotes-photo{padding:80px 16px 96px}}
.why-video{width:100%;aspect-ratio:3/4;object-fit:cover;max-height:720px;display:block}

.featured .card .ph img{aspect-ratio:1;object-fit:contain}

/* Kay 11/06: menu + logo always fixed, dark veil so they read over any photo */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20}
.nav,.nav.solid{position:fixed;z-index:20;top:31px;left:0;right:0;margin:0;padding:14px 32px;border:0;background:rgba(20,16,12,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff}
.nav.solid .nav-grid a{color:#fff}
.nav .nav-grid a{text-shadow:none}
.nav-logo img{width:170px}
body:has(.nav.solid){padding-top:110px}
@media (max-width:900px){
  .nav,.nav.solid,.nav:not(.solid){top:31px;left:0;right:0;padding:10px 16px;gap:8px}
  .nav-logo img{width:140px}
  body:has(.nav.solid){padding-top:140px}
}
.nav,.nav.solid{background:rgba(28,23,18,.72)}
body:has(.nav.solid){padding-top:130px}
@media (max-width:900px){
  .topbar{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;letter-spacing:.06em;height:31px;line-height:15px}
  .nav-grid{flex-wrap:nowrap;gap:0 14px}
  .nav-grid a,.nav.solid .nav-grid a{font-size:10px;letter-spacing:.08em}
}
/* Kay 11/06 "너무 딱딱해": no hard bar — soft fade over hero, light bar once scrolled */
.nav,.nav.solid{background:linear-gradient(180deg,rgba(20,16,12,.55) 0,rgba(20,16,12,.28) 60%,rgba(20,16,12,0) 100%);backdrop-filter:none;-webkit-backdrop-filter:none;padding-bottom:26px;transition:background .5s ease,color .5s ease,box-shadow .5s ease}
.nav .nav-grid a{text-shadow:0 1px 8px rgba(0,0,0,.35);transition:color .5s ease}
.nav.scrolled,.nav.solid{background:rgba(255,255,255,.94);color:var(--ink);padding-bottom:14px;box-shadow:0 1px 0 var(--line)}
.nav.scrolled .nav-grid a,.nav.solid .nav-grid a{color:var(--ink);text-shadow:none}

/* Kay 11/07: logo a touch bigger */
.nav-logo img{width:200px}
@media (max-width:900px){ .nav-logo img{width:160px} }
/* Kay 11/07: over the hero the nav veil multiplies the video instead of laying a foreign black on top */
.nav:not(.solid):not(.scrolled){background:none;isolation:isolate}
.nav:not(.solid):not(.scrolled)::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(90,70,50,.78) 0,rgba(90,70,50,.55) 60%,rgba(90,70,50,0) 100%);mix-blend-mode:multiply;pointer-events:none}
@media (max-width:900px){ .nav:not(.solid):not(.scrolled)::before{background:linear-gradient(180deg,rgba(90,70,50,.85) 0,rgba(90,70,50,.6) 70%,rgba(90,70,50,0) 100%)} }
/* veil bleeds further down the hero (Kay 11/07) */
.nav:not(.solid):not(.scrolled)::before{inset:0 0 -90px;background:linear-gradient(180deg,rgba(90,70,50,.8) 0,rgba(90,70,50,.6) 45%,rgba(90,70,50,.25) 75%,rgba(90,70,50,0) 100%)}
@media (max-width:900px){ .nav:not(.solid):not(.scrolled)::before{inset:0 0 -120px;background:linear-gradient(180deg,rgba(90,70,50,.88) 0,rgba(90,70,50,.65) 45%,rgba(90,70,50,.28) 75%,rgba(90,70,50,0) 100%)} }
/* mobile: hamburger + full-height menu (Kay 11/07: links were too small) */
.burger{display:none}
@media (max-width:900px){
  .nav,.nav.solid,.nav:not(.solid){flex-direction:row;align-items:center;justify-content:space-between;gap:0;padding:12px 16px}
  .nav-logo img{width:150px}
  .burger{display:block;position:relative;width:44px;height:44px;border:0;background:none;cursor:pointer;z-index:31;-webkit-tap-highlight-color:transparent}
  .burger span{position:absolute;left:11px;right:11px;height:1.5px;background:currentColor;transition:transform .5s cubic-bezier(.22,1,.36,1),top .5s cubic-bezier(.22,1,.36,1)}
  .burger span:first-child{top:17px} .burger span:last-child{top:26px}
  body.menu-open .burger span:first-child{top:21.5px;transform:rotate(45deg)}
  body.menu-open .burger span:last-child{top:21.5px;transform:rotate(-45deg)}
  .nav-grid{position:fixed;inset:0;z-index:30;flex-direction:column;justify-content:center;align-items:flex-start;gap:0;padding:0 32px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.22,1,.36,1)}
  .nav-grid a,.nav.solid .nav-grid a{color:var(--ink);font-family:var(--serif);font-size:38px;letter-spacing:0;text-transform:none;padding:12px 0;text-shadow:none;opacity:0;transform:translateY(24px);transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1)}
  body.menu-open .nav-grid{opacity:1;pointer-events:auto}
  body.menu-open .nav-grid a{opacity:1;transform:none}
  body.menu-open .nav-grid a:nth-child(1){transition-delay:.06s} body.menu-open .nav-grid a:nth-child(2){transition-delay:.12s} body.menu-open .nav-grid a:nth-child(3){transition-delay:.18s} body.menu-open .nav-grid a:nth-child(4){transition-delay:.24s} body.menu-open .nav-grid a:nth-child(5){transition-delay:.30s} body.menu-open .nav-grid a:nth-child(6){transition-delay:.36s}
  body.menu-open{overflow:hidden}
  body.menu-open .burger{color:var(--ink)}
  body:has(.nav.solid){padding-top:110px}
}

@media (max-width:900px){ .nav-grid{background:rgba(255,255,255,.97)} .nav-grid a,.nav.solid .nav-grid a{font-size:40px;padding:14px 0} .burger span{height:2px;left:9px;right:9px} }

/* Kay 11/07: once scrolled, the bar is frosted glass */
.nav.scrolled,.nav.solid{background:rgba(255,255,255,.72);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);box-shadow:0 1px 0 rgba(0,0,0,.05)}

/* mobile menu: start below the bar, never hide the first links (Kay 11/07) */
@media (max-width:900px){ .nav-grid{justify-content:flex-start;padding:140px 32px 40px;overflow:auto} }

/* Kay 11/07: hero video mirrored left-right */
.hero-video{transform:scaleX(-1)}
/* concept notice in the light footer (same wording as home2) */
.foot-concept{grid-column:1/-1;display:flex;align-items:center;gap:28px;margin-top:44px;padding:24px 26px;border:1px solid var(--line);border-radius:8px}
.foot-concept-logo img{width:140px;display:block}
.foot-concept p{margin:0;font-size:12.5px;line-height:1.65;color:var(--muted);text-transform:none;letter-spacing:.02em;max-width:860px}
.foot-concept p strong{color:var(--ink);font-weight:400}
.foot-concept p a{display:inline;padding:0;color:var(--ink);text-decoration:underline}
.foot-concept p br{display:block;content:"";margin-top:8px}
.foot-base{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.foot-base a{display:inline;padding:0}
@media (max-width:900px){ .foot-concept{flex-direction:column;align-items:flex-start;gap:14px} .foot-base{flex-direction:column;gap:8px} }
/* Kay 11/07: hamburger showed iOS blue; no blurry text shadows */
.burger{color:#fff}
.nav.scrolled .burger,.nav.solid .burger,body.menu-open .burger{color:var(--ink)}
.hero h1,.hero-sub,.nav:not(.solid) .nav-grid a,.nav .nav-grid a{text-shadow:none}

/* iPad: keep the bar above every pinned/composited layer (Kay 11/07) */
.nav,.nav.solid,.nav.scrolled{z-index:1000;transform:translateZ(0)}
.topbar{z-index:1001}

/* the translateZ made the fixed menu panel position relative to the bar (links hidden) — remove it */
.nav,.nav.solid,.nav.scrolled{transform:none}

/* mobile menu open: keep the logo above the panel (Kay 11/07) */
@media (max-width:900px){ body.menu-open .nav-logo{position:relative;z-index:31} }
/* Kay 11/07: mobile menu links smaller */
@media (max-width:900px){ .nav-grid a,.nav.solid .nav-grid a{font-size:28px;padding:10px 0} }
/* Kay 11/07: gold bar text was too small on phone/iPad */
@media (max-width:900px){
  .topbar{font-size:13px;letter-spacing:.06em;height:38px;line-height:22px;padding:8px 16px}
  .nav,.nav.solid,.nav:not(.solid){top:38px}
}
@media (max-width:600px){
  .topbar{white-space:normal;overflow:visible;font-size:12px;letter-spacing:.05em;height:50px;line-height:17px;padding:8px 20px}
  .nav,.nav.solid,.nav:not(.solid){top:50px}
}
.topbar{background:#94702a;font-weight:500}  /* Kay 11/07: white text was hard to read on the lighter gold */
.topbar .m-br{display:none}
@media (max-width:600px){ .topbar .m-br{display:inline} }