/* ---------- tokens ---------- */
:root{
  --linen: #F6F3EE;
  --linen-deep: #EEE8DE;
  --card: #FBFAF7;
  --ink: #2B2622;
  --ink-dim: #756A5D;
  --sage: #7C8B6F;
  --sage-deep: #4B5A3E;
  --sage-pale: #E4E9DD;
  --quartz: #D9A8A0;
  --quartz-deep: #B97D73;
  --line: rgba(43,38,34,0.13);
  --line-soft: rgba(43,38,34,0.07);
  --display: 'Cormorant', serif;
  --body: 'Jost', sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; background: var(--linen); }
body{
  margin:0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 300;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--sage); color: var(--linen); }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--display); margin:0; font-weight: 500; color: var(--ink); }
p{ margin:0; }
img{ max-width:100%; display:block; }
.dim{ color: var(--ink-dim); }

.eyebrow{
  font-family: var(--body);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin: 0 0 1rem;
  font-weight: 500;
}

/* ---------- soft "mist" reveal ---------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); filter: blur(0); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  font-family: var(--body); font-size: 0.82rem; letter-spacing: 0.05em;
  padding: 0.95rem 1.8rem; border-radius: 999px;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.35s var(--ease);
  border: 1px solid transparent;
}
.btn--filled{ background: var(--sage-deep); color: var(--linen); }
.btn--filled:hover{ background: var(--ink); transform: translateY(-2px); }
.btn--ghost{ border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover{ border-color: var(--sage-deep); color: var(--sage-deep); }

/* ---------- nav ---------- */
.nav{
  position: sticky; top:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1.3rem clamp(1.2rem, 4vw, 3rem);
  background: rgba(246,243,238,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__mark{ font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.06em; }
.nav__right{ display:flex; align-items:center; gap: 1.2rem; }
.nav__cta{ padding: 0.65rem 1.4rem; font-size: 0.78rem; }
.nav__links{ display:flex; align-items:center; gap: 2.2rem; font-size: 0.86rem; letter-spacing: 0.02em; }
.nav__links a{ color: var(--ink-dim); transition: color 0.3s var(--ease); position: relative; padding-bottom: 2px; }
.nav__links a:hover, .nav__links a.is-current{ color: var(--ink); }
.nav__links a.is-current::after{
  content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background: var(--sage-deep);
}
.nav__toggle{
  display:none;
  background:none; border:1px solid var(--line); color: var(--ink);
  font-size: 0.78rem; letter-spacing: 0.06em;
  padding: 0.5rem 1rem; border-radius: 999px; cursor:pointer;
}

.overlay{
  position: fixed; inset:0; z-index: 600;
  background: var(--linen);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap: 0.6rem;
  padding: 2rem clamp(1.2rem, 4vw, 3rem);
  transform: translateY(-100%);
  transition: transform 0.6s var(--ease);
}
.overlay.is-open{ transform: translateY(0); }
.overlay__list{ list-style:none; margin:0; padding:0; }
.overlay__list a{
  font-family: var(--display); font-size: clamp(2.2rem, 9vw, 4rem); font-weight: 500;
  display:inline-block; color: var(--ink);
}
.overlay__list a:hover{ color: var(--sage-deep); }
.overlay__foot{ margin-top: 2rem; font-size: 0.8rem; color: var(--ink-dim); }
.overlay__close{
  position:absolute; top: 1.3rem; right: clamp(1.2rem, 4vw, 3rem);
  background:none; border:1px solid var(--line); color: var(--ink);
  font-size: 0.78rem; padding: 0.5rem 1rem; border-radius: 999px; cursor:pointer;
}

@media (max-width: 820px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-block; }
}

/* ---------- breathing aura (signature) ---------- */
.aura-field{
  position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none;
}
.aura{
  position:absolute; border-radius:50%;
  filter: blur(70px);
  animation: breathe 9s ease-in-out infinite;
}
.aura--sage{
  width: 46vw; height: 46vw; left: 8%; top: 8%;
  background: radial-gradient(circle, rgba(124,139,111,0.5), rgba(124,139,111,0) 70%);
}
.aura--quartz{
  width: 38vw; height: 38vw; right: 6%; bottom: 4%;
  background: radial-gradient(circle, rgba(217,168,160,0.55), rgba(217,168,160,0) 70%);
  animation-delay: -4.5s;
}
@keyframes breathe{
  0%   { transform: scale(0.88); opacity: 0.55; }
  40%  { transform: scale(1.05); opacity: 0.9; }
  55%  { transform: scale(1.05); opacity: 0.9; }
  100% { transform: scale(0.88); opacity: 0.55; }
}

/* ---------- page loader ---------- */
body.is-loading{ overflow: hidden; }
.loader{
  position: fixed; inset: 0; z-index: 2000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 1.8rem;
  background: var(--linen);
  transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
}
.loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.loader__aura{
  position:absolute; left:50%; top:50%; width: 30vmax; height: 30vmax;
  transform: translate(-50%,-50%);
  border-radius:50%;
  background: radial-gradient(circle, rgba(124,139,111,0.42), rgba(217,168,160,0.3) 55%, rgba(217,168,160,0) 75%);
  filter: blur(60px);
  animation: breathe 4.2s ease-in-out infinite;
}
.loader__mark{
  position:relative; z-index:1;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  letter-spacing: 0.16em;
  color: var(--ink);
}
.loader__bar{
  position:relative; z-index:1; overflow:hidden;
  width: 150px; height: 1px; background: var(--line);
}
.loader__bar span{
  display:block; height:100%; width: 40%;
  background: var(--sage-deep);
  animation: loaderSweep 1.5s ease-in-out infinite;
}
@keyframes loaderSweep{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

@media (prefers-reduced-motion: reduce){
  .loader__aura{ animation: none; opacity: 0.7; }
  .loader__bar span{ animation: none; width: 100%; }
}

/* ---------- placeholder photo blocks ---------- */
.ph{
  position:relative; overflow:hidden;
  background: linear-gradient(155deg, var(--sage-pale) 0%, var(--linen-deep) 60%, #E9DCD6 100%);
  background-size: cover;
  background-position: center;
  display:flex; align-items:flex-end;
}
.ph::before{
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(rgba(43,38,34,0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.5;
}

/* ---------- section rhythm ---------- */
.section{ padding: 6.5rem clamp(1.2rem, 6vw, 4rem); }
.section--tight{ padding-top: 3rem; padding-bottom: 3rem; }
.section--deep{ background: var(--linen-deep); }
.section-head{ max-width: 640px; margin-bottom: 3rem; }
.section-head h2{ font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.15; }
.section-head p{ margin-top: 1rem; color: var(--ink-dim); font-size: 1.05rem; line-height: 1.6; }

/* ---------- footer ---------- */
.footer{
  padding: 3.5rem clamp(1.2rem, 6vw, 4rem) 2.2rem;
  border-top: 1px solid var(--line);
  background: var(--linen-deep);
}
.footer__grid{
  display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer__mark{ font-family: var(--display); font-size: 1.6rem; font-weight: 600; margin-bottom: 0.8rem; }
.footer__tagline{ color: var(--ink-dim); font-size: 0.95rem; max-width: 30ch; line-height: 1.6; }
.footer h4{ font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 500; margin-bottom: 1rem; }
.footer__links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 0.6rem; }
.footer__links a{ color: var(--ink); transition: color 0.3s var(--ease); }
.footer__links a:hover{ color: var(--sage-deep); }
.footer__bottom{
  border-top: 1px solid var(--line); padding-top: 1.4rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap: 0.6rem;
  font-size: 0.78rem; color: var(--ink-dim);
}

@media (max-width: 760px){
  .footer__grid{ grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ---------- hero ---------- */
.hero{
  position: relative;
  min-height: 88svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
}
.hero__content{ position:relative; z-index:2; }
.hero__eyebrow{ font-size: 0.8rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 1.6rem; }
.hero__title{
  font-family: var(--display); font-weight: 600;
  font-size: clamp(3.6rem, 13vw, 8.5rem);
  letter-spacing: 0.05em;
  line-height: 1;
}
.hero__tagline{
  margin: 1.6rem auto 0; max-width: 34ch;
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--ink-dim);
}
.hero__actions{ margin-top: 2.6rem; display:flex; gap: 1rem; justify-content:center; flex-wrap:wrap; }

/* generic page hero (about/services/contacts) */
.pagehero{
  position: relative; overflow:hidden;
  padding: 5rem clamp(1.2rem, 6vw, 4rem) 4rem;
  text-align:center;
}
.pagehero__content{ position:relative; z-index:2; }
.pagehero h1{ font-size: clamp(2.6rem, 7vw, 4.6rem); }
.pagehero p{ margin-top: 1rem; color: var(--ink-dim); max-width: 46ch; margin-left:auto; margin-right:auto; font-size: 1.05rem; line-height:1.6; }

/* ---------- USP trio ---------- */
.usp-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.usp{ padding-top: 1.6rem; border-top: 1px solid var(--line); }
.usp__num{ font-family: var(--display); font-size: 1.1rem; color: var(--quartz-deep); font-style: italic; }
.usp h3{ font-size: 1.35rem; margin: 0.8rem 0 0.6rem; }
.usp p{ color: var(--ink-dim); line-height: 1.6; font-size: 0.96rem; }

@media (max-width: 820px){
  .usp-grid{ grid-template-columns: 1fr; gap: 2.4rem; }
}

/* ---------- service teaser / cards ---------- */
.card-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.service-card{
  border: 1px solid var(--line); border-radius: 14px; overflow:hidden;
  background: var(--card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px -22px rgba(43,38,34,0.25); }
.service-card .ph{ aspect-ratio: 4/3; }
.service-card__body{ padding: 1.4rem 1.4rem 1.6rem; }
.service-card__body h3{ font-size: 1.3rem; margin-bottom: 0.5rem; }
.service-card__body p{ color: var(--ink-dim); font-size: 0.9rem; line-height: 1.55; }
.service-card__meta{ margin-top: 0.9rem; display:flex; justify-content:space-between; font-size: 0.82rem; color: var(--sage-deep); }

@media (max-width: 1080px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .card-grid{ grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band{
  border-radius: 24px;
  background: var(--sage-deep);
  color: var(--linen);
  padding: 3.4rem clamp(1.4rem, 6vw, 4rem);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 2rem;
}
.cta-band h2{ color: var(--linen); font-size: clamp(1.7rem, 3.6vw, 2.4rem); max-width: 20ch; }
.cta-band .btn--filled{ background: var(--linen); color: var(--sage-deep); }
.cta-band .btn--filled:hover{ background: var(--quartz); color: var(--ink); }

/* ---------- philosophy / founder split ---------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items:center; }
.split .ph{ aspect-ratio: 4/5; border-radius: 18px; }
.split__copy p{ color: var(--ink-dim); line-height: 1.75; font-size: 1.02rem; margin-bottom: 1.1rem; }
.split__copy h2{ font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 1.4rem; }

@media (max-width: 900px){
  .split{ grid-template-columns: 1fr; }
}
.split--reverse .split__media{ order: 2; }
@media (max-width: 900px){ .split--reverse .split__media{ order: -1; } }

/* ---------- values list ---------- */
.values{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(2,1fr); gap: 1.6rem 2.5rem; }
.values li{ display:flex; gap: 1rem; align-items:flex-start; }
.values li span.mark{ font-family: var(--display); font-style: italic; color: var(--quartz-deep); font-size: 1.3rem; line-height:1; }
.values li div h4{ font-size: 1.05rem; margin-bottom: 0.3rem; font-family: var(--body); font-weight: 500; }
.values li p{ color: var(--ink-dim); font-size: 0.92rem; line-height: 1.55; }
@media (max-width: 700px){ .values{ grid-template-columns: 1fr; } }

/* ---------- team grid ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.team-card .ph{ aspect-ratio: 3/4; border-radius: 14px; }
.team-card{ }
.team-card__body{ padding-top: 1.1rem; }
.team-card__body h3{ font-size: 1.25rem; }
.team-card__role{ color: var(--sage-deep); font-size: 0.85rem; letter-spacing: 0.03em; margin: 0.25rem 0 0.6rem; }
.team-card__note{ color: var(--ink-dim); font-size: 0.88rem; line-height: 1.5; }
@media (max-width: 820px){ .team-grid{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

/* ---------- gallery grid (about) ---------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.gallery-grid .ph{ aspect-ratio: 1/1; border-radius: 14px; }
@media (max-width: 760px){ .gallery-grid{ grid-template-columns: 1fr; } }

/* ---------- services page: categorized list ---------- */
.svc-category{ margin-bottom: 3.5rem; }
.svc-category:last-child{ margin-bottom: 0; }
.svc-category__head{ display:flex; align-items:baseline; gap: 1rem; margin-bottom: 1.6rem; }
.svc-category__head h2{ font-size: clamp(1.5rem, 3.2vw, 2rem); }
.svc-category__head .line{ flex:1; height:1px; background: var(--line); }

.svc-list{ list-style:none; margin:0; padding:0; border-top: 1px solid var(--line); }
.svc-item{
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0.3rem;
  display:grid; grid-template-columns: 1fr auto; gap: 0.3rem 1.5rem; align-items:baseline;
  cursor: default;
}
.svc-item__name{ font-family: var(--display); font-size: clamp(1.15rem, 2.4vw, 1.55rem); font-weight: 500; transition: color 0.3s var(--ease); }
.svc-item:hover .svc-item__name{ color: var(--sage-deep); }
.svc-item__meta{ font-size: 0.92rem; color: var(--ink-dim); white-space: nowrap; }
.svc-item__price{ font-family: var(--display); font-style: italic; color: var(--quartz-deep); font-size: 1.1rem; }
.svc-item__desc{
  grid-column: 1 / -1;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.45s var(--ease), opacity 0.35s var(--ease), margin-top 0.45s var(--ease);
  color: var(--ink-dim); font-size: 0.92rem; line-height: 1.6; margin-top: 0;
}
.svc-item.is-open .svc-item__desc{ max-height: 6rem; opacity: 1; margin-top: 0.6rem; }
.svc-item__toggle{ font-size: 0.78rem; color: var(--ink-dim); }

/* ---------- contacts page ---------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items:start; }
.contact-info h2{ font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 1.6rem; }
.contact-block{ margin-bottom: 1.6rem; }
.contact-block h4{ font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage-deep); margin-bottom: 0.4rem; font-weight: 500; }
.contact-block p{ font-size: 1.02rem; line-height: 1.6; }
.contact-block a{ transition: color 0.3s var(--ease); }
.contact-block a:hover{ color: var(--sage-deep); }
.map-ph{ aspect-ratio: 4/3; border-radius: 16px; margin-top: 2rem; }

.form{ display:flex; flex-direction:column; gap: 1.1rem; }
.form__row{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form label{ font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.5rem; display:block; }
.form input, .form select, .form textarea{
  width:100%; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 0.85rem 1rem; font-family: var(--body); font-size: 0.98rem; color: var(--ink);
  transition: border-color 0.3s var(--ease);
}
.form input:focus, .form select:focus, .form textarea:focus{ outline: none; border-color: var(--sage-deep); }
.form textarea{ resize: vertical; min-height: 90px; }
.form__submit{ margin-top: 0.4rem; align-self:flex-start; }
.form__note{ font-size: 0.82rem; color: var(--ink-dim); margin-top: 0.6rem; }

@media (max-width: 820px){
  .contact-grid{ grid-template-columns: 1fr; }
  .form__row{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
  .reveal{ opacity:1 !important; transform:none !important; filter:none !important; }
}