/* ============================================================ TARGET SYSTEM — Property & General Maintenance, Abu Dhabi Its own identity, deliberately NOT the studio's blueprint look: this is the client's brand, not ours. Palette is taken FROM THE COMPANY'S OWN LOGO, not invented: red #E30614 sampled off the real lockup, with the logo's black and mid-grey. Warm paper keeps it from looking like a template. Sturdy over decorative — the promise is competence, not flair. BILINGUAL: every rule that positions something uses logical properties (inline-start/end, margin-inline) so the whole page mirrors correctly when for Arabic. Nothing below needs a separate RTL stylesheet. ============================================================ */ :root{ --paper:#F7F5F2; /* warm off-white */ --paper-2:#EEEAE5; --ink:#151515; /* the logo's black */ --ink-soft:#4A4A4A; /* the logo's mid grey */ --muted:#7A7A7A; --line:#DDD8D2; --signal:#E30614; /* sampled from the logo */ --signal-soft:#FCE7E8; --ok:#2E7D5B; --card:#FFFFFF; --shadow:rgba(21,21,21,.10); --disp:'Bricolage Grotesque','IBM Plex Sans Arabic',system-ui,sans-serif; --body:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif; --maxw:1180px; } html[dir="rtl"]{ --disp:'IBM Plex Sans Arabic',system-ui,sans-serif; --body:'IBM Plex Sans Arabic',system-ui,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--ink);font-family:var(--body); font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.05;letter-spacing:-.02em} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)} section{padding-block:clamp(56px,8vw,104px)} .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:2.4px;text-transform:uppercase; color:var(--signal);display:flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:22px;height:2px;background:var(--signal);flex:0 0 auto} .lede{color:var(--ink-soft);font-size:clamp(16.5px,1.7vw,19px);max-width:58ch;margin-top:14px} /* Screen-reader-only. NOT `left:-9999px`: in an RTL document that pushes the box far outside the flow and adds ~10000px of horizontal scroll (it did exactly that here). Clipping keeps it accessible and takes no space in either direction. */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} /* ---------- placeholders for facts we must not invent ---------- */ /* Renders as a visible amber chip so nothing unverified can ship by accident. */ .todo{background:var(--signal-soft);border:1px dashed var(--signal);color:#A80511; border-radius:6px;padding:1px 8px;font-family:var(--body);font-size:.82em; font-weight:600;white-space:nowrap} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px; font-family:var(--disp);font-weight:700;font-size:16px;padding:15px 26px; border-radius:12px;border:2px solid transparent;cursor:pointer;transition:.22s cubic-bezier(.2,.7,.2,1);min-height:52px} .btn-primary{background:var(--ink);color:var(--paper)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--shadow)} .btn-signal{background:var(--signal);color:#fff} .btn-signal:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(227,6,20,.32)} .btn-ghost{border-color:var(--line);background:var(--card);color:var(--ink)} .btn-ghost:hover{border-color:var(--ink)} .btn svg{flex:0 0 auto} :focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:8px} .skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%); background:var(--ink);color:var(--paper);padding:12px 20px;z-index:99} .skip:focus{width:auto;height:auto;clip-path:none;inset-inline-start:0;top:0} /* ---------- nav ---------- */ .nav{position:sticky;top:0;z-index:50;background:rgba(247,245,242,.93); backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;gap:18px;padding-block:12px} .brand{font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.3px; display:flex;align-items:center;gap:9px;white-space:nowrap} .brand .bmark{width:44px;height:44px;flex:0 0 auto;object-fit:contain} .brand small{display:block;font-family:var(--body);font-weight:400;font-size:11px; letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);line-height:1} .nav-links{display:flex;gap:22px;font-size:15px;color:var(--ink-soft);margin-inline-start:auto} .nav-links a:hover{color:var(--signal)} .nav-tools{display:flex;align-items:center;gap:10px;margin-inline-start:18px} .lang{border:1.5px solid var(--line);background:var(--card);border-radius:999px; padding:8px 14px;font-family:var(--body);font-weight:600;font-size:13px;cursor:pointer;color:var(--ink)} .lang:hover{border-color:var(--signal);color:var(--signal)} .nav-call{font-size:15px;font-weight:700;padding:10px 18px;border-radius:10px; background:var(--signal);color:#fff;white-space:nowrap} @media(max-width:900px){.nav-links{display:none}.nav-tools{margin-inline-start:auto}} /* ---------- hero: the split ---------- */ .hero{padding-block:clamp(32px,4.5vw,56px) 0;position:relative;overflow:hidden} .hero h1{font-size:clamp(34px,5vw,58px)} .hero h1 .mark-red{color:var(--signal)} .hero-top{max-width:46ch} .trust-row{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,44px);margin-top:34px; padding-top:24px;border-top:1px solid var(--line)} .trust-row div{min-width:110px} .trust-row b{display:block;font-family:var(--disp);font-size:23px;line-height:1.1} .trust-row span{font-size:13px;color:var(--muted)} /* THE TWO DOORS — the structural idea of the whole site. A household with a burst pipe and a facilities manager pricing an annual contract want opposite things; making them choose in the first screen beats one blended message. */ .doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px} .door{position:relative;background:var(--card);border:1.5px solid var(--line); border-radius:18px;padding:clamp(24px,3vw,34px);display:flex;flex-direction:column; transition:.28s cubic-bezier(.2,.7,.2,1);overflow:hidden} .door:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--shadow);border-color:var(--ink)} .door.urgent{background:var(--ink);color:var(--paper);border-color:var(--ink)} .door.urgent .door-sub,.door.urgent li{color:#C4C4C4} .door-tag{font-size:12px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase; color:var(--signal);margin-bottom:14px} .door h2{font-size:clamp(24px,3vw,32px);margin-bottom:10px} .door-sub{color:var(--ink-soft);font-size:15.5px;margin-bottom:18px} .door ul{list-style:none;display:grid;gap:9px;margin-bottom:24px;font-size:15px;color:var(--ink-soft)} .door li{padding-inline-start:24px;position:relative} .door li::before{content:"";position:absolute;inset-inline-start:0;top:9px;width:11px;height:6px; border-left:2px solid var(--signal);border-bottom:2px solid var(--signal); transform:rotate(-45deg)} /* The tick is drawn from PHYSICAL left+bottom borders on purpose. With border-inline-start the geometry itself flipped in RTL and the tick became a backwards chevron. Position stays logical (inset-inline-start); only the glyph is mirrored. */ html[dir="rtl"] .door li::before{transform:scaleX(-1) rotate(-45deg)} .door .btn{margin-top:auto;width:100%} @media(max-width:820px){.doors{grid-template-columns:1fr}} /* ---------- services ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} .svc{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:26px;transition:.25s} .svc:hover{border-color:var(--signal);transform:translateY(-2px);box-shadow:0 10px 26px var(--shadow)} .svc .ico{width:46px;height:46px;border-radius:12px;background:var(--signal-soft); display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--signal)} .svc h3{font-size:20px;margin-bottom:8px} .svc p{font-size:15px;color:var(--ink-soft)} @media(max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.svc-grid{grid-template-columns:1fr}} /* ---------- contracts (AMC) ---------- */ .amc{background:var(--ink);color:var(--paper)} .amc .eyebrow{color:#FF6B75} .amc .eyebrow::before{background:#FF6B75} .amc .lede{color:#BDBDBD} .amc h2{font-size:clamp(30px,4.4vw,50px)} .amc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,52px);align-items:start;margin-top:40px} .amc-list{display:grid;gap:2px;background:rgba(247,244,238,.14);border-radius:14px;overflow:hidden} .amc-row{background:#232323;padding:18px 22px;display:flex;justify-content:space-between;gap:18px;align-items:baseline} .amc-row b{font-family:var(--disp);font-size:17px} .amc-row span{font-size:14px;color:#AFAFAF;text-align:end} .amc-card{background:var(--card);color:var(--ink);border-radius:16px;padding:28px} .amc-card h3{font-size:22px;margin-bottom:6px} .amc-card p{font-size:15px;color:var(--ink-soft);margin-bottom:18px} @media(max-width:860px){.amc-grid{grid-template-columns:1fr}} /* ---------- coverage ---------- */ .areas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px} .area{background:var(--card);border:1.5px solid var(--line);border-radius:999px; padding:9px 18px;font-size:14.5px;color:var(--ink-soft)} /* ---------- process ---------- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;counter-reset:s} .step{position:relative;padding-top:44px} .step::before{counter-increment:s;content:counter(s,decimal-leading-zero); position:absolute;top:0;inset-inline-start:0;font-family:var(--disp); font-size:15px;font-weight:700;color:var(--signal); border-top:2px solid var(--signal);padding-top:10px;width:100%} .step h3{font-size:18px;margin-bottom:6px} .step p{font-size:14.5px;color:var(--ink-soft)} @media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.steps{grid-template-columns:1fr}} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);margin-top:40px} .form{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,32px)} .field{margin-bottom:16px} label{display:block;font-size:14px;font-weight:600;margin-bottom:6px} input,select,textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line); border-radius:11px;font:inherit;background:var(--paper);color:var(--ink)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--signal);background:#fff} .two{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form-note{font-size:13.5px;color:var(--muted);margin-top:12px} .direct{display:grid;gap:14px;align-content:start} .direct a.card{background:var(--card);border:1.5px solid var(--line);border-radius:14px; padding:20px 22px;display:flex;align-items:center;gap:16px;transition:.22s} .direct a.card:hover{border-color:var(--signal);transform:translateX(3px)} html[dir="rtl"] .direct a.card:hover{transform:translateX(-3px)} .direct .ico{width:44px;height:44px;border-radius:12px;background:var(--signal-soft); display:flex;align-items:center;justify-content:center;color:var(--signal);flex:0 0 auto} .direct b{display:block;font-family:var(--disp);font-size:17px} .direct span{font-size:14px;color:var(--muted)} @media(max-width:860px){.contact-grid,.two{grid-template-columns:1fr}} /* ---------- footer ---------- */ footer{background:var(--ink);color:#B5B5B5;padding-block:52px 34px;font-size:14.5px} footer a{color:#fff} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px} .foot-grid h4{color:#fff;font-size:15px;margin-bottom:12px} .foot-grid ul{list-style:none;display:grid;gap:8px} .foot-bottom{border-top:1px solid rgba(247,244,238,.16);margin-top:34px;padding-top:22px; display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px} @media(max-width:760px){.foot-grid{grid-template-columns:1fr}} /* ---------- sticky mobile call bar ---------- */ .callbar{position:fixed;inset-inline:0;bottom:0;z-index:60;display:none;gap:10px;padding:10px; background:rgba(247,245,242,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line)} .callbar .btn{flex:1;min-height:50px;font-size:15.5px} @media(max-width:760px){.callbar{display:flex}body{padding-bottom:74px}} /* ---------- language visibility ---------- */ /* Hide the language we are NOT in. Elements keep their own display value, and no author rule can accidentally out-specify this. */ html[dir="ltr"] [lang-ar], html[dir="rtl"] [lang-en]{display:none !important} /* ---------- motion, always opt-out-able ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:.8s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} .btn:hover,.door:hover,.svc:hover{transform:none} }