/* ═══════════════════════════════════════════════════════════════════
   OPEN CANVAS — DYNAMIC SECTION STYLES
   For DB-driven sections introduced after frontend refactor.
   Palette: sage #7A9E7E · taupe #3D2E23 · cream #FAF8F5 · accent #C9A84C
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Service Highlights Box ────────────────────────────────────── */
.service-highlights-box {
  background: #fff;
  border: 1px solid #E8E4DF;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 4px 24px rgba(60, 46, 35, .06);
  position: sticky;
  top: 6rem;
}
.service-highlights-box h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: #3D2E23;
  margin: 0 0 1.25rem;
  font-weight: 600;
  border-bottom: 1px solid #E8E4DF;
  padding-bottom: .9rem;
}
.service-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .85rem 0;
  border-bottom: 1px dashed #F0EBE4;
}
.service-highlight-item:last-child { border-bottom: 0; padding-bottom: 0; }
.service-highlight-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #F0F7F1, #E8F0EA);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7A9E7E;
  font-size: 1.25rem;
}
.service-highlight-icon i { line-height: 1; }
.service-highlight-icon img { max-width: 24px; max-height: 24px; object-fit: contain; }
.service-highlight-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.service-highlight-text strong {
  font-size: .82rem;
  color: #7A6D5E;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .15rem;
}
.service-highlight-text span {
  font-size: .96rem;
  color: #3D2E23;
  font-weight: 500;
  line-height: 1.4;
}

/* ─── Pricing Cards ─────────────────────────────────────────────── */
.pricing-card {
  background: #fff;
  border: 1px solid #E8E4DF;
  border-radius: 18px;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  position: relative;
  transition: .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(60, 46, 35, .1);
  border-color: #CBDECE;
}
.pricing-card-popular {
  border-color: #7A9E7E;
  border-width: 2px;
  box-shadow: 0 12px 36px rgba(122, 158, 126, .2);
  background: linear-gradient(180deg, #FAFEFA 0%, #fff 100%);
}
.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #7A9E7E;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .4rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(122, 158, 126, .35);
}
.pricing-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: #3D2E23;
  font-weight: 600;
  margin: 0 0 .5rem;
}
.pricing-desc {
  font-size: .85rem;
  color: #7A6D5E;
  line-height: 1.5;
  margin: 0 0 1.25rem;
  min-height: 2.4em;
}
.pricing-price {
  padding: 1.25rem 0;
  margin: .5rem 0 1.5rem;
  border-top: 1px solid #F0EBE4;
  border-bottom: 1px solid #F0EBE4;
}
.pricing-amount {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  color: #3D2E23;
  font-weight: 700;
  line-height: 1;
}
.pricing-card-popular .pricing-amount { color: #7A9E7E; }
.pricing-period {
  display: block;
  font-size: .75rem;
  color: #7A6D5E;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .4rem;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
  text-align: left;
  flex: 1;
}
.pricing-feature-item {
  position: relative;
  padding: .55rem 0 .55rem 1.85rem;
  font-size: .88rem;
  color: #3D2E23;
  line-height: 1.45;
  border-bottom: 1px dashed #F5F2EE;
}
.pricing-feature-item:last-child { border-bottom: 0; }
.pricing-feature-item::before {
  content: "\EB7B"; /* ri-check-line */
  font-family: 'remixicon';
  position: absolute;
  left: 0;
  top: .55rem;
  width: 22px;
  height: 22px;
  background: #EFF6F0;
  color: #7A9E7E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-style: normal;
}
.pricing-card-popular .pricing-feature-item::before {
  background: #7A9E7E;
  color: #fff;
}
.pricing-card .btn-sage,
.pricing-card .btn-outline-sage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  width: 100%;
  margin-top: auto;
}

/* ─── Other Services Card ───────────────────────────────────────── */
.other-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #E8E4DF;
  border-radius: 14px;
  padding: 1.5rem 1rem;
  text-decoration: none;
  color: inherit;
  transition: .2s ease;
  height: 100%;
}
.other-service-card:hover {
  transform: translateY(-3px);
  border-color: #7A9E7E;
  box-shadow: 0 12px 28px rgba(60, 46, 35, .08);
  color: #3D2E23;
}
.other-service-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0F7F1, #E8F0EA);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7A9E7E;
  font-size: 1.6rem;
  margin-bottom: .85rem;
  transition: .2s;
}
.other-service-card:hover .other-service-icon {
  background: #7A9E7E;
  color: #fff;
  transform: scale(1.05);
}
.other-service-icon img { max-width: 32px; max-height: 32px; object-fit: contain; }
.other-service-card h6 {
  font-size: .88rem;
  font-weight: 600;
  color: #3D2E23;
  margin: 0;
  line-height: 1.3;
}

/* ─── Team Cards ────────────────────────────────────────────────── */
.team-card {
  background: #fff;
  border: 1px solid #E8E4DF;
  border-radius: 16px;
  overflow: hidden;
  transition: .25s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(60, 46, 35, .1);
  border-color: #CBDECE;
}
.team-card-img {
  position: relative;
  aspect-ratio: 4/5;
  background: #F5F2EE;
  overflow: hidden;
}
.team-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s ease;
}
.team-card:hover .team-card-img img { transform: scale(1.04); }
.team-card-social {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
  display: flex;
  gap: .4rem;
  transition: .3s ease;
}
.team-card:hover .team-card-social {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.team-card-social a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .95);
  color: #3D2E23;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: .2s;
}
.team-card-social a:hover {
  background: #7A9E7E;
  color: #fff;
  transform: translateY(-2px);
}
.team-card-body {
  padding: 1.25rem 1.4rem 1.5rem;
  text-align: center;
}
.team-card-body h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #3D2E23;
  margin: 0 0 .25rem;
}
.team-role {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7A9E7E;
  margin-bottom: .75rem;
}
.team-card-body p {
  font-size: .85rem;
  color: #7A6D5E;
  line-height: 1.55;
  margin: 0;
}

/* ─── Stat Box (Team page Join Us) ──────────────────────────────── */
.stat-box {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  backdrop-filter: blur(6px);
  transition: .2s;
}
.stat-box:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  margin-bottom: .35rem;
}
.stat-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}

/* ─── Service Tag Badge (services grid) ─────────────────────────── */
.service-tag-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #C9A84C;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .35rem .8rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(201, 168, 76, .35);
  z-index: 2;
}

/* ─── Mobile responsiveness ─────────────────────────────────────── */
@media (max-width: 991.98px) {
  .service-highlights-box { position: static; margin-top: 2rem; }
  .pricing-card { padding: 2rem 1.5rem 1.75rem; }
  .pricing-amount { font-size: 1.7rem; }
}
@media (max-width: 575.98px) {
  .service-highlight-icon { flex: 0 0 36px; width: 36px; height: 36px; font-size: 1.05rem; }
  .pricing-card { padding: 2rem 1.25rem 1.5rem; }
  .other-service-card { padding: 1.1rem .75rem; }
  .other-service-icon { width: 52px; height: 52px; font-size: 1.3rem; }
  .stat-num { font-size: 1.9rem; }
}

/* ─── About Page: Stats / Achievements ──────────────────────────── */
.stats-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, #3D2E23 0%, #5C4A3A 100%);
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 30px 30px;
  pointer-events: none;
}
.stat-counter {
  text-align: center;
  padding: 1.25rem 1rem;
  position: relative;
  z-index: 1;
}
.stat-counter-icon {
  width: 56px; height: 56px;
  margin: 0 auto .75rem;
  border-radius: 50%;
  background: rgba(122,158,126,.18);
  border: 1px solid rgba(122,158,126,.4);
  display: flex; align-items: center; justify-content: center;
  color: #A8C5AB;
  font-size: 1.5rem;
}
.stat-counter-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.stat-counter-suffix {
  color: #A8C5AB;
  margin-left: .15rem;
}
.stat-counter-label {
  margin-top: .55rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* ─── About Page: Milestones Timeline ───────────────────────────── */
.milestones-section { padding: 5rem 0; }
.milestone-timeline {
  position: relative;
  max-width: 920px;
  margin: 3rem auto 0;
  padding: 1rem 0;
}
.milestone-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #E8E4DF 0%, #7A9E7E 50%, #E8E4DF 100%);
  transform: translateX(-50%);
}
.milestone-item {
  position: relative;
  padding: 1rem 0;
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}
.milestone-left  { justify-content: flex-start; padding-right: calc(50% + 2.5rem); }
.milestone-right { justify-content: flex-end;   padding-left:  calc(50% + 2.5rem); }
.milestone-dot {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #7A9E7E;
  display: flex; align-items: center; justify-content: center;
  color: #7A9E7E;
  font-size: 1.2rem;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(122,158,126,.2);
}
.milestone-card {
  background: #fff;
  border: 1px solid #E8E4DF;
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 4px 20px rgba(60,46,35,.06);
  transition: .2s;
}
.milestone-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(60,46,35,.1); }
.milestone-year {
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #7A9E7E;
  background: #F0F7F1;
  padding: .15rem .65rem;
  border-radius: 6px;
  margin-bottom: .5rem;
  line-height: 1.2;
}
.milestone-card h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: #3D2E23;
  font-weight: 600;
  margin: 0 0 .4rem;
}
.milestone-card p {
  font-size: .85rem;
  color: #7A6D5E;
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 767px) {
  .milestone-timeline::before { left: 24px; }
  .milestone-left, .milestone-right { padding-left: 60px; padding-right: 0; justify-content: flex-start; }
  .milestone-dot { left: 24px; transform: translate(-50%, -50%); width: 40px; height: 40px; font-size: 1rem; }
}

/* ─── About Page: Awards Grid ───────────────────────────────────── */
.awards-section { padding: 5rem 0; }
.award-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #E8E4DF;
  border-radius: 14px;
  padding: 0;
  height: 100%;
  transition: .25s ease;
  overflow: hidden;
  position: relative;
}
.award-card:hover {
  transform: translateY(-4px);
  border-color: #C9A84C;
  box-shadow: 0 16px 36px rgba(201,168,76,.18);
  color: inherit;
}
.award-card-year {
  background: linear-gradient(135deg, #C9A84C 0%, #B8902F 100%);
  color: #fff;
  padding: .55rem 1.25rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .05em;
}
.award-card-body {
  padding: 1.5rem 1.4rem;
  text-align: center;
}
.award-card-icon {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFF6E5, #F9E9D8);
  display: flex; align-items: center; justify-content: center;
  color: #C9A84C;
  font-size: 1.6rem;
}
.award-card-logo {
  max-width: 120px;
  max-height: 60px;
  margin: 0 auto 1rem;
  display: block;
  object-fit: contain;
}
.award-card-body h6 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: #3D2E23;
  font-weight: 600;
  margin: 0 0 .35rem;
  line-height: 1.35;
}
.award-card-org {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #C9A84C;
  margin-bottom: .65rem;
}
.award-card-body p {
  font-size: .82rem;
  color: #7A6D5E;
  line-height: 1.55;
  margin: 0;
}

/* ─── Service Detail: Quick Contact Section ─────────────────────── */
.quick-contact-section {
  padding: 5rem 0;
  background: linear-gradient(135deg, #FAF8F5 0%, #F0EBE4 100%);
  position: relative;
  overflow: hidden;
}
.quick-contact-section::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122,158,126,.18) 0%, transparent 70%);
  pointer-events: none;
}
.quick-contact-section::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -100px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,.12) 0%, transparent 70%);
  pointer-events: none;
}
.quick-contact-intro {
  font-size: 1rem;
  color: #5C4A3A;
  line-height: 1.6;
  margin: 0 0 1.5rem;
  max-width: 480px;
}
.quick-contact-trust {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(232,228,223,.7);
  border-radius: 14px;
  max-width: 460px;
}
.qc-trust-item {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .87rem;
  color: #3D2E23;
}
.qc-trust-item i {
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F0F7F1, #E8F0EA);
  color: #7A9E7E;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
}
.qc-phone-link {
  color: #7A9E7E;
  font-weight: 600;
  text-decoration: none;
  transition: .15s;
}
.qc-phone-link:hover { color: #5C7A60; text-decoration: underline; }

/* Form card */
.quick-contact-form-card {
  background: #fff;
  border: 1px solid #E8E4DF;
  border-radius: 18px;
  padding: 2.25rem 2rem;
  box-shadow: 0 16px 48px rgba(60,46,35,.1);
  position: relative;
  z-index: 1;
}
.qc-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:575px) { .qc-row { grid-template-columns:1fr; } }

.qc-field {
  display: flex; flex-direction: column;
  margin-bottom: 1rem;
}
.qc-field label {
  font-size: .78rem;
  font-weight: 600;
  color: #5C4A3A;
  margin-bottom: .35rem;
  letter-spacing: .04em;
}
.qc-required { color: #C9A84C; font-weight: 700; }
.qc-field input,
.qc-field textarea {
  font-family: inherit;
  font-size: .9rem;
  padding: .75rem .9rem;
  border: 1.5px solid #E8E4DF;
  border-radius: 10px;
  background: #FAFAF8;
  color: #3D2E23;
  transition: all .15s ease;
  outline: none;
  width: 100%;
}
.qc-field input:focus,
.qc-field textarea:focus {
  border-color: #7A9E7E;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(122,158,126,.12);
}
.qc-field input.is-invalid,
.qc-field textarea.is-invalid {
  border-color: #c0392b;
  background: #fff5f4;
}
.qc-error {
  display: block;
  font-size: .72rem;
  color: #c0392b;
  margin-top: .25rem;
  min-height: 0;
  transition: min-height .15s;
}
.qc-error:not(:empty) { min-height: 1.2em; }

.qc-submit {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #7A9E7E 0%, #5C7A60 100%);
  color: #fff;
  border: none;
  padding: 1rem 1.5rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all .2s ease;
  overflow: hidden;
  margin-top: .5rem;
}
.qc-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(122,158,126,.35);
}
.qc-submit:disabled { opacity: .7; cursor: wait; transform: none; }
.qc-submit i { margin-left: .35rem; }
.qc-submit-loading { display: none; }
.qc-submit.is-loading .qc-submit-text { display: none; }
.qc-submit.is-loading .qc-submit-loading { display: inline-flex; align-items:center; gap:.4rem; }
.qc-submit.is-loading .qc-submit-loading i {
  animation: qc-spin 1s linear infinite;
}
@keyframes qc-spin { to { transform: rotate(360deg); } }

.qc-privacy {
  margin-top: .85rem;
  font-size: .72rem;
  color: #9A8D7E;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}
.qc-privacy i { color: #7A9E7E; }

.qc-feedback {
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  animation: qc-slide-in .3s ease;
}
.qc-feedback i { font-size: 1.2rem; flex-shrink: 0; }
.qc-feedback strong { font-weight: 700; margin-right: .15rem; }
.qc-feedback--success { background: #EFF6F0; border: 1px solid #CBDECE; color: #3A6D4A; }
.qc-feedback--error   { background: #fff0f0; border: 1px solid #f5cfcf; color: #c0392b; }
@keyframes qc-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Service Detail: Overview Typography ───────────────────────── */
.service-overview-lede {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  color: #5C4A3A;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid #7A9E7E;
}
.service-overview-body {
  font-size: 1rem;
  color: #3D2E23;
  line-height: 1.75;
}
.service-overview-body p:not(:last-child) { margin-bottom: 1rem; }
@media (max-width: 575.98px) {
  .service-overview-lede { font-size: 1.2rem; padding-left: .85rem; }
  .service-overview-body { font-size: .95rem; line-height: 1.7; }
}

/* ═══════════════════════════════════════════════════════════════════
   AJAX FORM STATES — applies sitewide to .oc-ajax-form
   ═══════════════════════════════════════════════════════════════════ */

/* Honeypot — visually hidden but keeps tab-order out */
.oc-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Field error state — applies to any input/select/textarea inside .oc-field */
.oc-field { position: relative; }
.oc-field input.is-invalid,
.oc-field select.is-invalid,
.oc-field textarea.is-invalid,
.contact-input.is-invalid,
.quick-contact-form-card input.is-invalid,
.quick-contact-form-card textarea.is-invalid {
  border-color: #d44a4a !important;
  background-color: #fff8f8 !important;
  box-shadow: 0 0 0 3px rgba(212, 74, 74, 0.10) !important;
}

/* Inline error message under each field */
.oc-error-msg,
.contact-field-error,
.qc-error {
  display: block;
  margin: .35rem 0 0;
  font-size: .78rem;
  color: #d44a4a;
  font-weight: 500;
  line-height: 1.4;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .25s ease, opacity .25s ease, margin .25s ease;
}
.oc-error-msg.is-visible,
.oc-error-msg:not(:empty) {
  max-height: 60px;
  opacity: 1;
  margin-top: .35rem;
}
.oc-error-msg::before {
  content: '\ea8b'; /* ri-error-warning-line */
  font-family: 'remixicon';
  margin-right: .25rem;
  font-size: .85rem;
}

/* Submit button loading state (works with .oc-submit-btn) */
.oc-submit-btn { position: relative; }
.oc-submit-btn .oc-submit-loading,
.oc-submit-btn .qc-submit-loading {
  display: none;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.oc-submit-btn.is-loading .oc-submit-text,
.oc-submit-btn.is-loading .qc-submit-text { display: none !important; }
.oc-submit-btn.is-loading .oc-submit-loading,
.oc-submit-btn.is-loading .qc-submit-loading { display: inline-flex !important; }
.oc-submit-btn.is-loading { cursor: wait; opacity: .85; pointer-events: none; }

/* Spinner */
.oc-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: oc-spin .7s linear infinite;
  vertical-align: middle;
}
@keyframes oc-spin { to { transform: rotate(360deg); } }

/* Banner-style error (top-of-form) */
.oc-form-banner[data-banner="error"] {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  background: #fff5f5;
  border: 1px solid #f3c3c3;
  border-left: 4px solid #d44a4a;
  border-radius: 8px;
  color: #8a2a2a;
  font-size: .88rem;
  animation: oc-shake .35s ease;
}
.oc-form-banner[data-banner="error"] i { font-size: 1.15rem; flex-shrink: 0; }
.oc-form-banner[data-banner="error"] p,
.oc-form-banner[data-banner="error"] span { margin: 0; }
@keyframes oc-shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATED THANK-YOU PAGE
   ═══════════════════════════════════════════════════════════════════ */
.thanks-section {
  padding: 6rem 0 5rem;
  background: linear-gradient(180deg, #FAF8F5 0%, #fff 100%);
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.thanks-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border-radius: 24px;
  padding: 3.5rem 2.5rem 2.75rem;
  box-shadow: 0 20px 60px rgba(60, 46, 35, 0.08);
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: oc-rise .55s cubic-bezier(.2,.8,.2,1) both;
}
.thanks-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at top, rgba(122,158,126,.07), transparent 60%);
  pointer-events: none;
}
@keyframes oc-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Animated tick */
.thanks-tick-wrap {
  position: relative;
  width: 110px; height: 110px;
  margin: 0 auto 1.75rem;
}
.thanks-tick { width: 100%; height: 100%; display: block; }
.thanks-tick-ring {
  fill: #f0f7f1;
  stroke: #7A9E7E;
  stroke-width: 3;
  stroke-dasharray: 226;
  stroke-dashoffset: 226;
  animation: oc-draw-ring .7s cubic-bezier(.4,0,.2,1) .15s forwards;
}
.thanks-tick-check {
  stroke: #7A9E7E;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: oc-draw-check .45s cubic-bezier(.65,0,.45,1) .75s forwards;
}
@keyframes oc-draw-ring  { to { stroke-dashoffset: 0; } }
@keyframes oc-draw-check { to { stroke-dashoffset: 0; } }

/* Confetti dots around tick */
.thanks-confetti {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  opacity: 0;
  animation: oc-confetti 1.4s ease-out 1s forwards;
}
.thanks-confetti--1 { top: 0;     left: 50%;  background: #C9A84C; --tx: -50px; --ty: -40px; }
.thanks-confetti--2 { top: 50%;   left: 0;    background: #7A9E7E; --tx: -55px; --ty: -10px; }
.thanks-confetti--3 { top: 50%;   right: 0;   background: #E8B4A0; --tx:  55px; --ty: -10px; }
.thanks-confetti--4 { bottom: 0;  left: 30%;  background: #7A9E7E; --tx: -25px; --ty:  45px; }
.thanks-confetti--5 { bottom: 0;  right: 30%; background: #C9A84C; --tx:  25px; --ty:  45px; }
.thanks-confetti--6 { top: 30%;   left: 30%;  background: #E8B4A0; --tx: -40px; --ty: -25px; }
@keyframes oc-confetti {
  0%   { opacity: 0; transform: translate(0, 0) scale(.5); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.2); }
}

.thanks-eyebrow { display: inline-flex !important; margin-bottom: 1rem; }
.thanks-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: #3D2E23;
  margin: 0 0 1rem;
  line-height: 1.2;
}
.thanks-title span { color: #7A9E7E; font-style: italic; }
.thanks-lede {
  max-width: 540px;
  margin: 0 auto 2.25rem;
  color: #6B5D52;
  font-size: 1rem;
  line-height: 1.7;
}
.thanks-lede strong { color: #3D2E23; }

/* What happens next */
.thanks-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 2.5rem;
  text-align: left;
}
.thanks-step {
  background: #FAF8F5;
  border-radius: 14px;
  padding: 1.1rem 1.1rem 1rem;
  border: 1px solid rgba(122,158,126,.18);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.thanks-step-num {
  position: absolute;
  top: -12px; right: 16px;
  width: 28px; height: 28px;
  background: #7A9E7E;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .82rem;
  box-shadow: 0 4px 10px rgba(122,158,126,.3);
}
.thanks-step strong { color: #3D2E23; font-size: .95rem; font-weight: 700; }
.thanks-step span { color: #7A6D5E; font-size: .82rem; line-height: 1.5; }

.thanks-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.thanks-redirect-note {
  font-size: .78rem;
  color: #aaa;
  margin: 0;
}
.thanks-redirect-note span {
  color: #7A9E7E;
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .thanks-section { padding: 4rem 0 3rem; }
  .thanks-card { padding: 2.5rem 1.5rem 2rem; border-radius: 18px; }
  .thanks-title { font-size: 2rem; }
  .thanks-steps { grid-template-columns: 1fr; }
  .thanks-actions .btn-lg { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE DETAIL — per-service photo gallery (CSS-grid masonry)
   ═══════════════════════════════════════════════════════════════════ */
.service-gallery-section { padding: 6rem 0; background: #fff; }
.service-gallery-intro {
  max-width: 640px; margin: 0 auto;
  color: #7A6D5E; line-height: 1.7;
}
.service-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 14px;
}
.service-gallery-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  text-decoration: none;
  background: #FAF8F5;
  transition: transform .35s ease;
}
.service-gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .55s ease;
}
.service-gallery-item:hover { transform: translateY(-3px); }
.service-gallery-item:hover img { transform: scale(1.06); }
.sgi-base { grid-row: span 1; grid-column: span 1; }
.sgi-md   { grid-row: span 1; grid-column: span 1; }
.sgi-lg   { grid-row: span 2; grid-column: span 2; }
.sgi-tall { grid-row: span 2; grid-column: span 1; }
.service-gallery-zoom {
  position: absolute; top: 12px; right: 12px;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0;
  transition: opacity .25s ease;
}
.service-gallery-item:hover .service-gallery-zoom { opacity: 1; }
.service-gallery-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4rem 1rem .9rem;
  background: linear-gradient(to top, rgba(30,22,15,.85), transparent);
  color: #fff;
  font-size: .82rem;
  font-weight: 500;
  opacity: 0;
  transition: opacity .25s ease;
}
.service-gallery-item:hover .service-gallery-caption { opacity: 1; }
@media (max-width: 991.98px) {
  .service-gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
  .sgi-lg { grid-column: span 2; }
}
@media (max-width: 575.98px) {
  .service-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; }
  .sgi-lg, .sgi-tall { grid-column: span 2; grid-row: span 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   SERVICE DETAIL — Related Services rich cards (replaces "Other Services")
   ═══════════════════════════════════════════════════════════════════ */
.related-services-section { padding: 6rem 0; }
.related-services-intro {
  max-width: 640px; margin: 0 auto;
  color: #7A6D5E; line-height: 1.7;
}
.related-service-card {
  display: block;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  box-shadow: 0 4px 20px rgba(60,46,35,.06);
  border: 1px solid rgba(122,158,126,.12);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.related-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(60,46,35,.12);
  border-color: #7A9E7E;
  color: inherit;
}
.related-service-image {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #f5f2ee;
}
.related-service-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.related-service-card:hover .related-service-image img { transform: scale(1.08); }
.related-service-image-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem; color: #7A9E7E; opacity: .35;
}
.related-service-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(60,46,35,.55), transparent 50%);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 1rem;
  opacity: 0;
  transition: opacity .35s ease;
}
.related-service-card:hover .related-service-overlay { opacity: 1; }
.related-service-cta {
  background: rgba(255,255,255,.95);
  color: #3D2E23;
  padding: .45rem .85rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  display: inline-flex; align-items: center; gap: .35rem;
}
.related-service-body { padding: 1.5rem 1.5rem 1.6rem; position: relative; }
.related-service-icon {
  position: absolute; top: -28px; left: 1.5rem;
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #7A9E7E, #6B8C6F);
  color: #fff;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 6px 18px rgba(122,158,126,.35);
}
.related-service-body h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #3D2E23;
  margin: 1.6rem 0 .65rem;
}
.related-service-body p {
  font-size: .88rem;
  color: #7A6D5E;
  line-height: 1.65;
  margin: 0 0 1rem;
}
.related-service-link {
  display: inline-flex; align-items: center; gap: .35rem;
  color: #7A9E7E;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: gap .25s ease;
}
.related-service-card:hover .related-service-link { gap: .65rem; color: #3D2E23; }

/* ═══════════════════════════════════════════════════════════════════
   GALLERY PAGE — Curated grid (mirrors service.php Recent Projects)
   First visible tile is a 2×2 hero on the left, the rest fill the
   remaining cells. Photos past the first 5 flow into 4-col rows below.
   Hero placement uses the .gc-hero class (assigned by JS) instead of
   :first-child so the layout still works when tiles are filtered out.
   ═══════════════════════════════════════════════════════════════════ */
.gallery-curated {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 14px;
  width: 100%;
}
.gc-item {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #FAF8F5;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(60,46,35,.06);
  transition: transform .35s ease, box-shadow .35s ease;
}
.gc-item.gc-hero {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
.gc-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.gc-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(60,46,35,.14);
  color: inherit;
}
.gc-item:hover img { transform: scale(1.06); }

/* Hover overlay + zoom — share the existing .gm-overlay / .gm-zoom rules
   defined later in this file so the visual feel is identical to the
   masonry version we just replaced. */

/* Fade-in animation on filter click — uses the same keyframes as before */
.gc-item.is-animating-in {
  animation: gm-fade-in .55s cubic-bezier(.2,.7,.2,1) both;
}

/* Responsive: hero collapses on smaller screens to keep tiles legible */
@media (max-width: 1199.98px) {
  .gallery-curated { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
  .gc-item.gc-hero { grid-column: 1 / span 2; grid-row: 1 / span 2; }
}
@media (max-width: 767.98px) {
  .gallery-curated { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 10px; }
  .gc-item.gc-hero { grid-column: 1 / span 2; grid-row: span 2; }
}
@media (max-width: 479.98px) {
  .gallery-curated { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .gc-item,
  .gc-item.gc-hero { grid-column: 1; grid-row: span 1; }
  .gc-item.gc-hero { grid-row: span 2; }
}

/* ═══════════════════════════════════════════════════════════════════
   LEGACY (kept for any cached page references) — Masonry.js layout
   Not used by gallery.php anymore but harmless if any external link
   still serves an older cached HTML.
   ═══════════════════════════════════════════════════════════════════ */

/* Centered intro subtitle below section-title (matches site rhythm) */
.gallery-intro-sub {
  font-size: 1.05rem;
  color: #7A6D5E;
  line-height: 1.65;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Per-service curated gallery on service.php (below description)
   Layout pattern: first image is a tall feature on the LEFT (50% wide,
   spans 2 rows), the next 4 images form a 2×2 grid on the RIGHT.
   Anything past 5 images flows into 2-column rows below.
   This gives interior shots a magazine-spread feel. */
.service-gallery-curated {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  grid-auto-flow: dense;
  gap: 14px;
  width: 100%;
}
.sgc-item {
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #FAF8F5;
  box-shadow: 0 2px 10px rgba(60,46,35,.06);
  transition: transform .35s ease, box-shadow .35s ease;
  /* Default cell = 1 col × 1 row */
}
/* First image: hero — left half, 2 rows tall */
.sgc-item:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

.sgc-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.sgc-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(60,46,35,.14);
}
.sgc-item:hover img { transform: scale(1.06); }
.sgc-item .sgm-zoom {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .35s ease;
}
.sgc-item:hover .sgm-zoom { opacity: 1; }

/* Edge cases: if there are fewer than 5 images the hero pattern looks
   awkward. Drop the hero spans and fall back to a simple grid. */
.sgc-count-1 .sgc-item:first-child { grid-column: 1 / span 4; grid-row: span 2; }
.sgc-count-2 { grid-template-columns: 1fr 1fr; }
.sgc-count-2 .sgc-item:first-child { grid-column: 1; grid-row: 1; }
.sgc-count-3 .sgc-item:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.sgc-count-4 .sgc-item:first-child { grid-column: 1 / span 2; grid-row: 1; }

/* Responsive: collapse the hero pattern on smaller viewports — at < 768px
   the 2×2 grid feels cramped, so we switch to a uniform 2-col grid. */
@media (max-width: 991.98px) {
  .service-gallery-curated { grid-auto-rows: 180px; gap: 12px; }
}
@media (max-width: 767.98px) {
  .service-gallery-curated {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
    gap: 10px;
  }
  .sgc-item:first-child {
    grid-column: 1 / span 2;
    grid-row: span 2;
  }
}
@media (max-width: 479.98px) {
  .service-gallery-curated { grid-template-columns: 1fr; grid-auto-rows: 220px; }
  .sgc-item:first-child,
  .sgc-item { grid-column: 1; grid-row: span 1; }
  .sgc-item:first-child { grid-row: span 2; }
}

/* ── Legal pages (Privacy Policy, Terms of Use) ──────────────────── */
.legal-section {
  padding: 4.5rem 0 5.5rem;
  background: #FAFAF6;
}
.legal-doc {
  background: #fff;
  border: 1px solid #ECE5DD;
  border-radius: 16px;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 880px;
  margin: 0 auto;
  box-shadow: 0 2px 16px rgba(60,46,35,.04);
  color: #3D2E23;
  line-height: 1.7;
}
.legal-doc h2.legal-doc-title {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  margin: 0 0 .5rem;
  color: #3D2E23;
}
.legal-doc-meta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: #7A9E7E;
  background: #EFF6F0;
  border: 1px solid #CBDECE;
  padding: .25rem .65rem;
  border-radius: 999px;
  margin: 0 0 1.6rem;
}
.legal-doc-meta i { font-size: .9rem; }
.legal-doc h2,
.legal-doc h3 {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  color: #3D2E23;
  margin-top: 2rem;
  margin-bottom: .65rem;
  font-weight: 600;
}
.legal-doc h2 { font-size: 1.4rem; }
.legal-doc h3 { font-size: 1.15rem; }
.legal-doc p { margin: 0 0 1rem; color: #5C4A3A; }
.legal-doc ul, .legal-doc ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.legal-doc li { margin-bottom: .4rem; color: #5C4A3A; }
.legal-doc a { color: #7A9E7E; text-decoration: underline; }
.legal-doc a:hover { color: #5d7d61; }
.legal-doc strong { color: #3D2E23; }

/* ── "Our Portfolio" cards (below masonry) ────────────────────────── */
.gallery-portfolio {
  background: #fff;
  padding: 4rem 0;
}
.pf-card {
  display: block;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(60,46,35,.06);
  transition: transform .35s ease, box-shadow .35s ease;
  height: 100%;
}
.pf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(60,46,35,.14);
  color: inherit;
}
.pf-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FAF8F5;
}
.pf-card-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.pf-card:hover .pf-card-img img { transform: scale(1.07); }
.pf-zoom {
  position: absolute; top: 14px; right: 14px;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .35s ease;
}
.pf-card:hover .pf-zoom { opacity: 1; }
.pf-card-body {
  padding: 1rem 1.15rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.pf-card-cat {
  display: inline-block;
  font-size: .68rem; font-weight: 700;
  color: #7A9E7E;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.pf-card-title {
  font-family: 'Cormorant Garamond', 'Georgia', serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #3D2E23;
  margin: 0;
  line-height: 1.25;
}
.pf-card-meta {
  font-size: .76rem;
  color: #7A6D5E;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .3rem;
}
.pf-card-meta i { font-size: .85rem; color: #7A9E7E; }

/* Broken-image fallback — applied by JS in forms.js when an <img> fails.
   Dim slightly + remove decorative hover/zoom so the placeholder reads as
   "missing" and not as featured content. */
.oc-img-broken {
  opacity: .7;
  filter: saturate(.85);
  background: #FAF8F5;
  object-fit: contain !important;
}
.oc-img-broken:hover { transform: none !important; }

/* Empty-filter feedback — shown when active filter has zero matches */
.gallery-empty-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: 3rem 1.5rem;
  margin: 0 auto;
  max-width: 520px;
  text-align: center;
  border: 2px dashed #ECE5DD;
  border-radius: 16px;
  background: #FAFAF6;
}
.gallery-empty-filter[hidden] { display: none; }
.gallery-empty-filter i { font-size: 2.4rem; color: #d4cabb; }
.gallery-empty-filter p { margin: 0; color: #7A6D5E; font-size: .92rem; }
.gallery-empty-filter strong { color: #3D2E23; }

/* Masonry.js container — items are absolute-positioned by JS.
   Hide grid until masonry initializes to avoid flash of vertical stack. */
.gallery-masonry {
  position: relative;
  width: 100%;
  opacity: 0;
  transition: opacity .25s ease;
}
.gallery-masonry.is-ready { opacity: 1; }

/* Column sizer — invisible div that defines per-column width as % of container.
   Default 4 columns. Masonry reads this via columnWidth: '.gm-sizer'. */
.gm-sizer { width: 25%; }              /* 4 cols */
@media (min-width: 1600px) { .gm-sizer { width: 20%; } }   /* 5 cols ≥1600 */
@media (max-width: 1199.98px) { .gm-sizer { width: 33.333%; } } /* 3 cols */
@media (max-width: 767.98px)  { .gm-sizer { width: 50%; } }     /* 2 cols */
@media (max-width: 479.98px)  { .gm-sizer { width: 100%; } }    /* 1 col  */

/* Tile widths match column widths minus half-gutter.
   Masonry handles gutter spacing via the `gutter: 16` option. */
.gallery-masonry-item {
  width: calc(25% - 12px);
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
  background: #FAF8F5;
  position: relative;
  box-shadow: 0 2px 10px rgba(60,46,35,.06);
  transition: transform .35s ease, box-shadow .35s ease;
}
@media (min-width: 1600px) { .gallery-masonry-item { width: calc(20% - 13px); } }
@media (max-width: 1199.98px) { .gallery-masonry-item { width: calc(33.333% - 11px); } }
@media (max-width: 767.98px) {
  .gallery-masonry-item { width: calc(50% - 6px); margin-bottom: 12px; }
}
@media (max-width: 479.98px) { .gallery-masonry-item { width: 100%; } }

/* Filter-tab click animation: tiles fade & scale up with a staggered delay.
   The .is-animating-in class is added/removed by gallery.php's applyFilter(). */
@keyframes gm-fade-in {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.gallery-masonry-item.is-animating-in {
  animation: gm-fade-in .55s cubic-bezier(.2,.7,.2,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-masonry-item.is-animating-in { animation: none; }
}
.gallery-masonry-item .gm-link {
  display: block;
  width: 100%;
  text-decoration: none; color: inherit;
  position: relative;
}
.gallery-masonry-item img {
  width: 100%;
  height: auto;       /* natural aspect ratio — true masonry */
  display: block;
  transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.gallery-masonry-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(60,46,35,.14);
}
.gallery-masonry-item:hover img { transform: scale(1.06); }

.gm-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,22,15,.85) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .35s ease;
  display: flex; align-items: flex-end;
  padding: 1rem 1.1rem;
}
.gallery-masonry-item:hover .gm-overlay { opacity: 1; }
.gm-info h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 .1rem;
  font-weight: 600;
  line-height: 1.25;
}
.gm-info span {
  font-size: .68rem;
  color: #E8B4A0;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.gm-zoom {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0;
  transition: opacity .35s ease;
}
.gallery-masonry-item:hover .gm-zoom { opacity: 1; }