/* ============================================================
   Atâa — component styles.
   Colours, type and spacing come from theme.json as
   --wp--preset--* variables. Nothing here redefines them;
   this file only maps them onto components.
   ============================================================ */

:root{
  --ataa-green:      var(--wp--preset--color--green);
  --ataa-green-deep: var(--wp--preset--color--green-deep);
  --ataa-saffron:    var(--wp--preset--color--saffron);
  --ataa-sand:       var(--wp--preset--color--sand);

  /* semantic roles — these are what components consume */
  --bg:        var(--wp--preset--color--paper);
  --surface:   var(--wp--preset--color--white);
  --band:      var(--ataa-sand);
  --band-ink:  var(--ataa-green-deep);
  --fg:        var(--wp--preset--color--ink);
  --fg-soft:   var(--wp--preset--color--ink-soft);
  --fg-faint:  var(--wp--preset--color--ink-faint);
  --rule:      var(--wp--preset--color--rule);
  --rule-strong: var(--ataa-green);
  --accent:      var(--ataa-green);
  --accent-ink:  var(--wp--preset--color--white);
  --deep:      var(--ataa-green-deep);
  --deep-fg:   #E7EFEA;
  --deep-soft: #A9C2B7;

  --f-display: var(--wp--preset--font-family--display);
  --f-body:    var(--wp--preset--font-family--body);
  --f-ar:      var(--wp--preset--font-family--arabic);

  --shell: min(1240px, 92vw);
  --header-h: 84px;
  --sec-pad: 6.5rem;   /* vertical rhythm of a full section */
}

/* Dark mode: only the role tokens are redefined, never a component colour.
   Bare :root above holds the complete light set. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#08150F; --surface:#0F231B; --band:#0F231B; --band-ink:#EDE4D2;
    --fg:#EAF2ED; --fg-soft:#A9C2B7; --fg-faint:#7D958A;
    --rule:#22392F; --rule-strong:#3FA07C; --accent:#3FA07C; --accent-ink:#04241A;
    --deep:#04241A;
  }
}
:root[data-theme="dark"]{
  --bg:#08150F; --surface:#0F231B; --band:#0F231B; --band-ink:#EDE4D2;
  --fg:#EAF2ED; --fg-soft:#A9C2B7; --fg-faint:#7D958A;
  --rule:#22392F; --rule-strong:#3FA07C; --accent:#3FA07C; --accent-ink:#04241A;
  --deep:#04241A;
}

body{ background:var(--bg); color:var(--fg); }
/* a class-level display always beats the user agent's [hidden] rule, so any
   element the theme hides with the attribute needs this to actually collapse */
[hidden]{ display:none !important; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }
.ataa-shell{ width:var(--shell); margin-inline:auto; }

/* Sections own their vertical rhythm (padding), so the root blockGap between
   top-level blocks would double it. Post content keeps its gaps. */
.wp-site-blocks > * + *,
.wp-site-blocks > main > * + *,
.wp-site-blocks > .wp-block-group > * + *{ margin-block-start:0; }

/* ── the hairline label system (echoes the single-stroke logo) ───────── */
.ataa-eyebrow{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1rem;
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--rule-strong);
  margin:0 0 2.5rem;
}
.ataa-eyebrow::after{ content:""; height:1px; background:var(--rule-strong); opacity:.45; }

/* ── header ─────────────────────────────────────────────────────────────
   One flex row, one baseline. Every item is a direct child of .ataa-bar or
   of .ataa-bar-end, both centred, so nothing can drift vertically. */
.ataa-header{
  position:sticky; top:0; z-index:50;
  background:var(--bg); border-bottom:1px solid var(--rule);
}
.ataa-bar{
  display:flex; align-items:center; flex-wrap:nowrap; gap:1.25rem;
  min-height:var(--header-h);
}
.ataa-brand{
  flex:0 0 auto; display:flex; align-items:center;
  color:var(--accent); text-decoration:none; line-height:0;
}
/* The lockup is a mask, so one file takes the theme colour instead of shipping
   one image per colourway. The bar uses a horizontal composition of the V2
   artwork — pictogram left, name right — which reads at a smaller height than
   the stacked original and lets the bar sit at 88px instead of 116px. */
.ataa-logo{
  display:block; background-color:currentColor; flex:0 0 auto;
  -webkit-mask:var(--ataa-logo-h-src) no-repeat left center/contain;
          mask:var(--ataa-logo-h-src) no-repeat left center/contain;
}

.ataa-primary-nav{ margin-inline-start:auto; }
.ataa-primary-nav ul{
  display:flex; align-items:center; flex-wrap:nowrap; gap:1.35rem;
  list-style:none; margin:0; padding:0;
  font-family:var(--f-body); font-size:.94rem; font-weight:500;
}
.ataa-primary-nav li{ display:flex; }
.ataa-primary-nav a{
  display:block; white-space:nowrap; text-decoration:none; color:var(--fg-soft);
  padding:.4rem 0; border-bottom:1px solid transparent; line-height:1.3;
  transition:color .18s, border-color .18s;
}
.ataa-primary-nav a:hover{ color:var(--fg); border-bottom-color:var(--rule-strong); }
.ataa-primary-nav .is-current > a,
.ataa-primary-nav .current-menu-item > a,
.ataa-primary-nav .current_page_item > a,
.ataa-primary-nav .current-menu-ancestor > a{ color:var(--fg); border-bottom-color:var(--rule-strong); }
.ataa-primary-nav li{ list-style:none; }

/* the right-hand cluster: social · rule · languages · call to action */
.ataa-bar-end{ display:flex; align-items:center; gap:.8rem; flex:0 0 auto; }
.ataa-bar-rule{
  width:1px; height:26px; background:var(--rule); flex:0 0 auto;
}

.ataa-social{ display:flex; align-items:center; gap:.4rem; }
.ataa-social a{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid var(--rule); border-radius:2px;
  color:var(--fg-faint); transition:.2s;
}
.ataa-social a:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.ataa-social svg{ width:15px; height:15px; fill:currentColor; display:block; }

/* language switcher */
.ataa-langs{ display:flex; align-items:center; gap:.25rem; }
.ataa-langs a, .ataa-langs span{
  display:grid; place-items:center; min-width:30px; height:34px;
  font-family:var(--f-display); font-size:.72rem; font-weight:600; letter-spacing:.04em;
  text-decoration:none; border:1px solid var(--rule); color:var(--fg-faint);
  border-radius:2px; transition:.18s; padding:0 .3rem;
}
.ataa-langs a:hover{ color:var(--fg); border-color:var(--rule-strong); }
.ataa-langs .is-current{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }

/* buttons — theme.json styles core buttons; these are the theme's own variants */
.ataa-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:600; font-size:.8rem;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.85rem 1.5rem; border:1px solid var(--accent);
  background:var(--accent); color:var(--accent-ink); border-radius:2px; transition:.2s;
}
.ataa-btn:hover{ background:transparent; color:var(--accent); }
.ataa-btn--bar{ height:34px; padding:0 .95rem; font-size:.74rem; letter-spacing:.06em; }
.ataa-btn--ghost{ background:transparent; color:var(--fg); border-color:var(--rule-strong); }
.ataa-btn--ghost:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.ataa-btn--onphoto{ background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.ataa-btn--onphoto:hover{ background:#fff; border-color:#fff; color:var(--ataa-green-deep); }
/* ── mobile menu ─────────────────────────────────────────────────────── */
.ataa-burger{
  display:none; width:44px; height:36px; padding:0; cursor:pointer;
  background:none; border:1px solid var(--rule); border-radius:2px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  flex:0 0 auto; transition:border-color .2s;
}
.ataa-burger:hover{ border-color:var(--rule-strong); }
.ataa-burger span{
  display:block; width:18px; height:1.5px; background:var(--fg);
  transition:transform .25s ease, opacity .2s ease;
}
.ataa-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.ataa-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.ataa-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.ataa-menu{
  position:fixed; inset:var(--header-h) 0 0 0; z-index:49;
  background:var(--deep); color:var(--deep-fg);
  overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .25s ease;
}
.ataa-menu[hidden]{ display:none; }
.ataa-menu.is-open{ opacity:1; }
.ataa-menu .ataa-shell{
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:100%; padding:2.5rem 0 3rem;
}
.ataa-menu-list{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.ataa-menu-list li{ list-style:none; }
.ataa-menu-list a{
  display:block; padding:.7rem 0; text-decoration:none; color:var(--deep-fg);
  font-family:var(--f-display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.7rem, 8vw, 2.4rem); line-height:1.2;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:color .18s, padding-inline-start .25s ease;
}
.ataa-menu-list a:hover,
.ataa-menu-list a:focus-visible{ color:var(--ataa-saffron); padding-inline-start:.6rem; }
.ataa-menu-foot{
  margin-top:3rem; display:flex; flex-direction:column;
  align-items:flex-start; gap:1.6rem;
}
.ataa-menu-foot .ataa-social a{
  border-color:rgba(255,255,255,.26); color:var(--deep-soft);
  width:42px; height:42px;
}
.ataa-menu-foot .ataa-social a:hover{ background:#fff; border-color:#fff; color:var(--ataa-green-deep); }
.ataa-menu-foot .ataa-social svg{ width:18px; height:18px; }
/* the page behind must not scroll while the panel is open */
body.ataa-menu-open{ overflow:hidden; }

/* ── hero ───────────────────────────────────────────────────────────── */
.ataa-hero{ position:relative; isolation:isolate; color:#fff; }
.ataa-hero > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 62%; z-index:-2;
}
.ataa-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(102deg, rgba(4,53,42,.95) 0%, rgba(4,53,42,.86) 46%, rgba(4,53,42,.46) 100%);
}
.ataa-hero .ataa-shell{ padding:8.5rem 0 5rem; }
.ataa-hero-place{
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ataa-saffron);
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.6rem;
}
.ataa-hero-place::before{ content:""; width:34px; height:1px; background:var(--ataa-saffron); }
.ataa-hero h1{ max-width:15ch; margin:0 0 1.8rem; color:#fff; }
.ataa-hero h1 em{ font-style:normal; color:var(--ataa-saffron); }
.ataa-hero-lede{ max-width:48ch; font-size:1.12rem; color:#DCEAE3; margin:0 0 2.6rem; }
.ataa-hero-cta{ display:flex; flex-wrap:wrap; gap:.9rem; }
.ataa-hero-ar{
  position:absolute; right:2vw; bottom:-1.5rem; z-index:-1;
  font-family:var(--f-ar); font-size:clamp(5rem,12vw,9rem); line-height:1; contain:paint;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.16);
  pointer-events:none; user-select:none;
}

/* ── hero slider ─────────────────────────────────────────────────────
   Slides are stacked in one grid cell rather than absolutely positioned:
   the hero then sizes itself to the tallest slide, with no fixed height. */
.ataa-hero-slides{ display:grid; }
.ataa-hero-slide{
  grid-area:1 / 1; position:relative; isolation:isolate;
  opacity:0; visibility:hidden; transition:opacity .8s ease, visibility .8s;
}
.ataa-hero-slide.is-active{ opacity:1; visibility:visible; }
.ataa-hero-slide > .ataa-hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 62%; z-index:-2;
}
.ataa-hero-slide::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(102deg, rgba(4,53,42,.95) 0%, rgba(4,53,42,.86) 46%, rgba(4,53,42,.46) 100%);
}
.ataa-hero-slide .ataa-shell{ padding:8.5rem 0 7rem; }

.ataa-hero-nav{
  position:absolute; z-index:2; right:max(4vw, calc((100% - var(--shell)) / 2));
  bottom:2.6rem; display:flex; align-items:center; gap:1.2rem;
}
.ataa-hero-nav .ataa-cbtn{ border-color:rgba(255,255,255,.5); color:#fff; }
.ataa-hero-nav .ataa-cbtn:hover{ background:#fff; border-color:#fff; color:var(--ataa-green-deep); }
/* segmented rail — one segment per slide, matching the carousel's rail */
.ataa-hero-rail{ display:flex; gap:.4rem; }
.ataa-hero-rail button{
  width:40px; height:2px; padding:0; border:0; cursor:pointer;
  background:rgba(255,255,255,.32); transition:background .3s;
}
.ataa-hero-rail button::before{
  content:""; display:block; height:14px; margin-top:-6px;  /* larger hit area */
}
.ataa-hero-rail button[aria-current="true"]{ background:var(--ataa-saffron); }
.ataa-hero-rail button:hover{ background:rgba(255,255,255,.7); }

@media (max-width:720px){
  .ataa-hero-slide .ataa-shell{ padding:5.5rem 0 6.5rem; }
  .ataa-hero-nav{ bottom:1.6rem; gap:.8rem; }
  .ataa-hero-nav .ataa-cbtn{ width:38px; height:38px; }
  .ataa-hero-rail button{ width:26px; }
}
/* each slide isolates its own stacking context, so the ambient mark needs to
   sit above the slide layer instead of behind it as in the static hero */
.ataa-hero--slider .ataa-hero-ar{ z-index:1; }

[dir="rtl"] .ataa-hero-nav{ right:auto; left:max(4vw, calc((100% - var(--shell)) / 2)); }

/* ── stats ──────────────────────────────────────────────────────────── */
.ataa-stats{ background:var(--deep); color:var(--deep-fg); }
.ataa-stats .ataa-shell{ display:grid; grid-template-columns:repeat(4,1fr); padding:3.2rem 0; }
.ataa-stat{ padding-inline:1.5rem; border-left:1px solid rgba(255,255,255,.14); }
.ataa-stat:first-child{ padding-left:0; border-left:0; }
.ataa-stat > * + *{ margin-block-start:0; }
.ataa-stat-n{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.6rem,4.6vw,3.5rem); line-height:1; letter-spacing:-.03em;
  color:var(--ataa-saffron); font-variant-numeric:tabular-nums; margin:0;
}
.ataa-stat-l{
  margin:.7rem 0 0; font-family:var(--f-display); font-size:.72rem;
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.ataa-stat-s{ margin:0; font-size:.86rem; color:var(--deep-soft); }

/* ── sections ───────────────────────────────────────────────────────── */
.ataa-sec{ padding:var(--sec-pad) 0; }
/* the display scale belongs to the hero; an inner-page H1 sits in a narrower
   column and needs the heading scale instead */
.ataa-sec h1{ font-size:clamp(2rem, 4vw, 3.2rem); }
.ataa-sec--band{ background:var(--band); color:var(--band-ink); }
.ataa-sec--band .ataa-eyebrow{ color:var(--band-ink); }
.ataa-sec--band .ataa-eyebrow::after{ background:var(--band-ink); }
.ataa-grid2{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:start;
}
.ataa-prose p{ max-width:64ch; color:var(--fg-soft); margin:0 0 1.1rem; }
.ataa-prose p:last-child{ margin-bottom:0; }
.ataa-sec--band .ataa-prose p{ color:color-mix(in srgb, var(--band-ink) 78%, transparent); }

/* ── what we do ─────────────────────────────────────────────────────── */
.ataa-domains{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--rule); }
.ataa-domain{ padding:2.2rem 1.6rem 2.4rem; border-right:1px solid var(--rule); position:relative; }
.ataa-domain:last-child{ border-right:0; }
.ataa-domain::before{
  content:""; position:absolute; top:-1px; left:0; width:0; height:2px;
  background:var(--rule-strong); transition:width .35s ease;
}
.ataa-domain:hover::before{ width:100%; }
.ataa-domain h3{ margin:0 0 .8rem; font-size:1.12rem; }
.ataa-domain p{ margin:0; font-size:.94rem; color:var(--fg-soft); }
.ataa-domain .ataa-tag{
  display:block; font-family:var(--f-display); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--fg-faint); margin-bottom:1.1rem;
}
.ataa-sec--band .ataa-domain .ataa-tag{ color:color-mix(in srgb, var(--band-ink) 62%, transparent); }
.ataa-sec--band .ataa-domains,
.ataa-sec--band .ataa-domain{ border-color:color-mix(in srgb, var(--band-ink) 22%, transparent); }

/* ── objectives ───────────────────────────────────────────────────────
   A printed-table matrix rather than sparse full-width rows: continuous
   hairlines on both axes give the six commitments equal weight and close
   the empty gutter the previous list left in the middle. Still no numbers
   — they are parallel, not a sequence. */
.ataa-matrix{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  border-top:1px solid var(--rule); border-left:1px solid var(--rule);
}
.ataa-cell{
  position:relative; padding:2.5rem 2.2rem 2.8rem;
  border-right:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.ataa-cell::before{
  content:""; display:block; width:14px; height:14px;
  border:1.5px solid var(--rule-strong); border-radius:1px;
  margin-bottom:1.4rem; transition:background .35s ease, transform .35s ease;
}
.ataa-cell:hover::before{ background:var(--rule-strong); transform:rotate(45deg); }
.ataa-cell h3,
.ataa-cell h2{
  margin:0 0 .9rem; font-size:1.3rem; letter-spacing:-.015em;
  font-family:var(--f-display); font-weight:800; line-height:1.15;
}
.ataa-cell p{ margin:0; color:var(--fg-soft); font-size:.97rem; max-width:42ch; }
/* the matrix reads as one printed block, so the outer edges stay open */
.ataa-matrix{ border-left:0; }
.ataa-cell:nth-child(3n){ border-right:0; }

@media (max-width:1000px){
  .ataa-matrix{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ataa-cell:nth-child(3n){ border-right:1px solid var(--rule); }
  .ataa-cell:nth-child(2n){ border-right:0; }
}
@media (max-width:720px){
  .ataa-matrix{ grid-template-columns:1fr; }
  .ataa-cell{ padding:2rem 0 2.2rem; border-right:0 !important; }
}

/* ── content lists used across the pages ────────────────────────────── */
.ataa-list{ list-style:none; padding:0; margin:0; display:grid; gap:.9rem; }
.ataa-list li{ position:relative; padding-left:1.7rem; color:var(--fg-soft); max-width:64ch; }
.ataa-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:9px; height:9px; border:1px solid var(--rule-strong); border-radius:1px;
}
.ataa-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,5vw,4rem); }
.ataa-block{ padding-top:1.9rem; border-top:1px solid var(--rule); }
.ataa-block h2,
.ataa-block h3{
  margin:0 0 1.1rem; font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rule-strong); font-family:var(--f-display);
}
.ataa-contact-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule); margin-top:2.5rem;
}
.ataa-contact-item{ padding:2.2rem 1.8rem 2.4rem; border-right:1px solid var(--rule); }
.ataa-contact-item:last-child{ border-right:0; }
.ataa-contact-item:first-child{ padding-left:0; }
.ataa-contact-item h3{
  margin:0 0 .8rem; font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-faint); font-family:var(--f-display);
}
.ataa-contact-item p{ margin:0; font-size:1.05rem; }
.ataa-contact-item a{ color:var(--fg); text-decoration:none; border-bottom:1px solid var(--rule-strong); }
.ataa-contact-item a:hover{ color:var(--rule-strong); }

/* ── block-editor plumbing ──────────────────────────────────────────────
   Core group blocks apply blockGap between children. These components set
   their own vertical rhythm, so the inherited gap is reset per component. */
.ataa-cell > * + *,
.ataa-domain > * + *,
.ataa-way > * + *,
.ataa-contact-item > * + *{ margin-block-start:.85rem; }
.ataa-prose > * + *{ margin-block-start:1.1rem; }
.ataa-block > * + *{ margin-block-start:1.1rem; }
.ataa-caption{
  margin-top:.8rem !important; font-size:.82rem; color:var(--fg-faint);
  font-family:var(--f-display); letter-spacing:.04em;
}
/* a section that continues the one above it, on the same background */
.ataa-sec--tight{ padding-top:0; }
/* …but a section that paints its own background keeps its top padding, or the
   content sits flush against the edge of the colour band */
.ataa-sec--tight.ataa-project,
.ataa-sec--tight.ataa-sec--band,
.ataa-sec--tight.ataa-support{ padding-top:var(--sec-pad); }

/* core buttons, aligned with the theme's own button variants */
.wp-block-buttons{ gap:.9rem; }
.wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent; color:var(--fg); border-color:var(--rule-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
}
.ataa-project .wp-block-button.is-style-outline .wp-block-button__link{
  color:#fff; border-color:rgba(255,255,255,.55);
}
.ataa-project .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:#fff; color:var(--ataa-green-deep); border-color:#fff;
}

/* lists and block titles inside the dark project section */
.ataa-project .ataa-list li{ color:var(--deep-fg); }
.ataa-project .ataa-list li strong{ color:var(--ataa-saffron); font-weight:600; }
.ataa-project .ataa-list li::before{ border-color:var(--ataa-saffron); }
.ataa-project .ataa-block{ border-color:rgba(255,255,255,.2); }
.ataa-project .ataa-block h2,
.ataa-project .ataa-block h3{ color:var(--ataa-saffron); }

@media (max-width:900px){
  .ataa-cols{ grid-template-columns:1fr; }
  .ataa-contact-grid{ grid-template-columns:1fr; }
  .ataa-contact-item{ border-right:0; border-bottom:1px solid var(--rule); padding-left:0; }
  .ataa-contact-item:last-child{ border-bottom:0; }
}

/* ── project ────────────────────────────────────────────────────────── */
.ataa-project{ background:var(--deep); color:var(--deep-fg); }
.ataa-project .ataa-eyebrow{ color:var(--ataa-saffron); }
.ataa-project .ataa-eyebrow::after{ background:var(--ataa-saffron); }
.ataa-project h2{ margin:0 0 1.4rem; }
.ataa-project .ataa-prose p{ color:var(--deep-soft); }
.ataa-spec{ list-style:none; padding:0; margin:2.2rem 0 0; border-top:1px solid rgba(255,255,255,.16); }
.ataa-spec li{
  display:grid; grid-template-columns:auto 1fr; gap:1.5rem;
  padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.16); font-size:.95rem;
}
.ataa-spec .k{
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ataa-saffron); align-self:center;
}
.ataa-spec .v{ text-align:right; font-variant-numeric:tabular-nums; color:var(--deep-fg); }
.ataa-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.ataa-chip{
  font-size:.85rem; padding:.4rem .85rem;
  border:1px solid rgba(255,255,255,.28); border-radius:2px; color:var(--deep-soft);
}
.ataa-project-media{ display:grid; gap:1rem; }
.ataa-project-media img{ width:100%; height:100%; object-fit:cover; }
.ataa-project-media .ataa-stack{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ── activities carousel ────────────────────────────────────────────── */
.ataa-sec-head{ display:flex; align-items:center; gap:1.5rem; margin-bottom:2.5rem; }
.ataa-sec-head .ataa-eyebrow{ flex:1; margin-bottom:0; }
.ataa-cnav{ display:flex; gap:.5rem; flex:0 0 auto; }
.ataa-cbtn{
  width:44px; height:44px; display:grid; place-items:center; cursor:pointer;
  background:none; border:1px solid var(--rule-strong); border-radius:2px;
  color:var(--rule-strong); transition:background .2s, color .2s, opacity .2s;
}
.ataa-cbtn svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.ataa-cbtn:hover:not([aria-disabled="true"]){
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.ataa-cbtn[aria-disabled="true"]{ opacity:.3; cursor:default; }

.ataa-carousel{ margin-top:1rem; }
.ataa-track{
  display:flex; gap:2rem; margin:0; padding:0; list-style:none;
  /* overflow-y must be explicit: setting only overflow-x makes the other axis
     compute to auto, and the track then swallows the page's wheel scroll */
  overflow-x:auto; overflow-y:hidden;
  /* proximity, not mandatory: the last slide's start offset sits past the
     maximum scroll, and mandatory snapping force-jumps to the end */
  scroll-snap-type:x proximity; scroll-behavior:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.ataa-track::-webkit-scrollbar{ display:none; }
.ataa-slide{ flex:0 0 clamp(280px, 58%, 620px); scroll-snap-align:start; }
.ataa-act{ display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }
.ataa-act-media{ overflow:hidden; background:var(--rule); }
.ataa-act-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .5s; }
.ataa-act:hover .ataa-act-media img{ transform:scale(1.03); }
.ataa-act-meta{
  display:flex; align-items:center; gap:.7rem; margin:1.3rem 0 .8rem;
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint);
}
.ataa-act-meta time{ color:var(--rule-strong); font-variant-numeric:tabular-nums; }
.ataa-act-meta .cat::before{ content:"\00b7"; margin-right:.7rem; }
.ataa-act h3{ margin:0 0 .8rem; font-size:clamp(1.25rem,2.2vw,1.6rem); }
.ataa-act p{ margin:0; color:var(--fg-soft); }
.ataa-act .more{
  margin-top:auto; padding-top:1.2rem;
  font-family:var(--f-display); font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--rule-strong);
}
.ataa-act .more::after{ content:" \2192"; }
.ataa-rail{ position:relative; height:2px; background:var(--rule); margin-top:2.6rem; }
.ataa-rail-fill{
  position:absolute; inset:0 auto 0 0; background:var(--rule-strong);
  width:33%; transform-origin:left; transition:width .3s ease, transform .3s ease;
}
.ataa-sec-foot{ margin-top:2.6rem; }
.ataa-empty{ color:var(--fg-faint); font-style:italic; }

/* ── support (the ambient عطاء mark lives here) ─────────────────────── */
.ataa-support{
  position:relative; overflow:hidden; background:var(--surface);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.ataa-support-ar{
  position:absolute; top:50%; left:-3vw; transform:translateY(-50%);
  font-family:var(--f-ar); font-size:clamp(11rem,26vw,20rem); line-height:.8; contain:paint;
  color:transparent; -webkit-text-stroke:1.5px var(--rule-strong); opacity:.10;
  pointer-events:none; user-select:none; z-index:0;
}
.ataa-support .ataa-shell{ position:relative; z-index:1; }
.ataa-ways{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rule); margin-top:2.5rem; }
.ataa-way{ padding:2.2rem 1.8rem 2.4rem; border-right:1px solid var(--rule); }
.ataa-way:last-child{ border-right:0; }
.ataa-way:first-child{ padding-left:0; }
.ataa-way h3{ margin:0 0 .8rem; font-size:1.1rem; }
.ataa-way p{ margin:0; font-size:.94rem; color:var(--fg-soft); }
.ataa-way .detail{
  margin-top:1.1rem; font-family:var(--f-display); font-size:.8rem;
  letter-spacing:.03em; color:var(--fg); font-variant-numeric:tabular-nums;
}
.ataa-way .detail span{ color:var(--fg-faint); }

/* ── footer ─────────────────────────────────────────────────────────── */
.ataa-footer{ background:var(--deep); color:var(--deep-fg); padding:5rem 0 2.2rem; }
.ataa-foot-top{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:2.5rem;
  padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,.14);
}
.ataa-footer .ataa-logo{
  color:#fff;
  -webkit-mask-image:var(--ataa-logo-src);
          mask-image:var(--ataa-logo-src);
}
.ataa-footer .ataa-social a{ width:38px; height:38px; border-color:rgba(255,255,255,.26); color:var(--deep-soft); }
.ataa-footer .ataa-social a:hover{ background:#fff; border-color:#fff; color:var(--ataa-green-deep); }
.ataa-footer .ataa-social svg{ width:17px; height:17px; }
.ataa-footer h2, .ataa-footer h4{
  font-family:var(--f-display); font-size:.72rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ataa-saffron); margin:0 0 1.2rem;
}
.ataa-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; font-size:.95rem; }
.ataa-footer a{ color:var(--deep-soft); text-decoration:none; transition:color .18s; }
.ataa-footer a:hover{ color:#fff; }
.ataa-foot-blurb{ margin-top:1.4rem; font-size:.95rem; color:var(--deep-soft); max-width:34ch; }
.ataa-foot-bottom{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center;
  padding-top:1.8rem; font-size:.85rem; color:var(--deep-soft);
}
/* footer social styling lives with the header rules, scoped to .ataa-footer */

/* ── contact form ─────────────────────────────────────────────────────── */
.ataa-form-wrap{ margin-top:3rem; }
.ataa-form{ display:grid; gap:1.4rem; max-width:46rem; }
.ataa-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.ataa-field{ display:grid; gap:.5rem; margin:0; }
.ataa-field label{
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint);
}
.ataa-field label span{ color:var(--rule-strong); }
.ataa-field input,
.ataa-field textarea{
  font-family:var(--f-body); font-size:1rem; color:var(--fg);
  background:var(--surface); border:1px solid var(--rule); border-radius:2px;
  padding:.85rem 1rem; width:100%; transition:border-color .18s;
}
.ataa-field textarea{ resize:vertical; min-height:9rem; line-height:1.6; }
.ataa-field input:focus,
.ataa-field textarea:focus{ border-color:var(--rule-strong); outline:none; }
.ataa-field input:focus-visible,
.ataa-field textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.ataa-form-foot{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin:0;
}
.ataa-form-foot button{ cursor:pointer; font-family:var(--f-display); }
.ataa-required{ font-size:.85rem; color:var(--fg-faint); }
/* the honeypot: off-screen rather than display:none, which some bots skip */
.ataa-hp{
  position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden; margin:0;
}
.ataa-notice{
  margin:0 0 1.6rem; padding:1rem 1.2rem; border-radius:2px;
  border-left:3px solid var(--rule-strong); background:var(--surface);
  font-size:.98rem;
}
[dir="rtl"] .ataa-notice{ border-left:0; border-right:3px solid var(--rule-strong); }
.ataa-notice--ok{ border-color:var(--rule-strong); color:var(--fg); }
.ataa-notice--err{ border-color:#B4442B; color:var(--fg); }

/* ── map ──────────────────────────────────────────────────────────────── */
.ataa-map{ margin-top:3rem; }
.ataa-map iframe{
  display:block; width:100%; height:clamp(280px, 42vw, 460px);
  border:1px solid var(--rule); border-radius:2px; background:var(--rule);
}
.ataa-map-link{
  margin:.7rem 0 0; font-family:var(--f-display); font-size:.74rem;
  font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.ataa-map-link a{ color:var(--rule-strong); text-decoration:none; }
.ataa-map-link a:hover{ text-decoration:underline; }

@media (max-width:720px){
  .ataa-field-row{ grid-template-columns:1fr; }
}

/* ── editorial pages, single posts, archives ────────────────────────── */
.ataa-page-head{ padding:5rem 0 0; }
.ataa-entry{ padding:3rem 0 6.5rem; }
.ataa-entry .wp-block-post-content > *{ max-width:64ch; }
.ataa-entry .wp-block-post-content > .alignwide,
.ataa-entry .wp-block-post-content > figure{ max-width:none; }
.ataa-meta{
  display:flex; gap:.7rem; align-items:center; margin-bottom:1rem;
  font-family:var(--f-display); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-faint);
}
.ataa-archive-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; }

/* ── motion ─────────────────────────────────────────────────────────── */
.ataa-reveal{ opacity:0; transform:translateY(10px); transition:opacity .7s ease, transform .7s ease; }
.ataa-reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .ataa-reveal{ opacity:1; transform:none; }
}

/* ── Arabic typography ───────────────────────────────────────────────
   Karla and Archivo carry no Arabic glyphs: without this the Arabic build
   falls back to whatever the system supplies, and the page loses its voice.
   Noto Kufi is put first in the stack for Arabic only, so the Latin build
   is untouched. */
/* WordPress applies the body font straight from its own preset variable, so
   overriding --f-body alone has no effect: the preset itself must be redefined. */
html[lang^="ar"]{
  --wp--preset--font-family--body: "Noto Kufi Arabic", Karla, "Helvetica Neue", Arial, sans-serif;
  --wp--preset--font-family--display: "Noto Kufi Arabic", Archivo, "Helvetica Neue", Arial, sans-serif;
  --f-body: var(--wp--preset--font-family--body);
  --f-display: var(--wp--preset--font-family--display);
}
/* Kufi runs larger and tighter than Karla at the same size */
html[lang^="ar"] body{ font-size:16px; line-height:1.9; }
html[lang^="ar"] h1,
html[lang^="ar"] h2,
html[lang^="ar"] h3{ letter-spacing:0; line-height:1.35; font-weight:700; }
html[lang^="ar"] .ataa-eyebrow,
html[lang^="ar"] .ataa-hero-place,
html[lang^="ar"] .ataa-stat-l,
html[lang^="ar"] .ataa-act-meta,
html[lang^="ar"] .ataa-block h2,
html[lang^="ar"] .ataa-block h3,
html[lang^="ar"] .ataa-btn{ letter-spacing:0; text-transform:none; }
/* digits stay Latin in a French/Arabic mixed context unless asked otherwise */
html[lang^="ar"] .ataa-stat-n{ font-feature-settings:"lnum"; }

/* ── RTL (Arabic) ───────────────────────────────────────────────────── */
/* Arabic reads right to left, so the lockup puts the pictogram last. It is a
   different composition, never a mirrored one — flipping the عطاء calligraphy
   would be wrong. */
[dir="rtl"] .ataa-logo{
  -webkit-mask-image:var(--ataa-logo-h-rtl);
          mask-image:var(--ataa-logo-h-rtl);
  -webkit-mask-position:right center;
          mask-position:right center;
}
[dir="rtl"] .ataa-primary-nav{ margin-inline-start:auto; }
[dir="rtl"] .ataa-nav{ margin-left:0; margin-right:auto; }
[dir="rtl"] .ataa-stat{ border-left:0; border-right:1px solid rgba(255,255,255,.14); padding-inline:1.5rem; }
[dir="rtl"] .ataa-stat:first-child{ padding-right:0; border-right:0; }
[dir="rtl"] .ataa-domain{ border-right:0; border-left:1px solid var(--rule); }
[dir="rtl"] .ataa-domain:last-child{ border-left:0; }
[dir="rtl"] .ataa-way{ border-right:0; border-left:1px solid var(--rule); }
[dir="rtl"] .ataa-way:last-child{ border-left:0; }
[dir="rtl"] .ataa-way:first-child{ padding-left:1.8rem; padding-right:0; }
[dir="rtl"] .ataa-spec .v{ text-align:left; }
[dir="rtl"] .ataa-rail-fill{ inset:0 0 0 auto; transform-origin:right; }
[dir="rtl"] .ataa-support-ar{ left:auto; right:-3vw; }
[dir="rtl"] .ataa-hero-ar{ right:auto; left:2vw; }
[dir="rtl"] .ataa-act .more::after{ content:" \2190"; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .ataa-primary-nav{ display:none; }
  .ataa-social--bar{ display:none; }
  .ataa-bar-rule{ display:none; }
  .ataa-burger{ display:flex; }
  .ataa-domains, .ataa-ways, .ataa-archive-grid{ grid-template-columns:1fr 1fr; }
  .ataa-domain:nth-child(2n), .ataa-way:nth-child(2n){ border-right:0; }
  .ataa-domain, .ataa-way{ border-bottom:1px solid var(--rule); }
  .ataa-way:first-child{ padding-left:1.8rem; }
  .ataa-foot-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  :root{ --header-h:72px; }
  .ataa-logo,
  [dir="rtl"] .ataa-logo{
    -webkit-mask-image:var(--ataa-logo-mark-src);
            mask-image:var(--ataa-logo-mark-src);
  }
  .ataa-bar{ min-height:72px; }
  .ataa-btn--bar{ display:none; }
  :root{ --sec-pad:4.2rem; }
  .ataa-hero .ataa-shell{ padding:5.5rem 0 4rem; }
  .ataa-grid2, .ataa-obj{ grid-template-columns:1fr; }
  .ataa-stats .ataa-shell{ grid-template-columns:1fr 1fr; gap:2rem 0; }
  .ataa-stat:nth-child(odd){ padding-left:0; border-left:0; }
  .ataa-domains, .ataa-ways, .ataa-archive-grid{ grid-template-columns:1fr; }
  .ataa-domain, .ataa-way{ border-right:0; padding-left:0; padding-right:0; }
  .ataa-way:first-child{ padding-left:0; }
  .ataa-project-media .ataa-stack{ grid-template-columns:1fr; }
  .ataa-foot-top{ grid-template-columns:1fr; }
}