:root{
  --bg:#ffffff;
  --panel-bg:#fbf6ef;        /* pale cream for panel backgrounds */
  --text:#5b1514; /* user-requested font color (dark maroon) */
  --accent:#0ea5a4;          /* teal used sparingly */
  --contact-bg: #7a2320;     /* maroon background for contact panel (updated per request) */
  --link:#0b69ff;           /* primary link color (blue) */
  --accent-maroon:#5b1514;   /* primary maroon color */
  --card-bg:#fbf6ef;        /* card background (pale cream) */
  --muted:#4b5563;
  --max-w:1100px;
  --panel-padding:48px;
  --btn-border:#7a2320;
  --footer-bg:#3f3f3f;
  --footer-text:#ffffff;
  --radius:8px;
  --social-icon-size:78%;  /* single source of truth for social icon sizing (e.g. 78%) */
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;color:var(--text);background:var(--bg);line-height:1.5}
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}

/* Accessibility: skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;left:0;top:0;background:#fff;padding:8px 12px;border:2px solid var(--accent-maroon);z-index:9999}

/* Focus styles for keyboard users */
a:focus, button:focus, .nav a:focus{outline:3px solid rgba(11,105,255,0.25);outline-offset:3px}

/* Header */
.site-header{
  background:linear-gradient(90deg, rgba(14,165,164,0.06), transparent);
  border-bottom:1px solid #eef2f7;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem}
.brand{font-weight:700;color:var(--text);text-decoration:none;font-size:1.125rem}
.brand-logo{height:28px;width:auto;display:inline-block;vertical-align:middle;margin-right:10px;border-radius:4px}
.nav a{margin-left:1rem;text-decoration:none;color:var(--muted)}
.nav a.cta{background:var(--accent);color:white;padding:0.5rem 0.75rem;border-radius:6px;margin-left:1rem}
.mobile-toggle{display:none;background:none;border:0;font-size:1.25rem}

/* HERO */
.hero{
  position:relative;
  width:100%;
  height:520px;
  /* dark gradient overlay retained; background image moved into an absolutely-positioned <picture> for broader compatibility */
  background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.38) 30%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0) 100%);
  color:#fff;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

/* hero-media: positioned image element that acts like a background */
.hero-media{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.hero-overlay{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none;
  /* slightly lighter overlay so text sits clearly on top but remains readable */
  background: linear-gradient(90deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.08) 60%, rgba(0,0,0,0) 100%);
}
/* ensure hero content always sits above overlay and image */
.hero-content{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:6.5rem;padding-right:1rem}
.hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:110px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(249,244,240,1) 100%);
  pointer-events:none;
}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding-left:6.5rem;padding-right:1rem}
.hero-title{font-family:Merriweather, serif;margin:0 0 0.4rem 0;font-size:2.25rem;line-height:1.05}
.hero-subtitle{margin:0;color:rgba(255,255,255,0.9);font-weight:300}
.hero-actions{margin-top:18px}
.btn{display:inline-block;text-decoration:none;padding:.5rem .75rem;border-radius:6px;border:1px solid transparent}
.btn.primary{background:var(--accent);color:#fff}
.btn-outline{display:inline-block;padding:10px 16px;border-radius:6px;border:1px solid var(--btn-border);color:var(--btn-border);text-decoration:none;background:transparent;font-weight:600}

/* PANEL (shared) */
.why-panel, .services-panel, .process-panel, .benefits-panel, .faq-panel, .card-panel{
  background:var(--panel-bg);
  padding:var(--panel-padding);
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.02);
  margin:32px 0;
}

/* Increase max width for the main content panels on larger screens only.
   Applies when viewport is at least 1100px wide so contact remains unchanged
   on smaller viewports. */
@media (min-width: 1100px) {
  .why-panel.container,
  .services-panel.container,
  .process-panel.container,
  .benefits-panel.container,
  .faq-panel.container {
    max-width: 1400px;
  }
}

/* WHY CHOOSE US */
.why-quote{font-family:Merriweather, serif;color:var(--accent-maroon);text-align:center;margin:0 0 12px 0;font-size:1.6rem;line-height:1.15;
  /* make the quote span the full viewport width (full-bleed) while keeping centered text */
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 18px 24px; /* small horizontal padding so text doesn't touch edges */
}
.services-main-title{font-family:Merriweather, serif;color:var(--accent-maroon);text-align:center;margin:0 0 22px 0;font-size:1.6rem;line-height:1.15;
  /* full-bleed heading for services */
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 18px 24px;
}
.process-main-title{font-family:Merriweather, serif;color:var(--accent-maroon);text-align:center;margin:0 0 22px 0;font-size:1.6rem;line-height:1.15;
  /* full-bleed heading for proceso */
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 18px 24px;
}
.benefits-title{font-family:Merriweather, serif;color:var(--accent-maroon);text-align:center;margin:0 0 22px 0;font-size:1.6rem;line-height:1.15;
  /* full-bleed heading for benefits */
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 18px 24px;
}
.why-heading{text-align:center;margin:8px 0 28px 0;font-weight:700;color:var(--accent-maroon);font-size:1.125rem}
.why-features{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding-top:4px}
.feature{ text-align:center }
.feature-title{font-weight:700;color:var(--accent-maroon);margin:0 0 10px 0;font-family:Merriweather, serif;font-size:1.125rem}
.feature-desc{margin:0;color:var(--muted);font-style:normal;line-height:1.65}

/* Three-column logo + text layout used in the 'Por que Elegirnos' section.
   Placeholders are shown with a neutral background until the user uploads images. */

.why-grid{display:flex;gap:40px;justify-content:center;align-items:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
.why-item{flex:0 0 220px;min-width:180px;text-align:center}
/* Make logos compact and icon-like (reference: small centered icons with short captions) */
.why-item .why-logo,
.why-item img.why-logo{
  width:72px;
  height:72px;
  /* increased space between logo and text to reduce tightness */
  margin:0 auto 18px;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  display:block;
  object-fit:contain;
}

/* Title and description tuned to match the reference: compact, centered, muted description */
.why-item .feature-title{font-weight:700;color:var(--accent-maroon);margin:10px 0 6px 0;font-family:Merriweather, serif;font-size:1rem}
.why-item .feature-desc{margin:0;color:var(--muted);font-style:normal;line-height:1.4;font-size:0.95rem}

/* small screens: allow horizontal scroll but keep items inline */
@media (max-width:700px){
  .why-grid{gap:27px}
  .why-item{flex:0 0 200px}
  .why-item .why-logo, .why-item img.why-logo{width:64px;height:64px}
}

.services-main-title{font-family:Merriweather, serif;color:var(--accent-maroon);text-align:center;margin:0 0 22px 0;font-size:1.6rem}
.services-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:26px;padding-top:4px}
.service-item{text-align:center}
.service-title{margin:0 0 10px 0;font-weight:700;color:var(--accent-maroon);font-family:Merriweather, serif}
.service-desc{margin:0 auto;color:var(--muted);font-style:normal;line-height:1.65;max-width:640px}

/* Make the services H2 align visually with the centered services content
   (don't use full-bleed for this specific heading so it sits above the content) */
.services-section .services-main-title{
  /* Center the existing H2 and match the visual intensity of the
     service cards (same padding, border, radius and shadow). No HTML
     changes — only styling this element. */
  display: block;
  width: auto;
  max-width: 760px;
  margin: 0 auto 22px;
  padding: 28px; /* same internal padding as .service-card */
  box-sizing: border-box;
  background: var(--card-bg); /* pale cream */
  color: var(--text);
  border-radius: 12px; /* match .service-card */
  /* exact visual parity with .service-card */
  position: relative;
  z-index: 6; /* sit above panel overlay and match card stacking */
  box-shadow: 0 12px 30px rgba(11,17,20,0.12); /* match .service-card */
  border: 6px solid rgba(0,0,0,0.02); /* match .service-card */
  background-color: var(--card-bg);
  background-clip: padding-box; /* avoid border blending */
  mix-blend-mode: normal;
  isolation: isolate;
  opacity: 1;
  text-align: center;
}

/* Mirror the Services rule for the 'Por que Elegirnos' section so the heading
   sits above the centered content column instead of full-bleed. */
.why-section .services-main-title{
  width: auto;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 12px;
  box-sizing: border-box;
}

/* PROCESS (two-column) */
.process-grid{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start}
.step-title{margin:0 0 10px 0;font-family:Merriweather, serif;color:var(--accent-maroon);font-weight:700}
.step-list{margin:0 0 22px 0;padding-left:20px;color:var(--muted);line-height:1.65}
.placeholder-box{width:100%;max-width:280px;height:220px;border-radius:8px;border:2px dashed rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--accent-maroon);background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.9));box-shadow: 0 6px 18px rgba(0,0,0,0.03);font-size:1.25rem}

/* BENEFITS */
.benefits-media{display:block;margin:0 auto 18px;max-width:820px}
.benefits-media img{width:100%;height:auto;display:block;object-fit:cover;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,0.03);border: 8px solid rgba(255,255,255,0.5)}
.benefits-content{max-width:760px;margin:0 auto;text-align:left}

/* Services media: style incoming image to match the "Servicios Personalizados" panel
   This gives the attached image the same panel background, padding and rounded corners
   while keeping responsive scaling. */
.services-media{
  background: var(--panel-bg);
  padding: calc(var(--panel-padding) / 2);
  border-radius: 8px;
  max-width: 820px;
  margin: 0 auto 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.03);
}
.services-media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  border-radius:4px;
  border: 8px solid rgba(255,255,255,0.5);
}

/* Services cards (new layout matching user's example) */
.services-cards{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:28px;padding-top:6px}
.service-card{display:grid;grid-template-columns:1fr 380px;gap:22px;align-items:center;background:var(--card-bg);color:#ffffff;padding:28px;border-radius:12px;box-shadow:0 12px 30px rgba(11,17,20,0.12);border:6px solid rgba(0,0,0,0.02)}
.service-card:nth-child(even){grid-template-columns:380px 1fr}
.service-card .card-title{font-family:Merriweather, serif;color:var(--text);margin:0 0 12px 0;font-size:1.25rem}
.service-card .card-desc{margin:0;color:var(--text);line-height:1.6}
.service-card .card-cta{margin-top:16px}
.service-card .card-cta .btn{
  background: #0ea5a4; /* teal for card CTAs per request */
  color: #ffffff;
  border-radius:20px;
  padding:8px 14px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: filter .18s ease, transform .12s ease;
}
.service-card .card-cta .btn:hover{
  filter:brightness(0.95);
  transform: translateY(-1px);
}
.service-card .card-cta .btn:focus{
  outline:3px solid rgba(14,165,164,0.18);
  outline-offset:3px;
}
.service-card .service-media{height:220px;min-width:220px;max-width:380px;border-radius:10px;overflow:hidden}
.service-card .service-media.placeholder-box{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.04);color:var(--text);font-weight:700;border:6px solid rgba(0,0,0,0.06)}

/* Ensure images placed inside service-media fill the box and crop nicely */
.service-card .service-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Card hover effects: subtle lift + stronger shadow and slight image scale.
   Targets only service cards inside the cards container so the services
   heading (.services-main-title) is not affected. */
.services-cards .service-card{
  transition: transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s ease, filter .18s ease;
  will-change: transform; /* hint for smoother animations */
}
.services-cards .service-card:hover,
.services-cards .service-card:focus-within{
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 50px rgba(11,17,20,0.18);
  filter: brightness(1.01);
}
.services-cards .service-card:hover .service-media img,
.services-cards .service-card:focus-within .service-media img{
  transform: scale(1.035);
  transition: transform .4s ease;
}

@media (max-width:900px){
  .service-card{grid-template-columns:1fr;}
  .service-card:nth-child(even){grid-template-columns:1fr}
  .service-card .service-media{height:200px;width:100%;max-width:100%}
  .service-card .card-desc{color:var(--text);}
}



/* Apply user-provided background to the Services panel (Servicios Personalizados)
   Uses the image at assets/services-bg.jpg when present and a dark overlay
   to keep headings and CTAs readable. Falls back to var(--panel-bg) when
   the image is not present. */
.services-panel{
  background-color: var(--panel-bg); /* fallback if image missing */
  background-image: url('../assets/services-bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative; /* for overlay pseudo-element */
  color: #fff; /* ensure text is readable over the photo */
  overflow: hidden;
}
.services-panel::after{
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.25));
  pointer-events: none;
}
.services-panel .container{position:relative;z-index:2}
.benefits-title{font-family:Merriweather, serif;color:var(--accent-maroon);text-align:center;margin:0 0 22px 0;font-size:1.6rem;line-height:1.15;
  /* full-bleed heading for benefits (keep consistent with other full-bleed titles) */
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 18px 24px;
  font-weight:700}
.benefits-list{margin:0 0 18px 0;padding-left:20px;color:var(--muted);line-height:1.65;text-align:left}
.benefits-list li{margin:10px 0}

/* FAQ */
.faq-media{max-width:920px;margin:0 auto 18px}
.faq-media img{width:100%;height:auto;display:block;object-fit:cover;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,0.03);border:8px solid rgba(255,255,255,0.5)}
.faq-content{max-width:820px;margin:0 auto;text-align:left}
.faq-title{font-family:Merriweather, serif;color:var(--accent-maroon);text-align:center;margin:0 0 22px 0;font-size:1.6rem;line-height:1.15;
  /* full-bleed heading for FAQ */
  width: 100vw;
  box-sizing: border-box;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 18px 24px;
  font-weight:700}
.faq-list{margin:0;padding:0;counter-reset:faq-counter;list-style:none;color:var(--text);line-height:1.7}
.faq-list li{margin:18px 0;padding-left:20px;position:relative}
.faq-list li::before{counter-increment:faq-counter;content:counter(faq-counter) ".";position:absolute;left:0;top:0;font-weight:700;color:var(--accent-maroon)}
.faq-list p{margin:0;font-size:1rem;color:var(--text)}

/* Make FAQ panel use page background (no panel color) */
.faq-panel{
  background: transparent;
  border: none;
}
.faq-list p strong, .faq-list p strong em{
  display:block;
  font-family: Merriweather, serif;
  color: var(--accent-maroon);
  font-weight: 700;
  font-size: 1.125rem;
  margin: 0 0 8px 0;
}
.faq-cta{margin-top:18px}
/* No-op placeholder for FAQ CSS */
/* This is a placeholder to find insertion spot for FAQ CSS */

/* FAQ two-column accordion styles */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.faq-col{display:flex;flex-direction:column;gap:16px}
.faq-item{background:var(--panel-bg);border-radius:8px;padding:0;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.03)}
.faq-q{display:flex;align-items:center;justify-content:space-between;width:100%;padding:22px 24px;border:0;background:transparent;cursor:pointer;font-family:Merriweather, serif;color:var(--accent-maroon);font-weight:700;text-align:left;font-size:1.04rem}
.faq-q:focus{outline:3px solid rgba(11,105,255,0.12);outline-offset:2px}
.faq-q-text{display:block}
.faq-arrow{transition:transform .22s ease}
.faq-a{padding:0 24px 22px 24px;color:var(--text);font-size:1rem;line-height:1.65;max-height:0;overflow:hidden;opacity:0;transition:max-height .36s ease, opacity .26s ease}
.faq-a.open{opacity:1}
.faq-a p{margin:0}
.faq-item[aria-expanded="true"] .faq-arrow{transform:rotate(180deg)}

/* when answer is hidden, collapse height via display/hidden attribute (JS toggles) */
/* Responsive: single column on small screens */
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr}
}

/* PAGE CONSULTATION - visually match the FAQ panel and title
   We only change CSS so HTML is untouched. This block makes the
   .page-consultation panel use the same panel background, padding
   and typographic treatment as the FAQ section. */
.page-consultation{
  /* container for the consultation section; background moved into .panel-inner
     so the visible panel is constrained to the centered width */
  margin:32px 0;
  color:var(--text);
}
.page-consultation .panel-inner{
  max-width:820px;
  margin:0 auto;
  background:var(--panel-bg);
  padding:var(--panel-padding);
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.02);
}
.page-consultation h2{
  font-family:Merriweather, serif;
  color:var(--accent-maroon);
  text-align:center;
  margin:0 0 22px 0;
  font-size:1.6rem;
  line-height:1.15;
  /* contained heading inside the panel */
  width:auto;
  box-sizing:border-box;
  padding:0 12px;
  font-weight:700;
}
.page-consultation .form-note{color:var(--muted);max-width:820px;margin:0 auto 12px auto;text-align:center}

/* Make form labels match the consultation heading's font and color (but smaller) */
.page-consultation label,
.page-consultation .checkbox-list label{
  font-family: Merriweather, serif;
  color: var(--accent-maroon);
  font-weight: 700;
  font-size: 1rem; /* smaller than the H2 (1.6rem) */
  display: block;
  margin-bottom: 8px;
}

/* Inline checkbox labels should sit inline and be slightly less bold for readability */
.page-consultation .checkbox-list label{
  display: inline-block;
  margin-right: 14px;
  font-weight: 600;
}

/* Small, consistent input styles inside the consultation panel */
.page-consultation input[type="text"],
.page-consultation input[type="email"],
.page-consultation input[type="tel"],
.page-consultation textarea{
  width: 100%;
  padding:12px 14px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:6px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  font-size:1rem;
  color:var(--text);
}

.page-consultation .checkbox-list input[type="checkbox"]{margin-right:6px;vertical-align:middle}

.page-consultation .btn-submit{background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:6px}

/* CARD/EXCERPT */
.card-media{max-width:920px;margin:0 auto 18px}
.card-media img{width:100%;height:auto;display:block;object-fit:cover;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,0.03);border:8px solid rgba(255,255,255,0.5)}
.card-author{margin:8px 0 12px 0;font-family:Merriweather, serif;color:var(--accent-maroon);font-weight:700}
.card-excerpt p{margin:0;padding:14px 18px;background:linear-gradient(90deg, rgba(0,0,0,0.02), rgba(0,0,0,0.00));position:relative;color:var(--text);line-height:1.7;border-radius:4px;padding-left:36px}
.card-excerpt p::before{content:"";position:absolute;left:10px;top:12px;bottom:12px;width:6px;background:var(--text);border-radius:3px}

/* CONTACT + CREDITS */
.contact-title{font-family:Merriweather, serif;color:var(--accent-maroon);font-size:1.25rem;margin:0 0 12px 0}
.contact-line{margin:6px 0;font-weight:600}
.contact-line a{color:var(--text);text-decoration:none}
.contact-line a{color:var(--link);font-weight:700}
.contact-line a:hover{text-decoration:underline}
.socials .social-link{color:var(--text);text-decoration:none;font-style:italic;font-weight:600}
.socials .social-link{color:var(--link);font-weight:700}
.socials .social-link:hover{text-decoration:underline}
.credits{margin-top:26px;text-align:center}
.credits-heading{margin:0 0 8px 0;font-size:0.95rem;font-weight:700;color:var(--text)}
.credits-text{margin:0 auto;max-width:820px;color:var(--muted);font-size:0.9rem;line-height:1.5;padding:0 8px}

/* FOOTER */
.site-footer{background:var(--contact-bg);color:var(--footer-text);padding:12px 0;margin-top:0;border-top:none}

/* CONTACT PANEL — style to match the provided dark-blue design */
.contact-panel{
  background: var(--contact-bg);
  color: #ffffff;
  /* increase top padding so the absolutely-positioned title does not overlap content */
  padding: 64px 0 42px;
  margin-bottom: 0; /* ensure no gap between contact panel and footer */
  position: relative; /* establish containing block for absolute title */
}
.contact-panel > .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

/* Left column: contact details */
.contact-panel .contact-details{color:#ffffff;flex:1;min-width:260px}
.contact-panel .contact-title{font-family:Merriweather, serif;color:#ffffff;font-size:1.6rem;margin:0 0 18px 0}
/* Place the Contactanos heading centered at the top of the panel */
.contact-panel .contact-title{
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  z-index: 5;
  color: #ffffff; /* enforce white color */
  text-align: center;
}
.contact-panel .contact-line{margin:8px 0;color:rgba(255,255,255,0.95);font-weight:700}
.contact-panel .contact-line a{color:rgba(255,255,255,0.95);text-decoration:none}
.contact-panel .contact-line a:hover{text-decoration:underline}

/* Add small icon glyphs before phone/email links (CSS-only) */
.contact-panel .contact-line a[href^="tel:"]::before{content:"☎";display:inline-block;margin-right:10px}
.contact-panel .contact-line a[href^="mailto:"]::before{content:"✉";display:inline-block;margin-right:10px}
/* location line (non-link) should match phone/email size/color/font */
.contact-panel .contact-line.contact-location::before{
  /* use an SVG as a mask and fill it with currentColor so the pin matches
     the phone/email glyph color reliably when used as a CSS-generated image */
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 10px;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1012 6a2.5 2.5 0 000 5.5z'/></svg>") center/100% no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1012 6a2.5 2.5 0 000 5.5z'/></svg>") center/100% no-repeat;
}

/* Right column: social icons */
.contact-panel .socials{flex:0 0 auto;display:flex;align-items:center}
.social-list{display:flex;gap:18px;margin:0;padding:0;list-style:none}
.social-list{display:flex;gap:12px;margin:0;padding:0;list-style:none}
/* place social icons inline (row) on wider screens; stack on small screens */
.contact-panel .social-list{flex-direction:row;gap:12px}
.social-link{display:inline-block;width:52px;height:52px;border-radius:50%;background:#ffffff;color:var(--contact-bg);text-decoration:none;text-align:center;font-weight:700;font-size:18px;font-family:Inter, system-ui;box-shadow:0 6px 18px rgba(0,0,0,0.08);position:relative}
/* hide native text content but keep layout; center the pseudo-element absolutely inside the circle */
.social-link{font-size:0} /* hide native text content (accessible label remains) */
.social-link::before{content:'f';font-size:18px;color:var(--contact-bg);font-weight:700;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block;line-height:1}
/* use the user-supplied Instagram PNG and match Facebook sizing/color */
.social-link.social-instagram::before{
  content: '';
  display: block;
  /* scale relative to the 52px white circle so it matches the other icons */
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  /* use an inline SVG data-URL for crisp vector scaling (maroon camera glyph) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%237a2320' d='M7 4h10a3 3 0 013 3v10a3 3 0 01-3 3H7a3 3 0 01-3-3V7a3 3 0 013-3zm5 3.25a4.5 4.5 0 100 9 4.5 4.5 0 000-9zm4.5-1.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* WhatsApp: outlined SVG (speech bubble + handset) to match attached shape */
.social-link.social-whatsapp::before{
  content: '';
  display: block;
  /* use the unified social icon size so all three icons are visually equal */
  width: 66%;
  height: 66%;
  /* outline-style WhatsApp SVG (speech bubble + handset); stroke increased for better parity */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20.52 3.48A11.94 11.94 0 0012 .01C5.92.01.95 4.98.94 11.06c0 1.95.51 3.85 1.48 5.5L.03 24l7.69-2.35c1.57.43 3.18.66 4.9.66 6.07 0 11.05-4.97 11.06-11.06 0-3.02-1.19-5.86-3.16-7.77z' fill='none' stroke='%237a2320' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/><path d='M20.52 3.48A11.94 11.94 0 0012 .01C5.92.01.95 4.98.94 11.06c0 1.95.51 3.85 1.48 5.5L.03 24l7.69-2.35c1.57.43 3.18.66 4.9.66 6.07 0 11.05-4.97 11.06-11.06 0-3.02-1.19-5.86-3.16-7.77z' fill='none' stroke='%237a2320' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><path d='M16.42 13.59c-.23-.12-1.35-.67-1.56-.75-.2-.08-.35-.12-.5.12-.15.24-.6.76-.73.91-.13.15-.27.17-.5.05-.23-.12-1.01-.37-1.93-1.18-.74-.66-1.19-1.45-1.33-1.7-.14-.25-.02-.38.1-.5.1-.11.24-.28.36-.42.12-.14.16-.25.24-.41.08-.16.04-.31-.02-.43-.06-.12-.54-1.31-.74-1.77-.19-.46-.38-.4-.54-.4-.14 0-.3 0-.46 0-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.16 1.7 2.59 4.13 3.54 1.43.54 1.97.6 2.66.5.56-.08 1.42-.58 1.62-1.14.19-.56.19-1.03.13-1.14-.07-.11-.24-.18-.48-.3z' fill='%237a2320'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* use an inline SVG for the Facebook logo to replace the plain 'f' character
   Match Instagram: 18×18, maroon fill so both icons share the same size/color */
.social-link.social-facebook::before{
  content: '';
  display: block;
  /* use percentage sizing so the icon scales to the white circle size
     ~66% of the 52px circle = ~34px which visually fills the button */
  width: 66%;
  height: 66%;
  /* use an inline SVG data-URL for crisp vector scaling (maroon 'f' glyph) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%237a2320' d='M22 12.07C22 6.48 17.52 2 11.93 2S2 6.48 2 12.07C2 17.01 5.66 21.13 10.44 22v-7.01H8.07v-2.92h2.37V9.41c0-2.34 1.39-3.63 3.52-3.63 1.02 0 2.09.18 2.09.18v2.3h-1.18c-1.16 0-1.52.72-1.52 1.46v1.76h2.59l-.41 2.92h-2.18V22C18.34 21.13 22 17.01 22 12.07z'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Responsive: stack on small screens */
@media (max-width:900px){
  .contact-panel > .container{flex-direction:column;align-items:flex-start}
  .contact-panel .socials{margin-top:18px}
  /* on small screens stack social icons vertically */
  .contact-panel .social-list{flex-direction:column}
}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:18px}
.footer-link{color:rgba(255,255,255,0.85);text-decoration:none;font-size:0.9rem}
.footer-copy{margin:0;color:rgba(255,255,255,0.85)}

/* Responsive */
@media (max-width:1100px){.hero{height:520px}.hero-content{padding-left:4rem}.why-quote{font-size:1.8rem}}
@media (max-width:900px){
  .hero{height:440px;background-position:top center}
  .hero-content{align-items:center;text-align:center;padding-left:1rem;padding-right:1rem}
  .process-grid{grid-template-columns:1fr}
  .mobile-toggle{display:block}
  .nav{display:none}
  .process-placeholder{order:2;margin-top:18px;justify-content:flex-start}
}
@media (max-width:520px){
  .hero{height:360px}
  .hero-title{font-size:1.25rem}
  .why-quote{font-size:1.25rem}
  .why-panel, .services-panel, .process-panel, .benefits-panel, .faq-panel, .card-panel{padding:28px}
  .footer-inner{flex-direction:column;gap:8px}
  /* Prevent the services heading card from looking oversized on narrow screens */
  .services-section .services-main-title{
    padding: 14px;           /* reduce internal padding */
    margin: 0 auto 14px;     /* slightly smaller bottom gap */
    font-size: 1.125rem;     /* scale heading down for mobiles */
    max-width: 92%;          /* allow some breathing room */
  }
}