/* =========================================================================
   Water Concept — main stylesheet
   Built on the Water Concept design system (logo sheet colours + Montserrat).
   Sections: 1. Tokens  2. Base  3. Layout  4. Header  5. Blocks
             6. Cards & grids  7. Product  8. Forms  9. Footer  10. Utilities
   ========================================================================= */

/* 1. Tokens ------------------------------------------------------------- */
:root{
  --wc-navy:#003589;--wc-cyan:#00A8E5;--wc-blue:#0754A8;
  --wc-gradient:linear-gradient(135deg,#00A8E5 0%,#0754A8 100%);
  --wc-gradient-soft:linear-gradient(135deg,#e8f6fd 0%,#dbe9f8 100%);
  --wc-cyan-100:#e6f6fd;--wc-cyan-200:#bfe9f9;--wc-cyan-600:#0090c6;
  --wc-blue-100:#e6eef8;--wc-navy-900:#001c48;
  --wc-ink:#1D1D1B;--wc-grey-700:#4a4a48;--wc-grey-500:#868686;
  --wc-grey-300:#c8ccd2;--wc-grey-200:#e4e9ef;--wc-mist:#F4F8FC;
  --wc-font:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --wc-container:1200px;--wc-gutter:24px;--wc-section:96px;--wc-content-pad:64px;
  --wc-r-sm:6px;--wc-r-md:10px;--wc-r-lg:18px;--wc-r-pill:999px;
  --wc-shadow-xs:0 1px 2px rgba(0,53,137,.06);
  --wc-shadow-sm:0 2px 8px rgba(0,53,137,.08);
  --wc-shadow-md:0 8px 24px rgba(0,53,137,.10);
  --wc-shadow-lg:0 18px 48px rgba(0,53,137,.14);
  --wc-shadow-brand:0 12px 28px rgba(0,168,229,.28);
  --wc-ease:cubic-bezier(.22,.61,.36,1);--wc-dur:220ms;--wc-dur-fast:140ms;
  --wc-overlay-photo:linear-gradient(180deg,rgba(0,28,72,.62) 0%,rgba(0,28,72,.30) 45%,rgba(0,28,72,.70) 100%);
  --wc-overlay-brand:linear-gradient(135deg,rgba(0,168,229,.90),rgba(7,84,168,.94));
}

/* 2. Base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:400 17px/1.7 var(--wc-font);color:var(--wc-ink);background:#fff;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5{margin:0 0 .5em;color:var(--wc-navy);line-height:1.15}
h1{font-weight:800;font-size:clamp(34px,4vw,48px);text-transform:uppercase;letter-spacing:-.01em}
h2{font-weight:800;font-size:clamp(26px,2.6vw,36px)}
h3{font-weight:700;font-size:24px;line-height:1.35}
h4{font-weight:600;font-size:20px;line-height:1.35}
p{margin:0 0 1rem}
a{color:var(--wc-blue);text-decoration:none;transition:color var(--wc-dur) var(--wc-ease)}
a:hover{color:var(--wc-navy)}
img{max-width:100%;height:auto;display:block}
ul,ol{padding-left:1.2em}
:focus-visible{outline:3px solid rgba(0,168,229,.45);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.wc-skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#fff;padding:12px 18px;border-radius:0 0 var(--wc-r-md) 0}
.wc-skip-link:focus{left:0}

/* 3. Layout ------------------------------------------------------------- */
.wc-container{width:100%;max-width:var(--wc-container);margin-inline:auto;padding-inline:var(--wc-gutter)}
.wc-section{padding-block:var(--wc-section)}
.wc-content{padding-block:var(--wc-content-pad);display:flow-root}
.wc-content--narrow{max-width:820px}
.wc-content>*+*{margin-top:28px}

/* Band blocks are always full-bleed, even when the editor drops them inside a
   contained content area (page.php, single-produit.php, page-contact.php). */
.wc-content>.wc-hero,
.wc-content>.wc-pagehead,
.wc-content>.wc-cta{margin-inline:calc(50% - 50vw);width:auto}
.wc-content>.wc-pagehead:first-child{margin-top:calc(-1 * var(--wc-content-pad))}
/* A band that closes the page sits flush against the footer — otherwise the
   container's bottom padding shows through as a white strip under it. */
.wc-content>.wc-hero:last-child,
.wc-content>.wc-pagehead:last-child,
.wc-content>.wc-cta:last-child{margin-bottom:calc(-1 * var(--wc-content-pad))}

/* front-page.php composes blocks with no container: constrain ordinary blocks
   to the grid, leave the band blocks edge to edge. Scoped under .wc-main so
   these win over the per-block margin resets further down this file. */
.wc-main .wc-flow>*{max-width:var(--wc-container);margin-inline:auto;padding-inline:var(--wc-gutter)}
.wc-main .wc-flow>.wc-hero,
.wc-main .wc-flow>.wc-pagehead,
.wc-main .wc-flow>.wc-cta{max-width:none;padding-inline:0}
.wc-main .wc-flow>*+*{margin-top:72px}
.wc-main .wc-flow>.wc-heading+*{margin-top:0}
.wc-main .wc-flow>*+.wc-cta,
.wc-main .wc-flow>*+.wc-hero{margin-top:96px}
/* A section heading spans the grid; only its text keeps the reading measure,
   so left-aligned headings line up with the blocks beneath them. */
.wc-main .wc-flow>.wc-heading{max-width:var(--wc-container)}
.wc-heading__title,.wc-heading__lead{max-width:780px}
/* Negative bleed margins must never create a horizontal scrollbar.
   clip (not hidden) keeps the sticky header working. */
body{overflow-x:clip}
.wc-eyebrow{display:inline-block;font-weight:700;font-size:13px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;color:var(--wc-blue)}
.wc-eyebrow--light{color:#fff;opacity:.9}
.wc-rule{display:block;width:64px;height:4px;border-radius:2px;background:var(--wc-gradient)}
.wc-notice{padding:16px 20px;border-radius:var(--wc-r-md);background:var(--wc-mist);color:var(--wc-grey-700);font-size:15px}
.wc-icon{stroke-width:2;flex:0 0 auto}

/* Buttons */
.wc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 30px;border:0;border-radius:var(--wc-r-pill);font-weight:700;font-size:15px;line-height:1;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform var(--wc-dur-fast) var(--wc-ease),box-shadow var(--wc-dur) var(--wc-ease),background var(--wc-dur) var(--wc-ease),color var(--wc-dur) var(--wc-ease)}
.wc-btn--sm{padding:10px 20px;font-size:13px}
.wc-btn--primary{background:var(--wc-gradient);color:#fff;box-shadow:var(--wc-shadow-brand)}
.wc-btn--primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,168,229,.36)}
.wc-btn--secondary{background:var(--wc-navy);color:#fff}
.wc-btn--secondary:hover{color:#fff;transform:translateY(-2px);background:#00256b}
/* Only the outline variants carry a real border. Their padding is reduced by
   the 2px ring so the box stays the same size as a solid button next to it. */
.wc-btn--outline,.wc-btn--ghost-light{border:2px solid;padding:13px 28px}
.wc-btn--sm.wc-btn--outline,.wc-btn--sm.wc-btn--ghost-light{padding:8px 18px}
.wc-btn--outline{background:transparent;color:var(--wc-navy);border-color:var(--wc-navy)}
.wc-btn--outline:hover{background:var(--wc-navy);color:#fff;transform:translateY(-2px)}
.wc-btn--on-dark{background:#fff;color:var(--wc-navy)}
.wc-btn--on-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.wc-btn--ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.wc-btn--ghost-light:hover{background:rgba(255,255,255,.14);color:#fff}
.wc-btn:active{transform:translateY(0)}

.wc-link-arrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.wc-link-arrow::after{content:"→";transition:transform var(--wc-dur) var(--wc-ease)}
.wc-link-arrow:hover::after{transform:translateX(4px)}

/* 4. Header ------------------------------------------------------------- */
.wc-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.1) blur(14px);box-shadow:var(--wc-shadow-xs);transition:box-shadow var(--wc-dur) var(--wc-ease),background var(--wc-dur) var(--wc-ease)}
.wc-header.is-scrolled{box-shadow:var(--wc-shadow-sm)}
.wc-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:96px;transition:height var(--wc-dur) var(--wc-ease)}
.wc-header.is-scrolled .wc-header__inner{height:76px}
.wc-logo{display:inline-flex;align-items:center;gap:12px}
.wc-logo img,.wc-logo__mark{height:52px;width:auto;transition:transform var(--wc-dur) var(--wc-ease),height var(--wc-dur) var(--wc-ease)}
.wc-logo__type{display:flex;flex-direction:column;gap:3px}
.wc-logo__word{font-weight:800;font-size:30px;line-height:.95;letter-spacing:-.01em;color:var(--wc-navy)}
.wc-logo__sub{font-weight:300;font-size:9px;line-height:1;letter-spacing:.34em;text-transform:uppercase;color:var(--wc-blue);margin-left:.2em}
.wc-logo--white .wc-logo__word{color:#fff}
.wc-logo--white .wc-logo__sub{color:rgba(255,255,255,.85)}
.wc-header.is-scrolled .wc-logo img,.wc-header.is-scrolled .wc-logo__mark{height:44px}
.wc-header.is-scrolled .wc-logo__word{font-size:26px}
.wc-logo:hover img,.wc-logo:hover .wc-logo__mark{transform:scale(1.05) rotate(-3deg)}
.wc-header__actions{display:flex;align-items:center;gap:14px}

.wc-nav__list{display:flex;align-items:center;gap:26px;margin:0;padding:0;list-style:none}
.wc-nav__item{position:relative}
.wc-nav__link{display:inline-flex;align-items:center;gap:4px;padding:6px 0;font-weight:600;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--wc-navy);white-space:nowrap}
.wc-nav__label{position:relative}
.wc-nav__label::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--wc-gradient);transform:scaleX(0);transform-origin:left;transition:transform var(--wc-dur) var(--wc-ease)}
.wc-nav__link:hover .wc-nav__label::after,.current-menu-item>.wc-nav__link .wc-nav__label::after{transform:scaleX(1)}
.wc-nav__link:hover{color:var(--wc-cyan-600)}
.current-menu-item>.wc-nav__link{color:var(--wc-cyan-600)}
.wc-nav__submenu{position:absolute;top:100%;left:-16px;min-width:240px;margin:0;padding:10px;list-style:none;background:#fff;border-radius:var(--wc-r-md);box-shadow:var(--wc-shadow-md);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--wc-dur) var(--wc-ease),transform var(--wc-dur) var(--wc-ease),visibility var(--wc-dur)}
.wc-nav__item--parent:hover>.wc-nav__submenu,.wc-nav__item--parent.is-open>.wc-nav__submenu{opacity:1;visibility:visible;transform:translateY(0)}
.wc-nav__submenu .wc-nav__link{display:block;padding:10px 14px;border-radius:var(--wc-r-sm);text-transform:none;letter-spacing:0;font-size:15px}
.wc-nav__submenu .wc-nav__link:hover{background:var(--wc-mist)}
.wc-nav__toggle{display:none;background:none;border:0;cursor:pointer;color:var(--wc-navy)}
.wc-nav__mobile-extra{display:none}
/* Drawer CTA: only rendered where the header button is hidden (<=640px),
   so the same call to action never appears twice at once. */
.wc-nav__cta{display:none}

.wc-phone{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:var(--wc-navy);white-space:nowrap}
.wc-phone:hover{color:var(--wc-cyan-600)}
.wc-phone .wc-icon{color:var(--wc-cyan)}

.wc-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;background:none;border:0;border-radius:var(--wc-r-pill);cursor:pointer;transition:background var(--wc-dur) var(--wc-ease),transform var(--wc-dur) var(--wc-ease)}
.wc-burger span{display:block;width:100%;height:2px;background:var(--wc-navy);border-radius:2px;/* width is stated explicitly (not left to the flex stretch) so the hover
   transition has two definite endpoints — auto -> % cannot animate. */
transition:transform var(--wc-dur) var(--wc-ease),opacity var(--wc-dur-fast) var(--wc-ease),background var(--wc-dur-fast) var(--wc-ease),width var(--wc-dur) var(--wc-ease)}
.wc-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.wc-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.wc-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hover — a cyan-tinted disc fades in behind the icon and the bars warm to
   brand blue, matching the treatment already used on the social buttons. */
.wc-burger:hover{background:var(--wc-cyan-100)}
.wc-burger:hover span{background:var(--wc-blue)}
/* Closed: the middle bar draws back, hinting the panel is about to open. */
.wc-burger[aria-expanded="false"]:hover span:nth-child(2){width:58%}
/* Open: the cross turns a quarter. Because an X is symmetrical it lands on
   itself, so the motion reads as a spin in place rather than a state change. */
.wc-burger[aria-expanded="true"]:hover{transform:rotate(90deg)}
.wc-burger[aria-expanded="true"]:hover span{background:var(--wc-cyan-600)}
/* Press settles back to rest, per the motion rules — no shrink. */
.wc-burger:active{transform:none}
.wc-burger[aria-expanded="true"]:active{transform:rotate(90deg)}

/* Breadcrumbs */
.wc-breadcrumbs{padding-block:14px;background:var(--wc-mist);font-size:13px;color:var(--wc-grey-500)}
.wc-breadcrumbs a{color:var(--wc-grey-700)}
.wc-breadcrumbs a:hover{color:var(--wc-blue)}
.wc-breadcrumbs__sep{padding-inline:8px;color:var(--wc-grey-300)}

/* 5. Blocks ------------------------------------------------------------- */
.wc-hero{position:relative;display:grid;place-items:center;background:var(--wc-gradient);background-size:cover;background-position:center;color:#fff;overflow:hidden}
.wc-hero--large{min-height:620px}
.wc-hero--medium{min-height:460px}
.wc-hero--small{min-height:320px}
.wc-hero__overlay{position:absolute;inset:0;background:var(--wc-overlay-brand)}
.wc-hero.has-image .wc-hero__overlay{background:var(--wc-overlay-photo)}
.wc-hero__inner{position:relative;display:flex;flex-direction:column;gap:22px;align-items:center;text-align:center;padding-block:96px;animation:wc-rise .7s var(--wc-ease) both}
.wc-hero--left .wc-hero__inner{align-items:flex-start;text-align:left}
.wc-hero__title{color:#fff;font-size:clamp(40px,5.6vw,68px);line-height:1.05;text-transform:uppercase;margin:0;max-width:16ch}
.wc-hero__lead{font-size:20px;line-height:1.6;color:rgba(255,255,255,.94);margin:0;max-width:60ch}
.wc-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
@keyframes wc-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.wc-pagehead{position:relative;padding-block:80px;background:var(--wc-navy);background-size:cover;background-position:center;color:#fff}
.wc-pagehead.has-image::before{content:"";position:absolute;inset:0;background:var(--wc-overlay-photo)}
.wc-pagehead>*{position:relative}
.wc-pagehead--slim{padding-block:56px}
.wc-pagehead__title{color:#fff;margin:.2em 0 0}
.wc-pagehead__lead{margin-top:14px;font-size:19px;color:rgba(255,255,255,.88);max-width:70ch}

.wc-heading{display:flex;flex-direction:column;gap:14px;max-width:780px;margin-bottom:40px}
.wc-heading--center{margin-inline:auto;text-align:center;align-items:center}
.wc-heading__title{margin:0;text-transform:uppercase}
.wc-heading__lead{margin:0;font-size:19px;color:var(--wc-grey-700)}

.wc-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-block:24px}
.wc-pillar{display:flex;flex-direction:column;background:#fff;border-radius:var(--wc-r-lg);overflow:hidden;box-shadow:var(--wc-shadow-sm);transition:transform var(--wc-dur) var(--wc-ease),box-shadow var(--wc-dur) var(--wc-ease)}
.wc-pillar:hover{transform:translateY(-6px);box-shadow:var(--wc-shadow-lg)}
.wc-pillar__media{aspect-ratio:16/10;background:var(--wc-gradient-soft);display:grid;place-items:center;overflow:hidden}
.wc-pillar__media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--wc-ease)}
.wc-pillar:hover .wc-pillar__media img{transform:scale(1.05)}
.wc-pillar__icon{display:grid;place-items:center;width:76px;height:76px;border-radius:var(--wc-r-pill);background:#fff;color:var(--wc-blue);box-shadow:var(--wc-shadow-sm)}
.wc-pillar__body{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:32px}
.wc-pillar__title{margin:0;text-transform:uppercase;font-size:22px}
.wc-pillar__tagline{margin:0;font-weight:600;color:var(--wc-blue)}
.wc-pillar__text{margin:0;font-size:15px;color:var(--wc-grey-700)}

.wc-features{display:grid;grid-template-columns:repeat(var(--wc-cols,4),1fr);gap:24px}
.wc-feature{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:var(--wc-r-lg);background:#fff;box-shadow:var(--wc-shadow-sm);transition:transform var(--wc-dur) var(--wc-ease),box-shadow var(--wc-dur) var(--wc-ease)}
.wc-feature:hover{transform:translateY(-4px);box-shadow:var(--wc-shadow-md)}
.wc-feature--brand{background:var(--wc-gradient);color:#fff;box-shadow:var(--wc-shadow-brand)}
.wc-feature--brand .wc-feature__title{color:#fff}
.wc-feature--brand .wc-feature__icon{background:rgba(255,255,255,.18);color:#fff}
.wc-feature__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--wc-r-pill);background:var(--wc-cyan-100);color:var(--wc-blue)}
.wc-feature__title{margin:0;font-size:20px;font-weight:600}
.wc-feature__text{margin:0;font-size:15px;line-height:1.65;color:inherit;opacity:.92}

.wc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:32px;padding:44px 36px;border-radius:var(--wc-r-lg);background:var(--wc-gradient);color:#fff}
.wc-stats--light{background:var(--wc-mist);color:var(--wc-navy)}
.wc-stat{display:flex;flex-direction:column;gap:6px}
.wc-stat__value{font-weight:800;font-size:44px;line-height:1}
.wc-stat__label{font-size:15px;opacity:.9}

.wc-cta{background:var(--wc-navy);color:#fff;padding-block:88px}
.wc-cta--gradient{background:var(--wc-gradient)}
.wc-cta--light{background:var(--wc-mist);color:var(--wc-navy)}
.wc-cta__inner{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.wc-cta__title{color:inherit;margin:0;text-transform:uppercase;max-width:22ch}
.wc-cta__lead{margin:0;font-size:19px;max-width:60ch;opacity:.9}

.wc-quote{margin:0;padding:36px 44px;border-radius:var(--wc-r-lg);background:var(--wc-mist);display:flex;flex-direction:column;gap:14px}
.wc-quote__mark{font-weight:800;font-size:40px;line-height:1;color:var(--wc-cyan)}
.wc-quote__text{margin:0;font-style:italic;font-size:19px;line-height:1.65;color:var(--wc-grey-700)}
.wc-quote__source{font-size:15px;color:var(--wc-grey-500)}

.wc-split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.wc-split--media-left .wc-split__body{order:2}
.wc-split__body{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.wc-split__title{margin:0;text-transform:uppercase}
.wc-split__media img{border-radius:var(--wc-r-lg);box-shadow:var(--wc-shadow-md)}

/* 6. Cards & grids ------------------------------------------------------ */
.wc-grid{display:grid;grid-template-columns:repeat(var(--wc-cols,3),1fr);gap:26px}
.wc-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--wc-r-lg);overflow:hidden;box-shadow:var(--wc-shadow-sm);transition:transform var(--wc-dur) var(--wc-ease),box-shadow var(--wc-dur) var(--wc-ease);height:100%}
.wc-card:hover{transform:translateY(-4px);box-shadow:var(--wc-shadow-lg)}
.wc-card__media{display:block;aspect-ratio:4/3;background:var(--wc-gradient-soft);overflow:hidden;display:grid;place-items:center}
.wc-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--wc-ease)}
.wc-card:hover .wc-card__media img{transform:scale(1.06)}
.wc-card__placeholder{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--wc-blue);opacity:.55}
.wc-card__body{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:26px}
.wc-card__title{margin:0;font-size:19px;font-weight:700;line-height:1.3}
.wc-card__title a{color:var(--wc-navy)}
.wc-card__title a:hover{color:var(--wc-cyan-600)}
.wc-card__meta{margin:0;font-size:14px;font-weight:600;color:var(--wc-cyan-600)}
.wc-card__excerpt{margin:0;font-size:15px;color:var(--wc-grey-700)}
.wc-card__body .wc-link-arrow{margin-top:8px}

.wc-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.wc-chip{padding:9px 18px;border:0;border-radius:var(--wc-r-sm);background:var(--wc-mist);color:var(--wc-grey-700);font:500 14px/1 var(--wc-font);cursor:pointer;box-shadow:inset 0 0 0 1px var(--wc-grey-200);transition:background var(--wc-dur) var(--wc-ease),color var(--wc-dur) var(--wc-ease),transform var(--wc-dur-fast) var(--wc-ease)}
.wc-chip:hover{transform:translateY(-2px);color:var(--wc-navy)}
.wc-chip.is-active{background:var(--wc-navy);color:#fff;box-shadow:none}
.wc-grid__cell.is-hidden{display:none}

.wc-related{padding-block:56px}
.wc-related__title,.wc-news__title{text-transform:uppercase;margin-bottom:28px}

/* 7. Product ------------------------------------------------------------ */
.wc-producthero{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;padding-block:24px}
.wc-producthero__media img{border-radius:var(--wc-r-lg);box-shadow:var(--wc-shadow-md);cursor:zoom-in;transition:transform var(--wc-dur) var(--wc-ease)}
.wc-producthero__media img:hover{transform:scale(1.01)}
.wc-producthero__body{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.wc-producthero__title{margin:0}
.wc-producthero__meta{display:flex;flex-wrap:wrap;gap:18px;margin:0;padding:0;list-style:none}
.wc-producthero__meta li{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--wc-blue)}
.wc-producthero__lead{margin:0;font-size:19px;color:var(--wc-grey-700)}

.wc-specs{padding-block:16px}
.wc-specs__title{text-transform:uppercase}
.wc-specs__scroll{overflow-x:auto;border-radius:var(--wc-r-lg);box-shadow:var(--wc-shadow-sm)}
.wc-table{width:100%;border-collapse:collapse;background:#fff;font-size:15px}
.wc-table th{background:var(--wc-navy);color:#fff;text-align:left;padding:14px 18px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.wc-table td{padding:14px 18px;border-top:1px solid var(--wc-grey-200)}
.wc-table tbody tr{transition:background var(--wc-dur-fast) var(--wc-ease)}
.wc-table tbody tr:hover{background:var(--wc-mist)}

.wc-gallery{margin:0;--wc-cols:3}
.wc-gallery__title{font-weight:700;font-size:20px;color:var(--wc-navy);margin-bottom:18px}
.wc-gallery__grid{display:grid;grid-template-columns:repeat(var(--wc-cols,3),1fr);gap:16px}
.wc-gallery__item{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--wc-r-md);overflow:hidden;box-shadow:var(--wc-shadow-sm)}
.wc-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform 600ms var(--wc-ease)}
.wc-gallery__item:hover img{transform:scale(1.06)}
.wc-gallery__zoom{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--wc-r-pill);background:rgba(255,255,255,.92);color:var(--wc-navy);opacity:0;transform:translateY(6px);transition:opacity var(--wc-dur) var(--wc-ease),transform var(--wc-dur) var(--wc-ease)}
.wc-gallery__item:hover .wc-gallery__zoom{opacity:1;transform:none}

.wc-downloads{padding-block:16px}
.wc-downloads__title{text-transform:uppercase}
.wc-downloads__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.wc-download{display:flex;align-items:center;gap:14px;padding:18px 22px;border-radius:var(--wc-r-md);background:var(--wc-mist);color:var(--wc-navy);font-weight:600;transition:background var(--wc-dur) var(--wc-ease),transform var(--wc-dur-fast) var(--wc-ease),box-shadow var(--wc-dur) var(--wc-ease)}
.wc-download:hover{background:#fff;box-shadow:var(--wc-shadow-md);transform:translateX(4px)}
.wc-download__icon{color:var(--wc-cyan)}
.wc-download__label{flex:1}
.wc-download__size{font-weight:400;font-size:14px;color:var(--wc-grey-500)}

/* 8. Forms -------------------------------------------------------------- */
.wc-form-block{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;padding:44px;border-radius:var(--wc-r-lg);background:var(--wc-mist)}
.wc-form-block__title{text-transform:uppercase;margin-top:0}
.wc-form-block__context{padding:12px 16px;border-radius:var(--wc-r-md);background:#fff;font-size:15px}
.wc-form-block__form{background:#fff;border-radius:var(--wc-r-lg);padding:32px;box-shadow:var(--wc-shadow-sm)}
.wc-searchform{display:flex;gap:12px;margin-bottom:32px}
.wc-searchform__input{flex:1;padding:14px 16px;border:1.5px solid var(--wc-grey-200);border-radius:var(--wc-r-md);font:400 17px/1.5 var(--wc-font)}
.wc-searchform__input:focus{border-color:var(--wc-cyan);outline:none;box-shadow:0 0 0 4px rgba(0,168,229,.25)}

/* Ninja Forms — brand skin */
.nf-form-content input[type=text],.nf-form-content input[type=email],.nf-form-content input[type=tel],
.nf-form-content textarea,.nf-form-content select{width:100%;padding:14px 16px!important;border:1.5px solid var(--wc-grey-200)!important;border-radius:var(--wc-r-md)!important;font:400 16px/1.5 var(--wc-font)!important;color:var(--wc-ink)!important;background:#fff!important;transition:border-color var(--wc-dur) var(--wc-ease),box-shadow var(--wc-dur) var(--wc-ease)}
/* Field focus ring — excludes the submit button, which keeps its own
   brand shadow and outline (see below). */
.nf-form-content input:not([type=submit]):not([type=button]):focus,
.nf-form-content textarea:focus,
.nf-form-content select:focus{border-color:var(--wc-cyan)!important;box-shadow:0 0 0 4px rgba(0,168,229,.25)!important;outline:none}
.nf-form-content .nf-field-label label{font-weight:600!important;color:var(--wc-navy)!important;font-size:14px!important}
/* Submit button — matches .wc-btn--primary.
   Ninja Forms 3.x renders it as input[type=submit]; the 2.x markup used
   input[type=button]. Both are covered so the styling survives either. */
.nf-form-content input[type=submit],
.nf-form-content input[type=button],
.nf-form-content button[type=submit]{
	display:inline-block;width:auto;height:auto!important;
	background:var(--wc-gradient)!important;
	color:#fff!important;
	border:0!important;
	border-radius:var(--wc-r-pill)!important;
	padding:15px 30px!important;
	font:700 15px/1 var(--wc-font)!important;
	letter-spacing:.08em!important;
	text-transform:uppercase!important;
	box-shadow:var(--wc-shadow-brand);
	cursor:pointer;
	transition:transform var(--wc-dur-fast) var(--wc-ease),box-shadow var(--wc-dur) var(--wc-ease);
	text-wrap-mode: wrap;
}
.nf-form-content input[type=submit]:hover,
.nf-form-content input[type=button]:hover,
.nf-form-content button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,168,229,.36)}
.nf-form-content input[type=submit]:active,
.nf-form-content input[type=button]:active,
.nf-form-content button[type=submit]:active{transform:translateY(0)}
.nf-form-content input[type=submit]:focus-visible,
.nf-form-content input[type=button]:focus-visible,
.nf-form-content button[type=submit]:focus-visible{outline:3px solid rgba(0,168,229,.45);outline-offset:2px}
.nf-form-content input[type=submit]:disabled,
.nf-form-content input[type=button]:disabled{opacity:.6;transform:none;cursor:default}

/* Contact info block */
.wc-contactinfo__title{text-transform:uppercase}
.wc-contactinfo__list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:14px}
.wc-contactinfo__list a{color:var(--wc-ink);font-weight:600}
.wc-contactinfo__list a:hover{color:var(--wc-cyan-600)}
.wc-contactinfo__list .wc-icon{color:var(--wc-cyan)}
.wc-contactinfo__list p{margin:0}
/* The li only wraps; .wc-iconrow is the grid, so labels line up whether the
   row is a link or plain text. Mirrors the footer contact list. */
.wc-contactinfo__list li{display:block}
.wc-contactinfo__list .wc-iconrow{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;white-space:normal}
.wc-contactinfo__list .wc-iconrow>.wc-icon{width:18px;height:18px;margin-top:.3em}
.wc-contactinfo__list .wc-iconrow>span{min-width:0}
/* Two classes so this survives the generic `.wc-social{margin:0}` further
   down the file, without needing !important. */
.wc-contactinfo .wc-contactinfo__social{margin-top:22px}
.wc-contactinfo__map{margin-top:22px;border-radius:var(--wc-r-lg);overflow:hidden;box-shadow:var(--wc-shadow-sm)}
.wc-contactinfo__map iframe{display:block;width:100%;min-height:320px;border:0}

/* Social */
.wc-social{display:flex;gap:10px;margin:0;padding:0;list-style:none}
.wc-social__link{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--wc-r-pill);background:var(--wc-mist);color:var(--wc-navy);transition:transform var(--wc-dur) var(--wc-ease),background var(--wc-dur) var(--wc-ease),color var(--wc-dur) var(--wc-ease)}
.wc-social__link:hover{background:var(--wc-gradient);color:#fff;transform:translateY(-3px)}
.wc-social--footer .wc-social__link{background:rgba(255,255,255,.12);color:#fff}
.wc-social--footer .wc-social__link:hover{background:#fff;color:var(--wc-navy)}

/* 9. Footer ------------------------------------------------------------- */
.wc-footer{background:var(--wc-navy);color:rgba(255,255,255,.82);padding-top:80px;padding-bottom:28px;margin-top:0}
.wc-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:56px}
.wc-footer__col--brand{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.wc-footer .wc-logo img,.wc-footer .wc-logo__mark{height:64px}
.wc-footer .wc-logo__word{font-size:34px}
.wc-footer__title{color:#fff;font-size:18px;margin-bottom:18px}
.wc-footer__tagline{font-size:15px;line-height:1.7}
.wc-footer__menu,.wc-footer__contact,.wc-footer__legal-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:15px}
/* The li is only a wrapper; .wc-iconrow (on the li or on the link inside it)
   is the two-column grid, so every label starts on the same vertical line and
   wrapped lines stay in the text column instead of sliding under the icon. */
.wc-footer__contact li{display:block}
.wc-footer__contact .wc-iconrow{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;white-space:normal}
.wc-footer__contact .wc-iconrow>.wc-icon{width:18px;height:18px;margin-top:.32em}
.wc-footer__contact .wc-iconrow>span{min-width:0}
.wc-footer a{color:rgba(255,255,255,.82)}
.wc-footer a:hover{color:#fff}
.wc-footer .wc-icon{color:var(--wc-cyan)}
.wc-footer .wc-phone{color:rgba(255,255,255,.9)}
.wc-footer .wc-phone:hover{color:#fff}
.wc-footer__menu a{position:relative;display:inline-block;transition:transform var(--wc-dur) var(--wc-ease)}
.wc-footer__menu a:hover{transform:translateX(4px)}
/* Second level (the ranges under Nos Solutions): set in by a hairline so the
   grouping reads at a glance without a heading. */
.wc-footer__menu .sub-menu{list-style:none;display:flex;flex-direction:column;gap:9px;margin:10px 0 2px;padding:0 0 0 14px;border-left:1px solid rgba(255,255,255,.18)}
.wc-footer__menu .sub-menu a{font-size:14px;opacity:.82}
.wc-footer__menu .sub-menu a:hover{opacity:1}
/* The map link is a button, not another line in the contact list.
   Scoped to .wc-footer so it beats the generic `.wc-footer a` colour rule,
   which would otherwise paint the label white on a white pill. */
.wc-footer .wc-footer__map{margin-top:20px;color:var(--wc-navy)}
.wc-footer .wc-footer__map:hover{color:var(--wc-navy)}
.wc-footer .wc-footer__map .wc-icon{color:currentColor}
.wc-footer__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:56px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);font-size:14px;opacity:.8}
.wc-footer__legal-menu{flex-direction:row;gap:22px}

/* 10. 404, results, utilities ------------------------------------------- */
.wc-404{padding-block:120px;background:var(--wc-mist)}
.wc-404__inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.wc-404__code{font-weight:800;font-size:clamp(80px,14vw,160px);line-height:1;background:var(--wc-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.wc-404__search{width:100%;max-width:520px}

.wc-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.wc-result{padding:26px 30px;background:#fff;border-radius:var(--wc-r-lg);box-shadow:var(--wc-shadow-sm);transition:transform var(--wc-dur) var(--wc-ease),box-shadow var(--wc-dur) var(--wc-ease)}
.wc-result:hover{transform:translateY(-3px);box-shadow:var(--wc-shadow-md)}
.wc-result__title{margin:6px 0 8px;font-size:22px}

.wc-post__media img{border-radius:var(--wc-r-lg);margin-top:-48px;box-shadow:var(--wc-shadow-lg)}
.wc-post__nav{display:flex;justify-content:space-between;gap:24px;padding-bottom:72px;font-weight:600}
.wc-legal h2{margin-top:2em}
.wc-pagelinks{display:flex;gap:10px}

/* Reveal-on-scroll animation (progressive enhancement, see main.js) */
.wc-reveal{opacity:0;transform:translateY(20px)}
.wc-reveal.is-visible{opacity:1;transform:none;transition:opacity 600ms var(--wc-ease),transform 600ms var(--wc-ease)}

/* Lightbox */
.wc-lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;background:rgba(0,28,72,.92);opacity:0;visibility:hidden;transition:opacity var(--wc-dur) var(--wc-ease),visibility var(--wc-dur)}
.wc-lightbox.is-open{opacity:1;visibility:visible}
.wc-lightbox__figure{margin:0;max-width:min(1200px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:14px;align-items:center}
.wc-lightbox__image{max-width:100%;max-height:78vh;border-radius:var(--wc-r-md);box-shadow:0 30px 80px rgba(0,0,0,.45);animation:wc-zoom .32s var(--wc-ease)}
@keyframes wc-zoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.wc-lightbox__caption{color:rgba(255,255,255,.86);font-size:15px;text-align:center}
.wc-lightbox__btn{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:var(--wc-r-pill);background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background var(--wc-dur) var(--wc-ease),transform var(--wc-dur-fast) var(--wc-ease)}
.wc-lightbox__btn:hover{background:rgba(255,255,255,.28);transform:scale(1.06)}
.wc-lightbox__close{top:24px;right:24px}
.wc-lightbox__prev{left:24px;top:50%;transform:translateY(-50%)}
.wc-lightbox__next{right:24px;top:50%;transform:translateY(-50%)}
.wc-lightbox__prev:hover,.wc-lightbox__next:hover{transform:translateY(-50%) scale(1.06)}
.wc-lightbox__counter{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.8);font-size:14px;letter-spacing:.08em}

/* Responsive ------------------------------------------------------------ */
/* The desktop header row (logo + 6 items + phone + CTA) needs ~1100px. */
@media (max-width:1100px){
  .wc-phone--header{display:none}
  .wc-nav__list{gap:18px}
}
@media (max-width:1024px){
  :root{--wc-section:64px}
  .wc-pillars{grid-template-columns:1fr 1fr}
  .wc-features{grid-template-columns:repeat(2,1fr)}
  .wc-grid{grid-template-columns:repeat(2,1fr)}
  .wc-producthero,.wc-split,.wc-form-block{grid-template-columns:1fr;gap:32px}
  .wc-split--media-left .wc-split__body{order:0}
  .wc-footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  :root{--wc-header-h:76px}
  .wc-header__inner{height:var(--wc-header-h)}
  .wc-burger{display:flex}
  .wc-phone--header{display:none}
  /* .wc-header carries a backdrop-filter, which makes it the containing block
     for its position:fixed children. `inset` would therefore resolve against
     the 76px header box and collapse the drawer to ~56px, so the panel is
     sized against the viewport explicitly. dvh keeps it right when mobile
     browser chrome shows and hides; the vh line is the fallback. */
  .wc-nav{position:fixed;top:100%;right:auto;bottom:auto;left:0;width:100%;
    height:calc(100vh - var(--wc-header-h));
    height:calc(100dvh - var(--wc-header-h));
    padding:12px var(--wc-gutter);background:#fff;transform:translateX(100%);transition:transform 320ms var(--wc-ease);overflow-y:auto;overscroll-behavior:contain;visibility:hidden}
  .wc-nav.is-open{transform:none;visibility:visible;box-shadow:var(--wc-shadow-lg)}
  /* No rules between items in the drawer — the padding carries the rhythm. */
  .wc-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .wc-nav__link{padding:10px 0;font-size:15px;justify-content:space-between}
  /* The walker prints two chevrons for a parent item: one inside the link (the
     desktop dropdown cue) and one in the toggle button. Only the button is used
     in the drawer, so hide the one in the link to avoid showing both. */
  .wc-nav__link>.wc-icon{display:none}
  /* Lay the row out as flex so the toggle sits right after the label instead of
     being pinned to the far edge; the submenu takes the next line. */
  .wc-nav__item--parent{display:flex;flex-wrap:wrap;align-items:center}
  .wc-nav__item--parent>.wc-nav__link{flex:0 0 auto;justify-content:flex-start}
  .wc-nav__item--parent>.wc-nav__submenu{flex-basis:100%}
  .wc-nav__toggle{display:flex;align-items:center;justify-content:center;position:static;height:44px;padding:0 10px;margin-left:2px}
  .wc-nav__submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;padding:0 0 4px 14px;display:none}
  /* Two classes, to beat the base .wc-nav__submenu .wc-nav__link sizing. */
  .wc-nav__submenu .wc-nav__link{padding:7px 14px;font-size:14px}
  .wc-nav__item--parent.is-open>.wc-nav__submenu{display:block}
  .wc-nav__mobile-extra{display:flex;flex-direction:column;gap:12px;padding-top:10px}
  .wc-nav__mobile-extra .wc-social__link{width:38px;height:38px}
  .wc-hero__title{font-size:clamp(30px,8vw,44px)}
}
@media (max-width:640px){
  .wc-header__actions .wc-btn{display:none}
  .wc-nav__cta{display:inline-flex;align-self:stretch;justify-content:center;padding:13px 22px;font-size:14px}
  .wc-pillars,.wc-features,.wc-grid,.wc-gallery__grid{grid-template-columns:1fr}
  .wc-footer__grid{grid-template-columns:1fr;gap:36px}
  .wc-form-block{padding:24px}
  .wc-quote{padding:26px}
  .wc-stats{padding:28px 22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .wc-reveal{opacity:1;transform:none}
}

.navigation.pagination {
	margin-top: 40px;
}