/* ==========================================================================
   Wispart.com — stylesheet
   Static site. No frameworks, no build step, no external requests.
   Brand colours sampled from the official logo artwork.
   ========================================================================== */

/* --------------------------------------------------------------------------
   OPTIONAL: brand webfonts
   The site currently uses a system font stack — nothing to download, nothing
   to host, no Google Fonts request (which matters for GDPR in Germany).
   To switch to the brand faces from the website concept, drop the .woff2
   files into assets/fonts/ and uncomment this block plus the two lines
   marked "webfont" in the :root section below.

@font-face{font-family:"Archivo";src:url("../fonts/archivo-700.woff2") format("woff2");
           font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-800.woff2") format("woff2");
           font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans-400.woff2") format("woff2");
           font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans-600.woff2") format("woff2");
           font-weight:600;font-style:normal;font-display:swap}
-------------------------------------------------------------------------- */

:root{
  /* brand — official values from the Wispart brand style guidelines */
  --navy:#1B374C;          /* WIS                                          */
  --navy-deep:#12283A;     /* darker navy for footer / deep bands          */
  --orange:#E4440E;        /* PART / .com — brand orange, large areas only */
  --brand-black:#231F20;   /* tagline                                      */

  /* accessible tints of the brand orange, so small text meets WCAG AA
     (brand orange itself is 4.1:1 on white — fine for large type, short
     of the 4.5:1 needed for small text and button labels) */
  --orange-ink:#C6390A;    /* small orange text on white   — 5.2:1 */
  --orange-btn:#D63F0C;    /* primary button fill on white — 4.6:1 */
  --orange-btn-hover:#B8340A;
  --orange-light:#FF7A4D;  /* small orange text on navy    — 4.8:1 */
  --orange-bright:#FF4412; /* official secondary-logo orange for dark grounds */

  /* neutrals, biased slightly blue so they sit with the navy */
  --paper:#FFFFFF;
  --ground:#FBFCFD;
  --mist:#F1F4F7;
  --rule:#DDE4E9;
  --rule-soft:#EAEFF3;
  --ink:#0F2131;
  --steel:#5F7181;
  --on-dark:#EAF1F6;
  --on-dark-muted:#A6BCCC;

  /* type — system stack: no downloads, no external requests */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",
         system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",
            system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  /* webfont: --display:"Archivo",-apple-system,"Segoe UI",system-ui,Arial,sans-serif; */
  /* webfont: --sans:"IBM Plex Sans",-apple-system,"Segoe UI",system-ui,Arial,sans-serif; */
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono","Roboto Mono",
         Menlo,Consolas,monospace;

  --max:75rem;      /* 1200px */
  --gutter:1.5rem;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);margin:0;line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
p,ul,ol{margin:0}
a{color:var(--orange-ink)}
a:hover{color:var(--orange-btn-hover)}
:focus-visible{outline:2px solid var(--orange-btn);outline-offset:3px;border-radius:2px}
::selection{background:var(--orange);color:#fff}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:44rem}
/* when .narrow sits directly on .wrap, keep the grid left-aligned and
   constrain the children instead, so bands match every other section */
.wrap.narrow{max-width:var(--max)}
.wrap.narrow > *{max-width:44rem}
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section--mist{background:var(--mist)}
.section + .section--mist,.section--mist + .section{border-top:1px solid var(--rule-soft)}

.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:.75rem 1rem;z-index:200}
.skip:focus{left:0}

/* ---------- typography scale ---------- */
.eyebrow{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-ink);font-weight:600;margin-bottom:1rem;display:block;
}
.eyebrow--light{color:var(--orange-light)}
.h-xl{font-size:clamp(2.25rem,5.6vw,4rem);font-weight:800;letter-spacing:-.035em}
.h-lg{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;letter-spacing:-.032em}
.h-md{font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:700;letter-spacing:-.024em}
.h-sm{font-size:1.125rem;font-weight:700;letter-spacing:-.015em}
.lede{font-size:clamp(1.0625rem,1.6vw,1.3125rem);line-height:1.55;color:var(--ink)}
.muted{color:var(--steel)}
.prose p + p,.prose p + ul,.prose ul + p{margin-top:1.15rem}
.prose{max-width:38rem}
.prose ul{padding-left:1.15rem}
.prose li{margin-top:.45rem}
.prose li::marker{color:var(--orange)}
.stack > * + *{margin-top:1.15rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.005em;
  padding:.82rem 1.4rem;border-radius:2px;text-decoration:none;border:1px solid transparent;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
  cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--orange-btn);color:#fff}
.btn--primary:hover{background:var(--orange-btn-hover);color:#fff}
.btn--ghost{background:transparent;color:var(--navy);border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--navy);color:var(--navy)}
.btn--on-dark{background:transparent;color:var(--on-dark);border-color:rgba(234,241,246,.35)}
.btn--on-dark:hover{border-color:var(--on-dark);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.9rem}
.btn .arw{font-family:var(--mono);font-size:.9em;opacity:.85}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule-soft);
}
.site-header__in{
  max-width:var(--max);margin-inline:auto;padding:.85rem var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{height:28px;width:auto}
.nav{display:flex;align-items:center;gap:1.75rem}
.nav a{
  font-size:.9375rem;font-weight:500;color:var(--ink);text-decoration:none;
  padding-block:.35rem;border-bottom:2px solid transparent;
}
.nav a:hover{color:var(--orange-ink)}
.nav a[aria-current="page"]{border-bottom-color:var(--orange);color:var(--ink)}
.nav__cta{margin-left:.5rem}
.nav-toggle{
  display:none;background:none;border:1px solid var(--rule);border-radius:2px;
  padding:.5rem .7rem;cursor:pointer;color:var(--ink);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    display:none;position:absolute;inset-inline:0;top:100%;
    background:var(--paper);border-bottom:1px solid var(--rule);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--gutter) 1.25rem;
  }
  .nav.is-open{display:flex}
  .nav a{padding:.8rem 0;border-bottom:1px solid var(--rule-soft)}
  .nav a[aria-current="page"]{color:var(--orange-ink)}
  .nav__cta{margin:1rem 0 0;justify-content:center}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(18,40,58,.94) 0%,rgba(18,40,58,.86) 45%,rgba(18,40,58,.62) 100%);
}
.hero__in{position:relative;padding-block:clamp(4rem,11vw,8.5rem)}
.hero__in > *{max-width:36rem}
.hero h1{color:#fff}
.hero .lede{color:var(--on-dark);margin-top:1.5rem}

/* page hero (inner pages) */
.pagehead{background:var(--navy);color:#fff}
.pagehead__in{padding-block:clamp(3rem,7vw,5rem)}
.pagehead h1{color:#fff;max-width:22ch}
.pagehead .lede{color:var(--on-dark-muted);margin-top:1.25rem;max-width:44rem}

/* ---------- stat bar ---------- */
.stats{
  border-block:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));
}
.stats > div{padding:1.6rem var(--gutter);border-left:1px solid var(--rule-soft)}
.stats > div:first-child{border-left:0}
.stats dt{font-family:var(--display);font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--navy);margin:0;font-variant-numeric:tabular-nums}
.stats dd{margin:.35rem 0 0;font-size:.875rem;color:var(--steel);line-height:1.4}
@media (max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > div{border-top:1px solid var(--rule-soft)}
  .stats > div:nth-child(-n+2){border-top:0}
  .stats > div:nth-child(odd){border-left:0}
}

/* ---------- generic grids ---------- */
.grid-2{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);grid-template-columns:repeat(auto-fit,minmax(19rem,1fr))}
.grid-2 > *{background:var(--paper);padding:clamp(1.5rem,3vw,2.25rem)}
.grid-3{display:grid;gap:2.5rem 2.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.grid-4{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.grid-4 > *{background:var(--paper);padding:1.35rem}

.card h3{margin-bottom:.65rem}
.card p{color:var(--steel)}
.card .btn-row{margin-top:1.5rem}
.card__media{margin:-1px -1px 1.5rem;aspect-ratio:16/9;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.grid-2 > .card{padding-top:0}
.grid-2 > .card > :first-child{margin-top:0}

/* ---------- steps ---------- */
.steps{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));counter-reset:step}
.step{border-top:2px solid var(--navy);padding-top:1.1rem}
.step__n{font-family:var(--mono);font-size:.8125rem;color:var(--orange-ink);font-weight:600;letter-spacing:.08em}
.step h3{font-size:1.0625rem;font-weight:700;margin:.5rem 0 .5rem;letter-spacing:-.012em}
.step p{font-size:.9375rem;color:var(--steel);line-height:1.55}

/* ---------- feature list ---------- */
.features{display:grid;gap:0;border-top:1px solid var(--rule)}
.features > div{
  display:grid;grid-template-columns:minmax(11rem,17rem) 1fr;gap:1.5rem 2.5rem;
  padding-block:1.5rem;border-bottom:1px solid var(--rule-soft);
}
.features h3{font-size:1.0625rem;font-weight:700;letter-spacing:-.012em}
.features p{color:var(--steel)}
@media (max-width:700px){.features > div{grid-template-columns:1fr;gap:.4rem}}

/* ---------- media split ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){
  .split{grid-template-columns:1.05fr .95fr}
  .split--rev .split__media{order:2}
}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split--tall .split__media img{aspect-ratio:3/4}

/* ---------- dark band ---------- */
.band{background:var(--navy);color:#fff}
.band h2{color:#fff}
.band p{color:var(--on-dark-muted)}
.band .eyebrow{color:var(--orange-light)}
.band--deep{background:var(--navy-deep)}

/* ---------- brand list ---------- */
.brandlist{
  columns:5 11rem;column-gap:2rem;font-size:.9375rem;
  border-top:1px solid var(--rule);padding-top:1.5rem;
}
.brandlist li{break-inside:avoid;padding:.28rem 0;list-style:none;color:var(--ink)}
.brandlist{padding-left:0;margin:0}
.brandlist li.is-hidden{display:none}

/* ---------- company facts ---------- */
.facts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
       grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));margin:0}
.facts > div{background:var(--paper);padding:1rem 1.15rem}
.facts dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
          color:var(--steel);margin:0}
.facts dd{margin:.35rem 0 0;font-size:.9375rem;color:var(--ink);line-height:1.5}

/* ---------- contact / email ---------- */
.contact-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.contact-block h3{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);font-weight:600;margin-bottom:.75rem;
}
.contact-block p,.contact-block address{font-style:normal;color:var(--ink);line-height:1.7}
.email-link{font-weight:600;word-break:break-word}
/* No-JavaScript fallback. The address is written backwards in the source and
   rendered the right way round by the browser, so it matches no email pattern
   a harvester would recognise. */
/* The address is written backwards in the HTML and flipped the right way round
   here, so the page source matches no email pattern. JavaScript replaces the
   text with the real address and removes this class. */
.mail-rev{unicode-bidi:bidi-override;direction:rtl;font-family:var(--mono)}
.tel{color:var(--ink);text-decoration:none;font-weight:600}
.tel:hover{color:var(--orange-ink)}

/* ---------- footer ---------- */
.site-footer{background:var(--navy-deep);color:var(--on-dark);padding-block:clamp(3rem,6vw,4.5rem) 0}
.site-footer a{color:var(--on-dark-muted);text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.site-footer img{height:52px;width:auto;margin-bottom:1.1rem}
.site-footer h4{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-dark-muted);font-weight:600;margin-bottom:.9rem;
}
.site-footer ul{list-style:none;padding:0}
.site-footer li{margin-bottom:.5rem;font-size:.9375rem}
.site-footer .about{font-size:.9375rem;color:var(--on-dark-muted);max-width:22rem;line-height:1.6}
.footer-bottom{
  margin-top:3rem;border-top:1px solid rgba(234,241,246,.14);padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;
  font-size:.8125rem;color:var(--on-dark-muted);
}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}

/* ---------- misc ---------- */
.rule{border:0;border-top:1px solid var(--rule);margin-block:clamp(2.5rem,5vw,4rem)}
.note{
  border-left:3px solid var(--orange);background:var(--mist);
  padding:1.15rem 1.35rem;margin-top:1.75rem;
}
.note p{color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;list-style:none;padding:0}
.tags li{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;
  border:1px solid var(--rule);padding:.35rem .7rem;color:var(--steel);
}
.band .tags li{border-color:rgba(234,241,246,.25);color:var(--on-dark-muted)}
.legal h2{margin-top:2.5rem;margin-bottom:.75rem}
.legal p + p{margin-top:1rem}

/* ---------- utilities ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
[hidden]{display:none!important}