/* ============================================================
   Chapa y Pintura — landing page
   Design system: "Refined Industrial"
   All selectors prefixed with .cl- (chapa landing) to avoid
   conflicts with the site's main stylesheet.
   ============================================================ */

:root {
  --cl-paper: #F4F1EB;
  --cl-paper-2: #ECE7DE;
  --cl-ink: #161412;
  --cl-ink-2: #2A2622;
  --cl-mute: #7A7268;
  --cl-line: #D8D2C6;
  --cl-rust: #f60;
  --cl-rust-dark: #d95400;
  --cl-whatsapp: #25D366;

  --cl-font-display: 'Cuprum', 'Open Sans', sans-serif;
  --cl-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cl-font-cuprum: 'Cuprum', 'Open Sans', sans-serif;
  --cl-font-tech: 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --cl-radius: 0px;
  --cl-container: 1200px;
  --cl-header-h: 57px;
}
@media (min-width: 992px) {
  :root { --cl-header-h: 80px; }
}

/* ============================================================
   RESET / BASE — scoped to .layout-landing to not affect other pages
   ============================================================ */
.layout-landing {
  background: var(--cl-paper);
  color: var(--cl-ink);
  font-family: var(--cl-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.layout-landing main {
  display: block;
}

.layout-landing img,
.layout-landing picture {
  max-width: 100%;
  display: block;
}

.layout-landing a {
  color: var(--cl-rust);
  text-decoration: none;
  transition: color .15s ease;
}
.layout-landing a:hover { color: var(--cl-rust-dark); }

/* Hide the site's default preloader spinner if any layout brings it */
.layout-landing #preloader { display: none !important; }

/* Container */
.cl-container {
  max-width: var(--cl-container);
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 992px) {
  .cl-container { padding: 0 40px; }
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.cl-h2 {
  font-family: var(--cl-font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 .4em;
  color: var(--cl-ink);
  text-wrap: balance;
  word-break: normal;
  hyphens: none;
}
/* Compact variant for narrow contexts (intro 2-column grid).
   No max-width — let text-wrap: balance distribute lines across the column. */
.cl-h2--compact {
  font-size: clamp(1.35rem, 0.95rem + 1.1vw, 1.95rem);
}
.cl-h2--light { color: var(--cl-paper); }

.cl-eyebrow {
  display: inline-block;
  font-family: var(--cl-font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cl-rust);
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--cl-rust);
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.cl-eyebrow--light { color: var(--cl-paper); border-color: var(--cl-rust); }

.cl-label {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cl-paper);
  border: 1px solid rgba(255,255,255,.4);
  padding: 6px 12px;
  text-align: center;
}
@media (min-width: 992px) {
  .cl-label {
    max-width: fit-content;
  }
}

.cl-section-head {
  margin-bottom: 48px;
}
.cl-section-head--center {
  text-align: center;
}
.cl-section-head--center .cl-eyebrow {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
}

/* ============================================================
   BUTTONS
   ============================================================ */
/* ─────────────────────────────────────────────────────────────
   Button hover: liquid fill sweeps in from the left, text gains
   tracking, soft halo glow appears in the button's own colour.
   No vertical jump. Two layers move at slightly different speeds
   (fill .6s power-curve, text/border .35s smooth) so the hover
   has a "depth" feel — fill arrives last like an inevitability,
   while text/border respond instantly.
   ───────────────────────────────────────────────────────────── */
.cl-btn {
  --bg: var(--cl-ink);
  --fg: var(--cl-paper);
  --bd: var(--cl-ink);
  --fill: var(--cl-rust-dark);
  --fill-fg: #fff;
  --halo: 0 0 0 0 rgba(0, 0, 0, 0);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--cl-font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--bd);
  border-radius: var(--cl-radius);
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: var(--halo);
  /* No letter-spacing transition — it changes glyph metrics and reflows the
     button width on hover. Halo + slide-in fill carry the entire interaction. */
  transition:
    color .35s cubic-bezier(.4, 0, .2, 1),
    border-color .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .55s ease;
}
/* The fill layer — slides in from the left on hover */
.cl-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--fill);
  transform: translate3d(-101%, 0, 0);
  transform-origin: left center;
  /* Sharp S-curve: slow start, fast middle, soft landing —
     gives a confident "swoosh" feel rather than linear slide */
  transition: transform .6s cubic-bezier(.85, 0, .15, 1);
  z-index: -1;
  will-change: transform;
}
.layout-landing .cl-btn,
.layout-landing .cl-btn:focus {
  color: var(--fg);
  text-decoration: none;
}
.layout-landing .cl-btn:hover {
  color: var(--fill-fg);
  text-decoration: none;
}
.cl-btn:hover {
  border-color: var(--fill);
  box-shadow: var(--halo-hover, 0 0 32px -6px rgba(255, 102, 0, .35));
}
.cl-btn:hover::before {
  transform: translate3d(0, 0, 0);
}
/* Click feedback — fill snaps to final position quickly */
.cl-btn:active::before {
  transition-duration: .12s;
}
.cl-btn:focus-visible {
  outline: 2px solid var(--cl-rust);
  outline-offset: 3px;
}

.cl-btn--primary {
  --bg: var(--cl-rust);
  --fg: #fff;
  --bd: var(--cl-rust);
  --fill: var(--cl-rust-dark);
  --fill-fg: #fff;
  --halo-hover: 0 0 36px -4px rgba(255, 102, 0, .55);
}

.cl-btn--ghost {
  --bg: transparent;
  --fg: var(--cl-paper);
  --bd: rgba(255, 255, 255, .6);
  --fill: var(--cl-paper);
  --fill-fg: var(--cl-ink);
  --halo-hover: 0 0 24px -6px rgba(244, 241, 235, .3);
}

.cl-btn--whatsapp {
  --bg: var(--cl-whatsapp);
  --fg: #fff;
  --bd: var(--cl-whatsapp);
  --fill: #1da851;
  --fill-fg: #fff;
  --halo-hover: 0 0 36px -4px rgba(37, 211, 102, .55);
}

@media (prefers-reduced-motion: reduce) {
  .cl-btn,
  .cl-btn:hover {
    transition-duration: .2s;
    box-shadow: none;
  }
  .cl-btn::before {
    transition: opacity .2s ease;
    transform: none;
    opacity: 0;
  }
  .cl-btn:hover::before {
    opacity: 1;
  }
}

.cl-btn--lg {
  padding: 18px 28px;
  font-size: 0.95rem;
}
.cl-btn--block {
  display: flex;
  width: 100%;
}

/* ============================================================
   HERO
   ============================================================ */
.cl-hero {
  position: relative;
  min-height: calc(100vh - var(--cl-header-h));
  min-height: calc(100svh - var(--cl-header-h));
  display: flex;
  align-items: center;
  background: var(--cl-ink);
  color: var(--cl-paper);
  overflow: hidden;
  isolation: isolate;
}

.cl-hero__img {
  position: absolute;
  left: 0;
  right: 0;
  top: -120px;
  bottom: -120px;
  z-index: 0;
  display: block;
  transform: translate3d(0, var(--cl-hero-parallax, -120px), 0);
  will-change: transform;
}
.cl-hero__img {
  width: 100%;
}
.cl-hero__img picture {
  width: 100%;
  height: 100%;
  display: block;
}
.cl-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

.cl-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(22,20,18,.25) 0%, rgba(22,20,18,.55) 55%, rgba(22,20,18,.85) 100%),
    linear-gradient(180deg, rgba(22,20,18,.4) 0%, rgba(22,20,18,0) 30%);
}

.cl-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--cl-container);
  margin: 0 auto;
  min-height: calc(100vh - var(--cl-header-h));
  min-height: calc(100svh - var(--cl-header-h));
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  animation: cl-fade-in .8s ease both;
}
@media (min-width: 992px) {
  .cl-hero__inner {
    justify-content: center;
    padding: 72px 40px;
  }
}

.cl-hero__title {
  font-family: var(--cl-font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 1.6rem + 7vw, 8rem);
  line-height: .88;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 16px 0 24px;
  color: var(--cl-paper);
}
.cl-hero__title span {
  color: var(--cl-rust);
  font-style: italic;
  font-weight: 400;
}

.cl-hero__sub {
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.3rem);
  line-height: 1.5;
  max-width: 580px;
  color: rgba(244,241,235,.92);
  margin: 0 0 36px;
}
.cl-hero__sub strong {
  color: var(--cl-paper);
  font-weight: 600;
}

.cl-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 575.98px) {
  .cl-hero__cta {
    width: 100%;
    flex-direction: column;
  }
  .cl-hero__cta .cl-btn {
    width: 100%;
  }
}

@keyframes cl-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   INTRO
   ============================================================ */
.cl-intro {
  padding: 80px 0;
  background: var(--cl-paper);
}
@media (min-width: 992px) {
  .cl-intro { padding: 120px 0; }
}

.cl-intro__grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .cl-intro__grid {
    /* Text column gets more breathing room — metrics need ~280-320px,
       text needs every pixel for the long Spanish heading. */
    grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr);
    align-items: start;
    gap: 72px;
  }
}

.cl-intro__text p {
  margin: 0 0 16px;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--cl-ink-2);
}
.cl-intro__text p:last-child { margin-bottom: 0; }

.cl-metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--cl-line);
}
.cl-metrics li {
  padding: 24px 0;
  border-bottom: 1px solid var(--cl-line);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.cl-metrics__n {
  font-family: var(--cl-font-display);
  font-size: 3.6rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--cl-ink);
}
.cl-metrics__n sup {
  color: var(--cl-rust);
  font-size: .55em;
  vertical-align: super;
  margin-left: 2px;
}
.cl-metrics__n small {
  font-size: .35em;
  font-weight: 400;
  color: var(--cl-mute);
  margin-left: 8px;
  font-family: var(--cl-font-body);
  letter-spacing: 0;
  text-transform: lowercase;
}
.cl-metrics__l {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cl-mute);
  text-align: right;
}

/* ============================================================
   SERVICIOS
   ============================================================ */
.cl-services {
  padding: 80px 0;
  background: var(--cl-paper-2);
  border-top: 1px solid var(--cl-line);
  border-bottom: 1px solid var(--cl-line);
}
@media (min-width: 992px) {
  .cl-services { padding: 120px 0; }
}

.cl-services__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--cl-line);
}
@media (min-width: 768px) {
  .cl-services__list {
    grid-template-columns: 1fr 1fr;
    border-top: 0;
  }
}

.cl-services__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  padding: 28px 0;
  border-bottom: 1px solid var(--cl-line);
}
@media (min-width: 768px) {
  .cl-services__item {
    padding: 32px 24px;
    border-bottom: 1px solid var(--cl-line);
  }
  .cl-services__item:nth-child(odd) {
    border-right: 1px solid var(--cl-line);
  }
  .cl-services__item:nth-child(1),
  .cl-services__item:nth-child(2) {
    border-top: 1px solid var(--cl-line);
  }
}

.cl-services__num {
  font-family: var(--cl-font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--cl-rust);
  min-width: 36px;
  padding-top: 4px;
}

.cl-services__title {
  font-family: var(--cl-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 8px;
  color: var(--cl-ink);
}
.cl-services__desc {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--cl-ink-2);
  margin: 0;
}

/* ============================================================
   PROCESO (dark section)
   ============================================================ */
.cl-process {
  padding: 80px 0;
  background: var(--cl-ink);
  color: var(--cl-paper);
  position: relative;
}
@media (min-width: 992px) {
  .cl-process { padding: 120px 0; }
}
/* subtle grain */
.cl-process::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.cl-process__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative;
}
@media (min-width: 768px) {
  .cl-process__list {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.cl-process__item {
  padding: 28px 0;
  border-top: 1px solid rgba(244,241,235,.16);
  position: relative;
}
@media (min-width: 768px) {
  .cl-process__item {
    padding: 28px 24px 28px 0;
    border-right: 1px solid rgba(244,241,235,.16);
    border-top: 0;
  }
  .cl-process__item:last-child {
    border-right: 0;
  }
}
@media (min-width: 992px) {
  .cl-process__list {
    margin-top: 16px;
  }
  .cl-process__item {
    padding: 40px 36px 36px;
  }
}

.cl-process__num {
  display: block;
  font-family: var(--cl-font-display);
  font-size: 4rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--cl-rust);
  margin-bottom: 16px;
}

.cl-process__title {
  font-family: var(--cl-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--cl-paper);
}
.cl-process__desc {
  font-size: .95rem;
  line-height: 1.55;
  color: rgba(244,241,235,.82);
  margin: 0;
}

/* ============================================================
   TALLER (photos)
   ============================================================ */
.cl-taller {
  padding: 80px 0 0;
  background: var(--cl-paper);
}
@media (min-width: 992px) {
  .cl-taller { padding: 120px 0 0; }
}

.cl-taller .cl-section-head { padding: 0 24px; }

.cl-taller__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 32px;
}
@media (min-width: 992px) {
  .cl-taller__grid {
    grid-template-columns: 1.4fr 1fr;
    grid-auto-rows: clamp(420px, 42vw, 560px);
    gap: 1px;
    background: var(--cl-line);
  }
}

.cl-taller__fig {
  margin: 0;
  position: relative;
  background: var(--cl-ink);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
@media (min-width: 992px) {
  .cl-taller__fig {
    height: 100%;
    min-height: 0;
    aspect-ratio: auto;
  }
}
.cl-taller__fig img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* The second (smaller column) figure shows side-view photo cropped to the
   lower body for a "wheel / brake" detail vibe. */
.cl-taller__fig + .cl-taller__fig img {
  object-position: center 70%;
}

.cl-taller__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(22,20,18,.78);
  color: var(--cl-paper);
  font-family: var(--cl-font-body);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.cl-taller__cap-tag {
  min-width: 0;
}
.cl-taller__cap-no {
  color: rgba(244,241,235,.72);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================
   CTA STRIP
   ============================================================ */
.cl-ctastrip {
  padding: 64px 0;
  background: var(--cl-ink);
  color: var(--cl-paper);
  position: relative;
  overflow: hidden;
}
/* diagonal safety stripes — left side, fades away before buttons */
.cl-ctastrip::before {
  content: "";
  position: absolute;
  top: 0; left: -10%;
  width: 35%;
  height: 100%;
  opacity: .06;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--cl-rust),
    var(--cl-rust) 20px,
    transparent 20px,
    transparent 40px
  );
  -webkit-mask-image: linear-gradient(to right, #000 60%, transparent 100%);
          mask-image: linear-gradient(to right, #000 60%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.cl-ctastrip__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .cl-ctastrip__grid {
    grid-template-columns: 1fr auto;
    gap: 48px;
  }
}

.cl-ctastrip__title {
  font-family: var(--cl-font-display);
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 8px 0 0;
}

.cl-ctastrip__btns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: min(100%, 232px);
}
.cl-ctastrip__btns .cl-btn {
  width: 100%;
  white-space: nowrap;
}
@media (min-width: 576px) {
  .cl-ctastrip__btns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 392px);
  }
}
@media (min-width: 768px) {
  /* On tablet+, let buttons fit content so the phone number doesn't wrap. */
  .cl-ctastrip__btns {
    width: auto;
    grid-template-columns: auto auto;
  }
  .cl-ctastrip__btns .cl-btn {
    width: auto;
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* ============================================================
   FORMULARIO
   ============================================================ */
.cl-form-section {
  padding: 80px 0;
  background: var(--cl-paper);
  scroll-margin-top: 80px;
}
@media (min-width: 992px) {
  .cl-form-section { padding: 120px 0; }
}

.cl-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 992px) {
  .cl-form-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 80px;
  }
}

.cl-form-text p {
  font-size: 1.05rem;
  color: var(--cl-ink-2);
  margin: 0 0 16px;
}
.cl-form-text__alt {
  margin-top: 24px !important;
  padding-top: 24px;
  border-top: 1px solid var(--cl-line);
  font-size: .95rem;
  color: var(--cl-mute);
}
.cl-form-text__alt a {
  color: var(--cl-ink);
  font-family: var(--cl-font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.cl-form {
  background: var(--cl-paper);
  border: 1px solid var(--cl-line);
  padding: 32px 24px;
}
@media (min-width: 768px) {
  .cl-form { padding: 40px; }
}

.cl-honey {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cl-field {
  display: block;
  margin-bottom: 20px;
}
.cl-field__lbl {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cl-mute);
  margin-bottom: 8px;
}
.cl-field__lbl em {
  font-style: normal;
  color: var(--cl-rust);
}
.cl-field__lbl .cl-field__opt {
  color: var(--cl-mute);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: none;
  font-size: 0.72rem;
}
.cl-field__inp {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--cl-line);
  background: #fff;
  font-family: var(--cl-font-body);
  font-size: 1rem;
  color: var(--cl-ink);
  border-radius: var(--cl-radius);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s ease;
}
.cl-field__inp:focus {
  outline: none;
  border-color: var(--cl-rust);
}
.cl-field__inp--ta {
  resize: vertical;
  min-height: 84px;
  font-family: var(--cl-font-body);
}

/* Invalid state — red 2px border + matching error text below.
   Applied to .cl-field wrapper, not the input itself, so the label
   stays neutral. The error slot is empty by default (no height jump
   on first error — min-height reserves space ahead of time). */
.cl-field--err .cl-field__inp {
  border-color: #d93b2d;
  background: #fef6f5;
}
.cl-field--err .cl-field__inp:focus {
  border-color: #d93b2d;
  box-shadow: 0 0 0 3px rgba(217, 59, 45, .15);
}
.cl-field__err {
  display: block;
  margin-top: 6px;
  min-height: 0;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #d93b2d;
  font-weight: 500;
}
.cl-field__err:empty {
  margin-top: 0;
}

.cl-form__submit {
  margin-top: 12px;
}

.cl-form__msg {
  margin-top: 16px;
  font-size: 0.95rem;
  min-height: 1.6em;
}
.cl-form__msg--ok { color: #1f7a3c; }
.cl-form__msg--err { color: #b8261f; }

.cl-form__hint {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--cl-mute);
  text-align: center;
}
.cl-form__hint a {
  color: var(--cl-mute);
  text-decoration: underline;
}

/* ============================================================
   FAQ
   ============================================================ */
.cl-faq {
  padding: 80px 0;
  background: var(--cl-paper-2);
  border-top: 1px solid var(--cl-line);
}
@media (min-width: 992px) {
  .cl-faq { padding: 120px 0; }
}

.cl-faq__list {
  max-width: 820px;
  margin: 0 auto;
  border-top: 1px solid var(--cl-line);
}

.cl-faq__item {
  border-bottom: 1px solid var(--cl-line);
}
@supports selector(::details-content) {
  .cl-faq__item {
    interpolate-size: allow-keywords;
  }
  .cl-faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size .28s ease,
      opacity .22s ease,
      content-visibility .28s allow-discrete;
  }
  .cl-faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

.cl-faq__q {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-family: var(--cl-font-display);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--cl-ink);
  position: relative;
}
.cl-faq__q::-webkit-details-marker { display: none; }
.cl-faq__q::after {
  content: "+";
  font-family: var(--cl-font-display);
  font-size: 1.8rem;
  color: var(--cl-rust);
  line-height: 1;
  display: inline-block;
  transform-origin: center 55%;
  transition: transform .3s cubic-bezier(.5,.1,.25,1), color .2s ease;
  will-change: transform;
}
.cl-faq__item[open] .cl-faq__q::after {
  /* '+' rotates 45° to visually become '×' — smooth, no content swap */
  transform: rotate(135deg);
}
.cl-faq__q:hover::after {
  color: var(--cl-rust-dark);
}

.cl-faq__a {
  padding: 0 0 24px;
  color: var(--cl-ink-2);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 680px;
  overflow: hidden;
  opacity: 1;
}
.cl-faq__item.is-animating .cl-faq__a {
  transition: height .28s ease, opacity .22s ease;
}
.cl-faq__a p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .cl-faq__item.is-animating .cl-faq__a {
    transition: none;
  }
}

/* ============================================================
   NAVBAR OVERRIDES — keep the look but neutralize JS dependencies
   The site's navbar.blade.php uses Bootstrap collapse; layout_landing
   toggles .show via a tiny inline script instead of bootstrap.js.
   ============================================================ */
.layout-landing .navbar {
  position: relative;
}
.layout-landing .navbar-collapse {
  transition: none;
}
.layout-landing .navbar-collapse:not(.show) {
  display: none !important;
}
@media (max-width: 991.98px) {
  .layout-landing .navbar-collapse.show {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 20;
    display: block;
    height: auto !important;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 8px 0 12px;
    background: #050505;
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 32px rgba(0,0,0,.38);
  }
  .layout-landing .navbar-collapse.show .navbar-nav {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .layout-landing .navbar-collapse.show .nav-item {
    width: 100%;
  }
  .layout-landing .navbar-collapse.show .nav-link {
    display: block;
    padding: 12px 24px;
    color: #dadada;
    font-size: 18px;
    line-height: 1.25;
  }
  .layout-landing .navbar-collapse.show .nav-link:hover,
  .layout-landing .navbar-collapse.show .nav-link:focus {
    color: #fff;
    background: rgba(255,102,0,.12);
  }
  .layout-landing .navbar-collapse.show .nav__line {
    display: none;
  }
}
@media (min-width: 992px) {
  .layout-landing .navbar-collapse:not(.show) {
    display: flex !important;
  }
  .layout-landing .navbar-collapse.show {
    display: flex !important;
  }
}

/* The site's navbar has `position-absolute` on the index variant only;
   on this page we want a solid navbar over the dark hero, so just default flow. */
.layout-landing header { position: relative; z-index: 10; }

/* ============================================================
   ACCESSIBILITY / MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cl-hero__inner { animation: none; }
  .cl-hero__img {
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }
  .cl-btn { transition: none; }
}

/* Focus visible */
.layout-landing :focus-visible {
  outline: 2px solid var(--cl-rust);
  outline-offset: 2px;
}