/* ============================================================================ W2 Home — homepage skin for the approved 2026-08 redesign. Loaded ONLY by index.html, after style.css. The other 235 pages keep the original skin, so nothing here may leak into shared component classes. Everything below is namespaced under .rd (set on ). ========================================================================== */ .rd { --bg:#FBF9F6; --ink:#14181A; --green:#1F7A4D; --mint:#E8F2EC; --mint-line:#D3E4DA; --line:#E7E3DB; --muted:#4A5350; --dim:#6B7370; --faint:#8A8880; --sand:#F4F1EB; --panel:#191E1E; --panel-line:#2B3231; --on-dark:#A9B4AF; --spring:#7FD3A6; --amber:#C2761B; --amber-bg:#FBF0DF; --card:#FFFFFF; --paper:#F4F2EE; --sans:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --shell:1280px; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; } .rd body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans)} .rd *,.rd *::before,.rd *::after{box-sizing:border-box} .rd img{max-width:100%} .rd a{color:var(--ink);text-decoration:none} .rd a:hover{color:var(--green)} .rd ::selection{background:var(--mint)} .rd h1,.rd h2,.rd h3,.rd h4,.rd p{margin:0} .rd button{font-family:inherit} .rd .shell{max-width:var(--shell);margin:0 auto;padding-left:32px;padding-right:32px} .rd .mono{font-family:var(--mono)} .rd .eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--green);background:var(--mint);border-radius:999px;padding:8px 13px} .rd .kicker{font:500 11px/1 var(--mono);letter-spacing:.12em;color:var(--faint)} .rd .kicker-light{color:var(--spring)} .rd .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .rd .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 8px 0;z-index:200} .rd .skip:focus{left:0} .rd :focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px} @keyframes rd-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.35)}} @keyframes rd-slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .rd .dot-live{width:7px;height:7px;border-radius:50%;background:#3FBF7F;display:inline-block;animation:rd-pulse 2.4s ease-in-out infinite} /* ---------- buttons ---------- */ .rd .b{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font:600 16px/1.2 var(--sans);cursor:pointer;border:1px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease;text-align:center} .rd .b-dark{background:var(--ink);color:var(--bg);padding:16px 28px;box-shadow:0 10px 24px -14px rgba(20,24,26,.7)} .rd .b-dark:hover{background:var(--green);color:var(--bg)} .rd .b-out{background:#fff;color:var(--ink);border-color:#DCD7CD;padding:15px 24px} .rd .b-out:hover{border-color:var(--green);color:var(--green)} .rd .b-plain{color:var(--muted);padding:15px 10px;font-weight:600} .rd .b-plain:hover{color:var(--green)} .rd .b-green{background:var(--green);color:#fff;border-radius:12px;padding:14px;font-size:15px;width:100%} .rd .b-green:hover{background:var(--ink);color:#fff} .rd .b-sm{font-size:14px;padding:10px 16px;border-radius:999px} .rd .b-ghost-sm{background:transparent;color:var(--ink);border-color:#DCD7CD} .rd .b-ghost-sm:hover{border-color:var(--green);color:var(--green)} .rd .b-dark-sm{background:var(--ink);color:var(--bg);padding:11px 20px} .rd .b-dark-sm:hover{background:var(--green)} .rd .b-light{background:var(--bg);color:var(--ink);padding:17px 24px;font-weight:650} .rd .b-light:hover{background:#fff;color:var(--green)} .rd .b-onbrand{color:#F2FAF5;border-color:rgba(242,250,245,.35);padding:16px 24px;font-weight:650} .rd .b-onbrand:hover{color:#fff;border-color:#fff} /* ---------- top strip + header ---------- */ .rd .strip{background:var(--ink);color:var(--on-dark);font-size:12.5px;border-bottom:1px solid #232928} .rd .strip .shell{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:9px;padding-bottom:9px;flex-wrap:wrap} .rd .strip-right{display:flex;gap:20px;align-items:center;flex-wrap:wrap} .rd .strip-live{color:var(--spring);display:flex;align-items:center;gap:7px} .rd .strip a{color:var(--paper);font-weight:600} .rd .strip a:hover{color:var(--spring)} .rd .hdr{position:sticky;top:0;z-index:50;background:rgba(251,249,246,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .rd .hdr .shell{display:flex;align-items:center;gap:36px;padding-top:12px;padding-bottom:12px} .rd .brand{display:flex;align-items:center;gap:11px;flex-shrink:0} .rd .brand img{width:38px;height:38px;border-radius:11px;display:block} .rd .brand-txt{display:flex;flex-direction:column;line-height:1.15} .rd .brand-txt b{font-weight:700;font-size:15px;letter-spacing:-.01em} .rd .brand-txt span{font:500 10px/1.4 var(--mono);color:var(--faint);letter-spacing:.08em} .rd .nav{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:#3D4643;margin-left:auto} .rd .hdr-cta{display:flex;gap:10px;align-items:center} .rd .navtoggle{display:none;background:transparent;border:1px solid #DCD7CD;border-radius:10px;padding:9px 11px;cursor:pointer;margin-left:auto} .rd .navtoggle span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px} .rd .navtoggle span+span{margin-top:4px} .rd .navtoggle{min-height:44px;min-width:44px} /* ---------- hero ---------- */ .rd .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start;padding-top:56px;padding-bottom:40px} .rd .hero-copy{display:grid;margin-top:22px} .rd .slide{grid-area:1/1;width:100%;opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease;pointer-events:none;visibility:hidden} .rd .slide.on{opacity:1;transform:none;pointer-events:auto;visibility:visible} .rd .slide h1,.rd .slide .slide-h{font-size:clamp(38px,4.4vw,64px);line-height:1.03;letter-spacing:-.035em;font-weight:700;text-wrap:balance} .rd .slide h1 em,.rd .slide .slide-h em{font-style:normal;color:var(--green)} .rd .slide p:not(.slide-h){font-size:19px;line-height:1.55;color:var(--muted);max-width:530px;margin-top:22px;text-wrap:pretty} .rd .slide-cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;align-items:center} .rd .wa-dot{width:8px;height:8px;border-radius:50%;background:#3FBF7F;flex-shrink:0} .rd .dots{display:flex;gap:4px;align-items:center;margin-top:18px} .rd .dots button{width:30px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;display:grid;place-items:center} .rd .dots button i{display:block;height:4px;width:16px;border-radius:99px;background:#D8D3C9;transition:background .2s ease,width .2s ease} .rd .dots button[aria-current="true"] i{background:var(--green);width:26px} .rd .dots .count{font:500 11px var(--mono);color:var(--faint);letter-spacing:.08em;margin-left:6px} .rd .facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:36px} .rd .facts div{background:var(--bg);padding:16px 14px} .rd .facts b{display:block;font:600 12px/1 var(--mono);color:var(--green)} .rd .facts>div>span{display:block;font-size:13px;color:var(--muted);margin-top:7px;line-height:1.35} .rd .hero-side{display:flex;flex-direction:column;gap:16px} .rd .stage{position:relative;width:100%;aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(20,24,26,.55);background:#EDE9E1} .rd .stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .7s ease} .rd .stage img.on{opacity:1} .rd .stage-cap{position:absolute;left:14px;bottom:14px;display:flex;gap:8px;align-items:center;background:rgba(251,249,246,.94);backdrop-filter:blur(8px);border-radius:12px;padding:10px 13px;font:600 12.5px var(--sans);color:var(--ink)} .rd .stage-cap i{width:8px;height:8px;border-radius:50%;background:var(--green);animation:rd-pulse 2.4s ease-in-out infinite} .rd .stage-tag{position:absolute;right:14px;top:14px;background:rgba(20,24,26,.82);backdrop-filter:blur(8px);color:var(--paper);border-radius:12px;padding:9px 13px;font:600 11.5px var(--mono);letter-spacing:.06em} .rd .stage-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(251,249,246,.5);background:rgba(20,24,26,.42);color:var(--bg);font-size:16px;line-height:1;cursor:pointer;backdrop-filter:blur(6px);opacity:.75;transition:opacity .2s ease} .rd .stage-nav:hover{opacity:1} .rd .stage-prev{left:12px} .rd .stage-next{right:12px} /* ---------- booking card ---------- */ .rd .bookcard{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:0 20px 40px -30px rgba(20,24,26,.5)} .rd .bookcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px} .rd .bookcard-top h2{font-size:17px;font-weight:700;letter-spacing:-.01em} .rd .bookcard-top span{font:500 11px var(--mono);color:var(--faint);white-space:nowrap} .rd .bookcard-sub{font-size:13.5px;color:var(--dim);margin:7px 0 16px} .rd .chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .rd .chips button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:11px;padding:11px 6px;min-height:44px;font:600 12.5px var(--sans);cursor:pointer;transition:.15s} .rd .chips button:hover{border-color:#C9D8CF} .rd .chips button[aria-pressed="true"]{border-color:var(--green);background:var(--mint)} .rd .bform{display:grid;gap:12px;margin-top:16px} .rd .bform .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px} .rd .bform label{display:block;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--faint);margin-bottom:6px;text-transform:uppercase} .rd .bform input,.rd .bform select,.rd .bform textarea{width:100%;font:400 14.5px var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:11px;padding:12px 13px;outline:none;transition:border-color .15s ease} .rd .bform input:focus,.rd .bform select:focus,.rd .bform textarea:focus{border-color:var(--green)} .rd .bform textarea{resize:vertical;min-height:56px} .rd .bform .note{font-size:12px;color:var(--dim);line-height:1.45} .rd .form-ok{display:none;font-size:13px;font-weight:600;color:var(--green);background:var(--mint);border-radius:10px;padding:11px 13px} .rd .form-ok.show{display:block} /* ---------- dark sections ---------- */ .rd .dark{background:var(--ink);color:var(--paper)} .rd .dark h2,.rd .dark h3{color:var(--paper)} .rd .dark p{color:var(--on-dark)} .rd .sec{padding-top:84px;padding-bottom:84px} .rd .sec-sm{padding-top:72px;padding-bottom:72px} .rd h2.big{font-size:clamp(30px,3.2vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:700} .rd h2.mid{font-size:clamp(28px,2.8vw,40px);line-height:1.1;letter-spacing:-.03em;font-weight:700} .rd .price-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start} .rd .price-box{margin-top:28px;padding:22px;border:1px solid var(--panel-line);border-radius:16px;background:var(--panel)} .rd .price-box .amt{display:flex;align-items:baseline;gap:12px} .rd .price-box .amt b{font-size:52px;font-weight:700;letter-spacing:-.04em} .rd .price-box .amt>span{font-size:15px;color:var(--on-dark)} .rd .price-box p{font-size:14px;margin-top:12px;line-height:1.55} .rd .story{display:flex;flex-direction:column;gap:12px} .rd .story-row{display:grid;grid-template-columns:76px 34px 1fr;gap:16px;align-items:center;padding:14px;border:1px solid var(--panel-line);border-radius:14px} .rd .story-row:last-child{background:#1B2A22;border-color:#2F4A3B} .rd .story-row img{width:76px;height:64px;object-fit:cover;border-radius:10px;display:block} .rd .story-row .n{font:600 13px var(--mono);color:var(--spring)} .rd .story-row .t{font-size:17px;font-weight:600;color:var(--paper)} .rd .story-row .d{font-size:14px;color:var(--on-dark);margin-top:5px} .rd .quote-demo{margin-top:56px;background:var(--bg);color:var(--ink);border-radius:20px;padding:30px;display:grid;grid-template-columns:1fr 1.25fr;gap:40px;align-items:center} .rd .quote-demo h3{font-size:26px;letter-spacing:-.02em;font-weight:700;color:var(--ink)} .rd .quote-demo>div>p{font-size:15px;color:var(--muted);line-height:1.55;margin-top:12px} .rd .bill{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14px} .rd .bill div{display:flex;justify-content:space-between;gap:16px;padding:13px 18px;border-bottom:1px solid #F0EDE6} .rd .bill .h{background:var(--sand);font:600 11px var(--mono);letter-spacing:.08em;color:var(--dim);border-bottom:0} .rd .bill .t{background:var(--mint);font-weight:700;border-bottom:0} .rd .bill .w{font:500 11px var(--mono);color:var(--green)} .rd .bill .g{color:var(--faint)} /* ---------- appliances ---------- */ .rd .sec-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap} .rd .sec-head h2{margin-top:14px} .rd .sec-head>p{font-size:15px;color:var(--muted);max-width:360px;line-height:1.55} .rd .grid-app{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:36px} .rd .app{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .rd .app:hover{transform:translateY(-3px);box-shadow:0 18px 32px -24px rgba(20,24,26,.55);border-color:#C9D8CF;color:var(--ink)} .rd .app-pic{position:relative;width:100%;aspect-ratio:4/3;border-radius:11px;overflow:hidden;border:1px solid #EDE9E1;background:#F1EEE8} .rd .app-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .rd .app:hover .app-pic img{transform:scale(1.04)} .rd .app-hd{display:flex;align-items:center;gap:8px;margin-top:13px;flex-wrap:wrap} .rd .app h3{font-size:15.5px;font-weight:650;letter-spacing:-.01em} .rd .app .tag{font:600 9.5px var(--mono);color:var(--amber);background:var(--amber-bg);border-radius:5px;padding:3px 6px} .rd .app p{font-size:12.8px;line-height:1.45;color:var(--dim);margin:7px 0 12px} .rd .app .go{font-size:13px;font-weight:600;color:var(--green);margin-top:auto} .rd .all-services{margin-top:26px;font-size:15px;font-weight:600} .rd .all-services a{color:var(--green)} /* ---------- how ---------- */ .rd .band-sand{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--sand)} .rd .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:38px} .rd .steps>div{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:24px} .rd .steps .n{font:600 12px var(--mono);color:var(--green)} .rd .steps h3{font-size:19px;font-weight:650;margin-top:14px;letter-spacing:-.01em} .rd .steps p{font-size:14px;color:var(--muted);line-height:1.55;margin-top:9px} /* ---------- trust split ---------- */ .rd .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .rd .split-pic{aspect-ratio:16/10;border-radius:20px;overflow:hidden;border:1px solid var(--line)} .rd .split-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block} .rd .split h2{margin-top:14px} .rd .split>div>p{font-size:16.5px;color:var(--muted);line-height:1.6;margin-top:16px} .rd .rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:26px} .rd .rows div{background:var(--bg);padding:15px 18px;font-size:14.5px;color:var(--muted)} .rd .rows strong{font-weight:650;color:var(--ink)} .rd .band-mint{background:var(--mint);border-top:1px solid var(--mint-line);border-bottom:1px solid var(--mint-line)} .rd .warr{display:grid;grid-template-columns:1fr 1fr;gap:14px} .rd .warr div{background:var(--bg);border:1px solid var(--mint-line);border-radius:16px;padding:22px} .rd .warr b{display:block;font-size:30px;font-weight:700;letter-spacing:-.03em} .rd .warr span{display:block;font-size:14px;color:var(--muted);line-height:1.5;margin-top:8px} /* ---------- brands ---------- */ .rd .brand-note{font:500 12.5px var(--mono);color:var(--faint);max-width:430px;line-height:1.6} .rd .brands{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-top:26px} .rd .brands span,.rd .brands a{border:1px solid var(--line);background:#fff;border-radius:12px;height:66px;display:grid;place-items:center;font-size:14.5px;font-weight:600;color:var(--muted);letter-spacing:-.01em;text-align:center;padding:0 6px} .rd .brands a:hover{border-color:var(--green);color:var(--green)} /* ---------- areas ---------- */ .rd .areas{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px} .rd .area-check{display:flex;gap:8px;margin-top:22px} .rd .area-check input{flex:1;min-width:0;background:var(--panel);border:1px solid var(--panel-line);border-radius:11px;padding:14px 16px;color:var(--paper);font:400 15px var(--sans);outline:none} .rd .area-check input::placeholder{color:#6E7A75} .rd .area-check input:focus{border-color:var(--spring)} .rd .area-check button{font:600 15px var(--sans);background:var(--spring);color:#10201A;border:none;border-radius:11px;padding:14px 20px;cursor:pointer} .rd .area-check button:hover{background:#9BE0BC} .rd .area-res{margin-top:14px;border:1px solid #2F4A3B;background:#1B2A22;border-radius:12px;padding:16px;animation:rd-slide .25s ease} .rd .area-res b{display:block;font-size:16px;font-weight:650;color:var(--paper)} .rd .area-res span{display:block;font-size:14px;color:var(--on-dark);margin-top:6px} .rd .map{margin-top:22px;position:relative;height:230px;border:1px solid var(--panel-line);border-radius:16px;background:var(--panel);overflow:hidden} .rd .map-key{position:absolute;left:16px;bottom:14px;display:flex;gap:16px;font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--on-dark)} .rd .map-key span{display:flex;align-items:center;gap:6px} .rd .map-key i{width:7px;height:7px;border-radius:50%;display:block} .rd .map-lbl{position:absolute;right:16px;top:14px;font:500 10.5px var(--mono);letter-spacing:.08em;color:#6E7A75} .rd .area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-content:start} .rd .area-grid a,.rd .area-grid div{border:1px solid var(--panel-line);border-radius:10px;padding:12px 13px;background:var(--panel)} .rd .area-grid a:hover{border-color:#2F4A3B} .rd .area-grid b{display:block;font-size:14.5px;font-weight:600;color:var(--paper)} .rd .area-grid em{display:block;font:500 10.5px var(--mono);font-style:normal;color:var(--spring);margin-top:5px;letter-spacing:.05em} /* ---------- reviews ---------- */ .rd .revs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px} .rd .rev{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px} .rd .rev-top{display:flex;justify-content:space-between;align-items:center;gap:10px} .rd .rev-top .m{font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--faint)} .rd .rev-top .s{color:var(--amber);font-size:13px;letter-spacing:.1em} .rd .rev .q{font-size:18px;font-weight:650;line-height:1.35;letter-spacing:-.015em} .rd .rev ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} .rd .rev li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:14px;color:var(--muted)} .rd .rev li i{font-style:normal;color:var(--green)} .rd .rev li.done{color:var(--ink);font-weight:600} .rd .rev .who{font-size:13.5px;color:var(--faint);margin-top:auto;padding-top:6px;border-top:1px solid #F0EDE6} /* ---------- faq (markup owned by scripts/generate_homepage_faq.py) ---------- */ .rd .band-faq{background:var(--sand);border-top:1px solid var(--line)} .rd .faq-shell{max-width:900px;margin:0 auto;padding:80px 32px} .rd .faq{display:grid;gap:8px;margin-top:28px} .rd .faq details{background:var(--bg);border:1px solid var(--line);border-radius:13px;overflow:hidden} .rd .faq summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 20px;cursor:pointer;font:650 16.5px var(--sans);color:var(--ink);letter-spacing:-.01em;list-style:none} .rd .faq summary::-webkit-details-marker{display:none} .rd .faq summary::after{content:"+";font:400 22px var(--sans);color:var(--green);line-height:1;transition:transform .2s ease;flex-shrink:0} .rd .faq details[open] summary::after{transform:rotate(45deg)} .rd .faq .a{margin:0;padding:0 20px 20px;font-size:15px;line-height:1.6;color:var(--muted);max-width:660px} /* ---------- final cta ---------- */ .rd .final{background:var(--green);color:#F2FAF5;border-radius:24px;padding:56px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center} .rd .final h2{font-size:clamp(30px,3.4vw,44px);letter-spacing:-.035em;font-weight:700;line-height:1.05;color:#F2FAF5} .rd .final>div>p{font-size:17px;color:#CDE8DA;margin-top:14px} .rd .final-cta{display:flex;flex-direction:column;gap:10px} /* ---------- autolink + seo copy ---------- */ .rd .autolink{padding-top:0;padding-bottom:72px} .rd .autolink h2{font-size:26px;letter-spacing:-.02em;font-weight:700} .rd .autolink .lead{font-size:15px;color:var(--muted);margin-top:8px} .rd .autolink-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:20px} .rd .autolink-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px} .rd .autolink-card:hover{border-color:#C9D8CF} .rd .autolink-card b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em} .rd .autolink-card span{display:block;font-size:13.5px;color:var(--dim);line-height:1.5;margin-top:6px} .rd .seo-copy{background:var(--sand);border-top:1px solid var(--line);padding:56px 0} .rd .seo-copy h2{font-size:22px;font-weight:700;letter-spacing:-.02em} .rd .seo-copy p{font-size:14.5px;line-height:1.7;color:var(--muted);margin-top:12px;max-width:900px} /* ---------- footer ---------- */ .rd .foot{background:var(--ink);color:var(--on-dark);border-top:1px solid #232928} .rd .foot .shell{padding-top:56px;padding-bottom:30px;display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:36px} .rd .foot a{color:var(--on-dark)} .rd .foot a:hover{color:var(--spring)} .rd .foot h4{color:var(--paper);font-size:13px;font-weight:650;margin-bottom:12px} .rd .foot-col{display:grid;gap:8px;font-size:13.5px;align-content:start} .rd .foot-brand{display:flex;align-items:center;gap:10px} .rd .foot-brand img{width:34px;height:34px;border-radius:10px;display:block} .rd .foot-brand b{color:var(--paper);font-weight:700;font-size:14.5px} .rd .foot p,.rd .foot address{font-size:13.5px;line-height:1.6;margin-top:14px;font-style:normal;max-width:300px} .rd .foot-bottom{border-top:1px solid #232928} .rd .foot-bottom .shell{display:flex;justify-content:space-between;padding-top:18px;padding-bottom:40px;font:500 11.5px var(--mono);letter-spacing:.04em;color:#6E7A75;flex-wrap:wrap;gap:12px} .rd .pop{border-top:1px solid #232928;padding-top:22px;margin-top:8px} .rd .pop h4{margin-bottom:10px} .rd .pop .links{display:flex;flex-wrap:wrap;gap:8px} .rd .pop .links a{font-size:12.5px;border:1px solid #232928;border-radius:999px;padding:7px 12px;background:var(--panel)} /* ---------- floating / sticky CTAs ---------- */ .rd .float{position:fixed;right:18px;bottom:20px;z-index:70;display:flex;flex-direction:column;gap:10px} .rd .float a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(20,24,26,.5)} .rd .float .wa{background:#25D366} .rd .float .call{background:var(--green)} .rd .stickybar{display:none} /* ============================ responsive ================================= */ @media (max-width:1100px){ .rd .grid-app{grid-template-columns:repeat(3,1fr)} .rd .brands{grid-template-columns:repeat(5,1fr)} .rd .foot .shell{grid-template-columns:1fr 1fr 1fr} } @media (max-width:980px){ .rd .hero{grid-template-columns:1fr;gap:34px;padding-top:36px} .rd .hero-copy{min-height:0} .rd .slide{display:none} .rd .slide.on{display:block} .rd .price-grid,.rd .split,.rd .areas,.rd .quote-demo,.rd .final{grid-template-columns:1fr;gap:32px} .rd .final{padding:36px} .rd .steps{grid-template-columns:repeat(2,1fr)} .rd .revs{grid-template-columns:1fr} .rd .nav,.rd .hdr-cta{display:none} .rd .navtoggle{display:block} .rd .hdr .shell{gap:16px} .rd .hdr.open .nav{display:flex;flex-direction:column;gap:2px;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 32px 16px;margin:0} .rd .hdr.open .nav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px} .rd .hdr.open .hdr-cta{display:flex;position:absolute;left:0;right:0;top:100%;transform:translateY(calc(100% - 8px));padding:0 32px 16px;background:var(--bg);border-bottom:1px solid var(--line)} .rd .hdr.open .hdr-cta .b{flex:1} } @media (max-width:820px){ .rd .facts{grid-template-columns:repeat(2,1fr)} .rd .warr{grid-template-columns:1fr} .rd .area-grid{grid-template-columns:repeat(2,1fr)} .rd .foot .shell{grid-template-columns:1fr 1fr} .rd .float{bottom:78px} .rd .stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:69;background:rgba(20,24,26,.96);backdrop-filter:blur(10px);padding:9px 12px;gap:9px;border-top:1px solid #232928} .rd .stickybar a{flex:1;font-size:15px;padding:13px 10px;border-radius:12px} .rd .stickybar .call{background:var(--green);color:#fff} .rd .stickybar .wa{background:#25D366;color:#0B2016} .rd body{padding-bottom:64px} } @media (max-width:680px){ .rd .shell{padding-left:20px;padding-right:20px} .rd .sec,.rd .sec-sm{padding-top:56px;padding-bottom:56px} .rd .faq-shell{padding:56px 20px} .rd .grid-app{grid-template-columns:repeat(2,1fr)} .rd .steps{grid-template-columns:1fr} .rd .brands{grid-template-columns:repeat(3,1fr)} .rd .chips{grid-template-columns:repeat(2,1fr)} .rd .bform .pair{grid-template-columns:1fr} .rd .story-row{grid-template-columns:56px 26px 1fr;gap:12px;padding:12px} .rd .story-row img{width:56px;height:52px} .rd .quote-demo{padding:22px} .rd .bill div{padding:11px 13px;font-size:13px} .rd .final{padding:28px;border-radius:18px} .rd .foot .shell{grid-template-columns:1fr;gap:26px;padding-top:40px} .rd .foot-bottom .shell{padding-bottom:88px} .rd .strip .shell{font-size:11.5px;gap:8px} .rd .strip-right{gap:12px} .rd .slide p:not(.slide-h){font-size:17px} .rd .b{font-size:15px} .rd .b-dark{padding:15px 22px} .rd .stage-nav{width:40px;height:40px} } @media (max-width:420px){ .rd .strip .hide-xs{display:none} .rd .grid-app{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .rd *,.rd *::before,.rd *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ============================================================================ style.css resets. index.html loads style.css BEFORE home.css (the enquiry popup built by W2_initEnquiryPopup() reuses .jobcard/.row2/.btn from there, so style.css cannot simply be dropped). These ten rules are properties style.css sets that home.css never redeclared, so the old skin was leaking onto the new homepage. Each one is a reset, not a new design decision. ========================================================================== */ .rd .eyebrow::before{display:none} /* dark 26x2 bar inside the mint pill */ .rd .mono{font-size:inherit;letter-spacing:inherit;text-transform:none} .rd .hero{background:transparent} /* old pink-white gradient */ .rd .sec-head{max-width:none;margin-bottom:0} /* 620px cap + stray 44px margin */ .rd .steps{counter-reset:none} .rd .steps::before{display:none} /* dashed connector line across the steps */ .rd .faq{max-width:none} /* 760px cap inside a 900px shell */ .rd .faq details[open] summary::after{content:"+"} /* style.css swapped it for an en-dash */ .rd .foot-bottom{padding-top:0;font-family:var(--sans);font-size:inherit;letter-spacing:normal;text-transform:none} .rd .foot-bottom .shell{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em} .rd .form-ok{border:0} .rd h1,.rd .slide-h{font-stretch:normal} /* linker.py emits

inside the AUTOLINK block; make .wrap behave as .shell inside the redesign so a regeneration cannot narrow it. */ .rd .wrap{max-width:var(--shell);margin:0 auto;padding-left:32px;padding-right:32px} @media (max-width:680px){ .rd .wrap{padding-left:20px;padding-right:20px} }