:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#ef4444; /* brand red */
  --ring:rgba(239,68,68,.25);
  --nav-grad: linear-gradient(135deg, #f0f4ff 0%, #fdf2f8 100%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
.container{max-width:1120px;margin:0 auto;padding:0 1rem}

/* Nav */
.nav{ position:sticky; top:0; z-index:50; background:var(--nav-grad); backdrop-filter:saturate(1.2) blur(6px); border-bottom:1px solid rgba(0,0,0,.06) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:.8rem 0 }
.brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit }
.brand img{ width:34px; height:34px; border-radius:12px; object-fit:contain; background:white; padding:2px; box-shadow: 0 10px 20px rgba(0,0,0,.06) }
.brand-name{ font-weight:800; letter-spacing:.2px }
.menu-btn{ display:none; background:none; border:0; padding:.4rem; border-radius:.75rem }
.menu-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

.nav-links, .nav-links ul{ list-style:none; margin:0; padding:0 }
.nav-links{ display:flex; gap:1rem; align-items:center }
.nav-links > li{ position:relative }
.nav-links a{ position:relative; text-decoration:none; color:#111827; padding:.25rem .1rem; font-weight:700 }
.nav-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; transform:scaleX(0); transform-origin:left; background:var(--accent); transition:transform .25s ease }
.nav-links a:hover::after{ transform:scaleX(1) }

/* Submenu (desktop) */
.submenu{
  position:absolute; top:120%; left:0; min-width:280px;
  background:var(--nav-grad);
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  padding:.5rem;
  display:none;
}
.nav-links > li:focus-within .submenu,
.nav-links > li:hover .submenu{ display:block }
.submenu a{ display:block; padding:.5rem .75rem; border-radius:.6rem; font-weight:600 }
.submenu a:hover::after{ transform:scaleX(0) } /* disable underline in submenu */
.submenu a:hover{ background:rgba(255,255,255,.6) }

/* Mobile */
@media (max-width: 860px){
  .menu-btn{ display:block }
  .nav-links{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg); border-bottom:1px solid rgba(0,0,0,.06); padding: .75rem 1rem; flex-direction:column; align-items:flex-start }
  .nav-links.open{ display:flex }
  .submenu{ position:static; display:none; background:transparent; border:0; box-shadow:none; padding:0; width:100% }
  .submenu.open{ display:block }
  .submenu a{ padding:.5rem 0 }
  .submenu-toggle{
    display:flex; align-items:center; gap:.4rem; cursor:pointer;
  }
}
/* Sections */
.hero{ padding: 5rem 0 3.5rem }
.hero h1{ font-size: clamp(2rem, 4vw + 1rem, 3rem); line-height:1.1; margin:.25rem 0 }
.hero p{ color: var(--muted); max-width: 60ch }
.hero-cta{ display:flex; gap:.75rem; margin-top:1.25rem; flex-wrap:wrap }
.btn{ appearance:none; border:0; background:#111827; color:white; padding:.8rem 1rem; border-radius:.9rem; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; box-shadow: 0 10px 20px rgba(0,0,0,.12) }
.btn.secondary{ background:transparent; color:#111827; border:1px solid rgba(17,24,39,.1) }
.btn:focus-visible{ outline:3px solid var(--ring); outline-offset:3px }

.section{ padding: 2.5rem 0 }
.section h2{ font-size: clamp(1.5rem, 2vw + .8rem, 2.2rem); margin:.2rem 0 1rem }

.footer{ margin-top:3rem; padding:2rem 0; border-top:1px solid rgba(0,0,0,.06); color:var(--muted); font-size:.95rem }
.footer a{ color:inherit }

.about-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.about-gallery img {
  width: 100%;
  height: 600px; /* Set this to match your desired height */
  object-fit: cover; /* Ensures they keep proportions but fill the area */
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Mobile: stack images */
@media (max-width: 768px) {
  .about-gallery {
    grid-template-columns: 1fr;
  }
  .about-gallery img {
    height: 400px; /* Adjust for mobile so it's not too tall */
  }
}

/* Ensure strong contrast when a section uses inline pink bg (#fff8f8) */
.section[style*="#fff8f8"],
.section[style*="background:#fff8f8"] {
  color: #111827; /* dark text */
}
.section[style*="#fff8f8"] a,
.section[style*="background:#fff8f8"] a {
  color: #0b63ce;                 /* readable link color */
  text-decoration: underline;     /* visible even without color */
}
.section[style*="#fff8f8"] .muted,
.section[style*="background:#fff8f8"] .muted {
  color: #374151;                 /* avoid too-light gray on pink */
}

/* Strong, accessible headings on light backgrounds */
.container > h2 {
  color: #0f172a;     /* high contrast */
  font-weight: 800;
  line-height: 1.2;
}

/* If you have overlay captions later, keep them readable */
.tf-slides .caption { color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5); }

/* Keyboard focus ring for any prev/next buttons inside the slider */
.tf-slides button:focus-visible { outline:3px solid rgba(239,68,68,.6); outline-offset:2px; }

/* Respect prefers-reduced-motion if the slider auto-animates (example class) */
@media (prefers-reduced-motion: reduce) {
  .tf-slides .tf-slide { transition: none !important; animation: none !important; }
}

/* Skip link: visible on focus only */
.skip-link{position:absolute;left:-9999px;top:auto}
.skip-link:focus{left:16px;top:16px;z-index:1000;background:#fff;border:2px solid #000;padding:.5rem 1rem}


/* Easy global help: stronger default text and focus colors */
:root{
  --text:#111;            /* high-contrast body text */
  --link:#0b57d0;         /* accessible blue */
  --link-hover:#093e94;
  --focus:#111;           /* focus outline color */
}
body{color:var(--text)}
a{color:var(--link)}
a:hover{color:var(--link-hover)}
/* If text sits on images: add a subtle text-shadow OR an overlay on the image container */
.card-title{ text-shadow:0 1px 2px rgba(0,0,0,.6) }
.image-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35)); }