/*
 * Coffee Mengo / V2 visual system
 * Content is intentionally kept in the original multi-page HTML tree.
 * This stylesheet is the new skin: editorial, tactile, and slightly digital.
 */
:root{
  --paper:#f1eee6;
  --paper-2:#e8e4da;
  --paper-3:#f8f6f1;
  --ink:#172022;
  --muted:#657174;
  --line:rgba(23,32,34,.18);
  --line-soft:rgba(23,32,34,.09);
  --teal:#6f9f96;
  --teal-deep:#2f625d;
  --sky:#b7d0d4;
  --copper:#c96745;
  --copper-deep:#9d4933;
  --night:#10191b;
  --night-2:#1b292a;
  --night-ink:#e9eee8;
  --serif:"Iowan Old Style","Baskerville","Songti SC","STSong","Noto Serif SC",serif;
  --sans:"Avenir Next","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:"SFMono-Regular","Roboto Mono","Menlo",monospace;
  --radius:2px;
  --nav-height:78px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--paper);}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.82;
  font-size:16px;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.35;
  background-image:linear-gradient(rgba(23,32,34,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(23,32,34,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,black,transparent 75%);
}
body::after{
  content:"";
  position:fixed;
  width:40vw;
  height:40vw;
  top:-18vw;
  right:-12vw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(183,208,212,.27),transparent 68%);
  pointer-events:none;
  z-index:-1;
}
::selection{background:var(--copper);color:#fff;}
img{max-width:100%;display:block;}
a{color:inherit;}

.wrap{max-width:1280px;margin:0 auto;padding:0 46px;}

/* Navigation */
nav.top{
  position:fixed;
  inset:0 0 auto;
  z-index:90;
  background:rgba(241,238,230,.78);
  backdrop-filter:blur(18px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:1280px;margin:0 auto;min-height:var(--nav-height);padding:13px 46px;display:flex;align-items:center;justify-content:space-between;gap:22px;}
.nav-brand{font-family:var(--serif);font-size:20px;line-height:1;letter-spacing:.04em;text-decoration:none;white-space:nowrap;}
.nav-brand em{font-style:normal;color:var(--copper);}
.nav-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap;}
.nav-links a{position:relative;color:var(--muted);text-decoration:none;font-size:12px;letter-spacing:.12em;white-space:nowrap;transition:color .25s ease;}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--copper);transition:right .25s ease;}
.nav-links a:hover,.nav-links a.on{color:var(--copper-deep);}
.nav-links a:hover::after,.nav-links a.on::after{right:0;}
.lang{display:flex;align-items:center;white-space:nowrap;font-size:11px;letter-spacing:.04em;}
.lang a,.lang .cur{padding:3px 10px;border-left:1px solid var(--line);text-decoration:none;color:var(--muted);transition:color .2s ease;}
.lang a:first-child,.lang .cur:first-child{border-left:none;}
.lang a:hover,.lang .cur{color:var(--copper-deep);}
.lang .cur{font-weight:700;}
.menu-toggle{display:none;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:11px;letter-spacing:.16em;padding:7px 10px;cursor:pointer;}

/* Type and layout */
section{padding:145px 0;position:relative;}
section.alt{background:var(--paper-2);}
section.dark{background:var(--night);color:var(--night-ink);}
.kicker{font-family:var(--mono);font-size:10px;line-height:1.4;letter-spacing:.28em;color:var(--copper-deep);text-transform:uppercase;margin-bottom:20px;}
.dark .kicker{color:var(--teal);}
h1,h2,h3{font-family:var(--serif);font-weight:500;}
h1{font-size:clamp(42px,6.7vw,94px);line-height:1.04;letter-spacing:-.045em;}
h2{font-size:clamp(30px,4.2vw,58px);line-height:1.1;letter-spacing:-.035em;margin-bottom:28px;}
h3{letter-spacing:-.01em;}
.en-sub{display:block;font-family:var(--sans);font-size:clamp(12px,1.35vw,16px);line-height:1.5;letter-spacing:.2em;color:var(--teal-deep);margin-top:19px;font-weight:400;text-transform:uppercase;}
.dark .en-sub{color:var(--teal);}
.lead{max-width:720px;color:var(--muted);font-size:16px;line-height:2;}
.lead b{color:var(--ink);font-weight:650;}
.dark .lead{color:#a9b6b2;}
.dark .lead b{color:var(--night-ink);}
.rule{width:92px;height:1px;background:var(--copper);margin:38px 0;position:relative;}
.rule::after{content:"";display:block;width:7px;height:7px;border:1px solid var(--copper);border-radius:50%;position:absolute;right:-1px;top:-3px;background:var(--paper);}
.dark .rule::after{background:var(--night);}
.center{text-align:center;}
.center .lead{margin:0 auto;}
.center .rule{margin:38px auto;}

/* Visual slots: no invented assets, just designed placeholders awaiting real photography. */
.ph{
  position:relative;
  min-height:160px;
  background:
    radial-gradient(circle at 76% 18%,rgba(201,103,69,.56),transparent 19%),
    radial-gradient(circle at 26% 82%,rgba(111,159,150,.7),transparent 28%),
    linear-gradient(135deg,#1a2a2b 0%,#496d6e 44%,#d4b58f 100%);
  border:1px solid rgba(23,32,34,.3);
  overflow:hidden;
  isolation:isolate;
}
.ph::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.38;
  background-image:linear-gradient(120deg,transparent 0 46%,rgba(255,255,255,.38) 46.4% 46.8%,transparent 47.2%),linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px;
  mix-blend-mode:screen;
}
.ph::after{
  content:attr(data-label);
  position:absolute;
  inset:auto 14px 14px;
  z-index:2;
  display:block;
  padding:9px 11px;
  color:#f7f6f1;
  background:rgba(16,25,27,.72);
  border-left:2px solid var(--copper);
  font-family:var(--mono);
  font-size:10px;
  line-height:1.45;
  letter-spacing:.08em;
  text-align:left;
}
.ph img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;}
.ph .bear-photo{object-position:center 34%;}
.product-photo img{filter:saturate(.82) contrast(1.02);}
.dark .ph{background:linear-gradient(135deg,#132020,#315857 60%,#9d624c);border-color:rgba(233,238,232,.22);}
.dark .ph::after{background:rgba(16,25,27,.78);}

/* Cards, facts and buttons */
.cards{display:grid;gap:18px;margin-top:58px;perspective:1600px;}
.cards.c4{grid-template-columns:repeat(4,1fr);}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c2{grid-template-columns:repeat(2,1fr);}
.card{background:rgba(248,246,241,.8);border:1px solid var(--line);padding:34px 28px;min-height:180px;transition:transform .3s ease,background .3s ease,border-color .3s ease;}
.card:hover{transform:translateY(-7px);background:var(--paper-3);border-color:var(--copper);}
section.alt .card{background:rgba(241,238,230,.7);}
.card .c-en,.p-en{font-family:var(--mono);font-size:10px;line-height:1.4;letter-spacing:.2em;color:var(--copper-deep);text-transform:uppercase;margin-bottom:16px;}
.card h3{font-size:21px;margin-bottom:9px;}
.card .c-line{font-family:var(--serif);color:var(--teal-deep);font-size:15px;margin-bottom:12px;}
.card p{color:var(--muted);font-size:14px;line-height:1.8;}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:62px;}
.fact{padding:25px 18px 25px 0;border-bottom:1px solid var(--line);}
.fact .v{font-family:var(--serif);font-size:24px;color:var(--teal-deep);}
.fact .k{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:6px;letter-spacing:.04em;line-height:1.6;}
.btn{display:inline-block;border:1px solid var(--copper);color:var(--copper-deep);text-decoration:none;font-family:var(--mono);font-size:11px;letter-spacing:.15em;padding:12px 22px;transition:all .25s ease;}
.btn:hover{background:var(--copper);color:#fff;}

/* Brand page */
.hero{min-height:calc(100vh - 10px);padding:180px 0 100px;display:flex;align-items:center;position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg .ph{height:100%;border:0;opacity:.42;filter:saturate(.78);}
.hero-bg .ph::after{display:none;}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 2%,rgba(241,238,230,.82) 31%,rgba(241,238,230,.2) 74%,rgba(241,238,230,.1));}
.hero-in{position:relative;padding-left:46px!important;padding-right:46px!important;}
.hero-in::after{content:"01 / 08";position:absolute;right:46px;bottom:-100px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--muted);writing-mode:vertical-rl;}
.hero h1{max-width:840px;}
.hero-line{border-top:1px solid var(--line);margin-top:42px;padding-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);}
.logo-stage{display:grid;grid-template-columns:minmax(260px,.85fr) 1.15fr;gap:70px;align-items:center;}
.m-anim{border:1px solid var(--line);background:var(--paper-3);padding:44px;position:relative;}
.m-anim::before{content:"M / ORIGIN MARK";position:absolute;top:14px;left:16px;font:10px var(--mono);letter-spacing:.15em;color:var(--muted);}
.m-anim svg{width:100%;max-height:185px;}
.m-anim .mline{fill:none;stroke:var(--copper);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:430;stroke-dashoffset:430;animation:draw-mark 2.1s .4s cubic-bezier(.2,.8,.2,1) forwards;}
.m-name{margin-top:22px;font-family:var(--serif);font-size:24px;letter-spacing:.12em;}
.m-cap{font:10px var(--mono);letter-spacing:.08em;color:var(--muted);margin-top:8px;}
.mego{border-left:1px solid var(--copper);padding-left:32px;}
.mego .big{font-family:var(--serif);font-size:clamp(70px,11vw,150px);line-height:.8;letter-spacing:-.08em;color:var(--teal-deep);}
.mego .steps{margin-top:28px;font-family:var(--serif);font-size:21px;line-height:1.8;}
.bear-verse{max-width:720px;font-family:var(--serif);font-size:clamp(24px,4.4vw,55px);line-height:1.35;color:#eef1ea;}
.bear-figure{max-width:680px;margin:55px auto 0;}
.bear-figure .ph{aspect-ratio:16/9;}
.bear-figure .ph::after{display:none;}
.bear-key{margin-top:44px;padding:22px 0;border-top:1px solid rgba(233,238,232,.2);border-bottom:1px solid rgba(233,238,232,.2);display:flex;align-items:center;justify-content:space-between;gap:20px;}
.bear-key .zh{font-family:var(--serif);font-size:22px;line-height:1.7;}
.bear-key .en{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--teal);}
.bear-close{margin-top:58px;display:flex;justify-content:flex-end;font-family:var(--serif);font-size:23px;color:var(--copper);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;}
.split>.ph{aspect-ratio:4/3;}
.sus-list{list-style:none;margin-top:30px;border-top:1px solid var(--line);}
.sus-list li{padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);}
.sus-list li::before{content:"↳";color:var(--copper);margin-right:12px;}
.sus-close{margin-top:30px;font-family:var(--serif);font-size:20px;color:var(--teal-deep);}

/* Origin page */
.o-hero{min-height:92vh;padding:130px 0 60px 46px;display:grid;grid-template-columns:minmax(280px,.75fr) 1.25fr;gap:50px;align-items:center;max-width:1450px;margin:0 auto;}
.o-left{padding-left:max(0px,calc((100vw - 1280px)/2));}
.o-right .ph{height:min(70vh,720px);}
.tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;margin-top:58px;}
.tl{border-left:1px solid var(--copper);padding-left:28px;}
.tl-item{padding:26px 0;border-bottom:1px solid var(--line);}
.tl-item .y{font:11px var(--mono);letter-spacing:.16em;color:var(--copper-deep);}
.tl-item h3{font-size:24px;margin:9px 0;}
.tl-item p{color:var(--muted);font-size:14px;}
.tl-grid>.ph{aspect-ratio:4/5;}
.region-stage{display:grid;grid-template-columns:1.4fr .8fr;gap:50px;align-items:start;margin-top:58px;}
.region-map{border:1px solid var(--line);background:var(--paper-3);padding:18px;}
.region-map svg{width:100%;height:auto;display:block;}
.r-zone{cursor:pointer;transition:transform .25s ease,opacity .25s ease;transform-origin:center;}
.r-zone:hover,.r-zone.on{transform:scale(1.03);}
.r-zone circle{fill:var(--copper);}
.r-zone.on circle{fill:var(--teal-deep);}
.r-zone text{fill:var(--ink);font:12px var(--mono);}
.map-note,.map-caption,.cap{font:10px var(--mono);color:var(--muted);letter-spacing:.08em;line-height:1.6;}
.region-tabs,.loc-tabs{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;}
.region-tabs button,.loc-tabs button{border:1px solid var(--line);background:transparent;color:var(--muted);font:11px var(--mono);padding:9px 14px;cursor:pointer;transition:all .2s ease;}
.region-tabs button:hover,.region-tabs button.on,.loc-tabs button:hover,.loc-tabs button.on{border-color:var(--copper);color:var(--copper-deep);background:rgba(201,103,69,.08);}
.region-card,.loc-card{border:1px solid var(--line);background:var(--paper-3);padding:34px;min-height:350px;}
.region-card .c-en,.loc-card .c-en{font:10px var(--mono);letter-spacing:.2em;color:var(--copper-deep);text-transform:uppercase;}
.region-card h3,.loc-card h3{font-size:28px;margin-top:9px;}
.region-card .flavor,.loc-card .role{font-family:var(--serif);font-size:17px;color:var(--teal-deep);margin:9px 0 19px;}
.region-card p,.loc-card .addr{font-size:14px;line-height:1.9;color:var(--muted);}
.region-card .ph{aspect-ratio:16/8;margin-top:27px;}
.closer{position:relative;min-height:600px;overflow:hidden;}
.bgph{position:absolute;inset:0;}
.bgph .ph{height:100%;border:0;opacity:.38;}
.bgph .ph::after{display:none;}
.closer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--paper-2),rgba(232,228,218,.72),rgba(232,228,218,.3));}
.closer .in{position:relative;z-index:1;padding-top:130px;}
.closer .tag{margin-top:44px;font-family:var(--serif);font-size:clamp(22px,3vw,38px);color:var(--teal-deep);}

/* Truth page */
.t-hero{padding:175px 0 110px;}
.t-map{margin-top:58px;border:1px solid var(--line);background:var(--paper-3);padding:22px;}
.t-map svg{width:100%;height:auto;display:block;}
.seal-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:760px;margin:56px auto 0;}
.seal{border:1px solid var(--line);background:var(--paper);padding:25px;}
.seal .ph{aspect-ratio:3/1;margin-bottom:20px;}
.seal h3{font-size:19px;}
.seal p{color:var(--muted);font-size:14px;margin-top:8px;}
.law-close{max-width:700px;margin:42px auto 0;font-family:var(--serif);font-size:22px;line-height:1.7;color:var(--teal-deep);}
.seven{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin-top:58px;}
.step{min-height:185px;padding:24px 18px 24px 0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.step:nth-child(4n){border-right:0;padding-left:18px;}
.step:nth-child(4n+2),.step:nth-child(4n+3){padding-left:18px;}
.step .no{font:10px var(--mono);color:var(--copper-deep);letter-spacing:.12em;}
.step h3{font-size:21px;margin-top:24px;}
.step p{font-size:13px;color:var(--muted);margin-top:10px;}
.seven-close{margin-top:44px;font-family:var(--serif);font-size:21px;color:var(--teal-deep);}

/* Product matrix */
.c-hero{padding:180px 0 120px;}
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:65px;}
.m-card{border:1px solid var(--line);background:var(--paper-3);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;}
.m-card:hover{transform:translateY(-9px);box-shadow:18px 18px 0 rgba(47,98,93,.14);}
.m-card .ph{aspect-ratio:1/1;}
.m-body{padding:26px 24px 30px;}
.m-body .c-en{font:10px var(--mono);letter-spacing:.13em;color:var(--copper-deep);line-height:1.5;}
.m-body h3{font-size:27px;margin:7px 0;}
.m-body .expr{font-family:var(--serif);color:var(--teal-deep);font-size:16px;margin-bottom:20px;}
.m-list{border-top:1px solid var(--line);}
.m-list>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:12px;}
.m-list .k{font-family:var(--mono);color:var(--muted);font-size:10px;}
.m-list .x{text-align:right;}
.m-body .btn{margin-top:24px;}

/* Product detail */
.p-hero{padding:165px 0 120px;}
.p-top{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.p-top .ph{aspect-ratio:4/5;}
.p-top .product-photo::after{display:none;}
.v25-bean-carousel{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(23,32,34,.3);background:#3b2824;isolation:isolate;box-shadow:0 18px 44px rgba(43,33,26,.1);animation:v25-bean-float 6s ease-in-out infinite;touch-action:pan-y;cursor:grab;}
.v25-bean-carousel:active{cursor:grabbing;}
.v25-bean-track{position:absolute;inset:0;width:100%;height:100%;will-change:transform;}
.v25-bean-slide{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:hidden;z-index:1;transform:translate3d(0,10px,0) scale(.955) rotate(-.6deg);opacity:0;transition:transform 760ms cubic-bezier(.2,.75,.18,1),opacity 620ms ease;}
.v25-bean-slide.is-current{z-index:3;transform:translate3d(0,0,0) scale(1) rotate(0);opacity:1;}
.v25-bean-slide.is-outgoing{z-index:2;transform:translate3d(0,-12px,0) scale(1.035) rotate(.7deg);opacity:0;}
.v25-bean-slide.is-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.03);}
.v25-bean-slide.is-swatch{background:var(--bean-tone);}
.v25-bean-slide.is-swatch::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.1),transparent 48%,rgba(0,0,0,.09));}
.v25-bean-dots{position:absolute;z-index:3;right:16px;bottom:16px;display:flex;gap:7px;padding:8px 9px;background:rgba(248,246,241,.78);backdrop-filter:blur(7px);}
.v25-bean-dots button{width:7px;height:7px;padding:0;border:1px solid #486e68;border-radius:50%;background:transparent;cursor:pointer;transition:width .28s ease,background .28s ease,border-radius .28s ease;}
.v25-bean-dots button.is-current{width:23px;border-radius:99px;background:#c06b4d;border-color:#c06b4d;}
@keyframes v25-bean-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}
@media(prefers-reduced-motion:reduce){.v25-bean-carousel{animation:none}.v25-bean-track,.v25-bean-slide{transition:none}}

/* V26: turn story movement into an event-driven damped scroll, while the
   photographs keep their own cheap compositor-only breathing. */
body.v26-ready .v7-story-image{animation:v26-story-breathe 5.6s ease-in-out infinite;will-change:transform;}
body.v26-ready .v7-story-panel:nth-child(2) .v7-story-image{animation-delay:-1.3s;}
body.v26-ready .v7-story-panel:nth-child(3) .v7-story-image{animation-delay:-2.6s;}
body.v26-ready .v7-story-panel:nth-child(4) .v7-story-image{animation-delay:-3.8s;}
body.v26-ready .v7-story-panel:nth-child(5) .v7-story-image{animation-delay:-.7s;}
body.v26-ready .v7-story-panel:nth-child(6) .v7-story-image{animation-delay:-2.1s;}
body.v26-ready .v7-story-panel:nth-child(7) .v7-story-image{animation-delay:-3.3s;}
body.v26-ready .v7-story-panel:nth-child(8) .v7-story-image{animation-delay:-4.6s;}
@keyframes v26-story-breathe{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-6px,0) scale(1.012)}}
body.v26-ready.v26-opening-product .m-card{opacity:.28;filter:blur(1px);transform:translate3d(0,10px,0) scale(.975);transition:transform 390ms cubic-bezier(.2,.72,.2,1),opacity 260ms ease,filter 260ms ease;}
body.v26-ready.v26-opening-product .m-card.v26-opening-card{opacity:1;filter:none;transform:translate3d(0,-7px,0) scale(1.02);box-shadow:14px 18px 0 rgba(47,98,93,.14);}
body.v26-ready.v26-opening-product .m-card.v26-opening-card .ph{overflow:hidden;}
body.v26-ready.v26-opening-product .m-card.v26-opening-card .ph img{transition:transform 400ms cubic-bezier(.2,.72,.2,1),filter 400ms ease;transform:scale(1.06);}
body.v26-ready.v26-opening-product .m-card.v26-opening-card-0 .ph img{transform:translate3d(-1.5%,0,0) scale(1.06);}
body.v26-ready.v26-opening-product .m-card.v26-opening-card-1 .ph img{transform:translate3d(0,-1.5%,0) scale(1.06);}
body.v26-ready.v26-opening-product .m-card.v26-opening-card-2 .ph img{transform:translate3d(1.5%,0,0) scale(1.06);}

/* V27: keep the product index clean — image labels belong in the text, not
   as empty black strips laid over photography. */
body.v27-ready[data-page="coffee"] .m-card .ph::after{display:none;}

/* Only the active Origin card and its immediate neighbours breathe. This
   avoids eight simultaneous high-resolution filter layers during scroll. */
body.v27-ready .v7-story-image{animation:none!important;will-change:auto;}
body.v27-ready .v7-story-panel.is-near .v7-story-image{animation:v27-story-breathe 5.8s cubic-bezier(.42,0,.35,1) infinite;will-change:transform;}
body.v27-ready .v7-story-panel .v11-photo{filter:none!important;transition:opacity .46s ease,transform .62s cubic-bezier(.22,.72,.2,1)!important;}
body.v27-ready .v7-story-panel:not(.is-active) .v11-photo{opacity:.34!important;transform:scale(1.01)!important;}
body.v27-ready .v7-story-panel.is-active .v11-photo{opacity:1!important;transform:scale(1.035)!important;}

/* Real Jamaica geography, centred on the eastern Blue Mountain counties. */
body.v27-ready .v27-region-map{position:relative;overflow:hidden;height:clamp(330px,42vw,500px);border:1px solid var(--line);background:#dcebf0;}
body.v27-ready .v27-region-canvas,.v27-region-canvas .leaflet-container{width:100%;height:100%;font-family:var(--sans);background:#dcebf0;}
body.v27-ready .v27-region-canvas .leaflet-control-attribution{padding:2px 5px!important;background:rgba(248,246,241,.76)!important;color:#56706e!important;font:8px/1.2 var(--mono)!important;}
body.v27-ready .v27-region-canvas .leaflet-control-attribution a{color:#365f5e!important;text-decoration:none;}
body.v27-ready .v27-region-pin{width:0!important;height:0!important;border:0!important;background:transparent!important;overflow:visible!important;}
body.v27-ready .v27-region-pin button{position:absolute;left:0;top:0;display:flex;align-items:center;gap:6px;border:0;padding:4px 7px 4px 4px;color:#24423f;background:rgba(248,246,241,.93);box-shadow:0 3px 10px rgba(28,59,59,.14);font:10px var(--mono);letter-spacing:.03em;white-space:nowrap;cursor:pointer;transform:translate(-50%,calc(-100% - 17px));}
body.v27-ready .v27-region-pin button::after{content:"";position:absolute;left:50%;top:calc(100% + 3px);height:13px;border-left:1px dashed rgba(45,119,117,.8);}
body.v27-ready .v27-region-pin i{width:10px;height:10px;border:2px solid #f8f6f1;border-radius:50%;background:#c87355;box-shadow:0 0 0 2px rgba(200,115,85,.22);}
body.v27-ready .v27-region-pin button:hover{transform:translate(-50%,calc(-100% - 17px)) scale(1.05);}

/* No.1 dissolves between brew moments; Reserve advances in depth. */
.v27-product-carousel{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(23,32,34,.3);background:#203432;isolation:isolate;box-shadow:0 18px 44px rgba(43,33,26,.1);touch-action:pan-y;cursor:grab;}
.v27-product-carousel:active{cursor:grabbing;}
.v27-product-stack,.v27-product-frame{position:absolute;inset:0;width:100%;height:100%;}
.v27-product-frame{margin:0;opacity:0;z-index:1;overflow:hidden;pointer-events:none;transition:opacity 920ms cubic-bezier(.22,.72,.2,1),transform 1.05s cubic-bezier(.22,.72,.2,1),filter 780ms ease;}
.v27-product-frame img{width:100%;height:100%;object-fit:cover;}
.v27-product-frame.is-current{opacity:1;z-index:3;}
.v27-product-dots{position:absolute;right:16px;bottom:16px;z-index:5;display:flex;gap:7px;padding:8px 9px;background:rgba(248,246,241,.78);backdrop-filter:blur(7px);}
.v27-product-dots button{width:7px;height:7px;padding:0;border:1px solid #486e68;border-radius:50%;background:transparent;cursor:pointer;transition:width .28s ease,background .28s ease,border-radius .28s ease;}
.v27-product-dots button.is-current{width:23px;border-radius:99px;background:#c06b4d;border-color:#c06b4d;}
.v27-dissolve .v27-product-frame{transform:scale(1.075);filter:blur(5px);}
.v27-dissolve .v27-product-frame.is-current{transform:scale(1);filter:blur(0);}
.v27-dissolve .v27-product-frame.is-previous{transform:scale(.975);filter:blur(2px);}
.v27-depth .v27-product-frame{transform:translate3d(0,18px,0) scale(.91);filter:brightness(.72);}
.v27-depth .v27-product-frame.is-current{transform:translate3d(0,0,0) scale(1);filter:brightness(1);}
.v27-depth .v27-product-frame.is-previous{transform:translate3d(0,-12px,0) scale(1.04);filter:brightness(.88);}
@media(max-width:760px){body.v27-ready .v27-region-map{height:330px;}body.v27-ready .v27-region-pin button{font-size:8px;gap:4px;padding:3px 4px 3px 3px;}.v27-product-dots{right:10px;bottom:10px;}}
@media(prefers-reduced-motion:reduce){body.v27-ready .v7-story-panel.is-near .v7-story-image{animation:none}.v27-product-frame{transition:none}}

/* V28 restores the full eight-card choreography: every card floats, scales,
   desaturates and keeps its depth relationship while scroll progress glides. */
body.v28-ready .v7-story-image{animation:none!important;will-change:auto;}
body.v28-ready .v7-story-panel .v11-photo{transition:filter .72s cubic-bezier(.22,.61,.36,1),opacity .72s ease,transform .72s cubic-bezier(.22,.61,.36,1)!important;}
body.v28-ready .v7-story-panel:not(.is-active) .v11-photo{filter:grayscale(.9) saturate(.18) brightness(.9) contrast(.95)!important;opacity:.58!important;transform:scale(1.018)!important;}
body.v28-ready .v7-story-panel.is-active .v11-photo{filter:grayscale(0) saturate(1.1) brightness(1.04) contrast(1.03)!important;opacity:1!important;transform:scale(1.045)!important;}
body.v28-ready .v25-bean-carousel{animation:v25-bean-float 6s ease-in-out infinite;}
@media(prefers-reduced-motion:reduce){body.v28-ready .v25-bean-carousel{animation:none}}
.p-expr{font-family:var(--serif);color:var(--teal-deep);font-size:21px;margin-top:23px;letter-spacing:.03em;}
.back{display:inline-block;margin-bottom:34px;color:var(--muted);font:11px var(--mono);letter-spacing:.12em;text-decoration:none;}
.back:hover{color:var(--copper-deep);}
.notes-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:43px 0;margin-top:78px;text-align:center;}
.notes-band .en{font-family:var(--serif);font-size:clamp(17px,2.1vw,24px);letter-spacing:.08em;color:var(--ink);}
.notes-band .zh{margin-top:13px;color:var(--muted);letter-spacing:.12em;font-size:13px;}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px;}
.panel{border:1px solid var(--line);background:rgba(248,246,241,.75);padding:35px 30px;}
.panel h3{font-size:21px;}
.panel p{color:var(--muted);font-size:14px;line-height:1.9;}
.panel .p-en{margin-bottom:15px;}
.cup-row,.brew-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-bottom:1px solid var(--line-soft);padding:12px 0;font-size:13px;}
.cup-row:last-child,.brew-row:last-child{border-bottom:0;}
.cup-row .d-on{color:var(--teal-deep);letter-spacing:3px;}
.cup-row .d-off{color:#c5c0b5;letter-spacing:3px;}
.brew-row .k{font-family:var(--mono);font-size:10px;color:var(--muted);white-space:nowrap;}
.brew-row .x{text-align:right;}
.incup{margin-top:100px;text-align:center;}
.incup .verse{margin-top:35px;font-family:var(--serif);font-size:clamp(19px,2.3vw,28px);line-height:2;color:var(--ink);}
.incup .close{margin-top:43px;font-family:var(--serif);font-size:clamp(22px,2.8vw,34px);color:var(--teal-deep);line-height:1.5;}

/* Contact */
.ct-hero{padding:175px 0 100px;}
.world{background:var(--paper-3);border:1px solid var(--line);padding:32px 28px 18px;margin-top:58px;}
.world svg{width:100%;height:auto;}
.world .cap{text-align:right;margin-top:10px;}
.w-node{cursor:pointer;}
.w-node circle.dot{fill:var(--copper);transition:all .25s ease;}
.w-node.on circle.dot{fill:var(--teal-deep);}
.w-node circle.halo{fill:none;stroke:transparent;stroke-width:1.4;stroke-dasharray:3 4;}
.w-node.on circle.halo{stroke:var(--teal-deep);}
.w-node text{font:11px var(--mono);fill:var(--muted);letter-spacing:.03em;}
.loc-card{min-height:220px;margin-top:25px;}
.loc-card .role{margin:8px 0 15px;}
.loc-card .co{font-size:15px;font-weight:650;}
.social{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:58px;max-width:860px;}
.soc-card{border:1px solid var(--line);background:var(--paper);padding:35px 30px;text-align:center;}
.soc-card h3{font-size:22px;}
.soc-card .ph{aspect-ratio:1;max-width:190px;margin:25px auto 0;}
.soc-card p{color:var(--muted);font-size:13px;margin-top:15px;}
.biz .card h3{font-size:20px;}
.biz .card .ask{display:inline-block;margin-top:21px;font:11px var(--mono);letter-spacing:.12em;color:var(--copper-deep);text-decoration:none;border-bottom:1px solid var(--copper);padding-bottom:3px;}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:58px;}
.way{border-top:2px solid var(--teal);padding-top:22px;}
.way h3{font-size:21px;margin-top:7px;}
.way p{color:var(--muted);font-size:14px;margin-top:10px;}
.direct{margin-top:70px;border:1px solid var(--line);background:var(--paper-3);padding:42px 30px;text-align:center;}
.direct .row{font-family:var(--serif);font-size:clamp(18px,2.3vw,26px);letter-spacing:.02em;margin-top:12px;}
.direct .row a{color:var(--copper-deep);text-decoration:none;border-bottom:1px solid var(--copper);}

/* Footer */
footer{border-top:1px solid var(--line);padding:66px 0 76px;color:var(--muted);font-size:13px;background:var(--paper);}
.foot-in{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;}
.foot-brand{font-family:var(--serif);color:var(--ink);font-size:20px;letter-spacing:.05em;}
.foot-en{font:10px var(--mono);letter-spacing:.14em;color:var(--copper-deep);margin-top:7px;text-transform:uppercase;}
.foot-tag{margin-top:13px;max-width:390px;}
.foot-nav{display:flex;gap:19px;flex-wrap:wrap;}
.foot-nav a{color:var(--muted);text-decoration:none;}
.foot-nav a:hover{color:var(--copper-deep);}
.foot-meta{margin-top:25px;font:10px var(--mono);color:#909b9b;letter-spacing:.03em;}

/* Small motion layer */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);}
.js .reveal.in-view{opacity:1;transform:none;}
.cursor-glow{position:fixed;width:220px;height:220px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(201,103,69,.11),transparent 68%);transform:translate(-50%,-50%);mix-blend-mode:multiply;opacity:0;transition:opacity .35s ease;}
.cursor-glow.on{opacity:1;}
body.is-leaving{opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;}
@keyframes draw-mark{to{stroke-dashoffset:0;}}

/* Responsive */
@media(max-width:1020px){
  .wrap{padding-left:30px;padding-right:30px;}
  .nav-in{padding-left:30px;padding-right:30px;}
  .nav-links{gap:17px;}
  .cards.c4{grid-template-columns:repeat(2,1fr);}
  .region-stage{grid-template-columns:1fr;}
  .region-card{min-height:0;}
  .o-hero{padding-left:30px;grid-template-columns:1fr 1.2fr;}
  .o-left{padding-left:0;}
  .p-top{gap:45px;}
}
@media(max-width:760px){
  :root{--nav-height:70px;}
  .wrap{padding-left:20px;padding-right:20px;}
  nav.top{background:rgba(241,238,230,.94);}
  .nav-in{min-height:70px;padding:12px 20px;flex-wrap:wrap;}
  .nav-brand{font-size:18px;}
  .menu-toggle{display:block;margin-left:auto;}
  .nav-links{display:none;order:4;width:100%;padding:11px 0 4px;border-top:1px solid var(--line);gap:14px;justify-content:flex-start;}
  .lang{margin-left:0;}
  .nav-in.nav-open .nav-links{display:flex;}
  .nav-in.nav-open{padding-bottom:15px;}
  section{padding:100px 0;}
  .hero{min-height:760px;padding-top:145px;}
  .hero-bg::after{background:linear-gradient(90deg,rgba(241,238,230,.92),rgba(241,238,230,.58));}
  .hero-in{padding-left:20px!important;padding-right:20px!important;}
  .hero-in::after{right:20px;bottom:-60px;}
  .logo-stage,.split,.tl-grid,.p-top,.duo{grid-template-columns:1fr;gap:35px;}
  .m-anim{padding:30px;}
  .mego{padding-left:22px;}
  .bear-key{align-items:flex-start;flex-direction:column;}
  .bear-close{justify-content:flex-start;}
  .o-hero{min-height:auto;padding:130px 20px 70px;display:flex;flex-direction:column;align-items:stretch;gap:35px;}
  .o-right .ph{height:54vh;min-height:340px;}
  .tl-grid>.ph{aspect-ratio:16/10;}
  .seal-row,.social,.ways{grid-template-columns:1fr;}
  .seven{grid-template-columns:repeat(2,1fr);}
  .step:nth-child(4n){padding-left:0;border-right:1px solid var(--line);}
  .step:nth-child(2n){padding-left:18px;border-right:0;}
  .step:nth-child(4n+2),.step:nth-child(4n+3){padding-left:0;}
  .step:nth-child(2n+1){padding-right:18px;}
  .step:nth-child(2n){padding-left:18px;}
  .matrix{grid-template-columns:1fr;gap:22px;}
  .m-card .ph{aspect-ratio:16/9;}
  .p-top .ph{order:-1;aspect-ratio:16/10;}
  .world{padding:20px 15px 15px;overflow:hidden;}
  .world svg{min-width:640px;transform:translateX(-45px);}
  .foot-in{display:block;}
  .foot-in>div+div{margin-top:28px;}
}

/* V21: retain the longer, quieter v19 hand-off: paper first, then mist,
   without a rule. The hero itself no longer turns cyan at the bottom. */
body.v21-ready[data-page="origin"] header.o-hero::after{
  height:31vh;
  background:linear-gradient(180deg,rgba(248,246,241,0),rgba(248,246,241,.96) 94%);
}
body.v21-ready[data-page="origin"] .v10-story-bridge{
  height:clamp(148px,22vh,260px);
  background:linear-gradient(180deg,
    var(--paper) 0%,
    #f4f3ee 15%,
    #e8ece7 38%,
    #cfdfdc 67%,
    rgb(165,199,199) 100%);
}
body.v21-ready[data-page="origin"] .v7-story-stage{
  background-image:linear-gradient(180deg,rgba(165,199,199,.18),rgba(165,199,199,0) 18%);
}

/* V21: only the live OpenStreetMap iframe is visible. No SVG fallback or
   low-opacity transition is allowed underneath it. */
body.v21-ready .v20-live-map{background:#a9d8e5;}
body.v21-ready .v20-osm-frame{opacity:1!important;transform:none!important;transition:none!important;}
body.v21-ready .v20-live-map.is-moving .v20-osm-frame{opacity:1!important;transform:none!important;}
@media(max-width:480px){
  h1{font-size:clamp(40px,13vw,62px);}
  h2{font-size:clamp(29px,10vw,43px);}
  .cards.c4,.cards.c3,.cards.c2{grid-template-columns:1fr;}
  .facts{grid-template-columns:1fr 1fr;}
  .facts .fact:nth-child(odd){padding-right:14px;}
  .facts .fact:nth-child(even){padding-left:14px;}
  .seven{grid-template-columns:1fr;}
  .step,.step:nth-child(2n),.step:nth-child(4n),.step:nth-child(4n+2),.step:nth-child(4n+3){padding-left:0;padding-right:0;border-right:0;}
  .nav-brand{font-size:17px;}
  .lang a,.lang .cur{padding-left:7px;padding-right:7px;}
}

/* V6: the V2 editorial system, with one restrained Jamaica origin mark. */
body.v6-ready{
  --paper:#f3f0e9;
  --paper-2:#e9e5dc;
  --paper-3:#fbfaf6;
  --ink:#25383a;
  --muted:#687878;
  --line:rgba(37,56,58,.18);
  --teal:#789f97;
  --teal-deep:#376962;
  --copper:#c87355;
  --copper-deep:#a3523d;
}
body.v6-ready .hero{background:var(--paper);}
body.v6-ready .hero-bg .ph{opacity:.22;filter:saturate(.58) contrast(.96);}
body.v6-ready .hero-bg::after{background:linear-gradient(90deg,var(--paper) 2%,rgba(243,240,233,.9) 34%,rgba(243,240,233,.38) 74%,rgba(243,240,233,.12));}
body.v6-ready .hero-in{z-index:2;}
.v6-map{position:absolute!important;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.62;mix-blend-mode:multiply;}
body.v6-ready .hero-bg{z-index:0;}
@media(max-width:760px){
  .v6-map{opacity:.3;}
  body.v6-ready .hero-bg .ph{opacity:.12;}
}

/* ========================================================================
   V7 ORIGIN STORY
   A pinned four-frame scroll sequence for the Origin page. Each panel is
   a replaceable visual slot; the current CSS artwork is only a placeholder
   until real Jamaica photography is supplied.
   ======================================================================== */
body.v7-ready .v7-story{height:440vh;margin:0;padding:0;background:var(--paper);position:relative;border-top:1px solid var(--line);}
.v7-story-stage{position:sticky;top:0;height:100vh;min-height:640px;overflow:hidden;isolation:isolate;background:var(--paper);}
.v7-story-stage::before{content:"ORIGIN / 01—04";position:absolute;left:8vw;bottom:34px;z-index:4;font:10px var(--mono);letter-spacing:.2em;color:var(--muted);}
.v7-story-heading{position:absolute;left:max(24px,8vw);top:17vh;width:min(270px,24vw);z-index:5;}
.v7-story-heading .kicker{margin-bottom:18px;}
.v7-story-heading h2{font-size:clamp(35px,4.6vw,66px);line-height:1.05;letter-spacing:-.055em;margin-bottom:18px;}
.v7-story-heading p{color:var(--muted);font-size:14px;line-height:1.9;}
.v7-story-hint{display:block;margin-top:36px;color:var(--copper-deep);font:9px var(--mono);letter-spacing:.14em;}
.v7-story-canvas{position:absolute;inset:0 4vw 0 27vw;z-index:2;}
.v7-story-panel{position:absolute;left:50%;top:50%;width:min(64vw,760px);height:min(62vh,560px);transform:translate3d(calc(-50% + var(--story-x,0%)),calc(-50% + var(--story-y,0%)),0) rotate(var(--story-r,0deg)) scale(var(--story-s,1));opacity:var(--story-o,0);z-index:var(--story-z,1);will-change:transform,opacity;}
.v7-story-panel-0{clip-path:polygon(7% 0,100% 7%,94% 93%,0 100%);}
.v7-story-panel-1{clip-path:polygon(0 8%,91% 0,100% 94%,7% 100%);}
.v7-story-panel-2{clip-path:polygon(8% 0,100% 9%,92% 100%,0 91%);}
.v7-story-panel-3{clip-path:polygon(0 6%,94% 0,100% 92%,7% 100%);}
.v7-story-image{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(37,56,58,.28);background-color:#d9d3c6;box-shadow:12px 16px 0 rgba(55,105,98,.12);}
.v7-story-image::before{content:"";position:absolute;inset:0;opacity:.3;background:repeating-linear-gradient(112deg,transparent 0 24px,rgba(255,255,255,.35) 25px,transparent 26px 52px);mix-blend-mode:screen;}
.v7-story-image::after{content:"";position:absolute;left:9%;right:9%;bottom:22%;height:1px;background:rgba(255,255,255,.55);box-shadow:0 -48px 0 rgba(255,255,255,.2);}
.v7-story-panel-0 .v7-story-image{background:linear-gradient(158deg,transparent 0 42%,rgba(246,242,232,.72) 42.5% 43.5%,transparent 44%),linear-gradient(164deg,#204646 0 33%,#77978c 33.5% 42%,#d7d1c5 42.5% 100%);}
.v7-story-panel-1 .v7-story-image{background:radial-gradient(circle at 23% 34%,#b45d47 0 5%,transparent 5.7%),radial-gradient(circle at 43% 57%,#8f3f3e 0 6%,transparent 6.7%),radial-gradient(circle at 72% 30%,#c97755 0 4.5%,transparent 5.2%),linear-gradient(145deg,#e6c4a9,#9b5460 58%,#4d5f57);}
.v7-story-panel-2 .v7-story-image{background:linear-gradient(135deg,rgba(69,85,70,.7) 0 31%,transparent 31.5%),linear-gradient(20deg,#9c7658 0 40%,#d8ae8f 40.5% 58%,#efe3d2 58.5%),radial-gradient(ellipse at 62% 45%,#7f4f3d 0 12%,transparent 12.5%);}
.v7-story-panel-3 .v7-story-image{background:radial-gradient(ellipse at 58% 59%,#f4e9d2 0 15%,transparent 15.7%),radial-gradient(ellipse at 58% 62%,#b66c4e 0 23%,transparent 23.7%),linear-gradient(145deg,#314f4d,#90aaa0 52%,#d8c5a4);}
.v7-story-image-label{position:absolute;left:24px;top:22px;color:rgba(255,255,255,.86);font:10px var(--mono);letter-spacing:.2em;z-index:2;}
.v7-story-number{position:absolute;right:24px;top:22px;color:rgba(255,255,255,.8);font:11px var(--mono);letter-spacing:.15em;z-index:2;}
.v7-story-caption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:42px 28px 24px;color:#f8f6f0;background:linear-gradient(transparent,rgba(20,35,35,.82));}
.v7-story-caption b{font:clamp(20px,2.3vw,32px) var(--serif);font-weight:500;}
.v7-story-caption p{max-width:420px;margin-top:5px;font-size:12px;line-height:1.7;color:rgba(248,246,240,.78);}
.v7-story-panel:not(.is-active) .v7-story-image{filter:saturate(.72);}
.v7-story-panel:not(.is-active) .v7-story-caption{opacity:.6;}
.v7-story-progress{position:absolute;right:4.5vw;top:50%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateY(-50%);}
.v7-story-dot{display:block;width:4px;height:22px;border-radius:4px;background:rgba(62,112,106,.26);transition:height .35s ease,background .35s ease,transform .35s ease;}
.v7-story-dot.is-active{height:42px;background:var(--copper);transform:scaleX(1.25);}

@media(max-width:760px){
  body.v7-ready .v7-story{height:420vh;}
  .v7-story-stage{min-height:700px;}
  .v7-story-heading{left:20px;right:48px;top:120px;width:auto;}
  .v7-story-heading h2{font-size:clamp(36px,11vw,52px);}
  .v7-story-heading p{font-size:13px;max-width:280px;}
  .v7-story-hint{margin-top:18px;font-size:8px;}
  .v7-story-canvas{inset:0;}
  .v7-story-panel{width:84vw;height:42vh;min-height:270px;top:65%;}
  .v7-story-caption{padding:34px 20px 18px;}
  .v7-story-caption b{font-size:23px;}
  .v7-story-caption p{font-size:11px;}
  .v7-story-progress{right:18px;top:62%;gap:9px;}
  .v7-story-dot{height:16px;}
  .v7-story-dot.is-active{height:30px;}
  .v7-story-stage::before{left:20px;bottom:22px;font-size:8px;}
}

/* V8: image, left copy and background color share one eased scroll state. */
body.v8-ready .v7-story-stage{background-color:var(--story-bg,var(--paper));transition:background-color .12s linear;}
body.v8-ready .v8-story-info{position:absolute;left:max(24px,8vw);top:17vh;width:min(290px,24vw);height:52vh;z-index:7;}
body.v8-ready .v8-story-overline{display:block;color:var(--story-ink,rgba(255,255,255,.74));font:10px var(--mono);letter-spacing:.2em;transition:color .25s ease;}
body.v8-ready .v8-story-info-card{position:absolute;left:0;top:34px;width:100%;opacity:var(--info-o,0);transform:translateY(var(--info-y,0));filter:blur(var(--info-blur,0));transition:opacity .18s linear,filter .25s ease;pointer-events:none;}
body.v8-ready .v8-story-info-card.is-active{filter:blur(0)!important;}
body.v8-ready .v8-story-info-card h2{margin:0 0 20px;font-size:clamp(44px,5.7vw,86px);line-height:.95;letter-spacing:-.07em;color:#f6f0dc;}
body.v8-ready .v8-story-info-card p{max-width:330px;color:rgba(255,255,255,.82);font-size:15px;line-height:1.9;}
body.v8-ready .v8-story-info-card[data-story-info-index="0"] h2,
body.v8-ready .v8-story-info-card[data-story-info-index="0"] p{color:#1f4445;}
body.v8-ready .v8-story-info-card[data-story-info-index="3"] h2,
body.v8-ready .v8-story-info-card[data-story-info-index="3"] p{color:#314d4c;}
body.v8-ready .v8-story-info-kicker{display:block;margin-bottom:18px;color:rgba(255,255,255,.72);font:10px var(--mono);letter-spacing:.16em;}
body.v8-ready .v8-story-info-card[data-story-info-index="0"] .v8-story-info-kicker,
body.v8-ready .v8-story-info-card[data-story-info-index="3"] .v8-story-info-kicker{color:rgba(31,68,69,.68);}
body.v8-ready .v8-story-cta{display:inline-flex;align-items:center;gap:10px;margin-top:32px;color:#fff;font:11px var(--mono);letter-spacing:.14em;font-weight:600;}
body.v8-ready .v8-story-info-card[data-story-info-index="0"] .v8-story-cta,
body.v8-ready .v8-story-info-card[data-story-info-index="3"] .v8-story-cta{color:#a3523d;}
body.v8-ready .v8-story-cta i{font-size:18px;font-style:normal;line-height:.5;}
body.v8-ready .v8-story-hint{position:absolute;left:0;bottom:0;margin:0;color:var(--story-ink,rgba(255,255,255,.72));transition:color .25s ease;}
body.v8-ready .v7-story-caption{display:none;}
body.v8-ready .v7-story-image{transition:filter .45s ease,box-shadow .45s ease;}
body.v8-ready .v7-story-panel.is-active .v7-story-image{filter:saturate(1.08) contrast(1.02);box-shadow:18px 22px 0 rgba(28,59,59,.16);}
body.v8-ready .v7-story-panel:not(.is-active) .v7-story-image{filter:saturate(.66) brightness(.95);}

@media(max-width:760px){
  body.v8-ready .v8-story-info{left:20px;right:52px;top:112px;width:auto;height:330px;}
  body.v8-ready .v8-story-overline{font-size:8px;}
  body.v8-ready .v8-story-info-card{top:26px;}
  body.v8-ready .v8-story-info-card h2{font-size:clamp(42px,12vw,58px);margin-bottom:13px;}
  body.v8-ready .v8-story-info-card p{font-size:13px;line-height:1.7;max-width:260px;}
  body.v8-ready .v8-story-cta{margin-top:20px;font-size:9px;}
  body.v8-ready .v8-story-hint{font-size:8px;}
}

/* V9: a separated three-image rail with quiet idle motion. */
body.v9-ready .v7-story-stage{background-color:var(--story-bg,var(--paper));transition:background-color .2s linear;}
body.v9-ready .v7-story-canvas{inset:0 4vw 0 39vw;}
body.v9-ready .v7-story-panel{width:min(49vw,690px);height:min(38vh,380px);}
body.v9-ready .v7-story-panel .v7-story-image{filter:grayscale(.86) saturate(.16) brightness(.94) contrast(.94);box-shadow:10px 14px 0 rgba(28,59,59,.08);transition:filter .72s cubic-bezier(.22,.61,.36,1),box-shadow .72s ease;}
body.v9-ready .v7-story-panel:not(.is-active) .v7-story-image{filter:grayscale(.94) saturate(.12) brightness(.94) contrast(.94);}
body.v9-ready .v7-story-panel.is-active .v7-story-image{filter:grayscale(0) saturate(1.1) brightness(1.03) contrast(1.04);box-shadow:18px 22px 0 rgba(28,59,59,.14);}
body.v9-ready .v7-story-panel:not(.is-active) .v7-story-caption{opacity:0;}
body.v9-ready .v7-story-image::before{animation:v9-rail-lines 9s ease-in-out infinite alternate;}
body.v9-ready .v7-story-info-card{transition:opacity .32s cubic-bezier(.22,.61,.36,1),filter .42s ease;}
body.v9-ready .v8-story-info-card.is-active{filter:blur(0)!important;}

@keyframes v9-rail-lines{
  from{transform:translate3d(-8px,0,0);opacity:.22;}
  to{transform:translate3d(8px,4px,0);opacity:.36;}
}

@media(max-width:760px){
  body.v9-ready .v7-story-canvas{inset:0;}
  body.v9-ready .v7-story-panel{width:78vw;height:min(36vh,300px);top:65%;}
  body.v9-ready .v7-story-info{top:112px;}
}

/* V10: eight chapters, a soft bridge from the original Origin section, and
   one continuous rail for every image state. */
body.v10-ready .v7-story{height:820vh;margin-top:-8vh;background:var(--paper);}
body.v10-ready .v10-story-bridge{height:16vh;min-height:120px;position:relative;z-index:3;background:linear-gradient(180deg,var(--paper) 0%,#e3e5dd 38%,rgb(165,199,199) 100%);}
body.v10-ready .v10-story-bridge::after{content:"ORIGIN / BLUE MOUNTAIN";position:absolute;left:8vw;bottom:24px;color:rgba(43,74,74,.55);font:10px var(--mono);letter-spacing:.2em;}
body.v10-ready .v7-story-stage{background-color:var(--story-bg,var(--paper));}
body.v10-ready .v7-story-stage::before{content:"ORIGIN / 01—08";}
body.v10-ready .v7-story-canvas{inset:0 4vw 0 39vw;}
body.v10-ready .v7-story-panel{width:min(49vw,690px);height:min(38vh,380px);}
body.v10-ready .v7-story-panel .v7-story-image{filter:grayscale(.92) saturate(.12) brightness(.94) contrast(.94);box-shadow:10px 14px 0 rgba(28,59,59,.08);transition:filter .8s cubic-bezier(.22,.61,.36,1),box-shadow .8s ease;}
body.v10-ready .v7-story-panel:not(.is-active) .v7-story-image{filter:grayscale(.96) saturate(.1) brightness(.94) contrast(.94);}
body.v10-ready .v7-story-panel.is-active .v7-story-image{filter:grayscale(0) saturate(1.1) brightness(1.03) contrast(1.04);box-shadow:18px 22px 0 rgba(28,59,59,.14);}
body.v10-ready .v7-story-panel:not(.is-active) .v7-story-caption{opacity:0;}
body.v10-ready .v7-story-image::before{animation:v10-rail-lines 10s ease-in-out infinite alternate;}
body.v10-ready .v8-story-info{width:min(320px,25vw);}
body.v10-ready .v8-story-info-card h2{color:var(--card-ink,#f6f0dc)!important;}
body.v10-ready .v8-story-info-card p{color:var(--card-soft,rgba(255,255,255,.8))!important;}
body.v10-ready .v8-story-info-kicker{color:var(--card-soft,rgba(255,255,255,.72))!important;}
body.v10-ready .v8-story-cta{color:var(--card-accent,#f2d989)!important;}
body.v10-ready .v7-story-progress{gap:10px;}

body.v10-ready .v7-story-panel-0 .v7-story-image{background:linear-gradient(158deg,transparent 0 42%,rgba(246,242,232,.72) 42.5% 43.5%,transparent 44%),linear-gradient(164deg,#204646 0 33%,#77978c 33.5% 42%,#d7d1c5 42.5% 100%);}
body.v10-ready .v7-story-panel-1 .v7-story-image{background:radial-gradient(circle at 28% 44%,rgba(201,103,69,.8) 0 2%,transparent 2.4%),radial-gradient(circle at 63% 27%,rgba(201,103,69,.65) 0 1.6%,transparent 2%),linear-gradient(152deg,transparent 0 27%,rgba(238,230,210,.82) 27.5% 28%,transparent 28.5%),linear-gradient(164deg,#477a73 0 32%,#8fb1a2 32.5% 62%,#d9d6c7 62.5%);}
body.v10-ready .v7-story-panel-2 .v7-story-image{background:radial-gradient(circle at 23% 34%,#b45d47 0 5%,transparent 5.7%),radial-gradient(circle at 43% 57%,#8f3f3e 0 6%,transparent 6.7%),radial-gradient(circle at 72% 30%,#c97755 0 4.5%,transparent 5.2%),linear-gradient(145deg,#e6c4a9,#9b5460 58%,#4d5f57);}
body.v10-ready .v7-story-panel-3 .v7-story-image{background:linear-gradient(135deg,rgba(69,85,70,.7) 0 31%,transparent 31.5%),linear-gradient(20deg,#9c7658 0 40%,#d8ae8f 40.5% 58%,#efe3d2 58.5%),radial-gradient(ellipse at 62% 45%,#7f4f3d 0 12%,transparent 12.5%);}
body.v10-ready .v7-story-panel-4 .v7-story-image{background:radial-gradient(ellipse at 25% 40%,#c4764e 0 5%,transparent 5.5%),radial-gradient(ellipse at 48% 64%,#8d5540 0 6%,transparent 6.5%),radial-gradient(ellipse at 73% 35%,#d69a63 0 4.5%,transparent 5%),linear-gradient(145deg,#d7c4a9 0 35%,#9e8972 35.5% 58%,#4c5d55 58.5%);}
body.v10-ready .v7-story-panel-5 .v7-story-image{background:radial-gradient(ellipse at 62% 58%,rgba(238,191,118,.85) 0 12%,transparent 12.7%),radial-gradient(ellipse at 62% 58%,#6e4939 0 24%,transparent 24.7%),linear-gradient(155deg,#333e3b 0 34%,#7e5744 34.5% 70%,#c17b55 70.5%);}
body.v10-ready .v7-story-panel-6 .v7-story-image{background:radial-gradient(ellipse at 56% 60%,#f5ead5 0 14%,transparent 14.7%),radial-gradient(ellipse at 56% 62%,#b96e50 0 23%,transparent 23.7%),linear-gradient(145deg,#345654,#87a9a0 52%,#dcc29e);}
body.v10-ready .v7-story-panel-7 .v7-story-image{background:radial-gradient(ellipse at 58% 59%,#f4e9d2 0 15%,transparent 15.7%),radial-gradient(ellipse at 58% 62%,#b66c4e 0 23%,transparent 23.7%),linear-gradient(145deg,#314f4d,#90aaa0 52%,#d8c5a4);}

@keyframes v10-rail-lines{
  from{transform:translate3d(-9px,-2px,0);opacity:.2;}
  to{transform:translate3d(9px,5px,0);opacity:.36;}
}

@media(max-width:760px){
  body.v10-ready .v7-story{height:760vh;margin-top:-42px;}
  body.v10-ready .v10-story-bridge{height:110px;min-height:0;}
  body.v10-ready .v10-story-bridge::after{left:20px;bottom:18px;font-size:8px;}
  body.v10-ready .v7-story-canvas{inset:0;}
  body.v10-ready .v7-story-panel{width:78vw;height:min(36vh,300px);top:65%;}
  body.v10-ready .v8-story-info{left:20px;right:52px;top:112px;width:auto;}
}

/* V11: real generated imagery, clearer hierarchy and quiet perpetual float. */
body.v11-ready .hero-bg .ph{background-image:url('assets/generated/brand-hero-blue-mountain.png');background-size:cover;background-position:center;}
body.v11-ready .bear-figure .ph{background-image:url('assets/generated/brand-mengo-bear-concept.png');background-size:cover;background-position:center 40%;}
body.v11-ready .v7-story-image{animation:v11-float 8.4s ease-in-out infinite;will-change:transform;}
body.v11-ready .v7-story-panel:nth-child(2) .v7-story-image{animation-delay:-2.1s;animation-duration:9.1s;}
body.v11-ready .v7-story-panel:nth-child(3) .v7-story-image{animation-delay:-4.8s;animation-duration:8.8s;}
body.v11-ready .v7-story-panel:nth-child(4) .v7-story-image{animation-delay:-1.3s;animation-duration:10.2s;}
body.v11-ready .v7-story-panel:nth-child(5) .v7-story-image{animation-delay:-6.2s;animation-duration:9.6s;}
body.v11-ready .v7-story-panel:nth-child(6) .v7-story-image{animation-delay:-3.4s;animation-duration:8.9s;}
body.v11-ready .v7-story-panel:nth-child(7) .v7-story-image{animation-delay:-5.7s;animation-duration:10.4s;}
body.v11-ready .v7-story-panel:nth-child(8) .v7-story-image{animation-delay:-7.1s;animation-duration:9.3s;}
body.v11-ready .v11-photo{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;object-fit:cover;opacity:.95;transition:filter .8s cubic-bezier(.22,.61,.36,1),opacity .8s ease;}
body.v11-ready .v7-story-panel:not(.is-active) .v11-photo{filter:grayscale(.96) saturate(.1) brightness(.94) contrast(.94);opacity:.72;}
body.v11-ready .v7-story-panel.is-active .v11-photo{filter:grayscale(0) saturate(1.05) brightness(1.02) contrast(1.02);opacity:1;}
body.v11-ready .v8-story-info-card{transition:opacity .32s cubic-bezier(.22,.61,.36,1),transform .48s cubic-bezier(.22,.61,.36,1),filter .38s ease;}
body.v11-ready .v8-story-info-card.is-active{filter:blur(0)!important;}
body.v11-ready .v8-story-info-card h2{max-width:340px;}
body.v11-ready .v11-xhs-link{color:var(--copper-deep);text-decoration:none;border-bottom:1px solid rgba(163,82,61,.45);transition:color .2s ease,border-color .2s ease;}
body.v11-ready .v11-xhs-link:hover{color:var(--teal-deep);border-color:var(--teal-deep);}
body.v11-ready .v11-social-profile{display:block;width:max-content;margin:14px auto 0;font-size:13px;}

@keyframes v11-float{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(0,-5px,0) rotate(.22deg);}
}

@media(max-width:760px){
  body.v11-ready .v11-photo{object-position:center;}
  body.v11-ready .v11-social-profile{font-size:12px;}
}

/* V13: real Blue Mountain photography, whole-frame motion and geographic maps. */
body.v13-ready[data-page="index"]::before{display:none;}
body.v13-ready .v6-map{display:none;}
body.v13-ready .hero-bg .ph{
  background-image:url('assets/photos/jamaica-blue-mountain-real.jpg');
  background-size:cover;
  background-position:68% center;
  clip-path:inset(0 0 0 31%);
  opacity:.95;
  filter:saturate(.92) contrast(1.02) brightness(1.04);
}
body.v13-ready .hero-bg .ph::before{display:none;}
body.v13-ready .hero-bg::after{background:linear-gradient(90deg,var(--paper) 0%,rgba(241,238,230,.99) 27%,rgba(241,238,230,.9) 42%,rgba(241,238,230,.28) 62%,rgba(241,238,230,.02) 100%);}
body.v13-ready .hero-in{isolation:isolate;}
body.v13-ready .hero-in::before{content:"";position:absolute;z-index:-1;inset:-40px 30% -35px -40px;background:linear-gradient(90deg,var(--paper) 0%,rgba(241,238,230,.96) 66%,rgba(241,238,230,0) 100%);filter:blur(10px);opacity:.78;pointer-events:none;}
body.v13-ready .hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:13vh;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(241,238,230,0),var(--paper));}

body.v13-ready .v7-story-panel{
  transform:translate3d(calc(-50% + var(--story-x,0%) + var(--story-idle-x,0px)),calc(-50% + var(--story-y,0%) + var(--story-idle-y,0px)),0) rotate(calc(var(--story-r,0deg) + var(--story-idle-r,0deg))) scale(var(--story-s,1));
}
body.v13-ready .v7-story-image::before,
body.v13-ready .v7-story-image::after{display:none;}
body.v13-ready .v7-story-panel-0 .v11-photo{object-position:center 54%;}
body.v13-ready .v7-story-panel .v11-photo{transition:filter .9s cubic-bezier(.22,.61,.36,1),opacity .9s ease;}

body.v13-ready .m-video-shell{min-height:250px;background:#193b39;border-color:rgba(37,56,58,.38);}
body.v13-ready .m-video-preview{opacity:.96;filter:saturate(.82) contrast(1.06) brightness(.9);}
body.v13-ready .m-mark{background:linear-gradient(180deg,rgba(14,45,43,.05),rgba(14,45,43,.34));}
body.v13-ready .m-mark .mline{stroke:#f3f0df;stroke-dasharray:1;stroke-dashoffset:1;animation:v13-draw-m 5.8s cubic-bezier(.22,.61,.36,1) infinite;}
body.v13-ready .m-mark svg{animation:v13-m-float 5.5s ease-in-out infinite;}
body.v13-ready .m-mark .m-cap{white-space:nowrap;}
body.v13-ready .m-video-open{top:14px;right:14px;bottom:auto;}
body.v13-ready .m-video-dialog-panel{box-shadow:0 28px 80px rgba(0,0,0,.34);}
body.v13-ready .m-video-full{min-height:280px;object-fit:contain;}

@keyframes v13-draw-m{
  0%{stroke-dashoffset:1;opacity:.45;}
  34%{stroke-dashoffset:0;opacity:1;}
  74%{stroke-dashoffset:0;opacity:1;}
  100%{stroke-dashoffset:-1;opacity:.3;}
}

/* Geographic map surfaces use local SVGs generated from country boundaries. */
body.v13-ready .v13-real-map{position:relative;overflow:hidden;background:var(--paper-3);border:1px solid var(--line);}
body.v13-ready .v13-real-map img{display:block;width:100%;height:auto;}
body.v13-ready .v13-jamaica-map{margin:-10px -10px 0;}
body.v13-ready .v13-world-map{margin:-6px -10px 0;}
body.v13-ready .v13-map-node{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--ink);font:11px var(--mono);letter-spacing:.04em;white-space:nowrap;cursor:pointer;transform:translate(-50%,-50%);padding:4px;}
body.v13-ready .v13-map-node i{display:block;width:12px;height:12px;border-radius:50%;background:var(--copper);border:2px solid rgba(248,246,241,.92);box-shadow:0 0 0 0 rgba(111,159,150,.5);transition:background .3s ease,box-shadow .3s ease,transform .3s ease;}
body.v13-ready .v13-map-node.on i{background:var(--teal-deep);box-shadow:0 0 0 8px rgba(111,159,150,.22);transform:scale(1.14);}
body.v13-ready .v13-map-node:hover i{transform:scale(1.2);}
body.v13-ready .v13-map-node span{padding:3px 5px;background:rgba(248,246,241,.84);}
body.v13-ready .v13-jamaica-map .v13-map-node span{font-size:10px;}

@media(max-width:760px){
  body.v13-ready .hero-bg .ph{clip-path:inset(0 0 0 13%);background-position:66% center;opacity:.65;}
  body.v13-ready .hero-in::before{inset:-20px 8% -20px -20px;opacity:.88;}
  body.v13-ready .hero::after{height:9vh;}
  body.v13-ready .m-video-shell{min-height:190px;}
  body.v13-ready .m-video-open{top:10px;right:10px;padding:8px 9px;font-size:8px;}
  body.v13-ready .m-mark .m-cap{font-size:9px;letter-spacing:.08em;}
  body.v13-ready .v13-map-node{font-size:9px;gap:4px;}
  body.v13-ready .v13-map-node i{width:10px;height:10px;}
  body.v13-ready .v13-jamaica-map{margin:-5px -5px 0;}
  body.v13-ready .v13-world-map{margin:-4px -5px 0;}
}

/* V12: cleaner labels, stronger hierarchy and a real Blue Mountain preview. */
body.v12-ready .hero-in::after,
body.v12-ready .v7-story-stage::before,
body.v12-ready .v10-story-bridge::after,
body.v12-ready .v8-story-cta,
body.v12-ready .v7-story-hint{display:none;}

body.v12-ready .hero-bg .ph{opacity:.68;filter:saturate(.72) contrast(.98) brightness(1.04);}
body.v12-ready .hero-bg::after{background:linear-gradient(90deg,var(--paper) 0%,rgba(243,240,233,.96) 25%,rgba(243,240,233,.72) 46%,rgba(243,240,233,.16) 78%,rgba(243,240,233,.04) 100%);}

body.v12-ready .v7-story-panel{transition:opacity .82s cubic-bezier(.22,.61,.36,1),filter .82s cubic-bezier(.22,.61,.36,1);}
body.v12-ready .v7-story-image{animation:v12-float 7.4s ease-in-out infinite;will-change:transform;}
body.v12-ready .v7-story-panel:nth-child(2) .v7-story-image{animation-delay:-1.9s;animation-duration:8.1s;}
body.v12-ready .v7-story-panel:nth-child(3) .v7-story-image{animation-delay:-4.6s;animation-duration:7.7s;}
body.v12-ready .v7-story-panel:nth-child(4) .v7-story-image{animation-delay:-1.1s;animation-duration:9.1s;}
body.v12-ready .v7-story-panel:nth-child(5) .v7-story-image{animation-delay:-5.8s;animation-duration:8.4s;}
body.v12-ready .v7-story-panel:nth-child(6) .v7-story-image{animation-delay:-3.2s;animation-duration:7.9s;}
body.v12-ready .v7-story-panel:nth-child(7) .v7-story-image{animation-delay:-5.1s;animation-duration:9.3s;}
body.v12-ready .v7-story-panel:nth-child(8) .v7-story-image{animation-delay:-6.8s;animation-duration:8.2s;}
body.v12-ready .v7-story-panel:not(.is-active) .v7-story-image{filter:grayscale(.96) saturate(.1) brightness(.92) contrast(.92);}
body.v12-ready .v7-story-panel.is-active .v7-story-image{filter:grayscale(0) saturate(1.14) brightness(1.05) contrast(1.05);}
body.v12-ready .v7-story-panel:not(.is-active) .v11-photo{opacity:.62;}
body.v12-ready .v7-story-panel.is-active .v11-photo{opacity:1;}

@keyframes v12-float{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(0,-8px,0) rotate(.36deg);}
}

body.v12-ready .m-anim{padding:20px;background:#f3f0e9;overflow:hidden;}
body.v12-ready .m-video-shell{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(37,56,58,.26);background:#203c3b;isolation:isolate;}
body.v12-ready .m-video-preview{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;opacity:.9;filter:saturate(.76) contrast(1.04);}
body.v12-ready .m-mark{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:linear-gradient(180deg,rgba(20,46,44,.12),rgba(20,46,44,.28));transition:opacity .35s ease;}
body.v12-ready .m-mark svg{width:min(300px,72%);filter:drop-shadow(0 4px 14px rgba(0,0,0,.18));animation:v12-m-float 5.5s ease-in-out infinite;}
body.v12-ready .m-mark .mline{stroke:#e9eee8;}
body.v12-ready .m-mark .m-name{margin-top:8px;color:#f6f0dc;opacity:1;animation:none;}
body.v12-ready .m-mark .m-cap{margin-top:14px;color:rgba(246,240,220,.8);}
body.v12-ready .m-video-open{position:absolute;right:16px;bottom:14px;z-index:4;border:1px solid rgba(246,240,220,.65);background:rgba(20,46,44,.72);color:#f6f0dc;padding:9px 12px;font:10px var(--mono);letter-spacing:.12em;cursor:pointer;transition:background .25s ease,border-color .25s ease;}
body.v12-ready .m-video-open:hover{background:var(--copper);border-color:var(--copper);}
body.v12-ready .m-video-dialog{width:min(94vw,1200px);max-width:none;margin:auto;border:0;padding:0;background:transparent;}
body.v12-ready .m-video-dialog::backdrop{background:rgba(14,28,28,.84);}
body.v12-ready .m-video-dialog-panel{position:relative;padding:12px;background:#101d1c;border:1px solid rgba(246,240,220,.25);}
body.v12-ready .m-video-full{display:block;width:100%;max-height:82vh;background:#000;}
body.v12-ready .m-video-close{position:absolute;right:12px;top:12px;z-index:2;border:1px solid rgba(246,240,220,.55);background:rgba(16,29,28,.75);color:#f6f0dc;padding:8px 10px;font:10px var(--mono);letter-spacing:.1em;cursor:pointer;}
body.v12-video-open .m-mark{opacity:0;}

@keyframes v12-m-float{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-5px) rotate(.6deg);}
}

@media(max-width:760px){
  body.v12-ready .hero-bg .ph{opacity:.48;}
  body.v12-ready .m-anim{padding:14px;}
  body.v12-ready .m-video-open{right:10px;bottom:10px;padding:8px 9px;font-size:8px;}
  body.v12-ready .m-video-dialog{width:96vw;}
}

/* V13 final cascade: this block intentionally comes after the inherited V12 layer. */
body.v13-ready .hero-bg .ph{opacity:.95;filter:saturate(.92) contrast(1.02) brightness(1.04);clip-path:inset(0 0 0 46%);background-position:68% center;}
body.v13-ready .hero-bg .ph::before{display:none;}
body.v13-ready .hero-bg::after{background:linear-gradient(90deg,var(--paper) 0%,rgba(241,238,230,.995) 31%,rgba(241,238,230,.93) 46%,rgba(241,238,230,.22) 68%,rgba(241,238,230,.02) 100%);}
body.v13-ready .hero-in::before{z-index:0;inset:-80px 18% -80px -70px;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 72%,rgba(241,238,230,.72) 92%,rgba(241,238,230,0) 100%);filter:blur(8px);opacity:.96;}
body.v13-ready .hero-in > *{position:relative;z-index:1;}
body.v13-ready .m-video-preview{opacity:.96;filter:saturate(.82) contrast(1.06) brightness(.9);}
body.v13-ready .m-mark .mline{stroke:#f3f0df;stroke-dasharray:1;stroke-dashoffset:1;animation:v13-draw-m 5.8s cubic-bezier(.22,.61,.36,1) infinite;}
body.v13-ready .m-video-open{top:14px;right:14px;bottom:auto;height:auto;min-height:0;}
body.v13-ready .m-mark .m-cap{white-space:nowrap;}

@media(max-width:760px){
  body.v13-ready .hero-bg .ph{clip-path:inset(0 0 0 18%);background-position:66% center;opacity:.68;}
  body.v13-ready .m-video-open{top:10px;right:10px;bottom:auto;}
}

/* V14 final cascade: use the supplied hero image, the user's own film and
   a clean mountain-led M chapter without the inherited placeholder label. */
body.v14-ready .hero-bg .ph{
  clip-path:none;
  background-image:url('assets/generated/brand-hero-blue-mountain.png');
  background-size:cover;
  background-position:center center;
  opacity:1;
  filter:saturate(1.02) contrast(1.03) brightness(1.02);
}
body.v14-ready .hero-bg::after{
  background:
    linear-gradient(90deg,
      var(--paper) 0%,
      var(--paper) 25%,
      rgba(241,238,230,.985) 34%,
      rgba(241,238,230,.82) 46%,
      rgba(241,238,230,.32) 62%,
      rgba(241,238,230,.06) 82%,
      rgba(241,238,230,0) 100%),
    linear-gradient(0deg,rgba(241,238,230,.18),rgba(241,238,230,0) 48%);
}
body.v14-ready .hero-in::before{
  inset:-82px 44% -92px -76px;
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 68%,rgba(241,238,230,.86) 86%,rgba(241,238,230,0) 100%);
  filter:blur(11px);
  opacity:.9;
}
body.v14-ready .m-anim::before{display:none;}
body.v14-ready .m-video-shell{background:#193b39 url('assets/generated/brand-hero-blue-mountain.png') center/cover no-repeat;}
body.v14-ready .m-video-preview{opacity:.9;filter:saturate(.94) contrast(1.04) brightness(.94);}
body.v14-ready .m-mark{background:linear-gradient(180deg,rgba(14,45,43,.08),rgba(14,45,43,.42));}
body.v14-ready .m-mark .mline{stroke:#f3f0df;stroke-dasharray:1;stroke-dashoffset:1;animation:v14-draw-m 6.8s cubic-bezier(.22,.61,.36,1) infinite;}
body.v14-ready .m-video-open{top:14px;right:14px;bottom:auto;height:auto;min-height:0;}
body.v14-ready .m-video-dialog-panel{box-shadow:0 28px 80px rgba(0,0,0,.34);}
body.v14-ready .m-video-full{min-height:280px;object-fit:contain;}
body.v14-video-open .m-mark{opacity:0;}
body.v14-ready .v7-story-panel-0 .v11-photo,
body.v14-ready .v7-story-panel-1 .v11-photo,
body.v14-ready .v7-story-panel-6 .v11-photo{object-position:center center;}

@keyframes v14-draw-m{
  0%,8%{stroke-dashoffset:1;opacity:.45;}
  34%{stroke-dashoffset:0;opacity:1;}
  72%,100%{stroke-dashoffset:0;opacity:1;}
}

@media(max-width:760px){
  body.v14-ready .hero-bg .ph{background-position:66% center;opacity:.86;}
  body.v14-ready .hero-bg::after{background:linear-gradient(90deg,var(--paper) 0%,rgba(241,238,230,.97) 42%,rgba(241,238,230,.5) 74%,rgba(241,238,230,.12) 100%),linear-gradient(0deg,rgba(241,238,230,.24),transparent 55%);}
  body.v14-ready .hero-in::before{inset:-28px 22% -28px -28px;opacity:.96;}
  body.v14-ready .m-video-open{top:10px;right:10px;bottom:auto;}
}

/* V15: clear guidance for accidental file:// opens. The normal desktop
   launcher uses localhost, so this stays invisible in the working version. */
body.v15-file-mode .v15-file-notice{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:5px;
  width:min(560px,calc(100vw - 32px));
  transform:translateX(-50%);
  padding:14px 18px;
  color:#f7f3e8;
  background:rgba(25,59,57,.94);
  border:1px solid rgba(246,240,220,.35);
  box-shadow:0 16px 42px rgba(0,0,0,.2);
  font:12px/1.5 var(--sans);
}
body.v15-file-mode .v15-file-notice b{font:11px var(--mono);letter-spacing:.08em;color:#f2d989;}
body.v15-file-mode .v15-file-notice span{opacity:.84;}

/* V16: the compact M card is a quiet mark, never a second video player.
   The whole card is the trigger; the film only exists inside the lightbox. */
body.v16-ready .m-video-shell{
  cursor:pointer;
  background:#193b39;
  border-color:rgba(37,56,58,.42);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),box-shadow .5s ease,background .5s ease;
}
body.v16-ready .m-video-shell:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(25,59,57,.16);background:#214845;}
body.v16-ready .m-video-shell:focus-visible{outline:2px solid var(--copper);outline-offset:5px;}
body.v16-ready .m-video-preview,
body.v16-ready .m-video-open{display:none!important;}
body.v16-ready .m-mark{background:linear-gradient(180deg,rgba(14,45,43,.02),rgba(14,45,43,.18));}
body.v16-ready .m-mark svg{animation:v16-m-float 4.8s ease-in-out infinite;}
body.v16-ready .m-mark .mline{stroke:#f3f0df;stroke-dasharray:1;stroke-dashoffset:1;animation:v16-draw-m 5.2s cubic-bezier(.22,.61,.36,1) -2.4s infinite;}
body.v16-video-open .m-mark{opacity:0;}
body.v16-ready .v13-real-map img{display:block;visibility:visible;}

@keyframes v16-draw-m{
  0%,8%{stroke-dashoffset:1;opacity:.36;}
  34%{stroke-dashoffset:0;opacity:1;}
  70%,100%{stroke-dashoffset:0;opacity:1;}
}
@keyframes v16-m-float{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(0,-8px,0) rotate(.7deg);}
}

body.v16-file-mode .v16-file-notice{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:1000;
  display:flex;
  flex-direction:column;
  gap:5px;
  width:min(560px,calc(100vw - 32px));
  transform:translateX(-50%);
  padding:14px 18px;
  color:#f7f3e8;
  background:rgba(25,59,57,.94);
  border:1px solid rgba(246,240,220,.35);
  box-shadow:0 16px 42px rgba(0,0,0,.2);
  font:12px/1.5 var(--sans);
}
body.v16-file-mode .v16-file-notice b{font:11px var(--mono);letter-spacing:.08em;color:#f2d989;}
body.v16-file-mode .v16-file-notice span{opacity:.84;}

/* V17: the final media pass. The small M card uses a dark, subtitle-free
   frame from the supplied film as a quiet affordance; the line mark remains
   the brightest element until the card is opened. */
body.v17-ready .m-video-shell{
  background:
    linear-gradient(180deg,rgba(13,38,37,.38),rgba(13,38,37,.68)),
    url('assets/video/coffee-mengo-m-preview.jpg') center/cover no-repeat;
  border-color:rgba(37,56,58,.5);
}
body.v17-ready .m-video-shell:hover{
  background:
    linear-gradient(180deg,rgba(13,38,37,.3),rgba(13,38,37,.6)),
    url('assets/video/coffee-mengo-m-preview.jpg') center/cover no-repeat;
}
body.v17-ready .m-video-preview,
body.v17-ready .m-video-open{display:none!important;}
body.v17-ready .m-mark{background:linear-gradient(180deg,rgba(13,38,37,.04),rgba(13,38,37,.24));}
body.v17-ready .m-mark svg{animation:v17-m-float 5.6s ease-in-out infinite;}
body.v17-ready .m-mark .mline{stroke:#f3f0df;stroke-width:1.7;stroke-dasharray:1;stroke-dashoffset:1;animation:v17-draw-m 6.2s cubic-bezier(.22,.61,.36,1) -2.2s infinite;}
body.v17-video-open .m-mark{opacity:0;}

/* Bring the Blue Mountain terrain closer to the copy without putting a
   hard photo edge through the headline. */
body.v17-ready .hero-bg .ph{
  background-position:58% center;
  transform:scale(1.035);
  transform-origin:center;
}
body.v17-ready .hero-bg::after{
  background:
    linear-gradient(90deg,
      var(--paper) 0%,
      var(--paper) 15%,
      rgba(241,238,230,.97) 25%,
      rgba(241,238,230,.78) 38%,
      rgba(241,238,230,.32) 56%,
      rgba(241,238,230,.06) 78%,
      rgba(241,238,230,0) 100%),
    linear-gradient(0deg,rgba(241,238,230,.18),rgba(241,238,230,0) 52%);
}
body.v17-ready .hero-in::before{
  inset:-92px 52% -104px -90px;
  background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 64%,rgba(241,238,230,.84) 84%,rgba(241,238,230,0) 100%);
  filter:blur(14px);
  opacity:.88;
}

/* The web photos have different compositions; these focal points keep the
   mountain ridges and coffee work visible in the wide moving frames. */
body.v17-ready .v7-story-panel-0 .v11-photo{object-position:center 54%;}
body.v17-ready .v7-story-panel-1 .v11-photo{object-position:center 48%;}
body.v17-ready .v7-story-panel-2 .v11-photo{object-position:center 54%;}
body.v17-ready .v7-story-panel-3 .v11-photo{object-position:center 50%;}
body.v17-ready .v7-story-panel-4 .v11-photo{object-position:center 46%;}
body.v17-ready .v7-story-panel-5 .v11-photo,
body.v17-ready .v7-story-panel-6 .v11-photo{object-position:center 52%;}
body.v17-ready .v7-story-panel-7 .v11-photo{object-position:center 50%;}

@keyframes v17-draw-m{
  0%,8%{stroke-dashoffset:1;opacity:.48;}
  34%{stroke-dashoffset:0;opacity:.86;}
  72%,100%{stroke-dashoffset:0;opacity:.86;}
}
@keyframes v17-m-float{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);}
  50%{transform:translate3d(0,-9px,0) rotate(.8deg);}
}

@media(max-width:760px){
  body.v17-ready .hero-bg .ph{background-position:61% center;transform:scale(1.02);}
  body.v17-ready .hero-in::before{inset:-30px 44% -36px -30px;opacity:.93;}
}

/* V18: the eight panels are now a visual journey, not a repeated image rail.
   Each frame gets its own subject and the panel stack has a calmer, wider
   breathing space so the active image can lead without swallowing its neighbors. */
body.v18-ready .v7-story-stage{background-color:var(--story-bg,var(--paper));transition:background-color .32s cubic-bezier(.22,.61,.36,1);}
body.v18-ready .v7-story-canvas{inset:0 6vw 0 38vw;}
body.v18-ready .v7-story-panel{width:min(52vw,780px);height:min(39vh,410px);}
body.v18-ready .v7-story-image{border:1px solid rgba(37,56,58,.25);box-shadow:16px 20px 0 rgba(28,59,59,.12);}
body.v18-ready .v7-story-image::before,
body.v18-ready .v7-story-image::after{display:none!important;}
body.v18-ready .v11-photo{transform:scale(1.018);transition:filter .72s cubic-bezier(.22,.61,.36,1),opacity .72s ease,transform .72s cubic-bezier(.22,.61,.36,1);}
body.v18-ready .v7-story-panel:not(.is-active) .v11-photo{filter:grayscale(.9) saturate(.18) brightness(.9) contrast(.95);opacity:.58;}
body.v18-ready .v7-story-panel.is-active .v11-photo{filter:grayscale(0) saturate(1.1) brightness(1.04) contrast(1.03);opacity:1;transform:scale(1.045);}
body.v18-ready .v7-story-panel:not(.is-active) .v7-story-image{box-shadow:8px 12px 0 rgba(28,59,59,.07);}
body.v18-ready .v7-story-panel.is-active .v7-story-image{box-shadow:20px 26px 0 rgba(28,59,59,.16);}
body.v18-ready .v7-story-image-label{font-size:9px;letter-spacing:.22em;text-shadow:0 1px 12px rgba(0,0,0,.24);}
body.v18-ready .v7-story-number{font-size:10px;text-shadow:0 1px 12px rgba(0,0,0,.24);}
body.v18-ready .v7-story-panel-0 .v11-photo{object-position:center 54%;}
body.v18-ready .v7-story-panel-1 .v11-photo{object-position:center 51%;}
body.v18-ready .v7-story-panel-2 .v11-photo{object-position:center 52%;}
body.v18-ready .v7-story-panel-3 .v11-photo{object-position:center 52%;}
body.v18-ready .v7-story-panel-4 .v11-photo{object-position:center 55%;}
body.v18-ready .v7-story-panel-5 .v11-photo{object-position:center 50%;}
body.v18-ready .v7-story-panel-6 .v11-photo{object-position:center 50%;}
body.v18-ready .v7-story-panel-7 .v11-photo{object-position:center 48%;}
body.v18-ready .v8-story-info-card{transition:opacity .38s cubic-bezier(.22,.61,.36,1),transform .58s cubic-bezier(.22,.61,.36,1),filter .42s ease;}
body.v18-ready .v8-story-info-card h2{max-width:330px;}
body.v18-ready .v7-story-progress{right:4vw;gap:9px;}
body.v18-ready .v7-story-dot{height:18px;transition:height .42s ease,background .42s ease,transform .42s ease,opacity .42s ease;}
body.v18-ready .v7-story-dot.is-active{height:38px;}

@media(max-width:760px){
  body.v18-ready .v7-story-canvas{inset:0;}
  body.v18-ready .v7-story-panel{width:80vw;height:min(38vh,310px);}
  body.v18-ready .v7-story-progress{right:17px;}
  body.v18-ready .v7-story-dot{height:14px;}
  body.v18-ready .v7-story-dot.is-active{height:28px;}
}

/* V19: the Origin hand-off has no visible rule. The existing paper header
   dissolves directly into the first, mist-green story frame. */
body.v19-ready .v7-story{
  border-top:0;
  background:transparent;
}
body.v19-ready .v10-story-bridge{
  height:clamp(148px,22vh,260px);
  min-height:0;
  margin-top:-1px;
  background:linear-gradient(180deg,
    var(--paper) 0%,
    #f4f3ee 15%,
    #e8ece7 38%,
    #cfdfdc 67%,
    rgb(165,199,199) 100%);
}
body.v19-ready .v10-story-bridge::after{display:none;}
body.v19-ready .v7-story-stage{
  background-image:linear-gradient(180deg,rgba(165,199,199,.18),rgba(165,199,199,0) 18%);
}

/* A contained camera move over the real world SVG. The map stays local and
   lightweight, but clicking a node feels like moving into that geography. */
body.v19-ready .v19-world-map{
  min-height:0;
  isolation:isolate;
}
body.v19-ready .v19-map-scene{
  position:relative;
  width:100%;
  transform-origin:0 0;
  transform:translate3d(0,0,0) scale(1);
  transition:transform .92s cubic-bezier(.22,.72,.2,1),filter .6s ease;
  will-change:transform;
}
body.v19-ready .v19-map-scene img{width:100%;height:auto;}
body.v19-ready .v19-world-map.is-focused .v19-map-scene{
  transform:translate3d(var(--v19-map-x),var(--v19-map-y),0) scale(var(--v19-map-scale));
}
body.v19-ready .v19-world-map.is-focused .v19-map-scene img{filter:saturate(1.06) contrast(1.03);}
body.v19-ready .v19-world-map .v13-map-node{transition:opacity .35s ease,transform .35s ease;}
body.v19-ready .v19-world-map.is-focused .v13-map-node:not(.on){opacity:0;pointer-events:none;}
body.v19-ready .v19-map-focus{
  position:absolute;
  left:24px;
  bottom:20px;
  z-index:8;
  display:flex;
  align-items:flex-end;
  gap:12px;
  max-width:calc(100% - 48px);
  padding:12px 14px 11px;
  color:#f8f6f1;
  background:rgba(28,59,59,.9);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .35s ease,transform .42s cubic-bezier(.22,.72,.2,1);
}
body.v19-ready .v19-world-map.is-focused .v19-map-focus{opacity:1;transform:translateY(0);pointer-events:auto;}
body.v19-ready .v19-map-focus-kicker{display:block;font:8px var(--mono);letter-spacing:.18em;color:#caeadf;}
body.v19-ready .v19-map-focus b{font:15px var(--mono);letter-spacing:.12em;}
body.v19-ready .v19-map-focus small{font:10px var(--mono);letter-spacing:.04em;color:rgba(248,246,241,.76);}
body.v19-ready .v19-map-reset{
  border:1px solid rgba(248,246,241,.7);
  background:transparent;
  color:#f8f6f1;
  padding:7px 9px;
  font:9px var(--mono);
  letter-spacing:.12em;
  cursor:pointer;
}
body.v19-ready .v19-map-reset:hover{background:#f8f6f1;color:#1c3b3b;}

@media(max-width:760px){
  body.v19-ready .v10-story-bridge{height:150px;}
  body.v19-ready .v19-map-focus{left:10px;bottom:10px;gap:7px;padding:9px 10px;max-width:calc(100% - 20px);flex-wrap:wrap;}
  body.v19-ready .v19-map-focus b{font-size:12px;}
  body.v19-ready .v19-map-focus small{font-size:8px;}
  body.v19-ready .v19-map-reset{font-size:8px;padding:6px 7px;}
}

/* V20: Origin is one continuous Blue Mountain landscape, not a left/right
   layout with a separate photo panel. The landscape dissolves into the story. */
body.v20-ready[data-page="origin"] header.o-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:block;
  max-width:none;
  min-height:100vh;
  margin:0;
  padding:0;
  background:
    linear-gradient(90deg,
      rgba(248,246,241,1) 0%,
      rgba(248,246,241,.985) 27%,
      rgba(248,246,241,.82) 45%,
      rgba(248,246,241,.28) 66%,
      rgba(248,246,241,0) 85%),
    url('assets/generated/brand-hero-blue-mountain.png') center/cover no-repeat;
}
body.v20-ready[data-page="origin"] header.o-hero::after{
  content:"";
  position:absolute;
  z-index:1;
  right:0;
  bottom:0;
  left:0;
  height:34vh;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(165,199,199,0),rgb(165,199,199) 96%);
}
body.v20-ready[data-page="origin"] .o-left{
  position:relative;
  z-index:2;
  display:flex;
  width:min(41vw,560px);
  min-height:100vh;
  padding:140px 48px 170px max(24px,calc((100vw - 1180px)/2 + 24px));
}
body.v20-ready[data-page="origin"] .o-right{display:none;}
body.v20-ready[data-page="origin"] .v7-story{margin-top:-1px;}
body.v20-ready[data-page="origin"] .v10-story-bridge{
  height:clamp(92px,14vh,170px);
  margin-top:-1px;
  background:rgb(165,199,199);
}
body.v20-ready[data-page="origin"] .v7-story-stage{
  background-image:linear-gradient(180deg,rgba(165,199,199,1),rgba(165,199,199,0) 20%);
}

/* V20: an actual geographic map base layer. Click a marker or the country
   tabs to move the live map to that location; the card is rendered above it. */
body.v20-ready .v19-world-map{display:none!important;}
body.v20-ready .v20-live-map{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  height:clamp(360px,53vw,650px);
  border:1px solid var(--line);
  background:#dfe7e0 url('assets/maps/world-real.svg') center/cover no-repeat;
}
body.v20-ready .v20-osm-frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#dfe7e0;
  transition:opacity .38s ease,transform .6s cubic-bezier(.22,.72,.2,1);
  will-change:transform,opacity;
}
body.v20-ready .v20-live-map.is-moving .v20-osm-frame{opacity:.2;transform:scale(1.025);}
body.v20-ready .v20-map-markers{position:absolute;z-index:3;inset:0;transition:opacity .25s ease;}
body.v20-ready .v20-live-map.is-focused .v20-map-markers{opacity:0;pointer-events:none;}
body.v20-ready .v20-map-node{
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  padding:4px 7px 4px 4px;
  color:#203d3d;
  background:rgba(248,246,241,.9);
  box-shadow:0 3px 12px rgba(28,59,59,.14);
  font:12px var(--mono);
  letter-spacing:.04em;
  cursor:pointer;
  transform:translate(-50%,-50%);
  transition:transform .25s ease,background .25s ease;
}
body.v20-ready .v20-map-node i{width:13px;height:13px;border:2px solid #f8f6f1;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px rgba(202,106,70,.25);}
body.v20-ready .v20-map-node.on i{background:#2d7775;box-shadow:0 0 0 6px rgba(45,119,117,.17);}
body.v20-ready .v20-map-node:hover{transform:translate(-50%,-50%) scale(1.07);background:#f8f6f1;}
body.v20-ready .v20-map-focus{
  position:absolute;
  z-index:5;
  left:24px;
  bottom:20px;
  display:flex;
  align-items:flex-end;
  gap:12px;
  max-width:calc(100% - 48px);
  padding:12px 14px 11px;
  color:#f8f6f1;
  background:rgba(28,59,59,.9);
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .35s ease,transform .42s cubic-bezier(.22,.72,.2,1);
}
body.v20-ready .v20-live-map.is-focused .v20-map-focus{opacity:1;transform:translateY(0);pointer-events:auto;}
body.v20-ready .v20-map-focus-kicker{display:block;font:8px var(--mono);letter-spacing:.18em;color:#caeadf;}
body.v20-ready .v20-map-focus b{font:15px var(--mono);letter-spacing:.12em;}
body.v20-ready .v20-map-focus small{font:10px var(--mono);letter-spacing:.04em;color:rgba(248,246,241,.76);}
body.v20-ready .v20-map-reset{border:1px solid rgba(248,246,241,.7);background:transparent;color:#f8f6f1;padding:7px 9px;font:9px var(--mono);letter-spacing:.12em;cursor:pointer;}
body.v20-ready .v20-map-reset:hover{background:#f8f6f1;color:#1c3b3b;}
body.v20-ready .v20-map-credit{position:absolute;right:10px;bottom:8px;z-index:6;color:#203d3d;background:rgba(248,246,241,.82);padding:3px 5px;font:8px var(--mono);letter-spacing:.03em;text-decoration:none;}

@media(max-width:760px){
  body.v20-ready[data-page="origin"] header.o-hero{min-height:92vh;background-position:61% center;}
  body.v20-ready[data-page="origin"] .o-left{width:auto;min-height:92vh;padding:118px 26px 145px;}
  body.v20-ready[data-page="origin"] .v10-story-bridge{height:105px;}
  body.v20-ready .v20-live-map{height:360px;}
  body.v20-ready .v20-map-node{gap:4px;font-size:8px;padding:3px 4px 3px 3px;}
  body.v20-ready .v20-map-node i{width:9px;height:9px;}
  body.v20-ready .v20-map-focus{left:10px;bottom:10px;gap:7px;padding:9px 10px;max-width:calc(100% - 20px);flex-wrap:wrap;}
  body.v20-ready .v20-map-focus b{font-size:12px;}
  body.v20-ready .v20-map-focus small{font-size:8px;}
  body.v20-ready .v20-map-reset{font-size:8px;padding:6px 7px;}
}

/* V21 final cascade — this must remain after the V20 layer. */
body.v21-ready[data-page="origin"] header.o-hero::after{
  height:31vh;
  background:linear-gradient(180deg,rgba(248,246,241,0),rgba(248,246,241,.96) 94%);
}
body.v21-ready[data-page="origin"] .v10-story-bridge{
  height:clamp(148px,22vh,260px);
  background:linear-gradient(180deg,var(--paper) 0%,#f4f3ee 15%,#e8ece7 38%,#cfdfdc 67%,rgb(165,199,199) 100%);
}
body.v21-ready[data-page="origin"] .v7-story-stage{background-image:linear-gradient(180deg,rgba(165,199,199,.18),rgba(165,199,199,0) 18%);}
body.v21-ready .v20-live-map{background:#a9d8e5;}
body.v21-ready .v20-osm-frame{opacity:1!important;transform:none!important;transition:none!important;}
body.v21-ready .v20-live-map.is-moving .v20-osm-frame{opacity:1!important;transform:none!important;}
@media(max-width:760px){
  body.v21-ready[data-page="origin"] .v10-story-bridge{height:150px;}
}

/* V22 final cascade — overlap the bridge with a transparent lead-in, so the
   image fading to paper becomes the same surface as the incoming mist. */
body.v22-ready[data-page="origin"] .v10-story-bridge{
  position:relative;
  z-index:3;
  height:clamp(300px,33vh,420px);
  margin-top:clamp(-132px,-12vh,-86px);
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(248,246,241,0) 0%,
    rgba(248,246,241,.82) 25%,
    #f4f3ee 40%,
    #e8ece7 57%,
    #cfdfdc 76%,
    rgb(165,199,199) 100%);
}
body.v22-ready .v20-map-credit{display:none!important;}
@media(max-width:760px){
  body.v22-ready[data-page="origin"] .v10-story-bridge{height:250px;margin-top:-86px;}
}

/* V23: one continuous Leaflet/OSM canvas. flyTo keeps every location change
   inside the same map, and each label has a dotted leader to its real pin. */
body.v23-ready .v23-live-map{position:relative;isolation:isolate;overflow:hidden;height:clamp(360px,53vw,650px);border:1px solid var(--line);background:#a9d8e5;}
body.v23-ready .v23-leaflet-map{position:absolute;inset:0;z-index:1;}
body.v23-ready .v23-leaflet-map .leaflet-container{width:100%;height:100%;font-family:var(--sans);background:#a9d8e5;}
body.v23-ready .v23-leaflet-map .leaflet-control-attribution{padding:2px 5px!important;background:rgba(248,246,241,.76)!important;color:#56706e!important;font:8px/1.2 var(--mono)!important;letter-spacing:.02em;}
body.v23-ready .v23-leaflet-map .leaflet-control-attribution a{color:#365f5e!important;text-decoration:none;}
body.v23-ready .v23-leaflet-marker{width:0!important;height:0!important;border:0!important;background:transparent!important;overflow:visible!important;}
body.v23-ready .v23-leaflet-marker::after{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border:2px solid #f8f6f1;border-radius:50%;background:#2d7775;box-shadow:0 0 0 4px rgba(45,119,117,.18);}
body.v23-ready .v23-leaflet-marker button{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;border:0;padding:4px 7px 4px 4px;color:#203d3d;background:rgba(248,246,241,.93);box-shadow:0 3px 12px rgba(28,59,59,.14);font:12px var(--mono);letter-spacing:.04em;white-space:nowrap;cursor:pointer;transform:translate(-50%,calc(-100% - 24px));transition:transform .25s ease,opacity .25s ease;}
body.v23-ready .v23-leaflet-marker button::after{content:"";position:absolute;left:50%;top:calc(100% + 4px);height:19px;border-left:1px dashed rgba(45,119,117,.82);}
body.v23-ready .v23-leaflet-marker button i{width:13px;height:13px;border:2px solid #f8f6f1;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px rgba(202,106,70,.25);}
body.v23-ready .v23-leaflet-marker button:hover{transform:translate(-50%,calc(-100% - 24px)) scale(1.06);}
body.v23-ready .v23-leaflet-marker.is-muted{opacity:0;pointer-events:none;transition:opacity .28s ease;}
body.v23-ready .v23-map-focus{position:absolute;z-index:6;left:24px;bottom:20px;display:flex;align-items:flex-end;gap:12px;max-width:calc(100% - 48px);padding:12px 14px 11px;color:#f8f6f1;background:rgba(28,59,59,.9);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s ease,transform .42s cubic-bezier(.22,.72,.2,1);}
body.v23-ready .v23-live-map.is-focused .v23-map-focus{opacity:1;transform:translateY(0);pointer-events:auto;}
body.v23-ready .v23-map-focus span{display:block;font:8px var(--mono);letter-spacing:.18em;color:#caeadf;}
body.v23-ready .v23-map-focus b{font:15px var(--mono);letter-spacing:.12em;}
body.v23-ready .v23-map-focus small{font:10px var(--mono);letter-spacing:.04em;color:rgba(248,246,241,.76);}
body.v23-ready .v23-map-focus button{border:1px solid rgba(248,246,241,.7);background:transparent;color:#f8f6f1;padding:7px 9px;font:9px var(--mono);letter-spacing:.12em;cursor:pointer;}
body.v23-ready .v23-map-focus button:hover{background:#f8f6f1;color:#1c3b3b;}
/* v24: a quiet editorial location note, not a dashboard control. */
body.v24-ready .v23-map-focus{left:18px;bottom:16px;align-items:center;gap:10px;padding:9px 11px 9px 12px;color:#24423f;background:rgba(248,246,240,.94);border:1px solid rgba(65,94,88,.2);border-left:2px solid #c86d4e;box-shadow:0 8px 22px rgba(35,58,53,.12);backdrop-filter:blur(10px);}
body.v24-ready .v23-map-focus span{color:#a96046;letter-spacing:.12em;text-transform:none;}
body.v24-ready .v23-map-focus b{color:#24423f;font:16px/1.1 var(--serif);letter-spacing:.025em;white-space:nowrap;}
body.v24-ready .v23-map-focus small{color:#6b7c76;font:9px/1.25 var(--mono);letter-spacing:.025em;}
body.v24-ready .v23-map-focus button{border:0;border-radius:999px;background:#bf6c50;color:#fffaf2;padding:8px 10px;font:9px/1 var(--mono);letter-spacing:.04em;box-shadow:none;transition:background .2s ease,transform .2s ease;}
body.v24-ready .v23-map-focus button:hover{background:#9f513b;color:#fffaf2;transform:translateY(-1px);}
@media(max-width:760px){
  body.v23-ready .v23-live-map{height:360px;}
  body.v23-ready .v23-leaflet-marker button{gap:4px;font-size:8px;padding:3px 4px 3px 3px;}
  body.v23-ready .v23-leaflet-marker button i{width:9px;height:9px;}
  body.v23-ready .v23-map-focus{left:10px;bottom:10px;gap:7px;padding:9px 10px;max-width:calc(100% - 20px);flex-wrap:wrap;}
  body.v23-ready .v23-map-focus b{font-size:12px;}
  body.v23-ready .v23-map-focus small{font-size:8px;}
  body.v23-ready .v23-map-focus button{font-size:8px;padding:6px 7px;}
  body.v24-ready .v23-map-focus{left:10px;bottom:10px;gap:7px;padding:9px 10px;}
  body.v24-ready .v23-map-focus b{font-size:13px;}
  body.v24-ready .v23-map-focus small{font-size:8px;}
  body.v24-ready .v23-map-focus button{font-size:8px;padding:7px 8px;}
}

/* ============================================================
   V29: one continuous page, no seams between sections.
   - .v29-bg-field is a single fixed layer behind everything; its
     color is cross-faded by v29-enhancements.js so paper/paper-2/
     night no longer cut at a hard line. The sections above it lose
     their own flat fill so the field is the only thing painting color.
   - .v29-tilt gives cards, photos and split panels a living 3D
     depth as they cross the viewport, driven by the same script.
   ============================================================ */
/* Reverted: sections keep their own v28 flat background again. The
   crossfaded field kept mismatching its handoff timing against the
   (class-bound, non-gradient) text colour switch — three attempts,
   still broke on real content. Restoring the flat per-section fill
   is what actually fixes it; .v29-bg-field is left inert below. */
.v29-bg-field{position:fixed;inset:0;z-index:-2;background:var(--paper);pointer-events:none;}

body.v29-ready .v29-tilt{
  --t-rx:0deg;--t-ty:0px;--t-tz:0px;--t-s:1;--t-op:1;
  --m-rx:0deg;--m-ry:0deg;
  opacity:var(--t-op);
  transform:translateZ(var(--t-tz)) translateY(var(--t-ty)) rotateX(calc(var(--t-rx) + var(--m-rx))) rotateY(var(--m-ry)) scale(var(--t-s));
  transition:transform .15s ease-out;
  will-change:transform,opacity;
}
body.v29-ready .card.v29-tilt:hover{translate:0 -7px;}

/* V29.5 — card cursor parallax + follow-glow. Hover-driven only, no
   scroll involved, so none of the earlier scroll bugs apply here. */
body.v29-ready .card.v29-tilt{
  --m-gx:50%;--m-gy:50%;
  position:relative;
  overflow:hidden;
  transform-style:preserve-3d;
}
body.v29-ready .card.v29-tilt::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(220px circle at var(--m-gx) var(--m-gy), rgba(201,103,69,.16), transparent 62%);
  transition:opacity .35s ease;
}
body.v29-ready .card.v29-tilt:hover::before{opacity:1;}
body.v29-ready .card.v29-tilt > *{position:relative;z-index:1;}

@media(pointer:coarse){
  body.v29-ready .card.v29-tilt{--m-rx:0deg!important;--m-ry:0deg!important;}
  body.v29-ready .card.v29-tilt::before{display:none;}
}

@media(prefers-reduced-motion:reduce){
  body.v29-ready .v29-tilt{transform:none!important;opacity:1!important;}
}

/* V29.6 — side scroll-progress dots. Pure navigation + position
   feedback, no content depends on it, so it's safe to just hide on
   narrow viewports where there's no room for it. */
.v29-dotnav{
  position:fixed;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  z-index:200;
  display:flex;
  flex-direction:column;
  gap:13px;
  align-items:center;
  padding:14px 9px;
  border-radius:999px;
  background:rgba(241,238,230,.5);
  backdrop-filter:blur(8px) saturate(1.1);
  -webkit-backdrop-filter:blur(8px) saturate(1.1);
  box-shadow:0 4px 18px rgba(23,32,34,.08);
  transition:background .3s ease;
}
.v29-dotnav.is-on-dark{background:rgba(16,25,27,.5);}
.v29-dot{
  width:8px;
  height:8px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(23,32,34,.32);
  background:transparent;
  cursor:pointer;
  transition:background .25s ease,border-color .25s ease,transform .25s ease;
}
.v29-dot:hover{border-color:var(--copper);}
.v29-dot.is-active{background:var(--copper);border-color:var(--copper);transform:scale(1.25);}
.v29-dotnav.is-on-dark .v29-dot{border-color:rgba(233,238,232,.4);}
.v29-dotnav.is-on-dark .v29-dot:hover{border-color:var(--teal);}
.v29-dotnav.is-on-dark .v29-dot.is-active{background:var(--teal);border-color:var(--teal);}
@media(max-width:1100px){
  .v29-dotnav{display:none;}
}

/* V29.7 — two-row offset gallery. 8 slots (4 per row), placeholder
   colour blocks for now — real photography to be dropped in later,
   swap each .gband-item's background for a photo when it arrives.
   The two rows drift a bounded distance in opposite directions as
   the section crosses the viewport, not an infinite marquee. */
section.gallery-band{overflow:hidden;}
.gband{margin:56px auto 0;max-width:66%;display:flex;flex-direction:column;gap:16px;}
.gband-row{display:flex;gap:14px;padding:0 220px;margin:0 -220px;}
.gband-item{flex:1;aspect-ratio:3/4;border:1px solid var(--line);}
.gband-item img{width:100%;height:100%;object-fit:cover;display:block;}
.gband-item.c1{background:var(--teal);}
.gband-item.c2{background:var(--copper);}
.gband-item.c3{background:var(--sky);}
.gband-item.c4{background:var(--teal-deep);}
.gband-item.c5{background:var(--copper-deep);}
.gband-item.c6{background:var(--night);}
.gband-item.c7{background:var(--night-2);}
.gband-item.c8{background:var(--paper-2);}
body.v29-ready .gband-row{transform:translateX(var(--gband-x,0px));will-change:transform;}
@media(max-width:820px){
  .gband{max-width:100%;gap:8px;}
  .gband-row{gap:6px;padding:0 60px;margin:0 -60px;}
}

/* V29.8 — card hover fill-wipe. A solid colour panel wipes up from
   the bottom edge on hover, behind the text (z-index already scoped
   by .card.v29-tilt > * from V29.5). Pure CSS clip-path transition,
   no scroll or JS involved. */
body.v29-ready .card.v29-tilt{
  --fill: var(--copper);
}
body.v29-ready .card.v29-tilt::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:var(--fill);
  opacity:.1;
  clip-path:inset(100% 0 0 0);
  transition:clip-path .45s cubic-bezier(.22,.72,.2,1);
  pointer-events:none;
}
body.v29-ready .card.v29-tilt:hover::after{clip-path:inset(0 0 0 0);}

/* V29.9 — logo mark magnetic tilt. Same cursor-parallax math as the
   cards (V29.5), applied to the M mark's container instead — a
   lighter, achievable stand-in for true per-vertex path distortion. */
body.v29-ready .m-anim{
  --m-rx:0deg;--m-ry:0deg;
  transform:perspective(900px) rotateX(var(--m-rx)) rotateY(var(--m-ry));
  transition:transform .2s ease-out;
}
@media(pointer:coarse){
  body.v29-ready .m-anim{transform:none!important;}
}

/* ============================================================
   V29.4 — Mengo Bear split-and-flip. Replaces the single static
   photo with the same photo sliced across three panels (one image,
   background-position offset per panel — no extra assets), pinned
   for a short scroll while GSAP ScrollTrigger closes the gap and
   then flips each panel to its caption face. Falls back to a plain
   static three-photo strip (no pin, no flip) if the GSAP CDN load
   ever fails — see the fail-open guard in v29-enhancements.js.
   ============================================================ */
.bear-split-stage{display:flex;align-items:center;justify-content:center;margin-top:60px;padding:10px 0;}
.bear-split-wrap{width:100%;max-width:720px;margin:0 auto;}
.bear-split{display:flex;gap:14px;perspective:1400px;}
.bear-panel{flex:1;aspect-ratio:3/4;position:relative;transform-style:preserve-3d;}
.bear-panel-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border:1px solid rgba(233,238,232,.2);}
.bear-panel-front{background-image:var(--bear-img);background-repeat:no-repeat;background-size:300% 100%;background-color:#132020;}
.bear-panel[data-i="0"] .bear-panel-front{background-position-x:0%;}
.bear-panel[data-i="1"] .bear-panel-front{background-position-x:50%;}
.bear-panel[data-i="2"] .bear-panel-front{background-position-x:100%;}
.bear-panel-back{transform:rotateY(180deg);background:var(--night-2);display:flex;align-items:center;justify-content:center;padding:20px;text-align:center;}
.bear-panel-back span{font-family:var(--serif);font-size:clamp(15px,1.9vw,19px);color:var(--night-ink);line-height:1.75;}
@media(max-width:760px){
  .bear-split{gap:8px;}
  .bear-panel-back{padding:12px;}
  .bear-panel-back span{font-size:13px;}
}
@media(prefers-reduced-motion:reduce){
  .bear-panel{transform:none!important;}
}

/* V29.10 — removed (see v29-enhancements.js for why). */

/* V29.11 — floating scroll-to-top. */
.v29-totop{
  position:fixed;
  right:16px;
  bottom:20px;
  z-index:200;
  width:52px;
  height:52px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(241,238,230,.86);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:var(--ink);
  font:10px var(--mono);
  letter-spacing:.14em;
  cursor:pointer;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,background .2s ease,border-color .2s ease;
}
.v29-totop.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.v29-totop:hover{border-color:var(--copper);color:var(--copper);}
@media(max-width:640px){
  .v29-totop{width:44px;height:44px;right:12px;bottom:16px;font-size:9px;}
}

/* V29.12 — tilted photo cards. Scoped to .split .ph only now — the
   gallery band went back to square, regular tiles (see V29.7): it's
   placeholder colour blocks awaiting real photos, and a tilted skew
   reads as unfinished on a flat colour swatch in a way it didn't on
   a real photo. .split .ph is a single standalone photo per section,
   so the skew + hover-straighten still reads as intentional there. */
.split .ph{
  transform:perspective(1400px) rotateZ(-1.6deg) rotateX(2deg);
  box-shadow:14px 18px 0 rgba(23,32,34,.08);
  transition:transform .4s cubic-bezier(.22,.72,.2,1);
}
.split .ph:hover{
  transform:perspective(1400px) rotateZ(0deg) rotateX(0deg) scale(1.015);
}
@media(max-width:820px){
  .split .ph{transform:none;box-shadow:none;}
  .split .ph:hover{transform:none;}
}

/* V29.13 — origin page: the hard line between header.o-hero and the
   pinned Origin story turned out to be a literal 1px border, added
   in the very first (v7) version of the story block and never
   removed once later versions (v19-22) built a whole gradient bridge
   specifically to make this handoff seamless. The gradient was doing
   its job; this stray hairline was cutting straight across it.
   Matching body.v7-ready .v7-story's specificity, not just .v7-story
   — a plain single-class override here would lose to the original
   rule regardless of appearing later in the file. */
body.v7-ready .v7-story{border-top:none;}

/* Removing the border wasn't the whole story: .v10-story-bridge ends
   in normal document flow, .v7-story-stage is position:sticky — the
   browser puts sticky elements on their own compositing layer, and
   even with byte-identical colors on both sides, the seam between
   two separately-composited layers can still show as a faint hard
   edge (a rendering artifact, not a color mismatch — no amount of
   gradient tuning fixes it if the transition lands exactly ON the
   layer boundary). Pulling the sticky block further up so it
   overlaps well into the bridge's gradient — instead of the 1px
   v20 used — moves that boundary into the middle of a soft gradient
   instead of sitting right at the visible edge. */
body.v20-ready[data-page="origin"] .v7-story{margin-top:-64px;}

/* Reverted: the ::after mask + solid bridge made this worse, not
   better — that was still guessing at colour/layout, and it was the
   wrong category of fix. This is a documented Safari rendering bug:
   position:sticky elements are positioned using sub-pixel math but
   painted to whole device pixels, so a hairline gap can flash at
   the sticky element's own edge the moment it engages — regardless
   of what colour is on either side, because it's a rounding error,
   not a seam between two surfaces. The standard fix is forcing the
   sticky element onto its own explicit GPU layer so the browser
   stops recomputing (and re-rounding) its position against the
   surrounding layout on every scroll frame. */
.v7-story-stage{
  transform:translateZ(0);
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* Found by actually querying the live page instead of guessing from
   a screenshot: .v7-story-stage's own --story-bg custom property was
   correctly updating every frame (confirmed via getComputedStyle),
   but the element's rendered background-color was stuck on the flat
   --paper fallback regardless — meaning the story's own colour cycle
   (teal → the other 7 mood colours) was NEVER actually reaching the
   stage's base paint. What the "hard line" really was: a faint 18%
   teal overlay gradient sitting on top of a background that never
   left paper, not a boundary between two matched colours at all —
   no amount of bridge/gradient tuning could have fixed something
   happening entirely inside this one element. Forcing it through
   with !important, since something upstream in this 32-file
   version cascade is silently winning the base declaration without
   ever writing a competing background-color value I could find. */
/* The real fix: CSS transitions sit above even !important in the
   cascade, so as long as v18's transition existed, nothing could
   ever override the colour it was stuck animating (never finishing)
   toward. Killing the transition lets the value JS writes every
   frame actually paint immediately — JS is already doing its own
   smooth interpolation (currentProgress lerping toward
   targetProgress), so the CSS transition was pure redundant harm,
   not adding smoothness on top of it. */
.v7-story-stage{transition:none!important;background-color:var(--story-bg,var(--paper))!important;}

/* V29.14 — reverted. The stacked-panel reveal read as broken/odd in
   practice, not like the reference clips. Back to normal document
   flow for these four sections. */

/* V29.15 — kill the .ph::after label bar wherever a .ph actually
   holds a real photo. That label bar exists for genuinely-empty
   placeholders (data-label showing "photo pending") — the contact
   page's QR code slot and Truth's GI/JACRA marks still need it, so
   this isn't a blanket removal. It only hides the bar when there's
   an <img> inside, which was the actual bug: every .ph that already
   has a real photo (sustainability, beyond-tradition, the bear photo,
   the region cards) was still rendering an empty dark bar on top of
   it, because the CSS never distinguished "waiting for a photo" from
   "has a photo" — fixing that distinction once, globally, instead of
   patching each photo one at a time. */
.ph:has(img)::after{display:none;}