/* ============================================================
   MARANGOZ ANKARA – Main Stylesheet
   Stack: Bootstrap 5 + Custom Vanilla CSS
   Palette:
     --brown-dark : #2C1E16
     --brown-mid  : #4A3B32
     --brown-warm : #7D6B5D
     --gold       : #A66E38
     --gold-light : #D4A373
     --cream      : #FAF8F5
     --cream-2    : #EAE0D5
     --cream-3    : #F2EBE3
     --border-c   : #E6D5C3
     --border-d   : #4A3B32
============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --brown-dark : #2C1E16;
  --brown-mid  : #4A3B32;
  --brown-warm : #7D6B5D;
  --gold       : #A66E38;
  --gold-light : #D4A373;
  --cream      : #FAF8F5;
  --cream-2    : #EAE0D5;
  --cream-3    : #F2EBE3;
  --border-c   : #E6D5C3;
  --border-d   : #4A3B32;
  --font-serif : 'Cormorant Garamond', Georgia, serif;
  --font-sans  : 'Outfit', system-ui, sans-serif;
  --max-w      : 1400px;
  --px         : clamp(1.25rem, 4vw, 3rem);
  --radius-pill: 9999px;
  --transition : 0.35s cubic-bezier(.4,0,.2,1);
}

/* ── RESET / BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

::selection { background: var(--gold); color: var(--cream); }

body {
  font-family: var(--font-sans);
  background : var(--cream);
  color      : var(--brown-dark);
  line-height: 1.6;
  margin     : 0;
  overflow-x : hidden;
}

img { max-width: 100%; display: block; }
video { display: block; }

a { text-decoration: none; color: inherit; }

/* Remove Bootstrap border-box conflict */
.border { border-color: var(--border-c) !important; }

/* ── TYPOGRAPHY HELPERS ─────────────────────────────────── */
.font-serif { font-family: var(--font-serif) !important; }

.section-label {
  display    : inline-flex;
  align-items: center;
  gap        : 0.75rem;
  font-size  : 0.7rem;
  text-transform : uppercase;
  letter-spacing : 0.35em;
  color      : var(--gold);
  font-family: var(--font-sans);
  font-weight: 500;
}
.section-label::before {
  content   : '';
  display   : inline-block;
  width     : 2.5rem;
  height    : 1px;
  background: var(--gold);
  flex-shrink: 0;
}

.section-title {
  font-family: var(--font-serif);
  font-size  : clamp(2rem, 4vw, 3.25rem);
  font-weight: 600;
  line-height: 1.05;
  color      : var(--brown-dark);
  margin     : 0;
}
.section-title em {
  color     : var(--gold);
  font-style: normal;
}
.section-title--light { color: var(--cream); }

/* ── BUTTONS ────────────────────────────────────────────── */
.ma-btn {
  display    : inline-flex;
  align-items: center;
  gap        : 0.5rem;
  padding    : 0.85rem 2rem;
  border-radius: var(--radius-pill);
  font-size  : 0.875rem;
  letter-spacing: 0.05em;
  font-family: var(--font-sans);
  font-weight: 500;
  transition : all var(--transition);
  cursor     : pointer;
  border     : 1.5px solid transparent;
  white-space: nowrap;
}
.ma-btn--primary {
  background: var(--gold);
  color     : var(--cream);
  border-color: var(--gold);
}
.ma-btn--primary:hover {
  background: #8B5A2B;
  border-color: #8B5A2B;
  color: var(--cream);
}
.ma-btn--dark {
  background: var(--brown-dark);
  color     : var(--cream);
  border-color: var(--brown-dark);
}
.ma-btn--dark:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cream);
}
.ma-btn--outline-light {
  background  : transparent;
  color       : var(--cream);
  border-color: rgba(250,248,245,0.35);
}
.ma-btn--outline-light:hover {
  background: var(--cream);
  color     : var(--brown-dark);
}
.ma-btn svg { flex-shrink: 0; }
.ma-btn .arrow { transition: transform var(--transition); }
.ma-btn:hover .arrow { transform: translateX(4px); }

.ma-link {
  display    : inline-flex;
  align-items: center;
  gap        : 0.4rem;
  font-size  : 0.875rem;
  letter-spacing: 0.04em;
  color      : var(--gold);
  transition : color var(--transition);
}
.ma-link:hover { color: var(--brown-dark); }
.ma-link svg { transition: transform var(--transition); }
.ma-link:hover svg { transform: translateX(4px); }

/* ── HEADER ─────────────────────────────────────────────── */
.ma-header {
  position  : fixed;
  top: 0; left: 0; right: 0;
  z-index   : 1000;
  background: rgba(250,248,245,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-c);
  transition: box-shadow var(--transition), background var(--transition);
}
.ma-header.scrolled {
  box-shadow: 0 4px 32px rgba(44,30,22,.08);
}
.ma-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--px);
  height : 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.ma-header__logo-img {
  height: 60px;
  width : auto;
  object-fit: contain;
  transition: transform var(--transition);
}
.ma-header__logo:hover .ma-header__logo-img { transform: scale(1.04); }

.ma-header__nav { gap: 2.5rem; }
.ma-header__nav-link {
  font-size    : 0.875rem;
  letter-spacing: 0.04em;
  color        : var(--brown-dark);
  transition   : color var(--transition);
  position     : relative;
}
.ma-header__nav-link::after {
  content  : '';
  position : absolute;
  bottom   : -3px;
  left     : 0; right: 0;
  height   : 1px;
  background: var(--gold);
  transform : scaleX(0);
  transition: transform var(--transition);
}
.ma-header__nav-link:hover,
.ma-header__nav-link.active { color: var(--gold); }
.ma-header__nav-link:hover::after,
.ma-header__nav-link.active::after { transform: scaleX(1); }

.ma-header__actions {
  display    : flex;
  align-items: center;
  gap        : 1rem;
}
.ma-header__phone {
  font-size  : 0.875rem;
  color      : var(--brown-mid);
  transition : color var(--transition);
}
.ma-header__phone:hover { color: var(--gold); }

/* Hamburger */
.ma-hamburger {
  background: none;
  border    : none;
  padding   : 0.4rem;
  cursor    : pointer;
  display   : flex;
  flex-direction: column;
  gap       : 5px;
}
.ma-hamburger span {
  display   : block;
  width     : 24px;
  height    : 2px;
  background: var(--brown-dark);
  transition: all var(--transition);
  border-radius: 2px;
}
.ma-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ma-hamburger.open span:nth-child(2) { opacity: 0; }
.ma-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.ma-mobile-menu {
  position : fixed;
  top      : 5rem;
  left     : 0; right: 0; bottom: 0;
  background: var(--cream);
  z-index  : 999;
  padding  : 2rem var(--px);
  display  : flex;
  flex-direction: column;
  gap      : 2rem;
  transform: translateX(100%);
  transition: transform var(--transition);
  overflow-y: auto;
}
.ma-mobile-menu.open { transform: translateX(0); }

.ma-mobile-menu nav { display: flex; flex-direction: column; gap: 0; }
.ma-mobile-menu__link {
  font-size  : 1.5rem;
  font-family: var(--font-serif);
  color      : var(--brown-dark);
  padding    : 1rem 0;
  border-bottom: 1px solid var(--border-c);
  transition : color var(--transition), padding var(--transition);
}
.ma-mobile-menu__link:hover,
.ma-mobile-menu__link.active { color: var(--gold); padding-left: 0.5rem; }

.ma-mobile-menu__footer {
  margin-top: auto;
  display   : flex;
  flex-direction: column;
  gap       : 1rem;
}
.ma-mobile-menu__phone {
  font-size  : 1.125rem;
  color      : var(--brown-mid);
  text-align : center;
}

/* ── PAGE WRAPPER ───────────────────────────────────────── */
.ma-page { padding-top: 5rem; min-height: 100vh; }
/* Homepage hero sits under the fixed header seamlessly */
.ma-page--home { padding-top: 0; }

/* ── HERO ───────────────────────────────────────────────── */
.ma-hero {
  position  : relative;
  height    : 100svh;
  min-height: 600px;
  overflow  : hidden;
}
/* Full-bleed video banner — override Bootstrap video reset */
.ma-hero__video {
  position  : absolute;
  inset     : 0;
  width     : 100%;
  height    : 100%;
  max-width : none !important;
  object-fit: cover;
}
.ma-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(44,30,22,0.70) 0%,
    rgba(44,30,22,0.40) 40%,
    rgba(44,30,22,0.85) 100%
  );
}
.ma-hero__content {
  position: relative;
  z-index : 2;
  height  : 100%;
  max-width: var(--max-w);
  margin  : 0 auto;
  padding : 0 var(--px) 4rem;
  display : flex;
  flex-direction: column;
  justify-content: flex-end;
}
.ma-hero__body { max-width: 46rem; }

.ma-hero h1 {
  font-family: var(--font-serif);
  font-size  : clamp(2.5rem, 7vw, 4.5rem);
  line-height: 0.95;
  color      : var(--cream);
  letter-spacing: -0.02em;
  margin     : 1.5rem 0 1.25rem;
}
.ma-hero h1 em { color: var(--gold-light); font-style: normal; }

.ma-hero__desc {
  font-size  : clamp(1rem, 1.3vw, 1.125rem);
  color      : rgba(234,224,213,0.92);
  max-width  : 36rem;
  line-height: 1.7;
}
.ma-hero__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; }

.ma-hero__scroll {
  position : absolute;
  bottom   : 1.5rem;
  left     : 50%;
  transform: translateX(-50%);
  color    : rgba(250,248,245,0.6);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100%{ opacity: .6; }
  50%     { opacity: 1; }
}

/* ── MARQUEE ─────────────────────────────────────────────── */
.ma-marquee {
  background  : var(--brown-dark);
  color       : var(--gold-light);
  padding     : 1.25rem 0;
  border-top  : 1px solid var(--border-d);
  border-bottom: 1px solid var(--border-d);
  overflow    : hidden;
  white-space : nowrap;
}
.ma-marquee__track {
  display: inline-flex;
  gap    : 3rem;
  animation: marquee 35s linear infinite;
}
.ma-marquee__track:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ma-marquee__item {
  font-family: var(--font-serif);
  font-size  : 1.375rem;
  font-style : italic;
  display    : inline-flex;
  align-items: center;
  gap        : 2.5rem;
}
.ma-marquee__dot { color: var(--gold); }

/* ── SECTION WRAPPER ─────────────────────────────────────── */
.ma-section {
  max-width: var(--max-w);
  margin   : 0 auto;
  padding  : clamp(4rem, 8vw, 7rem) var(--px);
}
.ma-section--full { padding: 0; }

/* ── ABOUT SECTION ───────────────────────────────────────── */
.ma-about__img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.ma-about__img {
  width     : 100%;
  height    : clamp(320px, 45vw, 520px);
  object-fit: cover;
  display   : block;
}
.ma-about__badge {
  position  : absolute;
  bottom    : -2rem;
  right     : -2rem;
  background: var(--gold);
  color     : var(--cream);
  padding   : 2rem;
  width     : 11rem;
  display   : none;
}
@media (min-width: 992px) { .ma-about__badge { display: block; } }
.ma-about__badge-num {
  font-family: var(--font-serif);
  font-size  : 3rem;
  line-height: 1;
}
.ma-about__badge-lbl {
  font-size      : 0.65rem;
  text-transform : uppercase;
  letter-spacing : 0.3em;
  margin-top     : 0.5rem;
}

.ma-about__body { padding: 0; }
@media (min-width: 992px) { .ma-about__body { padding-left: 4rem; } }

.ma-about__text {
  color      : var(--brown-mid);
  font-size  : clamp(0.95rem, 1.1vw, 1.1rem);
  line-height: 1.75;
  margin-top : 1.5rem;
}
.ma-feature-grid { margin-top: 2.5rem; }
.ma-feature {
  display: flex;
  gap    : 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-c);
}
.ma-feature:last-child { border-bottom: none; }
.ma-feature__icon {
  flex-shrink: 0;
  width : 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--cream-2);
  display   : flex;
  align-items: center;
  justify-content: center;
  color     : var(--gold);
}
.ma-feature__title {
  font-family: var(--font-serif);
  font-size  : 1.125rem;
  color      : var(--brown-dark);
}
.ma-feature__desc {
  font-size : 0.8125rem;
  color     : var(--brown-warm);
  margin-top: 0.2rem;
  line-height: 1.5;
}

/* ── SERVICES GRID ───────────────────────────────────────── */
.ma-services__header {
  display        : flex;
  flex-wrap      : wrap;
  justify-content: space-between;
  align-items    : flex-end;
  gap            : 1rem;
  margin-bottom  : 3.5rem;
}
.ma-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap    : 1px;
  background: var(--border-c);
  border    : 1px solid var(--border-c);
}
.ma-service-card {
  background : var(--cream);
  padding    : 2rem;
  min-height : 220px;
  display    : flex;
  flex-direction: column;
  justify-content: space-between;
  cursor     : pointer;
  transition : background var(--transition), color var(--transition);
}
.ma-service-card:hover { background: var(--brown-dark); }
.ma-service-card__icon { color: var(--gold); transition: color var(--transition); }
.ma-service-card:hover .ma-service-card__icon { color: var(--gold-light); }
.ma-service-card__name {
  font-family: var(--font-serif);
  font-size  : 1.5rem;
  color      : var(--brown-dark);
  transition : color var(--transition);
}
.ma-service-card:hover .ma-service-card__name { color: var(--cream); }
.ma-service-card__desc {
  font-size  : 0.76rem;
  color      : var(--brown-warm);
  margin-top : 0.4rem;
  line-height: 1.55;
  transition : color var(--transition);
  display    : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow   : hidden;
}
.ma-service-card:hover .ma-service-card__desc { color: var(--gold-light); }

/* ── PORTFOLIO ───────────────────────────────────────────── */
.ma-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.5rem, 1vw, 1.5rem);
}
.ma-portfolio-item {
  position : relative;
  overflow : hidden;
  cursor   : pointer;
}
.ma-portfolio-item--lg       { grid-column: span 12; }
.ma-portfolio-item--half     { grid-column: span 6; }
.ma-portfolio-item--third    { grid-column: span 4; }
@media (min-width: 768px) {
  .ma-portfolio-item--lg    { grid-column: span 7; }
  .ma-portfolio-item--half2 { grid-column: span 5; }
  .ma-portfolio-item--third { grid-column: span 4; }
}
.ma-portfolio-item--lg,
.ma-portfolio-item--half2 {
  height: clamp(280px, 35vw, 520px);
}
.ma-portfolio-item--third {
  height: clamp(200px, 25vw, 360px);
  grid-column: span 6;
}
@media (min-width: 768px) {
  .ma-portfolio-item--third { grid-column: span 4; }
}
.ma-portfolio-item__img {
  position  : absolute;
  inset     : 0;
  width     : 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.4,0,.2,1);
}
.ma-portfolio-item:hover .ma-portfolio-item__img { transform: scale(1.08); }
.ma-portfolio-item__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(44,30,22,.85), rgba(44,30,22,0) 60%);
  opacity: .8;
}
.ma-portfolio-item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding : 1.5rem;
  color   : var(--cream);
}
.ma-portfolio-item__cat {
  font-size     : 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color         : var(--gold-light);
}
.ma-portfolio-item__title {
  font-family: var(--font-serif);
  font-size  : 1.5rem;
  margin-top : 0.25rem;
}

/* ── STATS ───────────────────────────────────────────────── */
.ma-stats-bg {
  background: var(--brown-dark);
  color     : var(--cream);
  padding   : clamp(4rem, 6vw, 5rem) 0;
}
.ma-stats-grid {
  max-width: var(--max-w);
  margin   : 0 auto;
  padding  : 0 var(--px);
  display  : grid;
  grid-template-columns: repeat(2, 1fr);
  gap      : 2.5rem;
}
@media (min-width: 768px) {
  .ma-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.ma-stat {
  padding-left : 1.5rem;
  border-left  : 2px solid var(--gold);
}
.ma-stat__num {
  font-family: var(--font-serif);
  font-size  : clamp(2.5rem, 5vw, 3.5rem);
  color      : var(--gold-light);
  line-height: 1;
}
.ma-stat__lbl {
  font-size     : 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color         : rgba(234,224,213,0.7);
  margin-top    : 0.5rem;
}

/* ── TESTIMONIALS ───────────────────────────────────────── */
.ma-testimonials-grid {
  display: grid;
  gap    : 1.5rem;
}
@media (min-width: 768px) {
  .ma-testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}
.ma-testimonial {
  background: var(--cream-3);
  padding   : 2.5rem;
  position  : relative;
}
.ma-testimonial__mark {
  font-family: var(--font-serif);
  font-size  : 6rem;
  line-height: 1;
  color      : rgba(166,110,56,0.25);
  position   : absolute;
  top        : 1rem;
  left       : 1.5rem;
}
.ma-testimonial__text {
  font-family: var(--font-serif);
  font-size  : 1.05rem;
  font-style : italic;
  color      : var(--brown-mid);
  line-height: 1.7;
  position   : relative;
}
.ma-testimonial__footer {
  margin-top : 2rem;
  padding-top: 1.5rem;
  border-top : 1px solid var(--border-c);
}
.ma-testimonial__name {
  font-family: var(--font-serif);
  font-size  : 1.125rem;
  color      : var(--brown-dark);
}
.ma-testimonial__role {
  font-size     : 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color         : var(--brown-warm);
  margin-top    : 0.2rem;
}

/* ── CTA BANNER ──────────────────────────────────────────── */
.ma-cta-banner {
  background: var(--brown-dark);
  color     : var(--cream);
  padding   : clamp(4rem, 8vw, 6rem);
  display   : grid;
  gap       : 2.5rem;
  align-items: center;
}
@media (min-width: 992px) {
  .ma-cta-banner { grid-template-columns: 1fr auto; }
}
.ma-cta-banner h2 {
  font-family  : var(--font-serif);
  font-size    : clamp(2rem, 4vw, 3rem);
  line-height  : 1.1;
  margin       : 1rem 0 0;
}
.ma-cta-banner__btns {
  display  : flex;
  flex-wrap: wrap;
  gap      : 1rem;
  align-items: center;
}
@media (min-width: 992px) {
  .ma-cta-banner__btns { justify-content: flex-end; }
}

/* ── FOOTER ──────────────────────────────────────────────── */
.ma-footer {
  background: var(--brown-dark);
  color     : var(--cream-2);
}
.ma-footer__main {
  max-width: var(--max-w);
  margin   : 0 auto;
  padding  : clamp(4rem, 8vw, 5rem) var(--px);
}
.ma-footer__logo {
  height    : 5rem;
  width     : auto;
  object-fit: contain;
  margin-bottom: 1.25rem;
  filter    : brightness(0) invert(1);
  opacity   : 0.9;
}
.ma-footer__tagline {
  font-size  : 0.875rem;
  line-height: 1.75;
  color      : var(--gold-light);
  max-width  : 26rem;
}
.ma-footer__heading {
  font-family: var(--font-serif);
  font-size  : 1.125rem;
  color      : var(--cream);
  margin-bottom: 1rem;
}
.ma-footer__nav {
  list-style: none;
  padding   : 0;
  margin    : 0;
  display   : flex;
  flex-direction: column;
  gap       : 0.5rem;
}
.ma-footer__nav a {
  font-size : 0.875rem;
  color     : var(--gold-light);
  transition: color var(--transition);
}
.ma-footer__nav a:hover { color: var(--cream); }

.ma-footer__contact {
  list-style: none;
  padding   : 0;
  margin    : 0;
  display   : flex;
  flex-direction: column;
  gap       : 0.75rem;
}
.ma-footer__contact li {
  display: flex;
  gap    : 0.75rem;
  align-items: flex-start;
  font-size  : 0.875rem;
  color      : var(--gold-light);
}
.ma-footer__contact li svg { flex-shrink: 0; margin-top: 2px; }
.ma-footer__contact a { transition: color var(--transition); }
.ma-footer__contact a:hover { color: var(--cream); }

.ma-footer__bottom {
  border-top: 1px solid var(--border-d);
}
.ma-footer__bottom-inner {
  max-width: var(--max-w);
  margin   : 0 auto;
  padding  : 1.5rem var(--px);
  display  : flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap      : 0.5rem;
  font-size: 0.75rem;
  color    : var(--brown-warm);
}

/* ── FLOATING WHATSAPP ───────────────────────────────────── */
.ma-float-wa {
  position: fixed;
  bottom  : 1.5rem;
  right   : 1.5rem;
  z-index : 500;
  display : block;
}
.ma-float-wa__ping {
  position     : absolute;
  inset        : 0;
  border-radius: 9999px;
  background   : #25D366;
  animation    : wa-ping 1.5s ease-out infinite;
  opacity      : 0.3;
}
@keyframes wa-ping {
  0%   { transform: scale(1); opacity: .4; }
  100% { transform: scale(1.7); opacity: 0; }
}
.ma-float-wa__btn {
  position     : relative;
  display      : flex;
  align-items  : center;
  gap          : 0.5rem;
  background   : #25D366;
  color        : #fff;
  padding      : 0.875rem 1.25rem;
  border-radius: 9999px;
  font-size    : 0.875rem;
  font-weight  : 500;
  box-shadow   : 0 8px 30px rgba(18,140,126,0.4);
  transition   : background var(--transition), transform var(--transition);
}
.ma-float-wa:hover .ma-float-wa__btn {
  background: #128C7E;
  transform : translateY(-2px);
}

/* ── PAGE: HERO BANNER (subpages) ────────────────────────── */
.ma-page-hero {
  position   : relative;
  overflow   : hidden;
  height     : clamp(340px, 45vh, 520px);
  display    : flex;
  align-items: flex-end;
  /* default bg – overridden per page with inline style */
  background : var(--brown-dark);
  background-size    : cover;
  background-position: center;
}
.ma-page-hero__overlay {
  position: absolute;
  inset   : 0;
  background: linear-gradient(
    to bottom,
    rgba(44,30,22,0.55) 0%,
    rgba(44,30,22,0.85) 100%
  );
}
.ma-page-hero__body {
  position  : relative;
  z-index   : 2;
  width     : 100%;
  max-width : var(--max-w);
  margin    : 0 auto;
  padding   : 0 var(--px) clamp(2.5rem, 5vw, 4rem);
}
.ma-page-hero .section-label {
  color: rgba(212,163,115,0.85);
}
.ma-page-hero .section-label::before {
  background: rgba(212,163,115,0.85);
}
.ma-page-hero h1 {
  font-family  : var(--font-serif);
  font-size    : clamp(2.25rem, 5vw, 4rem);
  color        : var(--cream);
  margin-top   : 0.75rem;
  line-height  : 1.05;
  letter-spacing: -0.01em;
}
.ma-page-hero__desc {
  font-size  : 1rem;
  color      : rgba(234,224,213,0.85);
  max-width  : 40rem;
  line-height: 1.7;
  margin-top : 0.75rem;
}

/* ── GALLERY GRID (galeri.php) ───────────────────────────── */
.ma-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.ma-gallery-item {
  position: relative;
  overflow: hidden;
  cursor  : pointer;
}
.ma-gallery-item img {
  width      : 100%; height: 280px;
  object-fit : cover;
  transition : transform 0.8s cubic-bezier(.4,0,.2,1);
  display    : block;
}
.ma-gallery-item:hover img { transform: scale(1.06); }
.ma-gallery-item__overlay {
  position  : absolute;
  inset     : 0;
  background: rgba(44,30,22,.7);
  display   : flex;
  align-items: flex-end;
  padding   : 1.5rem;
  opacity   : 0;
  transition: opacity var(--transition);
}
.ma-gallery-item:hover .ma-gallery-item__overlay { opacity: 1; }
.ma-gallery-item__title {
  font-family: var(--font-serif);
  font-size  : 1.25rem;
  color      : var(--cream);
}
.ma-gallery-item__cat {
  font-size     : 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color         : var(--gold-light);
  margin-bottom : 0.3rem;
}

/* ── CONTACT FORM ────────────────────────────────────────── */
.ma-contact-form label {
  font-size  : 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color      : var(--brown-warm);
  margin-bottom: 0.4rem;
  display    : block;
}
.ma-contact-form .form-control,
.ma-contact-form .form-select {
  border    : 1px solid var(--border-c);
  border-radius: 2px;
  background: #fff;
  color     : var(--brown-dark);
  font-family: var(--font-sans);
  padding   : 0.8rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.ma-contact-form .form-control:focus,
.ma-contact-form .form-select:focus {
  border-color: var(--gold);
  box-shadow  : 0 0 0 3px rgba(166,110,56,0.15);
  outline     : none;
}
.ma-contact-map { border: 1px solid var(--border-c); border-radius: 2px; overflow: hidden; }
.ma-contact-map iframe { display: block; }

/* ── SERVICES PAGE ───────────────────────────────────────── */
.ma-service-full-card {
  background : var(--cream-3);
  padding    : 2.5rem;
  border     : 1px solid var(--border-c);
  display    : flex;
  flex-direction: column;
  gap        : 1rem;
  transition : border-color var(--transition), background var(--transition);
}
.ma-service-full-card:hover {
  border-color: var(--gold);
  background  : #fff;
}
.ma-service-full-card__icon { color: var(--gold); }
.ma-service-full-card__name {
  font-family: var(--font-serif);
  font-size  : 1.4rem;
  color      : var(--brown-dark);
}
.ma-service-full-card__desc {
  font-size  : 0.875rem;
  color      : var(--brown-mid);
  line-height: 1.65;
}

/* ── ABOUT PAGE ──────────────────────────────────────────── */
.ma-timeline { position: relative; padding-left: 2.5rem; }
.ma-timeline::before {
  content   : '';
  position  : absolute;
  left      : 0.75rem;
  top       : 0; bottom: 0;
  width     : 2px;
  background: var(--border-c);
}
.ma-timeline-item { position: relative; margin-bottom: 2rem; }
.ma-timeline-item::before {
  content  : '';
  position : absolute;
  left     : -1.875rem;
  top      : 0.35rem;
  width    : 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold);
  border    : 2px solid var(--cream);
  box-shadow: 0 0 0 3px var(--border-c);
}
.ma-timeline-item__year {
  font-size     : 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color         : var(--gold);
}
.ma-timeline-item__title {
  font-family: var(--font-serif);
  font-size  : 1.25rem;
  color      : var(--brown-dark);
  margin     : 0.25rem 0;
}
.ma-timeline-item__text {
  font-size : 0.875rem;
  color     : var(--brown-warm);
  line-height: 1.65;
}

/* ── REVEAL ANIMATION ────────────────────────────────────── */
.reveal {
  opacity        : 0;
  transform      : translateY(30px);
  transition     : opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity  : 1;
  transform: translateY(0);
}

/* ── UTILITIES ───────────────────────────────────────────── */
.text-gold  { color: var(--gold) !important; }
.text-cream { color: var(--cream) !important; }
.bg-dark-wood { background: var(--brown-dark) !important; }
.bg-cream     { background: var(--cream)      !important; }

/* Responsive tweaks */
@media (max-width: 576px) {
  .ma-cta-banner { padding: 2.5rem 1.25rem; }
  .ma-testimonial { padding: 1.75rem; }
}

/* ¦¦ SOCIAL LINKS (footer) ¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦¦ */
.ma-footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}
.ma-footer__social a {
  color: var(--gold-light);
  transition: color var(--transition), transform var(--transition);
}
.ma-footer__social a:hover {
  color: var(--cream);
  transform: translateY(-2px);
}
.ma-footer__logo-text {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  color: var(--cream);
  margin-bottom: 1rem;
  display: block;
}