/* ==========================================================================
   Page-specific styles: Home, About, Consultations, Journey, Contact
   ========================================================================== */

/* Every cover-fit image below is wrapped in <picture><source>...<img></picture>
   for WebP support. <picture> is a plain inline box with no intrinsic size of
   its own, so `img{ width:100%; height:100% }` had nothing to resolve
   against — the % height is only meaningful through an ancestor with a
   *definite* height, and <picture> broke that chain. Each img rendered at
   its own natural aspect ratio instead of being cropped to fill its box, so
   photos of different source proportions (portrait vs. landscape) came out
   different sizes in what should have been a uniform grid. Making <picture>
   itself fill its sized container restores the chain for object-fit:cover. */
.hero-portrait picture,
.highlight-card .hc-media picture,
.community-media picture,
.t-item .t-media picture,
.gov-spotlight .gs-media picture,
.gallery-item picture{
  display: block;
  width: 100%;
  height: 100%;
}

/* ============================== HOME ===================================== */
.hero-home{
  position: relative;
  padding-top: calc(var(--nav-h) + var(--space-lg));
  padding-bottom: var(--space-2xl);
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, rgba(var(--color-accent-rgb),0.14), transparent 55%),
    linear-gradient(180deg, var(--color-surface-alt), var(--color-bg));
}
.hero-grid{
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--space-2xl);
  align-items: center;
}
.hero-copy, .hero-visual{
  /* Grid items default to min-width:auto, which floors their size at their
     content's min-content width — here that was ~612px (driven by the
     hero-badges row), silently overriding the 1fr track and blowing the
     whole column past the mobile viewport, with everything past the edge
     rendering off-screen. min-width:0 is the standard fix: let the track's
     fr-sizing actually govern the column width, as intended. */
  min-width: 0;
}
.hero-copy .eyebrow{ margin-bottom: var(--space-md); }
.hero-copy h1{
  /* Override the site-wide --fs-3xl here: that scale assumes a full-width
     heading, but this one lives in a narrower grid column next to the
     portrait. Scaling off 100vw let it hit its max size while the column
     stayed narrow, forcing an 8-line wrap and a dead gap before the photo. */
  font-size: clamp(1.95rem, 1.1rem + 1.7vw, 2.85rem);
  margin-bottom: var(--space-md);
  /* Balance remaining line breaks so wrapping looks intentional rather than
     ragged; browsers without support just keep the normal wrap above. */
  text-wrap: balance;
}
.hero-copy .lede{ margin-bottom: var(--space-lg); max-width: 540px; }

.hero-badges{
  display: flex; flex-wrap: nowrap; gap: 0.5rem;
  margin-top: var(--space-lg);
  /* Keep all three pills on one line at any width, scrolling horizontally
     instead of wrapping to a second row — same pattern as .milestone-strip. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px; /* room for the focus ring so it isn't clipped */
}
.hero-badges::-webkit-scrollbar{ display: none; }
/* Soft fade at the trailing edge signals "more to scroll" instead of a hard,
   confusing cutoff whenever the pills don't all fit at the current width. */
.hero-badges{
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent 100%);
}
.hero-badges .badge{ flex: none; white-space: nowrap; }

.hero-visual{ position: relative; }
.hero-portrait{
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 5 / 4;
  max-width: 900px;
  margin-inline: auto;
}
.hero-portrait img{
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.02);
  transition: transform 1.4s var(--ease-out);
}
.hero-portrait::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(15,23,42,0.35));
  pointer-events: none;
}
.hero-visual:hover .hero-portrait img{ transform: scale(1.06); }

.float-card{
  position: absolute;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  /* Sized to stay a small accent against the photo, not compete with it.
     max-width (not white-space:nowrap) bounds the card: nowrap forced it to
     grow to its full unwrapped text width regardless of viewport, which
     overflowed the whole page on mobile — max-width lets it wrap normally
     if a breakpoint is ever too narrow, but it comfortably fits on one line
     at these dimensions everywhere realistic. */
  padding: 0.72rem 0.95rem;
  display: flex; align-items: center; gap: 0.58rem;
  border: 1px solid var(--color-border);
  animation: floatY 5s ease-in-out infinite;
  max-width: 280px;
}
.float-card--credential{ top: 6%; left: -6%; }
.float-card--stat{ bottom: 8%; right: -8%; animation-delay: 1.6s; }
.float-card .fc-icon{
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.float-card .fc-icon svg{ width: 16px; height: 16px; }
.float-card strong{ display: block; font-family: var(--font-heading); font-size: 0.8rem; line-height: 1.2; }
.float-card span{ font-size: 0.7rem; color: var(--color-text-muted); }
@keyframes floatY{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .float-card{ animation: none; } }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero-copy{ order: 2; text-align: center; }
  .hero-copy .lede{ margin-inline: auto; }
  /* "safe center": centers the row when it fits, but falls back to
     start-aligned (scrollable) instead of an invisibly-clipped centered
     overflow once the pills are wider than the column. Unsupported browsers
     ignore this line and keep the base rule's default start alignment. */
  .hero-badges{ justify-content: safe center; }
  .btn-row{ justify-content: center; }
  .hero-visual{ order: 1; }
  .float-card--credential{ left: 0; top: -4%; }
  .float-card--stat{ right: 0; bottom: -4%; }
}
@media (max-width: 480px){
  .float-card{ padding: 0.6rem 0.8rem; gap: 0.5rem; max-width: 240px; }
  .float-card .fc-icon{ width: 30px; height: 30px; }
  .float-card .fc-icon svg{ width: 15px; height: 15px; }
  .float-card strong{ font-size: 0.72rem; }
  .float-card span{ font-size: 0.64rem; }
  /* Keep the hero compact so its heading never sits under the fixed
     WhatsApp FAB on short mobile viewports. */
  .hero-home{ padding-top: calc(var(--nav-h) + var(--space-sm)); }
  .hero-portrait{ aspect-ratio: 5 / 4; max-width: 360px; }
  .hero-copy .lede{ margin-top: var(--space-xs); margin-bottom: var(--space-md); }
  .hero-badges{ margin-top: var(--space-md); }
}

.trust-strip{
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-md);
  background: var(--color-surface);
}
.trust-strip .container{
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: var(--space-lg);
}
.trust-strip .ts-item{
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-text-soft);
  font-size: var(--fs-md);
  letter-spacing: 0.01em;
}
.trust-strip .ts-item svg{ width: 20px; height: 20px; color: var(--color-secondary); flex-shrink: 0; }

.intro-section .grid{ grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: var(--space-2xl); }
.intro-photo{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.intro-photo img{ width: 100%; height: 100%; object-fit: cover; }
.intro-copy .signature{
  margin-top: var(--space-lg);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-lg);
  color: var(--color-primary);
}
.intro-copy .signature small{
  display: block; margin-top: 0.35rem;
  font-family: var(--font-body); font-style: normal; font-weight: 500;
  font-size: var(--fs-xs); color: var(--color-text-soft); letter-spacing: 0.04em; text-transform: uppercase;
}
@media (max-width: 860px){ .intro-section .grid{ grid-template-columns: 1fr; } .intro-photo{ max-width: 340px; margin-inline: auto; } }

.icon-card{ padding: var(--space-lg); }
.icon-card .ic-icon{
  width: 54px; height: 54px; border-radius: 14px;
  background: rgba(var(--color-primary-rgb),0.08);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-sm);
}
.icon-card .ic-icon svg{ width: 26px; height: 26px; }
.icon-card h3{ margin-bottom: 0.5rem; font-size: var(--fs-md); }
.icon-card p{ font-size: var(--fs-sm); }

.highlight-card{ overflow: hidden; display: flex; flex-direction: column; }
.highlight-card .hc-media{ aspect-ratio: 4/3; overflow: hidden; }
.highlight-card .hc-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.highlight-card:hover .hc-media img{ transform: scale(1.07); }
.highlight-card .hc-body{ padding: var(--space-md); }
.highlight-card .hc-tag{ font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); }
.highlight-card h3{ margin-top: 0.4rem; font-size: var(--fs-md); }
.highlight-card p{ margin-top: 0.4rem; font-size: var(--fs-sm); }

.stats-band{
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary) 55%, var(--color-accent));
  color: #fff;
  padding-block: var(--space-xl);
  position: relative;
  overflow: hidden;
}
.stats-band::before{
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='white' fill-opacity='0.18'/%3E%3C/svg%3E");
  opacity: 0.5;
}
.stats-band .container{ position: relative; z-index: 1; }
.stats-grid{ display: grid; grid-template-columns: repeat(4,1fr); gap: var(--space-lg); text-align: center; }
.stats-grid .stat .num{ color: #fff; justify-content: center; }
.stats-grid .stat .label{ color: rgba(255,255,255,0.82); }
.stats-grid .stat{ text-align: center; }
@media (max-width: 860px){ .stats-grid{ grid-template-columns: repeat(2,1fr); } }

.philosophy-section .grid{ grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: start; }
.pillar-list{ display: flex; flex-direction: column; gap: var(--space-md); margin-top: var(--space-lg); }
.pillar{ display: flex; gap: var(--space-sm); }
.pillar .p-num{
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-md);
  color: var(--color-accent); flex-shrink: 0; width: 2.2rem;
}
.pillar h4{ margin-bottom: 0.25rem; }
.pillar p{ font-size: var(--fs-sm); }
@media (max-width: 860px){ .philosophy-section .grid{ grid-template-columns: 1fr; } }

.community-section .community-media{
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 520px;
}
.community-media img{ width: 100%; height: 100%; object-fit: cover; }
.community-media a:first-child{ grid-row: 1 / 3; }
.community-media a{ display: block; overflow: hidden; position: relative; }
.community-media a img{ transition: transform var(--dur-slow) var(--ease-out); }
.community-media a:hover img{ transform: scale(1.06); }
.community-copy .event-meta{
  display: flex; flex-wrap: wrap; gap: var(--space-sm);
  margin: var(--space-sm) 0 var(--space-md);
}
.event-meta span{
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-soft);
}
.event-meta svg{ width: 15px; height: 15px; color: var(--color-secondary); }
.community-section .grid{ grid-template-columns: 1fr 1fr; gap: var(--space-2xl); align-items: center; }
@media (max-width: 860px){
  .community-section .grid{ grid-template-columns: 1fr; }
  .community-media{ height: 380px; order: -1; }
}

.reflection-section{
  background: var(--color-surface-alt);
}
.reflection-card{
  max-width: 780px; margin-inline: auto; text-align: center;
}
.reflection-card .quote-block{ border-left: none; padding-left: 0; font-size: var(--fs-xl); }
.reflection-card .quote-mark{ font-family: var(--font-heading); font-size: 4rem; color: var(--color-accent); line-height: 1; display: block; margin-bottom: var(--space-sm); }

.cta-banner{
  background: var(--color-bg-dark, #0F172A);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-inline: var(--container-pad);
}
.cta-banner::before{
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(var(--color-accent-rgb),0.25), transparent 55%),
              radial-gradient(circle at 80% 80%, rgba(var(--color-primary-rgb),0.35), transparent 55%);
}
.cta-banner > *{ position: relative; z-index: 1; }
.cta-banner h2{ color: #fff; }
.cta-banner p{ color: rgba(226,232,240,0.75); max-width: 560px; margin-inline: auto; margin-top: var(--space-sm); }
.cta-banner .btn-row{ justify-content: center; margin-top: var(--space-lg); }

/* ============================== ABOUT ===================================== */
.about-intro .grid{ grid-template-columns: 0.9fr 1.1fr; gap: var(--space-2xl); align-items: center; }
.about-portrait{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.about-portrait img{ width: 100%; object-fit: cover; }
.about-portrait .ap-badge{
  position: absolute; left: var(--space-md); bottom: var(--space-md);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  padding: 0.7rem 1.1rem; border-radius: var(--radius-md);
  font-weight: 700; color: var(--color-primary); font-size: var(--fs-sm);
  box-shadow: var(--shadow-md);
}
@media (max-width: 860px){ .about-intro .grid{ grid-template-columns: 1fr; } }

.timeline{
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  padding-left: var(--space-lg);
}
.timeline::before{
  content: '';
  position: absolute; left: 9px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-primary), var(--color-accent));
}
.t-item{ position: relative; padding-bottom: var(--space-2xl); }
.t-item:last-child{ padding-bottom: 0; }
.t-item::before{
  content: '';
  position: absolute; left: -30px; top: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-surface);
  border: 3px solid var(--color-primary);
  box-shadow: 0 0 0 5px var(--color-bg);
}
.t-item .t-year{
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-secondary); margin-bottom: 0.35rem; display: block;
}
.t-item .t-card{
  display: grid; grid-template-columns: 1fr; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
}
.t-item .t-card.has-media{ grid-template-columns: 130px 1fr; align-items: center; }
.t-item .t-media{ border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; }
.t-item .t-media img{ width: 100%; height: 100%; object-fit: cover; }
.t-item h3{ font-size: var(--fs-md); margin-bottom: 0.4rem; }
.t-item p{ font-size: var(--fs-sm); }
@media (max-width: 560px){
  .t-item .t-card.has-media{ grid-template-columns: 1fr; }
  .t-item .t-media{ max-width: 130px; }
}

.values-grid .icon-card{ text-align: left; }

.gov-spotlight{
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.gov-spotlight .gs-media{ min-height: 340px; }
.gov-spotlight .gs-media img{ width: 100%; height: 100%; object-fit: cover; }
.gov-spotlight .gs-copy{ padding: var(--space-xl); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 860px){ .gov-spotlight{ grid-template-columns: 1fr; } .gov-spotlight .gs-media{ min-height: 260px; } }

/* ============================== CONSULTATIONS ============================== */
.consult-card{ padding: var(--space-lg); position: relative; }
.consult-card .cc-icon{
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff; display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-md);
}
.consult-card .cc-icon svg{ width: 28px; height: 28px; }
.consult-card h3{ margin-bottom: 0.5rem; }
.consult-card p{ font-size: var(--fs-sm); }

.process-steps{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  position: relative;
}
.process-steps::before{
  content: '';
  position: absolute; top: 34px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--color-border-strong) 0 10px, transparent 10px 18px);
  z-index: 0;
}
.step{ position: relative; z-index: 1; text-align: center; }
.step .step-num{
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg);
  display: flex; align-items: center; justify-content: center;
  margin-inline: auto; margin-bottom: var(--space-sm);
  box-shadow: var(--shadow-sm);
}
.step h3{ font-size: var(--fs-md); margin-bottom: 0.4rem; }
.step p{ font-size: var(--fs-sm); }
@media (max-width: 860px){
  .process-steps{ grid-template-columns: 1fr 1fr; }
  .process-steps::before{ display: none; }
}
@media (max-width: 520px){ .process-steps{ grid-template-columns: 1fr; } }

.availability-grid{ grid-template-columns: 1fr 1fr; }
.avail-card{ padding: var(--space-lg); }
.avail-card .av-head{ display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.avail-card .av-icon{
  width: 46px; height: 46px; border-radius: 12px;
  background: rgba(var(--color-primary-rgb),0.08); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.avail-card .av-icon svg{ width: 22px; height: 22px; }
.avail-row{ display: flex; justify-content: space-between; padding-block: 0.6rem; border-bottom: 1px dashed var(--color-border); font-size: var(--fs-sm); }
.avail-row:last-child{ border-bottom: none; }
.avail-row strong{ color: var(--color-text); font-weight: 600; }
.avail-card.private{ border-color: rgba(var(--color-accent-rgb),0.35); }
@media (max-width: 720px){ .availability-grid{ grid-template-columns: 1fr; } }

/* ============================== JOURNEY ===================================== */
.filter-bar{
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center;
  margin-bottom: var(--space-lg);
}
.filter-btn{
  padding: 0.6rem 1.3rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border-strong);
  font-size: var(--fs-sm); font-weight: 600; color: var(--color-text-muted);
  transition: all var(--dur-fast) var(--ease-out);
}
.filter-btn:hover{ border-color: var(--color-primary); color: var(--color-primary); }
.filter-btn.is-active{ background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

.gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.gallery-item{
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.gallery-item:nth-child(3n+2){ aspect-ratio: 4/5; }
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item .gi-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,23,42,0.85), rgba(15,23,42,0) 55%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-md);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.gallery-item:hover .gi-overlay, .gallery-item:focus-within .gi-overlay{ opacity: 1; }
.gallery-item .gi-cat{ font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); }
.gallery-item .gi-title{ color: #fff; font-weight: 600; font-size: var(--fs-sm); margin-top: 0.25rem; }
.gallery-item .gi-expand{
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.2); backdrop-filter: blur(4px);
  color: #fff; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--dur-fast);
}
.gallery-item:hover .gi-expand{ opacity: 1; }
.gallery-item .gi-expand svg{ width: 16px; height: 16px; }
@media (max-width: 860px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .gallery-grid{ grid-template-columns: 1fr; } }

.lightbox{
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(6,10,20,0.92);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility var(--dur-med) var(--ease-out);
}
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox-inner{ max-width: 900px; width: 100%; text-align: center; }
.lightbox-inner figure{ margin: 0; }
.lightbox-inner img{
  max-height: 74vh; margin-inline: auto; border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.lightbox-inner figcaption{ color: #E2E8F0; margin-top: var(--space-md); font-size: var(--fs-sm); }
.lightbox-close, .lightbox-nav{
  position: absolute;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast);
}
.lightbox-close:hover, .lightbox-nav:hover{ background: rgba(255,255,255,0.25); }
.lightbox-close{ top: var(--space-md); right: var(--space-md); }
.lightbox-nav svg, .lightbox-close svg{ width: 20px; height: 20px; }
.lightbox-prev{ left: var(--space-sm); top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: var(--space-sm); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px){
  .lightbox-prev, .lightbox-next{ width: 38px; height: 38px; }
}

.story-block{
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2xl);
  align-items: center;
  padding-block: var(--space-xl);
}
.story-block:nth-child(even) .story-media{ order: 2; }
.story-media{ border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.story-media img{ width: 100%; }
.story-copy .eyebrow{ margin-bottom: var(--space-sm); }
@media (max-width: 860px){
  .story-block{ grid-template-columns: 1fr; }
  .story-block:nth-child(even) .story-media{ order: 0; }
}

.milestone-strip{
  display: flex; overflow-x: auto; gap: var(--space-md);
  padding-bottom: var(--space-sm);
  scrollbar-width: thin;
}
.milestone-strip .m-card{
  flex: 0 0 260px;
  padding: var(--space-md);
}
.milestone-strip .m-year{ color: var(--color-secondary); font-weight: 700; font-size: var(--fs-sm); }
.milestone-strip .m-card h4{ margin-top: 0.4rem; }
.milestone-strip .m-card p{ font-size: var(--fs-sm); margin-top: 0.35rem; }

/* ============================== CONTACT ===================================== */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.contact-card{
  display: flex; gap: var(--space-md); padding: var(--space-lg);
}
.contact-card .cc-ic{
  width: 50px; height: 50px; border-radius: 14px; flex-shrink: 0;
  background: rgba(var(--color-primary-rgb),0.08); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.contact-card .cc-ic svg{ width: 24px; height: 24px; }
.contact-card h3{ font-size: var(--fs-md); margin-bottom: 0.3rem; }
.contact-card p{ font-size: var(--fs-sm); }
.contact-card a.cc-link{ font-weight: 600; color: var(--color-primary); }

.contact-form{
  display: flex; flex-direction: column; gap: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.field{ display: flex; flex-direction: column; gap: 0.4rem; }
.field label{ font-size: var(--fs-xs); font-weight: 600; color: var(--color-text-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.field input, .field textarea, .field select{
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb),0.14);
  outline: none;
}
.field textarea{ resize: vertical; min-height: 120px; }
.field .hint{ font-size: var(--fs-xs); color: var(--color-text-soft); }
.form-note{ font-size: var(--fs-xs); color: var(--color-text-soft); display: flex; gap: 0.5em; align-items: flex-start; }
.form-note svg{ width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--color-secondary); }
.form-status{ font-size: var(--fs-sm); font-weight: 600; padding: 0.85rem 1rem; border-radius: var(--radius-sm); display: none; }
.form-status.is-visible{ display: block; }
.form-status.success{ background: rgba(16,185,129,0.12); color: #067a56; }
[data-theme="dark"] .form-status.success{ color: #34d399; }
@media (max-width: 640px){ .form-row{ grid-template-columns: 1fr; } }

.map-embed{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16/8;
  position: relative;
  background: var(--color-surface-alt);
}
.map-embed iframe{ width: 100%; height: 100%; border: 0; display: block; }
.map-fallback{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; text-align: center; padding: var(--space-md);
  color: var(--color-text-soft);
}
.map-fallback svg{ width: 34px; height: 34px; color: var(--color-primary); }

.faq-list{ max-width: 780px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.85rem; }
.faq-item{
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.faq-q{
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 1.15rem 1.4rem; text-align: left;
  font-weight: 600; font-size: var(--fs-sm);
}
.faq-q .faq-icon{
  width: 22px; height: 22px; flex-shrink: 0; position: relative;
}
.faq-q .faq-icon::before, .faq-q .faq-icon::after{
  content: ''; position: absolute; background: var(--color-primary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.faq-q .faq-icon::before{ left: 4px; right: 4px; top: 50%; height: 2px; transform: translateY(-50%); }
.faq-q .faq-icon::after{ top: 4px; bottom: 4px; left: 50%; width: 2px; transform: translateX(-50%); }
.faq-item.is-open .faq-icon::after{ transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-a{
  max-height: 0; overflow: hidden;
  transition: max-height var(--dur-med) var(--ease-out);
}
.faq-a p{ padding: 0 1.4rem 1.2rem; font-size: var(--fs-sm); }
.faq-item.is-open .faq-a{ max-height: 240px; }

.disclaimer-banner{
  display: flex; gap: var(--space-sm); align-items: flex-start;
  background: rgba(var(--color-accent-rgb),0.08);
  border: 1px solid rgba(var(--color-accent-rgb),0.28);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
}
.disclaimer-banner svg{ width: 26px; height: 26px; color: var(--color-secondary); flex-shrink: 0; }
.disclaimer-banner h4{ margin-bottom: 0.3rem; }
.disclaimer-banner p{ font-size: var(--fs-sm); }

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