/* The illustration is the same product rendering used in the model catalog. */
.company-page #about, .company-contact-page #about-company { scroll-margin-block-start:0; }
.work-intro { margin-block-end:clamp(1.3rem,3vw,2.3rem); }
.work-intro .work-kicker, .work-figure-label {
  display:block; margin:0 0 .65rem; color:#456865;
  font-size:.82rem; line-height:1.45; font-weight:700; letter-spacing:.04em;
}
.company-page main .work-intro h2, .company-contact-page main .work-intro h2 {
  max-inline-size:32ch; margin:0; color:#163139;
  font-size:clamp(1.8rem,3.5vw,3.1rem); font-weight:620; letter-spacing:-.035em;
  line-height:1.12; text-wrap:balance; overflow-wrap:anywhere;
}
.work-spread {
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-rows:auto 1fr; grid-template-areas:"lead figure" "story figure";
  column-gap:clamp(2rem,6vw,6rem); row-gap:1.35rem; align-items:start;
}
.work-spread > .work-lead {
  grid-area:lead; margin:0; max-inline-size:52ch; color:#25464d;
  font-size:clamp(1.08rem,1.55vw,1.25rem); line-height:1.52;
}
.work-story { grid-area:story; min-inline-size:0; }
.work-story h3 {
  color:#17363c; font-weight:660; line-height:1.25; margin:1.35rem 0 .4rem;
  font-size:clamp(1.13rem,1.6vw,1.4rem);
}
.work-story h3:first-child { margin-block-start:0; }
.work-story p { max-inline-size:62ch; margin:.35rem 0 .65rem; color:#374f55; font-size:1rem; line-height:1.6; }
.work-story a { color:#155b61; font-weight:610; text-decoration:underline; text-underline-offset:.2em; }
.work-story a:hover { text-decoration-thickness:2px; }
.work-example {
  grid-area:figure; box-sizing:border-box; margin:0;
  padding:clamp(1rem,2.4vw,1.8rem); border:1px solid #38575c;
  border-radius:8px; background:#142b32; color:#f5f9f7;
}
.work-example figcaption { margin:0; }
.work-example .work-figure-label { color:#abd3cc; margin-block-end:.35rem; }
.work-example figcaption strong {
  display:block; color:#f3f8f6; font-size:clamp(1.25rem,2vw,1.65rem);
  line-height:1.16; letter-spacing:-.016em; font-weight:640;
}
.work-example img {
  display:block; inline-size:100%; block-size:clamp(12rem,18vw,16rem);
  object-fit:contain; margin-block:.8rem .9rem;
}
.work-legend {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem;
  list-style:none; padding:0; border-block-start:1px solid #4c676a;
  margin:0; padding-block-start:.8rem;
}
.work-legend li { margin:0; color:#e2edeb; font-size:.91rem; font-weight:570; line-height:1.35; }
.work-legend li > span {
  display:block; color:#f7b083; font-size:.77rem; font-weight:700;
  font-variant-numeric:tabular-nums; letter-spacing:.06em; margin-block-end:.23rem;
}
.work-example .work-model-link {
  display:inline-flex; align-items:center; gap:.45rem; margin-block-start:.45rem;
  min-block-size:44px; color:#c6e9df; font-size:.94rem; font-weight:640;
  text-decoration:underline; text-underline-offset:.2em;
}
.work-model-link:hover { color:white; }
.work-spread a:focus-visible { outline:2px solid #ac551d; outline-offset:3px; }
.work-example .work-model-link:focus-visible { outline-color:#ffc79f; }
.company-contact-page .cc-about .cc-flow-title { margin-block-start:clamp(2rem,4vw,3rem); }
:lang(ar) .work-intro h2, :lang(ar) .work-example figcaption strong { letter-spacing:normal; line-height:1.4; }
@media(max-width:800px) {
  .work-spread { grid-template-columns:minmax(0,1fr); grid-template-rows:auto; grid-template-areas:"lead" "figure" "story"; row-gap:1.3rem; }
  .work-example img { block-size:clamp(11rem,54vw,16rem); }
}