/* ==========================================================================
   RAW POWER — replica stylesheet
   Typography, colours and geometry measured 1:1 from the source site
   (1440px design canvas).  Layout positions come from build/layout.json.
   ========================================================================== */

@font-face{font-family:'Yu Gothic';src:url('/assets/fonts/ot-yu-gothic-pr6n-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Yu Gothic';src:url('/assets/fonts/ot-yu-gothic-pr6n-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Yu Gothic';src:url('/assets/fonts/ot-yu-gothic-pr6n-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Yu Gothic';src:url('/assets/fonts/ot-yu-gothic-pr6n-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Yu Gothic';src:url('/assets/fonts/ot-yu-gothic-pr6n-700-latin-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Yu Mincho';src:url('/assets/fonts/ot-yu-mincho-pr6n-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Yu Mincho';src:url('/assets/fonts/ot-yu-mincho-pr6n-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Yu Mincho';src:url('/assets/fonts/ot-yu-mincho-pr6n-500-latin.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Yu Mincho';src:url('/assets/fonts/ot-yu-mincho-pr6n-700-latin.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Yu Mincho';src:url('/assets/fonts/ot-yu-mincho-pr6n-700-latin-ext.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --accent:#EB7211;
  --btn:#A9ADB3;
  --wa:#25D366;
  --canvas:1440px;
  --gothic:'Yu Gothic',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mincho:'Yu Mincho','Yu Gothic',Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#111;color:#fff;font-family:var(--gothic);font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:none;display:block;border:0}
a{color:inherit}

.page{position:relative;width:var(--canvas);max-width:100%;margin:0 auto;background:#0d0e0f;overflow:hidden}
/* category pages: the source paints them on a light canvas (home stays dark),
   so the hero headline (black) and the GET IN TOUCH block stay readable.
   Dark mode flips them — see the prefers-color-scheme block at the end. */
.page-cat{background:#fff}
.page-cat .contact-title{color:#111}
.page-cat .contact-p{color:#444}
.abs{position:absolute;z-index:2}
.lay{position:absolute;left:0;top:0;z-index:0;background-size:100% 100%;background-position:center center;background-repeat:no-repeat}

/* ---------------- header ---------------- */
.site-header{position:sticky;top:0;z-index:60;height:102px;background:#fff}
.header-inner{position:relative;width:var(--canvas);max-width:100%;height:102px;margin:0 auto}
.brand{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:7px;background:var(--accent);display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--gothic);color:#fff;letter-spacing:.4px;text-decoration:none}
.main-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:54px;white-space:nowrap}
.main-nav a{color:#000;text-decoration:none;font:700 29.5969px/38px var(--gothic);letter-spacing:2.95969px;text-transform:uppercase}
.main-nav a:hover{color:var(--accent)}
.lang{position:absolute;right:24px;top:50%;transform:translateY(-50%)}
.lang-btn{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:#000;font:700 20.49px/41px var(--gothic);letter-spacing:.4px}
.lang-btn img{width:22px;height:22px;border-radius:50%}
.lang-btn .chev{width:15px;height:15px;fill:none;stroke:#000;stroke-width:2;transition:transform .18s}
.lang.open .chev{transform:rotate(180deg)}
.lang-menu{position:absolute;top:48px;right:0;display:flex;background:#fff;border-radius:6px;box-shadow:0 8px 26px rgba(0,0,0,.22);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{display:flex;align-items:center;gap:9px;height:41px;padding:0 12px;color:#000;text-decoration:none;font:600 15px/1 var(--gothic);letter-spacing:.4px;white-space:nowrap}
.lang-menu a:hover{background:#f0f1f3}
.lang-menu img{width:22px;height:22px;border-radius:50%}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 36px;border:0;border-radius:56.25px;background:var(--btn);color:#000;text-decoration:none;font:400 18px/1 var(--gothic);letter-spacing:.36px;cursor:pointer;white-space:nowrap}
.btn:hover{background:#8d9198}
.btn:active{transform:scale(.98)}

/* ---------------- home ---------------- */
.hero-h1{margin:0;font:400 72.8538px/65.5684px var(--mincho);letter-spacing:3.64269px;text-transform:uppercase;color:#fff}
.hero-sub{margin:0;font:400 27.3201px/1.45 var(--gothic);color:#fff}
.section-title{margin:0;font:400 60.75px/55px var(--mincho);letter-spacing:3.0375px;text-transform:uppercase;color:#fff}
.card{position:absolute;z-index:2}
.card .name{margin:0;font:400 27px/30px var(--mincho);color:#fff}
.card .desc{margin:0;font:400 18px/23.4px var(--gothic);color:#fff}
.card .btn{border-radius:56.25px}
.adv{position:absolute;z-index:2}
.adv h3{margin:0;font:700 36.4268px/1.1 var(--mincho);color:#fff}
.adv p{margin:0;font:400 27.3201px/1.5 var(--gothic);color:#fff}
.adv-title{margin:0;font:700 63.7471px/1.1 var(--mincho);letter-spacing:1px;color:#fff}
.adv-sub{margin:0;font:400 27.3201px/1.5 var(--gothic);color:#fff}
.adv-sub em{font-style:normal;color:var(--accent)}

/* ---------------- category pages ---------------- */
.hero-photo{object-fit:cover}
/* ---- category hero ----------------------------------------------------
   The text no longer sits at hard-coded absolute coordinates: it is a flex
   column next to the photo, so no language (long German compounds included)
   can ever push a line onto the picture.  Sizes are unified (kicker 17 /
   sub 19) and only the headline size is fitted per language at build time
   (--h1) so every locale keeps the same visual proportions.            */
.cat-hero{position:absolute;left:0;top:0;width:1440px;height:842px;display:flex;flex-direction:row-reverse;align-items:center;gap:41px;padding:45px 0 0 46px;box-sizing:border-box}
.cat-hero .hero-photo{flex:0 0 866px;width:866px;height:683px;display:block}
.cat-hero-txt{flex:0 0 487px;width:487px;display:flex;flex-direction:column;justify-content:center;gap:26px;min-width:0}
.kicker{margin:0;font-family:var(--gothic);font-weight:400;font-size:17px;line-height:1.3;letter-spacing:0.2em;color:#1F4FFF;text-transform:uppercase;overflow-wrap:break-word}
.page-h1{margin:0;font-family:var(--mincho);font-weight:400;font-size:var(--h1,68px);line-height:1.02;letter-spacing:normal;text-transform:uppercase;color:#000;overflow-wrap:break-word;hyphens:auto}
.page-sub{margin:0;font-family:var(--gothic);font-weight:400;font-size:19px;line-height:1.45;color:#595959;overflow-wrap:break-word}
.card .name{font-size:25.0435px;line-height:28px}
.card .desc{font-size:18.2134px;line-height:23.7px}

/* ---------------- contact ---------------- */
/* contact block — sizes taken from the source's computed styles:
   home:      h2 60.75/54.675 ls 3.0375 w400 uppercase | p 20.25/26.325
   category:  h2 61.4703/55.3233 ls normal w700 no-upper | p 27.3201/35.5161
   category meta lines: 27.3201/35.5161 ("Our HQ" is bold in the source) */
.contact-title{margin:0;font:400 60.75px/54.675px var(--mincho);letter-spacing:3.0375px;text-transform:uppercase;color:#fff}
.contact-p{margin:0;font:400 20.25px/26.325px var(--gothic);color:#E6E6E6}
.contact-meta{margin:0;font:400 27.3201px/35.5161px var(--gothic);color:#fff}
.contact-meta.hq{font-weight:700}
.wa{position:fixed;right:22px;bottom:22px;z-index:70;display:inline-flex;align-items:center;height:58px;padding:0 22px;border-radius:29px;background-color:var(--wa);background-image:url('/assets/img/whatsapp_white.png');background-repeat:no-repeat;background-position:14px 50%;background-size:30px 30px;color:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.42);transition:transform .16s,box-shadow .16s}
.wa:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.52)}
.wa span{margin-left:40px;font:700 16px/1 var(--gothic);letter-spacing:.4px;white-space:nowrap}
.wa:active{transform:translateY(0) scale(.97)}

/* ---------------- structural wrappers (desktop: transparent) ---------------- */
.sec,.sec-head,.cards,.adv-wrap,.contact-wrap,.home-hero{display:contents}
.nav-toggle{display:none}

/* ---------------- footer ---------------- */
.site-footer{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;padding:0 45px 40px}
.site-footer .biz{font:400 16px/1.6 var(--gothic);letter-spacing:2px;color:#fff}
.site-footer .copy{margin:14px 0 0;font:400 14px/1.6 var(--gothic);color:rgba(255,255,255,.75)}

/* ==========================================================================
   MOBILE / TABLET  (≤900px)
   The desktop build is an absolute 1440px canvas; below 900px the whole page
   switches to a fluid, single-flow layout (same content, same type scale as
   the source's own mobile rendering).
   ========================================================================== */
@media (max-width:900px){
  .page{width:100%;max-width:100%;height:auto!important;margin:0;overflow:visible;background:#0d0e0f}
  .page-cat{background:#fff}

  /* ---------- header ---------- */
  .site-header{position:sticky;top:0;z-index:60;height:58px;background:#fff;box-shadow:0 1px 10px rgba(0,0,0,.14)}
  .header-inner{position:static;display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;max-width:100%;height:auto;padding:0 14px}
  .brand{position:static;transform:none;width:30px;height:30px;border-radius:8px;font-size:12px;flex:0 0 auto}
  .lang{position:static;transform:none;order:3;margin-left:auto}
  .lang-btn{font:700 15px/1 var(--gothic);gap:7px;height:36px}
  .lang-btn img{width:20px;height:20px}
  .lang-menu{top:42px;right:0;flex-direction:column}
  .nav-toggle{order:2;display:flex;flex-direction:column;justify-content:center;gap:4px;width:38px;height:38px;padding:0;background:none;border:0;cursor:pointer}
  .nav-toggle span{display:block;width:22px;height:2px;margin:0 auto;border-radius:2px;background:#000;transition:transform .2s,opacity .2s}
  .site-header.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .site-header.nav-open .nav-toggle span:nth-child(2){opacity:0}
  .site-header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .main-nav{order:4;position:static;transform:none;display:none;flex-direction:column;align-items:stretch;gap:0;width:100%;margin:0 -14px;padding:4px 0;background:#fff;border-top:1px solid #ededed;box-shadow:0 10px 20px rgba(0,0,0,.08)}
  .site-header.nav-open .main-nav{display:flex}
  .main-nav a{font:700 16px/1 var(--gothic);letter-spacing:1.6px;text-transform:uppercase;padding:15px 18px;width:100%}

  /* ---------- flow reset ---------- */
  .abs{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important}
  .lay{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:auto!important;display:none}
  /* ---------- home hero ----------
     The photo is the full-bleed backdrop and the copy sits on top of it,
     left aligned — the same idea as the desktop hero and as the source's own
     mobile rendering.  A soft gradient keeps the white type readable.      */
  .home-hero{display:flex!important;flex-direction:column;justify-content:center;gap:16px;position:relative!important;height:62vh!important;min-height:340px;margin:0 0 6px;padding:44px 22px;overflow:hidden}
  .home-hero::after{content:'';position:absolute;left:0;right:0;top:0;bottom:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.38) 68%,rgba(0,0,0,.78) 100%),linear-gradient(95deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 40%,rgba(0,0,0,.26) 72%,rgba(0,0,0,.08) 100%)}
  /* On phones the photo is cropped to the model on the right — the black
     space on the left of the original carries no information on a 390px
     screen, so the frame goes to the subject instead. */
  .home-hero .lay-hero{display:block!important;position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:0!important;width:100%!important;height:100%!important;background-size:cover;background-position:right center}
  .hero-h1{position:relative!important;z-index:2;width:100%!important;font-size:30px!important;line-height:1.16!important;letter-spacing:1.1px!important;margin:0;padding:0;text-align:left}
  .hero-sub{position:relative!important;z-index:2;width:100%!important;font-size:17px!important;line-height:1.55!important;margin:0;padding:0;text-align:left;color:#e2e2e2}

  /* ---------- sections + product cards ---------- */
  .sec{display:block;padding:0 16px;margin:0 0 38px}
  .sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
  .section-title{font-size:27px!important;line-height:1.15!important;letter-spacing:1.4px!important;margin:0}
  .view-more{height:40px!important;padding:0 18px!important;font-size:12.5px!important;flex:0 0 auto}
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:18px 10px}
  .card{margin:0!important;padding:0;width:auto!important;height:auto!important;position:static!important}
  .card .thumb{width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:#141619}
  .card .name{font-size:15.5px!important;line-height:1.25!important;margin:10px 0 5px;text-align:center}
  .card .desc{font-size:13px!important;line-height:1.45!important;margin:0;text-align:center;color:#d5d5d5}
  .card .btn{width:100%!important;height:42px!important;padding:0 6px!important;margin-top:12px;font-size:12.5px!important;border-radius:22px}

  /* ---------- core advantages ---------- */
  .adv-wrap{display:block;background-image:var(--advbg);background-size:cover;background-position:center;padding:38px 20px 44px;margin:0 0 34px}
  .adv-title{font-size:26px!important;line-height:1.15!important;text-align:center!important;margin:0 0 10px}
  .adv-sub{font-size:15px!important;line-height:1.5!important;text-align:center!important;margin:0 0 28px;color:#e2e2e2}
  .adv{position:static!important;width:auto!important;margin:0 0 26px}
  .adv h3{font-size:19px!important;line-height:1.3!important;margin:0 0 7px}
  .adv p{position:static!important;left:auto!important;top:auto!important;width:auto!important;font-size:14.5px!important;line-height:1.55!important;color:#e6e6e6}

  /* ---------- contact ---------- */
  .contact-wrap{display:block;padding:0 20px 6px;text-align:center}
  .contact-title{font-size:26px!important;line-height:1.15!important;text-align:center!important;margin:0 0 12px;color:#fff}
  .page-cat .contact-title{color:#111}
  .contact-p{font-size:15px!important;line-height:1.6!important;text-align:center!important;margin:0 auto 16px;max-width:520px}
  .page-cat .contact-p{color:#444}
  .contact-meta{font-size:14px!important;line-height:1.5!important;text-align:center!important;margin:0 0 5px}
  .page-cat .contact-meta{color:#333}
  .contact-wrap img{position:static!important;width:auto!important;height:auto!important;max-width:44%;display:inline-block;margin:8px 4px 0}

  /* ---------- category pages ---------- */
  .page-cat .lay-bg{display:none}
  .hero-photo{width:100%!important;height:auto!important;aspect-ratio:4/3;object-fit:cover}
  .cat-hero{position:static!important;display:block!important;width:auto!important;height:auto!important;padding:0!important}
  .cat-hero-txt{width:auto!important;display:block!important}
  .cat-hero .hero-photo{width:100%!important;height:auto!important;margin:0 0 8px}
  .kicker{font-size:12.5px!important;line-height:1.3!important;letter-spacing:1px!important;margin:18px 16px 8px;text-align:center}
  .page-h1{font-size:clamp(20px,calc(var(--h1,68px) * 0.4),30px)!important;line-height:1.16!important;letter-spacing:.8px!important;margin:0 16px 10px;text-align:center;color:#111}
  .page-sub{font-size:15px!important;line-height:1.6!important;margin:0 auto 24px;padding:0 20px;max-width:520px;color:#595959;text-align:center}
  .page-cat .section-title{padding:0 16px;margin:0 0 18px;text-align:center;font-size:24px!important;letter-spacing:1.2px!important;color:#fff}
  .cards.grid{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:20px 14px;background-image:var(--secbg);background-size:cover;background-position:center;padding:22px 16px 30px;margin:0 0 28px}
  .cards.grid .card .name{font-size:17px!important;margin:10px 0 5px}
  .cards.grid .card .desc{font-size:13.5px!important}
  .cards.grid .card .btn{height:42px!important;font-size:12.5px!important}
  .wa{right:14px;bottom:14px;width:56px!important;height:56px!important;padding:0!important;border-radius:50%;background-position:center;background-size:29px 29px;box-shadow:0 6px 18px rgba(0,0,0,.45)}
  .wa span{display:none}
  .page-cat .contact-wrap{padding-bottom:22px}

  /* ---------- footer ---------- */
  .site-footer{position:static!important;padding:24px 16px 34px}
  .site-footer .biz{font-size:12.5px}
  .site-footer .copy{font-size:12px}
}

@media (max-width:380px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.grid{grid-template-columns:1fr}
  .card .name{font-size:14px!important}
  .card .desc{font-size:11.5px!important}
  .hero-h1{font-size:26px!important}
  .section-title{font-size:22px!important}
}

/* ==========================================================================
   DARK MODE  (prefers-color-scheme: dark)
   The desktop canvas is dark by design and needs no help, but the mobile
   category pages put the hero band and the GET IN TOUCH block on a white
   canvas — that has to follow the system theme.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark}

  /* ---------- category pages (desktop + mobile) ---------- */
  .page-cat{background:#0d0e0f}
  .page-cat .page-h1{color:#fff}
  .page-cat .page-sub{color:#d8dcdf}
  .page-cat .contact-title{color:#fff}
  .page-cat .contact-p{color:#d8dcdf}
  /* the hero photo is a bright blue/white shot — dim it so the top of the
     page does not glare in dark mode (the product grid keeps its look) */
  .page-cat .hero-photo{filter:brightness(.62) saturate(.88)}

  /* ---------- shared chrome ---------- */
  .site-header{background:#15171a;box-shadow:0 1px 10px rgba(0,0,0,.5)}
  .main-nav a{color:#eceff2}
  .lang-btn{color:#eceff2}
  .lang-btn .chev{stroke:#eceff2}
  .lang-menu{background:#15171a;box-shadow:0 8px 26px rgba(0,0,0,.6)}
  .lang-menu a{color:#eceff2}
  .lang-menu a:hover{background:#23262b}

  @media (max-width:900px){
    .site-header{box-shadow:0 1px 10px rgba(0,0,0,.5)}
    .main-nav{background:#15171a;border-top-color:#2b2e33;box-shadow:0 10px 20px rgba(0,0,0,.45)}
    .nav-toggle span{background:#eceff2}

    /* category pages: hero band + GET IN TOUCH follow the dark theme */
    .page-cat{background:#0d0e0f}
    .page-cat .page-h1{color:#f4f6f8}
    .page-cat .page-sub{color:#c2c7cc}
    .page-cat .contact-title{color:#fff}
    .page-cat .contact-p{color:#d8dcdf}
    .page-cat .contact-meta{color:#cfd4d8}
  }
}