:root{
  --bg:#faf5ed;
  --text:#2b2b2b;
  --muted:#6b5f53;
  --brand:#c77a36;
  --brand-2:#d4a574;
  --card:#ffffff;
  --stroke:#e6ddd0;
  --accent:#c77a36;
  --tile-overlay:#f5efe6;
  --tile-text:#2a2a2a;
  --tile-border:rgba(230,221,208,.6);
  --img-window2:url('../images/window.jpg');
  --img-bridge2:url('../images/bridge.jpg');
  --img-mirror2:url('../images/mirror.jpg');
  --img-door2:url('../images/door.jpg');
  --burger-transform:4.5px;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--text);
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; 
  line-height:1.6;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;border-radius:14px}
.icon{width:24px;height:24px;margin-right:12px;filter:invert(34%) sepia(9%) saturate(1085%) hue-rotate(27deg) brightness(96%) contrast(90%);border-radius:0;flex-shrink:0}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}

.nav{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(250,245,237,.85);
  backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--stroke);
}

.nav .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
}

.brand{
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  letter-spacing:.2px;
  color:#1f1f1f;
}

.nav a{margin-left:18px;color:var(--muted)}

.nav .cta, .cta{
  display:inline-block;
  padding:12px 18px;
  border-radius:30px;
  background:var(--brand);
  color:#fff;
  border:1px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:.2s transform ease,.2s background-color ease,.2s box-shadow ease;
}

.nav .cta:hover, .cta:hover{
  transform:translateY(-1px);
  background:var(--brand-2);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  text-decoration:none;
}

.nav .cta:focus-visible, .cta:focus-visible{
  outline:2px solid #f4d4b8;
  outline-offset:2px;
}

.cta-outline{
  display:inline-block;
  padding:12px 18px;
  border-radius:30px;
  background:transparent;
  color:var(--brand);
  border:1px solid var(--brand);
  transition:.2s transform ease,.2s background-color ease,.2s border-color ease;
}

.cta-outline:hover{
  transform:translateY(-1px);
  background:rgba(199,122,54,.06);
  border-color:var(--brand-2);
  color:var(--brand-2);
  text-decoration:none;
}

.cta-outline:focus-visible{
  outline:2px solid #f4d4b8;
  outline-offset:2px;
}

.hero{
  padding:72px 0 28px;
  background: url('../images/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:48px;
  align-items:center;
}

.badge{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-size:14px;
  color:var(--muted);
}

.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brand);
}

h1{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(30px,4.6vw,52px);
  line-height:1.08;
  margin:.2em 0 .25em;
  color:#1c1c1c;
}

.subtitle{
  font-size:clamp(18px,2vw,20px);
  color:var(--muted);
  margin:6px 0 18px;
}

.key{
  display:flex;
  gap:10px 14px;
  flex-wrap:wrap;
  margin:12px 0 18px;
}

.chip{
  padding:8px 12px;
  border:1px solid var(--stroke);
  border-radius:999px;
  color:var(--muted);
  background:#fff7;
}

.hero-card{
  background:linear-gradient(180deg,#ffffff, #faf3e8);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 24px rgba(0,0,0,.05);
}

.hero-content{
  padding:28px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(250,243,232,.95));
  backdrop-filter: blur(8px);
}

.parallax-section{
  position:relative;
  background: url('../images/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.parallax-section::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(250,245,237,.15);
  z-index:0;
}

.parallax-section .container{
  position:relative;
  z-index:1;
}

.price{font-size:20px;font-weight:700}

section{
  padding:60px 0;
  border-top:1px solid var(--stroke);
}

h2{
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(24px,3.4vw,36px);
  margin:0 0 14px;
  color:#1f1f1f;
}

.lead{color:var(--muted);max-width:72ch}

.hero-message{
  font-size:clamp(18px,2vw,20px);
  color:var(--text);
  line-height:1.65;
  max-width:68ch;
  margin:20px 0;
  font-weight:500;
  letter-spacing:.1px;
}

.list{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
  margin:18px 0;
}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:18px;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
}

.card:has(.icon){
  display:flex;
  align-items:flex-start;
  gap:0;
}

.num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-weight:700;
  margin-right:10px;
}

.people{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}

.person{
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:8px;
}

.name{font-weight:700}
.role{color:var(--muted)}

.avatar{
  width:100%;
  max-height:320px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:10px;
}

.details{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}

.detail-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
  transition:.2s transform ease,.2s box-shadow ease;
}

.detail-card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.detail-header{
  padding:14px 18px 12px;
  background:linear-gradient(180deg, rgba(250,245,237,.8), rgba(255,255,255,.95));
  border-bottom:1px solid var(--stroke);
  font-weight:600;
  font-size:14px;
  color:var(--text);
}

.detail-content{
  padding:14px 18px;
  color:var(--muted);
  line-height:1.5;
}

.details-list{
  display:none;
}

@media (max-width: 720px){
  .details-desktop-card{
    display:none;
  }
  
  .details-list{
    display:block;
    line-height:2.5;
    margin-top:10px;
  }
}

.feature-card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 6px 26px rgba(0,0,0,.06);
  transition:.2s transform ease,.2s box-shadow ease;
}

.feature-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(0,0,0,.1);
}

.feature-header{
  padding:20px 24px 16px;
  background:linear-gradient(180deg, rgba(250,245,237,.9), rgba(255,255,255,.98));
  border-bottom:1px solid var(--stroke);
  font-weight:700;
  font-size:20px;
  color:var(--text);
}

.feature-content{
  padding:20px 24px;
  color:var(--text);
  line-height:1.65;
  font-size:18px;
}

#path-head{padding-bottom:24px}

#path{
  position:relative;
  padding-top:12px;
  padding-bottom:12px;
}

#path .quad{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:6px;
}

.tile{
  position:relative;
  color:#2a2a2a;
  border:1px solid rgba(230,228,216,.6);
  border-radius:16px;
  overflow:hidden;
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:24px;
  padding-bottom:0px;
  backdrop-filter:blur(0.5px);
  box-shadow:0 4px 20px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.1);
}

.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  z-index:0;
  filter:saturate(1.05);
}

.tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.0) 0%,rgba(250,242,230,.7) 50%,rgba(245,239,230,.92) 100%);
  z-index:1;
}

.tile>*{position:relative;z-index:2}
.window::before{background-image:var(--img-window2)}
.door::before{background-image:var(--img-door2)}
.bridge::before{background-image:var(--img-bridge2)}
.mirror::before{background-image:var(--img-mirror2)}

footer{
  padding:36px 0 60px;
  border-top:1px solid var(--stroke);
  color:var(--muted);
}

@media (max-width: 1200px){
  .hero-grid{grid-template-columns:1fr}
  .hero{padding-top:20px}
}

/* Burger menu styles */
.menu-toggle {
  display: none;
}

.menu-button {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 8px;
  gap: 4px;
}

.menu-button span {
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: all 0.3s ease;
  border-radius: 1px;
}

.menu-toggle:checked ~ .menu-button span:nth-child(1) {
  transform: rotate(45deg) translate(var(--burger-transform), var(--burger-transform));
}

.menu-toggle:checked ~ .menu-button span:nth-child(2) {
  opacity: 0;
}

.menu-toggle:checked ~ .menu-button span:nth-child(3) {
  transform: rotate(-45deg) translate(var(--burger-transform), calc(-1 * var(--burger-transform)));
}

@media (max-width: 1200px) {
  .menu-button {
    display: flex;
  }
  
  .brand {
    padding-left: 20px;
  }
  
  .links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--stroke);
    backdrop-filter: saturate(1.2) blur(6px);
    flex-direction: column;
    padding: 20px;
    gap: 0;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }
  
  .menu-toggle:checked ~ .links {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  .nav a {
    margin-left: 0;
    padding: 16px 0;
    border-bottom: 1px solid var(--stroke);
    display: block;
    text-align: left;
  }
  
  .nav a:last-of-type:not(.cta) {
    border-bottom: none;
  }
  
  .nav .cta {
    display: none;
  }
}

@media (max-width: 720px){
  #path .quad{grid-template-columns:1fr}
}