/* MAS-UI-P03 | Home-only Hero PC & Mobile. Depends on MAS-P02 + MAS-UI-P01/F01 + P02.
   All appearance tokens come from Admin, validated server side. No external assets.
   Do not change disabled booking behavior. */
.mas-home-ui .mas-p03-hero {
  background: var(--mas-p03-bg,#fff9ef);
  position:relative;
  overflow:hidden;
}
.mas-home-ui .mas-p03-hero .hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.17fr) minmax(0,.88fr) minmax(310px,.89fr);
  min-height:var(--mas-p03-desktop-height,520px);
  align-items:stretch;
}
.mas-home-ui .mas-p03-hero .hero-copy {
  padding:clamp(28px,3.2vw,50px) clamp(18px,2.2vw,30px) 32px 0;
  align-self:center;
  min-height:0;
  position:relative;
  z-index:2;
  background:transparent;
  color:var(--mas-p03-title,#123d30);
}
.mas-home-ui .mas-p03-hero .eyebrow {font-size:11px;letter-spacing:.13em;line-height:1.45;margin:0 0 12px;}
.mas-home-ui .mas-p03-hero h1 {
  color:var(--mas-p03-title,#123d30);
  font-size:clamp(37px,3.55vw,54px);
  line-height:1.16;
  letter-spacing:-.01em;
  text-wrap:balance;
  margin:0 0 14px;
  max-width:620px;
}
.mas-home-ui .mas-p03-hero .hero-lead {
  color:var(--mas-p03-copy,#405649);
  font-size:14px;
  line-height:1.68;
  margin:0 0 22px;
  max-width:490px;
}
.mas-home-ui .mas-p03-hero .hero-benefits {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  max-width:530px;
  margin-top:0;
}
.mas-home-ui .mas-p03-hero .hero-benefits>div { min-width:0; }
.mas-home-ui .mas-p03-hero .round-icon {width:43px;height:43px;margin:0 auto 5px;}
.mas-home-ui .mas-p03-hero .hero-benefits b {font-size:11px;line-height:1.4;}
.mas-home-ui .mas-p03-hero .hero-benefits small {font-size:10.5px;line-height:1.35;color:var(--mas-p03-copy,#405649);}
.mas-home-ui .mas-p03-hero .hero-photo {
  min-height:var(--mas-p03-desktop-height,520px);
  position:relative;
  overflow:hidden;
  background:#e8d7bf;
}
.mas-home-ui .mas-p03-hero .hero-photo img {
  width:100%;height:100%;object-fit:cover;object-position:var(--mas-p03-pc-focus,50%) center;
}
.mas-home-ui .mas-p03-hero .hero-photo::before {
  inset:0 auto 0 0;
  width:30%;
  background:linear-gradient(90deg,var(--mas-p03-bg,#fff9ef),transparent);
}
.mas-home-ui .mas-p03-hero .hero-photo::after {width:13%;background:linear-gradient(270deg,var(--mas-p03-bg,#fff9ef),transparent);}
.mas-home-ui .mas-p03-hero .booking-card {
  min-width:0;
  padding:23px clamp(16px,1.6vw,23px) 18px;
  margin:22px 0 22px -5px;
  align-self:center;
  background:#fffefa;
  border:1px solid #e9dec9;
  border-radius:12px;
  box-shadow:0 8px 28px #352a1a1f;
}
.mas-home-ui .mas-p03-hero .booking-heading h2 {font-size:21px;line-height:1.29;margin-bottom:7px;}
.mas-home-ui .mas-p03-hero .booking-heading p {font-size:12px;line-height:1.55;margin-bottom:13px;}
.mas-home-ui .mas-p03-hero .field {margin-bottom:10px;}
.mas-home-ui .mas-p03-hero .field label {font-size:12px;line-height:1.4;}
.mas-home-ui .mas-p03-hero .field :is(input,select) {height:42px;font-size:13px;min-width:0;}
.mas-home-ui .mas-p03-hero .booking-card .btn {min-height:40px;font-size:13px;}
.mas-home-ui .mas-p03-hero .booking-status {font-size:11px;line-height:1.6;padding:9px;}

@media (max-width:1180px) and (min-width:951px){
 .mas-home-ui .mas-p03-hero .hero-grid {grid-template-columns:minmax(0,1fr) minmax(0,.87fr) minmax(295px,.95fr);}
 .mas-home-ui .mas-p03-hero h1 {font-size:clamp(35px,3.4vw,43px);}
 .mas-home-ui .mas-p03-hero .hero-copy {padding-inline-end:14px;}
 .mas-home-ui .mas-p03-hero .hero-benefits {gap:5px;}
 .mas-home-ui .mas-p03-hero .hero-benefits small {font-size:10px;}
}
@media (max-width:950px) and (min-width:641px){
 .mas-home-ui .mas-p03-hero .hero-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);min-height:0;}
 .mas-home-ui .mas-p03-hero .hero-copy {padding:40px 20px 32px 0;align-self:center;}
 .mas-home-ui .mas-p03-hero h1 {font-size:clamp(34px,4.7vw,46px);}
 .mas-home-ui .mas-p03-hero .hero-photo {min-height:420px;}
 .mas-home-ui .mas-p03-hero .booking-card {
   grid-column:1/-1;
   width:min(100%,720px);
   margin:0 auto 25px;
   padding:20px 25px;
 }
 .mas-home-ui .mas-p03-hero .hero-benefits {grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:640px){
 .mas-home-ui .mas-p03-hero .hero-grid {display:flex;flex-direction:column;width:100%;min-height:0;max-width:none;}
 .mas-home-ui .mas-p03-hero .hero-copy {
    width:100%;
    min-height:0;
    padding:24px max(17px,env(safe-area-inset-left)) 18px;
    background-color:var(--mas-p03-bg,#fff9ef);
    background-image:
      linear-gradient(90deg,
        color-mix(in srgb,var(--mas-p03-bg,#fff9ef) var(--mas-p03-overlay,83%),transparent) 0%,
        color-mix(in srgb,var(--mas-p03-bg,#fff9ef) var(--mas-p03-overlay,83%),transparent) 40%,
        color-mix(in srgb,var(--mas-p03-bg,#fff9ef) 28%,transparent) 100%),
      var(--mas-p03-mobile-image);
    background-size:cover,cover;
    background-position:center,var(--mas-p03-mobile-focus,64%) center;
    background-repeat:no-repeat;
  }
 .mas-home-ui .mas-p03-hero .hero-copy::after {height:42px;inset:auto 0 0;background:linear-gradient(0deg,var(--mas-p03-bg,#fff9ef),transparent);}
 .mas-home-ui .mas-p03-hero .eyebrow {max-width:80%;font-size:10px;letter-spacing:.07em;gap:6px;margin-bottom:10px;}
 .mas-home-ui .mas-p03-hero h1 {
    font-size:clamp(30px,7.9vw,40px);
    line-height:1.14;
    letter-spacing:0;
    max-width:min(82%,390px);
    margin:0 0 12px;
  }
 .mas-home-ui .mas-p03-hero .hero-lead {font-size:13px;line-height:1.55;max-width:82%;margin-bottom:12px;}
 .mas-home-ui .mas-p03-hero .hero-benefits {
   margin:14px 0 0;
   width:100%;
   display:grid;
   grid-template-columns:repeat(4,minmax(0,1fr));
   gap:4px;
   padding:10px 6px;
   background:color-mix(in srgb,var(--mas-p03-bg,#fff9ef) 94%,transparent);
   border:1px solid #e7dbc3a8;
   border-radius:12px;
   -webkit-backdrop-filter:none;backdrop-filter:none;
 }
 .mas-home-ui .mas-p03-hero .round-icon {width:33px;height:33px;margin-bottom:4px;}
 .mas-home-ui .mas-p03-hero .round-icon .icon {width:17px;height:17px;}
 .mas-home-ui .mas-p03-hero .hero-benefits b {font-size:10px;line-height:1.35;}
 .mas-home-ui .mas-p03-hero .hero-benefits small {font-size:9px;line-height:1.3;}
 .mas-home-ui .mas-p03-hero .hero-photo {display:none;}
 .mas-home-ui .mas-p03-hero .booking-card {
   width:calc(100% - 26px);
   margin:12px auto 17px;
   padding:16px 16px 13px;
   border-radius:12px;
 }
 .mas-home-ui .mas-p03-hero .booking-heading h2 {font-size:21px;}
 .mas-home-ui .mas-p03-hero .booking-heading p {font-size:12px;}
 .mas-home-ui .mas-p03-hero .field {margin-bottom:11px;}
 .mas-home-ui .mas-p03-hero .field label {font-size:12.5px;}
 .mas-home-ui .mas-p03-hero .field :is(input,select) {height:43px;font-size:14px;}
 .mas-home-ui .mas-p03-hero .booking-card .btn {min-height:43px;}
 .mas-home-ui .mas-p03-hero .booking-status {font-size:11.5px;}
}
@media (max-width:380px){
 .mas-home-ui .mas-p03-hero h1 {font-size:clamp(29px,8vw,33px);}
 .mas-home-ui .mas-p03-hero .hero-lead {font-size:12px;max-width:86%;}
 .mas-home-ui .mas-p03-hero .hero-benefits b {font-size:9.4px;}
 .mas-home-ui .mas-p03-hero .hero-benefits small {font-size:8.9px;}
}
@media (prefers-reduced-motion:reduce){.mas-home-ui .mas-p03-hero *, .mas-home-ui .mas-p03-hero *::after {transition:none!important;}}