:root{
  --cream:#F4F1E8;        /* warm canvas */
  --cream-2:#EFEADE;      /* slightly deeper */
  --card:#FBF9F3;         /* warm white card */
  --ink:#181410;          /* near-black warm */
  --ink-2:#20191270;      /* muted */
  --ink-band:#1B1611;     /* dark section */
  --ink-band-2:#231C15;
  --gold:#DFA43C;         /* Lewis gold */
  --gold-deep:#C4862A;    /* stat amber */
  --line:rgba(24,20,16,.11);
  --line-d:rgba(255,255,255,.14);
  --grey:rgba(24,20,16,.34);   /* two-tone 2nd line */
  --grey-d:rgba(255,255,255,.4);
  --muted:rgba(24,20,16,.62);
  --muted-d:rgba(255,255,255,.66);
  --r:26px; --r-lg:34px; --r-pill:100px;
  --wrap:1240px;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --serif:'Playfair Display',Georgia,serif;
  --serif-alt:'Lora',Georgia,serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--sans);background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.eyebrow{font:600 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.eyebrow.on-dark{color:var(--gold)}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.005em;line-height:1.08}
.h-xl{font-size:clamp(44px,7vw,88px)}
.h-lg{font-size:clamp(36px,5vw,64px)}
.h-md{font-size:clamp(28px,3.4vw,44px)}
.two-tone .b{display:block}
.two-tone .g{color:var(--grey)}
.two-tone.on-dark .g{color:var(--grey-d)}
.serif-i{font-style:italic;color:var(--gold-deep)}
.lede{font-size:17px;color:var(--muted);max-width:46ch}
.lede.on-dark{color:var(--muted-d)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font:600 15px/1 var(--sans);padding:15px 26px;border-radius:var(--r-pill);border:1px solid transparent;cursor:pointer;transition:.2s;white-space:nowrap}
.btn .ar{transition:transform .2s}
.btn:hover .ar{transform:translateX(3px)}
/* ===== Helios button forms: soft dark pill + soft white pill ===== */
.btn-ink{background:#2A241D;color:#fff;border:1px solid rgba(255,255,255,.08)}
.btn-ink:hover{background:#352d24;transform:translateY(-1px)}
.btn-light{background:#FBF9F4;color:var(--ink);box-shadow:0 1px 2px rgba(24,20,16,.12)}
.btn-light:hover{background:#fff;transform:translateY(-1px)}
/* attention CTA — brand green, used for the primary hero action */
.btn-cta{background:#2E9B3F;color:#fff;box-shadow:0 4px 14px rgba(46,155,63,.35)}
.btn-cta:hover{background:#268234;transform:translateY(-1px)}
/* nav pill — frosted translucent (Helios "Book Consultation"), turns solid on scroll */
.btn-nav{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.30);backdrop-filter:blur(8px)}
.btn-nav:hover{background:rgba(255,255,255,.26)}
.nav-wrap.solid .btn-nav{background:var(--ink);color:#fff;border-color:transparent}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost.on-dark{border-color:var(--line-d);color:#fff}
.btn-ghost:hover{background:rgba(24,20,16,.05)}
/* Helios-style video button: dark solid pill + circular play chip */
.hero-watch{padding-left:8px;gap:11px}
.wd-ico{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:9px;flex:none;padding-left:1px}
.btn-sm{padding:11px 18px;font-size:13.5px}

/* announcement */
.announce{background:var(--gold);color:#241a09;text-align:center;font:600 12.5px/1 var(--sans);letter-spacing:.06em;padding:9px 16px}
.announce b{font-weight:700}

/* nav */
.nav-wrap{position:sticky;top:0;z-index:50;padding:14px 20px;transition:.25s}
.nav{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:20px;padding:10px 12px 10px 22px;border-radius:var(--r-pill);
  background:rgba(23,18,13,.42);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);transition:.25s}
.nav-wrap.solid .nav{background:rgba(251,249,243,.9);border-color:var(--line);box-shadow:0 10px 40px -18px rgba(24,20,16,.4)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:20px;font-weight:600;color:#fff;transition:.25s}
.brand img{height:26px;width:auto}
.nav-wrap.solid .brand{color:var(--ink)}
.nav-links{display:flex;gap:26px;margin-left:8px;font:500 14.5px/1 var(--sans);color:rgba(255,255,255,.82)}
.nav-wrap.solid .nav-links{color:var(--muted)}
.nav-links a:hover{color:#fff}.nav-wrap.solid .nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-right .contact{font:500 14.5px/1 var(--sans);color:rgba(255,255,255,.82);padding:0 6px}
.nav-wrap.solid .nav-right .contact{color:var(--muted)}

/* hero */
.hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;margin-top:-84px;padding-top:84px}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;background:#241a10}
.hero-bg img,.hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-vid{z-index:1}
.hero-fallback{z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,15,10,.34) 0%,rgba(20,15,10,.05) 32%,rgba(20,15,10,.12) 60%,rgba(18,13,9,.82) 100%)}
.hero-inner{padding-top:0;padding-bottom:54px}
.hero-grid{display:grid;grid-template-columns:1.3fr .9fr;gap:40px;align-items:flex-end}
.hero h1{color:#fff;font-size:clamp(44px,6.2vw,82px);font-weight:600;line-height:1.06}
.hero h1 .g{color:rgba(255,255,255,.5)}
.hero-right{padding-bottom:8px}
.hero-right p{color:rgba(255,255,255,.86);font-size:17px;margin-bottom:20px;max-width:34ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-cards{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.glass{background:rgba(30,24,18,.5);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);border-radius:20px;color:#fff}
.proof{display:flex;align-items:center;gap:16px;padding:16px 22px 16px 18px}
.proof .ico{width:42px;height:42px;border-radius:12px;background:var(--gold);display:grid;place-items:center;color:#241a09;font-weight:700;flex:none}
.proof .lbl{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.proof .val{font-family:var(--serif);font-size:22px;font-weight:600;margin-top:5px}
.proof .val b{color:var(--gold)}
.proof .sub{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:2px}
.flag{width:26px;height:18px;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* generic section */
section{position:relative}
/* vertical only - these classes are combined with .wrap, and a `padding` shorthand
   here would win the cascade and strip .wrap's side gutters (breaks every tablet). */
.band{padding-top:104px;padding-bottom:104px}
.band-sm{padding-top:76px;padding-bottom:76px}
.ink-band{background:var(--ink-band);color:#fff}
.ink-band .lede{color:var(--muted-d)}
.center{text-align:center}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:44px}
.sec-head .lede{margin-top:0}

/* mission */
.mission{text-align:center;padding-top:112px;padding-bottom:40px}
.mission h2{font-size:clamp(30px,4.4vw,56px);max-width:17ch;margin:18px auto 0;line-height:1.12}
.capsule{max-width:860px;margin:56px auto 0;position:relative;border-radius:220px/150px;overflow:hidden;aspect-ratio:16/9}
.capsule img{width:100%;height:100%;object-fit:cover}
.capsule .play{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.9);padding:11px 20px;border-radius:100px;font:600 14px/1 var(--sans);color:var(--ink)}
.capsule .play .tri{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:9px}
.capsule .cap{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#fff;font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* solution cards row */
.sol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.sol-card{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:.82;color:#fff}
.sol-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.5s}
.sol-card:hover img{transform:scale(1.05)}
.sol-card .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.72) 100%)}
.sol-card .tx{position:absolute;left:20px;right:20px;bottom:20px}
.sol-card .tx h3{font-size:22px;color:#fff}
.sol-card .tx p{font-size:13.5px;color:rgba(255,255,255,.82);margin-top:4px}
.sol-card .tag{position:absolute;top:16px;left:16px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);color:#fff;font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:100px}

/* why tabs (dark) */
.tabs{display:flex;gap:8px;margin-bottom:34px;flex-wrap:wrap}
.tab{padding:11px 20px;border-radius:100px;font:600 14px/1 var(--sans);color:rgba(255,255,255,.6);background:transparent;border:1px solid rgba(255,255,255,.16);cursor:pointer;transition:.2s}
.tab.active{background:#fff;color:var(--ink);border-color:#fff}
.tab:not(.active):hover{color:#fff}
.tab-panel{display:none;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-band-2);border:1px solid rgba(255,255,255,.08)}
.tab-panel.active{display:grid}
.tab-panel .im{min-height:420px}
.tab-panel .im img{width:100%;height:100%;object-fit:cover}
.tab-panel .tp{padding:48px 46px;display:flex;flex-direction:column;justify-content:center}
.tab-panel .tp .eyebrow{margin-bottom:16px}
.tab-panel .tp h3{font-size:34px;margin-bottom:16px}
.tab-panel .tp p{color:var(--muted-d);font-size:16px;margin-bottom:26px;max-width:40ch}

/* breather full-bleed */
.breather{position:relative;min-height:78vh;display:grid;place-items:center;text-align:center;color:#fff;overflow:hidden}
.breather img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.breather .sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,8,.5),rgba(20,14,8,.35));z-index:-1}
.breather h2{font-size:clamp(38px,5.2vw,68px);color:#fff}
.breather .btn{margin-top:26px}
.breather .fcard{position:absolute;right:40px;bottom:40px;text-align:left}

/* stepper */
.step-wrap{display:grid;grid-template-columns:.62fr 1.38fr;gap:40px;align-items:start}
.step-nav{position:sticky;top:120px}
.step-li{display:flex;gap:14px;align-items:center;padding:15px 18px;border-radius:16px;cursor:pointer;transition:.2s;color:var(--grey)}
.step-li .n{font:600 13px/1 var(--sans);opacity:.6}
.step-li .t{font:600 16px/1 var(--sans)}
.step-li.active{background:var(--card);color:var(--ink);box-shadow:0 8px 30px -20px rgba(24,20,16,.5)}
.step-li.active .n{color:var(--gold-deep);opacity:1}
.step-cards{display:flex;flex-direction:column;gap:20px}
.step-card{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--card);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);scroll-margin-top:120px}
.step-card .im{min-height:300px}.step-card .im img{width:100%;height:100%;object-fit:cover}
.step-card .tp{padding:38px 36px;display:flex;flex-direction:column;justify-content:center}
.step-card .tp .st{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.step-card .tp h3{font-size:26px;margin-bottom:12px}
.step-card .tp p{color:var(--muted);font-size:15px}

/* ecosystem */
.eco-hero{position:relative;border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px;background:#241a10}
.eco-hero img,.eco-hero video{width:100%;height:auto;display:block}
.eco-hero .hint{position:absolute;left:24px;bottom:22px;color:#fff;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.eco-hero .eh-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,10,6,.5) 0%,rgba(12,10,6,.02) 26%,rgba(12,10,6,.12) 55%,rgba(12,10,6,.62) 100%);pointer-events:none}
.eco-hero .eh-title{position:absolute;top:clamp(20px,4vw,36px);left:clamp(20px,4vw,36px);z-index:2;color:#fff}
.eco-hero .eh-title .k{font:600 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#fff}
.eco-hero .eh-title .k2{display:block;font:500 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-top:5px}
.eco-hero .eh-stat{position:absolute;z-index:2;background:rgba(18,14,8,.55);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:11px 16px;color:#fff}
.eco-hero .eh-stat .lbl{font:600 9.5px/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.eco-hero .eh-stat .val{font-family:var(--serif);font-size:18px;font-weight:600;margin-top:5px;color:var(--gold)}
.eco-hero .eh-stat .val small{font-family:var(--sans);font-size:11px;font-weight:500;color:rgba(255,255,255,.75);margin-left:2px}
.eco-hero .eh-stat.e1{top:clamp(70px,12vw,110px);right:clamp(20px,5vw,60px)}
.eco-hero .eh-stat.e2{top:44%;left:clamp(20px,4vw,36px)}
.eco-hero .eh-stat.e3{top:44%;right:clamp(20px,5vw,60px)}
.eco-hero .eh-stat.e4{bottom:clamp(50px,8vw,66px);right:clamp(20px,5vw,60px)}
.eco-hero .hint{z-index:2}
@media(max-width:640px){
  .eco-hero{min-height:340px}
  .eco-hero img,.eco-hero video{position:absolute;inset:0;height:100%;object-fit:cover}
  .eco-hero .eh-stat{padding:9px 13px}
  .eco-hero .eh-stat .val{font-size:16px}
  .eco-hero .eh-stat.e2,.eco-hero .eh-stat.e4{display:none}
  .eco-hero .eh-stat.e1{top:auto;bottom:clamp(64px,16vw,90px);right:clamp(14px,4vw,24px)}
  .eco-hero .eh-stat.e3{top:auto;bottom:clamp(64px,16vw,90px);left:clamp(14px,4vw,24px);right:auto}
}
.hot{position:absolute;display:flex;align-items:center;gap:8px;background:rgba(30,24,18,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);color:#fff;padding:8px 13px;border-radius:100px;font:600 13px/1 var(--sans);white-space:nowrap}
.hot .d{width:9px;height:9px;border-radius:50%;background:var(--gold)}
.hw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hw{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column;background:var(--card)}
.hw .im{aspect-ratio:1.5;overflow:hidden;background:#eee}
.hw .im img{width:100%;height:100%;object-fit:cover}
.hw.dark{background:var(--ink-band);border-color:rgba(255,255,255,.08);color:#fff}
.hw .bd{padding:26px 24px 24px;display:flex;flex-direction:column;flex:1}
.hw .bd .eyebrow{margin-bottom:8px}
.hw .bd h3{font-size:24px;margin-bottom:14px}
.hw .bd h3 .s{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:6px}
.hw.dark h3 .s{color:var(--gold)}
.plist{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.plist li{font-size:14px;color:var(--muted)}
.hw.dark .plist li{color:var(--muted-d)}
.plist li b{color:var(--ink);font-weight:600}
.hw.dark .plist li b{color:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.chip{font:600 11.5px/1 var(--sans);padding:8px 12px;border-radius:100px;background:rgba(24,20,16,.05);border:1px solid var(--line);color:var(--muted)}
.hw.dark .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:var(--muted-d)}

/* packages */
.pk-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pk{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;padding:38px}
.pk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* the package photos are bright at the top, so the scrim has to carry the tag + heading too */
.pk .sh{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.54) 0%,rgba(0,0,0,.44) 38%,rgba(0,0,0,.86) 100%)}
.pk .tag{align-self:flex-start;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 13px;border-radius:100px;margin-bottom:auto}
.pk .tag.std{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.pk .tag.prm{background:var(--gold);color:#241a09}
.pk h3{font-size:30px;margin:18px 0 10px}
.pk p{font-size:14.5px;color:rgba(255,255,255,.82);max-width:42ch;margin-bottom:16px}
.pk .feats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.pk .feats span{font:600 12px/1 var(--sans);color:rgba(255,255,255,.9)}
.pk .feats span::before{content:"✓";color:var(--gold);margin-right:5px}
.pk .incl-label{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:11px}
.pk .incl{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.pk .incl li{font:500 13.5px/1.4 var(--sans);color:rgba(255,255,255,.9)}
.pk .incl li::before{content:"✓";color:var(--gold);margin-right:8px;font-weight:700}

/* technology */
.tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.benefit{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.benefit .bi{width:38px;height:38px;border-radius:11px;background:rgba(223,164,60,.14);color:var(--gold-deep);display:grid;place-items:center;flex:none;font-size:17px}
.benefit h4{font:600 16px/1.2 var(--sans);margin-bottom:4px}
.benefit p{font-size:14px;color:var(--muted)}
.tech-visual{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:.92}
.tech-visual img{width:100%;height:100%;object-fit:cover}
.callout{position:absolute;background:rgba(251,249,243,.92);backdrop-filter:blur(6px);border-radius:14px;padding:11px 15px;box-shadow:0 10px 30px -14px rgba(0,0,0,.4)}
.callout .k{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--gold-deep)}
.callout .l{font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:3px}

/* highlights gold band */
.hl-band{background:linear-gradient(160deg,#F6E4BE,#EFD196 60%,#E8C078)}
.hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.hl{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);border-radius:var(--r);padding:34px 30px;backdrop-filter:blur(4px)}
.hl .num{font-family:var(--serif);font-size:60px;font-weight:600;color:var(--ink);line-height:.9}
.hl .lbl{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#6b5320;margin-top:14px}

.hl-support{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;margin-top:36px;text-align:left}
.hl-support .card{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);border-radius:var(--r);padding:32px 34px;backdrop-filter:blur(4px)}
.hl-support .card.prem{background:rgba(255,255,255,.72)}
.hl-support .card h3{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);margin-bottom:18px}
.hl-support .card .lbl2{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#7a5c1c;margin-bottom:18px}
.hl-support ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.hl-support li{font:500 14.5px/1.4 var(--sans);color:var(--ink)}
.hl-support li::before{content:"✓";color:#C8912F;margin-right:9px;font-weight:700}
@media(max-width:760px){.hl-support{grid-template-columns:1fr}}
[data-theme="dark"] .hl-support .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .hl-support .card.prem{background:rgba(255,255,255,.09)}
[data-theme="dark"] .hl-support .card h3,[data-theme="dark"] .hl-support li{color:#F2EDE4}
[data-theme="dark"] .hl-support .lbl2{color:#E2B45C}
[data-theme="dark"] .hl-support li::before{color:#E2B45C}

/* proof cards */
.proof-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pcard{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;padding:34px}
.pcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.pcard .sh{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 45%,rgba(0,0,0,.72))}
.pcard .big{font-family:var(--serif);font-size:52px;font-weight:600;line-height:.95}
.pcard .cap{font-size:16px;color:rgba(255,255,255,.9);margin-top:6px}
.pcard .who{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:10px}
.pcard .btn{position:absolute;right:28px;bottom:34px}

/* faq */
.faq-wrap{max-width:880px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 2px;cursor:pointer;font-family:var(--serif);font-size:21px;font-weight:500;color:var(--ink)}
.faq-q .pm{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;font-size:18px;color:var(--gold-deep);transition:.2s}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 2px 26px;color:var(--muted);font-size:15.5px;max-width:70ch}
.faq-item.open .pm{transform:rotate(45deg)}

/* soft cta card */
.soft{max-width:880px;margin:44px auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px 38px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.soft h3{font-size:24px;margin-bottom:6px}
.soft p{color:var(--muted);font-size:14.5px;max-width:44ch}

/* final cta */
.final{position:relative;border-radius:var(--r-lg);overflow:hidden;text-align:center;color:#fff;padding:96px 32px;margin:0 32px}
.final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.final .sh{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(18,13,8,.62),rgba(18,13,8,.72))}
.final h2{font-size:clamp(40px,5.4vw,72px);color:#fff}
.final .cta{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap}

/* footer */
.footer{background:var(--ink-band);color:#fff;padding:72px 0 34px;margin-top:64px;position:relative;overflow:hidden}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;position:relative;z-index:2}
.f-brand .brand{color:#fff;margin-bottom:16px}
.f-brand .tag{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:20px;margin-bottom:14px}
.f-brand p{color:var(--muted-d);font-size:14.5px;max-width:34ch}
.f-col h5{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:18px}
.f-col a{display:block;color:rgba(255,255,255,.8);font-size:15px;margin-bottom:12px}
.f-col a:hover{color:#fff}
.cert{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;margin-top:6px;max-width:260px}
.cert .stars{color:var(--gold);font-size:13px;letter-spacing:2px}
.cert small{display:block;color:var(--muted-d);font-size:12px;margin-top:3px}
.f-bar{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.12);margin-top:52px;padding-top:24px;position:relative;z-index:2;color:rgba(255,255,255,.5);font-size:13.5px}
.f-bar a{color:rgba(255,255,255,.5);margin-left:24px}
.f-mark{position:absolute;left:0;right:0;bottom:-30px;text-align:center;font-family:var(--serif);font-weight:600;font-size:26vw;line-height:.7;color:rgba(255,255,255,.035);z-index:1;letter-spacing:-.02em;pointer-events:none}

/* reveal */
[data-rv]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-rv].in{opacity:1;transform:none}

@media(max-width:960px){
  .nav-links,.nav-right .contact{display:none}
  .hero-grid,.tech-grid,.step-wrap,.tab-panel,.tab-panel.active,.step-card{grid-template-columns:1fr}
  .sol-grid,.hw-grid,.hl-grid{grid-template-columns:1fr 1fr}
  .pk-grid,.pk-grid,.proof-grid,.f-top{grid-template-columns:1fr}
  .f-top{gap:32px}
  .step-nav{position:static}.step-card .im{min-height:220px}
  .breather .fcard{position:static;margin-top:20px}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  .sol-grid,.hw-grid,.hl-grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .soft{flex-direction:column;align-items:flex-start}
}

/* ===================== DAY / NIGHT THEME ===================== */
[data-theme="dark"]{
  --cream:#151110; --cream-2:#1B1613; --card:#1E1914;
  --ink:#F2EDE4; --ink-band:#100D0A; --ink-band-2:#181310;
  --line:rgba(255,255,255,.12);
  --grey:rgba(255,255,255,.38); --muted:rgba(242,237,228,.66);
}
[data-theme="dark"] .btn-ink{background:#F5F1E8;color:#181410;border-color:transparent}
[data-theme="dark"] .btn-ink:hover{background:#fff}
[data-theme="dark"] .btn-ghost{border-color:rgba(255,255,255,.28);color:var(--ink)}
[data-theme="dark"] .btn-ghost:hover{background:rgba(255,255,255,.08)}
[data-theme="dark"] .nav-wrap.solid .nav{background:rgba(24,19,14,.92);border-color:rgba(255,255,255,.12);box-shadow:0 10px 40px -18px rgba(0,0,0,.6)}
[data-theme="dark"] .nav-wrap.solid .brand{color:#fff}
[data-theme="dark"] .nav-wrap.solid .nav-links{color:rgba(255,255,255,.75)}
[data-theme="dark"] .nav-wrap.solid .nav-links a:hover{color:#fff}
[data-theme="dark"] .nav-wrap.solid .nav-right .contact{color:rgba(255,255,255,.75)}
[data-theme="dark"] .nav-wrap.solid .btn-nav{background:#F5F1E8;color:#181410}
[data-theme="dark"] .hl-band{background:linear-gradient(160deg,#2A2113,#3A2C12 60%,#2E2410)}
[data-theme="dark"] .hl{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .hl .num{color:#F2EDE4}
[data-theme="dark"] .hl .lbl{color:rgba(242,237,228,.65)!important}
[data-theme="dark"] .hl-band .eyebrow{color:#E2B45C!important}
[data-theme="dark"] .hl-band .two-tone .g{color:rgba(242,237,228,.45)!important}
[data-theme="dark"] .hl-band p{color:#CFAF6F!important}
[data-theme="dark"] .qcta .panel{background:linear-gradient(150deg,#211B12 0%,#2A2112 100%);border-color:rgba(223,164,60,.35)}
[data-theme="dark"] .cmpTable{box-shadow:0 34px 70px -40px rgba(0,0,0,.7)}
[data-theme="dark"] .cmpTable thead th.prem{background:linear-gradient(180deg,#3A2D12,#332708);color:#E2B45C}
[data-theme="dark"] .cmpTable tbody td.prem{background:rgba(223,164,60,.12);color:#E2B45C}
[data-theme="dark"] .cmpTable tbody tr:hover th,[data-theme="dark"] .cmpTable tbody tr:hover td{background:rgba(255,255,255,.04)}
[data-theme="dark"] .announce{background:#C4862A;color:#1B1207}
[data-theme="dark"] .capsule .play{background:rgba(30,25,20,.92);color:#F2EDE4}
[data-theme="dark"] .capsule .play .tri{background:#F2EDE4;color:#181410}

/* theme toggle + mobile nav */
.theme-toggle{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;transition:.25s;flex:none;padding:0}
.theme-toggle:hover{background:rgba(255,255,255,.22)}
.nav-wrap.solid .theme-toggle{border-color:var(--line);background:transparent;color:var(--ink)}
[data-theme="dark"] .nav-wrap.solid .theme-toggle{border-color:rgba(255,255,255,.25);color:#fff;background:rgba(255,255,255,.08)}
.menu-btn{display:none;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff;font-size:16px;line-height:1;cursor:pointer;flex:none;place-items:center;padding:0}
.nav-wrap.solid .menu-btn{border-color:var(--line);background:transparent;color:var(--ink)}
[data-theme="dark"] .nav-wrap.solid .menu-btn{border-color:rgba(255,255,255,.25);color:#fff}
.mnav{display:none;position:fixed;top:96px;left:14px;right:14px;z-index:199;flex-direction:column;gap:2px;padding:14px;border-radius:22px;background:var(--card);border:1px solid var(--line);box-shadow:0 26px 60px -18px rgba(0,0,0,.4)}
.mnav.open{display:flex}
.mnav a{display:block;padding:13px 16px;border-radius:12px;font:500 16px/1.2 var(--sans);color:var(--ink)}
.mnav a:active{background:rgba(128,128,128,.14)}
.mnav .mq{margin-top:8px;text-align:center;background:#2A241D;color:#fff;border-radius:100px;padding:15px}
[data-theme="dark"] .mnav .mq{background:#F5F1E8;color:#181410}
@media(max-width:960px){.menu-btn{display:grid}}
/* QC fixes: btn-light must keep dark text in dark mode; callout labels pinned (light chip on photos); tiny-screen nav squeeze */
[data-theme="dark"] .btn-light{color:#181410}
[data-theme="dark"] .btn-light:hover{color:#181410;background:#fff}
[data-theme="dark"] .callout .l{color:rgba(24,20,16,.62)}
[data-theme="dark"] .callout .k{color:#C4862A}
@media(max-width:420px){.btn-nav{font-size:12px;padding:9px 12px}.nav{gap:10px;padding:8px 10px 8px 14px}}
/* dark-mode fixes: hero CTAs sit on VIDEO (theme-independent) — keep original pairing; active tab pins dark text */
[data-theme="dark"] .hero-cta .btn-ink,[data-theme="dark"] .hero-cta .btn-ink:hover{background:#2A241D;color:#fff;border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .hero-cta .btn-light{background:#FBF9F4;color:#181410}
[data-theme="dark"] .tab.active{background:#F5F1E8;color:#181410;border-color:#F5F1E8}

/* mobile visual-QC fixes */
@media(max-width:600px){
  .pcard .btn{position:static;margin-top:16px;align-self:flex-start}
}
.tbl-hint{display:none}
@media(max-width:760px){
  .tbl-hint{display:block;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;text-align:right}
}

/* ==========================================================================
   Fox-ESS-style product index  (.pcx)
   A centred scroll-progress line with a travelling gold dot, and product
   cards interlocking left/right along it. Each card is a whole-card link
   into its individual product page.
   ========================================================================== */
.pcx-head{text-align:center;max-width:680px;margin:0 auto}
.pcx-head h2{margin-top:14px}
.pcx-head .lede{margin:18px auto 0;max-width:56ch;text-align:center}
.pcx-cue{display:grid;place-items:center;width:52px;height:52px;margin:30px auto 0;border-radius:50%;border:1px solid var(--line);color:var(--gold-deep);font-size:17px;transition:.3s;animation:pcxbob 2.4s ease-in-out infinite}
.pcx-cue:hover{background:var(--gold);border-color:var(--gold);color:#241a09;animation:none}
@keyframes pcxbob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.ink-band .pcx-cue{border-color:var(--line-d);color:var(--gold)}

.pcx{position:relative;margin-top:60px}
.pcx-line{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--line);border-radius:2px}
.ink-band .pcx-line{background:var(--line-d)}
.pcx-prog{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;background:linear-gradient(180deg,rgba(223,164,60,.35),var(--gold) 30%,var(--gold-deep));transition:height .12s linear}
.pcx-dot{position:absolute;left:50%;top:0;width:29px;height:29px;margin-left:-14.5px;margin-top:-14.5px;border-radius:50%;background:rgba(223,164,60,.2);display:grid;place-items:center;opacity:0;transition:opacity .4s ease;pointer-events:none}
.pcx-dot::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(223,164,60,.18)}

.pcx-list{list-style:none;position:relative;margin:0;padding:0}
.pcx-li{width:45%;opacity:0;transform:translate(-44px,56px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.pcx-li:nth-child(even){margin-left:55%;transform:translate(44px,56px)}
.pcx-li+.pcx-li{margin-top:-78px}
.pcx-li.in{opacity:1;transform:none}

.pcx-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px 28px;transition:transform .42s cubic-bezier(.2,.7,.2,1),box-shadow .42s cubic-bezier(.2,.7,.2,1),border-color .42s ease}
.pcx-card:hover{transform:translateY(-7px);border-color:rgba(223,164,60,.55);box-shadow:0 34px 66px -34px rgba(24,20,16,.42)}
.pcx-card .k{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.pcx-card h3{font-size:clamp(24px,2.2vw,30px);margin:12px 0 10px}
.pcx-card p{font-size:14.5px;line-height:1.55;color:var(--muted)}
.pcx-card .fam{margin-top:12px;font:600 13px/1.5 var(--sans);color:var(--ink)}
.pcx-card .fam span{color:var(--grey);font-weight:500}
.pcx-card .im{margin-top:22px;border-radius:18px;overflow:hidden;aspect-ratio:1.6;background:var(--cream-2)}
.pcx-card .im img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pcx-card:hover .im img{transform:scale(1.07)}

/* Fox expanding pill: a bare circle that grows a label on hover */
.fxb{display:inline-flex;align-items:center;align-self:flex-start;margin-top:22px;padding:2px;height:46px;border-radius:100px;border:1px solid var(--line);background:transparent;transition:background .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease}
.fxb .t{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;font:600 14px/1 var(--sans);color:var(--ink);transition:max-width .45s cubic-bezier(.2,.7,.2,1),opacity .3s ease,padding .45s cubic-bezier(.2,.7,.2,1)}
.fxb .c{width:40px;height:40px;border-radius:50%;background:var(--gold);color:#241a09;display:grid;place-items:center;flex:none;font-size:15px;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.pcx-card:hover .fxb,.srow:hover .fxb{border-color:rgba(223,164,60,.6);background:rgba(223,164,60,.1)}
.pcx-card:hover .fxb .t,.srow:hover .fxb .t{max-width:220px;opacity:1;padding:0 15px 0 19px}
.pcx-card:hover .fxb .c,.srow:hover .fxb .c{transform:translateX(2px)}
.ink-band .fxb{border-color:var(--line-d)}
.ink-band .fxb .t{color:#fff}

@media(max-width:900px){
  .pcx{margin-top:44px}
  .pcx-line{left:16px}
  .pcx-dot{left:16px}
  .pcx-li,.pcx-li:nth-child(even){width:auto;margin-left:52px;transform:translate(28px,44px)}
  .pcx-li.in{transform:none}
  .pcx-li+.pcx-li{margin-top:20px}
}
@media(max-width:560px){
  .pcx-card{padding:24px 20px 22px}
  .pcx-li,.pcx-li:nth-child(even){margin-left:40px}
  .pcx-line,.pcx-dot{left:12px}
  /* on small screens the label is always visible - no hover to reveal it */
  .fxb .t{max-width:220px;opacity:1;padding:0 15px 0 19px}
}

/* dark theme */
[data-theme="dark"] .pcx-card{background:var(--card);border-color:var(--line)}
[data-theme="dark"] .pcx-card:hover{box-shadow:0 34px 66px -30px rgba(0,0,0,.7)}
[data-theme="dark"] .fxb .t{color:var(--ink)}

/* home "Core hardware" cards are now whole-card links into the product pages */
a.hw{color:inherit;text-decoration:none}
a.hw:hover{transform:translateY(-7px);border-color:rgba(223,164,60,.5);box-shadow:0 32px 62px -34px rgba(24,20,16,.42)}
a.hw,.hw .im img{transition:transform .42s cubic-bezier(.2,.7,.2,1),box-shadow .42s cubic-bezier(.2,.7,.2,1),border-color .42s ease}
.hw .im img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
a.hw:hover .im img{transform:scale(1.07)}
.hw .fxb{margin-top:20px}
.hw.dark .fxb{border-color:var(--line-d)}
.hw.dark .fxb .t{color:#fff}
a.hw:hover .fxb{border-color:rgba(223,164,60,.6);background:rgba(223,164,60,.1)}
a.hw:hover .fxb .t{max-width:220px;opacity:1;padding:0 15px 0 19px}
a.hw:hover .fxb .c{transform:translateX(2px)}
[data-theme="dark"] a.hw:hover{box-shadow:0 32px 62px -30px rgba(0,0,0,.7)}
@media(max-width:560px){.hw .fxb .t{max-width:220px;opacity:1;padding:0 15px 0 19px}}

/* breadcrumb on the individual product pages (Fox pattern: Home / Products / <family>) */
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:500 12.5px/1 var(--sans);color:var(--muted-d);margin-bottom:20px}
.crumb a{color:var(--muted-d);transition:color .25s ease}
.crumb a:hover{color:var(--gold)}
.crumb span{opacity:.4}
.crumb b{color:#fff;font-weight:600}

/* "Important to know" disclosure inside a dark series row (client-required safety note) */
.note-imp{display:flex;flex-direction:column;gap:5px;border-left:2px solid var(--gold);padding:2px 0 2px 16px;margin-bottom:26px;max-width:46ch}
.note-imp b{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
/* the inverter series rows are dark regardless of a .dark class, so default to the
   on-dark ink and only lighten it where the note sits on a cream surface */
.note-imp span{font:400 14px/1.55 var(--sans);color:var(--muted-d)}
.band-sm .note-imp span,.qcta .note-imp span{color:var(--muted)}

/* grid-reliability decision guide (3-up) */
.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.guide .g{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px 28px;display:flex;flex-direction:column;transition:transform .38s cubic-bezier(.2,.7,.2,1),border-color .38s ease}
.guide .g:hover{transform:translateY(-5px);border-color:rgba(223,164,60,.5)}
.guide .g .k{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.guide .g h4{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--ink);margin:12px 0 10px}
.guide .g p{font-size:14.5px;line-height:1.55;color:var(--muted);margin-bottom:20px}
.guide .g .go{margin-top:auto;font:600 14px/1 var(--sans);color:var(--gold-deep);display:inline-flex;align-items:center;gap:7px}
.guide .g:hover .go{gap:11px}
@media(max-width:900px){.guide{grid-template-columns:1fr}}
[data-theme="dark"] .guide .g{background:var(--card)}

/* ==========================================================================
   Product-page footer navigation: jump to the other two families, or take
   the whole thing as an installed package.
   ========================================================================== */
.xnav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.xnav a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:230px;border-radius:var(--r-lg);overflow:hidden;padding:32px 30px;color:#fff;isolation:isolate}
.xnav a img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
/* the product shots are pale (white units on light walls) - the scrim has to
   carry the eyebrow and heading, not just the bottom edge */
.xnav a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.58) 45%,rgba(0,0,0,.86) 100%);transition:background .4s ease}
.xnav a:hover img{transform:scale(1.06)}
.xnav a:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.56) 0%,rgba(0,0,0,.64) 45%,rgba(0,0,0,.9) 100%)}
.xnav .k{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.xnav h3{font-size:clamp(24px,2.4vw,30px);color:#fff;margin:10px 0 8px}
.xnav p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.82);max-width:34ch}
.xnav .go{margin-top:16px;font:600 14px/1 var(--sans);color:#fff;display:inline-flex;align-items:center;gap:8px}
.xnav a:hover .go{gap:12px}

/* the "take the whole system" panel */
.xpack{margin-top:16px;border-radius:var(--r-lg);background:linear-gradient(150deg,#FBF9F3 0%,#FBEFD8 100%);border:1px solid rgba(223,164,60,.4);padding:clamp(34px,4vw,54px) clamp(26px,4vw,52px);display:flex;flex-wrap:wrap;align-items:center;gap:26px;box-shadow:0 34px 80px -46px rgba(90,64,20,.4)}
.xpack .xp-txt{flex:1 1 380px}
.xpack .k{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.xpack h3{font-size:clamp(24px,2.6vw,34px);color:var(--ink);margin:12px 0 10px;max-width:22ch}
.xpack p{font-size:15px;line-height:1.6;color:var(--muted);max-width:52ch}
.xpack .xp-btns{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
@media(max-width:820px){
  .xnav{grid-template-columns:1fr}
  .xnav a{min-height:190px}
  .xpack .xp-btns{width:100%}
  .xpack .xp-btns .btn{flex:1 1 auto;justify-content:center}
}
[data-theme="dark"] .xpack{background:linear-gradient(150deg,#241d14 0%,#2e2415 100%);border-color:rgba(223,164,60,.32)}
[data-theme="dark"] .xpack h3{color:#F5EFE4}
[data-theme="dark"] .xpack p{color:var(--muted-d)}

/* =====================================================================
   TOUCH DEVICES (iPad / iPhone)
   Scoped to coarse pointers, so desktop rendering is untouched.
   1. Tap targets brought up to Apple's 44px minimum.
   2. No label under 12px - a tablet is read at arm's length.
   `!important` is needed only because several of these labels are
   redeclared in per-page <style> blocks that load after this file.
   ===================================================================== */
@media (hover:none) and (pointer:coarse){

  /* --- 1. tap targets --- */
  .f-col a{padding:11px 0;margin-bottom:0}
  .f-bar{flex-wrap:wrap;gap:6px 0}
  .f-bar a{display:inline-block;padding:10px 0;margin-left:22px}
  .nav-links a{display:inline-block;padding:11px 0}
  .footer .brand{display:inline-block;padding:6px 0}
  a[href^="mailto:"],a[href^="tel:"]{display:inline-block;padding:11px 0}
  /* breadcrumbs on the product and package pages */
  nav.crumb a,.bt-hero-crumb a,.pk-crumb a{display:inline-block;padding:9px 0}
  /* hotspot pins on the home ecosystem image */
  .eco-house .eh a span:first-child{font-size:12px !important}
  .eco-house .eh a{padding:4px 0}
  /* inline "View source" style links inside definition lists */
  dd a{display:inline-block;padding:8px 0}
  .mg-dl{padding:10px 0}
  .mg-k,.mg-s span,.mg-i{font-size:12px !important}
  .hero-dots button{width:26px;height:26px;padding:0}
  .pcx-cue,.hero-arrow{min-width:48px;min-height:48px}

  /* --- 2. minimum legible label size --- */
  .k,.l,.lbl,.tl,.tsub,.cat,.tag,.s-tag,.chip,.badge,.hint,
  .prm-badge,.f-col h5,.callout h5,.sbox h5,.eyebrow,
  .dl-row .dt span,.dl-row .meta,.meta,.fn,.fn-note,.amc-fn{
    font-size:12px !important;
  }
  .hs-item .k{font-size:12px !important}

  /* page-local micro-labels (declared in each page's own <style> block) */
  .rib,.ribbon,.k2,.kk,.ev-lbl,.tech,.mh,.gl-lbl,.incl-label,.cr,.lbl2,
  .tbl-hint,.pill,.ft,.pk-lbl,.num,.sh-pillar .t,.mod-cap span,
  .shade-panel h4,.sh-note h5,.amc-t dl dt,.ev dt,.ev .neg dt,
  .specs dt,.glance .gl-lbl,.model .pill{
    font-size:12px !important;
  }
  /* the two play glyphs stay small on purpose - they are icons, not labels */
  .wd-ico,.tri{font-size:11px !important}

  /* --- 3. no sticky :hover state left behind after a tap --- */
  .pcx-card:hover,.srow:hover{transform:none}
  .fxb .t{max-width:220px;opacity:1;padding:0 15px 0 19px}
}

@media (hover:none) and (pointer:coarse) and (min-width:961px){
  .nav-right .contact{display:inline-block;padding:11px 0}
}