/* Karawia Group — shared styles. Page-specific layout lives inline and in each page's <style>. */
@font-face{font-family:"Cairo";src:url("/assets/fonts/cairo-wght-200-800.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
body{margin:0;background:#0B0B0A;color:#F5F1E8;font-family:"Cairo",system-ui,sans-serif;-webkit-text-size-adjust:100%}
body.page-home{background:#000}
a{color:#E7B24C;text-decoration:none}
a:hover{color:#F3CF85}
h1,h2{font-family:"Cairo",system-ui,sans-serif;font-weight:800 !important;letter-spacing:0}
.lang-en h1,.lang-en h2{text-transform:uppercase}
input,select,textarea,button{font-family:inherit}
a:focus-visible,button:focus-visible,input:focus,select:focus,textarea:focus,summary:focus-visible{outline:3px solid #E7B24C;outline-offset:2px}
.skip-link{position:fixed;top:8px;inset-inline-start:8px;z-index:100;padding:10px 16px;background:#E7B24C;color:#000;font-weight:800;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* Header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(0,0,0,.92);color:#fff;transition:background-color .25s ease}
.hdr[data-overlay]:not(.is-solid){background:rgba(0,0,0,0)}
/* keeps header text readable over the bright parts of the home photo */
.hdr[data-overlay]:not(.is-solid) :is(.hdr-link,.hdr-lang){text-shadow:0 0 5px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.6)}
.hdr-row{max-width:1360px;margin:0 auto;padding:0 40px;box-sizing:border-box;min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:12px 48px}
.hdr-mark,.hdr-wm{display:flex;align-items:center;min-height:44px}
.hdr-mark img{width:60px;height:60px;display:block}
.hdr-wm img{height:58px;width:auto;display:block}
.hdr-nav{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.hdr-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;color:#fff;font-size:17px;background:transparent;border:0;cursor:pointer}
.hdr-link:hover,.hdr-link[aria-current],.hdr-link.is-active,.hdr-dd-btn[aria-expanded="true"]{color:#E7B24C}
.hdr-dd{position:relative}
.hdr-dd-menu{position:absolute;top:100%;inset-inline-start:0;min-width:280px;padding:8px 0;background:#0B0B0A;border:1px solid #2B2925;border-top:3px solid #E7B24C;box-shadow:0 16px 40px rgba(0,0,0,.45);display:flex;flex-direction:column}
.hdr-dd-menu[hidden]{display:none}
.hdr-dd-menu a{display:flex;align-items:center;min-height:48px;padding:0 20px;color:#fff;font-size:16px}
.hdr-dd-menu a:hover,.hdr-dd-menu a[aria-current]{color:#E7B24C;background:#161513}
.hdr-dd-menu .dd-all{margin-top:4px;border-top:1px solid #2B2925;color:#E7B24C;font-size:15px;font-weight:700}
.hdr-side{display:flex;align-items:center;gap:20px}
.hdr-lang{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:#fff;font-weight:700;font-size:16px}
.hdr-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;background:transparent;border:1.5px solid rgba(255,255,255,.5);border-radius:6px;color:#fff;cursor:pointer}
.hdr-burger .i-close,.hdr-burger[aria-expanded="true"] .i-open{display:none}
.hdr-burger[aria-expanded="true"] .i-close{display:block}
.hdr-mob{background:#0B0B0A;border-top:3px solid #E7B24C;padding:8px 16px 24px;display:flex;flex-direction:column;max-height:calc(100vh - 72px);overflow-y:auto}
.hdr-mob[hidden]{display:none}
.mob-top{display:flex;align-items:center;min-height:52px;color:#fff;font-size:18px;font-weight:700;border-bottom:1px solid #2B2925}
.mob-label{display:flex;align-items:center;min-height:44px;padding-top:8px;color:#B9B2A4;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.lang-ar .mob-label{letter-spacing:0}
.mob-sub{display:flex;align-items:center;min-height:48px;padding-inline-start:12px;color:#fff;font-size:17px}
.mob-all{color:#E7B24C;font-size:16px;font-weight:700;border-bottom:1px solid #2B2925}
.mob-quote{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:20px;background:#E7B24C;color:#000;font-size:17px;font-weight:800;border-radius:4px}
.mob-quote:hover{color:#000}
.hdr-spacer{height:104px;background:#0B0B0A}
@media (max-width:819px){
  .hdr-row{min-height:72px;padding:0 16px;column-gap:12px}
  .hdr-mark img{width:44px;height:44px}
  .hdr-wm img{height:40px}
  .hdr-nav{display:none}
  .hdr-side{gap:10px}
  .hdr-burger{display:inline-flex}
  .hdr-spacer{height:72px}
}
/* without JS the menus open on hover or keyboard focus */
html:not(.js) .hdr-dd:is(:hover,:focus-within) .hdr-dd-menu{display:flex}
html:not(.js) .hdr:focus-within .hdr-mob{display:flex}
@media (min-width:820px){.hdr-mob{display:none !important}}

/* Footer */
.ftr{background:#0B0B0A;color:#F5F1E8;border-top:4px solid #E7B24C}
.ftr-in{max-width:1240px;margin:0 auto;padding:72px 32px 32px;box-sizing:border-box;display:flex;flex-direction:column;gap:56px}
.ftr-cols{display:flex;flex-wrap:wrap;gap:48px;justify-content:space-between}
.ftr-brand{flex:1.4 1 300px;display:flex;flex-direction:column;gap:16px}
.ftr-logo{display:flex;align-items:center;gap:16px}
.ftr-logo img{height:56px;width:auto;display:block}
.ftr-slogan{margin:0;font-size:22px;font-weight:800;color:#E7B24C}
.ftr-blurb{margin:0;font-size:15px;line-height:1.7;color:#B9B2A4;max-width:340px}
.ftr-col{flex:1 1 150px;display:flex;flex-direction:column;gap:4px}
.ftr h2{margin:0 0 8px;font-size:13px;font-weight:800;color:#B9B2A4;letter-spacing:.08em;text-transform:uppercase}
.lang-ar .ftr h2{letter-spacing:0}
.ftr-col a{color:#F5F1E8;min-height:36px;display:flex;align-items:center}
.ftr-contact{flex:1.3 1 240px;font-style:normal;display:flex;flex-direction:column;gap:10px;font-size:15px;line-height:1.6}
.ftr-contact h2{margin-bottom:2px}
.ftr-contact a{color:#F5F1E8}
.ftr-contact span{color:#B9B2A4}
.lang-ar .ftr-contact a[dir="ltr"]{align-self:flex-start;unicode-bidi:isolate}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid #2B2925;padding-top:24px;font-size:14px;color:#B9B2A4}
.ftr-base a{color:#B9B2A4}
.ftr a:hover{color:#E7B24C}
@media (max-width:720px){.ftr-in{padding:56px 16px 32px}}

/* Cement bricks: spec filter */
.chip{min-height:44px;padding:0 18px;background:transparent;color:#F5F1E8;border:1.5px solid #4A463F;border-radius:999px;font-size:15px;font-weight:700;cursor:pointer}
.chip[aria-pressed="true"]{background:#E7B24C;color:#0B0B0A;border-color:#E7B24C;font-weight:800}
#spec-table tr[hidden]{display:none}

/* Contact: quote request */
.steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.steps li{border-top:4px solid #D8D1C2;padding-top:10px;font-weight:600;font-size:15px;color:#5E584E}
.steps li[aria-current]{border-top-color:#0B0B0A;font-weight:800;color:#0B0B0A}
.mat{min-height:88px;padding:16px 20px;text-align:start;background:#fff;color:#0B0B0A;border:2px solid #D8D1C2;font-size:18px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px}
.mat-box{flex:none;width:22px;height:22px;box-sizing:border-box;border:2px solid #8C8476;display:inline-flex;align-items:center;justify-content:center;font-size:14px}
.mat[aria-pressed="true"]{background:#0B0B0A;color:#F5F1E8;border-color:#0B0B0A;font-weight:800}
.mat[aria-pressed="true"] .mat-box{background:#E7B24C;border-color:#E7B24C;color:#0B0B0A}
.mat[aria-pressed="true"] .mat-box::after{content:"✓"}
[data-panel][hidden],.quote-err[hidden]{display:none !important}
.btn-dark,.btn-gold,.btn-line,.btn-link{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border-radius:4px;font-size:17px;cursor:pointer}
.btn-dark{padding:0 32px;background:#0B0B0A;color:#F5F1E8;border:0;font-weight:800}
.btn-gold{padding:0 32px;background:#E7B24C;color:#0B0B0A;border:0;font-weight:900}
.btn-line{padding:0 24px;background:transparent;color:#0B0B0A;border:1.5px solid #0B0B0A;font-size:16px;font-weight:700}
.btn-line:hover{color:#0B0B0A;background:#EAE3D4}
.btn-link{padding:0 24px;min-height:48px;background:transparent;border:0;color:#0B0B0A;text-decoration:underline;font-size:16px;font-weight:700}
@media (max-width:600px){.quote{padding:24px !important}.steps li{font-size:13px}}

/* Home: "One Core" twine section keeps its 16:9 shape only where it fits */
.twine{max-width:100%}
@media (max-width:900px){.twine{aspect-ratio:auto !important;min-height:560px !important}.twine > div{top:auto !important;bottom:48px}}
.quote{scroll-margin-top:120px}

/* Marble: the video itself is the pause/play control */
video[data-video-toggle]{cursor:pointer}
video[data-video-toggle]:focus-visible{outline:3px solid #E7B24C;outline-offset:2px}