/* ═══════════════════════════════════════════════════════════════
   VAMOS 방문짝수리 — style.css
   Primary:#1B3A6B  Secondary:#EEF2F7  Accent:#E63946
   ═══════════════════════════════════════════════════════════════ */

/* ── Root Variables ─────────────────────────────────────────── */
:root {
  --primary:       #1B3A6B;
  --primary-dark:  #122951;
  --primary-light: #2C5494;
  --secondary:     #EEF2F7;
  --accent:        #E63946;
  --accent-dark:   #C52F3B;

  --bg-cream:      #F8F9FC;
  --bg-sand:       #F0F4F9;
  --bg-beige:      #E8EEF6;

  --text-dark:     #111827;
  --text-body:     #374151;
  --text-light:    #6B7280;

  --border:        rgba(0,0,0,.08);
  --radius:        12px;
  --shadow-sm:     0 2px 8px rgba(27,58,107,.06);
  --shadow:        0 4px 24px rgba(27,58,107,.10);
  --shadow-lg:     0 8px 48px rgba(27,58,107,.14);
  --transition:    all .35s cubic-bezier(.4,0,.2,1);

  --font-display:  'Manrope', 'Noto Sans KR', sans-serif;
  --font-body:     'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,::before,::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
  background: #F9FAFB;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
img { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none }
ul,ol { list-style:none }
button { cursor:pointer; border:none; background:none; font:inherit }

/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.3;
  color: var(--text-dark);
  letter-spacing:-.04em;
}
h1 { font-size: clamp(1.75rem, 5vw, 3rem) }
h2 { font-size: clamp(1.5rem,  4vw, 2.25rem) }
h3 { font-size: clamp(1.15rem, 3vw, 1.5rem) }
h4 { font-size: clamp(1rem,   2.5vw, 1.25rem) }
p  { font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height:1.8 }

/* ── Layout ─────────────────────────────────────────────────── */
.container { width:100%; max-width:1160px; margin:0 auto; padding:0 clamp(16px,4vw,48px) }
section { padding: clamp(48px,8vw,96px) 0 }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff;
  padding:14px 32px;
  font-size:clamp(0.95rem,1.5vw,1.05rem);
  font-weight:700; font-family:var(--font-display);
  border:2px solid var(--accent);
  transition:var(--transition);
}
.btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-2px); box-shadow:var(--shadow) }

.btn-outline {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:var(--primary);
  padding:13px 30px;
  font-size:clamp(0.95rem,1.5vw,1.05rem);
  font-weight:700; font-family:var(--font-display);
  border:2px solid var(--primary);
  transition:var(--transition);
}
.btn-outline:hover { background:var(--primary); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow) }

.btn-white {
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; color:var(--primary);
  padding:14px 32px;
  font-size:clamp(0.95rem,1.5vw,1.05rem);
  font-weight:700; font-family:var(--font-display);
  border:2px solid #fff;
  transition:var(--transition);
}
.btn-white:hover { background:transparent; color:#fff; transform:translateY(-2px) }

.btn-cta {
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#fff;
  padding:14px 32px; border-radius:999px;
  font-size:clamp(0.95rem,1.5vw,1.05rem);
  font-weight:700; font-family:var(--font-display);
  border:2px solid var(--accent);
  transition:var(--transition);
}
.btn-cta:hover { background:var(--accent-dark); border-color:var(--accent-dark); transform:translateY(-2px); box-shadow:var(--shadow) }

/* ── Border Radius ──────────────────────────────────────────── */
.btn-primary,.btn-outline,.btn-white,
#main-nav .nav-cta { border-radius:999px }
.floating-btn { border-radius:14px }
.hero-kicker { border-radius:4px }
.back-to-top,.step-num { border-radius:50% }
.case-card,.svc-card,.feat-card,.symp-card,.method-card,
.region-card,.related-card,.consult-card,.gallery-card,.gallery-card-body,
.sitemap-card,.meta-card,.pd-nav a,.filter-btn { border-radius:var(--radius) }

/* ── Header ─────────────────────────────────────────────────── */
#site-header {
  position:fixed; top:0; left:0; width:100%;
  z-index:1000; padding:0 clamp(16px,4vw,48px);
  height:64px; display:flex; align-items:center; justify-content:space-between;
  transition:background .3s,box-shadow .3s;
}
#site-header.scrolled {
  background:rgba(255,255,255,.98);
  box-shadow:0 2px 16px rgba(0,0,0,.1);
  backdrop-filter:saturate(180%) blur(20px);
}
#site-header .logo-link {
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display); font-weight:800;
  font-size:1.1rem; color:#fff; letter-spacing:-0.02em;
}
#site-header.scrolled .logo-link { color:var(--primary) }
.logo-svg path,.logo-svg rect,.logo-svg line,.logo-svg circle { stroke:#fff; transition:stroke .3s }
#site-header.scrolled .logo-svg path,
#site-header.scrolled .logo-svg rect,
#site-header.scrolled .logo-svg line,
#site-header.scrolled .logo-svg circle { stroke:var(--primary) }

#main-nav ul { display:flex; align-items:center; gap:32px }
#main-nav a {
  color:#fff; font-weight:600; font-size:0.95rem;
  padding:8px 0; border-bottom:2px solid transparent;
  transition:var(--transition);
}
#site-header.scrolled #main-nav a { color:var(--text-dark) }
#main-nav a:hover { border-bottom-color:var(--accent) }
#main-nav .nav-cta {
  background:var(--accent); color:#fff !important;
  padding:8px 20px; border-bottom:none !important;
}
#main-nav .nav-cta:hover { background:var(--accent-dark); transform:translateY(-1px) }

.hamburger { display:none; flex-direction:column; gap:5px; padding:11px; min-width:44px; min-height:44px; z-index:101 }
.hamburger span { display:block; width:22px; height:2px; background:#fff; transition:var(--transition) }
#site-header.scrolled .hamburger span { background:var(--primary) }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0 }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg) }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100svh; min-height:100vh;
  display:flex; align-items:center; overflow:hidden;
}
.hero-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease;
  animation:kenburns 7s ease-out infinite;
}
.hero-slide.active { opacity:1 }
@keyframes kenburns {
  0%   { transform:scale(1.07) }
  100% { transform:scale(1) }
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.32) 0%, transparent 52%);
}
.hero-content {
  position:relative; z-index:2;
  padding: clamp(80px,12vw,140px) clamp(16px,4vw,48px) clamp(48px,8vw,80px);
  max-width:760px;
}
.hero-glass {
  background: rgba(8,18,36,.54);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--radius);
  padding: clamp(28px,4vw,48px) clamp(24px,4vw,48px);
}
.hero-kicker {
  display:inline-block;
  font-size:clamp(0.75rem,1.2vw,0.875rem);
  font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.3);
  padding:6px 14px; margin-bottom:20px;
}
.hero h1 {
  color:#fff;
  font-size:clamp(2rem,6vw,3.75rem);
  line-height:1.15; margin-bottom:20px;
}
.hero-sub {
  color:rgba(255,255,255,.88);
  font-size:clamp(0.9rem,1.8vw,1.1rem);
  margin-bottom:12px; line-height:1.7;
}
.hero-notice {
  color:rgba(255,255,255,.72);
  font-size:clamp(0.8rem,1.4vw,0.9rem);
  margin-bottom:36px; line-height:1.6;
  border-left:3px solid var(--accent);
  padding-left:12px;
}
.hero-cta { display:flex; flex-wrap:wrap; gap:12px }
.hero-dots {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.hero-dot {
  width:8px; height:8px;
  border-radius:50%; background:rgba(255,255,255,.4);
  transition:var(--transition); cursor:pointer;
  padding:10px; margin:-10px;
  background-clip:content-box;
}
.hero-dot.active { background:#fff; transform:scale(1.3) }

/* ── Section Titles ─────────────────────────────────────────── */
.section-head { text-align:center; margin-bottom:clamp(32px,5vw,56px) }
.kicker {
  display:inline-block;
  font-size:0.75rem;
  font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--accent); padding-bottom:6px;
  border-bottom:1.5px solid var(--accent); margin-bottom:16px;
}
.section-head h2 { color:var(--text-dark); margin-bottom:12px }
.section-head p { color:var(--text-light); max-width:560px; margin:0 auto }

/* ── Gallery Cards (사례) ─────────────────────────────────────── */
.cases-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(280px,45%,520px),1fr));
  gap:clamp(20px,3vw,32px);
}
.case-card {
  border:1px solid var(--border);
  overflow:hidden; transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.case-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.case-card-imgs { display:grid; grid-template-columns:1fr 1fr }
.case-card-imgs figure { position:relative; overflow:hidden; aspect-ratio:3/4 }
.case-card-imgs img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.case-card:hover .case-card-imgs img { transform:scale(1.05) }
.case-card-imgs figcaption {
  position:absolute; bottom:0; left:0; right:0;
  padding:6px 10px;
  font-size:0.75rem; font-weight:700; color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
}
.case-card-body { padding:16px 20px }
.case-card-body h3 { font-size:1rem; margin-bottom:4px }
.case-card-body .case-meta { display:flex; gap:12px; font-size:0.8rem; color:var(--text-light) }
.case-card-body .case-link { display:inline-block; margin-top:12px; font-size:0.875rem; font-weight:700; color:var(--accent) }
.case-card-body .case-link:hover { text-decoration:underline }

/* ── Service Cards ─────────────────────────────────────────── */
.services-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:clamp(12px,2vw,20px);
}
.svc-card {
  background:var(--bg-cream); padding:clamp(20px,3vw,32px);
  border:1px solid var(--border);
  transition:var(--transition);
  display:flex; flex-direction:column; gap:12px;
}
.svc-card:hover { background:var(--primary); color:#fff; transform:translateY(-4px); box-shadow:var(--shadow) }
.svc-card:hover h3,.svc-card:hover p { color:#fff }
.svc-card .svc-num {
  font-family:var(--font-display); font-size:2.5rem; font-weight:800;
  color:var(--border); line-height:1; transition:var(--transition);
}
.svc-card:hover .svc-num { color:rgba(255,255,255,.2) }
.svc-card h3 { font-size:clamp(1rem,2vw,1.2rem); transition:color .35s }
.svc-card p { font-size:0.875rem; color:var(--text-light); transition:color .35s }

/* ── Stats ──────────────────────────────────────────────────── */
.stats-section {
  background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
  padding:clamp(48px,8vw,80px) 0;
}
.stats-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:clamp(24px,4vw,48px); text-align:center;
}
.stat-item { color:#fff }
.stat-num {
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem,5vw,3.5rem); line-height:1.1;
  color:#fff; display:block; letter-spacing:-.05em;
}
.stat-label {
  font-size:clamp(0.85rem,1.3vw,0.95rem);
  color:rgba(255,255,255,.75); margin-top:4px;
}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq-list { max-width:760px; margin:0 auto }
.faq-item {
  border-bottom:1px solid var(--border); overflow:hidden;
}
.faq-q {
  width:100%; text-align:left; padding:20px 48px 20px 0;
  font-size:clamp(0.95rem,1.5vw,1.05rem); font-weight:700;
  color:var(--text-dark); position:relative;
  transition:color .3s;
}
.faq-q::after {
  content:'+'; position:absolute; right:8px; top:50%;
  font-size:22px; font-weight:300; color:var(--primary);
  transform:translateY(-50%) rotate(0deg);
  transition:transform .4s ease;
  line-height:1;
}
.faq-item.open .faq-q { color:var(--primary) }
.faq-item.open .faq-q::after { transform:translateY(-50%) rotate(45deg) }
.faq-a {
  max-height:0; overflow:hidden;
  transition:max-height .4s ease, padding .3s;
  font-size:clamp(0.875rem,1.4vw,0.95rem); color:var(--text-light);
  padding:0 48px 0 0;
  line-height:1.8;
}
.faq-item.open .faq-a { max-height:400px; padding-bottom:20px }

/* ── Region Cards ─────────────────────────────────────────── */
.regions-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:clamp(8px,1.5vw,16px);
}
.region-card {
  background:var(--bg-cream); padding:16px 20px;
  border:1px solid var(--border); text-align:center;
  transition:var(--transition); font-size:0.9rem; font-weight:600;
  color:var(--text-dark);
}
.region-card:hover { background:var(--primary); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow) }

/* ── Region Sub-pages ───────────────────────────────────────── */
.region-intro { padding:clamp(48px,6vw,72px) 0 }
.region-apt   { padding:clamp(48px,6vw,72px) 0; background:var(--bg-cream) }
.svc-list-sec { padding:clamp(48px,6vw,72px) 0 }

/* Section h2 accent underline */
.region-intro h2, .region-apt h2, .svc-list-sec h2 {
  position:relative; padding-bottom:16px;
  margin-bottom:clamp(16px,2.5vw,24px);
}
.region-intro h2::after, .region-apt h2::after, .svc-list-sec h2::after {
  content:''; position:absolute; bottom:0; left:0;
  width:40px; height:3px; background:var(--accent); border-radius:2px;
}

/* Region area cards (동별 소개) */
.region-area-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(12px,2vw,20px);
  margin-top:clamp(24px,3vw,36px);
}
.region-area-card {
  padding:clamp(20px,3vw,28px);
  background:var(--bg-cream);
  border:1px solid var(--border);
  border-left:4px solid var(--primary);
  border-radius:var(--radius);
  transition:var(--transition);
}
.region-area-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-left-color:var(--accent) }
.region-area-card h3 { font-size:clamp(1rem,1.8vw,1.1rem); color:var(--primary); margin-bottom:8px }
.region-area-card p  { font-size:0.875rem; color:var(--text-light); line-height:1.75 }

/* Apartment cards */
.apt-list {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(16px,2vw,24px);
  margin:clamp(24px,3vw,36px) 0;
}
.apt-card {
  padding:clamp(24px,3.5vw,36px);
  background:#fff;
  border:1px solid var(--border);
  border-top:4px solid var(--primary);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.apt-card:hover { transform:translateY(-3px); box-shadow:var(--shadow) }
.apt-card h3 {
  font-size:clamp(1rem,1.8vw,1.1rem); color:var(--text-dark);
  margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border);
}
.apt-card p { font-size:0.875rem; color:var(--text-body); line-height:1.75 }

/* Apt note callout */
.apt-note {
  margin-top:clamp(16px,2.5vw,24px);
  padding:16px 20px 16px 24px;
  background:var(--secondary);
  border-left:4px solid var(--primary);
  border-radius:0 var(--radius) var(--radius) 0;
  font-size:0.875rem; color:var(--text-body); line-height:1.75;
}

/* Service items list (svc-list-sec) */
.svc-items {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(12px,2vw,20px);
  margin-top:clamp(24px,3vw,36px);
}
.svc-item {
  display:flex; flex-direction:column; gap:8px;
  padding:clamp(20px,3vw,28px);
  background:var(--bg-cream);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:var(--transition);
  position:relative; overflow:hidden;
}
.svc-item::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--primary);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s ease;
}
.svc-item:hover { transform:translateY(-3px); box-shadow:var(--shadow); background:#fff }
.svc-item:hover::before { transform:scaleX(1) }
.svc-item h3 { font-size:1rem }
.svc-item h3 a { color:var(--primary); font-weight:700; transition:color .3s }
.svc-item h3 a:hover { color:var(--accent) }
.svc-item p  { font-size:0.875rem; color:var(--text-light); line-height:1.75 }

/* CTA band text */
.cta-band-text { color:rgba(255,255,255,.85); margin-bottom:24px; font-size:clamp(0.95rem,1.5vw,1.05rem) }

/* ── CTA Banner ─────────────────────────────────────────────── */
.cta-section {
  background:var(--secondary); padding:clamp(48px,8vw,80px) 0; text-align:center;
}
.cta-section h2 { margin-bottom:12px }
.cta-section p { color:var(--text-light); margin-bottom:32px }
.cta-btns { display:flex; justify-content:center; flex-wrap:wrap; gap:16px }

/* ── Floating CTA ─────────────────────────────────────────── */
.floating-cta {
  position:fixed; bottom:88px; right:24px; z-index:900;
}
.floating-btn {
  display:flex; align-items:center; gap:10px;
  background:var(--accent); color:#fff;
  padding:14px 24px;
  font-weight:700; font-size:0.95rem;
  box-shadow:0 4px 24px rgba(230,57,70,.4);
  position:relative;
}
.floating-btn::before {
  content:''; position:absolute; inset:-6px;
  border:2px solid var(--accent);
  animation:pulse 2.5s ease infinite;
  opacity:0;
}
@keyframes pulse {
  0%   { transform:scale(1); opacity:.6 }
  100% { transform:scale(1.3); opacity:0 }
}
.floating-btn:hover { background:var(--accent-dark); transform:translateY(-2px) }

/* ── Back to Top ─────────────────────────────────────────── */
.back-to-top {
  position:fixed; bottom:24px; right:24px; z-index:900;
  width:44px; height:44px;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transition:var(--transition);
}
.back-to-top.visible { opacity:1; visibility:visible }
.back-to-top:hover { background:var(--primary-dark); transform:translateY(-2px) }

/* ── Footer ─────────────────────────────────────────────────── */
#site-footer {
  background:var(--text-dark); color:rgba(255,255,255,.7);
  padding:clamp(40px,6vw,64px) 0 24px;
}
.footer-inner {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(24px,4vw,48px); max-width:1160px;
  margin:0 auto; padding:0 clamp(16px,4vw,48px);
  margin-bottom:clamp(32px,5vw,48px);
}
.footer-name {
  font-family:var(--font-display); font-size:1.2rem; font-weight:800;
  color:#fff; margin-bottom:12px;
}
.footer-biz { font-size:0.8rem; line-height:1.8; margin-bottom:8px }
.footer-area { font-size:0.8rem; color:rgba(255,255,255,.5) }
.footer-col-title {
  font-size:0.75rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:rgba(255,255,255,.4);
  margin-bottom:16px;
}
.footer-services ul li,.footer-links ul li,.footer-brands ul li { margin-bottom:8px }
.footer-services a,.footer-links a,.footer-brands a {
  font-size:0.875rem; color:rgba(255,255,255,.6); transition:color .3s;
}
.footer-services a:hover,.footer-links a:hover,.footer-brands a:hover { color:#fff }
.footer-copy {
  text-align:center; font-size:0.8rem; color:rgba(255,255,255,.3);
  padding-top:24px; border-top:1px solid rgba(255,255,255,.08);
  max-width:1160px; margin:0 auto; padding-left:clamp(16px,4vw,48px); padding-right:clamp(16px,4vw,48px);
}

/* ── Gallery Page ────────────────────────────────────────────── */
.gallery-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(16px,2.5vw,28px);
}
.gallery-card {
  border:1px solid var(--border); overflow:hidden;
  transition:var(--transition); box-shadow:var(--shadow-sm);
}
.gallery-card:hover { transform:translateY(-4px); box-shadow:var(--shadow) }
.gallery-card figure { overflow:hidden; aspect-ratio:4/3 }
.gallery-card img { width:100%; height:100%; object-fit:cover; transition:transform .5s }
.gallery-card:hover img { transform:scale(1.05) }
.gallery-card-body { padding:16px 20px }
.gallery-card-body h3 { font-size:1rem; margin-bottom:6px }
.gallery-card-body .meta { font-size:0.8rem; color:var(--text-light) }
.gallery-card-body a { display:inline-block; margin-top:10px; font-size:0.875rem; font-weight:700; color:var(--accent) }

/* ── Portfolio Detail ─────────────────────────────────────────── */
.pd-hero { position:relative; min-height:600px }
.pd-hero img { width:100%; height:600px; object-fit:cover }
.pd-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 50%);
}
.pd-hero-caption {
  position:absolute; bottom:32px; left:0; right:0;
  padding:0 clamp(16px,4vw,48px); color:#fff;
}
.pd-hero-caption h1 { color:#fff; margin-bottom:8px }

.ba-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,3vw,32px);
  margin:clamp(32px,5vw,48px) 0;
}
.ba-item { position:relative; overflow:hidden; aspect-ratio:4/3 }
.ba-item img { width:100%; height:100%; object-fit:cover }
.ba-label {
  position:absolute; top:12px; left:12px;
  background:rgba(0,0,0,.6); color:#fff;
  padding:4px 12px; font-size:0.8rem; font-weight:700;
  backdrop-filter:blur(4px);
}

.meta-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:32px 0 }
.meta-card { background:var(--bg-cream); padding:16px 20px; text-align:center }
.meta-card .mc-label { font-size:0.75rem; color:var(--text-light); margin-bottom:4px }
.meta-card .mc-val { font-size:0.95rem; font-weight:700; color:var(--text-dark) }

.proc-list { margin:24px 0 }
.proc-list li {
  padding:14px 16px 14px 56px; position:relative;
  border-bottom:1px solid var(--border); font-size:0.95rem;
}
.proc-list li::before {
  content:counter(step-counter,decimal-leading-zero);
  counter-increment:step-counter;
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-family:var(--font-display); font-weight:800; font-size:0.875rem;
  color:var(--primary);
}
.proc-list { counter-reset:step-counter }

.pd-nav { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:clamp(32px,5vw,48px) 0 }
.pd-nav a {
  padding:20px 24px; background:var(--bg-cream);
  border:1px solid var(--border); font-weight:600; font-size:0.9rem;
  color:var(--text-dark); transition:var(--transition);
}
.pd-nav a:hover { background:var(--primary); color:#fff }
.pd-nav .pd-next { text-align:right }

/* ── Consultation Page ─────────────────────────────────────── */
.consult-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:720px; margin:0 auto }
.consult-card {
  padding:clamp(28px,5vw,48px) clamp(20px,4vw,36px);
  border:2px solid var(--border); text-align:center;
  transition:var(--transition);
}
.consult-card:hover { border-color:var(--accent); transform:translateY(-4px); box-shadow:var(--shadow) }
.consult-card .cc-icon {
  width:64px; height:64px; margin:0 auto 16px;
  background:var(--secondary); display:flex; align-items:center; justify-content:center;
}
.consult-card h3 { margin-bottom:8px }
.consult-card p { font-size:0.875rem; color:var(--text-light) }
.consult-notice {
  max-width:600px; margin:40px auto 0;
  background:var(--bg-cream); padding:24px 28px;
  border-left:4px solid var(--accent);
  font-size:0.9rem; line-height:1.8;
}

/* ── Service Sub-pages ─────────────────────────────────────── */
.svc-intro,
.svc-symptoms,
.svc-process,
.svc-methods,
.svc-gallery-sec,
.svc-faq { padding:clamp(48px,6vw,72px) 0 }
.svc-symptoms,
.svc-process { background:var(--bg-cream) }

.intro-lead {
  font-size:clamp(1rem,1.6vw,1.125rem); color:var(--text-body);
  max-width:680px; margin:16px 0 clamp(24px,3vw,40px); line-height:1.8;
}

/* feat-grid (3 feature cards) */
.feat-cards,
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,24px) }
.feat-card {
  padding:clamp(20px,3vw,32px); background:var(--bg-cream);
  border:1px solid var(--border); transition:var(--transition);
  position:relative; overflow:hidden;
}
.feat-card:hover { background:var(--primary); color:#fff; transform:translateY(-4px); box-shadow:var(--shadow) }
.feat-card:hover h3,.feat-card:hover p { color:#fff }
.feat-num {
  font-family:var(--font-display); font-size:3rem; font-weight:800;
  color:rgba(0,0,0,.06); line-height:1;
  position:absolute; top:12px; right:16px; transition:color .35s;
}
.feat-card:hover .feat-num { color:rgba(255,255,255,.1) }
.feat-card h3 { font-size:clamp(1rem,1.8vw,1.15rem); margin-bottom:8px; transition:color .35s }
.feat-card p  { font-size:0.875rem; color:var(--text-light); transition:color .35s; line-height:1.7 }

/* symp-grid (symptom cards: .num + h3 + p flat structure) */
.symp-cards,
.symp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:clamp(24px,3vw,32px) }
.symp-card {
  display:grid;
  grid-template-columns:44px 1fr;
  grid-template-rows:auto auto;
  column-gap:16px;
  padding:20px;
  border:1px solid var(--border); background:#fff;
  transition:var(--transition);
}
.symp-card:hover { background:var(--secondary); transform:translateY(-2px); box-shadow:var(--shadow-sm) }
.symp-card .num {
  grid-column:1; grid-row:1 / 3;
  width:44px; height:44px;
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:0.875rem; font-weight:800;
  align-self:start;
}
.symp-card h3 { grid-column:2; grid-row:1; font-size:0.95rem; margin-bottom:4px; line-height:1.4 }
.symp-card p  { grid-column:2; grid-row:2; font-size:0.8rem; color:var(--text-light); line-height:1.6 }

/* proc-steps (ordered list: li.proc-step > span.step-num + div.step-body > h3 + p) */
.proc-steps {
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:16px; margin-top:clamp(24px,3vw,32px);
  position:relative;
}
.proc-steps::before {
  content:''; position:absolute;
  top:23px; left:calc(10% + 16px); right:calc(10% + 16px);
  height:2px; background:var(--border); z-index:0;
}
.proc-step {
  text-align:center; padding:0 8px 20px; position:relative; z-index:1;
  background:#fff;
}
.step-num {
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; margin:0 auto 16px;
  background:var(--primary); color:#fff;
  font-family:var(--font-display); font-size:1rem; font-weight:800;
}
.step-body h3 { font-size:0.9rem; margin-bottom:6px; line-height:1.4 }
.step-body p  { font-size:0.8rem; color:var(--text-light); line-height:1.6 }

/* method-grid (comparison cards: h3 + ul.pros + ul.cons) */
.method-cards,
.method-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(16px,2vw,24px); margin-top:clamp(24px,3vw,32px) }
.method-card {
  padding:clamp(20px,3vw,32px); border:1px solid var(--border);
  background:var(--bg-cream);
}
.method-card.method-recommended {
  border-color:var(--primary); border-top:4px solid var(--primary);
}
.method-card h3 { margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--primary); font-size:1.05rem }
.method-card h4 { margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--primary); font-size:1.05rem }
.method-card ul { list-style:none }
.method-card ul li { padding:6px 0 6px 20px; position:relative; font-size:0.875rem; line-height:1.6 }
.method-card .pros li::before { content:''; position:absolute; left:0; top:13px; width:8px; height:8px; background:var(--primary); border-radius:50% }
.method-card .cons li::before { content:''; position:absolute; left:4px; top:14px; width:6px; height:2px; background:var(--text-light) }
.method-card .pros { margin-bottom:12px }
.method-card .method-note { font-size:0.85rem; color:var(--text-light); margin-top:16px; text-align:center }
.method-note { font-size:0.85rem; color:var(--text-light); margin-top:clamp(16px,2vw,24px); text-align:center }

/* gallery CTA */
.gallery-cta { margin-top:clamp(20px,2.5vw,28px); text-align:center }

.svc-gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.5vw,20px) }
.svc-gallery figure { overflow:hidden; aspect-ratio:3/4 }
.svc-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .5s }
.svc-gallery figure:hover img { transform:scale(1.05) }
.svc-gallery figcaption { padding:10px 14px; font-size:0.8rem; color:var(--text-light); background:var(--bg-cream) }

.related-svcs { padding:clamp(48px,6vw,72px) 0 }
.related-svc {
  padding:20px 24px; background:var(--bg-cream); border:1px solid var(--border);
  transition:var(--transition); font-weight:600; color:var(--text-dark);
}
.related-svc:hover { background:var(--primary); color:#fff; transform:translateY(-2px) }

/* ── Related Services Cards ─────────────────────────────────── */
.related-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-top:clamp(24px,3vw,32px);
}
.related-card {
  display:block;
  padding:28px 24px;
  background:var(--bg-cream);
  border:1px solid var(--border);
  border-left:4px solid var(--primary);
  transition:var(--transition);
}
.related-card h3 {
  font-size:1.05rem;
  font-weight:700;
  color:var(--primary);
  margin-bottom:8px;
  transition:color .3s;
}
.related-card p {
  font-size:0.875rem;
  color:var(--text-light);
  line-height:1.6;
}
.related-card:hover {
  background:var(--primary);
  border-left-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.related-card:hover h3,
.related-card:hover p { color:#fff }

.cta-band {
  text-align:center; background:var(--primary); color:#fff;
  padding:clamp(32px,5vw,48px); margin-top:clamp(24px,4vw,40px);
}
.cta-band h3 { color:#fff; margin-bottom:8px }
.cta-band p  { color:rgba(255,255,255,.8); margin-bottom:24px }

/* ── Page Hero (sub-pages) ─────────────────────────────────── */
.page-hero {
  position:relative; min-height:clamp(280px,40vw,440px);
  display:flex; align-items:flex-end; overflow:hidden;
  background:var(--primary);
  background-size:cover; background-position:center;
}
.page-hero::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(27,58,107,.85) 0%,rgba(27,58,107,.4) 60%,transparent 100%);
}
.page-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.page-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(27,58,107,.85) 0%,rgba(27,58,107,.4) 60%,transparent 100%);
}
.page-hero-content,
.hero-inner {
  position:relative; z-index:2;
  padding:clamp(32px,5vw,56px) clamp(16px,4vw,48px);
  color:#fff;
}
.page-hero-content .kicker,
.hero-inner .kicker { color:rgba(255,255,255,.8) }
.page-hero-content h1,
.hero-inner h1 { color:#fff; margin:8px 0 12px }
.page-hero-content p,
.hero-inner p,
.hero-desc { color:rgba(255,255,255,.8); max-width:640px; font-size:1rem; margin-bottom:24px }

/* ── Sitemap Page ─────────────────────────────────────────── */
.sitemap-filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px }
.filter-btn {
  padding:8px 20px; border:1px solid var(--border);
  background:var(--bg-cream); font-size:0.875rem; font-weight:600;
  color:var(--text-dark); transition:var(--transition);
}
.filter-btn.active,.filter-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary) }
.sitemap-search {
  width:100%; max-width:480px; padding:12px 16px;
  border:1px solid var(--border); font-size:1rem;
  margin-bottom:32px; outline:none; color:var(--text-dark);
  background:var(--bg-cream);
}
.sitemap-search:focus { border-color:var(--primary) }
.sitemap-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:clamp(12px,2vw,20px);
}
.sitemap-card {
  padding:20px 24px; background:var(--bg-cream);
  border:1px solid var(--border); transition:var(--transition);
}
.sitemap-card:hover { background:var(--primary); color:#fff; transform:translateY(-2px) }
.sitemap-card:hover h3,.sitemap-card:hover .sitemap-cat { color:#fff }
.sitemap-cat { font-size:0.75rem; color:var(--text-light); margin-bottom:4px; transition:color .3s }
.sitemap-card h3 { font-size:0.95rem; transition:color .3s }

/* ── 404 ──────────────────────────────────────────────────── */
.notfound-wrap { text-align:center; padding:clamp(80px,12vw,140px) clamp(16px,4vw,48px) }
.notfound-code {
  font-family:var(--font-display); font-size:clamp(6rem,20vw,12rem);
  font-weight:800; color:var(--secondary); line-height:1;
  margin-bottom:24px;
}
.notfound-wrap h1 { font-size:clamp(1.5rem,3vw,2rem); margin-bottom:16px }
.notfound-wrap p  { color:var(--text-light); margin-bottom:40px; max-width:420px; margin-left:auto; margin-right:auto }
.notfound-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:16px }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb-nav {
  background:#fff; border-bottom:1px solid var(--border);
  padding:10px 0; margin-top:64px;
}
.breadcrumb-list {
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  max-width:1160px; margin:0 auto; padding:0 clamp(16px,4vw,48px);
  list-style:none; font-size:0.82rem; color:var(--text-light);
}
.breadcrumb-list li { display:flex; align-items:center }
.breadcrumb-list li + li::before { content:'>'; margin:0 8px; color:var(--border) }
.breadcrumb-list a { color:var(--text-light); transition:color .3s }
.breadcrumb-list a:hover { color:var(--primary) }
.breadcrumb-list [aria-current="page"] { color:var(--text-dark); font-weight:600 }

/* ── NSEO Cards ─────────────────────────────────────────────── */
.nseo-section { padding:clamp(48px,6vw,72px) 0 }
.nseo-section.nseo-footer { background:var(--bg-cream) }
.nseo-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(12px,1.5vw,20px);
}
.nseo-card {
  display:flex; flex-direction:column;
  border:1px solid var(--border); overflow:hidden;
  transition:var(--transition); box-shadow:var(--shadow-sm);
  background:#fff; border-radius:var(--radius);
}
.nseo-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg) }
.nseo-img-wrap { position:relative; overflow:hidden; aspect-ratio:16/9 }
.nseo-img-wrap img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.nseo-card:hover .nseo-img-wrap img { transform:scale(1.05) }
.nseo-badge { display:none }
.nseo-body { padding:16px 20px; flex:1 }
.nseo-body h3 { font-size:clamp(0.95rem,1.5vw,1.05rem); margin-bottom:6px }
.nseo-body p  { font-size:0.85rem; color:var(--text-light); line-height:1.6 }

/* ── Why Us ─────────────────────────────────────────────── */
.whyus-section {
  background:linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
  padding:clamp(64px,10vw,112px) 0;
}
.whyus-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,2vw,20px);
}
.whyus-card {
  padding:clamp(28px,3.5vw,40px) clamp(20px,3vw,28px);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  position:relative; overflow:hidden;
  transition:var(--transition);
}
.whyus-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:3px; background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.whyus-card:hover { background:rgba(255,255,255,.13); transform:translateY(-4px) }
.whyus-card:hover::after { transform:scaleX(1) }
.whyus-icon-wrap {
  width:48px; height:48px;
  background:rgba(230,57,70,.18);
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px; color:var(--accent);
}
.whyus-num {
  font-family:var(--font-display);
  font-size:4.5rem; font-weight:800; letter-spacing:-.05em; line-height:1;
  color:rgba(255,255,255,.05);
  position:absolute; top:12px; right:16px;
  user-select:none;
}
.whyus-card h3 {
  color:#fff; font-size:clamp(1rem,1.8vw,1.15rem);
  margin-bottom:12px; line-height:1.35;
}
.whyus-card p {
  color:rgba(255,255,255,.68); font-size:0.875rem; line-height:1.8;
}

/* ── Scroll Reveal ───────────────────────────────────────── */
.rv { opacity:0; transform:translateY(28px); transition:opacity .6s ease, transform .6s ease }
.rv.in { opacity:1; transform:translateY(0) }
@media (prefers-reduced-motion:reduce) { .rv { opacity:1; transform:none; transition:none } }

/* ── Responsive: 1024px ─────────────────────────────────── */
@media (max-width:1024px) {
  .whyus-grid { grid-template-columns:repeat(2,1fr) }
  .proc-steps { grid-template-columns:repeat(3,1fr) }
  .proc-steps::before { display:none }
  .feat-cards,.feat-grid { grid-template-columns:1fr 1fr }
  .meta-cards { grid-template-columns:repeat(2,1fr) }
}

/* ── Responsive: 768px ───────────────────────────────────── */
@media (max-width:768px) {
  .nseo-grid { grid-template-columns:repeat(3,1fr) }
  .hamburger { display:flex }

  #main-nav {
    position:fixed; top:0; left:0; width:100%; height:100vh;
    background:var(--primary); display:flex; align-items:center; justify-content:center;
    transform:translateX(100%); transition:transform .35s ease;
    z-index:100;
  }
  #main-nav.open { transform:translateX(0) }
  #main-nav ul { flex-direction:column; gap:24px; text-align:center }
  #main-nav a { font-size:1.3rem; color:#fff !important }
  #main-nav .nav-cta { padding:12px 32px }

  .region-area-grid { grid-template-columns:repeat(2,1fr) }
  .apt-list { grid-template-columns:1fr }
  .svc-items { grid-template-columns:1fr }
  .footer-inner { grid-template-columns:1fr }
  .footer-services,.footer-links,.footer-brands { display:none }

  .consult-cards { grid-template-columns:1fr }

  .ba-grid { grid-template-columns:1fr }
  .meta-cards { grid-template-columns:1fr 1fr }

  .cases-grid { grid-template-columns:1fr }
  .feat-cards,.feat-grid { grid-template-columns:1fr }
  .proc-steps { grid-template-columns:1fr 1fr }
  .svc-gallery { grid-template-columns:1fr 1fr }
  .pd-nav { grid-template-columns:1fr }

  .stats-grid { grid-template-columns:1fr 1fr }
  .services-grid { grid-template-columns:1fr 1fr }
  .regions-grid { grid-template-columns:repeat(3,1fr) }
}

/* ── Responsive: 560px ───────────────────────────────────── */
@media (max-width:560px) {
  .nseo-grid { grid-template-columns:1fr }
  .whyus-grid { grid-template-columns:1fr }
  .proc-steps { grid-template-columns:1fr }
  .svc-gallery { grid-template-columns:1fr }
  .stats-grid { grid-template-columns:1fr }
  .services-grid { grid-template-columns:1fr }
  .region-area-grid { grid-template-columns:1fr }
  .regions-grid { grid-template-columns:1fr 1fr }
  .meta-cards { grid-template-columns:1fr }
  .method-cards,.method-grid { grid-template-columns:1fr }
  .hero-cta { flex-direction:column }
  .hero-cta .btn-primary,.hero-cta .btn-outline { width:100%; justify-content:center }
}