/* Two project doors: equal at rest, one given space by pointer or keyboard focus. */
.work-hero { --work-gutter:clamp(28px,4vw,72px); padding-top:var(--navigation-height,90px); background:#081526; color:#f5f8ff; }
.work-hero__heading { display:flex; justify-content:space-between; align-items:center; gap:28px; min-height:100px; padding:24px var(--work-gutter); }
.work-hero__heading h1 { margin:0; font-family:"Inter",system-ui,sans-serif; font-size:clamp(32px,3vw,48px); font-weight:400; letter-spacing:-.055em; line-height:1.1; }
.work-hero__heading h1 em { color:#a9c9fa; font-style:normal; }
.work-hero__heading p { max-width:35ch; color:#b7cbe5; font-size:14px; line-height:1.6; }
.work-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:clamp(560px,calc(100svh - 190px),940px); overflow:hidden; border-top:1px solid #9cb7d32e; border-bottom:1px solid #9cb7d32e; transition:grid-template-columns .75s cubic-bezier(.22,1,.36,1); }
.work-panel { position:relative; isolation:isolate; display:flex; align-items:flex-end; min-width:0; overflow:hidden; color:#f6f9ff; background:#091a2d; text-decoration:none; }
.work-panel+.work-panel { border-left:1px solid #c2d7ed55; }
.work-panel__image { position:absolute; z-index:-2; inset:0; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:68% center; transform:scale(1.025); filter:brightness(.83) saturate(.9); transition:transform 1s cubic-bezier(.22,1,.36,1),filter .65s ease; }
.work-panel--soygen .work-panel__image { object-position:84% 38%; }
.work-panel::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(0deg,#04101ff5 0%,#04101fc4 25%,#04101f38 65%,#04101f12 100%); }
.work-panel__content { position:relative; width:100%; min-width:0; padding:160px var(--work-gutter) 34px; }
.work-panel h2 { margin:0; color:#f5f8ff; font-family:"Inter",system-ui,sans-serif; font-weight:400; font-size:clamp(42px,4.6vw,80px); line-height:1.03; letter-spacing:-.055em; }
.work-panel__content>p { margin:24px 0 0; min-height:3.2em; color:#c6d8ef; font-size:clamp(14px,1.15vw,18px); line-height:1.6; transition:color .4s ease; }
.work-panel__action { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:64px; margin-top:32px; padding-top:20px; border-top:1px solid #c4dbf34a; font-size:13px; color:#dceaff; transition:border-color .4s ease; }
.work-panel__arrow { display:grid; place-items:center; width:44px; height:44px; flex:none; border:1px solid #c4dbf37a; border-radius:50%; font-size:25px; line-height:1; transition:background .4s ease,color .4s ease,transform .6s cubic-bezier(.22,1,.36,1); }
.work-panel:focus-visible { z-index:1; outline:3px solid #c6e0ff; outline-offset:-7px; }
@media(min-width:901px) {
  .work-split[data-active="stine"] { grid-template-columns:minmax(0,1.8fr) minmax(0,1fr); }
  .work-split[data-active="soygen"] { grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); }
  .work-panel.is-active .work-panel__image { transform:scale(1); filter:brightness(1) saturate(1); }
  .work-panel.is-inactive .work-panel__image { transform:scale(1.045); filter:brightness(.46) saturate(.6); }
  .work-panel.is-active .work-panel__action { border-color:#c4dbf399; }
  .work-panel.is-active .work-panel__arrow { background:#dcecff; color:#102844; border-color:#dcecff; transform:rotate(0deg); }
  .work-panel.is-inactive .work-panel__content>p { color:#a5b9d0; }
}
@media(max-width:1100px) and (min-width:901px) {
  .work-panel__content { padding-inline:30px; }
  .work-panel h2 { font-size:46px; }
  .work-panel__content>p { font-size:14px; }
}
@media(max-width:900px) {
  .work-hero__heading { min-height:90px; padding-block:22px; }
  .work-hero__heading p { max-width:28ch; font-size:13px; }
  .work-split { grid-template-columns:minmax(0,1fr); min-height:0; }
  .work-panel { min-height:clamp(390px,63svh,580px); }
  .work-panel+.work-panel { border-left:0; border-top:1px solid #c2d7ed55; }
  .work-panel__content { padding:100px var(--work-gutter) 26px; }
  .work-panel h2 { font-size:clamp(40px,7vw,62px); }
  .work-panel__image { transform:none; filter:brightness(.95) saturate(1); }
  .work-panel--soygen .work-panel__image { object-position:84% 33%; }
  .work-panel__content>p { margin-top:18px; font-size:15px; }
  .work-panel__action { margin-top:20px; padding-top:14px; }
}
@media(max-width:540px) {
  .work-hero { --work-gutter:24px; }
  .work-hero__heading { align-items:flex-start; flex-direction:column; gap:12px; padding-block:25px; }
  .work-hero__heading h1 { font-size:34px; }
  .work-hero__heading p { max-width:35ch; }
  .work-panel { min-height:410px; }
}
@media(prefers-reduced-motion:reduce) {
  .work-split,.work-panel__image,.work-panel__content>p,.work-panel__action,.work-panel__arrow { transition:none; }
  .work-panel .work-panel__image { transform:none !important; }
}
@media print {
  .work-hero { padding-top:0; }
  .work-hero__heading { color:#111; background:#fff; }
  .work-split { display:block; }
  .work-panel { min-height:400px; break-inside:avoid; }
  .work-panel .work-panel__image { filter:none; transform:none; }
}

/* Client logo on work panels */
.work-panel__client { margin:0 0 18px; }
.work-panel__client img { display:block; width:auto; height:44px; max-width:190px; object-fit:contain; filter:brightness(0) invert(1); opacity:.95; }
@media (max-width:700px) { .work-panel__client img { height:34px; max-width:150px; } }