/*
 * Satyar design: the whole stylesheet. Sections in the order below; each matches a block, part or shared layer
 * of the WordPress theme, so Mateusz can split it back out.
 * Design source: the Figma designs in raw/figma (1440px frames). Breakpoints kept from the Bricks build: 991 / 767 / 478.
 */

/* ==========================================================================
   Tokens: colours, fonts, sizes (WordPress preset variable names, from theme.json)
   ========================================================================== */
/*
 * Satyar design tokens.
 * Names match the CSS variables WordPress generates from theme.json
 * (--wp--preset--{type}--{slug} from settings, --wp--custom--{path} from settings.custom),
 * so prototype CSS ports into the theme unchanged.
 * Every value here has a twin entry in theme.json. Change both or neither.
 *
 * Source of truth: the Figma designs (raw/figma, by Dominika). Colours are the Figma palette; the fluid type scale
 * below is still the Bricks one (rem converted at 10px) and stays for text the Figma does not size.
 */

:root {
  /* Colour - Bricks palette */
  --wp--preset--color--black: #000000;    /* overlays, loader, menus */
  --wp--preset--color--base: #131315;     /* html background, every section (Bricks --primary-a40) */
  --wp--preset--color--surface: #1f1f1f;  /* Figma #1F1F1F */
  --wp--preset--color--panel: #2b2b2d;    /* Figma menus: full-screen panel background */
  --wp--preset--color--line: #2c2b2e;     /* hairlines on inner pages */
  --wp--preset--color--contrast: #ebdbc1; /* body text and headings (Bricks --secondary-a40) */
  --wp--preset--color--accent: #d2aa66;   /* gold (Bricks --bricks-color-urzpyv) */
  --wp--preset--color--accent-alt: #d7b46a; /* gold used by the loader logo and mobile menu */
  --wp--preset--color--muted: #b6b5b8;    /* hero slider background (Bricks --bricks-color-lkdlwx) */
  --wp--preset--color--silver: #e6e7e8;   /* slider background behind images */
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--error: #f0a493;    /* form errors only */

  /* Font families - files in assets/fonts */
  --wp--preset--font-family--display: "Gilda Display", Georgia, serif;   /* headings */
  --wp--preset--font-family--body: "Source Sans 3", system-ui, sans-serif; /* body, nav, buttons */
  --wp--preset--font-family--accent: "Gayathri", sans-serif;            /* brand lists, dealer kicker, footer links */
  --wp--preset--font-family--label: "Aboreto", serif;                   /* "Discover more" text links */

  /* Font sizes - Bricks fluid --txt-* scale, exact */
  --wp--preset--font-size--2xs: clamp(0.65625rem, -0.13vi + 0.6875rem, 0.58125rem);
  --wp--preset--font-size--xs: clamp(0.725rem, -0.05vi + 0.73125rem, 0.69375rem);
  --wp--preset--font-size--s: clamp(0.79375rem, 0.06vi + 0.78125rem, 0.83125rem);
  --wp--preset--font-size--base: clamp(0.875rem, 0.2vi + 0.825rem, 1rem);
  --wp--preset--font-size--m: clamp(0.9625rem, 0.39vi + 0.86875rem, 1.2rem);
  --wp--preset--font-size--l: clamp(1.05625rem, 0.62vi + 0.9125rem, 1.4375rem);
  --wp--preset--font-size--xl: clamp(1.1625rem, 0.91vi + 0.95rem, 1.725rem);
  --wp--preset--font-size--2xl: clamp(1.28125rem, 1.29vi + 0.975rem, 2.075rem);
  --wp--preset--font-size--3xl: clamp(1.40625rem, 1.75vi + 0.99375rem, 2.4875rem);
  --wp--preset--font-size--4xl: clamp(1.55rem, 2.33vi + 0.99375rem, 2.9875rem);
  --wp--preset--font-size--5xl: clamp(1.70625rem, 3.05vi + 0.98125rem, 3.58125rem);
  --wp--preset--font-size--6xl: clamp(1.875rem, 3.93vi + 0.94375rem, 4.3rem);
  --wp--preset--font-size--7xl: clamp(2.8125rem, 3.93vi + 0.94375rem, 4.925rem);

  /* Spacing - used by inner pages; Bricks layout values stay as px in the rules below */
  --wp--preset--spacing--20: 0.5rem;
  --wp--preset--spacing--30: 1rem;
  --wp--preset--spacing--40: 1.5rem;
  --wp--preset--spacing--50: clamp(2rem, 3vw, 3rem);
  --wp--preset--spacing--60: clamp(3rem, 5vw, 5rem);
  --wp--preset--spacing--70: clamp(4rem, 8vw, 8rem);

  /* Layout - content frame: 1600px max on desktop, 40px gutters below that. Full-bleed photos, sliders and galleries ignore it.
     --frame is the side padding that keeps a full-width section's content inside 1600px, centred: max(gutter, (100% - 1600px) / 2).
     Use it as padding-inline on any full-width block; Figma's 104px inner inset becomes calc(var(--frame) + 64px). */
  --wp--style--global--content-size: 768px;
  --wp--style--global--wide-size: 1600px;
  --gutter: 2.5rem;
  --frame: max(var(--gutter), calc((100% - var(--wp--style--global--wide-size)) / 2));
  --wp--style--root--padding-left: 1.875rem;
  --wp--style--root--padding-right: 1.875rem;

  /* Custom */
  --wp--custom--radius--pill: 200px;      /* Bricks --btn-radius */
  --wp--custom--radius--field: 1.25rem;
  --body-line-height: 1.7;              /* 17px body copy on every page (29px lines) */
  --wp--custom--header--height: 80px;   /* sticky (scrolled) header bar; 64px on phones */
  --screen-minus-header: calc(var(--vh, 1vh) * 100 - var(--wp--custom--header--height)); /* home photo sections */
  --wp--custom--ease: cubic-bezier(0.16, 1, 0.3, 1);
  --wp--custom--duration: 0.6s;
  --vh: 1vh;                              /* real viewport unit, set by site.js */
}

/* ==========================================================================
   Base: fonts, elements, buttons, layout helpers
   ========================================================================== */
/*
 * Global styles: Figma type and buttons on top of the Bricks base (fonts, links, section scaffolding).
 * In the theme this splits into theme.json "styles" (body, headings, link, button), fontFace, and the theme stylesheet.
 * Breakpoints are Bricks': 991px tablet, 767px mobile landscape, 478px mobile portrait.
 */

/* Fonts. Weight mapping copied from Bricks on purpose: Source Sans weight 400 uses the bold file,
   Gayathri 300 uses the thin file. Changing it changes how the live site looks. */
@font-face { font-family: "Gilda Display"; font-weight: 400; font-display: swap; src: url(../fonts/gildadisplay-regular.ttf) format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 300; font-display: swap; src: url(../fonts/sourcesans3-light.ttf) format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url(../fonts/sourcesans3-bold.ttf) format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 500; font-display: swap; src: url(../fonts/sourcesans3-medium.ttf) format("truetype"); }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url(../fonts/sourcesans3-bold.ttf) format("truetype"); }
@font-face { font-family: "Gayathri"; font-weight: 300; font-display: swap; src: url(../fonts/gayathri-thin.ttf) format("truetype"); }
@font-face { font-family: "Gayathri"; font-weight: 400; font-display: swap; src: url(../fonts/gayathri-regular.ttf) format("truetype"); }
@font-face { font-family: "Gayathri"; font-weight: 700; font-display: swap; src: url(../fonts/gayathri-bold.ttf) format("truetype"); }
@font-face { font-family: "Aboreto"; font-weight: 400; font-display: swap; src: url(../fonts/aboreto-regular.ttf) format("truetype"); }

*, *::before, *::after { box-sizing: border-box; }
* { text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.2); }

html { background-color: var(--wp--preset--color--base); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--base);
  font-weight: 500;
  line-height: 1.7;
  color: var(--wp--preset--color--contrast);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  --sb-track-color: #8c8c8c; --sb-thumb-color: #000000; --sb-size: 5px;
}
body::-webkit-scrollbar { width: var(--sb-size); }
body::-webkit-scrollbar-track { background: var(--sb-track-color); border-radius: 1px; }
body::-webkit-scrollbar-thumb { background: var(--sb-thumb-color); border-radius: 1px; border: 1px solid #7b7b7b; }
@supports not selector(::-webkit-scrollbar) { body { scrollbar-color: var(--sb-thumb-color) var(--sb-track-color); } }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.4; text-rendering: optimizeLegibility; }
h1 { font-size: var(--wp--preset--font-size--3xl); font-family: var(--wp--preset--font-family--display); font-weight: 400; text-transform: uppercase; }
h2 { font-size: var(--wp--preset--font-size--3xl); font-family: var(--wp--preset--font-family--display); font-weight: 400; line-height: 1.15; text-align: center; text-transform: uppercase; }
h3 { font-size: var(--wp--preset--font-size--xl); font-family: var(--wp--preset--font-family--display); text-align: center; text-transform: uppercase; }
h4 { font-size: var(--wp--preset--font-size--l); font-family: var(--wp--preset--font-family--display); text-transform: uppercase; }
p { margin: 0; }
ul { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
button { border: none; cursor: pointer; padding: 0; font: inherit; background: none; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 3px; }
section, .splide, .splide__slide img { overflow: hidden; }

/* Links: every link and button grows 5% and turns gold on hover (Bricks global custom CSS) */
a { color: inherit; text-decoration: none; transition: color 0.3s ease, transform 0.3s ease; }
a:hover { color: var(--wp--preset--color--accent); transform: scale(1.05); }

/* Bricks section and container */
.site-section { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 3.75rem 1.875rem; }
.site-container { display: flex; flex-direction: column; align-items: flex-start; width: 100%; max-width: 100%; margin-inline: auto; } /* width comes from the section's --frame padding */
@media (max-width: 991px) { .site-section { padding-inline: 1.25rem; } }
@media (max-width: 767px) { .site-section { padding: 2.5rem 0.9375rem; } }
@media (max-width: 478px) { .site-section { padding: 1.25rem; } .site-container { padding: 1.25rem; } }

/* Buttons - core/button markup in the Figma style: 76px pill, 1px gold line, Gayathri 20px caps, cream text.
   .is-size-lg / .is-size-xl are kept as class names for the theme but look the same (Figma has one button size). */
.wp-block-buttons { display: flex; flex-wrap: wrap; }
.wp-block-button__link {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 76px; padding: 0.5em 3rem 0; /* Gayathri draws its caps high in the line box: half an em of top padding centres them (measured) */
  border: 1px solid var(--wp--preset--color--accent); border-radius: var(--wp--custom--radius--pill);
  background-color: transparent; color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--accent); font-size: 1.25rem; font-weight: 400; line-height: 1.2; letter-spacing: 0; text-align: center; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.wp-block-button__link::before {
  content: ""; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
  background: linear-gradient(130deg, transparent 10%, rgba(255, 255, 255, 0.35) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.35) 55%, transparent 90%);
  transform: skewX(-25deg); transition: left 0.6s ease; pointer-events: none;
}
.wp-block-button__link:hover { background-color: rgba(210, 170, 102, 0.2); color: var(--wp--preset--color--contrast); transform: none; }
.wp-block-button__link:hover::before { left: 150%; }
@media (max-width: 767px) { .wp-block-button__link { min-height: 60px; padding-inline: 2rem; font-size: 1.0625rem; } }
@media (max-width: 478px) { .wp-block-button__link { padding-inline: 1.5rem; font-size: 1rem; } }

/* Icon fonts Bricks used (Themify: SIL OFL, Ionicons 2: MIT) */
@font-face { font-family: "themify"; font-weight: 400; font-display: block; src: url(../fonts/themify.woff) format("woff"); }
@font-face { font-family: "Ionicons"; font-weight: 400; font-display: block; src: url(../fonts/ionicons.woff2) format("woff2"); }
.ti, .ion { display: inline-block; font-style: normal; font-weight: 400; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; }
.ti { font-family: "themify"; }
.ion { font-family: "Ionicons"; }
.ti-filter::before { content: "\e6a2"; }
.ti-search::before { content: "\e610"; }
.ion-ios-arrow-down::before { content: "\f3d0"; }

/* Inner-page scaffolding (Bricks): spacer under the fixed header, breadcrumb row */
.header-spacer { height: 114px; }
.breadcrumb-row { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 var(--frame); }
.bx-breadcrumbs { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.3125rem; font-size: 0.875rem; font-weight: 300; line-height: 1.3; color: var(--wp--preset--color--contrast); }
.bx-breadcrumbs .separator { display: flex; }
.bx-breadcrumbs [aria-current] { font-weight: 700; color: var(--wp--preset--color--white); }
@media (max-width: 991px) { .header-spacer { height: 88px; } .breadcrumb-row { padding-inline: 1.25rem; } }

/* CTA band ("Do you need more information?"): the outline "S" behind a heading and button (Figma archive, contact, carbon) */
.cta-band { position: relative; justify-content: flex-start; height: 960px; padding: 21.25rem 2.5rem 0; margin: 0; overflow: hidden; background-color: var(--wp--preset--color--base); }
.cta-band__content { position: relative; display: flex; justify-content: center; width: 100%; }
.cta-band__content h2 { max-width: 880px; margin-bottom: 6rem; font-size: 4.875rem; line-height: 1.2; }
.cta-band .wp-block-button { position: relative; }
@media (max-width: 991px) { .cta-band { height: auto; padding: 10rem 1.25rem; } .cta-band__content h2 { margin-bottom: 3.5rem; font-size: 3.25rem; } }
@media (max-width: 767px) { .cta-band { padding-block: 6.25rem; } .cta-band__content h2 { margin-bottom: 2.5rem; font-size: 2.25rem; } }

/* Outline "S" (the loader's background SVG) used behind the dealer band and the CTA bands */
.s-pattern { position: absolute; top: 0; left: 50%; width: 1027px; height: 889px; transform: translateX(-50%); pointer-events: none; }
.s-pattern path { stroke: var(--wp--preset--color--contrast); stroke-opacity: 0.2; fill: none; }
@media (max-width: 991px) { .s-pattern { top: 50%; width: 90%; height: auto; transform: translate(-50%, -50%); } }

/* Filter checkbox (Figma): 18px square, cream 1px line; checked = cream fill with a dark tick */
label.depth-0 { position: relative; display: flex; align-items: center; cursor: pointer; user-select: none; }
label.depth-0 > input[type="checkbox"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.depth-0 > .brx-option-text { position: relative; display: flex; align-items: center; color: var(--wp--preset--color--white); font-size: 1.0625rem; font-weight: 500; line-height: 1.3; }
label.depth-0 > .brx-option-text::before { content: ""; flex: none; width: 18px; height: 18px; margin-right: 0.75rem; border: 1px solid rgba(235, 219, 193, 0.6); border-radius: 2px; transition: all 0.15s ease; }
label.depth-0 > .brx-option-text::after { content: ""; position: absolute; left: 6px; top: 45%; width: 5px; height: 9px; border-right: 2px solid var(--wp--preset--color--base); border-bottom: 2px solid var(--wp--preset--color--base); transform: translateY(-50%) rotate(45deg); opacity: 0; transition: opacity 0.15s ease; pointer-events: none; }
label.depth-0 > input:checked + .brx-option-text::before { background: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); }
label.depth-0 > input:checked + .brx-option-text::after { opacity: 1; }
label.depth-0 > input:focus-visible + .brx-option-text::before { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 2px; }
label.depth-0.brx-option-disabled { cursor: default; opacity: 0.5; }

/* Utilities shared with inner pages */
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.has-global-padding { padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right); }
.alignwide { max-width: var(--wp--style--global--wide-size); margin-inline: auto; }
.section { padding-block: var(--wp--preset--spacing--70); }
.section--deep { background: var(--wp--preset--color--black); }
.kicker { font-size: var(--wp--preset--font-size--s); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.lead { font-size: var(--wp--preset--font-size--xl); line-height: 1.5; max-width: 38ch; }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5em; color: var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--s); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
.icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0; padding: 0; font-size: var(--wp--preset--font-size--s); color: var(--wp--preset--color--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.5em; opacity: 0.5; }
.breadcrumbs [aria-current] { color: var(--wp--preset--color--contrast); }
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--wp--custom--duration) var(--wp--custom--ease), transform var(--wp--custom--duration) var(--wp--custom--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Sections: shared section looks and page sections
   ========================================================================== */
/*
 * Section styles -> theme.json section styles (block style variations on core/group, WP 6.6+),
 * class is-style-<name>. Page-specific text stays inline in each template; only the look is shared.
 * One layout family per section style. A page uses each family at most once.
 */

/* ===================== Front page: Figma "Home" (raw/figma/Home.jpg), 1440px frame ===================== */

/* overlay statement: 980px photo band, dark overlay, heading and button (innovation, handcrafted) */
.is-style-overlay-statement { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: var(--screen-minus-header); padding: 0 2.5rem; margin: 0; overflow: hidden; background-color: var(--wp--preset--color--base); }
.overlay-statement__media { position: absolute; inset: 0; margin: 0; }
.overlay-statement__media img { width: 100%; height: 100%; object-fit: cover; }
.is-style-overlay-statement::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(19, 19, 21, var(--overlay, 0.55)); pointer-events: none; }
.overlay-statement__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 3.5rem; width: 100%; }
.overlay-statement__content h2 { max-width: 1060px; font-size: 5rem; line-height: 1.2; }
/* innovation: content centred vertically like the other photo bands (Tomek, 2026-10-07; Figma had it near the top) */
.innovation .overlay-statement__content { gap: 3.25rem; }
.innovation .overlay-statement__content h2 { max-width: 900px; font-size: 4rem; }
.handcrafted { --overlay: 0.5; }
.handcrafted { padding-top: 2.25rem; }
.handcrafted .overlay-statement__content { gap: 4.9375rem; }
@media (max-width: 991px) {
  .overlay-statement__content h2, .innovation .overlay-statement__content h2 { font-size: 3.25rem; }
}
@media (max-width: 767px) {
  .is-style-overlay-statement { padding-inline: 1.25rem; }
  .overlay-statement__content { gap: 2.5rem; }
  .overlay-statement__content h2, .innovation .overlay-statement__content h2 { font-size: 2.25rem; }
}

/* carbon elements: gold heading, 1046 x 539 image, button */
.carbon-elements { justify-content: flex-start; height: 980px; padding: 4.9375rem 2.5rem 0; margin: 0; background-color: var(--wp--preset--color--base); }
.carbon-elements__head h2 { font-size: 5rem; color: var(--wp--preset--color--accent); }
.carbon-elements__body { display: flex; flex-direction: column; align-items: center; width: 100%; }
.carbon-elements__media { position: relative; width: 1046px; max-width: 100%; height: 539px; margin: 3.1875rem 0 4.5rem; }
.carbon-elements__media::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); pointer-events: none; }
.carbon-elements__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) {
  .carbon-elements { height: auto; padding-block: 5rem; }
  .carbon-elements__head h2 { font-size: 3.5rem; }
  .carbon-elements__media { height: auto; aspect-ratio: 1046 / 539; margin: 2rem 0 3rem; }
}
@media (max-width: 767px) { .carbon-elements { padding: 3.75rem 1.25rem; } .carbon-elements__head h2 { font-size: 2.5rem; } }

/* dealer network band: the outline "S" behind a gold kicker, heading and button */
.dealer-band { position: relative; justify-content: center; height: 919px; padding: 6.625rem 2.5rem 0; margin: 0; overflow: hidden; background-color: var(--wp--preset--color--base); }
.dealer-band__content { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
.dealer-band__kicker { font-family: var(--wp--preset--font-family--accent); font-size: 2.0625rem; font-weight: 400; line-height: 1.2; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.dealer-band__content h2 { max-width: 820px; margin: 2rem 0 6rem; font-size: 4.875rem; line-height: 1.2; }
@media (max-width: 991px) {
  .dealer-band { height: auto; padding-block: 7.5rem; }
  .dealer-band__content h2 { margin-bottom: 4rem; font-size: 3.25rem; }
}
@media (max-width: 767px) {
  .dealer-band { padding: 5rem 1.25rem; }
  .dealer-band__kicker { font-size: 1.375rem; text-align: center; }
  .dealer-band__content h2 { margin: 1.5rem 0 2.5rem; font-size: 2.25rem; }
}

/* belonging: heading, three-column brand list, button; 675 x 980 photo flush with the right edge */
.belonging { padding: 0 0 0 var(--frame); margin: 0; background-color: var(--wp--preset--color--base); }
.belonging__grid { display: grid; grid-template-columns: 1fr 675px; align-items: start; width: 100%; }
.belonging__text { display: flex; flex-direction: column; align-items: flex-start; padding: 5.75rem 2.5rem 0 0; } /* photo stays flush with the window edge */
.belonging__intro h2 { max-width: 680px; font-size: 4rem; line-height: 1.1; text-align: left; }
.brand-columns { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 5rem; row-gap: 0.5rem; margin: 4.8125rem 0 4.3125rem; padding: 0; list-style: none; font-family: var(--wp--preset--font-family--accent); font-size: 1.375rem; line-height: 1.2; text-transform: uppercase; color: var(--wp--preset--color--white); }
.brand-columns a { display: block; padding-top: 0.25rem; }
.belonging__media { height: 980px; }
.belonging__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1200px) { .belonging__grid { grid-template-columns: 1fr 45%; } .belonging__intro h2 { font-size: 3.25rem; } }
@media (max-width: 991px) {
  .belonging { padding-left: 0; }
  .belonging__grid { grid-template-columns: 1fr; }
  .belonging__text { padding: 5rem 1.25rem 3.75rem; }
  .belonging__media { height: auto; aspect-ratio: 675 / 980; max-height: 80vh; }
}
@media (max-width: 767px) {
  .belonging__intro h2 { font-size: 2.25rem; }
  .brand-columns { grid-template-columns: repeat(2, max-content); column-gap: 2.5rem; margin: 2.5rem 0; font-size: 1.125rem; }
}

/* Pattern: latest-posts (core/query): title row, then rows of text left and 515 x 239 image right */
.press-release { align-items: center; padding: 6.25rem calc(var(--frame) + 4rem) 1.25rem; margin: 0; background-color: var(--wp--preset--color--base); }
.press-release__head { flex-direction: row; align-items: baseline; margin-bottom: 1.5rem; }
.press-release__title { font-size: 2.375rem; text-align: left; }
.press-release__more { margin-left: auto !important; font-family: var(--wp--preset--font-family--label); font-size: 1.0625rem; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.press-release__item { border-bottom: 1px solid rgba(235, 219, 193, 0.2); }
.press-release__item:last-child { border: none; }
.press-release__link { display: grid; grid-template-columns: 1fr 515px; align-items: center; gap: 2.5rem; width: 100%; padding: 1.5rem 0; }
.press-release__item:first-of-type .press-release__link { padding-top: 0; }
.press-release__link:hover { transform: none; }
.press-release__text { max-width: 430px; }
.press-release__text h3 { margin-bottom: 0.75rem; font-size: 1.5rem; font-weight: 400; line-height: 1.2; text-align: left; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
.press-release__text p { font-size: 1.0625rem; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--contrast); }
.press-release__media { height: 239px; }
.press-release__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) { .press-release__link { grid-template-columns: 1fr 45%; } }
@media (max-width: 767px) {
  .press-release { padding: 3.75rem 1.25rem 1.25rem; }
  .press-release__title { font-size: 1.875rem; }
  .press-release__more { font-size: 0.875rem; }
  .press-release__link { grid-template-columns: 1fr; gap: 1rem; }
  .press-release__media { order: -1; height: 200px; }
}

/* ===================== Contact page: Figma "Contact" (raw/figma/Contact.jpg) ===================== */
.contact { align-items: stretch; padding: 5.0625rem calc(var(--frame) + 4.25rem) 5rem; }
.contact__grid { display: grid; grid-template-columns: 1fr 662px; column-gap: 2.5rem; align-items: start; }
.contact__info { display: flex; flex-direction: column; align-items: flex-start; }
.contact__form { display: flex; flex-direction: column; align-items: stretch; }
.contact__title { margin-bottom: 1.875rem; font-size: 2.5rem; line-height: 1.2; text-align: left; }
/* Both column headings on one line with the same gap below, so the first detail row lines up with the first form field */
.contact__hours { display: grid; grid-template-columns: max-content max-content; column-gap: 1.5rem; row-gap: 1.125rem; margin: 0; font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--wp--preset--color--white); }
.contact__hours dt, .contact__hours dd { margin: 0; }
.contact__details { display: flex; flex-direction: column; gap: 1.125rem; margin: 2rem 0 0; padding: 0; list-style: none; font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--wp--preset--color--white); }
.contact__details li { display: grid; grid-template-columns: 18px auto auto; justify-content: start; align-items: start; column-gap: 0.875rem; }
.contact__details .icon-img { width: 18px; height: 18px; margin-top: 0.2em; filter: invert(92%) sepia(12%) saturate(400%) hue-rotate(345deg); } /* black currentColor SVG files tinted cream */
.contact__details li > span:not(.contact__note) { line-height: 1.4; margin-top: -0.1em; }
.contact__note { margin-left: 0.625rem; }
.contact .social-icons { margin: 2rem 0 1.5rem; }
.contact__register { font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--wp--preset--color--white); }
@media (max-width: 991px) {
  .contact { padding: 2.5rem 1.25rem 3.75rem; }
  .contact__grid { grid-template-columns: 1fr; row-gap: 3.5rem; }
}
@media (max-width: 478px) { .contact__hours, .contact__details, .contact__register { font-size: 1.125rem; } .contact__details li { grid-template-columns: 18px auto; } .contact__note { grid-column: 2; margin-left: 0; } }

/* CTA band, smaller heading (contact: "Do you want to join our dealer team?") */
.cta-band--small { height: 890px; padding-top: 24.5rem; }
.cta-band--small .cta-band__content h2 { max-width: 760px; margin-bottom: 8.875rem; font-size: 2.5rem; }
@media (max-width: 991px) { .cta-band--small { height: auto; padding-block: 10rem; } .cta-band--small .cta-band__content h2 { margin-bottom: 3.5rem; font-size: 2rem; } }

/* ===================== About page: Figma "About us" (raw/figma/About us.jpg) ===================== */
/* page-hero: 750px photo, title near the top */
.page-hero { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 750px; padding: 0; overflow: hidden; background-color: var(--wp--preset--color--base); }
.page-hero__slide { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; padding: 9.375rem 2.5rem 0; }
.page-hero__shade { position: absolute; inset: 0; z-index: 1; background-color: rgba(19, 19, 21, 0.2); }
.page-hero__title { position: relative; z-index: 2; font-size: 6.4375rem; line-height: 1.15; text-align: center; }
.page-hero__media { position: absolute; inset: 0; margin: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-about-us .breadcrumb-row, .page-carbon-materials .breadcrumb-row { padding-top: 1.5625rem; }

/* mission text: large light paragraph */
.about-mission { align-items: stretch; padding: 5rem calc(var(--frame) + 4rem) 0; }
.about-mission__text { max-width: 850px; font-size: 1.0625rem; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--white); }
.about-mission--end { padding: 7.25rem calc(var(--frame) + 4rem) 0 calc(var(--frame) + 23.4375rem); }
.about-mission__end { display: flex; flex-direction: column; align-items: flex-start; gap: 2.125rem; }
.about-mission__end .about-mission__text { max-width: 920px; }

/* story rows: text beside a 778 x 560 photo, sides alternate */
.about-story { align-items: stretch; padding: 7.5rem calc(var(--frame) + 4rem) 0; }
.about-story + .about-story { padding-top: 7.5rem; }
.about-story__grid { display: grid; grid-template-columns: 1fr 778px; column-gap: 5.875rem; align-items: center; }
.about-story__grid.is-reversed { grid-template-columns: 778px 1fr; column-gap: 5rem; }
.about-story__text h2 { font-size: 3.5rem; line-height: 1.2; text-align: left; }
.about-story__body { max-width: 360px; margin-top: 3.5rem; font-size: 1.0625rem; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--white); }
.about-story__media { height: 560px; }
.about-story__media img { width: 100%; height: 100%; object-fit: cover; }

/* photo carousel: heading with gold arrows, 769 x 560 photos, the next one peeking in */
.vs-carousel-section.about-gallery { padding: 7.5rem 0 0; }
.about-gallery .vs-carousel-section__top { align-items: flex-start; }
.about-gallery .vs-carousel-section__top h2 { max-width: 1080px; }
.about-gallery .vs-pagination { padding-top: 0.75rem; }
.about-gallery figure { height: 560px; margin: 0; }
.about-gallery figure img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 991px) {
  .page-hero { height: 560px; }
  .page-hero__title { font-size: 4rem; }
  .about-mission, .about-story, .about-mission--end { padding-inline: 1.25rem; }
  .about-story__grid, .about-story__grid.is-reversed { grid-template-columns: 1fr; row-gap: 2rem; }
  .about-story__grid.is-reversed .about-story__media { order: 2; }
  .about-story__media, .about-gallery figure { height: 420px; }
  .about-story__body { max-width: 600px; margin-top: 1.5rem; }
}
@media (max-width: 767px) {
  .page-hero { height: 480px; }
  .page-hero__title { font-size: 2.75rem; }
  .about-story { padding-top: 4rem; }
  .about-story__text h2 { font-size: 2.5rem; }
  .about-story__media, .about-gallery figure { height: 260px; }
}

/* ==========================================================================
   Header (header.html)
   ========================================================================== */
/* Part: header. Figma bar; panels and burger menu kept from the Bricks header. Ports to the theme stylesheet. */

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2147483647;
  color: var(--wp--preset--color--contrast);
  transition: background-color 0.3s, color 0.3s, transform 0.4s;
}
/* Frosted sticky surface on its own layer, so fixed menu panels keep their viewport positioning. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--wp--preset--color--base);
  box-shadow: inset 0 -1px 0 rgba(235, 219, 193, 0.1);
  opacity: 0; transition: opacity 0.35s ease;
}
.site-header.is-scrolling::before { opacity: 1; }
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .site-header::before {
    background-color: rgba(19, 19, 21, 0.68);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    backdrop-filter: blur(20px) saturate(120%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header::before {
    background-color: var(--wp--preset--color--base);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header::before { transition: none; }
}
/* Home: slides without hero-slide--light use dark header text until the page scrolls */
.home:not(.hero-is-light) .site-header:not(.is-scrolling) { color: var(--wp--preset--color--base); }

.site-header__bar { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 var(--frame); }
.site-header__inner { flex-direction: row; align-items: center; width: 100%; height: 120px; column-gap: 0; transition: height 0.3s; }
.site-header.is-scrolling .site-header__inner { height: var(--wp--custom--header--height); }

.site-header__nav, .site-header__logo, .site-header__burger { display: flex; align-items: center; }
.site-header__nav { flex: 1 1 100%; font-weight: 500; font-size: 1rem; line-height: 1.2; letter-spacing: 0.0312rem; text-transform: uppercase; }
.site-header__nav--left { justify-content: flex-start; z-index: 9; }
.site-header__nav--right { justify-content: flex-end; }
.site-header__nav > ul { display: flex; gap: 3rem; list-style: none; }
.nav-item { position: relative; transition: 0.2s; }
.nav-item > a, .submenu-toggle > a { display: flex; color: inherit; transition: 0.2s; }
.submenu-toggle { display: flex; align-items: center; transition: color 0.3s ease, transform 0.3s ease; }
.submenu-toggle > a { cursor: pointer; }
/* Figma shows no chevron: the toggle stays for keyboard and screen readers, the whole item opens the panel on click */
.submenu-toggle > button { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.submenu-toggle:hover, .nav-item > a:hover { color: var(--wp--preset--color--accent); }
.submenu-toggle:hover a, .submenu-toggle a:hover, .nav-item > a:hover, .site-header__logo a { transform: none !important; }

.site-header__logo { flex: 0 0 auto; justify-content: center; }
.site-header__logo a { display: block; color: inherit; }
.wordmark { display: block; width: 130px; height: auto; }
.site-header__logo--mobile { display: none; }
.site-header__burger { display: none; flex: 0 0 auto; justify-content: flex-end; }

/* Desktop full-screen panels (Figma "menu-vehicle-cmponents", "menu-satryar"): open on click only */
.megamenu {
  position: fixed; inset: 0; z-index: 1000;
  width: 100%; height: calc(var(--vh, 1vh) * 100); overflow-y: auto;
  background: var(--wp--preset--color--panel); color: var(--wp--preset--color--contrast);
  font-weight: 400; letter-spacing: 0; text-transform: none;
  opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;
}
.has-megamenu.open > .megamenu { opacity: 1; visibility: visible; }
.megamenu-close { position: absolute; top: 36px; right: var(--frame); z-index: 1001; display: flex; width: 28px; height: 28px; color: var(--wp--preset--color--contrast); }
.megamenu-close svg { width: 100%; height: 100%; }
.megamenu-close:hover { color: var(--wp--preset--color--accent); }
.megamenu-logo:hover { transform: none; }
.megamenu-logo img { width: 124px; height: auto; }

/* "About Satyar" panel: gold wordmark top left, three links */
.about-panel { position: relative; display: flex; flex-direction: column; min-height: 100%; padding: 2.5625rem var(--frame); }
.about-panel__logo { align-self: flex-start; }
.about-panel__links { display: flex; flex-direction: column; gap: 2.375rem; margin: 0; padding: 13.875rem 0 0 4rem; list-style: none; font-family: var(--wp--preset--font-family--accent); font-size: 1.9375rem; line-height: 1.15; }
.about-panel__links a { display: inline-block; padding-top: 0.3125rem; }
.about-panel__links a:hover { transform: none; color: var(--wp--preset--color--accent); }

/* Tablet: logo left, burger right */
@media (max-width: 991px) {
  .site-header__bar { padding-inline: 1.25rem; }
  .site-header__inner { height: var(--wp--custom--header--height); justify-content: space-between; }
  .site-header__nav { display: none; }
  .site-header__burger { display: flex; }
}
/* Mobile portrait: the mobile logo replaces the desktop one */
@media (max-width: 478px) {
  :root { --wp--custom--header--height: 64px; }
  .site-header__inner { height: var(--wp--custom--header--height); }
  .site-header__logo { display: none; }
  .site-header__logo--mobile { display: flex; flex: 1 1 auto; justify-content: flex-start; }
  .site-header__logo--mobile .wordmark { width: 110px; }
}

/* ==========================================================================
   Footer (footer.html)
   ========================================================================== */
/* Part: footer. Figma footer (Home.jpg, bottom). Ports to the theme stylesheet. */
.site-footer { position: relative; padding: 0 var(--frame); background-color: var(--wp--preset--color--base); }
.site-footer__main { padding: 6.5rem 0 2.875rem; }
.site-footer__wrap { flex-direction: row; justify-content: space-between; width: 100%; }
.site-footer__cta { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__logo img { width: 104px; height: 57px; }
.site-footer__logo:hover { transform: none; }
.site-footer__title { max-width: 400px; margin: 2.25rem 0 3.125rem; font-size: 4.875rem; line-height: 1.2; text-align: left; }
.site-footer__button .wp-block-button__link { min-width: 311px; }
.social-icons { display: flex; gap: 0.75rem; align-items: center; margin-top: 2.5rem; }
/* Social icons: hairline ring + monoline glyph (inline SVG, currentColor), cream; ring and glyph turn gold on hover */
.social-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(235, 219, 193, 0.3); border-radius: 50%; color: var(--wp--preset--color--contrast); transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease; }
.social-icon svg { width: 20px; height: 20px; }
.social-icon:hover, .social-icon:focus-visible { transform: none; border-color: var(--wp--preset--color--accent); background-color: rgba(210, 170, 102, 0.08); color: var(--wp--preset--color--accent); }

.site-footer__cols { display: grid; grid-template-columns: 297px max-content; width: auto; margin-right: 0.4375rem; }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; }
.site-footer__label { margin-bottom: 1.875rem; padding-top: 0.25rem; text-align: left; font-family: var(--wp--preset--font-family--accent); font-size: 1.25rem; font-weight: 400; line-height: 1.2; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
.site-footer__brands, .site-footer__nav ul { display: flex; flex-direction: column; gap: 0.625rem; list-style: none; }
.site-footer__brands > div, .site-footer__nav { font-family: var(--wp--preset--font-family--accent); font-size: 1.5rem; font-weight: 400; line-height: 1.25; letter-spacing: 0.0312rem; }
.site-footer__brands a, .site-footer__nav a { display: block; padding-top: 0.25rem; }

.site-footer__bottom { padding: 1.5rem 0; border-top: 1px solid rgba(235, 219, 193, 0.2); }
.site-footer__bottom-inner { display: flex; flex-direction: row; align-items: center; width: 100%; font-family: var(--wp--preset--font-family--accent); font-size: 1rem; line-height: 1.2; }
.site-footer__copy { display: flex; flex-direction: row; gap: 1.0625rem; width: 100%; }
.site-footer__copy p { padding-top: 0.1875rem; }
.site-footer__legal { display: flex; flex-direction: row; justify-content: flex-end; gap: 1.0625rem; width: 100%; white-space: nowrap; }
.site-footer__legal a { padding-top: 0.1875rem; }

@media (max-width: 991px) {
  .site-footer { padding-inline: 1.25rem; }
  .site-footer__main { padding-top: 5rem; }
  .site-footer__wrap { flex-direction: column; gap: 3.5rem; }
  .site-footer__title { font-size: 3.5rem; }
}
@media (max-width: 767px) {
  .site-footer__cols { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; width: 100%; margin: 0; }
  .site-footer__label { font-size: 1rem; }
  .site-footer__brands > div, .site-footer__nav { font-size: 1.125rem; }
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .site-footer__legal { justify-content: flex-start; }
}
@media (max-width: 478px) {
  .site-footer__title { font-size: 2.75rem; }
  .site-footer__button, .site-footer__button .wp-block-button__link { width: 100%; min-width: 0; }
}

/* ==========================================================================
   Block satyar/site-loader
   ========================================================================== */
/* Block: satyar/site-loader. Copied from the Bricks inline CSS. */
/* Everything but the overlay stays hidden until the loader finishes (placed as the first child of body) */
body.loader-active > *:not(.loader-overlay) { visibility: hidden; }
.loader-overlay {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.95); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  overflow: hidden; visibility: visible;
}
.bg-pattern { position: absolute; width: 100%; height: 100%; opacity: 0.8; pointer-events: none; }
.bg-pattern path { stroke: var(--wp--preset--color--contrast); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; stroke-dasharray: 1000; stroke-dashoffset: 1000; stroke-opacity: 0.2; }
#logo { position: relative; }
.logo-stroke path { stroke: var(--wp--preset--color--accent-alt); fill: none; }
.logo-fill { position: absolute; top: 0; left: 0; clip-path: url(#fillClip); }
.logo-fill path { fill: var(--wp--preset--color--accent-alt); stroke: none; }

/* ==========================================================================
   Block satyar/vehicle-megamenu
   ========================================================================== */
/* Block: satyar/vehicle-megamenu. Brand list left (selected one underlined), centered model cards in one column right. */
.vmm { min-height: 100%; padding: 8.5rem var(--frame) 3.75rem calc(var(--frame) + 4rem); }
.vmm__logo { position: absolute; top: 41px; left: var(--frame); } /* same spot as the About panel logo, inside the 1600px frame */
.vmm__grid { display: grid; grid-template-columns: 306px minmax(0, 1fr); align-items: start; }
.vmm__list { display: flex; flex-direction: column; gap: 0.6875rem; margin: 0; padding: 0; list-style: none; font-family: var(--wp--preset--font-family--accent); font-size: 1.75rem; line-height: 1.2; }
.vmm__list a { display: inline-block; padding-top: 0.3125rem; border-bottom: 1px solid transparent; color: var(--wp--preset--color--contrast); transition: color 0.2s, border-color 0.2s; }
.vmm__list a:hover { transform: none; color: var(--wp--preset--color--accent); }
.vmm__list a.active { border-bottom-color: var(--wp--preset--color--contrast); }
.vmm__view-all { margin-top: 0.75rem; }
.vmm__view-all a { color: var(--wp--preset--color--accent); }
.vmm__content { position: relative; width: 100%; padding-top: 0.4375rem; opacity: 1; transition: opacity 0.2s ease; }
.vmm__content.fade-out { opacity: 0; }
.vmm__items { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; row-gap: 2rem; }
.vmm__items > [hidden] { display: none; }
.vmm__items > p { grid-column: 1 / -1; font-size: 1.125rem; font-weight: 300; }
.vmm-card { display: block; color: var(--wp--preset--color--contrast); text-align: left; }
.vmm-card:hover { transform: translateY(-4px); }
.vmm-card.is-coming-soon { cursor: default; }
.vmm-card.is-coming-soon:hover { transform: none; }
.vmm-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.vmm-card__media img { width: 100%; height: 100%; object-fit: cover; }
.vmm-card.is-coming-soon .vmm-card__media::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.vmm-card .coming-soon-label { position: absolute; top: 50%; left: 50%; z-index: 1; padding: 0.375rem 0.75rem 0.125rem; font-size: 0.9375rem; white-space: nowrap; transform: translate(-50%, -50%); }
.vmm-card h3 { margin: 0; padding: 0.75rem 0 0; font-family: var(--wp--preset--font-family--accent); font-size: 1.5rem; font-weight: 400; line-height: 1.2; text-align: left; text-transform: none; }

.spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: var(--wp--preset--color--accent); border-radius: 50%; animation: satyar-spin 1s linear infinite; }
@keyframes satyar-spin { to { transform: rotate(360deg); } }

@media (max-width: 1279px) {
  .vmm { padding-left: 2.5rem; }
  .vmm__grid { grid-template-columns: 260px minmax(0, 1fr); }
}

/* ==========================================================================
   Block satyar/mobile-menu
   ========================================================================== */
/* Block: satyar/mobile-menu. Values from the Bricks inline CSS (rem converted at 10px). */
body.menu-open { overflow: hidden; }

.menuToggle { position: relative; display: inline-block; width: 49px; height: 49px; z-index: 999; background: transparent; cursor: pointer; }
.menuToggle span { position: absolute; right: 8px; height: 2px; width: 30px; background: currentColor; transition: 0.15s; }
.menuToggle span:first-child { top: 18px; }
.menuToggle span:last-child { top: 27px; width: 20px; }
.menuToggle[aria-expanded="true"] span { top: 23px; }
.menuToggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.menuToggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); width: 30px; }

.mega-menu {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  width: 100%; height: calc(var(--vh, 1vh) * 100);
  background: rgba(0, 0, 0, 0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--wp--preset--color--contrast); font-weight: 500; letter-spacing: 0; text-transform: none;
  transform: perspective(1200px) rotateX(-90deg); transform-origin: top center; opacity: 0; pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s;
}
.mega-menu.open { transform: perspective(1200px) rotateX(0); opacity: 1; pointer-events: auto; }
.menu-top { display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; }
.menu-close { width: 49px; height: 49px; z-index: 1001; font-size: 1.5rem; color: #fff; background: none; cursor: pointer; }

.menu-screens-wrapper { position: relative; flex: 1; overflow: hidden; }
.screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  padding: clamp(1rem, 2vw, 2rem); overflow-y: auto;
  transform: scale(0.9); opacity: 0; pointer-events: none;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.screen.show { position: relative; opacity: 1; transform: scale(1); pointer-events: auto; }
.screen.exit { transform: scale(0.9); opacity: 0; }
.screen.enter-back { transform: scale(1.05); opacity: 1; }
.screen.enter-back.show { transform: scale(1); }
.screen.exit-back { transform: scale(1); opacity: 0; }

#first-screen { display: flex; flex-direction: column; gap: 0.9375rem; }
.menu-item--mobile {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding-bottom: 0.625rem; border-bottom: 1px solid rgba(215, 180, 106, 0.28);
  font-family: var(--wp--preset--font-family--body); font-size: 1.25rem; font-weight: 700; text-transform: capitalize;
  color: var(--wp--preset--color--accent-alt); cursor: pointer;
}
.menu-item--mobile svg { margin-left: auto; }
.first-screen-links { display: flex; flex-direction: column; gap: 0.3125rem; }
.first-screen-links a.menu-item { display: flex; justify-content: space-between; padding: 0.3125rem 0; font-size: 1.125rem; color: var(--wp--preset--color--contrast); transition: color 0.3s; }
.first-screen-links a.menu-item:hover { color: var(--wp--preset--color--accent); }
.request-interest-btn { margin-top: 1.25rem; width: 100%; }
.request-interest-btn .wp-block-button__link { width: 100%; font-weight: 400; line-height: 1.15; }

.navigation-buttons { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; }
.back-button { color: var(--wp--preset--color--contrast); font-size: 1rem; font-weight: 300; cursor: pointer; transition: color 0.3s; }
.back-button:hover { color: var(--wp--preset--color--accent); }
.view-all-button, .selected-category-label { color: var(--wp--preset--color--accent-alt); font-size: 1rem; font-weight: 300; white-space: nowrap; }
.selected-category-label { margin-left: auto; }

.category-links-mobile { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.category-links-mobile a { display: block; width: 100%; padding: 0.3125rem 0.4688rem; border-radius: 4px; font-size: 1.3125rem; font-weight: 300; color: var(--wp--preset--color--contrast); transition: background 0.25s, color 0.25s, border-color 0.25s; }
.category-links-mobile a:hover { background: #242424; color: var(--wp--preset--color--accent); transform: none; }

.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.component-grid > [hidden] { display: none; }
.component-card { display: flex; flex-direction: column; gap: 0.375rem; color: var(--wp--preset--color--contrast); }
.component-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; }
.component-card .title { font-size: 0.875rem; line-height: 1.2; }

@media (min-width: 768px) { .mega-menu { padding: 2.5rem 3.75rem; } }

/* ==========================================================================
   Block satyar/hero-slider
   ========================================================================== */
/* Block: satyar/hero-slider. Figma "Home" hero; Splide core CSS. */

/* Splide core (Bricks copy), shared with every slider block */
.splide { position: relative; visibility: hidden; }
.splide.is-initialized, .splide.is-rendered { visibility: visible; }
.splide__track { position: relative; z-index: 0; width: 100%; height: 100%; overflow: hidden; }
.splide__list { display: flex; height: 100%; margin: 0; padding: 0; backface-visibility: hidden; }
.splide.is-initialized:not(.is-active) .splide__list { display: block; }
.splide__slide { position: relative; flex-shrink: 0; margin: 0; list-style-type: none; box-sizing: border-box; background-size: cover; backface-visibility: hidden; -webkit-tap-highlight-color: transparent; }
.splide__track--fade > .splide__list > .splide__slide { opacity: 0; z-index: 0; }
.splide__track--fade > .splide__list > .splide__slide.is-active { opacity: 1; z-index: 1; }
/* Bricks: the image of the active slide sits at 120%; the loader eases the first one back to 100% */
.is-active img { transform: scale(1.2); }

.hero-slider { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100vh; height: 100dvh; padding: 0; margin: 0; background-color: var(--wp--preset--color--muted); }
.hero-slider .splide, .hero-slider .splide__track { width: 100%; height: 100%; min-width: 0; background-color: var(--wp--preset--color--silver); }
.hero-slide { display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; padding: 12.4375rem 2.5rem 4.5rem; }
.hero-slide__title { font-family: var(--wp--preset--font-family--display); font-size: 6.375rem; font-weight: 400; line-height: 1.15; text-align: center; text-transform: uppercase; }
.hero-slide--dark { color: var(--wp--preset--color--base); }
.hero-slide--light { color: var(--wp--preset--color--contrast); }
.hero-slide .wp-block-button__link { color: inherit; }
.hero-slide__media { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-slide--light .hero-slide__media::after { content: ""; position: absolute; inset: 0; background: rgba(19, 19, 21, 0.45); }
/* Slide counter, bottom right */
.hero-pagination { position: absolute; right: 55px; bottom: 107px; z-index: 5; display: flex; align-items: center; gap: 1.375rem; font-family: var(--wp--preset--font-family--accent); font-size: 1.25rem; line-height: 1; color: var(--wp--preset--color--base); transition: color 0.3s; }
.hero-pagination.is-light { color: var(--wp--preset--color--contrast); }
.hero-pagination__count { padding-top: 0.25rem; }
.hero-pagination button { display: flex; color: inherit; }
.hero-pagination button[hidden] { display: none; }
.hero-pagination svg { width: 22px; height: 16px; }

@media (max-width: 991px) {
  .hero-slide { padding: 9.375rem 1.25rem 3.75rem; }
  .hero-slide__title { font-size: 4rem; }
  .hero-pagination { right: 24px; bottom: 24px; }
}
@media (max-width: 478px) { .hero-slide__title { font-size: 2.75rem; } .hero-slide { padding-top: 7.5rem; } }

/* ==========================================================================
   Block satyar/brand-slider
   ========================================================================== */
/* Block: satyar/brand-slider. Figma "Home" (also on Contact).
   Needs the Splide core rules in the hero-slider section (theme: one shared splide.css). */
.brand-slider { display: flex; flex-direction: column; align-items: center; width: 100%; height: var(--screen-minus-header); padding: 0; margin: 0; background-color: var(--wp--preset--color--base); }
.brand-slider .splide, .brand-slider .splide__track { width: 100%; height: 100%; min-width: 0; }
.brand-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 0 1.25rem 1.25rem; margin: 0; background-color: var(--wp--preset--color--muted); }
.brand-slide__content { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; }
.brand-slide__kicker { font-family: var(--wp--preset--font-family--accent); font-size: 2.1875rem; font-weight: 400; line-height: 1.2; text-align: center; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
.brand-slide__title { margin: 3.375rem 0 6.25rem; font-family: var(--wp--preset--font-family--display); font-size: 9.25rem; font-weight: 400; line-height: 1; text-align: center; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
.brand-slide__shade { position: absolute; inset: 0; z-index: 3; background-color: rgba(19, 19, 21, 0.45); }
.brand-slide__media { position: absolute; inset: 0; }
.brand-slide__media img { width: 100%; height: 100%; object-fit: cover; }

.custom-pagination { position: absolute; bottom: 55px; right: 48px; z-index: 99; display: flex; align-items: center; gap: 1rem; }
.custom-arrow {
  display: inline-block; width: 56px; height: 46px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 17'%3E%3Cpath fill='%23d2aa66' d='M12.161,16.225c0.015,0.015 0.473,0.13 1.018,0.255c0.544,0.126 0.996,0.209 1.003,0.186c0.008,-0.024 0.064,-0.402 0.126,-0.841c0.123,-0.881 0.423,-1.91 0.744,-2.554c0.998,-2.006 2.79,-3.334 4.964,-3.68l0.553,-0.088l0,-1.772l-0.502,-0.084c-3.286,-0.551 -5.428,-3.009 -5.829,-6.686c-0.026,-0.24 -0.057,-0.436 -0.07,-0.436c-0.11,-0 -1.947,0.442 -1.982,0.477c-0.025,0.026 -0.006,0.251 0.042,0.5c0.531,2.765 2.053,5.015 4.028,5.956l0.473,0.226l-9.74,0.017l-6.159,0.011l0,1.794l6.175,0.011l9.717,0.018l-0.598,0.303c-1.551,0.786 -2.779,2.327 -3.503,4.397c-0.206,0.589 -0.517,1.933 -0.46,1.99Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 0.3s ease;
}
.custom-prev { transform: rotate(180deg); }
.custom-arrow[hidden] { display: none; }

@media (max-width: 991px) {
  .brand-slide__title { margin: 1.5rem 0 3.5rem; font-size: 6rem; }
}
@media (max-width: 767px) {
  .brand-slide__kicker { font-size: 1.375rem; }
  .brand-slide__title { font-size: 3.5rem; }
  .custom-pagination { bottom: 24px; right: 20px; }
  .custom-arrow { width: 40px; height: 33px; }
}

/* ==========================================================================
   Block satyar/vehicle-tabs
   ========================================================================== */
/* Block: satyar/vehicle-tabs. Figma "Home", Our cars. */
.our-cars { position: relative; justify-content: flex-start; min-height: 980px; padding: 10.1875rem var(--frame) 7.5rem; margin: 0; background-color: var(--wp--preset--color--base); }
.our-cars__wrap { width: 100%; }
.our-cars__head { display: flex; flex-direction: row; align-items: flex-start; width: 100%; padding-bottom: 3.125rem; }
.our-cars__titles { flex: 0 0 360px; }
.our-cars__title { font-size: 3.5rem; line-height: 1.1; text-align: left; }
.our-cars__tabs { font-family: var(--wp--preset--font-family--accent); font-size: 1.375rem; line-height: 1.2; text-transform: uppercase; }

.tabs-wrapper { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 4rem; row-gap: 0.5rem; }
.tab { display: flex; align-items: center; padding-top: 0.25rem; color: var(--wp--preset--color--white); }
.tab:hover { transform: none; }
.tab.active { color: var(--wp--preset--color--accent); }

.our-cars__results { width: 100%; }
.our-cars__content { position: relative; width: 100%; min-height: 240px; }
.vt-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2.5rem; row-gap: 2rem; opacity: 0; transition: opacity 0.5s ease; }
.our-cars__content > [hidden], .vt-list > [hidden] { display: none; }
.vt-list.visible { opacity: 1; }
.vt-card { display: block; overflow: hidden; transition: transform 0.2s ease-in-out; }
.vt-card:hover { transform: translateY(-5px); }
.vt-card img { display: block; width: 100%; height: 167px; object-fit: cover; object-position: center; }
.vt-card h3 { margin: 0; padding: 1.375rem 0 0; /* same as .va-card__title */ font-family: var(--wp--preset--font-family--accent); font-size: 1.5rem; font-weight: 400; line-height: 1.2; text-align: left; text-transform: none; color: var(--wp--preset--color--contrast); }
.vt-spinner { position: absolute; top: 20%; left: 50%; width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: var(--wp--preset--color--accent); border-radius: 50%; transform: translate(-50%, -50%); animation: vt-spin 1s linear infinite; }
@keyframes vt-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 991px) {
  .our-cars { min-height: 0; padding: 5rem 1.25rem; }
  .our-cars__head { flex-direction: column; gap: 2rem; }
  .our-cars__titles { flex: none; }
  .vt-list { grid-template-columns: repeat(2, 1fr); column-gap: 1.25rem; }
}
@media (max-width: 767px) {
  .our-cars__title { font-size: 2.5rem; }
  .our-cars__tabs { font-size: 1.0625rem; }
  .tabs-wrapper { grid-template-columns: repeat(2, max-content); column-gap: 2rem; }
  .vt-list { grid-template-columns: 1fr; }
  .vt-card img { height: 200px; }
}

/* ==========================================================================
   Block satyar/vehicle-archive
   ========================================================================== */
/* Block: satyar/vehicle-archive. Figma "Cars_list_filters"; mobile bottom sheet kept from Bricks. */

/* Figma "Cars_list_filters": title, toolbar (Filters pill, select, search), 426px sidebar + two-column card grid */
.va-title-section { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 var(--frame); }
.va-title h1 { margin: 5.25rem 0 1.6875rem; font-size: 2.375rem; line-height: 1.1; text-align: left; }
.va-toolbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2.5rem; }
.va-toolbar__left { display: flex; align-items: center; gap: 1rem; }
.va-toolbar__right { display: flex; justify-content: flex-end; }

.va-filters-button {
  display: flex; align-items: center; gap: 0.375rem; height: 40px; padding: 0 1rem;
  border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base);
  font-size: 1rem; font-weight: 500; transition: opacity 0.3s ease;
}
.va-filters-button:hover { opacity: 0.85; }
.va-filters-button .ti { font-size: 0.875rem; }
.label-toggle { display: none; } /* Figma: no Hide/Show label; the script still updates it for screen readers via aria-expanded */

.va-select {
  display: block; width: 177px; height: 40px; padding: 0 2.25rem 0 1rem;
  border: 1px solid rgba(235, 219, 193, 0.4); border-radius: var(--wp--custom--radius--pill); /* pill control, see #dynamic-filters */
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ebdbc1' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--wp--preset--color--contrast); appearance: none; -webkit-appearance: none; font: inherit; font-size: 1rem; font-weight: 500; cursor: pointer;
}
.va-select option { background: var(--wp--preset--color--base); }

.va-search { position: relative; width: 426px; max-width: 100%; }
.va-search input {
  display: block; width: 100%; height: 59px; padding: 0 3.5rem 0 1.5rem;
  border: 1px solid var(--wp--preset--color--contrast); border-radius: var(--wp--custom--radius--pill);
  background-color: transparent; color: var(--wp--preset--color--contrast);
  font: inherit; font-size: 1rem; font-weight: 300; appearance: none;
}
.va-search input::placeholder { color: inherit; opacity: 1; }
.va-search input::-webkit-search-cancel-button { display: none; }
.va-search__icon { position: absolute; top: 50%; right: 26px; font-size: 1.0625rem; transform: translateY(-50%); cursor: pointer; }

/* Results */
.va-results-section { padding: 0 var(--frame) 6.25rem; }
.va-layout { display: grid; grid-template-columns: 426px 1fr; column-gap: 2.5rem; align-items: start; }
.va-filters { display: flex; flex-direction: column; width: 100%; }
.va-accordions { width: 100%; }
.va-accordion { width: 100%; padding-bottom: 2.25rem; }
.va-accordion + .va-accordion { padding-top: 2.5rem; border-top: 1px solid rgba(235, 219, 193, 0.2); }
.va-accordion__title { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.va-accordion__title h2 { font-family: var(--wp--preset--font-family--body); font-size: 1.375rem; font-weight: 500; line-height: 1.3; text-align: left; text-transform: none; color: var(--wp--preset--color--white); }
.va-accordion__title .ion { font-size: 1.125rem; color: var(--wp--preset--color--contrast); transition: transform 0.2s; }
.va-accordion:not(.is-open) .va-accordion__title .ion { transform: rotate(-90deg); }
.va-accordion__content { padding-top: 1.5rem; overflow: hidden; }
.va-checkboxes { display: flex; flex-direction: column; gap: 0.875rem; list-style: none; margin: 0; padding: 0; }

.va-results { width: 100%; transition: all 0.5s ease; }
.va-results.span-6 { grid-column: 1 / -1; }
.va-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; row-gap: 4.5rem; width: 100%; }
.va-grid.is-wide { grid-template-columns: repeat(3, 1fr); }
.va-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.va-card:hover { transform: none; }
.va-card.is-coming-soon { pointer-events: none; cursor: default; }
.va-card[hidden] { display: none; }
.va-card__media { position: relative; width: 100%; height: 389px; }
.va-card__media img { width: 100%; height: 100%; object-fit: cover; }
.va-card__overlay { position: absolute; inset: 0; z-index: 2; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.7); }
.coming-soon-label { display: inline-block; padding: 0.375rem 0.75rem 0.125rem; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--accent); font-size: 1.125rem; line-height: 1.2; text-transform: uppercase; }
.va-card__title { padding-top: 1.375rem; font-family: var(--wp--preset--font-family--accent); font-size: 1.5rem; font-weight: 400; line-height: 1.2; text-align: left; text-transform: none; color: var(--wp--preset--color--contrast); }

/* Coming soon label on car cards (archive and homepage Our cars): pill with a restrained frosted surface. */
.va-card .coming-soon-label, .vt-card .coming-soon-label {
  display: inline-flex; align-items: center; justify-content: center;
  /* Gayathri capitals sit high in the line box; compensate for their optical center. */
  padding: 1rem 1.5rem 0.5rem; border: 1px solid rgba(235, 219, 193, .28);
  background: rgba(19, 19, 21, .88); color: var(--wp--preset--color--contrast);
  font-size: 0.875rem; line-height: 1.2; letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgba(235, 219, 193, .15);
}
@supports ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .va-card .coming-soon-label, .vt-card .coming-soon-label {
    background: linear-gradient(180deg, rgba(235, 219, 193, .16), rgba(235, 219, 193, .06));
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .va-card .coming-soon-label, .vt-card .coming-soon-label {
    background: var(--wp--preset--color--surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Mobile bottom sheet (Bricks inline CSS, <=768px) */
.mobile-filter-toggle, .mobile-filters-overlay { display: none; }
@media (max-width: 768px) {
  .va-filters-button { display: none !important; }
  .mobile-filter-toggle {
    position: fixed; bottom: 20px; left: 50%; z-index: 1000; transform: translateX(-50%);
    display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem;
    border-radius: 100px; background-color: #000; color: #fff; font-size: 1rem; cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
  .mobile-filters-overlay {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; display: block;
    max-height: 90vh; overflow-y: auto; padding: 1.25rem !important; padding-bottom: 5rem !important;
    background: rgba(0, 0, 0, 0.61); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    border-top-left-radius: 12px; border-top-right-radius: 12px; box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.2);
    transform: translateY(100%); opacity: 0; transition: transform 0.4s ease, opacity 0.3s ease;
  }
  .mobile-filters-overlay.show { transform: translateY(0); opacity: 1; }
  .close-mobile-filters { display: block; margin-bottom: 0.625rem; text-align: right; font-size: 1.125rem; font-weight: bold; cursor: pointer; }
  .mobile-filters-overlay .va-filters { display: flex; }
}
@media (max-width: 991px) {
  .va-title-section, .va-results-section { padding-inline: 1.25rem; }
  .va-layout { grid-template-columns: 260px 1fr; column-gap: 1.5rem; }
  .va-grid { column-gap: 1.25rem; row-gap: 2.5rem; }
  .va-card__media { height: 280px; }
}
@media (max-width: 768px) {
  .va-layout { grid-template-columns: 1fr; }
  .va-toolbar__left { display: none; }
  .va-search { width: 100%; }
  .va-toolbar__right { width: 100%; }
}
@media (max-width: 478px) {
  .va-title h1 { margin-top: 2rem; font-size: 2.25rem; }
  .va-grid { grid-template-columns: 1fr; }
  .va-card__media { height: 240px; }
}

/* ==========================================================================
   Block satyar/vehicle-nav
   ========================================================================== */
/* Block: satyar/vehicle-nav. Figma "Car": section links bottom right, Source Sans 24px. */
#content-links { position: fixed; right: 41px; bottom: 70px; z-index: 999; display: flex; flex-direction: column; gap: 1.625rem; }
#content-links a {
  display: inline-block; width: fit-content;
  font-family: var(--wp--preset--font-family--body); font-size: 1.5rem; font-weight: 500; line-height: 1.2; text-transform: capitalize; color: var(--wp--preset--color--white);
  transition: text-shadow 0.3s ease, color 0.3s ease;
}
#content-links a:hover { transform: none; color: var(--wp--preset--color--accent); }
#content-links a.is-current { text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 15px rgba(255, 255, 255, 0.8); }
#scroll-blur { position: fixed; inset: 0; z-index: 0; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.3s ease; }
@media (max-width: 991px) { #content-links { right: 20px; bottom: 32px; gap: 0.875rem; } #content-links a { font-size: 1.125rem; } }
@media (max-width: 767px) {
  #content-links {
    top: 64px; right: 0; bottom: auto; left: 0;
    flex-direction: row; gap: 1rem; padding: 0.625rem 1.25rem; overflow-x: auto;
    background: rgba(19, 19, 21, 0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  #content-links a { flex: none; font-size: 1rem; }
}

/* ==========================================================================
   Block satyar/vehicle-hero
   ========================================================================== */
/* Block: satyar/vehicle-hero. Figma "Car": 980px photo, two-line title, two buttons near the bottom. */
.vehicle-hero { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; height: 980px; padding: 0; margin: 0; overflow: hidden; background-color: var(--wp--preset--color--base); }
.vehicle-hero__slide { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 100%; height: 100%; padding: 11.375rem 2.5rem 5rem; }
.vehicle-hero__shade { position: absolute; inset: 0; z-index: 1; background-color: rgba(19, 19, 21, 0.5); }
.vehicle-hero__title { position: relative; z-index: 2; max-width: 1040px; font-size: 5rem; line-height: 1.2; text-align: center; }
.vehicle-hero__media { position: absolute; inset: 0; margin: 0; }
.vehicle-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-hero__actions { position: relative; z-index: 3; display: flex; gap: 1.25rem; }
@media (max-width: 991px) {
  .vehicle-hero { height: max(640px, 85vh); }
  .vehicle-hero__slide { padding: 8.75rem 1.25rem 3.75rem; }
  .vehicle-hero__title { font-size: 3.5rem; }
}
@media (max-width: 767px) {
  .vehicle-hero__title { font-size: 2.5rem; }
  .vehicle-hero__actions { flex-direction: column; width: 100%; gap: 0.75rem; }
  .vehicle-hero__actions .wp-block-button__link { width: 100%; }
}

/* ==========================================================================
   Block satyar/vehicle-sections
   ========================================================================== */
/* Block: satyar/vehicle-sections. Figma "Car". Needs the Splide core rules in the hero-slider section (theme: one shared splide.css). */
.single-vehicle .breadcrumb-row { padding-top: 1.5625rem; }

/* Rich text */
.bx-text p { margin: 0 0 1em; }
.bx-text p:last-child { margin-bottom: 0; }
.bx-text ul { margin: 1em 0; padding-left: 1.4em; }
.bx-text hr { margin: 1rem 0; border: 0; border-top: 1px solid rgba(235, 219, 193, 0.2); }

/* Body copy is 17px at every viewport size on all pages (vehicle, about, carbon, dealer finder); set on each body-text rule. */
.vs-intro__text,
.vs-media-section__body .bx-text,
.vs-card__text,
.vs-feature__body { font-size: 1.0625rem; }

/* intro */
.vs-intro { padding: 4.375rem calc(var(--frame) + 4rem) 7.5rem; }
.vs-intro__wrap { width: 100%; }
.vs-intro__text { max-width: 850px; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--white); }

/* media sections: heading, full-bleed darkened photo with fades, text column */
.vs-media-section { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 0 0 8.125rem; }
.vs-media-section__head { padding: 0 calc(var(--frame) + 4rem); }
.vs-media-section__head h2 { font-size: 5rem; line-height: 1.2; text-align: left; }
.vs-media { position: relative; width: 100%; height: 670px; margin-top: 1.5rem; overflow: hidden; background-color: var(--wp--preset--color--base); }
.vs-media__img { position: absolute; inset: 0; margin: 0; }
.vs-media__img img { width: 100%; height: 100%; object-fit: cover; }
.vs-media__shade { position: absolute; inset: 0; z-index: 1; background-color: rgba(19, 19, 21, 0.55); }
.vs-media__fade-top, .vs-media__fade-bottom { position: absolute; left: 0; right: 0; z-index: 2; height: 140px; }
.vs-media__fade-top { top: 0; background: linear-gradient(var(--wp--preset--color--base), rgba(19, 19, 21, 0)); }
.vs-media__fade-bottom { bottom: 0; background: linear-gradient(rgba(19, 19, 21, 0), var(--wp--preset--color--base)); }
.vs-media-section__body { padding: 3.125rem calc(var(--frame) + 4rem) 0; }
.vs-media-section__body .bx-text { max-width: 610px; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--white); }
.vs-media-section.is-right .vs-media-section__head h2 { text-align: right; }
.vs-media-section.is-right .vs-media-section__body, .vs-media-section.is-right-body .vs-media-section__body { align-items: flex-end; }
.vs-media-section.is-right .vs-media-section__body .bx-text, .vs-media-section.is-right-body .vs-media-section__body .bx-text { margin-left: auto; }

/* carousels: heading row with gold arrows */
.vs-carousel-section { display: flex; flex-direction: column; width: 100%; padding: 0 0 8.125rem; margin: 0; }
.vs-carousel-section__top { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 var(--frame); margin-bottom: 2.5rem; }
.vs-carousel-section__top h2 { min-width: 0; }
.vs-carousel-section__top h2 { font-size: 3rem; line-height: 1.2; text-align: left; }
.vs-pagination { display: flex; gap: 1.125rem; margin-left: auto; }
.vs-arrow { display: block; width: 32px; height: 26px; padding: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 17'%3E%3Cpath fill='%23d2aa66' d='M12.161,16.225c0.015,0.015 0.473,0.13 1.018,0.255c0.544,0.126 0.996,0.209 1.003,0.186c0.008,-0.024 0.064,-0.402 0.126,-0.841c0.123,-0.881 0.423,-1.91 0.744,-2.554c0.998,-2.006 2.79,-3.334 4.964,-3.68l0.553,-0.088l0,-1.772l-0.502,-0.084c-3.286,-0.551 -5.428,-3.009 -5.829,-6.686c-0.026,-0.24 -0.057,-0.436 -0.07,-0.436c-0.11,-0 -1.947,0.442 -1.982,0.477c-0.025,0.026 -0.006,0.251 0.042,0.5c0.531,2.765 2.053,5.015 4.028,5.956l0.473,0.226l-9.74,0.017l-6.159,0.011l0,1.794l6.175,0.011l9.717,0.018l-0.598,0.303c-1.551,0.786 -2.779,2.327 -3.503,4.397c-0.206,0.589 -0.517,1.933 -0.46,1.99Z'/%3E%3C/svg%3E") center / contain no-repeat; cursor: pointer; transition: opacity 0.3s; }
.vs-arrow--prev { transform: rotate(180deg); }
.vs-arrow:disabled { opacity: 0.3; cursor: default; }
.vs-carousel-section__slider { width: 100%; }
.vs-carousel-section__slider .splide { width: 100%; }

/* cards carousel (featured customizations): 600px cards, 498px photo */
.vs-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.vs-card__img { width: 100%; height: 498px; margin: 0; overflow: hidden; }
.vs-card__img img { width: 100%; height: 100%; object-fit: cover; }
.vs-card__title { margin-top: 2.25rem; font-family: var(--wp--preset--font-family--accent); font-size: 1.5625rem; font-weight: 400; line-height: 1.2; text-align: left; text-transform: uppercase; color: var(--wp--preset--color--contrast); }
.vs-card__text { max-width: 530px; margin-top: 0.75rem; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--white); }

/* gallery: gapless photo grid inside the content frame. 4 columns x 3 rows on desktop:
   [1 1 2 3] [1 1 4 3] [5 6 6 6] (1 large, 3 tall, 6 wide); extra photos fill 1x1 cells (grid-auto-flow: dense). */
.vs-gallery { padding: 0 var(--frame) 8.125rem; }
.vs-gallery__head { margin-bottom: 2.5rem; }
.vs-gallery__head h2 { font-size: 3rem; line-height: 1.2; text-align: left; }
.vs-gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(11rem, 17vw, 17.5rem); grid-auto-flow: dense; gap: 1rem; }
.vs-gallery__item { position: relative; overflow: hidden; padding: 0; background: var(--wp--preset--color--surface); cursor: zoom-in; }
.vs-gallery__item.is-large { grid-column: span 2; grid-row: span 2; }
.vs-gallery__item.is-tall { grid-row: span 2; }
.vs-gallery__item.is-wide { grid-column: span 3; }
.vs-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease; filter: brightness(0.86); }
.vs-gallery__item:hover img, .vs-gallery__item:focus-visible img { transform: scale(1.05); filter: brightness(1); }
.vs-gallery__item:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 3px; }
@media (hover: none), (prefers-reduced-motion: reduce) { .vs-gallery__item:hover img { transform: none; } }

/* gallery lightbox: full-screen native dialog, photo contained, gold arrows and counter below */
.vs-lightbox { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 4.5rem var(--frame) 1.5rem; border: 0; background: rgba(10, 10, 12, 0.96); color: var(--wp--preset--color--contrast); }
.vs-lightbox[open] { display: flex; flex-direction: column; animation: dialog-fade 0.35s ease both; }
.vs-lightbox::backdrop { background: transparent; }
.vs-lightbox__stage { display: flex; flex: 1; min-height: 0; align-items: center; justify-content: center; margin: 0; }
.vs-lightbox__image { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.vs-lightbox__bar { display: flex; align-items: center; justify-content: center; gap: 2rem; padding-top: 1.5rem; }
.vs-lightbox__count { min-width: 4.5rem; padding-top: 0.25rem; font-family: var(--wp--preset--font-family--accent); font-size: 1.25rem; text-align: center; }
.vs-lightbox__close { position: absolute; top: 1.5rem; right: var(--frame); display: flex; width: 28px; height: 28px; color: var(--wp--preset--color--contrast); transition: color 0.2s; }
.vs-lightbox__close svg { width: 100%; height: 100%; }
.vs-lightbox__close:hover { color: var(--wp--preset--color--accent); }
@media (prefers-reduced-motion: reduce) { .vs-lightbox[open] { animation: none; } }


/* feature slider: text column + 600 x 500 photo per slide, the next slide peeking in */
.vs-feature { display: flex; align-items: flex-start; gap: 2.5rem; padding-right: 5rem; text-align: left; }
.vs-feature__text { flex: 0 0 374px; }
.vs-feature__text h3 { font-size: 3.5rem; font-weight: 400; line-height: 1.2; text-align: left; }
.vs-feature__body { margin-top: 2.5rem; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--white); }
.vs-feature__media { flex: 0 0 600px; }
.vs-feature__media figure { width: 100%; height: 500px; margin: 0; overflow: hidden; }
.vs-feature__media img { width: 100%; height: 100%; object-fit: cover; }

/* statement: photo band, heading and button at the top */
.vs-statement { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 100%; height: 980px; padding: 7.5rem 2.5rem 0; margin: 0; overflow: hidden; background-color: var(--wp--preset--color--base); }
.vs-statement__media { position: absolute; inset: 0; margin: 0; }
.vs-statement__media img { width: 100%; height: 100%; object-fit: cover; }
.vs-statement::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(19, 19, 21, 0.55); pointer-events: none; }
.vs-statement__content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4.125rem; }
.vs-statement h2 { max-width: 980px; font-size: 2.5rem; line-height: 1.2; }

@media (max-width: 991px) {
  .vs-intro, .vs-media-section__head, .vs-media-section__body { padding-inline: 1.25rem; }
  .vs-media-section__head h2 { font-size: 3.5rem; }
  .vs-media { height: 480px; }
  .vs-carousel-section__top { padding-inline: 1.25rem; }
  .vs-card__img { height: 360px; }
  .vs-gallery { padding-inline: 1.25rem; }
  .vs-feature { flex-direction: column; padding-right: 1.25rem; }
  .vs-feature__text, .vs-feature__media { flex: none; width: 100%; }
  .vs-feature__media figure { height: 360px; }
  .vs-statement { height: auto; min-height: 640px; padding: 6.25rem 1.25rem; }
}
@media (max-width: 767px) {
  .vs-media-section__head h2 { font-size: 2.5rem; }
  .vs-media { height: 320px; }
  .vs-media-section, .vs-carousel-section { padding-bottom: 5rem; }
  .vs-carousel-section__top h2 { font-size: 2rem; }
  /* gallery on phones: 2 columns [1 1] [1 1] [2 3] [4 3] [5 5] [6 6], still gapless */
  .vs-gallery__head h2 { font-size: 2rem; }
  .vs-gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9.5rem; gap: 0.5rem; }
  .vs-gallery__item:nth-child(5), .vs-gallery__item.is-wide { grid-column: span 2; }
  .vs-lightbox { padding-inline: 0.75rem; }
  .vs-card__img { height: 240px; }
  .vs-feature__text h3 { font-size: 2.5rem; }
  .vs-feature__media figure { height: 240px; }
  .vs-statement h2 { font-size: 1.75rem; }
  .vs-statement__content { gap: 2.5rem; }
}

/* ==========================================================================
   Block satyar/dealer-finder
   ========================================================================== */
/* Block: satyar/dealer-finder. Figma "About us": heading, 600px search pill and dealer list left, 680px map right. */
.dealer-section { align-items: stretch; padding: 7.5rem var(--frame) 0; overflow: clip; } /* clip, not hidden: hidden would switch off the sticky map */
.dealer-container { display: grid; grid-template-columns: 600px 680px; justify-content: space-between; align-items: start; }
.dealer-container__search-column { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
/* About layout: the list shows "Become a dealer" + one dealer and scrolls inside itself beyond that (50rem);
   the map stays in view (sticky) while the page scrolls. Map height: the 958px Figma map, capped to the screen below the header. */
.dealer-container { --dealer-panel-height: min(958px, calc(var(--vh, 1vh) * 100 - var(--wp--custom--header--height) - 4rem)); }
.dealer-container .results-list { max-height: 50rem; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.75rem; scrollbar-width: thin; scrollbar-color: rgba(235, 219, 193, 0.35) transparent; }
.dealer-container .results-list:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.dealer-container .map-container { position: sticky; top: calc(var(--wp--custom--header--height) + 2rem); }
.dealer-title { margin-top: 1.25rem; font-size: 2.5rem; line-height: 1.2; text-align: left; }
.dealer-widget { width: 100%; margin-top: 1.5rem; }
#dealer-search { display: block; width: 100%; height: 59px; padding: 0 3.5rem 0 1.5rem; border: 1px solid var(--wp--preset--color--contrast); /* same search pill as the archive (.va-search) */ border-radius: var(--wp--custom--radius--pill); background: transparent url(../img/magnifying-glass.svg) no-repeat right 22px center / 20px; color: var(--wp--preset--color--contrast); font: inherit; font-size: 1rem; font-weight: 300; }
#dealer-search::placeholder { color: inherit; opacity: 1; }
#dynamic-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0.5rem; }
/* Pill control: one component for country pills, Map/List, the archive status select and Filters button. 40px, 16px medium, cream 40% line, filled cream when active. */
#dynamic-filters button { display: inline-flex; align-items: center; gap: 0.5rem; height: 40px; padding: 0 1rem; border: 1px solid rgba(235, 219, 193, 0.4); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--contrast); font-size: 1rem; font-weight: 500; line-height: 1; transition: all 0.2s; }
#dynamic-filters button.is-active { background-color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
#dynamic-filters img { height: 18px; }
/* Dealer card: one component on every page (about-us list, find-dealer grid). Equal-height cards, buttons pinned to the bottom. */
.results-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.dealer-result { display: flex; flex-direction: column; padding: 2rem; background: var(--wp--preset--color--surface); border: 1px solid rgba(235, 219, 193, 0.12); cursor: pointer; transition: border-color 0.3s; }
.dealer-result:hover { border-color: rgba(235, 219, 193, 0.35); }
.dealer-result h3 { margin: 0 0 1.5rem; padding: 0 0 1.125rem; border-bottom: 1px solid rgba(235, 219, 193, 0.25); font-family: var(--wp--preset--font-family--body); font-size: 1.4375rem; font-weight: 700; line-height: 1.2; text-align: left; text-transform: none; color: var(--wp--preset--color--contrast); }
.dealer-result p { margin: 0 0 1rem; font-size: 1.0625rem; font-weight: 300; line-height: var(--body-line-height); white-space: pre-line; color: var(--wp--preset--color--white); }
.dealer-result p img { display: inline; width: 20px; margin-right: 0.75rem; vertical-align: -3px; }
.dealer-result .dealer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: auto; padding-top: 1rem; }
.dealer-result .wp-block-button__link { width: 100%; }
.dealer-result .wp-block-button__link { min-height: 60px; padding-inline: 1rem; font-size: 1rem; }
.dealer-result .wp-block-button__link svg { display: none; } /* Figma: plain labels */
.no-results { align-self: center; padding: 2rem; color: var(--wp--preset--color--contrast); }

.map-container { width: 100%; }
#map { width: 100%; height: 958px; background: #e8e1d3; }
.dealer-container #map { height: var(--dealer-panel-height); }
#map .leaflet-tile-pane { filter: sepia(0.25) saturate(0.6) brightness(1.02); } /* Figma map: warm light basemap */
.custom-marker-icon { background: none; border: 0; }

@media (max-width: 1279px) { .dealer-container { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
@media (max-width: 991px) {
  .dealer-section { padding-inline: 1.25rem; }
  .dealer-container { grid-template-columns: 1fr; row-gap: 2rem; }
  .dealer-container .results-list { max-height: calc(var(--vh, 1vh) * 70); }
  .dealer-container .map-container { position: static; }
  #map, .dealer-container #map { height: 420px; }
}

/* Page layout (find-dealer.html, no Figma): title + Map/List toggle, search + country pills, three-column dealer cards.
   Built from the Figma parts: Gilda title, gold search pill, cream pills, #1F1F1F surfaces. */
.dealer-section--page { padding: 3.5rem var(--frame) 7.5rem; }
.dealer-page { display: flex; flex-direction: column; width: 100%; }
.dealer-page__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.dealer-page__title { font-size: 3.5rem; line-height: 1.1; text-align: left; }
.dealer-page__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; width: 100%; margin-top: 2rem; }
.dealer-section--page #dealer-search { flex: 0 1 600px; width: 600px; max-width: 100%; }
.dealer-section--page #dynamic-filters { margin: 0; }
#toggle-buttons { display: flex; gap: 0.5rem; }
#toggle-buttons button { display: inline-flex; align-items: center; min-width: 72px; justify-content: center; height: 40px; padding: 0 1rem; border: 1px solid rgba(235, 219, 193, 0.4); border-radius: var(--wp--custom--radius--pill); color: var(--wp--preset--color--contrast); font-size: 1rem; font-weight: 500; line-height: 1; transition: all 0.2s; } /* pill control, see #dynamic-filters */
#toggle-buttons button.is-active { background-color: var(--wp--preset--color--contrast); border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.dealer-page__results { width: 100%; margin-top: 3rem; }
.dealer-section--page #map { display: none; height: 640px; }
.dealer-section--page .results-list { grid-template-columns: repeat(3, 1fr); margin: 0; }

/* Dealer cards: equal height, buttons pinned to the bottom */
.dealer-result .dealer-actions--single { grid-template-columns: 1fr; }
.dealer-section--page .no-results { grid-column: span 2; }

/* "Become a dealer": the first card, gold line, Gilda heading */
.dealer-result--become { border-color: var(--wp--preset--color--accent); background: linear-gradient(160deg, rgba(210, 170, 102, 0.12), rgba(210, 170, 102, 0) 60%), var(--wp--preset--color--surface); cursor: default; }
.dealer-result--become:hover { border-color: var(--wp--preset--color--accent); }
.dealer-result .dealer-become__kicker { margin: 0 0 0.875rem; font-family: var(--wp--preset--font-family--accent); font-size: 1rem; font-weight: 400; line-height: 1.2; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.dealer-result--become h3 { padding: 0; border: 0; font-family: var(--wp--preset--font-family--display); font-size: 2.25rem; font-weight: 400; text-transform: uppercase; }
.dealer-result--become .dealer-become__text { white-space: normal; }

@media (max-width: 1199px) { .dealer-section--page .results-list { grid-template-columns: repeat(2, 1fr); } .dealer-section--page .no-results { grid-column: auto; } }
@media (max-width: 991px) {
  .dealer-section--page { padding: 2.5rem 1.25rem 5rem; }
  .dealer-page__title { font-size: 2.75rem; }
  .dealer-section--page #map { height: 480px; }
}
@media (max-width: 767px) {
  .dealer-page__head { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .dealer-page__title { font-size: 2.25rem; }
  .dealer-page__toolbar { margin-top: 1.5rem; }
  .dealer-section--page #dealer-search { flex-basis: 100%; width: 100%; }
  .dealer-page__results { margin-top: 2rem; }
  .dealer-section--page .results-list { grid-template-columns: 1fr; gap: 1rem; }
  .dealer-result { padding: 1.5rem; }
  .dealer-result--become h3 { font-size: 1.875rem; }
  .dealer-section--page { padding-bottom: 2.5rem; }
}
@media (max-width: 478px) { .dealer-result .dealer-actions { grid-template-columns: 1fr; } }

/* ==========================================================================
   Block satyar/dealer-apply (dialog)
   ========================================================================== */
/* Native <dialog> on the menu-panel colour; form reuses the contact form fields in two columns. */
html.dialog-open { overflow: hidden; }
.site-dialog { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; padding: 1.25rem; border: 0; background: transparent; color: var(--wp--preset--color--contrast); }
.site-dialog[open] { display: flex; align-items: center; justify-content: center; }
.site-dialog::backdrop { background: rgba(10, 10, 12, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.site-dialog__panel { position: relative; width: 760px; max-width: 100%; max-height: 100%; overflow-y: auto; padding: 3.5rem; background: var(--wp--preset--color--panel); border: 1px solid rgba(235, 219, 193, 0.12); }
.site-dialog__close { position: absolute; top: 24px; right: 24px; display: flex; width: 24px; height: 24px; color: var(--wp--preset--color--contrast); transition: color 0.2s; }
.site-dialog__close svg { width: 100%; height: 100%; }
.site-dialog__close:hover { color: var(--wp--preset--color--accent); }
.site-dialog__title { font-size: 2.5rem; line-height: 1.2; text-align: left; }
.site-dialog__intro { margin: 0.75rem 0 2rem; font-size: 1.0625rem; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--white); }
.dealer-apply-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
.dealer-apply-form .cf-group--full { grid-column: 1 / -1; }
.dealer-apply-form textarea { height: 140px; }
.dealer-apply-form.is-sent > .cf-success { margin-top: 0.5rem; }
.site-dialog[open] { animation: dialog-fade 0.35s ease both; }
.site-dialog[open] .site-dialog__panel { animation: dialog-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.site-dialog.is-closing { animation: dialog-fade-out 0.25s ease both; }
.site-dialog.is-closing .site-dialog__panel { animation: dialog-sink 0.25s ease both; }
@keyframes dialog-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes dialog-fade-out { from { opacity: 1; } to { opacity: 0; } } /* own names: reusing the open keyframes would not restart the animation */
@keyframes dialog-sink { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) { .site-dialog[open], .site-dialog[open] .site-dialog__panel { animation: none; } }
@media (max-width: 767px) {
  .site-dialog { padding: 0.75rem; }
  .site-dialog__panel { padding: 3rem 1.25rem 1.5rem; }
  .site-dialog__title { font-size: 1.875rem; }
  .dealer-apply-form { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Block satyar/contact-form
   ========================================================================== */
/* Block: satyar/contact-form. Figma "Contact": 68px fields with a thin cream line, small consent line, gold SEND pill. */
.contact-form { width: 100%; }
.cf-group { margin: 0 0 0.875rem; }
.cf-hide-label > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.cf-input { position: relative; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form input[type="url"], .contact-form textarea {
  display: block; width: 100%; height: 68px; padding: 0 1.4375rem;
  border: 1px solid rgba(235, 219, 193, 0.5); border-radius: 4px;
  background: transparent; color: var(--wp--preset--color--white);
  font: inherit; font-size: 1rem; font-weight: 300; line-height: 1.3;
  transition: border-color 0.15s ease-in-out;
}
.contact-form textarea { height: 178px; padding-top: 1.375rem; resize: vertical; }
.contact-form ::placeholder { color: var(--wp--preset--color--contrast); opacity: 1; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--wp--preset--color--contrast); }
.cf-input--check { display: flow-root; }
.cf-check { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.125rem; color: var(--wp--preset--color--white); font-size: 0.8125rem; font-weight: 500; cursor: pointer; }
/* Consent checkbox: the site checkbox (same look as the archive filters): 18px square, cream line, filled cream with a dark tick */
.cf-check { gap: 0.75rem; font-size: 0.875rem; }
.cf-check input { flex: none; width: 18px; height: 18px; margin: 0; border: 1px solid rgba(235, 219, 193, 0.6); border-radius: 2px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; transition: background-color 0.15s, border-color 0.15s; }
.cf-check input:checked { border-color: var(--wp--preset--color--contrast); background: var(--wp--preset--color--contrast) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.6L13 6.5' fill='none' stroke='%23131315' stroke-width='2'/%3E%3C/svg%3E") center / 100% no-repeat; }
.cf-check input:focus-visible { outline: 1px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.cf-check input[aria-invalid="true"] { border-color: var(--wp--preset--color--error); }
.cf-submit { margin-top: 1.5rem; text-align: right; }
.cf-button { display: inline-flex; align-items: center; justify-content: center; min-width: 145px; height: 76px; padding: 0.5em 2.5rem 0; border-radius: var(--wp--custom--radius--pill); background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); font-family: var(--wp--preset--font-family--accent); font-size: 1.25rem; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s; }
.cf-button:hover { opacity: 0.85; }
.cf-error { position: absolute; top: -10px; left: 15px; padding: 0 0.25rem; background: var(--wp--preset--color--base); color: var(--wp--preset--color--error); font-size: 0.8125rem; line-height: 1.5; }
.contact-form [aria-invalid="true"] { border-color: var(--wp--preset--color--error); }
.cf-input--check .cf-error { position: static; padding: 0; margin-top: 0.25rem; background: none; } /* checkbox error goes under its label, not over it */
.site-dialog .cf-error { background: var(--wp--preset--color--panel); }
.cf-success { padding: 0.9375rem; border: 1px solid rgba(235, 219, 193, 0.5); color: var(--wp--preset--color--white); }
.contact-form.is-sent > .cf-group { display: none; }

/* ==========================================================================
   Carbon materials page (carbon-materials.html). Figma "About carbon elements".
   Hero is the about page's page-hero plus a button; image sections reuse vs-media-section; only the differences are here.
   ========================================================================== */
.carbon-hero .page-hero__slide { justify-content: space-between; padding-bottom: 5.0625rem; }
.carbon-hero .page-hero__shade { background-color: rgba(19, 19, 21, 0.45); }
.carbon-hero__actions { position: relative; z-index: 3; }

.carbon-intro { align-items: stretch; padding: 5rem calc(var(--frame) + 4rem) 7.5rem; }
.carbon-intro__text { max-width: 850px; font-size: 1.0625rem; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--white); }
.vs-media-section.is-right-head .vs-media-section__head h2 { text-align: right; }

/* material list: headings and text left, 676px photo flush right */
.carbon-list { padding: 0 0 0 var(--frame); margin: 0; background-color: var(--wp--preset--color--base); }
.carbon-list__grid { display: grid; grid-template-columns: 1fr 676px; column-gap: 2.5rem; align-items: start; width: 100%; }
.carbon-list__items { display: flex; flex-direction: column; gap: 2rem; padding: 0; }
.carbon-list__item h2 { font-size: 2.5rem; line-height: 1.1; text-align: left; }
.carbon-list__text { max-width: 600px; margin-top: 1.5rem; font-size: 1.0625rem; font-weight: 300; line-height: var(--body-line-height); color: var(--wp--preset--color--white); }
.carbon-list__media img { width: 100%; height: auto; }
@media (max-width: 991px) {
  .carbon-hero .page-hero__slide { padding-bottom: 3rem; }
  .carbon-intro { padding: 3.75rem 1.25rem 5rem; }
  .carbon-list { padding-left: 0; }
  .carbon-list__grid { grid-template-columns: 1fr; row-gap: 3rem; }
  .carbon-list__items { padding: 0 1.25rem; }
}
@media (max-width: 767px) { .carbon-list__item h2 { font-size: 1.875rem; } }

/* CTA band with a long statement (carbon) */
.cta-band--statement { height: 960px; padding-top: 20.625rem; }
.cta-band--statement .cta-band__content h2 { max-width: 830px; margin-bottom: 4.75rem; font-size: 2.5rem; }
@media (max-width: 991px) { .cta-band--statement { height: auto; padding-block: 10rem; } .cta-band--statement .cta-band__content h2 { margin-bottom: 3rem; font-size: 1.875rem; } }

/* ==========================================================================
   Approved motion and interactions
   ========================================================================== */

/* Accepted Satyar motion system. Shared by every design page. */
.satyar-motion { --motion-ease: cubic-bezier(.16, 1, .3, 1); }
.satyar-motion * { text-shadow: none; }
.satyar-motion ::selection { background: #d2aa66; color: #131315; }
.satyar-motion a { transition: color .28s var(--motion-ease); }
.satyar-motion a:hover { transform: none; }
.satyar-motion :focus-visible { outline: 1px solid #d2aa66; outline-offset: 6px; }

/* The existing pill becomes a quiet gold surface, with a fixed label. */
.satyar-motion .wp-block-button__link {
  isolation: isolate;
  transition: border-color .32s var(--motion-ease), background-color .32s var(--motion-ease);
}
.satyar-motion .wp-block-button__link::before {
  inset: 0; width: 100%; height: 100%;
  background: rgba(210, 170, 102, .15); transform: none; opacity: 0;
  transition: opacity .32s var(--motion-ease);
}
.satyar-motion .wp-block-button__link:hover,
.satyar-motion .wp-block-button__link:focus-visible { background: transparent; color: inherit; border-color: #ebdbc1; }
.satyar-motion .wp-block-button__link:hover::before,
.satyar-motion .wp-block-button__link:focus-visible::before { opacity: 1; }
.satyar-motion .motion-button-label { position: relative; z-index: 1; display: inline-block; }

/* Hairlines acknowledge navigation without moving the words. */
.satyar-motion .motion-text-link { position: relative; }
.satyar-motion .motion-text-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px;
  background: #d2aa66; transform: scaleX(0); transform-origin: left;
  transition: transform .34s var(--motion-ease); pointer-events: none;
}
.satyar-motion .motion-text-link:hover::after,
.satyar-motion .motion-text-link:focus-visible::after,
.satyar-motion .motion-text-link[aria-expanded="true"]::after,
.satyar-motion .motion-text-link[data-selected]::after,
.satyar-motion .motion-text-link[aria-selected="true"]::after { transform: scaleX(1); }
.satyar-motion .site-header .submenu-toggle:hover,
.satyar-motion .site-header .nav-item > a:hover { color: inherit; }
.satyar-motion .site-header .motion-text-link::after { bottom: -8px; }
.satyar-motion .tab.motion-text-link::after { right: auto; width: 100%; max-width: 100%; bottom: -2px; }
.satyar-motion .tab { justify-self: start; }
.satyar-motion .vmm__list a { border-bottom-color: transparent; }
.satyar-motion .vmm__content { padding-top: 0.4375rem; transition: none; }

/* Menus use a short surface transition; their content is sequenced in JS. */
.satyar-motion .megamenu { transition: opacity .23s var(--motion-ease), visibility .23s; }
.satyar-motion .has-megamenu.open > .megamenu { transition-duration: .42s, 0s; }
.satyar-motion .mega-menu { transform: translateY(-12px); visibility: hidden; transition: opacity .3s var(--motion-ease), transform .42s var(--motion-ease), visibility .3s; }
.satyar-motion .mega-menu.open { transform: translateY(0); visibility: visible; }
.satyar-motion .screen { transform: translateX(18px); transition: transform .32s var(--motion-ease), opacity .24s var(--motion-ease); }
.satyar-motion .screen.show { transform: translateX(0); }
.satyar-motion .screen.exit { transform: translateX(-18px); }
.satyar-motion .screen.enter-back { transform: translateX(-18px); }
.satyar-motion .screen.enter-back.show { transform: translateX(0); }
.satyar-motion .screen.exit-back { transform: translateX(18px); }
.satyar-motion .menuToggle span { top: 23px; transition: transform .34s var(--motion-ease); }
.satyar-motion .menuToggle span:first-child { transform: translateY(-5px); }
.satyar-motion .menuToggle span:last-child { transform: translateY(4px); }
.satyar-motion .menuToggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.satyar-motion .menuToggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }

/* Hero photography stays still; slides crossfade without a zoom handoff. */
.satyar-motion .is-active img { transform: none; }
.satyar-motion .hero-slide__media,
.satyar-motion .brand-slide__media,
.satyar-motion .carbon-elements__media,
.satyar-motion .press-release__media { overflow: hidden; }
.satyar-motion .splide__track { cursor: grab; touch-action: pan-y; }
.satyar-motion .splide.is-dragging .splide__track { cursor: grabbing; }
.satyar-motion .splide a, .satyar-motion .splide button { cursor: pointer; }
.satyar-motion .splide__slide img { user-select: none; -webkit-user-drag: none; }
.satyar-motion .hero-pagination { right: 44px; bottom: 95px; font-variant-numeric: tabular-nums; }
.satyar-motion .hero-pagination button { width: 44px; height: 44px; align-items: center; justify-content: center; opacity: .7; transition: opacity .3s var(--motion-ease); }
.satyar-motion .hero-pagination button:hover,
.satyar-motion .hero-pagination button:focus-visible { opacity: 1; }
.satyar-motion .hero-pagination button:disabled { opacity: .28; cursor: default; }
.satyar-motion .hero-pagination button:disabled svg { translate: none; }
.satyar-motion .hero-pagination svg { transition: translate .28s var(--motion-ease); }
.satyar-motion .hero-pagination__next:hover svg { translate: 4px 0; }
.satyar-motion .hero-pagination__prev:hover svg { translate: -4px 0; }
.satyar-motion .custom-arrow { transition: translate .28s var(--motion-ease), opacity .28s var(--motion-ease); }
.satyar-motion .custom-next:hover { translate: 4px 0; }
.satyar-motion .custom-prev:hover { translate: -4px 0; }

/* Cards stay anchored; only the photograph moves inside its crop. */
.satyar-motion .vt-card, .satyar-motion .vmm-card, .satyar-motion .press-release__link { transform: none; }
.satyar-motion .vt-card:hover, .satyar-motion .vmm-card:hover { transform: none; }
.satyar-motion .motion-card-media { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.satyar-motion .motion-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.satyar-motion .component-card img { aspect-ratio: 16 / 9; }
.vt-card__media, .component-card__media { position: relative; width: 100%; }
.vt-card.is-coming-soon, .component-card.is-coming-soon { cursor: default; }
.vt-card.is-coming-soon .vt-card__media::after,
.component-card.is-coming-soon .component-card__media::after {
  content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .7); pointer-events: none;
}
.vt-card__media .coming-soon-label, .component-card__media .coming-soon-label {
  position: absolute; top: 50%; left: 50%; z-index: 1; white-space: nowrap;
  transform: translate(-50%, -50%);
}
.component-card__media .coming-soon-label { font-size: 0.9375rem; }
.satyar-motion .vt-card.is-coming-soon:hover img { transform: none; }
.satyar-motion .vt-card.is-coming-soon:hover h3 { color: var(--wp--preset--color--contrast); }
.satyar-motion .press-release__media { height: auto; aspect-ratio: 16 / 9; }
.satyar-motion .vt-card img,
.satyar-motion .vmm-card__media img,
.satyar-motion .press-release__media img { transition: transform .75s var(--motion-ease); }
.satyar-motion .vt-card:hover img, .satyar-motion .vt-card:focus-visible img,
.satyar-motion .vmm-card:not(.is-coming-soon):hover img,
.satyar-motion .vmm-card:not(.is-coming-soon):focus-visible img,
.satyar-motion .press-release__link:hover img,
.satyar-motion .press-release__link:focus-visible img { transform: scale(1.035); }
.satyar-motion .vt-card h3, .satyar-motion .vmm-card h3, .satyar-motion .press-release__text h3 { transition: color .28s var(--motion-ease); }
.satyar-motion .vt-card:hover h3, .satyar-motion .vt-card:focus-visible h3,
.satyar-motion .vmm-card:not(.is-coming-soon):hover h3,
.satyar-motion .press-release__link:hover h3 { color: #d2aa66; }
.satyar-motion .vt-list { opacity: 1; transition: none; }
.satyar-motion .vt-spinner { display: none; }
.satyar-motion .overlay-statement__media { overflow: hidden; }

/* Smaller footer typography retains the existing hierarchy and typefaces. */
.satyar-motion .site-footer__title { font-size: 4rem; }
.satyar-motion .site-footer__label { font-size: 1rem; }
.satyar-motion .site-footer__brands > div, .satyar-motion .site-footer__nav { font-size: 1.125rem; }
.satyar-motion .site-footer__bottom-inner { font-size: 0.875rem; }
.satyar-motion .site-footer__button .wp-block-button__link { font-size: 1.125rem; }

@media (max-width: 991px) {
  .satyar-motion .hero-pagination { right: 13px; bottom: 12px; }
  .satyar-motion .site-footer__title { font-size: 3rem; }
  .satyar-motion .site-footer__label { font-size: 0.875rem; }
  .satyar-motion .site-footer__brands > div, .satyar-motion .site-footer__nav { font-size: 1rem; }
  .satyar-motion .site-footer__button .wp-block-button__link { font-size: 1rem; }
}
@media (max-width: 478px) {
  .satyar-motion .site-footer__title { font-size: 2.25rem; }
}
@media (hover: none) {
  .satyar-motion .vt-card:hover img, .satyar-motion .press-release__link:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .satyar-motion *, .satyar-motion *::before, .satyar-motion *::after { animation: none !important; transition-duration: .01ms !important; }
  .satyar-motion .vt-card:hover img, .satyar-motion .vmm-card:hover img,
  .satyar-motion .press-release__link:hover img { transform: none; }
  .satyar-motion .hero-pagination svg, .satyar-motion .custom-arrow { translate: none !important; }
}

  
/* Archive and carousel photography follows the same 16:9 card crop. */
.satyar-motion .va-card__media,
.satyar-motion .vs-card__img,
.satyar-motion .vs-feature__media figure,
.satyar-motion .about-gallery figure { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow: hidden; }
.satyar-motion .va-card__media img,
.satyar-motion .vs-card__img img,
.satyar-motion .vs-feature__media img,
.satyar-motion .about-gallery figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .75s var(--motion-ease); }
.satyar-motion .va-card:not(.is-coming-soon):hover img,
.satyar-motion .va-card:focus-visible img,
.satyar-motion .vs-card:hover img,
.satyar-motion .vs-feature:hover img,
.satyar-motion .about-gallery .splide__slide:hover img { transform: scale(1.035); }
.satyar-motion .va-card__title { transition: color .28s var(--motion-ease); }
.satyar-motion .va-card:not(.is-coming-soon):hover .va-card__title { color: var(--wp--preset--color--accent); }
.satyar-motion .vs-arrow { width: 44px; height: 44px; background-size: 32px 26px; opacity: .7; transition: translate .28s var(--motion-ease), opacity .28s var(--motion-ease); }
.satyar-motion .vs-arrow:hover, .satyar-motion .vs-arrow:focus-visible { opacity: 1; }
.satyar-motion .vs-arrow--next:hover { translate: 4px 0; }
.satyar-motion .vs-arrow--prev:hover { translate: -4px 0; }
.satyar-motion .vs-arrow:disabled { opacity: .28; translate: none; }
.satyar-motion .cf-button { position: relative; overflow: hidden; isolation: isolate; transition: background-color .32s var(--motion-ease); }
.satyar-motion .cf-button::before { content: ''; position: absolute; inset: 0; background: rgba(235,219,193,.15); opacity: 0; transition: opacity .32s var(--motion-ease); }
.satyar-motion .cf-button:hover { opacity: 1; }
.satyar-motion .cf-button:hover::before { opacity: 1; }
.satyar-motion .va-filters-button > .motion-button-label,
.satyar-motion .mobile-filter-toggle > .motion-button-label,
.satyar-motion #dynamic-filters button > .motion-button-label { display: inline-flex; align-items: center; gap: inherit; }
.satyar-motion .va-results { transition: none; }
/* GSAP owns card transforms; a CSS transform transition would lag each animation frame. */
.satyar-motion .va-card { transition: color .28s var(--motion-ease); }
.satyar-motion .va-accordion__content[hidden] { display: none; }
.satyar-motion .mobile-filters-overlay { visibility: hidden; transition: transform .42s var(--motion-ease), opacity .3s var(--motion-ease), visibility .3s; }
.satyar-motion .mobile-filters-overlay.show { visibility: visible; }
@media (max-width: 991px) {
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .satyar-motion .va-card:hover img, .satyar-motion .vs-card:hover img,
  .satyar-motion .vs-feature:hover img, .satyar-motion .about-gallery .splide__slide:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .satyar-motion .vs-arrow { translate: none !important; }
}
/* Section navigation uses the same sharp type and gold selection as the navbar. */
.satyar-motion #content-links a { text-shadow: none; transition: color .28s var(--motion-ease); }
.satyar-motion #content-links a.is-current { text-shadow: none; color: var(--wp--preset--color--accent); }
.satyar-motion #content-links a.is-current::after { transform: scaleX(1); }