/*
 PREMIUM TINTS & WRAPS / TYPOGRAPHY SYSTEM v9.6
 Design intent: crisp automotive editorial grotesk, not a rounded geometric display.
 Official Google Fonts Inter, variable optical sizes; locally available Inter/Arial fallback.
 This is loaded *after* styles.css so previous site motion and layout remain unchanged.
 Keep type decisions here for future iterations.
*/
:root {
  --type-display: 'Inter', 'Inter Display', 'Helvetica Neue', Arial, sans-serif;
  --type-text: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
body {
  font-family:var(--type-text);
  font-size:16px;
  font-weight:400;
  letter-spacing:.006em;
  line-height:1.5;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,.section-title,.flow-title,.cards-heading h2,.mobile-menu a {
  font-family:var(--type-display);
  font-optical-sizing:auto;
  font-synthesis: none;
  font-weight:530;
  letter-spacing:-.005em;
}
button,input,textarea,select {font-family:var(--type-text)}
/* Large display is clear and measured, not heavy or compressed. */
.hero-atelier h1 {
  font-family:var(--type-display);
  font-weight:530;
  font-size:clamp(60px,6.4vw,103px);
  letter-spacing:-.012em;
  line-height:1.105;
  max-width:790px;
}
.hero-atelier .hero-under p {font-size:17px;letter-spacing:.003em;line-height:1.75}
.intro-grid h2 {font-weight:530;letter-spacing:-.012em;line-height:1.11}
.section-title,.stage-head h2,.cards-heading h2 {font-weight:530;letter-spacing:-.011em;line-height:1.09}
.flow-title {font-weight:530;letter-spacing:.002em;line-height:1.08}
.flow-sub {font-weight:400;letter-spacing:.025em}
.blue-break h2 {font-weight:530;letter-spacing:-.008em;line-height:1.11}
.work-head h2 {font-weight:530;letter-spacing:-.01em}
.page-hero h1 {font-weight:530;letter-spacing:-.014em;line-height:1.10}
.detail-copy h2,.faq h2 {font-weight:530;letter-spacing:-.01em;line-height:1.1}
.pixel-card h3,.card-content h3 {font-weight:580;letter-spacing:-.005em}
.quote-intro h2 {font-weight:530;letter-spacing:-.012em;line-height:1.13}
.quote-form-heading h3,.quote-panel .quote-result h3 {font-weight:560;letter-spacing:-.005em}
.privacy h1,.privacy h2 {font-weight:530;letter-spacing:-.01em}
/* Navigation and interface type: a little extra tracking creates precision at small sizes. */
.main-nav a {font-weight:550;font-size:13px;letter-spacing:.045em}
.header-cta {font-weight:600;font-size:12px;letter-spacing:.048em}
.btn,.card-cta,.text-link {font-weight:600;letter-spacing:.035em}
.mobile-menu a {font-weight:520;letter-spacing:.005em}
.quote-panel .quote-form label,
.quote-service-picker legend {font-weight:550;letter-spacing:.02em}
.quote-option span {font-weight:520;letter-spacing:.01em}
.quote-panel .form-submit {font-weight:600;letter-spacing:.035em}
.quote-panel .quote-result pre {font-family:var(--type-text);font-size:14px;line-height:1.72;letter-spacing:.004em}
.footer-label,.footer-links a {letter-spacing:.025em}
/* Preserve visual hierarchy at all breakpoints with slightly more optical room. */
@media(max-width:1190px) {
  .hero-atelier h1 {font-size:clamp(58px,7.25vw,93px);letter-spacing:-.013em}
}
@media(max-width:900px) {
  .hero-atelier h1 {font-size:clamp(57px,8.9vw,83px);letter-spacing:-.014em}
  .quote-intro h2 {letter-spacing:-.009em}
}
@media(max-width:640px) {
  .hero-atelier h1 {font-size:clamp(43px,10.9vw,63px);letter-spacing:-.013em;line-height:1.115}
  .intro-grid h2 {letter-spacing:-.014em}
  .section-title,.cards-heading h2 {letter-spacing:-.016em}
  .flow-title {letter-spacing:-.005em}
  .blue-break h2 {letter-spacing:-.011em}
  .page-hero h1 {letter-spacing:-.013em}
  .quote-intro h2 {letter-spacing:-.012em}
}
@media(max-width:360px) {
  .hero-atelier h1 {font-size:clamp(40px,10.3vw,46px)}
}