/* Logo-matched palette (extracted from provided logo image) */
:root{
  --bg: #FDF4D5;      /* logo cream */
  --bg2: #FEF5DB;    /* section cream */
  --brand: #3E3A32;   /* warm charcoal */
  --brand2: #6B665A; /* taupe/nav */
  --ink: #3E3A32;
  --muted: #6B665A;
  --accent: #9A9483;
  --gold: #C5BFAB;  /* soft highlight */

  --card: rgba(255,255,255,.80);
  --stroke: rgba(62,58,50,.16);
  --shadow: 0 18px 45px rgba(11,27,42,.12);
  --r: 22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--ink);
  background:var(--bg);
}
a{color:inherit}
.wrap{max-width:1100px; margin:0 auto; padding:0 18px}

.bg{position:fixed; inset:0; z-index:-2; overflow:hidden}
.grid{
  position:absolute; inset:-20%;
  background-image: radial-gradient(circle at 1px 1px, rgba(62,58,50,.14) 1px, transparent 0);
  background-size: 32px 32px;
  opacity:.18;
  transform: rotate(-7deg);
}
.blob{
  position:absolute; width:540px; height:540px; filter: blur(34px);
  opacity:.52; border-radius: 52% 48% 40% 60% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 30% 30%, rgba(62,58,50,.70), rgba(253,244,213,.10));
  animation: float 12s ease-in-out infinite;
}
.blob-a{top:-180px; left:-140px}
.blob-b{
  bottom:-240px; right:-180px;
  background: radial-gradient(circle at 35% 30%, rgba(107,102,90,.70), rgba(253,244,213,.10));
  animation-duration: 14s;
}
@keyframes float{ 0%,100%{transform: translate(0,0) scale(1)} 50%{transform: translate(30px,24px) scale(1.05)} }

.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(254,245,219,.72);
  border-bottom: 1px solid var(--stroke);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap: 14px;}
.brand{display:flex; gap:12px; align-items:center; text-decoration:none; min-width: 240px}
.brand__logo{
  width:54px; height:54px; border-radius: 16px;
  background: rgba(255,255,255,.85);
  border:1px solid var(--stroke);
  box-shadow: 0 10px 30px rgba(62,58,50,.12);
  overflow:hidden; display:grid; place-items:center;
}
.brand__logo img{width:100%; height:100%; object-fit:cover}
.brand__text{display:flex; flex-direction:column; line-height:1.1}
.brand__text small{color:var(--muted); margin-top:4px}

.nav{display:flex; gap:14px; align-items:center}
.nav a{ text-decoration:none; padding:8px 10px; border-radius: 12px}
.nav a:hover{background: rgba(62,58,50,.06)}
@media (max-width:900px){ .brand__text small{display:none} .nav a:not(.btn){display:none} }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; border-radius: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff; text-decoration:none; border:0;
  box-shadow: 0 14px 35px rgba(62,58,50,.20);
  cursor:pointer; position:relative;
}
.btn::after{
  content:""; position:absolute; inset:-1px; border-radius: 14px;
  border:1px solid rgba(197,191,171,.65);
  opacity:0; transition: opacity .2s ease;
}
.btn:hover::after{opacity:1}
.btn--ghost{background: rgba(255,255,255,.78); color: var(--ink); border:1px solid var(--stroke); box-shadow: none;}
.btn--glass{background: rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.28);}
.btn--sm{padding:10px 12px; border-radius: 12px; font-size: 14px}

.hero{padding: 48px 0 18px}
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap: 26px; align-items: stretch;}
@media (max-width:960px){ .hero__grid{grid-template-columns:1fr} }
.pill{
  display:inline-block; padding:8px 12px; border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(197,191,171,.75);
  color: var(--brand2);
  margin: 0 0 14px;
}
h1{font-size: clamp(30px, 4vw, 48px); margin: 0 0 12px; letter-spacing: -.02em}
.lead{font-size: 18px; color: var(--muted); margin: 0 0 18px; max-width: 56ch}
.cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom: 18px}

.quick{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px}
@media (max-width:720px){ .quick{grid-template-columns: 1fr} }
.quick__card{
  background: var(--card);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: 0 8px 22px rgba(62,58,50,.12);
}
.k{display:block; font-size: 12px; letter-spacing:.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px}

.media-card{border-radius: 26px; overflow:hidden; border:1px solid var(--stroke); box-shadow: var(--shadow); height: 100%; min-height: 360px; position:relative;}
.media-card img{width:100%; height:100%; object-fit:cover; transform: scale(1.03);}
.media-card__overlay{
  position:absolute; inset:auto 14px 14px 14px;
  display:flex; justify-content:space-between; align-items:center; gap: 12px;
  padding: 14px; border-radius: 18px;
  background: rgba(62,58,50,.58);
  border:1px solid rgba(197,191,171,.65);
  backdrop-filter: blur(10px);
  color:#fff;
}
.media-card__overlay small{display:block; opacity:.90; margin-top:3px}

.section{padding: 54px 0}
.section--alt{background: rgba(254,245,219,.80); border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke)}
.section__head{margin-bottom: 18px; position:relative}
.section__head h2{margin:0 0 6px; font-size: clamp(22px, 2.4vw, 30px)}
.section__head p{margin:0; color: var(--muted)}
.section__head::after{
  content:""; display:block; width:84px; height:4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), rgba(197,191,171,.12));
  margin-top: 12px;
}

.cards{display:grid; gap: 14px; grid-template-columns: repeat(3, minmax(0,1fr))}
.cards--2{grid-template-columns: repeat(2, minmax(0,1fr))}
@media (max-width:900px){ .cards, .cards--2{grid-template-columns:1fr} }
.card{background: var(--card); border:1px solid var(--stroke); border-radius: var(--r); padding: 18px; box-shadow: 0 10px 26px rgba(62,58,50,.12);}
.card h3{margin:0 0 8px}
.card p{margin:0; color: var(--muted)}
.bullets{margin: 0; padding-left: 18px; color: var(--muted)}
.bullets li{margin: 8px 0}

.split{display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:start}
@media (max-width:960px){ .split{grid-template-columns:1fr} }
.list{display:grid; gap: 10px; margin-top: 14px}
.list__item{display:flex; gap:10px; align-items:center; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.78); border: 1px solid rgba(62,58,50,.12)}
.dot{width:10px; height:10px; border-radius:50%; background: linear-gradient(135deg, var(--gold), var(--brand2))}

.note{margin-top: 16px; border-radius: 18px; padding: 14px; border:1px dashed rgba(154,148,131,.60); background: rgba(254,245,219,.62);}
.note--alt{border-style: solid; border-color: rgba(62,58,50,.16)}
.note strong{display:block; margin-bottom: 4px}

.stack{display:grid; gap: 12px}
.stack__img{border-radius: 22px; overflow:hidden; border:1px solid var(--stroke); box-shadow: 0 12px 30px rgba(62,58,50,.14); height: 230px;}
.stack__img img{width:100%; height:100%; object-fit:cover}
.caption{margin:10px 0 0; color: var(--muted); font-size: 13px}

.gallery{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px}
@media (max-width:900px){ .gallery{grid-template-columns:1fr} }
.tile{border-radius: 22px; overflow:hidden; border:1px solid var(--stroke); background: rgba(255,255,255,.78); box-shadow: 0 12px 30px rgba(62,58,50,.14);}
.tile img{width:100%; height: 220px; object-fit:cover}
.tile figcaption{padding: 12px 14px; color: var(--muted)}

.contact{display:grid; grid-template-columns: 1.05fr .95fr; gap: 14px}
@media (max-width:960px){ .contact{grid-template-columns:1fr} }
.contact__panel{background: var(--card); border:1px solid var(--stroke); border-radius: var(--r); padding: 18px; box-shadow: 0 12px 30px rgba(62,58,50,.14);}
.contact__info{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; margin-bottom: 16px;}
@media (max-width:760px){ .contact__info{grid-template-columns:1fr} }
.form label{display:block; margin-bottom: 10px}
.form span{display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px}
.form input,.form textarea{width:100%; padding: 12px 12px; border-radius: 14px; border:1px solid rgba(62,58,50,.18); background: rgba(255,255,255,.88); outline:none;}
.form input:focus,.form textarea:focus{border-color: rgba(197,191,171,.95); box-shadow: 0 0 0 4px rgba(197,191,171,.22);}
.tiny{font-size: 12px}

.contact__map iframe{width:100%; height: 100%; min-height: 420px; border:0; border-radius: var(--r); box-shadow: 0 12px 30px rgba(62,58,50,.14); border:1px solid var(--stroke);}

.legal details{background: rgba(255,255,255,.78); border:1px solid var(--stroke); border-radius: var(--r); padding: 14px 16px; margin-bottom: 12px; box-shadow: 0 10px 26px rgba(62,58,50,.12);}
.legal summary{cursor:pointer; font-weight: 650; color: var(--brand)}
.legal p{color: var(--muted); margin: 10px 0 0}

.footer{padding: 26px 0 36px; border-top: 1px solid var(--stroke); background: rgba(254,245,219,.78);}
.footer__inner{display:flex; justify-content:space-between; gap: 12px; align-items:center; flex-wrap:wrap}
.footer__links{display:flex; gap: 12px}
.footer__links a{text-decoration:none; color: var(--muted)}
.footer__links a:hover{text-decoration:underline}

/* reveal animation */
.reveal{opacity:0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform: translateY(0)}

/* Email wrapping fix */
.contact-email,
.contact-email a {
  display: block;
  max-width: 100%;
  word-break: break-all;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Expanded email blocks (approx +1.5cm height) */
.contact-email,
.contact-info .email,
.email-block {
  padding: 18px 20px !important;
  min-height: 56px; /* ~1.5cm */
}


/* Contact layout: email spans two columns, address under email */
@media (min-width: 721px) {
  .quick {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .quick__card--phone { grid-column: 1 / 2; grid-row: 1; }
  .quick__card--email { grid-column: 2 / 4; grid-row: 1; }
  .quick__card--address { grid-column: 2 / 4; grid-row: 2; }
}

/* Contact panel info grid: keep 3 cols but let email span 2, address under it */
@media (min-width: 761px) {
  .contact__info {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: auto;
  }
  .contact__item--phone { grid-column: 1 / 2; grid-row: 1; }
  .contact__item--email { grid-column: 2 / 4; grid-row: 1; }
  .contact__item--address { grid-column: 2 / 4; grid-row: 2; }
}

/* Ensure long emails wrap and never overflow */
.contact-email, .contact-email a {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

/* Make phone block span two rows to align with email + address */
@media (min-width: 721px) {
  .quick__card--phone {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

@media (min-width: 761px) {
  .contact__item--phone {
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}