@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --ink: #13171c;
  --muted: #5f6872;
  --paper: #f5f7fa;
  --line: #d7dde3;
  --red: #f04432;
  --blue: #1648d8;
  --black: #11161b;
  font-family: Manrope, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #1648d8; outline-offset: 4px; }

.skip-link { position: absolute; top: -60px; left: 16px; z-index: 20; padding: 12px 16px; background: white; }
.skip-link:focus { top: 12px; }
.preview-banner { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 36px; padding: 7px 18px; background: #fff0cb; color: #5d4200; font: 11px/1.4 "DM Mono", monospace; text-align: center; }
.preview-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5a700; }
.site-header { min-height: 78px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 0 6.2%; border-bottom: 1px solid var(--line); background: var(--paper); }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 16px; font-weight: 800; letter-spacing: 1.2px; }
.wordmark-mark { display: block; width: 42px; height: 42px; object-fit: contain; flex: none; }
.wordmark-legal { align-self: flex-start; margin: 1px 0 0 -6px; color: var(--muted); font: 9px/1.5 "DM Mono", monospace; letter-spacing: .3px; }
.main-nav { display: flex; align-items: center; gap: 34px; font-size: 12px; font-weight: 600; }
.main-nav a { text-decoration: none; transition: color .2s ease; }
.main-nav a:hover { color: var(--blue); }
.main-nav .nav-cta { border-bottom: 1px solid var(--ink); padding: 9px 0; }
.nav-cta > span[aria-hidden="true"] { margin-left: 8px; color: var(--red); }
.language-switch { display: inline-flex; align-items: center; gap: 6px; color: #7b858e; font: 10px/1.4 "DM Mono", monospace; }
.language-switch button { padding: 5px 3px; border: 0; background: transparent; color: #69737d; font: inherit; cursor: pointer; }
.language-switch button[aria-pressed="true"] { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.hero { position: relative; min-height: 604px; display: flex; align-items: center; overflow: hidden; padding: 50px 12.2% 74px; background: #eceff2 url("assets/studio-process.png") center 53% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(245,247,250,.2); }
.hero-content { position: relative; z-index: 1; max-width: 570px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 27px; color: #39434d; font: 10px/1.5 "DM Mono", monospace; letter-spacing: 1.1px; text-transform: uppercase; }
.eyebrow-line { width: 24px; height: 2px; background: var(--red); }
.hero h1 { max-width: 650px; margin: 0; font-size: 66px; line-height: 1.05; letter-spacing: 0; font-weight: 700; }
.hero h1 span { color: var(--blue); }
.hero-copy { max-width: 420px; margin: 26px 0 29px; color: #424c56; font-size: 15px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 24px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 18px; border: 0; border-radius: 3px; text-decoration: none; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: var(--blue); }
.button-dark > span[aria-hidden="true"] { color: #ff6d55; font-size: 16px; }
.text-link { display: inline-flex; gap: 9px; color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 700; }
.text-link span { color: var(--blue); }
.hero-caption { position: absolute; z-index: 1; right: 6.2%; bottom: 22px; left: 6.2%; display: flex; justify-content: space-between; color: #535d66; font: 9px/1.5 "DM Mono", monospace; letter-spacing: .5px; text-transform: uppercase; }

.section-pad { padding-right: 12.2%; padding-left: 12.2%; }
.intro { padding-top: 98px; padding-bottom: 104px; background: white; }
.section-kicker { display: flex; align-items: center; gap: 12px; color: #56616b; font: 10px/1.5 "DM Mono", monospace; letter-spacing: .7px; text-transform: uppercase; }
.section-kicker span:first-child { color: var(--red); }
.intro-main { display: grid; grid-template-columns: 1.15fr .65fr; gap: 9%; margin: 32px 0 74px; }
.intro h2, .portfolio h2, .company h2, .contact h2 { margin: 0; font-size: 43px; line-height: 1.19; letter-spacing: 0; font-weight: 600; }
.intro h2 em { color: var(--blue); font-style: normal; }
.intro-aside { padding-top: 4px; }
.intro-aside p, .company-copy > p { margin: 0; font-size: 13px; line-height: 1.9; color: #424c55; }
.intro-aside .muted-note { margin-top: 17px; color: #78818b; font-size: 11px; line-height: 1.7; }
.service-lines { border-top: 1px solid var(--line); }
.service-line { min-height: 84px; display: grid; grid-template-columns: 48px 1fr 1.1fr 20px; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); }
.service-index { color: var(--red); font: 11px/1.4 "DM Mono", monospace; }
.service-line h3 { margin: 0; font-size: 14px; font-weight: 700; }
.service-line p { max-width: 350px; margin: 0; color: #66717b; font-size: 11px; line-height: 1.6; }
.service-arrow { color: var(--blue); font-size: 16px; }

.portfolio { background: #e7edf4; }
.portfolio-head { padding-top: 96px; padding-bottom: 76px; }
.portfolio-title-row { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin: 31px 0 48px; }
.portfolio h2 { font-size: 47px; }
.accent-dot { color: var(--red); }
.portfolio-title-row > p { width: 280px; margin: 0 0 4px; color: #626d78; font-size: 11px; line-height: 1.7; }
.project-list { border-top: 1px solid #bbc5ce; }
.project-row { min-height: 94px; display: grid; grid-template-columns: 48px minmax(0, 1fr) 190px 22px; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid #bbc5ce; }
.project-number { color: #7a8791; font: 10px/1.5 "DM Mono", monospace; }
.project-copy { min-width: 0; }
.project-row h3 { margin: 0; font-size: 15px; font-weight: 600; }
.project-copy p { max-width: 660px; margin: 7px 0 0; color: #5e6974; font-size: 11px; line-height: 1.65; }
.project-kind { color: #687581; font: 10px/1.5 "DM Mono", monospace; }
.project-arrow { color: var(--blue); font-size: 17px; }
.portfolio-foot { min-height: 58px; display: flex; justify-content: space-between; align-items: center; padding: 0 6.2%; background: #d8e1ea; color: #59636d; font: 9px/1.5 "DM Mono", monospace; letter-spacing: .3px; text-transform: uppercase; }

.company { padding-top: 101px; padding-bottom: 108px; background: var(--paper); }
.company-grid { display: grid; grid-template-columns: .95fr 1fr; gap: 9%; margin-top: 34px; }
.dark-eyebrow { margin-bottom: 22px; }
.company h2 { font-size: 42px; }
.company h2 span { color: var(--blue); }
.company-copy > p { margin-bottom: 28px; }
.company-facts { margin: 0; border-top: 1px solid var(--line); }
.company-facts > div { display: grid; grid-template-columns: 39% 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.company-facts dt { color: #68727c; font: 10px/1.6 "DM Mono", monospace; }
.company-facts dd { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.6; font-weight: 600; }
.company-facts dd a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.company-facts dd a:hover { color: var(--blue); }
.needs-confirmation { color: #9a5600 !important; }

.contact { color: white; background: #151a1f; }
.contact-inner { padding-top: 88px; padding-bottom: 95px; }
.light-kicker, .light-eyebrow { color: #bbc3cb; }
.contact-grid { display: grid; grid-template-columns: .95fr 1fr; gap: 9%; margin-top: 32px; }
.contact h2 { font-size: 42px; }
.contact h2 span { color: #ff715b; }
.contact-intro .contact-copy { max-width: 360px; margin: 23px 0 0; color: #b7c0c8; font-size: 12px; line-height: 1.8; }
.contact-email { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; color: white; font-size: 17px; font-weight: 700; text-decoration-color: #ff715b; text-underline-offset: 5px; }
.contact-email:hover { color: #ff9a89; }
.contact-email span { color: #ff715b; }
.contact-intro .email-note { max-width: 360px; margin: 8px 0 0; color: #87929b; font-size: 10px; line-height: 1.6; }
.inquiry-form { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.inquiry-form label { display: grid; gap: 8px; color: #e1e6ea; font-size: 10px; font-weight: 600; }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea { width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid #4e5962; border-radius: 2px; background: #1d242a; color: white; font-size: 11px; }
.inquiry-form input::placeholder, .inquiry-form textarea::placeholder { color: #89949d; }
.inquiry-form select { color: #c8d0d7; }
.inquiry-form textarea { min-height: 112px; resize: vertical; }
.form-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; }
.button-bright { background: #f04432; color: white; }
.button-bright:hover { background: #d83122; }
.button-bright > span[aria-hidden="true"] { font-size: 16px; }
.form-privacy { color: #aeb7bf; font-size: 9px; line-height: 1.6; }
.form-result { padding: 16px; border-left: 2px solid #ff715b; background: #20282f; }
.form-result p { margin: 0; color: #bdc6cd; font-size: 10px; line-height: 1.7; }
.form-result .result-title { margin-bottom: 5px; color: white; font-size: 12px; font-weight: 700; }
.email-draft-link { margin-top: 12px; }
.copy-button { margin-top: 14px; padding: 0; border: 0; background: none; color: #ff8a77; font-size: 10px; font-weight: 700; cursor: pointer; }
.copy-button > span[aria-hidden="true"] { margin-left: 8px; }

.site-footer { min-height: 88px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 20px; padding: 17px 6.2%; background: #0c1014; color: #c2cbd3; }
.footer-wordmark { color: white; font-size: 13px; }
.footer-wordmark .wordmark-mark { width: 34px; height: 34px; }
.footer-wordmark .wordmark-legal { color: #a0aab2; }
.site-footer > p { margin: 0; color: #98a2ab; font-size: 10px; }
.footer-right { display: flex; justify-content: end; gap: 22px; color: #98a2ab; font: 9px/1.6 "DM Mono", monospace; }
.footer-right a { color: white; text-decoration: none; }
.publish-checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 12px 16px; background: #fff0cb; color: #624700; font: 9px/1.6 "DM Mono", monospace; }
.publish-checklist strong { color: #392900; }

@media (max-width: 850px) {
  .site-header { padding: 0 5%; }
  .main-nav { gap: 17px; }
  .language-switch { flex: 0 0 auto; }
  .section-pad { padding-right: 7%; padding-left: 7%; }
  .hero { min-height: 560px; padding-right: 8%; padding-left: 8%; }
  .hero::before { background: rgba(245,247,250,.42); }
  .intro-main, .company-grid, .contact-grid { gap: 5%; }
  .intro h2, .portfolio h2 { font-size: 38px; }
}

@media (max-width: 620px) {
  .preview-banner { font-size: 9px; }
  .site-header { min-height: 72px; height: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 16px 6%; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; width: 100%; overflow-x: auto; gap: 22px; padding-bottom: 3px; white-space: nowrap; font-size: 10px; }
  .main-nav .nav-cta { margin-left: auto; }
  .language-switch { grid-column: 2; grid-row: 1; }
  .section-pad { padding-right: 6%; padding-left: 6%; }
  .hero { min-height: 596px; align-items: flex-start; padding: 74px 7% 74px; background-position: 62% center; }
  .hero::before { background: rgba(245,247,250,.78); }
  .hero h1 { font-size: 48px; }
  .hero-copy { max-width: 360px; font-size: 13px; }
  .hero-caption { right: 7%; left: 7%; font-size: 8px; }
  .intro, .portfolio-head, .company, .contact-inner { padding-top: 68px; padding-bottom: 72px; }
  .intro-main, .company-grid, .contact-grid { grid-template-columns: 1fr; gap: 25px; margin-top: 25px; }
  .intro-main { margin-bottom: 46px; }
  .intro h2, .portfolio h2, .company h2, .contact h2 { font-size: 34px; }
  .intro-aside p, .company-copy > p { font-size: 12px; }
  .service-line { grid-template-columns: 24px 1fr 18px; min-height: 88px; gap: 8px; padding: 10px 0; }
  .service-line h3 { font-size: 12px; }
  .service-line p { grid-column: 2; grid-row: 2; font-size: 10px; }
  .service-arrow { grid-column: 3; grid-row: 1; }
  .portfolio-title-row { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 32px; }
  .portfolio-title-row > p { width: auto; }
  .project-row { grid-template-columns: 30px minmax(0, 1fr) 17px; gap: 8px; min-height: 82px; padding: 13px 0; }
  .project-row h3 { font-size: 12px; }
  .project-copy p { margin-top: 5px; font-size: 10px; }
  .project-kind { display: none; }
  .portfolio-foot { min-height: 52px; padding: 0 6%; font-size: 7px; }
  .company-facts > div { grid-template-columns: 40% 1fr; gap: 8px; }
  .company-facts dt { font-size: 9px; }
  .company-facts dd { font-size: 10px; }
  .contact-grid { margin-top: 26px; }
  .contact-email { font-size: 15px; }
  .form-row { grid-template-columns: 1fr; }
  .form-submit-row { align-items: flex-start; flex-direction: column; }
  .site-footer { grid-template-columns: 1fr; gap: 9px; padding: 22px 6%; }
  .footer-right { justify-content: space-between; }
  .publish-checklist { justify-content: flex-start; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}