/* Resonant Business Solutions — Keel theme rebuilt from the WordPress (Astra Pro + Elementor Pro) source. Design thesis (kept from source): clean corporate funding consultancy — royal blue #08449F, signal red #ED1D1D, charcoal #252525 on white/mist #F5F5F5, Montserrat throughout. Sections: 1 @font-face · 2 compiled source tokens/base · 3 classes replacing former inline styles · 4 Keel helpers 5 native part styling · 6 spacing scale · 7 responsive (1099 / 921 / 767 like the source) */ /* ===== 1. @font-face (self-hosted, SIL OFL 1.1; variable font covers 400–800 used by the source) ===== */ @font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url("/_media/4043a229-9ebd-49fb-b2e7-b396d3e600fd/original.woff2") format("woff2")} /* ===== 2. tokens + base (from Elementor kit post-1923 + Astra customizer CSS) ===== */ :root{ --brand:#08449F; /* --e-global-color-primary */ --accent:#ED1D1D; /* --e-global-color-secondary / accent */ --ink:#252525; /* --e-global-color-text, headings */ --body:#2D2D2D; /* body text */ --muted:#8E8E8E; /* nav links, quote panel */ --mist:#F5F5F5; /* grey bands */ --steel:#747474; /* "GLOSSARY" */ --white:#FFFFFF; --wrap:1140px; --gutter:10px; --pad-x:20px; --font:"Montserrat",Sans-serif; --radius-btn:10px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body.rs{margin:0;font-family:var(--font);font-size:16px;font-weight:400;line-height:1.857;color:var(--body);background:var(--white);-webkit-font-smoothing:antialiased} .rs img{max-width:100%;height:auto;display:block} .rs a{color:var(--brand);text-decoration:none} .rs a:hover{color:var(--accent)} .rs h1,.rs h2,.rs h3,.rs h4,.rs h5,.rs h6{font-family:var(--font);font-weight:700;color:var(--ink);margin:0 0 20px;line-height:1.3} .rs h1{font-size:64px;line-height:1.4} .rs h2{font-size:32px} .rs h3{font-size:28.8px} .rs h4{font-size:20px;line-height:1.2} .rs p{margin:0 0 25.6px} .rs ul,.rs ol{margin:0 0 25.6px 48px;padding-left:0} .rs strong{font-weight:700} .k-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)} .k-sr,.rs .k-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .k-skip{position:absolute;left:-9999px;top:0} .k-skip:focus{left:10px;top:10px;z-index:100;background:var(--white);padding:8px 12px} /* --- header (Astra primary header: 93px desktop, 83px mobile) --- */ /* Header — Astra primary bar 89px; logo 200×56; menu link pad 0 14px; container 1140 */ .k-header{position:relative;z-index:20;background:var(--white);height:89px;box-shadow:0 1px 0 0 rgba(0,0,0,.06);border-bottom:1px solid #eaeaea} .k-header__in{max-width:1140px;width:100%;margin:0 auto;padding:0;height:100%;display:flex;align-items:center;justify-content:space-between;box-sizing:border-box} .k-header__logo,.k-header .k-logo,a.k-header__logo{display:flex;align-items:center;padding:16px 0;margin:0} .k-header__logo img,.k-header .k-logo img,.k-header img{display:block;width:200px;max-width:200px;height:auto;max-height:none} .k-logo img{width:200px;height:auto} .k-nav-toggle{position:absolute;opacity:0;pointer-events:none} .k-burger{display:none} .k-nav{list-style:none;margin:0;padding:0;display:flex;align-items:center} .k-nav__item{position:relative} .k-nav__link{display:flex;align-items:center;height:89px;padding:0 14px;font-size:14px;font-weight:700;text-transform:uppercase;line-height:1;color:var(--muted)!important} .k-nav__link:hover,.k-nav__link[aria-current="page"],.k-nav__item--current>.k-nav__link{color:var(--ink)!important} .k-nav__item--sub>.k-nav__link::after{content:"";width:7px;height:7px;margin:-4px 0 0 9px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)} .k-sub{list-style:none;margin:0;padding:0;position:absolute;top:100%;left:0;min-width:240px;background:var(--white);border-top:2px solid var(--brand);box-shadow:0 4px 10px -2px rgba(0,0,0,.1);visibility:hidden;opacity:0;transition:opacity .2s} .k-nav__item--sub:hover>.k-sub,.k-nav__item--sub:focus-within>.k-sub{visibility:visible;opacity:1} .k-sub__link{display:block;padding:12px 20px;font-size:14px;font-weight:700;text-transform:uppercase;line-height:1.4;color:var(--muted)!important;border-bottom:1px solid #eaeaea} .k-sub__link:hover{color:var(--ink)!important} /* --- footer (Elementor global footer post-1920) --- */ .k-footer{background:var(--ink);padding:50px 20px;color:#ADADAD;min-height:190px;box-sizing:border-box} .k-footer__in{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:20px;min-height:60px} .k-footer__logo{flex:0 0 20%} .k-footer__logo img{width:200px} .k-footer__addr{flex:1 1 auto;display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.4;margin:0 0 6px} .k-footer__addr img{width:10px;height:auto;opacity:.75} .k-footer__social{display:flex;gap:16px;list-style:none;margin:0 0 4px auto;padding:0} .k-footer__social img{width:24px;height:24px} /* --- page hero band (inner pages: blue band, title left, intro right) --- */ .k-hero{background:var(--brand);color:var(--white);min-height:250px;display:flex;align-items:center;padding:0} .k-hero>.keel-region--hero{flex:1} .k-hero .keel-region--hero{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:20px;padding:0 40px;box-sizing:border-box;width:100%} .k-hero .keel-block--heading{color:var(--white);font-size:4em;line-height:1.4;margin:0;text-align:right;padding:0 10px 0 0;font-weight:700} .k-hero .rich-text{padding:0 10px;color:var(--white);line-height:1.5} .k-hero .rich-text p{margin:0} /* --- CTA band "Connect with us." (Elementor template 2447, used on most pages) --- */ /* Connect — source post-2447: pic 62.524% .cta-pic{height:50vh}; box 36.809% margin 50px 200px 50px -200px pad 40px */ .k-connect{position:relative;display:grid;grid-template-columns:62.524% 36.809%;height:50vh;min-height:50vh;margin:80px 0 0;overflow:visible} .k-connect__pic{grid-column:1;grid-row:1;position:relative;height:50vh;min-height:50vh;background:#1a1a1a} .k-connect__pic img{width:100%;height:100%;object-fit:cover;object-position:center center;position:absolute;inset:0;display:block} .k-connect__box{grid-column:2;grid-row:1;align-self:start;justify-self:stretch;width:auto;margin:50px 200px 50px -200px;background:var(--brand);color:var(--white);padding:40px;position:relative;z-index:1;box-sizing:border-box} .k-connect__title{color:var(--white)!important;font-size:32px;margin:0 0 20px} .k-connect__text{font-size:16px;line-height:1.857;margin:0 0 -25px} .k-connect__text p{margin:0} .k-connect__text strong{color:var(--white)} /* --- shared buttons (Elementor button skin: red, 10px radius, 900 caps 12.8px) --- */ .rs a.button,.rs .k-btn{display:inline-block;font-family:var(--font);font-size:12.8px;font-weight:900;text-transform:uppercase;letter-spacing:1px;line-height:1;padding:18px 30px;border-radius:var(--radius-btn);border:3px solid var(--accent);background:var(--accent);color:var(--white)!important;transition:all .3s} .rs a.button:hover,.rs .k-btn:hover{background:var(--brand);border-color:var(--brand);color:var(--white)!important} .rs a.button--secondary{background:transparent;border-color:var(--white)} .rs a.button--secondary:hover{background:var(--accent);border-color:var(--white)} .rs a.button--primary{background:var(--accent);border-color:var(--accent);color:var(--white)!important} .rs a.button--outline{background:transparent;color:var(--accent)!important;border-color:var(--accent)} .rs a.button--outline:hover{background:var(--accent);color:var(--white)!important} .k-connect .k-btn{border-color:var(--white);margin-top:20px} /* ===== 3. classes that replace former inline styles / Elementor per-element CSS ===== */ /* was style="background-image:url(…pexels-…jpg)" on each portfolio card → image field rendered as */ /* was Elementor dynamic background on blog cards → */ .k-cover{width:100%;height:100%;object-fit:cover} /* ===== 4. Keel helpers ===== */ .keel-region:empty{display:none} .k-hero:not(:has(.keel-block)){display:none} /* pages without the blue header band (thank-you, newsletter) */ .k-band{padding:80px 0} .k-band--mist{background:var(--mist)} .k-band--brand{background:var(--brand);color:var(--white)} .k-center{text-align:center} /* ===== 5. native parts, styled by region ===== */ .rs .keel-block--image{margin:0} .rs .keel-block--image img{width:100%} .rs .rich-text>:last-child{margin-bottom:0} .rs .keel-block--button{margin:0} .keel-cards{display:grid;gap:20px} .keel-cards--2{grid-template-columns:repeat(2,1fr)} .keel-cards--3{grid-template-columns:repeat(3,1fr)} .keel-cards--4{grid-template-columns:repeat(4,1fr)} .columns{display:grid;gap:20px} .columns--1-1{grid-template-columns:1fr 1fr} .columns--1-2{grid-template-columns:1fr 2fr} .columns--2-1{grid-template-columns:2fr 1fr} .columns--1-1-1{grid-template-columns:repeat(3,1fr)} /* --- generic page regions --- */ .keel-region--intro{max-width:1140px;margin:108px auto 0;padding:0 10px;text-align:center} .keel-region--intro .keel-block--heading{margin:0 0 20px} .keel-region--intro .rich-text{text-align:left} .keel-region--intro .rich-text.k-center,.keel-region--intro>.keel-block--richText{text-align:center} .keel-region--split{max-width:1140px;margin:100px auto 0;padding:0 10px} .keel-region--split .columns{align-items:center;gap:40px} .keel-region--body{max-width:1140px;margin:40px auto 0;padding:0 10px} .keel-region--features{max-width:none;margin:118px auto 88px;padding:0 10px} .keel-region--features .keel-cards{gap:10px} .keel-region--features>.keel-block--heading{text-align:center;margin-bottom:40px} .keel-region--features .keel-cards__card{background:var(--mist);padding:40px 30px;text-align:center} .keel-region--features .keel-cards__picture{width:auto;height:40px;margin:0 auto 20px} .keel-region--features .keel-cards__title{font-size:20.8px;line-height:1.3;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);margin:0 0 20px} .keel-region--features .keel-cards__text{margin:0;color:var(--ink);white-space:pre-line} .keel-region--widgets{max-width:1080px;margin:0 auto 73px;padding:108px 161px 130px;background:var(--mist)} .keel-region--widgets>.keel-block--heading{text-align:center;color:var(--brand);margin-bottom:20px} /* --- forms (WPForms look) --- */ .keel-form{font-size:16px} .keel-region--widgets .keel-form{background:transparent;max-width:none;padding:0} .keel-field__options{display:flex;flex-wrap:wrap;gap:6px 18px} .keel-field__choice{display:flex;align-items:center;gap:6px} .keel-field{margin:0 0 30px;border:0;padding:0} .keel-field__label{display:block;font-weight:700;font-size:16px;color:var(--ink);margin:0 0 6px;line-height:1.3} .keel-field__required{color:var(--accent)} .keel-field__input{width:100%;font:inherit;font-size:14px;color:var(--body);background:var(--white);border:1px solid #ccc;border-radius:2px;padding:6px 10px;min-height:44px} textarea.keel-field__input{min-height:120px} .keel-field__hint{font-size:13px;color:var(--muted)} .keel-field__checkbox,.keel-field__radio{display:inline-flex;align-items:center;gap:6px;margin:0 20px 6px 0;font-size:14px} .keel-form__submit{font-family:var(--font);font-size:12.8px;font-weight:900;text-transform:uppercase;letter-spacing:1px;line-height:1;padding:12px 18px;border-radius:var(--radius-btn);border:0;background:var(--accent);color:var(--white);cursor:pointer} .keel-form__submit:hover{background:var(--brand)} /* --- home --- */ /* Home hero — ported from source Elementor post-2387 + custom CSS .bg-image{height:90vh} cols 66.769%/32.546%; photo ONLY on left col (ac91bd5); right col white page bg; glossary #252525 overlaps -10%; left pad 60/80 */ .k-home-hero{position:relative;display:grid;grid-template-columns:66.769% 32.546%;height:90vh;min-height:90vh;overflow:visible;align-items:stretch;background:#fff} .k-home-hero .keel-region--hero_media{grid-column:1;grid-row:1;position:relative;overflow:hidden;min-height:100%;height:90vh;width:100%} .k-home-hero .keel-region--hero_media figure,.k-home-hero .keel-region--hero_media picture{position:absolute;inset:0;margin:0} .k-home-hero .keel-region--hero_media img{width:100%;height:100%;object-fit:cover} .k-home-hero .keel-region--hero_media::after{content:"";position:absolute;inset:0;background:var(--brand);opacity:.6} .k-home-hero .keel-region--hero{grid-column:1;grid-row:1;position:relative;z-index:1;align-self:center;padding:0 80px 0 60px;color:var(--white);max-width:100%;box-sizing:border-box} /* Hero copy — source text widgets; padding (not margin) so box height matches 134 / 77 after collapse */ .k-home-hero .keel-region--hero .rich-text{font-size:1.2em;font-weight:400;line-height:1.2em;margin:0 0 20px} .k-home-hero .keel-region--hero .rich-text p{margin:0;padding:0 0 1.6em} .k-home-hero .keel-region--hero .rich-text:first-child{font-size:2em;font-weight:500;line-height:1.2em;margin:0 0 20px} .k-home-hero .keel-region--hero .rich-text:first-child p{margin:0;padding:0 0 .6em} .k-home-hero .keel-region--hero .keel-block--button{margin-top:0} .k-home-hero .keel-region--hero .rich-text strong{font-weight:700} .k-home-hero .keel-region--hero a.button{background:transparent;border-color:var(--white);border-width:3px} .k-home-hero .keel-region--hero a.button:hover{background:var(--accent)} .k-home-hero .keel-region--glossary{grid-column:2;grid-row:1;align-self:stretch;position:relative;z-index:1;width:100%;margin:20% 0;transform:translateX(-10%);background:#252525;padding:0 40px;color:var(--white);display:flex;flex-direction:column;justify-content:center;box-sizing:border-box} .keel-region--glossary .keel-block--heading:first-child{font-size:3vw;letter-spacing:5.7px;color:#747474;margin:0 0 20px;line-height:1.3} .keel-region--glossary h4.keel-block--heading,.keel-region--glossary .keel-block--heading~.keel-block--heading{font-size:20px;font-weight:700;letter-spacing:2px;color:var(--white);margin:0 0 20px;line-height:1.2;height:0;overflow:visible;text-shadow:0 0 10px rgba(0,0,0,.3)} .keel-region--glossary .rich-text{color:var(--white);margin:0 0 20px;min-height:55px;font-size:16px;line-height:1.857;font-weight:400;padding-top:0;box-sizing:content-box} .keel-region--glossary .rich-text p{margin:0;color:var(--white)}.keel-region--glossary .rich-text:last-child{margin-bottom:0} /* Stats — source col #51168ad margin 80px 0; numbers are H1s (no list markers); labels wrap tall */ .k-stats{background:var(--brand);color:var(--white);padding:80px 0;width:100%} .keel-region--stats{max-width:1140px;margin:0 auto;padding:0 10px;text-align:center} .keel-region--stats .keel-block--heading{color:var(--white);margin:0 0 20px} .keel-region--stats .rich-text{color:var(--white)} .keel-region--stats .rich-text p{margin:0 0 20px} .keel-region--stats ul, .keel-region--stats ol, .keel-region--stats .rich-text ul, .keel-region--stats .rich-text ol{ list-style:none!important;list-style-type:none!important; margin:40px 0 40px!important;margin-left:0!important;padding:0!important;padding-left:0!important; display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:start } .keel-region--stats li{ list-style:none!important;list-style-type:none!important; margin:0!important;padding:0!important;padding-left:0!important; line-height:1.857;color:var(--white);min-height:241px } .keel-region--stats li::marker{content:""!important;font-size:0!important} .keel-region--stats li::before,.keel-region--stats li::after{content:none!important;display:none!important} .keel-region--stats li strong{display:block;font-size:54px;line-height:1.4;margin:0 0 20px;font-weight:700;color:var(--white)!important} .keel-region--stats .rich-text:last-child{font-size:16px;margin-top:20px} /* Art — source #15c7449 33.3% #8E8E8E pad-left 10%; #ff04de3 66.365% margin 40px pad-right 10%; quote 1.3em/1.5em author; mark 115px; awards WP gallery-columns-5 fluid */ .k-art{display:grid;grid-template-columns:33.3% 66.365%;align-items:stretch;min-height:669px} .keel-region--art_quote{background:#8E8E8E;position:relative;display:flex;align-items:center;justify-content:center;padding:0 0 0 10%;min-height:100%} .keel-region--art_quote::before{content:"";position:absolute;top:0;left:0;width:115px;height:115px;background:url("/_media/f520f2cf-328b-4b1a-b198-8b3968a3b27e/original.svg") no-repeat left top/115px 115px} .keel-quote{margin:0;padding:40px;color:var(--white);text-align:left;width:100%;box-sizing:border-box} .keel-region--art_quote .keel-quote__text{text-align:left} .keel-quote__quote{margin:0} .keel-quote__text{font-size:1.3em;font-weight:400;line-height:1.857;margin:0 0 1.6em;color:var(--white)} .keel-quote__name{font-size:1.5em;font-weight:700;color:var(--white)} .keel-quote__name::before{content:"- "} .keel-quote__role{display:block;font-size:14px} .k-art__main{margin:0;padding:40px 10% 40px 40px;display:flex;flex-direction:column;justify-content:center;min-height:100%;box-sizing:border-box} .keel-region--art{margin:0;padding:0} .keel-region--art .keel-block--heading{margin:0 0 20px} .keel-region--art .rich-text{color:var(--ink)} /* Awards — source WP gallery-columns-5; cells ~193px in ~1067px content width @1920 */ .keel-region--art .k-gallery,.keel-region--awards{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;gap:10px;margin:0 0 25px;max-width:1067px} .keel-region--awards{max-width:1067px;margin:0 0 25px;padding:0} .keel-region--awards .keel-block--image{width:100%;max-width:193px;padding:0;box-sizing:border-box;justify-self:center} .keel-region--awards img{display:block;width:100%;max-width:193px;height:auto;margin:0 auto;object-fit:contain} .keel-region--art_cta{margin:0;padding:0} .keel-region--art_cta .rich-text p{margin:0 0 16px} .keel-region--art a.button, .keel-region--art_cta a.button, .k-art__main a.button{padding:10px 20px!important;border:0!important;border-width:0!important;font-size:12.8px;font-weight:900} /* Clients — source #42d8cf1 bg #F5F5F5 pad 80px 40px; carousel --e-image-carousel-slides-to-show:6; alert text col width 85.947%; LEARN HERE pad 18px 30px (source button) */ .k-clients{background:#F5F5F5;padding:80px 40px} .keel-region--clients{text-align:center} .keel-region--clients>.keel-block--heading{margin:0 0 20px;color:var(--ink);font-size:32px} /* Client logos — source slides ~287px wide, natural heights (tallest ~283); spacing 20 via 10px pad */ .k-logos{overflow:hidden;--per:6;min-height:283px;padding:0;width:100%;container-type:inline-size;display:flex;align-items:center} .keel-region--client_logos{display:flex;align-items:center;gap:0;transition:transform .5s ease;will-change:transform;width:max-content;min-height:283px} .keel-region--client_logos .keel-block--image{flex:0 0 calc(100cqw / var(--per));width:calc(100cqw / var(--per));max-width:calc(100cqw / var(--per));padding:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:283px} .keel-region--client_logos .keel-block--image figure, .keel-region--client_logos figure{margin:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 10px;box-sizing:border-box} .keel-region--client_logos img{display:block;width:auto;max-width:100%;height:auto;max-height:283px;object-fit:contain;margin:0 auto} @media (prefers-reduced-motion:reduce){.keel-region--client_logos{transition:none}} /* Alert row — source ~85px tall; LEARN HERE 18px 30px; heading 28.8px */ .keel-region--alert{max-width:100%;width:85.947%;margin:40px auto 0;padding:0;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:40px;text-align:right;min-height:85px} .keel-region--alert .keel-block--heading{grid-column:1;margin:0 0 4px;font-size:28.8px;font-weight:400;line-height:1.3;color:var(--ink)} .keel-region--alert .rich-text{grid-column:1;text-align:end;font-weight:400;font-size:16px;color:var(--ink)} .keel-region--alert .rich-text p{margin:0} .keel-region--alert .keel-block--button{grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:center} .keel-region--alert a.button{padding:18px 30px!important;border:0!important;font-size:12.8px;font-weight:900;min-height:55px;box-sizing:border-box} /* What we do — source #93a1585 margin-top/bottom 80px; cards ~908 content */ .k-services{padding:0;margin:80px 0} .keel-region--services{max-width:1260px;margin:0 auto;padding:0 10px} .keel-region--services>.keel-block--heading{text-align:center;margin:0 0 40px} .keel-region--services .keel-cards{gap:20px} .keel-region--services .keel-cards__card{background:var(--mist);padding:40px 40px 60px;text-align:center} .keel-region--services .keel-cards__picture{height:50px;width:auto;margin:0 auto 20px;display:block;object-fit:contain} .keel-region--services .keel-cards__title{font-size:20.8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);margin:0 0 20px;line-height:1.3} .keel-region--services .keel-cards__text{margin:0;color:var(--ink);line-height:1.857} /* testimonial slider — native Slideshow (quotes) restyled to Elementor testimonial carousel */ /* Testimonial — source #a01bfa8 widget ~1120, text ~984, 4 bullets, author under tip */ .k-testimonials{border:0!important;box-shadow:none!important;background:transparent;margin:0 0 80px} .keel-region--testimonial{max-width:1140px;margin:0 auto;padding:20px 10px 24px;min-height:457px;border:0!important;outline:none!important;box-shadow:none!important} .keel-region--testimonial .keel-slider,.keel-region--testimonial .keel-slider__viewport,.keel-region--testimonial .keel-slider__track{position:relative;background:transparent;border:0!important;box-shadow:none!important;padding:0;overflow:hidden;border-radius:0!important;outline:none!important} .keel-region--testimonial .keel-slider__pause{display:none!important} .keel-region--testimonial .keel-slider__viewport{overflow:hidden;width:100%;position:relative} .keel-region--testimonial .keel-slider__track{display:flex;width:100%} .keel-region--testimonial .keel-slider__slide, .keel-region--testimonial .keel-slider__slide:focus, .keel-region--testimonial .keel-slider__slide:focus-visible{ box-sizing:border-box;flex:0 0 100%;min-width:100%;max-width:100%;padding:0 68px;text-align:center;position:relative; border:none!important;border-width:0!important;border-style:none!important;outline:none!important;box-shadow:none!important;border-radius:0!important;background:transparent!important } .keel-region--testimonial .keel-slider__quote{margin:0 auto;padding:0;color:var(--ink);border:0;background:transparent;max-width:984px} .keel-region--testimonial .keel-slider__quote>p{background:#252525;color:var(--white);padding:20px 20px 28px;position:relative;font-style:italic;font-size:20px;line-height:1.5;margin:0;border-radius:0} .keel-region--testimonial .keel-slider__quote>p::after{content:"";position:absolute;left:50%;bottom:-10px;margin-left:-10px;border:10px solid transparent;border-bottom:0;border-top-color:#252525} .keel-region--testimonial .keel-slider__quote>footer{padding-top:20px;line-height:1.3;font-size:0} .keel-region--testimonial .keel-slider__author{font-size:14px;font-weight:700;color:var(--brand);display:block} .keel-region--testimonial .keel-slider__role{font-size:14px;font-weight:400;color:var(--ink)} /* side arrows (Elementor swiper buttons): light chevrons over the quote, not in a dark pill */ .keel-region--testimonial .keel-slider__controls{position:static;display:flex;justify-content:center;align-items:center;gap:0;background:transparent!important;border:0!important;border-radius:0!important;padding:8px 0 0!important;margin:0;width:auto;height:auto;box-shadow:none;filter:none} .keel-region--testimonial .keel-slider__prev, .keel-region--testimonial .keel-slider__next{position:absolute;top:28%;transform:translateY(-50%);z-index:3;width:28px;height:28px;margin:0;padding:0;border:0;border-radius:0;background:transparent!important;color:rgba(237,237,237,.95)!important;box-shadow:none;opacity:.95} .keel-region--testimonial .keel-slider__prev{left:12px;right:auto} .keel-region--testimonial .keel-slider__next{right:12px;left:auto} .keel-region--testimonial .keel-slider__prev svg, .keel-region--testimonial .keel-slider__next svg{width:20px;height:20px;fill:currentColor;stroke:currentColor} .keel-region--testimonial .keel-slider__dots{display:flex;justify-content:center;align-items:center;gap:8px;background:transparent;padding:0;margin:0;width:auto;height:auto} .keel-region--testimonial .keel-slider__dot{width:8px;height:8px;margin:0;padding:0;border-radius:50%;background:#d0d0d0;border:0;opacity:1;box-shadow:none;transform:none} .keel-region--testimonial .keel-slider__dot[aria-current="true"], .keel-region--testimonial .keel-slider__dot[aria-selected="true"]{background:var(--ink);transform:none;outline:none;box-shadow:none} /* --- about: team grid (collection team) — source post-2652 container 1600; cols ~40/60; portfolio gap 10; card ~305×432 --- */ .k-team{max-width:1600px;width:100%;margin:0 auto 80px;display:grid;grid-template-columns:40% 60%;padding:0;column-gap:0;align-items:start;box-sizing:border-box} .k-team .keel-region--team_intro{padding:10px 0 0 50px} .k-team .keel-region--team_intro .keel-block--heading{margin:0 0 20px} .k-team__grid{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(3,305px);gap:10px;justify-content:start;width:max-content;max-width:100%} .k-team-card a{display:block;position:relative;overflow:hidden;aspect-ratio:305/432;background:var(--mist)} .k-team-card img{width:100%;height:100%;object-fit:cover} .k-team-card__name{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0;text-align:center;color:var(--white)!important;font-size:18px;line-height:1;text-transform:uppercase;opacity:0;transition:opacity .3s} .k-team-card a::after{content:"";position:absolute;inset:0;background:rgba(8,68,159,.6);opacity:0;transition:opacity .3s} .k-team-card a:hover::after,.k-team-card a:focus::after,.k-team-card a:hover .k-team-card__name,.k-team-card a:focus .k-team-card__name{opacity:1} .k-team-card__name{z-index:1} .keel-region--how{max-width:1600px;width:100%;margin:80px auto;padding:26px 0;box-sizing:border-box;min-height:246px} .keel-region--how>.keel-block--heading{text-align:center;margin:0 0 20px;font-size:32px} .keel-region--how .rich-text{max-width:1140px;margin:0 auto;column-count:2;column-gap:30px;padding:0 10px;box-sizing:border-box;font-size:16px;line-height:1.857} /* team member page */ .k-member{max-width:1140px;margin:0 auto;padding:40px 10px 80px} .k-member__back{margin:0 0 40px} .k-member__grid{display:grid;grid-template-columns:480px 1fr;gap:40px;align-items:start} .k-member__grid>div:first-child img{display:block;width:100%;height:auto;aspect-ratio:444/629;object-fit:cover} .k-member__name{font-size:45px;line-height:1.2;margin:0 0 10px} .k-member__role{font-size:18px;color:var(--brand);margin:0 0 30px} .k-member__motto{margin:0 0 30px;padding:0 0 0 20px;border-left:4px solid var(--accent);font-size:20px;font-style:italic} .k-member__links{list-style:none;padding:0} .k-member__links img{display:inline-block;width:18px;height:18px;margin-right:8px;vertical-align:-3px} .k-member__credit{font-size:13px;color:var(--muted)} /* --- portfolio list --- */ .k-portfolio{max-width:1140px;margin:80px auto 0;padding:0 10px;display:grid;gap:40px} .k-pcard{display:grid;grid-template-columns:33.3% 1fr;background:var(--mist)} .k-pcard__pic{width:100%;height:100%;object-fit:cover;min-height:300px} .k-pcard__body{padding:40px} .k-pcard__title{font-size:22px;color:var(--brand);text-transform:uppercase;margin:0 0 6px;line-height:1.3} .k-pcard__client{font-size:16px;margin:0 0 20px} .k-pcard__label{font-weight:700;color:var(--ink);text-transform:uppercase;margin:0} .k-pcard__text{font-size:14px;line-height:1.7} /* --- testimonials grid --- */ .k-tgrid{max-width:1140px;margin:80px auto 0;padding:0 10px;display:grid;grid-template-columns:1fr 1fr;gap:30px} .k-tcard{background:var(--mist);position:relative} .k-tcard__title{background:var(--ink);color:var(--white)!important;font-size:18px;padding:20px 30px;margin:0} .k-tcard__body{padding:30px;font-size:14px;line-height:1.7} .k-tcard__body::before{content:"\201C";display:block;font-size:60px;line-height:.5;color:var(--accent);opacity:.5} .k-tcard__name{font-weight:700;margin:20px 0 0;color:var(--ink)} .k-tcard__role,.k-tcard__org{margin:0} /* --- blog --- */ .k-blog{max-width:1140px;margin:40px auto 0;padding:0 10px;display:grid;grid-template-columns:66.6% 1fr;gap:20px} .k-post-card{display:grid;grid-template-columns:30% 1fr;background:var(--white);margin:0 0 30px;box-shadow:0 0 10px rgba(0,0,0,.08)} .k-post-card__pic{width:100%;height:100%;object-fit:cover;min-height:200px} .k-post-card__body{padding:20px 30px} .k-post-card__title{font-size:20px;margin:0 0 10px} .k-post-card__title a{color:var(--ink)} .k-post-card__excerpt{font-size:14px;line-height:1.7} .k-aside{background:var(--mist);padding:20px 30px} .k-aside__title{font-size:22px;text-align:center} .k-aside__cats{list-style:none;margin:0 0 30px;padding:0;font-size:14px} .k-aside .k-connect__box{position:static;width:auto;margin:0} .k-pager{display:flex;gap:10px;margin:0 0 40px} .k-post{max-width:1140px;margin:0 auto;padding:40px 10px 0} .k-post__title{font-size:32px;margin:0 0 30px} .k-post__body img{margin:0 0 25px} .k-post__author{font-weight:700;margin:40px 0} .k-post__nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #eaeaea;padding:20px 0 80px} .k-post__nav a{font-size:14px;font-weight:700;color:var(--ink);max-width:45%} .k-post__nav span{display:block;font-size:12px;color:var(--muted);text-transform:uppercase} /* --- newsletter page (popups rebuilt inline: #plans, #monthly, #annual) --- */ .keel-region--plans{max-width:1140px;margin:80px auto 0;padding:0 10px;text-align:center} .keel-region--plans .columns{gap:40px;margin:40px 0} .keel-region--plans .column{background:var(--mist);padding:40px} /* ===== 5b. page-specific hooks (body class rs--{page key} from the canonical URL; part classNames set in the page data) ===== */ /* contact: two centred booking columns (source section padding 80px 0, h3 28.8px) */ .rs--contact .keel-region--split{margin:0 auto;padding:80px 10px} .rs--contact .keel-region--split .column{text-align:center;padding:0 40px} .rs--contact .keel-region--split .keel-block--heading{margin:0 0 20px} .rs--contact .keel-region--split a.button{margin-top:20px;padding:18px 30px;border-width:2px} /* button style "brand": blue (Labourly "Learn more") */ .rs a.button--brand{background:var(--brand);border-color:var(--brand)} .rs a.button--brand:hover{background:var(--accent);border-color:var(--accent)} /* technology hero: dark band, white box left, red-tinted photo right */ .k-tech-hero{display:grid;grid-template-columns:2fr 1fr;background:var(--ink);min-height:805px;margin:0 -10px} .k-tech-hero>.column:first-child{align-self:center;background:var(--white);margin:60px -60px 60px 60px;padding:100px 60px;position:relative;z-index:2} .k-tech-hero>.column:first-child .rich-text:first-child{font-size:25.6px;line-height:1.7} .k-tech-hero>.column:first-child .rich-text{font-size:12.8px;font-weight:700;line-height:1.85;margin:0 0 40px} .k-tech-hero>.column:first-child .rich-text:first-child{font-weight:400;margin-bottom:60px} .k-tech-hero>.column:last-child{position:relative;overflow:hidden} .k-tech-hero>.column:last-child .keel-block--image,.k-tech-hero>.column:last-child picture{position:absolute;inset:0;margin:0} .k-tech-hero>.column:last-child img{width:100%;height:100%;object-fit:cover} .k-tech-hero>.column:last-child::after{content:"";position:absolute;inset:0;z-index:1;background:var(--accent);opacity:.55;mix-blend-mode:multiply;pointer-events:none} .k-band-brand{background:var(--brand);color:var(--white);text-align:center;padding:60px 20px;margin:0 -10px} .k-band-brand h2{color:var(--white);font-size:38.4px;max-width:1000px;margin:0 auto 20px} .k-band-brand h4{color:var(--white);font-size:16px;text-transform:uppercase;letter-spacing:1px;margin:0} .rs--technology .keel-region--intro{margin-top:0;max-width:none;padding:0} .rs--technology .k-band-brand{padding:90px 20px;min-height:340px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;margin:0} .k-showcase{align-items:center;padding:60px 0} .k-showcase{padding:100px 10px} .k-showcase>.column:first-child .keel-block--image:first-child img{width:300px} .k-showcase>.column:last-child img{width:100%} .rs--technology .keel-region--split{margin:80px auto 0;max-width:1140px;padding:0 10px} .rs--technology .k-showcase{padding:100px 10px;min-height:650px;box-sizing:border-box} /* thank-you: photo band + mist band */ .k-band-img{margin:0 -10px 60px;height:400px;overflow:hidden} .k-band-img picture,.k-band-img img{width:100%;height:100%;object-fit:cover} .rs--thankyou .keel-region--intro{max-width:none;margin-top:0} .rs--thankyou .keel-region--intro>:not(.k-band-img){max-width:1140px;margin-left:auto;margin-right:auto} .k-band-mist{background:var(--mist);padding:60px 20px 20px;text-align:center;margin:60px -10px 0} .k-band-mist-end{display:block;width:max-content;margin:0 auto;} .rs--thankyou .keel-region--body{max-width:none;padding:0 0 60px;background:var(--mist);margin-top:60px} .rs--thankyou .k-band-mist{margin-top:0} /* newsletter — source post-6347: stacked intro, wide image, plans overlap -80, CTA ~210 */ .rs--resonate-newsletter .keel-region--intro{margin:0 auto;padding:120px 20px 0;max-width:1100px;text-align:left;min-height:1070px;box-sizing:border-box} .rs--resonate-newsletter .k-split-intro{ display:grid!important;grid-template-columns:1fr!important;gap:0;align-items:start } .rs--resonate-newsletter .k-split-intro>.column{width:100%;max-width:100%} .rs--resonate-newsletter .k-split-intro h1{font-size:28.8px;line-height:1.3;color:var(--ink);margin:0 0 20px} .rs--resonate-newsletter .k-split-intro .rich-text{font-size:16px;line-height:1.7;margin:0 0 20px} .rs--resonate-newsletter .k-sticker{width:108px;margin:0 0 20px} .rs--resonate-newsletter .k-sticker img{width:108px;height:auto;display:block} .rs--resonate-newsletter .k-wide-pic{margin:0 0 20px;display:block} .rs--resonate-newsletter .k-wide-pic img{width:100%;max-height:none;height:auto;object-fit:cover;display:block} .rs--resonate-newsletter .keel-region--features{ max-width:1140px;margin:-80px auto 0;padding:0 10px;position:relative;z-index:2 } .rs--resonate-newsletter .keel-region--features>.keel-block--richText{ max-width:1140px;margin:40px auto 0;text-align:center;font-size:16px;line-height:1.7 } .k-split-intro{align-items:end;gap:60px} .k-split-intro h1{font-size:28.8px;color:var(--ink);margin:0} .k-wide-pic{margin:40px 0 0} .k-wide-pic img{width:100%;max-height:520px;object-fit:cover} .k-sticker{width:90px;margin:0 0 20px} .k-boxes{grid-template-columns:1fr auto 1fr!important;align-items:center;gap:30px} .k-boxes>.column:not(:nth-child(2)){background:var(--brand);color:var(--white);padding:40px;border-radius:10px;text-align:center} .k-boxes>.column .keel-block--image{width:48px;margin:0 auto 20px} .k-boxes .rich-text,.k-boxes .rich-text strong{color:var(--white)} .k-boxes>.column:nth-child(2) .keel-block--image{width:40px} .k-band-grey{background:#E8E8E8;margin:0;padding:60px 20px 24px;text-align:center} .k-band-grey-end{display:block;background:#E8E8E8;margin:0;padding:10px 0 60px;text-align:center} .rs--resonate-newsletter .keel-region--body{min-height:210px} .rs--resonate-newsletter .keel-region--body{max-width:none;margin:0;padding:0} .rs--resonate-newsletter .keel-region--body .k-band-grey{margin:0;font-size:2em} /* ===== 6. spacing scale ===== */ .k-mt-0{margin-top:0}.k-mt-20{margin-top:20px}.k-mt-40{margin-top:40px}.k-mt-80{margin-top:80px} /* ===== 7. responsive (source breakpoints: 1099 tablet, 1100 Astra header (was 921), 767 mobile) ===== */ @media (max-width:1099px){.k-logos{--per:2}} @media (max-width:1099px){ .k-home-hero{grid-template-columns:1fr;height:auto;min-height:0;overflow:visible} .k-home-hero .keel-region--hero_media{grid-column:1;grid-row:1;height:auto;min-height:min(80vw,800px)} .k-home-hero .keel-region--hero{grid-column:1;grid-row:1;padding:clamp(120px,22vw,235px) 40px clamp(100px,18vw,200px);align-self:end} .k-home-hero .keel-region--glossary{grid-column:1;grid-row:2;transform:none;width:90%;margin:-100px auto 20px;padding:40px} .keel-region--glossary .keel-block--heading:first-child{font-size:5vw;letter-spacing:5.7px} .k-connect{grid-template-columns:50% 50%;height:auto;min-height:0} .k-connect__pic{height:50vh;min-height:50vh} .k-connect__box{margin:30px 50px 30px -50px;width:auto} .k-art{grid-template-columns:1fr} .keel-region--art_quote{padding:40px} .k-art__main{margin:0;padding:40px} .keel-cards--4,.keel-cards--3{grid-template-columns:repeat(2,1fr)} .k-team{grid-template-columns:1fr;padding:0 20px} } @media (max-width:1100px){ /* was 921px; source Astra header break_point 1100 */ .k-header{height:83px} .k-header__in{padding:0 0 0 0} .k-logo img{width:130px} .k-burger{display:flex;width:46px;height:46px;margin-right:0;align-items:center;justify-content:center;border:1px solid var(--brand);border-radius:6px;cursor:pointer} .k-burger__bar,.k-burger__bar::before,.k-burger__bar::after{display:block;width:18px;height:2px;background:var(--brand);position:relative} .k-burger__bar::before,.k-burger__bar::after{content:"";position:absolute;left:0} .k-burger__bar::before{top:-6px}.k-burger__bar::after{top:6px} .k-header__nav{display:none;position:absolute;top:83px;left:0;right:0;background:var(--white);box-shadow:0 4px 10px rgba(0,0,0,.1)} .k-nav-toggle:checked~.k-header__nav{display:block} .k-nav{flex-direction:column;align-items:stretch} .k-nav__link{height:auto;padding:14px 20px;border-bottom:1px solid #eaeaea} .k-sub{position:static;visibility:visible;opacity:1;box-shadow:none;border:0} .k-sub__link{padding-left:40px} } @media (max-width:767px){ .keel-region--awards{flex-direction:column;align-items:center;gap:20px;max-width:none} .keel-region--awards .keel-block--image{flex:none;width:auto;max-width:300px;padding:0} .keel-region--awards img{max-width:300px} .k-art__main{padding:20px} .k-logos{--per:1} .rs h1{font-size:31.2px} .k-hero{padding:38px 0} .k-hero .keel-region--hero{grid-template-columns:1fr;row-gap:10px} .k-hero .keel-block--heading{font-size:31.2px;text-align:left;padding:0 20px} .k-hero .rich-text{padding:0 20px} .k-home-hero{height:auto;min-height:0} .k-home-hero .keel-region--hero_media{height:auto;min-height:480px} .k-home-hero .keel-region--hero{padding:235px 20px 200px;text-align:left} .k-home-hero .keel-region--hero .rich-text:first-child{font-size:20px} .k-home-hero .keel-region--hero .rich-text:first-child p{margin:0 0 24px} .k-home-hero .keel-region--hero .rich-text{font-size:16px} .k-home-hero .keel-region--hero .rich-text p{margin:0 0 30px} .k-home-hero .keel-region--hero .keel-block--button{display:block;text-align:center} .k-home-hero .keel-region--glossary{transform:none;width:80%;margin:-50px auto 20px;padding:40px} .keel-region--glossary .keel-block--heading:first-child{font-size:8vw;letter-spacing:2px} .k-connect{grid-template-columns:1fr;height:auto!important;min-height:0!important} .k-connect__pic{grid-column:1;grid-row:1;height:50vh;min-height:0;max-height:none} .k-connect__box{grid-column:1;grid-row:2;margin:-40px 10px 30px;width:auto;justify-self:stretch} .keel-region--alert{width:100%;text-align:center;grid-template-columns:1fr;gap:20px} .keel-region--alert .keel-block--button{grid-column:1;grid-row:auto;justify-self:center} .keel-region--alert .rich-text{text-align:center} .keel-region--awards{grid-template-columns:repeat(3,1fr)} .k-art{min-height:0} .k-art__main{margin:0;padding:20px;min-height:0} .keel-region--art_quote{padding:20px;min-height:0} .keel-region--stats .rich-text ul{grid-template-columns:1fr;gap:60px} .k-stats{padding:40px 0} .keel-region--stats{padding:0 40px} .keel-region--art{margin:40px 20px;padding:0} .keel-region--awards{flex-wrap:wrap} .keel-region--alert{grid-template-columns:1fr;text-align:center;margin:40px 30px 0} .keel-region--alert .keel-block--button{grid-column:1;grid-row:auto;justify-self:center;margin-top:20px} .keel-cards--2,.keel-cards--3,.keel-cards--4,.columns--1-1,.columns--1-2,.columns--2-1,.columns--1-1-1{grid-template-columns:1fr} .keel-region--testimonial .keel-slider__slide{padding:0 36px} .keel-region--testimonial .keel-slider__prev{left:4px} .keel-region--testimonial .keel-slider__next{right:4px} .keel-region--testimonial .keel-slider__prev,.keel-region--testimonial .keel-slider__next{top:22%} .keel-region--how .rich-text{column-count:1;padding:0} .keel-region--how,.keel-region--intro{margin-top:20px;padding:0 20px} .k-team{margin-top:20px;padding:0} .k-team__grid{grid-template-columns:1fr;gap:10px} /* connect mobile handled above */ .k-connect__pic{height:300px} .k-connect__box{grid-column:1;grid-row:2;width:auto;margin:-60px 30px 0;padding:40px} .k-footer__in{flex-direction:column;align-items:center;text-align:center} .k-footer__logo{flex:none} .k-pcard,.k-post-card,.k-blog,.k-tgrid,.k-member__grid{grid-template-columns:1fr} .keel-region--widgets{padding:40px 20px;margin-bottom:40px} .k-tech-hero{grid-template-columns:1fr} .k-tech-hero>.column:first-child{margin:30px 20px;padding:40px 30px} .k-tech-hero>.column:last-child{min-height:300px} .k-band-brand h2{font-size:24px} .k-boxes{grid-template-columns:1fr!important} .rs--contact .keel-region--split{padding:40px 10px} .k-band-img{height:200px} } /* --- team archive list (/team) — Astra blog-layout-1 style --- */ .k-team-archive{max-width:910px;margin:0 auto 60px;padding:0 20px} .k-team-archive__card{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;padding:40px 0;border-bottom:1px solid #eaeaea} .k-team-archive__thumb{max-width:444px} .k-team-archive__card:first-child{padding-top:20px} .k-team-archive__thumb img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:444/629} .k-team-archive__title{margin:0 0 12px;font-size:28.8px;line-height:1.3} .k-team-archive__title a{color:var(--ink)!important} .k-team-archive__title a:hover{color:var(--brand)!important} .k-team-archive__role{margin:0 0 16px;font-size:14px;color:var(--muted)} .k-team-archive__more{font-size:14px;font-weight:700;color:var(--brand)!important;text-transform:none} .rs--team-list .k-hero{padding:60px 0 20px} .rs--team-list .k-hero .keel-block--heading{text-align:center} .rs--team-list .k-hero .rich-text{text-align:center;max-width:700px;margin:0 auto} @media (max-width:767px){ .k-team-archive__card{grid-template-columns:1fr;gap:16px;padding:28px 0} .k-team-archive__thumb{max-width:320px;margin:0 auto} } /* --- 404 (Astra error-404 layout-1) --- */ .k-404{min-height:50vh;display:flex;align-items:center;justify-content:center;padding:80px 20px;background:var(--white)} .k-404__inner{max-width:720px;width:100%;text-align:center;margin:0 auto} .k-404 .keel-block--heading{font-size:48px;line-height:1.2;margin:0 0 20px;color:var(--ink);text-align:center} .k-404 .rich-text{font-size:18px;color:var(--body);margin:0 0 24px;text-align:center} .k-404 .rich-text p{margin:0 0 12px} .k-404 .keel-block--button{margin-top:12px} .k-404 a.button{padding:10px 20px!important} .rs--404 .k-hero{display:none} @media (max-width:767px){.k-404 .keel-block--heading{font-size:31.2px}} /* === second-pass 2026-10-18 === */ /* funding-community: source uses 50px brand icons in a narrow column beside the heading */ .rs--funding-community .keel-region--body{max-width:1140px;margin:40px auto 0;padding:0 10px} .rs--funding-community .keel-region--body>.keel-block--columns, .rs--funding-community .keel-region--body>.columns{margin:0 0 20px} .rs--funding-community .keel-region--body .columns--1-1{grid-template-columns:67px 1fr;gap:20px;align-items:center;max-width:1140px} .rs--funding-community .keel-region--body .columns--1-1 .keel-block--image, .rs--funding-community .keel-region--body .columns--1-1 .keel-block--image figure{margin:0;width:50px} .rs--funding-community .keel-region--body .columns--1-1 .keel-block--image img{display:block;width:50px;height:50px;object-fit:contain} .rs--funding-community .keel-region--body .columns--1-1 .keel-block--heading, .rs--funding-community .keel-region--body .columns--1-1 h3{margin:0;font-size:24px;line-height:1.3;font-weight:700;text-transform:uppercase;letter-spacing:normal;color:var(--brand)!important} .rs--funding-community .keel-region--body>.keel-block--richText{max-width:1140px;margin:0 0 20px} .rs--funding-community .keel-region--body>.keel-block--button{margin:0 0 68px} /* app-development: source Elementor icon boxes are ~50px icons in a 3-col row (not full-bleed cards) */ .rs--app-development .keel-region--split .keel-cards{gap:16px;align-items:start} .rs--app-development .keel-region--split .keel-cards__card{background:transparent;padding:10px 8px;box-shadow:none;text-align:center} .rs--app-development .keel-region--split .keel-cards__picture{height:50px;width:auto;margin:0 auto 12px;display:flex;align-items:center;justify-content:center} .rs--app-development .keel-region--split .keel-cards__picture img, .rs--app-development .keel-region--split .keel-cards img{display:block;width:auto;height:50px;max-width:60px;object-fit:contain;margin:0 auto} .rs--app-development .keel-region--split .keel-cards__title{font-size:14px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin:0;color:var(--ink)} .rs--app-development .keel-region--split .keel-cards__text{display:none} /* technology mobile: keep showcase stacked cleanly */ .rs--technology .k-showcase{align-items:center} .rs--technology .k-tech-hero img{width:100%;height:auto;object-fit:cover} /* about-us mobile: tighter team cards */ @media (max-width:767px){ .rs--about .k-team__grid{gap:20px} .rs--about .k-team__card img{width:100%;height:auto} .rs--app-development .keel-region--split .columns--1-1{grid-template-columns:1fr} .rs--app-development .keel-region--split .keel-cards--3{grid-template-columns:repeat(3,1fr);gap:8px} .rs--app-development .keel-region--split .keel-cards__picture img, .rs--app-development .keel-region--split .keel-cards img{height:40px;max-width:48px} .rs--app-development .keel-region--split .keel-cards__title{font-size:11px} .rs--funding-community .keel-region--body .columns--1-1{grid-template-columns:50px 1fr;gap:12px} .rs--funding-community .keel-region--body .columns--1-1 .keel-block--heading, .rs--funding-community .keel-region--body .columns--1-1 h3{font-size:18px} .k-member__grid{grid-template-columns:1fr} .k-member__name{font-size:31.2px} .k-art__main,.keel-region--art_quote{min-height:0} /* testimonials mobile: less vertical padding on quote cards */ .rs--testimonials .k-tcard__body{padding:20px} .rs--testimonials .k-tcard__body::before{font-size:48px} .rs--testimonials .k-tgrid{gap:20px;margin-top:40px} .keel-region--testimonial .keel-slider__quote>p{font-size:18px;padding:16px} } /* Newsletter modals (Foxbridge pattern) — forms leave document flow */ html.k-modal-open{overflow:hidden} .k-modal{box-sizing:border-box;width:min(640px,calc(100% - 24px));max-width:none;max-height:calc(100% - 24px);margin:auto;padding:0;border:0;border-top:6px solid var(--brand);border-radius:0;background:var(--white);color:var(--ink);font-family:inherit;overflow:auto;overscroll-behavior:contain;box-shadow:0 24px 64px rgba(0,0,0,.35)} .k-modal::backdrop{background:rgba(37,37,37,.72)} .k-modal[open]{animation:k-modal-in .22s ease-out} @keyframes k-modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .k-modal__panel{position:relative;padding:clamp(28px,5vw,48px)} .k-modal__close{position:absolute;top:6px;right:6px;width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ink);font:400 30px/1 inherit;cursor:pointer} .k-modal__close:hover{color:var(--brand)} .k-modal .keel-region{display:block} .k-modal h2{font-size:28px;line-height:1.25;margin:0 48px 16px 0} .k-modal h3{font-size:20px;margin:0 0 16px} .k-modal .keel-form{display:flex;flex-wrap:wrap;gap:16px} .k-modal .keel-field{flex:1 1 100%;min-width:0;margin:0} .k-modal .keel-block--button{margin-top:16px} .rs--resonate-newsletter .keel-region--widgets, .rs--resonate-newsletter .keel-region--plans{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #k-modal-plans{width:min(900px,calc(100% - 24px))} #k-modal-plans .columns--1-1{grid-template-columns:1fr 1fr;gap:24px} #k-modal-plans .keel-block--image img{max-width:120px;height:auto;margin:0 auto;display:block} #k-modal-plans{text-align:center} @media (prefers-reduced-motion:reduce){.k-modal[open]{animation:none}} /* === style-fidelity 2026-10-19 === */ /* App-dev: source colors the lead h3 brand blue; labels stay ink */ .rs--app-development .keel-region--split .columns--1-1>.column:first-child .keel-block--heading, .rs--app-development .keel-region--split .columns--1-1>.column:first-child h3{color:var(--brand)!important;font-size:28.8px} .rs--app-development .keel-region--intro .keel-block--heading, .rs--app-development .keel-region--intro h2{color:var(--ink);font-size:32px} /* Technology: outline Find out more stays outline; showcase Learn More is brand */ .rs--technology .keel-region--intro .k-tech-hero .button--outline{background:transparent;color:var(--accent)!important;border-color:var(--accent)} /* Body rich-text fidelity — size/rhythm only; colour INHERITS so hero/CTA/glossary stay white */ .rs .rich-text,.rs .keel-block--richText{font-size:16px;line-height:1.857} .rs .rich-text p{margin:0 0 25.6px} .rs .rich-text ul,.rs .keel-block--richText ul{margin:0 0 25.6px 48px;padding-left:0;list-style:disc} .rs .rich-text li{margin:0 0 0;line-height:1.857} /* Team member: charcoal title band (source Elementor dark wrap) */ .k-member__banner{background:var(--ink);color:var(--white);padding:60px 20px;margin:0 0 40px} .k-member__banner-in{max-width:1140px;margin:0 auto} .k-member__banner .k-member__name{color:var(--white)!important;font-size:45px;line-height:1.4;margin:0 0 8px} .k-member__banner .k-member__role{color:var(--white)!important;font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:0} .k-member{max-width:1140px;margin:0 auto;padding:0 10px 80px} .k-member__back{margin:20px 0 0;padding:0 10px;max-width:1140px;margin-left:auto;margin-right:auto} .k-member__back .k-btn,.k-member__back a.button{background:transparent;color:var(--accent)!important;border:3px solid var(--accent);font-size:12.8px;padding:12px 20px} .k-member__grid{display:grid;grid-template-columns:480px 1fr;gap:40px;align-items:start;padding:0 10px} .k-member__grid>div:first-child img{display:block;width:100%;height:auto;aspect-ratio:444/629;object-fit:cover} .k-member__links a{color:var(--brand);font-size:16px} .k-member__links a:hover{color:var(--accent)} /* Team archive — Astra blog-layout-1: large pad, 32px title, red Read More */ .k-team-archive{max-width:770px;margin:0 auto 60px;padding:0} .k-team-archive__card{display:grid;grid-template-columns:1fr;gap:20px;align-items:start;padding:85px 107px;border-bottom:1px solid #eaeaea} .k-team-archive__card:first-child{padding-top:85px} .k-team-archive__thumb{max-width:444px} .k-team-archive__thumb img{width:100%;height:auto;display:block;object-fit:cover;aspect-ratio:444/629} .k-team-archive__title{margin:0 0 12px;font-size:32px;line-height:1.3;font-weight:700} .k-team-archive__title a{color:var(--ink)!important} .k-team-archive__title a:hover{color:var(--brand)!important} .k-team-archive__role{margin:0 0 8px;font-size:14px;color:var(--muted)} .k-team-archive__by{margin:0 0 16px;font-size:14px;color:var(--muted)} .k-team-archive__more{font-size:16px;font-weight:400;color:var(--accent)!important;text-transform:none} .k-team-archive__more:hover{color:var(--brand)!important} .rs--team-list .k-hero{padding:60px 0 20px;background:var(--white);min-height:0;color:var(--ink)} .rs--team-list .k-hero .keel-block--heading{text-align:center;color:var(--ink)!important;font-size:32px} .rs--team-list .k-hero .rich-text{text-align:center;max-width:700px;margin:0 auto;color:var(--body)} /* Testimonials mobile: denser source uses large stacked blocks — give cards more air + 16px body */ @media (max-width:767px){ .rs--testimonials .k-tgrid{grid-template-columns:1fr;gap:40px;margin-top:40px;padding:0 20px} .rs--testimonials .k-tcard__title{font-size:16px;padding:16px 20px} .rs--testimonials .k-tcard__body{padding:28px 20px 40px;font-size:16px;line-height:1.857} .rs--testimonials .k-tcard__body::before{font-size:48px} .rs--technology .k-showcase{gap:24px} .rs--technology .k-tech-hero>.column:first-child{margin:20px;padding:30px 24px} .rs--technology .k-tech-hero>.column:last-child{min-height:240px} .rs--app-development .keel-region--split{padding:0 16px} .rs--app-development .keel-region--intro{padding:0 20px} .k-member__grid{grid-template-columns:1fr;padding:0 20px} .k-member__banner{padding:40px 20px} .k-member__banner .k-member__name{font-size:31.2px} .k-team-archive__card{padding:48px 20px} .k-team-archive{max-width:100%} } /* Footer fidelity */ .k-footer{background:var(--ink);padding:50px 20px;color:#ADADAD;min-height:190px;box-sizing:border-box} .k-footer__addr{color:#ADADAD} /* === bugfix-hero-contrast 2026-10-19 === */ /* Dark-band text must stay white (reinforces inheritance after fidelity pass) */ .k-hero .rich-text,.k-hero .rich-text p,.k-hero .keel-block--richText,.k-hero .keel-block--richText p{color:var(--white)!important} .k-home-hero .keel-region--hero .rich-text,.k-home-hero .keel-region--hero .rich-text p{color:var(--white)!important} .keel-region--glossary .rich-text,.keel-region--glossary .rich-text p{color:var(--white)!important} .keel-region--stats .rich-text,.keel-region--stats .rich-text p,.keel-region--stats .rich-text li{color:var(--white)!important} .k-connect__box,.k-connect__text,.k-connect__text p,.k-connect .rich-text,.k-connect .rich-text p{color:var(--white)!important} .k-connect__text strong,.k-connect .rich-text strong{color:var(--white)!important} .k-boxes .rich-text,.k-boxes .rich-text p,.k-boxes .rich-text strong{color:var(--white)!important} .k-band-brand,.k-band-brand h2,.k-band-brand h4,.k-band-brand .rich-text,.k-band-brand .rich-text p{color:var(--white)!important} .k-member__banner,.k-member__banner .k-member__name,.k-member__banner .k-member__role{color:var(--white)!important} .k-tcard__title{color:var(--white)!important} .k-footer,.k-footer a,.k-footer__addr{color:#ADADAD} .k-footer a:hover{color:var(--white)} /* About Us team grid — source post-2652 (overrides any earlier fixed-px tuning) */ .k-team{max-width:1600px;width:100%;margin:0 auto 80px;display:grid;grid-template-columns:40% 60%;padding:0;column-gap:0;align-items:start;box-sizing:border-box} .k-team .keel-region--team_intro{padding:10px 0 0 50px} .k-team__grid{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(3,305px);gap:10px;justify-content:start;width:max-content;max-width:100%} .k-team-card a{display:block;position:relative;overflow:hidden;aspect-ratio:305/432;background:var(--mist)} .k-team-card img{width:100%;height:100%;object-fit:cover} @media (max-width:1099px){ .k-team{grid-template-columns:1fr;padding:0 40px} .k-team .keel-region--team_intro{padding:10px 20px 0 40px} .k-team__grid{max-width:100%} } @media (max-width:767px){ .k-team{padding:0 20px;margin:20px auto 40px} .k-team .keel-region--team_intro{padding:0} .k-team__grid{grid-template-columns:1fr;gap:10px;max-width:320px;margin:0 auto} } /* App Development body rhythm — source post-2609: intro ~238, icons section 495, margins 80 */ .rs--app-development .keel-region--intro{margin:80px auto;max-width:1600px;padding:0 10px;min-height:238px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center} .rs--app-development .keel-region--intro .keel-block--heading{margin:0 0 20px;font-size:32px;text-align:center} .rs--app-development .keel-region--split{max-width:1600px;margin:0 auto 80px;padding:0 10px;min-height:495px;box-sizing:border-box} /* App Development — source post-2609: container max 1600; 50/50; quote pad-left 20 + lh 1.7em; icons 50px */ .rs--app-development .keel-region--split .columns--1-1{grid-template-columns:1fr 1fr;gap:20px;align-items:center} .rs--app-development .keel-region--split .columns--1-1>.column:first-child{margin:0 10px 0 0} .rs--app-development .keel-region--split .columns--1-1>.column:first-child .keel-block--heading, .rs--app-development .keel-region--split .columns--1-1>.column:first-child h3{color:var(--brand)!important;font-size:28.8px;line-height:1.7em;font-weight:400;padding:0 0 0 20px;margin:0} .rs--app-development .keel-region--split .keel-cards{gap:16px;align-items:start;margin:0 0 20px} .rs--app-development .keel-region--split .keel-cards__card{background:transparent;padding:10px 8px;box-shadow:none;text-align:center} .rs--app-development .keel-region--split .keel-cards__picture{height:50px;width:auto;margin:0 auto 12px;display:flex;align-items:center;justify-content:center} .rs--app-development .keel-region--split .keel-cards__picture img, .rs--app-development .keel-region--split .keel-cards img{display:block;width:auto;height:50px;max-width:60px;object-fit:contain;margin:0 auto} .rs--app-development .keel-region--split .keel-cards__title{font-size:14px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;margin:0;color:var(--ink)} .rs--app-development .keel-region--split .keel-cards__text{display:none} @media (max-width:767px){ .rs--app-development .keel-region--split{padding:24px 16px 48px} .rs--app-development .keel-region--split .columns--1-1{grid-template-columns:1fr} .rs--app-development .keel-region--split .columns--1-1>.column:first-child .keel-block--heading{padding:0} .rs--app-development .keel-region--split .keel-cards--3{grid-template-columns:repeat(3,1fr);gap:12px 8px} .rs--app-development .keel-region--split .keel-cards__picture{height:40px;margin-bottom:12px} .rs--app-development .keel-region--split .keel-cards__picture img, .rs--app-development .keel-region--split .keel-cards img{height:40px;max-width:48px} } /* Funding community — source post-2561: heading ~202 (m 80); body lists Astra 48px disc */ .rs--funding-community .keel-region--intro{margin:80px auto 80px;max-width:1140px;padding:0 10px} .rs--funding-community .keel-region--intro .keel-block--heading, .rs--funding-community .keel-region--intro h2{font-size:2em;text-align:center;margin:0;line-height:1.3} .rs--funding-community .keel-region--body{max-width:1140px;margin:0 auto 80px;padding:0 10px} .rs--funding-community .keel-region--body .rich-text ul{margin:0 0 25.6px 48px;padding-left:0;list-style:disc} .rs--funding-community .keel-region--body .rich-text li{line-height:1.857;margin:0} .rs--funding-community .keel-region--body>.keel-block--columns, .rs--funding-community .keel-region--body>.columns{min-height:82px;margin:0 0 20px;align-items:center} .rs--funding-community .keel-region--body>.keel-block--button{margin:0 0 68px} /* Contact — source post-35: booking pad 80px 0; form col max 1080, mist pad 10% 15%, mb 80 */ .rs--contact .keel-region--split{margin:0 auto;padding:80px 10px;max-width:1140px} .rs--contact .keel-region--split .column{text-align:center;padding:0 40px} .rs--contact .keel-region--widgets{ max-width:1080px;width:100%;margin:0 auto 80px;padding:108px 162px 80px; background:#F5F5F5;box-sizing:border-box } .rs--contact .keel-region--widgets>.keel-block--heading{text-align:center;color:var(--brand);margin:0 0 20px} .rs--contact .keel-field{margin:0;padding:10px 0;border:0} .rs--contact .keel-field__label{display:block;font-weight:700;font-size:16px;margin:0;line-height:1.3} .rs--contact .keel-field__input{font-size:15px;padding:11.25px;min-height:0;height:auto;border:1px solid #ccc;border-radius:0;line-height:1.3} .rs--contact textarea.keel-field__input{min-height:150px;padding:11.25px} .rs--contact .keel-field__options{gap:4px 12px;margin-top:4px} .rs--contact .keel-field__choice{font-size:14px} .rs--contact .keel-form__submit,.rs--contact .keel-region--widgets .keel-block--button .k-btn, .rs--contact .keel-region--widgets a.button{padding:18px 30px} /* Managed IT — source post-2604: Our Services band ~222; two rows 571+575 */ .rs--managed-it-services .keel-region--intro, .rs--managed-it-services .keel-region--features>.keel-block--heading{ text-align:center;font-size:2em } .rs--managed-it-services .keel-region--features{ max-width:1400px;width:100%;margin:0 auto;padding:0 10px;box-sizing:border-box } .rs--managed-it-services .keel-region--features>.keel-block--heading{ margin:80px auto;font-size:2em;line-height:1.3;display:block } .rs--managed-it-services .keel-region--features .keel-cards, .rs--managed-it-services .keel-region--features .keel-cards--2{ grid-template-columns:1fr 1fr;column-gap:20px;row-gap:4px;max-width:1400px; /* keel cards span 3 rows each; pin tracks so each card row ≈ 571 like source 185920af */ grid-template-rows:130px 48px 393px 130px 48px 397px } .rs--managed-it-services .keel-region--features .keel-cards__card{ background:#F5F5F5;padding:40px;text-align:center;margin:0;box-sizing:border-box;min-height:571px } .rs--managed-it-services .keel-region--features .keel-cards__text{min-height:300px} .rs--managed-it-services .keel-region--features .keel-cards__picture{height:60px;margin:0 auto 20px} .rs--managed-it-services .keel-region--features .keel-cards__picture img{height:60px;width:auto} .rs--managed-it-services .keel-region--features .keel-cards__title{ font-size:20.8px;letter-spacing:1.5px;text-transform:uppercase;color:var(--brand);margin:0 0 20px } /* Who we work with — source post-2477: hero 280; intro 103; clients 380; serve cards 634 */ .rs--who-we-work-with .k-hero{min-height:280px} .rs--who-we-work-with .keel-region--intro{margin:80px auto;max-width:1140px;padding:0 10px;text-align:center;min-height:103px} .rs--who-we-work-with .keel-region--intro .keel-block--heading, .rs--who-we-work-with .keel-region--intro h2{font-size:2em;line-height:1.3;margin:0} .rs--who-we-work-with .keel-region--split{margin:80px auto 0;max-width:1140px;padding:0 10px;min-height:380px} .rs--who-we-work-with .keel-region--features{max-width:1140px;margin:0 auto 80px;padding:0 10px} .rs--who-we-work-with .keel-region--features>.keel-block--heading{margin:80px auto 40px;font-size:2em;text-align:center} .rs--who-we-work-with .keel-region--features .keel-cards{ gap:20px; /* span-3 card rows → pin tracks to ~634 like source 5f7436bb */ grid-template-rows:90px 90px 454px } .rs--who-we-work-with .keel-region--features .keel-cards__card{padding:30px 25px 40px;box-sizing:border-box;min-height:634px} .rs--who-we-work-with .keel-region--features .keel-cards__text{font-size:14px;line-height:1.7} /* Portfolio — source post-4136: hero min-height 350; list margin 80; grid gaps 35/30 */ .rs--portfolio .k-hero{min-height:350px} .rs--portfolio .k-portfolio{margin:80px auto;max-width:1140px;padding:0 10px;gap:35px 30px} /* Testimonials page — source post-2663: trim ~60px page overflow */ .rs--testimonials .k-tgrid{margin:80px auto 60px;max-width:1140px;padding:0 10px;gap:28px} .rs--testimonials .k-tcard__body{padding:28px 30px 26px} /* Technology — source post-2599 features in tighter band */ .rs--technology .keel-region--features{max-width:1400px;margin:40px auto 80px;padding:0 10px} .rs--technology .keel-region--features .keel-cards{gap:20px} /* Newsletter — source post-6347: hero pad 120 20 0; plans overlap -80 */ /* (newsletter intro/features spacing owned by rebuilt post-6347 block above) */ .rs--resonate-newsletter .keel-region--intro{margin:0 auto;padding:120px 20px 0;max-width:1100px;text-align:left;min-height:1070px;box-sizing:border-box} .rs--resonate-newsletter .keel-region--features{max-width:1140px;margin:-80px auto 0;padding:0 10px} /* Funding community body — source post-2561 margins */ .rs--funding-community .keel-region--intro{margin:80px auto;max-width:1140px;padding:0 10px} .rs--funding-community .keel-region--body{max-width:1140px;margin:0 auto 80px;padding:0 10px} .rs--funding-community .keel-region--body>.keel-block--button{margin:0 0 68px} /* === wide-fluid 2026-10-19 === */ /* Inner heroes / bands: full-bleed, fixed source heights (do not shrink on ultra-wide) */ .k-hero{min-height:250px;width:100%} .k-connect{min-height:450px;width:100%} .k-stats{width:100%} .k-clients{width:100%} .k-footer{width:100%} /* Header/nav content column stays Astra ~1140 centred at all widths */ .k-header__in{max-width:1140px;width:100%} /* Cap fluid glossary title on absurd ultrawide (source still grows; soft cap for readability >3k) */ /* v77b: funding body button spacing to close −35px; who/nl polish */ .rs--funding-community .keel-region--body > .keel-block--button, .rs--funding-community .keel-region--body > a.button{ margin:0 0 68px !important } .rs--funding-community .keel-region--body{padding-bottom:20px} /* ===== Mobile/tablet pass — Elementor breakpoints 1099 (tablet) + 767 (mobile) ===== */ /* v3: flex-stack cards (Keel span-grid ignores min-height); close remaining gaps */ @media (max-width:1099px){ /* MIT / who: flex-stack on tablet too so min-heights win */ .rs--managed-it-services .keel-region--features .keel-cards, .rs--managed-it-services .keel-region--features .keel-cards--2{ display:flex;flex-wrap:wrap;gap:20px;grid-template-rows:none } .rs--managed-it-services .keel-region--features .keel-cards__card{ flex:1 1 calc(50% - 12px);min-width:280px;min-height:0;display:flex;flex-direction:column; grid-row:auto !important } .rs--managed-it-services .keel-region--features .keel-cards__text{min-height:0;flex:1} .rs--managed-it-services .keel-region--features>.keel-block--heading{margin:40px auto} .rs--who-we-work-with .keel-region--features .keel-cards{ display:flex;flex-direction:column;flex-wrap:nowrap;gap:16px;grid-template-rows:none } .rs--who-we-work-with .keel-region--features .keel-cards__card{ flex:0 0 auto;width:100%;min-height:450px;padding:28px 24px 36px; display:flex;flex-direction:column;grid-row:auto !important;box-sizing:border-box } .rs--who-we-work-with .k-hero{min-height:250px} .rs--who-we-work-with .keel-region--intro{min-height:0;margin:40px auto} .rs--who-we-work-with .keel-region--split{min-height:0;margin:40px auto 0} .rs--technology .k-band-brand{min-height:0;padding:60px 20px} .rs--technology .k-showcase,.rs--technology .keel-region--split{min-height:0} .k-tech-hero{min-height:0} .rs--resonate-newsletter .keel-region--intro{min-height:0;padding:90px 20px 20px} .rs--resonate-newsletter .keel-region--body{min-height:0} .rs--app-development .keel-region--intro{min-height:0;margin:48px auto} .rs--app-development .keel-region--split{min-height:0;margin:0 auto 48px;padding:0 20px 20px} /* Contact tablet: source form pad steps down; split stays compact */ .rs--contact .keel-region--widgets{padding:28px 20px 20px !important;margin:0 auto 14px} .rs--contact .keel-region--split{padding:20px 10px !important} .rs--contact .keel-region--split .column{padding:6px 12px} .rs--contact .keel-region--split .keel-block--heading{margin:0 0 8px} .rs--contact .keel-region--split a.button{margin-top:8px;padding:12px 18px} .rs--funding-community .keel-region--intro{margin:40px auto} .rs--funding-community .keel-region--body>.keel-block--button, .rs--funding-community .keel-region--body>a.button{margin:0 0 40px !important} .rs--portfolio .k-hero{min-height:250px} .rs--portfolio .k-portfolio{gap:40px;margin:60px auto;grid-template-columns:1fr} .rs--portfolio .k-pcard{grid-template-columns:1fr !important;min-height:0} .rs--portfolio .k-pcard__pic{min-height:280px;width:100%;height:280px;object-fit:cover} .rs--portfolio .k-pcard__body{padding:28px 28px} .rs--testimonials .k-tgrid{margin:40px auto;gap:30px;grid-template-columns:1fr 1fr} .rs--testimonials .k-tcard{min-height:1065px;display:flex;flex-direction:column} .rs--testimonials .k-tcard__body{padding:48px 24px 56px !important;font-size:15px;line-height:1.85;flex:1} .rs--testimonials .k-tcard__title{padding:18px 20px;font-size:16px} .rs--thankyou .k-band-img{height:320px} .rs--thankyou .keel-region--body{margin-top:40px;padding-bottom:50px} .rs--thankyou .k-band-mist{padding:48px 20px 20px} } @media (max-width:1099px){ /* Home tablet: grow short bands (was ~-4.6% @768) */ .k-stats{padding:64px 0} .keel-region--art{margin:64px 40px} .keel-region--testimonial{min-height:500px;padding:32px 40px} .k-home-hero .keel-region--hero_media{min-height:min(60vw,560px)} .keel-region--awards{margin:40px auto} .rs--technology .k-showcase,.rs--technology .keel-region--split{padding:52px 30px} .rs--resonate-newsletter .keel-region--intro{padding:110px 30px 60px} .rs--resonate-newsletter .keel-region--features{margin:-40px auto 0} } @media (max-width:767px){ .k-header{height:70px} .k-header__nav{top:70px} .k-logo img{width:120px} .rs--contact .keel-region--widgets{padding:50px 30px !important;margin:0 auto 40px} .rs--contact .keel-region--split{padding:20px 10px !important;margin:0 auto} .rs--contact .keel-region--widgets{padding:60px 30px 56px !important} .rs--contact .keel-region--split .columns, .rs--contact .keel-region--split .keel-block--columns{gap:4px} .rs--contact .keel-region--split .column{padding:4px 8px} .rs--contact .keel-region--split .keel-block--heading{margin:0 0 6px;font-size:20px} .rs--contact .keel-region--split .rich-text{font-size:14px;line-height:1.5} .rs--contact .keel-region--split .rich-text p{margin:0 0 6px} .rs--contact .keel-region--split a.button{margin-top:6px;padding:10px 16px} .rs--contact .k-hero .keel-block--heading{font-size:8vw} .rs--contact .k-hero{padding:28px 0;min-height:0} /* MIT — single-column flex; card min-height matches source ~720 */ .rs--managed-it-services .keel-region--features .keel-cards, .rs--managed-it-services .keel-region--features .keel-cards--2{ display:flex !important;flex-direction:column;flex-wrap:nowrap;gap:0;max-width:100% } .rs--managed-it-services .keel-region--features .keel-cards__card{ flex:0 0 auto;width:100%;height:auto !important; box-sizing:border-box; /* run4 9o: dropped eyeballed min-height:655px !important + padding:20px 16px !important; source icon-box wrap padding 20px (run3-3 9c rule) applies */ display:flex !important;flex-direction:column;grid-row:auto !important } .rs--managed-it-services .keel-region--features .keel-cards__text{min-height:0 !important;flex:1} .rs--managed-it-services .keel-region--features>.keel-block--heading{ margin:30px 20px !important;font-size:6vw;line-height:1.3 /* run4 9o: source 16a45e7 widget-wrap padding 10px + heading widget 20px = 30px above/below */ } .rs--managed-it-services .k-hero{min-height:250px;padding:0} .rs--managed-it-services .k-hero .keel-block--heading{font-size:8vw} /* Who — stacked serve cards ~560–620 */ .rs--who-we-work-with .keel-region--features .keel-cards{ display:flex !important;flex-direction:column;gap:20px } .rs--who-we-work-with .keel-region--features .keel-cards__card{ flex:0 0 auto;width:100%;min-height:490px !important;padding:30px 24px 40px; display:flex !important;flex-direction:column;grid-row:auto !important;box-sizing:border-box } .rs--who-we-work-with .keel-region--features .keel-cards__text{font-size:15px;line-height:1.75;flex:1} .rs--who-we-work-with .keel-region--features>.keel-block--heading{margin:40px auto 20px;font-size:6vw} .rs--who-we-work-with .k-hero{min-height:0} .rs--who-we-work-with .keel-region--intro{min-height:0;margin:40px 20px;padding:0} .rs--who-we-work-with .keel-region--split{min-height:0;margin:20px;padding:0} /* Newsletter */ .rs--resonate-newsletter .keel-region--intro{ padding:75px 20px 140px !important;min-height:0 !important;max-width:100% } .rs--resonate-newsletter .keel-region--features{margin:-50px auto 0 !important;padding:0 20px} .rs--resonate-newsletter .keel-region--features>.keel-block--richText{margin:28px auto 0} .rs--resonate-newsletter .keel-region--body{min-height:0 !important} .rs--resonate-newsletter .k-band-grey{padding:52px 20px 24px} .rs--resonate-newsletter .k-band-grey-end{padding:10px 0 52px} .rs--resonate-newsletter .k-wide-pic{margin:24px 0 0} .rs--resonate-newsletter .k-boxes{gap:18px} .rs--resonate-newsletter .k-boxes>.column:not(:nth-child(2)){padding:30px 24px} /* Technology */ .rs--technology .k-tech-hero{min-height:0 !important;grid-template-columns:1fr} .rs--technology .k-tech-hero>.column:first-child{margin:-70px 10px 20px;padding:20px} .rs--technology .k-tech-hero>.column:last-child{min-height:20vh;order:-1} .rs--technology .k-band-brand{min-height:0 !important;padding:48px 20px} .rs--technology .k-band-brand h2{font-size:5vw} .rs--technology .k-showcase,.rs--technology .keel-region--split{ min-height:0 !important;padding:52px 20px;margin:0 } /* Testimonials — push toward source ~1000–1280 item heights */ .rs--testimonials .k-tgrid{gap:52px;margin:40px auto 40px;padding:0 10px;grid-template-columns:1fr} .rs--testimonials .k-tcard{min-height:0} .rs--testimonials .k-tcard__title{font-size:16px;padding:20px 22px} .rs--testimonials .k-tcard__body{padding:60px 22px 72px !important;font-size:16px;line-height:1.9} .rs--testimonials .k-tcard__body::before{font-size:60px;margin-bottom:14px;display:block} .rs--testimonials .k-tcard__name{margin-top:32px} .rs--testimonials .k-hero .keel-block--heading{font-size:8vw} /* App development */ .rs--app-development .keel-region--intro{min-height:0 !important;margin:20px auto;padding:0 20px} .rs--app-development .keel-region--split{min-height:0 !important;margin:20px auto 40px;padding:40px 20px 140px} .rs--app-development .keel-region--split .columns--1-1{grid-template-columns:1fr;gap:48px} .rs--app-development .keel-region--split .keel-cards--3{ grid-template-columns:repeat(3,1fr);gap:28px 12px;margin:36px 0 } .rs--app-development .keel-region--split .keel-cards__card{min-height:140px;padding:20px 8px} .rs--app-development .keel-region--split .keel-cards__picture{height:52px;margin-bottom:14px} .rs--app-development .keel-region--split .keel-cards__picture img, .rs--app-development .keel-region--split .keel-cards img{height:52px;max-width:60px} .rs--app-development .k-hero .keel-block--heading{font-size:8vw} .rs--app-development .keel-region--split .rich-text{margin-bottom:20px} .rs--app-development .keel-region--split .keel-block--heading{margin:0 0 24px} /* Funding */ .rs--funding-community .keel-region--intro{margin:20px 20px;padding:0} .rs--funding-community .keel-region--body{margin:0 auto 28px;padding:0 20px} .rs--funding-community .keel-region--body>.keel-block--button, .rs--funding-community .keel-region--body>a.button{margin:0 0 16px !important} .rs--funding-community .keel-region--body{margin:0 auto 12px !important;padding:0 20px} .rs--funding-community .k-hero{padding:20px 0;min-height:0} .rs--funding-community .keel-region--intro{margin:16px 20px !important} .rs--funding-community .keel-region--body .columns--1-1{min-height:0} .rs--funding-community .k-hero{min-height:0;padding:28px 0} /* Thank-you */ .rs--thankyou .k-band-img{height:180px;margin-bottom:30px} .rs--thankyou .keel-region--body{padding:0 0 40px;margin-top:30px} .rs--thankyou .k-band-mist{padding:40px 20px 18px} /* Portfolio */ .rs--portfolio .k-hero{min-height:0} .rs--portfolio .k-portfolio{margin:32px auto;padding:0 16px;gap:32px} .rs--portfolio .k-pcard__pic{min-height:400px !important;height:400px !important} .rs--portfolio .k-pcard__body{padding:36px 24px} /* Home — grow short sections slightly */ .k-stats{padding:48px 0} .keel-region--stats .rich-text ul{gap:48px} .keel-region--art{margin:48px 20px} .k-home-hero .keel-region--hero_media{min-height:min(120vw,500px)} .keel-region--testimonial{min-height:420px;padding:24px 36px} .k-connect__pic{height:50vh;max-height:420px} .k-connect__box{margin:-40px 20px 30px;padding:40px 30px} } @media (min-width:768px) and (max-width:1099px){ /* funding tablet-only: restore button spacing without affecting 390 */ .rs--funding-community .keel-region--body>.keel-block--button, .rs--funding-community .keel-region--body>a.button{margin:0 0 68px !important} } /* ===== 8. selfcheck fix 2026-10-23 (Rebecca): source rules ported rule by rule; see _source/CSS-MAP.md ===== */ /* was style="background-image:url(…)" ×10 in layout el-portfolio (Elementor column backgrounds, post-4136 loop) */ .k-bg-pf-cf440d8f{background-image:url("/_media/cf440d8f-18a0-4582-8368-ed502bd5ebee/original.jpg")} .k-bg-pf-536a1ba0{background-image:url("/_media/536a1ba0-18df-4c8b-8533-3043f8355155/original.jpg")} .k-bg-pf-9727d591{background-image:url("/_media/9727d591-ccbe-43f5-a1d1-97a22c1ce9bd/original.jpg")} .k-bg-pf-cd8760b2{background-image:url("/_media/cd8760b2-d528-4714-ab91-26543ed0d158/original.jpg")} .k-bg-pf-1d470c90{background-image:url("/_media/1d470c90-1fe6-4ec1-a318-1b8aed2312a5/original.jpg")} .k-bg-pf-d353f178{background-image:url("/_media/d353f178-1412-44d0-90a3-cd21420c9d5b/original.jpg")} .k-bg-pf-0696d76f{background-image:url("/_media/0696d76f-556a-47ec-bd9f-495b1e339f01/original.jpg")} .k-bg-pf-683bc577{background-image:url("/_media/683bc577-1c3c-4a1c-ac8f-d2d6aa0fd1d9/original.jpg")} .k-bg-pf-0dd95ab8{background-image:url("/_media/0dd95ab8-49b3-4e68-bf6b-88a6280177e3/original.jpg")} .k-bg-pf-ae084176{background-image:url("/_media/ae084176-9075-4a04-917f-c17a90369086/original.jpg")} /* was style="background-image:url('{{ post.image.url }}')" in layout post-list → (same crop: cover, centred) */ .blog-card__image{display:block;overflow:hidden} .blog-card__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center} /* Astra frontend.min.css: pre{font-family:"Courier 10 Pitch",Courier,monospace;margin-bottom:1.6em;overflow:auto;max-width:100%;padding:1.6em} */ .rs pre{font-family:"Courier 10 Pitch",Courier,monospace;margin-bottom:1.6em;overflow:auto;max-width:100%;padding:1.6em} /* Elementor kit post-1923: h3 1.8em; @media(max-width:1099px) h3 1.4em */ /* Elementor widget overrides that keep their own size are listed in CSS-MAP (alert 1.5em, funding body h3 1.5em/5vw) */ @media (max-width:1099px){ .rs main h3.keel-block--heading, .rs--contact .keel-region--split h3.keel-block--heading, .rs--app-development .keel-region--split .columns--1-1>.column .keel-block--heading, .rs--app-development .keel-region--intro h3.keel-block--heading, .rs .k-portfolio .k-pcard__title, .rs--testimonials .k-tgrid .k-tcard__title, .rs--testimonials .k-tcard .k-tcard__title{font-size:1.4em} /* post-2387 #7fc9c5e .elementor-heading-title @1099: 1.5em */ .rs .keel-region--alert h3.keel-block--heading{font-size:1.5em} } /* inner page hero title: post-2652 #68d1dc99 (and the same widget on every inner page): 4em; @1099 5vw; @767 8vw */ .rs:not(.rs--team-list) .k-hero h1.keel-block--heading{font-size:4em} @media (max-width:1099px){.rs:not(.rs--team-list) .k-hero h1.keel-block--heading{font-size:5vw}} @media (max-width:767px){.rs:not(.rs--team-list) .k-hero h1.keel-block--heading{font-size:8vw}} /* section h2 widgets: post-2652 #81b2008 #2cae722, post-2609 #a0363f4, post-2561 #4576157: 2em; @767 6vw */ @media (max-width:767px){ .rs--about .keel-region--how>h2.keel-block--heading, .rs--about .keel-region--team_intro h2.keel-block--heading, .rs--app-development .keel-region--intro h2.keel-block--heading, .rs--funding-community .keel-region--intro h2.keel-block--heading{font-size:6vw} /* post-2477 #b848dee has no size rule: kit h2 2em at every width */ .rs--who-we-work-with .keel-region--features>h2.keel-block--heading{font-size:2em} } /* post-2561 #4c29907 #fd4d2df: 1.5em; @767 5vw */ @media (max-width:767px){.rs--funding-community .keel-region--body .columns--1-1 h3.keel-block--heading{font-size:5vw}} /* post-2561 #49fd6b6a, post-4136 #4c5309a0 (hero intro): 16px; @1099 18px; @767 16px */ @media (max-width:1099px){.rs--funding-community .k-hero .rich-text p,.rs--portfolio .k-hero .rich-text p{font-size:18px}} @media (max-width:767px){.rs--funding-community .k-hero .rich-text p,.rs--portfolio .k-hero .rich-text p{font-size:16px}} /* body copy that inherits the kit 16px in the source (post-505 #80f5cbc #51203b1 #e8dc1dc 16px; post-2477 cards; post-2609 icon-box titles; post-35 text; post-2599 #55be5e1) */ .rs .k-portfolio .k-pcard__text{font-size:16px} .rs--who-we-work-with .keel-region--features .keel-cards__text{font-size:16px} .rs--app-development .keel-region--split .keel-cards .keel-cards__title{font-size:16px} .rs--technology .k-tech-hero>.column:first-child .rich-text{font-size:16px} @media (max-width:767px){ .rs--who-we-work-with .keel-region--features .keel-cards__text{font-size:16px} .rs--contact .keel-region--split .rich-text{font-size:16px} .rs--app-development .keel-region--split .keel-cards .keel-cards__title{font-size:16px} } /* Astra h4 (portfolio client, technology "Check out our latest work"): 1.3333rem of html 93.75% = 20px; @1100 html 85.5% = 18.24px */ .rs .k-portfolio .k-pcard__client,.rs--technology .k-band-brand h4{font-size:20px} @media (max-width:1100px){.rs .k-portfolio .k-pcard__client,.rs--technology .k-band-brand h4{font-size:18.24px}} /* technology post-2599 #199db9b: 1.8em; @767 5vw / line-height 1.4em. #fb89a75: 2.8em; @1099 2em */ .rs--technology .k-tech-hero>.column:first-child .rich-text:first-child{font-size:1.8em} .rs--technology .k-band-brand h2{font-size:2.8em} @media (max-width:1099px){.rs--technology .k-band-brand h2{font-size:2em}} @media (max-width:767px){ .rs--technology .k-tech-hero>.column:first-child .rich-text:first-child{font-size:5vw;line-height:1.4em} .rs--technology .k-band-brand h2{font-size:2em} } /* thank-you heading: source is an h2 with the kit size 2em (kept as h1 here for the outline) */ .rs--thankyou .keel-region--intro>h1.keel-block--heading{font-size:2em} /* newsletter post-6347 #ba215d5: 30px */ .rs--resonate-newsletter .k-split-intro h1{font-size:30px} /* testimonial carousel text: custom-pro-widget-testimonial-carousel .elementor-testimonial__text 1.3em (20px in post-2387 is the arrow size) */ .rs .keel-region--testimonial .keel-slider__quote>p{font-size:1.3em} /* Astra header: "break_point":"1100" and @media (max-width:1100.99px){#ast-desktop-header{display:none}} – mobile bar 68.6px, logo 120px; @544 logo 130px */ @media (max-width:1100px){ .k-header{height:69px} .k-header__nav{top:69px} .k-header .k-logo img,.k-header__logo img{width:120px;max-width:120px} } @media (max-width:544px){.k-header .k-logo img,.k-header__logo img{width:130px;max-width:130px}} /* round 2 (same day): app-development lead h3 keeps its 28.8px desktop rule but follows the kit @1099 1.4em */ @media (max-width:1099px){.rs--app-development .keel-region--split .columns--1-1>.column:first-child h3.keel-block--heading{font-size:1.4em}} /* Astra mobile header @544: logo 130px makes the bar 71px */ @media (max-width:544px){.k-header{height:71px}.k-header__nav{top:71px}} /* technology #fb89a75 sits in an Elementor boxed container: 1140/1024/767 minus 2×10px column padding */ .rs--technology .k-band-brand h2{max-width:1120px} @media (max-width:1099px){.rs--technology .k-band-brand h2{max-width:1004px}} @media (max-width:767px){.rs--technology .k-band-brand h2{max-width:747px}} /* 8c. selfcheck fix 2026-10-23 (round 3) — ported from source, measured with _work/cssmap/probe.py */ /* art quote: Elementor blockquote p margin 0 0 1.6em, e-q-footer margin-top 12px (all widths) */ .rs .keel-region--art_quote .keel-quote__text{margin:0 0 1.6em} .rs .keel-region--art_quote .keel-quote__attribution{display:block;margin-top:12px} @media (max-width:1099px){ /* source column #15c7449 widget-wrap padding 40px (tablet) is the only inset; blockquote has none */ .rs .keel-region--art_quote .keel-quote{padding:0} } @media (max-width:767px){ /* source blockquote__content 1.2em (19.2px) on phone; column padding 20px */ .rs .keel-region--art_quote .keel-quote__text{font-size:1.2em} /* stats: source columns 100% wide, widget-wrap padding 10px, label p margin-bottom 25.6px; no min-height */ .rs .keel-region--stats li{min-height:0!important;padding:10px 0 35.6px!important} .rs .keel-region--stats .rich-text ul{gap:0} /* clients: source #42d8cf1 section padding 0 + widget-wrap 20px on phone */ .rs .k-clients{padding:20px} /* awards: Elementor image gallery 480-767 max-width 50%, item padding 10px, img natural (max 300px) */ .rs .keel-region--awards{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin:0 0 20px;max-width:none} .rs .keel-region--awards .keel-block--image{width:100%;max-width:none;padding:10px;box-sizing:border-box} .rs .keel-region--awards img{width:auto;max-width:100%;max-height:none;margin:0 auto 15px} } @media (max-width:479px){ /* Elementor image gallery: gallery-item max-width 100% at <=479 */ .rs .keel-region--awards{grid-template-columns:1fr} .rs .keel-region--awards img{max-width:300px} } /* 8d. selfcheck fix 2026-10-23 (round 4) — footer + awards, ported from source post-1920 (footer) */ /* source: address columns 3f459ebd/59e399f2 elementor-hidden-tablet+phone, 494ad89b hidden-phone (spacer) */ @media (max-width:1099px){ .rs .k-footer__addr{display:none} .rs .k-footer__social{margin:0} .rs .k-footer__logo img{width:182px;height:auto} } @media (max-width:767px){ /* source image widget 71195a00 on phone: 301px wide, social list directly below */ .rs .k-footer__in{gap:0} .rs .k-footer__logo img{width:301px;max-width:100%} .rs .keel-region--awards img{margin:0 auto} } /* 8e. selfcheck fix 2026-10-23 (round 5) — testimonial carousel widths, ported from Elementor testimonial-carousel: .elementor-main-swiper margin 0 2.5% (95% wide), .swiper-slide padding 20px, __content padding 20px, __footer margin-top 25px */ .rs .keel-region--testimonial .keel-slider__slide{padding:0 calc(2.5% + 20px)} .rs .keel-region--testimonial .keel-slider__quote{max-width:none} .rs .keel-region--testimonial .keel-slider__quote>p{padding:20px} .rs .keel-region--testimonial .keel-slider__quote>footer{padding-top:25px} @media (max-width:1099px){ /* source column widget-wrap padding 10px; no extra section padding */ .rs .keel-region--testimonial{padding:0 10px 24px} } @media (max-width:767px){ .rs .keel-region--testimonial .keel-slider__quote>p{padding:20px} } /* 8f. selfcheck fix 2026-10-23 (round 6) — sideways scroll + team grid, measured with _work/scdump/dump.py */ /* full-bleed bands used margin 0 -10px inside a 0-padding wrapper: 20px wider than the viewport (scrollWidth W+10) */ .rs .k-tech-hero,.rs .k-band-mist{margin-left:0;margin-right:0} /* about team: source post-2652 columns 40% / 59.665%; image grid = 3 fluid columns, 10px gap, 10px padding (241px @1280, 305px @1920), 2 columns on tablet (215px @768), 1 column on phone (355px @375) */ .rs .k-team__grid{width:auto;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))} @media (max-width:1099px){ .rs .k-team{grid-template-columns:40% 60%} .rs .k-team__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:767px){ .rs .k-team{grid-template-columns:1fr} .rs .k-team__grid{grid-template-columns:1fr;max-width:none;margin:0} /* home alert: source widgets x30 w315 at 375 (section 20px + column 10px) */ .rs .keel-region--alert{width:auto;margin:40px 10px 0} } /* 8g. selfcheck fix 2026-10-23 (round 7) — phone inner hero + team spacing (source post-2652 #7c1c9b68 / #a0c978e) */ @media (max-width:767px){ /* hero: container min-height 250px, widget-wrap padding 20px, widgets full width (x20 w335 @375), no extra inset */ .rs .k-hero{padding:20px 0} .rs .k-hero .keel-region--hero{padding:0 20px} .rs .k-hero .keel-block--heading,.rs .k-hero .rich-text{padding:0} /* team: image column padding 10px, 10px between portraits, no section side padding (x10 w355 @375) */ .rs .k-team{padding:0} .rs--about .k-team__grid.k-team__grid{gap:10px;padding:10px} } /* 8h. selfcheck fix 2026-10-23 (round 8) — app development split, ported from post-2609 (#8e37d54, #13aa188, #90c1e6e, #0caaf35, #9e79827) */ /* quote: global h3 weight 700 (Keel had 400); widget-container padding-left 20px */ .rs--app-development .keel-region--split .columns--1-1>.column:first-child h3.keel-block--heading{font-weight:700} /* "We develop for:" / "Using:" headings: text-align center, margin-bottom 20px */ .rs--app-development .keel-region--split .columns--1-1>.column:last-child>h3.keel-block--heading{text-align:center;margin:0 0 20px} /* icon columns: widget-wrap padding 10px; icon 50px, margin-bottom 20px; label 16px/1.857 bold uppercase .7px, p margin-bottom 25.6px */ .rs--app-development .keel-region--split .keel-cards{gap:0;margin:0} .rs--app-development .keel-region--split .keel-cards__card{padding:10px} .rs--app-development .keel-region--split .keel-cards__picture{margin:0 auto 20px} .rs--app-development .keel-region--split .keel-cards img{height:50px;max-width:60px} .rs--app-development .keel-region--split .keel-cards__title{font-size:16px;line-height:1.857;letter-spacing:.7px;margin:0 0 25.6px} /* device icons: Font Awesome in --e-global-color-text #252525 (the uploaded SVGs carry the brand blue fill) */ .rs--app-development .keel-region--split .keel-cards:first-of-type img{filter:brightness(0) invert(.145)} @media (max-width:1099px){ .rs--app-development .keel-region--split .keel-cards img{height:50px;max-width:60px} .rs--app-development .keel-region--split .keel-cards__title{font-size:16px} } @media (max-width:767px){ /* Elementor inner-section columns stack to 100% on phone: one icon per row */ .rs--app-development .keel-region--split .keel-cards--3{grid-template-columns:1fr;gap:0} } /* 8i. selfcheck fix 2026-10-23 (round 9) — app development icon gap + phone quote inset (post-2609 #0caaf35 margin-bottom 20px; #13aa188 margin-left 20px + padding-left 20px on phone) */ .rs--app-development .keel-region--split .keel-cards img.keel-cards__picture{margin:0 auto 20px} @media (max-width:767px){ .rs--app-development .keel-region--split{padding:0 10px} .rs--app-development .keel-region--split .columns--1-1>.column:first-child h3.keel-block--heading{padding:0 0 0 20px;margin:0 0 0 20px} } /* 8j. selfcheck fix 2026-10-23 (round 10) — app development split stays 50/50 on tablet (Elementor columns stack only at <=767); quote inset 20+20 from tablet down */ @media (max-width:1099px){ .rs--app-development .keel-region--split .columns--1-1{grid-template-columns:1fr 1fr} .rs--app-development .keel-region--split{padding:0 10px} .rs--app-development .keel-region--split .columns--1-1>.column:first-child h3.keel-block--heading{padding:0 0 0 20px;margin:0 0 0 20px} } @media (max-width:767px){ .rs--app-development .keel-region--split .columns--1-1{grid-template-columns:1fr} } /* 8k. selfcheck fix 2026-10-23 (round 11) — contact Funding/Technology boxes, ported from the contact page CSS (#9d47c0c, #5c0f233, #d426024, #6f7d6aa): columns 50/50 with no gap, widget-wrap padding 40px, heading margin-bottom 20px, text p margin-bottom 25.6px + widget margin 20px, button 18px 30px with a 3px border, same on phone (Keel had compressed phone spacing) */ .rs--contact .keel-region--split.keel-region--split{padding:40px 0} .rs--contact .keel-region--split .columns--1-1{gap:0} .rs--contact .keel-region--split .column.column{padding:40px} .rs--contact .keel-region--split .keel-block--heading.keel-block--heading{margin:0 0 20px} .rs--contact .keel-region--split .rich-text{padding-bottom:25.6px;margin:0 0 20px} .rs--contact .keel-region--split .rich-text p{margin:0} .rs--contact .keel-region--split a.button.button{margin-top:0;padding:18px 30px;border-width:3px} @media (max-width:767px){ .rs--contact .keel-region--split.keel-region--split{padding:0!important} } /* 8l. selfcheck fix 2026-10-23 (round 12) — contact boxes: section padding 80px top/bottom on desktop + tablet (source column top at 80px, section 458px @1280); phone body text line-height 1.857 */ .rs--contact .keel-region--split.keel-region--split{padding:80px 0} @media (max-width:767px){ .rs--contact .keel-region--split.keel-region--split{padding:0!important} .rs--contact .keel-region--split .rich-text p{line-height:1.857} } /* 8m. selfcheck fix 2026-10-23 (round 13) — thank-you page, ported from the thankyou page CSS (#31b682c9 image band, #5b08de1 intro, #f87823c connect band) */ .rs--thankyou .k-band-img{margin:0 -10px 80px;height:280px;overflow:hidden} .rs--thankyou .k-band-img img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} .rs--thankyou .keel-region--intro h1.keel-block--heading{color:var(--brand)!important;line-height:1.3;margin:0 0 20px} .rs--thankyou .keel-region--intro .rich-text{padding-bottom:25.6px;margin:0 0 20px} .rs--thankyou .keel-region--intro .rich-text p{margin:0} .rs--thankyou .keel-region--intro a.button{border-width:0} .rs--thankyou .keel-region--intro{padding-bottom:90px} .rs--thankyou .keel-region--body{margin:0;padding:0 0 90px;background:#F0F0F0} .rs--thankyou .k-band-mist.k-band-mist{background:#F0F0F0;padding:90px 10px 0;margin:0} .rs--thankyou .k-band-mist h2{margin:0 0 20px} .rs--thankyou .k-band-mist p{margin:0;padding-bottom:25.6px} .rs--thankyou .k-band-mist{margin-bottom:20px} .rs--thankyou a.button.k-band-mist-end{display:table;margin:20px auto 0;color:var(--brand)!important;border-color:var(--brand);background:transparent} @media (max-width:767px){ .rs--thankyou .k-band-img{height:250px;margin-bottom:20px} .rs--thankyou .keel-region--intro{padding-bottom:30px} .rs--thankyou .keel-region--body{padding-bottom:30px} .rs--thankyou .k-band-mist.k-band-mist{padding:30px 10px 0} } /* 8n. selfcheck fix 2026-10-23 (round 14) — portfolio cards, ported from the portfolio template (#e818100): measured at 1280 with _work/cssmap/probe.py title margin 0; client h4 20px/24px; labels 20px/1.857 with a 20px widget gap above; body copy 16px/1.857 (Keel had 1.7); list margin-bottom 24px */ .rs--portfolio .k-pcard__title{margin:0} .rs--portfolio .k-pcard__client{font-size:20px;line-height:24px;margin:0} .rs--portfolio .k-pcard__label{font-size:20px;line-height:1.857;margin:20px 0 -3px} .rs--portfolio .k-pcard__body p,.rs--portfolio .k-pcard__body li{line-height:1.857} .rs--portfolio .k-pcard__body ul{margin:0 0 24px} @media (min-width:1100px){ /* text column: inner section starts 22px left of the column, widget-wrap padding 30px (text x461 w677 @1280) */ .rs--portfolio .k-pcard__body{padding:30px 62px 30px 8px} } @media (max-width:1099px){ .rs--portfolio .k-pcard__client{font-size:18.24px} } /* 8o. selfcheck fix 2026-10-23 (round 15) — portfolio: the 20px widget gap is not collapsible in the source (separate widgets): use padding; client line-height 24px */ .rs--portfolio .k-pcard__body p.k-pcard__label{margin:0 0 -3px;padding-top:20px} .rs--portfolio .k-pcard__body p.k-pcard__client{line-height:24px} /* 8p. selfcheck fix 2026-10-23 (round 16) — portfolio tablet: stacked columns 728px wide at 768 (10px extra inset), image band 300px, text padding 30px, client h4 line-height 1.2 */ @media (max-width:1099px){ .rs--portfolio .k-pcard{margin-left:10px;margin-right:10px} .rs--portfolio .k-pcard__pic{height:300px} .rs--portfolio .k-pcard__body{padding:30px} .rs--portfolio .k-pcard__body p.k-pcard__client{line-height:1.2} } /* 8q. selfcheck fix 2026-10-23 (round 17) — portfolio phone: card x20 w335 @375, image band 300px (Keel had 400px) */ @media (max-width:767px){ .rs--portfolio .k-pcard.k-pcard{margin-left:4px;margin-right:4px} .rs--portfolio .k-pcard img.k-pcard__pic{height:300px} } /* 8r. selfcheck fix 2026-10-23 (round 18) — portfolio phone image band: an earlier !important 400px rule overrode the source 300px */ @media (max-width:767px){ .rs--portfolio .k-pcard img.k-pcard__pic{min-height:300px!important;height:300px!important} } /* 8s. selfcheck fix 2026-10-23 (round 19) — technology Labourly showcase, ported from post-2599 #7b7cb6c: full-width section (margin 80px 0), two 50% columns with no gap; text column widget-wrap margin-left 10% + padding 10px; screenshot fills the right column edge to edge */ @media (min-width:1100px){ .rs--technology .keel-region--split.keel-region--split{max-width:none;margin:80px 0;padding:0} .rs--technology .keel-region--split .columns{padding:0;gap:0;align-items:start;grid-template-columns:1fr 1fr} .rs--technology .keel-region--split .column:first-child{padding:10px;margin-left:20%} .rs--technology .keel-region--split .column:last-child img{width:100%;height:auto;display:block} } .rs--technology .keel-region--split .rich-text p:last-child{margin:0 0 25.6px} .rs--technology .keel-region--split .rich-text{margin:0 0 20px} /* 8t. selfcheck fix 2026-10-23 (round 20) — technology showcase (.k-showcase): no min-height/padding in the source (section height = content, 522px @1280); logo widget margin-bottom 20px; LEARN MORE button has no border (49px tall) */ @media (min-width:1100px){ .rs--technology .k-showcase.k-showcase{min-height:0;padding:0} } .rs--technology .keel-region--split .column:first-child>a:first-child,.rs--technology .keel-region--split .column:first-child>.keel-block--image:first-child{display:block;margin-bottom:20px} .rs--technology .keel-region--split a.button--brand{border-width:0} /* 8u. selfcheck fix 2026-10-23 (round 21) — technology showcase: 20px widget gap above LEARN MORE (source widget spacing; p margin collapses otherwise) */ .rs--technology .keel-region--split a.button--brand{display:inline-block;margin-top:20px} /* 8v. selfcheck fix 2026-10-23 (round 22) — technology on tablet (768–1099), ported from post-2599 tablet rules: hero stacks — photo band 270px (#1922962) then the white text box pulled up 70px (#66aa719 widget-wrap: margin -70px 10px 40px, padding 40px); Labourly showcase (#7b7cb6c) stacks full width: text wrap margin 40px + padding 10px, screenshot 100% wide; section margin 80px 0 0 */ @media (min-width:768px) and (max-width:1099px){ .rs--technology .k-tech-hero.k-tech-hero{grid-template-columns:1fr;min-height:0} .rs--technology .k-tech-hero>.column:last-child{order:-1;min-height:270px;height:270px} .rs--technology .k-tech-hero>.column:first-child{margin:-70px 10px 40px;padding:40px;position:relative;z-index:1} .rs--technology .keel-region--split.keel-region--split{padding:0;margin:80px 0 0} .rs--technology .keel-region--split .columns{padding:0;gap:0;grid-template-columns:1fr} .rs--technology .keel-region--split .column:first-child{margin:40px;padding:10px} .rs--technology .keel-region--split .column:last-child img{width:100%;height:auto;display:block} } /* 8w. selfcheck fix 2026-10-23 (round 23) — technology tablet (768–1099) text metrics from post-2599: hero box left-aligned; lead line-height 1.857 + margin-bottom 1.6em; body p margin-bottom 25.6px; FIND OUT MORE padding 11.69px 26.72px; blue band (#c3e7b93) padding 40px */ @media (min-width:768px) and (max-width:1099px){ .rs--technology .k-tech-hero>.column:first-child{text-align:left} .rs--technology .k-tech-hero>.column:first-child p:first-of-type{line-height:1.857;margin:0 0 1.6em} .rs--technology .k-tech-hero>.column:first-child p+p{margin:0 0 25.6px} .rs--technology .k-tech-hero .button--outline{padding:11.6875px 26.7188px} .rs--technology .k-band-brand.k-band-brand{padding:40px} } /* 8x. selfcheck fix 2026-10-23 (round 24) — technology tablet hero: the text blocks carry no own margin (source spacing comes from the p margins) */ @media (min-width:768px) and (max-width:1099px){ .rs--technology .k-tech-hero>.column:first-child>.keel-block{margin-bottom:0} } /* 8y. selfcheck fix 2026-10-23 (round 25) — technology tablet hero: measured source gap lead→body is 15px (rendered, post-2599 @768) */ @media (min-width:768px) and (max-width:1099px){ .rs--technology .k-tech-hero>.column:first-child p:first-of-type{margin-bottom:15px} } /* 8z. selfcheck fix 2026-10-23 (round 26) — tablet (768–1099), from rendered source @768: footer (#70eeefbb) is content height 162px (no 190px min-height; logo 172px wide); technology showcase stacks screenshot first, LEARN MORE padding 11.69px 26.72px */ @media (min-width:768px) and (max-width:1099px){ .rs .k-footer{min-height:0} .rs .k-footer__logo img{width:172px;height:auto} .rs--technology .keel-region--split .column:last-child{order:-1} .rs--technology .keel-region--split a.button--brand{padding:11.6875px 26.7188px;margin-top:20px} } /* 8aa. selfcheck fix 2026-10-23 (round 27) — tablet (768–1099), rendered source @768: app-development: intro section (#283bba3) and split (#8e37d54) keep margin 80px; icon cards stay 3 per row (col-33 inner sections, 10px padding); thank-you: hero image band 250px (#31b682c9); mist band padding 60px top / 60px bottom (section 50 + wrap 10); FIND MY COMMUNITY padding 11.33px 25.91px */ @media (min-width:768px) and (max-width:1099px){ .rs--app-development .keel-region--intro.keel-region--intro{margin:80px auto} .rs--app-development .keel-region--split.keel-region--split{margin:0 auto 80px} .rs--app-development .keel-region--split .keel-cards--3.keel-cards--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0} .rs--app-development .keel-region--split .keel-cards__card{padding:10px} .rs--thankyou .k-band-img.k-band-img{height:250px} .rs--thankyou .k-band-mist.k-band-mist{padding-top:60px} .rs--thankyou .keel-region--body.keel-region--body{padding-bottom:60px} .rs--thankyou a.button.k-band-mist-end{padding:11.3281px 25.9062px} } /* 8ab. selfcheck fix 2026-10-23 (round 28) — app-development tablet icon cards: title sits 90px below the card top (icon box 50px + 30px gap) and each inner section is followed by the 50px heading gap seen at @768 (post-2575 #8e37d54) */ @media (min-width:768px) and (max-width:1099px){ .rs--app-development .keel-region--split .keel-cards__picture{margin-bottom:40px} .rs--app-development .keel-region--split .keel-cards--3{margin-bottom:50px} .rs--app-development .keel-region--split .keel-cards--3:last-child{margin-bottom:0} } /* 8ac. selfcheck fix 2026-10-23 (round 29) — app-development tablet: icon gap 40px needs img.keel-cards__picture specificity (8ab lost to round 8j) */ @media (min-width:768px) and (max-width:1099px){ .rs--app-development .keel-region--split img.keel-cards__picture.keel-cards__picture{margin-bottom:40px} } /* 8ad. selfcheck fix 2026-10-23 (round 30) — tablet (768–1099), rendered source @768: app-development intro (#283bba3): widget-wrap padding 10px, body p margin-bottom 25.6px; thank-you intro (#5b08de1): 10px wrap padding above the h1, DOWNLOAD button padding 13.08px 29.91px; thank-you mist band (#f87823c): text column inset 60px each side (section 50 + wrap 10) */ @media (min-width:768px) and (max-width:1099px){ .rs--app-development .keel-region--intro.keel-region--intro{padding:10px} .rs--app-development .keel-region--intro .rich-text p:last-child{margin-bottom:25.6px} .rs--thankyou .keel-region--intro>h1.keel-block--heading{padding-top:10px} .rs--thankyou .keel-region--intro a.button{padding:13.0781px 29.9062px} .rs--thankyou .k-band-mist.k-band-mist{padding-left:60px;padding-right:60px} } /* 8ae. selfcheck fix 2026-10-23 (round 31) — tablet (768–1099), rendered source @768/@900/@1024: footer logo column is 25% of the row with 5px image inset (logo 172px @768, 236px @1024 → footer 162/182px); thank-you buttons scale with the viewport (FIND MY COMMUNITY 11.33/25.91px @768 → 15.81/36.16px @1024; DOWNLOAD 13.08/29.91px @768) */ @media (min-width:768px) and (max-width:1099px){ .rs .k-footer__logo{flex:0 0 25%;box-sizing:border-box;padding:5px} .rs .k-footer__logo img.k-footer__logo-img,.rs .k-footer__logo img{width:100%;height:auto} .rs--thankyou a.button.k-band-mist-end{padding:1.5vw 3.45vw} .rs--thankyou .keel-region--intro a.button{padding:1.7vw 3.89vw} } /* 9a. selfcheck fix run 3, 2026-10-23 15:50 ET — ported from the saved source CSS (code-first, rendered JS-off @375/@1280): (1) inner hero subtitle: Elementor heading widget p.elementor-heading-title 16px line-height:1.5em (post-*.css, e.g. post-2561 #49fd6b6a); columns 50/50 of the 1140 container: left wrap padding-right 30 + widget padding-right 10, right wrap padding 10 (>=768); phone hero section min-height 250px with 20px wrap padding. (2) connect band (post-2447): text widget p margin-bottom 25.6 inside a -25px container + 20px widget margin = 20.6px to the button (all widths); phone .cta-pic{height:50vh} (no px cap), box margin -40px 10px 30px, padding 40px. (3) funding-community phone (<=767): Elementor inner columns stack at 100% (icon column 60px, heading column padding 10px), buttons .elementor-mobile-align-center, ul margin-bottom 24px + 20px widget margin, button widget 20px + spacer 50px + 20px before the next group, intro heading container margin 20px 0 and 20px widget margin. */ .rs .k-hero .rich-text p{line-height:1.5} @media (min-width:768px){ .rs:not(.rs--team-list) .k-hero .keel-region--hero{padding:0;column-gap:0} .rs:not(.rs--team-list) .k-hero h1.keel-block--heading{padding:0 40px 0 0} .rs:not(.rs--team-list) .k-hero .rich-text{padding:10px} } .rs .k-connect .k-connect__text{margin:0} .rs .k-connect .k-connect__text p{margin:0} @media (max-width:767px){ .rs:not(.rs--team-list) .k-hero.k-hero{min-height:250px;padding:20px 0} .rs .k-connect .k-connect__pic{height:50vh;min-height:0;max-height:none} .rs .k-connect .k-connect__box{margin:-40px 10px 30px;padding:40px} .rs--funding-community .keel-region--intro.keel-region--intro{margin:20px 20px 40px !important;padding:0} .rs--funding-community .keel-region--body .columns--1-1.columns--1-1{grid-template-columns:1fr;gap:0;margin:0;min-height:0} .rs--funding-community .keel-region--body .columns--1-1 .keel-block--image img{margin:0 0 10px} .rs--funding-community .keel-region--body .columns--1-1 h3.keel-block--heading{padding:10px} .rs--funding-community .keel-region--body>.keel-block--richText{margin:0 0 20px} .rs--funding-community .keel-region--body .rich-text ul{margin-bottom:24px} .rs--funding-community .keel-region--body>a.button.keel-block--button{display:block;width:fit-content;margin:0 auto 90px !important} .rs--funding-community .keel-region--body>a.button.keel-block--button:last-child{margin-bottom:0 !important} .rs--funding-community .keel-region--body.keel-region--body{margin-bottom:0 !important} } /* 9b. selfcheck fix run 3, 2026-10-23 16:15 ET — ported from the saved source CSS (rendered JS-off @375/@768/@1280): (1) testimonials (>=768): ECS loop grid inside a 20px-padded full-width widget (40px at tablet), 2 columns, 20px gap; card = title widget padding 40px; content widget padding 40px 40px 5px, 16px/1.857, p margin-bottom 25.6px; name/role/org text widgets padding-left 50px (net 20/0/-5px spacing), last widget padding-bottom 45px; quote icon is absolutely positioned. (2) contact phone hero: section padding 20px around the 250px min-height container (= 290px). (3) app-development phone: intro section wrap padding 10px; top columns padding 10px (no extra gap); icon widget 60px + 20px margin; text widget 30px + 25.6px; 50px between the two icon groups; inner columns stacked with no gap. */ @media (min-width:768px){ .rs--testimonials .k-tgrid.k-tgrid{max-width:none;margin:80px 0 0;padding:20px 20px 100px;gap:20px;grid-template-columns:1fr 1fr;box-sizing:border-box} .rs--testimonials .k-tcard.k-tcard{min-height:0;display:block;position:relative} .rs--testimonials .k-tcard .k-tcard__title{padding:40px} .rs--testimonials .k-tcard .k-tcard__body.k-tcard__body{padding:40px 40px 45px !important;font-size:16px;line-height:1.857;position:relative} .rs--testimonials .k-tcard__body p{margin:0 0 25.6px} .rs--testimonials .k-tcard__body::before{position:absolute;left:40px;top:13px;margin:0} .rs--testimonials .k-tcard__body p.k-tcard__name{margin:25px 0 0;padding-left:10px} .rs--testimonials .k-tcard__body p.k-tcard__role{margin:0;padding-left:10px} .rs--testimonials .k-tcard__body p.k-tcard__org{margin:-5px 0 0;padding-left:10px} } @media (min-width:768px) and (max-width:1099px){ .rs--testimonials .k-tgrid.k-tgrid{padding:20px 40px 100px} } @media (max-width:767px){ .rs--contact .k-hero.k-hero{box-sizing:content-box;min-height:250px;padding:20px 0} .rs--app-development .keel-region--intro.keel-region--intro{padding:10px} .rs--app-development .keel-region--split .columns.columns--1-1{gap:0} .rs--app-development .keel-region--split .columns--1-1>.column{padding:10px 0} .rs--app-development .keel-region--split .keel-cards{gap:0} .rs--app-development .keel-region--split .keel-cards:not(:last-child){margin-bottom:50px} .rs--app-development .keel-region--split .keel-cards .keel-cards__card{padding:10px;min-height:0} .rs--app-development .keel-region--split .keel-cards .keel-cards__picture{margin:0 auto 30px} .rs--app-development .keel-region--split .keel-cards .keel-cards__title{margin:0 0 25px} } /* 9c. selfcheck fix run 3, 2026-10-23 15:40 ET — ported from the saved source CSS (rendered JS-off @375/@768): (1) testimonials (>=768): title widget margin -20px + widget margin 20px = 0 net; grid starts 60px below the hero + 20px widget padding. (2) app-development phone: icon margin needs the img.keel-cards__picture specificity. (3) managed-it-services / who-we-work-with icon-box cards (<=1099): column wrap margin 10px, padding 20px (phone) / 40px (tablet); icon widget 60px (50px icon) + 20px; title margin-bottom 20px; text 16px/1.857 and the last paragraph keeps its 25.6px margin. */ @media (min-width:768px){ .rs--testimonials .k-tcard .k-tcard__title.k-tcard__title{margin:0} .rs--testimonials .k-tgrid.k-tgrid{margin-top:60px} } @media (max-width:767px){ .rs--app-development .keel-region--split .keel-cards img.keel-cards__picture.keel-cards__picture{margin:0 auto 30px} } @media (max-width:1099px){ .rs--managed-it-services .keel-region--features .keel-cards.keel-cards, .rs--who-we-work-with .keel-region--features .keel-cards.keel-cards{gap:20px;padding:10px 0} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__card.keel-cards__card, .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__card.keel-cards__card{margin:0;padding:40px;min-height:0} .rs--managed-it-services .keel-region--features .keel-cards img.keel-cards__picture.keel-cards__picture, .rs--who-we-work-with .keel-region--features .keel-cards img.keel-cards__picture.keel-cards__picture{height:50px;width:auto;margin:0 auto 30px} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__title.keel-cards__title, .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__title.keel-cards__title{margin:0 0 20px} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__text.keel-cards__text, .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__text.keel-cards__text{font-size:16px;line-height:1.857;margin:0 0 25.6px} } @media (max-width:767px){ .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__card.keel-cards__card, .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__card.keel-cards__card{padding:20px} } /* 9d. selfcheck fix run 3, 2026-10-23 15:30 ET — testimonials grid container: source post-2663 section boxed max-width 1400px (centred), column wrap padding-top 60px, widget padding 20px (rendered JS-off @1440/@1920: grid 1360px = 2 x 670 + 20). */ @media (min-width:768px){ .rs--testimonials .k-tgrid.k-tgrid{max-width:1400px;margin:60px auto 0} } /* 9e. selfcheck fix run 3, 2026-10-23 15:45 ET — tablet (768–1099), ported from the saved source CSS (rendered JS-off @768/@1024): (1) who-we-work-with: intro section 80px below the hero with 10px wrap padding (min-height 103px = 10+83+10); split section 80px below, 10px wrap padding, columns top-aligned with 20px between them (image column 33% incl. 10px padding). (2) funding-community (post-2561): section padding 0 40px; intro heading container margin 40px 0 + 20px widget margin; icon column 10% / heading column 90% with 10px padding; text widget ul margin-bottom 24px + 20px; inline Elementor rule `@media (max-width:1100px){.elementor-widget-button .elementor-button.elementor-size-sm{padding:1.75% 4%}}` (percent of the column); button widget 20px + 50px spacer + 20px before the next group; last button 0 then the section's 80px margin. */ @media (min-width:768px) and (max-width:1099px){ .rs--who-we-work-with .keel-region--intro.keel-region--intro{margin:80px auto 0;padding:10px;min-height:0} .rs--who-we-work-with .keel-region--split.keel-region--split{margin:80px auto 0;padding:10px;min-height:0} .rs--who-we-work-with .keel-region--split .columns.columns{gap:20px;align-items:start} .rs--funding-community .keel-region--intro.keel-region--intro{margin:40px 40px 60px !important;padding:0} .rs--funding-community .keel-region--body.keel-region--body{padding:0 40px;margin-bottom:0 !important} .rs--funding-community .keel-region--body .columns--1-1.columns--1-1{grid-template-columns:10% 90%;gap:0;margin:0;min-height:0;align-items:center} .rs--funding-community .keel-region--body .columns--1-1 h3.keel-block--heading{padding:10px} .rs--funding-community .keel-region--body>.keel-block--richText{margin:0 0 20px} .rs--funding-community .keel-region--body .rich-text ul{margin-bottom:24px} .rs--funding-community .keel-region--body>a.button.keel-block--button{padding:1.75% 4%;margin:0 0 90px !important} .rs--funding-community .keel-region--body>a.button.keel-block--button:last-child{margin-bottom:0 !important} } /* ===== 9f. resonate-newsletter rebuilt from source post-6347.css (run3, 2026-10-23). Replaces the eyeballed min-height:1070 / stacked-intro hacks. Source has Astra transparent header over section edj39xu (content starts y120 desktop / y90 tablet / y75 phone); Keel header is in flow (89 / 69 / 71px), so intro padding-top = source padding - Keel header height. ===== */ body.rs--resonate-newsletter .keel-region--intro{max-width:1140px;margin:0 auto;padding:31px 20px 0;min-height:0;box-sizing:border-box;background:linear-gradient(180deg,#08449F08 0%,rgba(255,255,255,0) 100%)} /* edj39xu widget-wrap: flex wrap, align-items:center; d058f76 100%; ba215d5 + ae17007 50% align-self:center */ body.rs--resonate-newsletter .k-split-intro{display:flex!important;flex-wrap:wrap;align-items:center;gap:0;margin:0} body.rs--resonate-newsletter .k-split-intro>.column:first-child{display:contents} body.rs--resonate-newsletter .k-split-intro>.column:last-child{flex:0 0 50%;max-width:50%;padding-left:40px;box-sizing:border-box} /* d058f76: icon 123px, widget-container margin-bottom -25px (wrapper 133px -> 108px) + widget spacing 20px */ body.rs--resonate-newsletter .k-split-intro .k-sticker{flex:0 0 100%;width:auto;margin:0 0 5px} body.rs--resonate-newsletter .k-split-intro .k-sticker img{width:123px;height:123px;margin:0} /* ba215d5 heading 30px, kit line-height 1.4, colour text */ body.rs--resonate-newsletter .k-split-intro h1{flex:0 0 50%;max-width:50%;margin:0;font-size:30px;line-height:1.4;color:#252525} body.rs--resonate-newsletter .k-split-intro .rich-text{margin:0;font-size:16px;line-height:1.857} body.rs--resonate-newsletter .k-split-intro .rich-text p{margin:0 0 25.6px} /* 0367610: widget-container margin-top 30px, widget spacing 20px */ body.rs--resonate-newsletter .k-wide-pic{margin:30px 0 20px;display:block} body.rs--resonate-newsletter .k-wide-pic img{width:100%;height:auto;max-height:none;display:block} /* 216bdf1 inner section margin-top -80px; same 1100px container */ body.rs--resonate-newsletter .keel-region--features{max-width:1140px;margin:-80px auto 0!important;padding:0 20px;box-sizing:border-box;position:relative;z-index:2} /* columns 52a4b91 44.332% / 0907b8d 10% / 34d33e2 45%; populated margin 20, padding 20 (0 at <=1099), radius 30, shadow */ body.rs--resonate-newsletter .k-boxes{display:flex!important;gap:0;align-items:stretch;margin:0} body.rs--resonate-newsletter .k-boxes>.column:first-child{flex:0 0 calc(44.332% - 40px)} body.rs--resonate-newsletter .k-boxes>.column:last-child{flex:0 0 calc(45% - 40px)} body.rs--resonate-newsletter .k-boxes>.column:not(:nth-child(2)){margin:20px;padding:20px;border-radius:30px;box-shadow:0 0 27px -10px rgba(0,0,0,.5);display:flex;flex-direction:column;justify-content:center;box-sizing:border-box} body.rs--resonate-newsletter .k-boxes>.column:nth-child(2){flex:0 0 10%;padding:10px;box-sizing:border-box;display:flex;align-items:center;justify-content:center} /* c9c8387/de37808 icon widgets: padding-top 20, 50px icon, widget box 80px, spacing 10 */ body.rs--resonate-newsletter .k-boxes>.column:not(:nth-child(2)) .keel-block--image{width:auto;height:80px;padding:20px 0 0;margin:0 0 10px;box-sizing:border-box;display:flex;justify-content:center} body.rs--resonate-newsletter .k-boxes>.column:not(:nth-child(2)) .keel-block--image img{height:50px;width:auto} body.rs--resonate-newsletter .k-boxes>.column:nth-child(2) .keel-block--image{width:auto;height:60px;margin:0;display:flex;align-items:center;justify-content:center} body.rs--resonate-newsletter .k-boxes>.column:nth-child(2) .keel-block--image img{height:50px;width:auto} /* 7d63ffc/a0983a4 text: padding 0 20, centre, white, 16/1.857, p mb 25.6 */ body.rs--resonate-newsletter .k-boxes .rich-text{margin:0;padding:0 20px;text-align:center;font-size:16px;line-height:1.857} body.rs--resonate-newsletter .k-boxes .rich-text p{margin:0 0 25.6px} /* 5d9fe30: widget-container margin-top 50px, text start, p mb 25.6 */ body.rs--resonate-newsletter .keel-region--features>.keel-block--richText{max-width:none;margin:50px 0 0;text-align:start;font-size:16px;line-height:1.857} body.rs--resonate-newsletter .keel-region--features>.keel-block--richText p{margin:0 0 25.6px} /* 798ffe2 CTA: bg astglobalcolor6 #E5E5E5, padding 40 + column populated 10; e03ef67 centre; 1387b52 align-center, accent bg, border 0, hover text colour */ body.rs--resonate-newsletter .keel-region--body{min-height:0!important;max-width:none;margin:0;padding:50px;background:#E5E5E5;text-align:center} body.rs--resonate-newsletter .keel-region--body .k-band-grey{background:none;padding:0;margin:0 0 20px;font-size:32px;line-height:1.3} body.rs--resonate-newsletter .keel-region--body a.button.k-band-grey-end{display:inline-block;width:auto;max-width:100%;margin:0;border-width:0;padding:18px 30px;background:var(--accent);box-sizing:border-box} body.rs--resonate-newsletter .keel-region--body a.button.k-band-grey-end:hover,body.rs--resonate-newsletter .keel-region--body a.button.k-band-grey-end:focus{background:#252525} @media (max-width:1099px){ body.rs--resonate-newsletter .keel-region--intro{padding:21px 25px 0!important;max-width:none} } @media (max-width:1099px){ body.rs--resonate-newsletter .k-split-intro h1{align-self:flex-start} body.rs--resonate-newsletter .k-split-intro>.column:last-child{padding-left:0} body.rs--resonate-newsletter .k-boxes>.column:not(:nth-child(2)){padding:0} /* section edj39xu padding 90px 25px 90px: bottom padding after 5d9fe30 */ body.rs--resonate-newsletter .keel-region--features{max-width:none;padding:0 25px 90px} } @media (max-width:767px){ body.rs--resonate-newsletter .keel-region--intro{padding:4px 20px 0!important} body.rs--resonate-newsletter .k-split-intro h1,body.rs--resonate-newsletter .k-split-intro>.column:last-child{flex:0 0 100%;max-width:100%;text-align:center} body.rs--resonate-newsletter .k-split-intro>.column:last-child{margin:10px 0 40px} body.rs--resonate-newsletter .k-wide-pic{margin:0 0 20px} /* edj39xu padding 75 20 50; 216bdf1 margin-top -50px */ body.rs--resonate-newsletter .keel-region--features{padding:0 20px 50px;margin-top:-50px!important} body.rs--resonate-newsletter .k-boxes{flex-wrap:wrap} body.rs--resonate-newsletter .k-boxes>.column:first-child,body.rs--resonate-newsletter .k-boxes>.column:last-child{flex:0 0 calc(100% - 40px)} body.rs--resonate-newsletter .k-boxes>.column:nth-child(2){flex:0 0 100%} } /* ===== 9g. newsletter phone: ae17007 widget-container margin 10px 0 40px collapses with p margin-bottom 25.6 in source (block flow); Keel column is a flex item (no collapse), so drop the last p margin on phone. ===== */ @media (max-width:767px){ body.rs--resonate-newsletter .k-split-intro>.column:last-child .rich-text p:last-child{margin-bottom:0} } /* ===== 9h. Montserrat italic (run3). Source loads Montserrat italic 100-900 (hummingbird dc4989...css, file montserrat-jtuqjig1_i6t8kchkm459wxrys7m.woff2, latin range); Keel only had the upright face, so italic text (testimonial bubbles, team mottos) was synthesised (narrower) -> fewer lines. ===== */ @font-face{font-family:"Montserrat";font-style:italic;font-weight:100 900;font-display:swap;src:url("/_media/26e45d7b-5ad2-4c49-8852-ba55e6dea571/original.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* home "What we do" cards on phone: source 24fc4e7 inner columns populated margin 10px, padding 20px; icon widget 60px + 20 spacing; text widget p margin-bottom 25.6; section wrap padding 10px; heading widget spacing 20 (+10 column margin) */ @media (max-width:767px){ body.rs--home .k-services .keel-region--services{padding:10px} body.rs--home .k-services .keel-region--services>.keel-block--heading{margin:0 0 30px} body.rs--home .k-services .keel-cards .keel-cards__card{margin:0 10px;padding:20px} body.rs--home .k-services img.keel-cards__picture.keel-cards__picture{margin-bottom:30px} body.rs--home .k-services .keel-cards .keel-cards__text{margin-bottom:25.6px} } /* ===== 9i. about-us team on tablet (run3). Source a0c978e at 768-1099: columns 40% / 60%, no section padding; col 1 populated padding 10px 20px 0 40px, text widget 830c2a8 container padding-right 10px; col 2 populated padding 10px, portfolio grid 2 columns, gap ~10px (215px cards at 768). Replaces the eyeballed .k-team{padding:0 40px}. ===== */ @media (min-width:768px) and (max-width:1099px){ body.rs--about .k-team{padding:0;grid-template-columns:40% 60%} body.rs--about .k-team .keel-region--team_intro{padding:10px 20px 0 40px} body.rs--about .k-team .keel-region--team_intro .rich-text{padding-right:10px} body.rs--about .k-team .k-team__grid.k-team__grid{margin:0;padding:10px;gap:10px;width:auto;max-width:none;grid-template-columns:repeat(2,minmax(0,1fr))} } /* ===== 9j. about-us "How It Started" on tablet (run3). Source 5711bb6 at 768-1099: section margin 0, column populated padding 40px; text widget 8b7ba60 full width (2 CSS columns, gap 30px), no inner padding. Keel kept the desktop margin 80 / padding 26 0 / 10px gutters. ===== */ @media (min-width:768px) and (max-width:1099px){ body.rs--about .keel-region--how{margin:0 auto;padding:40px;min-height:0} body.rs--about .keel-region--how .rich-text{max-width:none;padding:0;column-gap:30px} } /* ===== 9k. desktop Funding dropdown (run4). Source Astra, body.ast-desktop (computed on the JS-off local render, manual-checks/dropdown-check.json): inline-home.css .ast-builder-menu-1 .sub-menu{border-*-width:0}; frontend.min.css .main-header-menu .sub-menu .menu-link{padding:.9em 1em} (12.6px 14px), line-height 20.3px; inline-home.css .ast-desktop .ast-builder-menu-1 .menu-item .sub-menu .menu-link{border-style:none}; .astra-menu-animation-fade: opacity .3s ease-in-out. Replaces the eyeballed 2px brand top border, 12px 20px padding and #eaeaea separators. Mobile menu (<=1100) unchanged. ===== */ @media (min-width:1101px){ .k-sub{border-top:0;transition:opacity .3s ease-in-out} .k-sub__link{padding:.9em 1em;line-height:1.45;border-bottom:0} } /* ===== 9l. about-us team grid, desktop (run4). Source a0c978e col 2 widget-wrap padding 10px, .elementor-portfolio grid margin 0 (3 cols, gap 10). Keel .k-team__grid picked up margin 0 0 25.6px 48px from the generic Astra ul rule (ul{margin:0 0 1.5em 3em}); tablet/phone already reset. ===== */ @media (min-width:1100px){ body.rs--about .k-team .k-team__grid.k-team__grid{margin:0} } /* ===== 9m. technology Labourly showcase image (run4). Source 690fcc3 image widget: WP size-large img width="1024" (max-width:100%, height:auto), centred in the 50% column (elementor-widget-image text-align:center). Keel stretched the 1692px original to the full column (1280 at 2560). ===== */ .rs--technology .k-showcase > .column:last-child .keel-block--image{text-align:center} .rs--technology .k-showcase > .column:last-child .keel-block--image img{width:auto;max-width:min(100%,1024px);height:auto;margin:0 auto} /* ===== 9n. technology hero height, desktop (run4). Source post-2599.css custom CSS for column d6adb76 (elementor-hidden-tablet/phone): .bg-image{height:90vh}, so the 66aa719 hero row is 90vh tall (972px at 1920x1080). Keel had an eyeballed .k-tech-hero{min-height:805px} (= 90vh only at a 894px-high window). Tablet/phone rules (min-height:0) unchanged. ===== */ @media (min-width:1100px){ .rs--technology .k-tech-hero{min-height:90vh} } /* ===== run5 2026-10-23 (Vick 17:23 ET: fix the remaining crop-gate items) ===== */ /* run5 fix 6: IT connect box (source post-2618 f9de283 .elementor-section-items-middle: box column vertically centred in the row, margins 50/50) */ @media (min-width:768px){.rs .k-connect .k-connect__box{align-self:center}} /* run5 fix 2: portfolio cards (source loop template post-505 #e818100): image column c5be24e width 33% with the photo as a cover background filling the full card height (background-size:cover; background-position:center center); card 1100px (container 1140 - 20px each side); text column 1c79e60 margin-left -3% + widget-wrap padding 30px */ @media (min-width:1100px){ .rs--portfolio .k-portfolio{padding:0 20px} .rs--portfolio .k-pcard{position:relative;grid-template-columns:33% 1fr} .rs--portfolio .k-pcard img.k-pcard__pic{position:absolute;top:0;left:0;width:33%;height:100%;min-height:0;object-fit:cover;object-position:center center} .rs--portfolio .k-pcard .k-pcard__body{grid-column:2;padding:30px 52px 30px 8px} } /* run5 fix 3: testimonials (source loop template post-3170): quote = Font Awesome 5 "quote-left" icon widget bb3531f, 90px, rgba(237,29,29,.18) (primary at 18%), absolutely positioned over the first lines; author name widget adb6656 text-transform:uppercase. Icon drawn as an SVG mask (Font Awesome Free, CC BY 4.0). */ .rs--testimonials .k-tcard .k-tcard__body::before{content:"";top:13px;left:40px;width:90px;height:90px;font-size:90px;line-height:1;background-color:rgba(237,29,29,.18);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 448)' d='M464 192c26.5 0 48 -21.5 48 -48v-128c0 -26.5 -21.5 -48 -48 -48h-128c-26.5 0 -48 21.5 -48 48v240c0 88.4 71.6 160 160 160h8c13.3 0 24 -10.7 24 -24v-48c0 -13.3 -10.7 -24 -24 -24h-8c-35.3 0 -64 -28.7 -64 -64v-64h80zM176 192 c26.5 0 48 -21.5 48 -48v-128c0 -26.5 -21.5 -48 -48 -48h-128c-26.5 0 -48 21.5 -48 48v240c0 88.4 71.6 160 160 160h8c13.3 0 24 -10.7 24 -24v-48c0 -13.3 -10.7 -24 -24 -24h-8c-35.3 0 -64 -28.7 -64 -64v-64h80z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 448)' d='M464 192c26.5 0 48 -21.5 48 -48v-128c0 -26.5 -21.5 -48 -48 -48h-128c-26.5 0 -48 21.5 -48 48v240c0 88.4 71.6 160 160 160h8c13.3 0 24 -10.7 24 -24v-48c0 -13.3 -10.7 -24 -24 -24h-8c-35.3 0 -64 -28.7 -64 -64v-64h80zM176 192 c26.5 0 48 -21.5 48 -48v-128c0 -26.5 -21.5 -48 -48 -48h-128c-26.5 0 -48 21.5 -48 48v240c0 88.4 71.6 160 160 160h8c13.3 0 24 -10.7 24 -24v-48c0 -13.3 -10.7 -24 -24 -24h-8c-35.3 0 -64 -28.7 -64 -64v-64h80z'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none} .rs--testimonials .k-tcard .k-tcard__name{text-transform:uppercase} /* run5 fix 4: who-we-work-with "Who We Serve" cards, desktop (source post-2477 #5f7436bb container max-width 1400px; columns 33.33%; widget-wrap margin 10px, padding 40px; icon widget 59px (50px icon) + 20px; title margin-bottom 20px; text 16px/1.857 with its last paragraph margin 25.6px). <=1099 already ported in 9c. */ @media (min-width:1100px){ .rs--who-we-work-with .keel-region--features.keel-region--features{max-width:1400px;padding:0} .rs--who-we-work-with .keel-region--features>.keel-block--heading{max-width:1120px} .rs--who-we-work-with .keel-region--features .keel-cards.keel-cards{grid-template-columns:repeat(3,1fr);grid-template-rows:none;gap:0} .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__card.keel-cards__card{margin:10px;padding:40px;min-height:0} .rs--who-we-work-with .keel-region--features .keel-cards img.keel-cards__picture.keel-cards__picture{height:50px;width:auto;margin:0 auto 29px} .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__title.keel-cards__title{margin:0 0 20px} .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__text.keel-cards__text{font-size:16px;line-height:1.857;margin:0 0 25.6px} } /* run5 fix 5: app-development intro (source post-2609 #283bba3 boxed section: container 1140px, widget-wrap padding 10px; Keel had an eyeballed 1600px) */ .rs--app-development .keel-region--intro.keel-region--intro{max-width:1140px} /* run5 fix 7: thank-you buttons (source post-4770 #a8e28eb fas fa-download before the text, gap 11px; #40f5925 fas fa-arrow-right after the text (row-reverse), gap 5px; icon 1em of the 12.8px button text; colour follows the button text). Font Awesome Free icons (CC BY 4.0) as SVG masks. */ .rs--thankyou .keel-region--intro a.button--primary::before,.rs--thankyou a.button.k-band-mist-end::after{content:"";display:inline-block;height:1em;vertical-align:-.125em;background-color:currentColor} .rs--thankyou .keel-region--intro a.button--primary::before{width:1em;margin-right:12px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 448)' d='M216 448h80c13.3 0 24 -10.7 24 -24v-168h87.7c17.8 0 26.7 -21.5 14.1 -34.1l-152.1 -152.2c-7.5 -7.5 -19.8 -7.5 -27.3 0l-152.3 152.2c-12.6 12.6 -3.7 34.1 14.1 34.1h87.8v168c0 13.3 10.7 24 24 24z M512 72v-112c0 -13.3 -10.7 -24 -24 -24h-464c-13.3 0 -24 10.7 -24 24v112c0 13.3 10.7 24 24 24h146.7l49 -49c20.1 -20.1 52.5 -20.1 72.6 0l49 49h146.7c13.3 0 24 -10.7 24 -24zM388 -16c0 11 -9 20 -20 20s-20 -9 -20 -20 s9 -20 20 -20s20 9 20 20zM452 -16c0 11 -9 20 -20 20s-20 -9 -20 -20s9 -20 20 -20s20 9 20 20z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 448)' d='M216 448h80c13.3 0 24 -10.7 24 -24v-168h87.7c17.8 0 26.7 -21.5 14.1 -34.1l-152.1 -152.2c-7.5 -7.5 -19.8 -7.5 -27.3 0l-152.3 152.2c-12.6 12.6 -3.7 34.1 14.1 34.1h87.8v168c0 13.3 10.7 24 24 24z M512 72v-112c0 -13.3 -10.7 -24 -24 -24h-464c-13.3 0 -24 10.7 -24 24v112c0 13.3 10.7 24 24 24h146.7l49 -49c20.1 -20.1 52.5 -20.1 72.6 0l49 49h146.7c13.3 0 24 -10.7 24 -24zM388 -16c0 11 -9 20 -20 20s-20 -9 -20 -20 s9 -20 20 -20s20 9 20 20zM452 -16c0 11 -9 20 -20 20s-20 -9 -20 -20s9 -20 20 -20s20 9 20 20z'/%3E%3C/svg%3E") center/contain no-repeat} .rs--thankyou a.button.k-band-mist-end::after{width:.875em;margin-left:6px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 448)' d='M190.5 381.1l22.2 22.2c9.4 9.4 24.6 9.4 33.9 0l194.4 -194.3c9.4 -9.4 9.4 -24.6 0 -33.9l-194.4 -194.4c-9.4 -9.4 -24.6 -9.4 -33.9 0l-22.2 22.2c-9.5 9.5 -9.3 25 0.4 34.3 l120.5 114.8h-287.4c-13.3 0 -24 10.7 -24 24v32c0 13.3 10.7 24 24 24h287.4l-120.5 114.8c-9.8 9.3 -10 24.8 -0.4 34.3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 448)' d='M190.5 381.1l22.2 22.2c9.4 9.4 24.6 9.4 33.9 0l194.4 -194.3c9.4 -9.4 9.4 -24.6 0 -33.9l-194.4 -194.4c-9.4 -9.4 -24.6 -9.4 -33.9 0l-22.2 22.2c-9.5 9.5 -9.3 25 0.4 34.3 l120.5 114.8h-287.4c-13.3 0 -24 10.7 -24 24v32c0 13.3 10.7 24 24 24h287.4l-120.5 114.8c-9.8 9.3 -10 24.8 -0.4 34.3z'/%3E%3C/svg%3E") center/contain no-repeat} /* run5 fix 8: contact textarea (source WPForms textarea.wpforms-field-medium{height:120px}; Keel had an eyeballed min-height 150px) */ .rs--contact textarea.keel-field__input{min-height:0;height:120px} /* ===== run5-2 2026-10-23: follow-ups measured at 1920 WebKit after run5-1 ===== */ @media (min-width:1100px){ /* portfolio: source list section #50fe79b puts the first card 20px below its top and ends 20px below the last card (widget-wrap 10px + loop grid 10px) */ .rs--portfolio .k-portfolio.k-portfolio{padding:20px} /* who we serve: source columns are independent flex columns (equal height, titles not row-aligned); Keel cards were 3-row subgrids */ .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__card.keel-cards__card{grid-row:auto;display:flex;flex-direction:column} /* who we serve heading: source heading section #5068669 widget-wrap padding 10px above and below the h2 */ .rs--who-we-work-with .keel-region--features>.keel-block--heading.keel-block--heading{padding:10px 0} /* app-development intro: source text-editor widget keeps the last paragraph margin 25.6px (as ported for 768-1099 in 8ad) */ .rs--app-development .keel-region--intro .rich-text p:last-child{margin-bottom:25.6px} } /* ===== run5-3 2026-10-23: testimonials follow-ups (source post-3170, rendered 1920 WebKit) ===== */ @media (min-width:768px){ /* the grey is on the card's widgets only (#F5F5F5 widget containers), so a shorter card does not fill the grid row */ .rs--testimonials .k-tgrid .k-tcard.k-tcard{align-self:start} /* name widget adb6656 starts 30.6px below the last paragraph: p margin 25.6 + content widget padding-bottom 5 - margin 20 + widget gap 20 */ .rs--testimonials .k-tcard__body p.k-tcard__name.k-tcard__name{margin-top:30.6px} } /* ===== run5-4 2026-10-23: testimonials phone (<768) = the same post-3170 card rules (the template has no phone overrides); list section #5b75d61a on phone: cards x30 w315 @375 (grid padding 30px), first card 60px below the hero, 20px gap, 30px + 80px below the last card. Replaces the eyeballed phone block (padding 60/22/72, name 32px). Quote icon bb3531f is absolute at top:130px / left:40px of the card (not of the text widget). ===== */ .rs--testimonials .k-tcard.k-tcard{position:relative} .rs--testimonials .k-tcard .k-tcard__body.k-tcard__body{position:static} .rs--testimonials .k-tcard .k-tcard__body.k-tcard__body::before{position:absolute;top:130px;left:40px;margin:0} @media (max-width:767px){ .rs--testimonials .k-tgrid.k-tgrid{max-width:none;margin:0;padding:59px 30px 110px;gap:20px;grid-template-columns:1fr;box-sizing:border-box} .rs--testimonials .k-tgrid .k-tcard.k-tcard{min-height:0;display:block;margin:0;align-self:start} .rs--testimonials .k-tcard .k-tcard__title.k-tcard__title{padding:40px;margin:0} .rs--testimonials .k-tcard .k-tcard__body.k-tcard__body{padding:40px 40px 45px !important;font-size:16px;line-height:1.857} .rs--testimonials .k-tcard__body p{margin:0 0 25.6px} .rs--testimonials .k-tcard__body p.k-tcard__name.k-tcard__name{margin:30.6px 0 0;padding-left:10px} .rs--testimonials .k-tcard__body p.k-tcard__role.k-tcard__role{margin:0;padding-left:10px} .rs--testimonials .k-tcard__body p.k-tcard__org.k-tcard__org{margin:-5px 0 0;padding-left:10px} } /* ===== run5-5 2026-10-23: home hero + glossary, ported from post-2387 (rendered JS-off @375) ===== */ /* glossary text widgets (5a3836c/28b7050/d5f3873) keep the paragraph margin 25.6px inside the widget (replaces the min-height:55px stand-in, which only fitted one-line items) */ .k-home-hero .keel-region--glossary .rich-text.rich-text{min-height:0} .k-home-hero .keel-region--glossary .rich-text p{margin:0 0 25.6px} @media (max-width:767px){ /* hero column ac91bd5: .bg-image height 90vh; widget-wrap padding 20px with the widgets vertically centred (align-content:center) */ .k-home-hero .keel-region--hero_media.keel-region--hero_media{height:90vh;min-height:0} .k-home-hero .keel-region--hero.keel-region--hero{align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:20px;box-sizing:border-box} /* 5ff196e: 20px/1.2em, p margin 32px, widget margin-bottom -34px, widget gap 20px -> 18px below the text */ .k-home-hero .keel-region--hero>.rich-text:first-of-type{margin:0 0 18px} .k-home-hero .keel-region--hero>.rich-text:first-of-type p{margin:0;padding:0;line-height:1.2} /* b5e45a5: 16px/1.4em, p margin 25.6px, widget margin-bottom -18px, gap 20px -> 27.6px below */ .k-home-hero .keel-region--hero>.rich-text:nth-of-type(2){margin:0 0 27.6px;font-size:16px} .k-home-hero .keel-region--hero>.rich-text:nth-of-type(2) p{margin:0;padding:0;line-height:1.4} /* 5f373ae: button is inline (centred), widget margin-bottom 30px */ .k-home-hero .keel-region--hero>.keel-block--button.keel-block--button{display:inline-block;align-self:center;margin:0 0 30px} /* glossary column c6e4c8c: width 90%, widget-wrap margin -50px 0 20px, padding 40px */ .k-home-hero .keel-region--glossary.keel-region--glossary{width:90%} } /* ===== run5-6 2026-10-23: home phone (<768) stats / art / testimonials, ported from post-2387 (rendered JS-off @375) ===== */ @media (max-width:767px){ /* stats b0f9cdd: column 51168ad widget-wrap padding 40px; intro text widget 3562446 keeps p margin 25.6px + 20px widget gap; counters inner section directly after; footnote 2705763 p margin 25.6px */ .k-stats.k-stats{padding:0} .k-stats .keel-region--stats.keel-region--stats{padding:40px} .k-stats .keel-region--stats>.rich-text:nth-of-type(1){margin:0 0 20px} .k-stats .keel-region--stats>.rich-text:nth-of-type(1) p{margin:0 0 25.6px} .k-stats .keel-region--stats>.rich-text:nth-of-type(2) ul{margin:0} .k-stats .keel-region--stats>.rich-text:nth-of-type(3){margin:0} .k-stats .keel-region--stats>.rich-text:nth-of-type(3) p{margin:0 0 25.6px} /* art ff04de3: widget-wrap padding 20px, heading 6503912 + text a0d245a + text 62a09ff text-align:center; text keeps p margin 25.6px + 20px gap */ .k-art .keel-region--art.keel-region--art{margin:0 0 20px;text-align:center} .k-art .keel-region--art .keel-block--heading{text-align:center} .k-art .keel-region--art .rich-text p:last-child{margin-bottom:25.6px} /* gallery 0ea76b0: 300px thumbnails (height-bound), centred in the 10px-padded gallery item */ .k-art .keel-region--awards img{width:auto;max-width:300px;height:auto;max-height:300px;margin:0 auto} /* CTA 62a09ff: p margin 25.6px, widget margin-bottom -35px, gap 20px -> 10.6px; centred */ .k-art .keel-region--art_cta{text-align:center} .k-art .keel-region--art_cta .rich-text{margin:0 0 10.6px} .k-art .keel-region--art_cta .rich-text p{margin:0} /* testimonial carousel a01bfa8: section widget-wrap padding 10px; slide padding 20px; cite 14px/1.5 with the title on its own line */ .keel-region--testimonial.keel-region--testimonial{padding:10px 10px 34px;min-height:0} .keel-region--testimonial .keel-slider__slide.keel-slider__slide{padding-top:20px;padding-bottom:20px} .keel-region--testimonial .keel-slider__quote>footer{line-height:1.5} .keel-region--testimonial .keel-slider__role{display:block} } /* ===== run5-7 2026-10-23: home phone stats follow-up — Elementor widget containers do not collapse margins (p margin stays inside the widget) ===== */ @media (max-width:767px){ .k-stats .keel-region--stats>.rich-text{display:flow-root} .k-stats .keel-region--stats>.rich-text:nth-of-type(2) ul{margin:0!important} } /* ===== run5-8 2026-10-23: home phone testimonial — source cite footer sits 25px below the text (no extra flex gap) ===== */ @media (max-width:767px){ .keel-region--testimonial .keel-slider__quote.keel-slider__quote{gap:0} } /* ===== run5-9 2026-10-23: contact form (source WPForms in column 33bba25, post-35; rendered JS-off @1280/@1024/@375) ===== */ /* fields stack with no gap (field padding 10px 0); label and checkbox legend 16px/1.857 (30px), checkbox row 30px; submit container padding-top 10px */ .rs--contact form.keel-form.keel-form{row-gap:0} .rs--contact .keel-form .keel-field.keel-field{gap:0} .rs--contact .keel-form .keel-field__label.keel-field__label{line-height:1.857;padding:0} .rs--contact .keel-form .keel-field__options.keel-field__options{margin:0} .rs--contact .keel-form .keel-field__choice,.rs--contact .keel-form .keel-field__choice label{line-height:1.857} .rs--contact .keel-form .keel-form__actions{padding-top:10px} /* <=1100: Astra html{font-size:85.5%} scales the rem-based WPForms inputs: 13.68px text, 10.26px padding, 38.5px inputs (textarea stays 120px) */ @media (max-width:1100px){ .rs--contact .keel-form .keel-field__input.keel-field__input{font-size:13.68px;padding:10.26px} .rs--contact .keel-form input.keel-field__input.keel-field__input{height:38.5px} .rs--contact .keel-form textarea.keel-field__input.keel-field__input{line-height:1.857} } /* section column 33bba25 widget-wrap: padding 10% (<=1099) / 50px 30px (<=767), margin-bottom 80px (replaces the eyeballed 28/20/20 and 60/30/56 blocks) */ @media (max-width:1099px){ .rs--contact .keel-region--widgets.keel-region--widgets{padding:10% !important;margin:0 auto 80px} } @media (max-width:767px){ .rs--contact .keel-region--widgets.keel-region--widgets{padding:50px 30px !important;margin:0 auto 80px} } /* ===== run5-10 2026-10-23: contact follow-ups (rendered source @1280/@1024) ===== */ @media (min-width:1100px){ /* column 33bba25 widget-wrap padding 10% 15% of the 1080px container (108/162px); the form widget ends 25px below the submit row (WPForms container margin) */ .rs--contact .keel-region--widgets.keel-region--widgets{padding:108px 162px 133px !important} } @media (min-width:768px) and (max-width:1099px){ /* intro section 9d47c0c: two 50% columns, widget-wrap padding 40px, content top-aligned, no extra region padding */ .rs--contact .keel-region--split.keel-region--split{padding:0} .rs--contact .keel-region--split .columns{gap:0;align-items:stretch} .rs--contact .keel-region--split .column{align-self:stretch;justify-content:flex-start} /* Astra kit @media (max-width:1100px) .elementor-button{padding:1.75% 4%} (percent of the column) */ .rs--contact .keel-region--split a.button.keel-block--button{padding:1.75% 4%} } /* ===== run6 / round 8 (Vick 00:02 ET 24 Oct): ported from source CSS, element diff ===== */ /* R8-1 Astra sticky primary header (home data: header_main_stick 1, sticky_header_on_devices both, sticky_header_style none, sticky_hide_on_scroll 0; astra-addon .ast-header-sticky-active{position:fixed;top:0;z-index:99}; .main-header-bar.ast-sticky-active{box-shadow:0 2px 10px 0 rgba(36,50,66,.075)}). Header stays anchored on every page, all widths. */ .k-header{position:sticky;top:0;z-index:99} .k-header.k-header--stuck{box-shadow:0 2px 10px 0 rgba(36,50,66,.075)} /* R8-2 Astra scroll-to-top (#ast-scroll-top.ast-scroll-top-icon.ast-scroll-to-top-right, data-on-devices both): display none until scrollY>300 (Astra JS); fixed right 30 bottom 30; 2.1em box, 15px, #ed1d1d, radius 10px, #fff; ::before Astra icon font U+E900 (chevron, GPL Astra theme) as mask; whole box rotate(180deg) */ .k-scroll-top{display:none;position:fixed;right:30px;bottom:30px;z-index:99;width:2.1em;height:2.1em;line-height:2.1;font-size:15px;color:#fff;background-color:#ed1d1d;border-radius:10px;text-align:center;cursor:pointer;transform:rotate(180deg);outline:inherit;box-sizing:content-box} .k-scroll-top.is-visible{display:block} .k-scroll-top::before{content:"";display:block;width:1em;height:1em;margin:.55em auto 0;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix%281 0 0 -1 0 960%29' d='M963 664Q953 674 939.5 674.0Q926 674 917 664L512 258L106 664Q97 674 83.5 674.0Q70 674 60 664Q51 654 51.0 640.5Q51 627 60 618L488 190Q493 185 499.0 183.0Q505 181 511 181Q517 181 523.0 183.0Q529 185 534 190L962 618Q972 627 972.0 640.5Q972 654 963 664Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath transform='matrix%281 0 0 -1 0 960%29' d='M963 664Q953 674 939.5 674.0Q926 674 917 664L512 258L106 664Q97 674 83.5 674.0Q70 674 60 664Q51 654 51.0 640.5Q51 627 60 618L488 190Q493 185 499.0 183.0Q505 181 511 181Q517 181 523.0 183.0Q529 185 534 190L962 618Q972 627 972.0 640.5Q972 654 963 664Z'/%3E%3C/svg%3E") center/100% 100% no-repeat} .k-scroll-top:focus{border-style:dotted;border-color:inherit;border-width:thin} /* R8-3 client logos = Elementor image-carousel a396def (JS on): slides_to_show 6 (tablet 2, mobile 1 defaults), image_spacing_custom 20px (swiper spaceBetween), .swiper-slide-inner img max-width:100% at natural size (BMG 176x106, CC2019 130x100 not upscaled), slides centred; section #42d8cf1 padding 80px 40px + widget-wrap 10px => content inset 50px (phone rule 20px kept) */ .rs .keel-region--client_logos img{width:auto;max-width:100%;height:auto;max-height:none} .rs .k-logos{width:calc(100% + 20px);margin-right:-20px;min-height:0} .rs .keel-region--client_logos{min-height:0} .rs .keel-region--client_logos .keel-block--image{min-height:0;padding:0 20px 0 0} @media (min-width:768px){.rs .k-clients{padding-left:50px;padding-right:50px}} /* R8-4 fonts per element (source computed/rules) */ /* home alert heading 7fc9c5e: h3 Elementor heading = font-weight 700 (kit h3) */ .rs .keel-region--alert h3{font-weight:700} /* home testimonial carousel cite: .elementor-testimonial__name/__title line-height 1.5 (21px at 14px) */ .rs .keel-slider__author,.rs .keel-slider__role{line-height:1.5} /* footer address 59e399f2: icon-list text 16px/400, body line-height 1.857, padding-inline-start 5px */ .rs .k-footer__addr span{font-size:16px;line-height:1.857;padding-left:5px} /* portfolio (post-505): title 58762d4 colour var(--e-global-color-primary) #08449f, text already uppercase in source; labels 9e32c85 20px/700 letter-spacing 1.5px colour text #2d2d2d; client 3a5695b h4 600 #252525 */ .rs .k-pcard__title{color:#08449f} .rs .k-pcard__label{letter-spacing:1.5px;color:#2d2d2d} .rs .k-pcard__client{font-weight:600;color:#252525} /* technology intro 199db9b: font-size 1.8em, weight 500, colour text (#252525 computed), line-height = body 1.857 */ .rs--technology .k-tech-hero>.column:first-child .rich-text:first-child p{font-weight:500;line-height:1.857} .rs--technology .k-tech-hero>.column:first-child .rich-text p,.rs--technology .k-tech-hero>.column:first-child .rich-text strong{color:#252525} /* technology band 35a097e h4: letter-spacing normal */ .rs--technology .keel-region--intro .k-band-brand h4{letter-spacing:normal} /* contact WPForms checkbox/radio labels: 16px, body line-height, colour #2d2d2d */ .rs .keel-field__choice label{font-size:16px;line-height:1.857;color:#2d2d2d} /* R8-5 about team grid (post-2652 1c70b44 in col-66, widget-wrap padding 10px): grid inset 10px both sides, no own padding; overlay title h4 18px/18px 700 uppercase */ @media (min-width:1100px){body.rs--about .k-team .k-team__grid.k-team__grid{padding:0;margin:0 10px}} .rs .k-team-card .k-team-card__name{font-size:18px;line-height:1;font-weight:700} /* R8-6 contact WPForms field label "Nature of your request" (.wpforms-field-label) colour #2d2d2d like the other labels */ .rs .keel-form legend{color:#2d2d2d} /* R8-7 header bar = Astra .ast-primary-header-bar: desktop (>=1101) 88px, no border, no shadow, .ast-container 1140 with 20px padding (logo x = container + 20; menu ends at content edge); mobile (<=1100) border-bottom 3px #dddddd, no shadow. Stuck shadow kept (R8-1). */ @media (min-width:1101px){.k-header{height:88px;border-bottom:0;box-shadow:none}.k-header__in{padding:0 20px}.k-header__nav{top:88px}} @media (max-width:1100px){.k-header{border-bottom:3px solid #ddd;box-shadow:none}} .k-header.k-header--stuck{box-shadow:0 2px 10px 0 rgba(36,50,66,.075)} /* R8-8 technology hero button ffebfe8: elementor-mobile-align-center only => left (start) above 767px, centred on phone */ @media (min-width:768px){.rs--technology .k-tech-hero>.column:first-child>.button{display:table;margin-left:0;margin-right:auto}} /* R8-9 testimonials cards (post-3170 loop item): role/organisation text colour #252525 (--e-global-color-text) */ .rs .k-tcard__role,.rs .k-tcard__org{color:#252525} /* R8-10 home hero text (post-2387 5ff196e / b5e45a5) @media(max-width:1099px): font-size 3vw / 2vw (phone 20px / 16px rules stay) */ @media (min-width:768px) and (max-width:1099px){.k-home-hero .keel-region--hero .rich-text:first-child{font-size:3vw}.k-home-hero .keel-region--hero .rich-text:not(:first-child){font-size:2vw}} /* R8-11 technology intro (post-2599) @media(max-width:767px): 199db9b line-height 1.4em, 55be5e1 line-height 1.2em */ @media (max-width:767px){.rs--technology .k-tech-hero>.column:first-child .rich-text:first-child p{line-height:1.4em}.rs--technology .k-tech-hero>.column:first-child .rich-text:not(:first-child) p{line-height:1.2em}} /* R8-12 text colours from source computed: app-development icon-box titles, contact WPForms labels = #2d2d2d (Astra body text); home art CTA text (text-editor, --e-global-color-text) = #252525 */ .rs--app-development .keel-cards__title{color:#2d2d2d} .rs .keel-form .keel-field__label{color:#2d2d2d} .rs .keel-region--art_cta .rich-text p,.rs .keel-region--art_cta .rich-text strong{color:#252525} /* R8-13 footer logo on phone = image widget 71195a00 in col-20 (100% on phone): widget-wrap padding 7%, widget padding 5px, img 100% */ @media (max-width:767px){.rs .k-footer__logo{padding:0 calc(7% + 5px);box-sizing:border-box;width:100%}.rs .k-footer__logo img{width:100%;max-width:100%}} /* R8-14 technology showcase on phone (post-2599): image column 690fcc3 full-bleed (no padding); text/logo column widget-wrap margin 0 40px + padding 10px => content 275px at 375 */ @media (max-width:767px){body.rs--technology .keel-region--split{padding-left:0;padding-right:0}body.rs--technology .keel-region--split .columns{padding-left:0;padding-right:0}body.rs--technology .keel-region--split .columns>.column:first-child{padding-left:50px;padding-right:50px}} /* R8-15 home art column (post-2387 col-66 widget-wrap): margin 0 40px + padding-right 10% => right inset = 10% + 40px (Keel had only 10%) */ @media (min-width:1100px){.k-art__main{padding-right:calc(10% + 40px)}} /* R8-16 home "What we do" (post-2387 inner section): .elementor-container max-width 1400px, col-33 widget-wrap margin 10px + padding 40px => cards 447px / text 367px at >=1420px */ .rs .keel-region--services{max-width:1400px} /* R8-16b services inner section sits in the top column widget-wrap (padding 10px): width = 100% - 20px, capped at 1400px */ @media (min-width:1100px){.rs .keel-region--services{width:calc(100% - 20px);box-sizing:border-box}} /* R8-17 home alert row (post-2387 inner section under the logos): full container width, columns 85.947% (text, end-aligned) / 14.053% (button centred), each widget-wrap padding 10px (Keel had the whole row at 85.947% width with auto margins) */ @media (min-width:1100px){ .rs .keel-region--alert{width:100%;margin:40px 0 0;padding:10px 0;grid-template-columns:85.947% 14.053%;column-gap:0;box-sizing:border-box} .rs .keel-region--alert .keel-block--heading,.rs .keel-region--alert .rich-text{padding:0 10px} .rs .keel-region--alert .keel-block--button{justify-self:center} } /* R8-18 home "What we do" cards: source Elementor columns are independent (icon, title, text stack per card; no row alignment across cards). Keel cards use subgrid rows, which stretched 1-line titles to the tallest title in the row (+27/+54px). Cards stack their own content here. */ .rs .keel-region--services .keel-cards__card{display:flex;flex-direction:column;grid-template-rows:none} /* R8-18b services cards vertical rhythm from source: icon widget box 59px (50px icon + inline line box), text widget p margin-bottom 1.6em, column wrap padding 40px all sides */ .rs .keel-region--services .keel-cards__picture{box-sizing:content-box;padding-bottom:9px} .rs .keel-region--services .keel-cards__text{margin-bottom:1.6em} .rs .keel-region--services .keel-cards__card{padding-bottom:40px} /* R8-12b app-dev icon-box titles #2d2d2d (source .elementor-icon-box-title color); beats .rs--app-development .keel-region--split .keel-cards__title */ .rs--app-development .keel-region--split .keel-cards .keel-cards__title{color:#2d2d2d} /* ===== run6-14 2026-10-24 (round 8, Vick 00:02 ET: "once you go into the team bio's the back button is wrong") ===== Port of the original single-team template (Elementor post-115.css + kit-1923 + Astra button rules, read from the source CSS, JS off): #4cbc8b3 full-width band, var(--e-global-color-primary) #08449F, container min-height 300px, items top; #093ef87 column populated margin-top 30px, padding-left 5%; #fc014be button (size-sm, align left): kit .elementor-button Montserrat 0.8em/1em 900 uppercase letter-spacing 1px #fff, Astra body .elementor-button radius 10px padding 18px 30px (<=1100px: 1.75% 4%; <=544px: 18px 30px), bg + border #02010100 (transparent, wins over the :hover #b3b3b3 rule by specificity, so hover keeps white on transparent), content wrapper flex gap 5px, icon fas fa-arrow-left (Font Awesome Free 5, CC BY 4.0, glyph from fa-solid-900) before the text; link /about-us (the original 301s to /about-us/; Keel links straight to /about-us/). #14e3b02 card section pulled up 180px over the band (margin -180px 0 80px), container max-width 1600px, flex; #1594fd8 photo 33.3% / #5df7f01 main 66.7% (>=768px), 100% below; image width 100%; #bae88d8 name box #252525 margin 2rem 0 0 -4rem (Astra root 15px = 30px / -60px), padding 40px 40px 40px 60px, z-index 1 (margin 0 at <=1099px); #3994a78 h1 45px/1.4 700 #fff, padding-bottom 20px + widget spacing 20px (5vw <=1099px, 8vw <=767px); #4d8d3a4 role h4 1.4em/1.2 700 uppercase #fff; #73e3cc8 padding-right 60px (0 at <=1099px) + #a0fce74 padding 40px (20px at <=767px). */ .k-bio-band{display:flex;align-items:flex-start;min-height:300px;background-color:var(--brand);font-size:16px} .k-bio-back{flex:1 1 100%;box-sizing:border-box;margin:30px 0 0;padding:0 0 0 5%;text-align:left} .k-bio-back a.k-bio-back__btn,.k-bio-back a.k-bio-back__btn:visited{display:inline-block;box-sizing:border-box;width:auto;margin:0;font-family:"Montserrat",Sans-serif;font-size:.8em;font-weight:900;font-style:normal;line-height:1em;letter-spacing:1px;text-transform:uppercase;text-align:center;text-decoration:none;color:#fff;fill:#fff;background-color:#02010100;border:0 solid #02010100;border-radius:10px;padding:18px 30px;box-shadow:none;transition:all .3s} .k-bio-back a.k-bio-back__btn:hover,.k-bio-back a.k-bio-back__btn:focus{color:#fff;background-color:#02010100;border-color:#02010100;text-decoration:none} .k-bio-back__in{display:flex;flex-direction:row;gap:5px;justify-content:center} .k-bio-back__ico{display:block;flex:0 0 auto;width:.9375em;height:1em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 448)' d='M259 3 236 -19Q229 -26 219 -26Q209 -26 202 -19L8 175Q1 182 1 192Q1 202 8 209L202 403Q209 410 219 410Q229 410 236 403L259 381Q266 374 265.5 364Q265 354 258 347L138 232H425Q435 232 442 225Q449 218 449 208V176Q449 166 442 159Q435 152 425 152H138L258 37Q265 30 265.5 20Q266 10 259 3Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath transform='matrix(1 0 0 -1 0 448)' d='M259 3 236 -19Q229 -26 219 -26Q209 -26 202 -19L8 175Q1 182 1 192Q1 202 8 209L202 403Q209 410 219 410Q229 410 236 403L259 381Q266 374 265.5 364Q265 354 258 347L138 232H425Q435 232 442 225Q449 218 449 208V176Q449 166 442 159Q435 152 425 152H138L258 37Q265 30 265.5 20Q266 10 259 3Z'/%3E%3C/svg%3E") center/contain no-repeat} .k-bio-back__txt{display:block} @media (max-width:1100px){.k-bio-back a.k-bio-back__btn{padding:1.75% 4%}} @media (max-width:544px){.k-bio-back a.k-bio-back__btn{padding:18px 30px}} .k-bio{position:relative;margin:-180px 0 80px} .k-bio__grid{display:flex;position:relative;max-width:1600px;margin:0 auto} .k-bio__photo,.k-bio__main{position:relative;box-sizing:border-box;min-height:1px;width:100%} .k-bio__photo img{display:block;width:100%;height:auto;max-width:100%;aspect-ratio:444/629;object-fit:cover;border-radius:0} .k-bio__head{position:relative;z-index:1;box-sizing:border-box;width:100%;margin:30px 0 0 -60px;padding:40px 40px 40px 60px;background-color:var(--ink)} .k-bio__head .k-member__name{margin:0 0 40px;padding:0;font-family:"Montserrat",Sans-serif;font-size:45px;font-weight:700;line-height:1.4;text-transform:none;letter-spacing:normal;color:#fff!important} .k-bio__head .k-member__role{margin:0;padding:0;font-family:"Montserrat",Sans-serif;font-size:1.4em;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:normal;color:#fff!important} .k-bio__body{box-sizing:border-box;padding:40px 100px 40px 40px} @media (min-width:768px){.k-bio__photo{width:33.3%}.k-bio__main{width:66.7%}} @media (max-width:1099px){.k-bio__grid{flex-wrap:wrap}.k-bio__head{margin:0}.k-bio__head .k-member__name{font-size:5vw}.k-bio__body{padding:40px}} @media (max-width:767px){.k-bio__head .k-member__name{font-size:8vw}.k-bio__body{padding:20px}} /* run6-14 bio body (same template): #1577cec blockquote quotation skin (widget padding-left 20px, margin-bottom 20px; ::before U+201C Times New Roman 900 calc(2px*100)=200px/1 height .6em in var(--e-global-color-secondary) #ED1D1D; content "Marck Script", Sans-serif 50px normal, right-aligned, #252525, body line-height 1.857 (13/7); author 1em normal letter-spacing 1px #252525, row-reverse = right, margin-top 0); #6f78b17 text p margin-bottom 1.75em; #0db6ceb/#1a4dfb2 icon lists: icon 25px in a 1.25em box, text 700 var(--e-global-color-primary), padding-inline-start 5px, hover var(--e-global-color-text), color .3s; 20px widget spacing between widgets. */ .k-bio__body .k-member__motto{margin:0 0 20px;padding:0 0 0 20px;border:0;background:transparent;font-size:16px;font-style:normal;quotes:none;color:#3f444b} .k-bio__body .k-member__motto::before{content:"\201C";display:block;height:.6em;font-family:"Times New Roman",Times,serif;font-size:200px;font-weight:900;font-style:normal;line-height:1;color:var(--accent)} .k-bio__body .k-member__motto p{margin:0;padding:0;font-family:"Marck Script",Sans-serif;font-size:50px;font-weight:normal;font-style:normal;line-height:1.8571428571;letter-spacing:normal;text-align:right;color:var(--ink)} .k-bio__body .k-member__motto cite{display:block;margin:0;font-family:"Montserrat",Sans-serif;font-size:1em;font-weight:normal;font-style:normal;line-height:1.8571428571;letter-spacing:1px;text-align:right;color:var(--ink)} .k-bio__body .rich-text{margin:0 0 20px} .k-bio__body .rich-text p{margin:0 0 1.75em;font-size:16px;line-height:1.8571428571} .k-bio__body .k-member__links{margin:0;padding:0;list-style:none} .k-bio__body .k-member__links li{display:flex;align-items:center;margin:0 0 20px;padding:0;line-height:1.8571428571} .k-bio__body .k-member__links li:last-child{margin-bottom:0} .k-bio__body .k-member__links a{display:flex;align-items:center;width:100%;font-size:16px;font-weight:700;color:var(--brand);text-decoration:none;transition:color .3s} .k-bio__body .k-member__links a:hover{color:var(--ink)} .k-bio__body .k-member__links img{display:block;flex:0 0 auto;width:25px;height:25px;margin:0 6.25px 0 0;vertical-align:middle} .k-bio__body .k-member__links img+*{padding-inline-start:5px} .k-bio__body .rich-text p:last-child{margin-bottom:1.75em} /* source widgets are flex items of .elementor-widget-wrap, so the last p's 1.75em margin does not collapse into the 20px widget spacing */ .k-bio__body>*{display:flow-root} .k-bio__body>ul.k-member__links{display:block} .k-bio__body>ul.k-member__links>li{margin-bottom:20px} .k-bio__body>ul.k-member__links>li:last-child{margin-bottom:0} /* ===== run6-15 (round 9, Maggie r8 grade #154-#168) ===== */ /* -- header (#154 #155 #156): Astra .ast-primary-header-bar border-bottom:1px solid #eaeaea (desktop @min 1101 and .ast-header-break-point); desktop bar 88px + 1px border; mobile bar = branding padding 16px 0 + logo (130x36.4 @<=544, 120x33.6 @545-1100) + 1px border; .site-primary-header-wrap padding 0 20px at every width */ .k-header,.k-header.k-header--stuck{border-bottom:1px solid #eaeaea} .k-header{box-sizing:border-box} .k-header .k-logo img{aspect-ratio:25/7;height:auto} .k-header .k-nav{margin:0;padding:0} .k-header .k-nav>li{margin:0} @media (min-width:1101px){ .k-header{height:89px;border-bottom:1px solid #eaeaea} .k-header__nav{align-self:stretch;display:flex;align-items:stretch} .k-header .k-nav{height:100%;align-items:stretch} /* source: menu-link text glyph box top y=40 in the 88px bar (lh 26 live) - 5px below centre */ .k-header .k-nav__link{height:88px;box-sizing:border-box;padding:10px 14px 0;line-height:26px} .k-nav__item--sub>.k-nav__link::after{margin:-4px 0 0 12px} .k-sub-toggle,.k-sub-btn{display:none} } @media (max-width:1100px){ .k-header{height:auto;border-bottom:1px solid #eaeaea} .k-header__in{padding:0 20px;height:auto} .k-header .k-logo{padding:16px 0} .k-header .k-logo img,.k-header__logo img{width:120px;max-width:120px} .k-header__nav{top:calc(100% + 1px);box-shadow:none;max-height:60vh;overflow:auto;background:#fff} /* -- open mobile menu (#157): Astra .ast-header-break-point .main-navigation ul .menu-item .menu-link{padding:0 20px 0 30px; width:100%}, line-height 3em, font 16px (16.416px @<=544), #8e8e8e, border-style:none; .sub-menu{display:none} until the li is expanded; .ast-menu-toggle absolute right 20px, 46.75x50 */ .k-header .k-nav{display:block;background:#fff} .k-header .k-nav__item{display:block;position:relative;width:100%} .k-header .k-nav__link,.k-header .k-nav__item--current>.k-nav__link,.k-header .k-nav__link[aria-current="page"]{display:block;height:auto;width:100%;box-sizing:border-box;padding:0 20px 0 35px;border:0;font-size:16px;line-height:3em;font-weight:700;text-transform:uppercase;color:#8e8e8e!important;background:#fff} .k-header .k-nav__link:hover{color:#252525!important} .k-nav__item--sub>.k-nav__link::after{display:none} .k-header .k-sub{display:none;position:static;visibility:visible;opacity:1;min-width:0;margin:0;padding:0;border:0;box-shadow:none;background:#fff} .k-header .k-sub li{margin:0} .k-header .k-sub__link{display:block;padding:0 20px 0 calc(30px + 1.25em);font-size:16px;line-height:3em;font-weight:700;text-transform:uppercase;color:#8e8e8e!important;background:#fff;border:0} .k-header .k-sub__link:hover{color:#252525!important} .k-sub-toggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} .k-sub-toggle:checked~.k-sub{display:block} .k-sub-btn{position:absolute;top:0;right:20px;width:46.75px;height:3em;font-size:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#8e8e8e} .k-sub-btn::before{content:"";width:10px;height:10px;margin-top:-6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .2s} .k-sub-toggle:checked~.k-sub-btn::before{transform:rotate(225deg);margin-top:6px} .k-sub-toggle:focus-visible~.k-sub-btn{outline:2px solid var(--brand);outline-offset:-2px} /* burger -> X (source swaps .ast-menu-svg for .ast-close-svg when toggled) */ .k-burger{margin:0} .k-burger__bar::before,.k-burger__bar::after{transition:transform .2s,top .2s} .k-nav-toggle:checked+.k-burger .k-burger__bar{background:transparent} .k-nav-toggle:checked+.k-burger .k-burger__bar::before{top:0;transform:rotate(45deg)} .k-nav-toggle:checked+.k-burger .k-burger__bar::after{top:0;transform:rotate(-45deg)} } @media (max-width:544px){ .k-header .k-logo img,.k-header__logo img{width:130px;max-width:130px} .k-header .k-nav__link,.k-header .k-nav__item--current>.k-nav__link,.k-header .k-nav__link[aria-current="page"],.k-header .k-sub__link,.k-sub-btn{font-size:16.416px} } /* -- client logos phone/tablet (#158, row 136): WordPress serves the 300px thumbnails (width=300), so a logo is never wider than 300px; each swiper slide is a 300px box at the slide's left edge with the logo centred in it (BMG 176 at slide+62) */ @media (max-width:1099px){ .rs .keel-region--client_logos .keel-block--image{padding:0 max(20px, calc(100cqw / var(--per) - 300px)) 0 0} .rs .keel-region--client_logos img{max-width:min(100%, 300px)} } /* -- glossary terms on phones (#159): elementor h4 18.24px / line-height 1.2 / letter-spacing 1px @<=767 */ /* (h4{font-size:1.3333rem;line-height:1.2em} on Astra's 85.5% root @<=1100 = 18.24px/21.888px; 1ead5a5 letter-spacing 2px, 1px @<=767) */ @media (max-width:1100px){ .keel-region--glossary h4.keel-block--heading,.keel-region--glossary .keel-block--heading~.keel-block--heading{font-size:18.24px;line-height:21.888px} } @media (max-width:767px){ .keel-region--glossary h4.keel-block--heading,.keel-region--glossary .keel-block--heading~.keel-block--heading{letter-spacing:1px} } /* -- home hero tablet (#160): column 0f04d93/col-66 .bg min-height 90vh, widget-wrap padding 0 40px, widgets vertically centred; 5ff196e p margin-bottom 1.6em + widget-container margin-bottom -35px (second text widget -23px); widgets margin-bottom 20px; glossary column col-33 width 80% (margin 0 10%), widget-wrap margin -100px 0 20px, padding 40px */ @media (min-width:768px) and (max-width:1099px){ .k-home-hero .keel-region--hero_media.keel-region--hero_media{height:90vh;min-height:0} .k-home-hero .keel-region--hero.keel-region--hero{grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding:0 40px;box-sizing:border-box} .k-home-hero .keel-region--hero>.rich-text:first-of-type{margin:0 0 20px} .k-home-hero .keel-region--hero>.rich-text:first-of-type p{margin:0 0 calc(1.6em - 35px);padding:0;line-height:1.2} .k-home-hero .keel-region--hero>.rich-text:nth-of-type(2){margin:0 0 20px} .k-home-hero .keel-region--hero>.rich-text:nth-of-type(2) p{margin:0 0 calc(1.6em - 23px);padding:0;line-height:1.2} .k-home-hero .keel-region--hero>.keel-block--button{align-self:flex-start;margin:0} .k-home-hero .keel-region--glossary.keel-region--glossary{width:80%;margin:-100px auto 20px;padding:40px} } /* .elementor-widget-button .elementor-button.elementor-size-sm @(max-width:1100px){padding:1.75% 4%} (18px 30px again @<=544) - % of the widget width */ @media (min-width:545px) and (max-width:1100px){ .k-home-hero .keel-region--hero a.button{padding:1.75% 4%} } /* home: the hero starts below a spacer section (93px desktop/@1100, 70px @768-1099, 73px @<=767) that sits under Astra's absolute header, i.e. 4 / 26.4 / 3.4 / 6.4 / 3.6px below our in-flow header */ .k-home-hero{margin-top:4px} @media (min-width:1100px) and (max-width:1100px){.k-home-hero{margin-top:26.4px}} @media (min-width:768px) and (max-width:1099px){.k-home-hero{margin-top:3.4px}} @media (min-width:545px) and (max-width:767px){.k-home-hero{margin-top:6.4px}} @media (max-width:544px){.k-home-hero{margin-top:3.6px}} /* -- home art tablet (#161): f461590 col-66 widget-wrap padding 40px, align-content flex-start, widgets full width (x=40, w=688 @768) */ @media (min-width:768px) and (max-width:1099px){ .k-art .keel-region--art.keel-region--art{margin:0} .k-art .k-art__main{padding:40px;justify-content:flex-start} } /* -- home alert row a620918 (#164, rows 145): each column widget-wrap padding 10px -> widgets at x+10 (h3 x=60 w=994 @1280); LEARN HERE (149c66c) border 3px solid, padding 18px 30px, fills the 14.053% column's content box (145px) so it wraps to 2 lines (145x68) */ @media (min-width:1100px){ .rs .keel-region--alert .keel-block--heading,.rs .keel-region--alert .rich-text{padding:0;margin-left:10px;margin-right:10px} .rs .keel-region--alert a.button{width:calc(100% - 20px);max-width:none;white-space:normal;line-height:12.8px;padding:18px 30px!important;border:3px solid var(--accent)!important;min-height:0;box-sizing:border-box;text-align:center} } /* tablet/phone: the two columns stack; h3 widget margin-bottom 20px - 17px, text p margin 25.6px - 31px, column wrap padding 10px each, button centred, padding 1.75% 4% (18px 30px @<=544), 3px border */ @media (max-width:1099px){ .rs .keel-region--alert{display:block;width:auto;margin:20px 0 0;padding:10px;text-align:center;min-height:0} .rs .keel-region--alert .keel-block--heading,.rs .keel-region--alert h3.keel-block--heading{margin:0 0 3px;padding:0;font-size:24px;line-height:1.3;text-align:center} .rs .keel-region--alert .rich-text{margin:0;padding:0;text-align:center} .rs .keel-region--alert .rich-text p{margin:0 0 14.6px} .rs .keel-region--alert .keel-block--button{display:inline-block;margin:0} .rs .keel-region--alert a.button{padding:18px 30px!important;border:3px solid var(--accent)!important;min-height:0;line-height:12.8px;box-sizing:border-box} } @media (min-width:545px) and (max-width:1099px){ .rs .keel-region--alert a.button{padding:1.75% 4%!important} } /* -- home "What we do" tablet (#162): inner section 9025808 columns 50% with no gap; each widget-wrap margin 10px, padding 40px (card text x=60 w=274 @768) */ @media (min-width:768px) and (max-width:1099px){ body.rs--home .k-services .keel-cards{gap:0} body.rs--home .k-services .keel-cards .keel-cards__card{margin:10px;padding:40px} } /* -- home stats tablet (home 768 trace: band 633 vs 697): same widget model as the phone port (run5-5/5-7) - column 51168ad widget-wrap padding 40px, intro p margin 25.6px + 20px; counters inner section 37e8229 = five 20% columns, widget-wrap padding 10px, label p margin 25.6px; footnote p margin 25.6px */ @media (min-width:768px) and (max-width:1099px){ .k-stats.k-stats{padding:0} .k-stats .keel-region--stats.keel-region--stats{padding:40px;max-width:none} .k-stats .keel-region--stats>.rich-text{display:flow-root} .k-stats .keel-region--stats>.rich-text:nth-of-type(1){margin:0 0 20px} .k-stats .keel-region--stats>.rich-text:nth-of-type(1) p{margin:0 0 25.6px} .k-stats .keel-region--stats>.rich-text:nth-of-type(2) ul{margin:0!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0} .rs .k-stats .keel-region--stats li{min-height:0!important;padding:10px 10px 35.6px!important} .k-stats .keel-region--stats>.rich-text:nth-of-type(3){margin:0} .k-stats .keel-region--stats>.rich-text:nth-of-type(3) p{margin:0 0 25.6px} /* logos section 42d8cf1: section padding 80px + column widget-wrap padding 10px */ .k-clients{padding-top:90px;padding-bottom:90px} } /* counters wrap like the source headings (Astra overflow-wrap:break-word): "$1.2b" breaks onto 2 lines in a 117.6px column */ .k-stats .keel-region--stats li strong{overflow-wrap:break-word} /* -- home art desktop (#163): column ff04de3 widget-wrap margin 40px, content top-aligned (not centred); text widget a0d245a keeps its last p margin 25.6px + 20px; gallery 0ea76b0 = 5 items with padding 10px and no gap (img 136px @1440), items top-aligned, margin-bottom 20px; CTA text 62a09ff: p margin 25.6px with widget-container margin -40px, + 20px -> button 35.3px below the text top */ @media (min-width:1100px){ .k-art .k-art__main{justify-content:flex-start;padding-top:40px;padding-bottom:40px} .k-art .keel-region--art .rich-text{display:flow-root;margin:0 0 20px} .k-art .keel-region--art .rich-text p:last-child{margin-bottom:25.6px} .rs .k-art .keel-region--awards{gap:0;align-items:start;margin:0 0 20px;max-width:none} .rs .k-art .keel-region--awards .keel-block--image{max-width:none;padding:10px;justify-self:stretch} .rs .k-art .keel-region--awards img{width:100%;max-width:100%} .k-art .keel-region--art_cta .rich-text{margin:0 0 5.6px} .k-art .keel-region--art_cta .rich-text p{margin:0} } /* -- home "What we do" desktop (#163): section 93a1585 column widget-wrap padding 10px; heading f041d9d margin-bottom 20px; the two inner sections (30fbea9, ac48940) each hold cards with widget-wrap margin 10px -> 10px above/below each row; icon box 59.7px */ @media (min-width:1100px){ body.rs--home .k-services .keel-region--services{padding-top:10px;padding-bottom:10px} body.rs--home .k-services .keel-region--services>.keel-block--heading{margin-bottom:20px} body.rs--home .k-services .keel-cards{padding:10px 0} body.rs--home .k-services .keel-cards__picture{padding-bottom:9.7px} } /* -- contact tablet (#165): section 9d47c0c has no padding below 1100px; two 50% columns with widget-wrap padding 40px (Funding Solutions x=40 w=304 @768) - the 3-line texts then put both buttons on the same line */ @media (min-width:768px) and (max-width:1099px){ .rs--contact .keel-region--split.keel-region--split{padding:0!important} } /* -- funding-community (#166): Elementor text widgets b044103/61afb54 are flex items, so the list's 24px margin and the last p's 25.6px margin stay inside the widget; + 20px widget gap = 44/45.6px above JOIN THE LINKEDIN/FACEBOOK GROUP */ .rs--funding-community .keel-region--body>.rich-text{display:flow-root} .rs--funding-community .keel-region--body>.rich-text>p:last-child{margin-bottom:25.6px} /* desktop: heading widget 4576157 container margin 80px + column widget-wrap padding 10px; inner sections 71a51cb/52853b0 sit directly on the text widgets; LinkedIn button + 20px + spacer c109190 50px + 20px; the Facebook button ends the column (wrap padding 10px, section margin 80px) */ @media (min-width:1100px){ .rs--funding-community .keel-region--intro.keel-region--intro{margin-top:90px!important;margin-bottom:100px!important} .rs--funding-community .keel-region--body.keel-region--body{padding-bottom:10px;margin-bottom:80px!important} .rs--funding-community .keel-region--body>.columns.columns{margin:0} .rs--funding-community .keel-region--body>a.button.keel-block--button{margin:0 0 90px!important} .rs--funding-community .keel-region--body>a.button.keel-block--button:last-child{margin-bottom:0!important} } /* group headings 4c29907/fd4d2df sit in a widget-wrap with padding 10px (box x=144 w=830 @1024), not padded themselves */ .rs--funding-community .keel-region--body .columns--1-1 .column h3.keel-block--heading{padding:0;margin:10px} /* -- technology phone (#167): intro column 61f3d13 (margin -70px 10px 20px, padding 20px) sits straight on the 180px picture section (no gap); text 199db9b p margin 30px / container -30px (+20px), text 55be5e1 p margin 25.6px / container -20px (+20px); "We've been busy" c3e7b93 widget-wrap padding 40px (h2 x=40 w=295); Labourly 7b7cb6c is elementor-reverse-mobile: screenshot column first, then the text column (widget-wrap margin 40px, padding 10px); section margin 80px 0 */ @media (max-width:767px){ .rs--technology .k-tech-hero{gap:0} .rs--technology .k-tech-hero>.column:first-child>.rich-text:first-child{margin:0 0 20px} .rs--technology .k-tech-hero>.column:first-child>.rich-text:nth-child(2){margin:0 0 25.6px} .rs--technology .k-band-brand.k-band-brand{padding:40px} .rs--technology .keel-region--split.keel-region--split{max-width:none;margin:80px 0 0;padding:0} .rs--technology .keel-region--split .columns{display:flex;flex-direction:column;padding:0;gap:0} .rs--technology .keel-region--split .column:last-child{order:-1;padding:0;margin:0} .rs--technology .keel-region--split .column:last-child img{width:100%;height:auto;display:block;margin:0} .rs--technology .keel-region--split.keel-region--split .columns>.column:first-child{margin:40px;padding:10px!important} } /* -- footer desktop (#168): section 70eeefbb columns 20% (logo, image widget padding 15px) | 5% empty | 52.895% address icon list | 20% social, row 90px, widgets vertically centred; pin icon box 17.5px + text padding-left 5px (text x=372 @1280); social items 32.5px icon box + 5px text padding, 16px apart, right edge = column edge */ @media (min-width:1100px){ .rs .k-footer__in{gap:0;min-height:90px;align-items:center;justify-content:flex-start} .rs .k-footer__logo{flex:0 0 20%;padding:15px;box-sizing:border-box} .rs .k-footer__logo img{width:100%;max-width:100%;height:auto;display:block} .rs .k-footer__addr{flex:0 0 52.895%;margin:0 0 0 5%;gap:0;justify-content:flex-start} .rs .k-footer__addr img{margin:0 3.75px;flex:none} .rs .k-footer__addr span{padding-left:5px} .rs .k-footer__social{flex:0 0 20%;justify-content:flex-end;gap:16px;margin:0} .rs .k-footer__social li{width:37.5px;padding-right:5px;box-sizing:border-box;display:flex;justify-content:center;margin:0} } /* -- funding-community 545-767 (regression check at 600): kit .elementor-button padding 1.75% 4% applies up to 1100 and only drops back to 18px 30px at <=544 */ @media (min-width:545px) and (max-width:767px){ .rs--funding-community .keel-region--body>a.button.keel-block--button{padding:1.75% 4%} } /* ===== run6-16 (round 9 real-preview gaps, 2026-10-24 ET): bio items whose content the mock did not have ===== */ /* Elementor 17e4aee (bio photo credit, heading widget p): 12px/12px 300 uppercase ls 1px #252525, link inherits, widget 20px below the links, container margin-bottom 40px */ .k-bio__body .k-member__credit{margin:20px 0 40px;font-size:12px;line-height:12px;font-weight:300;text-transform:uppercase;letter-spacing:1px;color:#252525} .k-bio__body .k-member__credit a{color:inherit;font:inherit;letter-spacing:inherit;text-decoration:none} /* source drops the links widget when the member has no links (dc-condition-empty): no empty list, no 20px gap after the text */ .k-bio__body .k-member__links:not(:has(li)){display:none} .k-bio__body:not(:has(.k-member__links li))>.rich-text{margin-bottom:0} @media (max-width:767px){.k-bio__body .k-member__credit{padding-top:40px}} /* ===== run6-17 / round 10 (Maggie r9 fail, 24 Oct 09:25 ET): ported from source Elementor/Astra rules, element diff on the real previews ===== */ /* #235 inner page-title hero: source columns are width:100% at (min-width:768px) and (max-width:1099px) -> stacked; title + text left at x40, w = W-80, 10px apart */ @media (min-width:768px) and (max-width:1099px){ .rs:not(.rs--team-list) .k-hero .keel-region--hero.keel-region--hero{grid-template-columns:minmax(0,1fr);row-gap:10px;column-gap:0;padding:0 40px} .rs:not(.rs--team-list) .k-hero h1.keel-block--heading.keel-block--heading{text-align:start;padding:0} .rs:not(.rs--team-list) .k-hero .rich-text.rich-text{padding:0} } /* #236 home art/quote section: source awards images are max-width:100% of the column, so nothing forces 360px at 320-359 */ @media (max-width:767px){ .rs .k-art{grid-template-columns:minmax(0,1fr)} .rs .k-art>*{min-width:0} .rs .keel-region--awards{grid-template-columns:minmax(0,1fr);max-width:100%} .rs .keel-region--awards .keel-block--image{max-width:100%;min-width:0} .rs .keel-region--awards img{max-width:min(100%,300px)} } /* #237 footer logo: source img max-width:100% at its natural 330px, centred */ @media (max-width:767px){ .rs .k-footer__logo img{max-width:min(100%,330px);margin-left:auto;margin-right:auto;display:block} } /* #238 about-us phones: How It Started h2 text-align:start; Our Team intro widget-wraps padding 0 20px (text 0 30px 0 20px) */ @media (max-width:767px){ .rs--about .keel-region--how h2{text-align:start} .rs--about .keel-region--team_intro.keel-region--team_intro{padding:0 20px} .rs--about .keel-region--team_intro .rich-text{padding-right:10px} } /* #239 portfolio results: Astra ul{margin:0 0 1.5em 3em;padding:0} with disc markers */ .rs--portfolio .k-pcard__text ul{margin:0 0 24px 48px;padding:0;list-style:disc outside} .rs--portfolio .k-pcard__text ul li{list-style:inherit} /* #240 who-we-work-with clients section: Elementor 33.333%/66.666% columns, no gap, widget-wrap padding 10px; boxed container 1140 (>=1100) / 1024 (768-1099) / full width (<=767) */ @media (min-width:768px){ .rs--who-we-work-with .keel-region--split.keel-region--split{padding:0} .rs--who-we-work-with .keel-region--split .columns.columns{grid-template-columns:33.333% 66.667%;column-gap:0} .rs--who-we-work-with .keel-region--split .columns>.column{padding:0 10px;min-width:0} } @media (min-width:1100px){ /* section height = image column (10 + square image + 10), so the eyeballed min-height:380px goes */ .rs--who-we-work-with .keel-region--split.keel-region--split{min-height:0} .rs--who-we-work-with .keel-region--split .columns>.column{padding:10px} } @media (min-width:768px) and (max-width:1099px){ .rs--who-we-work-with .keel-region--split.keel-region--split{max-width:1024px;margin-left:auto;margin-right:auto} .rs--who-we-work-with .keel-region--split .columns>.column{padding:10px} } @media (max-width:767px){ .rs--who-we-work-with .keel-region--split.keel-region--split{padding:0;margin-left:0;margin-right:0} .rs--who-we-work-with .keel-region--split .columns.columns{row-gap:0} .rs--who-we-work-with .keel-region--split .columns>.column{padding:10px} } /* #241 technology hero (>=1100): column 61f3d13 width 66.645%; widget-wrap margin 10% -7% 10% 7%, padding 60px */ @media (min-width:1100px){ .rs--technology .k-tech-hero.k-tech-hero{grid-template-columns:66.645% 33.355%;gap:0} .rs--technology .k-tech-hero>.column:first-child{margin:10% -7% 10% 7%;padding:60px;align-self:stretch;display:flex;flex-direction:column;justify-content:center} } /* #242 exactly 1100px: Astra .elementor-button padding stays at (max-width:1100px); the contact 9d47c0c column rules are Elementor tablet (<=1099), moved in the base rule */ @media (min-width:1100px) and (max-width:1100px){ .rs--contact .keel-region--split a.button.keel-block--button{padding:1.75% 4%} } /* #242 (found with it) inner hero >=1100: source section padding 0 40px (funding-community 0 50px; contact and who-we-work-with none) around the 1140px boxed container, so at 1100-1219 the content is W-80 wide at x40 (Keel used the full width there) */ @media (min-width:1100px){ .rs:is(.rs--about,.rs--managed-it-services,.rs--app-development,.rs--portfolio,.rs--testimonials) .k-hero .keel-region--hero.keel-region--hero{max-width:min(1140px,calc(100% - 80px))} .rs--funding-community .k-hero .keel-region--hero.keel-region--hero{max-width:min(1140px,calc(100% - 100px))} } /* ===== run6-18 / round 10 follow-up (24 Oct ET): #238 Our Team intro on phones, vertical rhythm from the same source widget-wrap (padding 20px; text widget p margin-bottom 1.6em = 25.6px; team grid 10px) -> text bottom to first photo 56px (Keel was 10px) ===== */ @media (max-width:767px){ .rs--about .keel-region--team_intro.keel-region--team_intro{padding-bottom:20px} .rs--about .keel-region--team_intro .rich-text p:last-child{margin-bottom:25.6px} } /* ===== run6-19 / round 10 follow-up (24 Oct ET): #236 regression fix. The run6-17 one-column awards grid must stay at <=479 only; 480-767 keeps the Elementor gallery 2 columns (gallery-item max-width 50%), now minmax(0,1fr) so nothing forces extra width ===== */ @media (min-width:480px) and (max-width:767px){ .rs .keel-region--awards{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ===== run6-20 / round 10 follow-up (24 Oct ET): self-found rows #245-#247, ported from source rules ===== */ /* #245 who-we-work-with Who We Serve cards <=767: source columns have no min-height (widget-wrap margin 10, padding 20, height = content); the old eyeballed min-height:490px !important made every card 490 tall. Only !important can undo it. */ @media (max-width:767px){ .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__card.keel-cards__card{min-height:0 !important} } /* #246 portfolio page-title hero: post-4136 @media(max-width:767px) .elementor-element-34e55222 > .elementor-container{min-height:298px} */ @media (max-width:767px){ .rs.rs--portfolio .k-hero.k-hero{min-height:298px} } /* #247 phone footer: logo image widget-container padding 5px (logo column 5 + 84.3 + 5); social icon list items are 26px tall (fa icons 26px) */ @media (max-width:767px){ .rs .k-footer__logo.k-footer__logo{padding-top:5px;padding-bottom:5px} .rs .k-footer__social.k-footer__social{min-height:26px;align-items:center} } /* ===== run6-21 / round 10 follow-up (24 Oct ET): #247 phone footer social icons spacing. Source icon list item = icon 32.5px + text span padding-left 5px (37.5px), li margin 0 8px (16px between), list centred: icons at x142 / 195.5 at 375 (Keel had 24px items, x155.5 / 195.5) ===== */ @media (max-width:767px){ .rs .k-footer__social.k-footer__social li{width:37.5px;flex:none} } /* ===== run6-22 / round 11 (24 Oct ET): Maggie rows 248-251, 253, ported from the rendered JS-off source (Firefox) ===== */ /* #248 tablet footer (section 70eeefbb): Elementor boxed container max 1024px (x37.5 @1099); columns 25% logo | 2% spacer | 15% social list (justify end, li margin 0 8px, item = 32.5px icon box + 5px text padding = 37.5px) -> icons 235/288 @768, 342/396 @1024, 377/430 @1099; logo 246x75 @1099 */ @media (min-width:768px) and (max-width:1099px){ .rs .k-footer__in.k-footer__in{max-width:1024px;gap:0} .rs .k-footer__social.k-footer__social{flex:0 0 17%;justify-content:flex-end;gap:16px;margin:0} .rs .k-footer__social.k-footer__social li{width:37.5px;flex:none;padding-right:5px;box-sizing:border-box;display:flex;justify-content:center;margin:0} } /* #249 contact BOOK YOUR CALL NOW! (545-767): kit .elementor-button padding 1.75% 4% applies up to 1100 and only drops to 18px 30px at <=544 (same cause as #181 on funding-community) */ @media (min-width:545px) and (max-width:767px){ .rs--contact .keel-region--split a.button.button.keel-block--button{padding:1.75% 4%} } /* #250 contact Funding / Technology section (1025-1099): Elementor boxed container max 1024px on tablet, centred (column x37.5 @1099) */ @media (min-width:768px) and (max-width:1099px){ .rs--contact .keel-region--split.keel-region--split{max-width:1024px;margin-left:auto;margin-right:auto} } /* #251 home award badges (768-1099): WP gallery 5 columns of 20%, item padding 0 10px, no grid gap -> 117.6px @768, 168.8 @1024, 183.8 @1099 */ @media (min-width:768px) and (max-width:1099px){ .rs .keel-region--awards.keel-region--awards{gap:0} .rs .keel-region--awards .keel-block--image.keel-block--image{max-width:none;padding:0 10px} } /* #253 contact form inputs: Astra/WPForms field style background #fafafa, 1px solid #ddd, radius 2px, text #666 */ .rs--contact .keel-field__input.keel-field__input{background:#fafafa;border:1px solid #ddd;border-radius:2px;color:#666} /* #248 (all widths): source icon-list link is display:flex and fills the list item (a rect = li rect, x235 @768); the image stays centred */ .rs .k-footer__social.k-footer__social li>a{display:flex;justify-content:center;align-items:center;width:100%} /* ===== run6-23 / round 11 follow-up (24 Oct ET): #254 home client-logo carousel at exactly 1099. Elementor's image carousel feeds Swiper min-width breakpoints keyed on the breakpoint values (tablet value 1099 -> desktop slides_to_show 6 from 1099 up), so the original shows 6 logos (150px) at 1099 while the CSS tablet range (max-width:1099px) gave 2. The 300px-thumbnail padding rule of #158 is a no-op at 6 per view ===== */ @media (min-width:1099px){ .rs .k-logos.k-logos{--per:6} } /* ===== run6-24 / round 12 (2 Nov 2026 SGT): last gaps before switch-over, ported from the source rules ===== */ /* inner pages + bios: source has a top spacer section (58b611a etc.) under its absolute header: 70px at <=1099, 91px at 1100+ (bios 70/90). Keel's sticky header is in flow (66.6px at 545-1100), so the first heading sat 3.4px high at 545-1099 and 24.4px high at exactly 1100 (Astra's header switches at 1100 but Elementor's tablet ends at 1099). Bios: 20.8px at 1100. */ @media (min-width:545px) and (max-width:1099px){ .rs--page main#content,.rs--about main#content,.rs--portfolio main#content,.rs--testimonials main#content,.rs--member main#content{padding-top:3.4px} } @media (min-width:1100px) and (max-width:1100px){ .rs--page main#content,.rs--about main#content,.rs--portfolio main#content,.rs--testimonials main#content{padding-top:24.4px} .rs--member main#content{padding-top:20.8px} } /* #252 contact "Nature of your Request": WPForms field 9 is a checkbox list with data-choice-limit 1 (one answer), list-inline layout: field padding 0 0 10px, margin-top 10px; choices inline-block, margin-right 20px, line-height 29.7167px; input 13px, margin 2px 10px 0 3px */ .rs--contact .keel-form fieldset.keel-field--radio.keel-field{padding:0 0 10px;margin-top:10px} .rs--contact .keel-form .keel-field--radio .keel-field__options.keel-field__options{display:block;margin:0;gap:0} .rs--contact .keel-form .keel-field--radio .keel-field__choice.keel-field__choice{display:inline-block;margin:0 20px 0 0;line-height:29.7167px} .rs--contact .keel-form .keel-field--radio input.keel-field__radio.keel-field__radio{display:inline-block;width:13px;height:13px;margin:2px 10px 0 3px;vertical-align:baseline} .rs--contact .keel-form .keel-field--radio .keel-field__choice label{display:inline} /* #164 home desktop stats b0f9cdd: section padding 0, column widget-wrap margin 80px 0 + padding 10px (container 1140px); intro text widget p 25.6 + 20px; counters inner section 37e8229: five 20% columns, widget-wrap padding 10px, number widget 20px, label p 25.6px; footnote p 25.6px */ @media (min-width:1100px){ .k-stats.k-stats{padding:80px 0} .k-stats .keel-region--stats.keel-region--stats{padding:10px;max-width:1140px} .k-stats .keel-region--stats>.rich-text{display:flow-root} .k-stats .keel-region--stats>.rich-text:nth-of-type(1){margin:0 0 20px} .k-stats .keel-region--stats>.rich-text:nth-of-type(1) p{margin:0 0 25.6px} .k-stats .keel-region--stats>.rich-text:nth-of-type(2) ul{margin:0!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:0} .rs .k-stats .keel-region--stats li{min-height:0!important;padding:10px 10px 35.6px!important} .k-stats .keel-region--stats>.rich-text:nth-of-type(3){margin:0} .k-stats .keel-region--stats>.rich-text:nth-of-type(3) p{margin:0 0 25.6px} } /* #164 home desktop alert row a620918: carousel widget margin-bottom 20px above it, outer widget-wrap padding 10px below; h3 widget 20px - 17px; text widget p 25.6px - 31px (so -5.4px); button column centred, button auto width (wraps at 1280); Astra buttons 1.75% 4% at <=1100 */ @media (min-width:1100px){ .rs .keel-region--alert{margin:20px 0 10px;grid-template-rows:auto 1fr} .rs .keel-region--alert .keel-block--heading,.rs .keel-region--alert h3.keel-block--heading{margin-bottom:3px} .rs .keel-region--alert .rich-text{margin-bottom:-5.4px;align-self:start} .rs .keel-region--alert a.button{width:auto;max-width:calc(100% - 20px)} } @media (min-width:1100px) and (max-width:1100px){ .rs .keel-region--alert a.button{padding:1.75% 4%!important} } /* #245 Who We Serve cards: source text widgets have two

(25.6px between); Keel card text is plain with a blank line (one 29.7167px line), so the card text keeps 25.6 - 4.1167 = 21.4833px below it and each card ends where the source card ends */ .rs--who-we-work-with .keel-region--features .keel-cards .keel-cards__card .keel-cards__text.keel-cards__text{margin-bottom:21.4833px} /* #247 footer social icons: source fa-facebook-square / fa-linkedin glyphs are 26px (448x512 em box = 22.75 x 26) and sit at the right of the 32.5px (1.25em) icon box, then the 5px text span */ .rs .k-footer__social.k-footer__social li>a{justify-content:flex-start} .rs .k-footer__social.k-footer__social img{width:22.75px;height:26px;margin:0 0 0 9.75px} /* new page /privacy-policy (rs-page layout, hero + one rich-text body): body text lines up with the blue header's H1 like the other standard pages (funding-community): 20px side padding on phones, 40px on tablets; desktop keeps the generic 10px inside 1140px */ @media (max-width:1099px){ .rs--privacy-policy .keel-region--body.keel-region--body{padding:0 40px} } @media (max-width:767px){ .rs--privacy-policy .keel-region--body.keel-region--body{padding:0 20px} } /* privacy policy: long written-out addresses (tools.google.com/dlpage/gaoptout) may break so narrow phones never scroll sideways */ .rs--privacy-policy .keel-region--body .rich-text a{overflow-wrap:anywhere} /* footer Privacy Policy link (Vick, 2 Nov 2026 6:34 PM SGT): same text as the footer address (Montserrat 16px/1.857, #ADADAD, white on hover), on its own line under the footer row: in line with the address text on desktop, under the logo on tablets, centred on phones */ .rs .k-footer__in.k-footer__in{flex-wrap:wrap;align-content:flex-start} .rs .k-footer .k-footer__legal{order:1;flex:0 0 100%;margin:0;font-size:16px;line-height:1.857;font-weight:400;color:#ADADAD} .rs .k-footer .k-footer__legal a{color:#ADADAD;text-decoration:none} .rs .k-footer .k-footer__legal a:hover,.rs .k-footer .k-footer__legal a:focus-visible{color:var(--white)} @media (min-width:1100px){ .rs .k-footer .k-footer__legal{padding-left:calc(25% + 17.5px);box-sizing:border-box} } @media (min-width:768px) and (max-width:1099px){ .rs .k-footer .k-footer__legal{padding:0 5px;box-sizing:border-box;text-align:left} } @media (max-width:767px){ .rs .k-footer .k-footer__legal{text-align:center;margin-top:10px} } /* ===== run6-26 / round 13 (2 Nov 2026 SGT): box-by-box fixes vs the original, ported from the Elementor rules (kit post-1923, page CSS post-2477/4770/...) ===== */ /* (1) Elementor kit: at 1025-1099px boxed sections are max 1024px wide and centred (".elementor-section-boxed>.elementor-container{max-width:1024px}" in the max-width:1099px block). Only the Keel blocks that sit in boxed sections there. */ @media (min-width:1025px) and (max-width:1099px){ .rs--portfolio .k-portfolio.k-portfolio,.rs--who-we-work-with .keel-region--intro.keel-region--intro{max-width:1024px;margin-left:auto;margin-right:auto} .rs--thankyou .keel-region--intro>:not(.k-band-img){max-width:1024px} .rs--app-development .keel-region--intro.keel-region--intro,.rs--home .k-stats .keel-region--stats.keel-region--stats{max-width:1024px;margin-left:auto;margin-right:auto} /* technology brand band: full-bleed background, text in the centred 1024px box (column padding 40px) */ .rs--technology .keel-region--intro .k-band-brand.k-band-brand{padding-left:calc((100% - 1024px) / 2 + 40px);padding-right:calc((100% - 1024px) / 2 + 40px)} } /* (2) inner pages, desktop >1100px: the original's first section (spacer 71px + 2x10px column padding = 91px) ends 2px below Keel's 89px header */ @media (min-width:1101px){ .rs--page:not(.rs--technology):not(.rs--resonate-newsletter) main#content,.rs--about main#content,.rs--portfolio main#content,.rs--testimonials main#content{padding-top:2px} } /* (3) Who We Work With (page 2477) */ @media (min-width:1100px){ /* #5b08de1: section margin 80px + column padding 10px around the heading (Keel had the margin only) */ .rs--who-we-work-with .keel-region--intro.keel-region--intro{padding:10px;min-height:0} /* #7a2c253: columns stretch and the text column starts at the top (no vertical centring in the original) */ .rs--who-we-work-with .keel-region--split .columns{align-items:start} } /* #4a3ccd5 text editor: the list keeps the theme's 1.5em bottom margin inside the column */ .rs--who-we-work-with .keel-region--split .rich-text ul{margin-bottom:1.5em} @media (max-width:1099px){ /* #5068669 "Who We Serve:" heading: column padding 10px top/bottom */ .rs--who-we-work-with .keel-region--features>.keel-block--heading{padding:10px 0} } @media (max-width:767px){ /* #5b08de1 and #5068669 on phones: margin 20px top/bottom + column padding 10px */ .rs--who-we-work-with .keel-region--intro.keel-region--intro{margin:20px 0;padding:10px} .rs--who-we-work-with .keel-region--features>.keel-block--heading.keel-block--heading{margin:20px 0 20px;padding:10px 0} } /* (4) Thank-you page (4770): heading, text and button sit in the centred 1140px column (the round-8 margin:0 0 20px dropped the auto side margins), with the column's 10px top padding */ .rs--thankyou .keel-region--intro h1.keel-block--heading.keel-block--heading,.rs--thankyou .keel-region--intro .rich-text.rich-text{margin-left:auto;margin-right:auto} .rs--thankyou .keel-region--intro>h1.keel-block--heading{padding-top:10px} /* text column = 1140px container minus the 2x10px column padding */ @media (min-width:768px){ .rs--thankyou .keel-region--intro>:not(.k-band-img){padding-left:10px;padding-right:10px;box-sizing:border-box} } /* (5) About Us "How It Started" (#5711bb6): column padding 10px (Keel had 26px), inner text section padded 10px */ @media (min-width:1100px){ .rs--about .keel-region--how.keel-region--how{padding:10px 0} .rs--about .keel-region--how .rich-text.rich-text{padding-top:10px;padding-bottom:23px} /* #a0c978e "Our Team": the photo grid column has the same 10px top padding as the intro column */ body.rs--about .k-team .k-team__grid.k-team__grid{padding-top:10px} } /* (6) Managed IT Services "Our Services:" (#f96ce0a): column padding 10px above the heading */ @media (min-width:768px){ .rs--managed-it-services .keel-region--features.keel-region--features{padding-top:10px} } /* (7) Funding Community icon rows: icon column 77px with the heading column straight after it (no 20px gap) */ @media (min-width:1100px){ .rs--funding-community .keel-region--body .columns--1-1.columns--1-1{column-gap:0} } /* (8) App Development "We develop for / Using" (#8e37d54): both columns padded 10px top/bottom; the icon widget is 59.3px tall (50px icon + line box) with a 20px gap; a 30px spacer (+20px widget gap) sits between the two icon rows */ @media (min-width:1100px){ .rs--app-development .keel-region--split .columns--1-1>.column{padding-top:10px;padding-bottom:10px} .rs--app-development .keel-region--split .keel-cards .keel-cards__picture.keel-cards__picture{margin-bottom:29.3px} .rs--app-development .keel-region--split .column>.keel-cards:not(:last-child){margin-bottom:50px} } /* (9) Managed IT Services cards (#39c82f3b...): the card column is a top-aligned stack (Keel's grid stretched the rows of the shorter card), each card column has a 10px margin inside a section that starts 10px below the heading column */ @media (min-width:1100px){ .rs--managed-it-services .keel-region--features .keel-cards.keel-cards{padding-top:10px;row-gap:0} .rs--managed-it-services .keel-region--features .keel-cards__card.keel-cards__card{align-content:start;margin:10px 0} } /* ===== run6-27 / round 14 (2 Nov 2026 SGT, Vick 7:58 PM "fix the remaining gaps"): ported from the original's Elementor/Astra CSS and widget settings (plain fetch, no source JS) ===== */ /* (1) Home clients section 42d8cf1: section padding 80px + column widget-wrap 10px = heading 90px below the section top at every width >=768 (Keel had 80 from 1100 up) */ @media (min-width:1100px){ .rs .k-clients.k-clients{padding-top:90px} } /* (2) Home art column, tablet 768-1099: text widget a0d245a keeps its last p margin (25.6) + widget margin 20; gallery items padding 10px all round; widget margin 20; "Contact us today" widget 62a09ff is 20.3px tall (container margin -35px) + 20px margin before the button */ @media (min-width:768px) and (max-width:1099px){ .rs .k-art .keel-region--awards.keel-region--awards{margin:45.6px 0 20px} .rs .k-art .keel-region--awards .keel-block--image.keel-block--image{padding:10px} .k-art .keel-region--art_cta .rich-text{margin:0 0 10.6px} .k-art .keel-region--art_cta .rich-text p{margin:0} } /* (3) Managed IT cards >=1100 = inner sections 185920af / b336d5d: each row as tall as its tallest column (no pinned tracks); column wrap padding 40, icon box 59.3 + 20, h3 27.04 + 20, text widget incl. its last paragraph margin 25.6 */ @media (min-width:1100px){ .rs--managed-it-services .keel-region--features .keel-cards--2.keel-cards--2{grid-template-rows:none;grid-auto-rows:auto;row-gap:0} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__card.keel-cards__card{display:flex;flex-direction:column;align-items:stretch;min-height:0;height:auto;grid-row:auto;margin:10px 0} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__picture.keel-cards__picture{margin:0 auto 19.3px;flex:none} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__title.keel-cards__title{line-height:27.04px;margin:0 0 20px} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__text.keel-cards__text{min-height:0;margin:0 0 25.6px} } /* (3b) Keel card text is one

where a blank line (29.7px) stands for each paragraph break; the source has separate

s 25.6px apart. Take the 4.1px extra per break off the closing margin so card and row heights equal the source (2nd/3rd paragraph still 4.1/8.2px lower inside the card: Keel limit) */ .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__text.keel-cards__text:has(br:nth-of-type(2)){margin-bottom:21.5px} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__text.keel-cards__text:has(br:nth-of-type(4)){margin-bottom:17.4px} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__text.keel-cards__text:has(br:nth-of-type(6)){margin-bottom:13.3px} /* (4) Technology tablet 768-1099 (sections 1922962 image + 66aa719 card): no gap between the 270px image and the card (card top = image bottom - 70); text widget 55be5e1 = 59.4 + container -23 + p 25.6 + widget 20 -> 22.6px after the text; button widget ffebfe8 has 10px padding under the button */ @media (min-width:768px) and (max-width:1099px){ .rs--technology .k-tech-hero.k-tech-hero{row-gap:0;gap:0} .rs--technology .k-tech-hero>.column:first-child>.rich-text+.rich-text p:first-of-type{margin-bottom:22.6px} .rs--technology .k-tech-hero>.column:first-child>.button.button{margin-bottom:10px} } /* (4b) Technology tablet buttons: the kit's tablet button padding is 1.75% 4% of the widget width (11.69/26.72 at 768, 16.16/36.95 at 1024, 17.47/39.95 at 1099), not fixed px */ @media (min-width:768px) and (max-width:1099px){ .rs--technology .k-tech-hero .button--outline.button--outline,.rs--technology .keel-region--split a.button--brand.button--brand{padding:1.75% 4%} } /* (5) Technology brand band c3e7b93 >=1100: boxed 1140 container + 10px column padding (h2 1080 wide at 1100, not 1060 -> no 3rd line); section margin 80 + 10 = 90 top/bottom */ @media (min-width:1100px){ .rs--technology .keel-region--intro .k-band-brand.k-band-brand{padding:90px max(10px, calc((100% - 1140px) / 2 + 10px))} .rs--technology .keel-region--intro .k-band-brand.k-band-brand h2{max-width:none;margin-left:0;margin-right:0} } /* (6) Technology hero card >=1100 (column of 66aa719): widget 199db9b = p 213.9 + p margin 46.08 + widget 20; widget 55be5e1 = 2 lines of 29.714 + p margin 25.6 + 20; content is centred in the card, so the 11.9px shorter Keel stack put the text 6px low. Page top: first section 91px like the other inner pages */ @media (min-width:1100px){ .rs--technology .k-tech-hero>.column:first-child>.rich-text:first-child.rich-text{margin-bottom:66.08px} .rs--technology .k-tech-hero>.column:first-child>.rich-text+.rich-text.rich-text{margin-bottom:45.6px} .rs--technology .k-tech-hero>.column:first-child>.rich-text+.rich-text p{line-height:29.714px} } @media (min-width:1101px){ .rs--technology main#content{padding-top:2px} } /* (7) Exactly 1100px: Elementor is already on its desktop layout but Astra's @media (max-width:1100px) button rule (padding 1.75% 4% of the widget width) still applies to buttons without their own desktop padding */ @media (min-width:1100px) and (max-width:1100px){ .rs .k-connect .k-btn.k-btn,.rs--technology .k-tech-hero .button--outline.button--outline,.rs--technology .keel-region--split a.button.button{padding:1.75% 4%} } /* (8) About Us team (post-2652): desktop columns d51b57b 40% / edf0f53 59.665% (they do not add up to 100%, so the grid ends 4.3px short at 1280); portfolio-widget overlay 1c70b44 (names over the photos on hover, as on the original): overlay #25252599, 15px padding (names wrap like the source), fade in .5s / out 1s */ @media (min-width:1100px){ .rs--about .k-team.k-team{grid-template-columns:40% 59.665%} } .rs .k-team-card a::after{background:#25252599;transition:opacity 1s} .rs .k-team-card a:hover::after,.rs .k-team-card a:focus::after{transition:opacity .5s} .rs .k-team-card .k-team-card__name.k-team-card__name{padding:0 15px;box-sizing:border-box;line-height:1;transition:opacity 1s} .rs .k-team-card a:hover .k-team-card__name,.rs .k-team-card a:focus .k-team-card__name{transition:opacity .5s} /* (9) About "How It Started" 5711bb6 below 1100: the text widget keeps its last paragraph margin (25.6px; it also balances the two text columns on tablet); phone: column padding 20px, section margin 20px; "Our Team" column padding 20px top */ @media (max-width:1099px){ .rs--about .keel-region--how .rich-text p:last-child{margin-bottom:25.6px} } @media (max-width:767px){ .rs--about .keel-region--how.keel-region--how{padding:20px;margin:20px 0} .rs--about .k-team .keel-region--team_intro.keel-region--team_intro{padding-top:20px} } /* (10) Portfolio list (ECS loop in 50fe79b): 35px between project cards at every width (Keel had 40 on tablet, 32 on phone) */ @media (max-width:1099px){ .rs--portfolio .k-portfolio.k-portfolio{row-gap:35px} } /* (11) App Development intro, phone <=767: Elementor text widget keeps its last paragraph's 25.6px margin (as tablet) */ @media (max-width:767px){ .rs--app-development .keel-region--intro .rich-text p:last-child{margin-bottom:25.6px} } /* (12) Portfolio list, phone <=767: first project card sits 40px below the hero (section 30 + widget-wrap 10) */ @media (max-width:767px){ .rs--portfolio .k-portfolio.k-portfolio{margin-top:40px} } /* (13) Managed IT cards, tablet 768-1099: the original grey box is the widget-wrap (10px margin, 40px padding) inside each 50% column: icon 511.6, title 590.9, box 844.9 high, rows 864.9 apart */ @media (min-width:768px) and (max-width:1099px){ .rs--managed-it-services .keel-region--features .keel-cards img.keel-cards__picture.keel-cards__picture{margin-top:0;margin-bottom:29.3px} .rs--managed-it-services .keel-region--features .keel-cards .keel-cards__card.keel-cards__card{margin:10px 0;padding-bottom:40.1px} .rs--managed-it-services .keel-region--features .keel-cards.keel-cards{row-gap:0;padding-bottom:0} } /* (14) Portfolio list below 1100: one column that may shrink (minmax(0,1fr)) so project cards stay inside the screen, like the original (335px at 375) */ @media (max-width:1099px){ .rs--portfolio .k-portfolio.k-portfolio{grid-template-columns:minmax(0,1fr);padding-left:16px;padding-right:16px} .rs--portfolio .k-portfolio .k-pcard.k-pcard{min-width:0;margin-left:4px;margin-right:4px} } /* (14b) Portfolio card text breaks long no-break runs like the original (Astra body overflow-wrap:break-word), and the card's own grid column may shrink */ @media (max-width:1099px){ .rs--portfolio .k-pcard.k-pcard{grid-template-columns:minmax(0,1fr)} } .rs--portfolio .k-pcard .k-pcard__body.k-pcard__body{min-width:0;overflow-wrap:break-word} /* (15) Testimonials list: grid columns may shrink and card text breaks long runs (Astra body overflow-wrap:break-word), so cards stay 260px wide at 320 like the original */ .rs--testimonials .k-tcard.k-tcard{min-width:0;overflow-wrap:break-word} @media (max-width:767px){ .rs--testimonials .k-tgrid.k-tgrid{grid-template-columns:minmax(0,1fr)} } @media (min-width:768px) and (max-width:1099px){ .rs--testimonials .k-tgrid.k-tgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} } /* (15b) Testimonial organisation line: the original's role widget (10.7 + 20 margin, container -5/-14) and org container -10 put it 1.1px lower than Keel's -5px */ .rs--testimonials .k-tcard .k-tcard__body p.k-tcard__org.k-tcard__org{margin-top:-3.9px} /* (16) Thank-you page, ported from the original's section/column settings and Astra button rules */ /* (16a) phone: content sits 10px from the edge and the photo band is full width */ @media (max-width:767px){ .rs--thankyou .keel-region--intro.keel-region--intro{padding-left:10px;padding-right:10px} .rs--thankyou .keel-region--intro .k-band-img.k-band-img{margin-left:-10px;margin-right:-10px} } /* (16b) >=768: the boxed container is min(1140px,100%) with 10px widget padding, so the region itself has no side padding */ @media (min-width:768px){ .rs--thankyou .keel-region--intro.keel-region--intro{padding-left:0;padding-right:0} .rs--thankyou .keel-region--intro .k-band-img.k-band-img{margin-left:0;margin-right:0} } /* (16c) buttons: Astra's <=1100 rule gives 1.75% 4% of the widget width at 545-767; above 1100 the kit's 18px 30px (Keel's 10px side padding rule caught the button) */ @media (min-width:545px) and (max-width:767px){ .rs--thankyou .keel-region--intro a.button.button,.rs--thankyou a.button.k-band-mist-end{padding:calc((100vw - 20px) * .0175) calc((100vw - 20px) * .04)} } @media (min-width:1100px) and (max-width:1100px){ .rs--thankyou .keel-region--intro a.button.button{padding:18.9px 43.2px} .rs--thankyou a.button.k-band-mist-end.k-band-mist-end{padding:16.1px 36.8px} } @media (min-width:1101px){ .rs--thankyou .keel-region--intro a.button.button{padding:18px 30px} } /* (16d) >=1100: the light-grey band's section has 80px side padding and a 1140px boxed container (+10px widget padding) */ @media (min-width:1100px){ .rs--thankyou .k-band-mist.k-band-mist{padding-left:max(90px, calc((100% - 1120px) / 2));padding-right:max(90px, calc((100% - 1120px) / 2))} } /* (17) Resonate newsletter, 1025-1099: the original's inner section uses a 1024px boxed container (Elementor tablet container width), so the three-box row is 1024px wide and centred */ @media (min-width:1025px) and (max-width:1099px){ body.rs--resonate-newsletter .k-boxes.k-boxes{max-width:1024px;margin-left:auto;margin-right:auto} } /* (17b) Resonate newsletter subscribe button, 545-1100: Astra's <=1100 rule gives padding 1.75% 4% of the button widget width (screen width - 100px here) */ @media (min-width:545px) and (max-width:1100px){ body.rs--resonate-newsletter .keel-region--body a.button.k-band-grey-end.k-band-grey-end{padding:calc((100vw - 100px) * .0175) calc((100vw - 100px) * .04)} } /* (18) Home glossary card >=1100: the original's hero columns (67.11% + 32.546%) leave 0.343% each side of the glossary column (Elementor centres the row), so the card sits 4.4px (1280) / 6.6px (1920) further right */ @media (min-width:1100px){ .rs--home .k-home-hero .keel-region--glossary.keel-region--glossary{left:0.343vw} } /* (19) Home alert button at exactly 1100: Astra's <=1100 rule, 1.75% 4% of the 119.9px button widget */ @media (min-width:1100px) and (max-width:1100px){ .rs.rs--home .keel-region--alert a.button.button{padding:2.1px 4.8px!important} } /* (20) Home logo carousel: allow vertical page scroll on touch while the theme script handles horizontal swipes (Swiper touch behaviour) */ .rs--home .keel-region--client_logos{touch-action:pan-y} /* (21) App Development tablet 768-1099: "We develop for:" heading sits 10px lower in the original (its column's widget-wrap 10px padding), with 10px less below it, so the icon row stays put */ @media (min-width:768px) and (max-width:1099px){ .rs--app-development .keel-region--split .columns--1-1>.column:last-child>h3.keel-block--heading:first-child{margin-top:10px;margin-bottom:10px} } /* ===== run6-28 / round 15 (3 Nov 2026 SGT, Vick 10:32 AM: Privacy Policy link just before the Facebook and LinkedIn icons) ===== */ /* The link is now the first item of the footer social list (li.k-footer__privacy); the old full-width .k-footer__legal row is gone from the footer partial. */ .rs .k-footer__social.k-footer__social{align-items:center} .rs .k-footer__social.k-footer__social li.k-footer__privacy{width:auto;flex:none;padding:0 4px 0 0;margin:0;display:flex;align-items:center} .rs .k-footer .k-footer__privacy a.k-footer__privacy-link{display:inline;width:auto;font-size:16px;line-height:1.857;font-weight:400;color:#ADADAD;text-decoration:none;white-space:nowrap} .rs .k-footer .k-footer__privacy a.k-footer__privacy-link:hover,.rs .k-footer .k-footer__privacy a.k-footer__privacy-link:focus-visible{color:var(--white)} /* >=1100: the icons stay exactly where they were (the original's 20% column ends 2.105% short of the row end); the list grows to the left for the link, the address may shrink if ever needed */ @media (min-width:1100px){ .rs .k-footer__social.k-footer__social{flex:0 0 auto;margin-left:auto;margin-right:2.105%} .rs .k-footer__addr.k-footer__addr{flex:1 1 0;min-width:0;margin-right:30px} } /* tablet 768-1099: as in the original the icons follow the logo; the link now leads that group (logo | Privacy Policy f in) */ @media (min-width:768px) and (max-width:1099px){ .rs .k-footer__social.k-footer__social{flex:0 0 auto;margin-left:0;padding-left:5px} } /* phone: one centred row (link + icons) under the logo; if the screen is too narrow the link sits centred just above the icons */ @media (max-width:767px){ .rs .k-footer__social.k-footer__social{flex-wrap:wrap;justify-content:center;row-gap:6px} }