/* =========================================================
   DOCUBOX — East African Documentary Film Fund
   ========================================================= */

:root{
  /* Brand palette */
  --red:          #D6191A;
  --red-deep:     #B81415;
  --red-bright:   #E02B28;
  --yellow:       #FBC01C;
  --yellow-brand: #FBBD1A;   /* programs heading + funding card */
  --green-programs: #27AE60; /* the programs section ground */
  --yellow-deep:  #F0A800;
  --green:        #2FAC5E;
  --green-deep:   #24904C;
  --orange:       #EF5126;
  --purple:       #625596;
  --pink:         #EF8B85;
  --cta:          #E02528;   /* every call-to-action button */
  --cta-green:    #2DB674;   /* except the funding CTA */
  --ink:          #2E353D;
  --ink-soft:     #454E57;
  --grey:         #E4E4E6;
  --grey-mid:     #C9C9CC;
  --white:        #FFFFFF;

  --shell:  1280px;
  --header-h: 96px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:24px;
}

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Display type ---------- */
.display{
  font-family:'Archivo','Arial Black',sans-serif;
  font-weight:900;
  font-stretch:88%;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.02;
  margin:0;
}
.display.yellow{ color:var(--yellow); }
.display.white { color:var(--white); }
.display.center{ text-align:center; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  position:relative;
  display:inline-block;
  font-size:14px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--white);
  background:var(--cta);
  padding:18px 36px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}

/* The ring that pulses outward on hover. Kept on a pseudo-element so it does
   not fight the box-shadow that .btn-shadow needs. */
.btn::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:2px solid currentColor;
  opacity:0;
  pointer-events:none;
}

.btn:hover{
  box-shadow:0 12px 26px rgba(0,0,0,.25);
  animation:btn-breathe 1.6s var(--ease) infinite;
}
.btn:hover::after{ animation:btn-pulse 1.6s var(--ease) infinite; }
.btn:active{ transform:translateY(-1px); animation:none; }

@keyframes btn-breathe{
  0%,100%{ transform:translateY(-3px) scale(1); }
  50%    { transform:translateY(-3px) scale(1.035); }
}
@keyframes btn-pulse{
  0%  { opacity:.55; transform:scale(1); }
  100%{ opacity:0;   transform:scale(1.3); }
}

/* The funding CTA keeps its own green. */
.btn-green{ background:var(--cta-green); }

/* the double-ring treatment from the green section */
.btn-shadow{ box-shadow:0 0 0 6px rgba(0,0,0,.12); }
.btn-shadow:hover{ box-shadow:0 0 0 6px rgba(0,0,0,.18), 0 12px 26px rgba(0,0,0,.2); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--red);
  transition:box-shadow .3s var(--ease), padding .3s var(--ease);
}
.site-header.scrolled{ box-shadow:0 6px 24px rgba(0,0,0,.22); }

.nav-shell{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  transition:height .3s var(--ease);
}
.site-header.scrolled .nav-shell{ height:74px; }

/* Logo */
/* The wordmark is drawn with fill="currentColor", so it takes the
   colour of whatever it sits on. */
.logo{ display:block; flex:0 0 auto; color:var(--white); }
.logo-svg{ width:132px; height:auto; display:block; }

/* Nav */
.main-nav{ margin-inline:auto; }
.nav-list{ display:flex; align-items:center; gap:8px; }

.nav-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:inherit;
  font-size:16px;
  color:var(--white);
  background:none; border:0;
  padding:12px 18px;
  border-radius:6px;
  cursor:pointer;
  transition:background-color .2s var(--ease), opacity .2s var(--ease);
}
.nav-link:hover,
.nav-link:focus-visible{ background:rgba(255,255,255,.14); outline:none; }

.caret{
  width:0; height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--white);
  transition:transform .25s var(--ease);
}
.has-dropdown[data-open="true"] .caret{ transform:rotate(180deg); }

/* Dropdowns */
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 14px); left:0;
  min-width:238px;
  background:var(--white);
  border-radius:10px;
  padding:10px 0;
  box-shadow:0 18px 44px rgba(0,0,0,.24);
  opacity:0; visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.dropdown::before{
  content:''; position:absolute; top:-8px; left:24px;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:9px solid var(--white);
}
.has-dropdown[data-open="true"] .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown a{
  display:block;
  padding:11px 24px;
  font-size:15.5px;
  color:var(--ink);
  transition:background-color .18s var(--ease), color .18s var(--ease);
}
.dropdown a:hover{ background:var(--grey); color:var(--red); }

/* Hamburger */
.nav-toggle{
  display:none;
  flex-direction:column; gap:6px;
  width:46px; height:46px;
  align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{
  display:block; width:26px; height:3px;
  background:var(--white); border-radius:2px;
  transition:transform .3s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* =========================================================
   HOME — sizes and assets measured from mydocubox.org at 1440px
   ========================================================= */
.display-big{
  font-family:'Big 500','Archivo','Arial Black',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.85;
  margin:0;
}

/* Halo ring that sits behind the live site's buttons */
.btn-halo{ box-shadow:0 0 0 14px rgba(0,0,0,.08); }
.btn-halo:hover{ box-shadow:0 0 0 14px rgba(0,0,0,.12), 0 12px 26px rgba(0,0,0,.2); }

/* ---------- Showreel: YouTube background video ---------- */
.showreel{
  position:relative;
  height:470px;
  background:#000;
  overflow:hidden;
}
.showreel-media{
  position:absolute;
  top:50%; left:50%;
  /* cover the band at 16:9 whatever its width */
  width:max(100%, calc(470px * 16 / 9));
  height:max(470px, 56.25vw);
  transform:translate(-50%,-50%);
  border:0;
  pointer-events:none;
}

/* ---------- Hero ---------- */
.hero{
  background:#FBBD1A url("assets/home/Group-54.png") center center / cover no-repeat;
  overflow:hidden;
}
.hero-shell{
  max-width:1440px;
  margin-inline:auto;
  min-height:800px;
  padding:160px 0 0 160px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.hero-copy{ align-self:flex-start; padding-bottom:60px; }
.hero-copy h1{ font-size:90px; color:var(--white); }
.hero-lede{
  margin:14px 0 30px;
  font-size:20px;
  line-height:1.25;
  color:#29303A;
}
.hero-figure{ flex:0 0 auto; align-self:flex-end; }
.hero-photo{ width:682px; max-width:none; height:auto; }

/* ---------- Programs ---------- */
.programs{ background:#27AE60; }
.programs-shell{
  max-width:1440px;
  margin-inline:auto;
  padding:80px 160px;
  display:flex;
  align-items:center;
}
.programs-figure{ flex:0 0 auto; margin-left:-30px; }
.programs-photo{ width:610px; height:auto; will-change:transform; }
.programs-copy{ flex:1 1 auto; min-width:0; margin-left:-10px; }
.programs-copy h2{ font-size:60px; color:#FBBD1A; }
.programs-copy p{
  margin:22px 0 22px;
  font-size:22px;
  line-height:1.25;
  color:var(--white);
}
.programs .btn-halo{ box-shadow:0 0 0 14px rgba(0,0,0,.1); }

/* ---------- Our Films ---------- */
.films{
  background:#E5E5E5 url("assets/home/Group-56.png") center right / cover no-repeat;
  overflow:hidden;
}
.films-shell{
  max-width:1440px;
  margin-inline:auto;
  padding:0 160px;
  display:flex;
  align-items:flex-end;
}
.films-figure{ flex:0 0 auto; margin-left:55px; }
.films-photo{ display:block; width:591px; height:auto; will-change:transform; }
.films-action{ flex:1 1 auto; padding:0 0 60px 95px; }
.films-cta{
  background:#F24E1E;
  font-size:16px;
  letter-spacing:.14em;
  padding:16px 40px;
  box-shadow:0 0 0 14px rgba(242,78,30,.25);
}
.films-cta:hover{ box-shadow:0 0 0 14px rgba(242,78,30,.35), 0 12px 26px rgba(0,0,0,.2); }

/* ---------- Testimonials ---------- */
.testimonials{ background:#E02528; }
.testimonials-shell{
  max-width:1440px;
  margin-inline:auto;
  padding:66px 160px 144px;
}
.testimonials h2{ font-size:56px; color:#FBBD1A; text-align:center; }

.carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:32px;
  margin-top:60px;
}
.carousel-window{ flex:1; overflow:hidden; padding-top:66px; }
.carousel-track{
  display:flex;
  align-items:flex-start;
  gap:16px;
  transition:transform .55s var(--ease);
  will-change:transform;
}

.t-card{
  flex:0 0 calc((100% - 32px)/3);
  position:relative;
  background:var(--white);
  border-radius:30px;
  padding:96px 22px 32px;
  text-align:center;
}
.t-avatar{
  position:absolute;
  top:-66px; left:50%;
  transform:translateX(-50%);
  width:140px; height:140px;
}
.t-photo{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
}
.t-flag{
  position:absolute; top:0; right:-4px;
  width:45px; height:45px;
  border-radius:50%;
  object-fit:cover;
}
.t-rule{
  display:block;
  width:42px; height:3px;
  background:#E02528;
  margin:0 auto 26px;
}
.t-card h3{
  margin:0;
  font-size:20px;
  font-weight:700;
  letter-spacing:.3em;
  color:#29303A;
}
.t-role{
  margin:2px 0 0;
  font-size:14px;
  line-height:1.5;
  color:#29303A;
}
.t-quote{
  margin:30px 0 0;
  font-size:15px;
  line-height:1.6;
  color:#29303A;
}

.carousel-arrow{
  flex:0 0 auto;
  width:30px; height:30px;
  border-radius:50%;
  border:0;
  background:rgba(255,255,255,.4);
  color:#E02528;
  cursor:pointer;
  display:grid; place-items:center;
  padding:0;
  margin-top:66px;
  transition:background-color .25s var(--ease), transform .25s var(--ease);
}
.carousel-arrow:hover{ background:rgba(255,255,255,.6); transform:scale(1.08); }
.carousel-arrow:disabled{ opacity:.5; cursor:default; transform:none; }
.carousel-arrow svg{
  width:18px; height:18px;
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.carousel-dots{ display:none; }

/* ---------- Funding CTA ---------- */
.funding{
  position:relative;
  background:#E5E5E5;
  padding:40px 8px 80px;
  text-align:center;
}
.coin{
  position:relative;
  left:50%;
  display:block;
  width:153px; height:auto;
  transform:translateX(-50%);
  z-index:1;
  will-change:transform;
}
.funding-card{
  position:relative;
  margin-top:-50px;
  background:#FBBD1A;
  border-radius:30px;
  padding:35px 150px 50px;
}
.eyebrow{
  margin:0 0 20px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:#29303A;
}
.funding-card h2{
  font-size:60px;
  color:var(--white);
  margin-bottom:60px;
}
.funding .btn-green{ background:#27AE60; box-shadow:0 0 0 14px rgba(39,174,96,.3); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  position:relative;
  background:var(--ink);
  color:var(--white);
  padding-top:74px;
}
/* Brand colour band between the body and the footer.
   Colours live in assets/footer-strip.svg (an external SVG cannot read
   the custom properties above). aspect-ratio scales it proportionally,
   so the diagonals keep their angle at every width. */
.footer-stripes{
  position:absolute; top:0; left:0; right:0;
  /* 20/1440 of the viewport width, floored at 12px. Not aspect-ratio +
     min-height: that pair widens the box to 864px on phones. */
  height:max(12px, 1.3889vw);
  background:url("assets/footer-strip.svg") center/100% 100% no-repeat;
}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:34px;
  padding-bottom:44px;
}
.f-col h4{
  margin:0 0 13px;
  font-size:16px;
  font-weight:700;
  color:var(--white);
}
.f-col li + li{ margin-top:6px; }
.f-col li{ line-height:1.42; }
.f-col a{
  font-size:15.5px;
  color:rgba(255,255,255,.82);
  transition:color .2s var(--ease);
}
.f-col a:hover{ color:var(--yellow); }
.bold-list a{ font-weight:700; color:var(--white); }

.footer-meta{
  display:grid;
  grid-template-columns:1.5fr 1fr 1.4fr;
  gap:40px;
  align-items:start;
  padding-bottom:42px;
}
.meta-item{ display:flex; gap:18px; align-items:flex-start; }
.meta-item p{ margin:0; font-size:16px; color:rgba(255,255,255,.9); }
.meta-item a:hover{ color:var(--yellow); }

.meta-icon{
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius:50%;
  display:grid; place-items:center;
}
.meta-icon.green{ background:var(--green); }
.meta-icon svg{ width:23px; height:23px; fill:var(--white); }

.newsletter h4{ margin:0 0 13px; font-size:16px; font-weight:700; }
.newsletter-form{
  display:flex;
  align-items:center;
  background:transparent;
  border-bottom:2px solid rgba(255,255,255,.45);
  padding-bottom:6px;
  gap:12px;
}
.newsletter-form input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  color:var(--white);
  font-family:inherit;
  font-size:17px;
  padding:10px 4px;
}
.newsletter-form input::placeholder{ color:rgba(255,255,255,.75); }
.newsletter-form input:focus{ outline:none; }
.newsletter-form button{
  flex:0 0 auto;
  background:var(--grey-mid);
  color:var(--white);
  border:0;
  border-radius:6px;
  padding:11px 22px;
  font-family:'Archivo',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .25s var(--ease);
}
.newsletter-form button:hover{ background:var(--green); }
.form-note{
  margin:12px 0 0;
  font-size:14.5px;
  min-height:20px;
  color:var(--yellow);
}

/* The same artwork as the band above the footer, desaturated. Reusing the one
   asset means the two can never drift apart; grayscale() maps each brand colour
   to its luminance, which is what gives the light/mid/dark greys. */
.footer-divider{
  height:max(12px, 1.3889vw);
  background:url("assets/footer-strip.svg") center/100% 100% no-repeat;
  filter:grayscale(1);
}

.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-block:24px 30px;
}
.footer-bottom p{ margin:0; font-size:15px; color:rgba(255,255,255,.72); }
.footer-logo .logo-svg{ width:118px; }

/* =========================================================
   IMAGE PLACEHOLDERS
   Cut-out stand-ins for the black & white brand photography.
   Swap each .placeholder-avatar for an <img> with a
   transparent PNG when the artwork is ready.
   ========================================================= */
.placeholder-scene{
  background:
    radial-gradient(ellipse 120% 80% at 50% 40%, transparent 0 45%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.5) 100%),
    linear-gradient(160deg, #6C7A4B 0%, #8A7C4E 38%, #9C5F36 70%, #7A4226 100%);
}





.placeholder-avatar{
  background-color:#C4C4C4;
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:88% auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 300'%3E%3Cg fill='%23767676'%3E%3Cellipse cx='120' cy='96' rx='48' ry='58'/%3E%3Cpath d='M120 158c-16 0-26 7-31 17l-6 15c-35 9-61 40-66 78l-8 32h222l-8-32c-5-38-31-69-66-78l-6-15c-5-10-15-17-31-17z'/%3E%3C/g%3E%3C/svg%3E");
}
.av-2{ background-color:#BFBFBF; }
.av-3{ background-color:#CBCBCB; }
.av-4{ background-color:#B8B8B8; }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.visible{ opacity:1; transform:none; }

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

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  .nav-link{ padding:12px 12px; font-size:15px; }
  .logo-svg{ width:116px; }
  .footer-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px 28px; }
  .t-card{ flex:0 0 calc((100% - 16px)/2); }
}

@media (max-width:900px){
  :root{ --header-h:76px; }

  .nav-toggle{ display:flex; }

  .main-nav{
    position:fixed;
    top:var(--header-h); left:0; right:0;
    max-height:calc(100vh - var(--header-h));
    overflow-y:auto;
    background:var(--red);
    margin:0;
    padding:8px 0 28px;
    transform:translateY(-120%);
    transition:transform .35s var(--ease);
    box-shadow:0 18px 30px rgba(0,0,0,.25);
  }
  .main-nav.open{ transform:translateY(0); }

  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-list > li{ border-bottom:1px solid rgba(255,255,255,.16); }
  .nav-link{
    width:100%;
    justify-content:space-between;
    padding:17px 26px;
    border-radius:0;
    font-size:17px;
  }

  .dropdown{
    position:static;
    opacity:1; visibility:visible;
    transform:none;
    box-shadow:none;
    background:rgba(0,0,0,.16);
    border-radius:0;
    padding:0;
    display:none;
  }
  .dropdown::before{ display:none; }
  .has-dropdown[data-open="true"] .dropdown{ display:block; }
  .dropdown a{ color:var(--white); padding:13px 42px; font-size:15.5px; }
  .dropdown a:hover{ background:rgba(0,0,0,.2); color:var(--yellow); }

  .showreel{ height:260px; }
  .showreel-media{ width:max(100%, calc(260px * 16 / 9)); height:max(260px, 56.25vw); }

  .hero-shell{ flex-direction:column; align-items:stretch; min-height:0; padding:60px 24px 0; }
  .hero-copy{ padding-bottom:30px; }
  .hero-copy h1{ font-size:56px; }
  .hero-lede br{ display:none; }
  .hero-figure{ align-self:center; }
  .hero-photo{ width:100%; max-width:520px; }

  .programs-shell{ flex-direction:column; padding:50px 24px; text-align:center; }
  .programs-figure{ margin:0; }
  .programs-photo{ width:min(100%,420px); }
  .programs-copy{ margin:20px 0 0; }
  .programs-copy h2{ font-size:42px; }
  .programs-copy p{ font-size:18px; }

  .films{ background-position:center center; }
  .films-shell{ flex-direction:column; align-items:center; padding:60px 24px 0; }
  .films-figure{ margin:0; }
  .films-photo{ width:min(100%,420px); }
  .films-action{ order:-1; padding:0 0 40px; flex:0 0 auto; }
  .films{ background-size:auto 100%; background-position:left center; }

  .testimonials-shell{ padding:50px 16px 60px; }
  .testimonials h2{ font-size:42px; }
  .t-card{ flex:0 0 100%; }
  .carousel{ gap:10px; }

  .funding-card{ padding:70px 20px 46px; }
  .funding-card h2{ font-size:36px; margin-bottom:40px; }

  .site-footer{ padding-top:64px; }
  .footer-cols{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .footer-meta{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-meta .newsletter{ grid-column:1 / -1; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:520px){
  body{ font-size:16px; }
  .shell{ padding-inline:18px; }
  .btn{ padding:16px 28px; font-size:13px; }
  .hero-copy h1{ font-size:42px; }
  .hero-lede{ font-size:17px; }
  .programs-copy h2, .testimonials h2{ font-size:34px; }
  .funding-card h2{ font-size:28px; }
  .films-cta{ font-size:13px; padding:14px 24px; }
  .site-footer{ padding-top:52px; }
  /* Two columns; the three short lists stack beside Partnerships so it
     doesn't leave a hole next to the one-link "Our Films" column. */
  .footer-cols{
    gap:28px 20px; padding-bottom:32px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-areas:"about programs" "partners films" "partners filmbox" "partners impact";
  }
  .footer-cols > .f-col:nth-child(1){ grid-area:about; }
  .footer-cols > .f-col:nth-child(2){ grid-area:programs; }
  .footer-cols > .f-col:nth-child(3){ grid-area:partners; }
  .footer-cols > .f-col:nth-child(4){ grid-area:films; }
  .footer-cols > .f-col:nth-child(5){ grid-area:filmbox; }
  .footer-cols > .f-col:nth-child(6){ grid-area:impact; }
  .f-col h4{ font-size:15px; margin-bottom:8px; }
  .f-col li + li{ margin-top:0; }
  .f-col a{ display:inline-block; padding-block:5px; font-size:14.5px; }
  .footer-meta{ grid-template-columns:1fr; gap:22px; padding-bottom:32px; }
  .meta-item{ gap:14px; }
  .meta-item p{ font-size:15px; }
  .meta-icon{ width:38px; height:38px; }
  .meta-icon svg{ width:19px; height:19px; }
  .footer-bottom{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 20px; padding-block:20px 26px; }
  .footer-bottom p{ font-size:13px; }
  .footer-logo .logo-svg{ width:100px; }
  .t-card{ padding:90px 18px 30px; }
}

/* =========================================================
   MANIFESTO PAGE
   ========================================================= */
/* The display face the live manifesto page uses for its title. */
@font-face{
  font-family:'Big 500';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/Big500.ttf') format('truetype');
}

.manifesto{ background:var(--white); text-align:center; }

/* Both bands are Elementor boxed sections: a 1140px container, with the
   section's own 24/32px gutter plus the column's 24px inside it. */
.manifesto-head{
  max-width:1140px;
  margin-inline:auto;
  padding:88px 48px 32px;
}
.manifesto-head h1{
  width:100%;
  max-width:768px;
  margin:0 auto;
  font-family:'Big 500',sans-serif;
  font-weight:400;
  font-size:64px;
  line-height:80%;
  color:#E02528;
}

.manifesto-body{
  max-width:1140px;
  margin-inline:auto;
  padding:0 56px 128px;
}
/* Paragraphs carry no margin of their own; the 8px spacer between the
   widgets is the only separation on the live page. */
.manifesto-body p{ margin:0 0 8px; }
.manifesto-body p:last-child{ margin-bottom:0; }

.m-def-word{
  font-family:'Times New Roman',Times,serif;
  font-size:32px;
  font-weight:700;
  color:#000000;
}
.m-def-phon{
  font-family:'Times New Roman',Times,serif;
  font-size:32px;
  font-style:italic;
  color:#000000;
}
.m-highlight{
  font-family:'Roboto',sans-serif;
  font-size:32px;
  font-weight:700;
  font-style:italic;
  line-height:36px;
  color:#FBBD1A;
}
.m-text,
.m-strong{
  font-family:'Roboto',sans-serif;
  font-size:24px;
  line-height:1.7;
  color:#8478B8;
}
.m-strong{ font-weight:700; }

@media (max-width:1024px){
  .manifesto-head{ max-width:1024px; padding:64px 24px 24px; }
  .manifesto-body{ max-width:1024px; }
}

@media (max-width:767px){
  .manifesto-head{ max-width:767px; padding:48px 18px 20px; }
  .manifesto-head h1{ font-size:clamp(36px, 11vw, 56px); overflow-wrap:break-word; }
  .manifesto-body{ max-width:767px; padding:0 18px 80px; }
  .m-def-word, .m-def-phon{ font-size:26px; }
  .m-highlight{ font-size:24px; line-height:30px; }
  .m-text, .m-strong{ font-size:18px; }
}

/* =========================================================
   OUR HISTORY PAGE
   Values below mirror the published page: 4px #2DB674 rules,
   96px/72px years in #FBBD1A, 24px body copy, 40/60 and 25/75 splits.
   ========================================================= */
/* This page runs full width with 32px gutters rather than the centred shell
   the rest of the site uses. */
.hist-title .shell,
.hist-rows .shell,
.hist-donate .shell{ max-width:none; padding-inline:32px; }

.hist-title{ padding-block:clamp(88px,13vw,192px) clamp(56px,9vw,128px); }
.hist-title h1{ font-size:clamp(40px,4.4vw,64px); line-height:.8; }
.display.red{ color:var(--cta); }

/* ---------- The alternating rows ---------- */
.hist-rows{ padding-bottom:clamp(64px,9vw,128px); }

/* Photograph on one side, year + copy on the other, swapping each row. The
   green rule caps the year/copy group only, never the photograph. */
.hist-row{
  display:grid;
  align-items:start;
  margin-bottom:clamp(48px,6vw,80px);
}
.hist-row.photo-left { grid-template-columns:40% 60%; }
.hist-row.photo-right{ grid-template-columns:60% 40%; }

/* The portraits are supplied at 436px wide and sit at natural size inside
   their column — they are not stretched to fill it. */
.hist-figure img{ width:auto; max-width:100%; }

.hist-group{
  display:grid;
  align-items:start;
  padding-top:24px;
  border-top:4px solid var(--cta-green);
}
.hist-row.photo-left  .hist-group{ grid-template-columns:25% 75%; }
.hist-row.photo-right .hist-group{ grid-template-columns:75% 25%; }
/* Copy is set ragged against the edge it runs away from. */
.hist-row.photo-right .hist-copy{ text-align:end; }

.hist-year{
  margin:0;
  font-family:'Archivo','Arial Black',sans-serif;
  font-weight:900;
  font-stretch:88%;
  font-size:clamp(52px,6.7vw,96px);
  line-height:.75;
  letter-spacing:.01em;
  text-align:center;
  color:var(--yellow-brand);
}

.hist-copy p{
  margin:0 0 1em;
  font-size:clamp(17px,1.7vw,24px);
  line-height:1.25;
  color:#000;
}
.hist-copy p:last-child{ margin-bottom:0; }
.hist-copy strong{ font-weight:700; }
.hist-copy a{
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s var(--ease);
}
.hist-copy a:hover{ color:var(--red); }

/* ---------- The full-width group photograph ---------- */
.hist-team{ margin:0 0 clamp(48px,6vw,80px); }
.hist-team img{ width:100%; height:auto; }

/* ---------- The four figures ---------- */
.hist-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  justify-items:center;
  gap:clamp(20px,4vw,64px);
  padding-block:clamp(56px,9vw,128px) 0;
}
.hist-stats img{ width:100%; max-width:240px; height:auto; }

/* ---------- Donate band ---------- */
.hist-donate{
  background:var(--yellow-brand);
  padding-block:clamp(64px,9vw,128px);
  text-align:center;
}
.hist-donate p{
  margin:0 auto clamp(32px,4vw,52px);
  font-size:clamp(17px,1.7vw,24px);
  line-height:1.3;
  color:#000;
}

@media (max-width:900px){
  .hist-row.photo-left,
  .hist-row.photo-right{ grid-template-columns:minmax(0,1fr); gap:28px; }
  /* Stacked, the photograph always leads and the copy reads left-aligned. */
  .hist-row.photo-right .hist-figure{ order:-1; }
  .hist-row.photo-right .hist-copy{ text-align:start; }
  .hist-row.photo-right .hist-group{ grid-template-columns:25% 75%; }
  .hist-row.photo-right .hist-year{ order:-1; }
  .hist-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:520px){
  .hist-title .shell,
  .hist-rows .shell,
  .hist-donate .shell{ padding-inline:24px; }
  .hist-group{ grid-template-columns:minmax(0,1fr) !important; gap:12px; }
  .hist-year{ text-align:start; }
}

/* =========================================================
   OUR PARTNERS PAGE (partners.html)
   Values mirrored from mydocubox.org/our-partners/
   Note: that site's Elementor containers are full-width
   (.elementor-container.elementor-column-gap-default
    { max-width:none !important }), so nothing here is boxed.
   ========================================================= */

/* ---------- Hero ---------- */
.p-hero{
  background:#E02528;
  padding:0 24px;
}
.p-hero-inner{
  padding-block:140px;
}
.p-hero-title{
  max-width:760px;
  margin:0;
  font-size:64px;
  line-height:80%;
  color:#FBBD1A;
}

/* ---------- Logo cloud ---------- */
.p-logos{
  background:var(--white);
  padding:0 24px;
}
.p-logos-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  padding-block:128px;
}
.p-logos-inner img{ margin:12px 20px; }
/* Ford Foundation leads on a row of its own, at its natural size. */
.p-logos-inner .p-logo-lead{
  flex:0 0 100%;
  height:87px;
  object-fit:contain;
  margin:0 auto 48px;
}

/* ---------- Partner rows ---------- */
.p-row{
  background:var(--white);
  padding:0 24px;
}
.p-row:nth-child(odd){ background:#D0D0D0; }

.p-row-inner{
  display:flex;
  align-items:center;
  padding-block:48px;
}
.p-row-logo{
  flex:0 0 25%;
  max-width:25%;
}
.p-row-logo img{ width:auto; }
.p-row-copy{
  flex:0 0 75%;
  max-width:75%;
}
.p-row-copy p{
  margin:0;
  font-family:'Roboto',sans-serif;
  font-size:24px;
  font-weight:300;
  line-height:1.4;
  color:#000000;
}

/* Elementor's breakpoints: 1024 tablet, 767 mobile. */
@media (max-width:1024px){
  .p-hero-inner{ padding-block:104px; }
  .p-hero-title{ font-size:52px; }
  .p-logos-inner{ padding-block:96px; }
  .p-row-copy p{ font-size:20px; }
}

@media (max-width:767px){
  .p-hero-inner{ padding-block:72px; }
  .p-hero-title{ font-size:38px; }
  .p-logos-inner{ padding-block:64px; }
  .p-logos-inner img{ margin:10px 14px; max-height:52px; width:auto; }
  .p-logos-inner .p-logo-lead{ max-height:none; margin:0 auto 32px; }

  .p-row-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:16px;
    padding-block:36px;
  }
  .p-row-logo,
  .p-row-copy{ flex:0 0 100%; max-width:100%; }
  .p-row-copy p{ font-size:18px; }
}

/* =========================================================
   PROGRAMS PAGE
   Values mirrored from mydocubox.org/programs/ — the child
   theme's "dynamic sections" shortcode styles.
   ========================================================= */
.programs-page{ background:var(--white); }

/* The live page keeps its "Programs" h1 in the markup but never paints it,
   so the colour bands start straight under the header. Hidden rather than
   dropped, to keep the page's heading for screen readers. */
.page-entry-title{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

.docubox-section{
  width:100%;
  padding:100px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#FFFFFF;
}
.docubox-container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:60px;
}
.layout-img-right .docubox-container{ flex-direction:row-reverse; }
.docubox-image-col,
.docubox-content-col{ flex:1; width:50%; }

.docubox-title{
  margin:0 0 20px;
  font-family:'Big 500',sans-serif;
  font-weight:800;
  font-size:64px;
  line-height:1.1;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#FFFFFF;
}
.docubox-excerpt{
  margin-bottom:40px;
  font-family:'Roboto',sans-serif;
  font-size:20px;
  line-height:1.6;
  color:#FFFFFF;
}
.docubox-excerpt p{ margin:0; }

/* The yellow band carries dark text. */
.docubox-section[style*="#FFB300"] .docubox-title,
.docubox-section[style*="#FFB300"] .docubox-excerpt{ color:#29303A; }

.docubox-btn{
  display:inline-block;
  padding:18px 45px;
  background-color:#E02528;
  color:#FFFFFF;
  font-family:'Roboto',sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:50px;
  box-shadow:0 4px 15px rgba(0,0,0,.2);
  transition:all .3s ease;
}
.docubox-btn:hover{
  background-color:#FFFFFF;
  color:#E02528;
  transform:translateY(-3px);
}

@media (max-width:1024px){
  .docubox-section{ padding:60px 0; }
  .docubox-container{ gap:30px; }
  .docubox-title{ font-size:48px; }
}

@media (max-width:768px){
  .docubox-container,
  .layout-img-right .docubox-container{
    flex-direction:column;
    text-align:center;
  }
  .docubox-image-col,
  .docubox-content-col{ width:100%; }
}

/* =========================================================
   FILM BOX PAGE
   ========================================================= */
.filmbox{ background:#FFFFFF; }

/* ---------- Shared type ---------- */
.fb-title{
  margin:0 0 20px;
  font-family:'Big 500',sans-serif;
  font-weight:400;
  font-size:64px;
  line-height:80%;
  text-align:start;
}
.fb-title-red{ color:#E02528; }
.fb-title-yellow{ color:#FBBD1A; }

.fb-tagline{
  margin:-12px 0 20px;
  font-family:'Roboto',sans-serif;
  font-size:18px;
  color:#FFFFFF;
}
.fb-lede,
.fb-body-white{
  margin:0 0 20px;
  font-family:'Roboto',sans-serif;
  font-size:24px;
  color:#FFFFFF;
}
.fb-body-black{
  margin:0 0 20px;
  font-family:'Roboto',sans-serif;
  font-size:24px;
  color:#000000;
}
.fb-statement{
  margin:0;
  font-family:'Roboto',sans-serif;
  font-size:32px;
  font-weight:700;
  font-style:italic;
  color:#FFFFFF;
}
.filmbox p:last-child{ margin-bottom:0; }

.fb-spacer-8{ height:8px; }
.fb-spacer-24{ height:24px; }

/* ---------- The absolutely-placed cut-outs ---------- */
.abs-img{
  position:absolute;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}
.abs-img img{
  position:absolute;
  width:auto;
  height:100%;
  max-height:100%;
  object-fit:cover;
}
/* Sits in the right half of the band on desktop, the left half below it. */
.abs-img-bottom-right{
  transform-origin:bottom center;
  bottom:0;
  left:50%;
  right:0;
  scale:0.9;
}
.abs-bottom,
.abs-bottom img{ bottom:0; }
.abs-left,
.abs-left img{ left:0; }

.text-50-percent{ max-width:50%; margin-left:auto; }
.text-50-percent-reversed{ max-width:50%; margin-right:auto; }

/* ---------- Hero ---------- */
.fb-hero{ background-color:#000000; padding:0 24px; }
.fb-hero-inner{ position:relative; padding:140px 10px; }
.fb-hero-text{ position:relative; z-index:1; }

/* ---------- What is Film Box ---------- */
.fb-what{ background-color:#E02528; padding:0 24px; text-align:center; }
.fb-what-inner{ padding:256px 10px; }

/* ---------- African Legacy Films ---------- */
.fb-legacy{ background-color:#FFFFFF; padding:0 24px; }
.fb-legacy-inner{ position:relative; padding:128px 10px; }
.fb-legacy-img{ transform:translateX(-256px); }
.fb-legacy-text{ position:relative; z-index:1; }

/* ---------- Shorts (purple) and SSP (red) ---------- */
.fb-shorts{ background-color:#8478B8; padding:0 24px; }
.fb-ssp{ background-color:#E02528; padding:0 24px; }
.fb-split{ display:flex; padding:128px 0; }
.fb-split-col{
  width:50%;
  padding:10px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ---------- Closing ---------- */
.fb-close{ background-color:#000000; padding:0 24px; }
.fb-close-inner{ padding:128px 10px; text-align:center; }
.fb-btn{
  display:inline-block;
  padding:12px 24px;
  background-color:#D51317;
  font-family:'Roboto',sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#FFFFFF;
  border-radius:30px;
  box-shadow:0 0 0 0 #fff;
  animation:fb-pulse 2s infinite 3s cubic-bezier(.25,0,0,1);
}
@keyframes fb-pulse{
  to{ box-shadow:0 0 0 18px rgba(255,255,255,0); }
}

@media (max-width:1024px){
  .fb-hero-inner{ padding:80px 10px 540px; }
  .abs-img-bottom-right{ left:0; right:50%; max-height:512px; scale:1; }
  .text-50-percent,
  .text-50-percent-reversed{ max-width:100%; }
  .fb-split{ flex-direction:column; padding:96px 0; }
  .fb-split-col{ width:100%; }
  .fb-legacy-img{ transform:none; }
}

/* =========================================================
   ABOUT PAGE
   Values below mirror the published page: 64px/80% display
   headings, 24px and 20px body copy, #FBBD1A / #C6C7C8 / #000
   grounds, 30px-radius buttons, 45/9.6/45 mission-vision split.
   ========================================================= */
/* Like the history page, About runs full width with 24px gutters rather than
   the centred shell the rest of the site uses. */
.ab-shell{ max-width:none; padding-inline:24px; }

/* Section rhythm: the published page sets 256px top and bottom on the first
   two bands and 128px on the rest. */
/* Every band on the published page carries 256px top and bottom. The hero
   renders shorter than that on the live page, and its padding drives how much
   of the line pattern shows, so it keeps its own measured value. */
.ab-team,
.ab-mv,
.ab-values,
.ab-promo{ padding-block:clamp(80px,17vw,256px); }
.ab-hero{ padding-block:clamp(56px,8vw,115px); }

/* The published page sets its headings in Big 500 at weight 400 - the face is
   already loaded for the manifesto page, so use it rather than Archivo. */
.ab-hero .display,
.ab-team .display,
.ab-promo .display,
.ab-mv-label,
.ab-value h3{
  font-family:'Big 500','Archivo','Arial Black',sans-serif;
  font-weight:400;
  font-stretch:normal;
  letter-spacing:0;
}

.ab-hero .display,
.ab-team .display,
.ab-promo .display{ font-size:clamp(38px,4.4vw,64px); line-height:.8; }

.ab-hero p,
.ab-promo p{
  margin:24px 0 32px;
  font-size:clamp(18px,1.7vw,24px);
  line-height:1.2;
  color:#29303A;
}

/* ---------- Buttons: the page uses a white and a green variant ---------- */
.ab-btn-white{ background:var(--white); color:#000; }
.ab-btn-green{ background:var(--green-programs); }

/* Every button on this page carries a translucent white ring, which reads as
   pale yellow on the hero, pink over the red texture, and nothing on white. */
.ab-hero .btn,
.ab-team .btn,
.ab-promo .btn{ box-shadow:0 0 0 6px rgba(255,255,255,.4); }
.ab-hero .btn:hover,
.ab-team .btn:hover,
.ab-promo .btn:hover{
  box-shadow:0 0 0 6px rgba(255,255,255,.5), 0 12px 26px rgba(0,0,0,.25);
}

/* ---------- Hero ---------- */
.ab-hero{
  position:relative;
  background:var(--yellow-brand);
  overflow:hidden;
  isolation:isolate;
}
/* The pattern is scaled to the height of the band, centred, and hangs 280px
   below it, so it reads as a wide ridge across the bottom of the hero. */
.ab-hero-pattern{
  position:absolute;
  left:50%;
  bottom:-280px;
  z-index:-1;
  height:100%;
  width:auto;
  min-width:1200px;
  max-width:none;
  transform:translateX(-50%);
}
.ab-hero-copy{ max-width:512px; }

/* ---------- Meet the team ---------- */
/* Black ground, the torn red texture pulled in from the left and the team
   photograph pinned to the right, both at full band height. */
.ab-team{
  position:relative;
  background:#000;
  overflow:hidden;
  isolation:isolate;
}
.ab-team-tex,
.ab-team-photo{
  position:absolute;
  top:0;
  z-index:-1;
  width:auto;
  max-width:none;
  height:100%;
}
.ab-team-tex  { left:0; transform:translateX(-256px); }
.ab-team-photo{ right:0; }
.ab-team-copy { position:relative; max-width:512px; }
.ab-team-copy .btn{ margin-top:34px; }

/* ---------- Mission / Vision ---------- */
.ab-mv-grid{
  display:grid;
  grid-template-columns:44.999% 9.638% 45%;
  align-items:start;
}
/* The two halves are staggered: mission sits high, vision drops by 128px. */
.ab-mv-mission{ text-align:right; padding-bottom:clamp(48px,9vw,128px); }
.ab-mv-vision { text-align:left;  padding-top:clamp(48px,9vw,128px); }

.ab-mv-label{
  display:inline-block;
  margin:0 0 26px;
  padding:0 48px;
  font-size:clamp(36px,4.4vw,64px);
  color:var(--white);
}
.ab-mv-label-black{ background:#000; }
.ab-mv-label-red  { background:var(--cta); }

.ab-mv-col p{
  margin:0;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.25;
  color:#000;
}

.ab-mv-line{ display:flex; justify-content:center; padding-top:clamp(40px,7vw,96px); }
.ab-mv-line img{ width:100%; height:auto; }

/* ---------- Our values ---------- */
/* Grey ground with the outlined "OUR VALUES" artwork tiled behind the list. */
.ab-values{
  background-color:#C6C7C8;
  background-image:url('assets/about-values-text.webp');
  background-repeat:repeat;
}
.ab-values-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,72px);
}
.ab-value{ margin-bottom:clamp(24px,3vw,38px); }
.ab-value:last-child{ margin-bottom:0; }
.ab-value h3{
  margin:0 0 4px;
  font-size:clamp(23px,2.3vw,32px);
  line-height:1.1;
  color:#D51317;
}
.ab-value p{
  margin:0;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.25;
  color:#000;
}

/* ---------- Our history / Our partners ---------- */
.ab-promo-yellow{ background:var(--yellow-brand); }
.ab-promo-white { background:var(--white); }

.ab-promo-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,64px);
  align-items:center;
}
.ab-promo-copy{ max-width:512px; }
.ab-promo-figure{ display:flex; justify-content:center; }
.ab-promo-tv    { width:100%; max-width:621px; height:auto; }
.ab-promo-puzzle{ width:100%; max-width:694px; height:auto; }

@media (max-width:900px){
  /* Stacked, both halves read left-aligned and the stagger is dropped. */
  .ab-mv-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(32px,6vw,56px); }
  .ab-mv-mission{ text-align:left; padding-bottom:0; }
  .ab-mv-vision { padding-top:0; }
  .ab-mv-line{ display:none; }
  .ab-values-grid{ grid-template-columns:minmax(0,1fr); }
  .ab-promo-grid{ grid-template-columns:minmax(0,1fr); }
  .ab-promo-figure{ order:-1; }
  /* The photograph leads the band rather than sitting behind the copy. */
  .ab-team-photo{ opacity:.35; }
}

@media (max-width:520px){
  .ab-mv-label{ padding:0 16px; }
  .ab-team-tex{ transform:translateX(-40%); }
}

/* =========================================================
   CONTACT US PAGE
   ========================================================= */
.contact{ background:var(--white); }

/* ---------- Hero ---------- */
.ct-hero{
  position:relative;
  background:url("assets/contact-hero.jpg") center center/cover no-repeat;
}
.ct-hero-overlay{
  position:absolute; inset:0;
  background-color:#000000;
  opacity:.2;
}
.ct-hero-inner{
  position:relative;
  display:flex;
  align-items:center;
  min-height:400px;
  padding:0 10px 15px;
  max-width:1140px;
  margin-inline:auto;
}
.ct-hero-title{
  margin:0;
  font-family:'Big 500',sans-serif;
  font-weight:400;
  font-size:52px;
  line-height:1.4em;
  color:#FFFFFF;
}

/* ---------- Details and form ---------- */
.ct-body{ padding:80px 160px; }
.ct-card{
  max-width:1440px;
  margin-inline:auto;
  display:flex;
  background-color:#F3F3F3;
  border-radius:10px;
  padding:30px;
}
.ct-col{ width:50%; }
.ct-info{ padding:25px; }
.ct-form-col{
  background-color:#FFFFFF;
  border-radius:10px;
  padding:23px;
}
.ct-heading{
  margin:0 0 15px;
  font-family:'Big 500',sans-serif;
  font-weight:400;
  font-size:36px;
  line-height:1.4em;
  color:#29303A;
  text-align:start;
}

.ct-icon-box{
  display:flex;
  align-items:flex-start;
  gap:15px;
  padding:6px 0 25px;
}
.ct-icon{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  color:#8478B8;
}
.ct-icon svg{ width:1em; height:1em; font-size:30px; fill:currentColor; }
.ct-icon-text{
  margin:0;
  font-family:'Roboto',sans-serif;
  font-size:18px;
  line-height:30px;
  color:#536942;
}
.ct-icon-text a{ color:inherit; }

.ct-socials{ display:flex; gap:15px; }
.ct-social{
  display:grid;
  place-items:center;
  padding:.3em;
  border-radius:50%;
  background-color:transparent;
  color:#C6C7C8;
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.ct-social svg{ width:26px; height:26px; fill:currentColor; }
.ct-social:hover{ color:#8478B8; transform:scale(1.1); }

/* ---------- The form ---------- */
.ct-form{ position:relative; }
.ct-form p{ margin:0 0 1.2em; }
.ct-form label{
  font-family:'Roboto',sans-serif;
  color:#29303A;
}
.ct-form input:not([type="submit"]),
.ct-form textarea{
  width:100%;
  padding:.75em;
  border:0;
  border-radius:2px;
  background:#f3f3f3;
  color:#666;
  font:inherit;
  box-sizing:border-box;
}
.ct-form input[type="submit"]{
  margin-top:15px;
  padding:18px 30px;
  border:0;
  border-radius:30px;
  background:#fbbd1a;
  color:#fff;
  font-family:'Roboto',sans-serif;
  font-size:16px;
  font-weight:500;
  line-height:18px;
  letter-spacing:2px;
  cursor:pointer;
  box-shadow:0 0 0 0 #fbbd1a;
  animation:ct-pulse 2s infinite 3s cubic-bezier(.25,0,0,1);
}
@keyframes ct-pulse{
  to{ box-shadow:0 0 0 18px rgba(251,189,26,0); }
}
.ct-form-note{ font-family:'Roboto',sans-serif; font-size:15px; color:#29303A; }

/* ---------- Map ---------- */
.ct-map{ margin:0; padding:0; line-height:0; }
.ct-map iframe{
  display:block;
  width:100%;
  height:400px;
  border:0;
}

@media (max-width:1366px){
  .ct-hero-inner{ min-height:350px; }
  .ct-body{ padding:60px; }
  .ct-card{ padding:20px; }
}

@media (max-width:1024px){
  .ct-hero{ padding:0; }
  .ct-hero-inner{ min-height:200px; }
  .ct-hero-title{ font-size:32px; }
  .ct-body{ padding:50px 15px; }
  .ct-card{ padding:15px; }
  .ct-info{ padding:0 28px; }
  .ct-heading{ text-align:center; font-size:26px; }
}

@media (max-width:767px){
  .ct-hero-inner{ min-height:160px; }
  .ct-hero-title{ font-size:36px; text-align:center; }
  .ct-body{ padding:15px; }
  .ct-card{ flex-direction:column; padding:15px; }
  .ct-col{ width:100%; }
  .ct-info{ padding:20px 0 0; }
  .ct-socials{ justify-content:center; }
  .ct-icon-box{ justify-content:center; }
}

/* =========================================================
   PROGRAM / PROJECT DETAIL PAGES
   Values mirrored from the single-project template on
   mydocubox.org (e.g. /program/kenya-creates/).
   ========================================================= */
.single-project-main{ background:var(--white); }
.docubox-inner{
  max-width:1200px;
  margin:0 auto 80px;
  padding:20px 20px 0;
}

.project-header{
  width:100%;
  margin-bottom:50px;
  text-align:center;
}
.project-main-title{
  margin:10px 0 20px;
  font-family:'Big 500',sans-serif;
  font-weight:400;
  font-size:84px;
  line-height:.9;
  letter-spacing:-2px;
  text-transform:uppercase;
  color:#E02528;
}

.project-grid{
  display:grid;
  grid-template-columns:1.8fr 1fr;
  gap:80px;
}
.section-subhead{
  margin:0 0 25px;
  font-family:'Big 500',sans-serif;
  font-weight:400;
  font-size:32px;
  color:#29303A;
}
.docubox-about-text p{
  margin:0 0 20px;
  font-size:18px;
  line-height:1.8;
  color:#444;
}

/* ---------- Sidebar ---------- */
.sidebar-block{ margin-bottom:50px; }
.sidebar-label{
  margin:0 0 20px;
  padding-bottom:10px;
  border-bottom:1px solid #eee;
  font-family:'Roboto',sans-serif;
  font-size:14px;
  font-weight:400;
  letter-spacing:2px;
  text-transform:uppercase;
  color:#999;
}
.partner-logo-img{
  max-width:100%;
  height:auto;
}

.film-card-link{
  display:flex;
  align-items:center;
  margin-bottom:12px;
  padding:12px;
  background:#f9f9f9;
  border:1px solid transparent;
  border-radius:12px;
  text-decoration:none;
  transition:all .3s ease;
}
.film-card-link img{
  width:60px;
  height:60px;
  margin-right:15px;
  border-radius:8px;
  object-fit:cover;
}
.film-card-link span{
  font-size:16px;
  font-weight:600;
  color:#29303A;
}
.film-card-link:hover{
  background:var(--white);
  border-color:#E02528;
  box-shadow:0 10px 20px rgba(0,0,0,.05);
  transform:translateY(-2px);
}

@media (max-width:991px){
  .project-grid{ grid-template-columns:1fr; gap:40px; }
  .project-main-title{ font-size:54px; }
}

@media (max-width:768px){
  .project-main-title{ font-size:42px; letter-spacing:-1px; }
}