/* BASE STYLES & RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Aviation Color System */
  --fuselage-graphite: #20282B;
  --aviation-black: #111618;
  --cabin-ivory: #F5F4EF;
  --cloud-ceramic: #E8EAE6;
  --brushed-titanium: #AAB2B3;
  --runway-grey: #737D7F;
  --cool-slate: #4E5B5E;
  --aviation-teal: #287D80;
  --signal-aqua: #58AAA9;
  --runway-sage: #71806B;
  --safety-amber: #C29A50;
  --warm-copper: #A66D57;
  
  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

body {
  font-family: var(--font-family);
  background-color: var(--cabin-ivory);
  color: var(--aviation-black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--aviation-teal);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover, a:focus {
  color: var(--fuselage-graphite);
}

h1, h2, h3, h4 {
  font-weight: 500;
  line-height: 1.2;
  color: var(--fuselage-graphite);
  overflow-wrap: anywhere;
}

/* ACCESSIBILITY & FOCUS */
:focus-visible {
  outline: 3px solid var(--safety-amber);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

[hidden] {
  display: none !important;
}

/* LAYOUT CLASSES */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-16);
}

/* HEADER */
.site-header {
  background-color: var(--cabin-ivory);
  border-bottom: 1px solid var(--brushed-titanium);
  position: relative;
  height: auto;
  min-height: 64px;
  display: flex;
  align-items: center;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--aviation-black);
  overflow-wrap: anywhere;
}

.brand-icon {
  width: 24px;
  height: 24px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: var(--space-24);
}

.nav-links a {
  color: var(--cool-slate);
  font-size: 0.95rem;
  font-weight: 500;
}

.nav-links a:hover {
  color: var(--aviation-teal);
}

.nav-links a[aria-current="page"] {
  color: var(--aviation-teal);
  border-bottom: 2px solid var(--aviation-teal);
  padding-bottom: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  background-color: var(--aviation-teal);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: center;
}

.btn:hover {
  background-color: var(--fuselage-graphite);
  color: #fff;
}

.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--aviation-teal);
  color: var(--aviation-teal);
}

.btn-secondary:hover {
  background-color: var(--aviation-teal);
  color: #fff;
}

.hamburger {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--aviation-black);
  margin-bottom: 5px;
}

.hamburger-line:last-child {
  margin-bottom: 0;
}

/* HERO SECTION */
.hero {
  padding: var(--space-64) 0;
  border-bottom: 1px solid var(--cloud-ceramic);
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-64);
  align-items: center;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: var(--space-24);
  color: var(--fuselage-graphite);
}

.hero-content p {
  font-size: 1.125rem;
  color: var(--cool-slate);
  margin-bottom: var(--space-32);
  max-width: 90%;
}

.hero-actions {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.hero-visual {
  position: relative;
}

.hero-image {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}

.aviation-metadata {
  position: absolute;
  bottom: -20px;
  right: 20px;
  background-color: var(--cloud-ceramic);
  padding: var(--space-16);
  border: 1px solid var(--brushed-titanium);
  font-size: 0.75rem;
  font-family: monospace;
  color: var(--cool-slate);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(17, 22, 24, 0.1);
}

.decorative-route {
  position: absolute;
  top: 10%;
  right: 5%;
  width: 200px;
  height: 200px;
  opacity: 0.05;
  pointer-events: none;
}

/* SECTION HEADINGS */
.section-heading {
  text-align: center;
  margin: var(--space-64) 0 var(--space-40);
}

.section-heading h2 {
  font-size: 2.25rem;
  margin-bottom: var(--space-16);
}

.section-heading p {
  color: var(--cool-slate);
  max-width: 600px;
  margin: 0 auto;
}

/* CARD SYSTEM - GLASS OVERLAY */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-64);
  margin-bottom: var(--space-64);
  min-width: 0;
}

.topic-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.card-image-area {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--runway-grey);
}

.card-image {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* CRITICAL SEPARATION */
.card-gap {
  height: var(--space-32); /* 32px gap as requested (between 24-40px) */
  width: 100%;
}

.card-glass-panel {
  background: rgba(232, 234, 230, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(170, 178, 179, 0.5);
  border-radius: 4px;
  padding: var(--space-24);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--aviation-teal);
  margin-bottom: var(--space-8);
  font-weight: 600;
}

.card-glass-panel h3 {
  font-size: 1.25rem;
  margin-bottom: var(--space-16);
  color: var(--aviation-black);
}

.card-glass-panel p {
  color: var(--cool-slate);
  font-size: 0.9rem;
  margin-bottom: var(--space-24);
  flex-grow: 1;
}

.card-meta {
  display: flex;
  gap: var(--space-16);
  font-size: 0.75rem;
  color: var(--runway-grey);
  margin-bottom: var(--space-16);
  font-family: monospace;
}

.card-cta {
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.card-cta::after {
  content: '→';
  transition: transform 0.2s;
}

.card-cta:hover::after {
  transform: translateX(4px);
}

/* SUPPORTING SECTION */
.supporting-section {
  background-color: var(--cloud-ceramic);
  padding: var(--space-64) 0;
  border-top: 1px solid var(--brushed-titanium);
  border-bottom: 1px solid var(--brushed-titanium);
  margin-bottom: var(--space-64);
}

.support-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.support-content h2 {
  font-size: 2rem;
  margin-bottom: var(--space-24);
}

.support-content p {
  margin-bottom: var(--space-24);
  color: var(--cool-slate);
  font-size: 1.1rem;
}

.support-disclaimer {
  font-size: 0.85rem;
  color: var(--runway-grey);
  margin-top: var(--space-24);
  padding-top: var(--space-16);
  border-top: 1px solid var(--brushed-titanium);
}

/* SUB-PAGE CONTENT LAYOUT */
.page-header {
  padding: var(--space-64) 0 var(--space-40);
  border-bottom: 1px solid var(--brushed-titanium);
  margin-bottom: var(--space-40);
}

.page-header h1 {
  font-size: 2.5rem;
  margin-bottom: var(--space-16);
}

.editorial-intro {
  font-size: 1.25rem;
  color: var(--cool-slate);
  max-width: 800px;
}

.content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-64);
  margin-bottom: var(--space-64);
}

.article-body {
  min-width: 0;
}

.article-body h2 {
  font-size: 1.75rem;
  margin: var(--space-40) 0 var(--space-16);
  color: var(--aviation-black);
}

.article-body h3 {
  font-size: 1.25rem;
  margin: var(--space-24) 0 var(--space-8);
  color: var(--fuselage-graphite);
}

.article-body p {
  margin-bottom: var(--space-16);
  color: var(--fuselage-graphite);
}

.article-body ul {
  margin-bottom: var(--space-24);
  padding-left: var(--space-24);
  color: var(--fuselage-graphite);
}

.article-body li {
  margin-bottom: var(--space-8);
}

.practical-note {
  background-color: var(--cloud-ceramic);
  border-left: 4px solid var(--safety-amber);
  padding: var(--space-16) var(--space-24);
  margin: var(--space-24) 0;
  border-radius: 0 4px 4px 0;
}

.practical-note h4 {
  color: var(--safety-amber);
  margin-bottom: var(--space-8);
}

.sidebar {
  min-width: 0;
}

.sidebar-widget {
  background-color: var(--cloud-ceramic);
  padding: var(--space-24);
  border-radius: 4px;
  margin-bottom: var(--space-24);
  border: 1px solid var(--brushed-titanium);
}

.sidebar-widget h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-16);
  border-bottom: 1px solid var(--brushed-titanium);
  padding-bottom: var(--space-8);
}

.sidebar-links {
  list-style: none;
}

.sidebar-links li {
  margin-bottom: var(--space-8);
}

.sidebar-links a {
  display: block;
  font-size: 0.95rem;
  color: var(--cool-slate);
}

.sidebar-links a:hover {
  color: var(--aviation-teal);
}

/* CONTACT PAGE */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-64);
  margin-bottom: var(--space-64);
}

.contact-info-block {
  background-color: var(--fuselage-graphite);
  color: var(--cabin-ivory);
  padding: var(--space-40);
  border-radius: 4px;
}

.contact-info-block h2 {
  color: var(--cabin-ivory);
  margin-bottom: var(--space-24);
}

.contact-info-block p, .contact-info-block a {
  color: var(--cloud-ceramic);
  margin-bottom: var(--space-16);
}

.contact-info-block a:hover {
  color: var(--signal-aqua);
}

.form-group {
  margin-bottom: var(--space-24);
}

.form-label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--space-8);
  color: var(--aviation-black);
}

.form-control {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--brushed-titanium);
  border-radius: 4px;
  font-family: var(--font-family);
  font-size: 1rem;
  background-color: #fff;
  transition: border-color 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--aviation-teal);
  box-shadow: 0 0 0 3px rgba(40, 125, 128, 0.2);
}

.form-control.is-invalid {
  border-color: var(--safety-amber);
}

.error-message {
  display: none;
  color: var(--safety-amber);
  font-size: 0.85rem;
  margin-top: var(--space-4);
}

.is-invalid + .error-message {
  display: block;
}

.form-status {
  padding: var(--space-16);
  margin-bottom: var(--space-24);
  border-radius: 4px;
  display: none;
}

.form-status.is-success {
  display: block;
  background-color: var(--runway-sage);
  color: #fff;
}

.form-status.is-error {
  display: block;
  background-color: var(--safety-amber);
  color: #fff;
}

.map-placeholder {
  width: 100%;
  height: 200px;
  background: repeating-linear-gradient(
    45deg,
    var(--brushed-titanium),
    var(--brushed-titanium) 10px,
    var(--cloud-ceramic) 10px,
    var(--cloud-ceramic) 20px
  );
  margin-top: var(--space-24);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fuselage-graphite);
  font-weight: 600;
  text-align: center;
  padding: var(--space-16);
}

/* FOOTER */
.site-footer {
  background-color: var(--aviation-black);
  color: var(--cloud-ceramic);
  padding: var(--space-64) 0 var(--space-32);
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-40);
  margin-bottom: var(--space-40);
  min-width: 0;
}

.footer-col h4 {
  color: var(--cabin-ivory);
  margin-bottom: var(--space-16);
  font-size: 1.1rem;
}

.footer-col p {
  color: var(--runway-grey);
  font-size: 0.9rem;
  margin-bottom: var(--space-8);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: var(--space-8);
}

.footer-links a {
  color: var(--runway-grey);
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--signal-aqua);
}

.footer-bottom {
  border-top: 1px solid var(--fuselage-graphite);
  padding-top: var(--space-32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  text-align: center;
  font-size: 0.85rem;
  color: var(--runway-grey);
}

.exact-domain-link {
  font-weight: bold;
  color: var(--signal-aqua);
  letter-spacing: 0.05em;
}

.exact-domain-link:hover {
  color: var(--cabin-ivory);
}

/* COOKIE BANNER */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--fuselage-graphite);
  color: var(--cabin-ivory);
  padding: var(--space-24);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-content {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
}

.cookie-text {
  flex: 1 1 300px;
  font-size: 0.9rem;
}

.cookie-actions {
  display: flex;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.btn-cookie {
  padding: 8px 16px;
  font-size: 0.85rem;
}

/* COOKIE PREFERENCES MODAL */
.cookie-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(17, 22, 24, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.cookie-modal-overlay.is-open {
  display: flex;
}

.cookie-modal {
  background: var(--cabin-ivory);
  color: var(--aviation-black);
  padding: var(--space-32);
  border-radius: 4px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.cookie-modal h3 {
  margin-bottom: var(--space-16);
}

.pref-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--brushed-titanium);
}

.pref-label {
  font-weight: 500;
}

.pref-desc {
  font-size: 0.85rem;
  color: var(--cool-slate);
}

/* RESPONSIVE DESIGN */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .hero-content h1 {
    font-size: 2.5rem;
  }
  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--cabin-ivory);
    padding: var(--space-24);
    border-bottom: 1px solid var(--brushed-titanium);
    z-index: 100;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
  }

  .nav-links.is-open {
    display: flex;
  }

  .hamburger {
    display: block;
  }

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

  .card-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }

  .cookie-actions {
    width: 100%;
    justify-content: stretch;
  }
  
  .cookie-actions button {
    flex: 1;
  }
}

@media (max-width: 400px) {
  :root {
    --space-64: 40px;
    --space-40: 24px;
  }
  .hero-content h1 {
    font-size: 1.75rem;
  }
  .brand {
    font-size: 1rem;
  }
  .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ENDFILE */
<!-- FILE: script.js -->
document.addEventListener('DOMContentLoaded', () => {
  
  // Mobile Menu Toggle
  const hamburger = document.querySelector('.hamburger');
  const navLinks = document.querySelector('.nav-links');
  
  if (hamburger && navLinks) {
    hamburger.addEventListener('click', () => {
      const isOpen = navLinks.classList.toggle('is-open');
      hamburger.setAttribute('aria-expanded', isOpen);
    });

    // Escape to close
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && navLinks.classList.contains('is-open')) {
        navLinks.classList.remove('is-open');
        hamburger.setAttribute('aria-expanded', 'false');
        hamburger.focus();
      }
    });
  }

  // Cookie Banner Logic
  const cookieBanner = document.getElementById('cookie-banner');
  const cookieModal = document.getElementById('cookie-modal');
  const cookieChoiceBtns = document.querySelectorAll('[data-cookie-choice]');
  const savePreferencesBtn = document.getElementById('save-preferences');
  
  const cookieStatus = localStorage.getItem('hry_cookie_status');
  
  if (!cookieStatus && cookieBanner) {
    // Show banner after brief delay for natural entry
    setTimeout(() => {
      cookieBanner.classList.add('is-visible');
    }, 500);
  }

  cookieChoiceBtns.forEach(btn => {
    btn.addEventListener('click', (e) => {
      const choice = e.target.getAttribute('data-cookie-choice');
      if (choice === 'preferences') {
        if (cookieModal) {
          cookieModal.classList.add('is-open');
          // trap focus logic simplified
          const closeBtn = cookieModal.querySelector('button');
          if(closeBtn) closeBtn.focus();
        }
      } else {
        localStorage.setItem('hry_cookie_status', choice);
        cookieBanner.classList.remove('is-visible');
      }
    });
  });

  if (savePreferencesBtn) {
    savePreferencesBtn.addEventListener('click', () => {
      localStorage.setItem('hry_cookie_status', 'preferences_saved');
      cookieModal.classList.remove('is-open');
      if(cookieBanner) cookieBanner.classList.remove('is-visible');
    });
  }

  // Close modal on escape
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && cookieModal && cookieModal.classList.contains('is-open')) {
      cookieModal.classList.remove('is-open');
    }
  });

  // Contact Form Validation
  const contactForm = document.getElementById('contact-form');
  if (contactForm) {
    contactForm.addEventListener('submit', (e) => {
      e.preventDefault();
      
      let isValid = true;
      const requiredFields = contactForm.querySelectorAll('[required]');
      
      requiredFields.forEach(field => {
        if (!field.value.trim()) {
          isValid = false;
          field.classList.add('is-invalid');
          field.setAttribute('aria-invalid', 'true');
        } else if (field.type === 'email') {
          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
          if (!emailRegex.test(field.value)) {
            isValid = false;
            field.classList.add('is-invalid');
            field.setAttribute('aria-invalid', 'true');
          } else {
            field.classList.remove('is-invalid');
            field.setAttribute('aria-invalid', 'false');
          }
        } else {
          field.classList.remove('is-invalid');
          field.setAttribute('aria-invalid', 'false');
        }
        
        field.addEventListener('input', () => {
          field.classList.remove('is-invalid');
          field.setAttribute('aria-invalid', 'false');
        }, { once: true });
      });

      const statusDiv = document.getElementById('form-status');
      if (isValid) {
        statusDiv.className = 'form-status is-success';
        statusDiv.textContent = 'Thank you. Your inquiry has been validated locally and is ready for submission.';
        statusDiv.removeAttribute('hidden');
        contactForm.reset();
      } else {
        statusDiv.className = 'form-status is-error';
        statusDiv.textContent = 'Please correct the errors in the required fields.';
        statusDiv.removeAttribute('hidden');
      }
    });
  }
});
/* ENDFILE */
<!-- FILE: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Happy Roster Rankit | European Aircraft Cleaning Services</title>
  <meta name="description" content="Specialized cleaning, detailing, and cabin preparation services for commercial and private aircraft across European aviation contexts.">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23287D80' d='M20 80L50 20L80 80H20z'/%3E%3C/svg%3E">
</head>
<body>

  <header class="site-header">
    <div class="container header-inner">
      <a href="index.html" class="brand">
        <svg class="brand-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 1L2 11l7 3 2 8 3-6 5.5 5.5c.8.8 2.1.3 2.3-.8L22 1z"></path>
        </svg>
        happyrosterrankit.yachts
      </a>
      
      <button class="hamburger" aria-label="Toggle navigation" aria-expanded="false">
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
      </button>

      <nav class="main-nav">
        <ul class="nav-links">
          <li><a href="aircraft-exterior-cleaning.html">Exterior Cleaning</a></li>
          <li><a href="aircraft-cabin-detailing.html">Cabin Detailing</a></li>
          <li><a href="aircraft-turnaround-preparation.html">Turnaround</a></li>
          <li><a href="private-aircraft-detailing.html">Private Aircraft</a></li>
          <li><a href="aircraft-cleaning-planning.html">Planning</a></li>
        </ul>
        <a href="contact.html" class="btn">Contact</a>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero">
      <svg class="decorative-route" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <path d="M0,100 C30,70 70,30 100,0" fill="none" stroke="currentColor" stroke-width="2" stroke-dasharray="5,5" />
      </svg>
      <div class="container hero-grid">
        <div class="hero-content">
          <span class="card-label">Premium Aviation Support</span>
          <h1>AIRCRAFT CARE, PREPARED WITH PRECISION.</h1>
          <p>Aircraft cleaning involves far more than surface appearance. It demands meticulous cabin presentation, strategic turnaround planning, and precise coordination with operational constraints and material requirements.</p>
          <div class="hero-actions">
            <a href="aircraft-cleaning-planning.html" class="btn">Plan a Service</a>
            <a href="contact.html" class="btn btn-secondary">Discuss Requirements</a>
          </div>
        </div>
        <div class="hero-visual">
          <!-- Image kept clean. No text on top. -->
          <img src="https://picsum.photos/seed/hry-hero/1200/800" alt="Detailed view of an aircraft fuselage being prepared for service in a hangar" class="hero-image">
          <div class="aviation-metadata">
            FLT-PREP // CABIN-0X // EUR-OPS
          </div>
        </div>
      </div>
    </section>

    <section class="container">
      <div class="section-heading">
        <h2>Service Areas</h2>
        <p>Comprehensive detailing, turnaround, and presentation support tailored for various aviation environments and operational timelines.</p>
      </div>

      <div class="card-grid">
        <!-- CARD 01 -->
        <article class="topic-card">
          <div class="card-image-area">
            <img src="https://picsum.photos/seed/hry-ext/800/600" alt="Aircraft exterior inspection and cleaning preparation on the apron" class="card-image">
          </div>
          <div class="card-gap" aria-hidden="true"></div>
          <div class="card-glass-panel">
            <span class="card-label">Service 01</span>
            <h3>Aircraft Exterior Cleaning</h3>
            <p>Maintain fuselage surfaces, windows, and sensitive areas with methods suitable for aviation materials and strict environmental constraints.</p>
            <div class="card-meta">
              <span>FUSELAGE</span>
              <span>WINDOWS</span>
            </div>
            <a href="aircraft-exterior-cleaning.html" class="card-cta">Explore Exterior Care</a>
          </div>
        </article>

        <!-- CARD 02 -->
        <article class="topic-card">
          <div class="card-image-area">
            <img src="https://picsum.photos/seed/hry-cab/800/600" alt="Pristine aircraft cabin interior showcasing cleaned seats and aisles" class="card-image">
          </div>
          <div class="card-gap" aria-hidden="true"></div>
          <div class="card-glass-panel">
            <span class="card-label">Service 02</span>
            <h3>Aircraft Cabin Detailing</h3>
            <p>Comprehensive care for passenger seating, carpets, high-touch surfaces, and galleys to ensure a premium passenger experience.</p>
            <div class="card-meta">
              <span>UPHOLSTERY</span>
              <span>GALLEY</span>
            </div>
            <a href="aircraft-cabin-detailing.html" class="card-cta">Explore Cabin Detailing</a>
          </div>
        </article>

        <!-- CARD 03 -->
        <article class="topic-card">
          <div class="card-image-area">
            <img src="https://picsum.photos/seed/hry-trn/800/600" alt="Ground support equipment coordinating an aircraft turnaround" class="card-image">
          </div>
          <div class="card-gap" aria-hidden="true"></div>
          <div class="card-glass-panel">
            <span class="card-label">Service 03</span>
            <h3>Turnaround Preparation</h3>
            <p>Efficient cabin resets, waste removal, and quick surface preparation designed to meet tight operational windows between flights.</p>
            <div class="card-meta">
              <span>QUICK-TURN</span>
              <span>COORDINATION</span>
            </div>
            <a href="aircraft-turnaround-preparation.html" class="card-cta">Explore Turnaround Prep</a>
          </div>
        </article>

        <!-- CARD 04 -->
        <article class="topic-card">
          <div class="card-image-area">
            <img src="https://picsum.photos/seed/hry-prv/800/600" alt="Luxurious private jet interior featuring meticulously detailed leather and wood" class="card-image">
          </div>
          <div class="card-gap" aria-hidden="true"></div>
          <div class="card-glass-panel">
            <span class="card-label">Service 04</span>
            <h3>Private Aircraft Detailing</h3>
            <p>Specialized care for premium cabin materials, personal storage, and highly customized interiors tailored to owner preferences.</p>
            <div class="card-meta">
              <span>VIP</span>
              <span>PREMIUM MATERIALS</span>
            </div>
            <a href="private-aircraft-detailing.html" class="card-cta">Explore Private Detailing</a>
          </div>
        </article>

        <!-- CARD 05 -->
        <article class="topic-card">
          <div class="card-image-area">
            <img src="https://picsum.photos/seed/hry-pln/800/600" alt="Technical planning documents and checklists on a clipboard" class="card-image">
          </div>
          <div class="card-gap" aria-hidden="true"></div>
          <div class="card-glass-panel">
            <span class="card-label">Service 05</span>
            <h3>Aircraft Cleaning Planning</h3>
            <p>Strategic scheduling considering aircraft type, seasonal variables, turnaround constraints, and airport-specific operational rules.</p>
            <div class="card-meta">
              <span>SCHEDULING</span>
              <span>LOGISTICS</span>
            </div>
            <a href="aircraft-cleaning-planning.html" class="card-cta">Explore Planning Guide</a>
          </div>
        </article>
      </div>
    </section>

    <section class="supporting-section">
      <div class="container support-content">
        <h2>A CLEAN AIRCRAFT STARTS WITH A WELL-PLANNED SERVICE.</h2>
        <p>Aircraft cleaning involves different priorities depending on aircraft type, interior configuration, passenger use, service interval, turnaround timing, and the current cabin condition.</p>
        <p>Our approach acknowledges that actual procedures depend heavily on aircraft operators, airport rules, available equipment, and manufacturer-approved procedures. Proper preparation ensures that surface materials are cared for appropriately without causing operational delays.</p>
        <a href="aircraft-cleaning-planning.html" class="btn">View Planning Resources</a>
        <div class="support-disclaimer">
          Note: We are an independent informational resource and service provider. We do not act as an aviation regulator, aircraft manufacturer, or airport authority. Always consult operator manuals and airport guidelines for mandatory procedures.
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-grid">
      <div class="footer-col">
        <h4>Happy Roster Rankit Ltd</h4>
        <p>Company No: 09876543</p>
        <p>Aviation Park, Hangar 4<br>Frankfurt, DE</p>
        <p>operations@happyrosterrankit.yachts</p>
      </div>
      <div class="footer-col">
        <h4>Services</h4>
        <ul class="footer-links">
          <li><a href="aircraft-exterior-cleaning.html">Exterior Cleaning</a></li>
          <li><a href="aircraft-cabin-detailing.html">Cabin Detailing</a></li>
          <li><a href="aircraft-turnaround-preparation.html">Turnaround</a></li>
          <li><a href="private-aircraft-detailing.html">Private Aircraft</a></li>
          <li><a href="aircraft-cleaning-planning.html">Planning</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h4>Corporate</h4>
        <ul class="footer-links">
          <li><a href="contact.html">Contact Us</a></li>
          <li><a href="privacy-policy.html">Privacy Policy</a></li>
          <li><a href="terms-of-service.html">Terms of Service</a></li>
          <li><a href="cookie-policy.html">Cookie Policy</a></li>
        </ul>
      </div>
    </div>
    <div class="container footer-bottom">
      <p>&copy; 2026 Happy Roster Rankit. Fictional informational site.</p>
      <a href="https://happyrosterrankit.yachts" class="exact-domain-link">happyrosterrankit.yachts</a>
    </div>
  </footer>

  <div id="cookie-banner" class="cookie-banner" aria-label="Cookie Consent Banner">
    <div class="cookie-content">
      <div class="cookie-text">
        We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience and analyze traffic.
      </div>
      <div class="cookie-actions">
        <button class="btn btn-cookie" data-cookie-choice="accept">Accept All</button>
        <button class="btn btn-secondary btn-cookie" data-cookie-choice="reject">Reject Non-Essential</button>
        <button class="btn btn-secondary btn-cookie" data-cookie-choice="preferences">Preferences</button>
      </div>
    </div>
  </div>

  <div id="cookie-modal" class="cookie-modal-overlay" role="dialog" aria-modal="true" aria-labelledby="cookie-modal-title">
    <div class="cookie-modal">
      <h3 id="cookie-modal-title">Cookie Preferences</h3>
      <div class="pref-row">
        <div>
          <div class="pref-label">Essential Cookies</div>
          <div class="pref-desc">Required for core functionality. Cannot be disabled.</div>
        </div>
        <input type="checkbox" checked disabled aria-label="Essential cookies required">
      </div>
      <div class="pref-row">
        <div>
          <div class="pref-label">Analytics Cookies</div>
          <div class="pref-desc">Help us understand website traffic.</div>
        </div>
        <input type="checkbox" aria-label="Toggle analytics cookies">
      </div>
      <div style="margin-top: 24px; text-align: right;">
        <button id="save-preferences" class="btn">Save Preferences</button>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>