:root{
    --wine: #6B1220;
    --wine-hover: #430C15;
    --oak: #A9825C;
    --oak-light: #CBAA7E;
    --cream: #F8F3EA;
    --cream-alt: #EFE6D4;
    --ink: #2B211C;
    --ink-muted: #5C4F45;
    --white: #ffffff;
    --header-h: 74px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  [id]{scroll-margin-top: calc(var(--header-h) + 16px);}
  body{
    font-family:'Montserrat', sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:'Playfair Display', serif; letter-spacing:0.2px; color:var(--wine-hover);}
  a{text-decoration:none; color:inherit; transition:all .25s ease;}
  img{max-width:100%; height:auto; display:block;}
  ::selection{background:var(--wine); color:var(--cream);}

  /* ---------- HEADER ---------- */
  .header{
    background:var(--white);
    box-shadow:0 2px 14px rgba(43,33,28,0.07);
    position:sticky; top:0; z-index:1000;
    height:var(--header-h);
    display:flex; align-items:center;
  }
  .nav-container{
    max-width:1200px; width:100%; margin:0 auto; padding:0 1.5rem;
    display:flex; justify-content:space-between; align-items:center;
  }
  .brand-logo{display:flex; align-items:center; gap:10px;}
  .brand-logo img{height:38px; width:auto;}
  .brand-title{font-family:'Playfair Display', serif; font-size:1.3rem; font-weight:600; color:var(--wine);}
  .brand-title span{font-size:0.8rem; color:var(--oak); font-weight:400;}

  .nav-links{display:flex; list-style:none; gap:1.7rem;}
  .nav-links a{
    font-size:0.82rem; font-weight:600; text-transform:uppercase;
    letter-spacing:1px; color:var(--ink); padding:0.5rem 0; position:relative;
  }
  .nav-links a::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
    background:var(--wine); transform:scaleX(0); transition:transform .25s ease;
  }
  .nav-links a:hover{color:var(--wine);}
  .nav-links a:hover::after{transform:scaleX(1);}

  .header-actions{display:flex; align-items:center; gap:1.2rem;}
  .btn-nav-cta{
    background:var(--wine); color:var(--white) !important;
    padding:0.6rem 1.3rem; border-radius:50px; font-size:0.78rem;
    font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
    border:2px solid var(--wine);
  }
  .btn-nav-cta:hover{background:var(--wine-hover); border-color:var(--wine-hover);}

  .mobile-toggle{
    display:none; background:none; border:none; font-size:1.4rem;
    color:var(--wine); cursor:pointer; padding:0.2rem;
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:calc(82vh - var(--header-h));
    background:
      linear-gradient(rgba(30,10,14,0.62), rgba(30,10,14,0.72)),
      url('https://images.unsplash.com/photo-1470158499416-75be9aa0c4db?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
    display:flex; align-items:center; justify-content:center;
    text-align:center; color:var(--white); padding:3rem 1.5rem;
  }
  .hero-content{max-width:760px;}
  .hero-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:0.78rem; letter-spacing:2.5px; text-transform:uppercase;
    color:var(--oak-light); font-weight:600; margin-bottom:1.1rem;
  }
  .hero-eyebrow::before, .hero-eyebrow::after{content:''; width:24px; height:1px; background:var(--oak-light);}
  .hero h1{
    font-size:clamp(2rem, 5vw, 3.3rem); font-weight:600; margin-bottom:1.1rem;
    line-height:1.2; color:var(--white);
  }
  .hero p{
    font-size:clamp(1rem, 2.2vw, 1.2rem); margin-bottom:2.2rem;
    font-weight:300; opacity:0.95; max-width:52ch; margin-left:auto; margin-right:auto;
  }
  .btn-primary{
    background:var(--wine); color:var(--white); padding:0.9rem 2.1rem;
    border-radius:50px; font-weight:600; font-size:0.88rem; letter-spacing:1px;
    text-transform:uppercase; display:inline-block; border:2px solid var(--wine);
  }
  .btn-primary:hover{background:transparent; border-color:var(--white);}
  .btn-secondary{
    background:transparent; color:var(--white); padding:0.9rem 2.1rem;
    border-radius:50px; font-weight:600; font-size:0.88rem; letter-spacing:1px;
    text-transform:uppercase; display:inline-block; border:2px solid rgba(255,255,255,0.6);
    margin-left:0.8rem;
  }
  .btn-secondary:hover{background:rgba(255,255,255,0.12); border-color:var(--white);}

  /* ---------- SECTION SHELL ---------- */
  .section{max-width:1200px; margin:5rem auto; padding:0 1.5rem;}
  .section.tight{margin-top:3.5rem; margin-bottom:3.5rem;}
  .section-title{
    text-align:center; font-size:clamp(1.6rem, 4vw, 2.2rem);
    color:var(--wine); margin-bottom:0.6rem;
  }
  .section-title::after{
    content:''; display:block; width:60px; height:2px;
    background:var(--oak); margin:14px auto 0;
  }
  .section-sub{
    text-align:center; color:var(--ink-muted); max-width:52ch;
    margin:1.1rem auto 2.8rem; font-size:0.98rem;
  }

  /* ---------- CARDS (catas) ---------- */
  .cards-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:1.8rem;}
  .card{
    background:var(--white); border-radius:12px; overflow:hidden;
    border:1px solid #ece4d6; box-shadow:0 4px 15px rgba(43,33,28,0.04);
    display:flex; flex-direction:column; text-align:center;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .card:hover{transform:translateY(-6px); box-shadow:0 14px 30px rgba(43,33,28,0.1);}
  .card-img-wrapper{height:190px; overflow:hidden;}
  .card-img-wrapper img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
  .card:hover .card-img-wrapper img{transform:scale(1.06);}
  .card-body{padding:1.6rem; display:flex; flex-direction:column; flex-grow:1;}
  .card-title{font-size:1.12rem; color:var(--wine-hover); margin-bottom:0.6rem;}
  .card-meta{
    font-size:0.72rem; letter-spacing:1px; text-transform:uppercase;
    color:var(--oak); font-weight:600; margin-bottom:0.8rem;
  }
  .card-text{font-size:0.9rem; color:var(--ink-muted); margin-bottom:1.4rem; flex-grow:1;}
  .btn-outline{
    color:var(--wine); border:1px solid var(--wine); padding:0.6rem 1.6rem;
    border-radius:50px; font-size:0.78rem; font-weight:600; align-self:center;
    text-transform:uppercase; letter-spacing:0.5px;
  }
  .btn-outline:hover{background:var(--wine); color:var(--white);}

  /* ---------- ABOUT / FEATURED ---------- */
  .featured-section{background:var(--cream-alt); padding:4.5rem 1.5rem;}
  .featured-container{
    max-width:1200px; margin:0 auto; display:flex; align-items:center;
    gap:3.5rem;
  }
  .featured-img{flex:0 0 40%; border-radius:12px; overflow:hidden; box-shadow:0 18px 40px rgba(43,33,28,0.14);}
  .featured-content{flex:1;}
  .featured-content .hero-eyebrow{color:var(--oak);}
  .featured-content .hero-eyebrow::before, .featured-content .hero-eyebrow::after{background:var(--oak);}
  .featured-content h2{font-size:clamp(1.7rem,3vw,2.3rem); margin:0.6rem 0 1.1rem;}
  .featured-content p{color:var(--ink-muted); margin-bottom:1rem; font-size:0.98rem;}
  .featured-quote{
    font-family:'Playfair Display', serif; font-style:italic; font-size:1.15rem;
    color:var(--wine-hover); border-left:3px solid var(--oak); padding-left:18px; margin:1.4rem 0;
  }

  /* ---------- BLOG ---------- */
  .blog-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.8rem;}
  .blog-card{
    background:var(--white); border-radius:12px; overflow:hidden;
    border:1px solid #ece4d6; box-shadow:0 4px 15px rgba(43,33,28,0.04);
    transition:transform .3s ease, box-shadow .3s ease;
    display:flex; flex-direction:column;
  }
  .blog-card:hover{transform:translateY(-6px); box-shadow:0 14px 30px rgba(43,33,28,0.1);}
  .blog-card{cursor:pointer;}
  .blog-card:focus-visible{outline:2px solid var(--wine); outline-offset:3px;}
  .blog-img{height:170px; overflow:hidden;}
  .blog-img img{width:100%; height:100%; object-fit:cover;}
  .blog-body{padding:1.4rem 1.5rem; display:flex; flex-direction:column; flex-grow:1;}
  .blog-tag{font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; color:var(--wine); font-weight:700;}
  .blog-card h3{font-size:1.08rem; margin:0.6rem 0 0.5rem; color:var(--wine-hover);}
  .blog-card p{font-size:0.86rem; color:var(--ink-muted); margin-bottom:0.8rem; flex-grow:1;}
  .blog-footer{display:flex; align-items:center; justify-content:space-between; margin-top:0.2rem;}
  .blog-date{font-size:0.72rem; color:var(--oak); font-weight:600;}
  .blog-more{text-align:center; margin-top:2.6rem;}
  .link-underline{color:var(--wine); font-weight:600; font-size:0.92rem; border-bottom:1px solid var(--wine); padding-bottom:2px;}
  .blog-read{font-size:0.72rem; color:var(--wine); font-weight:600;}

  /* ---------- BLOG MODAL ---------- */
  .blog-modal-overlay{
    display:none; position:fixed; inset:0; background:rgba(30,10,14,0.6);
    z-index:2000; align-items:flex-start; justify-content:center;
    padding:5vh 1.2rem; overflow-y:auto;
  }
  .blog-modal-overlay.active{display:flex;}
  .blog-modal{
    background:var(--white); border-radius:14px; max-width:720px; width:100%;
    padding:2.6rem 2.6rem 3rem; position:relative; box-shadow:0 30px 60px rgba(0,0,0,0.3);
    animation: blogModalIn .25s ease;
  }
  @keyframes blogModalIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
  .blog-modal-close{
    position:absolute; top:1.1rem; right:1.2rem; background:var(--cream-alt);
    border:none; width:36px; height:36px; border-radius:50%; font-size:1.4rem;
    line-height:1; color:var(--wine-hover); cursor:pointer;
  }
  .blog-modal-close:hover{background:var(--wine); color:var(--white);}
  .blog-modal-body .blog-tag{display:inline-block; margin-bottom:0.5rem; margin-right:0.7rem;}
  .blog-modal-body .post-modal-date{
    display:inline-block; font-size:0.78rem; color:var(--oak); font-weight:600; margin-bottom:0.5rem;
  }
  .blog-modal-body h2{font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:1rem; line-height:1.25;}
  .blog-modal-body h3{font-size:1.15rem; color:var(--wine-hover); margin:1.6rem 0 0.7rem;}
  .blog-modal-body h4{font-size:1.02rem; color:var(--wine-hover); margin:1.3rem 0 0.5rem;}
  .blog-modal-body p{color:var(--ink-muted); font-size:0.96rem; margin-bottom:0.9rem; line-height:1.65;}
  .blog-modal-body ul, .blog-modal-body ol{margin:0 0 0.9rem 1.2rem; color:var(--ink-muted); font-size:0.96rem; line-height:1.65;}
  .blog-modal-body li{margin-bottom:0.4rem;}
  .blog-modal-body strong{color:var(--ink);}
  .blog-modal-body p a{
    color:var(--wine); font-weight:600; text-decoration:underline;
    text-decoration-color:var(--oak-light); text-underline-offset:2px;
  }
  .blog-modal-body p a:hover{color:var(--wine-hover); text-decoration-color:var(--wine-hover);}
  .blog-modal-body p a[target="_blank"]::after{
    content:"↗"; display:inline-block; margin-left:2px; font-size:0.85em;
  }
  .blog-modal-body .post-hero{
    width:100%; height:240px; object-fit:cover; border-radius:10px; margin-bottom:1.4rem;
  }
  .blog-modal-body .post-steps{
    text-align:center; font-family:'Playfair Display', serif; color:var(--wine);
    font-size:1.05rem; letter-spacing:0.5px; margin:1.2rem 0;
  }
  .post-table{width:100%; border-collapse:collapse; margin-bottom:1.2rem; font-size:0.88rem;}
  .post-table th, .post-table td{padding:0.6rem 0.7rem; border:1px solid #ece4d6; text-align:left; vertical-align:top;}
  .post-table th{background:var(--cream-alt); color:var(--wine-hover); font-weight:600;}
  .post-table td:first-child{font-weight:600; color:var(--ink); white-space:nowrap;}
  @media (max-width:600px){
    .blog-modal{padding:2.2rem 1.3rem 2.4rem;}
    .post-table{font-size:0.8rem;}
    .post-table td:first-child{white-space:normal;}
  }

  /* ---------- TESTIMONIAL ---------- */
  .testi{background:var(--wine); color:var(--cream); padding:4.2rem 1.5rem; text-align:center;}
  .testi blockquote{
    font-family:'Playfair Display', serif; font-style:italic; font-weight:400;
    font-size:clamp(1.2rem, 2.4vw, 1.6rem); max-width:720px; margin:0 auto 1rem; line-height:1.45;
  }
  .testi cite{font-style:normal; font-size:0.78rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--oak-light);}

  /* ---------- CONTACT ---------- */
  .contact-wrap{display:grid; grid-template-columns:1fr 1.2fr; gap:3.5rem;}
  .contact-info h3{font-size:1.35rem; margin-bottom:0.9rem;}
  .contact-info > p{color:var(--ink-muted); margin-bottom:1.6rem; font-size:0.95rem;}
  .info-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:1.2rem;}
  .info-row i{color:var(--wine); font-size:1.05rem; margin-top:3px; width:20px;}
  .info-row strong{display:block; font-size:0.85rem;}
  .info-row span{font-size:0.9rem; color:var(--ink-muted);}

  form{display:grid; gap:1.1rem;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
  label{font-size:0.78rem; font-weight:600; color:var(--ink-muted); margin-bottom:0.4rem; display:block;}
  input, select, textarea{
    width:100%; padding:0.8rem 0.9rem; font-family:'Montserrat', sans-serif; font-size:0.92rem;
    border:1px solid #e2d8c6; background:var(--white); color:var(--ink); border-radius:8px;
  }
  input:focus, select:focus, textarea:focus{outline:none; border-color:var(--wine);}
  textarea{resize:vertical; min-height:110px;}
  .submit-btn{
    background:var(--wine); color:var(--white); border:none; padding:0.9rem 1.8rem;
    font-size:0.9rem; font-weight:600; border-radius:50px; cursor:pointer;
    justify-self:start; letter-spacing:0.5px; text-transform:uppercase;
  }
  .submit-btn:hover{background:var(--wine-hover);}
  .form-note{font-size:0.78rem; color:var(--ink-muted);}
  .form-success{
    display:none; background:var(--cream-alt); border:1px solid var(--oak-light);
    padding:0.9rem 1rem; border-radius:8px; font-size:0.88rem; color:var(--wine-hover);
  }
  .form-error{
    display:none; background:#fbe9e9; border:1px solid #e4b3b3;
    padding:0.9rem 1rem; border-radius:8px; font-size:0.88rem; color:#8a2323;
  }
  .submit-btn:disabled{opacity:0.65; cursor:not-allowed;}

  /* ---------- FOOTER ---------- */
  .footer{background:var(--ink); color:#e9e0d3; padding:3.8rem 1.5rem 1.6rem;}
  .footer-container{
    max-width:1200px; margin:0 auto; display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.2rem;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .footer-col h4{font-size:1.02rem; margin-bottom:1rem; color:var(--oak-light); font-family:'Playfair Display',serif;}
  .footer-col p{font-size:0.85rem; opacity:0.85;}
  .footer-col ul{list-style:none;}
  .footer-col ul li{margin-bottom:0.55rem; font-size:0.85rem; opacity:0.9;}
  .footer-col ul li a:hover{color:var(--oak-light);}
  .footer-brand{display:flex; align-items:center; gap:8px; margin-bottom:0.9rem;}
  .footer-brand img{height:28px;}
  .footer-brand span{font-family:'Playfair Display', serif; font-size:1.1rem; color:var(--cream);}
  .copyright{text-align:center; font-size:0.75rem; margin-top:1.4rem; opacity:0.55;}
  .footer-wim{display:flex; justify-content:center; margin-top:2rem;}
  .footer-wim img{height:64px; opacity:0.9;}

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease;}
  .reveal.in{opacity:1; transform:none;}
  @media (prefers-reduced-motion: reduce){.reveal{opacity:1; transform:none; transition:none;}}
  @media (max-width: 868px){.reveal{opacity:1; transform:none; transition:none;}}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 900px){
    .featured-container{flex-direction:column; text-align:center;}
    .featured-img{flex:none; width:100%; max-width:360px;}
    .contact-wrap{grid-template-columns:1fr;}
  }
  @media (max-width: 868px){
    .mobile-toggle{display:block;}
    .nav-menu{
      position:fixed; top:var(--header-h); left:-100%; width:100%;
      height:calc(100vh - var(--header-h)); background:var(--white);
      flex-direction:column; align-items:center; padding:2.5rem 0;
      transition:left .3s ease-in-out; box-shadow:0 10px 15px rgba(0,0,0,0.1);
    }
    .nav-menu.active{left:0;}
    .nav-links{flex-direction:column; align-items:center; gap:1.8rem;}
    .nav-links a{font-size:1.05rem;}
    .btn-nav-cta{display:none;}
  }
  @media (max-width: 480px){
    .cards-grid, .blog-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .hero{padding:2rem 1rem;}
    .btn-primary, .btn-secondary{width:100%; margin:0.4rem 0 0;}
    .footer-container{grid-template-columns:1fr; gap:2rem;}
  }