/* ═══════════════════════════════════════════════════════════════════
   Solvia · editorial theme
   The same paper/ink/gold system the homepage uses, expressed against
   the class names the inner pages use. Linked after each page's own
   <style>, so it restyles the existing markup without touching it.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --paper:     #faf6ec;
  --paper-2:   #f3ecdc;
  --ink:       #11332a;
  --ink-soft:  #446054;
  --ink-faint: rgba(17, 51, 42, .13);
  --gold:      #916114;
  --gold-soft: #c9962f;
  --forest:    #14503b;
  --font-display: 'Instrument Serif', 'Reem Kufi', Georgia, serif;
  --font-display-ar: 'Reem Kufi', 'Noto Sans Arabic', sans-serif;
  --ease-out: cubic-bezier(.22, .68, 0, 1);
}

/* --- paper ---------------------------------------------------------- */
body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
::selection { background: var(--gold); color: #fff; }

/* --- display typography --------------------------------------------- */
h1, h2, h3, .h1ar, .pk-price, .why-item .wn, .stat-num {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: -.01em; color: var(--ink);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .h1ar,
[dir="rtl"] .pk-price, [dir="rtl"] .why-item .wn, [dir="rtl"] .stat-num {
  font-family: var(--font-display-ar); font-weight: 700; letter-spacing: 0;
}
h1, .h1ar { font-size: clamp(2.2rem, 5.4vw, 3.9rem); line-height: 1.05; }
[dir="rtl"] h1, [dir="rtl"] .h1ar { line-height: 1.38; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.15; }
[dir="rtl"] h2 { line-height: 1.45; }
p, li { color: var(--ink-soft); }

/* --- header: ink on paper, hairline rule ---------------------------- */
header {
  background: rgba(250, 246, 236, .94) !important;
  border-bottom: 1px solid var(--ink-faint) !important;
  backdrop-filter: blur(12px);
}
.hd-btn {
  color: var(--ink) !important; border: 1px solid var(--ink-faint) !important;
  border-radius: 2px !important; font-weight: 600;
}
.hd-btn:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.hd-btn.wa {
  background: var(--ink) !important; color: var(--paper) !important; border: none !important;
}
.hd-btn.wa:hover { background: var(--forest) !important; color: var(--paper) !important; }
select.hd-btn, .sv-cur { color: var(--ink) !important; }
select.hd-btn option { color: #11332a; background: #fff; }

/* --- sections: paper with ink spreads for rhythm --------------------- */
section { background: transparent; }
.hero { background: transparent !important; }
.hero::before, .hero::after { display: none !important; }
.chip {
  background: none !important; border: none !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--ink-faint) !important;
  color: var(--ink-soft) !important; padding: 0 0 10px !important;
  letter-spacing: .14em; font-size: .76rem; font-weight: 700;
}
[dir="rtl"] .chip { letter-spacing: 0; font-size: .84rem; }
.sub { color: var(--ink-soft) !important; }

/* --- buttons: squared, flat, confident ------------------------------ */
.btn, .lc-submit, .pk-cta, .demo-open {
  border-radius: 2px !important; box-shadow: none !important; font-weight: 700;
}
.btn.main, .lc-submit, .pk-cta {
  background: var(--ink) !important; color: var(--paper) !important; border: none !important;
}
.btn.main:hover, .lc-submit:hover, .pk-cta:hover {
  background: var(--forest) !important; transform: none !important; color: var(--paper) !important;
}
.btn.ghost {
  background: transparent !important; color: var(--ink) !important;
  border: 1px solid var(--ink-faint) !important;
}
.btn.ghost:hover { border-color: var(--ink) !important; color: var(--ink) !important; }

/* --- the hero lead card is the one ink block up top ------------------ */
.lead-card {
  background: var(--ink) !important; border: none !important;
  border-radius: 2px !important; box-shadow: 0 24px 60px rgba(17, 51, 42, .16) !important;
}
.lead-card h3, .lead-card b, .lc-budget b { color: var(--paper) !important; }
.lead-card label span, .lc-trust, .lc-or { color: rgba(250, 246, 236, .72) !important; }
.lead-card input[type=text], .lead-card input[type=tel], .lead-card select, .lead-card textarea {
  background: rgba(250, 246, 236, .07) !important;
  border: 1px solid rgba(250, 246, 236, .22) !important;
  color: var(--paper) !important; border-radius: 2px !important;
}
.lead-card input::placeholder { color: rgba(250, 246, 236, .45); }
.lead-card input:focus { border-color: var(--gold-soft) !important; }
.lc-submit { background: var(--gold) !important; color: #fff !important; }
.lc-submit:hover { background: var(--gold-soft) !important; }
.lc-wa {
  background: transparent !important; color: var(--paper) !important;
  border: 1px solid rgba(250, 246, 236, .3) !important; border-radius: 2px !important;
}
.lc-wa:hover { border-color: var(--gold-soft) !important; color: var(--gold-soft) !important; }
.lc-trust i { color: var(--gold-soft) !important; }

/* --- feature chips become a hairline list --------------------------- */
.feats { gap: 0 !important; }
.feat {
  background: none !important; border: none !important;
  border-bottom: 1px solid var(--ink-faint) !important;
  border-radius: 0 !important; padding: 18px 0 !important;
  color: var(--ink) !important; box-shadow: none !important;
}
.feat i { color: var(--gold) !important; }

/* --- "why it matters": numbered, no boxes --------------------------- */
.why-item {
  background: none !important; border: none !important;
  border-bottom: 1px solid var(--ink-faint) !important;
  border-radius: 0 !important; padding: 20px 0 !important;
}
.why-item .wn {
  background: none !important; color: var(--gold) !important;
  width: auto !important; height: auto !important; border-radius: 0 !important;
  font-size: 1.5rem; font-weight: 700;
}
.why-item p, .about-block p { color: var(--ink-soft) !important; }

/* --- work grid ------------------------------------------------------ */
.pf img { border-radius: 2px; background: var(--paper-2); }
.pf img:hover { transform: scale(1.03); }
.pf-note { color: var(--ink-soft) !important; }
.pf-note a { color: var(--gold) !important; font-weight: 700; }

/* --- demos ---------------------------------------------------------- */
.demo-card {
  background: none !important; border: 1px solid var(--ink-faint) !important;
  border-radius: 2px !important; box-shadow: none !important;
}
.demo-card:hover { border-color: var(--ink) !important; transform: none !important; }
.demo-card h4 { color: var(--ink) !important; }
.demo-card p { color: var(--ink-soft) !important; }
.demo-tag { color: var(--gold) !important; background: none !important; border: none !important; }
.demo-open { background: var(--ink) !important; color: var(--paper) !important; }

/* --- packages ------------------------------------------------------- */
.pk {
  background: none !important; border: 1px solid var(--ink-faint) !important;
  border-radius: 2px !important; box-shadow: none !important;
}
.pk.featured { border-color: var(--gold) !important; }
.pop {
  background: var(--gold) !important; color: #fff !important;
  border-radius: 2px !important; letter-spacing: .1em; font-size: .7rem;
}
.pk-name { color: var(--ink) !important; }
.pk-fit { color: var(--ink-soft) !important; }
.pk-price { color: var(--gold) !important; font-size: 2rem; }
.pk-price span { color: var(--ink-soft) !important; }
.pk-price s.pk-was { color: var(--ink-soft) !important; text-decoration-color: #c05a3e; }
.pk-price .pk-now { color: var(--gold) !important; }
.pk li { color: var(--ink-soft) !important; }
.pk li::before, .pk li i { color: var(--forest) !important; }

/* --- FAQ: a list of rules, not cards -------------------------------- */
.faqs details {
  background: none !important; border: none !important;
  border-bottom: 1px solid var(--ink-faint) !important; border-radius: 0 !important;
}
.faqs summary { color: var(--ink) !important; padding: 20px 0 !important; }
.faqs summary:hover { color: var(--gold) !important; }
.faqs p { color: var(--ink-soft) !important; padding: 0 0 20px !important; }

/* --- the closing spreads stay ink ----------------------------------- */
.seo-block {
  background: var(--ink) !important; border: none !important;
  border-radius: 2px !important;
}
.seo-block h2, .seo-block h3 { color: var(--paper) !important; }
.seo-block p { color: rgba(250, 246, 236, .75) !important; }
.final-cta {
  background: var(--ink) !important; border: none !important; border-radius: 2px !important;
}
.final-cta h2 { color: var(--paper) !important; }
.final-cta p { color: rgba(250, 246, 236, .75) !important; }
.final-cta .btn.main { background: var(--gold) !important; color: #fff !important; }
.final-cta .btn.main:hover { background: var(--gold-soft) !important; }
.final-cta .btn.ghost { color: var(--paper) !important; border-color: rgba(250, 246, 236, .3) !important; }
.final-cta .btn.ghost:hover { color: var(--gold-soft) !important; border-color: var(--gold-soft) !important; }

footer {
  background: var(--ink) !important; color: rgba(250, 246, 236, .55) !important;
  border-top: none !important;
}
footer a { color: var(--gold-soft) !important; }

/* --- motion: the same restrained reveal as the homepage ------------- */
.tv-rise { opacity: 0; transform: translateY(22px); }
.tv-rise.in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
#readbar {
  position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: 1200;
  height: 2px; width: 0; background: var(--gold); pointer-events: none;
  transition: width .12s linear;
}
@media (prefers-reduced-motion: reduce) {
  .tv-rise { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Page families that were originally dark. Their markup carries text
   colours meant for an ink background; on paper those need repainting.
   The selectors below only exist on those pages, so service pages and
   the deliberately-ink portfolio are untouched.
   ═══════════════════════════════════════════════════════════════════ */

/* --- packages page --------------------------------------------------- */
.pkg-card, .pkg-table {
  background: transparent !important; border: 1px solid var(--ink-faint) !important;
  border-radius: 2px !important; box-shadow: none !important;
}
.pkg-card.featured { border-color: var(--gold) !important; }
.pkg-name, .pkg-feats li, .pkg-table td, .pkg-table th { color: var(--ink) !important; }
.pkg-fit, .pkg-period, .pkg-desc, .idn-desc, .pkg-disclaim, .pkg-eq { color: var(--ink-soft) !important; }
.pkg-price, .pkg-price .p-was, .pkg-price .pkg-now {
  -webkit-text-fill-color: currentColor !important; background: none !important;
}
.pkg-price { color: var(--gold) !important; }
.pkg-price s.p-was { color: var(--ink-soft) !important; text-decoration-color: #c05a3e; }
.pkg-pop, .pop .pkg-pop {
  background: var(--gold) !important; color: #fff !important;
  border-radius: 2px !important; border: none !important;
}
/* the highlighted column keeps its ink block, so its text stays light */
.pkg-table thead th.pop, .pkg-table .pop {
  background: var(--ink) !important; border-radius: 2px !important;
}
.pkg-table th.pop .pkg-name, .pkg-table th.pop .pkg-price,
.pkg-table th.pop .pkg-fit, .pkg-table th.pop .pkg-period,
.pkg-table th.pop .pkg-price .pkg-now { color: var(--paper) !important; }
.pkg-table th.pop .pkg-price { color: var(--gold-soft) !important; }
.pkg-table th.pop .pkg-price s.p-was { color: rgba(250,246,236,.6) !important; }
.pkg-cta { background: var(--ink) !important; color: var(--paper) !important; border-radius: 2px !important; }
.pkg-cta:hover { background: var(--forest) !important; }
.pkg-table th.pop .pkg-cta { background: var(--gold) !important; color: #fff !important; }
.idn-title, .ss-card b, .custom-box h3 { color: var(--ink) !important; }
.idn-sub, .ss-card p, .custom-box p, .idn-bundle { color: var(--ink-soft) !important; }
.ss-card, .custom-box {
  background: transparent !important; border: 1px solid var(--ink-faint) !important;
  border-radius: 2px !important;
}
.pkg-trust span { color: var(--ink-soft) !important; }
.pkg-table .yes { color: var(--forest) !important; }
.pkg-table .no { color: rgba(17,51,42,.3) !important; }

/* --- blog index and articles ---------------------------------------- */
.blog-card {
  background: transparent !important; border: 1px solid var(--ink-faint) !important;
  border-radius: 2px !important; box-shadow: none !important;
}
.blog-card-body h4, .blog-card-body b { color: var(--ink) !important; }
.blog-card-body p, .blog-card-footer, .blog-card-footer span { color: var(--ink-soft) !important; }
.blog-cat, .cat { color: var(--gold) !important; background: none !important; border: none !important; }
.wrap .date, .eff { color: var(--ink-soft) !important; }
.guide-pill {
  background: transparent !important; border: 1px solid var(--ink-faint) !important;
  border-radius: 2px !important; color: var(--ink) !important;
}
.guide-pill:hover { border-color: var(--gold) !important; color: var(--gold) !important; }
.wrap table th { background: var(--paper-2) !important; color: var(--ink) !important; }
.wrap table td, .wrap table th { border-color: var(--ink-faint) !important; }
.cta-box {
  background: var(--ink) !important; border: none !important; border-radius: 2px !important;
}
.cta-box p, .cta-box b { color: var(--paper) !important; }
.cta-box .btn { background: var(--gold) !important; color: #fff !important; }

/* --- accent colours ---------------------------------------------------
   The old palette used a bright orange that only worked on a dark
   background; on paper it sits around 2:1. Accents on paper take the
   print gold (4.4:1), while accents inside ink blocks keep the light one. */
h1 span, h2 span, h3 span, .idn-title span, .section-title span,
.section-label span, .wrap p a, .wrap li a, .blog-cat, .cat, .guide-pill i {
  color: var(--gold) !important;
}
.lead-card span, .lead-card a, .seo-block span, .seo-block a,
.final-cta span, .final-cta a, .cta-box span, .cta-box a,
.pkg-table th.pop span, .pkg-table th.pop a:not(.pkg-cta), footer span, footer a,
.custom-box span:not(.cb-wa span), .custom-box a:not(.btn):not(.cb-wa) {
  color: var(--gold-soft) !important;
}
.custom-box {
  background: var(--ink) !important; border: none !important;
}
.custom-box h3 { color: var(--paper) !important; }
.custom-box p, .custom-note { color: rgba(250, 246, 236, .75) !important; }
.custom-box .btn, .custom-box a.btn {
  background: var(--gold) !important; color: #fff !important; border: none !important;
}

/* buttons carry their own foreground; accent-link rules must not reach them */
.pkg-cta, .pkg-cta span, .cb-wa, .cb-wa span, .cb-call, .cb-call span,
.btn, .btn span, .lc-submit, .pk-cta, .pk-cta span {
  color: inherit;
}
.pkg-table th.pop .pkg-cta, .pkg-table th.pop .pkg-cta span {
  /* white on the print gold clears AA (4.4:1); the dark ink text did not */
  color: #fff !important;
}
.cb-wa, .cb-wa span { background: #1f7a4d !important; color: #fff !important; border: none !important; }
.cb-wa { border-radius: 2px !important; }
.cb-call, .cb-call span {
  color: var(--paper) !important; border: 1px solid rgba(250,246,236,.3) !important;
  border-radius: 2px !important; background: transparent !important;
}

/* --- comparison table ------------------------------------------------
   Three problems it had: the browser sized the plan columns by their
   content, so they came out 205 / 303 / 340 wide in a table whose whole
   job is side-by-side comparison; the striping painted the data cells
   but not the label cell, leaving a pale block down one side; and the
   rules and tints were left over from the old cold palette. */
.pkg-table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.pkg-table .feat-col, .pkg-table .feat { width: 28%; }
.pkg-table thead th:not(.feat-col) { width: 24%; }

/* stripe the whole row, in paper tones */
.pkg-table tbody tr:nth-child(even) > * { background: var(--paper-2) !important; }
.pkg-table tbody tr:nth-child(odd) > * { background: transparent !important; }
/* the popular column keeps a warm tint over the stripe */
.pkg-table tbody tr > *:nth-child(3) { background: rgba(145, 97, 20, .07) !important; }
.pkg-table tbody tr:nth-child(even) > *:nth-child(3) { background: rgba(145, 97, 20, .12) !important; }

.pkg-table td, .pkg-table th { border-color: var(--ink-faint) !important; vertical-align: middle; }
.pkg-table thead th { vertical-align: top; }
.pkg-table .feat { text-align: start; font-weight: 700; color: var(--ink) !important; }
.pkg-table td { text-align: center; }
.pkg-table .yes { color: var(--forest) !important; font-size: 1.05rem; }
.pkg-table .no { color: rgba(17, 51, 42, .28) !important; }

/* the highlighted plan reads as one continuous ink column */
.pkg-table thead th.pop { background: var(--ink) !important; }
.pkg-table thead th.pop .pkg-pop { background: var(--gold) !important; color: #fff !important; }

@media (max-width: 860px) {
  /* fixed layout plus a floor width, so it scrolls instead of squashing */
  .pkg-table { min-width: 640px; }
  .pkg-table .feat-col, .pkg-table .feat { width: 34%; }
  .pkg-table td, .pkg-table th { padding: 14px 10px !important; font-size: .88rem; }
}

/* --- section eyebrows: hairline label, not a pill -------------------- */
.section-label {
  background: none !important; border: none !important; border-radius: 0 !important;
  border-bottom: 1px solid var(--ink-faint) !important;
  padding: 0 0 11px !important; width: fit-content; gap: 12px !important;
  color: var(--ink-soft) !important; font-size: .76rem; font-weight: 700;
  letter-spacing: .14em;
}
[dir="rtl"] .section-label { letter-spacing: 0; font-size: .86rem; }
.section-label .dot { display: none !important; }
.section-header, .pkg-head, .section-header .section-label { margin-inline: auto; }

/* --- the table sits on paper, framed by a hairline ------------------- */
.pkg-table-wrap {
  background: transparent !important; border: 1px solid var(--ink-faint) !important;
  border-radius: 2px !important; box-shadow: none !important; overflow: hidden;
}
.pkg-table thead th:not(.pop) { background: transparent !important; }
/* the disclaimer and currency note read as quiet footnotes */
.pkg-disclaim {
  background: transparent !important; border: 1px solid var(--ink-faint) !important;
  border-radius: 2px !important; color: var(--ink-soft) !important;
}
.pkg-trust span, .pkg-trust {
  background: transparent !important; border-color: var(--ink-faint) !important;
  border-radius: 2px !important;
}

/* --- comparison table, structure -------------------------------------
   The label cells were rendering at `padding: 18px 0`, so every feature
   name sat flush against the table edge. Cells now share one padding
   scale, rows breathe, and the label column has a heading instead of a
   void above it. */
.pkg-table th, .pkg-table td { padding: 20px 24px !important; }
.pkg-table thead th { padding: 32px 24px 28px !important; }
.pkg-table .feat, .pkg-table .feat-col {
  padding-inline: 28px !important;
  text-align: start !important;
  font-size: .95rem; line-height: 1.5;
}
.pkg-table .feat-col {
  font-family: 'Inter', 'Noto Sans Arabic', sans-serif;
  font-size: .74rem !important; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft) !important;
  vertical-align: bottom !important;
}
[dir="rtl"] .pkg-table .feat-col {
  letter-spacing: 0; text-transform: none; font-size: .84rem !important;
}
/* a single rule separating the labels from the plans reads as a spine */
.pkg-table .feat, .pkg-table .feat-col {
  border-inline-end: 1px solid var(--ink-faint) !important;
}
.pkg-table tbody tr > *:not(.feat) { line-height: 1.55; }
.pkg-table tbody tr:last-child > * { border-bottom: none !important; }

@media (max-width: 860px) {
  .pkg-table th, .pkg-table td { padding: 16px 14px !important; }
  .pkg-table thead th { padding: 24px 14px 20px !important; }
  .pkg-table .feat, .pkg-table .feat-col { padding-inline: 16px !important; font-size: .88rem; }
}

/* FAQ answers: same accessible body colour as the rest of the page */
.faq-a, .faq-a-inner, .faq-a-inner p, .faq-a-inner li { color: var(--ink-soft) !important; }