/* =========================================================================
   AE Wasser Technologie GmbH — corporate site
   Palette + layout modelled on the reference screenshot; brand accent is the
   AEWT blue (#005CA5) sampled from the official logo.
   ========================================================================= */

:root{
  --brand:        #005CA5;   /* AEWT blue (sampled from logo) */
  --brand-dark:   #004a86;
  --brand-darker: #003a68;
  --brand-tint:   #eaf2f9;

  --ink:          #333333;   /* nav + body text (sampled from reference) */
  --ink-soft:     #555555;
  --muted:        #6b7076;

  --nav-bg:       #e5e5e5;   /* nav band grey (sampled from reference) */
  --nav-border:   #d7d7d7;   /* thin top/bottom rule on the nav band       */
  --pipe:         #c3c3c3;   /* pipe separators between nav items          */

  --bg:           #ffffff;
  --bg-alt:       #f4f6f8;
  --bg-alt2:      #eef1f4;
  --line:         #e3e6e9;
  --card-shadow:  0 1px 2px rgba(20,40,60,.05), 0 10px 30px rgba(20,40,60,.06);

  --wrap: 1200px;
  /* Apple systems get San Francisco (-apple-system); everyone else gets the
     self-hosted Inter, which closely matches it, instead of Segoe UI etc. */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* one size for every section title (section-head h2, split h1/h2, CTA h2),
     and one size for every card title (h3) — keeps headings consistent */
  --h-section: clamp(24px, 2.6vw, 33px);
  --h-card: 18px;
}

/* self-hosted Inter (variable) — SF-like fallback for non-Apple systems */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-latin-variable.woff2") format("woff2");
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  font-size:16px;
  overflow-x:hidden;               /* guard against long-word overflow */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
h1,h2,h3,h4{color:#1f2933;line-height:1.2;margin:0 0 .5em;font-weight:700;overflow-wrap:break-word}
p{overflow-wrap:break-word}
/* long German compound words must break rather than blow out the layout.
   overflow-wrap:anywhere (unlike break-word) also shrinks the intrinsic
   min-width, so the flex/grid item can narrow on small screens.        */
.hero-panel h1,.page-hero h1{overflow-wrap:anywhere;word-break:break-word;hyphens:auto;-webkit-hyphens:auto}
.hero-inner,.hero-panel,.split-body,.section-head,.card,.feature,.ref-card .body{min-width:0}
p{margin:0 0 1em}
.container{max-width:var(--wrap);margin:0 auto;padding:0 28px}

.eyebrow{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  font-weight:700;
  color:var(--brand);
  margin-bottom:14px;
}
.btn{
  display:inline-block;
  background:var(--brand);
  color:#fff;
  padding:14px 30px;
  border-radius:2px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:13.5px;
  border:1px solid var(--brand);
  transition:background .18s ease,transform .18s ease;
  cursor:pointer;
}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.ghost:hover{background:var(--brand);color:#fff}
.btn.on-dark{border-color:#fff}

/* =========================================================================
   HEADER  (white bar: logo left, DE/EN + home icon right) — matches reference
   ========================================================================= */
.site-header{background:#fff}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 28px;
  max-width:var(--wrap);
  margin:0 auto;
}
.brand{display:flex;align-items:center;gap:14px}
.brand img{height:58px;width:auto}
@media(max-width:520px){.brand img{height:46px}}

.header-tools{display:flex;align-items:center;gap:16px}
/* language flag dropdown */
.lang-switch{position:relative;display:flex;align-items:center}
.lang-current{
  display:flex;align-items:center;gap:7px;
  background:none;border:1px solid transparent;border-radius:0;
  padding:5px 8px;cursor:pointer;font:inherit;color:var(--ink);
  transition:background .15s ease,border-color .15s ease;
}
.lang-current:hover{background:#f0f0f0}
.lang-switch.open .lang-current{background:#f0f0f0;border-color:#dcdcdc}
.lang-current .lang-code{font-size:13px;font-weight:600;letter-spacing:.05em}
.lang-current .caret{width:14px;height:14px;color:#8a9096;transition:transform .18s ease}
.lang-switch.open .lang-current .caret{transform:rotate(180deg)}

.flag{
  width:24px;height:16px;display:block;border-radius:0;flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.10);
}

.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:80;
  min-width:172px;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid #e0e3e6;border-radius:0;
  box-shadow:0 14px 34px rgba(20,40,60,.17);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu li{margin:0}
.lang-opt{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px;border-radius:0;
  color:var(--ink);font-size:14.5px;white-space:nowrap;
}
.lang-opt:hover{background:var(--brand-tint);color:var(--ink)}
.lang-opt.active{font-weight:700}
.lang-opt.active > span{color:var(--brand)}
.lang-menu .flag{width:26px;height:18px}
/* BETA: font-trial dropdown (mirrors the language switcher) */
.font-switch{position:relative;display:flex;align-items:center}
.font-current{
  display:flex;align-items:center;gap:7px;
  background:none;border:1px solid transparent;border-radius:0;
  padding:5px 8px;cursor:pointer;font:inherit;color:var(--ink);
  transition:background .15s ease,border-color .15s ease;
}
.font-current:hover{background:#f0f0f0}
.font-switch.open .font-current{background:#f0f0f0;border-color:#dcdcdc}
.font-current .font-aa{font-size:16px;font-weight:700;line-height:1}
.font-current .font-name{font-size:13px;font-weight:600;letter-spacing:.02em}
.font-current .caret{width:14px;height:14px;color:#8a9096;transition:transform .18s ease}
.font-switch.open .font-current .caret{transform:rotate(180deg)}
.font-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:80;
  min-width:210px;max-height:72vh;overflow-y:auto;
  margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid #e0e3e6;border-radius:0;
  box-shadow:0 14px 34px rgba(20,40,60,.17);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.font-switch.open .font-menu{opacity:1;visibility:visible;transform:none}
.font-menu li{margin:0}
.font-opt{
  display:block;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;
  padding:10px 11px;border-radius:0;color:var(--ink);
  font-size:16px;line-height:1.2;white-space:nowrap;
}
.font-opt:hover{background:var(--brand-tint)}
.font-opt.active{background:var(--brand-tint);color:var(--brand);font-weight:700}
@media(max-width:600px){.font-current .font-name{display:none}}

.home-link{
  display:inline-flex;align-items:center;justify-content:center;
  color:#6b7076;transition:color .15s ease;
}
.home-link:hover{color:var(--brand)}
.home-link svg{width:20px;height:20px;display:block}

/* =========================================================================
   MAIN NAV  — THE reference element: light-grey band, thin top/bottom rules,
   uppercase letter-spaced items separated by thin pipes.
   ========================================================================= */
.main-nav{
  background:var(--nav-bg);
  border-top:1px solid var(--nav-border);
  border-bottom:1px solid var(--nav-border);
  position:sticky;top:0;z-index:60;
}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 28px;
}
.nav-list{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:stretch;flex-wrap:wrap;
}
.nav-list > li{display:flex;align-items:center}
/* pipe separators between items (not before the first) */
.nav-list > li + li::before{
  content:"";
  width:1px;height:15px;
  background:var(--pipe);
  margin:0 4px;
  align-self:center;
}
.nav-list a{
  display:block;
  color:var(--ink);
  text-transform:uppercase;
  letter-spacing:.07em;
  font-size:13.5px;
  font-weight:700;
  padding:19px 15px;
  transition:color .15s ease;
  white-space:nowrap;
}
@media(min-width:1080px){.nav-list{flex-wrap:nowrap}}
.nav-list a:hover{color:var(--brand)}
.nav-list a.active{color:var(--brand)}

/* right-hand phone element — echoes the reference's phone / hotline block */
.nav-phone{
  display:flex;align-items:center;gap:10px;
  color:var(--ink);white-space:nowrap;padding-left:10px;
}
.nav-phone .pipe{width:1px;height:22px;background:var(--pipe);margin-right:12px}
.nav-phone > span[aria-hidden="true"]{display:flex;align-items:center}
/* icon glyph is taller than the text caps; size it to the text and nudge it
   down ~1px so it optically sits on the same line as the number */
.nav-phone svg{width:18.5px;height:18.5px;color:var(--brand);display:block;position:relative;top:1px}
.nav-phone .np-label{font-size:11px;line-height:1.15;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.nav-phone .np-num{font-size:13.5px;font-weight:700;color:var(--ink)}
.nav-phone a{color:inherit}

/* hamburger (mobile) */
.nav-toggle{
  display:none;
  background:none;border:0;cursor:pointer;
  padding:16px 4px;margin-left:auto;
  color:var(--ink);
}
.nav-toggle svg{width:26px;height:26px;display:block}

@media(max-width:900px){
  .nav-inner{flex-wrap:wrap}
  .nav-toggle{display:block}
  .nav-phone{display:none}
  .nav-list{
    display:none;
    flex-direction:column;
    width:100%;
    border-top:1px solid var(--nav-border);
  }
  .nav-inner.open .nav-list{display:flex}
  .nav-list > li{width:100%}
  .nav-list > li + li::before{display:none}
  .nav-list > li + li{border-top:1px solid #d0d0d0}
  .nav-list a{padding:14px 4px}
}

/* =========================================================================
   HERO  (home) — full-bleed image with a light frosted panel (left) and a
   large faded label (right), echoing the reference hero composition.
   ========================================================================= */
.hero{
  position:relative;
  background-size:cover;background-position:center;
  background-color:#0d2c45;
  color:#fff;
  overflow:hidden;
}
.hero::after{ /* subtle darkening for legibility */
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,26,42,.35) 0%,rgba(8,26,42,.15) 45%,rgba(8,26,42,.45) 100%);
}
.hero-inner{
  position:relative;z-index:2;
  max-width:var(--wrap);margin:0 auto;padding:0 28px;
  min-height:560px;
  display:flex;align-items:center;
}
.hero-panel{
  background:rgba(255,255,255,.90);
  color:#243542;
  backdrop-filter:blur(3px);
  padding:44px 46px;
  max-width:620px;
  box-shadow:0 24px 60px rgba(6,22,37,.28);
}
.hero-panel .eyebrow{color:var(--brand)}
.hero-panel h1{
  font-size:clamp(26px,3.4vw,42px);
  line-height:1.14;
  margin-bottom:18px;
  color:#16222c;
}
.hero-panel p.lead{font-size:17px;color:#3d4a55;margin-bottom:26px}
.hero-wordmark{
  position:absolute;right:28px;bottom:40px;z-index:2;
  text-align:right;color:rgba(255,255,255,.94);
  text-transform:uppercase;letter-spacing:.02em;font-weight:800;
  font-size:clamp(22px,3.6vw,46px);line-height:1.02;
  text-shadow:0 2px 18px rgba(0,0,0,.45);
  pointer-events:none;
}
.hero-wordmark span{display:block}
.hero-wordmark small{
  display:block;font-size:13px;font-weight:600;letter-spacing:.22em;
  color:rgba(255,255,255,.8);margin-bottom:10px;
}
@media(max-width:820px){
  .hero-inner{min-height:460px;padding-top:40px;padding-bottom:40px}
  .hero-panel{padding:30px 26px;max-width:100%}
  .hero-wordmark{display:none}
  .hero::after{background:linear-gradient(180deg,rgba(8,26,42,.35),rgba(8,26,42,.55))}
}

/* =========================================================================
   SECTIONS / generic
   ========================================================================= */
.section{padding:78px 0}
.section.tight{padding:56px 0}
.section.alt{background:var(--bg-alt)}
.section.brandband{
  background:linear-gradient(125deg,#0a63ad 0%,var(--brand) 52%,#004a86 100%);
  color:#fff;position:relative;overflow:hidden;
  padding:46px 0;   /* compact band */
}
.section.brandband::before{ /* soft top highlight for depth */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -25%,rgba(255,255,255,.12),rgba(255,255,255,0) 60%);
}
.section.brandband > .container{position:relative;z-index:1}
.section.brandband h2,.section.brandband h3{color:#fff}
.section.brandband .eyebrow{color:rgba(255,255,255,.72)}
/* closing call-to-action band (above the footer on every page) */
.cta-band h2{margin-bottom:14px;font-size:var(--h-section)}
.cta-band p{max-width:620px;margin:0 auto 28px;color:rgba(255,255,255,.9);font-size:17px}
.cta-band .btn{background:#fff;color:var(--brand);border-color:#fff}
.cta-band .btn:hover{background:var(--brand-tint);color:var(--brand-dark);border-color:var(--brand-tint)}
.section-head{max-width:760px;margin:0 auto 48px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head h2{font-size:var(--h-section)}
.section-head p{color:var(--muted);font-size:17px;margin-bottom:0}

.lead-lg{font-size:20px;color:var(--ink-soft);line-height:1.55}

/* two-column media rows */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.split.reverse .split-media{order:2}
/* fill mode: image stretches to the full height of the text column.
   The image is absolutely positioned so the row height is set by the text,
   and the image simply covers whatever height that is. */
.split-fill{align-items:stretch}
.split-fill .split-media{position:relative}
.split-fill .split-media img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
.split-media img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:3px}
.split-media{border-radius:3px;overflow:hidden;box-shadow:var(--card-shadow);background:linear-gradient(135deg,#0d3a63,#0a2740)}
.split h1,.split h2{font-size:var(--h-section)}
/* body paragraphs in every split use the same reading size as the About Us
   teaser (matches .lead-lg), so text is uniform across all pages */
.split-body p{font-size:20px;color:var(--ink-soft);line-height:1.55}
@media(max-width:860px){
  .split{grid-template-columns:1fr;gap:30px}
  .split.reverse .split-media{order:0}
  .split-media img{min-height:240px}
}

/* =========================================================================
   VALUE CARDS (home)
   ========================================================================= */
.cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
.card{
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:32px 26px;box-shadow:var(--card-shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  height:100%;
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(20,40,60,.12);border-color:#cfe0ee}
.card .ic{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-tint);color:var(--brand);margin-bottom:20px;
}
.card .ic svg{width:26px;height:26px}
.card h3{font-size:var(--h-card);margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted);margin:0}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
/* fields-of-activity: one compact row (icon + title), description on hover */
.cards.fields-cards{grid-template-columns:repeat(6,1fr);gap:14px}
.fields-cards .card{
  position:relative;overflow:hidden;min-height:210px;
  padding:26px 12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.fields-cards .card .ic{margin:0 0 14px}
.fields-cards .card h3{font-size:14.5px;line-height:1.3;margin:0}
.field-over{
  position:absolute;inset:0;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:22px 18px;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.fields-cards .card:hover .field-over{opacity:1;transform:none}
.field-over p{margin:0;font-size:13px;line-height:1.5;color:#fff}
@media(max-width:1000px){.cards.fields-cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.cards.fields-cards{grid-template-columns:repeat(2,1fr)}}

/* feature list with checks */
.checklist{list-style:none;margin:22px 0 0;padding:0}
.checklist.cols2{columns:2;column-gap:52px}
.checklist.cols2 li{break-inside:avoid;-webkit-column-break-inside:avoid}
@media(max-width:640px){.checklist.cols2{columns:1}}
.checklist li{position:relative;padding:0 0 14px 34px;color:var(--ink-soft)}
.checklist li::before{
  content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--brand-tint);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/14px no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z"/></svg>') center/14px no-repeat;
  background-color:var(--brand);
}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.stat{position:relative;padding:6px 28px}
.stat + .stat::before{ /* vertical divider between stats */
  content:"";position:absolute;left:0;top:14%;height:72%;width:1px;
  background:rgba(255,255,255,.20);
}
.stats .num{font-size:clamp(36px,4.2vw,54px);font-weight:800;color:#fff;line-height:1;letter-spacing:-.01em}
.stats .lab{margin:12px auto 0;max-width:210px;font-size:14px;letter-spacing:.02em;color:rgba(255,255,255,.85)}
@media(max-width:640px){
  .stats{grid-template-columns:1fr;gap:36px}
  .stat + .stat::before{display:none}
  .stat + .stat{border-top:1px solid rgba(255,255,255,.16);padding-top:36px}
}

/* =========================================================================
   PARTNERS — sliding logo marquee
   ========================================================================= */
.section.partners{
  padding:52px 0;background:#fff;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;
}
.marquee{
  position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* NOTE: spacing is a per-logo margin (not flex gap) so translateX(-50%) lands
   exactly on the set boundary -> a seamless, non-jumping loop. */
.marquee-track{
  display:flex;align-items:center;width:max-content;
  animation:marquee 60s linear infinite;
}
@keyframes marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* fixed-width slots => the track width is deterministic regardless of when
   the logos load, so the loop stays seamless and nothing is left unsized. */
.partner{
  flex:none;width:150px;height:56px;margin-right:44px;
  display:flex;align-items:center;justify-content:center;
}
.partner img{max-width:100%;max-height:48px;object-fit:contain;display:block}
/* a couple of logos read too large in the row — trim them a bit */
.partner img[src*="azud."],
.partner img[src*="abb."]{max-height:38px}
.partner .partner-txt{display:none}
.partner.no-logo .partner-txt{
  display:inline-block;white-space:nowrap;
  font-size:19px;font-weight:700;letter-spacing:.01em;color:#9aa4ad;
}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* =========================================================================
   PAGE HERO (inner pages) — compact banner under the nav
   ========================================================================= */
.page-hero{
  position:relative;color:#fff;background:#0d2c45 center/cover no-repeat;
}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,26,42,.78),rgba(8,26,42,.5))}
.page-hero .container{position:relative;z-index:2;padding-top:70px;padding-bottom:70px}
.page-hero .eyebrow{color:#8ec6ef}
.page-hero h1{color:#fff;font-size:clamp(26px,3.4vw,42px);margin-bottom:10px}
.page-hero p{color:rgba(255,255,255,.9);font-size:18px;max-width:680px;margin:0}
.breadcrumb{font-size:12.5px;letter-spacing:.05em;color:rgba(255,255,255,.7);margin-bottom:16px;text-transform:uppercase}
.breadcrumb a{color:rgba(255,255,255,.85)}

/* pull quote / core message band */
.message{
  background:var(--brand);color:#fff;border-radius:4px;
  padding:44px 48px;text-align:center;box-shadow:var(--card-shadow);
}
.message p{font-size:clamp(20px,2.5vw,28px);font-weight:600;margin:0;line-height:1.35}
.message .attr{display:block;margin-top:14px;font-size:14px;font-weight:400;color:rgba(255,255,255,.82);text-transform:none;letter-spacing:0}

/* three-up feature blocks */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feature{background:#fff;border:1px solid var(--line);border-radius:4px;padding:30px 26px;box-shadow:var(--card-shadow)}
.feature .ic{width:48px;height:48px;border-radius:10px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feature .ic svg{width:24px;height:24px}
.feature h3{font-size:var(--h-card);margin-bottom:6px}
.feature p{font-size:14.5px;color:var(--muted);margin:0}
.features.f4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.features{grid-template-columns:1fr}}
@media(max-width:1000px){.features.f4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.features.f4{grid-template-columns:1fr}}

/* =========================================================================
   REFERENCE CARDS
   ========================================================================= */
.ref-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}
.ref-card{
  background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;
  box-shadow:var(--card-shadow);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.ref-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(20,40,60,.14)}
.ref-card .ph{height:210px;background:#0d2c45 center/cover no-repeat;position:relative}
.ref-card .ph .tag{
  position:absolute;left:16px;bottom:16px;
  background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:6px 12px;border-radius:2px;
}
.ref-card .body{padding:24px 26px 28px}
.ref-card h3{font-size:var(--h-card);margin-bottom:4px}
.ref-card .loc{display:flex;align-items:center;gap:7px;color:var(--brand);font-size:13.5px;font-weight:600;margin-bottom:12px}
.ref-card .loc svg{width:15px;height:15px}
.ref-card p{font-size:14.5px;color:var(--muted);margin:0}
@media(max-width:760px){.ref-grid{grid-template-columns:1fr}}

/* Manufacturing: customizable-products cards */
.products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.product-card{
  background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden;
  box-shadow:var(--card-shadow);display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(20,40,60,.14)}
/* branded gradient shows through until a real photo is dropped in */
.product-card .ph{
  aspect-ratio:7/6;
  background:linear-gradient(135deg,#123a5c,#0d2c45) center/cover no-repeat;
}
.product-card .pbody{padding:20px 22px 24px;flex:1;display:flex;align-items:flex-start}
.product-card h3{font-size:var(--h-card);line-height:1.35;margin:0}
@media(max-width:900px){.products-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.products-grid{grid-template-columns:1fr}}

.note-band{
  border:1px dashed #cdd6de;background:var(--bg-alt);border-radius:5px;
  padding:22px 26px;display:flex;align-items:center;gap:16px;color:var(--ink-soft);
}
.note-band svg{width:26px;height:26px;color:var(--brand);flex:none}

/* =========================================================================
   TEAM / ABOUT
   ========================================================================= */
.value-row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.value-row .vc{padding:6px 0}
.value-row h3{font-size:var(--h-card);display:flex;align-items:center;gap:10px}
.value-row h3 .dot{width:10px;height:10px;border-radius:50%;background:var(--brand);flex:none}
@media(max-width:820px){.value-row{grid-template-columns:1fr;gap:20px}}

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:36px}}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;letter-spacing:.03em;margin-bottom:7px;color:var(--ink-soft)}
.field input,.field textarea{
  width:100%;padding:13px 15px;border:1px solid #d2d8de;border-radius:3px;
  font:inherit;font-size:15px;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,92,165,.12)}
.field textarea{min-height:150px;resize:vertical}
.form-note{font-size:12.5px;color:var(--muted);margin-top:6px}
.form-status{margin-top:14px;font-size:14.5px;font-weight:600;color:var(--brand);display:none}
.form-status.show{display:block}

.info-card{background:var(--bg-alt);border:1px solid var(--line);border-radius:5px;padding:30px 30px}
.info-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0}
.info-row .ic{width:40px;height:40px;border-radius:9px;background:var(--brand-tint);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.info-row .ic svg{width:20px;height:20px}
.info-row .k{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:2px}
.info-row .v{font-weight:600;color:var(--ink)}
.info-row .v a{color:var(--ink)}
.info-row .v a:hover{color:var(--brand)}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer{background:#132430;color:#c3ccd4;padding:60px 0 0;font-size:14.5px}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:44px}
.footer-brand img{height:52px;margin-bottom:16px;opacity:.95}
.footer-brand p{color:#93a1ac;max-width:340px;margin:0}
.site-footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.09em;margin-bottom:16px}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:9px}
.footer-links a{color:#c3ccd4}
.footer-links a:hover{color:#fff}
.footer-contact a{color:#c3ccd4}
.footer-contact a:hover{color:#fff}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:13px;color:#8b98a3;
}
.footer-bottom a{color:#8b98a3;margin-left:18px}
.footer-bottom a:hover{color:#fff}
.footer-bottom .legal a:first-child{margin-left:0}
@media(max-width:800px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1 / -1}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr}.footer-bottom{flex-direction:column}}

/* =========================================================================
   Legal pages
   ========================================================================= */
.legal{max-width:820px}
.legal h2{font-size:20px;margin-top:36px}
.legal h2:first-child{margin-top:0}
.legal p,.legal address{color:var(--ink-soft);font-style:normal}
.placeholder{background:#fff6e5;border:1px solid #f0d9a8;color:#7a5a10;padding:2px 7px;border-radius:3px;font-size:.92em}

/* =========================================================================
   Scroll fade-in animation
   ========================================================================= */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* language visibility helper (JS toggles [lang] on <html>) */
[data-lang-only]{display:none}