.works-section { position:relative; overflow:hidden; padding:clamp(72px,8vw,104px) clamp(20px,5vw,72px) clamp(70px,7vw,96px); color:#f8fbff; background:radial-gradient(ellipse at 12% 0,#14578b 0,transparent 35%),linear-gradient(135deg,#0a3c66,#0b4778 52%,#082e50); border-top:5px solid #ffc400; isolation:isolate; }
.works-section::before,.works-section::after { content:""; position:absolute; z-index:-1; border:1px solid #ffffff12; border-radius:50%; pointer-events:none; }
.works-section::before { width:520px; height:520px; top:-340px; right:-220px; box-shadow:0 0 0 36px #ffffff05,0 0 0 74px #ffffff04; }
.works-section::after { width:440px; height:440px; bottom:-320px; left:-230px; box-shadow:0 0 0 34px #ffffff05,0 0 0 70px #ffffff04; }
.works-inner { width:min(100%,1240px); margin:0 auto; }
.works-heading { max-width:760px; margin:0 auto 38px; text-align:center; }
.works-eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0 0 12px; color:#ffd02d; font-size:13px; line-height:1; font-weight:800; letter-spacing:.2em; }
.works-eyebrow::before,.works-eyebrow::after { content:""; width:24px; height:1px; background:#ffd02d88; }
.works-heading h2 { margin:0; color:#fff; font-family:'Roboto Condensed',Arial,sans-serif; font-size:clamp(36px,5vw,58px); line-height:1.05; font-weight:800; letter-spacing:-.025em; }
.works-heading > p:last-child { margin:13px 0 0; color:#d1e0ef; font-size:clamp(16px,1.55vw,19px); line-height:1.5; }
.works-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.work-card { min-width:0; margin:0; overflow:hidden; aspect-ratio:3 / 2; border:1px solid #ffffff28; border-radius:12px; background:#061f36; box-shadow:0 12px 28px #0014294a; opacity:0; transform:translateY(16px); transition:opacity .38s ease,transform .3s ease,border-color .22s ease,box-shadow .22s ease; }
.is-visible .work-card { opacity:1; transform:translateY(0); }
.is-visible .work-card:nth-child(3n + 2) { transition-delay:.05s; }.is-visible .work-card:nth-child(3n) { transition-delay:.1s; }
.work-card:hover { transform:translateY(-4px); border-color:#ffd02d9c; box-shadow:0 18px 34px #00142966,0 0 22px #ffc40014; }
.work-photo-button { display:block; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:zoom-in; }
.work-photo-button:focus-visible { position:relative; z-index:1; outline:3px solid #ffd02d; outline-offset:-4px; }
.work-card img { display:block; width:100%; height:100%; object-fit:contain; transition:transform .4s ease; }
.work-card:hover img { transform:scale(1.025); }
.works-lightbox { position:fixed; inset:0; width:min(1120px,calc(100vw - 40px)); height:min(900px,calc(100dvh - 40px)); max-width:none; max-height:none; margin:auto; padding:62px 76px 58px; overflow:hidden; border:1px solid #ffffff30; border-radius:16px; color:#fff; background:#031b31f5; box-shadow:0 24px 90px #000b; }
.works-lightbox::backdrop { background:#00101fdf; backdrop-filter:blur(7px); }
.works-lightbox-figure { display:grid; width:100%; height:100%; place-items:center; margin:0; }
.works-lightbox-image { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; user-select:none; touch-action:pan-y; }
.works-lightbox-close,.works-lightbox-arrow { position:absolute; z-index:2; display:grid; place-items:center; border:1px solid #ffffff50; color:#fff; background:#062949e8; cursor:pointer; transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease; }
.works-lightbox-close:hover,.works-lightbox-arrow:hover { border-color:#ffd02d; color:#ffd02d; background:#0b385e; }
.works-lightbox-close { top:13px; right:14px; width:42px; height:42px; border-radius:50%; }
.works-lightbox-close svg { width:20px; height:20px; }
.works-lightbox-arrow { top:50%; width:50px; height:50px; border-radius:50%; transform:translateY(-50%); }
.works-lightbox-arrow:hover { transform:translateY(-50%) scale(1.06); }
.works-lightbox-arrow svg { width:27px; height:27px; }
.works-lightbox-prev { left:14px; }.works-lightbox-next { right:14px; }
.works-lightbox-counter { position:absolute; left:50%; bottom:14px; transform:translateX(-50%); min-width:64px; padding:7px 12px; border:1px solid #ffffff3a; border-radius:30px; color:#fff; background:#041a2ee8; font-size:13px; line-height:1; font-weight:700; text-align:center; }
.works-lightbox-hint { position:absolute; right:18px; bottom:16px; margin:0; color:#b7cada; font-size:12px; }
.works-call-wrap { display:flex; justify-content:center; margin-top:36px; }
.works-call-button { display:inline-flex; min-height:60px; align-items:center; justify-content:center; gap:12px; padding:13px 24px; border:1px solid #ffe269; border-radius:10px; color:#06213e; background:linear-gradient(180deg,#ffdc3c,#ffc000); box-shadow:0 5px 0 #b78300,0 12px 24px #00172d55; font-family:'Roboto Condensed',Arial,sans-serif; font-size:19px; font-weight:900; text-decoration:none; transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }
.works-call-button:hover { transform:translateY(-2px); filter:brightness(1.04); box-shadow:0 7px 0 #b78300,0 16px 28px #00172d66; }
.works-call-button:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.works-call-button svg { width:22px; height:22px; flex:0 0 auto; }
.works-call-number { padding-left:12px; border-left:1px solid #06213e55; font-size:16px; white-space:nowrap; }
@media (max-width:980px) { .works-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media (max-width:620px) { .works-section { padding:62px 17px 66px; }.works-heading { margin-bottom:27px; }.works-heading h2 { font-size:38px; }.works-grid { grid-template-columns:1fr; gap:14px; }.work-card { border-radius:10px; }.works-call-wrap { margin-top:25px; }.works-call-button { width:100%; min-height:56px; gap:9px; padding:12px 14px; font-size:17px; }.works-call-number { padding-left:9px; font-size:14px; }.works-lightbox { width:calc(100vw - 16px); height:calc(100dvh - 16px); padding:56px 44px 48px; border-radius:10px; }.works-lightbox-close { top:8px; right:8px; width:38px; height:38px; }.works-lightbox-arrow { width:40px; height:40px; }.works-lightbox-prev { left:5px; }.works-lightbox-next { right:5px; }.works-lightbox-hint { display:none; } }
@media (max-width:380px) { .works-call-button { flex-wrap:wrap; }.works-call-number { border:0; padding-left:0; } }
@media (prefers-reduced-motion:reduce) { .work-card,.work-card img,.works-call-button { transition:none!important; }.work-card { opacity:1; transform:none; } }