/* =========================================
   1. CSS RESET & VARIABLES
   ========================================= */
   * { margin: 0; padding: 0; box-sizing: border-box; }

   :root {
       --bg-color: #fcfcfc;
       --text-main: #111111;
       --navy-brand: #050520;
       --font-ui: 'Inter', sans-serif;
       --font-editorial: 'Playfair Display', serif;
   }
   
   body {
       font-family: var(--font-ui);
       background-color: var(--bg-color);
       color: var(--text-main);
       line-height: 1.6;
       overflow-x: hidden;
       display: flex;
       flex-direction: column;
       min-height: 100vh;
   }
   
   /* =========================================
      2. HEADER & NAVIGATION
      ========================================= */
   header {
       position: absolute;
       top: 0; left: 0; width: 100%;
       padding: 2rem 4rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
       z-index: 100;
   }
   
   .logo {
       font-family: var(--font-ui);
       font-weight: 800;
       font-style: italic;
       font-size: 2.5rem;
       color: #ffffff;
       text-decoration: none;
       letter-spacing: -1.5px;
       text-shadow: 0px 2px 10px rgba(0,0,0,0.3);
   }
   
   .menu-wrap { position: relative; }
   .toggler {
       position: absolute; top: 0; right: 0;
       z-index: 100; cursor: pointer;
       width: 40px; height: 40px; opacity: 0;
   }
   .hamburger {
       position: relative; z-index: 99;
       width: 30px; height: 20px;
       display: flex; flex-direction: column;
       justify-content: space-between;
       pointer-events: none;
   }
   .hamburger span {
       display: block; width: 100%; height: 3px;
       background-color: #ffffff; transition: all 0.4s ease;
       box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
       transform-origin: center;
   }
   
   .toggler:checked ~ .hamburger span:nth-child(1) {
       transform: translateY(8.5px) rotate(45deg);
       box-shadow: none;
   }
   .toggler:checked ~ .hamburger span:nth-child(2) { opacity: 0; }
   .toggler:checked ~ .hamburger span:nth-child(3) {
       transform: translateY(-8.5px) rotate(-45deg);
       box-shadow: none;
   }
   
   .menu {
       position: fixed; top: 0; right: -100%;
       width: 400px; height: 100vh;
       background-color: var(--navy-brand);
       padding: 8rem 4rem;
       transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       z-index: 90;
       box-shadow: -5px 0 15px rgba(0,0,0,0.5);
       overflow-y: auto;
   }
   .toggler:checked ~ .menu { right: 0; }
   
   .menu ul { list-style: none; }
   .menu ul li { margin-bottom: 1rem; }
   .menu ul li a {
       color: #ffffff; text-decoration: none;
       font-family: var(--font-editorial);
       font-size: 0.875rem;
       font-style: italic;
       transition: opacity 0.3s;
       letter-spacing: 0.5px;
   }
   .menu ul li a:hover { opacity: 0.6; }
   
   /* =========================================
      3. UNIVERSAL HERO STYLES
      ========================================= */
   .article-hero, .contact-hero, .hero-full {
       height: 100vh; width: 100%;
       display: flex; align-items: center; justify-content: center;
       text-align: center; padding: 0 2rem;
   }
   .contact-hero { height: 40vh; }
   
   .article-hero h1, .contact-hero h1 {
       color: #ffffff;
       font-family: var(--font-editorial);
       font-size: 4.5rem;
       font-weight: 400;
       line-height: 1.1;
       max-width: 1000px;
       text-shadow: 0px 4px 15px rgba(0,0,0,0.5);
   }
   .contact-hero h1 { font-size: 4rem; }
   
   /* =========================================
      4. HOMEPAGE COMPONENTS
      ========================================= */
   .text-block {
       padding: 8rem 2rem; max-width: 900px;
       margin: 0 auto; text-align: center;
   }
   .text-block h2 {
       font-family: var(--font-editorial); font-size: 3rem;
       font-weight: 400; margin-bottom: 1.5rem; line-height: 1.2;
   }
   .text-block p { font-size: 1.1rem; color: #555; }
   
   .narrative-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2rem; padding: 0 4rem; max-width: 1800px;
    margin: 0 auto; 
    /* Removed perspective from the grid container */
}

.flip-card { 
    background-color: transparent; 
    aspect-ratio: 3/4; 
    min-height: 450px; /* Prevents the card from ever collapsing to 0 height */
    perspective: 1000px; /* Perspective belongs on the individual cards */
    cursor: pointer; 
}

.flip-card-inner {
    position: relative; width: 100%; height: 100%;
    text-align: center; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card-inner.is-flipped { 
    transform: rotateY(180deg); 
}

.flip-card-front, .flip-card-back {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

.flip-card-front { 
    background-color: #222222; /* Dark fallback color */
    background-size: cover; 
    background-position: center; 
    z-index: 2; /* Forces the front to stay on top initially */
    transform: rotateY(0deg); /* explicitly tells the browser this is the front */
}

.flip-card-back {
    background-color: var(--navy-brand); color: white;
    transform: rotateY(180deg); 
    padding: 2rem; border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}

.card-title {
    font-family: var(--font-editorial); font-size: 1.5rem;
    font-style: italic; font-weight: 400; margin-bottom: 1rem; line-height: 1.3;
}

.card-link {
    color: #ffffff; font-family: var(--font-ui); text-transform: uppercase;
    letter-spacing: 2px; font-size: 0.8rem; text-decoration: none;
    border-bottom: 1px solid #ffffff; padding-bottom: 0.2rem; transition: opacity 0.3s ease;
}

.card-link:hover { opacity: 0.5; }
   
   /* Grid Images */
   .g1 .flip-card-front { background-image: url('images/teecard.png'); filter: grayscale(100%) contrast(120%); }
   .g2 .flip-card-front { background-image: url('images/ritcard.jpg'); }
   .g3 .flip-card-front { background-image: url('images/pascard.jpg'); }
   .g4 .flip-card-front { background-image: url('images/rugcard.jpg'); }
   .g5 .flip-card-front { background-image: url('images/petcard.png'); filter: grayscale(100%) contrast(120%); }
   .g6 .flip-card-front { background-image: url('images/skicard.jpg'); }
   
   .hero-half {
       height: 50vh; width: 100%; margin-top: 4rem;
       background: url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&q=80&w=1920') center/cover;
   }
   
   /* =========================================
      5. NARRATIVE TEMPLATE COMPONENTS
      ========================================= */
   .narrative-content {
       max-width: 760px; margin: 0 auto; padding: 8rem 2rem;
   }
   .narrative-content h2 {
       font-family: var(--font-editorial); font-size: 2.5rem;
       font-weight: 400; margin-bottom: 2rem; line-height: 1.2;
   }
   .narrative-content p {
       font-family: var(--font-editorial); font-size: 1.25rem;
       color: #333; line-height: 1.8; margin-bottom: 2rem;
   }
   .drop-cap::first-letter {
       font-family: var(--font-editorial); float: left;
       font-size: 5.5rem; line-height: 0.8;
       padding-right: 1rem; padding-top: 0.5rem;
       color: var(--navy-brand);
   }
   
   .split-editorial {
       display: grid; grid-template-columns: 1fr 1fr;
       background-color: #f4f4f4;
   }
   .sticky-visual {
       position: sticky; top: 0; height: 100vh;
   }
   .scrolling-details {
       padding: 8rem 4rem; display: flex;
       flex-direction: column; justify-content: center;
   }
   .scrolling-details h2 {
       font-family: var(--font-editorial); font-size: 2.5rem;
       font-weight: 400; margin-bottom: 1.5rem; line-height: 1.2;
   }
   .scrolling-details p {
       font-family: var(--font-ui); font-size: 1.1rem;
       color: #555; margin-bottom: 2rem;
   }
   .scrolling-details ul { list-style: none; margin-bottom: 3rem; }
   .scrolling-details li {
       font-family: var(--font-ui); font-size: 1.1rem;
       color: #333; margin-bottom: 1.5rem;
       padding-left: 1.5rem; position: relative;
   }
   .scrolling-details li::before {
       content: ''; position: absolute; left: 0; top: 0.6rem;
       width: 6px; height: 6px; background-color: var(--navy-brand);
       border-radius: 50%;
   }
   .scrolling-details p a {
       color: var(--navy-brand); font-weight: 600;
       text-decoration: underline; text-underline-offset: 4px;
       transition: color 0.3s ease;
   }
   .scrolling-details p a:hover { color: #777; }
   
   /* Micro-CTA Links */
   .micro-cta {
       display: inline-block; margin-top: 0.5rem;
       color: var(--navy-brand); font-family: var(--font-ui);
       text-transform: uppercase; letter-spacing: 1px;
       font-size: 0.75rem; font-weight: 800;
       text-decoration: none; border-bottom: 1px solid transparent;
       transition: border-bottom 0.3s ease;
   }
   .micro-cta:hover { border-bottom: 1px solid var(--navy-brand); }
   
   /* The Verdict */
   .verdict-section {
       text-align: center; padding: 8rem 2rem;
       max-width: 800px; margin: 0 auto; display: flex;
       flex-direction: column; align-items: center;
   }
   .verdict-section h2 {
       font-family: var(--font-editorial); font-size: 2.5rem;
       font-weight: 400; margin-bottom: 1.5rem;
   }
   .verdict-section p {
       font-family: var(--font-editorial); font-size: 1.35rem;
       font-style: italic; color: #444;
   }
   
   /* Call To Action Buttons */
   .cta-btn-final, .submit-btn {
       display: inline-block; margin-top: 3rem;
       padding: 1.2rem 3.5rem; background-color: var(--navy-brand);
       color: #ffffff; font-family: var(--font-ui);
       text-transform: uppercase; letter-spacing: 2px;
       font-size: 0.95rem; font-weight: 800; text-decoration: none;
       transition: all 0.3s ease; border: none; cursor: pointer;
       box-shadow: 0px 10px 25px rgba(5, 5, 32, 0.2); text-align: center;
   }
   .cta-btn-final:hover, .submit-btn:hover {
       transform: translateY(-3px);
       box-shadow: 0px 15px 30px rgba(5, 5, 32, 0.3);
       background-color: #1a1a1a;
   }
   
   .sticky-buy-wrapper {
       position: fixed; bottom: 2rem; right: 2rem; z-index: 80;
   }
   .sticky-buy-btn {
       display: flex; align-items: center; justify-content: center;
       background-color: var(--text-main); color: #ffffff;
       font-family: var(--font-ui); text-transform: uppercase;
       letter-spacing: 1.5px; font-size: 0.8rem; font-weight: 800;
       text-decoration: none; padding: 1rem 2rem;
       border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.25);
       transition: transform 0.3s ease, background-color 0.3s ease;
   }
   .sticky-buy-btn:hover {
       background-color: var(--navy-brand); transform: translateY(-3px);
   }
   /* Elite Section */
   .elite-section {
    background-color: var(--navy-brand);
    color: #ffffff;
    padding: 6rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.elite-section h2 {
    font-family: var(--font-editorial);
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.elite-section p {
    font-family: var(--font-ui);
    font-size: 1.15rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 2rem auto;
    opacity: 0.85;
}

.elite-section a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
    transition: opacity 0.3s ease;
}

.elite-section a:hover {
    opacity: 0.6;
}
   /* =========================================
      6. CONTACT FORM COMPONENTS
      ========================================= */
   .contact-section {
       flex-grow: 1; padding: 6rem 2rem;
       max-width: 800px; margin: 0 auto; width: 100%;
   }
   .contact-header { text-align: center; margin-bottom: 4rem; }
   .contact-header h2 {
       font-family: var(--font-editorial); font-size: 2.5rem;
       font-weight: 400; margin-bottom: 1rem;
   }
   .contact-header p {
       font-family: var(--font-editorial); font-size: 1.25rem;
       color: #555; font-style: italic;
   }
   .contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
   .form-group { position: relative; }
   .form-group.full-width { grid-column: span 2; }
   .form-group label {
       display: block; font-family: var(--font-ui); font-size: 0.75rem;
       text-transform: uppercase; letter-spacing: 1px; color: #777;
       margin-bottom: 0.5rem; font-weight: 800;
   }
   .form-group input, .form-group textarea {
       width: 100%; background: transparent; border: none;
       border-bottom: 1px solid #cccccc; padding: 0.5rem 0;
       font-family: var(--font-editorial); font-size: 1.2rem;
       color: var(--text-main); transition: border-color 0.3s ease;
   }
   .form-group input:focus, .form-group textarea:focus {
       outline: none; border-bottom: 1px solid var(--navy-brand);
   }
   .form-group textarea { resize: vertical; min-height: 120px; }
   
   /* =========================================
      7. FOOTER
      ========================================= */
   footer {
       background-color: var(--navy-brand); color: #fff;
       padding: 4rem; display: flex;
       justify-content: space-between; align-items: center;
   }
   .footer-links a {
       color: #fff; text-decoration: none; margin-right: 2rem;
       font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px;
   }
   .copyright { font-size: 0.8rem; opacity: 0.6; }
   
   /* =========================================
      8. MEDIA QUERIES (Universal Responsive)
      ========================================= */
   @media (max-width: 900px) {
       header { padding: 2rem; }
       .article-hero h1 { font-size: 3rem; }
       .contact-hero h1 { font-size: 3rem; }
       .split-editorial { grid-template-columns: 1fr; }
       .sticky-visual { position: relative; height: 50vh; }
       .scrolling-details { padding: 4rem 2rem; }
       .sticky-buy-wrapper { bottom: 1.5rem; right: 1.5rem; }
       .narrative-grid { grid-template-columns: repeat(2, 1fr); padding: 0 2rem; }
       .text-block h2 { font-size: 2rem; }
   }
   
   @media (max-width: 600px) {
       .footer-links { display: flex; flex-direction: column; gap: 1rem; }
       footer { flex-direction: column; text-align: center; gap: 2rem; }
       .drop-cap::first-letter { font-size: 4rem; }
       .cta-btn-final, .submit-btn { padding: 1rem 2rem; width: 100%; text-align: center; }
       .sticky-buy-wrapper { width: calc(100% - 3rem); left: 1.5rem; right: auto; bottom: 1.5rem; }
       .sticky-buy-btn { width: 100%; }
       .narrative-grid { grid-template-columns: 1fr; }
       .contact-form { grid-template-columns: 1fr; }
       .form-group.full-width { grid-column: span 1; }
       .submit-btn { grid-column: span 1; }
   }