/* ═══════════════════════════════════════════
   JA PINTURAS — Shared Stylesheet v2
   Premium Painting & Renovation — Porto
   ═══════════════════════════════════════════ */

/* ── VARIABLES ── */
:root {
  --bg:      #F7F4EE;
  --bg-alt:  #EDEAE0;
  --dark:    #0D0B09;
  --dark2:   #1C1914;
  --dark3:   #2B2621;
  --white:   #FFFFFF;
  --gold:    #B8872A;
  --gold-l:  #CCA040;
  --gold-d:  #8A641C;
  --txt:     #1C1916;
  --muted:   #7A6E62;
  --border:  rgba(184,135,42,.16);
  --bdr-dk:  rgba(255,255,255,.07);
  --wa:      #25D366;
  --fd: 'Playfair Display', Georgia, serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --ease:  220ms ease;
  --ease2: 400ms ease;
  --ease3: 700ms cubic-bezier(.22,1,.36,1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body { font-family: var(--fb); color: var(--txt); background: var(--bg); line-height: 1.65; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; background: none; border: none; }
input, textarea, select { font-family: inherit; }
ul { list-style: none; }

/* ── UTILITIES ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-gold   { color: var(--gold); }
.text-center { text-align: center; }
.italic      { font-style: italic; }

/* ── LAYOUT ── */
.container    { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2.5rem; }
.container-sm { width: 100%; max-width: 900px;  margin: 0 auto; padding: 0 2.5rem; }
.section      { padding: 7rem 0; }
.section-sm   { padding: 4.5rem 0; }

/* Section flavours */
.s-dark  { background: var(--dark);  color: var(--white); }
.s-dark2 { background: var(--dark2); color: var(--white); }
.s-cream { background: var(--bg-alt); }
.s-white { background: var(--white); }

/* ── SECTION TYPOGRAPHY ── */
.s-label {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem;
}
.s-label::before { content: ''; width: 24px; height: 1px; background: var(--gold); flex-shrink: 0; }
.s-dark  .s-label::before,
.s-dark2 .s-label::before { background: var(--gold); }

.s-title {
  font-family: var(--fd);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -.025em;
  color: var(--txt);
}
.s-dark  .s-title,
.s-dark2 .s-title { color: var(--white); }

.s-title-xl {
  font-family: var(--fd);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700; line-height: 1.05; letter-spacing: -.03em;
}
.s-body {
  font-size: 1.05rem; color: var(--muted); line-height: 1.85; margin-top: 1.25rem; max-width: 600px;
}
.s-dark  .s-body,
.s-dark2 .s-body { color: rgba(255,255,255,.55); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 2rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  border: 1px solid transparent; cursor: pointer; transition: all var(--ease);
}
.btn svg { width: 15px; height: 15px; }
.btn-dark    { background: var(--dark); color: var(--white); border-color: var(--dark); }
.btn-dark:hover { background: #2a2520; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.btn-white   { background: var(--white); color: var(--dark); border-color: var(--white); }
.btn-white:hover { background: var(--bg); transform: translateY(-1px); }
.btn-gold    { background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn-gold:hover  { background: var(--gold-l); border-color: var(--gold-l); transform: translateY(-1px); box-shadow: 0 6px 24px rgba(184,135,42,.35); }
.btn-ol-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.45); }
.btn-ol-white:hover { background: rgba(255,255,255,.08); border-color: var(--white); transform: translateY(-1px); }
.btn-ol-dark  { background: transparent; color: var(--dark); border-color: rgba(0,0,0,.35); }
.btn-ol-dark:hover  { background: var(--dark); color: var(--white); }
.btn-wa  { background: var(--wa); color: var(--white); border-color: var(--wa); }
.btn-wa:hover  { background: #22c55e; transform: translateY(-1px); box-shadow: 0 6px 24px rgba(37,211,102,.35); }

/* ── NAVBAR ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.5rem 0;
  transition: padding var(--ease2), background var(--ease2), box-shadow var(--ease2);
}
#nav.scrolled {
  background: rgba(13,11,9,.97);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: .875rem 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.nav-logo { font-family: var(--fd); font-size: 1.5rem; font-weight: 700; color: var(--white); letter-spacing: -.01em; flex-shrink: 0; }
.nav-logo .dot { color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.nav-links a {
  color: rgba(255,255,255,.6); font-size: .7rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  transition: color var(--ease); position: relative; padding-bottom: 2px;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--ease2);
}
.nav-links a:hover, .nav-links a.active { color: var(--white); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.nav-cta { display: none; }

/* Language selector */
.lang-sel { display: flex; align-items: center; gap: .2rem; }
.lang-btn {
  background: none; border: 1px solid transparent;
  padding: .2rem .45rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; color: rgba(255,255,255,.45);
  cursor: pointer; transition: all var(--ease);
  display: flex; align-items: center; gap: .25rem;
}
.lang-btn .f { font-size: .95rem; line-height: 1; }
.lang-btn:hover, .lang-btn.active { color: var(--white); border-color: rgba(184,135,42,.4); background: rgba(184,135,42,.1); }

/* Nav toggle */
.nav-tog { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.nav-tog span { display: block; width: 22px; height: 1.5px; background: var(--white); transition: all var(--ease); border-radius: 1px; }
.nav-tog.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-tog.open span:nth-child(2) { opacity: 0; }
.nav-tog.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── MOBILE MENU ── */
.mob-menu {
  display: none; position: fixed; inset: 0; z-index: 1001;
  background: var(--dark); flex-direction: column;
  align-items: center; justify-content: center; gap: 2rem; padding: 5rem 2rem 2rem;
  overflow-y: auto;
}
.mob-menu.open { display: flex; }
.mob-close { position: absolute; top: 1.25rem; right: 1.5rem; font-size: 2rem; color: var(--white); opacity: .6; transition: opacity var(--ease); padding: .5rem; line-height: 1; z-index: 1; }
.mob-close:hover { opacity: 1; }
.mob-links { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.mob-links a {
  font-family: var(--fd); font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 600; color: rgba(255,255,255,.6); transition: color var(--ease);
}
.mob-links a:hover { color: var(--white); }
.mob-lang { display: flex; gap: .625rem; }
.mob-cta { margin-top: .5rem; }

/* ── HOME HERO ── */
.home-hero {
  position: relative; min-height: 100dvh;
  display: flex; align-items: center; overflow: hidden;
  background-color: var(--dark);
  background-size: cover; background-position: center;
}
.home-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 1s ease;
}
.home-hero-video.loaded { opacity: .35; }
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(184,135,42,.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 5%  25%,  rgba(184,135,42,.06) 0%, transparent 50%),
    rgba(13,11,9,.48);
  animation: heroBG 18s ease-in-out infinite alternate;
}
@keyframes heroBG {
  to {
    background:
      radial-gradient(ellipse 90% 60% at 50% -10%, rgba(184,135,42,.12) 0%, transparent 55%),
      radial-gradient(ellipse 50% 50% at 95% 75%, rgba(184,135,42,.08) 0%, transparent 50%),
      rgba(13,11,9,.48);
  }
}
.hero-grid {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0px, rgba(255,255,255,.022) 1px, transparent 1px, transparent 80px);
  pointer-events: none;
}
.hero-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.hero-grain::after {
  content: ''; position: absolute; inset: -50%; width: 200%; height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
  opacity: .046; animation: grain .45s steps(2) infinite;
}
@keyframes grain {
  0%  { transform: translate(0,0); }
  25% { transform: translate(-2%,-3%); }
  50% { transform: translate(3%,2%); }
  75% { transform: translate(-1%,4%); }
}
.hero-content { position: relative; z-index: 2; width: 100%; padding-top: 10rem; padding-bottom: 7rem; }
.hero-eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 2rem;
  animation: hfu .8s ease both;
}
.hero-h1 { font-family: var(--fd); color: var(--white); line-height: 1.0; letter-spacing: -.04em; margin-bottom: 2rem; }
.hero-l1 { display: block; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 600; font-style: normal; color: rgba(255,255,255,.6); animation: hfu .8s .12s ease both; }
.hero-l2 { display: block; font-size: clamp(3.2rem, 7.5vw, 6.8rem); font-weight: 900; animation: hfu .8s .22s ease both; }
.hero-l3 { display: block; font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 600; color: var(--gold); animation: hfu .8s .32s ease both; }
.hero-sub {
  font-size: clamp(.95rem, 1.6vw, 1.15rem); color: rgba(255,255,255,.5);
  max-width: 500px; line-height: 1.8; margin-bottom: 2.5rem;
  animation: hfu .8s .44s ease both;
}
.hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; animation: hfu .8s .56s ease both; }
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: rgba(255,255,255,.3); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  z-index: 2; animation: hfu .8s .8s ease both;
}
.hero-scroll-line { width: 1px; height: 38px; background: linear-gradient(to bottom, rgba(184,135,42,.7), transparent); animation: scl 2.5s ease-in-out infinite; }
@keyframes scl    { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes hfu    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }

/* ── PAGE HERO (sub-pages) ── */
.page-hero {
  background-color: var(--dark);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 12rem 0 5.5rem;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, rgba(13,11,9,.55) 0%, rgba(28,25,20,.50) 100%);
}
.page-hero > .container { position: relative; z-index: 1; }
.page-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 110%, rgba(184,135,42,.08) 0%, transparent 55%);
}
.page-hero-bc {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 1.75rem;
  display: flex; align-items: center; gap: .625rem;
}
.page-hero-bc a { color: rgba(255,255,255,.35); transition: color var(--ease); }
.page-hero-bc a:hover { color: var(--gold); }
.page-hero-bc .sep { color: var(--gold); opacity: .6; }
.page-hero h1 {
  font-family: var(--fd); font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 700; letter-spacing: -.04em; color: var(--white); line-height: 1.02;
}
.page-hero-sub { margin-top: 1.25rem; font-size: 1.05rem; color: rgba(255,255,255,.5); max-width: 540px; line-height: 1.8; }

/* ── LOGO IMAGE ── */
.nav-logo { display: flex; align-items: center; }
.nav-logo-img { height: 84px; width: auto; display: block; object-fit: contain; }
.footer-logo-img { height: 72px; width: auto; display: block; object-fit: contain; margin-bottom: .875rem; }

/* ── REVEAL ANIMATIONS ── */
[data-r] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
[data-r].on { opacity: 1; transform: none; }
[data-r][data-d="1"] { transition-delay: .1s; }
[data-r][data-d="2"] { transition-delay: .2s; }
[data-r][data-d="3"] { transition-delay: .3s; }
[data-r][data-d="4"] { transition-delay: .4s; }
[data-r][data-d="5"] { transition-delay: .5s; }

/* ── STAT BAR ── */
.stat-bar { border-top: 1px solid var(--bdr-dk); border-bottom: 1px solid var(--bdr-dk); padding: 3.5rem 0; }
.stat-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; text-align: center; }
.stat-grid > div { flex: 0 0 clamp(180px, 28%, 260px); }
.stat-val { font-family: var(--fd); font-size: clamp(2.5rem,4vw,3.8rem); font-weight: 700; color: var(--gold); line-height: 1; }
.stat-key { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-top: .5rem; }

/* ── FEATURED PROJECTS (Home) ── */
.feat-grid { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto auto; gap: 1.25rem; }
.feat-item { position: relative; overflow: hidden; cursor: pointer; }
.feat-item.large { grid-row: span 2; }
.feat-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease3); }
.feat-item.large .feat-img { min-height: 620px; }
.feat-item:not(.large) .feat-img { min-height: 290px; }
.feat-item:hover .feat-img { transform: scale(1.05); }
.feat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,11,9,.92) 0%, rgba(13,11,9,.2) 45%, transparent 70%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem;
}
.feat-cat { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .5rem; }
.feat-name { font-family: var(--fd); font-size: clamp(1.2rem,1.8vw,1.6rem); font-weight: 600; color: var(--white); line-height: 1.2; }
.feat-loc { font-size: .8rem; color: rgba(255,255,255,.5); margin-top: .375rem; }
.feat-arrow {
  position: absolute; bottom: 2rem; right: 2rem;
  width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--white); opacity: 0; transform: translateX(-8px);
  transition: all var(--ease2);
}
.feat-item:hover .feat-arrow { opacity: 1; transform: translateX(0); }
.feat-arrow svg { width: 18px; height: 18px; }

/* ── MANIFESTO ── */
.manifesto { padding: 8rem 0; background: var(--dark2); }
.manifesto-quote {
  font-family: var(--fd);
  font-size: clamp(2rem,5vw,4rem);
  font-weight: 400; font-style: italic;
  color: var(--white); line-height: 1.18; letter-spacing: -.02em;
  max-width: 900px;
}
.manifesto-quote em { color: var(--gold); font-style: normal; font-weight: 700; }
.manifesto-divider { width: 40px; height: 1px; background: var(--gold); margin: 2.5rem 0; }
.manifesto-body { font-size: 1.05rem; color: rgba(255,255,255,.55); line-height: 1.85; max-width: 640px; }
.manifesto-feats { display: flex; gap: 3rem; margin-top: 3rem; flex-wrap: wrap; }
.mfeat { display: flex; align-items: center; gap: .875rem; }
.mfeat-arrow { font-size: 1.2rem; color: var(--gold); font-family: var(--fd); }
.mfeat-text { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }

/* ── SERVICES OVERVIEW (Home) ── */
.svc-ov-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(0,0,0,.08); margin-top: 3.5rem; }
.svc-ov-item {
  background: var(--white); padding: 2rem 1.75rem;
  display: flex; align-items: flex-start; gap: 1rem;
  transition: all var(--ease2); cursor: default; position: relative; overflow: hidden;
}
.svc-ov-item::after {
  content: ''; position: absolute; inset: 0;
  background: var(--dark); transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--ease2); z-index: 0;
}
.svc-ov-item:hover::after { transform: scaleY(1); }
.svc-ov-item > * { position: relative; z-index: 1; transition: color var(--ease2); }
.svc-ov-num {
  font-family: var(--fd); font-size: 1.8rem; font-weight: 700; color: rgba(0,0,0,.1);
  line-height: 1; flex-shrink: 0; min-width: 2.2rem;
  transition: color var(--ease2);
}
.svc-ov-item:hover .svc-ov-num { color: rgba(255,255,255,.12); }
.svc-ov-info {}
.svc-ov-name { font-family: var(--fd); font-size: 1.05rem; font-weight: 600; color: var(--dark); margin-bottom: .35rem; transition: color var(--ease2); }
.svc-ov-item:hover .svc-ov-name { color: var(--white); }
.svc-ov-desc { font-size: .82rem; color: var(--muted); line-height: 1.6; transition: color var(--ease2); }
.svc-ov-item:hover .svc-ov-desc { color: rgba(255,255,255,.55); }

/* ── SERVICES PAGE ── */
.svc-page-item { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; }
.svc-page-item + .svc-page-item { border-top: 1px solid rgba(0,0,0,.07); }
.svc-page-item:nth-child(even) .svc-pi { order: 2; }
.svc-page-item:nth-child(even) .svc-pc { order: 1; }
.svc-pi { position: relative; overflow: hidden; min-height: 360px; }
.svc-pi img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease3); }
.svc-page-item:hover .svc-pi img { transform: scale(1.04); }
.svc-pc { padding: 4rem 3.5rem; display: flex; flex-direction: column; justify-content: center; background: var(--white); }
.svc-pc-num { font-family: var(--fd); font-size: 5.5rem; font-weight: 700; color: rgba(0,0,0,.04); line-height: 1; letter-spacing: -.05em; margin-bottom: -.25rem; }
.svc-pc-name { font-family: var(--fd); font-size: clamp(1.5rem,2.5vw,2.1rem); font-weight: 700; color: var(--dark); letter-spacing: -.02em; margin-bottom: 1rem; }
.svc-pc-desc { font-size: .95rem; color: var(--muted); line-height: 1.85; margin-bottom: 1.75rem; }
.svc-pc-benefits { margin-bottom: 2rem; display: flex; flex-direction: column; gap: .5rem; }
.svc-pc-benefits li { display: flex; align-items: center; gap: .625rem; font-size: .875rem; font-weight: 500; color: var(--txt); }
.svc-pc-benefits li::before { content: ''; width: 18px; height: 1px; background: var(--gold); flex-shrink: 0; }

/* ── PORTFOLIO ── */
.pf-filter { display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: 3rem; }
.pf-filter-btn {
  padding: .5rem 1.25rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.15); cursor: pointer;
  transition: all var(--ease); background: transparent; color: var(--muted);
}
.pf-filter-btn:hover, .pf-filter-btn.active { background: var(--dark); color: var(--white); border-color: var(--dark); }
.pf-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.pf-item { position: relative; overflow: hidden; cursor: pointer; }
.pf-item.hidden { display: none; }
.pf-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .8s var(--ease3); }
.pf-item:hover .pf-img { transform: scale(1.06); }
.pf-ov {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,11,9,.9) 0%, rgba(13,11,9,.1) 50%, transparent 70%);
  opacity: 0; transition: opacity var(--ease2);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem;
}
.pf-item:hover .pf-ov { opacity: 1; }
.pf-ov-name { font-family: var(--fd); font-size: 1.1rem; font-weight: 600; color: var(--white); }
.pf-ov-meta { font-size: .78rem; color: rgba(255,255,255,.55); margin-top: .25rem; display: flex; gap: 1rem; }
.pf-badge {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--dark); color: var(--white);
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .25rem .75rem; z-index: 1;
  border-left: 2px solid var(--gold);
}

/* ── BEFORE / AFTER ── */
.ba-wrap {
  position: relative; overflow: hidden; user-select: none;
  --split: 50%; cursor: col-resize;
}
.ba-ph { aspect-ratio: 21/9; min-height: 400px; }
.ba-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: .45rem .875rem; background: rgba(0,0,0,.65); color: white;
  position: absolute; top: 1.25rem; z-index: 3;
}
.ba-label-b { left: 1.5rem; }
.ba-label-a { right: 1.5rem; }
.ba-before, .ba-after { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ba-after { clip-path: inset(0 0 0 var(--split)); }
.ba-line { position: absolute; top: 0; left: var(--split); transform: translateX(-50%); width: 2px; height: 100%; background: white; z-index: 3; pointer-events: none; }
.ba-btn {
  position: absolute; top: 50%; left: var(--split); transform: translate(-50%,-50%);
  width: 50px; height: 50px; background: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  z-index: 4; box-shadow: 0 2px 20px rgba(0,0,0,.4); pointer-events: none;
}
.ba-btn svg { width: 22px; height: 22px; color: var(--dark); }
.ba-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: col-resize; z-index: 5; -webkit-appearance: none; appearance: none; }

/* ── TESTIMONIALS ── */
.tst-overview { display: flex; align-items: center; gap: 2rem; padding: 2.5rem; background: var(--white); border: 1px solid var(--border); margin-bottom: 3rem; }
.tst-ov-score { font-family: var(--fd); font-size: 4.5rem; font-weight: 700; color: var(--gold); line-height: 1; }
.tst-ov-stars { display: flex; gap: 3px; }
.tst-ov-stars svg { width: 20px; height: 20px; fill: var(--gold); }
.tst-ov-text { font-size: .875rem; color: var(--muted); margin-top: .3rem; }
.tst-divider { width: 1px; height: 60px; background: var(--border); }
.tst-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.tst-card { background: var(--white); border: 1px solid rgba(0,0,0,.07); padding: 2rem; transition: all var(--ease2); }
.tst-card:hover { border-color: var(--border); box-shadow: 0 14px 44px rgba(0,0,0,.07); transform: translateY(-3px); }
.tst-stars { display: flex; gap: 2px; margin-bottom: 1.25rem; }
.tst-stars svg { width: 14px; height: 14px; fill: var(--gold); }
.tst-text { font-size: .9rem; color: var(--muted); line-height: 1.85; font-style: italic; margin-bottom: 1.5rem; }
.tst-author { display: flex; align-items: center; gap: .875rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.06); }
.tst-av { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--gold); flex-shrink: 0; border: 1px solid var(--border); }
.tst-name { font-weight: 600; font-size: .875rem; color: var(--dark); }
.tst-meta { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.tst-svc { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); background: rgba(184,135,42,.1); padding: .2rem .625rem; display: inline-block; margin-top: .3rem; }

/* ── ABOUT ── */
.about-vals { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 4rem; }
.val-card { padding: 2rem 1.75rem; border: 1px solid var(--bdr-dk); transition: border-color var(--ease2); }
.val-card:hover { border-color: rgba(184,135,42,.4); }
.val-num { font-family: var(--fd); font-size: 3rem; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: .75rem; }
.val-name { font-family: var(--fd); font-size: 1.1rem; font-weight: 600; color: var(--white); margin-bottom: .625rem; }
.val-desc { font-size: .85rem; color: rgba(255,255,255,.5); line-height: 1.7; }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.process-step { padding: 2.5rem 2rem; border-right: 1px solid rgba(0,0,0,.08); position: relative; }
.process-step:last-child { border-right: none; }
.ps-num { font-family: var(--fd); font-size: 4rem; font-weight: 700; color: rgba(0,0,0,.05); line-height: 1; margin-bottom: .5rem; }
.ps-name { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: .625rem; }
.ps-desc { font-size: .875rem; color: var(--muted); line-height: 1.7; }
.ps-line { width: 24px; height: 2px; background: var(--gold); margin-bottom: 1.25rem; }

/* ── AREAS MAP ── */
.areas-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: start; }
.area-map-wrap svg { width: 100%; height: auto; }
.area-zone-path { cursor: pointer; transition: opacity var(--ease); }
.area-zone-path:hover { opacity: .85; }
.area-zones-list { display: flex; flex-direction: column; gap: .625rem; margin-top: 1.75rem; }
.az-tag {
  display: flex; align-items: center; gap: .875rem;
  padding: 1rem 1.25rem; background: var(--white);
  border: 1px solid rgba(0,0,0,.08); cursor: pointer; transition: all var(--ease);
  font-size: .9rem; font-weight: 500; color: var(--txt);
}
.az-tag:hover, .az-tag.active { border-color: var(--gold); background: rgba(184,135,42,.05); }
.az-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
.az-tag .name { flex: 1; }
.az-tag .km { font-size: .78rem; color: var(--muted); }
.area-note { margin-top: 1rem; padding: 1rem 1.25rem; background: rgba(184,135,42,.08); border-left: 2px solid var(--gold); font-size: .875rem; color: var(--muted); line-height: 1.6; }

/* ── CONTACT ── */
.contact-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: start; }
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--txt); margin-bottom: .625rem; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: .875rem 1rem;
  font-size: .9rem; font-family: var(--fb); color: var(--txt);
  background: var(--white); border: 1px solid rgba(0,0,0,.14);
  transition: border-color var(--ease); -webkit-appearance: none; appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gold); }
.form-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 6L0 0h10z' fill='%237A6E62'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.form-success {
  display: none; padding: 1.5rem; margin-top: 1rem;
  background: rgba(37,211,102,.08); border: 1px solid rgba(37,211,102,.3);
  color: #155a2e; font-size: .9rem; font-weight: 500;
}
.ci-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.ci-item:last-child { border-bottom: none; }
.ci-icon { width: 42px; height: 42px; background: rgba(184,135,42,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ci-icon svg { width: 18px; height: 18px; color: var(--gold); }
.ci-lbl { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
.ci-val { font-size: .95rem; font-weight: 500; color: var(--dark); }
.ci-val a { color: var(--dark); transition: color var(--ease); }
.ci-val a:hover { color: var(--gold); }
.map-box { border: 1px solid rgba(0,0,0,.1); overflow: hidden; margin-top: 2rem; }
.map-box iframe { width: 100%; height: 320px; border: none; display: block; filter: grayscale(.35) contrast(1.05); }
.wa-cta-box { background: var(--wa); padding: 1.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; flex-wrap: wrap; }
.wa-cta-txt .title { font-family: var(--fd); font-size: 1.1rem; font-weight: 600; color: var(--white); }
.wa-cta-txt .sub { font-size: .82rem; color: rgba(255,255,255,.8); margin-top: .2rem; }

/* ── FOOTER ── */
footer { background: var(--dark); color: rgba(255,255,255,.45); padding: 5.5rem 0 2.5rem; border-top: 1px solid rgba(255,255,255,.05); }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.5fr; gap: 3.5rem; margin-bottom: 4.5rem; }
.footer-logo { font-family: var(--fd); font-size: 1.6rem; font-weight: 700; color: var(--white); margin-bottom: .875rem; }
.footer-logo .dot { color: var(--gold); }
.footer-tagline { font-size: .875rem; line-height: 1.75; margin-bottom: 1.75rem; color: rgba(255,255,255,.4); }
.footer-social { display: flex; gap: .5rem; }
.footer-social a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); transition: all var(--ease); }
.footer-social a:hover { border-color: var(--gold); color: var(--gold); background: rgba(184,135,42,.1); }
.footer-social svg { width: 15px; height: 15px; }
.fh { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.9); margin-bottom: 1.5rem; }
.flist { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.flist a { font-size: .875rem; color: rgba(255,255,255,.4); transition: color var(--ease); }
.flist a:hover { color: var(--gold); }
.fci { display: flex; gap: .75rem; font-size: .875rem; margin-bottom: 1rem; }
.fci svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; margin-top: 2px; }
.fci a { color: rgba(255,255,255,.4); transition: color var(--ease); }
.fci a:hover { color: var(--white); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.06); padding-top: 2rem; padding-bottom: 1rem; padding-right: 5.5rem; display: flex; align-items: center; justify-content: space-between; font-size: .78rem; flex-wrap: wrap; gap: .75rem; }
.footer-credit { color: rgba(255,255,255,.35); text-decoration: none; transition: color var(--ease); }
.footer-credit:hover { color: var(--gold); }

/* ── WA FLOAT ── */
.wa-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.wa-bubble { background: var(--dark); color: var(--white); padding: .5rem 1rem; font-size: .8rem; font-weight: 500; white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,.2); opacity: 0; animation: wabub 7s ease-in-out infinite 4s; }
@keyframes wabub { 0%,100%{opacity:0} 15%,85%{opacity:1} }
.wa-btn { width: 58px; height: 58px; background: var(--wa); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,.4); transition: all var(--ease); animation: wap 4s ease-in-out infinite; }
.wa-btn:hover { transform: scale(1.1); box-shadow: 0 8px 30px rgba(37,211,102,.55); }
.wa-btn svg { width: 30px; height: 30px; fill: white; }
@keyframes wap { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.4)} 50%{box-shadow:0 4px 32px rgba(37,211,102,.65),0 0 0 9px rgba(37,211,102,.08)} }

/* ── FINAL CTA ── */
.final-cta { background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 60%, #1F1A10 100%); padding: 7rem 0; text-align: center; position: relative; overflow: hidden; }
.final-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(184,135,42,.1) 0%, transparent 70%); pointer-events: none; }
.final-cta-inner { position: relative; z-index: 1; }
.final-cta-title { font-family: var(--fd); font-size: clamp(2rem,5vw,3.5rem); font-weight: 700; color: var(--white); letter-spacing: -.025em; line-height: 1.12; max-width: 700px; margin: 0 auto 1rem; }
.final-cta-sub { color: rgba(255,255,255,.5); max-width: 500px; margin: 0 auto 2.5rem; font-size: .95rem; line-height: 1.75; }
.final-cta-btns { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ── RESPONSIVE ── */
@media (max-width:1100px) {
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .feat-item.large { grid-row: span 1; }
  .feat-item.large .feat-img { min-height: 380px; }
  .svc-page-item { grid-template-columns: 1fr; min-height: auto; }
  .svc-page-item:nth-child(even) .svc-pi,
  .svc-page-item:nth-child(even) .svc-pc { order: unset; }
  .svc-pi { min-height: 300px; }
  .pf-grid { grid-template-columns: repeat(2,1fr); }
  .tst-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .stat-grid > div { flex: 0 0 clamp(160px, 40%, 240px); }
  .about-vals { grid-template-columns: repeat(2,1fr); }
  .process-grid { grid-template-columns: repeat(2,1fr); }
  .process-step { border-right: none; border-bottom: 1px solid rgba(0,0,0,.08); }
  .process-step:nth-child(2n) { border-right: none; }
  .areas-grid, .contact-layout { grid-template-columns: 1fr; gap: 3.5rem; }
}
@media (max-width:768px) {
  .section { padding: 5rem 0; }
  .section-sm { padding: 3.5rem 0; }
  .hero-content { padding-top: 7rem; padding-bottom: 5rem; }
  .manifesto { padding: 5rem 0; }
  .nav-links, .nav-cta { display: none; }
  .nav-tog { display: flex; }
  .svc-ov-grid { grid-template-columns: 1fr; }
  .pf-grid { grid-template-columns: 1fr; }
  .tst-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; padding-right: 0; }
  .feat-grid { grid-template-columns: 1fr; }
  .ba-ph { aspect-ratio: 4/3; min-height: unset; }
  .form-row { grid-template-columns: 1fr; gap: 1.25rem; }
  .svc-pc { padding: 2.5rem 1.75rem; }
  .manifesto-feats { gap: 1.5rem; flex-direction: column; }
  .about-vals { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .tst-overview { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .tst-divider { display: none; }
  .wa-cta-box { flex-direction: column; align-items: flex-start; }
}
@media (max-width:480px) {
  .container, .container-sm { padding: 0 1rem; }
  .section { padding: 3.5rem 0; }
  .section-sm { padding: 2.5rem 0; }
  .hero-content { padding-top: 6rem; padding-bottom: 4rem; }
  .page-hero { padding: 8rem 0 3.5rem; }
  .stat-grid > div { flex: 0 0 100%; }
  .hero-ctas { flex-direction: column; align-items: flex-start; }
  .nav-logo-img { height: 60px; }
  .about-story-badge { position: static; display: inline-block; margin-top: 1rem; }
  .pf-filter-bar { gap: .25rem; }
  .pf-filter-btn { padding: .4rem .875rem; font-size: .68rem; }
  .final-cta-btns { flex-direction: column; align-items: center; }
  .btn { padding: .8rem 1.5rem; }
  .svc-card-body { padding: 1.5rem 1.25rem 2rem; }
  .team-grid-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  [data-r] { opacity:1; transform:none; }
}

/* ══════════════════════════════════════
   ADDITIONAL PAGE COMPONENTS
   ══════════════════════════════════════ */

/* ── BREADCRUMB ── */
.breadcrumb { margin-bottom: 2rem; }
.breadcrumb ol { display: flex; align-items: center; gap: .5rem; list-style: none; flex-wrap: wrap; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.breadcrumb li + li::before { content: '→'; color: var(--gold); opacity: .6; }
.breadcrumb li a { color: rgba(255,255,255,.35); transition: color var(--ease); }
.breadcrumb li a:hover { color: var(--gold); }

/* ── PAGE HERO INNER ── */
.ph-inner { max-width: 720px; }
.ph-title { font-family: var(--fd); font-size: clamp(2.5rem, 7vw, 5.5rem); font-weight: 700; letter-spacing: -.04em; color: var(--white); line-height: 1.02; margin-bottom: 1.25rem; }
.ph-sub { font-size: 1.05rem; color: rgba(255,255,255,.5); line-height: 1.8; max-width: 540px; }

/* ── SECTION HEADER (centered) ── */
.s-hdr { text-align: center; max-width: 680px; margin: 0 auto 4rem; }

/* ── ABOUT STORY ── */
.about-story { display: grid; grid-template-columns: .9fr 1fr; gap: 6rem; align-items: start; }
.about-story-img { position: relative; }
.about-story-img img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.about-story-badge {
  position: absolute; bottom: -1.5rem; right: -1.5rem;
  background: var(--gold); color: var(--white);
  padding: 1.5rem 2rem; text-align: center;
}
.asb-val { display: block; font-family: var(--fd); font-size: 3rem; font-weight: 700; line-height: 1; }
.asb-key { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: .375rem; opacity: .85; }
.about-story-text { padding-top: 1rem; }
.about-story-sigs { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(0,0,0,.1); }
.about-sig { display: inline-block; }
.sig-line { width: 60px; height: 1px; background: var(--gold); margin-bottom: .75rem; }
.sig-name { font-family: var(--fd); font-size: 1.2rem; font-weight: 600; color: var(--dark); display: block; }
.sig-role { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; display: block; }

/* ── VALUES GRID ── */
.values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.05); margin-top: 4rem; }
.val-card { background: var(--dark3); padding: 2.5rem 2rem; border: 1px solid rgba(255,255,255,.05); transition: border-color var(--ease2); }
.val-card:hover { border-color: rgba(184,135,42,.35); }
.val-icon { width: 48px; height: 48px; border: 1px solid rgba(184,135,42,.3); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; }
.val-icon svg { width: 22px; height: 22px; color: var(--gold); }
.val-name { font-family: var(--fd); font-size: 1.15rem; font-weight: 600; color: var(--white); margin-bottom: .625rem; }
.val-desc { font-size: .85rem; color: rgba(255,255,255,.45); line-height: 1.75; }

/* ── PROCESS STEPS ── */
.process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; position: relative; margin-top: 3.5rem; }
.proc-step { padding: 2.5rem 2rem; border-right: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; }
.proc-step:last-child { border-right: none; }
.proc-num { font-family: var(--fd); font-size: 5rem; font-weight: 700; color: rgba(0,0,0,.05); line-height: 1; margin-bottom: .5rem; }
.proc-content { flex: 1; }
.proc-name { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: .75rem; }
.proc-desc { font-size: .875rem; color: var(--muted); line-height: 1.75; }
.proc-arrow { font-size: 1.5rem; color: var(--gold); margin-top: 1.5rem; font-family: var(--fd); }

/* ── TEAM ── */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-top: 3.5rem; }
.team-grid-2 { grid-template-columns: repeat(2,1fr); max-width: 780px; margin-left: auto; margin-right: auto; }
.team-card { background: var(--white); border: 1px solid rgba(0,0,0,.07); overflow: hidden; transition: box-shadow var(--ease2), transform var(--ease2); }
.team-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,.1); transform: translateY(-4px); }
.team-img-wrap { aspect-ratio: 1; overflow: hidden; }
.team-img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease3); }
.team-card:hover .team-img { transform: scale(1.05); }
.team-info { padding: 1.5rem; }
.team-name { font-family: var(--fd); font-size: 1.1rem; font-weight: 700; color: var(--dark); margin-bottom: .25rem; }
.team-role { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .75rem; }
.team-bio { font-size: .85rem; color: var(--muted); line-height: 1.7; margin-bottom: 1.25rem; }
.team-wa-btn { display: inline-flex; align-items: center; gap: .5rem; background: #25D366; color: #fff; font-size: .8rem; font-weight: 600; padding: .55rem 1rem; border-radius: 2rem; text-decoration: none; transition: background var(--ease), transform var(--ease); }
.team-wa-btn:hover { background: #1ebe5d; transform: translateY(-1px); }
.team-wa-btn svg { width: 16px; height: 16px; fill: #fff; flex-shrink: 0; }

/* ── SERVICES PAGE (new classes) ── */
.svc-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.svc-card { background: var(--white); border: 1px solid rgba(0,0,0,.07); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow var(--ease2), transform var(--ease2); }
.svc-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,.1); transform: translateY(-3px); }
.svc-card-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
.svc-card-wide .svc-card-img { aspect-ratio: unset; }
.svc-card-wide .svc-card-img img { height: 100%; }
.svc-card-img { overflow: hidden; aspect-ratio: 16/10; }
.svc-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease3); }
.svc-card:hover .svc-card-img img { transform: scale(1.05); }
.svc-card-body { padding: 2.25rem 2rem 2.5rem; display: flex; flex-direction: column; flex: 1; }
.svc-num-badge { font-family: var(--fd); font-size: 4rem; font-weight: 700; color: rgba(0,0,0,.05); line-height: 1; margin-bottom: -.25rem; }
.svc-card-title { font-family: var(--fd); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 700; color: var(--dark); letter-spacing: -.02em; margin-bottom: .75rem; }
.svc-card-desc { font-size: .95rem; color: var(--muted); line-height: 1.8; margin-bottom: 1.5rem; }
.svc-benefits { list-style: none; margin-bottom: 2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.svc-benefits li { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: var(--txt); line-height: 1.5; }
.svc-benefits li svg { width: 15px; height: 15px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }

/* ── PORTFOLIO PAGE (new classes) ── */
.pf-filter-bar { display: flex; gap: .375rem; flex-wrap: wrap; margin-bottom: 3rem; }
.pf-img-wrap { position: relative; overflow: hidden; aspect-ratio: 16/9; }
.pf-tall .pf-img-wrap { aspect-ratio: 16/9; }
.pf-wide .pf-img-wrap { aspect-ratio: 16/9; }
.pf-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease3); }
.pf-item:hover .pf-img { transform: scale(1.06); }
.pf-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(13,11,9,.9) 0%, rgba(13,11,9,.1) 50%, transparent 70%);
  opacity: 0; transition: opacity var(--ease2);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem;
}
.pf-item:hover .pf-overlay { opacity: 1; }
.pf-cat { font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .375rem; }
.pf-name { font-family: var(--fd); font-size: 1.05rem; font-weight: 600; color: var(--white); }
.pf-loc { font-size: .78rem; color: rgba(255,255,255,.5); margin-top: .2rem; }

/* ── FOUNDER INTRO ── */
.founder-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; }
.founder-text { padding: 3.5rem 4rem; display: flex; flex-direction: column; justify-content: center; background: var(--bg); }
.founder-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .75rem; }
.founder-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--gold); }
.founder-name { font-family: var(--fd); font-size: clamp(1.6rem, 2.2vw, 2.2rem); font-weight: 700; color: var(--dark); margin-bottom: .3rem; letter-spacing: -.02em; }
.founder-role { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.75rem; }
.founder-body { display: flex; flex-direction: column; gap: .875rem; }
.founder-body p { font-size: .95rem; color: var(--txt); line-height: 1.8; }
.founder-body p em { font-style: normal; color: var(--dark); font-weight: 600; }
.founder-sig { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid rgba(0,0,0,.09); }
.founder-sig-line { width: 48px; height: 1px; background: var(--gold); margin-bottom: .625rem; }
.founder-sig-name { font-family: var(--fd); font-size: 1.05rem; font-weight: 600; color: var(--dark); display: block; }
.founder-sig-title { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; display: block; }
.founder-photo { position: relative; overflow: hidden; background: #c9c3b9; }
.founder-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; display: block; position: absolute; inset: 0; }

/* ── AREAS PAGE ── */
.areas-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.areas-map-wrap { position: relative; }
.areas-map { border: 1px solid rgba(0,0,0,.08); overflow: hidden; background: var(--bg); }
.areas-map svg { width: 100%; height: auto; display: block; }
.areas-zones { display: flex; flex-direction: column; gap: 1rem; }
.zone-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; border: 1px solid rgba(0,0,0,.08); transition: all var(--ease2); background: var(--white); }
.zone-card:hover, .zone-primary { border-color: var(--gold); background: rgba(184,135,42,.04); }
.zone-icon { width: 38px; height: 38px; background: rgba(184,135,42,.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.zone-icon svg { width: 18px; height: 18px; color: var(--gold); }
.zone-info { flex: 1; }
.zone-name { font-family: var(--fd); font-size: 1rem; font-weight: 700; color: var(--dark); margin-bottom: .35rem; }
.zone-desc { font-size: .82rem; color: var(--muted); line-height: 1.6; margin-bottom: .625rem; }
.zone-parishes { display: flex; flex-wrap: wrap; gap: .375rem; }
.zone-parishes span { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: .2rem .6rem; background: rgba(0,0,0,.05); color: var(--muted); }
.coverage-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.05); margin-top: 3.5rem; }
.cov-item { background: var(--dark3); padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem; font-size: .875rem; color: rgba(255,255,255,.6); transition: all var(--ease); }
.cov-item:hover { background: rgba(184,135,42,.1); color: var(--white); }
.cov-item svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }
.gmap-wrap { overflow: hidden; border-top: 1px solid rgba(0,0,0,.06); }
.gmap-wrap iframe { display: block; width: 100%; filter: grayscale(.3) contrast(1.05); }

/* ── TESTIMONIALS PAGE ── */
.tst-grid-full { grid-template-columns: repeat(3,1fr); }
.rating-overview { display: grid; grid-template-columns: auto 1fr; gap: 5rem; align-items: center; padding: 3.5rem; background: var(--white); border: 1px solid var(--border); }
.rating-big { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.rating-score { font-family: var(--fd); font-size: 5rem; font-weight: 700; color: var(--gold); line-height: 1; }
.rating-stars { display: flex; gap: 4px; }
.rating-stars svg { width: 22px; height: 22px; fill: var(--gold); }
.rating-count { font-size: .85rem; color: var(--muted); font-weight: 500; }
.rating-platform { display: flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; color: var(--txt); margin-top: .25rem; }
.rating-bars { display: flex; flex-direction: column; gap: .75rem; }
.rb-row { display: flex; align-items: center; gap: .875rem; }
.rb-row > span:first-child { width: .6rem; font-size: .78rem; font-weight: 600; color: var(--muted); }
.rb-row svg { width: 12px; height: 12px; flex-shrink: 0; }
.rb-bar { flex: 1; height: 6px; background: rgba(0,0,0,.07); overflow: hidden; }
.rb-fill { height: 100%; background: var(--gold); transition: width 1s var(--ease3); }
.rb-row > span:last-child { width: 1.5rem; font-size: .78rem; color: var(--muted); text-align: right; }

/* ── CONTACT PAGE ── */
.contact-form-title { font-family: var(--fd); font-size: clamp(1.5rem,2.5vw,2rem); font-weight: 700; color: var(--dark); margin-bottom: .5rem; }
.contact-form-sub { font-size: .9rem; color: var(--muted); margin-bottom: 2.25rem; }
.contact-form { display: flex; flex-direction: column; gap: 0; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.cf-group { display: flex; flex-direction: column; margin-bottom: 1.25rem; }
.cf-group label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--txt); margin-bottom: .5rem; }
.cf-group input, .cf-group select, .cf-group textarea {
  padding: .875rem 1rem; font-size: .9rem; font-family: var(--fb); color: var(--txt);
  background: var(--bg-alt); border: 1px solid rgba(0,0,0,.1);
  transition: border-color var(--ease); -webkit-appearance: none; appearance: none;
}
.cf-group input:focus, .cf-group select:focus, .cf-group textarea:focus { outline: none; border-color: var(--gold); background: var(--white); }
.cf-group textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.cf-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M5 6L0 0h10z' fill='%237A6E62'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  background-color: var(--bg-alt); padding-right: 2.5rem; cursor: pointer;
}
.cf-privacy { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: 1.75rem; }
.cf-privacy input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--gold); cursor: pointer; }
.cf-privacy label { font-size: .8rem; color: var(--muted); line-height: 1.6; cursor: pointer; }
.cf-submit { width: 100%; justify-content: center; padding: 1.1rem; }
.spin { animation: spinAnim .8s linear infinite; }
@keyframes spinAnim { to { transform: rotate(360deg); } }
.form-success { padding: 2.5rem; background: rgba(37,211,102,.06); border: 1px solid rgba(37,211,102,.25); text-align: center; }
.form-success[hidden] { display: none; }
.form-success svg { width: 48px; height: 48px; color: #25D366; margin: 0 auto 1rem; display: block; }
.form-success h3 { font-family: var(--fd); font-size: 1.4rem; color: var(--dark); margin-bottom: .5rem; }
.form-success p { font-size: .9rem; color: var(--muted); line-height: 1.7; }
.contact-info-wrap { display: flex; flex-direction: column; gap: 2rem; }
.ci-items { border: 1px solid rgba(0,0,0,.07); overflow: hidden; }
.ci-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(0,0,0,.06); background: var(--white); }
.ci-item:last-child { border-bottom: none; }
.ci-icon { width: 44px; height: 44px; background: rgba(184,135,42,.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ci-icon svg { width: 18px; height: 18px; }
.ci-text { flex: 1; }
.ci-label { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.ci-value { display: block; font-size: .95rem; font-weight: 500; color: var(--dark); line-height: 1.5; }
.ci-value a { color: var(--dark); transition: color var(--ease); }
.ci-value a:hover { color: var(--gold); }
.wa-cta-box { background: var(--dark); border: 1px solid rgba(184,135,42,.2); padding: 2.25rem; }
.wa-cta-icon { width: 52px; height: 52px; background: rgba(37,211,102,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.wa-cta-icon svg { width: 26px; height: 26px; fill: var(--wa); }
.wa-cta-text h3 { font-family: var(--fd); font-size: 1.2rem; font-weight: 600; color: var(--white); margin-bottom: .5rem; }
.wa-cta-text p { font-size: .875rem; color: rgba(255,255,255,.5); line-height: 1.7; margin-bottom: 1.5rem; }

/* ── RESPONSIVE ADDITIONS ── */
@media (max-width:1100px) {
  .about-story { grid-template-columns: 1fr; gap: 3.5rem; }
  .about-story-badge { right: 0; bottom: 0; }
  .values-grid { grid-template-columns: repeat(2,1fr); }
  .process-steps { grid-template-columns: repeat(2,1fr); }
  .proc-step { border-right: none; border-bottom: 1px solid rgba(0,0,0,.07); }
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .areas-layout { grid-template-columns: 1fr; gap: 3rem; }
  .rating-overview { grid-template-columns: 1fr; gap: 2.5rem; }
  .coverage-list { grid-template-columns: repeat(2,1fr); }
  .svc-card-wide { grid-template-columns: 1fr; }
  .svc-card-wide .svc-card-img { aspect-ratio: 16/10; }
}
@media (max-width:768px) {
  .values-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .coverage-list { grid-template-columns: 1fr; }
  .svc-card-grid { grid-template-columns: 1fr; }
  .svc-card-wide { grid-column: unset; }
  .founder-split { grid-template-columns: 1fr; }
  .founder-text { padding: 2.5rem 1.5rem; }
  .founder-photo { min-height: 340px; }
  .cf-row { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .tst-grid-full { grid-template-columns: 1fr; }
  .pf-wide .pf-img-wrap, .pf-tall .pf-img-wrap { aspect-ratio: 16/9; }
}