/* Shared design language. Loaded after each page's inline styles, so it wins at equal specificity.
   Pages link it as site.css?v=YYYYMMDD so browsers drop their cached copy.
   When this file changes, update that date in the link on every page (and in style-guide.html). */
:root{
  --color-navy:#082943;
  --color-navy-hover:#0f3d61;
  --color-red:#d41c00;
  --color-red-hover:#b01700;
  --color-blue:#3f91d7;
  --color-surface:#f2f5f8; /* card fill, tinted toward the navy */
  --color-white:#fff;
  /* Text: two inks for light backgrounds, white for navy, photos and the footer. */
  --color-ink:#1c2833;        /* body text and headings */
  --color-ink-muted:#52606d;  /* secondary text: testimonials, FAQ answers, captions */
  --color-link:#1e5d92;       /* links inside text; a darker brand blue that passes AA on white */
  --color-link-hover:var(--color-navy);
  --color-on-dark:#fff;                        /* text on navy, photos and the footer */
  --color-on-dark-muted:rgb(255 255 255 / .75); /* secondary text on navy: copyright, credits */

  --radius-sm:6px;
  --radius-md:12px;
  --radius-pill:999px;

  /* Spacing: a 4px-based scale for gaps inside components. */
  --space-xs:8px;
  --space-sm:12px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:96px;
  /* One unit between page sections: 64px on phones, growing to 112px on wide screens. */
  --space-section:clamp(64px, 8vw, 112px);

  /* Hero scrim: neutral charcoal over photos so white text passes WCAG AA (4.5:1). Darker than the old navy at the same opacity, so every hero still passes.
     Text sits on the left, so the gradient is darkest there and lets the right side of the photo through. */
  --hero-scrim:linear-gradient(90deg, rgb(24 26 28 / .8) 0%, rgb(24 26 28 / .7) 60%, rgb(24 26 28 / .3) 100%);
  --hero-scrim-solid:rgb(24 26 28 / .65); /* centred text, and phones where text spans the full width */

  /* Hero height: the homepage hero fills the screen; inner pages use one shorter height so content shows sooner. */
  --hero-height-inner:clamp(440px, 60svh, 620px);
  --nav-height:110px; /* the fixed header sits over the hero */

  --btn-height:52px;
  --btn-icon:36px;

  --weight-text:400;
  --weight-heading:500;
  --weight-button:600;
}

/* Text colour. Section rules in each page use var(--color-ink) / var(--color-ink-muted) directly. */
body{color:var(--color-ink)}
/* Links inside running text, on light sections only: blue and underlined, never red (red means Call/Quote). */
body > section:not(.menu, .footer4, .header2, .site-parallax-background, .section-v9wKvCaTNS, .section-vbTfae8e1Z) :is(p, li) a:not(.btn){
  color:var(--color-link)!important;text-decoration:underline;text-underline-offset:2px;background-image:none!important}
body > section:not(.menu, .footer4, .header2, .site-parallax-background, .section-v9wKvCaTNS, .section-vbTfae8e1Z) :is(p, li) a:not(.btn):hover{color:var(--color-link-hover)!important}

/* Type: the template sets headings, text, links and spans to 300, too thin to read on photos and phones. */
h1,h2,h3,h4,h5{font-weight:var(--weight-heading)}
/* Heading margin reset for every level. The template's build stripped unused rules page by page,
   so some pages had no reset for h2 or h3 and fell back to the browser's default margins. */
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}
/* These two were headings before the outline fix; keep their heading margin so nothing moves. */
.features16 p.card-text,.article11 p.site-section-subtitle{margin-bottom:.5rem}
p{font-weight:var(--weight-text)}
a,span{font-weight:inherit}
.display-1,.display-2,.display-5{font-weight:var(--weight-heading)}
.display-4,.display-7{font-weight:var(--weight-text)}

/* Buttons: one size and shape everywhere. */
.site-section-btn .btn,
.site-section-btn .btn:not(.btn-form){
  min-height:var(--btn-height);
  padding:6px 8px 6px 24px;
  border-radius:var(--radius-pill);
  font-weight:var(--weight-button);
}
.site-section-btn .btn:not(:has(.site-iconfont)){padding:6px 24px}
.site-section-btn .btn .site-iconfont{
  width:var(--btn-icon);
  height:var(--btn-icon);
  min-width:var(--btn-icon);
  font-size:18px;
  margin-left:16px;
  margin-right:0;
  transition:transform .2s ease-out;
}
/* Nudge the icon with a transform instead of animating its margin. */
.site-section-btn .btn:hover .site-iconfont,
.site-section-btn .btn:focus .site-iconfont{margin-left:16px;transform:translateX(3px)}

/* Two roles: primary (red) for Quote and Call, secondary (navy) for every Learn More / Read More. */
.btn-primary,.btn-primary:active{background-color:var(--color-red)!important;border-color:var(--color-red)!important}
.btn-primary:hover,.btn-primary:focus,.btn-primary.active{background-color:var(--color-red-hover)!important;border-color:var(--color-red-hover)!important;color:var(--color-white)!important}
.btn-primary .site-iconfont{color:var(--color-red)}

.btn-secondary,.btn-secondary:active,
.btn-black,.btn-black:active{background-color:var(--color-navy)!important;border-color:var(--color-navy)!important;color:var(--color-white)!important}
.btn-secondary:hover,.btn-secondary:focus,.btn-secondary.active,
.btn-black:hover,.btn-black:focus,.btn-black.active{background-color:var(--color-navy-hover)!important;border-color:var(--color-navy-hover)!important;color:var(--color-white)!important}
.btn-secondary .site-iconfont,.btn-black .site-iconfont{background-color:var(--color-white);color:var(--color-navy)}

/* Inverse: secondary on dark photos and navy sections. */
.btn-info,.btn-info:active,
.btn-info:hover,.btn-info:focus,.btn-info.active{background-color:var(--color-white)!important;border-color:var(--color-white)!important;color:var(--color-navy)!important}
.btn-info .site-iconfont{background-color:var(--color-navy);color:var(--color-white)}

/* Radius: cards and standalone images share one radius; images inside a card are clipped by it. */
img,.card,.item-wrapper,.card-wrapper{border-radius:var(--radius-md)!important}
.item-wrapper img,.card img,.card-wrapper img{border-radius:0!important}
.item-wrapper,.card,.card-wrapper{overflow:hidden}

/* Surfaces: the template used four greys (#fafafa, #f5f5f5, #e6e6e6) for the same kind of card.
   ponytail: section IDs come from the Mobirise export; add new card sections here. */
.section-v9F93fnB6B .item-wrapper,.section-v9P8nbVL71 .item-wrapper,.section-v9wKvCaTNS .item-wrapper,
.section-v9FeIriCce .item-wrapper,.section-v9L2RGD2CX .item-wrapper,.section-v9L5MxFv9r .item-wrapper,
.section-v9LbpHOI7i .item-wrapper,.section-v9LcvNu6qc .item-wrapper,.section-v9Le7kR6UD .item-wrapper,
.section-v9NFGBEcxA .item-wrapper,.section-v9NFGBqwvm .item-wrapper,.section-v9NFGCbfUW .item-wrapper,
.section-v9OWlL25p7 .item-wrapper,.section-v9PgbSZXlA .item-wrapper{background:var(--color-surface)}

/* Section rhythm. White sections take half a unit on each side, so two white sections sit one unit apart.
   The header menu, page heroes (.header2) and the full-bleed map keep their own spacing. */
body > section:not(.menu, .header2, .map01){padding-top:calc(var(--space-section) / 2);padding-bottom:calc(var(--space-section) / 2)}
/* Bands (colour or photo backgrounds) hold the full unit inside their own background.
   ponytail: the three IDs are the coloured sections from the Mobirise export; add new bands here. */
body > section:is(.footer4, .site-parallax-background, .section-v9wKvCaTNS, .section-v9wv8kvckA, .section-vbTfae8e1Z, .section-v9P5OTiLK6):not(.header2){padding-top:var(--space-section);padding-bottom:var(--space-section)}
/* Full unit after the hero and before the footer. */
body > .header2 + section:not(.map01){padding-top:var(--space-section)}
body > section:not(.menu, .header2, .map01):has(+ .footer4){padding-bottom:var(--space-section)}
/* A section that continues the one above it (e.g. "View All" under the product grid) sits close. */
body > section.article16{padding-top:var(--space-md)}

/* Hero and photo-band scrims replace the template's mix of 30% black, 50% black and 60% navy overlays. */
body > section:is(.header2, .header6) .site-overlay{background:var(--hero-scrim);opacity:1}
body > section.header09 .site-overlay{background:var(--hero-scrim-solid);opacity:1}
@media (max-width:767px){body > section:is(.header2, .header6) .site-overlay{background:var(--hero-scrim-solid)}}

/* Inner-page heroes (photo or plain banner): one height, text centred in the space below the fixed header.
   ponytail: .section-v9an9xel8t is the homepage hero, which keeps the template's full-screen height. */
body > section.header2:not(.section-v9an9xel8t){
  display:flex;align-items:center;
  min-height:var(--hero-height-inner);
  padding-top:calc(var(--nav-height) + var(--space-2xl));
  padding-bottom:var(--space-2xl)}
body > section.header2:not(.section-v9an9xel8t) .site-overlay{min-height:0}
@media (max-width:991px){:root{--nav-height:72px}}

/* Footer: navy instead of pure black, so the page is framed by the brand colour top (header) and bottom. */
body > section.footer4{background-color:var(--color-navy)}
body > section.footer4 .copyright{color:var(--color-on-dark-muted)}
/* The credit link was brand blue, which fails contrast on navy; make it white and underlined. */
body > section.footer4 .copyright a{color:var(--color-on-dark)!important;text-decoration:underline;text-underline-offset:2px;background-image:none!important}

/* Homepage About section: the blue swoosh sits beside the text on desktop (text is half width).
   Below 992px the text goes full width and the swoosh landed behind it, so drop the swoosh there.
   It's drawn by jarallax in #jarallax-container-N, or by the section itself when JS is off. */
@media (max-width:991px){
  #header1-w{background-image:none!important}
  #header1-w > [id^="jarallax-container"]{display:none}
}

/* Focus: a red ring reads as an error; use the brand blue, which shows on white and navy. */
*:focus-visible{outline:2px solid var(--color-blue)!important;outline-offset:3px}