/* ------------------------------------------------------------------
   Landing pages (static, server-rendered) - A One Jeddah AC Maintenance
   Brand palette mirrors /assets/main.css
   ------------------------------------------------------------------ */
:root{
  --navy:#102b42;--navy-deep:#0c2437;--blue:#277da7;--sky:#91d2e9;
  --ice:#eaf4f8;--white:#fbfdfe;--ink:#172e40;--muted:#617783;
  --line:#d9e3e8;--green:#267c68;
  --sans:"Roboto",Arial,sans-serif;--arabic:"IBM Plex Sans Arabic",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased
}
[dir="rtl"] body,body[dir="rtl"]{font-family:var(--arabic);line-height:1.9}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:800px;margin-inline-start:max(0px,calc((100% - 1080px)/2))}

/* header */
.site-head{background:var(--navy);color:#fff}
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:66px;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.14em;font-size:13px;line-height:1.3}
.brand span{display:block;font-weight:400;letter-spacing:.22em;font-size:10px;color:var(--sky)}
.head-links{margin-inline-start:auto;display:flex;gap:18px;align-items:center;flex-wrap:wrap;font-size:14px}
.head-links a{color:#dbe9f0;text-decoration:none}
.head-links a:hover{color:#fff;text-decoration:underline}
.call-btn{background:var(--sky);color:var(--navy-deep)!important;padding:9px 16px;border-radius:999px;font-weight:700;text-decoration:none!important;white-space:nowrap}
.call-btn:hover{background:#bfe6f4}

/* breadcrumb */
.crumbs{font-size:13px;color:var(--muted);padding:14px 0 0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--blue);text-decoration:underline}
.crumbs span{margin:0 .45em}

/* hero */
.hero{background:linear-gradient(180deg,var(--ice),var(--white));border-bottom:1px solid var(--line);padding:26px 0 40px}
.hero h1{font-size:clamp(1.75rem,4.2vw,2.7rem);line-height:1.18;margin:.2em 0 .45em;letter-spacing:-.01em}
.hero .lead{font-size:1.12rem;color:#334c5c;max-width:44em}
.hero-meta{display:flex;gap:10px 22px;flex-wrap:wrap;margin:22px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.hero-meta li::before{content:"✓";color:var(--green);font-weight:700;margin-inline-end:.4em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;padding:14px 24px;border-radius:999px;text-decoration:none;font-weight:700;font-size:15px}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-deep)}
.btn-ghost{border:1.5px solid var(--navy);color:var(--navy)}
.btn-ghost:hover{background:var(--ice)}
.btn-wa{background:#1f9d63;color:#fff}
.btn-wa:hover{background:#18814f}

/* content */
main{padding:44px 0 8px}
h2{font-size:clamp(1.3rem,2.6vw,1.7rem);line-height:1.25;margin:2em 0 .5em;letter-spacing:-.01em}
h3{font-size:1.12rem;margin:1.6em 0 .35em}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.2em;padding-inline-start:1.25em}
li{margin:.35em 0}
.lede{font-size:1.06rem;color:#334c5c}
.note{background:var(--ice);border-inline-start:4px solid var(--blue);padding:16px 18px;border-radius:0 8px 8px 0;font-size:15px;margin:1.6em 0}
[dir="rtl"] .note{border-radius:8px 0 0 8px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:1.6em 0}
.card{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:15px}
th,td{text-align:start;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--ice);font-weight:700}
caption{caption-side:bottom;text-align:start;font-size:13px;color:var(--muted);padding-top:10px}

/* faq */
.faq{margin:2.4em 0}
.faq details{border:1px solid var(--line);border-radius:10px;padding:0 18px;margin-bottom:10px;background:#fff}
.faq summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:inline-end;color:var(--blue);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:6px;color:#334c5c}

/* cta band + related */
.band{background:var(--navy);color:#fff;margin-top:52px;padding:44px 0}
.band h2{margin:0 0 .3em;color:#fff}
.band p{color:#cfe2ec;max-width:42em}
.band .btn-primary{background:var(--sky);color:var(--navy-deep)}
.band .btn-ghost{border-color:var(--sky);color:#fff}
.related{background:var(--ice);padding:40px 0}
.related h2{margin-top:0}
.link-grid{display:grid;gap:10px 24px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));list-style:none;padding:0;margin:1em 0 0}
.link-grid a{text-decoration:none;color:var(--navy);font-weight:600;border-bottom:1px solid transparent}
.link-grid a:hover{border-color:var(--blue);color:var(--blue)}

/* footer */
.site-foot{background:var(--navy-deep);color:#b9cdd9;padding:40px 0 28px;font-size:14px}
.site-foot a{color:#dbe9f0;text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.foot-cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.foot-cols h3{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .7em}
.foot-cols ul{list-style:none;padding:0;margin:0}
.foot-cols li{margin:.3em 0}
.legal{border-top:1px solid #24445c;margin-top:28px;padding-top:16px;font-size:13px;color:#8fa9b8}

/* mobile sticky call bar */
.callbar{display:none}
@media (max-width:640px){
  .head-links{gap:12px;font-size:13px}
  .head-links a:not(.call-btn):not(.hide-sm){display:none}
  .head-links .hide-sm{display:inline}
  table{font-size:13.5px}
  th,td{padding:9px 8px}
  h1{font-size:1.6rem}
  .callbar{display:flex;position:sticky;bottom:0;z-index:40;background:var(--navy);gap:0}
  .callbar a{flex:1;text-align:center;padding:15px 8px;color:#fff;text-decoration:none;font-weight:700;font-size:14px}
  .callbar a+a{background:#1f9d63}
  main{padding-top:32px}
}