
:root{
  --color-bg: #FBF5EC;
  --color-bg-soft: #F4E8D6;
  --color-bg-card: #FFFDF8;
  --color-primary: #3E6659;
  --color-primary-dark: #23392F;
  --color-secondary: #C1652F;
  --color-accent: #D9A441;
  --color-rose: #B97A6A;
  --color-ink: #2A241F;
  --color-ink-soft: #5C5147;
  --color-cream: #FBF5EC;
  --color-border: rgba(42,36,31,0.12);

  --shadow-sm: 0 1px 2px rgba(35,57,47,0.10), 0 1px 1px rgba(35,57,47,0.06);
  --shadow-md: 0 8px 20px -6px rgba(35,57,47,0.22), 0 3px 8px -2px rgba(35,57,47,0.10);
  --shadow-lg: 0 26px 50px -16px rgba(35,57,47,0.32), 0 10px 20px -8px rgba(35,57,47,0.14);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-pill: 999px;

  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  --text-display: clamp(2.5rem, 3.4vw + 1.6rem, 5rem);
  --text-h1: clamp(2.1rem, 2.4vw + 1.4rem, 3.2rem);
  --text-h2: clamp(1.65rem, 1.4vw + 1.2rem, 2.5rem);
  --text-h3: clamp(1.2rem, .6vw + 1rem, 1.5rem);
  --text-body: clamp(1rem, .2vw + .95rem, 1.1rem);

  --font-head: 'Literata', serif;
  --font-body: 'Figtree', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x: hidden; }
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-size:var(--text-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; height:auto; border-radius:var(--radius-md); }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-head); color:var(--color-primary-dark); line-height:1.15; margin:0 0 .6em; font-weight:700; }
h1{ font-size:var(--text-display); }
h2{ font-size:var(--text-h2); }
h3{ font-size:var(--text-h3); }
p{ margin:0 0 1em; color:var(--color-ink-soft); }
ul,ol{ padding-left:1.2em; color:var(--color-ink-soft); }
button{ font-family:var(--font-body); cursor:pointer; border:none; background:none; }
.canvas{ overflow-x:hidden; }


.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.9rem 1.9rem; border-radius:var(--radius-pill);
  font-weight:600; font-size:1rem; transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  min-height:44px;
}
.btn-primary{ background:var(--color-primary); color:#fff; box-shadow:var(--shadow-md); }
.btn-primary:hover{ background:var(--color-primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-cream{ background:var(--color-cream); color:var(--color-primary-dark); box-shadow:var(--shadow-md); }
.btn-cream:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); background:#fff; }
.btn-outline-cream{ border:2px solid rgba(251,245,236,.7); color:var(--color-cream); }
.btn-outline-cream:hover{ background:rgba(251,245,236,.15); transform:translateY(-2px); }


.canopy{
  position:fixed; top:0; left:0; right:0; z-index:200;
  transition:background .4s ease, box-shadow .4s ease;
}
.canopy-inner{
  max-width:1280px; margin:0 auto; padding:1.1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.canopy-brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-weight:700; font-size:1.25rem; color:var(--color-primary-dark); transition:color .4s ease; }
.canopy-nav{ display:flex; gap:1.9rem; }
.canopy-link{
  font-weight:500; font-size:.98rem; color:var(--color-primary-dark);
  position:relative; padding:.3rem 0; transition:color .4s ease;
}
.canopy-link::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:currentColor; transition:width .3s ease;
}
.canopy-link:hover::after, .canopy-link.current::after{ width:100%; }
.canopy.canopy--invert .canopy-brand,
.canopy.canopy--invert .canopy-link{ color:var(--color-cream); }
.canopy.canopy--invert .canopy-toggle span{ background:var(--color-cream); }
.canopy-toggle{ display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; }
.canopy-toggle span{ width:24px; height:2px; background:var(--color-primary-dark); transition:background .4s ease, transform .3s ease; border-radius:2px; }


.drawer{
  position:fixed; inset:0; z-index:300; display:flex;
  visibility:hidden; opacity:0; transition:opacity .4s ease, visibility .4s ease;
}
.drawer.is-open{ visibility:visible; opacity:1; }
.drawer-visual{
  flex:1; background:linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
  display:flex; align-items:center; justify-content:center;
}
.drawer-visual i{ font-size:6rem; color:rgba(251,245,236,.35); }
.drawer-panel{
  flex:1; background:var(--color-cream); position:relative;
  display:flex; align-items:center; padding:2rem;
}
.drawer-close{ position:absolute; top:1.5rem; right:1.5rem; width:44px; height:44px; font-size:1.3rem; color:var(--color-primary-dark); }
.drawer-links{ display:flex; flex-direction:column; gap:1.1rem; }
.drawer-links a{
  font-family:var(--font-head); font-size:clamp(1.6rem,5vw,2.4rem); font-weight:600;
  color:var(--color-primary-dark); text-align:left; transition:color .3s ease, transform .3s ease; transform:translateX(0);
}
.drawer-links a:hover{ color:var(--color-secondary); transform:translateX(6px); }
@media (max-width:640px){
  .drawer{ flex-direction:column; }
  .drawer-visual{ flex:0 0 30%; }
}


.stage{
  position:relative; min-height:92vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 20% 10%, #4d7a68 0%, var(--color-primary) 45%, var(--color-primary-dark) 100%);
  padding:8rem 1.5rem 6rem; overflow:hidden;
}
.stage-content{ max-width:780px; text-align:center; color:var(--color-cream); position:relative; z-index:2; }
.stage-eyebrow{
  display:inline-block; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem;
  color:var(--color-accent); margin-bottom:1.2rem;
}
.stage-title{ color:var(--color-cream); margin-bottom:1.1rem; }
.stage-sub{ color:rgba(251,245,236,.86); font-size:1.1rem; max-width:640px; margin:0 auto 2rem; }
.stage-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.stage-wave{ position:absolute; bottom:-2px; left:0; width:100%; height:auto; z-index:1; }


.page-stage{
  background:linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
  padding:9rem 1.5rem 5rem; color:var(--color-cream);
}
.page-stage--short{ padding-bottom:4rem; }
.page-stage-content{ max-width:760px; margin:0 auto; text-align:center; }
.page-stage-content p{ color:rgba(251,245,236,.85); font-size:1.05rem; }
.page-stage h1{ color:var(--color-cream); }


.plot{ padding:var(--space-xl) 1.5rem; max-width:1280px; margin:0 auto; }
.plot--deep{ max-width:none; background:linear-gradient(150deg, var(--color-primary-dark), #1b2e26); }
.plot--split{
  display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-lg); align-items:center;
}
.plot--split.plot--reverse{ grid-template-columns:1fr 1.4fr; }
.plot--split.plot--reverse .plot-figure{ order:-1; }
.plot--deep.plot--split{ padding:var(--space-xl) 1.5rem; }
.plot--deep.plot--split .plot-text, .plot--deep.plot--split .plot-figure{ max-width:640px; }
.plot--deep .plot-figure, .plot--deep .plot-text{ max-width:none; }
.plot-text{ max-width:600px; }
.plot-text--on-dark h2, .plot-text--on-dark p, .plot-text--on-dark li strong{ color:var(--color-cream); }
.plot-text--on-dark li{ color:rgba(251,245,236,.82); }
.plot-text--centered{ margin:0 auto; text-align:center; }
.plot-tag{ display:inline-block; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:.78rem; color:var(--color-secondary); margin-bottom:.8rem; }
.plot-tag--light{ color:var(--color-accent); }
.plot-figure{ margin:0; }
.plot-figure img{ box-shadow:var(--shadow-lg); }
.plot-figure figcaption{ margin-top:.7rem; font-size:.88rem; color:var(--color-ink-soft); }
.plot--deep .plot-figure figcaption{ color:rgba(251,245,236,.6); }
.plot--costs{ display:block; text-align:center; }
.plot--costs .plot-text{ max-width:640px; margin:0 auto 2.5rem; }
.plot--closing{ text-align:center; padding:var(--space-2xl) 1.5rem; }
.plot--closing .plot-text{ max-width:680px; margin:0 auto; }
.plot--closing .btn{ margin-top:1rem; }

.check-list{ list-style:none; padding:0; display:flex; flex-direction:column; gap:1rem; }
.check-list li{ padding-left:1.7rem; position:relative; }
.check-list li::before{
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; position:absolute; left:0; top:.2em;
  color:var(--color-accent); font-size:.85rem;
}
.step-list{ display:flex; flex-direction:column; gap:1rem; list-style:none; counter-reset:step; padding:0; }
.step-list li{ position:relative; padding-left:2.6rem; counter-increment:step; }
.step-list li::before{
  content:counter(step); position:absolute; left:0; top:0; width:1.9rem; height:1.9rem; border-radius:50%;
  background:var(--color-primary); color:#fff; font-weight:700; font-size:.85rem; display:flex; align-items:center; justify-content:center;
}


.gallery{ padding:var(--space-xl) 1.5rem; max-width:1280px; margin:0 auto; }
.gallery--benefits{ background:var(--color-bg-soft); max-width:none; border-radius:0; }
.gallery-head{ max-width:640px; margin:0 auto var(--space-lg); text-align:center; }
.shelf{ display:grid; gap:1.75rem; }
.shelf--four{ grid-template-columns:repeat(4,1fr); }
.shelf--three{ grid-template-columns:repeat(3,1fr); }
.shelf-card{
  background:var(--color-bg-card); border-radius:var(--radius-md); padding:2rem 1.6rem;
  box-shadow:var(--shadow-sm); transition:transform .3s ease, box-shadow .3s ease;
  border:1px solid var(--color-border);
}
.shelf-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.shelf-icon{
  width:52px; height:52px; border-radius:var(--radius-sm); background:var(--color-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1.1rem;
}
.shelf-card h3{ margin-bottom:.5rem; }
.shelf-card p{ font-size:.95rem; margin:0; }

.blog-card{
  background:var(--color-bg-card); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .3s ease, box-shadow .3s ease; border:1px solid var(--color-border);
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.blog-card img{ border-radius:0; aspect-ratio:16/10; object-fit:cover; width:100%; }
.blog-card-body{ padding:1.6rem; }
.blog-card-body h3{ margin-bottom:.5rem; }
.blog-card-body p{ font-size:.95rem; }
.read-more{ font-weight:600; color:var(--color-secondary); display:inline-flex; align-items:center; gap:.4rem; transition:gap .25s ease, color .25s ease; }
.read-more:hover{ gap:.7rem; color:var(--color-primary); }

.gallery--grid .photo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.photo-grid figure{ margin:0; }
.photo-grid img{ aspect-ratio:4/3; object-fit:cover; width:100%; box-shadow:var(--shadow-sm); transition:box-shadow .3s ease, transform .3s ease; }
.photo-grid img:hover{ transform:scale(1.02); box-shadow:var(--shadow-md); }
.photo-grid figcaption{ margin-top:.6rem; font-size:.85rem; color:var(--color-ink-soft); }


.cost-table{ max-width:760px; margin:0 auto; background:rgba(251,245,236,.06); border-radius:var(--radius-md); overflow:hidden; }
.cost-row{ display:flex; justify-content:space-between; padding:1rem 1.5rem; border-bottom:1px solid rgba(251,245,236,.12); color:rgba(251,245,236,.85); }
.cost-row:last-child{ border-bottom:none; }
.cost-row--head{ font-weight:700; color:var(--color-accent); background:rgba(251,245,236,.06); }
.cost-note{ max-width:640px; margin:1.5rem auto 0; text-align:center; font-size:.9rem; color:rgba(251,245,236,.6); }


.splide__pagination__page.is-active{ background:var(--color-secondary); }
.splide__arrow{ background:var(--color-bg-card); box-shadow:var(--shadow-sm); }
.splide__arrow svg{ fill:var(--color-primary-dark); }
.carousel-card{ background:var(--color-bg-card); border-radius:var(--radius-md); padding:1.2rem; box-shadow:var(--shadow-sm); height:100%; border:1px solid var(--color-border); }
.carousel-card img{ aspect-ratio:4/3; object-fit:cover; width:100%; margin-bottom:1rem; }
.carousel-card h3{ margin-bottom:.4rem; }
.carousel-card p{ font-size:.92rem; margin:0; }
.carousel-card--photo{ padding:.8rem; }
.carousel-card--photo figcaption{ font-size:.88rem; color:var(--color-ink-soft); margin-top:.6rem; text-align:center; }


.roots{ background:var(--color-primary-dark); color:rgba(251,245,236,.8); padding:var(--space-xl) 1.5rem var(--space-md); }
.roots-inner{ max-width:1000px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:2rem; text-align:center; }
.roots-brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-head); font-size:1.3rem; font-weight:700; color:var(--color-cream); }
.roots-links{ display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; }
.roots-links a{ transition:color .3s ease; }
.roots-links a:hover{ color:var(--color-accent); }
.roots-contact p{ margin:.3rem 0; color:rgba(251,245,236,.75); }
.roots-contact a{ transition:color .3s ease; }
.roots-contact a:hover{ color:var(--color-accent); }
.roots-legal{ border-top:1px solid rgba(251,245,236,.14); padding-top:1.6rem; width:100%; }
.roots-legal p{ margin:0 0 .8rem; font-size:.85rem; color:rgba(251,245,236,.55); }
.roots-legal-links{ display:flex; gap:1.3rem; justify-content:center; flex-wrap:wrap; font-size:.85rem; }
.roots-legal-links a, .roots-cookie-btn{ color:rgba(251,245,236,.75); transition:color .3s ease; }
.roots-legal-links a:hover, .roots-cookie-btn:hover{ color:var(--color-accent); }
.roots-cookie-btn{ font-size:.85rem; }


.buoy{ position:fixed; bottom:1.8rem; right:1.8rem; z-index:250; display:flex; flex-direction:column; align-items:flex-end; gap:.8rem; }
.buoy-toggle{
  width:60px; height:60px; border-radius:50%; background:var(--color-secondary); color:#fff; font-size:1.4rem;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); transition:transform .3s ease, background .3s ease;
}
.buoy-toggle:hover{ transform:scale(1.06); background:var(--color-primary); }
.buoy-options{
  display:flex; flex-direction:column; gap:.7rem; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.buoy.is-open .buoy-options{ opacity:1; visibility:visible; transform:translateY(0); }
.buoy-option{
  width:50px; height:50px; border-radius:50%; background:var(--color-bg-card); color:var(--color-primary-dark);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); font-size:1.1rem; transition:transform .25s ease, background .25s ease;
}
.buoy-option:hover{ transform:scale(1.08); background:var(--color-accent); color:#fff; }


.stage-curtain{
  position:fixed; inset:0; background:rgba(35,45,40,.55); z-index:400; display:flex; align-items:center; justify-content:center;
  padding:2rem; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.stage-curtain.is-open{ opacity:1; visibility:visible; }
.spotlight-card{
  background:var(--color-bg-card); max-width:640px; width:100%; max-height:85vh; overflow-y:auto; border-radius:var(--radius-lg);
  padding:2.5rem; position:relative; box-shadow:var(--shadow-lg); transform:translateY(20px); transition:transform .35s ease;
}
.stage-curtain.is-open .spotlight-card{ transform:translateY(0); }
.curtain-close{ position:absolute; top:1.2rem; right:1.2rem; width:40px; height:40px; border-radius:50%; background:var(--color-bg-soft); font-size:1.1rem; transition:background .3s ease; }
.curtain-close:hover{ background:var(--color-accent); color:#fff; }
#modalContent img{ margin-bottom:1.2rem; aspect-ratio:16/10; object-fit:cover; width:100%; }
#modalContent h3{ margin-bottom:.7rem; }
#modalContent p{ font-size:.96rem; }


.facts-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; max-width:1100px; margin:0 auto; padding:2.5rem 1.5rem;
}
.facts-strip-item{
  display:flex; flex-direction:column; align-items:center; gap:.6rem; text-align:center; padding:1.4rem 1rem;
  background:var(--color-bg-card); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); border:1px solid var(--color-border);
  font-weight:600; color:var(--color-primary-dark); font-size:.92rem;
}
.facts-strip-item i{ font-size:1.4rem; color:var(--color-secondary); }


.contact-form-wrap, .contact-map-wrap{ max-width:none; }
.form-row{ margin-bottom:1.3rem; display:flex; flex-direction:column; gap:.4rem; }
.form-row label{ font-weight:600; font-size:.92rem; color:var(--color-primary-dark); }
.form-row input, .form-row textarea{
  border:1.5px solid var(--color-border); border-radius:var(--radius-sm); padding:.85rem 1rem; font-family:var(--font-body);
  font-size:1rem; background:var(--color-bg-card); transition:border-color .3s ease, box-shadow .3s ease; min-height:44px;
}
.form-row input:focus, .form-row textarea:focus{ outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(62,102,89,.15); }
.form-row--checkbox{ flex-direction:row; align-items:flex-start; gap:.7rem; }
.form-row--checkbox input{ width:20px; height:20px; min-height:auto; margin-top:.15rem; flex-shrink:0; }
.form-row--checkbox label{ font-weight:400; color:var(--color-ink-soft); font-size:.9rem; }
.map-frame{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md); margin-bottom:1.5rem; }
.contact-direct p{ margin:.4rem 0; font-weight:600; }


.thanks-stage{ min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8rem 1.5rem; }
.thanks-stage h1{ margin-bottom:1rem; }
.thanks-stage p{ margin-bottom:2rem; font-size:1.1rem; }


.legal-stage{ padding:9rem 1.5rem var(--space-2xl); }
.legal-content{ max-width:760px; margin:0 auto; }
.legal-updated{ font-weight:600; color:var(--color-secondary); font-size:.9rem; text-transform:uppercase; letter-spacing:.05em; }
.legal-content h2{ margin-top:2.2rem; }
.legal-content p{ font-size:1rem; }


.tide{
  position:fixed; bottom:0; left:0; right:0; z-index:500; background:var(--color-bg-card);
  box-shadow:0 -12px 30px rgba(35,45,40,.18); display:flex; transform:translateY(100%); transition:transform .4s ease;
  border-top:1px solid var(--color-border);
}
.tide.is-visible{ transform:translateY(0); }
.tide-panel{ flex:1; padding:1.8rem 2rem; }
.tide-panel-left{ max-width:560px; }
.tide-panel-left h2{ font-size:1.15rem; margin-bottom:.5rem; }
.tide-panel-left p{ font-size:.9rem; margin:0; }
.tide-panel-right{ background:var(--color-bg-soft); display:flex; flex-direction:column; gap:1rem; }
.tide-categories{ display:flex; flex-wrap:wrap; gap:1rem; }
.tide-cat{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; }
.tide-cat input{ width:18px; height:18px; }
.tide-actions{ display:flex; gap:.8rem; flex-wrap:wrap; }
.tide-actions button{
  padding:.7rem 1.3rem; border-radius:var(--radius-pill); font-weight:600; font-size:.85rem; transition:transform .25s ease, background .25s ease;
  min-height:44px;
}
.tide-accept{ background:var(--color-primary); color:#fff; }
.tide-accept:hover{ background:var(--color-primary-dark); transform:translateY(-2px); }
.tide-reject{ background:transparent; border:1.5px solid var(--color-border); color:var(--color-ink); }
.tide-reject:hover{ background:var(--color-bg-card); }
.tide-save{ background:var(--color-secondary); color:#fff; }
.tide-save:hover{ transform:translateY(-2px); }


@media (max-width:1024px){
  .shelf--four{ grid-template-columns:repeat(2,1fr); }
  .facts-strip{ grid-template-columns:repeat(2,1fr); }
  .plot--split, .plot--split.plot--reverse{ grid-template-columns:1fr; }
  .plot--split.plot--reverse .plot-figure{ order:0; }
  .photo-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px){
  .canopy-nav{ display:none; }
  .canopy-toggle{ display:flex; }
  .shelf--three{ grid-template-columns:1fr; }
  .tide{ flex-direction:column; }
  .tide-panel-right{ align-items:flex-start; }
}
@media (max-width:640px){
  .shelf--four{ grid-template-columns:1fr; }
  .facts-strip{ grid-template-columns:1fr; }
  .photo-grid{ grid-template-columns:1fr; }
  .cost-row{ font-size:.9rem; }
  .stage{ padding:7rem 1.2rem 5rem; }
  .plot, .gallery{ padding:var(--space-lg) 1.2rem; }
}