/* EBON — localized landing pages (/es/, /ar/, /ja/ ...). Extends style.css.
   Uses logical properties so RTL works without overrides. */

/* ---------- hero with photo ---------- */
.lhero{position:relative;min-height:min(88vh,720px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.lhero-media{position:absolute;inset:0}
.lhero-media img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.lhero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,15,18,.55) 0%,rgba(12,15,18,.50) 45%,rgba(12,15,18,.88) 100%);
}
.lhero-inner{position:relative;z-index:1;width:100%;padding-block:clamp(64px,9vw,120px) clamp(52px,7vw,88px);color:#fff}
.lhero h1{color:#fff;max-width:19ch;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.1}
.lhero .lead{color:rgba(255,255,255,.86);max-width:60ch;margin-top:20px;font-size:clamp(1rem,1.2vw,1.12rem)}
.lhero .lhero-kick{
  display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#e8c79a;margin-bottom:18px;
}
.lhero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.lhero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
.lhero-meta span{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.lhero .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.lhero .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}

/* RTL: hero heading alignment already follows dir; keep the image focal point sane */
html[dir="rtl"] .lhero-media img{object-position:center 55%}

/* ---------- section heading block ---------- */
.lhead{max-width:760px;margin-bottom:clamp(36px,5vw,56px)}
.lhead .lead{margin-top:16px}

/* ---------- factory strip ---------- */
.factory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.factory-grid figure{margin:0;position:relative;overflow:hidden;background:var(--paper-3);aspect-ratio:4/3}
.factory-grid img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.factory-grid figure:hover img{transform:scale(1.03)}
.factory-grid figcaption{
  position:absolute;inset-inline:0;bottom:0;padding:26px 14px 12px;
  font-size:.75rem;letter-spacing:.02em;color:#fff;
  background:linear-gradient(0deg,rgba(12,15,18,.82),transparent);
}
.factory-grid figure:first-child{grid-column:span 2;aspect-ratio:auto}
@media (max-width:780px){
  .factory-grid{grid-template-columns:1fr 1fr}
  .factory-grid figure:first-child{grid-column:span 2}
}
@media (max-width:520px){ .factory-grid{grid-template-columns:1fr} .factory-grid figure:first-child{grid-column:span 1} }

/* ---------- pricing band note ---------- */
.band-note{
  margin-top:26px;padding:18px 22px;background:var(--accent-soft);
  border-inline-start:3px solid var(--accent);font-size:.9rem;color:var(--accent-ink);
}

/* ---------- process steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);margin-top:8px}
.steps > div{padding:26px 22px 30px;border-inline-end:1px solid var(--line);position:relative}
.steps > div:last-child{border-inline-end:0}
.steps .n{
  display:block;font-size:.72rem;letter-spacing:.16em;color:var(--accent);font-weight:700;margin-bottom:14px;
}
.steps h3{font-size:1rem;margin-bottom:8px}
.steps p{font-size:.875rem;color:var(--ink-3);margin:0;line-height:1.55}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .steps > div:nth-child(2n){border-inline-end:0}
  .steps > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .steps > div{border-inline-end:0;border-bottom:1px solid var(--line);padding-block:22px}
  .steps > div:last-child{border-bottom:0}
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 44px 20px 0;font-weight:600;font-size:1rem;
  position:relative;color:var(--ink);transition:color .15s ease;
}
html[dir="rtl"] .faq summary{padding:20px 0 20px 44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-ink)}
.faq summary::after{
  content:"";position:absolute;inset-inline-end:8px;top:50%;
  width:9px;height:9px;border-inline-end:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .a{padding:0 0 22px;max-width:74ch;font-size:.925rem;color:var(--ink-2);line-height:1.7}
.faq .a p{margin:0}

/* ---------- cert cards ---------- */
.cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cert-card{border:1px solid var(--line);padding:26px 24px;background:var(--paper)}
.cert-card .tag{
  display:inline-block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--accent-soft);padding:4px 8px;margin-bottom:14px;
}
.cert-card h3{font-size:1.05rem;margin-bottom:10px}
.cert-card p{font-size:.875rem;color:var(--ink-2);margin:0;line-height:1.6}
@media (max-width:720px){ .cert-grid{grid-template-columns:1fr} }

/* ---------- quote block ---------- */
.quote-wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start}
@media (max-width:900px){ .quote-wrap{grid-template-columns:1fr} }
.quote-aside p{color:rgba(255,255,255,.78);font-size:.95rem;max-width:38ch}
.quote-channels{margin-top:30px;display:flex;flex-direction:column;gap:14px}
.quote-channels a{
  display:flex;align-items:center;gap:12px;color:#fff;font-size:.92rem;
  padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.14);
}
.quote-channels a:last-child{border-bottom:0}
.quote-channels .k{
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);
  min-width:78px;flex:none;
}
.quote-channels a:hover .v{text-decoration:underline}
.dark .field label{color:rgba(255,255,255,.62)}
.dark .field input,.dark .field textarea,.dark .field select{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff;
}
.dark .field input:focus,.dark .field textarea:focus,.dark .field select:focus{border-color:#e8c79a}
.dark .field input::placeholder,.dark .field textarea::placeholder{color:rgba(255,255,255,.38)}
.dark .form-note{color:rgba(255,255,255,.55)}
.dark .form-note a{color:#e8c79a}
.dark .field .consent{color:rgba(255,255,255,.72)}
.dark .form-note.is-error{color:#fca5a5}
.dark .form-success{background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.4);color:#d1fae5}
.dark .form-success b{color:#6ee7b7}

/* ---------- footer (localized) ---------- */
.lfoot{background:var(--ink);color:rgba(255,255,255,.66);padding-block:56px 30px;font-size:.875rem}
.lfoot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
.lfoot h4{color:#fff;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.lfoot ul{display:flex;flex-direction:column;gap:9px}
.lfoot a{color:rgba(255,255,255,.66)}
.lfoot a:hover{color:#fff}
.lfoot-legal{margin-top:22px;font-size:.75rem;color:rgba(255,255,255,.4);line-height:1.7}
@media (max-width:820px){ .lfoot-top{grid-template-columns:1fr 1fr;gap:28px} }
@media (max-width:520px){ .lfoot-top{grid-template-columns:1fr} }

/* ---------- header on landing pages ---------- */
.lsite-header{position:absolute;inset-inline:0;top:0;z-index:40;background:transparent;border-bottom:1px solid rgba(255,255,255,.14)}
.lsite-header .header-inner{height:74px}
.lsite-header .brand,.lsite-header .brand span{color:#fff}
.lsite-header .brand span{color:rgba(255,255,255,.6)}
.lsite-header .nav a{color:rgba(255,255,255,.8)}
.lsite-header .nav a:hover{color:#fff}
.lsite-header .nav a::after{background:#e8c79a}
.lsite-header .btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.lsite-header .btn-primary:hover{background:#e8c79a;border-color:#e8c79a;color:var(--ink)}
.lsite-header .lang-btn{color:rgba(255,255,255,.8)}
.lsite-header .lang-btn:hover{color:#fff}
.lsite-header .lang-btn .cur .code{color:rgba(255,255,255,.5)}
.lsite-header .nav-toggle{color:#fff;border-color:rgba(255,255,255,.4)}

/* sticky solid header after scroll */
.lsite-header.is-stuck{position:fixed;background:rgba(20,24,28,.96);backdrop-filter:blur(8px);box-shadow:0 1px 0 rgba(255,255,255,.08)}