/* ============================================================
   AUTOMOTIVE ATELIER
   ANNOUNCEMENT BAR + PREMIUM RESPONSIVE HEADER
   Primary: #B99A63 | Manrope + DM Sans
   Features: Responsive | Dark Mode | RTL | GSAP | AOS
============================================================ */

:root { --auto-primary: #B99A63; --auto-primary-light: #D8C49A; --auto-primary-deep: #947545; --auto-ink: #20211F; --auto-muted: #77766F; --auto-paper: #F5F3EF; --auto-surface: #FBFAF7; --auto-line: rgba(32,33,31,.12); --auto-header-bg: rgba(251,250,247,.96); --auto-dark: #191A18; --auto-font-heading: 'Manrope',sans-serif; --auto-font-body: 'DM Sans',sans-serif; --auto-transition: .3s ease; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; font-family: var(--auto-font-body); color: var(--auto-ink); background: var(--auto-paper); font-size: 14px; line-height: 1.6; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--auto-primary); outline-offset: 4px; }
img, svg { max-width: 100%; }
.atelier-announcement { position: relative; z-index: 1002; background: var(--auto-dark); color: #F8F5EF; font-size: 13px; letter-spacing: .035em; }
.atelier-announcement-inner { width: min(100% - 80px, 1720px); min-height: 39px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.announcement-message { display: flex; align-items: center; gap: 12px; min-width: 0; }
.announcement-message > span:not(.announcement-status):not(.announcement-divider) { font-size: 13px; }
.announcement-status { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--auto-primary-light); box-shadow: 0 0 10px rgba(216,196,154,.5); }
.announcement-divider { height: 14px; width: 1px; flex: 0 0 1px; background: rgba(255,255,255,.25); }
.announcement-secondary { color: #C9C6BF; }
.announcement-link { display: inline-flex; align-items: center; gap: 9px; color: var(--auto-primary-light); font-size: 13px; white-space: nowrap; transition: color var(--auto-transition); }
.announcement-link:hover { color: #FFF; }
.announcement-link i { font-size: 11px; }

.atelier-header { position: sticky; top: 0; z-index: 1000; width: 100%; background: var(--auto-header-bg); border-bottom: 1px solid var(--auto-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: background var(--auto-transition), box-shadow var(--auto-transition), border-color var(--auto-transition); }
.atelier-header.is-scrolled { box-shadow: 0 8px 32px rgba(25,26,24,.07); }
.atelier-header-inner { width: min(100% - 80px, 1720px); min-height: 91px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.atelier-brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; color: var(--auto-ink); }
.brand-emblem { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; color: var(--auto-primary); border: 1px solid rgba(185,154,99,.5); border-radius: 50%; }
.brand-emblem svg { width: 29px; height: 29px; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-name { font-family: var(--auto-font-heading); font-size: 15px; font-weight: 800; letter-spacing: .075em; line-height: 1.35; white-space: nowrap; }
.brand-name span { color: var(--auto-primary-deep); }
.brand-caption { color: var(--auto-muted); font-size: 9px; font-weight: 600; letter-spacing: .12em; line-height: 1.5; white-space: nowrap; }

.atelier-navigation { display: flex; align-items: center; justify-content: center; gap: clamp(12px,1.55vw,25px); flex: 1; min-width: 0; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 0; border: 0; background: transparent; color: var(--auto-ink); font-family: var(--auto-font-body); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color var(--auto-transition); }
.nav-link::after { content: ""; position: absolute; bottom: 5px; left: 0; width: 0; height: 1px; background: var(--auto-primary); transition: width var(--auto-transition); }
.nav-link:hover, .nav-link:focus-visible { color: var(--auto-primary-deep); }
.nav-link:hover::after, .nav-link:focus-visible::after { width: 100%; }
.nav-chevron { color: var(--auto-primary-deep); font-size: 9px; transition: transform var(--auto-transition); }
.has-dropdown.dropdown-open .nav-chevron { transform: rotate(180deg); }

.nav-dropdown { position: absolute; top: calc(100% + 15px); left: -17px; z-index: 1005; min-width: 225px; padding: 10px 17px; background: var(--auto-surface); border-top: 2px solid var(--auto-primary); box-shadow: 0 18px 40px rgba(20,20,18,.12); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--auto-transition), transform var(--auto-transition), visibility var(--auto-transition), background var(--auto-transition); }
.has-dropdown:hover > .nav-dropdown, .has-dropdown:focus-within > .nav-dropdown, .has-dropdown.dropdown-open > .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--auto-line); color: var(--auto-ink); font-size: 13px; font-weight: 500; transition: color var(--auto-transition), padding var(--auto-transition); }
.nav-dropdown a:last-child { border-bottom: 0; }
.nav-dropdown a span { color: var(--auto-primary-deep); font-size: 11px; letter-spacing: .05em; }
.nav-dropdown a:hover, .nav-dropdown a.is-current { padding-inline-start: 5px; color: var(--auto-primary-deep); }
.nav-link.is-current { color: var(--auto-primary-deep); }
.nav-link.is-current::after { width: 100%; }

.atelier-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-shrink: 0; }
.header-icon-button { min-width: 34px; height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 7px; border: 0; background: transparent; color: var(--auto-ink); cursor: pointer; transition: color var(--auto-transition), background var(--auto-transition); }
.header-icon-button:hover { color: var(--auto-primary-deep); }
.header-icon-button i { font-size: 15px; }

/* THEME ICON: LIGHT = MOON, DARK = SUN */
.theme-toggle { position: relative; width: 35px; min-width: 36px; height: 35px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(185,154,99,.35); border-radius: 50%; background: rgba(185,154,99,.10); color: var(--auto-ink); cursor: pointer; transition: color .3s ease, background .3s ease, border-color .3s ease; }
.theme-toggle .theme-icon-dark, .theme-toggle .theme-icon-light { display: none; font-size: 16px; line-height: 1; }
html[data-theme="light"] .theme-toggle .theme-icon-dark { display: inline-block; }
html[data-theme="dark"] .theme-toggle .theme-icon-light { display: inline-block; }
.theme-toggle:hover { color: var(--auto-primary-deep); }
.theme-toggle:focus-visible { outline: 2px solid var(--auto-primary); outline-offset: 3px; }
html[data-theme="dark"] .theme-toggle { color: var(--auto-primary-light); background: rgba(197,166,110,.13); border-color: rgba(197,166,110,.4); }
html[data-theme="dark"] .theme-toggle:hover { color: #F5E8C9; }

.direction-toggle { gap: 6px; }
.direction-toggle i { font-size: 14px; }
.direction-toggle span { font-size: 11px; font-weight: 700; letter-spacing: .04em; }

/* HIGHLIGHTED LOGIN BUTTON */
.login-link { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 15px; border: 1px solid rgba(185,154,99,.52); background: rgba(185,154,99,.10); color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .025em; white-space: nowrap; transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.login-link:hover { color: #171713; background: var(--auto-primary); border-color: var(--auto-primary); box-shadow: 0 5px 16px rgba(185,154,99,.20); }
.login-link:focus-visible { outline: 2px solid var(--auto-primary); outline-offset: 3px; }
html[data-theme="dark"] .login-link { color: #F1EEE7; background: rgba(197,166,110,.13); border-color: rgba(197,166,110,.48); }
html[data-theme="dark"] .login-link:hover { color: #171713; background: var(--auto-primary); border-color: var(--auto-primary); box-shadow: 0 5px 18px rgba(0,0,0,.2); }

.atelier-book-button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 17px; padding: 0 18px; background: var(--auto-primary); color: #171713; font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .025em; white-space: nowrap; transition: background var(--auto-transition), color var(--auto-transition), gap var(--auto-transition); }
.atelier-book-button:hover { background: var(--auto-ink); color: #FFF; gap: 22px; }
.atelier-book-button i { font-size: 11px; }

.mobile-menu-toggle { width: 42px; height: 42px; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 1px solid var(--auto-line); background: transparent; color: var(--auto-ink); cursor: pointer; }
.mobile-menu-toggle span { display: block; width: 19px; height: 1.5px; background: currentColor; transition: transform var(--auto-transition); }
.mobile-menu-toggle.is-active span:first-child { transform: translateY(3.75px) rotate(45deg); }
.mobile-menu-toggle.is-active span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

.atelier-menu-backdrop { position: fixed; inset: 0; z-index: 998; background: rgba(15,16,14,.5); opacity: 0; visibility: hidden; transition: opacity var(--auto-transition), visibility var(--auto-transition); }
.atelier-menu-backdrop.is-visible { opacity: 1; visibility: visible; }

/* Sidebar mobile actions - hidden by default on desktop & tablet */
.atelier-nav-mobile-actions { display: none !important; }

@media (min-width: 1500px) { .atelier-navigation { gap: 25px; } }

@media (max-width: 1350px) { .atelier-header-inner, .atelier-announcement-inner { width: calc(100% - 48px); } .atelier-header-inner { gap: 19px; } .atelier-navigation { gap: 13px; } .atelier-header-actions { gap: 8px; } .brand-name { font-size: 14px; } .brand-caption { font-size: 8px; } .nav-link { font-size: 12px; } .atelier-book-button { padding: 0 13px; gap: 10px; } .login-link { min-height: 36px; padding: 0 11px; font-size: 12px; } }

@media (max-width: 1120px) { .mobile-menu-toggle { width: 42px; height:37px;}.atelier-header-inner { min-height: 80px; } .atelier-navigation { position: fixed; top: 0; right: 0; z-index: 1001; width: min(390px,88vw); height: 100vh; height: 100dvh; padding: 95px 30px 35px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px; overflow-x: hidden; overflow-y: auto; background: var(--auto-surface); box-shadow: -20px 0 60px rgba(0,0,0,.12); transform: translateX(105%); visibility: hidden; transition: transform .38s ease, visibility .38s ease, background var(--auto-transition); } .atelier-navigation.is-open { transform: translateX(0); visibility: visible; } .atelier-navigation > .nav-link, .atelier-navigation .nav-item > .nav-link { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--auto-line); font-size: 14px; } .atelier-navigation .nav-link::after { display: none; } .atelier-navigation .nav-item { display: block; width: 100%; } .atelier-navigation .nav-dropdown { position: static; display: none; min-width: 0; padding: 0 0 5px 14px; border-top: 0; border-left: 1px solid var(--auto-primary); box-shadow: none; opacity: 1; visibility: visible; transform: none; background: transparent; } .atelier-navigation .dropdown-open > .nav-dropdown { display: block; } .atelier-navigation .nav-dropdown a { padding: 11px 0; } .mobile-menu-toggle { display: flex; } .atelier-header-actions { gap: 8px; } .atelier-book-button { min-height: 37px; } }

@media (max-width: 767px) {
  .atelier-announcement-inner { width: calc(100% - 32px); min-height: 36px; justify-content: center; }
  .announcement-message { gap: 8px; }
  .announcement-message > span:not(.announcement-status):not(.announcement-divider) { font-size: 11px; }
  .announcement-secondary, .announcement-divider, .announcement-link { display: none; }
  .atelier-header-inner { width: calc(100% - 32px); min-height: 73px; gap: 10px; }
  .brand-emblem { width: 36px; height: 36px; flex-basis: 36px; }
  .brand-emblem svg { width: 25px; height: 25px; }
  .atelier-brand { gap: 8px; }
  .brand-name { font-size: 12px; letter-spacing: .045em; }
  .brand-caption { font-size: 7px; letter-spacing: .08em; }

  /* In top header on mobile: hide toggles, login, and CTA button from header actions */
  .atelier-header-actions { gap: 0; }
  .atelier-header-actions .theme-toggle,
  .atelier-header-actions .direction-toggle,
  .atelier-header-actions .login-link,
  .atelier-header-actions .atelier-book-button {
    display: none !important;
  }
  .mobile-menu-toggle { width: 40px; height: 40px; }

  .atelier-navigation {
    width: min(355px, 88vw);
    padding: 85px 24px 30px;
    display: flex;
    flex-direction: column;
  }

  /* Show mobile actions inside sidebar */
  .atelier-nav-mobile-actions {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--auto-line);
    width: 100%;
    order: 99;
  }

  .atelier-nav-mobile-toggles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
  }

  .atelier-nav-mobile-toggles .theme-toggle,
  .atelier-nav-mobile-toggles .direction-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 0 12px;
    border: 1px solid rgba(185,154,99,.4);
    border-radius: 999px;
    background: rgba(185,154,99,.08);
    color: var(--auto-ink);
    font-family: var(--auto-font-heading);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: all .25s ease;
  }

  .atelier-nav-mobile-toggles .theme-toggle:hover,
  .atelier-nav-mobile-toggles .direction-toggle:hover {
    background: rgba(185,154,99,.18);
    border-color: var(--auto-primary);
    color: var(--auto-primary-deep);
  }

  .atelier-nav-mobile-actions .login-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid rgba(185,154,99,.5);
    border-radius: 999px;
    background: rgba(185,154,99,.08);
    color: var(--auto-ink);
    font-family: var(--auto-font-heading);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
    transition: all .25s ease;
  }

  .atelier-nav-mobile-actions .login-link:hover {
    background: var(--auto-primary);
    color: #171713;
  }

  .atelier-nav-mobile-actions .atelier-book-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--auto-primary);
    color: #171713;
    font-family: var(--auto-font-heading);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-align: center;
    box-shadow: 0 6px 20px rgba(185,154,99,.25);
    transition: all .25s ease;
  }

  .atelier-nav-mobile-actions .atelier-book-button:hover {
    background: var(--auto-ink);
    color: #FFF;
  }
}

@media (max-width: 380px) {
  .atelier-header-inner { width: calc(100% - 22px); }
  .brand-name { font-size: 10px; }
  .brand-caption { font-size: 6px; }
  .atelier-header-actions { gap: 0; }
  .brand-emblem { width: 32px; height: 32px; flex-basis: 32px; }
}

@media (max-width: 1120px) {
   .atelier-navigation {
      transform: none;
      clip-path: inset(0 0 0 100%);
      transition: clip-path .38s ease, visibility .38s ease, background var(--auto-transition);
   }

   .atelier-navigation.is-open {
      clip-path: inset(0);
   }

   html[dir="rtl"] .atelier-navigation {
      right: auto;
      left: 0;
      clip-path: inset(0 100% 0 0);
   }

   html[dir="rtl"] .atelier-navigation.is-open {
      clip-path: inset(0);
   }
}

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


/* ============================================================
   AUTOMOTIVE ATELIER | FOOTER (shared: index + contact)
============================================================ */
.atelier-footer { position: relative; background: var(--auto-dark); color: #E9E5DB; font-family: var(--auto-font-body); }
.atelier-footer a { transition: color var(--auto-transition), padding var(--auto-transition); }
.footer-main { width: min(100% - 80px, 1440px); margin: auto; padding: 76px 0 56px; display: grid; grid-template-columns: 1.5fr .8fr 1fr 1.3fr; gap: 48px; }
.footer-brand .atelier-brand { color: #F8F5EF; margin-bottom: 20px; }
.footer-brand .brand-caption { color: #A9A59A; }
.footer-brand .brand-name span { color: var(--auto-primary-light); }
.footer-about { max-width: 340px; margin: 0 0 24px; color: #B5B0A5; font-size: 14px; line-height: 1.85; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(216,196,154,.35); border-radius: 50%; color: var(--auto-primary-light); font-size: 14px; transition: background var(--auto-transition), color var(--auto-transition), border-color var(--auto-transition); }
.footer-socials a:hover { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }
.footer-title { margin: 0 0 22px; color: #FAF7F0; font-family: var(--auto-font-heading); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.footer-title::after { content: ""; display: block; width: 28px; height: 1px; margin-top: 12px; background: var(--auto-primary); }
.footer-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.footer-links a { color: #B5B0A5; font-size: 14px; }
.footer-links a:hover { color: var(--auto-primary-light); padding-inline-start: 5px; }
.footer-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: 15px; }
.footer-contact li { display: flex; align-items: flex-start; gap: 13px; color: #B5B0A5; font-size: 14px; line-height: 1.65; }
.footer-contact i { margin-top: 4px; flex: 0 0 16px; color: var(--auto-primary-light); font-size: 14px; text-align: center; }
.footer-contact a:hover { color: var(--auto-primary-light); }
.footer-bottom { border-top: 1px solid rgba(245,241,231,.13); }
.footer-bottom-inner { width: min(100% - 80px, 1440px); margin: auto; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #9B978C; font-size: 13px; }
.footer-legal { display: flex; gap: 22px; }
.footer-legal a:hover { color: var(--auto-primary-light); }

/* ============================================================
   AUTOMOTIVE ATELIER | CONTACT PAGE
============================================================ */
.nav-link.is-current { color: var(--auto-primary-deep); }
.nav-link.is-current::after { width: 100%; }
.contact-banner { 
    position: relative; 
    overflow: hidden; 
    height: 70vh; 
    background: var(--auto-dark) linear-gradient(90deg, rgba(14,15,13,.94), rgba(14,15,13,.72));
    color: #FCFAF5; 
    display: flex;
    align-items: center;      
    justify-content: center;  
    text-align: center;       
    padding: 0 5em;           
}.contact-banner-inner { width: min(100% - 80px, 1440px)}
.contact-eyebrow { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 24px; color: var(--auto-primary-light); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.contact-eyebrow::before { content: ""; width: 38px; height: 1px; background: var(--auto-primary-light); }
.contact-title { margin: 0; font-family: var(--auto-font-heading); font-size: clamp(42px,5vw,72px); font-weight: 800; letter-spacing: -.06em; line-height: 1.1; text-wrap: balance; }
.contact-title span { color: var(--auto-primary-light); font-weight: 500; }
.contact-lead { 
    max-width: 560px; 
    margin: 22px auto 0;
    color: rgba(252,250,245,.8); 
    font-size: 15px; 
    line-height: 1.85; 
}
.contact-crumbs { 
    display: flex; 
    gap: 10px; 
    margin: 30px auto 0;
    justify-content: center; 
    font-size: 12px; 
    letter-spacing: .08em; 
    color: rgba(252,250,245,.65); 
}.contact-crumbs a:hover { color: var(--auto-primary-light); }
.contact-crumbs b { color: var(--auto-primary-light); font-weight: 600; }

.contact-section { background: var(--auto-paper); padding: 90px 0; }
.contact-wrap { width:100%; padding:0 5em }
.contact-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; position: relative; z-index: 2; }
.contact-card { padding: 30px 26px; background: var(--auto-surface); border: 1px solid var(--auto-line); border-top: 2px solid var(--auto-primary); box-shadow: 0 18px 40px rgba(20,20,18,.08); transition: transform var(--auto-transition), background var(--auto-transition); }
.contact-card:hover { transform: translateY(-4px); }
.contact-card-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: var(--auto-primary-deep); font-size: 16px; }
.contact-card h3 { margin: 0 0 8px; font-family: var(--auto-font-heading); font-size: 16px; font-weight: 800; letter-spacing: -.01em; }
.contact-card p, .contact-card a { margin: 0; display: block; color: var(--auto-muted); font-size: 14px; line-height: 1.75; overflow-wrap: anywhere; }
.contact-card a:hover { color: var(--auto-primary-deep); }

.contact-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.9fr); gap: clamp(32px,5vw,72px); margin-top: 84px; align-items: start; }
.contact-kicker { display: block; margin-bottom: 14px; color: var(--auto-primary-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.contact-heading { margin: 0 0 14px; font-family: var(--auto-font-heading); font-size: clamp(30px,3.4vw,46px); font-weight: 800; letter-spacing: -.055em; line-height: 1.15; text-wrap: balance; }
.contact-heading span { color: var(--auto-primary); }
.contact-text { max-width: 560px; margin: 0 0 32px; color: var(--auto-muted); font-size: 14px; line-height: 1.9; }
.contact-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-field.is-full { grid-column: 1 / -1; }
.form-field label { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--auto-line); border-radius: 0; background: var(--auto-surface); color: var(--auto-ink); font-family: var(--auto-font-body); font-size: 14px; transition: border-color var(--auto-transition), box-shadow var(--auto-transition); }
.form-field textarea { padding: 14px 16px; min-height: 140px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 0; border-color: var(--auto-primary); box-shadow: 0 0 0 3px rgba(185,154,99,.2); }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: #B5483C; }
.form-error { min-height: 0; color: #B5483C; font-size: 12px; }
.contact-submit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.contact-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; padding: 0 28px; border: 0; background: var(--auto-primary); color: #171713; font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .09em; cursor: pointer; transition: background var(--auto-transition), gap var(--auto-transition); }
.contact-button:hover { background: var(--auto-primary-light); gap: 26px; }
.contact-note { color: var(--auto-muted); font-size: 12px; }
.form-success { display: none; grid-column: 1 / -1; padding: 16px 18px; border-inline-start: 3px solid var(--auto-primary); background: rgba(185,154,99,.12); font-size: 14px; }
.form-success.is-visible { display: block; }

.contact-side { display: grid; gap: 22px; }
.hours-panel { padding: 32px 30px; background: var(--auto-dark); color: #F1EEE7; }
.hours-panel h3 { margin: 0 0 20px; font-family: var(--auto-font-heading); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.hours-panel ul { margin: 0; padding: 0; list-style: none; }
.hours-panel li { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(245,241,231,.14); font-size: 14px; }
.hours-panel li:last-child { border: 0; }
.hours-panel li span:last-child { color: var(--auto-primary-light); text-align: end; }
.map-panel { position: relative; min-height: 443px; overflow: hidden; border: 1px solid var(--auto-line); border-radius: inherit; }
.map-panel iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map-panel__overlay { position: absolute; z-index: 2; bottom: 24px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 24px 16px; border-radius: 14px; border: 1px solid rgba(185,154,99,.4); background: rgba(20,19,15,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.map-panel::before { display: none; }
.map-pin { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: var(--auto-primary); color: #171713; font-size: 20px; }
.map-panel__overlay h3 { margin: 0 0 6px; font-family: var(--auto-font-heading); font-size: 17px; font-weight: 800; color: #F0EEE8; }
.map-panel__overlay p { margin: 0 0 16px; color: rgba(240,238,232,.65); font-size: 13px; }
.map-panel__overlay .story-primary-link { min-height: 44px; padding: 0 18px; gap: 14px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .footer-main { width: calc(100% - 80px); grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px; padding: 64px 0 44px; }
  .footer-bottom-inner { width: calc(100% - 80px); }
  .contact-banner { padding: 78px 0 112px; }
  .contact-banner-inner, .contact-wrap { width:100%; padding:0 3em }
  .contact-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .contact-grid { grid-template-columns: minmax(0,1fr); margin-top: 64px; }
  .contact-side { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1023px) {
  .contact-title { font-size: clamp(34px,5.4vw,50px); letter-spacing: -.05em; }
  .contact-heading { font-size: clamp(27px,4vw,36px); }
  .contact-lead { font-size: 14px; }
  .contact-section { padding: 70px 0; }
  .map-panel { min-height: 320px; }
}
/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .footer-main { width: calc(100% - 44px); grid-template-columns: minmax(0,1fr); gap: 34px; padding: 52px 0 36px; }
  .footer-bottom-inner { width: calc(100% - 44px); flex-direction: column; justify-content: center; gap: 8px; padding: 18px 0; text-align: center; }
  .footer-about { max-width: none; }
  .contact-banner { padding: 56px 0 96px; }
  .contact-banner-inner, .contact-wrap { width:100%;  padding:0 1.5em}
  .contact-eyebrow { gap: 9px; margin-bottom: 18px; font-size: 10px; letter-spacing: .12em; }
  .contact-eyebrow::before { width: 25px; }
  .contact-title { font-size: clamp(29px,8vw,38px); letter-spacing: -.045em; line-height: 1.15; }
  .contact-lead { margin-top: 16px; font-size: 14px; line-height: 1.8; }
  .contact-crumbs { margin-top: 22px; font-size: 11px; }
  .contact-section { padding: 52px 0; }
  .contact-cards { grid-template-columns: minmax(0,1fr); gap: 14px;}
  .contact-card { padding: 22px 20px; }
  .contact-grid { margin-top: 48px; gap: 36px; }
  .contact-heading { font-size: clamp(25px,7vw,31px); letter-spacing: -.04em; }
  .contact-text { margin-bottom: 24px; }
  .contact-form { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .contact-button { width: 100%; }
  .contact-side { grid-template-columns: minmax(0,1fr); }
  .map-panel { min-height: 300px; }
  .hours-panel { padding: 26px 22px; }
  .hours-panel h3 { font-size: 18px; }
}
@media (max-width: 380px) { .map-panel {min-height: 283px;}.contact-title { font-size: 27px; } .contact-heading { font-size: 24px; } .footer-socials a { width: 36px; height: 36px; } }

/* ============================================================
   RESPONSIVE HEADING SIZE REDUCTION (tablet + mobile)
   Applies to existing hero + story headings too
============================================================ */
@media (max-width: 1100px) { .hero-heading { font-size: clamp(36px,5.4vw,54px); } .story-heading { font-size: clamp(34px,4.6vw,46px); } .story-subheading { font-size: 19px; } }
@media (max-width: 767px) { .hero-heading { font-size: clamp(30px,7.6vw,40px); line-height: 1.15; } .story-heading { font-size: clamp(29px,7.4vw,37px); } .story-subheading { font-size: 17px; } }
@media (max-width: 480px) { .hero-heading { font-size: clamp(28px,8.2vw,34px); } .story-heading { font-size: clamp(27px,8vw,32px); } .story-subheading { font-size: 16px; } }
@media (max-width: 380px) { .hero-heading { font-size: 28px; } .story-heading { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .contact-card, .contact-button { transition: none; } }

/* ============================================================
   AUTOMOTIVE ATELIER | CUSTOMER DASHBOARD (user-dashboard.html)
============================================================ */
.dash-shell { display: grid; grid-template-columns: 276px minmax(0,1fr); min-height: 100vh; background: var(--auto-paper); }
.dash-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 22px; padding: 26px 20px 22px; overflow-y: auto; background: var(--auto-dark); color: #E9E5DB; z-index: 1001; }
.dash-sidebar .atelier-brand { color: #F8F5EF; padding: 0 0px;margin-left:-10px }
.dash-sidebar .brand-caption { color: #A9A59A; }
.dash-sidebar .brand-name span { color: var(--auto-primary-light); }
.dash-user { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid rgba(216,196,154,.25); background: rgba(255,255,255,.03); }
.dash-avatar { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 50%; background: var(--auto-primary); color: #171713; font-family: var(--auto-font-heading); font-weight: 800; font-size: 15px; }
.dash-user strong { display: block; font-family: var(--auto-font-heading); font-size: 14px; color: #FAF7F0; }
.dash-user small { color: var(--auto-primary-light); font-size: 11px; letter-spacing: .08em; }
.dash-nav { display: grid; gap: 2px; }
.dash-nav button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border: 0; border-inline-start: 2px solid transparent; background: transparent; color: #B5B0A5; font-family: var(--auto-font-body); font-size: 14px; font-weight: 600; text-align: start; cursor: pointer; transition: color var(--auto-transition), background var(--auto-transition), border-color var(--auto-transition); }
.dash-nav button i { width: 18px; text-align: center; font-size: 14px; }
.dash-nav button:hover { color: #FAF7F0; background: rgba(255,255,255,.04); }
.dash-nav button.is-active { color: var(--auto-primary-light); background: rgba(185,154,99,.12); border-inline-start-color: var(--auto-primary); }
.dash-nav .dash-badge { margin-inline-start: auto; min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--auto-primary); color: #171713; font-size: 11px; font-weight: 800; text-align: center; }
.dash-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(25,26,24,.55); opacity: 0; visibility: hidden; transition: opacity var(--auto-transition), visibility var(--auto-transition); }
.dash-backdrop.is-visible { opacity: 1; visibility: visible; }

.dash-main { min-width: 0; }
.dash-topbar { position: sticky; top: 0; z-index: 999; display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 0 clamp(18px,3vw,40px); background: var(--auto-header-bg); border-bottom: 1px solid var(--auto-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.dash-topbar .mobile-menu-toggle { flex: 0 0 auto; }
.dash-topbar-title { min-width: 0; margin-inline-end: auto; }
.dash-topbar-title span { display: block; color: var(--auto-primary-deep); font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.dash-topbar-title strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--auto-font-heading); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.dash-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dash-logout { min-height: 38px; display: inline-flex; align-items: center; gap: 9px; padding: 0 15px; border: 1px solid rgba(185,154,99,.52); background: rgba(185,154,99,.10); color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .025em; white-space: nowrap; transition: color .3s ease, background .3s ease, border-color .3s ease; }
.dash-logout:hover { color: #171713; background: var(--auto-primary); border-color: var(--auto-primary); }

.dash-content { width:100%; padding: 40px 2em 70px; }
.dash-panel { display: block; scroll-margin-top: 96px; }
.dash-panel + .dash-panel { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--auto-line); }
.dash-head { margin-bottom: 28px; }
.dash-kicker { display: block; margin-bottom: 10px; color: var(--auto-primary-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.dash-title { margin: 0; font-family: var(--auto-font-heading); font-size: clamp(32px,3.6vw,48px); font-weight: 800; letter-spacing: -.055em; line-height: 1.15; }
.dash-title span { color: var(--auto-primary); }
.dash-sub { max-width: 620px; margin: 10px 0 0; color: var(--auto-muted); font-size: 14px; line-height: 1.8; }

.dash-grid { display: grid; gap: 20px; }
.dash-grid.c4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.dash-grid.c3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.dash-grid.c2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.dash-grid.c21 { grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); }
.dash-box { min-width: 0; padding: 26px; background: var(--auto-surface); border: 1px solid var(--auto-line); transition: background var(--auto-transition); }
.dash-box + .dash-box, .dash-grid + .dash-box, .dash-box + .dash-grid, .dash-grid + .dash-grid { margin-top: 20px; }
.dash-grid > .dash-box { margin-top: 0 !important; }
.dash-box h3 { margin: 0 0 18px; font-family: var(--auto-font-heading); font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.dash-box h4 { margin: 0 0 4px; font-family: var(--auto-font-heading); font-size: 15px; font-weight: 800; }
.dash-box p { margin: 0; color: var(--auto-muted); font-size: 13px; line-height: 1.75; }
.dash-stat { position: relative; border-top: 2px solid var(--auto-primary); }
.dash-stat i { position: absolute; top: 22px; inset-inline-end: 22px; color: var(--auto-primary); font-size: 18px; }
.dash-stat span { display: block; color: var(--auto-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.dash-stat strong { display: block; margin-top: 8px; font-family: var(--auto-font-heading); font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.dash-stat small { color: var(--auto-primary-deep); font-size: 12px; }
.dash-list { margin: 0; padding: 0; list-style: none; }
.dash-list li { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--auto-line); font-size: 14px; }
.dash-list li:last-child { border-bottom: 0; }
.dash-list li small { display: block; color: var(--auto-muted); font-size: 12px; }
.dash-pill { display: inline-block; padding: 13px 11px; border: 1px solid rgba(185,154,99,.5); background: rgba(185,154,99,.12); color: var(--auto-primary-deep); font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.dash-pill.done { border-color: rgba(76,140,98,.5); background: rgba(76,140,98,.12); color: #3F7F57; }
.dash-pill.cancel { border-color: rgba(181,72,60,.5); background: rgba(181,72,60,.1); color: #B5483C; }
.dash-bar { height: 8px; margin: 12px 0 6px; background: var(--auto-line); overflow: hidden; }
.dash-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--auto-primary-deep),var(--auto-primary-light)); transition: width .6s ease; }
.dash-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid var(--auto-primary); background: var(--auto-primary); color: #171713; font-family: var(--auto-font-heading); font-size: 11px; font-weight: 800; letter-spacing: .08em; cursor: pointer; transition: background var(--auto-transition), color var(--auto-transition); }
.dash-btn:hover { background: var(--auto-primary-light); }
.dash-btn.ghost { background: transparent; color: var(--auto-ink); border-color: rgba(185,154,99,.55); }
.dash-btn.ghost:hover { background: var(--auto-primary); color: #171713; }
.dash-btn:disabled { opacity: .45; cursor: not-allowed; }
.dash-actions-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.dash-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.dash-filters button { padding: 8px 16px; border: 1px solid var(--auto-line); background: transparent; color: var(--auto-ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.dash-filters button.is-active { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }
.dash-table-wrap { overflow-x: auto; }
.dash-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.dash-table th { padding: 12px 14px; border-bottom: 1px solid var(--auto-line); color: var(--auto-muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-align: start; white-space: nowrap; }
.dash-table td { padding: 15px 14px; border-bottom: 1px solid var(--auto-line); }
.dash-table tr:last-child td { border-bottom: 0; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(104px,1fr)); gap: 10px; }
.slot { padding: 11px 6px; border: 1px solid var(--auto-line); background: transparent; color: var(--auto-ink); font-size: 13px; font-weight: 700; cursor: pointer; transition: background var(--auto-transition), border-color var(--auto-transition); }
.slot:hover:not(:disabled) { border-color: var(--auto-primary); }
.slot.is-selected { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }
.slot:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.dash-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 0; margin: 22px 0 6px; padding: 0; list-style: none; counter-reset: s; }
.dash-steps li { position: relative; text-align: center; padding-top: 46px; color: var(--auto-muted); font-size: 12px; font-weight: 700; }
.dash-steps li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; inset-inline-start: 50%; width: 34px; height: 34px; margin-inline-start: -17px; display: grid; place-items: center; border: 1px solid var(--auto-line); border-radius: 50%; background: var(--auto-surface); font-size: 13px; z-index: 1; }
.dash-steps li::after { content: ""; position: absolute; top: 16px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--auto-line); }
.dash-steps li:first-child::after { display: none; }
.dash-steps li.done, .dash-steps li.now { color: var(--auto-ink); }
.dash-steps li.done::before { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; content: "\2713"; }
.dash-steps li.done::after, .dash-steps li.now::after { background: var(--auto-primary); }
.dash-steps li.now::before { border-color: var(--auto-primary); color: var(--auto-primary-deep); box-shadow: 0 0 0 4px rgba(185,154,99,.22); }
.dash-job + .dash-job { margin-top: 20px; }
.dash-tier { display: flex; align-items: center; gap: 18px; }
.dash-points-big { font-family: var(--auto-font-heading); font-size: clamp(44px,5vw,64px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--auto-primary-deep); }
.dash-reward { display: flex; flex-direction: column; gap: 10px; }
.dash-reward .pts { color: var(--auto-primary-deep); font-family: var(--auto-font-heading); font-size: 22px; font-weight: 800; }
.dash-reward .dash-btn { margin-top: auto; align-self: flex-start; }
.dash-icon { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: var(--auto-primary-deep); }
.dash-faq details { border-bottom: 1px solid var(--auto-line); padding: 14px 0; }
.dash-faq summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.dash-faq details p { margin-top: 8px; }
.dash-toast { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 1100; max-width: min(380px,calc(100% - 32px)); padding: 14px 18px; border-inline-start: 3px solid var(--auto-primary); background: var(--auto-dark); color: #F1EEE7; font-size: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.3); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
.dash-toast.is-visible { opacity: 1; transform: none; }
.dash-empty { padding: 26px 0; text-align: center; color: var(--auto-muted); font-size: 14px; }

@media (max-width: 1280px) { .dash-grid.c4 { grid-template-columns: repeat(2,minmax(0,1fr)); } .dash-grid.c3 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 1120px) {
  .dash-shell { grid-template-columns: minmax(0,1fr); }
  .dash-sidebar { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(310px,86vw); transform: translateX(-105%); visibility: hidden; transition: transform .38s ease, visibility .38s ease; box-shadow: 20px 0 60px rgba(0,0,0,.2); }
  html[dir="rtl"] .dash-sidebar { transform: translateX(105%); }
  .dash-sidebar.is-open, html[dir="rtl"] .dash-sidebar.is-open { transform: none; visibility: visible; }
  .dash-grid.c21 { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 1023px) { .dash-title { font-size: clamp(28px,4.6vw,38px); } .dash-content { padding: 32px 3em 56px; } .dash-box { padding: 22px; }}
@media (max-width: 767px) {
  .dash-topbar { min-height: 68px; gap: 8px; }
  .dash-topbar-title strong { font-size: 15px; }
  .dash-topbar-title span { font-size: 9px; }
  .dash-actions { gap: 4px; }
  .dash-logout { min-height: 34px; padding: 0 10px; font-size: 11px; }
  .dash-logout span { display: none; }
  .dash-title { font-size: clamp(25px,7vw,31px); letter-spacing: -.04em; }
  .dash-sub { font-size: 13px; }
  .dash-content { padding: 26px 1.5em 48px; }
  .dash-grid { gap: 14px; }
  .dash-grid.c4, .dash-grid.c3, .dash-grid.c2 { grid-template-columns: minmax(0,1fr); }
  .dash-grid.c4.keep2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dash-box { padding: 18px; }
  .dash-box h3 { font-size: 16px; }
  .dash-stat strong { font-size: 26px; }
  .dash-steps { grid-template-columns: minmax(0,1fr); gap: 4px; margin-top: 10px; }
  .dash-steps li { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 0; text-align: start; }
  .dash-steps li::before { position: static; flex: 0 0 34px; margin: 0; }
  .dash-steps li::after { display: none; }
  .slot-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .dash-toast { bottom: 14px; inset-inline-end: 16px; }
}
@media (max-width: 380px) { .dash-title { font-size: 24px; } .dash-stat strong { font-size: 23px; } .dash-grid.c4.keep2 { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .dash-sidebar, .dash-toast, .dash-bar i { transition: none; } }

/* ============================================================
   AUTOMOTIVE ATELIER | ADMIN DASHBOARD (admin-dashboard.html)
   Reuses the .dash-* theme from the customer dashboard
============================================================ */
.dash-chart { display: flex; align-items: flex-end; gap: clamp(6px,1.4vw,14px); height: 200px; padding-top: 10px; }
.dash-chart > div { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; color: var(--auto-muted); font-size: 11px; font-weight: 700; }
.dash-chart i { display: block; width: 100%; min-height: 4px; background: linear-gradient(0deg,var(--auto-primary-deep),var(--auto-primary-light)); transition: height .6s ease; }
.dash-chart b { color: var(--auto-ink); font-size: 11px; }
.dash-select, .dash-input { min-height: 38px; max-width: 100%; padding: 0 10px; border: 1px solid var(--auto-line); border-radius: 0; background: var(--auto-surface); color: var(--auto-ink); font-family: var(--auto-font-body); font-size: 13px; }
.dash-input { width: 96px; }
.dash-select:focus, .dash-input:focus { outline: 0; border-color: var(--auto-primary); }
.dash-search { width: 100%; max-width: 360px; margin-bottom: 18px; }
.dash-stars { color: var(--auto-primary); letter-spacing: 2px; font-size: 13px; }
.dash-pill.warn { border-color: rgba(181,72,60,.5); background: rgba(181,72,60,.1); color: #B5483C; }
.dash-pill.off { border-color: var(--auto-line); background: transparent; color: var(--auto-muted); }
.dash-staff { display: flex; align-items: center; gap: 14px; }
.dash-staff .dash-avatar { flex: 0 0 44px; }
.dash-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.dash-inline .form-field { flex: 1 1 180px; }
@media (max-width: 767px) { .dash-chart { height: 160px; } .dash-chart > div { font-size: 10px; } .dash-inline .form-field { flex-basis: 100%; } .dash-input { width: 78px; } }

/* ============================================================
   AUTOMOTIVE ATELIER | PRICING PAGE (pricing.html)
============================================================ */
.nav-link.is-current { color: var(--auto-primary-deep); }
.nav-link.is-current::after { width: 100%; }
.pr-section { padding: 90px 5em; background: var(--auto-paper); overflow: hidden; }
.pr-section.alt { background: var(--auto-surface); }
.pr-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 2em; box-sizing: border-box; }
.pr-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.pr-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--auto-primary-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.pr-kicker::before, .pr-kicker::after { content: ""; width: 28px; height: 1px; background: var(--auto-primary); }
.pr-title { margin: 0 0 14px; font-family: var(--auto-font-heading); font-size: clamp(34px,4vw,54px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; text-wrap: balance; }
.pr-title span { color: var(--auto-primary); }
.pr-text { margin: 0; color: var(--auto-muted); font-size: 14px; line-height: 1.9; }

/* Hero */
.pr-hero-stats { display: flex; flex-wrap: wrap; gap: 14px 34px; margin-top: 34px; }
.pr-hero-stats div { padding-inline-start: 16px; border-inline-start: 2px solid var(--auto-primary); }
.pr-hero-stats strong { display: block; font-family: var(--auto-font-heading); font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: #FCFAF5; }
.pr-hero-stats span { color: rgba(252,250,245,.7); font-size: 12px; letter-spacing: .06em; }
.pr-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pr-btn { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 24px; border: 1px solid var(--auto-primary); background: var(--auto-primary); color: #171713; font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .08em; cursor: pointer; transition: background var(--auto-transition), color var(--auto-transition), gap var(--auto-transition); }
.pr-btn:hover { background: var(--auto-primary-light); gap: 22px; }
.pr-btn.ghost { background: transparent; color: var(--auto-ink); border-color: rgba(185,154,99,.55); }
.pr-btn.ghost:hover { background: var(--auto-primary); color: #171713; }
.contact-banner .pr-btn.ghost { color: #FCFAF5; border-color: rgba(252,250,245,.45); }
.contact-banner .pr-btn.ghost:hover { color: #171713; }

/* Size selector */
.pr-sizes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 40px; }
.pr-sizes button { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border: 1px solid var(--auto-line); background: var(--auto-surface); color: var(--auto-ink); font-family: var(--auto-font-body); font-size: 13px; font-weight: 700; cursor: pointer; transition: background var(--auto-transition), border-color var(--auto-transition), color var(--auto-transition); }
.pr-section.alt .pr-sizes button { background: var(--auto-paper); }
.pr-sizes button:hover { border-color: var(--auto-primary); }
.pr-sizes button.is-active { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }

/* Cards */
.pr-grid { display: grid; gap: 22px; }
.pr-grid.c3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.pr-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px 28px; background: var(--auto-surface); border: 1px solid var(--auto-line); border-top: 2px solid transparent; transition: transform var(--auto-transition), border-color var(--auto-transition), box-shadow var(--auto-transition), background var(--auto-transition); }
.pr-section.alt .pr-card { background: var(--auto-paper); }
.pr-card:hover { transform: translateY(-6px); border-top-color: var(--auto-primary); box-shadow: 0 22px 44px rgba(20,20,18,.1); }
.pr-card.featured { border-color: var(--auto-primary); border-top-width: 2px; box-shadow: 0 18px 44px rgba(185,154,99,.18); }
.pr-badge { position: absolute; top: -13px; inset-inline-start: 28px; padding: 5px 14px; background: var(--auto-primary); color: #171713; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.pr-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: var(--auto-primary-deep); font-size: 17px; }
.pr-card h3 { margin: 0 0 6px; font-family: var(--auto-font-heading); font-size: 20px; font-weight: 800; letter-spacing: -.035em; }
.pr-card .pr-sub { margin: 0 0 20px; color: var(--auto-muted); font-size: 13px; line-height: 1.7; }
.pr-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; font-family: var(--auto-font-heading); color: var(--auto-ink); }
.pr-price small { color: var(--auto-muted); font-size: 12px; font-weight: 600; }
.pr-price b { font-size: clamp(36px,3.4vw,46px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.pr-price em { font-style: normal; color: var(--auto-primary-deep); font-size: 22px; font-weight: 800; }
.pr-meta { margin: 0 0 22px; color: var(--auto-primary-deep); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.pr-list { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 11px; }
.pr-list li { display: flex; gap: 11px; color: var(--auto-muted); font-size: 13px; line-height: 1.6; }
.pr-list li i { margin-top: 4px; color: var(--auto-primary); font-size: 11px; }
.pr-card .pr-btn { margin-top: auto; }

/* Interior / Exterior */
.pr-duo { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.pr-panel { padding: 34px 30px; background: var(--auto-surface); border: 1px solid var(--auto-line); }
.pr-section.alt .pr-panel { background: var(--auto-paper); }
.pr-panel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.pr-panel-head h3 { margin: 0; font-family: var(--auto-font-heading); font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.pr-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--auto-line); }
.pr-row:last-of-type { border-bottom: 0; }
.pr-row h4 { margin: 0 0 4px; font-family: var(--auto-font-heading); font-size: 16px; font-weight: 800; }
.pr-row p { margin: 0; color: var(--auto-muted); font-size: 13px; line-height: 1.7; }
.pr-row .pr-price { flex: 0 0 auto; margin: 0; }
.pr-row .pr-price b { font-size: 26px; }

/* Comparison */
.pr-table-wrap { overflow-x: auto; border: 1px solid var(--auto-line); background: var(--auto-paper); -webkit-overflow-scrolling: touch; }
.pr-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.pr-table th, .pr-table td { padding: 17px 20px; border-bottom: 1px solid var(--auto-line); text-align: center; }
.pr-table th:first-child, .pr-table td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; min-width: 190px; background: var(--auto-paper); text-align: start; font-weight: 700; }
.pr-table thead th { font-family: var(--auto-font-heading); font-size: 15px; font-weight: 800; background: var(--auto-surface); }
.pr-table thead th:first-child { background: var(--auto-surface); }
.pr-table thead small { display: block; margin-top: 3px; color: var(--auto-primary-deep); font-size: 12px; font-weight: 700; }
.pr-table th.hl, .pr-table td.hl { background: rgba(185,154,99,.1); }
.pr-table tbody tr { transition: background var(--auto-transition); }
.pr-table tbody tr:hover td { background: rgba(185,154,99,.07); }
.pr-table tbody tr:last-child td { border-bottom: 0; }
.pr-yes { color: var(--auto-primary-deep); }
.pr-no { color: var(--auto-muted); opacity: .5; }

/* Add-ons */
.pr-addons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.pr-addon { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 24px 22px; background: var(--auto-surface); border: 1px solid var(--auto-line); text-align: start; color: var(--auto-ink); font-family: var(--auto-font-body); cursor: pointer; transition: border-color var(--auto-transition), background var(--auto-transition), transform var(--auto-transition); }
.pr-section.alt .pr-addon { background: var(--auto-paper); }
.pr-addon:hover { transform: translateY(-4px); border-color: var(--auto-primary); }
.pr-addon i.main { margin-bottom: 8px; color: var(--auto-primary-deep); font-size: 22px; }
.pr-addon strong { font-family: var(--auto-font-heading); font-size: 15px; font-weight: 800; }
.pr-addon span { color: var(--auto-muted); font-size: 12px; line-height: 1.6; }
.pr-addon em { margin-top: 6px; font-style: normal; font-family: var(--auto-font-heading); font-weight: 800; color: var(--auto-primary-deep); }
.pr-addon .tick { position: absolute; top: 14px; inset-inline-end: 14px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--auto-line); border-radius: 50%; font-size: 11px; color: transparent; transition: background var(--auto-transition), color var(--auto-transition), border-color var(--auto-transition); }
.pr-addon.is-selected { border-color: var(--auto-primary); background: rgba(185,154,99,.1); }
.pr-addon.is-selected .tick { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }
.pr-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 28px; padding: 24px 28px; background: var(--auto-dark); color: #F1EEE7; }
.pr-total strong { font-family: var(--auto-font-heading); font-size: 30px; font-weight: 800; letter-spacing: -.04em; color: var(--auto-primary-light); }
.pr-total span {font-size: 12px; }

/* FAQ */
.pr-faq { max-width: 860px; margin: auto; }
.pr-faq-item { border-bottom: 1px solid var(--auto-line); }
.pr-faq-item:first-child { border-top: 1px solid var(--auto-line); }
.pr-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; border: 0; background: transparent; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 17px; font-weight: 700; letter-spacing: -.02em; text-align: start; cursor: pointer; }
.pr-faq-q i { flex: 0 0 auto; color: var(--auto-primary-deep); transition: transform var(--auto-transition); }
.pr-faq-item.is-open .pr-faq-q i { transform: rotate(45deg); }
.pr-faq-a { height: 0; overflow: hidden; }
.pr-faq-a p { margin: 0; padding: 0 40px 22px 0; color: var(--auto-muted); font-size: 14px; line-height: 1.9; }

/* CTA */
.pr-cta { position: relative; overflow: hidden; padding: 100px 0; background: var(--auto-dark) linear-gradient(90deg,rgba(14,15,13,.93),rgba(14,15,13,.78)),url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1800&q=70") center/cover; color: #FCFAF5; text-align: center; }
.pr-cta .pr-title { color: #000000; }
.pr-cta .pr-title span { color: var(--auto-primary-light); }
.pr-cta .pr-text { max-width: 580px; margin: 0 auto; }
.pr-cta .pr-kicker { color: var(--auto-primary-light); }
.pr-cta .pr-kicker::before, .pr-cta .pr-kicker::after { background: var(--auto-primary-light); }
.pr-cta .pr-hero-actions { justify-content: center; margin-top: 34px; }
.pr-cta .pr-btn.ghost:hover { color: #171713; }
.pr-cta-ring { position: absolute; width: 420px; height: 420px; border: 1px solid rgba(216,196,154,.25); border-radius: 50%; pointer-events: none; }
.pr-cta-ring.a { top: -150px; inset-inline-start: -110px; }
.pr-cta-ring.b { bottom: -190px; inset-inline-end: -120px; width: 520px; height: 520px; }

/* Tablet */
@media (max-width: 1100px) {
  .pr-wrap { padding-inline: 2.5em; }
  .pr-section { padding: 74px 0; overflow: hidden; }
  .pr-grid.c3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pr-grid.c3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pr-duo { grid-template-columns: minmax(0,1fr); }
  .pr-addons { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1023px) { .pr-title { font-size: clamp(30px,4.6vw,40px); } .pr-head { margin-bottom: 38px; } }
/* Mobile */
@media (max-width: 767px) {
  .pr-wrap { padding-inline: 1.25em; }
  .pr-section { padding: 56px 0; overflow: hidden; }
  .pr-title { font-size: clamp(26px,7.4vw,32px); letter-spacing: -.045em; }
  .pr-head { margin-bottom: 30px; }
  .pr-text { font-size: 13px; }
  .pr-grid.c3 { grid-template-columns: minmax(0,1fr); gap: 26px; }
  .pr-card { padding: 26px 22px; }
  .pr-panel { padding: 24px 20px; }
  .pr-panel-head h3 { font-size: 19px; }
  .pr-row { flex-direction: column; gap: 8px; }
  .pr-sizes { gap: 6px; } .pr-sizes button { padding: 9px 13px; font-size: 12px; }
  .pr-addons { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .pr-total { padding: 20px; } .pr-total strong { font-size: 25px; } .pr-total .pr-btn { width: 100%; }
  .pr-faq-q { padding: 18px 0; font-size: 15px; } .pr-faq-a p { padding-inline-end: 0; }
  .pr-cta { padding: 66px 0; }
  .pr-hero-stats { gap: 16px 24px; } .pr-hero-stats strong { font-size: 22px; }
  .pr-hero-actions .pr-btn { flex: 1 1 100%; }
  .pr-kicker { font-size: 10px; letter-spacing: .12em; } .pr-kicker::before, .pr-kicker::after { width: 18px; }
}
@media (max-width: 380px) { .pr-title { font-size: 25px; } }
@media (prefers-reduced-motion: reduce) { .pr-card, .pr-addon, .pr-btn, .pr-faq-q i { transition: none; } }


/* ============================================================
   AUTOMOTIVE ATELIER | GALLERY PAGE (gallery.html)
   Organic layout: arches, circles, ovals & pills | GSAP + AOS
============================================================ */
.gl-page { overflow-x: clip; }
.gl-section { position: relative; padding: clamp(72px,7vw,128px) 5em; background: var(--auto-paper); overflow: hidden; }
.gl-section.alt { background: var(--auto-surface); }
.gl-dark { --auto-ink: #FCFAF5; --auto-muted: rgba(252,250,245,.72); --auto-line: rgba(252,250,245,.16); background: var(--auto-dark); color: #FCFAF5; }
.gl-wrap { position: relative; z-index: 2; width:100% }
.gl-head { max-width: 720px; margin-bottom: clamp(36px,5vw,64px); }
.gl-head.center { margin-inline: auto; text-align: center; }
.gl-head.center .gl-kicker { justify-content: center; }
.gl-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--auto-primary-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.gl-kicker::before { content: ""; width: 28px; height: 1px; background: var(--auto-primary); }
.gl-head.center .gl-kicker::after { content: ""; width: 28px; height: 1px; background: var(--auto-primary); }
.gl-dark .gl-kicker { color: var(--auto-primary-light); }
.gl-title { margin: 0 0 16px; color: var(--auto-ink); font-family: var(--auto-font-heading);  font-size: clamp(34px,4vw,54px); font-weight: 800; letter-spacing: -.055em; line-height: 1.5; text-wrap: balance; }
.gl-title span { color: var(--auto-primary); font-weight: 500; }
.gl-text { margin: 0; color: var(--auto-muted); font-size: 14.5px; line-height: 1.9; }
.gl-split { display: flex; align-items: center; gap: clamp(40px,7vw,110px); }
.gl-glow { position: absolute; z-index: 0; width: 620px; height: 620px; top: -160px; inset-inline-start: -200px; border-radius: 50%; background: radial-gradient(circle,rgba(185,154,99,.16),transparent 68%); pointer-events: none; }
.gl-glow.right { inset-inline-start: auto; inset-inline-end: -220px; top: auto; bottom: -200px; }
.gl-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 30px; color: var(--auto-primary-deep); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--auto-primary); padding-bottom: 6px; transition: gap var(--auto-transition), color var(--auto-transition); }
.gl-link:hover { gap: 22px; color: var(--auto-ink); }
.gl-arrow { width: 46px; height: 46px; display: inline-grid; place-items: center; flex: 0 0 46px; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; background: transparent; color: var(--auto-ink); font-size: 12px; cursor: pointer; transition: background var(--auto-transition), color var(--auto-transition), transform var(--auto-transition); }
.gl-arrow:hover { background: var(--auto-primary); color: #171713; transform: translateY(-2px); }
.gl-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.gl-actions.center { justify-content: center; }
.gl-page img { display: block; width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg,#2a2b27,#4a4538); }

/* ---------- 1. HERO ---------- */
.gl-hero { padding: clamp(40px,5vw,64px) 5em 0; min-height: clamp(700px,calc(100svh - 130px),880px); display: flex; flex-direction: column; justify-content: space-between; isolation: isolate; }
.gl-hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 70% at 78% 42%,rgba(185,154,99,.22),transparent 70%), radial-gradient(40% 50% at 6% 92%,rgba(185,154,99,.10),transparent 70%), var(--auto-dark); }
.gl-orbit-line { position: absolute; z-index: -1; border: 1px solid rgba(216,196,154,.16); border-radius: 50%; pointer-events: none; }
.gl-orbit-line.a { width: 780px; height: 780px; top: -240px; inset-inline-end: -170px; }
.gl-orbit-line.b { width: 480px; height: 480px; bottom: -210px; inset-inline-start: 28%; }
.gl-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-block: 24px 40px; }
.gl-hero-copy { flex: 1 1 52%; max-width: 700px; }
.gl-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: rgba(252,250,245,.65); font-size: 12px; letter-spacing: .06em; }
.gl-crumbs i { font-size: 8px; color: var(--auto-primary-light); }
.gl-crumbs a:hover { color: var(--auto-primary-light); }
.gl-crumbs span { color: var(--auto-primary-light); }
.gl-hero-title { margin: 0; color: #FCFAF5; font-family: var(--auto-font-heading); font-size: clamp(42px,5.6vw,86px); font-weight: 700; letter-spacing: -.06em; line-height: 1.12; text-wrap: balance; }
.gl-hero-title span { color: var(--auto-primary-light); font-weight: 500; }
.gl-hero-text { max-width: 560px; margin: 24px 0 0; color: rgba(252,250,245,.8); font-size: 15px; line-height: 1.9; }
.gl-stats { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 40px; }
.gl-stats > div { padding-inline-start: 16px; border-inline-start: 2px solid var(--auto-primary); }
.gl-stats strong { display: block; color: #FCFAF5; font-family: var(--auto-font-heading); font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.gl-stats > div > span { color: rgba(252,250,245,.68); font-size: 12px; letter-spacing: .06em; }
.gl-hero-visual { position: relative; flex: 0 0 min(44%,590px); height: clamp(470px,46vw,640px); }
.gl-arch-wrap { position: absolute; top: 0; inset-inline-end: 4%; width: 64%; height: 100%; }
.gl-arch-wrap::before { content: ""; position: absolute; inset: -16px; border: 1px solid rgba(216,196,154,.4); border-radius: 999px 999px 56px 56px; }
.gl-arch { position: absolute; inset: 0; overflow: hidden; border-radius: 999px 999px 44px 44px; box-shadow: 0 40px 90px rgba(0,0,0,.45); }
.gl-arch img { transform: scale(1.12); }
.gl-hero-circle { position: absolute; border-radius: 50%; overflow: hidden; border: 6px solid var(--auto-dark); box-shadow: 0 24px 54px rgba(0,0,0,.45); }
.gl-hero-circle.c1 { width: 42%; aspect-ratio: 1; bottom: 3%; inset-inline-start: 0; }
.gl-hero-circle.c2 { width: 21%; aspect-ratio: 1; top: 9%; inset-inline-start: 7%; border-width: 4px; }
.gl-badge { position: absolute; width: 124px; height: 124px; top: 48%; inset-inline-end: -6px; display: grid; place-items: center; border-radius: 50%; background: var(--auto-primary); color: #171713; box-shadow: 0 16px 40px rgba(185,154,99,.35); }
.gl-badge-spin { position: absolute; inset: 0; width: 100%; height: 100%; }
.gl-badge i { font-size: 20px; }
.gl-drop, .gl-bead { position: absolute; display: block; }
.gl-drop i, .gl-bead i { display: block; width: 100%; height: 100%; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: radial-gradient(circle at 30% 28%,rgba(255,255,255,.95),rgba(216,196,154,.45) 40%,rgba(185,154,99,.18) 72%); box-shadow: inset -3px -4px 8px rgba(185,154,99,.35), 0 8px 18px rgba(0,0,0,.25); }
.gl-drop.d1 { width: 28px; height: 28px; top: 4%; inset-inline-end: 0; }
.gl-drop.d2 { width: 18px; height: 18px; top: 36%; inset-inline-start: 2%; }
.gl-drop.d3 { width: 22px; height: 22px; bottom: 10%; inset-inline-end: 12%; }
.gl-jump { display: flex; align-items: center; gap: 28px; padding-block: 22px; border-top: 1px solid rgba(252,250,245,.16);justify-content: center; }
.gl-jump-label { flex: 0 0 auto; color: var(--auto-primary-light); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.gl-jump-links { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.gl-jump-links::-webkit-scrollbar { display: none; }
.gl-jump-links a { flex: 0 0 auto; padding: 9px 18px; border: 1px solid rgba(252,250,245,.22); border-radius: 999px; color: rgba(252,250,245,.85); font-size: 12.5px; font-weight: 600; transition: background var(--auto-transition), color var(--auto-transition), border-color var(--auto-transition); }
.gl-jump-links a:hover { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }

/* ---------- 2. BEFORE & AFTER ---------- */
.gl-ba-layout { display: flex; align-items: center; gap: clamp(36px,7vw,110px); }
.gl-ba-tabs { flex: 1 1 42%; margin: 0; padding: 0; list-style: none; counter-reset: ba; }
.gl-ba-tab { position: relative; width: 100%; display: flex; align-items: center; gap: 24px; padding: 26px 0; border: 0; border-bottom: 1px solid var(--auto-line); background: transparent; color: var(--auto-muted); text-align: start; cursor: pointer; transition: color var(--auto-transition), padding var(--auto-transition); }
.gl-ba-tab::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 100%; height: 2px; background: var(--auto-primary); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.2,.65,.25,1); }
.gl-ba-tab.is-active::after { transform: scaleX(1); }
.gl-ba-num { flex: 0 0 auto; font-family: var(--auto-font-heading); font-size: clamp(30px,3.4vw,46px); font-weight: 800; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--auto-primary); transition: color var(--auto-transition); }
.gl-ba-tab.is-active .gl-ba-num { color: var(--auto-primary); }
.gl-ba-tab strong { display: block; font-family: var(--auto-font-heading); font-size: clamp(18px,1.8vw,24px); font-weight: 700; letter-spacing: -.03em; line-height: 1.25; }
.gl-ba-tab small { display: block; margin-top: 4px; font-size: 13px; }
.gl-ba-tab.is-active, .gl-ba-tab:hover { color: var(--auto-ink); }
.gl-ba-tab:hover { padding-inline-start: 8px; }
.gl-ba-stage { position: relative; flex: 1 1 50%; max-width: 560px; }
.gl-ba-stage::before { content: ""; position: absolute; top: -16px; left: 16px; right: -16px; aspect-ratio: 4/5.1; border: 1px solid rgba(185,154,99,.45); border-radius: 999px 999px 48px 48px; pointer-events: none; }
.gl-ba { position: relative; direction: ltr; aspect-ratio: 4/5.1; overflow: hidden; border-radius: 999px 999px 40px 40px; background: #20211f; box-shadow: 0 34px 80px rgba(25,26,24,.28); user-select: none; touch-action: pan-y; }
.gl-ba img { position: absolute; inset: 0; }
.gl-ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos,50%)) 0 0); }
.gl-ba-before img { filter: grayscale(.6) contrast(.78) brightness(.66) sepia(.35) blur(.4px); }
.gl-grime { position: absolute; inset: 0; background: radial-gradient(circle at 18% 28%,rgba(70,56,36,.55),transparent 34%), radial-gradient(circle at 72% 64%,rgba(40,34,26,.5),transparent 30%), radial-gradient(circle at 40% 85%,rgba(80,66,44,.4),transparent 28%), repeating-linear-gradient(118deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px), repeating-linear-gradient(32deg,rgba(0,0,0,.12) 0 1px,transparent 1px 13px); mix-blend-mode: multiply; }
.gl-ba-line { position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--pos,50%); width: 2px; margin-left: -1px; background: linear-gradient(180deg,transparent,var(--auto-primary-light) 12%,var(--auto-primary-light) 88%,transparent); pointer-events: none; }
.gl-ba-handle { position: absolute; z-index: 4; top: 58%; left: var(--pos,50%); width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: var(--auto-primary); color: #171713; font-size: 15px; transform: translate(-50%,-50%); box-shadow: 0 10px 28px rgba(0,0,0,.4); pointer-events: none; }
.gl-ba-handle::after { content: ""; position: absolute; inset: -9px; border: 1px solid var(--auto-primary-light); border-radius: 50%; animation: glPulse 2.2s ease-out infinite; }
@keyframes glPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
.gl-ba-tag { position: absolute; z-index: 3; bottom: 38px; padding: 7px 15px; border-radius: 999px; background: rgba(15,16,14,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #FCFAF5; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; pointer-events: none; }
.gl-ba-tag.before { left: 12%; }
.gl-ba-tag.after { right: 12%; background: rgba(185,154,99,.9); color: #171713; }
.gl-ba-range { position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.gl-ba-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.gl-ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 56px; height: 800px; background: transparent; }
.gl-ba-range::-moz-range-track { height: 100%; background: transparent; }
.gl-ba-range::-moz-range-thumb { width: 56px; height: 800px; border: 0; background: transparent; }
.gl-ba-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; padding-inline: 12px; }
.gl-ba-caption strong { display: block; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.gl-ba-caption span { color: var(--auto-muted); font-size: 13px; }
.gl-ba-caption .gl-ba-hint { flex: 0 0 auto; color: var(--auto-primary-deep); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- 3. EXTERIOR & INTERIOR REEL ---------- */
.gl-filter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 auto 8px; }
.gl-filter button { padding: 11px 24px; border: 1px solid rgba(185,154,99,.45); border-radius: 999px; background: transparent; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .08em; cursor: pointer; transition: background var(--auto-transition), color var(--auto-transition), border-color var(--auto-transition); }
.gl-filter button:hover { border-color: var(--auto-primary); }
.gl-filter button.is-active { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }
.gl-reel-wrap { --u: 300px; margin-top: 10px; }
.gl-reel { direction: ltr; display: flex; align-items: flex-start; gap: clamp(26px,3vw,48px); overflow-x: auto;scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; outline: none; }
.gl-reel::-webkit-scrollbar { display: none; }
.gl-reel.is-dragging { scroll-snap-type: none; cursor: grabbing; }
.gl-reel-item { flex: 0 0 auto; margin: 0; scroll-snap-align: center; cursor: zoom-in; text-align: center; }
.gl-reel-item.is-hidden { display: none; }
.gl-shape { position: relative; overflow: hidden; background: #2a2b27; box-shadow: 0 26px 56px rgba(25,26,24,.18); transition: box-shadow .5s ease, transform .5s ease; }
.gl-shape img { transition: transform 1s cubic-bezier(.2,.65,.25,1); }
.gl-reel-item:hover .gl-shape img { transform: scale(1.09); }
.gl-reel-item:hover .gl-shape { box-shadow: 0 34px 70px rgba(185,154,99,.3); transform: translateY(-6px); }
.s-arch .gl-shape { width: var(--u); height: calc(var(--u)*1.5); border-radius: 999px 999px 28px 28px; }
.s-circle .gl-shape { width: var(--u); height: var(--u); border-radius: 50%; }
.s-leaf .gl-shape { width: calc(var(--u)*1.05); height: calc(var(--u)*1.3); border-radius: calc(var(--u)*.55) 0 calc(var(--u)*.55) 0; }
.s-pill .gl-shape { width: calc(var(--u)*.78); height: calc(var(--u)*1.55); border-radius: 999px; }
.s-oval .gl-shape { width: calc(var(--u)*1.35); height: calc(var(--u)*.95); border-radius: 50%; }
.gl-reel-item.o1 { margin-top: 0; } .gl-reel-item.o2 { margin-top: 64px; } .gl-reel-item.o3 { margin-top: 28px; }
.gl-reel-item figcaption { margin-top: 20px; }
.gl-reel-item em { display: block; color: var(--auto-primary-deep); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .18em; }
.gl-reel-item strong { display: block; margin-top: 4px; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.025em; }
.gl-reel-item figcaption span { color: var(--auto-muted); font-size: 13px; }
.gl-reel-ui { display: flex; align-items: center; gap: 28px; }
.gl-reel-bar { flex: 1; height: 1px; background: var(--auto-line); }
.gl-reel-bar span { display: block; width: 20%; height: 3px; margin-top: -1px; border-radius: 3px; background: var(--auto-primary); transition: width .2s linear; }
.gl-reel-arrows { display: flex; gap: 10px; }

/* ---------- 4. CERAMIC ---------- */
.gl-ceramic-visual { position: relative; flex: 0 0 min(46%,560px); aspect-ratio: 1; }
.gl-ceramic-spin { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--auto-primary-deep); }
.gl-ceramic-disc { position: absolute; inset: 11%; border-radius: 50%; overflow: hidden; box-shadow: 0 40px 90px rgba(25,26,24,.28); }
.gl-ceramic-disc img { transform: scale(1.18); }
.gl-ceramic-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(130deg,rgba(255,255,255,.22),transparent 38%); pointer-events: none; }
.gl-ceramic-mini { position: absolute; bottom: 4%; inset-inline-end: 0; width: 36%; aspect-ratio: 1; border: 6px solid var(--auto-paper); border-radius: 50%; overflow: hidden; box-shadow: 0 20px 44px rgba(25,26,24,.3); }
.gl-ceramic-mini span { position: absolute; inset-inline: 0; bottom: 0; padding: 22px 0 14px; background: linear-gradient(0deg,rgba(10,11,9,.82),transparent); color: #FCFAF5; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-align: center; text-transform: uppercase; }
.gl-bead.b1 { width: 34px; height: 34px; top: 16%; inset-inline-start: 12%; }
.gl-bead.b2 { width: 20px; height: 20px; top: 34%; inset-inline-start: 4%; }
.gl-bead.b3 { width: 28px; height: 28px; top: 10%; inset-inline-end: 22%; }
.gl-bead.b4 { width: 16px; height: 16px; top: 52%; inset-inline-end: 8%; }
.gl-bead.b5 { width: 24px; height: 24px; bottom: 16%; inset-inline-start: 14%; }
.gl-ceramic-copy { flex: 1 1 50%; min-width: 0; }
.gl-rings { display: flex; flex-wrap: wrap; gap: 20px 34px; margin: 38px 0 36px; }
.gl-ring-stat { position: relative; width: 124px; text-align: center; }
.gl-ring-stat svg { width: 124px; height: 124px; transform: rotate(-90deg); }
.gl-ring-stat circle { fill: none; stroke-width: 3; }
.gl-ring-stat .trk { stroke: var(--auto-line); }
.gl-ring-stat .fill { stroke: var(--auto-primary); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.gl-ring-stat b { position: absolute; top: 0; left: 0; width: 124px; height: 124px; display: flex; align-items: center; justify-content: center; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.gl-ring-stat small { display: block; margin-top: 10px; color: var(--auto-muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gl-layers { position: relative; margin: 0; padding: 0; list-style: none; }
.gl-layers::before { content: ""; position: absolute; top: 12px; bottom: 12px; inset-inline-start: 6px; width: 1px; background: linear-gradient(var(--auto-primary),rgba(185,154,99,.15)); }
.gl-layers li { position: relative; padding: 0 0 22px 0; padding-inline-start: 34px; }
.gl-layers li::before { content: ""; position: absolute; top: 5px; inset-inline-start: 0; width: 13px; height: 13px; border: 2px solid var(--auto-primary); border-radius: 50%; background: var(--auto-paper); }
.gl-layers strong { display: block; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.gl-layers span { color: var(--auto-muted); font-size: 13.5px; line-height: 1.7; }

/* ---------- 5. LUXURY ACCORDION ---------- */
.gl-lux { display: flex; gap: 14px; height: clamp(480px,66vh,620px); }
.gl-lux-item { position: relative; flex: 1 1 0; min-width: 0; padding: 0; border: 0; border-radius: clamp(120px,22vw,300px); overflow: hidden; background: #20211f; color: #FCFAF5; text-align: start; cursor: pointer; transition: flex-grow .8s cubic-bezier(.2,.65,.25,1), box-shadow .5s ease; }
.gl-lux-item.is-active { flex-grow: 5.2; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(216,196,154,.4); }
.gl-lux-item img { position: absolute; inset: 0; filter: brightness(.55) saturate(.8); transform: scale(1.1); transition: filter .8s ease, transform 1.2s cubic-bezier(.2,.65,.25,1); }
.gl-lux-item.is-active img { filter: none; transform: scale(1); }
.gl-lux-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,rgba(10,11,9,.82) 0%,transparent 55%); pointer-events: none; }
.gl-lux-label { position: absolute; z-index: 2; bottom: 44px; left: 50%; writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-family: var(--auto-font-heading); font-size: 13px; font-weight: 800; letter-spacing: .24em; white-space: nowrap; transition: opacity .35s ease; }
.gl-lux-item.is-active .gl-lux-label { opacity: 0; }
.gl-lux-body { position: absolute; z-index: 2; inset-inline: 0; bottom: 0; padding: 0 clamp(60px,7vw,120px) 64px; opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .6s ease; }
.gl-lux-item.is-active .gl-lux-body { opacity: 1; transform: none; transition-delay: .35s; }
.gl-lux-body em { display: block; margin-bottom: 8px; color: var(--auto-primary-light); font-size: 11px; font-style: normal; font-weight: 800; letter-spacing: .18em; }
.gl-lux-body strong { display: block; font-family: var(--auto-font-heading); font-size: clamp(22px,2.6vw,36px); font-weight: 700; letter-spacing: -.04em; line-height: 1.2; }
.gl-lux-body small { display: block; margin-top: 8px; color: rgba(252,250,245,.78); font-size: 13px; }

/* ---------- 6. PROCESS ---------- */
.gl-process { position: relative; max-width: 1080px; margin-inline: auto; }
.gl-process-line { position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--auto-line); }
.gl-process-line span { display: block; width: 100%; height: 100%; background: linear-gradient(var(--auto-primary),var(--auto-primary-light)); transform-origin: top; }
.gl-step { position: relative; display: flex; align-items: center; margin-bottom: clamp(48px,6vw,84px); }
.gl-step:last-child { margin-bottom: 0; }
.gl-step:nth-of-type(even) { flex-direction: row-reverse; }
.gl-step-media, .gl-step-body { flex: 0 0 50%; max-width: 50%; }
.gl-step-circle { width: min(270px,76%); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; overflow: hidden; box-shadow: 0 26px 56px rgba(25,26,24,.2); border: 6px solid var(--auto-surface); outline: 1px solid rgba(185,154,99,.5); outline-offset: 8px; }
.gl-step-circle img { transition: transform 1s cubic-bezier(.2,.65,.25,1); }
.gl-step:hover .gl-step-circle img { transform: scale(1.1); }
.gl-step-node { position: absolute; z-index: 3; top: 50%; left: 50%; width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid var(--auto-primary); border-radius: 50%; background: var(--auto-surface); color: var(--auto-primary-deep); font-family: var(--auto-font-heading); font-size: 14px; font-weight: 800; transform: translate(-50%,-50%); transition: background .5s ease, color .5s ease, box-shadow .5s ease; }
.gl-step-node.is-lit { background: var(--auto-primary); color: #171713; box-shadow: 0 0 0 8px rgba(185,154,99,.18); }
.gl-step-body { padding-inline: clamp(36px,5vw,84px); }
.gl-step-body small { color: var(--auto-primary-deep); font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.gl-step-body h3 { margin: 8px 0 10px; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: clamp(22px,2.4vw,32px); font-weight: 800; letter-spacing: -.045em; line-height: 1.2; }
.gl-step-body p { margin: 0; color: var(--auto-muted); font-size: 14px; line-height: 1.85; }

/* ---------- 7. STUDIO ---------- */
.gl-marquee { overflow: hidden; margin-bottom: clamp(48px,6vw,84px); direction: ltr; }
.gl-marquee-track { display: flex; align-items: center; gap: clamp(24px,4vw,56px); width: max-content; padding-inline-end: clamp(24px,4vw,56px); font-family: var(--auto-font-heading); font-size: clamp(60px,3vw,168px); font-weight: 800; letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.gl-marquee-track span { color: transparent; -webkit-text-stroke: 1px rgba(185,154,99,.6); }
.gl-marquee-track b { color: var(--auto-primary); font-size: .4em; font-weight: 400; }
.gl-collage { position: relative; flex: 0 0 min(48%,620px); height: clamp(440px,48vw,620px); }
.gl-collage-ring { position: absolute; inset: 4% 2% 10% 8%; border: 1px dashed rgba(185,154,99,.55); border-radius: 50%; }
.gl-collage-oval { position: absolute; top: 0; inset-inline-start: 0; width: 76%; height: 80%; border-radius: 50%; overflow: hidden; box-shadow: 0 36px 80px rgba(25,26,24,.26); cursor: zoom-in; }
.gl-collage-circle { position: absolute; border-radius: 50%; overflow: hidden; border: 7px solid var(--auto-paper); box-shadow: 0 22px 50px rgba(25,26,24,.28); cursor: zoom-in; }
.gl-collage-circle.one { width: 42%; aspect-ratio: 1; bottom: 0; inset-inline-end: 0; }
.gl-collage-circle.two { width: 22%; aspect-ratio: 1; top: 6%; inset-inline-end: 6%; border-width: 5px; }
.gl-collage img { transition: transform 1s cubic-bezier(.2,.65,.25,1); }
.gl-collage-oval:hover img, .gl-collage-circle:hover img { transform: scale(1.08); }
.gl-float-pill { position: absolute; z-index: 3; bottom: 7%; inset-inline-start: 2%; display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border: 1px solid rgba(185,154,99,.5); border-radius: 999px; background: var(--auto-surface); color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .04em; box-shadow: 0 16px 38px rgba(25,26,24,.18); }
.gl-float-pill i { color: var(--auto-primary); }
.gl-studio-copy { flex: 1 1 50%; min-width: 0; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0; }
.gl-chip { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border: 1px solid rgba(185,154,99,.45); border-radius: 999px; color: var(--auto-ink); font-size: 13px; font-weight: 600; transition: background var(--auto-transition), color var(--auto-transition), transform var(--auto-transition); }
.gl-chip i { color: var(--auto-primary); font-size: 13px; transition: color var(--auto-transition); }
.gl-chip:hover { background: var(--auto-primary); color: #171713; transform: translateY(-3px); }
.gl-chip:hover i { color: #171713; }
.gl-facts { display: flex; flex-wrap: wrap; gap: 16px 44px; }
.gl-facts > div { padding-inline-start: 16px; border-inline-start: 2px solid var(--auto-primary); }
.gl-facts strong { display: block; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 30px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.gl-facts > div > span { color: var(--auto-muted); font-size: 12px; letter-spacing: .06em; }

/* ---------- 8. CLIENT GARAGE ---------- */
.gl-orbit { position: relative; flex: 0 0 min(50%,600px); aspect-ratio: 1; }
.gl-orbit-ring { position: absolute; inset: 8.5%; border: 1px dashed rgba(185,154,99,.55); border-radius: 50%; }
.gl-orbit-main { position: absolute; inset: 20%; border-radius: 50%; overflow: hidden; box-shadow: 0 36px 80px rgba(25,26,24,.3); border: 6px solid var(--auto-surface); outline: 1px solid rgba(185,154,99,.5); outline-offset: 10px; }
.gl-orbit-thumb { position: absolute; width: 17%; aspect-ratio: 1; padding: 0; border: 3px solid var(--auto-surface); border-radius: 50%; overflow: hidden; background: #2a2b27; transform: translate(-50%,-50%); opacity: .72; cursor: pointer; transition: opacity .4s ease, transform .4s ease, border-color .4s ease, box-shadow .4s ease; }
.gl-orbit-thumb:hover { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
.gl-orbit-thumb.is-active { opacity: 1; border-color: var(--auto-primary); transform: translate(-50%,-50%) scale(1.16); box-shadow: 0 0 0 6px rgba(185,154,99,.2); }
.gl-client-copy { flex: 1 1 50%; min-width: 0; }
.gl-quote { position: relative; margin-top: 18px; }
.gl-quote-mark { display: block; height: 56px; color: var(--auto-primary); font-family: Georgia,serif; font-size: 100px; line-height: .9; }
.gl-quote p { margin: 0; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: clamp(20px,2.3vw,30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.5; }
.gl-quote-meta { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; }
.gl-quote-meta strong { color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 17px; font-weight: 800; }
.gl-quote-meta > span:last-child { color: var(--auto-muted); font-size: 13px; }
.gl-stars { color: var(--auto-primary); font-size: 12px; letter-spacing: 3px; margin-bottom: 6px; }
.gl-quote-nav { display: flex; align-items: center; gap: 10px; margin-top: 34px; }
.gl-count { margin-inline-start: 16px; color: var(--auto-muted); font-family: var(--auto-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.gl-count b { color: var(--auto-ink); font-size: 22px; letter-spacing: -.03em; }

/* ---------- 9. CTA ---------- */
.gl-cta { text-align: center; background: var(--auto-dark) linear-gradient(90deg,rgba(14,15,13,.93),rgba(14,15,13,.8)),url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1800&q=70") center/cover; padding-block: clamp(90px,11vw,150px); }
.gl-cta-inner { width: 100%; }
.gl-cta .gl-kicker::after { content: ""; width: 28px; height: 1px; background: var(--auto-primary-light); }
.gl-cta .gl-text { max-width: 600px; margin-inline: auto; }
.gl-cta .pr-btn.ghost { color: #FCFAF5; border-color: rgba(252,250,245,.45); }
.gl-cta .pr-btn.ghost:hover { color: #171713; background: var(--auto-primary); }
.gl-cta-ring { position: absolute; z-index: 1; border: 1px solid rgba(216,196,154,.25); border-radius: 50%; pointer-events: none; }
.gl-cta-ring.a { width: 440px; height: 440px; top: -150px; inset-inline-start: -110px; }
.gl-cta-ring.b { width: 540px; height: 540px; bottom: -200px; inset-inline-end: -120px; }
.gl-assure { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; margin: 40px 0 0; padding: 0; list-style: none; color: rgba(252,250,245,.8); font-size: 13px; }
.gl-assure li { display: inline-flex; align-items: center; gap: 9px; }
.gl-assure i { color: var(--auto-primary-light); }

/* ---------- LIGHTBOX ---------- */
.gl-lb { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 24px; background: rgba(10,11,9,.94); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s ease; }
.gl-lb.is-open { opacity: 1; visibility: visible; }
.gl-lb-figure { margin: 0; max-width: min(1000px,calc(100vw - 180px)); text-align: center; }
.gl-lb-figure img { width: auto; max-width: 100%; height: auto; max-height: 76vh; margin-inline: auto; border-radius: 36px; background: transparent; }
.gl-lb-figure figcaption { margin-top: 18px; color: rgba(252,250,245,.85); font-size: 13.5px; letter-spacing: .04em; }
.gl-lb .gl-arrow { color: #FCFAF5; }
.gl-lb-close { position: absolute; top: 22px; inset-inline-end: 22px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(252,250,245,.4); border-radius: 50%; background: transparent; color: #FCFAF5; font-size: 16px; cursor: pointer; transition: background var(--auto-transition), color var(--auto-transition); }
.gl-lb-close:hover { background: var(--auto-primary); color: #171713; }

/* ---------- RESPONSIVE: TABLET ---------- */
@media (max-width: 1100px) {
  .gl-wrap { width:100% }
  .gl-hero { min-height: 0; }
  .gl-hero-inner { flex-direction: column; align-items: flex-start; gap: 56px; }
  .gl-hero-copy { max-width: 100%; }
  .gl-hero-visual { align-self: center; flex: none; width: min(100%,520px); height: 560px; }
  .gl-ba-layout { flex-direction: column-reverse; align-items: stretch; gap: 44px; }
  .gl-ba-stage { align-self: center; width: 100%; max-width: 520px; }
  .gl-ba-tabs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .gl-split { flex-direction: column; align-items: stretch; gap: 54px; }
  .gl-ceramic-visual, .gl-collage, .gl-orbit { align-self: center; flex: none; width: min(100%,520px); }
  .gl-collage { height: 520px; }
  .gl-lux { height: 520px; }
  .gl-reel-wrap { --u: 270px; }
  .gl-reel { padding-inline: 32px; }
  .gl-jump { gap: 18px; }
}

/* ---------- RESPONSIVE: SMALL TABLET / LARGE PHONE ---------- */
@media (max-width: 1023px) {
  .gl-section {padding: clamp(72px,9vw,128px) 1.5em;}
  .gl-lux { flex-direction: column; height: auto; gap: 10px; }
  .gl-lux-item { flex: none; height: 84px; border-radius: 60px; transition: height .7s cubic-bezier(.2,.65,.25,1), box-shadow .5s ease; }
  .gl-lux-item.is-active { height: 400px; border-radius: 48px; }
  .gl-lux-label { writing-mode: horizontal-tb; transform: translateY(-50%); top: 50%; bottom: auto; left: auto; inset-inline-start: 34px; }
  .gl-lux-body { padding: 0 30px 32px; }
  .gl-process-line { left: 27px; }
  .gl-step, .gl-step:nth-of-type(even) { flex-direction: column; align-items: flex-start; padding-left: 78px; }
  .gl-step-media, .gl-step-body { flex: none; max-width: 100%; width: 100%; }
  .gl-step-circle { width: 168px; margin: 0 0 22px; }
  .gl-step-node { top: 84px; left: 27px; width: 46px; height: 46px; font-size: 12px; }
  .gl-step-body { padding-inline: 0; }
}

/* ---------- RESPONSIVE: MOBILE ---------- */
@media (max-width: 767px) {
  .gl-wrap { width:100% }
  .gl-hero-title { font-size: clamp(34px,9.4vw,46px); line-height: 1.14; }
  .gl-hero-text { font-size: 14px; }
  .gl-actions .pr-btn { flex: 1 1 100%; }
  .gl-stats { gap: 16px 26px; }
  .gl-stats strong { font-size: 24px; }
  .gl-hero-visual { height: 430px; width: min(100%,400px); }
  .gl-badge { width: 96px; height: 96px; }
  .gl-badge i { font-size: 16px; }
  .gl-jump { flex-direction: column; align-items: flex-start; gap: 12px; }
  .gl-jump-links { width: 100%; }
  .gl-ba-tabs { grid-template-columns: 1fr; }
  .gl-ba-tab { padding: 18px 0; gap: 18px; }
  .gl-ba-stage::before { top: -10px; left: 10px; right: -10px; }
  .gl-ba-handle { width: 50px; height: 50px; }
  .gl-ba-caption { flex-direction: column; align-items: flex-start; gap: 8px; }
  .gl-reel-wrap { --u: 230px; }
  .gl-reel { padding: 24px 20px 44px; }
  .gl-reel-item.o2 { margin-top: 44px; } .gl-reel-item.o3 { margin-top: 20px; }
  .gl-reel-ui { gap: 18px; }
  .gl-ceramic-visual, .gl-collage, .gl-orbit { width: min(100%,420px); }
  .gl-collage { height: 420px; }
  .gl-ring-stat, .gl-ring-stat svg, .gl-ring-stat b { width: 100px; height: auto; }
  .gl-ring-stat svg { height: 100px; }
  .gl-ring-stat b { height: 100px; font-size: 20px; }
  .gl-rings { gap: 18px 22px; }
  .gl-lux-item { height: 74px; }
  .gl-lux-item.is-active { height: 360px; }
  .gl-float-pill { font-size: 11px; padding: 10px 16px; }
  .gl-quote-mark { font-size: 80px; height: 44px; }
  .gl-cta .pr-btn { flex: 1 1 100%; }
  .gl-lb { padding: 16px; flex-wrap: wrap; align-content: center; }
  .gl-lb-figure { max-width: 100%; order: 1; flex: 1 1 100%; }
  .gl-lb-nav { order: 2; }
  .gl-lb-figure img { border-radius: 26px; max-height: 66vh; }
}

@media (max-width: 480px) {
  .gl-wrap {width:100% }
  .gl-hero-title { font-size: clamp(31px,9vw,38px); }
  .gl-kicker { font-size: 10px; letter-spacing: .12em; }
  .gl-kicker::before, .gl-head.center .gl-kicker::after { width: 18px; }
  .gl-title { font-size: clamp(28px,8.2vw,34px); }
  .gl-hero-visual { height: 380px; }
  .gl-step, .gl-step:nth-of-type(even) { padding-left: 64px; }
  .gl-process-line { left: 21px; }
  .gl-step-node { left: 21px; width: 42px; height: 42px; }
  .gl-step-circle { width: 140px; }
  .gl-chip { font-size: 12px; padding: 9px 14px; }
}

@media (max-width: 380px) { .gl-title { font-size: 26px; } .gl-hero-title { font-size: 29px; } .gl-reel-wrap { --u: 210px; } }

@media (prefers-reduced-motion: reduce) { .gl-ba-handle::after { animation: none; } .gl-lux-item, .gl-lux-item img, .gl-shape, .gl-shape img, .gl-chip { transition: none !important; } }


/* ============================================================
   AUTOMOTIVE ATELIER | ALL SERVICES PAGE (all-services.html)
   Organic layout: ovals, leaves, capsules, rings & waves | GSAP + AOS
   Side padding: 5em desktop | 2.5em below 1024px | 1.5em below 767px
============================================================ */
.sv-page { overflow-x: clip; }
.sv-sec { position: relative; padding: 6em 5em; background: var(--auto-paper); overflow: hidden; }
.sv-sec.alt { background: var(--auto-surface); }
.sv-dark { --auto-ink: #FCFAF5; --auto-muted: rgba(252,250,245,.72); --auto-line: rgba(252,250,245,.16); background: var(--auto-dark); color: #FCFAF5; }
.sv-wrap { position: relative; z-index: 2; width: 100%; max-width: 1560px; margin-inline: auto; }
.sv-page img { display: block; width: 100%; height: 100%; object-fit: cover; background: linear-gradient(135deg,#2a2b27,#4a4538); }
.sv-glow { position: absolute; z-index: 0; width: 620px; height: 620px; top: -200px; inset-inline-start: -220px; border-radius: 50%; background: radial-gradient(circle,rgba(185,154,99,.15),transparent 68%); pointer-events: none; }
.sv-glow.right { inset-inline-start: auto; inset-inline-end: -240px; top: auto; bottom: -220px; }

/* ---------- Shared type ---------- */
.sv-head { max-width: 720px; margin-bottom: clamp(2.6em,5vw,4em); }
.sv-head.center { margin-inline: auto; text-align: center; }
.sv-head.center .sv-kicker { justify-content: center; }
.sv-head.center .sv-kicker::after { content: ""; width: 28px; height: 1px; background: var(--auto-primary); }
.sv-head-split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; }
.sv-head-split > div { max-width: 720px; }
.sv-head-split .sv-text { max-width: 400px; margin-bottom: .6em; }
.sv-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--auto-primary-deep); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; }
.sv-kicker::before { content: ""; width: 28px; height: 1px; background: var(--auto-primary); }
.sv-dark .sv-kicker { color: var(--auto-primary-light); }
.sv-dark .sv-kicker::before, .sv-dark .sv-kicker::after { background: var(--auto-primary-light); }
.sv-title { margin: 0 0 .45em; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: clamp(34px,4vw,54px); font-weight: 800; letter-spacing: -.055em; line-height: 1.22; text-wrap: balance; }
.sv-dark .sv-title { color: #FCFAF5; }
.sv-cta .sv-title { color: #FCFAF5; }
.sv-title span { color: var(--auto-primary); font-weight: 500; }
.sv-dark .sv-title span, .sv-cta .sv-title span { color: var(--auto-primary-light); }
.sv-text { margin: 0; color: var(--auto-muted); font-size: 14.5px; line-height: 1.9; }
.sv-sub { margin: 0 0 .6em; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: clamp(22px,2.4vw,30px); font-weight: 800; letter-spacing: -.045em; line-height: 1.25; }
.sv-split { display: flex; align-items: center; gap: clamp(2.5em,7vw,7em); }
.sv-split > * { flex: 1 1 50%; min-width: 0; }
.sv-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2em; }
.sv-actions.center { justify-content: center; }
.sv-link { display: inline-flex; align-items: center; gap: 14px; margin-top: 1.8em; padding-bottom: 6px; border-bottom: 1px solid var(--auto-primary); color: var(--auto-primary-deep); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .1em; transition: gap var(--auto-transition), color var(--auto-transition); }
.sv-link:hover { gap: 22px; color: var(--auto-ink); }
.sv-note { max-width: 640px; margin: 1.6em auto 0; color: var(--auto-muted); font-size: 12.5px; line-height: 1.8; text-align: center; }
.sv-tabs, .sv-cover-tabs { display: flex; flex-wrap: wrap; gap: .6em; margin: 2em 0 1.6em; }
.sv-tab { padding: 10px 20px; border: 1px solid rgba(185,154,99,.45); border-radius: 999px; background: transparent; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .04em; cursor: pointer; transition: background var(--auto-transition), color var(--auto-transition), border-color var(--auto-transition); }
.sv-tab:hover { border-color: var(--auto-primary); }
.sv-tab.is-active { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }
.sv-stage h3 { margin: 0 0 .5em; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.sv-stage p { margin: 0; max-width: 560px; color: var(--auto-muted); font-size: 14px; line-height: 1.85; }
.sv-stage .sv-stage-meta { display: flex; flex-wrap: wrap; gap: .6em 2em; margin-top: 1.1em; }
.sv-stage-meta span { display: inline-flex; align-items: center; gap: 10px; color: var(--auto-muted); font-size: 13px; }
.sv-stage-meta i { color: var(--auto-primary-deep); }
.sv-stage-meta b { color: var(--auto-ink); font-weight: 700; }
.sv-flow { display: flex; flex-wrap: wrap; gap: .7em 1.7em; margin: 2.2em 0 0; padding: 1.7em 0 0; border-top: 1px solid var(--auto-line); list-style: none; }
.sv-flow li { display: inline-flex; align-items: center; gap: 10px; color: var(--auto-muted); font-size: 13.5px; }
.sv-flow li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--auto-primary); }

/* ---------- 1. HERO ---------- */
.sv-hero { padding: 5em; min-height: clamp(640px,calc(100svh - 130px),860px); display: flex; flex-direction: column; justify-content: space-between; gap: 3em; isolation: isolate; }
.sv-hero-bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 70% at 78% 42%,rgba(185,154,99,.22),transparent 70%), radial-gradient(40% 50% at 6% 92%,rgba(185,154,99,.10),transparent 70%), var(--auto-dark); }
.sv-orbit { position: absolute; z-index: -1; border: 1px solid rgba(216,196,154,.15); border-radius: 50%; pointer-events: none; }
.sv-orbit.a { width: 760px; height: 760px; top: -260px; inset-inline-end: -180px; }
.sv-orbit.b { width: 460px; height: 460px; bottom: -200px; inset-inline-start: 30%; }
.sv-hero-inner { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 3em; max-width: 1560px; width: 100%; margin-inline: auto; }
.sv-hero-copy { flex: 1 1 52%; max-width: 700px; }
.sv-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: rgba(252,250,245,.65); font-size: 12px; letter-spacing: .06em; }
.sv-crumbs i { font-size: 8px; color: var(--auto-primary-light); }
.sv-crumbs a:hover { color: var(--auto-primary-light); }
.sv-crumbs span { color: var(--auto-primary-light); }
.sv-hero-title { margin: 0; color: #FCFAF5; font-family: var(--auto-font-heading); font-size: clamp(38px,5.2vw,80px); font-weight: 700; letter-spacing: -.06em; line-height: 1.12; }
.sv-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.sv-line-in { display: block; }
.sv-hero-title em { font-style: normal; color: var(--auto-primary-light); font-weight: 500; }
.sv-hero-text { max-width: 540px; margin: 1.6em 0 0; color: rgba(252,250,245,.8); font-size: 15px; line-height: 1.9; }
.sv-dark .pr-btn.ghost { color: #FCFAF5; border-color: rgba(252,250,245,.45); }
.sv-dark .pr-btn.ghost:hover { color: #171713; }
.sv-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.8em; margin: 2.8em 0 0; padding: 0; list-style: none; }
.sv-facts li:not(.sv-facts-dot) b { display: block; color: #FCFAF5; font-family: var(--auto-font-heading); font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.sv-facts li:not(.sv-facts-dot) span { color: rgba(252,250,245,.68); font-size: 12px; letter-spacing: .05em; }
.sv-facts-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--auto-primary); }
.sv-hero-visual { position: relative; flex: 0 0 min(45%,590px); height: clamp(440px,39vw,580px); }
.sv-ring { position: absolute; top: 4%; inset-inline-end: -3%; width: 82%; height: 88%; border: 1px solid rgba(216,196,154,.4); border-radius: 50%; transform: rotate(-14deg); }
.sv-oval { position: absolute; top: 9%; inset-inline-end: 0; width: 76%; height: 78%; border-radius: 50%; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5); }
.sv-oval::after, .sv-int-oval::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(130deg,rgba(255,255,255,.2),transparent 40%); pointer-events: none; }
.sv-capsule { position: absolute; top: 0; inset-inline-start: 2%; width: 24%; height: 56%; border: 5px solid var(--auto-dark); border-radius: 999px; overflow: hidden; box-shadow: 0 24px 54px rgba(0,0,0,.45); }
.sv-bubble { position: absolute; bottom: 2%; inset-inline-start: 14%; width: 30%; aspect-ratio: 1; border: 5px solid var(--auto-dark); border-radius: 50%; overflow: hidden; box-shadow: 0 24px 54px rgba(0,0,0,.45); }
.sv-seal { position: absolute; top: 47%; inset-inline-end: -2%; width: 98px; height: 98px; display: grid; place-content: center; border-radius: 50%; background: var(--auto-primary); color: #171713; text-align: center; box-shadow: 0 16px 40px rgba(185,154,99,.35); }
.sv-seal b { font-family: var(--auto-font-heading); font-size: 28px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.sv-seal small { font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.sv-chip-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid rgba(216,196,154,.3); border-radius: 999px; background: rgba(15,16,14,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #FCFAF5; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sv-chip-float i { color: var(--auto-primary-light); }
.sv-chip-float.c1 { bottom: 9%; inset-inline-end: 4%; }
.sv-chip-float.c2 { top: 3%; inset-inline-end: 10%; }
.sv-drop { position: absolute; display: block; }
.sv-drop i { display: block; width: 100%; height: 100%; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: radial-gradient(circle at 30% 28%,rgba(255,255,255,.95),rgba(216,196,154,.45) 40%,rgba(185,154,99,.18) 72%); box-shadow: inset -3px -4px 8px rgba(185,154,99,.35), 0 8px 18px rgba(0,0,0,.25); }
.sv-drop.d1 { width: 26px; height: 26px; top: 30%; inset-inline-start: 0; }
.sv-drop.d2 { width: 16px; height: 16px; top: 66%; inset-inline-end: 0; }
.sv-drop.d3 { width: 20px; height: 20px; bottom: 28%; inset-inline-start: 2%; }
.sv-ticks { position: relative; z-index: 2; display: flex; justify-content: center; gap: 2.6em; max-width: 1560px; width: 100%; margin-inline: auto; padding-top: 1.7em; border-top: 1px solid rgba(252,250,245,.16); overflow-x: auto; scrollbar-width: none; }
.sv-ticks::-webkit-scrollbar { display: none; }
.sv-ticks a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .8em; color: rgba(252,250,245,.74); font-size: 12.5px; font-weight: 600; transition: color var(--auto-transition); }
.sv-ticks a i { width: 9px; height: 9px; border: 1px solid var(--auto-primary-light); border-radius: 50%; transition: background var(--auto-transition), transform var(--auto-transition); }
.sv-ticks a:hover, .sv-ticks a.is-active { color: #FCFAF5; }
.sv-ticks a:hover i, .sv-ticks a.is-active i { background: var(--auto-primary-light); transform: scale(1.3); }

/* ---------- 2. COMPLETE DETAILING (service index) ---------- */
.sv-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--auto-line); }
.sv-index > li { border-bottom: 1px solid var(--auto-line); }
.sv-row { position: relative; display: flex; align-items: center; gap: 2em; padding: 2em 0; transition: padding .45s cubic-bezier(.2,.65,.25,1); }
.sv-row:hover, .sv-row:focus-visible { padding-inline-start: 1.2em; }
.sv-row-icon { width: 60px; height: 60px; flex: 0 0 60px; display: grid; place-items: center; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: var(--auto-primary-deep); font-size: 19px; transition: background var(--auto-transition), color var(--auto-transition); }
.sv-row:hover .sv-row-icon { background: var(--auto-primary); color: #171713; }
.sv-row-main { flex: 1; min-width: 0; }
.sv-row-main strong { display: block; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: clamp(20px,2.4vw,32px); font-weight: 700; letter-spacing: -.045em; line-height: 1.2; transition: color var(--auto-transition); }
.sv-row-main small { display: block; max-width: 560px; margin-top: .55em; color: var(--auto-muted); font-size: 14px; line-height: 1.7; }
.sv-row:hover .sv-row-main strong { color: var(--auto-primary-deep); }
.sv-row-meta { flex: 0 0 auto; min-width: 7em; color: var(--auto-muted); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-align: end; }
.sv-row-go { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: var(--auto-ink); font-size: 12px; transition: background var(--auto-transition), color var(--auto-transition), transform var(--auto-transition); }
.sv-row:hover .sv-row-go { background: var(--auto-primary); color: #171713; transform: rotate(-45deg); }
.sv-peek { position: fixed; z-index: 50; top: 0; left: 0; width: 230px; height: 230px; border: 4px solid var(--auto-paper); border-radius: 50%; overflow: hidden; opacity: 0; pointer-events: none; box-shadow: 0 30px 70px rgba(20,20,18,.35); }
@media (hover: none), (pointer: coarse) { .sv-peek { display: none; } }

/* ---------- 3. EXTERIOR & PAINT CORRECTION ---------- */
.sv-ext-visual { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / 1.05; }
.sv-leaf { position: absolute; top: 0; inset-inline-start: 0; width: 82%; height: 92%; border-radius: 20% 14% 20% 14%; overflow: hidden; box-shadow: 0 34px 80px rgba(25,26,24,.26); }
.sv-ext-ring { position: absolute; top: 4%; inset-inline-start: 6%; width: 82%; height: 92%; border: 1px solid rgba(185,154,99,.5); border-radius: 60% 14% 60% 14%; pointer-events: none; }
.sv-gauge { position: absolute; bottom: 0; inset-inline-end: 0; width: min(190px,38%); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--auto-paper); box-shadow: 0 24px 54px rgba(25,26,24,.22); }
.sv-gauge svg { position: absolute; inset: 6%; width: 88%; height: 88%; transform: rotate(-90deg); }
.sv-gauge circle { fill: none; stroke-width: 3; }
.sv-gauge .trk { stroke: var(--auto-line); }
.sv-gauge .fill { stroke: var(--auto-primary); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 45; }
.sv-gauge b { display: flex; align-items: flex-start; margin-top: -.5em; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: clamp(28px,3.2vw,40px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.sv-gauge sup { margin-top: .2em; color: var(--auto-primary-deep); font-size: .45em; }
.sv-gauge small { position: absolute; bottom: 28%; max-width: 58%; color: var(--auto-muted); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.35; text-align: center; }
.sv-moon { position: absolute; top: 6%; inset-inline-end: 2%; width: 24%; aspect-ratio: 1; border: 5px solid var(--auto-surface); border-radius: 50%; overflow: hidden; box-shadow: 0 20px 44px rgba(25,26,24,.3); }

/* ---------- 4. INTERIOR ---------- */
.sv-zones { margin: 2em 0 0; padding: 0; list-style: none; border-top: 1px solid var(--auto-line); }
.sv-zones li { border-bottom: 1px solid var(--auto-line); }
.sv-zones button { width: 100%; display: flex; align-items: center; gap: 16px; padding: 1.1em 0; border: 0; background: transparent; color: var(--auto-muted); font-family: var(--auto-font-heading); font-size: 17px; text-align: start; cursor: pointer; transition: color var(--auto-transition); }
.sv-zones button strong { flex: 1; font-weight: 700; letter-spacing: -.025em; }
.sv-zones button i { color: var(--auto-primary-deep); font-size: 13px; transition: transform var(--auto-transition); }
.sv-zone-dot { width: 10px; height: 10px; border: 1px solid var(--auto-primary); border-radius: 50%; transition: background var(--auto-transition), transform var(--auto-transition); }
.sv-zones li.is-active button, .sv-zones button:hover { color: var(--auto-ink); }
.sv-zones li.is-active .sv-zone-dot { background: var(--auto-primary); transform: scale(1.35); }
.sv-zones li.is-active button i { transform: rotate(45deg); }
.sv-zones p { height: 0; margin: 0; padding-inline-start: 26px; overflow: hidden; color: var(--auto-muted); font-size: 14px; line-height: 1.85; }
.sv-zones li.is-active p { height: auto; padding-bottom: 1.3em; }
.sv-int-visual { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / 1.12; }
.sv-int-oval { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: 0 34px 80px rgba(25,26,24,.26); }
.sv-int-ring { position: absolute; inset: -14px; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; transform: rotate(9deg); pointer-events: none; }
.sv-hot { position: absolute; z-index: 3; width: 32px; height: 32px; margin: -16px 0 0 -16px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sv-hot i { position: relative; width: 14px; height: 14px; border: 2px solid #FCFAF5; border-radius: 50%; background: var(--auto-primary); box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: transform var(--auto-transition), background var(--auto-transition); }
.sv-hot i::after { content: ""; position: absolute; inset: -9px; border: 1px solid var(--auto-primary-light); border-radius: 50%; animation: svPulse 2.2s ease-out infinite; }
.sv-hot.is-active i { background: #FCFAF5; transform: scale(1.45); }
.sv-hot:focus-visible { outline: 2px solid var(--auto-primary); outline-offset: 2px; border-radius: 50%; }
@keyframes svPulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.sv-hot-label { position: absolute; z-index: 3; bottom: -1.2em; left: 0; right: 0; width: max-content; margin-inline: auto; padding: 10px 22px; border-radius: 999px; background: var(--auto-primary); color: #171713; font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 14px 34px rgba(185,154,99,.35); }

/* ---------- 5. CERAMIC COATING ---------- */
.sv-dials { display: flex; justify-content: center; align-items: flex-start; gap: clamp(2em,6vw,6em); }
.sv-dial { position: relative; flex: 1 1 0; max-width: 340px; text-align: center; }
.sv-dial:nth-child(1), .sv-dial:nth-child(3) { margin-top: 3.2em; }
.sv-dial-ring { position: relative; width: clamp(150px,16vw,210px); aspect-ratio: 1; margin: 0 auto 1.8em; display: grid; place-items: center; }
.sv-dial-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sv-dial-ring circle { fill: none; stroke-width: 2.4; }
.sv-dial-ring .trk { stroke: var(--auto-line); }
.sv-dial-ring .fill { stroke: var(--auto-primary-light); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sv-dial-ring b { display: flex; align-items: baseline; gap: 4px; color: #FCFAF5; font-family: var(--auto-font-heading); font-size: clamp(44px,5vw,66px); font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.sv-dial-ring b small { color: var(--auto-primary-light); font-size: 14px; font-weight: 600; letter-spacing: .02em; }
.sv-dial.featured .sv-dial-ring::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient(circle,rgba(185,154,99,.3),transparent 66%); animation: svGlow 3.4s ease-in-out infinite; }
@keyframes svGlow { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.sv-dial-badge { position: absolute; top: -2.4em; left: 0; right: 0; width: max-content; margin-inline: auto; padding: 5px 16px; border-radius: 999px; background: var(--auto-primary); color: #171713; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.sv-dial h3 { margin: 0 0 .5em; color: #FCFAF5; font-family: var(--auto-font-heading); font-size: 24px; font-weight: 800; letter-spacing: -.045em; }
.sv-dial p { margin: 0 0 1.3em; color: var(--auto-muted); font-size: 14px; line-height: 1.85; }
.sv-dial-tag { display: inline-block; padding: 7px 18px; border: 1px solid rgba(216,196,154,.4); border-radius: 999px; color: var(--auto-primary-light); font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.sv-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4em 3.2em; margin: 4.5em 0 0; padding: 2.4em 0 0; border-top: 1px solid var(--auto-line); list-style: none; }
.sv-benefits li { display: inline-flex; align-items: center; gap: 14px; color: rgba(252,250,245,.86); font-size: 13.5px; font-weight: 600; }
.sv-benefits i { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(216,196,154,.45); border-radius: 50%; color: var(--auto-primary-light); font-size: 15px; }
.sv-drop.e1 { width: 30px; height: 30px; top: 12%; inset-inline-end: 8%; }
.sv-drop.e2 { width: 18px; height: 18px; top: 38%; inset-inline-start: 5%; }
.sv-drop.e3 { width: 24px; height: 24px; bottom: 22%; inset-inline-end: 4%; }
.sv-drop.e4 { width: 16px; height: 16px; bottom: 10%; inset-inline-start: 18%; }

/* ---------- 6. PPF ---------- */
.sv-ppf-visual { position: relative; width: 100%; max-width: 480px; margin-inline: auto; aspect-ratio: 1; }
.sv-ppf-disc { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%,rgba(185,154,99,.22),rgba(185,154,99,.04) 70%); box-shadow: inset 0 0 0 1px rgba(185,154,99,.4), 0 0 0 16px rgba(185,154,99,.06); }
.sv-car { position: absolute; top: 4%; bottom: 4%; left: 0; right: 0; height: 92%; width: auto; margin: auto; overflow: visible; filter: drop-shadow(0 24px 30px rgba(0,0,0,.25)); }
.sv-car-wheels rect { fill: #121311; }
.sv-car-body { fill: #2a2b27; stroke: rgba(216,196,154,.55); stroke-width: 1.5; }
.sv-car-glass { fill: rgba(216,196,154,.2); stroke: rgba(216,196,154,.35); stroke-width: 1; }
.sv-car-roofline { fill: none; stroke: rgba(216,196,154,.22); stroke-width: 1; }
.sv-zone { fill: var(--auto-primary-light); opacity: 0; transition: opacity .55s ease; }
.sv-zone.is-on { opacity: .62; }
.sv-layers { margin-top: clamp(4em,8vw,7em); }
.sv-layer-list { margin: 1.8em 0 0; padding: 0; list-style: none; }
.sv-layer-list li { position: relative; padding: 0 0 1.2em; padding-inline-start: 2.2em; }
.sv-layer-list li::before { content: ""; position: absolute; top: .45em; inset-inline-start: 0; width: 12px; height: 12px; border: 2px solid var(--auto-primary); border-radius: 50%; background: var(--auto-paper); }
.sv-layer-list li::after { content: ""; position: absolute; top: 1.7em; bottom: .2em; inset-inline-start: 5px; width: 1px; background: var(--auto-line); }
.sv-layer-list li:last-child::after { display: none; }
.sv-layer-list b { display: block; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.sv-layer-list span { color: var(--auto-muted); font-size: 13.5px; line-height: 1.7; }
.sv-layers-visual svg { width: 100%; max-width: 480px; margin-inline: auto; overflow: visible; }
.sv-disc ellipse { stroke: rgba(185,154,99,.7); stroke-width: 1; }
.sv-disc.d1 ellipse { fill: rgba(216,196,154,.78); } .sv-disc.d1 path { fill: rgba(185,154,99,.9); }
.sv-disc.d2 ellipse { fill: rgba(216,196,154,.32); } .sv-disc.d2 path { fill: rgba(185,154,99,.4); }
.sv-disc.d3 ellipse { fill: rgba(185,154,99,.5); } .sv-disc.d3 path { fill: rgba(148,117,69,.7); }
.sv-disc.d4 ellipse { fill: #2f302b; } .sv-disc.d4 path { fill: #1d1e1b; }

/* ---------- 7. ADD-ONS ---------- */
.sv-add-copy { flex: 1 1 40%; }
.sv-pills { flex: 1 1 60%; }
.sv-add-count { display: flex; align-items: center; gap: 18px; margin-top: 2em; }
.sv-add-ring { width: 64px; height: 64px; flex: 0 0 64px; display: grid; place-items: center; border: 1px solid var(--auto-primary); border-radius: 50%; color: var(--auto-primary-deep); font-family: var(--auto-font-heading); font-size: 24px; font-weight: 800; }
.sv-add-count strong { display: block; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 16px; font-weight: 800; }
.sv-add-count small { color: var(--auto-muted); font-size: 12.5px; }
.sv-pills { display: flex; flex-wrap: wrap; align-content: center; gap: .9em; }
.sv-pill { display: inline-flex; align-items: center; gap: 12px; padding: 13px 22px; border: 1px solid rgba(185,154,99,.5); border-radius: 999px; background: transparent; color: var(--auto-ink); font-family: var(--auto-font-body); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background var(--auto-transition), color var(--auto-transition), border-color var(--auto-transition), transform var(--auto-transition); }
.sv-pill i { color: var(--auto-primary-deep); font-size: 14px; transition: color var(--auto-transition); }
.sv-pill:nth-child(3n+2) { margin-inline-start: 0em; }
.sv-pill:nth-child(4n) { margin-inline-start: 0em; }
.sv-pill:hover { border-color: var(--auto-primary); transform: translateY(-3px); }
.sv-pill.is-selected { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }
.sv-pill.is-selected i { color: #171713; }

/* ---------- 8. PROCESS ---------- */
.sv-path { position: relative; margin-top: 1em; }
.sv-wave { position: absolute; top: 0; left: 0; width: 100%; height: 170px; overflow: visible; pointer-events: none; }
.sv-wave path { fill: none; stroke-linecap: round; }
.sv-wave .trk { stroke: var(--auto-line); stroke-width: 1.5; }
.sv-wave .line { stroke: var(--auto-primary); stroke-width: 2; }
.sv-vline { display: none; }
.sv-steps { position: relative; z-index: 1; display: flex; margin: 0; padding: 0; list-style: none; }
.sv-step { flex: 1 1 0; min-width: 0; padding-inline: .8em; text-align: center; }
.sv-step:nth-child(even) { margin-top: 90px; }
.sv-node { position: relative; width: 72px; height: 72px; display: grid; place-items: center; margin: 0 auto 1.5em; border: 1px solid var(--auto-primary); border-radius: 50%; background: var(--auto-paper); box-shadow: 0 0 0 8px var(--auto-paper); }
.sv-node b { color: var(--auto-primary-deep); font-family: var(--auto-font-heading); font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.sv-step h3 { margin: 0 0 .5em; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3; }
.sv-step p { margin: 0; color: var(--auto-muted); font-size: 13px; line-height: 1.8; }

/* ---------- 9. FAQ ---------- */
.sv-faq-layout { align-items: flex-start; }
.sv-faq-side { flex: 1 1 38%; position: sticky; top: 130px; }
.sv-faq-side .sv-text { max-width: 420px; }
.sv-faq-mark { display: grid; place-items: center; width: 150px; height: 150px; margin-top: 2.6em; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: transparent; font-family: var(--auto-font-heading); font-size: 84px; font-weight: 800; -webkit-text-stroke: 1px var(--auto-primary); }
.sv-faq { flex: 1 1 62%; }
.sv-faq-item { border-bottom: 1px solid var(--auto-line); }
.sv-faq-item:first-child { border-top: 1px solid var(--auto-line); }
.sv-faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 1.5em 0; border: 0; background: transparent; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 17px; font-weight: 700; letter-spacing: -.02em; text-align: start; cursor: pointer; transition: color var(--auto-transition); }
.sv-faq-q:hover { color: var(--auto-primary-deep); }
.sv-faq-q i { flex: 0 0 auto; color: var(--auto-primary-deep); transition: transform var(--auto-transition); }
.sv-faq-item.is-open .sv-faq-q i { transform: rotate(45deg); }
.sv-faq-a { height: 0; overflow: hidden; }
.sv-faq-a p { margin: 0; padding: 0 0 1.6em; padding-inline-end: 3em; color: var(--auto-muted); font-size: 14px; line-height: 1.9; }

/* ---------- 10. FINAL CTA ---------- */
.sv-cta { text-align: center; background-color: #191A18; background-image: linear-gradient(90deg,rgba(14,15,13,.93),rgba(14,15,13,.78)),url("../images/car.jpg"); background-size: auto, cover; background-position: center; color: #FCFAF5; }
.sv-cta-inner { position: relative; z-index: 2; max-width: 820px; margin-inline: auto; }
.sv-cta .sv-kicker::after { content: ""; width: 28px; height: 1px; background: var(--auto-primary-light); }
.sv-cta .sv-text { max-width: 580px; margin-inline: auto; color: rgba(252,250,245,.8); }
.sv-cta-ring { position: absolute; width: 440px; height: 440px; border: 1px solid rgba(216,196,154,.25); border-radius: 50%; pointer-events: none; }
.sv-cta-ring.a { top: -160px; inset-inline-start: -120px; }
.sv-cta-ring.b { bottom: -200px; inset-inline-end: -130px; width: 540px; height: 540px; }
.sv-cta-contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em 2.6em; margin: 3em 0 0; padding: 0; list-style: none; }
.sv-cta-contact li { display: inline-flex; align-items: center; gap: 10px; color: rgba(252,250,245,.8); font-size: 13.5px; }
.sv-cta-contact i { color: var(--auto-primary-light); }
.sv-cta-contact a { color: rgba(252,250,245,.8); }
.sv-cta-contact a:hover { color: var(--auto-primary-light); }

/* ---------- RESPONSIVE: SMALL DESKTOP ---------- */
@media (max-width: 1100px) {
  .sv-hero-inner { gap: 2em; }
  .sv-row-meta { display: none; }
  .sv-wave { height: 0; visibility: hidden; }
  .sv-vline { display: block; position: absolute; top: 36px; bottom: 36px; inset-inline-start: 36px; width: 1px; background: var(--auto-line); }
  .sv-vline i { display: block; width: 100%; height: 100%; background: var(--auto-primary); transform-origin: top; }
  .sv-steps { flex-direction: column; gap: 2.6em; }
  .sv-step, .sv-step:nth-child(even) { position: relative; margin-top: 0; padding: 0; padding-inline-start: 6.2em; text-align: start; }
  .sv-node { position: absolute; top: 0; inset-inline-start: 0; margin: 0; }
  .sv-step h3 { padding-top: .35em; font-size: 18px; }
  .sv-step p { max-width: 520px; font-size: 13.5px; }
}

/* ---------- RESPONSIVE: TABLET ---------- */
@media (max-width: 1023px) {
  .sv-sec { padding: 5.5em 2.5em; }
  .sv-hero { padding: 5em 2.5em; min-height: 0; }
  .sv-hero-inner { flex-direction: column; align-items: flex-start; gap: 3.5em; }
  .sv-hero-copy { max-width: 640px; }
  .sv-hero-visual { flex: none; width: 100%; max-width: 560px; height: 480px; margin-inline: auto; }
  .sv-ticks { justify-content: flex-start; }
  .sv-head-split { flex-direction: column; align-items: flex-start; gap: 1.2em; }
  .sv-head-split .sv-text { max-width: 560px; }
  .sv-split { flex-direction: column; align-items: stretch; gap: 3.5em; }
  .sv-split > * { flex: none; }
  .sv-faq-side { position: static; }
  .sv-faq-mark { display: none; }
  .sv-dial:nth-child(1), .sv-dial:nth-child(3) { margin-top: 2em; }
  .sv-dial-badge { top: -2.2em; }
  .sv-title { font-size: clamp(28px,4.6vw,40px); }
}

/* ---------- RESPONSIVE: MOBILE ---------- */
@media (max-width: 767px) {
  .sv-sec { padding: 5em 1.5em; }
  .sv-hero { padding: 5em 1.5em; gap: 2.5em; }
  .sv-hero-title { font-size: clamp(33px,9.4vw,44px); }
  .sv-hero-text { font-size: 14px; }
  .sv-hero-visual { height: 390px; }
  .sv-seal { width: 78px; height: 78px; } .sv-seal b { font-size: 22px; } .sv-seal small { font-size: 9px; }
  .sv-chip-float { padding: 8px 14px; font-size: 11px; }
  .sv-facts { gap: .8em 1.2em; } .sv-facts li:not(.sv-facts-dot) b { font-size: 24px; }
  .sv-ticks { gap: 1.8em; }
  .sv-title { font-size: clamp(26px,7.4vw,32px); letter-spacing: -.045em; }
  .sv-text { font-size: 14px; }
  .sv-row { gap: 1em; padding: 1.5em 0; }
  .sv-row-icon { width: 48px; height: 48px; flex-basis: 48px; font-size: 16px; }
  .sv-row-main strong { font-size: 19px; } .sv-row-main small { font-size: 13px; }
  .sv-row-go { width: 38px; height: 38px; flex-basis: 38px; }
  .sv-row:hover, .sv-row:focus-visible { padding-inline-start: .6em; }
  .sv-drop.e1, .sv-drop.e2, .sv-drop.e3, .sv-drop.e4 { display: none; }
  .sv-dials { flex-direction: column; align-items: center; gap: 4em; }
  .sv-dial, .sv-dial:nth-child(1), .sv-dial:nth-child(3) { max-width: 360px; margin-top: 0; }
  .sv-dial.featured { margin-top: 1.2em; }
  .sv-benefits { margin-top: 3.5em; gap: 1.2em 2em; justify-content: flex-start; }
  .sv-ext-visual, .sv-int-visual { max-width: 440px; }
  .sv-gauge b { font-size: 28px; } .sv-gauge small { font-size: 8.5px; }
  .sv-hot-label { font-size: 11px; padding: 9px 18px; }
  .sv-pill { padding: 11px 17px; font-size: 13px; }
  .sv-pill:nth-child(3n+2), .sv-pill:nth-child(4n) { margin-inline-start: 0; }
  .sv-step, .sv-step:nth-child(even) { padding-inline-start: 5.2em; }
  .sv-node { width: 56px; height: 56px; } .sv-node b { font-size: 18px; }
  .sv-vline { top: 28px; bottom: 28px; inset-inline-start: 28px; }
  .sv-faq-q { padding: 1.25em 0; font-size: 15.5px; }
  .sv-faq-a p { padding-inline-end: 0; }
  .sv-cta-contact { flex-direction: column; align-items: center; gap: .9em; }
  .sv-cta-ring.a { width: 300px; height: 300px; } .sv-cta-ring.b { width: 360px; height: 360px; }
}
@media (max-width: 480px) {
  .sv-actions .pr-btn { flex: 1 1 100%; }
  .sv-hero-visual { height: 330px; }
  .sv-chip-float.c2 { display: none; }
  .sv-tab { padding: 9px 15px; font-size: 11.5px; }
  .sv-flow { gap: .6em 1.2em; }
}
@media (max-width: 380px) { .sv-hero-title { font-size: 30px; } .sv-title { font-size: 25px; } }  

/* VELORA HERO BANNER ONLY */
:root { --velora-gold: #B99A63; --velora-gold-light: #D8C49A; --velora-ink: #191C20; }
.hero { position: relative; isolation: isolate; min-height: 740px; height: min(740px, 88vh); overflow: hidden; background: linear-gradient(115deg,#F4F6F7 0%,#EDF0F1 48%,#C6C9CA 100%); }
.hero::after { position: absolute; z-index: 4; right: -2%; bottom: -1px; left: -2%; height: 18px; background: #F7F8F8; content: ""; clip-path: polygon(0 100%,0 55%,20% 20%,42% 35%,64% 40%,82% 18%,100% 56%,100% 100%); }
.hero-visual { position: absolute; z-index: -2; top: 0; right: 0; width: 64.5%; height: 100%; background: url("../images/Glossy\ Black\ Sports\ Sedan\ Showroom.png") center center / cover no-repeat; }
.hero-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(239,242,243,.12),rgba(0,0,0,.04)); content: ""; }
.hero-texture { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(247,248,248,.98) 0%,rgba(244,246,247,.95) 31%,rgba(242,244,245,.75) 44%,rgba(242,244,245,0) 58%); pointer-events: none; }
.hero-content { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; width: min(100%,1536px); height: 100%; min-height: 740px; margin: 0 auto; padding: 100px 6.7% 82px; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: #343B43; font-size: 11px; font-weight: 600; letter-spacing: 1.7px; line-height: 1.4; }
.eyebrow > span { display: inline-block; width: 40px; height: 1px; background: var(--velora-gold); }
.hero h1 { margin: 20px 0 18px; color: #1C2025; font-family: "Manrope",sans-serif; font-size: clamp(42px,4.25vw,65px); font-weight: 800; letter-spacing: -3.5px; line-height: 1.12; }
.hero h1 em { color: var(--velora-gold); font-style: normal; }
.hero-description { margin: 0; color: #515B66; font-size: 16px; font-weight: 400; line-height: 1.62; }
.feature-list { display: flex; align-items: center; margin-top: 39px; }
.feature-item { display: flex; align-items: center; gap: 12px; min-height: 34px; padding: 0 20px; border-right: 1px solid rgba(38,44,50,.12); color: #20262C; font-size: 11px; line-height: 1.45; white-space: nowrap; }
.feature-item:first-child { padding-left: 0; }
.feature-item:last-child { border-right: 0; }
.feature-item svg { flex: 0 0 auto; width: 27px; height: 29px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 49px; }
.primary-btn { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-width: 207px; padding: 8px 21px; border: 1px solid #111315; border-radius: 999px; color: #FFF; background: #111315; font-size: 12px; font-weight: 500; transition: background .25s,color .25s,transform .25s; }
.primary-btn span { font-size: 17px; }
.primary-btn:hover { color: #111315; background: var(--velora-gold-light); border-color: var(--velora-gold-light); transform: translateY(-2px); }
.process-btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-width: 186px; padding: 11px 16px; border: 1px solid rgba(31,37,43,.28); border-radius: 999px; color: #22282E; background: rgba(255,255,255,.13); font-size: 12px; transition: border-color .25s,background .25s; }
.process-btn:hover { border-color: var(--velora-gold); background: rgba(255,255,255,.45); }
.play-icon { display: grid; place-items: center; width: 21px; height: 21px; padding-left: 2px; border: 1px solid #3C444B; border-radius: 50%; font-size: 8px; }
.trust-row { display: flex; align-items: center; margin-top: auto; padding-top: 32px; }
.trust-copy { display: flex; flex-direction: column; gap: 4px; min-width: 230px; padding-left: 15px; border-left: 2px solid var(--velora-gold); }
.trust-copy strong { color: #283039; font-size: 11px; font-weight: 500; }
.trust-copy > span { color: #66707A; font-size: 10px; }
.trust-rating { display: flex; align-items: center; gap: 16px; padding-left: 21px; border-left: 1px solid rgba(38,44,50,.1); }
.avatar-stack { display: flex; align-items: center; padding-left: 3px; }
.avatar-stack span { display: grid; place-items: center; width: 27px; height: 27px; margin-left: -5px; border: 2px solid #F1F3F3; border-radius: 50%; color: #FFF; background: #525B62; font-size: 9px; font-weight: 700; }
.avatar-stack span:nth-child(1) { background: #8C6F60; }
.avatar-stack span:nth-child(2) { background: #35434B; }
.avatar-stack span:nth-child(3) { background: #A3A5A2; }
.avatar-stack span:nth-child(4) { color: #59616A; background: #E1E3E3; }
.rating-copy { display: flex; flex-direction: column; gap: 2px; }
.rating-copy strong { color: #273039; font-size: 11px; font-weight: 500; }
.rating-copy > span { color: var(--velora-gold); font-size: 15px; letter-spacing: 1px; line-height: 1; }
.scroll-cue { position: absolute; z-index: 5; bottom: 45px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 9px; color: #FFF; transform: translateX(-50%); }
.scroll-mouse { display: flex; justify-content: center; width: 19px; height: 31px; padding-top: 6px; border: 1px solid rgba(255,255,255,.9); border-radius: 12px; }
.scroll-mouse i { display: block; width: 2px; height: 6px; border-radius: 2px; background: #FFF; animation: velora-scroll 1.4s ease-in-out infinite; }
.scroll-cue small { font-size: 8px; font-weight: 600; letter-spacing: 2px; }
.slide-counter { position: absolute; z-index: 5; right: 3.4%; bottom: 64px; display: flex; align-items: center; gap: 10px; color: #F7F7F7; font-size: 11px; }
.slide-counter i { display: block; width: 55px; height: 1px; background: rgba(255,255,255,.85); }
@keyframes velora-scroll { 0%,100% { transform: translateY(0); opacity: 1; } 65% { transform: translateY(8px); opacity: .25; } }
@media (max-width: 1024px) { .hero { min-height: 609px; height: auto; } .hero-content { min-height: 559px; padding: 56px 2.5em 75px; } .hero-visual { width: 64%; } .hero-texture { background: linear-gradient(90deg,rgba(247,248,248,.99) 0%,rgba(244,246,247,.96) 37%,rgba(242,244,245,.72) 54%,rgba(242,244,245,.05) 74%); } .hero h1 { font-size: clamp(41px,5vw,54px); letter-spacing: -2.8px; } .hero-description { font-size: 14px; } .feature-list { margin-top: 31px; } .feature-item { gap: 8px; padding: 0 10px; font-size: 10px; } .feature-item svg { width: 23px; } .hero-actions { margin-top: 40px; } .trust-row { padding-top: 24px; } }
@media (max-width: 767px) { .hero { min-height: 617px; height: auto; } .hero-visual { top: 395px; width: 100%; height: 214px; background-position: 57% center; } .hero-texture { background: linear-gradient(180deg,#F5F7F8 0%,#F1F3F4 43%,rgba(241,243,244,.15) 61%,rgba(241,243,244,0) 100%); } .hero-content { min-height: 525px; padding: 55px 1.5em 68px; } .eyebrow { gap: 8px; font-size: 8px; letter-spacing: 1.15px; } .eyebrow > span { width: 24px; } .hero h1 { margin: 17px 0 14px; font-size: clamp(37px,9.6vw,53px); letter-spacing: -2.3px; line-height: 1.08; } .hero-description { max-width: 480px; font-size: 13px; line-height: 1.6; } .desktop-break { display: none; } .feature-list { flex-wrap: wrap; row-gap: 13px; margin-top: 23px; } .feature-item { gap: 7px; padding: 0 10px; font-size: 9px; } .feature-item svg { width: 21px; height: 24px; } .hero-actions { flex-wrap: wrap; gap: 10px; margin-top: 24px; } .primary-btn { min-width: 190px; padding: 13px 17px; font-size: 11px; } .process-btn { min-width: 170px; padding: 9px 12px; font-size: 11px; } .trust-row { position: absolute; right: 1.5em; bottom: 29px; left: 1.5em; justify-content: space-between; padding-top: 0; } .trust-copy { min-width: 0; max-width: 190px; padding-left: 10px; } .trust-copy strong, .trust-copy > span { font-size: 9px; } .trust-rating { gap: 7px; padding-left: 9px; } .avatar-stack span { width: 22px; height: 22px; font-size: 7px; } .rating-copy strong { font-size: 9px; } .rating-copy > span { font-size: 12px; } .scroll-cue { bottom: 18px; gap: 5px; } .scroll-mouse { width: 16px; height: 24px; } .scroll-cue small { font-size: 7px; } .slide-counter { right: 1.5em; bottom: 20px; gap: 7px; font-size: 9px; } .slide-counter i { width: 25px; } }
@media (max-width: 380px) { .hero h1 { font-size: 36px; } .feature-item { padding: 0 7px; } .hero-actions { align-items: flex-start; flex-direction: column; } .trust-copy { max-width: 160px; } .trust-rating { gap: 5px; } .avatar-stack span { width: 19px; height: 19px; } }
@media (prefers-reduced-motion: reduce) { .hero *, .hero *::before, .hero *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }  


/* =========================================================
   AUTOMOTIVE ATELIER | HOME 2 BRAND STORY
   Stable layout | Responsive | CSS-only interactions
========================================================= */
.atelier-h2brand-section { --atelier-h2brand-gold: #B99A63; --atelier-h2brand-gold-light: #D8C49A; --atelier-h2brand-bg: #F7F5F0; --atelier-h2brand-text: #25251F; --atelier-h2brand-muted: #6D6A62; --atelier-h2brand-line: rgba(37,37,31,.17); position: relative; isolation: isolate; width: 100%; padding: 6em 5em; overflow: clip; background: var(--atelier-h2brand-bg); color: var(--atelier-h2brand-text); transition: background-color .3s ease, color .3s ease; }
.atelier-h2brand-section * { box-sizing: border-box; }
.atelier-h2brand-container { width: 100%; max-width: 1440px; margin: 0 auto; }
.atelier-h2brand-main { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: 2em; }
.atelier-h2brand-copy { min-width: 0; padding: 1.5rem 0; }
.atelier-h2brand-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 1.7rem; color: var(--atelier-h2brand-gold); font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 2.2px; line-height: 1.6; }
.atelier-h2brand-eyebrow span { display: inline-block; flex: 0 0 32px; width: 32px; height: 1px; background: var(--atelier-h2brand-gold); }
.atelier-h2brand-title { max-width: 650px; margin: 0 0 1.5rem; color: var(--atelier-h2brand-text); font-family: "Manrope", sans-serif; font-size: clamp(2.25rem, 4vw, 4.2rem); font-weight: 600; letter-spacing: -2px; line-height: 1.4; overflow-wrap: anywhere; }
.atelier-h2brand-title em { color: var(--atelier-h2brand-gold);font-weight: 600; letter-spacing: -1.5px; }
.atelier-h2brand-intro {margin: 0 0 1rem; color: var(--atelier-h2brand-text); font-family: "DM Sans", sans-serif; font-size: 16px; font-weight: 400; line-height: 1.9; }
.atelier-h2brand-description {margin: 0; color: var(--atelier-h2brand-muted); font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.9; }
.atelier-h2brand-signature { display: flex; align-items: center; gap: 13px; margin: 2rem 0; color: var(--atelier-h2brand-muted); font-family: "DM Sans", sans-serif; font-size: 13px; font-style: italic; line-height: 1.7; }
.atelier-h2brand-signature-line { flex: 0 0 35px; width: 35px; height: 1px; background: var(--atelier-h2brand-gold); }
.atelier-h2brand-link { display: inline-flex; align-items: center; gap: 20px; min-height: 48px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--atelier-h2brand-gold); color: var(--atelier-h2brand-text); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .3px; text-decoration: none; transition: color .25s ease, gap .25s ease, border-color .25s ease; }
.atelier-h2brand-link:hover, .atelier-h2brand-link:focus-visible { gap: 27px; color: var(--atelier-h2brand-gold); border-color: var(--atelier-h2brand-gold-light); outline-offset: 5px; }
.atelier-h2brand-link-arrow { color: var(--atelier-h2brand-gold); font-size: 20px; line-height: 1; }
.atelier-h2brand-visual { position: relative; min-width: 0; padding: 0 0 2.2rem 2rem; }
.atelier-h2brand-image-wrap { position: relative; width: 100%; aspect-ratio: 4 / 3.65; overflow: hidden; background: #292822; }
.atelier-h2brand-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .8s ease; }
.atelier-h2brand-image-wrap:hover .atelier-h2brand-image { transform: scale(1.025); }
.atelier-h2brand-image-shade { position: absolute; inset: 35% 0 0; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.67) 100%); }
.atelier-h2brand-image-caption { position: absolute; right: 1.8rem; bottom: 1.8rem; left: 1.8rem; color: #fff; }
.atelier-h2brand-image-caption span { display: block; margin-bottom: .7rem; color: var(--atelier-h2brand-gold-light); font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; }
.atelier-h2brand-image-caption p { margin: 0; color: #fff; font-family: "Manrope", sans-serif; font-size: clamp(1.1rem, 1.8vw, 1.55rem); font-weight: 500; line-height: 1.4; }
.atelier-h2brand-stamp { position: absolute; top: 2.2rem; left: 0; display: grid; width: clamp(88px, 10vw, 126px); aspect-ratio: 1; place-items: center; border-radius: 50%; background: var(--atelier-h2brand-bg); color: var(--atelier-h2brand-gold); }
.atelier-h2brand-stamp svg { display: block; width: 100%; height: 100%; overflow: visible; }
.atelier-h2brand-statement { position: relative; display: grid; grid-template-columns: minmax(120px, .55fr) minmax(0, 2fr) auto; align-items: center; gap: 2rem; margin-top: 2rem; padding: 2.5rem 0; border-top: 1px solid var(--atelier-h2brand-line); border-bottom: 1px solid var(--atelier-h2brand-line); }
.atelier-h2brand-statement-index { color: var(--atelier-h2brand-gold); font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; line-height: 1.8; }
.atelier-h2brand-statement > p { margin: 0; color: var(--atelier-h2brand-text); font-family: "Manrope", sans-serif; font-size: clamp(1.35rem, 1.5vw, 2.35rem); font-weight: 500; letter-spacing: -.8px; line-height: 1.55; }
.atelier-h2brand-statement > p em { color: var(--atelier-h2brand-gold);font-weight: 400; }
.atelier-h2brand-statement-mark { color: var(--atelier-h2brand-gold); font-size: 2.3rem; line-height: 1; }
.atelier-h2brand-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-top: 2.5rem; }
.atelier-h2brand-principle { display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: start; gap: 1rem; min-width: 0; padding: 0; }
.atelier-h2brand-principle-number { padding-top: 4px; color: var(--atelier-h2brand-gold); font-family: "DM Sans", sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.atelier-h2brand-principle h3 { margin: 0 0 .65rem; color: var(--atelier-h2brand-text); font-family: "Manrope", sans-serif; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; line-height: 1.4; }
.atelier-h2brand-principle p { margin: 0; color: var(--atelier-h2brand-muted); font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.8; }
.atelier-h2brand-principle-symbol { padding-top: 3px; color: var(--atelier-h2brand-gold); font-size: 17px; transition: transform .25s ease; }
.atelier-h2brand-principle:hover .atelier-h2brand-principle-symbol { transform: translate(3px, -3px); }
@media (max-width: 1024px) {
  .atelier-h2brand-section { padding: 5em 2.5em; }
  .atelier-h2brand-main { gap: 2.5rem;grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .atelier-h2brand-title { font-size: clamp(2.1rem, 4.3vw, 3.3rem); letter-spacing: -1.5px; }
  .atelier-h2brand-visual { padding-left: 1.4rem; }
  .atelier-h2brand-image-wrap {aspect-ratio: 4 / 1.65;}
  .atelier-h2brand-statement { margin-top: 3.5rem; gap: 1.5rem; }
  .atelier-h2brand-principles { gap: 1rem; }
  .atelier-h2brand-principle { grid-template-columns: 25px minmax(0, 1fr); gap: .75rem; }
  .atelier-h2brand-principle-symbol { display: none; }
}
@media (max-width: 767px) {
  .atelier-h2brand-section { padding: 5rem 1.5rem; }
  .atelier-h2brand-main { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .atelier-h2brand-copy { padding: 0; }
  .atelier-h2brand-eyebrow { margin-bottom: 1.2rem; font-size: 10px; letter-spacing: 1.7px; }
  .atelier-h2brand-title { max-width: 100%; margin-bottom: 1.2rem; font-size: clamp(2.15rem, 8vw, 3.1rem); letter-spacing: -1.2px; }
  .atelier-h2brand-title em { letter-spacing: -.8px; }
  .atelier-h2brand-intro { font-size: 15px; line-height: 1.8; }
  .atelier-h2brand-description { font-size: 14px; }
  .atelier-h2brand-signature { margin: 1.5rem 0; font-size: 12px; }
  .atelier-h2brand-visual { width: calc(100% - 12px); margin-left: 12px; padding: 0 0 1.2rem 1rem; }
  .atelier-h2brand-image-wrap { aspect-ratio: 4 / 4.5; }
  .atelier-h2brand-image-caption { right: 1.2rem; bottom: 1.2rem; left: 1.2rem; }
  .atelier-h2brand-image-caption p { font-size: 1.15rem; }
  .atelier-h2brand-stamp { top: 1.3rem; left: 0; width: 88px; }
  .atelier-h2brand-statement { grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; margin-top: 2.5rem; padding: 1.8rem 0; }
  .atelier-h2brand-statement-index { grid-column: 1 / -1; font-size: 10px; }
  .atelier-h2brand-statement > p { font-size: clamp(1.3rem, 5.5vw, 1.8rem); letter-spacing: -.4px; }
  .atelier-h2brand-statement-mark { font-size: 1.7rem; }
  .atelier-h2brand-principles { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; padding-top: 1.8rem; }
  .atelier-h2brand-principle { grid-template-columns: 30px minmax(0, 1fr); gap: .8rem; }
  .atelier-h2brand-principle h3 { margin-bottom: .4rem; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-h2brand-section *, .atelier-h2brand-section *::before, .atelier-h2brand-section *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}


/* =========================================================
   SIGNATURE DETAILING SERVICES — AUTOMOTIVE ATELIER
========================================================= */

.atelier-signature { --as-gold: #B99A63; --as-gold-light: #D8C49A; --as-bg: #F5F3EE; --as-ink: #25251F; --as-muted: #77766F; --as-line: rgba(39,39,33,.15); background:#fff; color: var(--as-ink); padding: 6em 5em 6em; overflow: hidden; font-family: "DM Sans", sans-serif; }
.atelier-signature * { box-sizing: border-box; }
.atelier-signature__inner { width: 100%; max-width: 1440px; margin: 0 auto; }
.atelier-signature__topline { display: flex; justify-content: space-between; align-items: center; gap: 1.5em; padding-bottom: 1em; border-bottom: 1px solid var(--as-line); }
.atelier-signature__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--as-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-signature__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--as-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }
.atelier-signature__edition { color: var(--as-muted); font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.atelier-signature__intro { display: grid; grid-template-columns: 1.35fr .65fr; align-items:center; gap: 4em; padding: 3.5em 0 2.8em; }
.atelier-signature__overline { display: block; margin-bottom: .9em; color: var(--as-gold); font-size: 13px; font-weight: 700; letter-spacing: 1.8px; }
.atelier-signature__intro h2 { margin: 0; color: var(--as-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3vw, 2.85rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-signature__intro h2 span { color: var(--as-gold); font-weight: 400; }
.atelier-signature__intro-side { max-width: 360px; padding: .15em 0 .1em 1.8em; border-left: 1px solid var(--as-gold); }
.atelier-signature__side-label { color: var(--as-muted); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-signature__intro-side p { margin: 1em 0 1.25em; color: var(--as-muted); font-size: 14px; line-height: 1.8; }
.atelier-signature__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--as-ink); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .7px; }
.atelier-signature__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--as-gold); border-radius: 50%; color: var(--as-gold); font-size: 17px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-signature__text-link:hover i { transform: rotate(45deg); background: var(--as-gold); color: #fff; }

/* CINEMATIC FEATURE IMAGE */
.atelier-signature__feature { display: grid; grid-template-columns: minmax(0,1fr) 242px; align-items: center; gap: 1.5em; }
.atelier-signature__feature-image { position: relative; height: clamp(250px, 20vw, 310px); overflow: hidden; background: #1d1d1a; }
.atelier-signature__feature-image > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; transition: transform .8s ease; }
.atelier-signature__feature-image:hover > img { transform: scale(1.025); }
.atelier-signature__feature-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,8,.57), transparent 60%), linear-gradient(0deg, rgba(8,9,8,.43), transparent 45%); pointer-events: none; }
.atelier-signature__feature-top { position: absolute; top: 1.4em; left: 1.6em; display: flex; align-items: center; gap: .8em; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.atelier-signature__feature-number { color: var(--as-gold-light); font-family: "Manrope", sans-serif; font-size: 24px; font-weight: 500; letter-spacing: -.8px; }
.atelier-signature__feature-rule { width: 35px; height: 1px; background: var(--as-gold-light); }
.atelier-signature__feature-bottom { position: absolute; bottom: 1.8em; left: 1.8em; display: flex; flex-direction: column; gap: .45em; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.5; }
.atelier-signature__feature-monogram { position: absolute; right: 1.8em; bottom: 1.5em; display: flex; flex-direction: column; align-items: center; gap: .6em; color: #fff; }
.atelier-signature__feature-monogram > span { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid var(--as-gold); border-radius: 50%; color: var(--as-gold-light); font-family: "Manrope", sans-serif; font-size: 26px; font-weight: 400; }
.atelier-signature__feature-monogram small { font-size: 13px; font-weight: 600; line-height: 1.6; letter-spacing: 1px; text-align: center; }
.atelier-signature__feature-note { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 120px; padding: 1em 0 1em 1.2em; border-left: 1px solid var(--as-gold); }
.atelier-signature__note-symbol { margin-bottom: .8em; color: var(--as-gold); font-size: 22px; line-height: 1; }
.atelier-signature__feature-note blockquote { margin: 0 0 1.2em; color: var(--as-muted); font-size: 13px; line-height: 1.8; }
.atelier-signature__feature-note strong { color: var(--as-ink); font-weight: 600; }
.atelier-signature__note-caption { color: var(--as-muted); font-size: 13px; font-weight: 700; letter-spacing: .8px; line-height: 1.6; }

/* SERVICES INTRO */
.atelier-signature__services-head { display: flex; justify-content: space-between; align-items: center; gap: 2em; padding: 5em 0 2.3em; border-bottom: 1px solid var(--as-line); }
.atelier-signature__services-head .atelier-signature__overline { margin-bottom: .55em; }
.atelier-signature__services-head h3 { margin: 0; color: var(--as-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.75rem, 2.5vw, 2.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.2; }
.atelier-signature__services-head h3 em { color: var(--as-gold); font-weight: 400; }
.atelier-signature__services-head > p { margin: 0; padding-left: 1.5em; border-left: 1px solid var(--as-gold); color: var(--as-muted); font-size: 14px; line-height: 1.8; }

/* EDITORIAL SERVICE ROWS */
.atelier-signature__list { border-bottom: 1px solid var(--as-line); }
.atelier-signature__service { position: relative; display: grid; grid-template-columns: 75px minmax(190px,1fr) minmax(180px,1fr) minmax(220px,.95fr) 42px; align-items: center; gap: 1.2em; min-height: 140px; padding: .45em .6em; border-bottom: 1px solid var(--as-line); color: inherit; text-decoration: none; isolation: isolate; transition: padding .3s ease; }
.atelier-signature__service:last-child { border-bottom: 0; }
.atelier-signature__service::before { position: absolute; z-index: -1; inset: 0; background: rgba(185,154,99,.07); content: ""; transform: scaleY(0); transform-origin: bottom; transition: transform .3s ease; }
.atelier-signature__service:hover::before, .atelier-signature__service:focus-visible::before { transform: scaleY(1); transform-origin: top; }
.atelier-signature__service:hover { padding-right: 1em; padding-left: 1em; }
.atelier-signature__service-number { color: var(--as-gold); font-family: "Manrope", sans-serif; font-size: 36px; font-weight: 400; letter-spacing: -1.8px; line-height: 1; }
.atelier-signature__service-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: .55em; }
.atelier-signature__service-kicker { color: var(--as-muted); font-size: 13px; font-weight: 700; letter-spacing: .6px; line-height: 1.5; }
.atelier-signature__service-title { color: var(--as-ink); font-family: "Manrope", sans-serif; font-size: 1.2rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.3; transition: color .3s ease; }
.atelier-signature__service:hover .atelier-signature__service-title { color: var(--as-gold); }
.atelier-signature__service-description { position: relative; z-index: 2; max-width: 250px; color: var(--as-muted); font-size: 14px; line-height: 1.65; }
.atelier-signature__service-image { position: relative; align-self: stretch; min-width: 0; min-height: 76px; overflow: hidden; background: #222; clip-path: polygon(13% 0,100% 0,100% 100%,0 100%); }
.atelier-signature__service-image img { display: block; width: 100%; height: 100%; min-height: 76px; object-fit: cover; filter: saturate(.82); transition: transform .6s ease, filter .4s ease; }
.atelier-signature__service:hover .atelier-signature__service-image img { transform: scale(1.07); filter: saturate(1); }
.atelier-signature__service-action { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--as-gold); border-radius: 50%; color: var(--as-gold); font-size: 19px; line-height: 1; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-signature__service:hover .atelier-signature__service-action { transform: translateX(3px); background: var(--as-gold); color: #fff; }

/* CLOSING STRIP */
.atelier-signature__closing { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 1.3em; padding-top: 1.5em; }
.atelier-signature__closing-mark { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--as-gold); border-radius: 50%; color: var(--as-gold); font-family: "Manrope", sans-serif; font-size: 23px; font-weight: 400; }
.atelier-signature__closing-copy { padding-left: 1.2em; border-left: 1px solid var(--as-gold); }
.atelier-signature__closing-copy > span { color: var(--as-muted); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; }
.atelier-signature__closing-copy p { margin: .45em 0 0; color: var(--as-muted); font-size: 14px; line-height: 1.6; }
.atelier-signature__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; min-width: 190px; padding: 1em 1.2em; border: 1px solid rgba(185,154,99,.7); color: var(--as-ink); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .4px; transition: background .3s ease, color .3s ease; }
.atelier-signature__cta i { color: var(--as-gold); font-size: 17px; font-style: normal; transition: transform .3s ease, color .3s ease; }
.atelier-signature__cta:hover { background: var(--as-gold); color: #fff; }
.atelier-signature__cta:hover i { transform: translateX(3px); color: #fff; }

/* TABLET */
@media (max-width: 1024px) {
  .atelier-signature { padding: 4em 2.5em 3em; }
  .atelier-signature__intro { gap: 2.5em;grid-template-columns: 1.35fr 1.65fr; }
  .atelier-signature__intro h2 { font-size: clamp(1.9rem,3.2vw,2.5rem); }
  .atelier-signature__services-head h3 { font-size: clamp(1.65rem,2.7vw,2.1rem); }
  .atelier-signature__feature { grid-template-columns: minmax(0,1fr) 243px; gap: 6em; }
  .atelier-signature__service { grid-template-columns: 55px minmax(155px,1fr) minmax(150px,.9fr) minmax(145px,.85fr) 36px; gap: .8em; }
  .atelier-signature__service-number { font-size: 31px; }
  .atelier-signature__service-title { font-size: 1.05rem; }
}

/* MOBILE */
@media (max-width: 767px) {
  .atelier-signature { padding: 3.5em 1.5em 2.8em; }
  .atelier-signature__topline { align-items: flex-start; flex-direction: column; gap: .8em; }
  .atelier-signature__edition { font-size: 13px; }
  .atelier-signature__intro { grid-template-columns: 1fr; gap: 1.8em; padding: 2.8em 0 2.2em; }
  .atelier-signature__intro h2 { font-size: clamp(1.8rem,6.5vw,2.3rem); line-height: 1.2; }
  .atelier-signature__intro-side { max-width: 100%; padding-left: 1.2em; }
  .atelier-signature__feature { grid-template-columns: 1fr; gap: 1em; }
  .atelier-signature__feature-image { height: 260px; }
  .atelier-signature__feature-top { top: 1em; left: 1em; gap: .6em; }
  .atelier-signature__feature-bottom { bottom: 1.2em; left: 1.2em; }
  .atelier-signature__feature-monogram { right: 1em; bottom: 1em; }
  .atelier-signature__feature-note { display: flex; min-height: 0; padding: .7em 0 .7em .9em; }
  .atelier-signature__note-symbol { margin-bottom: .5em; }
  .atelier-signature__feature-note blockquote { margin-bottom: .5em; }
  .atelier-signature__services-head { align-items: flex-start; flex-direction: column; gap: .8em; padding: 2.2em 0 1em; }
  .atelier-signature__services-head h3 { font-size: clamp(1.55rem,5.5vw,1.9rem); }
  .atelier-signature__services-head > p { padding-left: 1em; }
  .atelier-signature__service { grid-template-columns: 42px minmax(0,1fr) 34px; gap: .65em; padding: .85em 0; }
  .atelier-signature__service:hover { padding-right: .35em; padding-left: .35em; }
  .atelier-signature__service-number { grid-column: 1; grid-row: 1; align-self: start; padding-top: .1em; font-size: 27px; }
  .atelier-signature__service-copy { grid-column: 2; grid-row: 1; gap: .4em; padding: .15em 0; }
  .atelier-signature__service-kicker { font-size: 13px; letter-spacing: .3px; }
  .atelier-signature__service-title { font-size: 1.05rem; }
  .atelier-signature__service-description { grid-column: 2 / 4; grid-row: 2; max-width: none; padding: .15em 0 .45em; font-size: 14px; }
  .atelier-signature__service-image { grid-column: 1 / 4; grid-row: 3; height: 105px; min-height: 105px; clip-path: polygon(5% 0,100% 0,100% 100%,0 100%); }
  .atelier-signature__service-image img { min-height: 105px; }
  .atelier-signature__service-action { grid-column: 3; grid-row: 1; justify-self: end; width: 30px; height: 30px; font-size: 17px; }
  .atelier-signature__closing { grid-template-columns: 42px minmax(0,1fr); gap: .8em; padding-top: 1.2em; }
  .atelier-signature__closing-mark { width: 37px; height: 37px; font-size: 20px; }
  .atelier-signature__closing-copy { padding-left: .8em; }
  .atelier-signature__closing-copy p { font-size: 14px; }
  .atelier-signature__cta { grid-column: 1 / -1; width: 100%; margin-top: .5em; }
}

@media (max-width: 380px) {
  .atelier-signature__feature-image { height: 230px; }
  .atelier-signature__service-number { font-size: 24px; }
  .atelier-signature__service-title { font-size: 1rem; }
}

/* REDUCED MOTION ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  .atelier-signature *, .atelier-signature *::before, .atelier-signature *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* =========================================================
   AUTOMOTIVE ATELIER | BEFORE & AFTER TRANSFORMATIONS
========================================================= */
.atelier-transform { --at-gold: #B99A63; --at-gold-light: #D8C49A; --at-gold-deep: #947545; --at-bg: #F5F3EF; --at-ink: #25251F; --at-muted: #77766F; --at-line: rgba(39,39,33,.15); position: relative; isolation: isolate; padding: 6em 5em; background: var(--at-bg); color: var(--at-ink); overflow: hidden; font-family: "DM Sans", sans-serif; }
.atelier-transform * { box-sizing: border-box; }
.atelier-transform::before { content: ""; position: absolute; z-index: -1; top: -200px; inset-inline-end: -220px; width: 580px; height: 580px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-transform::after { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-start: -180px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.16), transparent 68%); pointer-events: none; }
.atelier-transform__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-transform__head { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 4em; margin-bottom: 3.5em; }
.atelier-transform__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--at-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-transform__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--at-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }
.atelier-transform__title { margin: 1em 0 0; color: var(--at-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-transform__title span { color: var(--at-gold); font-weight: 400; }
.atelier-transform__head-side { max-width: 380px; padding-inline-start: 1.8em; border-inline-start: 1px solid var(--at-gold); }
.atelier-transform__head-side p { margin: 0 0 1.3em; color: var(--at-muted); font-size: 14px; line-height: 1.8; }
.atelier-transform__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--at-ink); font-size: 13px; font-weight: 700; letter-spacing: .7px; }
.atelier-transform__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--at-gold); border-radius: 50%; color: var(--at-gold); font-size: 17px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-transform__text-link:hover i { transform: rotate(45deg); background: var(--at-gold); color: #fff; }

/* Capsule stage */
.atelier-transform__stage { position: relative; }
.atelier-transform__lens { --at-n: .5; --at-skew: 0deg; --at-slant: 48px; position: relative; width: 100%; height: clamp(440px, 38vw, 580px); border-radius: 999px; overflow: hidden; isolation: isolate; direction: ltr; background: #1D1E1B; box-shadow: 0 50px 90px -40px rgba(25,26,24,.55); cursor: ew-resize; touch-action: pan-y; }
.atelier-transform__layer { position: absolute; inset: 0; }
.atelier-transform__layer img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.atelier-transform__layer img.is-missing { opacity: 0; }
.atelier-transform__layer--after { background: radial-gradient(circle at 70% 30%, #EBDDB8 0%, #B99A63 40%, #3A3225 100%); }
.atelier-transform__layer--before { background: linear-gradient(135deg, #5E5D58, #2A2A27); clip-path: polygon(0 0, calc((100% + 2 * var(--at-slant)) * var(--at-n)) 0, calc((100% + 2 * var(--at-slant)) * var(--at-n) - 2 * var(--at-slant)) 100%, 0 100%); }
.atelier-transform__layer--before img { filter: saturate(.72) contrast(.94) brightness(.92); }
.atelier-transform__vignette { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,9,8,.55), transparent 55%), linear-gradient(0deg, rgba(8,9,8,.5), transparent 46%); pointer-events: none; }

.atelier-transform__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; }
.atelier-transform__handle { position: absolute; top: 0; bottom: 0; left: calc((100% + 2 * var(--at-slant)) * var(--at-n) - var(--at-slant)); z-index: 5; width: 0; pointer-events: none; }
.atelier-transform__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: linear-gradient(to bottom, transparent, var(--at-gold-light) 14%, var(--at-gold-light) 86%, transparent); transform: skewX(var(--at-skew)); }
.atelier-transform__knob { position: absolute; top: 50%; left: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; display: grid; place-items: center; border: 1px solid var(--at-gold-light); border-radius: 50%; background: rgba(25,26,24,.55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .3s ease, color .3s ease; }
.atelier-transform__knob::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--at-gold-light); border-radius: 50%; animation: atelierTransformPulse 2.6s ease-out infinite; }
@keyframes atelierTransformPulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.atelier-transform__lens:hover .atelier-transform__knob { background: var(--at-gold); color: #171713; }
.atelier-transform__range:focus-visible ~ .atelier-transform__handle .atelier-transform__knob { outline: 2px solid var(--at-gold-light); outline-offset: 4px; }

.atelier-transform__label { position: absolute; top: 11%; z-index: 3; padding: .55em 1.15em; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; background: rgba(20,20,18,.42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; pointer-events: none; transition: opacity .3s ease; }
.atelier-transform__label--before { left: 11%; }
.atelier-transform__label--after { right: 11%; border-color: rgba(216,196,154,.7); color: var(--at-gold-light); }
.atelier-transform__label.is-hidden { opacity: 0; }
.atelier-transform__hint { position: absolute; top: 12.5%; left: 50%; z-index: 3; transform: translateX(-50%); color: rgba(255,255,255,.92); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 10px rgba(0,0,0,.4); }

/* Caption inside the image */
.atelier-transform__caption { position: absolute; bottom: 13%; left: 9%; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: .5em; max-width: 430px; color: #fff; pointer-events: none; }
.atelier-transform__caption-kicker { color: var(--at-gold-light); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; line-height: 1.5; }
.atelier-transform__caption-title { margin: 0; color: #fff; font-family: "Manrope", sans-serif; font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-transform__caption-vehicle { display: inline-flex; align-items: center; gap: .8em; color: rgba(255,255,255,.88); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.atelier-transform__caption-vehicle::before { content: ""; width: 30px; height: 1px; background: var(--at-gold-light); }
.atelier-transform__caption-note { margin: .4em 0 0; color: rgba(255,255,255,.82); font-size: 14px; line-height: 1.75; }

/* Rotating stamp */
.atelier-transform__stamp { position: absolute; z-index: 6; bottom: -48px; inset-inline-end: 5%; width: 128px; height: 128px; display: grid; place-items: center; border-radius: 50%; background: var(--at-gold); color: #171713; box-shadow: 0 22px 46px -16px rgba(148,117,69,.7); }
.atelier-transform__stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atelier-transform__stamp-text { transform-origin: 50px 50px; animation: atelierTransformSpin 22s linear infinite; }
@keyframes atelierTransformSpin { to { transform: rotate(360deg); } }
.atelier-transform__stamp-core { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.atelier-transform__stamp-core b { font-family: "Manrope", sans-serif; font-size: 28px; font-weight: 500; letter-spacing: -1px; }
.atelier-transform__stamp-core small { margin-top: .4em; font-size: 13px; font-weight: 700; letter-spacing: .8px; opacity: .72; }

/* Chapters (timeline, no boxes) */
.atelier-transform__chapters { display: flex; gap: 2.5em; margin: 6em 0 0; padding: 0; list-style: none; }
.atelier-transform__chapters > li { flex: 1 1 0; min-width: 0; }
.atelier-transform__chapter { position: relative; display: flex; align-items: center; gap: 1.2em; width: 100%; padding: 1.7em 0 0; border: 0; border-top: 1px solid var(--at-line); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.atelier-transform__thumb { position: relative; flex: 0 0 76px; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, #EBDDB8, #B99A63 55%, #3A3225); box-shadow: 0 0 0 4px var(--at-bg), 0 0 0 5px var(--at-line); transition: box-shadow .3s ease, transform .4s ease; }
.atelier-transform__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .6s ease, filter .4s ease; }
.atelier-transform__chapter-text { display: flex; min-width: 0; flex-direction: column; gap: .3em; }
.atelier-transform__chapter-num { color: var(--at-gold); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-transform__chapter-title { color: var(--at-ink); font-family: "Manrope", sans-serif; font-size: 1.1rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.3; transition: color .3s ease; }
.atelier-transform__chapter-vehicle { color: var(--at-muted); font-size: 14px; line-height: 1.5; }
.atelier-transform__chapter-progress { position: absolute; top: -1px; inset-inline-start: 0; width: 100%; height: 2px; background: var(--at-gold); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.atelier-transform__chapter:hover .atelier-transform__thumb img { transform: scale(1.1); filter: saturate(1); }
.atelier-transform__chapter:hover .atelier-transform__chapter-title { color: var(--at-gold); }
.atelier-transform__chapter.is-active .atelier-transform__chapter-title { color: var(--at-gold); }
.atelier-transform__chapter.is-active .atelier-transform__thumb { box-shadow: 0 0 0 4px var(--at-bg), 0 0 0 5.5px var(--at-gold); }
.atelier-transform__chapter.is-active .atelier-transform__thumb img { filter: saturate(1); }
.atelier-transform__chapter.is-active .atelier-transform__chapter-progress { transform: scaleX(1); }
.atelier-transform__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Proof + CTA */
.atelier-transform__proof { display: flex; align-items: center; justify-content: space-between; gap: 3em; margin-top: 4.5em; padding-top: 2.6em; border-top: 1px solid var(--at-line); }
.atelier-transform__stats { display: flex; align-items: stretch; }
.atelier-transform__stat { display: flex; flex-direction: column; gap: .5em; padding-inline: 3em; border-inline-start: 1px solid var(--at-line); }
.atelier-transform__stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.atelier-transform__stat strong { color: var(--at-gold); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.atelier-transform__stat strong em { margin-inline-start: .08em; font-size: .6em; font-style: normal; letter-spacing: 0; }
.atelier-transform__stat > span { color: var(--at-muted); font-size: 13px; font-weight: 700; letter-spacing: .8px; }
.atelier-transform__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--at-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-transform__cta i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--at-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-transform__cta:hover { background: var(--at-gold); color: #171713; }
.atelier-transform__cta:hover i { transform: translateX(3px); background: #171713; color: var(--at-gold-light); }

/* TABLET */
@media (max-width: 1024px) {
  .atelier-transform { padding: 5em 2.5em; }
  .atelier-transform__head { grid-template-columns: 1fr; gap: 1.8em; margin-bottom: 2.6em; }
  .atelier-transform__head-side { max-width: 520px; }
  .atelier-transform__lens { --at-slant: 36px; height: clamp(440px, 52vw, 520px); }
  .atelier-transform__caption { left: 10%; max-width: 360px; }
  .atelier-transform__stamp { width: 108px; height: 108px; bottom: -40px; }
  .atelier-transform__stamp-core b { font-size: 24px; }
  .atelier-transform__chapters { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2em 2.5em; margin-top: 5.5em; }
  .atelier-transform__proof { margin-top: 4em; gap: 2em; }
  .atelier-transform__stat { padding-inline: 2em; }
}

/* MOBILE */
@media (max-width: 767px) {
  .atelier-transform { padding: 5em 1.5em; }
  .atelier-transform::before { width: 340px; height: 340px; top: -120px; inset-inline-end: -140px; }
  .atelier-transform__title { font-size: clamp(1.8rem, 6.5vw, 2.3rem); line-height: 1.2; }
  .atelier-transform__head-side { padding-inline-start: 1.2em; }
  .atelier-transform__lens { --at-slant: 24px; height: 540px; }
  .atelier-transform__knob { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
  .atelier-transform__knob svg { width: 18px; height: 18px; }
  .atelier-transform__hint { display: none; }
  .atelier-transform__label { top: 9%; padding: .45em .9em; letter-spacing: .8px; }
  .atelier-transform__label--before { left: 19%; }
  .atelier-transform__label--after { right: 19%; }
  .atelier-transform__caption { left: 50%; bottom: 11%; width: min(250px, calc(100% - 96px)); align-items: center; gap: .45em; text-align: center; transform: translateX(-50%); }
  .atelier-transform__caption-kicker { font-size: 13px; letter-spacing: .8px; }
  .atelier-transform__caption-title { font-size: 1.6rem; }
  .atelier-transform__caption-vehicle::before { display: none; }
  .atelier-transform__caption-note { font-size: 14px; line-height: 1.65; }
  .atelier-transform__stamp { width: 88px; height: 88px; bottom: -34px; inset-inline-end: 8%; }
  .atelier-transform__stamp-core b { font-size: 20px; }
  .atelier-transform__stamp-core small { font-size: 13px; }
  .atelier-transform__chapters { display: flex; flex-direction: column; gap: 0; margin-top: 4.5em; border-bottom: 1px solid var(--at-line); }
  .atelier-transform__chapter { padding: 1.1em 0; gap: 1em; }
  .atelier-transform__thumb { flex-basis: 60px; width: 60px; height: 60px; }
  .atelier-transform__chapter-title { font-size: 1.05rem; }
  .atelier-transform__proof { flex-direction: column; align-items: stretch; gap: 2.2em; margin-top: 3em; padding-top: 2em; }
  .atelier-transform__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  .atelier-transform__stat { padding-inline: .9em; }
  .atelier-transform__stat strong { font-size: 1.7rem; }
  .atelier-transform__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-transform__stamp-text, .atelier-transform__knob::after { animation: none; }
}
/* =========================================================
   AUTOMOTIVE ATELIER | CERAMIC COATING TECHNOLOGY
========================================================= */
.atelier-ceramic { --ac-gold: #B99A63; --ac-gold-light: #D8C49A; --ac-gold-deep: #947545; --ac-bg: #FBFAF7; --ac-ink: #25251F; --ac-muted: #77766F; --ac-line: rgba(39,39,33,.15); --ac-glass: rgba(251,250,247,.86); position: relative; isolation: isolate; padding: 6em 5em; background: var(--ac-bg); color: var(--ac-ink); overflow: hidden; font-family: "DM Sans", sans-serif; }
.atelier-ceramic * { box-sizing: border-box; }
.atelier-ceramic::before { content: ""; position: absolute; z-index: -1; top: 46%; left: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.15), transparent 62%); pointer-events: none; }
.atelier-ceramic__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-ceramic__head { max-width: 780px; margin: 0 auto; text-align: center; }
.atelier-ceramic__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--ac-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-ceramic__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--ac-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }
.atelier-ceramic__title { margin: 1em 0 0; color: var(--ac-ink); font-family: "Manrope", sans-serif; font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-ceramic__title span { color: var(--ac-gold); font-weight: 400; }
.atelier-ceramic__intro { max-width: 580px; margin: 1.6em auto 0; color: var(--ac-muted); font-size: 14px; line-height: 1.8; }
.atelier-ceramic__mark { display: block; position: relative; width: 1px; height: 56px; margin: 2.2em auto 0; background: linear-gradient(to bottom, var(--ac-gold), transparent); }
.atelier-ceramic__mark::before { content: ""; position: absolute; top: -4px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--ac-gold); }

/* Showcase */
.atelier-ceramic__showcase { --gap: clamp(2.5em, 4.2vw, 4.5em); --edge: 28px; display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,460px) minmax(0,1fr); grid-template-rows: 1fr 1fr; column-gap: var(--gap); margin-top: 3em; padding-bottom: 1.6em; }
.atelier-ceramic__figure { position: relative; grid-column: 2; grid-row: 1 / 3; width: 100%; aspect-ratio: 4 / 5.3; }
.atelier-ceramic__feature--1 { grid-column: 1; grid-row: 1; }
.atelier-ceramic__feature--2 { grid-column: 1; grid-row: 2; }
.atelier-ceramic__feature--3 { grid-column: 3; grid-row: 1; }
.atelier-ceramic__feature--4 { grid-column: 3; grid-row: 2; }

/* Orbits */
.atelier-ceramic__orbits { position: absolute; inset: -4.5% -7%; color: var(--ac-gold); pointer-events: none; }
.atelier-ceramic__orbits svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Oval */
.atelier-ceramic__oval { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 34% 24%, #4A4435 0%, #1C1C19 58%, #0F0F0D 100%); box-shadow: 0 60px 100px -40px rgba(25,26,24,.65); }
.atelier-ceramic__oval img { position: absolute; width: 108%; height: 108%; object-fit: cover; transition: opacity .3s ease; }
.atelier-ceramic__oval img.is-missing { opacity: 0; }
.atelier-ceramic__shade { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 50% 50%, transparent 52%, rgba(10,10,9,.42) 100%), linear-gradient(0deg, rgba(10,10,9,.4), transparent 38%); pointer-events: none; }
.atelier-ceramic__beads { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.atelier-ceramic__bead { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0, rgba(255,255,255,.38) 22%, rgba(205,226,242,.14) 55%, rgba(255,255,255,.04) 76%); box-shadow: inset 0 -3px 6px rgba(255,255,255,.2), 0 7px 12px rgba(0,0,0,.35); }
.atelier-ceramic__sheen { position: absolute; top: -10%; bottom: -10%; left: 0; z-index: 3; width: 42%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.24), transparent); transform: translateX(-160%) skewX(-14deg); pointer-events: none; }

/* Badge + pill */
.atelier-ceramic__badge { position: absolute; z-index: 5; top: 9%; inset-inline-end: -2%; width: 96px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--ac-gold); color: #171713; box-shadow: 0 22px 46px -16px rgba(148,117,69,.7); }
.atelier-ceramic__badge b { font-family: "Manrope", sans-serif; font-size: 28px; font-weight: 500; letter-spacing: -1px; line-height: 1; }
.atelier-ceramic__badge small { margin-top: .4em; font-size: 13px; font-weight: 700; letter-spacing: 1.2px; opacity: .72; }
.atelier-ceramic__pillwrap { position: absolute; z-index: 5; left: 0; right: 0; bottom: -1.3em; display: flex; justify-content: center; pointer-events: none; }
.atelier-ceramic__pill { display: inline-flex; align-items: center; gap: .8em; padding: .85em 1.6em; border: 1px solid rgba(185,154,99,.65); border-radius: 999px; background: var(--ac-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ac-ink); font-size: 13px; font-weight: 700; letter-spacing: .9px; white-space: nowrap; box-shadow: 0 16px 36px -16px rgba(25,26,24,.4); }
.atelier-ceramic__pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ac-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }

/* Features */
.atelier-ceramic__feature { position: relative; align-self: center; max-width: 360px; }
.atelier-ceramic__feature--a { margin-inline-start: auto; padding-inline-end: 1.8em; text-align: end; }
.atelier-ceramic__feature--b { margin-inline-end: auto; padding-inline-start: 1.8em; text-align: start; }
.atelier-ceramic__f-top { display: flex; align-items: center; gap: 1em; }
.atelier-ceramic__feature--a .atelier-ceramic__f-top { justify-content: flex-end; flex-direction: row-reverse; }
.atelier-ceramic__f-num { color: var(--ac-gold); font-family: "Manrope", sans-serif; font-size: 36px; font-weight: 400; letter-spacing: -1.8px; line-height: 1; }
.atelier-ceramic__f-kicker { color: var(--ac-muted); font-size: 13px; font-weight: 700; letter-spacing: .6px; line-height: 1.5; }
.atelier-ceramic__f-title { margin: .9em 0 0; color: var(--ac-ink); font-family: "Manrope", sans-serif; font-size: 1.2rem; font-weight: 500; letter-spacing: -.025em; line-height: 1.3; transition: color .3s ease; }
.atelier-ceramic__f-text { margin: .7em 0 0; color: var(--ac-muted); font-size: 14px; line-height: 1.75; }
.atelier-ceramic__feature.is-active .atelier-ceramic__f-title, .atelier-ceramic__feature:hover .atelier-ceramic__f-title { color: var(--ac-gold); }

/* Connector link + dot */
.atelier-ceramic__link { position: absolute; top: 50%; width: calc(var(--gap) + var(--edge)); height: 1px; background: var(--ac-line); transition: background .4s ease; pointer-events: none; }
.atelier-ceramic__feature--a .atelier-ceramic__link { inset-inline-end: calc(-1 * (var(--gap) + var(--edge))); transform-origin: left; }
.atelier-ceramic__feature--b .atelier-ceramic__link { inset-inline-start: calc(-1 * (var(--gap) + var(--edge))); transform-origin: right; }
.atelier-ceramic__link i { position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border: 1.5px solid var(--ac-gold); border-radius: 50%; background: var(--ac-bg); transition: background .4s ease; }
.atelier-ceramic__link i::after { content: ""; position: absolute; inset: -1.5px; border: 1px solid var(--ac-gold); border-radius: 50%; opacity: 0; }
.atelier-ceramic__feature--a .atelier-ceramic__link i { inset-inline-end: -5px; }
.atelier-ceramic__feature--b .atelier-ceramic__link i { inset-inline-start: -5px; }
.atelier-ceramic__feature.is-active .atelier-ceramic__link { background: var(--ac-gold); }
.atelier-ceramic__feature.is-active .atelier-ceramic__link i { background: var(--ac-gold); }
.atelier-ceramic__feature.is-active .atelier-ceramic__link i::after { animation: atelierCeramicPulse 2s ease-out infinite; }
@keyframes atelierCeramicPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }

/* Lower */
.atelier-ceramic__lower { display: grid; grid-template-columns: 1.15fr .85fr; align-items: start; gap: 5em; margin-top: 5.5em; padding-top: 4em; border-top: 1px solid var(--ac-line); }
.atelier-ceramic__overline { display: block; margin-bottom: .9em; color: var(--ac-gold); font-size: 13px; font-weight: 700; letter-spacing: 1.8px; }
.atelier-ceramic__sub { margin: 0; color: var(--ac-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.75rem, 2.5vw, 2.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.2; }
.atelier-ceramic__sub em { color: var(--ac-gold); font-style: normal; font-weight: 400; }

.atelier-ceramic__layers { margin: 2.4em 0 0; padding: 0; list-style: none; }
.atelier-ceramic__layer { display: grid; grid-template-columns: 150px minmax(0,1fr) 160px; align-items: center; gap: 1.6em; padding: 1.25em 0; }
.atelier-ceramic__layer-name { color: var(--ac-ink); font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: -.02em; }
.atelier-ceramic__layer-desc { color: var(--ac-muted); font-size: 14px; text-align: end; }
.atelier-ceramic__rule { position: relative; display: block; height: 1px; background: var(--ac-line); transform-origin: left; }
.atelier-ceramic__layer--clear .atelier-ceramic__rule { height: 2px; background: rgba(39,39,33,.28); }
.atelier-ceramic__layer--colour .atelier-ceramic__rule { height: 3px; background: rgba(39,39,33,.22); }
.atelier-ceramic__layer--primer .atelier-ceramic__rule { height: 2px; background: rgba(39,39,33,.16); }
.atelier-ceramic__layer--panel .atelier-ceramic__rule { height: 1px; background: rgba(39,39,33,.3); }
.atelier-ceramic__layer--coat .atelier-ceramic__layer-name { color: var(--ac-gold); }
.atelier-ceramic__layer--coat .atelier-ceramic__rule { height: 3px; background: linear-gradient(90deg, var(--ac-gold-deep), var(--ac-gold-light), var(--ac-gold-deep)); box-shadow: 0 0 18px rgba(185,154,99,.55); }
.atelier-ceramic__roll { position: absolute; left: 8%; bottom: -5px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0, rgba(255,255,255,.7) 28%, rgba(185,154,99,.35) 72%); box-shadow: 0 4px 8px rgba(25,26,24,.28); }

/* Specs */
.atelier-ceramic__spec { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5em; padding: 1.4em 0; border-bottom: 1px solid var(--ac-line); }
.atelier-ceramic__spec strong { color: var(--ac-gold); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3vw, 2.7rem); font-weight: 400; letter-spacing: -.05em; line-height: 1; white-space: nowrap; }
.atelier-ceramic__spec strong em { margin-inline-start: .1em; font-size: .52em; font-style: normal; letter-spacing: 0; }
.atelier-ceramic__spec > span { color: var(--ac-muted); font-size: 13px; font-weight: 700; letter-spacing: .8px; text-align: end; }
.atelier-ceramic__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; margin-top: 2.2em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--ac-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-ceramic__cta i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ac-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-ceramic__cta:hover { background: var(--ac-gold); color: #171713; }
.atelier-ceramic__cta:hover i { transform: translateX(3px); background: #171713; color: var(--ac-gold-light); }

/* TABLET */
@media (max-width: 1024px) {
  .atelier-ceramic { padding: 5em 2.5em; }
  .atelier-ceramic__showcase { grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: auto; column-gap: 3em; row-gap: 2.6em; margin-top: 2.6em; padding-bottom: 0; }
  .atelier-ceramic__figure { grid-column: 1 / -1; grid-row: auto; width: min(100%, 440px); margin: 0 auto 2.4em; }
  .atelier-ceramic__feature--1, .atelier-ceramic__feature--2, .atelier-ceramic__feature--3, .atelier-ceramic__feature--4 { grid-column: auto; grid-row: auto; }
  .atelier-ceramic__feature { align-self: start; max-width: none; margin: 0; padding: 1.6em 0 0; border-top: 1px solid var(--ac-line); text-align: start; }
  .atelier-ceramic__feature--a, .atelier-ceramic__feature--b { margin: 0; padding: 1.6em 0 0; text-align: start; }
  .atelier-ceramic__feature--a .atelier-ceramic__f-top { justify-content: flex-start; flex-direction: row; }
  .atelier-ceramic__link { display: none; }
  .atelier-ceramic__lower { grid-template-columns: 1fr; gap: 3.5em; margin-top: 4.5em; padding-top: 3.5em; }
  .atelier-ceramic__specs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 2em; align-items: start; }
  .atelier-ceramic__specs .atelier-ceramic__overline { grid-column: 1 / -1; }
  .atelier-ceramic__spec { flex-direction: column; align-items: flex-start; gap: .7em; border-bottom: 0; border-top: 1px solid var(--ac-line); }
  .atelier-ceramic__spec > span { text-align: start; }
  .atelier-ceramic__cta { grid-column: 1 / -1; justify-self: start; }
}

/* MOBILE */
@media (max-width: 767px) {
  .atelier-ceramic { padding: 5em 1.5em; }
  .atelier-ceramic::before { width: 560px; height: 560px; }
  .atelier-ceramic__title { font-size: clamp(1.9rem, 7vw, 2.4rem); line-height: 1.18; }
  .atelier-ceramic__mark { height: 44px; margin-top: 1.8em; }
  .atelier-ceramic__showcase { grid-template-columns: minmax(0,1fr); row-gap: 2em; }
  .atelier-ceramic__figure { width: min(100%, 360px); margin-bottom: 2em; }
  .atelier-ceramic__orbits { inset: -4% -4.5%; }
  .atelier-ceramic__badge { width: 72px; height: 72px; top: 7%; inset-inline-end: -1%; }
  .atelier-ceramic__badge b { font-size: 21px; }
  .atelier-ceramic__badge small { font-size: 13px; letter-spacing: .8px; }
  .atelier-ceramic__pill { padding: .75em 1.2em; letter-spacing: .6px; }
  .atelier-ceramic__f-num { font-size: 30px; }
  .atelier-ceramic__lower { gap: 3em; margin-top: 4em; padding-top: 3em; }
  .atelier-ceramic__layers { margin-top: 1.6em; }
  .atelier-ceramic__layer { grid-template-columns: minmax(0,1fr) auto; row-gap: .7em; padding: 1.1em 0; }
  .atelier-ceramic__layer .atelier-ceramic__rule { grid-column: 1 / -1; grid-row: 2; }
  .atelier-ceramic__layer-desc { grid-row: 1; grid-column: 2; }
  .atelier-ceramic__layer-name { grid-row: 1; grid-column: 1; }
  .atelier-ceramic__specs { display: block; }
  .atelier-ceramic__spec { flex-direction: row; align-items: baseline; gap: 1em; border-top: 0; border-bottom: 1px solid var(--ac-line); padding: 1.2em 0; }
  .atelier-ceramic__spec > span { text-align: end; }
  .atelier-ceramic__cta { display: flex; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-ceramic__feature.is-active .atelier-ceramic__link i::after { animation: none; }
}

/* =========================================================
   AUTOMOTIVE ATELIER | PAINT CORRECTION & RESTORATION
========================================================= */
.atelier-correction { --ap-gold: #B99A63; --ap-gold-light: #D8C49A; --ap-gold-deep: #947545; --ap-bg: #F1EEE8; --ap-ink: #25251F; --ap-muted: #77766F; --ap-line: rgba(39,39,33,.15); --ap-glass: rgba(241,238,232,.88); position: relative; isolation: isolate; padding: 6em 5em; background: var(--ap-bg); color: var(--ap-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-correction * { box-sizing: border-box; }
.atelier-correction::before { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-start: -220px; width: 620px; height: 620px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-correction::after { content: ""; position: absolute; z-index: -1; top: 8%; inset-inline-end: -200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.14), transparent 68%); pointer-events: none; }
.atelier-correction__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-correction__head { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 4em; }
.atelier-correction__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--ap-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-correction__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--ap-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }
.atelier-correction__title { margin: 1em 0 0; color: var(--ap-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-correction__title span { color: var(--ap-gold); font-weight: 400; }
.atelier-correction__head-side { max-width: 380px; padding-inline-start: 1.8em; border-inline-start: 1px solid var(--ap-gold); }
.atelier-correction__head-side p { margin: 0 0 1.3em; color: var(--ap-muted); font-size: 14px; line-height: 1.8; }
.atelier-correction__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--ap-ink); font-size: 13px; font-weight: 700; letter-spacing: .7px; }
.atelier-correction__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--ap-gold); border-radius: 50%; color: var(--ap-gold); font-size: 17px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-correction__text-link:hover i { transform: rotate(45deg); background: var(--ap-gold); color: #fff; }

/* Journey */
.atelier-correction__journey { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); column-gap: 5em; align-items: start; margin-top: 4.5em; }
.atelier-correction__visual { position: sticky; top: 8.5em; align-self: start; padding-bottom: 1.4em; }
.atelier-correction__disc { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 1 / 1; }

.atelier-correction__gauge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.atelier-correction__gauge-track { fill: none; stroke: var(--ap-gold); stroke-width: .5; opacity: .35; }
.atelier-correction__gauge-fill { fill: none; stroke: var(--ap-gold); stroke-width: 1.5; stroke-linecap: round; }
.atelier-correction__ticks { fill: none; stroke: var(--ap-gold); stroke-width: .7; stroke-dasharray: .7 3.1; opacity: .75; transform-origin: 100px 100px; animation: atelierCorrectionSpin 90s linear infinite; }
@keyframes atelierCorrectionSpin { to { transform: rotate(360deg); } }

.atelier-correction__panel { position: absolute; inset: 6.5%; border-radius: 50%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 30% 24%, #5A5240 0%, #22221E 55%, #0F0F0D 100%); box-shadow: 0 50px 90px -36px rgba(25,26,24,.6); }
.atelier-correction__panel img { position: absolute;width: 108%; height: 108%; object-fit: cover; filter: brightness(.72) saturate(.6) contrast(.9); transition: opacity .3s ease; }
.atelier-correction__panel img.is-missing { opacity: 0; }
.atelier-correction__swirls { position: absolute; inset: 0; z-index: 1; background:
  repeating-radial-gradient(circle at 26% 32%, transparent 0 9px, rgba(255,255,255,.13) 9px 10px, transparent 10px 22px),
  repeating-radial-gradient(circle at 72% 62%, transparent 0 13px, rgba(255,255,255,.1) 13px 14px, transparent 14px 30px),
  repeating-radial-gradient(circle at 56% 16%, transparent 0 7px, rgba(255,255,255,.09) 7px 8px, transparent 8px 18px),
  repeating-radial-gradient(circle at 18% 78%, transparent 0 11px, rgba(255,255,255,.08) 11px 12px, transparent 12px 26px); mix-blend-mode: screen; pointer-events: none; }
.atelier-correction__haze { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 40%, rgba(150,144,128,.5), rgba(110,104,92,.38)); pointer-events: none; }
.atelier-correction__vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(circle at 50% 50%, transparent 54%, rgba(10,10,9,.45) 100%), linear-gradient(0deg, rgba(10,10,9,.4), transparent 38%); pointer-events: none; }
.atelier-correction__sheen { position: absolute; top: -10%; bottom: -10%; left: 0; z-index: 3; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent); transform: translateX(-160%) skewX(-14deg); pointer-events: none; }

.atelier-correction__badge { position: absolute; z-index: 5; top: 6%; inset-inline-end: -1%; width: 98px; height: 98px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--ap-gold); color: #171713; box-shadow: 0 22px 46px -16px rgba(148,117,69,.7); }
.atelier-correction__badge b { display: flex; align-items: baseline; font-family: "Manrope", sans-serif; font-size: 26px; font-weight: 500; letter-spacing: -1px; line-height: 1; }
.atelier-correction__badge b em { margin-inline-start: .08em; font-size: .56em; font-style: normal; letter-spacing: 0; }
.atelier-correction__badge small { margin-top: .5em; font-size: 13px; font-weight: 700; letter-spacing: .5px; opacity: .72; }
.atelier-correction__pillwrap { position: absolute; z-index: 5; left: 0; right: 0; bottom: -1.3em; display: flex; justify-content: center; pointer-events: none; }
.atelier-correction__pill { display: inline-flex; align-items: center; gap: .8em; padding: .85em 1.6em; border: 1px solid rgba(185,154,99,.65); border-radius: 999px; background: var(--ap-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ap-ink); font-size: 13px; font-weight: 700; letter-spacing: .9px; white-space: nowrap; box-shadow: 0 16px 36px -16px rgba(25,26,24,.4); }
.atelier-correction__pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ap-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }

/* Steps + spine */
.atelier-correction__stepswrap { position: relative; }
.atelier-correction__spine { position: absolute; top: 3em; bottom: 3em; inset-inline-start: 22px; width: 1px; background: var(--ap-line); pointer-events: none; }
.atelier-correction__spine i { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--ap-gold-light), var(--ap-gold)); transform: scaleY(0); transform-origin: top; }
.atelier-correction__steps { margin: 0; padding: 0; list-style: none; }
.atelier-correction__step { position: relative; display: flex; align-items: center; min-height: clamp(280px, 40vh, 380px); padding: 2.4em 0 2.4em 5.2em; padding-inline: 5.2em 0; opacity: .42; transition: opacity .5s ease; }
.atelier-correction__step.is-active { opacity: 1; }
.atelier-correction__node { position: absolute; top: 50%; inset-inline-start: 0; z-index: 2; width: 46px; height: 46px; margin-top: -23px; display: grid; place-items: center; border: 1px solid var(--ap-gold); border-radius: 50%; background: var(--ap-bg); color: var(--ap-gold-deep); font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .5px; transition: background .4s ease, color .4s ease; }
.atelier-correction__node::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--ap-gold); border-radius: 50%; opacity: 0; pointer-events: none; }
.atelier-correction__step.is-done .atelier-correction__node { background: rgba(185,154,99,.2); }
.atelier-correction__step.is-active .atelier-correction__node { background: var(--ap-gold); color: #171713; }
.atelier-correction__step.is-active .atelier-correction__node::after { animation: atelierCorrectionPulse 2.2s ease-out infinite; }
@keyframes atelierCorrectionPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.atelier-correction__step-body { max-width: 500px; }
.atelier-correction__kicker { display: block; color: var(--ap-muted); font-size: 13px; font-weight: 700; letter-spacing: .6px; line-height: 1.5; }
.atelier-correction__step-title { margin: .7em 0 0; color: var(--ap-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; transition: color .4s ease; }
.atelier-correction__step.is-active .atelier-correction__step-title { color: var(--ap-gold); }
.atelier-correction__step-text { margin: 1em 0 0; color: var(--ap-muted); font-size: 14px; line-height: 1.8; }
.atelier-correction__outcome { display: inline-flex; align-items: center; gap: .9em; margin-top: 1.3em; color: var(--ap-ink); font-size: 13px; font-weight: 700; letter-spacing: .5px; line-height: 1.5; }
.atelier-correction__outcome::before { content: ""; flex: 0 0 30px; height: 1px; background: var(--ap-gold); }

/* Marquee */
.atelier-correction__marquee { position: relative; margin-top: 4em; padding-block: 1.6em; border-top: 1px solid var(--ap-line); border-bottom: 1px solid var(--ap-line); overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.atelier-correction__marquee-track { display: flex; width: max-content; }
.atelier-correction__marquee-group { display: flex; align-items: center; flex-shrink: 0; gap: 2.2em; padding-inline-end: 2.2em; white-space: nowrap; }
.atelier-correction__marquee-group span { color: var(--ap-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.6rem, 2.8vw, 2.5rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.2; }
.atelier-correction__marquee-group span:nth-of-type(even) { color: var(--ap-gold); }
.atelier-correction__marquee-group i { color: var(--ap-gold); font-size: 16px; font-style: normal; }

/* Closing */
.atelier-correction__closing { display: grid; grid-template-columns: 50px minmax(0,1fr) auto; align-items: center; gap: 1.3em; margin-top: 3em; }
.atelier-correction__closing-mark { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--ap-gold); border-radius: 50%; color: var(--ap-gold); font-family: "Manrope", sans-serif; font-size: 23px; font-weight: 400; }
.atelier-correction__closing-copy { padding-inline-start: 1.2em; border-inline-start: 1px solid var(--ap-gold); }
.atelier-correction__closing-copy > span { color: var(--ap-muted); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; }
.atelier-correction__closing-copy p { margin: .45em 0 0; color: var(--ap-muted); font-size: 14px; line-height: 1.6; }
.atelier-correction__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--ap-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-correction__cta i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--ap-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-correction__cta:hover { background: var(--ap-gold); color: #171713; }
.atelier-correction__cta:hover i { transform: translateX(3px); background: #171713; color: var(--ap-gold-light); }

/* TABLET */
@media (max-width: 1024px) {
  .atelier-correction { padding: 5em 2.5em; }
  .atelier-correction__head { grid-template-columns: 1fr; gap: 1.8em; }
  .atelier-correction__head-side { max-width: 520px; }
  .atelier-correction__journey { grid-template-columns: minmax(0,1fr); row-gap: 3.5em; margin-top: 3.2em; }
  .atelier-correction__visual { position: relative; top: auto; padding-bottom: 1.6em; }
  .atelier-correction__disc { max-width: 440px; }
  .atelier-correction__step { min-height: 0; padding-block: 2em; }
  .atelier-correction__step-body { max-width: 600px; }
  .atelier-correction__marquee { margin-top: 3.5em; }
}

/* MOBILE */
@media (max-width: 767px) {
  .atelier-correction { padding: 5em 1.5em; }
  .atelier-correction::before { width: 380px; height: 380px; bottom: -160px; inset-inline-start: -160px; }
  .atelier-correction__title { font-size: clamp(1.8rem, 6.8vw, 2.3rem); line-height: 1.2; }
  .atelier-correction__head-side { padding-inline-start: 1.2em; }
  .atelier-correction__disc { max-width: 360px; }
  .atelier-correction__badge { width: 76px; height: 76px; top: 5%; inset-inline-end: -2%; }
  .atelier-correction__badge b { font-size: 20px; }
  .atelier-correction__badge small { font-size: 13px; letter-spacing: .3px; }
  .atelier-correction__pill { padding: .75em 1.2em; letter-spacing: .6px; }
  .atelier-correction__spine { inset-inline-start: 18px; top: 2.4em; bottom: 2.4em; }
  .atelier-correction__step { padding-block: 1.7em; padding-inline: 4.1em 0; }
  .atelier-correction__node { width: 38px; height: 38px; margin-top: -19px; font-size: 13px; }
  .atelier-correction__step-title { font-size: 1.45rem; }
  .atelier-correction__outcome { align-items: flex-start; }
  .atelier-correction__outcome::before { margin-top: .75em; flex-basis: 22px; }
  .atelier-correction__marquee { margin-top: 3em; padding-block: 1.2em; }
  .atelier-correction__closing { grid-template-columns: 42px minmax(0,1fr); gap: 1em; margin-top: 2.5em; }
  .atelier-correction__closing-mark { width: 38px; height: 38px; font-size: 20px; }
  .atelier-correction__cta { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-correction__ticks, .atelier-correction__step.is-active .atelier-correction__node::after { animation: none; }
  .atelier-correction__marquee-track { width: auto; }
  .atelier-correction__marquee-group { flex-wrap: wrap; white-space: normal; }
  .atelier-correction__marquee-group[aria-hidden="true"] { display: none; }
  .atelier-correction__marquee { -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================
   AUTOMOTIVE ATELIER | VEHICLE SHOWROOM GALLERY
========================================================= */
.atelier-showroom { --sr-gold: #B99A63; --sr-gold-light: #D8C49A; --sr-gold-deep: #947545; --sr-solid: #141512; --sr-ink: #F0EEE8; --sr-muted: #B0ADA3; --sr-line: rgba(235,229,216,.16); --sr-sw: clamp(270px, 22vw, 340px); --sr-sh: calc(var(--sr-sw) * 1.3333); position: relative; padding: 6em 5em; background: radial-gradient(ellipse at 50% 42%, #26251F 0%, #181915 46%, #11120F 100%); color: var(--sr-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-showroom * { box-sizing: border-box; }
.atelier-showroom::before { content: ""; position: absolute; top: -200px; inset-inline-start: -220px; width: 580px; height: 580px; border: 1px solid rgba(185,154,99,.2); border-radius: 50%; pointer-events: none; }
.atelier-showroom::after { content: ""; position: absolute; bottom: -260px; inset-inline-end: -200px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.14), transparent 68%); pointer-events: none; }
.atelier-showroom__inner { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; }

/* Head */
.atelier-showroom__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; }
.atelier-showroom__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--sr-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-showroom__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--sr-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }
.atelier-showroom__title { margin: 1em 0 0; color: var(--sr-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-showroom__title span { color: var(--sr-gold); font-weight: 400; }
.atelier-showroom__intro { max-width: 470px; margin: 1.5em 0 0; padding-inline-start: 1.5em; border-inline-start: 1px solid var(--sr-gold); color: var(--sr-muted); font-size: 14px; line-height: 1.8; }
.atelier-showroom__controls { display: flex; align-items: center; gap: 2.2em; flex-shrink: 0; }
.atelier-showroom__count { display: inline-flex; align-items: baseline; gap: .8em; font-family: "Manrope", sans-serif; }
.atelier-showroom__count b { color: var(--sr-gold); font-size: clamp(2.2rem, 3.4vw, 3.2rem); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.atelier-showroom__count i { width: 34px; height: 1px; background: var(--sr-gold); align-self: center; }
.atelier-showroom__count span { color: var(--sr-muted); font-size: 14px; font-weight: 700; letter-spacing: 1px; }
.atelier-showroom__arrows { display: flex; gap: .8em; direction: ltr; }
.atelier-showroom__arrow { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 1px solid rgba(185,154,99,.7); border-radius: 50%; background: transparent; color: var(--sr-gold-light); font-size: 19px; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease; }
.atelier-showroom__arrow:hover { background: var(--sr-gold); color: #171713; transform: scale(1.06); }
.atelier-showroom__arrow:focus-visible { outline: 2px solid var(--sr-gold-light); outline-offset: 3px; }

/* Stage */
.atelier-showroom__stage { position: relative; height: calc(var(--sr-sh) + 8.5em); margin-top: 3em; margin-inline: calc(50% - 50vw); direction: ltr; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.atelier-showroom__stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(216,196,154,.55); border-radius: 36px; }
.atelier-showroom__halo { position: absolute; z-index: 0; left: 0; right: 0; width: calc(var(--sr-sw) * 3.4); max-width: 94vw; margin-inline: auto; aspect-ratio: 1 / 1; top: calc(1.5em + var(--sr-sh) / 2 - var(--sr-sw) * 1.7); border: 1px solid rgba(185,154,99,.2); border-radius: 50%; pointer-events: none; }
.atelier-showroom__halo::after { content: ""; position: absolute; inset: 9%; border: 1px dashed rgba(185,154,99,.22); border-radius: 50%; animation: atelierShowroomSpin 90s linear infinite; }
@keyframes atelierShowroomSpin { to { transform: rotate(360deg); } }
.atelier-showroom__floor { position: absolute; z-index: 0; left: 0; right: 0; width: calc(var(--sr-sw) * 1.9); height: calc(var(--sr-sw) * .4); margin-inline: auto; top: calc(1.5em + var(--sr-sh) - var(--sr-sw) * .16); pointer-events: none; }
.atelier-showroom__floor i { position: absolute; inset: 0; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; }
.atelier-showroom__floor i:nth-child(2) { inset: 14% 9%; border: 1px dashed rgba(185,154,99,.3); }
.atelier-showroom__floor i:nth-child(3) { inset: -34% -12%; border: 0; background: radial-gradient(ellipse, rgba(185,154,99,.26), transparent 66%); }

.atelier-showroom__slides { position: absolute; inset: 0; z-index: 1; margin: 0; padding: 0; list-style: none; }
.atelier-showroom__slide { position: absolute; top: 1.5em; left: 50%; width: var(--sr-sw); height: var(--sr-sh); margin-left: calc(var(--sr-sw) / -2); cursor: pointer; will-change: transform, opacity; }
.atelier-showroom__slide.is-active { cursor: default; }
.atelier-showroom__frame { position: relative; display: block; width: 100%; height: 100%; border-radius: 999px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 30% 25%, #EBDDB8, #B99A63 45%, #3A3225); box-shadow: 0 0 0 0 var(--sr-solid), 0 0 0 0 var(--sr-gold), 0 30px 60px -30px rgba(0,0,0,.7); transition: box-shadow .7s ease; }
.atelier-showroom__slide:nth-child(even) .atelier-showroom__frame { background: radial-gradient(circle at 70% 25%, #5A5446, #25251F 55%, #0F0F0D); }
.atelier-showroom__slide.is-active .atelier-showroom__frame { box-shadow: 0 0 0 7px var(--sr-solid), 0 0 0 8px var(--sr-gold), 0 70px 110px -36px rgba(0,0,0,.95); }
.atelier-showroom__imgwrap { position: absolute; inset: -6%; transition: transform 7s ease-out; }
.atelier-showroom__slide.is-active .atelier-showroom__imgwrap { transform: scale(1.07); }
.atelier-showroom__imgwrap img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: opacity .3s ease; }
.atelier-showroom__imgwrap img.is-missing { opacity: 0; }
.atelier-showroom__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,10,9,.5), transparent 40%); pointer-events: none; }
.atelier-showroom__dim { position: absolute; inset: 0; z-index: 2; background: #0E0F0D; opacity: .5; pointer-events: none; }
.atelier-showroom__shine { position: absolute; top: -10%; bottom: -10%; left: 0; z-index: 3; width: 38%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.26), transparent); transform: translateX(-160%) skewX(-14deg); pointer-events: none; }
.atelier-showroom__tag { position: absolute; z-index: 4; bottom: 2.2em; left: 50%; transform: translateX(-50%); padding: .5em 1.2em; border: 1px solid rgba(216,196,154,.6); border-radius: 999px; background: rgba(20,20,18,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--sr-gold-light); font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.atelier-showroom__slide.is-active .atelier-showroom__tag { opacity: 1; }

/* Caption */
.atelier-showroom__caption { display: flex; flex-direction: column; align-items: center; max-width: 620px; margin: 1.5em auto 0; text-align: center; }
.atelier-showroom__kicker { color: var(--sr-gold-light); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; line-height: 1.5; }
.atelier-showroom__cap-title { margin: .6em 0 0; color: #fff; font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 2.8vw, 2.7rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-showroom__pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8em; margin-top: 1.3em; }
.atelier-showroom__pill { display: inline-flex; align-items: center; gap: .7em; padding: .6em 1.3em; border: 1px solid rgba(185,154,99,.65); border-radius: 999px; color: var(--sr-ink); font-size: 13px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.atelier-showroom__pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--sr-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.2); }
.atelier-showroom__pill--soft { border-color: var(--sr-line); color: var(--sr-muted); }
.atelier-showroom__note { max-width: 520px; margin: 1.3em 0 0; color: var(--sr-muted); font-size: 14px; line-height: 1.8; }

/* Dot timeline */
.atelier-showroom__ticks { display: flex; align-items: center; justify-content: center; gap: .5em; margin-top: 2.4em; direction: ltr; }
.atelier-showroom__tick { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 .35em; border: 0; background: transparent; cursor: pointer; }
.atelier-showroom__tick:focus-visible { outline: 2px solid var(--sr-gold-light); outline-offset: 2px; border-radius: 999px; }
.atelier-showroom__dot { position: relative; display: block; width: 10px; height: 10px; border: 1px solid rgba(216,196,154,.55); border-radius: 999px; overflow: hidden; transition: width .5s ease, border-color .3s ease; }
.atelier-showroom__dot i { position: absolute; inset: 0; background: var(--sr-gold); transform: scaleX(0); transform-origin: left; }
.atelier-showroom__tick:hover .atelier-showroom__dot { border-color: var(--sr-gold-light); }
.atelier-showroom__tick.is-active .atelier-showroom__dot { width: 52px; border-color: var(--sr-gold); }
.atelier-showroom__tick.is-active .atelier-showroom__dot i { transform: scaleX(1); }
.atelier-showroom__tick:not(.is-active) .atelier-showroom__dot i { opacity: 0; }

.atelier-showroom__cta-row { display: flex; justify-content: center; margin-top: 2.6em; }
.atelier-showroom__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--sr-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-showroom__cta i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sr-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-showroom__cta:hover { background: var(--sr-gold); color: #171713; }
.atelier-showroom__cta:hover i { transform: translateX(3px); background: #171713; color: var(--sr-gold-light); }
.atelier-showroom__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* TABLET */
@media (max-width: 1024px) {
  .atelier-showroom { --sr-sw: clamp(250px, 34vw, 310px); padding: 5em 2.5em; }
  .atelier-showroom__head { align-items: flex-end; gap: 2em; }
  .atelier-showroom__controls { gap: 1.6em; }
  .atelier-showroom__arrow { width: 48px; height: 48px; }
  .atelier-showroom__stage { margin-top: 2.6em; }
}

/* MOBILE */
@media (max-width: 767px) {
  .atelier-showroom { --sr-sw: min(62vw, 270px); padding: 5em 1.5em; }
  .atelier-showroom::before { width: 340px; height: 340px; top: -130px; inset-inline-start: -150px; }
  .atelier-showroom__head { flex-direction: column; align-items: stretch; gap: 1.8em; }
  .atelier-showroom__title { font-size: clamp(1.9rem, 7vw, 2.4rem); line-height: 1.18; }
  .atelier-showroom__intro { padding-inline-start: 1.2em; }
  .atelier-showroom__controls { justify-content: space-between; }
  .atelier-showroom__arrow { width: 46px; height: 46px; }
  .atelier-showroom__stage { height: calc(var(--sr-sh) + 6.5em); margin-top: 2em; }
  .atelier-showroom__floor { top: calc(1.5em + var(--sr-sh) - var(--sr-sw) * .15); }
  .atelier-showroom__slide.is-active .atelier-showroom__frame { box-shadow: 0 0 0 5px var(--sr-solid), 0 0 0 6px var(--sr-gold), 0 50px 80px -30px rgba(0,0,0,.95); }
  .atelier-showroom__tag { bottom: 1.8em; padding: .45em 1em; letter-spacing: .7px; }
  .atelier-showroom__caption { margin-top: 1em; }
  .atelier-showroom__pill { padding: .55em 1.1em; letter-spacing: .6px; }
  .atelier-showroom__ticks { margin-top: 2em; gap: .15em; }
  .atelier-showroom__tick { padding: 0 .28em; }
  .atelier-showroom__tick.is-active .atelier-showroom__dot { width: 40px; }
  .atelier-showroom__cta-row { margin-top: 2.2em; }
  .atelier-showroom__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-showroom__halo::after { animation: none; }
  .atelier-showroom__imgwrap { transition: none; }
  .atelier-showroom__slide.is-active .atelier-showroom__imgwrap { transform: none; }
}

/* =========================================================
   AUTOMOTIVE ATELIER | WHY CHOOSE OUR STUDIO
========================================================= */
.atelier-why { --wy-gold: #B99A63; --wy-gold-light: #D8C49A; --wy-gold-deep: #947545; --wy-bg: #F5F3EF; --wy-ink: #25251F; --wy-muted: #77766F; --wy-line: rgba(39,39,33,.15); position: relative; isolation: isolate; padding: 6em 5em; background: var(--wy-bg); color: var(--wy-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-why * { box-sizing: border-box; }
.atelier-why::before { content: ""; position: absolute; z-index: -1; top: -180px; inset-inline-end: -200px; width: 520px; height: 520px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-why::after { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-start: -200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.12), transparent 68%); pointer-events: none; }
.atelier-why__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-why__head { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 4em; margin-bottom: 4.5em; }
.atelier-why__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--wy-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-why__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--wy-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }
.atelier-why__title { margin: 1em 0 0; color: var(--wy-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-why__title span { color: var(--wy-gold); font-weight: 400; }
.atelier-why__head-side { max-width: 380px; padding-inline-start: 1.8em; border-inline-start: 1px solid var(--wy-gold); }
.atelier-why__head-side p { margin: 0 0 1.3em; color: var(--wy-muted); font-size: 14px; line-height: 1.8; }
.atelier-why__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--wy-ink); font-size: 13px; font-weight: 700; letter-spacing: .7px; }
.atelier-why__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--wy-gold); border-radius: 50%; color: var(--wy-gold); font-size: 17px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-why__text-link:hover i { transform: rotate(45deg); background: var(--wy-gold); color: #fff; }

/* Body */
.atelier-why__body { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; gap: 5.5em; }

/* Capsule visual */
.atelier-why__visual { position: relative; width: 100%; max-width: 380px; margin-inline: auto; padding-block: 1.4em; }
.atelier-why__orbit { position: absolute; inset: 0 -13%; color: var(--wy-gold); pointer-events: none; }
.atelier-why__orbit svg { display: block; width: 100%; height: 100%; overflow: visible; }
.atelier-why__capsule { position: relative; aspect-ratio: 3 / 4.1; border-radius: 999px; overflow: hidden; background: #1C1D1A; box-shadow: 0 50px 90px -40px rgba(25,26,24,.55); }
.atelier-why__capsule img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); will-change: transform; }
.atelier-why__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,15,13,.78) 0%, rgba(14,15,13,.1) 45%, rgba(14,15,13,.12) 100%); }
.atelier-why__capsule-text { position: absolute; inset-inline: 0; bottom: 9%; text-align: center; color: #F5EFE2; font-size: 12px; font-weight: 700; letter-spacing: .28em; }
.atelier-why__capsule-text::before { content: ""; display: block; width: 1px; height: 36px; margin: 0 auto 1em; background: linear-gradient(0deg, var(--wy-gold-light), transparent); }
.atelier-why__stamp { position: absolute; top: 6%; inset-inline-end: -7%; width: 118px; height: 118px; display: grid; place-items: center; border-radius: 50%; background: var(--wy-bg); color: var(--wy-gold-deep); box-shadow: 0 14px 34px rgba(25,26,24,.14); }
.atelier-why__stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atelier-why__stamp-ring { transform-origin: 50% 50%; transform-box: fill-box; }
.atelier-why__stamp-core { position: relative; color: var(--wy-gold); font-family: "Manrope", sans-serif; font-size: 22px; font-weight: 400; letter-spacing: -.04em; }
.atelier-why__chip { position: absolute; bottom: 16%; inset-inline-start: -9%; display: inline-flex; align-items: center; gap: .7em; padding: .85em 1.4em; border: 1px solid rgba(185,154,99,.6); border-radius: 999px; background: var(--wy-bg); color: var(--wy-ink); font-size: 12px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; box-shadow: 0 14px 30px rgba(25,26,24,.12); }
.atelier-why__chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--wy-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }

/* Reasons */
.atelier-why__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wy-line); }
.atelier-why__reason { position: relative; display: grid; grid-template-columns: auto auto minmax(0,1fr) auto; align-items: center; gap: 1.6em; padding: 1.9em 0 2em; transition: padding .4s ease; }
.atelier-why__reason:hover { padding-inline-start: .7em; }
.atelier-why__num { min-width: 2em; color: var(--wy-gold-deep); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-why__icon { display: grid; place-items: center; width: 58px; height: 58px; flex: 0 0 58px; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; color: var(--wy-gold); transition: background .35s ease, color .35s ease, transform .35s ease; }
.atelier-why__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.atelier-why__reason:hover .atelier-why__icon { background: var(--wy-gold); color: #171713; transform: scale(1.06); }
.atelier-why__copy h3 { margin: 0 0 .45em; color: var(--wy-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; transition: color .3s ease; }
.atelier-why__reason:hover .atelier-why__copy h3 { color: var(--wy-gold-deep); }
.atelier-why__copy p { max-width: 48ch; margin: 0; color: var(--wy-muted); font-size: 14px; line-height: 1.75; }
.atelier-why__go { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: var(--wy-gold); font-size: 16px; transition: transform .35s ease, background .35s ease, color .35s ease; }
.atelier-why__reason:hover .atelier-why__go { transform: rotate(45deg); background: var(--wy-gold); color: #171713; }
.atelier-why__rule { position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: var(--wy-line); }
.atelier-why__rule b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--wy-gold), rgba(185,154,99,0) 80%); transform-origin: 0 50%; }

/* Promise rail */
.atelier-why__promise { margin-top: 6em; text-align: center; }
.atelier-why__promise-label { display: flex; align-items: center; justify-content: center; gap: 1.4em; color: var(--wy-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-why__promise-label::before, .atelier-why__promise-label::after { content: ""; width: min(14vw, 150px); height: 1px; background: var(--wy-line); }
.atelier-why__rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5em; margin-top: 3.2em; }
.atelier-why__rail-line { position: absolute; top: 44px; inset-inline: 12.5%; height: 1px; background: var(--wy-line); }
.atelier-why__rail-line b { position: absolute; inset: 0; background: var(--wy-gold); transform-origin: 0 50%; }
.atelier-why__rail-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .55em; padding-inline: .8em; }
.atelier-why__rail-item strong { margin-top: .8em; color: var(--wy-ink); font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.atelier-why__rail-item > span:last-child { max-width: 24ch; color: var(--wy-muted); font-size: 13.5px; line-height: 1.65; }
.atelier-why__medal { display: grid; place-items: center; width: 88px; height: 88px; border: 1px solid rgba(185,154,99,.7); border-radius: 50%; background: var(--wy-bg); color: var(--wy-gold); box-shadow: 0 0 0 8px var(--wy-bg); transition: background .35s ease, color .35s ease, transform .35s ease; }
.atelier-why__medal svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.atelier-why__rail-item:hover .atelier-why__medal { background: var(--wy-gold); color: #171713; transform: translateY(-4px); }
.atelier-why__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; margin-top: 3.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--wy-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-why__cta i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--wy-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-why__cta:hover { background: var(--wy-gold); color: #171713; }
.atelier-why__cta:hover i { transform: translateX(3px); background: #171713; color: var(--wy-gold-light); }
.atelier-why a:focus-visible { outline: 2px solid var(--wy-gold); outline-offset: 4px; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-why { padding: 5em 2.5em; }
  .atelier-why__head { grid-template-columns: 1fr; gap: 2em; margin-bottom: 3.5em; }
  .atelier-why__head-side { max-width: 520px; }
  .atelier-why__body { grid-template-columns: 1fr; gap: 4.5em; }
  .atelier-why__visual { max-width: 380px; }
  .atelier-why__promise { margin-top: 5em; }
  .atelier-why__medal { width: 76px; height: 76px; }
  .atelier-why__rail-line { top: 38px; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-why { padding: 5em 1.5em; }
  .atelier-why::before { width: 320px; height: 320px; top: -120px; inset-inline-end: -140px; }
  .atelier-why__head-side { padding-inline-start: 1.2em; }
  .atelier-why__visual { max-width: 300px; padding-block: 1em; }
  .atelier-why__orbit { inset: 0 -9%; }
  .atelier-why__stamp { width: 92px; height: 92px; inset-inline-end: -4%; }
  .atelier-why__stamp-core { font-size: 17px; }
  .atelier-why__chip { inset-inline-start: -2%; padding: .75em 1.1em; font-size: 11px; }
  .atelier-why__reason { grid-template-columns: auto minmax(0,1fr); gap: 1.2em; padding: 1.7em 0; align-items: start; }
  .atelier-why__num, .atelier-why__go { display: none; }
  .atelier-why__icon { width: 48px; height: 48px; flex-basis: 48px; }
  .atelier-why__promise { margin-top: 4.5em; }
  .atelier-why__promise-label::before, .atelier-why__promise-label::after { width: 36px; }
  .atelier-why__rail { grid-template-columns: repeat(1, 1fr); row-gap: 2.8em; margin-top: 2.6em; }
  .atelier-why__rail-line { display: none; }
  .atelier-why__medal { width: 72px; height: 72px; box-shadow: none; }
  .atelier-why__cta { margin-top: 3em; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-why * { transition: none !important; animation: none !important; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | CUSTOMER TESTIMONIALS
========================================================= */
.atelier-voices { --vc-gold: #B99A63; --vc-gold-light: #D8C49A; --vc-gold-deep: #947545; --vc-ink: #F0EEE8; --vc-muted: #B0ADA3; --vc-line: rgba(235,229,216,.16); --vc-node: 68px; position: relative; isolation: isolate; padding: 6em 5em; background: radial-gradient(ellipse at 72% 42%, #26251F 0%, #181915 48%, #11120F 100%); color: var(--vc-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-voices * { box-sizing: border-box; }
.atelier-voices::before { content: ""; position: absolute; z-index: -1; top: -200px; inset-inline-start: -220px; width: 580px; height: 580px; border: 1px solid rgba(185,154,99,.2); border-radius: 50%; pointer-events: none; }
.atelier-voices::after { content: ""; position: absolute; z-index: -1; bottom: -260px; inset-inline-end: -200px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.14), transparent 68%); pointer-events: none; }
.atelier-voices__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-voices__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 4.5em; }
.atelier-voices__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--vc-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-voices__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--vc-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }
.atelier-voices__title { margin: 1em 0 0; color: var(--vc-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-voices__title span { color: var(--vc-gold); font-weight: 400; }
.atelier-voices__controls { display: flex; align-items: center; gap: 2em; flex-shrink: 0; }
.atelier-voices__count { display: inline-flex; align-items: center; gap: .8em; color: var(--vc-muted); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-voices__count b { color: var(--vc-gold-light); font-weight: 700; }
.atelier-voices__count i { width: 34px; height: 1px; background: var(--vc-gold); }
.atelier-voices__arrows { display: flex; gap: .8em; }
.atelier-voices__arrow { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; padding: 0; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; background: transparent; color: var(--vc-gold-light); font-size: 18px; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease; }
.atelier-voices__arrow:hover { background: var(--vc-gold); color: #171713; transform: scale(1.06); }

/* Stage */
.atelier-voices__stage { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: 5em; }
.atelier-voices__copy { position: relative; touch-action: pan-y; }
.atelier-voices__qmark { display: block; height: .5em; margin-bottom: .3em; color: var(--vc-gold); font-family: "Manrope", sans-serif; font-size: clamp(6rem, 9vw, 9rem); font-weight: 300; line-height: .85; opacity: .9; user-select: none; }
.atelier-voices__slides { display: grid; margin: 0; padding: 0; list-style: none; }
.atelier-voices__slide { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6em; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .45s ease; }
.atelier-voices__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.atelier-voices__stars { color: var(--vc-gold); font-size: 15px; letter-spacing: .3em; }
.atelier-voices__quote { margin: 0; max-width: 28em; color: var(--vc-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.3rem, 1.2vw, 2rem); font-weight: 400; letter-spacing: -.025em; line-height: 1.5; }
.atelier-voices__w { display: inline-block; }
.atelier-voices__who { display: flex; align-items: center; flex-wrap: wrap; gap: 1.2em; margin-top: .6em; }
.atelier-voices__avatar { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid rgba(185,154,99,.7); border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(216,196,154,.28), rgba(185,154,99,.06)); overflow: hidden; }
.atelier-voices__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 50%; }
.atelier-voices__id { display: flex; flex-direction: column; gap: .15em; }
.atelier-voices__id strong { color: var(--vc-ink); font-family: "Manrope", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.atelier-voices__id span { color: var(--vc-muted); font-size: 13px; }
.atelier-voices__service { padding: .6em 1.2em; border: 1px solid rgba(185,154,99,.5); border-radius: 999px; color: var(--vc-gold-light); font-size: 11.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }

/* Orbit selector */
.atelier-voices__orbit { position: relative; width: min(100%, 500px); aspect-ratio: 1; margin-inline: auto; }
.atelier-voices__ring-area { position: absolute; inset: calc(var(--vc-node) / 2); direction: ltr; }
.atelier-voices__ring { position: absolute; inset: 0; border: 1px dashed rgba(185,154,99,.4); border-radius: 50%; pointer-events: none; }
.atelier-voices__ring--inner { inset: 13%; border: 1px solid rgba(235,229,216,.1); }
.atelier-voices__sat { position: absolute; inset: 0; pointer-events: none; }
.atelier-voices__sat i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--vc-gold-light); box-shadow: 0 0 16px 3px rgba(216,196,154,.6); }
.atelier-voices__disc { position: absolute; inset: 24%; display: grid; place-items: center; border: 1px solid rgba(185,154,99,.35); border-radius: 50%; background: radial-gradient(circle at 35% 28%, rgba(216,196,154,.2), rgba(25,26,22,.95) 62%); box-shadow: 0 40px 80px -30px rgba(0,0,0,.8), inset 0 0 40px rgba(185,154,99,.08); }
.atelier-voices__progress { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); max-width: none; overflow: visible; }
.atelier-voices__progress circle { fill: none; stroke-width: .9; }
.atelier-voices__progress-track { stroke: rgba(235,229,216,.1); }
.atelier-voices__progress-fill { stroke: var(--vc-gold-light); stroke-linecap: round; }
.atelier-voices__disc-in { display: flex; flex-direction: column; align-items: center; gap: .35em; text-align: center; padding: 0 .8em; }
.atelier-voices__disc-img { width: clamp(3.5rem, 6vw, 5.5rem); height: clamp(3.5rem, 6vw, 5.5rem); border-radius: 50%; overflow: hidden; border: 2px solid rgba(185,154,99,.55); box-shadow: 0 4px 20px rgba(0,0,0,.5); flex-shrink: 0; }
.atelier-voices__disc-img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 50%; }
.atelier-voices__disc-in small { color: var(--vc-ink); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.atelier-voices__disc-in em { color: var(--vc-gold); font-size: 11px; font-style: normal; letter-spacing: .25em; }
.atelier-voices__node { position: absolute; left: var(--x); top: var(--y); width: var(--vc-node); height: var(--vc-node); margin: calc(var(--vc-node) / -2) 0 0 calc(var(--vc-node) / -2); padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; z-index: 2; }
.atelier-voices__node-in { display: grid; place-items: center; width: 100%; height: 100%; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; background: #1D1E1A; color: var(--vc-gold-light); font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: .04em; overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1), background .35s ease, color .35s ease, box-shadow .35s ease; }
.atelier-voices__node-in img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: 50%; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.atelier-voices__node:hover .atelier-voices__node-in { transform: scale(1.1); background: #2A2820; }
.atelier-voices__node:hover .atelier-voices__node-in img { transform: scale(1.05); }
.atelier-voices__node.is-active .atelier-voices__node-in { transform: scale(1.2); border-color: var(--vc-gold-light); box-shadow: 0 0 0 7px rgba(185,154,99,.16), 0 18px 34px rgba(0,0,0,.45); }
.atelier-voices__node.is-active .atelier-voices__node-in img { filter: brightness(1.08); }
.atelier-voices__node:focus-visible { outline: 2px solid var(--vc-gold-light); outline-offset: 5px; }
.atelier-voices a:focus-visible, .atelier-voices__arrow:focus-visible { outline: 2px solid var(--vc-gold-light); outline-offset: 4px; }

/* Summary + marquee */
.atelier-voices__summary { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 4.5em; margin-top: 2.5em; padding-top: 3.2em; border-top: 1px solid var(--vc-line); }
.atelier-voices__score { display: flex; flex-direction: column; gap: .5em; }
.atelier-voices__score strong { color: var(--vc-gold); font-family: "Manrope", sans-serif; font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.atelier-voices__score strong em { margin-inline-start: .08em; font-size: .4em; font-style: normal; letter-spacing: 0; color: var(--vc-muted); }
.atelier-voices__score-stars { color: var(--vc-gold); font-size: 14px; letter-spacing: .3em; }
.atelier-voices__score-label { color: var(--vc-muted); font-size: 13px; font-weight: 700; letter-spacing: .8px; }
.atelier-voices__marquee { overflow: hidden; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.atelier-voices__marquee-track { display: flex; width: max-content; animation: atelier-voices-drift 42s linear infinite; }
.atelier-voices__marquee:hover .atelier-voices__marquee-track { animation-play-state: paused; }
.atelier-voices__marquee-group { display: flex; gap: 1em; padding-inline-end: 1em; }
.atelier-voices__marquee-group span { padding: .85em 1.6em; border: 1px solid var(--vc-line); border-radius: 999px; color: var(--vc-muted); font-size: 13.5px; white-space: nowrap; transition: border-color .3s ease, color .3s ease; }
.atelier-voices__marquee-group span:hover { border-color: var(--vc-gold); color: var(--vc-gold-light); }
@keyframes atelier-voices-drift { to { transform: translateX(-50%); } }

.atelier-voices__cta-row { display: flex; justify-content: center; margin-top: 4em; }
.atelier-voices__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--vc-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-voices__cta i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--vc-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-voices__cta:hover { background: var(--vc-gold); color: #171713; }
.atelier-voices__cta:hover i { transform: translateX(3px); background: #171713; color: var(--vc-gold-light); }
.atelier-voices__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-voices { --vc-node: 62px; padding: 5em 2.5em; }
  .atelier-voices__head { margin-bottom: 3.5em; }
  .atelier-voices__stage { grid-template-columns: 1fr; gap: 3.5em; }
  .atelier-voices__orbit { order: -1; width: min(100%, 420px); }
  .atelier-voices__copy { max-width: 640px; margin-inline: auto; }
  .atelier-voices__summary { grid-template-columns: 1fr; gap: 2.4em; margin-top: 4.5em; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-voices { --vc-node: 52px; padding: 5em 1.5em; }
  .atelier-voices::before { width: 340px; height: 340px; top: -130px; inset-inline-start: -150px; }
  .atelier-voices__head { flex-direction: column; align-items: flex-start; gap: 1.8em; margin-bottom: 3em; }
  .atelier-voices__arrow { width: 46px; height: 46px; }
  .atelier-voices__stage { gap: 2.6em; }
  .atelier-voices__orbit { width: min(100%, 330px); }
  .atelier-voices__node-in { font-size: 13px; }
  .atelier-voices__node.is-active .atelier-voices__node-in { box-shadow: 0 0 0 5px rgba(185,154,99,.16), 0 12px 24px rgba(0,0,0,.45); }
  .atelier-voices__disc-in small { font-size: 9.5px; letter-spacing: 1px; }
  .atelier-voices__disc-in em { font-size: 9px; }
  .atelier-voices__qmark { font-size: 5.5rem; }
  .atelier-voices__who { gap: .9em; }
  .atelier-voices__summary { margin-top: 4em; padding-top: 2.4em; }
  .atelier-voices__marquee-group span { padding: .75em 1.3em; font-size: 12.5px; }
  .atelier-voices__cta-row { margin-top: 3em; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-voices * { transition: none !important; }
  .atelier-voices__marquee-track { animation: none; }
}

/* =========================================================
   AUTOMOTIVE ATELIER | PREMIUM HERO SLIDER (APERTURE REEL)
========================================================= */
.atelier-reel { --rl-gold: #B99A63; --rl-gold-light: #D8C49A; --rl-gold-deep: #947545; --rl-ink: #F0EEE8; --rl-muted: #C2BFB6; --rl-line: rgba(235,229,216,.22); position: relative; isolation: isolate; display: flex; min-height: max(720px, calc(100vh - 130px)); min-height: max(720px, calc(100svh - 130px)); padding: 6em 5em; background: #10110F; color: var(--rl-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-reel * { box-sizing: border-box; }

/* Slides */
.atelier-reel__slides { position: absolute; inset: 0; z-index: 0; margin: 0; padding: 0; list-style: none; }
.atelier-reel__slide { position: absolute; inset: 0; overflow: hidden; background: #10110F; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility .9s ease; }
.atelier-reel__slide.is-active { z-index: 2; opacity: 1; visibility: visible; }
.atelier-reel__slide.is-leaving { z-index: 1; opacity: 1; visibility: visible; }
.atelier-reel.is-gsap .atelier-reel__slide { transition: none; }
.atelier-reel__media { position: absolute; inset: -3%; will-change: transform; }
.atelier-reel__media img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transform: scale(1.06); will-change: transform; }
.atelier-reel__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,11,9,.92) 0%, rgba(10,11,9,.76) 38%, rgba(10,11,9,.78) 78%, rgba(10,11,9,.7) 100%), linear-gradient(0deg, rgba(10,11,9,.75) 0%, transparent 38%); }

/* Aperture rings */
.atelier-reel__rings { position: absolute; z-index: 1; top: 50%; inset-inline-end: -12%; width: min(62vw, 780px); margin-top: calc(min(62vw, 780px) / -2); aspect-ratio: 1; color: var(--rl-gold); pointer-events: none; }
.atelier-reel__rings svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Layout */
.atelier-reel__inner { position: relative; z-index: 3; width: 100%; max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: 1fr auto; gap: 3.5em 4em; }
.atelier-reel__copywrap { grid-column: 1; grid-row: 1; align-self: center; }
.atelier-reel__stack { display: grid; }
.atelier-reel__copy { grid-area: 1 / 1; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility .5s ease; }
.atelier-reel__copy.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.atelier-reel.is-gsap .atelier-reel__copy { transition: none; }

.atelier-reel__kicker { display: inline-flex; align-items: center; gap: .9em; color: var(--rl-gold-light); font-size: 12.5px; font-weight: 700; letter-spacing: 2px; }
.atelier-reel__kicker i { width: 34px; height: 1px; background: var(--rl-gold); }
.atelier-reel__title { margin: 0.5em 0 0; color: var(--rl-ink); font-family: "Manrope", sans-serif; font-size: clamp(2.5rem, 5vw, 5.6rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.3; }
.atelier-reel__line { display: block; padding-bottom: .12em; margin-bottom: -.12em; overflow: hidden; }
.atelier-reel__line-in { display: block; }
.atelier-reel__title em { color: var(--rl-gold); font-style: normal; font-weight: 600; }
.atelier-reel__desc { max-width: 500px; margin: 1.7em 0 2.3em; color: var(--rl-muted); font-size: 15.5px; line-height: 1.85; }
.atelier-reel__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6em 2.2em; }
.atelier-reel__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.8em .5em; border-radius: 999px; background: var(--rl-gold); color: #171713; font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, box-shadow .3s ease; }
.atelier-reel__cta i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #171713; color: var(--rl-gold-light); font-size: 18px; font-style: normal; transition: transform .3s ease; }
.atelier-reel__cta:hover { background: var(--rl-gold-light); box-shadow: 0 16px 40px -12px rgba(185,154,99,.55); }
.atelier-reel__cta:hover i { transform: translateX(4px); }
.atelier-reel__link { display: inline-flex; align-items: center; gap: .95em; color: var(--rl-ink); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.atelier-reel__link i { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(185,154,99,.65); border-radius: 50%; color: var(--rl-gold-light); font-size: 17px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-reel__link:hover i { transform: rotate(45deg); background: var(--rl-gold); color: #171713; }
.atelier-reel__trust { display: flex; align-items: center; flex-wrap: wrap; gap: .9em; margin-top: 2.8em; color: var(--rl-muted); font-size: 13px; }
.atelier-reel__trust-line { width: 40px; height: 1px; background: var(--rl-gold); }
.atelier-reel__trust-stars { color: var(--rl-gold); font-size: 12px; letter-spacing: .28em; }

/* Counter */
.atelier-reel__counter { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; display: flex; align-items: flex-end; gap: 1.2em; direction: ltr; }
.atelier-reel__num-wrap { display: block; padding: .05em .1em; overflow: hidden; }
.atelier-reel__num { display: block; color: transparent; -webkit-text-stroke: 1px rgba(216,196,154,.6); font-family: "Manrope", sans-serif; font-size: clamp(4.5rem, 9.5vw, 9rem); font-weight: 300; letter-spacing: -.06em; line-height: .95; }
.atelier-reel__total { display: inline-flex; align-items: center; gap: .8em; padding-bottom: 1.4em; color: var(--rl-muted); font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 2px; }
.atelier-reel__total i { width: 34px; height: 1px; background: var(--rl-gold); }

/* Progress index */
.atelier-reel__nav { grid-column: 1; grid-row: 2; align-self: end; width: 100%; max-width: 780px; }
.atelier-reel__nav ul { display: flex; gap: clamp(1.2em, 2.4vw, 2.6em); margin: 0; padding: 0; list-style: none; }
.atelier-reel__nav li { flex: 1; min-width: 0; }
.atelier-reel__tab { display: flex; flex-direction: column; gap: 1em; width: 100%; padding: 0; border: 0; background: transparent; color: var(--rl-muted); text-align: start; cursor: pointer; transition: color .3s ease; }
.atelier-reel__tab-top { display: flex; align-items: baseline; gap: .8em; min-width: 0; }
.atelier-reel__tab em { color: var(--rl-gold); font-family: "Manrope", sans-serif; font-size: 12px; font-style: normal; font-weight: 700; letter-spacing: 1.2px; }
.atelier-reel__tab-top > span { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atelier-reel__tab:hover, .atelier-reel__tab.is-active { color: var(--rl-ink); }
.atelier-reel__tab.is-active em { color: var(--rl-gold-light); }
.atelier-reel__tab-line { position: relative; display: block; height: 1px; background: var(--rl-line); }
.atelier-reel__tab-line i { position: absolute; inset: -.5px 0; height: 2px; background: var(--rl-gold-light); transform: scaleX(0); transform-origin: 0 50%; }

/* Next portal */
.atelier-reel__next { grid-column: 2; grid-row: 2; align-self: end; justify-self: end; display: flex; align-items: center; gap: 1.4em; }
.atelier-reel__pause { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; background: transparent; color: var(--rl-gold-light); cursor: pointer; transition: background .3s ease, color .3s ease; }
.atelier-reel__pause:hover { background: var(--rl-gold); color: #171713; }
.atelier-reel__ico-play { display: none; }
.atelier-reel__pause[aria-pressed="true"] .atelier-reel__ico-pause { display: none; }
.atelier-reel__pause[aria-pressed="true"] .atelier-reel__ico-play { display: block; }
.atelier-reel__next-text { display: flex; flex-direction: column; align-items: flex-end; gap: .25em; text-align: end; }
.atelier-reel__next-text small { color: var(--rl-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 2px; }
.atelier-reel__next-text b { color: var(--rl-ink); font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.atelier-reel__portal { position: relative; flex: 0 0 auto; width: 132px; height: 132px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.atelier-reel__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atelier-reel__ring circle { fill: none; stroke-width: 1.2; }
.atelier-reel__ring-track { stroke: rgba(235,229,216,.25); }
.atelier-reel__ring-fill { stroke: var(--rl-gold-light); stroke-linecap: round; }
.atelier-reel__portal-img { position: absolute; inset: 9px; overflow: hidden; border-radius: 50%; background: #1C1D1A; box-shadow: 0 20px 44px rgba(0,0,0,.5); }
.atelier-reel__portal-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.atelier-reel__portal-shade { position: absolute; inset: 0; background: rgba(10,11,9,.45); transition: background .4s ease; }
.atelier-reel__portal-arrow { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; transition: transform .4s ease; }
.atelier-reel__portal:hover .atelier-reel__portal-img img { transform: scale(1.14); }
.atelier-reel__portal:hover .atelier-reel__portal-shade { background: rgba(185,154,99,.35); }
.atelier-reel__portal:hover .atelier-reel__portal-arrow { transform: translateX(4px); }

.atelier-reel a:focus-visible, .atelier-reel button:focus-visible { outline: 2px solid var(--rl-gold-light); outline-offset: 4px; }
.atelier-reel__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-reel { min-height: 680px; padding: 5em 2.5em; }
  .atelier-reel__inner { gap: 3em 2.5em; }
  .atelier-reel__title { font-size: clamp(2.4rem, 7vw, 4.4rem); }
  .atelier-reel__num { font-size: clamp(4rem, 12vw, 6.5rem); }
  .atelier-reel__portal { width: 112px; height: 112px; }
  .atelier-reel__rings { width: 90vw; margin-top: -45vw; inset-inline-end: -30%; }
  .atelier-reel__shade { background: linear-gradient(90deg, rgba(10,11,9,.92) 0%, rgba(10,11,9,.7) 50%, rgba(10,11,9,.32) 100%), linear-gradient(0deg, rgba(10,11,9,.75) 0%, transparent 40%); }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-reel { min-height: 640px; padding: 5em 1.5em; }
  .atelier-reel__inner { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; gap: 2.8em; }
  .atelier-reel__copywrap { align-self: end; }
  .atelier-reel__counter { display: none; }
  .atelier-reel__nav { grid-row: 2; max-width: none; }
  .atelier-reel__next { grid-column: 1; grid-row: 3; justify-self: stretch; justify-content: space-between; flex-direction: row-reverse; gap: 1.2em; }
  .atelier-reel__next-text { align-items: flex-start; text-align: start; margin-inline-end: auto; }
  .atelier-reel__pause { order: 3; }
  .atelier-reel__title { font-size: clamp(2.2rem, 10.4vw, 3rem); }
  .atelier-reel__desc { margin: 1.5em 0 2em; font-size: 15px; }
  .atelier-reel__actions { gap: 1.4em; }
  .atelier-reel__trust { margin-top: 2.2em; }
  .atelier-reel__portal { width: 88px; height: 88px; }
  .atelier-reel__portal-img { inset: 6px; }
  .atelier-reel__portal-arrow { font-size: 19px; }
  .atelier-reel__nav ul { gap: .9em; }
  .atelier-reel__nav li { flex: 1; transition: flex .5s ease; }
  .atelier-reel__nav li:has(.is-active) { flex: 2.6; }
  .atelier-reel__tab-top > span { display: none; font-size: 12px; }
  .atelier-reel__tab.is-active .atelier-reel__tab-top > span { display: block; }
  .atelier-reel__rings { width: 130vw; margin-top: -65vw; inset-inline-end: -60%; }
  .atelier-reel__shade { background: linear-gradient(0deg, rgba(10,11,9,.95) 0%, rgba(10,11,9,.7) 55%, rgba(10,11,9,.5) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-reel *, .atelier-reel *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   AUTOMOTIVE ATELIER | QUICK APPOINTMENT BOOKING
========================================================= */
.atelier-appt { --ap-gold: #B99A63; --ap-gold-light: #D8C49A; --ap-gold-deep: #947545; --ap-bg: #F5F3EF; --ap-ink: #25251F; --ap-muted: #77766F; --ap-line: rgba(39,39,33,.15); --ap-err: #B5503F; position: relative; isolation: isolate; padding: 6em 5em; background: var(--ap-bg); color: var(--ap-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-appt * { box-sizing: border-box; }
.atelier-appt::before { content: ""; position: absolute; z-index: -1; top: -200px; inset-inline-start: -220px; width: 560px; height: 560px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-appt::after { content: ""; position: absolute; z-index: -1; bottom: -260px; inset-inline-end: -200px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.13), transparent 68%); pointer-events: none; }
.atelier-appt__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-appt__head { display: grid; grid-template-columns: 1.35fr .65fr; align-items: end; gap: 4em; margin-bottom: 4.5em; }
.atelier-appt__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--ap-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-appt__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--ap-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }
.atelier-appt__title { margin: 1em 0 0; color: var(--ap-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-appt__title span { color: var(--ap-gold); font-weight: 400; }
.atelier-appt__head-side { max-width: 380px; padding-inline-start: 1.8em; border-inline-start: 1px solid var(--ap-gold); }
.atelier-appt__head-side p { margin: 0 0 1.3em; color: var(--ap-muted); font-size: 14px; line-height: 1.8; }
.atelier-appt__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--ap-ink); font-size: 13px; font-weight: 700; letter-spacing: .7px; }
.atelier-appt__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--ap-gold); border-radius: 50%; color: var(--ap-gold); font-size: 17px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-appt__text-link:hover i { transform: rotate(45deg); background: var(--ap-gold); color: #fff; }

/* Body */
.atelier-appt__body { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: start; gap: 5.5em; }

/* Summary orb */
.atelier-appt__aside { position: sticky; top: 0px; display: flex; flex-direction: column; align-items: center; }
.atelier-appt__orbwrap { position: relative; width: min(100%, 390px); aspect-ratio: 1; margin: 0em 0; direction: ltr; }
.atelier-appt__orbit { position: absolute; inset: -7%; border: 1px dashed rgba(185,154,99,.5); border-radius: 50%; pointer-events: none; }
.atelier-appt__sat { position: absolute; inset: -7%; pointer-events: none; }
.atelier-appt__sat i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ap-gold); box-shadow: 0 0 14px 3px rgba(185,154,99,.55); }
.atelier-appt__progress { position: absolute; inset: -2.5%; width: 105%; height: 105%; max-width: none; overflow: visible; pointer-events: none; }
.atelier-appt__progress circle { fill: none; stroke-width: .9; }
.atelier-appt__progress-track { stroke: rgba(185,154,99,.25); }
.atelier-appt__progress-fill { stroke: var(--ap-gold); stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1); }
.atelier-appt__orb { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 34% 26%, #34322A 0%, #1C1D19 58%, #12130F 100%); color: #F0EEE8; box-shadow: 0 50px 90px -34px rgba(25,26,24,.7), inset 0 0 50px rgba(185,154,99,.08); }
.atelier-appt__orb-in { display: flex; flex-direction: column; align-items: center; gap: .75em; width: 78%; text-align: center; direction: ltr; }
.atelier-appt__orb-label { color: var(--ap-gold-light); font-size: 10.5px; font-weight: 700; letter-spacing: 2px; }
.atelier-appt__orb-service { color: #F0EEE8; font-family: "Manrope", sans-serif; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.atelier-appt__orb-rule { width: 34px; height: 1px; background: var(--ap-gold); }
.atelier-appt__orb-row { display: flex; flex-direction: column; gap: .15em; color: #F0EEE8; font-size: 14px; font-weight: 600; }
.atelier-appt__orb-row small { color: var(--ap-gold-light); font-size: 9.5px; font-weight: 700; letter-spacing: 1.8px; }
.atelier-appt__orb-steps { margin-top: .5em; color: #B0ADA3; font-size: 11.5px; font-style: normal; letter-spacing: .5px; }

.atelier-appt__info { display: flex; flex-direction: column; gap: 1.4em; width: 100%; max-width: 390px; margin: 0; padding: 0; list-style: none; }
.atelier-appt__info li { display: flex; align-items: center; gap: 1.1em; }
.atelier-appt__info li > span { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; color: var(--ap-gold); }
.atelier-appt__info svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.atelier-appt__info small { display: block; color: var(--ap-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 1.6px; }
.atelier-appt__info b { display: block; margin-top: .15em; color: var(--ap-ink); font-size: 14px; font-weight: 600; }
.atelier-appt__info a:hover { color: var(--ap-gold-deep); }

/* Steps */
.atelier-appt__step { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1.4em 2em; padding: 2.2em 0 2.4em; }
.atelier-appt__rule { position: absolute; top: 0; inset-inline: 0; height: 1px; background: var(--ap-line); }
.atelier-appt__rule b { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ap-gold), rgba(185,154,99,0) 80%); transform-origin: 0 50%; }
.atelier-appt__stepnum { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; color: var(--ap-gold-deep); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1px; transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s ease; }
.atelier-appt__step.is-done .atelier-appt__stepnum { background: var(--ap-gold); border-color: var(--ap-gold); color: #171713; transform: scale(1.04); }
.atelier-appt__step.is-done .atelier-appt__stepnum span { display: none; }
.atelier-appt__step.is-done .atelier-appt__stepnum::after { content: "✓"; font-size: 16px; }
.atelier-appt__steptitle { margin: .5em 0 1.4em; color: var(--ap-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; }

/* Service chips */
.atelier-appt__chips { display: flex; flex-wrap: wrap; gap: .9em; }
.atelier-appt__chip, .atelier-appt__time, .atelier-appt__day { position: relative; display: inline-block; cursor: pointer; }
.atelier-appt input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.atelier-appt__chip-face { display: inline-flex; align-items: center; gap: .9em; padding: .5em 1.5em .5em .5em; border: 1px solid var(--ap-line); border-radius: 999px; color: var(--ap-ink); font-size: 13.5px; font-weight: 600; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.atelier-appt__chip-ico { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: var(--ap-gold); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.atelier-appt__chip-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.atelier-appt__chip:hover .atelier-appt__chip-face { border-color: var(--ap-gold); transform: translateY(-2px); }
.atelier-appt__chip input:checked + .atelier-appt__chip-face { background: var(--ap-gold); border-color: var(--ap-gold); color: #171713; }
.atelier-appt__chip input:checked + .atelier-appt__chip-face .atelier-appt__chip-ico { background: #171713; border-color: #171713; color: var(--ap-gold-light); }
.atelier-appt input:focus-visible + span { outline: 2px solid var(--ap-gold); outline-offset: 4px; }

/* Day circles */
.atelier-appt__days { display: flex; flex-wrap: wrap; gap: 1em; }
.atelier-appt__day-face { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; border: 1px solid var(--ap-line); border-radius: 50%; color: var(--ap-ink); transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.atelier-appt__day-face small { color: var(--ap-muted); font-size: 9.5px; font-weight: 700; letter-spacing: 1.4px; transition: color .3s ease; }
.atelier-appt__day-face b { font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.atelier-appt__day-face em { color: var(--ap-gold-deep); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 1.2px; transition: color .3s ease; }
.atelier-appt__day:hover .atelier-appt__day-face { border-color: var(--ap-gold); transform: translateY(-3px); }
.atelier-appt__day input:checked + .atelier-appt__day-face { background: var(--ap-gold); border-color: var(--ap-gold); color: #171713; }
.atelier-appt__day input:checked + .atelier-appt__day-face small, .atelier-appt__day input:checked + .atelier-appt__day-face em { color: #171713; }
.atelier-appt__day input:disabled + .atelier-appt__day-face { opacity: .38; cursor: not-allowed; }
.atelier-appt__day input:disabled + .atelier-appt__day-face b { text-decoration: line-through; }
.atelier-appt__day:has(input:disabled) { cursor: not-allowed; }
.atelier-appt__day:has(input:disabled):hover .atelier-appt__day-face { transform: none; border-color: var(--ap-line); }

/* Time pills */
.atelier-appt__times { display: flex; flex-wrap: wrap; gap: .8em; }
.atelier-appt__time span { display: inline-flex; align-items: center; padding: .85em 1.7em; border: 1px solid var(--ap-line); border-radius: 999px; color: var(--ap-ink); font-size: 13.5px; font-weight: 600; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease; }
.atelier-appt__time:hover span { border-color: var(--ap-gold); transform: translateY(-2px); }
.atelier-appt__time input:checked + span { background: var(--ap-gold); border-color: var(--ap-gold); color: #171713; }
.atelier-appt__time input:disabled + span { opacity: .38; text-decoration: line-through; cursor: not-allowed; }
.atelier-appt__time:has(input:disabled):hover span { transform: none; border-color: var(--ap-line); }

/* Underline fields */
.atelier-appt__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2em 2.6em; }
.atelier-appt__field { position: relative; display: block; padding-bottom: 1.6em; }
.atelier-appt__field--wide { grid-column: 1 / -1; }
.atelier-appt__field input { display: block; width: 100%; padding: 1.5em 0 .6em; border: 0; border-bottom: 1px solid var(--ap-line); border-radius: 0; background: transparent; color: var(--ap-ink); font-family: "DM Sans", sans-serif; font-size: 15.5px; font-weight: 500; outline: none; box-shadow: none; }
.atelier-appt__field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40em var(--ap-bg) inset; -webkit-text-fill-color: var(--ap-ink); }
.atelier-appt__field-label { position: absolute; top: 1.25em; inset-inline-start: 0; color: var(--ap-muted); font-size: 14px; font-weight: 500; pointer-events: none; transform-origin: 0 0; transition: transform .3s ease, color .3s ease; }
.atelier-appt__field input:focus + .atelier-appt__field-label, .atelier-appt__field input:not(:placeholder-shown) + .atelier-appt__field-label { transform: translateY(-1.15em) scale(.78); color: var(--ap-gold-deep); font-weight: 700; letter-spacing: .5px; }
.atelier-appt__field-line { position: absolute; bottom: 1.6em; inset-inline: 0; height: 1px; background: var(--ap-gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.atelier-appt__field input:focus ~ .atelier-appt__field-line { transform: scaleX(1); }
.atelier-appt__field.is-invalid input { border-bottom-color: var(--ap-err); }

/* Errors */
.atelier-appt__err { display: block; min-height: 0; margin-top: .8em; color: var(--ap-err); font-size: 12.5px; font-weight: 600; }
.atelier-appt__err:empty { display: none; }
.atelier-appt__field .atelier-appt__err { position: absolute; bottom: 0; inset-inline-start: 0; margin: 0; }

/* Submit */
.atelier-appt__submit { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6em 2.4em; padding-top: 2.4em; border-top: 1px solid var(--ap-line); }
.atelier-appt__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; background: transparent; color: var(--ap-ink); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .6px; cursor: pointer; transition: background .3s ease, color .3s ease; }
.atelier-appt__cta i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ap-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-appt__cta:hover { background: var(--ap-gold); color: #171713; }
.atelier-appt__cta:hover i { transform: translateX(3px); background: #171713; color: var(--ap-gold-light); }
.atelier-appt__note { max-width: 300px; margin: 0; color: var(--ap-muted); font-size: 13px; line-height: 1.7; }

/* Success */
.atelier-appt__done { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3em 0 1em; outline: none; }
.atelier-appt__done[hidden] { display: none; }
.atelier-appt__done-mark { position: relative; display: grid; place-items: center; width: 120px; height: 120px; margin-bottom: 1.8em; }
.atelier-appt__done-mark svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ap-gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.atelier-appt__burst { position: absolute; inset: 0; pointer-events: none; }
.atelier-appt__burst i { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--ap-gold); }
.atelier-appt__done-title { margin: 0 0 .6em; color: var(--ap-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight: 500; letter-spacing: -.04em; }
.atelier-appt__done-text { max-width: 430px; margin: 0 0 2em; color: var(--ap-muted); font-size: 14.5px; line-height: 1.8; }
.atelier-appt__done-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.4em 2em; }
.atelier-appt__again { padding: 0; border: 0; border-bottom: 1px solid var(--ap-gold); background: transparent; color: var(--ap-ink); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .6px; cursor: pointer; }
.atelier-appt__again:hover { color: var(--ap-gold-deep); }

.atelier-appt a:focus-visible, .atelier-appt button:focus-visible, .atelier-appt input:focus-visible { outline: 2px solid var(--ap-gold); outline-offset: 4px; }
.atelier-appt__field input:focus-visible { outline: none; }
.atelier-appt__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-appt { padding: 5em 2.5em; }
  .atelier-appt__head { grid-template-columns: 1fr; gap: 2em; margin-bottom: 3.5em; }
  .atelier-appt__head-side { max-width: 520px; }
  .atelier-appt__body { grid-template-columns: 1fr; gap: 4em; }
  .atelier-appt__aside { position: static; }
  .atelier-appt__orbwrap { width: min(100%, 320px); }
  .atelier-appt__info { max-width: 460px; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-appt { padding: 5em 1.5em; }
  .atelier-appt::before { width: 320px; height: 320px; top: -120px; inset-inline-start: -140px; }
  .atelier-appt__head-side { padding-inline-start: 1.2em; }
  .atelier-appt__orbwrap { width: min(100%, 270px); }
  .atelier-appt__orb-in { gap: .55em; }
  .atelier-appt__orb-service { font-size: 1.15rem; }
  .atelier-appt__orb-row { font-size: 12.5px; }
  .atelier-appt__aside { gap: 2.6em; }
  .atelier-appt__info { gap: 1.1em; }
  .atelier-appt__step { grid-template-columns: 1fr; gap: 1.1em; padding: 1.9em 0 2em; }
  .atelier-appt__stepnum { width: 40px; height: 40px; }
  .atelier-appt__steptitle { margin: 0 0 1.2em; }
  .atelier-appt__chip-face { font-size: 13px; padding-inline-end: 1.2em; }
  .atelier-appt__days { gap: .8em; }
  .atelier-appt__day-face { width: 60px; height: 60px; }
  .atelier-appt__day-face b { font-size: 17px; }
  .atelier-appt__time span { padding: .75em 1.3em; font-size: 13px; }
  .atelier-appt__fields { grid-template-columns: 1fr; gap: 1.4em; }
  .atelier-appt__submit { flex-direction: column; align-items: flex-start; padding-top: 2em; }
  .atelier-appt__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-appt *, .atelier-appt *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | UPCOMING BOOKING OVERVIEW
========================================================= */
.atelier-queue { --qu-gold: #B99A63; --qu-gold-light: #D8C49A; --qu-gold-deep: #947545; --qu-bg: #151612; --qu-ink: #F0EEE8; --qu-muted: #B0ADA3; --qu-line: rgba(235,229,216,.16); --qu-sage: #8FB69A; position: relative; isolation: isolate; padding: 6em 5em; background: var(--qu-bg); color: var(--qu-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-queue * { box-sizing: border-box; }
.atelier-queue::before { content: ""; position: absolute; z-index: -1; top: -240px; inset-inline-end: -220px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.16), transparent 68%); pointer-events: none; }
.atelier-queue::after { content: ""; position: absolute; z-index: -1; bottom: -220px; inset-inline-start: -200px; width: 560px; height: 560px; border: 1px solid rgba(185,154,99,.18); border-radius: 50%; pointer-events: none; }
.atelier-queue__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-queue__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 4.5em; }
.atelier-queue__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--qu-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-queue__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--qu-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }
.atelier-queue__title { margin: 1em 0 0; color: var(--qu-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-queue__title span { color: var(--qu-gold); font-weight: 400; }
.atelier-queue__filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7em; }
.atelier-queue__filter { padding: .8em 1.5em; border: 1px solid var(--qu-line); border-radius: 999px; background: transparent; color: var(--qu-muted); font-family: "DM Sans", sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: .6px; cursor: pointer; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.atelier-queue__filter:hover { border-color: var(--qu-gold); color: var(--qu-ink); }
.atelier-queue__filter.is-active { background: var(--qu-gold); border-color: var(--qu-gold); color: #171713; }

/* Body */
.atelier-queue__body { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; gap: 5.5em; }

/* Dial */
.atelier-queue__aside { position: sticky; top: 130px; display: flex; flex-direction: column; align-items: center; gap: 3em; }
.atelier-queue__dial { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 1em 0 0; direction: ltr; }
.atelier-queue__dial-orbit { position: absolute; inset: -7%; border: 1px dashed rgba(185,154,99,.42); border-radius: 50%; pointer-events: none; }
.atelier-queue__dial-sat { position: absolute; inset: -7%; pointer-events: none; }
.atelier-queue__dial-sat i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--qu-gold-light); box-shadow: 0 0 16px 3px rgba(216,196,154,.6); }
.atelier-queue__dial-ring { position: absolute; inset: -2.5%; width: 105%; height: 105%; max-width: none; overflow: visible; pointer-events: none; }
.atelier-queue__dial-ring circle { fill: none; stroke-width: .9; }
.atelier-queue__ring-track { stroke: rgba(235,229,216,.12); }
.atelier-queue__ring-fill { stroke: var(--qu-gold-light); stroke-linecap: round; }
.atelier-queue__disc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2em; border-radius: 50%; background: radial-gradient(circle at 34% 26%, #2C2A22 0%, #1A1B17 60%, #11120F 100%); box-shadow: 0 50px 90px -34px rgba(0,0,0,.85), inset 0 0 50px rgba(185,154,99,.08); }
.atelier-queue__disc > small { color: var(--qu-gold-light); font-size: 10.5px; font-weight: 700; letter-spacing: 2px; }
.atelier-queue__clock { display: flex; align-items: center; gap: .9em; }
.atelier-queue__clock span { display: flex; flex-direction: column; align-items: center; gap: .3em; min-width: 2.2em; }
.atelier-queue__clock b { color: var(--qu-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: 300; letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.atelier-queue__clock em { color: var(--qu-muted); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 1.6px; }
.atelier-queue__clock i { width: 1px; height: 38px; background: var(--qu-line); }

.atelier-queue__next { display: flex; flex-direction: column; align-items: center; gap: .35em; text-align: center; }
.atelier-queue__next-when { color: var(--qu-gold-light); font-size: 12.5px; font-weight: 700; letter-spacing: 1.2px; }
.atelier-queue__next-what { color: var(--qu-ink); font-family: "Manrope", sans-serif; font-size: 1.35rem; font-weight: 500; letter-spacing: -.03em; }
.atelier-queue__next-who { color: var(--qu-muted); font-size: 13.5px; }

.atelier-queue__stats { display: flex; width: 100%; max-width: 420px; padding-top: 2.4em; border-top: 1px solid var(--qu-line); }
.atelier-queue__stat { flex: 1; display: flex; flex-direction: column; gap: .5em; padding-inline: 1.4em; border-inline-start: 1px solid var(--qu-line); }
.atelier-queue__stat:first-child { padding-inline-start: 0; border-inline-start: 0; }
.atelier-queue__stat strong { color: var(--qu-gold); font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.atelier-queue__stat strong em { margin-inline-start: .08em; font-size: .6em; font-style: normal; letter-spacing: 0; }
.atelier-queue__stat > span { color: var(--qu-muted); font-size: 12px; font-weight: 700; letter-spacing: .6px; line-height: 1.5; }

/* Timeline */
.atelier-queue__timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.atelier-queue__spine { position: absolute; top: 38px; bottom: 38px; inset-inline-start: 38px; width: 1px; background: var(--qu-line); pointer-events: none; }
.atelier-queue__spine b { position: absolute; inset: 0; background: linear-gradient(180deg, var(--qu-gold), rgba(185,154,99,.15)); transform-origin: 50% 0; }
.atelier-queue__item { position: relative; display: grid; grid-template-columns: 76px minmax(0,1fr) auto auto 44px; align-items: center; gap: 1.6em; padding: 1.5em 0; }
.atelier-queue__item[hidden] { display: none; }
.atelier-queue__item::after { content: ""; position: absolute; bottom: 0; inset-inline-start: calc(76px + 1.6em); inset-inline-end: 0; height: 1px; background: var(--qu-line); }
.atelier-queue__item:last-child::after { display: none; }
.atelier-queue__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 76px; height: 76px; border: 1px solid rgba(185,154,99,.6); border-radius: 50%; background: var(--qu-bg); color: var(--qu-ink); box-shadow: 0 0 0 8px var(--qu-bg); transition: background .35s ease, color .35s ease, transform .35s ease, border-color .35s ease; }
.atelier-queue__node b { font-family: "Manrope", sans-serif; font-size: 23px; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.atelier-queue__node small { margin-top: .3em; color: var(--qu-gold-light); font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px; transition: color .35s ease; }
.atelier-queue__item[data-status="progress"] .atelier-queue__node { background: var(--qu-gold); border-color: var(--qu-gold); color: #171713; box-shadow: 0 0 0 8px var(--qu-bg), 0 0 28px 6px rgba(185,154,99,.35); }
.atelier-queue__item[data-status="progress"] .atelier-queue__node small { color: #171713; }
.atelier-queue__item:hover .atelier-queue__node { transform: scale(1.06); border-color: var(--qu-gold-light); }
.atelier-queue__when { color: var(--qu-gold-light); font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; }
.atelier-queue__main h3 { margin: .45em 0 .3em; color: var(--qu-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.1rem, 1.6vw, 1.45rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; transition: color .3s ease; }
.atelier-queue__item:hover .atelier-queue__main h3 { color: var(--qu-gold-light); }
.atelier-queue__main p { margin: 0; color: var(--qu-muted); font-size: 13.5px; }

.atelier-queue__stages { display: flex; flex-direction: column; align-items: flex-start; gap: .55em; min-width: 92px; }
.atelier-queue__dots { display: flex; gap: .45em; }
.atelier-queue__dots i { width: 9px; height: 9px; border: 1px solid rgba(185,154,99,.6); border-radius: 50%; transition: background .3s ease; }
.atelier-queue__dots i.is-on { background: var(--qu-gold); border-color: var(--qu-gold); box-shadow: 0 0 8px rgba(185,154,99,.5); }
.atelier-queue__stages em { color: var(--qu-muted); font-size: 11.5px; font-style: normal; font-weight: 600; letter-spacing: .4px; }

.atelier-queue__status { display: inline-flex; align-items: center; gap: .7em; padding: .6em 1.2em; border: 1px solid var(--qu-line); border-radius: 999px; color: var(--qu-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .6px; white-space: nowrap; }
.atelier-queue__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--qu-muted); }
.atelier-queue__status--progress { border-color: rgba(185,154,99,.6); color: var(--qu-gold-light); }
.atelier-queue__status--progress i { background: var(--qu-gold); box-shadow: 0 0 0 0 rgba(185,154,99,.6); animation: atelier-queue-pulse 2s ease-out infinite; }
.atelier-queue__status--confirmed i { background: var(--qu-sage); }
.atelier-queue__status--pending { border-style: dashed; color: var(--qu-muted); }
.atelier-queue__status--pending i { background: transparent; border: 1px solid var(--qu-muted); }
@keyframes atelier-queue-pulse { 0% { box-shadow: 0 0 0 0 rgba(185,154,99,.6); } 100% { box-shadow: 0 0 0 9px rgba(185,154,99,0); } }

.atelier-queue__go { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: var(--qu-gold-light); font-size: 17px; transition: transform .35s ease, background .35s ease, color .35s ease; }
.atelier-queue__item:hover .atelier-queue__go, .atelier-queue__go:focus-visible { transform: rotate(45deg); background: var(--qu-gold); color: #171713; }
.atelier-queue__item.is-new .atelier-queue__main h3 { color: var(--qu-gold-light); }
.atelier-queue__item.is-new::before { content: ""; position: absolute; inset: 0 -1.2em; border-radius: 999px; background: linear-gradient(90deg, rgba(185,154,99,.16), transparent); opacity: 0; pointer-events: none; animation: atelier-queue-flash 3.2s ease-out; }
@keyframes atelier-queue-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }

.atelier-queue__empty { margin: 2em 0; padding-inline-start: calc(76px + 1.6em); color: var(--qu-muted); font-size: 14px; }
.atelier-queue__empty[hidden] { display: none; }

.atelier-queue__cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6em 2.4em; margin-top: 3em; padding-inline-start: calc(76px + 1.6em); }
.atelier-queue__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--qu-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-queue__cta i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--qu-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-queue__cta:hover { background: var(--qu-gold); color: #171713; }
.atelier-queue__cta:hover i { transform: translateX(3px); background: #171713; color: var(--qu-gold-light); }
.atelier-queue__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--qu-ink); font-size: 13px; font-weight: 700; letter-spacing: .7px; }
.atelier-queue__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--qu-gold); border-radius: 50%; color: var(--qu-gold); font-size: 16px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-queue__text-link:hover i { transform: translateY(-3px); background: var(--qu-gold); color: #171713; }

.atelier-queue a:focus-visible, .atelier-queue button:focus-visible { outline: 2px solid var(--qu-gold-light); outline-offset: 4px; }
.atelier-queue__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-queue { padding: 5em 2.5em; }
  .atelier-queue__head { margin-bottom: 3.5em; }
  .atelier-queue__body { grid-template-columns: 1fr; gap: 4.5em; }
  .atelier-queue__aside { position: static; }
  .atelier-queue__dial { width: min(100%, 330px); }
  .atelier-queue__item { grid-template-columns: 76px minmax(0,1fr) auto 44px; }
  .atelier-queue__stages { display: none; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-queue { padding: 5em 1.5em; }
  .atelier-queue::after { width: 320px; height: 320px; bottom: -120px; inset-inline-start: -140px; }
  .atelier-queue__head { flex-direction: column; align-items: flex-start; gap: 1.8em; margin-bottom: 3em; }
  .atelier-queue__filters { justify-content: flex-start; gap: .55em; }
  .atelier-queue__filter { padding: .7em 1.2em; font-size: 12px; }
  .atelier-queue__dial { width: min(100%, 280px); }
  .atelier-queue__clock { gap: .6em; }
  .atelier-queue__clock b { font-size: 1.75rem; }
  .atelier-queue__aside { gap: 2.4em; }
  .atelier-queue__spine { top: 30px; bottom: 30px; inset-inline-start: 30px; }
  .atelier-queue__item { grid-template-columns: 60px minmax(0,1fr); gap: .9em 1.2em; padding: 1.4em 0; align-items: start; }
  .atelier-queue__item::after { inset-inline-start: calc(60px + 1.2em); }
  .atelier-queue__node { width: 60px; height: 60px; box-shadow: 0 0 0 6px var(--qu-bg); }
  .atelier-queue__item[data-status="progress"] .atelier-queue__node { box-shadow: 0 0 0 6px var(--qu-bg), 0 0 22px 4px rgba(185,154,99,.35); }
  .atelier-queue__node b { font-size: 19px; }
  .atelier-queue__node small { font-size: 8.5px; }
  .atelier-queue__status { grid-column: 2; justify-self: start; }
  .atelier-queue__go { display: none; }
  .atelier-queue__empty, .atelier-queue__cta-row { padding-inline-start: 0; }
  .atelier-queue__cta-row { margin-top: 2.6em; }
  .atelier-queue__stat { padding-inline: .9em; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-queue *, .atelier-queue *::before, .atelier-queue *::after { transition: none !important; animation: none !important; }
}
/* =========================================================
   AUTOMOTIVE ATELIER | VEHICLE SERVICE STATUS TRACKER
========================================================= */
.atelier-track { --tk-gold: #B99A63; --tk-gold-light: #D8C49A; --tk-gold-deep: #947545; --tk-bg: #F5F3EF; --tk-ink: #25251F; --tk-muted: #77766F; --tk-line: rgba(39,39,33,.15); --tk-field: rgba(255,255,255,.55); --tk-err: #B5503F; --tk-ok: #5E8F6C; position: relative; isolation: isolate; padding: 6em 5em; background: var(--tk-bg); color: var(--tk-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-track * { box-sizing: border-box; }
.atelier-track::before { content: ""; position: absolute; z-index: -1; top: -180px; inset-inline-end: -200px; width: 560px; height: 560px; border: 1px solid rgba(185,154,99,.24); border-radius: 50%; pointer-events: none; }
.atelier-track::after { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-start: -200px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.14), transparent 68%); pointer-events: none; }
.atelier-track__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-track__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5em; margin-bottom: 4.5em; }
.atelier-track__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--tk-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-track__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--tk-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.16); }
.atelier-track__title { margin: 1em 0 0; color: var(--tk-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-track__title span { color: var(--tk-gold); font-weight: 400; }
.atelier-track__lead { max-width: 400px; margin: 0; padding-inline-start: 1.6em; border-inline-start: 1px solid var(--tk-gold); color: var(--tk-muted); font-size: 14px; line-height: 1.85; }

/* Body layout */
.atelier-track__body { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); grid-template-areas: "top loop" "detail loop"; column-gap: 5em; row-gap: 2.6em; align-items: start; }
.atelier-track__top { grid-area: top; align-self: end; }
.atelier-track__loop { grid-area: loop; align-self: start; }
.atelier-track__detail { grid-area: detail; align-self: start; }

/* Lookup */
.atelier-track__lookup { margin-bottom: 2em; }
.atelier-track__lookup-label { display: block; margin-bottom: .9em; color: var(--tk-ink); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.atelier-track__lookup-field { display: flex; align-items: center; gap: .8em; padding-block: .45em; padding-inline: 1.5em .45em; border: 1px solid var(--tk-line); border-radius: 999px; background: var(--tk-field); transition: border-color .3s ease, box-shadow .3s ease; }
.atelier-track__lookup-field:focus-within { border-color: var(--tk-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.16); }
.atelier-track__lookup-field.is-error { border-color: var(--tk-err); box-shadow: 0 0 0 4px rgba(181,80,63,.12); }
.atelier-track__lookup-field > i { color: var(--tk-gold-deep); font-size: 14px; }
.atelier-track__lookup-field input { flex: 1; min-width: 0; padding: .7em 0; border: 0; outline: 0; background: transparent; color: var(--tk-ink); font-family: "DM Sans", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.atelier-track__lookup-field input::placeholder { color: var(--tk-muted); font-weight: 400; letter-spacing: 0; text-transform: none; }
.atelier-track__lookup-btn { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--tk-gold); color: #171713; font-size: 16px; cursor: pointer; transition: background .3s ease, transform .3s ease; }
.atelier-track__lookup-btn:hover { background: var(--tk-gold-light); transform: translateX(3px); }
.atelier-track__lookup-btn:focus-visible, .atelier-track__step:focus-visible, .atelier-track__node:focus-visible, .atelier-track__back:focus-visible { outline: 2px solid var(--tk-gold); outline-offset: 4px; }
.atelier-track__lookup-msg { margin: .9em 0 0; padding-inline-start: 1.5em; color: var(--tk-muted); font-size: 12.5px; line-height: 1.6; }
.atelier-track__lookup-msg.is-error { color: var(--tk-err); }
.atelier-track__lookup-msg.is-ok { color: var(--tk-gold-deep); }

/* Vehicle */
.atelier-track__vehicle { display: flex; flex-wrap: wrap; align-items: center; gap: .7em 1.1em; }
.atelier-track__live { display: inline-flex; align-items: center; gap: .55em; padding: .45em 1em; border: 1px solid rgba(185,154,99,.6); border-radius: 999px; color: var(--tk-gold-deep); font-size: 11.5px; font-weight: 700; letter-spacing: .8px; }
.atelier-track__live em { font-style: normal; }
.atelier-track__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--tk-gold); animation: atelierTrackBlink 1.8s ease-in-out infinite; }
.atelier-track__live.is-ready i { background: var(--tk-ok); animation: none; }
.atelier-track__vehicle b { font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.atelier-track__plate { color: var(--tk-muted); font-size: 13px; letter-spacing: .06em; }

/* Racetrack */
.atelier-track__loop { --nd: 28px; position: sticky; top: 100px; width: 100%; max-width: 720px; margin-inline: auto; aspect-ratio: 1.4 / 1; direction: ltr; }
.atelier-track__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.atelier-track__rail { fill: none; stroke: rgba(148,117,69,.5); stroke-width: 1.6; stroke-dasharray: 1 8; stroke-linecap: round; }
.atelier-track__fill { fill: none; stroke: var(--tk-gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(185,154,99,.55)); }
.atelier-track__photo { position: absolute; inset: calc(var(--nd) + 14px); z-index: 1; border-radius: 999px; overflow: hidden; background: linear-gradient(135deg, #2B271D, #14130F); box-shadow: 0 46px 80px -38px rgba(25,24,18,.6); isolation: isolate; }
.atelier-track__photo::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(216,196,154,.35), inset 0 -130px 90px -70px rgba(14,14,11,.78); pointer-events: none; }
.atelier-track__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .9s ease, transform 1.8s ease; }
.atelier-track__photo img.is-active { opacity: 1; transform: scale(1); }
.atelier-track__badge { position: absolute; z-index: 3; bottom: 11%; inset-inline: 0; width: max-content; max-width: 78%; margin: 0 auto; display: inline-flex; align-items: center; gap: .7em; padding: .7em 1.3em; border: 1px solid rgba(216,196,154,.45); border-radius: 999px; background: rgba(20,19,15,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F0EEE8; font-size: 13px; font-weight: 600; letter-spacing: .3px; text-align: center; }
.atelier-track__badge i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--tk-gold-light); animation: atelierTrackBlink 1.8s ease-in-out infinite; }
.atelier-track__node { position: absolute; z-index: 3; left: 0; top: 0; width: var(--nd); height: var(--nd); margin: calc(var(--nd) / -2) 0 0 calc(var(--nd) / -2); padding: 0; display: grid; place-items: center; border: 1px solid rgba(185,154,99,.7); border-radius: 50%; background: var(--tk-bg); color: var(--tk-gold-deep); font-family: "Manrope", sans-serif; font-size: 11px; font-weight: 800; cursor: pointer; transition: background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease; }
.atelier-track__node i { display: none; font-size: 10px; }
.atelier-track__node.is-done { background: var(--tk-gold); border-color: var(--tk-gold); color: #171713; }
.atelier-track__node.is-done .n { display: none; }
.atelier-track__node.is-done i { display: block; }
.atelier-track__node:hover { box-shadow: 0 0 0 5px rgba(185,154,99,.2); }
.atelier-track__node.is-selected { box-shadow: 0 0 0 6px rgba(185,154,99,.28); border-color: var(--tk-gold-deep); }
.atelier-track__node::after { content: attr(data-label); position: absolute; bottom: calc(100% + 12px); left: 50%; padding: .45em 1em; border-radius: 999px; background: var(--tk-ink); color: var(--tk-bg); font-family: "DM Sans", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .3px; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity .25s ease, transform .25s ease; }
.atelier-track__node:hover::after, .atelier-track__node:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.atelier-track__car { position: absolute; z-index: 4; left: 0; top: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: grid; place-items: center; border-radius: 50%; background: var(--tk-gold); color: #171713; font-size: 16px; box-shadow: 0 10px 24px rgba(148,117,69,.45); pointer-events: none; }
.atelier-track__car::after { content: ""; position: absolute; inset: -7px; border: 1px solid var(--tk-gold); border-radius: 50%; animation: atelierTrackPulse 2.4s ease-out infinite; }
@keyframes atelierTrackPulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes atelierTrackBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Readout */
.atelier-track__stage-head { display: flex; align-items: center; gap: 1.2em; margin-bottom: .2em; }
.atelier-track__num { color: transparent; -webkit-text-stroke: 1px var(--tk-gold); font-family: "Manrope", sans-serif; font-size: clamp(3.4rem, 6vw, 5.4rem); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.atelier-track__state { padding: .45em 1.1em; border: 1px solid var(--tk-line); border-radius: 999px; color: var(--tk-muted); font-size: 12px; font-weight: 700; letter-spacing: .5px; }
.atelier-track__state[data-state="live"] { border-color: rgba(185,154,99,.7); color: var(--tk-gold-deep); background: rgba(185,154,99,.1); }
.atelier-track__state[data-state="done"] { border-color: rgba(94,143,108,.6); color: var(--tk-ok); }
.atelier-track__stage-title { margin: .3em 0 0; font-family: "Manrope", sans-serif; font-size: clamp(1.5rem, 2.3vw, 2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.atelier-track__stage-text { max-width: 46ch; margin: 1em 0 0; color: var(--tk-muted); font-size: 14.5px; line-height: 1.85; }
.atelier-track__facts { margin: 1.8em 0 0; padding: 0; }
.atelier-track__facts > div { display: flex; align-items: baseline; gap: 1em; padding: .8em 0; }
.atelier-track__facts dt { display: flex; flex: 1; align-items: baseline; gap: .8em; margin: 0; color: var(--tk-muted); font-size: 13px; }
.atelier-track__facts dt::after { content: ""; flex: 1; border-bottom: 1px dotted rgba(119,118,111,.55); transform: translateY(-3px); }
.atelier-track__facts dd { margin: 0; font-family: "Manrope", sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; text-align: end; }
.atelier-track__back { display: inline-flex; align-items: center; gap: .7em; margin-top: 1em; padding: 0; border: 0; background: transparent; color: var(--tk-gold-deep); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
.atelier-track__back[hidden] { display: none; }
.atelier-track__back:hover { color: var(--tk-ink); }

/* Meter */
.atelier-track__meter { margin-top: 2.2em; }
.atelier-track__meter-top { margin-bottom: .9em; color: var(--tk-muted); font-size: 13px; }
.atelier-track__meter-top b { color: var(--tk-ink); font-family: "Manrope", sans-serif; font-size: 2.2rem; font-weight: 500; letter-spacing: -.05em; }
.atelier-track__meter-top em { margin-inline-end: .5em; color: var(--tk-gold); font-family: "Manrope", sans-serif; font-style: normal; font-size: 1.1rem; }
.atelier-track__meter-bar { position: relative; height: 2px; overflow: hidden; border-radius: 2px; background: var(--tk-line); }
.atelier-track__meter-fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--tk-gold-deep), var(--tk-gold-light)); transform: scaleX(.68); transform-origin: left center; }
.atelier-track__update { display: flex; align-items: flex-start; gap: .8em; margin: 1.2em 0 0; color: var(--tk-muted); font-size: 13px; line-height: 1.7; }
.atelier-track__update i { width: 6px; height: 6px; flex: 0 0 6px; margin-top: .65em; border-radius: 50%; background: var(--tk-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.16); }

/* Stage chips */
.atelier-track__steps { display: flex; gap: 1.7em; margin-top: 2em; overflow-x: auto; scrollbar-width: none; }
.atelier-track__steps::-webkit-scrollbar { display: none; }
.atelier-track__step { position: relative; flex: 0 0 auto; padding: .5em 0 .95em; border: 0; background: transparent; color: var(--tk-muted); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: color .3s ease; }
.atelier-track__step::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--tk-line); transition: background .3s ease, height .3s ease; }
.atelier-track__step.is-done::after { background: var(--tk-gold-light); }
.atelier-track__step.is-live::after { background: var(--tk-gold); }
.atelier-track__step:hover, .atelier-track__step.is-selected { color: var(--tk-ink); }
.atelier-track__step.is-selected::after { height: 3px; background: var(--tk-gold-deep); }

/* CTA */
.atelier-track__cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6em 2.4em; margin-top: 2.4em; }
.atelier-track__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--tk-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-track__cta i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tk-gold); color: #171713; font-size: 15px; transition: transform .3s ease; }
.atelier-track__cta:hover { background: var(--tk-gold); color: #171713; }
.atelier-track__cta:hover i { transform: translateX(3px); background: #171713; color: var(--tk-gold-light); }
.atelier-track__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--tk-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; }
.atelier-track__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--tk-gold); border-radius: 50%; color: var(--tk-gold-deep); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-track__text-link:hover i { transform: translateY(-3px); background: var(--tk-gold); color: #171713; }
.atelier-track__cta:focus-visible, .atelier-track__text-link:focus-visible { outline: 2px solid var(--tk-gold); outline-offset: 4px; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-track { padding: 5em 2.5em; }
  .atelier-track__head { margin-bottom: 3.5em; }
  .atelier-track__body { grid-template-columns: minmax(0,1fr); grid-template-areas: "top" "loop" "detail"; row-gap: 3.4em; }
  .atelier-track__loop { max-width: 640px; position: static; }
  .atelier-track__top { align-self: start; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-track { padding: 5em 1.5em; }
  .atelier-track::before { width: 340px; height: 340px; top: -120px; inset-inline-end: -140px; }
  .atelier-track__head { flex-direction: column; align-items: flex-start; gap: 1.8em; margin-bottom: 3em; }
  .atelier-track__lead { padding-inline-start: 1.2em; }
  .atelier-track__body { row-gap: 3em; }
  .atelier-track__lookup-field input { font-size: 14px; }
  .atelier-track__loop { --nd: 24px; aspect-ratio: 1.12 / 1; }
  .atelier-track__photo { inset: calc(var(--nd) + 10px); }
  .atelier-track__badge { bottom: 12%; max-width: 86%; padding: .6em 1.05em; font-size: 12px; }
  .atelier-track__node { font-size: 10px; }
  .atelier-track__node::after { display: none; }
  .atelier-track__car { width: 38px; height: 38px; margin: -19px 0 0 -19px; font-size: 14px; }
  .atelier-track__stage-head { gap: .9em; }
  .atelier-track__facts > div { padding: .7em 0; }
  .atelier-track__steps { gap: 1.4em; margin-inline: -1.5em; padding-inline: 1.5em; }
  .atelier-track__cta-row { margin-top: 2em; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-track *, .atelier-track *::before, .atelier-track *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | PERSONALISED CARE PACKAGES
========================================================= */
.atelier-care { --cr-gold: #B99A63; --cr-gold-light: #D8C49A; --cr-gold-deep: #947545; --cr-bg: #ECE6DA; --cr-ink: #25251F; --cr-muted: #6F6D64; --cr-line: rgba(39,39,33,.16); --cr-night: #191A18; --cr-soft: rgba(255,255,255,.45); position: relative; isolation: isolate; padding: 6em 5em; background: var(--cr-bg); color: var(--cr-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-care * { box-sizing: border-box; }
.atelier-care::before { content: ""; position: absolute; z-index: -1; top: -200px; inset-inline-start: -220px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.2), transparent 68%); pointer-events: none; }
.atelier-care::after { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-end: -220px; width: 580px; height: 580px; border: 1px solid rgba(185,154,99,.28); border-radius: 50%; pointer-events: none; }
.atelier-care__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-care__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 4.5em; }
.atelier-care__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--cr-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-care__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--cr-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }
.atelier-care__title { margin: 1em 0 0; color: var(--cr-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-care__title span { color: var(--cr-gold); font-weight: 400; }
.atelier-care__lead { max-width: 400px; margin: 0; padding-inline-start: 1.6em; border-inline-start: 1px solid var(--cr-gold); color: var(--cr-muted); font-size: 14px; line-height: 1.85; }

/* Body */
.atelier-care__body { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 5.5em; align-items: start; }

/* Arch visual */
.atelier-care__visual { position: sticky; top: 100px; align-self: start; width: 100%; max-width: 460px; margin-inline: auto; aspect-ratio: 1 / 1.22; }
.atelier-care__arches { position: absolute; inset: 0; pointer-events: none; }
.atelier-care__arches span { position: absolute; border: 1px solid rgba(185,154,99,.55); border-radius: 999px 999px 56px 56px; transform-origin: 50% 100%; }
.atelier-care__arches span:nth-child(1) { inset-block: 4% -4%; inset-inline: -7% 7%; }
.atelier-care__arches span:nth-child(2) { inset-block: 8% -8%; inset-inline: -13% 13%; border-color: rgba(185,154,99,.32); }
.atelier-care__arch { position: absolute; inset: 0; z-index: 1; border-radius: 999px 999px 56px 56px; overflow: hidden; background: linear-gradient(160deg, #2B271D, #14130F); box-shadow: 0 54px 90px -40px rgba(25,24,18,.62); isolation: isolate; }
.atelier-care__arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .9s ease, transform 1.8s ease; }
.atelier-care__arch img.is-active { opacity: 1; transform: scale(1); }
.atelier-care__arch-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 52%, rgba(14,14,11,.78)); pointer-events: none; }
.atelier-care__arch::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(216,196,154,.35); pointer-events: none; }
.atelier-care__arch-cap { position: absolute; z-index: 3; bottom: 7%; inset-inline: 0; width: max-content; max-width: 84%; margin: 0 auto; display: inline-flex; align-items: center; gap: .7em; padding: .7em 1.3em; border: 1px solid rgba(216,196,154,.45); border-radius: 999px; background: rgba(20,19,15,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F0EEE8; font-size: 13px; font-weight: 600; text-align: center; }
.atelier-care__arch-cap i { color: var(--cr-gold-light); font-size: 12px; }
.atelier-care__seal { position: absolute; z-index: 4; bottom: 15%; inset-inline-end: -8%; width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; background: var(--cr-night); color: #F0EEE8; box-shadow: 0 24px 50px -16px rgba(0,0,0,.55); direction: ltr; }
.atelier-care__seal-ring { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); overflow: visible; }
.atelier-care__seal-ring circle { fill: none; stroke: var(--cr-gold); stroke-width: .8; stroke-dasharray: 1.2 3.2; stroke-linecap: round; }
.atelier-care__seal-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; }
.atelier-care__seal-in small { color: #B0ADA3; font-size: 10px; font-weight: 600; letter-spacing: .4px; }
.atelier-care__seal-in b { margin: .1em 0; color: var(--cr-gold-light); font-family: "Manrope", sans-serif; font-size: 2.3rem; font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.atelier-care__seal-in em { color: #F0EEE8; font-size: 12px; font-style: normal; font-weight: 600; }

/* Selectors */
.atelier-care__fields { display: flex; flex-wrap: wrap; gap: 2.4em 4em; margin-bottom: 3em; }
.atelier-care__field { min-width: 0; margin: 0; padding: 0; border: 0; }
.atelier-care__field legend { margin-bottom: 1.2em; padding: 0; color: var(--cr-ink); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.atelier-care__orbs { display: flex; flex-wrap: wrap; gap: 1.2em 1.4em; }
.atelier-care__orb { position: relative; width: 78px; display: flex; flex-direction: column; align-items: center; gap: .75em; text-align: center; cursor: pointer; }
.atelier-care__orb input { position: absolute; top: 0; left: 50%; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.atelier-care__orb-face { width: 58px; height: 58px; display: grid; place-items: center; border: 1px solid var(--cr-line); border-radius: 50%; background: var(--cr-soft); color: var(--cr-gold-deep); font-size: 19px; transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.atelier-care__orb:hover .atelier-care__orb-face { border-color: var(--cr-gold); transform: translateY(-3px); }
.atelier-care__orb input:checked + .atelier-care__orb-face { background: var(--cr-gold); border-color: var(--cr-gold); color: #171713; box-shadow: 0 0 0 5px rgba(185,154,99,.22); }
.atelier-care__orb input:focus-visible + .atelier-care__orb-face { outline: 2px solid var(--cr-gold); outline-offset: 4px; }
.atelier-care__orb-label { color: var(--cr-muted); font-size: 12.5px; font-weight: 600; line-height: 1.35; transition: color .3s ease; }
.atelier-care__orb input:checked ~ .atelier-care__orb-label { color: var(--cr-ink); }

/* Package switch */
.atelier-care__switch { position: relative; display: inline-flex; padding: 4px; border: 1px solid var(--cr-line); border-radius: 999px; background: var(--cr-soft); }
.atelier-care__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--cr-night); box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.atelier-care__switch button { position: relative; z-index: 1; padding: .95em 1.8em; border: 0; border-radius: 999px; background: transparent; color: var(--cr-muted); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .4px; cursor: pointer; transition: color .3s ease; }
.atelier-care__switch button:hover { color: var(--cr-ink); }
.atelier-care__switch button[aria-checked="true"] { color: var(--cr-gold-light); }
.atelier-care__switch button:focus-visible { outline: 2px solid var(--cr-gold); outline-offset: 2px; }

/* Plan */
.atelier-care__plan { margin-top: 2.6em; }
.atelier-care__match { display: inline-flex; align-items: center; gap: .7em; margin: 0; padding: .5em 1.1em; border: 1px solid rgba(185,154,99,.6); border-radius: 999px; background: rgba(185,154,99,.1); color: var(--cr-gold-deep); font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.atelier-care__match i { font-size: 11px; }
.atelier-care__reason { max-width: 54ch; margin: 1em 0 0; color: var(--cr-muted); font-size: 13.5px; line-height: 1.75; }
.atelier-care__name { margin: .9em 0 0; font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-care__tag { max-width: 50ch; margin: .7em 0 0; color: var(--cr-muted); font-size: 14.5px; line-height: 1.8; }
.atelier-care__inc { margin: 1.8em 0 0; padding: 0; list-style: none; }
.atelier-care__inc li { display: flex; align-items: center; gap: 1em; padding: .85em 0; border-bottom: 1px solid var(--cr-line); font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.atelier-care__inc li:last-child { border-bottom: 0; }
.atelier-care__inc li i { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border: 1px solid var(--cr-gold); border-radius: 50%; color: var(--cr-gold-deep); font-size: 9px; }

/* Add-ons */
.atelier-care__addons-wrap { margin-top: 2em; }
.atelier-care__sub { margin: 0 0 1em; color: var(--cr-ink); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.atelier-care__addons { display: flex; flex-wrap: wrap; gap: .8em; }
.atelier-care__addon { display: inline-flex; align-items: center; gap: .7em; padding: .7em 1.2em; border: 1px solid var(--cr-line); border-radius: 999px; background: transparent; color: var(--cr-ink); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .3s ease, border-color .3s ease, color .3s ease; }
.atelier-care__addon i { color: var(--cr-gold-deep); font-size: 11px; transition: transform .3s ease; }
.atelier-care__addon small { color: var(--cr-muted); font-size: 12px; font-weight: 600; }
.atelier-care__addon:hover { border-color: var(--cr-gold); }
.atelier-care__addon[aria-pressed="true"] { border-color: var(--cr-gold); background: rgba(185,154,99,.18); }
.atelier-care__addon[aria-pressed="true"] i { transform: rotate(45deg); }
.atelier-care__addon:focus-visible { outline: 2px solid var(--cr-gold); outline-offset: 3px; }

/* Total */
.atelier-care__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; margin-top: 2.4em; padding-top: 2em; border-top: 1px solid var(--cr-line); }
.atelier-care__total-label { display: block; color: var(--cr-muted); font-size: 13px; font-weight: 600; }
.atelier-care__price { display: flex; align-items: flex-start; gap: .15em; margin: .2em 0 .3em; color: var(--cr-ink); font-family: "Manrope", sans-serif; direction: ltr; }
.atelier-care__price sup { margin-top: .5em; color: var(--cr-gold); font-size: 1.2rem; font-weight: 500; }
.atelier-care__price b { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.atelier-care__total small { color: var(--cr-muted); font-size: 12.5px; }
.atelier-care__time { display: inline-flex; align-items: center; gap: .7em; margin: 0; padding: .6em 1.2em; border: 1px solid var(--cr-line); border-radius: 999px; color: var(--cr-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.atelier-care__time i { color: var(--cr-gold-deep); }

/* Actions */
.atelier-care__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6em 2.4em; margin-top: 2.2em; }
.atelier-care__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.8); border-radius: 999px; color: var(--cr-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-care__cta i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cr-gold); color: #171713; font-size: 15px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-care__cta:hover { background: var(--cr-gold); color: #171713; }
.atelier-care__cta:hover i { transform: translateX(3px); background: #171713; color: var(--cr-gold-light); }
.atelier-care__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--cr-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; }
.atelier-care__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--cr-gold); border-radius: 50%; color: var(--cr-gold-deep); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-care__text-link:hover i { transform: translateY(-3px); background: var(--cr-gold); color: #171713; }
.atelier-care__cta:focus-visible, .atelier-care__text-link:focus-visible { outline: 2px solid var(--cr-gold); outline-offset: 4px; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-care { padding: 5em 2.5em; }
  .atelier-care__head { margin-bottom: 3.5em; }
  .atelier-care__body { grid-template-columns: minmax(0,1fr); gap: 11.5em; }
  .atelier-care__visual { max-width: 420px; position: relative; }
  .atelier-care__fields { gap: 2.4em 3.4em; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-care { padding: 5em 1.5em; }
  .atelier-care::after { width: 320px; height: 320px; bottom: -120px; inset-inline-end: -140px; }
  .atelier-care__head { flex-direction: column; align-items: flex-start; gap: 1.8em; margin-bottom: 3em; }
  .atelier-care__lead { padding-inline-start: 1.2em; }
  .atelier-care__body { gap: 12em; }
  .atelier-care__visual { max-width: 330px; margin-inline: 1em auto; }
  .atelier-care__arches span:nth-child(1) { inset-inline: -5% 5%; }
  .atelier-care__arches span:nth-child(2) { inset-inline: -9% 9%; }
  .atelier-care__arch-cap { font-size: 12px; padding: .6em 1.05em; }
  .atelier-care__seal { width: 108px; height: 108px; inset-inline-end: -5%; bottom: 14%; }
  .atelier-care__seal-in b { font-size: 1.9rem; }
  .atelier-care__fields { gap: 2.2em; margin-bottom: 2.4em; }
  .atelier-care__orbs { gap: 1.1em 1em; }
  .atelier-care__orb { width: 72px; }
  .atelier-care__orb-face { width: 52px; height: 52px; font-size: 17px; }
  .atelier-care__switch { display: flex; width: 100%; }
  .atelier-care__switch button { flex: 1; padding: .9em .4em; font-size: 12.5px; }
  .atelier-care__plan { margin-top: 2.2em; }
  .atelier-care__total { flex-direction: column; align-items: flex-start; gap: 1.4em; }
  .atelier-care__actions { gap: 1.4em 2em; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-care *, .atelier-care *::before, .atelier-care *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | LOYALTY REWARDS & POINTS
========================================================= */
.atelier-loyal { --lo-gold: #B99A63; --lo-gold-light: #D8C49A; --lo-gold-deep: #947545; --lo-bg: #151612; --lo-ink: #F0EEE8; --lo-muted: #B0ADA3; --lo-line: rgba(235,229,216,.16); --lo-track: rgba(235,229,216,.2); position: relative; isolation: isolate; padding: 6em 5em; background: var(--lo-bg); color: var(--lo-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-loyal * { box-sizing: border-box; }
.atelier-loyal__defs, .atelier-history__defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.atelier-loyal::before { content: ""; position: absolute; z-index: -1; top: 24%; inset-inline-start: -14%; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.15), transparent 66%); pointer-events: none; }
.atelier-loyal::after { content: ""; position: absolute; z-index: -1; top: -160px; inset-inline-end: -160px; width: 460px; height: 460px; border: 1px dashed rgba(185,154,99,.2); border-radius: 50%; pointer-events: none; }
.atelier-loyal__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading */
.atelier-loyal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 4.5em; }
.atelier-loyal__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--lo-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-loyal__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--lo-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }
.atelier-loyal__title { margin: 1em 0 0; color: var(--lo-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-loyal__title span { color: var(--lo-gold); font-weight: 400; }
.atelier-loyal__lead { max-width: 400px; margin: 0; padding-inline-start: 1.6em; border-inline-start: 1px solid var(--lo-gold); color: var(--lo-muted); font-size: 14px; line-height: 1.85; }

.atelier-loyal__body { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 5.5em; align-items: center; }

/* Droplet */
.atelier-loyal__visual { display: flex; flex-direction: column; align-items: center; gap: 2.4em; }
.atelier-loyal__drop { position: relative; width: 100%; max-width: 420px; aspect-ratio: .84 / 1; direction: ltr; }
.atelier-loyal__drop-body { position: absolute; inset: 0; clip-path: url(#atelierDropClip); background: linear-gradient(160deg, #2B271D, #14130F); isolation: isolate; }
.atelier-loyal__drop-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.atelier-loyal__drop-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,11,.25), rgba(14,14,11,.72)); }
.atelier-loyal__liquid { position: absolute; inset: 0; transform: translateY(calc((1 - var(--lv, .57)) * 100%)); }
.atelier-loyal__wave { position: absolute; top: -21px; left: 0; width: 200%; height: 22px; fill: rgba(185,154,99,.78); }
.atelier-loyal__liquid-body { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(185,154,99,.78), rgba(148,117,69,.92)); }
.atelier-loyal__score { position: absolute; z-index: 3; inset-inline: 0; top: 44%; display: flex; flex-direction: column; align-items: center; color: #fff; text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.atelier-loyal__score small { font-size: 13px; font-weight: 600; letter-spacing: .5px; opacity: .92; }
.atelier-loyal__score b { font-family: "Manrope", sans-serif; font-size: clamp(2.8rem, 5vw, 4.2rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.05; }
.atelier-loyal__score em { margin-top: .7em; padding: .4em 1.1em; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; font-size: 12.5px; font-style: normal; font-weight: 700; letter-spacing: .4px; text-shadow: none; }
.atelier-loyal__outline, .atelier-loyal__halo { position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.atelier-loyal__outline { inset: 0; z-index: 2; }
.atelier-loyal__outline path { fill: none; stroke: var(--lo-gold-light); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.atelier-loyal__halo { inset: -6% -6% -4% -6%; width: 112%; height: 110%; }
.atelier-loyal__halo path { fill: none; stroke: rgba(185,154,99,.4); stroke-width: 1; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
.atelier-loyal__bead { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border: 1px solid rgba(216,196,154,.4); border-radius: 50%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.75), rgba(216,196,154,.35) 45%, rgba(185,154,99,.1)); box-shadow: 0 8px 18px rgba(0,0,0,.4); }
.atelier-loyal__next { display: inline-flex; align-items: center; gap: .8em; margin: 0; padding: .7em 1.4em; border: 1px solid rgba(185,154,99,.6); border-radius: 999px; color: var(--lo-ink); font-size: 13px; font-weight: 700; letter-spacing: .4px; }
.atelier-loyal__next i { color: var(--lo-gold); font-size: 12px; }

/* Panel */
.atelier-loyal__member { display: flex; align-items: center; gap: 1em; margin: 0 0 2em; color: var(--lo-muted); font-size: 14px; line-height: 1.6; }
.atelier-loyal__avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: var(--lo-gold); color: #171713; font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 800; }
.atelier-loyal__coins { display: flex; align-items: center; min-height: 124px; padding-inline-start: 22px; }
.atelier-loyal__coin { position: relative; width: 98px; height: 98px; margin-inline-start: -22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4em; padding: 0; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #2A2820, #161713); color: var(--lo-muted); cursor: pointer; transition: width .4s ease, height .4s ease, background .4s ease, color .4s ease, box-shadow .4s ease, opacity .4s ease; }
.atelier-loyal__coin i { color: var(--lo-gold-light); font-size: 20px; transition: color .3s ease; }
.atelier-loyal__coin span { font-family: "DM Sans", sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.atelier-loyal__coin.is-locked { opacity: .6; }
.atelier-loyal__coin:hover { color: var(--lo-ink); opacity: 1; }
.atelier-loyal__coin[aria-checked="true"] { z-index: 5; width: 118px; height: 118px; opacity: 1; border-color: var(--lo-gold-light); background: radial-gradient(circle at 30% 25%, var(--lo-gold-light), var(--lo-gold) 55%, var(--lo-gold-deep)); color: #171713; box-shadow: 0 22px 40px -14px rgba(0,0,0,.7), 0 0 0 6px rgba(185,154,99,.16); }
.atelier-loyal__coin[aria-checked="true"] i { color: #171713; }
.atelier-loyal__coin:focus-visible { outline: 2px solid var(--lo-gold-light); outline-offset: 4px; }

.atelier-loyal__tier { margin-top: 2em; }
.atelier-loyal__tier-head { display: flex; align-items: center; flex-wrap: wrap; gap: .8em 1.2em; }
.atelier-loyal__tier-head h3 { margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; }
.atelier-loyal__status { padding: .4em 1.1em; border: 1px solid var(--lo-line); border-radius: 999px; color: var(--lo-muted); font-size: 12px; font-weight: 700; letter-spacing: .4px; }
.atelier-loyal__status[data-state="current"] { border-color: rgba(185,154,99,.7); background: rgba(185,154,99,.14); color: var(--lo-gold-light); }
.atelier-loyal__status[data-state="done"] { border-color: rgba(143,182,154,.6); color: #8FB69A; }
.atelier-loyal__tier-sub { margin: .8em 0 0; color: var(--lo-muted); font-size: 14px; line-height: 1.7; }
.atelier-loyal__perks { columns: 2; column-gap: 2.6em; margin: 1.6em 0 0; padding: 0; list-style: none; }
.atelier-loyal__perks li { position: relative; break-inside: avoid; margin-bottom: 1em; padding-inline-start: 1.6em; color: var(--lo-ink); font-size: 14px; line-height: 1.6; }
.atelier-loyal__perks li::before { content: ""; position: absolute; inset-inline-start: .1em; top: .55em; width: 7px; height: 7px; background: var(--lo-gold); transform: rotate(45deg); }

/* Calculator */
.atelier-loyal__calc { margin-top: 2em; padding-top: 2em; border-top: 1px solid var(--lo-line); }
.atelier-loyal__calc-label { display: block; max-width: 52ch; color: var(--lo-ink); font-size: 13.5px; font-weight: 600; line-height: 1.6; }
.atelier-loyal__spend { display: block; margin: .5em 0 .2em; color: var(--lo-gold-light); font-family: "Manrope", sans-serif; font-size: 1.9rem; font-weight: 500; letter-spacing: -.04em; direction: ltr; text-align: start; }
.atelier-loyal__range { --v: 30%; width: 100%; height: 28px; margin: .3em 0 0; padding: 0; background: transparent; direction: ltr; -webkit-appearance: none; appearance: none; cursor: pointer; }
.atelier-loyal__range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--lo-gold) var(--v), var(--lo-track) var(--v)); }
.atelier-loyal__range::-moz-range-track { height: 3px; border-radius: 3px; background: var(--lo-track); }
.atelier-loyal__range::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--lo-gold); }
.atelier-loyal__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11.5px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--lo-gold-light), var(--lo-gold)); box-shadow: 0 0 0 6px rgba(185,154,99,.2), 0 8px 18px rgba(0,0,0,.45); }
.atelier-loyal__range::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--lo-gold-light), var(--lo-gold)); box-shadow: 0 0 0 6px rgba(185,154,99,.2), 0 8px 18px rgba(0,0,0,.45); }
.atelier-loyal__range:focus-visible { outline: 0; }
.atelier-loyal__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 7px rgba(216,196,154,.45), 0 8px 18px rgba(0,0,0,.45); }
.atelier-loyal__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 7px rgba(216,196,154,.45), 0 8px 18px rgba(0,0,0,.45); }
.atelier-loyal__calc-out { margin: 1em 0 0; color: var(--lo-muted); font-size: 14px; line-height: 1.8; }
.atelier-loyal__calc-out b { display: inline-block; color: var(--lo-gold-light); font-family: "Manrope", sans-serif; font-weight: 700; }

.atelier-loyal__rules { display: flex; flex-wrap: wrap; gap: .9em 2em; margin: 1.8em 0 0; padding: 0; list-style: none; }
.atelier-loyal__rules li { display: inline-flex; align-items: center; gap: .7em; color: var(--lo-muted); font-size: 13px; font-weight: 600; }
.atelier-loyal__rules i { color: var(--lo-gold); font-size: 13px; }

.atelier-loyal__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6em 2.4em; margin-top: 2.4em; }
.atelier-loyal__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--lo-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-loyal__cta i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--lo-gold); color: #171713; font-size: 15px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-loyal__cta:hover { background: var(--lo-gold); color: #171713; }
.atelier-loyal__cta:hover i { transform: translateX(3px); background: #171713; color: var(--lo-gold-light); }
.atelier-loyal__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--lo-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; }
.atelier-loyal__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--lo-gold); border-radius: 50%; color: var(--lo-gold); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-loyal__text-link:hover i { transform: translateY(-3px); background: var(--lo-gold); color: #171713; }
.atelier-loyal__cta:focus-visible, .atelier-loyal__text-link:focus-visible { outline: 2px solid var(--lo-gold); outline-offset: 4px; }

@media (max-width: 1024px) {
  .atelier-loyal { padding: 5em 2.5em; }
  .atelier-loyal__head { margin-bottom: 3.5em; }
  .atelier-loyal__body { grid-template-columns: minmax(0,1fr); gap: 4.5em; }
  .atelier-loyal__drop { max-width: 380px; }
}
@media (max-width: 767px) {
  .atelier-loyal { padding: 5em 1.5em; }
  .atelier-loyal::before { width: 460px; height: 460px; }
  .atelier-loyal::after { width: 300px; height: 300px; top: -110px; inset-inline-end: -120px; }
  .atelier-loyal__head { flex-direction: column; align-items: flex-start; gap: 1.8em; margin-bottom: 3em; }
  .atelier-loyal__lead { padding-inline-start: 1.2em; }
  .atelier-loyal__body { gap: 4em; }
  .atelier-loyal__drop { max-width: 310px; }
  .atelier-loyal__coins { min-height: 104px; padding-inline-start: 16px; }
  .atelier-loyal__coin { width: 78px; height: 78px; margin-inline-start: -16px; }
  .atelier-loyal__coin i { font-size: 17px; }
  .atelier-loyal__coin span { font-size: 11px; }
  .atelier-loyal__coin[aria-checked="true"] { width: 96px; height: 96px; }
  .atelier-loyal__perks { columns: 1; }
  .atelier-loyal__actions { gap: 1.4em 2em; }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-loyal *, .atelier-loyal *::before, .atelier-loyal *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | VEHICLE MAINTENANCE TIMELINE
========================================================= */
.atelier-maint { --mt-gold: #B99A63; --mt-gold-light: #D8C49A; --mt-gold-deep: #947545; --mt-bg: #F5F3EF; --mt-ink: #25251F; --mt-muted: #77766F; --mt-line: rgba(39,39,33,.15); --mt-tick: rgba(39,39,33,.28); --mt-tick-strong: rgba(39,39,33,.5); position: relative; isolation: isolate; padding: 6em 5em; background: var(--mt-bg); color: var(--mt-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-maint * { box-sizing: border-box; }
.atelier-maint::before { content: ""; position: absolute; z-index: -1; top: -200px; inset-inline-start: -200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.16), transparent 68%); pointer-events: none; }
.atelier-maint::after { content: ""; position: absolute; z-index: -1; bottom: -200px; inset-inline-end: -180px; width: 520px; height: 520px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-maint__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

.atelier-maint__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 4.5em; }
.atelier-maint__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--mt-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-maint__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--mt-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.16); }
.atelier-maint__title { margin: 1em 0 0; color: var(--mt-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-maint__title span { color: var(--mt-gold); font-weight: 400; }
.atelier-maint__lead { max-width: 400px; margin: 0; padding-inline-start: 1.6em; border-inline-start: 1px solid var(--mt-gold); color: var(--mt-muted); font-size: 14px; line-height: 1.85; }

/* Stage */
.atelier-maint__stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.9fr); gap: 5em; align-items: center; margin-bottom: 4.6em; }
.atelier-maint__when { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5em 1em; }
.atelier-maint__num { background: linear-gradient(135deg, var(--mt-gold-light), var(--mt-gold-deep)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--mt-gold); font-family: "Manrope", sans-serif; font-size: clamp(4rem, 7.5vw, 6.8rem); font-weight: 300; letter-spacing: -.06em; line-height: 1; }
.atelier-maint__unit { color: var(--mt-muted); font-size: 14px; font-weight: 600; }
.atelier-maint__name { margin: .5em 0 0; font-family: "Manrope", sans-serif; font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; }
.atelier-maint__text { max-width: 50ch; margin: 1em 0 0; color: var(--mt-muted); font-size: 14.5px; line-height: 1.85; }
.atelier-maint__meta { display: flex; flex-wrap: wrap; gap: .9em 2.2em; margin: 1.8em 0 0; padding: 0; list-style: none; }
.atelier-maint__meta li { display: inline-flex; align-items: center; gap: .7em; font-size: 13.5px; font-weight: 600; }
.atelier-maint__meta i { color: var(--mt-gold-deep); font-size: 14px; }
.atelier-maint__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4em 2em; margin-top: 2.2em; }
.atelier-maint__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.75); border-radius: 999px; color: var(--mt-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-maint__cta i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--mt-gold); color: #171713; font-size: 15px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-maint__cta:hover { background: var(--mt-gold); color: #171713; }
.atelier-maint__cta:hover i { transform: translateX(3px); background: #171713; color: var(--mt-gold-light); }
.atelier-maint__remind { display: inline-flex; align-items: center; gap: .8em; padding: .8em 1.4em; border: 1px solid var(--mt-line); border-radius: 999px; background: transparent; color: var(--mt-ink); font-family: "DM Sans", sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .3s ease, border-color .3s ease; }
.atelier-maint__remind i { color: var(--mt-gold-deep); }
.atelier-maint__remind:hover { border-color: var(--mt-gold); }
.atelier-maint__remind[aria-pressed="true"] { border-color: var(--mt-gold); background: rgba(185,154,99,.2); }
.atelier-maint__cta:focus-visible, .atelier-maint__remind:focus-visible, .atelier-maint__pin:focus-visible { outline: 2px solid var(--mt-gold); outline-offset: 4px; }

/* Hexagon */
.atelier-maint__hex { position: relative; width: 100%; max-width: 480px; margin-inline: auto; aspect-ratio: 1.1547 / 1; }
.atelier-maint__hex-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.atelier-maint__hex-lines polygon { fill: none; stroke: rgba(185,154,99,.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.atelier-maint__hex-lines--b { inset: -6%; width: 112%; height: 112%; }
.atelier-maint__hex-lines--c { inset: -12%; width: 124%; height: 124%; opacity: .5; }
.atelier-maint__hex-body { position: absolute; inset: 0; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: linear-gradient(160deg, #2B271D, #14130F); isolation: isolate; overflow: hidden; }
.atelier-maint__hex-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .9s ease, transform 1.8s ease; }
.atelier-maint__hex-body img.is-active { opacity: 1; transform: scale(1); }
.atelier-maint__hex-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 50%, rgba(14,14,11,.8)); pointer-events: none; }
.atelier-maint__hex-cap { position: absolute; z-index: 2; bottom: 12%; inset-inline: 0; width: max-content; max-width: 66%; margin: 0 auto; display: inline-flex; align-items: center; gap: .7em; padding: .65em 1.2em; border: 1px solid rgba(216,196,154,.45); border-radius: 999px; background: rgba(20,19,15,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F0EEE8; font-size: 12.5px; font-weight: 600; text-align: center; }
.atelier-maint__hex-cap i { color: var(--mt-gold-light); font-size: 12px; }

/* Ruler */
.atelier-maint__ruler { --mt-v: 50%; position: relative; margin-inline: 24px; direction: ltr; }
.atelier-maint__pins { position: relative; height: 78px; }
.atelier-maint__pin { position: absolute; bottom: 0; left: var(--p); width: 30px; height: 100%; margin-left: -15px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; }
.atelier-maint__pin span { color: var(--mt-muted); font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 800; transition: color .3s ease; }
.atelier-maint__pin i { width: 13px; height: 13px; flex: 0 0 13px; border: 1.5px solid var(--mt-gold); border-radius: 50%; background: var(--mt-bg); transition: background .3s ease, box-shadow .3s ease; }
.atelier-maint__pin::after { content: ""; flex: 1; width: 1px; background: rgba(185,154,99,.5); }
.atelier-maint__pin.is-passed i { background: var(--mt-gold); }
.atelier-maint__pin.is-active span { color: var(--mt-ink); }
.atelier-maint__pin.is-active i { background: var(--mt-gold); box-shadow: 0 0 0 5px rgba(185,154,99,.25); }
.atelier-maint__bar { position: relative; height: 34px; }
.atelier-maint__baseline { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--mt-line); }
.atelier-maint__ticks { position: absolute; left: 0; right: 0; bottom: 0; border-right: 1px solid var(--mt-tick); pointer-events: none; }
.atelier-maint__ticks--minor { height: 12px; background: repeating-linear-gradient(90deg, var(--mt-tick) 0 1px, transparent 1px calc(100% / 48)); }
.atelier-maint__ticks--major { height: 26px; border-right-color: var(--mt-tick-strong); background: repeating-linear-gradient(90deg, var(--mt-tick-strong) 0 1px, transparent 1px calc(100% / 12)); }
.atelier-maint__fill { position: absolute; left: 0; bottom: 0; width: var(--mt-v); height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--mt-gold-deep), var(--mt-gold-light)); pointer-events: none; }
.atelier-maint__range { position: absolute; z-index: 3; left: -14px; top: 0; width: calc(100% + 28px); height: 34px; margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; }
.atelier-maint__range:active { cursor: grabbing; }
.atelier-maint__range::-webkit-slider-runnable-track { height: 34px; background: transparent; }
.atelier-maint__range::-moz-range-track { height: 34px; background: transparent; }
.atelier-maint__range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 70px; margin-top: -36px; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 13px, var(--mt-gold) 0 8px, rgba(185,154,99,.28) 9px 13px, transparent 14px), linear-gradient(var(--mt-gold), var(--mt-gold)) 50% 22px / 2px calc(100% - 22px) no-repeat; }
.atelier-maint__range::-moz-range-thumb { width: 28px; height: 70px; border: 0; border-radius: 0; background: radial-gradient(circle at 50% 13px, var(--mt-gold) 0 8px, rgba(185,154,99,.28) 9px 13px, transparent 14px), linear-gradient(var(--mt-gold), var(--mt-gold)) 50% 22px / 2px calc(100% - 22px) no-repeat; transform: translateY(-18px); }
.atelier-maint__range:focus-visible { outline: 0; }
.atelier-maint__range:focus-visible::-webkit-slider-thumb { filter: drop-shadow(0 0 6px rgba(185,154,99,.9)); }
.atelier-maint__range:focus-visible::-moz-range-thumb { filter: drop-shadow(0 0 6px rgba(185,154,99,.9)); }
.atelier-maint__scale { position: relative; height: 26px; margin: .7em 0 0; padding: 0; list-style: none; }
.atelier-maint__scale li { position: absolute; top: 0; left: var(--p); transform: translateX(-50%); color: var(--mt-muted); font-size: 12px; font-weight: 600; }
.atelier-maint__hint { display: flex; align-items: center; justify-content: center; gap: .8em; margin: 1.6em 0 0; color: var(--mt-muted); font-size: 13px; text-align: center; }
.atelier-maint__hint i { color: var(--mt-gold-deep); }

@media (max-width: 1024px) {
  .atelier-maint { padding: 5em 2.5em; }
  .atelier-maint__head { margin-bottom: 3.5em; }
  .atelier-maint__stage { grid-template-columns: minmax(0,1fr); gap: 4.2em; margin-bottom: 4em; }
  .atelier-maint__hex { order: -1; max-width: 420px; }
}
@media (max-width: 767px) {
  .atelier-maint { padding: 5em 1.5em; }
  .atelier-maint::after { width: 300px; height: 300px; bottom: -120px; inset-inline-end: -120px; }
  .atelier-maint__head { flex-direction: column; align-items: flex-start; gap: 1.8em; margin-bottom: 3em; }
  .atelier-maint__lead { padding-inline-start: 1.2em; }
  .atelier-maint__stage { gap: 3.6em; margin-bottom: 3.4em; }
  .atelier-maint__hex { max-width: 330px; }
  .atelier-maint__hex-cap { max-width: 72%; bottom: 10%; font-size: 11.5px; padding: .55em 1em; }
  .atelier-maint__ruler { margin-inline: 20px; }
  .atelier-maint__pins { height: 70px; }
  .atelier-maint__scale li:nth-child(even) { display: none; }
  .atelier-maint__actions { gap: 1.2em 1.6em; }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-maint *, .atelier-maint *::before, .atelier-maint *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | SERVICE HISTORY & RECORDS
========================================================= */
.atelier-history { --hs-gold: #B99A63; --hs-gold-light: #D8C49A; --hs-gold-deep: #947545; --hs-bg: #E8E1D2; --hs-ink: #25251F; --hs-muted: #6F6D64; --hs-line: rgba(39,39,33,.16); --hs-soft: rgba(255,255,255,.4); position: relative; isolation: isolate; padding: 6em 5em; background: var(--hs-bg); color: var(--hs-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-history * { box-sizing: border-box; }
.atelier-history::before { content: ""; position: absolute; z-index: -1; top: 18%; inset-inline-start: -240px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.2), transparent 68%); pointer-events: none; }
.atelier-history::after { content: ""; position: absolute; z-index: -1; bottom: -220px; inset-inline-end: -200px; width: 540px; height: 540px; border: 1px solid rgba(185,154,99,.26); border-radius: 50%; pointer-events: none; }
.atelier-history__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

.atelier-history__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 4.5em; }
.atelier-history__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--hs-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-history__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--hs-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }
.atelier-history__title { margin: 1em 0 0; color: var(--hs-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-history__title span { color: var(--hs-gold); font-weight: 400; }
.atelier-history__lead { max-width: 400px; margin: 0; padding-inline-start: 1.6em; border-inline-start: 1px solid var(--hs-gold); color: var(--hs-muted); font-size: 14px; line-height: 1.85; }

.atelier-history__body { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 5.5em; align-items: start; }

/* Passport */
.atelier-history__passport { position: sticky; top: 120px; display: flex; flex-direction: column; align-items: center; gap: 2em; }
.atelier-history__garage { display: flex; flex-wrap: wrap; justify-content: center; gap: .9em 1em; }
.atelier-history__car { display: inline-flex; align-items: center; gap: .9em; padding-block: .35em; padding-inline: .35em 1.3em; border: 1px solid var(--hs-line); border-radius: 999px; background: transparent; color: var(--hs-muted); font-family: "DM Sans", sans-serif; text-align: start; cursor: pointer; transition: border-color .3s ease, background .3s ease, color .3s ease; }
.atelier-history__car img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; }
.atelier-history__car b { display: block; color: var(--hs-ink); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.atelier-history__car small { font-size: 11.5px; }
.atelier-history__car:hover { border-color: var(--hs-gold); }
.atelier-history__car[aria-checked="true"] { border-color: var(--hs-gold); background: rgba(185,154,99,.16); }
.atelier-history__car:focus-visible, .atelier-history__row-btn:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: 4px; }

.atelier-history__shield { position: relative; width: 100%; max-width: 340px; aspect-ratio: .88 / 1; direction: ltr; }
.atelier-history__shield-body { position: absolute; inset: 0; clip-path: url(#atelierShieldClip); background: linear-gradient(160deg, #2B271D, #14130F); isolation: isolate; overflow: hidden; }
.atelier-history__shield-body img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity .9s ease, transform 1.8s ease; }
.atelier-history__shield-body img.is-active { opacity: 1; transform: scale(1); }
.atelier-history__shield-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 48%, rgba(14,14,11,.82)); pointer-events: none; }
.atelier-history__badge { position: absolute; z-index: 2; bottom: 17%; inset-inline: 0; width: max-content; max-width: 76%; margin: 0 auto; display: inline-flex; align-items: center; gap: .7em; padding: .6em 1.2em; border: 1px solid rgba(216,196,154,.45); border-radius: 999px; background: rgba(20,19,15,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F0EEE8; font-size: 12.5px; font-weight: 600; text-align: center; }
.atelier-history__badge i { color: var(--hs-gold-light); font-size: 12px; }
.atelier-history__shield-line { position: absolute; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.atelier-history__shield-line path { fill: none; stroke: var(--hs-gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.atelier-history__shield-line--outer { inset: -4% -4% -3% -4%; width: 108%; height: 107%; }
.atelier-history__shield-line--outer path { stroke: rgba(185,154,99,.5); stroke-dasharray: 2 7; }
.atelier-history__summary { max-width: 34ch; margin: 0; color: var(--hs-ink); font-family: "Manrope", sans-serif; font-size: 1.1rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.55; text-align: center; }
.atelier-history__summary b { color: var(--hs-gold-deep); font-weight: 800; }
.atelier-history__links { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.4em 2em; }
.atelier-history__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.8); border-radius: 999px; color: var(--hs-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-history__cta i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hs-gold); color: #171713; font-size: 15px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-history__cta:hover { background: var(--hs-gold); color: #171713; }
.atelier-history__cta:hover i { transform: translateY(3px); background: #171713; color: var(--hs-gold-light); }
.atelier-history__text-link { display: inline-flex; align-items: center; gap: .9em; color: var(--hs-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; }
.atelier-history__text-link i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--hs-gold); border-radius: 50%; color: var(--hs-gold-deep); font-size: 12px; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-history__text-link:hover i { transform: translateY(-3px); background: var(--hs-gold); color: #171713; }
.atelier-history__cta:focus-visible, .atelier-history__text-link:focus-visible, .atelier-history__doc:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: 4px; }

/* Ledger */
.atelier-history__ledger { position: relative; min-width: 0; }
.atelier-history__count { margin: 0 0 1em; color: var(--hs-muted); font-size: 13.5px; font-weight: 600; }
.atelier-history__count b { color: var(--hs-ink); font-family: "Manrope", sans-serif; font-size: 1.1rem; }
.atelier-history__list { margin: 0; padding: 0; list-style: none; }
.atelier-history__year { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 0 2em; margin-bottom: 1.2em; }
.atelier-history__year-head { display: flex; flex-direction: column; align-items: center; gap: .9em; padding-top: .6em; }
.atelier-history__year-num { color: var(--hs-gold-deep); font-family: "Manrope", sans-serif; font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 300; letter-spacing: -.03em; line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); }
.atelier-history__year-line { flex: 1; width: 1px; min-height: 40px; background: linear-gradient(var(--hs-gold), transparent); }
.atelier-history__year-count { color: var(--hs-muted); font-size: 11.5px; font-weight: 700; text-align: center; }
.atelier-history__rows { margin: 0; padding: 0; list-style: none; }
.atelier-history__row { border-bottom: 1px solid var(--hs-line); }
.atelier-history__row:first-child { border-top: 1px solid var(--hs-line); }
.atelier-history__row-btn { width: 100%; display: grid; grid-template-columns: 70px minmax(0,1fr) auto 40px; align-items: center; gap: 1.4em; padding: 1.35em 0; border: 0; background: transparent; color: inherit; font-family: inherit; text-align: start; cursor: pointer; }
.atelier-history__date b { display: block; font-family: "Manrope", sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.atelier-history__date small { display: block; margin-top: .35em; color: var(--hs-muted); font-size: 12px; font-weight: 600; }
.atelier-history__what strong { display: block; font-family: "Manrope", sans-serif; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; transition: color .3s ease; }
.atelier-history__what em { display: block; margin-top: .3em; color: var(--hs-muted); font-size: 13px; font-style: normal; }
.atelier-history__tag { padding: .4em 1em; border: 1px solid var(--hs-line); border-radius: 999px; color: var(--hs-gold-deep); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.atelier-history__plus { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--hs-gold); border-radius: 50%; color: var(--hs-gold-deep); font-size: 12px; transition: background .3s ease, color .3s ease; }
.atelier-history__plus i { transition: transform .3s ease; }
.atelier-history__row-btn:hover .atelier-history__what strong { color: var(--hs-gold-deep); }
.atelier-history__row-btn:hover .atelier-history__plus, .atelier-history__row-btn[aria-expanded="true"] .atelier-history__plus { background: var(--hs-gold); color: #171713; }
.atelier-history__row-btn[aria-expanded="true"] .atelier-history__plus i { transform: rotate(45deg); }
.atelier-history__detail { overflow: hidden; }
.atelier-history__detail[hidden] { display: none; }
.atelier-history__detail-in { padding: .2em 0 1.9em; padding-inline-start: calc(70px + 1.4em); display: flex; flex-direction: column; gap: 1.6em; }
.atelier-history__facts { display: flex; flex-wrap: wrap; gap: 1.2em 2.6em; margin: 0; padding: 0; }
.atelier-history__facts dt { margin-bottom: .3em; color: var(--hs-muted); font-size: 12px; font-weight: 600; }
.atelier-history__facts dd { margin: 0; font-family: "Manrope", sans-serif; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.atelier-history__proof { display: flex; gap: 1.6em; }
.atelier-history__proof figure { margin: 0; text-align: center; }
.atelier-history__proof img { width: 68px; height: 68px; display: block; margin: 0 auto .5em; border: 2px solid var(--hs-bg); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--hs-gold); filter: saturate(.3) brightness(.8) contrast(.9); }
.atelier-history__proof .is-after img { filter: none; }
.atelier-history__proof figcaption { color: var(--hs-muted); font-size: 11.5px; font-weight: 700; }
.atelier-history__docs { display: flex; flex-wrap: wrap; gap: .8em; }
.atelier-history__doc { display: inline-flex; align-items: center; gap: .7em; padding: .65em 1.2em; border: 1px solid var(--hs-line); border-radius: 999px; color: var(--hs-ink); font-size: 12.5px; font-weight: 700; transition: border-color .3s ease, background .3s ease; }
.atelier-history__doc i { color: var(--hs-gold-deep); }
.atelier-history__doc:hover { border-color: var(--hs-gold); background: rgba(185,154,99,.16); }

.atelier-history__peek { position: absolute; z-index: 6; left: 0; top: 0; width: 190px; height: 190px; border: 2px solid var(--hs-gold-light); border-radius: 50%; overflow: hidden; background: #14130F; box-shadow: 0 30px 60px -20px rgba(25,24,18,.6); opacity: 0; visibility: hidden; pointer-events: none; }
.atelier-history__peek img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .atelier-history__peek { display: none; } }

@media (max-width: 1024px) {
  .atelier-history { padding: 5em 2.5em; }
  .atelier-history__head { margin-bottom: 3.5em; }
  .atelier-history__body { grid-template-columns: minmax(0,1fr); gap: 4.5em; }
  .atelier-history__passport { position: static; }
  .atelier-history__shield { max-width: 300px; }
}
@media (max-width: 767px) {
  .atelier-history { padding: 5em 1.5em; }
  .atelier-history::after { width: 300px; height: 300px; bottom: -120px; inset-inline-end: -120px; }
  .atelier-history__head { flex-direction: column; align-items: flex-start; gap: 1.8em; margin-bottom: 3em; }
  .atelier-history__lead { padding-inline-start: 1.2em; }
  .atelier-history__body { gap: 4em; }
  .atelier-history__shield { max-width: 260px; }
  .atelier-history__year { grid-template-columns: minmax(0,1fr); }
  .atelier-history__year-head { flex-direction: row; align-items: baseline; gap: 1em; padding: 0 0 .6em; }
  .atelier-history__year-num { writing-mode: horizontal-tb; transform: none; font-size: 2.2rem; }
  .atelier-history__year-line { flex: 1; width: auto; height: 1px; min-height: 0; background: linear-gradient(90deg, var(--hs-gold), transparent); }
  .atelier-history__row-btn { grid-template-columns: 56px minmax(0,1fr) 36px; gap: 1em; padding: 1.1em 0; }
  .atelier-history__tag { display: none; }
  .atelier-history__plus { width: 34px; height: 34px; }
  .atelier-history__detail-in { padding-inline-start: 0; }
  .atelier-history__peek { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-history *, .atelier-history *::before, .atelier-history *::after { transition: none !important; animation: none !important; }
}
/* ============================================================
   AUTOMOTIVE ATELIER | ABOUT PAGE
   Typography matched to index.html (Manrope headings, DM Sans body)
   Side padding: 5em desktop · 2.5em ≤1024px · 1.5em ≤767px
   Top/bottom:   6em desktop · 5.5em tablet · 5em mobile
============================================================ */
.ab-page { --ab-px: 5em; --ab-py: 6em; font-size: 16px; font-family: var(--auto-font-body); color: var(--auto-ink); background: var(--auto-paper); overflow-x: clip; }
.ab-page *, .ab-page *::before, .ab-page *::after { box-sizing: border-box; }
.ab-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-page ul, .ab-page ol { margin: 0; padding: 0; list-style: none; }
.ab-page h1, .ab-page h2, .ab-page h3, .ab-page h4, .ab-page p { margin: 0; }
.ab-sec { position: relative; padding: var(--ab-py) var(--ab-px); }
.ab-inner { position: relative; max-width: 1440px; margin-inline: auto; }

/* ---------- SHARED TYPOGRAPHY (exact index.html values) ---------- */
/* Eyebrow = .atelier-transform__eyebrow */
.ab-kicker { display: inline-flex; align-items: center; gap: .8em; color: var(--auto-ink); font-family: var(--auto-font-body); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.ab-kicker i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--auto-primary); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }

/* Section H2 = .atelier-transform__title */
.ab-h2 { margin: 1em 0 0; color: var(--auto-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.4vw, 3.2rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.ab-h2 em { color: var(--auto-primary); font-style: normal; font-weight: 400; }

/* Body copy = index head-side paragraph */
.ab-lead { max-width: 58ch; color: var(--auto-muted); font-size: 14px; line-height: 1.8; }

.ab-btn { display: inline-flex; align-items: center; gap: 1.1em; min-height: 52px; padding: 0 1.8em; border-radius: 999px; background: var(--auto-primary); color: #171713; font-family: var(--auto-font-heading); font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: background var(--auto-transition), color var(--auto-transition), gap var(--auto-transition), box-shadow var(--auto-transition); }
.ab-btn:hover { background: var(--auto-ink); color: var(--auto-paper); gap: 1.6em; box-shadow: 0 14px 30px rgba(32,33,31,.18); }
.ab-btn i, .ab-link i { font-style: normal; }
.ab-link { display: inline-flex; align-items: center; gap: .8em; padding-bottom: 4px; border-bottom: 1px solid var(--auto-primary); font-size: 14px; font-weight: 700; transition: color var(--auto-transition), gap var(--auto-transition); }
.ab-link:hover { color: var(--auto-primary-deep); gap: 1.2em; }
.ab-line { display: block; padding-bottom: .12em; margin-bottom: -.12em; overflow: hidden; }
.ab-line > span { display: block; }

/* ---------- 1. HERO ---------- */
.ab-hero { overflow: hidden; }
.ab-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.ab-hero__glow { position: absolute; width: 60vw; height: 60vw; max-width: 820px; max-height: 820px; inset-inline-end: -12%; top: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.22), transparent 65%); }
.ab-hero__word { position: absolute; inset-inline: 0; bottom: -.14em; text-align: center; font-family: var(--auto-font-heading); font-weight: 800; font-size: clamp(110px, 21vw, 330px); line-height: 1; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 1px rgba(185,154,99,.28); white-space: nowrap; user-select: none; }
.ab-hero__inner { display: flex; align-items: center; gap: clamp(32px, 5vw, 90px); }
.ab-hero__copy { flex: 1 1 52%; min-width: 0; }
.ab-crumbs { display: inline-flex; align-items: center; gap: .8em; margin-bottom: 1.8em; color: var(--auto-muted); font-size: 13px; }
.ab-crumbs a:hover { color: var(--auto-primary-deep); }
.ab-crumbs i { width: 5px; height: 5px; border-radius: 50%; background: var(--auto-primary); }
.ab-crumbs span { color: var(--auto-ink); font-weight: 600; }
/* Hero H1 = .atelier-reel__title */
.ab-hero__title { margin: 1em 0 0; color: var(--auto-ink); font-family: "Manrope", sans-serif; font-size: clamp(2.5rem, 5vw, 5.6rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.3; }
.ab-hero__title em { color: var(--auto-primary); font-style: normal; font-weight: 600; }
.ab-hero__text { max-width: 500px; margin: 1.7em 0 0; color: var(--auto-muted); font-size: 15.5px; line-height: 1.85; }
.ab-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6em 2.2em; margin-top: 2.2em; }
.ab-hero__facts { display: flex; flex-wrap: wrap; gap: 1.4em 0; margin-top: 3.4em; }
.ab-hero__facts li { position: relative; display: flex; flex-direction: column; gap: .3em; padding-inline: 2em; }
.ab-hero__facts li:first-child { padding-inline-start: 0; }
.ab-hero__facts li + li::before { content: ""; position: absolute; inset-inline-start: 0; top: 10%; bottom: 10%; width: 1px; background: var(--auto-line); }
.ab-hero__facts b { font-family: "Manrope", sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.ab-hero__facts span { color: var(--auto-muted); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }

.ab-hero__visual { position: relative; flex: 0 0 min(42%, 560px); aspect-ratio: .84; }
.ab-arch { position: absolute; inset-block: 0; inset-inline-end: 0; width: 80%; border-radius: 999px 999px 28px 28px; overflow: hidden; box-shadow: 0 40px 80px rgba(20,20,18,.22); }
.ab-arch__ring { position: absolute; inset-block: -16px 16px; inset-inline-end: -16px; width: 80%; border: 1px solid rgba(185,154,99,.6); border-radius: 999px 999px 28px 28px; }
.ab-orb { position: absolute; inset-inline-start: 0; bottom: 7%; width: 40%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 9px solid var(--auto-paper); box-shadow: 0 24px 50px rgba(20,20,18,.25); }
.ab-seal { position: absolute; top: 5%; inset-inline-start: 4%; width: 124px; height: 124px; display: grid; place-items: center; border-radius: 50%; background: var(--auto-primary); color: #171713; }
.ab-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: abSpin 22s linear infinite; }
.ab-seal text { font-family: var(--auto-font-heading); font-size: 8.6px; font-weight: 800; fill: currentColor; letter-spacing: 1px; }
.ab-seal circle { fill: currentColor; }
@keyframes abSpin { to { transform: rotate(360deg); } }

/* ---------- 2. STORY & PHILOSOPHY ---------- */
.ab-story { background: var(--auto-surface); }
.ab-story__row { display: flex; align-items: center; gap: clamp(40px, 6vw, 110px); }
.ab-story__media { position: relative; flex: 0 0 44%; aspect-ratio: 1 / 1.14; }
.ab-pill { position: absolute; overflow: hidden; border-radius: 999px; }
.ab-pill--tall { top: 0; inset-inline-start: 0; width: 64%; height: 88%; box-shadow: 0 34px 70px rgba(20,20,18,.2); }
.ab-pill--wide { bottom: 0; inset-inline-end: 0; width: 50%; height: 60%; border: 10px solid var(--auto-surface); box-shadow: 0 24px 54px rgba(20,20,18,.22); }
.ab-badge { position: absolute; bottom: 9%; inset-inline-start: 5%; width: 128px; height: 128px; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--auto-primary); color: #171713; box-shadow: 0 16px 36px rgba(185,154,99,.35); }
.ab-badge b { font-family: "Manrope", sans-serif; font-size: 38px; font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.ab-badge span { font-size: 11px; font-weight: 700; letter-spacing: .06em; line-height: 1.3; text-transform: uppercase; }
.ab-story__copy { flex: 1; min-width: 0; }
.ab-story__copy .ab-lead { margin-top: 1.3em; }
.ab-quote { max-width: 34em; margin: 2em 0 2em; padding-inline-start: 1.5em; border-inline-start: 2px solid var(--auto-primary); font-family: "Manrope", sans-serif; font-size: clamp(18px, 1.7vw, 23px); font-weight: 500; letter-spacing: -.025em; line-height: 1.5; }
.ab-path { position: relative; display: flex; margin-top: 3em; }
.ab-path::before { content: ""; position: absolute; top: 5px; inset-inline: 0; height: 1px; background: var(--auto-line); }
.ab-path::after { content: ""; position: absolute; top: 5px; inset-inline-start: 0; height: 1px; width: var(--ab-path, 0%); background: var(--auto-primary); }
.ab-path li { position: relative; flex: 1; padding-top: 1.6em; }
.ab-path i { position: absolute; top: 0; inset-inline-start: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--auto-primary); box-shadow: 0 0 0 5px rgba(185,154,99,.2); }
.ab-path b { display: block; font-family: "Manrope", sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -.025em; }
.ab-path span { display: block; margin-top: .2em; color: var(--auto-muted); font-size: 13px; }

.ab-phil { margin-top: calc(var(--ab-py) * .9); }
.ab-phil__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 3em; }
.ab-phil__head .ab-lead { max-width: 40ch; }
.ab-tenet { position: relative; display: flex; align-items: baseline; gap: 2.4em; padding: 2em 0; border-top: 1px solid var(--auto-line); transition: padding var(--auto-transition); }
.ab-tenet:last-child { border-bottom: 1px solid var(--auto-line); }
.ab-tenet__no { flex: 0 0 auto; min-width: 2.4em; font-family: "Manrope", sans-serif; font-size: clamp(34px, 4vw, 56px); font-weight: 500; letter-spacing: -.045em; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--auto-primary); transition: color var(--auto-transition); }
/* Sub-title = .atelier-correction__step-title */
.ab-tenet h4 { flex: 0 0 34%; font-family: "Manrope", sans-serif; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; }
.ab-tenet p { flex: 1; color: var(--auto-muted); font-size: 14px; line-height: 1.8; }
.ab-tenet__line { position: absolute; top: -1px; inset-inline-start: 0; width: 100%; height: 1px; background: var(--auto-primary); transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
html[dir="rtl"] .ab-tenet__line { transform-origin: right; }
.ab-tenet:hover .ab-tenet__line, .ab-tenet.is-drawn .ab-tenet__line { transform: scaleX(1); }
.ab-tenet:hover .ab-tenet__no { color: var(--auto-primary); }
.ab-tenet:hover { padding-inline-start: 1em; }

/* ---------- MARQUEE ---------- */
.ab-marquee { overflow: hidden; direction: ltr; padding: 1.4em 0; background: var(--auto-dark); border-block: 1px solid rgba(216,196,154,.2); }
.ab-marquee__track { display: flex; align-items: center; width: max-content; gap: 1.4em; padding-inline-end: 1.4em; will-change: transform; }
.ab-marquee__track span { font-family: "Manrope", sans-serif; font-size: clamp(34px, 5vw, 70px); font-weight: 500; letter-spacing: -.045em; color: transparent; -webkit-text-stroke: 1px rgba(216,196,154,.7); white-space: nowrap; }
.ab-marquee__track i { font-style: normal; color: var(--auto-primary); font-size: clamp(20px, 2.4vw, 32px); }

/* ---------- 3. EXPERTISE ---------- */
.ab-exp__head { max-width: 760px; margin-bottom: 4em; }
.ab-exp__body { display: flex; align-items: flex-start; gap: clamp(40px, 6vw, 110px); }
.ab-exp__stage { position: sticky; top: 120px; flex: 0 0 min(44%, 560px); aspect-ratio: 1; color: var(--auto-primary); }
.ab-exp__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: abSpin 60s linear infinite; }
.ab-exp__disc { position: absolute; inset: 8%; border-radius: 50%; overflow: hidden; background: var(--auto-dark); box-shadow: 0 34px 70px rgba(20,20,18,.25); }
.ab-exp__disc img { position: absolute; inset: 0; opacity: 0; transform: scale(1.1); }
.ab-exp__disc img.is-active { opacity: 1; transform: scale(1); }
.ab-exp__count { position: absolute; bottom: 1%; inset-inline-end: 2%; display: inline-flex; align-items: center; gap: .7em; padding: .7em 1.2em; border-radius: 999px; background: var(--auto-paper); color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 13px; font-weight: 700; box-shadow: 0 10px 26px rgba(20,20,18,.14); }
.ab-exp__count b { color: var(--auto-primary-deep); font-size: 18px; }
.ab-exp__count i { width: 22px; height: 1px; background: var(--auto-primary); }
.ab-exp__list { flex: 1; min-width: 0; }
.ab-exp__item { border-bottom: 1px solid var(--auto-line); }
.ab-exp__item:first-child { border-top: 1px solid var(--auto-line); }
.ab-exp__btn { width: 100%; display: flex; align-items: center; gap: 1.6em; padding: 1.7em 0; border: 0; background: none; color: var(--auto-ink); text-align: start; cursor: pointer; }
.ab-exp__no { color: var(--auto-muted); font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .08em; transition: color var(--auto-transition); }
.ab-exp__name { flex: 1; font-family: "Manrope", sans-serif; font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.2; transition: color var(--auto-transition); }
.ab-exp__btn i { color: var(--auto-primary); font-size: 20px; font-style: normal; transition: transform var(--auto-transition); }
.ab-exp__item:hover .ab-exp__name, .ab-exp__item.is-active .ab-exp__name, .ab-exp__item.is-active .ab-exp__no { color: var(--auto-primary); }
.ab-exp__item.is-active .ab-exp__btn i { transform: rotate(90deg); }
.ab-exp__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.ab-exp__panel > div { overflow: hidden; padding-inline-start: 3.2em; }
.ab-exp__item.is-active .ab-exp__panel { grid-template-rows: 1fr; }
.ab-exp__panel p { max-width: 52ch; color: var(--auto-muted); font-size: 14px; line-height: 1.8; }
.ab-exp__panel small { display: block; margin: 1em 0 1.9em; color: var(--auto-primary-deep); font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1.9; text-transform: uppercase; }

/* ---------- OPTIONAL: BEFORE & AFTER ---------- */
.ab-ba { background: var(--auto-surface); }
.ab-ba__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; margin-bottom: 3em; }
.ab-ba__head .ab-lead { margin-top: 1.2em; }
.ab-ba__tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .7em; }
.ab-ba__tabs button { display: inline-flex; align-items: center; gap: .7em; min-height: 44px; padding: 0 1.3em; border: 1px solid rgba(185,154,99,.5); border-radius: 999px; background: transparent; color: var(--auto-ink); font-family: var(--auto-font-heading); font-size: 13px; font-weight: 700; cursor: pointer; transition: background var(--auto-transition), color var(--auto-transition), border-color var(--auto-transition); }
.ab-ba__tabs button b { color: var(--auto-primary-deep); font-size: 11px; letter-spacing: .08em; }
.ab-ba__tabs button:hover { border-color: var(--auto-primary); }
.ab-ba__tabs button.is-active { background: var(--auto-primary); border-color: var(--auto-primary); color: #171713; }
.ab-ba__tabs button.is-active b { color: #171713; }

.ab-ba__frame { --ba-pos: 50%; position: relative; direction: ltr; width: 100%; aspect-ratio: 16 / 8; border-radius: 220px 30px 220px 30px; overflow: hidden; background: var(--auto-dark); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; box-shadow: 0 44px 90px rgba(20,20,18,.28); }
.ab-ba__img { position: absolute; inset: 0; pointer-events: none; }
.ab-ba__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }
.ab-ba__label { position: absolute; top: 2.2em; padding: .65em 1.3em; border-radius: 999px; background: rgba(20,20,18,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.ab-ba__label--b { left: 14%; }
.ab-ba__label--a { right: 14%; background: rgba(185,154,99,.9); color: #171713; }
.ab-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--ba-pos); width: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; transform: translateX(-50%); cursor: ew-resize; }
.ab-ba__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: linear-gradient(to bottom, transparent, #fff 12%, #fff 88%, transparent); box-shadow: 0 0 14px rgba(0,0,0,.35); }
.ab-ba__knob { position: relative; width: 62px; height: 62px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 50%; background: var(--auto-primary); color: #171713; box-shadow: 0 0 0 8px rgba(255,255,255,.28), 0 14px 34px rgba(0,0,0,.4); transition: transform var(--auto-transition); }
.ab-ba__knob i { font-size: 22px; font-style: normal; font-weight: 800; line-height: 1; }
.ab-ba__frame.is-drag .ab-ba__knob, .ab-ba__handle:hover .ab-ba__knob { transform: scale(1.1); }
.ab-ba__handle:focus-visible { outline: none; }
.ab-ba__handle:focus-visible .ab-ba__knob { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--auto-primary); }

.ab-ba__meta { display: flex; align-items: center; justify-content: space-between; gap: 2.4em; margin-top: 2.6em; padding-top: 2.2em; border-top: 1px solid var(--auto-line); }
.ab-ba__info { flex: 1.3; min-width: 0; }
.ab-ba__service { color: var(--auto-primary-deep); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
/* = .atelier-transform__caption-title */
.ab-ba__info h3 { margin-top: .4em; font-family: "Manrope", sans-serif; font-size: clamp(1.7rem, 2.6vw, 2.5rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.ab-ba__info p { max-width: 46ch; margin-top: .6em; color: var(--auto-muted); font-size: 14px; line-height: 1.8; }
.ab-ba__stats { display: flex; }
.ab-ba__stats li { position: relative; padding-inline: 1.8em; }
.ab-ba__stats li + li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8%; bottom: 8%; width: 1px; background: var(--auto-line); }
.ab-ba__stats span { display: block; color: var(--auto-muted); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.ab-ba__stats b { display: block; margin-top: .35em; font-family: "Manrope", sans-serif; font-size: 17px; font-weight: 500; letter-spacing: -.025em; white-space: nowrap; }

/* ---------- TABLET ≤1024px ---------- */
@media (max-width: 1024px) {
  .ab-page { --ab-px: 2.5em; --ab-py: 5.5em; }
  .ab-hero__title { font-size: clamp(2.4rem, 7vw, 4.4rem); }
  .ab-hero__inner, .ab-story__row, .ab-exp__body { flex-direction: column; align-items: stretch; }
  .ab-hero__visual { flex-basis: auto; width: min(100%, 500px); margin-inline: auto; }
  .ab-story__media { flex-basis: auto; width: min(100%, 520px); margin-inline: auto; }
  .ab-phil__head, .ab-ba__head { flex-direction: column; align-items: flex-start; gap: 1.6em; }
  .ab-ba__tabs { justify-content: flex-start; }
  .ab-tenet { flex-wrap: wrap; gap: 1em 1.6em; }
  .ab-tenet h4 { flex: 1 1 calc(100% - 6em); }
  .ab-tenet p { flex: 1 1 100%; padding-inline-start: 4.4em; }
  .ab-exp__stage { position: relative; top: 0; flex-basis: auto; width: min(100%, 460px); margin-inline: auto; }
  .ab-ba__frame { aspect-ratio: 16 / 10; border-radius: 140px 26px 140px 26px; }
  .ab-ba__meta { flex-wrap: wrap; }
  .ab-ba__info { flex: 1 1 100%; }
}

/* ---------- MOBILE ≤767px ---------- */
@media (max-width: 767px) {
  .ab-page { --ab-px: 1.5em; --ab-py: 5em; }
  .ab-hero__title { font-size: clamp(2.2rem, 10.4vw, 3rem); }
  .ab-hero__text { margin: 1.5em 0 0; font-size: 15px; }
  .ab-h2 { font-size: clamp(1.8rem, 6.5vw, 2.3rem); line-height: 1.2; }
  .ab-tenet h4, .ab-exp__name { font-size: 1.45rem; }
  .ab-ba__info h3 { font-size: 1.6rem; }
  .ab-hero__facts li { padding-inline: 1.1em; }
  .ab-hero__facts span { font-size: 10.5px; }
  .ab-hero__actions { gap: 1.2em 1.8em; }
  .ab-btn { min-height: 48px; padding: 0 1.4em; }
  .ab-seal { width: 92px; height: 92px; }
  .ab-seal text { font-size: 8.8px; }
  .ab-orb { border-width: 6px; }
  .ab-badge { width: 96px; height: 96px; }
  .ab-badge b { font-size: 28px; }
  .ab-badge span { font-size: 9px; }
  .ab-pill--wide { border-width: 6px; }
  .ab-path { flex-direction: column; gap: 1.4em; padding-inline-start: 1.8em; }
  .ab-path::before { top: 5px; bottom: 5px; inset-inline: auto; inset-inline-start: 5px; width: 1px; height: auto; }
  .ab-path::after { display: none; }
  .ab-path li { display: flex; align-items: baseline; gap: 1em; padding-top: 0; }
  .ab-path i { top: 5px; inset-inline-start: -1.8em; }
  .ab-tenet { padding: 1.6em 0; }
  .ab-tenet p { padding-inline-start: 0; }
  .ab-exp__btn { gap: 1em; padding: 1.4em 0; }
  .ab-exp__panel > div { padding-inline-start: 0; }
  .ab-ba__tabs { flex-wrap: nowrap; width: 100%; padding-bottom: .4em; overflow-x: auto; scrollbar-width: none; }
  .ab-ba__tabs::-webkit-scrollbar { display: none; }
  .ab-ba__tabs button { flex: 0 0 auto; }
  .ab-ba__frame { aspect-ratio: 4 / 4.6; border-radius: 90px 20px 90px 20px; }
  .ab-ba__label { top: 1.6em; padding: .55em 1em; font-size: 10px; }
  .ab-ba__label--b { left: 12%; }
  .ab-ba__label--a { right: 12%; }
  .ab-ba__knob { width: 52px; height: 52px; box-shadow: 0 0 0 6px rgba(255,255,255,.28), 0 12px 28px rgba(0,0,0,.4); }
  .ab-ba__meta { flex-direction: column; align-items: flex-start; gap: 1.6em; }
  .ab-ba__stats { width: 100%; justify-content: space-between; }
  .ab-ba__stats li { padding-inline: 0 .8em; }
  .ab-ba__stats li + li { padding-inline-start: .9em; }
  .ab-ba__stats b { font-size: 14px; white-space: normal; }
  .ab-ba__meta .ab-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { .ab-seal svg, .ab-exp__ring { animation: none; } }

/* =========================================================
   AUTOMOTIVE ATELIER | OUR STORY & BRAND PHILOSOPHY
========================================================= */
.atelier-origin { --or-gold: #B99A63; --or-gold-light: #D8C49A; --or-gold-deep: #947545; --or-bg: #F5F3EF; --or-ink: #25251F; --or-muted: #77766F; --or-line: rgba(39,39,33,.15); position: relative; isolation: isolate; padding: 6em 5em; background: var(--or-bg); color: var(--or-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-origin * { box-sizing: border-box; }
.atelier-origin::before { content: ""; position: absolute; z-index: -1; top: -220px; inset-inline-end: -220px; width: 580px; height: 580px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-origin::after { content: ""; position: absolute; z-index: -1; bottom: -260px; inset-inline-start: -220px; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.12), transparent 68%); pointer-events: none; }
.atelier-origin__inner { width: 100%; max-width: 1440px; margin: 0 auto; }
.atelier-origin__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--or-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-origin__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--or-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }

/* Manifesto */
.atelier-origin__intro { max-width: 1180px; margin-bottom: 7em; }
.atelier-origin__manifesto { margin: 1.4em 0 0; color: var(--or-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 3.2vw, 4rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.5; }
.atelier-origin__manifesto em { color: var(--or-gold); font-style: normal; font-weight: 400; }
.atelier-origin__w { display: inline-block; }

/* Story */
.atelier-origin__story { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: 6em; }
.atelier-origin__collage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1.08; margin-inline: auto; direction: ltr; }
.atelier-origin__ring { position: absolute; z-index: 0; top: 5%; left: -4%; width: 76%; aspect-ratio: 1; border: 1px solid rgba(185,154,99,.55); border-radius: 50%; pointer-events: none; }
.atelier-origin__arc { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; color: var(--or-gold); overflow: visible; pointer-events: none; }
.atelier-origin__disc { position: absolute; z-index: 1; margin: 0; border: 7px solid var(--or-bg); border-radius: 50%; overflow: hidden; background: #1C1D1A; box-shadow: 0 40px 80px -30px rgba(25,26,24,.5); will-change: transform; }
.atelier-origin__disc img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.atelier-origin__disc--lg { left: 0; top: 8%; width: 70%; aspect-ratio: 1; }
.atelier-origin__disc--md { right: 2%; top: 0; width: 46%; aspect-ratio: 1; z-index: 2; }
.atelier-origin__disc--sm { right: 14%; bottom: 0; width: 33%; aspect-ratio: 1; z-index: 3; }
.atelier-origin__tag { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: .8em; color: var(--or-ink); font-size: 11px; font-weight: 700; letter-spacing: 2px; white-space: nowrap; }
.atelier-origin__tag::before { content: ""; width: 28px; height: 1px; background: var(--or-gold); }
.atelier-origin__tag--a { left: 3%; bottom: 7%; }
.atelier-origin__tag--b { right: 0; top: 47%; }

.atelier-origin__title { margin: 0 0 1em; color: var(--or-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-origin__title span, .atelier-origin__philo-title span { color: var(--or-gold); font-weight: 400; }
.atelier-origin__text p { max-width: 540px; margin: 0 0 1.4em; color: var(--or-muted); font-size: 15px; line-height: 1.9; }
.atelier-origin__figs { display: flex; margin: 2.6em 0; padding: 1.8em 0; border-block: 1px solid var(--or-line); }
.atelier-origin__fig { flex: 1; display: flex; flex-direction: column; gap: .5em; padding-inline: 1.6em; border-inline-start: 1px solid var(--or-line); }
.atelier-origin__fig:first-child { padding-inline-start: 0; border-inline-start: 0; }
.atelier-origin__fig strong { color: var(--or-gold); font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 2.8vw, 2.5rem); font-weight: 400; letter-spacing: -.05em; line-height: 1; }
.atelier-origin__fig strong em { margin-inline-start: .06em; font-size: .6em; font-style: normal; letter-spacing: 0; }
.atelier-origin__fig > span { color: var(--or-muted); font-size: 12px; font-weight: 700; letter-spacing: .6px; line-height: 1.5; }
.atelier-origin__sign { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4em 2.2em; }
.atelier-origin__signature { width: 150px; height: auto; color: var(--or-ink); direction: ltr; }
.atelier-origin__sign-name { display: flex; flex-direction: column; gap: .2em; }
.atelier-origin__sign-name b { color: var(--or-ink); font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; }
.atelier-origin__sign-name span { color: var(--or-muted); font-size: 12.5px; }
.atelier-origin__link { display: inline-flex; align-items: center; gap: .9em; margin-inline-start: auto; color: var(--or-ink); font-size: 13px; font-weight: 700; letter-spacing: .7px; }
.atelier-origin__link i { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--or-gold); border-radius: 50%; color: var(--or-gold); font-size: 17px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-origin__link:hover i { transform: rotate(45deg); background: var(--or-gold); color: #fff; }

/* Philosophy */
.atelier-origin__philo { margin-top: 8em; }
.atelier-origin__philo-title { margin: 1em 0 0; color: var(--or-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-origin__wrap { position: relative; margin-top: 3.6em; }
.atelier-origin__pillars { margin: 0; padding: 0; list-style: none; }
.atelier-origin__pillar { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,330px) 56px; align-items: center; gap: 2em; padding: 1.1em 0; border-top: 1px solid var(--or-line); cursor: pointer; }
.atelier-origin__pillar:last-child { border-bottom: 1px solid var(--or-line); }
.atelier-origin__pillar::after { content: ""; position: absolute; bottom: -1px; inset-inline: 0; height: 1px; background: linear-gradient(90deg, var(--or-gold), rgba(185,154,99,0) 85%); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.atelier-origin__pillar:last-child::after { bottom: -1px; }
.atelier-origin__pillar.is-active::after { transform: scaleX(1); }
.atelier-origin__pillar-btn { display: flex; align-items: center; gap: 1.8em; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.atelier-origin__num { align-self: flex-start; margin-top: 1.4em; color: var(--or-gold-deep); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-origin__word { color: transparent; -webkit-text-stroke: 1px rgba(37,37,31,.5); font-family: "Manrope", sans-serif; font-size: clamp(2.8rem, 2.4vw, 7rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; transition: color .6s ease, -webkit-text-stroke-color .6s ease; }
.atelier-origin__word i { font-style: normal; -webkit-text-stroke: 1px var(--or-gold); transition: color .6s ease; }
.atelier-origin__pillar.is-active .atelier-origin__word { color: var(--or-ink); -webkit-text-stroke-color: transparent; }
.atelier-origin__pillar.is-active .atelier-origin__word i { color: var(--or-gold); -webkit-text-stroke: 0; }
.atelier-origin__pillar-btn:focus-visible { outline: 2px solid var(--or-gold); outline-offset: 6px; }
.atelier-origin__panel { opacity: 0; transform: translateX(18px); pointer-events: none; transition: opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.atelier-origin__pillar.is-active .atelier-origin__panel { opacity: 1; transform: none; pointer-events: auto; }
.atelier-origin__panel p { margin: 0; color: var(--or-muted); font-size: 14.5px; line-height: 1.85; }
.atelier-origin__thumb { display: none; }
.atelier-origin__tog { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(185,154,99,.6); border-radius: 50%; color: var(--or-gold); font-size: 24px; font-weight: 300; line-height: 1; transition: transform .5s ease, background .4s ease, color .4s ease; }
.atelier-origin__pillar.is-active .atelier-origin__tog { transform: rotate(45deg); background: var(--or-gold); color: #171713; }
.atelier-origin__float { position: absolute; top: 0; left: 0; z-index: 3; width: 250px; height: 300px; border-radius: 62% 38% 55% 45% / 50% 60% 40% 50%; overflow: hidden; background: #1C1D1A; box-shadow: 0 40px 80px -24px rgba(25,26,24,.55); opacity: 0; pointer-events: none; animation: atelier-origin-blob 7s ease-in-out infinite; }
.atelier-origin__float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .5s ease, transform .9s ease; }
.atelier-origin__float img.is-on { opacity: 1; transform: scale(1); }
@keyframes atelier-origin-blob { 0%, 100% { border-radius: 62% 38% 55% 45% / 50% 60% 40% 50%; } 50% { border-radius: 40% 60% 42% 58% / 58% 42% 60% 40%; } }
.atelier-origin a:focus-visible { outline: 2px solid var(--or-gold); outline-offset: 4px; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-origin { padding: 5em 2.5em; }
  .atelier-origin__intro { margin-bottom: 5em; }
  .atelier-origin__story { grid-template-columns: 1fr; gap: 4.5em; }
  .atelier-origin__collage { max-width: 480px; }
  .atelier-origin__philo { margin-top: 6em; }
  .atelier-origin__pillar { grid-template-columns: minmax(0,1fr) auto; gap: 0 1.2em; padding: 1.2em 0; }
  .atelier-origin__word { font-size: clamp(2.4rem, 10vw, 5rem); }
  .atelier-origin__tog { width: 48px; height: 48px; }
  .atelier-origin__panel { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 1; transform: none; pointer-events: auto; transition: grid-template-rows .6s cubic-bezier(.2,.8,.2,1); }
  .atelier-origin__pillar.is-active .atelier-origin__panel { grid-template-rows: 1fr; }
  .atelier-origin__panel-in { display: flex; align-items: center; gap: 1.6em; min-height: 0; overflow: hidden; }
  .atelier-origin__panel-in > * { margin-top: 1.2em; }
  .atelier-origin__panel p { max-width: 520px; padding-bottom: .4em; }
  .atelier-origin__thumb { display: block; flex: 0 0 auto; width: 120px; height: 140px; border-radius: 62% 38% 55% 45% / 50% 60% 40% 50%; overflow: hidden; animation: atelier-origin-blob 7s ease-in-out infinite; }
  .atelier-origin__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .atelier-origin__float { display: none; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-origin { padding: 5em 1.5em; }
  .atelier-origin::before { width: 340px; height: 340px; top: -130px; inset-inline-end: -150px; }
  .atelier-origin__intro { margin-bottom: 4em; }
  .atelier-origin__manifesto { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .atelier-origin__collage { max-width: 360px; }
  .atelier-origin__disc { border-width: 5px; }
  .atelier-origin__tag { font-size: 10px; letter-spacing: 1.5px; }
  .atelier-origin__tag::before { width: 18px; }
  .atelier-origin__figs { margin: 2.2em 0; padding: 1.5em 0; }
  .atelier-origin__fig { padding-inline: .9em; }
  .atelier-origin__link { margin-inline-start: 0; }
  .atelier-origin__philo { margin-top: 5em; }
  .atelier-origin__wrap { margin-top: 2.6em; }
  .atelier-origin__pillar-btn { gap: 1em; }
  .atelier-origin__num { margin-top: .8em; }
  .atelier-origin__word { font-size: clamp(2.1rem, 11.5vw, 3.2rem); }
  .atelier-origin__tog { width: 42px; height: 42px; font-size: 20px; }
  .atelier-origin__panel-in { gap: 1.1em; }
  .atelier-origin__thumb { width: 84px; height: 100px; }
  .atelier-origin__panel p { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-origin *, .atelier-origin *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | OUR DETAILING EXPERTISE
========================================================= */
.atelier-mastery { --ms-gold: #B99A63; --ms-gold-light: #D8C49A; --ms-gold-deep: #947545; --ms-bg: #151612; --ms-ink: #F0EEE8; --ms-muted: #B0ADA3; --ms-line: rgba(235,229,216,.16); position: relative; isolation: isolate; padding: 6em 5em; background: var(--ms-bg); color: var(--ms-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-mastery * { box-sizing: border-box; }
.atelier-mastery::before { content: ""; position: absolute; z-index: -1; top: 8%; left: 50%; width: 900px; height: 900px; margin-left: -450px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.13), transparent 66%); pointer-events: none; }
.atelier-mastery::after { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-end: -220px; width: 560px; height: 560px; border: 1px solid rgba(185,154,99,.18); border-radius: 50%; pointer-events: none; }
.atelier-mastery__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Heading (centered) */
.atelier-mastery__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.atelier-mastery__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--ms-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-mastery__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--ms-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }
.atelier-mastery__title { margin: 1em 0 0; color: var(--ms-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.8vw, 3.6rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-mastery__title span { color: var(--ms-gold); font-weight: 400; }
.atelier-mastery__intro { max-width: 600px; margin: 1.6em 0 0; color: var(--ms-muted); font-size: 15px; line-height: 1.85; }

/* Stage */
.atelier-mastery__stage { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,375px) minmax(0,1fr); grid-template-rows: auto auto; column-gap: 3.5em; row-gap: 2.5em; align-items: center; margin-top: 4.5em; direction: ltr; }
.atelier-mastery__lens { grid-column: 2; grid-row: 1 / span 2; width: 100%; direction: ltr; clip-path: none !important; -webkit-clip-path: none !important; }
.atelier-mastery__calls { display: contents; }
.atelier-mastery__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.atelier-mastery__lbl { fill: var(--ms-gold-light); font-family: "Manrope", sans-serif; font-size: 9.5px; font-weight: 700; letter-spacing: 2.2px; }

/* Layer highlight */
.atelier-mastery__layer { transition: opacity .7s ease, filter .7s ease; }
.atelier-mastery__svg[data-active="1"] .atelier-mastery__layer:not([data-layer="1"]),
.atelier-mastery__svg[data-active="2"] .atelier-mastery__layer:not([data-layer="2"]),
.atelier-mastery__svg[data-active="3"] .atelier-mastery__layer:not([data-layer="3"]),
.atelier-mastery__svg[data-active="4"] .atelier-mastery__layer:not([data-layer="4"]) { opacity: .28; }
.atelier-mastery__svg[data-active="1"] .atelier-mastery__layer[data-layer="1"],
.atelier-mastery__svg[data-active="2"] .atelier-mastery__layer[data-layer="2"],
.atelier-mastery__svg[data-active="3"] .atelier-mastery__layer[data-layer="3"],
.atelier-mastery__svg[data-active="4"] .atelier-mastery__layer[data-layer="4"] { filter: drop-shadow(0 0 10px rgba(216,196,154,.55)); }

/* Markers */
.atelier-mastery__dot { cursor: pointer; outline: none; }
.atelier-mastery__dot .halo { fill: rgba(185,154,99,.14); opacity: 0; transition: opacity .4s ease; }
.atelier-mastery__dot .disc { fill: #151612; stroke: #B99A63; stroke-width: 1.2; transition: fill .35s ease; }
.atelier-mastery__dot text { fill: #D8C49A; font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; pointer-events: none; transition: fill .35s ease; }
.atelier-mastery__dot:hover .halo, .atelier-mastery__dot:focus-visible .halo, .atelier-mastery__dot.is-active .halo { opacity: 1; }
.atelier-mastery__dot.is-active .disc { fill: #B99A63; }
.atelier-mastery__dot.is-active text { fill: #171713; }
.atelier-mastery__dot:focus-visible .disc { stroke: #F1E4C3; stroke-width: 2; }

.atelier-mastery__readout { display: flex; flex-direction: column; align-items: center; gap: .3em; width: fit-content; max-width: 100%; margin: 1.8em auto 0; padding: .9em 2em; border: 1px solid rgba(185,154,99,.5); border-radius: 999px; text-align: center; }
.atelier-mastery__readout b { color: var(--ms-ink); font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.atelier-mastery__readout span { color: var(--ms-gold-light); font-size: 12px; font-weight: 600; letter-spacing: .3px; }

/* Callouts */
.atelier-mastery__call { display: flex; align-items: center; gap: 1.6em; direction: ltr; transition: opacity .4s ease; }
.atelier-mastery__call:nth-child(1) { grid-column: 1; grid-row: 1; }
.atelier-mastery__call:nth-child(2) { grid-column: 3; grid-row: 1; }
.atelier-mastery__call:nth-child(3) { grid-column: 1; grid-row: 2; }
.atelier-mastery__call:nth-child(4) { grid-column: 3; grid-row: 2; }
.atelier-mastery__call:nth-child(odd) { flex-direction: row-reverse; text-align: right; }
.atelier-mastery__call:nth-child(even) { text-align: left; }
.atelier-mastery__stage.is-ready .atelier-mastery__call:not(.is-active) { opacity: .5; }
.atelier-mastery__stage.is-ready .atelier-mastery__call:hover { opacity: 1; }
.atelier-mastery__thumb { flex: 0 0 auto; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: #1C1D1A; box-shadow: 0 0 0 5px var(--ms-bg), 0 0 0 6px rgba(185,154,99,.45); transition: box-shadow .4s ease, transform .5s ease; }
.atelier-mastery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.atelier-mastery__call.is-active .atelier-mastery__thumb { box-shadow: 0 0 0 5px var(--ms-bg), 0 0 0 7px var(--ms-gold), 0 0 28px 6px rgba(185,154,99,.3); transform: scale(1.06); }
.atelier-mastery__call-text small { color: var(--ms-gold-light); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; }
.atelier-mastery__call-text h3 { margin: .55em 0 .6em; font-family: "Manrope", sans-serif; font-size: clamp(1.1rem, 1.5vw, 1.4rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; }
.atelier-mastery__call-text h3 button { padding: 0; border: 0; background: transparent; color: var(--ms-ink); font: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; transition: color .3s ease; }
.atelier-mastery__call.is-active .atelier-mastery__call-text h3 button, .atelier-mastery__call-text h3 button:hover { color: var(--ms-gold-light); }
.atelier-mastery__call-text p { max-width: 330px; margin: 0; color: var(--ms-muted); font-size: 13.5px; line-height: 1.75; }
.atelier-mastery__call:nth-child(odd) .atelier-mastery__call-text p { margin-left: auto; }
.atelier-mastery__pills { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1em; }
.atelier-mastery__call:nth-child(odd) .atelier-mastery__pills { justify-content: flex-end; }
.atelier-mastery__pills span { padding: .45em 1em; border: 1px solid var(--ms-line); border-radius: 999px; color: var(--ms-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.atelier-mastery button:focus-visible, .atelier-mastery a:focus-visible { outline: 2px solid var(--ms-gold-light); outline-offset: 4px; }

/* Also */
.atelier-mastery__also { display: flex; flex-direction: column; align-items: center; gap: 1.6em; margin-top: 5.5em; padding-top: 3.4em; border-top: 1px solid var(--ms-line); text-align: center; }
.atelier-mastery__also-label { color: var(--ms-gold-light); font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.atelier-mastery__also-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .8em; }
.atelier-mastery__also-list a { padding: .8em 1.6em; border: 1px solid var(--ms-line); border-radius: 999px; color: var(--ms-ink); font-size: 13.5px; font-weight: 600; transition: border-color .3s ease, color .3s ease, background .3s ease; }
.atelier-mastery__also-list a:hover { border-color: var(--ms-gold); color: var(--ms-gold-light); }
.atelier-mastery__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; margin-top: .8em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; color: var(--ms-ink); font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, color .3s ease; }
.atelier-mastery__cta i { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ms-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-mastery__cta:hover { background: var(--ms-gold); color: #171713; }
.atelier-mastery__cta:hover i { transform: translateX(3px); background: #171713; color: var(--ms-gold-light); }
.atelier-mastery__caption { margin: 0; color: var(--ms-muted); font-size: 12px; letter-spacing: .3px; opacity: .8; }
.atelier-mastery__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-mastery { padding: 5em 2.5em; }
  .atelier-mastery__stage { grid-template-columns: 1fr; row-gap: 0; margin-top: 3.5em; }
  .atelier-mastery__lens { grid-column: 1; grid-row: auto; max-width: 440px; margin: 0 auto 3.4em; }
  .atelier-mastery__call:nth-child(n) { grid-column: 1; grid-row: auto; flex-direction: row; text-align: left; padding: 2em 0; border-top: 1px solid var(--ms-line); }
  .atelier-mastery__call:nth-child(odd) .atelier-mastery__call-text p { margin-left: 0; }
  .atelier-mastery__call:nth-child(odd) .atelier-mastery__pills { justify-content: flex-start; }
  .atelier-mastery__call-text p { max-width: 520px; }
  .atelier-mastery__also { margin-top: 4em; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-mastery { padding: 5em 1.5em; }
  .atelier-mastery::after { width: 320px; height: 320px; bottom: -120px; inset-inline-end: -140px; }
  .atelier-mastery__lens { margin-bottom: 2.6em; }
  .atelier-mastery__readout { padding: .8em 1.4em; }
  .atelier-mastery__call:nth-child(n) { gap: 1.2em; padding: 1.7em 0; align-items: flex-start; flex-direction:column; }
  .atelier-mastery__thumb { width: 68px; height: 68px; box-shadow: 0 0 0 4px var(--ms-bg), 0 0 0 5px rgba(185,154,99,.45); }
  .atelier-mastery__call.is-active .atelier-mastery__thumb { box-shadow: 0 0 0 4px var(--ms-bg), 0 0 0 6px var(--ms-gold), 0 0 20px 4px rgba(185,154,99,.3); }
  .atelier-mastery__also { margin-top: 3.4em; padding-top: 2.6em; }
  .atelier-mastery__also-list a { padding: .7em 1.3em; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-mastery *, .atelier-mastery *::after { transition: none !important; animation: none !important; }
}
/* =========================================================
   AUTOMOTIVE ATELIER | OUR STANDARDS OF EXCELLENCE
========================================================= */
.atelier-standard { --sd-gold: #B99A63; --sd-gold-light: #D8C49A; --sd-gold-deep: #947545; --sd-bg: #F5F3EF; --sd-ink: #25251F; --sd-muted: #77766F; --sd-line: rgba(39,39,33,.15); --sd-road: #ECE8DF; --sd-edge: rgba(39,39,33,.14); position: relative; isolation: isolate; padding: 6em 5em 8em; background: var(--sd-bg); color: var(--sd-ink); overflow-x: clip; overflow-y: visible; font-family: "DM Sans", sans-serif; }
.atelier-standard * { box-sizing: border-box; }
.atelier-standard::before { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-start: -220px; width: 580px; height: 580px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-standard__backdrop { position: absolute; z-index: -1; top: 0; inset-inline-end: 0; width: min(60vw, 840px); height: 560px; object-fit: cover; opacity: .2; -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 68%); mask-image: radial-gradient(ellipse at 70% 30%, #000 0%, transparent 68%); pointer-events: none; }
.atelier-standard__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

.atelier-standard__head { max-width: 660px; }
.atelier-standard__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--sd-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-standard__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--sd-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }
.atelier-standard__title { margin: 1em 0 0; color: var(--sd-ink); font-family: "Manrope", sans-serif; font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.1; }
.atelier-standard__title span { color: var(--sd-gold); font-weight: 400; }
.atelier-standard__intro { max-width: 520px; margin: 1.6em 0 0; color: var(--sd-muted); font-size: 15px; line-height: 1.85; }

/* Road */
.atelier-standard__road { position: relative; margin-top: 5.5em; padding-top: 60px; padding-bottom: 40px; overflow: visible; }
.atelier-standard__road-svg { position: absolute; top: -7em; left: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; direction: ltr; }
.atelier-standard__road-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.atelier-standard__road-edge { stroke: var(--sd-edge); stroke-width: 42; }
.atelier-standard__road-base { stroke: var(--sd-road); stroke-width: 40; }
.atelier-standard__road-dash { stroke: rgba(185,154,99,.55); stroke-width: 2; stroke-dasharray: 10 14; }
.atelier-standard__road-gild { stroke: var(--sd-gold); stroke-width: 4; filter: drop-shadow(0 0 6px rgba(185,154,99,.55)); }
.atelier-standard__head-glow { fill: rgba(185,154,99,.35); transform-box: fill-box; transform-origin: center; }
.atelier-standard__head-core { fill: var(--sd-gold); stroke: #fff; stroke-opacity: .85; stroke-width: 1.5; }

.atelier-standard__stops { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 1.5em; margin: 0; padding: 0; list-style: none; }
.atelier-standard__stop { flex: 1; display: flex; flex-direction: column; align-items: center; max-width: 236px; text-align: center; }
.atelier-standard__stop:nth-child(even) { margin-top: 160px; }
.atelier-standard__seal { position: relative; z-index: 2; display: grid; place-items: center; width: 104px; height: 104px; flex: 0 0 104px; }
.atelier-standard__seal svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.atelier-standard__seal .shape { fill: var(--sd-bg); stroke: var(--sd-gold); stroke-width: 1.2; transition: fill .6s ease, filter .6s ease; }
.atelier-standard__seal .ring { fill: none; stroke: rgba(185,154,99,.55); stroke-width: .8; stroke-dasharray: 2 3; transform-box: fill-box; transform-origin: center; transition: stroke .6s ease; }
.atelier-standard__seal b { position: relative; color: var(--sd-ink); font-family: "Manrope", sans-serif; font-size: 22px; font-weight: 500; letter-spacing: -.03em; transition: color .5s ease; }
.atelier-standard__seal.is-lit .shape { fill: var(--sd-gold); filter: drop-shadow(0 10px 18px rgba(185,154,99,.45)); }
.atelier-standard__seal.is-lit .ring { stroke: rgba(23,23,19,.5); }
.atelier-standard__seal.is-lit b { color: #171713; }
.atelier-standard__stop-text { margin-top: 1.5em; }
.atelier-standard__stop-text small { color: var(--sd-gold-deep); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; }
.atelier-standard__stop-text h3 { margin: .6em 0 .6em; color: var(--sd-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.25; }
.atelier-standard__stop-text p { margin: 0; color: var(--sd-muted); font-size: 13.5px; line-height: 1.75; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-standard { padding: 5em 2.5em 7em; }
  .atelier-standard__backdrop { height: 440px; width: 90vw; }
  .atelier-standard__road { margin-top: 11.5em; padding-top: 50px; padding-bottom: 30px; }
  .atelier-standard__road-edge { stroke-width: 34; }
  .atelier-standard__road-base { stroke-width: 32; }
  .atelier-standard__stops { flex-direction: column; justify-content: flex-start; gap: 3.4em; }
  .atelier-standard__stop { flex-direction: row; align-items: flex-start; max-width: none; text-align: start; gap: 1.8em; }
  .atelier-standard__stop:nth-child(even) { margin-top: 0; margin-inline-start: 9%; }
  .atelier-standard__stop-text { margin-top: .5em; max-width: 420px; }
  .atelier-standard__seal { width: 88px; height: 88px; flex: 0 0 88px; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-standard { padding: 5em 1.5em 6em; }
  .atelier-standard::before { width: 320px; height: 320px; bottom: -120px; inset-inline-start: -140px; }
  .atelier-standard__road { margin-top: 11.8em; padding-top: 40px; padding-bottom: 20px; }
  .atelier-standard__road-edge { stroke-width: 26; }
  .atelier-standard__road-base { stroke-width: 24; }
  .atelier-standard__stops { gap: 2.8em; }
  .atelier-standard__stop { gap: 1.2em; }
  .atelier-standard__stop:nth-child(even) { margin-inline-start: 1.6em; }
  .atelier-standard__seal { width: 72px; height: 72px; flex: 0 0 72px; }
  .atelier-standard__seal b { font-size: 17px; }
  .atelier-standard__stop-text { margin-top: .2em; }
  .atelier-standard__stop-text p { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-standard *, .atelier-standard *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | OUR STUDIO & PROFESSIONAL EQUIPMENT
========================================================= */
.atelier-gear { --gr-gold: #B99A63; --gr-gold-light: #D8C49A; --gr-bg: #151612; --gr-ink: #F0EEE8; --gr-muted: #B0ADA3; --gr-line: rgba(235,229,216,.16); position: relative; isolation: isolate; padding: 6em 5em; background: var(--gr-bg); color: var(--gr-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-gear * { box-sizing: border-box; }
.atelier-gear::before { content: ""; position: absolute; z-index: -1; top: 14%; left: 50%; width: 1000px; height: 1000px; margin-left: -500px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.13), transparent 64%); pointer-events: none; }
.atelier-gear::after { content: ""; position: absolute; z-index: -1; top: -240px; inset-inline-start: -220px; width: 560px; height: 560px; border: 1px solid rgba(185,154,99,.18); border-radius: 50%; pointer-events: none; }
.atelier-gear__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

.atelier-gear__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 4em; }
.atelier-gear__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--gr-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-gear__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--gr-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }
.atelier-gear__title { margin: 1em 0 0; color: var(--gr-ink); font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.12; }
.atelier-gear__title span { color: var(--gr-gold); font-weight: 400; }
.atelier-gear__head-side { max-width: 390px; }
.atelier-gear__head-side p { margin: 0 0 1.4em; color: var(--gr-muted); font-size: 14.5px; line-height: 1.85; }
.atelier-gear__link { display: inline-flex; align-items: center; gap: .9em; color: var(--gr-ink); font-size: 13px; font-weight: 700; letter-spacing: .7px; }
.atelier-gear__link i { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--gr-gold); border-radius: 50%; color: var(--gr-gold); font-size: 17px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-gear__link:hover i { transform: rotate(45deg); background: var(--gr-gold); color: #171713; }

/* Studio ellipse */
.atelier-gear__tour { margin-top: 4.5em; }
.atelier-gear__wrap { position: relative; width: 100%; max-width: 1080px; margin-inline: auto; aspect-ratio: 2 / 1; direction: ltr; }
.atelier-gear__ring { position: absolute; inset: -4% -2.6%; border: 1px dashed rgba(185,154,99,.42); border-radius: 50%; pointer-events: none; }
.atelier-gear__scene { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #1C1D1A; box-shadow: 0 60px 110px -40px rgba(0,0,0,.85); }
.atelier-gear__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); will-change: transform; }
.atelier-gear__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, transparent 34%, rgba(10,11,9,.7) 100%); }

.atelier-gear__hot { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: 42px; height: 42px; margin: -21px 0 0 -21px; padding: 0; border: 1px solid var(--gr-gold); border-radius: 50%; background: rgba(21,22,18,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--gr-gold-light); cursor: pointer; transition: background .35s ease, color .35s ease; }
.atelier-gear__hot::before { content: ""; position: absolute; inset: -1px; border: 1px solid var(--gr-gold); border-radius: 50%; opacity: 0; animation: atelier-gear-pulse 2.6s ease-out infinite; }
.atelier-gear__hot-num { display: grid; place-items: center; width: 100%; height: 100%; font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 700; }
.atelier-gear__hot.is-active, .atelier-gear__hot:hover { background: var(--gr-gold); color: #171713; }
.atelier-gear__label { position: absolute; top: 50%; left: calc(100% + .9em); padding: .55em 1.2em; border: 1px solid rgba(185,154,99,.5); border-radius: 999px; background: rgba(21,22,18,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--gr-ink); font-size: 11.5px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; opacity: 0; transform: translate(-6px, -50%); pointer-events: none; transition: opacity .35s ease, transform .35s ease; }
.atelier-gear__hot--flip .atelier-gear__label { left: auto; right: calc(100% + .9em); transform: translate(6px, -50%); }
.atelier-gear__hot.is-active .atelier-gear__label, .atelier-gear__hot:hover .atelier-gear__label, .atelier-gear__hot:focus-visible .atelier-gear__label { opacity: 1; transform: translate(0, -50%); }
@keyframes atelier-gear-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
.atelier-gear button:focus-visible, .atelier-gear a:focus-visible { outline: 2px solid var(--gr-gold-light); outline-offset: 4px; }

/* Detail */
.atelier-gear__detail { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: start; gap: 4em; max-width: 1080px; margin: -6.5em auto 0; }
.atelier-gear__inset { position: relative; width: min(100%, 380px); aspect-ratio: 1.5; margin-inline-start: 5%; border: 7px solid var(--gr-bg); border-radius: 50%; overflow: hidden; background: #1C1D1A; box-shadow: 0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(185,154,99,.45); direction: ltr; }
.atelier-gear__inset img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.18); transition: opacity .7s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.atelier-gear__inset img.is-on { opacity: 1; transform: scale(1); }
.atelier-gear__info { margin-top: 7em; }
.atelier-gear__info small { color: var(--gr-gold-light); font-size: 11.5px; font-weight: 700; letter-spacing: 2px; }
.atelier-gear__info h3 { margin: .7em 0 .6em; color: var(--gr-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; }
.atelier-gear__info p { max-width: 460px; margin: 0; color: var(--gr-muted); font-size: 14.5px; line-height: 1.85; }
.atelier-gear__specs { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.4em; }
.atelier-gear__specs span { padding: .5em 1.1em; border: 1px solid var(--gr-line); border-radius: 999px; color: var(--gr-gold-light); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.atelier-gear__dots { display: flex; align-items: center; gap: .7em; margin-top: 2em; }
.atelier-gear__dots button { width: 10px; height: 10px; padding: 0; border: 1px solid var(--gr-gold); border-radius: 999px; background: transparent; cursor: pointer; transition: width .4s ease, background .4s ease; }
.atelier-gear__dots button.is-active { width: 34px; background: var(--gr-gold); }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-gear { padding: 5em 2.5em; }
  .atelier-gear__head { flex-direction: column; align-items: flex-start; gap: 2em; }
  .atelier-gear__tour { margin-top: 3.6em; }
  .atelier-gear__wrap { aspect-ratio: 1.55 / 1; }
  .atelier-gear__detail { grid-template-columns: 1fr; gap: 0; margin-top: -5em; justify-items: center; }
  .atelier-gear__inset { width: min(70%, 340px); margin-inline: auto; }
  .atelier-gear__info { margin-top: 2.4em; text-align: center; }
  .atelier-gear__info p { margin-inline: auto; }
  .atelier-gear__specs, .atelier-gear__dots { justify-content: center; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-gear { padding: 5em 1.5em; }
  .atelier-gear::after { width: 320px; height: 320px; top: -120px; inset-inline-start: -140px; }
  .atelier-gear__tour { margin-top: 3em; }
  .atelier-gear__wrap { aspect-ratio: 1.3 / 1; }
  .atelier-gear__hot { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .atelier-gear__hot-num { font-size: 11.5px; }
  .atelier-gear__label { display: none; }
  .atelier-gear__detail { margin-top: -3.6em; }
  .atelier-gear__inset { width: min(78%, 280px); border-width: 5px; }
  .atelier-gear__info { margin-top: 2em; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-gear *, .atelier-gear *::after { transition: none !important; animation: none !important; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | WHAT MAKES US DIFFERENT
========================================================= */
.atelier-edge { --ed-gold: #B99A63; --ed-gold-light: #D8C49A; --ed-gold-deep: #947545; --ed-bg: #F5F3EF; --ed-ink: #25251F; --ed-muted: #77766F; --ed-line: rgba(39,39,33,.15); position: relative; isolation: isolate; padding: 6em 5em; background: var(--ed-bg); color: var(--ed-ink); overflow: hidden; overflow: clip; font-family: "DM Sans", sans-serif; }
.atelier-edge * { box-sizing: border-box; }
.atelier-edge::before { content: ""; position: absolute; z-index: -1; top: -220px; inset-inline-start: -200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.14), transparent 68%); pointer-events: none; }
.atelier-edge::after { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-end: -220px; width: 580px; height: 580px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-edge__inner { width: 100%; max-width: 1440px; margin: 0 auto; }

.atelier-edge__top { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: center; gap: 4em; }
.atelier-edge__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--ed-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-edge__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--ed-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.14); }
.atelier-edge__title { margin: 1em 0 0; color: var(--ed-ink); font-family: "Manrope", sans-serif; font-size: clamp(2.2rem, 4.2vw, 4rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.08; }
.atelier-edge__title span { color: var(--ed-gold); font-weight: 400; }
.atelier-edge__lead { max-width: 500px; margin: 1.6em 0 0; color: var(--ed-muted); font-size: 15px; line-height: 1.85; }

.atelier-edge__visual { position: relative; width: 100%; max-width: 440px; margin-inline: auto; }
.atelier-edge__outline { position: absolute; inset: -5%; z-index: 0; width: 110%; height: 110%; max-width: none; color: var(--ed-gold); overflow: visible; pointer-events: none; }
.atelier-edge__blob { position: relative; z-index: 1; aspect-ratio: 1 / 1.08; clip-path: url(#atelierEdgeBlob); background: #1C1D1A; }
.atelier-edge__blob img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); will-change: transform; }
.atelier-edge__badge { position: absolute; z-index: 2; bottom: 9%; inset-inline-start: -7%; display: inline-flex; align-items: center; gap: .7em; padding: .9em 1.5em; border: 1px solid rgba(185,154,99,.6); border-radius: 999px; background: var(--ed-bg); color: var(--ed-ink); font-size: 12px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; box-shadow: 0 16px 36px rgba(25,26,24,.14); }
.atelier-edge__badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--ed-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.18); }

/* Ledger */
.atelier-edge__rows { margin: 6em 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ed-line); }
.atelier-edge__row { display: grid; grid-template-columns: minmax(0,1fr) 62px minmax(0,1.3fr); align-items: center; gap: 2.4em; padding: 2.2em 0; border-bottom: 1px solid var(--ed-line); transition: opacity .6s ease; }
.atelier-edge__rows.has-focus .atelier-edge__row:not(.is-focus) { opacity: .42; }
.atelier-edge__row small { display: block; margin-bottom: .8em; color: var(--ed-gold-deep); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; }
.atelier-edge__them, .atelier-edge__us { margin: 0; }
.atelier-edge__them span { position: relative; display: inline-block; color: var(--ed-muted); font-family: "Manrope", sans-serif; font-size: clamp(1.1rem, 1vw, 1.55rem); font-weight: 400; letter-spacing: -.03em; line-height: 1.3; }
.atelier-edge__them span::after { content: ""; position: absolute; top: 55%; left: -2%; right: -2%; height: 1.5px; background: var(--ed-ink); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.2,.8,.2,1) .25s; }
.atelier-edge__row.is-in .atelier-edge__them span::after { transform: scaleX(1); }
.atelier-edge__arrow { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(185,154,99,.6); border-radius: 50%; color: var(--ed-gold); font-size: 20px; transition: background .5s ease .5s, color .5s ease .5s, transform .6s ease .5s; }
.atelier-edge__row.is-in .atelier-edge__arrow { background: var(--ed-gold); color: #171713; transform: translateX(4px); }
.atelier-edge__us strong { color: var(--ed-ink); font-family: "Manrope", sans-serif; font-size: clamp(1.25rem, 1.3vw, 2.05rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.32; padding-bottom: .12em; background: linear-gradient(var(--ed-gold), var(--ed-gold)) no-repeat 0 100% / 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1.1s cubic-bezier(.2,.8,.2,1) .6s; }
.atelier-edge__row.is-in .atelier-edge__us strong { background-size: 100% 2px; }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-edge { padding: 5em 2.5em; }
  .atelier-edge__top { grid-template-columns: 1fr; gap: 4em; }
  .atelier-edge__visual { max-width: 380px; }
  .atelier-edge__rows { margin-top: 4.5em; }
  .atelier-edge__row { grid-template-columns: minmax(0,1fr) 54px minmax(0,1.2fr); gap: 1.6em; }
  .atelier-edge__arrow { width: 50px; height: 50px; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-edge { padding: 5em 1.5em; }
  .atelier-edge::after { width: 320px; height: 320px; bottom: -120px; inset-inline-end: -140px; }
  .atelier-edge__visual { max-width: 300px; }
  .atelier-edge__badge { inset-inline-start: -2%; padding: .75em 1.2em; font-size: 11px; }
  .atelier-edge__rows { margin-top: 3.6em; }
  .atelier-edge__row { grid-template-columns: 1fr; gap: 1.2em; padding: 1.9em 0; }
  .atelier-edge__arrow { width: 44px; height: 44px; font-size: 17px; transform: rotate(90deg); }
  .atelier-edge__row.is-in .atelier-edge__arrow { transform: rotate(90deg) translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-edge *, .atelier-edge *::after { transition: none !important; animation: none !important; }
  .atelier-edge__them span::after { transform: scaleX(1); }
  .atelier-edge__us strong { background-size: 100% 2px; }
}


/* =========================================================
   AUTOMOTIVE ATELIER | FINAL CTA – EXPERIENCE PREMIUM CAR CARE
========================================================= */
.atelier-finale { --fn-gold: #B99A63; --fn-gold-light: #D8C49A; --fn-ink: #F0EEE8; --fn-muted: #C2BFB6; --fn-line: rgba(235,229,216,.2); position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: max(680px, 92vh); padding: 6em 5em; background: #0E0F0D; color: var(--fn-ink); overflow-x: clip; overflow-y: visible; font-family: "DM Sans", sans-serif; }
.atelier-finale * { box-sizing: border-box; }

/* Spotlight media */
.atelier-finale__media { position: absolute; inset: 0; z-index: -1; }
.atelier-finale__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.atelier-finale__img--base { filter: grayscale(1) brightness(.32) contrast(1.1); }
.atelier-finale__img--lit { filter: brightness(.85) saturate(1.1); -webkit-mask-image: radial-gradient(circle var(--fr, 300px) at var(--fx, 62%) var(--fy, 46%), #000 0%, rgba(0,0,0,.7) 42%, transparent 100%); mask-image: radial-gradient(circle var(--fr, 300px) at var(--fx, 62%) var(--fy, 46%), #000 0%, rgba(0,0,0,.7) 42%, transparent 100%); }
.atelier-finale__shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 52%, rgba(10,11,9,.28), rgba(10,11,9,.78) 85%), linear-gradient(0deg, rgba(10,11,9,.92), transparent 46%); }

.atelier-finale__inner { position: relative; z-index: 1; width: 100%; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.atelier-finale__eyebrow { display: inline-flex; align-items: center; gap: .8em; color: var(--fn-ink); font-size: 13px; font-weight: 700; letter-spacing: 1.5px; }
.atelier-finale__eyebrow i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--fn-gold); box-shadow: 0 0 0 4px rgba(185,154,99,.2); }
.atelier-finale__title { margin: 1.1em 0 0; color: var(--fn-ink); font-family: "Manrope", sans-serif; font-size: clamp(2.4rem, 6vw, 5.8rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.06; }
.atelier-finale__line { display: block; padding-bottom: .14em; margin-bottom: -.14em; overflow: hidden; }
.atelier-finale__line-in { display: block; }
.atelier-finale__title em { color: var(--fn-gold); font-style: normal; font-weight: 400; }
.atelier-finale__desc { max-width: 560px; margin: 1.7em 0 2.4em; color: var(--fn-muted); font-size: 15.5px; line-height: 1.85; }
.atelier-finale__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.6em 2.4em; }
.atelier-finale__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.8em .5em; border-radius: 999px; background: var(--fn-gold); color: #171713; font-size: 13px; font-weight: 700; letter-spacing: .6px; transition: background .3s ease, box-shadow .3s ease; }
.atelier-finale__cta i { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #171713; color: var(--fn-gold-light); font-size: 18px; font-style: normal; transition: transform .3s ease; }
.atelier-finale__cta:hover { background: var(--fn-gold-light); box-shadow: 0 18px 44px -12px rgba(185,154,99,.6); }
.atelier-finale__cta:hover i { transform: translateX(4px); }
.atelier-finale__link { display: inline-flex; align-items: center; gap: .95em; color: var(--fn-ink); font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.atelier-finale__link i { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid rgba(185,154,99,.65); border-radius: 50%; color: var(--fn-gold-light); font-size: 17px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-finale__link:hover i { transform: rotate(45deg); background: var(--fn-gold); color: #171713; }

.atelier-finale__contact { display: flex; justify-content: center; flex-wrap: wrap; gap: 2.6em 3.4em; margin: 4em 0 0; padding: 0; list-style: none; }
.atelier-finale__contact a { display: flex; flex-direction: column; align-items: center; gap: .5em; color: var(--fn-ink); }
.atelier-finale__circle { display: grid; place-items: center; width: 78px; height: 78px; margin-bottom: .6em; border: 1px solid rgba(185,154,99,.6); border-radius: 50%; background: rgba(15,16,13,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--fn-gold-light); transition: background .35s ease, color .35s ease, transform .35s ease; }
.atelier-finale__circle svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.atelier-finale__contact a:hover .atelier-finale__circle { background: var(--fn-gold); color: #171713; transform: translateY(-5px); }
.atelier-finale__contact small { color: var(--fn-gold-light); font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; }
.atelier-finale__contact b { font-family: "Manrope", sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.atelier-finale__hours { margin: 3em 0 0; color: var(--fn-muted); font-size: 13px; letter-spacing: .5px; }
.atelier-finale a:focus-visible { outline: 2px solid var(--fn-gold-light); outline-offset: 4px; }

/* Ticker */
.atelier-finale__ticker { position: relative; z-index: 1; margin: 5em -5em 0; padding: 1.6em 0 1.8em; overflow: hidden; border-top: 1px solid var(--fn-line); direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.atelier-finale__track { display: flex; width: max-content; animation: atelier-finale-drift 55s linear infinite; }
.atelier-finale__ticker:hover .atelier-finale__track { animation-play-state: paused; }
.atelier-finale__group { display: flex; align-items: center; gap: 2.2em; padding-inline-end: 2.2em; }
.atelier-finale__group span { color: transparent; -webkit-text-stroke: 1px rgba(216,196,154,.5); font-family: "Manrope", sans-serif; font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 800; letter-spacing: -.04em; white-space: nowrap; line-height: 1.1; }
.atelier-finale__group i { color: var(--fn-gold); font-size: 1.4rem; font-style: normal; }
@keyframes atelier-finale-drift { to { transform: translateX(-50%); } }

/* Tablet */
@media (max-width: 1024px) {
  .atelier-finale { min-height: auto; padding: 5em 2.5em; }
  .atelier-finale__ticker { margin: 4.5em -2.5em 0; }
  .atelier-finale__contact { gap: 2.4em 2.6em; }
}

/* Mobile */
@media (max-width: 767px) {
  .atelier-finale { padding: 5em 1.5em; }
  .atelier-finale__title { font-size: clamp(2.2rem, 10.6vw, 3.2rem); }
  .atelier-finale__desc { margin: 1.5em 0 2em; font-size: 15px; }
  .atelier-finale__contact { margin-top: 3em; gap: 2em 1.8em; }
  .atelier-finale__circle { width: 66px; height: 66px; }
  .atelier-finale__ticker { margin: 3.6em -1.5em 0; padding: 1.2em 0 1.4em; }
  .atelier-finale__group { gap: 1.4em; padding-inline-end: 1.4em; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-finale *, .atelier-finale *::after { transition: none !important; }
  .atelier-finale__track { animation: none; }
  .atelier-finale__circle::after, .atelier-finale__cta::after { animation: none; }
}
/* =========================================================
   CERAMIC COATING | BENEFITS (atelier-cb)
========================================================= */
.atelier-cb { --cb-gold: var(--auto-primary); --cb-gold-light: var(--auto-primary-light); --cb-gold-deep: var(--auto-primary-deep); --cb-bg: var(--auto-paper); --cb-ink: var(--auto-ink); --cb-muted: var(--auto-muted); --cb-line: var(--auto-line); --cb-glass: rgba(251,250,247,.86); position: relative; isolation: isolate; padding: 6em 5em; background: var(--cb-bg); color: var(--cb-ink); overflow: hidden; overflow: clip; font-family: var(--auto-font-body); }
.atelier-cb::before { content: ""; position: absolute; z-index: -1; top: -200px; inset-inline-end: -220px; width: 580px; height: 580px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-cb::after { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-start: -200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.14), transparent 68%); pointer-events: none; }
.atelier-cb__inner { width: 100%; max-width: 1280px; margin: 0 auto; }

/* Heading typography (matches page headings) */
.atelier-cb__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.atelier-cb__kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--cb-gold-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-cb__kicker::before, .atelier-cb__kicker::after { content: ""; width: 28px; height: 1px; background: var(--cb-gold); }
.atelier-cb__title { margin: 0 0 14px; font-family: var(--auto-font-heading); font-size: clamp(34px,4vw,54px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; text-wrap: balance; }
.atelier-cb__title span { color: var(--cb-gold); }
.atelier-cb__text { margin: 0; color: var(--cb-muted); font-size: 14px; line-height: 1.9; }

/* Dome */
.atelier-cb__dome { position: relative; }
.atelier-cb__dome-outline { position: absolute; inset: -14px -14px 0; border: 1px solid rgba(185,154,99,.5); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }
.atelier-cb__dome-frame { position: relative; height: clamp(280px, 32vw, 430px); border-radius: 999px 999px 0 0; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 30% 25%, #5A5240, #22221E 60%, #0F0F0D); box-shadow: 0 40px 90px -40px rgba(25,26,24,.55); }
.atelier-cb__dome-frame > img { position: absolute; top: -8%; left: 0; width: 100%; height: 116%; object-fit: cover; transition: opacity .3s ease; }
.atelier-cb__dome-frame > img.is-missing { opacity: 0; }
.atelier-cb__dome-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,10,9,.62), transparent 52%), radial-gradient(ellipse at 50% 20%, transparent 50%, rgba(10,10,9,.3) 100%); pointer-events: none; }
.atelier-cb__chips { position: absolute; left: 0; right: 0; bottom: 2em; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: .7em; margin: 0; padding: 0 1.5em; list-style: none; }
.atelier-cb__chips li { display: inline-flex; align-items: center; gap: .7em; padding: .6em 1.2em; border: 1px solid rgba(216,196,154,.6); border-radius: 999px; background: rgba(20,20,18,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #F8F5EF; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.atelier-cb__chips li i { width: 6px; height: 6px; border-radius: 50%; background: var(--cb-gold-light); box-shadow: 0 0 0 3px rgba(216,196,154,.2); }
.atelier-cb__source { position: absolute; left: 50%; bottom: -6px; z-index: 3; width: 12px; height: 12px; margin-left: -6px; border: 1.5px solid var(--cb-gold); border-radius: 50%; background: var(--cb-bg); }

/* Flow */
.atelier-cb__flow { position: relative; padding-top: 2.5em; }
.atelier-cb__path { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.atelier-cb__path-track { fill: none; stroke: var(--cb-line); stroke-width: 1.4; stroke-dasharray: 2 7; stroke-linecap: round; }
.atelier-cb__path-fill { fill: none; stroke: var(--cb-gold); stroke-width: 2; stroke-linecap: round; }
.atelier-cb__drop { position: absolute; left: 0; top: 0; z-index: 3; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0, var(--cb-gold-light) 38%, var(--cb-gold) 100%); box-shadow: 0 0 0 5px rgba(185,154,99,.18), 0 6px 14px rgba(148,117,69,.45); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.atelier-cb__drop.is-on { opacity: 1; }

.atelier-cb__items { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; }
.atelier-cb__item { --r: 75px; position: relative; z-index: 1; display: grid; align-items: center; min-height: 250px; grid-template-columns: calc(36% - var(--r)) calc(var(--r) * 2) minmax(0, 1fr); }
.atelier-cb__item:nth-child(even) { grid-template-columns: minmax(0, 1fr) calc(var(--r) * 2) calc(36% - var(--r)); }
.atelier-cb__item:nth-child(odd) .atelier-cb__num { grid-column: 1; justify-self: end; }
.atelier-cb__item:nth-child(even) .atelier-cb__num { grid-column: 3; justify-self: start; }
.atelier-cb__item:nth-child(odd) .atelier-cb__body { grid-column: 3; justify-self: start; text-align: start; }
.atelier-cb__item:nth-child(even) .atelier-cb__body { grid-column: 1; justify-self: end; text-align: end; }
.atelier-cb__item:nth-child(even) .atelier-cb__metric { flex-direction: row-reverse; }

.atelier-cb__num { padding-inline: .4em; font-family: var(--auto-font-heading); font-size: clamp(90px, 12vw, 180px); font-weight: 800; letter-spacing: -.06em; line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(185,154,99,.45); transition: color .6s ease, -webkit-text-stroke-color .6s ease; user-select: none; }
.atelier-cb__item.is-reached .atelier-cb__num { color: rgba(185,154,99,.12); -webkit-text-stroke-color: rgba(185,154,99,.95); }

.atelier-cb__node { position: relative; grid-column: 2; width: calc(var(--r) * 2); height: calc(var(--r) * 2); padding: 7px; border-radius: 50%; background: var(--cb-bg); box-shadow: 0 0 0 1px var(--cb-line); transition: box-shadow .6s ease; }
.atelier-cb__img { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 30% 25%, #EBDDB8, #B99A63 45%, #3A3225); }
.atelier-cb__img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.75) brightness(.86); transition: filter .9s ease, transform .9s ease, opacity .3s ease; }
.atelier-cb__img img.is-missing { opacity: 0; }
.atelier-cb__icon { position: absolute; bottom: 2px; inset-inline-end: 2px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cb-gold); color: #171713; font-size: 15px; box-shadow: 0 0 0 4px var(--cb-bg); transition: transform .5s ease; }
.atelier-cb__item.is-reached .atelier-cb__node { box-shadow: 0 0 0 1.5px var(--cb-gold), 0 0 0 10px rgba(185,154,99,.12); }
.atelier-cb__item.is-reached .atelier-cb__img img { filter: none; }
.atelier-cb__item:hover .atelier-cb__img img { transform: scale(1.08); }
.atelier-cb__item:hover .atelier-cb__icon { transform: rotate(-12deg) scale(1.08); }

.atelier-cb__body { max-width: 440px; padding-inline: 2.8em; }
.atelier-cb__bkicker { display: block; color: var(--cb-gold-deep); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.atelier-cb__btitle { margin: .6em 0 0; font-family: var(--auto-font-heading); font-size: 1.4rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.25; }
.atelier-cb__btext { margin: .8em 0 0; color: var(--cb-muted); font-size: 14px; line-height: 1.85; }
.atelier-cb__metric { display: inline-flex; align-items: center; gap: .9em; margin-top: 1.2em; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--cb-ink); }
.atelier-cb__metric::before { content: ""; width: 28px; height: 1px; background: var(--cb-gold); }

.atelier-cb__end { display: flex; justify-content: center; margin-top: 3.5em; }
.atelier-cb__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.65); border-radius: 999px; color: var(--cb-ink); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .08em; transition: background .3s ease, color .3s ease; }
.atelier-cb__cta i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cb-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-cb__cta:hover { background: var(--cb-gold); color: #171713; }
.atelier-cb__cta:hover i { transform: translateY(3px); background: #171713; color: var(--cb-gold-light); }

/* TABLET */
@media (max-width: 1024px) {
  .atelier-cb { padding: 5em 2.5em; }
  .atelier-cb__head { margin-bottom: 38px; }
  .atelier-cb__title { font-size: clamp(30px, 4.6vw, 40px); }
  .atelier-cb__item { --r: 62px; min-height: 230px; }
  .atelier-cb__num { font-size: clamp(78px, 12vw, 120px); }
  .atelier-cb__body { padding-inline: 2em; }
  .atelier-cb__icon { width: 34px; height: 34px; font-size: 13px; }
}

/* MOBILE */
@media (max-width: 767px) {
  .atelier-cb { padding: 5em 1.5em; }
  .atelier-cb::before { width: 340px; height: 340px; top: -130px; inset-inline-end: -150px; }
  .atelier-cb__head { margin-bottom: 30px; }
  .atelier-cb__title { font-size: clamp(26px, 7.4vw, 32px); letter-spacing: -.045em; }
  .atelier-cb__text { font-size: 13px; }
  .atelier-cb__dome-outline { inset: -10px -10px 0; }
  .atelier-cb__dome-frame { height: 300px; }
  .atelier-cb__chips { bottom: 1.4em; gap: .5em; padding-inline: 1em; }
  .atelier-cb__chips li { padding: .5em 1em; font-size: 12px; }
  .atelier-cb__chips li:nth-child(3) { display: none; }
  .atelier-cb__flow { padding-top: 2em; }
  .atelier-cb__item, .atelier-cb__item:nth-child(even) { --r: 36px; min-height: 0; padding-block: 1.8em; grid-template-columns: calc(var(--r) * 2) minmax(0, 1fr); }
  .atelier-cb__num { display: none; }
  .atelier-cb__item .atelier-cb__node, .atelier-cb__item:nth-child(even) .atelier-cb__node { grid-column: 1; padding: 4px; }
  .atelier-cb__item:nth-child(odd) .atelier-cb__body, .atelier-cb__item:nth-child(even) .atelier-cb__body { grid-column: 2; justify-self: start; text-align: start; padding-inline: 1.3em 0; max-width: none; }
  .atelier-cb__item:nth-child(even) .atelier-cb__metric { flex-direction: row; }
  .atelier-cb__icon { width: 24px; height: 24px; font-size: 10px; bottom: -2px; inset-inline-end: -4px; box-shadow: 0 0 0 3px var(--cb-bg); }
  .atelier-cb__btitle { font-size: 1.2rem; }
  .atelier-cb__end { margin-top: 2.6em; }
  .atelier-cb__cta { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-cb__img img, .atelier-cb__icon, .atelier-cb__drop { transition: none; }
}


/* =========================================================
   CERAMIC COATING | PACKAGES (atelier-cp)
========================================================= */
.atelier-cp { --cp-gold: var(--auto-primary); --cp-gold-light: var(--auto-primary-light); --cp-gold-deep: var(--auto-primary-deep); --cp-bg: var(--auto-surface); --cp-ink: var(--auto-ink); --cp-muted: var(--auto-muted); --cp-line: var(--auto-line); --cp-glass: rgba(251,250,247,.88); position: relative; isolation: isolate; padding: 6em 5em; background: var(--cp-bg); color: var(--cp-ink); overflow: hidden; overflow: clip; font-family: var(--auto-font-body); }
.atelier-cp::before { content: ""; position: absolute; z-index: -1; top: 30%; inset-inline-end: -240px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.14), transparent 68%); pointer-events: none; }
.atelier-cp::after { content: ""; position: absolute; z-index: -1; bottom: -220px; inset-inline-start: -200px; width: 520px; height: 520px; border: 1px solid rgba(185,154,99,.2); border-radius: 50%; pointer-events: none; }
.atelier-cp__inner { width: 100%; max-width: 1280px; margin: 0 auto; }

/* Heading typography (matches page headings) */
.atelier-cp__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.atelier-cp__kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--cp-gold-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-cp__kicker::before, .atelier-cp__kicker::after { content: ""; width: 28px; height: 1px; background: var(--cp-gold); }
.atelier-cp__title { margin: 0 0 14px; font-family: var(--auto-font-heading); font-size: clamp(34px,4vw,54px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; text-wrap: balance; }
.atelier-cp__title span { color: var(--cp-gold); }
.atelier-cp__text { margin: 0; color: var(--cp-muted); font-size: 14px; line-height: 1.9; }

/* Size pills */
.atelier-cp__sizes-wrap { display: flex; justify-content: center; }
.atelier-cp__sizes { position: relative; display: inline-flex; align-items: center; padding: 4px; border: 1px solid var(--cp-line); border-radius: 999px; }
.atelier-cp__sizes-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--cp-gold); pointer-events: none; }
.atelier-cp__sizes button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; padding: .8em 1.4em; border: 0; border-radius: 999px; background: transparent; color: var(--cp-ink); font-family: var(--auto-font-body); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color .3s ease; }
.atelier-cp__sizes button.is-active { color: #171713; }
.atelier-cp__sizes button:hover:not(.is-active) { color: var(--cp-gold-deep); }
.atelier-cp__sizes button:focus-visible { outline: 2px solid var(--cp-gold); outline-offset: 2px; }

/* Configurator */
.atelier-cp__config { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 5em; align-items: start; margin-top: 3.5em; }

.atelier-cp__tiers { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--cp-line); }
.atelier-cp__tier { border-top: 1px solid var(--cp-line); }
.atelier-cp__headbtn { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 1.4em; width: 100%; padding: 1.5em 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.atelier-cp__headbtn:focus-visible { outline: 2px solid var(--cp-gold); outline-offset: 4px; }
.atelier-cp__yr { display: flex; flex-direction: column; align-items: flex-start; gap: .5em; }
.atelier-cp__yr b { font-family: var(--auto-font-heading); font-size: clamp(52px, 5vw, 72px); font-weight: 800; letter-spacing: -.06em; line-height: .85; color: transparent; -webkit-text-stroke: 1px rgba(185,154,99,.6); transition: color .5s ease, -webkit-text-stroke-color .5s ease; }
.atelier-cp__yr small { color: var(--cp-muted); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-cp__tname { display: flex; flex-direction: column; gap: .4em; min-width: 0; }
.atelier-cp__tn { font-family: var(--auto-font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.2; transition: color .4s ease; }
.atelier-cp__td { color: var(--cp-muted); font-size: 14px; line-height: 1.6; }
.atelier-cp__tprice { display: flex; flex-direction: column; align-items: flex-end; gap: .3em; font-family: var(--auto-font-heading); }
.atelier-cp__tprice small { color: var(--cp-muted); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-cp__tprice span { display: inline-flex; align-items: baseline; gap: 3px; }
.atelier-cp__tprice em { font-style: normal; color: var(--cp-gold-deep); font-size: 15px; font-weight: 800; }
.atelier-cp__tprice b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.04em; }
.atelier-cp__tier:hover .atelier-cp__tn, .atelier-cp__tier.is-active .atelier-cp__tn { color: var(--cp-gold); }
.atelier-cp__tier:hover .atelier-cp__yr b, .atelier-cp__tier.is-active .atelier-cp__yr b { color: rgba(185,154,99,.16); -webkit-text-stroke-color: var(--cp-gold); }

.atelier-cp__detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s ease; }
.atelier-cp__tier.is-active .atelier-cp__detail { grid-template-rows: 1fr; }
.atelier-cp__detail-in { min-height: 0; overflow: hidden; padding-inline-start: calc(96px + 1.4em); }
.atelier-cp__feats { margin: 0; padding: 0 0 .4em; list-style: none; }
.atelier-cp__feats li { display: flex; align-items: center; gap: 1em; padding: .85em 0; border-top: 1px solid var(--cp-line); color: var(--cp-ink); font-size: 14px; line-height: 1.5; }
.atelier-cp__feats li i { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border: 1px solid var(--cp-gold); border-radius: 50%; color: var(--cp-gold-deep); font-size: 10px; }
.atelier-cp__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; margin: 1.1em 0 1.7em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.65); border-radius: 999px; color: var(--cp-ink); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .08em; transition: background .3s ease, color .3s ease; }
.atelier-cp__cta i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--cp-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-cp__cta:hover { background: var(--cp-gold); color: #171713; }
.atelier-cp__cta:hover i { transform: translateX(3px); background: #171713; color: var(--cp-gold-light); }

/* Stage */
.atelier-cp__stage { position: sticky; top: 7.5em; display: flex; flex-direction: column; align-items: center; }
.atelier-cp__wrap { position: relative; width: 100%; max-width: 430px; padding: 3.2em 3em 0; }
.atelier-cp__holder { position: relative; aspect-ratio: 4 / 5; }
.atelier-cp__ring { position: absolute; border: 1px solid var(--cp-gold); border-bottom: 0; border-radius: 999px 999px 0 0; pointer-events: none; }
.atelier-cp__ring--1 { inset: -14px -14px 0; opacity: .75; }
.atelier-cp__ring--2 { inset: -28px -28px 0; opacity: .5; }
.atelier-cp__ring--3 { inset: -42px -42px 0; opacity: .32; }
.atelier-cp__arch { position: absolute; inset: 0; border-radius: 999px 999px 0 0; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 30% 25%, #EBDDB8, #B99A63 45%, #3A3225); box-shadow: 0 50px 90px -40px rgba(25,26,24,.6); }
.atelier-cp__arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
.atelier-cp__arch img.is-missing { opacity: 0 !important; }
.atelier-cp__shade { position: absolute; inset: 0; z-index: 2; background: linear-gradient(0deg, rgba(10,10,9,.5), transparent 42%); pointer-events: none; }
.atelier-cp__tagpill { position: absolute; top: calc(3.2em - 20px); left: 0; right: 0; z-index: 4; display: flex; justify-content: center; pointer-events: none; }
.atelier-cp__tagpill > * { pointer-events: auto; }
.atelier-cp__tagpill { gap: 0; }
.atelier-cp__tagpill::before { content: none; }
.atelier-cp__tagpill { align-items: center; }
.atelier-cp__tagpill > span, .atelier-cp__tagpill > i { }
.atelier-cp__tagpill { font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.atelier-cp__tagpill i { display: none; }
.atelier-cp__tagpill > span { display: inline-flex; align-items: center; gap: .7em; padding: .65em 1.4em; border: 1px solid rgba(185,154,99,.7); border-radius: 999px; background: var(--cp-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--cp-ink); box-shadow: 0 16px 36px -16px rgba(25,26,24,.4); white-space: nowrap; }
.atelier-cp__tagpill > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-gold); box-shadow: 0 0 0 3px rgba(185,154,99,.2); }
.atelier-cp__badge { position: absolute; z-index: 4; top: 26%; inset-inline-end: -2.8em; width: 84px; height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--cp-gold); color: #171713; box-shadow: 0 22px 46px -16px rgba(148,117,69,.7); }
.atelier-cp__badge b { font-family: var(--auto-font-heading); font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.atelier-cp__badge small { margin-top: .4em; font-size: 11px; font-weight: 700; letter-spacing: .14em; opacity: .75; }
.atelier-cp__ground { position: relative; display: block; width: 100%; max-width: 470px; height: 1px; margin-top: 0; background: linear-gradient(90deg, transparent, var(--cp-gold), transparent); }
.atelier-cp__ground::after { content: ""; position: absolute; left: 50%; top: -3px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--cp-gold); }
.atelier-cp__price { display: flex; flex-direction: column; align-items: center; gap: .3em; margin-top: 1.4em; text-align: center; font-family: var(--auto-font-heading); }
.atelier-cp__price small { color: var(--cp-muted); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-cp__pnum { display: inline-flex; align-items: baseline; gap: 6px; }
.atelier-cp__pnum em { font-style: normal; color: var(--cp-gold-deep); font-size: 22px; font-weight: 800; }
.atelier-cp__pnum b { font-size: clamp(46px, 4.6vw, 62px); font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.atelier-cp__pmeta { display: inline-flex; align-items: center; gap: .7em; margin-top: .4em; color: var(--cp-muted); font-family: var(--auto-font-body); font-size: 14px; }
.atelier-cp__pmeta i { color: var(--cp-gold-deep); }

/* Includes + note */
.atelier-cp__includes { display: flex; flex-wrap: wrap; justify-content: center; margin: 5em 0 0; padding: 2.2em 0 0; list-style: none; border-top: 1px solid var(--cp-line); }
.atelier-cp__includes li { display: inline-flex; align-items: center; gap: .9em; padding: .4em 2em; border-inline-start: 1px solid var(--cp-line); font-size: 13px; font-weight: 700; letter-spacing: .03em; }
.atelier-cp__includes li:first-child { border-inline-start: 0; }
.atelier-cp__includes li i { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--cp-gold); color: #171713; font-size: 11px; }
.atelier-cp__note { max-width: 640px; margin: 1.8em auto 0; color: var(--cp-muted); font-size: 14px; line-height: 1.9; text-align: center; }
.atelier-cp__note a { display: inline-flex; align-items: center; gap: .5em; margin-inline-start: .8em; color: var(--cp-ink); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .08em; border-bottom: 1px solid var(--cp-gold); transition: color .3s ease; }
.atelier-cp__note a:hover { color: var(--cp-gold-deep); }
.atelier-cp__note a i { font-style: normal; color: var(--cp-gold); }

/* TABLET */
@media (max-width: 1024px) {
  .atelier-cp { padding: 5em 2.5em; }
  .atelier-cp__head { margin-bottom: 34px; }
  .atelier-cp__title { font-size: clamp(30px, 4.6vw, 40px); }
  .atelier-cp__config { grid-template-columns: minmax(0, 1fr); row-gap: 3.2em; margin-top: 3em; }
  .atelier-cp__stage { position: relative; top: auto; order: -1; }
  .atelier-cp__wrap { max-width: 400px; }
  .atelier-cp__includes { margin-top: 4em; }
  .atelier-cp__includes li { padding-inline: 1.4em; }
}

/* MOBILE */
@media (max-width: 767px) {
  .atelier-cp { padding: 5em 1.5em; }
  .atelier-cp::after { width: 340px; height: 340px; bottom: -130px; inset-inline-start: -150px; }
  .atelier-cp__head { margin-bottom: 28px; }
  .atelier-cp__title { font-size: clamp(26px, 7.4vw, 32px); letter-spacing: -.045em; }
  .atelier-cp__text { font-size: 13px; }
  .atelier-cp__sizes { max-width: 100%; }
  .atelier-cp__sizes button { gap: 0; padding: .75em .85em; font-size: 12px; }
  .atelier-cp__sizes button i { display: none; }
  .atelier-cp__opt { display: none; }
  .atelier-cp__config { margin-top: 2.6em; row-gap: 2.6em; }
  .atelier-cp__wrap { max-width: 330px; padding: 2.8em 2.2em 0; }
  .atelier-cp__ring--1 { inset: -10px -10px 0; }
  .atelier-cp__ring--2 { inset: -20px -20px 0; }
  .atelier-cp__ring--3 { inset: -30px -30px 0; }
  .atelier-cp__tagpill { top: calc(2.8em - 18px); }
  .atelier-cp__badge { width: 64px; height: 64px; top: 24%; inset-inline-end: -1.6em; }
  .atelier-cp__badge b { font-size: 19px; }
  .atelier-cp__headbtn { grid-template-columns: 64px minmax(0, 1fr) auto; gap: .9em; padding: 1.25em 0; }
  .atelier-cp__yr b { font-size: 46px; }
  .atelier-cp__tn { font-size: 1.25rem; }
  .atelier-cp__td { font-size: 13px; }
  .atelier-cp__tprice b { font-size: 1.25rem; }
  .atelier-cp__detail-in { padding-inline-start: 0; }
  .atelier-cp__cta { width: 100%; }
  .atelier-cp__includes { flex-direction: column; align-items: flex-start; gap: .6em; margin-top: 3em; padding-top: 1.8em; }
  .atelier-cp__includes li { padding-inline: 0; border-inline-start: 0; }
  .atelier-cp__note { font-size: 13px; }
  .atelier-cp__note a { display: flex; width: max-content; margin: 1em auto 0; }
}

@media (prefers-reduced-motion: reduce) {
  .atelier-cp__detail, .atelier-cp__yr b { transition: none; }
}
/* =========================================================
   CERAMIC COATING | PAINT PROTECTION & GLOSS SHOWCASE (atelier-pp)
========================================================= */
.atelier-pp { --pp-gold: var(--auto-primary); --pp-gold-light: var(--auto-primary-light); --pp-gold-deep: var(--auto-primary-deep); --pp-bg: var(--auto-dark); --pp-ink: #F8F5EF; --pp-muted: #C2BFB6; --pp-line: rgba(245,241,231,.16); position: relative; isolation: isolate; padding: 6em 5em; background: var(--pp-bg); color: var(--pp-ink); overflow: hidden; overflow: clip; font-family: var(--auto-font-body); }
.atelier-pp__glow { position: absolute; z-index: -1; top: -280px; left: 50%; width: 960px; height: 960px; margin-left: -480px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.16), transparent 66%); pointer-events: none; }
.atelier-pp::after { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-end: -200px; width: 540px; height: 540px; border: 1px solid rgba(216,196,154,.16); border-radius: 50%; pointer-events: none; }
.atelier-pp__inner { width: 100%; max-width: 1280px; margin: 0 auto; }

/* Heading typography (matches page headings) */
.atelier-pp__head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.atelier-pp__kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--pp-gold-light); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-pp__kicker::before, .atelier-pp__kicker::after { content: ""; width: 28px; height: 1px; background: var(--pp-gold); }
.atelier-pp__title { margin: 0 0 14px; color: var(--pp-ink); font-family: var(--auto-font-heading); font-size: clamp(34px,4vw,54px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; text-wrap: balance; }
.atelier-pp__title span { color: var(--pp-gold); }
.atelier-pp__text { margin: 0; color: var(--pp-muted); font-size: 14px; line-height: 1.9; }

/* Chain */
.atelier-pp__chain { --d: clamp(260px, 31vw, 400px); display: flex; justify-content: center; align-items: flex-start; }
.atelier-pp__link { position: relative; flex: 0 0 var(--d); width: var(--d); margin-inline: calc(var(--d) * -.04); outline: none; }
.atelier-pp__link:nth-child(2) { z-index: 2; }
.atelier-pp__disc { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--pp-bg); box-shadow: 0 0 0 10px var(--pp-bg), 0 0 0 11px rgba(185,154,99,.55), 0 50px 90px -40px rgba(0,0,0,.9); transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .5s ease, box-shadow .5s ease; }
.atelier-pp__media { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 30% 25%, #EBDDB8, #B99A63 45%, #3A3225); }
.atelier-pp__link:nth-child(2) .atelier-pp__media { background: radial-gradient(circle at 70% 25%, #5A5446, #25251F 55%, #0F0F0D); }
.atelier-pp__media img { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; transition: opacity .3s ease, filter .6s ease; filter: saturate(.92); }
.atelier-pp__media img.is-missing { opacity: 0; }
.atelier-pp__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10,10,9,.6), transparent 48%), radial-gradient(circle at 50% 50%, transparent 56%, rgba(10,10,9,.34) 100%); pointer-events: none; }
.atelier-pp__sheen { position: absolute; top: -10%; bottom: -10%; left: 0; z-index: 2; width: 38%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: translateX(-170%) skewX(-14deg); pointer-events: none; }
.atelier-pp__stat { position: absolute; left: 0; right: 0; bottom: 11%; z-index: 3; width: max-content; margin-inline: auto; display: inline-flex; align-items: center; gap: .7em; padding: .6em 1.3em; border: 1px solid rgba(216,196,154,.6); border-radius: 999px; background: rgba(20,20,18,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #F8F5EF; font-size: 12px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; pointer-events: none; }
.atelier-pp__stat i { width: 6px; height: 6px; border-radius: 50%; background: var(--pp-gold-light); box-shadow: 0 0 0 3px rgba(216,196,154,.22); }

.atelier-pp__link.is-hot .atelier-pp__disc { transform: scale(1.04); box-shadow: 0 0 0 10px var(--pp-bg), 0 0 0 11px var(--pp-gold), 0 60px 100px -36px rgba(0,0,0,.95); }
.atelier-pp__link.is-hot .atelier-pp__media img { filter: saturate(1.08); }
.atelier-pp__link.is-dim .atelier-pp__disc, .atelier-pp__link.is-dim .atelier-pp__cap { opacity: .45; }
.atelier-pp__link:focus-visible .atelier-pp__disc { box-shadow: 0 0 0 10px var(--pp-bg), 0 0 0 12px var(--pp-gold-light); }

.atelier-pp__cap { padding: 2.4em calc(var(--d) * .1) 0; text-align: center; transition: opacity .5s ease; }
.atelier-pp__num { color: var(--pp-gold); font-family: var(--auto-font-heading); font-size: 13px; font-weight: 800; letter-spacing: .17em; }
.atelier-pp__ctitle { margin: .6em 0 0; color: var(--pp-ink); font-family: var(--auto-font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.2; }
.atelier-pp__ctext { margin: .8em 0 0; color: var(--pp-muted); font-size: 14px; line-height: 1.85; }

/* Protection life */
.atelier-pp__life { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: center; gap: 5em; margin-top: 6em; padding-top: 3.8em; border-top: 1px solid var(--pp-line); }
.atelier-pp__life-title { margin: 0 0 .7em; color: var(--pp-ink); font-family: var(--auto-font-heading); font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.15; }
.atelier-pp__life-text { margin: 0; color: var(--pp-muted); font-size: 14px; line-height: 1.9; }
.atelier-pp__life-note { display: block; margin-top: 1.4em; padding-inline-start: 1.2em; border-inline-start: 1px solid var(--pp-gold); color: var(--pp-muted); font-size: 13px; line-height: 1.7; }
.atelier-pp__rows { margin: 0; padding: 0; list-style: none; }
.atelier-pp__row { display: grid; grid-template-columns: 150px minmax(0,1fr) 150px; align-items: center; gap: 1.6em; padding: 1.5em 0; }
.atelier-pp__rname { color: var(--pp-ink); font-family: var(--auto-font-heading); font-size: 1rem; font-weight: 600; letter-spacing: -.02em; }
.atelier-pp__rval { color: var(--pp-muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-align: end; }
.atelier-pp__track { position: relative; display: block; height: 1px; background: var(--pp-line); }
.atelier-pp__fill { position: absolute; top: -1px; inset-inline-start: 0; width: var(--w); height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--pp-gold-deep), var(--pp-gold-light)); transform-origin: left; }
.atelier-pp__dot { position: absolute; top: -6px; inset-inline-start: var(--w); width: 13px; height: 13px; margin-inline-start: -6.5px; border: 1.5px solid var(--pp-gold); border-radius: 50%; background: var(--pp-bg); }
.atelier-pp__row--hero .atelier-pp__rname { color: var(--pp-gold); }
.atelier-pp__row--hero .atelier-pp__rval { color: var(--pp-gold-light); }
.atelier-pp__row--hero .atelier-pp__fill { box-shadow: 0 0 16px rgba(185,154,99,.5); }
.atelier-pp__row--hero .atelier-pp__dot { background: var(--pp-gold); box-shadow: 0 0 0 5px rgba(185,154,99,.2); }

@media (max-width: 1024px) {
  .atelier-pp { padding: 5em 2.5em; }
  .atelier-pp__head { margin-bottom: 48px; }
  .atelier-pp__title { font-size: clamp(30px, 4.6vw, 40px); }
  .atelier-pp__chain { --d: clamp(210px, 29vw, 300px); }
  .atelier-pp__cap { padding-top: 2em; }
  .atelier-pp__ctitle { font-size: 1.25rem; }
  .atelier-pp__ctext { font-size: 13px; }
  .atelier-pp__life { grid-template-columns: minmax(0,1fr); gap: 2.4em; margin-top: 5em; padding-top: 3em; }
  .atelier-pp__life-copy { max-width: 560px; }
}
@media (max-width: 767px) {
  .atelier-pp { padding: 5em 1.5em; }
  .atelier-pp__glow { width: 560px; height: 560px; margin-left: -280px; }
  .atelier-pp__head { margin-bottom: 38px; }
  .atelier-pp__title { font-size: clamp(26px, 7.4vw, 32px); letter-spacing: -.045em; }
  .atelier-pp__text { font-size: 13px; }
  .atelier-pp__chain { --d: min(72vw, 290px); flex-direction: column; align-items: center; gap: 3.4em; }
  .atelier-pp__link { flex: 0 0 auto; margin-inline: 0; }
  .atelier-pp__disc { box-shadow: 0 0 0 7px var(--pp-bg), 0 0 0 8px rgba(185,154,99,.55), 0 40px 70px -36px rgba(0,0,0,.9); }
  .atelier-pp__cap { padding: 2em 0 0; }
  .atelier-pp__stat { bottom: 10%; padding: .5em 1.1em; letter-spacing: .08em; }
  .atelier-pp__row { grid-template-columns: minmax(0,1fr) auto; gap: .9em 1em; padding: 1.2em 0; }
  .atelier-pp__track { grid-column: 1 / -1; grid-row: 2; }
  .atelier-pp__rval { grid-row: 1; grid-column: 2; }
  .atelier-pp__rname { grid-row: 1; grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .atelier-pp__disc { transition: none; } }


/* =========================================================
   CERAMIC COATING | APPLICATION PROCESS (atelier-ap)
========================================================= */
.atelier-ap { --ap-gold: var(--auto-primary); --ap-gold-light: var(--auto-primary-light); --ap-gold-deep: var(--auto-primary-deep); --ap-bg: var(--auto-paper); --ap-ink: var(--auto-ink); --ap-muted: var(--auto-muted); --ap-line: var(--auto-line); position: relative; isolation: isolate; padding: 6em 5em; background: var(--ap-bg); color: var(--ap-ink); overflow: hidden; overflow: clip; font-family: var(--auto-font-body); }
.atelier-ap::before { content: ""; position: absolute; z-index: -1; top: -200px; inset-inline-start: -220px; width: 580px; height: 580px; border: 1px solid rgba(185,154,99,.22); border-radius: 50%; pointer-events: none; }
.atelier-ap::after { content: ""; position: absolute; z-index: -1; bottom: -240px; inset-inline-end: -200px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.14), transparent 68%); pointer-events: none; }
.atelier-ap__inner { width: 100%; max-width: 1280px; margin: 0 auto; }

.atelier-ap__head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.atelier-ap__kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--ap-gold-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-ap__kicker::before, .atelier-ap__kicker::after { content: ""; width: 28px; height: 1px; background: var(--ap-gold); }
.atelier-ap__title { margin: 0 0 14px; font-family: var(--auto-font-heading); font-size: clamp(34px,4vw,54px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; text-wrap: balance; }
.atelier-ap__title span { color: var(--ap-gold); }
.atelier-ap__text { margin: 0; color: var(--ap-muted); font-size: 14px; line-height: 1.9; }

/* Rail */
.atelier-ap__rail { position: relative; padding-top: 74px; }
.atelier-ap__track { position: absolute; top: 96px; inset-inline: calc(100% / 14); height: 1px; background: var(--ap-line); pointer-events: none; }
.atelier-ap__fill { position: absolute; top: -1px; left: 0; width: 100%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ap-gold-deep), var(--ap-gold)); transform: scaleX(0); transform-origin: left; }
.atelier-ap__car { position: absolute; top: 0; left: 0; z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; background: var(--ap-gold); color: #171713; box-shadow: 0 14px 30px -12px rgba(148,117,69,.7); pointer-events: none; }
.atelier-ap__car svg { width: 28px; height: 28px; }
.atelier-ap__car::after { content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 28px; background: linear-gradient(to bottom, var(--ap-gold), transparent); }
.atelier-ap__nodes { display: flex; margin: 0; padding: 0; list-style: none; }
.atelier-ap__nodes li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.atelier-ap__node { position: relative; width: 44px; height: 44px; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; background: var(--ap-bg); color: var(--ap-muted); font-family: var(--auto-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background .4s ease, color .4s ease, border-color .4s ease; }
.atelier-ap__node:hover { border-color: var(--ap-gold); color: var(--ap-gold-deep); }
.atelier-ap__node:focus-visible { outline: 2px solid var(--ap-gold); outline-offset: 3px; }
.atelier-ap__node.is-done { border-color: var(--ap-gold); color: var(--ap-gold-deep); background: rgba(185,154,99,.16); }
.atelier-ap__node.is-active { border-color: var(--ap-gold); background: var(--ap-gold); color: #171713; }
.atelier-ap__node.is-active::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--ap-gold); border-radius: 50%; animation: atelierApPulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes atelierApPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.atelier-ap__lbl { margin-top: .9em; color: var(--ap-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; transition: color .4s ease; }
.atelier-ap__lbl.is-active { color: var(--ap-ink); }

/* Stage */
.atelier-ap__stage { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: center; gap: 5em; margin-top: 4.5em; }
.atelier-ap__visual { position: relative; width: min(100%, 470px); aspect-ratio: 1 / 1; margin-inline: auto; }
.atelier-ap__ghost { position: absolute; inset: 0; border-radius: 999px 18px 999px 18px; pointer-events: none; }
.atelier-ap__ghost--line { border: 1px solid rgba(185,154,99,.55); transform: translate(18px, 18px); }
.atelier-ap__ghost--dash { inset: -14px; border: 1px dashed rgba(185,154,99,.4); }
.atelier-ap__leaf { position: absolute; inset: 0; border-radius: 999px 18px 999px 18px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 30% 25%, #EBDDB8, #B99A63 45%, #3A3225); box-shadow: 0 50px 90px -40px rgba(25,26,24,.6); }
.atelier-ap__leaf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.atelier-ap__leaf img:first-of-type { opacity: 1; }
.atelier-ap__leaf img.is-missing { opacity: 0 !important; }
.atelier-ap__leafshade { position: absolute; inset: 0; z-index: 5; background: linear-gradient(0deg, rgba(10,10,9,.45), transparent 42%); pointer-events: none; }
.atelier-ap__badge { position: absolute; z-index: 6; bottom: -1.4em; inset-inline-start: -1.2em; width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: var(--ap-gold); color: #171713; box-shadow: 0 22px 46px -16px rgba(148,117,69,.7); }
.atelier-ap__badge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.atelier-ap__ring-bg { fill: none; stroke: rgba(23,23,19,.22); stroke-width: 1.5; }
.atelier-ap__ring { fill: none; stroke: #171713; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 238.76; stroke-dashoffset: 238.76; }
.atelier-ap__badge b { position: relative; font-family: var(--auto-font-heading); font-size: 24px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }

.atelier-ap__panels { display: grid; }
.atelier-ap__panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: none; }
.atelier-ap__panel.is-active { visibility: visible; opacity: 1; }
.atelier-ap__pkicker { display: block; color: var(--ap-gold-deep); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.atelier-ap__ptitle { margin: .6em 0 0; font-family: var(--auto-font-heading); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.05em; line-height: 1.12; }
.atelier-ap__ptitle span { color: var(--ap-gold); }
.atelier-ap__ptext { max-width: 520px; margin: 1em 0 0; color: var(--ap-muted); font-size: 14px; line-height: 1.9; }
.atelier-ap__points { margin: 1.5em 0 0; padding: 0; list-style: none; max-width: 520px; }
.atelier-ap__points li { position: relative; padding: .8em 0; padding-inline-start: 1.8em; border-top: 1px solid var(--ap-line); font-size: 14px; line-height: 1.6; }
.atelier-ap__points li:last-child { border-bottom: 1px solid var(--ap-line); }
.atelier-ap__points li::before { content: ""; position: absolute; top: 1.25em; inset-inline-start: 0; width: 8px; height: 8px; border: 1.5px solid var(--ap-gold); border-radius: 50%; }
.atelier-ap__tags { display: flex; flex-wrap: wrap; gap: .6em; margin-top: 1.4em; }
.atelier-ap__tags span { display: inline-flex; padding: .5em 1.1em; border: 1px solid rgba(185,154,99,.6); border-radius: 999px; color: var(--ap-ink); font-size: 12px; font-weight: 700; letter-spacing: .1em; }

.atelier-ap__nav { display: flex; align-items: center; gap: .8em; margin-top: 2.2em; direction: ltr; }
.atelier-ap__arrow { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid rgba(185,154,99,.7); border-radius: 50%; background: transparent; color: var(--ap-gold-deep); font-size: 18px; cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease; }
.atelier-ap__arrow:hover { background: var(--ap-gold); color: #171713; transform: scale(1.06); }
.atelier-ap__arrow:focus-visible { outline: 2px solid var(--ap-gold); outline-offset: 3px; }
.atelier-ap__count { margin-inline-start: 1.2em; color: var(--ap-muted); font-family: var(--auto-font-heading); font-size: 13px; font-weight: 700; letter-spacing: .12em; }

@media (max-width: 1024px) {
  .atelier-ap { padding: 5em 2.5em; }
  .atelier-ap__head { margin-bottom: 36px; }
  .atelier-ap__title { font-size: clamp(30px, 4.6vw, 40px); }
  .atelier-ap__stage { grid-template-columns: minmax(0,1fr); gap: 4em; margin-top: 3.5em; }
  .atelier-ap__visual { width: min(100%, 400px); }
  .atelier-ap__ptext, .atelier-ap__points { max-width: 620px; }
}
@media (max-width: 767px) {
  .atelier-ap { padding: 5em 1.5em; }
  .atelier-ap::before { width: 340px; height: 340px; top: -130px; inset-inline-start: -150px; }
  .atelier-ap__head { margin-bottom: 30px; }
  .atelier-ap__title { font-size: clamp(26px, 7.4vw, 32px); letter-spacing: -.045em; }
  .atelier-ap__text { font-size: 13px; }
  .atelier-ap__rail { padding-top: 62px; }
  .atelier-ap__track { top: 80px; }
  .atelier-ap__car { width: 38px; height: 38px; margin-left: -19px; }
  .atelier-ap__car svg { width: 23px; height: 23px; }
  .atelier-ap__car::after { height: 24px; }
  .atelier-ap__node { width: 36px; height: 36px; font-size: 12px; letter-spacing: 0; }
  .atelier-ap__lbl { display: none; }
  .atelier-ap__stage { gap: 3.4em; margin-top: 2.6em; }
  .atelier-ap__visual { width: min(86%, 320px); }
  .atelier-ap__ghost--line { transform: translate(12px, 12px); }
  .atelier-ap__ghost--dash { inset: -10px; }
  .atelier-ap__badge { width: 68px; height: 68px; bottom: -1.2em; inset-inline-start: -.8em; }
  .atelier-ap__badge b { font-size: 19px; }
  .atelier-ap__ptitle { font-size: clamp(26px, 7.4vw, 32px); }
  .atelier-ap__tags span { letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) { .atelier-ap__node.is-active::after { animation: none; } }


/* =========================================================
   CERAMIC COATING | MAINTENANCE GUIDE (atelier-mg)
========================================================= */
.atelier-mg { --mg-gold: var(--auto-primary); --mg-gold-light: var(--auto-primary-light); --mg-gold-deep: var(--auto-primary-deep); --mg-bg: var(--auto-surface); --mg-ink: var(--auto-ink); --mg-muted: var(--auto-muted); --mg-line: var(--auto-line); position: relative; isolation: isolate; padding: 6em 5em; background: var(--mg-bg); color: var(--mg-ink); overflow: hidden; overflow: clip; font-family: var(--auto-font-body); }
.atelier-mg::before { content: ""; position: absolute; z-index: -1; top: 24%; inset-inline-start: -240px; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(185,154,99,.14), transparent 68%); pointer-events: none; }
.atelier-mg::after { content: ""; position: absolute; z-index: -1; bottom: -220px; inset-inline-end: -200px; width: 520px; height: 520px; border: 1px solid rgba(185,154,99,.2); border-radius: 50%; pointer-events: none; }
.atelier-mg__inner { width: 100%; max-width: 1280px; margin: 0 auto; }

.atelier-mg__head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.atelier-mg__kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--mg-gold-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-mg__kicker::before, .atelier-mg__kicker::after { content: ""; width: 28px; height: 1px; background: var(--mg-gold); }
.atelier-mg__title { margin: 0 0 14px; font-family: var(--auto-font-heading); font-size: clamp(34px,4vw,54px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; text-wrap: balance; }
.atelier-mg__title span { color: var(--mg-gold); }
.atelier-mg__text { margin: 0; color: var(--mg-muted); font-size: 14px; line-height: 1.9; }

/* Care layout */
.atelier-mg__care { display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); align-items: center; gap: 5em; }
.atelier-mg__dialwrap { width: 100%; }
.atelier-mg__dial { position: relative; width: min(100%, 500px); aspect-ratio: 1 / 1; margin-inline: auto; direction: ltr; }
.atelier-mg__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.atelier-mg__spin { transform-origin: 100px 100px; animation: atelierMgSpin 80s linear infinite; }
@keyframes atelierMgSpin { to { transform: rotate(360deg); } }
.atelier-mg__outer { fill: none; stroke: var(--mg-gold); stroke-width: .6; stroke-dasharray: 1 3.4; opacity: .7; }
.atelier-mg__arc-bg { fill: none; stroke: rgba(185,154,99,.3); stroke-width: 1.6; }
.atelier-mg__arc { fill: none; stroke: var(--mg-gold); stroke-width: 3.4; transition: stroke-width .4s ease, opacity .4s ease; opacity: .55; }
.atelier-mg__arc.is-active { stroke-width: 5; opacity: 1; }

.atelier-mg__core { position: absolute; inset: 20%; border-radius: 50%; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 30% 25%, #EBDDB8, #B99A63 45%, #3A3225); box-shadow: 0 40px 80px -36px rgba(25,26,24,.6); }
.atelier-mg__core img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.atelier-mg__core img:first-of-type { opacity: 1; }
.atelier-mg__core img.is-missing { opacity: 0 !important; }
.atelier-mg__coreshade { position: absolute; inset: 0; z-index: 4; background: radial-gradient(circle, rgba(10,10,9,.34), rgba(10,10,9,.62)); pointer-events: none; }
.atelier-mg__corelabel { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; padding: 0 12%; color: #F8F5EF; text-align: center; pointer-events: none; }
.atelier-mg__corelabel small { color: var(--mg-gold-light); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-mg__corelabel b { font-family: var(--auto-font-heading); font-size: clamp(22px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }

.atelier-mg__node { position: absolute; z-index: 6; left: var(--x); top: var(--y); width: 48px; height: 48px; margin: -24px 0 0 -24px; display: grid; place-items: center; border: 1px solid rgba(185,154,99,.65); border-radius: 50%; background: var(--mg-bg); color: var(--mg-gold-deep); font-size: 15px; cursor: pointer; transition: background .35s ease, color .35s ease, transform .35s ease; }
.atelier-mg__node:hover { background: rgba(185,154,99,.2); transform: scale(1.08); }
.atelier-mg__node:focus-visible { outline: 2px solid var(--mg-gold); outline-offset: 3px; }
.atelier-mg__node.is-active { background: var(--mg-gold); color: #171713; transform: scale(1.1); }
.atelier-mg__node.is-active::after { content: ""; position: absolute; inset: -1px; border: 1px solid var(--mg-gold); border-radius: 50%; animation: atelierMgPulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes atelierMgPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.atelier-mg__node::before { content: attr(data-label); position: absolute; bottom: calc(100% + 10px); left: 50%; padding: .45em 1em; border: 1px solid rgba(185,154,99,.6); border-radius: 999px; background: var(--mg-bg); color: var(--mg-ink); font-family: var(--auto-font-body); font-size: 12px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.atelier-mg__node:hover::before, .atelier-mg__node:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }

/* Panels */
.atelier-mg__panels { display: grid; }
.atelier-mg__panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.atelier-mg__panel.is-active { visibility: visible; opacity: 1; }
.atelier-mg__pkicker { display: block; color: var(--mg-gold-deep); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }
.atelier-mg__ptitle { margin: .6em 0 0; font-family: var(--auto-font-heading); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.05em; line-height: 1.12; }
.atelier-mg__ptitle span { color: var(--mg-gold); }
.atelier-mg__ptext { max-width: 520px; margin: 1em 0 0; color: var(--mg-muted); font-size: 14px; line-height: 1.9; }
.atelier-mg__steps { max-width: 520px; margin: 1.5em 0 0; padding: 0; list-style: none; counter-reset: mgstep; }
.atelier-mg__steps li { position: relative; padding: .85em 0; padding-inline-start: 3em; border-top: 1px solid var(--mg-line); font-size: 14px; line-height: 1.65; counter-increment: mgstep; }
.atelier-mg__steps li:last-child { border-bottom: 1px solid var(--mg-line); }
.atelier-mg__steps li::before { content: counter(mgstep, decimal-leading-zero); position: absolute; top: .85em; inset-inline-start: 0; color: var(--mg-gold); font-family: var(--auto-font-heading); font-size: 13px; font-weight: 800; letter-spacing: .08em; line-height: 1.9; }
.atelier-mg__tip { max-width: 520px; margin: 1.4em 0 0; padding-inline-start: 1.2em; border-inline-start: 1px solid var(--mg-gold); color: var(--mg-muted); font-size: 14px; line-height: 1.75; }
.atelier-mg__tip b { margin-inline-end: .8em; color: var(--mg-gold-deep); font-size: 12px; font-weight: 700; letter-spacing: .14em; }

/* Do / Avoid */
.atelier-mg__rules { display: grid; grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr); gap: 4em; margin-top: 6em; padding-top: 4em; border-top: 1px solid var(--mg-line); }
.atelier-mg__rkicker { display: block; color: var(--mg-gold-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.atelier-mg__rtitle { margin: .5em 0 1em; font-family: var(--auto-font-heading); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.05em; line-height: 1.1; }
.atelier-mg__rule ul { margin: 0; padding: 0; list-style: none; }
.atelier-mg__rule li { display: flex; align-items: center; gap: 1em; padding: 1em 0; border-top: 1px solid var(--mg-line); font-size: 14px; line-height: 1.6; }
.atelier-mg__rule li:last-child { border-bottom: 1px solid var(--mg-line); }
.atelier-mg__rule li i { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; font-size: 11px; }
.atelier-mg__rule:first-child li i { background: var(--mg-gold); color: #171713; }
.atelier-mg__rule:last-child li i { border: 1px solid var(--mg-gold-deep); color: var(--mg-gold-deep); }
.atelier-mg__divider { position: relative; display: block; width: 1px; background: linear-gradient(to bottom, transparent, var(--mg-gold) 20%, var(--mg-gold) 80%, transparent); }
.atelier-mg__divider i { position: absolute; left: -5px; top: 0; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0, var(--mg-gold-light) 40%, var(--mg-gold) 100%); box-shadow: 0 0 0 4px rgba(185,154,99,.18); animation: atelierMgDrop 5s ease-in-out infinite; }
@keyframes atelierMgDrop { 0% { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 11px); opacity: 0; } }

.atelier-mg__cta-row { display: flex; flex-direction: column; align-items: center; gap: 1.4em; margin-top: 4.5em; text-align: center; }
.atelier-mg__cta-row p { margin: 0; color: var(--mg-muted); font-size: 14px; line-height: 1.8; }
.atelier-mg__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.6em; padding: .5em; padding-inline: 1.7em .5em; border: 1px solid rgba(185,154,99,.65); border-radius: 999px; color: var(--mg-ink); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .08em; transition: background .3s ease, color .3s ease; }
.atelier-mg__cta i { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--mg-gold); color: #171713; font-size: 18px; font-style: normal; transition: transform .3s ease, background .3s ease, color .3s ease; }
.atelier-mg__cta:hover { background: var(--mg-gold); color: #171713; }
.atelier-mg__cta:hover i { transform: translateX(3px); background: #171713; color: var(--mg-gold-light); }

@media (max-width: 1024px) {
  .atelier-mg { padding: 5em 2.5em; }
  .atelier-mg__head { margin-bottom: 38px; }
  .atelier-mg__title { font-size: clamp(30px, 4.6vw, 40px); }
  .atelier-mg__care { grid-template-columns: minmax(0,1fr); gap: 3.6em; }
  .atelier-mg__dial { width: min(100%, 430px); }
  .atelier-mg__ptext, .atelier-mg__steps, .atelier-mg__tip { max-width: 620px; }
  .atelier-mg__rules { gap: 2.5em; margin-top: 5em; padding-top: 3.4em; }
}
@media (max-width: 767px) {
  .atelier-mg { padding: 5em 1.5em; }
  .atelier-mg::after { width: 340px; height: 340px; bottom: -130px; inset-inline-end: -150px; }
  .atelier-mg__head { margin-bottom: 30px; }
  .atelier-mg__title { font-size: clamp(26px, 7.4vw, 32px); letter-spacing: -.045em; }
  .atelier-mg__text { font-size: 13px; }
  .atelier-mg__care { gap: 3em; }
  .atelier-mg__dial { width: min(88%, 340px); }
  .atelier-mg__node { width: 40px; height: 40px; margin: -20px 0 0 -20px; font-size: 13px; }
  .atelier-mg__node::before { display: none; }
  .atelier-mg__core { inset: 21%; }
  .atelier-mg__corelabel small { font-size: 11px; letter-spacing: .12em; }
  .atelier-mg__corelabel b { font-size: 17px; }
  .atelier-mg__ptitle { font-size: clamp(26px, 7.4vw, 32px); }
  .atelier-mg__rules { grid-template-columns: minmax(0,1fr); gap: 2.2em; margin-top: 4em; padding-top: 2.6em; }
  .atelier-mg__divider { width: 100%; height: 1px; background: linear-gradient(to right, transparent, var(--mg-gold) 20%, var(--mg-gold) 80%, transparent); }
  .atelier-mg__divider i { left: 0; top: -5px; animation: atelierMgDropX 5s ease-in-out infinite; }
  .atelier-mg__cta-row { margin-top: 3.4em; }
  .atelier-mg__cta { width: 100%; }
}
@keyframes atelierMgDropX { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 11px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .atelier-mg__spin, .atelier-mg__node.is-active::after, .atelier-mg__divider i { animation: none; }
}
/* ============================================================
   AUTOMOTIVE ATELIER | INTERIOR DETAILING PAGE (interior-detailing.html)
   Hero | Specialized Treatments | Packages
============================================================ */
.intd-hero, .intd-treat, .intd-pkg { position: relative; overflow: hidden; overflow: clip; padding: 6em 5em; font-family: var(--auto-font-body); }
.intd-inner { position: relative; z-index: 2; width: 100%; max-width: 1440px; margin-inline: auto; }
.intd-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.intd-img.is-missing { opacity: 0; }

/* Shared headings (same typography as .pr-kicker / .pr-title) */
.intd-head { max-width: 640px; margin: 0 0 4em; }
.intd-head.is-center { margin-inline: auto; margin-bottom: 3.2em; text-align: center; }
.intd-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--auto-primary-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.intd-kicker::before, .intd-head.is-center .intd-kicker::after { content: ""; width: 28px; height: 1px; background: var(--auto-primary); }
.intd-title { margin: 0 0 14px; font-family: var(--auto-font-heading); font-size: clamp(34px,4vw,54px); font-weight: 800; letter-spacing: -.055em; line-height: 1.12; text-wrap: balance; }
.intd-title span { color: var(--auto-primary); }
.intd-text { max-width: 560px; margin: 0; color: var(--auto-muted); font-size: 14px; line-height: 1.9; }
.intd-head.is-center .intd-text { margin-inline: auto; }

/* ---------- SPECIALIZED TREATMENTS ---------- */
.intd-treat { background: var(--auto-paper); }
.intd-treat::before { content: ""; position: absolute; top: -240px; inset-inline-end: -220px; width: 640px; height: 640px; border-radius: 50%; border: 1px solid var(--auto-line); pointer-events: none; }
.intd-treat::after { content: ""; position: absolute; bottom: -200px; inset-inline-start: -160px; width: 420px; height: 420px; border-radius: 50%; border: 1px dashed rgba(185,154,99,.35); pointer-events: none; }
.intd-treat-body { display: flex; align-items: flex-start; gap: clamp(40px,6vw,110px); }
.intd-stage-wrap { position: sticky; top: 130px; flex: 0 0 min(46%,540px); }
.intd-stage { position: relative; width: 100%; aspect-ratio: 1; }
.intd-ring-a, .intd-ring-b { position: absolute; border-radius: 50%; }
.intd-ring-a { inset: 0; border: 1px dashed rgba(185,154,99,.6); }
.intd-dot { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--auto-primary); box-shadow: 0 0 14px rgba(185,154,99,.85); }
.intd-ring-b { inset: 3.5%; border: 1px solid var(--auto-line); }
.intd-stage-disc { position: absolute; inset: 7%; overflow: hidden; border-radius: 50%; background: linear-gradient(160deg,#cdbd98,#4a4030); box-shadow: 0 30px 70px rgba(20,20,18,.24); }
.intd-slide { position: absolute; inset: 0; opacity: 0; transform: scale(1.14); transition: opacity .9s ease, transform 1.4s cubic-bezier(.2,.7,.2,1); }
.intd-slide.is-active { opacity: 1; transform: scale(1); }
.intd-stage-num { position: absolute; top: 2%; inset-inline-end: -2%; color: transparent; -webkit-text-stroke: 1px var(--auto-primary); font-family: var(--auto-font-heading); font-size: clamp(64px,8vw,112px); font-weight: 800; letter-spacing: -.05em; line-height: 1; pointer-events: none; }
.intd-stage-tag { position: absolute; z-index: 2; bottom: 1%; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; background: var(--auto-dark); border: 1px solid rgba(185,154,99,.5); color: #F4EFE3; font-size: 11px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.intd-stage-tag i { color: var(--auto-primary-light); }

.intd-index { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--auto-line); }
.intd-item { position: relative; border-bottom: 1px solid var(--auto-line); }
.intd-item-btn { width: 100%; display: flex; align-items: center; gap: 22px; padding: 26px 0; border: 0; background: transparent; color: var(--auto-ink); text-align: start; cursor: pointer; }
.intd-item-no { min-width: 30px; color: var(--auto-muted); font-family: var(--auto-font-heading); font-size: 13px; font-weight: 800; letter-spacing: .14em; transition: color var(--auto-transition); }
.intd-item-name { flex: 1; min-width: 0; font-family: var(--auto-font-heading); font-size: clamp(20px,1.1vw,30px); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; opacity: .5; transition: opacity var(--auto-transition), transform var(--auto-transition); }
.intd-item-arrow { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid rgba(185,154,99,.5); border-radius: 50%; color: var(--auto-primary-deep); font-size: 13px; transition: background var(--auto-transition), color var(--auto-transition), transform .4s ease; }
.intd-item-btn:hover .intd-item-name, .intd-item.is-active .intd-item-name { opacity: 1; }
.intd-item-btn:hover .intd-item-name { transform: translateX(6px); }
.intd-item.is-active .intd-item-no { color: var(--auto-primary-deep); }
.intd-item.is-active .intd-item-name { transform: none; }
.intd-item.is-active .intd-item-arrow { background: var(--auto-primary); color: #171713; transform: rotate(45deg); }
.intd-item-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease; }
.intd-item.is-active .intd-item-body { grid-template-rows: 1fr; }
.intd-item-body > div { min-height: 0; overflow: hidden; padding-inline-start: 52px; padding-inline-end: 62px; }
.intd-item-body p { margin: 0 0 14px; color: var(--auto-muted); font-size: 14px; line-height: 1.85; }
.intd-item-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 26px; color: var(--auto-primary-deep); font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.intd-item-meta i { margin-inline-end: 8px; }
.intd-item-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.intd-item-line i { display: block; width: 100%; height: 100%; background: var(--auto-primary); transform: scaleX(0); transform-origin: 0 50%; }
.intd-item.is-active .intd-item-line i { transform: scaleX(1); }

/* ---------- PACKAGES ---------- */
.intd-pkg { background: var(--auto-dark); color: #F1EEE7; padding-top: 7.5em; }
.intd-pkg::before { top: -1px; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.intd-pkg-glow { position: absolute; top: 18%; inset-inline-end: -220px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle,rgba(185,154,99,.2),transparent 68%); pointer-events: none; }
.intd-pkg .intd-kicker { color: var(--auto-primary-light); }
.intd-pkg .intd-kicker::before, .intd-pkg .intd-head.is-center .intd-kicker::after { background: var(--auto-primary-light); }
.intd-pkg .intd-title { color: #FAF7F0; }
.intd-pkg .intd-title span { color: var(--auto-primary-light); }
.intd-pkg .intd-text { color: #B5B0A5; }
.intd-pkg .pr-btn.ghost { color: #F4F0E6; border-color: rgba(216,196,154,.5); }
.intd-pkg .pr-btn.ghost:hover { color: #171713; }

.intd-controls { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 4em; }
.intd-switch { position: relative; display: inline-flex; padding: 6px; border-radius: 999px; border: 1px solid rgba(216,196,154,.3); background: rgba(255,255,255,.04); }
.intd-glider { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: var(--auto-primary); box-shadow: 0 8px 24px rgba(185,154,99,.35); transition: transform .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1); }
.intd-switch button { position: relative; z-index: 1; padding: 13px 30px; border: 0; border-radius: 999px; background: transparent; color: #CFCABD; font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: color var(--auto-transition); }
.intd-switch button.is-active { color: #171713; }
.intd-size { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
.intd-size button { display: inline-flex; align-items: center; gap: 9px; padding: 8px 2px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: #A9A59A; font-size: 12px; font-weight: 700; letter-spacing: .06em; cursor: pointer; transition: color var(--auto-transition), border-color var(--auto-transition); }
.intd-size button:hover { color: #F4F0E6; }
.intd-size button.is-active { color: var(--auto-primary-light); border-color: var(--auto-primary-light); }

.intd-panel { display: flex; align-items: center; justify-content: center; gap: clamp(40px,7vw,120px); }
.intd-panel[hidden] { display: none; }
.intd-ring-wrap { position: relative; flex: 0 0 clamp(300px,34vw,440px); aspect-ratio: 1; }
.intd-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.intd-ring-svg circle { fill: none; }
.intd-ring-track { stroke: rgba(255,255,255,.1); stroke-width: 1.5; }
.intd-ring-dash { stroke: rgba(216,196,154,.3); stroke-width: .6; stroke-dasharray: 2 5; }
.intd-ring-fill { stroke: var(--auto-primary); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 578; }
.intd-ring-core { position: absolute; inset: 11%; overflow: hidden; border-radius: 50%; background: linear-gradient(160deg,#4a4030,#14130f); }
.intd-ring-core::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle,rgba(14,15,13,.5),rgba(14,15,13,.8)); }
.intd-price { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #FAF7F0; }
.intd-price small { color: var(--auto-primary-light); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.intd-price span { display: flex; align-items: flex-start; justify-content: center; margin: 6px 0; font-family: var(--auto-font-heading); font-weight: 800; line-height: 1; }
.intd-price em { margin-top: 8px; margin-inline-end: 4px; color: var(--auto-primary-light); font-size: 22px; font-style: normal; }
.intd-price b { font-size: clamp(52px,6vw,78px); letter-spacing: -.06em; }

.intd-pkg-info { flex: 1 1 auto; min-width: 0; max-width: 520px; }
.intd-badge { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 14px; color: var(--auto-primary-light); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.intd-badge::before { content: ""; width: 28px; height: 1px; background: var(--auto-primary-light); }
.intd-pkg-name { margin: 0 0 12px; color: #FAF7F0; font-family: var(--auto-font-heading); font-size: clamp(28px,3.2vw,44px); font-weight: 800; letter-spacing: -.05em; line-height: 1.12; }
.intd-pkg-desc { margin: 0 0 16px; color: #B5B0A5; font-size: 14px; line-height: 1.85; }
.intd-pkg-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 22px; color: var(--auto-primary-light); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.intd-pkg-meta i { margin-inline-end: 8px; }
.intd-feats { margin: 0 0 30px; padding: 0; list-style: none; border-top: 1px solid rgba(245,241,231,.13); }
.intd-feats li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(245,241,231,.1); color: #E9E5DB; font-size: 14px; }
.intd-feats li i { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 50%; background: var(--auto-primary); color: #171713; font-size: 10px; }
.intd-feats li.is-off { color: #7E7A70; text-decoration: line-through; text-decoration-color: rgba(126,122,112,.5); }
.intd-feats li.is-off i { background: transparent; border: 1px solid rgba(245,241,231,.2); color: #7E7A70; }
.intd-pkg-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.intd-pkg-note { display: flex; align-items: center; gap: 22px; margin: 4.5em 0 0; color: #B5B0A5; font-size: 13px; text-align: center; }
.intd-pkg-note::before, .intd-pkg-note::after { content: ""; flex: 1; height: 1px; background: rgba(245,241,231,.13); }
.intd-pkg-note a { color: var(--auto-primary-light); font-weight: 700; }
.intd-pkg-note a i { margin-inline-start: 8px; font-size: 11px; transition: margin var(--auto-transition); }
.intd-pkg-note a:hover i { margin-inline-start: 13px; }

/* ---------- TABLET (below 1024px: 2.5em side padding) ---------- */
@media (max-width: 1023px) {
  .intd-hero, .intd-treat, .intd-pkg { padding: 6em 2.5em; }
  .intd-pkg { padding-top: 7em; }
  .intd-title { font-size: clamp(30px,4.6vw,40px); }
  .intd-head { margin-bottom: 3em; }
  .intd-hero { min-height: 0; }
  .intd-hero-inner { flex-direction: column; align-items: flex-start; gap: 64px; }
  .intd-hero-copy { max-width: 720px; }
  .intd-hero-visual { width: min(100%,380px); margin-inline: auto; }
  .intd-orbit { inset-inline-start: -5%; width: 110px; height: 110px; }
  .intd-bubble { inset-inline-start: -4%; width: 124px; height: 124px; }
  .intd-pill.p1 { inset-inline-end: -4%; } .intd-pill.p2 { inset-inline-end: -2%; }
  .intd-treat-body { flex-direction: column; align-items: stretch; gap: 54px; }
  .intd-stage-wrap { position: relative; top: auto; flex: none; width: min(100%,440px); margin-inline: auto; }
  .intd-panel { flex-direction: column; gap: 46px; }
  .intd-pkg-info { max-width: 620px; width: 100%; }
}

/* ---------- MOBILE (below 767px: 1.5em side padding) ---------- */
@media (max-width: 767px) {
  .intd-hero, .intd-treat, .intd-pkg { padding: 5em 1.5em; }
  .intd-pkg { padding-top: 6em; }
  .intd-title { font-size: clamp(26px,7.4vw,32px); letter-spacing: -.045em; }
  .intd-kicker { font-size: 10px; letter-spacing: .12em; }
  .intd-kicker::before, .intd-head.is-center .intd-kicker::after { width: 18px; }
  .intd-head { margin-bottom: 2.4em; }
  .intd-hero-inner { gap: 54px; }
  .intd-hero-actions .pr-btn { width: 100%; }
  .intd-stats { gap: 18px 0; }
  .intd-stat { padding-inline-end: 16px; margin-inline-end: 16px; }
  .intd-stat b { font-size: 24px; }
  .intd-stat span { font-size: 9px; letter-spacing: .1em; }
  .intd-hero-visual { width: min(100%,320px); }
  .intd-orbit { width: 92px; height: 92px; top: 4%; } .intd-orbit i { font-size: 17px; } .intd-orbit text { font-size: 12.5px; }
  .intd-bubble { width: 98px; height: 98px; border-width: 2px; }
  .intd-pill { padding: 8px 13px; font-size: 10px; gap: 7px; }
  .intd-arch-line { transform: translate(12px,12px); }
  .intd-stage-wrap { width: min(100%,340px); }
  .intd-stage-tag { padding: 9px 14px; font-size: 9.5px; }
  .intd-item-btn { gap: 14px; padding: 20px 0; }
  .intd-item-no { min-width: 22px; font-size: 12px; }
  .intd-item-name { font-size: 19px; }
  .intd-item-arrow { width: 34px; height: 34px; flex-basis: 34px; }
  .intd-item-body > div { padding-inline-start: 36px; padding-inline-end: 0; }
  .intd-switch { max-width: 100%; padding: 5px; }
  .intd-switch button { padding: 11px 15px; font-size: 11px; letter-spacing: .05em; }
  .intd-glider { top: 5px; bottom: 5px; }
  .intd-size { gap: 4px 16px; } .intd-size button { font-size: 11px; }
  .intd-controls { margin-bottom: 3em; }
  .intd-ring-wrap { flex-basis: auto; width: min(100%,300px); }
  .intd-pkg-actions .pr-btn { width: 100%; }
  .intd-pkg-note { margin-top: 3.4em; gap: 14px; font-size: 12px; }
}
@media (max-width: 380px) { .intd-title { font-size: 25px; } .intd-switch button { padding: 10px 11px; font-size: 10px; } .intd-stat b { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .intd-slide, .intd-glider, .intd-item-body { transition: none; } }

/* ============================================================
   AUTOMOTIVE ATELIER | INTERIOR DETAILING PAGE (PART 2)
   Leather & Upholstery Care | Process | Final CTA
============================================================ */
.lea, .prc, .cta { position: relative; overflow: hidden; overflow: clip; padding: 6em 5em; font-family: var(--auto-font-body); }

/* ---------- LEATHER & UPHOLSTERY CARE ---------- */
.lea { background: var(--auto-surface); }
.lea-stitch { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lea-stitch path { fill: none; stroke: var(--auto-primary); stroke-width: 1.6; stroke-dasharray: 3 9; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .7; }
.lea-body { display: flex; align-items: center; justify-content: space-between; gap: clamp(40px,6vw,100px); }
.lea-copy { flex: 1 1 46%; min-width: 0; max-width: 560px; }
.lea-readout { display: flex; gap: 20px; margin: 34px 0 30px; padding-inline-start: 22px; border-inline-start: 1px dashed rgba(185,154,99,.75); }
.lea-readout-no { flex: 0 0 auto; color: transparent; -webkit-text-stroke: 1px var(--auto-primary); font-family: var(--auto-font-heading); font-size: 44px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.lea-readout h3 { margin: 0 0 6px; font-family: var(--auto-font-heading); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.lea-readout p { margin: 0; color: var(--auto-muted); font-size: 14px; line-height: 1.8; }

.lea-visual { position: relative; flex: 0 0 min(50%,590px); aspect-ratio: 1 / .92; }
.lea-blob, .lea-blob-line { position: absolute; inset: 0; border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%; }
.lea-blob { overflow: hidden; background: linear-gradient(160deg,#6b4a2e,#1d130c); box-shadow: 0 34px 70px rgba(20,20,18,.28); }
.lea-blob-line { border: 1px solid rgba(185,154,99,.7); transform: translate(5%,4%) rotate(4deg); }
.lea-hot { position: absolute; z-index: 3; left: var(--x); top: var(--y); width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.lea-hot::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--auto-primary); box-shadow: 0 0 0 3px rgba(251,250,247,.9); transition: background var(--auto-transition), box-shadow var(--auto-transition); }
.lea-hot-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--auto-primary-light); pointer-events: none; }
.lea-hot b { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%,6px); padding: 7px 14px; border-radius: 999px; background: var(--auto-dark); border: 1px solid rgba(185,154,99,.5); color: #F4EFE3; font-size: 10px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--auto-transition), transform var(--auto-transition); }
.lea-hot.is-active b, .lea-hot:hover b, .lea-hot:focus-visible b { opacity: 1; transform: translate(-50%,0); }
.lea-hot.is-active::before { background: #FFF; box-shadow: 0 0 0 4px var(--auto-primary); }
.lea-badge { position: absolute; z-index: 4; bottom: -5%; inset-inline-start: -4%; width: 116px; height: 116px; display: grid; place-items: center; border-radius: 50%; background: var(--auto-primary); color: #171713; text-align: center; font-family: var(--auto-font-heading); font-size: 13px; font-weight: 800; line-height: 1.1; box-shadow: 0 18px 38px rgba(185,154,99,.35); }
.lea-badge::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(23,23,19,.5); }
.lea-badge b { display: block; font-size: 26px; letter-spacing: -.04em; }
.lea-badge small { display: block; font-size: 8px; letter-spacing: .14em; }

.lea-materials { position: relative; margin-top: 5.5em; }
.lea-thread { position: absolute; left: 0; right: 0; top: 36px; border-top: 1px dashed rgba(185,154,99,.7); }
.lea-materials ul { position: relative; display: flex; justify-content: space-between; gap: 24px; margin: 0; padding: 0; list-style: none; }
.lea-mat { flex: 1 1 0; min-width: 0; text-align: center; }
.lea-swatch { position: relative; display: block; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; box-shadow: 0 0 0 8px var(--auto-surface), 0 14px 28px rgba(20,20,18,.22); transition: transform .45s ease; }
.lea-swatch::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(255,255,255,.5); }
.lea-mat:hover .lea-swatch { transform: translateY(-6px) rotate(10deg); }
.lea-swatch.s1 { background: radial-gradient(circle at 30% 25%,#9a6540,#3c2214); }
.lea-swatch.s2 { background: radial-gradient(rgba(0,0,0,.55) 1.3px,transparent 1.6px) 0 0 / 8px 8px, radial-gradient(circle at 30% 25%,#7d5a3d,#2a1a0f); }
.lea-swatch.s3 { background: repeating-linear-gradient(45deg,#2c2c2b 0 2px,#383836 2px 4px); }
.lea-swatch.s4 { background: linear-gradient(135deg,#55514a,#1f1e1c 60%,#44403a); }
.lea-swatch.s5 { background: repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px), repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px), #a79f8d; }
.lea-mat h4 { margin: 0 0 6px; font-family: var(--auto-font-heading); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.lea-mat p { max-width: 190px; margin: 0 auto; color: var(--auto-muted); font-size: 12.5px; line-height: 1.7; }

/* ---------- PROCESS ---------- */
.prc { background: var(--auto-paper); }
.prc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 4.5em; }
.prc-head .intd-head { margin: 0; }
.prc-head-side { flex: 0 1 380px; }
.prc-track { position: relative; }
.prc-svg { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
.prc-base { fill: none; stroke: rgba(185,154,99,.5); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; }
.prc-fill { fill: none; stroke: var(--auto-primary); stroke-width: 2.6; stroke-linecap: round; }
.prc-orb { fill: var(--auto-primary); filter: drop-shadow(0 0 9px rgba(185,154,99,.95)); opacity: 0; }
.prc-steps { margin: 0; padding: 0; list-style: none; }
.prc-step { position: relative; display: flex; align-items: center; min-height: 200px; padding: 18px 0; }
.prc-step:nth-child(odd) { --off: -44px; justify-content: flex-end; }
.prc-step:nth-child(even) { --off: 44px; justify-content: flex-start; }
.prc-marker { position: absolute; z-index: 2; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; transform: translateX(var(--off,0px)); display: grid; place-items: center; border-radius: 50%; background: var(--auto-paper); border: 1px dashed var(--auto-primary); color: var(--auto-primary-deep); font-family: var(--auto-font-heading); font-size: 12px; font-weight: 800; letter-spacing: .08em; transition: background .4s ease, color .4s ease, border-color .4s ease; }
.prc-marker i { display: block; font-style: normal; }
.prc-pulse { position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--auto-primary); opacity: 0; pointer-events: none; }
.prc-step.is-reached .prc-marker { background: var(--auto-primary); border-style: solid; color: #171713; }
.prc-content { width: calc(50% - 92px); display: flex; align-items: center; gap: 26px; }
.prc-step:nth-child(even) .prc-content { flex-direction: row-reverse; text-align: end; }
.prc-media { flex: 0 0 112px; width: 112px; height: 112px; overflow: hidden; border-radius: 50%; background: linear-gradient(160deg,#cdbd98,#4a4030); box-shadow: 0 0 0 6px var(--auto-paper), 0 0 0 7px rgba(185,154,99,.65), 0 18px 36px rgba(20,20,18,.2); }
.prc-text { min-width: 0; }
.prc-time { display: inline-block; margin-bottom: 8px; color: var(--auto-primary-deep); font-size: 11px; font-weight: 700; letter-spacing: .17em; }
.prc-text h3 { margin: 0 0 8px; font-family: var(--auto-font-heading); font-size: clamp(20px,2vw,27px); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.prc-text p { margin: 0; color: var(--auto-muted); font-size: 14px; line-height: 1.8; }

/* ---------- FINAL CTA ---------- */
.cta { --cta-pad: 5em; --cta-cut: 52px; padding: calc(6em + var(--cta-cut)) var(--cta-pad) 0; background: var(--auto-dark); color: #F1EEE7; clip-path: polygon(0 var(--cta-cut),100% 0,100% 100%,0 100%); isolation: isolate; }
.cta-glow { position: absolute; z-index: -1; border-radius: 50%; background: radial-gradient(circle,rgba(185,154,99,.26),transparent 68%); pointer-events: none; }
.cta-glow.a { width: 620px; height: 620px; top: 8%; inset-inline-end: -160px; }
.cta-glow.b { width: 460px; height: 460px; bottom: 6%; inset-inline-start: -140px; opacity: .7; }
.cta .intd-kicker { color: var(--auto-primary-light); }
.cta .intd-kicker::before { background: var(--auto-primary-light); }
.cta .intd-title { color: #FAF7F0; }
.cta .intd-title span { color: var(--auto-primary-light); }
.cta .intd-text { color: #B5B0A5; }
.cta .pr-btn.ghost { color: #F4F0E6; border-color: rgba(216,196,154,.5); }
.cta .pr-btn.ghost:hover { color: #171713; }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(40px,6vw,100px); }
.cta-copy { flex: 1 1 48%; min-width: 0; max-width: 580px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.cta-assure { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 34px 0 0; padding: 0; list-style: none; }
.cta-assure li { display: flex; align-items: center; gap: 10px; padding-inline-end: 20px; margin-inline-end: 20px; border-inline-end: 1px solid rgba(245,241,231,.18); color: #E9E5DB; font-size: 13px; font-weight: 600; }
.cta-assure li:last-child { padding: 0; margin: 0; border: 0; }
.cta-assure i { color: var(--auto-primary-light); }
.cta-contact { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; color: #B5B0A5; font-size: 13px; }
.cta-contact a, .cta-contact span { display: inline-flex; align-items: center; gap: 10px; transition: color var(--auto-transition); }
.cta-contact a:hover { color: var(--auto-primary-light); }
.cta-contact i { color: var(--auto-primary-light); }

.cta-compare { flex: 0 0 min(44%,520px); }
.cta-lens-wrap { position: relative; }
.cta-orbit { position: absolute; inset: -6%; border-radius: 50%; border: 1px dashed rgba(216,196,154,.4); pointer-events: none; }
.cta-orbit::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--auto-primary-light); box-shadow: 0 0 16px rgba(216,196,154,.9); }
.cta-lens { position: relative; aspect-ratio: 1; overflow: hidden; direction: ltr; border-radius: 50%; background: linear-gradient(160deg,#4a4030,#14130f); box-shadow: 0 0 0 3px var(--auto-primary), 0 0 0 14px rgba(185,154,99,.14), 0 40px 90px rgba(0,0,0,.55); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline-offset: 14px; }
.cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cta-img.is-missing { opacity: 0; }
.cta-before { position: absolute; inset: 0; background: linear-gradient(160deg,#2a2823,#0f0f0d); clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0); }
.cta-before::after { content: ""; position: absolute; inset: 0; background: rgba(52,38,20,.28); pointer-events: none; }
.cta-line { position: absolute; z-index: 3; top: 0; bottom: 0; left: calc(var(--pos) * 1%); width: 2px; margin-left: -1px; background: var(--auto-primary-light); box-shadow: 0 0 18px rgba(216,196,154,.85); pointer-events: none; }
.cta-handle { position: absolute; z-index: 4; top: 50%; left: calc(var(--pos) * 1%); width: 56px; height: 56px; margin: -28px 0 0 -28px; display: grid; place-items: center; border-radius: 50%; background: var(--auto-primary); color: #171713; font-size: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.45); pointer-events: none; }
.cta-halo { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--auto-primary-light); pointer-events: none; }
.cta-tag { position: absolute; z-index: 5; bottom: 12%; padding: 8px 16px; border-radius: 999px; background: rgba(14,15,13,.82); border: 1px solid rgba(185,154,99,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #F4EFE3; font-size: 10px; font-weight: 800; letter-spacing: .16em; pointer-events: none; }
.cta-tag.b { left: 11%; }
.cta-tag.a { right: 11%; }
.cta-float { position: absolute; z-index: 5; top: 6%; inset-inline-end: -6%; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: var(--auto-primary); color: #171713; font-size: 11px; font-weight: 800; letter-spacing: .06em; white-space: nowrap; box-shadow: 0 14px 34px rgba(0,0,0,.4); pointer-events: none; }
.cta-hint { display: block; margin-top: 34px; color: var(--auto-primary-light); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-align: center; }
.cta-hint i { margin-inline-end: 8px; }

.cta-marquee { margin: 5em calc(var(--cta-pad) * -1) 0; padding: 2.4em 0 5em; overflow: hidden; direction: ltr; border-top: 1px solid rgba(245,241,231,.1); }
.cta-track { display: flex; width: max-content; white-space: nowrap; }
.cta-track span { padding-right: .6em; color: transparent; -webkit-text-stroke: 1px rgba(216,196,154,.42); font-family: var(--auto-font-heading); font-size: clamp(44px,2vw,100px); font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; }
.cta-track em { color: var(--auto-primary-light); -webkit-text-stroke: 0; font-style: normal; }

/* ---------- TABLET (below 1024px: 2.5em side padding) ---------- */
@media (max-width: 1023px) {
  .lea, .prc { padding: 6em 2.5em; }
  .cta { --cta-pad: 2.5em; --cta-cut: 40px; }
  .lea-body { flex-direction: column; align-items: stretch; gap: 64px; }
  .lea-copy { max-width: 680px; }
  .lea-visual { flex: none; width: min(100%,500px); margin-inline: auto; }
  .lea-thread { display: none; }
  .lea-materials { margin-top: 4.5em; }
  .lea-materials ul { flex-wrap: wrap; justify-content: center; gap: 40px 24px; }
  .lea-mat { flex: 0 0 calc(33.333% - 16px); }
  .prc-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 3.6em; }
  .prc-head-side { flex: none; max-width: 560px; }
  .prc-step { min-height: 0; padding: 26px 0; justify-content: flex-start; }
  .prc-step:nth-child(n) { --off: 0px; justify-content: flex-start; }
  .prc-marker { left: auto; inset-inline-start: 0; margin: -24px 0 0 0; }
  .prc-content, .prc-step:nth-child(even) .prc-content { width: 100%; padding-inline-start: 72px; flex-direction: row; text-align: start; gap: 22px; }
  .prc-media { flex-basis: 92px; width: 92px; height: 92px; }
  .cta-inner { flex-direction: column; align-items: stretch; gap: 70px; }
  .cta-copy { max-width: 680px; }
  .cta-compare { flex: none; width: min(100%,460px); margin-inline: auto; }
  .cta-float { inset-inline-end: -2%; }
}

/* ---------- MOBILE (below 767px: 1.5em side padding) ---------- */
@media (max-width: 767px) {
  .lea, .prc { padding: 5em 1.5em; }
  .cta { --cta-pad: 1.5em; --cta-cut: 28px; padding-top: calc(5em + var(--cta-cut)); }
  .lea-body { gap: 54px; }
  .lea-readout { gap: 14px; margin: 28px 0 26px; padding-inline-start: 16px; }
  .lea-readout-no { font-size: 34px; }
  .lea-readout h3 { font-size: 18px; }
  .lea-actions .pr-btn, .cta-actions .pr-btn { width: 100%; }
  .lea-visual { width: min(100%,380px); }
  .lea-hot { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
  .lea-hot::before { inset: 7px; }
  .lea-hot b { padding: 6px 11px; font-size: 9px; }
  .lea-badge { width: 92px; height: 92px; font-size: 11px; } .lea-badge b { font-size: 21px; } .lea-badge small { font-size: 7px; }
  .lea-materials { margin-top: 4em; }
  .lea-materials ul { gap: 34px 16px; }
  .lea-mat { flex: 0 0 calc(50% - 8px); }
  .lea-swatch { width: 62px; height: 62px; box-shadow: 0 0 0 6px var(--auto-surface), 0 12px 24px rgba(20,20,18,.2); }
  .lea-mat p { font-size: 12px; }
  .prc-head { margin-bottom: 3em; }
  .prc-step { padding: 22px 0; }
  .prc-marker { width: 40px; height: 40px; margin-top: -20px; font-size: 11px; }
  .prc-content, .prc-step:nth-child(even) .prc-content { padding-inline-start: 58px; gap: 16px; align-items: flex-start; }
  .prc-media { flex-basis: 70px; width: 70px; height: 70px; box-shadow: 0 0 0 4px var(--auto-paper), 0 0 0 5px rgba(185,154,99,.65); }
  .prc-text h3 { font-size: 18px; }
  .prc-text p { font-size: 13px; }
  .cta-inner { gap: 60px; }
  .cta-assure li { padding-inline-end: 14px; margin-inline-end: 14px; font-size: 12px; }
  .cta-handle { width: 46px; height: 46px; margin: -23px 0 0 -23px; font-size: 13px; }
  .cta-tag { padding: 6px 12px; font-size: 9px; bottom: 11%; }
  .cta-float { padding: 8px 13px; font-size: 10px; top: 2%; }
  .cta-hint { margin-top: 28px; font-size: 10px; }
  .cta-marquee { margin-top: 4em; padding: 2em 0 5em; }
}
@media (max-width: 380px) { .lea-mat { flex-basis: 100%; } .cta-contact { gap: 10px 18px; } }
@media (prefers-reduced-motion: reduce) { .lea-swatch, .prc-marker, .lea-hot b { transition: none; } }