/* ==========================================================================
   Rareș Bogdan — shared stylesheet
   Design canvas: 1440px · container: 1200px
   ========================================================================== */

/* Tokens ------------------------------------------------------------------ */
:root {
  --navy: #0f223d;
  --navy-soft: #1b3255;
  --gold: #c9a84c;
  --gold-soft: #d0b362;
  --grey: #f5f5f5;
  --white: #fff;
  --off-white: #f5f5f5;
  --ink: #282828;
  --ink-soft: #282828;
  --footer-text: #8a93a3;

  --serif: "Playfair Display", "Times New Roman", Times, serif;
  --quote: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* type scale — lifted from the Figma text styles / layer values */
  --t-body: 14px;          /* Montserrat 400 · 14/26 · +1.4 */
  --t-body-lh: 26px;
  --t-body-ls: .1em;
  --t-h2: 36px;            /* Playfair Display 600 · 36/50 */
  --t-h2-lh: 50px;
  --t-quote: 24px;         /* Cormorant Garamond 600 · 24/30 */
  --t-quote-lh: 30px;
  --t-lead: 20px;          /* Montserrat 400 · 20/30 · +2 */
  --t-lead-lh: 30px;
  --t-stat: 40px;          /* Playfair Display 500 · 40/75 */

  --container: 1200px;   /* widest real row in the file is 1209 (Desktop-12 cards) */
  --gutter: 24px;
  --pad-section: 128px;  /* file observes 133 / 132 / 108 — normalised */
  --pad-footer: 40px;
  --header-h: 61px;
}

/* Reset ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0;
  margin: 0;
  color: var(--navy);
  line-height: 1.28;
}

p { margin: 0 0 22px; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--navy); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Layout helpers ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--pad-section); }
.section--navy { background: var(--navy); color: rgba(255, 255, 255, .88); }
.section--grey { background: var(--grey); }
.section--tight { padding-block: 96px; }
.pt-0 {
  padding-top: 0;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--navy);
  padding: 10px 18px;
  font-size: 12px;
  font-weight: 600;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Eyebrow ----------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 0 34px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1;
}
.eyebrow::after {
  content: "";
  width: 52px;
  height: 1px;
  background: var(--gold);
  margin-top: 10px;
}

/* Gold rule to the left of a heading / quote ------------------------------- */
.ruled {
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  margin-left: 0;
}

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 163px;
  min-height: 34px;
  padding: 4px 22px;
  background: var(--gold);
  color: var(--white);
  border: 0;
  font-size: 14px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.btn:hover { background: #b8963c; transform: translateY(-1px); }
.btn--hero { min-width: 284px; min-height: 44px; }
.btn--sm { min-width: 123px; min-height: 32px; padding: 2px 18px; }
.btn--split { padding-right: 0; gap: 0; }
.btn__sep {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding-inline: 15px;
  margin-left: 25px;
  border-left: 1px solid rgba(255, 255, 255, .6);
}
.btn__chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--white);
  border-bottom: 1.5px solid var(--white);
  transform: rotate(45deg) translateY(-2px);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--navy);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 100%;
}

.logo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0;
  color: var(--gold);
  text-decoration: none;
  white-space: nowrap;
}
.logo span { color: var(--off-white); }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 23px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  color: var(--off-white);
  font-size: 14px;
  line-height: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.nav__link:hover { color: var(--gold); }
.nav__link[aria-current="page"] { color: var(--gold); }

.epp { flex: none; position: relative;top:-6px;}
.epp img, .epp svg { width: 111px; height: 55px; object-fit: contain; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--white);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle span { margin-inline: auto; position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Heroes
   ========================================================================== */
.hero { position: relative; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position:top }
.hero .container { position: relative; z-index: 2; }

/* Home ---------------------------------------------------------------------*/
.hero--home {
  background: var(--navy);
  min-height: 1043px;
  display: flex;
  align-items: center;
}
.hero--home .hero__media {
  left: auto;
  width: 1077px;
  max-width: 76%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 140px);
          mask-image: linear-gradient(to right, transparent 0, #000 140px);
}
.hero__copy { max-width: 520px; color: #fff; }

/* Playfair Display 400 · 64/85.3 — "Rareș" #F5F5F5, "Bogdan" #C9A84C */
.hero__wordmark {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 64px;
  line-height: 85.31px;
  letter-spacing: 0;
  color: var(--gold);
  margin: 0 0 22px;
}
.hero__wordmark span { color: var(--off-white); display: block; }

.hero__lead {
  font-size: var(--t-lead);
  line-height: var(--t-lead-lh);
  font-weight: 400;
  letter-spacing: .1em;
  max-width: 506px;
  margin-bottom: 30px;
}
.hero__note {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  color: #fff;
  max-width: 301px;
  margin-bottom: 51px;
}

/* Editorial hero (Ce fac / Despre mine) ------------------------------------*/
.hero--photo { min-height: 776px; display: flex; align-items: center; }
.hero--photo .hero__copy { max-width: 495px; color: var(--navy); }

.hero__quote {
  font-family: var(--quote);
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  letter-spacing: 0;
  color: var(--navy);
  margin-left: 0;
}
.hero__quote p + p { margin-top: 34px; }

.hero--despre { min-height: 612px; align-items: flex-start; padding-top: 78px; }
.hero--despre h1 { font-family: var(--quote); font-size: 36px; line-height: 50px; margin-bottom: 34px; }
.hero__creed { margin: 0; padding: 0; list-style: none; max-width: 320px; }
.hero__creed li {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  color: var(--ink);
  margin-bottom: 14px;
}

/* Activitate ---------------------------------------------------------------*/
.hero--activitate { min-height: 771px; display: flex; align-items: center; }
.hero--activitate .hero__copy {
  max-width: 540px;
  margin-left: auto;
  color: #fff;
  position: relative;
  top:-100px;
}
.hero--activitate h1 { color: #fff; font-size: var(--t-h2); line-height: var(--t-h2-lh); }

/* Direcții -----------------------------------------------------------------*/
.hero--plain { min-height: 780px; }
.hero--plain .hero__media { position: static; }
.hero--plain .hero__media img { height: 780px; }

/* ==========================================================================
   Home — intro
   ========================================================================== */
.intro-grid {
  display: grid;
  grid-template-columns: 476px 1fr;
  gap: 92px;
  align-items: start;
}
.intro-figure { position: relative; padding:0;margin:0; }
.intro-figure img { position: relative; z-index: 2; width: 100%; }
.intro-figure::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 260px;
  border: 1px solid var(--gold);
  z-index: 1;
}

.intro h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); margin-bottom: 22px; }
.intro .ruled {
  font-family: var(--quote);
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  letter-spacing: 0;
  color: var(--navy);
  margin-bottom: 30px;
}
.intro p { max-width: 633px; color: var(--ink); }

.stats {
  display: flex;
  gap: 46px;
  margin-top: 52px;
  align-items: flex-start;
}
.stat { flex: 1; }
.stat__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-stat);
  line-height: 52px;
  color: var(--gold);
  margin-bottom: 10px;
}
.stat__label {
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  text-transform: uppercase;
  color: var(--ink);
}

/* ==========================================================================
   Home — creed band
   ========================================================================== */
.creed { position: relative; overflow: hidden; }
.creed__inner { position: relative; z-index: 2; max-width: 800px; }
.creed h2 { color: #fff; font-size: var(--t-h2); line-height: var(--t-h2-lh); max-width: 837px; margin-bottom: 44px; }
.creed .ruled {
  font-family: var(--sans);
  font-size: var(--t-lead);
  line-height: var(--t-lead-lh);
  letter-spacing: .1em;
  color: var(--gold);
  max-width: 100%;
  margin-left: 0;
}
.creed__figure {
  position: absolute;
  right: 110px;
  bottom: 0;
  z-index: 1;
  width: 420px;
}
.creed__figure img { width: 100%; filter: grayscale(1);}

/* ==========================================================================
   Home — strategic directions
   ========================================================================== */
.strategy { display: grid; gap: 96px; }
.strategy__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}
.strategy__row--flip .strategy__text { order: 2; }
.strategy__text h3 { font-size: var(--t-h2); line-height: var(--t-h2-lh); margin-bottom: 22px; max-width: 424px; }
.strategy__text .ruled { color: var(--navy); max-width: 484px; }
.strategy__text .btn { margin-top: 30px; }
.strategy__row img { width: 100%; }

/* ==========================================================================
   Despre mine
   ========================================================================== */
.pull-quote {
  max-width: 1034px;
  margin-inline: auto;
  text-align: center;
  font-family: var(--quote);
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  letter-spacing: 0;
  color: var(--navy);
}

.values-grid {
  display: grid;
  grid-template-columns: 1fr 456px;
  gap: 70px;
  align-items: start;
  position: relative;
}
.values-grid p { color: var(--ink); }

.quote-band {
    background: var(--navy);
    color: #fff;
    padding: 30px 34px;
    font-family: var(--quote);
    font-weight: 600;
    font-size: var(--t-quote);
    line-height: var(--t-quote-lh);
    letter-spacing: 0;
    margin-top: 34px;
    margin-left: 0;
    width: 873px;
    position: absolute;
    bottom: -24px;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 62px;
  margin-top: 62px;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }

.gallery--split {
  grid-template-columns: 450px 1fr;
  align-items: stretch;
}
.gallery--split .quote-band {
  margin: 0;
  display: flex;
  align-items: center;
  padding: 40px 56px;
  position: static;
  width: 100%;
}

/* Timeline -----------------------------------------------------------------*/
.timeline { position: relative; margin-top: 20px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--gold);
  opacity: .55;
}
.tl {
  position: relative;
  width: 50%;
  padding-right: 56px;
  text-align: right;
  margin-bottom: 46px;
}
.tl:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 0 56px;
  text-align: left;
}
.tl__year {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-stat);
  line-height: 52px;
  color: var(--gold);
  margin-bottom: 12px;
}
.tl p { color: #fff;max-width:400px;margin-left:auto; }

/* Closing band -------------------------------------------------------------*/
.closing { position: relative; min-height: 699px; display: flex; align-items: center; }
.closing__copy {
  max-width: 355px;
  margin-left: auto;
  font-family: var(--quote);
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  letter-spacing: 0;
  color: #fff;
}

/* ==========================================================================
   Activitate parlamentară
   ========================================================================== */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.metric__num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-stat);
  line-height: 52px;
  color: var(--gold);
  margin-bottom: 12px;
}
.metric p { color: var(--ink); }

/* 3 x 332px columns, 84px gutters. Card 13 sits in column 1 of row 5; the big
   photo spans columns 2-3 of the same row and bottom-aligns with the small
   photo below card 13. Straight from the frame — not a separate block. */
.roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 84px;
  margin-top: 72px;
}
.role {
  background: var(--navy);
  color: #fff;
  font-family: var(--quote);
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  letter-spacing: 0;
  padding: 37px 26px 37px 59px;
  min-height: 179px;
  display: flex;
  align-items: flex-start;
  transition: transform .3s ease;
}
.role:hover { transform: translateY(-4px); }

.roles__fig { margin: 0; }
.roles__fig img { width: 100%; height: 100%; object-fit: cover; }
.roles__fig--big { grid-column: 2 / 4; grid-row: 5 / span 2; }
.roles__fig--small { grid-column: 1; grid-row: 6; }

/* ==========================================================================
   Ce fac pentru România
   ========================================================================== */
.schengen {
  display: grid;
  grid-template-columns: 1fr 507px;
  gap: 88px;
  align-items: start;
}
.schengen h2 {
  font-family: var(--quote);
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  margin-bottom: 30px;
}
.schengen p { color: var(--ink); }
.schengen em { color: var(--gold); font-style: normal; }

.firsts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 96px;
}
.first {
  font-family: var(--quote);
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  letter-spacing: 0;
  color: #fff;
}
.section--navy { overflow: visible; }
.first-note h2 {
  color: #fff;
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  /* Frame is 547x153 = 3 lines at 36/50. Chrome sets Playfair wider than Figma,
     so 547px would wrap to 4 and drag the photo down with the band. The breaks
     are explicit in the markup instead; this just has to clear the longest line. */
  max-width: 660px;
  margin-top: 66px;
}

.diaspora {
  display: grid;
  grid-template-columns: 1fr 507px;
  gap: 82px;
  align-items: start;
}
.diaspora h2 {
  font-family: var(--quote);
  font-weight: 600;
  font-size: var(--t-quote);
  line-height: var(--t-quote-lh);
  margin-bottom: 34px;
}
.diaspora h3 {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  color: var(--navy);
  margin: 34px 0 18px;
}
.diaspora p { color: var(--ink); }
/* The group photo straddles the navy band above it: 203px of it sits in the
   navy, 133px spills into the white. Figma: photo y=2380, band ends y=2583.
   Pulling the whole media column up past the section padding reproduces that,
   and because this section comes after the navy one in the DOM the photo paints
   over the band rather than under it. */
.diaspora__media {
  display: grid;
  gap: 31px;
  margin-top: calc(-1 * (var(--pad-section) + 203px));
  position: relative;
  z-index: 1;
}
.diaspora__media img { width: 100%; }

/* FAQ ----------------------------------------------------------------------*/
.faq__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.faq__q {
  background: var(--grey);
  border: 0;
  padding: 20px 18px;
  min-height: 62px;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.faq__q:hover { background: #ececec; }
.faq__q[aria-expanded="true"] { background: var(--gold); color: var(--navy); font-weight: 500; }

.faq__panel {
  background: var(--grey);
  margin-top: 22px;
  padding: 34px 40px;
  color: var(--ink);
}
.faq__panel[hidden] { display: none; }

/* ==========================================================================
   Direcții strategice
   ========================================================================== */
.dir-group + .dir-group { margin-top: 96px; }
.dir-group > h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); margin-bottom: 34px; }

.dir-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px 138px;
  align-items: start;
}

.speech {
  background: var(--grey);
  padding: 8px 29px 12px 37px;
  display: flex;
  flex-direction: column;
}
.speech__title {
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: var(--t-body-lh);
  letter-spacing: var(--t-body-ls);
  color: var(--navy);
  margin: 0;
}
.speech__date {
  color: var(--gold);
  margin-bottom: 20px;
}
.speech__quote {
  background: var(--white);
  padding: 18px 20px;
  margin: 0;
  color: #000;
}
.speech .btn { align-self: flex-end; margin-top: 22px; }

.dir-figure img { width: 100%; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--navy);
  color: #fff;
  padding: var(--pad-footer) 0 30px;
  min-height: 270px;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr 290px 366px;
  gap: 40px;
}
.site-footer h2 {
  font-family: var(--serif);
  font-size: var(--t-h2);
  line-height: var(--t-h2-lh);
  color: #fff;
  margin-bottom: 19px;
}
.footer-mail {
  display: inline-block;
  color: #fff;
  margin-bottom: 31px;
}
.socials { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.socials a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 50%;
  color: #fff;
  transition: background .25s ease, color .25s ease;
  background: #fff;
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.socials svg { width: 24px; height: 24px; }

.site-footer address {
  font-style: normal;
  color: #fff;
}
.site-footer address a { color: #fff; }

.site-footer__legal {
  margin-top: 34px;
  text-align: right;
  font-size: 11.6px;
  line-height: 26px;
  letter-spacing: .1em;
  color: #fff;
}
.site-footer__legal a { color: inherit; text-decoration: none; }
.site-footer__legal a:hover { color: var(--gold); }

/* ==========================================================================
   Motion
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .intro-grid { grid-template-columns: 380px 1fr; gap: 56px; }
  .schengen,
  .diaspora { grid-template-columns: 1fr 380px; gap: 48px; }
  .dir-grid { gap: 40px 60px; }
  .strategy__row { gap: 52px; }
  .gallery { gap: 32px; }
  .gallery--split { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 960px) {
  .nav-toggle { display: block; order: 3; }
  .epp { order: 2; margin-left: auto; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    background: var(--navy);
    margin: 0;
    padding: 8px 0 26px;
    display: none;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; gap: 0; align-items: stretch; }
  .nav__link { display: block; padding: 15px 24px; }

  .hero--home,
  .hero--photo,
  .hero--despre,
  .hero--activitate { min-height: 0; padding-block: 64px; display: block; }
  .hero--plain { min-height: 0; }
  .hero--home .hero__media,
  .hero--photo .hero__media,
  .hero--activitate .hero__media { position: relative; width: 100%; max-width: none; height: 320px; -webkit-mask-image: none; mask-image: none; margin-bottom: 34px; }
  .hero--home .hero__media { order: -1; }
  .hero--activitate .hero__copy,
  .hero__copy { max-width: none; }
  .hero--activitate h1 { font-size: 24px; }
  .hero--plain .hero__media img { height: 320px; }
  .hero--despre { padding-top: 40px; }

  .diaspora__media { margin-top: 0; }
  .first-note h2 br { display: none; }

  .intro-grid,
  .values-grid,
  .schengen,
  .diaspora,
  .strategy__row,
  .dir-grid,
  .firsts,
  .gallery--split { grid-template-columns: 1fr; gap: 40px; }
  .strategy__row--flip .strategy__text { order: 0; }
  .intro-figure::after { display: none; }
  .intro-figure { padding: 0; }

  .metrics { grid-template-columns: 1fr 1fr; gap: 34px; }
  .stats { gap: 28px; }
  .roles { grid-template-columns: 1fr 1fr; gap: 26px; }
  .roles__fig--big { grid-column: 1 / -1; grid-row: auto; }
  .roles__fig--small { grid-column: 1 / -1; grid-row: auto; }
  .roles__fig img { height: auto; }
  .role { padding: 28px 24px; min-height: 0; }
  .gallery { grid-template-columns: 1fr 1fr; gap: 20px; }
  .faq__list { grid-template-columns: 1fr 1fr; }

  .timeline::before { left: 6px; }
  .tl, .tl:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 0 30px;
    text-align: left;
  }

  .creed__figure { display: none; }
  .creed__inner { max-width: none; }
  .closing { min-height: 0; padding-block: 300px 64px; }
  .closing__copy { max-width: none; }

  .site-footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .site-footer__legal { text-align: left; }
  .section { padding-block: 64px; }
}

/* Mobile type scale — lifted from iPhone 16 - 1 / 16 - 2, not scaled down
   from desktop. Montserrat 12/20 body, Playfair 16 headings, Cormorant 16/25
   quotes, 23px gutter, stats stay at 40/75. */
@media (max-width: 620px) {
  :root {
    --t-body: 12px;
    --t-body-lh: 20px;
    --t-h2: 16px;
    --t-h2-lh: 24px;      /* file says 16/50 — that's a fixed-leading artefact */
    --t-quote: 16px;
    --t-quote-lh: 25px;
    --t-lead: 16px;
    --t-lead-lh: 25px;
    --gutter: 23px;
    --pad-section: 64px;
  }

  .logo { font-size: 18px; line-height: 24px; }
  .epp img, .epp svg { width: 85px; height: 42px; }

  .hero__wordmark { display: none; }          /* not present on the mobile frames */
  .hero__lead { font-size: var(--t-lead); line-height: var(--t-lead-lh); }
  .btn--hero { min-width: 188px; min-height: 34px; }
  .btn { font-size: 12px; }

  .stat__num,
  .metric__num,
  .tl__year { font-size: 40px; line-height: 52px; }
  .stat__label { font-size: 14px; line-height: 26px; }

  .metrics,
  .roles,
  .gallery,
  .faq__list { grid-template-columns: 1fr; }
  .stats { flex-direction: column; gap: 30px; }
  .strategy { gap: 56px; }
  .quote-band { padding: 22px 24px; }
  .speech { padding: 8px 20px 12px 20px; }
}



.intro-figure:before {
    content:'';
    position:absolute;
    bottom:-50px;
    right:-50px;
    width:315px;
    height:410px;
    border:1px solid #C9A84C;
}



.tl:nth-child(even) p {
    margin-left: 0;
}


.hero.hero--photo.hero--cefac .hero__quote p {
    font-size: 36px;
    line-height: 50px;
}

figure.dir-figure {
  margin:0;
}



/* ==========================================================================
   Responsive fixes — keep at END of file.
   .intro-figure:before (~line 969) lives outside all media queries,
   so any override must come after it to win the cascade.
   ========================================================================== */

/* Header runs out of room between the burger breakpoint and the desktop grid */
@media (max-width: 1100px) {
  .site-header__inner { gap: 20px; }
  .nav__list { gap: 14px; }
}

@media (max-width: 960px) {
  /* gold frame sits 50px outside the figure -> scrollbar on every page */
  .intro-figure:before { display: none; }

  /* 873px absolute box never reset when the grid goes single-column */
  .quote-band {
    position: static;
    width: 100%;
    bottom: auto;
    margin-top: 24px;
  }
}

/* 320px phones — header still 3px over */
@media (max-width: 380px) {
  .site-header__inner { gap: 12px; }
  .epp img, .epp svg { width: 88px; height: 44px; }
}



.intro-figure img {
  height: auto;
}
.schengen img {
  height: auto;
}
.diaspora__media img {
  height: auto;
}

.dir-figure img {
  height: auto;
}

.values-grid img {
  height: auto;
}
.strategy__row img {
  height:auto;
}

@media (max-width:960px) {
  .hero--photo {
    padding-top:0;
  }
  .hero--activitate {
    padding:0;
  }
  .hero--home {
    padding-top: 0;
  }
}

@media (max-width:576px) {
  .hero--activitate .hero__copy {
    top:0;
  }
  .hero--activitate .hero__media {
    height:100%;
  }
  .hero--activitate h1 {
    color:var(--navy);
    line-height:50px;
  }
}