/* ==========================================================================
   WalkThru global typography system.
   Loaded site-wide AFTER main.css (see includes/head.php), so one correct set
   of rules governs every page (home + all 180+ SEO/location/service pages)
   without editing pages individually. Family + size + weight only; no layout,
   colour, or content changes.

   Hierarchy (the whole point): headings carry the emphasis, paragraphs read
   regular and light. Body/paragraph text is 400 everywhere — the site's biggest
   readability problem was inherited 500/600/700 weights making copy look heavy.
   Sizes use clamp() so they scale smoothly from 375px phones to 1920px+ with no
   breakpoint jumps. Root font-size is 16px, so px values below are literal.
   Icon fonts (Font Awesome, Phosphor) are never retargeted.
   ========================================================================== */

/* ---- 1. Family: Inter everywhere text is set (icons excluded) ---- */
body,
h1, h2, h3, h4, h5, h6,
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span,
p, li, a, blockquote, figcaption,
.sub-title, .title, .sec-title, .style-font, .font-style,
.acc-btn, .acc-content, .theme-btn, button, input, textarea, select, label {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ---- 2. Headings: prominent, medium-bold (600), tight line-height ---- */
/* Thin display headings (reverted from bold: the H1 bold override caused
   conflicts). Size only; weight is left to the template's thin (300) title
   rule, and h4-h6 kept light. */
h1 { font-size: clamp(34px, 4vw, 58px)   !important; font-weight: 300 !important; line-height: 1.12 !important; }
h2 { font-size: clamp(38px, 4.6vw, 56px) !important; font-weight: 300 !important; line-height: 1.15 !important; }
h3 { font-size: clamp(23px, 2vw, 32px)   !important; font-weight: 600 !important; line-height: 1.25 !important; }
h4 { font-size: clamp(20px, 1.2vw, 24px) !important; font-weight: 400 !important; line-height: 1.3  !important; }
h5 { font-size: clamp(18px, 1vw, 20px)   !important; font-weight: 400 !important; line-height: 1.3  !important; }
h6 { font-size: clamp(17px, 0.8vw, 18px) !important; font-weight: 400 !important; line-height: 1.3  !important; }

/* ---- 3. Subheading / eyebrow label: medium, never heavy ---- */
.sub-title { font-weight: 500 !important; }

/* ---- 4. Body / paragraphs: REGULAR (400), comfortable reading ----
   This is the highest-priority fix. !important defeats the many inherited
   .class p { font-weight: 600/700 } rules in main.css. Inline <strong>/<b>
   keep their own bold, so emphasis inside copy is preserved. */
body { font-weight: 400 !important; }
p, li,
.text, .desc, [class*="desc"], [class*="-text"],
.about-text, .content p, blockquote, figcaption, td {
    font-weight: 400 !important;
}
p, li, .body-text {
    font-size: clamp(18px, 1.5vw, 22px) !important;  /* bumped up for readability on iPad/mobile */
    line-height: 1.7 !important;
}

/* ---- 5. FAQ: question stronger, answer regular (must be obvious) ---- */
.acc-btn, .acc-btn h1, .acc-btn h2, .acc-btn h3, .acc-btn h4, .acc-btn h5, .acc-btn p {
    font-weight: 600 !important;
    font-size: clamp(19px, 1.5vw, 24px) !important;
    line-height: 1.35 !important;
}
.acc-content, .acc-content p, .acc-content li, .acc-content .text {
    font-weight: 400 !important;
    font-size: clamp(18px, 1.2vw, 21px) !important;
    line-height: 1.7 !important;
}

/* ---- 6. Navigation + buttons: medium/regular, not bold ---- */
.navbar-nav .nav-link { font-weight: 500 !important; }
.theme-btn, .theme-btn-main .theme-btn { font-weight: 500 !important; }

/* ---- 7. Comfortable reading width for long-form SEO/article prose ----
   Applied only to prose paragraphs inside the known long-form wrappers, so it
   never touches cards, grids or multi-column layouts. */
.post-content p,
.service-details-content p,
.service-details-content li {
    max-width: 72ch;
}

/* ---- 8. Section intro description a touch larger (matches body) ---- */
.section-title p, .section-title-area p, .wt-cat-blurb {
    font-size: clamp(18px, 1.4vw, 22px) !important;
    line-height: 1.6 !important;
}

/* ---- 9. Service listing cards (.wt-scard): meta/tags/description are
   supporting text, so keep them smaller than the enlarged body copy. ---- */
.wt-scard-num { font-size: 12.5px !important; letter-spacing: .06em !important; }
.wt-scard-title { font-size: clamp(20px, 1.6vw, 26px) !important; }
.wt-scard-desc { font-size: clamp(14.5px, 1vw, 16px) !important; line-height: 1.55 !important; }
.wt-scard-tags, .wt-scard-tags li, .wt-scard-tags a { font-size: 12px !important; }

/* ---- 10. Responsive card grids ----
   Keep 2 columns on desktop and iPad (768-991). Drop to 1 column only on phones
   (<=767), where 2-up was cramped; smaller 12px tags stay visible and wrap. */
@media (max-width: 767px) {
    .wt-scard-grid[data-view="grid"] { grid-template-columns: 1fr !important; gap: 26px !important; max-width: 100% !important; }
    .wt-scard-grid[data-view="grid"] .wt-scard-tags { display: flex !important; flex-wrap: wrap; }
    /* Grid items default to min-width:auto and were overrunning the column,
       cutting off the card's right edge on phones. Constrain to the track so
       side spacing is symmetric. */
    .wt-scard-grid[data-view="grid"] .wt-scard { min-width: 0 !important; width: 100% !important; max-width: 100% !important; }
}

/* Business Increase / 3X stat card sits on a dark video overlay: white text. */
.incrase-box span, .incrase-box p { color: #fff !important; }

/* "Let's talk" CTA: heading text above the image (image moved out of the h2). */
.wt-cta-chip { margin: 26px auto 0; text-align: center; }
.wt-cta-chip img { max-width: min(520px, 100%); height: auto; }
@media (max-width: 575px) {
    .wt-ph-grid[data-view="grid"] { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   Global simple buttons: convert the animated .theme-btn-main circle-arrow
   buttons site-wide into a clean pill + a single red (#e11e3c) arrow, regular
   (500) label, no circle and no slide animation. Matches the hero .wt-btn look.
   body-prefixed so it beats the template's variant rules regardless of order.
   ========================================================================== */
body .theme-btn-main { padding: 14px 26px !important; gap: 10px !important; border-radius: 60px !important; overflow: visible !important; align-items: center !important; }
body .theme-btn-main .theme-btn { padding: 0 !important; margin: 0 !important; background: transparent !important; transform: none !important; font-weight: 500 !important; }
/* hide the left (hover) arrow circle */
body .theme-btn-main .theme-btn-arrow-left,
body .theme-btn-main.style-2 .theme-btn-arrow-left,
body .theme-btn-main.bg-white-style .theme-btn-arrow-left,
body .theme-btn-main.bg-black-style .theme-btn-arrow-left,
body .theme-btn-main.border-style .theme-btn-arrow-left { display: none !important; }
/* right arrow -> plain red glyph, no circle */
body .theme-btn-main .theme-btn-arrow-right,
body .theme-btn-main.style-2 .theme-btn-arrow-right,
body .theme-btn-main.bg-white-style .theme-btn-arrow-right,
body .theme-btn-main.bg-black-style .theme-btn-arrow-right,
body .theme-btn-main.border-style .theme-btn-arrow-right {
    position: static !important; background: transparent !important; box-shadow: none !important;
    width: auto !important; height: auto !important; scale: 1 !important; transform: none !important;
    color: #e11e3c !important; margin: 0 !important; transition: transform .25s ease !important;
}
body .theme-btn-main .theme-btn-arrow-right i { color: #e11e3c !important; font-size: 16px !important; }
body .theme-btn-main .theme-btn-arrow-right i::before { content: "\f061" !important; } /* fa-arrow-right */
/* neutralise the hover slide/scale */
body .theme-btn-main:hover { padding: 14px 26px !important; }
body .theme-btn-main:hover .theme-btn { transform: none !important; background: transparent !important; }
body .theme-btn-main:hover .theme-btn-arrow-right { scale: 1 !important; }
body .theme-btn-main:hover .theme-btn-arrow-right i { transform: translateX(4px) !important; animation: none !important; }

/* Marquee band separators (white star.png) -> brand red, to match the CTA
   arrows. Filter blackens the white glyph then colourises toward #e11e3c. */
.marque-section img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(96%) saturate(4200%) hue-rotate(338deg) brightness(95%) contrast(96%) !important;
}

/* ==========================================================================
   Global page-header cleanup (every public page via includes/page-hero.php)
   Remove the red perspective-grid background (bread-line.png) and the pink
   glow overlay (light.png), and tighten the empty space between the heading
   and the page content that followed.
   ========================================================================== */
.breadcrumb-wrapper { background-image: none !important; }
.breadcrumb-wrapper .light-bg { display: none !important; }
.breadcrumb-wrapper .page-heading { margin-bottom: 16px !important; }

/* Nav attention badge on "Work With Us" (red circle, like the reference site).
   Draws the eye to the partner page so it always invites a click. */
.wt-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    background: #e11e3c;
    color: #fff !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border-radius: 999px;
    position: relative;
    top: -0.55em;
}

/* Header CTA button ("Start Your Project"): translucent rich-blue pill that
   fills to solid brand blue on hover (reference: somervilles.co.uk). Scoped to
   the header so the many solid CTAs in page bodies are untouched. */
.header-section .menu-right-info .theme-btn-main.bg-white-style {
    background-color: rgba(23, 42, 76, 0.55) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background-color .25s ease !important;
}
.header-section .menu-right-info .theme-btn-main.bg-white-style:hover {
    background-color: #172A4C !important;
}

/* ==========================================================================
   Simple blue footer (replaces the old multi-column footer). Full-bleed brand
   blue, big "Talk to us" CTA, underlined nav, copyright row. Reference:
   somervilles.co.uk.
   ========================================================================== */
.wt-footer {
    background: #172A4C;
    color: #ffffff;
    margin: 0;
    padding: clamp(40px, 4.5vw, 64px) 0 clamp(24px, 2.5vw, 34px);
}
.wt-footer-cta h2 {
    color: #ffffff !important;
    font-weight: 300 !important;
    font-size: clamp(26px, 3.6vw, 46px) !important;
    line-height: 1.12 !important;
    margin: 0 0 clamp(28px, 3.5vw, 48px) !important;
    max-width: 20ch;
}
.wt-footer-cta a {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-decoration-color: #e11e3c !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 6px !important;
    border-bottom: 0 !important;
    white-space: nowrap;
    transition: color .2s ease;
}
.wt-footer-cta a:hover { color: #e11e3c !important; }

.wt-footer-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
    margin: 0 0 clamp(28px, 3.5vw, 48px);
}
@media (min-width: 768px) {
    .wt-footer-nav { display: flex; flex-wrap: wrap; gap: 18px 46px; }
}
.wt-footer-nav a {
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    font-size: clamp(15px, 1.1vw, 17px);
    font-weight: 400;
    transition: color .2s ease;
}
.wt-footer-nav a:hover { color: #ffffff !important; }

.wt-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 26px;
    padding-top: clamp(18px, 2.2vw, 24px);
    border-top: 0;
    color: rgba(255, 255, 255, 0.42);
    font-size: 13px;
}
.wt-footer-bottom .wt-footer-copy { color: rgba(255, 255, 255, 0.42) !important; }
.wt-footer-bottom a {
    color: rgba(255, 255, 255, 0.42) !important;
    text-decoration: none !important;
    transition: color .2s ease;
}
.wt-footer-bottom a:hover { color: #ffffff !important; }

/* ==========================================================================
   Mobile menu redesign: white background, large dark stacked links (footer
   menu set), dark logo, and a Start Your Project CTA. Reference:
   somervilles.co.uk mobile menu.
   ========================================================================== */
.mobile-menu-main { background: #ffffff !important; }
/* Logo removed from the mobile menu for more space. */
.mobile-menu-main .logo { display: none !important; }
.mobile-menu-main .close-mobile-menu,
.mobile-menu-main .close-mobile-menu i { color: #172A4C !important; }

.mobile-menu-main .menu-list ul li { border: 0 !important; padding: 6px 0 !important; }
.mobile-menu-main .menu-list ul li a {
    color: #172A4C !important;
    font-size: clamp(26px, 7vw, 34px) !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
}
.mobile-menu-main .menu-list ul li a:hover { color: #e11e3c !important; }

.wt-mm-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
    background: #172A4C;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 30px;
    border-radius: 60px;
}
.wt-mm-cta i { color: #e11e3c; }

.mobile-menu-main .off-contact-area { border-top-color: rgba(23, 42, 76, 0.12) !important; }
.mobile-menu-main .off-contact-area,
.mobile-menu-main .off-contact-area p,
.mobile-menu-main .off-contact-area a { color: #172A4C !important; }
.mobile-menu-main .off-contact-info .info-title,
.mobile-menu-main .off-contact-info .sub-info,
.mobile-menu-main .social-icon-list .follow-title { color: #5b6070 !important; }
.mobile-menu-main .social-icon a {
    color: #172A4C !important;
    border-color: rgba(23, 42, 76, 0.2) !important;
}

/* Mobile menu email: red underline (reference styling). */
.mobile-menu-main .off-contact-area a[href^="mailto:"] {
    text-decoration: underline !important;
    text-decoration-color: #e11e3c !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 4px !important;
}

/* Mobile menu: full-screen instead of a 390px side drawer. */
.mobile-menu-area .mobile-menu-main {
    width: 100vw !important;
    max-width: 100% !important;
    left: -100vw !important;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    padding: 28px 24px 40px !important;
}
.mobile-menu-area .mobile-menu-main.active { left: 0 !important; }
@media (max-width: 470px) {
    .mobile-menu-area .mobile-menu-main { width: 100vw !important; }
}

/* ==========================================================================
   Full-screen mobile + tablet menu: clean layout polish.
   ========================================================================== */
.mobile-menu-area .mobile-menu-main .close-mobile-menu { top: 24px !important; right: 22px !important; }
.mobile-menu-area .mobile-menu-main .close-mobile-menu i {
    color: #172A4C !important;
    font-size: 26px !important;
    width: 44px !important; height: 44px !important; line-height: 44px !important;
}
.mobile-menu-area .mobile-menu-main .menu-body { padding-top: 30px !important; }
.mobile-menu-area .mobile-menu-main .menu-list ul li a {
    border: 0 !important;
    padding: 10px 0 !important;
    justify-content: flex-start !important;
    color: #172A4C !important;
    font-size: clamp(26px, 6.4vw, 38px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}
.mobile-menu-area .mobile-menu-main .menu-list ul li:last-child a { border: 0 !important; }
/* The theme hides this block by default; show it so phone + email appear. */
.mobile-menu-area .mobile-menu-main .off-contact-area {
    display: block !important;
    padding: 28px 0 0 !important;
    margin-top: 28px !important;
    border-top: 1px solid rgba(23, 42, 76, 0.12) !important;
}
.mobile-menu-area .mobile-menu-main .off-contact-info { margin-top: 0 !important; }
.mobile-menu-area .mobile-menu-main .off-contact-area .contact-details { margin-bottom: 14px; }
.mobile-menu-area .mobile-menu-main .off-contact-area p { font-size: 18px !important; margin: 2px 0 0 !important; }
.mobile-menu-area .mobile-menu-main .social-icon-list { margin-top: 18px; }
/* (iPad no longer enlarged — it now shares the compact mobile design below so
   the two menus look identical. Kept behind a min-width the menu never reaches
   so it is inert.) */
@media (min-width: 1400px) {
    .mobile-menu-area .mobile-menu-main .menu-list ul li a { font-size: 22px; }
}

/* ==========================================================================
   Mobile/tablet menu: match the reference exactly. Show only phone + email
   (no "Contact Info" heading, no field labels, no location, no social icons),
   then a full-width Start Your Project button.
   ========================================================================== */
.mobile-menu-area .mobile-menu-main .off-contact-info .info-title,
.mobile-menu-area .mobile-menu-main .off-contact-info .sub-info,
.mobile-menu-area .mobile-menu-main .off-contact-info .contact-details:nth-of-type(3),
.mobile-menu-area .mobile-menu-main .social-icon-list { display: none !important; }

.mobile-menu-area .mobile-menu-main .off-contact-area {
    border-top: 0 !important;
    padding: 0 !important;
    margin-top: 40px !important;
}
.mobile-menu-area .mobile-menu-main .off-contact-info { margin-top: 0 !important; }
.mobile-menu-area .mobile-menu-main .off-contact-area .contact-details { margin-bottom: 6px !important; }
.mobile-menu-area .mobile-menu-main .off-contact-area .contact-details:nth-of-type(1) p {
    font-size: clamp(24px, 6vw, 30px) !important;
    font-weight: 400 !important;
}
.mobile-menu-area .mobile-menu-main .off-contact-area .contact-details:nth-of-type(2) p {
    font-size: clamp(18px, 4.5vw, 20px) !important;
}

/* Full-width dark pill, like the reference. */
.wt-mm-cta {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center;
    gap: 12px;
    margin-top: 30px !important;
    background: #172A4C;
    color: #ffffff !important;
    font-size: 19px;
    font-weight: 500;
    padding: 20px 30px;
    border-radius: 60px;
}
.wt-mm-cta i { color: #e11e3c; }

/* ==========================================================================
   Mobile + tablet menu: one compact design (iPad matches mobile). Compress
   spacing so every link + phone/email + button fit on one screen without
   scrolling, at both phone and iPad sizes.
   ========================================================================== */
@media (max-width: 1199px) {
    .mobile-menu-area .mobile-menu-main { padding: 20px 22px 26px !important; }
    .mobile-menu-area .mobile-menu-main .close-mobile-menu { top: 16px !important; right: 18px !important; }
    .mobile-menu-area .mobile-menu-main .menu-body { padding-top: 14px !important; }
    .mobile-menu-area .mobile-menu-main .menu-list ul li { padding: 0 !important; }
    .mobile-menu-area .mobile-menu-main .menu-list ul li a {
        font-size: 22px !important;
        padding: 5px 0 !important;
        line-height: 1.15 !important;
    }
    .mobile-menu-area .mobile-menu-main .off-contact-area { margin-top: 20px !important; }
    .mobile-menu-area .mobile-menu-main .off-contact-area .contact-details { margin-bottom: 4px !important; }
    .mobile-menu-area .mobile-menu-main .off-contact-area .contact-details:nth-of-type(1) p { font-size: 22px !important; }
    .mobile-menu-area .mobile-menu-main .off-contact-area .contact-details:nth-of-type(2) p { font-size: 16px !important; }
    .wt-mm-cta { margin-top: 18px !important; padding: 15px 28px !important; font-size: 17px !important; }
}

/* Hide the floating WhatsApp + scroll-top buttons while the footer is on screen
   (they otherwise overlap the copyright). Toggled by the observer in footer.php. */
.wt-float { transition: opacity .3s ease, transform .3s ease, visibility .3s ease; }
body.wt-at-footer .wt-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
}

/* Header "Client login" link (desktop): plain nav-style link between the
   search icon and the Start Your Project button. */
.header-section .menu-right-info .wt-client-login {
    color: #172A4C !important;
    font-weight: 500;
    font-size: 16px;
    margin: 0 20px 0 16px;
    white-space: nowrap;
    transition: color .2s ease;
}
.header-section .menu-right-info .wt-client-login:hover { color: #e11e3c !important; }

/* ==========================================================================
   Small fixes batch.
   ========================================================================== */
/* Gallery images: remove the category-name caption under each photo. */
.wt-pf-cap { display: none !important; }

/* Projects/gallery category tiles: keep the hover arrow icon white on the
   blue circle (was rendering dark/invisible). */
.wt-ph-arrow, .wt-ph-arrow i { color: #ffffff !important; }

/* Services page: remove the empty "Business Increase 3X" navy overlay box. */
.incrase-box { display: none !important; }

/* Remove the header search icon (per request). */
.main-header__search { display: none !important; }