/* SimpleSolution site styles — loaded on every page by ss-site-enhancements (versioned by file time).
   The local repo is the source of truth: edit here, then deploy with `node tools/deploy.mjs ss-site-enhancements`. */

/* ===== Design system (redesign Phase 1) =====
   Tokens first; then base type, links and focus; buttons; navigation; forms; section rhythm. It sits on top of the
   Tanda theme and of the one-off styles saved in individual Elementor widgets, so a few rules need !important
   (marked). The same colours and fonts are set as Elementor's global colours / fonts (Site Settings). */
/* Fonts (round 2): self-hosted variable WOFF2, Latin (SIL Open Font Licence); preloaded by includes/performance.php. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin-var.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}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-var.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}

:root{
 /* Round 2 colour system. Rule: blue/cyan = automated steps, amber = a person reviews or decides (sparingly). */
 --ss-navy-900:#071624; --ss-navy-800:#0B2236; --ss-navy-700:#12324D; --ss-navy-600:#1D4766;
 --ss-blue:#1660D6;  --ss-blue-light:#4C8DF6;  --ss-cyan:#8CCBFF;
 --ss-amber:#F5A524;        /* "a person decides": tags, eyebrow underline, focus accents */
 --ss-green:#2BB673;        /* "automatic" tags */
 --ss-ink:#0E2B3D; --ss-ink-2:#4A6178; --ss-bg:#FFFFFF; --ss-bg-soft:#F6F9FD; --ss-line:#E8EFF8;
 /* Names used by the earlier phases, mapped onto the system above. */
 --ss-text:var(--ss-ink-2); /* running text (6.3:1 on white) */
 --ss-muted:var(--ss-ink-2);
 --ss-blue-deep:#0B3F93;    /* hover, pressed */
 --ss-sky:#EAF2FD;          /* feature panels */
 --ss-paper:var(--ss-bg-soft);
 --ss-flow:var(--ss-blue);  /* automated steps */
 --ss-white:#FFFFFF;
 --ss-on-navy:#C9D6E6;      /* body text on navy (10:1) */
 --ss-green-text:#16754A;   /* "automatic" tag text (5.6:1 on its tint) */
 --ss-amber-text:#7A4B00;   /* "you decide" tag text (7:1 on its tint) */
 --ss-display:"Plus Jakarta Sans",Inter,"Segoe UI",system-ui,sans-serif;
 --ss-body:Inter,"Segoe UI",system-ui,sans-serif;
 --ss-section:clamp(64px,8vw,112px);
 --ss-radius:16px;
 --ss-radius-sm:10px;
 --ss-shadow:0 18px 40px rgba(16,27,41,.10);
 --ss-ease:.22s ease;
}

/* --- Base type --- */
body{font-family:var(--ss-body);color:var(--ss-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
p{color:var(--ss-text);font-size:17px;line-height:1.6}
@media (min-width:1200px){body,p{font-size:18px}}
h1,h2,h3,h4,h5,h6{font-family:var(--ss-display);color:var(--ss-ink);font-weight:700;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.035em;font-weight:800}
h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:-.03em}
h3{font-size:clamp(20px,2vw,24px)}
h4{font-size:18px}
h5,h6{font-size:16px}
/* Elementor widgets saved with their own fonts (Roboto, Arial): one heading face and one text face everywhere. */
.elementor-heading-title{font-family:var(--ss-display)!important;letter-spacing:-.02em;text-wrap:balance}
/* Headings saved as "regular" look thin in the display face: one weight scale for every heading. */
h1.elementor-heading-title,h2.elementor-heading-title{font-weight:700!important}
h3.elementor-heading-title,h4.elementor-heading-title,h5.elementor-heading-title,h6.elementor-heading-title,.elementor-icon-box-title{font-weight:600!important}
.elementor-widget-text-editor,.elementor-widget-text-editor p,.elementor-widget-text-editor li,.elementor-icon-list-text,.elementor-icon-box-description,.elementor-tab-content,.elementor-counter-title{font-family:var(--ss-body)!important}
.elementor-icon-box-title,.elementor-counter-number-wrapper,.elementor-tab-title,.elementor-accordion-title,.elementor-toggle-title{font-family:var(--ss-display)!important}
strong,b{font-weight:700}
::selection{background:var(--ss-sky);color:var(--ss-ink)}

/* --- Links and keyboard focus --- */
/* Links inside running text only; the theme's navigation, card and contact links keep their own colours. */
.elementor-widget-text-editor a,.entry-content p a,.blog-content p a{color:var(--ss-blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.elementor-widget-text-editor a:hover,.entry-content p a:hover,.blog-content p a:hover{color:var(--ss-blue-deep)}
:focus-visible{outline:2px solid var(--ss-blue)!important;outline-offset:3px}

/* --- Section heads (theme "site-heading"): small uppercase label, then the heading; no underline ornament --- */
.site-heading h4{font-family:var(--ss-body);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ss-blue);margin-bottom:12px}
.site-heading h2{font-family:var(--ss-display);font-weight:700;letter-spacing:-.03em;line-height:1.15;padding-bottom:0}
.site-heading h2::before,.site-heading h2::after,.site-heading .devider{display:none!important}
.default-padding{padding-top:var(--ss-section);padding-bottom:var(--ss-section)}
.default-padding-top{padding-top:var(--ss-section)}
.default-padding-bottom{padding-bottom:var(--ss-section)}

/* --- Buttons: one primary style everywhere (Elementor buttons, theme buttons, form submit) --- */
.elementor-widget-button .elementor-button,
.btn.btn-theme,.btn.btn-dark,.btn-simple,
.wpcf7 .wpcf7-submit,.wpcf7 button[type=submit],.wp-block-search__button{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 font-family:var(--ss-body)!important;font-size:15px!important;font-weight:600!important;line-height:1.2!important;
 letter-spacing:0;text-transform:none;
 padding:14px 26px!important;border-radius:999px!important;                            /* !important: per-widget saved radius */
 background:var(--ss-blue)!important;color:var(--ss-white)!important;border:1px solid var(--ss-blue)!important;  /* !important: per-widget saved colours */
 box-shadow:none;transition:background-color var(--ss-ease),border-color var(--ss-ease),transform var(--ss-ease),box-shadow var(--ss-ease);
}
.elementor-widget-button .elementor-button:hover,.elementor-widget-button .elementor-button:focus-visible,
.btn.btn-theme:hover,.btn.btn-theme:focus-visible,.btn.btn-dark:hover,.btn-simple:hover,
.wpcf7 .wpcf7-submit:hover,.wpcf7 .wpcf7-submit:focus-visible,.wpcf7 button[type=submit]:hover,.wpcf7 button[type=submit]:focus-visible,.wp-block-search__button:hover{
 background:var(--ss-blue-deep)!important;border-color:var(--ss-blue-deep)!important;color:var(--ss-white)!important;
 transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,96,214,.28);
}
.elementor-button .elementor-button-text{font:inherit}
/* The theme removes the focus outline from form buttons; keyboard users need to see it. */
.wpcf7 button[type=submit]:focus-visible,.wpcf7 .wpcf7-submit:focus-visible{outline:2px solid var(--ss-blue-deep)!important;outline-offset:3px!important;box-shadow:0 0 0 5px rgba(22,96,214,.25)!important}
/* Light button (on dark or photo backgrounds) */
.btn.btn-light{display:inline-flex;align-items:center;gap:8px;font-family:var(--ss-body);font-size:15px;font-weight:600;padding:14px 26px;border-radius:999px;background:var(--ss-white);color:var(--ss-ink);border:1px solid var(--ss-white);transition:background-color var(--ss-ease),transform var(--ss-ease)}
.btn.btn-light:hover,.btn.btn-light:focus-visible{background:var(--ss-sky);border-color:var(--ss-sky);color:var(--ss-ink);transform:translateY(-2px)}
/* The theme's sliding hover layer on buttons is replaced by the lift above. */
.btn.effect::after,.btn.effect::before{display:none!important}
.btn.btn-md,.btn.btn-sm{padding:14px 26px}

/* --- Navigation (theme header) --- */
nav.navbar.bootsnav ul.nav>li>a{font-family:var(--ss-body);font-size:14px;font-weight:600;letter-spacing:0;color:var(--ss-ink)}
nav.navbar.bootsnav ul.nav>li>a:hover,nav.navbar.bootsnav ul.nav>li>a.active,nav.navbar.bootsnav ul.nav>li.active>a{color:var(--ss-blue)}
@media (min-width:992px){
 /* Underline that grows on hover, drawn as a background so the theme's dropdown arrow (::after) is untouched. */
 nav.navbar.bootsnav ul.nav>li>a{background-image:linear-gradient(var(--ss-blue),var(--ss-blue))!important;background-repeat:no-repeat;background-size:0 2px;background-position:15px calc(100% - 30px);transition:color var(--ss-ease),background-size .25s ease}
 nav.navbar.bootsnav.sticked ul.nav>li>a{background-position:12px calc(100% - 22px)}
 nav.navbar.bootsnav ul.nav>li>a:hover,nav.navbar.bootsnav ul.nav>li>a:focus-visible,nav.navbar.bootsnav ul.nav>li>a.active{background-size:calc(100% - 30px) 2px}
 nav.navbar.bootsnav li.dropdown ul.dropdown-menu{border:1px solid var(--ss-line);border-radius:14px;box-shadow:var(--ss-shadow);padding:8px;width:280px;overflow:hidden}
 nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li>a{font-family:var(--ss-body);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ss-ink);padding:10px 12px;border-radius:10px;border-bottom:0!important}
 nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li>a:hover,nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li>a:focus-visible{background:var(--ss-paper);color:var(--ss-blue)}
}
/* Sticky state: solid white with a hairline once the page scrolls. */
nav.navbar.bootsnav.sticked{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--ss-line);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px)}
/* Phone and tablet menu: comfortable tap targets. */
@media (max-width:991px){
 nav.navbar.bootsnav ul.nav>li>a{font-size:15px;padding-top:13px;padding-bottom:13px}
 nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li>a{font-family:var(--ss-body);font-size:15px;text-transform:none;color:var(--ss-text)}
}

/* ===== Header and footer (redesign Phase 2) ===== */
/* Menu labels are written in normal case in the menu itself. */
nav.navbar.bootsnav ul.nav>li>a,nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li>a{text-transform:none}
/* The phone block on the right is replaced by the "Discuss your project" menu button on desktop; the number stays in
   the footer, on the Contact page and behind the WhatsApp button. */
@media (min-width:992px){
 nav.navbar.bootsnav .attr-nav{display:none}
 nav.navbar.bootsnav ul.nav>li.ss-nav-cta{margin-left:10px}
 nav.navbar.bootsnav ul.nav>li.ss-nav-cta>a{display:inline-block;margin:28px 0;padding:12px 22px!important;line-height:1.2;border-radius:999px;background:var(--ss-blue)!important;background-image:none!important;color:var(--ss-white)!important;transition:background-color var(--ss-ease),transform var(--ss-ease),box-shadow var(--ss-ease)}
 nav.navbar.bootsnav.sticked ul.nav>li.ss-nav-cta>a{margin:18px 0}
 nav.navbar.bootsnav ul.nav>li.ss-nav-cta>a:hover,nav.navbar.bootsnav ul.nav>li.ss-nav-cta>a:focus-visible{background:var(--ss-blue-deep)!important;transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,96,214,.28)}
 /* Services dropdown: a little more room for the labels; also opens for keyboard users (the theme opens it on hover). */
 nav.navbar.bootsnav li.dropdown ul.dropdown-menu{width:260px}
 nav.navbar.bootsnav li.dropdown:focus-within>ul.dropdown-menu{display:block!important;opacity:1!important;visibility:visible!important}
}
@media (max-width:991px){
 /* The theme limits the open menu's height, hiding the last items; let it use the screen. */
 nav.navbar.bootsnav .navbar-collapse.collapse.show,nav.navbar.bootsnav .navbar-collapse.collapsing{max-height:calc(100vh - 90px)!important;overflow-y:auto}
 nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li>a{padding-top:12px;padding-bottom:12px}
 nav.navbar.bootsnav ul.nav>li.ss-nav-cta{border:0!important;padding:14px 0 6px}
 nav.navbar.bootsnav ul.nav>li.ss-nav-cta>a{display:block;text-align:center;border-radius:999px;background:var(--ss-blue)!important;background-image:none!important;color:var(--ss-white)!important;padding:14px 20px!important}
}

/* Footer: ink background, quiet text, white headings; the theme's decorative world map is removed. */
footer.bg-dark{background:var(--ss-ink)!important;color:#A8B5C7}
footer .fixed-shape{display:none}
footer .f-items.default-padding{padding-top:clamp(56px,6vw,80px);padding-bottom:clamp(32px,4vw,48px)}
footer .f-item p,footer .f-item .info,footer .f-item li,footer .f-item a{color:#A8B5C7;font-size:15px;line-height:1.6}
footer .f-item a{transition:color var(--ss-ease)}
footer .f-item a:hover,footer .f-item a:focus-visible,footer .footer-bottom a:hover,footer .footer-bottom a:focus-visible{color:var(--ss-white)}
footer .f-item .widget-title{font-family:var(--ss-display);font-size:15px;line-height:1.3;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ss-white);margin-bottom:18px}
footer .f-item .widget-title::before,footer .f-item .widget-title::after{display:none}
footer .f-item.link li{margin-bottom:10px}
footer .f-item.link li a::before{display:none}
footer .f-item.link li a{padding-left:0}
footer .f-item.about{border:0!important;background:none!important;padding:0!important}
footer .f-item.about img{max-width:220px;height:auto;margin-bottom:18px;border-radius:10px}
/* Footer only: the site's transparent logo shown in white on the dark background (CSS only; the image file and the
   header logo are unchanged). */
footer .f-item.about img.ss-footer-logo{width:200px;max-width:100%;height:auto;border-radius:0;filter:brightness(0) invert(1)}
footer .f-item.about p{max-width:34ch}
footer .f-item .address li{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
footer .f-item .address .icon i{color:#7FB0FF;font-size:18px}
footer .footer-bottom{border-top:1px solid rgba(255,255,255,.12);background:transparent}
footer .footer-bottom p,footer .footer-bottom a{color:#8D9BB0;font-size:13.5px}
@media (max-width:991px){
 footer .f-items .item{margin-top:0!important;margin-bottom:32px}
 footer .f-items .item:last-child{margin-bottom:0}
}
@media (max-width:767px){
 footer .footer-bottom,footer .footer-bottom p,footer .footer-bottom .text-right{text-align:left!important}
 footer .footer-bottom .text-right{margin-top:6px}
 footer .footer-bottom ul.menu{padding-left:0}
 footer .footer-bottom ul.menu li:first-child{margin-left:0}
}

/* ===== Homepage (redesign Phase 3). Elementor containers carry these classes; editable in Elementor. ===== */
.ss-section{padding-top:var(--ss-section)!important;padding-bottom:var(--ss-section)!important}
.ss-section,.ss-home-hero{padding-left:24px!important;padding-right:24px!important}
@media (max-width:767px){.ss-section,.ss-home-hero{padding-left:16px!important;padding-right:16px!important}}
.ss-paper{background:var(--ss-paper)}
.ss-section .elementor-widget:not(:last-child){margin-bottom:0}
.ss-eyebrow .elementor-heading-title{font-family:var(--ss-body)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.16em!important;text-transform:uppercase;color:var(--ss-blue)!important}
.ss-lead,.ss-lead p{font-size:18px;line-height:1.6;color:var(--ss-text);max-width:52ch}
.ss-muted,.ss-muted p{color:var(--ss-muted)}
/* Section head: label + heading on the left, short summary on the right. */
.ss-head{display:grid!important;grid-template-columns:1.15fr .85fr;gap:12px 40px;align-items:end;margin-bottom:32px;padding:0!important}
.ss-head .ss-eyebrow{grid-column:1}
.ss-head .ss-h2{grid-column:1}
.ss-head .ss-intro{grid-column:2;grid-row:1/span 2;align-self:end}
.ss-h2 .elementor-heading-title{font-size:clamp(28px,3.2vw,40px)!important;line-height:1.12!important;letter-spacing:-.03em!important;color:var(--ss-ink)!important;margin-top:10px}
.ss-intro p{color:var(--ss-muted);font-size:16px;margin:0}
@media (max-width:880px){.ss-head{grid-template-columns:1fr}.ss-head .ss-intro{grid-column:1;grid-row:auto}}

/* Buttons beside the primary one */
.ss-actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap;align-items:center;gap:12px;padding:0!important;margin-top:28px}
.ss-actions .elementor-widget{margin:0!important;width:auto}
.ss-btn-ghost .elementor-button{background:var(--ss-white)!important;color:var(--ss-ink)!important;border-color:#C9D3E0!important}
.ss-btn-ghost .elementor-button:hover,.ss-btn-ghost .elementor-button:focus-visible{background:var(--ss-white)!important;color:var(--ss-ink)!important;border-color:var(--ss-ink)!important;box-shadow:none}
.ss-btn-wa .elementor-button{background:var(--ss-white)!important;color:#0B6B3A!important;border-color:#BFE3CD!important}
.ss-btn-wa .elementor-button::before{content:"";width:9px;height:9px;border-radius:50%;background:#25D366;display:inline-block}
.ss-btn-wa .elementor-button:hover,.ss-btn-wa .elementor-button:focus-visible{background:#F2FBF5!important;color:#0B6B3A!important;border-color:#25D366!important;box-shadow:none}

/* Hero */
.ss-home-hero{background:linear-gradient(180deg,#F6F9FE 0%,#FFFFFF 100%);padding-top:clamp(48px,7vw,96px)!important;padding-bottom:clamp(48px,7vw,96px)!important}
.ss-home-hero>.e-con-inner{display:grid!important;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center}
.ss-hero-copy{padding:0!important}
.ss-hero-title .elementor-heading-title{font-size:clamp(36px,4.6vw,58px)!important;line-height:1.04!important;letter-spacing:-.04em!important;font-weight:800!important;color:var(--ss-ink)!important;margin:14px 0 16px;max-width:15ch}
.ss-servicesline p{font-size:13px;color:var(--ss-muted);margin:22px 0 0}
@media (max-width:991px){.ss-home-hero>.e-con-inner{grid-template-columns:1fr}}
/* Hero actions: three buttons on one row on desktop and tablet; a full-width stack on phones. */
.ss-home-hero .ss-actions{gap:10px;flex-wrap:nowrap}
.ss-home-hero .ss-actions .elementor-button{padding:13px 20px!important;white-space:nowrap}
@media (min-width:992px) and (max-width:1199px){
 .ss-home-hero>.e-con-inner{grid-template-columns:1.25fr .75fr}
 .ss-home-hero .ss-actions .elementor-button{padding:13px 16px!important;font-size:14.5px!important}
}
@media (max-width:599px){
 .ss-home-hero .ss-actions{flex-direction:column!important;flex-wrap:nowrap;align-items:stretch}
 .ss-home-hero .ss-actions .elementor-widget,.ss-home-hero .ss-actions .elementor-button-wrapper,.ss-home-hero .ss-actions .elementor-button{width:100%}
}

/* Workflow illustration ([ss_workflow]) */
.ss-flow{margin:0;background:var(--ss-white);border:1px solid var(--ss-line);border-radius:18px;padding:20px;box-shadow:0 24px 60px rgba(16,27,41,.10)}
.ss-flow-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px dashed var(--ss-line);font:600 12px/1.2 var(--ss-body);color:var(--ss-muted)}
.ss-flow-head b{font:700 14px/1.2 var(--ss-display);color:var(--ss-ink)}
.ss-flow-head span{padding:4px 8px;border-radius:999px;background:var(--ss-paper);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.ss-flow ol{list-style:none;margin:0;padding:0}
.ss-step{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:10px 0;position:relative}
.ss-step+.ss-step::before{content:"";position:absolute;left:17px;top:-10px;height:20px;border-left:2px dotted #9FD9CF}
.ss-step i{width:36px;height:36px;border-radius:10px;background:var(--ss-sky);display:grid;place-items:center;font:700 13px/1 var(--ss-display);font-style:normal;color:var(--ss-blue)}
.ss-step b{display:block;font:600 14px/1.25 var(--ss-body);color:var(--ss-ink)}
.ss-step small{display:block;font-size:12.5px;line-height:1.35;color:var(--ss-muted)}
.ss-step em{font:600 10.5px/1 var(--ss-body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--ss-paper);color:var(--ss-muted);white-space:nowrap}
.ss-step.ss-auto i,.ss-step.ss-auto em{background:#E2F5F1;color:#0B6B5D}
.ss-step.ss-human i,.ss-step.ss-human em{background:#FFF3DC;color:#7A5300}
@media (prefers-reduced-motion:no-preference){
 .ss-step.ss-auto i{animation:ss-tick 3.6s ease-in-out infinite}
 .ss-step.ss-auto:nth-child(3) i{animation-delay:.6s}.ss-step.ss-auto:nth-child(4) i{animation-delay:1.2s}
 @keyframes ss-tick{0%,70%,100%{box-shadow:0 0 0 0 rgba(15,157,138,0)}80%{box-shadow:0 0 0 5px rgba(15,157,138,.18)}}
}
@media (max-width:420px){.ss-step{grid-template-columns:32px 1fr}.ss-step em{grid-column:2;justify-self:start}}

/* Automation examples */
.ss-uc-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:14px;padding:0!important}
.ss-uc{background:var(--ss-white);border:1px solid var(--ss-line);border-radius:14px;padding:18px!important;gap:6px!important;justify-content:flex-start!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ss-uc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,27,41,.10);border-color:#C9D3E0}
.ss-uc .elementor-heading-title{font-size:15.5px!important;line-height:1.3!important;font-weight:700!important;letter-spacing:-.01em!important;color:var(--ss-ink)!important}
.ss-uc p{font-size:14px;line-height:1.5;color:var(--ss-muted);margin:0}
.ss-uc-featured{background:var(--ss-ink);border-color:var(--ss-ink)}
.ss-uc-featured .elementor-heading-title{color:#FFFFFF!important}
.ss-uc-featured p{color:#B8C4D4}
.ss-uc-featured .ss-eyebrow .elementor-heading-title{color:#7DE0D0!important;font-size:11px!important}
.ss-examples-note p{font-size:13px;color:var(--ss-muted);margin:14px 0 0}
@media (max-width:991px){.ss-uc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ss-uc-grid{grid-template-columns:1fr}}

/* Services */
.ss-svc-grid{display:grid!important;grid-template-columns:repeat(6,1fr);gap:16px;padding:0!important}
.ss-svc-grid>.elementor-widget-image-box{grid-column:span 2;margin:0!important}
.ss-svc-grid>.ss-card-wide{grid-column:span 3}
.ss-group-label{grid-column:1/-1;margin:10px 0 0!important}
.ss-group-label .elementor-heading-title{display:flex;align-items:center;gap:12px;font-family:var(--ss-body)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase;color:var(--ss-muted)!important}
.ss-group-label .elementor-heading-title::after{content:"";flex:1;border-top:1px solid var(--ss-line)}
.ss-card .elementor-image-box-wrapper{height:100%;display:flex;flex-direction:column;background:var(--ss-white);border:1px solid var(--ss-line);border-radius:16px;overflow:hidden;text-align:left;transition:transform .3s ease,box-shadow .3s ease}
.ss-card .elementor-image-box-wrapper:hover,.ss-card .elementor-image-box-wrapper:focus-within{transform:translateY(-6px);box-shadow:0 24px 50px rgba(16,27,41,.14)}
.ss-card .elementor-image-box-img{margin:0!important;width:100%!important;aspect-ratio:16/10;overflow:hidden;background:var(--ss-paper)}
.ss-card-wide .elementor-image-box-img{aspect-ratio:16/8}
.ss-card .elementor-image-box-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.ss-card .elementor-image-box-wrapper:hover img{transform:scale(1.04)}
.ss-card .elementor-image-box-content{padding:18px 20px 22px}
.ss-card .elementor-image-box-title{font-size:18px!important;margin:0 0 6px!important}
.ss-card .elementor-image-box-title a{color:var(--ss-ink)}
.ss-card .elementor-image-box-title a::after{content:" →";color:var(--ss-blue)}
.ss-card .elementor-image-box-description{font-size:14.5px;line-height:1.55;color:var(--ss-muted);margin:0}
.ss-bpa-card{grid-column:1/-1;display:grid!important;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;background:var(--ss-sky);border:1px solid #CFE0F8;border-radius:18px;padding:clamp(22px,3vw,32px)!important}
.ss-bpa-card .ss-eyebrow .elementor-heading-title{color:#0B6B5D!important}
.ss-bpa-card h3.elementor-heading-title{font-size:clamp(22px,2.4vw,28px)!important;font-weight:700!important;color:var(--ss-ink)!important;margin:8px 0}
.ss-bpa-copy{padding:0!important}
.ss-bpa-examples ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ss-bpa-examples li{display:flex;justify-content:space-between;gap:10px;background:var(--ss-white);border:1px solid #CFE0F8;border-radius:10px;padding:10px 14px;font-size:14px;color:var(--ss-ink)}
.ss-bpa-examples li b{font-weight:600;color:#0B6B5D}
.ss-bpa-examples li b.ss-you{color:#7A5300}
.ss-bpa-examples p{font-size:12.5px;color:var(--ss-muted);margin:8px 0 0}
@media (max-width:991px){.ss-svc-grid{grid-template-columns:1fr 1fr}.ss-svc-grid>.elementor-widget-image-box,.ss-svc-grid>.ss-card-wide{grid-column:auto}.ss-bpa-card{grid-template-columns:1fr}}
@media (max-width:560px){.ss-svc-grid{grid-template-columns:1fr}}

/* Why Simple Solution (dark band) */
.ss-dark{background:var(--ss-ink)}
.ss-dark .ss-eyebrow .elementor-heading-title{color:#7FB0FF!important}
.ss-dark .ss-h2 .elementor-heading-title{color:#FFFFFF!important;max-width:22ch}
.ss-why-grid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:28px;padding:0!important;margin-top:28px}
.ss-why{border-top:1px solid rgba(255,255,255,.16);padding:16px 0 0!important;gap:6px!important}
.ss-why .elementor-heading-title{color:#FFFFFF!important;font-size:16px!important;font-weight:700!important}
.ss-why p{color:#C8D2E0;font-size:14.5px;margin:0}
.ss-why-grid.ss-three{grid-template-columns:repeat(3,1fr)}
.ss-labelled{padding:0!important;gap:10px!important}
@media (max-width:991px){.ss-why-grid,.ss-why-grid.ss-three{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ss-why-grid,.ss-why-grid.ss-three{grid-template-columns:1fr}}

/* Closing call to action */
.ss-cta{background-color:#1660D6;background-image:linear-gradient(120deg,#0B3F93,#1660D6);border-radius:22px;padding:clamp(28px,4vw,48px)!important;display:grid!important;grid-template-columns:1.3fr auto;gap:24px;align-items:center}
.ss-cta .elementor-heading-title{color:#FFFFFF!important;font-size:clamp(24px,2.8vw,34px)!important;letter-spacing:-.03em!important}
.ss-cta p{color:#DCE8FB;margin:8px 0 0}
.ss-cta .ss-actions{margin-top:0}
.ss-cta .ss-btn-light .elementor-button{background:#FFFFFF!important;color:#0B3F93!important;border-color:#FFFFFF!important}
.ss-cta .ss-btn-light .elementor-button:hover,.ss-cta .ss-btn-light .elementor-button:focus-visible{background:var(--ss-sky)!important;color:#0B3F93!important}
@media (max-width:880px){.ss-cta{grid-template-columns:1fr}}

/* ===== Business Process Automation page (redesign Phase 4); reuses the homepage classes above. ===== */
.ss-narrow{max-width:760px}
.ss-prose p{font-size:17px;line-height:1.7;color:var(--ss-text);margin:0 0 14px}
.ss-prose p:last-child{margin-bottom:0}
.ss-two{display:grid!important;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start;padding:0!important}
@media (max-width:880px){.ss-two{grid-template-columns:1fr}}
/* "Signs it could help": a checklist with teal ticks */
.ss-checklist ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ss-checklist li{position:relative;padding:14px 16px 14px 48px;background:var(--ss-white);border:1px solid var(--ss-line);border-radius:12px;font-size:16px;line-height:1.5;color:var(--ss-ink)}
.ss-checklist li::before{content:"";position:absolute;left:16px;top:16px;width:20px;height:20px;border-radius:50%;background:#E2F5F1}
.ss-checklist li::after{content:"";position:absolute;left:23px;top:20px;width:6px;height:10px;border:solid var(--ss-flow);border-width:0 2px 2px 0;transform:rotate(45deg)}
/* Example cards: what it is, then an illustrative before / after */
.ss-ex-grid{display:grid!important;grid-template-columns:repeat(2,1fr);gap:16px;padding:0!important}
.ss-ex{background:var(--ss-white);border:1px solid var(--ss-line);border-radius:16px;padding:22px!important;gap:8px!important;justify-content:flex-start!important}
.ss-ex .elementor-heading-title{font-size:18px!important;font-weight:700!important;color:var(--ss-ink)!important}
.ss-ex p{font-size:15px;line-height:1.55;color:var(--ss-muted);margin:0}
.ss-ex .ss-ba{margin-top:6px;display:grid;gap:8px}
.ss-ex .ss-ba p{font-size:14px;line-height:1.5;color:var(--ss-text);background:var(--ss-paper);border-radius:10px;padding:10px 12px}
.ss-ex .ss-ba b{display:block;font:700 10.5px/1.4 var(--ss-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ss-muted);margin-bottom:2px}
.ss-ex .ss-ba p.ss-after{background:#E2F5F1}
.ss-ex .ss-ba p.ss-after b{color:#0B6B5D}
@media (max-width:760px){.ss-ex-grid{grid-template-columns:1fr}}
/* Approach: four numbered steps (a real sequence) */
.ss-steps{display:grid!important;grid-template-columns:repeat(4,1fr);gap:0;padding:0!important;border-top:1px solid var(--ss-line)}
.ss-steps>.e-con{padding:22px 22px 6px 0!important;gap:8px!important;justify-content:flex-start!important}
.ss-steps>.e-con+.e-con{padding-left:22px!important;border-left:1px solid var(--ss-line)}
.ss-steps .ss-num .elementor-heading-title{font:700 13px/1 var(--ss-display)!important;color:var(--ss-blue)!important;letter-spacing:0!important}
.ss-steps h3.elementor-heading-title{font-size:18px!important;font-weight:700!important;color:var(--ss-ink)!important}
.ss-steps p{font-size:15px;line-height:1.55;color:var(--ss-muted);margin:0}
@media (max-width:991px){.ss-steps{grid-template-columns:1fr 1fr}.ss-steps>.e-con:nth-child(3){padding-left:0!important;border-left:0}.ss-steps>.e-con{padding-bottom:22px!important}}
@media (max-width:560px){.ss-steps{grid-template-columns:1fr}.ss-steps>.e-con+.e-con{padding-left:0!important;border-left:0;border-top:1px solid var(--ss-line)}}
/* Technology note */
.ss-tech p{font-size:16px;line-height:1.65;color:var(--ss-text);margin:0 0 10px}
.ss-tech p.ss-small{font-size:13px;color:var(--ss-muted)}
/* FAQ (Elementor accordion) */
.ss-faq .elementor-accordion-item{border:0!important;border-bottom:1px solid var(--ss-line)!important}
.ss-faq .elementor-accordion-item:first-child{border-top:1px solid var(--ss-line)!important}
.ss-faq .elementor-tab-title{padding:18px 0!important;font-family:var(--ss-display)!important;font-weight:600!important;font-size:17px!important}
.ss-faq .elementor-tab-title a{color:var(--ss-ink)!important}
.ss-faq .elementor-tab-title .elementor-accordion-icon{color:var(--ss-blue)!important}
.ss-faq .elementor-tab-content{padding:0 0 18px!important;border:0!important;font-size:16px;color:var(--ss-text)}
/* Enquiry: contact details on the left, the existing contact form on the right */
.ss-enquiry{background:var(--ss-white);border:1px solid var(--ss-line);border-radius:22px;padding:clamp(22px,3.5vw,40px)!important;display:grid!important;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,48px);align-items:start;box-shadow:0 24px 60px rgba(16,27,41,.08)}
.ss-enquiry h2.elementor-heading-title{font-size:clamp(24px,2.8vw,34px)!important;letter-spacing:-.03em!important;color:var(--ss-ink)!important}
.ss-enquiry .ss-contact-lines p{margin:0 0 6px;font-size:15.5px;color:var(--ss-text)}
.ss-enquiry .ss-contact-lines a{color:var(--ss-blue);text-decoration:none}
.ss-enquiry .ss-contact-lines a:hover,.ss-enquiry .ss-contact-lines a:focus-visible{text-decoration:underline}
.ss-enquiry .wpcf7 .row{margin-left:-6px;margin-right:-6px}
.ss-enquiry .wpcf7 [class*="col-"]{padding-left:6px;padding-right:6px}
.ss-enquiry .wpcf7 .form-group{margin-bottom:12px}
@media (max-width:880px){.ss-enquiry{grid-template-columns:1fr}}

/* ===== Service pages (redesign Phase 5); reuse the homepage / BPA classes above. ===== */
.ss-hero-img{margin:0!important}
.ss-hero-img img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;box-shadow:0 24px 60px rgba(16,27,41,.14)}
.ss-side-img img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:16px}
.ss-ex ul{margin:4px 0 0;padding-left:1.1em;display:grid;gap:4px}
.ss-ex li{font-size:15px;line-height:1.5;color:var(--ss-text)}
.ss-ex li::marker{color:var(--ss-blue)}
.ss-ex-grid.ss-three{grid-template-columns:repeat(3,1fr)}
@media (max-width:991px){.ss-ex-grid.ss-three{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ss-ex-grid.ss-three{grid-template-columns:1fr}}
/* Automation tie-in: a sky panel pointing to the flagship service */
.ss-tie{display:grid!important;grid-template-columns:1fr auto;gap:20px;align-items:center;background:var(--ss-sky);border:1px solid #CFE0F8;border-radius:18px;padding:clamp(20px,3vw,32px)!important}
.ss-tie .ss-eyebrow .elementor-heading-title{color:#0B6B5D!important}
.ss-tie h2.elementor-heading-title{font-size:clamp(20px,2.2vw,26px)!important;font-weight:700!important;color:var(--ss-ink)!important;margin:6px 0}
.ss-tie p{margin:0;color:var(--ss-text)}
.ss-tie .ss-actions{margin-top:0}
@media (max-width:760px){.ss-tie{grid-template-columns:1fr}}
/* Other services: a row of quiet links */
.ss-related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.ss-related a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid var(--ss-line);border-radius:999px;background:var(--ss-white);color:var(--ss-ink);font-weight:600;font-size:14.5px;text-decoration:none;transition:border-color var(--ss-ease),color var(--ss-ease)}
.ss-related a:hover,.ss-related a:focus-visible{border-color:var(--ss-blue);color:var(--ss-blue)}
.ss-related a.ss-flag{border-color:#9FD9CF;color:#0B6B5D}
.ss-related a.ss-flag::after{content:"Flagship";margin-left:8px;font:700 10px/1 var(--ss-body);letter-spacing:.08em;text-transform:uppercase;background:#E2F5F1;border-radius:999px;padding:4px 7px}
.ss-note p{font-size:13px;color:var(--ss-muted);margin:14px 0 0}

/* ===== About, Contact, FAQ (redesign Phase 6) ===== */
.ss-home-hero.ss-hero-single>.e-con-inner{grid-template-columns:1fr}
.ss-hero-single .ss-hero-title .elementor-heading-title{max-width:20ch}
.ss-hero-single .ss-lead,.ss-hero-single .ss-lead p{max-width:60ch}
.ss-map iframe{display:block;width:100%;height:380px;border:0;border-radius:18px}
.ss-enquiry .ss-contact-lines p b{display:block;font:700 11px/1.4 var(--ss-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ss-muted);margin-top:10px}

/* Theme headings moved to logical levels (Phase 6): each keeps its previous look. */
.ss-h-step,.ss-h-faq{font-family:var(--ss-display)!important;font-size:18px!important;font-weight:600!important;line-height:1.15!important;letter-spacing:-.02em!important;color:var(--ss-ink)}
.ss-h-step{margin-bottom:15px}
.ss-h-faq{margin-bottom:0}
.ss-faq-label{font-family:var(--ss-display);font-size:16px;font-weight:600;line-height:1.15;letter-spacing:-.02em;text-transform:uppercase;color:#086AD8;margin:0 0 25px;display:inline-block;position:relative;z-index:1;padding-left:45px}
.ss-faq-label::after{position:absolute;left:0;top:50%;content:"";height:2px;width:30px;background:#086AD8;margin-top:-1px}
.ss-h-post{font-family:var(--ss-display)!important;font-size:20px!important;font-weight:600!important;line-height:28px!important;letter-spacing:-.02em!important;margin-bottom:15px;color:var(--ss-ink)}
.ss-h-pagi{display:block;margin-top:5px;font-family:var(--ss-display);font-size:16px;font-weight:500;line-height:1.15;letter-spacing:-.02em;text-transform:capitalize;color:var(--ss-ink);word-break:break-word}
.blog-area .sidebar .title h2.ss-h-side{font-family:var(--ss-display);font-size:18px!important;font-weight:600;line-height:1.15;letter-spacing:-.02em;margin-bottom:30px;margin-top:-5px;position:relative;text-transform:capitalize;z-index:1;display:inline-block;padding-left:15px;color:var(--ss-ink)}
.blog-area .sidebar .title h2.ss-h-side::after{position:absolute;left:0;top:4px;content:"";height:18px;width:2px;border-left:3px solid #086AD8}

/* Services dropdown: the flagship service gets a small teal label (menu item class ss-menu-flagship). */
nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li.ss-menu-flagship>a::after{content:"Flagship";margin-left:8px;font:700 10px/1 var(--ss-body);letter-spacing:.08em;text-transform:uppercase;color:#0B6B5D;background:#E2F5F1;border-radius:999px;padding:4px 7px;vertical-align:2px}

/* Theme blocks reused on the homepage (How we work, FAQ, Insights) */
.ss-raw{padding:0!important}
.ss-raw .default-padding,.ss-raw .default-padding-top,.ss-raw .default-padding-bottom{padding-top:var(--ss-section);padding-bottom:var(--ss-section)}
.ss-home-work .work-process-area,.ss-home-work [class*="process"]{background:var(--ss-paper)}
/* The theme hides these cards until a scroll animation runs; show them at once. */
.ss-home-blog .wow{visibility:visible!important;animation:none!important}
/* Insights on the homepage: titles and excerpts only (no stock thumbnails, no placeholder author or 2021 dates). */
.ss-home-blog .thumb,.ss-home-blog .meta,.ss-home-blog .post-meta,.ss-home-blog .blog-meta{display:none!important}
.ss-home-blog .item,.ss-home-blog .single-item .item{box-shadow:none!important;border:0;border-top:2px solid var(--ss-ink);border-radius:0;background:transparent;padding:16px 0 0!important}
.ss-home-blog .info{padding:0!important}
.ss-home-blog .btn-simple{background:none!important;border:0!important;color:var(--ss-blue)!important;padding:0!important;text-transform:none!important;font-size:15px!important;transform:none!important;box-shadow:none!important}
.ss-home-blog .btn-simple:hover,.ss-home-blog .btn-simple:focus-visible{color:var(--ss-blue-deep)!important;text-decoration:underline}

/* --- Forms (Contact Form 7, search) --- */
.wpcf7 input:not([type=submit]):not([type=checkbox]):not([type=radio]),.wpcf7 select,.wpcf7 textarea,.form-control{
 font-family:var(--ss-body);font-size:15px;color:var(--ss-ink);background:var(--ss-white);
 border:1px solid var(--ss-line);border-radius:var(--ss-radius-sm);box-shadow:none;transition:border-color var(--ss-ease),box-shadow var(--ss-ease)}
.wpcf7 input:not([type=submit]):focus,.wpcf7 select:focus,.wpcf7 textarea:focus,.form-control:focus{border-color:var(--ss-blue);box-shadow:0 0 0 3px rgba(22,96,214,.15);outline:0}
.wpcf7 ::placeholder,.form-control::placeholder{color:var(--ss-muted);opacity:1}

/* --- Page titles (existing H1 treatment, now in the system's fonts) --- */
.breadcrumb-area h1.ss-title{font-family:var(--ss-display);font-size:clamp(32px,4vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.03em;color:#fff;margin:-10px 0 0;text-transform:none}
.banner-area .content h1.ss-title{font-family:var(--ss-display);font-size:clamp(34px,4.6vw,60px);font-weight:700;line-height:1.06;letter-spacing:-.04em;color:var(--ss-ink);margin:0 0 25px;text-transform:none}
.banner-area .content h1.ss-title strong{display:block;font-weight:800;color:var(--ss-blue)}
.banner-area .content .ss-hero-spacer{height:28.8px;margin-bottom:25px}
@media (max-width:991px){.breadcrumb-area h1.ss-title{margin-bottom:25px}}
@media (max-width:767px){.banner-area .content .ss-hero-spacer{height:28px}}

/* --- Motion --- */
/* Content is visible by default (round 2): the theme's and Elementor's entrance animations no longer hide anything
   until they run. site.js fades sections in (.ss-rv → .ss-in) only when they start below the first screen. */
.wow{visibility:visible!important;animation:none!important}
.elementor-invisible{visibility:visible!important;opacity:1!important}
@media (prefers-reduced-motion:no-preference){
 .ss-rv{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
 .ss-rv.ss-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

/* reCAPTCHA: the badge is hidden and Google's notice is printed under each form instead (includes/components.php),
   so nothing overlaps the WhatsApp button. On phones the WhatsApp bubble gives way to the contact bar. */
.grecaptcha-badge{visibility:hidden!important}
.ss-recaptcha-note{font-size:12.5px!important;line-height:1.5!important;color:var(--ss-ink-2)!important;margin:12px 0 0!important}
.ss-recaptcha-note a{color:inherit!important;text-decoration:underline}
@media (max-width:767px){.wa__btn_popup,.wa__popup_chat_box{display:none!important}}

/* ===== Round 2: visual identity (navy sections, illustrations, colour rule, type) ===== */
/* Focus: an ink ring for contrast with a soft amber halo (amber on its own is too light on white). */
:focus-visible{outline:2px solid var(--ss-ink)!important;outline-offset:3px;box-shadow:0 0 0 6px rgba(245,165,36,.45)}
.ss-navy :focus-visible,.ss-dark :focus-visible,.ss-cta-band :focus-visible,footer :focus-visible{outline-color:var(--ss-amber)!important}
/* Reading width and eyebrows (13px, 700, .14em, amber underline) */
.ss-prose p,.ss-lead p,.ss-intro p,.ss-tech p,.entry-content p{max-width:68ch}
.ss-eyebrow .elementor-heading-title{font-size:13px!important;letter-spacing:.14em!important;display:inline-block;position:relative;padding-bottom:12px}
.ss-eyebrow .elementor-heading-title::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;border-radius:2px;background:var(--ss-amber)}
.ss-uc-featured .ss-eyebrow .elementor-heading-title{color:var(--ss-cyan)!important;font-size:12px!important}
/* Headings: Plus Jakarta Sans 700–800, large and calm */
h2,.ss-h2 .elementor-heading-title{font-weight:800!important}
.ss-h2 .elementor-heading-title{font-size:clamp(30px,3.4vw,46px)!important;letter-spacing:-.035em!important}
.ss-section{padding-top:clamp(72px,9vw,128px)!important;padding-bottom:clamp(72px,9vw,128px)!important}
.ss-head{margin-bottom:44px}

/* Hero: larger title; illustration on the right from 1024px, the HTML example card below that */
.ss-hero-title .elementor-heading-title{font-size:clamp(38px,5vw,72px)!important;letter-spacing:-.045em!important;line-height:1.02!important;max-width:14ch}
.ss-hero-visual .ss-hero-art{display:block;width:100%;height:auto;border-radius:24px;box-shadow:0 30px 80px rgba(7,22,36,.30);background:var(--ss-navy-900)}
.ss-hero-pic{display:block}
@media (max-width:1023px){.ss-hero-visual .ss-hero-pic{display:none}}
@media (min-width:1024px){.ss-hero-visual .ss-hero-card{display:none}.ss-home-hero>.e-con-inner{grid-template-columns:1fr 1.05fr}}
.ss-hero-visual-single .ss-hero-art{aspect-ratio:3/2;object-fit:cover}
.ss-flow-head span{background:#E8F1FE;color:var(--ss-blue)}
.ss-step.ss-auto i{background:#E8F1FE;color:var(--ss-blue)}
.ss-step.ss-auto em{background:#E3F6EC;color:var(--ss-green-text)}
.ss-step.ss-human i,.ss-step.ss-human em{background:#FEF1DB;color:var(--ss-amber-text)}
.ss-step+.ss-step::before{border-left-color:var(--ss-cyan)}

/* Navy, full-bleed sections */
.ss-navy,.ss-dark{background-color:var(--ss-navy-900)!important;background-image:radial-gradient(900px 500px at 85% 0%,rgba(76,141,246,.18),transparent 60%),linear-gradient(180deg,var(--ss-navy-900),var(--ss-navy-800))}
.ss-navy .ss-eyebrow .elementor-heading-title,.ss-dark .ss-eyebrow .elementor-heading-title{color:var(--ss-cyan)!important}
.ss-navy .ss-h2 .elementor-heading-title,.ss-dark .ss-h2 .elementor-heading-title,.ss-navy h2,.ss-navy h3{color:#FFFFFF!important}
.ss-navy .ss-intro p,.ss-navy p,.ss-dark .ss-why p{color:var(--ss-on-navy)}

/* Services grid ([ss_services]): 3 columns, the flagship tile 2×2; 2 columns on tablets; 1 on phones */
.ss-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ss-tile{margin:0}
.ss-tile>a{display:flex;flex-direction:column;height:100%;background:var(--ss-navy-800);border:1px solid rgba(140,203,255,.16);border-radius:18px;overflow:hidden;text-decoration:none!important;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.ss-tile>a:hover,.ss-tile>a:focus-visible{transform:translateY(-4px);border-color:rgba(140,203,255,.6);box-shadow:0 0 0 1px rgba(140,203,255,.35),0 18px 48px rgba(76,141,246,.28)}
.ss-tile-img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ss-navy-900)}
.ss-tile-img img{display:block;width:100%;height:100%;object-fit:cover}
.ss-tile-body{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:20px 22px 22px;flex:1}
.ss-tile h3{margin:0;color:#FFFFFF!important;font-size:20px;font-weight:700;letter-spacing:-.02em}
.ss-tile-desc{color:var(--ss-on-navy);font-size:15.5px;line-height:1.55}
.ss-more{margin-top:auto;padding-top:8px;color:var(--ss-cyan);font-weight:600;font-size:15px}
.ss-tile>a:hover .ss-more{color:#FFFFFF}
.ss-tile-flag{grid-column:span 2;grid-row:span 2}
.ss-tile-flag h3{font-size:clamp(24px,2.4vw,32px);font-weight:800}
.ss-tile-flag .ss-tile-desc{font-size:17px;max-width:52ch}
.ss-tag{font:700 11px/1 var(--ss-body);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:999px}
.ss-tag-amber{background:rgba(245,165,36,.14);color:var(--ss-amber);border:1px solid rgba(245,165,36,.5)}
.ss-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.ss-chip{font:600 12.5px/1 var(--ss-body);padding:7px 10px;border-radius:999px}
.ss-chip-auto{background:rgba(43,182,115,.14);color:#7EE2B0;border:1px solid rgba(43,182,115,.45)}
.ss-chip-human{background:rgba(245,165,36,.14);color:#FFC766;border:1px solid rgba(245,165,36,.5)}
@media (max-width:1023px){
 .ss-tiles{grid-template-columns:1fr 1fr}
 .ss-tile-flag{grid-row:auto}
 .ss-tile:last-child{grid-column:span 2}
 .ss-tile:last-child>a{flex-direction:row}
 .ss-tile:last-child .ss-tile-img{width:50%;flex:none}
}
@media (max-width:640px){
 .ss-tiles{grid-template-columns:1fr}
 .ss-tile-flag,.ss-tile:last-child{grid-column:auto}
 .ss-tile:last-child>a{flex-direction:column}
 .ss-tile:last-child .ss-tile-img{width:auto}
}

/* Four steps ([ss_steps]): the illustration from 992px, a stacked list below */
.ss-steps-art{display:none;width:100%;height:auto;border-radius:20px;border:1px solid var(--ss-line)}
.ss-steps-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ss-steps-list li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:start;background:#FFFFFF;border:1px solid var(--ss-line);border-radius:14px;padding:16px}
.ss-step-n{grid-row:span 2;width:44px;height:44px;border-radius:50%;border:2px solid var(--ss-blue);display:grid;place-items:center;font:700 14px/1 var(--ss-display);color:var(--ss-blue)}
.ss-steps-list li:last-child .ss-step-n{border-color:var(--ss-amber);color:var(--ss-amber-text)}
.ss-steps-list h3{font-size:18px!important;margin:4px 0 4px;color:var(--ss-ink)}
.ss-steps-list p{margin:0;font-size:15.5px;line-height:1.55}
@media (min-width:992px){.ss-steps-art{display:block}.ss-steps-list{display:none}}
@media (max-width:600px){.ss-steps-list{grid-template-columns:1fr}}

/* Wide illustrations (BPA page) */
.ss-wide-art{display:block;width:100%;max-width:1200px;height:auto;margin:40px auto 0;border-radius:20px;border:1px solid var(--ss-line)}
.ss-ai-grid{display:grid!important;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center;padding:0!important}
.ss-ai-grid .ss-why-grid{grid-template-columns:1fr!important;gap:18px;margin-top:20px}
.ss-ai-art{display:block;width:100%;height:auto;border-radius:20px;border:1px solid rgba(140,203,255,.16)}
@media (max-width:991px){.ss-ai-grid{grid-template-columns:1fr}}

/* "Why Simple Solution" on a light background (round 2 keeps navy for the services and the closing band) */
.ss-light .ss-why{border-top-color:var(--ss-line)}
.ss-light .ss-why .elementor-heading-title{color:var(--ss-ink)!important}
.ss-light .ss-why p{color:var(--ss-text)}

/* What your first conversation looks like */
.ss-first-grid{display:grid!important;grid-template-columns:repeat(3,1fr);gap:20px;padding:0!important}
.ss-first-item{background:#FFFFFF;border:1px solid var(--ss-line);border-radius:18px;padding:24px!important;gap:8px!important;justify-content:flex-start!important}
.ss-first-item .ss-num .elementor-heading-title{width:40px;height:40px;border-radius:50%;background:#E8F1FE;display:grid;place-items:center;font:700 14px/1 var(--ss-display)!important;color:var(--ss-blue)!important;letter-spacing:0!important}
.ss-first-item h3.elementor-heading-title{font-size:19px!important;font-weight:700!important;color:var(--ss-ink)!important}
.ss-first-item p{margin:0;font-size:16px}
.ss-first-item.ss-first-plan .ss-num .elementor-heading-title{background:#FEF1DB;color:var(--ss-amber-text)!important}
@media (max-width:880px){.ss-first-grid{grid-template-columns:1fr}}

/* Trust block (rendered for signed-in editors only until confirmed) */
.ss-pending{outline:2px dashed var(--ss-amber);outline-offset:-6px;position:relative}
.ss-pending::before{content:"Hidden from visitors until the [[CONFIRM]] items are filled in";position:absolute;top:10px;right:14px;z-index:2;font:700 11px/1 var(--ss-body);letter-spacing:.06em;text-transform:uppercase;background:var(--ss-amber);color:var(--ss-navy-900);padding:6px 9px;border-radius:999px}
.ss-trust-grid{display:grid!important;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,48px);align-items:start;padding:0!important}
.ss-trust-photo p{display:grid;place-items:center;min-height:240px;border:1px dashed var(--ss-ink-2);border-radius:18px;background:var(--ss-bg-soft);text-align:center;padding:16px;margin:0}
.ss-facts ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ss-facts li{border-top:1px solid var(--ss-line);padding-top:10px}
.ss-facts li b{display:block;font:700 11px/1.4 var(--ss-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ss-ink-2)}
.ss-logos ul{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ss-logos li{display:grid;place-items:center;min-height:72px;border:1px dashed var(--ss-line);border-radius:12px;font-size:12px;text-align:center;padding:8px;color:var(--ss-ink-2)}
@media (max-width:880px){.ss-trust-grid{grid-template-columns:1fr}.ss-logos ul{grid-template-columns:repeat(3,1fr)}}

/* Closing call to action: a full-bleed navy band with the decorative background */
.ss-cta-band{background:var(--ss-navy-900) url(img/12-dark-section-background.svg) center/cover no-repeat!important}
.ss-cta-band .ss-cta{background:none!important;padding:0!important;border-radius:0}
.ss-cta-band .ss-cta .elementor-heading-title{font-size:clamp(28px,3.4vw,44px)!important;font-weight:800!important}
.ss-cta-band .ss-cta p{color:var(--ss-on-navy)}

/* Automation colour rule across the earlier components: green = automatic, amber = a person decides */
.ss-bpa-examples li b{color:var(--ss-green-text)}
.ss-bpa-examples li b.ss-you{color:var(--ss-amber-text)}
.ss-ex .ss-ba p.ss-after{background:#E8F1FE}
.ss-ex .ss-ba p.ss-after b{color:var(--ss-blue)}
.ss-checklist li::before{background:#E8F1FE}
.ss-checklist li::after{border-color:var(--ss-blue)}
.ss-bpa-card .ss-eyebrow .elementor-heading-title,.ss-tie .ss-eyebrow .elementor-heading-title{color:var(--ss-blue)!important}
.ss-related a.ss-flag{border-color:rgba(245,165,36,.6);color:var(--ss-ink)}
.ss-related a.ss-flag::after,nav.navbar.bootsnav li.dropdown ul.dropdown-menu>li.ss-menu-flagship>a::after{background:#FEF1DB;color:var(--ss-amber-text)}

/* Footer */
footer.bg-dark{background:var(--ss-navy-900)!important}

/* Contact form: the service dropdown, the result message */
.wpcf7 label.ss-label{display:block;font:600 14px/1.3 var(--ss-body);color:var(--ss-ink);margin:0 0 6px}
.wpcf7 select{width:100%;height:50px;padding:0 40px 0 14px;-webkit-appearance:none;appearance:none;background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E2B3D' stroke-width='2'/%3E%3C/svg%3E") right 16px center no-repeat}
.wpcf7 form.sent .wpcf7-response-output{border:1px solid var(--ss-green)!important;background:#E3F6EC;color:#0E3D27;border-radius:12px;padding:14px 16px;font-weight:600;margin:16px 0 0}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output{border-radius:12px;padding:14px 16px;margin:16px 0 0}

/* Mobile contact bar (under 768px) */
.ss-mbar{display:none}
@media (max-width:767px){
 .ss-mbar{display:grid;grid-template-columns:1fr 1.15fr 1.3fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:9990;background:#FFFFFF;border-top:1px solid var(--ss-line);box-shadow:0 -8px 24px rgba(7,22,36,.10);padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
 .ss-mbar a{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;border-radius:999px;border:1px solid #CBD8E8;font:600 14.5px/1 var(--ss-body);color:var(--ss-ink);text-decoration:none}
 .ss-mbar a .fa-whatsapp{color:#1A7F3E;font-size:17px}
 .ss-mbar a .fa-phone{color:var(--ss-blue)}
 .ss-mbar a.ss-mbar-main{background:var(--ss-blue);border-color:var(--ss-blue);color:#FFFFFF}
 body{padding-bottom:68px}
}

/* Hero actions with the longer call to action: buttons keep their size and wrap to a second row when needed. */
.ss-actions .elementor-widget{flex:none}
.ss-home-hero .ss-actions{flex-wrap:wrap}

/* ===== Icons (round 2) =====
   The ten icons the pages use, drawn as line SVGs in the illustrations' style and coloured with currentColor.
   They replace the Font Awesome, Flaticon and Themify stylesheets and font files (no longer loaded). */
.fa,.fas,.fab,.far,.fal,[class^="flaticon-"],[class*=" flaticon-"]{display:inline-block;width:1em;height:1em;vertical-align:-.14em;font-style:normal;background-color:currentColor;-webkit-mask:var(--ss-icon) center/contain no-repeat;mask:var(--ss-icon) center/contain no-repeat}
.fa::before,.fas::before,.fab::before,.far::before,[class^="flaticon-"]::before,[class*=" flaticon-"]::before{content:none!important}
.fa-bars{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
.fa-phone,.flaticon-telephone{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E")}
.flaticon-email-1,.fa-envelope{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='M3 6.5l9 6.5 9-6.5'/%3E%3C/svg%3E")}
.fa-map-marker-alt{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6.5-8 12-8 12s-8-5.5-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}
.fa-whatsapp{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 20.8l1.3-4.4A9 9 0 1 1 8 19.7z'/%3E%3Cpath d='M9 8.2c.2-.6.7-.7 1-.6l.6 1.4c.1.3 0 .6-.2.8l-.5.5a5.6 5.6 0 0 0 2.8 2.8l.5-.5c.2-.2.5-.3.8-.2l1.4.6c.2.3 0 .8-.6 1-1.7.6-6.4-3.5-5.8-5.8z'/%3E%3C/svg%3E")}
.fa-home{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10l9-7 9 7v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E")}
.fa-search{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.6-4.6'/%3E%3C/svg%3E")}
.fa-angle-right{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E")}
.fa-angle-double-right{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 17l5-5-5-5M13 17l5-5-5-5'/%3E%3C/svg%3E")}
.fa-angle-double-left{--ss-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 17l-5-5 5-5M11 17l-5-5 5-5'/%3E%3C/svg%3E")}
/* The header's menu button had no accessible name (theme markup); site.js adds one. Its icon keeps the old size. */
nav.navbar .navbar-toggle .fa{width:22px;height:22px;vertical-align:middle}

/* Accordion questions as real buttons (round 2): same look as before. */
.ss-acc-h{margin:0;font:inherit}
.elementor-accordion button.elementor-tab-title{display:flex;align-items:center;gap:10px;width:100%;margin:0;background:none;border:0;border-radius:0;text-align:left;cursor:pointer;font:inherit;color:inherit;line-height:1.35}
.elementor-accordion button.elementor-tab-title .elementor-accordion-title{color:var(--ss-ink);font-family:var(--ss-display);font-weight:600}
.ss-faq .elementor-accordion button.elementor-tab-title{padding:18px 0!important;font-size:17px}

/* Illustrations wrapped in <picture> (animated from 1024px, still below): the wrapper takes no part in layout. */
.ss-pic{display:contents}
/* Theme arrows and bullets that used the Font Awesome font in ::before / ::after (round 2: drawn as SVG). */
nav.navbar.bootsnav ul.nav>li.dropdown>a.dropdown-toggle::after{content:""!important;font-family:inherit!important;display:inline-block;width:10px;height:10px;margin:0 0 0 6px;vertical-align:1px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%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 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.sidebar-item.archives ul li a::after{content:""!important;font-family:inherit!important;background:var(--ss-blue)}
.sidebar-item.link li a.active::after{content:""!important;font-family:inherit!important;width:12px;height:12px;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%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 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.elementor-accordion button.elementor-tab-title:focus-visible{outline:2px solid var(--ss-ink)!important;outline-style:solid!important;outline-offset:2px!important;box-shadow:0 0 0 6px rgba(245,165,36,.45)!important;border-radius:6px}

/* Enquiry boxes (r5): the two phone numbers one directly below the other, aligned with each other after "Phone:". */
.ss-contact-lines .ss-phones{display:inline-flex;flex-direction:column;align-items:flex-start;vertical-align:top;gap:2px}
.ss-contact-lines .ss-phones a{white-space:nowrap}