/* Shared typography and contrast, loaded after both language styles. */
body{font-size:16px;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
h2{font-size:clamp(32px,3.5vw,52px);line-height:1.25;letter-spacing:-.8px}
html[lang=ar] h2{line-height:1.6;letter-spacing:0}
h3{font-weight:600}
.intro>p:not(.eyebrow),.features p,.inside-copy>p,.inside .part-description p,.steps p,.section-head>p,.specs>div>p:not(.eyebrow),.models p,.questions details p,.capsules-copy>p:not(.eyebrow){font-size:16px;line-height:1.85}
.intro>p:not(.eyebrow){max-width:680px}
.features p{max-width:36ch}
.inside-copy{max-width:500px}
.inside-copy>p,.inside .part-description p,.steps p,.section-head>p,.specs>div>p:not(.eyebrow),.models p,.questions details p{color:#514c43}
.eyebrow{font-size:12px!important;letter-spacing:2px;line-height:1.6}
.features article>span,.tag{font-size:12px;line-height:1.6;letter-spacing:1.2px}
.color-picker legend{font-size:15px;font-weight:600}
.swatch{font-size:14px;padding:8px 12px;min-height:44px}
.swatch[aria-pressed=true]{padding:7px 11px}
.color-status,.inside small,.part-description>span,.stage-note{font-size:12px;line-height:1.7;color:#625a4c}
.stage-note{letter-spacing:1.3px}
.component-label,.component-label span{font-size:12px;line-height:1.5;color:#62513e}
.component-label{max-width:130px}
.component-label:after{width:22px;flex-shrink:0}
.specs dl>div{font-size:15px;line-height:1.7;padding:16px 0;align-items:flex-start}
.specs dt{color:#514c43;flex:1}
.specs dd{font-weight:600;color:#24251f;flex:1;max-width:55%;overflow-wrap:break-word}
.questions summary{font-size:17px;font-weight:600;line-height:1.6}
.capsules-visual figcaption span{font-size:14px;line-height:1.6}
.capsules-visual figcaption b{font-size:12px}
.models h3 span{font-size:14px;line-height:1.7}
.button,.text-link,.hero .actions>.button,.hero .actions>.text-link{font-size:14px;font-weight:700;min-height:48px}
header nav{font-weight:700}
header .language-switch{font-size:15px;font-weight:700}
.journey .journey-copy p:not(.eyebrow){font-size:16px;line-height:1.8;color:#fff}
.journey .journey-copy .eyebrow{font-size:12px!important;color:#f4d8b9}
.journey:after{background:linear-gradient(90deg,#10120ef0 0%,#10120eb0 32%,transparent 75%)}
.slideshow-toggle{font-size:13px;background:#11151070}
footer>div{font-size:14px;line-height:1.7;gap:24px}
footer>div a{padding:10px 0;min-height:44px}
footer small{font-size:12px;line-height:1.8;color:#c4bcaf}
.whatsapp-floating{background:#25d366!important;color:#102c1c!important;font-size:14px;font-weight:700}
@media(min-width:701px) and (max-width:1100px){header{gap:16px;padding-inline:4%}header nav{gap:14px;font-size:13px}header .language-switch{padding-inline:12px}.inside{gap:4%}.component-label{max-width:100px}.component-label:after{display:none}}
@media(max-width:700px){
 h2,.capsules h2,.journey .journey-copy h2{font-size:32px;line-height:1.3;letter-spacing:-.5px}
 html[lang=ar] h2{line-height:1.65;letter-spacing:0}
 .intro>p:not(.eyebrow),.features p,.inside-copy>p,.inside .part-description p,.steps p,.section-head>p,.specs>div>p:not(.eyebrow),.models p,.questions details p,.capsules-copy>p:not(.eyebrow){font-size:15px;line-height:1.85}
 .features p{max-width:none}
 .eyebrow{font-size:11px!important;letter-spacing:1.5px}
 .hero .actions{gap:14px;flex-wrap:wrap}
 .hero .actions>.button{font-size:14px;padding:12px 16px}
 .hero .actions>.text-link{font-size:13px;gap:8px}
 .hero>.trust span{font-size:12px;white-space:normal;line-height:1.5}
 .hero>.trust{background:linear-gradient(0deg,#11140fe6,#11140f66);padding:14px 4%;gap:10px 8px}
 .specs dl>div{font-size:14px;gap:16px}
 .specs dt,.specs dd{max-width:50%}
 .questions summary{font-size:16px}
 .component-label{max-width:85px;gap:4px}
 .component-label,.component-label span{font-size:11px}
 .component-label:after{display:none}
 .journey .journey-copy p:not(.eyebrow){font-size:15px;line-height:1.8}
 .journey:after{background:linear-gradient(180deg,#10120ef5 0%,#10120ec9 37%,#10120e22 72%)}
 .capsules-visual figcaption{gap:8px}
 .capsules-visual figcaption span{font-size:12px}
 footer>div{font-size:14px;gap:20px}
 footer small{font-size:12px}
}
@media(min-width:701px) and (max-width:1000px){
 header{gap:20px;height:90px}
 header .menu{display:block;background:transparent;color:var(--ink);border:0;font-size:24px;min-width:44px;min-height:44px}
 header nav{display:none;position:absolute;top:90px;left:0;right:0;background:#20221c;padding:24px;flex-direction:column;align-items:stretch;gap:8px;font-size:16px}
 header nav.open{display:flex}
 header nav a{padding:12px 16px}
 header .language-switch{margin-inline-start:auto}
}
/* Keep the copyright clear of the fixed WhatsApp action. */
footer>small{grid-column:1/-1;justify-self:start;text-align:left;direction:ltr;max-width:calc(100% - 170px)}
@media(max-width:700px){footer>small{max-width:100%;text-align:left;justify-self:start}footer{padding-bottom:110px}}
/* Model-specific specifications in matched cards. */
.model-comparison{position:relative;background:#eee9df;color:#24251f}
.comparison-anchor{position:absolute;top:0;scroll-margin-top:100px}
.comparison-heading{max-width:700px;margin-bottom:36px}
.comparison-heading>p:not(.eyebrow){font-size:16px;line-height:1.8;color:#514c43}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-items:stretch}
.model-card{min-width:0;background:#f9f6ef;border:1px solid #cfc5b5;padding:32px;display:flex;flex-direction:column}
.model-card-head{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:250px;padding-bottom:24px;border-bottom:1px solid #d9d0c2}
.model-card-head>div{min-width:0}
.model-card-head h3{font:600 clamp(24px,2.3vw,34px)/1.3 Manrope,sans-serif;letter-spacing:-.8px;margin:8px 0;color:#24251f;direction:ltr}
.model-card-head .eyebrow{margin:0;color:#80502d}
.model-card-head p:not(.eyebrow){font-size:15px;line-height:1.7;color:#625a4c;margin:8px 0}
.model-card-head img{width:150px;height:220px;object-fit:contain;flex-shrink:0}
.model-card dl{margin:12px 0 26px;flex:1}
.model-card dl>div{display:grid;grid-template-columns:1fr 1.05fr;gap:16px;min-height:72px;padding:16px 0;border-bottom:1px solid #ddd5c8;align-items:start;font-size:14px;line-height:1.7}
.model-card dt{display:flex;align-items:flex-start;gap:8px;color:#625a4c}
.model-card dt .spec-icon{margin-top:2px;width:18px;height:18px;flex-shrink:0}
.model-card dd{margin:0;font-weight:600;text-align:end;overflow-wrap:anywhere;color:#24251f}
.model-card dd.not-listed{font-weight:400;color:#716a5f}
.model-card>.button{justify-content:center;align-self:flex-start;min-width:160px}
.comparison-note{font-size:13px;line-height:1.8;color:#625a4c;margin:24px 0 0;max-width:780px}
@media(max-width:1000px){.model-card{padding:24px}.model-card-head{gap:12px}.model-card-head img{width:115px;height:200px}.model-card dl>div{min-height:86px}}
@media(max-width:700px){.comparison-grid{grid-template-columns:1fr;gap:24px}.model-card{padding:24px 20px}.model-card-head{min-height:210px}.model-card-head img{width:130px;height:195px}.model-card-head h3{font-size:28px}.model-card dl>div{min-height:64px;font-size:14px;gap:14px}.comparison-heading{margin-bottom:26px}.comparison-heading>p:not(.eyebrow){font-size:15px}.comparison-note{font-size:13px}.model-card>.button{align-self:stretch}}
.model-comparison .comparison-heading>.eyebrow{color:#80502d}
/* Complete scene photographs share the same machine framing. */
.journey .journey-slideshow{height:auto;aspect-ratio:3/2}
.journey .journey-slideshow>.journey-slide{object-fit:cover;object-position:center;transform:none}
.journey>div.journey-copy{top:12%;z-index:4;max-width:43%}
.journey:after{background:linear-gradient(90deg,#10120ee6 0%,#10120e77 40%,transparent 65%)}
@media(max-width:700px){
 .journey .journey-slideshow{height:680px;aspect-ratio:auto}
 .journey .journey-slideshow>.journey-slide{object-position:71% center}
 .journey>div.journey-copy{inset:28px auto auto 7%;width:42%;max-width:none}
 .journey .journey-copy h2{font-size:25px;line-height:1.3;letter-spacing:-.5px}
 html[lang=ar] .journey .journey-copy h2{line-height:1.6;letter-spacing:0}
 .journey .journey-copy p:not(.eyebrow){font-size:14px;line-height:1.8}
 .journey .journey-copy .eyebrow{font-size:10px!important;letter-spacing:1px}
 .journey:after{background:linear-gradient(90deg,#10120ee6 0%,#10120e77 42%,transparent 68%)}
 .journey .slideshow-toggle{font-size:12px;padding:8px}
}
/* One JOKI product, with color thumbnails and its agreed specification set. */
.single-product{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;padding:44px;align-items:center}
.product-gallery{min-width:0;text-align:center}
.product-main-image{display:block;width:100%;height:340px;object-fit:contain;margin:0 auto 24px}
.product-finishes{border:0;padding:0;margin:0;min-width:0}
.product-finishes legend{font-size:15px;font-weight:600;margin:0 auto 16px}
.product-finish-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.product-finish{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:116px;padding:10px 5px;border:1px solid #cfc5b5;background:transparent;color:#514c43;font-size:13px;border-radius:2px}
.product-finish img{width:48px;height:72px;object-fit:contain}
.product-finish[aria-pressed=true]{outline:2px solid #80502d;outline-offset:0;background:#ece3d5;color:#24251f}
.product-color-status{font-size:13px;color:#625a4c;margin-bottom:0}
.product-information h3{font:600 36px/1.3 Manrope,sans-serif;letter-spacing:-1px;margin:0 0 8px}
.product-subtitle{font-size:17px;color:#625a4c;margin:0 0 18px;line-height:1.7}
.single-product dl{margin-bottom:28px}
.single-product dl>div{min-height:64px;font-size:15px;grid-template-columns:1fr 1fr}
.product-information>.button{min-width:180px;justify-content:center}
@media(max-width:1000px){.single-product{gap:32px;padding:30px}.product-finish-options{gap:7px}.product-finish{font-size:12px}}
@media(max-width:700px){.single-product{grid-template-columns:1fr;gap:32px;padding:26px 20px}.product-main-image{height:290px}.product-information h3{font-size:32px}.single-product dl>div{font-size:14px}.product-information>.button{width:100%}.product-finish-options{gap:10px}.product-finish{font-size:13px}}

/* Compact, recognizable WhatsApp control with a generous white mark. */
.whatsapp-floating{width:60px;height:60px;min-width:60px;min-height:60px;padding:0;gap:0;border-radius:50%;background:#25d366!important;color:#fff!important;border:1px solid #ffffff80;box-shadow:0 5px 18px #0003,0 0 18px #25d36655;transition:box-shadow .2s,background-color .2s}
.whatsapp-floating svg{width:36px;height:39px;color:#fff;display:block;flex:none}
.whatsapp-floating:hover{background:#20c65f!important;box-shadow:0 6px 22px #0004,0 0 23px #25d36677}
.whatsapp-floating:focus-visible{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 0 7px #126c35}
@media(max-width:700px){.whatsapp-floating{width:56px;height:56px;min-width:56px;min-height:56px}.whatsapp-floating svg{width:33px;height:37px}}

.product-model-label{font-size:14px;font-weight:700;color:#80502d;letter-spacing:1px;margin:0 0 10px;direction:ltr}

/* Keep the decoded first frame over the video until playback is ready. */
.hero-photo>.hero-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-photo>video{position:relative;z-index:1;opacity:0;transition:opacity .1s linear}
.hero-photo.is-ready>video{opacity:1}
@media(max-width:700px){.hero-photo>.hero-poster{object-fit:contain}}

/* Selected concept 03: compact labeled WhatsApp pill. */
.whatsapp-floating{width:auto;min-width:144px;height:52px;min-height:52px;padding:0 17px;gap:10px;border-radius:999px;direction:ltr;color:#fff!important;font-size:14px;font-weight:700;line-height:1;box-shadow:0 5px 18px #0003,0 0 14px #25d36633}
.whatsapp-floating svg{width:27px;height:30px;flex:none}
.whatsapp-floating span{color:#fff;white-space:nowrap}
@media(max-width:700px){.whatsapp-floating{width:auto;min-width:138px;height:50px;min-height:50px;padding:0 15px;gap:9px}.whatsapp-floating svg{width:26px;height:29px}}