
:root{
  --navy:#12263a;
  --ink:#1f2f3d;
  --cream:#fffaf4;
  --sand:#f3e7d7;
  --berry:#b94a5f;
  --sea:#6d9ba5;
  --white:#ffffff;
  --line:#d9cbbb;
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color:var(--ink);
    background:var(--cream);
    line-height:1.6;
}
a{
    color:inherit
}
.container{
    width:min(1120px,92%);margin:auto
}
.site-header{
    position:sticky;top:0;z-index:20;
    background:rgba(255,250,244,.96);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(31,47,61,.08);
}
.nav{
    display:flex;align-items:center;justify-content:space-between;
    min-height:76px;gap:24px
}
.brand{
    text-decoration:none;display:flex;align-items:center;gap:12px
}
.site-logo{
    width:55px !important;
    height:55px !important;
    max-width: 55px !important;
    max-height: 55px !important;
    object-fit:contain;
    display:block;
    flex-shrink: 0;
}
.product-photo{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:16px;
    margin-bottom:16px;
    display:block;
}
.brand-text strong{
    display:block;letter-spacing:.04em;color:var(--navy)
}
.brand-text span{
    display:block;
    font-size:.78rem;
    color:#67737d
}
.menu-toggle{
    display:none;
    background:none;
    border:0;
    font-size:1.8rem;
    color:var(--navy);
    cursor:pointer;
}
.nav-links{
    display:flex;
    gap:18px;
    align-items:center;
    flex-wrap:wrap
}
.nav-links a{
    text-decoration:none;
    font-weight:650;
    font-size:.93rem
}
.nav-links .button{
    color:var(--white)
}
.button{
    display:inline-flex;align-items:center;justify-content:center;
    padding:12px 18px;border-radius:999px;text-decoration:none;
    background:var(--navy);color:var(--white);font-weight:750;border:1px solid var(--navy)
}
.button.alt{
    background:transparent;color:var(--navy)
}
.hero{
    padding:60px 0 56px;
    background:
    radial-gradient(circle at 80% 20%, rgba(185,74,95,.12), transparent 31%),
    radial-gradient(circle at 15% 80%, rgba(109,155,165,.15), transparent 28%),
    var(--cream);
}
.hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
    align-items:start;
}
.hero-copy{
    min-width:0;
    text-align:center;
    max-width:900px;
    margin:0 auto;
}
.hero-events{
    margin:14px auto 0;
    max-width:760px;
    font-size:.95rem;
    color:#66737c;
    font-weight:600;
    text-align:center;
}
.hero-image-wrap{
    position:relative;
    max-width:760px;
    width:100%;
    margin:0 auto;
}
.hero-main-photo{
    width:100%;
    height:420px;
    object-fit:cover;
    border-radius:28px;
    display:block;
    box-shadow:0 20px 60px rgba(18,38,58,.12);
}
.hero-badge{
    position:absolute;
    left:24px;
    bottom:24px;
    background:rgba(255,250,244,.94);
    padding:16px 18px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(18, 38, 58, .12);
}
.hero-badge strong{
    display:block;
    color:var(--navy);
    font-family:Georgia, "Times New Roman", serif;
    font-size:1.1rem;
}
.hero-badge span{
    display:block;
    font-size:.85rem;
    color:#66737c;
    margin-top:2px;
}
.kicker{
    text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;
    font-weight:850;
    color:var(--berry)
}
h1,h2,h3{
    font-family:Georgia,"Times New Roman",serif;color:var(--navy);
    line-height:1.12
}
h1{
    font-size:clamp(2.8rem,6vw,5.4rem);
    margin:.2em 0 .22em;
    letter-spacing:-.03em
}
h2{
    font-size:clamp(2rem,4vw,3.4rem);
    margin:0 0 .45em
}
h3{
    font-size:1.45rem;
    margin:.15em 0 .35em
}
.lede{
    font-size:1.18rem;
    max-width:660px;
    color:#4e5c67;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:28px;
    justify-content:center;
}
.wave{
    height:18px;
    background:linear-gradient(135deg, transparent 12px, var(--sand) 0) 0 0/24px 24px,
    linear-gradient(45deg, var(--sand) 12px, transparent 0) 0 0/24px 24px;
    opacity:.35;
}
.section{
    padding:78px 0
}
.section.sand{
    background:var(--sand)
}
.section.white{
    background:var(--white)
}
.section-head{
    max-width:720px;
    margin-bottom:36px
}
.contact-head{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
.contact-head .lede{
    margin-left:auto;
    margin-right:auto;
}
.grid-4{
    display:grid;grid-template-columns:repeat(4,1fr);gap:18px
}
.grid-3{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px
}
.card{
    background:var(--white);border:1px solid rgba(18,38,58,.1);border-radius:22px;padding:24px;
}
.card .price{
    font-weight:850;color:var(--berry);font-size:1.08rem
}
.card p{
    margin:.45em 0;color:#59656e
}
.tag{
    display:inline-block;padding:5px 9px;border-radius:999px;background:#eef5f6;color:#426f78;
    font-size:.75rem;font-weight:800;margin-top:6px
}
.notice{
    border-left:4px solid var(--berry);background:#fff3f4;padding:18px 20px;border-radius:12px;
}
.steps{
    counter-reset:step
}
.step{
    position:relative;padding-left:58px;margin:24px 0
}
.step:before{
    counter-increment:step;content:counter(step);
    position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
    display:grid;place-items:center;background:var(--navy);color:white;font-weight:800
}
.footer{
    background:var(--navy);color:#eef2f4;padding:50px 0
}
.footer-grid{
    display:grid;grid-template-columns:1.3fr .7fr .7fr;gap:32px
}
.footer a{
    color:#eef2f4
}
.footer small{
    color:#bdc7ce
}
.form{
    display:grid;
    gap:14px;
    max-width:720px;
    margin:0 auto;
}
label{
    font-weight:750;color:var(--navy)
}
input,textarea,select{
    width:100%;
    padding:13px 14px;
    border:1px solid #c9cfd3;
    border-radius:12px;
    background:var(--white);
    color:var(--ink);
    font:inherit
}
input::placeholder,
textarea::placeholder{
    color:#7a858d;
    opacity:1;
}
input:focus,
textarea:focus,
select:focus{
    outline:2px solid var(--sea);
    outline-offset:2px;
    border-color:var(--sea);
}
textarea{
    min-height:150px;resize:vertical
}
.form-row{
    display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.muted{
    color:#66737c
}
hr.soft{
    border:0;border-top:1px solid rgba(18,38,58,.1);margin:28px 0
}
@media (max-width:860px){
  .hero-grid,
  .footer-grid{
      grid-template-columns:1fr;
  }
  .grid-4{
      grid-template-columns:repeat(2,1fr);
  }
  .grid-3{
      grid-template-columns:1fr;
  }
  .menu-toggle{
      display:block;
  }
  .nav{
      position:relative;
  }
  .nav-links{
      display:none;
      position:absolute;
      top:76px;
      left:0;
      right:0;
      background:var(--cream);
      padding:20px 4%;
      border-bottom: 1px solid rgba(18,38,58,.1);
      flex-direction:column;
      align-items:flex-start;
  }
  .nav-links.open{
      display:flex;
  }
  .hero-main-photo{
      height:380px;
  }
}
@media (max-width:560px){
  .grid-4,.form-row{
      grid-template-columns:1fr;
  }
  .hero{
      padding:58px 0 50px;
  }
  .hero-main-photo{
      height:300px;
  }
  .hero-badge{
      left:14px;
      right:14px;
      bottom:14px;
  }
}
