:root {
  /* Primitive palette sampled from the reference site */
  --p-blue-top: oklch(from #67a3e6 l c h);
  --p-blue-mid: oklch(from #87c8e9 l c h);
  --p-mint-bottom: oklch(from #d0edda l c h);
  --p-ink: oklch(0.16 0.015 255);
  --p-coral: oklch(from #e77680 l c h);
  --p-orange: oklch(from #db9d3f l c h);
  --p-purple: oklch(from #956ac0 l c h);
  --p-green: oklch(from #3fc587 l c h);
  --p-link: oklch(0.35 0.17 270);

  /* Semantic tokens */
  --text: var(--p-ink);
  --accent: var(--p-coral);
  --page-gradient: linear-gradient(180deg, var(--p-blue-top) 0%, var(--p-blue-mid) 48%, var(--p-mint-bottom) 100%);
  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-border: rgba(255, 255, 255, 0.34);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.24);
  --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);

  /* Component tokens */
  --card-radius: 16px;
  --button-radius: 999px;
  --content-width: 1160px;
  --narrow-width: 760px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: hidden;
  color: var(--text);
  background: var(--page-gradient);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--p-link); }
button, input, select, textarea { font: inherit; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a, button { cursor: pointer; }
:focus-visible { outline: 3px solid oklch(0.28 0.12 255); outline-offset: 4px; }
section[id] { scroll-margin-top: 20px; }

.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--card-radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Shared masthead */
.site-header {
  padding: 40px 20px 50px;
  border-bottom: 1px solid rgba(37, 89, 138, 0.2);
  box-shadow: 0 8px 18px rgba(37, 89, 138, 0.24);
  text-align: center;
}
.logo-card {
  width: 540px;
  max-width: 100%;
  height: 292px;
  margin: 0 auto;
  padding: 22px 42px;
  display: grid;
  place-items: center;
}
.logo-card img { width: 452px; height: 246px; object-fit: contain; }
.logo-link { display: block; }
.site-nav {
  width: 460px;
  max-width: 100%;
  margin: 44px auto 0;
  display: grid;
  gap: 22px;
}
.nav-button {
  min-height: 80px;
  padding: 16px 24px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: var(--button-radius);
  box-shadow: var(--glass-shadow);
  color: rgba(255, 255, 255, 0.94);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-shadow: var(--text-shadow);
  transition: transform 180ms ease-out, filter 180ms ease-out;
}
.nav-button:hover { transform: translateY(-2px); filter: brightness(1.045); }
.nav-button:active { transform: translateY(0); }
.nav-coral { background: var(--p-coral); }
.nav-orange { background: var(--p-orange); }
.nav-purple { background: var(--p-purple); }
.nav-green { background: var(--p-green); }
.header-phone {
  margin-top: 48px;
  display: inline-block;
  color: var(--text);
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  text-shadow: var(--text-shadow);
}

/* Shared buttons and headings */
.button-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; }
.button-stack { display: grid; justify-content: start; gap: 20px; }
.pill-button {
  min-height: 56px;
  padding: 14px 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--button-radius);
  box-shadow: var(--glass-shadow);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform 180ms ease-out, filter 180ms ease-out;
}
.pill-button:hover { transform: translateY(-2px); filter: brightness(1.045); }
.pill-button:active { transform: translateY(0); }
.pill-coral { color: rgba(255, 255, 255, 0.95); background: var(--p-coral); text-shadow: var(--text-shadow); }
.pill-glass { color: var(--text); background: rgba(255, 255, 255, 0.18); }
h1, h2, h3, h4 { color: var(--text); text-shadow: var(--text-shadow); }
.section-heading { font-size: 40px; line-height: 1.25; text-align: center; }
.section-copy { max-width: 650px; margin: 24px auto 0; font-size: 18px; line-height: 1.6; text-align: center; }
.narrow { width: min(var(--narrow-width), calc(100% - 40px)); margin-inline: auto; }

/* Home */
.home-hero {
  width: min(var(--content-width), calc(100% - 40px));
  min-height: 864px;
  margin: 40px auto 0;
  padding: 72px 48px;
  display: grid;
  place-items: center;
  text-align: center;
}
.home-hero h1 { max-width: 1040px; font-size: 48px; line-height: 1.5; }
.home-hero p { max-width: 800px; margin: 24px auto 0; font-size: 18px; line-height: 1.65; }
.home-hero .button-row { margin-top: 32px; }
.home-services { padding: 80px 20px 40px; }
.service-list {
  width: min(1120px, 100%);
  margin: 40px auto 0;
  display: grid;
  gap: 36px;
}
.service-card { min-height: 336px; padding: 32px 36px; }
.service-card h3 { font-size: 28px; line-height: 1.3; text-align: center; }
.service-card > p { max-width: 620px; margin: 24px auto 0; font-size: 18px; line-height: 1.6; text-align: center; }
.check-list { margin-top: 24px; display: grid; gap: 12px; list-style: none; font-size: 16px; }
.check-list li { position: relative; padding-left: 18px; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: oklch(0.75 0.09 230); font-weight: 700; text-shadow: var(--text-shadow); }
.portfolio { padding: 64px 20px 72px; text-align: center; }
.portfolio h2 { font-size: 28px; line-height: 1.3; }
.portfolio > p { margin-top: 12px; font-size: 16px; }
.portfolio-item { margin-top: 56px; }
.portfolio-item h3 { margin-top: 12px; font-size: 20px; line-height: 1.3; }
.portfolio-item p { margin-top: 4px; font-size: 16px; }
.portfolio-item img, .portfolio-item iframe, .portfolio-item .video-frame { margin-inline: auto; }
.portfolio-item img { height: auto; }
.video-frame { width: 400px; max-width: 100%; aspect-ratio: 16 / 9; display: block; overflow: hidden; border: 0; background: oklch(0.2 0.01 255); }
.video-frame img { width: 100%; height: 100%; object-fit: cover; }
.process { padding: 64px 20px 96px; }
.process .section-copy { max-width: 600px; }
.process-list { width: min(664px, 100%); margin: 81px auto 0; display: grid; gap: 24px; }
.process-card { min-height: 190px; padding: 28px 32px; display: grid; align-content: center; text-align: center; }
.process-number { font-size: 16px; }
.process-card h3 { margin-top: 8px; font-size: 26px; line-height: 1.35; }
.process-card p { margin-top: 20px; font-size: 18px; line-height: 1.55; }
.cta-panel { min-height: 426px; padding: 72px 20px; display: grid; place-items: center; text-align: center; }
.cta-panel h2 { font-size: 40px; line-height: 1.25; }
.cta-panel p { margin-top: 24px; font-size: 16px; }
.cta-panel .pill-button { margin-top: 36px; }

/* Contact, map, and footer */
.contact-panel { margin-top: 40px; padding: 104px 20px 100px; text-align: center; }
.contact-panel h2 { font-size: 40px; line-height: 1.25; }
.contact-panel > div > p { margin-top: 28px; }
.contact-form { width: max-content; max-width: 100%; margin: 4px auto 48px; text-align: left; }
.form-row { margin: 4px 0; display: flex; align-items: center; justify-content: center; gap: 4px; }
.form-row label { flex: 0 0 auto; }
.form-row input, .form-row select { width: 182px; max-width: 100%; min-height: 24px; }
.form-row textarea { width: 200px; max-width: 100%; height: 75px; resize: both; font: 13px monospace; }
.form-details { align-items: flex-end; }
.contact-form .pill-button { margin: 20px auto 0; display: grid; border: 0; }
.form-status { max-width: 460px; margin: 12px auto 0; font-size: 14px; text-align: center; }
.form-status:empty { display: none; }
.contact-cards { width: min(800px, 100%); margin: 0 auto; display: grid; gap: 24px; }
.contact-card { min-height: 132px; padding: 28px 20px; display: grid; place-content: center; gap: 16px; }
.contact-card h3 { font-size: 22px; line-height: 1.3; }
.contact-card p { font-size: 16px; }
.contact-card a { min-height: 24px; }
.contact-card a[href^="tel"], .contact-card a[target="_blank"] { color: var(--text); text-decoration: none; }
.map-frame { width: min(1200px, calc(100% - 40px)); height: 350px; margin: 40px auto 52px; display: block; overflow: hidden; border: 0; border-radius: 8px; background: rgba(255,255,255,.2); }
.map-frame img { width: 100%; height: 100%; object-fit: cover; }
.site-footer { padding: 0 20px 24px; text-align: center; }
.site-footer h2 { font-size: 20px; }
.site-footer > p { margin-top: 8px; }
.footer-group { margin-top: 12px; }
.footer-group h3 { font-size: 16px; }
.footer-links { margin-top: 4px; display: grid; gap: 2px; }
.footer-links a { min-height: 24px; }
.copyright { margin-top: 12px; }

/* Service detail pages */
.page-intro { padding-top: 28px; }
.page-intro h1 { font-size: 32px; line-height: 1.4; }
.page-intro > p { margin-top: 8px; line-height: 1.55; }
.page-intro .button-row { margin: 12px 0; }
.page-intro > img { margin: 0 auto 56px; }
.page-section { margin-top: 52px; }
.page-section > h2 { font-size: 24px; line-height: 1.35; }
.page-section > p { margin-top: 8px; }
.service-page .service-list { width: 100%; margin-top: 0; gap: 0; }
.service-page .service-card { min-height: 0; padding: 28px 30px; }
.service-page .service-card h3 { text-align: left; }
.service-page .service-card > p { max-width: none; margin-top: 16px; font-size: 16px; text-align: left; }
.service-page .portfolio { padding-inline: 0; }
.service-page .process { padding-inline: 0; }
.service-page .cta-panel { width: 100vw; margin-left: calc(50% - 50vw); }
.pricing { margin: 36px auto 64px; }
.pricing h2 { font-size: 24px; }
.pricing h3 { margin-top: 28px; font-size: 18px; }
.pricing h4 { margin-top: 24px; font-size: 16px; }
.pricing p { margin-top: 8px; }
.pricing ul { margin: 8px 0 24px 22px; }
.pricing .price { font-size: 18px; }
.pricing .important { margin-top: 36px; }

/* Audio's glass two-column hero */
.audio-hero {
  width: min(var(--content-width), calc(100% - 40px));
  min-height: 864px;
  margin: 40px auto 52px;
  padding: 64px;
  display: grid;
  grid-template-columns: minmax(0, 340px) 350px;
  justify-content: center;
  align-content: center;
  gap: 44px;
}
.audio-hero h1 { font-size: 32px; line-height: 1.55; }
.audio-hero p { margin-top: 8px; font-weight: 700; line-height: 1.55; }
.audio-hero .button-stack { margin-top: 14px; }
.audio-hero > img { width: 350px; }
.audio-service-list { max-width: 466px; margin-inline: auto; }
.audio-demo { width: 572px; max-width: 100%; height: auto; }

/* Privacy */
.privacy { padding: 28px 20px 64px; text-align: center; }
.privacy h1 { font-size: 32px; }
.privacy h2 { margin-top: 52px; font-size: 24px; }
.privacy p { margin-top: 12px; }
.privacy ul { width: auto; max-width: 100%; margin: 12px auto 0; display: inline-block; text-align: left; }
.privacy li { overflow-wrap: anywhere; }

@media (max-width: 800px) {
  .site-header { padding: 28px 16px 40px; }
  .logo-card { width: min(540px, 100%); height: auto; padding: 18px 24px; }
  .logo-card img { width: 100%; height: auto; }
  .site-nav { margin-top: 32px; gap: 18px; }
  .nav-button { min-height: 64px; font-size: 23px; }
  .header-phone { margin-top: 36px; font-size: 22px; }
  .home-hero { min-height: 640px; padding: 56px 24px; }
  .home-hero h1 { font-size: 38px; line-height: 1.3; }
  .home-hero p, .section-copy { font-size: 17px; }
  .section-heading, .cta-panel h2, .contact-panel h2 { font-size: 34px; }
  .service-card { padding: 28px 24px; }
  .service-card h3 { font-size: 25px; }
  .service-card > p { font-size: 17px; }
  .audio-hero { min-height: 0; padding: 44px 28px; grid-template-columns: 1fr; gap: 28px; }
  .audio-hero > img { width: 350px; max-width: 100%; margin-inline: auto; }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .site-header { padding-inline: 12px; }
  .logo-card { padding: 16px; }
  .nav-button { min-height: 60px; padding: 14px 16px; font-size: 21px; }
  .home-hero, .audio-hero { width: calc(100% - 24px); margin-top: 24px; }
  .home-hero { min-height: 580px; padding: 44px 20px; }
  .home-hero h1 { font-size: 32px; }
  .home-hero p { font-size: 16px; }
  .home-services, .portfolio, .process { padding-inline: 12px; }
  .section-heading, .cta-panel h2, .contact-panel h2 { font-size: 30px; }
  .section-copy { font-size: 16px; }
  .service-list { margin-top: 32px; gap: 24px; }
  .service-card { padding: 26px 20px; }
  .service-card h3 { font-size: 23px; }
  .service-card > p, .process-card p { font-size: 16px; }
  .process-card { padding: 26px 20px; }
  .process-card h3 { font-size: 23px; }
  .cta-panel { min-height: 380px; }
  .contact-panel { padding: 72px 14px; }
  .form-row { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 4px; margin-bottom: 12px; }
  .contact-form { width: min(300px, 100%); }
  .form-row input, .form-row select, .form-row textarea { width: 100%; min-height: 44px; }
  .form-row textarea { height: 120px; }
  .contact-form .pill-button { min-width: 180px; }
  .narrow { width: calc(100% - 28px); }
  .page-intro h1, .audio-hero h1 { font-size: 28px; }
  .audio-hero { padding: 36px 22px; }
  .service-page .service-card { padding: 24px 20px; }
  .map-frame { width: calc(100% - 24px); height: 300px; }
  .site-footer > p { max-width: 70ch; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}