.site-positioning{padding:14px 20px;background:linear-gradient(110deg,#9a8c69,#cba96a);color:#21180f;text-align:center}
.site-positioning p{max-width:40em;margin:0 auto;font:400 15px/1.45 Jost,sans-serif;text-wrap:balance}
/* Hero owns its layout. No Elementor classes, generated IDs or negative margins.
   Mobile: overlapping grid rows; tablet: bounded portrait; desktop: one background.
   Keep all hero breakpoint decisions in this file. */
.site-hero{
 --hero-surface:#827354;
 position:relative;isolation:isolate;display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:min(58vw,319px) auto;
 background:var(--hero-surface);color:#fff;
}
.site-hero,.site-hero *{box-sizing:border-box}

.hero-portrait{
 grid-column:1;grid-row:1 / 3;align-self:start;justify-self:center;
 display:block;width:100%;max-width:550px;pointer-events:none;
 mask-image:linear-gradient(#000 75%,transparent);
 -webkit-mask-image:linear-gradient(#000 75%,transparent);
}
.hero-portrait img{display:block;width:100%;height:auto}
.hero-inner{
 grid-column:1;grid-row:2;position:relative;z-index:1;
 width:80%;max-width:1140px;margin-inline:auto;padding:0 0 56px;
}
.hero-copy{width:100%;min-width:0;text-align:center}
.hero-brand{display:block;width:90px;height:auto;margin:0 auto 24px}
.hero-title{
 color:#f3ead9;font:400 24px/1.18 "Playfair Display",serif;
 letter-spacing:0;text-wrap:balance;margin:0 0 18px;
}
.hero-title em{color:#f1d8a3;font-weight:400}
.hero-description{margin:0;color:#fff;font:400 16px/1.55 Jost,sans-serif}
.hero-description p{margin:0}
.hero-cta{
 display:flex;align-items:center;justify-content:center;
 width:100%;min-height:54px;margin:28px 0 0;padding:18px 20px;
 border:0;border-radius:0;background:#cba96a;color:#21180f;
 font:400 14px/1.35 Jost,sans-serif;text-align:center;
 text-decoration:none;text-transform:uppercase;touch-action:manipulation;
 transition:transform 200ms ease,box-shadow 200ms ease;
}
.hero-cta:focus-visible{outline:2px solid #fff;outline-offset:5px}
.hero-cta:active{transform:translateY(1px)}
.hero-positioning-line{display:block;margin-bottom:12px;color:#f3ead9;font-size:16px;line-height:1.45;text-wrap:balance}
.hero-identification{
 margin:38px 0 0;padding:24px 0 0;border-top:1px solid #ffffff40;
 color:#fff;font:400 13px/1.55 Jost,sans-serif;
}
@media(hover:hover) and (pointer:fine){
 .hero-cta:hover{color:#21180f;transform:translateY(-3px);box-shadow:0 9px 20px #2a1c132e}
}
@media(max-width:767px){
 .hero-inner{width:90%}
 .hero-title{font-size:clamp(28px,7.7vw,34px);line-height:1.16}
 
 .hero-description,.hero-cta,.hero-identification{width:88.8889%;margin-inline:auto}
}
@media(max-width:359px){
 .hero-inner{width:92%}
 .hero-title{font-size:26px}
 .hero-description,.hero-cta,.hero-identification{width:86.9565%}
}
@media(min-width:768px){
 .hero-brand{width:175px;margin-bottom:28px}
 .hero-title{font-size:32px}
 .hero-description{font-size:18px}
 .hero-cta{font-size:16px;min-height:60px}
 .hero-inner{padding-bottom:72px}
}
@media(min-width:1025px){
 .site-hero{
  display:block;
  background-image:linear-gradient(90deg,#0000003d 0%,#0000003d 52%,transparent 70%),url('/wp-content/uploads/2026/08/Section-HERO-scaled.avif');
  background-position:center;background-size:cover;
 }
 .hero-portrait{display:none}
 .hero-inner{padding-block:clamp(80px,8vw,112px)}
 .hero-copy{width:50%;max-width:570px;text-align:left}
 .hero-brand{margin:0 0 44px}
 .hero-title{font-size:clamp(32px,3.1vw,42px);margin-bottom:24px}
 .hero-description{font-size:20px}
 .hero-cta{min-height:66px;margin-top:36px}
 .hero-identification{margin-top:40px}
}
/* Short, wide screens need a side-by-side composition rather than a tall portrait. */
@media(min-width:600px) and (max-width:1024px) and (max-height:600px){
 .site-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto;gap:24px;padding:24px 28px 32px}
 .hero-portrait{grid-column:2;grid-row:1;width:100%;max-width:380px;align-self:center}
 .hero-inner{grid-column:1;grid-row:1;width:100%;padding:0;align-self:center}
 .hero-brand{width:90px;margin-bottom:18px}
 .hero-title{font-size:26px;margin-bottom:16px}
 .hero-description{font-size:16px}
 .hero-description,.hero-cta,.hero-identification{width:100%}
 .hero-cta{margin-top:22px;font-size:14px;min-height:54px}
 .hero-identification{margin-top:24px;padding-top:16px}
}
@media(prefers-reduced-motion:reduce){
 .hero-cta{transition:none;transform:none}
}