:root{--carbon:#14181d;--steel:#28323c;--orange:#d97a2b;--blue:#1d4e6b;--paper:#f4f6f8;--ink:#202932}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.7 system-ui,sans-serif}
a{color:var(--blue);text-underline-offset:4px}
img{display:block;width:100%;height:auto;object-fit:cover}
p,li{overflow-wrap:anywhere}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.wrap{width:min(1280px,92%);margin-inline:auto}
header,footer{background:var(--carbon);color:var(--paper)}
header a,footer a{color:inherit}
header{position:relative;z-index:10;border-bottom:3px solid var(--orange)}
.head{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 0}
.brand{font-size:26px;font-weight:800;text-decoration:none;line-height:1.2}
.brand span{display:block;font:12px/1.8 ui-monospace,monospace;letter-spacing:.04em}
nav{display:flex;flex:1;justify-content:flex-end;gap:8px;align-items:center;flex-wrap:wrap}
nav a{display:inline-block;padding:10px 8px;font-size:14px;text-decoration:none}
.navdrop{position:relative}
.menu{display:none;position:absolute;top:100%;left:0;background:var(--steel);padding:16px;width:240px;border-bottom:3px solid var(--orange)}
.menu a{display:block}
.navdrop:focus-within .menu{display:block}
header button[aria-controls]{display:none}
.lang-switch{position:relative;margin-left:auto}
.lang-switch summary{cursor:pointer;padding:10px;min-height:44px}
.lang-switch ul{position:absolute;right:0;list-style:none;padding:16px;background:var(--steel);min-width:160px;margin:0}
.lang-switch a,.lang-switch .cur{display:block;padding:8px}
main{counter-reset:section}
main.wrap{padding:0 0 64px}
h1{font-size:clamp(32px,4.5vw,66px);line-height:1.08;letter-spacing:-.035em;max-width:1000px;margin:24px 0}
h2{font-size:clamp(24px,2.4vw,36px);line-height:1.2;margin:0 0 24px}
h3{font-size:22px;line-height:1.3}
.hero{background:var(--carbon);color:var(--paper);padding:64px 48px;margin:0 calc((100% - 100vw)/2) 48px;padding-inline:max(4vw,calc((100vw - 1184px)/2));border-bottom:6px solid var(--orange)}
.hero p{max-width:80ch}
.hero a{color:var(--paper)}
.kicker,.spec-label{font-family:ui-monospace,monospace;font-size:13px;letter-spacing:.05em}
.spec-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:32px 0}
.spec{background:var(--steel);padding:24px;border-top:3px solid var(--orange);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.spec-label,.spec-value{display:block}
.spec-value{font-size:16px;margin-top:8px}
.cta{display:inline-block;background:var(--orange);color:var(--carbon)!important;padding:16px 24px;font-weight:700;text-decoration:none;margin:16px 0;min-height:44px}
.hero>figure{margin:32px 0 0}
.hero>figure img{max-height:440px}
.tool-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px}
.tool-gallery img{height:240px}
.tool-gallery.tool-gallery-single{grid-template-columns:minmax(0,1fr)}
.template-home .tool-gallery{grid-template-columns:repeat(4,minmax(0,1fr))}
.template-home .tool-gallery img{height:190px}
.template-structure .hero{padding-block:40px}
.template-structure h1{font-size:clamp(32px,4vw,48px)}
.template-article .hero{border-left:8px solid var(--blue)}
.template-article .hero h1{max-width:22ch}
.template-inquiry .hero form{background:var(--steel);padding:32px;margin-top:32px;max-width:900px}
.template-inquiry .hero figure{order:3}
.template-error main{padding:64px 0}
main>section:not(.hero){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:48px;padding:48px 24px;border-top:2px dashed #687884;margin-top:24px}
main>section:not(.hero)>h2{grid-column:1;grid-row:1 / span 20}
main>section:not(.hero)>h2::before{counter-increment:section;content:counter(section,decimal-leading-zero);display:block;font:14px/2 ui-monospace,monospace;color:#8b450e;margin-bottom:16px}
main>section:not(.hero)>:not(h2){grid-column:2;min-width:0}
main>section:nth-of-type(3n){background:#e5ebef}
main>section.cta-box{background:var(--steel);color:var(--paper)}
.cta-box a{color:var(--paper)}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{background:white;padding:24px;border-top:3px solid var(--orange);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.process-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
figure{margin:24px 0}
figure img{max-height:420px}
figcaption{font-size:13px;margin-top:8px}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{text-align:left;padding:16px;border-bottom:1px solid #9eabb5;vertical-align:top}
th{background:var(--blue);color:white}
label{display:block;margin-top:16px}
input:not([type=checkbox]):not([type=hidden]),textarea,select{width:100%;padding:12px;border:1px solid #788895;background:white;color:var(--ink);min-height:48px}
textarea{min-height:160px}
input[type=checkbox]{width:auto}
input[name=botcheck]{display:none!important}
button[type=submit]{padding:16px 24px;background:var(--orange);border:0;font-weight:700;margin-top:24px;cursor:pointer}
footer{padding:48px 0}
footer p{max-width:90ch}
.rel{padding:24px;border-left:4px solid var(--orange)}
@media(hover:hover){.navdrop:hover .menu{display:block}
a:hover{text-decoration-thickness:2px}
.cta:hover,button:hover{filter:brightness(1.1)}
}
.cta:active,button:active{transform:scale(.97)}
@media(min-width:761px) and (max-width:1200px){nav{order:3;flex-basis:100%;justify-content:flex-start}
}
@media(max-width:760px){body{font-size:16px}
.head{gap:12px;padding:16px 0}
.brand{font-size:22px;max-width:55%}
.brand span{font-size:11px}
header button.nav-toggle[aria-controls]{display:block;background:var(--steel);color:white;border:1px solid #687884;padding:8px 14px;min-height:44px;margin-left:auto}
.lang-switch{margin-left:0}
nav{display:none;order:4;flex-basis:100%}
nav.is-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
nav a{font-size:14px;min-height:44px}
.menu{position:static;width:auto;display:block;background:transparent;border:0;padding:0 8px}
.navdrop{min-width:0}
.hero{display:flex;flex-direction:column;padding-block:40px}
.hero>.kicker{order:0}
.hero>h1{order:1}
.hero>.cta{order:2;align-self:flex-start}
.hero>p:not(.kicker){order:3}
.hero>.spec-cards{order:4}
.hero>form{order:5}
.hero>figure,.template-inquiry .hero>figure,.hero>.tool-gallery{order:6}
.spec-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.spec{padding:16px}
.tool-gallery,.template-home .tool-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.tool-gallery img,.template-home .tool-gallery img{height:150px}
main>section:not(.hero){display:block;padding:32px 16px}
main>section:not(.hero)>h2{margin-bottom:24px}
.card-grid{grid-template-columns:1fr}
.process-gallery{grid-template-columns:1fr}
.template-inquiry .hero form{padding:20px}
th,td{padding:12px}
.template-article .hero{border-left:0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}
}


.tool-gallery figure{margin:0}.tool-gallery figure img{height:100%;max-height:240px}.tool-gallery figure figcaption{font-size:13px}.template-home .tool-gallery{grid-template-columns:repeat(5,minmax(0,1fr))}@media(max-width:760px){.template-home .tool-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-gallery figure img{height:150px}}
main>section:nth-of-type(3n):not(.hero){background:var(--steel);color:var(--paper)}
main>section:nth-of-type(3n):not(.hero) a{color:var(--paper)}
main>section:nth-of-type(3n):not(.hero)>h2::before{color:var(--orange)}
.card{color:var(--ink);position:relative}
.card::after{content:"";position:absolute;right:0;top:0;width:12px;height:12px;background:var(--orange)}
main>section:nth-of-type(3n):not(.hero) .card a{color:var(--blue)}
main>section:nth-of-type(3n):not(.hero) .card h2::before{color:var(--orange)}
.blog-icon{display:inline-flex;padding:12px;min-height:44px}
/* P1/P2 layout and accessible category disclosures. */
.navdrop>summary{cursor:pointer;padding:10px 8px;font-size:14px;min-height:44px}

.template-home .hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px 40px;padding-block:36px}
.template-home .hero>h1{font-size:clamp(32px,3.7vw,56px);margin:4px 0;grid-column:1;grid-row:2}
.template-home .hero>.kicker{grid-column:1;grid-row:1;margin:0}
.template-home .hero>p:not(.kicker):not(.hero-support){grid-column:1;grid-row:3;margin:8px 0;font-size:16px}
.template-home .hero>.hero-product{grid-column:2;grid-row:1 / span 5;height:340px;object-fit:contain;background:white;align-self:center}
.template-home .hero>.cta{grid-column:1;grid-row:4;justify-self:start;margin:0;padding:12px 20px}
.template-home .hero>.hero-support{grid-column:1;grid-row:5;margin:0;font-size:14px}
.template-home .hero>.tool-gallery{grid-column:1 / -1;grid-row:6;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:16px}
.template-home .hero .tool-gallery img{height:150px;object-fit:contain}
.template-home main>section:not(.hero){display:block;padding:24px;margin-top:12px}
.home-detail>summary{cursor:pointer;min-height:48px}
.home-detail>summary h2{display:inline;font-size:26px}
.home-detail .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.template-home main>.spec-cards{margin:24px 0}
.template-inquiry .hero>.spec-cards{display:none}
.template-inquiry .hero form{margin-top:12px}
.template-inquiry .hero h1{font-size:clamp(30px,3vw,44px);margin:12px 0}
.template-inquiry .hero .email-fallback{font-size:16px;margin:8px 0}
.template-inquiry .hero{padding-block:28px}
.template-inquiry .hero>.kicker{margin:0}
@media(max-width:760px){
.template-home .hero{gap:12px;padding-block:24px;grid-template-columns:minmax(0,1fr)}
.template-home .hero>h1{font-size:34px;grid-row:2}
.template-home .hero>.kicker{font-size:11px;grid-row:1}
.template-home .hero>p:not(.kicker):not(.hero-support){grid-row:3;line-height:1.5}
.template-home .hero>.cta{grid-row:4}
.template-home .hero>.hero-support{grid-row:5}
.template-home .hero>.hero-product{grid-column:1;grid-row:6;height:190px;width:100%}
.template-home .hero>.tool-gallery{grid-row:7;grid-template-columns:repeat(2,minmax(0,1fr))}
.template-home .hero .tool-gallery img{height:120px}
.home-detail .card-grid{grid-template-columns:1fr}
.template-inquiry .hero>h1,.template-inquiry .hero>.email-fallback,.template-inquiry .hero>form{order:0}
}

/* Supplement: value, product, action at every product hero breakpoint. */
.template-structure .hero,.template-keyword .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 32px;padding-block:28px}
.template-structure .hero>h1,.template-keyword .hero>h1{grid-column:1;grid-row:2;font-size:clamp(30px,3.7vw,52px);margin:4px 0}
.template-structure .hero>.kicker,.template-keyword .hero>.kicker{grid-column:1;grid-row:1;margin:0}
.hero>.hero-product img{width:100%;height:100%;object-fit:contain}
.template-structure .hero>.hero-product,.template-keyword .hero>.hero-product{grid-column:2;grid-row:1 / span 5;height:300px;margin:0;align-self:center;background:white}
.template-structure .hero>.cta,.template-keyword .hero>.cta{grid-column:1;grid-row:4;justify-self:start;margin:0;padding:12px 20px}
.template-structure .hero>.hero-support,.template-keyword .hero>.hero-support{grid-column:1;grid-row:5;margin:0;font-size:14px}
.template-structure .hero>.tool-gallery,.template-keyword .hero>.tool-gallery{grid-column:1 / -1;grid-row:6}
@media(max-width:760px){
.template-home .hero,.template-structure .hero,.template-keyword .hero{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-block:20px}
.template-home .hero>.hero-product,.template-structure .hero>.hero-product,.template-keyword .hero>.hero-product{grid-column:1;grid-row:3;height:190px;width:100%;margin:0}
.template-home .hero>.cta,.template-structure .hero>.cta,.template-keyword .hero>.cta{grid-column:1;grid-row:4;max-width:100%;font-size:16px;margin:0;padding:10px 16px}
.template-home .hero>.hero-support,.template-structure .hero>.hero-support,.template-keyword .hero>.hero-support{grid-column:1;grid-row:5}
.template-home .hero>.tool-gallery,.template-structure .hero>.tool-gallery,.template-keyword .hero>.tool-gallery{grid-row:6}
}

.hero>.tool-gallery.hero-product{grid-column:2;grid-row:1 / span 5;margin:0}
.hero>.tool-gallery.hero-product img{height:100%;max-height:190px;object-fit:contain}
@media(max-width:760px){.hero>.tool-gallery.hero-product{grid-column:1;grid-row:3}}

/* Mobile hero captions participate in the figure height before the CTA. */
@media(max-width:760px){
.hero>figure.hero-product{height:auto}
.hero>figure.hero-product>img{height:190px}
.hero>figure.hero-product>figcaption{margin-bottom:16px}
}

/* R2: image and caption both contribute to the grid track before the action. */
.template-home .hero>figure.hero-product,
.template-structure .hero>figure.hero-product,
.template-keyword .hero>figure.hero-product{height:auto;grid-row:1 / span 3;align-self:start;order:initial}
.hero>figure.hero-product>img{display:block;height:300px;object-fit:contain}
.hero>figure.hero-product>figcaption{position:static;margin:8px 0 0;line-height:1.7}
.home-company-image{max-width:550px;margin:24px 0}
@media(max-width:760px){
.template-home .hero>figure.hero-product,
.template-structure .hero>figure.hero-product,
.template-keyword .hero>figure.hero-product{grid-row:3;height:auto}
.hero>figure.hero-product>img{height:190px}
}

/* English homepage prototype: independent desktop groups, stacked on mobile. */
.template-home .hero.home-proto{align-items:start}
.home-proto-copy{grid-column:1;grid-row:1;min-width:0}
.home-proto-copy .kicker{margin:0}
.home-proto-copy h1{font-size:clamp(32px,3.7vw,56px);margin:16px 0}
.home-proto-copy .hero-support{font-size:16px;line-height:1.5;margin:16px 0}
.home-proto-copy .cta{margin:0;padding:12px 20px}
.template-home .hero.home-proto>figure.hero-product{grid-column:2;grid-row:1;margin:0;background:#fff;color:#202932}
.home-proto>figure.hero-product>figcaption{color:#202932;background:#fff;padding:0 12px 12px}
.template-home:has(.home-proto) main>.spec-cards .spec{color:#f4f6f8;background:#28323c}
@media(max-width:760px){
.template-home .hero.home-proto{display:flex;flex-direction:column;gap:20px}
.home-proto-copy{width:100%}
.home-proto-copy h1{font-size:34px}
.home-proto-copy .kicker{font-size:11px}
.home-proto-copy .cta{font-size:16px;padding:10px 16px;max-width:100%}
.template-home .hero.home-proto>figure.hero-product{width:100%;margin:0}
}