body{font-family:var(--font-body,Tajawal,Arial,sans-serif)}h1,h2,h3,.eyebrow{font-family:var(--font-heading,var(--font-body,Tajawal,Arial,sans-serif))}.site-footer{background:var(--brand-footer,#202b1a)}.btn,.button{border-radius:var(--radius-button,999px)}.card,.product-card,.family-card,.panel{border-radius:var(--radius-card,18px)}.section{padding-block:calc(80px * var(--space-scale,1))}
html[data-header=formal] .site-header{border-bottom:3px solid var(--gold)}html[data-header=formal] .header-inner{max-width:1280px;margin:auto}html[data-header=compact] .site-header,html[data-header=compact] .header-inner{height:64px}html[data-header=minimal] .site-header{background:var(--bg)}html[data-header=minimal] .desktop-nav{letter-spacing:.04em}
html[data-hero=institutional] .hero{min-height:620px;text-align:center}html[data-hero=institutional] .hero-content{margin-inline:auto}html[data-hero=institutional] .actions{justify-content:center}html[data-hero=split] .hero{min-height:600px}html[data-hero=split] .hero-content{width:min(58%,760px);margin-inline-start:auto}html[data-hero=split] .hero-shade{background:linear-gradient(90deg,#17253633,#172536e8)}html[data-hero=cinematic] .hero{min-height:86vh}html[data-hero=cinematic] .hero-content{max-width:760px}html[data-hero=cinematic] .hero-shade{background:linear-gradient(0deg,#2c1c1ce8,#2c1c1c22)}
html[data-cta=square] .clients-cta .btn,html[data-cta=square] .buy-actions>.btn{border-radius:6px}html[data-cta=block] .clients-cta .btn{min-width:260px;border-radius:14px}html[data-cta=outline] .clients-cta{background:transparent;color:var(--ink);border-block:1px solid var(--line)}html[data-cta=outline] .clients-cta p{color:var(--muted)}
html[data-footer=banded] .site-footer{border-top:8px solid var(--gold)}html[data-footer=compact] .site-footer{padding-top:36px}html[data-footer=editorial] .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;border-top:1px solid #ffffff30;padding-top:40px}
html[data-hierarchy=dense] h1{letter-spacing:-.02em}html[data-hierarchy=visual] .card-media{aspect-ratio:4/5}html[data-hierarchy=spacious] .section-heading{margin-bottom:64px}html[data-homepage=corporate] .featured-section{background:var(--soft)}html[data-homepage=catalog] .family-grid{gap:12px}html[data-homepage=story] .why-grid{gap:100px}
@media(max-width:800px){html[data-hero=split] .hero-content{width:100%}html[data-footer=editorial] .footer-grid{grid-template-columns:1fr 1fr}}

html[data-homepage=story] .section{padding-block:calc(92px * var(--space-scale))}
html[data-homepage=story] .section-heading{max-width:780px}
html[data-homepage=story] .space-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
html[data-homepage=story] .space-card{min-height:260px;padding:30px;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;text-decoration:none}
html[data-homepage=story] .space-card>span,html[data-homepage=story] .editorial-card>span,html[data-homepage=story] .process-grid>li>span{color:var(--gold);font-size:.82rem;letter-spacing:.14em}
html[data-homepage=story] .space-card h3{font-size:1.45rem;margin-block:38px 12px}
html[data-homepage=story] .space-card p{color:var(--muted);flex:1}
html[data-homepage=story] .space-card strong{font-weight:500;color:var(--olive)}
html[data-homepage=story] .editorial-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
html[data-homepage=story] .editorial-card{padding:34px;border-top:1px solid var(--gold);background:var(--bg)}
html[data-homepage=story] .editorial-card h3{font-size:1.65rem;margin-block:18px 10px}
html[data-homepage=story] .process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;padding:0;border-block:1px solid var(--line)}
html[data-homepage=story] .process-grid li{padding:34px 26px;border-inline-end:1px solid var(--line)}
html[data-homepage=story] .process-grid h3{margin-block:24px 10px}
html[data-homepage=story] .system-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid var(--line)}
html[data-homepage=story] .system-list>div{display:flex;align-items:center;gap:14px;padding:23px;border-bottom:1px solid var(--line)}
html[data-homepage=story] .system-list span{color:var(--gold);font-size:1.4rem}
html[data-homepage=story] .system-list h3{margin:0;font-size:1.05rem}
html[data-homepage=story] .material-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
html[data-homepage=story] .material-grid article{padding:28px;border:1px solid var(--line);background:linear-gradient(145deg,var(--bg),var(--soft))}
html[data-homepage=story] .material-grid span{color:var(--gold);font-size:.8rem}
html[data-homepage=story] .warranty-section{background:var(--olive);color:#fff}
html[data-homepage=story] .warranty-inner{display:flex;align-items:center;justify-content:space-between;gap:50px}
html[data-homepage=story] .warranty-inner>div{max-width:760px}
html[data-homepage=story] .warranty-inner p{color:#ffffffcc}
html[data-homepage=story] .before-after-images{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html[data-homepage=story] .before-after-images figure{margin:0;position:relative}
html[data-homepage=story] .before-after-images img{width:100%;aspect-ratio:4/3;object-fit:cover}
html[data-homepage=story] .before-after-images figcaption{position:absolute;inset-inline-start:12px;bottom:12px;background:var(--olive);color:#fff;padding:6px 12px}
@media(max-width:1000px){html[data-homepage=story] .space-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-homepage=story] .process-grid,html[data-homepage=story] .system-list,html[data-homepage=story] .material-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){html[data-homepage=story] .space-grid,html[data-homepage=story] .editorial-grid,html[data-homepage=story] .process-grid,html[data-homepage=story] .system-list,html[data-homepage=story] .material-grid{grid-template-columns:1fr}html[data-homepage=story] .warranty-inner{align-items:flex-start;flex-direction:column}}
