:root{--paper:#FFFFFF;--ink:#132F2B;--muted:#53635F;--sage:#EDF2EE;--line:#DCE3DE;--yellow:#FBC807} body{font-size:16px;line-height:1.65}h1,h2,h3{letter-spacing:-.035em;font-weight:600}header,.wrap{max-width:1320px;padding-inline:48px}header{height:92px;position:relative;background:white;border:0}header .brand svg{width:86px}header .brand small{font-size:10px}nav{gap:26px;font-size:14px;font-weight:500}.lang{font-size:14px;min-height:44px}.nav-contact{background:var(--ink);color:white;padding:11px 19px}.utility{background:#EDF2EE;font-size:11px;letter-spacing:.02em}.utility .wrap{display:flex;justify-content:space-between;gap:20px;padding-block:8px}.menu-toggle{display:none}.btn{font-size:14px;padding:15px 23px;border-radius:3px;min-height:50px}.btn:hover{transform:translateY(-2px)}.btn.primary:hover{background:#E8B900}.eyebrow{font-size:11px;letter-spacing:.09em;margin-bottom:16px}.hero-shell{background:#132F2B;color:white;overflow:hidden}.hero{padding-block:56px 60px;grid-template-columns:1.12fr 1fr;gap:60px;min-height:540px}.hero h1{font-size:clamp(44px,4.5vw,64px);line-height:1.08;font-weight:600;letter-spacing:-.045em;max-width:680px}.hero h1 em{color:var(--yellow)}.hero p{color:#D4E0DA;max-width:540px;font-size:17px;line-height:1.7;margin:24px 0 28px}.hero .eyebrow{color:#CAD8CF}.hero .textlink{color:white;border-color:#76918A;font-size:14px}.hero .actions{gap:24px}.hero-assurance{margin-top:28px;display:flex;gap:18px;font-size:12px;color:#CBD9D3}.hero-assurance span{display:flex;gap:8px;align-items:center}.hero-assurance span:before{content:'✓';color:var(--yellow)}.art{height:414px;background:transparent;overflow:visible;position:relative;isolation:isolate}.art:before{content:'';position:absolute;width:440px;height:440px;inset-inline-start:5%;top:-10px;background:radial-gradient(ellipse,#3D6551 0,transparent 70%);z-index:-1}.folio-back{position:absolute;inset-inline:28px 15px;top:8px;height:365px;background:#527064;border:1px solid #799083;border-radius:6px;transform:rotate(7deg)}.folio{position:absolute;inset-inline:0 42px;top:33px;background:#F6F7F0;color:var(--ink);border-radius:5px;padding:29px 30px;box-shadow:0 24px 55px #0004;transform:rotate(-3deg)}.folio-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #CED8CC;padding-bottom:18px;font-size:10px;letter-spacing:.12em}.folio-monogram{font-size:24px;font-weight:800;letter-spacing:-.09em}.folio-monogram b{color:#D7A800}.folio-title{font-size:25px;line-height:1.25;letter-spacing:-.04em;font-weight:600;margin-top:21px}.folio-subtitle{font-size:11px;color:#627469;margin-top:7px}.folio-list{margin-top:21px;display:grid;gap:0}.folio-item{font-size:12px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #DCE2D7;padding:11px 0}.folio-item i{font-style:normal;background:#E5ECDC;border-radius:50%;width:20px;height:20px;text-align:center;font-size:11px}.folio-footer{font-size:9px;color:#6D7E73;border-top:1px solid #DCE2D7;padding-top:12px}.folio-tag{position:absolute;bottom:0;inset-inline-end:0;background:var(--yellow);color:var(--ink);padding:17px 22px;border-radius:3px;box-shadow:0 10px 25px #0002;max-width:220px}.folio-tag span{font-size:10px;display:block;margin-bottom:4px}.folio-tag strong{font-size:17px;font-weight:600;line-height:1.2;display:block}.regulatory{background:#EDF2EE;border-bottom:1px solid var(--line)}.regulatory .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;padding-block:22px}.regulatory small{font-size:12px;color:var(--muted);max-width:170px;line-height:1.4}.regulatory span{font-size:15px;font-weight:600}.regulatory span+span{border-inline-start:1px solid #C9D5CB;padding-inline-start:26px}.strip{margin-block:0;padding-block:22px;font-size:12px;border-top:0}.strip span:first-child{font-weight:700;color:var(--ink)}section{padding-block:56px}h2{font-size:38px;line-height:1.18}.section-head{margin-bottom:30px;align-items:center}.section-head p{max-width:360px;font-size:15px;line-height:1.6}.services{gap:20px;border:0}.service,.service+.service{padding:27px!important;border:1px solid var(--line);border-radius:5px;display:flex;flex-direction:column;background:white}.service{transition:box-shadow .2s,border-color .2s}.service:hover{border-color:#96AC99;box-shadow:0 12px 25px #18352A0C}.service .num{margin-bottom:24px;color:var(--ink);font-size:12px}.service-icon{width:42px;height:42px;display:grid;place-items:center;background:var(--sage);border-radius:4px}.service-icon svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.5}.service h3{font-size:25px;min-height:60px}.service p{font-size:14px;line-height:1.45;margin-top:16px}.service ul{font-size:12px;margin-top:20px;flex:1}.service li{padding:10px 0}.service-link{margin-top:22px;display:flex;justify-content:space-between;font-size:13px;font-weight:600}.service-link:hover{text-decoration:underline}.trust{gap:65px;border-bottom:0;padding-block:0 64px;align-items:start}.trust-intro{background:var(--sage);padding:30px;border-inline-start:4px solid var(--yellow)}.trust h2{font-size:32px}.trust-intro p{font-size:14px;color:var(--muted);margin:18px 0 24px}.reasons{gap:26px 32px}.reason{padding-top:16px}.reason h3{font-size:20px;line-height:1.25}.reason p{font-size:14px}.process-shell{background:#F3F5F2;border-block:1px solid var(--line)}.process{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;margin-top:36px}.process-step{position:relative;border-top:2px solid #C6D3C9;padding-top:20px}.process-step:before{content:'';position:absolute;top:-5px;inset-inline-start:0;width:8px;height:8px;background:var(--ink)}.process-step h3{font-size:18px;margin:12px 0}.process-step p{font-size:13px;color:var(--muted)}.process-step small{font-size:11px;font-weight:600;color:#53635F}.process-note{font-size:12px;color:var(--muted);margin-top:30px}.tax-section{background:#FFF;color:var(--ink);padding-bottom:56px}.tax-section .section-head p{color:var(--muted)}.taxbox{border:1px solid var(--line);border-radius:6px;overflow:hidden;grid-template-columns:1.2fr 1fr}.inputs{background:#F3F5F2;padding:30px}.tabs{border-color:#D0DBD2;gap:25px;margin-bottom:27px}.tab{color:var(--muted);font-size:13px;padding:8px 0 15px;min-height:44px}.tab.active{color:var(--ink);border-color:#A17C00;font-weight:700}label{font-size:14px}.money-input input{color:var(--ink);border-color:#CCD5CD;font-size:34px;min-height:50px}.qfield input{color:var(--ink);border-color:#B8C5BC;background:white}.range-labels{color:var(--muted)}.note{color:var(--muted);font-size:12px;line-height:1.7}.result{background:var(--ink);color:white;padding:34px}.result strong{color:var(--yellow);font-size:56px}.result small{font-size:13px}.result .rows{border-color:#4C6860}.row{font-size:14px}.result .row b{color:white}.pricing-section{background:#F3F5F2;border-block:1px solid var(--line)}.pricing{gap:14px}.plan{padding:22px;background:white;border-radius:5px;border-color:#D2DDD3}.plan.featured{border:2px solid var(--ink);background:white;padding:21px}.badge{background:var(--yellow);color:var(--ink);font-weight:700;border-radius:3px;padding:5px 12px;top:-15px;font-size:10px}.plan h3{font-size:25px}.plan .for{font-size:13px;margin:10px 0 18px}.price{font-size:38px}.price span{font-size:12px}.plan ul{font-size:13px;padding-block:10px}.annual{font-size:13px}.faq{padding-block:56px;gap:65px}.faq h2{font-size:34px}summary{font-size:16px;font-weight:500;min-height:32px}details p{font-size:14px}.guides{padding-top:0}.guides .section-head{margin-bottom:24px}.guides h2{font-size:32px}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.guide{background:var(--sage);padding:25px;display:flex;flex-direction:column;gap:15px;border-radius:4px}.guide small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.guide h3{font-size:21px;line-height:1.25}.guide p{font-size:13px;color:var(--muted)}.guide a{font-size:13px;font-weight:600;margin-top:auto;display:flex;justify-content:space-between}.contact{background:var(--ink);color:white;padding-block:56px}.contact h2{font-size:45px}.contact p{color:#D2DED7;font-size:15px}.contact .btn{color:white;border-color:#789087}.contact .btn.primary{color:var(--ink);border-color:var(--yellow)}.contact .btn:hover{color:var(--ink)}.contact-grid{gap:85px}.contact-links{gap:12px}.profile{border-color:#4C655C;font-size:13px;margin-top:35px;padding-top:20px}.footer{max-width:none;background:#0E2421;color:white;padding-block:28px}.footer-top,.concept-note{max-width:1224px;margin-inline:auto}.legal{color:#C5D2C9;font-size:11px;line-height:1.8}.concept-note{border-color:#365149;color:#A0B5A9;margin-top:22px;padding-top:15px}.footer .brand{color:white}.footer .brand svg{width:75px}.mobile-contact{background:white}.skip-link{position:fixed;inset-inline-start:20px;top:-100px;z-index:50;background:var(--yellow);padding:12px}.skip-link:focus{top:12px}dialog{border:0;border-radius:6px;max-height:85vh;overflow:auto}dialog .btn{float:inline-end}section[id]{scroll-margin-top:20px}.profile:hover{text-decoration:underline} [dir=rtl] .hero h1{font-size:49px;line-height:1.45}[dir=rtl] h2{line-height:1.4;font-size:34px}[dir=rtl] .service h3{font-size:23px;line-height:1.5}[dir=rtl] .folio{transform:rotate(3deg)}[dir=rtl] .folio-back{transform:rotate(-7deg)}[dir=rtl] .folio-title{font-size:22px;letter-spacing:0}[dir=rtl] .folio-head{letter-spacing:0}[dir=rtl] .hero{gap:45px}[dir=rtl] .contact h2{font-size:40px} @media(max-width:1000px){nav{gap:15px;font-size:12px}.hero{gap:30px}.hero h1{font-size:53px}.hero p{font-size:15px}.folio{padding:24px 22px;inset-inline-end:15px}.folio-tag{inset-inline-end:-10px}.service,.service+.service{padding:22px!important}.process{gap:18px}} @media(max-width:760px){header,.wrap{padding-inline:22px}header{height:80px}header .brand svg{width:70px}header .brand small{font-size:8px}.utility .wrap{padding-block:7px;font-size:10px}.utility .wrap span:last-child{display:none}header nav{gap:10px}header nav a{display:none}.lang{border:0;padding:0 7px;font-size:12px}.menu-toggle{display:block;border:1px solid var(--line);background:white;color:var(--ink);font-size:20px;width:42px;height:42px;border-radius:3px}header nav.open{position:absolute;top:80px;inset-inline:0;display:flex;flex-direction:column;align-items:stretch;padding:18px 22px;background:white;z-index:20;box-shadow:0 18px 24px #0002}header nav.open a{display:block;padding:12px;font-size:15px}header nav.open .menu-toggle{position:absolute;top:-61px;inset-inline-end:22px}header nav.open .lang{position:absolute;top:-61px;inset-inline-end:77px;height:42px}.hero{grid-template-columns:1fr;gap:28px;padding-block:35px 38px;min-height:0}.hero h1{font-size:43px;letter-spacing:-.035em;line-height:1.12}.hero .eyebrow{font-size:9px}.hero p{font-size:15px;margin:20px 0 24px}.hero .actions{gap:12px;align-items:stretch;flex-direction:column}.hero .actions .textlink{border:0;padding:6px 0;align-self:start}.hero .actions .btn{justify-content:center;gap:28px}.hero-assurance{font-size:10px;gap:15px;margin-top:20px}.art{height:345px;margin:2px 8px 0}.folio-back{inset-inline:18px 0;top:7px;height:305px}.folio{inset-inline:0 20px;top:18px;padding:21px}.folio-head{padding-bottom:10px;font-size:9px}.folio-title{font-size:22px;margin-top:16px}.folio-list{margin-top:16px}.folio-item{padding:9px 0;font-size:11px}.folio-footer{font-size:8px}.folio-tag{bottom:0;inset-inline-end:-8px;padding:12px 17px;max-width:180px}.folio-tag strong{font-size:14px}.folio-tag span{font-size:9px}.regulatory .wrap{gap:15px;flex-wrap:wrap;padding-block:20px}.regulatory small{max-width:none;width:100%;font-size:11px}.regulatory span{font-size:12px}.regulatory span+span{padding-inline-start:14px}.strip{font-size:10px;gap:10px;padding-block:18px}.strip span:first-child{width:100%}section{padding-block:43px}h2{font-size:30px}.section-head{margin-bottom:24px}.section-head p{font-size:14px;margin-top:15px}.services{gap:15px}.service,.service+.service{padding:24px!important;border:1px solid var(--line)}.service h3{font-size:25px;min-height:0}.service .num{margin-bottom:20px}.service p{font-size:14px}.service ul{font-size:12px}.trust{gap:28px;padding-bottom:43px}.trust-intro{padding:25px}.trust h2{font-size:29px}.reasons{gap:22px}.reason h3{font-size:19px}.reason p{font-size:14px}.process{grid-template-columns:1fr;gap:0;margin-top:27px}.process-step{border-top:0;border-inline-start:2px solid #C6D3C9;padding:0 0 22px;padding-inline-start:24px}.process-step:before{top:6px;inset-inline-start:-5px}.process-step:last-child{padding-bottom:0}.process-step h3{margin:5px 0 8px;font-size:20px}.process-step p{font-size:14px}.process-note{margin-top:24px}.tax-section{padding-bottom:43px}.inputs,.result{padding:24px}.tabs{gap:15px;align-items:stretch}.tab{font-size:11px}.money-input input{font-size:31px}.result strong{font-size:48px}.note{font-size:11px}.pricing{gap:18px}.plan,.plan.featured{padding:20px}.price{font-size:38px}.faq{padding-block:43px;gap:25px}.faq h2{font-size:30px}.guide-grid{grid-template-columns:1fr;gap:15px}.guides{padding-bottom:43px}.guides h2{font-size:29px}.guide{padding:23px;gap:12px}.guide h3{font-size:22px}.contact{padding-block:40px}.contact h2{font-size:37px}.contact-grid{gap:16px}.contact .btn{font-size:13px}.profile{font-size:12px;gap:18px}.footer{padding:28px 22px 100px}.legal{font-size:10px}.mobile-contact .btn{min-height:44px;font-size:13px}.concept-note{font-size:9px}[dir=rtl] .hero h1{font-size:35px;line-height:1.5}[dir=rtl] .hero{gap:25px}[dir=rtl] h2{font-size:29px}[dir=rtl] .folio-title{font-size:21px}[dir=rtl] .folio-item{font-size:10px}[dir=rtl] .contact h2{font-size:34px}} /* ============================================================ CLIENT ROUND 2 — problem-led funnel, 9 services, health check ============================================================ */ /* Hero service line, directly under the H1 */ .hero .svcline{ margin-top:14px;font-weight:600;letter-spacing:.01em;font-size:16px; /* the refined hero is a deep-green ground, so this must be the light accent, not ink — ink here is the same colour as the panel */ color:var(--yellow); } /* --- Services: 9 cards, each with its own quote CTA --- */ .services{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:14px !important;border-top:0 !important; } .service{ padding:20px !important;border:1px solid var(--line) !important; border-radius:14px;background:var(--paper); display:flex;flex-direction:column; } .service+.service{ border-inline-start:1px solid var(--line) !important; padding-inline-start:20px !important;border-top:0 !important; } .service h3{font-size:21px !important;min-height:0 !important;margin-bottom:4px} .service p{flex-grow:1} .service .quote{ margin-top:12px;align-self:flex-start;text-decoration:none; font-weight:600;font-size:14.5px;color:var(--ink); border:1px solid var(--line);border-radius:999px;padding:9px 18px; transition:background .15s,color .15s; } .service .quote:hover{background:var(--ink);color:var(--paper)} /* --- Problem section --- */ #problem{padding:56px 0;border-top:1px solid var(--line)} .problem-grid{ display:grid;grid-template-columns:1fr minmax(0,300px); gap:48px;align-items:start;margin-top:8px; } .problem-grid h2{font-size:40px;line-height:1.15;margin-bottom:26px} ul.questions{list-style:none;margin:0;padding:0;display:grid;gap:10px} ul.questions li{ background:var(--sage);border:1px solid var(--line);border-radius:12px; padding:14px 18px;font-size:16.5px;line-height:1.5;color:var(--ink); } #problem .note{margin-top:22px;max-width:56ch;color:var(--muted);font-size:16px} #problem .btn{margin-top:20px} .problem-art{width:100%;height:auto;border-radius:14px;border:1px solid var(--line); /* the illustration's own ground is warm off-white; sage behind it keeps the panel from reading as an empty bordered box on the paper section */ background:var(--sage);padding:10px} /* --- Free Accounting Health Check --- */ #health-check{padding:56px 0} .hc-panel{ background:var(--ink);color:#fff;border-radius:22px; padding:52px;display:grid;grid-template-columns:1fr auto; gap:44px;align-items:center; } .hc-panel h2{font-size:40px;line-height:1.15;color:#fff;margin:10px 0 14px} .hc-panel > div > p{color:rgba(255,255,255,.8);max-width:52ch;font-size:17px} .hc-panel .eyebrow{color:var(--yellow)} .hc-panel .eyebrow .dot{background:var(--yellow)} ul.hc-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px} ul.hc-points li{ position:relative;padding-inline-start:28px; color:rgba(255,255,255,.9);font-size:16px;line-height:1.55; } ul.hc-points li::before{ content:"";position:absolute;inset-inline-start:0;top:.55em; width:13px;height:7px;border-inline-start:2.5px solid var(--yellow); border-bottom:2.5px solid var(--yellow);transform:rotate(-45deg); } .hc-panel .btn.primary{ margin-top:30px;background:var(--yellow);color:var(--ink);border-color:var(--yellow); } .hc-small{margin-top:14px;font-size:14px;color:rgba(255,255,255,.6)} .hc-art{width:320px;height:auto;border-radius:16px} /* --- Persistent WhatsApp --- */ .wa-sticky{ position:fixed;z-index:60;bottom:24px;inset-inline-end:24px; display:inline-flex;align-items:center;gap:10px; background:#1F8A4C;color:#fff;text-decoration:none; padding:13px 18px;border-radius:999px; font-weight:600;font-size:14.5px;line-height:1; box-shadow:0 6px 22px rgba(0,0,0,.18);transition:background .15s; } .wa-sticky:hover{background:#19713D} .wa-sticky svg{flex-shrink:0} .wa-label-sm{display:none} @media(max-width:900px){ .services{grid-template-columns:repeat(2,minmax(0,1fr)) !important} .problem-grid{grid-template-columns:1fr} .problem-art{display:none} .hc-panel{grid-template-columns:1fr;padding:38px} .hc-art{display:none} .hc-panel h2,.problem-grid h2{font-size:31px} } @media(max-width:620px){ .services{grid-template-columns:1fr !important} .service+.service{padding:20px !important;border-inline-start:1px solid var(--line) !important} .wa-sticky{bottom:16px;inset-inline-end:16px;padding:12px 16px} .wa-label{display:none} .wa-label-sm{display:inline} .hc-panel{padding:30px 24px} } /* ===== CLIENT ROUND 3 — credentials & experience, mobile hero ===== */ #credentials{padding:56px 0;background:var(--sage);border-block:1px solid var(--line)} #credentials .cred-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:start} #credentials h2{font-size:40px;line-height:1.15;color:var(--ink)} #credentials .cred-grid > div > p{color:var(--muted);font-size:17px;max-width:46ch} #credentials ul.cred-list{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,1fr);gap:12px; } #credentials ul.cred-list li{ position:relative;background:var(--paper);border:1px solid var(--line);border-radius:14px; padding:16px 18px;padding-inline-start:42px;font-size:15.5px;line-height:1.5;color:var(--ink); } #credentials ul.cred-list li::before{ content:"";position:absolute;inset-inline-start:18px;top:19px; width:12px;height:6px;border-inline-start:2px solid var(--yellow); border-bottom:2px solid var(--yellow);transform:rotate(-45deg); } @media(max-width:900px){ #credentials .cred-grid{grid-template-columns:1fr} #credentials h2{font-size:30px} } @media(max-width:620px){ #credentials ul.cred-list{grid-template-columns:1fr} .hero .actions .textlink{display:none} } /* ===== ROUND 3 — mobile QA fixes ===== */ /* Two fixed WhatsApp affordances were stacking on phones: the original full-width .mobile-contact bar and the round-2 .wa-sticky pill, which sat on top of it and hid its label. The pill is present at every breakpoint and is the lighter of the two, so it becomes the single WhatsApp route and the bar is retired. This also clears the extra competing CTA from above the fold on mobile. */ .mobile-contact{display:none !important} /* The tick was drawn with border-inline-start + a fixed rotate(-45deg). The border mirrors in RTL but the rotation does not, so in Arabic the two borders formed a chevron pointing the wrong way instead of a checkmark. Physical borders keep the glyph's shape; inset-inline-start still mirrors its position. Applies to both lists that use this mark. */ ul.hc-points li::before, #credentials ul.cred-list li::before{ border-inline-start:0; border-left-style:solid; border-left-color:var(--yellow); border-bottom-color:var(--yellow); } ul.hc-points li::before{border-left-width:2.5px;border-bottom-width:2.5px} #credentials ul.cred-list li::before{border-left-width:2px;border-bottom-width:2px} /* ===== ROUND 4 — density pass + merged credentials ===== */ /* Further tighten the three deep sections on narrower screens, where the desktop 56px block padding (see in-place edits above) still reads long next to shorter mobile content. */ @media(max-width:900px){ #problem,#health-check,#credentials{padding-block:44px} } /* --- Merged credentials: "Why AM" reason cards now live inside #credentials .wrap, after .cred-grid, as .cred-reasons > .reason. Markup/content owned by another agent; only styled here. --- */ #credentials .cred-reasons{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;margin-top:40px; border-top:1px solid var(--line);padding-top:36px; } #credentials .cred-reasons .reason{ background:var(--paper);border:1px solid var(--line); border-radius:14px;padding:20px; } #credentials .cred-reasons .reason h3{ font-size:17px;font-weight:600;color:var(--ink);margin-bottom:6px; } #credentials .cred-reasons .reason p{ font-size:14.5px;line-height:1.5;color:var(--muted); } @media(max-width:900px){ #credentials .cred-reasons{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:620px){ #credentials .cred-reasons{grid-template-columns:1fr} } /* ===== Arabic typography — Cairo ===== */ /* Arabic is a connected script: negative tracking pulls the joins together and costs legibility. The -.025em/-.045em values here were tuned for the Latin faces and were being inherited by the Arabic headings. */ [dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3, [dir=rtl] .hero h1,[dir=rtl] .btn,[dir=rtl] .eyebrow{ letter-spacing:normal; } /* Cairo carries taller ascenders and diacritic space than Noto Sans Arabic, so the display sizes need a little more room to avoid crowding. */ [dir=rtl] .hero h1{line-height:1.5} /* ===== Service cards link to their landing pages ===== */ .service h3 a{color:inherit;text-decoration:none} .service h3 a:hover{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px} .service .card-actions{margin-top:12px;display:flex;align-items:center;gap:16px;flex-wrap:wrap} .service .card-actions .quote{margin-top:0} .service .learn{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)} .service .learn:hover{border-color:var(--ink)} /* ===== Enquiry form ===== */ /* Second route beside WhatsApp (the primary). Sits on the dark --ink ground of #contact. Logical properties only so it mirrors correctly in RTL. */ .enquiry{margin-top:14px;padding-top:22px;border-top:1px solid #3E5A54} .enq-title{font-size:20px;line-height:1.3;letter-spacing:-.02em;font-weight:600;color:#fff;margin:0 0 16px} [dir=rtl] .enq-title{letter-spacing:0;line-height:1.5} .enq-form{display:flex;flex-direction:column;gap:14px;margin:0} .enq-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .enq-field{display:flex;flex-direction:column;gap:6px;min-width:0} .enq-form label{font-size:13px;font-weight:500;color:#D2DED7;line-height:1.4} .enq-req{color:var(--yellow)} .enq-form input,.enq-form select,.enq-form textarea{ width:100%;max-width:100%;min-height:46px;padding:11px 14px; font:inherit;font-size:15px;line-height:1.4;color:#fff; background:#1C3B36;border:1px solid #789087;border-radius:10px; -webkit-appearance:none;appearance:none;transition:border-color .15s,background .15s} .enq-form textarea{min-height:92px;resize:vertical} .enq-form input:hover,.enq-form select:hover,.enq-form textarea:hover{border-color:#A9BDB5} .enq-form input:focus-visible,.enq-form select:focus-visible,.enq-form textarea:focus-visible{ outline:3px solid var(--yellow);outline-offset:2px;border-color:var(--yellow)} .enq-form [aria-invalid=true]{border-color:#FFB4A8} .enq-select{position:relative} .enq-select select{padding-inline-end:42px;cursor:pointer} .enq-select select option{background:#132F2B;color:#fff} .enq-select:after{content:'';position:absolute;inset-inline-end:16px;top:50%;width:8px;height:8px; margin-top:-6px;border-inline-end:2px solid #D2DED7;border-bottom:2px solid #D2DED7; transform:rotate(45deg);pointer-events:none} .enq-hint{display:block;font-size:12.5px;line-height:1.5;color:#C3D2CB;margin-top:-4px} .enq-err{display:block;font-size:13px;line-height:1.5;color:#FFB4A8;font-weight:500} .enq-err[hidden],.enq-thanks[hidden]{display:none} .enq-status{font-size:14px;line-height:1.5;color:#FFB4A8;font-weight:500} .enq-status:empty{display:none} /* Honeypot: invisible and unreachable for people; bots still fill it. */ .enq-hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none} /* Quiet outline button: WhatsApp keeps the yellow primary style. */ .contact .btn.enq-submit{align-self:flex-start;justify-content:center;gap:14px;min-height:46px;padding:12px 24px; background:transparent;color:#fff;border:1px solid #A9BDB5;border-radius:999px;font-size:14px;font-weight:600} .contact .btn.enq-submit:hover:not(:disabled){background:#fff;color:var(--ink);border-color:#fff} .contact .btn.enq-submit:focus-visible{outline:3px solid var(--yellow);outline-offset:3px} .contact .btn.enq-submit:disabled{opacity:.65;cursor:progress;transform:none} .enq-thanks{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border:1px solid #789087;border-radius:12px;background:#1C3B36;outline:0} .enq-thanks p{margin:0;max-width:none;color:#fff;font-size:16px;line-height:1.55} .enq-tick{flex:none;width:26px;height:26px;border-radius:50%;margin-top:1px;background:var(--yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7 13.5l4 4 8-9' fill='none' stroke='%23132F2B' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat} .wa-sticky.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility .2s} [dir=rtl] .enq-form input,[dir=rtl] .enq-form select,[dir=rtl] .enq-form textarea,[dir=rtl] .enq-form label,[dir=rtl] .enq-hint,[dir=rtl] .enq-err,[dir=rtl] .enq-status{letter-spacing:0} @media(max-width:760px){ .enq-row{grid-template-columns:1fr} .enq-form input,.enq-form select,.enq-form textarea{font-size:16px} .contact .btn.enq-submit{align-self:stretch} } /* ===== Footer resources row ===== Round 4 moved the Resources links into