/* =========================================================
   MUSTANG GROUP OF COMPANIES — Classic Premium Theme
   Palette: warm ink, ivory, brass. Fonts: Cormorant Garamond (headings) + Manrope (text) + Manjari (Malayalam only)
   ========================================================= */

:root {
  --ink: #0c0b09;
  --ink_2: #13110e;
  --ink_3: #1c1914;
  --line: rgba(201, 164, 92, 0.22);
  --line_soft: rgba(243, 236, 223, 0.08);
  --ivory: #f3ecdf;
  --ivory_dim: #c9c0ae;
  --mute: #8f8674;
  --brass: #c9a45c;
  --brass_light: #e6cd93;
  --brass_deep: #8a6a2f;
  --oxblood: #6b1e1e;
  --font_display: "Cormorant Garamond", "Times New Roman", serif;
  --font_mark: "Cormorant Garamond", "Times New Roman", serif;
  --font_body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font_ml: "Manjari", "Noto Sans Malayalam", sans-serif;
  --ease_out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease_in_out: cubic-bezier(0.65, 0, 0.35, 1);
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
  --header_h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Several bands rotate on a perspective, and a rotated plane projects a little
   wider than its own box. On a touch screen that let the whole page be panned
   sideways. `clip` trims the x axis without making the root a scroll container,
   which `overflow-x: hidden` would do — that breaks sticky headers and Lenis. */
html { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font_body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--brass); color: var(--ink); }

/* film grain for a classic print feel */
.grain_layer {
  /* Performance: the keyframes translate by at most 3% of this element's own
     size, so inset:-50% (a layer four times the viewport area, re-composited
     five times a second) was far more bleed than the effect needs. -8% keeps
     every edge off screen and cuts the layer to about a third of the area. */
  position: fixed; inset: -8%;
  z-index: 90; pointer-events: none; opacity: 0.06;
  will-change: transform;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain_shift 1.2s steps(6) infinite;
}
@keyframes grain_shift {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Typography helpers ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font_body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass);
}
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: 0.7; }
.eyebrow.no_rule::before { display: none; }
.display_title {
  font-family: var(--font_display); font-weight: 500;
  font-size: clamp(40px, 6vw, 92px); line-height: 1.02; letter-spacing: -0.01em;
  margin: 18px 0 0;
}
.display_title em, .section_title em { font-style: italic; color: var(--brass_light); font-weight: 400; }
.section_title {
  font-family: var(--font_display); font-weight: 500;
  font-size: clamp(34px, 4.4vw, 64px); line-height: 1.06; margin: 16px 0 0;
}
.lead_text { font-size: clamp(16px, 1.3vw, 19px); color: var(--ivory_dim); max-width: 60ch; }
.ml_text { font-family: var(--font_ml); letter-spacing: 0; }
.brass_rule { height: 1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); border: 0; margin: 0; }

/* split-text word wrappers */
.split_word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split_inner { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease_out); }
.is_in .split_inner, .split_done .split_inner { transform: none; }

/* generic reveal */
[data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease_out), transform 1.2s var(--ease_out); }
[data-reveal].is_in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="zoom"] { transform: scale(0.92); }
.no_js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn_brass, .btn_ghost {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 30px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  border-radius: 999px; overflow: hidden; isolation: isolate;
  transition: color 0.5s var(--ease_out), border-color 0.5s var(--ease_out);
}
.btn_brass { background: linear-gradient(135deg, var(--brass_light), var(--brass) 45%, var(--brass_deep)); color: var(--ink); }
.btn_brass::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.9s var(--ease_out);
}
.btn_brass:hover::after { transform: translateX(120%); }
.btn_ghost { border: 1px solid var(--line); color: var(--ivory); }
.btn_ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brass);
  transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ease_out);
}
.btn_ghost:hover { color: var(--ink); border-color: var(--brass); }
.btn_ghost:hover::before { transform: scaleY(1); }
.btn_arrow { width: 18px; height: 10px; flex: none; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 200; background: var(--ink);
  display: grid; place-items: center; transition: opacity 0.9s var(--ease_out), visibility 0.9s;
}
.preloader.is_done { opacity: 0; visibility: hidden; }
.preloader_inner { text-align: center; }
.preloader_emblem { width: 74px; height: 74px; color: var(--brass); margin: 0 auto 22px; }
.preloader_emblem path, .preloader_emblem circle { stroke-dasharray: 220; stroke-dashoffset: 220; animation: draw_line 1.8s var(--ease_in_out) forwards; }
@keyframes draw_line { to { stroke-dashoffset: 0; } }
.preloader_word { font-family: var(--font_mark); letter-spacing: 0.5em; font-size: 15px; color: var(--ivory); padding-left: 0.5em; }
.preloader_bar { width: 180px; height: 1px; background: var(--line_soft); margin: 18px auto 0; overflow: hidden; }
.preloader_bar span { display: block; height: 100%; width: 0; background: var(--brass); transition: width 0.4s linear; }

/* ---------- Custom cursor ---------- */
.cursor_ring {
  position: fixed; top: 0; left: 0; z-index: 150; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid rgba(201, 164, 92, 0.7); mix-blend-mode: difference;
  transition: width 0.4s var(--ease_out), height 0.4s var(--ease_out), margin 0.4s var(--ease_out), background 0.4s;
}
.cursor_ring.is_hover { width: 70px; height: 70px; margin: -35px 0 0 -35px; background: rgba(201, 164, 92, 0.15); }
@media (hover: none), (pointer: coarse) { .cursor_ring { display: none; } }

/* ---------- Header ---------- */
.site_header {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header_h);
  display: flex; align-items: center;
  transition: background 0.6s var(--ease_out), height 0.6s var(--ease_out), border-color 0.6s, transform 0.6s var(--ease_out);
  border-bottom: 1px solid transparent;
}
.site_header.is_scrolled {
  background: rgba(12, 11, 9, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: var(--line_soft); --header_h: 70px;
}
.site_header.is_hidden { transform: translateY(-100%); }
.header_row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.brand_mark { display: inline-flex; align-items: center; gap: 14px; }
.brand_emblem { width: 44px; height: 44px; color: var(--brass); flex: none; transition: transform 1s var(--ease_out); }
.brand_mark:hover .brand_emblem { transform: rotateY(180deg); }
.brand_text { display: flex; flex-direction: column; line-height: 1; }
.brand_word { font-family: var(--font_mark); font-weight: 600; font-size: 21px; letter-spacing: 0.28em; }
.brand_sub { font-size: 9.5px; letter-spacing: 0.34em; color: var(--brass); margin-top: 7px; text-transform: uppercase; }

.main_nav { display: flex; align-items: center; gap: 6px; }
.nav_link {
  position: relative; padding: 10px 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.13em; white-space: nowrap; text-transform: uppercase; color: var(--ivory_dim);
  transition: color 0.4s;
}
.nav_link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--brass);
  transform: scaleX(0); transform-origin: right; transition: transform 0.6s var(--ease_out);
}
.nav_link:hover, .nav_link.is_active { color: var(--ivory); }
.nav_link:hover::after, .nav_link.is_active::after { transform: scaleX(1); transform-origin: left; }

.nav_drop { position: relative; }
.nav_drop > .nav_link { display: inline-flex; align-items: center; gap: 8px; }
.drop_caret { width: 8px; height: 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-3px); }
.drop_panel {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 560px;
  transform: translateX(-50%) translateY(12px) rotateX(-12deg); transform-origin: top center;
  opacity: 0; visibility: hidden; transition: all 0.55s var(--ease_out);
  background: rgba(19, 17, 14, 0.96); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.nav_drop:hover .drop_panel, .nav_drop:focus-within .drop_panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0) rotateX(0); }
.drop_link { display: flex; gap: 12px; align-items: baseline; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--ivory_dim); transition: background 0.3s, color 0.3s; }
.drop_link b { font-family: var(--font_display); font-style: italic; color: var(--brass); font-weight: 500; font-size: 15px; min-width: 22px; }
.drop_link:hover { background: rgba(201,164,92,0.08); color: var(--ivory); }

.header_cta { white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; transition: border-color 0.4s, background 0.4s; }
.header_cta:hover { border-color: var(--brass); background: rgba(201,164,92,0.08); }
.pulse_dot { width: 8px; height: 8px; border-radius: 50%; background: #3fbf6b; box-shadow: 0 0 0 0 rgba(63,191,107,0.6); animation: pulse_ring 2s infinite; }
@keyframes pulse_ring { 70% { box-shadow: 0 0 0 10px rgba(63,191,107,0); } 100% { box-shadow: 0 0 0 0 rgba(63,191,107,0); } }

.menu_toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; position: relative; }
.menu_toggle span { position: absolute; left: 13px; right: 13px; height: 1px; background: var(--ivory); transition: transform 0.5s var(--ease_out), top 0.5s var(--ease_out); }
.menu_toggle span:nth-child(1) { top: 19px; }
.menu_toggle span:nth-child(2) { top: 26px; }
.menu_open .menu_toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.menu_open .menu_toggle span:nth-child(2) { top: 22px; transform: rotate(-45deg); }

.mobile_menu {
  position: fixed; inset: 0; z-index: 99; background: var(--ink_2);
  padding: calc(var(--header_h) + 30px) var(--gutter) 40px; overflow-y: auto;
  clip-path: circle(0% at calc(100% - 50px) 40px);
  /* clip-path alone only hides the menu visually: its links stayed focusable
     and were still announced by screen readers at every width, including
     desktop. visibility flips instantly on open and only after the close
     animation has finished, so the reveal is unchanged. */
  visibility: hidden; pointer-events: none;
  transition: clip-path 0.9s var(--ease_in_out), visibility 0s linear 0.9s;
}
.menu_open .mobile_menu {
  clip-path: circle(150% at calc(100% - 50px) 40px);
  visibility: visible; pointer-events: auto;
  transition: clip-path 0.9s var(--ease_in_out), visibility 0s;
}
.mobile_menu a.mobile_link { display: block; font-family: var(--font_display); font-size: 40px; line-height: 1.25; padding: 6px 0; border-bottom: 1px solid var(--line_soft); }
.mobile_menu .mobile_sub { display: grid; gap: 4px; padding: 10px 0 16px 4px; }
.mobile_menu .mobile_sub a { color: var(--ivory_dim); font-size: 15px; }
.mobile_menu .mobile_foot { margin-top: 30px; color: var(--mute); font-size: 14px; }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(90px, 12vw, 170px) 0; }
.section_head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(50px, 6vw, 90px); }
.section_head .lead_text { justify-self: end; }
.bg_ink2 { background: var(--ink_2); }
.ornament { display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--brass); }
.ornament::before, .ornament::after { content: ""; width: 80px; height: 1px; background: currentColor; opacity: 0.5; }
.ornament svg { width: 18px; height: 18px; }

/* =========================================================
   HOME — CAR OPENING HERO
   ========================================================= */
/* The hero's scroll length is set per site from the admin; these are fallbacks. */
.hero_stage { position: relative; height: var(--hero_fallback_height, 420vh); }
.hero_sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  perspective: 1500px; perspective-origin: 50% 50%;
  background: radial-gradient(ellipse at 50% 60%, #1d1912 0%, var(--ink) 70%);
}
/* revealed interior (the "about" inside the car) */
.about_core {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; text-align: center;
  padding: var(--header_h) var(--gutter) 40px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201,164,92,0.16), transparent 60%),
    linear-gradient(180deg, #17140f, #0c0b09);
}
.about_core_bg {
  position: absolute; inset: 0; opacity: 0.18; background-size: cover; background-position: center;
  filter: grayscale(1) sepia(0.4) contrast(1.1);
}
.about_core_inner { position: relative; max-width: 980px; }
.core_year {
  font-family: var(--font_display); font-weight: 300; font-style: italic;
  font-size: clamp(120px, 22vw, 330px); line-height: 0.8; color: transparent;
  -webkit-text-stroke: 1px rgba(201, 164, 92, 0.32);
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -58%); z-index: -1; white-space: nowrap; pointer-events: none;
}
.core_title { font-family: var(--font_display); font-weight: 500; font-size: clamp(34px, 5vw, 74px); line-height: 1.05; margin: 18px 0 22px; }
.core_title em { color: var(--brass_light); font-weight: 400; }
.core_text { color: var(--ivory_dim); max-width: 64ch; margin: 0 auto 30px; font-size: clamp(15px, 1.2vw, 18px); }
.core_facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 38px; margin: 0 0 34px; padding: 0; list-style: none; }
.core_facts li { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory_dim); }
.core_facts b { display: block; font-family: var(--font_display); font-size: 34px; letter-spacing: 0; color: var(--brass_light); font-weight: 500; text-transform: none; line-height: 1.1; }

/* the car shell — two doors that swing open in 3D */
.car_shell { position: absolute; inset: 0; z-index: 3; transform-style: preserve-3d; will-change: transform; }
.car_door {
  position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden;
  transform-style: preserve-3d; backface-visibility: hidden; will-change: transform;
}
.car_door_left { left: 0; transform-origin: 0% 50%; }
.car_door_right { right: 0; transform-origin: 100% 50%; }
.car_photo {
  position: absolute; top: 0; bottom: 0; width: 200%;
  background-color: #0e0d0b;
  background-size: cover; background-position: center 55%;
}
.car_door_left .car_photo { left: 0; }
.car_door_right .car_photo { right: 0; }
.door_shade {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.0), rgba(0,0,0,0.85));
}
.car_door_right .door_shade { background: linear-gradient(270deg, rgba(0,0,0,0.0), rgba(0,0,0,0.85)); }
.door_edge {
  position: absolute; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--brass_light) 30%, var(--brass) 70%, transparent);
  opacity: 0; box-shadow: 0 0 30px 6px rgba(230, 205, 147, 0.45);
}
.car_door_left .door_edge { right: 0; }
.car_door_right .door_edge { left: 0; }
.car_vignette {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,11,9,0.75) 0%, transparent 28%, transparent 62%, rgba(12,11,9,0.95) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(12,11,9,0.7) 100%);
}
.light_seam {
  position: absolute; left: 50%; top: 8%; bottom: 8%; width: 2px; margin-left: -1px; z-index: 5;
  background: linear-gradient(180deg, transparent, #fff3d4, var(--brass_light), transparent);
  box-shadow: 0 0 60px 14px rgba(230, 205, 147, 0.5);
  transform: scaleY(0); opacity: 0; pointer-events: none;
}
.light_sweep {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 210, 0.16) 48%, transparent 60%);
  transform: translateX(-100%);
}
.is_loaded .light_sweep { animation: sweep 2.6s 0.6s var(--ease_in_out) forwards; }
@keyframes sweep { to { transform: translateX(100%); } }

.hero_copy {
  position: absolute; z-index: 6; left: 0; right: 0; bottom: clamp(40px, 9vh, 110px);
  pointer-events: none;
}
.hero_copy .container { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.hero_title { font-family: var(--font_display); font-weight: 500; font-size: clamp(46px, 8.2vw, 138px); line-height: 0.92; margin: 14px 0 0; letter-spacing: -0.015em; }
.hero_title em { font-style: italic; color: var(--brass_light); font-weight: 400; }
.hero_side { max-width: 330px; text-align: right; pointer-events: auto; }
.hero_side p { color: var(--ivory_dim); margin: 0 0 6px; font-size: 15px; }
.hero_side .ml_text { color: var(--brass_light); font-size: 17px; }
.scroll_cue {
  position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--mute);
}
.scroll_cue i { width: 1px; height: 46px; background: linear-gradient(var(--brass), transparent); animation: cue_drop 2s var(--ease_in_out) infinite; transform-origin: top; }
@keyframes cue_drop { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hero_progress {
  position: absolute; z-index: 6; right: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 10px; letter-spacing: 0.3em; color: var(--mute);
}
.hero_progress_track { width: 1px; height: 120px; background: var(--line_soft); position: relative; }
.hero_progress_fill { position: absolute; inset: 0; background: var(--brass); transform: scaleY(0); transform-origin: top; }

/* static fallback when motion is unavailable */
html:not(.has_motion) .hero_stage { height: auto; }
html:not(.has_motion) .hero_sticky { position: relative; height: auto; overflow: visible; }
html:not(.has_motion) .car_shell, html:not(.has_motion) .car_vignette { position: relative; height: 100vh; }
html:not(.has_motion) .car_shell { position: relative; }
html:not(.has_motion) .about_core { position: relative; padding: 120px var(--gutter); }
html:not(.has_motion) .light_seam, html:not(.has_motion) .hero_progress { display: none; }

/* ---------- Stats band ---------- */
.stats_band { border-top: 1px solid var(--line_soft); border-bottom: 1px solid var(--line_soft); }
.stats_grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.stat_cell { padding: 46px 18px; text-align: center; border-left: 1px solid var(--line_soft); }
.stat_cell:first-child { border-left: 0; }
.stat_num { font-family: var(--font_display); font-size: clamp(40px, 4vw, 62px); line-height: 1; color: var(--brass_light); font-weight: 500; }
.stat_label { margin-top: 12px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }

/* ---------- Marquee (brands serviced) ---------- */
.marquee { overflow: hidden; padding: 34px 0; border-bottom: 1px solid var(--line_soft); }
.marquee_track { display: flex; width: max-content; animation: marquee_move 38s linear infinite; }
.marquee:hover .marquee_track { animation-play-state: paused; }
.marquee_item { display: flex; align-items: center; gap: 46px; padding-right: 46px; font-family: var(--font_display); font-size: clamp(26px, 3vw, 44px); font-style: italic; color: var(--ivory_dim); white-space: nowrap; transition: color 0.3s; }
.marquee_item:hover { color: var(--brass_light); }
.marquee_item svg { width: 14px; height: 14px; color: var(--brass); flex: none; }
@keyframes marquee_move { to { transform: translateX(-50%); } }

/* ---------- Services coverflow rail ---------- */
.services_stage { position: relative; }
.services_pin { position: relative; overflow: hidden; }
.services_rail_wrap { perspective: 1600px; perspective-origin: 50% 50%; }
.services_rail { display: flex; gap: 34px; padding: 10px var(--gutter) 40px; width: max-content; transform-style: preserve-3d; will-change: transform; }
.service_card {
  position: relative; flex: none; width: clamp(280px, 28vw, 400px); aspect-ratio: 3 / 4.1;
  border-radius: 22px; overflow: hidden; background: var(--ink_3);
  border: 1px solid var(--line_soft); transform-style: preserve-3d; will-change: transform;
  transition: border-color 0.5s;
}
.service_card:hover { border-color: var(--line); }
.service_img {
  position: absolute; inset: -6%; background-size: cover; background-position: center;
  background-color: var(--ink_3); filter: saturate(0.75) contrast(1.05); transition: transform 1.4s var(--ease_out), filter 0.8s;
}
.service_card:hover .service_img { transform: scale(1.08); filter: saturate(1) contrast(1.05); }
.service_card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,11,9,0.1) 20%, rgba(12,11,9,0.92) 82%); }
.service_body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px; transform: translateZ(40px); }
.service_num { position: absolute; top: 24px; left: 28px; z-index: 2; font-family: var(--font_display); font-style: italic; font-size: 22px; color: var(--brass_light); transform: translateZ(30px); }
/* Performance: these tags ride inside the pinned coverflow rail, so a
   backdrop-filter was re-blurring nine moving backdrops every frame. A
   translucent fill looks the same over the card's dark photo gradient. */
.service_tag { position: absolute; top: 26px; right: 26px; z-index: 2; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 6px 12px; border: 1px solid rgba(243,236,223,0.25); border-radius: 999px; background: rgba(12,11,9,0.45); }
.service_name { font-family: var(--font_display); font-size: 31px; line-height: 1.08; margin: 0 0 10px; font-weight: 500; }
.service_desc { font-size: 14px; color: var(--ivory_dim); margin: 0 0 18px; }
.service_link { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass_light); }
.service_link svg { width: 18px; transition: transform 0.4s var(--ease_out); }
.service_card:hover .service_link svg { transform: translateX(6px); }
.services_hint { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--mute); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.rail_progress { width: 220px; height: 1px; background: var(--line_soft); position: relative; }
.rail_progress span { position: absolute; inset: 0; background: var(--brass); transform: scaleX(0); transform-origin: left; }
html:not(.has_motion) .services_rail_wrap { overflow-x: auto; }

/* ---------- Workshop split ---------- */
.split_grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center; }
.frame_3d { position: relative; perspective: 1200px; }
.frame_inner {
  position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 4.6;
  transform-style: preserve-3d; transition: transform 0.3s ease-out; box-shadow: 0 60px 100px -30px rgba(0,0,0,0.8);
}
.frame_img { position: absolute; inset: -8% 0; background-size: cover; background-position: center; background-color: var(--ink_3); will-change: transform; }
.frame_badge {
  position: absolute; right: -24px; bottom: 50px; z-index: 3; width: 150px; height: 150px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--line); display: grid; place-items: center; text-align: center;
  transform: translateZ(60px);
}
.frame_badge_ring { position: absolute; inset: 8px; animation: spin_slow 22s linear infinite; color: var(--brass); }
.frame_badge b { font-family: var(--font_display); font-size: 38px; font-weight: 500; color: var(--brass_light); line-height: 1; display: block; }
.frame_badge small { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mute); }
@keyframes spin_slow { to { transform: rotate(360deg); } }
.cap_list { list-style: none; margin: 34px 0 40px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.cap_list li { display: flex; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line_soft); font-size: 15px; }
.cap_list li::before { content: ""; width: 7px; height: 7px; border: 1px solid var(--brass); transform: rotate(45deg); flex: none; }

/* ---------- 3D brand ring ---------- */
.ring_section { overflow: hidden; }
.ring_scene { position: relative; height: clamp(320px, 36vw, 440px); perspective: 1400px; perspective-origin: 50% 38%; margin-top: 30px; }
.brand_ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.ring_plate {
  position: absolute; left: -110px; top: -70px; width: 220px; height: 140px;
  display: grid; place-items: center; text-align: center; padding: 16px;
  background: linear-gradient(160deg, rgba(36,31,23,0.96), rgba(16,14,11,0.96));
  border: 1px solid var(--line); border-radius: 16px;
  backface-visibility: visible;
  box-shadow: inset 0 1px 0 rgba(230,205,147,0.15), 0 30px 50px -20px rgba(0,0,0,0.8);
}
.ring_plate strong { font-family: var(--font_display); font-weight: 500; font-size: 27px; line-height: 1.05; display: block; }
.ring_plate span { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); display: block; margin-top: 8px; }
.ring_floor {
  position: absolute; left: 50%; top: 66%; width: min(900px, 90vw); height: 200px; transform: translateX(-50%) rotateX(80deg);
  background: radial-gradient(ellipse at center, rgba(201,164,92,0.25), transparent 65%); pointer-events: none;
}

/* ---------- Group companies 3D stack ---------- */
.group_stage { position: relative; }
.group_stack { position: relative; height: 520px; perspective: 1600px; margin-top: 20px; }
.group_card {
  position: absolute; left: 50%; top: 0; width: min(420px, 28vw); height: 500px; margin-left: calc(min(420px, 28vw) / -2);
  border-radius: 24px; overflow: hidden; background: var(--ink_3); border: 1px solid var(--line);
  transform-style: preserve-3d; will-change: transform; box-shadow: 0 50px 90px -30px rgba(0,0,0,0.9);
}
.group_card_img { height: 52%; background-size: cover; background-position: center; filter: grayscale(0.4) sepia(0.25); }
.group_card_body { padding: 26px 30px 30px; }
.group_year { font-family: var(--font_display); font-style: italic; color: var(--brass_light); font-size: 22px; }
.group_name { font-family: var(--font_display); font-weight: 500; font-size: 29px; line-height: 1.1; margin: 4px 0 10px; }
.group_text { font-size: 14px; color: var(--ivory_dim); margin: 0; }
html:not(.has_motion) .group_stack { height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
html:not(.has_motion) .group_card { position: relative; left: auto; margin: 0; width: auto; }

/* ---------- News ---------- */
.news_grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
.news_card { position: relative; border-top: 1px solid var(--line); padding-top: 26px; }
.news_img { aspect-ratio: 16 / 11; border-radius: 16px; overflow: hidden; margin-bottom: 22px; }
.news_img div { width: 100%; height: 100%; background-size: cover; background-position: center; background-color: var(--ink_3); transition: transform 1.2s var(--ease_out); }
.news_card:hover .news_img div { transform: scale(1.06); }
.news_date { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); }
.news_title { font-family: var(--font_display); font-size: 27px; line-height: 1.15; font-weight: 500; margin: 10px 0; }
.news_text { color: var(--ivory_dim); font-size: 14.5px; margin: 0; }

/* ---------- Branches ---------- */
.branch_list { border-top: 1px solid var(--line_soft); }
.branch_row {
  display: grid; grid-template-columns: 70px 1.1fr 1.6fr 1fr 40px; gap: 24px; align-items: center;
  padding: 28px 0; border-bottom: 1px solid var(--line_soft); position: relative; transition: padding 0.5s var(--ease_out);
}
.branch_row::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(201,164,92,0.08), transparent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease_out); z-index: -1; }
.branch_row:hover::before { transform: scaleX(1); }
.branch_row:hover { padding-left: 14px; }
.branch_idx { font-family: var(--font_display); font-style: italic; font-size: 26px; color: var(--brass); }
.branch_name { font-family: var(--font_display); font-size: 28px; line-height: 1.1; }
.branch_name small { display: block; font-family: var(--font_body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); margin-top: 6px; }
.branch_addr { color: var(--ivory_dim); font-size: 14.5px; }
.branch_phone { font-size: 15px; }
.branch_phone a:hover { color: var(--brass_light); }
.branch_go { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background 0.4s, transform 0.5s var(--ease_out); }
.branch_go svg { width: 16px; }
.branch_row:hover .branch_go { background: var(--brass); color: var(--ink); transform: rotate(-45deg); }
.hours_note { margin-top: 26px; color: var(--mute); font-size: 13px; letter-spacing: 0.08em; }

/* ---------- Breakdown CTA ---------- */
.cta_band { position: relative; overflow: hidden; text-align: center; padding: clamp(110px, 14vw, 200px) 0; }
.cta_bg { position: absolute; inset: -10% 0; background-size: cover; background-position: center; filter: grayscale(0.6) brightness(0.35) sepia(0.3); will-change: transform; }
.cta_band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12,11,9,0.35), rgba(12,11,9,0.92)); }
.cta_inner { position: relative; z-index: 2; }
.cta_phone { display: inline-block; font-family: var(--font_display); font-size: clamp(46px, 8vw, 120px); line-height: 1; margin: 22px 0 14px; color: var(--ivory); transition: color 0.4s; }
.cta_phone:hover { color: var(--brass_light); }
.cta_ml { font-family: var(--font_ml); font-size: clamp(18px, 2vw, 26px); color: var(--brass_light); margin: 0 0 34px; }

/* ---------- Footer ---------- */
.site_footer { background: #090807; border-top: 1px solid var(--line_soft); padding: 90px 0 30px; position: relative; overflow: hidden; }
.footer_word {
  font-family: var(--font_mark); font-size: clamp(64px, 15vw, 230px); letter-spacing: 0.12em; line-height: 0.9; text-align: center;
  color: transparent; -webkit-text-stroke: 1px rgba(201,164,92,0.22); margin: 70px 0 30px; white-space: nowrap; user-select: none;
}
.footer_grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer_title { font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); margin: 0 0 20px; }
.footer_links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer_links a { color: var(--ivory_dim); font-size: 14.5px; transition: color 0.3s, padding 0.4s var(--ease_out); }
.footer_links a:hover { color: var(--brass_light); padding-left: 6px; }
.footer_about { color: var(--ivory_dim); font-size: 14.5px; max-width: 36ch; margin: 22px 0; }
.social_row { display: flex; gap: 10px; }
.social_btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background 0.4s, color 0.4s; }
.social_btn svg { width: 16px; height: 16px; }
.social_btn:hover { background: var(--brass); color: var(--ink); }
.footer_bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line_soft); color: var(--mute); font-size: 12.5px; letter-spacing: 0.06em; }

/* =========================================================
   INNER PAGES
   ========================================================= */
.page_hero { position: relative; height: 88vh; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; padding-bottom: clamp(50px, 8vh, 100px); }
.page_hero_bg { position: absolute; inset: -12% 0 -12%; background-size: cover; background-position: center; background-color: var(--ink_3); filter: grayscale(0.35) sepia(0.2) brightness(0.62); will-change: transform; }
.page_hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,11,9,0.55) 0%, rgba(12,11,9,0.15) 40%, rgba(12,11,9,0.95) 100%); }
.page_hero .container { position: relative; z-index: 2; }
.page_hero .display_title { font-size: clamp(54px, 9vw, 150px); }
.crumbs { margin-top: 26px; display: flex; gap: 12px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.crumbs a:hover { color: var(--brass_light); }

/* intro two-column */
.intro_grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 7vw, 120px); }
.big_quote { font-family: var(--font_display); font-size: clamp(28px, 3.2vw, 46px); line-height: 1.25; font-weight: 400; margin: 0; }
.big_quote em { color: var(--brass_light); }
.body_cols { columns: 2; column-gap: 46px; color: var(--ivory_dim); }
.body_cols p { margin: 0 0 18px; break-inside: avoid; }

/* ---------- About: depth tunnel timeline ---------- */
.tunnel_stage { position: relative; height: 560vh; }
.tunnel_sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; perspective: 900px; perspective-origin: 50% 45%; background: radial-gradient(ellipse at 50% 45%, #1f1a12, var(--ink) 70%); }
.tunnel_world { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.tunnel_road {
  position: absolute; left: 50%; top: 50%; width: 1400px; height: 9000px; margin-left: -700px; margin-top: -4500px;
  transform: rotateX(90deg) translateZ(-260px) translateY(-3900px);
  background:
    repeating-linear-gradient(180deg, rgba(230,205,147,0.6) 0 90px, transparent 90px 320px) 50% 0 / 6px 320px repeat-y,
    linear-gradient(90deg, transparent 0 16%, rgba(201,164,92,0.32) 16% calc(16% + 3px), transparent calc(16% + 3px) calc(84% - 3px), rgba(201,164,92,0.32) calc(84% - 3px) 84%, transparent 84%),
    linear-gradient(90deg, transparent 10%, rgba(26,22,16,0.9) 30%, rgba(26,22,16,0.9) 70%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 45%);
}
.tunnel_frame {
  position: absolute; left: 50%; top: 50%; width: 1100px; height: 640px; margin: -320px 0 0 -550px;
  border: 1px solid rgba(201,164,92,0.18); border-radius: 30px; pointer-events: none;
}
.milestone {
  position: absolute; left: 50%; top: 50%; width: min(760px, 88vw); margin-left: calc(min(760px, 88vw) / -2); transform-style: preserve-3d;
  text-align: center; will-change: transform, opacity;
}
.milestone_year { font-family: var(--font_display); font-style: italic; font-weight: 300; font-size: clamp(110px, 16vw, 230px); line-height: 0.85; color: var(--brass_light); text-shadow: 0 0 60px rgba(201,164,92,0.25); }
.milestone_title { font-family: var(--font_display); font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; margin: 18px 0 10px; font-weight: 500; }
.milestone_text { color: var(--ivory_dim); max-width: 52ch; margin: 0 auto; }
.tunnel_hud { position: absolute; left: var(--gutter); bottom: 34px; z-index: 5; display: flex; gap: 22px; font-size: 11px; letter-spacing: 0.24em; color: var(--mute); }
.tunnel_hud span.is_on { color: var(--brass_light); }
.tunnel_speed { position: absolute; right: var(--gutter); bottom: 30px; z-index: 5; text-align: right; }
.tunnel_speed b { font-family: var(--font_display); font-size: 54px; color: var(--ivory); font-weight: 500; line-height: 1; display: block; }
.tunnel_speed small { font-size: 10px; letter-spacing: 0.3em; color: var(--mute); text-transform: uppercase; }
.tunnel_title { position: absolute; left: 0; right: 0; top: calc(var(--header_h) + 20px); z-index: 5; text-align: center; }
html:not(.has_motion) .tunnel_stage { height: auto; }
html:not(.has_motion) .tunnel_sticky { position: relative; height: auto; padding: 140px 0 80px; }
html:not(.has_motion) .milestone { position: relative; left: auto; top: auto; margin: 0 auto 90px; }
html:not(.has_motion) .tunnel_road, html:not(.has_motion) .tunnel_frame, html:not(.has_motion) .tunnel_speed, html:not(.has_motion) .tunnel_hud { display: none; }
html:not(.has_motion) .tunnel_title { position: relative; top: auto; margin-bottom: 60px; }
/* On a narrow screen the year markers and the speedometer are both pinned to
   the bottom corners and run into each other. Give the years the full width and
   lift the gauge above them. */
@media (max-width: 760px) {
  .tunnel_hud { right: var(--gutter); justify-content: space-between; gap: 10px; font-size: 10px; letter-spacing: 0.14em; bottom: 24px; }
  .tunnel_speed { bottom: 58px; }
  .tunnel_speed b { font-size: 36px; }
}
/* The tunnel fills exactly one viewport and hides its overflow, so on a short
   screen — a landscape phone above all — the year, title and paragraph were
   taller than the space and the text was cut off. Scale the type to the
   viewport height and drop the decorative gauge. */
@media (max-height: 620px) {
  .tunnel_title { top: calc(var(--header_h) + 2px); }
  .milestone_year { font-size: clamp(44px, 13vh, 96px); }
  .milestone_title { font-size: clamp(18px, 4.2vh, 30px); margin: 6px 0 4px; }
  .milestone_text { font-size: 13px; line-height: 1.5; }
  .tunnel_speed { display: none; }
  .tunnel_hud { bottom: 12px; font-size: 9px; letter-spacing: 0.12em; }
}

/* mission / vision */
.mv_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line_soft); border-radius: 26px; overflow: hidden; }
.mv_cell { padding: clamp(32px, 4vw, 56px); border-left: 1px solid var(--line_soft); position: relative; }
.mv_cell:first-child { border-left: 0; }
.mv_cell h3 { font-family: var(--font_display); font-weight: 500; font-size: 38px; margin: 18px 0 16px; }
.mv_cell p, .mv_cell li { color: var(--ivory_dim); font-size: 15px; }
.mv_cell ul { padding-left: 18px; margin: 0; }
.mv_icon { width: 52px; height: 52px; color: var(--brass); }

/* flip cards (quality pillars) */
.flip_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; perspective: 1400px; }
.flip_card { height: 340px; position: relative; transform-style: preserve-3d; transition: transform 1.1s var(--ease_out); cursor: pointer; }
.flip_card:hover, .flip_card.is_flipped { transform: rotateY(180deg); }
.flip_face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; padding: 38px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--line); }
.flip_front { background: linear-gradient(160deg, #221d15, #120f0c); }
.flip_back { background: linear-gradient(160deg, var(--brass_light), var(--brass) 50%, var(--brass_deep)); color: var(--ink); transform: rotateY(180deg); }
.flip_abbr { font-family: var(--font_display); font-size: 96px; line-height: 0.9; font-weight: 400; color: var(--brass_light); font-style: italic; }
.flip_name { font-family: var(--font_display); font-size: 30px; line-height: 1.1; }
.flip_back p { font-size: 15.5px; margin: 0; font-weight: 500; }
.flip_back .flip_name { font-weight: 600; }
.flip_hint { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); }
.motto_line { text-align: center; margin-top: 70px; font-family: var(--font_display); font-size: clamp(30px, 4vw, 56px); font-style: italic; }
.motto_line small { display: block; font-family: var(--font_body); font-style: normal; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); margin-top: 16px; }

/* management */
.team_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.team_card { border: 1px solid var(--line_soft); border-radius: 20px; padding: 30px 26px; background: linear-gradient(180deg, rgba(28,25,20,0.7), rgba(12,11,9,0.4)); transform-style: preserve-3d; transition: border-color 0.5s; }
.team_card:hover { border-color: var(--line); }
.team_card.is_lead { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.monogram { width: 78px; height: 78px; border-radius: 50%; border: 1px solid var(--brass); display: grid; place-items: center; font-family: var(--font_mark); font-size: 22px; color: var(--brass_light); letter-spacing: 0.08em; margin-bottom: 22px; transform: translateZ(30px); }
.is_lead .monogram { width: 110px; height: 110px; font-size: 30px; margin: 0; }
.team_name { font-family: var(--font_display); font-size: 26px; line-height: 1.1; margin: 0 0 6px; font-weight: 500; }
.team_role { font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); }

/* brand chips */
.chip_grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line_soft); border: 1px solid var(--line_soft); border-radius: 20px; overflow: hidden; }
.chip { background: var(--ink); padding: 34px 16px; text-align: center; font-family: var(--font_display); font-size: 25px; font-style: italic; color: var(--ivory_dim); transition: color 0.4s, background 0.4s; }
.chip:hover { color: var(--brass_light); background: var(--ink_3); }

/* ---------- Services page ---------- */
.svc_layout { display: grid; grid-template-columns: 280px 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.svc_index { position: sticky; top: calc(var(--header_h) + 30px); }
.svc_index ol { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: svc; }
.svc_index li { counter-increment: svc; }
.svc_index a { display: flex; gap: 14px; padding: 11px 0; font-size: 14px; color: var(--mute); border-bottom: 1px solid var(--line_soft); transition: color 0.3s, padding 0.4s var(--ease_out); }
.svc_index a::before { content: counter(svc, decimal-leading-zero); font-family: var(--font_display); font-style: italic; color: var(--brass); }
.svc_index a:hover, .svc_index a.is_active { color: var(--ivory); padding-left: 8px; }
.svc_block { padding: 0 0 clamp(80px, 9vw, 130px); scroll-margin-top: calc(var(--header_h) + 20px); }
.svc_media { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 8.5; margin-bottom: 40px; perspective: 1000px; }
.svc_media div { position: absolute; inset: -10% 0; background-size: cover; background-position: center; background-color: var(--ink_3); filter: saturate(0.8); will-change: transform; }
.svc_media span { position: absolute; left: 26px; top: 22px; z-index: 2; font-family: var(--font_display); font-style: italic; font-size: 64px; color: var(--ivory); line-height: 1; text-shadow: 0 4px 30px rgba(0,0,0,0.6); }
.svc_title { font-family: var(--font_display); font-size: clamp(36px, 4vw, 58px); line-height: 1.05; margin: 0 0 18px; font-weight: 500; }
.svc_text { color: var(--ivory_dim); max-width: 70ch; }
.svc_text p { margin: 0 0 14px; }
.tick_list { list-style: none; padding: 0; margin: 22px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tick_list li { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--ivory); }
.contact_strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 28px; }
.contact_card { border: 1px solid var(--line_soft); border-radius: 16px; padding: 20px 22px; background: rgba(28,25,20,0.45); font-size: 14px; color: var(--ivory_dim); }
.contact_card h4 { margin: 0 0 8px; font-family: var(--font_display); font-size: 21px; color: var(--ivory); font-weight: 500; }
.contact_card a { color: var(--ivory); }
.contact_card a:hover { color: var(--brass_light); }
.ext_link { display: inline-flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass_light); }

/* ---------- Gallery 3D wall ---------- */
.gallery_filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 50px; }
.filter_btn { padding: 11px 22px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory_dim); transition: all 0.4s var(--ease_out); }
.filter_btn.is_active, .filter_btn:hover { background: var(--brass); color: var(--ink); border-color: var(--brass); }
.wall_scene { perspective: 1800px; perspective-origin: 50% 30%; }
.gallery_wall { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 18px; transform-style: preserve-3d; transition: transform 0.6s var(--ease_out); }
.wall_item { position: relative; border-radius: 16px; overflow: hidden; cursor: zoom-in; transform-style: preserve-3d; transition: transform 0.8s var(--ease_out), opacity 0.6s, filter 0.6s; background: var(--ink_3); }
.wall_item.is_tall { grid-row: span 2; }
.wall_item.is_wide { grid-column: span 2; }
.wall_item div { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.2s var(--ease_out); }
.wall_item:hover { transform: translateZ(60px); z-index: 3; }
.wall_item:hover div { transform: scale(1.07); }
.wall_item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(12,11,9,0.9)); font-size: 13px; opacity: 0; transform: translateY(10px); transition: all 0.5s var(--ease_out); }
.wall_item figcaption small { display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass); }
.wall_item:hover figcaption { opacity: 1; transform: none; }
.wall_item.is_dim { opacity: 0.12; filter: grayscale(1); transform: translateZ(-80px); pointer-events: none; }
.lightbox { position: fixed; inset: 0; z-index: 160; background: rgba(8,7,6,0.94); display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s, visibility 0.5s; padding: 40px; }
.lightbox.is_open { opacity: 1; visibility: visible; }
.lightbox img { max-height: 82vh; max-width: 90vw; border-radius: 14px; transform: scale(0.92) rotateX(8deg); transition: transform 0.7s var(--ease_out); }
.lightbox.is_open img { transform: none; }
.lightbox_cap { margin-top: 18px; text-align: center; color: var(--ivory_dim); font-size: 14px; }
.lightbox_close { position: absolute; top: 24px; right: 24px; width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 50%; font-size: 22px; }
.lightbox_nav { position: absolute; top: 50%; width: 54px; height: 54px; margin-top: -27px; border: 1px solid var(--line); border-radius: 50%; font-size: 20px; }
.lightbox_prev { left: 24px; } .lightbox_next { right: 24px; }

/* ---------- Forms ---------- */
.form_shell { border: 1px solid var(--line); border-radius: 28px; padding: clamp(30px, 4.5vw, 64px); background: linear-gradient(170deg, rgba(34,29,21,0.75), rgba(12,11,9,0.6)); }
.form_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 30px; }
.field { position: relative; display: flex; flex-direction: column; }
.field.is_full { grid-column: 1 / -1; }
.field label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin-bottom: 8px; }
.field label i { color: var(--oxblood); font-style: normal; color: #d0815f; }
.field input, .field select, .field textarea {
  background: transparent; border: 0; border-bottom: 1px solid rgba(243,236,223,0.18); color: var(--ivory);
  font: inherit; font-size: 16px; padding: 10px 0 12px; outline: none; border-radius: 0; transition: border-color 0.4s;
}
.field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brass) 50%), linear-gradient(135deg, var(--brass) 50%, transparent 50%); background-position: calc(100% - 12px) 20px, calc(100% - 6px) 20px; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { background: var(--ink_2); color: var(--ivory); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brass); }
.field .field_bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass_light); transform: scaleX(0); transition: transform 0.6s var(--ease_out); }
.field input:focus ~ .field_bar, .field textarea:focus ~ .field_bar, .field select:focus ~ .field_bar { transform: scaleX(1); }
.field.has_error input, .field.has_error select, .field.has_error textarea { border-color: #d0815f; }
.field_error { font-size: 12px; color: #e09a7c; margin-top: 6px; min-height: 0; }
.radio_row { display: flex; gap: 22px; flex-wrap: wrap; padding-top: 8px; }
.radio_row label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--ivory); margin: 0; cursor: pointer; }
.radio_row input { accent-color: var(--brass); width: 16px; height: 16px; }
.file_drop { border: 1px dashed var(--line); border-radius: 14px; padding: 18px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: border-color 0.4s, background 0.4s; color: var(--ivory_dim); font-size: 14px; }
.file_drop:hover { border-color: var(--brass); background: rgba(201,164,92,0.05); }
.file_drop input { display: none; }
.file_drop svg { width: 26px; height: 26px; color: var(--brass); flex: none; }
.form_foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 36px; }
.form_note { font-size: 13px; color: var(--mute); }
.form_success { display: none; text-align: center; padding: 40px 10px; }
.form_success.is_shown { display: block; }
.form_success svg { width: 64px; height: 64px; color: var(--brass); margin: 0 auto 18px; }
.form_success h3 { font-family: var(--font_display); font-size: 40px; margin: 0 0 8px; font-weight: 500; }

/* ---------- Careers ---------- */
.perk_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.perk_card { padding: 36px 32px; border: 1px solid var(--line_soft); border-radius: 22px; background: rgba(28,25,20,0.4); transform-style: preserve-3d; }
.perk_card h3 { font-family: var(--font_display); font-size: 30px; margin: 20px 0 10px; font-weight: 500; }
.perk_card p { color: var(--ivory_dim); margin: 0; font-size: 15px; }
.perk_card .mv_icon { transform: translateZ(40px); }
.opening_note { display: flex; gap: 22px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 30px 36px; border: 1px solid var(--line); border-radius: 22px; margin-top: 50px; }
.opening_note p { margin: 0; color: var(--ivory_dim); }
.opening_note strong { font-family: var(--font_display); font-size: 28px; font-weight: 500; color: var(--ivory); display: block; }

/* ---------- Contact ---------- */
.company_block { margin-bottom: 70px; }
.company_head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 26px; flex-wrap: wrap; }
.company_head h3 { font-family: var(--font_display); font-size: clamp(30px, 3vw, 44px); margin: 0; font-weight: 500; }
.company_head span { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); }
.office_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.office_card { position: relative; padding: 30px 28px; border: 1px solid var(--line_soft); border-radius: 22px; background: linear-gradient(170deg, rgba(34,29,21,0.6), rgba(12,11,9,0.3)); transform-style: preserve-3d; transition: border-color 0.5s; }
.office_card:hover { border-color: var(--line); }
.office_tag { font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); }
.office_card h4 { font-family: var(--font_display); font-size: 28px; margin: 10px 0 12px; font-weight: 500; line-height: 1.1; transform: translateZ(30px); }
.office_card address { font-style: normal; color: var(--ivory_dim); font-size: 14.5px; margin-bottom: 16px; }
.office_meta { display: grid; gap: 6px; font-size: 14px; }
.office_meta a { color: var(--ivory); word-break: break-word; }
.office_meta a:hover { color: var(--brass_light); }
.office_meta span { color: var(--mute); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-right: 8px; }
.map_frame { border-radius: 26px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; }
.map_frame iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) sepia(0.35) contrast(0.9); }
.contact_split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.hotline_box { border-left: 1px solid var(--brass); padding-left: 26px; margin-top: 34px; }
.hotline_box a { font-family: var(--font_display); font-size: 40px; display: block; line-height: 1.15; }
.hotline_box a:hover { color: var(--brass_light); }
.hotline_box small { color: var(--mute); letter-spacing: 0.2em; text-transform: uppercase; font-size: 11px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
  .main_nav, .header_cta { display: none; }
  .menu_toggle { display: block; }
  .stats_grid { grid-template-columns: repeat(3, 1fr); }
  .stat_cell:nth-child(4) { border-left: 0; }
  .stat_cell { border-bottom: 1px solid var(--line_soft); }
  .team_grid { grid-template-columns: repeat(2, 1fr); }
  .chip_grid { grid-template-columns: repeat(3, 1fr); }
  .office_grid { grid-template-columns: 1fr 1fr; }
  .footer_grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .section_head, .split_grid, .intro_grid, .contact_split, .svc_layout { grid-template-columns: 1fr; }
  .section_head .lead_text { justify-self: start; }
  .hero_copy .container { flex-direction: column; align-items: flex-start; }
  .hero_side { text-align: left; }
  .hero_progress { display: none; }
  .news_grid, .mv_grid, .flip_grid, .perk_grid { grid-template-columns: 1fr; }
  .mv_cell { border-left: 0; border-top: 1px solid var(--line_soft); }
  .mv_cell:first-child { border-top: 0; }
  .branch_row { grid-template-columns: 44px 1fr 40px; }
  .branch_addr, .branch_phone { grid-column: 2 / 3; }
  .branch_go { grid-row: 1; grid-column: 3; }
  .body_cols { columns: 1; }
  .svc_index { position: relative; top: 0; }
  .gallery_wall { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .frame_badge { right: 14px; }
  .cap_list { grid-template-columns: 1fr; }
  .team_card.is_lead { grid-column: auto; grid-template-columns: 1fr; }
  .is_lead .monogram { margin-bottom: 4px; }
}
@media (max-width: 640px) {
  :root { --header_h: 72px; }
  .brand_word { font-size: 17px; }
  .brand_emblem { width: 38px; height: 38px; }
  .stats_grid { grid-template-columns: repeat(2, 1fr); }
  .stat_cell { border-left: 0 !important; }
  .stat_cell:nth-child(odd) { border-right: 1px solid var(--line_soft); }
  .team_grid, .office_grid, .form_grid { grid-template-columns: 1fr; }
  /* The footer keeps two columns on a phone: stacking all four blocks made it
     run to nearly two screens. The brand and the office block span the width,
     the two link lists sit side by side. */
  .footer_grid { gap: 34px 20px; }
  .footer_grid > :first-child, .footer_grid > :last-child { grid-column: 1 / -1; }
  .site_footer { padding: 56px 0 24px; }
  .footer_word { margin: 40px 0 18px; }
  .footer_about { margin: 18px 0; }
  .footer_links { gap: 12px; }
  .chip_grid { grid-template-columns: repeat(2, 1fr); }
  .ring_plate { left: -80px; top: -54px; width: 160px; height: 108px; }
  .ring_plate strong { font-size: 21px; }
  .gallery_wall { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .wall_item.is_wide { grid-column: span 2; }
  .core_facts b { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .split_inner { transform: none; }
}

/* ---------- Pinned-section sizing (fit within one viewport) ---------- */
.services_pin { padding: calc(var(--header_h) + 24px) 0 34px; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.services_head { margin-bottom: clamp(24px, 4vh, 50px); }
.services_head .section_title { font-size: clamp(32px, min(4.2vw, 6.4vh), 62px); }
.service_card { width: clamp(250px, min(27vw, 40vh), 390px); }
.group_stage.section { padding: calc(var(--header_h) + 20px) 0 60px; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.group_stage .section_title { font-size: clamp(32px, min(4.2vw, 6.4vh), 62px); }
.group_card { height: min(500px, 56vh); }
.group_stack { height: calc(min(500px, 56vh) + 30px); }
.group_card_img { height: 46%; }
@media (max-width: 900px) {
  .services_pin { min-height: 0; padding: clamp(80px, 12vw, 120px) 0 60px; }
  .services_rail_wrap { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .service_card { scroll-snap-align: center; width: 78vw; max-width: 340px; }
}

/* The group cards only fan out when three of them fit side by side. Below that
   they stack and size to their own text — a fixed height here squeezed the
   copy out of the card on tablet-width screens. main.js pins this section with
   the identical 1180px query, so the layout and the animation always agree. */
@media (max-width: 1179.98px) {
  .group_stage.section { min-height: 0; display: block; padding: 90px 0; }
  .group_stack { height: auto; display: grid; gap: 22px; perspective: none; }
  .group_card {
    position: relative; left: auto; top: auto; margin: 0 auto;
    height: auto; width: min(460px, 100%); transform: none;
  }
  .group_card_img { height: 220px; }
}
@media (min-width: 901px) and (max-width: 1179.98px) {
  .group_stack { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .group_card { width: 100%; }
  .group_card_img { height: 190px; }
}

/* ---------- small additions ---------- */
.chip_inline { font-family: var(--font_display); font-style: italic; font-size: 19px; color: var(--ivory_dim); }
.gallery_wall { grid-auto-flow: dense; }
.about_core .split_inner { transition-duration: 1.3s; }

.ring_section.section { padding-bottom: clamp(60px, 7vw, 100px); }
@media (max-width: 1320px) { .nav_link { padding: 10px 9px; letter-spacing: 0.1em; } }
@media (max-width: 640px) { .scroll_cue { display: none; } .hero_copy { bottom: 34px; } }
.wall_item { margin: 0; }

/* static hero layout when GSAP is unavailable or reduced motion is on */
html:not(.has_motion) .hero_sticky { display: flex; flex-direction: column; }
html:not(.has_motion) .car_shell { order: 0; position: relative; inset: auto; height: 100vh; height: 100svh; flex: none; }
html:not(.has_motion) .about_core { order: 1; }
html:not(.has_motion) .car_vignette, html:not(.has_motion) .light_sweep { inset: 0 0 auto 0; height: 100vh; height: 100svh; position: absolute; }
html:not(.has_motion) .hero_copy { top: 0; bottom: auto; height: 100vh; height: 100svh; display: flex; align-items: flex-end; padding-bottom: clamp(40px, 9vh, 110px); }
html:not(.has_motion) .hero_copy .container { width: 100%; }
html:not(.has_motion) .scroll_cue { top: calc(100svh - 80px); bottom: auto; }

/* hero car: show the full width of the car on landscape screens */
.car_photo { background-color: #000; }
@media (min-aspect-ratio: 4/3) { .car_photo { background-size: 100% auto; background-position: center 58%; background-repeat: no-repeat; } }

/* =========================================================
   REAL LOGO
   ========================================================= */
.brand_logo { height: 54px; width: auto; transition: height 0.5s var(--ease_out); }
.site_header.is_scrolled .brand_logo { height: 44px; }
.footer_logo { width: 240px; height: auto; }
.preloader_logo { width: 220px; height: auto; margin: 0 auto 6px; animation: logo_breathe 1.8s ease-in-out infinite; }
@keyframes logo_breathe { 50% { opacity: 0.55; transform: scale(0.97); } }
.credit_line { width: 100%; font-size: 11px; opacity: 0.7; }
@media (max-width: 640px) { .brand_logo { height: 44px; } }

/* =========================================================
   3D CAR HERO
   ========================================================= */
.will_3d .hero_stage { height: var(--hero_scroll_height, 640vh); }
.car_canvas_wrap { position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity 1.2s var(--ease_out); }
.car_canvas_wrap canvas { display: block; width: 100% !important; height: 100% !important; }
.has_3d .car_canvas_wrap { opacity: 1; }
.has_3d .car_shell, .has_3d .light_seam, .has_3d .light_sweep { opacity: 0 !important; visibility: hidden; }
.has_3d .car_vignette {
  background:
    linear-gradient(180deg, rgba(12,11,9,0.7) 0%, transparent 22%, transparent 70%, rgba(12,11,9,0.9) 100%),
    radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(12,11,9,0.6) 100%);
}
.has_3d .about_core {
  z-index: 5;
  /* Performance: this panel sits directly over the live WebGL canvas. A
     backdrop-filter here made the compositor re-read and blur a canvas that
     repaints every frame, which cost more than the whole 3D render. A slightly
     deeper gradient reads the same over the dark studio background. */
  background: radial-gradient(ellipse at 50% 50%, rgba(12,11,9,0.72), rgba(12,11,9,0.93) 75%);
}
.has_3d .about_core_bg { display: none; }
.hero_sticky { background: radial-gradient(ellipse at 50% 65%, #241e15 0%, #100e0b 55%, var(--ink) 85%); }

.model_loading {
  position: absolute; z-index: 7; right: var(--gutter); bottom: 26px;
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(12,11,9,0.6); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ivory_dim);
  transition: opacity 0.8s, visibility 0.8s;
}
.model_loading b { color: var(--brass_light); font-weight: 600; }
.model_loading i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--brass); border-right-color: transparent; animation: spin_slow 0.9s linear infinite; }
.model_loading.is_done { opacity: 0; visibility: hidden; }
html:not(.will_3d) .model_loading { display: none; }

.hero_caption { position: absolute; z-index: 6; left: var(--gutter); bottom: clamp(60px, 12vh, 130px); max-width: 560px; pointer-events: none; opacity: 0; visibility: hidden; }
.hero_caption_title { font-family: var(--font_display); font-size: clamp(38px, 5.4vw, 84px); line-height: 1; margin: 14px 0 10px; font-weight: 500; }
.hero_caption_title em { color: var(--brass_light); font-weight: 400; }
.hero_caption_ml { color: var(--brass_light); font-size: 18px; margin: 0; }
.hero_caption_inside { left: auto; right: var(--gutter); text-align: right; }
html:not(.has_motion) .hero_caption { display: none; }
.brand_logo { height: 62px; }
.site_header.is_scrolled .brand_logo { height: 50px; }
.hero_caption_split { bottom: auto; top: calc(var(--header_h) + clamp(20px, 6vh, 60px)); }
@media (max-width: 640px) { .brand_logo { height: 48px; } .site_header.is_scrolled .brand_logo { height: 42px; } }

/* A phone held sideways is only about 390px tall. The hero copy is sized
   against the viewport width, so at that height the eyebrow, the two title
   lines and the paragraph stacked taller than the screen and the first line ran
   up behind the header. Size the hero against the height instead. */
@media (max-height: 620px) and (orientation: landscape) {
  :root { --header_h: 64px; }
  .brand_logo { height: 44px; }
  .site_header.is_scrolled .brand_logo { height: 38px; }
  .hero_copy { bottom: 18px; }
  .hero_copy .container { gap: 10px; }
  .hero_title { font-size: clamp(28px, 9vh, 56px); margin-top: 6px; }
  .hero_side { max-width: 420px; }
  .hero_side p { font-size: 13px; margin-bottom: 2px; }
  .hero_side .ml_text { font-size: 14px; }
  .hero_caption { bottom: 20px; }
  .hero_caption_split { top: calc(var(--header_h) + 10px); bottom: auto; }
  .hero_caption_title { font-size: clamp(24px, 8vh, 46px); margin: 8px 0 6px; }
  .hero_caption_ml { font-size: 14px; }
  .scroll_cue { display: none; }
  /* The story panel fills one screen and clips, so its two buttons sat below
     the fold and could not be tapped. Tighten the stack until it fits. */
  .core_title { font-size: clamp(24px, 7vh, 40px); margin: 8px 0 10px; }
  .core_text { font-size: 13px; line-height: 1.55; max-width: 74ch; margin-bottom: 14px; }
  .core_facts { gap: 6px 24px; margin-bottom: 14px; }
  .core_facts li { font-size: 10px; letter-spacing: 0.16em; }
  .core_facts b { font-size: 21px; }
  .about_core_inner .btn_brass, .about_core_inner .btn_ghost { padding: 11px 20px; font-size: 11px; }
}

/* first view: red-car poster while the 3D model is still loading (never the photo) */
.car_poster { position: absolute; inset: 0; z-index: 2; background: url("../img/hero_car_poster.jpg") center / cover no-repeat; opacity: 0; transition: opacity 0.9s var(--ease_out); pointer-events: none; }
@media (max-aspect-ratio: 1/1) { .car_poster { background-image: url("../img/hero_car_poster_mobile.jpg"); } }
.will_3d .car_poster { opacity: 1; }
.has_3d .car_poster { opacity: 0; }
.will_3d .car_shell, .will_3d .light_seam, .will_3d .light_sweep { opacity: 0 !important; visibility: hidden; }
.preloader_hint { margin-top: 14px; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mute); }

/* header brand_mark: full-colour logo on a white plate */
.site_header .brand_mark { background: #fff; padding: 5px 10px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); line-height: 0; }
.brand_logo { height: 58px; width: auto; }
.site_header.is_scrolled .brand_logo { height: 46px; }
@media (max-width: 640px) { .brand_logo { height: 44px; } .site_header.is_scrolled .brand_logo { height: 40px; } }
.brand_logo { height: 70px; }
.site_header.is_scrolled .brand_logo { height: 54px; }
@media (max-width: 640px) { .brand_logo { height: 48px; } .site_header.is_scrolled .brand_logo { height: 42px; } }

/* one logo everywhere: the dark-background version (ivory horse), no plate */
.site_header .brand_mark { background: none; padding: 0; box-shadow: none; border-radius: 0; }
.brand_logo { height: 64px; }
.site_header.is_scrolled .brand_logo { height: 50px; }
.preloader_logo { width: 260px; }
@media (max-width: 640px) { .brand_logo { height: 46px; } .site_header.is_scrolled .brand_logo { height: 40px; } .preloader_logo { width: 210px; } }