/* Featured Work: existing section heading and project preview dialog. */
.fw-showcase{position:relative;isolation:isolate;background:linear-gradient(180deg,#082c3a 0,#041923 12%,#04131e 85%,#0a2e3c 100%);overflow:hidden;padding-bottom:55px}
.fw-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:54px}
.fw-heading h2{font-size:clamp(2.3rem,3.3vw,3.5rem);line-height:1.1;font-weight:750}
.fw-heading>p{max-width:330px;font-size:18px;color:#bdced8;line-height:1.6}
.fw-end{display:flex;gap:20px;align-items:center;margin-top:43px;color:#779faa;font-size:7px;letter-spacing:.15em}
.fw-end i{height:1px;background:linear-gradient(90deg,#72bbc45c,transparent);flex:1}
.fw-dialog{width:min(1150px,94vw);max-width:94vw;max-height:92dvh;padding:25px;background:#061e2c;color:white;border:1px solid #72acb7;border-radius:14px;overscroll-behavior:contain}
.fw-dialog::backdrop{background:#011019e8;backdrop-filter:blur(6px)}
.fw-dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.fw-dialog h2{font-size:26px}
.fw-dialog button{width:44px;height:44px;flex-shrink:0;border:1px solid #57899c;border-radius:50%;background:#103142;color:var(--aqua);font-size:26px}
.fw-preview-images{display:grid;grid-template-columns:3fr 1fr;gap:22px;align-items:start}
.fw-preview-images img{width:100%;height:auto;border:1px solid #416575}
.fw-preview-images figcaption{font-size:11px;color:#a7cbd4;padding:10px 0;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:1100px){.fw-heading>p{font-size:17px;max-width:290px}}
@media(max-width:800px){.fw-heading{display:block}.fw-heading>p{max-width:500px;margin-top:25px}.fw-end>span:last-child{display:none}}
@media(max-width:550px){.fw-heading{margin-bottom:32px}.fw-heading h2{font-size:34px}.fw-heading>p{font-size:17px}.fw-end{font-size:6px;letter-spacing:.07em;margin-top:30px}.fw-dialog{padding:18px}.fw-dialog h2{font-size:21px}.fw-preview-images{grid-template-columns:1fr}.fw-preview-images figure:last-child{max-width:270px;margin:auto}}

/* Three case-study panels. Alternation changes columns, never image orientation. */
.fw-projects { display: flex; flex-direction: column; gap: 45px; }
.fw-project {
  --accent: #77e9e3;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 40% 60%; grid-template-rows: auto auto;
  align-content: center; min-height: 620px; padding: 48px 38px;
  border: 1px solid #65a9b94a; border-radius: 20px;
  background: radial-gradient(ellipse at 80% 40%, #15445670, transparent 65%), linear-gradient(135deg, #0b2939, #04121e);
  box-shadow: 0 25px 45px #0003;
  transition: border-color .3s;
}
.fw-project::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(#84d9de06 1px, transparent 1px), linear-gradient(90deg, #84d9de06 1px, transparent 1px);
  background-size: 56px 56px; mask-image: linear-gradient(90deg, transparent, #000);
}
.fw-project::after { content: ''; position: absolute; top: 0; left: 38px; width: 64px; height: 2px; background: var(--coral); box-shadow: 0 0 18px #ff967e38; }
.fw-project:hover, .fw-project:focus-within { border-color: #80e8e687; }
.fw-info { grid-column: 1; grid-row: 1; z-index: 2; padding-right: 30px; }
.fw-index { display: flex; align-items: center; gap: 17px; margin-bottom: 28px; color: #a7becd; font-size: 8px; letter-spacing: .15em; }
.fw-index > span:first-child { font-size: 28px; line-height: 1; color: var(--accent); font-weight: 500; letter-spacing: -.05em; }
.fw-index i { height: 1px; flex: 1; max-width: 80px; background: linear-gradient(90deg, #75cbd370, transparent); }
.fw-category { font-size: 10px; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 500; max-width: 330px; margin-bottom: 14px; }
.fw-info h3 { font: 750 clamp(29px, 2.8vw, 42px)/1.08 var(--body); letter-spacing: -.04em; max-width: 420px; text-wrap: balance; }
.fw-summary { font-size: 16px; line-height: 1.65; color: #c2d2de; max-width: 375px; margin-top: 22px; }
.fw-tags { display: flex; gap: 7px; flex-wrap: wrap; list-style: none; margin: 24px 0 0; padding: 0; max-width: 390px; }
.fw-tags li { font-size: 9px; font-weight: 500; line-height: 1.35; padding: 8px 10px; border: 1px solid #74b0c149; border-radius:4px; color: #c3dfe6; background: #0c2c3e90; }
.fw-actions { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 23px; padding-top: 28px; z-index: 3; }
.fw-actions button, .fw-actions a { font: 650 10px/1.4 var(--body); text-transform: uppercase; letter-spacing: .055em; color: #edf8fa; display: flex; align-items: center; gap: 14px; background: none; border: 0; border-bottom: 1px solid #6d9fae; padding: 12px 0; min-height: 44px; cursor: pointer; transition: color .25s, border-color .25s; }
.fw-actions button { color: var(--accent); }
.fw-actions a:hover, .fw-actions button:hover { color: var(--coral); border-color: var(--coral); }
.fw-ads-legacy { grid-template-columns: 60% 40%; --accent: #ffad91; background: radial-gradient(ellipse at 20% 55%, #16495870, transparent 62%), linear-gradient(130deg, #071d2c, #102534); }
.fw-ads-legacy .fw-info { grid-column: 2; padding-right: 0; padding-left: 32px; }
.fw-ads-legacy .fw-actions { grid-column: 2; padding-left: 32px; }
.fw-ads-legacy .fw-devices { grid-column: 1; }
.fw-ims { --accent: #90d7ff; background: radial-gradient(ellipse at 80% 45%, #16446770, transparent 65%), linear-gradient(135deg, #0a2234, #041624); }

/* One shared product stage: real frontal hardware + independent client captures.
   Screen measurements refer to the existing 1336×980 and 750×1515 shells.
   All sizes are proportional, so the two devices scale together on mobile. */
.fw-product-stage {
  grid-column: 2; grid-row: 1 / 3; align-self: center;
  position: relative; isolation: isolate; min-width: 0; width: 100%; aspect-ratio: 1.37;
  background: radial-gradient(ellipse at 50% 60%, #07151d90 0, #10394422 50%, transparent 74%);
}
.product-ground { position: absolute; left: 2%; right: 2%; bottom: 1%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse, #000c 0, #0006 42%, transparent 72%); filter: blur(7px); z-index: -1; }
.product-ground::before { content: ''; position: absolute; inset: -80% -4% -25%; border-radius: 50%; background: radial-gradient(ellipse, #56e1dc20, transparent 68%); z-index: -1; }
.product-laptop { position: absolute; left: 2%; bottom: 7%; width: 89%; aspect-ratio: 1336 / 980; z-index: 1; transform-origin: 50% 100%; filter: drop-shadow(0 1px 1px #82ece831); }
.product-phone { position: absolute; right: 2%; bottom: 5%; width: 22%; aspect-ratio: 750 / 1515; z-index: 3; transform-origin: 50% 100%; filter: drop-shadow(-6px 8px 6px #0008); }
.fw-ads-legacy .product-laptop { left: auto; right: 2%; }
.fw-ads-legacy .product-phone { right: auto; left: 2%; }
.fw-product-stage .device-shell { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.fw-product-stage .device-screen { position: absolute; overflow: hidden; background: #020b10; z-index: 2; }
.product-laptop .device-screen { left: 13.47%; top: 5.92%; width: 73.05%; height: 55.51%; border-radius: 1px; box-shadow: 0 0 0 1px #010709; }
.product-phone .device-screen { left: 5.33%; top: 2.05%; width: 89.07%; height: 95.25%; border-radius: 9% / 4.4%; }
.fw-product-stage .device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.product-camera { position: absolute; top: 3.2%; left: 47%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #1b3151 0 20%, #020509 26% 70%, #333e43 77%, #05090a 85%); z-index: 4; }
.product-speaker { position: absolute; top: 1.15%; left: 40%; width: 20%; height: .4%; border-radius: 5px; background: #02080b; z-index: 4; }

/* One-time reveal and restrained hover. No rotation, skew or continuous float. */
.fw-motion .fw-info { opacity: 0; translate: 0 20px; transition: opacity .75s, translate .75s; }
.fw-product-stage .product-laptop, .fw-product-stage .product-phone { transition: scale .35s, filter .35s; }
.fw-motion .product-laptop, .fw-motion .product-phone { opacity: 0; translate: 0 26px; transition: opacity .85s, translate .85s, scale .35s, filter .35s; }
.fw-motion .product-phone { transition: opacity .85s .12s, translate .85s .12s, scale .35s, filter .35s; }
.fw-motion .device-screen img { opacity: 0; transition: opacity .8s .18s; }
.fw-visible .fw-info, .fw-visible .product-laptop, .fw-visible .product-phone { opacity: 1; translate: 0 0; }
.fw-visible .device-screen img { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .fw-product-stage:hover .product-laptop, .fw-product-stage:hover .product-phone { scale: 1.012; }
  .fw-product-stage:hover .product-laptop { filter: drop-shadow(0 0 5px #64e2e22e); }
  .fw-product-stage:hover .product-phone { filter: drop-shadow(-5px 8px 7px #0008) drop-shadow(0 0 3px #64e2e226); }
}
@media (max-width: 1100px) {
  .fw-project { min-height: 560px; padding: 32px 26px; }
  .fw-info { padding-right: 20px; }
  .fw-info h3 { font-size: 31px; }
  .fw-summary { font-size: 15px; }
  .fw-index { margin-bottom: 23px; }
  .fw-category { font-size: 9px; }
  .fw-tags li { font-size: 8px; }
  .fw-ads-legacy .fw-info, .fw-ads-legacy .fw-actions { padding-left: 24px; }
  .fw-actions { gap: 17px; }
  .fw-actions a, .fw-actions button { font-size: 9px; gap: 9px; }
}
@media (max-width: 800px) {
  .fw-project { grid-template-columns: 1fr; min-height: 0; padding: 32px 28px; }
  .fw-info, .fw-ads-legacy .fw-info { grid-column: 1; grid-row: 1; padding: 0; }
  .fw-info h3 { font-size: 36px; max-width: 550px; }
  .fw-summary { font-size: 17px; max-width: 550px; }
  .fw-category { font-size: 10px; max-width: 100%; }
  .fw-tags { max-width: 550px; }
  .fw-tags li { font-size: 10px; }
  .fw-product-stage, .fw-ads-legacy .fw-product-stage { grid-column: 1; grid-row: 2; margin-top: 28px; }
  .fw-actions, .fw-ads-legacy .fw-actions { grid-column: 1; grid-row: 3; padding: 12px 0 0; gap: 27px; }
  .fw-actions a, .fw-actions button { font-size: 11px; }
  .fw-ads-legacy .product-laptop { right: auto; left: 2%; }
  .fw-ads-legacy .product-phone { left: auto; right: 2%; }
}
@media (max-width: 550px) {
  .fw-projects { gap: 26px; }
  .fw-project { padding: 27px 20px; border-radius: 14px; }
  .fw-project::after { left: 20px; }
  .fw-info h3 { font-size: 30px; }
  .fw-index { margin-bottom: 22px; }
  .fw-index > span:first-child { font-size: 25px; }
  .fw-category { font-size: 8px; }
  .fw-summary { font-size: 16px; margin-top: 18px; }
  .fw-tags { gap: 6px; margin-top: 20px; }
  .fw-tags li { font-size: 8px; padding: 7px 9px; }
  .fw-product-stage { margin-top: 23px; }
  .product-ground { filter: blur(4px); }
  .product-phone { filter: drop-shadow(-3px 4px 3px #0008); }
  .fw-actions, .fw-ads-legacy .fw-actions { gap: 23px; padding-top: 12px; }
  .fw-actions a, .fw-actions button { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .fw-project, .fw-project * { transition: none !important; }
  .fw-motion .fw-info, .fw-motion .product-laptop, .fw-motion .product-phone, .fw-motion .device-screen img { opacity: 1; translate: none; scale: none; }
}
html:not(.js) .fw-actions button { display: none; }