/* Full photographic hero; the image frame also anchors the personalised plaque. */
.site-shell{position:relative;container-type:inline-size}
.site-header{position:absolute;inset:0 0 auto;width:100%;height:116px;background:transparent;z-index:5}
.site-header .brand-logo{width:230px}
.desktop-nav a,.header-phone{text-shadow:0 1px 8px #061811}
.mobile-nav{position:absolute;top:116px;left:0;right:0;z-index:8}
.hero{height:max(calc(100svh - 32px),75cqw);min-height:780px;padding:0;container-type:size}
.hero:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#071e18c9 0%,#092b21a6 20%,#092b2180 31%,#092b2129 43%,transparent 57%,transparent 88%,#071b1680 100%)}
.hero-stage{position:absolute;z-index:0;inset:50% auto auto 50%;width:max(100cqw,calc(100cqh * 1.333333));height:auto;aspect-ratio:4/3;margin:0;transform:translate(-50%,-50%);pointer-events:none}
.hero-locations{mask-image:none}
.hero-locations picture{position:absolute;inset:0;width:100%;height:100%}
.hero-copy{max-width:1000px;padding:142px 24px 0;text-shadow:0 2px 16px #05181099}
.hero .eyebrow{font-size:16px;margin-bottom:17px;color:#f4dab1}
.hero h1{font-size:clamp(48px,4.5cqw,76px);line-height:1.01;margin-bottom:20px;color:#fff0d6;text-shadow:0 3px 24px #041c16aa}
.hero h1 em{color:#f3d3a4}
.hero-description{font-size:15px;color:#f1efe2;line-height:1.75;margin-bottom:22px}
.hero-buttons{gap:28px}
.hero-buttons .button{font-size:13px;min-height:52px;padding:13px 26px;box-shadow:0 5px 24px #061b1844}
.hero-buttons .text-link{font-size:13px;color:#ffe3b6;text-shadow:0 2px 8px #061c18;gap:12px}
.hero-buttons .text-link .hero-link-label{font-size:inherit}
.hero-link-short{display:none}
.hero-bottom{z-index:3;bottom:20px;justify-content:flex-end;color:#fff2db;text-shadow:0 1px 6px #071c17}
.hero-plaque{left:14.2%;top:79.1%;width:15.8%;height:7.8%;transform:rotate(-1deg);opacity:0;transition:opacity 850ms ease-in-out}
.hero[data-scene=cafe] [data-plaque=cafe],.hero[data-scene=barbershop] [data-plaque=barbershop],.hero[data-scene=lobby] [data-plaque=lobby]{opacity:1}
.hero-plaque[data-plaque=barbershop]{left:10.7%;top:75.8%;width:16.6%;height:8.3%;transform:rotate(-3deg)}
.hero-plaque[data-plaque=lobby]{left:11.7%;top:79.4%;width:17.5%;height:8%;transform:rotate(-2deg)}
.hero-plaque-greeting{font-size:1.8cqw}
.hero-plaque-signature{font-size:.68cqw;margin-top:.28cqw}
.hero-plaque.is-long .hero-plaque-greeting{font-size:1.6cqw}
.hero-plaque.is-long .hero-plaque-signature{font-size:.62cqw}
.scene-visualization{bottom:7%;right:3%;font-size:9px}
@media(min-width:651px) and (max-height:900px){
 .hero-copy{padding-top:122px}
 .hero .eyebrow{font-size:14px;margin-bottom:12px}
 .hero h1{font-size:56px;margin-bottom:14px}
 .hero-description{font-size:14px;line-height:1.6;margin-bottom:16px}
 .hero-buttons .button{min-height:48px;font-size:12px;padding:12px 24px}
}
@media(max-width:1100px){.site-header .brand-logo{width:215px}.hero .eyebrow{font-size:14px}.hero-copy{padding-left:20px;padding-right:20px}}
@media(min-width:651px) and (max-width:900px){.hero h1{font-size:54px}.hero-description{font-size:14px}.hero-copy{padding-top:140px}}
@media(max-width:650px){
 .site-header{height:140px;padding:8px 19px;grid-template-rows:76px 44px;gap:4px 14px}
 .site-header .brand-logo{width:180px}
 .header-phone{font-size:19px;min-height:44px}
 .header-phone small{color:#f5d7aa}
 .mobile-nav{top:140px}
 .hero{height:max(calc(100svh - 12px),780px);min-height:0}
 .hero-stage{width:max(100cqw,calc(100cqh * .5625));aspect-ratio:9/16}
 .hero:before{background:linear-gradient(180deg,#061c17c9 0%,#092a21b3 18%,#092a2199 34%,#092a2155 43%,transparent 55%,transparent 90%,#071b1680 100%)}
 .hero-copy{padding:150px 18px 0}
 .hero .eyebrow{font-size:11px;line-height:1.5;margin-bottom:11px;max-width:none;letter-spacing:.05em}
 .hero h1{font-size:clamp(30px,9.1vw,39px);line-height:1.02;margin-bottom:14px}
 .hero-description{font-size:12px;line-height:1.65;margin:0 auto 16px;max-width:345px}
 .hero-buttons{flex-direction:row;gap:14px}
 .hero-buttons .button{font-size:11px;min-height:46px;padding:12px 18px;gap:11px}
 .hero-buttons .text-link{font-size:12px;gap:9px;min-height:44px}
 .hero-buttons .text-link .hero-link-label{display:none}
 .hero-buttons .text-link .hero-link-short{display:inline;font-size:inherit}
 .hero-bottom{font-size:8px;bottom:17px}
 .hero-ornament{width:15px;height:15px}
 .hero-plaque{left:6.4%;top:74%;width:22.1%;height:4.7%;transform:rotate(-2deg)}
 .hero-plaque[data-plaque=barbershop]{left:6.2%;top:74.4%;width:21.4%;height:4.8%;transform:rotate(-2deg)}
 .hero-plaque[data-plaque=lobby]{left:5.5%;top:77.2%;width:22.5%;height:5.2%;transform:rotate(-2deg)}
 .hero-plaque-greeting{font-size:2.6cqw}
 .hero-plaque-signature{font-size:.95cqw;margin-top:.3cqw}
 .hero-plaque.is-long .hero-plaque-greeting{font-size:2.2cqw}
 .hero-plaque.is-long .hero-plaque-signature{font-size:.85cqw}
 .scene-visualization{bottom:12%;right:12%;font-size:7px}
}
@media(max-width:370px){.site-header{padding:8px 14px}.site-header .brand-logo{width:168px}.hero-copy{padding-left:15px;padding-right:15px}.hero h1{font-size:32px}.hero-description{font-size:11px}}
@media(prefers-reduced-motion:reduce){.hero-plaque{transition:none}}