:root{
      --ocean:#282D46;
      --wood:#A17B5A;
      --warm:#F7F5F0;
      --ink:#0B0C10;
      --muted:#6B6F80;
      --line:rgba(40,45,70,.14);
      --card:#FFFFFF;
      --shadow: 0 14px 45px rgba(11,12,16,.10);
      --shadow2: 0 8px 22px rgba(11,12,16,.08);
      --radius: 22px;
      --radius2: 30px;
      --max: 1180px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family:"Jost", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--warm);
      color: var(--ink);
      letter-spacing: .2px;
    }
    a{color:inherit; text-decoration:none}
    .wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
    .anchor{scroll-margin-top: 92px}
    .spacer{height:10px}

    /* Typo */
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      padding:8px 12px; border-radius:999px;
      background: rgba(40,45,70,.08);
      border:1px solid rgba(40,45,70,.12);
      color: var(--ocean);
      font-weight:500;
      font-size:14px;
    }
    .dot{width:8px;height:8px;border-radius:50%; background: var(--wood)}
    .h1{
      font-size: clamp(34px, 4vw, 56px);
      line-height: 1.02;
      margin: 14px 0 12px;
      color: var(--ocean);
      letter-spacing: .2px;
      font-weight: 600;
    }
    .lead{
      font-size: 18px;
      line-height: 1.5;
      color: rgba(40,45,70,.78);
      margin: 0 0 18px;
      max-width: 60ch;
      font-weight: 400;
    }
    .fine{font-size: 12px; color: rgba(40,45,70,.62); line-height:1.35}
    .muted{color: rgba(40,45,70,.70)}

    /* Buttons */
    .btns{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(40,45,70,.14);
      font-weight: 600;
      font-size: 15px;
      cursor: pointer;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{transform: translateY(-1px); box-shadow: var(--shadow2)}
    .btn.primary{background: var(--ocean); color: white; border-color: rgba(40,45,70,.25)}
    .btn.ghost{background: rgba(255,255,255,.70); color: var(--ocean)}
    .btn.small{padding:10px 12px; font-size:14px; border-radius:12px}
    .btn.link{
      background: transparent;
      border-color: transparent;
      padding: 0;
      color: var(--ocean);
      box-shadow:none;
      transform:none;
      font-weight:600;
    }

    /* Header */
    .header{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(247,245,240,.78);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(40,45,70,.10);
    }
    .headbar{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0;
      gap: 18px;
    }
    .brand{display:flex; align-items:center; gap:12px}
    .logoMark{
      width: 44px; height: 44px; border-radius: 14px;
      background: var(--ocean);
      position: relative;
      box-shadow: 0 10px 24px rgba(40,45,70,.18);
      overflow:hidden;
      flex: 0 0 auto;
    }
    .logoMark::after{
      content:"";
      position:absolute; inset:8px;
      border-radius: 12px;
      border: 1.6px solid rgba(255,255,255,.70);
    }
    .brandTitle{line-height:1.05}
    .brandTitle b{display:block; color: var(--ocean); font-size:14px; letter-spacing:.18em}
    .brandTitle span{display:block; color: rgba(40,45,70,.70); font-size:13px; margin-top:4px}

    nav{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
    .navlink{
      padding:10px 10px;
      border-radius:12px;
      color: rgba(40,45,70,.82);
      font-weight:600;
      font-size:14px;
      transition: background .18s ease;
    }
    .navlink:hover{background: rgba(40,45,70,.06)}
    .headRight{display:flex; align-items:center; gap:12px}
    .phone{
      display:flex; flex-direction:column; line-height:1.1;
      padding:10px 12px; border-radius:14px;
      border:1px solid rgba(40,45,70,.12);
      background: rgba(255,255,255,.55);
    }
    .phone b{font-size:14px; color: var(--ocean)}
    .phone span{font-size:12px; color: rgba(40,45,70,.66)}
    .burger{display:none}

    /* Sections */
    section{padding: 54px 0}
    .hero{padding: 34px 0 10px}
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
      margin-bottom: 18px;
    }
    .sectionHead h2{
      margin:0;
      font-size: 28px;
      line-height: 1.1;
      color: var(--ocean);
      font-weight: 600;
      letter-spacing: .2px;
    }
    .sectionHead p{
      margin:0;
      color: rgba(40,45,70,.72);
      max-width: 70ch;
      line-height: 1.45;
      font-size: 15px;
    }

    /* Layout grids */
    .grid2{display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px}
    .grid3{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px}

    /* Cards */
    .card{
      background: rgba(255,255,255,.68);
      border: 1px solid rgba(40,45,70,.12);
      border-radius: var(--radius);
      box-shadow: var(--shadow2);
      padding: 18px;
      overflow:hidden;
      position: relative;
    }
    .card.soft{box-shadow:none; background: rgba(255,255,255,.58)}
    .card h3{margin: 0 0 8px; font-size: 18px; color: var(--ocean)}
    .card p{margin: 0; color: rgba(40,45,70,.74); line-height: 1.45; font-size: 14.5px}
    .divider{height:1px; background: rgba(40,45,70,.10); margin: 12px 0}

    /* Hero grid */
    .heroGrid{
      display:grid;
      grid-template-columns: 1.12fr .88fr;
      gap: 26px;
      align-items: stretch;
    }
    .heroCard{
      border-radius: var(--radius2);
      border: 1px solid rgba(40,45,70,.10);
      background: rgba(255,255,255,.62);
      box-shadow: var(--shadow);
      padding: 22px;
      overflow:hidden;
      position: relative;
    }
    .heroCard::before{
      content:"";
      position:absolute;
      inset:-80px -120px auto auto;
      width: 260px; height: 260px;
      border-radius: 999px;
      background: rgba(161,123,90,.12);
      transform: rotate(20deg);
    }
    .heroCard::after{
      content:"";
      position:absolute;
      inset:auto -160px -140px auto;
      width: 340px; height: 340px;
      border-radius: 999px;
      background: rgba(40,45,70,.10);
      transform: rotate(-12deg);
    }
    .heroLeft{padding: 8px 2px 14px; position:relative; z-index:1}
    .heroRight{display:grid; gap:14px; align-content:start}

    /* Brand window (placeholder) */
    .windowFrame{
      border-radius: 26px;
      border: 1px solid rgba(40,45,70,.14);
      padding: 10px;
      background: rgba(247,245,240,.65);
    }
    .windowMask{
      width: 100%;
      height: 280px;
      border-radius: 22px;
      background:
        radial-gradient(120px 120px at 30% 20%, rgba(255,255,255,.80), rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(40,45,70,.92), rgba(40,45,70,.70)),
        linear-gradient(135deg, rgba(161,123,90,.22), rgba(161,123,90,0));
      position: relative;
      overflow:hidden;
    }
    .windowMask::before{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(0deg, rgba(11,12,16,.35), rgba(11,12,16,0) 56%);
      pointer-events:none;
    }
    .windowOverlayText{
      position:absolute;
      left: 18px; right: 18px; bottom: 16px;
      display:flex; flex-direction:column; gap:4px;
      color: rgba(255,255,255,.92);
    }
    .windowOverlayText b{font-size: 18px; letter-spacing:.02em}
    .windowOverlayText span{font-size: 13px; opacity:.88}

    /* Stats */
    .statRow{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin-top: 14px;
    }
    .stat{
      border-radius: 18px;
      border: 1px solid rgba(40,45,70,.12);
      background: rgba(255,255,255,.55);
      padding: 14px 12px;
    }
    .stat b{display:block; font-size: 22px; color: var(--ocean); letter-spacing:.02em}
    .stat span{display:block; margin-top: 4px; font-size: 12.5px; color: rgba(40,45,70,.70); line-height: 1.25}

    /* Chips */
    .chipRow{display:flex; flex-wrap:wrap; gap:8px; margin-top: 12px}
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      font-size: 12px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(40,45,70,.14);
      background: rgba(247,245,240,.85);
      color: rgba(40,45,70,.78);
      font-weight: 700;
      white-space:nowrap;
    }

    /* Directions cards */
    .dirCard{
      display:flex; flex-direction:column; gap:10px;
      min-height: 220px;
    }
    .dirTop{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
    }
    .dirBadge{
      font-size:12px;
      padding:7px 10px;
      border-radius:999px;
      border:1px solid rgba(40,45,70,.12);
      background: rgba(247,245,240,.85);
      color: rgba(40,45,70,.78);
      font-weight:800;
    }
    .dirIcon{
      width: 44px; height: 44px;
      border-radius: 16px;
      background: rgba(40,45,70,.08);
      border: 1px solid rgba(40,45,70,.10);
      display:grid; place-items:center;
      flex: 0 0 auto;
    }
    .dirIcon svg{width:20px;height:20px;color:var(--ocean)}
    .dirLinkRow{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}

    /* Search block */
    .searchWrap{
      border-radius: var(--radius2);
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(40,45,70,.12);
      box-shadow: var(--shadow);
      padding: 16px;
    }
    .searchGrid{
      display:grid;
      grid-template-columns: 1.1fr 1fr 1fr 1fr;
      gap: 10px;
      align-items:end;
    }
    .field{display:grid; gap:6px}
    label{font-size: 12px; color: rgba(40,45,70,.72); font-weight: 700}
    input, select{
      width: 100%;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(40,45,70,.16);
      background: rgba(247,245,240,.95);
      outline:none;
      font-family: inherit;
      font-size: 14px;
      color: rgba(40,45,70,.90);
    }
    input:focus, select:focus{
      border-color: rgba(161,123,90,.60);
      box-shadow: 0 0 0 4px rgba(161,123,90,.14);
    }
    .searchActions{
      display:flex; gap:10px; flex-wrap:wrap; margin-top: 10px; align-items:center;
    }
    .searchResultsHead{
      display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
      margin-top: 14px;
    }
    .resultsGrid{margin-top: 12px}
    .listing{
      display:flex; flex-direction:column; gap:10px;
    }
    .thumb{
      border-radius: 18px;
      border: 1px solid rgba(40,45,70,.12);
      height: 170px;
      background:
        radial-gradient(120px 120px at 20% 30%, rgba(255,255,255,.85), rgba(255,255,255,0)),
        linear-gradient(135deg, rgba(40,45,70,.80), rgba(40,45,70,.55));
      position: relative;
      overflow:hidden;
    }
    .thumb::after{
      content:"";
      position:absolute; inset:auto -30px -40px auto;
      width: 160px; height: 160px;
      border-radius: 999px;
      background: rgba(161,123,90,.24);
      transform: rotate(18deg);
    }
    .price{font-size: 18px; font-weight: 800; color: var(--ocean)}
    .meta{
      display:flex; flex-wrap:wrap; gap:8px;
      color: rgba(40,45,70,.72);
      font-size: 13px;
      line-height:1.3;
    }
    .meta span{
      padding: 7px 9px;
      border-radius: 999px;
      border: 1px solid rgba(40,45,70,.12);
      background: rgba(247,245,240,.85);
      font-weight: 700;
      white-space:nowrap;
    }

    /* Process / FAQ details */
    details summary{
      cursor:pointer;
      list-style:none;
      font-weight: 700;
      color: rgba(40,45,70,.86);
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px solid rgba(40,45,70,.12);
      background: rgba(247,245,240,.85);
      display:flex; align-items:center; justify-content:space-between;
      gap: 12px;
      user-select:none;
    }
    details summary::-webkit-details-marker{display:none}
    .chev{transition: transform .18s ease}
    details[open] summary .chev{transform: rotate(180deg)}
    .detailBody{
      padding: 10px 4px 0;
      color: rgba(40,45,70,.74);
      font-size: 14px;
      line-height: 1.45;
    }
    .detailBody ul{margin: 8px 0 0; padding-left: 18px}
    .detailBody li{margin: 6px 0}

    /* Footer */
    footer{
      padding: 36px 0;
      border-top: 1px solid rgba(40,45,70,.10);
      background: rgba(255,255,255,.35);
    }
    .footGrid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 16px;
      align-items:start;
    }
    .footLinks{display:flex; gap:10px; flex-wrap:wrap}
    .footLinks a{
      padding:10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(40,45,70,.12);
      background: rgba(247,245,240,.85);
      color: rgba(40,45,70,.80);
      font-weight: 700;
      font-size: 13px;
    }
    .copyright{margin-top: 12px; color: rgba(40,45,70,.62); font-size: 12px; line-height:1.4}

    /* Responsive */
    @media (max-width: 1100px){
      .searchGrid{grid-template-columns: 1fr 1fr}
      .statRow{grid-template-columns: 1fr 1fr}
    }
    @media (max-width: 980px){
      nav{display:none}
      .burger{display:inline-flex}
      .phone{display:none}
      .heroGrid{grid-template-columns: 1fr}
      .windowMask{height: 240px}
      .grid3{grid-template-columns: 1fr}
      .grid2{grid-template-columns: 1fr}
      .footGrid{grid-template-columns: 1fr}
    }

/* Added for multi-page forms */
textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(40,45,70,.16);
  background: rgba(247,245,240,.95);
  outline:none;
  font-family: inherit;
  font-size: 14px;
  color: rgba(40,45,70,.90);
  min-height: 92px;
  resize: vertical;
}
textarea:focus{
  border-color: rgba(161,123,90,.60);
  box-shadow: 0 0 0 4px rgba(161,123,90,.14);
}

/* Optional active state */
.navlink[aria-current="page"]{
  background: rgba(40,45,70,.06);
}

/* Article styling (added) */
.article{max-width: 820px;}
.article h1{margin: 4px 0 12px; color: var(--ocean); font-size: 40px; line-height:1.06}
.article h2{margin: 22px 0 10px; color: var(--ocean); font-size: 22px}
.article p{margin: 10px 0; color: rgba(40,45,70,.76); line-height:1.65; font-size: 16px}
.article ul{margin: 10px 0 10px 18px; color: rgba(40,45,70,.76); line-height:1.65; font-size:16px}
.callout{
  border-radius: 18px;
  border: 1px solid rgba(40,45,70,.12);
  background: rgba(255,255,255,.62);
  padding: 14px;
}


/* Drawer active link */
.drawerNav a.active{background: rgba(40,45,70,.10); border-color: rgba(40,45,70,.18)}


/* Drawer (mobile) */
.drawerBackdrop{
  position: fixed; inset: 0;
  background: rgba(11,12,16,.28);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease;
  z-index: 90;
}
.drawer{
  position: fixed;
  top: 0; right: -360px;
  height: 100%;
  width: 360px;
  max-width: calc(100vw - 40px);
  background: rgba(247,245,240,.98);
  border-left: 1px solid rgba(40,45,70,.10);
  box-shadow: 0 24px 70px rgba(11,12,16,.22);
  transition: right .22s ease;
  z-index: 100;
  padding: 16px;
}
.drawer.open{ right: 0; }
.drawerBackdrop.open{ opacity: 1; pointer-events: auto; }
.drawerHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.drawerNav{ display:grid; gap:8px; margin-top:10px; }
.drawerNav a{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(40,45,70,.12);
  background: rgba(255,255,255,.65);
  font-weight:800;
  color: rgba(40,45,70,.86);
}
.drawerNav a:hover{ background: rgba(40,45,70,.06); }
.drawerNav a.active{ background: rgba(40,45,70,.10); border-color: rgba(40,45,70,.18); }

/* Favorites */
.favBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(40,45,70,.14);
  background: rgba(247,245,240,.92);
  cursor:pointer;
  font-size: 16px;
  line-height: 1;
  color: rgba(40,45,70,.76);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.favBtn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }
.favBtn[aria-pressed="true"]{ background: rgba(161,123,90,.16); color: var(--ocean); border-color: rgba(161,123,90,.35); }

/* Sticky CTA (mobile) */
.stickyCta{
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 80;
  display: none;
}
.stickyCta .inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(40,45,70,.12);
  background: rgba(247,245,240,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 55px rgba(11,12,16,.14);
}
.stickyCta .hint{font-size:12px; color: rgba(40,45,70,.70); line-height:1.25;}
@media (max-width: 980px){
  .stickyCta{ display:block; }
}

/* Subtle reveal on scroll */
.reveal{ opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease; }
.reveal.visible{ opacity: 1; transform: none; }

/* Breadcrumbs */
.breadcrumbs{
  display:flex; flex-wrap:wrap; gap:8px;
  margin: 0 0 10px;
}
.breadcrumbs a, .breadcrumbs span{
  font-size:12px;
  font-weight:800;
  color: rgba(40,45,70,.78);
  padding: 7px 9px;
  border-radius: 999px;
  border: 1px solid rgba(40,45,70,.12);
  background: rgba(247,245,240,.85);
}

/* Space for sticky CTA on mobile */
@media (max-width: 980px){
  body{ padding-bottom: 88px; }
}