*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:hsl(0,0%,4%);--surface:hsl(0,0%,8%);--text:hsl(0,0%,96%);--muted:hsl(0,0%,53%);--stroke:hsl(0,0%,12%)}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
.sky-banner{position:fixed;top:0;left:0;right:0;z-index:200;background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.1);padding:8px 16px;text-align:center;font-size:11px;color:rgba(255,255,255,0.8);letter-spacing:0.05em}

.sky-eyebrow{display:inline-block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.3em;font-weight:500}

.sky-hero{position:relative;width:100%;min-height:100vh;overflow:hidden;padding-top:32px}
.sky-bg{position:absolute;inset:32px 0 0;width:100%;height:calc(100% - 32px);object-fit:cover;z-index:0}
.sky-bg-ovl{position:absolute;inset:32px 0 0;background:rgba(0,0,0,0.2);z-index:1;pointer-events:none}
.sky-bg-fade{position:absolute;left:0;right:0;bottom:0;height:192px;background:linear-gradient(to top,var(--bg),transparent);z-index:2;pointer-events:none}

.sky-nav{position:fixed;top:48px;left:50%;transform:translateX(-50%);z-index:50;display:inline-flex;align-items:center;gap:6px;background:var(--surface);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);border-radius:9999px;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.25)}
.sky-logo-circle{width:36px;height:36px;border-radius:50%;background:linear-gradient(90deg,#89AACC,#4E85BF);padding:1.5px;flex-shrink:0;transition:transform .2s}
.sky-logo-circle:hover{transform:scale(1.1)}
.sky-logo-circle span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:var(--bg);color:#fff;font-family:'Instrument Serif',serif;font-style:italic;font-size:13px}
.sky-divider{display:none;width:1px;height:20px;background:var(--stroke);margin:0 4px}
@media(min-width:480px){.sky-divider{display:inline-block}}
.sky-link{padding:8px 14px;border-radius:9999px;font-size:13px;color:var(--muted);cursor:pointer;transition:all .2s}
.sky-link:hover{color:var(--text);background:rgba(255,255,255,0.05)}
.sky-link.active{color:var(--text);background:rgba(255,255,255,0.06)}
.sky-hi{padding:8px 16px;border-radius:9999px;background:var(--surface);color:var(--text);border:1px solid rgba(255,255,255,0.05);font-family:inherit;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:transform .2s}
.sky-hi:hover{transform:translateY(-1px)}
.sky-arr{font-size:14px}

.sky-hero-c{position:relative;z-index:10;height:calc(100vh - 32px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:32px 24px;gap:18px}
.sky-h1{font-family:'Instrument Serif',serif;font-style:italic;font-size:clamp(56px,11vw,144px);font-weight:400;line-height:0.9;letter-spacing:-0.02em;color:var(--text);margin-bottom:8px}
.sky-h1 em{font-style:italic}
.sky-role-line{font-size:18px;color:var(--text);font-weight:400}
.sky-role{font-family:'Instrument Serif',serif;font-style:italic;color:var(--text);display:inline-block;animation:sky-rolefade 0.4s ease-out}
@keyframes sky-rolefade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.sky-desc{font-size:14px;color:var(--muted);max-width:420px;line-height:1.55}
@media(min-width:768px){.sky-desc{font-size:15px}}
.sky-cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:24px}
.sky-cta-prim,.sky-cta-out{padding:14px 28px;border-radius:9999px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}
.sky-cta-prim{background:var(--text);color:var(--bg);border:none}
.sky-cta-prim:hover{transform:scale(1.05)}
.sky-cta-out{background:var(--bg);color:var(--text);border:2px solid var(--stroke)}
.sky-cta-out:hover{transform:scale(1.05);border-color:#89AACC}

.sky-scroll{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:10;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--muted)}
.sky-scroll span{font-size:11px;letter-spacing:0.2em;text-transform:uppercase}
.sky-scroll-line{position:relative;width:1px;height:40px;background:var(--stroke);overflow:hidden}
.sky-scroll-dot{position:absolute;top:0;left:0;width:100%;height:30%;background:linear-gradient(to bottom,transparent,#89AACC,transparent);animation:sky-scrolldn 1.5s ease-in-out infinite}
@keyframes sky-scrolldn{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}

/* 3. WORKS */
.sky-works{padding:96px 24px;max-width:1200px;margin:0 auto}
@media(min-width:768px){.sky-works{padding:128px 64px}}
.sky-works-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:48px;position:relative}
.sky-works-eb{display:flex;align-items:center;gap:10px}
.sky-eb-line{display:inline-block;width:32px;height:1px;background:var(--stroke)}
.sky-works-h{font-size:clamp(36px,5vw,72px);font-weight:300;color:var(--text);letter-spacing:-0.02em;line-height:1.05}
.sky-works-h em{font-family:'Instrument Serif',serif;font-style:italic}
.sky-works-sub{font-size:14px;color:var(--muted);max-width:480px}
.sky-view-all{display:none;align-self:flex-end;background:transparent;color:var(--text);border:1px solid var(--stroke);border-radius:9999px;padding:10px 22px;font-family:inherit;font-size:13px;cursor:pointer;align-items:center;gap:6px;transition:border-color .2s}
@media(min-width:768px){.sky-view-all{display:inline-flex;position:absolute;top:0;right:0}}
.sky-view-all:hover{border-color:#89AACC}

.sky-bento{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:768px){.sky-bento{grid-template-columns:repeat(12,1fr);gap:22px}}
.sky-card{background:var(--surface);border:1px solid var(--stroke);border-radius:24px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;aspect-ratio:4/3;position:relative}
@media(min-width:768px){
  .sky-c1{grid-column:span 7}
  .sky-c2{grid-column:span 5}
  .sky-c3{grid-column:span 5}
  .sky-c4{grid-column:span 7}
}
.sky-card-img{flex:1;background-size:cover;background-position:center;transition:transform .5s}
.sky-card:hover .sky-card-img{transform:scale(1.05)}
.sky-card-body{padding:18px 22px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.sky-card-tag{font-size:11px;color:var(--muted);letter-spacing:0.1em;text-transform:uppercase}
.sky-card-body h3{font-size:18px;font-weight:500;color:var(--text)}
@media(min-width:768px){.sky-card-body h3{font-size:22px}}