/* =============================================================================
   DARUL QURAN HOUSTON — main.css
   The entire stylesheet. Tokens (contract §1 verbatim), fonts (§2), and every
   class in the dictionary (§5). Mobile-first. Only palette tokens for color
   (plus #FFF/cream/transparent and rgba() shadows/overlays, allowed here).
   WCAG AA. No horizontal scroll at 375px.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS (contract §1 — verbatim)
   -------------------------------------------------------------------------- */
:root{
  /* Brand — primary bronze (from logo calligraphy) */
  --color-primary:        #875E3E;
  --color-primary-light:  #A87A52;
  --color-primary-lighter:#F3EAE2;
  --color-primary-dark:   #5C3F27;

  /* Brand — secondary sand/gold */
  --color-secondary:        #C9A876;
  --color-secondary-light:  #DEC7A4;
  --color-secondary-lighter:#F8F1E6;
  --color-secondary-dark:   #9A7A48;
  --color-gold-text:        #6B4E26; /* AA-safe brown-gold for TEXT (>=4.5:1 on white) */

  /* Neutrals — warm-tinted */
  --color-white:    #FFFFFF;
  --color-off-white:#FCFAF7;
  --color-cream:    #F6F1E9;
  --color-gray-100: #F2F0EC;
  --color-gray-200: #E6E2DB;
  --color-gray-300: #D3CEC5;
  --color-gray-500: #8D877D;
  --color-gray-700: #4E4941;
  --color-gray-900: #221F1B;

  /* Semantic */
  --color-text:           #262220;
  --color-text-secondary: #4E4941;
  --color-text-muted:     #6C665D; /* AA-safe on white */
  --color-heading:        #5C3F27;
  --color-link:           var(--color-primary);
  --color-link-hover:     var(--color-primary-dark);
  --color-cta:            var(--color-primary);
  --color-cta-hover:      var(--color-primary-dark);
  --color-cta-text:       #FFFFFF;
  --color-accent:         var(--color-secondary);
  --color-border:         #E8E4DC;
  --color-success:        #1E7A4D;
  --color-error:          #B23A2E;
  --color-error-lighter:  #FBEDEB;

  /* Layout / motion tokens */
  --container:1200px; --container-narrow:880px;
  --radius-sm:8px; --radius:12px; --radius-lg:20px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.05),0 1px 2px rgba(0,0,0,.03);
  --shadow:0 4px 16px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04);
  --shadow-lg:0 18px 40px rgba(0,0,0,.10),0 8px 16px rgba(0,0,0,.05);
  --ease:cubic-bezier(.25,.1,.25,1);
  --t-fast:.2s var(--ease); --t:.3s var(--ease); --t-slow:.6s var(--ease);
  --space-section:clamp(3.5rem,7vw,6.5rem);
}

/* -----------------------------------------------------------------------------
   2. FONTS (§2 — self-hosted woff2 in ../fonts/, font-display: swap)
   -------------------------------------------------------------------------- */
@font-face{ font-family:"DM Sans"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"DM Sans"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2"); }
@font-face{ font-family:"DM Sans"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"DM Sans"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2"); }

@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); }
@font-face{ font-family:"Cormorant Garamond"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); }

@font-face{ font-family:"Amiri"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/amiri-arabic-400-normal.woff2") format("woff2"); }
@font-face{ font-family:"Amiri"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/amiri-arabic-700-normal.woff2") format("woff2"); }

/* -----------------------------------------------------------------------------
   3. RESET / BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:400;
  color:var(--color-text);
  line-height:1.7;
  background:var(--color-off-white);
  overflow-x:hidden; /* belt-and-braces: never horizontal scroll */
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video,iframe{ max-width:100%; }
img,video{ height:auto; display:block; }
a{ color:var(--color-link); text-decoration:none; transition:color var(--t-fast); }
a:hover{ color:var(--color-link-hover); }
ul,ol{ margin:0; padding:0; }
li{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; }
hr{ border:none; border-top:1px solid var(--color-border); margin:2rem 0; }
body.no-js :target{ scroll-margin-top:120px; } /* JS sets scroll-padding-top instead; avoid additive stacking */
::selection{ background:var(--color-secondary-light); color:var(--color-gray-900); }

/* Visible focus ring: darker sand on light surfaces, lighter sand on dark ones */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--color-secondary-dark);
  outline-offset:2px;
  border-radius:2px;
}
.section--dark :focus-visible,
.site-footer :focus-visible,
.top-bar :focus-visible,
.app-banner :focus-visible,
.page-hero :focus-visible,
.hero :focus-visible{
  outline-color:var(--color-secondary-light);
}

/* Body scroll lock while the mobile drawer is open (toggled by main.js) */
body.is-locked{ overflow:hidden; }

/* -----------------------------------------------------------------------------
   4. TYPOGRAPHY (§2)
   -------------------------------------------------------------------------- */
h1,h2,h3,.font-display{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-weight:700; color:var(--color-heading); line-height:1.15;
  letter-spacing:.2px; margin:0 0 .5em;
}
h4,h5,h6{
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:600; color:var(--color-heading); line-height:1.3; margin:0 0 .5em;
}
h1{ font-size:clamp(2.4rem,5vw,3.6rem); }
h2{ font-size:clamp(1.9rem,3.6vw,2.7rem); }
h3{ font-size:clamp(1.4rem,2.4vw,1.85rem); }
h4{ font-size:clamp(1.1rem,1.6vw,1.25rem); }
h5{ font-size:1.05rem; }
h6{ font-size:.95rem; }
p{ margin:0 0 1.1rem; }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:600; }
small{ font-size:.85rem; }
blockquote{
  margin:1.5rem 0; padding:1rem 1.5rem;
  border-left:4px solid var(--color-secondary);
  background:var(--color-secondary-lighter);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--color-text-secondary); font-style:italic;
}
blockquote cite{ display:block; margin-top:.5rem; font-style:normal; font-size:.9rem; color:var(--color-gold-text); font-weight:600; }

.text-arabic,.arabic{
  font-family:"Amiri","Noto Naskh Arabic",serif;
  direction:rtl; line-height:1.9;
  letter-spacing:normal; /* never track joined Arabic/Urdu script */
}
h2.text-arabic,h3.text-arabic{ color:var(--color-heading); }

.lead{ font-size:clamp(1.08rem,1.5vw,1.25rem); color:var(--color-text-secondary); line-height:1.75; }

/* -----------------------------------------------------------------------------
   5. LAYOUT — container / section / grid
   -------------------------------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.1rem,4vw,2rem); }
.container--narrow{ max-width:var(--container-narrow); }

.section{ padding-block:var(--space-section); position:relative; }
.section--cream{ background:var(--color-cream); }
.section--dark{ background:var(--color-primary-dark); color:var(--color-white); }
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--color-white); }
.section--dark p,.section--dark li{ color:rgba(255,255,255,.88); }
/* Plain links only — never override button text colors on dark sections */
.section--dark a:not(.btn):not(.app-stores__btn){ color:var(--color-secondary-light); }
.section--dark a:not(.btn):not(.app-stores__btn):hover{ color:var(--color-white); }
.section--tight{ padding-block:clamp(2rem,4vw,3.25rem); }

/* Patterned section — Islamic tile, decorative only */
.section--patterned::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("../images/patterns/islamic-pattern.svg");
  background-repeat:repeat; background-size:240px 240px;
  opacity:.05; pointer-events:none;
}
.section--dark.section--patterned::before{ opacity:.07; }
.section--patterned > *{ position:relative; z-index:1; }

.grid{ display:grid; grid-template-columns:1fr; gap:clamp(1.25rem,3vw,2rem); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }

/* -----------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:"DM Sans",system-ui,sans-serif; font-weight:600; font-size:1rem; line-height:1.2;
  padding:.8rem 1.6rem; min-height:48px;
  border-radius:var(--radius-pill); border:2px solid transparent;
  text-align:center; cursor:pointer; white-space:nowrap;
  -webkit-appearance:none; appearance:none;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:1.1em; height:1.1em; flex:none; }

.btn--primary{ background:var(--color-cta); color:var(--color-cta-text); border-color:var(--color-cta); }
.btn--primary:hover{ background:var(--color-cta-hover); border-color:var(--color-cta-hover); color:var(--color-cta-text); box-shadow:var(--shadow); }

.btn--secondary{ background:var(--color-secondary); color:var(--color-gray-900); border-color:var(--color-secondary); }
.btn--secondary:hover{ background:var(--color-secondary-light); border-color:var(--color-secondary-light); color:var(--color-gray-900); box-shadow:var(--shadow); } /* AA ~10:1 */

.btn--outline{ background:transparent; color:var(--color-primary); border-color:var(--color-primary); }
.btn--outline:hover{ background:var(--color-primary); color:var(--color-white); }

.btn--ghost-light{ background:transparent; color:var(--color-white); border-color:rgba(255,255,255,.65); }
.btn--ghost-light:hover{ background:var(--color-white); color:var(--color-primary-dark); border-color:var(--color-white); }

.btn--donate{ background:var(--color-secondary); color:var(--color-gray-900); border-color:var(--color-secondary); font-weight:700; }
.btn--donate:hover{ background:var(--color-secondary-light); border-color:var(--color-secondary-light); color:var(--color-gray-900); box-shadow:var(--shadow); } /* AA ~10:1 */

.btn--lg{ font-size:1.1rem; padding:1.05rem 2rem; min-height:54px; }
.btn--block{ display:flex; width:100%; }
.btn[disabled],.btn:disabled,.btn.is-loading{ opacity:.65; cursor:not-allowed; transform:none; box-shadow:none; }

/* -----------------------------------------------------------------------------
   7. SECTION HEADING
   -------------------------------------------------------------------------- */
.section-heading{ margin-bottom:clamp(2rem,4vw,3rem); max-width:760px; }
.section-heading--center{ margin-inline:auto; text-align:center; }
.section-heading__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:"DM Sans",sans-serif; font-weight:600; font-size:.8rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-gold-text); margin:0 0 .85rem;
}
.section-heading__eyebrow::before{
  content:""; width:32px; height:2px; background:var(--color-secondary); border-radius:2px;
}
.section-heading--center .section-heading__eyebrow::after{
  content:""; width:32px; height:2px; background:var(--color-secondary); border-radius:2px;
}
.section-heading__title{ margin:0 0 .5rem; }
.section-heading__subtitle{ font-size:1.08rem; color:var(--color-text-secondary); margin:0; }

.section-heading--light .section-heading__title{ color:var(--color-white); }
.section-heading--light .section-heading__subtitle{ color:rgba(255,255,255,.86); }
.section-heading--light .section-heading__eyebrow{ color:var(--color-secondary-light); }
.section-heading--light .section-heading__eyebrow::before,
.section-heading--light.section-heading--center .section-heading__eyebrow::after{ background:var(--color-secondary-light); }

/* -----------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */
.card{
  position:relative; display:flex; flex-direction:column;
  background:var(--color-white); border:1px solid var(--color-border);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  height:100%;
}
.card:hover,.card:focus-within{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--color-secondary-light); }
.card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--color-gray-100); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); }
.card:hover .card__media img{ transform:scale(1.05); }
img.card__media{ width:100%; object-fit:cover; }
.card__body{ display:flex; flex-direction:column; gap:.6rem; padding:clamp(1.25rem,2.5vw,1.75rem); flex:1 1 auto; }
.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:var(--radius); margin-bottom:.4rem;
  background:var(--color-secondary-lighter); color:var(--color-gold-text);
}
.card__icon svg{ width:28px; height:28px; }
.card__title{ margin:0; font-size:1.35rem; }
.card__text{ margin:0; color:var(--color-text-secondary); font-size:1rem; }
.card__link{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.95rem; color:var(--color-gold-text);
  padding-top:.5rem;
}
.card__link::after{ content:"\2192"; content:"\2192" / ""; transition:transform var(--t-fast); } /* alt-text syntax hides glyph from AT */
.card__link:hover{ color:var(--color-primary-dark); } /* §6.1 — AA hover color */
.card__link:hover::after{ transform:translateX(4px); }
.card__badge{
  display:inline-flex; align-self:flex-start; align-items:center;
  padding:.25rem .7rem; border-radius:var(--radius-pill);
  font-family:"DM Sans",sans-serif; font-size:.7rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  background:var(--color-secondary-lighter); color:var(--color-gold-text);
  border:1px solid var(--color-secondary-light);
}

/* -----------------------------------------------------------------------------
   9. PAGE HERO (inner pages) + BREADCRUMBS
   Default = NO image: solid --color-primary-dark + pattern ::before +
   token-based ::after overlay. When a template passes an image it emits ONLY
   inline background-image:url(...) — the overlay below keeps text AA-readable.
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative; isolation:isolate;
  background-color:var(--color-primary-dark);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  padding-block:clamp(3.5rem,8vw,6rem);
  color:var(--color-white); overflow:hidden;
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  /* rgba fallback of --color-primary-dark (#5C3F27), then token-based mix */
  background:linear-gradient(180deg,rgba(92,63,39,.85),rgba(92,63,39,.93));
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--color-primary-dark) 85%, transparent),
    color-mix(in srgb, var(--color-primary-dark) 93%, transparent));
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("../images/patterns/islamic-pattern.svg");
  background-repeat:repeat; background-size:200px 200px;
  opacity:.07; pointer-events:none;
}
.page-hero__inner{ position:relative; z-index:1; }
.page-hero__title{ color:var(--color-white); margin:0 0 .5rem; font-size:clamp(2.3rem,5vw,3.4rem); }
.page-hero__subtitle{ color:rgba(255,255,255,.88); font-size:clamp(1.02rem,1.6vw,1.2rem); margin:0; max-width:60ch; }

.breadcrumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem;
  font-size:.875rem; margin-bottom:1rem; color:rgba(255,255,255,.8);
}
.breadcrumbs__item{ color:rgba(255,255,255,.8); }
a.breadcrumbs__item:hover{ color:var(--color-white); }
.breadcrumbs__item a{ color:rgba(255,255,255,.8); }
.breadcrumbs__item a:hover{ color:var(--color-white); }
.breadcrumbs__sep{ color:rgba(255,255,255,.5); user-select:none; }
.breadcrumbs__current{ color:var(--color-white); font-weight:600; } /* §6.1 — WHITE */

/* -----------------------------------------------------------------------------
   10. RAWDAH WIDGET
   -------------------------------------------------------------------------- */
.rawdah-widget-container{
  width:100%; border-radius:var(--radius); overflow:hidden;
  background:var(--color-white); box-shadow:var(--shadow-sm);
  border:1px solid var(--color-border);
}
.rawdah-widget-container iframe{ display:block; width:100%; border:none; }
.rawdah-widget-placeholder{
  display:flex; align-items:center; justify-content:center;
  border:2px dashed var(--color-gray-300); border-radius:var(--radius);
  background:var(--color-cream); padding:2.5rem 1.5rem; text-align:center;
}
.rawdah-widget-placeholder__inner{ max-width:46ch; }
.rawdah-widget-placeholder__inner p{ margin:.25rem 0; color:var(--color-text-secondary); }
.small{ color:var(--color-text-muted); font-size:.9rem; }

/* -----------------------------------------------------------------------------
   11. HEADER
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:1000; width:100%;
  background:var(--color-white);
  border-bottom:1px solid var(--color-border);
  transition:box-shadow var(--t-fast);
}
.site-header.is-stuck{ box-shadow:var(--shadow); border-bottom-color:transparent; }

/* App banner */
.app-banner{
  background:var(--color-primary-dark); color:var(--color-white);
  font-size:.9rem; position:relative;
}
.app-banner > .container,
.app-banner .container{
  display:flex; align-items:center; justify-content:center; gap:.75rem 1rem;
  flex-wrap:wrap; padding-block:.6rem; position:relative; text-align:center;
  padding-right:3.25rem; /* room for the absolute 44px close button at every width */
}
.app-banner__text{ margin:0; color:rgba(255,255,255,.92); }
.app-banner__btn{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--color-secondary); color:var(--color-gray-900);
  font-weight:600; font-size:.82rem; padding:.55rem 1.1rem; min-height:44px; /* §11 tap target */
  border-radius:var(--radius-pill); white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast);
}
.app-banner__btn:hover{ background:var(--color-secondary-light); color:var(--color-gray-900); }
.app-banner__close{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  width:44px; height:44px; /* §6.6 — 44px tap target */
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--color-white); border-radius:var(--radius-pill); line-height:1;
}
.app-banner__close:hover{ background:rgba(255,255,255,.14); }
.app-banner__close svg{ width:16px; height:16px; }
.app-banner.is-hidden{ display:none; }

/* Top bar */
.top-bar{ background:var(--color-primary); color:var(--color-white); font-size:.875rem; }
.top-bar > .container,
.top-bar .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem 1rem; flex-wrap:wrap; padding-block:.45rem; min-height:40px;
}
.top-bar a{ color:rgba(255,255,255,.92); }
.top-bar a:hover{ color:var(--color-secondary-lighter); } /* AA on --color-primary */
.top-bar__email{ display:inline-flex; align-items:center; gap:.45rem; }
.top-bar__email svg{ width:15px; height:15px; flex:none; }
.top-bar__links{ display:inline-flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.top-bar__links > a{ display:inline-flex; align-items:center; gap:.4rem; }
.top-bar__phone{ display:inline-flex; align-items:center; gap:.45rem; font-weight:600; }
.top-bar__phone svg{ width:15px; height:15px; flex:none; }
.top-bar__social{ display:inline-flex; align-items:center; gap:.65rem; }
.top-bar__social a{
  display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center;
  border-radius:var(--radius-pill); background:rgba(255,255,255,.12);
}
.top-bar__social a:hover{ background:var(--color-secondary); color:var(--color-gray-900); }
.top-bar__social svg{ width:15px; height:15px; }

/* Main nav */
.main-nav{ position:relative; }
.main-nav > .container,
.main-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.65rem;
}
.main-nav__logo{ display:inline-flex; align-items:center; gap:.6rem; flex-shrink:0; }
.main-nav__logo img{ max-height:56px; height:clamp(46px,6vw,56px); width:auto; }
.main-nav__logo-text{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:700;
  font-size:1.35rem; color:var(--color-heading); line-height:1.1;
}
.main-nav__menu{ display:none; align-items:center; gap:.15rem; flex-wrap:wrap; }

.nav-item{ position:relative; }
.nav-item > a,
.nav-item__trigger{
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:44px; padding:.55rem .8rem;
  font-weight:500; font-size:.95rem;
  color:var(--color-text); border-radius:var(--radius-sm);
  background:transparent; border:0; white-space:nowrap;
  transition:color var(--t-fast),background var(--t-fast);
}
.nav-item > a:hover,
.nav-item__trigger:hover,
.nav-item.is-open > .nav-item__trigger,
.nav-item.is-active > a,
.nav-item.current-menu-item > a{
  color:var(--color-primary); background:var(--color-primary-lighter);
}
.nav-item__trigger svg{ width:.7em; height:.7em; flex:none; transition:transform var(--t-fast); }
.nav-item.is-open .nav-item__trigger svg,
.nav-item__trigger[aria-expanded="true"] svg{ transform:rotate(180deg); }
.nav-item__cta{ margin-left:.4rem; }
.nav-item__cta .btn{ min-height:44px; padding:.55rem 1.35rem; }

/* Mega menu (dropdown support — harmless if unused) */
.mega-menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:60;
  min-width:280px; padding:1rem; border-radius:var(--radius);
  background:var(--color-white); box-shadow:var(--shadow-lg);
  border:1px solid var(--color-border);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity var(--t-fast),transform var(--t-fast),visibility var(--t-fast);
}
.nav-item--has-mega.is-open .mega-menu,
.nav-item--has-mega:hover .mega-menu,
.nav-item--has-mega:focus-within .mega-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.mega-menu__grid{ display:grid; grid-template-columns:1fr; gap:.2rem; }
.mega-menu__link{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem .75rem; border-radius:var(--radius-sm);
  color:var(--color-text); font-size:.93rem; font-weight:500;
}
.mega-menu__link:hover{ background:var(--color-primary-lighter); color:var(--color-primary); }
.mega-menu__link svg{ width:1em; height:1em; flex:none; color:var(--color-gold-text); }

/* Hamburger (≤1023px) */
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border:1px solid var(--color-border);
  border-radius:var(--radius-sm); background:var(--color-white);
  color:var(--color-primary-dark);
}
.menu-toggle:hover{ background:var(--color-primary-lighter); }
.menu-toggle svg{ width:24px; height:24px; }

/* Mobile drawer */
.mobile-drawer{ position:fixed; inset:0; z-index:1100; visibility:hidden; pointer-events:none; }
.mobile-drawer.is-open{ visibility:visible; pointer-events:auto; }
.mobile-drawer__overlay{
  position:absolute; inset:0; background:rgba(92,63,39,.55);
  opacity:0; transition:opacity var(--t);
}
.mobile-drawer.is-open .mobile-drawer__overlay{ opacity:1; }
.mobile-drawer__panel{
  position:absolute; top:0; right:0; height:100%; width:min(86vw,360px);
  background:var(--color-white); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--t);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-drawer.is-open .mobile-drawer__panel{ transform:translateX(0); }
.mobile-drawer__header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.25rem; border-bottom:1px solid var(--color-border);
}
.mobile-drawer__header img{ max-height:44px; width:auto; }
.mobile-drawer__close{
  width:44px; height:44px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--color-border); border-radius:var(--radius-sm);
  background:var(--color-white); color:var(--color-primary-dark);
}
.mobile-drawer__close:hover{ background:var(--color-primary-lighter); }
.mobile-drawer__close svg{ width:22px; height:22px; }
.mobile-drawer__nav{ padding:.75rem 1rem 1.25rem; display:flex; flex-direction:column; gap:.1rem; }
.mobile-drawer__nav a,
.mobile-drawer__nav button{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; min-height:48px; padding:.7rem .75rem;
  font-weight:500; font-size:1.02rem; text-align:left;
  color:var(--color-text); border-radius:var(--radius-sm);
  border-bottom:1px solid var(--color-gray-100);
}
.mobile-drawer__nav a:hover,
.mobile-drawer__nav button:hover{ background:var(--color-primary-lighter); color:var(--color-primary); }
.mobile-drawer__nav button svg{ width:.85em; height:.85em; flex:none; transition:transform var(--t-fast); }
.mobile-drawer__nav button[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mobile-drawer__submenu{ padding-left:1rem; margin:.1rem 0 .35rem; }
.mobile-drawer__submenu a{ font-size:.94rem; color:var(--color-text-secondary); min-height:44px; border-bottom:0; }
.mobile-drawer__submenu[hidden]{ display:none; }
.mobile-drawer__cta{ margin:1rem 1.25rem 1.5rem; }

/* -----------------------------------------------------------------------------
   12. HERO (home) — Ken Burns
   -------------------------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center;
  min-height:clamp(560px,82vh,760px);
  color:var(--color-white);
  background-color:var(--color-primary-dark);
}
.hero__bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  animation:darulquran-kenburns 24s var(--ease) infinite alternate;
  will-change:transform;
}
img.hero__bg{ width:100%; height:100%; object-fit:cover; }
@keyframes darulquran-kenburns{
  from{ transform:scale(1.02) translateY(0); }
  to{ transform:scale(1.12) translateY(-1.5%); }
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  /* rgba overlay of --color-primary-dark (#5C3F27) for AA text contrast */
  background:linear-gradient(100deg,rgba(92,63,39,.88) 0%,rgba(92,63,39,.72) 55%,rgba(92,63,39,.5) 100%);
}
.hero__content{
  position:relative; z-index:1; max-width:760px;
  padding-block:clamp(3rem,8vw,5rem);
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:600; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-secondary-light); margin-bottom:1rem;
}
.hero__eyebrow::before{ content:""; width:34px; height:2px; background:var(--color-secondary-light); }
.hero__title{ color:var(--color-white); font-size:clamp(2.6rem,6.5vw,4.4rem); line-height:1.08; margin:0 0 1rem; }
.hero__subtitle{ color:rgba(255,255,255,.9); font-size:clamp(1.05rem,1.9vw,1.3rem); line-height:1.65; max-width:58ch; margin:0 0 2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

/* -----------------------------------------------------------------------------
   13. FORMS
   -------------------------------------------------------------------------- */
.form{ display:flex; flex-direction:column; gap:1.15rem; }
.form__row{ display:grid; grid-template-columns:1fr; gap:1.15rem; }
.form__row--inline{ display:flex; gap:.6rem; align-items:stretch; flex-wrap:wrap; }
.form__group{ display:flex; flex-direction:column; gap:.4rem; }
.form__label{ font-weight:600; font-size:.92rem; color:var(--color-heading); }
.form__label .req{ color:var(--color-error); }
.form__input,.form__textarea,.form__select{
  width:100%; font-family:inherit; font-size:1rem; color:var(--color-text);
  min-height:48px; padding:.75rem 1rem;
  border:1px solid var(--color-gray-300); border-radius:var(--radius-sm);
  background:var(--color-white);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.form__input:focus,.form__textarea:focus,.form__select:focus{
  outline:3px solid transparent; outline-offset:2px; /* visible under forced-colors */
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px var(--color-primary-lighter);
}
.form__textarea{ min-height:150px; resize:vertical; }
.form__input.is-invalid,.form__textarea.is-invalid,.form__select.is-invalid,
.form__input.has-error,.form__textarea.has-error,.form__select.has-error{
  border-color:var(--color-error);
  box-shadow:0 0 0 3px var(--color-error-lighter);
}
.form__consent{ display:flex; align-items:flex-start; gap:.6rem; font-size:.92rem; color:var(--color-text-secondary); }
.form__consent input[type="checkbox"]{ margin-top:.25rem; width:20px; height:20px; flex-shrink:0; accent-color:var(--color-primary); }
.form__consent.is-invalid{ color:var(--color-error); }
.form__hint{ font-size:.85rem; color:var(--color-text-muted); }
.form__error{ display:block; font-size:.85rem; color:var(--color-error); font-weight:500; min-height:1em; }
.form__submit{ align-self:flex-start; }
.form__honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

.form-message{
  padding:.9rem 1.1rem; border-radius:var(--radius-sm); font-size:.95rem;
  margin-bottom:1rem; border:1px solid transparent;
}
.form-message--ok{ background:var(--color-primary-lighter); color:var(--color-primary-dark); border-color:var(--color-success); }
.form-message--err{ background:var(--color-error-lighter); color:var(--color-error); border-color:var(--color-error); } /* §6 */

/* Search form (searchform.php uses .form__row--inline + these — §6.10) */
.search-form__input{
  flex:1 1 220px; min-width:0; font-family:inherit; font-size:1rem;
  min-height:48px; padding:.75rem 1rem; color:var(--color-text);
  border:1px solid var(--color-gray-300); border-radius:var(--radius-sm);
  background:var(--color-white);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.search-form__input:focus{ outline:3px solid transparent; outline-offset:2px; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-lighter); }
.search-form__submit{
  flex-shrink:0; background:var(--color-cta); color:var(--color-cta-text);
  font-weight:600; padding:.75rem 1.4rem; border-radius:var(--radius-sm); min-height:48px;
  transition:background var(--t-fast);
}
.search-form__submit:hover{ background:var(--color-cta-hover); }

/* -----------------------------------------------------------------------------
   14. QUICK LINKS
   -------------------------------------------------------------------------- */
.quick-links{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.85rem,2vw,1.25rem); }
.quick-link{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.7rem; text-align:center;
  padding:1.6rem 1rem; min-height:120px;
  background:var(--color-white);
  border:1px solid var(--color-border); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); color:var(--color-heading);
  font-weight:600; font-size:.95rem;
  transition:transform var(--t),box-shadow var(--t),border-color var(--t),color var(--t);
}
.quick-link:hover,
.quick-link:focus-visible{
  transform:translateY(-4px); box-shadow:var(--shadow-lg);
  border-color:var(--color-secondary); color:var(--color-primary);
}
.quick-link__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:var(--radius-pill);
  background:var(--color-primary-lighter); color:var(--color-primary);
  transition:background var(--t),color var(--t);
}
.quick-link:hover .quick-link__icon{ background:var(--color-secondary); color:var(--color-gray-900); }
.quick-link__icon svg{ width:26px; height:26px; }

/* -----------------------------------------------------------------------------
   15. INFO CARDS (contact details, donation categories, …)
   -------------------------------------------------------------------------- */
.info-cards{ display:grid; grid-template-columns:1fr; gap:clamp(1.25rem,3vw,1.75rem); }
.info-cards--3{ grid-template-columns:repeat(3,1fr); }
.info-card{
  display:flex; flex-direction:column; gap:.55rem;
  padding:clamp(1.4rem,3vw,1.8rem); background:var(--color-white);
  border:1px solid var(--color-border); border-left:4px solid var(--color-secondary);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
}
.info-card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:var(--radius);
  background:var(--color-secondary-lighter); color:var(--color-gold-text); margin-bottom:.3rem;
}
.info-card__icon svg{ width:26px; height:26px; }
.info-card h3{ margin:0; font-size:1.3rem; }
.info-card p{ margin:0; color:var(--color-text-secondary); }
.info-card a{ color:var(--color-primary); font-weight:500; word-break:break-word; }
.info-card a:hover{ color:var(--color-primary-dark); }
.info-card .btn{ margin-top:auto; align-self:flex-start; }

/* -----------------------------------------------------------------------------
   16. STATS / COUNTERS
   -------------------------------------------------------------------------- */
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,3vw,1.75rem); }
.stat{ text-align:center; padding:1.25rem 1rem; }
.stat__num{
  font-family:"Cormorant Garamond",Georgia,serif; font-weight:700;
  font-size:clamp(2.6rem,5.5vw,3.75rem); line-height:1;
  color:var(--color-primary); display:block; margin-bottom:.45rem;
}
.section--dark .stat__num{ color:var(--color-secondary-light); }
.stat__label{
  font-size:.92rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--color-text-secondary);
}
.section--dark .stat__label{ color:rgba(255,255,255,.86); }
.counter{ font-variant-numeric:tabular-nums; }

/* -----------------------------------------------------------------------------
   17. GALLERY GRID
   -------------------------------------------------------------------------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.6rem,2vw,1rem); }
.gallery-grid__item{
  position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  aspect-ratio:4/3; background:var(--color-gray-100); box-shadow:var(--shadow-sm);
}
.gallery-grid__item img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow); }
.gallery-grid__item:hover img,
.gallery-grid__item:focus-visible img{ transform:scale(1.07); }

/* -----------------------------------------------------------------------------
   18. MEDIA ROW (alternating image + text)
   -------------------------------------------------------------------------- */
.media-row{ display:grid; grid-template-columns:1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.media-row__media{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.media-row__media img{ width:100%; height:100%; object-fit:cover; }
.media-row__body{ display:flex; flex-direction:column; gap:1rem; }
.media-row__body h2,.media-row__body h3{ margin-top:0; }

/* -----------------------------------------------------------------------------
   19. STYLED LIST (numbered) + --check variant + .project-list — token colors.
   .project-list = the "What Will Be Built" checklist (§5) — same styling as
   .styled-list--check.
   -------------------------------------------------------------------------- */
.styled-list,
.project-list{ display:flex; flex-direction:column; gap:1rem; counter-reset:darulquran-li; }
.styled-list li,
.project-list li{
  position:relative; display:flex; gap:.9rem; align-items:flex-start;
  color:var(--color-text-secondary);
}
.styled-list li::before,
.project-list li::before{
  counter-increment:darulquran-li;
  content:counter(darulquran-li);
  content:counter(darulquran-li) / ""; /* AT ignores the duplicate marker */
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--radius-pill);
  background:var(--color-primary-lighter); color:var(--color-primary);
  font-family:"DM Sans",sans-serif; font-weight:700; font-size:.9rem;
  margin-top:.15rem;
}
.styled-list--check li::before,
.project-list li::before{
  counter-increment:none;
  content:"\2713"; /* token-colored check, no data-URI hex */
  content:"\2713" / ""; /* AT ignores the decorative glyph */
  background:var(--color-secondary-lighter); color:var(--color-gold-text);
  font-size:1rem;
}

/* -----------------------------------------------------------------------------
   20. DONOR CONTACT (§5 — highlight card for the Khawar Ali contact block)
   -------------------------------------------------------------------------- */
.donor-contact{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-left:4px solid var(--color-secondary);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:clamp(1.5rem,3vw,2.25rem);
}
.donor-contact h2,
.donor-contact h3{ margin:0 0 .6rem; }
.donor-contact p{ margin:0 0 .6rem; color:var(--color-text-secondary); }
.donor-contact p:last-child{ margin-bottom:0; }
.donor-contact a{
  display:inline-flex; align-items:center; gap:.4rem;
  min-height:44px; /* §11 tap target for tel:/mailto: links */
  color:var(--color-primary); font-weight:600; word-break:break-word;
}
.donor-contact a:hover{ color:var(--color-primary-dark); }
.donor-contact svg{ width:18px; height:18px; flex:none; color:var(--color-gold-text); }

/* -----------------------------------------------------------------------------
   21. FOOTER
   -------------------------------------------------------------------------- */
.site-footer{ background:var(--color-primary-dark); color:rgba(255,255,255,.82); position:relative; }
.site-footer a{ color:rgba(255,255,255,.82); }
.site-footer a:hover{ color:var(--color-secondary-light); }

/* Newsletter strip (headings are <h2> — §6.9) */
.newsletter{ background:var(--color-primary); padding-block:clamp(2rem,4vw,2.75rem); }
.newsletter > .container,
.newsletter .container{ display:grid; grid-template-columns:1fr; gap:1.5rem; align-items:center; }
.newsletter h2{ color:var(--color-white); font-size:clamp(1.5rem,2.6vw,1.9rem); margin:0 0 .35rem; }
.newsletter__intro{ color:rgba(255,255,255,.86); margin:0; }
.newsletter__intro p{ margin:0; color:rgba(255,255,255,.86); }
.newsletter__form{ display:flex; gap:.6rem; flex-wrap:wrap; }
.newsletter__input{
  flex:1 1 240px; min-width:0; font-family:inherit; font-size:1rem;
  min-height:48px; padding:.75rem 1rem;
  border:1px solid rgba(255,255,255,.25); border-radius:var(--radius-pill);
  background:var(--color-white); color:var(--color-text);
}
.newsletter__input::placeholder{ color:var(--color-text-muted); }
.newsletter__input:focus{ outline:3px solid transparent; outline-offset:2px; box-shadow:0 0 0 3px rgba(255,255,255,.85); } /* >=3:1 ring; outline visible under forced-colors */

/* Footer main columns */
.footer-main{ padding-block:clamp(3rem,6vw,4.5rem); }
.footer-main > .container,
.footer-main .container{ display:grid; grid-template-columns:1fr; gap:clamp(2rem,4vw,2.5rem); }
.footer-col__title{
  color:var(--color-white);
  font-family:"DM Sans",sans-serif; font-size:1rem; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase;
  margin:0 0 1.1rem; padding-bottom:.6rem; position:relative;
}
.footer-col__title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:36px; height:2px; background:var(--color-secondary);
}
.footer-links{ display:flex; flex-direction:column; gap:.65rem; }
.footer-links a{ display:inline-flex; align-items:center; gap:.5rem; font-size:.95rem; }
.footer-links a svg{ width:.85em; height:.85em; flex:none; color:var(--color-secondary); }

/* Logo white chip (§5 — verbatim recipe; the bronze logo needs it on dark) */
.footer-logo{
  background:#fff; padding:.5rem .75rem; border-radius:var(--radius-sm);
  display:inline-block; margin-bottom:1.1rem;
}
.footer-logo img{ max-height:52px; width:auto; }
.footer-greeting{ margin:0 0 1rem; }
.footer-greeting .text-arabic{ display:block; color:var(--color-secondary-light); font-size:1.3rem; margin-bottom:.25rem; }
.footer-greeting span{ display:block; color:rgba(255,255,255,.82); font-size:.95rem; }
.footer-tagline{ color:rgba(255,255,255,.78); font-size:.95rem; margin:0 0 1.2rem; }

.app-stores{ display:flex; flex-wrap:wrap; gap:.6rem; }
.app-stores__btn{
  display:inline-flex; align-items:center; gap:.5rem;
  min-height:44px; padding:.5rem .95rem;
  background:rgba(255,255,255,.1); color:var(--color-white);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-sm);
  font-size:.85rem; font-weight:500;
  transition:background var(--t-fast),border-color var(--t-fast);
}
.app-stores__btn:hover{ background:rgba(255,255,255,.2); border-color:var(--color-secondary-light); color:var(--color-white); }
.app-stores__btn svg{ width:20px; height:20px; flex:none; }

.footer-contact{ display:flex; flex-direction:column; gap:.75rem; }
.footer-contact a,
.footer-contact span,
.footer-contact address{
  display:flex; align-items:flex-start; gap:.55rem;
  color:rgba(255,255,255,.82); font-size:.95rem; font-style:normal; margin:0;
}
.footer-contact a:hover{ color:var(--color-secondary-light); }
.footer-contact svg{ width:18px; height:18px; flex:none; margin-top:.2rem; color:var(--color-secondary-light); }

/* Verse strip (2:261) */
.verse-strip{
  border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12);
  padding-block:clamp(2rem,4vw,2.75rem); text-align:center;
}
.verse-strip__arabic{
  font-family:"Amiri","Noto Naskh Arabic",serif; direction:rtl; line-height:1.9;
  color:var(--color-secondary-light); font-size:clamp(1.35rem,3vw,1.9rem);
  margin:0 auto .75rem; max-width:52ch;
}
.verse-strip__translation{
  color:rgba(255,255,255,.82); font-style:italic;
  max-width:60ch; margin:0 auto; font-size:1rem;
}

/* Footer bottom */
.footer-bottom{ padding-block:1.4rem; }
.footer-bottom > .container,
.footer-bottom .container{
  display:flex; flex-direction:column; gap:.75rem;
  align-items:center; text-align:center;
}
.footer-bottom__legal{ color:rgba(255,255,255,.7); font-size:.85rem; margin:0; }
.footer-bottom__links{ display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; justify-content:center; }
.footer-bottom__links a{ color:rgba(255,255,255,.78); font-size:.85rem; }
.footer-bottom__links a:hover{ color:var(--color-secondary-light); }

/* -----------------------------------------------------------------------------
   22. UTILITIES
   -------------------------------------------------------------------------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:.5rem; top:-100px; z-index:2000;
  background:var(--color-primary-dark); color:var(--color-white);
  padding:.7rem 1.2rem; border-radius:var(--radius-sm); font-weight:600;
  transition:top var(--t-fast);
}
.skip-link:focus{ top:.5rem; color:var(--color-white); }
.u-center{ text-align:center; }
.u-flex-center{ display:flex; align-items:center; justify-content:center; gap:.85rem; flex-wrap:wrap; }
.u-mx-auto{ margin-inline:auto; }
.u-mb-0{ margin-bottom:0 !important; }
.is-hidden{ display:none !important; }

/* -----------------------------------------------------------------------------
   23. REVEAL ANIMATIONS (transform/opacity only; --d = per-item inline delay)
   -------------------------------------------------------------------------- */
/* No-JS fallback: content must never stay hidden without JavaScript */
body.no-js .reveal,
body.no-js .reveal--left,
body.no-js .reveal--right,
body.no-js .reveal--scale{ opacity:1 !important; transform:none !important; }

/* No-JS nav fallback: the drawer needs JS, so render the flat menu inline */
body.no-js .main-nav__menu{ display:flex; flex-wrap:wrap; }
body.no-js .menu-toggle{ display:none; }

.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity var(--t-slow),transform var(--t-slow);
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
.reveal--left{ transform:translateX(-28px); }
.reveal--right{ transform:translateX(28px); }
.reveal--scale{ transform:scale(.94); }
.reveal.is-visible{ opacity:1; transform:none; }

/* -----------------------------------------------------------------------------
   24. RESPONSIVE — 480 / 768 / 1024 / 1280
   -------------------------------------------------------------------------- */
@media (min-width:480px){
  .quick-links{ grid-template-columns:repeat(3,1fr); }
  .footer-bottom > .container,
  .footer-bottom .container{ flex-direction:row; justify-content:space-between; text-align:left; }
}

@media (min-width:768px){
  .newsletter > .container,
  .newsletter .container{ grid-template-columns:1fr 1fr; }
  .newsletter__form{ justify-content:flex-end; }
  .stats-grid{ grid-template-columns:repeat(4,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .media-row{ grid-template-columns:1fr 1fr; }
  .media-row--reverse .media-row__media{ order:2; }
  .footer-main > .container,
  .footer-main .container{ grid-template-columns:repeat(2,1fr); }
  .info-cards{ grid-template-columns:repeat(2,1fr); }
  .info-cards--3{ grid-template-columns:repeat(3,1fr); }
  .styled-list--cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 2rem; }
  .project-list--cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 2rem; }
}

@media (min-width:1024px){
  .main-nav__menu{ display:flex; }
  .menu-toggle{ display:none; }
  .mobile-drawer{ display:none; }
  .quick-links{ grid-template-columns:repeat(6,1fr); }
  .gallery-grid{ grid-template-columns:repeat(4,1fr); }
  .footer-main > .container,
  .footer-main .container{ grid-template-columns:1.4fr 1fr 1fr 1.3fr; }
}

@media (min-width:1280px){
  .container{ padding-inline:1.5rem; }
}

/* Grids collapse to a single column at or below 768px (§5) */
@media (max-width:768px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
  .info-cards--3{ grid-template-columns:1fr; }

  /* §6.6 — keep click-to-call phone + email visible with >=44px tap targets;
     hide the other top-bar quick links and social icons */
  .top-bar__links > a:not(.top-bar__phone){ display:none; }
  .top-bar__social{ display:none; }
  .top-bar > .container,
  .top-bar .container{ justify-content:center; }
  .top-bar__phone,
  .top-bar__email{ min-height:44px; padding-block:.4rem; }

  /* §11 — comfortable tap areas for small text links on touch screens */
  .card__link{ min-height:44px; align-items:center; }
  .breadcrumbs__item{ padding-block:.5rem; }
}

@media (max-width:480px){
  .hero__actions .btn{ width:100%; }
}

/* -----------------------------------------------------------------------------
   25. PRINT (lightweight, tokens only — §6.12)
   -------------------------------------------------------------------------- */
@media print{
  .site-header,.site-footer,.app-banner,.skip-link,
  .mobile-drawer,.menu-toggle,.rawdah-widget-container iframe{ display:none !important; }
  .reveal{ opacity:1 !important; transform:none !important; } /* never print blank sections */
  body{ background:var(--color-white); color:var(--color-text); }
  a{ color:var(--color-text); text-decoration:underline; }
  .section--dark,.page-hero,.hero{ background:var(--color-white); color:var(--color-text); }
  .section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4,
  .page-hero__title,.hero__title{ color:var(--color-heading); }
  .section--dark p,.section--dark li,
  .page-hero__subtitle,.hero__subtitle{ color:var(--color-text-secondary); }
  .page-hero::before,.page-hero::after,.hero::after,.section--patterned::before{ display:none; }
}

/* -----------------------------------------------------------------------------
   26. PREFERS-REDUCED-MOTION — full off-switch (§11)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  .hero__bg{ animation:none !important; transform:none !important; }
  .reveal,.reveal--left,.reveal--right,.reveal--scale{ opacity:1 !important; transform:none !important; }
  .card:hover,.quick-link:hover,.btn:hover,
  .gallery-grid__item:hover img,.card:hover .card__media img{ transform:none !important; }
}