:root{--green:#194832;--deep:#143f2e;--cream:#f7f3e7;--paper:#fcfbf6;--gold:#ae9259;--muted:#697469;--line:#dddccf}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;color:var(--green);background:var(--paper);font:16px/1.7 Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:5px}img{display:block;width:100%;height:100%;object-fit:cover}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1,h2,.serif{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.18}h1{font-size:clamp(36px,4.4vw,64px);letter-spacing:-1.5px}h2{font-size:clamp(29px,3vw,44px);letter-spacing:-.7px}h3{font-size:20px;line-height:1.35}p{margin-bottom:20px}small,.small{font-size:12px}.wrap{max-width:1280px;margin:auto;padding:0 48px}.eyebrow{text-transform:uppercase;letter-spacing:2.4px;font-size:11px;font-weight:bold;display:block;margin-bottom:16px}.demo{background:#e9e3d3;text-align:center;font-size:11px;padding:5px 20px;letter-spacing:.3px}.utility{background:var(--deep);color:#f7f3e7;font-size:10px;letter-spacing:.2px}.utility .wrap{display:flex;justify-content:space-between;padding-top:7px;padding-bottom:7px}.utility-values{display:flex;gap:24px}.header{background:var(--cream);border-bottom:1px solid var(--line);position:relative;z-index:20}.header-inner{display:flex;align-items:center;gap:30px;min-height:104px}.logo{width:130px;flex-shrink:0;text-align:center}.logo img{object-fit:contain;height:67px}.logo .textlogo{font-family:Georgia,serif;font-size:28px;font-weight:bold;letter-spacing:2px}.logo small{display:block;font-size:10px;font-style:italic}.nav{display:flex;align-items:center;justify-content:flex-end;gap:23px;flex:1;font-size:12px;font-weight:bold}.nav details{position:relative}.nav summary{cursor:pointer;list-style:none}.nav summary:after{content:'⌄';padding-left:6px}.nav details>div{position:absolute;top:30px;left:-15px;width:240px;background:var(--cream);border:1px solid var(--line);box-shadow:0 12px 30px #12352215;padding:10px}.nav details a{display:block;padding:9px}.nav a:hover,.nav summary:hover{color:#a3833d}.menu-toggle{display:none;border:1px solid var(--line);background:transparent;padding:7px 12px;color:var(--green)}.hero{margin:28px auto 0;position:relative;min-height:430px;display:flex;align-items:center;background:#eeefdf;overflow:hidden}.hero .hero-art{position:absolute;inset:0}.hero .hero-art img{object-position:center}.hero.has-image:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#f6f3e7ee 0%,#f6f3e7cf 35%,#f6f3e722 65%,transparent)}.hero-copy{position:relative;z-index:2;padding:58px 52px;max-width:620px}.hero-copy h1{font-size:clamp(35px,3.7vw,55px);margin-bottom:20px}.hero-copy p{max-width:480px;font-size:15px}.hero.smallhero{min-height:300px}.hero.smallhero .hero-copy{max-width:850px}.hero-controls{display:flex;gap:8px;align-items:center;position:absolute;bottom:20px;right:24px;z-index:3}.hero-controls button{background:var(--paper);border:1px solid var(--line);width:38px;height:38px;color:var(--green)}.hero-controls output{font-size:12px;background:var(--paper);padding:7px 13px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--green);color:#fff;padding:12px 22px;font-size:12px;font-weight:bold;letter-spacing:.3px;border:1px solid var(--green)}.button:after{content:'→';font-size:18px;line-height:1}.button.light{background:transparent;color:var(--green)}.actions{display:flex;flex-wrap:wrap;gap:12px}.section{padding:70px 0}.section.soft{background:var(--cream)}.section.green{background:var(--green);color:var(--cream)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px}.section-head h2{margin-bottom:10px}.section-head p{margin:0;color:var(--muted)}.green .section-head p{color:#d7dfce}.link{font-size:13px;border-bottom:1px solid var(--gold);padding-bottom:5px}.grid{display:grid;gap:24px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.five{grid-template-columns:repeat(5,minmax(0,1fr))}.quick-links{padding:25px 0}.quick-links a{border:1px solid var(--line);padding:20px 24px;display:flex;justify-content:space-between;gap:20px;background:var(--cream);align-items:center}.quick-links strong{display:block;font-family:Georgia,serif;font-size:21px}.quick-links small{color:var(--muted)}.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px}.split .visual{height:420px}.split.reverse .visual{order:2}.split.reverse .copy{order:1}.split .copy{padding:15px 0}.visual{background:#e9ecdf;overflow:hidden;position:relative}.visual.contain{background:#f6f4ed}.visual.contain img{object-fit:contain}.visual.portrait img{object-fit:contain}.missing{display:flex;align-items:center;justify-content:center;height:100%;min-height:180px;border:1px solid var(--line);padding:25px;text-align:center;background:linear-gradient(135deg,#eceee1,#f7f3e7);color:#6f7d6d;font-size:13px}.asset-note{font-size:10px;color:var(--muted);margin:7px 0 0}.card{background:var(--paper);color:var(--green);border:1px solid var(--line);min-width:0;display:flex;flex-direction:column}.card .visual{height:225px}.card-body{padding:23px;display:flex;flex-direction:column;flex:1}.card-body h3{font-family:Georgia,serif;font-size:23px;font-weight:400}.card-body p{font-size:14px;color:var(--muted)}.card-body .link{align-self:flex-start;margin-top:auto}.product-card .visual{height:240px}.product-card .card-body{padding:18px}.product-card h3{font-family:Arial,sans-serif;font-size:17px;font-weight:600}.product-card .price{font-size:12px;color:#8c7047;margin-top:auto;margin-bottom:15px}.band{text-align:center;padding:65px 30px;background:#e6ecdf}.band h2{max-width:750px;margin:0 auto 20px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px}.metrics>div{padding:20px 24px;border-left:1px solid #ffffff30}.metrics>div:first-child{border-left:0}.metrics b{font-family:Georgia,serif;font-size:32px;font-weight:400;color:#d6c797}.metrics h3{font-size:17px;margin:12px 0}.metrics p{font-size:13px;margin-bottom:0}.wide-image{height:340px}.person .visual{height:410px}.person h3{margin-bottom:9px}.person .role{font-size:12px;line-height:1.6}.breadcrumb{font-size:12px;color:var(--muted);margin:25px 0}.subnav{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0}.subnav a,.filter{border:1px solid var(--line);padding:9px 17px;background:transparent;color:var(--green);font-size:12px}.filter.active{background:var(--green);color:#fff}.article-head{max-width:1000px;margin:60px auto 42px;display:grid;grid-template-columns:1fr 280px;gap:60px;align-items:center}.article-head h1{font-size:44px}.article-head .visual{height:230px}.status{font-size:11px;color:#85734f;border-left:2px solid #b69b62;padding-left:12px;margin-bottom:25px}.article-body{max-width:1000px;margin:auto}.article-chapter{display:grid;grid-template-columns:270px 1fr;gap:60px;border-top:1px solid var(--line);padding:35px 0}.article-chapter h2{font:600 21px/1.4 Arial,sans-serif;letter-spacing:0;margin-top:2px}.article-chapter p{font-size:16px;line-height:1.9}.article-chapter .chapter-number{display:block;font-size:10px;color:var(--gold);letter-spacing:2px;margin-bottom:12px}.article-lead{font-size:20px!important;line-height:1.7!important}.article-photos{max-width:850px;margin:40px auto}.article-photos .visual{height:370px}.closing{padding:60px 25px;text-align:center;background:#eef0e5;margin-top:45px}.closing p{font:36px/1.3 Georgia,serif;max-width:800px;margin:0 auto}.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0}.prevnext a{padding:22px;border:1px solid var(--line)}.prevnext a:last-child{text-align:right}.prevnext small{display:block;letter-spacing:2px;font-size:10px}.explore{display:grid;grid-template-columns:1.15fr 1fr;gap:25px}.explore .major .visual{height:330px}.explore .minor{display:grid;gap:18px}.explore .minor a{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px}.explore .minor .visual{height:120px}.explore h3{font-family:Georgia,serif;font-size:27px;font-weight:400;margin:5px 0}.video-title{text-align:center;margin-bottom:28px}.video-frame{aspect-ratio:16/9;background:#173e2f;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#f2eddd;padding:30px;text-align:center}.video-frame .play{width:66px;height:66px;border:1px solid #ffffff60;border-radius:50%;display:grid;place-items:center;margin-bottom:20px;font-size:24px}.video-frame p{max-width:500px}.video-control{display:flex;justify-content:space-between;align-items:center;margin-top:18px}.video-control button{background:transparent;border:1px solid var(--line);padding:9px 18px;color:var(--green);font-size:12px}.video-control output{font-size:12px}.contact h2{font-size:46px}.contact .grid{align-items:start}.contact .hold{font-size:13px;color:var(--muted);max-width:580px}.contact-links{display:flex;flex-wrap:wrap;gap:24px}.footer{background:var(--deep);color:#e9eedf;padding:50px 0 20px}.footer-grid{display:grid;grid-template-columns:1.2fr repeat(4,1fr);gap:30px}.footer h3{font-size:13px}.footer a{display:block;font-size:11px;margin:9px 0;color:#d2deca}.footer-bottom{font-size:10px;border-top:1px solid #ffffff20;margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;gap:25px}.searchbar{display:flex;gap:15px;margin-bottom:30px}.searchbar input,.searchbar select{padding:12px 15px;border:1px solid var(--line);background:var(--paper);color:var(--green);min-width:0}.searchbar input{flex:1}.empty{padding:35px;border:1px solid var(--line);text-align:center}.specs{border-top:1px solid var(--line);margin:25px 0}.specs div{display:grid;grid-template-columns:160px 1fr;gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.form label{display:block;font-size:13px;margin:15px 0 5px}.form input,.form textarea,.form select{display:block;width:100%;padding:13px;border:1px solid var(--line);background:var(--paper);color:var(--green)}.form button{margin-top:20px}.form-output{margin-top:18px;padding:18px;background:#e8eee0}.tag{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:#8d7848}.map-hold{min-height:360px;display:grid;place-items:center;text-align:center;background:#e5eadd;border:1px solid var(--line);padding:40px}.map-hold p{max-width:380px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip{position:absolute;left:20px;top:-100px;background:white;padding:15px;z-index:100}.skip:focus{top:10px}[hidden]{display:none!important}@media(min-width:1600px){.wrap{max-width:1440px}.hero{min-height:500px}}@media(max-width:1180px){.wrap{padding-left:30px;padding-right:30px}.nav{gap:14px;font-size:11px}.header-inner{gap:22px}.grid.five{grid-template-columns:repeat(3,1fr)}.article-chapter{grid-template-columns:220px 1fr;gap:40px}.split{gap:35px}}@media(max-width:1000px){.header-inner{min-height:86px;justify-content:space-between}.logo{width:110px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:86px;left:0;right:0;background:var(--cream);padding:20px 30px;border-bottom:1px solid var(--line);font-size:14px;align-items:stretch}.nav.open{display:flex;flex-direction:column}.nav details>div{position:static;box-shadow:none;width:auto;border:0;padding:0 12px}.utility-values span:last-child{display:none}.grid.four{grid-template-columns:repeat(2,1fr)}.split{gap:28px}.split .visual{height:390px}.footer-grid{grid-template-columns:repeat(3,1fr)}.article-head{grid-template-columns:1fr 230px;gap:30px}}@media(max-width:760px){.wrap{padding:0 22px}.utility .wrap{padding-top:7px;padding-bottom:7px}.utility-values span:nth-child(2){display:none}.section{padding:45px 0}.hero{margin-top:15px;min-height:490px;align-items:end}.hero-copy{padding:35px 25px 62px}.hero.has-image:after{background:linear-gradient(0deg,#f6f3e7ff 0%,#f6f3e7ed 35%,#f6f3e733 85%)}.hero .hero-art img{object-position:65%}.hero-copy h1{font-size:36px}.hero-copy p{font-size:14px}.hero.smallhero{min-height:310px}.hero.smallhero .hero-copy{padding:35px 25px}.grid.three,.grid.five{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.grid.two{grid-template-columns:1fr}.split.reverse .visual{order:0}.split.reverse .copy{order:1}.split .visual{height:340px}.split{gap:25px}.metrics{grid-template-columns:repeat(2,1fr)}.metrics>div:nth-child(3){border-left:0}.section-head{align-items:start}.section-head .link{max-width:120px;flex-shrink:0}.article-head{grid-template-columns:1fr;margin-top:35px;gap:20px}.article-head h1{font-size:36px}.article-head .visual{height:260px}.article-chapter{grid-template-columns:1fr;gap:15px;padding:25px 0}.article-chapter p{font-size:16px}.article-photos .grid.two{grid-template-columns:1fr 1fr}.article-photos .visual{height:260px}.closing p{font-size:29px}.explore{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.contact h2{font-size:38px}.wide-image{height:250px}.searchbar{flex-wrap:wrap}.searchbar input{flex-basis:100%}.prevnext{gap:12px}.prevnext a{padding:16px;font-size:13px}.person .visual{height:420px}}@media(max-width:420px){.grid.five,.grid.three{gap:14px}.product-card .visual{height:175px}.product-card .card-body{padding:13px}.product-card h3{font-size:15px}.product-card .button{padding:9px 12px;gap:10px}.grid.four{grid-template-columns:1fr}.quick-links .grid.three{grid-template-columns:1fr}.article-photos .grid.two{gap:12px}.article-photos .visual{height:220px}.explore .minor a{grid-template-columns:110px 1fr;gap:15px}.explore h3{font-size:23px}.footer-grid{gap:25px}.actions .button{font-size:11px;padding:10px 15px;gap:15px}.specs div{grid-template-columns:110px 1fr}.video-control button{padding:8px 10px;font-size:11px}}
.hero-art>.visual{height:100%}.brand-hero{margin-top:26px}.brand-hero .visual{height:auto;aspect-ratio:16/7.8}.brand-hero img{object-fit:contain;background:var(--cream)}.hero-actionbar{display:flex;gap:15px;padding:22px 28px;background:#efeddf}.wide-image>.visual{height:100%}@media(max-width:760px){.brand-hero .visual{aspect-ratio:16/9}.hero-actionbar{padding:18px 15px;gap:10px}.hero-actionbar .button{padding:10px 13px;font-size:11px;gap:12px}}
/* R03: user-supplied 1536 x 480 hero, unchanged image bytes and full frame. */
.brand-hero-r03{position:relative;background:var(--cream)}
.brand-hero-r03 .visual{aspect-ratio:16/5;height:auto;background:transparent}
.brand-hero-r03 .visual img{width:100%;height:auto;aspect-ratio:16/5;object-fit:contain;background:transparent}
.brand-hero-copy{position:absolute;left:0;top:0;bottom:0;width:43%;padding:24px 28px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,rgba(250,247,235,.93),rgba(250,247,235,.79) 75%,rgba(250,247,235,0));}
.brand-hero-copy h1{font-size:clamp(28px,2.65vw,43px);line-height:1.12;letter-spacing:-.8px;margin:0 0 16px;max-width:440px}
.brand-hero-copy .eyebrow{margin-bottom:12px}
.brand-hero-copy p{font-size:13px;line-height:1.6;max-width:340px;margin:0}
@media(max-width:1024px){.brand-hero-copy{padding:18px 22px}.brand-hero-copy h1{font-size:30px}.brand-hero-copy p{font-size:12px}}
@media(max-width:820px){.brand-hero-r03 .visual{aspect-ratio:16/5}.brand-hero-copy{position:static;width:100%;padding:26px 24px;background:var(--cream)}.brand-hero-copy h1{font-size:34px;max-width:600px}.brand-hero-copy p{font-size:14px;max-width:600px}}
@media(max-width:420px){.brand-hero-copy{padding:23px 20px}.brand-hero-copy h1{font-size:30px}}
/* R04: source logos and semantic icons; full artwork, never stretched or clipped. */
.asset-icon{width:74px;height:74px;object-fit:contain;flex-shrink:0;display:block;margin:0 0 15px}.quick-links .asset-icon{width:54px;height:54px;margin:0}.quick-links a{gap:16px}.quick-links a>div{flex:1}.metrics .asset-icon{width:92px;height:92px;margin:0 auto 15px}.metrics>div{text-align:center}.metrics b{font-size:22px}.brand-logo{display:block;width:auto;max-width:175px;height:92px;object-fit:contain;margin:0 0 20px}.article-head .brand-logo{height:70px;max-width:150px}.footer-brand-logo{width:130px;height:95px;object-fit:contain;background:var(--cream);padding:8px;border-radius:3px;margin-bottom:12px}.nav .nav-brand{display:flex;gap:12px;align-items:center}.nav-brand img{width:48px;height:36px;object-fit:contain}.distribution-heading{display:flex;align-items:center;gap:24px}.distribution-heading>.asset-icon{width:130px;height:130px}.distribution-heading .section-head{margin-bottom:0}.distribution-heading{margin-bottom:32px}.journal-categories .asset-icon{width:65px;height:65px}.visual.portrait{background:var(--cream)}.visual.portrait img{object-fit:contain}.article-head .visual.portrait{height:320px}.person .visual.portrait{height:410px}.split .visual.portrait{height:540px}@media(max-width:760px){.distribution-heading{gap:16px;align-items:flex-start}.distribution-heading>.asset-icon{width:84px;height:84px}.quick-links .asset-icon{width:50px;height:50px}.split .visual.portrait{height:440px}.article-head .visual.portrait{height:360px}}
/* Category badges have baked-in labels: display the full supplied artwork at a readable review size. */
.quick-links .asset-icon{width:100px;height:100px}.journal-categories .asset-icon{width:170px;height:170px;max-width:100%;margin:0 auto 18px}.quick-links a{padding:18px}.distribution-heading>.asset-icon{width:150px;height:150px}@media(max-width:1180px){.quick-links .asset-icon{width:80px;height:80px}.quick-links a{gap:12px}.quick-links strong{font-size:19px}}@media(max-width:760px){.quick-links .grid.three{grid-template-columns:1fr}.quick-links .asset-icon{width:100px;height:100px}.distribution-heading>.asset-icon{width:100px;height:100px}}
/* R05 — user review corrections. */
.nav-about{position:relative;display:flex;align-items:center;gap:4px}.nav-about-disclosure{position:static!important}.nav-about-disclosure summary{padding:8px 5px}.nav-about-disclosure summary:after{display:none}.nav-about-disclosure>div{top:100%!important;left:-16px!important}.nav-about-link{padding:8px 0}.hero-values{display:flex;align-items:center;gap:12px;margin-top:17px}.hero-values>div{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.hero-values .asset-icon{width:55px;height:55px;object-fit:contain;margin:0}.hero-values span{font-size:10px;line-height:1.3;max-width:90px}.brand-hero-copy h1{margin-bottom:12px}.brand-hero-copy .eyebrow{margin-bottom:9px}.brand-hero-copy p{font-size:12px}.person{display:grid;grid-template-columns:45% 55%;border-radius:18px;padding:18px;background:#fff;align-items:stretch;gap:0}.person .visual.portrait{height:100%;min-height:330px;max-height:440px;border-radius:12px;background:#f2f3ee}.person .card-body{padding:20px 0 20px 22px;justify-content:center}.person .card-body h3{font-family:Arial,sans-serif;font-weight:700;font-size:27px;line-height:1.12;margin-bottom:13px}.person .eyebrow{font-size:10px;letter-spacing:1.4px;margin-bottom:13px}.person .role{font-size:14px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}.person .card-body p:not(.role){font-size:14px;line-height:1.7}.person .link{margin-top:8px}.video-heading{display:grid;grid-template-columns:140px 1fr 150px;gap:25px;align-items:start;text-align:center;margin-bottom:32px}.video-heading h2{font-family:Arial,sans-serif;font-weight:700;font-size:36px;margin:0 0 18px}.video-heading p{font-size:13px;color:var(--muted);margin:0}.video-heading>.brand-logo{width:120px;height:80px;margin:0}.video-motto{font:italic 19px/1.35 Georgia,serif;color:#3e6939}.video-layout{display:grid;grid-template-columns:minmax(260px,.39fr) minmax(0,1fr);gap:20px;align-items:start}.video-playlist{background:#f3f5eb;border:1px solid #d9e2ce;border-radius:12px;padding:15px;min-width:0}.playlist-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px;font-size:16px}.playlist-title>span{font-size:11px;color:var(--muted)}.playlist-scroll{max-height:490px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#b1c4ad transparent;padding-right:5px}.playlist-item{display:grid;grid-template-columns:95px 1fr;gap:11px;align-items:center;width:100%;text-align:left;border:1px solid transparent;border-radius:7px;background:transparent;padding:10px 7px;color:var(--green);margin-bottom:8px}.playlist-item.selected{border-color:#a9cfa1;background:#e8f0df}.playlist-item strong{display:block;font-size:12px;line-height:1.4}.playlist-item small{display:block;font-size:10px;line-height:1.4;margin-top:4px}.playlist-item em{display:block;font-style:normal;font-size:9px;color:var(--muted);margin-top:6px}.video-thumb{position:relative;aspect-ratio:16/10;display:grid;place-items:center;background:#e3e9db;border-radius:5px;overflow:hidden}.video-thumb img{object-fit:contain}.video-thumb b{position:absolute;top:0;left:0;z-index:1;background:#174832;color:white;padding:2px 6px;border-radius:3px;font-size:11px}.video-main{min-width:0}.video-main .video-frame{aspect-ratio:16/9;border-radius:12px;padding:25px;background:linear-gradient(130deg,#ecf0e4,#c6d9bd);color:var(--green);position:relative;justify-content:center}.video-demo-brand .brand-logo{width:130px;height:85px;margin:0 auto 18px}.video-main .play{background:white;border:1px solid #cdd8c7;color:var(--green);width:58px;height:58px;margin:0 0 17px;font-size:22px}.video-main h3{font-size:28px;margin:0 0 10px;font-family:Georgia,serif}.video-main p{font-size:13px;margin:0 0 13px}.video-main [data-video-status]{font-size:10px;color:#55694f;max-width:80%}.video-main .video-control{margin-top:16px}.video-control button:last-child{background:var(--green);color:white;border-color:var(--green);border-radius:5px}.contact-reference{max-width:1180px}.contact-pin{display:grid;place-items:center;background:var(--green);color:white;width:48px;height:48px;border-radius:50%;font-size:29px;margin-bottom:20px}.contact-reference h2{font-family:Arial,sans-serif;font-weight:700;margin-bottom:10px;font-size:44px}.contact-reference .hotline{color:#c9521b;font-size:25px;font-weight:700;margin:0 0 9px}.contact-reference h3{font-size:22px;margin:0 0 10px}.contact-address{font-size:16px}.contact-socials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:32px}.contact-socials>a,.contact-socials>span{font-size:13px;font-weight:700;border-bottom:2px solid #d79668;padding-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;overflow-wrap:anywhere}.contact-socials b{font-size:20px;flex-shrink:0}.content-transition{margin:55px 0 30px;padding:45px 35px 35px;background:linear-gradient(110deg,#f3f7ef,#fffffc 50%,#f2f6ed);border:1px solid #e6ecdf;position:relative;overflow:hidden}.content-transition:before,.content-transition:after{content:'';position:absolute;width:105px;height:105px;background:url('/assets/r04/icon-leaves.webp') center/contain no-repeat;opacity:.26;pointer-events:none}.content-transition:before{left:-20px;top:8px;transform:rotate(-25deg)}.content-transition:after{right:-20px;top:10px;transform:rotate(25deg)}.transition-intro{text-align:center;position:relative;z-index:1}.transition-intro h2{font-size:40px;max-width:700px;margin:14px auto 22px}.transition-intro .eyebrow{font-size:9px}.content-transition .prevnext{margin:26px 0 36px;position:relative;z-index:1}.content-transition .prevnext a{border:1px solid #8ba999;border-radius:6px;font:23px/1.3 Georgia,serif;background:#ffffff70}.content-transition .prevnext small{font:700 9px/1.5 Arial,sans-serif;margin-bottom:6px}.related-title{text-align:center;position:relative}.related-title h2{font-size:31px;margin-bottom:10px}.related-title .eyebrow{font-size:8px}.transition-card{display:block;border-radius:7px;background:white;border:1px solid #e4e9dc;overflow:hidden}.transition-card .visual{height:180px}.transition-card .visual img{object-fit:contain}.transition-card>div:last-child{padding:18px 42px 18px 18px;position:relative}.transition-card h3{font:22px/1.25 Georgia,serif;margin:0 0 8px}.transition-card p{font-size:12px;line-height:1.5;margin:0}.transition-card span{position:absolute;right:12px;bottom:22px;width:26px;height:26px;background:#eef1e6;border-radius:50%;display:grid;place-items:center}
@media(max-width:1180px){.hero-values{gap:7px}.hero-values .asset-icon{width:44px;height:44px}.hero-values span{font-size:9px}.person .card-body h3{font-size:24px}.person .card-body p:not(.role){font-size:12px}.person .card-body{padding-left:15px}.video-layout{grid-template-columns:285px minmax(0,1fr)}.playlist-item{grid-template-columns:75px 1fr}.playlist-scroll{max-height:440px}.contact-socials{gap:20px}.contact-socials>a{font-size:12px}}
@media(max-width:1024px){.brand-hero-copy{position:static;width:100%;padding:28px;background:var(--cream)}.brand-hero-copy h1{font-size:36px;max-width:700px}.brand-hero-copy p{font-size:14px;max-width:650px}.hero-values{max-width:650px;gap:25px;margin-top:20px}.hero-values .asset-icon{width:65px;height:65px}.hero-values span{font-size:12px;max-width:120px}.person{grid-template-columns:43% 57%;padding:14px}.person .visual.portrait{min-height:350px}.video-heading{grid-template-columns:110px 1fr}.video-motto{display:none}.video-heading h2{font-size:31px}.video-layout{grid-template-columns:250px minmax(0,1fr)}.playlist-item{grid-template-columns:65px 1fr;gap:8px}.playlist-scroll{max-height:390px}.video-main h3{font-size:24px}.video-demo-brand .brand-logo{width:100px;height:60px;margin-bottom:10px}.video-main .play{width:48px;height:48px;margin-bottom:10px}.video-main .video-frame{padding:18px}.contact-socials{grid-template-columns:repeat(2,minmax(0,1fr))}.transition-card .visual{height:150px}}
@media(max-width:760px){.nav-about{display:grid;grid-template-columns:1fr 40px}.nav-about-disclosure{display:contents}.nav-about-disclosure summary{grid-column:2;grid-row:1;padding:8px 12px;text-align:center}.nav-about-disclosure>div{grid-column:1/-1}.person{grid-template-columns:44% 56%;padding:15px}.person .visual.portrait{min-height:340px}.person .card-body h3{font-size:26px}.person .card-body p:not(.role){font-size:14px}.hero-values{gap:10px}.hero-values .asset-icon{width:52px;height:52px}.hero-values span{font-size:10px}.video-heading{grid-template-columns:75px 1fr;gap:14px;text-align:left}.video-heading>.brand-logo{width:75px;height:55px}.video-heading h2{font-size:26px;margin-bottom:9px}.video-heading p{font-size:11px}.video-layout{grid-template-columns:1fr}.video-main{grid-row:1}.video-playlist{grid-row:2}.playlist-scroll{max-height:285px}.playlist-item{grid-template-columns:100px 1fr}.playlist-item strong{font-size:14px}.playlist-item small{font-size:12px}.playlist-item em{font-size:10px}.video-main .video-frame{min-height:250px}.video-main h3{font-size:26px}.video-demo-brand .brand-logo{width:95px;height:55px}.content-transition{padding:32px 20px;margin-top:35px}.transition-intro h2{font-size:30px}.content-transition .prevnext a{font-size:18px;padding:15px}.content-transition .grid.three{grid-template-columns:1fr}.transition-card{display:grid;grid-template-columns:42% 58%}.transition-card .visual{height:180px}.transition-card h3{font-size:22px}.transition-card>div:last-child{align-self:center}.contact-reference h2{font-size:38px}.contact-reference .hotline{font-size:23px}.contact-reference h3{font-size:20px}.contact-address{font-size:14px}}
@media(max-width:420px){.person{grid-template-columns:42% 58%;padding:12px}.person .visual.portrait{min-height:360px}.person .card-body{padding-left:14px}.person .card-body h3{font-size:23px}.person .role{font-size:12px}.person .card-body p:not(.role){font-size:12px}.person .eyebrow{font-size:9px;letter-spacing:.7px}.hero-values>div{flex-direction:column;align-items:flex-start;gap:7px}.hero-values .asset-icon{width:65px;height:65px}.hero-values span{font-size:10px}.brand-hero-copy{padding:23px 20px}.brand-hero-copy h1{font-size:30px}.contact-socials{grid-template-columns:1fr;gap:20px}.content-transition{padding:28px 15px}.transition-intro h2{font-size:27px}.transition-card .visual{height:160px}.transition-card h3{font-size:20px}}
@media(max-width:760px){.nav-about{display:block}.nav-about-link{display:block;padding-right:45px}.nav-about-disclosure{display:block!important}.nav-about-disclosure summary{position:absolute;right:0;top:0;width:40px;height:40px;padding:8px 12px}.nav-about-disclosure>div{position:static!important;width:auto}}
@media(max-width:760px){.person{display:flex;flex-direction:column;padding:18px}.person .visual.portrait{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:auto}.person .visual.portrait img{width:100%;height:auto;object-fit:contain}.person .card-body{padding:25px 5px 10px}.person .card-body h3{font-size:31px}.person .role{font-size:16px}.person .card-body p:not(.role){font-size:15px}.person .eyebrow{font-size:11px;letter-spacing:1.3px}}

/* Exact user-reference medallions via an unchanged screenshot sprite. */
.hero-medallion{display:block;flex:0 0 65px;width:65px;height:65px;border-radius:50%;background-repeat:no-repeat}.hero-value-plant{background-image:url('/assets/r23-optimized/r12/hero-value-plant.png.webp');background-size:72.77678571px 72.77678571px;background-position:-4.06250000px -4.06250000px}.hero-value-flavor{background-image:url('/assets/r23-optimized/r12/hero-value-flavor.png.webp');background-size:84.90625000px 84.90625000px;background-position:-8.46354167px 0.00000000px}.hero-value-sustainable{background-image:url('/assets/r23-optimized/r12/hero-value-sustainable.png.webp');background-size:95.89411765px 95.89411765px;background-position:-13.38235294px 0.00000000px}
.person{grid-template-columns:44% 56%}.person .visual.portrait{position:relative;min-height:0;height:auto;max-height:none;aspect-ratio:3/4;align-self:center}.person .visual.portrait img{object-fit:cover;object-position:center 25%}.person-vl04 .visual.portrait img{position:absolute;width:100%;height:auto;max-width:none;left:0;top:-12%;object-fit:cover}
@media(max-width:1180px) and (min-width:1025px){.hero-values>div{flex-direction:column;align-items:flex-start}.hero-values{gap:8px}}
@media(max-width:760px){.person .visual.portrait{height:auto;aspect-ratio:3/4;min-height:0}.person .visual.portrait img{height:100%;object-fit:cover}.person-vl04 .visual.portrait img{height:auto}.hero-values>div{flex-direction:column;align-items:flex-start}.hero-values{gap:12px}}
/* R06 — supplied four-article editorial study, scoped to About bodies. */
.editorial-wrap{max-width:1240px}.editorial-study{background:#faf9f4;border-radius:14px;overflow:hidden;box-shadow:0 14px 60px #133b2a14;color:#1a3e2d;margin:30px 0 50px}.editorial-top{padding:76px 8% 62px;background:linear-gradient(115deg,#f8f4e8,#e9eee5)}.editorial-top h1{font:400 clamp(36px,4vw,58px)/1.14 Georgia,serif;letter-spacing:-.025em;max-width:800px;margin:14px 0 22px}.editorial-top p{max-width:720px}.editorial-top .eyebrow{color:#9b8753;font-size:13px;font-weight:700}.editorial-top.with-portrait{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:32px;align-items:center}.editorial-top .visual.portrait{height:360px;border-radius:10px}.editorial-top .visual.portrait img{object-fit:contain}.editorial-chapter{display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:56px;padding:58px 8%;border-top:1px solid #d9e2d8}.editorial-chapter.alternate{background:#f6f4ed}.editorial-heading{padding-right:15px}.editorial-heading>span{font:35px Georgia,serif;color:#9c905e}.editorial-heading h2{font:400 clamp(26px,2.5vw,37px)/1.2 Georgia,serif;color:#174331;letter-spacing:0;margin:8px 0}.editorial-copy{min-width:0;font-size:17px;line-height:1.85;max-width:660px}.editorial-copy p{margin:0 0 20px}.editorial-copy p:last-child{margin-bottom:0}.editorial-duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:35px 22%;background:#f1f4ec}.editorial-duo .visual{height:310px;border-radius:10px}.editorial-duo img{object-fit:contain}.content-transition .transition-card[aria-current=page]{border:2px solid #8ba999}.content-transition .grid.four{gap:18px}.content-transition .grid.four .transition-card h3{font-size:21px}.distribution-source{height:auto!important;min-height:0!important;aspect-ratio:auto!important;background:#f7f3e7}.distribution-source img{width:100%;height:auto;object-fit:contain}.partner-banner{margin-bottom:38px}.map-caption{padding:25px 0}.nav>details>div,.nav-about-disclosure>div{z-index:30}.nav-group:last-of-type .nav-about-disclosure>div{left:auto!important;right:0}.nav-about-disclosure summary{min-width:30px;min-height:40px;display:flex;align-items:center;justify-content:center}.nav details[open]>summary{color:#a3833d}.nav-about:focus-within>.nav-about-link{color:#a3833d}
@media(max-width:1100px){.nav{gap:12px}.content-transition .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.editorial-top.with-portrait{grid-template-columns:minmax(0,1fr) 220px}.editorial-chapter{gap:35px}}
@media(max-width:760px){.editorial-wrap{padding-left:20px;padding-right:20px}.editorial-top{padding:35px 6% 32px}.editorial-top h1{font-size:32px}.editorial-top.with-portrait{display:block}.editorial-top .visual.portrait{height:350px;margin-top:25px}.editorial-chapter{display:block;padding:28px 6%}.editorial-heading h2{font-size:25px;margin-bottom:22px}.editorial-copy{font-size:16px}.editorial-duo{padding:16px 6%;gap:10px}.editorial-duo .visual{height:210px}.content-transition .grid.four{grid-template-columns:1fr}.nav-about-disclosure summary{min-width:44px;min-height:44px}.nav-group:last-of-type .nav-about-disclosure>div{right:auto}}
@media(max-width:1000px){.nav-about{display:block;position:relative;width:100%}.nav-about>.nav-about-link{display:block;padding:10px 50px 10px 0}.nav-about-disclosure{display:block!important;position:static!important}.nav-about-disclosure summary{position:absolute;right:0;top:0;width:44px;height:44px}.nav-about-disclosure>div{position:static!important;width:100%;padding:5px 12px 12px!important}.nav-about-disclosure>div a{white-space:normal}.nav{max-height:calc(100vh - 100px);overflow-y:auto}}
/* R07 shared navigation and footer complete the About-reference page shell. */
.shared-transition .card{border-radius:7px;overflow:hidden}.shared-transition .card .visual{height:180px}.shared-transition .card-body{padding:18px}.shared-transition .card-body h3{font-size:21px}.shared-transition .card-body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.footer-grid{grid-template-columns:1.2fr repeat(7,minmax(0,1fr));gap:23px}.footer-grid h3{font-size:12px;line-height:1.5}.footer-grid a{font-size:11px;line-height:1.6;overflow-wrap:break-word}.footer-bottom a{display:inline;font-size:inherit}.explore .minor .visual img[src*="partner-booth"]{object-fit:contain}
@media(max-width:1180px){.footer-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}.shared-transition .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}.footer-grid a{font-size:12px}.shared-transition .grid.three,.shared-transition .grid.four{grid-template-columns:1fr}.shared-transition .card .visual{height:230px}}
.nav .nav-brand-mark{display:inline-block;width:48px;height:36px;object-fit:contain;vertical-align:middle;margin-right:10px}

.handoff-r08{margin:35px 0;font:16px/1.7 system-ui,Arial,sans-serif;color:#194330;background:#faf8f1}.handoff-r08 *{box-sizing:border-box}.handoff-r08 h1,.handoff-r08 h2,.handoff-r08 h3{letter-spacing:normal}.handoff-r08 .hero{position:static;margin:0;min-height:0;overflow:visible;display:grid;align-items:stretch}.handoff-r08 .visual{height:auto;min-height:0;overflow:visible}.handoff-r08 .section{padding:0}.handoff-r08 .eyebrow{display:block;margin:0}.handoff-r08 .copy{padding:0}.handoff-r08 .editorial{min-width:0}.handoff-r08 .wrap{padding-left:20px;padding-right:20px}.handoff-r08 .cta{font-size:16px}.handoff-r08 .tag{border:0;background:none;padding:0}.handoff-r08 .intro{margin:0}.handoff-r08 .slot{overflow:hidden}
.handoff-r08.handoff-brand *{box-sizing:border-box}.handoff-r08.handoff-brand{margin:0;background:#eaece5;color:#194330;font:16px/1.7 system-ui,sans-serif}.handoff-r08.handoff-brand header{background:#183e2e;color:#fff;padding:22px max(5%,calc((100vw - 1150px)/2))}.handoff-r08.handoff-brand header h2{margin:0;font-size:22px}.handoff-r08.handoff-brand header p{margin:0;color:#c4d6c9}.handoff-r08.handoff-brand .wrap{max-width:1150px;margin:25px auto;padding:0 18px}.handoff-r08.handoff-brand .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.handoff-r08.handoff-brand .tabs button{border:1px solid #aebeb0;background:#fff;color:#17432f;padding:12px 18px;cursor:pointer;border-radius:6px}.handoff-r08.handoff-brand .tabs .on{background:#17432f;color:white}.handoff-r08.handoff-brand .article{background:#faf8f1;border:1px solid #d3dcd0}.handoff-r08.handoff-brand .lead{padding:62px 9% 48px;background:linear-gradient(95deg,#f6f4ea 5%,rgba(246,244,234,.94) 60%,rgba(202,217,201,.56));border-bottom:1px solid #d4dfd1}.handoff-r08.handoff-brand .lead h1{font:normal 48px/1.12 Georgia,serif;margin:14px 0 25px;max-width:790px}.handoff-r08.handoff-brand .lead p{max-width:780px}.handoff-r08.handoff-brand .eyebrow{letter-spacing:2px;font-size:12px;font-weight:bold;color:#768b7a}.handoff-r08.handoff-brand .editorial{display:grid;grid-template-columns:34% 66%;padding:44px 9%;gap:28px;border-bottom:1px solid #d8e0d5}.handoff-r08.handoff-brand .editorial:nth-child(odd){background:#f5f5ee}.handoff-r08.handoff-brand .index{font:40px Georgia;color:#ab9b67}.handoff-r08.handoff-brand .side h3{font:normal 28px/1.2 Georgia,serif;margin:12px 0}.handoff-r08.handoff-brand .articlecopy{max-width:640px}.handoff-r08.handoff-brand .articlecopy p{margin:0 0 15px}.handoff-r08.handoff-brand .image-slot{min-height:240px;border:2px dashed #a1b5a7;background:linear-gradient(110deg,rgba(219,231,214,.7),rgba(241,243,231,.8)),linear-gradient(90deg,transparent 40%,#cedbcc);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px;padding:25px;margin:22px 0;color:#55705c}.handoff-r08.handoff-brand .image-label{letter-spacing:2px;font-size:12px;font-weight:700}.handoff-r08.handoff-brand .image-slot small{font-size:12px}.handoff-r08.handoff-brand .cta{padding:30px 9%;font-weight:bold;border-top:1px solid #ddd}.handoff-r08.handoff-brand .cta small{display:block;font-weight:normal;color:#697d6e}.handoff-r08.handoff-brand .foot{padding:15px 0;color:#637469;font-size:13px}@media(max-width:720px){.handoff-r08.handoff-brand .lead{padding:30px 6%}.handoff-r08.handoff-brand .lead h1{font-size:32px}.handoff-r08.handoff-brand .editorial{display:block;padding:28px 6%}.handoff-r08.handoff-brand .side h3{font-size:25px}.handoff-r08.handoff-brand .image-slot{min-height:180px}}
.handoff-r08.handoff-product *{box-sizing:border-box}.handoff-r08.handoff-product{margin:0;background:#f2f0e8;color:#173f2d;font:16px/1.6 system-ui}.handoff-r08.handoff-product header{background:#153f2d;color:white;padding:22px 5%}.handoff-r08.handoff-product h1{margin:0;font-size:25px}.handoff-r08.handoff-product main{max-width:1220px;margin:auto;padding:24px}.handoff-r08.handoff-product nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.handoff-r08.handoff-product button{padding:10px 15px;background:#fff;border:1px solid #c9d4c9;border-radius:7px;color:#18402e;cursor:pointer}.handoff-r08.handoff-product button.active{background:#194632;color:white}.handoff-r08.handoff-product .panel{background:#fffdf8;border:1px solid #ddd9cd;border-radius:10px;overflow:hidden}.handoff-r08.handoff-product .banner{padding:30px 6%;background:#e9ede5}.handoff-r08.handoff-product .banner h1{font:46px Georgia,serif;margin:8px 0}.handoff-r08.handoff-product .tag{letter-spacing:2px;font-size:12px}.handoff-r08.handoff-product .hero{display:grid;grid-template-columns:52% 48%;gap:0;border-bottom:1px solid #ddd}.handoff-r08.handoff-product .hero .visual{min-height:340px;background:#e4e7df;display:flex;align-items:center;justify-content:center;border:2px dashed #b2beb0;margin:25px}.handoff-r08.handoff-product .hero .info{padding:32px}.handoff-r08.handoff-product .hero h3{font:35px Georgia,serif;margin:0 0 10px}.handoff-r08.handoff-product .intro{padding:30px 7%;max-width:1000px}.handoff-r08.handoff-product .editorial{display:grid;grid-template-columns:35% 65%;gap:24px;padding:35px 7%;border-top:1px solid #e1e3dc}.handoff-r08.handoff-product .editorial:nth-of-type(even){background:#f5f6f1}.handoff-r08.handoff-product .editorial h3{font:27px Georgia,serif;margin:0}.handoff-r08.handoff-product .editorial p{margin:0 0 13px}.handoff-r08.handoff-product .bottom{padding:25px 7%;background:#eaf0e8}.handoff-r08.handoff-product .muted{color:#627468}.handoff-r08.handoff-product .flag{color:#9a6d2c}.handoff-r08.handoff-product .section-label{font-size:12px;letter-spacing:1px;color:#7c8d7e}.handoff-r08.handoff-product .shell{border:2px solid #ccd8cc;padding:16px;margin:15px 0;background:#f8faf6}.handoff-r08.handoff-product .shell>div{padding:11px;border-bottom:1px dashed #bdcabc}.handoff-r08.handoff-product .shell>div:last-child{border:0}.handoff-r08.handoff-product .detail{display:grid;grid-template-columns:50% 50%;gap:18px}.handoff-r08.handoff-product .detail .visual{min-height:260px;display:flex;align-items:center;justify-content:center;border:2px dashed #b4c2b3;background:#e6eae4}.handoff-r08.handoff-product .qa{padding:12px 0;font-size:13px;color:#5b6d5e}@media(max-width:750px){.handoff-r08.handoff-product .hero,.handoff-r08.handoff-product .editorial,.handoff-r08.handoff-product .detail{display:block}.handoff-r08.handoff-product .hero .visual{min-height:220px}.handoff-r08.handoff-product .banner h1{font-size:32px}.handoff-r08.handoff-product .editorial{padding:24px 6%}.handoff-r08.handoff-product .hero .info{padding:24px}}
.handoff-r08.handoff-product :root{--forest:#174b36;--ink:#183d2e;--cream:#faf7ef;--gold:#b59b67}.handoff-r08.handoff-product{background:#eeeae1;color:var(--ink)}.handoff-r08.handoff-product header{background:linear-gradient(110deg,#143e2d,#255c43);border-bottom:4px solid #b8a270}.handoff-r08.handoff-product main{max-width:1320px}.handoff-r08.handoff-product nav{position:sticky;top:0;z-index:5;padding:12px 0;background:#eeeae1ee;backdrop-filter:blur(10px)}.handoff-r08.handoff-product button{border-radius:30px;padding:11px 19px;transition:background .2s}.handoff-r08.handoff-product button:focus-visible{outline:3px solid #b69c62;outline-offset:2px}.handoff-r08.handoff-product .panel{border:1px solid #ddd9cc;box-shadow:0 12px 40px #193d2b0b;border-radius:3px}.handoff-r08.handoff-product .banner{background:linear-gradient(125deg,#f9f5e9,#eaf1e7);padding:48px 7%}.handoff-r08.handoff-product .banner h1{font-size:clamp(34px,4vw,56px);line-height:1.13;letter-spacing:-.8px}.handoff-r08.handoff-product .hero{grid-template-columns:52% 48%;align-items:stretch}.handoff-r08.handoff-product .hero .visual{margin:28px;background:radial-gradient(ellipse at 55% 40%,#f8f6ed,#e3e9df);border:1px dashed #9aaa99;aspect-ratio:4/3;min-height:0;position:relative;overflow:hidden;padding:28px;text-align:center;color:#627968;font-weight:600}.handoff-r08.handoff-product .hero .visual:before{content:'ẢNH 4:3 – CHƯA NGHIỆM THU';position:absolute;top:12px;left:12px;background:#ffffffc9;border:1px solid #c4d1c5;padding:5px 9px;font:11px system-ui;letter-spacing:1px}.handoff-r08.handoff-product .hero .info{padding:clamp(24px,4vw,60px);display:flex;flex-direction:column;justify-content:center}.handoff-r08.handoff-product .hero h3{font-size:clamp(28px,3vw,42px)}.handoff-r08.handoff-product .intro{padding:44px 8%;max-width:none}.handoff-r08.handoff-product .editorial{padding:52px 8%;grid-template-columns:34% 66%;gap:30px}.handoff-r08.handoff-product .editorial h3{font-size:clamp(24px,2.4vw,32px);line-height:1.2}.handoff-r08.handoff-product .editorial p{line-height:1.85;max-width:720px}.handoff-r08.handoff-product .editorial:nth-of-type(even){background:#f5f5ef}.handoff-r08.handoff-product .bottom{padding:32px 8%;background:#e9efe7}.handoff-r08.handoff-product .ui-ribbon{padding:10px 5%;font-size:12px;background:#fdf2d8;color:#715728;border-bottom:1px solid #e5d4a8}.handoff-r08.handoff-product .ui-note{max-width:1320px;margin:0 auto;padding:14px 24px 35px;color:#64766b;font-size:13px}@media(max-width:740px){.handoff-r08.handoff-product .hero{display:block}.handoff-r08.handoff-product .hero .visual{margin:18px;aspect-ratio:4/3}.handoff-r08.handoff-product .hero .info{padding:26px}.handoff-r08.handoff-product .editorial{display:block;padding:30px 7%}.handoff-r08.handoff-product .editorial h3{margin-bottom:18px}.handoff-r08.handoff-product .banner{padding:34px 7%}.handoff-r08.handoff-product nav{position:static}}
.handoff-r08.handoff-commitment *{box-sizing:border-box}.handoff-r08.handoff-commitment{margin:0;background:#f4f0e7;color:#244331;font:16px/1.85 system-ui,Arial,sans-serif}.handoff-r08.handoff-commitment header{background:#173d2b;color:#f8f4e9;padding:22px max(24px,calc((100vw - 1180px)/2))}.handoff-r08.handoff-commitment header h1{font-size:19px;letter-spacing:.05em;margin:0}.handoff-r08.handoff-commitment header p{font-size:13px;margin:0;color:#c9dacb}.handoff-r08.handoff-commitment .wrap{max-width:1180px;margin:28px auto;padding:0 20px}.handoff-r08.handoff-commitment .intro,.handoff-r08.handoff-commitment .outro,.handoff-r08.handoff-commitment .editorial{background:#fffdf8;border:1px solid #e1ded1;padding:64px 8%}.handoff-r08.handoff-commitment .intro{background:linear-gradient(115deg,#e7ede4,#faf5e9);border-radius:16px 16px 0 0}.handoff-r08.handoff-commitment .intro h1{font:normal clamp(35px,4vw,58px)/1.12 Georgia,serif;letter-spacing:-.03em;margin:18px 0 28px}.handoff-r08.handoff-commitment .intro p{max-width:740px;font-size:17px}.handoff-r08.handoff-commitment .tag{font-size:12px;letter-spacing:2.5px;color:#52745b;font-weight:700}.handoff-r08.handoff-commitment .editorial{display:grid;grid-template-columns:39% 61%;gap:40px;border-top:0}.handoff-r08.handoff-commitment .editorial:nth-of-type(odd){background:#f9faf4}.handoff-r08.handoff-commitment .heading span{font:42px Georgia;color:#b6a479}.handoff-r08.handoff-commitment .heading h2,.handoff-r08.handoff-commitment .outro h2{font:normal 33px/1.2 Georgia,serif;margin:12px 0 22px;letter-spacing:-.015em}.handoff-r08.handoff-commitment .content{padding-right:20px}.handoff-r08.handoff-commitment .content p{margin:0 0 19px}.handoff-r08.handoff-commitment .imagebox{margin:26px 10px 0 0;aspect-ratio:4/3;background:linear-gradient(145deg,#dce7db,#eae9dc);border:1px dashed #91a990;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:#5d7563;font-size:12px;border-radius:10px;letter-spacing:.03em}.handoff-r08.handoff-commitment .imagebox small{display:block;font-size:11px;letter-spacing:0}.handoff-r08.handoff-commitment .outro{background:#e9efe7;border-radius:0 0 16px 16px}.handoff-r08.handoff-commitment .outro p{max-width:780px}.handoff-r08.handoff-commitment .hold{margin-top:22px;background:#fff8e9;border-left:4px solid #b49a63;padding:20px;border-radius:5px}.handoff-r08.handoff-commitment footer{padding:24px;color:#657667;font-size:13px}@media(max-width:700px){.handoff-r08.handoff-commitment .wrap{padding:0 12px}.handoff-r08.handoff-commitment .intro,.handoff-r08.handoff-commitment .outro,.handoff-r08.handoff-commitment .editorial{padding:32px 7%}.handoff-r08.handoff-commitment .intro h1{font-size:37px}.handoff-r08.handoff-commitment .editorial{display:block}.handoff-r08.handoff-commitment .heading h2{font-size:29px}.handoff-r08.handoff-commitment .imagebox{margin:20px 0 28px}.handoff-r08.handoff-commitment .content{padding:0}.handoff-r08.handoff-commitment .intro p{font-size:16px}}
.handoff-r08.handoff-journal *{box-sizing:border-box}.handoff-r08.handoff-journal{margin:0;background:#edeae2;color:#234332;font:16px/1.8 system-ui,Arial}.handoff-r08.handoff-journal header{background:#183d2d;color:white;padding:24px 5%}.handoff-r08.handoff-journal header h1{font-size:23px;margin:0}.handoff-r08.handoff-journal header p{margin:0;color:#d7e2d8;font-size:13px}.handoff-r08.handoff-journal .wrap{max-width:1160px;margin:auto;padding:24px 18px 70px}.handoff-r08.handoff-journal .tabs{display:flex;gap:10px;margin:0 0 18px;flex-wrap:wrap}.handoff-r08.handoff-journal .tabs button{border:1px solid #bcc9bc;background:white;color:#234332;border-radius:9px;padding:12px 18px;font-weight:650;cursor:pointer}.handoff-r08.handoff-journal .tabs button.active{background:#234b35;color:white}.handoff-r08.handoff-journal .article{background:#fffdf8;border:1px solid #d8dfd4;border-radius:13px;overflow:hidden}.handoff-r08.handoff-journal .opening{padding:64px 11% 44px;background:#f5f5ec}.handoff-r08.handoff-journal .eyebrow{letter-spacing:2px;font-size:12px;color:#6e886f}.handoff-r08.handoff-journal .opening h1{font:normal clamp(32px,4vw,54px)/1.13 Georgia,serif;max-width:850px;margin:16px 0 26px}.handoff-r08.handoff-journal .lead{max-width:750px;font-size:18px}.handoff-r08.handoff-journal .lead p{margin:0 0 14px}.handoff-r08.handoff-journal .slot{background:linear-gradient(135deg,#e0e8dc,#e9e3d3);border:2px dashed #9eae9d;border-radius:8px;min-height:235px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:22px;color:#647f69;gap:9px}.handoff-r08.handoff-journal .slot span{font-size:12px;letter-spacing:2px}.handoff-r08.handoff-journal .slot strong{font:normal 23px Georgia,serif}.handoff-r08.handoff-journal .slot small{font-size:12px}.handoff-r08.handoff-journal .slot.wide{margin:22px 8%;aspect-ratio:16/7;min-height:230px}.handoff-r08.handoff-journal .slot.slim{aspect-ratio:16/5;min-height:180px}.handoff-r08.handoff-journal .slot.float{margin:10px 18% 34px;aspect-ratio:4/3;max-height:440px}.handoff-r08.handoff-journal .section{display:grid;grid-template-columns:25% 75%;padding:45px 11%;border-top:1px solid #e3e6dd;gap:25px}.handoff-r08.handoff-journal .section.feature{background:#f1f4ed}.handoff-r08.handoff-journal .num{font:normal 48px Georgia,serif;color:#b5a277}.handoff-r08.handoff-journal .copy{max-width:710px}.handoff-r08.handoff-journal .copy h3{font:normal 32px/1.2 Georgia,serif;margin:6px 0 25px}.handoff-r08.handoff-journal .copy p{margin:0 0 16px}.handoff-r08.handoff-journal .notice{background:#fff6e2;padding:18px;border-left:4px solid #b19762;margin:22px 0}.handoff-r08.handoff-journal .compare{background:white;border:1px solid #d8dfd4;border-radius:10px;margin-top:22px;padding:20px;overflow:auto}.handoff-r08.handoff-journal table{border-collapse:collapse;width:100%;min-width:630px;font-size:14px}.handoff-r08.handoff-journal th,.handoff-r08.handoff-journal td{border:1px solid #dce2d9;padding:12px;text-align:left;vertical-align:top}.handoff-r08.handoff-journal th{background:#e8efe6}@media(max-width:700px){.handoff-r08.handoff-journal .opening{padding:34px 7%}.handoff-r08.handoff-journal .opening h1{font-size:34px}.handoff-r08.handoff-journal .lead{font-size:16px}.handoff-r08.handoff-journal .section{display:block;padding:32px 7%}.handoff-r08.handoff-journal .copy h3{font-size:27px}.handoff-r08.handoff-journal .num{font-size:35px}.handoff-r08.handoff-journal .slot.wide,.handoff-r08.handoff-journal .slot.slim{margin:16px 5%;aspect-ratio:4/3}.handoff-r08.handoff-journal .slot.float{margin:16px 9%;aspect-ratio:4/3}.handoff-r08.handoff-journal .slot strong{font-size:19px}}.handoff-r08.handoff-journal{background:#f1eee7;color:#1d3e2e}.handoff-r08.handoff-journal header{background:#143b2c;border-bottom:3px solid #b5a578}.handoff-r08.handoff-journal .wrap{max-width:1200px}.handoff-r08.handoff-journal .article{box-shadow:0 12px 35px rgba(27,49,32,.07);border-color:#e0e5da}.handoff-r08.handoff-journal .opening{background:linear-gradient(125deg,#f4f6ed 0%,#f9f3e8 100%);padding-top:78px;padding-bottom:58px}.handoff-r08.handoff-journal .opening h1{letter-spacing:-.025em;line-height:1.1}.handoff-r08.handoff-journal .eyebrow{color:#5e7e62;font-weight:700}.handoff-r08.handoff-journal .section{border-color:#e5e7df}.handoff-r08.handoff-journal .section.feature{background:#edf2e9}.handoff-r08.handoff-journal .copy p{color:#32483a}.handoff-r08.handoff-journal .slot{border:1.5px dashed #90a694;background:linear-gradient(135deg,#e6eee3,#e5e6da);box-shadow:inset 0 0 0 8px rgba(255,255,255,.25)}.handoff-r08.handoff-journal .slot strong{font-size:clamp(18px,2vw,26px)}.handoff-r08.handoff-journal .slot.wide{border-radius:12px}.handoff-r08.handoff-journal .slot.float{border-radius:12px}.handoff-r08.handoff-journal .slot.slim{border-radius:12px}.handoff-r08.handoff-journal .notice{border-radius:6px}@media(max-width:700px){.handoff-r08.handoff-journal .opening{padding-top:40px;padding-bottom:35px}.handoff-r08.handoff-journal .slot{min-height:180px}.handoff-r08.handoff-journal .slot.slim{min-height:150px}}
.handoff-r08.handoff-distribution *{box-sizing:border-box}.handoff-r08.handoff-distribution{font:16px/1.75 system-ui,-apple-system,Arial;margin:0;background:#f6f3ec;color:#234735}.handoff-r08.handoff-distribution header{background:#153d2b;color:white;padding:28px 6%;border-bottom:4px solid #b49b69}.handoff-r08.handoff-distribution header h1{margin:0;font:normal 29px Georgia,serif;letter-spacing:-.02em}.handoff-r08.handoff-distribution main{max-width:1180px;margin:auto;padding:34px 20px}.handoff-r08.handoff-distribution .shell{background:#fffefa;border:1px solid #e1e7dc;border-radius:16px;margin-bottom:25px;padding:35px;box-shadow:0 12px 30px rgba(26,58,39,.05)}.handoff-r08.handoff-distribution .lock{background:#e9efe8;color:#42644b;padding:14px;border-radius:8px;font-size:13px}.handoff-r08.handoff-distribution .hero{height:220px;display:grid;place-content:center;text-align:center;background:linear-gradient(125deg,#dce8dc,#f2efe3);border:1.5px dashed #8eab94;border-radius:12px;margin-top:20px}.handoff-r08.handoff-distribution .columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}.handoff-r08.handoff-distribution .box{padding:35px;border:1px solid #d7e2d6;border-radius:16px;background:#fffefa;box-shadow:0 12px 30px rgba(26,58,39,.05)}.handoff-r08.handoff-distribution .media{height:220px;background:linear-gradient(125deg,#e6eee3,#f0eee6);border:1.5px dashed #9eb6a2;display:grid;place-items:center;text-align:center;color:#56705b;margin:20px 0;border-radius:12px;padding:20px}.handoff-r08.handoff-distribution .placeholder{padding:22px;background:#faf4e8;border-left:4px solid #b49b69;border-radius:5px;font-size:14px}.handoff-r08.handoff-distribution .flow{display:flex;gap:10px;flex-wrap:wrap}.handoff-r08.handoff-distribution .flow span{padding:11px 13px;background:#e8f0e7;border:1px solid #d6e2d4;border-radius:8px;font-size:14px}.handoff-r08.handoff-distribution .note{font-size:13px;color:#647b6b}.handoff-r08.handoff-distribution h2{font:normal 30px Georgia,serif;letter-spacing:-.02em;margin:10px 0}.handoff-r08.handoff-distribution h3{font-size:17px;margin-top:28px}.handoff-r08.handoff-distribution .box h2:before{content:'';display:block;width:40px;height:3px;background:#ad9c6e;margin-bottom:16px}.handoff-r08.handoff-distribution .shell>h2{margin-top:25px}.handoff-r08.handoff-distribution .status{display:inline-block;background:#f2e5cd;color:#74572c;padding:5px 10px;border-radius:30px;font-size:11px;letter-spacing:.07em;font-weight:700;margin-top:15px}@media(max-width:760px){.handoff-r08.handoff-distribution .columns{grid-template-columns:1fr}.handoff-r08.handoff-distribution .shell,.handoff-r08.handoff-distribution .box{padding:24px}.handoff-r08.handoff-distribution .hero{height:160px}.handoff-r08.handoff-distribution header h1{font-size:23px}.handoff-r08.handoff-distribution h2{font-size:26px}.handoff-r08.handoff-distribution .media{height:170px}}
.handoff-r08.handoff-contact *{box-sizing:border-box}.handoff-r08.handoff-contact{margin:0;background:#f5f2eb;color:#173f2e;font:16px/1.6 system-ui,Arial}.handoff-r08.handoff-contact .head{background:#153d2c;color:#fff;padding:22px 5%}.handoff-r08.handoff-contact .head h1{font-size:24px;margin:0}.handoff-r08.handoff-contact .head small{color:#c4d7c9}.handoff-r08.handoff-contact .wrap{max-width:1180px;margin:auto;padding:25px 20px}.handoff-r08.handoff-contact .shell{background:#fffdf8;border:1px solid #dce4d9;border-radius:12px;padding:26px;margin:18px 0}.handoff-r08.handoff-contact h2{font:normal 32px Georgia,serif;margin:12px 0}.handoff-r08.handoff-contact h3{margin:0 0 8px;font-size:20px}.handoff-r08.handoff-contact .hero{background:#e8eee7;min-height:150px;padding:30px 35px}.handoff-r08.handoff-contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.handoff-r08.handoff-contact .actions{display:grid;grid-template-columns:1fr 1fr;gap:15px}.handoff-r08.handoff-contact .card{border:1px solid #cbdacb;padding:20px;background:#f7faf6;border-radius:9px}.handoff-r08.handoff-contact .placeholder{border:2px dashed #a1b6a5;background:#edf1e9;min-height:190px;display:grid;place-items:center;text-align:center;color:#5b7863}.handoff-r08.handoff-contact .hold{color:#87622c;background:#fff5e3;border-left:4px solid #c3a36a;padding:10px 13px;margin:10px 0}.handoff-r08.handoff-contact .pill{display:inline-block;background:#e1ebe2;padding:8px 14px;margin:5px;border-radius:6px}.handoff-r08.handoff-contact .meta{font-size:13px;color:#677b6b}.handoff-r08.handoff-contact .lock{padding:14px;background:#e9ede8}@media(max-width:700px){.handoff-r08.handoff-contact .grid,.handoff-r08.handoff-contact .actions{grid-template-columns:1fr}.handoff-r08.handoff-contact .shell{padding:18px}.handoff-r08.handoff-contact .hero{padding:22px}.handoff-r08.handoff-contact h2{font-size:27px}}.handoff-r08.handoff-contact{background:#f1eee5;color:#183f2e;line-height:1.75}.handoff-r08.handoff-contact .head{background:#173e2c;padding:32px 6%;border-bottom:4px solid #b8a16f}.handoff-r08.handoff-contact .head h1{font:normal 30px Georgia,serif}.handoff-r08.handoff-contact .wrap{max-width:1200px}.handoff-r08.handoff-contact .shell{background:#fffdf8;box-shadow:0 8px 25px rgba(27,58,40,.04);border-color:#e4e4d9;padding:34px;margin:24px 0}.handoff-r08.handoff-contact .hero{background:linear-gradient(110deg,#e7eee6,#f7f1e4);min-height:195px}.handoff-r08.handoff-contact .hero h2{font-size:45px}.handoff-r08.handoff-contact .card{background:#f8faf6;border-radius:10px;padding:25px}.handoff-r08.handoff-contact .card h3{font:normal 25px Georgia,serif}.handoff-r08.handoff-contact .placeholder{border-radius:10px;background:linear-gradient(145deg,#e5ede3,#ede9dc);min-height:260px}.handoff-r08.handoff-contact .pill{background:#edf2e9;color:#29523a;padding:10px 16px}.handoff-r08.handoff-contact .hold{background:#fff6e6;color:#785e31}.handoff-r08.handoff-contact .lock{background:#e8eee7;color:#3b6348}.handoff-r08.handoff-contact h2{font-size:36px;line-height:1.2}.handoff-r08.handoff-contact .meta{letter-spacing:1.1px;text-transform:uppercase;font-weight:700;font-size:11px;color:#6b806d}@media(max-width:700px){.handoff-r08.handoff-contact .shell{padding:22px}.handoff-r08.handoff-contact .hero h2{font-size:36px}.handoff-r08.handoff-contact .head h1{font-size:25px}.handoff-r08.handoff-contact .placeholder{min-height:180px}}
.handoff-r08.handoff-journal .section{grid-template-columns:minmax(0,25fr) minmax(0,75fr)}.handoff-r08.handoff-contact .hero{display:block}.handoff-r08.handoff-contact .hero h1{font:normal 45px/1.2 Georgia,serif;margin:12px 0}.handoff-r08.handoff-contact .card{display:block}.handoff-r08.handoff-contact a.pill,.handoff-r08.handoff-contact [data-contact-block="02"] a,.handoff-r08.handoff-distribution .handoff-r08.handoff-contact-entry{display:inline-flex;min-height:44px;align-items:center;justify-content:center}.handoff-r08.handoff-distribution .handoff-r08.handoff-contact-entry{text-decoration:underline}@media(max-width:700px){.handoff-r08.handoff-contact .hero h1{font-size:36px}}.handoff-r08.handoff-brand .editorial{grid-template-columns:minmax(0,34fr) minmax(0,66fr)}.handoff-r08.handoff-product .editorial{grid-template-columns:minmax(0,35fr) minmax(0,65fr)}.handoff-r08.handoff-product .detail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.handoff-r08.handoff-commitment .editorial{grid-template-columns:minmax(0,39fr) minmax(0,61fr)}.handoff-r08.handoff-distribution{margin:0;background:transparent}.handoff-r08.handoff-distribution .supplied-media{height:auto;min-height:0;display:block;padding:0;border:0;background:none}.handoff-r08.handoff-distribution .supplied-media img{width:100%;height:auto;object-fit:contain;border-radius:12px}.handoff-r08.handoff-distribution .supplied-media small{display:block;font-size:11px;margin-top:10px}.handoff-r08 [data-source-copy]{overflow-wrap:break-word}@media(max-width:750px){.handoff-r08.handoff-product .editorial,.handoff-r08.handoff-product .detail{display:block}}@media(max-width:720px){.handoff-r08.handoff-brand .editorial{display:block}}@media(max-width:700px){.handoff-r08.handoff-commitment .editorial{display:block}.handoff-r08{margin-top:25px}}
/* R15: keep the product visual inside its own grid track, independent of text height. */
.handoff-r08.handoff-product .hero{grid-template-columns:minmax(0,52fr) minmax(0,48fr)}
.handoff-r08.handoff-product .hero>.visual{align-self:start;justify-self:stretch;min-width:0;width:calc(100% - 56px);max-width:calc(100% - 56px);height:auto;aspect-ratio:4/3}
.handoff-r08.handoff-product .hero>.info{min-width:0;overflow-wrap:anywhere}
.handoff-r08.handoff-product .hero>.visual img{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:750px){.handoff-r08.handoff-product .hero{display:block}}
@media(max-width:740px){.handoff-r08.handoff-product .hero>.visual{width:calc(100% - 36px);max-width:calc(100% - 36px)}}

/* Loving R16 typography-only candidate. Load LAST on every HTML route.
 * Three exact rendered text sizes: 16px / 24px / 32px, all viewports.
 * Existing image pixels, copy, colors, DOM order and grid columns stay intact.
 * !important intentionally retires legacy inline/breakpoint font sizes.
 */
html body {
  font-size: 16px !important;
  font-family: Arial, sans-serif !important;
  line-height: 1.6;
}
html body * {
  font-size: inherit !important;
  font-family: inherit !important;
}
html body *::before,
html body *::after {
  font-size: inherit !important;
  font-family: inherit !important;
}

/* Level 1: page titles and section titles. */
html body h1,
html body h2 {
  font-size: 32px !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

/* Level 2: subheadings and card titles. */
html body h3,
html body h4,
html body h5,
html body h6,
html body .quick-links strong,
html body .closing p {
  font-size: 24px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

/* Level 3: body, navigation, controls, labels, and descriptive captions.
 * Explicit exceptions also override the old .article-lead !important rule.
 */
html body .article-lead,
html body .eyebrow,
html body .tag,
html body .nav,
html body .button,
html body button,
html body input,
html body select,
html body textarea,
html body .footer h3,
html body .hero-values span,
html body .quick-links small,
html body .playlist-item strong,
html body .playlist-item small,
html body .playlist-item em {
  font-size: 16px !important;
  font-family: Arial, sans-serif !important;
  line-height: 1.5 !important;
}
html body .eyebrow,
html body .tag,
html body .nav,
html body .button,
html body .footer h3,
html body .hero-values span,
html body .quick-links small,
html body label,
html body .playlist-item strong {
  font-weight: 600 !important;
}
html body .eyebrow,
html body .tag {
  letter-spacing: .06em !important;
}

/* Text reflow safeguards; no new columns, reordered sections, or image crops. */
html body :is(h1, h2, h3, h4, h5, h6, p, a, small, button, label, output) {
  overflow-wrap: anywhere;
}
html body :is(.copy, .card-body, .quick-links a > div, .nav, .hero-values span) {
  min-width: 0;
}
html body :is(.button, .nav a, .nav summary, .subnav a, .filter) {
  white-space: normal;
}
html body .hero-values span {
  max-width: none;
}
/* Transcribed raster taglines retain their wording as accessible authored text. */
html body .icon-source-caption {
  display: block;
  font-size: 16px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-top: 8px;
}
/* Larger type must not silently lose words under the legacy three-line clamp. */
html body .shared-transition .card-body p {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* Optional R16 typography correction, held for parent review.
 * ONLY the eight supplied category badges with duplicate baked-in captions.
 * Replaced-element box clips the caption area, while keeping the complete symbol.
 * Original source bytes remain untouched. No logo/product/package selector.
 */
html body img.asset-icon:is(
  [src$="/icon-about.webp"],
  [src$="/icon-products.webp"],
  [src$="/icon-commitment.webp"],
  [src$="/icon-distribution.webp"],
  [src$="/icon-journal-green.webp"],
  [src$="/icon-journal-ingredients.webp"],
  [src$="/icon-journal-journey.webp"],
  [src$="/icon-journal-kitchen.webp"]
) {
  height: auto !important;
  aspect-ratio: 25 / 17;
  object-fit: cover !important;
  object-position: center top !important;
}
/* The raised accent on “Về” starts slightly higher than other captions. */
html body img.asset-icon[src$="/icon-about.webp"] {
  aspect-ratio: 3 / 2;
}

.lf-open{position:fixed;right:18px;bottom:18px;z-index:9990;background:#244b3d;color:#fff;border:1px solid #fff;border-radius:100px;padding:13px 19px;box-shadow:0 3px 16px #0003;font:600 16px system-ui;cursor:pointer}.lf-dialog{width:min(560px,calc(100% - 28px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid #dbdfd7;border-radius:18px;background:#fffdf8;color:#203c31;box-sizing:border-box;overflow:auto;z-index:9991}.lf-dialog::backdrop{background:#10241dc2}.lf-form{display:flex;flex-direction:column;gap:14px;font:16px/1.5 system-ui}.lf-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.lf-heading h2{margin:0;font-size:24px;line-height:1.3}.lf-close{background:none;border:0;font-size:32px;line-height:1;color:inherit;cursor:pointer;padding:4px;min-width:44px;min-height:44px}.lf-form label{display:flex;flex-direction:column;gap:5px;font-size:16px}.lf-form input,.lf-form textarea{width:100%;box-sizing:border-box;border:1px solid #a8b6ad;border-radius:7px;padding:10px;font:16px/1.45 system-ui;color:#203c31;background:#fff}.lf-note{font-size:16px;color:#526257;margin:0}.lf-page{font-size:16px;margin:0;overflow-wrap:anywhere}.lf-status{margin:0;font-size:16px;overflow-wrap:anywhere}.lf-send{background:#244b3d;color:#fff;padding:12px;border:0;border-radius:8px;font:600 16px system-ui;cursor:pointer}.lf-send:disabled{opacity:.6;cursor:wait}.lf-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.lf-dialog :focus-visible,.lf-open:focus-visible{outline:3px solid #cc9b38;outline-offset:3px}@media(max-width:480px){.lf-open{right:12px;bottom:max(12px,env(safe-area-inset-bottom));padding:12px 15px}.lf-dialog{padding:18px}}
/* Scoped additions respect the site's three-size typography without changing page content. */
html body .lf-dialog .lf-heading h2{font-size:24px!important;line-height:1.3!important}html body .lf-dialog .lf-close{font-size:32px!important;line-height:1!important}

/* Real reserved toolbar row. No fixed overlay and no body bottom-padding trick. */
html:has(body.lf-shell) { height: 100%; overflow: hidden; }
body.lf-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
body.lf-shell > #lf-page-viewport {
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  touch-action: auto;
}
body.lf-shell > #lf-page-viewport.lf-drawing-active {
  overflow: hidden;
  touch-action: none;
  scroll-behavior: auto;
}
body.lf-shell > #lf-toolbar {
  grid-row: 2;
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: #fffdf8;
  border-top: 1px solid #dbdfd7;
}
body.lf-shell #lf-toolbar .lf-open {
  position: static;
  inset: auto;
  margin: 0;
  min-height: 44px;
  padding: 9px 15px;
  box-shadow: none;
}
body.lf-shell #lf-page-viewport:focus-visible {
  outline: 2px solid #cc9b38;
  outline-offset: -2px;
}
@media(max-width:1000px) {
  body.lf-shell #lf-page-viewport .nav {
    max-height: calc(100dvh - var(--lf-toolbar-height, 61px) - 100px);
  }
}
@media(prefers-reduced-motion:reduce) {
  body.lf-shell > #lf-page-viewport {scroll-behavior:auto;}
}
@media print {
  html:has(body.lf-shell), body.lf-shell {height:auto;overflow:visible;display:block;}
  body.lf-shell > #lf-page-viewport {height:auto;overflow:visible;display:block;}
  body.lf-shell > #lf-toolbar {display:none;}
}

/* Region selection uses outlines only: approved page geometry stays unchanged. */
body.lf-shell #lf-toolbar .lf-region-open,
.lf-selection-cancel,.lf-region-actions button {
  min-height:44px;
  padding:9px 15px;
  border:1px solid #879c8d;
  border-radius:22px;
  background:#fffdf8;
  color:#244b3d;
  font:600 16px/1.4 system-ui;
  cursor:pointer;
}
body.lf-shell #lf-toolbar .lf-region-open {
  order:-1;
  background:#244b3d;
  border-color:#244b3d;
  color:#fff;
}
body.lf-shell #lf-toolbar .lf-open {background:#fffdf8;color:#244b3d;border-color:#879c8d;}
.lf-selection-tools {display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex:1 1 100%;min-width:0;}
.lf-selection-tools p {flex:1 1 280px;margin:0;color:#203c31;font:16px/1.4 system-ui;}
.lf-selection-tools[hidden],.lf-region-open[hidden],.lf-region-actions button[hidden],.lf-selected-context[hidden] {display:none!important;}
.lf-region-actions {display:flex;flex-wrap:wrap;gap:8px;}
.lf-region-actions button {flex:1 1 auto;}
.lf-selected-context {margin:0;padding:10px 12px;border-left:4px solid #b45616;border-radius:5px;background:#fff0da;color:#203c31;overflow-wrap:anywhere;}
body.lf-shell #lf-page-viewport.lf-selecting-region [data-la-anchor] {cursor:crosshair;}
body.lf-shell #lf-page-viewport.lf-selecting-region [data-la-anchor]:focus-visible {outline:3px dashed #b45616;outline-offset:3px;}
body.lf-shell #lf-page-viewport .lf-selected-region {outline:4px solid #b45616;outline-offset:3px;}
.lf-region-open:focus-visible,.lf-selection-cancel:focus-visible {outline:3px solid #cc9b38;outline-offset:3px;}
.lf-region-open:disabled,.lf-region-actions button:disabled {opacity:.6;cursor:wait;}
@media(max-width:480px) {
  body.lf-shell #lf-toolbar .lf-region-open,body.lf-shell #lf-toolbar .lf-open {flex:1 1 145px;padding:9px 10px;}
  .lf-selection-cancel {width:100%;}
}
@media print {
  body.lf-shell #lf-page-viewport .lf-selected-region {outline:none;}
}

/* Keep the explicit send action reachable inside either scrolling review dialog.
   It remains in normal flow, so the final fields/status can scroll fully above it. */
.lf-dialog {scroll-padding-block:18px 80px;}
.lf-dialog .lf-form > .lf-send {
  position:sticky;
  bottom:0;
  z-index:2;
  flex-shrink:0;
  min-height:48px;
  box-shadow:0 -12px 0 4px #fffdf8;
}
.lf-dialog .lf-form input,.lf-dialog .lf-form textarea {scroll-margin-block:18px 80px;}

/* Private review entry: public link, never public review data. */
body.lf-shell #lf-toolbar .lf-review-link {
  min-height:44px;display:inline-flex;align-items:center;padding:9px 12px;
  color:#244b3d;font:600 16px/1.4 system-ui;text-decoration:underline;
  text-underline-offset:3px;border-radius:8px;
}
.lf-review-link:focus-visible {outline:3px solid #cc9b38;outline-offset:2px;}
@media(max-width:480px){body.lf-shell #lf-toolbar .lf-review-link {padding:4px 8px;min-height:44px;margin-inline:auto;}}
.lf-review-location {flex:1 1 100%;margin:0;color:#244b3d;font:15px/1.4 system-ui;overflow-wrap:anywhere;}

/* R17: user's body-size icon text correction. Append after R16 typography.
 * Only icon-associated text / Explore labels. No copy or image replacement.
 * Overall authored-text scale remains 16 / 24 / 32px.
 */
html body .hero-values span,
html body .quick-links :is(strong, small, .icon-source-caption),
html body .metrics :is(b, h3, p),
html body .card-body:has(> .asset-icon) :is(h3, p, .link, .icon-source-caption),
html body .distribution-heading :is(h2, p, .eyebrow, .icon-source-caption),
html body .explore :is(h3, p, .eyebrow, .link),
html body .icon-source-caption {
  font-size: 16px !important;
  font-family: Arial, sans-serif !important;
  line-height: 1.6 !important;
  letter-spacing: normal !important;
}
/* Body copy stays normal weight, including the transcribed raster taglines. */
html body .hero-values span,
html body .quick-links small,
html body .metrics :is(b, p),
html body .card-body:has(> .asset-icon) :is(p, .link, .icon-source-caption),
html body .distribution-heading :is(p, .eyebrow, .icon-source-caption),
html body .explore :is(p, .eyebrow, .link),
html body .icon-source-caption {
  font-weight: 400 !important;
}
/* Modest distinction for titles, never oversized or heavy body copy. */
html body .quick-links strong,
html body .metrics h3,
html body .card-body:has(> .asset-icon) h3,
html body .distribution-heading h2,
html body .explore h3 {
  font-weight: 600 !important;
  margin-bottom: 6px;
}
html body .icon-source-caption { margin-top: 6px; }

/* Same three values and column order; smaller medallions leave room for words.
 * Sprite crop proportions are scaled exactly from the existing 65px icons.
 */
html body .hero-values { gap: 12px; }
html body .hero-values > div { gap: 8px; }
html body .hero-values .hero-medallion {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}
html body .hero-value-plant {
  background-size: 53.74285714px 53.74285714px;
  background-position: -3px -3px;
}
html body .hero-value-flavor {
  background-size: 62.7px 62.7px;
  background-position: -6.25px 0;
}
html body .hero-value-sustainable {
  background-size: 70.81411765px 70.81411765px;
  background-position: -9.88235294px 0;
}
html body .hero-values span {
  min-width: 0;
  max-width: none;
  overflow-wrap: normal;
  word-break: normal;
}
/* At narrow widths, retain the existing three-column, icon-above-label pattern. */
@media (max-width: 1180px) {
  html body .hero-values > div { flex-direction: column; align-items: flex-start; }
}
/* Home's two supplied distribution cards only. Preserve complete map/booth art. */
html body .distribution-heading + .grid.two > .card > .distribution-source {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 4 / 3 !important;
}
html body .distribution-heading + .grid.two > .card > .distribution-source img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
html body .distribution-heading + .grid.two .card-body h3 {
  font-size: 16px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}
/* Shared intrinsic rows align title/body/action without clipping any text.
 * Subgrid is supported by current Chrome, Safari and Firefox.
 * Existing single-column mobile arrangement remains unchanged.
 */
@media (min-width: 761px) {
  html body .distribution-heading + .grid.two {
    grid-template-rows: auto auto auto auto;
    row-gap: 0;
  }
  html body .distribution-heading + .grid.two > .card {
    display: grid;
    grid-row: span 4;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  html body .distribution-heading + .grid.two > .card > .card-body {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  html body .distribution-heading + .grid.two .card-body .link {
    justify-self: start;
    align-self: end;
  }
}

/* Approved existing image mappings only; retain baseline frame layout and dimensions. */
body .approved-image-r21.approved-image-r21.approved-image-r21 {position:relative;overflow:hidden;border-style:solid;border-color:transparent;background:#f3f0e7;box-shadow:none;}
body .approved-image-r21.approved-image-r21.approved-image-r21 > img {position:absolute;inset:0;width:100%;height:100%;display:block;max-width:100%;border-radius:inherit;}

/* Audit R23: layout repairs only; approved 16 / 24 / 32 type scale unchanged. */
html body .logo{min-width:158px}
html body .logo small{white-space:nowrap}
html body .product-card .button{white-space:nowrap;gap:12px}
html body .handoff-r08.handoff-product .hero .visual:before{z-index:2;max-width:calc(100% - 24px);line-height:1.5;background:#fffdf8}
html body .handoff-r08.handoff-product .hero .visual{padding-top:76px}
html body .video-external-icon{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.7}
@media (min-width:761px) and (max-width:1000px){
 html body .quick-links .grid.three{grid-template-columns:1fr}
 html body .quick-links a>div{min-width:0}
 html body .hero.has-image:after{background:linear-gradient(90deg,#f6f3e7 0%,#f6f3e7f5 65%,#f6f3e7cf 100%)}
 html body .grid.three:has(> .card:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
 html body .grid.three:has(> .card:only-child),html body .grid.four:has(> .card:only-child){grid-template-columns:1fr}
}
@media (max-width:600px){
 html body .grid.three,html body .grid.four,html body .grid.five{grid-template-columns:1fr}
 html body .hero.has-image:after{background:linear-gradient(0deg,#f6f3e7 0%,#f6f3e7f5 75%,#f6f3e799 100%)}
 html body .product-card .button{align-self:flex-start;min-width:145px}
}
/* The QA warning has its own band; never paint it over supplied artwork. */
html body .handoff-r08.handoff-product .hero .visual:has(> img){padding:0;display:flex;flex-direction:column;aspect-ratio:auto}
html body .handoff-r08.handoff-product .hero .visual:has(> img):before{position:static;display:block;align-self:stretch;max-width:none;margin:0;padding:8px 10px;flex:0 0 auto;text-align:left}
html body .handoff-r08.handoff-product .hero .visual>img{position:static!important;inset:auto!important;display:block;width:100%!important;height:auto!important;aspect-ratio:4 / 3;object-fit:contain!important;flex:0 0 auto}
@media (min-width:761px) and (max-width:1000px){
 html body .grid.three:has(> .card){grid-template-columns:repeat(2,minmax(0,1fr))}
 html body .grid.three:has(> .card:only-child){grid-template-columns:1fr}
}

/* R33 reviewed global roles. Opt-in only; R32 pilot CSS/HTML remain untouched.
   No source replacement, typography, navigation, footer, contact, utility
   icons/logos, video or annotation changes. Existing card grids are retained. */
html body.frame-roles-r33 .frame-r33.frame-r33 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
  align-self: center;
}
html body.frame-roles-r33 .frame-r33.frame-r33 > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: var(--frame-fit, contain) !important;
  object-position: var(--frame-focus, 50% 50%) !important;
  background: transparent;
}
/* True packshots and portrait product photos always retain the entire source. */
html body.frame-roles-r33 .frame-r33.frame-product-r33 {
  aspect-ratio: 1 / 1;
  --frame-fit: contain;
}
html body.frame-roles-r33 .frame-r33.frame-product-r33 > .missing {
  position: absolute;
  inset: 0;
  height: 100%;
}
/* Reserved for the two specific landscape bottle sources checked in R32. */
html body.frame-roles-r33 .frame-r33.frame-product-r33.frame-scene-r33 {
  --frame-fit: cover;
  --frame-focus: 50% 50%;
}
html body.frame-roles-r33 .frame-r33.frame-article-r33 {
  aspect-ratio: 4 / 3;
  --frame-fit: cover;
}
html body.frame-roles-r33 .frame-nature-r33 { --frame-focus: 100% 50%; }
html body.frame-roles-r33 .frame-kitchen-r33 { --frame-focus: 100% 50%; }
html body.frame-roles-r33 .frame-journal-r33 { --frame-focus: 75% 50%; }
html body.frame-roles-r33 .frame-founder-r33 { --frame-focus: 50% 12%; }
html body.frame-roles-r33 .frame-ambassador-r33 { --frame-focus: 50% 28%; }
html body.frame-roles-r33 .frame-r33.frame-document-r33 { --frame-fit: contain; }
/* Natural body imagery overrides old fixed-height/ultrawide image slots.
   Never crop full-body portraits; a portrait card has a different role. */
html body.frame-roles-r33 .frame-body-wrap-r33 { height: auto; }
html body.frame-roles-r33 .frame-r33.frame-body-r33 {
  aspect-ratio: auto;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding: 0;
  background: transparent;
}
html body.frame-roles-r33 .frame-r33.frame-body-r33 > img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain !important;
}
html body.frame-roles-r33 .frame-r33.frame-body-square-r33 { max-width: 640px; }
html body.frame-roles-r33 .frame-r33.frame-body-portrait-r33 { max-width: 320px; align-self: start; }
/* Hero default is safe contain; near-16:9 scenes have negligible bands.
   Natural-ratio exceptions preserve N03, printed text and product packages. */
html body.frame-roles-r33 .frame-r33.frame-hero-image-r33 {
  aspect-ratio: 16 / 9;
  --frame-fit: contain;
}
/* Natural-ratio exceptions avoid artificial bands while protecting content.
   N03 uses its existing 4:3 source; printed-brand cards retain native 16:9. */
html body.frame-roles-r33 .frame-r33.frame-hero-natural-r33,
html body.frame-roles-r33 .frame-r33.frame-card-natural-r33 {
  aspect-ratio: auto;
}
html body.frame-roles-r33 .frame-r33.frame-hero-natural-r33 > img,
html body.frame-roles-r33 .frame-r33.frame-card-natural-r33 > img {
  position: static;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain !important;
}
/* Approved technical-label correction keeps its original pending-QA status. */
html body.frame-roles-r33 .handoff-r08.handoff-product .hero > .frame-product-hero-r33::before {
  content: 'ẢNH – CHƯA NGHIỆM THU';
}
/* Existing product-story warning stays a distinct status band. The image
   below it stays natural-ratio, without warning text over its artwork. */
html body.frame-roles-r33 .handoff-r08.handoff-product .hero > .frame-r33.frame-product-hero-r33 {
  display: flex;
  flex-direction: column;
  width: calc(100% - 56px);
  max-width: calc(100% - 56px);
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  aspect-ratio: auto;
  align-self: start;
}
html body.frame-roles-r33 .handoff-r08.handoff-product .hero > .frame-r33.frame-product-hero-r33 > img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto;
  object-fit: contain !important;
  object-position: 50% 50% !important;
}
/* Existing shared banner now has distinct copy and image tracks. No content
   is removed, and it is not mistaken for an article-specific opening image. */
html body.frame-roles-r33 .hero.frame-banner-r33 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: 24px;
  min-height: 0;
  align-items: center;
}
html body.frame-roles-r33 .hero.frame-banner-r33::after { content: none; }
html body.frame-roles-r33 .hero.frame-banner-r33 > .hero-art {
  position: static;
  inset: auto;
  min-width: 0;
  order: 2;
}
html body.frame-roles-r33 .hero.frame-banner-r33 > .hero-copy {
  position: static;
  width: auto;
  max-width: none;
  min-width: 0;
  order: 1;
  padding: 32px;
}
/* Contract used by the separate approved-hero placement transform. The class
   works on lead/opening/intro/hero/editorial-top without changing typography. */
html body.frame-roles-r33 .frame-editorial-hero-r33.frame-editorial-hero-r33 {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.15fr);
  gap: 32px;
  align-items: center;
  max-width: none;
  min-height: 0;
  padding: 48px 5%;
}
html body.frame-roles-r33 .frame-editorial-hero-r33 > figure { margin: 0; }
html body.frame-roles-r33 .frame-hero-copy-r33 { min-width: 0; }
@media (max-width: 1000px) {
  html body.frame-roles-r33 .hero.frame-banner-r33,
  html body.frame-roles-r33 .frame-editorial-hero-r33.frame-editorial-hero-r33 {
    grid-template-columns: minmax(0,1fr);
    gap: 24px;
  }
  html body.frame-roles-r33 .frame-editorial-hero-r33.frame-editorial-hero-r33 { padding: 32px 6%; }
  html body.frame-roles-r33 .hero.frame-banner-r33 > .hero-copy { padding: 32px 6% 0; }
}
@media (max-width: 740px) {
  html body.frame-roles-r33 .handoff-r08.handoff-product .hero > .frame-r33.frame-product-hero-r33 {
    width: calc(100% - 36px);
    max-width: calc(100% - 36px);
  }
}

/* R37: confirmed homepage review, 18 October 2026.
   Existing artwork and wording are unchanged. No animation, product crop,
   body-image change, or global icon treatment. */

/* Photographic 16:9 hero roles fill their own frames. Natural-ratio artwork,
   portrait imagery, printed product scenes and packshots keep their safeguards. */
html body.feedback-polish-r37 .frame-r33.frame-hero-image-r33:not(.frame-hero-natural-r33):not(.frame-product-hero-r33) {
  --frame-fit: cover;
}

/* The panoramic homepage photograph is one continuous opening, not a small
   image beside a separate card. The woman and bowl stay in the clear right side. */
html body.feedback-polish-r37.frame-page-home-r32 #main > .wrap:first-child {
  max-width: none;
  padding-inline: 0;
  background: var(--cream);
}
html body.feedback-polish-r37 .brand-hero-r03.frame-hero-r32 {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  isolation: isolate;
  min-height: 520px;
  margin-top: 0;
  background: var(--cream);
}
html body.feedback-polish-r37 .brand-hero-r03 > .frame-home-photo-r32 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  align-self: stretch;
  --frame-fit: cover;
  --frame-focus: 100% 50%;
  z-index: -1;
}
html body.feedback-polish-r37 .brand-hero-r03 > .frame-home-photo-r32::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 32px;
  background: linear-gradient(to bottom, transparent, var(--cream));
  pointer-events: none;
}
html body.feedback-polish-r37 .brand-hero-r03 > .brand-hero-copy {
  position: relative;
  inset: auto;
  width: 51%;
  min-width: 0;
  max-width: 800px;
  padding: 36px clamp(30px, 5vw, 86px);
  padding-right: clamp(42px, 6vw, 104px);
  justify-content: center;
  background: linear-gradient(90deg, rgba(247,243,231,.98) 0%, rgba(247,243,231,.96) 66%, rgba(247,243,231,.84) 84%, rgba(247,243,231,0) 100%);
}
html body.feedback-polish-r37 .brand-hero-copy h1,
html body.feedback-polish-r37 .brand-hero-copy p {
  max-width: 510px;
}
html body.feedback-polish-r37 .hero-actionbar {
  justify-content: center;
  flex-wrap: wrap;
  padding: 12px 24px 18px;
  background: var(--cream);
}

/* Only the three marked navigation badges. darken removes their light matte
   against this exact cream surface without re-creating or changing source art.
   Isolate each link so the blend cannot affect neighboring text or imagery. */
html body.feedback-polish-r37.frame-page-home-r32 .quick-links {
  padding: 12px 0 22px;
  background: var(--cream);
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links .grid.three {
  gap: 0;
  align-items: stretch;
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links a {
  isolation: isolate;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 14px;
  align-items: center;
  column-gap: 12px;
  padding: 12px 20px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--cream);
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links a:last-child {
  border-right: 0;
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links .asset-icon {
  width: 62px;
  max-width: 100%;
  margin: 0;
  mix-blend-mode: darken;
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links a > div {
  min-width: 0;
  align-self: start;
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links strong {
  display: block;
  margin: 0 0 4px;
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links small,
html body.feedback-polish-r37.frame-page-home-r32 .quick-links .icon-source-caption {
  display: block;
  margin: 0;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  color: #4f604f;
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links .icon-source-caption {
  margin-top: 2px;
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links a > span:last-child {
  align-self: center;
  font-size: 18px;
}
html body.feedback-polish-r37.frame-page-home-r32 .quick-links + .section.soft {
  padding-top: 30px;
}

@media (min-width: 1600px) {
  html body.feedback-polish-r37 .brand-hero-r03.frame-hero-r32 {
    min-height: 32.5vw;
  }
}
@media (max-width: 1150px) {
  /* At narrow widths keep text out of the face/bowl entirely. A bottom fade
     joins the full-frame image to the copy, rather than hiding the photograph. */
  html body.feedback-polish-r37 .brand-hero-r03.frame-hero-r32 {
    min-height: 0;
  }
  html body.feedback-polish-r37 .brand-hero-r03 > .frame-home-photo-r32 {
    position: relative;
    inset: auto;
    grid-row: 1;
    height: auto;
    aspect-ratio: 16 / 7;
    z-index: 0;
  }
  html body.feedback-polish-r37 .brand-hero-r03 > .brand-hero-copy {
    grid-row: 2;
    width: 100%;
    max-width: none;
    padding: 16px 6% 24px;
    background: var(--cream);
  }
  html body.feedback-polish-r37 .brand-hero-copy h1,
  html body.feedback-polish-r37 .brand-hero-copy p {
    max-width: 700px;
  }
  html body.feedback-polish-r37.frame-page-home-r32 .quick-links a {
    grid-template-columns: 52px minmax(0, 1fr) 14px;
    column-gap: 10px;
    padding-inline: 12px;
  }
  html body.feedback-polish-r37.frame-page-home-r32 .quick-links .asset-icon {
    width: 52px;
  }
}
@media (max-width: 760px) {
  html body.feedback-polish-r37.frame-page-home-r32 .quick-links .grid.three {
    grid-template-columns: minmax(0, 1fr);
  }
  html body.feedback-polish-r37.frame-page-home-r32 .quick-links a {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
  }
  html body.feedback-polish-r37.frame-page-home-r32 .quick-links a:last-child {
    border-bottom: 0;
  }
  html body.feedback-polish-r37.frame-page-home-r32 .quick-links strong {
    font-size: 16px !important;
  }
}
@media (max-width: 600px) {
  html body.feedback-polish-r37 .brand-hero-r03 > .frame-home-photo-r32 {
    aspect-ratio: 16 / 9;
  }
  html body.feedback-polish-r37 .brand-hero-copy .hero-values {
    gap: 10px;
    margin-top: 18px;
  }
}

/* R38 · approved all-page hero rollout. The R37 homepage is not opted in.
   The repeated opt-in class deliberately outranks legacy handoff selectors.
   Only existing opening containers are selected. Original image bytes, image
   attributes, body-image roles, prose, links and feedback anchors stay intact. */
html body.hero-rollout-r38.hero-rollout-r38 #main { overflow-x: clip; }
html body.hero-rollout-r38.hero-rollout-r38 .r38-hero-host { overflow: visible; }
html body.hero-rollout-r38.hero-rollout-r38 .r38-surface.r38-surface {
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 0 calc(50% - 50vw);
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--cream, #f7f3e7);
  color: var(--ink, #193f30);
  isolation: isolate;
  min-height: 0;
  overflow: hidden;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-surface.r38-surface::after {
  content: '';
  display: block;
  position: absolute;
  inset: auto 0 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(247,243,231,0), var(--cream, #f7f3e7));
  pointer-events: none;
  z-index: 2;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-surface .r38-copy {
  position: relative;
  min-width: 0;
  max-width: none;
  width: 100%;
  padding: 34px max(6%, calc((100vw - 960px) / 2)) 56px;
  background: var(--cream, #f7f3e7);
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-surface .r38-copy > :last-child { margin-bottom: 0; }
/* Two reviewed landscape sources have their human/meal subject on the right.
   Use the COMPLETE 16:9 photograph as a continuous full-width canvas. */
html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-overlay.r38-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-overlay > .r38-media {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  order: 0;
  min-width: 0;
  width: 100%;
  align-self: center;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-overlay > .r38-copy {
  grid-area: 1 / 1;
  order: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 48%;
  padding: 42px clamp(30px, 5vw, 90px);
  padding-right: clamp(40px, 6vw, 100px);
  background: linear-gradient(90deg, rgba(247,243,231,.99) 0%, rgba(247,243,231,.97) 64%, rgba(247,243,231,.86) 82%, rgba(247,243,231,0) 100%);
}
/* No crop, no stretch. The image defines its own geometry, not a fixed-height
   panorama. Labels, food, hands, and faces retain the approved source frame. */
html body.hero-rollout-r38.hero-rollout-r38 .r38-surface .r38-image-frame.r38-image-frame {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  background: transparent;
  --frame-fit: contain;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-surface .r38-image-frame.r38-image-frame > img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: none;
  aspect-ratio: auto;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  border-radius: 0;
}
/* Complete natural artwork flows edge-to-edge into its existing copy.
   Copy never overlays faces, printed packaging, or an unreviewed focal area. */
html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-natural.r38-surface,
html body.hero-rollout-r38.hero-rollout-r38 .r38-editorial-natural.r38-surface {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-natural > .r38-media,
html body.hero-rollout-r38.hero-rollout-r38 .r38-editorial-natural > .r38-media {
  position: relative;
  inset: auto;
  order: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-natural > .r38-copy,
html body.hero-rollout-r38.hero-rollout-r38 .r38-editorial-natural > .r38-copy { order: 1; }
html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-natural > .r38-media::after,
html body.hero-rollout-r38.hero-rollout-r38 .r38-editorial-natural > .r38-media::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 24px;
  background: linear-gradient(to bottom, rgba(247,243,231,0), var(--cream, #f7f3e7));
  pointer-events: none;
}
/* Portraits remain full subject, and packshots retain their square/contain
   source treatment. A continuous cream field joins art and information. */
html body.hero-rollout-r38.hero-rollout-r38 .r38-portrait.r38-surface,
html body.hero-rollout-r38.hero-rollout-r38 .r38-sku.r38-surface,
html body.hero-rollout-r38.hero-rollout-r38 .r38-product-stage.r38-surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: center;
  padding: 28px max(5%, calc((100vw - 1280px) / 2)) 48px;
  background: linear-gradient(110deg, #f7f3e7, #f1f1e7 60%, #f7f3e7);
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-portrait > .r38-copy,
html body.hero-rollout-r38.hero-rollout-r38 .r38-sku > .r38-copy,
html body.hero-rollout-r38.hero-rollout-r38 .r38-product-stage > .r38-copy {
  padding: 32px clamp(24px, 4vw, 64px);
  background: transparent;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-portrait > .r38-portrait-media {
  order: 1;
  justify-self: center;
  width: 100%;
  max-width: 420px;
  margin: 0;
  border-radius: 0;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-portrait > .r38-copy { order: 0; }
html body.hero-rollout-r38.hero-rollout-r38 .r38-sku > .r38-sku-media {
  width: 100%;
  max-width: 580px;
  margin: 0 auto;
  border-radius: 0;
  --frame-fit: contain;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-product-stage.r38-product-stage > .r38-product-media.r38-product-media.r38-product-media {
  width: 100%;
  max-width: 580px;
  min-height: 0;
  margin: 0 auto;
  border-radius: 0;
  --frame-fit: contain;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-product-stage > .r38-product-media > img {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  max-height: none;
  object-fit: contain !important;
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-product-title.r38-surface,
html body.hero-rollout-r38.hero-rollout-r38 .r38-text.r38-surface {
  display: block;
  padding: 64px max(7%, calc((100vw - 960px) / 2)) 70px;
  background: linear-gradient(115deg, #f7f3e7 0%, #f1f1e7 72%, #f7f3e7 100%);
}
html body.hero-rollout-r38.hero-rollout-r38 .r38-product-title.r38-surface { padding-bottom: 28px; }
html body.hero-rollout-r38.hero-rollout-r38 .r38-product-title.r38-surface::after { content: none; }
/* Narrow screens use the approved homepage's safe stacking principle.
   No text is placed on photographs and no fixed-height crop is introduced. */
@media (max-width: 1000px) {
  html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-overlay.r38-surface {
    display: flex;
    flex-direction: column;
  }
  html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-overlay > .r38-media { order: 0; }
  html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-overlay > .r38-media::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 24px;
    background: linear-gradient(to bottom, rgba(247,243,231,0), var(--cream, #f7f3e7));
    pointer-events: none;
  }
  html body.hero-rollout-r38.hero-rollout-r38 .r38-banner-overlay > .r38-copy {
    order: 1;
    width: 100%;
    padding: 26px 6% 46px;
    background: var(--cream, #f7f3e7);
  }
  html body.hero-rollout-r38.hero-rollout-r38 .r38-surface .r38-copy { padding: 26px 6% 46px; }
}
@media (max-width: 760px) {
  html body.hero-rollout-r38.hero-rollout-r38 .r38-portrait.r38-surface,
  html body.hero-rollout-r38.hero-rollout-r38 .r38-sku.r38-surface,
  html body.hero-rollout-r38.hero-rollout-r38 .r38-product-stage.r38-surface {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px 6% 36px;
  }
  html body.hero-rollout-r38.hero-rollout-r38 .r38-portrait > .r38-portrait-media { order: 0; max-width: 340px; }
  html body.hero-rollout-r38.hero-rollout-r38 .r38-portrait > .r38-copy { order: 1; }
  html body.hero-rollout-r38.hero-rollout-r38 .r38-product-title.r38-surface,
  html body.hero-rollout-r38.hero-rollout-r38 .r38-text.r38-surface { padding: 36px 6% 48px; }
  html body.hero-rollout-r38.hero-rollout-r38 .r38-product-title.r38-surface { padding-bottom: 20px; }
}

/* R40: use the approved R37 homepage's visual frame, not image source ratio.
   The homepage is deliberately not opted in. Copy and specifications remain
   normal-flow content; a photo frame is not the combined photo + text section. */
html body.hero-dimensions-r40.hero-dimensions-r40 #main {
  container-type: inline-size;
}
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface.r38-surface {
  --r40-hero-height: 520px;
  width: 100cqw;
  max-width: none;
  margin-inline: calc(50% - 50cqw);
}
/* cqw measures the actual page width, excluding any desktop scrollbar, exactly
   as the homepage's full-width wrap does. No closer query containers exist. */
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface .r38-image-frame.r38-image-frame,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface .r38-portrait-media.r38-portrait-media,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface .r38-sku-media.r38-sku-media,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-product-stage.r38-product-stage > .r38-product-media.r38-product-media.r38-product-media {
  position: relative;
  inset: auto;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: var(--r40-hero-height);
  min-height: 0;
  max-height: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  --frame-fit: contain;
  --frame-focus: 50% 50%;
}
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface .r38-image-frame.r38-image-frame > img,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface .r38-portrait-media.r38-portrait-media > img,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface .r38-sku-media.r38-sku-media > img,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-product-stage.r38-product-stage > .r38-product-media.r38-product-media.r38-product-media > img {
  position: absolute !important;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: auto;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  border-radius: 0;
}
/* Only the two already-reviewed right-subject photographs keep desktop copy
   over the left fade. Like home, this minimum can grow for unusually long copy. */
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay.r38-surface {
  min-height: var(--r40-hero-height);
}
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay > .r38-media {
  align-self: stretch;
  min-height: var(--r40-hero-height);
}
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay > .r38-media > .r38-image-frame.r38-image-frame {
  position: absolute;
  inset: 0;
  height: 100%;
}
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay > .r38-media > .r38-image-frame.r38-image-frame > img {
  object-position: 100% 50% !important;
}
/* Safe, reviewed kitchen photographs remain full-bleed at ordinary widths.
   The unusually wide desktop frame falls back to contain for story_kitchen
   rather than cropping its raised hand or the main bowl. */
@media (max-width: 1400px) {
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay > .r38-media > .r38-image-frame.r38-image-frame > img[src$="story_kitchen.jpeg"] {
    object-fit: cover !important;
  }
}
/* journal_kitchen contains a child at the right edge: keep it fully contained. */
/* This composition has a verified central vertical safe area for all three
   main subjects: soybeans, tofu, and the sauce bowl. */
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-editorial-natural > .r38-image-frame.r38-image-frame > img[src$="nl02-img-01.webp"] {
  object-fit: cover !important;
  object-position: 50% 44% !important;
}
/* A full-width framed visual comes first. Portrait identity, printed packaging
   and complete product compositions stay contained; long copy/specs stay below. */
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-portrait.r38-surface,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-sku.r38-surface,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-product-stage.r38-surface {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-portrait > .r38-portrait-media,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-sku > .r38-sku-media,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-product-stage > .r38-product-media {
  order: 0;
  flex: none;
}
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-portrait > .r38-copy,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-sku > .r38-copy,
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-product-stage > .r38-copy {
  order: 1;
  width: 100%;
  padding: 34px max(6%, calc((100cqw - 960px) / 2)) 56px;
}
/* The existing product QA label is a separate 42px status band below the
   measured image frame, never over a printed label or part of frame height. */
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-product-stage.r38-product-stage > .r38-product-media.r38-product-media.r38-product-media {
  margin-bottom: 42px;
  overflow: visible;
}
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-product-stage.r38-product-stage > .r38-product-media.r38-product-media.r38-product-media::before {
  position: absolute;
  display: flex;
  align-items: center;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  min-height: 42px;
  margin: 0;
  padding: 8px max(6%, calc((100cqw - 960px) / 2));
  box-sizing: border-box;
  text-align: left;
}
/* Missing-image holds retain their original words, centered in the same frame.
   Text-only openings have no fabricated image or empty narrow-screen canvas. */
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-sku-media > .missing {
  position: static;
  width: 100%;
  height: auto;
  min-height: 0;
  max-width: 650px;
  padding: 24px;
  text-align: center;
}
html body.hero-dimensions-r40.hero-dimensions-r40 .r38-text.r38-surface {
  min-height: var(--r40-hero-height);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 1600px) {
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface.r38-surface {
    --r40-hero-height: 32.5vw;
  }
}
@media (max-width: 1150px) {
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface.r38-surface {
    --r40-hero-height: calc(100cqw * 7 / 16);
  }
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay.r38-surface {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay > .r38-media {
    order: 0;
    min-height: 0;
    height: var(--r40-hero-height);
    flex: none;
  }
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay > .r38-copy {
    order: 1;
    width: 100%;
    padding: 26px 6% 46px;
    background: var(--cream, #f7f3e7);
  }
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface .r38-copy {
    padding: 26px 6% 46px;
  }
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-text.r38-surface {
    min-height: 0;
  }
  /* Keep the proven R39 normal-flow controls, extended to the home breakpoint. */
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay[data-hero-slides] > .r38-copy {
    padding-bottom: 18px;
  }
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-banner-overlay[data-hero-slides] > .hero-controls {
    position: static;
    order: 2;
    align-self: stretch;
    justify-content: flex-end;
    width: auto;
    margin: 0;
    padding: 0 6% 34px;
  }
}
@media (max-width: 600px) {
  html body.hero-dimensions-r40.hero-dimensions-r40 .r38-surface.r38-surface {
    --r40-hero-height: calc(100cqw * 9 / 16);
  }
}

/* R44: two route-specific structural pilots. This source is bundled only on
   /san-pham and /bai/d01. No global role selector or homepage rule is changed.
   The primary photo/copy composition follows home's 520px / 32.5vw desktop
   height and its 16:7 tablet, 16:9 phone image rhythm. */
html body.hero-pilot-r44 #main {
  --r44-paper: var(--cream, #f7f3e7);
  --r44-hero-height: 520px;
  --r44-reading-width: 1180px;
  background: var(--r44-paper);
}
html body.hero-pilot-r44 #main .r44-hero-host,
html body.hero-pilot-r44 #main .r44-article-shell,
html body.hero-pilot-r44 #main .r44-article-flow {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
html body.hero-pilot-r44 #main .r44-hero {
  display: grid;
  grid-template-columns: minmax(0, 36fr) minmax(0, 64fr);
  align-items: stretch;
  width: 100%;
  min-height: var(--r44-hero-height);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--r44-paper);
}
html body.hero-pilot-r44 #main .r44-hero-copy {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 48px clamp(30px, 4vw, 76px) 48px clamp(40px, 6vw, 115px);
}
html body.hero-pilot-r44 #main .r44-hero-copy h1 {
  max-width: 14ch;
  margin: 18px 0 22px;
  text-wrap: balance;
  overflow-wrap: normal;
}
html body.hero-pilot-r44 #main .r44-hero-copy p {
  max-width: 34ch;
  margin: 0;
  line-height: 1.75;
}
html body.hero-pilot-r44 #main .r44-hero-copy .tag,
html body.hero-pilot-r44 #main .r44-hero-copy .eyebrow {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #4f604f;
}
html body.hero-pilot-r44 #main .r44-hero-media {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-width: 0;
  height: var(--r44-hero-height);
  margin: 0;
  overflow: hidden;
  background: transparent;
}
html body.hero-pilot-r44 #main .r44-hero-frame {
  width: 100%;
  height: 100%;
  margin: 0;
}
html body.hero-pilot-r44 #main .r44-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Source-aware framing. The 4:3 ingredients photograph is kept COMPLETE,
   right aligned at its natural ratio; no food or utensil is cropped. D01's
   verified landscape crop protects both hands, ladle and bowl. */
/* Give the title the entire cream area left by this full-source 4:3 photo,
   instead of leaving a blank slice inside a percentage-based media column. */
html body.hero-pilot-r44 #main .r44-hero-products {
  grid-template-columns: minmax(0, 1fr) minmax(0, calc(var(--r44-hero-height) * 4 / 3));
}
html body.hero-pilot-r44 #main .r44-hero-products .r44-hero-copy h1 { max-width: 600px; }
html body.hero-pilot-r44 #main .r44-hero-products .r44-hero-media {
  display: flex;
  justify-content: flex-end;
}
html body.hero-pilot-r44 #main .r44-hero-products .r44-hero-frame {
  position: relative;
  flex: none;
  width: min(100%, calc(var(--r44-hero-height) * 4 / 3));
}
html body.hero-pilot-r44 #main .r44-hero-products .r44-hero-media img {
  object-fit: contain;
  object-position: 100% 50%;
}
html body.hero-pilot-r44 #main .r44-hero-commitment .r44-hero-media img {
  object-position: 100% 48%;
}
/* Preserve the approved cream-to-photo and photo-to-paper transitions.
   Effects belong to the actual photo frame, not the wider media column, so
   the complete ingredients image still blends when source ratios leave space.
   These decorative overlays never hide or duplicate a content node. */
html body.hero-pilot-r44 #main .r44-hero-products .r44-hero-frame::before,
html body.hero-pilot-r44 #main .r44-hero-commitment .r44-hero-media::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: min(72px, 9%);
  background: linear-gradient(90deg, var(--r44-paper), rgba(247,243,231,0));
  pointer-events: none;
}
html body.hero-pilot-r44 #main .r44-hero-products .r44-hero-frame::after,
html body.hero-pilot-r44 #main .r44-hero-commitment .r44-hero-media::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0;
  height: min(24px, 1cqw);
  background: linear-gradient(to bottom, rgba(247,243,231,0), var(--r44-paper));
  pointer-events: none;
}
/* D01 has a hand near the left crop boundary. Its fade is deliberately much
   narrower than the ingredients fade and remains outside the subject. */
html body.hero-pilot-r44 #main .r44-hero-commitment .r44-hero-media::before { width: 24px; }
html body.hero-pilot-r44 #main .r44-hero-commitment .r44-hero-media::after { height: 24px; }
/* One full-width paper surface and one reading measure, not nested cards. */
html body.hero-pilot-r44 #main .r44-article {
  margin: 0;
  background: transparent;
}
html body.hero-pilot-r44 #main .r44-reading-flow,
html body.hero-pilot-r44 #main .r44-support-host,
html body.hero-pilot-r44 #main .r44-article-shell > .shared-transition {
  width: 100%;
  max-width: var(--r44-reading-width);
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 48px;
  background: transparent;
}
html body.hero-pilot-r44 #main .r44-reading-flow > .breadcrumb {
  margin: 0;
  padding: 28px 0 0;
}
html body.hero-pilot-r44 #main .r44-introduction {
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 0 52px;
}
html body.hero-pilot-r44 #main .r44-introduction p { margin: 0 0 20px; }
html body.hero-pilot-r44 #main .r44-introduction p:last-child { margin-bottom: 0; }
html body.hero-pilot-r44 #main .r44-article .editorial {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 56px;
  margin: 0;
  padding: 56px 0;
  border: 0;
  border-top: 1px solid var(--line, #d8dece);
  background: transparent;
}
html body.hero-pilot-r44 #main .r44-article .editorial .heading,
html body.hero-pilot-r44 #main .r44-article .editorial .content {
  min-width: 0;
  padding: 0;
}
html body.hero-pilot-r44 #main .r44-article .outro {
  margin: 0;
  padding: 48px 0 24px;
  border: 0;
  border-top: 1px solid var(--line, #d8dece);
  border-radius: 0;
  background: transparent;
}
html body.hero-pilot-r44 #main .r44-article .outro p { max-width: 760px; }
html body.hero-pilot-r44 #main .r44-article .hold { margin: 0 0 48px; }
/* Original a4-a7 banner remains visible, secondary and compact. The complete
   16:9 kitchen photograph is shown once at its natural ratio, never 520px. */
html body.hero-pilot-r44 #main .r44-support {
  display: grid;
  grid-template-columns: minmax(220px, 31%) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  margin: 0;
  border-top: 1px solid var(--line, #d8dece);
  border-bottom: 1px solid var(--line, #d8dece);
  background: transparent;
}
html body.hero-pilot-r44 #main .r44-support-media,
html body.hero-pilot-r44 #main .r44-support-frame {
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
  height: auto;
}
html body.hero-pilot-r44 #main .r44-support-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
html body.hero-pilot-r44 #main .r44-support-copy { padding: 0; }
html body.hero-pilot-r44 #main .r44-support-copy h2 {
  max-width: 29ch;
  margin: 10px 0 0;
  font-size: 24px !important;
}
html body.hero-pilot-r44 #main .r44-support-copy p { margin: 0; }
html body.hero-pilot-r44 #main .r44-article-shell > .shared-transition { padding-top: 48px; }
@media (min-width: 1600px) {
  html body.hero-pilot-r44 #main { --r44-hero-height: 32.5vw; }
}
@media (max-width: 1150px) {
  html body.hero-pilot-r44 #main { --r44-hero-height: calc(100cqw * 7 / 16); }
  html body.hero-pilot-r44 #main .r44-hero,
  html body.hero-pilot-r44 #main .r44-hero-products {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  html body.hero-pilot-r44 #main .r44-hero-media { grid-column: 1; grid-row: 1; }
  /* In the 16:7 tablet frame the bowl is close to the bottom edge. */
  html body.hero-pilot-r44 #main .r44-hero-commitment .r44-hero-media::after { height: min(8px, 1cqw); }
  html body.hero-pilot-r44 #main .r44-hero-copy {
    grid-column: 1;
    grid-row: 2;
    padding: 28px 6% 40px;
  }
  html body.hero-pilot-r44 #main .r44-hero-copy h1 { max-width: 24ch; margin: 14px 0 16px; }
  html body.hero-pilot-r44 #main .r44-hero-copy p { max-width: 60ch; }
  html body.hero-pilot-r44 #main .r44-reading-flow,
  html body.hero-pilot-r44 #main .r44-support-host,
  html body.hero-pilot-r44 #main .r44-article-shell > .shared-transition { padding-inline: 6%; }
  html body.hero-pilot-r44 #main .r44-article .editorial { gap: 36px; }
}
@media (max-width: 760px) {
  html body.hero-pilot-r44 #main .r44-article .editorial {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding-block: 36px;
  }
  html body.hero-pilot-r44 #main .r44-introduction { padding: 28px 0 36px; }
  html body.hero-pilot-r44 #main .r44-support { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  html body.hero-pilot-r44 #main .r44-support-media { max-width: 320px; }
  html body.hero-pilot-r44 #main .r44-support-copy h2 { max-width: none; }
}
@media (max-width: 600px) {
  html body.hero-pilot-r44 #main { --r44-hero-height: calc(100cqw * 9 / 16); }
}

/* Three source-art proposals only; keep source frame sizing, margins, borders and fonts. */
html body #main .private-original-label{position:relative;overflow:hidden}
html body #main .private-original-label>.private-label-art{position:absolute;inset:0 0 64px;display:block}
html body #main .private-original-label>.private-label-art>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center}
html body #main .private-original-label>.private-label-source{position:absolute;left:0;right:0;bottom:0;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;letter-spacing:normal}
html body #main .private-label-source>a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;text-decoration:underline}