/* Marketing-site case layer over the existing V4 website-case layout. */
:root { --ink: #101727; --ink-soft: #4d596c; --cream: #f3f0e8; --accent: #15374b; --accent-deep: #0d2939; --accent-text: #36566b; --on-accent: #fff; --band: #080e1a; --band-kicker: #f5d78d; --band-soft: #c6d1e2; --band-line: #39475a; --hero-top: #faf8f2; --hero-bottom: #e9e8e3; }
@font-face { font-family: 'Get Light Ops'; src: url('../../case-studies/getlightops-website-preview/assets/fonts/ops.woff2') format('woff2'); font-display: swap; }
.getlightops-live { background: #faf9f5; }
.getlightops-preview-note { font-size: 14px !important; color: var(--caption); }
.getlightops-identity { background: #eeece5; }
.getlightops-identity-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.getlightops-brand-board { margin: 0; min-width: 0; padding: clamp(28px, 4vw, 60px); border-radius: 28px; background: #080e1a; color: #f4efe4; }
.getlightops-brand-lockup { display: flex; align-items: center; gap: 15px; font-family: 'Get Light Ops', sans-serif; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.04em; }
.getlightops-brand-lockup img { flex: none; width: 40px; height: 40px; }
.getlightops-brand-board .getlightops-brand-statement { margin: clamp(64px, 8vw, 110px) 0 40px; font-family: 'Get Light Ops', sans-serif; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.06; letter-spacing: -.04em; color: #f4efe4; }
.getlightops-brand-statement span { color: #5cc8ff; }
.getlightops-palette { display: flex; gap: 10px; padding-top: 24px; border-top: 1px solid #ffffff29; }
.getlightops-palette i { flex: 1; aspect-ratio: 1; max-width: 52px; border-radius: 50%; background: #ffd98a; }
.getlightops-palette i:nth-child(2) { background: #ff5c5c; }
.getlightops-palette i:nth-child(3) { background: #5cc8ff; }
.getlightops-palette i:nth-child(4) { background: #5ee08a; }
.getlightops-palette i:nth-child(5) { background: #b48cff; }
.getlightops-palette i:nth-child(6) { background: #ff7ac8; }
.getlightops-brand-board figcaption { color: #bac6d9; font-size: 13px; line-height: 1.5; margin-top: 20px; }
.getlightops-identity-copy h2 { margin: 0 0 28px; font-size: clamp(38px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.05em; }
.getlightops-identity-copy > p:not(.kicker) { color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
.getlightops-film { background: #080e1a; color: #f4efe4; --ink-soft: #c6d1e2; --caption: #bac6d9; --muted-label: #f5d78d; }
.getlightops-film h2 { color: #f4efe4; }
.getlightops-film .kicker { color: #f5d78d; }
.getlightops-tour-details { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin-top: 64px; }
.getlightops-tour-details h3 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; letter-spacing: -.04em; margin: 0 0 20px; }
.getlightops-tour-details p { color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
.getlightops-tour-details figure { margin: 0; }
.getlightops-tour-details img { width: 100%; height: auto; display: block; border-radius: 16px; }
.getlightops-hero-devices { position: relative; padding-right: 12%; padding-bottom: 40px; }
.getlightops-hero-phone { position: absolute; width: 20%; max-width: 250px; right: 0; bottom: 0; border: 7px solid #101727; border-radius: 32px; overflow: hidden; box-shadow: 0 24px 70px #10172735; background: #080e1a; }
.getlightops-hero-phone img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; }
@media(max-width:900px) { .getlightops-identity-grid, .getlightops-tour-details { grid-template-columns: 1fr; gap: 36px; } }
@media(max-width:760px) { .getlightops-hero-devices { padding-right: 0; padding-bottom: 0; } .getlightops-hero-phone { display: none; } .getlightops-brand-board { border-radius: 20px; } .getlightops-brand-board .getlightops-brand-statement { font-size: clamp(36px, 9vw, 56px); } }
.getlightops-phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 1040px; margin-inline: auto; align-items: stretch; }
.getlightops-phones .phone-example { display: grid; grid-template-rows: auto 1fr; width: 100%; max-width: none; margin: 0; }
.getlightops-phones .phone-frame { background: #0a101b; }
.getlightops-phones img { display: block; width: 100%; height: auto; }
.getlightops-phones figcaption { line-height: 1.6; }
.getlightops-credit p:not(.kicker) { max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
@media(max-width:760px) { .getlightops-phones { grid-template-columns: 1fr; gap: 44px; } .getlightops-phones .phone-example { max-width: 340px; margin-inline: auto; } }