:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}
:root{
  --paper:#F3F6F9; --surface:#FFFFFF; --ink:#0F2240; --muted:#586981; --navy:#033C7F; --blue:#1F6FD6;
  --steel:#C9D3DE; --line:#DAE2EB; --bore:#E6ECF2; --strata1:#EEF2F6; --strata2:#E8EDF3; --strata3:#E2E8EF; --strata4:#DCE3EB;
  --ok:#1F6FD6; --glow:rgba(31,111,214,.55); --shadow:0 18px 40px -18px rgba(3,40,90,.35);
  --hdr:68px;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B1627; --surface:#101E33; --ink:#E4ECF6; --muted:#98A8BE; --navy:#8DB8F2; --blue:#5B9CF2;
    --steel:#2B3D57; --line:#22344C; --bore:#13243B; --strata1:#0D1A2D; --strata2:#0F1E33; --strata3:#112239; --strata4:#13263F;
    --glow:rgba(91,156,242,.6); --shadow:0 18px 40px -18px rgba(0,0,0,.7); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0B1627; --surface:#101E33; --ink:#E4ECF6; --muted:#98A8BE; --navy:#8DB8F2; --blue:#5B9CF2;
  --steel:#2B3D57; --line:#22344C; --bore:#13243B; --strata1:#0D1A2D; --strata2:#0F1E33; --strata3:#112239; --strata4:#13263F;
  --glow:rgba(91,156,242,.6); --shadow:0 18px 40px -18px rgba(0,0,0,.7); color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr) + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;line-height:1.08;margin:0;letter-spacing:-.01em}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.btn{display:inline-flex;align-items:center;gap:.5em;font:600 16px/1 "Barlow",sans-serif;padding:14px 22px;border-radius:999px;border:1.5px solid var(--blue);background:var(--blue);color:#fff;text-decoration:none;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:var(--navy);border-color:var(--navy)}
.btn.ghost{background:transparent;color:var(--blue)}
.btn.ghost:hover{background:var(--blue);color:#fff}
:root[data-theme="dark"] .btn:hover{color:#0B1627}
.btn.sm{padding:10px 16px;font-size:15px}

/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1440px;margin:0 auto;padding:0 28px}
.logo img{height:44px;width:auto;display:block}


.nav{display:flex;align-items:center;gap:4px}
.nav a,.nav button{font:500 16px/1 "Barlow",sans-serif;color:var(--ink);text-decoration:none;background:none;border:0;padding:12px 14px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav a:hover,.nav button:hover,.nav button[aria-expanded="true"]{background:color-mix(in srgb,var(--blue) 10%,transparent);color:var(--blue)}
.nav .chev{width:10px;height:10px;transition:transform .2s}
.nav button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.nav a[aria-current="page"]{color:var(--blue);box-shadow:inset 0 -2px 0 var(--blue);border-radius:0}
@media (max-width:900px){.nav a{font-size:15px;padding:10px 9px}.logo img{height:38px}.hdr-in{padding:0 16px;gap:10px}}
@media (max-width:640px){
  :root{--hdr:104px}
  .hdr-in{flex-direction:column;align-items:stretch;justify-content:center;gap:4px;padding:8px 12px 0}
  .logo img{height:34px}
  .nav{overflow-x:auto;gap:0;scrollbar-width:none;margin:0 -12px;padding:0 6px}
  .nav::-webkit-scrollbar{display:none}
  .nav{justify-content:space-between}.nav a{white-space:nowrap;font-size:13.5px;padding:10px 5px}
}
/* mega panel */
.mega{position:fixed;top:calc(var(--hdr) + env(safe-area-inset-top,0px));left:0;right:0;z-index:49;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);display:none;max-height:calc(100vh - var(--hdr) - 20px);overflow:auto}
.mega.open{display:block;animation:drop .22s ease-out}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mega-in{max-width:1440px;margin:0 auto;padding:26px 28px 30px;display:grid;grid-template-columns:300px 1fr;gap:32px}
.tabs{display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);padding-right:18px}
.tabs button{text-align:left;font:500 16px/1.25 "Barlow",sans-serif;color:var(--ink);background:none;border:0;border-left:3px solid transparent;padding:11px 12px;cursor:pointer;border-radius:0 6px 6px 0}
.tabs button[aria-selected="true"]{border-left-color:var(--blue);color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,transparent);font-weight:600}
.tabs button:hover{color:var(--blue)}
.tabs .all{margin-top:10px;font-weight:600;color:var(--blue);text-decoration:none;padding:11px 12px}
.panel h3{font-size:26px;font-weight:600}
.panel p{color:var(--muted);margin:8px 0 18px;max-width:62ch}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 22px}
.plist a{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;text-decoration:none;color:var(--ink);padding:8px;border-radius:8px}
.plist a:hover{background:color-mix(in srgb,var(--blue) 7%,transparent);color:var(--blue)}
.plist span{font-weight:500;line-height:1.25}
@media (max-width:860px){.mega-in{grid-template-columns:1fr}.tabs{border-right:0;padding-right:0;flex-direction:row;overflow-x:auto;border-bottom:1px solid var(--line)}.tabs button{border-left:0;border-bottom:3px solid transparent;white-space:nowrap;border-radius:6px 6px 0 0}.tabs button[aria-selected="true"]{border-bottom-color:var(--blue)}}

/* horizontal tool thumbnail */
.htool{display:flex;justify-content:center;align-items:flex-end;gap:8px;height:var(--th,220px)}
.htool img{height:100%;width:auto;max-width:none;filter:drop-shadow(0 10px 12px rgba(3,40,90,.18));transition:transform .4s}

/* hero string */
.hero{position:relative}
.stage{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--paper)}
.stage svg.bg{position:absolute;inset:0;width:100%;height:100%}
.strip{position:absolute;inset:0}
.bore{position:absolute;left:0;top:0;background:var(--bore);border-left:2px solid var(--steel);border-right:2px solid var(--steel);box-shadow:0 0 0 3px var(--line)}
.seg{position:absolute;left:0;top:0;display:block;transform-origin:50% 50%}
.seg img{display:block;width:100%;height:100%;object-fit:fill;transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .45s,opacity .45s;transform-origin:50% 50%}
a.seg{cursor:pointer}
.stage.running .seg img{filter:saturate(.25) brightness(1.04);opacity:.55}
.stage.running .seg.on img{filter:saturate(1.3) brightness(1.08) drop-shadow(0 0 6px var(--glow)) drop-shadow(0 0 16px var(--glow));opacity:1;transform:scale(1.35,1.06)}
a.seg:hover img{filter:saturate(1.2) brightness(1.08) drop-shadow(0 0 5px var(--glow))!important;opacity:1!important}
.tip{position:absolute;z-index:6;pointer-events:none;background:var(--ink);color:var(--paper);font:500 14px/1 "Barlow",sans-serif;padding:8px 10px;border-radius:6px;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;white-space:nowrap}
.tip.show{opacity:1;transform:none}
.intro{position:absolute;z-index:3;transition:opacity .45s,transform .45s}
.intro h1{font-size:clamp(34px,3.7vw,56px);font-weight:600;color:var(--navy);max-width:15ch}
.intro p{font-size:clamp(17px,1.35vw,20px);color:var(--muted);max-width:44ch;margin:18px 0 26px}
.intro .row{display:flex;gap:12px;flex-wrap:wrap}
.stage.running .intro{opacity:0;transform:translateY(-14px);pointer-events:none}
.hint{position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);font:500 14px/1 "Barlow",sans-serif;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .3s}
.hint svg{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(5px)}}
.focus{position:absolute;z-index:4;display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;pointer-events:none;opacity:0;transition:opacity .3s}
.stage.running .focus{opacity:1;pointer-events:auto}
.focus .tool{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.focus .tool img{display:block;height:100%;width:auto;filter:drop-shadow(0 22px 26px rgba(3,40,90,.28))}
.focus .txt{max-width:430px}
.focus .pos{font:500 15px/1.2 "Barlow",sans-serif;color:var(--blue);margin-bottom:10px}
.focus h2{font-size:clamp(28px,2.7vw,42px);font-weight:600;color:var(--ink)}
.focus .sub{color:var(--navy);font-size:18px;margin:10px 0 12px;line-height:1.35}
.focus .desc{color:var(--muted);font-size:16px;margin:0 0 16px}
.focus dl{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0 0 20px;font-size:15px}
.focus dt{color:var(--muted)}.focus dd{margin:0;font-weight:600}
.focus .row{display:flex;gap:10px;flex-wrap:wrap}
.focus .txt.enter>*{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
.focus .txt.enter>*:nth-child(2){animation-delay:.05s}.focus .txt.enter>*:nth-child(3){animation-delay:.1s}.focus .txt.enter>*:nth-child(4){animation-delay:.15s}.focus .txt.enter>*:nth-child(5){animation-delay:.2s}.focus .txt.enter>*:nth-child(6){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rail{position:absolute;z-index:4;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:5px;opacity:0;transition:opacity .3s}
.stage .rail{opacity:1}
.rail button{display:block;width:14px;height:16px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.rail button::before{content:"";position:absolute;left:5px;top:2px;width:4px;height:12px;border-radius:2px;background:var(--steel);transition:background .3s}
.rail button:hover::before{background:var(--navy)}
.rail button.on::before{background:var(--blue)}
.rail button.on{height:28px}.rail button.on::before{height:24px}
@media (max-width:760px){
  .focus{grid-template-columns:1fr;gap:12px;align-items:start;align-content:start}
  .focus .tool{justify-content:flex-start}
  .focus h2{font-size:24px}.focus .sub{font-size:15px;margin:6px 0 8px}.focus .desc{display:none}.focus dl{font-size:13px;margin-bottom:12px}
  .focus .pos{font-size:13px;margin-bottom:6px}
  .rail{display:none}.intro .row .btn{padding:12px 16px;font-size:15px}
  .intro h1{font-size:34px}.intro p{font-size:16px;margin:12px 0 18px}
}

/* sections */
section.block{padding:96px 0}
.lead{font-size:clamp(30px,3.2vw,46px);font-weight:600;color:var(--navy);max-width:22ch}
.kicker{color:var(--muted);max-width:60ch;margin:16px 0 0;font-size:18px}
.rack{margin-top:48px;border-top:1px solid var(--line)}
.rack a{--th:230px;display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:36px;align-items:center;padding:26px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:background .2s}
.rack a:hover{background:color-mix(in srgb,var(--blue) 5%,transparent)}
.rack a:hover .htool img,.prow:hover .htool img,.gcard:hover .htool img{transform:translateY(-4px)}
.rack h3{font-size:26px;font-weight:600}
.rack p{margin:6px 0 0;color:var(--muted);font-size:16px;max-width:48ch}
.rack .count{font-weight:600;color:var(--blue);white-space:nowrap}
@media (max-width:760px){.rack a{--th:170px;grid-template-columns:84px 1fr;gap:18px}.rack .count{grid-column:2}}
.band{background:var(--navy);color:#fff}
:root[data-theme="dark"] .band{background:#0E2A52}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band{background:#0E2A52}}
.band .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;padding-top:72px;padding-bottom:72px}
.band h2{font-size:clamp(28px,3vw,42px);font-weight:600;max-width:20ch}
.band p{color:#C8D8EE;margin:14px 0 0;max-width:52ch}
.band .btn{background:#fff;color:#033C7F;border-color:#fff}
.band .btn:hover{background:#DCE8F8}
@media (max-width:760px){.band .wrap{grid-template-columns:1fr}}

/* page hero */
.phero{padding:calc(var(--hdr) + 64px) 0 48px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--strata2),var(--paper))}
.crumbs{font-size:15px;color:var(--muted);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:8px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--blue)}
.crumbs span[aria-hidden]{opacity:.5}
.phero h1{font-size:clamp(38px,4.6vw,64px);font-weight:600;color:var(--navy);max-width:20ch}
.phero p{color:var(--muted);font-size:19px;max-width:64ch;margin:16px 0 0}

/* group grid */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));gap:26px;margin-top:48px}
.gcard{display:flex;flex-direction:row;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:4px 22px 4px 4px;overflow:hidden;transition:border-color .2s,transform .2s}
.gcard:hover{border-color:var(--blue);transform:translateY(-2px)}
.gcard .pic{--th:250px;flex:0 0 130px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,var(--strata1),var(--strata3));padding:22px 12px}
.gcard .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.gcard h3{font-size:25px;font-weight:600}
.gcard .tag{color:var(--navy);font-weight:600}
.gcard p{margin:0;color:var(--muted);font-size:16px;flex:1}
.gcard .more{color:var(--blue);font-weight:600;margin-top:8px}

/* product list rows */
.prow{--th:230px;display:grid;grid-template-columns:130px 1fr auto;gap:30px;align-items:center;padding:24px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.prow:first-child{border-top:1px solid var(--line)}
.prow:hover{background:color-mix(in srgb,var(--blue) 5%,transparent)}
.prow h3{font-size:24px;font-weight:600}
.prow p{margin:6px 0 0;color:var(--muted);font-size:16px}
.prow .specs{font-size:14px;color:var(--muted);margin-top:8px}
.prow .specs b{color:var(--ink);font-weight:600}
@media (max-width:760px){.prow{--th:170px;grid-template-columns:84px 1fr;gap:18px}.prow>.btn{grid-column:2;justify-self:start}}

/* product detail */
.pd{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;padding:48px 0 32px}
.pd .fig{position:sticky;top:calc(var(--hdr) + 24px);align-self:start;background:linear-gradient(180deg,var(--strata1),var(--strata3));border:1px solid var(--line);border-radius:4px 28px 4px 4px;padding:30px 20px 18px;display:flex;flex-direction:column;align-items:center}
.pd .imgs{display:flex;gap:18px;justify-content:center;align-items:flex-end;height:min(62vh,600px)}
.pd .imgs img{height:100%;width:auto;filter:drop-shadow(0 18px 20px rgba(3,40,90,.22))}
.pd figcaption{font-size:14px;color:var(--muted);margin-top:14px;text-align:center}
.pd .cat{color:var(--muted);font-size:15px}
.pd h1{font-size:clamp(36px,4vw,56px);font-weight:600;color:var(--navy);margin:8px 0 10px}
.pd .sub{font-size:21px;color:var(--ink);line-height:1.35;max-width:40ch}
.pd .cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 8px}
.pd .sec{margin-top:34px}
.pd .sec h2{font-size:22px;font-weight:600;color:var(--blue);margin-bottom:10px}
.pd .sec p{margin:0 0 12px;max-width:68ch}
.pd .sec ul{margin:0;padding:0;list-style:none;max-width:68ch}
.pd .sec li{position:relative;padding-left:22px;margin:0 0 8px}
.pd .sec li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:2px;background:var(--blue)}
@media (max-width:860px){.pd{grid-template-columns:1fr;gap:30px}.pd .fig{position:relative;top:0}.pd .imgs{height:48vh}}
.specs-t{margin:28px 0 12px}
.specs-t h2{font-size:26px;font-weight:600;color:var(--navy);margin-bottom:14px}
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:560px}
th,td{padding:11px 14px;text-align:center;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left;font-weight:600;position:sticky;left:0;background:var(--surface)}
thead th{background:color-mix(in srgb,var(--blue) 9%,var(--surface));color:var(--navy);font-weight:700}
thead th:first-child{background:color-mix(in srgb,var(--blue) 9%,var(--surface))}
tbody tr:last-child td{border-bottom:0}
td.av{color:var(--blue);font-weight:600}td.na{color:var(--muted)}
.tnote{font-size:14px;color:var(--muted);margin:10px 0 0}
.stickyq{display:none}
@media (max-width:860px){.stickyq{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;justify-content:center;box-shadow:var(--shadow)}}
.related{margin:56px 0 80px}
.related h2{font-size:26px;font-weight:600;color:var(--navy);margin-bottom:12px}

/* text pages */
.prose{max-width:760px;padding:56px 0 90px}
.prose h2{font-size:30px;font-weight:600;color:var(--navy);margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px}
.prose ul{padding-left:20px}
.ph{background:color-mix(in srgb,#F2B705 22%,transparent);padding:0 4px;border-radius:3px}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin:18px 0 8px}
.pslot{border:1.5px dashed var(--steel);border-radius:4px 18px 4px 4px;padding:22px;min-height:150px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.pslot b{font-size:19px}.pslot span{color:var(--muted);font-size:15px}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;padding:56px 0 90px}
.contact-grid dl{margin:0;display:grid;gap:18px}
.contact-grid dt{color:var(--muted);font-size:15px}.contact-grid dd{margin:2px 0 0;font-size:19px;font-weight:500}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr}}

/* forms & modal */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:500}
.form label i{font-style:normal;color:var(--muted);font-weight:400}
.form input,.form select,.form textarea{font:400 16px/1.4 "Barlow",sans-serif;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:8px;padding:11px 12px;width:100%}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent)}
.form [aria-invalid="true"]{border-color:#C8372D}
.form .err{color:#C8372D;font-size:14px;min-height:0}
.form textarea{min-height:96px;resize:vertical}
@media (max-width:600px){.form{grid-template-columns:1fr}}
dialog.q{border:0;padding:0;border-radius:6px 26px 6px 6px;width:min(680px,calc(100vw - 24px));max-height:calc(100vh - 40px);background:var(--surface);color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
dialog.q::backdrop{background:rgba(6,20,42,.55);backdrop-filter:blur(3px)}
.qin{padding:30px 30px 26px}
.qhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.qhead h2{font-size:30px;font-weight:600;color:var(--navy)}
.qhead p{margin:6px 0 0;color:var(--muted)}
.x{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px;font-size:26px;line-height:1}
.x:hover{color:var(--ink)}
.qfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.qfoot small{color:var(--muted);max-width:40ch}
.done{text-align:left}
.done h3{font-size:26px;font-weight:600;color:var(--navy);margin:6px 0 8px}
.done p{color:var(--muted);margin:0 0 18px}
.done pre{white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:14px;font:14px/1.5 ui-monospace,Menlo,Consolas,monospace;max-height:180px;overflow:auto}

/* footer */
.ftr{border-top:1px solid var(--line);padding:48px 0 calc(40px + env(safe-area-inset-bottom,0px));background:var(--surface)}
.ftr .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.ftr p{color:var(--muted);font-size:15px;margin:12px 0 0;max-width:40ch}
.ftr h4{margin:0 0 10px;font-size:15px;color:var(--muted);font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr a{color:var(--ink);text-decoration:none}.ftr a:hover{color:var(--blue)}
.copy{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:14px}
@media (max-width:760px){.ftr .wrap{grid-template-columns:1fr}}
main{min-height:60vh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.thero{padding:calc(var(--hdr) + 40px) 0 0;background:var(--navy);color:#fff;overflow:hidden}
:root[data-theme="dark"] .thero{background:#0E2A52}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .thero{background:#0E2A52}}
.thero-in{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-bottom:48px}
.thero .crumbs a,.thero .crumbs{color:#B9CCE8}
.thero h1{font-size:clamp(40px,5vw,68px);font-weight:600}
.thero .tlead{color:#D2E0F3;font-size:20px;max-width:40ch;margin:16px 0 26px}
.thero .row{display:flex;gap:12px;flex-wrap:wrap}
.thero .btn{background:#fff;color:#033C7F;border-color:#fff}
.thero .btn.ghost{background:transparent;color:#fff;border-color:#9FBCE4}
.thero .btn.ghost:hover{background:#fff;color:#033C7F}
.tpics{--th:min(380px,46vh);display:flex;justify-content:space-around;align-items:flex-end;gap:10px;background:linear-gradient(160deg,#F3F6F9,#DCE4ED);border-radius:4px 40px 4px 4px;padding:30px 26px}
.tpics .htool:nth-child(2n){margin-bottom:24px}
.tintro{display:grid;grid-template-columns:1fr 1.3fr;gap:48px;padding-top:72px;padding-bottom:24px}
.tintro h2{font-size:clamp(28px,3vw,40px);font-weight:600;color:var(--navy)}
.tintro p{margin:0 0 12px;color:var(--muted);font-size:18px}
.offer{font-size:clamp(26px,2.6vw,36px);font-weight:600;color:var(--navy);margin-top:40px}
.offer+.ggrid{margin-top:26px}
@media (max-width:860px){.thero-in,.tintro{grid-template-columns:1fr}}

@media (max-width:520px){.gcard .pic{--th:190px;flex-basis:96px}.gcard h3{font-size:21px}.tpics{--th:220px}}

@font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/barlow-latin-400-normal.woff2') format('woff2')}@font-face{font-family:Barlow;font-style:normal;font-weight:600 800;font-display:swap;src:url('/assets/fonts/barlow-latin-600-normal.woff2') format('woff2')}@font-face{font-family:'Barlow Semi Condensed';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/barlow-semi-condensed-latin-600-normal.woff2') format('woff2')}
body{overflow-x:clip}.hdr-in{height:68px;gap:18px}.hdr .logo{flex-shrink:0}.theme-toggle,.menu-toggle{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:9px 12px;font:inherit;cursor:pointer}.theme-toggle{font-size:22px;line-height:1}.menu-toggle{display:none}.nav{margin-left:auto}.logo img{object-fit:contain;max-width:100%}.ftr .logo img{width:210px;height:auto;max-width:100%}.footer-legal{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px}.footer-legal button{background:none;border:0;color:inherit;font:inherit;padding:0;text-decoration:underline;cursor:pointer}.prose section{margin-bottom:35px}.pd>div,.prow>div,.contact-grid>div{min-width:0}.pd .fig img{max-width:100%;object-fit:contain}.tscroll{max-width:100%;overflow:auto;overscroll-behavior-inline:contain}.tscroll:focus-visible{outline:2px solid var(--blue)}.specs-t{max-width:100%;min-width:0}.specs-t th,.specs-t td{overflow-wrap:anywhere}.form input,.form textarea,.form select{max-width:100%;min-width:0;font-size:16px}.form-consent{display:flex!important;flex-direction:row;align-items:flex-start;gap:12px;font-size:14px}.form-consent input{width:18px;height:18px;flex-shrink:0;margin-top:3px}.form-status{margin:0;padding:14px 0;overflow-wrap:anywhere}.form-status[data-state=success]{color:var(--ok)}.form-status[data-state=error]{color:#b42318}.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}.cookie-banner{position:fixed;z-index:100;left:24px;bottom:24px;width:min(450px,calc(100% - 48px));padding:22px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);font-size:15px}.cookie-banner p{margin:12px 0}.cookie-banner>div{display:flex;flex-wrap:wrap;gap:10px}.cookie-banner>a{display:inline-block;margin-top:14px;font-size:13px}#quote-dialog{max-width:820px;width:calc(100% - 32px);max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--line);background:var(--surface);color:var(--ink);overflow:auto}#quote-dialog::backdrop{background:#0b1627a6}.qin{padding:30px}.qhead{display:flex;justify-content:space-between;gap:25px;margin-bottom:25px}.qhead h2{font-size:34px}.qhead .x{flex-shrink:0;height:38px;width:38px;font-size:28px;line-height:1;border:1px solid var(--line);background:none;color:var(--ink);cursor:pointer}.qhead p{margin:10px 0}.catalogue-search{padding-block:30px 90px}.catalogue-search>label{display:grid;gap:12px;max-width:700px;margin:24px 0}.catalogue-search input{border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);padding:15px;font:inherit;min-width:0;max-width:100%}.search-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.search-grid>a{display:flex;align-items:center;gap:25px;padding:20px;border:1px solid var(--line);border-radius:8px;text-decoration:none;min-width:0}.search-grid .htool{height:100px;width:70px;flex-shrink:0}.search-grid .htool img{max-height:100%;width:auto;max-width:100%}.search-grid strong{display:block;font-size:20px}.search-grid small{display:block;color:var(--muted);margin-top:8px}.document-list{padding-block:30px}.document-list a{display:flex;justify-content:space-between;gap:25px;padding:18px 0;border-bottom:1px solid var(--line)}.publication-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;padding-block:40px 90px}.publication-grid img{width:100%;aspect-ratio:3/2;object-fit:cover}.publication-grid h2{font-size:28px}.publication-grid .kicker{display:block;margin-block:20px}.prose>img{max-width:100%;height:auto}.stickyq{z-index:35}.form label small{font-size:13px;color:var(--muted)}[hidden]{display:none!important}.skip{position:fixed;top:8px;left:8px;z-index:150;padding:12px;background:var(--surface);transform:translateY(-150%)}.skip:focus{transform:none}
@media(max-width:900px){.hdr-in{padding-inline:20px}.hdr .logo img{height:39px}.nav a{font-size:14px}.nav{gap:0}.theme-toggle{padding:8px}.publication-grid{grid-template-columns:1fr 1fr}.tpics .htool{min-width:0}.contact-grid{gap:35px}.search-grid>a{gap:18px;padding:16px}}
@media(max-width:720px){.hdr-in{height:64px;position:relative;gap:12px}.hdr .logo img{height:35px}.menu-toggle{display:block;margin-left:auto}.nav{display:none;position:absolute;left:0;right:0;top:100%;padding:14px 20px;background:var(--surface);box-shadow:var(--shadow);border-bottom:1px solid var(--line)}.nav.mobile-open{display:flex;flex-direction:column;align-items:stretch}.nav a{font-size:17px;padding:14px}.wrap{padding-inline:20px}.contact-grid{grid-template-columns:1fr!important}.pd{grid-template-columns:1fr!important}.pd .fig{position:relative!important;top:auto!important}.pd .imgs{max-height:400px!important;height:400px}.pd .imgs img{max-height:100%;width:auto;object-fit:contain}.pd h1{overflow-wrap:anywhere;font-size:38px}.prow{gap:18px;min-width:0}.prow .htool{flex-shrink:0;width:50px}.prow h3{font-size:25px}.prow>.btn{display:none}.search-grid{grid-template-columns:1fr}.search-grid strong{font-size:20px}.publication-grid{grid-template-columns:1fr}.qin{padding:22px}.form{grid-template-columns:1fr!important}.form .full{grid-column:1/-1}.qhead h2{font-size:30px}.tscroll table{min-width:560px}.cookie-banner{left:16px;bottom:16px;width:calc(100% - 32px)}.stickyq{max-width:calc(100% - 32px);font-size:15px}.ftr .wrap{gap:30px}.ftr .logo img{width:200px}.form input[type=file]{font-size:14px;width:100%}.phero h1{overflow-wrap:anywhere}.tpics{min-width:0;max-width:100%}.specs-t h2{font-size:27px}.form-consent{font-size:14px}}
@media(max-width:390px){.hdr-in{padding-inline:14px;gap:8px}.hdr .logo img{height:30px}.menu-toggle{padding:8px;font-size:14px}.theme-toggle{font-size:20px}.wrap{padding-inline:16px}.btn{font-size:14px;padding:13px 16px}.pd h1{font-size:34px}.qin{padding:18px}.qhead h2{font-size:27px}.prow h3{font-size:23px}.search-grid>a{gap:15px;padding:14px}.search-grid .htool{width:50px}.ftr .wrap{grid-template-columns:1fr}.hero .intro h1{font-size:40px}.hero .intro p{font-size:16px}.qfoot{flex-wrap:wrap}.form-consent input{width:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.file-field{min-width:0;border:0;padding:0;margin:0}.file-field legend{padding:0;margin-bottom:10px;font-size:16px;color:var(--ink)}.file-field legend i{font-style:normal;color:var(--muted)}.form label.file-drop{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;min-height:104px;padding:22px;border:1px dashed #9cacc0;border-radius:10px;background:var(--surface);cursor:pointer;transition:border-color .15s,background .15s}.form .file-drop input[type=file]{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}.file-icon{flex-shrink:0;color:var(--blue)}.file-copy{display:grid;gap:5px;min-width:0}.file-copy strong{font-size:17px;font-weight:600;color:var(--ink)}.file-copy>span{font-size:14px;color:var(--muted)}.file-browse{margin-left:auto;flex-shrink:0;padding:9px 17px;border:1px solid var(--blue);border-radius:6px;color:var(--blue);font-size:14px;font-weight:600}.file-drop:hover,.file-drop.is-dragging{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 5%,var(--surface))}.file-drop:focus-within{outline:2px solid var(--blue);outline-offset:3px}.file-drop.has-files{border-style:solid}.file-help{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}.file-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}.file-list:empty{display:none}.file-list li{display:flex;align-items:center;gap:14px;min-width:0;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:7px}.file-details{min-width:0;flex:1}.file-details strong{display:block;font-size:14px;font-weight:600;overflow-wrap:anywhere}.file-details small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}.file-list button{width:32px;height:32px;flex-shrink:0;border:0;border-radius:5px;background:transparent;color:var(--muted);font-size:23px;cursor:pointer}.file-list button:hover{background:var(--paper);color:var(--ink)}.file-error{margin:10px 0 0;color:#b42318;font-size:14px}.form label.form-consent{display:grid!important;grid-template-columns:18px minmax(0,1fr);align-items:start;gap:12px;line-height:1.6}.form label.form-consent input{width:18px;height:18px;margin:4px 0 0;padding:0}.form-consent>span{min-width:0}
@media(max-width:480px){.form label.file-drop{padding:18px 14px;gap:12px}.file-icon{width:24px;height:24px}.file-copy strong{font-size:16px}.file-copy>span{font-size:13px}.file-browse{display:none}.file-help{font-size:12px}}

.logo{display:inline-flex;align-items:center;background:transparent}.logo img{filter:none}
.hdr,.ftr{--paper:#F3F6F9;--surface:#FFFFFF;--ink:#0F2240;--muted:#586981;--navy:#033C7F;--blue:#1F6FD6;--line:#DAE2EB;--shadow:0 18px 40px -18px rgba(3,40,90,.35);color:var(--ink);color-scheme:light}.hdr{background:var(--paper)}.ftr .btn:hover{color:#fff}
.hero-photo{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%);position:absolute;inset:var(--hdr) 0 0 32%;z-index:1;pointer-events:none;opacity:.9;transition:opacity .45s ease}.hero-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% center}.hero-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 96%,transparent) 30%,transparent 70%),linear-gradient(0deg,var(--paper) 0%,transparent 28%),color-mix(in srgb,var(--paper) 22%,transparent)}.stage .strip{z-index:2}.stage.running .hero-photo{opacity:.12}
@media(max-width:760px){.hero-photo{-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%);mask-image:linear-gradient(180deg,transparent,#000 24%);inset:43% 0 0 0;opacity:.78}.hero-photo img{object-position:76% center}.hero-photo::after{background:linear-gradient(180deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 95%,transparent) 18%,transparent 54%),linear-gradient(0deg,var(--paper) 0%,transparent 24%),color-mix(in srgb,var(--paper) 28%,transparent)}}

/* Compact navigation and a stable, full-screen testing-string scene. */
html:has(body[data-page="/"]){padding-top:0}
.hero-controls{display:none}
.intro{left:calc(12vw + 100px);top:calc(var(--hdr) + 14vh);max-width:640px}
.focus .txt,.focus .row,.intro .row{min-width:0}
@media(max-width:1024px){
 :root{--hdr:64px}
 .hdr-in{height:64px;position:relative;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
 .hdr .logo img{height:40px}
 .menu-toggle{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;min-height:44px;padding:10px 15px;border-radius:8px}
 .theme-toggle{width:44px;height:44px;padding:0;flex-shrink:0;border-radius:8px}
 .nav{display:none;position:absolute;inset:100% 0 auto;margin:0;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100dvh - var(--hdr) - 12px);overflow:auto;overscroll-behavior:contain;scrollbar-width:auto}
 .nav.mobile-open{display:flex;flex-direction:column;align-items:stretch;gap:4px}
 .nav a{font-size:17px;white-space:normal;min-height:48px;padding:14px 16px}
 .stage{display:block;height:100vh;height:100svh;min-height:0;padding:0}
 .stage .intro{position:absolute;inset:calc(var(--hdr) + 52px) max(32px,env(safe-area-inset-right)) auto 104px;width:auto;max-width:480px;transform:none}
 .stage .intro h1{font-size:clamp(44px,6.4vw,58px);max-width:13ch}
 .stage .intro p{font-size:20px;max-width:36ch;margin:20px 0 26px}
 .stage .intro .btn{min-height:48px;line-height:1.3;text-align:center;justify-content:center;max-width:100%}
 .stage.running .intro{display:none}
 .stage .focus{display:none;position:absolute;inset:calc(var(--hdr) + 24px) max(32px,env(safe-area-inset-right)) calc(94px + env(safe-area-inset-bottom)) 104px;width:auto;height:auto;gap:28px;grid-template-columns:minmax(100px,.28fr) minmax(0,1fr);align-items:center;min-height:0}
 .stage.running .focus{display:grid}
 .stage .focus .tool{height:min(430px,100%);justify-content:center;min-width:0;min-height:0}
 .stage .focus .tool img{height:100%;width:auto;max-width:100%;object-fit:contain}
 .stage .focus .txt{display:flex;flex-direction:column;max-width:520px;min-height:0;max-height:100%}
 .stage .focus .tool-copy{min-height:0;overflow:auto;scrollbar-width:thin}
 .stage .focus .row{flex-shrink:0}
 .position-extra{display:none}
 .stage .focus .txt.enter>*{animation:none}
 .stage .focus h2{font-size:clamp(30px,4.2vw,40px);overflow-wrap:anywhere}
 .stage .focus .sub{font-size:18px;margin:12px 0}
 .stage .focus .desc{display:block;font-size:16px;margin-bottom:20px}
 .stage .focus .pos{font-size:14px;line-height:1.4;margin-bottom:12px}
 .stage .focus dl{font-size:15px;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin-bottom:24px}
 .stage .focus dd{overflow-wrap:anywhere}
 .stage .focus .btn{min-height:44px;line-height:1.3;text-align:center;justify-content:center}
 .stage .rail,.stage .tip{display:none}
 .stage .strip{pointer-events:none}
 .hero-controls{position:absolute;z-index:4;left:104px;right:32px;bottom:calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center;max-width:480px;width:auto;height:56px;margin:0;padding:0}
 .hero-controls button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;height:56px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--blue);font:600 15px/1.3 Barlow,sans-serif;cursor:pointer}
 .hero-controls button:disabled{opacity:.35;cursor:default}
 .hero-controls button:not(:disabled):hover{border-color:var(--blue)}
 .hero-controls .hero-overview{flex-direction:column;gap:2px;color:var(--ink)}
 .hero-controls small{font-size:11px;font-weight:400;color:var(--muted)}
 .hero-controls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .hero-photo{inset:var(--hdr) 0 94px 28%}
 .hero-photo img{object-position:76% center}
 section.block{padding:64px 0}
 .band .wrap{gap:32px;padding-block:56px}
 .pd{gap:32px;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr)}
 .ftr .wrap{grid-template-columns:1fr 1fr;gap:30px}
 .ftr .wrap>div:first-child{grid-column:1/-1}
 .ftr a,.footer-legal button{overflow-wrap:anywhere}
 .qhead .x{height:44px;width:44px}
 #quote-dialog{overscroll-behavior:contain}
 .file-list button{width:44px;height:44px}
}
@media(min-width:601px) and (max-width:1024px) and (orientation:portrait){
 .hero-photo{inset:34% 0 94px 60px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 75%,transparent)}
 .hero-photo::after{background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--paper) 90%,transparent) 12%,transparent 52%),linear-gradient(0deg,var(--paper),transparent 24%),color-mix(in srgb,var(--paper) 20%,transparent)}
}
@media(max-width:860px){.pd{grid-template-columns:1fr}}
@media(max-width:600px){
 .hdr-in{gap:8px;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
 .hdr .logo img{height:36px}
 .menu-toggle{font-size:15px;padding-inline:12px}
 .wrap{padding-inline:20px}
 .stage .intro{inset:calc(var(--hdr) + 30px) max(20px,env(safe-area-inset-right)) auto 64px}
 .stage .intro h1{font-size:clamp(38px,10.7vw,48px);max-width:13ch}
 .stage .intro p{font-size:17px;margin:16px 0 22px;line-height:1.6}
 .stage .intro .btn{font-size:15px;padding:13px 18px}
 .hero-photo{inset:clamp(300px,42svh,440px) 0 94px 44px;opacity:.82;-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 24%,#000 75%,transparent)}
 .hero-photo::after{background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--paper) 94%,transparent) 14%,transparent 48%),linear-gradient(0deg,var(--paper),transparent 24%),color-mix(in srgb,var(--paper) 20%,transparent)}
 .stage .focus{inset:calc(var(--hdr) + 18px) max(20px,env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) 64px;flex-direction:column;justify-content:center;align-items:center;gap:16px}
 .stage.running .focus{display:flex}
 .stage .focus .tool{flex:1 1 0;height:auto;min-height:72px;max-height:240px;width:100%}
 .stage .focus .txt{flex:0 1 auto;width:100%;max-width:none}
 .stage .focus h2{font-size:32px}
 .stage .focus .sub{font-size:15px;margin:8px 0 12px}
 .stage .focus .desc{display:none}
 .stage .focus .pos{font-size:12px;margin-bottom:8px}
 .stage .focus dl{grid-template-columns:auto minmax(0,1fr);gap:5px 12px;font-size:14px;margin-bottom:16px}
 .stage .focus dt{font-size:13px}
 .stage .focus .row{gap:8px}
 .stage .focus .btn{flex:1;padding:12px 10px;font-size:14px}
 .hero-controls{left:64px;right:20px;padding:0;gap:6px}
 .hero-controls button{font-size:14px;padding:8px 6px}
 section.block{padding:48px 0}
 .lead{font-size:34px}
 .kicker{font-size:17px}
 .rack{margin-top:30px}
 .rack a{--th:150px;grid-template-columns:70px minmax(0,1fr);gap:8px 18px;padding:24px 0}
 .rack .htool{grid-row:1/span 2;align-self:center;gap:4px}
 .rack .htool img{max-width:100%;object-fit:contain}
 .rack h3{font-size:25px}
 .rack p{font-size:15px}
 .rack .count{font-size:14px}
 .band .wrap{padding-block:44px;gap:26px}
 .band h2{font-size:32px}
 .band .btn{min-height:48px}
 .gcard .body{min-width:0;padding:18px 16px}
 .prow{grid-template-columns:60px minmax(0,1fr)}
 .ftr .wrap{grid-template-columns:1fr}
 .ftr .wrap>div:first-child{grid-column:auto}
 .phero{padding-top:calc(var(--hdr) + 36px);padding-bottom:32px}
 .phero p{font-size:17px}
 .contact-grid{padding-block:36px 64px}
 .cookie-banner{padding:18px;font-size:14px;max-height:calc(100dvh - var(--hdr) - 32px);overflow:auto;overscroll-behavior:contain}
 .cookie-banner .btn{min-height:44px}
 #quote-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px)}
}
@media(max-width:360px){
 .hdr .logo img{height:34px}
 .wrap{padding-inline:16px}
 .stage .intro{left:58px;right:16px}
 .stage .focus{left:58px;right:16px}
 .stage .intro h1{font-size:38px}
 .stage .intro .btn{width:100%;font-size:14px;padding-inline:12px}
 .stage .focus h2{font-size:27px}
 .stage .focus .btn{padding-inline:6px;font-size:13px}
 .stage .focus .row{flex-direction:row}
 .stage .focus .row a{flex:.85}
 .stage .focus .row button{flex:1.15}
 .hero-controls{left:58px;right:16px;grid-template-columns:44px minmax(0,1fr) 44px;gap:5px}
 .hero-controls button{font-size:13px}
 .rack a{grid-template-columns:52px minmax(0,1fr);gap:8px 14px}
 .rack h3{font-size:23px}
}
@media(min-width:601px) and (max-width:1024px) and (orientation:landscape){
 .hero-photo{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%),linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30%),linear-gradient(180deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask-composite:intersect}
 .hero-photo::after{background:linear-gradient(90deg,var(--paper),color-mix(in srgb,var(--paper) 96%,transparent) 30%,transparent 70%),linear-gradient(0deg,var(--paper),transparent 28%),color-mix(in srgb,var(--paper) 22%,transparent)}
}
@media(min-width:601px) and (max-width:1024px) and (max-height:500px){
 .stage .intro{top:calc(var(--hdr) + 20px);max-width:500px}
 .stage .intro h1{font-size:42px;max-width:none}
 .stage .intro p{font-size:16px;max-width:38ch;margin:12px 0 16px}
 .stage .intro .btn{min-height:44px;font-size:14px;padding:12px 18px}
 .hero-photo{inset:var(--hdr) 0 80px 32%}
 .stage .focus{top:calc(var(--hdr) + 12px);bottom:calc(78px + env(safe-area-inset-bottom));gap:22px}
 .stage .focus .tool{height:100%;max-height:260px}
 .stage .focus h2{font-size:26px;line-height:1.06}
 .stage .focus .pos{font-size:12px;margin-bottom:6px;line-height:1.2}
 .stage .focus .sub{font-size:14px;line-height:1.3;margin:6px 0 8px}
 .stage .focus .desc{display:none}
 .stage .focus dl{font-size:13px;line-height:1.3;margin-bottom:8px}
 .hero-controls{padding:0;bottom:calc(12px + env(safe-area-inset-bottom))}
}
@media(max-width:600px) and (max-height:680px){
 .stage .focus{gap:12px}
 .stage .focus .tool{min-height:64px;max-height:180px}
 .stage .focus h2{font-size:27px}
 .stage .focus .sub{font-size:14px;line-height:1.3;margin:6px 0 10px}
 .stage .focus dl{font-size:13px;line-height:1.4;margin-bottom:12px}
 .stage .intro{top:calc(var(--hdr) + 24px)}
 .stage .intro h1{font-size:36px}
 .stage .intro p{font-size:16px;margin:12px 0 18px}
 .hero-photo{top:46%}
}