/* ============ TOKENS ============ */
:root{
  --paper:#EAE7DE;--paper-2:#DFDBD0;--card:#F4F1E9;
  --ink:#131F30;--ink-2:#33445C;--steel:#4D5B6E;--hair:#C5BFB2;
  --ember:#1B4079;--ember-ink:#F5F2E9;--gold:#94761F;
  --band:#0E2340;--band-text:#ECE8DE;--band-dim:#9FB0C4;--band-hair:#234061;
  --focus:#1B4079;--shell:64rem;--read:34rem;--r:2px;
  --f-disp:"Archivo",-apple-system,"Segoe UI",system-ui,sans-serif;
  --f-body:"Newsreader",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0C121B;--paper-2:#111A26;--card:#16202E;
  --ink:#E9E5DB;--ink-2:#B6C1CE;--steel:#8A99AB;--hair:#26323F;
  --ember:#82B0E8;--ember-ink:#0A1522;--gold:#D9B94C;
  --band:#15263A;--band-text:#E9E5DB;--band-dim:#9FB0C4;--band-hair:#2C3F57;--focus:#82B0E8;
}}
:root[data-theme="dark"]{
  --paper:#0C121B;--paper-2:#111A26;--card:#16202E;
  --ink:#E9E5DB;--ink-2:#B6C1CE;--steel:#8A99AB;--hair:#26323F;
  --ember:#82B0E8;--ember-ink:#0A1522;--gold:#D9B94C;
  --band:#15263A;--band-text:#E9E5DB;--band-dim:#9FB0C4;--band-hair:#2C3F57;--focus:#82B0E8;
}

/* ============ LANGUAGE ============ */
html [data-l]{display:none}
html[data-lang="en"] [data-l="en"]{display:revert}
html[data-lang="es"] [data-l="es"]{display:revert}
html[data-lang="fa"] [data-l="fa"]{display:revert}
span[data-l]{display:none}
html[data-lang="en"] span[data-l="en"]{display:inline}
html[data-lang="es"] span[data-l="es"]{display:inline}
html[data-lang="fa"] span[data-l="fa"]{display:inline}
html[data-lang="en"] [data-l="en"].eyebrow,
html[data-lang="es"] [data-l="es"].eyebrow,
html[data-lang="fa"] [data-l="fa"].eyebrow{display:flex}
html[data-lang="en"] [data-l="en"].specs,
html[data-lang="es"] [data-l="es"].specs,
html[data-lang="fa"] [data-l="fa"].specs{display:grid}
html[data-lang="en"] [data-l="en"].spec,
html[data-lang="es"] [data-l="es"].spec,
html[data-lang="fa"] [data-l="fa"].spec{display:flex}
html[data-lang="en"] [data-l="en"].services,
html[data-lang="es"] [data-l="es"].services,
html[data-lang="fa"] [data-l="fa"].services{display:grid}
html[data-lang="en"] [data-l="en"].field__row,
html[data-lang="es"] [data-l="es"].field__row,
html[data-lang="fa"] [data-l="fa"].field__row{display:grid}

.lang{display:inline-flex;align-items:center;gap:.15rem;border:1.5px solid var(--ember);
  border-radius:999px;padding:.15rem .3rem .15rem .5rem;flex:none;background:transparent}
.lang > svg{width:1rem;height:1rem;color:var(--ember);flex:none;margin-inline-end:.15rem}
.lang button{font-family:var(--f-disp);font-size:.75rem;font-weight:800;letter-spacing:.06em;
  padding:.35rem .55rem;border:0;border-radius:999px;background:transparent;color:var(--ember);
  cursor:pointer;line-height:1.5;min-height:1.9rem}
.lang button[aria-pressed="true"]{background:var(--ember);color:var(--ember-ink)}
.lang button:not([aria-pressed="true"]):hover{background:color-mix(in srgb,var(--ember) 14%,transparent)}

/* cross-link to the training track — mirrors the "Church site" link over there */
.cross{font-family:var(--f-disp);font-size:.75rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;color:var(--ember);
  border:1.5px solid var(--ember);border-radius:999px;padding:.42rem .8rem;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.35rem}
.cross:hover{background:var(--ember);color:var(--ember-ink)}
.cross .long{display:none}
@media(min-width:26rem){.cross .short{display:none}.cross .long{display:inline}}

/* ============ BASE ============ */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}

h1,h2,h3,h4{font-family:var(--f-disp);font-weight:800;letter-spacing:-.028em;line-height:.98;
  text-wrap:balance;margin:0}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,2.5rem)}
.band{padding-block:clamp(3.5rem,9vw,6rem)}
.band--sunk{background:var(--paper-2)}
.band--ink{background:var(--band);color:var(--band-text);--gold:#D9B94C;--ember:#8FB8EC;--ember-ink:#0A1522}
.band--ink .eyebrow{color:var(--band-dim)}
.band--ink .lede,.band--ink p{color:var(--band-text)}
.stack{display:flex;flex-direction:column;gap:1.25rem}
.stack--lg{gap:2.25rem}
.read{max-width:var(--read)}
.eyebrow{font-family:var(--f-disp);font-size:.6875rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);display:flex;align-items:center;gap:.75rem;margin:0}
.eyebrow--separated{margin-top:.6rem}
.eyebrow::before{content:"";width:1.5rem;height:2px;background:var(--gold);flex:none}
.lede{font-size:clamp(1.0625rem,1.9vw,1.25rem);color:var(--ink-2);line-height:1.6}
.lede--schedule{max-width:34rem}
.rule{border:0;height:0;border-top:1px dashed var(--hair);margin:0}
.band--ink .rule{border-top-color:var(--band-hair)}

.btn{font-family:var(--f-disp);font-weight:700;font-size:.9375rem;text-decoration:none;
  display:inline-flex;align-items:center;gap:.55rem;padding:.9rem 1.4rem;border-radius:var(--r);
  border:2px solid transparent;transition:transform .12s ease,background-color .12s ease,color .12s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn--go{background:var(--ember);color:var(--ember-ink);border-color:var(--ember)}
.btn--line{border-color:currentColor;color:inherit;background:transparent}
.btn--line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.band--ink .btn--line:hover{background:var(--band-text);color:var(--band);border-color:var(--band-text)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}


.mark{min-width:0;flex:0 1 auto;overflow:hidden}
/* Where there is room, never squeeze the wordmark — the subtitle is wider
   than the name above it, so a shrunk flex item clips the wrong thing. */
/* The subtitle is wider than the name above it. Below the desktop breakpoint
   the header has no room for it, so it only appears once the bar is roomy. */
.mark__sub{display:none}
/* Below tablet the bar holds the mark and the language switch only. "Come Build"
   is reachable from the Build section and the footer, and a mangled church name
   costs more than a duplicated link. */
@media(max-width:47.99rem){
  .cross{display:none}
  .mark__txt .wlong{display:none}
  .mark__txt .wshort{display:inline}
  .mark__txt{font-size:.85rem;white-space:nowrap}
}
@media(min-width:64rem){
  .mark{flex:0 0 auto;overflow:visible}
  .mark__txt{overflow:visible}
  .mark__sub{display:block}
}
.top__right{flex:none}
.mark__txt .wshort{display:none}
.mark__txt .wlong{display:inline}

.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--hair)}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.6rem}
.mark{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.mark__glyph{width:2.5rem;height:2.5rem;flex:none;color:var(--ember);fill:currentColor}
.mark__txt{font-family:var(--f-disp);font-weight:800;font-size:.9375rem;letter-spacing:-.01em;line-height:1.1}
.mark__sub{display:block;font-weight:500;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.top__right{display:flex;align-items:center;gap:.6rem}
@media(min-width:64rem){.top__right{gap:1.25rem}}
.nav{display:none;gap:1.5rem;align-items:center}
.nav a{font-family:var(--f-disp);font-size:.8125rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding-block:.35rem;
  border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--ember)}
@media(min-width:64rem){.nav{display:flex;gap:1.05rem}}
@media(min-width:78rem){.nav{gap:1.5rem}}
/* three language buttons make the bar wider than it was with two —
   give the wordmark room before the nav is allowed to appear */
@media(min-width:64rem) and (max-width:77.99rem){
  .mark__sub{display:none}
  .nav a{font-size:.75rem}
  .cross{padding:.42rem .65rem;font-size:.7rem}
  /* Spanish runs about 85px wider across the nav and the cross-link than English
     ("Ven y construye" vs "Come build"), which pushed the bar past the viewport
     between 1024 and 1100px. Tighten the gaps for every language first — this is
     invisible and buys back roughly 30px. */
  .top__right{gap:.75rem}
  .nav{gap:.85rem}
}
/* ...then give Spanish the same treatment tablets already get, until there is
   genuinely room for its longer labels. English and Farsi keep their nav here. */
@media(min-width:64rem) and (max-width:71.99rem){
  html[data-lang="es"] .nav{display:none}
}
/* At 78rem the nav gap opens up to 1.5rem and the compact rules above stop
   applying. English and Farsi have room for that; Spanish does not until 80rem.
   Hold Spanish at the compact spacing for those two hundred pixels. */
@media(min-width:78rem) and (max-width:79.99rem){
  html[data-lang="es"] .nav{gap:.9rem}
  html[data-lang="es"] .nav a{font-size:.75rem}
  html[data-lang="es"] .top__right{gap:.85rem}
  html[data-lang="es"] .cross{padding:.42rem .65rem;font-size:.7rem}
}

.hero{padding-block:clamp(3.5rem,10vw,7rem) clamp(2.5rem,6vw,4rem)}
.hero h1{font-size:clamp(2.5rem,9.5vw,6rem);line-height:.9;letter-spacing:-.04em}
.hero h1 em{font-style:normal;color:var(--ember);display:block}
.hero .lede{max-width:32rem;margin-top:1.5rem}

.specs{display:grid;grid-template-columns:1fr;gap:0;border-top:2px solid var(--ink);
  margin-top:clamp(2.5rem,6vw,3.5rem)}
.spec{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.85rem 0;border-bottom:1px dashed var(--hair)}
.spec dt{font-family:var(--f-disp);font-size:.6875rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--steel)}
.spec dd{margin:0;font-family:var(--f-disp);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;text-align:end}
@media(min-width:48rem){.specs{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}
  .specs--stack{grid-template-columns:1fr}}
.specs--stack .spec dd{text-align:end;max-width:22rem}

.services{display:grid;grid-template-columns:1fr;gap:0;margin:0;border-top:2px solid var(--ink)}
.svc{display:flex;align-items:baseline;gap:1.25rem;padding:1rem 0;border-bottom:1px dashed var(--hair)}
.svc dt{font-family:var(--f-disp);font-weight:800;font-size:1.5rem;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--ember);flex:none;min-width:6.5rem}
.svc dt span{font-size:.8125rem;font-weight:700;letter-spacing:.04em;color:var(--steel)}
.svc dd{margin:0;display:flex;flex-direction:column;color:var(--ink-2);font-size:.9375rem}
.svc dd strong{font-family:var(--f-disp);font-weight:700;font-size:1rem;letter-spacing:-.01em;color:var(--ink)}
@media(min-width:56rem){.services{grid-template-columns:1fr 1fr;column-gap:3rem}}
.services--mid{border-top-width:1px;border-top-color:var(--hair)}
.services--mid .svc dt{font-size:1.125rem;color:var(--ink-2);min-width:8.5rem}
.services--mid .svc dt span{font-size:.75rem;letter-spacing:0}
.services--mid .svc{padding:.8rem 0}

.proof{border-inline-start:3px solid var(--ember);padding-inline-start:1.15rem;font-family:var(--f-body);
  font-style:italic;font-size:clamp(1.0625rem,2vw,1.1875rem);line-height:1.5}
.proof strong{font-style:normal;font-family:var(--f-disp);font-weight:700;letter-spacing:-.01em}

.slot{position:relative;border:1px solid var(--hair);border-radius:var(--r);
  background-image:repeating-linear-gradient(135deg,transparent 0 9px,var(--hair) 9px 10px);
  background-color:var(--card);aspect-ratio:16/10;display:flex;align-items:flex-end;padding:1rem}
.slot span{font-family:var(--f-disp);font-size:.625rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;background:var(--paper);color:var(--steel);padding:.35rem .6rem;border-radius:var(--r)}
.slot--tall{aspect-ratio:3/4}

/* A real photograph in place of a placeholder box. width:100% alone is not
   enough: the img carries width/height attributes for layout stability, and
   without height:auto the shared img{max-width:100%} rule squeezes the picture
   sideways while holding the attribute height — which reads as "stretched". */
.shot{position:relative;border:1px solid var(--hair);border-radius:var(--r);
  overflow:hidden;background:var(--card);aspect-ratio:16/10}
.shot--tall{aspect-ratio:3/4}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

.cols{display:grid;gap:2rem}
@media(min-width:52rem){
  .cols--2{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
  .cols--3{grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .cols--split{grid-template-columns:.85fr 1.15fr;gap:3.5rem;align-items:start}
}
.item{border-top:2px solid var(--gold);padding-top:1rem}
.item h3{font-size:1.125rem;letter-spacing:-.01em;margin-bottom:.5rem}
.item p{color:var(--ink-2);font-size:1rem}
.band--ink .item p{color:var(--band-dim)}

.verse{font-family:var(--f-body);font-style:italic;font-size:clamp(1.375rem,3.4vw,1.875rem);
  line-height:1.35;max-width:30rem}
.verse cite{display:block;font-style:normal;font-family:var(--f-disp);font-size:.6875rem;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-top:1.25rem}
.band--ink .verse cite{color:var(--band-dim)}

.field{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--band-hair)}
.field__row{display:grid;grid-template-columns:1fr;gap:.35rem;padding:1.35rem 0;
  border-bottom:1px solid var(--band-hair)}
.field__row h3{font-size:1.0625rem}
.field__row p{color:var(--band-dim);font-size:1rem}
.missions-heading{font-size:clamp(1.75rem,4.4vw,2.5rem)}
.project-heading{font-size:clamp(1.5rem,4vw,2.25rem)}
@media(min-width:44rem){.field__row{grid-template-columns:11rem 1fr;gap:2rem;align-items:baseline}}

.formwrap{background:var(--card);border:1px solid var(--hair);border-top:3px solid var(--gold);
  border-radius:var(--r);padding:clamp(1.5rem,4vw,2.25rem)}
form{display:grid;gap:1.1rem}
.f2{display:grid;gap:1.1rem}
@media(min-width:38rem){.f2{grid-template-columns:1fr 1fr}}
label{display:block;font-family:var(--f-disp);font-size:.6875rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-bottom:.45rem}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--hair);border-radius:var(--r);padding:.7rem .8rem;line-height:1.4}
textarea{min-height:5.5rem;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ember)}
.radios{display:flex;flex-wrap:wrap;gap:.6rem}
.radios label{display:inline-flex;align-items:center;gap:.5rem;margin:0;border:1px solid var(--hair);
  border-radius:var(--r);padding:.55rem .85rem;font-size:.75rem;letter-spacing:.08em;color:var(--ink-2);cursor:pointer}
.radios label:has(input:checked){border-color:var(--ember);color:var(--ember)}
.radios input{accent-color:var(--ember);margin:0}
.consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.9375rem;color:var(--ink-2);
  line-height:1.5;font-family:var(--f-body);text-transform:none;letter-spacing:0;font-weight:400;margin:0}
.consent input{accent-color:var(--ember);margin-top:.28rem;flex:none}
.fineprint{font-size:.8125rem;color:var(--steel);line-height:1.5}
.form-error{color:var(--ember);font-size:.8125rem;line-height:1.4;margin-top:.35rem}
.form-error[hidden],.visit-status[hidden]{display:none}

.foot{border-top:1px solid var(--hair);padding-block:3rem 3.5rem;font-size:.9375rem;color:var(--ink-2)}
.foot__grid{display:grid;gap:2rem}
@media(min-width:48rem){.foot__grid{grid-template-columns:1.3fr 1fr 1fr}}
.foot h4{font-size:.6875rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);margin-bottom:.75rem}
.foot a{text-decoration:none;border-bottom:1px solid var(--hair)}
.foot a:hover{border-bottom-color:var(--ember);color:var(--ember)}
.foot__list{display:flex;flex-direction:column;gap:.5rem}
.colophon{margin-top:2.5rem;padding-top:1.25rem;border-top:1px dashed var(--hair);font-size:.75rem;
  color:var(--steel);display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between}

/* narrow phones: keep the wordmark on one line so the controls stay reachable.
   Must live at the END of the sheet — it overrides header rules defined above. */
@media(max-width:29.99rem){
  .mark__txt{font-size:.8125rem;white-space:nowrap}
  .mark__txt .wlong{display:none}
  .mark__txt .wshort{display:inline}
  .mark__sub{display:none}
  .mark__glyph{width:2.1rem;height:2.1rem}
  .top__in{height:4rem;gap:.5rem}
  .cross,.back{padding:.4rem .6rem;font-size:.6875rem}
  .lang{padding:.15rem .25rem}
  .lang > svg{display:none}
  .lang button{padding:.3rem .45rem}
}


.telpad{color:inherit;text-decoration:none;border-bottom:1px solid var(--hair);display:inline-block;padding-block:.5rem}
.telpad:hover{color:var(--ember);border-bottom-color:var(--ember)}

/* ---- Farsi welcome band (fa only) ---- */
.fa-band{background:var(--band);color:var(--band-text);padding-block:clamp(2.25rem,5vw,3.25rem);
  border-bottom:1px solid var(--band-hair)}
.fa-band__eyebrow{font-family:var(--f-disp);font-size:.75rem;font-weight:700;color:var(--gold);
  margin:0 0 .75rem}
.fa-band__h{font-size:clamp(1.6rem,4.4vw,2.6rem);line-height:1.3;margin:0;color:var(--band-text)}
.fa-band__p{font-size:clamp(1rem,1.8vw,1.15rem);line-height:1.9;color:var(--band-dim);
  max-width:44rem;margin:1rem 0 0}
.fa-band__row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.fa-band .btn--go{background:var(--gold);border-color:var(--gold);color:#05080C}
.fa-band .btn--line{color:var(--band-text)}
.fa-band .btn--line:hover{background:var(--band-text);color:var(--band);border-color:var(--band-text)}

/* ---- Farsi / RTL ----
   Persian has no letter case and no tracked caps, and it needs more leading than
   Latin type. Everything here is typographic; the mirroring is handled by dir="rtl"
   plus the logical properties used throughout. */
html[dir="rtl"]{
  --f-disp:"Vazirmatn","Noto Naskh Arabic",Tahoma,sans-serif;
  --f-body:"Vazirmatn","Noto Naskh Arabic",Tahoma,sans-serif;
}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{
  letter-spacing:0;line-height:1.3;font-weight:700}
html[dir="rtl"] .hero h1{line-height:1.2}
html[dir="rtl"] .eyebrow,html[dir="rtl"] .spec dt,html[dir="rtl"] label,
html[dir="rtl"] .nav a,html[dir="rtl"] .foot h4,html[dir="rtl"] .mark__sub,
html[dir="rtl"] .cross,html[dir="rtl"] .slot span,html[dir="rtl"] .radios label,
html[dir="rtl"] .btn,html[dir="rtl"] .svc dd strong,html[dir="rtl"] .verse cite{letter-spacing:0}
html[dir="rtl"] body{line-height:1.85}
html[dir="rtl"] .lede{line-height:1.9}
html[dir="rtl"] .verse{font-style:normal;line-height:1.75}
html[dir="rtl"] .svc dt,html[dir="rtl"] .spec dd{direction:ltr;text-align:start}
html[dir="rtl"] .telpad{direction:ltr;display:inline-block}
/* a parenthesised area code gets reordered by bidi unless it is isolated */
html[dir="rtl"] a[href^="tel:"]{direction:ltr;unicode-bidi:isolate}
/* the church name stays Latin and reads left-to-right even inside an RTL page;
   truncate with an ellipsis rather than hard-clipping on the wrong edge */
html[dir="rtl"] .mark__txt{direction:ltr;text-align:start}
.mark__txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[dir="rtl"] .lang button{padding-inline:.5rem}

/* ---- touch targets: nothing interactive under ~44px on a phone ---- */
@media(pointer:coarse),(max-width:47.99rem){
  .lang button{min-height:2.6rem;padding-inline:.7rem}
  .cross,.back{min-height:2.6rem}
  .mark{padding-block:.3rem}
  .foot a{display:inline-block;padding-block:.45rem}
  .foot__list{gap:.15rem}
  .nav a{padding-block:.7rem}
  .radios label{min-height:2.75rem;padding-inline:.95rem}
  .consent{padding-block:.35rem}
  .consent input{width:1.15rem;height:1.15rem}
}

@media(max-width:23rem){
  .top .shell{padding-inline:.85rem}
  .mark__glyph{width:1.85rem;height:1.85rem}
  .mark__txt{font-size:.75rem}
  .mark{gap:.5rem}
  .top__in{gap:.4rem}
  .cross,.back{padding:.38rem .5rem;font-size:.625rem;letter-spacing:.04em;min-height:2.5rem}
  .lang button{padding:.28rem .5rem;font-size:.6875rem;min-height:2.5rem}
  .lang > svg{display:none}
}