:root{
  --text:#202020;
  --muted:#777;
  --line:#e9e9e9;
  --soft:#f7f7f5;
  --header-h:76px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  font-family:'Montserrat','Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  color:var(--text);
  line-height:1.8;
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  height:var(--header-h);padding:0 42px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(0,0,0,.04);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:height .25s ease,box-shadow .25s ease;
}
.site-header.shrink{height:62px;box-shadow:0 5px 24px rgba(0,0,0,.05)}
.logo{font-size:17px;font-weight:700;letter-spacing:.16em;white-space:nowrap}
.global-nav{display:flex;align-items:center;gap:30px}
.global-nav a{position:relative;font-size:12px;font-weight:600;letter-spacing:.12em}
.global-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:currentColor;transition:right .25s ease}
.global-nav a:hover::after{right:0}

.hero{
  position:relative;
  height:min(62vh,550px);
  min-height:460px;
  margin-top:var(--header-h);
  overflow:hidden;
  display:grid;
  place-items:center;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.30);z-index:1}
.hero-text{position:relative;z-index:2;text-align:center;color:#fff;animation:heroIn 1s ease .12s both}
.yield-logo{width:clamp(190px,26vw,340px);height:auto;margin:0 auto;filter:brightness(0) invert(1)}
.hero-text p{margin-top:18px;font-size:13px;font-weight:500;letter-spacing:.28em;text-transform:uppercase}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.section{padding:110px 24px}
.section-alt{background:var(--soft)}
.section-inner{width:min(1080px,100%);margin:0 auto;text-align:center}
.section-inner.narrow{width:min(720px,100%)}
.eyebrow{margin-bottom:7px;color:#999;font-size:10px;font-weight:600;letter-spacing:.24em}
.section h2{margin-bottom:36px;font-size:28px;line-height:1.2;letter-spacing:.11em}
.concept-copy{font-size:14px;line-height:2.15;letter-spacing:.02em}

.shop-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.shop-links a{
  min-width:230px;padding:16px 28px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:#222;color:#fff;border:1px solid #222;
  font-size:13px;font-weight:700;letter-spacing:.08em;
  transition:background .2s,color .2s,transform .2s;
}
.shop-links a:hover{background:#fff;color:#222;transform:translateY(-2px)}
.shop-note{margin-top:22px;color:#777;font-size:11px;letter-spacing:.05em}
.shop-note span{display:inline-block;margin-left:6px;padding:2px 8px;border:1px solid #ccc;border-radius:999px;font-size:9px;letter-spacing:.07em}

.company-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,1.05fr);gap:58px;align-items:start;text-align:left}
.company-info dl{border-top:1px solid var(--line)}
.company-info dl>div{display:grid;grid-template-columns:110px 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.company-info dt{color:#888;font-size:11px;font-weight:600;letter-spacing:.04em}
.company-info dd{font-size:12px;line-height:1.8}
.company-info dd a{border-bottom:1px solid #bbb}
.map-card{overflow:hidden;min-height:380px;background:#eee}
.map-card iframe{display:block;width:100%;height:380px;border:0}

.contact{border-top:1px solid var(--line)}
.contact p{font-size:13px;line-height:2}
.contact-links{margin-top:28px;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;column-gap:28px}
.contact-links span,.contact-links a{display:inline-block;font-size:12px;line-height:1.8;letter-spacing:.04em;white-space:nowrap}
.contact-links a{border:0;font-weight:600;transition:.2s}
.contact-links a:hover{opacity:.55}

footer{padding:34px 20px;text-align:center;border-top:1px solid var(--line);color:#888;font-size:10px;letter-spacing:.08em}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

@media (max-width:768px){
  :root{--header-h:64px}
  .site-header{height:var(--header-h);padding:0 18px}
  .site-header.shrink{height:56px}
  .logo{font-size:14px;letter-spacing:.13em}
  .global-nav{gap:15px}
  .global-nav a{font-size:9px;letter-spacing:.08em}

  .hero{height:430px;min-height:0;margin-top:var(--header-h)}
  .hero-bg{width:100%;height:100%;object-fit:cover;object-position:center}
  .hero-overlay{background:rgba(0,0,0,.33)}
  .yield-logo{width:min(48vw,220px)}
  .hero-text p{margin-top:12px;font-size:10px;letter-spacing:.22em}

  .section{padding:78px 20px}
  .section h2{margin-bottom:30px;font-size:23px}
  .concept-copy{font-size:13px;line-height:2}
  .pc-only{display:none}

  .shop-links{flex-direction:column;align-items:center;gap:10px}
  .shop-links a{width:min(100%,360px);min-width:0}

  .company-wrap{grid-template-columns:1fr;gap:32px}
  .company-info dl>div{grid-template-columns:86px 1fr;gap:14px;padding:14px 0}
  .company-info dt{font-size:10px}
  .company-info dd{font-size:11px}
  .map-card,.map-card iframe{min-height:300px;height:300px}

  .contact-links{display:flex;flex-direction:column;align-items:center;gap:8px}
  .contact-links span,.contact-links a{width:auto}
}

@media (max-width:430px){
  .site-header{padding:0 14px}
  .global-nav{gap:10px}
  .global-nav a{font-size:8px}
  .hero{height:390px;min-height:0}
  .section{padding:68px 18px}
  .company-info dl>div{grid-template-columns:76px 1fr}
}