:root{
  --bg:#f6f3ec;
  --bg-alt:#eef4f6;
  --surface:rgba(255,255,255,.72);
  --surface-strong:rgba(255,255,255,.9);
  --surface-soft:rgba(255,255,255,.56);
  --border:rgba(43,74,88,.12);
  --border-strong:rgba(43,74,88,.2);
  --text:#20313b;
  --text-soft:#556772;
  --heading:#16242c;
  --accent:#2e9fb0;
  --accent-strong:#1f7b96;
  --accent-warm:#f1aa79;
  --accent-rose:#d98f88;
  --shadow:0 20px 50px rgba(37,59,70,.08);
  --shadow-soft:0 12px 28px rgba(37,59,70,.06);
  --radius:28px;
  --radius-sm:18px;
  --max:1180px;
}

*,
*::before,
*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  min-height:100vh;
  font-family:"Manrope",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(241,170,121,.26), transparent 32%),
    radial-gradient(circle at 85% 14%, rgba(46,159,176,.20), transparent 26%),
    linear-gradient(180deg, #fbf8f3 0%, #f4f1ea 52%, #edf3f5 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='rgba(46,159,176,0.08)' stroke-width='1'%3E%3Cpath d='M0 40h160M0 80h160M0 120h160M40 0v160M80 0v160M120 0v160'/%3E%3C/g%3E%3C/svg%3E");
  opacity:.55;
  pointer-events:none;
  z-index:-3;
}

.page-shell{position:relative;isolation:isolate}

.ambient,
.ambient::before,
.ambient::after{
  position:fixed;
  border-radius:50%;
  filter:blur(80px);
  pointer-events:none;
  z-index:-2;
}

.ambient{
  width:24rem;
  height:24rem;
  top:-8rem;
  left:-8rem;
  background:rgba(241,170,121,.22);
}

.ambient::before,
.ambient::after{content:""}

.ambient::before{
  width:26rem;
  height:26rem;
  right:-60vw;
  top:14vh;
  background:rgba(46,159,176,.18);
}

.ambient::after{
  width:20rem;
  height:20rem;
  left:42vw;
  bottom:-60vh;
  background:rgba(217,143,136,.18);
}

a{color:inherit}
img{max-width:100%;display:block}

.container{width:min(var(--max),calc(100% - 2rem));margin:0 auto}
.narrow{width:min(860px,calc(100% - 2rem));margin:0 auto}

.site-header{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(18px);
  background:rgba(251,248,243,.72);
  border-bottom:1px solid rgba(255,255,255,.66);
}

.site-header.scrolled{
  background:rgba(251,248,243,.88);
  box-shadow:0 10px 30px rgba(37,59,70,.06);
}

.header-inner{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.logo{
  text-decoration:none;
  font-family:"Fraunces",serif;
  font-weight:700;
  font-size:1.35rem;
  color:var(--heading);
  letter-spacing:-.04em;
}

.logo span{color:var(--accent-strong)}

.nav-links{
  display:flex;
  align-items:center;
  gap:.35rem;
}

.nav-links a,
.back-link,
.mobile-nav a{
  text-decoration:none;
  color:var(--text-soft);
  font-weight:700;
  font-size:.92rem;
  padding:.8rem 1rem;
  border-radius:999px;
  transition:.25s ease;
}

.nav-links a:hover,
.back-link:hover,
.mobile-nav a:hover{
  color:var(--heading);
  background:rgba(255,255,255,.75);
}

.button,
.button-secondary,
.button-subtle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border:none;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  cursor:pointer;
}

.button{
  background:linear-gradient(135deg, var(--accent) 0%, #78c8d1 100%);
  color:#11323e;
  padding:1rem 1.45rem;
  box-shadow:0 18px 35px rgba(46,159,176,.18);
}

.button:hover,
.button-secondary:hover,
.button-subtle:hover{transform:translateY(-2px)}

.button-secondary{
  padding:1rem 1.45rem;
  color:var(--heading);
  background:rgba(255,255,255,.72);
  border:1px solid rgba(43,74,88,.12);
}

.button-subtle{
  padding:.9rem 1.1rem;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(43,74,88,.12);
  color:var(--heading);
}

.cta-link{
  background:linear-gradient(135deg, var(--accent) 0%, #6fc4cf 100%);
  color:#123340 !important;
}

.menu-toggle{
  display:none;
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
  cursor:pointer;
}

.menu-toggle span{
  display:block;
  width:20px;
  height:2px;
  margin:5px auto;
  background:var(--heading);
}

.mobile-nav{
  display:none;
  padding:0 0 1rem;
}

.mobile-nav.open{display:flex;flex-direction:column}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin-bottom:1.25rem;
}

.eyebrow::before{
  content:"";
  width:.65rem;
  height:.65rem;
  border-radius:50%;
  background:var(--accent-warm);
  box-shadow:0 0 0 8px rgba(241,170,121,.16);
}

.hero-title,
.section-title,
.page-title{
  font-family:"Fraunces",serif;
  color:var(--heading);
  letter-spacing:-.04em;
  line-height:.94;
}

.hero-title{font-size:clamp(3.2rem,9vw,6.6rem)}
.section-title{font-size:clamp(2.2rem,4vw,3.6rem)}
.page-title{font-size:clamp(2.3rem,5vw,4rem)}

.lead,
.section-copy,
.page-copy{
  color:var(--text-soft);
  line-height:1.8;
}

.glass-card,
.feature-card,
.project-card,
.pricing-card,
.info-card,
.legal-card,
.form-card,
.review-card,
.quote-card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:var(--shadow);
  backdrop-filter:blur(18px);
  border-radius:var(--radius);
}

.feature-card,
.project-card,
.pricing-card,
.info-card,
.review-card,
.legal-card{padding:1.75rem}

.section{padding:5.6rem 0}
.section.tight{padding-top:4.2rem}

.section-head{
  text-align:center;
  max-width:720px;
  margin:0 auto 2.8rem;
}

.section-head .section-copy{margin-top:1rem}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}

.stat-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
  margin-top:2rem;
}

.stat-item{
  padding:1.35rem;
  text-align:center;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.72);
  border-radius:22px;
  box-shadow:var(--shadow-soft);
}

.stat-value{
  display:block;
  font-family:"Fraunces",serif;
  font-size:2rem;
  color:var(--accent-strong);
}

.stat-label{
  display:block;
  margin-top:.3rem;
  color:var(--text-soft);
  font-size:.92rem;
}

.icon-badge{
  width:3rem;
  height:3rem;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin-bottom:1rem;
  background:linear-gradient(135deg, rgba(46,159,176,.18), rgba(241,170,121,.28));
  color:var(--heading);
  font-size:1.4rem;
}

.tag{
  display:inline-flex;
  align-items:center;
  padding:.45rem .8rem;
  border-radius:999px;
  background:rgba(46,159,176,.12);
  color:var(--accent-strong);
  font-size:.8rem;
  font-weight:800;
}

.project-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:22px;
  margin-bottom:1rem;
  background:linear-gradient(135deg, rgba(46,159,176,.14), rgba(241,170,121,.22));
}

.project-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.project-card:hover .project-thumb img{transform:scale(1.04)}

.project-actions{margin-top:1rem}

.pricing-card.featured{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(237,249,251,.88));
  border-color:rgba(46,159,176,.22);
}

.price{
  font-family:"Fraunces",serif;
  font-size:3rem;
  color:var(--heading);
  margin:.5rem 0;
}

.muted-list{list-style:none}
.muted-list li{
  padding:.75rem 0;
  border-bottom:1px solid rgba(43,74,88,.08);
  color:var(--text-soft);
}

.muted-list li:last-child{border-bottom:none}

.faq-item{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.72);
  background:rgba(255,255,255,.68);
  box-shadow:var(--shadow-soft);
  margin-bottom:1rem;
  overflow:hidden;
}

.faq-question{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:100%;
  padding:1.2rem 1.4rem;
  background:none;
  border:none;
  text-align:left;
  font:inherit;
  font-weight:800;
  color:var(--heading);
  cursor:pointer;
}

.faq-plus{
  width:2rem;
  height:2rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(46,159,176,.12);
  color:var(--accent-strong);
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  padding:0 1.4rem;
  color:var(--text-soft);
  line-height:1.8;
  transition:max-height .28s ease, padding .28s ease;
}

.faq-item.open .faq-answer{max-height:240px;padding:0 1.4rem 1.3rem}
.faq-item.open .faq-plus{background:var(--accent);color:#fff}

.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.15rem}
.full-span{grid-column:1/-1}

label{
  display:block;
  margin-bottom:.5rem;
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--text-soft);
}

input,
select,
textarea{
  width:100%;
  border:1px solid rgba(43,74,88,.12);
  background:rgba(255,255,255,.82);
  color:var(--heading);
  border-radius:18px;
  padding:.95rem 1rem;
  font:inherit;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

input::placeholder,
textarea::placeholder{color:#8d9aa2}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(46,159,176,.38);
  box-shadow:0 0 0 4px rgba(46,159,176,.12);
  background:#fff;
}

textarea{min-height:120px;resize:vertical}

.form-card{padding:2rem}

.success-box{
  text-align:center;
  padding:4rem 1.2rem;
}

.success-mark{
  width:5.4rem;
  height:5.4rem;
  margin:0 auto 1.25rem;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, #78c8d1 100%);
  color:#163745;
  font-size:2rem;
  box-shadow:0 18px 40px rgba(46,159,176,.2);
}

.hero-panel{
  padding:2rem;
  display:grid;
  gap:1.4rem;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.7));
}

.hero-panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.hero-dots{display:flex;gap:.45rem}
.hero-dots span{
  width:.8rem;
  height:.8rem;
  border-radius:50%;
  background:#d9dee0;
}

.hero-dots span:first-child{background:var(--accent-warm)}
.hero-dots span:nth-child(2){background:#e7c96d}
.hero-dots span:nth-child(3){background:#7dbf90}

.hero-url{
  flex:1;
  min-width:0;
  padding:.8rem 1rem;
  border-radius:999px;
  background:rgba(244,247,248,.96);
  color:var(--text-soft);
  font-size:.9rem;
  text-align:center;
}

.hero-preview{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:1rem;
}

.hero-preview img{
  width:100%;
  height:100%;
  min-height:280px;
  object-fit:cover;
  border-radius:22px;
}

.preview-copy{
  padding:1.2rem;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(46,159,176,.08), rgba(241,170,121,.14));
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1rem;
}

.preview-copy ul{list-style:none;color:var(--text-soft);line-height:1.8}

.review-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem;
}

.stars{color:#cf9350;letter-spacing:.15em}

.reply-box{
  margin-top:1rem;
  padding-left:1rem;
  border-left:2px solid rgba(46,159,176,.2);
}

.reply-item{
  padding:.85rem 1rem;
  margin-bottom:.7rem;
  border-radius:16px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(43,74,88,.08);
}

.reply-form{
  display:none;
  margin-top:1rem;
  padding:1rem;
  border-radius:18px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(43,74,88,.08);
}

.text-button{
  background:none;
  border:none;
  padding:0;
  color:var(--accent-strong);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.empty-state,
.loading-state{
  text-align:center;
  color:var(--text-soft);
  padding:2.5rem 1rem;
}

.footer{
  padding:3rem 0 2rem;
}

.footer-card{
  padding:2rem;
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:1.25rem;
}

.footer h4{
  font-size:.9rem;
  color:var(--heading);
  margin-bottom:.9rem;
}

.footer p,
.footer li,
.footer small{color:var(--text-soft);line-height:1.8}

.footer ul{list-style:none}
.footer a{text-decoration:none}
.footer a:hover{color:var(--accent-strong)}

.footer-bottom{
  margin-top:1.3rem;
  text-align:center;
  color:var(--text-soft);
}

.sr,
.sr-l,
.sr-r{
  opacity:0;
  transition:opacity .7s ease, transform .7s ease;
}

.sr{transform:translateY(32px)}
.sr-l{transform:translateX(-32px)}
.sr-r{transform:translateX(32px)}
.sr.in,
.sr-l.in,
.sr-r.in{opacity:1;transform:none}

@media (max-width:980px){
  .grid-3,
  .hero-preview,
  .footer-card{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .stat-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:760px){
  .nav-links{display:none}
  .menu-toggle{display:block}
  .section{padding:4.5rem 0}
  .hero-title{font-size:clamp(2.8rem,14vw,4.8rem)}
  .form-grid{grid-template-columns:1fr}
  .full-span{grid-column:auto}
}

@media (max-width:560px){
  .container,
  .narrow{width:min(100% - 1.2rem, var(--max))}
  .hero-panel,
  .feature-card,
  .project-card,
  .pricing-card,
  .info-card,
  .review-card,
  .legal-card,
  .form-card,
  .footer-card{padding:1.3rem}
  .stat-strip{grid-template-columns:1fr}
  .hero-url{font-size:.8rem}
}