/* ==========================================================================
   TAQOD — brand design system, 2026
   Built strictly on the 2021 brand manual (HAYA Design Studio):
     green  #0F735A   RGB 15 115 90
     beige  #BE9A7B   RGB 190 154 123
     black  #000000
     white  #FFFFFF
   Typography: Avenir Next -> Jost (geometric, closest free match)
               DIN Next LT Arabic -> self-hosted from the brand files
   ========================================================================== */

@font-face{
  font-family:'DIN Next LT Arabic';
  src:url('assets/fonts/din-next-arabic-light.woff2') format('woff2');
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'DIN Next LT Arabic';
  src:url('assets/fonts/din-next-arabic-regular.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
}

:root{
  /* ---- brand ---- */
  --green:#0F735A;
  --green-deep:#0A5442;
  --green-dark:#06342A;
  --beige:#BE9A7B;
  --beige-deep:#856748;
  --black:#0A0A0A;
  --white:#FFFFFF;

  /* ---- canvas: warm ivory, derived from the beige ---- */
  --ivory:#F4F1EA;
  --ivory-2:#EBE6DC;
  --ivory-3:#E1DACC;
  --surface:#FFFFFF;

  /* ---- text ---- */
  --ink:#0A0A0A;
  --body:#4A4A46;
  --muted:#6B6B64;

  /* ---- lines ---- */
  --rule:rgba(10,10,10,.12);
  --rule-2:rgba(10,10,10,.07);
  --rule-green:rgba(15,115,90,.22);

  /* ---- tints ---- */
  --green-wash:rgba(15,115,90,.06);
  --green-wash-2:rgba(15,115,90,.12);
  --beige-wash:rgba(190,154,123,.18);
  --beige-wash-2:rgba(190,154,123,.34);

  /* ---- type ---- */
  --sans:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ar:'DIN Next LT Arabic','Jost',sans-serif;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);

  /* ---- metrics ---- */
  --wrap:1280px;

  /* legacy aliases — kept so any stray var() can never fall back to a serif */
  --font-body:var(--sans);--font-display:var(--sans);--font-ar:var(--ar);
  --paper:var(--ivory);--paper-2:var(--ivory-2);
  --text-ink:var(--ink);--text-body:var(--body);--text-muted:var(--muted);
  --grn:var(--green);--mut:var(--muted);--fg:var(--ink);--bg:var(--ivory);
  --gut:clamp(20px,4.4vw,72px);
  --r:4px;          /* the brand is angular: hexagon, sharp corners */
  --r-lg:8px;
  --nav-h:104px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ivory);color:var(--body);
  font-family:var(--sans);font-size:16.5px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
[dir="rtl"] body,body[dir="rtl"],html[lang="ar"] body{font-family:var(--ar)}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--beige-wash-2);color:var(--ink)}
:focus-visible{outline:2px solid var(--green);outline-offset:4px}

/* ==========================================================================
   1. LAYOUT
   ========================================================================== */
.b-wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.b-wrap--wide{max-width:1560px}
.b-wrap--narrow{max-width:900px}
.b-sec{padding-block:clamp(72px,11vh,160px);position:relative}
.b-sec--tight{padding-block:clamp(48px,7vh,96px)}
.b-sec--flush{padding-block:0}

.b-grid{display:grid;gap:clamp(18px,2.2vw,32px)}
.b-g2{grid-template-columns:repeat(2,1fr)}
.b-g3{grid-template-columns:repeat(3,1fr)}
.b-g4{grid-template-columns:repeat(4,1fr)}
.b-g5{grid-template-columns:repeat(5,1fr)}
.b-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:1024px){.b-g4,.b-g5{grid-template-columns:repeat(2,1fr)}.b-g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.b-g2,.b-g3,.b-g4,.b-g5,.b-split{grid-template-columns:1fr}}

/* ==========================================================================
   2. TYPE
   ========================================================================== */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.02;color:var(--ink)}
strong,b{font-weight:600;color:var(--ink)}
.b-d1{font-size:clamp(46px,8.6vw,146px);font-weight:600;letter-spacing:-.05em;line-height:.92}
.b-d2{font-size:clamp(38px,6vw,96px);letter-spacing:-.045em;line-height:.96}
.b-h2{font-size:clamp(29px,4.3vw,62px);letter-spacing:-.04em;line-height:1.02}
.b-h3{font-size:clamp(19px,1.6vw,24px);letter-spacing:-.025em;line-height:1.24;font-weight:600;color:var(--ink)}
.b-h4{font-size:clamp(17px,1.25vw,19px);letter-spacing:-.02em;line-height:1.32;font-weight:600;color:var(--ink)}
p{margin:0 0 1.1em;color:var(--body)}
.b-lede{font-size:clamp(17.5px,1.55vw,22px);line-height:1.55;color:var(--body);max-width:56ch;font-weight:400}
.b-title{display:block;font-size:clamp(17px,1.3vw,19.5px);font-weight:600;letter-spacing:-.022em;line-height:1.3;color:var(--ink);margin-bottom:9px}
.b-title--sm{font-size:16px;margin-bottom:7px}
.b-body{font-size:17px;line-height:1.68;color:var(--body);max-width:64ch}
.b-small{font-size:14.5px;line-height:1.6;color:var(--muted)}

/* the index label: hexagon + wide tracking. The brand's signature detail. */
.b-label{
  display:inline-flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--green);margin:0 0 26px;
}
.b-label::before{
  content:"";width:9px;height:10px;flex:0 0 auto;background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.b-label--beige{color:var(--beige-deep)}
.b-label--onDark{color:var(--beige)}
[dir="rtl"] .b-label{letter-spacing:0}

/* beige marker — the one flourish, used sparingly */
.b-mark{
  background:linear-gradient(to top,var(--beige-wash-2) 0 .34em,transparent 0);
  padding-inline:.06em;
}
.b-green{color:var(--green)}
.b-beige{color:var(--beige-deep)}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.b-btn{
  --bg:var(--green);--fg:var(--white);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  height:58px;padding:0 30px;border:1px solid transparent;border-radius:var(--r);
  background:var(--bg);color:var(--fg);cursor:pointer;overflow:hidden;
  font-family:inherit;font-size:15px;font-weight:500;letter-spacing:.01em;
  transition:color .4s var(--ease),border-color .4s var(--ease),transform .5s var(--ease);
}
.b-btn span{position:relative;z-index:2}
.b-btn::before{
  content:"";position:absolute;inset:0;z-index:1;background:var(--ink);
  transform:translateY(101%);transition:transform .5s var(--ease);
}
.b-btn:hover::before{transform:translateY(0)}
.b-btn:hover{color:var(--white)}
.b-btn--ghost{--bg:transparent;--fg:var(--ink);border-color:var(--rule)}
.b-btn--ghost:hover{color:var(--white);border-color:var(--ink)}
.b-btn--beige{--bg:var(--beige);--fg:var(--ink)}
.b-btn--onDark{--bg:var(--beige);--fg:var(--ink)}
.b-btn--onDark::before{background:var(--white)}
.b-btn--onDark:hover{color:var(--ink)}
.b-btn__arw{transition:transform .45s var(--ease)}
.b-btn:hover .b-btn__arw{transform:translateX(5px)}
[dir="rtl"] .b-btn:hover .b-btn__arw{transform:translateX(-5px)}

/* text link with a rule that wipes */
.b-link{
  position:relative;display:inline-block;color:var(--ink);font-weight:500;
  padding-bottom:3px;
}
.b-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--green);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);
}
.b-link:hover::after{transform:scaleX(1);transform-origin:left}
.b-link:hover{color:var(--green)}

/* ==========================================================================
   4. SURFACES
   ========================================================================== */
.b-card{
  position:relative;background:var(--surface);border:1px solid var(--rule-2);
  border-radius:var(--r);padding:clamp(24px,2.4vw,34px);overflow:hidden;
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .5s;
}
.b-card::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.b-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(10,10,10,.3);border-color:transparent}
.b-card:hover::after{transform:scaleX(1)}
.b-card__n{
  font-size:12px;font-weight:500;letter-spacing:.2em;color:var(--beige-deep);
  display:block;margin-bottom:18px;
}
.b-card h3,.b-card .b-title{margin:0 0 10px}
.b-card p{margin:0;font-size:15.5px;line-height:1.62;color:var(--body)}

.b-panel{background:var(--ivory-2);border-radius:var(--r);padding:clamp(26px,3vw,44px)}

/* dark block — used once or twice per page, never more */
.b-dark{
  background:var(--green-dark);color:var(--ivory);border-radius:var(--r);
  padding:clamp(44px,6vw,96px);position:relative;overflow:hidden;
}
.b-dark::before{
  content:"";position:absolute;top:-40%;left:50%;width:min(900px,120%);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(15,115,90,.55),transparent 62%);
}
.b-dark h1,.b-dark h2,.b-dark h3{color:var(--ivory);position:relative}
.b-dark p{color:rgba(244,241,234,.72);position:relative}

/* ==========================================================================
   5. THE INDEX LIST — numbered rows that fill on hover
   ========================================================================== */
.b-index{border-top:1px solid var(--rule);margin:0;padding:0;list-style:none}
.b-index li{border-bottom:1px solid var(--rule)}
.b-index a{
  position:relative;display:flex;align-items:center;gap:clamp(16px,2.4vw,40px);
  padding:clamp(20px,2.4vw,32px) clamp(10px,1.6vw,24px);isolation:isolate;
  transition:padding-inline-start .6s var(--ease),color .4s;
}
.b-index a::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--green);
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.b-index a:hover::before{transform:scaleY(1);transform-origin:top}
.b-index a:hover{color:var(--white);padding-inline-start:clamp(20px,2.6vw,40px)}
.b-index__n{font-size:12.5px;letter-spacing:.16em;color:var(--muted);width:34px;flex:0 0 auto;transition:color .4s}
.b-index a:hover .b-index__n{color:rgba(255,255,255,.6)}
.b-index__t{font-size:clamp(19px,2.4vw,32px);font-weight:500;letter-spacing:-.03em;flex:1;min-width:0}
.b-index__go{margin-inline-start:auto;opacity:0;transform:translateX(-10px);transition:all .5s var(--ease);color:var(--beige)}
.b-index a:hover .b-index__go{opacity:1;transform:none}
[dir="rtl"] .b-index__go{transform:translateX(10px) scaleX(-1)}
[dir="rtl"] .b-index a:hover .b-index__go{transform:scaleX(-1)}

/* ==========================================================================
   6. STATS
   ========================================================================== */
.b-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);
  border-top:1px solid var(--rule);padding-top:clamp(28px,3vw,44px)}
.b-stat__n{font-size:clamp(34px,5vw,74px);font-weight:400;letter-spacing:-.05em;line-height:1;color:var(--green);
  font-variant-numeric:tabular-nums}
.b-stat__l{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:12px;max-width:16ch}
[dir="rtl"] .b-stat__l{letter-spacing:0;text-transform:none;font-size:14px}
@media(max-width:720px){.b-stats{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   7. RULES + MOTIFS
   ========================================================================== */
.b-rule{height:1px;background:var(--rule);border:0;margin:0}
.b-hex{width:10px;height:11px;background:var(--green);flex:0 0 auto;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* ==========================================================================
   8. CHECK LIST
   ========================================================================== */
.b-checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.b-checks li{display:flex;gap:14px;align-items:flex-start;font-size:16.5px;line-height:1.5;color:var(--ink)}
.b-checks li::before{
  content:"";width:11px;height:12px;flex:0 0 auto;margin-top:7px;background:var(--beige);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}

/* ==========================================================================
   9. FAQ
   ========================================================================== */
.b-faq{border-top:1px solid var(--rule)}
.b-faq details{border-bottom:1px solid var(--rule)}
.b-faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(20px,2.2vw,30px) 56px clamp(20px,2.2vw,30px) 0;
  font-size:clamp(17px,1.9vw,23px);font-weight:500;letter-spacing:-.025em;
  transition:color .3s;
}
.b-faq summary::-webkit-details-marker{display:none}
.b-faq summary:hover{color:var(--green)}
.b-faq summary::after,.b-faq summary::before{
  content:"";position:absolute;right:14px;top:50%;background:var(--green);transition:transform .45s var(--ease);
}
.b-faq summary::after{width:15px;height:1.5px;margin-top:-.75px}
.b-faq summary::before{width:1.5px;height:15px;margin-top:-7.5px;right:20.75px}
.b-faq details[open] summary::before{transform:rotate(90deg)}
.b-faq p{padding:0 60px 26px 0;margin:0;font-size:16.5px;line-height:1.7}
[dir="rtl"] .b-faq summary{padding:clamp(20px,2.2vw,30px) 0 clamp(20px,2.2vw,30px) 56px}
[dir="rtl"] .b-faq summary::after,[dir="rtl"] .b-faq summary::before{right:auto;left:14px}
[dir="rtl"] .b-faq summary::before{left:20.75px}
[dir="rtl"] .b-faq p{padding:0 0 26px 60px}

/* ==========================================================================
   10. PROSE (article bodies)
   ========================================================================== */
.b-prose{max-width:70ch}
.b-prose h2{font-size:clamp(24px,2.8vw,38px);margin:2em 0 .5em;letter-spacing:-.035em}
.b-prose h3{font-size:clamp(19px,1.8vw,24px);margin:1.8em 0 .4em}
.b-prose p,.b-prose li{font-size:17.5px;line-height:1.75;color:var(--body)}
.b-prose ul,.b-prose ol{padding-inline-start:22px}
.b-prose li{margin-bottom:.5em}
.b-prose strong{color:var(--ink);font-weight:500}
.b-prose a{color:var(--green);border-bottom:1px solid var(--rule-green)}
.b-prose blockquote{
  margin:2em 0;padding-inline-start:26px;border-inline-start:2px solid var(--beige);
  font-size:clamp(19px,2.2vw,26px);line-height:1.4;letter-spacing:-.025em;color:var(--ink);
}
.b-prose table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15.5px}
.b-prose th,.b-prose td{text-align:start;padding:13px 14px;border-bottom:1px solid var(--rule)}
.b-prose th{font-weight:500;color:var(--ink);background:var(--ivory-2)}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */
.b-foot{background:var(--green-dark);color:var(--ivory);padding-top:clamp(64px,8vw,110px)}
.b-foot a{color:rgba(244,241,234,.74);transition:color .3s}
.b-foot a:hover{color:var(--beige)}
.b-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,3vw,44px)}
.b-foot__h{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--beige);margin:0 0 18px;font-weight:500}
.b-foot__list{display:flex;flex-direction:column;gap:11px;font-size:15px}
.b-foot__bar{
  margin-top:clamp(48px,6vw,86px);padding:26px 0;border-top:1px solid rgba(244,241,234,.14);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:13.5px;color:rgba(244,241,234,.55);
}
@media(max-width:860px){.b-foot__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.b-foot__grid{grid-template-columns:1fr}}

/* ==========================================================================
   12. RTL + Arabic type adjustments
   ========================================================================== */
[dir="rtl"] .b-d1,[dir="rtl"] .b-d2,[dir="rtl"] .b-h2{letter-spacing:0;line-height:1.14}
[dir="rtl"] .b-h3,[dir="rtl"] .b-h4{letter-spacing:0;line-height:1.4}
[dir="rtl"] .b-lede,[dir="rtl"] p,[dir="rtl"] .b-body{line-height:1.85}
[dir="rtl"] .b-prose p,[dir="rtl"] .b-prose li{font-size:18px;line-height:1.95}

/* fixed header offset + smooth-scroll shell */
.bm-page{padding-top:var(--nav-h)}
@media(max-width:960px){.bm-page{padding-top:82px}}
.b-sec + .b-sec{padding-top:0}
.b-sec > .b-wrap + .b-wrap{margin-top:clamp(40px,5vw,72px)}

/* ==========================================================================
   13. SAFETY: an inline SVG with no width must never fill the viewport
   ========================================================================== */
svg:not([width]){max-width:100%}
:where(a,button,li,h1,h2,h3,h4,p,span,div) > svg:not([width]){width:1.4em;height:1.4em;flex:0 0 auto}

/* ==========================================================================
   14. STAT BLOCK
   ========================================================================== */
.b-stat{display:flex;flex-direction:column;gap:0}

/* ==========================================================================
   15. WHATSAPP — floating contact
   ========================================================================== */
.tq-wa{
  position:fixed;inset-inline-end:22px;bottom:22px;z-index:150;
  display:inline-flex;align-items:center;gap:11px;
  height:56px;padding:0 22px 0 18px;border-radius:var(--r);
  background:var(--green);color:var(--white);
  font-size:15px;font-weight:500;letter-spacing:.01em;
  box-shadow:0 18px 40px -18px rgba(15,115,90,.7),0 2px 8px rgba(10,10,10,.14);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),background .35s;
}
.tq-wa:hover{transform:translateY(-3px);background:var(--green-deep)}
.tq-wa svg,.tq-wa svg:not([width]){width:24px;height:24px;fill:currentColor;flex:0 0 auto}
.tq-wa__t{white-space:nowrap}
@media(max-width:640px){
  .tq-wa{height:54px;padding:0 16px;inset-inline-end:14px;bottom:14px}
  .tq-wa__t{display:none}
}
@media print{.tq-wa{display:none}}

/* ==========================================================================
   16. FREE AUDIT BAND
   ========================================================================== */
.tq-audit{padding-block:clamp(48px,7vh,96px)}
.tq-audit__in{
  max-width:var(--wrap);margin:0 auto;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,56px);align-items:center;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:clamp(28px,3.6vw,52px);position:relative;overflow:hidden;
}
.tq-audit__in::before{
  content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--green),var(--beige));
}
.tq-audit__eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--green);margin:0 0 16px;
}
.tq-audit__eyebrow::before{
  content:"";width:9px;height:10px;background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.tq-audit h2{font-size:clamp(24px,3vw,40px);letter-spacing:-.04em;line-height:1.05;margin:0 0 14px}
.tq-audit p{margin:0;font-size:16.5px;line-height:1.62;color:var(--body)}
.tq-audit__list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:11px}
.tq-audit__list li{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink)}
.tq-audit__list li::before{
  content:"";width:10px;height:11px;flex:0 0 auto;margin-top:6px;background:var(--beige);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.tq-audit__cta{display:flex;flex-direction:column;gap:12px}
.tq-audit__btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 26px;border-radius:var(--r);overflow:hidden;
  font-size:15px;font-weight:500;transition:transform .5s var(--ease),color .4s;
}
.tq-audit__btn span{position:relative;z-index:2}
.tq-audit__btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease)}
.tq-audit__btn:hover::before{transform:translateY(0)}
.tq-audit__btn:hover{color:var(--white)}
.tq-audit__btn--wa{background:var(--green);color:var(--white)}
.tq-audit__btn--mail{background:var(--ivory-2);color:var(--ink)}
.tq-audit__note{font-size:13.5px;color:var(--muted);margin:2px 0 0}
@media(max-width:860px){.tq-audit__in{grid-template-columns:1fr}}

/* ==========================================================================
   17. GENERIC LAYOUT PRIMITIVES (mapped from the old inline styles)
   ========================================================================== */
.b-stack{display:flex;flex-direction:column;gap:10px}
.b-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.b-wrap.b-grid{display:grid}          /* a container can also be the grid */
.b-split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
@media(max-width:860px){.b-split{grid-template-columns:1fr}}

/* vertical rhythm inside a section */
.b-wrap > * + *{margin-top:clamp(18px,2vw,28px)}
.b-wrap > .b-label + *{margin-top:0}
.b-wrap > h1 + p,.b-wrap > h2 + p,.b-wrap > h3 + p{margin-top:16px}
.b-grid > *{margin-top:0 !important}
.b-stack > * + *{margin-top:0}

/* a Q&A block that isn't a <details> still needs to read as a list */
.b-qa{border-top:1px solid var(--rule)}
.b-qa > div{padding-block:clamp(18px,2vw,26px);border-bottom:1px solid var(--rule)}
.b-qa h3,.b-qa h4{margin:0 0 8px}
.b-qa p{margin:0;color:var(--body)}

/* cards that came from the old markup keep their inner rhythm */
.b-card > * + *{margin-top:10px}
.b-card > span:first-child:not(.b-title),.b-card > div:first-child:not(.b-title){
  display:block;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--beige-deep);margin-bottom:16px;
}

/* ==========================================================================
   18. HUB PAGES + LANDING PAGES — expressed in the new brand system
   ========================================================================== */
.hub-eyebrow,.lp-eyebrow{
  display:inline-flex;align-items:center;gap:11px;margin:0 0 22px;
  font-size:11.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--green);
}
.hub-eyebrow::before,.lp-eyebrow::before{
  content:"";width:9px;height:10px;background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.hub-h1,.lp-h1{font-size:clamp(38px,6vw,96px);font-weight:500;letter-spacing:-.045em;line-height:.98;margin:0;max-width:19ch}
.lp-h2{font-size:clamp(27px,3.6vw,54px);font-weight:500;letter-spacing:-.04em;line-height:1.02;margin:0 0 22px;max-width:26ch}
.hub-lede,.lp-lede{font-size:clamp(17px,1.6vw,21px);line-height:1.55;color:var(--body);max-width:58ch;margin:22px 0 0}
.lp-wrap{max-width:1120px;margin:0 auto;padding-inline:var(--gut)}
.lp-block{padding-top:clamp(56px,8vh,120px)}
.lp-hero{padding-top:clamp(48px,7vh,96px)}

.lp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.lp-btn,.hub-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:58px;padding:0 28px;border-radius:var(--r);overflow:hidden;
  font-size:15px;font-weight:500;transition:transform .5s var(--ease),color .4s;
}
.lp-btn span{position:relative;z-index:2}
.lp-btn::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease)}
.lp-btn:hover::before{transform:translateY(0)}
.lp-btn:hover{color:var(--white)}
.lp-btn--wa{background:var(--green);color:var(--white)}
.lp-btn--dark{background:var(--ink);color:var(--ivory)}
.lp-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.lp-note{font-size:13.5px;color:var(--muted);margin:14px 0 0}

.lp-trust{list-style:none;display:flex;gap:clamp(24px,4vw,52px);flex-wrap:wrap;margin:38px 0 0;
  padding-top:28px;border-top:1px solid var(--rule)}
.lp-trust li{display:flex;flex-direction:column;gap:4px}
.lp-trust strong{font-size:clamp(26px,3.4vw,44px);font-weight:400;letter-spacing:-.05em;color:var(--green)}
.lp-trust span{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.lp-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
.lp-two p{font-size:17px;line-height:1.7;color:var(--body);margin:0}
.lp-cards,.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(16px,2vw,24px)}
.hub-grid{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5vw,72px) var(--gut) 0}
.lp-card,.hub-col{
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:clamp(24px,2.4vw,32px);transition:transform .6s var(--ease),box-shadow .6s var(--ease);
}
.lp-card:hover{transform:translateY(-5px);box-shadow:0 26px 54px -30px rgba(10,10,10,.3)}
.lp-card h3{font-size:19px;font-weight:500;letter-spacing:-.025em;margin:0 0 9px}
.lp-card p{font-size:15px;line-height:1.6;color:var(--body);margin:0}
.hub-col__h{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--beige-deep);margin:0 0 14px;font-weight:500}
.hub-list{list-style:none;margin:0;padding:0}
.hub-list li{border-bottom:1px solid var(--rule-2)}
.hub-list li:last-child{border-bottom:0}
.hub-list a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;
  font-size:16.5px;font-weight:500;letter-spacing:-.02em;transition:color .25s,padding-inline-start .5s var(--ease)}
.hub-list a:hover{color:var(--green);padding-inline-start:8px}
.hub-list__go{color:var(--beige);opacity:0;transform:translateX(-6px);transition:all .4s var(--ease)}
.hub-list a:hover .hub-list__go{opacity:1;transform:none}

.lp-checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 32px}
.lp-checks li{display:flex;gap:13px;align-items:flex-start;font-size:16px;line-height:1.5}
.lp-checks li::before{content:"";width:11px;height:12px;flex:0 0 auto;margin-top:6px;background:var(--beige);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.lp-steps li{display:flex;gap:15px;align-items:flex-start}
.lp-steps__n{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:var(--r);
  background:var(--green-wash);border:1px solid var(--rule-green);color:var(--green);font-size:13px;font-weight:500}
.lp-steps h3{font-size:17px;font-weight:500;letter-spacing:-.02em;margin:0 0 5px}
.lp-steps p{font-size:14.5px;line-height:1.55;color:var(--body);margin:0}
.lp-areas-lede{font-size:16px;line-height:1.6;color:var(--body);max-width:58ch;margin:0 0 22px}
.lp-areas{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0}
.lp-areas a{display:inline-block;padding:11px 20px;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--rule-2);font-size:14.5px;font-weight:500;
  transition:border-color .3s,color .3s,transform .4s var(--ease)}
.lp-areas a:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.lp-faq{border-top:1px solid var(--rule)}
.lp-faq details{border-bottom:1px solid var(--rule)}
.lp-faq summary{list-style:none;cursor:pointer;position:relative;padding:22px 52px 22px 0;
  font-size:clamp(17px,1.9vw,22px);font-weight:500;letter-spacing:-.025em}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary:hover{color:var(--green)}
.lp-faq summary::after{content:"";position:absolute;inset-inline-end:12px;top:50%;width:12px;height:12px;
  margin-top:-8px;border-inline-end:1.6px solid var(--green);border-bottom:1.6px solid var(--green);
  transform:rotate(45deg);transition:transform .4s var(--ease)}
.lp-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.lp-faq p{padding:0 56px 24px 0;margin:0;font-size:16.5px;line-height:1.7;color:var(--body)}
.lp-contact{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);padding:clamp(26px,3vw,44px)}
.lp-address{font-style:normal;font-size:15.5px;line-height:1.9;color:var(--body)}
.lp-address strong{color:var(--ink);font-weight:500}
.lp-address a{color:var(--green)}
.lp-contact__cta{display:flex;flex-direction:column;gap:12px}
.taqod-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)}
.taqod-featured{display:grid;gap:20px}
@media(max-width:860px){
  .lp-two,.lp-checks,.lp-contact,.taqod-contact-grid{grid-template-columns:1fr}
}
.hub-list__t{flex:1;min-width:0}

/* ==========================================================================
   19. RELATED READING — internal-link block
   ========================================================================== */
.b-rel{border-top:1px solid var(--rule);margin-top:clamp(48px,6vw,88px);padding-top:clamp(28px,3vw,44px)}
.b-rel__h{
  display:inline-flex;align-items:center;gap:11px;margin:0 0 24px;
  font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--green);
}
.b-rel__h::before{content:"";width:9px;height:10px;background:currentColor;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.b-rel__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:clamp(14px,1.6vw,20px)}
.b-rel__card{
  display:block;background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:22px 22px 24px;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s;
}
.b-rel__card:hover{transform:translateY(-4px);box-shadow:0 22px 46px -26px rgba(10,10,10,.3);border-color:transparent}
.b-rel__k{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--beige-deep);display:block;margin-bottom:10px}
.b-rel__t{font-size:16.5px;font-weight:600;letter-spacing:-.02em;line-height:1.32;color:var(--ink);margin:0 0 8px}
.b-rel__d{font-size:14px;line-height:1.55;color:var(--body);margin:0}
[dir="rtl"] .b-rel__h,[dir="rtl"] .b-rel__k{letter-spacing:0}
.b-svc-note{
  margin:18px 0 0;padding:14px 18px;border-inline-start:2px solid var(--beige);
  background:var(--ivory-2);border-radius:var(--r);
  font-size:15.5px;line-height:1.55;color:var(--body);max-width:62ch;
}
.b-svc-note a{color:var(--green);font-weight:600;border-bottom:1px solid var(--rule-green)}

/* ==========================================================================
   20. AUTHOR — byline + profile
   ========================================================================== */
.b-author-hero{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);flex-wrap:wrap}
.b-author-hero__img{width:clamp(88px,9vw,120px);height:auto;border-radius:var(--r-lg);flex:0 0 auto}
.b-author-role{font-size:15px;color:var(--muted);margin:10px 0 0;letter-spacing:.01em}

.b-byline{
  display:flex;align-items:center;gap:14px;margin:26px 0 0;padding:16px 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.b-byline__img{width:46px;height:46px;border-radius:12px;flex:0 0 auto}
.b-byline__t{font-size:15px;font-weight:600;color:var(--ink);margin:0;line-height:1.3}
.b-byline__t a{color:var(--ink)}
.b-byline__t a:hover{color:var(--green)}
.b-byline__m{font-size:13.5px;color:var(--muted);margin:2px 0 0;line-height:1.4}

.b-authorbox{
  display:flex;gap:clamp(16px,2vw,24px);align-items:flex-start;flex-wrap:wrap;
  margin-top:clamp(40px,5vw,72px);padding:clamp(22px,2.6vw,32px);
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
}
.b-authorbox__img{width:72px;height:72px;border-radius:16px;flex:0 0 auto}
.b-authorbox__b{flex:1;min-width:min(100%,260px)}
.b-authorbox__n{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0 0 2px;color:var(--ink)}
.b-authorbox__r{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--beige-deep);margin:0 0 12px;font-weight:600}
.b-authorbox__d{font-size:15.5px;line-height:1.62;color:var(--body);margin:0 0 12px;max-width:62ch}
[dir="rtl"] .b-authorbox__r{letter-spacing:0;text-transform:none}

/* ==========================================================================
   21. HERO — restore hierarchy and spacing to the top of the homepage
   ========================================================================== */
.taqod-hero{align-items:center}
.taqod-hero-h1,.taqod-hero h1{
  font-size:clamp(44px,6.6vw,104px)!important;font-weight:600!important;
  letter-spacing:-.05em!important;line-height:.94!important;max-width:14ch;margin:26px 0 0!important;
}
/* the rotating outcome line: give it its own row, aligned and legible */
.taqod-hero-outcome{
  display:flex!important;align-items:center;gap:14px!important;
  width:auto!important;max-width:560px;min-height:44px!important;
  margin:30px 0 0!important;padding:12px 18px 12px 14px;
  background:var(--surface);border:1px solid var(--rule-2);border-radius:var(--r);
}
.taqod-hero-outcome__icon{width:26px!important;height:26px!important;color:var(--green)!important}
.taqod-hero-outcome__copy{
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  gap:2px!important;min-width:0;
}
.taqod-hero-outcome__eyebrow{
  font-size:10px!important;font-weight:600!important;letter-spacing:.2em!important;
  text-transform:uppercase;color:var(--beige-deep)!important;line-height:1!important;
}
.taqod-hero-phrases{width:auto!important;min-width:min(300px,52vw);height:26px!important}
.taqod-hero-phrase{
  font-size:16.5px!important;font-weight:600!important;letter-spacing:-.015em!important;
  color:var(--ink)!important;line-height:1.3!important;
}
.taqod-hero .b-lede,.taqod-hero p{margin-top:22px!important}
/* the growth-loop panel reads as a real product surface */
.taqod-growth-loop{
  background:var(--surface)!important;border:1px solid var(--rule-2)!important;
  border-radius:var(--r-lg)!important;box-shadow:0 30px 70px -40px rgba(10,10,10,.35)!important;
}
@media(max-width:900px){
  .taqod-hero-outcome{max-width:none}
  .taqod-hero-phrases{min-width:0;flex:1}
}

/* ==========================================================================
   22. LOGOS ON IVORY
   Client marks are supplied as flat artwork with baked-in white backgrounds.
   `multiply` drops that white into the ivory, so no boxes. A uniform row
   height and a greyscale rest-state stop eleven different logos from
   fighting each other.
   ========================================================================== */
.taqod-logos{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  align-items:center;justify-items:center;
  gap:clamp(24px,3.2vw,52px) clamp(20px,2.6vw,44px) !important;
  margin-top:clamp(28px,3vw,44px);padding:0 !important;
}
.taqod-logos img{
  height:clamp(38px,3.4vw,54px) !important;
  width:auto !important;max-width:100%;
  object-fit:contain;
  mix-blend-mode:multiply;              /* kills the white plate */
  filter:grayscale(1);opacity:.72;
  transition:filter .4s var(--ease),opacity .4s var(--ease),transform .4s var(--ease);
}
.taqod-logos img:hover{filter:none;opacity:1;transform:translateY(-2px)}

/* the brand mark in the header and footer: same treatment, so the tan
   wordmark sits directly on the page with no plate behind it */
.bn__logo img,.b-foot img[src*="logo-full"]{mix-blend-mode:multiply}
.b-foot img[src*="logo-full"]{mix-blend-mode:normal}   /* footer is dark — leave it */

/* any other flat client/partner artwork placed on the ivory canvas */
img[src*="/clients/"]{mix-blend-mode:multiply}
@media (prefers-reduced-motion:reduce){.taqod-logos img{transition:none}}
/* the reversed lockup is already light — never filter or blend it */
.b-foot img[src*="logo-full"]{mix-blend-mode:normal !important;filter:none !important;height:56px;width:auto}

/* ==========================================================================
   23. CATEGORY FILTERS
   ========================================================================== */
.b-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.b-filter{
  font:inherit;font-size:14.5px;font-weight:500;color:var(--body);
  padding:10px 20px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--rule);
  transition:background .3s,color .3s,border-color .3s;
}
.b-filter:hover{border-color:var(--ink);color:var(--ink)}
.b-filter.is-on{background:var(--green);border-color:var(--green);color:#fff}
[data-cat].is-hidden{display:none !important}

/* ---- article shell: #dc-root / .sc-host had no rules at all ---- */
#dc-root{padding-block:clamp(48px,7vh,96px)}
#dc-root > .sc-host{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
#dc-root .sc-host > div{max-width:100% !important}
/* ---- TQ-FORMS ---- */
input[name="tq_hp_confirm"]{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
form.b-stack{gap:20px}
form label{display:block;font-size:.85rem;letter-spacing:.02em;color:var(--muted);margin-bottom:8px}
form input,form select,form textarea{width:100%;font-family:inherit;font-size:1rem;line-height:1.5;color:var(--ink);background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:13px 16px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
form textarea{min-height:160px;resize:vertical}
form input:hover,form select:hover,form textarea:hover{border-color:var(--rule-green)}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-wash-2)}
form button[type=submit]{align-self:flex-start;width:auto;background:var(--green);color:#fff;border:0;border-radius:999px;padding:15px 36px;font-size:1rem;font-weight:600;letter-spacing:.01em;cursor:pointer;transition:background .18s var(--ease)}
form button[type=submit]:hover{background:var(--green-deep)}

/* --- mobile QA fixes (fix pass) --- */
/* Decorative hero canvas re-centred on top of the H1 at phone widths, cutting
   through the headline. Kept, but dimmed so the copy reads first. */
@media (max-width:860px){
  #hero-canvas{opacity:.30}
  .hero-orbs{opacity:.45}
}
/* Touch targets: language switcher measured 40x40, .btn-sm 38-40. Min is 48. */
.bn__lang,.bn__lang a,a.bn__lang{min-width:48px;min-height:48px;
  display:inline-flex;align-items:center;justify-content:center}
.b-btn--sm,.btn-sm{min-height:48px;display:inline-flex;align-items:center}