/* =========================================================
   Kadraj Studyo — Design System v4
   Deep charcoal + warm ivory + copper accent
   Fully reworked layout & content display
   ========================================================= */

:root {
  --c-ivory:       #f6f4ef;
  --c-ivory-deep:  #edeae3;
  --c-white:       #ffffff;
  --c-white-warm:  #faf8f5;
  --c-charcoal:    #1c1917;
  --c-charcoal-80: #302b27;
  --c-charcoal-60: #524d48;
  --c-stone:       #7a7470;
  --c-stone-light: #a29d98;
  --c-copper:      #b07530;
  --c-copper-light:#c98e4a;
  --c-copper-glow: #f8ecd8;
  --c-copper-dim:  rgba(176,117,48,0.10);
  --c-line:        #ddd8d1;
  --c-line-light:  #eae6df;
  --c-glass:       rgba(246,244,239,0.85);
  --c-overlay:     rgba(28,25,23,0.55);
  --c-ok:          #3a7d52;
  --c-err:         #b83b3b;

  --f-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-serif: Georgia, 'Times New Roman', serif;

  --fs-xs:  0.8125rem;
  --fs-sm:  0.9375rem;
  --fs-md:  1.0625rem;
  --fs-lg:  1.1875rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.375rem;
  --fs-4xl: 3.125rem;
  --fs-hero:3.75rem;

  --s-2: 0.25rem;
  --s-4: 0.5rem;
  --s-8: 1rem;
  --s-12: 1.5rem;
  --s-16: 2rem;
  --s-24: 3rem;
  --s-32: 4rem;
  --s-48: 6rem;
  --s-64: 8rem;

  --w: 1160px;
  --w-narrow: 860px;
  --header-h: 64px;
  --r: 6px;
  --r-lg: 12px;

  --sh-1: 0 1px 2px rgba(0,0,0,0.04);
  --sh-2: 0 4px 16px rgba(0,0,0,0.06);
  --sh-3: 0 12px 40px rgba(0,0,0,0.09);

  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast: 0.15s;
  --t-mid:  0.3s;
  --t-slow: 0.5s;
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:100%;scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{overflow-x:hidden}
body{font-family:var(--f-sans);font-size:var(--fs-md);line-height:1.65;color:var(--c-charcoal-60);background:var(--c-ivory);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;padding-top:var(--header-h)}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--c-copper);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--c-copper-light)}
ul,ol{padding-left:var(--s-12)}
button,input,select,textarea{font:inherit;color:inherit}
address{font-style:normal}
h1,h2,h3,h4,h5,h6{color:var(--c-charcoal);font-family:var(--f-serif);line-height:1.25;font-weight:700}

/* ===== LAYOUT ===== */
.container{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--s-16)}
.container--narrow{max-width:var(--w-narrow)}
.text-center{text-align:center}
.text-sm{font-size:var(--fs-sm)}
.text-muted{color:var(--c-stone)}
.mt-1{margin-top:var(--s-8)}

/* ===== ACCESSIBILITY ===== */
.skip-link{position:absolute;top:-100%;left:var(--s-8);background:var(--c-charcoal);color:#fff;padding:var(--s-4) var(--s-8);border-radius:var(--r);z-index:9999;font-size:var(--fs-sm);transition:top var(--t-fast) var(--ease)}
.skip-link:focus{top:var(--s-8);color:#fff}
:focus-visible{outline:2px solid var(--c-copper);outline-offset:2px}

/* =============================================================
   HEADER
   ============================================================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--c-ivory);
  border-bottom:1px solid var(--c-line);
  height:var(--header-h);
  transition:box-shadow var(--t-mid) var(--ease);
}
.site-header.scrolled{box-shadow:var(--sh-2)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:100%}

.logo{display:flex;align-items:center;gap:var(--s-4);text-decoration:none;color:var(--c-charcoal);flex-shrink:0}
.logo svg{flex-shrink:0}
.logo-icon{width:32px;height:32px}
.logo-text{font-family:var(--f-serif);font-size:var(--fs-lg);font-weight:700;letter-spacing:-0.03em}
.logo-sub{display:block;font-family:var(--f-sans);font-size:var(--fs-xs);font-weight:400;color:var(--c-stone);letter-spacing:0.06em;text-transform:uppercase}

.main-nav ul{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0}
.main-nav a,.nav-list a{display:block;padding:6px 14px;color:var(--c-charcoal-60);font-size:var(--fs-sm);border-radius:var(--r);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);white-space:nowrap;text-decoration:none}
.main-nav a:hover,.nav-list a:hover,.main-nav a[aria-current="page"],.nav-list a[aria-current="page"]{background:var(--c-copper-glow);color:var(--c-copper)}

.menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;cursor:pointer;border-radius:var(--r);transition:background var(--t-fast) var(--ease)}
.menu-toggle:hover{background:var(--c-ivory-deep)}
.menu-toggle svg{width:22px;height:22px;stroke:var(--c-charcoal);fill:none;stroke-width:2;transition:opacity var(--t-fast) var(--ease)}
.menu-toggle .icon-close{display:none}
.menu-toggle[aria-expanded="true"] .icon-menu{display:none}
.menu-toggle[aria-expanded="true"] .icon-close{display:block}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-4);padding:10px 24px;font-size:var(--fs-md);font-weight:600;line-height:1.4;border:1.5px solid transparent;border-radius:var(--r);cursor:pointer;text-decoration:none;transition:all var(--t-fast) var(--ease);white-space:nowrap}
.btn-primary{background:var(--c-copper);color:#fff;border-color:var(--c-copper)}
.btn-primary:hover{background:var(--c-copper-light);border-color:var(--c-copper-light);color:#fff}
.btn-secondary{background:transparent;color:var(--c-copper);border-color:var(--c-copper)}
.btn-secondary:hover{border-color:var(--c-copper-light);background:var(--c-copper-glow);color:var(--c-copper-light)}
.btn-ghost{background:transparent;color:var(--c-charcoal-60);border-color:transparent;padding:8px 14px}
.btn-ghost:hover{background:var(--c-ivory-deep)}
.btn-sm{padding:7px 14px;font-size:var(--fs-sm)}
.btn-lg{padding:14px 32px;font-size:var(--fs-lg)}

/* =============================================================
   HERO (homepage)
   ============================================================= */
.hero{
  padding:var(--s-64) 0 var(--s-48);
  text-align:center;
  background:linear-gradient(180deg, var(--c-white-warm) 0%, var(--c-ivory) 100%);
  border-bottom:1px solid var(--c-line-light);
}
.hero h1{font-size:var(--fs-hero);letter-spacing:-0.03em;margin-bottom:var(--s-12);max-width:740px;margin-left:auto;margin-right:auto}
.hero p,.hero-subtitle{font-size:var(--fs-xl);color:var(--c-stone);line-height:1.55;margin-bottom:var(--s-24);max-width:600px;margin-left:auto;margin-right:auto}
.hero-actions{display:flex;gap:var(--s-8);justify-content:center;flex-wrap:wrap;margin-top:var(--s-16)}

/* =============================================================
   PAGE HERO (inner pages)
   ============================================================= */
.page-hero,.page-header{
  padding:var(--s-48) 0 var(--s-32);
  text-align:center;
  background:linear-gradient(180deg, var(--c-white-warm) 0%, var(--c-ivory) 100%);
  border-bottom:1px solid var(--c-line-light);
}
.page-hero h1,.page-header h1{font-size:var(--fs-3xl);letter-spacing:-0.025em;margin-bottom:var(--s-8)}
.page-hero p,.subtitle,.page-hero-sub,.page-header p{font-size:var(--fs-lg);color:var(--c-stone);max-width:560px;margin:0 auto;line-height:1.6}

.breadcrumb{font-size:var(--fs-sm);color:var(--c-stone-light);display:flex;align-items:center;justify-content:center;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-12)}
.breadcrumb a{color:var(--c-copper);font-weight:500}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb span{color:var(--c-line);margin:0 2px}

/* =============================================================
   SECTIONS — generous vertical rhythm, alternating backgrounds
   ============================================================= */
.section{padding:var(--s-48) 0}
.section-alt,.section--alt{background:var(--c-white-warm)}
.section-header{text-align:center;margin-bottom:var(--s-32)}
.section h2,.section-header h2,.section-title{font-size:var(--fs-2xl);margin-bottom:var(--s-12);text-align:center}
.section-header p,.section-intro{font-size:var(--fs-lg);color:var(--c-stone);max-width:560px;line-height:1.6;margin:0 auto var(--s-24)}
.section-header p{margin-left:auto;margin-right:auto}

/* Section p (general section paragraphs) — centered, readable width */
.section > .container > p{
  max-width:var(--w-narrow);
  margin-left:auto;
  margin-right:auto;
  line-height:1.75;
  color:var(--c-charcoal-60);
  margin-bottom:var(--s-12);
}
.section > .container > p:last-child{margin-bottom:0}

/* =============================================================
   GRID
   ============================================================= */
.grid{display:grid;gap:var(--s-16)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* =============================================================
   CARDS (homepage services)
   ============================================================= */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16);margin-top:var(--s-24)}
.card{
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:var(--c-charcoal-60);
  background:var(--c-white);border:1px solid var(--c-line-light);
  border-radius:var(--r-lg);padding:var(--s-24) var(--s-16);
  text-align:center;
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);color:var(--c-charcoal-60)}
.card-icon{margin-bottom:var(--s-12);color:var(--c-copper)}
.card-icon svg{width:48px;height:48px}
.card h3{font-size:var(--fs-xl);margin-bottom:var(--s-8)}
.card p{color:var(--c-stone);font-size:var(--fs-sm);line-height:1.7}

/* =============================================================
   STEPS (homepage process)
   ============================================================= */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-16);margin-top:var(--s-24)}
.step{
  background:var(--c-white);border:1px solid var(--c-line-light);
  border-radius:var(--r-lg);padding:var(--s-24) var(--s-16);
  text-align:center;
  transition:box-shadow var(--t-mid) var(--ease);
}
.step:hover{box-shadow:var(--sh-2)}
.step-number{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  background:var(--c-copper);color:#fff;
  font-family:var(--f-serif);font-size:var(--fs-xl);font-weight:700;
  border-radius:50%;margin-bottom:var(--s-12);
}
.step h3{font-size:var(--fs-lg);margin-bottom:var(--s-8)}
.step p{color:var(--c-stone);font-size:var(--fs-sm);line-height:1.7}

/* =============================================================
   SERVICE SECTIONS (hizmetler page)
   Two-column layout: text + image side by side
   ============================================================= */
.service-section{padding:var(--s-48) 0;position:relative}
.service-section:nth-child(even){background:var(--c-white-warm)}

.service-section .container{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:var(--s-32);
  align-items:start;
}

.service-section h2{
  font-size:var(--fs-2xl);margin-bottom:var(--s-12);
  padding-left:var(--s-12);border-left:3px solid var(--c-copper);
  text-align:left;
  grid-column:1 / -1;
}
.service-section p{font-size:var(--fs-md);line-height:1.8;color:var(--c-charcoal-60);margin-bottom:var(--s-8)}
.service-section ul{
  list-style:none;padding:0;margin:var(--s-8) 0;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-16);
  grid-column:1 / -1;
}
.service-section li{
  position:relative;padding-left:1.4em;font-size:var(--fs-sm);color:var(--c-stone);line-height:1.65;
}
.service-section li::before{content:'';position:absolute;left:0;top:0.55em;width:7px;height:7px;border:1.5px solid var(--c-copper);border-radius:50%}

/* =============================================================
   CONTENT IMAGE — block-level, no float
   ============================================================= */
.content-image{
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);
  transition:box-shadow var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
}
.content-image:hover{box-shadow:0 8px 32px rgba(0,0,0,0.12);transform:translateY(-2px)}
.content-image img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:4/3;background:var(--c-ivory-deep)}
.content-image figcaption{font-size:var(--fs-xs);color:var(--c-stone-light);padding:var(--s-4);text-align:center}

/* Wide variant — large but not full-bleed */
.content-image--wide{
  width:100%;max-width:680px;
  margin:var(--s-24) auto;border-radius:var(--r-lg);
}

/* Left variant — same as default in grid context */
.content-image--left{/* handled by grid order */}

/* Image placeholder */
.img-placeholder{
  aspect-ratio:4/3;max-width:380px;width:100%;
  background:linear-gradient(135deg,var(--c-ivory-deep) 0%,var(--c-line-light) 100%);
  border-radius:var(--r-lg);margin:var(--s-12) 0;
}

/* =============================================================
   CONTENT BODY — article layout for guide / info pages
   ============================================================= */
.content-body{
  max-width:var(--w-narrow);margin:0 auto;
  padding:var(--s-48) var(--s-16);
}

.content-body h2{
  font-size:var(--fs-2xl);
  margin:var(--s-32) 0 var(--s-12) 0;
  padding-bottom:var(--s-8);
  border-bottom:2px solid var(--c-copper-glow);
  position:relative;
  text-align:left;
}
.content-body h2::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:50px;height:2px;background:var(--c-copper);
}
.content-body h2:first-child{margin-top:0}

.content-body h3{font-size:var(--fs-xl);margin:var(--s-24) 0 var(--s-4)}

.content-body p{
  font-size:var(--fs-lg);line-height:1.9;
  color:var(--c-charcoal-60);margin-bottom:var(--s-12);
}
.content-body p:last-child{margin-bottom:0}
.content-body h2+p{color:var(--c-stone)}

.content-body ul,.content-body ol{list-style:none;padding:0;margin-bottom:var(--s-12)}
.content-body li{position:relative;padding-left:1.5em;margin-bottom:var(--s-4);font-size:var(--fs-lg);line-height:1.75;color:var(--c-charcoal-60)}
.content-body ul li::before{content:'';position:absolute;left:2px;top:0.6em;width:6px;height:6px;background:var(--c-copper);border-radius:50%;opacity:0.65}
.content-body ol{counter-reset:ol}
.content-body ol li{counter-increment:ol}
.content-body ol li::before{content:counter(ol);position:absolute;left:0;top:0;font-weight:700;font-size:var(--fs-sm);color:var(--c-copper);width:1.2em;text-align:center}

.content-body a:not(.btn){color:var(--c-copper);text-decoration:underline;text-decoration-color:var(--c-copper-glow);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color var(--t-fast)}
.content-body a:not(.btn):hover{text-decoration-color:var(--c-copper)}

/* Content body images — block, constrained width */
.content-body .content-image{
  margin:var(--s-24) auto;
  width:100%;max-width:560px;
}

/* Legal variant */
.legal-body h2{font-size:var(--fs-xl);margin:var(--s-24) 0 var(--s-8);padding-bottom:var(--s-4);border-bottom:1px solid var(--c-line-light)}
.legal-body h2::after{display:none}
.legal-body h3{font-size:var(--fs-lg);margin:var(--s-16) 0 var(--s-4)}
.legal-body p,.legal-body li{font-size:var(--fs-sm);color:var(--c-stone);line-height:1.8}
.legal-body ul,.legal-body ol{margin-bottom:var(--s-8)}
.legal-body li{margin-bottom:var(--s-4)}

/* =============================================================
   PROCESS STEPS — vertical timeline
   ============================================================= */
.process-steps{position:relative;padding-left:40px;margin:var(--s-24) 0}
.process-steps::before{content:'';position:absolute;left:17px;top:20px;bottom:20px;width:2px;background:var(--c-line)}
.process-step{display:flex;gap:var(--s-12);align-items:flex-start;position:relative;padding:var(--s-12) 0}
.process-step-number{position:absolute;left:-40px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--c-copper);color:#fff;font-family:var(--f-serif);font-size:var(--fs-md);font-weight:700;border-radius:50%;z-index:1;box-shadow:0 0 0 4px var(--c-ivory)}
.process-step-content h3{font-size:var(--fs-lg);margin-bottom:var(--s-2)}
.process-step-content p{color:var(--c-stone);font-size:var(--fs-sm);line-height:1.65}

/* =============================================================
   CTA SECTION
   ============================================================= */
.cta-section{padding:var(--s-48) 0;text-align:center;background:var(--c-white-warm);border-top:1px solid var(--c-line-light)}
.cta-section h2{font-size:var(--fs-2xl);margin-bottom:var(--s-8)}
.cta-section p{color:var(--c-stone);margin-bottom:var(--s-16);max-width:520px;margin-left:auto;margin-right:auto}
.cta-buttons{display:flex;gap:var(--s-8);justify-content:center;flex-wrap:wrap}

/* pricing/faq teasers on homepage */
.pricing-teaser,.faq-teaser{text-align:center}
.pricing-teaser h2,.faq-teaser h2{font-size:var(--fs-2xl);margin-bottom:var(--s-12)}
.pricing-teaser p,.faq-teaser p{color:var(--c-stone);margin-bottom:var(--s-16);line-height:1.7;max-width:var(--w-narrow);margin-left:auto;margin-right:auto}
.pricing-teaser .btn,.faq-teaser .btn{margin-top:var(--s-8)}

/* services/process overview on homepage */
.services-overview,.process-overview{text-align:center}
.services-overview .section-intro,.process-overview .section-intro{text-align:center}

/* =============================================================
   PRICING
   ============================================================= */
/* Table wrapper — scrollable on small screens */
.table-wrapper{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:var(--s-16);
  border:1px solid var(--c-line-light);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
}
.table-wrapper::-webkit-scrollbar{height:6px}
.table-wrapper::-webkit-scrollbar-track{background:var(--c-ivory-deep);border-radius:3px}
.table-wrapper::-webkit-scrollbar-thumb{background:var(--c-stone-light);border-radius:3px}

.price-table{width:100%;border-collapse:collapse;background:var(--c-white);min-width:560px}
.price-table thead{background:var(--c-charcoal);color:#fff}
.price-table th,.price-table td{padding:var(--s-8) var(--s-16);text-align:left;vertical-align:middle}
.price-table th{font-weight:600;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:0.04em;padding-top:var(--s-12);padding-bottom:var(--s-12)}
.price-table tbody tr{border-bottom:1px solid var(--c-line-light);transition:background var(--t-fast)}
.price-table tbody tr:last-child{border-bottom:none}
.price-table tbody tr:nth-child(even){background:var(--c-white-warm)}
.price-table tbody tr:hover{background:var(--c-copper-glow)}
.price-table td:first-child{font-weight:600;color:var(--c-charcoal)}
.price-table td:last-child{font-weight:700;color:var(--c-copper);white-space:nowrap}

.price-disclaimer{background:var(--c-copper-glow);border-left:3px solid var(--c-copper);padding:var(--s-12) var(--s-16);border-radius:0 var(--r) var(--r) 0;margin-bottom:var(--s-16)}
.price-disclaimer h2{font-size:var(--fs-lg);margin-bottom:var(--s-4);text-align:left}
.price-disclaimer p{font-size:var(--fs-sm);color:var(--c-stone);line-height:1.65;margin-bottom:var(--s-4)}
.price-disclaimer p:last-child{margin-bottom:0}

.price-card{
  background:var(--c-white);border:1px solid var(--c-line-light);
  border-radius:var(--r-lg);padding:var(--s-24);
  text-align:center;display:flex;flex-direction:column;
  transition:transform var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.price-card:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.price-card h3{font-size:var(--fs-xl);margin-bottom:var(--s-4)}
.price-range{font-size:var(--fs-2xl);font-weight:700;color:var(--c-copper);margin-bottom:var(--s-12)}
.price-card ul{list-style:none;padding:0;text-align:left;margin-bottom:var(--s-16);flex:1}
.price-card li{padding:var(--s-4) 0;border-bottom:1px solid var(--c-line-light);font-size:var(--fs-sm);padding-left:1.3em;position:relative}
.price-card li::before{content:'';position:absolute;left:0;top:50%;width:5px;height:5px;background:var(--c-copper);border-radius:50%;transform:translateY(-50%)}
.price-card li:last-child{border-bottom:none}
.price-card .btn{margin-top:auto}

.info-block{background:var(--c-white);border:1px solid var(--c-line-light);border-radius:var(--r-lg);padding:var(--s-16)}
.info-block h3{font-size:var(--fs-lg);margin-bottom:var(--s-8);text-align:left}
.info-block p{color:var(--c-stone);font-size:var(--fs-sm);line-height:1.7}

.payment-info{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-16);margin-top:var(--s-16)}
.payment-step{background:var(--c-white);border:1px solid var(--c-line-light);border-radius:var(--r-lg);padding:var(--s-16)}
.payment-step h3{font-size:var(--fs-lg);font-weight:600;margin-bottom:var(--s-8);text-align:left}
.payment-step p{color:var(--c-stone);font-size:var(--fs-sm);line-height:1.7}

/* General tables (cerez-politikasi, etc) */
.table-responsive{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--c-line-light);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);margin:var(--s-12) 0;
}
.table-responsive::-webkit-scrollbar{height:6px}
.table-responsive::-webkit-scrollbar-track{background:var(--c-ivory-deep);border-radius:3px}
.table-responsive::-webkit-scrollbar-thumb{background:var(--c-stone-light);border-radius:3px}
.table-responsive table,
.content-body table{
  width:100%;border-collapse:collapse;background:var(--c-white);min-width:480px;
}
.table-responsive thead,
.content-body table thead{background:var(--c-charcoal-80);color:#fff}
.table-responsive th,
.table-responsive td,
.content-body table th,
.content-body table td{padding:var(--s-8) var(--s-12);text-align:left;vertical-align:middle;font-size:var(--fs-sm)}
.table-responsive th,
.content-body table th{font-weight:600;text-transform:uppercase;letter-spacing:0.03em;padding-top:var(--s-8);padding-bottom:var(--s-8)}
.table-responsive tbody tr,
.content-body table tbody tr{border-bottom:1px solid var(--c-line-light)}
.table-responsive tbody tr:last-child,
.content-body table tbody tr:last-child{border-bottom:none}
.table-responsive tbody tr:nth-child(even),
.content-body table tbody tr:nth-child(even){background:var(--c-white-warm)}
.table-responsive tbody tr:hover,
.content-body table tbody tr:hover{background:var(--c-copper-glow)}

/* Pricing page section h2 should be left-aligned for table/cards context */
.section > .container > h2{text-align:center;margin-bottom:var(--s-12)}
.section > .container > .price-disclaimer + .table-wrapper{margin-top:0}

/* =============================================================
   FAQ — smooth open/close with grid animation
   ============================================================= */
.faq-list{margin:var(--s-16) 0;max-width:var(--w-narrow);margin-left:auto;margin-right:auto}
.faq-list .faq-item,details.faq-item{border:1px solid var(--c-line-light);border-radius:var(--r);margin-bottom:var(--s-8);background:var(--c-white);transition:box-shadow var(--t-fast) var(--ease)}
.faq-list .faq-item:hover,details.faq-item:hover{box-shadow:var(--sh-1)}
.faq-list .faq-item h3{font-size:var(--fs-lg);font-weight:600;padding:var(--s-12) var(--s-16) var(--s-4);line-height:1.5}
.faq-list .faq-item p{padding:0 var(--s-16) var(--s-12);color:var(--c-stone);font-size:var(--fs-sm);line-height:1.7}

details.faq-item summary,.faq-question{display:flex;align-items:center;justify-content:space-between;padding:var(--s-12) var(--s-16);cursor:pointer;font-size:var(--fs-lg);font-weight:600;color:var(--c-charcoal);line-height:1.45;gap:var(--s-8);list-style:none}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::marker{display:none;content:''}
.faq-question:hover{color:var(--c-copper)}
.faq-icon{width:18px;height:18px;flex-shrink:0;transition:transform 0.3s var(--ease);color:var(--c-stone-light)}
.faq-icon.is-open{transform:rotate(45deg)}

/* Smooth expand/collapse via max-height (JS-driven) */
.faq-answer{
  overflow:hidden;
  max-height:0;
  transition:max-height 0.3s var(--ease);
  color:var(--c-stone);line-height:1.7;
}
.faq-answer-inner{
  padding:0 var(--s-16) var(--s-12);
}
.faq-answer-inner p{margin-bottom:var(--s-4)}
.faq-answer-inner p:last-child{margin-bottom:0}

/* =============================================================
   CONTACT — info cards + standalone form card
   ============================================================= */
.contact-layout{
  display:flex;flex-direction:column;gap:var(--s-32);
  max-width:var(--w-narrow);margin:0 auto;
}

/* Contact info cards grid */
.contact-cards{
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-12);
}
.contact-card{
  background:var(--c-white);border:1px solid var(--c-line-light);
  border-radius:var(--r-lg);padding:var(--s-16);
  display:flex;align-items:flex-start;gap:var(--s-8);
  transition:box-shadow var(--t-fast) var(--ease);
}
.contact-card:hover{box-shadow:var(--sh-2)}
.contact-card-icon{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--c-copper-glow);border-radius:var(--r);
  color:var(--c-copper);
}
.contact-card-icon svg{width:20px;height:20px}
.contact-card-body{flex:1;min-width:0}
.contact-card-label{
  display:block;font-size:var(--fs-xs);font-weight:600;
  color:var(--c-stone);text-transform:uppercase;letter-spacing:0.04em;
  margin-bottom:2px;
}
.contact-card-value{
  font-size:var(--fs-md);color:var(--c-charcoal);line-height:1.5;
}
.contact-card-value a{color:var(--c-copper);text-decoration:none}
.contact-card-value a:hover{text-decoration:underline}
.contact-note{
  font-size:var(--fs-sm);color:var(--c-stone);line-height:1.65;
  text-align:center;margin-top:var(--s-4);
}

/* Form as standalone card */
.contact-form-card{
  background:var(--c-white);border:1px solid var(--c-line-light);
  border-radius:var(--r-lg);padding:var(--s-24) var(--s-32);
  box-shadow:var(--sh-2);
}
.contact-form-card h2{
  font-size:var(--fs-2xl);margin-bottom:var(--s-16);text-align:center;
}

/* Legacy grid fallback */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-32);align-items:start}
.contact-info h2,.contact-form-wrapper h2{font-size:var(--fs-2xl);margin-bottom:var(--s-12);text-align:left}
.contact-list{list-style:none;padding:0;margin-bottom:var(--s-16)}
.contact-list li{padding:var(--s-8) 0;border-bottom:1px solid var(--c-line-light);line-height:1.55}
.contact-list li:last-child{border-bottom:none}
.contact-list strong{display:block;font-size:var(--fs-sm);color:var(--c-charcoal);text-transform:uppercase;letter-spacing:0.03em;margin-bottom:2px}

/* =============================================================
   FORM
   ============================================================= */
.form-group{margin-bottom:var(--s-12)}
.form-group label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--c-charcoal);margin-bottom:var(--s-4)}
.required{color:var(--c-err);margin-left:2px}
.form-group input[type="text"],.form-group input[type="email"],.form-group input[type="tel"],.form-group textarea,.form-input,.form-textarea{width:100%;padding:10px 14px;font-size:var(--fs-md);background:var(--c-white);border:1px solid var(--c-line);border-radius:var(--r);transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.form-group input:focus,.form-group textarea:focus,.form-input:focus,.form-textarea:focus{outline:none;border-color:var(--c-copper);box-shadow:0 0 0 3px var(--c-copper-dim)}
.form-group textarea{min-height:120px;resize:vertical}
.form-group input.error,.form-group textarea.error{border-color:var(--c-err)}
.form-consent{display:flex;align-items:flex-start;gap:var(--s-4)}
.consent-label{display:flex;align-items:flex-start;gap:var(--s-4);cursor:pointer}
.form-consent input[type="checkbox"],.consent-label input[type="checkbox"]{width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:var(--c-copper);cursor:pointer}
.form-consent label,.consent-label span{font-size:var(--fs-sm);color:var(--c-stone);line-height:1.55}
.form-message{padding:var(--s-8) var(--s-12);border-radius:var(--r);font-size:var(--fs-sm);margin-top:var(--s-8);display:none}
.form-message.success{display:block;background:#e8f5e9;color:var(--c-ok);border:1px solid #c8e6c9}
.form-message.error{display:block;background:#fbe9e9;color:var(--c-err);border:1px solid #f5c6c6}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer{background:var(--c-charcoal);color:rgba(255,255,255,0.65);padding:var(--s-48) 0 0;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-24);margin-bottom:var(--s-24)}
.footer-brand .logo-text{color:#fff;font-size:var(--fs-xl)}
.footer-brand p{margin-top:var(--s-8);font-size:var(--fs-sm);line-height:1.65;color:rgba(255,255,255,0.4);max-width:260px}
.footer-col{display:flex;flex-direction:column}
.footer-col h4{color:#fff;font-family:var(--f-serif);font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:var(--s-8)}
.footer-col ul{list-style:none;padding:0}
.footer-col li{margin-bottom:var(--s-4)}
.footer-col a{color:rgba(255,255,255,0.55);text-decoration:none;font-size:var(--fs-sm);transition:color var(--t-fast) var(--ease)}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.08);padding:var(--s-12) 0;font-size:var(--fs-xs);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-8);color:rgba(255,255,255,0.35)}
.footer-bottom p{margin:0}
.footer-bottom a{color:rgba(255,255,255,0.4);text-decoration:none}
.footer-bottom a:hover{color:#fff}

/* =============================================================
   COOKIE BANNER
   ============================================================= */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:var(--c-white);border-top:1px solid var(--c-line);box-shadow:0 -4px 20px rgba(0,0,0,0.08);padding:var(--s-12) var(--s-16);transform:translateY(100%);transition:transform var(--t-slow) var(--ease)}
.cookie-banner.visible{transform:translateY(0)}
.cookie-banner-inner{max-width:var(--w);margin:0 auto;display:flex;align-items:center;gap:var(--s-16);flex-wrap:wrap}
.cookie-banner-text{flex:1;min-width:240px}
.cookie-banner-text p{font-size:var(--fs-sm);color:var(--c-stone);line-height:1.55;margin:0}
.cookie-banner-actions{display:flex;gap:var(--s-4);flex-shrink:0;flex-wrap:wrap}

/* Cookie modal */
.cookie-modal-overlay{position:fixed;inset:0;z-index:1001;background:var(--c-overlay);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--t-mid) var(--ease),visibility var(--t-mid) var(--ease);padding:var(--s-16)}
.cookie-modal-overlay.visible{opacity:1;visibility:visible}
.cookie-modal{background:var(--c-white);border-radius:var(--r-lg);max-width:500px;width:100%;max-height:85vh;overflow-y:auto;padding:var(--s-24);box-shadow:var(--sh-3)}
.cookie-modal h2,.cookie-modal h3{font-size:var(--fs-xl);margin-bottom:var(--s-12)}
.cookie-modal>p{font-size:var(--fs-sm);color:var(--c-stone);margin-bottom:var(--s-12);line-height:1.55}
.cookie-modal-actions{display:flex;gap:var(--s-4);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--s-16)}
.cookie-category{border:1px solid var(--c-line-light);border-radius:var(--r);padding:var(--s-8) var(--s-12);margin-bottom:var(--s-8);display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-8)}
.cookie-category-header{flex:1}
.cookie-category-header h3{font-size:var(--fs-md);font-weight:600;margin-bottom:0}
.cookie-category p{font-size:var(--fs-sm);color:var(--c-stone);margin-top:var(--s-2);line-height:1.5}

/* Toggle */
.toggle{position:relative;width:42px;height:22px;flex-shrink:0;display:inline-block}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--c-line);border-radius:11px;transition:background var(--t-fast) var(--ease)}
.toggle-slider::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform var(--t-fast) var(--ease)}
.toggle input:checked+.toggle-slider{background:var(--c-copper)}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px)}
.toggle input:disabled+.toggle-slider{opacity:0.5;cursor:not-allowed}

/* =============================================================
   SITEMAP
   ============================================================= */
.sitemap-list{list-style:none;padding:0;columns:2;column-gap:var(--s-24)}
.sitemap-list li{padding:var(--s-4) 0;border-bottom:1px solid var(--c-line-light);break-inside:avoid}

/* =============================================================
   404
   ============================================================= */
.error-page{text-align:center;padding:var(--s-64) var(--s-16);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.error-page h1,.error-code{font-size:8rem;color:var(--c-line);line-height:1;margin-bottom:var(--s-8)}
.error-page h2{font-size:var(--fs-2xl);margin-bottom:var(--s-8)}
.error-page p{color:var(--c-stone);margin-bottom:var(--s-24);max-width:400px}

/* =============================================================
   ANIMATIONS
   ============================================================= */
.fade-in{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.fade-in.visible{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}.fade-in{opacity:1;transform:none}.cookie-banner{transition:none}}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s-16)}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .payment-info{grid-template-columns:1fr}
  .service-section .container{grid-template-columns:1fr;gap:var(--s-16)}
  .service-section .content-image{max-width:480px;margin:0 auto}
}

@media(max-width:768px){
  :root{--fs-hero:2.5rem;--fs-4xl:2.25rem;--fs-3xl:1.75rem;--fs-2xl:1.5rem;--s-48:4rem;--s-32:2.5rem;--s-64:5rem}
  .container{padding:0 var(--s-8)}

  .menu-toggle{display:flex}
  .main-nav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:var(--c-white);padding:var(--s-16);transform:translateX(100%);transition:transform var(--t-mid) var(--ease);overflow-y:auto;z-index:99}
  .main-nav.open{transform:translateX(0)}
  .main-nav ul,.nav-list{flex-direction:column;align-items:stretch;gap:0}
  .main-nav a,.nav-list a{font-size:var(--fs-md);padding:var(--s-8);border-bottom:1px solid var(--c-line-light);border-radius:0}

  .grid-2,.grid-3{grid-template-columns:1fr}
  .card-grid,.steps-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .contact-cards{grid-template-columns:1fr}
  .contact-form-card{padding:var(--s-16)}
  .footer-grid{grid-template-columns:1fr}
  .service-section ul{grid-template-columns:1fr}

  .process-steps{padding-left:30px}
  .process-step-number{left:-30px;width:28px;height:28px;font-size:var(--fs-sm)}
  .process-steps::before{left:13px}
  .process-step{flex-direction:column;align-items:center;text-align:center}

  .cookie-banner-inner{flex-direction:column;align-items:stretch}
  .cookie-banner-actions{justify-content:stretch}
  .cookie-banner-actions .btn{flex:1;text-align:center}

  .sitemap-list{columns:1}
  .price-table{font-size:var(--fs-sm)}
  .price-table th,.price-table td{padding:var(--s-4) var(--s-8)}
  .footer-bottom{flex-direction:column;text-align:center}
  .hero-actions{flex-direction:column;align-items:center}
}

@media(max-width:480px){
  .hero{padding:var(--s-32) 0}
  .cookie-modal{padding:var(--s-12)}
  .cta-buttons{flex-direction:column}
}
