/* Origin-led visual language for the matcha site. The supplied company logo remains untouched. */
:root{
  --ink:#183126;--forest:#17392b;--moss:#55704d;--leaf:#bbca9c;
  --cream:#f6f3e9;--paper:#ebe8dc;--rust:#a66443;--line:rgba(24,49,38,.2);
  --serif:'Instrument Serif',Georgia,serif;--sans:'DM Sans',Arial,sans-serif;
  --page-ink:#183126;--page-moss:#55704d;--page-rust:#a66443;
  --page-cream:#f6f3e9;--page-line:#d4d8c9;--page-muted:#59685b;
  --page-serif:'Instrument Serif',Georgia,serif;--page-sans:'DM Sans',Arial,sans-serif;
}
html{scroll-padding-top:82px}
body,body.seo-page{background:var(--cream);color:var(--ink)}
:focus-visible{outline:2px solid #a66443;outline-offset:3px}

/* Consistent identity and documentary navigation. */
.announcement,.sp-topline{background:#17392b;color:#f1f1e6;letter-spacing:.13em}
.site-header,.sp-header{background:rgba(246,243,233,.97);border-bottom:1px solid var(--line)}
.site-header{height:88px;padding-inline:5%}
.nav-links{gap:24px;font-size:13px}
.nav-links>a:not(.nav-cta),.sp-nav a:not(.sp-nav-cta){color:#31483b}
.nav-cta,.sp-nav-cta{background:#183126;color:#fff;border-radius:0}
.company-logo-frame{background:transparent;padding:0;border-radius:0}
.company-logo-frame img{width:150px;max-height:none;height:auto;object-fit:contain}
.company-context strong{color:#183126;font-size:11px;letter-spacing:.21em}
.company-context small{font-size:7px;color:#637260;letter-spacing:.12em}
.site-footer .company-context strong{color:#f3f1e8}
.site-footer .company-context small{color:#c1cab8}

/* Home: the actual tea garden and processing facility carry the first impression. */
.origin-hero{display:block;position:relative;min-height:min(760px,83vh);padding:0;background:#1c3827;isolation:isolate;color:#fff}
.origin-hero-image,.origin-hero-overlay{position:absolute;inset:0}
.origin-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center 50%;display:block}
.origin-hero-overlay{background:linear-gradient(90deg,rgba(7,30,18,.81) 0%,rgba(9,36,21,.62) 43%,rgba(9,34,21,.18) 75%),linear-gradient(0deg,rgba(10,29,20,.52),transparent 42%);z-index:1}
.origin-hero-content{position:relative;z-index:2;padding:clamp(115px,12vw,178px) 5% 115px;max-width:74%}
.origin-kicker{display:flex;align-items:center;gap:14px;color:#e7eccf;font-size:11px;font-weight:700;letter-spacing:.19em}
.origin-kicker-line{width:32px;height:1px;background:#d5e7ab;display:inline-block}
.origin-hero h1{font:400 clamp(64px,6.8vw,108px)/.89 var(--serif);letter-spacing:-.047em;max-width:1040px;margin:34px 0 29px;color:#fff}
.origin-hero h1 em{display:inline-block;color:#d8e7b6;font-weight:400}
.origin-hero-lede{font-size:17px;line-height:1.65;color:#f1f2e6;max-width:620px;margin:0;text-wrap:pretty}
.origin-hero-actions{display:flex;gap:27px;align-items:center;flex-wrap:wrap;margin-top:34px}
.origin-primary{background:#edf0d8;color:#183126;font-size:12px;padding:17px 20px;min-width:245px}
.origin-primary span{color:#657e4a}
.origin-secondary{color:#fff;border-bottom:1px solid rgba(255,255,255,.65);padding:12px 0 8px;font-size:12px;font-weight:700}
.origin-secondary span{margin-left:20px;color:#d8e7b6}
.origin-hero-aside{position:absolute;right:4.4%;top:11%;width:min(290px,22%);z-index:2;background:#f6f3e9;color:#183126;padding:12px;box-shadow:0 20px 60px rgba(9,30,18,.22)}
.origin-aside-head{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.15em;font-weight:700;padding:5px 2px 12px}
.origin-hero-aside img{display:block;width:100%;height:205px;object-fit:cover;object-position:center}
.origin-aside-bottom{padding:16px 3px 7px;display:flex;flex-direction:column;gap:7px}
.origin-aside-bottom strong{font:400 25px/1 var(--serif)}
.origin-aside-bottom span{font-size:11px;line-height:1.5;color:#5e6d60}
.origin-hero-foot{position:absolute;z-index:2;bottom:0;left:5%;right:5%;height:53px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.42);color:#e3e9d5;font-size:10px;letter-spacing:.17em}

/* Origin, product and process sections read like consecutive chapters. */
.section-pad{padding-inline:7%}
.section-kicker,.eyebrow{font-size:10px;letter-spacing:.16em}
.intro{padding-top:105px;padding-bottom:80px}
.intro-grid{grid-template-columns:1.1fr .85fr;gap:9%;padding-block:54px 55px}
.intro h2,.section-heading h2,.detail-title h2,.formats-header h2,.latte-copy h2,.quality-heading h2,.inquiry-left h2{font-family:var(--serif);font-size:clamp(52px,5vw,80px);font-weight:400;line-height:.98;letter-spacing:-.035em}
.intro h2 em,.detail-title h2 em,.formats-header h2 em,.latte-copy h2 em,.quality-heading h2 em,.inquiry-left h2 em{font-weight:400}
.large-copy{font-size:clamp(22px,2vw,29px);line-height:1.32;font-family:var(--serif)}
.muted-copy{font-size:15px;line-height:1.75}
.stat-strip{padding-block:27px}
.stat-strip b{font-size:32px;color:var(--moss)}
.stat-strip span{font-size:13px}
.strip-note{font-size:17px}
.market-strip{padding-block:24px 10px}
.market-strip p{font-size:20px}
.product-section{background:#17392b;padding-top:92px;padding-bottom:112px}
.section-heading{margin-block:43px 42px}
.section-heading h2{font-size:clamp(50px,4.7vw,74px)}
.section-heading p{font-size:15px;max-width:430px}
.product-grid{gap:17px}
.product-card,.product-card-main{background:#f6f3e9;padding:20px;min-height:510px}
.product-card:first-child{background:#e7eadc}
.card-top{font-size:10px}
.card-copy h3{font-family:var(--serif);font-size:37px;line-height:1}
.card-copy p{font-size:13px;line-height:1.65;min-height:64px}
.card-copy a{font-size:12px;padding-top:15px}
.powder-visual{margin:15px 0;background:linear-gradient(0deg,rgba(23,57,43,.38),rgba(23,57,43,.08)),url('/assets/matcha-tea-garden.jpg') center/cover}
.powder-disc,.powder-visual i{display:none}
.powder-visual>span{position:relative;transform:none;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.45);font-size:31px;font-weight:400}
.pack-visual,.latte-visual{margin:15px 0}
.detail-section{padding-top:100px}
.detail-grid{padding-block:50px 62px}
.detail-title h2{font-size:clamp(52px,4.9vw,78px)}
.detail-body .large-copy{font-size:26px}
.detail-body .muted-copy{font-size:14px}
.crop-story,.process-story{background:#e5e9dc;margin-bottom:18px;grid-template-columns:1.08fr .92fr}
.crop-photo{min-height:455px}
.process-photo{min-height:385px}
.crop-photo img,.process-photo img{filter:saturate(.83) contrast(1.03)}
.crop-copy,.process-copy{padding:40px clamp(30px,4vw,70px)}
.crop-copy h3,.process-copy h3{font-size:43px;line-height:1.02;font-weight:400}
.crop-copy>p:not(.crop-small),.process-copy>p{font-size:14px;line-height:1.7}
.crop-fact{grid-template-columns:132px 1fr;padding-block:13px}
.crop-fact span{font-size:9px}
.crop-fact b{font-size:11px}
.crop-small{font-size:11px}
.process-story{background:#edf0e5}
.sample-panel{background:#dfe6d5;padding:36px}
.sample-panel h3,.documents-note h3{font-family:var(--serif);font-size:31px}
.sample-panel p,.documents-note p{font-size:13px}
.formats-section{background:#f0ede3}
.formats-header h2{font-size:clamp(52px,4.6vw,76px)}
.formats-header p{font-size:15px}
.format-list article{min-height:225px}
.format-copy h3{font-family:var(--serif);font-size:38px}
.format-copy p{font-size:13px}
.format-copy ul{font-size:11px}
.latte-section{background:#dce5d2}
.latte-copy h2{font-size:clamp(50px,4.4vw,72px)}
.quality-heading h2{font-size:clamp(51px,4.4vw,72px)}
.quality-heading p{font-size:15px}
.chain-item h3{font-size:28px}
.chain-item p{font-size:12px}
.inquiry-section{background:#f6f3e9}
.inquiry-left h2{font-size:clamp(51px,4.8vw,75px)}
.inquiry-left>p{font-size:15px}
.inquiry-form input,.inquiry-form select,.inquiry-form textarea{font-size:14px;padding:13px}
.inquiry-form label,.inquiry-form legend{font-size:11px}
.choice-row span{font-size:11px}
.site-footer{background:#17392b}

/* Product and editorial pages share the same paper, photography and information rhythm. */
.sp-header{height:88px}
.sp-topline{font-size:10px}
.sp-nav{font-size:12px;gap:21px}
.sp-main{max-width:1200px}
.sp-crumb{font-size:11px}
.sp-eyebrow{font-size:10px;letter-spacing:.16em}
.sp-hero{padding-block:50px 42px}
.sp-hero h1,.blog-hero h1{font-family:var(--page-serif);font-size:clamp(57px,5.5vw,86px);font-weight:400;line-height:.94}
.sp-hero h1 em,.blog-hero h1 em{font-weight:400}
.sp-hero p{font-size:15px;line-height:1.72}
.sp-hero-card{background:#e5eadd;border:1px solid #cbd5c5;padding:30px}
.sp-hero-card h2{font-family:var(--page-serif);font-size:34px;font-weight:400;line-height:1.05}
.sp-hero-card li{font-size:12px;line-height:1.6}
.sp-button{background:#183126;font-size:12px}
.sp-text-link{font-size:12px}
.sp-origin-image{position:relative;margin:8px 0 58px;height:380px;overflow:hidden;background:#c5d3bc}
.sp-origin-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.sp-origin-image:after{content:'';position:absolute;inset:42% 0 0;background:linear-gradient(transparent,rgba(11,34,22,.63))}
.sp-origin-image figcaption{position:absolute;z-index:1;left:34px;right:34px;bottom:28px;color:#fff;display:flex;justify-content:space-between;align-items:end;gap:20px}
.sp-origin-image figcaption span{font:700 10px var(--page-sans);letter-spacing:.16em}
.sp-origin-image figcaption strong{font:400 clamp(26px,3vw,43px)/1 var(--page-serif);text-align:right}
.sp-intro h2,.sp-two-col h2,.sp-faq h2,.sp-cta h2{font-family:var(--page-serif);font-weight:400;line-height:1.05}
.sp-intro p,.sp-two-col p,.sp-criteria p,.sp-steps p,.sp-table,.sp-faq p,.sp-cta p{font-size:14px;line-height:1.72}
.sp-criteria article,.sp-steps article{background:#edf0e6}
.sp-faq details{font-size:14px}
.sp-footer{background:#17392b}
.blog-hero{grid-template-columns:1.1fr .9fr;gap:34px;padding-top:50px;align-items:stretch}
.blog-hero-copy{align-self:center}
.blog-hero-copy>p{font-size:15px;line-height:1.7}
.blog-hero-aside{min-height:355px;background:linear-gradient(0deg,rgba(12,41,22,.72),rgba(12,41,22,.1)),url('/assets/matcha-tea-garden.jpg') center/cover;color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:space-between}
.blog-hero-aside span,.blog-hero-aside b,.blog-hero-aside i{color:#fff}
.blog-hero-aside b{font:400 clamp(28px,3vw,42px)/1.03 var(--page-serif)}
.blog-hero-aside i{font-size:12px;line-height:1.5}
.blog-topic-band{background:#e5eadd}
.blog-card,.blog-sidebar-card{background:#fbf9f2}
.blog-card h3,.blog-sidebar h3,.blog-bottom-cta h2{font-family:var(--page-serif);font-weight:400}
.blog-card p,.blog-sidebar p,.blog-bottom-cta p{font-size:14px;line-height:1.7}

@media(max-width:1100px){
  .origin-hero-content{max-width:76%}
  .origin-hero-aside{width:220px;right:3%}
  .origin-hero h1{font-size:clamp(62px,6.4vw,80px)}
  .nav-links{gap:14px;font-size:11px}
  .company-logo-frame img{width:132px}
  .product-card{min-height:480px}
}
@media(max-width:900px){
  .origin-hero{min-height:650px}
  .origin-hero-content{max-width:100%;padding:120px 6% 110px}
  .origin-hero h1{max-width:760px}
  .origin-hero-aside{display:none}
  .origin-hero-overlay{background:linear-gradient(90deg,rgba(7,30,18,.84),rgba(9,36,21,.39)),linear-gradient(0deg,rgba(10,29,20,.58),transparent 40%)}
  .crop-copy,.process-copy{padding:32px}
  .sp-origin-image{height:330px}
}
@media(max-width:680px){
  .site-header{height:74px;padding-inline:5%}
  .company-logo-frame img{width:116px}
  .nav-links{top:108px}
  .origin-hero{min-height:640px}
  .origin-hero-image img{object-position:60% center}
  .origin-hero-content{padding:105px 6% 110px}
  .origin-kicker{font-size:9px;letter-spacing:.12em}
  .origin-kicker-line{width:22px}
  .origin-hero h1{font-size:clamp(54px,12vw,76px);margin:27px 0 23px}
  .origin-hero-lede{font-size:14px;line-height:1.68;max-width:460px}
  .origin-hero-actions{gap:12px;margin-top:27px}
  .origin-primary{min-width:0;width:100%;justify-content:space-between}
  .origin-secondary{font-size:11px}
  .origin-hero-foot{height:43px;font-size:8px;letter-spacing:.08em;gap:10px}
  .origin-hero-foot span:nth-child(2){display:none}
  .section-pad{padding-inline:5%}
  .intro{padding-block:68px 62px}
  .intro-grid{padding-block:36px}
  .intro h2,.section-heading h2,.detail-title h2,.formats-header h2,.latte-copy h2,.quality-heading h2,.inquiry-left h2{font-size:49px}
  .large-copy{font-size:24px}
  .muted-copy{font-size:14px}
  .stat-strip span{font-size:11px}
  .market-strip p{font-size:15px}
  .product-section{padding-block:65px 75px}
  .product-card{min-height:465px}
  .card-copy h3{font-size:36px}
  .card-copy p{font-size:13px}
  .detail-section{padding-block:68px}
  .detail-title h2{font-size:50px}
  .crop-story,.process-story{grid-template-columns:1fr}
  .crop-photo{min-height:260px}
  .process-photo{min-height:245px}
  .crop-copy,.process-copy{padding:27px 23px}
  .crop-copy h3,.process-copy h3{font-size:37px}
  .crop-copy>p:not(.crop-small),.process-copy>p{font-size:13px}
  .sample-panel{padding:24px}
  .formats-header h2,.latte-copy h2{font-size:48px}
  .format-copy h3{font-size:29px}
  .format-copy p{font-size:11px}
  .quality-heading h2{font-size:49px}
  .inquiry-left h2{font-size:49px}
  .sp-header{min-height:76px;height:auto}
  .sp-nav{font-size:10px}
  .sp-hero{padding-block:32px 25px}
  .sp-hero h1,.blog-hero h1{font-size:clamp(49px,11vw,70px)}
  .sp-hero p,.blog-hero-copy>p{font-size:14px}
  .sp-origin-image{height:255px;margin-bottom:40px}
  .sp-origin-image figcaption{left:17px;right:17px;bottom:16px;display:block}
  .sp-origin-image figcaption strong{display:block;text-align:left;margin-top:8px;font-size:28px}
  .blog-hero{grid-template-columns:1fr;gap:24px}
  .blog-hero-aside{min-height:235px}
  .blog-hero-aside b{font-size:33px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}

.sp-menu-toggle{display:none}
@media(max-width:720px){
  .sp-header{position:sticky;top:0;z-index:30;min-height:72px;align-items:center;padding-block:10px;background:#f6f3e9}
  .sp-menu-toggle{display:flex;width:42px;height:42px;padding:10px;border:1px solid var(--page-line);background:transparent;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;margin-left:auto}
  .sp-menu-toggle span{height:1px;width:100%;background:#183126;display:block}
  .sp-nav{display:none;position:absolute;top:100%;left:0;right:0;max-width:none;background:#f6f3e9;border-bottom:1px solid var(--page-line);box-shadow:0 15px 30px rgba(24,49,38,.11);padding:12px 5% 23px;flex-direction:column;align-items:stretch;gap:0}
  .sp-nav.is-open{display:flex}
  .sp-nav a:not(.sp-nav-cta){font:400 24px/1.2 var(--page-serif);padding:12px 0;border-bottom:1px solid var(--page-line)}
  .sp-nav .sp-nav-cta{display:block;text-align:center;margin-top:17px;padding:13px;font-size:12px}
}
