/* Template3 — "Lawfor" adaptation. Navy hero, alternating cream / mist bands,
   high-contrast Cormorant serif, tan + pastel-blue accents. Single fixed theme.
   Faceless imagery only. Reuses the same JS hooks as template1. */

:root {
  --navy: 15 27 45;        /* hero overlay / footer / dark contact */
  --navy-2: 28 44 66;      /* highlighted card */
  --slate: 74 91 112;      /* consultation band */
  --mist: 220 227 236;     /* light blue-gray sections */
  --cream: 245 241 232;    /* warm alt sections */
  --ink: 23 28 35;         /* text on light */
  --blue: 169 198 232;     /* pastel icon chips */
  --tan: 214 166 90;       /* accent / FAQ open / italics */
  --paper-text: 240 243 247; /* text on navy */
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { background: rgb(var(--cream)); color: rgb(var(--ink)); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: rgb(var(--tan)); color: rgb(var(--navy)); }

/* Arabic typography */
html.is-ar body { font-family: "Tajawal", "Inter", sans-serif; }
html.is-ar .font-display { font-family: "Cairo", "Cormorant Garamond", serif; font-weight: 700; letter-spacing: 0; }
html.is-ar .italic-accent { font-style: normal; }
html.is-ar .tracking-wider, html.is-ar .tracking-widest, html.is-ar .eyebrow { letter-spacing: 0 !important; }

.container-x { max-width: 1200px; margin-inline: auto; padding-inline: 1.5rem; }
@media (min-width: 1024px) { .container-x { padding-inline: 2.5rem; } }

.eyebrow { letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; font-weight: 600; color: rgb(var(--tan)); }
.italic-accent { font-style: italic; color: rgb(var(--tan)); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 500; border-radius: 999px; transition: all .25s ease; font-size: .95rem; }
.btn-tan { background: rgb(var(--tan)); color: rgb(var(--navy)); padding: .9rem 1.6rem; font-weight: 600; }
.btn-tan:hover { filter: brightness(1.06); transform: translateY(-2px); }
.btn-navy { background: rgb(var(--navy)); color: rgb(var(--paper-text)); padding: .9rem 1.6rem; }
.btn-navy:hover { background: rgb(var(--navy-2)); transform: translateY(-2px); }
.btn-ghost { border: 1px solid rgb(var(--paper-text) / .4); color: rgb(var(--paper-text)); padding: .9rem 1.6rem; }
.btn-ghost:hover { background: rgb(var(--paper-text) / .12); border-color: rgb(var(--paper-text)); }
.btn-outline { border: 1px solid rgb(var(--navy) / .3); color: rgb(var(--navy)); padding: .85rem 1.5rem; }
.btn-outline:hover { background: rgb(var(--navy) / .06); border-color: rgb(var(--navy)); }

/* header — transparent over hero, navy on scroll */
header[data-header] { transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease; background: transparent; }
header[data-header].scrolled { background: rgb(var(--navy) / .95); backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0,0,0,.25); }

/* mobile nav */
[data-nav-menu] { transition: opacity .3s ease, visibility .3s ease; }
@media (max-width: 1023px) {
  [data-nav-menu] { display: flex !important; position: fixed; inset: 0; flex-direction: column; justify-content: center; align-items: center;
    background: rgb(var(--navy) / .98); backdrop-filter: blur(6px); gap: 2rem; opacity: 0; visibility: hidden; z-index: 60; }
  [data-nav-menu].open { opacity: 1; visibility: visible; }
  [data-nav-menu] a { font-size: 1.4rem; color: rgb(var(--paper-text)); }
  body.nav-open { overflow: hidden; }
}
[data-nav-toggle].open .bar1 { transform: translateY(6px) rotate(45deg); }
[data-nav-toggle].open .bar2 { opacity: 0; }
[data-nav-toggle].open .bar3 { transform: translateY(-6px) rotate(-45deg); }
[data-nav-toggle] span { transition: all .25s ease; }

/* hero */
.hero-overlay { background: linear-gradient(180deg, rgb(var(--navy) / .55) 0%, rgb(var(--navy) / .72) 55%, rgb(var(--navy) / .9) 100%); }

/* cards */
.card { background: #fff; border: 1px solid rgb(var(--navy) / .08); transition: all .3s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15,27,45,.12); }
.card-navy { background: rgb(var(--navy-2)); color: rgb(var(--paper-text)); border-color: rgb(var(--navy-2)); }

/* stat divider */
.stat + .stat { border-inline-start: 1px solid rgb(var(--navy) / .12); }
@media (max-width: 767px) { .stat:nth-child(odd) { border-inline-start: 0; } .stat:nth-child(n+3) { border-top: 1px solid rgb(var(--navy) / .12); } }

/* consultation circular steps */
.step-ring { border: 1px solid rgb(var(--paper-text) / .35); }

/* FAQ */
#faq-list { counter-reset: faq; }
#faq-list [data-faq-item] { counter-increment: faq; border-inline-start: 3px solid transparent; padding-inline-start: 1rem; transition: background .3s ease, border-color .3s ease; }
#faq-list [data-faq-item].open { border-inline-start-color: rgb(var(--tan)); background: rgb(var(--tan) / .08); }
.faq-qtext::before { content: counter(faq) ". "; color: rgb(var(--tan)); font-weight: 600; }
[data-faq-item] .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
[data-faq-item].open .faq-a { max-height: 360px; }
[data-faq-item] .faq-icon { transition: transform .3s ease; }
[data-faq-item].open .faq-icon { transform: rotate(45deg); }

/* form */
.field { width: 100%; background: #fff; border: 1px solid rgb(var(--navy) / .16); color: rgb(var(--ink));
  padding: .85rem 1rem; border-radius: 8px; font-size: .95rem; transition: border-color .2s ease; }
.field:focus { outline: none; border-color: rgb(var(--tan)); }
.field::placeholder { color: rgb(var(--navy) / .45); }
select.field option { background: #fff; color: rgb(var(--ink)); }
#form-error { display: none; color: #d14343; }
#form-error.show { display: block; }

/* reviews */
.review-avatar { background: rgb(var(--navy)); color: rgb(var(--paper-text)); font-weight: 600; }
.stars { color: rgb(var(--tan)); letter-spacing: .12em; font-size: .82rem; line-height: 1; }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

.link-underline { position: relative; }
.link-underline::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: rgb(var(--tan)); transition: width .25s ease; }
.link-underline:hover::after { width: 100%; }