:root {
  color-scheme: dark;
  --ink: #f0f5f4;
  --text: #c5d1d2;
  --muted: #91a5a9;
  --paper: #080d0f;
  --line: #26363a;
  --mk-navy: #d9e9e9;
  --mk-navy-soft: #80bbc3;
  --mk-orange: #e6b15d;
  --mk-orange-soft: #32291c;
  --mk-red: #cc7661;
  --mk-sky: #122024;
  --stone: #0c1417;
  --shadow: 0 24px 60px #0005;
}

body { background: #080d0f; }
::selection { background: #e6b15d; color: #080d0f; }
button, input, textarea, select { font-family: inherit; }
:focus-visible { outline: 2px solid #e6b15d; outline-offset: 5px; }
.site-header { padding: 16px 4%; height: 90px; min-height: 90px; border-bottom: 1px solid #d7edf00c; }
.site-header.is-scrolled { color: #e5eeef; background: #080e10eb; border-color: #c0e1e51c; backdrop-filter: blur(22px); }
.brand { width: 170px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.brand img { width: auto; height: 50px; max-width: 100%; }
.site-nav { font-size: 12px; font-weight: 500; gap: 28px; }
.site-nav a { position: relative; padding: 8px 0; color: #cad6d8; }
.site-nav a::after { content: ''; position: absolute; bottom: 2px; left: 0; width: 0; height: 1px; background: #e6b15d; transition: width 250ms; }
.site-nav a:hover::after { width: 100%; }
.site-nav a:last-child { padding: 10px 18px; border: 1px solid #e6b15d70; border-radius: 3px; color: #e6b15d; }
.site-nav a:last-child::after { display: none; }
.section-inner, .hero-content { width: min(1180px, calc(100% - 80px)); }
section:not(.hero) { position: relative; padding: 94px 0; border-top: 1px solid #badbe51a; }
main > section[id]:not(.hero) { scroll-margin-top: 90px; }
section:not(.hero)::before { content: ''; position: absolute; top: -1px; left: max(40px, calc((100% - 1180px) / 2)); width: 72px; height: 1px; background: #e6b15d; }
.hero { min-height: 92svh; background: #080d0f; }
.hero-shade { background: linear-gradient(90deg, #040a0df2 0%, #040a0dc9 32%, #040a0d1a 64%, #040a0d05 100%), linear-gradient(0deg, #080d0f 0%, #080d0f00 28%); }
.hero-content { padding: 152px 0 32px; }
.eyebrow, .section-kicker, .section-heading .section-kicker { margin: 0 0 20px; color: #e6b15d; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.hero .eyebrow { max-width: 420px; }
.hero-logo-shell { width: 264px; margin: 0 0 26px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.hero-logo { display: block; }
.hero-logo-lines [stroke="#071f4d"] { stroke: #eef4f3; }
.hero-logo-type { fill: #eef4f3; }
.hero-logo-type text { letter-spacing: 0; }
.logo-points { fill: #080d0f; }
.hero-statement { max-width: 420px; margin: 0; font-size: 34px; line-height: 1.2; font-weight: 500; color: #f2f6f6; }
.hero-copy { max-width: 420px; margin-top: 22px; color: #afc0c4; font-size: 15px; line-height: 1.75; }
.hero-actions { gap: 14px; margin-top: 30px; }
.button { min-height: 48px; padding: 0 23px; font-size: 12px; font-weight: 600; border-radius: 3px; }
.button.primary { background: #e6b15d; border-color: #efc481; color: #111a1d; box-shadow: inset 0 1px 0 #fff3; }
.button.primary:hover { background: #f0c37e; box-shadow: 0 8px 25px #e6b15d1a; }
.button.secondary, .reference-link { border-color: #c0e1e540; background: #10202555; color: #e4edee; }
.button.secondary:hover, .reference-link:hover { background: #1b3038; border-color: #80bbc3; }
.workshop-entry { margin-top: 19px; font-size: 12px; font-weight: 400; color: #b2c2c5; }
.hero-stats { width: min(570px, 100%); margin-top: 48px; background: none; border-top: 1px solid #c0e1e52b; gap: 0; }
.hero-stats div { padding: 18px 20px 0 0; background: none; }
.hero-stats dt { font-size: 10px; font-weight: 500; color: #e6b15d; }
.hero-stats dd { color: #a9bdc1; font-size: 11px; }
.hero-motion-toggle { border-color: #b0d4d62e; color: #a8c6cc; background: #0c171bc9; }
h2 { max-width: 810px; font-size: 44px; line-height: 1.14; font-weight: 500; }
h3 { font-weight: 500; }
.intro, .brand-system, .services, .work, .website-workshop, .process, .contact { background: #080d0f; }
.intro { padding: 66px 0 !important; border-bottom: 0; border-image: none; background: #0d171a; }
.intro h2 { font-size: 31px; }
.intro-grid { grid-template-columns: 220px 1fr; gap: 40px; }
.intro p:last-child, .section-heading p, .contact p, .work .section-heading p { font-size: 15px; line-height: 1.8; color: #96adb2; }
.section-heading.split { grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); gap: 80px; }
.section-heading { margin-bottom: 44px; }
.brand-grid { gap: 0; border-top: 1px solid #c0e1e51c; }
.brand-card { grid-template-columns: minmax(280px, .85fr) minmax(280px, 1fr); min-height: 165px; padding: 28px 0; border: 0; border-bottom: 1px solid #c0e1e51c; border-radius: 0; background: none; box-shadow: none; }
.brand-card span { margin-bottom: 16px; color: #8db5bc; font-size: 10px; font-weight: 500; }
.main-brand span { color: #e6b15d; }
.brand-card-logo { height: 76px; max-width: 390px; }
.brand-card p { font-size: 14px; line-height: 1.8; }
.services { background: linear-gradient(120deg, #0d171a, #080d0f 60%); }
.service-grid { gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-card, .service-card:nth-child(n) { min-height: 286px; padding: 27px 22px; border: 1px solid #aacdd52a; border-top: 1px solid #aacdd552; background: linear-gradient(135deg, #1d323647, #0c141791); border-radius: 5px; box-shadow: inset 0 1px 0 #d5eef505; }
.service-card:hover, .js .service-card[data-reveal].is-visible:hover { transform: translateY(-4px); border-color: #e6b15d75; box-shadow: 0 14px 32px #0004; }
.service-number { font-size: 11px; font-weight: 500; margin-bottom: 66px; }
.service-card h3 { font-size: 18px; line-height: 1.3; }
.service-card p { font-size: 13px; line-height: 1.75; }
.service-motion { top: 60px; right: 22px; opacity: .75; transform: scale(.8); transform-origin: top right; }
.service-motion--web { border-color: #80bbc3; }
.service-motion--web i:nth-child(3), .service-motion--seo i:nth-child(2) { background: #9bb8be; }
.service-motion--ads i { border-color: #80bbc3; }
.service-motion--shop i { background: #283f45; }
.certification-patch { top: 19px; right: 12px; max-width: 137px; padding: 5px 7px; background: #2a2317; border: 1px solid #e6b15d3d; border-radius: 3px; color: #d6be96; font-size: 9px; font-weight: 500; }
.certification-patch span { color: #101719; }
.certification-patch:hover { color: #e6b15d; background: #352917; }
.work { background: #0d171a; }
.reference-project { padding: 0; gap: 70px; margin-bottom: 0; border: 0; background: none; border-radius: 0; }
.reference-copy h3 { font-size: 37px; font-weight: 500; }
.reference-copy > p:not(.reference-label) { font-size: 14px; line-height: 1.8; color: #96adb2; }
.reference-label { font-size: 10px; font-weight: 500; color: #e6b15d; }
.reference-tags { font-size: 11px; font-weight: 400; color: #bed0d3; }
.reference-tags span::before { width: 4px; height: 4px; background: #e6b15d; }
.reference-link { font-size: 12px; font-weight: 500; border-radius: 3px; }
.device-controls { background: #081013; border-color: #365058; border-radius: 4px; }
.device-button { font-weight: 500; }
.device-button.is-active { background: #233b42; color: #dfedf0; }
.device-frame { border-color: #69858b66; background: #0c1519; box-shadow: 0 25px 50px #0006; }
.browser-chrome { background: #17262b; }
.browser-chrome strong { color: #aabfc4; font-weight: 400; }
.device-caption { color: #76959c; font-size: 11px; }
.workshop-heading { gap: 80px; }
.workshop-heading h2 { font-size: 44px; font-weight: 500; }
.workshop-heading > p { max-width: 380px; font-size: 14px; line-height: 1.8; }
.workshop-layout { grid-template-columns: 224px minmax(0, 1fr); gap: 48px; }
.workshop-settings legend { font-size: 12px; font-weight: 500; }
.workshop-settings legend > span { color: #e6b15d; }
.workshop-settings input[type="text"], .workshop-settings select { background: #101c20; border-color: #30474e; color: #e1edee; }
.workshop-style { background: #101c20; border-color: #273c43; }
.workshop-style:has(input:checked) { background: #243b42; border-color: #7ab0ba; }
.workshop-style strong { font-weight: 500; }
.workshop-style:has(input:checked) i { border-color: #e6b15d; }
.workshop-colors label:has(input:checked) { border-color: #d8e9eb; }
.workshop-preview-tool { background: #0d171b; border-color: #3b535b; border-radius: 5px; box-shadow: 0 30px 60px #0005; }
.workshop-toolbar, .workshop-preview-caption, .workshop-mobile-options { background: #17272d; border-color: #334c54; }
.workshop-devices, .workshop-mobile-styles { background: #0b1418; }
.workshop-devices button[aria-pressed="true"], .workshop-mobile-styles button[aria-pressed="true"] { background: #29444d; color: #dff0f3; box-shadow: none; }
.workshop-devices button, .workshop-reset { color: #8babaf; }
.workshop-live i { background: #89c8b9; }
.workshop-browser { border-color: #556e75; box-shadow: 0 14px 28px #0005; }
.workshop-browser-bar { background: #e6ecec; color: #4d6066; }
.workshop-next { border-color: #30444a; }
.workshop-next strong { font-weight: 500; }
.workshop-next p { font-size: 12px; }
.process { background: #0d171a; }
.process-lead { font-size: 14px; color: #96adb2; }
.process-live, .process-toggle { color: #c3d9dd; background: #14252b; border-color: #344d55; font-weight: 500; }
.process-live i { background: #89c8b9; }
.build-progress { height: 1px; background: #30474e; }
.build-progress i { background: linear-gradient(90deg, #7fbcc6, #e6b15d); }
.build-browser { border-color: #3c535a; box-shadow: 0 22px 48px #0004; border-radius: 5px; }
.build-browser-bar { background: #182b31; }
.build-caption { color: #95aeb4; }
.build-caption p strong { color: #e2eeee; }
.build-caption > span b { color: #e6b15d; }
.process-mindmap, .process-guide { background: #0b1519; }
.mindmap-links path { stroke: #557f8b; }
.mindmap-root { background: #263f48; border-color: #89b8c2; }
.mindmap-root span { color: #aac5cb; }
.mindmap-node { background: #14272d; border-color: #334c55; }
.mindmap-node strong, .guide-sections strong { color: #d8e9ec; }
.guide-approved { color: #8ac6b1; }
.guide-swatch-navy { background: #14272d; }
.guide-swatch { border-color: #6b868e; }
.process-code { background: #081215; }
.process-finished { color-scheme: light; --mk-navy: #18313a; --muted: #62777d; --line: #dce5e8; }
.finished-nav a { color: #18313a; }
.steps { gap: 0; }
.steps::before { display: none; }
.steps li { padding-top: 21px; padding-bottom: 21px; border: 0; border-bottom: 1px solid #2b4148; background: none; border-radius: 0; }
.steps li::before { color: #7398a2; font-size: 12px; font-weight: 500; }
.steps li.is-active { transform: none; background: #1c323c70; border-color: #597783; box-shadow: inset 2px 0 0 #e6b15d; }
.steps li.is-active::before { color: #e6b15d; }
.steps span { font-weight: 500; }
.steps small { font-size: 12px; line-height: 1.65; }
.process-highlight { border-top: 1px solid #476069; border-bottom: 1px solid #2b4148; background: none; box-shadow: none; }
.process-highlight-mark { border-color: #5b7981; background: #112127; }
.process-highlight p > span { color: #e6b15d; }
.process-highlight p > strong { font-weight: 500; }
.process-highlight-points span { color: #a7bec4; }
.contact { background: linear-gradient(120deg, #080d0f 20%, #102027); }
.contact h2 { max-width: 510px; }
.contact p.contact-assurance { font-size: 12px; color: #e6b15d; font-weight: 500; }
.contact-form { padding: 30px; background: #15282c55; border-color: #45656b55; border-radius: 5px; box-shadow: inset 0 1px 0 #ecfaff0a, 0 30px 60px #0003; backdrop-filter: blur(16px); }
.contact-form label { font-weight: 500; font-size: 12px; }
.project-request-title { font-weight: 500; font-size: 22px; margin-bottom: 12px; }
.contact-form input, .contact-form textarea { color: #e7eff0; background: #07121691; border-color: #4d6a725c; font-size: 13px; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #6b8991; }
.contact .form-privacy { margin: 0; font-size: 10px; line-height: 1.6; }
.contact .form-note { margin: 0; font-size: 12px; }
.form-note.is-success { color: #8eceb5; }
.form-note.is-error { color: #ed9c85; }
.site-footer { background: #050a0c; border-top: 1px solid #24363d; padding: 26px 4%; font-size: 11px; }
.site-footer span { font-weight: 500; color: #bcd0d5; }
.legal-header { background: #0c181c; border-color: #30474e; }
.legal-main h1 { font-size: 48px; font-weight: 500; }
.legal-back { font-size: 12px; font-weight: 500; color: #e6b15d; }
.legal-details { border-top-width: 1px; }
.legal-details section:not(.hero) { padding: 0; border: 0; }
.legal-details section::before { display: none; }
.legal-details h2 { font-size: 21px; }
.legal-details p, .legal-details address { font-size: 15px; }
main section .section-inner .section-kicker { color: #e6b15d; margin: 0 0 20px; font-size: 11px; line-height: 1.5; font-weight: 500; }

@media (min-width: 1600px) {
  .hero { min-height: min(92svh, 990px); }
  .hero-content { padding-top: 180px; }
}
@media (min-width: 701px) and (max-height: 820px) {
  .hero .hero-content { padding-top: 118px; padding-bottom: 24px; }
  .hero .eyebrow { margin-bottom: 14px; }
  .hero-logo-shell { width: 180px; margin-bottom: 18px; }
  .hero .hero-statement { font-size: 30px; max-width: 390px; }
  .hero .hero-copy { font-size: 14px; line-height: 1.7; margin-top: 18px; max-width: 410px; }
  .hero-actions { margin-top: 22px; }
  .hero-stats { display: none; }
  .workshop-entry { margin-top: 16px; }
}
@media (max-width: 1100px) {
  .site-nav { gap: 18px; }
  .section-heading.split, .workshop-heading { gap: 40px; }
  .hero-statement { font-size: 32px; }
  .hero-copy { max-width: 400px; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-project { gap: 35px; }
  .workshop-layout { gap: 28px; }
}
@media (max-width: 850px) {
  .site-header { padding: 16px 24px; height: 80px; min-height: 80px; }
  .brand { width: 148px; }
  .brand img { height: 44px; }
  .nav-toggle { display: block; border-color: #597078; border-radius: 3px; }
  .site-nav { display: none; }
  .site-nav.is-open { display: flex; position: absolute; top: 80px; left: 0; right: 0; padding: 22px 24px; flex-direction: column; align-items: stretch; background: #0c181cf5; border-bottom: 1px solid #38515b; backdrop-filter: blur(22px); }
  .section-inner, .hero-content { width: calc(100% - 48px); }
  .hero-content { padding-top: 132px; }
  main > section[id]:not(.hero) { scroll-margin-top: 80px; }
  h2, .workshop-heading h2 { font-size: 36px; }
  .reference-project { grid-template-columns: 1fr; gap: 36px; }
  .brand-card { grid-template-columns: 1fr 1fr; gap: 20px; }
  .contact-grid { gap: 40px; }
}
@media (max-width: 700px) {
  section:not(.hero) { padding: 64px 0; }
  section:not(.hero)::before { left: 24px; width: 48px; }
  .hero { min-height: 92svh; }
  .hero-content { padding-top: 122px; padding-bottom: 38px; }
  .hero-logo-shell { width: 215px; margin-bottom: 22px; }
  .hero-statement { max-width: 355px; font-size: 28px; line-height: 1.2; }
  .hero-copy { max-width: 330px; font-size: 14px; line-height: 1.8; }
  .hero-shade { background: linear-gradient(90deg, #050d10ed, #050d10a6), linear-gradient(0deg, #080d0f, #080d0f00 50%); }
  .hero-monitor { opacity: .9; }
  .hero-actions { flex-wrap: nowrap; gap: 10px; }
  .hero-actions .button { min-width: 0; flex: 1; font-size: 11px; padding: 0 10px; }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; }
  .hero-stats div { padding: 16px 8px 0 0; }
  .hero-stats dd { font-size: 10px; }
  .hero-motion-toggle { top: 95px; right: 24px; }
  .hero .eyebrow { max-width: 270px; font-size: 9px; margin-bottom: 18px; }
  .intro-grid, .section-heading.split, .workshop-heading { grid-template-columns: 1fr; gap: 20px; }
  .intro { padding: 44px 0 !important; }
  .intro h2 { font-size: 26px; }
  .intro p:last-child { font-size: 13px; }
  h2, .workshop-heading h2 { font-size: 31px; }
  .section-heading.split > p { margin-top: 0; }
  .section-heading { margin-bottom: 30px; }
  .brand-card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 14px; padding: 26px 0; }
  .brand-card span { margin: 0; }
  .brand-card-logo { grid-row: 2; height: 65px; max-width: 100%; }
  .brand-card p { grid-column: 1; grid-row: 3; font-size: 13px; }
  .service-card, .service-card:nth-child(n) { padding: 22px 18px; }
  .service-card h3 { font-size: 17px; }
  .reference-copy h3 { font-size: 31px; }
  .workshop-layout { grid-template-columns: 1fr; gap: 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-form { padding: 23px; }
  .contact p { font-size: 14px; }
  .contact-assurance { line-height: 1.8; }
  .process-highlight { padding-left: 0; padding-right: 0; }
  .site-footer { flex-wrap: wrap; gap: 16px; padding: 24px; }
  .site-footer span { width: 100%; }
}
@media (max-width: 480px) {
  .service-grid { grid-template-columns: 1fr; }
  .service-card, .service-card:nth-child(n) { min-height: 252px; }
  .hero-statement { font-size: 27px; }
  .brand-card-logo { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav a::after, .button, .service-card { transition: none; }
}