:root {
  --ink: #e8edf3;
  --muted: #99a3af;
  --bg: #15191f;
  --panel: #1b2027;
  --line: rgba(224, 236, 255, 0.14);
  --blue: #70b7ff;
  --deep-blue: #1d62b0;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); }
a { color: inherit; text-decoration: none; }

.page-glow { position: fixed; z-index: -1; top: -28rem; left: 50%; width: 70rem; height: 50rem; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(41, 121, 202, .15), transparent 67%); pointer-events: none; }
.site-header, main, footer { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.site-header { height: 92px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.brand-mark { width: 31px; height: 31px; display: grid; place-items: center; color: var(--bg); background: var(--blue); font: 500 10px var(--mono); letter-spacing: -.08em; }
nav { display: flex; gap: 32px; margin-left: 85px; }
nav a, .header-contact, footer, .project-meta, .eyebrow, .section-number { font: 400 11px var(--mono); letter-spacing: .04em; }
nav a { color: var(--muted); transition: color .2s ease; }
nav a:hover { color: var(--blue); }
.header-contact { color: var(--blue); }
.header-contact span, .project-card a span { font-size: 15px; }

.hero { min-height: 650px; padding: 126px 0 62px; display: flex; flex-direction: column; justify-content: space-between; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 22px; color: var(--blue); text-transform: uppercase; display: flex; align-items: center; gap: 8px; }
.eyebrow span { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px var(--blue); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 900px; margin-bottom: 35px; font-size: clamp(3rem, 7vw, 6.25rem); line-height: .99; letter-spacing: -.075em; font-weight: 600; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; }
.hero-copy { max-width: 355px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.scroll-cue { display: flex; align-items: center; gap: 14px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
.scroll-cue b { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line); color: var(--blue); font: 18px var(--sans); }

.work-section { padding: 120px 0 128px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 50px; }
h2 { margin: 0; font-size: clamp(2rem, 4.2vw, 4rem); font-weight: 600; letter-spacing: -.06em; line-height: 1.05; }
.section-heading > p { max-width: 285px; margin: 0 4px 7px 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.project-card { min-width: 0; padding-bottom: 24px; background: var(--panel); border: 1px solid var(--line); transition: transform .25s ease, border-color .25s ease; }
.project-card:hover { transform: translateY(-6px); border-color: rgba(112, 183, 255, .52); }
.project-visual { height: 250px; position: relative; overflow: hidden; background-color: #222933; border-bottom: 1px solid var(--line); }
.project-meta, .project-card h3, .project-card > p, .project-card > a { margin-left: 24px; margin-right: 24px; }
.project-meta { margin-top: 22px; color: var(--blue); display: flex; justify-content: space-between; font-size: 9px; }
.project-card h3 { margin-top: 20px; margin-bottom: 10px; font-size: 20px; letter-spacing: -.04em; font-weight: 600; }
.project-card > p { min-height: 65px; margin-bottom: 24px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.project-card > a { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); font-size: 12px; font-weight: 700; }
.visual-label { position: absolute; top: 18px; left: 18px; color: rgba(232, 237, 243, .67); font: 9px var(--mono); letter-spacing: .08em; }
.visual-grid { background: linear-gradient(125deg, #1a3c65, #1d2229 65%); background-image: linear-gradient(rgba(112,183,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(112,183,255,.1) 1px, transparent 1px), linear-gradient(125deg, #1a3c65, #1d2229 65%); background-size: 32px 32px, 32px 32px, auto; }
.line { position: absolute; height: 1px; background: var(--blue); transform-origin: left; opacity: .9; }.line-one { width: 190px; left: 70px; top: 144px; transform: rotate(-28deg); }.line-two { width: 123px; left: 211px; top: 72px; transform: rotate(44deg); }
.node { position: absolute; width: 11px; height: 11px; border: 2px solid var(--blue); border-radius: 50%; background: #214d7b; box-shadow: 0 0 16px #56a8f7; }.node-one { left: 65px; top: 139px; }.node-two { left: 206px; top: 67px; }.node-three { left: 297px; top: 157px; }
.visual-orbit { background: radial-gradient(circle at 50% 48%, #2864a1 0 4%, #183958 5% 15%, transparent 16%), linear-gradient(145deg, #16202a, #26313e); }.orbit { position: absolute; border: 1px solid rgba(112,183,255,.72); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-24deg); }.orbit-one { width: 240px; height: 90px; }.orbit-two { width: 170px; height: 170px; transform: translate(-50%, -50%) rotate(31deg); border-color: rgba(112,183,255,.35); }.core { position: absolute; left: 50%; top: 50%; width: 17px; height: 17px; transform: translate(-50%, -50%); border-radius: 50%; background: #a5d4ff; box-shadow: 0 0 28px 8px #4b9ee9; }
.visual-bars { display: flex; align-items: end; gap: 14px; padding: 38px 37px 29px; background: linear-gradient(140deg, #292727, #202a35); }.bar { width: 26px; background: linear-gradient(#80c3ff, #1e4a79); border-top: 2px solid #b5dcff; }.bar-one { height: 57px; }.bar-two { height: 133px; }.bar-three { height: 91px; }.bar-four { height: 174px; }.visual-bars .visual-label { left: auto; right: 18px; }

.about-section { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 112px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.section-number { color: var(--blue); }.about-section > div { max-width: 650px; }.about-section h2 { margin-bottom: 32px; }.about-section p:not(.section-number) { max-width: 520px; color: var(--muted); font-size: 17px; line-height: 1.7; }.text-link { display: inline-flex; gap: 12px; align-items: center; margin-top: 20px; color: var(--blue); font-size: 13px; font-weight: 700; }.text-link span { font-size: 19px; }
.resume-section { min-height: 376px; padding: 90px 0; display: flex; align-items: center; justify-content: space-between; }.resume-card { width: min(100%, 500px); padding: 25px; display: flex; align-items: center; gap: 18px; background: #1b2632; border: 1px solid rgba(112,183,255,.3); transition: background .2s ease, border-color .2s ease; }.resume-card:hover { background: #203447; border-color: var(--blue); }.file-icon { display: grid; place-items: center; width: 46px; height: 51px; background: var(--blue); color: #17202a; clip-path: polygon(0 0, 76% 0, 100% 23%, 100% 100%, 0 100%); font: 500 10px var(--mono); }.resume-text { display: flex; flex-direction: column; gap: 5px; }.resume-text strong { font-size: 14px; }.resume-text small { color: var(--muted); font: 10px var(--mono); }.download-arrow { margin-left: auto; color: var(--blue); font-size: 25px; }
footer { min-height: 100px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); color: var(--muted); } footer .brand { color: var(--ink); } footer p { margin: 0; } footer div { display: flex; gap: 20px; } footer a:hover { color: var(--blue); }

/* Case studies */
.case-study { padding-bottom: 32px; }
.case-hero { min-height: 870px; padding: 44px 0 0; border-bottom: 1px solid var(--line); }
.back-link { display: inline-flex; color: var(--muted); font: 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; transition: color .2s ease; }
.back-link:hover { color: var(--blue); }
.case-hero-copy { min-height: 410px; padding: 92px 0 70px; display: flex; align-items: end; justify-content: space-between; gap: 45px; }
.case-hero h1 { max-width: 760px; margin: 0; }
.project-facts { width: 290px; margin: 0 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 28px; }
.project-facts div:last-child { grid-column: span 2; }
.project-facts dt { margin-bottom: 6px; color: var(--blue); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.project-facts dd { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.case-image { position: relative; margin: 0; overflow: hidden; background: #202a35; border: 1px solid var(--line); }
.case-image img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.72) contrast(1.04); transition: transform .5s ease, filter .5s ease; }
.case-image:hover img { transform: scale(1.035); filter: saturate(.95) contrast(1.04); }
.case-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(10, 15, 20, .68)); pointer-events: none; }
.case-image figcaption { position: absolute; z-index: 1; right: 17px; bottom: 15px; color: rgba(232, 237, 243, .82); font: 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.case-image-hero { height: 460px; }
.case-image-hero img { object-position: center; }
.case-section { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 150px 0; border-bottom: 1px solid var(--line); }
.case-section > div { max-width: 700px; }
.case-section h2 { margin-bottom: 30px; }
.case-section p:not(.section-number), .case-feature p:not(.eyebrow) { max-width: 590px; margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.case-media-grid { min-height: 660px; padding: 72px 0; display: grid; grid-template-columns: 1.1fr 1.65fr; grid-template-rows: 300px 210px; gap: 18px; border-bottom: 1px solid var(--line); }
.image-tall { grid-row: span 2; }
.image-wide, .image-small { min-height: 0; }
.image-tall img { object-position: 35% center; }
.image-wide img { object-position: center 42%; }
.image-small img { object-position: center 72%; }
.case-implementation { background: linear-gradient(90deg, rgba(112,183,255,.045), transparent 56%); }
.implementation-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 36px; }
.implementation-list span { padding: 9px 12px; border: 1px solid rgba(112,183,255,.28); color: var(--blue); font: 9px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.case-feature { min-height: 690px; padding: 110px 0; display: grid; grid-template-columns: 1.32fr .9fr; align-items: center; gap: 11%; border-bottom: 1px solid var(--line); }
.case-feature .case-image { height: 470px; }
.case-feature h2 { margin: 0 0 26px; }
.case-outcome { padding-bottom: 175px; }
.case-outcome .text-link { margin-top: 36px; }

@media (max-width: 760px) { .site-header, main, footer { width: min(100% - 36px, 1180px); }.site-header { height: 74px; }.site-header nav, .header-contact { display: none; }.hero { min-height: 590px; padding: 94px 0 40px; }.hero-bottom, .section-heading, .resume-section { align-items: start; flex-direction: column; gap: 32px; }.scroll-cue { align-self: flex-end; }.work-section { padding: 82px 0; }.projects { grid-template-columns: 1fr; gap: 22px; }.project-visual { height: 230px; }.about-section { grid-template-columns: 1fr; gap: 12px; padding: 82px 0; }.resume-section { min-height: 0; padding: 74px 0; }.resume-card { width: 100%; } footer { min-height: 150px; flex-wrap: wrap; gap: 18px; padding: 25px 0; } footer p { order: 3; width: 100%; } }

@media (max-width: 760px) {
  .case-hero { min-height: 0; padding-top: 32px; }
  .case-hero-copy { min-height: 0; padding: 72px 0 52px; flex-direction: column; align-items: start; gap: 46px; }
  .case-image-hero { height: 290px; }
  .project-facts { width: 100%; }
  .case-section { grid-template-columns: 1fr; gap: 12px; padding: 85px 0; }
  .case-section p:not(.section-number), .case-feature p:not(.eyebrow) { font-size: 15px; }
  .case-media-grid { min-height: 0; padding: 48px 0; grid-template-columns: 1fr; grid-template-rows: 330px 210px 170px; }
  .image-tall { grid-row: auto; }
  .case-feature { min-height: 0; padding: 78px 0; grid-template-columns: 1fr; gap: 38px; }
  .case-feature .case-image { height: 310px; }
  .case-outcome { padding-bottom: 105px; }
}