/* ============================================================
   ABOUT PAGE fragment — classes not covered by base style.css
   ============================================================ */

/* Direction helpers for page grids */
[dir="ltr"] .split{direction:ltr}
[dir="ltr"] .diff-grid{direction:ltr}
[dir="ltr"] .cta-inner{direction:ltr}
[dir="ltr"] .cmp th{text-align:left}
[dir="ltr"] .cmp td{text-align:left}

/* Hero (about variant — BEM __ classes, decorative circles) */
.hero-wrap::after,.hero-wrap::before{display:none}
.hero{background:linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%), url('/wp-content/uploads/2026/08/about.jpeg') right center/cover no-repeat;padding:72px 0 88px;position:relative;z-index:1}
.hero__inner{max-width:820px}
.hero__eyebrow{font-size:.7rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:18px;display:flex;align-items:center;gap:10px}
[dir="rtl"] .hero__eyebrow{font-family:'Rubik',sans-serif}
[dir="rtl"] .hero__eyebrow::before{content:"";display:block;width:28px;height:2px;background:rgba(255,255,255,.45)}
[dir="ltr"] .hero__eyebrow{font-family:'Inter',sans-serif}
[dir="ltr"] .hero__eyebrow::after{content:"";display:block;width:28px;height:2px;background:rgba(255,255,255,.45)}
.hero h1{font-size:clamp(2rem,3.8vw,2.9rem);font-weight:900;line-height:1.1;color:#fff;margin-bottom:18px}
[dir="ltr"] .hero h1 { line-height:1.35; }
.hero h1 .c{color:#fff}
.hero__sub2{font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:14px;line-height:1.4;max-width:640px}
.hero__sub{font-size:1.05rem;color:rgba(255,255,255,.85);max-width:640px;line-height:1.7}
.hero-stats{display:flex;gap:0;flex-wrap:wrap;margin-top:36px}
.hero-stat{padding:16px 28px;background:rgba(0,0,0,.18);border-right:1px solid rgba(255,255,255,.12);text-align:center}
[dir="ltr"] .hero-stat{border-right:none;border-left:1px solid rgba(255,255,255,.12)}
.hero-stat:last-child{border:none}
.hero-stat__n{font-size:1.8rem;font-weight:900;color:#fff;line-height:1}
.hero-stat__l{font-size:.74rem;color:rgba(255,255,255,.7);margin-top:4px;line-height:1.3}

/* Section variants / typography */
.sec--dark{background:transparent;color:#fff}
.sec--dark:has(.cta-inner){background:transparent;color:inherit}
[dir="rtl"] .label{font-family:'Rubik',sans-serif}
[dir="ltr"] .label{font-family:'Inter',sans-serif}
.sec--dark .label{color:rgba(255,255,255,.6)}
h2.title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;line-height:1.12;color:var(--navy);margin-bottom:14px}
.sec--dark h2.title{color:#fff}
.body-l{font-size:1rem;color:var(--grey);line-height:1.75;max-width:700px}
.sec--dark .body-l{color:rgba(255,255,255,.8)}

/* Who-we-are split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:40px}
.split p{font-size:.95rem;color:var(--grey);line-height:1.75;margin-bottom:14px}
.split-callout{background:var(--blue);color:#fff;padding:28px 28px 24px}
.split-callout__title{font-size:1rem;font-weight:900;margin-bottom:14px;color:#fff}
[dir="rtl"] .split-callout__title{font-family:'Rubik',sans-serif}
[dir="ltr"] .split-callout__title{font-family:'Inter',sans-serif}
.split-callout__list{list-style:none;display:flex;flex-direction:column;gap:8px}
.split-callout__list li{font-size:.88rem;color:rgba(255,255,255,.82);line-height:1.5;display:flex;gap:8px;align-items:flex-start}
.split-callout__list li::before{content:"✓";color:var(--teal);font-weight:900;flex-shrink:0}
.img-ph{height:240px;background:var(--grey-lt);display:flex;align-items:center;justify-content:center;color:#9aa1ad;font-size:.78rem;font-weight:700;margin-top:20px}
iframe.img-ph{width:100%;border:0;display:block}
iframe.img-ph--centered{max-width:600px;width:100%;aspect-ratio:16/9;height:auto;margin:36px auto 0;border-radius:10px}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* Why-different grid */
.diff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.diff-grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.diff-grid--4{grid-template-columns:1fr 1fr}}
.diff-card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:14px;padding:28px 24px;box-shadow:0 8px 24px -16px rgba(0,0,0,.2);transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease}
.diff-card:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(0,0,0,.28)}
.diff-ic{width:48px;height:48px;border-radius:8px;background:#ECEBFB;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.diff-ic svg{width:24px;height:24px;stroke:var(--blue);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.diff-h{font-size:.96rem;font-weight:700;color:var(--teal-d);margin-bottom:6px}
[dir="rtl"] .diff-h{font-family:'Rubik',sans-serif}
[dir="ltr"] .diff-h{font-family:'Inter',sans-serif}
.diff-p{font-size:.86rem;color:var(--grey);line-height:1.65}
@media(max-width:900px){.diff-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.diff-grid{grid-template-columns:1fr}}

/* Certification strip */
.cert-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
@media(max-width:900px){.cert-strip{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.cert-strip{grid-template-columns:1fr}}
.cert-badge{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:14px;padding:18px 14px;text-align:center;box-shadow:0 8px 24px -16px rgba(0,0,0,.2);transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease}
.cert-badge:hover{border-color:var(--navy);transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(0,0,0,.28)}
.cert-badge__n{font-size:.86rem;font-weight:900;color:var(--blue);display:block;margin-bottom:4px}
[dir="rtl"] .cert-badge__n{font-family:'Rubik',sans-serif}
[dir="ltr"] .cert-badge__n{font-family:'Inter',sans-serif}
.cert-badge__l{font-size:.73rem;color:var(--grey);line-height:1.35}

/* Comparison table */
.cmp-wrap{overflow-x:auto;margin-top:32px}
.cmp{width:100%;border-collapse:collapse;font-size:.88rem}
.cmp thead th{font-size:.7rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:13px 16px;text-align:right;border-bottom:2px solid #000}
[dir="rtl"] .cmp thead th{font-family:'Rubik',sans-serif}
[dir="ltr"] .cmp thead th{font-family:'Inter',sans-serif;text-align:left}
.cmp thead th:first-child{color:var(--grey);border-bottom-color:var(--line)}
.th-us{color:var(--teal-d)}.th-alt{color:var(--orange)}
.cmp td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.cmp td:first-child{font-weight:700;color:#000}
.cmp tr:last-child td{border-bottom:none}
.cmp tr:nth-child(even) td{background:var(--off)}
.good{color:var(--teal-d);font-weight:600}.good::before{content:"✓ "}
.bad{color:var(--orange)}.bad::before{content:"✗ "}

/* Contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
.contact-box{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:14px;padding:32px 32px;box-shadow:0 8px 24px -16px rgba(0,0,0,.2)}
.contact-box--blue{background:var(--blue)}
.contact-box__h{font-size:1.05rem;font-weight:900;color:var(--teal-d);margin-bottom:16px}
[dir="rtl"] .contact-box__h{font-family:'Rubik',sans-serif}
[dir="ltr"] .contact-box__h{font-family:'Inter',sans-serif}
.contact-box--blue .contact-box__h{color:#fff}
.contact-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:.9rem;color:var(--grey)}
.contact-item svg{width:18px;height:18px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}
.contact-item a{color:var(--grey);text-decoration:none}.contact-item a:hover{color:var(--teal-d)}
.form-note{font-size:.88rem;color:rgba(255,255,255,.8);margin-bottom:16px;line-height:1.6}
@media(max-width:700px){.contact-grid{grid-template-columns:1fr}}

/* Dark CTA */
.cta-inner{background:linear-gradient(120deg, var(--teal-d), var(--teal));border-radius:20px;padding:44px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-inner h2{font-size:clamp(1.4rem,2.8vw,2rem);font-weight:900;color:#fff;line-height:1.2;max-width:520px}
.cta-inner p{color:rgba(255,255,255,.75);margin-top:8px;font-size:.95rem}
@media(max-width:600px){.cta-inner{flex-direction:column;padding:32px 28px}}
.cta-btns{display:flex;gap:12px;flex-shrink:0;flex-wrap:wrap}

/* ============================================================
   HERO ARTWORK — wide screens
   The banner is about 3.4:1 and the artwork is 16:9, so `cover`
   scaled it up by width and cut 48% of its height, taking the
   top and bottom off the globe. Pinned to the left edge at
   `auto 100%` it fills the banner height exactly and never
   crops, at any width.
   The image is not the original: from x=1231 it cross-fades into
   its own edge column, smoothed vertically, then runs flat out
   to 5.5:1 — wide enough to span the banner up to a 2560px
   screen. That way the artwork meets the flat field with no seam
   and no second layer is needed.
   Left at natural scale on purpose: the globe is a circle and a
   horizontal stretch would read as an obvious ellipse.
   Wide screens only — below 1000px the globe would sit under the
   copy and wreck its contrast, so the rule above still applies.
   ============================================================ */
@media(min-width:1000px){
  .hero {
    background:
      linear-gradient(to right, rgba(8,20,28,0) 0%, rgba(8,20,28,.35) 45%, rgba(8,20,28,.75) 70%, rgba(8,20,28,.9) 100%),
      url('../../img/heroes/about-field.jpeg') left center / auto 100% no-repeat,
      rgb(1,25,62);
  }
}