/* ========== Global Reset ========== */
 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
 
 /* ========== Accessibility Helpers ========== */
 /* Show clear outlines only when navigating by keyboard */
 :focus-visible {
 outline: 3px solid #9fd6d3; /* teal ring */
 outline-offset: 2px;
 }
 
 /* Reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
 * {
 animation-duration: 0.001ms !important;
 animation-iteration-count: 1 !important;
 transition-duration: 0.001ms !important;
 scroll-behavior: auto !important;
 }
 }
 
 /* ========== Base Typography & Body ========== */
 body {
 font-family: 'Open Sans', sans-serif;
 color: #2e3d49;
 background: linear-gradient(180deg, #f6fbfb 0%, #ffffff 100%);
 line-height: 1.6;
 }
 
 /* ===== Hero Tagline Animations ===== */
 .hero-tagline .tagline,
 .hero-tagline .subtagline {
 opacity: 0;
 filter: blur(6px);
 transform: translateY(10px);
 animation: fadeBlurIn 1s ease forwards;
 }
 
 .hero-tagline .subtagline {
 animation-delay: 0.4s; /* stagger effect */
 }
 
 /* Tagline and Sub Tagline fades in at load */
 @keyframes fadeBlurIn {
 to {
 opacity: 1;
 filter: blur(0);
 transform: translateY(0);
 }
 }
 
 
 /* ============ Header =====*/
 /* Header fades w/ scroll */
 .hero {
 position: relative;
 background: linear-gradient(180deg, rgb(74 112 110), rgb(116 197 193));
 padding: 20px 10px;
 color: white;
 transition: opacity 0.4s ease; /* smooth fade */
 will-change: opacity;
 }
 
 .hero::before {
 content: "";
 position: absolute;
 inset: 0;
 background: rgba(74, 112, 110, 0.55); /* teal overlay with transparency */
 }
 
 .hero-content {
 position: relative; /* keeps content above overlay */
 max-width: 1200px;
 margin-left: 40px;
 margin-right: auto;
 text-align: left;
 }
 
 .hero h1 {
 font-family: 'Playfair Display', serif;
 font-size: 3rem;
 color: white;
 display: flex;
 align-items: center; /* keeps logo + text aligned */
 gap: 12px;
 }
 
 .hero h1 .logo {
 height: clamp(50px, 7vw, 100px); /* responsive scaling */
 width: auto;
 }
 
 /* ===== Hero Tagline (Below Header) ===== */
 .hero-tagline {
 text-align: center;
 margin: 40px 20px;
 }
 
 .tagline {
 font-size: 1.8rem;
 font-style: italic;
 color: #4a706e;
 font-family: 'Playfair Display', serif;
 margin-bottom: 10px;
 }
 
 .subtagline {
 font-size: 1.1rem;
 color: #555;
 }
 
 /* Responsive Adjustments for Hero */
 @media (max-width: 768px) {
 .hero {
 padding: 80px 15px;
 }
 
 .hero h1 {
 font-size: 2.2rem;
 }
 
 .tagline {
 font-size: 1.4rem;
 }
 
 .subtagline {
 font-size: 1rem;
 }
 }
 
 /* ========== Main Content ========== */
 main {
 max-width: 960px;
 margin: auto;
 padding: 60px 20px;
 }
 
 section {
 margin-bottom: 60px;
 }
 
 h2 {
 font-family: 'Playfair Display', serif;
 font-size: 2rem;
 margin-bottom: 20px;
 color: #4a706e;
 border-bottom: 1px solid #ddd;
 padding-bottom: 10px;
 }
 
 h3 {
 font-size: 1.3rem;
 margin-top: 30px;
 color: #3d5a5a;
 }
 
 p {
 font-size: 1rem;
 color: #444;
 margin-top: 10px;
 }
 
 /* ===== Scroll-reveal (cards fade+rise in) ===== */
 /* Initial hidden state */
 .reveal {
 opacity: 0;
 transform: translateY(18px);
 transition: opacity 500ms ease, transform 500ms ease;
 will-change: opacity, transform;
 }
 
 /* Revealed */
 .reveal.visible {
 opacity: 1;
 transform: translateY(0);
 }
 
 /* Gentle stagger helper */
 .reveal[data-delay="1"] { transition-delay: 80ms; }
 .reveal[data-delay="2"] { transition-delay: 160ms; }
 .reveal[data-delay="3"] { transition-delay: 240ms; }
 
 /* Respect reduced motion */
 @media (prefers-reduced-motion: reduce) {
 .reveal,
 .reveal.visible {
 opacity: 1 !important;
 transform: none !important;
 transition: none !important;
 }
 }
 
 /* ===== Services Section with Title + Responsive Cards ===== */
 #services {
 margin-bottom: 60px;
 }
 
 #services h2 {
 grid-column: 1 / -1; /* spans full width if grid is applied */
 margin-bottom: 30px;
 }
 
 #services .services-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 24px; /* space between cards */
 }
 
 #services article {
 background: #ffffff;
 padding: 20px;
 border-radius: 12px;
 border: 1px solid #e8eeee;
 box-shadow: 0 4px 12px rgba(0,0,0,0.05);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 #services article:hover {
 transform: translateY(-4px);
 box-shadow: 0 8px 20px rgba(0,0,0,0.08);
 }
 
 #services h3 {
 margin-top: 0;
 font-size: 1.25rem;
 color: #3d5a5a;
 }
 
 /* ========== Footer ========== */
 footer {
 background: linear-gradient(180deg, rgb(108 186 182), rgb(74 112 110));
 color: white;
 text-align: center;
 padding: 20px 10px;
 font-size: 0.9rem;
 }
 
 /* ========== Back to Top Button ========== */
 #backToTop {
 position: fixed;
 bottom: 30px;
 right: 30px;
 background: #4a706e;
 color: white;
 border: none;
 padding: 10px 14px;
 border-radius: 50%;
 font-size: 18px;
 cursor: pointer;
 opacity: 0; /* start hidden */
 transform: translateY(20px); /* start slightly lower */
 pointer-events: none; /* not clickable when hidden */
 box-shadow: 0 4px 10px rgba(0,0,0,0.2);
 transition: opacity 0.4s ease, transform 0.4s ease;
 }
 
 #backToTop.visible {
 opacity: 1;
 transform: translateY(0); /* slide up into place */
 pointer-events: auto; /* clickable when visible */
 }
 
 #backToTop:hover,
 #backToTop:focus-visible {
 background: #395c5a;
 transform: translateY(-3px); /* subtle bounce on hover/focus */
 transition: transform 0.2s ease, background 0.3s ease;
 }
 
 /* ========== Responsive Design ========== */
 @media (max-width: 768px) {
 .hero h1 {
 font-size: 2.2rem;
 }
 
 .tagline {
 font-size: 1.2rem;
 }
 
 h2 {
 font-size: 1.6rem;
 }
 
 h3 {
 font-size: 1.1rem;
 }
 
 main {
 padding: 40px 15px;
 }
 }