:root {
  color-scheme: dark;
  --ink: #10171c;
  --white: #f5f6f4;
  --muted: #aeb6bb;
  --line: rgba(207, 221, 227, .19);
  --acid: #d7ff49;
  --gutter: clamp(1.4rem, 5.8vw, 6.4rem);
  --sans: "DM Sans", Arial, sans-serif;
  --serif: "Playfair Display", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--ink); color: var(--white); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.section-shell { padding-inline: var(--gutter); }
.site-header { min-height: 5.2rem; margin-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.brand { display: inline-flex; flex-direction: column; width: max-content; gap: .26rem; }
.brand-name { font-size: .94rem; font-weight: 500; letter-spacing: .28em; }
.brand-tag { color: var(--muted); font-size: .48rem; letter-spacing: .42em; }
.primary-nav { display: flex; align-items: center; gap: clamp(1.4rem, 3.5vw, 3.6rem); font-size: .76rem; }
.primary-nav > a:not(.nav-cta), .site-footer nav a { color: #dce1e2; transition: color .2s ease; }
.primary-nav > a:not(.nav-cta):hover, .site-footer nav a:hover { color: var(--acid); }
.nav-cta { display: inline-flex; align-items: center; gap: 1.05rem; padding: .78rem 1.35rem; border-radius: 99px; color: var(--ink); background: var(--acid); font-size: .72rem; font-weight: 600; transition: transform .2s ease, box-shadow .2s ease; }
.nav-cta:hover, .button-primary:hover { transform: translateY(-2px); box-shadow: 0 9px 30px rgba(215, 255, 73, .2); }
.menu-toggle { display: none; }

.hero { min-height: min(47vw, 41rem); min-height: clamp(34rem, 49vw, 43rem); position: relative; display: flex; align-items: center; overflow: hidden; }
.hero-art { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--ink) 0%, rgba(16,23,28,.92) 27%, rgba(16,23,28,.16) 65%, transparent 100%), url("assets/blue-glass-prism.png"); background-size: cover; background-position: center 55%; }
.hero-content { position: relative; z-index: 1; max-width: 46rem; padding-block: 3rem 4.5rem; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .service-row h3, .step h3 { font-family: var(--serif); font-weight: 400; }
h1 { max-width: 48rem; margin-bottom: 1.35rem; font-size: clamp(3.3rem, 6vw, 5.7rem); line-height: 1.02; letter-spacing: -.045em; }
.hero-content > p { max-width: 30rem; margin-bottom: 1.7rem; color: #d0d7da; font-size: clamp(.98rem, 1.28vw, 1.13rem); line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.2rem; min-height: 3.1rem; padding: .8rem 1.35rem; border-radius: 99px; font-size: .76rem; font-weight: 600; transition: transform .2s ease, box-shadow .2s ease; }
.button-primary { color: var(--ink); background: var(--acid); }
.button-primary span { font-size: 1.1rem; line-height: .8; }
.text-link { color: #e1e5e5; padding-bottom: .4rem; border-bottom: 1px solid rgba(225,229,229,.55); font-size: .76rem; }
.text-link span { padding-left: .45rem; }
.scroll-cue { position: absolute; bottom: 1.9rem; left: var(--gutter); width: 1.5rem; height: 2rem; display: grid; place-items: start center; }
.scroll-cue span { display: block; width: 1px; height: 1.4rem; background: var(--acid); animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0%,100% { transform: scaleY(.5); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

.services { padding-top: 5.5rem; }
.section-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .65fr); align-items: end; gap: 4rem; margin-bottom: 2.2rem; }
.section-label { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; color: #d5dcde; text-transform: uppercase; letter-spacing: .09em; font-size: .61rem; }
.section-label span { width: 1.2rem; height: 1px; background: var(--acid); }
h2 { margin-bottom: 0; font-size: clamp(2.4rem, 4.15vw, 4rem); line-height: 1.12; letter-spacing: -.035em; }
.section-summary { max-width: 20rem; justify-self: end; margin: 0 0 .3rem; color: var(--muted); font-size: .83rem; line-height: 1.8; }
.service-list { border-top: 1px solid var(--line); }
.service-row { min-height: 5.8rem; display: grid; grid-template-columns: 3.5rem minmax(15rem, 1.05fr) minmax(16rem, .95fr) 1.3rem; gap: 1rem; align-items: center; border-bottom: 1px solid var(--line); transition: background .2s ease; }
.service-row:hover { background: rgba(255,255,255,.025); }
.service-number, .step-top span { color: var(--acid); font-size: .75rem; font-variant-numeric: tabular-nums; }
.service-row h3 { margin: 0; font-size: clamp(1.35rem, 2.1vw, 1.9rem); letter-spacing: -.025em; }
.service-row p { max-width: 22rem; margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.65; }
.row-arrow { justify-self: end; font-size: 1.1rem; transition: color .2s ease, transform .2s ease; }
.service-row:hover .row-arrow { color: var(--acid); transform: translate(2px,-2px); }

.process { padding-top: 5.7rem; padding-bottom: 5.5rem; }
.process .section-intro { margin-bottom: 2.8rem; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 5.5vw, 5rem); }
.step-top { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.15rem; }
.step-top i { display: block; height: 1px; flex: 1; background: var(--line); }
.step h3 { margin-bottom: .65rem; font-size: 1.55rem; }
.step p { max-width: 17.5rem; margin: 0; color: var(--muted); font-size: .77rem; line-height: 1.75; }

.contact { min-height: 24rem; display: flex; align-items: center; position: relative; overflow: hidden; }
.contact-art { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--ink) 0%, rgba(16,23,28,.96) 30%, rgba(16,23,28,.35) 62%, rgba(16,23,28,.05) 100%), url("assets/blue-glass-prism.png"); background-size: cover; background-position: center 75%; transform: scaleX(-1); }
.contact-copy { position: relative; z-index: 1; max-width: 34rem; padding-block: 3.5rem; }
.contact-copy h2 { margin-bottom: 1rem; }
.contact-copy > p:not(.section-label) { max-width: 22rem; margin-bottom: 1.3rem; color: #c5cdd0; font-size: .83rem; line-height: 1.75; }
.site-footer { margin-inline: var(--gutter); min-height: 10rem; padding-inline: 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.1fr 1.2fr 1.6fr auto; align-items: center; column-gap: 2rem; row-gap: .3rem; }
.site-footer > p { margin: 0; color: #c3cbce; font-size: .73rem; line-height: 1.7; }
.site-footer nav { display: flex; gap: clamp(1rem, 2.8vw, 2.8rem); font-size: .7rem; }
.footer-domain { color: var(--acid); font-size: .72rem; }
.footer-domain span { padding-left: .35rem; }
.copyright { grid-column: 1 / -1; align-self: start; color: #778287; font-size: .62rem; }

@media (min-width: 1200px) { .hero { min-height: 43rem; } }
@media (max-width: 760px) {
  :root { --gutter: 1.4rem; }
  .site-header { min-height: 4.65rem; }
  .menu-toggle { display: flex; width: 2.7rem; height: 2.7rem; border: 1px solid var(--line); border-radius: 50%; background: transparent; flex-direction: column; justify-content: center; align-items: center; gap: .32rem; cursor: pointer; }
  .menu-toggle span { width: 1rem; height: 1px; background: var(--white); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(2px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2px) rotate(-45deg); }
  .primary-nav { display: none; position: absolute; top: calc(100% + 1px); left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); padding: 1.5rem var(--gutter) 1.7rem; background: #121b20; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 1.25rem; }
  .primary-nav.is-open { display: flex; }
  .primary-nav .nav-cta { align-self: flex-start; margin-top: .2rem; }
  .hero { min-height: 40rem; align-items: flex-end; padding-bottom: 4rem; }
  .hero-art { background-image: linear-gradient(0deg, var(--ink) 4%, rgba(16,23,28,.86) 37%, rgba(16,23,28,.05) 80%), url("assets/blue-glass-prism.png"); background-position: 61% top; background-size: auto 75%, auto 75%; background-repeat: no-repeat; }
  .hero-content { padding-block: 2rem 0; }
  h1 { font-size: clamp(3.05rem, 11vw, 4.25rem); }
  .hero-content > p { max-width: 25rem; font-size: .96rem; }
  .scroll-cue { display: none; }
  .services { padding-top: 4rem; }
  .section-intro { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.7rem; }
  .section-summary { justify-self: start; max-width: 28rem; }
  h2 { font-size: clamp(2.35rem, 9vw, 3.2rem); }
  .service-row { grid-template-columns: 2rem 1fr 1rem; gap: .65rem; padding-block: 1.1rem; }
  .service-row h3 { font-size: 1.35rem; }
  .service-row p { grid-column: 2 / 3; grid-row: 2; font-size: .74rem; }
  .row-arrow { grid-column: 3; grid-row: 1; }
  .service-number { grid-row: 1 / span 2; align-self: start; padding-top: .24rem; }
  .process { padding-top: 4.2rem; padding-bottom: 4rem; }
  .process .section-intro { margin-bottom: 2rem; }
  .steps { grid-template-columns: 1fr; gap: 1.7rem; }
  .step-top { margin-bottom: .8rem; }
  .step h3 { font-size: 1.4rem; }
  .step p { max-width: 27rem; }
  .contact { min-height: 31rem; align-items: flex-end; }
  .contact-art { background-image: linear-gradient(0deg, var(--ink) 0%, rgba(16,23,28,.88) 38%, rgba(16,23,28,.05) 100%), url("assets/blue-glass-prism.png"); background-position: 54% top; background-size: auto 75%, auto 75%; background-repeat: no-repeat; transform: none; }
  .contact-copy { padding-block: 3rem 3.5rem; }
  .site-footer { margin-inline: var(--gutter); padding-block: 1.8rem; grid-template-columns: 1fr auto; gap: 1.25rem; }
  .site-footer > p { justify-self: end; }
  .site-footer nav { grid-column: 1 / -1; grid-row: 2; padding-block: .35rem; }
  .footer-domain { grid-column: 1 / -1; grid-row: 3; }
  .copyright { grid-column: 1 / -1; grid-row: 4; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }