/*
Theme Name: PTS KNX
Theme URI: https://phuket-technology.com
Author: Phuket Technology & Services
Description: Black and white KNX smart home theme for Phuket Technology & Services. Bilingual TH/EN with Polylang.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: pts-knx
*/

/* Layout: alternating black / white bands like a wiring cabinet — KNX group addresses (main/middle/sub) label every section. Committed single look: black & white. */
:root{
  --ink:#0b0b0c;        /* near-black bands, text */
  --paper:#ffffff;      /* white bands */
  --fog:#f2f2f0;        /* soft panel */
  --line:#d6d6d3;       /* hairlines on white */
  --line-dk:#2a2a2c;    /* hairlines on black */
  --mute:#6b6b6e;       /* secondary text on white */
  --mute-dk:#a3a3a6;    /* secondary text on black */
  --display:"Bai Jamjuree","IBM Plex Sans Thai",system-ui,sans-serif;
  --body:"IBM Plex Sans Thai","Bai Jamjuree",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--ink)}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
.ga{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dark .ga{color:var(--mute-dk)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:15px;padding:14px 22px;border:1.5px solid currentColor;text-decoration:none;cursor:pointer;background:transparent;color:inherit;transition:background .2s,color .2s}
.btn.solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.solid:hover{background:transparent;color:var(--paper)}
.btn.ghost:hover{background:var(--paper);color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.ink:hover{background:transparent;color:var(--ink)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Header */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--ink);color:var(--paper);border-bottom:1px solid var(--line-dk)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:10px}
.logo{display:block;height:60px;width:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark{width:38px;height:38px;border:2px solid var(--paper);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.04em}
.brand b{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.1;display:block}
.brand small{font-family:var(--mono);font-size:10.5px;color:var(--mute-dk);letter-spacing:.08em;text-transform:uppercase}
.links{display:flex;gap:28px;align-items:center}
.links a{text-decoration:none;font-size:15px;color:var(--mute-dk);transition:color .2s}
.links a:hover,.links a[aria-current]{color:var(--paper)}
.links .btn{color:var(--paper);padding:9px 16px;font-size:14px}
.links .btn:hover{background:var(--paper);color:var(--ink)}
.lang{display:inline-flex;border:1px solid var(--line-dk);background:none;padding:0;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute-dk)}
.lang span{padding:7px 10px;transition:background .2s,color .2s}
.lang span.on{background:var(--paper);color:var(--ink)}
.brand{margin-right:auto}
.menu{display:none;background:none;border:1.5px solid var(--paper);color:var(--paper);font-family:var(--display);padding:7px 12px;cursor:pointer}
@media (max-width:860px){
  .menu{display:block}
  .links{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);flex-direction:column;align-items:flex-start;gap:0;padding:8px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line-dk)}
  .links.open{display:flex}
  .links a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-dk)}
  .logo{height:44px}
  .links .btn{margin-top:14px;width:auto;border-bottom:1.5px solid currentColor}
}

/* Hero */
.dark{background:var(--ink);color:var(--paper)}
.hero{padding-block:72px 88px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:56px;align-items:center}
.hero-bg{position:relative;isolation:isolate;background:var(--ink) url(assets/img/hero.jpg) center 40%/cover no-repeat}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,11,12,.93) 0%,rgba(11,11,12,.82) 38%,rgba(11,11,12,.35) 68%,rgba(11,11,12,.08) 100%)}
.hero-bg .hero{padding-block:112px 104px}
.hero-copy{max-width:680px;min-width:0}
.hero-bg .hero h1{font-size:clamp(40px,5.4vw,72px)}
.hero-bg .lead,.hero-bg .facts span{color:#c9c9cc}
.demo{margin-top:40px}
.hero h1{font-size:clamp(40px,6.4vw,84px);font-weight:700;letter-spacing:-.01em;margin-top:18px}
.hero h1 span{display:block;color:var(--mute-dk);font-weight:500}
.hero .lead{font-size:18px;color:var(--mute-dk);max-width:34em;margin-top:24px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.facts{display:flex;flex-wrap:wrap;gap:0;margin-top:48px;border-top:1px solid var(--line-dk)}
.facts div{padding:16px 28px 0 0;margin-right:28px;min-width:0}
.facts strong{display:block;font-family:var(--display);font-size:22px;font-weight:600}
.facts span{font-size:13px;color:var(--mute-dk)}

/* Keypad demo */
.panel{border:1px solid var(--line-dk);background:#141416;padding:28px;min-width:0;max-width:460px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px}
.panel-head h3{font-size:18px;font-weight:600}
.keypad{display:grid;grid-template-columns:1fr 1fr;gap:10px;aspect-ratio:1/1;max-width:100%;padding:18px;background:#1d1d20;border:1px solid var(--line-dk)}
.key{border:1px solid #3a3a3e;background:#18181a;color:var(--paper);font-family:var(--display);font-size:15px;font-weight:500;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:14px;cursor:pointer;text-align:left;transition:background .25s,color .25s,border-color .25s;min-width:0}
.key .led{width:8px;height:8px;border-radius:50%;background:#3a3a3e;transition:background .25s,box-shadow .25s}
.key small{font-family:var(--mono);font-size:10.5px;color:var(--mute-dk);letter-spacing:.06em}
.key[aria-pressed="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.key[aria-pressed="true"] .led{background:var(--ink)}
.key[aria-pressed="true"] small{color:var(--mute)}
.bus{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--mute-dk);background:#0f0f10;border:1px solid var(--line-dk);padding:12px 14px;height:96px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.bus div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bus div:last-child{color:var(--paper)}

/* Brand strip */
.strip{border-top:1px solid var(--line-dk)}
.strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;padding-block:22px}
.strip span{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-dk)}

/* Sections */
section{padding-block:96px}
.sec-head{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:end;margin-bottom:56px}
.sec-head h2{font-size:clamp(32px,4.4vw,54px);font-weight:700;margin-top:12px}
.sec-head p{color:var(--mute);font-size:17px;max-width:36em}
.dark .sec-head p{color:var(--mute-dk)}

/* Services */
.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink);border-left:1px solid var(--line)}
.svc{padding:32px 28px 34px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:14px;transition:background .25s,color .25s;min-width:0}
.svc:hover{background:var(--ink);color:var(--paper)}
.svc:hover .ga,.svc:hover p{color:var(--mute-dk)}
.svc svg{width:40px;height:40px;stroke:currentColor;fill:none;stroke-width:1.5}
.svc h3{font-size:22px;font-weight:600}
.svc p{color:var(--mute);font-size:15px}
.svc ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.svc li{font-size:12.5px;border:1px solid currentColor;padding:2px 9px;opacity:.75}

/* Wired */
.wired{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.wired h2{font-size:clamp(30px,4vw,48px);font-weight:700;margin-top:12px}
.wired .intro{color:var(--mute-dk);font-size:17px;margin-top:20px;max-width:32em}
.compare{border:1px solid var(--line-dk);min-width:0}
.compare-row{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-bottom:1px solid var(--line-dk)}
.compare-row:last-child{border-bottom:0}
.compare-row>*{padding:14px 16px;font-size:14.5px;min-width:0}
.compare-row>*+*{border-left:1px solid var(--line-dk)}
.compare-row.h>*{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-dk)}
.compare-row .yes{color:var(--paper);font-weight:500}
.compare-row .no{color:var(--mute-dk)}

/* Products */
.brands{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.brands{grid-template-columns:repeat(6,1fr)!important}
.brands .brandcard{grid-column:span 2}
.brands .brandcard.half{grid-column:span 3}
.brands .brandcard:not(.half) .lines li{grid-template-columns:104px 1fr}
.brands .brandcard .name{font-size:clamp(32px,3.6vw,46px)}
.brands .brandcard:not(.half) .brandlogo{height:clamp(32px,3.4vw,44px)}
@media (max-width:1100px){.brands .brandcard,.brands .brandcard.half{grid-column:span 3}.brands .brandcard:nth-child(3){grid-column:1/-1}}
@media (max-width:760px){.brands{grid-template-columns:1fr!important}.brands .brandcard,.brands .brandcard.half,.brands .brandcard:nth-child(3){grid-column:auto}}
.brandcard{border:1.5px solid var(--ink);display:flex;flex-direction:column;min-width:0}
.brandcard .top{padding:32px 32px 26px;border-bottom:1px solid var(--line)}
.brandcard .name{font-family:var(--display);font-size:clamp(36px,5vw,56px);font-weight:700;letter-spacing:.02em;line-height:1}
.brandcard .origin{margin-top:10px}
.brandlogo{display:block;height:clamp(36px,4.4vw,50px);width:auto;max-width:100%}
.strip .wrap{align-items:center}
.strip-logo{height:18px;width:auto;opacity:.65}
.brandcard .desc{padding:22px 32px 0;color:var(--mute);font-size:15.5px}
.lines{list-style:none;margin:0;padding:18px 32px 32px;display:grid;gap:0}
.lines li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px}
.lines li:last-child{border-bottom:0}
.lines b{font-family:var(--display);font-weight:600}
.lines span{color:var(--mute)}
.brandcard.inv{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.brandcard.inv .top,.brandcard.inv .lines li{border-color:var(--line-dk)}
.brand-more{margin:0 32px 28px;align-self:flex-start;font-family:var(--display);font-weight:600;font-size:15px;color:inherit;text-decoration:none;border-bottom:1.5px solid currentColor}
.brandcard.inv .desc,.brandcard.inv .lines span,.brandcard.inv .ga{color:var(--mute-dk)}
.also{margin-top:22px;color:var(--mute);font-size:14.5px}

/* Projects */
.projects{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:24px}
.proj{position:relative;background:var(--fog);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.proj:first-child{grid-row:span 2}
.shot{position:relative;aspect-ratio:16/10;max-width:100%;background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/28px 28px,var(--fog);border-bottom:1px solid var(--line);overflow:hidden}
.proj:first-child .shot{aspect-ratio:auto;flex:1;min-height:300px}
.shot svg{position:absolute;inset:12%;width:76%;height:76%;stroke:var(--ink);fill:none;stroke-width:1.4}
.shot .tag{position:absolute;left:14px;top:14px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:4px 9px;text-transform:uppercase}
.proj .body{padding:22px 24px 26px;background:var(--paper);display:flex;flex-direction:column;gap:8px}
.proj h3{font-size:21px;font-weight:600}
.proj p{color:var(--mute);font-size:15px}
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:4px}

/* Process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-dk)}
.step{padding:26px 22px 0 0;min-width:0}
.step+.step{padding-left:22px;border-left:1px solid var(--line-dk)}
.step .n{font-family:var(--mono);font-size:13px;color:var(--mute-dk)}
.step h3{font-size:19px;font-weight:600;margin-top:12px}
.step p{color:var(--mute-dk);font-size:14.5px;margin-top:8px}

/* About */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px}
.about h2{font-size:clamp(32px,4.4vw,54px);font-weight:700;margin-top:12px}
.about .text{display:flex;flex-direction:column;gap:18px;font-size:16.5px;max-width:38em}
.about .text p{color:#2d2d30}
.timeline{margin-top:12px;border-top:1.5px solid var(--ink)}
.timeline div{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.timeline b{font-family:var(--mono);font-weight:500;font-size:13px;padding-top:2px}
.edit{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:1px dashed var(--mute);color:var(--mute);padding:1px 7px;margin-left:6px;vertical-align:2px}

/* Contact */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.contact h2{font-size:clamp(34px,5vw,62px);font-weight:700;margin-top:12px}
.cinfo{margin-top:36px;display:grid;gap:0;border-top:1px solid var(--line-dk)}
.cinfo div{display:grid;grid-template-columns:110px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-dk)}
.cinfo .ga{align-self:start;padding-top:4px}
.cinfo .v{font-size:17px;user-select:all;min-width:0;overflow-wrap:anywhere}
.copy{background:none;border:1px solid var(--line-dk);color:var(--mute-dk);font-family:var(--mono);font-size:11px;padding:5px 10px;cursor:pointer;letter-spacing:.06em}
.copy:hover{color:var(--paper);border-color:var(--paper)}
form{background:var(--paper);color:var(--ink);padding:36px;display:grid;gap:16px;align-content:start;min-width:0}
form h3{font-size:24px;font-weight:600}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-size:13.5px;font-weight:500;min-width:0}
input,select,textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);background:var(--fog);color:var(--ink);border-radius:0;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);background:var(--paper)}
textarea{min-height:110px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:7px 12px;cursor:pointer;font-weight:400}
.chips input{width:auto;accent-color:var(--ink)}
.note{font-size:13.5px;color:var(--mute);min-height:1.4em}

.as{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.as h2{font-size:clamp(30px,4vw,48px);font-weight:700;margin-top:12px}
.as-lead{color:var(--mute);font-size:17px;margin:18px 0 28px;max-width:34em}
.as-list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.as-list li{display:grid;grid-template-columns:120px 1fr;gap:4px 20px;padding:16px 0;border-bottom:1px solid var(--line)}
.as-list .ga{grid-row:span 2;padding-top:4px}
.as-list b{font-family:var(--display);font-weight:600;font-size:18px}
.as-list span:last-child{color:var(--mute);font-size:15px}
@media (max-width:980px){.as{grid-template-columns:1fr;gap:36px}}
@media (max-width:560px){.as-list li{grid-template-columns:1fr}.as-list .ga{grid-row:auto}}
/* Training */
.tr-band{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.tr-band h2{font-size:clamp(30px,4vw,48px);font-weight:700;margin-top:12px}
.tr-band .lead{color:var(--mute-dk);font-size:17px;margin:18px 0 28px;max-width:34em}
.tr-mini{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tr-mini div{border:1px solid var(--line-dk);padding:22px;min-width:0}
.tr-mini b{display:block;font-family:var(--display);font-size:26px;font-weight:700;margin-top:6px}
.tr-mini span{color:var(--mute-dk);font-size:14px}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute-dk)}
.crumb a{text-decoration:none;color:var(--mute-dk)}
.crumb a:hover{color:var(--paper)}
.courses{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.course{border:1.5px solid var(--ink);display:flex;flex-direction:column;min-width:0}
.course.inv{background:var(--ink);color:var(--paper)}
.course .top{padding:30px 30px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.course.inv .top,.course.inv .facts2 div,.course.inv .mods li{border-color:var(--line-dk)}
.course h3{font-size:clamp(30px,4vw,44px);font-weight:700}
.course .lvl{font-family:var(--mono);font-size:12px;border:1px solid currentColor;padding:3px 9px;white-space:nowrap}
.course .who{padding:20px 30px 0;color:var(--mute);font-size:15.5px}
.course.inv .who,.course.inv .ga,.course.inv .mods span{color:var(--mute-dk)}
.facts2{display:grid;grid-template-columns:repeat(3,1fr);margin:20px 30px 0;border-top:1px solid var(--line)}
.course.inv .facts2{border-color:var(--line-dk)}
.facts2 div{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);min-width:0}
.facts2 div+div{padding-left:12px;border-left:1px solid var(--line)}
.facts2 b{display:block;font-family:var(--display);font-weight:600;font-size:16px}
.mods{list-style:none;margin:0;padding:18px 30px 6px;flex:1}
.mods li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.mods li:last-child{border-bottom:0}
.mods span{font-family:var(--mono);font-size:12px;color:var(--mute);padding-top:3px}
.course .pick{margin:10px 30px 30px;align-self:flex-start}
.course:not(.inv) .pick{border-color:var(--ink)}
.course:not(.inv) .pick:hover{background:var(--ink);color:var(--paper)}
.reg{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px}
.reg h2{font-size:clamp(32px,4.4vw,54px);font-weight:700;margin-top:12px}
.reg .side p{color:var(--mute-dk);margin-top:18px;max-width:30em}
.reg .side ul{margin:24px 0 0;padding:0;list-style:none;border-top:1px solid var(--line-dk)}
.reg .side li{padding:12px 0;border-bottom:1px solid var(--line-dk);font-size:15px;color:var(--mute-dk)}
.reg .side li b{color:var(--paper);font-weight:500}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink)}
.seg label{display:flex;flex-direction:column;gap:2px;padding:14px 16px;cursor:pointer;font-weight:400}
.seg label+label{border-left:1px solid var(--ink)}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg b{font-family:var(--display);font-size:18px;font-weight:600}
.seg small{color:var(--mute);font-size:12.5px}
.seg label:has(input:checked){background:var(--ink);color:var(--paper)}
.seg label:has(input:checked) small{color:var(--mute-dk)}
.seg label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.err{color:#b3261e;font-size:12.5px;font-weight:400;min-height:0}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#b3261e}
.done{border:1.5px solid var(--ink);padding:22px;display:grid;gap:6px}
.done b{font-family:var(--display);font-size:20px}
.admin{margin-top:0}
.admin-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}
.admin-head h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;margin-top:8px}
.tbl{overflow-x:auto;border:1px solid var(--line)}
.tbl table{border-collapse:collapse;width:100%;min-width:900px;font-size:14px}
.tbl th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-align:left;padding:12px 14px;border-bottom:1.5px solid var(--ink);background:var(--fog)}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.tbl .empty{color:var(--mute);padding:24px 14px}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;border:1px solid var(--ink);padding:1px 7px;margin:0 4px 4px 0}
.pill.adv{background:var(--ink);color:var(--paper)}
@media (max-width:980px){.tr-band,.reg,.courses{grid-template-columns:1fr}.tr-band{gap:36px}}
@media (max-width:560px){.facts2{grid-template-columns:1fr}.facts2 div+div{padding-left:0;border-left:0}.course .top,.course .who,.mods{padding-left:22px;padding-right:22px}.facts2{margin-inline:22px}.course .pick{margin-inline:22px}.tr-mini{grid-template-columns:1fr}}
.svc-group{display:flex;align-items:baseline;gap:16px;margin:48px 0 16px}
.svc-group:first-of-type{margin-top:0}
.svc-gh{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.services{grid-template-columns:repeat(4,1fr)!important}
.svc h3{font-size:20px!important}
.quality{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-dk)}
.quality li{padding:14px 16px 14px 0;border-bottom:1px solid var(--line-dk);display:grid;gap:2px;min-width:0}
.quality li:nth-child(even){padding-left:16px;border-left:1px solid var(--line-dk)}
.quality b{font-family:var(--display);font-size:20px;font-weight:600}
.quality span{color:var(--mute-dk);font-size:14px}
.clients{margin-top:48px;padding-top:28px;border-top:1.5px solid var(--ink)}
.clients ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 36px}
.clients li{font-family:var(--display);font-size:clamp(18px,2vw,24px);font-weight:600}
.clients .logos{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.clients .logos li{aspect-ratio:5/3;max-width:100%;border:1px solid var(--line);overflow:hidden;background:var(--paper);min-width:0}
.logos img{display:block;width:100%;height:100%;object-fit:cover}
.clients .logos .txt{display:grid;place-items:center;background:var(--ink);color:var(--paper);text-align:center;font-family:var(--display);font-weight:600;font-size:clamp(10px,1vw,13px);line-height:1.3;padding:8px}
@media (max-width:760px){.clients .logos{grid-template-columns:repeat(3,1fr);gap:8px}.clients .logos .txt{font-size:11px}}
.clients-note{margin-top:16px;color:var(--mute);font-size:15px}
@media (max-width:1100px){.services{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:560px){.services{grid-template-columns:1fr!important}.quality{grid-template-columns:1fr}.quality li:nth-child(even){padding-left:0;border-left:0}}
.results{list-style:none;margin:0 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--ink)}
.results li{padding:18px 18px 18px 0;display:grid;gap:4px;align-content:start;min-width:0}
.results li+li{padding-left:18px;border-left:1px solid var(--line)}
.results b{font-family:var(--display);font-size:clamp(34px,4vw,52px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.results span{font-size:14.5px}
.results small{font-family:var(--mono);font-size:11.5px;color:var(--mute);letter-spacing:.04em}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.fchip{font:inherit;font-family:var(--display);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.fchip span{font-family:var(--mono);font-size:11px;font-weight:400;opacity:.7}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.pimg{position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:var(--line)}
.pimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pcard:hover .pimg img{transform:scale(1.04)}
.pimg .tag{position:absolute;left:12px;top:12px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:4px 9px;text-transform:uppercase}
.pbody{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.pbody h3{font-size:19px;font-weight:600}
.pbody p{color:var(--mute);font-size:14.5px;flex:1}
.next{margin-top:40px;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 28px}
.next ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.next li{border:1px dashed var(--mute);padding:5px 12px;font-size:14px}
@media (max-width:980px){.pgrid{grid-template-columns:1fr 1fr}.results{grid-template-columns:1fr 1fr}.results li:nth-child(3){padding-left:0;border-left:0}.results li:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}
.about-photo{margin:28px 0 0;max-width:380px}
.about-photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;max-width:100%}
.about-photo figcaption,.eimg figcaption{font-family:var(--mono);font-size:11.5px;color:var(--mute);margin-top:8px;letter-spacing:.03em}
#energy{background:var(--fog);border-top:1px solid var(--line)}
.egrid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:start}
.esave{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--ink)}
.esave li{padding:22px 20px 22px 0;border-bottom:1px solid var(--line);display:grid;gap:2px;min-width:0}
.esave li:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
.esave span{font-family:var(--mono);font-size:11.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.esave b{font-family:var(--display);font-size:clamp(44px,6vw,76px);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.esave em{font-style:normal;font-size:15px}
.eimg{margin:0}
.eimg img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%;max-width:100%}
.esrc{margin-top:22px;font-size:13px;color:var(--mute);max-width:60em}
.tr-photo{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;max-width:100%;margin-bottom:16px;border:1px solid var(--line-dk)}
.tr-photos{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:36px}
.tr-photos img{display:block;width:100%;height:100%;aspect-ratio:16/10;object-fit:cover;max-width:100%}
@media (max-width:980px){.egrid{grid-template-columns:1fr}}
@media (max-width:560px){.esave li,.esave li:nth-child(even){padding:16px 10px 16px 0}.esave li:nth-child(even){padding-left:12px}.tr-photos{grid-template-columns:1fr}}
footer{border-top:1px solid var(--line-dk)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-block:28px;font-size:13.5px;color:var(--mute-dk)}
.foot-logo{height:48px;width:auto;display:block}
.foot-l{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}

@media (max-width:980px){
  .hero-grid,.wired,.about,.contact,.sec-head{grid-template-columns:1fr}
  .sec-head{gap:16px}
  .services{grid-template-columns:1fr 1fr}
  .brands,.projects{grid-template-columns:1fr}
  .proj:first-child{grid-row:auto}
  .proj:first-child .shot{aspect-ratio:16/10;min-height:0}
  .steps{grid-template-columns:1fr 1fr}
  .step,.step+.step{padding:22px 16px 22px 0;border-left:0;border-bottom:1px solid var(--line-dk)}
  .panel{max-width:460px}
}
@media (max-width:760px){.hero-bg::before{background:linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.9) 55%,rgba(11,11,12,.95) 100%)}.hero-bg .hero{padding-block:72px 64px}}
@media (max-width:560px){
  section{padding-block:68px}
  .hero{padding-block:48px 64px}
  .services,.steps,.row2{grid-template-columns:1fr}
  .lines li{grid-template-columns:1fr;gap:2px}
  .lines,.brandcard .desc,.brandcard .top{padding-left:22px;padding-right:22px}
  form{padding:24px}
  .cinfo div{grid-template-columns:1fr auto}
  .cinfo .ga{grid-column:1/-1;padding:0}
  .timeline div{grid-template-columns:90px 1fr}
  .compare-row>*{padding:12px 10px;font-size:13.5px}
}

/* after-sales */

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute-dk)}
.crumb a{text-decoration:none;color:var(--mute-dk)}
.crumb a:hover{color:var(--paper)}
.s-hero{padding-block:64px 72px;position:relative}
.s-photo{margin:40px 0 0;max-width:420px}
.s-photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;max-width:100%;border:1px solid var(--line-dk)}
@media (min-width:1100px){.s-hero{display:grid;grid-template-columns:1fr 380px;column-gap:56px;align-items:end}.s-hero>*{grid-column:1}.s-photo{grid-column:2;grid-row:1/6;margin:0;align-self:center}}
.s-hero h1{font-size:clamp(38px,6vw,76px);font-weight:700;margin-top:18px}
.s-hero h1 span{display:block;color:var(--mute-dk);font-weight:500}
.s-hero .lead{font-size:18px;color:var(--mute-dk);max-width:36em;margin-top:22px}
.s-hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

.svcgrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink);border-left:1px solid var(--line)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{border:1.5px solid var(--ink);padding:30px 28px;display:flex;flex-direction:column;gap:14px;min-width:0}
.plan.inv{background:var(--ink);color:var(--paper)}
.plan h3{font-size:26px;font-weight:700}
.plan .for{color:var(--mute);font-size:15px}
.plan.inv .for,.plan.inv .ga{color:var(--mute-dk)}
.plan .price{font-family:var(--display);font-size:22px;font-weight:600;padding-block:12px;border-block:1px solid var(--line)}
.plan.inv .price{border-color:var(--line-dk)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px;flex:1}
.plan li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.plan li::before{content:"";width:10px;height:10px;border:1.5px solid currentColor;margin-top:8px}
.plan li.off{color:var(--mute)}
.plan li.off::before{border-style:dashed}
.plan.inv li.off{color:var(--mute-dk)}
.plan .btn{align-self:flex-start;margin-top:6px}
.plan:not(.inv) .btn{border-color:var(--ink)}
.plan:not(.inv) .btn:hover{background:var(--ink);color:var(--paper)}

.sla{border:1px solid var(--line-dk);min-width:0;overflow-x:auto}
.sla-row{display:grid;grid-template-columns:1.2fr 1.6fr 1fr;border-bottom:1px solid var(--line-dk);min-width:520px}
.sla-row:last-child{border-bottom:0}
.sla-row>*{padding:15px 18px;font-size:15px}
.sla-row>*+*{border-left:1px solid var(--line-dk)}
.sla-row.h>*{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute-dk)}
.sla-row b{font-family:var(--display);font-weight:600}
.lvl{display:inline-flex;align-items:center;gap:8px}
.lvl i{width:10px;height:10px;border:1.5px solid var(--paper)}
.lvl.p1 i{background:var(--paper)}
.lvl.p2 i{background:linear-gradient(90deg,var(--paper) 50%,transparent 50%)}
.sla-row .muted{color:var(--mute-dk)}

.faq{border-top:1.5px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font-family:var(--display);font-weight:600;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{padding:0 0 22px;color:var(--mute);max-width:46em}

@media (max-width:980px){.svcgrid,.plans{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.svcgrid,.plans{grid-template-columns:1fr}.s-hero{padding-block:44px 56px}}

/* brand pages */

.b-hero{padding-block:56px 64px}
.b-logo{display:block;height:clamp(44px,6vw,72px);width:auto;margin-top:28px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.fchip{font:inherit;font-family:var(--display);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer}
.fchip span{font-family:var(--mono);font-size:11px;font-weight:400;opacity:.7}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prod{border:1px solid var(--line);display:flex;flex-direction:column;min-width:0;background:var(--paper)}
.prod-img{position:relative;aspect-ratio:4/3;max-width:100%;background:var(--fog);display:grid;place-items:center;padding:28px}
.prod-img img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.18))}
.prod-img .tag{position:absolute;left:12px;top:12px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.08em;padding:4px 9px;text-transform:uppercase}
.prod-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.prod-body h3{font-size:22px;font-weight:600}
.prod-body p{color:var(--mute);font-size:15px;flex:1}
.specs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.specs li{font-size:12.5px;border:1px solid var(--ink);padding:2px 9px}
.ask{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;margin-top:6px;align-self:flex-start;border-bottom:1.5px solid var(--ink)}
.why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dk)}
.why li{padding:22px 22px 0 0;display:grid;gap:6px;min-width:0}
.why li+li{padding-left:22px;border-left:1px solid var(--line-dk)}
.why b{font-family:var(--display);font-size:22px;font-weight:600}
.why span{color:var(--mute-dk);font-size:15px}
.b-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
.b-cta h2{font-size:clamp(28px,3.6vw,44px);font-weight:700;margin-top:10px}
.b-cta p:not(.ga){color:var(--mute);margin-top:14px;max-width:36em}
.b-cta-btns{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.b-phone{font-family:var(--display);font-size:18px;font-weight:600;user-select:all}
@media (max-width:980px){.prods{grid-template-columns:1fr 1fr}.b-cta{grid-template-columns:1fr}}
@media (max-width:560px){.prods{grid-template-columns:1fr}.why{grid-template-columns:1fr}.why li,.why li+li{padding:18px 0;border-left:0;border-bottom:1px solid var(--line-dk)}}

/* WordPress */
.contact-card{background:var(--paper);color:var(--ink);padding:36px;display:grid;gap:16px;align-content:start;min-width:0}
.contact-card h3{font-size:24px;font-weight:600}
.contact-card p{color:var(--mute)}
.cc-btns{display:flex;flex-wrap:wrap;gap:10px}
.cc-btns .btn:not(.ink){border-color:var(--ink);color:var(--ink)}
.reg-list{margin:0;padding-left:20px;display:grid;gap:4px;font-size:15px}
.lang{display:inline-flex}
.lang a{padding:7px 10px;text-decoration:none;color:var(--mute-dk)}
.lang a.on{background:var(--paper);color:var(--ink)}
.admin-bar header{top:32px}
@media (max-width:782px){.admin-bar header{top:46px}}
/* base reset (was provided by the artifact frame) */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}