/* Everline hero — scoped with el- prefix to avoid clashing with Bricks theme classes.
   Sizing is in px, not rem, so it's immune to whatever root font-size Bricks sets. */

/* Nav/footer links point to #work, #services, #about, #process, #faq,
   #contact — this makes clicking them glide instead of jumping instantly.
   Only works once each Section in Bricks actually has the matching id
   set (work, services, about, process, faq, contact — no #). */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.el-hero-scroll, .el-hero-pin, .el-logo-stage, .el-hero-content {
  box-sizing: border-box;
}

/* ---- NAV ----
   Output by the [everline_nav] shortcode. Layout (flex row, spacing) lives
   here since the shortcode owns the markup — but NOT position/sticky, that's
   controlled by Bricks' own Header template "sticky" setting. Turn that on
   in Bricks if you want the nav pinned while scrolling. */
.el-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(24px, 5vw, 64px);
  background: #FFFCF7;
  border-bottom: 1px solid rgba(19,7,12,0.08);
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-sizing: border-box;
  width: 100%;
}

.el-nav-logo {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: #BD006B;
}

.el-nav-links {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  font-size: 14px;
  font-weight: 500;
  color: rgba(19,7,12,0.55);
}
.el-nav-links a { color: inherit; text-decoration: none; }
.el-nav-links a:hover { color: #13070C; }

.el-nav-cta {
  padding: 10px 21px;
  background: #BD006B;
  color: #FFFCF7;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background 0.15s ease;
}
.el-nav-cta:hover { background: #97005a; }

@media (max-width: 700px) {
  .el-nav-links { display: none; }
}

/* ---- HERO ---- */
.el-hero-scroll {
  position: relative;
  /* .el-hero-pin is 100vh and sticky, so it stays pinned for
     (this height - 100vh) of scroll before releasing — 70vh at 170vh.
     The ScrollTrigger `end` value in everline-tweaks.js is set to match
     that 70vh exactly, so the pink -> white / content-reveal animation
     finishes right as the pin releases, not partway through. If this
     height changes, update that `end` value to (height - 100vh) too,
     or the reveal will cut off mid-animation again. */
  height: 170vh;
  background: #BD006B;
}

.el-hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #BD006B;
}

.el-logo-stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
}

.el-logo-mark {
  overflow: visible;
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(88px, 15vw, 192px);
  letter-spacing: -0.01em;
  color: #FFFCF7;
  line-height: 1;
}
.el-logo-mark span { display: inline-block; }

.el-logo-subheadline {
  margin-top: clamp(16px, 3vh, 29px);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  color: rgba(255, 252, 247, 0.7);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* Asymmetric on purpose — align-items:center centers the content
     within whatever space is left after padding, so a bigger top than
     bottom nudges that centered content down. Only affects this layer
     (the white pitch screen), not .el-logo-stage (the pink screen) —
     they're separate absolutely-positioned siblings within the pin. */
  padding: clamp(72px, 12vh, 130px) clamp(24px, 8vw, 104px) clamp(24px, 4vh, 40px);
  gap: 48px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 22px;
}

/* Class-based on purpose, not tag-based — the big punchy line is
   marked up as h2 and the longer keyword-rich line is marked up as h1
   (SEO call: the h1 carries more keywords), so styling can't be tied to
   which tag is used or it'd follow the wrong element visually. */
.el-hero-headline {
  font-size: clamp(34px, 4.8vw, 58px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  max-width: 18ch;
  color: #13070C;
  margin: 0;
}

.el-sub {
  font-size: clamp(16px, 1.5vw, 18px);
  color: rgba(19, 7, 12, 0.6);
  font-weight: 500;
  max-width: 46ch;
  line-height: 1.55;
  margin: 0;
}

.el-cta-row {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 29px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.el-btn-primary {
  background: #BD006B;
  color: #FFFCF7;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 27px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.15s ease, background 0.15s ease;
}
.el-btn-primary:hover { background: #97005a; transform: translateY(-1px); }

.el-btn-secondary {
  font-weight: 600;
  font-size: 15px;
  color: #13070C;
  text-decoration: none;
  border-bottom: 1px solid rgba(19,7,12,0.3);
  padding-bottom: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.el-btn-secondary:hover { border-color: #32E875; color: #32E875; }

.el-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: clamp(24px, 8vw, 104px);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,252,247,0.5);
  z-index: 2;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .el-hero-scroll { height: auto; }
}

/* Rotating proof snapshot — one card in focus, the rest peeking behind
   it, cycling via JS (gated on #el-hero-visual existing). Rose card on
   the porcelain hero, white text throughout, including the teal tag
   chip's own white text — its color is independent of what's behind it. */

.el-hero-visual {
  position: relative;
  width: min(440px, 38vw);
  height: 400px;
  flex-shrink: 0;
  display: none;
}

@media (min-width: 860px) {
  .el-hero-visual { display: block; }
}

.el-snapshot-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  box-sizing: border-box;
  background: #BD006B;
  border: 1px solid rgba(255,252,247,0.2);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(19,7,12,0.16);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  transform-origin: top left;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease, box-shadow 0.6s ease;
}

.el-snapshot-card.pos-0 {
  transform: translate(0, 0) scale(1);
  opacity: 1;
  z-index: 4;
  box-shadow: 0 24px 48px rgba(19,7,12,0.25);
}

.el-snapshot-card.pos-1 {
  transform: translate(36px, 36px) scale(0.96);
  opacity: 0.85;
  z-index: 3;
}

.el-snapshot-card.pos-2 {
  transform: translate(66px, 66px) scale(0.92);
  opacity: 0.55;
  z-index: 2;
}

.el-snapshot-card.pos-3 {
  transform: translate(92px, 92px) scale(0.88);
  opacity: 0.3;
  z-index: 1;
}

.el-snapshot-tag {
  display: inline-block;
  background: #32E875;
  color: #13070C;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  width: fit-content;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-snapshot-stat {
  font-size: 42px;
  font-weight: 800;
  color: #FFFCF7;
  letter-spacing: -0.02em;
  line-height: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-snapshot-label {
  font-size: 15px;
  font-weight: 700;
  color: #FFFCF7;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-snapshot-client {
  font-size: 13px;
  color: rgba(255,252,247,0.7);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- REUSABLE SECTION PIECES ----
   For use on any section you build yourself in Bricks (Work, Services,
   Testimonials, About, Contact) — not tied to one specific section. */

/* Hairline between sections, same idea as the divider inside the
   footer — coffee-bean tint at low opacity rather than porcelain, since
   this needs to read on both Porcelain and Rose sections, not just one. */
.el-section,
.el-section-deep,
.el-section-deepest,
.el-section-bottom-deep {
  border-top: 1px solid rgba(19,7,12,0.08);
}

.el-section {
  padding: clamp(80px, 12vh, 140px) clamp(24px, 8vw, 104px);
  box-sizing: border-box;
}

/* For the one dark-background section (Testimonials) — deliberately more
   generous than the standard el-section, so it reads as a weighted moment
   rather than just another section in the sequence. */
.el-section-deep {
  padding: clamp(88px, 14vh, 144px) clamp(24px, 8vw, 104px);
  box-sizing: border-box;
}

/* For one specific boundary that needs even more breathing room than
   el-section-deep gives — currently the Process -> FAQ transition
   (porcelain into Rose), where el-section's bump still read as tight. */
.el-section-deepest {
  padding: clamp(112px, 16vh, 176px) clamp(24px, 8vw, 104px);
  box-sizing: border-box;
}

/* Asymmetric — top matches the standard el-section, only the bottom gets
   the deepest amount. For a section that needs extra room specifically
   before whatever comes after it, without also pushing its own top
   padding (and the section above it) out to match. */
.el-section-bottom-deep {
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(112px, 16vh, 176px);
  padding-left: clamp(24px, 8vw, 104px);
  padding-right: clamp(24px, 8vw, 104px);
  box-sizing: border-box;
}

.el-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #BD006B;
  margin-bottom: 13px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Dark-section variant — these sections sit on Rose, not Coffee Bean,
   and teal text reads poorly directly against rose (still too close in
   lightness, same problem gold had before the accent swapped back to
   teal). Same fix as the work-card tag: wrap it in a teal pill (white
   text) instead of leaving teal text on its own directly on the section. */
.el-eyebrow-light {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #13070C;
  background: #32E875;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 13px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Optional: wrap the eyebrow in this to add a small line beside it */
.el-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.el-eyebrow-row .el-eyebrow,
.el-eyebrow-row .el-eyebrow-light {
  margin-bottom: 0;
}

.el-eyebrow-line {
  width: 24px;
  height: 2px;
  background: #32E875;
  flex-shrink: 0;
}

/* Reassurance bullet list (Contact section, left column) — a small teal
   dash per line, same motif as the eyebrow line. Contact's section
   background is Porcelain (light), so this is the standard light-section
   teal-on-porcelain treatment, no contrast workaround needed here. */
.el-bullet-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}

.el-bullet-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-bullet-dash {
  width: 14px;
  height: 2px;
  background: #32E875;
  flex-shrink: 0;
}

.el-bullet-text {
  color: #13070C;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-section-heading {
  font-size: clamp(29px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #13070C;
  max-width: 20ch;
  margin: 0 0 24px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-section-heading-light {
  font-size: clamp(29px, 3.5vw, 42px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #FFFCF7;
  max-width: 20ch;
  margin: 0 0 24px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-section-sub {
  font-size: 17px;
  color: rgba(19,7,12,0.6);
  max-width: 55ch;
  line-height: 1.6;
  margin: 0 0 64px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- WORK CARDS ---- */

.el-work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.el-work-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.el-work-card:hover { transform: scale(1.02); }

.el-work-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Same fill/crop behavior as el-work-card-img, for the cards using a
   muted looping video instead of a static image (Caribou, Mado). */
.el-work-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.el-work-card-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(19,7,12,0.8), transparent 65%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.el-work-card-tag {
  background: #32E875;
  color: #13070C;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-work-card-client {
  color: #FFFCF7;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- LOGO WALL ---- */

.el-logos-section {
  border-top: 1px solid rgba(19,7,12,0.08);
  background: #F3EEE2;
  padding: 40px clamp(24px, 8vw, 104px) 120px;
}

.el-logos-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(19,7,12,0.45);
  margin-bottom: 32px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-logos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

.el-logo-badge {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(19,7,12,0.04);
  border: 1px solid rgba(19,7,12,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.el-logo-badge-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ---- SERVICES ---- */

.el-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.el-service-card {
  padding: 32px;
  border: 1px solid rgba(19,7,12,0.1);
  border-top: 3px solid #32E875;
  border-radius: 16px;
  box-sizing: border-box;
}

.el-service-card-heading {
  font-size: 21px;
  font-weight: 800;
  color: #13070C;
  margin: 0 0 10px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-service-card-text {
  color: rgba(19,7,12,0.6);
  line-height: 1.6;
  font-size: 15px;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- TESTIMONIALS ----
   Horizontal auto-scrolling row (marquee), not a stack. .el-testimonial-marquee
   is the viewport (overflow hidden); .el-testimonial-track is the flex row
   that actually scrolls, JS duplicates whatever cards are in it once so the
   loop from 0 to -50% is seamless — Tarik only ever maintains one real set
   of cards in Bricks, the duplication is handled in code, not by hand.
   Cards keep their own Porcelain surface since they sit directly on the
   Rose section with nothing behind them otherwise. */

.el-testimonial-marquee {
  overflow: hidden;
  width: 100%;
}

.el-testimonial-track {
  display: flex;
  gap: 32px;
  width: max-content;
  animation: el-testimonial-scroll 36s linear infinite;
}

@keyframes el-testimonial-scroll {
  /* -50% alone overshoots by exactly half a gap — doubling N cards
     doesn't cleanly double the gap count (N-1 gaps becomes 2N-1, not
     2N-2), so the true "one full set" boundary is half a gap short of
     the halfway point. Fixed +16px (half of the 32px gap) corrects it
     regardless of how many testimonials exist. */
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% + 16px)); }
}

@media (prefers-reduced-motion: reduce) {
  .el-testimonial-track {
    animation: none;
  }
}

.el-testimonial-card {
  flex-shrink: 0;
  width: 420px;
  max-width: 85vw;
  box-sizing: border-box;
  border-left: 3px solid #32E875;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.el-testimonial-quote {
  color: #FFFCF7;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-testimonial-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.el-testimonial-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFCF7;
  border: 1px solid rgba(255,252,247,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.el-testimonial-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.el-testimonial-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.el-testimonial-name {
  color: #FFFCF7;
  font-weight: 700;
  font-size: 15px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-testimonial-role {
  color: rgba(255,252,247,0.55);
  font-size: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-testimonial-attribution {
  color: rgba(255,252,247,0.6);
  font-size: 15px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- ABOUT ---- */

.el-about-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 800px) {
  .el-about-grid { grid-template-columns: 1fr; }
}

.el-about-video {
  aspect-ratio: 9 / 16;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 16px;
  background: rgba(19,7,12,0.05);
  border: 1px solid rgba(19,7,12,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}

.el-about-video-placeholder {
  color: rgba(19,7,12,0.4);
  font-size: 14px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  text-align: center;
  padding: 24px;
}

.el-about-text-body {
  color: rgba(19,7,12,0.6);
  line-height: 1.7;
  font-size: 16px;
  margin: 0 0 16px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- CONTACT SECTION LAYOUT ----
   Apply to the outer wrapper holding both columns. The left div and the
   right div (holding the shortcode) are both plain children of this —
   neither needs its own class, this grid does the column split for both. */
.el-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 800px) {
  .el-contact-grid { grid-template-columns: 1fr; }
}

/* ---- CONTACT FORM ----
   Rose card floating on the section's Porcelain background — one-
   question-at-a-time step form. JS/PHP submission wired up. Border and
   most accents inside the card (focus states, progress fill) are
   porcelain, since raw teal directly on Rose has the same low-contrast
   problem gold used to have. The primary button is the one deliberate
   exception — a teal pill with white text, called out specifically by
   Tarik (a rose button on a rose card would've disappeared). */

.el-contact-form {
  font-family: 'Plus Jakarta Sans', sans-serif;
  max-width: 560px;
}

.el-contact-card {
  position: relative;
  background: #BD006B;
  border: 1px solid rgba(255,252,247,0.25);
  border-radius: 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35);
  overflow: hidden;
}

.el-contact-card-inner {
  padding: 40px 40px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.el-contact-intro {
  text-align: center;
  padding: 12px 0;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.el-contact-intro.is-fading {
  opacity: 0;
  transform: translateY(-8px);
}

.el-contact-intro-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
  color: #FFFCF7;
  margin: 0 0 12px;
}

.el-contact-intro-sub {
  font-size: 15px;
  color: rgba(255,252,247,0.6);
  margin: 0;
}

/* Functional, not cosmetic — must stay hidden this way (not display:none,
   which some bots specifically check for and skip around). */
.el-form-honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.el-form-field {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.el-form-hint {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,252,247,0.5);
}

.el-form-field label {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #FFFCF7;
}

.el-form-field input,
.el-form-field select,
.el-form-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 17px;
  color: #FFFCF7;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,252,247,0.25);
  border-radius: 0;
  padding: 8px 2px;
}

.el-form-field input::placeholder,
.el-form-field textarea::placeholder {
  color: rgba(255,252,247,0.35);
}

.el-form-field input:focus,
.el-form-field select:focus {
  outline: none;
  border-bottom-color: #FFFCF7;
}

.el-form-field select option {
  background: #BD006B;
  color: #FFFCF7;
}

/* Textarea gets its own full box rather than a bottom-line — an
   underline sitting under a multi-line, growable field leaves a gap
   under short answers instead of hugging the text like it does on a
   single-line input. */
.el-form-field textarea {
  min-height: 90px;
  resize: vertical;
  border: 1px solid rgba(255,252,247,0.25);
  border-radius: 8px;
  padding: 10px 12px;
}

.el-form-field textarea:focus {
  outline: none;
  border-color: #FFFCF7;
}

.el-form-status {
  font-size: 14px;
  color: rgba(255,252,247,0.7);
}

.el-form-status:empty {
  display: none;
}

/* Multi-step / progress bar — one question visible at a time. Progress
   bar, its label, and Back start hidden (JS reveals them once the intro
   screen's Start button has been used) so there's no flash of a "Step 1
   of 5" progress bar behind the intro. */

.el-form-progress-bar {
  display: none;
  width: 100%;
  height: 4px;
  background: rgba(255,252,247,0.25);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.el-form-progress-fill {
  height: 100%;
  width: 20%;
  background: #32E875;
  transition: width 0.3s ease;
}

.el-form-progress-label {
  display: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255,252,247,0.45);
}

.el-form-step {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.el-form-step.is-active {
  display: flex;
  flex-direction: column;
}

.el-form-step.is-active.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Single contextual button (Start -> Next -> Send) plus a small Back link
   underneath, stacked instead of sharing a row, so the primary button
   stays centered regardless of whether Back is showing. */
.el-form-nav {
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.el-form-primary {
  width: 100%;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  color: #13070C;
  background: #32E875;
  border: none;
  border-radius: 999px;
  padding: 14px 24px;
  cursor: pointer;
  text-align: center;
}

.el-form-primary:hover {
  background: #2BC563;
}

.el-form-back {
  display: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,252,247,0.5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

/* ---- PROCESS ("How we work") ---- */

.el-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.el-process-number {
  font-size: 14px;
  font-weight: 800;
  color: #32E875;
  margin-bottom: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-process-step-heading {
  font-size: 20px;
  font-weight: 800;
  color: #13070C;
  margin: 0 0 8px 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-process-step-text {
  color: rgba(19,7,12,0.6);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- FAQ ---- */
/* Native <details>/<summary> — no JS, fully keyboard accessible by
   default. The +/x toggle is a ::after rotate driven off [open].
   Sits on Rose (Contact is the porcelain one now), so text is
   porcelain-based — porcelain holds up fine against Rose, accent-colored
   text directly on Rose (gold before, teal now) is the contrast problem. */

.el-faq-list {
  display: flex;
  flex-direction: column;
  max-width: 720px;
}

.el-faq-item {
  border-bottom: 1px solid rgba(255,252,247,0.15);
  padding: 20px 0;
}

.el-faq-question {
  font-size: 17px;
  font-weight: 700;
  color: #FFFCF7;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.el-faq-question::-webkit-details-marker {
  display: none;
}

.el-faq-question::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 20px;
  color: #FFFCF7;
  transition: transform 0.2s ease;
}

.el-faq-item[open] .el-faq-question::after {
  transform: rotate(45deg);
}

/* Animated open/close. Native <details> shows/hides its content instantly
   with no way to transition that natively, so the trick is: force the
   wrap to always render via !important (overriding the browser's own
   "hide everything but <summary> when not [open]" rule), then animate a
   grid-template-rows collapse instead — 0fr closed, 1fr open. The inner
   .el-faq-answer needs its own overflow:hidden both to clip the content
   while collapsed and to stop its margin from leaking out of the
   zero-height wrapper. */
.el-faq-answer-wrap {
  display: grid !important;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.el-faq-item[open] .el-faq-answer-wrap {
  grid-template-rows: 1fr;
}

.el-faq-answer {
  overflow: hidden;
  min-height: 0;
  padding-top: 12px;
  color: rgba(255,252,247,0.7);
  font-size: 15px;
  line-height: 1.6;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ---- FOOTER ---- */
/* Rose, matching Testimonials/FAQ (Contact itself is back to Porcelain).
   Link hovers use full-opacity porcelain rather than an accent color —
   neither gold nor teal holds up as text sitting directly on Rose, same
   low-contrast problem fixed everywhere else on the dark sections. */

.el-footer {
  border-top: 1px solid rgba(19,7,12,0.08);
  background: #BD006B;
  padding: 56px clamp(24px, 8vw, 104px) 32px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-sizing: border-box;
}

.el-footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,252,247,0.12);
}

.el-footer-logo {
  font-size: 20px;
  font-weight: 800;
  color: #FFFCF7;
}

.el-footer-links,
.el-footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.el-footer-links a,
.el-footer-social a {
  color: rgba(255,252,247,0.7);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.el-footer-links a:hover,
.el-footer-social a:hover {
  color: #FFFCF7;
}

.el-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
}

.el-footer-contact {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,252,247,0.5);
}

.el-footer-contact a {
  color: rgba(255,252,247,0.5);
  text-decoration: none;
}

.el-footer-contact a:hover {
  color: #FFFCF7;
}

.el-footer-copyright {
  font-size: 13px;
  color: rgba(255,252,247,0.5);
}