/* MET Dijital signature layer: a dark control-room hero with one electric signal. */
:root {
  --signature-ink: #0d1824;
  --signature-panel: #14283a;
  --signature-paper: #f5f0e6;
  --signature-muted: #667984;
  --signature-accent: #c8f45b;
  --signature-blue: #5c89ff;
  --signature-cyan: #4dd7d2;
  --signature-coral: #ff8068;
}

body { background: var(--signature-paper); color: var(--signature-ink); }
.site-header { width: min(100% - 48px, var(--max)); margin-top: 16px; min-height: 66px; padding: 0 18px; border: 1px solid #2d4a61; border-radius: 12px; background: var(--signature-ink); box-shadow: 8px 8px 0 #dce6d0; }
.site-header .brand { color: #f8fbf4; }
.site-header .brand small { color: #9db0b9; }
.site-header nav { color: #c0d0d5; }
.site-header nav a { color: inherit; }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--signature-accent); }
.site-header .button-dark { color: var(--signature-ink); border-color: var(--signature-accent); background: var(--signature-accent); }
.site-header .button-dark:hover, .site-header .button-dark:focus-visible { color: var(--signature-ink); background: #fff; border-color: #fff; }
.menu-toggle { color: #f8fbf4; border-color: #557086; }
.menu-icon { color: var(--signature-accent); }

.hero { width: min(100% - 48px, var(--max)); margin-top: 34px; padding: 56px 36px 64px; border: 1px solid #2d4a61; border-radius: 16px; background: var(--signature-ink); box-shadow: 14px 14px 0 #dce6d0; }
.hero-copy { border-left-color: var(--signature-accent); }
.hero-copy .kicker, .hero-copy h1, .hero-copy h2 { color: #f8fbf4; }
.hero-copy .kicker span { background: var(--signature-accent); }
.hero-copy h2 { font-size: clamp(28px, 3.4vw, 48px); }
.hero-copy .lead { color: #b5c8cf; max-width: 520px; }
.hero-actions .text-link { color: #d7e7e9; border-color: #456174; }
.hero-actions .text-link:hover, .hero-actions .text-link:focus-visible { color: var(--signature-accent); border-color: var(--signature-accent); }
.trust-line { border-top-color: #2d4a61; color: #9db0b9; }
.trust-line b { color: var(--signature-accent); }
.hero-assistant { border-color: #35566b; background: #f8fbf4; box-shadow: 8px 8px 0 #203c50; }
.assistant-head strong { color: var(--signature-ink); }

.architecture { border-color: #5c89ff !important; background: #e7f0ff !important; box-shadow: 10px 10px 0 #a9c2ff !important; }
.architecture-head { color: #456174; }
.architecture-head strong { color: var(--signature-blue); }
.live-dot { background: var(--signature-accent) !important; box-shadow: 0 0 0 5px rgba(200,244,91,.22) !important; }
.floor-visual span { border-color: rgba(13,24,36,.2); }
.floor-visual span:after { background: var(--signature-blue); }
.floor-1 .floor-visual span:after { background: #22bd8a; }
.floor-3 .floor-visual span:after { background: var(--signature-coral); }
.floor-4 .floor-visual span:after { background: var(--signature-accent); }

.solutions { border-top: 1px solid #d4dedb; }
.solutions .section-heading h2, .proof .section-heading h2, .brief-intro h2 { letter-spacing: -.045em; }
.solution { min-height: 106px; }
.solution strong { font-size: 20px; }
.solution > span { font-weight: 700; }
.solution:hover, .solution.active { transform: translateX(6px); }

.journey { border-top-color: var(--signature-accent); background: var(--signature-ink) !important; }
.journey .section-heading.light h2 { color: #f8fbf4; }
.journey .section-heading.light .kicker { color: #d6e6df; background: #1f3b4c; }
.journey .section-heading.light .kicker span { background: var(--signature-accent); }
.system-spine { border-color: #2d526a; background: var(--signature-panel) !important; box-shadow: 12px 12px 0 #08121c; }
.system-spine-visual { border-color: #3b6d83; }
.system-spine-copy h3 { font-size: clamp(34px, 4.5vw, 62px); }
.system-spine-stages li[data-active="true"] { box-shadow: inset 3px 0 var(--signature-accent); }
.system-spine-stages li:nth-child(2)[data-active="true"] { box-shadow: inset 3px 0 var(--signature-cyan); }
.system-spine-stages li:nth-child(3)[data-active="true"] { box-shadow: inset 3px 0 var(--signature-coral); }
.system-output { border-radius: 10px; }

.proof { border-top: 1px solid #d4dedb; background: #f9f5eb; }
.proof-grid { border-radius: 10px; overflow: hidden; }
.proof-grid article { min-height: 360px; }
.proof-grid article:hover { transform: translateY(-7px) rotate(-.4deg); }
.project-portfolio { border-top-color: var(--signature-accent); }
.project-portfolio-head h3 { letter-spacing: -.045em; }
.project-row { border-color: #ccd9d7; box-shadow: 4px 4px 0 rgba(13,24,36,.08); }
.project-row h4 { font-size: 22px; letter-spacing: -.02em; }
.project-status.is-live { color: var(--signature-blue); }
.brief { border-top: 4px solid var(--signature-coral); }
.brief-form { border-color: #e9b19f; box-shadow: 8px 8px 0 #f5d1c6; }

/* Work index gets the same signature, with offset case-file cards. */
.projects-hero { width: min(100% - 48px, var(--max)); margin-top: 34px; padding: 64px 36px 74px; border: 1px solid #2d4a61; border-radius: 16px; background: var(--signature-ink); box-shadow: 14px 14px 0 #dce6d0; }
.projects-hero-copy { border-left-color: var(--signature-accent); }
.projects-hero-copy .kicker, .projects-hero-copy h1 { color: #f8fbf4; }
.projects-hero-copy .kicker span { background: var(--signature-accent); }
.projects-hero h1 em { color: var(--signature-accent); }
.hero-intro { color: #b5c8cf; }
.hero-meta { border-top-color: #2d4a61; color: #9db0b9; }
.projects-hero-signal { border-color: #e9b19f; box-shadow: 10px 10px 0 #f5d1c6; }
.project-list { padding-top: 112px; }
.project-card { border-top-width: 5px; }
.project-card-main h3 { letter-spacing: -.055em; }
.project-card-visual { box-shadow: inset 0 0 0 3px rgba(255,255,255,.28); }
.project-principles { border-top-color: var(--signature-accent); background: var(--signature-ink); }
.project-principles h2 { color: #f8fbf4; }
.projects-cta { width: min(100% - 48px, var(--max)); margin-bottom: 32px; padding: 76px 36px 84px; border: 1px solid #2d4a61; border-radius: 16px; background: var(--signature-panel); color: #f8fbf4; }
.projects-cta h2 { letter-spacing: -.05em; }
.projects-cta h2 em { color: var(--signature-accent); }

.reference-card, .catalog-card { box-shadow: 7px 8px 0 rgba(13,24,36,.1); }
.reference-card-top, .catalog-top { letter-spacing: .1em; }
.reference-card h3, .catalog-brand strong { letter-spacing: -.045em; }
.reference-card h3 em { color: var(--signature-blue); }

@media (max-width: 980px) {
  .site-header, .hero, .projects-hero, .projects-cta { width: min(100% - 32px, var(--max)); }
  .hero, .projects-hero { padding-inline: 24px; }
  .site-header { margin-top: 10px; }
}

@media (max-width: 640px) {
  .site-header, .hero, .projects-hero, .projects-cta { width: min(100% - 24px, var(--max)); }
  .site-header { padding-inline: 12px; box-shadow: 4px 4px 0 #dce6d0; }
  .hero, .projects-hero { margin-top: 20px; padding: 36px 18px 44px; border-radius: 12px; box-shadow: 6px 6px 0 #dce6d0; }
  .projects-cta { padding: 52px 18px 58px; box-shadow: 6px 6px 0 #dce6d0; }
  .solution:hover, .solution.active { transform: none; }
}