/* ==========================================
   LANDING PAGE STYLES
   Only loaded on index.php
========================================== */

/* ==========================================
   SMOOTH SCROLL BEHAVIOR
========================================== */
html {
  scroll-behavior: smooth;
}

.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  color: var(--red-primary);
  background: transparent;
  border: 2px solid var(--red-soft);
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-secondary:hover {
  color: var(--red-dark);
  background: var(--red-soft);
  border-color: var(--red-primary);
  box-shadow: 0 14px 28px rgba(203, 31, 31, 0.18);
  transform: translateY(-2px);
}

.cta-secondary i {
  font-size: 1.1em;
  transition: transform var(--transition-base);
}

.cta-secondary:hover i {
  transform: scale(1.15);
}

/* ==========================================
   HERO - HEADING ACCENTS, DECORATION
========================================== */
.hero-heading {
  font-size: var(--text-display);
}

.hero-desc {
  text-align: justify;
}

.hero-underline {
  display: flex;
  gap: 8px;
  margin: var(--space-3) 0 var(--space-4);
}

.hero-underline-red,
.hero-underline-blue {
  display: block;
  width: 48px;
  height: 4px;
  border-radius: var(--radius-pill);
}

.hero-underline-red {
  background: var(--red-primary);
}

.hero-underline-blue {
  background: var(--blue-primary);
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(120%, 700px);
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    var(--red-soft) 0%,
    rgba(203, 31, 31, 0.04) 55%,
    transparent 75%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.hero-accent {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.15));
  transition: transform var(--transition-base), filter var(--transition-base);
}

.hero-accent-cap {
  top: 6%;
  right: 8%;
  color: var(--blue-primary);
  font-size: clamp(1.3rem, 4vw, 2.4rem);
  transform: rotate(18deg);
}

.hero-logo-frame:hover .hero-accent-cap {
  transform: rotate(6deg) scale(1.15) translateY(-4px);
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.2));
}

.hero-accent-sparkle-1,
.hero-accent-sparkle-2 {
  color: #ffc933;
}

.hero-accent-sparkle-1 {
  top: 12%;
  right: 0;
  width: clamp(12px, 2.3vw, 22px);
  height: clamp(12px, 2.3vw, 22px);
}

.hero-accent-sparkle-2 {
  bottom: 10%;
  right: 4%;
  width: clamp(9px, 1.7vw, 16px);
  height: clamp(9px, 1.7vw, 16px);
}

.hero-logo-frame:hover .hero-accent-sparkle-1 {
  transform: scale(1.3) rotate(15deg);
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.2));
}

.hero-logo-frame:hover .hero-accent-sparkle-2 {
  transform: scale(1.35) rotate(-15deg);
  filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.2));
}

/* ==========================================
   SECTION SPACING
========================================== */
section {
  padding: 80px 0;
  scroll-margin-top: 64px; /* For fixed header */
}

.section-title {
  text-align: center;
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 10px;
}

.section-subtitle {
  text-align: center;
  color: var(--color-ink-soft);
  max-width: 700px;
  margin: 0 auto 50px;
  line-height: 1.6;
}

/* ==========================================
   ABOUT SECTION - BLUE BAND, MODERN GLASS
========================================== */
.about-section {
  position: relative;
  /* Full-bleed background WITHOUT 100vw.
     `width: 100vw; margin-inline: calc(50% - 50vw)` measures against the
     viewport INCLUDING the scrollbar, while every other section measures
     against the content box that excludes it. The section therefore sat 13px
     from the edge while the hero and Contact Us sat at 41px - visibly out of
     step, and worst between 992px and 1130px where nothing else absorbs the
     difference.

     Painting the background with a spread shadow and letting it escape via
     clip-path bleeds edge to edge while leaving the layout box exactly the
     width of its siblings, so .container lines up everywhere. */
  box-shadow: 0 0 0 100vmax var(--color-surface);
  clip-path: inset(0 -100vmax);
  /* Was a solid blue band with white text. It is now a near-white surface so
     the body copy can sit at #4e5b6b and clear AA comfortably (6.45:1) -
     #559cfa was too light to carry text of any colour, so it becomes the
     accent behind the photo instead of the background. */
  background: var(--color-surface);
}

.about-section .container {
  position: relative;
  z-index: 1;
}

/* ---------- intro: copy left, framed photo right ---------- */
.about-head {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.about-rules {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.about-rule {
  display: block;
  width: 40px;
  height: 5px;
  border-radius: var(--radius-pill);
}

.about-rule-red  { background: var(--color-secondary); }
.about-rule-blue { background: var(--color-primary); }

/* Overrides the centred .section-title: this one is a left-aligned page
   heading with the second word picked out in the brand red. */
.about-section .about-title {
  text-align: left;
  margin-bottom: 6px;
  color: var(--color-ink);
}

/* The second word of a section title, picked out in the brand red. Shared by
   About Us and Contact Us so the two headings read as a pair. */
.about-section .about-title span,
.about-title-accent span { color: var(--color-secondary); }

/* Contact Us sits left-aligned inside a centred 1100px column - NOT centred
   in the full-width container, which is what the heading rule above it does.
   Its rules therefore need the same column, or they float to the middle of the
   page while the heading starts at the left edge of the column. */
.contact-section .about-rules {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-start;
}

.about-kicker {
  margin: 0 0 18px;
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-ink);
}

.about-lede {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-base);
  line-height: 1.75;
  text-align: justify;
}

/* The photo sits on two soft brand-coloured plates, offset opposite corners. */
.about-figure {
  position: relative;
  padding: 18px;
}

.about-figure picture,
.about-figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--shadow-md);
}

.about-figure-accent {
  position: absolute;
  width: 62%;
  height: 62%;
  border-radius: 22px;
  z-index: 0;
}

.about-figure-accent-red {
  top: 0;
  left: 0;
  background: var(--color-secondary-soft);
}

.about-figure-accent-blue {
  right: 0;
  bottom: 0;
  background: rgba(85, 156, 250, 0.28);
}

/* ---------- objectives card + capability tiles ---------- */
.about-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  max-width: 1100px;
  margin: 56px auto 0;
}

.about-vision {
  padding: 26px 28px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.about-vision h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
}

.about-vision h3 i { color: var(--color-secondary); }

.about-vision p {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  text-align: justify;
}

.about-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 22px 16px;
  text-align: center;
  background: var(--color-primary-soft);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.about-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* The icon lifts a little further than the card, so the tile feels like it has
   depth rather than sliding as one flat plane. */
.about-tile i { transition: transform var(--transition-base); }
.about-tile:hover i { transform: translateY(-2px) scale(1.08); }

/* Staggered entrance. The four tiles share one .fade-up parent, so they would
   otherwise arrive in a single block; a small delay per tile lets them land in
   sequence. Deliberately short - 70ms apart, done in under a third of a
   second, so it reads as liveliness rather than as waiting for an animation. */
.about-lower.visible .about-tile,
.about-lower.initial-visible .about-tile {
  animation: tile-in 0.5s cubic-bezier(0.2, 0.9, 0.35, 1) backwards;
}
.about-lower.visible .about-tile:nth-child(1) { animation-delay: 0.05s; }
.about-lower.visible .about-tile:nth-child(2) { animation-delay: 0.12s; }
.about-lower.visible .about-tile:nth-child(3) { animation-delay: 0.19s; }
.about-lower.visible .about-tile:nth-child(4) { animation-delay: 0.26s; }

@keyframes tile-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* The global reduced-motion block already disables transitions; this kills the
   entrance animation too, so the tiles simply appear. */
@media (prefers-reduced-motion: reduce) {
  .about-lower.visible .about-tile,
  .about-lower.initial-visible .about-tile { animation: none; }
  .about-tile:hover i { transform: none; }
}

.about-tile i {
  font-size: 22px;
  color: var(--color-primary);
}

/* Alternating tiles. In a two-column grid, colouring the 1st and 4th red
   puts them on a diagonal, so no two touching tiles share a colour - which
   reads as alternation in both directions rather than as two coloured
   columns. */
.about-tile:nth-child(4n + 1),
.about-tile:nth-child(4n + 4) {
  background: var(--color-secondary-soft);
}

.about-tile:nth-child(4n + 1) i,
.about-tile:nth-child(4n + 4) i {
  color: var(--color-secondary);
}

.about-tile span {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-ink-muted);
  line-height: 1.35;
}


/* ==========================================
   CONTACT SECTION - CLEAN TEXT VERSION
========================================== */
.contact-section .section-title {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.contact-section .section-subtitle {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}

/* Contact Info - Clean Text */
.contact-info {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contact-info h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
  position: relative;
  padding-bottom: 6px;
}

.contact-info h3::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: var(--red-primary);
  border-radius: 2px;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid #f1f4f8;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-top: 2px;
  color: var(--white);
  background: var(--blue-primary);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
}

.contact-actions {
  display: flex;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
}

.btn-map-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  transition: all 0.3s ease;
  color: white;
  background: var(--red-primary);
  border: 1.5px solid var(--red-primary);
  box-shadow: 0 6px 14px rgba(203, 31, 31, 0.18);
}

.btn-map-solid:hover,
.btn-map-solid:focus-visible {
  background: var(--red-dark);
  border-color: var(--red-dark);
  box-shadow: 0 14px 26px rgba(203, 31, 31, 0.3);
  transform: translateY(-3px) scale(1.05);
}

.btn-map-solid i {
  transition: transform var(--transition-base);
}

.btn-map-solid:hover i {
  transform: translateX(3px);
}

.contact-text strong {
  display: block;
  color: var(--gray-900);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.contact-text span {
  color: var(--gray-700);
  font-size: 0.95rem;
  line-height: 1.5;
}

.contact-text a {
  color: var(--blue-primary);
  text-decoration: none;
  font-size: 0.95rem;
  /* The contact email and phone are the two links most likely to be tapped on
     a phone, and a line of text is only ~18px tall - under both the WCAG 2.5.5
     minimum (24px) and Apple's 44px guidance, so it is a thin strip that is
     easy to miss with a thumb.

     The padding enlarges the hit area; the matching negative margin cancels
     its effect on layout, so the section looks exactly as it did. */
  display: inline-block;
  padding: 9px 0;
  margin: -9px 0;
}

/* Map */
.contact-map {
  height: 100%;
  min-height: 450px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: #f1f4f8;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-location-info {
  padding: 14px 20px;
  background: white;
  border-top: 1px solid #eef2f6;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map-location-info strong {
  color: var(--gray-900);
  font-size: 0.95rem;
  font-weight: 600;
}

.map-location-info span {
  color: var(--gray-700);
  font-size: 0.85rem;
}

/* ==========================================
   ANIMATIONS
========================================== */
/* Fade-up already exists in style.css */
/* Adding more animation variations */

.fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease,
    transform 0.8s ease;
}

.fade-left.visible,
.fade-left.initial-visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease,
    transform 0.8s ease;
}

.fade-right.visible,
.fade-right.initial-visible {
  opacity: 1;
  transform: translateX(0);
}

/* The .hero-dots / .about-dots radial-gradient dot patterns were removed.
   Each was a large absolutely-positioned layer combining a repeating
   radial-gradient with a mask-image, and mask-image forces the element onto
   its own rasterisation path - expensive on phone GPUs over an area that
   size, and the mobile breakpoint made .hero-dots larger still. Purely
   decorative, so removing them costs nothing but paint time. */

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 992px) {
  section {
    padding: 60px 0;
  }

    .hero-underline {
    justify-content: center;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-info {
    height: auto;
  }

  .contact-map {
    height: auto;
    min-height: 0;
  }

  .contact-map iframe {
    height: 350px;
    min-height: 280px;
  }

  .about-head {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-lower {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }
}

@media (max-width: 768px) {
  section {
    padding: 40px 0;
  }


  .section-subtitle {
    font-size: 1rem;
    margin: 0 auto 30px;
    padding: 0 15px;
  }

  .about-intro-text p {
    font-size: 1.02rem;
  }

  .about-intro-card {
    padding: 22px;
  }

  .about-fact-grid {
    gap: 16px;
  }

  .contact-grid {
    gap: 30px;
  }

  .contact-item {
    padding: 12px 0;
  }

  .contact-info h3 {
    margin-bottom: 20px;
  }

  .contact-info h3::after {
    width: 40px;
  }

  .contact-map iframe {
    height: 350px;
  }

  .map-location-info {
    padding: 12px 16px;
  }

  .map-location-info strong {
    font-size: 0.9rem;
  }

  .map-location-info span {
    font-size: 0.8rem;
  }

  .about-figure {
    padding: 12px;
  }

  .about-vision {
    padding: 20px 22px;
  }

  .about-tile {
    padding: 18px 12px;
  }
}

@media (max-width: 480px) {
  section {
    padding: 30px 0;
  }

  .about-fact-grid {
    grid-template-columns: 1fr;
  }

  .contact-item {
    padding: 10px 0;
  }

  .contact-text span,
  .contact-text a {
    font-size: 0.88rem;
  }

  .contact-map iframe {
    height: 280px;
  }

  .map-location-info {
    padding: 10px 14px;
  }

  .contact-actions {
    flex-direction: column;
  }

  .about-tiles {
    grid-template-columns: 1fr;
  }
}