/* ACV site-wide standards.
   Loaded LAST on every page, so a change here applies across the whole site (no more per-page
   edits). The :not(#_) raises specificity to ID-level so these reliably win the theme CSS. */

/* --- Montserrat on every page, at every breakpoint. Webflow's default is body{Arial}; this forces
       Montserrat on all text. Icon-font elements (Webflow w-icon-*, and anything whose glyph is a
       font character) are excluded so their icons keep rendering. --- */
html body:not(#_){font-family:'Montserrat', sans-serif !important;}
html body *:not([class*="w-icon"]):not([class*="icon"]):not(code):not(kbd):not(pre):not(samp):not(.w-webflow-badge):not(.w-widget-twitter-count-inner){
  font-family:'Montserrat', sans-serif !important;
}

/* --- Section subheadings (the line under a section heading, e.g. "Up and running in four simple
       steps", "Used on production lines and sites across the UK") --- */
html body .section-subheading:not(#_){
  font-size:clamp(1.2rem,1.7vw,1.45rem)!important;
  line-height:1.5!important;
}

/* --- Hero subheading (the line under the big hero heading, e.g. "From craft bakeries to North
       Sea oil…") — must read as a subheading: clearly larger than the body copy below it. --- */
html body .hero-subheading:not(#_){
  font-size:clamp(1.25rem,2.2vw,1.6rem)!important;
  line-height:1.45!important;
}

/* --- Hero heading on phones: the process ("How it works") and About Us ("About Applied Computer
       Vision") heroes are pinned to a fixed 40px at every width in acv-typography.css, which is too
       big on a phone — scale them down below 768px. --- */
@media screen and (max-width:767px){
  html.page-process .hero-section .hero-heading:not(#_),
  html.page-about-us .hero-section .hero-heading:not(#_),
  html.page-contact .hero-section .hero-heading:not(#_),
  html.page-health-safety .hero-section .hero-heading:not(#_),
  html.page-mp-products .hero-section .hero-heading:not(#_){
    font-size:clamp(27px,6.6vw,33px)!important;
  }
}

/* --- Final-CTA heading ("Want to find out more? Let's talk!") — scale it the same on every page as
       it does on the landing (clamp 22px → 30px). Some pages were pinned to a flat 30px, so it never
       shrank on small screens. --- */
html body .final-cta .section-heading:not(#_),
html body .final-cta .cta-heading:not(#_),
html body .final-cta-wrapper .final-cta .section-heading:not(#_){
  font-size:clamp(22px,3.2vw,30px)!important;
}

/* --- Final-CTA subheading ("Get in touch with one of our experts for a personalised solution") —
       match the section-subheading scale, not the tiny 16px body size. --- */
html body .cta-text:not(#_){
  font-size:clamp(1.2rem,1.7vw,1.45rem)!important;
  line-height:1.5!important;
}

/* --- Final-CTA when stacked (≤767px): centre the heading and text to match the centred buttons.
       Webflow only centred them below 480px, leaving a 480–767 band where the heading/text sat left
       in an otherwise centred card. --- */
@media screen and (max-width:767px){
  html body .final-cta .cta-cell--copy:not(#_){align-items:center!important;text-align:center!important}
  html body .final-cta .section-heading:not(#_),
  html body .final-cta .cta-heading:not(#_){text-align:center!important;align-items:center!important;margin-left:auto!important;margin-right:auto!important}
  html body .final-cta .cta-text:not(#_){text-align:center!important;margin-left:auto!important;margin-right:auto!important}
}

/* --- All primary buttons: flex-centre the label so the text sits dead-centre in the orange block.
       (block buttons with a min-height were letting the text sit slightly high.) --- */
html body a.primary-button.w-button:not(#_),
html body button.primary-button.w-button:not(#_),
html body input.primary-button.w-button:not(#_){
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
}

/* --- CTA buttons ("Get in Touch", "Book a Call", "Contact Us") — one consistent, prominent
       size everywhere, matched to the hero button --- */
html body .final-cta a.primary-button.w-button:not(#_),
html body .final-cta button.primary-button.w-button:not(#_),
html body .final-cta-wrapper a.primary-button.w-button:not(#_),
html body .final-cta-wrapper button.primary-button.w-button:not(#_){
  font-size:clamp(18px,2.2vw,26px)!important;
}

/* --- CTA decorative dark circle: keep it on iPad mini and larger (incl. 11" & 13"); hide it only
       below iPad mini (phones), where it crowds the text --- */
@media screen and (max-width:767px){
  html body .final-cta .final-cta-circs:not(#_),
  html body .final-cta-wrapper .final-cta-circs:not(#_){display:none!important;}
}

/* --- Mobile burger menu: transparent button (no white box), and an open menu that's light-blue
       and fitted within the hero card width (not a full-width white panel). The menu inherits the
       hero's --mp-hero-inset / --mp-hero-radius so it lines up with the hero card. --- */
html body .menu-button.w-nav-button:not(#_){
  background-color:transparent!important;background:transparent!important;box-shadow:none!important;
}
/* Only when the burger is active (<=991px) — on desktop .nav-menu is the horizontal nav bar and
   must stay transparent. Explicit centered width (left inset + matching width) so the open panel
   is symmetric within the hero card, not shifted left. */
@media screen and (max-width:991px){
  html body .nav-menu.w-nav-menu:not(#_){
    background-color:#d6e9fb!important;
    left:var(--mp-hero-inset,16px)!important;right:auto!important;
    width:calc(100% - 2 * var(--mp-hero-inset,16px))!important;max-width:none!important;
    border-radius:0 0 var(--mp-hero-radius,14px) var(--mp-hero-radius,14px)!important;
    box-shadow:0 14px 34px rgba(0,80,120,.14)!important;
  }
}
/* Landing page: its hero is full-bleed dark navy, so the open burger menu should match — dark-blue
   panel (the nav links are already light, so they stay readable on it). */
@media screen and (max-width:991px){
  html.page-landing .nav-menu.w-nav-menu:not(#_){background-color:#002346!important;}
}
/* Burger "Products" submenu (the dropdown that opens inside the burger menu) was a white box —
   make it match the menu: light-blue everywhere, dark-blue on the landing page (with light links). */
@media screen and (max-width:991px){
  html body .dropdown-list.w-dropdown-list:not(#_){background-color:#d6e9fb!important;box-shadow:none!important;border:none!important;}
  html.page-landing .dropdown-list.w-dropdown-list:not(#_){background-color:#002346!important;}
  html.page-landing .dropdown-list.w-dropdown-list .nav-link:not(#_),
  html.page-landing .dropdown-list.w-dropdown-list .w-dropdown-link:not(#_){color:#f7f7fd!important;-webkit-text-fill-color:#f7f7fd!important;}
}

/* Hero decorative dark circle: hide it on phones for the process & About Us heroes (it sits behind
   the hero text and hurts readability), matching what we did on the Contact page. */
@media screen and (max-width:767px){
  html.page-process .hero-section .hs-hero-circs:not(#_),
  html.page-about-us .hero-section .hs-hero-circs:not(#_),
  html.page-health-safety .hero-section .hs-hero-circs:not(#_),
  html.page-mp-products .hero-section .hs-hero-circs:not(#_){display:none!important}
}

/* Product-page mobile heroes (.smaller): the Get in Touch button is the last item and was poking
   below the pale card because the card's bottom inset was larger than the hero's bottom padding.
   Shrink the bottom inset and add padding so the button sits comfortably inside the card. */
html.page-health-safety .hero-section.smaller:not(#_),
html.page-mp-products .hero-section.smaller:not(#_){
  --mp-hero-bottom:clamp(16px,4vw,28px)!important;
  padding-bottom:clamp(40px,9vw,64px)!important;
}

/* Product-page heroes (both the desktop and .smaller variants): float the pale card + washes +
   circles down from the very top so the top gap matches the left/right insets — same treatment as
   the other pages. Applies at every size. */
html.page-health-safety .hero-section,
html.page-mp-products .hero-section{padding-top:var(--mp-hero-inset)!important}
html.page-health-safety .hero-section::before,
html.page-health-safety .hero-section::after,
html.page-health-safety .hero-section .hs-hero-circs,
html.page-mp-products .hero-section::before,
html.page-mp-products .hero-section::after,
html.page-mp-products .hero-section .hs-hero-circs{top:var(--mp-hero-inset)!important}

/* ===== On mobile the hero background goes full-bleed (no framed card) on every page except the
   landing — zero the card insets so the pale gradient reaches all edges. ===== */
@media screen and (max-width:767px){
  html.page-process .hero-section:not(#_),
  html.page-about-us .hero-section:not(#_),
  html.page-contact .hero-section:not(#_),
  html.page-health-safety .hero-section:not(#_),
  html.page-mp-products .hero-section:not(#_){--mp-hero-inset:0px!important;--mp-hero-radius:0px!important;--mp-hero-bottom:0px!important}
}

/* ===== Product pages (Health & Safety + Manufacturing) — mobile product-block layout =====
   These run in the shared sheet (which loads after each page's inline styles) so both pages get the
   same treatment. */
@media screen and (max-width:991px){
  /* Clean vertical stack: pill -> video -> text -> benefits (the desktop mosaic grid overlapped). */
  html.page-health-safety .hs-product-block__wash-mosaic-top,
  html.page-mp-products .hs-product-block__wash-mosaic-top{display:flex!important;flex-direction:column!important;gap:clamp(18px,4.5vw,28px)!important;align-items:stretch!important}
  html.page-health-safety .hs-product-block__wash-mosaic-intro,
  html.page-mp-products .hs-product-block__wash-mosaic-intro{order:2!important;grid-row:auto!important;grid-column:auto!important}
  html.page-health-safety .hs-product-block__wash-mosaic-media,
  html.page-mp-products .hs-product-block__wash-mosaic-media{order:1!important;grid-row:auto!important;grid-column:auto!important;display:flex!important;flex-direction:column!important;gap:clamp(12px,3vw,18px)!important;align-items:center!important}
  html.page-health-safety .hs-product-block__wash-mosaic-media .hs-product-block__figure,
  html.page-mp-products .hs-product-block__wash-mosaic-media .hs-product-block__figure{order:1!important;width:100%!important}
  html.page-health-safety .hs-product-block__wash-mosaic-media .hs-product-block__pill,
  html.page-mp-products .hs-product-block__wash-mosaic-media .hs-product-block__pill{order:-1!important}
  html.page-health-safety .hs-product-block__wash-mosaic-strip,
  html.page-mp-products .hs-product-block__wash-mosaic-strip{order:3!important;grid-row:auto!important;grid-column:auto!important}
}
@media screen and (max-width:767px){
  /* Pills: slightly larger than the first pass, and centred over the video. */
  html.page-health-safety .hs-product-block__pill--media:not(#_),
  html.page-health-safety .hs-product-block__variant-mosaic .hs-product-block__pill--media:not(#_),
  html.page-mp-products .hs-product-block__pill--media:not(#_),
  html.page-mp-products .hs-product-block__variant-mosaic .hs-product-block__pill--media:not(#_){
    font-size:clamp(14px,4vw,16.5px)!important;padding:.46em 1.2em .44em!important;letter-spacing:.09em!important;
    align-self:center!important;margin-left:auto!important;margin-right:auto!important;margin-bottom:clamp(10px,3vw,16px)!important;
  }
  /* Divider between products — much less vertical space on mobile (was ~80px each side). */
  html.page-health-safety .hs-product-divider:not(#_),
  html.page-mp-products .hs-product-divider:not(#_){margin-top:clamp(26px,7vw,42px)!important;margin-bottom:clamp(26px,7vw,42px)!important}
  /* Hero video: fill the hero column so its width matches the product media width below. */
  html.page-health-safety .hero-section.smaller .hero-image-wrapper:not(#_),
  html.page-mp-products .hero-section.smaller .hero-image-wrapper:not(#_){width:100%!important;max-width:100%!important;justify-self:stretch!important}
}

/* ===== Logo: match the landing page — same size scaling (130px → 230px) across all breakpoints
   (was a smaller 168px clamp with a jump at 767px), and pushed to the left. ===== */
html.page-process .hero-section .navbar .brand .image:not(#_),
html.page-about-us .hero-section .navbar .brand .image:not(#_),
html.page-contact .hero-section .navbar .brand .image:not(#_),
html.page-health-safety .hero-section .navbar .brand .image:not(#_),
html.page-mp-products .hero-section .navbar .brand .image:not(#_){width:clamp(130px,22vw,230px)!important}
@media screen and (max-width:991px){
  /* Push the logo to the left edge like the landing. The offset was stacking up from the navbar,
     navbar-container, brand and the logo image's own paddings — zero them and keep one small gutter.
     (.hero-section excludes the landing, whose hero is .lp-hero-section.) */
  html body .hero-section .navbar:not(#_){padding-left:0!important}
  html body .hero-section .navbar .navbar-container:not(#_){max-width:100%!important;padding-left:clamp(8px,2.5vw,14px)!important;margin-left:0!important;margin-right:0!important}
  html body .hero-section .navbar .brand:not(#_){padding-left:0!important;margin-left:0!important}
  html body .hero-section .navbar .brand .image:not(#_){padding-left:0!important}
}

/* ===== Mobile hero: trim the left/right padding so the subheading gets more width (was cramped). ===== */
@media screen and (max-width:767px){
  /* Product pages: drop the extra hero-stack side padding — content then fills the 300px column and
     lines up with the product media below. */
  html.page-health-safety .hero-section .hero-stack:not(#_),
  html.page-mp-products .hero-section .hero-stack:not(#_){padding-left:0!important;padding-right:0!important}
  /* All non-landing heroes: trim the container side padding for more text width. */
  html.page-process .hero-section .container:not(#_),
  html.page-about-us .hero-section .container:not(#_),
  html.page-contact .hero-section .container:not(#_),
  html.page-health-safety .hero-section .container:not(#_),
  html.page-mp-products .hero-section .container:not(#_){padding-left:clamp(14px,4vw,20px)!important;padding-right:clamp(14px,4vw,20px)!important}
}

/* ===== Text justification: above phone width, keep section headings AND their subheadings LEFT on
   the content pages, so nothing reads as a stray centred block among left-aligned text (e.g. the
   process "Seamless, simple integration" intro). Phone portrait (<480px) keeps the centred look. ===== */
@media screen and (min-width:480px){
  html.page-process .section-heading:not(#_),html.page-process .section-subheading:not(#_),
  html.page-contact .section-heading:not(#_),html.page-contact .section-subheading:not(#_),
  html.page-health-safety .section-heading:not(#_),html.page-health-safety .section-subheading:not(#_),
  html.page-mp-products .section-heading:not(#_),html.page-mp-products .section-subheading:not(#_){text-align:left!important}
}

/* ===== Landing hero, once it stacks into one centred column (≤1200px): reorder to
   heading → subheading → showreel → "Your CCTV - Our AI" → buttons. display:contents flattens the
   text wrappers so the video (a sibling of the text cell) can slot between the subheading and the
   tagline. ===== */
@media screen and (max-width:1200px){
  html.page-landing .lp-hero-section .lp-hero-stack:not(#_){display:flex!important;flex-direction:column!important;align-items:stretch!important;row-gap:clamp(20px,3.5vw,32px)!important}
  html.page-landing .lp-hero-section .her-text-cell-main:not(#_),
  html.page-landing .lp-hero-section .lp-hero-text-stack:not(#_){display:contents!important}
  html.page-landing .lp-hero-section .hero-heading-cell:not(#_){order:1!important}
  html.page-landing .lp-hero-section .lp-hero-subheading-cell:not(#_){order:2!important}
  html.page-landing .lp-hero-section .lp-hero-image:not(#_){order:3!important}
  html.page-landing .lp-hero-section .hero-buttons:not(#_){order:4!important}
  html.page-landing .lp-hero-section .hero-button-cell:not(#_){order:5!important}
}