:root {
  --night: #141715;
  --night-raised: #1d2420;
  --night-soft: #202720;
  --chalk: #f1f0e9;
  --quiet: #b6bcb3;
  --night-line: #404840;
  color-scheme: dark;
}
body { background: var(--night); color: var(--chalk); }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible, .dark :focus-visible, .site-footer :focus-visible { outline-color: var(--orange); }
.skip-link { background: var(--orange); color: var(--ink); }
.site-header { background: #141715f2; border-color: var(--night-line); backdrop-filter: blur(14px); }
.site-header .brand img { content: url('assets/mark-reverse.svg'); }
.brand-type, .brand-type > span { text-transform: capitalize; }
.nav-local, .hero-edition { color: var(--quiet); }
.site-nav > a:not(.button), .small-nav a { color: var(--chalk); }
.menu-toggle { width: 44px; min-height: 44px; padding: 10px; border: 0; }
.menu-bars { width: 24px; gap: 7px; }
.menu-bars i { width: 100%; height: 2px; border-radius: 1px; }
.menu-bars i:last-child { width: 65%; transition: transform .2s, width .2s; }
.menu-toggle[aria-expanded=true] .menu-bars i:first-child { transform: translateY(4.5px) rotate(45deg); }
.menu-toggle[aria-expanded=true] .menu-bars i:last-child { width: 100%; transform: translateY(-4.5px) rotate(-45deg); }
.button { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.button:hover { background: #ff8055; border-color: #ff8055; }
.button { font-weight: 800; }
.contact-symbol { display: inline-block; width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; }
.symbol-email { -webkit-mask-image: url('assets/contact-email.svg'); mask-image: url('assets/contact-email.svg'); }
.symbol-message { -webkit-mask-image: url('assets/contact-message.svg'); mask-image: url('assets/contact-message.svg'); }
.symbol-call { -webkit-mask-image: url('assets/contact-call.svg'); mask-image: url('assets/contact-call.svg'); }
.site-nav .button .contact-symbol { width: 20px; height: 20px; }
.small-nav a:has(.contact-symbol) { display: inline-flex; align-items: center; gap: 8px; }
.button.outline { color: var(--chalk); border-color: #adb6a6; }
.button.outline:hover { background: #ffffff1a; }
.hero { background: var(--night); padding-bottom: 86px; }
.hero h1 { font-size: clamp(62px, 6.9vw, 103px); font-weight: 800; }
.hero h1 em { color: var(--orange); }
.hero-copy > p { color: var(--quiet); }
.preview-stage { aspect-ratio: auto; padding: 12px 12px 55px; }
.stage-corner { left: 17px; bottom: 10px; gap: 10px; font: 800 16px/1.3 Manrope,Arial,sans-serif; }
.stage-corner b { font-size: 23px; line-height: 1; }
.phone-frame { right: 18px; bottom: 58px; }
.preview-stage { color: var(--ink); }
.dark { background: #1a201c; }
.section-heading h2, .approach-intro h2, .studio h2, .questions h2, .contact h2 { font-weight: 800; }
.section-heading h2 { font-size: clamp(45px,5vw,74px); }
.section-heading > p { color: var(--quiet); font-size: 17px; }
.study-meta, .work-disclosure { border-color: var(--night-line); }
.work-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.work-grid .study:nth-child(2) { margin-top: 0; }
.study-meta { align-items: center; padding-block: 18px; }
.study-meta h3 { font-size: clamp(26px,2.8vw,38px); font-weight: 750; margin: 0; }
.study-number { color: var(--orange); font: 750 14px Manrope,Arial,sans-serif; white-space: nowrap; }
.work-disclosure { display: block; max-width: none; margin-top: 42px; font-size: 13px; color: var(--quiet); }
#approach { background: var(--night); }
.approach-intro h2 { font-size: clamp(46px,5vw,73px); }
.approach-intro > p { font-size: 17px; max-width: 470px; }
.approach-intro > .approach-focus { max-width: none; border-top: 1px solid var(--night-line); padding-top: 28px; margin-top: 45px; color: var(--chalk); font-size: clamp(30px,3.1vw,48px); font-weight: 800; line-height: 1.22; letter-spacing: -.055em; }
.approach-focus em { color: var(--orange); font-style: normal; }
.process-list h3 { font-size: clamp(26px,2.8vw,36px); font-weight: 750; }
.process-list p { font-size: 16px; }
.approach-intro .eyebrow, .studio .eyebrow, .questions .eyebrow { color: var(--orange); }
.approach-intro > p, .process-list p, .scope-note p { color: var(--quiet); }
.deliverables, .deliverables li, .process-list li { border-color: var(--night-line); }
.deliverables li span { color: var(--quiet); }
.process-list li::before { color: var(--orange); }
.scope-note { background: var(--night-raised); }
.studio { background: #1a201c; padding-top: 86px; }
.studio-grid { border-color: var(--night-line); padding-top: 58px; }
.studio-copy > p, .signature span { color: var(--quiet); }
.signature .location-mark { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border: 1px solid var(--night-line); }
.signature .location-mark img { display: block; width: 36px; height: 36px; }
.studio-board { align-self: stretch; display: flex; flex-direction: column; min-height: 415px; padding: 26px 30px 20px; background: #e8e7dc; color: #1c2820; }
.board-top, .board-bottom { display: flex; justify-content: space-between; gap: 14px; font: 650 10px/1.5 ui-monospace,monospace; letter-spacing: .09em; }
.board-top { border-bottom: 1px solid #98a397; padding-bottom: 16px; }
.board-question { font-size: clamp(28px,3vw,43px); font-weight: 700; letter-spacing: -.06em; line-height: 1.14; margin: 32px 0 27px; max-width: 13ch; }
.board-question em { color: #ad3b19; font-style: normal; }
.board-rule { display: flex; align-items: baseline; gap: 20px; padding: 11px 0; border-top: 1px solid #a8b3a7; }
.board-rule span { font: 700 10px ui-monospace,monospace; color: #a23c1d; }
.board-rule p { font-size: 13px; font-weight: 600; }
.board-bottom { margin-top: auto; border-top: 1px solid #98a397; padding-top: 15px; }
.board-bottom span { font-size: 17px; line-height: 1; }
.questions { background: var(--night); border-color: var(--night-line); }
.faq details, .faq details:first-child { border-color: var(--night-line); }
.faq details p { color: var(--quiet); }
.faq summary::after { color: var(--orange); }
.questions h2 { font-size: clamp(40px,4vw,54px); }
.contact { color: var(--ink); }
.contact h2 { font-size: clamp(50px,5.5vw,80px); }
.contact .button { background: var(--ink); border-color: var(--ink); color: #fff; }
.contact .button:hover { background: #303831; }
.contact .button.outline { color: var(--ink); background: transparent; }
.contact .button.outline:hover { background: #ffffff30; }
.contact-primary { display: flex; width: 100%; justify-content: space-between; min-height: 66px; margin-top: 27px; padding-inline: 24px; font-size: 19px; }
.contact-primary .contact-symbol { width: 27px; height: 27px; }
.contact-email-address { display: block; width: fit-content; margin-top: 12px; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.contact-alternatives { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 26px; padding-top: 19px; border-top: 1px solid #191a1855; font-size: 14px; font-weight: 700; }
.contact-alternatives span { width: 100%; font-weight: 550; }
.contact-alternatives a { display: inline-flex; align-items: center; gap: 8px; }
.contact-alternatives a .contact-symbol { width: 21px; height: 21px; }
.contact-alternatives a:hover, .contact-email-address:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer { background: #101411; border-top: 1px solid var(--night-line); }
.footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; border-top: 1px solid var(--night-line); padding-top: 22px; margin-top: 36px; font-size: 13px; }
.footer-contact > a:first-child { color: var(--chalk); font-weight: 750; }
.footer-contact > a:nth-child(2) { color: var(--quiet); }
.footer-contact nav { margin-left: auto; display: flex; gap: 25px; font-weight: 750; }
.footer-contact a:hover { color: var(--orange); }
.footer-bottom { border-color: var(--night-line); }
.preview-dialog { background: #202821; border-color: #606a5e; color: var(--chalk); }
.dialog-toolbar, .dialog-foot { background: var(--night); border-color: var(--night-line); }
.dialog-foot { max-width: none; width: 100%; }
.dialog-title span, .dialog-foot { color: var(--quiet); }
.viewport-switch, .close-dialog { border-color: var(--night-line); }
.viewport-switch button[aria-pressed=true] { background: var(--orange); color: var(--ink); }
.demo-viewport:not(.mobile) { min-width: 960px; }
.demo-viewport.mobile { min-width: 0; }
.demo-nav-label { font: 650 10px ui-monospace,monospace; letter-spacing: .09em; opacity: .7; }
.legal-hero { background: var(--night); }
.legal-facts { background: var(--orange); }
.legal-layout { background: var(--night); }
.legal-toc { background: var(--night-raised); }
.legal-toc::before, .legal-copy h2::before { color: var(--orange); }
.legal-toc a { border-color: var(--night-line); }
.legal-toc a::after, .legal-toc a:hover { color: var(--orange); }
.legal-copy h2, .legal-copy > p:last-child { border-color: var(--night-line); }
.legal-copy p, .legal-copy li { color: #c3c9c0; }
.legal-copy a { color: var(--chalk); }
.legal-copy a:hover { color: var(--orange); text-decoration-color: var(--orange); }
.error-main { background: var(--night); min-height: calc(100dvh - 90px); display: grid; place-items: center; }
.error-simple { text-align: center; padding-block: 65px 95px; }
.error-simple .error-number { display: block; font-weight: 800; line-height: .85; margin: 0 0 28px -.08em; }
.error-simple h1 { font-size: clamp(44px,5.5vw,78px); font-weight: 800; }
.error-simple .button { margin-top: 37px; min-height: 62px; font-size: 17px; }
.error-main + .site-footer { border-color: var(--night-line); }
@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(58px,7vw,83px); }
}
@media (max-width: 820px) {
  .hero h1 { font-size: clamp(51px,7vw,65px); }
  .preview-stage { padding: 10px 10px 49px; }
  .phone-frame { bottom: 54px; right: 12px; }
  .stage-corner { left: 13px; bottom: 9px; font-size: 13px; }
}
@media (max-width: 640px) {
  .js .site-nav { background: var(--night-raised); border-color: var(--night-line); box-shadow: 0 14px 22px #0008; }
  .js .site-nav > a:not(.button) { border-color: var(--night-line); }
  .studio { padding-top: 0; }
  .hero { padding-bottom: 57px; }
  .hero h1 { font-size: clamp(50px,13.2vw,67px); }
  .preview-stage { aspect-ratio: auto; padding: 9px 9px 45px; }
  .stage-corner { left: 12px; bottom: 8px; font-size: 13px; }
  .stage-corner b { font-size: 19px; }
  .phone-frame { right: 12px; bottom: 50px; width: 25%; }
  .section-heading h2 { font-size: 47px; }
  .section-heading > p { font-size: 15px; }
  .study-meta h3 { font-size: 26px; }
  .work-grid { grid-template-columns: 1fr; }
  .study-number { font-size: 12px; }
  .approach-intro h2 { font-size: 48px; }
  .approach-intro > .approach-focus { font-size: 36px; margin-top: 30px; }
  .process-list h3 { font-size: 26px; }
  .contact h2 { font-size: clamp(46px,11vw,61px); }
  .contact-primary { font-size: 18px; }
  .footer-contact { gap: 10px 20px; }
  .footer-contact nav { margin-left: 0; width: 100%; }
  .error-main { min-height: calc(100dvh - 73px); }
  .error-simple { padding-block: 50px; }
  .error-simple .error-number { font-size: clamp(142px,38vw,190px); }
  .error-simple h1 { font-size: 47px; }
  .studio-board { min-height: 400px; }
  .legal-toc a, .legal-toc a:last-child { border-color: var(--night-line); }
  .dialog-toolbar { gap: 8px; }
  .dialog-foot { line-height: 1.4; }
}
@media print {
  body, .dark, .contact, .studio, .questions, .legal-layout, .error-main { background: white; color: black; }
  .legal-copy p, .legal-copy li { color: black; }
}