@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* OnWood Final Brand Identity 2026 — public marketing pages */
:root{
  --ow-green:#8A3141;
  --ow-ink:#171917;
  --ow-muted:#6f756f;
  --ow-line:#dfe3dc;
  --ow-soft:#f4f5f2;
  --ow-warm:#f8f6f2;
  --ow-radius:2px;
  --ow-section:96px;
  --ow-shadow:0 18px 55px rgba(17,25,19,.10);
}
html{scroll-padding-top:82px}
body{letter-spacing:-.005em}
.wrap{width:min(1240px,calc(100% - 48px))}
header{box-shadow:0 1px 0 rgba(0,0,0,.04)}
nav{max-width:1240px}
.logo{letter-spacing:-1.2px}
.links{gap:24px}
.links a:not(.cta){font-size:12px;letter-spacing:.07em}
.cta,.btn,.mobile-cta,.project-quote,.doors-cta,.professional-actions a,.final-actions a{
  border-radius:var(--ow-radius)!important;
}
.section{padding:var(--ow-section) 0}
.eyebrow{font-size:11px;letter-spacing:.15em}
.head{margin:12px 0 42px;align-items:flex-end}
.head h2{line-height:.98;max-width:820px}
.head p{max-width:480px;font-size:15px}
.hero h1{max-width:820px}
.hero p{max-width:570px}
.hero-proof{margin-top:22px}
.hero-project-link{opacity:.94}
.trustitem{min-height:94px;display:flex;flex-direction:column;justify-content:center}
.trustitem strong{font-size:15px}
.trustitem span{font-size:10.5px;line-height:1.45}

/* Service rhythm */
.servicegrid{grid-template-columns:repeat(4,1fr)!important}
.service{min-height:150px;padding:28px}
.service h3{font-size:20px;margin-top:28px}
.servicegrid .service:last-child{grid-column:span 2}

/* Project editorial grid */
@media(min-width:901px){
  #projects .grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:220px;
    gap:14px;
  }
  #projects .project{height:100%;aspect-ratio:auto;grid-column:span 4}
  #projects .project:nth-child(1){grid-column:span 8;grid-row:span 2}
  #projects .project:nth-child(2),
  #projects .project:nth-child(3){grid-column:span 4}
  #projects .project:nth-child(7),
  #projects .project:nth-child(8){grid-column:span 6}
}
.project{background:#e9ebe7}
.project img{transition:transform .55s ease,filter .35s ease}
.project:hover img{transform:scale(1.035);filter:saturate(1.02)}
.project .shade{background:linear-gradient(180deg,transparent 36%,rgba(0,0,0,.80))}
.project .meta{bottom:24px;left:24px;right:24px}
.project .meta:before{
  content:"ONWOOD PROJECT";
  display:block;
  margin-bottom:7px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  opacity:.78;
}
html[lang="ar"] .project .meta:before{content:"مشروع ONWOOD";letter-spacing:.04em}
.project h3{font-size:clamp(21px,2vw,28px);line-height:1.05}
.project small{font-size:11.5px;letter-spacing:.01em}
.project-panel{width:min(920px,100%);box-shadow:var(--ow-shadow)}
.project-panel img{aspect-ratio:16/8.5}
.project-copy{padding:32px 34px 36px}
.project-copy .eyebrow{margin-bottom:8px}
.project-copy h3{font-size:clamp(30px,4vw,46px);line-height:1}
.project-copy p{max-width:720px;font-size:15px}

/* Materials / about */
.materials-layout{grid-template-columns:.82fr 1.18fr;gap:78px}
.materials-visual{min-height:560px}
.materials-caption{padding:20px 22px}
.about{gap:72px}
.about img{aspect-ratio:4/4.65}
.about h2{line-height:1}

/* Process: five equal steps on desktop */
.processgrid{grid-template-columns:repeat(5,1fr)!important}
.processitem{min-height:190px;padding:24px}
.processitem b{margin-bottom:32px}
.processitem h3{font-size:19px}
.processitem p{font-size:13px;line-height:1.55}

/* Forms */
.visitform,.lead-card{box-shadow:0 14px 40px rgba(17,25,19,.06)}
.visitform input,.visitform select,.visitform textarea,
.lead-form input,.lead-form select{
  border-color:#d5dad4;
  border-radius:var(--ow-radius)!important;
}
.visit-actions button,.submit,.wa{border-radius:var(--ow-radius)!important}
.sitevisitbox{gap:72px}
.sitevisit h2{line-height:1}

/* FAQ */
.home-faq-list summary,.faq summary{font-size:15px}
.home-faq-list p,.faq details p{font-size:14px}

/* B2B separation */
.professional-path{padding:76px 0}
.professional-grid{gap:82px}
.professional-actions a{padding:15px 16px}

/* Landing page project layouts */
@media(min-width:901px){
  body[data-project-type] .project-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:210px;
    gap:14px;
  }
  body[data-project-type] .project-grid .project{height:100%;min-height:0;grid-column:span 4}
  body[data-project-type] .project-grid .project:first-child{grid-column:span 8;grid-row:span 2}
  body[data-project-type] .project-grid .project:nth-child(2),
  body[data-project-type] .project-grid .project:nth-child(3){grid-column:span 4}
}
body[data-project-type] .hero-grid{gap:56px}
body[data-project-type] .lead-card{border:1px solid rgba(255,255,255,.18)}
body[data-project-type] .head h2{max-width:760px}
body[data-project-type] .value-item,
body[data-project-type] .step,
body[data-project-type] .quote-factor{padding:24px}
body[data-project-type] .quote-factor h3{line-height:1.1}
body[data-project-type] .faq-list{max-width:920px}

/* Footer */
footer{border-top:1px solid #eceeea;margin-top:0}
.footer-links{gap:20px}

/* RTL refinements */
html[dir="rtl"] .project .meta{left:24px;right:24px}
html[dir="rtl"] .project-copy{text-align:right}
html[dir="rtl"] .links{letter-spacing:0}
html[dir="rtl"] .head h2,html[dir="rtl"] .head p{letter-spacing:0}

/* Tablet */
@media(max-width:900px){
  :root{--ow-section:76px}
  .wrap{width:min(100% - 36px,1240px)}
  .servicegrid{grid-template-columns:repeat(2,1fr)!important}
  .servicegrid .service:last-child{grid-column:span 2}
  .processgrid{grid-template-columns:repeat(2,1fr)!important}
  .processgrid .processitem:last-child{grid-column:1/-1}
  #projects .grid{grid-template-columns:repeat(2,1fr)}
  body[data-project-type] .project-grid{grid-template-columns:repeat(2,1fr)}
  body[data-project-type] .project-grid .project:last-child{grid-column:1/-1}
  .materials-layout,.about,.sitevisitbox,.faq-layout,.professional-grid{gap:40px}
  .materials-visual{min-height:420px}
}

/* Mobile */
@media(max-width:650px){
  :root{--ow-section:58px}
  .wrap{width:calc(100% - 28px)}
  header nav{height:66px}
  .hero{min-height:74vh}
  .hero h1{font-size:clamp(45px,13vw,56px)}
  .hero p{font-size:15.5px}
  .trustitem{min-height:82px}
  .servicegrid{grid-template-columns:1fr!important}
  .servicegrid .service:last-child{grid-column:auto}
  .service{min-height:auto;padding:22px}
  .service h3{margin-top:18px;font-size:18px}
  .processgrid{grid-template-columns:1fr!important}
  .processgrid .processitem:last-child{grid-column:auto}
  .processitem{min-height:auto}
  #projects .grid,
  body[data-project-type] .project-grid{grid-template-columns:1fr;gap:12px}
  #projects .project,
  body[data-project-type] .project-grid .project,
  body[data-project-type] .project-grid .project:last-child{
    grid-column:auto!important;
    grid-row:auto!important;
    min-height:0;
    aspect-ratio:1.05/1;
  }
  .project .meta{left:18px;right:18px;bottom:18px}
  .project h3{font-size:22px}
  .materials-visual{min-height:340px}
  .materials-layout{gap:28px}
  .about{gap:28px}
  .about img{aspect-ratio:16/11}
  .sitevisitbox{gap:26px}
  .visitform{padding:18px}
  .home-faq-list summary,.faq summary{font-size:14px}
  .project-detail{padding:8px}
  .project-panel{max-height:92vh}
  .project-copy{padding:22px}
  .project-panel img{aspect-ratio:4/3}
  footer{gap:12px}
}

/* Motion and touch */
@media(hover:none){
  .project:hover img{transform:none;filter:none}
}


/* Mobile RTL overflow hardening */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip;
}
.wrap,
.sitevisitbox,
.visitform,
.visit-actions,
.materials-layout,
.about,
.faq-layout,
.professional-grid,
.focus-grid,
.processgrid,
.trustgrid,
.grid,
.project-grid,
.lead-card,
.lead-form{
  min-width:0;
  max-width:100%;
}
.sitevisitbox>*,
.materials-layout>*,
.about>*,
.faq-layout>*,
.professional-grid>*,
.focus-grid>*,
.processgrid>*,
.trustgrid>*,
.grid>*,
.project-grid>*{
  min-width:0;
}
.visitform input,
.visitform select,
.visitform textarea,
.visitform button,
.lead-form input,
.lead-form select,
.lead-form textarea,
.lead-form button{
  min-width:0!important;
  max-width:100%!important;
}
@media(max-width:800px){
  .sitevisitbox{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }
  .sitevisitbox>div:first-child{
    width:100%!important;
    max-width:100%!important;
    margin-bottom:26px;
  }
  .visitform{
    width:100%!important;
    max-width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
    padding:18px!important;
  }
  .visitform>*{
    min-width:0!important;
    max-width:100%!important;
    grid-column:1/-1!important;
  }
  .visit-actions{
    width:100%!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .visit-actions>*{
    width:100%!important;
    min-width:0!important;
  }
  body[data-project-type] .hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body[data-project-type] .lead-card{
    width:100%!important;
    max-width:100%!important;
  }
  body[data-project-type] .lead-form{
    grid-template-columns:minmax(0,1fr)!important;
  }
}
@media(max-width:480px){
  .wrap{
    width:calc(100% - 24px)!important;
    max-width:calc(100% - 24px)!important;
  }
  header .wrap{
    width:calc(100% - 24px)!important;
  }
  .visitform,
  body[data-project-type] .lead-card{
    padding:16px!important;
  }
  .mobile-actions{
    min-width:0;
    flex-shrink:0;
  }
  .mobile-cta{
    max-width:128px;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}


/* Mobile hero + header correction */
@media(max-width:520px){
  /* Keep the top bar simple: logo + menu. Primary conversion CTA stays fixed at the bottom. */
  .mobile-actions{
    display:flex!important;
    align-items:center!important;
    gap:0!important;
    flex:0 0 auto!important;
  }
  .mobile-actions .mobile-cta{
    display:none!important;
  }
  .menu-toggle{
    display:grid!important;
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    opacity:1!important;
    visibility:visible!important;
  }

  /* Use a portrait kitchen image on phones instead of forcing the landscape desktop hero. */
  .hero{
    background-image:
      linear-gradient(90deg,rgba(0,0,0,.68),rgba(0,0,0,.18)),
      url('/assets/project-e8f3610ac388.jpg')!important;
    background-size:cover!important;
    background-position:center center!important;
    background-repeat:no-repeat!important;
  }
}


/* Unified typography system */
:root{
  --font-en:'Inter',Arial,Helvetica,sans-serif;
  --font-ar:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;
}
html[lang="en"] body,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] button{
  font-family:var(--font-en)!important;
}
html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] button{
  font-family:var(--font-ar)!important;
}
.logo{
  font-family:var(--font-en)!important;
  font-weight:700;
}
h1,h2,h3,
.hero h1,
.head h2,
.materials-copy h2,
.faq-layout h2,
.professional-path h2,
.sitevisit h2,
.case h2,
.final h2{
  font-weight:700!important;
}
body,p,small,input,select,textarea{
  font-weight:400;
}
button,
.btn,
.cta,
.mobile-cta,
.home-mobile-bottom a,
.case-actions a,
.professional-actions a,
.visit-actions button,
.submit,
.wa{
  font-weight:600!important;
}
.eyebrow,
.project .meta:before,
.case-kicker,
.links a,
.nav a{
  font-weight:600!important;
}
html[lang="ar"] body{
  letter-spacing:0!important;
}
html[lang="ar"] .hero h1{
  font-weight:700!important;
  line-height:1.08!important;
  letter-spacing:-.018em!important;
}
html[lang="ar"] .hero p{
  font-size:17px;
  line-height:1.9;
  font-weight:400;
}
html[lang="ar"] .eyebrow{
  letter-spacing:.025em!important;
}
html[lang="ar"] .btn,
html[lang="ar"] .cta,
html[lang="ar"] .mobile-cta,
html[lang="ar"] .home-mobile-bottom a,
html[lang="ar"] button{
  letter-spacing:0!important;
}
html[lang="ar"] .head h2,
html[lang="ar"] .materials-copy h2,
html[lang="ar"] .faq-layout h2,
html[lang="ar"] .professional-path h2,
html[lang="ar"] .sitevisit h2{
  line-height:1.16!important;
  letter-spacing:-.012em!important;
}
html[lang="ar"] .project h3,
html[lang="ar"] .case h2{
  line-height:1.14!important;
  letter-spacing:-.008em!important;
}
@media(max-width:650px){
  html[lang="ar"] .hero h1{
    font-size:clamp(42px,11.3vw,52px)!important;
    line-height:1.08!important;
  }
  html[lang="ar"] .hero p{
    font-size:15.5px!important;
    line-height:1.85!important;
  }
  html[lang="ar"] .head h2,
  html[lang="ar"] .materials-copy h2,
  html[lang="ar"] .faq-layout h2,
  html[lang="ar"] .professional-path h2,
  html[lang="ar"] .sitevisit h2{
    font-size:clamp(34px,9.5vw,42px)!important;
    line-height:1.16!important;
  }
  html[lang="ar"] .btn,
  html[lang="ar"] .home-mobile-bottom a,
  html[lang="ar"] .mobile-cta{
    font-size:14px!important;
  }
}


/* =========================================================
   ONWOOD FINAL BRAND IDENTITY 2026
   Master brand: Cherry Oxblood #8A3141
   W only is colored in the supplied outlined logo assets.
   ========================================================= */
:root{
  --ow-900:#5C1E2A;
  --ow-800:#6E2734;
  --ow-700:#8A3141;
  --ow-600:#A34B5A;
  --ow-400:#C98790;
  --ow-200:#E6CBD0;
  --ow-100:#F5E9EB;
  --ow-black:#000000;
  --ow-white:#FFFFFF;

  /* legacy aliases retained so old page markup inherits the approved identity */
  --ow-green:#8A3141;
  --green:#8A3141;
  --ow-ink:#000000;
  --ink:#000000;
  --ow-muted:rgba(0,0,0,.62);
  --muted:rgba(0,0,0,.62);
  --ow-line:rgba(0,0,0,.12);
  --line:rgba(0,0,0,.12);
  --ow-soft:#F5E9EB;
  --soft:#F5E9EB;
  --ow-warm:#F5E9EB;
  --ow-shadow:0 18px 55px rgba(92,30,42,.12);
}
body{
  color:var(--ow-black);
  background:var(--ow-white);
}
html[lang="en"] body,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] button{
  font-family:'Inter',Arial,Helvetica,sans-serif!important;
}
h1,h2,h3,
.hero h1,
.head h2,
.materials-copy h2,
.faq-layout h2,
.professional-path h2,
.sitevisit h2,
.case h2,
.final h2{
  font-family:'Inter',Arial,Helvetica,sans-serif!important;
  font-weight:800!important;
}

/* Approved outlined logo asset — never reconstruct the mark with text */
a.logo{
  display:block!important;
  width:166px!important;
  height:36px!important;
  flex:0 0 166px!important;
  overflow:hidden!important;
  text-indent:-9999px!important;
  white-space:nowrap!important;
  background:url('/assets/brand/onwood-logo-light.svg') left center/contain no-repeat!important;
}
a.logo>*{display:none!important}
html[dir="rtl"] a.logo{
  direction:ltr!important;
  background-position:left center!important;
}

/* Core brand accents */
.eyebrow,
.case-kicker,
.processitem b,
.step b,
.value-item b,
.quote-factor b,
.service span{
  color:var(--ow-700)!important;
}
.hero .eyebrow,
.quote-section .eyebrow,
.cta-band .eyebrow,
.final-cta .eyebrow{
  color:var(--ow-200)!important;
}
.hero-proof span{color:var(--ow-400)!important}
::selection{background:var(--ow-200);color:var(--ow-black)}

/* Primary conversion actions */
.cta,
.mobile-cta,
.submit,
.visit-actions .direct,
.home-mobile-bottom .primary,
.mobile-bottom .primary,
.project-quote,
.professional-actions .primary,
.final-actions .primary{
  background:var(--ow-700)!important;
  border-color:var(--ow-700)!important;
  color:var(--ow-white)!important;
}
.cta:hover,
.mobile-cta:hover,
.submit:hover,
.visit-actions .direct:hover,
.home-mobile-bottom .primary:hover,
.mobile-bottom .primary:hover,
.project-quote:hover,
.professional-actions .primary:hover,
.final-actions .primary:hover{
  background:var(--ow-800)!important;
  border-color:var(--ow-800)!important;
}
.hero .btn.primary{
  background:var(--ow-700)!important;
  border-color:var(--ow-700)!important;
  color:var(--ow-white)!important;
}
.hero .btn.primary:hover{
  background:var(--ow-800)!important;
  border-color:var(--ow-800)!important;
}
.btn.dark{background:var(--ow-black)!important;border-color:var(--ow-black)!important}
.quick-contact{
  background:var(--ow-700)!important;
  border-color:var(--ow-white)!important;
}
.quick-contact:hover{background:var(--ow-800)!important}

/* Premium Oxblood atmosphere without tinting project photography */
.hero{
  background-color:rgba(92,30,42,.16)!important;
  background-blend-mode:multiply!important;
}
.truststrip,
.residential-focus,
.value,
.home-faq,
.b2b-divider{
  background-color:var(--ow-100)!important;
}
.trustitem,
.value-item,
.service,
.step,
.processitem,
.lead-card,
.visitform{
  border-color:rgba(138,49,65,.18)!important;
}

/* Approved W-pattern is reserved for high-value dark conversion areas */
.cta-band,
.final-cta .box{
  background-color:var(--ow-900)!important;
  background-image:
    linear-gradient(rgba(92,30,42,.12),rgba(92,30,42,.12)),
    url('/assets/brand/onwood-w-pattern-dark.svg')!important;
  background-size:cover!important;
  background-position:center!important;
}
.quote-section,
.procurement{
  background:var(--ow-900)!important;
}
.professional-path{
  background:linear-gradient(135deg,var(--ow-100),#fff 72%)!important;
}

/* Forms / feedback */
.visitform input:focus,
.visitform select:focus,
.visitform textarea:focus,
.lead-form input:focus,
.lead-form select:focus{
  outline:none!important;
  border-color:var(--ow-700)!important;
  box-shadow:0 0 0 3px rgba(138,49,65,.10)!important;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid var(--ow-400)!important;
  outline-offset:3px!important;
}
.visit-status-message.ok,
.form-status.ok{
  background:var(--ow-100)!important;
  color:var(--ow-900)!important;
  border-color:var(--ow-400)!important;
}
.tag.ready{
  background:var(--ow-100)!important;
  border-color:var(--ow-400)!important;
}

/* Brand-consistent details */
.project .meta:before{color:var(--ow-white)}
.project:hover .meta:before{color:var(--ow-200)}
.materials-caption,
.project-copy .eyebrow{color:var(--ow-700)!important}
footer{border-top-color:var(--ow-200)!important}
footer a:hover{color:var(--ow-700)!important}

/* Arabic keeps its dedicated readable UI font; Latin brand marks remain Inter/outlines. */
html[lang="ar"] .logo{font-family:'Inter',Arial,Helvetica,sans-serif!important}
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3{
  font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif!important;
  font-weight:700!important;
}

@media(max-width:650px){
  a.logo{
    width:136px!important;
    height:30px!important;
    flex-basis:136px!important;
  }
}


/* Final QA refinements */
.hero{position:relative!important;isolation:isolate}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.70) 0%,rgba(92,30,42,.34) 47%,rgba(0,0,0,.13) 100%);
}
.hero>.wrap{position:relative;z-index:1}
html[dir="rtl"] .hero:before{
  background:linear-gradient(270deg,rgba(0,0,0,.70) 0%,rgba(92,30,42,.34) 47%,rgba(0,0,0,.13) 100%);
}
.menu-toggle{
  border:1px solid var(--ow-200)!important;
  background:var(--ow-white)!important;
}
.menu-toggle .menu-icon span,
.menu-toggle .menu-icon:before,
.menu-toggle .menu-icon:after{
  background:var(--ow-700)!important;
}
.mobile-menu{
  border-top-color:var(--ow-200)!important;
}
.mobile-menu a:hover{color:var(--ow-700)!important}