/* ==========================================================================
   One Web Graphics: design layer (2026-10)
   Loaded after the theme CSS and seo-fixes.css on every page. It restyles the
   theme and the .ow-* components; it does not change content or behaviour.
   ========================================================================== */

:root {
    --ink: #1b2e3c;          /* brand navy (header, footer, text) */
    --ink-2: #3d5160;        /* body copy */
    --ink-3: #5f7280;        /* secondary text */
    --leaf: #3cb878;         /* brand green: large/decorative use */
    --leaf-deep: #1f7a52;    /* text-safe green: buttons, links (white on it 5.3:1) */
    --leaf-soft: #e3f4ea;
    --leaf-light: #8fe0b5;   /* green for text on navy */
    --marigold: #f2a93b;     /* print marks, small highlights */
    --paper: #f3f6f4;
    --line: #d9e3de;
    --white: #fff;

    --font-display: "Unbounded", "Varela Round", Arial, sans-serif;
    --font-body: "Figtree", "Varela Round", Arial, "Helvetica Neue", sans-serif;

    --step--1: 0.875rem;
    --step-0: 1rem;
    --step-1: 1.1875rem;
    --step-2: clamp(1.35rem, 1.1rem + 0.9vw, 1.65rem);
    --step-3: clamp(1.75rem, 1.15rem + 2.2vw, 2.75rem);
    --step-4: clamp(2rem, 1.25rem + 2.6vw, 3.4rem);

    --space-section: clamp(64px, 8vw, 112px);
    --wrap: 1200px;
    --gutter: clamp(16px, 4vw, 32px);

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-pill: 999px;

    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --dur-fast: .18s;
    --dur: .32s;

    --head-h: 76px;
    --mhead-h: 64px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    color: var(--ink-2);
    font-size: 16px;
    line-height: 1.6;
    border-top: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
body, .content-wrapper { background: var(--white); }
h1, h2, h3, h4, h5, h6 { color: var(--ink); font-family: var(--font-body); font-weight: 700; letter-spacing: -0.005em; }
h1, h2,
h2:where(.ow-was-h1), :where(div.ow-was-h1) { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
p { color: inherit; }
a { color: var(--leaf-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
strong, b { font-weight: 700; color: var(--ink); }

/* The theme colours one word in many headings green; headings now read as one phrase. */
:is(h1, h2, h3, .heading-title) .color-logo-green,
:is(h1, h2, h3, .heading-title) .color-logo-blue { color: inherit; }
/* Decorative double dash under every heading */
.heading-line { display: none !important; }
.heading { margin-bottom: 0; }
.color-logo-blue { color: var(--ink); }

/* Visible keyboard focus everywhere (the theme removed outlines) */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--leaf-deep); outline-offset: 3px; border-radius: 4px; }
.header :focus-visible, .ow-mhead :focus-visible, .footer :focus-visible, .ow-cta :focus-visible, .seo-score :focus-visible {
    outline-color: var(--leaf-light);
}

.ow-sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ow-wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container { max-width: 100%; }
@media (min-width: 1200px) { .container { width: var(--wrap); } }

.bg-border-color { background-color: var(--paper); }
.medium-padding80 { padding-top: var(--space-section); padding-bottom: var(--space-section); }
.medium-padding120 { padding-top: var(--space-section); padding-bottom: var(--space-section); }

/* --------------------------------------------------------------------------
   Buttons: one system for theme .btn, .ow-btn and the newsletter button
   -------------------------------------------------------------------------- */
.btn:not(.main-slider *), .ow-btn, .subscr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 48px; padding: 12px 26px; margin: 0;
    font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.2;
    text-transform: none; letter-spacing: 0; text-decoration: none;
    border: 2px solid transparent; border-radius: var(--r-pill);
    box-shadow: none;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.btn:not(.main-slider *) .semicircle, .btn:not(.main-slider *) .semicircle--right, .subscr-btn .semicircle--right { display: none !important; }
.btn:not(.main-slider *) .text { padding: 0; }
.btn:not(.main-slider *):hover, .btn:not(.main-slider *):focus, .ow-btn:hover, .ow-btn:focus, .subscr-btn:hover { transform: translateY(-1px); box-shadow: none; text-decoration: none; }
.btn:not(.main-slider *):active, .ow-btn:active, .subscr-btn:active { transform: translateY(0) scale(.98); }

.btn--blue:not(.main-slider *), .btn--green:not(.main-slider *), .btn--breez:not(.main-slider *),
.ow-btn-primary, .ow-btn-primary:focus { background: var(--leaf-deep); color: var(--white); }
.btn--blue:not(.main-slider *):hover, .btn--green:not(.main-slider *):hover, .btn--breez:not(.main-slider *):hover, .ow-btn-primary:hover { background: #17633f; color: var(--white); }

.btn--dark:not(.main-slider *), .btn--primary:not(.main-slider *) { background: var(--ink); color: var(--white); }
.btn--dark:not(.main-slider *):hover, .btn--primary:not(.main-slider *):hover { background: #0f1d27; color: var(--white); }
.btn-border:not(.main-slider *) { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-border:not(.main-slider *):hover { background: var(--ink); color: var(--white); }

/* WhatsApp green is too light for white text: navy text keeps 7:1 contrast */
.ow-btn-whatsapp, .ow-btn-whatsapp:hover, .ow-btn-whatsapp:focus { background: #25d366; color: var(--ink); }
.ow-btn-whatsapp:hover { background: #3ee07b; }
.ow-btn-ghost, .ow-btn-ghost:focus { background: transparent; color: var(--ink); border-color: var(--ink); }
.ow-btn-ghost:hover { background: var(--ink); color: var(--white); }
.ow-btn-outline, .ow-btn-outline:focus { border-color: rgba(255, 255, 255, .7); color: var(--white); }
.ow-btn-outline:hover { background: var(--white); color: var(--ink); border-color: var(--white); }
.ow-btn .fa { font-size: 18px; }

/* --------------------------------------------------------------------------
   Desktop header (> 991px)
   -------------------------------------------------------------------------- */
.ow-mhead { display: none; }

header.header.mob-hide { padding: 0; background: var(--ink); box-shadow: none; }
header.header.mob-hide.headroom--not-top { padding-top: 0; box-shadow: 0 8px 24px rgba(10, 22, 30, .18); }
header.header.mob-hide .container { width: auto; max-width: var(--wrap); padding: 0 var(--gutter); }
header.header.mob-hide .header-content-wrapper { display: flex; align-items: center; float: none; min-height: var(--head-h); gap: 8px; }
header.header.mob-hide .logo { float: none; margin: 0 auto 0 0; position: relative; flex: none; }
header.header.mob-hide .logo img { width: 104px; height: auto; display: block; }
header.header.mob-hide #primary-menu { float: none; flex: none; clear: none; }
header.header.mob-hide .primary-menu-menu { display: flex !important; align-items: center; gap: 2px; float: none; margin: 0; }
header.header.mob-hide .primary-menu-menu > li { float: none; padding: 0 !important; margin: 0; }
header.header.mob-hide .primary-menu-menu > li > a {
    display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r-pill);
    font-family: var(--font-body); font-size: 15px !important; font-weight: 600; text-transform: none; letter-spacing: 0;
    color: #e6eef0; line-height: 1.2;
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
header.header.mob-hide .primary-menu-menu > li > a:hover,
header.header.mob-hide .primary-menu-menu > li:hover > a { color: var(--white); background: rgba(255, 255, 255, .08); }
header.header.mob-hide .primary-menu-menu > li > a .indicator { position: static; margin: 0; font-size: 12px; opacity: .7; color: inherit; }
header.header.mob-hide .primary-menu-menu > li.ow-nav-cta { margin-left: 10px; }
header.header.mob-hide .primary-menu-menu > li.ow-nav-cta > a { background: var(--leaf); color: var(--ink); padding: 11px 20px; }
header.header.mob-hide .primary-menu-menu > li.ow-nav-cta > a:hover { background: var(--leaf-light); color: var(--ink); }

/* dropdowns: opened by crum-mega-menu.js (display toggle); a short entrance on open */
header.header.mob-hide .primary-menu-menu > li > ul.dropdown {
    top: calc(100% + 6px); min-width: 270px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--white); box-shadow: 0 18px 40px rgba(16, 32, 44, .16);
    animation: ow-drop .2s var(--ease-out);
}
header.header.mob-hide .primary-menu-menu > li > ul.dropdown::before {
    content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; /* hover bridge */
}
header.header.mob-hide .primary-menu-menu > li.ow-dd > ul.dropdown li a {
    display: block; padding: 10px 14px; border-radius: var(--r-sm);
    font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--ink);
    transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
header.header.mob-hide .primary-menu-menu > li.ow-dd > ul.dropdown li:hover > a,
header.header.mob-hide .primary-menu-menu > li.ow-dd > ul.dropdown li a:focus-visible { background: var(--leaf-soft); color: var(--leaf-deep); }
@keyframes ow-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* contact drawer trigger: inline icon button instead of the floating circle */
header.header.mob-hide .user-menu {
    position: relative; right: auto; bottom: auto; top: auto; display: block; flex: none;
    width: 44px; height: 44px; margin-left: 6px; border: 0; border-radius: 50%; transform: none;
}
header.header.mob-hide .user-menu .user-menu-content {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: transparent; color: var(--white);
    transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
header.header.mob-hide .user-menu .user-menu-content:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .5); }
header.header.mob-hide .user-menu .user-menu-content .fa { font-size: 18px; }

.header-spacer { height: var(--head-h) !important; background: var(--ink); }

@media (max-width: 1199px) {
    header.header.mob-hide .primary-menu-menu > li > a { padding: 10px 10px; font-size: 14px !important; }
    header.header.mob-hide .primary-menu-menu > li.ow-nav-cta { margin-left: 4px; }
}

/* contact drawer */
.right-menu { background: var(--white); }
.right-menu .text { font-family: var(--font-display); color: var(--ink); }
.right-menu .contacts-title { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
.right-menu .contacts-item .title { color: var(--ink); font-weight: 600; }
.right-menu .contacts-item .sub-title { color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Mobile / tablet header (<= 991px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    header.header.mob-hide { display: none !important; }
    .header-spacer { display: block; height: var(--mhead-h) !important; }

    .ow-mhead { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 10001; background: var(--ink); transition: box-shadow var(--dur) ease; }
    .ow-mhead.is-scrolled { box-shadow: 0 6px 20px rgba(10, 22, 30, .22); }
    .ow-mhead-bar { display: flex; align-items: center; justify-content: space-between; height: var(--mhead-h); padding: 0 var(--gutter); }
    .ow-mhead-logo { display: block; }
    .ow-mhead-logo img { display: block; width: auto; height: 38px; }
    .ow-mhead-toggle {
        display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 12px;
        border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r-pill); background: transparent;
        color: var(--white); font: 600 15px/1 var(--font-body); cursor: pointer;
    }
    .ow-burger { position: relative; width: 18px; height: 12px; }
    .ow-burger span { position: absolute; left: 0; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out); }
    .ow-burger span:first-child { top: 1px; }
    .ow-burger span:last-child { top: 9px; }
    .ow-mhead-toggle[aria-expanded="true"] .ow-burger span:first-child { top: 5px; transform: rotate(45deg); }
    .ow-mhead-toggle[aria-expanded="true"] .ow-burger span:last-child { top: 5px; transform: rotate(-45deg); }

    .ow-mnav { background: var(--ink); }
    .ow-js .ow-mnav {
        position: fixed; top: var(--mhead-h); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain;
        visibility: hidden; opacity: 0; transform: translateY(-8px);
        transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility 0s linear var(--dur);
    }
    .ow-js .ow-mnav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
    .ow-mnav-inner { max-width: 640px; margin: 0 auto; padding: 8px var(--gutter) 40px; }
    .ow-mnav a { color: var(--white); text-decoration: none; }
    .ow-mnav-top { display: flex; align-items: center; min-height: 52px; font: 500 18px/1.2 var(--font-display); border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .ow-mnav-group { padding: 14px 0 10px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .ow-mnav-title { display: flex; align-items: center; min-height: 40px; font: 500 18px/1.2 var(--font-display); }
    .ow-mnav-group ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
    .ow-mnav-group li a { display: flex; align-items: center; min-height: 44px; font-size: 16px; color: #c7d6de; }
    .ow-mnav-group li a:hover, .ow-mnav-top:hover, .ow-mnav-title:hover { color: var(--leaf-light); }
    .ow-mnav-contact { padding-top: 24px; }
    .ow-mnav-contact .ow-btn { width: 100%; }
    .ow-mnav-phone { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 10px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-pill); font-weight: 600; }
    .ow-mnav-contact p { margin: 16px 0 0; color: #a9bccb; font-size: 14px; line-height: 1.6; text-align: center; }
    .ow-mnav-contact p a { color: #c7d6de; text-decoration: underline; }
    body.ow-menu-open { overflow: hidden; }

    /* without JS the header scrolls away with the page and the menu shows in place */
    html:not(.ow-js) .ow-mhead { position: relative; }
    html:not(.ow-js) .header-spacer { display: none; }

    /* the theme's seo-fixes tablet rule for the old two-row menu */
    header.mob-hide #primary-menu { float: none; }
}
@media (max-width: 380px) {
    .ow-mnav-group ul { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Section heading pattern (homepage)
   -------------------------------------------------------------------------- */
.ow-section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 48px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.ow-section-title { margin: 0; font-size: var(--step-3); color: var(--ink); }
.ow-section-lede { margin: 0; max-width: 34em; font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 767px) { .ow-section-head { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Homepage hero: the one bold moment. A proof sheet with crop marks.
   -------------------------------------------------------------------------- */
.ow-hero { background: var(--paper); padding: clamp(40px, 5.5vw, 80px) 0 clamp(56px, 7vw, 104px); overflow: hidden; }
.ow-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: center; }
.ow-hero-title { margin: 0 0 28px; font-family: var(--font-display); font-weight: 500; font-size: var(--step-4); line-height: 1.04; letter-spacing: -0.03em; color: var(--ink); }
.ow-hero-title .ow-line { display: block; overflow: hidden; padding-bottom: .06em; }
.ow-hero-title .ow-line > span { display: inline-block; }
.ow-hero-lede { max-width: 34em; margin: 0 0 32px; font-size: var(--step-1); line-height: 1.6; color: var(--ink-2); }
.ow-hero-lede strong { color: var(--ink); }
.ow-hero-actions { margin-bottom: 40px; }
.ow-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 12px 40px; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.ow-hero-facts dt { margin: 0 0 4px; font-size: var(--step--1); font-weight: 500; color: var(--ink-3); }
.ow-hero-facts dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.ow-hero-facts a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--leaf); text-decoration-thickness: 2px; }
.ow-hero-facts a:hover { color: var(--leaf-deep); }

.ow-hero-art { position: relative; margin: 28px; background: var(--white); box-shadow: 0 1px 0 var(--line), 0 30px 60px -30px rgba(27, 46, 60, .35); }
.ow-hero-art img { display: block; width: 100%; height: auto; padding: 8%; }
.ow-crop { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.ow-crop::before, .ow-crop::after { content: ""; position: absolute; background: var(--ink); }
.ow-crop::before { width: 22px; height: 1.5px; }
.ow-crop::after { width: 1.5px; height: 22px; }
.ow-crop-tl { top: -28px; left: -28px; }
.ow-crop-tl::before { bottom: -6px; left: 0; transform-origin: right; }
.ow-crop-tl::after { right: -6px; top: 0; transform-origin: bottom; }
.ow-crop-tr { top: -28px; right: -28px; }
.ow-crop-tr::before { bottom: -6px; right: 0; transform-origin: left; }
.ow-crop-tr::after { left: -6px; top: 0; transform-origin: bottom; }
.ow-crop-bl { bottom: -28px; left: -28px; }
.ow-crop-bl::before { top: -6px; left: 0; transform-origin: right; }
.ow-crop-bl::after { right: -6px; bottom: 0; transform-origin: top; }
.ow-crop-br { bottom: -28px; right: -28px; }
.ow-crop-br::before { top: -6px; right: 0; transform-origin: left; }
.ow-crop-br::after { left: -6px; bottom: 0; transform-origin: top; }

@media (max-width: 991px) {
    .ow-hero-grid { grid-template-columns: 1fr; }
    .ow-hero-art { max-width: 460px; width: calc(100% - 56px); margin: 8px auto 28px; }
}
@media (max-width: 575px) {
    .ow-hero-facts { grid-template-columns: 1fr 1fr; gap: 16px 24px; }
    .ow-hero-facts > div:last-child { grid-column: 1 / -1; }
    .ow-hero-actions .ow-btn { flex: 1 1 100%; }
}

/* Load sequence (CSS only; content is fully visible if animations don't run) */
@media (prefers-reduced-motion: no-preference) {
    .ow-hero-title .ow-line > span { animation: ow-rise .9s var(--ease-out) both; }
    .ow-hero-title .ow-line:nth-child(2) > span { animation-delay: .08s; }
    .ow-hero-title .ow-line:nth-child(3) > span { animation-delay: .16s; }
    .ow-hero-lede, .ow-hero-actions, .ow-hero-facts { animation: ow-fade-up .8s var(--ease-out) both; }
    .ow-hero-lede { animation-delay: .3s; }
    .ow-hero-actions { animation-delay: .38s; }
    .ow-hero-facts { animation-delay: .46s; }
    .ow-hero-art { animation: ow-sheet 1s var(--ease-out) .15s both; }
    .ow-crop::before { animation: ow-draw-x .5s var(--ease-out) .75s both; }
    .ow-crop::after { animation: ow-draw-y .5s var(--ease-out) .85s both; }
}
@keyframes ow-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes ow-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ow-sheet { from { opacity: 0; transform: translateY(18px) rotate(-1.2deg); } to { opacity: 1; transform: none; } }
@keyframes ow-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ow-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* --------------------------------------------------------------------------
   Homepage services
   -------------------------------------------------------------------------- */
.ow-services { padding: var(--space-section) 0; background: var(--white); }
.ow-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ow-service {
    position: relative; display: flex; flex-direction: column; padding: 28px 28px 30px;
    background: var(--paper); border: 1px solid transparent; border-radius: var(--r-lg);
    transition: background-color var(--dur) ease, border-color var(--dur) ease;
}
.ow-service:hover { background: var(--white); border-color: var(--leaf); }
.ow-service-family { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: var(--step--1); font-weight: 600; color: var(--ink-3); }
.ow-service-family::before { content: ""; width: 10px; height: 10px; background: var(--leaf); }
.ow-service:nth-child(n+2):nth-child(-n+4) .ow-service-family::before { background: var(--marigold); }
.ow-service:nth-child(n+5) .ow-service-family::before { background: var(--ink); }
.ow-service-title { margin: 0 0 10px; font-size: 22px; line-height: 1.25; color: var(--ink); }
.ow-service-text { margin: 0 0 24px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.ow-service-link {
    margin-top: auto; align-self: flex-start; font-weight: 600; color: var(--leaf-deep); text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; padding-bottom: 2px;
    transition: background-size var(--dur) var(--ease-out);
}
.ow-service-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); } /* whole card is the link */
.ow-service:hover .ow-service-link, .ow-service-link:focus-visible { background-size: 100% 2px; color: var(--leaf-deep); }
@media (max-width: 991px) { .ow-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .ow-service-grid { grid-template-columns: 1fr; } .ow-service { padding: 24px 22px; } }

/* --------------------------------------------------------------------------
   Free SEO check band
   -------------------------------------------------------------------------- */
.seo-score { background-color: var(--ink); padding: var(--space-section) 0 calc(var(--space-section) + 40px); }
.seo-score .heading-title { font-size: var(--step-3) !important; color: var(--white); margin-bottom: 12px; }
.seo-score .heading-text { color: var(--leaf-light) !important; font-size: var(--step-1); }
.seo-score .seo-score-form { margin-top: 32px; }
.seo-score .input-dark {
    height: 56px; border: 1px solid #3b5568; background: #22394a; color: var(--white); border-radius: var(--r-pill);
    font-family: var(--font-body); font-size: 16px; padding: 0 22px;
}
.seo-score .input-dark::placeholder { color: #a9bccb; opacity: 1; }
.seo-score .input-dark:focus { border-color: var(--leaf-light); background: #263f50; }
.seo-score .btn { margin-top: 20px; background: var(--leaf); color: var(--ink); }
.seo-score .btn:hover { background: var(--leaf-light); color: var(--ink); }
.seo-score .input-inline.input-drop-shadow { box-shadow: none; }

/* --------------------------------------------------------------------------
   Work process (homepage)
   -------------------------------------------------------------------------- */
.background-mountains .heading .ow-was-h1, .background-mountains h2 { font-size: var(--step-3) !important; margin-bottom: 12px; }
.background-mountains .heading p { color: var(--ink-2) !important; font-size: var(--step-1); }
.info-box--standard-centered .info-box-image img { width: 112px; height: auto; transition: transform var(--dur) var(--ease-out); }
.info-box--standard-centered:hover .info-box-image img { transform: translateY(-4px); }
.info-box--standard-centered .info-box-content .info-box-title { font-family: var(--font-body); font-size: 17px !important; font-weight: 700; color: var(--ink); padding-top: 14px; text-transform: none; }
.info-box--standard-centered .badge { background: var(--ink); color: var(--white); font-family: var(--font-body); font-weight: 700; min-width: 28px; height: 28px; line-height: 28px; padding: 0 8px; border-radius: var(--r-pill); }

/* --------------------------------------------------------------------------
   Shared .ow-* components from seo-fixes.css
   -------------------------------------------------------------------------- */
.ow-features { background: var(--white); }
.ow-features .heading-title, .ow-process .heading-title, #faq .heading-title { font-size: var(--step-3) !important; }
.ow-features .heading, .ow-process .heading { text-align: left; }
.ow-features .heading.align-center, .ow-process .heading.align-center { text-align: left; }
.ow-features-grid { gap: 16px; }
.ow-feature { padding: 26px 24px; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: none; transition: border-color var(--dur) ease; }
.ow-feature:hover { transform: none; box-shadow: none; border-color: var(--leaf); }
.ow-feature .fa {
    display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 18px;
    border-radius: 50%; background: var(--leaf-soft); color: var(--leaf-deep); font-size: 20px;
}
.ow-feature h3 { font-size: 18px; margin-bottom: 8px; color: var(--ink); }
.ow-feature p { color: var(--ink-2); font-size: 15.5px; }

.ow-process { background: var(--paper) !important; }
.ow-steps { gap: 16px; }
.ow-steps li { border-color: var(--line); border-radius: var(--r-md); padding: 24px 22px 24px 78px; }
.ow-steps .ow-step-num { background: var(--ink); width: 38px; height: 38px; font-size: 16px; font-weight: 700; }
.ow-steps h3 { font-size: 18px; }
.ow-steps p { color: var(--ink-2); }

.ow-cta { padding: var(--space-section) var(--gutter); background: var(--ink); }
.ow-cta .ow-cta-title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-3); color: var(--white); letter-spacing: -0.02em; margin-bottom: 16px; }
.ow-cta .ow-cta-text { color: #c7d6de; font-size: var(--step-1); max-width: 36em; }

.ow-intro .heading h2 { font-size: var(--step-3) !important; margin-bottom: 18px; }
.ow-intro p.color-black, .ow-intro .fsize16 { color: var(--ink-2) !important; font-size: 17px !important; line-height: 1.65; max-width: 36em; }
.ow-intro .ow-list-title, .ow-panel .ow-list-title { font-size: 19px; color: var(--ink); }
.ow-intro .ow-checklist li { color: var(--ink); }
.ow-intro .ow-checklist li i, .ow-panel-list li .fa { color: var(--leaf-deep); }
.ow-panel { border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; padding: 30px 30px 24px; }
.ow-panel-list li { color: var(--ink); }

/* FAQ */
.faq-item { max-width: 860px; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
#faq .heading + .faq-item { margin-top: 24px; border-top: 1px solid var(--line); }
.faq-item .faq-question { font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.faq-item .faq-answer { color: var(--ink-2); font-size: 16.5px; max-width: 46em; }

/* --------------------------------------------------------------------------
   Service page banner (stunning header)
   -------------------------------------------------------------------------- */
.stunning-header, .stunning-header.stunning-header-bg-olive {
    background: var(--white) none !important; padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px) !important;
    border-bottom: 1px solid var(--line);
}
.stunning-header .stunning-header-content {
    display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 16px;
    max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); text-align: left;
}
.stunning-header .stunning-header-content .stunning-header-title {
    margin: 0; max-width: 18em; font-family: var(--font-display); font-weight: 500; font-size: var(--step-4) !important;
    line-height: 1.06; letter-spacing: -0.03em; color: var(--ink);
}
.stunning-header .stunning-header-content .breadcrumbs { display: flex !important; visibility: visible !important; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; font-size: 14px; }
.stunning-header .breadcrumbs .breadcrumbs-item { display: inline-flex; align-items: center; color: var(--ink-3); font-size: 14px; }
.stunning-header .breadcrumbs .breadcrumbs-item a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.stunning-header .breadcrumbs .breadcrumbs-item a:hover { color: var(--leaf-deep); text-decoration-color: currentColor; }
.stunning-header .breadcrumbs .breadcrumbs-item .fa { margin: 0 10px; font-size: 11px !important; color: var(--ink-3); }
.stunning-header .breadcrumbs .breadcrumbs-item.active span { color: var(--ink); font-weight: 600; }
.stunning-header .breadcrumbs .breadcrumbs-item .seoicon-right-arrow { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .stunning-header-title { animation: ow-fade-up .7s var(--ease-out) both; }
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */
.pricing-tables .pricing-tables-item { transform: none !important; margin: 0 8px 16px; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none; overflow: hidden; }
.pricing-tables .pricing-head { height: 64px; }
.pricing-tables .pricing-head.bgcolor-green { background: var(--leaf-soft); }
.pricing-tables .pricing-head.bgcolor-blue { background: var(--ink); }
.pricing-tables .pricing-title { font-family: var(--font-display); font-weight: 500; font-size: 22px; color: var(--ink) !important; }
.pricing-tables .position-item .count { color: var(--ink); font-weight: 500; }
@media (max-width: 767px) { .pricing-tables .pricing-tables-item { margin: 0 0 16px; } }

.enquiry-form label { font-weight: 600; color: var(--ink); font-size: 15px; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
    height: auto; min-height: 52px; padding: 13px 16px; font-family: var(--font-body); font-size: 16px; color: var(--ink);
    background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-sm) !important;
    transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.enquiry-form select { height: 52px; padding: 0 16px; }
.enquiry-form textarea { min-height: 150px; }
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { border-color: var(--leaf-deep); box-shadow: 0 0 0 4px rgba(60, 184, 120, .18); outline: none; }
.enquiry-form .ow-touched:invalid { border-color: #b3261e; }
.enquiry-form .ow-field-error { display: block; margin: -18px 0 18px; font-size: 14px; color: #b3261e; }
.enquiry-form .form-note { color: var(--ink-3); }
.form-status { border-radius: var(--r-sm); }
#enquiry-form .heading-title { font-size: var(--step-3) !important; }
#enquiry-form .heading-text { color: var(--ink-2); }

/* sending state, set by ow-ui.js on submit */
.ow-is-sending { pointer-events: none; opacity: .8; }
.ow-is-sending .text::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ow-spin .7s linear infinite; }
@keyframes ow-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Newsletter band
   -------------------------------------------------------------------------- */
.bg-green { background-color: var(--leaf); }
.subscribe .subscribe-title { font-family: var(--font-display); font-weight: 500; font-size: var(--step-2); color: var(--ink); }
.subscribe .sub-title { color: var(--ink); }
.subscribe .subscribe-form .email { border-radius: var(--r-pill); font-family: var(--font-body); color: var(--ink); border: 0; }
.subscribe .subscribe-form .email::placeholder { color: var(--ink-3); opacity: 1; }
.subscribe .subscr-btn { background: var(--ink); color: var(--white); text-transform: none; }
.subscribe .subscr-btn:hover { background: #0f1d27; }

/* --------------------------------------------------------------------------
   Footer (now in normal flow; the fixed "reveal" footer was removed)
   -------------------------------------------------------------------------- */
.footer { position: relative !important; padding-top: var(--space-section); background: var(--ink); color: #c7d6de; }
.footer .heading-title { font-family: var(--font-body); font-size: 18px !important; font-weight: 700; color: var(--white); margin-bottom: 18px; }
.footer .list li { padding: 4px 0; }
.footer .list li a, .footer p a { color: #c7d6de; text-decoration: none; }
.footer .list li a:hover, .footer p a:hover { color: var(--white); text-decoration: underline; }
.footer .list li i.fa-caret-right { color: var(--leaf); }
.footer .contacts { border-top: 1px solid rgba(255, 255, 255, .12); margin-top: 40px; padding-top: 32px; }
.footer .contacts .contacts-item .content, .footer .contacts .contacts-item .content .title { color: var(--white); font-weight: 600; }
.footer .contacts .contacts-item .sub-title { color: #a9bccb; }
.footer .sub-footer { background: #142430; padding: 18px 0; }
.sub-footer span, .sub-footer .sub-footer__link { color: #c7d6de !important; font-weight: 500; }
.sub-footer .badge-social { transition: transform var(--dur-fast) var(--ease-out); }
.sub-footer a:hover .badge-social { transform: translateY(-2px); }
.block-footer-height { display: none !important; }

/* Floating WhatsApp / phone buttons (desktop): tidy bottom-right stack */
@media (min-width: 768px) {
    .whatsapps.deskonly { position: fixed; left: auto !important; top: auto !important; right: 24px; bottom: 24px; z-index: 50; }
    .whatsapps.deskonly .whatsapp img { width: 52px; height: 52px; display: block; border-radius: 50%; box-shadow: 0 8px 20px rgba(16, 32, 44, .2); transition: transform var(--dur-fast) var(--ease-out); }
    .whatsapps.deskonly .whatsapp:hover img { transform: scale(1.06); }
}

/* Mobile action bar: keep labels readable on the brand green */
.ow-mobile-bar a:nth-child(2) { color: var(--ink); }
.ow-mobile-bar a:nth-child(3) { background: var(--leaf-deep); }

/* --------------------------------------------------------------------------
   Scroll reveal (set up by ow-ui.js; nothing is hidden unless it runs)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    .ow-motion [data-reveal-group]:not(.is-in) > * { opacity: 0; transform: translateY(18px); }
    .ow-motion [data-reveal-group] > * { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), background-color var(--dur) ease, border-color var(--dur) ease; transition-delay: calc(var(--i, 0) * 70ms); }
    .ow-motion [data-reveal-group].is-in > * { transition-delay: calc(var(--i, 0) * 70ms), calc(var(--i, 0) * 70ms), 0s, 0s; }
}

/* --------------------------------------------------------------------------
   Small screens: general
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body { font-size: 16px; }
    .ow-buttons .ow-btn { flex: 1 1 auto; }
    .ow-cta .ow-cta-title { font-size: var(--step-3); }
    .sub-footer .align-right { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* SEO band illustrations are decorative and collide with the form on phones */
@media (max-width: 767px) {
    .seo-score .images { display: none; }
    .seo-score { padding-bottom: var(--space-section); }
}

/* Banner breadcrumbs: the theme colours them white for its dark banner */
.stunning-header .breadcrumbs .breadcrumbs-item.active span { color: var(--ink) !important; }
.stunning-header .breadcrumbs .breadcrumbs-item .fa { color: var(--ink-3) !important; }

/* Contact page: contact cards sit closer to the form; select matches the other fields */
.pricing-tables.medium-padding120 { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 8px; }
.container-fluid.mt4per:has(> .row > .pricing-tables) { margin-top: 0; }
#enquiry-form.medium-padding80 { padding-top: clamp(40px, 5vw, 72px); }
form.enquiry-form select {
    border: 1.5px solid var(--line); border-radius: var(--r-sm) !important; background-color: var(--white); color: var(--ink);
}
.pricing-tables a.count { display: inline-block; padding: 4px 0; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--leaf); text-underline-offset: 3px; }
.pricing-tables a.count:hover { color: var(--leaf-deep); }

/* Service dropdown on the contact form is rendered by the theme's niceSelect plugin */
.enquiry-form .nice-select {
    float: none; width: 100%; height: 52px; line-height: 49px; margin-bottom: 25px; padding: 0 44px 0 16px;
    border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--white);
    font-family: var(--font-body); font-size: 16px; color: var(--ink);
}
.enquiry-form .nice-select .current { color: var(--ink); }
.enquiry-form .nice-select:hover, .enquiry-form .nice-select:focus, .enquiry-form .nice-select.open { border-color: var(--leaf-deep); }
.enquiry-form .nice-select:focus { box-shadow: 0 0 0 4px rgba(60, 184, 120, .18); }
.enquiry-form .nice-select::after { border-color: var(--ink-3); }
.enquiry-form .nice-select .list { width: 100%; max-height: 300px; overflow-y: auto; border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(16, 32, 44, .16); }
.enquiry-form .nice-select .option { color: var(--ink); line-height: 40px; min-height: 40px; }
.enquiry-form .nice-select .option.selected { font-weight: 600; color: var(--leaf-deep); }
.enquiry-form .nice-select .option:hover, .enquiry-form .nice-select .option.focus { background: var(--leaf-soft); }
.stunning-header .breadcrumbs .breadcrumbs-item a { color: var(--ink-2) !important; }
.stunning-header .breadcrumbs .breadcrumbs-item a:hover { color: var(--leaf-deep) !important; }
.enquiry-form .nice-select .option { text-align: left; padding-left: 16px; }

/* --------------------------------------------------------------------------
   Homepage slider banner: kept exactly as on the live site.
   :where() keeps these at element specificity so the theme's own slider classes still win.
   -------------------------------------------------------------------------- */
:where(.main-slider) { font-family: "Varela Round", Arial, "Helvetica Neue", Helvetica, serif; line-height: 1.5; }
:where(.main-slider) h2 {
    font-family: "Varela Round", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400; letter-spacing: normal; line-height: inherit; color: #2f2c2c;
}
@media (min-width: 1200px) { :where(.main-slider) .container { width: 1170px; } }

/* Footer location map ("Reach Us" column) */
.footer .ow-map, .footer .mapouter { overflow: hidden; border-radius: var(--r-md); border: 1px solid rgba(255, 255, 255, .12); background: #22394a; }
.footer .ow-map iframe { display: block; width: 100%; height: 215px; border: 0; }
.footer .ow-map-link { margin: 12px 0 0; }
.footer .ow-map-link a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
@media (max-width: 991px) { .footer .ow-map, .footer .mapouter { margin-bottom: 32px; } }

/* --------------------------------------------------------------------------
   Areas we serve (homepage + contact)
   -------------------------------------------------------------------------- */
.ow-areas { padding: var(--space-section) 0; background: var(--paper); }
.ow-areas-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px 64px; align-items: start; }
.ow-areas .ow-section-title { margin-bottom: 16px; }
.ow-area-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ow-area-list li {
    display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--r-pill);
    font-size: 15.5px; font-weight: 500; line-height: 1.2; color: var(--ink);
}
.ow-areas-note { margin: 24px 0 0; font-size: 16px; color: var(--ink-2); }
.ow-areas-note a { font-weight: 600; color: var(--leaf-deep); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 991px) { .ow-areas-grid { grid-template-columns: 1fr; } }
@media (max-width: 575px) { .ow-area-list li { min-height: 36px; padding: 6px 13px; font-size: 15px; } }

/* Former inline styles (moved here so the HTML carries no style="" attributes) */
.hp-field { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ow-hidden { display: none !important; visibility: hidden !important; }
.subscribe .images-block img.gear { opacity: 1; transform: rotateZ(360deg); }
.subscribe .images-block img.mail { opacity: 1; bottom: 0; }
.subscribe .images-block img.mail-2 { opacity: 1; right: 20px; }