/* Brand mapping: the Impreza theme's colour and font variables (theme.css) take their values from
   brand.css, the shared source for the website and the configurator. Change brand values there. */
:root {
  --font-family: var(--brand-font-body);
  --h1-font-family: var(--brand-font-heading);

  --color-content-text: var(--brand-text);
  --color-content-primary: var(--brand-teal);
  --color-content-primary-grad: var(--brand-gradient);
  --color-content-secondary: var(--brand-navy);
  --color-content-secondary-grad: var(--brand-gradient-reverse);
  --color-content-heading: var(--brand-navy);
  --color-content-heading-grad: var(--brand-navy);
  --color-content-link: var(--brand-teal);
  --color-content-link-hover: var(--brand-navy);
  --color-content-bg-alt: var(--brand-bg-alt);
  --color-content-bg-alt-grad: var(--brand-bg-alt);

  --color-alt-content-bg: var(--brand-bg-alt);
  --color-alt-content-bg-grad: var(--brand-bg-alt);
  --color-alt-content-heading: var(--brand-navy);
  --color-alt-content-heading-grad: var(--brand-navy);
  --color-alt-content-link: var(--brand-teal);
  --color-alt-content-link-hover: var(--brand-navy);
  --color-alt-content-overlay: var(--brand-navy);
  --color-alt-content-primary: var(--brand-navy);
  --color-alt-content-primary-grad: var(--brand-gradient-reverse);
  --color-alt-content-secondary: var(--brand-teal);
  --color-alt-content-secondary-grad: var(--brand-gradient);

  --color-header-top-bg: var(--brand-bg-alt);
  --color-header-top-bg-grad: linear-gradient(0deg, var(--brand-bg-alt), var(--brand-bg));
  --color-header-top-text: var(--brand-text);
  --color-header-top-text-hover: var(--brand-navy);
  --color-header-middle-text: var(--brand-text);
  --color-header-middle-text-hover: var(--brand-teal);
  --color-footer-link-hover: var(--brand-teal);
  --color-chrome-toolbar: var(--brand-bg-alt);
}

/* Small image-size fix from WordPress core */
img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px}

/* News page slideshow (was WordPress 'Additional CSS') */
    .slideshow-container {
      max-width: 504px;
      max-height: 818px;
      position: relative;
      margin: auto;
      background-color: color-mix(in srgb, var(--brand-text) 10%, transparent);
    }

    /* Next & previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 0 20px 10px 20px;
      margin-top: -50px;
      color: var(--brand-teal) !important;
      font-weight: bold;
      font-size: 80px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    .prev {
      left: -30px;
    }

    /* Position the "next button" to the right */
    .next {
      right: -30px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
      color: var(--brand-text) !important;
    }

    /* The dots/bullets/indicators */
    .nav-container {
      text-align: center;
      padding-top: 12px;
    }

    .dot {
      cursor: pointer;
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: var(--brand-teal);
      border-radius: 50%;
      display: inline-block;
      transition: background-color 0.6s ease;
    }

    .dot-active, .dot:hover {
      background-color: var(--brand-text);
    }

    /* Fading animation */
    .fade-slideshow {
      animation-name: fade;
      animation-duration: 1.5s;
      animation-timing-function: ease-in;
    }

    @keyframes fade {
      from {opacity: 0}
      to {opacity: 1}
    }

/* One <h1> per page (SEO) without changing the look: the theme styles headings partly by tag, so a
   heading whose level differs from its look gets the other level's rules (copied from theme.css).
   h1.lb-h2 = looks like an h2 (Contact, Privacy). (h2.lb-h1 for the old phone copies is gone: merged.)
   :where() keeps the specificity of a bare tag, so page rules such as .vc_do_custom_heading still win. */
h1:where(.lb-h2){font-family:var(--h2-font-family,inherit);font-weight:var(--h2-font-weight,inherit);font-stretch:var(--h2-font-stretch,normal);font-size:var(--h2-font-size,inherit);font-style:var(--h2-font-style,inherit);line-height:var(--h2-line-height,1.4);letter-spacing:var(--h2-letter-spacing,inherit);text-transform:var(--h2-text-transform,inherit);margin-bottom:var(--h2-margin-bottom,1.5rem)}
h1:where(.lb-h2)>strong{font-weight:var(--h2-bold-font-weight,bold)}

/* Hidden from view, still read by screen readers and search engines (the theme's .screen-reader-text
   is overridden elsewhere in theme.css). */
.lb-visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Top sections (title + photo in the organic shape; the 13 .width_full_with_indents.with_img
   sections; phones have their own stacked version).
   The photo is the section background. All 13 photos share one 1920x1080 template: the shape fills
   x 37-100% and y 19-81%, the rest is transparent. The background box below is exactly the shape's
   bounding box (background 1/0.63 x 1/0.62 of it), vertically centred; its width (--photo-w), its
   distance to the right screen edge (--photo-right) and the rounding of its cut-off right end (--r,
   0 while it touches the screen edge) depend on the screen size.
   Tablets (769-1024px): text in half of the page column, photo max 45% wide. */
.l-section.width_full_with_indents.with_img{--photo-w:min(45%,720px);--photo-right:max(0px,calc((100% - var(--site-content-width)) / 2));--r:clamp(0px,calc((100vw - var(--site-content-width)) / 2),3rem)}
.l-section.width_full_with_indents.with_img>.l-section-h{max-width:var(--site-content-width)!important}
.l-section.width_full_with_indents.with_img .g-cols.cols_1-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.l-section.width_full_with_indents.with_img h1{font-size:clamp(2.25rem,1rem + 2vw,3.2rem)!important;line-height:1.2!important}
.l-section.width_full_with_indents.with_img>.l-section-img{inset:50% var(--photo-right) auto auto!important;transform:translateY(-50%);width:var(--photo-w)!important;height:auto!important;aspect-ratio:1209.6/669.6;background-size:158.73% 161.29%!important;background-position:100% 50%!important;border-radius:0 var(--r) var(--r) 0}
/* Desktop (Liang: like the home page's "We are Labiron" block): the photo at its natural size at
   1920px (shape 1209px wide) and scaled down below it; on wider screens it stays at that size, on
   the right edge of a centred 1920px frame. Text in a third of the page column without the theme's
   column padding (title right under the logo), titles max 44px, body text 3rem clear of the photo.
   Measured on all 13 pages, 1280-3440px: titles <= 3 lines (Gravimetric 4), text >= 42px from the photo. */
@media (min-width:1025px){
.l-section.width_full_with_indents.with_img{--photo-w:min(1209px,63vw);--photo-right:max(0px,calc((100% - 1920px) / 2));--r:clamp(0px,calc((100vw - 1920px) / 2),3rem)}
.l-section.width_full_with_indents.with_img .g-cols.cols_1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)!important}
.l-section.width_full_with_indents.with_img .g-cols.cols_1-2>.wpb_column:first-child{padding-left:0!important;padding-right:0!important}
.l-section.width_full_with_indents.with_img .g-cols.cols_1-2>.wpb_column:first-child :is(.wpb_text_column,ul){margin-right:3rem}
.l-section.width_full_with_indents.with_img h1{font-size:clamp(2.25rem,1rem + 1.6vw,2.75rem)!important}
}

/* Wide screens (> 1920px): the other background shapes, 1920x1080 images shown at their own size
   (labiron-row-bg-3/-about: shape at x 716-1919, bg-4: x 0-1203; all y 204-875), end inside the
   screen there in a straight cut. Shrink the background box to exactly the shape (same position as
   before) and round its cut-off side, like the top sections. Up to 1920px the image is wider than the
   screen and nothing changes. Also stops bg-4 repeating (some of those sections lack
   background-repeat:no-repeat). */
@media (min-width:1921px){
.l-section>.l-section-img:is([style*="labiron-row-bg-3."],[style*="labiron-row-bg-about."],[style*="labiron-row-bg-4."]){--r:clamp(0px,calc((100vw - 1920px) / 2),3rem);top:max(0px,calc(50% - 336px));bottom:max(0px,calc(50% - 336px));background-size:1920px 1080px!important;background-repeat:no-repeat!important}
.l-section>.l-section-img:is([style*="labiron-row-bg-3."],[style*="labiron-row-bg-about."]){left:calc(50% - 244px);right:max(0px,calc(50% - 960px));background-position:-716px center!important;border-radius:0 var(--r) var(--r) 0}
.l-section>.l-section-img[style*="labiron-row-bg-4."]{left:max(0px,calc(50% - 960px));right:calc(50% - 244px);background-position:right -716px center!important;border-radius:var(--r) 0 0 var(--r)}
}

/* Page titles, one look everywhere (consistency check 2026-10-22): the titles of pages without a
   photo (Contact, Privacy: h1.lb-h2; News) like the top-section titles: Exo bold, 32px on phones up
   to 44px. The phone top sections' titles had WordPress inline line heights of 44.8/48/67.2px on the
   same 32px font: all 1.2 now, like the home page. */
main h1.lb-h2,.news-top h1{font-weight:700!important;font-size:clamp(2rem,1rem + 1.6vw,2.75rem)!important;line-height:1.2!important}
.l-section.hide_on_default.hide_on_laptops.hide_on_tablets .vc_custom_heading:is(h1,h2){line-height:1.2!important}

/* Headings: the theme scales them with the screen width without limit (max(3rem,3vw) etc.).
   Above 1920px keep them at their 1920px size (Liang: on wide screens titles got extra big).
   Tablet and phone sizes are the theme's own and stay as they are. */
@media (min-width:1921px){:root{--h1-font-size:4.2rem;--h2-font-size:3.6rem;--h3-font-size:1.92rem;--h4-font-size:1.8rem;--h5-font-size:1.56rem;--h6-font-size:1.44rem}}

/* Full-screen-height bands: the theme makes .full_height sections as high as the screen, which left
   ~1000px of white space per band on tall screens. Cap them at 900px (the background shapes and
   top-section photos are at most 672px high, so they still fit). The home page's video section stays
   screen-high. */
.l-section.full_height{min-height:min(var(--viewport-height),900px)}
.header_hor .l-header.pos_fixed:not(.sticky_auto_hide)~.l-main .l-section.full_height:not(:first-of-type){min-height:min(calc(var(--viewport-height) - var(--header-sticky-height)),900px)}
.home .l-section.full_height:first-of-type{min-height:var(--viewport-height)}

/* Cookie consent (consent.js): the notice at the bottom, and placeholders for Google Maps / LinkedIn
   until the visitor accepts or clicks "Show …". */
.consent-bar{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1000;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;max-width:900px;margin:0 auto;padding:1.25rem 1.5rem;background:var(--brand-bg);color:var(--brand-text);border-radius:1rem;box-shadow:0 .5rem 2rem rgba(0,0,0,.2);font-size:.95rem;line-height:1.5}
.consent-bar[hidden]{display:none}
.consent-bar p{flex:1 1 320px;margin:0}
.consent-bar a{color:var(--brand-teal);font-weight:700}
.consent-buttons{display:flex;gap:.75rem}
.consent-decline{background:transparent;color:var(--brand-navy)!important;border:2px solid var(--brand-navy);border-radius:3rem;padding:.6em 1.3em;font-family:var(--brand-font-heading);font-weight:700}
.consent-decline:hover{background:var(--brand-navy);color:#fff!important}
.consent-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;min-height:300px;padding:2rem;text-align:center;background:var(--brand-bg-alt);border-radius:1rem}
.consent-placeholder p{margin:0;max-width:30rem}
.news-latest .consent-placeholder{min-height:var(--news-post-height,640px)}
.consent-map{min-height:300px}
.l-section[hidden]{display:none}

/* Merged top sections (.lb-merged): one section for all screens instead of a desktop section plus a
   phone-only copy. Its phone-only parts (photo, spacers) carry the theme's hide_on_default/laptops/
   tablets classes; on phones the section takes the old phone copy's layout: no background photo,
   height_huge padding, one column without the boxes' padding, title at the phone h1 size. */
@media (max-width:768px){
.l-section.lb-merged{min-height:0!important;padding-top:9vmax;padding-bottom:9vmax;display:block}
.l-section.lb-merged>.l-section-img{display:none}
.l-section.lb-merged>.l-section-h{padding-top:0!important}
.l-section.lb-merged.width_full_with_indents.with_img .g-cols.cols_1-2{grid-template-columns:1fr!important}
.l-section.lb-merged .g-cols>.vc_column_container{padding:0!important}
.l-section.lb-merged .g-cols>.vc_column_container+.vc_column_container{display:none}
.l-section.lb-merged.width_full_with_indents.with_img h1{font-size:var(--h1-font-size)!important;line-height:1.2!important}
}
/* Desktop/tablet: the hidden phone spacer before the title must not count as content above it
   (the theme gives a heading that isn't first in its column extra space on top). */
@media (min-width:769px){.l-section.lb-merged h1{padding-top:0}}
/* Merged bands (.lb-merged-band, home "We are Labiron"): on phones no background photo and no empty
   right column (the photo is a phone-only image above the title); on wider screens the hidden phone
   image must not count as content above the title. */
@media (max-width:768px){.l-section.lb-merged-band>.l-section-img{display:none}.l-section.lb-merged-band .g-cols>.vc_column_container+.vc_column_container{display:none}}
@media (min-width:769px){.l-section.lb-merged-band h2{padding-top:0}}
/* Merged content blocks (.lb-merged-content, tools/merge_phone_content.py): desktop = text + "Would you
   like to find out more?" left, accordion right. Phones keep the old phone copy's order: text, accordion,
   spacer, call-to-action. */
@media (max-width:768px){
.l-section.lb-merged-content>.l-section-h>.g-cols{display:flex;flex-direction:column;gap:0}
.l-section.lb-merged-content>.l-section-h>.g-cols>.wpb_column:first-child,
.l-section.lb-merged-content>.l-section-h>.g-cols>.wpb_column:first-child>.vc_column-inner{display:contents}
.l-section.lb-merged-content>.l-section-h>.g-cols>.wpb_column:first-child>.vc_column-inner>.g-cols{order:2;margin-top:calc(1rem + 2.5vw)}
.l-section.lb-merged-content>.l-section-h>.g-cols>.wpb_column:last-child{order:1}
}
/* Partners: logo + accordion and the call-to-action are two desktop sections; on phones they now take
   the old phone copy's spacing (one height_large section: logo, spacer, accordion, spacer, CTA). */
@media (max-width:768px){
.l-section.lb-partners-top{padding-top:6vmax;padding-bottom:0}
.l-section.lb-partners-top .g-cols{gap:calc(1rem + 2.5vw)}
.l-section.lb-partners-cta{padding-top:calc(1rem + 2.5vw);padding-bottom:6vmax}
.l-section.lb-partners-cta .g-cols>.vc_column_container+.vc_column_container{display:none}
}

/* Menu item "Careers" with a vacancy count (header templates; remove with the vacancy, see CLAUDE.md).
   A small teal circle next to the word, like a notification count; inline in the phone menu. */
.lb-menu-careers .w-nav-anchor{position:relative}
.lb-menu-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;margin-left:.3rem;padding:0 .3rem;border-radius:1rem;background:var(--brand-teal);color:#fff;font-family:var(--brand-font-heading);font-size:11px;font-weight:700;line-height:1;vertical-align:.45em;box-sizing:border-box}

/* Feature cards (home Solutions/Applications, blocks/solutions.html and blocks/applications.html; the
   rows carry .lb-cards-row). The description is always visible on the image (it used to appear only on
   hover, so phones never showed it); larger cards on wide screens; one title size; aligned buttons. */
.w-ibanner.animation_phorcys .w-ibanner-content{padding:12% 9% 9%!important}
.w-ibanner.animation_phorcys .w-ibanner-content:before{background:linear-gradient(rgba(12,14,74,0) 0%,rgba(12,14,74,.72) 45%,rgba(12,14,74,.9) 100%)}
.w-ibanner.animation_phorcys .w-ibanner-title{font-size:1.6rem!important;line-height:1.15}
.w-ibanner.animation_phorcys .w-ibanner-desc,
.w-ibanner.animation_phorcys:hover .w-ibanner-desc,
.w-ibanner.animation_phorcys:has(a:focus-visible) .w-ibanner-desc{opacity:1;line-height:1.45;margin-top:.5rem;color:#fff;font-size:15px}
.w-ibanner.animation_phorcys .w-ibanner-desc p{margin:0}
.w-ibanner.animation_phorcys .w-ibanner-image{bottom:0;transition:transform .5s ease}
.w-ibanner.animation_phorcys:hover .w-ibanner-image,
.w-ibanner.animation_phorcys:has(a:focus-visible) .w-ibanner-image{opacity:1;transform:scale(1.05)}
.w-ibanner.animation_phorcys:hover .w-ibanner-content:before,
.w-ibanner.animation_phorcys:has(a:focus-visible) .w-ibanner-content:before{opacity:1}
.w-ibanner.animation_phorcys:hover .w-ibanner-title,
.w-ibanner.animation_phorcys:has(a:focus-visible) .w-ibanner-title{color:#fff!important}
@media (prefers-reduced-motion:reduce){.w-ibanner.animation_phorcys .w-ibanner-image{transition:none}.w-ibanner.animation_phorcys:hover .w-ibanner-image{transform:none}}
.lb-cards-row .wpb_text_column p{font-size:18px}
.lb-cards-row .w-btn-wrapper{display:block}
.lb-cards-row .w-btn-wrapper .w-btn{width:100%;justify-content:center}
@media (min-width:1200px){
.g-cols.lb-cards-row.cols_1-2{grid-template-columns:1fr 3fr}
.g-cols.lb-cards-row.cols_2-1{grid-template-columns:3fr 1fr}
.lb-cards-row .g-cols.cols_3{gap:2rem}
}
/* Tablets: the intro above, the three cards side by side at full width (beside the intro they were
   only ~165px). Phones: one card per row, 4:3 instead of square so a card isn't taller than the screen. */
@media (min-width:769px) and (max-width:1199px){
.g-cols.lb-cards-row.cols_1-2,.g-cols.lb-cards-row.cols_2-1{grid-template-columns:1fr}
.lb-cards-row .g-cols.cols_3{gap:1.5rem}
.g-cols.lb-cards-row.reversed>div:last-of-type{order:-1}
}
@media (max-width:768px){.lb-cards-row .w-ibanner.ratio_1x1{aspect-ratio:4 / 3}}

/* Readability (design step 2): body text 17px (was 16px) and at most ~70 characters per line (full-width
   text ran to ~120). Only inside the content: the theme's html font-size drives every rem (headings,
   buttons, spacing), so --font-size is left alone. Text with its own size (cards, intros, forms) keeps it. */
.l-main{font-size:17px}
.l-main .wpb_text_column{max-width:70ch}

/* Home bands (design step 3): "We are Labiron" (.lb-merged-band) and the partner block
   (blocks/partner.html, .lb-partner-band) match Solutions/Applications: 18px intro, navy heading.
   The partner band no longer fills a whole screen for a logo and one paragraph (desktop/tablet). */
.lb-merged-band .wpb_text_column p,.lb-partner-band .wpb_text_column p{font-size:18px}
.lb-partner-band h2.vc_custom_heading{color:var(--brand-navy)!important}
.lb-partner-band .wpb_text_column strong{color:var(--brand-navy)}
@media (min-width:769px){.l-section.lb-partner-band{min-height:0!important;padding-top:6rem;padding-bottom:6rem}}

/* Product pages (design step 4; product, application and industry pages share this layout). Hero key
   features: a white check mark in a circle instead of a bullet. Action box button: mixed case 16px like
   every other pill (was UPPERCASE 14px). Accordions: navy titles, teal +/- and teal open item. */
.lb-merged .wpb_text_column ul{list-style:none;margin-left:0;padding-left:0}
.lb-merged .wpb_text_column ul li{position:relative;padding-left:2rem;margin-bottom:.5rem}
.lb-merged .wpb_text_column ul li::before{content:'';position:absolute;left:0;top:.3em;width:1.25em;height:1.25em;border:2px solid currentColor;border-radius:50%;box-sizing:border-box}
.lb-merged .wpb_text_column ul li::after{content:'';position:absolute;left:.45em;top:.55em;width:.35em;height:.6em;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg)}
.l-main .w-actionbox .w-btn{text-transform:none;font-size:16px}
.l-main .w-tabs.accordion .w-tabs-section-header{color:var(--brand-navy)}
.l-main .w-tabs.accordion .w-tabs-section-control{color:var(--brand-teal)}
.l-main .w-tabs.accordion>div>.w-tabs-section.active>.w-tabs-section-header{color:var(--brand-teal)!important}
.l-main .w-tabs.accordion .w-tabs-section.active>.w-tabs-section-header .w-tabs-section-control{position:relative;transform:none}
.l-main .w-tabs-sections.icon_plus>.w-tabs-section.active>.w-tabs-section-header .w-tabs-section-control:before{display:none}