/* Three original concepts, one responsive component system. No runtime dependencies. */
:root{font-family:Arial,sans-serif;font-size:16px;--bg:#f1f2e9;--ink:#234340;--soft:#526963;--accent:#234340;--line:#23434033;--panel:#e3e7dc;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:85px}body{margin:0;background:var(--bg);color:var(--ink);line-height:1.7}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}h1,h2{font:400 clamp(2.5rem,5.7vw,5.5rem)/1.05 Georgia,serif;letter-spacing:-.05em;text-wrap:balance}h2{font-size:clamp(2rem,3.5vw,3.25rem)}h3{font:400 1.6rem/1.25 Georgia,serif}p{color:var(--soft)}
.demo-banner{background:#050a14;color:#d5e5ff;display:flex;justify-content:space-between;gap:20px;padding:12px 4%;font-size:.75rem;position:sticky;top:0;z-index:10;border-bottom:1px solid #365070}.demo-banner a{padding-block:4px}.demo-banner a:last-child{color:#6ddaff}.demo-banner a:hover{text-decoration:underline}.demo-header{display:flex;justify-content:space-between;align-items:center;gap:30px;width:min(1240px,90%);margin:auto;padding:35px 0}.demo-brand{font-size:1.5rem;font-family:Georgia,serif;line-height:1.1;letter-spacing:-.025em}.demo-brand small{display:block;font:400 .55rem Arial,sans-serif;letter-spacing:.23em;margin-top:10px}.demo-header nav{display:flex;gap:32px;font-size:.875rem}.demo-header nav a{padding-block:10px}.demo-header nav a:hover{text-decoration:underline}.demo-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:70px;align-items:center;width:min(1240px,90%);margin:35px auto 95px}.overline{display:block;font-size:.6875rem;letter-spacing:.16em;color:var(--ink);margin-bottom:25px}.hero-copy h1{max-width:610px}.lead{max-width:470px;margin-top:28px;font-size:1.0625rem}.demo-button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;background:var(--accent);color:var(--bg);padding:17px 24px;font-size:.875rem;min-height:54px;margin-top:32px;border:1px solid var(--accent);transition:transform .25s,box-shadow .25s}.demo-button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #0002}
.demo-art{height:560px;position:relative;overflow:hidden;isolation:isolate;display:grid;place-items:center}.demo-art>span{font:400 280px Georgia,serif;line-height:1;z-index:1}.demo-art>small{position:absolute;bottom:25px;left:20px;right:20px;text-align:center;font-size:.6rem;letter-spacing:.2em}.art-estate{background:linear-gradient(155deg,#b4cbc2,#709a8d)}.art-estate>span{display:none}.art-estate>small{color:#edf4ef;background:#29433c99;padding:10px;z-index:2}.art-estate i{position:absolute;bottom:-20px;width:37%;background:repeating-linear-gradient(0deg,transparent 0 35px,#436a60 35px 39px),repeating-linear-gradient(90deg,#b5c8b6 0 25px,#658876 25px 46px);box-shadow:24px 0 #4c6d5c;transform:skewY(-8deg)}.art-estate i:nth-child(1){height:60%;left:4%}.art-estate i:nth-child(2){height:88%;left:48%;background-color:#527d6e}.art-estate i:nth-child(3){height:40%;left:85%}
.demo-section{width:min(1240px,90%);margin:auto;padding:85px 0;border-top:1px solid var(--line)}.section-intro{max-width:650px;margin-bottom:45px}.section-intro>p:last-child{margin-top:22px}.demo-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.demo-cards article{padding:30px;border:1px solid var(--line);background:var(--panel);transition:transform .3s}.demo-cards article:hover{transform:translateY(-5px)}.card-number{font:400 3rem Georgia,serif;opacity:.45;margin-bottom:30px}.demo-cards .overline{margin-bottom:15px}.demo-cards p{margin:20px 0;font-size:.9375rem}.demo-cards a{display:inline-block;padding:10px 0;font-size:.8125rem;border-bottom:1px solid var(--line)}.experience{display:grid;grid-template-columns:1fr 1fr;gap:100px}.experience ul{padding-left:20px;color:var(--soft);font-size:.9375rem;line-height:2}.demo-contact{text-align:center;background:var(--panel);padding:90px 25px;border-block:1px solid var(--line)}.demo-contact p:not(.overline){max-width:580px;margin:25px auto 0}.demo-footer{display:flex;justify-content:space-between;gap:25px;width:min(1240px,90%);margin:auto;padding:28px 0;font-size:.75rem;color:var(--soft)}.skip-link{position:fixed;top:-100px;left:15px;background:var(--accent);color:var(--bg);padding:15px;z-index:30}.skip-link:focus{top:15px}
.demo-barber{--bg:#151717;--ink:#e7c09c;--soft:#b8ab9b;--accent:#d4a172;--line:#e4b18133;--panel:#222322;color-scheme:dark}.demo-barber h1,.demo-barber h2{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:800;text-transform:uppercase;line-height:1.05;letter-spacing:-.035em}.demo-barber .demo-brand{font-weight:700;letter-spacing:.12em;text-transform:uppercase}.demo-barber .demo-art{background:radial-gradient(ellipse,#463828,#27231e);border:1px solid #8d6845}.art-barber::before,.art-barber::after{content:'';position:absolute;width:130%;height:1px;background:#ae80594a;transform:rotate(45deg)}.art-barber::after{transform:rotate(-45deg)}.art-barber>span{font-weight:700;color:#c19369;text-shadow:10px 15px 20px #0006}.art-barber>small{color:#c79f79}.demo-barber .demo-cards article{border-width:1px 0 0;background:transparent}.demo-barber .card-number{color:#d4a172}
.demo-salon{--bg:#faf1f1;--ink:#6d364a;--soft:#805b68;--accent:#7d445b;--line:#7d445b33;--panel:#f0dfe3}.demo-salon h1{font-style:italic}.demo-salon .demo-brand{letter-spacing:.05em}.demo-salon .demo-art{border-radius:250px 250px 8px 8px;background:linear-gradient(125deg,#ecd1d1,#bc8498)}.demo-salon .demo-art::after{content:'';position:absolute;inset:20px;border:1px solid #fff7;border-radius:inherit}.art-salon>span{font-style:italic;color:#fff1ed;text-shadow:15px 20px 25px #93647777}.art-salon>small{color:#6c334b;bottom:35px}.demo-salon .demo-button{border-radius:40px}.demo-salon .demo-cards article{border-radius:100px 100px 10px 10px;padding-top:45px;text-align:center}.demo-salon .card-number{font-style:italic}
@media(max-width:900px){.demo-hero{gap:35px}.demo-art{height:420px}.demo-art>span{font-size:210px}.demo-cards{gap:14px}.demo-cards article{padding:25px}.experience{gap:45px}.demo-header nav{gap:18px}.demo-banner{font-size:.6875rem}}
@media(max-width:640px){html{scroll-padding-top:105px}.demo-banner{flex-wrap:wrap;gap:2px 12px;padding:8px 5%;font-size:.625rem}.demo-banner>span{order:3;flex-basis:100%;color:#94a9c6}.demo-header{padding-block:25px;align-items:start;gap:15px}.demo-brand{font-size:1.15rem}.demo-brand small{font-size:.45rem;letter-spacing:.12em}.demo-header nav{gap:12px;font-size:.6875rem}.demo-header nav a:nth-child(2){display:none}.demo-hero{grid-template-columns:1fr;gap:35px;margin-top:25px;margin-bottom:60px}h1{font-size:clamp(2.9rem,13vw,4.5rem)}h2{font-size:2.3rem}.overline{font-size:.625rem;margin-bottom:20px}.lead{font-size:1rem;margin-top:24px}.demo-art{height:370px}.demo-art>span{font-size:220px}.demo-section{padding-block:60px}.demo-cards{grid-template-columns:1fr;gap:20px}.demo-cards article{padding:30px}.card-number{margin-bottom:15px}.experience{grid-template-columns:1fr;gap:25px}.demo-contact{padding:65px 25px}.demo-footer{flex-direction:column;gap:10px;font-size:.6875rem}.demo-salon .demo-cards article{border-radius:70px 70px 10px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
/* Concrete example services and property details. */
.offering-card{display:flex;flex-direction:column}.offering-facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 20px;padding:0}.offering-facts li{font-size:.75rem;padding:4px 8px;border:1px solid var(--line);border-radius:4px}.offering-price{font-size:1.25rem;font-weight:500;display:block;margin-top:auto;margin-bottom:20px}.offering-card details{border-top:1px solid var(--line);padding-top:12px}.offering-card summary{cursor:pointer;min-height:44px;padding-block:9px;font-size:.875rem}.offering-card summary:hover{color:var(--accent)}.offering-card summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.offering-card details>p{font-size:.875rem;line-height:1.7;margin:12px 0 0}.demo-salon .offering-facts{justify-content:center}
/* Editorial photos keep their layout space reserved while loading. */
.demo-photo{margin:0;position:relative;height:560px;min-width:0;overflow:hidden;background:var(--panel)}.demo-photo img{display:block;width:100%;height:100%;object-fit:cover}.demo-photo figcaption{position:absolute;bottom:14px;left:14px;right:14px;color:#fff;background:rgba(5,10,20,.78);font-size:.75rem;line-height:1.5;padding:8px 12px;width:fit-content;max-width:calc(100% - 28px);border-radius:4px}.demo-estate .demo-photo img{object-position:65% 55%}.demo-barber .demo-photo{border:1px solid var(--line)}.demo-barber .demo-photo img{object-position:55% 43%}.demo-salon .demo-photo{border-radius:250px 250px 8px 8px}.demo-salon .demo-photo img{object-position:50% 35%}
@media(max-width:900px){.demo-photo{height:420px}}@media(max-width:640px){.demo-photo{height:auto;aspect-ratio:4/5;max-height:530px}.demo-photo img{position:absolute;inset:0}}