*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}button,a{touch-action:manipulation}a{color:inherit}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #eb744c;outline-offset:3px}img{display:block;max-width:100%}.reference-demo{--bg:#f7f3ec;--ink:#2b2925;--accent:#514236;--accent-ink:#fff;--panel:#eee8df;--heading:Georgia,'Times New Roman',serif;background:#e9e6e0;color:var(--ink);font:15px/1.55 Arial,Helvetica,sans-serif}.reference-demo h1,.reference-demo h2,.reference-demo h3{font-family:var(--heading);font-weight:400;line-height:1.08;margin:0}.reference-demo h1{font-size:clamp(44px,5.5vw,82px);letter-spacing:-.038em}.reference-demo h2{font-size:clamp(27px,2.9vw,43px);letter-spacing:-.022em}.reference-demo h3{font-size:22px}.reference-demo p{margin:.8em 0 1.2em}.reference-demo em{font-weight:400}.preview-bar{background:#183b32;color:#fff;min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:8px max(18px,calc((100vw - 1220px)/2));gap:12px;font:600 12px/1.25 Arial,sans-serif}.preview-bar a{text-decoration:none}.preview-bar a:hover{text-decoration:underline}.demo-shell{max-width:1220px;margin:24px auto 50px;box-shadow:0 18px 56px #1a201b26;background:var(--bg)}.demo-header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:0 5%;background:var(--bg);position:relative;z-index:5}.demo-logo{text-decoration:none;font:600 clamp(18px,1.65vw,26px)/1 var(--heading);letter-spacing:.04em;white-space:nowrap}.demo-header nav{display:flex;align-items:center;gap:26px}.demo-header nav a{text-decoration:none;font-size:12px}.demo-header nav a:hover{text-decoration:underline}.demo-btn{background:var(--accent);color:var(--accent-ink);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:11px 20px;font-size:13px;border:1px solid var(--accent);font-weight:600;transition:filter .15s}.demo-btn:hover{filter:brightness(1.15)}.demo-menu{display:none}.label{text-transform:uppercase;letter-spacing:.17em;font-size:11px;font-weight:700;display:block;margin-bottom:15px}.demo-hero{min-height:390px;position:relative;display:flex;align-items:center;overflow:hidden;color:#fff;background:#27231f}.hero-photo{position:absolute;width:100%;height:100%;object-fit:cover;object-position:center 45%;inset:0}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#120f0de0 0%,#17110f80 43%,transparent 78%)}.hero-copy{position:relative;z-index:1;padding:55px 8%;max-width:680px}.hero-copy p{max-width:370px;font-size:17px;line-height:1.5}.demo-section{padding:48px 7%}.demo-section>p{max-width:650px}.demo-section a:not(.demo-btn){text-decoration:none;border-bottom:1px solid currentColor}.demo-section a:hover{text-decoration:none}.demo-contact{text-align:center;background:var(--accent);color:var(--accent-ink);padding:55px 22px}.demo-contact h2{margin:0 auto;max-width:850px}.demo-contact p{max-width:550px;margin:16px auto 25px}.demo-contact .demo-btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 5%;font-size:11px;background:var(--bg)}.demo-footer a{text-decoration:none}.photo-row{display:flex;gap:8px;min-width:0}.photo-row img{min-width:0;flex:1;object-fit:cover}.service-grid,.room-grid,.food-grid{display:grid;gap:20px}.service-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.service-grid img{width:100%;aspect-ratio:1.5;object-fit:cover}.service-grid article h3{margin-top:15px}.beauty-services .service-grid article h3{overflow-wrap:anywhere;hyphens:auto}.service-grid article p{font-size:13px}.service-grid article a{font-size:13px}
/* Cosmetic studio — warm editorial treatment */
.beauty{--bg:#f5f0e9;--ink:#302921;--accent:#412e23;--panel:#e8d9cc}.beauty .demo-hero{min-height:385px}.beauty .hero-photo{object-position:center 36%}.beauty-services{display:grid;grid-template-columns:30% 1fr;gap:55px}.beauty-services>div:first-child{padding-top:16px}.beauty-process{display:grid;grid-template-columns:25% 25% 1fr;gap:30px;align-items:center;background:#e6d7c8}.beauty-process img{height:210px;width:100%;object-fit:cover}.beauty-process ol{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0;list-style:none;counter-reset:step}.beauty-process li{font:17px var(--heading);counter-increment:step}.beauty-process li:before{content:counter(step);display:block;border-radius:50%;background:#cfb6a3;width:34px;height:34px;line-height:34px;text-align:center;margin-bottom:15px}
/* Fashion salon — a dark lookbook rather than repeated cards */
.salon{--bg:#141414;--ink:#f9f4ef;--accent:#b56b48;--panel:#1c1c1c}.salon .demo-header{background:#101010}.salon .demo-logo{letter-spacing:.18em}.salon .demo-hero{min-height:320px;background:#191919}.salon .hero-photo{object-position:center 22%}.salon .hero-shade{background:linear-gradient(90deg,#100f0ee8,#100f0e80 33%,transparent 72%)}.salon-looks{display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden}.salon-looks img{width:100%;height:205px;object-fit:cover}.salon-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.salon-service-grid article{display:grid;grid-template-columns:45% 1fr;gap:15px;align-items:center}.salon-service-grid img{height:168px;width:100%;object-fit:cover}.salon-service-grid h3{margin:8px 0 15px}.salon-about{display:grid;grid-template-columns:48% 52%;background:#f5f0e9;color:#151515}.salon-about img{width:100%;height:225px;object-fit:cover}.salon-about div{padding:40px}.salon .demo-contact{background:#161616}.salon .demo-footer{background:#101010}
/* Barber — strong image gallery and opening panel */
.barber{--bg:#111516;--ink:#f4f0ec;--accent:#bb4235;--panel:#1c2020;--heading:Arial,Helvetica,sans-serif}.barber h1,.barber h2,.barber h3{font-weight:800;letter-spacing:-.035em}.barber .demo-header{background:#111516}.barber-services{display:grid;grid-template-columns:repeat(3,1fr);padding:38px 5%;background:#171b1b}.barber-services article{text-align:center;padding:14px 30px;border-right:1px solid #363c3c}.barber-services article:last-child{border:0}.barber-services p{font-size:13px}.outline-icon{color:var(--accent);font-size:42px;line-height:1}.barber-gallery{display:grid;grid-template-columns:23% 1fr;gap:30px;padding:45px 5%}.barber-gallery .photo-row img{width:25%;height:180px}.barber-about{display:grid;grid-template-columns:33% 34% 33%;background:#1c2020}.barber-about>img{width:100%;height:230px;object-fit:cover}.barber-about>div{padding:30px}.barber-about .hours{background:#f5f1e9;color:#151b1b}.barber-about .hours h2{font-size:23px}
/* Lakeside pension — nature first, an inquiry bar and room split */
.hotel{--bg:#f6f4ee;--ink:#1d3c2e;--accent:#234636;--panel:#e8eae1}.hotel .demo-hero{min-height:360px;color:#183d2b}.hotel .hero-photo{object-position:center 40%}.hotel .hero-shade{background:linear-gradient(90deg,#fff8ecdd,transparent 80%)}.hotel-book{display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:center;gap:10px;padding:18px 4%;background:#fff;box-shadow:0 5px 18px #0001}.hotel-book span{border-right:1px solid #ddd;padding:15px;font-size:13px}.hotel-book small{grid-column:1/-1;text-align:right;font-size:10px}.hotel-rooms .room-grid{grid-template-columns:repeat(2,1fr);margin-top:25px}.hotel-rooms article{display:grid;grid-template-columns:50% 50%;border:1px solid #deded7}.hotel-rooms article img{width:100%;height:200px;object-fit:cover}.hotel-rooms article div{padding:16px}.hotel-rooms h3{font-size:21px}.hotel-rooms article p{font-size:13px}.hotel-location{display:grid;grid-template-columns:32% 34% 34%;background:#ecede5}.hotel-location img{width:100%;height:210px;object-fit:cover}.hotel-location div{padding:30px}
/* Restaurant — editorial story and food photography */
.restaurant{--bg:#f5f1e9;--ink:#203025;--accent:#63172b;--panel:#1e3527}.restaurant .demo-header{background:#263628;color:#fff}.restaurant .hero-photo{object-position:center 50%}.restaurant-story{display:grid;grid-template-columns:28% 1fr;gap:32px}.restaurant-story .photo-row img{height:165px}.restaurant-food{display:grid;grid-template-columns:20% 1fr;gap:25px;background:#203628;color:#fff}.restaurant-food .food-grid{grid-template-columns:repeat(4,1fr);gap:10px}.restaurant-food article img{width:100%;height:120px;object-fit:cover}.restaurant-food article h3{font-size:17px;margin-top:9px}.restaurant-food article p{font-size:12px}.restaurant-lower{display:grid;grid-template-columns:65% 35%}.restaurant-lower .photo-row img{height:230px}.restaurant-lower>div:last-child{padding:30px;background:#f3efe5}.restaurant .demo-footer{background:#f5f1e9}
/* Burger counter — oversized expressive copy and menu list */
.imbiss{--bg:#faf4eb;--ink:#1e1712;--accent:#c71928;--panel:#201510;--heading:Arial,Helvetica,sans-serif}.imbiss .demo-header{background:#fff}.imbiss h1,.imbiss h2,.imbiss h3{font-weight:900;letter-spacing:-.045em}.imbiss .hero-copy em{color:#e63239;font-style:normal}.imbiss .demo-hero{min-height:400px}.imbiss .hero-photo{object-position:65% 50%}.imbiss .hero-shade{background:linear-gradient(90deg,#150d0cd9,transparent 82%)}.imbiss-menu{display:grid;grid-template-columns:45% 1fr;gap:35px}.imbiss-menu ul{list-style:none;padding:0;margin:15px 0}.imbiss-menu li{border-bottom:1px solid #d9d1c6;padding:10px 0}.imbiss-menu li b,.imbiss-menu li small{display:block}.imbiss-menu li small{font-size:12px}.imbiss-menu article{background:#fff;padding-bottom:18px}.imbiss-menu article img{width:100%;height:190px;object-fit:cover}.imbiss-menu article h3,.imbiss-menu article p{margin:12px 20px}.imbiss-bottom{display:grid;grid-template-columns:25% 25% 1fr;background:#211712;color:#fff;align-items:center}.imbiss-bottom img{width:100%;height:225px;object-fit:cover}.imbiss-bottom div{padding:25px 45px}
/* Café — light, photographed food pairs and a warm atmosphere */
.cafe{--bg:#f9f3e7;--ink:#342517;--accent:#efc76c;--accent-ink:#2f241c;--panel:#fff0cb}.cafe .demo-header{background:#f9f3e7}.cafe .demo-hero{min-height:335px}.cafe-menu{display:grid;grid-template-columns:1fr 1fr;gap:20px}.cafe-menu article{display:grid;grid-template-columns:1fr 48%;gap:18px}.cafe-menu article img{width:100%;height:160px;object-fit:cover}.cafe-menu article p{font-size:13px}.cafe-about{display:grid;grid-template-columns:50% 50%;background:#f0e8da}.cafe-about img{width:100%;height:270px;object-fit:cover}.cafe-about div{padding:35px 10%}.cafe-info{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:14px;padding:25px 5%}.cafe-info>div{padding:25px;background:#fffaf2}.cafe-info img{height:185px;width:100%;object-fit:cover}.cafe-info h2{font-size:23px}
/* Handwerk — service list, process and project photography */
.handwerk{--bg:#f7f6f3;--ink:#0d2e47;--accent:#f1661e;--panel:#103047;--heading:Arial,Helvetica,sans-serif}.handwerk h1,.handwerk h2,.handwerk h3{font-weight:800}.handwerk .hero-copy{max-width:720px}.handwerk .hero-photo{object-position:65% 50%}.handwerk .hero-shade{background:linear-gradient(90deg,#f6f3edfa,#f6f3edbc 43%,transparent 75%)}.handwerk .demo-hero{color:#0d2e47}.handwerk-services{display:grid;grid-template-columns:1fr 1fr 1fr;gap:36px}.handwerk-services>img{height:320px;width:100%;object-fit:cover}.handwerk-services ul{list-style:none;padding:0}.handwerk-services ul li{padding:8px 0;border-bottom:1px solid #ddd;display:flex;justify-content:space-between}.handwerk-services ol{padding-left:25px}.handwerk-services ol li{padding:14px 0;border-bottom:1px solid #ddd}.handwerk-projects{display:grid;grid-template-columns:30% 1fr;background:#11344d;color:#fff}.handwerk-projects>div:first-child{padding:30px}.handwerk-projects .photo-row img{height:190px}.handwerk .demo-contact{background:#103047}
/* Venue — occasion pairs and an asymmetric room collage */
.event{--bg:#f8f5ef;--ink:#363025;--accent:#a37a4c;--panel:#e9dfd0}.event-occasions{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.event-occasions article{display:grid;grid-template-columns:46% 1fr;gap:12px}.event-occasions article img{width:100%;height:175px;object-fit:cover}.event-occasions article h3{font-size:21px}.event-occasions article p{font-size:12px}.event-rooms{display:grid;grid-template-columns:25% 1fr;gap:30px;background:#f2ede5}.event-collage{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:120px 120px;gap:8px}.event-collage img{height:100%;width:100%;object-fit:cover}.event-collage img:first-child{grid-row:1/3}.event-facts{display:flex;justify-content:space-around;gap:16px;padding:25px;font-size:13px}
/* Fitness — five disciplines and a schedule, not generic services */
.fitness{--bg:#f4f5f3;--ink:#172125;--accent:#c3eb43;--accent-ink:#192229;--panel:#1c292d;--heading:Arial,Helvetica,sans-serif}.fitness h1,.fitness h2,.fitness h3{font-weight:850;letter-spacing:-.035em}.fitness .demo-header,.fitness .demo-footer{background:#1c292d;color:#fff}.fitness .demo-hero em{color:#c4ee46;font-style:normal;font-weight:inherit}.fitness .demo-hero{min-height:310px}.fitness-areas{display:grid;grid-template-columns:2fr 1fr;gap:20px}.fitness-areas>img{width:100%;height:215px;object-fit:cover}.fitness-types{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:16px}.fitness-types article{background:#202d31;color:#fff;text-align:center;padding:12px 5px;min-height:125px}.fitness-types article span{font-size:29px}.fitness-types article h3{font-size:13px}.fitness-types article p{font-size:10px}.fitness-schedule{display:grid;grid-template-columns:28% 34% 1fr;gap:22px;background:#1c292d;color:#fff}.fitness-schedule ul{list-style:none;padding:0;margin:0}.fitness-schedule li{display:flex;gap:12px;justify-content:space-between;padding:7px;border-bottom:1px solid #586164;font-size:12px}.fitness-schedule li strong{color:#c3eb43}.fitness-schedule li small{font-size:10px;color:#b9c2bf}.fitness-schedule img{width:100%;height:215px;object-fit:cover}.fitness-entry{display:grid;grid-template-columns:50% 1fr;align-items:center}.fitness-entry img{width:100%;height:225px;object-fit:cover}.fitness-entry div{padding:35px}
@media(max-width:850px){.demo-shell{margin:0 auto;box-shadow:none}.demo-header nav{gap:10px}.demo-header{padding:0 3%}.demo-header nav a{font-size:11px}.demo-header>.demo-btn{display:none}.beauty-services,.restaurant-story,.restaurant-food,.event-rooms{grid-template-columns:1fr}.beauty-process{grid-template-columns:1fr 1fr}.beauty-process ol{grid-column:1/-1}.handwerk-services{gap:16px}.event-occasions{gap:12px}}
@media(max-width:1024px){.preview-bar{font-size:10px;padding:8px 12px;min-height:45px}.preview-bar span{display:none}.demo-header{height:62px;padding:0 5%}.demo-header>.demo-btn{display:none}.demo-menu{display:block;border:0;background:none;font-size:25px;cursor:pointer;min-width:44px;min-height:44px;color:inherit}.demo-header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);color:var(--ink);padding:15px 5%;box-shadow:0 12px 18px #0003;flex-direction:column;align-items:stretch}.demo-header nav.is-open{display:flex}.demo-header nav a{padding:10px 0;font-size:15px}.demo-hero{min-height:360px}.hero-photo{object-position:60% 50%}.hero-shade{background:linear-gradient(0deg,#15110fdf,#15110f4d 75%)}.hero-copy{align-self:flex-end;padding:38px 6%;max-width:100%}.reference-demo h1{font-size:clamp(37px,10vw,55px)}.reference-demo h2{font-size:29px}.hero-copy p{font-size:14px;max-width:310px}.demo-section{padding:35px 5%}.demo-contact{padding:44px 20px}.demo-footer{font-size:10px;flex-wrap:wrap}.demo-footer strong{width:100%}.service-grid,.room-grid,.food-grid{grid-template-columns:1fr}.beauty-process,.salon-about,.barber-gallery,.barber-about,.hotel-location,.restaurant-lower,.imbiss-menu,.imbiss-bottom,.cafe-menu,.cafe-about,.cafe-info,.handwerk-services,.handwerk-projects,.event-rooms,.fitness-areas,.fitness-schedule,.fitness-entry{grid-template-columns:1fr}.beauty-services{display:block}.beauty-services .service-grid{margin-top:26px}.beauty-services .service-grid article{display:grid;grid-template-columns:34% 1fr;column-gap:14px;border-bottom:1px solid #d6cbc0;padding:12px 0}.beauty-services .service-grid img{grid-row:1/4;height:90px}.beauty-services .service-grid article h3{font-size:19px;margin:0}.beauty-services .service-grid article p{margin:3px 0;font-size:12px}.beauty-process>div:first-child{display:none}.beauty-process ol{grid-column:auto;grid-template-columns:1fr;gap:5px}.beauty-process li{font-size:14px;border-bottom:1px solid #d7c5b8;padding:7px 0}.beauty-process li:before{display:inline-block;margin:0 12px 0 0;font-size:12px;width:25px;height:25px;line-height:25px}.salon .demo-hero .hero-shade{background:linear-gradient(0deg,#111d,#1112 90%)}.salon-looks{grid-template-columns:repeat(3,1fr)}.salon-looks img{height:105px}.salon-looks img:nth-child(n+4){display:none}.salon-service-grid{grid-template-columns:1fr}.salon-service-grid article{grid-template-columns:70px 1fr;border-bottom:1px solid #444;padding-bottom:10px}.salon-service-grid img{height:70px}.salon-about img{height:145px}.barber .hero-copy{max-width:360px}.barber-services{padding:20px 2%}.barber-services article{padding:5px 8px}.barber-services h3{font-size:12px}.barber-services p{font-size:10px}.outline-icon{font-size:25px}.barber-gallery{padding:28px 5%}.barber-gallery .photo-row img{height:105px}.barber-gallery .photo-row img:last-child{display:none}.barber-about>img{height:180px}.barber-about>div{padding:25px}.hotel .demo-hero{color:#183d2b}.hotel .hero-shade{background:linear-gradient(90deg,#fff8ecd9,transparent 100%)}.hotel-book{grid-template-columns:1fr 1fr;padding:12px 4%}.hotel-book span{padding:6px;border:0;border-bottom:1px solid #ddd}.hotel-book span:nth-child(3){grid-column:1/-1}.hotel-book .demo-btn{grid-column:1/-1}.hotel-book small{text-align:center}.hotel-rooms article img{height:160px}.hotel-rooms article div{padding:12px}.hotel-rooms h3{font-size:17px}.hotel-rooms article p{font-size:11px}.hotel-location img{height:180px}.hotel-location div{padding:22px}.restaurant-story .photo-row{display:none}.restaurant-food .food-grid{gap:0}.restaurant-food article{display:grid;grid-template-columns:80px 1fr;gap:0 15px;padding:9px 0;border-bottom:1px solid #506356}.restaurant-food article img{grid-row:1/3;height:65px}.restaurant-food article h3{margin:5px 0}.restaurant-food article p{margin:0}.restaurant-lower .photo-row{display:none}.imbiss .hero-copy em{color:#ff4548}.imbiss-menu article img{height:175px}.imbiss-bottom img{height:140px}.imbiss-bottom div{padding:22px}.cafe-menu article{grid-template-columns:1fr 105px;align-items:center;border-bottom:1px solid #e5dacf}.cafe-menu article img{height:105px}.cafe-menu article p:nth-of-type(2){display:none}.cafe-about img{height:160px}.cafe-about div{padding:27px 5%}.cafe-info{padding:18px 5%}.cafe-info img{height:145px}.handwerk .hero-shade{background:linear-gradient(0deg,#112d39bd,transparent 95%)}.handwerk .demo-hero{color:#fff}.handwerk-services>img{display:none}.handwerk-services ul li{padding:12px 0}.handwerk-projects .photo-row img{height:115px}.handwerk-projects>div:first-child{padding:25px}.event-occasions{grid-template-columns:1fr}.event-occasions article{grid-template-columns:105px 1fr;border-bottom:1px solid #ddd;padding:9px 0}.event-occasions article img{height:95px}.event-rooms{gap:15px}.event-collage{grid-template-rows:80px 80px}.event-facts{flex-direction:column}.fitness-areas>img{display:none}.fitness-types{grid-template-columns:repeat(3,1fr)}.fitness-types article{background:#e3e8e6;color:#1c292d;min-height:90px}.fitness-schedule img{height:135px}.fitness-entry img{height:135px}.fitness-entry div{padding:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-btn{transition:none}}