/* One complete opening screen, including the existing header. */
.home-page{--home-topline-height:36px;--home-padding:clamp(22px,3.4svh,44px)}
.home-hero{
  height:calc(100vh - var(--home-chrome-height,calc(var(--header-height) + 1px + var(--home-topline-height))));
  /* Browser bars may retract while scrolling: keep the photo's crop stable. */
  height:calc(100svh - var(--home-chrome-height,calc(var(--header-height) + 1px + var(--home-topline-height))));
  min-height:calc(var(--home-copy-height,0px) + var(--home-padding)*2);
  padding-block:var(--home-padding);
}
.home-hero-grid{height:100%;min-height:0;grid-template-columns:1.08fr 1fr;gap:clamp(28px,4vw,64px)}
.home-hero .hero-content{min-height:0}
.home-hero .eyebrow{margin-bottom:clamp(12px,2svh,22px)}
.home-hero h1{font-size:clamp(34px,min(5vw,8svh),76px);line-height:1.08}
.home-hero .hero-description{font-size:clamp(16px,1.35vw,18px);line-height:1.65;margin:clamp(14px,2.5svh,27px) 0 clamp(18px,3svh,30px)}
.home-hero .button-row{display:flex;flex-wrap:wrap;max-width:none;gap:12px}
.home-hero .button{width:auto;min-height:52px;padding:13px 18px;gap:16px;font-size:14px;line-height:1.4}
.home-hero .hero-discover{margin-top:clamp(10px,2svh,23px)}
.home-hero .hero-scene{height:100%;max-height:700px;min-height:0;width:100%;padding:20px 0 48px 22px;align-self:center}
.home-hero .hero-photo-frame{height:100%;aspect-ratio:auto;min-height:0}
.home-hero .hero-food{bottom:0;grid-template-columns:clamp(54px,5vw,80px) minmax(0,1fr);width:56%}
.home-hero .hero-scene-note{position:absolute;right:0;bottom:0;padding:0;max-width:39%;font-size:10px}

/* Portrait tablets and phones share a compact copy block and a flexible photo. */
@media(max-width:900px), (max-width:1100px) and (orientation:portrait){
  .home-page{--home-padding:clamp(16px,2.5svh,30px)}
  .home-hero{min-height:calc(var(--home-copy-height,0px) + var(--home-padding)*2 + 112px)}
  .home-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:16px;align-items:stretch}
  .home-hero .hero-content{width:100%;max-width:680px;margin:0 auto}
  .home-hero h1{font-size:clamp(30px,min(9.8vw,6.5svh),62px);line-height:1.07;max-width:none}
  .home-hero .eyebrow{font-size:11px;letter-spacing:.075em;margin-bottom:12px}
  .home-hero .hero-description{font-size:16px;line-height:1.55;max-width:54ch;margin:14px 0 18px}
  .home-hero .button-row{display:flex;flex-wrap:nowrap;gap:10px}
  .home-hero .button{flex:1;min-width:0;min-height:52px;max-width:250px;font-size:13px;line-height:1.4;padding:11px 12px;gap:10px}
  .home-hero .button>[aria-hidden]{font-size:20px}
  .home-hero .hero-discover{display:none}
  .home-hero .hero-scene{width:100%;max-width:680px;max-height:640px;height:100%;min-height:96px;margin:auto;padding:0;align-self:center}
  .home-hero .hero-photo-frame{height:100%;border-radius:22px 22px 54px 22px}
  .home-hero .hero-photo{object-position:center 56%}
  .home-hero .hero-photo-label,.home-hero .hero-scene-note{display:none}
  .home-hero .hero-seal{left:12px;top:12px;padding:8px 12px;gap:6px;font-size:10px}
  .home-hero .hero-seal strong{font-size:21px}
  .home-hero .hero-food{left:auto;right:12px;bottom:12px;width:min(54%,250px);padding:6px;grid-template-columns:48px minmax(0,1fr);gap:8px;border-radius:12px}
  .home-hero .hero-food>span{font-size:11px;line-height:1.4;padding:0 3px 0 0}
  .home-hero .hero-food img{border-radius:8px}
}
@media(min-width:600px) and (max-width:1100px) and (orientation:portrait){
  .home-hero .hero-description{font-size:18px;line-height:1.6}
  .home-hero .button{flex:0 1 auto;font-size:14px;padding-inline:21px;gap:20px}
  .home-hero .hero-food{grid-template-columns:70px minmax(0,1fr);padding:8px}
  .home-hero .hero-food>span{font-size:13px}
}
@media(max-width:600px) and (max-height:740px){
  .home-page{--home-padding:14px}
  .home-hero h1{font-size:clamp(28px,9vw,36px)}
  .home-hero .eyebrow{font-size:10px;margin-bottom:9px}
  .home-hero .hero-description{font-size:15px;line-height:1.5;margin:11px 0 14px}
  .home-hero .button{min-height:48px;padding:9px 10px;gap:8px}
}
@media(max-width:319px){
  .home-hero .button-row{flex-direction:column;gap:7px}
  .home-hero .button{flex:none;max-width:none;width:100%;min-height:44px;padding-block:9px}
  .home-hero .hero-food{width:60%;grid-template-columns:38px minmax(0,1fr);gap:6px;right:7px;bottom:7px}
  .home-hero .hero-food>span{font-size:10px}
  .home-hero .hero-seal{padding:4px 7px;left:7px;top:7px}
  .home-hero .hero-seal strong{font-size:16px}
}
/* Low desktop windows keep generous touch targets with tighter typography. */
@media(min-width:901px) and (max-height:750px){
  .home-page{--home-padding:20px}
  .home-hero h1{font-size:clamp(30px,7.6svh,54px)}
  .home-hero .hero-description{font-size:16px;line-height:1.5;margin:14px 0 18px}
  .home-hero .hero-discover{display:none}
}
/* On short screens the same garden photo becomes the backdrop, freeing space for the copy. */
@media(max-width:600px) and (max-height:650px), (max-width:900px) and (max-height:520px){
  .home-page{--home-padding:16px}
  .home-hero{min-height:calc(var(--home-copy-height,0px) + var(--home-padding)*2);background:var(--deep);color:var(--cream)}
  .home-hero-grid{display:flex;align-items:center;position:static;gap:0}
  .home-hero .hero-content{max-width:680px;margin:auto}
  .home-hero .hero-scene{position:absolute;inset:0;z-index:0;max-width:none;max-height:none;height:100%;width:100%;padding:0;margin:0}
  .home-hero .hero-photo-frame{border-radius:0;box-shadow:none}
  /* Keep the photograph lighter, with a soft extra shade behind the copy. */
  .home-hero .hero-photo-frame::after{inset:0;background:linear-gradient(180deg,#10271f00,#10271f2e 8%,#10271f2e 72%,#10271f00),linear-gradient(100deg,#10271fd6,#10271fb3 62%,#10271f7a)}
  .home-hero .hero-photo{object-position:65% 50%}
  .home-hero .hero-food,.home-hero .hero-seal{display:none}
  .home-hero .eyebrow,.home-hero h1 em{color:var(--sand)}
  .home-hero .eyebrow::before{background:var(--sand)}
  .home-hero .hero-description{color:var(--cream)}
  .home-hero .button-primary{background:var(--cream);color:var(--deep)}
  .home-hero .button-primary:hover{background:var(--sand)}
  .home-hero .button-outline{color:var(--cream);border-color:#f7f5ee99;background:#10271f66}
  .home-hero .button-outline:hover{background:var(--cream);color:var(--deep)}
  .home-hero :is(a,button):focus-visible{outline-color:var(--sand)}
}
/* Use the spare vertical space on short phones without reducing any type sizes. */
@media(max-width:600px) and (max-height:650px) and (orientation:portrait){
  .home-hero-grid{display:grid;grid-template-rows:minmax(0,2fr) auto minmax(0,3fr)}
  .home-hero .hero-content{grid-row:2;margin:0 auto}
  .home-hero .eyebrow{margin-bottom:14px}
  .home-hero .hero-description{margin:clamp(11px,calc(10svh - 40px),20px) 0 clamp(14px,calc(10svh - 37px),22px)}
  .home-hero .button-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .home-hero .button{width:100%;max-width:none;padding-inline:16px}
}
@media(max-width:900px) and (max-height:520px){
  .home-page .topline{display:none}
  .home-page{--home-padding:12px}
  .home-hero h1{font-size:clamp(26px,6.8svh,34px)}
  .home-hero .eyebrow{font-size:10px;margin-bottom:8px}
  .home-hero .hero-description{font-size:14px;line-height:1.45;max-width:65ch;margin:10px 0 12px}
  .home-hero .button{flex:0 1 auto;min-height:44px;padding:9px 15px;font-size:13px;gap:14px}
}
@media(min-width:901px) and (max-height:520px){
  .home-page .topline{display:none}
  .home-page{--home-padding:12px}
  .home-hero h1{font-size:clamp(26px,7svh,36px)}
  .home-hero .eyebrow{font-size:10px;margin-bottom:8px}
  .home-hero .hero-description{font-size:14px;line-height:1.45;margin:10px 0 12px}
  .home-hero .button{min-height:44px;font-size:13px;padding:9px 14px;gap:12px}
}
@media(max-width:800px){.home-page{--home-topline-height:32px}}
@media(max-height:520px){.home-page{--home-topline-height:0px}}
@media print{
  .home-hero{height:auto;min-height:0;padding-block:30px}
  .home-hero-grid{height:auto}
  .home-hero .hero-scene{height:350px}
}