/* Mobile composition checked against the owner's Galaxy S25 screenshots. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.hero h1, .section h2, .service h3, .product-copy h3, .steps h3, .demo h3, .demo p { word-break: normal; overflow-wrap: break-word; hyphens: manual; }
p { hyphens: manual; }
#contact > .cta { direction: ltr; unicode-bidi: isolate; }
html:lang(ja), html:lang(zh) { line-break: strict; }
html:lang(ko) :is(h1, h2, h3, p) { word-break: keep-all; overflow-wrap: break-word; }
:is(html:lang(ar), html:lang(he), html:lang(th), html:lang(hi))
:is(.brand-slogan, .hero-foot [data-i18n="slogan"], .eyebrow, .cta, .status, .product-specs) {
  letter-spacing: 0;
}

html:lang(de) .product-copy h3, html:lang(fi) .product-copy h3 { font-size: clamp(28px, 3.2vw, 44px); }

@media (max-width: 760px) {
  body { font-size: 16px; line-height: 1.65; }
  nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    min-height: 0;
    padding-block: 12px 8px;
  }
  .brand { grid-column: 1; grid-row: 1; flex: initial; min-width: 0; gap: 8px; }
  .brand-symbol { width: 80px; height: 29px; }
  .brand-symbol img { width: 80px; height: 42px; top: -1px; }
  .brand-slogan {
    min-width: 0;
    font-size: clamp(9.5px, 2.65vw, 11px);
    line-height: 1.5;
    letter-spacing: .015em;
    padding-inline-start: 8px;
    color: #d8cde0;
    white-space: nowrap;
  }
  .locale-picker { grid-column: 2; grid-row: 1; margin: 0; }
  #locale-trigger { gap: 5px; padding: 8px; min-width: 48px; min-height: 44px; font-size: 22px; }
  .navlinks {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .navlinks a:nth-child(n) {
    min-height: 44px;
    padding: 7px 2px;
    font-size: 10.5px;
    line-height: 1.5;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: manual;
  }
  html[dir="rtl"] .navlinks { margin: 0; }
  html[dir="rtl"] .brand-slogan { padding: 0; padding-inline-start: 8px; border: 0; border-inline-start: 1px solid #666; }
  header::after { width: 28px; height: 28px; }
  #locale-panel { top: 74px; max-height: min(75svh, 650px); }

  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 36px;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 50px 7.2% 28px;
  }
  .hero-copy, html[dir="rtl"] .hero-copy { width: 100%; max-width: none; margin: 0; }
  .hero .eyebrow { font-size: 10px; line-height: 1.65; letter-spacing: .1em; }
  .hero h1 { font-size: clamp(42px, 12.4vw, 66px); margin: 20px 0; line-height: 1.06; letter-spacing: -.03em; }
  .hero .intro { font-size: 17px; line-height: 1.65; margin: 0; max-width: none; }
  .hero-copy > .cta { margin-top: 24px; }
  .hero-foot {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 8px;
    color: #d8cde0;
  }
  .hero-foot [data-i18n="slogan"] { font-size: 10px; line-height: 1.5; letter-spacing: .06em; max-width: none; }
  .hero-foot > span:last-child { font-size: 10px; line-height: 1.5; max-width: 100%; }

  .product-section { padding-top: 56px; }
  .product-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 24px; }
  .product-heading h2 { font-size: clamp(52px, 15vw, 70px); }
  .status { justify-self: start; font-size: 10px; padding: 7px 10px; letter-spacing: .05em; }
  .product-stage {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    min-height: 0;
    background: #110d17;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  }
  .product-stage::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: clamp(175px, 51vw, 300px);
    z-index: -1;
    background:
      linear-gradient(180deg, #110d1720 0%, #110d1766 60%, #110d17 100%),
      url("straol-projects-showcase.webp") center top / 100% auto no-repeat;
  }
  .product-emblem { min-height: clamp(175px, 51vw, 260px); padding: 26px 24px; }
  .product-emblem img { max-width: 340px; }
  .emblem-frame { inset: 18% 17%; opacity: .16; }
  .product-copy, html[dir="rtl"] .product-copy { padding: 14px 24px 28px; background: #110d17; }
  .product-copy .eyebrow { font-size: 11px; line-height: 1.65; letter-spacing: .08em; }
  .product-copy h3 { font-size: clamp(26px, 7.4vw, 32px); line-height: 1.22; margin: 18px 0; }
  .product-copy h3 > br { display: none; }
  .product-copy p { font-size: 16px; line-height: 1.7; margin: 16px 0 0; max-width: none; }
  .product-copy .cta { font-size: 12px; padding: 14px 16px; margin-top: 24px; gap: 12px; }
  .product-copy .note { font-size: 13px !important; line-height: 1.65; margin-top: 16px; opacity: 1; color: #c5bbcf; }
  .product-specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px 24px; margin-bottom: 0; }
  .product-specs > span { font-size: 11px; min-width: 0; line-height: 1.6; letter-spacing: .04em; }

  .section { padding-block: 52px; }
  .section-heading { gap: 22px; margin-bottom: 28px; }
  .section-heading h2 { font-size: clamp(25px, 7.4vw, 34px); line-height: 1.22; max-width: none; letter-spacing: -.015em; }
  .section-heading h2 > br { display: none; }
  .section-heading h2 > [data-i18n] { display: block; }
  .section-heading > p { font-size: 16px; line-height: 1.7; }
  .service { grid-template-columns: 30px minmax(0, 1fr); gap: 10px 12px; padding-block: 26px; }
  .service h3 { font-size: 18px; line-height: 1.5; }
  .service p { grid-column: 1 / -1; padding-top: 4px; font-size: 16px; line-height: 1.7; max-width: none; }
  .service:last-child { border-bottom: 0; padding-bottom: 0; }
  .demo { padding: 24px 22px; }
  .demo-grid { gap: 24px; margin-block: 16px 24px; }
  .demo h3 { font-size: 20px; line-height: 1.5; }
  .demo p { font-size: 16px; line-height: 1.7; hyphens: manual; overflow-wrap: break-word; }
  .demo .after, html[dir="rtl"] .demo .after { padding: 20px 0 0; }
  .demo .after p { font-size: 18px; line-height: 1.65; }
  .demo > .note { font-size: 12px !important; line-height: 1.65; }
  .steps { gap: 18px; }
  .steps article { min-width: 0; padding: 24px 22px; }
  .steps h3 { font-size: 20px; line-height: 1.4; margin: 16px 0 12px; text-transform: none; }
  .steps p { font-size: 16px; line-height: 1.7; }
  #werkwijze { padding-bottom: 48px; }
  .contact { margin-top: 0; padding-block: 56px; }
  .contact h2 { font-size: clamp(30px, 8.8vw, 44px); line-height: 1.22; }
  .contact h2 > br { display: none; }
  .contact p { font-size: 16px; line-height: 1.7; margin: 22px 0 0; }
  .contact > .cta { font-size: clamp(14.5px, 4.1vw, 18px); padding: 16px; margin-top: 24px; gap: 12px; overflow-wrap: normal; }
  footer .wrap { gap: 14px; padding-block: 6px; }
  footer .wrap > span { text-wrap: balance; max-width: 100%; font-size: 12px; line-height: 1.7; }
  :is(html:lang(ar), html:lang(he), html:lang(th), html:lang(hi))
  :is(.brand-slogan, .hero .eyebrow, .hero-foot [data-i18n="slogan"], .product-copy .eyebrow, .product-specs > span, .status, .cta) { letter-spacing: 0; }
  :is(html:lang(ar), html:lang(he), html:lang(th), html:lang(hi), html:lang(ja), html:lang(zh), html:lang(ko)) .brand-slogan { font-size: 11px; text-transform: none; }
}

@media (max-width: 350px) {
  nav { column-gap: 8px; }
  .brand { gap: 6px; }
  .brand-symbol { width: 60px; height: 25px; }
  .brand-symbol img { width: 60px; height: 32px; }
  .brand-slogan { font: 500 9.5px/1.5 system-ui, sans-serif; padding-inline-start: 6px; letter-spacing: 0; }
  html[dir="rtl"] .brand-slogan { padding-inline-start: 6px; }
  .product-copy { padding-inline: 20px; }
  .demo { padding-inline: 20px; }
}

@media (max-width: 760px) {
  html:lang(de) .product-copy h3 { font-size: clamp(20px, 6.3vw, 30px); }
  html:lang(fi) .product-copy h3 { font-size: clamp(21px, 6.4vw, 30px); }
  html:lang(hu) .hero h1 { font-size: clamp(38px, 11.3vw, 60px); }
}

.phrase-space { display: none; }
@media (max-width: 760px) {
  .navlinks.nav-wide-labels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .navlinks a > [data-i18n] { min-width: 0; max-width: 100%; overflow-wrap: break-word; }
  .product-copy h3 > .phrase-space, .contact h2 > .phrase-space { display: inline; }
  :is(html:lang(ja), html:lang(zh), html:lang(th)) :is(.product-copy h3, .contact h2) > .phrase-space { display: none; }
}

/* A single product column keeps the preview and copy comfortable on tablets. */
@media (width > 760px) and (max-width: 1100px) {
  .product-stage { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; background: #110d17; }
  .product-stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 320px; z-index: -1; background: linear-gradient(180deg,#110d1720 0%,#110d1766 60%,#110d17 100%),url("straol-projects-showcase.webp") center top / 100% auto no-repeat; }
  .product-emblem { min-height: 280px; padding: 32px; }
  .product-emblem img { max-width: 380px; }
  .product-copy, html[dir="rtl"] .product-copy { padding: 28px 36px 36px; background: #110d17; }
  .product-copy p { max-width: 65ch; }
}