/* ==========================================================================
   Paginile interioare. Hero-ul de pagină și blocurile care se repetă pe
   For Organisations, Join Our Network și About vin din conceptul B: cadru
   panoramic, text în spațiul negru, o linie roz care structurează.
   Praguri: 576 / 768 / 992 / 1200.
   ========================================================================== */

/* --- hero de pagină interioară ------------------------------------------- */
.phero{position:relative;overflow:hidden}
.phero .frame{
  display:grid;grid-template-columns:minmax(0,1fr);
  padding-top:calc(var(--mast-h) + clamp(20px,4svh,40px));
}
.phero .words{padding-bottom:clamp(28px,4vw,56px)}
/* h1-ul de pagină interioară nu împrumută scara hero-ului de pe Home:
   la 1440 titlul se rupea pe șase rânduri și ieșea din ecran */
.phero h1{font-size:var(--d2);max-width:18ch}
.phero .intro{
  margin-top:clamp(20px,2.4vw,32px);max-width:52ch;
  font-size:var(--t-lead);line-height:1.5;color:var(--mute);
}
.phero .eyebrow{margin-bottom:clamp(14px,1.6vw,22px)}
.phero figure{position:relative;margin-inline:calc(var(--gutter) * -1)}
.phero img{
  width:100%;height:clamp(300px,78vw,440px);object-fit:cover;
  filter:grayscale(1) contrast(1.06);
}
.phero .band-line{position:absolute;left:0;right:0;bottom:0;height:var(--seam);background:var(--pink)}

/* --- declarație: o propoziție care ține un ecran -------------------------
   ⚠ Selectorul era `.claim p` și prindea tot din secțiune: eticheta, textul
   curent, chiar și citatele. Doar propoziția marcată explicit crește. */
.claim .statement{
  font-size:clamp(22px,2.6vw,40px);line-height:1.28;max-width:34ch;font-weight:400;
}
.claim .after{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--stack);
  margin-top:clamp(26px,3vw,44px);
}

/* --- blocul cu linie roz verticală (Our Approach) ----------------------- */
.stack-line{border-left:var(--seam) solid var(--pink);padding-left:clamp(20px,2.4vw,40px)}
.stack-line p + p{margin-top:clamp(16px,1.8vw,26px)}

/* --- serviciile: patru blocuri cu descriere ----------------------------- */
.services{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:1px;background:var(--rule);margin-top:clamp(28px,3.4vw,52px);
}
.service{background:var(--ink);padding:clamp(26px,2.8vw,44px) clamp(20px,2.2vw,36px);min-width:0}
.service .num{
  font-family:var(--display);font-weight:800;font-size:clamp(34px,3vw,48px);
  color:var(--pink);line-height:.86;display:block;
  margin-bottom:clamp(14px,1.6vw,22px);
}
.service h3{font-size:var(--d4);max-width:18ch}
.service p{margin-top:clamp(12px,1.4vw,18px);color:var(--mute);max-width:44ch}

/* --- banda de focus: o linie, pe toată lățimea -------------------------- */
.focus{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.focus .shell{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.8vw,24px);
  padding-block:clamp(28px,3.4vw,52px);
}
.focus p{font-size:clamp(17px,1.6vw,24px);line-height:1.4;max-width:46ch}

/* --- închiderea paginii -------------------------------------------------- */
.finish .big{font-size:clamp(19px,2vw,28px);line-height:1.4;max-width:46ch;font-weight:400}
.finish .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3vw,42px);align-items:center}

/* ==========================================================================
   Praguri
   ========================================================================== */
@media (min-width:768px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .claim .after{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,56px)}
  .focus .shell{grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:baseline}
}
@media (min-width:992px){
  /* textul stă în stânga, imaginea ocupă dreapta cadrului, ca la conceptul B */
  .phero .frame{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    align-items:center;gap:clamp(32px,4vw,72px);
    padding-bottom:clamp(40px,5vw,80px);
  }
  .phero .words{padding-bottom:0}
  .phero figure{margin-inline:0 calc(var(--gutter) * -1)}
  .phero img{height:clamp(420px,44vw,620px)}
}

/* --- Meet the team ------------------------------------------------------
   Portretele primite sunt 500×500, decupate în cerc, cu fundaluri diferite
   (unul alb, unul închis), deci nu arată ca o echipă la dimensiune mare. Le
   ținem mici, cu inel roz, iar textul poartă greutatea. Când vin originalele
   necropate, trec la portret dreptunghiular editorial. */
.team{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(36px,4.4vw,72px);margin-top:clamp(30px,3.6vw,56px)}
.person{min-width:0}
/* Cu originalele primite pe 05.09, portretul trece de la cerc mic la cadru
   editorial 4:5. Cercul era o soluție pentru pozele decupate din pachet, cu
   fundaluri diferite; alb-negru, contrast normalizat și aceeași încadrare le
   fac să se citească ca o pereche. */
.person .face{
  width:100%;max-width:clamp(220px,26vw,320px);aspect-ratio:4/5;
  overflow:hidden;margin-bottom:clamp(20px,2.2vw,30px);position:relative;
}
.person .face::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:var(--seam);
  background:var(--pink);
}
.person .face img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.person h3{font-size:var(--d4)}
.person .role{
  color:var(--pink);font-size:var(--t-eyebrow);letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;font-weight:600;margin-top:10px;
}
.person .bio{margin-top:clamp(16px,1.8vw,24px);max-width:46ch}
.person .bio p + p{margin-top:1em}

/* --- două replici de client, mari, ca material de gândire --------------- */
.quotes{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2.2vw,30px);margin-top:clamp(26px,3vw,44px)}
.quotes p{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(22px,2.6vw,40px);line-height:1;
  border-left:var(--seam) solid var(--pink);padding-left:clamp(18px,2vw,30px);
}

@media (min-width:768px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
}

/* --- pagina legală ------------------------------------------------------
   Fără hero, fără imagini: o coloană de text lizibilă, în ritmul paginii. */
.legal{padding-block:calc(var(--mast-h) + clamp(28px,5svh,56px)) var(--section-y)}
.legal h1{font-size:var(--d2);margin-top:clamp(14px,1.6vw,22px)}
.legal-note{
  margin-top:clamp(24px,3vw,40px);max-width:64ch;color:var(--mute);
  border-left:var(--seam) solid var(--pink);padding-left:clamp(18px,2vw,30px);
}
.legal-note strong{color:var(--paper)}
.legal-body{margin-top:clamp(34px,4vw,64px);max-width:68ch}
.legal-body h2{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(20px,1.9vw,28px);line-height:1;
  margin-top:clamp(30px,3.4vw,52px);padding-top:clamp(18px,2vw,28px);
  border-top:1px solid var(--rule);
}
.legal-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal-body p{margin-top:clamp(12px,1.4vw,18px);color:var(--mute)}