/* ============ FONTS ============ */ @font-face{font-family:"Almoni";src:url("fonts/almoni-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Almoni";src:url("fonts/almoni-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Almoni";src:url("fonts/almoni-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Almoni Tzar";src:url("fonts/almoni-tzar-demibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Almoni Tzar";src:url("fonts/almoni-tzar-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Almoni Tzar";src:url("fonts/almoni-tzar-ultrabold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} /* Metric-matched stand-ins, used only for the moment before the real fonts arrive. Almoni is narrower than Arial (avg Hebrew advance .4823em vs .5036em) and Almoni Tzar much narrower still (.4001em), so an unadjusted fallback reflows every line the instant the webfont swaps in — that reflow was the whole of the site's 0.137 layout shift. size-adjust scales the fallback to the same advance width; the ascent/descent overrides keep line boxes the same height so nothing moves vertically either. */ @font-face{ font-family:"Almoni Fallback"; src:local("Arial"),local("Helvetica Neue"),local("Roboto"),local("Liberation Sans"); size-adjust:95.8%; ascent-override:91.1%; descent-override:33.2%; line-gap-override:29.2%; } @font-face{ font-family:"Almoni Tzar Fallback"; src:local("Arial"),local("Helvetica Neue"),local("Roboto"),local("Liberation Sans"); size-adjust:79.5%; ascent-override:109.8%; descent-override:40%; line-gap-override:35.2%; } /* ============ TOKENS ============ */ /* Palette A — נייבי + כתום (default). Switch with data-palette on . */ :root{ --ink:#08121F; --navy:#12213D; --navy-2:#1B2E52; --navy-3:#24406E; --orange:#FF6A13; --orange-2:#FF9040; --orange-soft:#FFF1E6; --orange-deep:#C94F08; /* Text-safe orange. The brand orange is only 2.6:1 on cream and 2.9:1 on white — nowhere near the 4.5:1 WCAG AA needs — so anything the visitor has to read uses this one (4.9:1 on cream, 5.5:1 on white) while the bright orange stays for fills, borders and decoration. */ --orange-ink:#B84300; --cream:#F6F2EA; --paper:#FFFFFF; --line:#E3DED3; --muted:#63718A; } :root{ --shadow-s:0 2px 6px rgba(8,18,31,.06), 0 8px 20px rgba(8,18,31,.06); --shadow-m:0 4px 12px rgba(8,18,31,.08), 0 18px 44px rgba(8,18,31,.10); --shadow-l:0 10px 24px rgba(8,18,31,.10), 0 32px 80px rgba(8,18,31,.16); --r-s:10px; --r-m:16px; --r-l:26px; --r-xl:38px; --wrap:1220px; --f-display:"Almoni Tzar","Almoni Tzar Fallback","Almoni",system-ui,sans-serif; --f-body:"Almoni","Almoni Fallback",system-ui,sans-serif; --f-quote:"Almoni","Almoni Fallback",system-ui,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--cream); color:var(--ink); font-family:var(--f-body); font-size:19px; line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%; height:auto; display:block} a{color:inherit; text-decoration:none} h1,h2,h3,h4{font-family:var(--f-display); font-weight:800; line-height:1.06; margin:0; letter-spacing:-.005em} p{margin:0 0 1em} .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:22px} /* texture */ body::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; background-image:radial-gradient(rgba(18,33,61,.045) 1px, transparent 1px); background-size:22px 22px; } main,header,footer{position:relative; z-index:1} /* ============ BUTTONS ============ */ .btn{ display:inline-flex; align-items:center; gap:10px; justify-content:center; font-family:var(--f-body); font-weight:700; font-size:19px; padding:16px 30px; border-radius:100px; border:0; cursor:pointer; transition:transform .18s cubic-bezier(.2,.9,.3,1.2), box-shadow .18s, background .18s; white-space:nowrap; } .btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .btn-primary{background:var(--navy); color:#fff; box-shadow:0 6px 0 var(--ink), var(--shadow-m)} .btn-primary:hover{transform:translateY(-3px); box-shadow:0 9px 0 var(--ink), var(--shadow-l)} .btn-primary:active{transform:translateY(3px); box-shadow:0 2px 0 var(--ink)} /* Ink on orange, not white: no orange vivid enough to stay on brand clears 4.5:1 against white text (this one manages 2.9:1). Navy on the same orange is 6.6:1 and keeps both brand colours on the primary call to action. */ .btn-wa{background:var(--orange); color:var(--ink); box-shadow:0 6px 0 var(--orange-deep), var(--shadow-m)} .btn-wa:hover{transform:translateY(-3px); box-shadow:0 9px 0 var(--orange-deep), var(--shadow-l)} .btn-wa:active{transform:translateY(3px); box-shadow:0 2px 0 var(--orange-deep)} .btn-ghost{background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.35)} .btn-ghost:hover{background:rgba(255,255,255,.2)} .btn-dark{background:var(--navy); color:#fff; box-shadow:0 6px 0 #08121F, var(--shadow-m)} .btn-dark:hover{transform:translateY(-3px); box-shadow:0 9px 0 #08121F, var(--shadow-l)} /* ============ TOPBAR ============ */ .topbar{background:var(--ink); color:#C9D4E4; font-size:16px; font-weight:500} .topbar .wrap{display:flex; align-items:center; gap:18px; height:42px} .pulse{display:inline-flex; align-items:center; gap:8px; color:#fff} .pulse i{width:8px;height:8px;border-radius:50%;background:var(--orange-2); box-shadow:0 0 0 0 rgba(255,144,64,.75); animation:pulse 2s ease-out 3} @keyframes pulse{70%{box-shadow:0 0 0 9px rgba(255,144,64,0)}100%{box-shadow:0 0 0 0 rgba(255,144,64,0)}} .topbar .sep{width:1px;height:16px;background:rgba(255,255,255,.16)} .topbar .end{margin-inline-start:auto; display:flex; align-items:center; gap:8px} .stars{color:var(--orange-2); letter-spacing:2px} @media(max-width:900px){.topbar .hide-m{display:none}} /* ============ HEADER ============ */ .hdr{position:sticky; top:0; z-index:60; background:rgba(246,242,234,.88); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)} .hdr .wrap{display:flex; align-items:center; gap:18px; height:78px; flex-wrap:nowrap} .logo{display:flex; align-items:center} .logo img{height:54px; width:auto} .ftr .logo{margin-bottom:16px} .ftr .logo img{height:58px} .nav{display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; font-weight:600; flex-wrap:nowrap; white-space:nowrap} .nav > li > a{padding:10px 12px; border-radius:100px; display:flex; align-items:center; gap:6px; transition:background .16s, color .16s; font-size:17px; white-space:nowrap} .nav > li > a:hover{background:#fff; color:var(--orange-ink)} .chev{width:9px;height:9px;border-inline-start:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);margin-top:-4px;opacity:.55} .hdr-cta{margin-inline-start:auto; display:flex; align-items:center; gap:10px; flex:none; white-space:nowrap} .hdr-phone{font-family:var(--f-display); font-size:22px; color:var(--navy); direction:ltr; white-space:nowrap} /* mega — anchored to the header container, not to the menu item, so a panel hanging off an item near the edge still lands inside the viewport */ .hdr .wrap{position:relative} li[data-mega]{position:static} .mega{position:absolute; top:calc(100% + 14px); inset-inline-start:50%; transform:translateX(50%) translateY(10px); width:min(880px,92vw); max-width:100%; background:#fff; border-radius:var(--r-l); box-shadow:var(--shadow-l); padding:26px; opacity:0; visibility:hidden; transition:.22s; border:1px solid var(--line); z-index:70} li[data-mega]:hover .mega, li[data-mega].is-open .mega, li[data-mega]:focus-within .mega{opacity:1; visibility:visible; transform:translateX(50%) translateY(0)} .mega-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 26px} .mega h4{font-size:13px; letter-spacing:.09em; color:var(--muted); font-family:var(--f-body); font-weight:700; margin:6px 0 10px; grid-column:1/-1} .mega a.mi{display:flex; gap:12px; align-items:center; padding:10px; border-radius:14px; transition:background .15s} .mega a.mi:hover{background:var(--orange-soft)} .mega .bx{width:40px;height:40px;flex:none;border-radius:11px;background:var(--navy);display:grid;place-items:center} .mega .bx svg{width:21px;height:21px;stroke:var(--orange-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .mega .mi b{display:block;font-weight:700;font-size:16px} .mega .mi small{color:var(--muted); font-size:13.5px; line-height:1.4; display:block} @media(max-width:1060px){.nav,.hdr-phone{display:none}} /* ============ HERO ============ */ .hero{position:relative; background:var(--navy); color:#fff; overflow:hidden; padding:66px 0 0} .hero::before{content:""; position:absolute; inset:0; background: radial-gradient(900px 520px at 78% 8%, rgba(255,106,19,.28), transparent 60%), radial-gradient(700px 500px at 8% 92%, rgba(36,64,110,.9), transparent 60%); } .hero::after{content:""; position:absolute; inset-inline:0; bottom:-1px; height:110px; background:var(--cream); clip-path:polygon(0 46%,100% 0,100% 100%,0 100%)} .hero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.06fr .94fr; gap:24px; align-items:center; padding-bottom:110px} .hero-copy{padding-bottom:0} .eyebrow{display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); padding:8px 17px; border-radius:100px; font-weight:700; font-size:14.5px; margin-bottom:22px} .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--orange-2)} .hero h1{font-size:clamp(44px,5.7vw,74px); line-height:1.03; margin-bottom:20px} .hero h1 em{font-style:normal; color:var(--orange-2); position:relative; white-space:nowrap} .hero h1 em::after{content:""; position:absolute; inset-inline:0; bottom:.02em; height:.13em; background:var(--orange); opacity:.42; border-radius:4px} .hero .lede{font-size:22px; color:#CBD8EC; max-width:35em; margin-bottom:26px; line-height:1.65} .hero .lede b{color:#fff; font-weight:700} .hero-cta{display:flex; gap:13px; flex-wrap:wrap; margin-bottom:26px} .chips{display:flex; gap:10px; flex-wrap:wrap; list-style:none; padding:0; margin:0} .chips li{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:600; color:#D7E2F2; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); padding:8px 15px; border-radius:100px} .chips svg{width:16px;height:16px;stroke:var(--orange-2);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .hero-figure{position:relative; align-self:end; text-align:center; margin-bottom:-110px} .hero-figure img{width:min(342px,100%); margin-inline:auto; filter:drop-shadow(0 34px 46px rgba(0,0,0,.42)); position:relative; z-index:2} .halo{position:absolute; inset-inline:0; bottom:78px; margin-inline:auto; width:370px; height:370px; border-radius:50%; background:radial-gradient(circle,rgba(255,106,19,.42),transparent 68%); filter:blur(8px); z-index:1} .badge-float{position:absolute; z-index:3; background:#fff; color:var(--navy); border-radius:18px; padding:12px 17px; box-shadow:var(--shadow-l); font-weight:700; font-size:15px; display:flex; align-items:center; gap:11px; animation:bob 4.2s ease-in-out 2} .badge-float small{display:block; font-weight:500; color:var(--muted); font-size:13px; line-height:1.3} .badge-float .ic{width:36px;height:36px;border-radius:11px;background:var(--orange-soft);display:grid;place-items:center;flex:none} .badge-float .ic svg{width:19px;height:19px;stroke:var(--orange);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .bf-1{inset-inline-start:-6px; top:118px} .bf-2{inset-inline-end:-4px; bottom:172px; animation-delay:1.4s} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}} @media(max-width:960px){ .hero{padding-top:44px} .hero .wrap{grid-template-columns:1fr; text-align:center} .hero .wrap{padding-bottom:0} .hero-figure{margin-bottom:0} .hero-copy{padding-bottom:20px} .hero-cta,.chips{justify-content:center} .hero .lede{margin-inline:auto} .hero-figure img{width:min(228px,58%)} .halo{width:180px;height:180px;bottom:30px} .bf-1{inset-inline-start:0; top:40px} .bf-2{inset-inline-end:0; bottom:80px} .hero::after{height:60px} } /* ============ SECTION SHELL ============ */ section{padding:86px 0} .sec-head{max-width:760px; margin:0 auto 52px; text-align:center} .kicker{display:inline-block; font-family:var(--f-body); font-weight:800; font-size:13.5px; letter-spacing:.12em; color:var(--orange-ink); background:var(--orange-soft); padding:7px 16px; border-radius:100px; margin-bottom:16px} .sec-head h2{font-size:clamp(36px,4.5vw,60px); margin-bottom:14px} .sec-head p{font-size:20.5px; color:var(--muted); margin:0} .sec-head h2 em{font-style:normal; color:var(--orange-ink)} /* ============ STEPS ============ */ .steps-sec{background:var(--paper); border-block:1px solid var(--line)} .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative} .step{background:var(--cream); border:1px solid var(--line); border-radius:var(--r-l); padding:34px 28px; position:relative; overflow:hidden} .step::before{content:attr(data-n); position:absolute; inset-inline-end:16px; top:2px; font-family:var(--f-display); font-size:104px; color:var(--navy); opacity:.06; line-height:1} .step .si{width:58px;height:58px;border-radius:17px;background:var(--navy);display:grid;place-items:center;margin-bottom:18px; box-shadow:var(--shadow-s)} .step .si svg{width:29px;height:29px;stroke:var(--orange-2);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .step h3{font-size:28px; margin-bottom:9px} .step p{color:var(--muted); margin:0; font-size:19px} @media(max-width:860px){.steps{grid-template-columns:1fr}} /* ============ SERVICES ============ */ .svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} .svc{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:28px; transition:transform .22s cubic-bezier(.2,.9,.3,1.2), box-shadow .22s, border-color .22s; display:flex; flex-direction:column} .svc:hover{transform:translateY(-6px); box-shadow:var(--shadow-l); border-color:var(--orange)} .svc .si{width:56px;height:56px;border-radius:16px;background:var(--orange-soft);display:grid;place-items:center;margin-bottom:17px} .svc .si svg{width:28px;height:28px;stroke:var(--orange);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .svc h3{font-size:26px; margin-bottom:8px} .svc p{color:var(--muted); font-size:18px; margin-bottom:16px; flex:1} .svc .foot{display:flex; align-items:center; justify-content:space-between; gap:10px; border-top:1px dashed var(--line); padding-top:14px} .svc .price{font-family:var(--f-display); font-size:22px; color:var(--navy)} .svc .price small{font-family:var(--f-body); font-weight:600; color:var(--muted); font-size:13.5px; display:block; line-height:1} .svc .more{color:var(--orange-ink); font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:5px} .svc:hover .more{gap:9px} .svc .more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round; transition:.2s} @media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:660px){.svc-grid{grid-template-columns:1fr}} /* ============ WHY (dark) ============ */ .why{background:var(--navy); color:#fff; position:relative; overflow:hidden} .why::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 420px at 88% 12%, rgba(255,106,19,.2), transparent 62%)} .why .wrap{position:relative; z-index:2} .why .sec-head p{color:#B7C6DE} .why .kicker{background:rgba(255,106,19,.18); color:var(--orange-2)} .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px} .why-card{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-m); padding:26px; transition:.22s} .why-card:hover{background:rgba(255,255,255,.1); transform:translateY(-5px)} .why-card .si{width:50px;height:50px;border-radius:14px;background:var(--orange);display:grid;place-items:center;margin-bottom:15px} .why-card .si svg{width:25px;height:25px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .why-card h3{font-size:24px; margin-bottom:7px} .why-card p{color:#B7C6DE; font-size:17.5px; margin:0} @media(max-width:1000px){.why-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.why-grid{grid-template-columns:1fr}} /* mascot strip inside why */ .mascot-strip{display:grid; grid-template-columns:196px 1fr; gap:26px; align-items:center; margin-top:44px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-l); padding:22px 30px} .mascot-strip img{width:196px; margin-block:-104px -24px; filter:drop-shadow(0 20px 30px rgba(0,0,0,.4))} .mascot-strip h3{font-size:32px; margin-bottom:8px} .mascot-strip p{color:#C3D0E5; margin:0 0 16px; font-size:19px} @media(max-width:760px){ .mascot-strip{grid-template-columns:1fr; text-align:center; padding-top:0} .mascot-strip img{width:150px; margin:-42px auto 0} } /* ============ PRICES ============ */ .price-sec{background:var(--paper); border-block:1px solid var(--line)} .ptable{border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-s); background:#fff} .prow{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:10px; padding:17px 24px; align-items:center; border-bottom:1px solid var(--line)} .prow:last-child{border-bottom:0} .prow.head{background:var(--navy); color:#fff; font-family:var(--f-display); font-size:20px} .prow:not(.head):nth-child(even){background:#FBF9F5} .prow b{font-weight:700; font-size:19px} .prow small{display:block; color:var(--muted); font-weight:500; font-size:14.5px; line-height:1.4} .prow .pv{font-family:var(--f-display); font-size:23px; color:var(--navy)} .prow .pv.ours{color:var(--orange-ink)} .pnote{margin-top:18px; display:flex; gap:12px; align-items:flex-start; background:var(--orange-soft); border:1px solid #FFD9BE; border-radius:var(--r-m); padding:16px 20px; font-size:16px; color:#7A3B0C} .pnote svg{width:22px;height:22px;flex:none;margin-top:3px;stroke:var(--orange);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @media(max-width:700px){ .prow{grid-template-columns:1fr 1fr; padding:14px 16px} .prow .c3{display:none} } /* ============ BEFORE / AFTER ============ */ .ba-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} .ba .cap{padding:16px 20px} .ba .cap b{display:block; font-size:17px} .ba .cap small{color:var(--muted); font-size:14.5px} @media(max-width:1000px){.ba-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.ba-grid{grid-template-columns:1fr}} /* ============ AREAS ============ */ .areas-sec{background:var(--paper); border-block:1px solid var(--line)} .areas{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:900px; margin:0 auto} .areas a{background:var(--cream); border:1px solid var(--line); padding:10px 20px; border-radius:100px; font-weight:600; font-size:16px; transition:.16s; display:flex; align-items:center; gap:7px} .areas a:hover{background:var(--navy); color:#fff; border-color:var(--navy); transform:translateY(-2px)} .areas svg{width:14px;height:14px;stroke:var(--orange);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .areas a:hover svg{stroke:var(--orange-2)} /* ============ REVIEWS ============ */ .rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px} .rev{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:28px; position:relative} .rev::before{content:"”"; position:absolute; inset-inline-end:24px; top:6px; font-family:var(--f-quote); font-size:76px; color:var(--orange-ink); opacity:.16; line-height:1} .rev .st{color:var(--orange-ink); letter-spacing:2px; font-size:15px; margin-bottom:10px} .rev p{font-family:var(--f-quote); font-size:20px; line-height:1.65; color:#22324B; margin-bottom:18px} .rev .who{display:flex; align-items:center; gap:12px} .rev .av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-size:18px} .rev .who b{display:block; font-size:16px} .rev .who small{color:var(--muted); font-size:14px} @media(max-width:1000px){.rev-grid{grid-template-columns:1fr}} /* ============ FAQ ============ */ .faq-sec{background:var(--paper); border-block:1px solid var(--line)} .faq{max-width:860px; margin:0 auto} details{background:var(--cream); border:1px solid var(--line); border-radius:var(--r-m); margin-bottom:12px; overflow:hidden; transition:.2s} details[open]{border-color:var(--orange); box-shadow:var(--shadow-s)} summary{cursor:pointer; list-style:none; padding:22px 26px; font-family:var(--f-display); font-size:24px; display:flex; align-items:center; justify-content:space-between; gap:14px} summary::-webkit-details-marker{display:none} summary::after{content:""; width:12px;height:12px;flex:none;border-inline-end:2.6px solid var(--orange);border-bottom:2.6px solid var(--orange); transform:rotate(45deg); transition:.22s; margin-top:-5px} details[open] summary::after{transform:rotate(-135deg); margin-top:3px} details .ans{padding:0 26px 24px; color:#3A4A63; font-size:19px} details .ans p:last-child{margin:0} /* ============ SEO TEXT ============ */ .seo-text{max-width:900px; margin:0 auto; font-size:19.5px; color:#33415B} .seo-text h2{font-size:clamp(33px,3.9vw,50px); margin:0 0 18px} .seo-text h3{font-size:30px; margin:34px 0 10px; color:var(--navy)} .seo-text ul{padding-inline-start:22px; margin:0 0 18px} .seo-text li{margin-bottom:8px} .seo-text a{color:var(--orange-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px} /* ============ CTA ============ */ .cta-sec{background:var(--navy); color:#fff; position:relative; overflow:hidden; padding:0} .cta-sec::before{content:""; position:absolute; inset:0; background:radial-gradient(760px 460px at 22% 100%, rgba(255,106,19,.3), transparent 62%)} .cta-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr 330px; gap:30px; align-items:end; padding:76px 0 0} .cta-copy{padding-bottom:76px} .cta-copy h2{font-size:clamp(36px,4.8vw,64px); margin-bottom:16px} .cta-copy h2 em{font-style:normal; color:var(--orange-2)} .cta-copy p{color:#C3D0E5; font-size:21px; max-width:32em; margin-bottom:26px} .cta-btns{display:flex; gap:13px; flex-wrap:wrap} .cta-fig img{width:268px; margin-bottom:-6px; filter:drop-shadow(0 26px 36px rgba(0,0,0,.45))} @media(max-width:860px){ .cta-inner{grid-template-columns:1fr; text-align:center; padding-top:56px} .cta-copy{padding-bottom:10px} .cta-btns{justify-content:center} .cta-fig img{width:180px; margin-inline:auto} } /* ============ FOOTER ============ */ .ftr{background:var(--ink); color:#98A7BE; padding:60px 0 26px; font-size:18px} .ftr-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.1)} .ftr h4,.ftr .ftr-h{color:#fff; font-size:21px; margin-bottom:14px} .ftr ul{list-style:none; padding:0; margin:0} .ftr li{margin-bottom:9px} .ftr a:hover{color:var(--orange-2)} .ftr .logo{color:#fff; margin-bottom:14px} .ftr .logo .mark{background:var(--orange)} .ftr-bot{padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:14.5px} @media(max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr; gap:26px}} /* ============ STICKY MOBILE BAR ============ */ .sticky-bar{position:fixed; inset-inline:0; bottom:0; z-index:80; background:#fff; border-top:1px solid var(--line); display:none; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); gap:10px; box-shadow:0 -6px 26px rgba(8,18,31,.14)} .sticky-bar .btn{flex:1; padding:13px 12px; font-size:16px} @media(max-width:860px){.sticky-bar{display:flex} body{padding-bottom:74px}} /* reveal — only hidden once JS confirms it can reveal them again */ .js .rv{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.3,1)} .js .rv.in{opacity:1; transform:none} @media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none} .badge-float,.pulse i,.wa-float::before{animation:none}} /* ============ INNER PAGES ============ */ .crumbs{background:var(--paper); border-bottom:1px solid var(--line); font-size:16px; font-weight:600} .crumbs .wrap{display:flex; align-items:center; gap:8px; flex-wrap:wrap; height:52px; color:var(--muted)} .crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--orange-ink)} .crumbs i{font-style:normal; opacity:.45} .crumbs [aria-current]{color:var(--navy); font-weight:700} .shero{position:relative; background:var(--navy); color:#fff; overflow:hidden; padding:48px 0 0} .shero::before{content:""; position:absolute; inset:0; background:radial-gradient(820px 480px at 80% 10%, rgba(255,106,19,.26), transparent 60%), radial-gradient(650px 460px at 6% 92%, rgba(36,64,110,.85), transparent 60%)} .shero::after{content:""; position:absolute; inset-inline:0; bottom:-1px; height:90px; background:var(--cream); clip-path:polygon(0 52%,100% 0,100% 100%,0 100%)} .shero .wrap{position:relative; z-index:2; display:grid; grid-template-columns:1.12fr .88fr; gap:24px; align-items:center; padding-bottom:92px} .shero-copy{padding-bottom:0} .shero h1{font-size:clamp(36px,4.6vw,60px); line-height:1.05; margin-bottom:18px} .shero h1 em{font-style:normal; color:var(--orange-2)} .shero .lede{font-size:21px; color:#CBD8EC; max-width:34em; margin-bottom:24px; line-height:1.62} .shero .lede b{color:#fff} .shero-fig{position:relative; align-self:end; text-align:center; margin-bottom:-92px} .shero-fig img{width:min(268px,100%); margin-inline:auto; filter:drop-shadow(0 30px 42px rgba(0,0,0,.42)); position:relative; z-index:2} .shero .halo{bottom:60px; width:320px; height:320px} .bf-p{inset-inline-start:-4px; bottom:150px} .shero.thanks::after{height:0} .shero.thanks{padding-bottom:56px} @media(max-width:960px){ .shero .wrap{grid-template-columns:1fr; text-align:center} .shero .wrap{padding-bottom:0} .shero-fig{margin-bottom:0} .shero-copy{padding-bottom:16px} .shero .hero-cta,.shero .chips{justify-content:center} .shero .lede{margin-inline:auto} .shero-fig img{width:min(200px,52%)} .shero .halo{width:160px;height:160px;bottom:24px} .bf-p{inset-inline-start:0; bottom:40px} } .art-sec{background:var(--paper); border-block:1px solid var(--line)} .art-sec .seo-text h2{margin:38px 0 14px; font-size:clamp(29px,3.3vw,42px)} .art-sec .seo-text h2:first-child{margin-top:0} .kwline{margin-top:30px; padding-top:18px; border-top:1px dashed var(--line); color:var(--muted); font-size:16.5px} .agrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .acard{display:flex; gap:14px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:18px 20px; transition:.2s} .acard:hover{border-color:var(--orange); transform:translateY(-4px); box-shadow:var(--shadow-m)} .acard .si{width:46px;height:46px;flex:none;border-radius:13px;background:var(--orange-soft);display:grid;place-items:center} .acard .si svg{width:23px;height:23px;stroke:var(--orange);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .acard b{display:block; font-size:18px; line-height:1.25} .acard small{color:var(--muted); font-size:15px; line-height:1.35; display:block; margin-top:2px} @media(max-width:1000px){.agrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.agrid{grid-template-columns:1fr}} .center-link{text-align:center; margin:34px 0 0} /* contact */ .contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:24px; align-items:start} .cbox,.cform{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:30px; box-shadow:var(--shadow-s)} .cbox h2,.cform h2{font-size:28px; margin-bottom:18px} .crow{display:flex; gap:14px; align-items:center; padding:13px 0; border-bottom:1px dashed var(--line)} .crow:last-child{border-bottom:0} .crow .ic{width:46px;height:46px;flex:none;border-radius:13px;background:var(--navy);display:grid;place-items:center} .crow .ic svg{width:23px;height:23px;stroke:var(--orange-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .crow b{display:block; font-size:18px} .crow small{color:var(--muted); font-size:15.5px; display:block} .crow a{color:var(--orange-ink); font-weight:700} .fnote{color:var(--muted); font-size:16.5px; margin-bottom:20px} .cform label{display:block; font-weight:700; font-size:16.5px; margin-bottom:14px} .cform input,.cform select,.cform textarea{width:100%; margin-top:6px; font-family:var(--f-body); font-size:18px; padding:13px 16px; border:1.5px solid var(--line); border-radius:14px; background:var(--cream); color:var(--ink)} .cform input:focus,.cform select:focus,.cform textarea:focus{outline:0; border-color:var(--orange-ink); box-shadow:0 0 0 3px rgba(184,67,0,.18); background:#fff} .cform textarea{resize:vertical} .cform .btn{width:100%; margin-top:8px} @media(max-width:860px){.contact-grid{grid-template-columns:1fr}} .tb-ic{width:15px;height:15px;stroke:var(--orange-2);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px} /* ============ BEFORE / AFTER PAIR ============ */ /* The two frames are separate photographs of the same subject, not a matched pair, so they sit side by side instead of wiping between each other. */ .ba{display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--shadow-s); margin:0; transition:transform .22s cubic-bezier(.2,.9,.3,1.2), box-shadow .22s, border-color .22s} .ba:hover{transform:translateY(-5px); box-shadow:var(--shadow-l); border-color:var(--orange)} .ba .pair{display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line)} .ba .half{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--navy-2)} .ba .half img{width:100%; height:100%; object-fit:cover; display:block} .ba .lbl{position:absolute; z-index:3; top:10px; font-size:12.5px; font-weight:800; letter-spacing:.05em; padding:5px 12px; border-radius:100px; background:rgba(8,18,31,.72); color:#fff; backdrop-filter:blur(4px)} .ba .lbl.b{inset-inline-start:10px} .ba .lbl.a{inset-inline-start:10px; background:var(--orange); color:var(--ink)} .ba .cap{padding:16px 20px} .ba .cap b{display:block; font-size:18px} .ba .cap small{color:var(--muted); font-size:15.5px} .ba .cap a{color:var(--orange-ink); font-weight:700} .ba-grid{grid-template-columns:repeat(2,1fr)} @media(max-width:760px){.ba-grid{grid-template-columns:1fr}} /* ============ AREAS MEGA PANEL ============ */ /* Many short entries, so it runs three columns instead of the services' two. */ .mega-areas{width:min(720px,92vw)} .mega-areas .mega-grid{grid-template-columns:repeat(3,1fr)} .mega-areas h4{grid-column:1/-1} .mega-foot{margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); text-align:center} .mega-foot a{color:var(--orange-ink); font-weight:700; font-size:16px} /* The header CTA is never empty, so guarantee it never wraps the nav either. */ /* The header CTA was inheriting the hero button wholesale — 19px text, 16px padding and the 6px hard offset shadow — which is a 57px block of button inside a 78px bar. Same colours and the same 6.6:1 contrast, but tighter proportions and a soft shadow in place of the 3D slab. */ .hdr-cta .btn{ white-space:nowrap; font-size:16.5px; font-weight:700; padding:11px 21px; gap:8px; box-shadow:0 1px 2px rgba(8,18,31,.10), 0 5px 14px rgba(201,79,8,.26); } .hdr-cta .btn svg{width:18px; height:18px} .hdr-cta .btn:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(8,18,31,.12), 0 9px 20px rgba(201,79,8,.34); } .hdr-cta .btn:active{transform:translateY(0); box-shadow:0 1px 2px rgba(8,18,31,.16)} /* Navy variants get the same treatment in their own colour. */ .hdr-cta .btn-primary,.hdr-cta .btn-dark{ box-shadow:0 1px 2px rgba(8,18,31,.12), 0 5px 14px rgba(18,33,61,.24); } .hdr-cta .btn-primary:hover,.hdr-cta .btn-dark:hover{ box-shadow:0 2px 4px rgba(8,18,31,.14), 0 9px 20px rgba(18,33,61,.32); } .hdr-phone{font-size:21px} /* Drop the least essential pieces before anything is allowed to wrap. */ @media(max-width:1320px){.hdr-phone{display:none}} @media(max-width:1180px){.nav > li > a{padding:10px 9px; font-size:16px}} /* ============ MOBILE NAV ============ */ .burger{display:none; width:50px; height:50px; flex:none; margin-inline-start:auto; background:var(--navy); border:0; border-radius:15px; cursor:pointer; position:relative} .burger span{position:absolute; inset-inline-start:14px; width:22px; height:2.5px; border-radius:2px; background:#fff; transition:transform .25s, opacity .2s} .burger span:nth-child(1){top:17px} .burger span:nth-child(2){top:23.5px} .burger span:nth-child(3){top:30px} [data-mnav] .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} [data-mnav] .burger span:nth-child(2){opacity:0} [data-mnav] .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .mnav{position:fixed; inset:0; z-index:100; visibility:hidden} [data-mnav] .mnav{visibility:visible} .mnav-bg{position:absolute; inset:0; background:rgba(8,18,31,.55); opacity:0; transition:opacity .28s; backdrop-filter:blur(2px)} [data-mnav] .mnav-bg{opacity:1} .mnav-panel{position:absolute; inset-block:0; inset-inline-start:0; width:min(360px,88vw); background:var(--cream); box-shadow:var(--shadow-l); display:flex; flex-direction:column; transform:translateX(-100%); transition:transform .3s cubic-bezier(.2,.9,.3,1); overflow-y:auto} [dir="rtl"] .mnav-panel{transform:translateX(100%)} [data-mnav] .mnav-panel{transform:none} .mnav-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:2} .mnav-head img{height:42px; width:auto} .mnav-close{width:42px;height:42px;border:0;border-radius:12px;background:var(--cream); font-size:26px; line-height:1; color:var(--navy); cursor:pointer} .mnav-links{padding:10px 14px 18px; list-style:none; margin:0} .mnav-links > li{border-bottom:1px solid var(--line)} .mnav-links > li:last-child{border-bottom:0} .mnav-links a{display:block; padding:15px 8px; font-family:var(--f-display); font-weight:800; font-size:21px; color:var(--navy)} .mnav-links details > summary{list-style:none; cursor:pointer; padding:15px 8px; font-family:var(--f-display); font-weight:800; font-size:21px; color:var(--navy); display:flex; align-items:center; justify-content:space-between} .mnav-links details > summary::-webkit-details-marker{display:none} .mnav-links details > summary::after{content:""; width:11px;height:11px;flex:none; border-inline-end:2.6px solid var(--orange); border-bottom:2.6px solid var(--orange); transform:rotate(45deg); margin-top:-5px; transition:.22s} .mnav-links details[open] > summary::after{transform:rotate(-135deg); margin-top:3px} .mnav-sub{list-style:none; margin:0 0 10px; padding:0 12px} .mnav-sub a{font-family:var(--f-body); font-weight:600; font-size:18px; color:var(--ink); padding:11px 8px; display:flex; align-items:center; gap:9px} .mnav-sub svg{width:17px;height:17px;flex:none;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .mnav-cta{margin-top:auto; padding:16px; border-top:1px solid var(--line); background:#fff; display:flex; flex-direction:column; gap:10px; position:sticky; bottom:0} .mnav-cta .btn{width:100%} @media(max-width:1060px){ .burger{display:block} .hdr .wrap{gap:14px} .hdr-cta{display:none} } @media(min-width:1061px){ .mnav{display:none} } @media(prefers-reduced-motion:reduce){ .mnav-panel,.mnav-bg,.burger span{transition:none} } /* ============ ACCESSIBILITY BASELINE ============ */ /* Skip link: off-screen until focused, then unmissable. */ .skip-link{position:absolute; inset-inline-start:-9999px; top:12px; z-index:200; background:var(--navy); color:#fff; padding:14px 22px; border-radius:100px; font-family:var(--f-body); font-weight:700; font-size:17px; text-decoration:none} .skip-link:focus{inset-inline-start:12px} /* A visible focus ring on every interactive element, in both palettes. */ a:focus-visible,button:focus-visible,summary:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{ outline:3px solid var(--orange); outline-offset:3px; border-radius:6px} .hero a:focus-visible,.shero a:focus-visible,.why a:focus-visible,.cta-sec a:focus-visible, .ftr a:focus-visible,.topbar a:focus-visible{outline-color:#fff} /* Never remove an outline without replacing it. */ :focus:not(:focus-visible){outline:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important} } /* ============ FLOATING WHATSAPP ============ */ /* Sits opposite the accessibility widget. On phones the sticky action bar already carries WhatsApp, so the float steps aside instead of stacking. */ .wa-float{ position:fixed; inset-inline-end:18px; bottom:18px; z-index:9980; display:flex; align-items:center; gap:10px; height:58px; padding:0 20px 0 16px; border-radius:100px; /* WhatsApp's #25D366 puts white text at 1.98:1. This is the same hue a few stops down — still unmistakably the WhatsApp button, but 5:1. */ background:#0B8043; color:#fff; font-weight:700; font-size:17px; box-shadow:0 8px 24px rgba(8,18,31,.28); transition:transform .2s, box-shadow .2s; } .wa-float:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(8,18,31,.34)} .wa-float:focus-visible{outline:3px solid var(--navy); outline-offset:3px} .wa-float svg{width:26px;height:26px;flex:none;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .wa-float .wa-label{white-space:nowrap} /* A quiet pulse that stops for anyone who asked for less motion. */ .wa-float::before{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 0 0 0 rgba(37,211,102,.55); animation:waPulse 2.6s ease-out 3; } @keyframes waPulse{70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}} @media(prefers-reduced-motion:reduce){.wa-float::before{animation:none}} .wa-float--contact{background:var(--navy); box-shadow:0 8px 24px rgba(8,18,31,.3)} .wa-float--contact::before{box-shadow:0 0 0 0 rgba(18,33,61,.5); animation-name:contactPulse} @keyframes contactPulse{70%{box-shadow:0 0 0 16px rgba(18,33,61,0)}100%{box-shadow:0 0 0 0 rgba(18,33,61,0)}} .wa-float--contact:focus-visible{outline-color:var(--orange)} @media(max-width:860px){ .wa-float{display:none} .ihp-a11y--bottom-start{bottom:86px} .ihp-a11y--bottom-end{bottom:86px} } @media(max-width:1100px){ .wa-float .wa-label{display:none} .wa-float{width:58px; padding:0; justify-content:center} } /* ============ SINGLE POST ============ */ .post-single{background:var(--paper)} .post-head{padding:48px 0 24px; background:var(--paper)} .post-head .wrap{max-width:900px} .post-head h1{font-size:clamp(32px,4.2vw,52px); line-height:1.08; margin:12px 0 16px} .post-meta{display:flex; gap:20px; flex-wrap:wrap; margin:0; color:var(--muted); font-size:16.5px; font-weight:600} .post-meta span{display:inline-flex; align-items:center; gap:7px} .post-meta svg{width:17px;height:17px;stroke:var(--orange);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .post-hero{margin:0 0 40px} .post-hero .wrap{max-width:1100px} .post-hero img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-xl); box-shadow:var(--shadow-l)} .post-hero figcaption{margin-top:12px; text-align:center; color:var(--muted); font-size:16px} .post-body{padding:0 0 70px; background:var(--paper)} .post-grid{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:48px; align-items:start} .post-content{font-size:19.5px; color:#33415B; max-width:none} .post-content > :first-child{margin-top:0} .post-content img{border-radius:var(--r-l); margin:26px 0} .post-content h2{font-size:clamp(28px,3.2vw,38px); margin:38px 0 14px; color:var(--navy)} .post-content h3{font-size:25px; margin:30px 0 10px; color:var(--navy)} .post-content ul,.post-content ol{padding-inline-start:22px} .post-content li{margin-bottom:8px} .post-content a{color:var(--orange-ink); font-weight:700; text-decoration:underline; text-underline-offset:3px} .post-content blockquote{margin:26px 0; padding:18px 24px; border-inline-start:4px solid var(--orange); background:var(--cream); border-radius:var(--r-m); font-family:var(--f-quote)} /* Only the head and shoulders show: the full-body render is ~1000px tall and would sit right across the card's buttons. */ .post-aside{position:sticky; top:100px; display:flex; flex-direction:column; gap:20px} .side-cta{position:relative} .side-fig{height:182px; overflow:hidden; display:flex; justify-content:flex-end; padding-inline-end:16px; margin-bottom:-14px; position:relative; z-index:2; pointer-events:none} .side-fig img{width:186px; height:182px; object-fit:cover; object-position:top center; filter:drop-shadow(0 12px 16px rgba(8,18,31,.26))} .side-cta-box{position:relative; z-index:1; background:var(--navy); color:#fff; border-radius:var(--r-l); padding:22px; box-shadow:var(--shadow-m)} .side-cta-box h2{font-size:25px; margin:0 0 8px} .side-cta-box p{color:#C3D0E5; font-size:17px; margin:0 0 16px} .side-cta-box .btn{width:100%; margin-bottom:9px; font-size:17px; padding:14px 18px} .side-chips{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px} .side-chips li{display:flex; align-items:center; gap:8px; color:#CBD8EC; font-size:15.5px; font-weight:600} .side-chips svg{width:15px;height:15px;flex:none;stroke:var(--orange-2);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round} .side-links{background:var(--cream); border:1px solid var(--line); border-radius:var(--r-l); padding:20px 22px} .side-links h2{font-size:21px; margin:0 0 12px; color:var(--navy)} .side-links ul{list-style:none; margin:0; padding:0} .side-links li{border-bottom:1px dashed var(--line)} .side-links li:last-child{border-bottom:0} .side-links a{display:flex; align-items:center; gap:10px; padding:11px 0; font-weight:600; font-size:17px} .side-links a:hover{color:var(--orange-ink)} .side-links svg{width:19px;height:19px;flex:none;stroke:var(--orange);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} @media(max-width:980px){ .post-grid{grid-template-columns:1fr; gap:34px} .post-aside{position:static} .side-cta{max-width:460px; margin-inline:auto} .side-links{max-width:460px; margin-inline:auto; width:100%} } @media(max-width:520px){ .side-fig{height:152px} .side-fig img{width:158px; height:152px} } /* ============ BLOG CARDS (home) ============ */ .posts-sec{background:var(--paper); border-block:1px solid var(--line)} .post-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} .pcard{display:flex; flex-direction:column; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; transition:transform .22s, box-shadow .22s, border-color .22s} .pcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-l); border-color:var(--orange)} .pcard img{width:100%; aspect-ratio:4/3; object-fit:cover} .pcard-body{display:flex; flex-direction:column; gap:9px; padding:22px 24px 24px} .pcard-body b{font-family:var(--f-display); font-size:24px; line-height:1.12} .pcard-body small{color:var(--muted); font-size:16.5px; line-height:1.6} .pcard-more{display:flex; align-items:center; gap:6px; margin-top:4px; color:var(--orange-ink); font-weight:700; font-size:16px} .pcard-more svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)} .pcard:hover .pcard-more svg{transform:scaleX(-1) translateX(3px); transition:transform .2s} @media(max-width:960px){.post-cards{grid-template-columns:1fr 1fr}} @media(max-width:640px){.post-cards{grid-template-columns:1fr}}