/* ---------------- PAGE HERO (shared across inner pages) ---------------- */
.page-hero{
  background:var(--gradient-dark);
  background-size:cover;
  background-position:center;
  color:#fff;
  padding:120px 0 72px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
/* When a custom banner image is set, the box follows the image's own
   ~1920x700 (roughly 11:4) aspect ratio instead of being sized by the
   text padding above — that's what was cropping/cutting off uploaded
   banners before, since "cover" fills whatever box height the padding
   happened to produce rather than the banner's actual proportions. */
.page-hero.has-bg-image{
  aspect-ratio:1920/700;
  padding:24px 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page-hero.has-bg-image .wrap{ padding-top:env(safe-area-inset-top, 0px); }
.page-hero.has-bg-image::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(150deg, rgba(18,13,9,0.82) 0%, rgba(42,23,8,0.72) 100%);
  z-index:0;
}
.page-hero::after{
  content:''; position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:70%; height:120%;
  background:radial-gradient(circle, rgba(255,107,0,0.10), transparent 65%);
  pointer-events:none;
}
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero h1{ color:#fff; }
.page-hero p{ color:rgba(255,255,255,0.65); max-width:560px; margin:0 auto; }
.page-hero .eyebrow{ justify-content:center; display:flex; }

/* ---------------- PEOPLE GRID ----------------
   CSS Grid with a fixed track size via auto-fill/minmax means every card
   is structurally the same width — there is no per-card class to get
   wrong, unlike a Bootstrap col-lg-3/col-lg-4 mix where one mistyped
   class breaks the row. This is the direct fix for the uneven boxes. */
.people-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:28px;
}
.person-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  transition:transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease;
}
.person-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.person-photo{
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--bone);
}
.person-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform 0.4s ease; }
.person-card:hover .person-photo img{ transform:scale(1.05); }
.person-info{ padding:18px 16px; }
.person-info h3{ font-size:1rem; margin-bottom:4px; }
.person-role{ font-size:0.8rem; color:var(--ink-soft); font-weight:500; display:block; margin-bottom:8px; }
.person-email{
  display:flex; align-items:center; gap:6px;
  font-size:0.76rem; color:var(--orange-600); font-weight:500;
  padding-top:8px; border-top:1px solid var(--line);
}
.person-email svg{ flex-shrink:0; opacity:0.85; }
.person-email span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.person-email:hover{ color:var(--orange-500); }
.person-email:hover span{ text-decoration:underline; }

/* ---------------- SPOTLIGHT CARD (Executive Director) ---------------- */
.spotlight-card{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:0;
  background:var(--gradient-dark);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-md);
  position:relative;
}
.spotlight-card::after{
  content:''; position:absolute; top:-30%; right:-15%; width:55%; height:80%;
  background:radial-gradient(circle, rgba(255,107,0,0.12), transparent 70%);
  pointer-events:none;
}
.spotlight-photo{ aspect-ratio:2/3; }
.spotlight-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; }
.spotlight-body{ padding:40px; display:flex; flex-direction:column; justify-content:center; }
.spotlight-body h2{ color:#fff; margin:12px 0; }
.spotlight-body p{ color:rgba(255,255,255,0.65); }
.spotlight-email{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:18px; width:fit-content;
  font-size:0.86rem; font-weight:500; color:#fff;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15);
  padding:9px 16px; border-radius:24px;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.spotlight-email svg{ flex-shrink:0; color:var(--orange-500); }
.spotlight-email:hover{ background:var(--orange-500); border-color:var(--orange-500); }
.spotlight-badge{
  display:inline-block;
  background:var(--orange-500); color:#fff;
  font-family:var(--font-mono); font-size:0.72rem; font-weight:700;
  letter-spacing:0.04em; padding:6px 14px; border-radius:20px;
  width:fit-content;
}
@media (max-width:700px){
  .spotlight-card{ grid-template-columns:1fr; }
  .spotlight-photo{ aspect-ratio:3/2; }
}

/* ---------------- NEWS CARDS / GRID ---------------- */
.grid-3{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:24px; }
.news-card{ display:flex; flex-direction:column; }
.news-thumb{ aspect-ratio:16/10; overflow:hidden; position:relative; background:var(--bone); }
.news-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 0.4s ease; }
.news-card:hover .news-thumb img{ transform:scale(1.06); }
.video-badge{
  position:absolute; bottom:10px; right:10px;
  background:rgba(10,10,10,0.75); color:#fff;
  font-size:0.72rem; font-weight:600;
  padding:4px 10px; border-radius:16px;
}
.news-body{ padding:20px; display:flex; flex-direction:column; flex:1; }
.tag{
  display:inline-block; width:fit-content;
  font-size:0.72rem; font-weight:700; letter-spacing:0.02em;
  color:var(--orange-600); background:var(--orange-tint);
  padding:4px 12px; border-radius:20px;
}
.news-date{ font-family:var(--font-mono); font-size:0.76rem; color:var(--ink-soft); margin:10px 0 6px; }
.news-card h3{ font-size:1.08rem; margin-bottom:8px; line-height:1.35; }
.news-card p{ font-size:0.9rem; flex:1; }
.news-link{ font-weight:600; color:var(--orange-500); font-size:0.88rem; margin-top:10px; display:inline-flex; align-items:center; gap:4px; transition:gap 0.2s ease; }
.news-card:hover .news-link{ gap:8px; }

/* ---------------- FILTER BAR + MONTH NAV ---------------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:28px; }
.filter-pill{
  font-size:0.85rem; font-weight:600; padding:9px 18px;
  border-radius:20px; border:1.5px solid var(--line); background:#fff;
  transition:all 0.15s ease; cursor:pointer;
}
.filter-pill:hover{ border-color:var(--black); }
.filter-pill.active{ background:var(--black); border-color:var(--black); color:#fff; }
.filter-divider{ width:1px; height:22px; background:var(--line); margin:0 6px; }

.month-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; background:var(--bone); border-radius:10px; margin-bottom:14px; flex-wrap:wrap;
}
.month-nav-current{ font-family:var(--font-display); font-size:1.1rem; font-weight:600; text-align:center; flex:1; }
.month-nav-btn{
  font-family:var(--font-mono); font-size:0.78rem; font-weight:600;
  padding:8px 14px; border-radius:20px; border:1px solid var(--line); background:#fff;
  transition:all 0.15s ease;
}
.month-nav-btn:hover{ border-color:var(--black); }
.month-nav-btn.is-disabled{ opacity:0.4; pointer-events:none; }
.filter-note{ font-size:0.8rem; color:var(--ink-soft); margin-bottom:28px; max-width:720px; }

/* ---------------- EMPTY STATE ---------------- */
.empty-state{ text-align:center; padding:80px 20px; color:var(--ink-soft); }
.empty-state svg{ margin-bottom:16px; opacity:0.4; }

/* ---------------- ARTICLE DETAIL PAGE ---------------- */
.article-hero{ aspect-ratio:21/9; overflow:hidden; border-radius:16px; margin:32px 0; background:var(--bone); }
.article-hero img{ width:100%; height:100%; object-fit:cover; }
.article-body{ max-width:720px; margin:0 auto; font-size:1.05rem; line-height:1.8; }
.article-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:14px; margin-top:32px; max-width:860px; margin-left:auto; margin-right:auto; }
.article-gallery button{ border:none; padding:0; cursor:pointer; border-radius:10px; overflow:hidden; aspect-ratio:1; background:var(--bone); }
.article-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease; }
.article-gallery button:hover img{ transform:scale(1.08); }
.article-video{ border-radius:10px; overflow:hidden; margin-bottom:14px; }
.article-video video{ width:100%; display:block; }

/* Lightbox for full-size photos */
.photo-lightbox{
  position:fixed; inset:0; background:rgba(10,10,10,0.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0.25s ease;
  z-index:999; padding:40px;
}
.photo-lightbox.active{ opacity:1; visibility:visible; }
.photo-lightbox img{ max-width:100%; max-height:90vh; border-radius:8px; }
.lightbox-close{
  position:absolute; top:24px; right:24px;
  width:44px; height:44px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.1); color:#fff; font-size:1.6rem; cursor:pointer;
}
.lightbox-close:hover{ background:var(--orange-500); }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:860px){
  .spotlight-card{ grid-template-columns:220px 1fr; }
  .spotlight-body{ padding:28px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:700px){
  .people-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .grid-3{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:1fr; }
  .section{ padding:56px 0; }
  .page-hero{ padding:100px 0 56px; }
  .page-hero.has-bg-image{ aspect-ratio:auto; min-height:260px; padding:70px 0 40px; }
  .article-gallery{ grid-template-columns:repeat(auto-fill, minmax(110px,1fr)); gap:10px; }
  .month-nav{ padding:14px 16px; }
  .month-nav-current{ font-size:0.95rem; order:-1; width:100%; margin-bottom:6px; }
  .month-nav-btn{ font-size:0.72rem; padding:7px 12px; }
}

@media (max-width:480px){
  .people-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .person-info{ padding:14px 10px; }
  .person-info h3{ font-size:0.9rem; }
  .person-role{ font-size:0.74rem; }
  .filter-bar{ gap:8px; }
  .filter-pill{ padding:7px 14px; font-size:0.78rem; }
  .filter-divider{ display:none; }
}

/* ---------------- WHO WE ARE: Vision/Mission/Social Mission ---------------- */
.vms-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; }
.vms-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:32px 28px; transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.vms-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.vms-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%; background:var(--orange-tint);
  margin-bottom:18px;
}
.vms-card h3{ font-size:1.1rem; margin-bottom:10px; }
.vms-card p{ font-size:0.92rem; }

/* ---------------- CORE VALUES CAROUSEL ---------------- */
.corevalues-section{ position:relative; overflow:hidden; }
.corevalues-section::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 20%, rgba(255,107,0,0.10), transparent 40%),
             radial-gradient(circle at 85% 80%, rgba(255,107,0,0.08), transparent 45%);
  pointer-events:none;
}
.corevalues-title{
  font-size:clamp(2.2rem, 6vw, 4rem); font-weight:800; letter-spacing:0.02em;
  color:#fff; line-height:1; position:relative; display:inline-block;
}
.corevalues-title em{
  font-style:normal;
  background:linear-gradient(90deg, #FF6B00, #FFB27A, #FF6B00);
  background-size:200% auto; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; animation:cvTitleShine 4s linear infinite;
}
@keyframes cvTitleShine{ 0%{background-position:0% center;} 100%{background-position:200% center;} }

.cv-carousel{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:48px; position:relative; }
.cv-arrow{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.18); background:rgba(255,255,255,0.04); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cv-arrow:hover{ background:var(--orange-500); border-color:var(--orange-500); transform:scale(1.08); }
.cv-stage{ position:relative; width:100%; max-width:680px; min-height:320px; overflow:hidden; }
.cv-slide{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:40px 32px; border-radius:18px;
  background:linear-gradient(150deg, #171717 0%, #0A0A0A 100%);
  border:1px solid rgba(255,107,0,0.28);
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
  opacity:0; transform:scale(0.92) translateY(18px); pointer-events:none;
  transition:opacity 0.55s cubic-bezier(.2,.8,.2,1), transform 0.55s cubic-bezier(.2,.8,.2,1);
}
.cv-slide.is-active{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; position:relative; }
.cv-slide-num{ font-family:var(--font-mono); font-size:0.76rem; font-weight:700; color:var(--orange-500); letter-spacing:0.08em; margin-bottom:12px; }
.cv-slide-num span{ color:rgba(255,255,255,0.35); }
.cv-slide .cv-ref{
  display:inline-block; background:var(--orange-500); color:#fff;
  font-family:var(--font-mono); font-size:0.72rem; font-weight:700;
  padding:6px 14px; border-radius:20px; margin-bottom:16px;
}
.cv-slide h3{ color:#fff; font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.25; margin-bottom:16px; }
.cv-slide p{ color:rgba(255,255,255,0.75); font-size:0.95rem; line-height:1.6; font-style:italic; max-width:480px; margin:0; }

.cv-dots{ display:flex; justify-content:center; gap:10px; margin-top:28px; }
.cv-dot{ position:relative; width:32px; height:4px; border-radius:3px; background:rgba(255,255,255,0.15); border:none; cursor:pointer; overflow:hidden; padding:0; }
.cv-dot-progress{ position:absolute; inset:0; background:var(--orange-500); transform:scaleX(0); transform-origin:left; }
.cv-dot.is-active .cv-dot-progress{ animation:cvDotFill 6s linear forwards; }
.cv-dot.is-done .cv-dot-progress{ transform:scaleX(1); animation:none; }
@keyframes cvDotFill{ from{transform:scaleX(0);} to{transform:scaleX(1);} }

/* ---------------- ABOUT VIDEO ---------------- */
.about-video-frame{
  margin-top:40px; border-radius:16px; overflow:hidden; background:var(--black);
  aspect-ratio:16/9; box-shadow:var(--shadow-md);
}
.about-video-frame video{ width:100%; height:100%; object-fit:cover; }

@media (max-width:860px){
  .vms-grid{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:700px){
  .cv-carousel{ gap:8px; }
  .cv-arrow{ width:36px; height:36px; }
  .cv-stage{ min-height:400px; }
  .cv-slide{ padding:28px 20px; }
}

/* ---------------- IMPACT STATS ---------------- */
.impact-stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:28px; }
.impact-stat-card{
  background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:36px 24px; text-align:center;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.impact-stat-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.impact-stat-number{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.4vw,2.6rem);
  color:var(--orange-500); margin-bottom:10px;
}
.impact-stat-card p{ font-size:0.9rem; color:var(--ink-soft); margin:0; }

@media (max-width:860px){
  .impact-stats-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
}

/* ---------------- CLIENT STORIES ---------------- */
.stories-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:32px; }
.story-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.story-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.story-video{ aspect-ratio:16/9; background:var(--black); }
.story-video iframe, .story-video img{ width:100%; height:100%; border:none; object-fit:cover; }
.story-body{ padding:24px; }
.story-body h3{ font-size:1.05rem; margin-bottom:8px; line-height:1.3; }
.story-body .news-date{ display:block; margin-bottom:12px; }
.story-body p{ font-size:0.92rem; }

@media (max-width:860px){
  .stories-grid{ grid-template-columns:1fr; }
}

/* ---------------- WHERE WE SERVE ---------------- */

/* Region stat strip - doubles as a filter control */
.serve-stats-strip{ background:var(--bone); padding:36px 0; border-bottom:1px solid var(--line); }
.serve-stats-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; }
.serve-stat-card{
  background:#fff; border:2px solid var(--line); border-radius:14px; padding:20px;
  text-align:center; cursor:pointer; transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.serve-stat-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.serve-stat-card.is-active{ border-color:var(--black); box-shadow:var(--shadow-md); }
.serve-stat-dot{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-bottom:8px; }
.serve-stat-card strong{ display:block; font-family:var(--font-display); font-size:1.9rem; font-weight:800; color:var(--black); line-height:1; }
.serve-stat-card span{ font-size:0.8rem; color:var(--ink-soft); font-weight:600; }

/* Two-column layout: map on the left, searchable directory on the right */
.serve-main-section{ padding-top:56px; }
.serve-layout{ display:grid; grid-template-columns:1.15fr 1fr; gap:40px; align-items:start; }

.serve-map-wrap{ position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); }
.serve-ph-map{ width:100%; height:640px; background:var(--bone); }
.serve-ph-map .leaflet-container{ font-family:var(--font-body); background:var(--bone); }
.serve-ph-map path{ cursor:pointer; transition:fill-opacity 0.15s ease; }
.serve-map-hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(18,13,9,0.85); color:#fff; font-size:0.76rem; font-weight:500;
  padding:7px 16px; border-radius:20px; pointer-events:none; margin:0; z-index:400;
}

/* Directory column */
.serve-directory-col{ display:flex; flex-direction:column; max-height:640px; }
.serve-directory-head{ flex-shrink:0; margin-bottom:16px; }
.serve-directory-head h2{ font-size:1.3rem; margin-bottom:14px; }
.serve-search-wrap{
  position:relative; display:flex; align-items:center;
  border:1.5px solid var(--line); border-radius:10px; padding:0 14px;
  transition:border-color 0.15s ease;
}
.serve-search-wrap:focus-within{ border-color:var(--orange-500); }
.serve-search-wrap svg{ flex-shrink:0; color:var(--ink-soft); }
.serve-search-wrap input{
  flex:1; border:none; outline:none; padding:11px 10px; font-size:0.9rem; font-family:var(--font-body); background:transparent;
}

.serve-directory-list{ overflow-y:auto; flex:1; border:1px solid var(--line); border-radius:12px; }
.serve-office-row{ border-bottom:1px solid var(--line); }
.serve-office-row:last-child{ border-bottom:none; }
.serve-office-row-main{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; }
.serve-office-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:6px; }
.serve-office-row h3{ font-size:0.92rem; margin:0 0 3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.serve-office-address{ font-size:0.8rem; color:var(--ink-soft); margin:0; }
.serve-office-toggle{
  position:absolute; right:16px; top:14px;
  width:26px; height:26px; border-radius:50%; border:none; background:var(--bone); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.2s ease, background 0.15s ease;
}
.serve-office-row{ position:relative; }
.serve-office-row.is-open .serve-office-toggle{ transform:rotate(180deg); background:var(--orange-tint); color:var(--orange-600); }
.serve-office-detail{
  max-height:0; overflow:hidden; padding:0 16px; margin-left:21px;
  transition:max-height 0.25s ease, padding 0.25s ease;
}
.serve-office-row.is-open .serve-office-detail{ max-height:160px; padding:0 16px 14px; }
.serve-office-detail p{
  display:flex; align-items:center; gap:7px; font-size:0.8rem; color:var(--ink-soft); margin:4px 0;
}
.serve-office-detail svg{ flex-shrink:0; opacity:0.7; }
.serve-office-region-label{ font-family:var(--font-mono); font-size:0.7rem !important; letter-spacing:0.03em; color:var(--ink-soft) !important; opacity:0.7; }
.serve-directory-empty{ text-align:center; color:var(--ink-soft); padding:40px 20px; font-size:0.9rem; }

.cevi-map-popup-manager, .province-detail-manager{ color:var(--ink-soft) !important; font-size:0.78rem !important; }

@media (max-width:980px){
  .serve-layout{ grid-template-columns:1fr; }
  .serve-ph-map{ height:420px; }
  .serve-directory-col{ max-height:none; }
  .serve-directory-list{ max-height:480px; }
}
@media (max-width:600px){
  .serve-stats-grid{ grid-template-columns:repeat(2,1fr); }
  .serve-ph-map{ height:340px; }
}

/* ---------------- REPORTS ---------------- */
.report-group{ margin-bottom:48px; }
.reports-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:22px; }
.report-card{
  background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  transition:transform 0.25s ease, box-shadow 0.25s ease; display:block;
}
.report-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.report-cover{
  aspect-ratio:5/7; background:var(--bone); display:flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.report-cover img{ width:100%; height:100%; object-fit:cover; }
.report-info{ padding:16px; }
.report-info h3{ font-size:0.9rem; margin-bottom:6px; line-height:1.3; }

/* ---------------- CAREERS ---------------- */
.jobs-list{ display:flex; flex-direction:column; gap:14px; }
.job-row{
  background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  transition:box-shadow 0.2s ease;
}
.job-row:hover{ box-shadow:var(--shadow-sm); }
.job-row-main h3{ font-size:1rem; margin:8px 0 4px; }
.job-row-side{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.job-deadline{ font-family:var(--font-mono); font-size:0.78rem; color:var(--orange-600); font-weight:600; }
.job-details{
  width:100%; max-height:0; overflow:hidden; font-size:0.9rem; line-height:1.7; color:var(--ink-soft);
  transition:max-height 0.3s ease, margin-top 0.3s ease; margin-top:0;
}
.job-row.is-open .job-details{ max-height:1200px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }

@media (max-width:600px){
  .job-row{ flex-direction:column; align-items:flex-start; }
  .job-row-side{ width:100%; justify-content:space-between; }
}

/* ---------------- PDF EMBED (Data Privacy) ---------------- */
.pdf-embed-frame{
  width:100%; height:80vh; min-height:600px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); background:var(--bone);
}
.pdf-embed-frame embed{ width:100%; height:100%; border:none; }

@media (max-width:700px){
  .pdf-embed-frame{ height:60vh; min-height:420px; }
}

/* ---------------- CONTACT ---------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:56px; align-items:start; }
.contact-info-row{ display:flex; align-items:center; gap:12px; margin:14px 0; }
.contact-info-row a:hover{ color:var(--orange-500); }
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.form-row{ display:flex; flex-direction:column; gap:6px; }
.form-row-pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-row label{ font-size:0.84rem; font-weight:600; color:var(--black); }
.form-row input, .form-row textarea{
  padding:12px 14px; border:1.5px solid var(--line); border-radius:8px;
  font-family:var(--font-body); font-size:0.92rem; resize:vertical;
  transition:border-color 0.2s ease;
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--orange-500); }
.form-error{ background:#FFF1E5; color:#B24C00; padding:14px 18px; border-radius:8px; font-size:0.88rem; margin-bottom:18px; }
.form-success{ text-align:center; padding:48px 20px; }
.form-success h3{ margin:16px 0 8px; }

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .form-row-pair{ grid-template-columns:1fr; }
}

/* ---------------- WHERE WE SERVE: Leaflet map (replaces old GeoChart) ---------------- */
.map-fullbleed .leaflet-container{ font-family:var(--font-body); background:var(--bone); }

.cevi-marker{ background:none; border:none; }
.cevi-marker span{
  display:block; width:14px; height:14px; border-radius:50%;
  background:var(--orange-500); border:2.5px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.35);
}
.cevi-marker-head span{
  width:20px; height:20px; background:var(--black); border:3px solid var(--orange-500);
  box-shadow:0 2px 10px rgba(0,0,0,0.45);
}

.cevi-cluster{
  background:var(--orange-500); color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:0.85rem;
  border:3px solid rgba(255,255,255,0.85);
  box-shadow:0 4px 14px rgba(255,107,0,0.4);
}

.cevi-map-popup strong{ display:block; font-family:var(--font-display); font-size:0.98rem; margin-bottom:4px; color:var(--black); }
.cevi-map-popup-tag{
  display:inline-block; background:var(--black); color:#fff;
  font-size:0.64rem; font-weight:700; letter-spacing:0.03em;
  padding:2px 8px; border-radius:10px; margin-bottom:6px;
}
.cevi-map-popup p{ font-size:0.82rem; margin:2px 0; color:var(--ink-soft); }
.cevi-map-popup-phone{ color:var(--orange-600) !important; font-weight:600; }
.leaflet-popup-content-wrapper{ border-radius:10px; box-shadow:var(--shadow-md); }
.leaflet-popup-content{ margin:14px 16px; }

/* The map sits inside a page that also has its own click-based scroll,
   so a visible "click to interact" affordance avoids the map silently
   eating scroll attempts until the visitor clicks once. */
.map-fullbleed{ position:relative; cursor:pointer; }

/* ---------------- HOME: HERO ---------------- */
.home-hero{
  position:relative; height:88vh; min-height:560px; max-height:820px;
  overflow:hidden; background:#0A0A0A;
  display:flex; align-items:flex-end;
}
.home-hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
}
.home-hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.5) 100%);
}
.home-hero-content{ position:relative; z-index:2; padding-bottom:72px; color:#fff; }
.home-hero-content h1{ color:#fff; font-size:clamp(2.2rem,6vw,4rem); }
.home-hero-content h1 em{ font-style:normal; color:var(--orange-500); }
.home-hero-content p{ color:rgba(255,255,255,0.78); max-width:560px; font-size:1.05rem; }
.home-hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; }
.home-hero-sound{
  position:absolute; bottom:28px; right:28px; z-index:3;
  width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,0.3);
  background:rgba(0,0,0,0.4); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 0.2s ease;
}
.home-hero-sound:hover{ background:var(--orange-500); border-color:var(--orange-500); }

/* ---------------- HOME: ABOUT + STATS ---------------- */
.home-about-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center; }
.home-about-media{ width:100%; }
.home-about-stats{ background:var(--bone); border-radius:18px; padding:36px 28px; }
.home-about-stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; text-align:center; }
/* The whole value (peso sign + number) is one styled unit, so the sign is the same
   orange display font as the digits and sits on the same line. */
.home-stat-value{
  display:block; font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--orange-500);
}
.home-about-stats-grid p{ font-size:0.8rem; margin:4px 0 0; }

/* ---------------- HOME: generic placeholder block ----------------
   Used wherever real media (photo/video/screenshot) should eventually
   replace this block — remove the placeholder div and drop in a real
   <img>/<video> with the same wrapping container. */
.home-placeholder-block{
  width:100%; aspect-ratio:4/3; border-radius:16px;
  background:repeating-linear-gradient(135deg, var(--bone), var(--bone) 10px, #EFEBE2 10px, #EFEBE2 20px);
  border:2px dashed var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--ink-soft);
}
.home-placeholder-block span{ font-size:0.82rem; font-weight:600; }
.home-placeholder-sm{ aspect-ratio:1; margin-bottom:16px; }
.home-placeholder-wide{ aspect-ratio:16/10; }

/* Real uploaded photos — same footprint as the placeholder they replace,
   so swapping one in from Site Settings doesn't shift the surrounding
   layout at all. */
.home-media-photo{
  width:100%; aspect-ratio:4/3; border-radius:16px;
  object-fit:cover; display:block;
  box-shadow:var(--shadow-sm);
}
.home-media-photo-sm{ aspect-ratio:1; margin-bottom:16px; }

/* ---------------- HOME: WHAT WE DO ---------------- */
.home-services-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.home-service-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px;
  text-align:center; transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.home-service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.home-service-card h3{ font-size:1.02rem; margin-bottom:8px; }
.home-service-card p{ font-size:0.86rem; margin:0; }

/* ---------------- HOME: OUR IMPACT (dedicated section) ---------------- */
.home-impact-section{ position:relative; overflow:hidden; }
.home-impact-grid{
  grid-template-columns:repeat(4, 1fr) !important;
  max-width:920px; margin:0 auto; background:transparent !important; padding:0 !important;
}
.home-impact-grid > div{
  background:var(--bone); border-radius:16px; padding:28px 16px;
}
.home-impact-grid .home-stat-value{ font-size:2rem; }

/* ---------------- HOME: WHERE WE SERVE (real map) ---------------- */
.home-serve-layout{ display:grid; grid-template-columns:280px 1fr; gap:32px; margin-top:48px; align-items:stretch; }
.home-region-counts{ display:flex; flex-direction:column; gap:14px; }
.home-region-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:20px 22px;
  display:flex; align-items:center; gap:14px;
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}
.home-region-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-sm); }
.home-region-dot{ width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.home-region-card strong{ display:block; font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:var(--black); line-height:1; }
.home-region-card span{ font-size:0.82rem; color:var(--ink-soft); }
.home-serve-cta{ margin-top:8px; justify-content:center; }

.home-map-wrap{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); position:relative; }
.home-ph-map{ width:100%; height:100%; min-height:460px; background:var(--bone); }
.home-ph-map .leaflet-container{ font-family:var(--font-body); background:var(--bone); }
.home-ph-map path{ cursor:pointer; transition:fill-opacity 0.15s ease; }
.home-map-hint{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(18,13,9,0.85); color:#fff; font-size:0.76rem; font-weight:500;
  padding:7px 16px; border-radius:20px; pointer-events:none; margin:0; z-index:400;
}

/* ---------------- PROVINCE MODAL ----------------
   A true fixed-position overlay, completely decoupled from the page grid,
   so a province with 20+ offices never stretches the map or the stat
   cards beside it — only the modal itself scrolls, capped to the
   viewport height. */
.province-modal-backdrop{
  position:fixed; inset:0; z-index:5000;
  background:rgba(18,13,9,0.55);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity 0.2s ease, visibility 0.2s ease;
}
.province-modal-backdrop.is-open{ opacity:1; visibility:visible; }
body.province-modal-open{ overflow:hidden; }

.province-modal{
  background:#fff; border-radius:16px; width:100%; max-width:480px;
  max-height:min(600px, 85vh); display:flex; flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,0.3);
  transform:translateY(12px) scale(0.98); transition:transform 0.2s ease;
}
.province-modal-backdrop.is-open .province-modal{ transform:translateY(0) scale(1); }

.province-modal-header{ padding:26px 26px 18px; border-bottom:1px solid var(--line); position:relative; flex-shrink:0; }
.province-modal-header h3{ font-size:1.3rem; margin:6px 0 0; }
.province-modal-close{
  position:absolute; top:18px; right:18px; z-index:10; width:30px; height:30px; border-radius:50%;
  border:none; background:var(--bone); color:var(--ink-soft); font-size:1.2rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
  transition:background 0.15s ease, color 0.15s ease;
}
.province-modal-close:hover{ background:var(--orange-tint); color:var(--orange-600); }

.province-modal-body{ padding:10px 26px 26px; overflow-y:auto; flex:1; }
.province-detail-office{ padding:14px 0; border-top:1px solid var(--line); }
.province-detail-office:first-child{ border-top:none; }
.province-detail-office strong{ display:block; font-size:0.94rem; margin-bottom:4px; }
.province-detail-office p{ font-size:0.82rem; color:var(--ink-soft); margin:2px 0; }
.province-detail-phone{ color:var(--orange-600) !important; font-weight:600; }
.province-detail-empty{ color:var(--ink-soft); font-size:0.86rem; margin:14px 0 0; }

@media (max-width:860px){
  .home-serve-layout{ grid-template-columns:1fr; }
  .home-region-counts{ flex-direction:row; flex-wrap:wrap; }
  .home-region-card{ flex:1; min-width:150px; }
  .home-serve-cta{ width:100%; }
  .home-ph-map{ min-height:360px; }
}
@media (max-width:480px){
  .home-region-counts{ flex-direction:column; }
  .province-modal{ max-height:90vh; }
  .province-modal-header{ padding:20px 20px 14px; }
  .province-modal-body{ padding:8px 20px 20px; }
}

/* ---------------- (legacy, no longer used by the current teaser) ---------------- */
.home-serve-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:center; }

/* ---------------- HOME: VALUES ROW (teaser) ---------------- */
.home-values-row{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; margin-top:40px; }
.home-value-chip{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,107,0,0.25);
  border-radius:12px; padding:20px 14px; text-align:center;
}
.home-value-chip span{ display:block; font-family:var(--font-mono); font-size:0.7rem; color:var(--orange-500); margin-bottom:8px; }
.home-value-chip strong{ color:#fff; font-size:0.86rem; font-weight:600; line-height:1.3; }

/* ---------------- HOME: PARTNER MARQUEE ---------------- */
.partners-section{ overflow:hidden; }
.partner-marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.partner-marquee-track{
  display:flex; align-items:center; gap:56px; width:max-content;
  animation:partnerScroll 18s linear infinite;
}
.partner-marquee-reverse .partner-marquee-track{ animation-direction:reverse; animation-duration:14s; }
.partner-marquee:hover .partner-marquee-track{ animation-play-state:paused; }
.partner-logo-wrap{ position:relative; flex-shrink:0; display:inline-flex; }
.partner-marquee img{
  height:78px; width:auto; object-fit:contain;
  filter:grayscale(100%); opacity:0.6;
  transition:filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}
.partner-marquee img:hover{ filter:grayscale(0%); opacity:1; transform:scale(1.06); }
.partner-logo-tooltip{
  position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--black); color:#fff;
  font-size:0.76rem; font-weight:600; white-space:nowrap;
  padding:7px 13px; border-radius:7px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  z-index:5;
}
.partner-logo-tooltip::after{
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--black);
}
.partner-logo-wrap:hover .partner-logo-tooltip{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
@keyframes partnerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .partner-marquee-track{ animation:none; }
}

@media (max-width:980px){
  .home-values-row{ grid-template-columns:repeat(2,1fr); }
  .home-services-grid{ grid-template-columns:repeat(2,1fr); }
  .home-impact-grid{ grid-template-columns:repeat(2,1fr) !important; max-width:520px; }
}
@media (max-width:860px){
  .home-about-grid{ grid-template-columns:1fr; gap:36px; }
  .home-serve-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:700px){
  .home-hero{ height:76vh; min-height:480px; }
  .home-about-stats-grid{ grid-template-columns:1fr 1fr; gap:16px; }
  .home-services-grid{ grid-template-columns:1fr; }
}

/* ---------------- LEADERSHIP: four-section structure ---------------- */

/* Jump links under the hero */
.org-jump{ background:#fff; border-bottom:1px solid var(--line); }
.org-jump-inner{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding-top:18px; padding-bottom:18px; }
.org-jump a{
  font-size:0.84rem; font-weight:600; padding:8px 18px; border-radius:20px;
  border:1.5px solid var(--line); background:#fff;
  transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.org-jump a:hover{ border-color:var(--orange-500); color:var(--orange-600); background:var(--orange-tint); }
section[id="governance"], section[id="internal-audit"], section[id="management"], section[id="operations"]{ scroll-margin-top:140px; }

/* Numbered section header */
.org-pillar-head{ display:flex; gap:22px; align-items:flex-start; max-width:800px; margin-bottom:40px; }
.org-pillar-num{
  font-family:var(--font-mono); font-weight:600; font-size:2.8rem; line-height:1; flex-shrink:0;
  color:transparent; -webkit-text-stroke:1.5px var(--orange-500);
}
.org-pillar-head .eyebrow{ margin-bottom:6px; }
.org-pillar-head h2{ margin:0 0 10px; }
.org-pillar-head p{ margin:0; }

/* Spotlight name is an h3 now (the section title above it is the h2) */
.spotlight-body .spotlight-name{ color:#fff; font-size:clamp(1.5rem, 3vw, 2rem); margin:12px 0; }
.org-after-spotlight{ margin-top:48px; }

/* Department sub-heading with a head-count chip */
.org-dept{ margin-top:56px; }
.org-pillar-head + .org-dept{ margin-top:0; }
.org-dept-head{
  display:flex; align-items:center; gap:12px;
  padding-bottom:12px; margin-bottom:24px; border-bottom:1px solid var(--line);
}
.org-dept-head h3{ margin:0; font-size:1.15rem; }
.org-dept-head span{
  font-family:var(--font-mono); font-size:0.76rem; font-weight:600;
  color:var(--orange-600); background:var(--orange-tint); padding:2px 10px; border-radius:10px;
}
.org-after-spotlight .org-dept-head{ margin-top:0; }

/* Internal Audit: its own visually distinct band, to signal independence */
.audit-band{
  display:grid; grid-template-columns:190px 1fr; max-width:760px;
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--orange-500);
  border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.audit-band + .audit-band{ margin-top:20px; }
.audit-band-photo{ aspect-ratio:3/4; background:var(--bone); }
.audit-band-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.audit-band-photo svg{ width:100%; height:100%; display:block; }
.audit-band-body{ padding:32px 34px; display:flex; flex-direction:column; justify-content:center; }
.audit-band-badge{
  font-family:var(--font-mono); font-size:0.7rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--orange-600); background:var(--orange-tint); padding:4px 12px; border-radius:20px;
  width:fit-content; margin-bottom:12px;
}
.audit-band-body h3{ margin:0 0 2px; font-size:1.4rem; }
.audit-band-role{ color:var(--ink-soft); font-size:0.95rem; margin-bottom:14px; }
.audit-band-body .person-email{ border-top:none; padding-top:0; font-size:0.86rem; }

@media (max-width:600px){
  .org-pillar-head{ gap:14px; margin-bottom:28px; }
  .org-pillar-num{ font-size:1.9rem; }
  .org-dept{ margin-top:40px; }
  .audit-band{ grid-template-columns:112px 1fr; }
  .audit-band-body{ padding:18px 16px; }
  .audit-band-body h3{ font-size:1.1rem; }
  .org-jump a{ padding:7px 14px; font-size:0.8rem; }
}

/* Phone fix: the tablet rule for .spotlight-card (<=860px, defined earlier in
   this file) was overriding the phone rule (<=700px) because it appears later,
   squeezing the Chairman / Executive Director card into two cramped columns.
   Placed last so the phone layout wins: photo on top, text below, full width. */
@media (max-width:700px){
  .spotlight-card{ grid-template-columns:1fr; }
  .spotlight-photo{ aspect-ratio:4/3; }
  .spotlight-photo img{ object-position:center 15%; }
  .spotlight-body{ padding:24px 22px 28px; }
  .spotlight-email{ max-width:100%; overflow-wrap:anywhere; }
}

/* ---------------- LEADERSHIP: bios & profile pages ---------------- */

/* Clickable photo (only rendered when the person has a bio) */
.photo-link{ display:block; width:100%; height:100%; position:relative; cursor:pointer; }
.photo-link-label{
  position:absolute; left:0; right:0; bottom:0; padding:28px 12px 12px;
  background:linear-gradient(0deg, rgba(18,13,9,0.82), transparent);
  color:#fff; font-size:0.8rem; font-weight:700; text-align:center; letter-spacing:0.02em;
  opacity:0; transform:translateY(6px); transition:opacity 0.2s ease, transform 0.2s ease;
}
.photo-link:hover .photo-link-label{ opacity:1; transform:translateY(0); }

.person-bio-link{
  display:inline-flex; align-items:center; gap:5px; margin-bottom:10px;
  font-size:0.8rem; font-weight:700; color:var(--orange-600);
}
.person-bio-link span{ transition:transform 0.2s ease; }
.person-bio-link:hover{ color:var(--orange-500); }
.person-bio-link:hover span{ transform:translateX(3px); }
.audit-band-body .person-bio-link{ margin-bottom:12px; font-size:0.86rem; }

/* Spotlight cards: bio button + email sit side by side */
.spotlight-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px; }
.spotlight-actions .spotlight-email{ margin-top:0; }
.spotlight-bio-link{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--gradient-brand); color:#fff; font-size:0.86rem; font-weight:600;
  padding:9px 18px; border-radius:24px; transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.spotlight-bio-link:hover{ transform:translateY(-2px); box-shadow:var(--shadow-glow); }

/* Profile page */
.profile-hero{ background:var(--gradient-dark); color:#fff; padding:52px 0 56px; position:relative; overflow:hidden; }
.profile-hero::after{
  content:''; position:absolute; top:-40%; right:-10%; width:55%; height:140%;
  background:radial-gradient(circle, rgba(255,107,0,0.12), transparent 65%); pointer-events:none;
}
.profile-hero .wrap{ position:relative; z-index:1; }
.profile-back{
  display:inline-flex; margin-bottom:30px; font-size:0.84rem; font-weight:600;
  color:rgba(255,255,255,0.72); transition:color 0.15s ease;
}
.profile-back:hover{ color:var(--orange-500); }
.profile-hero h1{ color:#fff; margin:6px 0 8px; }
.profile-hero-role{ color:rgba(255,255,255,0.72); font-size:1.12rem; margin:0; }

.profile-section{ padding-top:64px; }
.profile-layout{ display:grid; grid-template-columns:320px 1fr; gap:56px; align-items:start; }
.profile-side{ position:sticky; top:160px; }
.profile-photo{ aspect-ratio:2/3; border-radius:18px; overflow:hidden; background:var(--bone); box-shadow:var(--shadow-md); }
.profile-photo img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
.profile-photo svg{ width:100%; height:100%; display:block; }
.profile-side .profile-email{
  display:flex; justify-content:center; width:100%; margin-top:18px;
  color:var(--ink); background:var(--bone); border:1px solid var(--line);
  overflow-wrap:anywhere; text-align:center;
}
.profile-side .profile-email svg{ color:var(--orange-500); }
.profile-side .profile-email:hover{ color:#fff; }
.profile-side .profile-email:hover svg{ color:#fff; }

.profile-bio{ max-width:70ch; }
.profile-bio .eyebrow{ margin-bottom:18px; }
.profile-bio p{ font-size:1.06rem; line-height:1.9; color:var(--ink); margin:0 0 1.25em; }

@media (max-width:860px){
  .profile-layout{ grid-template-columns:1fr; gap:32px; }
  .profile-side{ position:static; max-width:300px; }
  .profile-section{ padding-top:44px; }
}
@media (max-width:600px){
  .profile-hero{ padding:36px 0 40px; }
  .profile-back{ margin-bottom:22px; }
  .profile-bio p{ font-size:1rem; line-height:1.8; }
}

/* Phone fix: the phone rule for .wrap (padding:0 18px, in style.css) was also
   zeroing the footer's top/bottom padding, because the footer sections are
   .wrap elements too. That jammed the copyright line against the last link on
   every page. Longhand properties here so the side padding is left alone. */
@media (max-width:600px){
  .footer-main{ padding-bottom:40px; }
  .footer-bottom{ padding-top:28px; padding-bottom:24px; }
}

/* ---------------- PRIVACY: click-to-play videos & form notice ---------------- */

/* The "Watch..." card shown instead of the YouTube player. Nothing is requested from
   YouTube until it is clicked, so it uses only the story's own photo (if any) as backdrop. */
.video-facade{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  width:100%; height:100%; padding:20px; border:none; cursor:pointer; color:#fff; text-align:center; font:inherit;
  background:var(--gradient-dark) center/cover no-repeat;
}
.video-facade::before{
  content:''; position:absolute; inset:0;
  /* light at the top so the preview picture shows; darker at the bottom so the label stays readable */
  background:linear-gradient(0deg, rgba(18,13,9,0.74) 0%, rgba(18,13,9,0.14) 55%, rgba(18,13,9,0.04) 100%);
}
.video-facade > *{ position:relative; }
.video-facade-play{
  width:68px; height:68px; border-radius:50%; background:var(--orange-500);
  display:flex; align-items:center; justify-content:center; padding-left:4px;
  box-shadow:0 8px 28px rgba(255,107,0,0.45); transition:transform 0.2s ease;
}
.video-facade:hover .video-facade-play, .video-facade:focus-visible .video-facade-play{ transform:scale(1.1); }
.video-facade:focus-visible{ outline:3px solid var(--orange-500); outline-offset:-4px; }
.video-facade-label{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; line-height:1.3; text-shadow:0 1px 8px rgba(0,0,0,0.7); }
.video-facade-fallback{
  display:block; padding:14px 18px; background:var(--black); color:#fff; text-align:center; font-weight:600; font-size:0.9rem;
}
.story-video iframe{ display:block; }

.stories-privacy-note{
  max-width:720px; margin:0 auto 36px; text-align:center; font-size:0.86rem; line-height:1.6; color:var(--ink-soft);
}
.stories-privacy-note a, .form-privacy-note a{ color:var(--orange-600); font-weight:600; text-decoration:underline; }

.form-privacy-note{ margin:-4px 0 0; font-size:0.82rem; line-height:1.65; color:var(--ink-soft); }

@media (max-width:480px){
  .video-facade-play{ width:56px; height:56px; }
  .video-facade-label{ font-size:0.95rem; }
}

/* Phones & tablets: no sideways slide-ins.
   "left"/"right" scroll-reveals start 32px off to the side, which on a narrow screen pushes the
   page wider than the screen (it could be dragged sideways) until the block has appeared.
   Use the vertical slide-up there instead. Once revealed, nothing changes; desktop is untouched. */
@media (max-width:1200px){
  [data-reveal="left"]:not(.revealed), [data-reveal="right"]:not(.revealed){ transform:translateY(28px); }
}