:root{--work-card:#0a2332;--work-line:rgba(255,255,255,.12)}
body.work-page-body{min-height:100vh;background:#061a29;color:#fff}
.work-page-body .site-header{background:rgba(6,26,41,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}
.work-page-body .site-header .desktop-nav a{opacity:.74}.work-page-body .site-header .desktop-nav a:hover{opacity:1}
.work-page{padding:150px clamp(20px,6vw,96px) 100px;overflow:hidden;position:relative}
.work-page:before{content:"";position:absolute;width:720px;height:720px;border-radius:50%;right:-260px;top:-240px;background:radial-gradient(circle,rgba(57,201,194,.18),rgba(46,168,223,.07) 45%,transparent 70%);filter:blur(6px);pointer-events:none}
.work-breadcrumb{position:relative;z-index:2;display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:#78a5af;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:34px}.work-breadcrumb a{color:#9fe8e2}.work-breadcrumb i{font-style:normal;opacity:.45}
.work-hero{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.55fr);gap:56px;align-items:end;padding-bottom:70px;border-bottom:1px solid rgba(255,255,255,.12)}
.work-hero h1{font-size:clamp(58px,8vw,122px);line-height:.88;letter-spacing:-.07em;max-width:1050px}.work-hero h1 span{display:block;background:linear-gradient(90deg,#52ddd2,#5dbaf0);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;font-weight:550}
.work-hero-side{max-width:520px;justify-self:end}.work-hero-side p{font-size:clamp(15px,1.3vw,19px);line-height:1.7;color:#9db4bc}.work-hero-note{margin-top:18px;padding:10px 13px;border:1px solid rgba(89,219,209,.25);border-radius:999px;width:max-content;max-width:100%;color:#aee9e4;font-size:9px;letter-spacing:.13em;text-transform:uppercase}
.work-section{position:relative;z-index:2;padding-top:70px}.work-section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:32px}.work-section-head h2{font-size:clamp(32px,4vw,56px);letter-spacing:-.045em}.work-section-head p{max-width:500px;color:#829da7;font-size:13px;line-height:1.6}
.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.project-card{position:relative;display:flex;flex-direction:column;min-height:460px;border:1px solid var(--work-line);border-radius:26px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}.project-card:hover{transform:translateY(-5px);border-color:rgba(104,224,214,.38);box-shadow:0 28px 70px rgba(0,0,0,.22)}
.project-visual{height:260px;overflow:hidden;background:#0b2737;position:relative}.project-visual img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .6s cubic-bezier(.16,1,.3,1)}.project-card:hover .project-visual img{transform:scale(1.025)}
.project-copy{padding:24px;display:flex;flex-direction:column;flex:1}.project-label{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#68d9d1;font-weight:800}.project-copy h3{font-size:26px;line-height:1.05;letter-spacing:-.035em;margin:10px 0 12px}.project-copy p{color:#8fa7af;font-size:13px;line-height:1.65}.project-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:24px;color:#d8f8f5;font-size:11px;letter-spacing:.11em;text-transform:uppercase;font-weight:800}.project-link span{color:#62dfd5;font-size:15px}
.concept-visual{display:grid;place-items:center;height:260px;position:relative;overflow:hidden;background:radial-gradient(circle at 30% 20%,rgba(97,225,213,.24),transparent 34%),linear-gradient(145deg,#0b2d3b,#091923)}.concept-visual:before,.concept-visual:after{content:"";position:absolute;border:1px solid rgba(105,225,214,.25);border-radius:50%}.concept-visual:before{width:190px;height:190px;transform:rotateX(65deg)}.concept-visual:after{width:280px;height:130px;transform:rotate(24deg)}.concept-mark{position:relative;z-index:2;font-size:clamp(36px,5vw,66px);font-weight:900;letter-spacing:-.07em;color:#f2fbfb;text-shadow:0 0 30px rgba(85,218,211,.18)}
.subcategory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.subcategory-card{min-height:290px;border:1px solid rgba(255,255,255,.12);border-radius:28px;padding:30px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));transition:transform .35s,border-color .35s}.subcategory-card:hover{transform:translateY(-4px);border-color:rgba(104,224,214,.38)}.subcategory-card:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-70px;bottom:-100px;background:radial-gradient(circle,rgba(66,206,205,.2),transparent 70%)}.subcategory-card small{color:#6eddd5;font-size:9px;letter-spacing:.17em;text-transform:uppercase;font-weight:800}.subcategory-card h3{font-size:clamp(32px,4vw,54px);line-height:.95;letter-spacing:-.05em;margin-top:12px}.subcategory-card p{color:#8ca7af;max-width:490px;font-size:13px;line-height:1.6}.subcategory-card b{margin-top:28px;color:#d8f7f4;font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.art-card{border:1px solid rgba(255,255,255,.12);border-radius:28px;overflow:hidden;background:rgba(255,255,255,.025)}.art-canvas{aspect-ratio:4/3;position:relative;overflow:hidden;background:#071c2c}.art-canvas i{position:absolute;display:block}.art-1{background:radial-gradient(circle at 30% 25%,#64d7e6 0%,transparent 18%),radial-gradient(circle at 67% 70%,#6f64d9 0%,transparent 22%),linear-gradient(145deg,#0a2434,#0e1727)}.art-1 i:nth-child(1){width:52%;height:52%;left:24%;top:24%;border:2px solid rgba(255,255,255,.55);border-radius:42% 58% 55% 45%/52% 38% 62% 48%;transform:rotate(19deg)}.art-1 i:nth-child(2){width:22%;height:22%;left:42%;top:39%;background:linear-gradient(145deg,#e9ffff,#71ddd4);border-radius:50%;box-shadow:0 0 55px rgba(102,225,215,.45)}
.art-2{background:linear-gradient(135deg,#071923 0%,#10394b 50%,#08202f 100%)}.art-2 i:nth-child(1){width:70%;height:2px;left:15%;top:50%;background:#78e2d8;box-shadow:0 -54px 0 #5a92ef,0 54px 0 #6dcae8}.art-2 i:nth-child(2){width:34%;height:34%;left:33%;top:33%;border:18px solid rgba(255,255,255,.88);transform:rotate(45deg);box-shadow:0 0 50px rgba(94,217,214,.2)}
.art-3{background:radial-gradient(circle at 50% 50%,#193c4f,#081a28 56%,#06141f)}.art-3 i:nth-child(1){width:42%;height:42%;left:29%;top:29%;border-radius:50%;background:conic-gradient(from 20deg,#65dbd2,#4a92ef,#a87de8,#65dbd2);filter:blur(1px);box-shadow:0 0 55px rgba(96,205,224,.28)}.art-3 i:nth-child(2){width:20%;height:20%;left:40%;top:40%;border-radius:50%;background:#071c2c;border:1px solid rgba(255,255,255,.3)}
.art-4{background:linear-gradient(155deg,#081d2d,#122d39)}.art-4 i:nth-child(1){width:72%;height:72%;left:14%;top:14%;background:linear-gradient(135deg,rgba(103,225,214,.85),rgba(83,132,229,.35));clip-path:polygon(50% 0,100% 35%,80% 100%,20% 100%,0 35%)}.art-4 i:nth-child(2){width:48%;height:48%;left:26%;top:26%;background:#0a2232;clip-path:polygon(50% 0,100% 35%,80% 100%,20% 100%,0 35%)}
.art-caption{padding:22px}.art-caption small{font-size:9px;letter-spacing:.16em;color:#68d9d1;text-transform:uppercase;font-weight:800}.art-caption h3{font-size:24px;margin:8px 0 0;letter-spacing:-.035em}
.work-cta{margin-top:76px;padding:40px;border:1px solid rgba(255,255,255,.12);border-radius:28px;background:linear-gradient(135deg,rgba(61,210,197,.09),rgba(66,140,215,.06));display:flex;justify-content:space-between;align-items:center;gap:30px}.work-cta h2{font-size:clamp(32px,4vw,58px);letter-spacing:-.045em}.work-cta p{color:#8ea6af;margin-top:8px}.work-page-footer{padding:28px clamp(20px,6vw,96px) 36px;border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#78939d;font-size:11px}.work-page-footer a{color:#b8e9e5}
@media(max-width:960px){.work-hero{grid-template-columns:1fr}.work-hero-side{justify-self:start}.project-grid{grid-template-columns:1fr 1fr}.subcategory-grid{grid-template-columns:1fr}.work-cta{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.work-page{padding:112px 18px 74px}.work-hero{gap:28px;padding-bottom:48px}.work-hero h1{font-size:clamp(52px,15vw,82px)}.work-section{padding-top:50px}.work-section-head{align-items:flex-start;flex-direction:column}.project-grid,.art-grid{grid-template-columns:1fr}.project-card{min-height:0}.project-visual,.concept-visual{height:230px}.work-cta{padding:28px 22px;border-radius:22px}.work-page-footer{padding-inline:18px}.work-page-body .desktop-nav,.work-page-body .nav-cta{display:none}.work-page-body .site-header{grid-template-columns:1fr auto;height:70px}.work-page-body .menu-toggle{display:block}.work-page-body .brand-name small{display:none}}

/* ===== V21: work page desktop + mobile optimization ===== */
.work-page-body a,.work-page-body button{touch-action:manipulation}
.project-card img{content-visibility:auto}
@media(min-width:1680px){
  .work-page{padding-inline:max(6vw,calc((100vw - 1680px)/2 + 72px))}
  .work-breadcrumb,.work-hero,.work-section,.work-cta{width:min(100%,1540px);margin-inline:auto}
  .work-page-footer{padding-inline:max(6vw,calc((100vw - 1680px)/2 + 72px))}
  .project-grid{gap:24px}.project-visual{height:290px}
}
@media(max-width:760px){
  .work-page{padding:104px 14px 66px}
  .work-breadcrumb{margin-bottom:26px;line-height:1.7}
  .work-hero h1{font-size:clamp(46px,14vw,72px)}
  .work-hero-side p{font-size:14px}
  .work-hero-note{width:100%;line-height:1.55;border-radius:14px}
  .work-section-head{gap:12px}.work-section-head p{font-size:12px}
  .project-grid,.art-grid{gap:16px}
  .project-card,.art-card,.subcategory-card{border-radius:22px}
  .project-visual,.concept-visual{height:auto;aspect-ratio:16/10}
  .project-copy{padding:20px}.project-copy h3{font-size:24px}.project-copy p{font-size:12.5px}
  .project-link{padding-top:18px}
  .work-cta{margin-top:56px;padding:24px 20px}.work-cta .btn{width:100%;min-height:48px}
  .work-page-footer{padding-inline:14px}
}
.project-grid-balanced{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.project-grid-balanced{grid-template-columns:1fr}}

/* ===== V22: richer work pages ===== */
.project-grid-tight{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.project-grid-tight .project-card{min-height:420px}
.project-grid-tight .project-visual{height:240px}
.project-grid-branding{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.project-grid-branding .project-card{min-height:440px}
.project-grid-branding .project-visual{height:245px;background:#f6fafc}
.project-grid-branding .project-visual img{object-fit:contain;padding:16px;background:linear-gradient(145deg,#fbfdff,#eef7fb)}
.project-grid-art{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.project-grid-art .project-card{min-height:390px}
.project-grid-art .project-visual{height:300px;background:#0b2737}
.project-grid-art .project-visual img{object-fit:cover;object-position:center center}
.work-gallery-note{margin-top:-6px;margin-bottom:24px;color:#93acb5;font-size:13px;line-height:1.65}
@media(max-width:1100px){.project-grid-tight,.project-grid-branding,.project-grid-art{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.project-grid-tight,.project-grid-branding,.project-grid-art{grid-template-columns:1fr;gap:16px}.project-grid-tight .project-visual,.project-grid-branding .project-visual,.project-grid-art .project-visual{height:auto;aspect-ratio:4/3}}

/* ===== V25: photography department cards ===== */
.photography-team-work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.photography-person-card .project-visual{height:360px}
.photography-person-card .project-visual img{object-fit:cover;object-position:center 16%}
.photography-person-card .project-copy p strong{color:#d9f8f5;font-size:12px;letter-spacing:.02em}
@media(max-width:1100px){.photography-team-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.photography-team-work-grid{grid-template-columns:1fr}.photography-person-card .project-visual{height:auto;aspect-ratio:4/5}}

/* ===== V25: music covers + business collateral ===== */
.business-card-visual{height:300px;background:#071c2c}
.business-card-visual img{object-fit:contain!important;object-position:center!important;background:#071c2c}
@media(max-width:760px){.business-card-visual{height:auto;aspect-ratio:16/9}}