/* ==========================================================================
   CAESAR AUTO — main.css
   Structural + component styles. Built entirely from design-system.css
   tokens — no magic numbers. Loaded after design-system.css.
   ========================================================================== */

/* ---- grid backdrop, the "blueprint" signature ---- */
.grid-bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(90deg, rgba(201,205,210,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(201,205,210,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
}

/* ---- section label: small-caps inscription with chrome rule + index ---- */
.section-label{
  display:flex; align-items:center; gap:var(--sp-3);
  font-family:var(--font-mono); font-size:.78rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--chrome);
  margin-bottom:var(--sp-6);
}
.section-label::after{content:''; flex:1; height:1px; background:var(--chrome-line)}
.section-label b{color:var(--paper); font-weight:600; letter-spacing:.22em}

/* ---- five-star divider (brand element, structural, never decorative) ---- */
.star-divider{display:flex; justify-content:center; gap:var(--sp-3); padding:var(--sp-7) 0}
.star-divider svg{width:14px; height:14px; fill:var(--chrome)}

/* ================= HEADER ================= */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(5,5,5,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease), padding var(--dur-base) var(--ease);
}
header.is-scrolled{ border-bottom-color:rgba(201,205,210,.18) }
.nav-row{display:flex; align-items:center; justify-content:space-between; padding-block:var(--sp-4); transition:padding var(--dur-base) var(--ease)}
header.is-scrolled .nav-row{padding-block:var(--sp-2)}
.brand{display:flex; align-items:center; gap:var(--sp-3); text-decoration:none; min-width:0}
.brand .mark{width:34px; height:34px; color:var(--chrome-hi); flex:none}
.brand .wordmark{font-family:var(--font-display); font-weight:700; letter-spacing:.04em; font-size:1.15rem; text-transform:uppercase; white-space:nowrap}
.brand .wordmark small{display:block; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.28em; color:var(--chrome); font-weight:400}
@media (max-width:520px){
  .brand .wordmark small{display:none}
  .brand .wordmark{font-size:1rem}
}

nav.primary{display:flex; align-items:center; gap:var(--sp-6)}
nav.primary ul{list-style:none; display:flex; gap:var(--sp-5); margin:0; padding:0}
nav.primary a{
  text-decoration:none; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--chrome-hi); position:relative; padding-block:.3rem;
}
nav.primary a::after{content:'';position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--caesar-red); transform:scaleX(0); transition:transform var(--dur-base) var(--ease)}
nav.primary a:hover::after, nav.primary a[aria-current]::after{transform:scaleX(1)}
.lang-switch{display:flex; font-family:var(--font-mono); font-size:.75rem; gap:.5rem; border:1px solid rgba(201,205,210,.3); padding:.3rem .5rem}
.lang-switch a{text-decoration:none; color:var(--chrome); padding:.1rem .3rem}
.lang-switch a[aria-current]{color:var(--paper); font-weight:700}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.5rem}
.burger span{width:22px; height:2px; background:var(--paper)}

@media (max-width:880px){
  nav.primary ul{display:none}
  .burger{display:flex}
}

/* full-screen mobile menu */
.mobile-menu{
  position:fixed; inset:0; background:var(--ink); z-index:200;
  display:flex; flex-direction:column; padding:var(--sp-5);
  transform:translateY(-100%); transition:transform var(--dur-slow) var(--ease);
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu .close-row{display:flex; justify-content:flex-end}
.mobile-menu .close-row button{background:none; border:0; color:var(--paper); font-size:2rem; line-height:1; cursor:pointer}
.mobile-menu ul{list-style:none; margin:var(--sp-7) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4)}
.mobile-menu a{
  font-family:var(--font-display); text-transform:uppercase; font-size:2.4rem; text-decoration:none; color:var(--paper);
  opacity:0; transform:translateY(10px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.mobile-menu.open a{opacity:1; transform:translateY(0)}
/* target li:nth-child, not a:nth-child - each <a> is its own <li>'s only
   child, so a:nth-child(n) would match every link at n=1 and none at n>1 */
.mobile-menu.open li:nth-child(1) a{transition-delay:60ms}
.mobile-menu.open li:nth-child(2) a{transition-delay:120ms}
.mobile-menu.open li:nth-child(3) a{transition-delay:180ms}
.mobile-menu.open li:nth-child(4) a{transition-delay:240ms}
.mobile-menu.open li:nth-child(5) a{transition-delay:300ms}
.mobile-menu.open li:nth-child(6) a{transition-delay:360ms}

/* ================= HERO ================= */
.hero{position:relative; overflow:hidden; padding-block: var(--sp-9) var(--sp-8); border-bottom:1px solid rgba(201,205,210,.14)}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap:var(--sp-7); align-items:end}
@media (max-width:960px){ .hero-grid{grid-template-columns:minmax(0,1fr); gap:var(--sp-6)} }

/* Full-width cinematic crop: source is 640x504 with the crest bounding box
   at rows 93-404 (center ~248) - a 19:10 crop centered on that midpoint
   keeps a comfortable margin on all sides so cover-cropping never clips
   the crest itself, only the black margin around it. */
.logo-reveal{
  width:100%; aspect-ratio:19/10; overflow:hidden;
  margin-bottom:var(--sp-6); position:relative; background:var(--ink);
}
.logo-reveal video{width:100%; height:100%; object-fit:cover; display:block}

.eyebrow{font-family:var(--font-mono); font-size:.8rem; letter-spacing:.24em; color:var(--caesar-red); margin-bottom:var(--sp-4)}
h1.tagline{
  font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:var(--text-h1); line-height:.92; letter-spacing:.01em; margin:0 0 var(--sp-5);
}
h1.tagline em{font-style:normal; color:var(--caesar-red)}
.hero p.lead{font-size:1.05rem; color:var(--chrome-hi); max-width:46ch; margin:0 0 var(--sp-6)}
.hero-ctas{display:flex; gap:var(--sp-3); flex-wrap:wrap}

.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body); font-weight:600;
  text-decoration:none; padding:.95rem 1.6rem; border:1px solid transparent; font-size:.9rem;
  letter-spacing:.03em; cursor:pointer; transition:transform var(--dur-fast) var(--ease), background var(--dur-base) var(--ease);
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--caesar-red); color:var(--paper)}
.btn-primary:hover{background:#c72920}
.btn-ghost{border-color:rgba(201,205,210,.4); color:var(--paper)}
.btn-ghost:hover{border-color:var(--chrome-hi)}

/* route corridor - the China -> Algeria shipping lane, styled as a live
   tracker rather than a static squiggle: a faint wireframe-globe backdrop
   (echoes the hero's blueprint grid), a dashed sea-lane that visibly
   "sails" toward Algeria, a small cargo ship gliding the full corridor on
   loop, a pulsing departure buoy at origin, a map-pin that drops in on
   arrival, and a manifest-style "fret maritime" tag annotating the route. */
.route-wrap{position:relative}
.route-wrap svg{width:100%; height:auto; overflow:visible}

.route-globe{fill:none; stroke:rgba(201,205,210,.1); stroke-dasharray:2 5}

.route-path{
  fill:none; stroke:var(--chrome-hi); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:9 7;
  animation: sail 1.1s linear infinite, ambient 5s ease-in-out infinite;
}
@keyframes sail{ to{ stroke-dashoffset:-32 } }
@keyframes ambient{ 0%,100%{opacity:.85} 50%{opacity:1} }

.route-quay{stroke:rgba(201,205,210,.35); stroke-width:2}
.node-cn{fill:var(--caesar-red)}
.node-pulse{fill:none; stroke:var(--caesar-red); stroke-width:2; opacity:0; animation: pulse 2.4s ease-out .5s infinite}
@keyframes pulse{ 0%{r:7; opacity:.9} 100%{r:26; opacity:0} }

.route-ship .hull{fill:var(--chrome-hi)}
.route-ship .funnel{fill:var(--caesar-red)}

.route-node-dz{
  opacity:0; transform:translateY(-10px); transform-box:fill-box; transform-origin:50% 100%;
  animation: land .5s var(--ease) 2s forwards;
}
@keyframes land{ to{opacity:1; transform:translateY(0)} }
.route-pin-tip, .route-pin-bulb{fill:var(--caesar-green)}
.route-pin-hole{fill:var(--ink)}

.route-label{font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:20px; letter-spacing:.04em; fill:var(--paper)}
.route-sublabel{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; fill:var(--chrome)}

.route-tag line{stroke:rgba(201,205,210,.4); stroke-dasharray:2 3}
.route-tag circle{fill:var(--paper)}
.route-tag-text{font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; fill:var(--chrome-hi)}

/* ================= VALUE PROP STRIP ================= */
.value-strip{border-bottom:1px solid rgba(201,205,210,.14)}
.value-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:760px){ .value-grid{grid-template-columns:minmax(0,1fr)} }
.value-item{
  padding:var(--sp-6) var(--sp-5); border-inline-start:1px solid rgba(201,205,210,.14);
  display:flex; gap:var(--sp-3); align-items:flex-start;
}
.value-item:first-child{border-inline-start:none}
.value-item svg{width:26px; height:26px; flex:none; color:var(--chrome-hi); margin-top:.15rem}
.value-item h3{font-family:var(--font-display); text-transform:uppercase; font-size:1.1rem; margin:0 0 .3rem; letter-spacing:.02em}
.value-item p{margin:0; color:var(--chrome); font-size:.9rem}

/* ================= SECTIONS ================= */
section.block{padding-block:var(--sp-8); position:relative}

/* ---- vehicle cards ---- */
.fleet-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5)}
@media (max-width:960px){ .fleet-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .fleet-grid{grid-template-columns:minmax(0,1fr)} }

/* ---- video showcase ---- */
.video-intro{max-width:640px; margin:0 0 var(--sp-5)}
.video-intro h2{font-family:var(--font-display); text-transform:uppercase; font-size:1.6rem; margin:0 0 .4rem}
.video-intro p{margin:0; color:var(--chrome)}
.video-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5)}
@media (max-width:760px){ .video-grid{grid-template-columns:minmax(0,1fr)} }
.video-card{background:var(--ink-2); border:1px solid rgba(201,205,210,.12); overflow:hidden}
.video-card .video-frame{position:relative; width:100%; aspect-ratio:16/9; background:#000}
.video-card .video-frame video{width:100%; height:100%; object-fit:contain; display:block; background:#000}
.video-card h3{font-family:var(--font-display); text-transform:uppercase; font-size:1rem; letter-spacing:.02em; margin:0; padding:.8rem .9rem}

.v-card{background:var(--ink-2); border:1px solid rgba(201,205,210,.12); display:flex; flex-direction:column}
.v-card-top{
  display:flex; justify-content:space-between; align-items:center; padding:.6rem .9rem;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--chrome);
  border-bottom:1px solid rgba(201,205,210,.14); background-image:var(--chrome-line); background-size:100% 1px; background-repeat:no-repeat; background-position:bottom;
}
.badge{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; padding:.2rem .5rem; text-transform:uppercase}
.badge-new{color:var(--caesar-green); border:1px solid var(--caesar-green)}
.badge-used{color:var(--chrome); border:1px solid var(--chrome)}

.v-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink-3)}
.v-media img{width:100%; height:100%; object-fit:cover; filter:saturate(.94) contrast(1.05); transition:transform var(--dur-slow) var(--ease)}
.v-card:hover .v-media img{transform:scale(1.04)}
.v-media.placeholder{
  display:flex; align-items:center; justify-content:center; background:var(--ink-2);
  background-image: url('../img/pattern-corridor.svg');
  background-size:180px; background-repeat:repeat;
}
.v-media.placeholder .mk{width:64px; height:64px; color:rgba(201,205,210,.28)}
.v-media.placeholder .soon{position:absolute; bottom:10px; inset-inline:0; text-align:center; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; color:rgba(201,205,210,.55); text-transform:uppercase}

.v-body{padding:var(--sp-4); display:flex; flex-direction:column; gap:.5rem; flex:1}
.v-body h3{margin:0; font-family:var(--font-display); text-transform:uppercase; font-size:1.25rem; letter-spacing:.01em}
.v-specs{display:flex; gap:.8rem; font-size:.78rem; color:var(--chrome); font-family:var(--font-mono)}
.v-price-row{display:flex; justify-content:space-between; align-items:baseline; padding-top:.3rem; border-top:1px solid rgba(201,205,210,.1)}
.v-price{color:var(--caesar-red); font-family:var(--font-mono); font-weight:700; font-size:1.15rem; font-variant-numeric:tabular-nums}
.v-price-usd{color:var(--chrome); font-size:.72rem; font-family:var(--font-mono); display:block; margin-top:.1rem}
.v-actions-row{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:.8rem}
.v-link{font-size:.85rem; font-weight:600; text-decoration:none; color:var(--paper); border-bottom:1px solid var(--caesar-red); padding-bottom:2px}
.v-quick-actions{display:flex; gap:.6rem}
.v-icon-btn{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid rgba(201,205,210,.35); color:var(--chrome-hi); text-decoration:none;
  transition:border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
}
.v-icon-btn svg, .v-icon-btn .mk{width:18px; height:18px}
.v-icon-btn:hover{border-color:var(--caesar-red); color:var(--caesar-red)}
.v-icon-btn-wa:hover{background:var(--caesar-red); border-color:var(--caesar-red); color:var(--paper)}

/* ---- process condensed ---- */
.process-row{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--sp-3); position:relative}
.process-row::before{content:''; position:absolute; top:22px; inset-inline:4%; height:1px; background:var(--chrome-line)}
@media (max-width:760px){ .process-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr); row-gap:var(--sp-6)} .process-row::before{display:none} }
.p-step{position:relative; text-align:center}
.p-dot{width:46px; height:46px; border-radius:50%; margin:0 auto var(--sp-3); display:flex; align-items:center; justify-content:center;
  background:var(--ink); border:1px solid var(--chrome); position:relative; z-index:1}
.p-step.done .p-dot{border-color:var(--caesar-green); color:var(--caesar-green)}
.p-step.now .p-dot{border-color:var(--caesar-red); color:var(--caesar-red)}
.p-dot svg{width:20px; height:20px}
.p-step .idx{display:block; font-family:var(--font-mono); font-size:.65rem; color:var(--chrome); margin-bottom:.2rem}
.p-step h4{font-family:var(--font-display); text-transform:uppercase; font-size:.95rem; margin:0}

/* ---- counters ---- */
.counters{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-6); text-align:center}
@media (max-width:760px){ .counters{grid-template-columns:minmax(0,1fr)} }
.counter{padding:var(--sp-5) 0; position:relative}
.counter .laurel{position:absolute; top:0; inset-inline:0; display:flex; justify-content:center; opacity:.5}
.counter .laurel svg{width:120px; height:24px; color:var(--chrome)}
.counter .num{font-family:var(--font-mono); font-size:clamp(2.4rem,3vw,3.6rem); font-weight:700; color:var(--paper); font-variant-numeric:tabular-nums}
.counter .label{font-size:.82rem; text-transform:uppercase; letter-spacing:.12em; color:var(--chrome); margin-top:.4rem}

/* ---- trust block ---- */
.trust{display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:var(--sp-7); align-items:center}
@media (max-width:860px){ .trust{grid-template-columns:minmax(0,1fr)} }
.trust blockquote{margin:0; font-family:var(--font-display); text-transform:uppercase; font-size:var(--text-h2); line-height:1.05; letter-spacing:.01em}
.trust cite{display:block; margin-top:var(--sp-4); font-style:normal; font-family:var(--font-mono); font-size:.8rem; color:var(--chrome)}
.trust-list{display:flex; flex-direction:column; gap:var(--sp-4)}
.trust-list li{list-style:none; display:flex; gap:.8rem; align-items:flex-start; font-size:.92rem; color:var(--chrome-hi)}
.trust-list svg{width:18px; height:18px; color:var(--caesar-green); flex:none; margin-top:.2rem}

/* ---- final CTA band ---- */
.cta-band{
  padding-block:var(--sp-8); text-align:center; border-top:1px solid rgba(201,205,210,.14); border-bottom:1px solid rgba(201,205,210,.14);
  position:relative; overflow:hidden;
}
.cta-band h2{font-family:var(--font-display); text-transform:uppercase; font-size:var(--text-h2); margin:0 0 var(--sp-5)}

/* ================= FOOTER ================= */
footer{padding-block:var(--sp-7) var(--sp-5); position:relative}
footer::before{
  content:''; position:absolute; inset:0; background-image:url('../img/pattern-corridor.svg');
  background-size:220px; opacity:.04; pointer-events:none;
}
.footer-grid{position:relative; display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); gap:var(--sp-6)}
@media (max-width:820px){ .footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media (max-width:520px){ .footer-grid{grid-template-columns:minmax(0,1fr)} }
.footer-grid h5{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--chrome); margin:0 0 var(--sp-3)}
.footer-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem}
.footer-grid a{text-decoration:none; color:var(--chrome-hi); font-size:.88rem}
.footer-address{margin:var(--sp-3) 0 0; font-size:.78rem; line-height:1.5; color:var(--chrome)}
.footer-address span{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--chrome-hi)}
.footer-bottom{
  position:relative; margin-top:var(--sp-7); padding-top:var(--sp-4); border-top:1px solid rgba(201,205,210,.14);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3);
  font-family:var(--font-mono); font-size:.72rem; color:var(--chrome); letter-spacing:.04em;
}

/* ================= SCROLL REVEAL ================= */
[data-reveal]{opacity:0; transform:translateY(12px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease)}
[data-reveal].in{opacity:1; transform:none}

/* ================= WHATSAPP FLOAT ================= */
.wa-fab{
  position:fixed; inset-block-end:var(--sp-5); inset-inline-end:var(--sp-5); z-index:150;
  width:58px; height:58px; border-radius:50%; background:var(--caesar-red); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.4);
  transition:transform var(--dur-fast) var(--ease);
}
.wa-fab:hover{transform:scale(1.06)}
.wa-fab svg{width:26px; height:26px; color:var(--paper)}
.wa-sheet{
  position:fixed; inset-block-end:calc(var(--sp-5) + 70px); inset-inline-end:var(--sp-5); z-index:150;
  background:var(--ink-2); border:1px solid rgba(201,205,210,.2); min-width:260px;
  transform:translateY(8px) scale(.98); opacity:0; pointer-events:none; transition:all var(--dur-base) var(--ease);
}
.wa-sheet.open{opacity:1; transform:none; pointer-events:auto}
.wa-sheet a{
  display:flex; justify-content:space-between; align-items:center; padding:var(--sp-3) var(--sp-4);
  text-decoration:none; border-bottom:1px solid rgba(201,205,210,.14); color:var(--paper); font-size:.85rem;
}
.wa-sheet a:last-child{border-bottom:none}
.wa-sheet a span.role{color:var(--chrome); font-size:.72rem; text-transform:uppercase; letter-spacing:.08em}
.wa-sheet[hidden]{display:none}

.page-wrapper{padding-bottom:90px}

@media (prefers-reduced-motion: reduce){
  .route-path, .node-pulse, .route-node-dz{animation:none; opacity:1; transform:none}
}

/* ================= SUB-PAGE HEADER (vehicles/process/about/faq/contact) ================= */
.page-header{padding-block:var(--sp-8) var(--sp-6); border-bottom:1px solid rgba(201,205,210,.14)}
.page-header h1{font-family:var(--font-display); text-transform:uppercase; font-size:var(--text-h1); line-height:1.02; margin:var(--sp-3) 0 var(--sp-4)}
.page-header .lead{font-size:1.05rem; color:var(--chrome-hi); max-width:62ch; margin:0}

/* ================= CATALOG FILTERS (vehicles.html) ================= */
.filter-bar{display:flex; flex-wrap:wrap; gap:var(--sp-5); align-items:flex-end; margin-bottom:var(--sp-6); padding-bottom:var(--sp-5); border-bottom:1px solid rgba(201,205,210,.14)}
.filter-group{display:flex; flex-direction:column; gap:.5rem}
.filter-group-label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--chrome)}
.filter-pills{display:flex; flex-wrap:wrap; gap:.5rem}
.filter-pill{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase;
  padding:.5rem 1rem; border:1px solid rgba(201,205,210,.3); background:none; color:var(--chrome-hi); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.filter-pill:hover{border-color:var(--chrome-hi)}
.filter-pill[aria-pressed="true"]{background:var(--caesar-red); border-color:var(--caesar-red); color:var(--paper)}
.filter-select{
  font-family:var(--font-mono); font-size:.85rem; background:var(--ink-2); color:var(--paper);
  border:1px solid rgba(201,205,210,.3); padding:.6rem .8rem; min-width:190px;
}
.filter-select:focus-visible{outline:2px solid var(--caesar-red); outline-offset:2px}
.results-count{margin-inline-start:auto; align-self:center; font-family:var(--font-mono); font-size:.82rem; color:var(--chrome)}
.catalog-empty{padding:var(--sp-7) 0; text-align:center; color:var(--chrome)}
.catalog-empty .btn{margin-top:var(--sp-4)}

/* ================= FORMS (contact.html) ================= */
.form-grid{display:grid; gap:var(--sp-4); max-width:520px}
.form-field{display:flex; flex-direction:column; gap:.5rem}
.form-field label{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--chrome)}
.form-field input, .form-field textarea{
  background:var(--ink-2); border:1px solid rgba(201,205,210,.3); color:var(--paper);
  font-family:var(--font-body); font-size:.95rem; padding:.75rem .9rem; width:100%;
}
.form-field textarea{resize:vertical; min-height:120px}
.form-field input:focus-visible, .form-field textarea:focus-visible{outline:2px solid var(--caesar-red); outline-offset:2px}
.form-note{font-size:.8rem; color:var(--chrome); margin-top:.9rem; max-width:52ch}

/* ================= CONTACT LAYOUT ================= */
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:var(--sp-7)}
@media (max-width:900px){ .contact-grid{grid-template-columns:minmax(0,1fr)} }
.contact-cards{display:flex; flex-direction:column; gap:var(--sp-4)}
.contact-card{background:var(--ink-2); border:1px solid rgba(201,205,210,.12); padding:var(--sp-4)}
.contact-card h3{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--chrome); margin:0 0 var(--sp-3)}
.contact-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem}
.contact-card a{text-decoration:none; color:var(--paper); font-size:.95rem}
.contact-card a:hover{color:var(--caesar-red)}
.contact-card address{font-style:normal; font-size:.9rem; color:var(--chrome-hi); line-height:1.6}

/* ================= FAQ (faq.html) ================= */
.faq-list{max-width:820px; display:flex; flex-direction:column}
.faq-item{border-bottom:1px solid rgba(201,205,210,.14)}
.faq-item summary{list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-q{
  width:100%; text-align:start; background:none; border:0; color:var(--paper); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) 0; font-family:var(--font-display); text-transform:uppercase; font-size:1.05rem; letter-spacing:.01em;
}
.faq-q .plus{flex:none; width:22px; height:22px; position:relative}
.faq-q .plus::before, .faq-q .plus::after{content:''; position:absolute; background:var(--chrome-hi); transition:transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease)}
.faq-q .plus::before{top:50%; inset-inline:0; height:2px; transform:translateY(-50%)}
.faq-q .plus::after{inset-block:0; inset-inline-start:50%; width:2px; transform:translateX(-50%)}
.faq-item[open] .faq-q .plus::after{opacity:0}
.faq-item[open] .faq-q{color:var(--caesar-red)}
.faq-a{margin:0 0 var(--sp-4); padding-inline-end:var(--sp-6); color:var(--chrome-hi); max-width:70ch}

/* ================= ABOUT (about.html) ================= */
.pillars-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-5)}
@media (max-width:820px){ .pillars-grid{grid-template-columns:minmax(0,1fr)} }
.pillar{border-inline-start:1px solid rgba(201,205,210,.18); padding-inline-start:var(--sp-4)}
.pillar:first-child{border-inline-start:none; padding-inline-start:0}
.pillar h3{font-family:var(--font-display); text-transform:uppercase; font-size:1.1rem; margin:0 0 .5rem}
.pillar p{margin:0; color:var(--chrome); font-size:.92rem}
.about-story{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-7); align-items:start}
@media (max-width:860px){ .about-story{grid-template-columns:minmax(0,1fr)} }
.about-story h2{font-family:var(--font-display); text-transform:uppercase; font-size:var(--text-h2); margin:0 0 var(--sp-4)}
.about-story p{color:var(--chrome-hi); max-width:56ch}
.office-card{background:var(--ink-2); border:1px solid rgba(201,205,210,.12); padding:var(--sp-5)}
.office-card h3{font-family:var(--font-display); text-transform:uppercase; font-size:1.2rem; margin:0 0 var(--sp-3)}
.office-card p{color:var(--chrome-hi); margin:0 0 var(--sp-3)}
.office-card address{font-style:normal; font-family:var(--font-mono); font-size:.82rem; color:var(--chrome); line-height:1.7}

/* ================= PROCESS DETAIL (process.html) ================= */
.process-detail-list{display:flex; flex-direction:column}
.process-detail-item{display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--sp-4); padding-block:var(--sp-5); border-bottom:1px solid rgba(201,205,210,.14)}
.process-detail-item:last-child{border-bottom:none}
.process-detail-dot{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid rgba(201,205,210,.4); font-family:var(--font-mono); font-size:.85rem; color:var(--chrome-hi)}
.process-detail-body h3{font-family:var(--font-display); text-transform:uppercase; font-size:1.3rem; margin:0 0 .5rem}
.process-detail-body p{margin:0; color:var(--chrome-hi); max-width:64ch}
@media (max-width:560px){ .process-detail-item{grid-template-columns:1fr} .process-detail-dot{margin-bottom:.4rem} }